:root {
  /* Accent — used sparingly: primary actions, active states, key numbers */
  --red:#dc2626;--red-light:#fee2e2;--red-dark:#b91c1c;--red-ink:#7f1d1d;
  /* Neutral scale — does most of the hierarchy work (Refactoring UI: lean on grays, not borders) */
  --bg:#f3f4f6;--surface:#fff;--surface2:#f8f9fb;--surface3:#eef0f4;--border:#e7e8ec;--border-soft:#f0f1f4;
  --text:#0f1320;--text2:#5b6072;--text3:#9499ab;
  --win:#15803d;--win-bg:#dcfce7;--loss:#dc2626;--loss-bg:#fee2e2;--draw:#b45309;--draw-bg:#fef3c7;
  /* Elevation — soft, layered shadows instead of hard borders to separate surfaces */
  --shadow-xs:0 1px 2px rgba(15,19,32,.04);
  --shadow:0 1px 2px rgba(15,19,32,.04),0 4px 12px rgba(15,19,32,.06);
  --shadow-md:0 8px 24px rgba(15,19,32,.10),0 2px 6px rgba(15,19,32,.05);
  --shadow-lg:0 20px 48px rgba(15,19,32,.16),0 6px 16px rgba(15,19,32,.08);
  /* Spacing scale — fewer, deliberate steps */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;
  /* Radius scale */
  --radius-sm:8px;--radius:16px;--radius-lg:20px;--nav-h:64px;--nav-float-h:66px;
  --header-bg:var(--red);
}
[data-theme="dark"] {
  --bg:#0c0e15;--surface:#171a24;--surface2:#1f2330;--surface3:#272b3a;--border:#2b2f40;--border-soft:#22263380;
  --text:#f3f4f8;--text2:#9aa0bc;--text3:#5d6280;
  --win:#34d399;--win-bg:#0c2b1d;--loss:#f87171;--loss-bg:#3a1212;--draw:#fbbf24;--draw-bg:#332405;
  --shadow-xs:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.28);
  --shadow-md:0 10px 28px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:0 24px 56px rgba(0,0,0,.55),0 8px 20px rgba(0,0,0,.35);
  --red-light:#3a1212;--red-dark:#fca5a5;--red-ink:#fecaca;
  --header-bg:var(--surface);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
/* html-Hintergrund = Nav-Farbe (surface). CSS propagiert die Root-Background auf die GESAMTE
   Canvas inkl. der iOS-Standalone-Lücke unten → die Lücke verschmilzt mit der Nav-Leiste, unsichtbar. */
html{height:100%;overflow:hidden;background:var(--surface);}
body{height:100%;overflow:hidden;background:var(--bg);}
body{color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.1px;}
/* #app füllt 100% von body (das nachweislich den ganzen Schirm füllt). Kein JS-Höhen-Override mehr
   und kein vh/dvh — die lassen #app auf iOS-Standalone kürzer als den echten Schirm → Nav schwebte. */
#app{height:100%;display:flex;flex-direction:column;overflow:hidden;}
/* Desktop: fill the screen, wider content */
@media(min-width:768px){
  .content{max-width:960px;padding:var(--sp-6) var(--sp-8);padding-bottom:calc(var(--nav-float-h) + 32px);}
  .content.home-screen{padding:0;padding-bottom:calc(var(--nav-float-h) + 32px);}
  .nav{max-width:560px;}
  .home-hero{height:300px;}
  .modal{max-width:540px;margin:0 auto;}
  .modal-overlay{align-items:center;}
}
.header{background:var(--header-bg);padding:var(--sp-4) var(--sp-4) 14px;padding-top:calc(var(--sp-4) + env(safe-area-inset-top));position:sticky;top:0;z-index:10;box-shadow:0 1px 0 rgba(0,0,0,.06),0 6px 20px rgba(0,0,0,.08);}
.header-inner{display:flex;align-items:center;position:relative;}
.header-left{display:flex;align-items:center;gap:10px;}
.header-center{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:9px;pointer-events:none;}
.header-title{font-size:17px;font-weight:800;color:white;letter-spacing:-.4px;line-height:1.15;}
.header-sub{font-size:12px;color:rgba(255,255,255,.68);margin-top:1px;text-align:center;font-weight:500;}
.header-settings{background:rgba(255,255,255,.16);border:none;color:white;width:34px;height:34px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:background .15s;}
.header-settings:active{background:rgba(255,255,255,.28);}
/* Content scrolls above the floating nav — extra bottom padding so last card isn't hidden */
.content{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--sp-4);padding-bottom:calc(var(--nav-float-h) + 28px + env(safe-area-inset-bottom));max-width:720px;margin:0 auto;width:100%;}
/* Floating pill nav — fixed, centered, floats above content */
.nav{position:fixed;bottom:env(safe-area-inset-bottom,0px);left:50%;transform:translateX(-50%);background:var(--surface2);border-radius:24px;display:flex;padding:6px;gap:2px;border:1px solid var(--border-soft);box-shadow:0 8px 32px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.12);width:calc(100% - 32px);max-width:420px;z-index:100;}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--text3);font-size:9.5px;font-weight:600;border:none;background:none;transition:color .15s,background .15s;padding:7px 0;border-radius:18px;height:50px;letter-spacing:.1px;}
.nav-btn.active{background:var(--red);color:white;}
.nav-btn svg{width:20px;height:20px;stroke-width:2;}
/* Hide header on home screen — hero replaces it */
.screen-home .header{display:none;}
/* Home screen content: safe-area top gap so hero doesn't bleed behind status bar */
.content.home-screen{padding:env(safe-area-inset-top) 0 calc(var(--nav-float-h) + 28px + env(safe-area-inset-bottom));}
/* Hero */
.home-hero{position:relative;height:210px;overflow:hidden;background:var(--bg);}
.home-hero-img{position:absolute;right:0;top:0;bottom:0;width:58%;background-size:cover;background-position:top center;background-repeat:no-repeat;}
.home-hero-img-left{position:absolute;left:0;top:0;bottom:0;width:42%;background-size:cover;background-position:top center;background-repeat:no-repeat;opacity:.82;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.95) 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.95) 100%);}
.home-hero-grad{position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 30%,transparent 75%);}
.home-hero-grad2{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg) 0%,transparent 45%);}
.home-hero-inner{position:relative;padding:16px 16px 18px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;}
.home-hero-greet{font-size:10.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;}
.home-hero-name{font-size:27px;font-weight:900;color:var(--text);letter-spacing:-.7px;margin-top:2px;line-height:1;}
.home-hero-chip{display:inline-flex;align-items:center;gap:5px;background:rgba(220,38,38,.18);color:var(--red-dark);font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;margin-top:8px;border:1px solid rgba(220,38,38,.25);}
/* Stats row */
.home-stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px 8px;}
.home-stat{background:var(--surface);border-radius:10px;padding:10px 8px;text-align:center;border:1px solid var(--border-soft);}
.home-stat-v{font-size:20px;font-weight:800;line-height:1;letter-spacing:-.4px;}
.home-stat-l{font-size:9px;color:var(--text3);margin-top:4px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
/* Quick-action tiles */
.home-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px 8px;}
.home-action{background:var(--surface);border-radius:12px;padding:12px;border:1px solid var(--border-soft);display:flex;align-items:center;gap:10px;cursor:pointer;transition:opacity .12s;}
.home-action:active{opacity:.75;}
.home-action-icon{width:32px;height:32px;background:rgba(220,38,38,.1);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.home-action-icon svg{width:16px;height:16px;stroke:var(--red);}
.home-action-title{font-size:11px;font-weight:700;color:var(--text);line-height:1.3;}
.home-action-sub{font-size:9px;color:var(--text3);margin-top:2px;}
/* Recent event rows */
.home-section{padding:8px 16px 4px;}
.home-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);margin-bottom:2px;}
.home-event-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border-soft);cursor:pointer;transition:background .1s;}
.home-event-row:active{background:var(--surface);}
.home-event-place{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--red);background:rgba(220,38,38,.1);flex-shrink:0;}
.home-event-place.top1{color:#fbbf24;background:rgba(251,191,36,.12);}
.home-event-place.top3{color:var(--text2);background:var(--surface3);}
.home-event-info{flex:1;min-width:0;}
.home-event-name{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.home-event-meta{font-size:11px;color:var(--text3);margin-top:2px;}
.home-event-wr{font-size:11px;font-weight:800;padding:3px 8px;border-radius:7px;flex-shrink:0;}
.card{background:var(--surface);border-radius:var(--radius);padding:var(--sp-4);margin-bottom:var(--sp-3);box-shadow:var(--shadow);border:1px solid var(--border-soft);cursor:pointer;transition:box-shadow .18s,transform .12s;}
.card:active{box-shadow:var(--shadow-xs);transform:scale(.99);}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;}
.card-title{font-size:15.5px;font-weight:700;letter-spacing:-.2px;}
.card-sub{font-size:12.5px;color:var(--text2);margin-top:3px;line-height:1.4;}
.card-date{font-size:11.5px;font-weight:700;color:var(--red);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px;}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:var(--sp-5);}
.stat-box{background:var(--surface);border-radius:var(--radius);padding:var(--sp-4) var(--sp-2);text-align:center;box-shadow:var(--shadow);border:1px solid var(--border-soft);}
.stat-val{font-size:25px;font-weight:800;color:var(--text);line-height:1;letter-spacing:-.5px;}
.stat-lbl{font-size:10.5px;color:var(--text3);margin-top:6px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;}
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.1px;}
.badge-win{background:var(--win-bg);color:var(--win);}
.badge-loss{background:var(--loss-bg);color:var(--loss);}
.badge-draw{background:var(--draw-bg);color:var(--draw);}
.tag{display:inline-block;background:var(--surface3);border:none;border-radius:var(--radius-sm);padding:3px 9px;font-size:11px;color:var(--text2);font-weight:600;}
.tag-red{background:var(--red-light);color:var(--red-dark);}
.tag-regional{background:var(--draw-bg);color:var(--draw);font-weight:800;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 18px;border-radius:var(--radius-sm);border:none;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .1s,box-shadow .15s;letter-spacing:-.1px;}
.btn:active{transform:scale(.97);opacity:.9;}
.btn-primary{background:var(--red);color:white;box-shadow:0 4px 14px rgba(220,38,38,.28);}
.btn-secondary{background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:var(--shadow-xs);}
.btn-danger{background:var(--loss-bg);color:var(--loss);}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:var(--radius-sm);}
.btn-icon{width:34px;height:34px;padding:0;border-radius:var(--radius-sm);}
/* Sim-Timer Fullscreen-Modus: kein Padding, kein Scroll, flex-column damit inner flex:1 funktioniert */
.content.simtimer-mode{padding:0!important;overflow:hidden!important;display:flex!important;flex-direction:column!important;}
/* Tools-Tabs (Timer/Würfel/Auslosung) vertikal zentrieren statt oben kleben */
.content.tools-centered{display:flex;flex-direction:column;}
.fab{position:fixed;bottom:calc(var(--nav-float-h) + 28px + env(safe-area-inset-bottom));right:18px;width:54px;height:54px;border-radius:50%;background:var(--red);color:white;font-size:26px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;box-shadow:0 10px 28px rgba(220,38,38,.38),0 3px 8px rgba(220,38,38,.25);z-index:50;transition:transform .12s,box-shadow .12s;}
.fab:active{transform:scale(.92);}
.modal-overlay{position:fixed;inset:0;background:rgba(12,14,21,.5);backdrop-filter:blur(2px);z-index:200;display:flex;align-items:flex-end;}
.modal{background:var(--surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-height:94dvh;overflow-y:auto;padding:var(--sp-5) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));box-shadow:var(--shadow-lg);}
.modal-handle{width:38px;height:4px;background:var(--border);border-radius:2px;margin:0 auto var(--sp-5);}
.modal-title{font-size:19px;font-weight:800;margin-bottom:var(--sp-4);letter-spacing:-.4px;}
.form-group{margin-bottom:var(--sp-4);}
label{display:block;font-size:11px;font-weight:700;color:var(--text2);margin-bottom:7px;text-transform:uppercase;letter-spacing:.6px;}
input,select,textarea{width:100%;background:var(--surface2);border:1.5px solid transparent;color:var(--text);border-radius:var(--radius-sm);padding:11px 14px;font-size:15px;outline:none;transition:border-color .15s,background .15s;-webkit-appearance:none;}
/* Number-Spinner-Pfeile entfernen */
input[type=number]{-moz-appearance:textfield;appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
input:focus,select:focus,textarea:focus{border-color:var(--red);background:var(--surface);}
textarea{resize:none;height:80px;}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6072' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;}
.form-row{display:flex;gap:var(--sp-3);}
.form-row .form-group{flex:1;}
.modal-actions{display:flex;gap:var(--sp-2);margin-top:var(--sp-5);flex-direction:column;}
.modal-actions .btn{width:100%;}
.result-btns{display:flex;gap:var(--sp-2);}
.result-btn{flex:1;padding:13px 6px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:var(--surface2);color:var(--text2);font-size:13px;font-weight:700;cursor:pointer;text-align:center;transition:all .15s;}
.result-btn.sel-W{border-color:transparent;background:var(--win-bg);color:var(--win);box-shadow:inset 0 0 0 1.5px var(--win);}
.result-btn.sel-L{border-color:transparent;background:var(--loss-bg);color:var(--loss);box-shadow:inset 0 0 0 1.5px var(--loss);}
.result-btn.sel-D{border-color:transparent;background:var(--draw-bg);color:var(--draw);box-shadow:inset 0 0 0 1.5px var(--draw);}
.result-btn.sel-on{border-color:transparent;background:rgba(37,99,235,.12);color:#2563eb;box-shadow:inset 0 0 0 1.5px #2563eb;}
.color-grid{display:flex;gap:var(--sp-2);flex-wrap:wrap;}
.color-chip{width:38px;height:38px;border-radius:50%;border:3px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:white;font-size:14px;font-weight:700;transition:transform .12s,box-shadow .12s;box-shadow:var(--shadow-xs);}
.color-chip:active{transform:scale(.9);}
.color-chip.selected{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text);transform:scale(1.04);}
.color-chip.c-red{background:#dc2626;}.color-chip.c-blue{background:#2563eb;}.color-chip.c-green{background:#16a34a;}
.color-chip.c-yellow{background:#ca8a04;}.color-chip.c-purple{background:#9333ea;}.color-chip.c-black{background:#374151;}
.color-dot{width:9px;height:9px;border-radius:50%;display:inline-block;}
.c-red{background:#dc2626;}.c-blue{background:#2563eb;}.c-green{background:#16a34a;}
.c-yellow{background:#ca8a04;}.c-purple{background:#9333ea;}.c-black{background:#374151;}
/* Deck card leader bg overlay — fav deck only */
.deck-leader-bg{position:absolute;inset:0;background-size:cover;background-position:top right;background-repeat:no-repeat;opacity:.22;border-radius:inherit;pointer-events:none;-webkit-mask-image:linear-gradient(to left,black 0%,black 25%,transparent 62%),linear-gradient(to bottom,black 0%,black 28%,transparent 60%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to left,black 0%,black 25%,transparent 62%),linear-gradient(to bottom,black 0%,black 28%,transparent 60%);mask-composite:intersect;}
.deck-colors{display:flex;gap:4px;margin-top:6px;align-items:center;}
.leader-search-wrap{position:relative;}
.leader-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-sm);max-height:200px;overflow-y:auto;z-index:500;box-shadow:var(--shadow-md);}
.leader-option{padding:11px 14px;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-soft);}
.leader-option:last-child{border-bottom:none;}
.leader-option:active{background:var(--surface2);}
.leader-dots{display:flex;gap:3px;align-items:center;}
.match-item{display:flex;align-items:center;gap:var(--sp-3);padding:11px 0;border-bottom:1px solid var(--border-soft);}
.match-item:last-child{border-bottom:none;}
.match-round{font-size:10.5px;font-weight:800;color:var(--text3);width:26px;text-align:center;flex-shrink:0;background:var(--surface3);border-radius:6px;padding:4px 0;}
.match-info{flex:1;min-width:0;}
.match-opp{font-size:14.5px;font-weight:700;letter-spacing:-.1px;}
.match-leader{font-size:12px;color:var(--text2);margin-top:2px;}
.match-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0;}
.match-tag{font-size:10px;font-weight:700;color:#2563eb;}
.match-dice{font-size:10px;color:var(--text3);}
/* Rich tournament detail */
.td-hero{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border-soft);overflow:hidden;margin-bottom:var(--sp-4);position:relative;}
.td-hero-accent{height:3px;background:linear-gradient(90deg,var(--red),#ef4444);}
.td-hero-accent.gold{background:linear-gradient(90deg,#d97706,#fbbf24);}
.td-hero-body{padding:var(--sp-4);display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);}
.td-placement{font-size:48px;font-weight:900;color:var(--red);line-height:1;letter-spacing:-2px;}
.td-placement.gold{color:#fbbf24;}
.td-placement-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-top:2px;}
.td-record{font-size:22px;font-weight:900;letter-spacing:-.5px;}
.td-record-lbl{font-size:9px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-top:2px;text-align:right;}
.td-pills{display:flex;gap:6px;flex-wrap:wrap;padding:0 var(--sp-4) var(--sp-4);}
.td-pill{background:var(--surface2);border-radius:6px;padding:4px 9px;font-size:11.5px;color:var(--text2);font-weight:600;}
/* Round row */
.rd-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border-soft);}
.rd-row:last-child{border-bottom:none;}
.rd-num{width:30px;height:30px;background:var(--surface2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--text3);flex-shrink:0;}
.rd-img{width:36px;height:50px;border-radius:6px;object-fit:cover;object-position:top center;flex-shrink:0;background:var(--surface2);}
.rd-img-wrap{position:relative;flex-shrink:0;width:36px;}
.rd-img-rnum{position:absolute;bottom:2px;right:2px;background:rgba(0,0,0,.65);color:#fff;font-size:8px;font-weight:800;padding:1px 4px;border-radius:4px;line-height:1.3;}
.rd-info{flex:1;min-width:0;}
.rd-opp{font-size:13.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rd-leader{font-size:11.5px;color:var(--text3);margin-top:1px;}
.rd-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.rd-dice{font-size:13px;opacity:.7;}
.rd-badge{padding:4px 9px;border-radius:7px;font-size:11px;font-weight:800;}
.rd-badge.win{background:var(--win-bg);color:var(--win);}
.rd-badge.loss{background:var(--loss-bg);color:var(--loss);}
.rd-badge.draw{background:var(--draw-bg);color:var(--draw);}
.rd-del{background:none;border:none;color:var(--text3);cursor:pointer;padding:4px;display:flex;align-items:center;opacity:.6;}
.rd-del:hover{opacity:1;color:var(--loss);}
/* Card flip glitter */
@keyframes glitter-pop{
  0%{transform:translate(-50%,-50%) scale(0) rotate(0deg);opacity:1;}
  60%{opacity:1;}
  100%{transform:translate(calc(-50% + var(--gx)),calc(-50% + var(--gy))) scale(0) rotate(var(--gr));opacity:0;}
}
.glitter-p{position:absolute;pointer-events:none;border-radius:50%;animation:glitter-pop .7s ease-out forwards;z-index:10;}
/* Holographic card shine */
@keyframes holo-snap{
  0%  {background-position:120% 40%;opacity:0;}
  18% {opacity:.82;}
  50% {background-position:40% 60%;opacity:.95;}
  82% {opacity:.82;}
  100%{background-position:-40% 40%;opacity:0;}
}
.holo-layer{
  position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:4;
  background:repeating-linear-gradient(
    -55deg,
    rgba(255,0,140,.65) 0%,
    rgba(255,120,0,.65) 4%,
    rgba(255,245,0,.65) 8%,
    rgba(255,255,255,.45) 10%,
    rgba(0,255,120,.65) 13%,
    rgba(0,120,255,.65) 17%,
    rgba(160,0,255,.65) 21%,
    rgba(255,0,140,.65) 25%
  );
  background-size:400% 400%;
  mix-blend-mode:color-dodge;
  opacity:0;
  will-change:opacity,background-position;
}
.progress-bar{height:6px;background:var(--surface3);border-radius:3px;overflow:hidden;margin-top:8px;}
.progress-fill{height:100%;border-radius:3px;}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-3);margin-top:var(--sp-1);}
.section-title{font-size:11.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.8px;}
.placement{font-size:22px;font-weight:900;letter-spacing:-.5px;}
.top1{color:#ca8a04;}.top4{color:var(--text2);}.top8{color:#d97706;}
.bar-chart{display:flex;flex-direction:column;gap:var(--sp-3);}
.bar-row{display:flex;align-items:center;gap:var(--sp-3);}
.bar-label{font-size:12px;color:var(--text2);width:90px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.bar-track{flex:1;background:var(--surface3);border-radius:5px;height:22px;overflow:hidden;}
.bar-fill{height:100%;border-radius:5px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;font-size:11px;font-weight:800;color:white;min-width:26px;}
.bar-val{font-size:12px;color:var(--text2);width:40px;text-align:right;flex-shrink:0;font-weight:600;}
.card-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-top:var(--sp-2);scrollbar-width:none;}
.card-strip::-webkit-scrollbar{display:none;}
.card-thumb{position:relative;flex-shrink:0;width:54px;aspect-ratio:5/7;border-radius:7px;overflow:hidden;background:var(--surface3);box-shadow:var(--shadow-xs);}
.card-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.card-thumb .qty-badge{position:absolute;top:3px;right:3px;background:rgba(15,19,32,.72);color:white;font-size:9px;font-weight:800;border-radius:5px;padding:1px 5px;line-height:1.4;backdrop-filter:blur(2px);}
.card-thumb .card-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:7px;color:var(--text3);text-align:center;padding:3px;}
.tools-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);}
.tool-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);padding:26px 12px;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;color:var(--text);}
.tool-tile:active{transform:scale(.97);box-shadow:var(--shadow-xs);}
.tool-tile svg{width:30px;height:30px;stroke:var(--red);}
.tool-tile span{font-size:14px;font-weight:700;letter-spacing:-.1px;}
.deck-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:var(--sp-3);}
.card-thumb-lg{position:relative;aspect-ratio:5/7;border-radius:10px;overflow:hidden;background:var(--surface3);box-shadow:var(--shadow-xs);}
.card-thumb-lg img{width:100%;height:100%;object-fit:cover;display:block;}
.card-thumb-lg .qty-badge{position:absolute;top:5px;right:5px;background:rgba(15,19,32,.78);color:#fff;font-size:12px;font-weight:800;border-radius:6px;padding:2px 7px;line-height:1.4;backdrop-filter:blur(2px);}
.card-thumb-lg .card-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text3);text-align:center;padding:4px;}
.card-id-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.72));color:#fff;font-size:9px;text-align:center;padding:8px 2px 3px;font-weight:700;letter-spacing:.2px;}
.card-detail{display:flex;gap:var(--sp-4);align-items:flex-start;}
.card-detail-img{flex:0 0 44%;max-width:210px;}
.card-detail-img img{width:100%;border-radius:10px;display:block;box-shadow:var(--shadow-md);background:var(--surface3);}
.card-detail-info{flex:1;min-width:0;}
.card-detail-name{font-size:18px;font-weight:800;letter-spacing:-.3px;line-height:1.2;}
.import-area{background:var(--surface2);border:1.5px dashed var(--border);border-radius:var(--radius-sm);padding:var(--sp-4);}
.import-area textarea{background:var(--surface);border:1px solid var(--border);height:120px;font-family:'SF Mono',ui-monospace,monospace;font-size:12.5px;}
.empty{text-align:center;padding:56px 16px;color:var(--text3);}
.empty-icon{font-size:40px;margin-bottom:14px;opacity:.35;}
.empty p{font-size:14px;line-height:1.6;}
.toast{position:fixed;top:calc(70px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:var(--text);color:var(--surface);padding:11px 22px;border-radius:24px;font-size:13px;font-weight:600;z-index:999;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap;box-shadow:var(--shadow-lg);}
.toast.show{opacity:1;}
.delete-btn{background:none;border:none;color:var(--text3);cursor:pointer;padding:6px;font-size:16px;transition:color .15s;}
.delete-btn:active{color:var(--loss);}
.divider{height:1px;background:var(--border-soft);margin:var(--sp-3) 0;}
.leader-chip{display:inline-flex;align-items:center;gap:5px;background:var(--red-light);color:var(--red-dark);padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700;letter-spacing:-.1px;}
.details-toggle{width:100%;background:var(--surface2);border:none;border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;font-weight:700;color:var(--text2);cursor:pointer;text-align:left;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;transition:background .15s;}
.details-toggle:active{background:var(--surface3);}
.details-toggle .arrow{transition:transform .2s;color:var(--text3);}
.details-toggle.open .arrow{transform:rotate(180deg);}
.details-body{display:none;padding:var(--sp-1) 0;}
.details-body.open{display:block;}