*{box-sizing:border-box}html,body,#root{overscroll-behavior:none;width:100%;height:100%;margin:0;padding:0}body{color:#e8ecf5;background:#05070d;font-family:Inter,system-ui,Segoe UI,Roboto,sans-serif}:root{--accent:#4fd1ff;--accent-2:#a78bfa;--bg-deep:#05070d;--panel-bg:#101420b8;--panel-border:#78aaff29;--text:#e8ecf5;--text-dim:#8b93a7;--mono:"JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace}.app{background:radial-gradient(ellipse 1200px 800px at 15% -10%, #4fd1ff24, transparent 60%), radial-gradient(ellipse 900px 700px at 100% 100%, #a78bfa1f, transparent 55%), var(--bg-deep);width:100vw;height:100dvh;display:flex;overflow:hidden}.panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--panel-border);box-sizing:border-box;z-index:2;flex-shrink:0;width:380px;padding:28px 26px;position:relative;overflow-y:auto}.panel::-webkit-scrollbar{width:6px}.panel::-webkit-scrollbar-thumb{background:#8ca0c840;border-radius:3px}.brand{align-items:center;gap:10px;margin-bottom:4px;display:flex}.brand-mark{background:linear-gradient(135deg, var(--accent), var(--accent-2));border-radius:8px;flex-shrink:0;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:3px;width:30px;height:30px;padding:5px;display:grid;box-shadow:0 0 18px #4fd1ff73}.brand-mark span{background:#05070dd9;border-radius:2px}.panel h1{letter-spacing:-.01em;background:linear-gradient(135deg,#fff,#b8c6e0);color:#0000;background-clip:text;margin:0;font-size:18px;font-weight:700}.subtitle{color:var(--text-dim);margin:10px 0 26px;font-size:12.5px;line-height:1.5}.panel section{margin-bottom:24px}.panel h2{text-transform:uppercase;letter-spacing:.12em;color:var(--accent);align-items:center;gap:8px;margin:0 0 12px;font-size:11px;font-weight:600;display:flex}.panel h2:after{content:"";background:linear-gradient(90deg,#4fd1ff59,#0000);flex:1;height:1px}.panel label{color:var(--text-dim);margin-bottom:12px;font-size:12.5px;display:block}.panel label.checkbox{color:var(--text);align-items:center;gap:10px;display:flex}.panel label.checkbox input{width:auto;accent-color:var(--accent)}.panel input[type=number]{width:100%;color:var(--text);font-family:var(--mono);box-sizing:border-box;background:#080b1499;border:1px solid #7891be38;border-radius:8px;margin-top:6px;padding:10px 12px;font-size:14px;transition:border-color .15s,box-shadow .15s;display:block}.panel input[type=number]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #4fd1ff26}.row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.battery-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.battery-btn{color:var(--text);cursor:pointer;background:#ffffff08;border:1px solid #7891be33;border-radius:8px;padding:11px 8px;font-size:13px;font-weight:500;transition:all .15s}.battery-btn:hover{border-color:var(--accent);background:#4fd1ff14}.battery-btn.active{border-color:var(--accent);color:#fff;background:linear-gradient(135deg,#4fd1ff38,#a78bfa38);box-shadow:0 0 16px #4fd1ff2e}.battery-meta{color:var(--text-dim);font-size:12px;font-family:var(--mono);margin-top:10px}.layout-info{font-size:22px;font-weight:700;font-family:var(--mono);color:var(--text);align-items:baseline;gap:10px;display:flex}.layout-info .muted{color:var(--text-dim);font-family:Inter,system-ui,sans-serif;font-size:12px;font-weight:400}.error{color:#ff9d9d;background:#ff50501f;border:1px solid #ff50504d;border-radius:8px;margin-bottom:16px;padding:10px 12px;font-size:12px}.export-btn{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#06090f;cursor:pointer;letter-spacing:.01em;border:none;border-radius:10px;width:100%;padding:15px;font-size:15px;font-weight:700;transition:transform .12s,box-shadow .12s,opacity .12s;box-shadow:0 4px 24px #4fd1ff40}.export-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.export-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 28px #4fd1ff61}.export-btn:active:not(:disabled){transform:translateY(0)}.footnote{color:var(--text-dim);font-size:11px;font-family:var(--mono);margin-top:20px;line-height:1.6}.attribution{color:var(--text-dim);opacity:.7;margin-top:12px;font-size:10px;line-height:1.5}.viewer-wrap{flex:1;min-width:0;position:relative}.viewer-hint{color:var(--text-dim);backdrop-filter:blur(8px);border:1px solid var(--panel-border);pointer-events:none;white-space:nowrap;background:#0a0d168c;border-radius:999px;padding:6px 14px;font-size:11px;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}@media (width<=760px){.app{flex-direction:column}.panel{border-right:none;border-top:1px solid var(--panel-border);order:2;width:100%;max-height:52dvh;padding:20px}.viewer-wrap{flex:1;order:1;min-height:40dvh}.row{gap:10px}.battery-grid{grid-template-columns:1fr 1fr}.viewer-hint{display:none}}