:root{--bg: var(--tg-theme-bg-color, #f4f4f5);--text: var(--tg-theme-text-color, #111);--hint: var(--tg-theme-hint-color, #6b7280);--btn: var(--tg-theme-button-color, #2481cc);--btn-text: var(--tg-theme-button-text-color, #fff);--secondary: var(--tg-theme-secondary-bg-color, #fff);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent}#app{min-height:100dvh;padding:12px 14px calc(80px + var(--safe-bottom))}.card-title{font-size:1.05rem;margin:0 0 4px;font-weight:600}h1{font-size:1.25rem;margin:0 0 4px;font-weight:600}.sub{color:var(--hint);font-size:.85rem;margin:0 0 16px}.pid{color:var(--hint);font-size:.7rem;font-family:ui-monospace,monospace}.card{background:var(--secondary);border-radius:14px;padding:14px;margin-bottom:10px;box-shadow:0 1px 2px #0000000f}.card.tap{cursor:pointer}.card.tap:active{opacity:.85}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.chip{min-height:52px;min-width:calc(50% - 4px);flex:1 1 calc(50% - 4px);padding:10px 12px;border:2px solid transparent;border-radius:12px;background:var(--bg);text-align:left;cursor:pointer;transition:border-color .15s}.chip:active{transform:scale(.98)}.chip.assigned{opacity:.45}.chip.selected{border-color:var(--btn);background:color-mix(in srgb,var(--btn) 12%,var(--bg))}.chip-order{display:inline-block;width:1.2em;font-weight:700;color:var(--btn);margin-right:4px}.chip-name{font-size:.95rem;font-weight:600;display:block}.chip-login{font-size:.75rem;color:var(--hint)}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.btn{border:none;border-radius:10px;padding:10px 14px;font-size:.9rem;cursor:pointer;background:var(--bg);color:var(--text)}.btn.active{background:var(--btn);color:var(--btn-text)}.btn-ghost{background:transparent;color:var(--btn);border:1px solid color-mix(in srgb,var(--btn) 40%,transparent)}.clips{display:flex;flex-direction:column;gap:10px;margin:14px 0}.clip-card{border-radius:12px;padding:12px;background:var(--bg);border:2px solid transparent}.clip-card.active{border-color:var(--btn)}.clip-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:.85rem;color:var(--hint)}.clip-actions{display:flex;gap:8px;align-items:center}.play-btn{width:48px;height:48px;border-radius:50%;border:none;background:var(--btn);color:var(--btn-text);font-size:1.1rem;cursor:pointer}.play-row{display:flex;gap:12px;align-items:center}audio{display:none}.empty{text-align:center;color:var(--hint);padding:40px 16px}.error{color:#b91c1c;padding:12px;background:#fef2f2;border-radius:10px;margin-bottom:12px}.toast{position:fixed;bottom:calc(72px + var(--safe-bottom));left:50%;transform:translate(-50%);background:#000c;color:#fff;padding:8px 16px;border-radius:20px;font-size:.85rem;z-index:100;pointer-events:none}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;display:flex;align-items:flex-end;z-index:50;padding:12px;padding-bottom:calc(12px + var(--safe-bottom))}.modal{width:100%;background:var(--secondary);border-radius:16px 16px 12px 12px;padding:16px}.modal h2{margin:0 0 12px;font-size:1rem}.field{margin-bottom:10px}.field label{display:block;font-size:.8rem;color:var(--hint);margin-bottom:4px}.field input{width:100%;padding:10px 12px;border:1px solid color-mix(in srgb,var(--hint) 30%,transparent);border-radius:10px;font-size:1rem;background:var(--bg);color:var(--text)}.modal-actions{display:flex;gap:8px;margin-top:14px}.modal-actions .btn{flex:1}.search-panel{margin-top:8px}.search-panel input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid color-mix(in srgb,var(--hint) 25%,transparent);font-size:1rem;margin-bottom:8px;background:var(--bg);color:var(--text)}.clip-mixed{font-size:.75rem;color:var(--btn);margin-top:6px}