:root{--bg:#15171c;--surface:#1e2128;--surface-2:#262a33;--text:#e8eaed;--muted:#9aa0a6;--danger:#e5484d;--accent:#3e63dd;--btn-min:96px}@media (width>=768px){:root{--btn-min:120px}}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.app{min-height:100vh;padding-bottom:72px}.header{border-bottom:1px solid var(--surface-2);background:var(--bg);z-index:10;align-items:center;gap:16px;padding:12px 16px;display:flex;position:sticky;top:0}.header__title{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;margin:0;font-size:18px;overflow:hidden}.header__controls{align-items:center;gap:10px;display:flex}.header__vol{width:140px;max-width:40vw}.header__vol-val{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;min-width:3ch}.btn{background:var(--surface-2);color:var(--text);cursor:pointer;border:none;border-radius:8px;padding:8px 12px;font-size:15px}.btn:hover{filter:brightness(1.15)}.btn--danger{background:var(--danger);color:#fff;font-weight:600}.tabs{z-index:9;background:var(--bg);border-bottom:1px solid var(--surface-2);align-items:stretch;gap:4px;padding:6px 12px;display:flex;position:sticky;top:57px;overflow-x:auto}.tab{background:var(--surface);border-bottom:3px solid #0000;border-radius:8px 8px 0 0;flex:none;align-items:center;display:flex}.tab--active{background:var(--surface-2);border-bottom-color:var(--accent)}.tab--over{outline:2px dashed var(--accent);outline-offset:-2px}.tab__label{color:var(--text);cursor:pointer;white-space:nowrap;background:0 0;border:none;padding:8px 12px;font-size:14px}.tab__edit{color:var(--muted);cursor:pointer;background:0 0;border:none;padding:8px 8px 8px 0;font-size:14px}.tab--add{color:var(--muted);background:var(--surface);cursor:pointer;border:none;padding:8px 12px;font-size:16px}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatch{cursor:pointer;border:2px solid #0000;border-radius:50%;width:28px;height:28px;padding:0}.swatch--sel{border-color:var(--text)}.swatch--none{background:var(--surface-2);position:relative}.swatch--none:after{content:"∅";color:var(--muted);place-items:center;font-size:14px;display:grid;position:absolute;inset:0}.empty-hint{color:var(--muted);text-align:center;padding:24px 4px}.grid-wrap{padding:12px}.grid{grid-template-columns:repeat(auto-fill, minmax(var(--btn-min), 1fr));gap:10px;display:grid}.pad{aspect-ratio:1;background:var(--surface-2);color:var(--text);cursor:pointer;text-align:center;touch-action:manipulation;-webkit-user-select:none;user-select:none;border:none;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:8px;transition:transform 60ms,filter 60ms;display:flex;position:relative;overflow:hidden}.pad--pressed{filter:brightness(1.35);transform:scale(.96)}.pad--cooling{filter:brightness(.5)}.pad__icon,.pad__label,.pad__hint{z-index:1;position:relative}.pad__ring{border-radius:inherit;pointer-events:none;z-index:0;background:conic-gradient(from -90deg, var(--ring-color,var(--accent)) calc(var(--progress,0) * 1turn), transparent 0);position:absolute;inset:0;-webkit-mask:radial-gradient(circle,#0000 58%,#000 61%);mask:radial-gradient(circle,#0000 58%,#000 61%)}.pad__ring--progress{--ring-color:var(--accent)}.pad__ring--cooldown{--ring-color:var(--muted)}.pad__ring--loop{--ring-color:var(--accent);animation:1.2s ease-in-out infinite pad-loop-pulse}@keyframes pad-loop-pulse{0%,to{opacity:.45}50%{opacity:1}}.pad__badge{z-index:1;color:var(--accent);font-size:13px;position:absolute;top:4px;right:6px}.pad__star{z-index:2;color:var(--muted);cursor:pointer;padding:2px;font-size:15px;line-height:1;position:absolute;top:2px;left:4px}.pad__star--on{color:#f5a524}.pad--overlay{cursor:grabbing;opacity:.95;width:var(--btn-min);height:var(--btn-min);box-shadow:0 8px 30px #00000080}.pad__icon{font-size:26px;line-height:1}.pad__label{-webkit-line-clamp:2;word-break:break-word;-webkit-box-orient:vertical;font-size:14px;line-height:1.2;display:-webkit-box;overflow:hidden}.pad__hint{color:var(--muted);font-size:11px}.pad--add{border:2px dashed var(--surface-2);color:var(--muted);background:0 0}.panic-bar{background:var(--danger);color:#fff;letter-spacing:.04em;cursor:pointer;z-index:1000;border:none;width:100%;min-height:56px;font-size:18px;font-weight:700;position:fixed;bottom:0;left:0;right:0}.panic-bar:active{filter:brightness(.9)}.sheet-overlay{z-index:1100;background:#00000080;justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}.sheet{background:var(--surface);border-radius:16px 16px 0 0;gap:16px;width:100%;max-width:480px;margin-bottom:56px;padding:20px;display:grid}.sheet__title{margin:0;font-size:17px}.sheet__actions{justify-content:space-between;gap:12px;display:flex}.field{color:var(--muted);gap:6px;font-size:14px;display:grid}.field input[type=text]{background:var(--surface-2);border:1px solid var(--surface-2);color:var(--text);border-radius:8px;padding:10px;font-size:15px}.field input[type=range]{width:100%}.field--row{color:var(--text);grid-template-columns:1fr auto;align-items:center}.settings__readout{color:var(--muted);margin:0;font-size:13px}.sheet--tall{max-height:calc(100vh - 88px);overflow-y:auto}.field select,.field input[type=number]{background:var(--surface-2);border:1px solid var(--surface-2);color:var(--text);border-radius:8px;padding:10px;font-size:15px}.cliplist{gap:6px;margin:0;padding:0;list-style:none;display:grid}.cliplist__row{align-items:center;gap:6px;display:flex}.cliplist__name{background:var(--surface-2);border:1px solid var(--surface-2);min-width:0;color:var(--text);border-radius:8px;flex:1;padding:8px;font-size:14px}.icon-btn{background:var(--surface-2);width:32px;height:32px;color:var(--text);cursor:pointer;border:none;border-radius:8px;flex:none;font-size:14px}.icon-btn:disabled{opacity:.35;cursor:default}.icon-btn--danger{color:var(--danger)}.trim-track{background:var(--surface-2);touch-action:none;border-radius:8px;width:100%;position:relative;overflow:hidden}.trim-wave{width:100%;height:100%;display:block}.trim-loading{height:100%;color:var(--muted);place-items:center;font-size:13px;display:grid}.trim-mask{pointer-events:none;background:#0000008c;position:absolute;top:0;bottom:0}.trim-handle{background:var(--accent);cursor:ew-resize;touch-action:none;border-radius:3px;width:12px;margin-left:-6px;position:absolute;top:0;bottom:0}.trim-readout{color:var(--muted);font-variant-numeric:tabular-nums;gap:16px;font-size:13px;display:flex}.toast{background:var(--danger);color:#fff;z-index:1200;cursor:pointer;border-radius:10px;max-width:90vw;padding:12px 16px;position:fixed;bottom:72px;left:50%;transform:translate(-50%);box-shadow:0 6px 24px #0006}