:root{--bg: #0c0c12;--panel: rgba(15, 23, 42, .92);--border: rgba(148, 163, 184, .2);--text: #e2e8f0;--muted: #94a3b8;--accent: #2dd4bf;--accent-hover: #5eead4}*,*:before,*:after{box-sizing:border-box;margin:0}html,body,#app{width:100%;height:100%;overflow:hidden;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--text)}#app{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,260px);grid-template-rows:auto 1fr auto;grid-template-areas:"toolbar toolbar" "viewport cache" "hints cache"}@media(max-width:768px){#app{grid-template-columns:1fr;grid-template-areas:"toolbar" "viewport" "cache" "hints"}}.toolbar{grid-area:toolbar;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 1rem;background:var(--panel);border-bottom:1px solid var(--border);z-index:3;flex-shrink:0}.toolbar-brand{font-size:.9rem;font-weight:600;letter-spacing:.02em}.toolbar-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.btn{font:inherit;font-size:.8rem;padding:.4rem .75rem;border-radius:6px;border:1px solid var(--border);background:#1e293bcc;color:var(--text);cursor:pointer;transition:background .15s,border-color .15s}.btn:hover{background:#334155e6;border-color:var(--muted)}.btn.is-active{border-color:var(--accent);color:var(--accent)}.btn-primary{background:#2dd4bf26;border-color:var(--accent);color:var(--accent-hover)}.btn-primary:hover{background:#2dd4bf47}.cache-panel{grid-area:cache;display:flex;flex-direction:column;gap:.5rem;padding:.75rem;background:var(--panel);border-left:1px solid var(--border);overflow:hidden;min-height:0}@media(max-width:768px){.cache-panel{border-left:none;border-top:1px solid var(--border);max-height:40vh}}.cache-panel-head h2{font-size:.85rem;font-weight:600}.cache-panel-note{font-size:.7rem;color:var(--muted);margin-top:.25rem;line-height:1.35}.cache-list{list-style:none;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem;min-height:0}.cache-item{display:flex;align-items:stretch;gap:.25rem}.cache-item.is-active .cache-item-open{border-color:var(--accent);background:#2dd4bf1a}.cache-item-open{flex:1;text-align:left;padding:.45rem .5rem;border-radius:6px;border:1px solid var(--border);background:#1e293b99;color:var(--text);cursor:pointer;font:inherit;font-size:.75rem}.cache-item-open:hover{border-color:var(--muted)}.cache-item-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cache-item-meta{display:block;color:var(--muted);font-size:.68rem;margin-top:.15rem}.cache-item-delete{width:2rem;flex-shrink:0;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1}.cache-item-delete:hover{color:#fecaca;border-color:#f8717180}.cache-empty{font-size:.75rem;color:var(--muted)}.cache-panel-foot{display:flex;flex-direction:column;gap:.5rem;flex-shrink:0}.cache-usage{font-size:.68rem;color:var(--muted)}.btn-danger{border-color:#f8717173;color:#fecaca}.btn-danger:hover{background:#7f1d1d59}#viewport{grid-area:viewport;position:relative;min-height:0}#canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}.drop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0c0c12bf;border:2px dashed var(--accent);margin:1rem;border-radius:12px;pointer-events:none;z-index:2}.drop-overlay p{font-size:1.1rem;color:var(--text)}.status{position:absolute;top:1rem;left:50%;transform:translate(-50%);padding:.35rem .9rem;font-size:.8rem;background:var(--panel);border:1px solid var(--border);border-radius:6px;z-index:2;pointer-events:none}.status.is-error{color:#fecaca;border-color:#f8717166}.status.is-ready{color:var(--accent)}.hints{grid-area:hints;display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;justify-content:center;padding:.5rem 1rem;font-size:.75rem;color:var(--muted);background:var(--panel);border-top:1px solid var(--border)}.hints-privacy{color:var(--accent);opacity:.85}.hints kbd{display:inline-block;padding:.1rem .35rem;margin-right:.25rem;font-size:.7rem;font-family:inherit;background:#1e293be6;border:1px solid var(--border);border-radius:4px;color:var(--text)}@media(max-width:640px){.toolbar{flex-direction:column;align-items:stretch}.hints span:not(.hints-touch){display:none}}@media(hover:none){.hints .hints-touch{display:inline}}@media(hover:hover){.hints .hints-touch{display:none}}