#debug{inset:0;left:0;top:0;padding:24px;z-index:20;background:#102f4670;backdrop-filter:blur(4px);display:grid;place-items:center;border-radius:0;font:13px Inter,'Segoe UI',sans-serif;color:#244b60;cursor:default}
.debug-window{width:min(760px,100%);max-height:calc(100dvh - 48px);display:flex;flex-direction:column;background:#fffdf4;border:1px solid #ffffff9c;border-radius:20px;box-shadow:0 24px 90px #102f4655;overflow:hidden}
.debug-header{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 18px;background:#153e56;color:#fff9e8}.debug-header small{font-size:9px;letter-spacing:2px;color:#a8d7d5}.debug-header h2{margin:6px 0 0;font-size:25px;letter-spacing:-.6px}.debug-header button{width:36px;height:36px;border:1px solid #ffffff38;border-radius:9px;background:#ffffff12;color:#fff9e8;font-size:25px}
.debug-tabs{display:flex;gap:6px;padding:13px 20px;background:#f2f1e6;border-bottom:1px solid #e2e5d9;overflow-x:auto;flex-shrink:0}.debug-tabs button{border:0;border-radius:8px;background:transparent;padding:10px 14px;color:#617c82;font-size:12px;font-weight:750;white-space:nowrap}.debug-tabs button[aria-pressed=true]{background:#153e56;color:#fff9e8}
.debug-body{padding:20px 26px 24px;overflow-y:auto;min-height:0}.debug-live{font-size:10px;color:#398b88;font-weight:750;margin-bottom:15px}.debug-body h3{font-size:21px;letter-spacing:-.4px;margin:0 0 8px}.debug-hint{font-size:12px;line-height:1.6;color:#708589;margin:0 0 18px;max-width:620px}
.debug-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.debug-actions button{position:relative;text-align:left;border:1px solid #dce5df;border-radius:11px;padding:14px 58px 14px 15px;background:#f7f8ef;color:#244b60;min-height:70px}.debug-actions b{display:block;font-size:13px}.debug-actions span{display:block;font-size:11px;line-height:1.5;margin-top:5px;color:#71888a}.debug-actions button.featured{grid-column:1/-1;background:#f9d38b;border-color:#e7b65c;min-height:76px}.debug-actions .featured b{font-size:17px}.debug-actions .featured span{color:#776745}.debug-actions button:hover:not(:disabled){border-color:#53aaa3;background:#edf5eb}.debug-actions .featured:hover:not(:disabled){background:#ffdc9a;border-color:#dca145}.debug-actions button:disabled{opacity:.45;cursor:not-allowed}
#debug kbd{font:700 10px 'Segoe UI',sans-serif;background:#ffffff70;border:1px solid #cbd7d0;border-radius:5px;padding:3px 5px}.debug-actions kbd{position:absolute;right:12px;top:14px}.debug-metrics{white-space:pre-line;font-size:11px;line-height:1.8;color:#54747d}.debug-metrics:not(:empty){padding:12px 14px;margin-bottom:14px;border-radius:9px;background:#edf2e9}.debug-notes p{padding:11px 0 0;margin:12px 0 0;border-top:1px solid #e2e7db;font-size:12px;line-height:1.6;color:#6d8388}
.debug-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 24px;border-top:1px solid #e0e5d8;background:#f2f1e6}.debug-feedback{font-size:10px;color:#6c8488;line-height:1.5}.debug-footer button{border:0;border-radius:8px;padding:11px 14px;background:#eeb650;color:#263e43;font-weight:750;font-size:11px;white-space:nowrap}.debug-footer kbd{margin-left:8px}#debug button:focus-visible{outline:3px solid #4dbbb1;outline-offset:2px}
@media(max-width:600px){#debug{padding:10px}.debug-window{max-height:calc(100dvh - 20px)}.debug-header{padding:16px}.debug-tabs{padding:10px}.debug-tabs button{padding:9px 11px}.debug-body{padding:16px}.debug-actions{grid-template-columns:1fr}.debug-footer{padding:12px}.debug-feedback{max-width:45%}}