/* ═══════════════════════════════════════════════════════
MNN Learning — みんなの日本語
styles.css — All application styles
Extracted from index.html (main CSS + splash CSS)
═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
1. CSS CUSTOM PROPERTIES — THEME VARIABLES
═══════════════════════════════════════════════════ */
:root {
--transition-theme: background-color 0.35s ease, color 0.35s ease,
border-color 0.35s ease, box-shadow 0.35s ease;
/* Tier warna aksen (dipakai buat badge/border/glow tint) — default: tema Biru */
--accent-t1: #60a5fa; --accent-t1-rgb: 96,165,250;
--accent-t2: #3b82f6; --accent-t2-rgb: 59,130,246;
--accent-t3: #1d4ed8; --accent-t3-rgb: 37,99,235;
--accent-primary: #3b7dd8;
--accent-noun: #4a9eff;
--accent-verb: #34d399;
--accent-adj: #fb923c;
--accent-danger: #f87171;
--accent-success: #34d399;
--accent-kana: #e03c4c;
/* Warna khas per-tab nav bawah — biar tiap panel kerasa beda pas aktif, bukan monoton */
--tab-dashboard: var(--accent-primary);
--tab-materi: #34d399;
--tab-quiz: #fb923c;
--tab-kotoba: #a78bfa;
--tab-kana: #22d3ee;
--tab-settings: #94a3b8;
--tab-sensei: #f472b6;
/* Palet warna resmi MNN Learning — diambil dari logo (navy + merah torii/matahari) */
--mnn-navy: #1c3a5e;
--mnn-navy-dark: #122A45;
--mnn-navy-rgb: 28,58,94;
--mnn-red: #c0392b;
--mnn-red-dark: #a5281c;
--mnn-red-rgb: 192,57,43;
--mnn-cloud: #94a3b8;
--mnn-ornament-bg: url("assets/ornament-dark.jpeg");
--mnn-third: #c0392b;
--mnn-third-rgb: 192,57,43;
/* Navy dipakai sebagai warna PERMUKAAN (card/hero) tetap navy gelap di semua tema.
Tapi kalau dipakai sebagai warna TEKS/ICON di atas kartu, di dark mode dia butek
karena mirip sama warna latar sendiri — makanya ada varian "-fg" yang lebih terang
khusus buat teks/aksen, terpisah dari --mnn-navy yang tetap dipakai buat permukaan. */
--mnn-navy-fg: var(--mnn-navy);
--mnn-navy-fg-rgb: var(--mnn-navy-rgb);
}
/* ── Tema Warna: Ungu (Klasik) — opsional, dipilih lewat Setelan ── */
[data-accent="purple"] {
--accent-t1: #c4b5fd; --accent-t1-rgb: 196,181,253;
--accent-t2: #a78bfa; --accent-t2-rgb: 167,139,250;
--accent-t3: #7c3aed; --accent-t3-rgb: 124,58,237;
}
[data-theme="dark"] {
--accent-primary: #6fa8f0;
--bg-base: #0a1830;
--bg-surface: #10233f;
--bg-elevated: #15304f;
--bg-glass: rgba(15,35,63,0.72);
--bg-card: #122a48;
--bg-card-hover: #17335a;
--border: rgba(255,255,255,0.09);
--border-strong: rgba(255,255,255,0.18);
--text-primary: #f5f8ff;
--text-secondary: #a3b5d4;
--text-muted: #5f7796;
--text-inverse: #0a1830;
--shadow-card: 0 8px 28px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.3);
--shadow-float: 0 24px 70px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.35);
--nav-bg: rgba(10,24,48,0.92);
--header-bg: rgba(10,24,48,0.88);
--mnn-navy-fg: #5b9bf0;
--mnn-navy-fg-rgb: 91,155,240;
}
[data-theme="dark"][data-accent="purple"] { --accent-primary: #c4b5fd; }
[data-theme="dark"][data-accent="red"] { --accent-primary: #e0776b; --accent-t1: #e0776b; --accent-t1-rgb: 224,119,107; }
[data-theme="light"] {
--accent-primary: var(--mnn-navy);
--bg-base: #f5f5f7;
--bg-surface: #ffffff;
--bg-elevated: #ffffff;
--bg-glass: rgba(255,255,255,0.78);
--bg-card: #ffffff;
--bg-card-hover: #f8f8fc;
--border: rgba(0,0,0,0.07);
--border-strong: rgba(0,0,0,0.13);
--text-primary: #1a1a2e;
--text-secondary: #5a5a7a;
--text-muted: #9a9ab8;
--text-inverse: #ffffff;
--shadow-card: 0 2px 10px rgba(20,20,40,.06), 0 1px 2px rgba(20,20,40,.04);
--shadow-float: 0 14px 40px rgba(20,20,40,.10), 0 4px 12px rgba(20,20,40,.05);
--nav-bg: rgba(245,245,247,0.92);
--header-bg: rgba(245,245,247,0.88);
}
[data-theme="light"][data-accent="purple"] { --accent-primary: #c4b5fd; }
[data-theme="light"][data-accent="red"] { --accent-primary: var(--mnn-red); --accent-t1: var(--mnn-red); --accent-t1-rgb: var(--mnn-red-rgb); }
/* ═══════════════════════════════════════════════════
2. RESET & BASE
═══════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
font-family: 'DM Sans','Noto Sans JP',system-ui,sans-serif;
background-color: var(--bg-base);
color: var(--text-primary);
transition: var(--transition-theme);
min-height: 100dvh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
[data-theme="dark"] body {
background-image:
radial-gradient(ellipse 900px 500px at 50% -10%, rgba(91,155,240,.10), transparent 60%),
radial-gradient(ellipse 700px 400px at 100% 15%, rgba(192,57,43,.08), transparent 60%);
background-attachment: fixed;
}
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; }
/* Baris chip/filter yang di-scroll horizontal — sembunyikan scrollbar-nya total, lebih bersih (spt app mobile) */
.kotoba-action-row, .kanji-set-tabs { scrollbar-width:none; }
.kotoba-action-row::-webkit-scrollbar, .kanji-set-tabs::-webkit-scrollbar { display:none; }
/* ═══════════════════════════════════════════════════
3. LAYOUT
═══════════════════════════════════════════════════ */
#app { max-width:430px; margin:0 auto; min-height:100dvh; display:flex; flex-direction:column; position:relative; }
/* ═══════════════════════════════════════════════════
4. STICKY HEADER
═══════════════════════════════════════════════════ */
.header {
position:sticky; top:0; z-index:100;
background:var(--header-bg);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border-bottom:1px solid var(--border);
padding:9px 18px;
transition:var(--transition-theme);
}
.header-inner { display:flex; align-items:center; gap:10px; }
.header-title { flex:1; }
.header-title h1 { font-family:'Noto Sans JP',sans-serif; font-size:13px; font-weight:700; color:var(--text-secondary); letter-spacing:.02em; }
.header-title .chapter-name { font-size:15px; font-weight:600; color:var(--text-primary); margin-top:1px; line-height:1.2; }
.header-title--brand { display:flex; align-items:center; gap:8px; }
.btn-sidebar-toggle { display:none; }
.header-logo { width:26px; height:26px; border-radius:8px; object-fit:cover; flex-shrink:0; box-shadow:0 1px 4px rgba(var(--mnn-navy-rgb),.25); }
.header-title--brand h1 { font-size:14.5px; font-weight:700; color:var(--text-primary); letter-spacing:.01em; margin:0; }
.brand-kaizen { font-family:'Yellowtail',cursive; font-size:19px; font-weight:400; color:var(--mnn-red); margin-left:1px; line-height:1; position:relative; top:1px; }
.header-actions { display:flex; align-items:center; gap:8px; }
.guest-mode-badge {
display:flex; align-items:center; gap:4px;
padding:4px 9px; border-radius:99px;
background:#000; border:1px solid #000;
font-size:10px; font-weight:700; color:#fff;
letter-spacing:.02em; cursor:pointer; flex-shrink:0; white-space:nowrap;
}
[data-theme="light"] .guest-mode-badge {
background:#fff; border:1px solid rgba(0,0,0,.12);
color:#000;
}
/* Progress Ring */
.progress-ring { position:relative; width:36px; height:36px; flex-shrink:0; }
.progress-ring svg { width:36px; height:36px; transform:rotate(-90deg); }
.progress-ring .track { fill:none; stroke:var(--border-strong); stroke-width:2.5; }
.progress-ring .fill {
fill:none; stroke:var(--accent-primary); stroke-width:2.5; stroke-linecap:round;
stroke-dasharray:88; stroke-dashoffset:88;
transition:stroke-dashoffset 0.6s cubic-bezier(.4,0,.2,1);
}
.progress-ring .ring-label {
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-size:8.5px; font-weight:700; color:var(--accent-primary); letter-spacing:-.02em;
}
/* Theme Toggle */
.btn-theme {
width:36px; height:36px; border-radius:50%;
border:1px solid var(--border-strong); background:var(--bg-elevated);
cursor:pointer; display:flex; align-items:center; justify-content:center;
font-size:16px; transition:transform .25s ease, background .35s ease; flex-shrink:0;
}
.btn-theme:active { transform:scale(.88); }
/* Install Pill — hidden by default */
.btn-install { display:none !important; }
/* Profile / Avatar button */
.btn-profile {
width:34px; height:34px; border-radius:50%;
border:2px solid var(--border-strong);
background:var(--bg-elevated);
cursor:pointer; transition:all .18s ease;
display:flex; align-items:center; justify-content:center;
font-size:16px; overflow:hidden; flex-shrink:0;
position:relative;
}
.btn-profile:active { transform:scale(.93); }
.btn-profile.is-logged-in { border-color:var(--accent-primary); }
#profile-avatar-icon { display:flex; align-items:center; justify-content:center; width:100%; height:100%; }
.btn-profile-img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.btn-profile-dot {
position:absolute; bottom:0; right:0;
width:9px; height:9px; border-radius:50%;
background:var(--accent-verb); border:2px solid var(--bg-base);
display:none;
}
.btn-profile.is-logged-in .btn-profile-dot { display:block; }
/* Profile page — regular .page like Dashboard/Achievement (see .page / .page.active
rules elsewhere); no fixed-overlay/sheet mechanics, so it inherits the same
proven document-flow scrolling as every other page in the app. */
#profile-panel-inner {
display:flex; flex-direction:column; gap:14px;
padding-bottom:24px;
}
@keyframes fadeInUp { from { transform:translateY(24px); opacity:0; } to { transform:translateY(0); opacity:1; } }
.profile-hero {
position:relative; overflow:hidden; border-radius:22px;
padding:18px 16px; margin:0 0 4px; min-height:110px;
display:flex; flex-direction:row; align-items:center; gap:14px;
background-image: url("assets/ornament-light.jpeg");
background-size:cover;
background-position:50% 42%;
background-repeat:no-repeat;
border:1px solid var(--border);
box-shadow:var(--shadow-card);
}
[data-theme="dark"] .profile-hero {
background-image: url("assets/ornament-dark.jpeg");
}
.profile-hero-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.profile-avatar-big {
width:68px; height:68px; border-radius:50%;
background:var(--bg-card); border:3px solid var(--mnn-red);
display:flex; align-items:center; justify-content:center;
font-size:28px; overflow:hidden; flex-shrink:0;
box-shadow:0 4px 16px rgba(var(--mnn-red-rgb),.25);
}
.profile-name { font-size:19px; font-weight:700; color:var(--text-primary); text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-email { font-size:12px; color:var(--text-muted); text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-premium-badge-float {
position:absolute; top:14px; right:14px; z-index:1;
}
.profile-stats-row {
display:grid; grid-template-columns:repeat(3,1fr);
gap:10px; text-align:center;
}
.profile-stat-box {
padding:14px 6px 12px; border-radius:18px;
background:var(--bg-card); border:1px solid var(--border);
box-shadow:var(--shadow-card);
display:flex; flex-direction:column; align-items:center;
}
.profile-stat-icon-badge {
width:32px; height:32px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:15px; line-height:1; margin-bottom:6px;
}
.profile-stat-icon-badge svg { width:16px; height:16px; }
.profile-stat-val { font-size:19px; font-weight:800; color:var(--text-primary); line-height:1; }
.profile-stat-lbl { font-size:10px; color:var(--text-muted); margin-top:4px; font-weight:600; letter-spacing:.04em; }
.profile-action-card {
background:var(--bg-elevated); border:1px solid var(--border-strong);
border-radius:20px; box-shadow:var(--shadow-card);
overflow:hidden; padding:4px;
}
.profile-action-list { display:flex; flex-direction:column; }
.profile-action-item {
display:flex; align-items:center; gap:12px;
padding:12px 10px; border-radius:14px; cursor:pointer;
transition:background .15s ease; border:none; background:none;
width:100%; text-align:left; font-family:'DM Sans',sans-serif;
border-bottom:1px solid var(--border);
}
.profile-action-list > .profile-action-item:last-child { border-bottom:none; }
.profile-action-item:active { background:var(--bg-card-hover); }
.profile-action-icon {
flex-shrink:0; line-height:1;
width:34px; height:34px; border-radius:11px;
display:flex; align-items:center; justify-content:center;
background:rgba(var(--mnn-navy-rgb),.1); color:var(--mnn-navy);
}
.profile-action-icon svg { width:17px; height:17px; }
.profile-action-item.danger .profile-action-icon { background:rgba(var(--mnn-red-rgb),.12); color:var(--mnn-red); }
.profile-action-chevron { margin-left:auto; color:var(--text-muted); font-size:14px; flex-shrink:0; }
.profile-action-label { font-size:14px; font-weight:600; color:var(--text-primary); }
.profile-action-sub { font-size:11px; color:var(--text-muted); margin-top:1px; }
.profile-action-item.danger .profile-action-label { color:var(--accent-danger); }
/* Login / auth-choice screen — contained hero card, using the app's existing ornament asset */
.auth-hero-card {
position:relative; overflow:hidden; border-radius:22px;
padding:28px 20px 22px; margin-bottom:26px; width:100%; min-height:190px;
display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
background-image: url("assets/ornament-light.jpeg");
background-size:cover;
background-position:60% 40%;
background-repeat:no-repeat;
border:1px solid var(--border);
box-shadow:var(--shadow-card);
}
[data-theme="dark"] .auth-hero-card {
background-image: url("assets/ornament-dark.jpeg");
}
/* Login form inside sheet */
.profile-login-form { display:flex; flex-direction:column; gap:12px; }
.profile-input {
width:100%; padding:13px 14px; border-radius:18px;
border:1.5px solid var(--border-strong); background:var(--bg-card);
color:var(--text-primary); font-size:14px; font-family:'DM Sans',sans-serif;
outline:none; box-sizing:border-box; transition:border-color .18s ease;
}
.profile-input:focus { border-color:var(--accent-primary); }
/* ═══════════════════════════════════════════════════
5. MAIN CONTENT
═══════════════════════════════════════════════════ */
.main-content { flex:1; padding:20px 18px 100px; display:flex; flex-direction:column; gap:20px; }
.section-label { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
/* ═══════════════════════════════════════════════════
6. FLASHCARD — Mazii Style
═══════════════════════════════════════════════════ */
/* Counter atas tengah */
.fc-top-counter {
text-align:center; font-size:13px; font-weight:500; color:var(--text-muted);
letter-spacing:.04em; margin-bottom:6px; padding-top:2px;
}
.flashcard-scene { perspective:1200px; width:100%; }
.flashcard-flipper {
width:100%; min-height:220px; max-height:360px; aspect-ratio:5/3.6; position:relative;
transform-style:preserve-3d;
transition:transform .55s cubic-bezier(.4,.2,.2,1);
cursor:pointer;
}
/* Di layar lebar (tablet/desktop), aspect-ratio akan mendorong tinggi
melebihi max-height — abaikan aspect-ratio begitu lebar > ~520px
supaya card tetap kompak seperti flashcard kanji. */
@media (min-width:520px) {
.flashcard-flipper { aspect-ratio:unset; height:300px; }
}
.flashcard-flipper.is-flipped { transform:rotateY(180deg); }
.card-face {
position:absolute; inset:0; border-radius:26px;
backface-visibility:hidden; -webkit-backface-visibility:hidden;
display:flex; flex-direction:column; align-items:center; justify-content:center;
padding:24px 28px; overflow:hidden;
background:var(--bg-card); border:1px solid var(--border-strong);
box-shadow:var(--shadow-float);
transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.flashcard-scene[data-cat="noun"] .card-face,
.flashcard-scene[data-cat="verb"] .card-face,
.flashcard-scene[data-cat="adj"] .card-face,
.flashcard-scene[data-cat="other"] .card-face {
box-shadow:var(--shadow-float), 0 0 0 2px var(--mnn-red);
border-color:var(--mnn-red);
}
.card-back { transform:rotateY(180deg); justify-content:flex-start; padding-top:20px; gap:2px; overflow-y:auto; }
/* [Fix] Kanji gak punya contoh kalimat kayak kosakata — balikin ke tengah biar gak nge-gantung di atas */
#kanji-scene .card-back { justify-content:center; padding-top:0; }
.card-category-tag { position:absolute; top:14px; left:14px; padding:3px 10px; border-radius:99px; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.tag-noun { background:rgba(74,158,255,.14); color:var(--accent-noun); }
.tag-verb { background:rgba(52,211,153,.14); color:var(--accent-verb); }
.tag-adj { background:rgba(251,146,60,.14); color:var(--accent-adj); }
.tag-other{ background:rgba(var(--accent-t1-rgb),.14); color:var(--accent-primary); }
.card-kanji-wrap { text-align:center; max-width:100%; padding:0 6px; box-sizing:border-box; }
/* [FIX v2.7.4] iOS Safari: ganti display:inline → display:ruby agar ruby layout proper;
tambah ruby-position:over + -webkit-ruby-position:before untuk posisi furigana di atas */
ruby { ruby-align:center; display:ruby; ruby-position:over; -webkit-ruby-position:before; }
ruby rt { display:ruby-text; font-family:'Noto Sans JP',sans-serif; font-size:.54em; font-weight:400; color:var(--accent-primary); letter-spacing:.04em; opacity:.85; line-height:1; }
/* [FIX] Furigana (gaya kurung） di dalam flow Bunpou (Struktur/Fungsi/Penjelasan/Contoh
Kalimat) kekecilan — dibesarkan khusus di sini tanpa ganggu ukuran furigana di tempat lain. */
.bunpou-detail-body .furi-paren { font-size:.85em; opacity:.9; }
.bunpou-detail-body ruby rt { font-size:.68em; opacity:1; }
/* Furigana inline parens style */
/* [FIX v2.7.3] iOS: font-size .78em terlalu besar dengan Hiragino fallback → kecilkan ke .65em,
tambah Hiragino ke font stack supaya metrics konsisten, cegah iOS auto-scale span */
.furi-paren { font-family:'Noto Sans JP','Hiragino Sans','Hiragino Kaku Gothic Pro',sans-serif; font-size:.65em; color:var(--accent-primary); opacity:.75; letter-spacing:.01em; font-weight:400; -webkit-text-size-adjust:none; }
body.furigana-off .furi-paren { display:none; }
body.romaji-off .vocab-romaji { display:none; }
body.romaji-off .card-romaji { display:none; }
body.romaji-off .reibun-romaji { display:none; }
/* FRONT card */
.card-main-text { font-family:'Noto Sans JP',sans-serif; font-size:40px; font-weight:800; color:var(--text-primary); line-height:1.3; text-align:center; letter-spacing:.02em; max-width:100%; word-break:keep-all; overflow-wrap:break-word; }
.card-hint-mazii { position:absolute; bottom:14px; font-size:11px; color:var(--text-muted); letter-spacing:.06em; font-weight:400; }
/* BACK card elements */
.cb-furigana { font-family:'Noto Sans JP',sans-serif; font-size:22px; font-weight:600; color:var(--text-primary); text-align:center; }
.cb-romaji { font-size:12px; color:var(--text-muted); font-style:italic; margin-top:2px; letter-spacing:.03em; text-align:center; }
.cb-arti-label { font-size:9px; font-weight:700; letter-spacing:.1em; color:var(--text-muted); margin-top:10px; text-transform:uppercase; }
.cb-arti-id { font-size:18px; font-weight:700; color:var(--accent-primary); text-align:center; margin-top:3px; }
.cb-arti-en { font-size:13px; color:var(--text-secondary); text-align:center; margin-top:2px; }
.cb-divider { width:80%; height:1px; background:var(--border-strong); margin:10px auto; }
.cb-example-wrap { text-align:center; width:100%; }
.cb-ex-jp { font-family:'Noto Sans JP',sans-serif; font-size:14px; color:var(--text-primary); line-height:1.5; }
.cb-ex-romaji { font-size:11px; color:var(--text-muted); font-style:italic; margin-top:2px; letter-spacing:.02em; }
.cb-ex-id { font-size:13px; color:var(--text-secondary); margin-top:3px; line-height:1.5; }
/* Learned badge on card */
.card-known-badge {
position:absolute; top:14px; right:14px; padding:2px 8px; border-radius:99px;
font-size:9px; font-weight:700; background:rgba(52,211,153,.14); color:var(--accent-verb);
border:1px solid rgba(52,211,153,.25);
}
/* ═══════════════════════════════════════════════════
7. CARD CONTROLS — Mazii style
═══════════════════════════════════════════════════ */
.fc-controls-mazii { display:flex; align-items:center; gap:8px; margin-top:10px; }
.fc-btn-mazii {
flex:1; height:48px; border-radius:18px; border:1px solid var(--border-strong);
background:var(--bg-card); color:var(--text-primary); font-size:14px; font-weight:600;
font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .18s ease;
display:flex; align-items:center; justify-content:center; gap:4px;
box-shadow:var(--shadow-card);
}
.fc-btn-mazii:active { transform:scale(.96); }
.fc-btn-star { flex:0 0 52px; font-size:20px; }
.fc-btn-star.is-starred { color:#f59e0b; border-color:rgba(245,158,11,.3); background:rgba(245,158,11,.08); }
.fc-btn-nav { background:var(--mnn-red); border-color:var(--mnn-red); color:#fff; }
.fc-btn-nav:active { background:var(--mnn-red-dark); }
/* legacy refs kept for TTS/mark */
.card-controls { display:flex; align-items:center; gap:10px; margin-top:12px; }
.btn-nav {
flex:1; height:48px; border-radius:18px; border:1px solid var(--border-strong);
background:var(--bg-card); color:var(--text-primary); font-size:15px; font-weight:600;
font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .18s ease;
display:flex; align-items:center; justify-content:center; gap:6px;
box-shadow:var(--shadow-card);
}
.btn-nav:active { transform:scale(.96); }
.btn-nav.btn-primary { background:var(--accent-primary); border-color:transparent; color:#0f0f1e; }
.btn-tts { flex:0 0 48px !important; width:48px; font-size:18px; }
.card-counter { flex-shrink:0; font-size:12px; font-weight:600; color:var(--text-muted); min-width:40px; text-align:center; }
/* Mark learned + Quick Review row */
.mark-row { display:flex; gap:8px; margin-top:8px; }
.btn-mark-learned {
flex:1; height:48px; border-radius:18px; border:1px solid var(--border-strong);
background:var(--bg-card); color:var(--text-secondary); font-size:13px; font-weight:600;
font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .18s ease;
display:flex; align-items:center; justify-content:center; gap:6px;
}
.btn-mark-learned.is-learned { background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.3); color:var(--accent-verb); }
.btn-mark-learned:active { transform:scale(.98); }
.btn-quick-review {
flex:1; height:48px; border-radius:18px; padding:0 14px;
border:1px solid rgba(var(--accent-t1-rgb),.25); background:rgba(var(--accent-t1-rgb),.08);
color:var(--accent-primary); font-size:13px; font-weight:700;
font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .18s ease;
display:flex; align-items:center; justify-content:center; gap:5px; white-space:nowrap;
}
.btn-quick-review:active { transform:scale(.97); }
/* [SENTENCE_ENGINE] Difficulty toggle buttons */
.ex-diff-btn {
flex:1; padding:5px 8px; border-radius:10px; font-size:10px; font-weight:700;
border:1px solid var(--border-strong); background:var(--bg-elevated);
color:var(--text-muted); cursor:pointer; transition:all .2s; min-width:58px;
}
.ex-diff-btn.active {
background:rgba(99,102,241,.15); border-color:rgba(99,102,241,.4);
color:var(--accent-primary);
}
.ex-diff-btn:active { transform:scale(.97); }
/* ═══════════════════════════════════════════════════
8. VOCABULARY LIST
═══════════════════════════════════════════════════ */
.vocab-section { display:flex; flex-direction:column; gap:0; padding:2px 0; }
.vocab-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
/* Setiap item = kartu terpisah, bukan tabel */
.vocab-item {
display:flex;
flex-direction:row;
align-items:center;
gap:0;
padding:0 14px;
min-height:72px;
margin-bottom:14px !important;
background:var(--bg-card);
border:2.5px solid var(--mnn-red);
border-radius:20px;
transition:background .18s ease, transform .12s ease;
box-shadow:0 2px 8px rgba(0,0,0,.18);
overflow:hidden;
}
.vocab-item:active { background:var(--bg-card-hover); transform:scale(.985); }
.vocab-item.is-learned { border-color:rgba(52,211,153,.55); }
/* Left cell: furigana + kanji/kana + romaji */
.vocab-japanese {
flex: 0 0 38%;
max-width: 38%;
padding: 14px 10px 14px 0;
display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
min-width:0;
}
.vocab-furigana {
font-family:'Noto Sans JP',sans-serif;
font-size:10px; font-weight:400;
color:var(--accent-primary); opacity:.9;
letter-spacing:.04em;
min-height:13px;
line-height:1.2;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;
}
.vocab-kana {
font-family:'Noto Sans JP',sans-serif;
font-size:18px; font-weight:700;
color:var(--text-primary); line-height:1.3;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;
}
.vocab-romaji {
font-size:10px; color:var(--text-muted); font-style:italic;
margin-top:2px;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100%;
}
/* Divider: pendek, tidak full-height, biar tidak kesan tabel */
.vocab-divider {
flex: 0 0 1px;
width: 1px;
height: 36px; /* fixed pendek, bukan stretch */
background: var(--border-strong);
border-radius: 1px;
align-self: center;
}
/* Right cell: meaning text, vertically centered */
.vocab-meaning {
flex:1;
padding: 10px 0 10px 12px;
font-size:13px; font-weight:500; color:var(--text-secondary);
line-height:1.5; word-break:break-word;
display:flex; align-items:center;
min-width:0;
}
/* Learned dot — dipakai di Kotoba page (passive indicator) */
.vocab-learned-dot {
width:7px; height:7px; border-radius:50%;
background:var(--accent-verb);
justify-self:end; align-self:center;
opacity:0; transition:opacity .2s;
}
.vocab-item.is-learned .vocab-learned-dot { opacity:1; }
/* Tombol toggle "Sudah Hafal" — dipakai di Materi > Kosakata (interaktif) */
.vocab-hafal-btn {
width:26px; height:26px; border-radius:50%; flex-shrink:0; margin-left:auto;
border:2px solid var(--border-strong); background:var(--bg-elevated);
display:flex; align-items:center; justify-content:center;
font-size:12px; font-weight:800; color:transparent; cursor:pointer;
transition:all .15s ease;
}
.vocab-hafal-btn:active { transform:scale(.9); }
.vocab-hafal-btn.is-learned { background:#34d399; border-color:#34d399; color:#0f0f1e; }
.vocab-filter-chips { display:flex; gap:7px; margin-bottom:12px; }
.vocab-filter-chip {
flex:1; padding:7px 6px; border-radius:11px; border:1.5px solid var(--border-strong);
background:var(--bg-card); color:var(--text-muted); font-size:11px; font-weight:700;
font-family:'DM Sans',sans-serif; cursor:pointer; text-align:center; transition:all .15s ease;
}
.vocab-filter-chip.active { border-color:var(--mnn-red); background:rgba(var(--mnn-red-rgb),.08); color:var(--mnn-red); }
/* ═══════════════════════════════════════════════════
[Fix] Kartu kosakata KHUSUS panel Kotoba — ornamen navy gelap
(scoped ke #page-kotoba biar TIDAK ikut mengubah tab Materi)
═══════════════════════════════════════════════════ */
#page-kotoba .vocab-item {
position:relative;
background:linear-gradient(135deg, var(--mnn-navy) 0%, var(--mnn-navy-dark) 100%);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 3px 10px rgba(var(--mnn-navy-rgb),.24);
}
#page-kotoba .vocab-item-ornament {
position:absolute; inset:0;
background-image:var(--mnn-ornament-bg); background-size:cover; background-position:88% center;
opacity:.35;
-webkit-mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 45%, rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.7) 45%, rgba(0,0,0,0) 100%);
pointer-events:none;
}
#page-kotoba .vocab-item:has(.vocab-item-badge) { padding-top:16px; }
#page-kotoba .vocab-item:active { background:none; transform:scale(.985); }
#page-kotoba .vocab-item.is-learned { border-color:rgba(52,211,153,.4); }
#page-kotoba .vocab-japanese { position:relative; z-index:1; }
#page-kotoba .vocab-furigana { color:#e0776b; opacity:.95; }
#page-kotoba .vocab-kana { color:#fff; }
#page-kotoba .vocab-romaji { color:rgba(255,255,255,.55); }
#page-kotoba .vocab-divider { position:relative; z-index:1; background:rgba(255,255,255,.18); }
#page-kotoba .vocab-meaning { position:relative; z-index:1; color:rgba(255,255,255,.85); }
#page-kotoba .vocab-learned-dot { position:relative; z-index:1; }
/* ═══════════════════════════════════════════════════
8b. KOTOBA PAGE
═══════════════════════════════════════════════════ */
.kotoba-chip {
flex-shrink:0; padding:7px 14px; border-radius:99px;
border:1.5px solid var(--border-strong); background:var(--bg-elevated);
color:var(--text-secondary); font-size:12px; font-weight:600;
font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .2s cubic-bezier(.4,0,.2,1);
white-space:nowrap;
}
.kotoba-chip:active { transform:scale(.96); }
.kotoba-chip.active {
background:var(--mnn-red); border-color:var(--mnn-red);
color:#fff; box-shadow:0 2px 10px rgba(var(--mnn-red-rgb),.35);
}
.kotoba-book-btn {
flex:1; padding:8px 10px; border-radius:16px;
border:1.5px solid var(--border-strong); background:var(--bg-elevated);
color:var(--text-secondary); font-size:12px; font-weight:600;
font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .2s cubic-bezier(.4,0,.2,1);
text-align:center; position:relative;
}
.kotoba-book-btn:active { transform:scale(.97); }
.kotoba-book-btn.active {
background:rgba(var(--accent-t1-rgb),.18); border-color:var(--accent-primary);
color:var(--accent-primary); box-shadow:0 2px 10px rgba(var(--accent-t1-rgb),.2);
}
/* [v3.7.1] Redesign filter Kotoba: grid rapi, gak perlu scroll horizontal lagi */
.kotoba-filter-group { display:flex; flex-direction:column; gap:8px; }
.kotoba-chip-all { width:100%; border-radius:16px; padding:10px 14px; font-size:12.5px; }
.kotoba-filter-grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.kotoba-filter-grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.kotoba-filter-grid2 .kotoba-chip, .kotoba-filter-grid3 .kotoba-book-btn, .kotoba-filter-grid2 .kotoba-book-btn { width:100%; white-space:normal; }
/* ═══════════════════════════════════════════════════
8d. KOTOBA PAGE — REDESIGN v3.8 (mockup: navy hero + ornamen torii,
category cards, dark book hero)
═══════════════════════════════════════════════════ */
/* Hero card — Ensiklopedia */
.kotoba-hero-card {
position:relative; overflow:hidden; border-radius:22px; padding:18px 20px 16px;
background:linear-gradient(135deg, var(--mnn-navy) 0%, var(--mnn-navy-dark) 100%);
border:1px solid rgba(255,255,255,.1);
box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.kotoba-hero-ornament {
position:absolute; inset:0;
background-image:var(--mnn-ornament-bg); background-size:cover; background-position:78% center;
opacity:.5;
-webkit-mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 35%, rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.9) 35%, rgba(0,0,0,0) 100%);
pointer-events:none;
}
.kotoba-hero-content { position:relative; z-index:1; max-width:78%; }
.kotoba-hero-label {
font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
color:#e0776b; margin-bottom:6px;
}
.kotoba-hero-title-row { display:flex; align-items:center; gap:9px; margin-bottom:5px; }
.kotoba-hero-icon {
width:32px; height:32px; border-radius:10px; flex-shrink:0;
background:rgba(var(--mnn-red-rgb),.9); color:#fff;
display:flex; align-items:center; justify-content:center;
box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.kotoba-hero-icon svg { width:17px; height:17px; }
.kotoba-hero-title { font-size:19px; font-weight:800; color:#fff; line-height:1.2; }
.kotoba-hero-sub { font-size:11.5px; color:rgba(255,255,255,.72); font-weight:500; line-height:1.4; }
/* [ADD] Progress ring panel: Dipelajari | % | Tersisa */
.kotoba-hero-progress {
position:relative; z-index:1;
display:flex; align-items:center; justify-content:space-between;
margin-top:12px; padding:10px 16px;
background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
border-radius:16px;
}
.kotoba-hero-progress-stat { display:flex; flex-direction:column; gap:2px; min-width:0; }
.kotoba-hero-progress-label { font-size:9.5px; color:rgba(255,255,255,.55); font-weight:600; }
.kotoba-hero-progress-value { font-size:17px; font-weight:800; line-height:1.2; }
.kotoba-hero-progress-ring { position:relative; width:54px; height:54px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.kotoba-hero-progress-ring svg { position:absolute; inset:0; }
.kotoba-hero-progress-ring circle#kotoba-progress-ring-fg { transition:stroke-dashoffset .5s ease; }
.kotoba-hero-progress-pct { position:relative; z-index:1; font-size:12px; font-weight:800; color:#fff; }
/* Search + Upgrade CTA */
.kotoba-search-wrap { display:flex; flex-direction:column; gap:9px; }
.kotoba-search-box { position:relative; display:flex; align-items:center; }
.kotoba-search-icon { position:absolute; left:14px; font-size:13px; opacity:.55; pointer-events:none; }
.kotoba-search-input {
width:100%; padding:12px 14px 12px 38px; border-radius:14px;
border:1.5px solid var(--border-strong); background:var(--bg-elevated); color:var(--text-primary);
font-size:13px; font-family:'DM Sans',sans-serif; transition:border-color .2s ease;
}
.kotoba-search-input:focus { border-color:rgba(var(--accent-t1-rgb),.4); outline:none; }
.kotoba-search-input:disabled { opacity:.65; cursor:not-allowed; }
.kotoba-upgrade-btn {
width:100%; padding:13px; border-radius:14px; border:none;
background:linear-gradient(135deg, var(--mnn-red) 0%, var(--mnn-red-dark) 100%);
color:#fff; font-size:13px; font-weight:800; font-family:'DM Sans',sans-serif;
cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;
box-shadow:0 4px 14px rgba(var(--mnn-red-rgb),.32); transition:transform .15s ease;
}
.kotoba-upgrade-btn:active { transform:scale(.98); }
/* Category section head */
.kotoba-section-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px; }
.kotoba-section-title {
font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--text-muted);
min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kotoba-section-head .kotoba-chip-all { width:auto; flex-shrink:0; padding:5px 13px; font-size:10.5px; border-radius:99px; }
/* Category cards — 3-col grid, row1: verb/adj/noun, row2: other + semua-buku(span 2) */
.kotoba-cat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px; }
.kotoba-cat-card {
display:flex; align-items:center; gap:7px; text-align:left; white-space:normal;
padding:9px 8px; border-radius:14px;
border:1.5px solid var(--border-strong); background:var(--bg-card);
box-shadow:0 2px 6px rgba(0,0,0,.08);
min-width:0; overflow:hidden;
}
.kotoba-cat-card.active {
border-color:var(--mnn-red); background:rgba(var(--mnn-red-rgb),.07);
box-shadow:0 2px 10px rgba(var(--mnn-red-rgb),.18);
}
.kotoba-cat-icon {
width:30px; height:30px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
}
.kotoba-cat-icon svg { width:15px; height:15px; }
/* Fix: solid color bg (bukan rgba tint) supaya lebih menonjol, icon putih */
.kotoba-cat-icon.tag-verb { background:var(--accent-verb); color:#fff; }
.kotoba-cat-icon.tag-adj { background:var(--accent-adj); color:#fff; }
.kotoba-cat-icon.tag-noun { background:var(--accent-noun); color:#fff; }
.kotoba-cat-icon.tag-other { background:#8b90a0; color:#fff; }
.kotoba-cat-card.active .kotoba-cat-icon {
background:var(--mnn-red) !important; color:#fff !important;
}
.kotoba-cat-text { display:flex; flex-direction:column; gap:0; min-width:0; }
.kotoba-cat-name { font-size:11.5px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kotoba-cat-sub { font-size:9px; color:var(--text-muted); white-space:nowrap; }
/* Lainnya sits col 1 row 2; Semua Buku spans remaining 2 cols on row 2 */
.kotoba-cat-grid .kotoba-cat-card[data-cat="other"] { grid-column:1; }
.kotoba-cat-grid .kotoba-book-hero { grid-column:2 / span 2; padding:9px 12px; }
/* Book hero — "Semua Buku" navy ornament card, kini setengah lebar (span 2 col) */
.kotoba-book-hero,
.kotoba-book-hero.active {
position:relative; overflow:hidden; display:flex; align-items:center; gap:8px;
width:100%; min-width:0; padding:9px 12px; border-radius:14px; text-align:left;
background:linear-gradient(135deg, var(--mnn-navy) 0%, var(--mnn-navy-dark) 100%);
border:1.5px solid rgba(255,255,255,.08); color:#fff;
box-shadow:0 3px 10px rgba(var(--mnn-navy-rgb),.22);
}
.kotoba-book-hero.active { border-color:rgba(var(--mnn-red-rgb),.6); }
.kotoba-book-hero-ornament {
position:absolute; inset:0;
background-image:var(--mnn-ornament-bg); background-size:cover; background-position:70% center;
opacity:.4; pointer-events:none;
}
.kotoba-book-hero-icon {
position:relative; z-index:1; width:28px; height:28px; border-radius:50%; flex-shrink:0;
background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center;
}
.kotoba-book-hero-icon svg { width:14px; height:14px; }
.kotoba-book-hero-text { position:relative; z-index:1; flex:1; display:flex; flex-direction:column; gap:0; min-width:0; }
.kotoba-book-hero-title { font-size:12px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kotoba-book-hero-sub { font-size:9px; color:rgba(255,255,255,.65); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kotoba-book-hero-arrow { position:relative; z-index:1; font-size:16px; color:rgba(255,255,255,.5); }
/* [Fix] Buku I/II/III — default (belum dipilih) = merah solid; dipilih (active) = ornamen navy gelap */
.kotoba-book-card {
position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center;
gap:7px; width:100%; flex:none; min-width:0;
padding:11px; border-radius:16px; border:1.5px solid rgba(var(--mnn-red-rgb),.3);
background:var(--mnn-red);
color:#fff; font-size:13px; font-weight:700;
box-shadow:0 3px 10px rgba(var(--mnn-red-rgb),.25);
}
.kotoba-book-card svg { position:relative; z-index:1; width:16px; height:16px; flex-shrink:0; }
.kotoba-book-card span:not(.kotoba-book-card-ornament) { position:relative; z-index:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.kotoba-book-card-ornament { display:none; }
.kotoba-book-card.active {
background:linear-gradient(135deg, var(--mnn-navy) 0%, var(--mnn-navy-dark) 100%);
border-color:rgba(255,255,255,.08); color:#fff;
box-shadow:0 3px 10px rgba(var(--mnn-navy-rgb),.22);
}
.kotoba-book-card.active .kotoba-book-card-ornament {
display:block; position:absolute; inset:0;
background-image:var(--mnn-ornament-bg); background-size:cover; background-position:60% center;
opacity:.4; pointer-events:none;
}
.kotoba-book-card.locked { opacity:.55; }
/* Vocab list item — v3.8 redesign (badge corner, listen button, star) */
.vocab-item-badge {
position:absolute; top:9px; left:12px; z-index:1;
font-size:9px; font-weight:800; padding:2px 7px; border-radius:6px;
background:rgba(255,255,255,.14); color:#ff8a75;
letter-spacing:.03em;
}
.vocab-listen-btn {
display:inline-flex; align-items:center; gap:4px; margin-top:3px;
background:none; border:none; padding:0; cursor:pointer;
font-size:10.5px; font-weight:700; color:#ff8a75;
font-family:'DM Sans',sans-serif;
}
.vocab-listen-btn:active { opacity:.6; }
/* [ADD] Wrapper pojok kanan-atas: tombol Hafal + Favorit bersebelahan */
.vocab-item-actions {
position:absolute; top:9px; right:10px; z-index:1;
display:flex; align-items:center; gap:7px;
}
.vocab-fav-btn {
position:static;
background:none; border:none; cursor:pointer; font-size:14px; padding:2px;
transition:opacity .15s ease;
}
/* [ADD] Tombol toggle "Sudah Hafal" di Kotoba — base .vocab-hafal-btn sudah ada
(sama persis punya Materi), ini cuma override utk kartu navy gelap */
#page-kotoba .vocab-hafal-btn { border-color:rgba(255,255,255,.4); background:transparent; }
#page-kotoba .vocab-hafal-btn.is-learned { background:#34d399; border-color:#34d399; }
/* [ADD] Filter "Semua / Belum Hafal / Sudah Hafal" utk list kosakata Kotoba */
.kotoba-mastery-chips { display:flex; gap:7px; }
.kotoba-mastery-chip {
flex:1; min-width:0; padding:7px 4px; border-radius:11px; border:1.5px solid var(--border-strong);
background:var(--bg-card); color:var(--text-muted); font-size:11px; font-weight:700;
font-family:'DM Sans',sans-serif; cursor:pointer; text-align:center; transition:all .15s ease;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.kotoba-mastery-chip.active { border-color:var(--mnn-red); background:rgba(var(--mnn-red-rgb),.08); color:var(--mnn-red); }
.kotoba-book-btn.locked { opacity:.75; }
.kotoba-book-btn.locked::after {
content:'🔒'; font-size:10px; margin-left:4px; opacity:.8;
}
.kotoba-book-btn.locked.active {
background:var(--bg-elevated); border-color:var(--border-strong); color:var(--text-secondary);
box-shadow:none;
}
/* [REDESIGN v4.0] Action row (Flashcard/Review/Favorit/Acak) — list-card:
kotak icon warna + judul/subtitle + chevron, bukan pill solid merah lagi */
.kotoba-action-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.kotoba-action-card {
display:flex; align-items:center; gap:10px;
padding:10px 12px; border-radius:14px;
border:1px solid var(--border); background:var(--bg-card);
cursor:pointer; transition:all .15s ease; text-align:left;
box-shadow:0 2px 6px rgba(0,0,0,.06);
min-width:0;
}
.kotoba-action-card:active { transform:scale(.97); background:var(--bg-card-hover); }
.kotoba-action-card-icon {
width:34px; height:34px; border-radius:10px; flex-shrink:0; color:#fff;
display:flex; align-items:center; justify-content:center;
}
.kotoba-action-card-icon svg { width:17px; height:17px; }
.kotoba-action-card-text { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.kotoba-action-card-title { font-size:12.5px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kotoba-action-card-sub { font-size:9.5px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kotoba-action-card-chev { font-size:16px; color:var(--text-muted); opacity:.5; flex-shrink:0; }
.kotoba-lesson-badge {
display:inline-block; padding:2px 8px; border-radius:6px;
background:rgba(var(--accent-t1-rgb),.12); border:1px solid rgba(var(--accent-t1-rgb),.2);
font-size:9px; font-weight:700; color:var(--accent-primary);
letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px;
font-family:'DM Sans',sans-serif;
}
.kotoba-cat-dot {
display:inline-block; width:7px; height:7px; border-radius:50%;
margin-left:4px; flex-shrink:0; align-self:center;
}
.kotoba-group-header {
font-size:11px; font-weight:700; color:var(--text-muted);
letter-spacing:.08em; text-transform:uppercase;
padding:6px 2px 4px; border-bottom:1px solid var(--border);
margin-bottom:4px;
}
/* ═══════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════
8c. SOCIAL / ABOUT SECTION
═══════════════════════════════════════════════════ */
.about-card {
background:var(--bg-card); border:1px solid var(--border);
border-radius:22px; padding:20px 18px;
display:flex; flex-direction:column; gap:16px;
}
.about-app-title {
font-size:18px; font-weight:800; color:var(--text-primary);
font-family:'DM Sans',sans-serif;
margin-bottom:4px; display:flex; align-items:center; gap:8px;
}
.about-app-logo { width:24px; height:24px; border-radius:7px; object-fit:cover; flex-shrink:0; }
.about-maker {
font-size:12px; color:var(--text-muted);
font-weight:500;
}
.about-maker span { color:var(--mnn-navy-fg); font-weight:700; }
.social-grid {
display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.social-btn {
display:flex; align-items:center; gap:10px;
padding:12px 14px; border-radius:18px;
border:1.5px solid var(--border-strong); background:var(--bg-elevated);
cursor:pointer; transition:all .18s ease;
text-decoration:none; color:inherit;
}
.social-btn:active { transform:scale(.97); opacity:.85; }
.social-btn-icon {
flex-shrink:0; width:34px; height:34px; border-radius:10px;
display:flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.5);
}
.social-btn-icon svg { width:18px; height:18px; }
[data-theme="dark"] .social-btn-icon { background:rgba(255,255,255,.06); }
.social-btn-label { font-size:12px; font-weight:700; color:var(--text-primary); font-family:'DM Sans',sans-serif; }
.social-btn-sub { font-size:10px; color:var(--text-muted); margin-top:1px; }
.social-btn.fb { border-color:rgba(59,89,152,.3); background:rgba(59,89,152,.06); }
.social-btn.fb .social-btn-icon { color:#3b5998; }
.social-btn.ig { border-color:rgba(236,72,153,.3); background:rgba(236,72,153,.06); }
.social-btn.ig .social-btn-icon { color:#d6249f; }
.social-btn.tt { border-color:rgba(20,20,20,.4); background:rgba(0,0,0,.03); }
.social-btn.tt .social-btn-icon { color:#1a1a1a; }
[data-theme="dark"] .social-btn.tt .social-btn-icon { color:#e5e5e5; }
.social-btn.wa { border-color:rgba(37,211,102,.3); background:rgba(37,211,102,.06); }
.social-btn.wa .social-btn-icon { color:#25d366; }
/* Dark mode: badge & card lebih pekat/menyala biar ngga nyatu ke background gelap */
[data-theme="dark"] .social-btn.fb { border-color:rgba(107,142,214,.4); background:rgba(107,142,214,.13); }
[data-theme="dark"] .social-btn.fb .social-btn-icon { background:rgba(107,142,214,.26); color:#8fb0f0; }
[data-theme="dark"] .social-btn.ig { border-color:rgba(240,101,178,.4); background:rgba(240,101,178,.13); }
[data-theme="dark"] .social-btn.ig .social-btn-icon { background:rgba(240,101,178,.26); color:#f472b6; }
[data-theme="dark"] .social-btn.tt { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08); }
[data-theme="dark"] .social-btn.tt .social-btn-icon { background:rgba(255,255,255,.18); color:#f5f5f5; }
[data-theme="dark"] .social-btn.wa { border-color:rgba(52,211,153,.4); background:rgba(52,211,153,.13); }
[data-theme="dark"] .social-btn.wa .social-btn-icon { background:rgba(52,211,153,.26); color:#34d399; }
/* ═══════════════════════════════════════════════════
9. CATEGORY LEGEND
═══════════════════════════════════════════════════ */
.category-legend { display:flex; gap:8px; flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px; font-size:11px; font-weight:600; border:1px solid transparent; }
.legend-noun { background:rgba(74,158,255,.1); border-color:rgba(74,158,255,.2); color:var(--accent-noun); }
.legend-verb { background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.2); color:var(--accent-verb); }
.legend-adj { background:rgba(251,146,60,.1); border-color:rgba(251,146,60,.2); color:var(--accent-adj); }
.legend-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
/* ═══════════════════════════════════════════════════
9b. QUIZ HUB
═══════════════════════════════════════════════════ */
/* Context header — breadcrumb pills + big title, mirrors current lesson context */
.quiz-context-header { display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.quiz-crumb-row { display:flex; align-items:center; gap:6px; }
.quiz-crumb-pill {
font-size:11px; font-weight:800; padding:3px 10px; border-radius:99px;
background:rgba(var(--mnn-red-rgb),.14); color:var(--mnn-red);
font-family:'DM Sans',sans-serif; letter-spacing:.01em;
}
.quiz-crumb-pill.muted { background:var(--bg-elevated); color:var(--text-secondary); }
.quiz-context-title { font-size:20px; font-weight:800; color:var(--text-primary); line-height:1.25; letter-spacing:-.3px; }
/* Mode cards — Quiz Kosakata / Kanji Learn, always-colored brand cards */
.quiz-mode-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; flex-shrink:0; }
.quiz-hub-tab {
display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:6px;
padding:20px 16px; border-radius:20px; border:1px solid rgba(255,255,255,.1); cursor:pointer; min-height:88px;
font-family:'DM Sans',sans-serif; text-align:left; color:#fff;
transition:transform .16s ease, box-shadow .18s ease; position:relative; overflow:hidden;
background:linear-gradient(135deg, var(--mnn-navy) 0%, var(--mnn-navy-dark) 100%);
box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.quiz-hub-tab[data-hub="vocab"] {
background:linear-gradient(135deg, var(--mnn-red) 0%, var(--mnn-red-dark) 100%);
box-shadow:0 8px 22px rgba(var(--mnn-red-rgb),.3);
}
.quiz-hub-tab::before {
content:''; position:absolute; inset:0;
background-image:var(--mnn-ornament-bg); background-size:cover; background-position:70% center; background-repeat:no-repeat;
opacity:.35; pointer-events:none;
}
.quiz-hub-tab > * { position:relative; z-index:1; }
.quiz-hub-tab:active { transform:scale(.98); }
.quiz-hub-tab.active { box-shadow:0 6px 22px rgba(0,0,0,.28); }
.quiz-hub-tab.active::after {
content:''; position:absolute; inset:0; border-radius:20px;
border:2px solid rgba(255,255,255,.55); pointer-events:none;
}
.quiz-mode-title { font-size:16px; font-weight:800; color:#fff; }
.quiz-mode-sub { font-size:11.5px; color:rgba(255,255,255,.72); font-weight:500; }
/* "Pilih Sumber Soal" row + book chips */
.quiz-book-tabs-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.quiz-book-tab {
display:flex; align-items:center; justify-content:center; gap:6px;
padding:9px 10px; border-radius:13px;
border:1.5px solid var(--border-strong); background:var(--bg-elevated);
color:var(--text-secondary); font-size:12px; font-weight:700;
font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .18s ease; text-align:center;
white-space:nowrap; min-width:0;
}
.quiz-book-tab svg { width:15px; height:15px; flex-shrink:0; color:var(--tab-accent, var(--mnn-red)); }
.quiz-book-tab span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quiz-book-tab.active { background:rgba(var(--mnn-red-rgb),.14); border-color:var(--mnn-red); color:var(--mnn-red); }
.quiz-book-tab.active svg { color:var(--mnn-red); }
.quiz-book-tab.quiz-reset-btn {
color:var(--text-muted);
}
.quiz-book-tab.quiz-reset-btn svg { color:var(--text-muted); }
/* Chapter list items */
.quiz-chapter-item {
display:flex; align-items:center; gap:12px; padding:13px 15px;
background:var(--bg-card); border:1.5px solid var(--border); border-radius:20px;
cursor:pointer; transition:all .16s ease; font-family:'DM Sans',sans-serif;
box-shadow:var(--shadow-card);
}
.quiz-chapter-item:active { transform:scale(.98); }
/* Selected (currently browsed) chapter — navy brand highlight, same language as dashboard cards */
.quiz-chapter-item.selected {
background:linear-gradient(135deg, var(--mnn-navy) 0%, var(--mnn-navy-dark) 100%);
border-color:transparent; box-shadow:0 4px 16px rgba(var(--mnn-navy-rgb),.26);
position:relative; overflow:hidden;
}
.quiz-chapter-item.selected::before {
content:''; position:absolute; inset:0;
background-image:var(--mnn-ornament-bg); background-size:cover; background-position:65% center; background-repeat:no-repeat;
opacity:.4; pointer-events:none;
}
.quiz-chapter-item.selected > * { position:relative; z-index:1; }
.quiz-chapter-item.selected .quiz-chapter-title { color:#fff; }
.quiz-chapter-item.selected .quiz-chapter-count { color:rgba(255,255,255,.65); }
.quiz-chapter-item.selected .quiz-chapter-check { color:#fff; }
.quiz-chapter-item.selected .quiz-chapter-badge { background:rgba(255,255,255,.22); color:#fff; }
/* "Semua Pelajaran" — always-premium banner card */
.quiz-chapter-item.premium-banner {
background:linear-gradient(135deg, var(--mnn-navy) 0%, var(--mnn-navy-dark) 100%);
border-color:transparent; box-shadow:0 4px 16px rgba(var(--mnn-navy-rgb),.26);
position:relative; overflow:hidden;
}
.quiz-chapter-item.premium-banner::before {
content:''; position:absolute; inset:0;
background-image:var(--mnn-ornament-bg); background-size:cover; background-position:65% center; background-repeat:no-repeat;
opacity:.4; pointer-events:none;
}
.quiz-chapter-item.premium-banner > * { position:relative; z-index:1; }
.quiz-chapter-item.premium-banner .quiz-chapter-title { color:#fff; }
.quiz-chapter-item.premium-banner .quiz-chapter-badge { background:rgba(255,255,255,.2); color:#fff; }
.quiz-chapter-item.premium-banner .quiz-chapter-count { color:var(--mnn-red); font-weight:800; }
.quiz-chapter-item.premium-banner .quiz-chapter-check,
.quiz-chapter-item.premium-banner .quiz-item-chevron { color:rgba(255,255,255,.55); }
.quiz-premium-pill {
font-size:9px; font-weight:800; color:#fbbf24; background:rgba(251,191,36,.16);
border-radius:99px; padding:2px 7px; margin-left:6px; letter-spacing:.02em; white-space:nowrap;
}
/* Locked (non-premium) chapters */
.quiz-chapter-item.locked { opacity:.6; }
.quiz-chapter-item.locked .quiz-chapter-badge { background:var(--bg-elevated); color:var(--text-muted); }
/* Number badge (circle) */
.quiz-chapter-badge {
width:34px; height:34px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:800; font-family:'Noto Sans JP',sans-serif;
background:rgba(var(--mnn-red-rgb),.12); color:var(--mnn-red);
}
.quiz-chapter-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.quiz-chapter-title { font-size:13.5px; font-weight:700; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quiz-chapter-count { font-size:11px; color:var(--text-muted); font-weight:600; flex-shrink:0; white-space:nowrap; }
.quiz-item-chevron { font-size:16px; color:var(--text-muted); flex-shrink:0; opacity:.7; }
.quiz-chapter-check { display:none; }
/* Kanji panel */
.kanji-set-tabs { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:2px; }
.kanji-set-tab {
flex-shrink:0; padding:8px 14px; border-radius:16px;
border:1.5px solid var(--border-strong); background:var(--bg-elevated);
color:var(--text-secondary); font-size:12px; font-weight:700;
font-family:'DM Sans',sans-serif; cursor:pointer; white-space:nowrap; transition:all .18s;
}
.kanji-set-tab.active { background:var(--accent-primary); border-color:var(--accent-primary); color:#0f0f1e; }
.kanji-mode-tabs { display:flex; gap:8px; }
.kanji-mode-tab {
flex:1; min-width:0; padding:10px 6px; border-radius:16px; text-align:center;
border:1.5px solid var(--mnn-red); background:var(--mnn-red);
color:#fff; font-size:12px; font-weight:700;
font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .18s;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
position:relative;
}
.kanji-mode-tab > span { position:relative; z-index:1; }
.kanji-mode-tab.active {
background:linear-gradient(135deg, var(--mnn-navy) 0%, var(--mnn-navy-dark) 100%);
border-color:rgba(255,255,255,.08);
}
.kanji-mode-tab.active::before {
content:''; position:absolute; inset:0;
background-image:var(--mnn-ornament-bg); background-size:cover; background-position:70% center;
opacity:.35; pointer-events:none;
}
/* [ADD] Tombol "Mode Pertanyaan" di Tes Kanji — icon badge + judul/sub, bukan pill kompak */
.kanji-mode-question-btn {
flex:none; width:100%; height:auto; min-width:0;
padding:12px 14px; text-align:left; display:flex; align-items:center; gap:10px;
border-radius:14px; white-space:normal;
background:var(--bg-card); border:2px solid var(--mnn-red);
}
.kanji-mode-question-icon {
width:36px; height:36px; border-radius:11px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
}
.kanji-mode-question-icon svg { width:18px; height:18px; }
.kanji-mode-question-title { font-weight:700; color:var(--text-primary); font-size:13px; }
.kanji-mode-question-sub { font-size:11px; color:var(--text-muted); margin-top:2px; }
/* Kanji flashcard */
.kanji-card-scene { flex:1; min-height:220px; max-height:340px; cursor:pointer; perspective:900px; width:100%; }
.kanji-card-inner { width:100%; height:100%; min-height:220px; position:relative; transform-style:preserve-3d; transition:transform .45s ease; }
.kanji-card-inner.flipped { transform:rotateY(180deg); }
.kanji-face {
position:absolute; inset:0; backface-visibility:hidden;
background:var(--bg-card); border:1.5px solid var(--border); border-radius:26px;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
padding:20px; box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.kanji-face.back { transform:rotateY(180deg); }
.kanji-char { font-family:'Noto Sans JP',sans-serif; font-size:88px; font-weight:700; color:var(--text-primary); line-height:1.1; }
.kanji-reading { font-family:'Noto Sans JP',sans-serif; font-size:22px; color:var(--accent-primary); font-weight:600; }
.kanji-meaning { font-size:16px; color:var(--text-secondary); font-weight:500; text-align:center; }
.kanji-set-pip { font-size:10px; font-weight:800; color:var(--text-muted); letter-spacing:.08em; background:var(--bg-elevated); padding:3px 8px; border-radius:6px; }
.kanji-hafal-pip { font-size:10px; font-weight:800; color:var(--accent-verb); letter-spacing:.06em; background:rgba(52,211,153,.1); padding:3px 8px; border-radius:6px; display:none; }
.kanji-hafal-pip.show { display:block; }
.kanji-flip-hint { font-size:11px; color:var(--text-muted); opacity:.6; }
.kanji-nav-row { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.kanji-btn-prev, .kanji-btn-next { flex:1; padding:11px; border-radius:16px; background:var(--bg-card); border:1px solid var(--border); color:var(--text-secondary); font-size:13px; font-weight:700; cursor:pointer; transition:all .15s; font-family:'DM Sans',sans-serif; }
.kanji-btn-prev:active, .kanji-btn-next:active { transform:scale(.97); }
.kanji-btn-hafal { flex:2; padding:11px; border-radius:16px; background:var(--bg-card); border:1.5px solid var(--border-strong); color:var(--text-secondary); font-size:13px; font-weight:700; cursor:pointer; transition:all .18s; font-family:'DM Sans',sans-serif; text-align:center; }
.kanji-btn-hafal.active { background:rgba(52,211,153,.15); border-color:rgba(52,211,153,.4); color:var(--accent-verb); }
.kanji-list-item {
display:flex; align-items:center; gap:12px; padding:11px 14px;
background:var(--bg-card); border:1px solid var(--border); border-radius:18px;
margin-bottom:8px; cursor:pointer; transition:background .15s;
}
.kanji-list-item.is-hafal { border-color:rgba(52,211,153,.25); }
.kanji-list-kj { font-family:'Noto Sans JP',sans-serif; font-size:22px; font-weight:700; color:var(--text-primary); width:36px; text-align:center; flex-shrink:0; }
.kanji-list-info { flex:1; min-width:0; }
.kanji-list-rd { font-size:12px; color:var(--accent-primary); font-weight:600; }
.kanji-list-mn { font-size:12px; color:var(--text-secondary); }
.kanji-list-chk { font-size:14px; color:var(--accent-verb); }
/* ═══════════════════════════════════════════════════
10. QUIZ
═══════════════════════════════════════════════════ */
.quiz-card { background:var(--bg-card); border:1px solid var(--border-strong); border-radius:24px; padding:24px; box-shadow:var(--shadow-float); }
.quiz-question { text-align:center; margin-bottom:20px; }
.quiz-jp { font-family:'Noto Sans JP',sans-serif; font-size:40px; font-weight:700; color:var(--text-primary); line-height:1.3; }
.quiz-subtext { font-size:12px; color:var(--text-muted); margin-top:6px; font-style:italic; }
.quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.quiz-option {
padding:14px 12px; border-radius:18px; border:1.5px solid var(--border-strong);
background:var(--bg-elevated); color:var(--text-primary); font-size:14px; font-weight:500;
font-family:'DM Sans',sans-serif; cursor:pointer; text-align:center; transition:all .18s ease;
}
.quiz-option:active { transform:scale(.97); }
.quiz-option.correct { border-color:var(--accent-success); background:rgba(52,211,153,.12); color:var(--accent-success); }
.quiz-option.wrong { border-color:var(--accent-danger); background:rgba(248,113,113,.1); color:var(--accent-danger); }
.quiz-progress-bar { height:4px; background:var(--border-strong); border-radius:99px; overflow:hidden; margin-bottom:16px; }
.quiz-progress-fill { height:100%; background:var(--accent-primary); border-radius:99px; transition:width .4s ease; }
.quiz-score { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.score-badge { padding:4px 12px; border-radius:99px; font-size:12px; font-weight:700; background:rgba(var(--accent-t1-rgb),.12); color:var(--accent-primary); }
.quiz-result { text-align:center; padding:8px 0; }
.result-emoji { font-size:56px; margin-bottom:12px; display:block; }
.result-score { font-size:42px; font-weight:800; color:var(--text-primary); }
.result-label { font-size:14px; color:var(--text-secondary); margin-top:6px; margin-bottom:20px; }
/* ═══════════════════════════════════════════════════
11. SETTINGS
═══════════════════════════════════════════════════ */
.settings-section { background:var(--bg-card); border:1px solid var(--border); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-card); }
.settings-item { display:flex; align-items:center; gap:14px; padding:15px 18px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s ease; }
.settings-item:last-child { border-bottom:none; }
.settings-item:active { background:var(--bg-card-hover); }
.settings-icon { width:36px; height:36px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.icon-purple { background:rgba(var(--accent-t1-rgb),.15); }
.icon-blue { background:rgba(74,158,255,.15); }
.icon-green { background:rgba(52,211,153,.15); }
.icon-orange { background:rgba(251,146,60,.15); }
.icon-red { background:rgba(248,113,113,.15); }
.settings-text { flex:1; }
.settings-label { font-size:15px; font-weight:500; color:var(--text-primary); }
.settings-desc { font-size:12px; color:var(--text-muted); margin-top:2px; }
.settings-arrow { color:var(--text-muted); font-size:13px; }
.toggle-switch { width:44px; height:26px; border-radius:13px; border:none; cursor:pointer; position:relative; transition:background .25s ease; flex-shrink:0; }
.toggle-switch.on { background:var(--accent-primary); }
.toggle-switch.off { background:var(--border-strong); }
.toggle-switch::after { content:''; position:absolute; width:20px; height:20px; background:white; border-radius:50%; top:3px; transition:left .25s cubic-bezier(.4,0,.2,1); box-shadow:0 2px 6px rgba(0,0,0,.22); }
.toggle-switch.on::after { left:21px; }
.toggle-switch.off::after { left:3px; }
.accent-theme-switch { display:flex; gap:4px; background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:16px; padding:3px; flex-shrink:0; }
.accent-theme-opt { width:32px; height:32px; border-radius:9px; border:none; background:transparent; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s cubic-bezier(.4,0,.2,1); opacity:.55; }
.accent-theme-opt.active { background:var(--bg-card); opacity:1; box-shadow:0 2px 8px rgba(0,0,0,.12); transform:scale(1.05); }
.accent-theme-opt:active { transform:scale(.92); }
/* ═══════════════════════════════════════════════════
12. DASHBOARD
═══════════════════════════════════════════════════ */
.dashboard-greeting {
position:relative; overflow:hidden; border-radius:20px;
padding:16px 18px; margin-bottom:12px; min-height:108px;
background-image:
linear-gradient(100deg, var(--bg-base) 0%, rgba(var(--mnn-navy-rgb),.02) 40%, rgba(0,0,0,0) 65%),
url("assets/ornament-light.jpeg");
background-size: 100% 100%, cover;
background-position: center, 60% 42%;
background-repeat: no-repeat, no-repeat;
border:1px solid var(--border);
box-shadow:var(--shadow-card);
}
[data-theme="dark"] .dashboard-greeting {
background-image:
linear-gradient(100deg, var(--bg-base) 0%, rgba(var(--mnn-navy-rgb),.05) 40%, rgba(0,0,0,0) 65%),
url("assets/ornament-dark.jpeg");
}
.dashboard-greeting-text { position:relative; z-index:1; max-width:62%; }
.greeting-sub { font-size:13px; color:var(--text-muted); font-weight:500; margin-bottom:4px; }
.greeting-main { font-family:'Noto Sans JP',sans-serif; font-size:22px; font-weight:700; color:var(--text-primary); line-height:1.3; }
.greeting-main span { color:var(--mnn-red); }
[data-theme="dark"] .greeting-main span {
color: var(--mnn-red);
filter: saturate(1.6);
}
/* Saturasi dinaikin di semua angka/label headline (glow dihapus sesuai request) */
[data-theme="dark"] .stat-value,
[data-theme="dark"] .progress-ring .ring-label,
[data-theme="dark"] .progress-bar-pct,
[data-theme="dark"] .bdetail-progress-label,
[data-theme="dark"] .chapter-progress-pct,
[data-theme="dark"] .roadmap-step-pct,
[data-theme="dark"] .book-btn.active .book-progress-text,
[data-theme="dark"] .materi-progress-item-pct,
[data-theme="dark"] .kotoba-hero-progress-value {
filter: saturate(1.6);
}
.greeting-tagline { font-size:11.5px; color:var(--text-muted); margin-top:4px; }
.dashboard-greeting-ornament { display:none; }
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.stats-grid .stat-card {
position:relative; overflow:hidden;
background:var(--bg-card); border:1px solid var(--border); border-radius:18px;
padding:12px 4px 16px; text-align:center; box-shadow:var(--shadow-card);
display:flex; flex-direction:column; align-items:center; justify-content:center;
min-height:108px;
}
.stats-grid .stat-card::after {
content:''; position:absolute; left:0; right:0; bottom:0; height:13px;
background:var(--stat-accent, var(--mnn-navy));
opacity:.9;
-webkit-mask-image:url("data:image/svg+xml;utf8,");
mask-image:url("data:image/svg+xml;utf8,");
-webkit-mask-size:100% 100%; mask-size:100% 100%;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.stat-card-icon-badge {
width:34px; height:34px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
font-size:16px; line-height:1; margin-bottom:6px;
}
.stat-card-icon-badge svg { width:18px; height:18px; }
.stats-grid .stat-value { font-size:19px; font-weight:800; line-height:1; }
.stats-grid .stat-label { font-size:11.5px; font-weight:700; color:var(--text-primary); margin-top:4px; }
.stat-sub { font-size:9.5px; color:var(--text-muted); font-weight:500; margin-top:1px; }
.stat-value { font-size:26px; font-weight:800; line-height:1; margin-bottom:4px; }
.stat-label { font-size:11px; color:var(--text-muted); font-weight:500; }
.progress-bar-wrap {
position:relative; overflow:hidden;
background:linear-gradient(135deg, #e0453a 0%, var(--mnn-red) 55%, var(--mnn-red-dark) 100%);
border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:18px;
box-shadow:0 8px 24px rgba(var(--mnn-red-rgb),.35);
}
.progress-bar-ornament { display:none; }
.progress-bar-header { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.progress-bar-title { display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:700; color:#fff; }
.progress-bar-icon {
width:38px; height:38px; border-radius:50%; flex-shrink:0;
display:inline-flex; align-items:center; justify-content:center; font-size:17px;
background:rgba(255,255,255,.18); color:#fff;
}
.progress-bar-pct { position:relative; z-index:1; font-size:17px; font-weight:800; color:#fff; }
.progress-bar-track { position:relative; z-index:1; height:9px; background:rgba(255,255,255,.22); border-radius:99px; overflow:hidden; }
.progress-bar-fill { height:100%; border-radius:99px; background:#fff; transition:width .7s cubic-bezier(.4,0,.2,1); }
.progress-bar-sub { position:relative; z-index:1; font-size:11.5px; color:rgba(255,255,255,.75); margin-top:8px; }
/* Book buttons */
.book-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.book-btn {
position:relative; overflow:hidden;
background: var(--bg-card);
border:2px solid var(--border); border-radius:20px;
padding:16px 12px; cursor:pointer; text-align:center; color:var(--text-primary);
transition:all .18s ease; box-shadow:var(--shadow-card);
}
.book-btn.active { border-color:var(--mnn-red); }
.book-btn:active { transform:scale(.98); }
.book-btn .book-emoji {
font-size:20px; margin:0 auto 8px; width:44px; height:44px; line-height:44px;
border-radius:50%; background:rgba(var(--mnn-red-rgb),.10); color:var(--mnn-red);
box-shadow:none;
}
.book-btn:not(.active) .book-emoji { background:var(--bg-elevated); color:var(--text-muted); }
.book-btn .book-label { font-weight:800; font-size:15px; margin-bottom:1px; color:var(--text-primary); }
.book-btn.active .book-label { color:var(--mnn-red); }
.book-btn .book-range { color:var(--text-muted); font-size:11.5px; }
.book-progress-row, .book-progress-text { display:none; }
.book-btn.active .book-progress-row { display:block; margin-top:10px; }
.book-btn.active .book-progress-text { display:block; font-size:11px; font-weight:700; color:var(--mnn-red); margin-top:5px; }
.book-progress-bar { height:5px; background:var(--border-strong); border-radius:99px; overflow:hidden; }
.book-progress-fill { height:100%; background:var(--mnn-red); border-radius:99px; transition:width .5s ease; }
/* Chapter list */
.chapter-list { display:flex; flex-direction:column; gap:8px; }
.chapter-card {
display:flex; align-items:center; gap:12px; padding:12px 14px;
background: var(--bg-card);
border:1px solid var(--border); border-radius:18px;
cursor:pointer; transition:all .18s ease; box-shadow:var(--shadow-card);
position:relative; overflow:hidden;
}
.chapter-card > * { position:relative; z-index:1; }
.chapter-card:active { transform:scale(.99); }
.chapter-card.active { border-color:var(--mnn-red); background:rgba(var(--mnn-red-rgb),.05); }
.chapter-num {
width:32px; height:32px; border-radius:50% !important; display:flex; align-items:center; justify-content:center;
font-size:12.5px; font-weight:800; flex-shrink:0; font-family:'Noto Sans JP',sans-serif;
background:var(--bg-elevated) !important;
color:var(--text-secondary) !important; box-shadow:none;
}
.chapter-card.active .chapter-num { background:var(--mnn-red) !important; color:#fff !important; }
.chapter-info { flex:1; min-width:0; }
.chapter-title { font-size:13.5px; font-weight:700; color:var(--text-primary); }
.chapter-topic { font-size:11px; color:var(--text-muted); margin-top:2px; }
.chapter-progress-row { display:flex; align-items:center; gap:6px; margin-top:6px; }
.chapter-progress-bar { flex:1; height:4px; background:var(--border-strong); border-radius:99px; overflow:hidden; max-width:110px; }
.chapter-progress-fill { height:100%; background:var(--mnn-red); border-radius:99px; }
.chapter-progress-pct { font-size:10.5px; font-weight:700; color:var(--mnn-red); flex-shrink:0; min-width:28px; text-align:right; }
.chapter-arrow { color:var(--text-muted); font-size:14px; flex-shrink:0; }
/* ═══════════════════════════════════════════════════
13. BOTTOM NAVIGATION
═══════════════════════════════════════════════════ */
.bottom-nav {
position:fixed; bottom:0; left:50%; transform:translateX(-50%);
width:100%; max-width:430px;
background:var(--nav-bg);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%);
border-top:1px solid var(--border);
padding:8px 0 calc(8px + env(safe-area-inset-bottom));
z-index:90;
transition:background .35s ease, border-color .35s ease;
}
.nav-items { display:flex; align-items:center; justify-content:space-around; }
.nav-item { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 4px; cursor:pointer; position:relative; border:none; background:none; font-family:'DM Sans',sans-serif; color:var(--text-secondary); }
.nav-icon-wrap { position:relative; width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.nav-icon { transition:transform .25s cubic-bezier(.34,1.56,.64,1); line-height:1; position:relative; z-index:1; display:flex; }
.nav-icon svg { width:21px; height:21px; }
.nav-icon-wrap::before { content:''; position:absolute; inset:-4px; border-radius:16px; background:rgba(var(--accent-t1-rgb),.14); transform:scale(0); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.nav-icon-wrap::after { content:''; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%) scaleX(0); width:18px; height:3px; border-radius:99px; background:var(--accent-primary); transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.nav-item.active { color:var(--accent-primary); }
.nav-item.active .nav-icon { transform:translateY(-2px); }
.nav-item.active .nav-icon-wrap::before { transform:scale(1); }
.nav-item.active .nav-icon-wrap::after { transform:translateX(-50%) scaleX(1); }
/* Warna khas per-tab — override warna default biru di atas, pakai rgba literal (aman semua browser) */
.nav-item[data-page="dashboard"].active { color:var(--tab-dashboard); }
.nav-item[data-page="dashboard"].active .nav-icon-wrap::before { background:rgba(var(--accent-t1-rgb),.16); }
.nav-item[data-page="dashboard"].active .nav-icon-wrap::after { background:var(--tab-dashboard); }
.nav-item[data-page="materi"].active { color:var(--tab-materi); }
.nav-item[data-page="materi"].active .nav-icon-wrap::before { background:rgba(52,211,153,.16); }
.nav-item[data-page="materi"].active .nav-icon-wrap::after { background:var(--tab-materi); }
.nav-item[data-page="quiz"].active { color:var(--tab-quiz); }
.nav-item[data-page="quiz"].active .nav-icon-wrap::before { background:rgba(251,146,60,.16); }
.nav-item[data-page="quiz"].active .nav-icon-wrap::after { background:var(--tab-quiz); }
.nav-item[data-page="kotoba"].active { color:var(--tab-kotoba); }
.nav-item[data-page="kotoba"].active .nav-icon-wrap::before { background:rgba(167,139,250,.16); }
.nav-item[data-page="kotoba"].active .nav-icon-wrap::after { background:var(--tab-kotoba); }
.nav-item[data-page="kana"].active { color:var(--tab-kana); }
.nav-item[data-page="kana"].active .nav-icon-wrap::before { background:rgba(34,211,238,.16); }
.nav-item[data-page="kana"].active .nav-icon-wrap::after { background:var(--tab-kana); }
.nav-item[data-page="settings"].active { color:var(--tab-settings); }
.nav-item[data-page="settings"].active .nav-icon-wrap::before { background:rgba(148,163,184,.16); }
.nav-item[data-page="settings"].active .nav-icon-wrap::after { background:var(--tab-settings); }
.nav-item[data-page="ai-sensei"].active { color:var(--tab-sensei); }
.nav-item[data-page="ai-sensei"].active .nav-icon-wrap::before { background:rgba(244,114,182,.16); }
.nav-item[data-page="ai-sensei"].active .nav-icon-wrap::after { background:var(--tab-sensei); }
.nav-label { font-size:10px; font-weight:600; color:var(--text-muted); transition:color .2s ease; letter-spacing:.02em; }
.nav-item.active .nav-label { color:inherit; }
/* ═══════════════════════════════════════════════════
14. PAGE SECTIONS
═══════════════════════════════════════════════════ */
.page { display:none; }
.page.active { display:flex; flex-direction:column; gap:20px; }
/* ═══════════════════════════════════════════════════
15. UTILITY COMPONENTS
═══════════════════════════════════════════════════ */
.btn-primary-full {
width:100%; height:52px; border-radius:20px; border:none;
background:var(--accent-primary); color:#0f0f1e; font-size:15px; font-weight:700;
font-family:'DM Sans',sans-serif; cursor:pointer;
display:flex; align-items:center; justify-content:center; gap:8px;
transition:all .18s ease; box-shadow:0 4px 20px rgba(var(--accent-t1-rgb),.28);
}
.btn-primary-full:active { transform:scale(.98); opacity:.9; }
.btn-ghost {
display:inline-flex; align-items:center; gap:6px; padding:9px 16px;
border-radius:16px; border:1px solid var(--border-strong); background:var(--bg-elevated);
color:var(--text-secondary); font-size:13px; font-weight:600;
font-family:'DM Sans',sans-serif; cursor:pointer; transition:all .18s ease;
}
.btn-ghost:active { transform:scale(.97); }
.empty-state { text-align:center; padding:40px 20px; color:var(--text-muted); }
.empty-state-icon { font-size:40px; margin-bottom:12px; }
.empty-state-text { font-size:14px; line-height:1.5; }
/* ═══════════════════════════════════════════════════
16. ANIMATIONS
═══════════════════════════════════════════════════ */
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.page.active > * { animation:fadeSlideUp .3s ease both; }
.page.active > *:nth-child(1){animation-delay:0ms}
.page.active > *:nth-child(2){animation-delay:50ms}
.page.active > *:nth-child(3){animation-delay:100ms}
.page.active > *:nth-child(4){animation-delay:150ms}
.page.active > *:nth-child(5){animation-delay:200ms}
@keyframes pageIn { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:translateX(0)} }
.page.active { animation:pageIn .28s ease both; }
@keyframes spin { to{transform:rotate(360deg)} }
/* ═══════════════════════════════════════════════════
17. RESPONSIVE
═══════════════════════════════════════════════════ */
@media (min-width:430px) {
#app { border-left:1px solid var(--border); border-right:1px solid var(--border); }
.bottom-nav { border-left:1px solid var(--border); border-right:1px solid var(--border); }
}
/* ═══════════════════════════════════════════════════
18. DESKTOP LAYOUT (≥1024px) — Windows/PC/Laptop
Sidebar navigation pattern (Duolingo/Anki-style):
fixed left sidebar + centered max-width content column.
Mobile layout (<1024px) completely untouched.
═══════════════════════════════════════════════════ */
/* [LANDSCAPE FIX] Layout desktop ini SEKARANG juga aktif saat HP diputar
landscape (lebar > tinggi, tinggi terbatas) — tidak hanya saat layar
beneran >= 1024px. Supaya seluruh app (bukan cuma AI JFT Simulation)
berubah ke mode desktop saat diputar. */
@media (min-width: 1024px),
(orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
body {
display: flex;
justify-content: center;
background: var(--bg-base);
}
/* #app becomes a row: [sidebar] [app-main-col] */
#app {
max-width: 1180px;
width: 100%;
flex-direction: row;
align-items: flex-start;
border: none !important;
gap: 0;
}
/* Header+main wrapper becomes the flexible right column.
On mobile this div has zero effect (default block flow). */
.app-main-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
/* ── Sidebar (re-skinned .bottom-nav) ──
order:-1 visually places it before .app-main-col
without moving its position in the HTML/tab order. */
.bottom-nav {
order: -1;
position: sticky;
top: 0;
left: auto;
transform: none;
width: 232px;
max-width: 232px;
height: 100dvh;
flex-shrink: 0;
border-top: none;
border-left: none !important;
border-right: 1px solid var(--border);
padding: 24px 14px;
display: flex;
align-items: flex-start;
overflow: hidden;
transition: width .22s ease, padding .22s ease, opacity .18s ease, border-color .18s ease;
}
/* Sidebar collapsed state */
#app.sidebar-collapsed .bottom-nav {
width: 0; max-width: 0; padding-left: 0; padding-right: 0;
opacity: 0; border-right-color: transparent; pointer-events: none;
}
.btn-sidebar-toggle {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
border: 1px solid var(--border); background: var(--bg-card);
color: var(--text-secondary); cursor: pointer; margin-right: 4px;
}
.btn-sidebar-toggle:hover { background: var(--bg-card-hover); }
.btn-sidebar-toggle svg { width: 17px; height: 17px; }
.nav-items {
flex-direction: column;
align-items: stretch;
justify-content: flex-start;
gap: 4px;
width: 100%;
}
.nav-item {
flex-direction: row;
justify-content: flex-start;
gap: 12px;
padding: 11px 14px;
border-radius: 16px;
transition: background .2s ease;
}
.nav-item:hover { background: var(--bg-card-hover); }
.nav-item.active { background: rgba(var(--accent-t1-rgb),.12); }
.nav-icon-wrap { width: 22px; height: 22px; }
.nav-icon-wrap::before { display: none; }
.nav-icon-wrap::after { display: none; }
.nav-item.active .nav-icon { transform: none; }
.nav-label {
font-size: 14px;
font-weight: 600;
order: 2;
}
/* ── Content column: comfortable reading width ── */
.main-content {
max-width: 760px;
width: 100%;
margin: 0 auto;
padding: 28px 32px 60px;
gap: 24px;
}
.header { padding: 16px 32px; }
.header-inner { max-width: 760px; margin: 0 auto; }
/* ── Profile page: comfortable reading width on desktop/landscape ── */
#page-profile #profile-panel-inner {
max-width: 720px;
margin: 0 auto;
width: 100%;
}
}
/* Theme icon toggle */
.icon-sun { display:none; }
.icon-moon { display:flex; align-items:center; justify-content:center; color:#ffffff; }
[data-theme="light"] .icon-sun { display:flex; align-items:center; justify-content:center; }
[data-theme="light"] .icon-moon { display:none; }
/* Info banner */
.info-banner { background:linear-gradient(135deg,rgba(var(--accent-t1-rgb),.12),rgba(74,158,255,.08)); border:1px solid rgba(var(--accent-t1-rgb),.2); border-radius:20px; padding:14px 16px; }
.info-banner-title { font-size:13px; font-weight:700; color:var(--accent-primary); margin-bottom:4px; }
.info-banner-text { font-size:12px; color:var(--text-secondary); line-height:1.55; }
/* Chapter selector */
.chapter-select-row { display:flex; align-items:center; gap:8px; margin-bottom:2px; overflow:hidden; width:100%; }
.chapter-select-label { font-size:12px; color:var(--text-muted); font-weight:500; flex-shrink:0; }
select.chapter-picker { flex:1; min-width:0; max-width:100%; padding:8px 10px; border-radius:12px; border:1px solid var(--border-strong); background:var(--bg-card); color:var(--text-primary); font-size:13px; font-family:'DM Sans',sans-serif; font-weight:500; outline:none; cursor:pointer; overflow:hidden; text-overflow:ellipsis; }
/* Search input */
.search-input {
width:100%; padding:12px 16px; border-radius:18px;
border:1px solid var(--border-strong); background:var(--bg-card);
color:var(--text-primary); font-size:14px; font-family:'DM Sans',sans-serif;
outline:none; transition:border-color .2s ease;
}
.search-input:focus { border-color:rgba(var(--accent-t1-rgb),.4); }
/* ═══════════════════════════════════════════════════
18. KANA TRAINER PAGE
═══════════════════════════════════════════════════ */
.kana-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.kana-grid.combo-grid { grid-template-columns:repeat(3,1fr); }
.kana-cell {
background:var(--bg-card); border:1.5px solid var(--border);
border-radius:12px; padding:9px 4px; text-align:center;
}
.kana-cell.mastered { background:rgba(52,211,153,.08); border-color:rgba(52,211,153,.4); }
.kana-cell.seen { background:rgba(245,158,11,.08); border-color:rgba(245,158,11,.35); }
.kana-cell-char { font-family:'Noto Sans JP',sans-serif; font-size:21px; color:var(--text-primary); }
.kana-cell-rom { font-size:9px; color:var(--text-muted); margin-top:1px; font-weight:500; }
.kana-tab-row { display:flex; gap:6px; margin-bottom:14px; }
.kana-tab { flex:1; padding:7px 0; border-radius:9px; border:1px solid var(--border-strong); background:var(--bg-card); color:var(--text-muted); cursor:pointer; font-size:13px; font-weight:700; font-family:'DM Sans',sans-serif; transition:all .2s; text-transform:capitalize; }
.kana-tab.active { border-color:var(--accent-kana); background:rgba(224,60,76,.14); color:var(--text-primary); }
.kana-cat-label { font-size:10px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; display:flex; justify-content:space-between; }
/* Kana flashcard */
.kana-flashcard {
width:100%; min-height:180px; background:var(--bg-card); border:1px solid var(--border-strong);
border-radius:26px; display:flex; flex-direction:column; align-items:center; justify-content:center;
cursor:pointer; box-shadow:var(--shadow-float); position:relative; padding:24px;
transition:all .2s;
}
.kana-flashcard .kana-big { font-family:'Noto Sans JP',sans-serif; font-size:88px; font-weight:300; line-height:1; color:var(--text-primary); }
.kana-flashcard .kana-rom-reveal { font-size:32px; font-weight:700; color:var(--accent-kana); margin-top:8px; }
/* AI Sensei */
.ai-banner { background:linear-gradient(135deg,rgba(var(--accent-t1-rgb),.1),rgba(74,158,255,.06)); border:1px solid rgba(var(--accent-t1-rgb),.2); border-radius:20px; padding:14px 16px; margin-bottom:0; }
.ai-quick-btns { display:flex; flex-wrap:wrap; gap:6px; }
.ai-quick-btn { background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:10px; padding:5px 10px; color:var(--text-muted); cursor:pointer; font-size:12px; font-family:'DM Sans',sans-serif; transition:all .15s; }
.ai-quick-btn:hover { border-color:rgba(var(--accent-t1-rgb),.3); color:var(--text-secondary); }
.ai-answer { background:var(--bg-elevated); border:1px solid var(--border-strong); border-radius:20px; padding:16px; }
.ai-answer-label { font-size:13px; font-weight:700; color:var(--accent-primary); margin-bottom:10px; display:flex; gap:6px; align-items:center; }
.ai-answer-text { color:var(--text-primary); font-size:14px; line-height:1.85; white-space:pre-wrap; }
/* Grammar view */
.grammar-item { background:var(--bg-card); border:1px solid var(--border); border-radius:18px; overflow:hidden; margin-bottom:8px; }
.grammar-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; cursor:pointer; font-size:14px; font-weight:700; color:var(--text-primary); }
.grammar-header:active { background:var(--bg-card-hover); }
.grammar-body { background:var(--bg-surface); padding:14px 16px; border-top:1px solid var(--border); color:var(--text-secondary); font-size:13px; line-height:1.95; }
/* ── Redesign v3.7.1: Row-list Bunpou (kayak vocab-item Kotoba) — ganti grid card centered ── */
.grammar-progress-summary { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
.bunpou-rows { display:flex; flex-direction:column; gap:10px; }
.bunpou-row {
display:flex; align-items:center; gap:12px;
background:linear-gradient(160deg, var(--bg-card) 0%, var(--bg-elevated) 100%);
border:2.5px solid rgba(var(--mnn-red-rgb),.55); border-radius:18px;
padding:12px 14px; cursor:pointer; min-height:64px;
transition:all .18s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-card);
}
.bunpou-row:active { transform:scale(.98); background:var(--bg-card-hover); }
.bunpou-row.br-done { border-color:rgba(52,211,153,.5); }
.bunpou-row-num {
flex-shrink:0; width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center;
background:var(--mnn-red); font-size:13px; font-weight:800; color:#fff;
box-shadow:0 2px 8px rgba(var(--mnn-red-rgb),.3);
}
.bunpou-row.br-done .bunpou-row-num { background:#34d399; box-shadow:0 2px 8px rgba(52,211,153,.3); }
.bunpou-row-body { flex:1; min-width:0; }
.bunpou-row-title {
font-family:'Noto Sans JP',sans-serif; font-size:14px; font-weight:700;
color:var(--text-primary); line-height:1.4; overflow-wrap:anywhere;
}
.bunpou-row-status { display:flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--text-muted); margin-top:3px; }
.bunpou-row-status-dot { width:7px; height:7px; border-radius:50%; background:var(--mnn-red); flex-shrink:0; }
.bunpou-row.br-done .bunpou-row-status { color:#34d399; }
.bunpou-row.br-done .bunpou-row-status-dot { background:#34d399; }
.bunpou-row-arrow { flex-shrink:0; font-size:18px; color:var(--text-muted); opacity:.6; }
.bunpou-row-check {
flex-shrink:0; width:22px; height:22px; border-radius:99px; background:#34d399; color:#0f0f1e;
font-size:11px; display:flex; align-items:center; justify-content:center; font-weight:800;
}
/* ═══════════════════════════════════════════════════
MATERI PAGE — REDESIGN (hero + picker/ring + icon tabs + dual progress)
═══════════════════════════════════════════════════ */
.materi-hero {
position:relative; overflow:hidden; border-radius:20px;
background:linear-gradient(135deg, var(--mnn-navy) 0%, var(--mnn-navy-dark) 100%);
border:1px solid rgba(255,255,255,.1);
padding:14px 15px 16px; box-shadow:0 10px 30px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.03);
}
.materi-hero::before {
content:''; position:absolute; inset:0;
background-image:var(--mnn-ornament-bg); background-size:cover; background-position:78% 28%; background-repeat:no-repeat;
opacity:.5; pointer-events:none;
}
.materi-hero::after {
content:''; position:absolute; inset:0;
background:linear-gradient(100deg, rgba(var(--mnn-navy-rgb),.92) 0%, rgba(var(--mnn-navy-rgb),.55) 55%, rgba(var(--mnn-navy-rgb),.15) 100%);
pointer-events:none;
}
.materi-hero-inner { position:relative; z-index:1; max-width:80%; }
.materi-hero-book {
display:inline-block; padding:2.5px 9px; border-radius:99px;
background:rgba(255,255,255,.16); color:#fff; font-size:9.5px; font-weight:700;
letter-spacing:.03em; margin-bottom:6px;
}
.materi-hero-lesson { color:rgba(255,255,255,.68); font-size:11px; font-weight:700; letter-spacing:.02em; }
.materi-hero-topic {
font-family:'Noto Sans JP',sans-serif; color:#fff; font-size:18px; font-weight:800;
line-height:1.25; margin-top:1px; overflow-wrap:anywhere;
}
.materi-hero-tags { display:flex; gap:5px; margin-top:8px; }
.materi-hero-tag { font-size:9px; font-weight:800; padding:2.5px 9px; border-radius:99px; letter-spacing:.02em; }
.materi-hero-tag-level { background:var(--mnn-red); color:#fff; }
.materi-hero-tag-type { background:rgba(255,255,255,.15); color:#fff; }
.materi-picker-card {
display:flex; align-items:center; gap:8px;
background:var(--bg-card); border:1px solid var(--border); border-radius:16px;
padding:9px 10px; box-shadow:var(--shadow-card);
}
.materi-picker-col { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.materi-picker-col-wide { flex:1.3; }
.materi-picker-col select.chapter-picker { flex:none; width:100%; }
.materi-picker-label { font-size:8.5px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.materi-picker-divider { width:1px; align-self:stretch; background:var(--border); flex-shrink:0; }
.materi-overall-ring { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.materi-ring.progress-ring { width:44px; height:44px; }
.materi-ring.progress-ring svg { width:44px; height:44px; }
.materi-ring .fill { stroke-dasharray:163.4; stroke-dashoffset:163.4; }
.materi-ring .ring-label { font-size:11px; }
.materi-overall-label { font-size:8px; color:var(--text-muted); font-weight:600; text-align:center; line-height:1.25; }
/* ── Custom picker trigger (replaces native