/* Page-specific styles extracted from japanese-tutor.html. */

.mode-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 12px;
        }

        .mode-card {
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 18px;
            display: flex;
            gap: 14px;
            align-items: flex-start;
        }

        .mode-emoji {
            font-size: 20px;
            flex-shrink: 0;
            margin-top: 1px;
        }

        .mode-body {}

        .mode-title {
            font-family: var(--font-head);
            font-size: 10px;
            letter-spacing: 1.5px;
            color: var(--white);
            text-transform: uppercase;
            margin-bottom: 5px;
        }

        .mode-desc {
            font-size: 12px;
            color: var(--text-muted);
            line-height: 1.6;
        }

        .mode-link {
            display: inline-block;
            margin-top: 9px;
            color: var(--cyan);
            font-family: var(--font-head);
            font-size: 8px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .mode-link:hover { color: var(--pink); }

        .lessons-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 12px;
        }

        .lessons-table th {
            font-family: var(--font-head);
            font-size: 9px;
            letter-spacing: 1px;
            color: var(--text-muted);
            text-transform: uppercase;
            padding: 8px 14px;
            border-bottom: 1px solid var(--border);
            text-align: left;
        }

        .lessons-table td {
            padding: 7px 14px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            color: var(--text-muted);
        }

        .lessons-table tr:last-child td { border-bottom: none; }

        .lessons-table .lesson-num {
            color: var(--purple);
            font-family: var(--font-head);
            font-size: 10px;
            width: 36px;
        }

        .lessons-table .lesson-name {
            color: var(--text-main);
        }

        .gate-row {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .gate-item {
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 14px 18px;
        }

        .gate-icon {
            font-size: 18px;
            flex-shrink: 0;
        }

        .gate-text {
            flex: 1;
            font-size: 12px;
            color: var(--text-muted);
        }

        .gate-text strong {
            color: var(--white);
            font-weight: normal;
        }

        .gate-arrow {
            font-size: 11px;
            color: var(--purple);
            flex-shrink: 0;
        }

        .srs-ladder {
            display: flex;
            gap: 0;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }

        .srs-step {
            flex: 1;
            padding: 14px 10px;
            text-align: center;
            border-right: 1px solid var(--border);
        }

        .srs-step:last-child { border-right: none; }

        .srs-label {
            font-family: var(--font-head);
            font-size: 9px;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-bottom: 6px;
        }

        .srs-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin: 0 auto 6px;
        }

        .srs-req {
            font-size: 10px;
            color: var(--text-muted);
            line-height: 1.4;
        }

        .srs-step.unseen  { background: rgba(255,255,255,0.02); }
        .srs-step.intro   { background: rgba(100,150,255,0.06); }
        .srs-step.learning{ background: rgba(255,200,50,0.06);  }
        .srs-step.known   { background: rgba(50,200,100,0.06);  }
        .srs-step.mastered{ background: rgba(200,150,255,0.08); }

        .srs-step.unseen   .srs-label { color: #555; }
        .srs-step.intro    .srs-label { color: #6496ff; }
        .srs-step.learning .srs-label { color: #ffc832; }
        .srs-step.known    .srs-label { color: #32c864; }
        .srs-step.mastered .srs-label { color: var(--purple); }

        .srs-step.unseen   .srs-dot { background: #555; }
        .srs-step.intro    .srs-dot { background: #6496ff; }
        .srs-step.learning .srs-dot { background: #ffc832; }
        .srs-step.known    .srs-dot { background: #32c864; }
        .srs-step.mastered .srs-dot { background: var(--purple); }

        .pipeline-block {
            background: #08080d;
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }

        .pipeline-label {
            font-family: var(--font-head);
            font-size: 9px;
            letter-spacing: 2px;
            color: var(--text-muted);
            padding: 10px 16px;
            border-bottom: 1px solid var(--border);
            background: #0D0D12;
        }

        .pipeline-body {
            font-family: monospace;
            font-size: 11px;
            color: var(--text-muted);
            line-height: 2;
            padding: 18px 22px;
        }

        .pipeline-body .hl  { color: var(--cyan); }
        .pipeline-body .hlp { color: var(--purple); }
        .pipeline-body .hlg { color: #00ff88; }

        .db-group {
            margin-bottom: 20px;
        }

        .db-group-title {
            font-family: var(--font-head);
            font-size: 9px;
            letter-spacing: 1.5px;
            color: var(--text-muted);
            text-transform: uppercase;
            margin-bottom: 8px;
            padding-left: 2px;
        }

        .db-table-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 1px;
            background: var(--border);
            border: 1px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }

        .db-row {
            background: var(--bg-card);
            padding: 10px 14px;
            display: flex;
            gap: 12px;
        }

        .db-name {
            font-family: monospace;
            font-size: 11px;
            color: var(--cyan);
            min-width: 160px;
            flex-shrink: 0;
        }

        .db-desc {
            font-size: 11px;
            color: var(--text-muted);
        }