/* ============================================================
   NihonGo — App CSS
   Neo Brutalism Design System
   ============================================================ */

/* ── Custom scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #fff; border-left: 2px solid #111; }
::-webkit-scrollbar-thumb { background: #111; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #FF4D4D; }

/* ── Base typography ───────────────────────────────────────── */
body {
    font-family: 'Fredoka', 'Noto Sans JP', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.font-jp {
    font-family: 'Noto Sans JP', sans-serif;
}

/* ── Neo Brutalism utilities ───────────────────────────────── */
.neo-card {
    border: 4px solid #111111;
    border-radius: 1rem;
    box-shadow: 6px 6px 0px #111111;
    background: #fff;
    transition: box-shadow 0.15s, transform 0.15s;
}

.neo-card:hover {
    box-shadow: 2px 2px 0px #111111;
    transform: translate(4px, 4px);
}

.neo-btn {
    border: 4px solid #111111;
    border-radius: 0.75rem;
    box-shadow: 4px 4px 0px #111111;
    font-weight: 900;
    transition: box-shadow 0.15s, transform 0.15s;
    cursor: pointer;
}

.neo-btn:hover {
    box-shadow: 0px 0px 0px #111111;
    transform: translate(4px, 4px);
}

.neo-btn:active {
    box-shadow: none;
    transform: translate(4px, 4px);
}

.neo-btn-primary   { background: #FF4D4D; color: #fff; }
.neo-btn-secondary { background: #FFD93D; color: #111; }
.neo-btn-accent    { background: #6BCB77; color: #111; }
.neo-btn-blue      { background: #4D96FF; color: #fff; }
.neo-btn-purple    { background: #845EF7; color: #fff; }
.neo-btn-dark      { background: #111111; color: #fff; }
.neo-btn-white     { background: #ffffff; color: #111; }

.neo-input {
    border: 4px solid #111111;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    width: 100%;
    transition: border-color 0.15s;
    outline: none;
}

.neo-input:focus {
    border-color: #FF4D4D;
}

.neo-badge {
    border: 2px solid #111111;
    border-radius: 0.5rem;
    padding: 0.15rem 0.6rem;
    font-weight: 700;
    font-size: 0.7rem;
    display: inline-block;
}

/* ── XP Progress bar ───────────────────────────────────────── */
.xp-bar {
    height: 8px;
    border: 0;
    border-radius: 999px;
    overflow: hidden;
    background: #F2F4F7;
}

.xp-bar-fill {
    height: 100%;
    background: #FF4D4D;
    border-right: 0;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(.4,0,.2,1);
}

/* ── Kanji card ─────────────────────────────────────────────── */
.kanji-card {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow);
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    cursor: pointer;
    perspective: 600px;
}

.kanji-card:hover {
    transform: none;
    border-color: var(--gh-border-strong);
    box-shadow: var(--gh-shadow-md);
}

/* Flashcard flip */
.flashcard {
    perspective: 1000px;
    cursor: pointer;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

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

.flashcard-front,
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow);
    background: #fff;
}

.flashcard-back {
    transform: rotateY(180deg);
    background: #FFFBEB;
    border-color: #FEDF89;
}

/* ── Quiz styles ───────────────────────────────────────────── */
.quiz-option {
    border: 1px solid var(--gh-border-strong);
    border-radius: var(--gh-radius-sm);
    padding: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    background: #fff;
}

.quiz-option:hover:not(.selected):not(.correct):not(.wrong) {
    background: #F9FAFB;
    border-color: var(--gh-text-3);
    transform: none;
    box-shadow: none;
}

.quiz-option.selected { background: var(--gh-info-soft); border-color: #B2DDFF; color: #175CD3; }
.quiz-option.correct  { background: var(--gh-success-soft); border-color: #A6F4C5; color: #027A48; box-shadow: none; }
.quiz-option.wrong    { background: #FEF3F2; border-color: #FDA29B; color: #B42318; box-shadow: none; }

/* ── Streak fire animation ─────────────────────────────────── */
@keyframes fire-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.1); }
}

.streak-fire {
    animation: fire-pulse 1.2s ease-in-out infinite;
    display: inline-block;
}

/* ── Level up animation ────────────────────────────────────── */
@keyframes level-up {
    0%   { opacity: 0; transform: scale(0.5) translateY(20px); }
    50%  { opacity: 1; transform: scale(1.1) translateY(-5px); }
    100% { opacity: 0; transform: scale(1) translateY(-40px); }
}

.level-up-toast {
    animation: level-up 2s ease forwards;
}

/* ── Skeleton loader ───────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
}

/* ── Floating nav highlight ────────────────────────────────── */
.nav-active {
    background: #111111;
    color: #ffffff;
}

/* ── Page transitions ──────────────────────────────────────── */
.page-enter {
    animation: fadeIn 0.2s ease-out;
}

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

/* ── Audio player ──────────────────────────────────────────── */
.audio-player {
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    padding: 1rem;
    background: #fff;
    color: var(--gh-text);
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: var(--gh-shadow);
}

.audio-play-btn {
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--gh-border-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fff;
    color: var(--gh-brand);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.audio-play-btn:hover {
    background: var(--gh-brand-soft);
    border-color: #FFD6D6;
}

/* ── Tooltip ───────────────────────────────────────────────── */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--gh-text);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    border: 0;
    z-index: 50;
}

[data-tooltip]:hover::after { opacity: 1; }

/* ── Page layout ───────────────────────────────────────────── */
#main-content {
    overflow: hidden;
    background: #ffffff;
    padding-top: 1.5rem !important;
}

#main-content > *:first-child {
    margin-top: 0;
}

/* ── Mobile responsive tweaks ──────────────────────────────── */
@media (max-width: 640px) {
    .neo-card { box-shadow: var(--gh-shadow) !important; }
    .neo-btn  { box-shadow: none !important; }
}

/* ── AI Rendered Markdown & Tables Styling ─────────────────── */
.ai-rendered-content {
    color: #344054;
    line-height: 1.75;
}

.ai-rendered-content h1, 
.ai-rendered-content h2, 
.ai-rendered-content h3, 
.ai-rendered-content h4 {
    font-weight: 700;
    color: var(--gh-text);
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.ai-rendered-content h3 {
    font-size: 1.05rem;
    border-bottom: 1px solid var(--gh-border);
    padding-bottom: 0.35rem;
    color: var(--gh-text);
}

.ai-rendered-content hr {
    border: 0;
    border-top: 1px solid var(--gh-border);
    margin: 1.25rem 0;
}

.ai-rendered-content blockquote {
    background: var(--gh-surface-soft);
    border-left: 3px solid var(--gh-brand);
    padding: 0.75rem 1rem;
    border-radius: 0 10px 10px 0;
    font-style: normal;
    color: var(--gh-text-2);
    margin: 0.75rem 0;
    box-shadow: none;
}

.ai-rendered-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.ai-rendered-content ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin: 0.5rem 0;
}

.ai-rendered-content li {
    margin-bottom: 0.35rem;
}

/* AI Markdown Tables */
.ai-rendered-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1rem 0;
    font-size: 0.825rem;
    background: #ffffff;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    overflow: hidden;
    box-shadow: var(--gh-shadow);
}

.ai-rendered-content th {
    background: var(--gh-surface-soft);
    color: var(--gh-text);
    font-weight: 700;
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--gh-border);
}

.ai-rendered-content td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--gh-border);
    border-right: 1px solid #F2F4F7;
    vertical-align: top;
}

.ai-rendered-content td:last-child {
    border-right: none;
}

.ai-rendered-content tr:last-child td {
    border-bottom: none;
}

.ai-rendered-content tr:nth-child(even) {
    background-color: var(--gh-surface-soft);
}

.ai-rendered-content code {
    background: #F2F4F7;
    color: #B54708;
    padding: 0.1rem 0.4rem;
    border-radius: 6px;
    font-family: ui-monospace, monospace;
    font-weight: 600;
}

/* ============================================================
   GemuniHongo — Modern Learning SaaS UI Layer
   Soft, calm, structured. Additive on top of the legacy
   Neo-Brutalism utilities (which are kept for compatibility).
   ============================================================ */

:root {
    --gh-canvas:        #F8F9FB;
    --gh-surface:       #FFFFFF;
    --gh-surface-soft:  #F9FAFB;
    --gh-text:          #172033;
    --gh-text-2:        #667085;
    --gh-text-3:        #98A2B3;
    --gh-border:        #EAECF0;
    --gh-border-strong: #D0D5DD;
    --gh-brand:         #FF4D4D;
    --gh-brand-strong:  #D9363E;
    --gh-brand-soft:    #FFF1F1;
    --gh-success:       #12B76A;
    --gh-success-soft:  #ECFDF3;
    --gh-warning:       #F79009;
    --gh-warning-soft:  #FFFAEB;
    --gh-info:          #2E90FA;
    --gh-info-soft:     #EFF8FF;
    --gh-radius:        14px;
    --gh-radius-sm:     10px;
    --gh-shadow:        0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --gh-shadow-md:     0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .06);
    --gh-card-hover:    #D0D5DD;
    --gh-overlay:       rgba(16, 24, 40, .60);
    --gh-surface-glass: rgba(255, 255, 255, .92);
    --gh-surface-soft-glass: rgba(255, 255, 255, .82);
    /* Permukaan "terbalik" (panel gelap/hero) & teks di atasnya */
    --gh-inverted:      #172033;
    --gh-on-inverted:   #FFFFFF;
    color-scheme: light;
}

/* ============================================================
   DARK MODE
   ------------------------------------------------------------
   Diaktifkan lewat atribut `data-theme="dark"` pada <html>.
   Seluruh komponen memakai token di atas, sehingga cukup
   menukar nilai token untuk mengubah tema seluruh aplikasi.
   ============================================================ */
[data-theme="dark"] {
    --gh-canvas:        #0F1115;
    --gh-surface:       #171A21;
    --gh-surface-soft:  #1C2027;
    --gh-text:          #F5F7FA;
    --gh-text-2:        #98A2B3;
    --gh-text-3:        #667085;
    --gh-border:        #292D36;
    --gh-border-strong: #363B45;
    /* Aksen merah dibuat sedikit lebih terang agar tetap kontras */
    --gh-brand:         #FF5C5C;
    --gh-brand-strong:  #FF7A7A;
    --gh-brand-soft:    #2A1A1C;
    --gh-success:       #32D583;
    --gh-success-soft:  #10281E;
    --gh-warning:       #FDB022;
    --gh-warning-soft:  #2A2110;
    --gh-info:          #53B1FD;
    --gh-info-soft:     #10233A;
    --gh-shadow:        0 1px 2px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .24);
    --gh-shadow-md:     0 4px 12px -2px rgba(0, 0, 0, .45), 0 2px 4px -2px rgba(0, 0, 0, .30);
    --gh-card-hover:    #3A404A;
    --gh-overlay:       rgba(0, 0, 0, .68);
    --gh-surface-glass: rgba(23, 26, 33, .92);
    --gh-surface-soft-glass: rgba(28, 32, 39, .82);
    /* Di tema gelap, panel "terbalik" jadi lebih terang dari kanvas
       agar tetap terbaca sebagai blok tersendiri. */
    --gh-inverted:      #1E222A;
    --gh-on-inverted:   #F5F7FA;
    color-scheme: dark;
}

/* Transisi halus saat berganti tema (tidak saat first paint) */
html.gh-theme-ready,
html.gh-theme-ready body,
html.gh-theme-ready body * {
    transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
@media (prefers-reduced-motion: reduce) {
    html.gh-theme-ready, html.gh-theme-ready body, html.gh-theme-ready body * { transition: none; }
}

/* Latar dasar mengikuti token tema */
html, body { background-color: var(--gh-canvas); color: var(--gh-text); }

/* ── Pemetaan utility Tailwind ke token tema ───────────────────
   Sebagian besar view memakai warna hardcoded (bg-white, text-gray-*,
   dst.). Aturan berikut memetakannya ke token agar otomatis berubah
   saat tema gelap aktif tanpa harus menulis ulang setiap view. */

/* Permukaan */
.bg-white,
.bg-\[\#FFFFFF\], .bg-\[\#ffffff\] { background-color: var(--gh-surface) !important; }
.bg-\[\#F9FAFB\], .bg-\[\#F8F9FB\], .bg-\[\#F8F9FA\] { background-color: var(--gh-surface-soft) !important; }
.bg-\[\#F2F4F7\], .bg-gray-50  { background-color: var(--gh-surface-soft) !important; }
.bg-gray-100, .bg-gray-200 { background-color: var(--gh-border) !important; }
.bg-\[\#172033\], .bg-\[\#111\], .bg-\[\#111111\], .bg-black { background-color: var(--gh-inverted) !important; }

/* Teks netral */
.text-\[\#172033\], .text-\[\#111\], .text-\[\#111111\],
.text-gray-900, .text-gray-800, .text-black,
.text-slate-900, .text-slate-800 { color: var(--gh-text) !important; }
.text-\[\#344054\], .text-gray-700, .text-slate-700 { color: var(--gh-text) !important; }
.text-\[\#475467\], .text-\[\#667085\], .text-gray-600, .text-slate-600 { color: var(--gh-text-2) !important; }
.text-\[\#98A2B3\], .text-gray-500, .text-gray-400, .text-gray-300,
.text-slate-500, .text-slate-400, .text-slate-300 { color: var(--gh-text-3) !important; }

/* Border & pemisah */
.border-\[\#EAECF0\], .border-\[\#D0D5DD\], .border-gray-200, .border-gray-100,
.border-slate-200, .border-slate-100, .border-slate-300 {
    border-color: var(--gh-border) !important;
}
.border-\[\#F2F4F7\] { border-color: var(--gh-border) !important; }
[class*="border-black"] { border-color: var(--gh-border-strong) !important; }
#main-content { background-color: var(--gh-surface); }

/* Slate surface mapping for Admin pages */
.bg-slate-50, .bg-slate-100 { background-color: var(--gh-canvas) !important; }
.bg-slate-50\/50 { background-color: var(--gh-surface-soft) !important; }
.bg-slate-900, .bg-slate-900\/40, .bg-slate-900\/60 { background-color: var(--gh-inverted) !important; }
.hover\:bg-slate-50:hover, .hover\:bg-slate-100:hover, .hover\:bg-slate-200:hover {
    background-color: var(--gh-surface-soft) !important;
}

/* Aksen lembut */
.bg-\[\#FFF1F1\] { background-color: var(--gh-brand-soft) !important; }
.bg-\[\#EFF8FF\], .bg-blue-50 { background-color: var(--gh-info-soft) !important; }
.bg-\[\#ECFDF3\], .bg-green-50, .bg-emerald-50 { background-color: var(--gh-success-soft) !important; }
.bg-\[\#FFFAEB\], .bg-amber-50, .bg-yellow-50, .bg-\[\#FFF9DB\], .bg-\[\#FFF9F9\] {
    background-color: var(--gh-warning-soft) !important;
}
.bg-red-50 { background-color: var(--gh-brand-soft) !important; }
.bg-purple-50 { background-color: #221833 !important; }

/* Teks aksen pada latar lembut */
.text-\[\#D9363E\] { color: var(--gh-brand-strong) !important; }
.text-\[\#027A48\], .text-green-800, .text-emerald-700 { color: var(--gh-success) !important; }
.text-\[\#B54708\], .text-amber-900 { color: var(--gh-warning) !important; }
.text-\[\#175CD3\], .text-blue-900, .text-blue-600 { color: var(--gh-info) !important; }

/* Overlay modal */
.bg-\[\#101828\]\/50, .bg-\[\#101828\]\/60, .bg-black\/60, .bg-black\/40, .bg-black\/20 {
    background-color: var(--gh-overlay) !important;
}

/* Skeleton & progress track */
.ui-skeleton, .skeleton {
    background: linear-gradient(90deg, var(--gh-surface-soft) 25%, var(--gh-border) 37%, var(--gh-surface-soft) 63%) !important;
    background-size: 400% 100% !important;
}
.ui-progress, .prog-bar, .xp-bar { background-color: var(--gh-border) !important; }
.quiz-progress-bar { background-color: var(--gh-border) !important; }

/* Tombol putih / netral */
.ui-btn-secondary { background: var(--gh-surface); color: var(--gh-text); border-color: var(--gh-border-strong); }
.ui-btn-secondary:hover { background: var(--gh-surface-soft); }
.ui-btn-ghost { color: var(--gh-text-2); }
.ui-btn-ghost:hover { background: var(--gh-surface-soft); color: var(--gh-text); }
.ui-btn-danger { background: var(--gh-brand-soft); color: var(--gh-brand-strong); border-color: var(--gh-brand); }

/* Input */
.ui-input, .nb-input, .neo-input {
    background: var(--gh-surface);
    color: var(--gh-text);
    border-color: var(--gh-border-strong);
}
.ui-input::placeholder, .nb-input::placeholder, .neo-input::placeholder { color: var(--gh-text-3); }
select.ui-input option { background: var(--gh-surface); color: var(--gh-text); }

/* Field form tanpa kelas khusus (mis. input pencarian dari Tailwind CDN)
   agar tidak tampil putih menyilaukan di tema gelap. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="file"]),
select,
textarea {
    background-color: var(--gh-surface);
    color: var(--gh-text);
    border-color: var(--gh-border-strong);
}
input::placeholder, textarea::placeholder { color: var(--gh-text-3); }
select option { background-color: var(--gh-surface); color: var(--gh-text); }
/* Jangan timpa tombol/checkbox yang punya gaya sendiri */
input[type="checkbox"], input[type="radio"] { accent-color: var(--gh-brand); }

/* Select native di Windows mengabaikan background-color selama
   `appearance` masih default. Kita reset dan tambahkan chevron sendiri. */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--gh-surface) !important;
    color: var(--gh-text) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 34px;
    cursor: pointer;
}


/* Sorotan hover kartu memakai token */
.hover\:border-\[\#FFD6D6\]:hover { border-color: var(--gh-brand) !important; }
.hover\:border-\[\#D0D5DD\]:hover { border-color: var(--gh-card-hover) !important; }
.hover\:bg-\[\#F9FAFB\]:hover, .hover\:bg-\[\#FFF9F9\]:hover {
    background-color: var(--gh-surface-soft) !important;
}
.hover\:bg-\[\#F2F4F7\]:hover { background-color: var(--gh-surface-soft) !important; }

/* Kartu terang dengan border → pastikan memakai permukaan tema */
.bg-white[class*="border-"] { background-color: var(--gh-surface) !important; border-color: var(--gh-border) !important; }

/* Sidebar admin pada tema gelap */
[data-theme="dark"] aside.fixed {
    background-color: var(--gh-surface) !important;
    border-color: var(--gh-border) !important;
}
[data-theme="dark"] header.sticky {
    background-color: var(--gh-surface-glass) !important;
    border-color: var(--gh-border) !important;
}

/* Teks putih di atas latar gelap tetap putih */
.text-white, .text-\[white\] { color: #FFFFFF !important; }
[data-theme="dark"] .bg-\[\#FF4D4D\].text-white { color: #FFFFFF !important; }

/* Permukaan putih transparan (header sticky, drawer) mengikuti tema */
.bg-white\/95, .bg-white\/90 { background-color: var(--gh-surface-glass) !important; }
.bg-white\/80, .bg-white\/70 {
    background-color: var(--gh-surface-soft-glass) !important;
}

/* Footer publik selalu bertema gelap → pastikan teksnya tetap kontras */
footer.bg-\[\#172033\] { background-color: var(--gh-inverted) !important; }
footer.bg-\[\#172033\] .text-\[\#98A2B3\],
footer.bg-\[\#172033\] .text-\[\#667085\],
footer.bg-\[\#172033\] h3 {
    color: #98A2B3 !important;
}
footer.bg-\[\#172033\] .text-white { color: #FFFFFF !important; }
footer.bg-\[\#172033\] a:hover { color: #FFFFFF !important; }

/* Panel "terbalik": teks di dalamnya tetap terang di kedua tema */
.bg-\[\#172033\] .text-\[\#98A2B3\],
.bg-\[\#172033\] .text-\[\#667085\],
.bg-\[\#111\] .text-\[\#98A2B3\] { color: #98A2B3 !important; }
.bg-\[\#172033\] .text-\[\#172033\],
.bg-\[\#111\] .text-\[\#172033\] { color: var(--gh-on-inverted) !important; }

/* Logo gambar (PNG/SVG) agar tetap terlihat di tema gelap,
   tanpa mengubah foto pengguna. */
[data-theme="dark"] img[src*="branding"],
[data-theme="dark"] img[src*="logo"],
[data-theme="dark"] header img,
[data-theme="dark"] aside img {
    filter: brightness(1.32) contrast(1.05);
}
[data-theme="dark"] img[src*="avatar"],
[data-theme="dark"] img[src*="uploads/user"],
[data-theme="dark"] img[src*="nekosapi"] {
    filter: none;
}


/* Gradient latar sangat terang → jadikan permukaan lembut saat gelap */
[data-theme="dark"] [class*="from-[#FFF"],
[data-theme="dark"] [class*="via-[#FFF"],
[data-theme="dark"] [class*="to-[#FFF"],
[data-theme="dark"] [class*="from-[#F0F"],
[data-theme="dark"] [class*="from-[#E8F"],
[data-theme="dark"] [class*="from-[#FDF"],
[data-theme="dark"] [class*="from-[#F7F"],
[data-theme="dark"] [class*="from-[#FAF"] {
    background-image: none !important;
    background-color: var(--gh-surface-soft) !important;
}

/* Latar putih penuh pada halaman (mis. #main-content) */
[data-theme="dark"] .bg-\[\#F0F2F5\] { background-color: var(--gh-canvas) !important; }

/* ============================================================
   TOMBOL GANTI TEMA (terang / gelap)
   Ikon matahari & bulan bertumpuk; salah satu tampil sesuai tema.
   ============================================================ */
.gh-theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--gh-border);
    background: var(--gh-surface);
    color: var(--gh-text-2);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
    flex-shrink: 0;
}
.gh-theme-toggle:hover {
    background: var(--gh-surface-soft);
    border-color: var(--gh-border-strong);
    color: var(--gh-text);
}
.gh-theme-toggle svg { width: 18px; height: 18px; }

/* Tampilkan ikon matahari saat gelap (aksi: pindah ke terang) */
.gh-theme-toggle .gh-icon-sun  { display: none; }
.gh-theme-toggle .gh-icon-moon { display: block; }
[data-theme="dark"] .gh-theme-toggle .gh-icon-sun  { display: block; }
[data-theme="dark"] .gh-theme-toggle .gh-icon-moon { display: none; }

/* Varian untuk halaman dengan latar gelap (mis. hero login):
   tanpa tombol, hanya ikon agar menyatu dengan desain. */
[data-theme-toggle].gh-theme-toggle-ghost {
    border: 0;
    background: transparent;
    color: inherit;
    opacity: .8;
}
[data-theme-toggle].gh-theme-toggle-ghost:hover {
    background: transparent;
    border: 0;
    opacity: 1;
}

/* Varian tombol tema untuk area gelap / footer */
.gh-theme-toggle-on-dark {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
    color: #FFFFFF;
}
.gh-theme-toggle-on-dark:hover { background: rgba(255, 255, 255, .2); color: #FFFFFF; }

/* Varian lebar dengan label teks (mis. di menu akun) */
.gh-theme-toggle-wide {
    width: auto;
    height: auto;
    gap: 8px;
    padding: 9px 12px;
    justify-content: flex-start;
    font-size: 12px;
    font-weight: 600;
    border-color: transparent;
    background: transparent;
}
.gh-theme-toggle-wide:hover { background: var(--gh-surface-soft); }
.gh-theme-toggle-wide .gh-theme-label-dark  { display: none; }
.gh-theme-toggle-wide .gh-theme-label-light { display: inline; }
[data-theme="dark"] .gh-theme-toggle-wide .gh-theme-label-dark  { display: inline; }
[data-theme="dark"] .gh-theme-toggle-wide .gh-theme-label-light { display: none; }



/* ── Focus visibility (accessibility) ─────────────────────── */
.ui-focus:focus-visible,
.ui-btn:focus-visible,
.ui-nav-item:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--gh-brand);
    outline-offset: 2px;
}

/* ── Cards ─────────────────────────────────────────────────── */
.ui-card {
    background: var(--gh-surface);
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow);
}
.ui-card-flat { box-shadow: none; }
.ui-card-pad { padding: 20px 22px; }
.ui-card-pad-lg { padding: 28px; }
@media (min-width: 640px) { .ui-card-pad-lg { padding: 32px; } }
.ui-card-lg { padding: 32px; }
@media (min-width: 1024px) { .ui-card-lg { padding: 40px; } }
.ui-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--gh-border);
}
.ui-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--gh-text);
    letter-spacing: -.01em;
}
.ui-card-sub { font-size: 12px; color: var(--gh-text-2); font-weight: 500; }
.ui-divider { height: 1px; background: var(--gh-border); border: 0; }

/* ── Buttons ───────────────────────────────────────────────── */
.ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--gh-radius-sm);
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    padding: 10px 16px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
    white-space: nowrap;
}
.ui-btn:disabled { opacity: .55; cursor: not-allowed; }
.ui-btn-sm { padding: 7px 12px; font-size: 12px; }
.ui-btn-lg { padding: 12px 20px; font-size: 14px; }

.ui-btn-primary {
    background: var(--gh-brand);
    color: #fff;
    border-color: var(--gh-brand);
    box-shadow: 0 1px 2px rgba(255, 77, 77, .28);
}
.ui-btn-primary:hover { background: var(--gh-brand-strong); border-color: var(--gh-brand-strong); }

.ui-btn-secondary {
    background: var(--gh-surface);
    color: var(--gh-text);
    border-color: var(--gh-border-strong);
}
.ui-btn-secondary:hover { background: var(--gh-surface-soft); border-color: var(--gh-text-3); }

.ui-btn-ghost { background: transparent; color: var(--gh-text-2); border-color: transparent; }
.ui-btn-ghost:hover { background: #F2F4F7; color: var(--gh-text); }

.ui-btn-danger { background: #FEF3F2; color: #B42318; border-color: #FDA29B; }
.ui-btn-danger:hover { background: #FEE4E2; }

.ui-btn-block { width: 100%; }

/* Button yang dipakai di atas latar gelap */
.ui-btn-on-dark {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .2);
}
.ui-btn-on-dark:hover {
    background: rgba(255, 255, 255, .2);
    border-color: rgba(255, 255, 255, .3);
}

/* ── Badges / chips ────────────────────────────────────────── */
.ui-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid var(--gh-border);
    background: var(--gh-surface-soft);
    color: var(--gh-text-2);
    white-space: nowrap;
}
.ui-badge-brand   { background: var(--gh-brand-soft);   color: var(--gh-brand-strong); border-color: #FFD6D6; }
.ui-badge-success { background: var(--gh-success-soft); color: #027A48; border-color: #A6F4C5; }
.ui-badge-warning { background: var(--gh-warning-soft); color: #B54708; border-color: #FEDF89; }
.ui-badge-info    { background: var(--gh-info-soft);    color: #175CD3; border-color: #B2DDFF; }
.ui-badge-neutral { background: #F2F4F7; color: #475467; border-color: var(--gh-border); }
.ui-badge-sm      { padding: 4px 8px; font-size: 10px; }

/* Badge yang diletakkan di atas gambar/video */
.ui-badge-onmedia {
    background: rgba(255, 255, 255, .95);
    color: var(--gh-text);
    border-color: transparent;
    backdrop-filter: blur(4px);
}

/* ── Progress ──────────────────────────────────────────────── */
.ui-progress {
    position: relative;
    height: 8px;
    width: 100%;
    background: #F2F4F7;
    border-radius: 999px;
    overflow: hidden;
}
.ui-progress > i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--gh-brand);
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.ui-progress-sm { height: 6px; }
.ui-progress-lg { height: 10px; }
.ui-progress-success > i { background: var(--gh-success); }
.ui-progress-info > i    { background: var(--gh-info); }

/* Dukungan elemen <div class="prog-fill"> di dalam ui-progress
   (dipakai halaman grammar yang memakai wrapper class sendiri) */
.ui-progress > .prog-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width .45s cubic-bezier(.4, 0, .2, 1);
}
.prog-bar { margin-top: 0; }

/* ── Navigation (sidebar / drawer) ─────────────────────────── */
.ui-nav-group {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--gh-text-3);
    padding: 0 10px;
    margin: 18px 0 6px;
}
.ui-nav-group:first-child { margin-top: 4px; }
.ui-nav-group-first { margin-top: 14px; }

.ui-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--gh-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: #475467;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.ui-nav-item:hover { background: #F2F4F7; color: var(--gh-text); }
.ui-nav-item.is-active {
    background: var(--gh-brand-soft);
    color: var(--gh-brand-strong);
    font-weight: 700;
}
.ui-nav-icon { color: var(--gh-text-3); flex-shrink: 0; transition: color .15s ease; }
.ui-nav-item:hover .ui-nav-icon { color: var(--gh-text-2); }
.ui-nav-item.is-active .ui-nav-icon { color: var(--gh-brand-strong); }

/* ── Sidebar pada tema gelap ──────────────────────────────────
   Teks menu putih penuh; saat hover latar menjadi putih dengan
   teks hitam agar kontrasnya maksimal. Menu aktif tetap merah soft. */
[data-theme="dark"] .ui-nav-item {
    color: #FFFFFF;
}
[data-theme="dark"] .ui-nav-item .ui-nav-icon {
    color: #FFFFFF;
    opacity: .85;
}
/* Hover: latar putih + teks hitam (berlaku juga untuk ikon & badge) */
[data-theme="dark"] .ui-nav-item:hover {
    background: #FFFFFF !important;
    color: #0B0D12 !important;
}
[data-theme="dark"] .ui-nav-item:hover .ui-nav-icon {
    color: #0B0D12 !important;
    opacity: 1;
}
[data-theme="dark"] .ui-nav-item:hover .ui-badge {
    background: rgba(11, 13, 18, .08) !important;
    color: #0B0D12 !important;
    border-color: rgba(11, 13, 18, .18) !important;
}
/* Menu aktif: tetap merah soft, tidak ikut berubah saat hover */
[data-theme="dark"] .ui-nav-item.is-active,
[data-theme="dark"] .ui-nav-item.is-active:hover {
    background: var(--gh-brand-soft) !important;
    color: var(--gh-brand-strong) !important;
}
[data-theme="dark"] .ui-nav-item.is-active .ui-nav-icon,
[data-theme="dark"] .ui-nav-item.is-active:hover .ui-nav-icon {
    color: var(--gh-brand-strong) !important;
    opacity: 1;
}
[data-theme="dark"] .ui-nav-item.is-active .ui-badge {
    background: var(--gh-brand) !important;
    color: #FFFFFF !important;
    border-color: var(--gh-brand) !important;
}
/* Judul kelompok menu dibuat lebih terang agar terbaca di latar gelap */
[data-theme="dark"] .ui-nav-group {
    color: #98A2B3;
}

/* ── Stats ─────────────────────────────────────────────────── */
.ui-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gh-text-2);
}
.ui-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--gh-text);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.ui-stat-unit { font-size: 12px; font-weight: 600; color: var(--gh-text-2); }
.ui-stat-value-sm { font-size: 20px; }
.ui-icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--gh-surface-soft);
    color: var(--gh-text-2);
    flex-shrink: 0;
}
.ui-icon-tile-lg { width: 44px; height: 44px; }
.ui-icon-tile-xl { width: 48px; height: 48px; border-radius: 12px; }
.ui-icon-tile-sm { width: 32px; height: 32px; border-radius: 8px; }
.ui-icon-tile-brand   { background: var(--gh-brand-soft);   color: var(--gh-brand-strong); }
.ui-icon-tile-info    { background: var(--gh-info-soft);    color: var(--gh-info); }
.ui-icon-tile-success { background: var(--gh-success-soft); color: var(--gh-success); }
.ui-icon-tile-warning { background: var(--gh-warning-soft); color: var(--gh-warning); }

/* ── List rows ─────────────────────────────────────────────── */
.ui-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--gh-border);
    border-radius: var(--gh-radius-sm);
    background: var(--gh-surface);
    transition: border-color .15s ease, background .15s ease;
}
.ui-row:hover { border-color: var(--gh-border-strong); }
.ui-row.is-done { background: var(--gh-success-soft); border-color: #A6F4C5; }

/* ── Empty / error states ──────────────────────────────────── */
.ui-empty {
    text-align: center;
    padding: 34px 20px;
    border: 1px dashed var(--gh-border-strong);
    border-radius: var(--gh-radius);
    background: var(--gh-surface-soft);
}
.ui-empty-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--gh-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gh-text-3);
}

/* ── Skeleton ──────────────────────────────────────────────── */
.ui-skeleton {
    background: linear-gradient(90deg, #EEF0F3 25%, #E4E7EC 37%, #EEF0F3 63%);
    background-size: 400% 100%;
    animation: ui-shimmer 1.4s ease infinite;
    border-radius: 8px;
}
@keyframes ui-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ── Inputs ────────────────────────────────────────────────── */
.ui-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--gh-text);
    background: #fff;
    border: 1px solid var(--gh-border-strong);
    border-radius: var(--gh-radius-sm);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ui-input:focus {
    outline: none;
    border-color: var(--gh-brand);
    box-shadow: 0 0 0 3px rgba(255, 77, 77, .12);
}
.ui-input-sm { padding-top: 6px; padding-bottom: 6px; }

/* ── Japanese learning content ─────────────────────────────── */
.jp { font-family: 'Noto Sans JP', 'Yu Gothic UI', 'Hiragino Sans', sans-serif; }
.ui-jp-xl { font-size: 34px; font-weight: 700; line-height: 1.2; color: var(--gh-text); }
.ui-jp-lg { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--gh-text); }
.ui-jp-quick { font-size: 18px; font-weight: 700; line-height: 1.3; color: var(--gh-text); }
.ui-kana  { font-size: 13px; color: var(--gh-text-2); font-weight: 500; }
.ui-romaji{ font-size: 12px; color: var(--gh-text-3); letter-spacing: .02em; }

/* ── Subtle entrance ───────────────────────────────────────── */
@keyframes ui-fade-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ui-enter { animation: ui-fade-up .28s ease-out both; }

@media (prefers-reduced-motion: reduce) {
    .ui-enter, .ui-progress > i { animation: none !important; transition: none !important; }
}

/* Soft, modern scrollbars for the app shell */
.ui-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ui-scroll::-webkit-scrollbar-track { background: transparent; }
.ui-scroll::-webkit-scrollbar-thumb { background: #D0D5DD; border-radius: 999px; }
.ui-scroll::-webkit-scrollbar-thumb:hover { background: #98A2B3; }

/* ============================================================
   LEGACY NEO-BRUTALISM → MODERN LAYER
   ------------------------------------------------------------
   The whole app was originally built with utilitaire brutalism
   (hard black offset shadows + thick black borders). The rules
   below neutralise that visual language everywhere at once, so
   every page inherits the calm, modern GemuniHongo look without
   having to be rewritten. Layout, spacing and semantics are
   untouched — only the "skin" changes.
   ============================================================ */

/* ── 1. Kill hard offset shadows (all colours / sizes) ─────── */
[class*="shadow-["] {
    box-shadow: var(--gh-shadow) !important;
}
/* Pengecualian: drop-shadow-* adalah efek filter (glow logo),
   bukan offset shadow. Jangan tambahkan box-shadow di sana. */
[class*="drop-shadow-"] {
    box-shadow: none !important;
}
/* Interactive elements get a slightly taller resting shadow */
a[class*="shadow-["],
button[class*="shadow-["] {
    box-shadow: var(--gh-shadow) !important;
    transition: box-shadow .15s ease, border-color .15s ease, background .15s ease, transform .15s ease, color .15s ease;
}
a[class*="shadow-["]:hover:not(:disabled),
button[class*="shadow-["]:hover:not(:disabled) {
    box-shadow: var(--gh-shadow-md) !important;
    transform: none;              /* removes the brutalist "press" jump */
}

/* ── 2. Border: hitam tebal → border tipis lembut ──────────── */
/* Semua utility border-* yang berwarna hitam dijadikan warna border lembut */
[class*="border-black"],
[class*="border-[#111"],
[class*="border-[#000"] {
    border-color: var(--gh-border-strong) !important;
}

/* border-2/3/4 + hitam → 1px (menang atas utilitas lewat !important) */
[class*="border-2 border-black"],
[class*="border-3 border-black"],
[class*="border-4 border-black"],
[class*="border-2 border-[#111"],
[class*="border-3 border-[#111"],
[class*="border-4 border-[#111"] {
    border-width: 1px !important;
    border-style: solid !important;
}

/* Kombinasi class terpisah di atribut (border-4, border-black) */
.border-2.border-black,
.border-3.border-black,
.border-4.border-black,
.border-2.border-\[\#111111\],
.border-3.border-\[\#111111\],
.border-4.border-\[\#111111\] {
    border-width: 1px !important;
    border-color: var(--gh-border-strong) !important;
}

/* Varian hover yang juga hitam tebal */
[class*="hover:border-black"]:hover { border-color: var(--gh-border-strong) !important; }
[class*="hover:border-4"]:hover,
[class*="hover:border-3"]:hover,
[class*="hover:border-2"]:hover { border-width: 1px !important; }

/* Border searah (b/t/l/r) yang tebal → 1px.
   Warna TIDAK diubah di sini agar border berwarna tetap berwarna;
   border hitam sudah ditangani oleh [class*="border-black"] di atas. */
[class*="border-b-4"],
[class*="border-b-3"] { border-bottom-width: 1px !important; }
[class*="border-t-4"],
[class*="border-t-3"] { border-top-width: 1px !important; }
[class*="border-l-4"],
[class*="border-l-3"] { border-left-width: 1px !important; }
[class*="border-r-4"],
[class*="border-r-3"] { border-right-width: 1px !important; }

/* Divider hitam di dalam kartu → garis halus */
[class*="border-b-2 border-black"],
[class*="border-t-2 border-black"] {
    border-color: var(--gh-border) !important;
    border-bottom-width: 1px !important;
    border-top-width: 1px !important;
}

/* ── 3. Radius: sudut ekstrem → lembut ────────────────────── */
.rounded-3xl { border-radius: var(--gh-radius) !important; }
.rounded-\[2rem\] { border-radius: var(--gh-radius) !important; }
.rounded-2xl  { border-radius: 12px !important; }

/* ── 3b. Border hitam tebal dari utility border-* ─────────── */
.border-black   { border-color: var(--gh-border-strong) !important; }
.border-primary { border-color: var(--gh-brand) !important; }

/* Kartu dengan header hitam solid → panel "terbalik" */
.bg-\[\#111111\].text-white,
.bg-black.text-white,
.bg-\[\#111\].text-white {
    background-color: var(--gh-inverted) !important;
    color: var(--gh-on-inverted) !important;
}

/* ── 3c. Hilangkan efek "press" brutalism pada hover ──────── */
[class*="hover:translate-x"]:hover,
[class*="hover:translate-y"]:hover,
[class*="hover:-translate"]:hover,
[class*="active:translate-x"]:active,
[class*="active:translate-y"]:active {
    transform: none !important;
}
/* Tombol tidak boleh bergeser diagonal saat ditekan/hover */
a[class*="ui-btn"]:hover,
button[class*="ui-btn"]:hover,
a[class*="ui-btn"]:active,
button[class*="ui-btn"]:active { transform: none !important; }

/* ── 3d. Warna aksen brutalism → versi lembut ─────────────── */
/* Kuning terang #FFD93D dipakai sebagai tombol/hover utama */
.bg-\[\#FFD93D\] {
    background-color: var(--gh-warning-soft) !important;
    color: #B54708 !important;
}
.bg-\[\#FFD93D\]\/20 { background-color: rgba(247, 144, 9, .10) !important; }
.bg-\[\#FFD93D\]\/30 { background-color: rgba(247, 144, 9, .14) !important; }
.hover\:bg-\[\#FFD93D\]:hover { background-color: #FEF0C7 !important; color: #B54708 !important; }
.hover\:bg-\[\#FFD93D\]\/15:hover { background-color: #FFFAEB !important; }
.hover\:bg-\[\#FFD93D\]\/30:hover { background-color: #FEF0C7 !important; }
.group:hover .group-hover\:bg-\[\#FFD93D\] { background-color: #FEF0C7 !important; }

/* Merah terang: tombol solid → merah brand yang tetap tegas */
.bg-\[\#FF4D4D\].text-white,
.bg-\[\#FF4D4D\].text-\[white\] {
    background-color: var(--gh-brand) !important;
}
/* Hijau neon #6BCB77 → hijau lembut */
.bg-\[\#6BCB77\] {
    background-color: var(--gh-success) !important;
    color: #fff !important;
}
.bg-\[\#6BCB77\]\/20 { background-color: var(--gh-success-soft) !important; }
/* Biru #4D96FF → biru tegas */
.bg-\[\#4D96FF\].text-white {
    background-color: var(--gh-info) !important;
}
/* Ungu #845EF7 → indigo lembut */
.bg-\[\#845EF7\].text-white {
    background-color: #7F56D9 !important;
}
/* Teks kuning pekat (mis. label di atas latar terang) → amber terbaca */
.text-\[\#FFD93D\] { color: #B54708 !important; }

/* ── 3e. Header/bar hitam solid → panel "terbalik" ─────────── */
.bg-\[\#111111\],
.bg-\[\#111\],
.bg-black {
    background-color: var(--gh-inverted) !important;
    color: var(--gh-on-inverted);
}
/* Separator "my-1 border-t-2 border-black" di dropdown → garis tipis */
.border-t-2.border-black,
.border-b-2.border-black { border-color: var(--gh-border) !important; }

/* ── 3f. Badge/chip solid lama → gaya badge baru ──────────── */
.bg-\[\#FF4D4D\].text-white.rounded-lg,
.bg-\[\#FF4D4D\].text-white.rounded-xl { border-radius: 999px !important; }

/* ── 3g. Kartu: pastikan putih & ber-shadow lembut ────────── */
.bg-white[class*="border-2"],
.bg-white[class*="border-4"],
.bg-white[class*="border-3"] {
    border-color: var(--gh-border) !important;
    border-width: 1px !important;
    border-radius: var(--gh-radius);
    box-shadow: var(--gh-shadow);
}

/* ── 3h. State aktif sidebar / highlight → soft merah ─────── */
.bg-\[\#FFF1F1\] { background-color: var(--gh-brand-soft) !important; }
.bg-\[\#FFF1F1\]\/50 { background-color: rgba(255, 241, 241, .6) !important; }
.hover\:bg-\[\#FFF1F1\]:hover { background-color: var(--gh-brand-soft) !important; }

/* ── 3i. Opsi kuis: state terpilih ────────────────────────────
   Kelas `!border-black` adalah sintaks "important" gaya Tailwind v3
   yang TIDAK lagi dihasilkan di v4. Kita definisikan sendiri di sini
   sebagai penanda opsi terpilih pada kuis. */
.\!border-black {
    border-color: var(--gh-brand) !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, .12) !important;
}

/* Opsi kuis: radius lembut */
.quiz-option,
[class*="border-3 border-black"][class*="text-left"] {
    border-radius: var(--gh-radius-sm) !important;
}

/* ── 3j. Kelas "important" lama dari admin (sintaks v3) ───── */
.\!bg-\[\#4D96FF\]\/10 {
    background-color: rgba(46, 144, 250, .08) !important;
}

/* ============================================================
   HALAMAN AUTH (login / register / lupa / reset)
   View lama mendefinisikan .nb-input di blok <style> internal
   dengan tapak neobrutalism tebal. Aturan di bawah (dimuat dari
   file eksternal) menimpanya secara konsisten.
   ============================================================ */
.nb-input {
    width: 100%;
    padding: 12px 15px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: var(--gh-text);
    background: #fff;
    border: 1px solid var(--gh-border-strong);
    border-radius: var(--gh-radius-sm);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.nb-input:focus {
    border-color: var(--gh-brand);
    box-shadow: 0 0 0 3px rgba(255, 77, 77, .12);
}
.nb-input::placeholder { color: var(--gh-text-3); }

/* Input checkbox pada halaman auth */
.accent-\[\#FF4D4D\] { accent-color: var(--gh-brand); }

/* ── 4. Tipografi: font-black berlebihan → tegas tapi rapi ── */
.font-black {
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* ── 5. Legacy utility classes ────────────────────────────── */
.nb-border,
.nb-border-3 { border: 1px solid var(--gh-border) !important; }

.nb-card,
.neo-card {
    background: var(--gh-surface) !important;
    border: 1px solid var(--gh-border) !important;
    border-radius: var(--gh-radius) !important;
    box-shadow: var(--gh-shadow) !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.neo-card:hover {
    box-shadow: var(--gh-shadow-md) !important;
    transform: none !important;
}

.nb-input,
.neo-input-legacy {
    border: 1px solid var(--gh-border-strong);
    border-radius: var(--gh-radius-sm);
}

.nb-btn,
.neo-btn {
    border: 1px solid var(--gh-border-strong) !important;
    border-radius: var(--gh-radius-sm) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    background: var(--gh-surface);
    color: var(--gh-text);
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nb-btn:hover:not(:disabled),
.neo-btn:hover:not(:disabled) {
    transform: none !important;
    box-shadow: none !important;
    background: var(--gh-surface-soft) !important;
    border-color: var(--gh-text-3) !important;
}
.nb-btn:active:not(:disabled),
.neo-btn:active:not(:disabled) {
    transform: none !important;
    box-shadow: none !important;
    background: #F2F4F7 !important;
}

.neo-btn-primary   { background: var(--gh-brand) !important;   color: #fff !important; border-color: var(--gh-brand) !important; }
.neo-btn-primary:hover:not(:disabled)   { background: var(--gh-brand-strong) !important; border-color: var(--gh-brand-strong) !important; }
.neo-btn-secondary { background: var(--gh-warning-soft) !important; color: #B54708 !important; border-color: #FEDF89 !important; }
.neo-btn-accent    { background: var(--gh-success) !important; color: #fff !important; border-color: var(--gh-success) !important; }
.neo-btn-blue      { background: var(--gh-info) !important; color: #fff !important; border-color: var(--gh-info) !important; }
.neo-btn-purple    { background: #7F56D9 !important; color: #fff !important; border-color: #7F56D9 !important; }
.neo-btn-dark      { background: var(--gh-text) !important; color: #fff !important; border-color: var(--gh-text) !important; }
.neo-btn-white     { background: #fff !important; color: var(--gh-text) !important; border-color: var(--gh-border-strong) !important; }

.neo-input {
    border: 1px solid var(--gh-border-strong) !important;
    border-radius: var(--gh-radius-sm) !important;
    background: #fff;
    color: var(--gh-text);
    font-weight: 500 !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.neo-input:focus {
    border-color: var(--gh-brand) !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, .12) !important;
    outline: none;
}

.neo-badge {
    border: 1px solid var(--gh-border) !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    background: var(--gh-surface-soft);
    color: var(--gh-text-2);
}

/* ── 6. XP / progress bars built with black borders ───────── */
.xp-bar,
.xp-bar-fill { border-radius: 999px; }
.xp-bar { border: 0 !important; background: #F2F4F7 !important; overflow: hidden; }

/* ── 7. Tabel: garis tebal → garis halus ─────────────────── */
table[class*="border-collapse"] th,
table[class*="border-collapse"] td {
    border-color: var(--gh-border) !important;
}

/* ── 8. Focus ring konsisten di seluruh aplikasi ─────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--gh-brand);
    outline-offset: 2px;
    border-radius: 6px;
}

/* ============================================================
   MODAL RESPONSIF
   ------------------------------------------------------------
   Mobile  : bottom sheet (menempel bawah, sudut atas membulat,
             tinggi maksimal 90vh, isi dapat digulir)
   Tablet+ : kartu di tengah layar
   ============================================================ */

.gh-modal {
    position: fixed;
    inset: 0;
    /* Harus DI ATAS bottom-nav mobile (z-50) & sheet "Lainnya" (z-60)
       agar tombol Sebelumnya/Berikutnya di dalam popup tidak terhalang. */
    z-index: 70;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.gh-modal-overlay {
    position: absolute;
    inset: 0;
    background: var(--gh-overlay);
}
.gh-modal-panel {
    position: relative;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--gh-surface);
    color: var(--gh-text);
    border: 1px solid var(--gh-border);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px -8px rgba(16, 24, 40, .22);
    padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
    animation: gh-sheet-up .22s cubic-bezier(.22, 1, .36, 1);
}
/* Grip kecil di atas sheet */
.gh-modal-panel::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: var(--gh-border-strong);
    margin: -6px auto 12px;
}
@keyframes gh-sheet-up {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (min-width: 640px) {
    .gh-modal { align-items: center; padding: 16px; }
    .gh-modal-panel {
        max-width: 42rem;
        max-height: 88vh;
        border: 1px solid var(--gh-border);
        border-radius: 16px;
        padding: 24px;
        box-shadow: var(--gh-shadow-md);
    }
    .gh-modal-panel::before { display: none; }
    .gh-modal-panel.gh-modal-sm { max-width: 34rem; }
    .gh-modal-panel.gh-modal-lg { max-width: 52rem; }
}

/* Elemen di dalam modal yang mengecil di layar sempit */
@media (max-width: 639px) {
    .gh-modal-panel .gh-modal-title { font-size: 1.25rem; }
    .gh-modal-panel { font-size: 14px; }
}

/* Tombol tutup modal */
.gh-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--gh-border);
    background: var(--gh-surface);
    color: var(--gh-text-2);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.gh-modal-close:hover { background: var(--gh-surface-soft); color: var(--gh-text); }

/* Kotak karakter kanji di modal */
.gh-kanji-box {
    width: 112px;
    height: 112px;
    border-radius: 14px;
    border: 1px solid var(--gh-border);
    background: var(--gh-surface-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
@media (min-width: 640px) {
    .gh-kanji-box { width: 176px; height: 176px; }
}
.gh-kanji-box .gh-kanji-char { font-size: 3.5rem; font-weight: 700; color: var(--gh-text); }
@media (min-width: 640px) {
    .gh-kanji-box .gh-kanji-char { font-size: 4.5rem; }
}

/* ============================================================
   KOMPONEN HALAMAN TATA BAHASA (grammar)
   Sebelumnya didefinisikan inline dengan gaya neobrutalism;
   sekarang memakai token design system.
   ============================================================ */

/* Tab: Penjelasan / Contoh / Quiz */
.gr-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--gh-text-2);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.gr-tab-btn:hover:not(.active) { color: var(--gh-text); background: var(--gh-surface-soft); }
.gr-tab-btn.active {
    color: var(--gh-brand-strong);
    border-bottom-color: var(--gh-brand);
    font-weight: 700;
}

.gr-tab { display: none; }
.gr-tab.active { display: block; }

/* Kartu contoh kalimat */
.ex-card { transition: border-color .15s ease; }
.ex-card:hover { border-color: var(--gh-border-strong); }
.ex-jp, .ex-id { font-family: inherit; }

/* Opsi pilihan ganda kuis */
.mc-opt {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--gh-text);
    background: #fff;
    border: 1px solid var(--gh-border-strong);
    border-radius: var(--gh-radius-sm);
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mc-opt:hover:not(:disabled):not(.correct):not(.wrong) {
    background: var(--gh-surface-soft);
    border-color: var(--gh-text-3);
}
.mc-opt:disabled { cursor: default; }
.mc-opt.correct {
    background: var(--gh-success-soft) !important;
    border-color: #A6F4C5 !important;
    color: #027A48 !important;
    font-weight: 700;
}
.mc-opt.wrong {
    background: #FEF3F2 !important;
    border-color: #FDA29B !important;
    color: #B42318 !important;
    font-weight: 700;
}

/* Umpan balik jawaban */
.quiz-hint {
    display: none;
    margin-top: 14px;
    padding: 11px 14px;
    border-radius: var(--gh-radius-sm);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}
.quiz-hint.show { display: block; }
.quiz-hint.ok { background: var(--gh-success-soft); color: #027A48; border: 1px solid #A6F4C5; }
.quiz-hint.ng { background: #FEF3F2; color: #B42318; border: 1px solid #FDA29B; }

/* Progres kuis */
.quiz-progress-bar { overflow: hidden; }
.quiz-progress-fill {
    height: 100%;
    background: var(--gh-brand);
    border-radius: 999px;
    transition: width .4s ease;
}

/* Kartu grup pada daftar grammar */
.group-body { transition: opacity .2s ease; }

/* Bar progres kecil (dipakai bersama .ui-progress) */
.prog-bar {
    height: 6px;
    background: #F2F4F7;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0;
}




/* ============================================================
   LANDING PAGE — Apple-style
   ------------------------------------------------------------
   Ciri khas: tipografi besar & rapat, banyak ruang kosong,
   transisi lembut, fokus pada produk, tanpa ornamen berlebih.
   ============================================================ */

.lp { -webkit-font-smoothing: antialiased; }

/* Wadah konten dengan lebar baca nyaman */
.lp-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.lp-wrap-narrow { max-width: 820px; }

/* Tipografi besar ala Apple */
.lp-display {
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--gh-text);
}
.lp-headline {
    font-size: clamp(1.9rem, 4.6vw, 3.2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.028em;
    color: var(--gh-text);
}
.lp-subhead {
    font-size: clamp(1.05rem, 2.1vw, 1.35rem);
    line-height: 1.5;
    font-weight: 400;
    color: var(--gh-text-2);
    letter-spacing: -0.01em;
}
.lp-eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gh-brand);
}

.lp-flag {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    font-size: 0.82em;
    line-height: 1;
    letter-spacing: 0;
    vertical-align: baseline;
    white-space: nowrap;
}
.lp-body { font-size: 1.0625rem; line-height: 1.6; color: var(--gh-text-2); }
.lp-caption { font-size: 0.8125rem; line-height: 1.5; color: var(--gh-text-3); }

/* Bagian: jarak napas besar */
.lp-section { padding: clamp(72px, 11vw, 132px) 0; }
.lp-section-tight { padding: clamp(48px, 7vw, 80px) 0; }

/* Latar bergantian */
.lp-bg-canvas { background: var(--gh-canvas); }
.lp-bg-surface { background: var(--gh-surface); }
.lp-bg-dark { background: #0B0D12; color: #F5F7FA; }
.lp-bg-dark .lp-headline,
.lp-bg-dark .lp-display { color: #FFFFFF; }
.lp-bg-dark .lp-subhead,
.lp-bg-dark .lp-body { color: #A6ADBB; }
.lp-bg-dark .lp-caption { color: #7A828F; }

/* Pembatas halus antar bagian */
.lp-hairline { height: 1px; background: var(--gh-border); border: 0; }

/* Tombol: bentuk kapsul, tanpa shadow berat */
.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 26px;
    border-radius: 980px;
    font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em;
    text-decoration: none; cursor: pointer;
    border: 1px solid transparent;
    transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, opacity .22s ease;
}
.lp-btn:active { transform: scale(.975); }
.lp-btn-primary { background: var(--gh-brand); color: #fff; }
.lp-btn-primary:hover { background: var(--gh-brand-strong); }
.lp-btn-ghost { background: transparent; color: var(--gh-brand); padding-left: 8px; padding-right: 8px; }
.lp-btn-ghost:hover { text-decoration: underline; text-underline-offset: 4px; }
.lp-btn-outline { background: transparent; color: var(--gh-text); border-color: var(--gh-border-strong); }
.lp-btn-outline:hover { background: var(--gh-surface-soft); }
.lp-bg-dark .lp-btn-outline { color: #fff; border-color: rgba(255,255,255,.28); }
.lp-bg-dark .lp-btn-outline:hover { background: rgba(255,255,255,.10); }
.lp-btn-lg { padding: 15px 32px; font-size: 1.0625rem; }

/* Kartu produk: minimal, tanpa border tebal */
.lp-tile {
    background: var(--gh-surface);
    border: 1px solid var(--gh-border);
    border-radius: 22px;
    overflow: hidden;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.lp-tile-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(16,24,40,.18);
    border-color: var(--gh-border-strong);
}
.lp-bg-dark .lp-tile {
    background: #14171F;
    border-color: rgba(255,255,255,.09);
}

/* Kaca (untuk elemen mengambang di atas gambar) */
.lp-glass {
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 16px;
}
.lp-bg-dark .lp-glass {
    background: rgba(20,23,31,.66);
    border-color: rgba(255,255,255,.10);
}

/* Maskot / karakter */
.lp-hero-art { position: relative; }
.lp-hero-art img {
    width: 100%; height: auto; display: block;
    filter: drop-shadow(0 28px 48px rgba(16,24,40,.16));
}
/* Lingkaran lembut di belakang karakter */
.lp-hero-glow {
    position: absolute;
    inset: 6% 4% 4% 6%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 45%, rgba(255,77,77,.20), rgba(255,77,77,.05) 55%, transparent 72%);
    filter: blur(24px);
    z-index: -1;
}

/* Kartu contoh huruf (kana/kanji) */
.lp-glyph {
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px;
    background: var(--gh-surface-soft);
    border: 1px solid var(--gh-border);
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 700;
    color: var(--gh-text);
}
.lp-bg-dark .lp-glyph { background: #1B1F28; border-color: rgba(255,255,255,.09); }

/* Animasi masuk yang halus saat halaman dibuka */
@keyframes lp-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.lp-rise { animation: lp-rise .8s cubic-bezier(.22,1,.36,1) both; }
.lp-rise-1 { animation-delay: .06s; }
.lp-rise-2 { animation-delay: .14s; }
.lp-rise-3 { animation-delay: .22s; }
.lp-rise-4 { animation-delay: .30s; }

/* Muncul saat digulir */
.lp-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.lp-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .lp-rise, .lp-reveal { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; }
    .lp-tile, .lp-btn { transition: none !important; }
}

/* Strip metrik */
.lp-metric-value {
    font-size: clamp(1.75rem, 3.6vw, 2.6rem);
    font-weight: 700; letter-spacing: -0.03em; line-height: 1;
    color: var(--gh-text);
}
.lp-bg-dark .lp-metric-value { color: #fff; }
.lp-metric-label { font-size: 0.8125rem; color: var(--gh-text-2); margin-top: 8px; }
.lp-bg-dark .lp-metric-label { color: #A6ADBB; }

/* Grid langkah bernomor */
.lp-step-num {
    font-size: 0.75rem; font-weight: 700; letter-spacing: .1em;
    color: var(--gh-brand);
}

/* ============================================================
   FOOTER — Gelap sinematik dengan aksen brand
   ============================================================ */
.gh-footer { position: relative; overflow: hidden; }

.gh-footer-glow {
    position: absolute;
    top: -180px; left: 50%;
    width: 720px; height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(255, 77, 77, .16), transparent 72%);
    pointer-events: none;
}

.gh-footer-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: 16px;
}

.gh-footer-link {
    color: #98A2B3;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
    display: inline-block;
}
.gh-footer-link:hover { color: #FFFFFF; transform: translateX(3px); }

.gh-footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #E7E9EE;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .09);
    padding: 6px 12px;
    border-radius: 999px;
}

.gh-footer-social {
    width: 38px; height: 38px;
    display: inline-grid;
    place-items: center;
    border-radius: 12px;
    color: #C4CAD6;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .08);
    transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
}
.gh-footer-social:hover {
    color: #FFFFFF;
    background: var(--gh-brand);
    border-color: var(--gh-brand);
    transform: translateY(-3px);
}

.gh-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
@media (min-width: 640px) {
    .gh-footer-bottom { flex-direction: row; }
}

.gh-footer-top {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #C4CAD6;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .09);
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.gh-footer-top:hover { background: rgba(255, 255, 255, .1); color: #FFFFFF; transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .gh-footer-link:hover, .gh-footer-social:hover, .gh-footer-top:hover { transform: none; }
}