: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: 12px}*{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) 10px calc(env(safe-area-inset-bottom) + 72px)}.topbar{display:flex;align-items:baseline;justify-content:space-between;padding:12px 4px 8px;position:sticky;top:0;background:linear-gradient(var(--bg) 70%,transparent);z-index:5}.topbar h1{font-size:18px;margin:0;letter-spacing:1px}.patch{font-size:11px;color:var(--muted)}.roombar{display:flex;align-items:center;gap:6px;padding:6px 4px 10px;font-size:13px;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:8px;color:var(--text);padding:7px 10px;font-size:14px;letter-spacing:2px}.roombar button{border:none;background:var(--tile-bg);border-radius:8px;padding:7px 12px;font-size:13px}.roombar .nick{max-width:96px;letter-spacing:normal}.roombar button.on{background:var(--accent);color:#04121a;font-weight:600}.autofill-note{justify-content:center;font-size:11px;padding-top:0}.install{display:flex;align-items:center;gap:8px;margin:0 4px 8px;padding:8px 10px;background:var(--panel-bg);border:1px solid #2b3850;border-radius:10px;font-size:13px}.install span{flex:1}.install button{border:none;background:var(--accent);color:#04121a;border-radius:8px;padding:6px 12px;font-weight:600}.install button.ghost{background:var(--tile-bg);color:var(--muted);font-weight:400}.aug-hints{display:flex;flex-wrap:wrap;gap:4px}.aug-hint{font-size:11px;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}.empty{margin:40px 12px;color:var(--muted);text-align:center;line-height:1.9}.board{display:flex;flex-direction:column;gap:10px}.card{background:var(--card-bg);border-radius:var(--radius);padding:10px;border:1px solid #232c3d}.card-head{display:flex;align-items:center;gap:10px}.champ-icon{width:44px;height:44px;border-radius:8px;background:var(--tile-bg);object-fit:cover}.champ-meta{flex:1;min-width:0}.champ-name{font-weight:600;font-size:15px}.level-row{display:flex;align-items:center;gap:8px;margin-top:2px;color:var(--muted);font-size:13px}.level-row button{width:28px;height:28px;border:none;border-radius:8px;background:var(--tile-bg);font-size:16px;line-height:1}.card-actions{display:flex;gap:6px}.card-actions button{width:34px;height:34px;border:none;border-radius:8px;background:var(--tile-bg);font-size:15px}.card-actions button.on{background:var(--accent);color:#04121a}.tiles{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.tile-wrap{position:relative}.tile{width:70px;height:70px;border:1px solid #2b3850;border-radius:14px;background:var(--tile-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;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:12px;color:var(--muted)}.tile-flash .tile-label{color:var(--gold)}.tile-ult .tile-label{color:var(--accent)}.tile-hint{font-size:13px;color:var(--muted)}.tile-time{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}.tile.running{background-clip:padding-box}.tile.running .tile-time{color:#fff}.tile-ready{font-size:16px;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 14px 2px #3fb950cc}}.tile-clear{position:absolute;top:-6px;right:-6px;width:22px;height:22px;border-radius:50%;border:none;background:var(--danger);color:#fff;font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center}.panel{margin-top:10px;padding-top:10px;border-top:1px solid #232c3d;display:flex;flex-direction:column;gap:8px}.panel-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.panel-row select,.panel input[type=number]{background:var(--tile-bg);border:1px solid #2b3850;border-radius:8px;color:var(--text);padding:6px 8px;font-size:14px}.panel-row input[type=number]{width:72px}.panel-section{font-size:12px;color:var(--muted);margin-top:4px}.chip-row{display:flex;flex-wrap:wrap;gap:6px}.chip{border:1px solid #2b3850;background:var(--tile-bg);border-radius:999px;padding:6px 12px;font-size:13px}.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:6px}.bucket{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;color:var(--muted)}.bucket input{width:100%!important;text-align:center}.bottombar{position:fixed;bottom:0;left:0;right:0;padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);background:linear-gradient(transparent,var(--bg) 40%);max-width:540px;margin:0 auto}.add-btn{width:100%;padding:14px;border:none;border-radius:12px;background:var(--accent);color:#04121a;font-size:16px;font-weight:700}.add-btn:disabled{background:var(--tile-bg);color:var(--muted)}.footnote{margin:10px 4px 0;font-size:11px;color:var(--muted);text-align:center;line-height:1.6}.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(64px,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:52px;height:52px;border-radius:8px;background:var(--tile-bg)}.champ-pick span{font-size:11px;color:var(--muted);text-align:center;line-height:1.2}