/* =========================================================
   DAHIM DIGITAL E-BOOK SYSTEM // GOD-TIER SUPER SHELF DASHBOARD
   Score 100+ Masterpiece Edition
   Includes:
     1. 3D Virtual Bookshelf (실감형 원목 책장 뷰)
     2. Zen Deep Study Mode (몰입 독서 & 뽀모도로 & 백색소음)
     3. Exam Scope Binder (스마트 시험범위 바구니)
     4. Daily Concept 3D Flip Flashcard (수능·내신 필수 개념 플래시카드)
     5. VIP Recommended Carousel (나만의 맞춤 교재 하이라이트)
     6. AI Dahim Study Assistant (국어 학습 비서)
   ========================================================= */

:root {
    --spine-width: 14px;
    --card-radius: 18px;
    --transition-snappy: cubic-bezier(0.16, 1, 0.3, 1);
    --gold-emboss: linear-gradient(135deg, #fef08a 0%, #eab308 50%, #ca8a04 100%);
    --wood-shelf: linear-gradient(180deg, #451a03 0%, #291002 60%, #170701 100%);
}

.shelf-container {
    max-width: 1480px;
    margin: 0 auto;
    padding: 24px 20px 90px;
}

/* =========================================================
   1. HERO BANNER & ACADEMIC D-DAY HUD
   ========================================================= */
.shelf-hero-banner {
    background: linear-gradient(135deg, rgba(20, 107, 92, 0.08) 0%, rgba(37, 99, 235, 0.05) 50%, rgba(245, 158, 11, 0.04) 100%);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 28px 32px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.05);
}

body.theme-cyber .shelf-hero-banner {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(11, 19, 43, 0.85) 60%, rgba(6, 182, 212, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.25);
    box-shadow: 0 16px 40px -15px rgba(0, 0, 0, 0.7);
}

.shelf-hero-banner::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.hero-welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.hero-title {
    font-size: clamp(1.5rem, 2.5vw, 2.1rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
}

.hero-title span.accent-txt {
    color: var(--accent);
    background: linear-gradient(135deg, var(--accent) 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.theme-cyber .hero-title span.accent-txt {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-desc {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 52ch;
}

/* Dual Right Widget: D-Day & Resume Card */
.hero-dual-widget {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hud-dday-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.hud-dday-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--accent);
}

.dday-info-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dday-chip {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--text-dim);
    letter-spacing: 0.08em;
}
.dday-event-name {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
}
.dday-sub-date {
    font-size: 0.76rem;
    color: var(--text-muted);
}
.dday-badge-big {
    font-family: 'Orbitron', var(--font-mono);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: -0.02em;
    text-shadow: 0 0 14px var(--accent-glow);
}

/* Resume Reading Quick Card */
.resume-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

.resume-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.resume-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.06em;
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 5px;
}
.resume-time {
    font-size: 0.75rem;
    color: var(--text-dim);
}

.resume-book-title {
    font-size: 0.98rem;
    font-weight: 800;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.resume-progress-bar {
    height: 6px;
    background: var(--border-subtle);
    border-radius: 999px;
    overflow: hidden;
}
.resume-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #2563eb 100%);
    border-radius: 999px;
    transition: width 0.8s var(--transition-snappy);
}
body.theme-cyber .resume-progress-fill {
    background: linear-gradient(90deg, #f59e0b 0%, #10b981 100%);
}

.resume-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.btn-resume-cta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--accent);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 6px 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px var(--accent-glow);
}
.btn-resume-cta:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

/* =========================================================
   2. VIP RECOMMENDED BOOKS CAROUSEL / STRIP
   ========================================================= */
.vip-recommend-section {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(20, 107, 92, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.35);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 22px;
    position: relative;
    overflow: hidden;
}
body.theme-cyber .vip-recommend-section {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(15, 23, 42, 0.8) 100%);
}

.vip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.vip-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #d97706;
    display: flex;
    align-items: center;
    gap: 7px;
}
body.theme-cyber .vip-title { color: #f59e0b; }

.vip-carousel-track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.vip-item-card {
    min-width: 240px;
    max-width: 260px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    box-shadow: var(--shadow-sm);
}
.vip-item-card:hover {
    transform: translateY(-3px);
    border-color: #f59e0b;
}

/* =========================================================
   3. DAILY KOREAN CONCEPT 3D FLIP FLASHCARD HUD
   ========================================================= */
.concept-flashcard-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    box-shadow: var(--shadow-sm);
}

.flashcard-deck-3d {
    perspective: 1000px;
    cursor: pointer;
    min-height: 78px;
}
.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s var(--transition-snappy);
    transform-style: preserve-3d;
}
.flashcard-deck-3d.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.flashcard-back {
    transform: rotateY(180deg);
}

.card-tag-pill {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: 0.06em;
    font-family: var(--font-mono);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 4px;
}
.concept-term {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
}
.concept-desc {
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.flashcard-ctrls {
    display: flex;
    align-items: center;
    gap: 8px;
}
.flashcard-btn {
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}
.flashcard-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* =========================================================
   4. STATS DECK (4 METRICS TILES)
   ========================================================= */
.shelf-stats-deck {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--accent-rgb), 0.4);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.stat-icon-blue  { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.stat-icon-gold  { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.stat-icon-cyan  { background: rgba(6, 182, 212, 0.12); color: #0891b2; }
.stat-icon-green { background: rgba(16, 185, 129, 0.12); color: #059669; }
.stat-icon-rose  { background: rgba(225, 29, 72, 0.12); color: #e11d48; }

.stat-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.stat-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-lbl {
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text-dim);
    margin-top: 2px;
}

/* =========================================================
   5. CATEGORY TABS & SMART CHIPS
   ========================================================= */
.shelf-tabs-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.shelf-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.shelf-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    user-select: none;
}
.tab-btn:hover {
    color: var(--text-primary);
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.04);
}
.tab-btn.active {
    background: var(--accent);
    color: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--accent-glow);
}
.tab-btn .badge-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 1px 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
}
.tab-btn:not(.active) .badge-count {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-dim);
}
body.theme-cyber .tab-btn:not(.active) .badge-count {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

/* View Mode & Sorter Controls */
.view-ctrls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.view-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s ease;
}
.view-btn:hover, .view-btn.active {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    border-color: var(--accent);
}

/* =========================================================
   6. ULTRA TOOLBAR: INSTANT SEARCH, CHOSUNG, FILTERS
   ========================================================= */
.shelf-toolbar {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    box-shadow: var(--shadow-sm);
}

.toolbar-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex: 1;
}

.shelf-search-wrap {
    position: relative;
    min-width: 280px;
    flex: 1.5;
    display: flex;
    align-items: center;
}
.shelf-search-wrap i.search-icon {
    position: absolute;
    left: 14px;
    color: var(--text-dim);
    pointer-events: none;
    font-size: 0.95rem;
}
.shelf-search-input {
    width: 100%;
    padding: 10px 42px 10px 38px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 500;
    outline: none;
    transition: all 0.2s ease;
}
.shelf-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
    background: var(--bg-surface);
}
.shelf-search-clear {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 1rem;
    display: none;
    padding: 4px;
}
.shelf-search-clear:hover { color: var(--accent); }
.shelf-search-wrap.has-val .shelf-search-clear { display: block; }

.filter-select {
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.filter-select:focus {
    border-color: var(--accent);
}

.filter-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.status-pill-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-main);
    color: var(--text-dim);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.status-pill-btn:hover {
    color: var(--text-primary);
}
.status-pill-btn.active {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
    border-color: var(--accent);
}

.filter-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.78rem;
    color: var(--text-dim);
}
.filter-reset-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}
.filter-reset-link:hover { text-decoration: underline; }

/* =========================================================
   7. BENTO GRID: 3D REALISTIC TEXTBOOK COVERS
   ========================================================= */
.books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
    gap: 22px;
}

.book-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--card-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s var(--transition-snappy), box-shadow 0.25s var(--transition-snappy), border-color 0.25s ease;
    position: relative;
    user-select: none;
}
.book-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px -10px rgba(15, 23, 42, 0.12), 0 0 20px -5px var(--accent-glow);
    border-color: rgba(var(--accent-rgb), 0.45);
}

/* 3D Realistic Book Cover */
.book-cover {
    height: 185px;
    position: relative;
    padding: 18px 18px 16px 26px; /* Left indent for spine */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

/* Realistic Spine Shadow & Crease */
.book-cover::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--spine-width);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(0, 0, 0, 0.35) 100%);
    box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Cover Paper Texture Overlay */
.book-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 60%),
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.15), transparent 40%);
    pointer-events: none;
    z-index: 1;
}

/* Starred & Binder Buttons Top Right */
.book-cover-top-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 5;
}

.book-star-btn, .book-binder-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}
.book-star-btn:hover {
    transform: scale(1.15);
    color: #fbbf24;
    border-color: #fbbf24;
}
.book-star-btn.active {
    background: #fbbf24;
    color: #78350f;
    border-color: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.6);
}
.book-binder-btn:hover {
    transform: scale(1.15);
    color: #38bdf8;
    border-color: #38bdf8;
}
.book-binder-btn.active {
    background: #0284c7;
    color: #ffffff;
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.6);
}

.book-badge-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    position: relative;
    z-index: 3;
    padding-right: 76px; /* leave room for top buttons */
}

.book-pub-badge {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.25);
    letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
}

.book-grade-pill {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

.book-cover-title {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-video-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.95);
    color: #030712;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
    position: relative;
    z-index: 3;
    cursor: pointer;
    transition: transform 0.15s ease;
}
.book-video-pill:hover {
    transform: scale(1.05);
}

/* Card Body */
.book-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    gap: 12px;
}

.book-meta-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Progress Box */
.book-progress-box {
    background: var(--bg-main);
    border-radius: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-subtle);
}
.book-progress-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-dim);
    margin-bottom: 5px;
}
.book-progress-bar {
    height: 5px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 999px;
    overflow: hidden;
}
body.theme-cyber .book-progress-bar {
    background: rgba(255, 255, 255, 0.1);
}
.book-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #2563eb 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}
body.theme-cyber .book-progress-fill {
    background: linear-gradient(90deg, #f59e0b 0%, #10b981 100%);
}

/* Card Action Group */
.book-card-actions {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 7px;
}

.btn-read-now {
    background: var(--accent);
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 0.86rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px var(--accent-glow);
}
.btn-read-now:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.btn-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}
.btn-card-icon:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
}
.btn-card-icon.video-btn:hover {
    color: #d97706;
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

/* =========================================================
   8. 3D VIRTUAL BOOKSHELF VIEW (실감형 3D 책장 모드)
   ========================================================= */
.shelf-3d-view {
    display: none;
    flex-direction: column;
    gap: 36px;
    margin-top: 14px;
}

.shelf-plank-unit {
    position: relative;
    padding-bottom: 22px;
}
.shelf-plank-header {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.shelf-books-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    overflow-x: auto;
    padding: 30px 18px 6px;
    scrollbar-width: thin;
}

/* 3D Vertical Book Spine Standing Upright */
.spine-book {
    height: 230px;
    border-radius: 4px 6px 2px 2px;
    position: relative;
    cursor: pointer;
    color: #ffffff;
    padding: 12px 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.4), inset -2px 0 6px rgba(0, 0, 0, 0.5), inset 2px 0 6px rgba(255, 255, 255, 0.3);
    transition: transform 0.25s var(--transition-snappy), box-shadow 0.25s ease;
    flex-shrink: 0;
    user-select: none;
}
.spine-book:hover {
    transform: translateY(-26px) scale(1.06);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.6), 0 0 20px var(--accent-glow);
    z-index: 10;
}

.spine-title-vertical {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    max-height: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.spine-gold-band {
    width: 80%;
    height: 3px;
    background: var(--gold-emboss);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.8);
}
.spine-tag-top {
    font-size: 0.65rem;
    font-weight: 700;
    writing-mode: vertical-rl;
    opacity: 0.85;
}

/* Shelf Wooden Base Plank */
.shelf-wood-base {
    height: 18px;
    background: var(--wood-shelf);
    border-radius: 4px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2);
    position: relative;
}
body.theme-cyber .shelf-wood-base {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 60%, #020617 100%);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7), inset 0 2px 4px rgba(6, 182, 212, 0.3);
}

/* =========================================================
   9. TABLE / COMPACT LIST VIEW
   ========================================================= */
.shelf-table-view {
    display: none;
    width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.shelf-table-view table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}
.shelf-table-view th {
    background: var(--bg-main);
    padding: 12px 14px;
    text-align: left;
    font-weight: 700;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.shelf-table-view td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    vertical-align: middle;
}
.shelf-table-view tr:last-child td { border-bottom: none; }
.shelf-table-view tr:hover td {
    background: rgba(var(--accent-rgb), 0.03);
}

/* =========================================================
   10. INTERACTIVE MODALS (PREVIEW & VIDEO & ZEN)
   ========================================================= */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.72);
    backdrop-filter: blur(14px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: modalFadeIn 0.25s var(--transition-snappy) forwards;
}
.modal-overlay.active { display: flex; }

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-deck {
    width: 100%;
    max-width: 680px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
    animation: modalPop 0.28s var(--transition-snappy) forwards;
}

@keyframes modalPop {
    from { transform: scale(0.95) translateY(10px); }
    to { transform: scale(1) translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border-subtle);
}
.modal-header h3 {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text-primary);
}
.modal-close-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}
.modal-close-btn:hover { color: var(--accent); }

.modal-body {
    padding: 24px;
    max-height: 75vh;
    overflow-y: auto;
}

.modal-preview-grid {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 22px;
    margin-bottom: 20px;
}

.modal-book-cover-box {
    height: 240px;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    overflow: hidden;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}
.modal-book-cover-box::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 10px;
    background: linear-gradient(90deg, rgba(0,0,0,0.5), rgba(255,255,255,0.2), rgba(0,0,0,0.4));
}

.modal-detail-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.88rem;
}
.modal-detail-row {
    display: flex;
    justify-content: space-between;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
}
.modal-detail-row .k { color: var(--text-dim); font-weight: 600; }
.modal-detail-row .v { color: var(--text-primary); font-weight: 700; }

.modal-video-section {
    margin-top: 20px;
    background: var(--bg-main);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--border-subtle);
}
.modal-video-title {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.modal-video-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}
.modal-video-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    font-size: 0.84rem;
    transition: all 0.2s ease;
}
.modal-video-item:hover {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.05);
}

.modal-footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-main);
}

/* =========================================================
   11. ZEN DEEP STUDY MODE & WHITE NOISE MODAL
   ========================================================= */
.zen-modal-deck {
    width: 100%;
    max-width: 540px;
    background: #030712;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 30px;
    color: #fff;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.9), 0 0 40px var(--accent-glow);
}

.zen-timer-display {
    font-family: 'Orbitron', var(--font-mono);
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--accent);
    margin: 20px 0;
    letter-spacing: 0.04em;
    text-shadow: 0 0 20px var(--accent-glow);
}

.zen-ctrl-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
}
.btn-zen-ctrl {
    padding: 10px 22px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    font-size: 0.92rem;
    transition: all 0.2s;
}
.btn-zen-ctrl.primary {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 15px var(--accent-glow);
}

.zen-sound-box {
    background: rgba(15, 23, 42, 0.8);
    border-radius: 16px;
    padding: 16px 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: left;
}
.zen-sound-title {
    font-size: 0.84rem;
    font-weight: 800;
    color: #94a3b8;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.zen-sound-chips {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}
.sound-chip-btn {
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
}
.sound-chip-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

/* =========================================================
   12. EXAM SCOPE BINDER (시험범위 바구니) FLOATING DRAWER
   ========================================================= */
.floating-binder-btn {
    position: fixed;
    bottom: 24px;
    right: 88px;
    z-index: 999;
    padding: 12px 20px;
    background: #0284c7;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(2, 132, 199, 0.45);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.floating-binder-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.6);
}

.binder-drawer {
    position: fixed;
    bottom: 84px;
    right: 24px;
    width: 360px;
    max-height: 480px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    box-shadow: var(--shadow-lg);
    z-index: 998;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: drawerPop 0.25s var(--transition-snappy) forwards;
}
.binder-drawer.active { display: flex; }

@keyframes drawerPop {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.binder-header {
    padding: 14px 18px;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 800;
}
.binder-list {
    padding: 12px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.binder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: var(--bg-main);
    border-radius: 8px;
    font-size: 0.82rem;
    border: 1px solid var(--border-subtle);
}

/* =========================================================
   13. AI DAHIM ASSISTANT FLOATING WIDGET
   ========================================================= */
.floating-ai-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45);
    transition: all 0.25s var(--transition-snappy);
}
.floating-ai-btn:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 12px 32px rgba(16, 185, 129, 0.6);
}

.ai-assistant-drawer {
    position: fixed;
    bottom: 86px;
    right: 24px;
    width: 380px;
    height: 520px;
    background: var(--bg-surface);
    border: 1px solid var(--border-strong);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    z-index: 998;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: drawerPop 0.25s var(--transition-snappy) forwards;
}
.ai-assistant-drawer.active { display: flex; }

.ai-chat-header {
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, var(--bg-surface) 100%);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.86rem;
    line-height: 1.5;
    max-width: 88%;
}
.ai-bubble.bot {
    background: var(--bg-main);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    align-self: flex-start;
}
.ai-bubble.user {
    background: var(--accent);
    color: #fff;
    align-self: flex-end;
}

.ai-input-wrap {
    padding: 12px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    gap: 8px;
}
.ai-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.86rem;
    outline: none;
}

/* =========================================================
   14. RESPONSIVE OPTIMIZATION
   ========================================================= */
@media (max-width: 1080px) {
    .shelf-hero-banner {
        grid-template-columns: 1fr;
        padding: 24px 22px;
    }
    .shelf-stats-deck {
        grid-template-columns: repeat(2, 1fr);
    }
    .concept-flashcard-wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .shelf-container {
        padding: 14px 12px 80px;
    }
    .shelf-stats-deck {
        grid-template-columns: 1fr;
    }
    .books-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .floating-binder-btn {
        bottom: 84px;
        right: 20px;
        padding: 8px 14px;
        font-size: 0.78rem;
    }
    .floating-ai-btn {
        bottom: 20px;
        right: 20px;
    }
    .ai-assistant-drawer, .binder-drawer {
        width: calc(100vw - 32px);
        right: 16px;
        bottom: 80px;
    }
}

/* =========================================================
   15. 1-MINUTE CONCEPT CHALLENGE QUIZ MODAL
   ========================================================= */
.quiz-modal-deck {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    width: 92%;
    max-width: 580px;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    animation: modalPop 0.25s var(--transition-snappy);
}
.quiz-q-box {
    margin-bottom: 20px;
}
.quiz-q-num {
    font-size: 0.76rem;
    font-weight: 800;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.quiz-q-title {
    font-size: 1.12rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 16px;
}
.quiz-options-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.quiz-opt-btn {
    background: var(--bg-main);
    border: 1.5px solid var(--border-subtle);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: left;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.quiz-opt-btn:hover:not(:disabled) {
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.06);
    transform: translateX(4px);
}
.quiz-opt-btn.correct {
    background: rgba(16, 185, 129, 0.15) !important;
    border-color: #10b981 !important;
    color: #10b981 !important;
    font-weight: 800;
}
.quiz-opt-btn.wrong {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}
.quiz-feedback-box {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.45;
    animation: fadeIn 0.2s ease;
}
.quiz-feedback-box.correct {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.quiz-feedback-box.wrong {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.quiz-score-screen {
    text-align: center;
    padding: 24px 12px;
}
.quiz-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    font-size: 2.2rem;
    font-weight: 900;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.4);
    margin-bottom: 16px;
}

/* =========================================================
   16. STICKY MEMO / POST-IT BADGE SYSTEM
   ========================================================= */
.book-sticky-note {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #fef08a 0%, #fde047 100%);
    color: #854d0e;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.1);
    transform: rotate(2deg);
    z-index: 10;
    pointer-events: none;
    max-width: 110px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-left: 2px solid #ca8a04;
}
.spine-sticky-pin {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fde047;
    border: 1px solid #ca8a04;
    box-shadow: 0 0 4px #facc15;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.preview-memo-box {
    margin-top: 16px;
    padding: 14px;
    background: rgba(254, 240, 138, 0.12);
    border: 1px dashed rgba(202, 138, 4, 0.4);
    border-radius: 12px;
}
.memo-header {
    font-size: 0.78rem;
    font-weight: 800;
    color: #b45309;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.memo-input-row {
    display: flex;
    gap: 8px;
}
.memo-input {
    flex: 1;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-main);
    color: var(--text-primary);
    font-size: 0.85rem;
    outline: none;
}
.memo-save-btn {
    padding: 8px 14px;
    border-radius: 8px;
    background: #ca8a04;
    color: #fff;
    border: none;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.memo-save-btn:hover {
    background: #a16207;
}

/* =========================================================
   17. AI QUICK CHIP BUTTONS
   ========================================================= */
.ai-chip-btn {
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.ai-chip-btn:hover {
    border-color: #10b981;
    color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

/* =========================================================
   18. PRINTABLE EXAM STUDY SCOPE STYLESHEET
   ========================================================= */
@media print {
    body * {
        visibility: hidden !important;
    }
    #printScopeSection, #printScopeSection * {
        visibility: visible !important;
    }
    #printScopeSection {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        background: #fff !important;
        color: #000 !important;
        padding: 24px !important;
        font-family: sans-serif !important;
    }
}



/* =========================================================
   ULTRA-GAP (초격차) 120-POINT ENHANCEMENTS
   ========================================================= */
:root {
    --wood-grain-walnut: linear-gradient(180deg, #3d271d 0%, #291811 40%, #1a0e0a 100%);
    --wood-grain-oak: linear-gradient(180deg, #996e42 0%, #7d532a 40%, #58391b 100%);
    --wood-grain-mahogany: linear-gradient(180deg, #5c2018 0%, #3e120c 40%, #260805 100%);
}

/* 3D Bookshelf Parallax & Wood Skin Finishes */
.shelf-3d-view {
    perspective: 1200px;
    perspective-origin: 50% 250px;
    transition: all 0.3s ease;
}
.shelf-plank-unit {
    position: relative;
    margin-bottom: 36px;
    border-radius: 12px 12px 6px 6px;
    padding: 12px 18px 0;
    box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.28);
    transition: transform 0.2s ease-out;
}
.shelf-plank-unit.skin-walnut .shelf-wood-base {
    background: var(--wood-grain-walnut) !important;
    border-top: 2px solid #573729;
}
.shelf-plank-unit.skin-oak .shelf-wood-base {
    background: var(--wood-grain-oak) !important;
    border-top: 2px solid #b58656;
}
.shelf-plank-unit.skin-mahogany .shelf-wood-base {
    background: var(--wood-grain-mahogany) !important;
    border-top: 2px solid #7a2a20;
}

.spine-book {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, filter 0.2s ease !important;
    transform-origin: bottom center;
}
.spine-book:hover {
    transform: translateY(-16px) scale(1.06) rotateY(-8deg) !important;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5), 0 0 16px rgba(245, 158, 11, 0.6) !important;
    z-index: 50;
}
.spine-book.search-dim {
    opacity: 0.18;
    filter: grayscale(80%) brightness(60%);
}
.spine-book.search-highlight {
    opacity: 1;
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 0 16px #f59e0b, 0 12px 24px rgba(0,0,0,0.4);
    border: 1.5px solid #fbbf24;
}

mark.shelf-highlight {
    background: #fef08a;
    color: #854d0e;
    font-weight: 800;
    border-radius: 3px;
    padding: 1px 3px;
}
body.theme-cyber mark.shelf-highlight {
    background: #f59e0b;
    color: #030712;
}

/* 3D Realistic In-Browser Flipbook Reader Modal */
.flipbook-overlay {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, 0.88);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 100050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.flipbook-overlay.active {
    display: flex;
    opacity: 1;
}

.flipbook-modal {
    width: 100%;
    max-width: 1200px;
    height: 90vh;
    max-height: 820px;
    background: #1e293b;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.flipbook-header {
    height: 56px;
    background: #0f172a;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: #fff;
    flex-shrink: 0;
}

.flipbook-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0b1120;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.flipbook-spread {
    width: 100%;
    max-width: 980px;
    height: 100%;
    max-height: 640px;
    background: #fdfbf7;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 100px rgba(0, 0, 0, 0.04);
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    overflow: hidden;
    border: 1px solid #dcd7cb;
}
.flipbook-spread::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 24px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.02) 40%, rgba(0,0,0,0.02) 60%, rgba(0,0,0,0.15) 100%);
    pointer-events: none;
    z-index: 10;
}

.flipbook-page {
    padding: 36px 32px;
    color: #1e293b;
    font-family: 'Pretendard', sans-serif;
    line-height: 1.85;
    position: relative;
    overflow-y: auto;
    font-size: 0.95rem;
}
.flipbook-page-num {
    position: absolute;
    bottom: 12px;
    font-size: 0.78rem;
    font-family: var(--font-mono);
    color: #94a3b8;
}
.flipbook-page:first-child .flipbook-page-num { left: 24px; }
.flipbook-page:last-child .flipbook-page-num { right: 24px; }

.pen-canvas-layer {
    position: absolute;
    inset: 0;
    z-index: 15;
    cursor: crosshair;
}

.flipbook-footer {
    height: 60px;
    background: #0f172a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    color: #fff;
    flex-shrink: 0;
}

.pen-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pen-tool-btn {
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}
.pen-tool-btn:hover { background: rgba(255, 255, 255, 0.2); }
.pen-tool-btn.active { background: #3b82f6; border-color: #60a5fa; }

/* 6-Axis Radar Analytics Deck */
.radar-analytics-wrap {
    margin: 28px 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 24px 28px;
    box-shadow: var(--shadow-sm);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 28px;
    align-items: center;
}
@media (max-width: 900px) {
    .radar-analytics-wrap { grid-template-columns: 1fr; }
}

.radar-canvas-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
#radarChartCanvas {
    max-width: 380px;
    width: 100%;
    height: auto;
}

/* 3-Channel Ambient Sound Mixer */
.sound-mixer-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 16px;
    margin-top: 14px;
}
.mixer-channel {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.mixer-channel:last-child { margin-bottom: 0; }
.mixer-lbl { width: 110px; font-size: 0.78rem; font-weight: 700; color: #cbd5e1; }
.mixer-slider {
    flex: 1;
    accent-color: #10b981;
    cursor: pointer;
}

.wood-skin-select {
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

/* ════════════════════════════════════════════════════════════════
   QUANTUM MASTERPIECE // THEME CYBER OLED DARK ENGINE
   ════════════════════════════════════════════════════════════════ */
body.theme-cyber {
    --bg-main: #060911 !important;
    --bg-surface: #0c1222 !important;
    --bg-surface-elevated: #151f38 !important;
    --bg-card: rgba(12, 18, 34, 0.94) !important;
    --bg-glass: rgba(12, 18, 34, 0.82) !important;
    --border-subtle: #1c294a !important;
    --border-strong: #2a3c68 !important;
    
    --text-primary: #f1f5f9 !important;
    --text-muted: #94a3b8 !important;
    --text-dim: #64748b !important;
    --text-inverse: #060911 !important;

    --accent: #10b981 !important;
    --accent-rgb: 16, 185, 129 !important;
    --accent-glow: rgba(16, 185, 129, 0.28) !important;
    --accent-hover: #059669 !important;

    background-color: #060911 !important;
    color: #f1f5f9 !important;
}

body.theme-cyber .dh-shelf-header {
    background: rgba(12, 18, 34, 0.92) !important;
    border-color: #1c294a !important;
}
body.theme-cyber .book-card-unified {
    background: #0c1222 !important;
    border-color: #1c294a !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
}
body.theme-cyber .book-card-unified:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 16px 36px rgba(59, 130, 246, 0.22) !important;
}
body.theme-cyber .modal-deck,
body.theme-cyber .drawer-deck,
body.theme-cyber .flipbook-modal {
    background: #0c1222 !important;
    border-color: #1c294a !important;
    color: #f1f5f9 !important;
}
body.theme-cyber .modal-header,
body.theme-cyber .drawer-header {
    border-color: #1c294a !important;
}
body.theme-cyber .search-wrapper input,
body.theme-cyber .filter-select,
body.theme-cyber .wood-skin-select,
body.theme-cyber .view-btn,
body.theme-cyber .nav-icon-btn,
body.theme-cyber .level-xp-pill {
    background: #0c1222 !important;
    border-color: #1c294a !important;
    color: #f1f5f9 !important;
}
body.theme-cyber .radar-container,
body.theme-cyber .ambient-mixer-pill {
    background: #0c1222 !important;
    border-color: #1c294a !important;
}
body.theme-cyber .ai-bubble.bot {
    background: #151f38 !important;
    color: #e2e8f0 !important;
    border: 1px solid #1c294a !important;
}
body.theme-cyber .ai-chip-btn {
    background: #151f38 !important;
    border-color: #1c294a !important;
    color: #93c5fd !important;
}

/* Cheat Sheet Modal Styles */
.cheat-sheet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 14px;
}
.cheat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cheat-card-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cheat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.83rem;
    line-height: 1.6;
}
.cheat-list li {
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-subtle);
}
.cheat-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.cheat-keyword {
    font-weight: 800;
    color: #2563eb;
    margin-right: 4px;
}

/* Print Optimization */
@media print {
    body * {
        visibility: hidden;
    }
    #cheatSheetModal, #cheatSheetModal * {
        visibility: visible;
    }
    #cheatSheetModal {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        background: #fff !important;
        color: #000 !important;
        display: block !important;
        opacity: 1 !important;
    }
    #cheatSheetModal .modal-deck {
        max-width: 100% !important;
        width: 100% !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    #cheatSheetModal .modal-close-btn,
    #cheatSheetModal .print-hide {
        display: none !important;
    }
}

/* Quick Keywords Tag Chips */
.search-quick-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    align-items: center;
}
.quick-tag-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.73rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.quick-tag-chip:hover {
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
    border-color: #2563eb;
    transform: translateY(-1px);
}
body.theme-cyber .quick-tag-chip {
    background: #111a2e !important;
    border-color: #1e2c4a !important;
    color: #94a3b8 !important;
}
body.theme-cyber .quick-tag-chip:hover {
    background: rgba(59, 130, 246, 0.22) !important;
    color: #60a5fa !important;
    border-color: #3b82f6 !important;
}

/* AI Voice Search Microphone Button */
.shelf-voice-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: all 0.15s ease;
}
.shelf-voice-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
}
.shelf-voice-btn.listening {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.2) !important;
    animation: pulseVoice 1s infinite alternate;
}
@keyframes pulseVoice {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    100% { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* ════════════════════════════════════════════════════════════════
   OMNIVERSE EDITION // POETRY STUDIO & LIVE TICKER STYLES
   ════════════════════════════════════════════════════════════════ */
.dday-streak-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.73rem;
    font-weight: 800;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    margin-top: 4px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.dday-live-ticker {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: -0.02em;
}
.dday-time-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Audio Poetry Studio Modal */
.poetry-grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 20px;
    margin-top: 14px;
}
@media (max-width: 768px) {
    .poetry-grid { grid-template-columns: 1fr; }
}
.poetry-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.poetry-item-btn {
    text-align: left;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.85rem;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.poetry-item-btn:hover {
    border-color: #a855f7;
    background: rgba(168, 85, 247, 0.08);
}
.poetry-item-btn.active {
    background: #a855f7;
    color: #fff;
    border-color: #a855f7;
}
.poetry-item-btn.active span {
    color: #f3e8ff !important;
}
.poetry-stage {
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: 14px;
    padding: 22px;
    max-height: 420px;
    overflow-y: auto;
}
.poetry-lines {
    font-size: 0.95rem;
    line-height: 2.1;
    font-family: var(--font-sans);
}
.poetry-line {
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.2s;
}
.poetry-line.active {
    background: rgba(245, 158, 11, 0.25);
    font-weight: 800;
    color: #d97706;
}
.poetry-ctrl-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    margin-top: 14px;
}


/* ==========================================================================
   8th Wave: Singularity Infinity Edition - Vault, Achievements, Curriculum
   ========================================================================== */
/* Vault & Filter Tabs */
.vault-filter-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.vault-tab-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.vault-tab-btn:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}
.vault-tab-btn.active {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  border-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.vault-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vault-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.vault-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.vault-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.vault-card-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.vault-badge-killer { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.vault-badge-book { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
.vault-badge-concept { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }

.vault-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
}
.vault-card-meta {
  font-size: 0.8rem;
  color: var(--text-dim);
}
.vault-analysis-box {
  background: var(--bg-main);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.88rem;
  border-left: 3px solid #ef4444;
}
.vault-card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Achievement & Tier Styles */
.tier-hero-box {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(168, 85, 247, 0.12));
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}
.tier-emblem {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: #fff;
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.4);
  flex-shrink: 0;
}
.tier-info-details {
  flex: 1;
}
.tier-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.tier-name {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text-main);
}
.tier-pill {
  font-size: 0.75rem;
  font-weight: 800;
  background: #3b82f6;
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.badge-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: all 0.2s ease;
}
.badge-item-card.unlocked {
  border-color: rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, var(--bg-surface), rgba(16, 185, 129, 0.05));
}
.badge-item-card.locked {
  opacity: 0.55;
  filter: grayscale(80%);
}
.badge-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  background: var(--bg-main);
  flex-shrink: 0;
}
.badge-item-card.unlocked .badge-icon-box {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}
.badge-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 2px;
}
.badge-desc {
  font-size: 0.76rem;
  color: var(--text-dim);
  line-height: 1.35;
}
.badge-xp-reward {
  font-size: 0.7rem;
  font-weight: 800;
  color: #f59e0b;
  margin-top: 4px;
  display: inline-block;
}

/* Curriculum Roadmap Styles */
.curriculum-timeline {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  margin-top: 10px;
}
.curriculum-timeline::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 20px;
  width: 3px;
  background: linear-gradient(180deg, #3b82f6, #10b981, #f59e0b);
  border-radius: 2px;
}
.curriculum-step {
  display: flex;
  gap: 20px;
  position: relative;
}
.curriculum-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 3px solid #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.9rem;
  color: #3b82f6;
  flex-shrink: 0;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.curriculum-card {
  flex: 1;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 18px 20px;
}
.curriculum-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 6px;
}
.curriculum-target {
  font-size: 0.8rem;
  color: #3b82f6;
  font-weight: 700;
  margin-bottom: 8px;
}
.curriculum-book-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.curriculum-book-chip {
  font-size: 0.76rem;
  background: var(--bg-main);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--text-main);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.curriculum-book-chip:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}

/* Print Styles for Study Vault */
@media print {
  body * {
    visibility: hidden;
  }
  #studyVaultModal, #studyVaultModal * {
    visibility: visible;
  }
  #studyVaultModal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    background: #fff !important;
    display: block !important;
    opacity: 1 !important;
  }
  .modal-dialog {
    max-width: 100% !important;
    width: 100% !important;
    box-shadow: none !important;
    border: none !important;
  }
  .vault-filter-tabs, .modal-close-btn, .vault-card-actions, .print-hide {
    display: none !important;
  }
  .vault-card {
    page-break-inside: avoid;
    border: 1px solid #ccc !important;
    margin-bottom: 12px !important;
  }
}


/* ==========================================================================
   DAHIM MASTER DESIGN SYSTEM: ACCESSIBILITY, CONTRAST & CLEAN NAVIGATION
   ========================================================================== */
:root {
    --text-main: #0f172a;
    --text-primary: #0f172a;
    --text-muted: #334155;
    --text-dim: #64748b;
    --bg-main: #f8fafc;
    --bg-surface: #ffffff;
    --bg-card: #ffffff;
    --border-subtle: #e2e8f0;
    --border-strong: #cbd5e1;
    --brand-blue: #2563eb;
    --brand-amber: #f59e0b;
    --brand-emerald: #10b981;
    --brand-purple: #8b5cf6;
    --brand-rose: #ef4444;
}

body.theme-cyber {
    --text-main: #f8fafc !important;
    --text-primary: #f8fafc !important;
    --text-muted: #cbd5e1 !important;
    --text-dim: #94a3b8 !important;
    --bg-main: #060911 !important;
    --bg-surface: #0f172a !important;
    --bg-card: #152238 !important;
    --border-subtle: #243556 !important;
    --border-strong: #3b507d !important;
}

/* Master Header Navigation */
.dh-header-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    padding: 10px 24px;
    transition: all 0.25s ease;
}
body.theme-cyber .dh-header-nav {
    background: rgba(15, 23, 42, 0.94);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.dh-header-container {
    max-width: 1540px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* 1. Left Cluster: Brand, Tier HUD & Student */
.dh-brand-cluster {
    display: flex;
    align-items: center;
    gap: 12px;
}
.dh-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.dh-brand-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #10b981, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 900;
    font-size: 1.15rem;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.3);
}
.dh-brand-info {
    display: flex;
    flex-direction: column;
}
.dh-brand-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.dh-brand-sub {
    font-size: 0.7rem;
    color: #2563eb;
    font-family: var(--font-mono);
    font-weight: 800;
    letter-spacing: 0.06em;
}
body.theme-cyber .dh-brand-sub {
    color: #38bdf8;
}

/* Tier HUD Pill Button */
.dh-tier-hud-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 24px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.dh-tier-hud-btn:hover {
    transform: translateY(-1px);
    border-color: #3b82f6;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.25);
}
.dh-tier-emblem {
    font-size: 0.74rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #ffffff;
    white-space: nowrap;
}
.dh-tier-bar {
    width: 64px;
    height: 6px;
    border-radius: 3px;
    background: var(--border-subtle);
    overflow: hidden;
}
.dh-tier-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #10b981);
    border-radius: 3px;
}
.dh-tier-xp {
    font-size: 0.74rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text-muted);
}
body.theme-cyber .dh-tier-xp {
    color: #cbd5e1;
}

/* Student Badge */
.dh-student-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.2);
    font-size: 0.78rem;
    font-weight: 800;
    color: #2563eb;
    white-space: nowrap;
}
body.theme-cyber .dh-student-pill {
    background: rgba(56, 189, 248, 0.12);
    border-color: rgba(56, 189, 248, 0.3);
    color: #38bdf8;
}
.dh-student-school {
    opacity: 0.8;
    font-weight: 600;
}

/* 2. Center: Modern Learning Studio Hub */
.dh-studio-hub {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dh-studio-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 24px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #ffffff !important;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}
.dh-studio-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}
.cta-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px #ffffff;
    animation: ctaPulse 1.6s infinite ease-in-out;
}
@keyframes ctaPulse {
    0%, 100% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.3); opacity: 1; }
}

.dh-studio-btn-group {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    padding: 4px;
    border-radius: 24px;
}
body.theme-cyber .dh-studio-btn-group {
    background: rgba(21, 34, 56, 0.8);
    border-color: #243556;
}

.dh-studio-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 18px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.dh-studio-btn:hover {
    background: var(--bg-surface);
    border-color: var(--border-subtle);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
body.theme-cyber .dh-studio-btn:hover {
    background: #1c2b48;
    border-color: #3b507d;
}

.dh-studio-btn .icon-red { color: #ef4444; }
.dh-studio-btn .icon-purple { color: #a855f7; }
.dh-studio-btn .icon-sky { color: #0ea5e9; }
.dh-studio-btn .icon-blue { color: #3b82f6; }
.dh-studio-btn .icon-green { color: #10b981; }

.dh-kbd-hint {
    font-size: 0.65rem;
    font-weight: 800;
    font-family: var(--font-mono);
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--border-subtle);
    color: var(--text-dim);
    margin-left: 2px;
}
body.theme-cyber .dh-kbd-hint {
    background: #243556;
    color: #94a3b8;
}

/* 3. Right: System Utilities Cluster */
.dh-util-cluster {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dh-util-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1.05rem;
    position: relative;
    transition: all 0.2s ease;
}
.dh-util-btn:hover {
    transform: translateY(-1px);
    border-color: #3b82f6;
    color: #3b82f6;
    box-shadow: 0 3px 10px rgba(59, 130, 246, 0.2);
}
body.theme-cyber .dh-util-btn {
    background: #152238;
    border-color: #243556;
    color: #cbd5e1;
}
body.theme-cyber .dh-util-btn:hover {
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 3px 12px rgba(56, 189, 248, 0.3);
}

.dh-util-admin {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #f59e0b !important;
}
.dh-admin-tag {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #f59e0b;
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 900;
    padding: 1px 4px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.4);
}

/* Tactile Reset Button */
.btn-filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.btn-filter-reset:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
    transform: translateY(-1px);
}
body.theme-cyber .btn-filter-reset {
    background: #0f172a;
    border-color: #243556;
    color: #cbd5e1;
}

/* Tactile Quick Tag Chips */
.quick-tag-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    color: #2563eb;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.18s ease;
}
.quick-tag-chip:hover {
    background: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
}
body.theme-cyber .quick-tag-chip {
    background: #0f172a;
    border-color: #243556;
    color: #38bdf8;
}
body.theme-cyber .quick-tag-chip:hover {
    background: #38bdf8;
    color: #060911;
    border-color: #38bdf8;
}

/* Flashcard Counter Badge */
.flashcard-counter-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    font-size: 0.8rem;
    font-weight: 800;
    font-family: var(--font-mono);
    color: var(--text-primary);
}
body.theme-cyber .flashcard-counter-badge {
    background: #0f172a;
    border-color: #243556;
    color: #f8fafc;
}

/* Contrast Overrides for Content Cards & Modals */
.hero-desc {
    color: var(--text-muted) !important;
}
body.theme-cyber .hero-desc {
    color: #cbd5e1 !important;
}
.hud-dday-card, .resume-card, .book-card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
}
body.theme-cyber .hud-dday-card,
body.theme-cyber .resume-card,
body.theme-cyber .book-card {
    background: #0f172a !important;
    border-color: #243556 !important;
}
.dday-event-name, .resume-book-title, .curriculum-card-title, .vault-card-title, .badge-name, .tier-name {
    color: var(--text-primary) !important;
}
.dday-sub-date, .resume-time, .badge-desc, .curriculum-target {
    color: var(--text-muted) !important;
}
body.theme-cyber .dday-sub-date,
body.theme-cyber .resume-time,
body.theme-cyber .badge-desc,
body.theme-cyber .curriculum-target {
    color: #cbd5e1 !important;
}
.vault-analysis-box {
    background: var(--bg-main) !important;
    color: var(--text-primary) !important;
}
body.theme-cyber .vault-analysis-box {
    background: #060911 !important;
    color: #f8fafc !important;
}
.shelf-search-input {
    background: var(--bg-surface) !important;
    border: 1.5px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
body.theme-cyber .shelf-search-input {
    background: #0f172a !important;
    border-color: #243556 !important;
    color: #f8fafc !important;
}
.shelf-search-input::placeholder {
    color: var(--text-dim) !important;
}
body.theme-cyber .shelf-search-input::placeholder {
    color: #94a3b8 !important;
}
.filter-select {
    background: var(--bg-surface) !important;
    border: 1.5px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}
body.theme-cyber .filter-select {
    background: #0f172a !important;
    border-color: #243556 !important;
    color: #f8fafc !important;
}
.tab-btn {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-muted) !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.theme-cyber .tab-btn {
    background: #0f172a !important;
    border-color: #243556 !important;
    color: #cbd5e1 !important;
}
.tab-btn.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}


/* ==========================================================================
   9th Wave: Cosmic Genesis Edition - Spine Interaction, Search Dropdown, Vocab Game
   ========================================================================== */

/* Enhanced 3D Spine Book Interaction */
.spine-book {
  position: relative;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), z-index 0.2s;
  cursor: pointer;
  transform-style: preserve-3d;
}
.spine-book:hover {
  transform: translateY(-24px) translateZ(28px) scale(1.06) !important;
  z-index: 50 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(59, 130, 246, 0.35) !important;
}
.spine-book::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.spine-book:hover::after {
  opacity: 1;
}

/* Intelligent Search Dropdown */
.shelf-search-wrap {
  position: relative;
}
.shelf-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
  z-index: 100;
  max-height: 420px;
  overflow-y: auto;
  display: none;
  backdrop-filter: blur(20px);
}
body.theme-cyber .shelf-search-dropdown {
  background: rgba(15, 23, 42, 0.96);
  border-color: #243556;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7);
}
.shelf-search-dropdown.active {
  display: block;
}

.search-drop-header {
  padding: 10px 16px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-drop-item {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.15s ease;
}
.search-drop-item:last-child {
  border-bottom: none;
}
.search-drop-item:hover, .search-drop-item.selected {
  background: rgba(37, 99, 235, 0.08);
}
body.theme-cyber .search-drop-item:hover,
body.theme-cyber .search-drop-item.selected {
  background: rgba(56, 189, 248, 0.12);
}
.search-drop-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.search-drop-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--brand-blue);
  flex-shrink: 0;
}
.search-drop-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-drop-meta {
  font-size: 0.74rem;
  color: var(--text-dim);
}
.search-drop-action {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--brand-blue);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Vocab Speed Battle Mini-Game Styles */
.vocab-game-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vocab-hud-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 14px 20px;
}
.vocab-stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vocab-stat-lbl {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
}
.vocab-stat-val {
  font-size: 1.4rem;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--text-primary);
}
.vocab-timer-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
}
.vocab-timer-bar-wrap {
  width: 100%;
  height: 8px;
  background: var(--border-subtle);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 4px;
}
.vocab-timer-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b, #ef4444);
  transition: width 1s linear;
}
.vocab-combo-badge {
  font-size: 0.85rem;
  font-weight: 900;
  color: #f59e0b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.vocab-question-card {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(168, 85, 247, 0.06));
  border: 1.5px solid rgba(37, 99, 235, 0.25);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
}
.vocab-q-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 12px;
  background: #2563eb;
  color: #fff;
  margin-bottom: 12px;
}
.vocab-q-text {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.4;
  margin-bottom: 8px;
}
.vocab-q-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.vocab-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.vocab-opt-btn {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vocab-opt-btn:hover {
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.2);
}
.vocab-opt-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  flex-shrink: 0;
}
.vocab-opt-btn.correct {
  background: rgba(16, 185, 129, 0.15) !important;
  border-color: #10b981 !important;
  color: #10b981 !important;
}
.vocab-opt-btn.wrong {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: #ef4444 !important;
  color: #ef4444 !important;
  animation: shake 0.3s;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.vocab-result-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  display: none;
}
.vocab-result-box.active {
  display: block;
}


/* ==========================================================================
   10th Wave: Absolute Apex Singularity Edition (Briefing, Planner, Hotkey HUD)
   ========================================================================== */

/* Floating Hotkey HUD Badge */
.floating-hotkey-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 30px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
}
.floating-hotkey-pill:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: #2563eb;
  color: #2563eb;
  box-shadow: 0 12px 30px rgba(37, 99, 235, 0.25);
}
body.theme-cyber .floating-hotkey-pill {
  background: rgba(15, 23, 42, 0.9);
  border-color: #243556;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

/* AI Passage Briefing Studio Styles */
.briefing-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.briefing-tab-btn {
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.briefing-tab-btn:hover {
  border-color: #8b5cf6;
  color: #8b5cf6;
}
.briefing-tab-btn.active {
  background: linear-gradient(135deg, #8b5cf6, #6d28d9);
  border-color: #8b5cf6;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}

.briefing-card-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.briefing-section-box {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px 20px;
}
.briefing-box-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.briefing-box-header.summary { color: #8b5cf6; }
.briefing-box-header.points { color: #2563eb; }
.briefing-box-header.trap { color: #ef4444; }

.briefing-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
}
body.theme-cyber .briefing-list {
  color: #cbd5e1;
}
.briefing-list li {
  position: relative;
  padding-left: 18px;
}
.briefing-list li::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: #8b5cf6;
  font-weight: bold;
}

/* Study Planner Styles */
.planner-top-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(37, 99, 235, 0.1));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.planner-progress-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.planner-percent-big {
  font-size: 2.2rem;
  font-weight: 900;
  font-family: var(--font-mono);
  color: #10b981;
}

.planner-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.planner-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  transition: all 0.2s ease;
  cursor: pointer;
}
.planner-item-row:hover {
  border-color: #10b981;
  transform: translateX(4px);
}
.planner-checkbox {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: transparent;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.planner-item-row.done .planner-checkbox {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}
.planner-item-row.done .planner-item-text {
  text-decoration: line-through;
  opacity: 0.6;
}
.planner-item-text {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}
.planner-item-tag {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}

/* Hotkey Modal Table */
.hotkey-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hotkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.hotkey-badge {
  font-size: 0.78rem;
  font-weight: 900;
  font-family: var(--font-mono);
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--border-subtle);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  box-shadow: 0 2px 0 var(--border-strong);
}
body.theme-cyber .hotkey-badge {
  background: #243556;
  border-color: #3b507d;
  box-shadow: 0 2px 0 #1c2b48;
}
.hotkey-action-desc {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}
body.theme-cyber .hotkey-action-desc {
  color: #cbd5e1;
}


/* ==========================================================================
   11th Wave: Eternal Pantheon Edition (Mood Dock, Bionic Reader, Leaderboard)
   ========================================================================== */

/* Fullscreen Ambient Mood Light Overlay */
#ambientMoodOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 800;
  transition: background-color 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
#ambientMoodOverlay.active {
  opacity: 1;
}

/* Floating Study Mood Dock */
.study-mood-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 850;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 30px;
  padding: 8px 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
}
.study-mood-dock.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
body.theme-cyber .study-mood-dock {
  background: rgba(15, 23, 42, 0.95);
  border-color: #243556;
}

.mood-preset-group {
  display: flex;
  gap: 6px;
}
.mood-preset-btn {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mood-preset-btn:hover {
  border-color: #f59e0b;
  transform: translateY(-1px);
}
.mood-preset-btn.active {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-color: #f59e0b;
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

.mood-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-dim);
}
.mood-slider {
  width: 90px;
  accent-color: #f59e0b;
  cursor: pointer;
}

/* Bionic Speed Reading Modal Styles */
.bionic-toggle-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 12px 18px;
  margin-bottom: 16px;
}
.bionic-switch-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-primary);
  cursor: pointer;
}
.bionic-pacer-ctrls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pacer-speed-chip {
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--text-muted);
  cursor: pointer;
}
.pacer-speed-chip.active {
  background: #10b981;
  border-color: #10b981;
  color: #fff;
}

.bionic-passage-box {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  max-height: 380px;
  overflow-y: auto;
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--text-primary);
  position: relative;
}
.bionic-word b {
  color: #2563eb;
  font-weight: 900;
}
body.theme-cyber .bionic-word b {
  color: #38bdf8;
}

.bionic-pacer-line {
  position: absolute;
  left: 20px;
  right: 20px;
  height: 28px;
  background: rgba(16, 185, 129, 0.18);
  border-radius: 6px;
  pointer-events: none;
  transition: top 0.2s linear;
  display: none;
  border-left: 3px solid #10b981;
}

/* Hall of Fame & Leaderboard Styles */
.podium-container {
  display: grid;
  grid-template-columns: 1fr 1.15fr 1fr;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 24px;
}
.podium-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.podium-card.rank-1 {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.12) 0%, var(--bg-surface) 100%);
  border-color: rgba(245, 158, 11, 0.4);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.2);
  transform: translateY(-8px);
}
.podium-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 8px;
  background: var(--bg-card);
  border: 2px solid var(--border-subtle);
}
.podium-card.rank-1 .podium-avatar {
  border-color: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
}
.podium-name {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.podium-school {
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.podium-xp {
  font-size: 1.1rem;
  font-weight: 900;
  font-family: var(--font-mono);
  color: #2563eb;
}
.podium-card.rank-1 .podium-xp {
  color: #f59e0b;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leaderboard-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  transition: all 0.2s ease;
}
.leaderboard-item.is-me {
  background: rgba(37, 99, 235, 0.08);
  border-color: #2563eb;
}
.leaderboard-rank-num {
  width: 28px;
  font-size: 0.95rem;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--text-muted);
}


/* ==========================================================================
   12th Wave: Supreme Transcendence Edition (Concept Map, Weakness Clinic)
   ========================================================================== */

/* Concept Map Canvas Modal */
.concept-map-canvas-wrap {
  width: 100%;
  height: 480px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.05);
}
body.theme-cyber .concept-map-canvas-wrap {
  background: #060911;
  border-color: #243556;
}

#conceptMapCanvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
#conceptMapCanvas:active {
  cursor: grabbing;
}

.map-node-tooltip {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: none;
  backdrop-filter: blur(12px);
  z-index: 10;
}
body.theme-cyber .map-node-tooltip {
  background: rgba(15, 23, 42, 0.95);
  border-color: #243556;
}

/* Weakness Radar Clinic Styles */
.clinic-alert-card {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.1));
  border: 1.5px solid rgba(239, 68, 68, 0.3);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.clinic-steps-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.clinic-step-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px 20px;
  transition: all 0.2s ease;
}
.clinic-step-card:hover {
  border-color: #2563eb;
  transform: translateY(-1px);
}
.clinic-step-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 8px;
}
.clinic-step-header .badge-step {
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 6px;
  background: #2563eb;
  color: #fff;
}


/* ==========================================================================
   13th Wave: Sovereign Genesis Edition (Mega Dropdown & Elimination Clinic)
   ========================================================================== */

/* Mega Studio Dropdown in Header */
.dh-mega-dropdown-wrapper {
  position: relative;
  display: inline-block;
}
.dh-mega-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 7px 14px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.dh-mega-dropdown-trigger:hover,
.dh-mega-dropdown-wrapper.active .dh-mega-dropdown-trigger {
  background: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}
body.theme-cyber .dh-mega-dropdown-trigger {
  background: #0f172a;
  border-color: #243556;
  color: #e2e8f0;
}
body.theme-cyber .dh-mega-dropdown-trigger:hover,
body.theme-cyber .dh-mega-dropdown-wrapper.active .dh-mega-dropdown-trigger {
  background: #3b82f6;
  border-color: #3b82f6;
  color: #ffffff;
}

.dh-mega-dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 760px;
  max-width: 95vw;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1050;
}
.dh-mega-dropdown-wrapper.active .dh-mega-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
body.theme-cyber .dh-mega-dropdown-menu {
  background: rgba(15, 23, 42, 0.95);
  border-color: #243556;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.6), 0 0 20px rgba(59, 130, 246, 0.15);
}

.mega-menu-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mega-menu-col-title {
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mega-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-main);
  font-size: 0.86rem;
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
}
.mega-menu-item:hover {
  background: var(--bg-surface);
  color: #2563eb;
  transform: translateX(3px);
}
body.theme-cyber .mega-menu-item:hover {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.mega-menu-item .item-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mega-menu-item .item-left i {
  font-size: 1rem;
}
.mega-menu-item .dh-kbd-hint {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-weight: 700;
}

/* Elimination Clinic Modal Styles */
.elimination-modal-deck {
  max-width: 1040px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}
.elimination-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.elimination-tab {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.elimination-tab:hover {
  border-color: #ef4444;
  color: #ef4444;
}
.elimination-tab.active {
  background: #ef4444;
  color: #ffffff;
  border-color: #ef4444;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.28);
}

.elimination-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(245, 158, 11, 0.08));
  border: 1.5px solid rgba(239, 68, 68, 0.25);
  border-radius: 14px;
  padding: 12px 20px;
  margin-bottom: 18px;
}
.elimination-hud-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}
.elimination-hud-stat span.val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #ef4444;
}

.elimination-grid {
  display: grid;
  grid-template-columns: 1.05fr 1.35fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .elimination-grid {
    grid-template-columns: 1fr;
  }
}

.elimination-passage-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.elimination-passage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 10px;
}
.elimination-passage-body {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--text-main);
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}
.elimination-evidence {
  background: rgba(234, 179, 8, 0.15);
  border-bottom: 2px solid #eab308;
  padding: 1px 3px;
  font-weight: 700;
  border-radius: 2px;
}
.elimination-question-stem {
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.45;
}

.elimination-choices-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.choice-item-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px 16px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.choice-item-card:hover {
  border-color: #94a3b8;
}
body.theme-cyber .choice-item-card:hover {
  border-color: #3b82f6;
}

.choice-item-card.eliminated {
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.35);
}
.choice-item-card.eliminated .choice-text {
  text-decoration: line-through;
  text-decoration-color: #ef4444;
  text-decoration-thickness: 2.5px;
  opacity: 0.6;
}
.choice-item-card.correct-selected {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.22);
}

.choice-card-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.choice-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
  color: var(--text-main);
}
.choice-item-card.eliminated .choice-num {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}
.choice-item-card.correct-selected .choice-num {
  background: #10b981;
  border-color: #10b981;
  color: #ffffff;
}

.choice-text {
  flex: 1;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-main);
  transition: all 0.2s ease;
}

.choice-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: flex-end;
}
.btn-choice-eliminate {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.btn-choice-eliminate:hover {
  background: #ef4444;
  color: #ffffff;
}
.btn-choice-select {
  padding: 5px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
  color: #10b981;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}
.btn-choice-select:hover {
  background: #10b981;
  color: #ffffff;
}

.trap-expl-card {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.08);
  border-left: 3.5px solid #ef4444;
  border-radius: 0 10px 10px 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-main);
  animation: fadeInDown 0.25s ease;
}
.trap-badge-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  background: #ef4444;
  color: #ffffff;
  margin-bottom: 4px;
}
body.theme-cyber .trap-expl-card {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

.correct-expl-card {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(16, 185, 129, 0.08);
  border-left: 3.5px solid #10b981;
  border-radius: 0 10px 10px 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-main);
  animation: fadeInDown 0.25s ease;
}
.correct-badge-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 5px;
  background: #10b981;
  color: #ffffff;
  margin-bottom: 4px;
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   14th Wave: Infinite Sovereign Absolute Edition (Grammar Drill & CBT Sync)
   ========================================================================== */

/* Grammar Drill Modal Deck */
.grammar-modal-deck {
  max-width: 960px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

.grammar-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.grammar-tab {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.grammar-tab:hover {
  border-color: #3b82f6;
  color: #3b82f6;
}
.grammar-tab.active {
  background: #3b82f6;
  color: #ffffff;
  border-color: #3b82f6;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.28);
}

.grammar-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(16, 185, 129, 0.08));
  border: 1.5px solid rgba(59, 130, 246, 0.25);
  border-radius: 14px;
  padding: 12px 20px;
  margin-bottom: 18px;
}
.grammar-hud-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}
.grammar-hud-stat span.val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #3b82f6;
}

.grammar-drill-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
  transition: all 0.25s ease;
}
.grammar-drill-q-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.5;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.grammar-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  background: #3b82f6;
  color: #ffffff;
}

.grammar-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.grammar-opt-btn {
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.grammar-opt-btn:hover {
  border-color: #3b82f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}
.grammar-opt-btn.correct {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #10b981;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
}
.grammar-opt-btn.wrong {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
  animation: grammarShake 0.3s ease;
}

@keyframes grammarShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.grammar-formula-box {
  margin-top: 14px;
  padding: 14px 18px;
  background: rgba(59, 130, 246, 0.08);
  border-left: 4px solid #3b82f6;
  border-radius: 0 12px 12px 0;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-main);
  animation: fadeInDown 0.25s ease;
}
.grammar-formula-box strong {
  color: #3b82f6;
}

/* CBT Badge in Vault */
.badge-vault-cbt {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
}


/* ==========================================================================
   15th Wave: Eternal Abyss Omni Singularity (Classical Decrypter & Grade Predictor)
   ========================================================================== */

/* Classical Decrypter Modal */
.decrypter-modal-deck {
  max-width: 1040px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

.decrypter-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.decrypter-tab {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.decrypter-tab:hover {
  border-color: #d97706;
  color: #d97706;
}
.decrypter-tab.active {
  background: #d97706;
  color: #ffffff;
  border-color: #d97706;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.28);
}

.decrypter-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
}
@media (max-width: 880px) {
  .decrypter-grid {
    grid-template-columns: 1fr;
  }
}

.archaic-passage-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px;
  font-size: 0.92rem;
  line-height: 1.85;
  color: var(--text-main);
  max-height: 480px;
  overflow-y: auto;
}

.archaic-word {
  background: rgba(217, 119, 6, 0.12);
  border-bottom: 2px dashed #d97706;
  padding: 1px 4px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.15s ease;
  display: inline-block;
}
.archaic-word:hover, .archaic-word.active {
  background: #d97706;
  color: #ffffff;
  border-bottom-style: solid;
  transform: translateY(-1px);
}

.decrypter-detail-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.decrypter-detail-header {
  border-bottom: 1.5px solid var(--border-subtle);
  padding-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.decrypter-term-huge {
  font-size: 1.4rem;
  font-weight: 900;
  color: #d97706;
}

.decrypter-info-tile {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 14px;
}
.decrypter-info-lbl {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.decrypter-info-val {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.5;
}

/* Grade Predictor Modal */
.predictor-modal-deck {
  max-width: 980px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

.target-uni-pills {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.target-uni-pill {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.target-uni-pill:hover {
  border-color: #8b5cf6;
  color: #8b5cf6;
}
.target-uni-pill.active {
  background: #8b5cf6;
  color: #ffffff;
  border-color: #8b5cf6;
  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.28);
}

.predictor-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 20px;
}
@media (max-width: 860px) {
  .predictor-grid {
    grid-template-columns: 1fr;
  }
}

.radar-canvas-box {
  width: 100%;
  height: 320px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gradeRadarCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.score-projection-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.projection-tile {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
}
.projection-val {
  font-size: 1.35rem;
  font-weight: 900;
  color: #8b5cf6;
}
.projection-lbl {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 700;
}

.prescription-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prescription-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  transition: all 0.2s ease;
}
.prescription-item:hover {
  border-color: #8b5cf6;
  transform: translateX(3px);
}


/* ==========================================================================
   16th Wave: Celestial Mythic Edition (Audio Podcast & Logic Fallacy)
   ========================================================================== */

/* Audio Podcast Modal */
.podcast-modal-deck {
  max-width: 980px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

.podcast-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.podcast-tab {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.podcast-tab:hover {
  border-color: #06b6d4;
  color: #06b6d4;
}
.podcast-tab.active {
  background: #06b6d4;
  color: #ffffff;
  border-color: #06b6d4;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.28);
}

.podcast-player-card {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(59, 130, 246, 0.08));
  border: 1.5px solid rgba(6, 182, 212, 0.25);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.podcast-visualizer-box {
  width: 100%;
  height: 90px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#podcastWaveCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.podcast-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.podcast-btn-play {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #06b6d4;
  color: #ffffff;
  border: none;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(6, 182, 212, 0.35);
  transition: all 0.2s ease;
}
.podcast-btn-play:hover {
  transform: scale(1.06);
  background: #0891b2;
}

.podcast-scrubber-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.podcast-scrubber-bar {
  width: 100%;
  height: 6px;
  background: var(--border-subtle);
  border-radius: 3px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.podcast-scrubber-fill {
  height: 100%;
  background: #06b6d4;
  border-radius: 3px;
  width: 0%;
  transition: width 0.1s linear;
}

.podcast-speed-pills {
  display: flex;
  gap: 6px;
}
.podcast-speed-pill {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
}
.podcast-speed-pill.active {
  background: #06b6d4;
  color: #ffffff;
  border-color: #06b6d4;
}

.podcast-transcript-box {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px 24px;
  max-height: 340px;
  overflow-y: auto;
  font-size: 0.94rem;
  line-height: 1.85;
  color: var(--text-main);
}
.transcript-line {
  padding: 6px 10px;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin-bottom: 4px;
}
.transcript-line.active {
  background: rgba(6, 182, 212, 0.15);
  border-left: 3.5px solid #06b6d4;
  font-weight: 800;
  color: #0891b2;
}
body.theme-cyber .transcript-line.active {
  color: #22d3ee;
}

/* Logic Fallacy Modal */
.logic-modal-deck {
  max-width: 980px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

.logic-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.logic-tab {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.logic-tab:hover {
  border-color: #f43f5e;
  color: #f43f5e;
}
.logic-tab.active {
  background: #f43f5e;
  color: #ffffff;
  border-color: #f43f5e;
  box-shadow: 0 4px 14px rgba(244, 63, 94, 0.28);
}

.logic-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.08), rgba(168, 85, 247, 0.08));
  border: 1.5px solid rgba(244, 63, 94, 0.25);
  border-radius: 14px;
  padding: 12px 20px;
  margin-bottom: 18px;
}
.logic-hud-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 700;
}
.logic-hud-stat span.val {
  font-size: 1.15rem;
  font-weight: 900;
  color: #f43f5e;
}

.logic-drill-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.logic-q-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 8px;
}
.logic-premise-box {
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-main);
}

.logic-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.logic-opt-btn {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-main);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logic-opt-btn:hover {
  border-color: #f43f5e;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.15);
}
.logic-opt-btn.correct {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  color: #10b981;
}
.logic-opt-btn.wrong {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}

.logic-diagram-box {
  margin-top: 10px;
  padding: 12px 16px;
  background: rgba(244, 63, 94, 0.08);
  border-left: 4px solid #f43f5e;
  border-radius: 0 10px 10px 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-main);
  animation: fadeInDown 0.25s ease;
}


/* ==========================================================================
   17th Wave: Creator God Omega Edition (Literary Concepts & Graphic Simulators)
   ========================================================================== */

/* Literary Concepts Modal */
.concept-dict-modal-deck {
  max-width: 1040px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

.concept-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.concept-tab {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.concept-tab:hover {
  border-color: #10b981;
  color: #10b981;
}
.concept-tab.active {
  background: #10b981;
  color: #ffffff;
  border-color: #10b981;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.28);
}

.concept-dict-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 20px;
}
@media (max-width: 880px) {
  .concept-dict-grid {
    grid-template-columns: 1fr;
  }
}

.concept-item-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding-right: 6px;
}
.concept-card-item {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.concept-card-item:hover, .concept-card-item.active {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  transform: translateX(3px);
}
.concept-card-item.active {
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.2);
}

.concept-inspect-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.concept-inspect-header {
  border-bottom: 1.5px solid var(--border-subtle);
  padding-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vs-pair-card {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(239, 68, 68, 0.08));
  border: 1.5px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-main);
}
.vs-pair-title {
  font-weight: 800;
  color: #d97706;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Graphic Data Analyzer Modal */
.graphic-modal-deck {
  max-width: 1040px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

.graphic-tab-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.graphic-tab {
  padding: 8px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  white-space: nowrap;
}
.graphic-tab:hover {
  border-color: #6366f1;
  color: #6366f1;
}
.graphic-tab.active {
  background: #6366f1;
  color: #ffffff;
  border-color: #6366f1;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.28);
}

.graphic-sim-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
}
@media (max-width: 880px) {
  .graphic-sim-grid {
    grid-template-columns: 1fr;
  }
}

.sim-canvas-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sim-canvas-box {
  width: 100%;
  height: 280px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
#simCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

.sim-controls-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sim-slider-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sim-slider-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-main);
}
.sim-slider-label span.val {
  color: #6366f1;
}
.sim-range-input {
  width: 100%;
  accent-color: #6366f1;
  cursor: pointer;
}


/* ==========================================================================
   18th Wave: Akashic Records Edition (Idiom Assemble Battle & Exam Routine)
   ========================================================================== */

/* Idiom Assemble Modal */
.idiom-modal-deck {
  max-width: 960px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

.idiom-game-hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.1), rgba(249, 115, 22, 0.1));
  border: 1.5px solid rgba(234, 179, 8, 0.3);
  border-radius: 14px;
  padding: 12px 20px;
  margin-bottom: 18px;
}
.idiom-game-hud span.val {
  font-size: 1.2rem;
  font-weight: 900;
  color: #ea580c;
}

.idiom-clue-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 18px;
  text-align: center;
}
.idiom-clue-text {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.5;
  margin-bottom: 6px;
}

.idiom-slots-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
}
.idiom-slot {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  border: 2px dashed var(--border-subtle);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  color: #ea580c;
  transition: all 0.2s ease;
}
.idiom-slot.filled {
  border-style: solid;
  border-color: #ea580c;
  background: rgba(234, 179, 8, 0.15);
  box-shadow: 0 4px 12px rgba(234, 179, 8, 0.2);
  transform: translateY(-2px);
}

.idiom-tiles-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.idiom-char-tile {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-main);
  font-size: 1.35rem;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.idiom-char-tile:hover {
  transform: translateY(-3px) scale(1.05);
  border-color: #ea580c;
  color: #ea580c;
  box-shadow: 0 6px 14px rgba(234, 179, 8, 0.25);
}
.idiom-char-tile.used {
  opacity: 0.25;
  pointer-events: none;
  transform: none;
}

.idiom-origin-box {
  background: var(--bg-card);
  border: 1.5px solid var(--border-subtle);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-main);
  display: none;
  animation: fadeInDown 0.25s ease;
}

/* Exam Routine Modal */
.routine-modal-deck {
  max-width: 980px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
}

.timeline-track-wrap {
  position: relative;
  margin: 24px 0 20px 20px;
  padding-left: 28px;
  border-left: 3px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.timeline-phase-node {
  position: relative;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px 20px;
  transition: all 0.25s ease;
  cursor: pointer;
}
.timeline-phase-node:hover, .timeline-phase-node.active {
  border-color: #2563eb;
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}
.timeline-phase-node.active {
  background: rgba(37, 99, 235, 0.05);
  border-color: #2563eb;
}

.timeline-node-pin {
  position: absolute;
  left: -43px;
  top: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 3px solid #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #2563eb;
}
.timeline-phase-node.active .timeline-node-pin {
  background: #2563eb;
  color: #ffffff;
}

.phase-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.phase-time-badge {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: #2563eb;
  color: #ffffff;
}
.phase-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
}
.phase-desc {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.phase-emergency-tip {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.06);
  border-left: 3.5px solid #ef4444;
  border-radius: 0 8px 8px 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #ef4444;
}


/* ========================================================
   19th WAVE: METAVERSE ARCADE SINGULARITY STYLES
   ======================================================== */
/* Logic Counterattack Modal (Q) */
#logicCounterattackModal .modal-container {
    max-width: 900px;
    background: linear-gradient(135deg, #090d16 0%, #111a2e 50%, #0c1220 100%);
    border: 1px solid rgba(239, 68, 68, 0.4);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(239, 68, 68, 0.2);
    border-radius: 20px;
    color: #f1f5f9;
}
.counterattack-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(239, 68, 68, 0.25);
    padding-bottom: 14px;
    margin-bottom: 18px;
}
.counterattack-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.counterattack-tab {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.counterattack-tab.active {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(185, 28, 28, 0.4));
    border-color: #ef4444;
    color: #fecaca;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.35);
}
.syllogism-board {
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 14px;
    padding: 16px 20px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
}
.syllogism-board::before {
    content: "ARGUMENT UNDER ATTACK";
    position: absolute;
    top: 8px;
    right: 14px;
    font-size: 10px;
    font-weight: 800;
    color: rgba(239, 68, 68, 0.5);
    letter-spacing: 1.5px;
}
.syllogism-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
}
.syllogism-row:last-child {
    margin-bottom: 0;
    border-top: 1px dashed rgba(239, 68, 68, 0.3);
    padding-top: 10px;
}
.syllogism-tag {
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.5px;
}
.syllogism-tag.major { background: rgba(59, 130, 246, 0.2); color: #93c5fd; border: 1px solid rgba(59, 130, 246, 0.4); }
.syllogism-tag.minor { background: rgba(168, 85, 247, 0.2); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.4); }
.syllogism-tag.conclusion { background: rgba(239, 68, 68, 0.2); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }

.counterattack-deck {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.attack-weapon-card {
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}
.attack-weapon-card:hover {
    border-color: #f87171;
    background: rgba(239, 68, 68, 0.12);
    transform: translateX(4px);
}
.attack-weapon-card.correct {
    border-color: #22c55e !important;
    background: rgba(34, 197, 94, 0.18) !important;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.35);
}
.attack-weapon-card.incorrect {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.18) !important;
    opacity: 0.6;
}
.weapon-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    flex-shrink: 0;
}
.weapon-content {
    flex: 1;
}
.weapon-title {
    font-size: 14px;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 4px;
}
.weapon-desc {
    font-size: 12.5px;
    color: #cbd5e1;
    line-height: 1.45;
}

.counterattack-result-panel {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.5;
    display: none;
}
.counterattack-result-panel.visible {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Poetic Emotion Spectrum Modal (R) */
#poeticEmotionSpectrumModal .modal-container {
    max-width: 950px;
    background: linear-gradient(135deg, #0d131f 0%, #161e31 50%, #0d121c 100%);
    border: 1px solid rgba(14, 165, 233, 0.4);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(14, 165, 233, 0.2);
    border-radius: 20px;
    color: #f8fafc;
}
.spectrum-poem-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
}
.spectrum-poem-tab {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #94a3b8;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.spectrum-poem-tab.active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35), rgba(2, 132, 199, 0.45));
    border-color: #0ea5e9;
    color: #bae6fd;
    box-shadow: 0 0 16px rgba(14, 165, 233, 0.35);
}
.spectrum-workspace {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 18px;
}
@media (max-width: 820px) {
    .spectrum-workspace {
        grid-template-columns: 1fr;
    }
}
.spectrum-canvas-wrap {
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 14px;
    padding: 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.spectrum-canvas-legend {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #64748b;
    margin-top: 6px;
    font-weight: 600;
}
.spectrum-flow-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 420px;
    overflow-y: auto;
    padding-right: 4px;
}
.spectrum-flow-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}
.spectrum-flow-card:hover {
    background: rgba(14, 165, 233, 0.15);
    border-color: #38bdf8;
}
.spectrum-flow-card.active {
    background: rgba(14, 165, 233, 0.25);
    border-color: #0ea5e9;
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.3);
}
.spectrum-flow-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    font-weight: 700;
    color: #38bdf8;
    font-size: 12px;
}
.spectrum-flow-quote {
    color: #f1f5f9;
    font-style: italic;
    margin-bottom: 4px;
    line-height: 1.4;
}
.spectrum-flow-state {
    font-size: 11.5px;
    color: #94a3b8;
}
.spectrum-insight-box {
    margin-top: 14px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(14, 165, 233, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: #e2e8f0;
}


/* ==========================================================================
   초격차 클린 탭 스튜디오 (Clean Master Tabs & Workspace Styles)
   ========================================================================== */

/* 1. Master Tabs Bar in Header */
.dh-master-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    padding: 4px 6px;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.theme-cyber .dh-master-tabs {
    background: rgba(21, 34, 56, 0.85);
    border-color: #243556;
}

.master-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
    position: relative;
    user-select: none;
}
.master-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(37, 99, 235, 0.08);
}
body.theme-cyber .master-tab-btn:hover {
    color: #f8fafc;
    background: rgba(56, 189, 248, 0.12);
}

.master-tab-btn.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #ffffff !important;
    border-color: #1e40af;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.32);
}
body.theme-cyber .master-tab-btn.active {
    background: linear-gradient(135deg, #0284c7, #2563eb);
    color: #ffffff !important;
    border-color: #38bdf8;
    box-shadow: 0 4px 16px rgba(56, 189, 248, 0.35);
}

.master-tab-btn i {
    font-size: 1.02rem;
}

.tab-chip-pill {
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 10px;
    background: #ef4444;
    color: #ffffff;
    line-height: 1;
    margin-left: 2px;
}

/* Quick CBT button in right cluster */
.dh-util-cbt {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 12px !important;
    border-radius: 18px !important;
    background: rgba(245, 158, 11, 0.1) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #d97706 !important;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 800;
    transition: all 0.2s ease;
}
.dh-util-cbt:hover {
    background: rgba(245, 158, 11, 0.2) !important;
    transform: translateY(-1px);
}
body.theme-cyber .dh-util-cbt {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
}

/* 2. Master Tab Panes */
.master-tab-pane {
    display: none;
    animation: fadeInTab 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.master-tab-pane.active {
    display: block;
}
@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. Tab Pane Introductions */
.tab-pane-intro {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}
body.theme-cyber .tab-pane-intro {
    background: rgba(21, 34, 56, 0.6);
    border-color: #243556;
}
.intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.76rem;
    font-weight: 800;
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    border: 1px solid rgba(37, 99, 235, 0.2);
    margin-bottom: 8px;
}
.intro-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}
.intro-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* 4. Clinic Categories & Cards */
.clinic-category-block {
    margin-bottom: 28px;
}
.clinic-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.cat-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cat-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.cat-blue { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.cat-red { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.cat-green { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.cat-title {
    font-size: 1.08rem;
    font-weight: 900;
    color: var(--text-primary);
    margin: 0;
}
.cat-subtitle {
    font-size: 0.78rem;
    color: var(--text-dim);
}

.clinic-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.clinic-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}
body.theme-cyber .clinic-card {
    background: #152238;
    border-color: #243556;
}
.clinic-card:hover {
    transform: translateY(-2px);
    border-color: #3b82f6;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.1);
}
.clinic-card.highlight-card {
    border-color: rgba(16, 185, 129, 0.4);
    background: linear-gradient(180deg, var(--bg-surface) 0%, rgba(16, 185, 129, 0.04) 100%);
}
body.theme-cyber .clinic-card.highlight-card {
    border-color: rgba(16, 185, 129, 0.4);
    background: linear-gradient(180deg, #152238 0%, rgba(16, 185, 129, 0.08) 100%);
}

.clinic-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.clinic-badge {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 8px;
}
.badge-blue { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.badge-red { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.badge-green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.badge-amber { background: rgba(245, 158, 11, 0.1); color: #d97706; }
.badge-purple { background: rgba(168, 85, 247, 0.1); color: #9333ea; }
.badge-cyan { background: rgba(6, 182, 212, 0.1); color: #0891b2; }

.clinic-key-hint {
    font-size: 0.68rem;
    font-family: var(--font-mono);
    color: var(--text-dim);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
}

.clinic-card-main {
    margin-bottom: 16px;
}
.clinic-icon-box {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 10px;
}
.box-blue { background: rgba(37, 99, 235, 0.12); color: #2563eb; }
.box-red { background: rgba(239, 68, 68, 0.12); color: #ef4444; }
.box-green { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.box-amber { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.box-purple { background: rgba(168, 85, 247, 0.12); color: #9333ea; }
.box-cyan { background: rgba(6, 182, 212, 0.12); color: #0891b2; }

.clinic-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}
.clinic-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    min-height: 38px;
}

.clinic-launch-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 0.84rem;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}
.clinic-launch-btn:hover {
    transform: translateY(-1px);
}

.btn-blue {
    background: rgba(37, 99, 235, 0.1);
    color: #2563eb;
    border-color: rgba(37, 99, 235, 0.2);
}
.btn-blue:hover {
    background: #2563eb;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-red {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}
.btn-red:hover {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.btn-green {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.2);
}
.btn-green:hover {
    background: #10b981;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-amber {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.2);
}
.btn-amber:hover {
    background: #f59e0b;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn-purple {
    background: rgba(168, 85, 247, 0.1);
    color: #9333ea;
    border-color: rgba(168, 85, 247, 0.2);
}
.btn-purple:hover {
    background: #9333ea;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.3);
}

.btn-cyan {
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
    border-color: rgba(6, 182, 212, 0.2);
}
.btn-cyan:hover {
    background: #0891b2;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

/* 5. Responsive Nav Adjustments */
@media (max-width: 1024px) {
    .dh-master-tabs {
        order: 3;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        padding: 4px 8px;
    }
    .master-tab-btn {
        padding: 7px 12px;
        font-size: 0.82rem;
    }
}


/* ==========================================================================
   초격차 클린 탭 헤더 & 툴바 고도화 (Clean Unified Navigation & Tabbed Toolbar)
   ========================================================================== */

/* 1. HIDE REDUNDANT GLOBAL NAV ON EBOOK PAGE */
.snav-header {
    display: none !important;
}

/* 2. SLIM UNIFIED HEADER */
.dh-header-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    backdrop-filter: blur(16px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    padding: 8px 20px;
}
body.theme-cyber .dh-header-nav {
    background: rgba(15, 23, 42, 0.95);
    border-color: #243556;
}

.dh-header-container {
    max-width: 1560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap !important;
}

/* Left Cluster */
.dh-brand-cluster {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.dh-home-return-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb !important;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 800;
    transition: all 0.2s ease;
    border: 1px solid rgba(37, 99, 235, 0.18);
    white-space: nowrap;
}
.dh-home-return-btn:hover {
    background: #2563eb;
    color: #ffffff !important;
}
body.theme-cyber .dh-home-return-btn {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8 !important;
    border-color: rgba(56, 189, 248, 0.3);
}
body.theme-cyber .dh-home-return-btn:hover {
    background: #0284c7;
    color: #ffffff !important;
}

.dh-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 1rem;
}
.dh-brand-title {
    font-size: 1.05rem;
    font-weight: 900;
}
.dh-brand-sub {
    font-size: 0.65rem;
}
.dh-student-pill {
    padding: 4px 10px;
    font-size: 0.76rem;
}
.dh-tier-hud-btn {
    padding: 4px 8px;
    font-size: 0.74rem;
}

/* Master Tabs Bar */
.dh-master-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    padding: 3px 5px;
    border-radius: 24px;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}
.dh-master-tabs::-webkit-scrollbar { display: none; }

.master-tab-btn {
    padding: 6px 14px;
    font-size: 0.84rem;
    gap: 6px;
    border-radius: 18px;
}
.master-tab-btn i {
    font-size: 0.95rem;
}

/* Right Cluster */
.dh-util-cluster {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.dh-util-btn {
    width: 34px;
    height: 34px;
    font-size: 0.9rem;
    border-radius: 10px;
}
.dh-util-cbt {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
    height: 34px;
}

/* 3. CLEAN SHELF CONTROL DECK */
.clean-shelf-control-deck {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 14px 18px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}
body.theme-cyber .clean-shelf-control-deck {
    background: rgba(21, 34, 56, 0.7);
    border-color: #243556;
}

/* Row 1: Segmented Grade Tabs Bar */
.shelf-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 12px;
}
.shelf-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
}
.shelf-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
    padding: 6px 14px;
    font-size: 0.82rem;
    border-radius: 20px;
    font-weight: 800;
}
.tab-btn.active {
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.3);
}

.view-ctrls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.view-toggle-group {
    display: flex;
    align-items: center;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 2px;
}
.view-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    font-size: 0.9rem;
}
.view-btn.active {
    background: var(--bg-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Row 2: Streamlined Single-Line Toolbar */
.shelf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.toolbar-search-col {
    flex: 1.2;
    min-width: 260px;
}
.shelf-search-wrap {
    width: 100%;
}
.shelf-search-input {
    padding: 8px 36px 8px 34px;
    font-size: 0.86rem;
    height: 38px;
}
.shelf-search-wrap i.search-icon {
    left: 12px;
    font-size: 0.88rem;
}

.toolbar-filter-col {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.filter-select {
    padding: 7px 12px;
    font-size: 0.82rem;
    height: 38px;
    border-radius: 10px;
}
.filter-status-row {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-main);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 3px;
}
.status-pill-btn {
    padding: 4px 10px;
    font-size: 0.78rem;
    border: none;
    background: transparent;
    border-radius: 7px;
    font-weight: 700;
}
.status-pill-btn.active {
    background: var(--bg-surface);
    color: #2563eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
body.theme-cyber .status-pill-btn.active {
    background: #1e293b;
    color: #38bdf8;
}

.btn-filter-reset {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-main);
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-filter-reset:hover {
    color: #ef4444;
    border-color: #ef4444;
}

/* Row 3: Tags Strip */
.search-quick-tags-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-subtle);
}
.tags-strip-label {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--text-dim);
    white-space: nowrap;
}
.tags-strip-track {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    flex: 1;
}
.tags-strip-track::-webkit-scrollbar { display: none; }
.quick-tag-chip {
    padding: 3px 9px;
    font-size: 0.74rem;
    border-radius: 6px;
}
.filter-count-badge {
    font-size: 0.75rem;
    color: var(--text-dim);
    white-space: nowrap;
}

/* 4. SERVICES HUB GRID STYLES */
.services-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.service-category-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}
body.theme-cyber .service-category-card {
    background: #152238;
    border-color: #243556;
}
.svc-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}
.svc-cat-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: rgba(37, 99, 235, 0.12);
    color: #2563eb;
}
.svc-cat-title {
    font-size: 1rem;
    font-weight: 900;
    margin: 0;
    color: var(--text-primary);
}
.svc-cat-desc {
    font-size: 0.74rem;
    color: var(--text-dim);
}
.svc-links-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.svc-link-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 700;
    transition: all 0.18s ease;
}
.svc-link-item:hover {
    background: rgba(37, 99, 235, 0.06);
    color: #2563eb;
    transform: translateX(3px);
}
body.theme-cyber .svc-link-item:hover {
    background: rgba(56, 189, 248, 0.1);
    color: #38bdf8;
}
.svc-link-item .arrow-icon {
    margin-left: auto;
    font-size: 0.72rem;
    opacity: 0.5;
}
.svc-link-item.highlight-link {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #d97706;
}
.badge-hot {
    margin-left: auto;
    font-size: 0.65rem;
    font-weight: 900;
    padding: 2px 6px;
    border-radius: 6px;
    background: #ef4444;
    color: #ffffff;
}

/* Mobile responsive */
@media (max-width: 900px) {
    .dh-header-container {
        flex-wrap: wrap !important;
    }
    .dh-master-tabs {
        order: 3;
        width: 100%;
        margin-top: 6px;
    }
    .shelf-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .toolbar-filter-col {
        flex-wrap: wrap;
    }
}