:root{color:#e5edf6;background:#111827;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--panel: #f7f4ee;--ink: #172033;--muted: #697485;--line: #d9dee7;--accent: #0f766e;--accent-strong: #0b5f59;--steel: #263241;--app-bg: linear-gradient(135deg, rgba(15, 118, 110, .16), transparent 36%), radial-gradient(circle at 78% 14%, rgba(251, 191, 36, .12), transparent 30%), #111827;--viewport-bg: #101827;--viewport-border: rgba(226, 232, 240, .18);--toolbar-bg: rgba(15, 23, 42, .82);--toolbar-text: #f8fafc;--toolbar-muted: #b9c7d8;--toolbar-border: rgba(226, 232, 240, .18);--callout-bg: rgba(17, 24, 39, .82);--callout-text: #f8fafc;--scrim-bg: rgba(15, 23, 42, .42)}:root[data-theme=light]{color:#172033;background:#eef2f7;--panel: #ffffff;--ink: #172033;--muted: #64748b;--line: #d7deea;--accent: #0f766e;--accent-strong: #0b5f59;--steel: #e8edf5;--app-bg: linear-gradient(135deg, rgba(20, 184, 166, .16), transparent 36%), radial-gradient(circle at 78% 14%, rgba(245, 158, 11, .14), transparent 30%), #eef2f7;--viewport-bg: #eef2f7;--viewport-border: rgba(15, 23, 42, .12);--toolbar-bg: rgba(255, 255, 255, .86);--toolbar-text: #172033;--toolbar-muted: #64748b;--toolbar-border: rgba(15, 23, 42, .12);--callout-bg: rgba(255, 255, 255, .88);--callout-text: #172033;--scrim-bg: rgba(15, 23, 42, .28)}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}button{font:inherit;-webkit-tap-highlight-color:transparent}.app-shell{position:relative;min-height:100%;overflow:hidden;background:var(--app-bg)}.top-bar{position:fixed;top:max(10px,env(safe-area-inset-top));left:10px;right:10px;z-index:8;display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:8px;align-items:center;min-height:54px;padding:6px;border:1px solid var(--toolbar-border);background:var(--toolbar-bg);color:var(--toolbar-text);backdrop-filter:blur(18px);box-shadow:0 16px 42px #00000047}.icon-button,.load-button,.primary-action,.menu-row,.tool-grid button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid transparent;cursor:pointer}.icon-button{width:42px;color:inherit;background:#ffffff14;border-color:#ffffff1f}.icon-button.light{color:var(--ink);background:#fff;border-color:var(--line)}.load-button{min-width:92px;padding:0 14px;color:#ecfeff;background:var(--accent)}.load-button:active,.primary-action:active{background:var(--accent-strong)}.title-lockup{display:grid;grid-template-columns:22px minmax(0,1fr);gap:9px;align-items:center;min-width:0}.title-lockup strong,.title-lockup span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title-lockup strong{font-size:15px;line-height:1.1}.title-lockup span{margin-top:3px;color:var(--toolbar-muted);font-size:12px}.viewer-panel{min-height:100vh;padding:10px}.viewport{position:relative;width:100%;height:calc(100vh - 20px);min-height:420px;overflow:hidden;border:1px solid var(--viewport-border);background:var(--viewport-bg)}.viewport.dragging{outline:3px solid #14b8a6;outline-offset:-10px}.drop-callout,.loading{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:2;display:inline-flex;align-items:center;gap:12px;min-width:220px;min-height:56px;justify-content:center;border:1px solid rgba(255,255,255,.22);background:var(--callout-bg);color:var(--callout-text);box-shadow:0 20px 60px #00000047;cursor:pointer}.loading{min-width:64px}.spin{animation:spin 1s linear infinite}.file-input{display:none}.scrim{position:fixed;inset:0;z-index:10;pointer-events:none;background:#0f172a00;transition:background .18s ease}.scrim.visible{pointer-events:auto;background:var(--scrim-bg)}.bottom-panel{position:fixed;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));z-index:9;display:grid;gap:10px;max-height:min(44vh,360px);overflow-y:auto;padding:12px;color:var(--ink);background:#f7f4eed1;border:1px solid rgba(226,232,240,.45);box-shadow:0 18px 60px #00000052;backdrop-filter:blur(18px)}:root[data-theme=light] .bottom-panel{background:#ffffffc7;border-color:#0f172a1f}.bottom-panel-header{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:10px;align-items:center}.bottom-panel-header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.bottom-panel-content{display:grid;gap:9px}.bottom-panel .tool-grid,.bottom-panel .segmented-control{width:100%}.drawer{position:fixed;top:0;left:0;z-index:11;display:flex;flex-direction:column;gap:16px;width:min(390px,92vw);height:100%;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));overflow-y:auto;color:var(--ink);background:var(--panel);border-right:1px solid var(--line);box-shadow:24px 0 68px #00000059;transform:translate(-102%);transition:transform .19s ease}.drawer.open{transform:translate(0)}.drawer-header{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:12px;align-items:start}h1,h2,p{margin:0;letter-spacing:0}h1{font-size:23px;line-height:1.1}h2{color:#334155;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}p{margin-top:5px;color:var(--muted);font-size:13px;line-height:1.35}.menu-section{display:grid;gap:9px}.primary-action,.menu-row{width:100%;min-height:44px;padding:0 12px}.primary-action{color:#ecfeff;background:var(--accent)}.menu-row,.tool-grid button{color:var(--ink);background:#fff;border-color:var(--line)}.menu-row{justify-content:flex-start}.menu-row.active-row{color:#042f2e;background:#ccfbf1;border-color:#5eead4}.recent-row span{display:grid;min-width:0}.recent-row small{margin-top:2px;color:var(--muted);font-size:11px}.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tool-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.tool-grid.compact button{min-height:38px;gap:5px;font-size:12px}.segmented-control{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-height:42px;padding:4px;background:#e8edf5;border:1px solid var(--line)}.segmented-control button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;color:#334155;background:transparent;border:1px solid transparent;cursor:pointer}.segmented-control button.active{color:#042f2e;background:#fff;border-color:#cbd5e1;box-shadow:0 4px 14px #0f172a14}:root[data-theme=dark] .segmented-control{background:#e8edf5}.tool-grid button.active{color:#042f2e;background:#ccfbf1;border-color:#5eead4}.range-row{display:grid;gap:8px;padding:10px;background:#fff;border:1px solid var(--line)}.range-row.glass{background:#ffffffb8}.range-row span{display:inline-flex;align-items:center;gap:7px;color:#334155;font-size:13px;font-weight:700}.range-row input{width:100%;accent-color:var(--accent)}.menu-row:disabled,.tool-grid button:disabled{opacity:.45;cursor:default}.stats{display:grid;gap:8px}.stats div{display:grid;gap:4px;padding:10px 0;border-top:1px solid var(--line)}.stats span{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.stats strong{min-width:0;overflow-wrap:anywhere;font-size:14px;font-weight:700}.menu-note{display:grid;grid-template-columns:18px minmax(0,1fr);gap:9px;align-items:start;padding:11px;color:#475569;background:#fff;border:1px solid var(--line);font-size:13px;line-height:1.35}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:620px){.top-bar{grid-template-columns:44px minmax(0,1fr) 78px;min-height:52px}.load-button{min-width:74px;padding:0 10px}.viewer-panel{padding:0}.viewport{height:100vh;min-height:100vh;border:none}.bottom-panel{left:8px;right:8px;max-height:48vh}}