* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* --- PERBAIKAN UTAMA KALENDER RESPONSIF --- */
.calendar-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px; /* Dikurangi sedikit agar pas di layar HP kecil */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Mencegah konten keluar dari card */
}

.weekdays-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 8px;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px; /* Jarak antar kotak diperkecil agar muat di HP */
    width: 100%;
    min-width: 0; /* Mencegah grid keluar dari kontainer fleksibel */
}

.day-cell {
    aspect-ratio: 1; /* Menjaga kotak tetap persegi */
    background: #fafaf9;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2px;
    box-sizing: border-box;
    min-width: 0; /* Mencegah teks/elemen di dalam sel meluber */
}

.day-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
}

.day-time {
    font-size: 0.65rem;
    color: #64748b;
    margin-top: 1px;
}
body {
    font-family: Arial, sans-serif;
    background-color: #f4f7f6;
    margin: 0;
    padding: 20px;
}

.tab-navigation {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.study-hub-card {
    background: #ffffff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.app-container {
    width: 100%;
    max-width: 700px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.calendar-icon {
    font-size: 1.5rem;
}

.quiz-link-btn {
    background: #e2e8f0;
    color: #334155;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.quiz-link-btn:hover {
    background: #cbd5e1;
}

/* Calendar Card */
.calendar-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.stats-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    justify-content: center;
}

.stat-badge {
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.stat-badge.jlpt {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.month-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.month-nav h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

.nav-arrow {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #64748b;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.2s;
}

.nav-arrow:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.calendar-subtitle {
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 20px;
}

.weekdays-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 10px;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.day-cell {
    aspect-ratio: 1;
    background: #fafaf9;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 4px;
}

.day-cell:hover {
    border-color: #94a3b8;
    transform: translateY(-1px);
}

.day-cell.empty {
    background: transparent;
    border: none;
    cursor: default;
}

.day-cell.empty:hover {
    transform: none;
}

.day-number {
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
}

.day-time {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
}

/* Intensity Colors matching screenshot */
.day-cell.level-0 {
    background: #fcfbf9;
    border-color: #f1efe9;
}
.day-cell.level-0 .day-time {
    color: #cbd5e1;
}

.day-cell.level-1 {
    background: #dbeafe;
    border-color: #bfdbfe;
}
.day-cell.level-1 .day-number, .day-cell.level-1 .day-time {
    color: #1e40af;
}

.day-cell.level-2 {
    background: #93c5fd;
    border-color: #60a5fa;
}
.day-cell.level-2 .day-number, .day-cell.level-2 .day-time {
    color: #1e3a8a;
}

.day-cell.level-3 {
    background: #60a5fa;
    border-color: #3b82f6;
}
.day-cell.level-3 .day-number, .day-cell.level-3 .day-time {
    color: #ffffff;
}

.day-cell.level-4 {
    background: #3b82f6;
    border-color: #2563eb;
}
.day-cell.level-4 .day-number, .day-cell.level-4 .day-time {
    color: #ffffff;
}

.day-cell.today {
    border: 2px solid #0f172a;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1);
}

/* Legend */
.calendar-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 0.8rem;
    color: #64748b;
}

.legend-boxes {
    display: flex;
    gap: 4px;
}

.legend-box {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.legend-box.level-0 { background: #fcfbf9; border: 1px solid #e2e8f0; }
.legend-box.level-1 { background: #dbeafe; }
.legend-box.level-2 { background: #93c5fd; }
.legend-box.level-3 { background: #60a5fa; }
.legend-box.level-4 { background: #3b82f6; }

/* Session Menu Card */
.session-menu-card, .learning-card, .completion-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.session-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.session-header h3 {
    font-size: 1.2rem;
    color: #1e293b;
}

.back-calendar-btn {
    background: #f1f5f9;
    border: none;
    color: #475569;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.2s;
}

.back-calendar-btn:hover {
    background: #e2e8f0;
}

.session-buttons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.session-btn {
    padding: 16px 20px;
    font-size: 1rem;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    text-align: left;
}

.session-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.session-title {
    font-weight: 700;
    color: #1e293b;
}

.session-desc {
    font-size: 0.8rem;
    color: #64748b;
}

.status-badge {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
}

.session-btn.completed {
    background: #f0fdf4;
    border-color: #86efac;
}
.session-btn.completed .status-badge {
    background: #dcfce7;
    color: #166534;
}

.session-btn.locked {
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.7;
    cursor: not-allowed;
}

/* Learning Area */
.learning-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.info-bar {
    display: flex;
    gap: 15px;
    font-weight: 600;
    color: #475569;
    font-size: 0.9rem;
}

.flashcard-container {
    perspective: 1000px;
    width: 100%;
    height: 260px;
    margin-bottom: 12px;
}

.flashcard {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
    cursor: pointer;
}

.flashcard.flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    border: 2px solid #e2e8f0;
}

.card-front {
    background: #ffffff;
    color: #0f172a;
}

.card-back {
    background: #f8fafc;
    color: #1e293b;
    transform: rotateY(180deg);
}

.card-hint {
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 20px;
}

.rating-buttons {
    display: flex;
    gap: 10px;
}

.rating-buttons button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    font-size: 0.95rem;
    transition: opacity 0.2s;
}

.rating-buttons button:hover {
    opacity: 0.9;
}

.btn-hard { background: #ef4444; }
.btn-medium { background: #f59e0b; }
.btn-easy { background: #10b981; }

/* Completion */
.completion-card {
    text-align: center;
    padding: 20px;
}

.completion-card h2 {
    color: #166534;
    margin-bottom: 10px;
}

.completion-card p {
    color: #475569;
    margin-bottom: 20px;
    line-height: 1.5;
}

.restart-btn {
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
}
.restart-btn:hover {
    background: #1d4ed8;
}
/* --- TAB NAVIGATION STYLING --- */
.tab-navigation {
    display: flex;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 20px;
    gap: 4px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.95rem;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* --- STUDY HUB CARD (TAB BELAJAR) --- */
.study-hub-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.study-hub-header {
    margin-bottom: 20px;
}

.study-hub-header h2 {
    font-size: 1.25rem;
    color: #1e293b;
    margin-bottom: 6px;
}

.study-hub-header p {
    font-size: 0.9rem;
    color: #64748b;
}

.study-selection-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.study-select {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 1rem;
    background: #f8fafc;
    color: #1e293b;
}

.action-btn-primary {
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.action-btn-primary:hover {
    background: #1d4ed8;
}
/* --- TAB NAVIGATION STYLING --- */
.tab-navigation {
    display: flex;
    background: #e2e8f0;
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 20px;
    gap: 4px;
}

.tab-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.95rem;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* --- STUDY HUB CARD (TAB BELAJAR) --- */
.study-hub-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.study-hub-header {
    margin-bottom: 20px;
}

.study-hub-header h2 {
    font-size: 1.25rem;
    color: #1e293b;
    margin-bottom: 6px;
}

.study-hub-header p {
    font-size: 0.9rem;
    color: #64748b;
}

.study-selection-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.study-select {
    padding: 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    font-size: 1rem;
    background: #f8fafc;
    color: #1e293b;
}

.action-btn-primary {
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px;
    border-radius: 10px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}

.action-btn-primary:hover {
    background: #1d4ed8;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: #f8fafc;
    color: #1e293b;
    padding: 20px;
    display: flex;
    justify-content: center;
    min-height: 100vh;
}

.app-container {
    width: 100%;
    max-width: 700px;
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.header-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-title h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
}

.calendar-icon {
    font-size: 1.5rem;
}

.quiz-link-btn {
    background: #e2e8f0;
    color: #334155;
    padding: 8px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.quiz-link-btn:hover {
    background: #cbd5e1;
}

/* Calendar Card (Non-klik / View Only) */
.calendar-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.stats-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    justify-content: center;
}

.stat-badge {
    background: #f1f5f9;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.stat-badge.jlpt {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.month-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.month-nav h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
}

.nav-arrow {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #64748b;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background 0.2s;
}

.nav-arrow:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.calendar-subtitle {
    text-align: center;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 20px;
}

.weekdays-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 10px;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.day-cell {
    aspect-ratio: 1;
    background: #fafaf9;
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: default; /* Membuat sel kalender tidak bisa diklik */
    padding: 4px;
}

.day-cell.empty {
    background: transparent;
    border: none;
}

.day-number {
    font-size: 0.95rem;
    font-weight: 600;
    color: #334155;
}

.day-time {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 2px;
}

/* Intensity Colors */
.day-cell.level-0 { background: #fcfbf9; border-color: #f1efe9; }
.day-cell.level-0 .day-time { color: #cbd5e1; }
.day-cell.level-1 { background: #dbeafe; border-color: #bfdbfe; }
.day-cell.level-1 .day-number, .day-cell.level-1 .day-time { color: #1e40af; }
.day-cell.level-2 { background: #93c5fd; border-color: #60a5fa; }
.day-cell.level-2 .day-number, .day-cell.level-2 .day-time { color: #1e3a8a; }
.day-cell.level-3 { background: #60a5fa; border-color: #3b82f6; }
.day-cell.level-3 .day-number, .day-cell.level-3 .day-time { color: #ffffff; }
.day-cell.level-4 { background: #3b82f6; border-color: #2563eb; }
.day-cell.level-4 .day-number, .day-cell.level-4 .day-time { color: #ffffff; }

.day-cell.today {
    border: 2px solid #0f172a;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.1);
}

/* Legend */
.calendar-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 0.8rem;
    color: #64748b;
}

.legend-boxes {
    display: flex;
    gap: 4px;
}

.legend-box {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.legend-box.level-0 { background: #fcfbf9; border: 1px solid #e2e8f0; }
.legend-box.level-1 { background: #dbeafe; }
.legend-box.level-2 { background: #93c5fd; }
.legend-box.level-3 { background: #60a5fa; }
.legend-box.level-4 { background: #3b82f6; }

/* Session Menu Card & Learning */
.session-menu-card, .learning-card, .completion-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.session-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.session-header h3 {
    font-size: 1.2rem;
    color: #1e293b;
}

.back-calendar-btn {
    background: #f1f5f9;
    border: none;
    color: #475569;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    align-self: flex-start;
    transition: background 0.2s;
}

.back-calendar-btn:hover {
    background: #e2e8f0;
}

.session-buttons-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.session-btn {
    padding: 16px 20px;
    font-size: 1rem;
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
    text-align: left;
}

.session-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.session-title {
    font-weight: 700;
    color: #1e293b;
}

.session-desc {
    font-size: 0.8rem;
    color: #64748b;
}

.status-badge {
    font-weight: 600;
    font-size: 0.9rem;
    padding: 6px 12px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
}

.session-btn.completed {
    background: #f0fdf4;
    border-color: #86efac;
}
.session-btn.completed .status-badge {
    background: #dcfce7;
    color: #166534;
}

.session-btn.locked {
    background: #f8fafc;
    border-color: #e2e8f0;
    opacity: 0.7;
    cursor: not-allowed;
}

/* Learning Area */
.learning-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.info-bar {
    display: flex;
    gap: 15px;
    font-weight: 600;
    color: #475569;
    font-size: 0.9rem;
}

.flashcard-container {
    perspective: 1000px;
    width: 100%;
    height: 260px;
    margin-bottom: 12px;
}

.flashcard {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.4s ease;
    cursor: pointer;
}

.flashcard.flipped {
    transform: rotateY(180deg);
}

.card-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    font-size: 1.8rem;
    font-weight: bold;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    border: 2px solid #e2e8f0;
}

.card-front {
    background: #ffffff;
    color: #0f172a;
}

.card-back {
    background: #f8fafc;
    color: #1e293b;
    transform: rotateY(180deg);
}

.card-hint {
    text-align: center;
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 20px;
}

.rating-buttons {
    display: flex;
    gap: 10px;
}

.rating-buttons button {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    font-size: 0.95rem;
    transition: opacity 0.2s;
}

.rating-buttons button:hover {
    opacity: 0.9;
}

.btn-hard { background: #ef4444; }
.btn-medium { background: #f59e0b; }
.btn-easy { background: #10b981; }

/* Completion */
.completion-card {
    text-align: center;
    padding: 20px;
}

.completion-card h2 {
    color: #166534;
    margin-bottom: 10px;
}

.completion-card p {
    color: #475569;
    margin-bottom: 20px;
    line-height: 1.5;
}

.restart-btn {
    background: #2563eb;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: bold;
    cursor: pointer;
    font-size: 1rem;
}
.restart-btn:hover {
    background: #1d4ed8;
}
/* --- QUIZ OPTIONS STYLING --- */
.quiz-option-btn {
    width: 100%;
    padding: 14px 20px;
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.quiz-option-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.quiz-option-btn.correct {
    background: #f0fdf4 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

.quiz-option-btn.wrong {
    background: #fef2f2 !important;
    border-color: #fca5a5 !important;
    color: #991b1b !important;
}
/* --- TARGET BADGE STYLING --- */
.stat-badge.target-badge {
    background: #fdf4ff;
    color: #a21caf;
    border-color: #f5d0fe;
}
/* --- DAFTAR KOSAKATA DI MENU SESI --- */
/* --- PREVIEW & DAFTAR KOSAKATA --- */
.vocab-list-scroll {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px;
}

.vocab-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
}

.vocab-number {
    color: #94a3b8;
    font-weight: 600;
    min-width: 20px;
}

.vocab-front {
    font-weight: 700;
    color: #0f172a;
    min-width: 80px;
}

.vocab-back {
    color: #475569;
    flex: 1;
    text-align: right;
}
/* Mengatur box-sizing agar padding tidak merusak lebar elemen */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f9;
    color: #333;
    padding: 10px; /* Kasih padding kecil di HP biar nggak mepet pinggir */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Container utama fleksibel */
.container, .quiz-card, #quizArea, #quizSelectionCard {
    width: 100%;
    max-width: 600px; /* Batasi lebar maksimal di laptop */
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Tombol pilihan ganda jadi memanjang penuh ke bawah di HP */
.quiz-option-btn {
    width: 100%;
    padding: 14px;
    margin: 8px 0;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}

/* --- MEDIA QUERY KHUSUS HP (Layar di bawah 600px) --- */
@media (max-width: 600px) {
    body {
        padding: 5px;
    }
    
    .container, .quiz-card, #quizArea {
        padding: 15px;
        border-radius: 8px;
    }

    h1 {
        font-size: 1.5rem; /* Ukuran judul disesuaikan di HP */
    }

    .quiz-option-btn {
        font-size: 14px; /* Ukuran teks tombol sedikit diperkecil */
        padding: 12px;
    }
}

/* ===== Kartu belakang: kosakata besar, contoh kalimat lebih kecil ===== */
.card-back { padding: 18px 20px; }
.card-back .back-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}
.card-back .back-word {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.25;
}
.card-back .back-example {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
    width: 100%;
}
.card-back .back-example-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 4px;
}
.card-back .back-example-jp {
    font-size: 1.05rem;
    font-weight: 500;
    color: #0f172a;
}
.card-back .back-example-id {
    font-size: 0.92rem;
    font-weight: 400;
    color: #64748b;
    margin-top: 2px;
}
/* Kalau layar kecil, kecilkan lagi biar nggak penuh */
@media (max-width: 420px) {
    .card-back .back-word { font-size: 1.5rem; }
    .card-back .back-example-jp { font-size: 0.98rem; }
    .card-back .back-example-id { font-size: 0.86rem; }
}

/* ===== TAB BUNPOU: KUMPULAN TATA BAHASA ===== */
.tab-content { padding-bottom: 30px; }

.bunpou-header-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    border: 1px solid #eef2f7;
    margin-bottom: 14px;
}
.bunpou-header-card h2 { margin: 0 0 4px; font-size: 1.15rem; color: #0f172a; }
.bunpou-subtitle { margin: 0 0 14px; font-size: 0.85rem; color: #64748b; }

.bunpou-search {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #f8fafc;
    color: #1e293b;
    outline: none;
}
.bunpou-search:focus { border-color: #6366f1; background: #ffffff; }

.bunpou-day-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 12px 2px 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.bunpou-day-chips::-webkit-scrollbar { display: none; }

.bunpou-chip {
    flex: 0 0 auto;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    color: #475569;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.bunpou-chip.active { background: #4f46e5; border-color: #4f46e5; color: #ffffff; }
.bunpou-chip .chip-n { opacity: 0.65; font-weight: 500; }

.bunpou-list { display: flex; flex-direction: column; gap: 12px; }

.bunpou-days {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6366f1;
    background: #eef2ff;
    border-radius: 999px;
    padding: 3px 9px;
    margin-bottom: 8px;
}

.bunpou-item {
    background: #ffffff;
    border-radius: 14px;
    padding: 16px 18px;
    border: 1px solid #eef2f7;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
}
.bunpou-pattern {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    word-break: break-word;
}
.bunpou-meaning {
    font-size: 0.95rem;
    color: #334155;
    margin-top: 6px;
    line-height: 1.5;
}
.bunpou-example {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e2e8f0;
}
.bunpou-ex-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 6px;
}
.bunpou-jp { font-size: 1.05rem; font-weight: 500; color: #0f172a; line-height: 1.6; }
.bunpou-id { font-size: 0.9rem; color: #64748b; margin-top: 4px; line-height: 1.5; }

.bunpou-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
    padding: 34px 20px;
    line-height: 1.7;
}

/* 3 tab sekarang — kecilkan sedikit biar muat di layar HP */
@media (max-width: 480px) {
    .tab-btn { font-size: 0.82rem; padding: 10px 4px; }
    .bunpou-pattern { font-size: 1.25rem; }
}

.bunpou-rumus {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    padding: 9px 12px;
    background: #f5f3ff;
    border-left: 3px solid #8b5cf6;
    border-radius: 8px;
}
.bunpou-rumus-label {
    flex: 0 0 auto;
    margin-top: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #8b5cf6;
    color: #ffffff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.bunpou-rumus-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: #4c1d95;
    line-height: 1.55;
    word-break: break-word;
}
.bunpou-legend {
    margin-top: 12px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.75;
}
.bunpou-legend b { color: #475569; }

/* ===== GERBANG LOGIN (Supabase) ===== */
#n3Gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(15, 23, 42, 0.72);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.n3-gate-card {
    width: 100%;
    max-width: 370px;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.n3-gate-logo { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.n3-gate-sub { font-size: 0.85rem; color: #64748b; margin: 6px 0 16px; line-height: 1.6; }
.n3-gate-tabs { display: flex; gap: 8px; background: #f1f5f9; padding: 4px; border-radius: 10px; margin-bottom: 14px; }
.n3-tab {
    flex: 1; padding: 9px; border: none; background: transparent; border-radius: 8px;
    font-family: inherit; font-size: 0.9rem; font-weight: 600; color: #64748b; cursor: pointer;
}
.n3-tab.aktif { background: #ffffff; color: #0f172a; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); }
.n3-input {
    width: 100%; box-sizing: border-box; padding: 12px 14px; margin-bottom: 10px;
    border: 1.5px solid #e2e8f0; border-radius: 10px; font-family: inherit; font-size: 0.95rem;
    background: #f8fafc; color: #1e293b; outline: none;
}
.n3-input:focus { border-color: #6366f1; background: #ffffff; }
.n3-btn {
    width: 100%; padding: 13px; border: none; border-radius: 10px;
    background: #4f46e5; color: #ffffff; font-family: inherit; font-size: 0.98rem;
    font-weight: 700; cursor: pointer;
}
.n3-btn:disabled { opacity: 0.6; }
.n3-pesan { font-size: 0.85rem; min-height: 20px; margin: 2px 0 10px; color: #64748b; line-height: 1.5; }
.n3-pesan.err { color: #dc2626; }
.n3-pesan.ok { color: #16a34a; }
.n3-gate-note { font-size: 0.75rem; color: #94a3b8; margin: 12px 0 0; line-height: 1.6; }


/* ============================================================================
   LAYER RESPONSIVE (v7) — dibuat Tzuyu 13 Sep 2026
   Tujuan: rapi di HP (360–430px), tetap enak di tablet & laptop.
   Ditaruh di paling bawah supaya menang dari aturan-aturan sebelumnya.
   ============================================================================ */

/* --- 1. DASAR: cegah layar geser ke samping & ukuran jangan aneh --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; }
html { overflow-x: hidden; }
body { overflow-x: clip; }   /* 'clip' (bukan hidden) supaya tab sticky tetap nempel */
img, svg, video, canvas { max-width: 100%; height: auto; }
body {
    padding: 12px max(12px, env(safe-area-inset-left)) 32px max(12px, env(safe-area-inset-right));
}
.app-container { width: 100%; max-width: 700px; margin: 0 auto; }

/* teks panjang (kanji/katakana/URL) tidak boleh bikin kotak melar */
.card-face, .quiz-option-btn, .bunpou-pattern, .bunpou-rumus-text, .back-word,
.back-example-jp, .back-example-id, .rank .nm, .session-title, .n3-pesan {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* --- 2. UKURAN FONT YANG IKUT LEBAR LAYAR (clamp) ---
   Nilai maksimum = ukuran aslinya, jadi tampilan laptop tidak berubah. */
.header-title h1 { font-size: clamp(1.1rem, 4.6vw, 1.5rem); line-height: 1.3; }
.card-face { font-size: clamp(1.15rem, 5.6vw, 1.8rem); }
.card-back .back-word { font-size: clamp(1.2rem, 6vw, 1.8rem); }
.card-back .back-example-jp { font-size: clamp(0.95rem, 4.2vw, 1.05rem); }
.card-back .back-example-id { font-size: clamp(0.8rem, 3.6vw, 0.92rem); }
.flashcard-container { height: clamp(210px, 46vh, 300px); }

/* --- 3. TOMBOL: minimal 44–46px supaya enak dipencet jempol --- */
.tab-btn { min-height: 44px; }
.rating-buttons button { min-height: 46px; font-size: 0.88rem; padding: 10px 6px; }
.action-btn-primary, .restart-btn, .n3-btn, .session-btn, .quiz-link-btn, .back-calendar-btn { min-height: 44px; }
.quiz-option-btn { min-height: 48px; padding: 12px 14px; }

/* --- 4. INPUT: font 16px, kalau lebih kecil iPhone suka auto-zoom --- */
@media (max-width: 640px) {
    input, select, textarea, .n3-input, .bunpou-search, .study-select, .rv-select, #directDaySelect, #quizDaySelect {
        font-size: 16px !important;
    }
}

/* --- 5. TATA LETAK KHUSUS HP --- */
@media (max-width: 640px) {
    body { padding: 10px max(10px, env(safe-area-inset-left)) 30px max(10px, env(safe-area-inset-right)); }

    /* header: judul di baris sendiri, tombol-tombolnya turun ke bawah */
    .header-container { flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
    .header-title { flex: 1 1 100%; }
    .header-container > div:last-child { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .quiz-link-btn { flex: 0 1 auto; padding: 9px 12px; font-size: 0.82rem; }
    #currentProfileDisplay { flex: 1 1 100%; font-size: 0.85rem !important; }

    /* tab dibuat nempel di atas biar gampang pindah */
    .tab-navigation { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(6px); }
    .tab-btn { font-size: 0.8rem; padding: 10px 4px; }

    /* kalender: kotak tanggal proporsional & angka tidak meluber */
    .days-grid { gap: 4px; }
    /* .day-cell sudah persegi & flex-column dari aturan lama — di sini cukup kecilkan angkanya */
    .days-grid > div { font-size: clamp(0.7rem, 3.4vw, 0.9rem); }
    .day-cell .day-number { font-size: clamp(0.72rem, 3.4vw, 0.9rem); line-height: 1.1; }
    .day-cell .day-time { font-size: clamp(0.5rem, 2.3vw, 0.62rem); line-height: 1.1; }
    .weekdays-grid { gap: 4px; font-size: 0.74rem; }
    .stats-bar { gap: 6px; }
    .stat-badge { font-size: 0.76rem; padding: 5px 10px; }

    /* kartu: padding sedikit lebih rapat, sudut tetap manis */
    .study-hub-card, .session-menu-card, .learning-card, .card, .rv-card,
    .bunpou-header-card, .bunpou-item, .calendar-card { padding: 16px; border-radius: 14px; }

    /* kuis: kotak soal jangan kaku 160px, kata panjang tetap muat */
    #quizQuestionText { height: auto !important; min-height: 130px; padding: 14px !important; }

    /* sesi belajar: judul & status tidak berdesakan */
    .session-btn { padding: 14px 16px; gap: 8px; }
    .session-title { font-size: 0.95rem; }
    .session-desc { font-size: 0.78rem; }

    /* papan peringkat & kartu bunpou */
    .rank { gap: 8px; }
    .rank .xp { font-size: 0.8rem; }
    .bunpou-rumus { flex-direction: column; gap: 6px; }
    .bunpou-rumus-label { margin-top: 0; align-self: flex-start; }
}

/* --- 6. HP KECIL (≤ 400px, misal iPhone SE / layar 360px) --- */
@media (max-width: 400px) {
    body { padding: 8px max(8px, env(safe-area-inset-left)) 26px max(8px, env(safe-area-inset-right)); }
    .header-title h1 { font-size: 1.05rem; }
    .calendar-icon { font-size: 1.2rem; }
    .quiz-link-btn { font-size: 0.76rem; padding: 8px 10px; min-height: 40px; }
    .tab-btn { font-size: 0.74rem; padding: 10px 2px; }
    .flashcard-container { height: clamp(200px, 44vh, 250px); }
    .rating-buttons { flex-wrap: wrap; }
    .rating-buttons button { flex: 1 1 45%; }
    .bunpou-chip { font-size: 0.73rem; padding: 6px 10px; }
    .bunpou-pattern { font-size: 1.2rem; }
    .stat-badge { font-size: 0.72rem; padding: 4px 9px; }
    .card-hint { font-size: 0.72rem; }
    table { font-size: 0.8rem; }
}

/* --- 7. LAYAR LEBAR (laptop/tablet): sedikit lebih lega --- */
@media (min-width: 900px) {
    .flashcard-container { height: 300px; }
}

/* --- 8. HORMATI PREFERENSI "kurangi animasi" --- */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== TAB KANJI (漢字) ===== */
.kanji-header-card {
    background: #ffffff; border: 1px solid #eef2f7; border-radius: 14px; padding: 18px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06); margin-bottom: 14px;
}
.kanji-header-card h2 { margin: 0 0 4px; font-size: 1.15rem; color: #0f172a; }
.kanji-sub { margin: 0 0 14px; font-size: 0.85rem; color: #64748b; }
.kanji-cari {
    width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1.5px solid #e2e8f0;
    border-radius: 10px; font-size: 0.95rem; font-family: inherit; background: #f8fafc; color: #1e293b; outline: none;
}
.kanji-cari:focus { border-color: #0f766e; background: #ffffff; }
.kanji-cek { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.85rem; color: #475569; font-weight: 600; }
.kanji-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.kanji-chips::-webkit-scrollbar { display: none; }
.kanji-chip {
    flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1.5px solid #e2e8f0;
    background: #f8fafc; color: #475569; font-family: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.kanji-chip.aktif { background: #0f766e; border-color: #0f766e; color: #ffffff; }
.kanji-n { opacity: 0.7; font-weight: 500; }
.kanji-legenda { margin: 12px 0 0; font-size: 0.72rem; color: #94a3b8; line-height: 1.7; }
.kanji-list { display: flex; flex-direction: column; gap: 10px; }
.kanji-item {
    display: flex; gap: 14px; background: #ffffff; border: 1px solid #eef2f7; border-radius: 14px;
    padding: 14px; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}
.kanji-badge {
    flex: 0 0 auto; width: 66px; height: 66px; border-radius: 12px; background: #0f766e; color: #ffffff;
    display: flex; align-items: center; justify-content: center; font-size: 2.1rem; font-weight: 700;
}
.kanji-isi { flex: 1 1 auto; min-width: 0; }
.kanji-baris { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
.kanji-label { flex: 0 0 auto; font-size: 0.62rem; font-weight: 700; border-radius: 6px; padding: 2px 6px; }
.kanji-label.on { background: #eef2ff; color: #4f46e5; }
.kanji-label.kun { background: #ecfdf5; color: #047857; }
.kanji-label.arti { background: #f1f5f9; color: #475569; }
.kanji-baca { font-size: 1.05rem; font-weight: 600; color: #0f172a; overflow-wrap: anywhere; }
.kanji-arti { font-size: 0.85rem; color: #475569; overflow-wrap: anywhere; }
.kanji-meta { font-size: 0.72rem; color: #94a3b8; margin-top: 6px; }
.kanji-contoh { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kanji-kata { font-size: 0.75rem; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 8px; padding: 4px 8px; color: #475569; }
.kanji-kata b { color: #0f172a; }
.kanji-more {
    width: 100%; padding: 13px; border: none; border-radius: 12px; background: #eef2ff; color: #4f46e5;
    font-family: inherit; font-weight: 700; font-size: 0.9rem; cursor: pointer; min-height: 46px;
}
.kanji-kosong { text-align: center; color: #94a3b8; padding: 34px 20px; font-size: 0.9rem; line-height: 1.8; }
@media (max-width: 640px) {
    .kanji-header-card { padding: 15px; }
    .kanji-item { padding: 12px; gap: 11px; }
}
@media (max-width: 400px) {
    .kanji-badge { width: 54px; height: 54px; font-size: 1.7rem; }
    .kanji-baca { font-size: 0.95rem; }
    .kanji-chip { font-size: 0.73rem; padding: 6px 10px; }
    .tab-btn { font-size: 0.7rem; padding: 10px 1px; }
}

/* ===== FURIGANA (ruby) di kalimat contoh ===== */
.back-example-jp { line-height: 2.15; }
.back-example-jp ruby { ruby-position: over; -webkit-ruby-position: over; }
.back-example-jp rt {
    font-size: 0.52em; font-weight: 400; color: #94a3b8;
    letter-spacing: 0; line-height: 1; text-align: center;
}
#previewVocabList .back-example-jp, .rv-back .back-example-jp { line-height: 2.15; }
#previewVocabList rt, .rv-back rt { font-size: 0.52em; font-weight: 400; color: #94a3b8; }
@media (max-width: 640px) {
    .back-example-jp { line-height: 2.05; }
    .back-example-jp rt { font-size: 0.55em; }
}

/* ===== LUPA SANDI (kode pemulihan) ===== */
.n3-lupa {
    display: block; width: 100%; margin-top: 8px; padding: 10px; background: none; border: none;
    color: #0f766e; font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
    text-align: center; min-height: 42px;
}
.n3-lupa:hover { text-decoration: underline; }
.n3-reset { border-top: 1px dashed #e2e8f0; margin-top: 12px; padding-top: 12px; text-align: left; }
.n3-reset-judul { font-size: 0.85rem; font-weight: 700; color: #475569; margin-bottom: 8px; }
.n3-kode-box { text-align: center; }
.kode-judul { font-size: 0.95rem; font-weight: 800; color: #0f766e; margin-bottom: 6px; }
.kode-besar {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; font-weight: 800;
    letter-spacing: 2px; color: #0f766e; background: #ecfdf5; border: 2px dashed #0f766e;
    border-radius: 12px; padding: 14px 8px; margin: 8px 0; user-select: all; -webkit-user-select: all;
    overflow-wrap: anywhere;
}
.kode-ket { font-size: 0.82rem; color: #64748b; line-height: 1.7; margin: 10px 0; }
.n3-btn.kecil { padding: 9px; font-size: 0.85rem; }
@media (max-width: 400px) { .kode-besar { font-size: 20px; letter-spacing: 1px; } }

/* ===== TAB DOKKAI (読解) ===== */
.dokkai-header h2 { margin: 0 0 6px; }
.dokkai-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dokkai-chips::-webkit-scrollbar { display: none; }
.dokkai-chip {
    flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; border: 1.5px solid #e2e8f0;
    background: #f8fafc; color: #475569; font-family: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; line-height: 1.25;
}
.dokkai-chip.aktif { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.dokkai-chip.selesai { border-color: #16a34a; }
.dokkai-chip.selesai.aktif { background: #16a34a; border-color: #16a34a; }
.dokkai-tema { font-size: 0.64rem; font-weight: 500; opacity: 0.8; }
.dokkai-tombol-baris { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.dokkai-judul { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 4px 0; }

/* bacaan: dibuat senyaman buku pelajaran (ruby rapat, baris lega, paragraf menjorok) */
.dokkai-teks {
    font-size: 1.1rem; line-height: 2.3; color: #1e293b; margin: 14px auto 0;
    max-width: 40em; text-align: left; letter-spacing: 0; word-spacing: normal;
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "MS Mincho", system-ui, serif;
    font-feature-settings: normal; -webkit-text-size-adjust: 100%;
}
.dokkai-teks p { margin: 0 0 1.1em; text-indent: 1em; }
.dokkai-teks p:last-child { margin-bottom: 0; }
.dokkai-teks ruby {
    ruby-position: over; -webkit-ruby-position: over; ruby-align: center;
    letter-spacing: 0; margin: 0;
}
.dokkai-teks rt {
    font-size: 0.48em; line-height: 1; color: #64748b; font-weight: 400;
    letter-spacing: 0; font-family: system-ui, -apple-system, sans-serif;
}
/* ukuran huruf bacaan (diatur dari tombol 小・中・大) */
.dokkai-teks.ukuran-kecil { font-size: 0.95rem; line-height: 2.1; }
.dokkai-teks.ukuran-sedang { font-size: 1.1rem; line-height: 2.3; }
.dokkai-teks.ukuran-besar { font-size: 1.28rem; line-height: 2.4; }
.dokkai-bacaan { background: #ffffff; }
.dokkai-ukuran { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.dokkai-ukuran button {
    width: 38px; height: 34px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: #f8fafc;
    color: #475569; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.dokkai-ukuran button.aktif { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.dokkai-kotoba { margin-top: 16px; padding-top: 10px; border-top: 1px dashed #e2e8f0; display: flex; flex-wrap: wrap; gap: 6px; }
.dokkai-kata { font-size: 0.78rem; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; padding: 4px 8px; color: #475569; }
.dokkai-kata b { color: #0f172a; }
.dokkai-arti { margin-top: 12px; padding: 12px; border-radius: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; font-size: 0.88rem; }
.dokkai-soal-item { border-top: 1px solid #eef2f7; padding: 12px 0; }
.dokkai-soal-item:first-of-type { border-top: none; }
.dokkai-pertanyaan { font-size: 1rem; line-height: 2.05; color: #0f172a; margin-bottom: 8px; }
.dokkai-pertanyaan ruby { ruby-position: over; -webkit-ruby-position: over; ruby-align: center; }
.dokkai-pertanyaan rt { font-size: 0.48em; color: #64748b; font-weight: 400; line-height: 1; }
.dokkai-pilihan { display: flex; flex-direction: column; gap: 8px; }
.dokkai-opsi {
    display: flex; gap: 9px; align-items: flex-start; text-align: left; width: 100%;
    padding: 11px 12px; min-height: 46px; border-radius: 10px; border: 1.5px solid #e2e8f0;
    background: #f8fafc; color: #334155; font: inherit; font-size: 0.92rem; cursor: pointer;
}
.dokkai-opsi .huruf {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #e2e8f0; color: #475569;
    font-size: 0.72rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.dokkai-opsi.dipilih { border-color: #4f46e5; background: #eef2ff; }
.dokkai-opsi.dipilih .huruf { background: #4f46e5; color: #fff; }
.dokkai-opsi.jawaban-benar { border-color: #16a34a; background: #f0fdf4; }
.dokkai-opsi.jawaban-benar .huruf { background: #16a34a; color: #fff; }
.dokkai-opsi.jawaban-salah { border-color: #dc2626; background: #fef2f2; }
.dokkai-opsi.jawaban-salah .huruf { background: #dc2626; color: #fff; }
.dokkai-bahas { margin-top: 10px; padding: 10px 12px; border-radius: 10px; font-size: 0.85rem; line-height: 1.7; }
.dokkai-bahas.ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.dokkai-bahas.salah { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.dokkai-aksi { margin-top: 14px; }
.dokkai-skor { margin-top: 12px; padding: 14px; border-radius: 12px; background: #eef2ff; border: 1px solid #c7d2fe; color: #3730a3; font-size: 0.92rem; line-height: 1.7; }
.dokkai-kosong { text-align: center; color: #94a3b8; padding: 36px 20px; font-size: 0.9rem; line-height: 1.8; }
@media (max-width: 400px) {
    .dokkai-teks { font-size: 1rem; line-height: 2.25; }
    .dokkai-chip { font-size: 0.72rem; padding: 6px 10px; }
}