.app-shell{min-height:100vh}.app-main{width:min(1200px,100% - 32px);margin:0 auto;padding:24px 0 48px}.page{flex-direction:column;gap:24px;display:flex}.panel-card{background:#16213eeb;border:1px solid #90b3ff2e;border-radius:24px;padding:24px;box-shadow:0 18px 40px #040a1e59}.nav-bar{z-index:30;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0f3460e0;border-bottom:1px solid #90b3ff26;justify-content:space-between;align-items:center;gap:16px;padding:18px 24px;display:flex;position:sticky;top:0}.brand-link{color:#f5f7ff;align-items:center;gap:10px;font-size:1.1rem;font-weight:700;display:inline-flex}.brand-mark{font-size:1.5rem}.nav-links{flex-wrap:wrap;gap:12px;display:flex}.nav-link{color:#d8e5ff;background:#ffffff0a;border-radius:999px;padding:10px 16px;transition:background .2s,transform .2s}.nav-link:hover,.nav-link.is-active{background:#7dd3fc2e;transform:translateY(-1px)}.hero-card{background:linear-gradient(135deg,#0f3460f2,#16213eeb);justify-content:space-between;align-items:center;gap:24px;display:flex}.eyebrow{color:#7dd3fc;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;font-size:.85rem;display:inline-block}.hero-copy{color:#c8d7f0;max-width:620px}.quick-start-button{justify-content:center;min-width:180px}.primary-button,.chip-button{cursor:pointer;border:0;border-radius:999px;transition:transform .2s,box-shadow .2s,background .2s}.primary-button{color:#091224;background:linear-gradient(135deg,#4ea8ff,#66e3ff);align-items:center;gap:8px;padding:12px 22px;font-weight:700;display:inline-flex;box-shadow:0 12px 24px #279bff47}.primary-button:hover,.chip-button:hover{transform:translateY(-1px)}.stats-bar{color:#eff6ff;background:#0f3460e0;border:1px solid #7dd3fc38;border-radius:18px;padding:16px 20px;font-size:1rem}.section-title-row{justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;display:flex}.section-note{color:#91a4c3;font-size:.9rem}.mode-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.mode-card{background:#0b1b34b8;border:1px solid #7dd3fc24;border-radius:20px;flex-direction:column;gap:12px;min-height:170px;padding:18px;transition:transform .2s,border-color .2s;display:flex}.mode-card:hover{border-color:#7dd3fc66;transform:translateY(-3px)}.mode-card-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.badge{color:#fcd34d;background:#facc152e;border-radius:999px;padding:4px 10px;font-size:.8rem}.mode-card-link{color:#7dd3fc;margin-top:auto;font-weight:600}.drill-panel{overflow:hidden}.drill-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px;display:flex}.timer-pill{color:#f8fbff;white-space:nowrap;background:#ffffff0f;border-radius:999px;padding:10px 16px}.hand-stage{background:#0b1327d1;border:1px solid #8298ca29;border-radius:20px;min-height:220px;padding:28px 18px}.loading-box{color:#b8c7e0;place-items:center;min-height:160px;display:grid}.stage-hint{text-align:center;color:#b7caea;margin-top:18px}.tile-hand{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.mahjong-tile{background:0 0;border:0;padding:0;transition:transform .18s,filter .18s;display:inline-flex}.mahjong-tile:not(:disabled){cursor:pointer}.mahjong-tile:hover:not(:disabled){filter:drop-shadow(0 8px 14px #00000047);transform:translateY(-4px)}.mahjong-tile.is-selected{transform:translateY(-10px)}.mahjong-tile.is-highlighted{filter:drop-shadow(0 0 10px #facc15d9)}.mahjong-tile:disabled{cursor:default}.mahjong-tile svg{overflow:visible}.tile-face{stroke-width:2px}.mahjong-tile--m .tile-face,.mahjong-tile--s .tile-face{fill:#fffdfa;stroke:#d1d8e4}.mahjong-tile--p .tile-face{fill:#fefefe;stroke:#d1d8e4}.mahjong-tile--honor .tile-face{fill:#f6f2df;stroke:#d2c7aa}.mahjong-tile.is-selected .tile-face{stroke:#4ea8ff;filter:drop-shadow(0 0 10px #4ea8ff52)}.tile-shadow{fill:#00000014}.tile-glyph{font-size:15px;font-weight:700}.tile-glyph--sub{font-size:10px}.tile-glyph--man{fill:#ef4444}.tile-glyph--sou{fill:#60a5fa}.tile-glyph--honor{fill:#141414}.tile-corner-label{fill:#15803d;font-size:8px;font-weight:700}.tile-pin-dot{fill:#4ade80;stroke:#15803d;stroke-width:1px}.tile-pin-dot-core{fill:#166534}.mahjong-tile--small{transform:none}.drill-controls{gap:14px;margin-top:20px;display:grid}.control-group{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.control-label{color:#d7e5f8;min-width:90px}.chip-row{flex-wrap:wrap;gap:10px;display:flex}.chip-button{color:#dbe8ff;background:#ffffff0f;padding:8px 14px}.chip-button.is-active{color:#f8fcff;background:#4ea8ff52}.analysis-panel{opacity:0;pointer-events:none;background:#0c1429f2;border:1px solid #7dd3fc29;border-radius:24px;padding:22px;transition:transform .28s,opacity .28s;transform:translateY(20px)}.analysis-panel.is-open{opacity:1;pointer-events:auto;transform:translateY(0)}.analysis-header,.analysis-section,.analysis-footer{border-bottom:1px solid #90b3ff1f;margin-bottom:18px;padding-bottom:18px}.analysis-footer{border-bottom:0;justify-content:center;margin-bottom:0;padding-bottom:0;display:flex}.analysis-section h3,.analysis-header h2{margin-bottom:10px}.analysis-table-wrap{overflow-x:auto}.analysis-table{border-collapse:collapse;width:100%}.analysis-table th,.analysis-table td{text-align:left;border-bottom:1px solid #90b3ff1a;padding:10px 12px}.analysis-table th{color:#9ab2d9;font-size:.92rem}.analysis-table .is-best{background:#7dd3fc17}.explanation-grid{grid-template-columns:1fr;display:grid}.explanation-card{color:#dce6f8;gap:10px;display:grid}.useful-tiles{flex-wrap:wrap;gap:12px;display:flex}.useful-tile-item{background:#ffffff0d;border-radius:14px;align-items:center;gap:6px;padding:8px 10px;display:inline-flex}.stats-overview-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;display:grid}.metric-card{gap:6px;display:grid}.metric-card span{color:#9eb3d1}.metric-card strong{font-size:1.9rem}.chart-panel,.radar-panel,.history-panel{min-height:100%}.charts-grid,.stats-two-column{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.chart-bars{background:#0a102094;border-radius:18px;align-items:end;gap:10px;min-height:240px;padding:20px 12px 8px;display:flex}.chart-bar-item{flex-direction:column;flex:1;justify-content:end;align-items:center;gap:8px;min-width:0;display:flex}.chart-bar{background:linear-gradient(#60a5fa,#2563eb);border-radius:12px 12px 4px 4px;width:100%;min-height:12px}.chart-bar--time{background:linear-gradient(#34d399,#0f766e)}.chart-bar-item span,.chart-bar-item small{color:#d5e4fb;text-align:center}.weakness-list{gap:16px;display:grid}.weakness-item{background:#0a102094;border-radius:18px;padding:14px 16px}.weakness-header{justify-content:space-between;gap:12px;margin-bottom:10px;display:flex}.weakness-track{background:#ffffff14;border-radius:999px;height:10px;margin-bottom:8px;overflow:hidden}.weakness-fill{border-radius:inherit;background:linear-gradient(90deg,#f59e0b,#ef4444);height:100%}.settings-card{max-width:720px}@media (width<=900px){.hero-card,.drill-header,.charts-grid,.stats-two-column{flex-direction:column;grid-template-columns:1fr}.nav-bar{flex-direction:column;align-items:flex-start}}@media (width<=640px){.app-main{width:min(100%,100% - 20px);padding-top:18px}.panel-card,.analysis-panel{padding:18px}.hero-card{align-items:flex-start}.control-label{min-width:auto}.chart-bars{gap:6px}}:root{color:#edf2ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#1a1a2e;font-family:Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:#edf2ff;background:radial-gradient(circle at top,#3498db29,#0000 30%),linear-gradient(#1a1a2e 0%,#121629 100%);min-width:320px;min-height:100vh;margin:0}body,button,input,textarea,select{font:inherit}button{border:0}img,svg{display:block}#root{min-height:100vh}h1,h2,h3,p{margin:0}a{color:inherit;text-decoration:none}