:root {
    --bg: #f0f4f0;
    --surface: #ffffff;
    --surface2: #f8faf8;
    --text: #1a2a1a;
    --text2: #5a6a5a;
    --primary: #2d6a4f;
    --primary-hover: #1b4d35;
    --accent: #40916c;
    --border: #dce4dc;
    --danger: #c0392b;
    --warning: #e67e22;
    --spade: #1a1a2e;
    --heart: #c0392b;
    --diamond: #d35400;
    --club: #2d6a4f;
    --radius: 10px;
    --shadow: 0 1px 4px rgba(0,0,0,0.08);
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; background: var(--bg); color: var(--text); min-height:100vh; line-height:1.5; }
.hidden { display: none !important; }

/* Auth */
#auth-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.auth-container { background: var(--surface); border-radius: 16px; padding: 40px; width: 100%; max-width: 420px; box-shadow: var(--shadow); }
.logo { text-align: center; margin-bottom: 28px; }
.logo-icon { font-size: 40px; letter-spacing: 4px; margin-bottom: 8px; }
.logo h1 { font-size: 24px; color: var(--primary); margin-bottom: 4px; }
.tagline { color: var(--text2); font-size: 14px; }
.auth-tabs { display:flex; gap:0; margin-bottom:20px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.auth-tab { flex:1; padding:10px; border:none; background:var(--surface2); cursor:pointer; font-size:14px; font-weight:500; }
.auth-tab.active { background:var(--primary); color:#fff; }
.auth-form { display:flex; flex-direction:column; gap:14px; }
.auth-form.hidden { display:none; }
.form-group { display:flex; flex-direction:column; gap:4px; }
.form-group label { font-size:13px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; }
input, select, textarea { padding:10px 12px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; transition: border-color .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(45,106,79,.1); }
.form-error { color:var(--danger); font-size:13px; min-height:18px; }
.demo-hint { text-align:center; color:var(--text2); font-size:12px; margin-top:8px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 20px; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition: all .15s; }
.btn-primary { background: var(--primary); color:#fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: var(--primary); color:#fff; }
.btn-danger { background: var(--danger); color:#fff; }
.btn-sm { padding:6px 14px; font-size:13px; }
.btn-block { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

/* Top Nav */
.topnav { display:flex; align-items:center; gap:12px; padding:12px 24px; background:var(--surface); border-bottom:1px solid var(--border); }
.topnav-brand { font-weight:700; font-size:17px; color:var(--primary); }
.topnav-user { margin-left:auto; display:flex; align-items:center; gap:8px; }
@media (max-width: 768px) {
    .topnav { gap:8px; padding:10px 12px; }
    .topnav-brand { font-size:14px; }
    .topnav-user { gap:4px; }
    .topnav-user .role-badge { display:none; }
    .topnav .btn-sm { padding:4px 10px; font-size:11px; }
    .coach-toggle { padding:2px 8px; font-size:11px; }
}
.role-badge { font-size:11px; font-weight:600; text-transform:uppercase; padding:2px 8px; border-radius:12px; background:var(--accent); color:#fff; }
.role-badge.player { background: #2980b9; }

/* Layout */
.main-layout { display:flex; min-height:calc(100vh - 54px); }
.sidebar { width:200px; background:var(--surface); border-right:1px solid var(--border); padding:16px 12px; display:flex; flex-direction:column; gap:4px; flex-shrink:0; }
.sidebar-btn { text-align:left; padding:10px 14px; border:none; background:transparent; border-radius:8px; cursor:pointer; font-size:14px; color:var(--text); font-weight:500; transition: all .1s; }

/* Hamburger */
.hamburger { display:none; background:none; border:none; font-size:22px; cursor:pointer; padding:4px 8px; color:var(--text); line-height:1; }
@media (max-width: 768px) {
    .hamburger { display:block; }
    .main-layout { position:relative; }
    .sidebar { position:fixed; top:54px; left:0; width:260px; height:calc(100vh - 54px); z-index:100; transform:translateX(-100%); transition:transform 0.25s ease; box-shadow:2px 0 12px rgba(0,0,0,0.15); overflow-y:auto; }
    .sidebar.open { transform:translateX(0); }
    .sidebar-overlay { display:none; position:fixed; top:54px; left:0; width:100%; height:100%; background:rgba(0,0,0,0.4); z-index:99; }
    .sidebar-overlay.show { display:block; }
    .content { max-height:none; padding:16px 12px; }
    .topnav { padding:10px 12px; }
    .topnav-brand { font-size:15px; }
    .article-layout { flex-direction:column; }
    .article-sidebar { width:100%; display:flex; flex-wrap:wrap; gap:4px; }
    .article-sidebar-item { font-size:12px; padding:6px 10px; white-space:nowrap; }
    .counting-layout { flex-direction:column; }
    .notes-layout { flex-direction:column; }
    .notes-sidebar { width:100%; }
    .hand-pair { flex-direction:column; }
    .deal-hands { grid-template-columns:1fr; }
    .coach-pair-stats { flex-direction:column; }
    .category-tabs { flex-wrap:wrap; }
    .category-tab { font-size:11px; padding:4px 10px; }
}
.sidebar-btn:hover { background:var(--surface2); }
.sidebar-btn.active { background:var(--primary); color:#fff; }
.content { flex:1; padding:24px; overflow-y:auto; max-height:calc(100vh - 54px); max-width:100%; min-width:0; }
@media (max-width: 768px) {
    .content { padding:14px 10px; }
    .content h2.section-title { font-size:16px; }
    .bridge-hand { font-size:12px; padding:6px 8px; min-width:0; }
    .card { padding:12px; }
    .article-body { max-width:100%; }
    .article-body h3 { font-size:15px; }
    .article-body p { font-size:13px; }
}

/* Cards */
.card { background:var(--surface); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-bottom:16px; }
.card h3 { font-size:16px; margin-bottom:8px; }
.card-meta { font-size:13px; color:var(--text2); margin-bottom:4px; }

/* Dashboard */
.exercise-list { display:flex; flex-direction:column; gap:10px; }
.exercise-item { display:flex; align-items:center; gap:14px; padding:14px 18px; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); cursor:pointer; transition:all .15s; }
.exercise-item:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.12); transform:translateY(-1px); }
.exercise-type-badge { font-size:11px; font-weight:700; text-transform:uppercase; padding:4px 10px; border-radius:6px; letter-spacing:0.3px; }
.badge-kp { background:#e8f5e9; color:var(--primary); }
.badge-bid { background:#e3f2fd; color:#1976d2; }
.badge-sig { background:#fff3e0; color:var(--warning); }
.exercise-info { flex:1; }
.exercise-info .title { font-weight:600; font-size:15px; }
.exercise-info .meta { font-size:12px; color:var(--text2); }
.exercise-arrow { color:var(--text2); font-size:18px; }

/* Bridge Hand Display */
.bridge-hand { display:inline-flex; flex-direction:column; gap:2px; font-family:'Courier New', Courier, monospace; font-size:15px; font-weight:600; padding:12px 16px; background:var(--surface2); border-radius:8px; border:1px solid var(--border); min-width:140px; }
.bridge-hand .suit-row { display:flex; align-items:center; gap:6px; }
.bridge-hand .suit-symbol { width:18px; text-align:center; font-size:16px; }
.suit-s { color: var(--spade); }
.suit-h { color: var(--heart); }
.suit-d { color: var(--diamond); }
.suit-c { color: var(--club); }
.hand-label { font-size:12px; color:var(--text2); font-weight:500; margin-bottom:4px; }
.hand-pair { display:flex; gap:20px; flex-wrap:wrap; }
.hand-with-label { display:flex; flex-direction:column; align-items:center; gap:6px; }
.seat-badge { font-size:13px; font-weight:700; padding:4px 12px; border-radius:6px; }
.seat-n { background:#e8eaf6; color:#283593; }
.seat-s { background:#fce4ec; color:#880e4f; }
.seat-e { background:#e0f2f1; color:#004d40; }
.seat-w { background:#fff8e1; color:#e65100; }

/* Bidding Box */
.bidding-box { display:flex; flex-direction:column; gap:2px; padding:8px; background:var(--surface2); border-radius:8px; border:1px solid var(--border); }
.bidding-level-row { display:flex; gap:2px; }
.bidding-btn { width:40px; height:34px; border:1px solid var(--border); border-radius:4px; background:var(--surface); cursor:pointer; font-size:13px; font-weight:600; transition:all .1s; display:flex; align-items:center; justify-content:center; }
.bidding-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.bidding-btn.suit-c { color:var(--club); }
.bidding-btn.suit-d { color:var(--diamond); }
.bidding-btn.suit-h { color:var(--heart); }
.bidding-btn.suit-s { color:var(--spade); }
.bidding-btn.suit-nt { }
.bidding-specials { display:flex; gap:2px; margin-top:4px; }
.bidding-specials .bidding-btn { width:60px; font-size:12px; }
.bidding-done { width:100%; margin-top:4px; padding:8px; }
.bid-sequence { display:flex; flex-wrap:wrap; gap:4px; align-items:center; min-height:30px; padding:6px 10px; background:var(--surface2); border-radius:8px; border:1px solid var(--border); }
.bid-chip { padding:3px 8px; border-radius:4px; font-size:13px; font-weight:700; background:var(--surface); border:1px solid var(--border); }
.bid-chip.pass { color:var(--text2); background:#f5f5f5; }
.bid-chip.dbl { color:var(--danger); }
.bid-chip.rdbl { color:var(--accent); }

/* Card Grid for playing card selection */
.card-grid { display:flex; flex-wrap:wrap; gap:6px; }
.card-btn { padding:8px 14px; border:1.5px solid var(--border); border-radius:6px; background:var(--surface); cursor:pointer; font-family:'Courier New',monospace; font-size:14px; font-weight:600; transition:all .1s; }
.card-btn:hover { border-color:var(--primary); background:#f0faf4; }
.card-btn.selected { background:var(--primary); color:#fff; border-color:var(--primary); }
.card-btn.suit-s { color:var(--spade); }
.card-btn.suit-h { color:var(--heart); }
.card-btn.suit-d { color:var(--diamond); }
.card-btn.suit-c { color:var(--club); }
.card-btn.selected.suit-s, .card-btn.selected.suit-h, .card-btn.selected.suit-d, .card-btn.selected.suit-c { color:#fff; }
.card-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* Signal type select */
.signal-type-select { display:flex; gap:6px; flex-wrap:wrap; }
.signal-type-btn { padding:6px 14px; border:1.5px solid var(--border); border-radius:6px; background:var(--surface); cursor:pointer; font-size:13px; font-weight:600; }
.signal-type-btn:hover { border-color:var(--primary); }
.signal-type-btn.selected { background:var(--primary); color:#fff; border-color:var(--primary); }

/* Create form */
.create-form { display:flex; flex-direction:column; gap:14px; max-width:600px; }
.create-form label { font-size:13px; font-weight:600; color:var(--text2); text-transform:uppercase; letter-spacing:.5px; }
.form-row { display:flex; gap:12px; }
.form-row > * { flex:1; }

/* Results */
.comparison-table { width:100%; border-collapse:collapse; }
.comparison-table th, .comparison-table td { padding:10px 14px; border:1px solid var(--border); text-align:left; font-size:14px; }
.comparison-table th { background:var(--surface2); font-size:13px; }
.match-yes { color:var(--primary); font-weight:700; }
.match-no { color:var(--danger); font-weight:700; }
.sequence-compare { display:flex; gap:10px; flex-wrap:wrap; }
.seq-col { flex:1; min-width:200px; }
.seq-col h4 { margin-bottom:8px; }
.seq-diff { background:#fff3cd; border:2px solid var(--warning); }

/* Tricks display */
.trick-cards { display:flex; gap:6px; flex-wrap:wrap; padding:8px; }
.trick-card { padding:6px 12px; background:var(--surface); border:1px solid var(--border); border-radius:4px; font-family:'Courier New',monospace; font-size:13px; font-weight:600; }
.play-by-play { display:flex; flex-direction:column; gap:10px; }

/* Section */
.section-title { font-size:18px; font-weight:700; margin-bottom:16px; }
.section-subtitle { font-size:14px; font-weight:600; margin-bottom:10px; color:var(--text2); }

/* Tabs */
.view-tabs { display:flex; gap:0; margin-bottom:20px; border:1px solid var(--border); border-radius:8px; overflow:hidden; width:fit-content; }
.view-tab { padding:8px 20px; border:none; background:var(--surface2); cursor:pointer; font-size:14px; font-weight:500; }
.view-tab.active { background:var(--primary); color:#fff; }

/* Status */
.status-badge { font-size:12px; font-weight:600; padding:3px 10px; border-radius:12px; }
.status-complete { background:#e8f5e9; color:var(--primary); }
.status-pending { background:#fff3e0; color:var(--warning); }

/* Empty state */
.empty-state { text-align:center; padding:60px 20px; color:var(--text2); }
.empty-state .icon { font-size:48px; margin-bottom:12px; }
.empty-state h3 { font-size:18px; margin-bottom:6px; }
.empty-state p { font-size:14px; }

/* Toast */
.toast { position:fixed; bottom:24px; right:24px; padding:12px 20px; background:#1a2a1a; color:#fff; border-radius:8px; font-size:14px; z-index:999; animation: slideUp .3s ease; }
@keyframes slideUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Explanation textarea */
.explanation-input { width:100%; min-height:60px; }

/* Bidding comparison */
.bid-compare { display:grid; grid-template-columns:auto 1fr 1fr; gap:4px 10px; align-items:center; }
.bid-compare-header { font-weight:700; font-size:13px; color:var(--text2); padding:4px 0; }
.bid-compare-round { font-size:12px; color:var(--text2); }
.bid-compare-val { font-weight:600; padding:4px 8px; border-radius:4px; }
.bid-compare-val.match { background:#e8f5e9; }
.bid-compare-val.diff { background:#ffebee; }

/* Bidding Tree */
.badge-tree { background:#f3e5f5; color:#7b1fa2; }
.tree-container { position:relative; }
.tree-node { position:relative; margin-left:28px; }
.tree-node.depth-0 { margin-left:0; }
.tree-node::before {
    content:''; position:absolute; left:-20px; top:20px; width:16px;
    border-bottom:2px solid var(--border);
}
.tree-node::after {
    content:''; position:absolute; left:-22px; top:-8px; bottom:0;
    border-left:2px solid var(--border);
}
.tree-node.depth-0::after { display:none; }
.tree-node:last-child::after { height:28px; }
.tree-node-content {
    display:flex; align-items:flex-start; gap:10px; padding:8px 12px;
    background:var(--surface); border:1px solid var(--border); border-radius:8px;
    margin-bottom:6px; flex-wrap:wrap;
}
.tree-node-bid { display:flex; align-items:center; gap:6px; min-width:120px; }
.tree-bid-meaning { font-size:11px; color:var(--text2); white-space:nowrap; }
.tree-node-desc { flex:1; min-width:180px; }
.tree-desc-input { width:100%; min-height:32px; padding:4px 8px; font-size:12px; border:1px solid var(--border); border-radius:4px; resize:vertical; font-family:inherit; }
.tree-desc-input:focus { outline:none; border-color:var(--primary); }
.tree-node-actions { display:flex; gap:4px; align-items:center; flex-shrink:0; }
.tree-node-children { margin-top:2px; }
.tree-inline-bidder { animation: slideUp .2s ease; }
.auction-display { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }

/* ─── Timer Bar ──────────────────────────────── */
.timer-container { margin-bottom:12px; }
.timer-bar-outer { height:8px; background:var(--border); border-radius:4px; overflow:hidden; position:relative; }
.timer-bar-inner { height:100%; border-radius:4px; transition: width 0.1s linear, background 0.3s; }
.timer-bar-inner.safe { background:var(--primary); }
.timer-bar-inner.warning { background:var(--warning); }
.timer-bar-inner.danger { background:var(--danger); }
.timer-text { display:flex; justify-content:space-between; font-size:12px; color:var(--text2); margin-top:4px; }
.timer-text .seconds { font-weight:700; font-size:14px; }
.timer-text .seconds.urgent { color:var(--danger); animation: pulse 0.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }

/* ─── Rapid-Fire Drill ──────────────────────── */
.drill-progress { text-align:center; margin-bottom:10px; color:var(--text2); font-size:14px; }
.drill-progress strong { color:var(--primary); }
.auction-bar { display:flex; flex-wrap:wrap; gap:4px; padding:10px 14px; background:var(--surface2); border-radius:8px; border:1px solid var(--border); margin-bottom:16px; align-items:center; }
.auction-bar .label { font-size:12px; color:var(--text2); margin-right:8px; font-weight:600; }
.auction-chip { padding:4px 10px; border-radius:4px; font-size:14px; font-weight:700; background:var(--surface); border:1px solid var(--border); }
.auction-chip.pass { color:var(--text2); }

/* ─── Quiz Flashcard ────────────────────────── */
.flashcard { background:var(--surface); border-radius:12px; padding:30px 24px; box-shadow:var(--shadow); text-align:center; max-width:560px; margin:20px auto; transition: background 0.3s; }
.flashcard.correct-flash { background:#e8f5e9; }
.flashcard.wrong-flash { background:#ffebee; }
.flashcard .question { font-size:18px; font-weight:700; margin-bottom:20px; line-height:1.5; }
.flashcard .answer-input { width:100%; padding:12px; font-size:16px; border:2px solid var(--border); border-radius:8px; text-align:center; margin-bottom:12px; }
.flashcard .answer-input:focus { border-color:var(--primary); }
.flashcard .feedback { font-size:14px; margin-top:12px; min-height:24px; }
.flashcard .feedback.correct { color:var(--primary); font-weight:700; }
.flashcard .feedback.wrong { color:var(--danger); font-weight:700; }
.quiz-streak { text-align:center; margin-bottom:10px; }
.streak-badge { display:inline-block; padding:4px 12px; background:var(--primary); color:#fff; border-radius:12px; font-size:13px; font-weight:700; }
.due-badge { display:inline-block; background:var(--danger); color:#fff; border-radius:10px; padding:2px 8px; font-size:11px; font-weight:700; margin-left:6px; }

/* ─── Counting Exercise ─────────────────────── */
.counting-layout { display:flex; gap:20px; flex-wrap:wrap; }
.counting-left { flex:1; min-width:300px; }
.counting-right { flex:1; min-width:280px; }
.counting-question { margin-bottom:16px; }
.counting-question label { display:block; font-weight:600; margin-bottom:4px; font-size:14px; }
.counting-question input, .counting-question select { width:100%; }
.counting-answer.correct { color:var(--primary); font-weight:700; }
.counting-answer.wrong { color:var(--danger); }

/* ─── Error Ledger ──────────────────────────── */
.error-form { max-width:560px; }
.error-form .form-row { margin-bottom:12px; }
.category-radio-group { display:flex; gap:12px; flex-wrap:wrap; }
.category-radio { flex:1; min-width:120px; }
.category-radio input { position:absolute; opacity:0; }
.category-radio label { display:block; padding:10px 16px; border:2px solid var(--border); border-radius:8px; cursor:pointer; text-align:center; font-weight:600; font-size:13px; transition:all .15s; }
.category-radio input:checked + label { border-color:var(--primary); background:rgba(45,106,79,.08); color:var(--primary); }
.category-radio .cat-desc { font-size:11px; color:var(--text2); font-weight:400; display:block; margin-top:2px; }
.error-history { max-width:700px; }
.error-row { padding:12px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:flex-start; }
.error-row:last-child { border-bottom:none; }
.error-cat-badge { font-size:11px; font-weight:700; padding:3px 10px; border-radius:6px; text-transform:uppercase; }
.error-cat-badge.system { background:#e3f2fd; color:#1976d2; }
.error-cat-badge.memory { background:#fce4ec; color:#c62828; }
.error-cat-badge.execution { background:#fff3e0; color:#e65100; }
.error-row .error-desc { flex:1; font-size:14px; }
.error-row .error-meta { font-size:11px; color:var(--text2); white-space:nowrap; }

/* ─── Stats Chart ───────────────────────────── */
.stats-chart { margin-top:16px; }
.stat-bar-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.stat-bar-label { width:110px; font-size:13px; font-weight:600; text-align:right; }
.stat-bar-track { flex:1; height:24px; background:var(--surface2); border-radius:6px; overflow:hidden; position:relative; }
.stat-bar-fill { height:100%; border-radius:6px; transition:width .5s ease; display:flex; align-items:center; padding-left:8px; font-size:12px; color:#fff; font-weight:700; }
.stat-bar-fill.system { background:#1976d2; }
.stat-bar-fill.memory { background:#c62828; }
.stat-bar-fill.execution { background:#e65100; }
.stats-summary { text-align:center; margin-top:12px; font-size:15px; font-weight:600; color:var(--primary); }

/* ─── Coach Mode Toggle ─────────────────────── */
.coach-toggle { padding:4px 14px; border-radius:16px; font-size:12px; font-weight:700; cursor:pointer; border:2px solid var(--primary); background:transparent; color:var(--primary); transition:all .15s; }
.coach-toggle.active { background:var(--primary); color:#fff; }

/* ─── Invitation Cards ──────────────────────── */
.invitation-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 20px; margin-bottom:10px; display:flex; align-items:center; gap:16px; }
.invitation-card .invite-info { flex:1; }
.invitation-card .invite-name { font-weight:600; font-size:15px; }
.invitation-card .invite-meta { font-size:12px; color:var(--text2); }
.invitation-card .invite-actions { display:flex; gap:8px; flex-shrink:0; }
.invite-link-box { display:flex; gap:8px; align-items:center; padding:12px; background:var(--surface2); border-radius:8px; margin-top:8px; }
.invite-link-box code { font-size:14px; font-weight:600; color:var(--primary); background:var(--surface); padding:4px 10px; border-radius:4px; flex:1; }

/* ─── Coach Dashboard ───────────────────────── */
.coach-pair-card { background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:20px; margin-bottom:14px; }
.coach-pair-card .pair-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.coach-pair-card .pair-name { font-size:17px; font-weight:700; }
.coach-pair-card .pair-players { font-size:13px; color:var(--text2); }
.coach-pair-stats { display:flex; gap:16px; flex-wrap:wrap; }
.coach-stat { flex:1; min-width:100px; text-align:center; padding:12px; background:var(--surface2); border-radius:8px; }
.coach-stat .stat-num { font-size:22px; font-weight:700; color:var(--primary); }
.coach-stat .stat-label { font-size:11px; color:var(--text2); text-transform:uppercase; margin-top:2px; }
.coach-stat.warn .stat-num { color:var(--warning); }

/* ─── Category Tabs ─────────────────────────── */
.category-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.category-tab { padding:6px 14px; border:1.5px solid var(--border); border-radius:20px; cursor:pointer; font-size:13px; font-weight:600; background:var(--surface); transition:all .15s; }
.category-tab:hover { border-color:var(--primary); }
.category-tab.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.category-tab .cat-count { font-size:11px; opacity:0.8; margin-left:4px; }

/* ─── Join Page ─────────────────────────────── */
.join-container { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.join-card { background:var(--surface); border-radius:16px; padding:40px; max-width:440px; width:100%; box-shadow:var(--shadow); text-align:center; }
.join-card h2 { margin-bottom:8px; }
.join-card p { color:var(--text2); margin-bottom:20px; }

/* ─── Agreement Check ───────────────────────── */
.agreement-answer-box { margin-top:12px; }
.agreement-answer-box textarea { width:100%; min-height:80px; }
.coach-answer-reveal { margin-top:12px; padding:12px; background:#e8f5e9; border-radius:8px; border:1px solid #a5d6a7; }
.coach-answer-reveal .label { font-size:11px; font-weight:700; color:var(--primary); text-transform:uppercase; }

/* ─── Dashboard cards ─────────────────────── */
@media (max-width: 768px) {
    .dashboard-cards { flex-direction:column; }
}

/* ─── System Notes ─────────────────────────── */
.notes-layout { display:flex; gap:20px; min-height:60vh; }
.notes-sidebar { width:220px; flex-shrink:0; background:var(--surface); border-radius:var(--radius); border:1px solid var(--border); padding:12px; overflow-y:auto; }
.notes-sidebar .section-title { font-size:13px; font-weight:700; padding:8px 10px; cursor:pointer; border-radius:6px; margin-bottom:2px; transition:all .1s; }
.notes-sidebar .section-title:hover { background:var(--surface2); }
.notes-sidebar .section-title.active { background:var(--primary); color:#fff; }
.notes-content { flex:1; min-width:0; }
.notes-entry { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.notes-entry .entry-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.notes-entry .entry-title { font-weight:700; font-size:15px; }
.notes-entry .entry-meta { font-size:11px; color:var(--text2); }
.notes-entry .entry-body { font-size:14px; line-height:1.6; white-space:pre-wrap; }
.notes-entry .entry-edit { width:100%; min-height:120px; font-family:inherit; font-size:14px; line-height:1.6; }
.notes-add-btn { margin-top:8px; }

/* ─── Flowchart Nodes ──────────────────────── */
.flowchart-node { position:relative; margin-left:32px; }
.flowchart-node.depth-0 { margin-left:0; }
.flowchart-node::before { content:''; position:absolute; left:-20px; top:28px; width:16px; border-bottom:2px solid var(--border); }
.flowchart-node::after { content:''; position:absolute; left:-22px; top:-6px; bottom:0; border-left:2px solid var(--border); }
.flowchart-node.depth-0::after { display:none; }
.flowchart-node:last-child::after { height:36px; }
.flowchart-node-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:14px; margin-bottom:8px; }
.flowchart-node-card.sig-attitude { border-left:4px solid var(--primary); }
.flowchart-node-card.sig-count { border-left:4px solid #1976d2; }
.flowchart-node-card.sig-suit_pref { border-left:4px solid var(--warning); }
.flowchart-node-card .sig-label { font-size:11px; font-weight:700; text-transform:uppercase; }
.flowchart-node-card .sig-situation { font-weight:600; margin-top:4px; }
.flowchart-node-card .sig-action { color:var(--primary); margin-top:4px; }
.flowchart-node-card .sig-exceptions { font-size:12px; color:var(--text2); margin-top:4px; font-style:italic; }
.flowchart-inline-form { margin:8px 0; padding:12px; background:var(--surface2); border-radius:8px; border:1px solid var(--border); }
.flowchart-inline-form input, .flowchart-inline-form select, .flowchart-inline-form textarea { width:100%; margin-bottom:6px; }

/* ─── Suit Combo Card ──────────────────────── */
.suit-combo-display { display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; margin:16px 0; }
.suit-combo-col { text-align:center; }
.suit-combo-cards { font-family:'Courier New',monospace; font-size:22px; font-weight:700; padding:16px; background:var(--surface2); border-radius:8px; border:1px solid var(--border); }
.suit-combo-goal { display:inline-block; padding:4px 12px; background:var(--primary); color:#fff; border-radius:12px; font-size:13px; margin-bottom:12px; }
.suit-combo-options { display:flex; flex-direction:column; gap:8px; }
.suit-combo-option { padding:10px 16px; border:1.5px solid var(--border); border-radius:8px; cursor:pointer; font-size:14px; background:var(--surface); transition:all .1s; text-align:left; }
.suit-combo-option:hover { border-color:var(--primary); }
.suit-combo-option.selected { background:var(--primary); color:#fff; border-color:var(--primary); }
.suit-combo-option.correct { background:#e8f5e9; border-color:var(--primary); color:var(--primary); }
.suit-combo-option.wrong { background:#ffebee; border-color:var(--danger); color:var(--danger); }

/* ─── Study Articles ──────────────────────── */
.article-layout { display:flex; gap:20px; }
.article-sidebar { width:200px; flex-shrink:0; }
.article-sidebar-item { display:block; padding:10px 14px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; margin-bottom:4px; transition:all .1s; }
.article-sidebar-item:hover { background:var(--surface2); }
.article-sidebar-item.active { background:var(--primary); color:#fff; }
.article-sidebar-item .badge { font-size:10px; opacity:0.7; display:block; }
.article-body { flex:1; min-width:0; max-width:800px; }
.article-body h3 { font-size:18px; margin:24px 0 8px; color:var(--primary); }
.article-body h4 { font-size:15px; margin:16px 0 6px; }
.article-body p { margin-bottom:10px; line-height:1.7; font-size:14px; }
.article-body ol { margin:8px 0 16px 24px; }
.article-body ol li { margin-bottom:6px; font-size:14px; line-height:1.5; }

/* ─── Deal Card ───────────────────────────── */
.deal-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin:16px 0; }
.deal-card .deal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.deal-card .deal-context { font-size:12px; color:var(--text2); }
.deal-hands { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px; }
.deal-hands .deal-hand { background:var(--surface2); border-radius:8px; padding:10px; }
.deal-hands .deal-hand .seat { font-size:11px; font-weight:700; color:var(--primary); margin-bottom:4px; }
.deal-auction { display:flex; flex-wrap:wrap; gap:3px; padding:8px; background:var(--surface2); border-radius:6px; margin-bottom:8px; align-items:center; }
.deal-auction .label { font-size:11px; color:var(--text2); margin-right:6px; font-weight:600; }
.deal-lead { font-size:13px; color:var(--text2); margin-bottom:8px; }
.deal-analysis { padding:10px 14px; background:#f0f4ff; border-radius:8px; border-left:3px solid var(--primary); font-size:13px; line-height:1.5; margin-bottom:6px; }
.deal-result { font-size:13px; font-weight:700; color:var(--primary); }