:root{color-scheme:dark;--bg:#070b10;--panel:#101720;--panel2:#151e2a;--line:#283548;--text:#edf4f7;--muted:#8999ad;--accent:#53e2c3;--danger:#ff7b72;--blue:#7ea8ff}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:300px;background:radial-gradient(circle at 70% -10%,#172336 0,transparent 35%),var(--bg);color:var(--text);font:14px/1.45 Inter,Segoe UI,system-ui,sans-serif}.topbar{padding:20px clamp(16px,4vw,48px);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;background:rgba(7,11,16,.85)}h1,h2,p{margin:0}.eyebrow,.card-title>span,.card-title>div>span{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.15em}.topbar h1{font-size:clamp(24px,3vw,36px);margin:3px 0}.topbar p:last-child{color:var(--muted)}.open-button{background:var(--accent);color:#07110f;padding:11px 16px;border-radius:10px;font-weight:800;cursor:pointer;white-space:nowrap}.layout{display:grid;grid-template-columns:minmax(0,1fr) 370px;min-height:calc(100vh - 126px)}.canvas-column{display:flex;flex-direction:column;min-width:0}.toolbar{min-height:56px;padding:9px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#0d131c}.toolbar h2{font-size:14px;margin-right:auto}.tool-group{display:flex;align-items:center;gap:4px;border:1px solid var(--line);background:#080d13;padding:3px;border-radius:9px}.tool{border:0;background:transparent;color:var(--muted);padding:7px 9px;border-radius:6px;cursor:pointer}.tool.active,.tool:hover{background:#223147;color:var(--text)}#zoomOutput{min-width:48px;text-align:center;color:var(--accent);font-size:11px}.canvas-wrap{position:relative;flex:1;min-height:550px;overflow:auto;background-color:#080c12;background-image:linear-gradient(45deg,#111b27 25%,transparent 25%),linear-gradient(-45deg,#111b27 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#111b27 75%),linear-gradient(-45deg,transparent 75%,#111b27 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.canvas-wrap canvas{display:block;transform-origin:0 0;image-rendering:pixelated}.empty-state{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding:24px;color:var(--muted)}.empty-state strong{font-size:22px;color:var(--text)}.empty-state span{max-width:440px}.hint{min-height:34px;border-top:1px solid var(--line);display:flex;gap:18px;align-items:center;padding:7px 14px;color:#63748a;font-size:10px;background:#0d131c}.side-panel{padding:12px;background:#090e15;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px;overflow:auto;max-height:calc(100vh - 126px)}.card{background:linear-gradient(180deg,#131c28,#0f161f);border:1px solid var(--line);border-radius:14px;padding:14px}.card-title{display:flex;align-items:center;gap:9px;margin-bottom:12px}.card-title h2{font-size:15px}.frame-title{justify-content:space-between}.frame-title>div{display:flex;align-items:center;gap:9px}.frame-title strong{color:var(--accent);font-size:20px}.tabs{display:grid;grid-template-columns:1fr 1fr;background:#080d13;padding:3px;border:1px solid var(--line);border-radius:9px;margin-bottom:12px}.tab{border:0;background:none;color:var(--muted);padding:7px;border-radius:6px;cursor:pointer}.tab.active{background:#233147;color:var(--text)}.settings{display:flex;flex-direction:column;gap:10px}label{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11px}.range-row{display:grid;grid-template-columns:1fr 52px;gap:8px;align-items:center}.range-row output{text-align:right;color:var(--accent)}input{width:100%;background:#080d13;color:var(--text);border:1px solid #334258;border-radius:8px;padding:8px 9px;font:inherit}input[type=range]{padding:0;accent-color:var(--accent)}input:focus{outline:2px solid rgba(83,226,195,.22);border-color:var(--accent)}.check{flex-direction:row;align-items:center}.check input{width:auto}.button{border:1px solid transparent;border-radius:9px;padding:9px 12px;font-weight:800;cursor:pointer}.button:disabled,.text-button:disabled{opacity:.4;cursor:not-allowed}.primary{background:var(--accent);color:#07110f}.secondary{background:#223147;color:var(--text);border-color:#34445a}.full{width:100%;margin-top:3px}.frames-card{min-height:230px}.frame-actions{display:flex;justify-content:space-between;margin:-5px 0 8px}.text-button{border:0;background:none;color:var(--accent);font:inherit;font-size:11px;cursor:pointer}.text-button.danger{color:var(--danger)}.frame-list{display:flex;flex-direction:column;gap:5px;max-height:250px;overflow:auto}.empty-list{color:var(--muted);text-align:center;padding:24px 8px;border:1px solid var(--line);border-radius:9px}.frame-item{display:grid;grid-template-columns:minmax(0,1fr) 38px;align-items:stretch;border:1px solid var(--line);background:#0b1119;border-radius:9px;overflow:hidden}.frame-item.selected{border-color:var(--accent);background:rgba(83,226,195,.06)}.frame-select{display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;gap:8px;border:0;background:transparent;color:inherit;text-align:left;padding:6px;cursor:pointer}.frame-select:focus-visible,.remove-frame:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.frame-thumb{width:38px;height:38px;display:grid;place-items:center;overflow:hidden;background:#05080d;border-radius:6px}.frame-thumb canvas{max-width:38px;max-height:38px;image-rendering:pixelated}.frame-meta{min-width:0}.frame-meta strong{display:block;font-size:11px;color:var(--accent)}.frame-meta span{display:block;color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.remove-frame{min-width:38px;min-height:44px;border:0;border-left:1px solid var(--line);background:transparent;color:#7f91a7;font-size:18px;cursor:pointer}.remove-frame:hover{color:var(--danger);background:rgba(255,123,114,.08)}.preview-box{height:190px;background-color:#080c12;background-image:linear-gradient(45deg,#14202d 25%,transparent 25%),linear-gradient(-45deg,#14202d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#14202d 75%),linear-gradient(-45deg,transparent 75%,#14202d 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;margin-bottom:9px}.preview-box canvas{image-rendering:pixelated}.preview-controls{display:flex;align-items:end;gap:9px;margin-bottom:9px}.preview-controls label{flex:1}.status{margin-top:10px;padding:9px;border-left:3px solid var(--accent);background:#0a1118;color:var(--muted);font-size:11px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:12px clamp(16px,4vw,48px);color:#607087;font-size:10px}@media(max-width:900px){.layout{grid-template-columns:1fr}.side-panel{max-height:none;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(2,1fr)}.frames-card{grid-row:span 2}.canvas-wrap{min-height:480px}}@media(max-width:620px){.topbar{align-items:flex-start;flex-direction:column}.open-button{width:100%;text-align:center}.side-panel{display:flex}.toolbar{align-items:flex-start}.tool-group{max-width:100%}.hint{flex-direction:column;align-items:flex-start;gap:2px}.canvas-wrap{min-height:420px}.layout{min-height:0}}@media(max-width:360px){.toolbar{padding:8px}.tool{padding:6px}.side-panel{padding:8px}.card{padding:12px}}

.integrated-tools{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 0 0}.integrated-tools .text-button{border:1px solid #2c3949;border-radius:6px;padding:6px;font-size:10px}@media(max-width:520px){.integrated-tools{grid-template-columns:1fr}}

.side-panel>.card{flex:0 0 auto}.coord-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.coord-grid label{min-width:0}.frame-editor-v13,.opaque-detector{margin:8px;border:1px solid #26364a;border-radius:8px;padding:8px}.frame-editor-v13 small,.opaque-detector small{display:block;color:#8091a6;margin-top:7px}.grid-advanced{margin-top:8px}

.range-field{display:flex;flex-direction:column;gap:5px;color:var(--muted);font-size:11px}.range-field>label{display:block;color:inherit;font-size:inherit}

/* V9 accessibility contrast hardening */
.hint{color:#8999ad}