:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e5e7eb;background:#050816;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top left,rgba(59,130,246,.18),transparent 32rem),radial-gradient(circle at top right,rgba(239,68,68,.16),transparent 26rem),#050816}button,select,textarea{font:inherit}button,select{border:0;border-radius:.75rem;color:#f9fafb;background:#2563eb}button{cursor:pointer;padding:.75rem 1rem;font-weight:800;box-shadow:0 12px 24px #2563eb3d}button:hover{filter:brightness(1.08)}button:disabled{cursor:not-allowed;opacity:.65}select{width:100%;padding:.75rem;background:#111827;border:1px solid #273449}textarea{width:100%;min-height:23rem;resize:vertical;padding:1rem;border:1px solid #273449;border-radius:1rem;color:#e5e7eb;background:#0f172ad6;line-height:1.45}.app-shell{width:min(1440px,calc(100% - 2rem));min-width:0;margin:0 auto;padding:2rem 0 3rem}.hero{display:flex;justify-content:space-between;gap:1.5rem;align-items:stretch;margin-bottom:1rem}.eyebrow{margin:0 0 .35rem;color:#93c5fd;font-weight:800;letter-spacing:.12em;text-transform:uppercase;font-size:.76rem}h1,h2,p{margin-top:0}h1{margin-bottom:.5rem;font-size:clamp(2.2rem,6vw,5rem);line-height:.95}h2{margin-bottom:0;font-size:1.05rem}.subtitle{max-width:48rem;color:#a7b0c0;font-size:1.06rem}.hero-card,.panel{border:1px solid rgba(148,163,184,.18);background:#0f172ac2;box-shadow:0 22px 80px #00000059;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.hero-card{display:grid;place-items:center;min-width:10rem;border-radius:1.4rem;padding:1.25rem}.hero-card span{font-size:3rem;font-weight:900}.hero-card small{color:#9ca3af;text-transform:uppercase;letter-spacing:.08em}.panel{border-radius:1.25rem;padding:1rem}.controls-panel{display:grid;grid-template-columns:minmax(16rem,.35fr) 1fr auto;align-items:center;gap:1rem;margin-bottom:1rem}.field-row label{display:block;margin-bottom:.4rem;color:#cbd5e1;font-weight:800;font-size:.85rem}.range-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem 1rem;color:#a7b0c0}.range-meta strong{color:#f9fafb}.legend{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.6rem}.legend-item{display:inline-flex;align-items:center;gap:.35rem;font-size:.86rem;color:#cbd5e1}.swatch{width:.8rem;height:.8rem;border-radius:999px;box-shadow:inset 0 0 0 1px #ffffff2e}.workspace-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);gap:1rem;align-items:start}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.85rem}.panel-heading p{margin:0;color:#9ca3af;font-size:.9rem}.button-row{display:flex;gap:.7rem;margin-top:.85rem}.secondary{background:#334155;box-shadow:none}.ghost{background:transparent;box-shadow:none;border:1px solid #334155;color:#cbd5e1}.status{min-height:2.5rem;margin:.85rem 0 0;white-space:pre-wrap;color:#cbd5e1;font-size:.9rem}.status.error{color:#fecaca}.status.success{color:#bbf7d0}.matrix{display:grid;grid-template-columns:repeat(13,minmax(3.6rem,1fr));gap:.35rem}.hand-cell{position:relative;aspect-ratio:1;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;overflow:hidden;padding:.45rem;border:1px solid rgba(255,255,255,.16);border-radius:.65rem;text-align:left;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.65);box-shadow:none}.hand-cell:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#ffffff1a,#0000001a);pointer-events:none}.hand-cell strong,.mix-label{position:relative;z-index:1}.hand-cell strong{font-size:clamp(.82rem,1.2vw,1.05rem)}.mix-label{font-size:clamp(.55rem,.9vw,.74rem);color:#ffffffdb}.pair{outline:1px solid rgba(250,204,21,.24)}.suited{outline:1px solid rgba(34,197,94,.16)}.offsuit{outline:1px solid rgba(59,130,246,.12)}.tooltip{position:fixed;z-index:100;max-width:16rem;padding:.75rem .85rem;border:1px solid rgba(255,255,255,.16);border-radius:.8rem;color:#f9fafb;background:#020617f5;box-shadow:0 14px 32px #00000073;white-space:pre-line;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.tooltip.visible{opacity:1;transform:translateY(0)}@media(max-width:1250px){.workspace-grid{grid-template-columns:1fr}.matrix{grid-template-columns:repeat(13,minmax(3rem,1fr))}}@media(max-width:760px){.hero,.controls-panel{grid-template-columns:1fr;display:grid}.legend{justify-content:flex-start}.matrix{gap:.22rem;grid-template-columns:repeat(13,minmax(2.25rem,1fr))}.hand-cell{border-radius:.42rem;padding:.28rem}.mix-label{display:none}}.drop-zone{display:grid;place-items:center;gap:.25rem;margin-bottom:.85rem;padding:1rem;border:1px dashed #3b82f6;border-radius:1rem;color:#dbeafe;background:#2563eb1a;cursor:pointer;text-align:center;transition:border-color .14s ease,background .14s ease,transform .14s ease}.drop-zone span{font-weight:900}.drop-zone small{color:#9ca3af}.drop-zone input,#all-ranges-input{display:none}.drop-zone:hover,.drop-zone.drag-over{border-color:#93c5fd;background:#2563eb38;transform:translateY(-1px)}.utility-row{flex-wrap:wrap}.app-layout{display:grid;grid-template-columns:auto minmax(0,1fr);min-width:0;min-height:100vh}.sidebar{position:sticky;top:0;z-index:20;width:4.75rem;height:100vh;padding:1rem .75rem;border-right:1px solid rgba(148,163,184,.18);background:#020617e0;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:width .18s ease}.sidebar.is-expanded{width:17rem}.sidebar-toggle,.nav-tab{display:flex;align-items:center;gap:.85rem;width:100%;min-height:3.1rem;margin:0 0 .5rem;padding:.75rem;border:1px solid transparent;box-shadow:none;background:transparent;color:#cbd5e1;text-align:left}.sidebar-toggle{color:#f9fafb;font-weight:900}.nav-tabs{display:grid;gap:.35rem;margin-top:1rem}.nav-tab:hover,.sidebar-toggle:hover{background:#2563eb29;filter:none}.nav-tab.is-active{border-color:#93c5fd61;background:#2563eb47;color:#fff}.nav-icon{display:inline-grid;place-items:center;flex:0 0 1.5rem;font-size:1.15rem}.nav-text{display:none;overflow:hidden;white-space:nowrap;opacity:0;transition:opacity .12s ease}.sidebar.is-expanded .nav-text{display:inline;opacity:1}.sidebar:not(.is-expanded) .sidebar-toggle,.sidebar:not(.is-expanded) .nav-tab{justify-content:center;width:3.25rem;gap:0}.sidebar:not(.is-expanded) .nav-tab.is-active{border-color:#93c5fd61;background:#2563eb47}.tab-page{display:none}.tab-page.is-active{display:block}.danger{background:#991b1b;box-shadow:0 12px 24px #991b1b3d}.trainer-controls{display:grid;grid-template-columns:minmax(14rem,1fr) minmax(10rem,.65fr) auto auto;gap:.85rem;align-items:end;margin-bottom:1rem}.score-card{display:grid;align-content:center;justify-self:start;min-width:7.5rem;min-height:4.4rem;padding:.75rem 1rem;border:1px solid rgba(148,163,184,.18);border-radius:1rem;background:#0f172ad6}.score-card strong{font-size:1.45rem}.score-card span{color:#93c5fd;font-weight:900}.trainer-buttons{justify-content:flex-end;align-self:end;margin:0;flex-wrap:wrap}.trainer-grid{display:grid;grid-template-columns:minmax(22rem,.95fr) minmax(26rem,1.05fr);gap:1rem;align-items:start}.card-stage{display:flex;justify-content:center;align-items:center;gap:clamp(.75rem,3vw,1.5rem);min-height:20rem;padding:1rem;border:1px solid rgba(148,163,184,.16);border-radius:1.1rem;background:radial-gradient(circle,#16a34a33,#0f172a6b)}.playing-card{width:min(12rem,34vw);filter:drop-shadow(0 18px 22px rgba(0,0,0,.38))}.action-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:1rem}.action-buttons button{text-transform:capitalize;font-size:1.05rem}.history-panel{max-height:39rem;overflow:hidden}.trainer-history{display:grid;gap:.65rem;max-height:32rem;overflow:auto;padding-right:.25rem}.history-item{display:grid;grid-template-columns:auto 1fr auto;gap:.75rem;align-items:center;padding:.75rem;border:1px solid rgba(148,163,184,.16);border-radius:1rem;background:#0f172ab8}.history-item.correct{border-color:#22c55e6b}.history-item.incorrect{border-color:#f871716b}.mini-cards{display:flex;gap:.25rem}.mini-cards img{width:2.5rem}.history-main{display:grid;gap:.2rem;color:#cbd5e1;font-size:.88rem}.history-main strong{color:#fff;font-size:1rem}.result-badge{display:grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:#334155;font-weight:900}.correct .result-badge{background:#15803d}.incorrect .result-badge{background:#991b1b}.strategy-pills{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.25rem}.strategy-pill{padding:.18rem .42rem;border-radius:999px;color:#94a3b8;background:#334155a6;font-size:.76rem}.strategy-pill.live{color:#dcfce7;background:#166534b8}.reference-panel{margin-top:1rem}.reference-panel.is-hidden{display:none}.reference-panel .legend{justify-content:flex-start;margin-bottom:.85rem}.empty-state{margin:0;color:#9ca3af;text-align:center}@media(max-width:1100px){.trainer-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.trainer-buttons{grid-column:1 / -1;justify-content:flex-start}}@media(max-width:900px){.app-layout{display:block}.sidebar,.sidebar.is-expanded{position:sticky;width:100%;height:auto;padding:.55rem;border-right:0;border-bottom:1px solid rgba(148,163,184,.18)}.sidebar-toggle{display:flex;width:auto;margin:0}.sidebar:not(.is-expanded) .sidebar-toggle{width:3.25rem}.sidebar .nav-text{display:none;opacity:0}.sidebar.is-expanded .nav-text{display:inline;opacity:1}.nav-tabs{display:none;margin-top:.5rem}.sidebar.is-expanded .nav-tabs{display:grid;grid-template-columns:1fr 1fr}.trainer-controls,.trainer-grid{grid-template-columns:1fr}.trainer-buttons{grid-column:auto;justify-content:flex-start}.history-panel{max-height:none}.trainer-history{max-height:26rem}}body.modal-open{overflow:hidden}.card-stage{min-height:7rem;gap:.75rem}.playing-card{width:70px;max-width:70px;filter:drop-shadow(0 10px 12px rgba(0,0,0,.34))}.action-buttons button{border:1px solid color-mix(in srgb,var(--action-color, #3b82f6),white 18%);background:linear-gradient(180deg,color-mix(in srgb,var(--action-color, #3b82f6),white 12%),var(--action-color, #3b82f6));box-shadow:0 12px 24px var(--action-color-soft, rgba(37, 99, 235, .24))}.action-buttons button:hover{filter:brightness(1.08) saturate(1.08)}.reference-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:80;display:grid;place-items:center;padding:clamp(.75rem,3vw,2rem)}.reference-modal.is-hidden{display:none}.reference-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#020617c7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.reference-dialog{position:relative;z-index:1;width:min(1180px,100%);max-height:min(86vh,900px);overflow:auto}.close-reference{flex:0 0 auto;width:2.5rem;height:2.5rem;padding:0;font-size:1.65rem;line-height:1}.reference-dialog .legend{justify-content:flex-start;margin-bottom:.85rem}.reference-dialog .matrix{grid-template-columns:repeat(13,minmax(2.6rem,1fr))}@media(max-width:760px){.reference-modal{align-items:start;padding:.6rem}.reference-dialog{max-height:calc(100dvh - 1.2rem);border-radius:1rem}.reference-dialog .panel-heading{align-items:flex-start}.reference-dialog .matrix{grid-template-columns:repeat(13,minmax(1.85rem,1fr));gap:.18rem}.reference-dialog .hand-cell{padding:.2rem;border-radius:.32rem}}.range-viewer-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.85rem}.range-viewer-title{margin-bottom:.25rem}.range-viewer-subtitle{margin:0;color:#9ca3af;font-size:.9rem}.range-viewer-legend{justify-content:flex-end}.overall-strategy{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.85rem;color:#cbd5e1}.overall-strategy-item{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .58rem;border:1px solid color-mix(in srgb,var(--action-color, #64748b),white 12%);border-radius:999px;background:color-mix(in srgb,var(--action-color, #64748b),transparent 78%);font-size:.86rem}.overall-strategy-item .swatch{background:var(--action-color, #64748b)}.overall-strategy-item strong{color:#fff}@media(max-width:760px){.range-viewer-header{display:grid}.range-viewer-legend{justify-content:flex-start}}.overall-strategy-block{display:grid;gap:.45rem;margin-bottom:.85rem}.overall-strategy-label{color:#e5e7eb;font-size:.84rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.overall-strategy-label span{color:#93c5fd;font-weight:800;text-transform:none;letter-spacing:0}.metadata-dialog{width:min(720px,100%)}.metadata-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem}.metadata-grid label{display:grid;gap:.35rem;color:#cbd5e1;font-size:.85rem;font-weight:800}.metadata-grid input{width:100%;padding:.75rem;border:1px solid #273449;border-radius:.75rem;color:#e5e7eb;background:#0f172aeb}.metadata-actions{justify-content:flex-end;flex-wrap:wrap}.strategy-pill{background:#020617d1}@media(max-width:760px){.metadata-grid{grid-template-columns:1fr}.metadata-actions{justify-content:flex-start}}.spot-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.55rem}.spot-selector-row{min-width:min(100%,42rem)}.metadata-full{grid-column:1 / -1}.metadata-grid textarea{width:100%;resize:vertical;min-height:5.5rem;padding:.75rem;border:1px solid #273449;border-radius:.75rem;color:#e5e7eb;background:#0f172aeb}
