/* ==========================================================================
   GRAMMAR LESSON — Premium Detail Page · Green Accent #10b981
   ========================================================================== */
:root{--green:#10b981;--green-dark:#059669;}

/* ─── Sidebar ── */
.gl-sidebar{width:320px;background:#121722;border-right:1px solid rgba(255,255,255,0.06);display:flex;flex-direction:column;height:100%;flex-shrink:0;overflow:hidden;}
.gl-sidebar-head{padding:20px 18px;border-bottom:1px solid rgba(255,255,255,0.06);flex-shrink:0;}
.gl-sidebar-back{display:inline-flex;align-items:center;gap:4px;color:#94a3b8;font-size:0.78rem;font-weight:700;text-decoration:none;margin-bottom:12px;transition:color 0.2s;}
.gl-sidebar-back:hover{color:#10b981;}
.gl-sidebar-tags{display:flex;gap:6px;margin-bottom:8px;}
.gl-sidebar-tag{padding:3px 10px;border-radius:6px;font-size:0.65rem;font-weight:800;}
.gl-sidebar-tag-week{background:rgba(16,185,129,0.15);color:#10b981;}
.gl-sidebar-tag-level{background:rgba(255,255,255,0.06);color:#94a3b8;}
.gl-sidebar-title{font-size:1rem;font-weight:700;color:#e2e8f0;line-height:1.3;margin:0;}
.gl-sidebar-list{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:6px;}
.gl-sidebar-footer{padding:14px;border-top:1px solid rgba(255,255,255,0.06);flex-shrink:0;background:#121722;}
.gl-sidebar-done{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;border-radius:10px;border:1px solid rgba(255,255,255,0.08);color:#94a3b8;font-size:0.78rem;font-weight:700;text-decoration:none;transition:all 0.2s;}
.gl-sidebar-done:hover{background:rgba(255,255,255,0.04);color:#e2e8f0;}

/* Sidebar item */
.gl-nav-item{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px;border-radius:10px;border:1px solid transparent;transition:all 0.2s;background:transparent;color:#94a3b8;cursor:pointer;position:relative;overflow:hidden;text-align:left;font-family:inherit;}
.gl-nav-item:hover{border-color:rgba(255,255,255,0.08);background:rgba(255,255,255,0.02);}
.gl-nav-item.active{border-color:rgba(16,185,129,0.25);background:rgba(16,185,129,0.05);}
.gl-nav-item.active .gl-nav-num{background:rgba(16,185,129,0.2);color:#10b981;}
.gl-nav-item.active .gl-nav-title{color:#e2e8f0;}
.gl-nav-num{width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,0.04);font-size:0.65rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#64748b;}
.gl-nav-reading{font-size:0.65rem;font-weight:700;letter-spacing:0.03em;margin-bottom:2px;color:#64748b;}
.gl-nav-title{font-size:0.82rem;font-weight:700;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ─── Header card ── */
.gl-header-card{background:linear-gradient(135deg,rgba(16,185,129,0.06),rgba(255,255,255,0.02));border:1px solid rgba(16,185,129,0.2);border-radius:16px;padding:20px 24px;margin-bottom:14px;}
.gl-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;background:rgba(16,185,129,0.12);color:#059669;font-size:0.68rem;font-weight:800;letter-spacing:0.03em;border:1px solid rgba(16,185,129,0.25);}
.gl-romaji{font-size:0.82rem;font-weight:600;color:#10b981;letter-spacing:0.02em;}
.gl-title-jp{font-family:'Noto Sans JP',sans-serif;font-size:1.6rem;font-weight:900;color:var(--v-text,#e2e8f0);margin:0;line-height:1.2;letter-spacing:0.02em;}

/* ─── Content cards ── */
.gl-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:18px;height:100%;}
.gl-card-green{border-color:rgba(16,185,129,0.2);background:rgba(16,185,129,0.03);}
.gl-card-border{border-color:rgba(16,185,129,0.2);}
.gl-card-label{font-size:0.62rem;font-weight:800;color:#64748b;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:6px;}
.gl-pattern{font-size:1rem;font-weight:700;color:#10b981;font-family:'Noto Sans JP',monospace;}
.gl-meaning{font-size:0.92rem;font-weight:700;color:#10b981;}
.gl-body-text{font-size:0.88rem;color:var(--v-text-secondary,#94a3b8);line-height:1.7;margin:0;}

/* ─── Section title ── */
.gl-section-title{font-size:0.62rem;font-weight:800;color:#64748b;letter-spacing:0.05em;text-transform:uppercase;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,0.06);}
.gl-example-card{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:16px;transition:all 0.2s;}
.gl-example-card:hover{background:rgba(255,255,255,0.04);}
.gl-example-num{width:30px;height:30px;border-radius:50%;background:rgba(16,185,129,0.1);color:#10b981;font-weight:700;font-size:0.82rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.gl-example-reading{font-size:0.72rem;color:rgba(148,163,184,0.6);font-family:monospace;margin-bottom:2px;}
.gl-example-jp{font-size:1.1rem;font-weight:700;color:var(--v-text,#e2e8f0);margin-bottom:4px;line-height:1.5;}
.gl-example-vi{font-size:0.82rem;color:#94a3b8;}
.gl-example-tts{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:#94a3b8;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;flex-shrink:0;}
.gl-example-tts:hover{background:#10b981;color:#fff;border-color:#10b981;}

/* ─── Tabs ── */
.gl-tabs{display:flex;gap:4px;background:rgba(255,255,255,0.04);border-radius:10px;padding:4px;margin-bottom:16px;}
.gl-tab-btn{padding:7px 16px;border-radius:7px;font-size:0.8rem;font-weight:700;color:#64748b;background:transparent;border:none;cursor:pointer;transition:all 0.2s;font-family:inherit;white-space:nowrap;}
.gl-tab-btn:hover{color:#e2e8f0;}
.gl-tab-btn.active{background:var(--v-accent,#10b981);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,0.2);}

/* ─── Nav buttons ── */
.gl-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.06);}
.gl-nav-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:10px;font-weight:700;font-size:0.82rem;transition:all 0.2s;cursor:pointer;font-family:inherit;border:none;}
.gl-nav-prev{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:#94a3b8;}
.gl-nav-prev:hover:not(:disabled){border-color:rgba(16,185,129,0.3);color:#e2e8f0;}
.gl-nav-next{background:linear-gradient(135deg,#059669,#10b981);color:#fff;box-shadow:0 4px 14px rgba(16,185,129,0.25);}
.gl-nav-next:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(16,185,129,0.35);}
.gl-nav-btn:disabled{opacity:0.25;cursor:not-allowed;transform:none!important;box-shadow:none!important;}

/* ─── Transcription Practice ── */
.gl-trans-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:999px;background:transparent;border:1px solid #10b981;color:#10b981;font-weight:700;font-size:0.82rem;cursor:pointer;font-family:inherit;transition:all 0.2s;}
.gl-trans-btn:hover{background:#10b981;color:#fff;}

/* ─── AI Challenge ── */
.gl-ai-box{border-radius:16px;padding:20px 24px;background:linear-gradient(135deg,rgba(16,185,129,0.08),rgba(6,182,212,0.03));border:1px solid rgba(16,185,129,0.2);margin-top:20px;}
.gl-ai-input{width:100%;background:rgba(10,14,23,0.6);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:10px 14px;color:#e2e8f0;font-size:0.88rem;outline:none;transition:border-color 0.2s;font-family:inherit;}
.gl-ai-input:focus{border-color:#10b981;}
.gl-ai-submit{padding:10px 24px;border-radius:10px;background:linear-gradient(135deg,#059669,#10b981);color:#fff;font-weight:700;font-size:0.85rem;border:none;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(16,185,129,0.25);transition:all 0.2s;white-space:nowrap;}
.gl-ai-submit:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(16,185,129,0.35);}

/* ─── Score area ── */
.gl-score{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:rgba(16,185,129,0.1);color:#10b981;font-size:0.72rem;font-weight:800;border:1px solid rgba(16,185,129,0.15);}

/* ─── Light mode ── */
[data-theme="light"] .gl-title-jp{color:var(--v-text,#1e293b);}
[data-theme="light"] .gl-card{background:rgba(0,0,0,0.015);border-color:rgba(0,0,0,0.06);}
[data-theme="light"] .gl-header-card{background:linear-gradient(135deg,rgba(16,185,129,0.06),rgba(255,255,255,0.7));border-color:rgba(16,185,129,0.15);}
[data-theme="light"] .gl-sidebar{background:#ffffff;border-color:rgba(0,0,0,0.08);}
[data-theme="light"] .gl-sidebar-title{color:#1e293b;}
[data-theme="light"] .gl-sidebar-tag-week{background:rgba(16,185,129,0.1);color:#059669;}
[data-theme="light"] .gl-sidebar-tag-level{background:#f1f5f9;color:#64748b;}
[data-theme="light"] .gl-sidebar-back{color:#64748b;}
[data-theme="light"] .gl-sidebar-back:hover{color:#059669;}
[data-theme="light"] .gl-sidebar-footer{background:#ffffff;border-color:rgba(0,0,0,0.08);}
[data-theme="light"] .gl-sidebar-done{color:#64748b;border-color:rgba(0,0,0,0.08);}
[data-theme="light"] .gl-sidebar-done:hover{background:rgba(0,0,0,0.02);color:#1e293b;}
[data-theme="light"] .gl-nav-item{color:#64748b;}
[data-theme="light"] .gl-nav-item:hover{border-color:rgba(0,0,0,0.08);background:rgba(0,0,0,0.02);}
[data-theme="light"] .gl-nav-item.active{border-color:rgba(16,185,129,0.25);background:rgba(16,185,129,0.05);}
[data-theme="light"] .gl-nav-item.active .gl-nav-reading{color:#059669;}
[data-theme="light"] .gl-nav-item.active .gl-nav-title{color:#1e293b;}
[data-theme="light"] .gl-nav-title{color:#64748b;}
[data-theme="light"] .gl-nav-num{background:rgba(0,0,0,0.04);color:#94a3b8;}
[data-theme="light"] .gl-example-jp{color:var(--v-text,#1e293b);}
[data-theme="light"] .gl-tabs{background:rgba(0,0,0,0.04);}
[data-theme="light"] .gl-tab-btn{color:#64748b;}
[data-theme="light"] .gl-tab-btn:hover{color:#1e293b;}
[data-theme="light"] .gl-tab-btn.active{background:#10b981;color:#fff;}
[data-theme="light"] .gl-ai-input{background:#ffffff;border-color:rgba(0,0,0,0.12);color:#1e293b;}
[data-theme="light"] .gl-ai-input:focus{border-color:#10b981;}
[data-theme="light"] .gl-nav-prev{background:rgba(0,0,0,0.02);border-color:rgba(0,0,0,0.08);color:#64748b;}
[data-theme="light"] .gl-nav-prev:hover:not(:disabled){border-color:#10b981;color:#1e293b;}
rt{font-size:0.65em;color:var(--v-text-muted,#94a3b8);}
ruby{line-height:1.8;}
ruby rt{line-height:1;}

/* Quiz option: selected state */
/* Quiz option: selected state */
.quiz-option-label input[type="radio"]:checked ~ span,
.quiz-option-label:has(input:checked) { border-color: var(--v-accent, #10b981) !important; background: rgba(16,185,129,0.06) !important; }
[data-theme="light"] .quiz-option-label:has(input:checked) span { color: var(--v-accent-dark, #059669) !important; }