:root{--bg: #0a0e14;--panel-bg: #121823;--card-bg: #161d2b;--tile-bg: #1e2738;--accent: #5bc0eb;--gold: #f7b32b;--danger: #e5484d;--text: #e6edf3;--muted: #8b97a7;--ok: #3fb950;--radius: 10px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:-apple-system,Noto Sans TC,Microsoft JhengHei,system-ui,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none}button{font-family:inherit;color:var(--text);cursor:pointer}.app{max-width:540px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding:env(safe-area-inset-top) 8px calc(env(safe-area-inset-bottom) + 54px)}.topbar{display:flex;align-items:baseline;justify-content:space-between;padding:6px 4px 4px;position:sticky;top:0;background:linear-gradient(var(--bg) 70%,transparent);z-index:5}.topbar h1{font-size:15px;margin:0;letter-spacing:.5px}.patch{font-size:10px;color:var(--muted)}.roombar{display:flex;align-items:center;gap:5px;padding:3px 4px 6px;font-size:12px;color:var(--muted)}.roombar.muted{justify-content:center}.roombar b{color:var(--gold);letter-spacing:2px}.roombar input{flex:1;min-width:0;background:var(--tile-bg);border:1px solid #2b3850;border-radius:7px;color:var(--text);padding:5px 8px;font-size:13px;letter-spacing:2px}.roombar button{border:none;background:var(--tile-bg);border-radius:7px;padding:5px 10px;font-size:12px}.roombar .nick{max-width:84px;letter-spacing:normal}.roombar button.on{background:var(--accent);color:#04121a;font-weight:600}.autofill-note{justify-content:center;font-size:10px;padding-top:0}.install{display:flex;align-items:center;gap:6px;margin:0 4px 6px;padding:6px 9px;background:var(--panel-bg);border:1px solid #2b3850;border-radius:9px;font-size:12px}.install span{flex:1}.install button{border:none;background:var(--accent);color:#04121a;border-radius:7px;padding:5px 10px;font-weight:600}.install button.ghost{background:var(--tile-bg);color:var(--muted);font-weight:400}.empty{margin:32px 12px;color:var(--muted);text-align:center;line-height:1.8;font-size:13px}.board{display:flex;flex-direction:column;gap:6px}.card{background:var(--card-bg);border-radius:var(--radius);padding:6px 7px;border:1px solid #232c3d}.card-head{display:flex;align-items:center;gap:7px}.champ-icon{width:30px;height:30px;border-radius:6px;background:var(--tile-bg);object-fit:cover}.champ-meta{flex:1;min-width:0;display:flex;align-items:center;gap:8px}.champ-name{font-weight:600;font-size:13px}.level-row{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}.level-row button{width:22px;height:22px;border:none;border-radius:6px;background:var(--tile-bg);font-size:14px;line-height:1}.card-actions{display:flex;gap:5px}.card-actions button{width:26px;height:26px;border:none;border-radius:6px;background:var(--tile-bg);font-size:13px}.card-actions button.on{background:var(--accent);color:#04121a}.tiles{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.tile-wrap{position:relative}.tile{width:50px;height:50px;border:1px solid #2b3850;border-radius:10px;background:var(--tile-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;transition:transform .05s}.tile:active{transform:scale(.94)}.tile-flash{border-color:var(--gold)}.tile-ult{border-color:var(--accent)}.tile-label{font-size:10px;color:var(--muted)}.tile-flash .tile-label{color:var(--gold)}.tile-ult .tile-label{color:var(--accent)}.tile-hint{font-size:11px;color:var(--muted)}.tile-time{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}.tile.running .tile-time{color:#fff}.tile-ready{font-size:12px;font-weight:700;color:#04121a}.tile.ready{background:var(--ok)!important;border-color:var(--ok);animation:flash .7s ease-in-out infinite alternate}@keyframes flash{0%{box-shadow:0 0 #3fb95000}to{box-shadow:0 0 12px 2px #3fb950cc}}.tile-clear{position:absolute;top:-5px;right:-5px;width:19px;height:19px;border-radius:50%;border:none;background:var(--danger);color:#fff;font-size:10px;line-height:1;display:flex;align-items:center;justify-content:center}.panel{margin-top:8px;padding-top:8px;border-top:1px solid #232c3d;display:flex;flex-direction:column;gap:7px}.panel-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.panel-row select,.panel input[type=number]{background:var(--tile-bg);border:1px solid #2b3850;border-radius:7px;color:var(--text);padding:5px 7px;font-size:13px}.panel-row input[type=number]{width:64px}.haste-readout{color:var(--accent);font-size:13px;font-weight:600}.panel-section{font-size:11px;color:var(--muted);margin-top:2px}.chip-row{display:flex;flex-wrap:wrap;gap:5px}.chip{border:1px solid #2b3850;background:var(--tile-bg);border-radius:999px;padding:4px 10px;font-size:12px}.chip.on{background:var(--accent);color:#04121a;border-color:var(--accent);font-weight:600}.bucket-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.bucket{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--muted)}.bucket input{width:100%!important;text-align:center}.aug-hints{display:flex;flex-wrap:wrap;gap:4px}.aug-hint{font-size:10px;color:var(--muted);background:var(--tile-bg);border-radius:6px;padding:2px 6px}.aug-hint em{color:var(--accent);font-style:normal;margin-left:4px}.bottombar{position:fixed;bottom:0;left:0;right:0;padding:6px 10px calc(env(safe-area-inset-bottom) + 6px);background:linear-gradient(transparent,var(--bg) 40%);max-width:540px;margin:0 auto}.add-btn{width:100%;padding:10px;border:none;border-radius:10px;background:var(--accent);color:#04121a;font-size:14px;font-weight:700}.add-btn:disabled{background:var(--tile-bg);color:var(--muted)}.footnote{margin:6px 4px 0;font-size:9px;color:var(--muted);text-align:center;line-height:1.5}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:flex-end;z-index:20}.modal{background:var(--panel-bg);width:100%;max-width:540px;margin:0 auto;max-height:80vh;border-radius:16px 16px 0 0;display:flex;flex-direction:column;padding:12px}.modal-head{display:flex;gap:8px;margin-bottom:10px}.modal-head input{flex:1;background:var(--tile-bg);border:1px solid #2b3850;border-radius:10px;color:var(--text);padding:10px 12px;font-size:15px}.modal-head button{border:none;background:var(--tile-bg);border-radius:10px;padding:0 14px}.champ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px;overflow-y:auto}.champ-pick{border:none;background:transparent;display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px}.champ-pick img{width:48px;height:48px;border-radius:8px;background:var(--tile-bg)}.champ-pick span{font-size:11px;color:var(--muted);text-align:center;line-height:1.2}