/**
 * DeshKaBasha v2 — component styles + cohesive dark mode.
 * Loaded AFTER the theme CSS. Dark mode flips the theme's own CSS variables so
 * the entire site (old + new blocks) goes dark together.
 */

/* language fonts */
.dkb2-lang-te{font-family:var(--font-telugu)}
.dkb2-lang-hi{font-family:var(--font-hindi)}
.dkb2-lang-ta{font-family:var(--font-tamil)}
.dkb2-lang-kn{font-family:var(--font-kannada)}
.dkb2-lang-ml{font-family:var(--font-malayalam)}

/* generic grids */
.dkb2-grid{display:grid;gap:14px}
.dkb2-grid-phrase{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.dkb2-grid-letters{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
.dkb2-grid-num{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}

/* phrase / word card */
.dkb2-phrase{background:var(--soft-white);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:16px 16px 14px;box-shadow:var(--shadow-sm);transition:transform .3s var(--transition),box-shadow .3s}
.dkb2-phrase:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.dkb2-phrase-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dkb2-native{font-size:1.55rem;font-weight:700;color:var(--text-dark);line-height:1.25}
.dkb2-pron{color:var(--teal);font-size:.92rem;font-style:italic;margin-top:4px}
.dkb2-meaning{color:var(--text-muted);font-size:.95rem;margin-top:2px}

/* audio button */
.dkb2-audio{flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:1px solid var(--gold);background:transparent;color:var(--gold-dark);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:1rem;transition:transform .2s,background .2s,color .2s}
.dkb2-audio:hover{background:var(--gold);color:#1a1305}
.dkb2-audio.dkb2-playing{transform:scale(1.18);box-shadow:0 0 0 6px rgba(212,168,83,.18)}
.dkb2-speak{width:auto;padding:0 14px;border-radius:999px;gap:6px;font-weight:600;font-size:.85rem}

/* sentence list */
.dkb2-sentences{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dkb2-sentence{display:grid;grid-template-columns:1fr auto;grid-auto-rows:auto;align-items:center;gap:4px 12px;background:var(--soft-white);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:12px 14px}
.dkb2-s-native{font-size:1.2rem;font-weight:600;color:var(--text-dark)}
.dkb2-sentence .dkb2-audio{grid-row:1 / span 2;width:34px;height:34px}
.dkb2-s-pron{color:var(--teal);font-size:.85rem;font-style:italic}
.dkb2-s-en{grid-column:1 / -1;color:var(--text-muted);font-size:.92rem;border-top:1px dashed var(--glass-border);padding-top:6px;margin-top:2px}

/* letter / varnamala card */
.dkb2-letter{background:var(--soft-white);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:12px 10px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .3s}
.dkb2-letter:hover{transform:translateY(-3px) scale(1.02)}
.dkb2-letter-top{display:flex;align-items:center;justify-content:center;gap:6px}
.dkb2-letter-char{font-size:2rem;font-weight:700;color:var(--text-dark);line-height:1}
.dkb2-letter .dkb2-audio{width:30px;height:30px;font-size:.85rem}
.dkb2-letter-tr{color:var(--teal);font-size:.85rem;font-style:italic;margin-top:4px}
.dkb2-letter-mn{color:var(--text-muted);font-size:.74rem;margin-top:3px;line-height:1.35;min-height:2em}
.dkb2-letter-type{display:inline-block;margin-top:6px;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-dark);border:1px solid var(--gold);border-radius:999px;padding:2px 8px}

/* numbers */
.dkb2-num{background:var(--soft-white);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:10px 8px;text-align:center;position:relative}
.dkb2-num-d{display:block;font-weight:800;color:var(--gold-dark);font-size:1.1rem}
.dkb2-num-n{display:block;font-size:1.25rem;font-weight:700;color:var(--text-dark);margin:2px 0}
.dkb2-num .dkb2-audio{position:absolute;top:6px;right:6px;width:26px;height:26px;font-size:.75rem}
.dkb2-num-p{display:block;color:var(--text-muted);font-size:.72rem;font-style:italic}

/* compare table */
.dkb2-compare-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--glass-border)}
.dkb2-compare{border-collapse:collapse;width:100%;min-width:640px;background:var(--soft-white)}
.dkb2-compare th,.dkb2-compare td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--glass-border);vertical-align:middle}
.dkb2-compare thead th{background:var(--charcoal);color:var(--gold-light);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;position:sticky;top:0}
.dkb2-c-en{font-weight:600;color:var(--text-dark)}
.dkb2-c-native{font-size:1.1rem;font-weight:600;color:var(--text-dark);display:block}
.dkb2-c-pron{display:block;color:var(--teal);font-size:.78rem;font-style:italic}
.dkb2-compare td .dkb2-audio{width:30px;height:30px}

/* note boxes */
.dkb2-note{border-radius:var(--radius-md);padding:16px 18px;margin:18px 0}
.dkb2-note h4{margin:0 0 8px;font-size:1rem}
.dkb2-note ul{margin:0;padding-left:20px}
.dkb2-note li{margin:4px 0;color:var(--text-muted)}
.dkb2-note-warn{background:rgba(231,111,81,.08);border:1px solid rgba(231,111,81,.3)}
.dkb2-note-warn h4{color:var(--coral)}
.dkb2-note-culture{background:rgba(13,148,136,.08);border:1px solid rgba(13,148,136,.3)}
.dkb2-note-culture h4{color:var(--teal)}

/* sections inside lessons */
.dkb2-sec{margin:30px 0}
.dkb2-sec-title{display:flex;align-items:center;gap:8px;font-size:1.25rem;color:var(--text-dark);border-left:4px solid var(--gold);padding-left:12px;margin-bottom:14px}

/* quizzes */
.dkb2-quiz{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.dkb2-q{background:var(--soft-white);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:18px;box-shadow:var(--shadow-sm)}
.dkb2-q-text{font-weight:600;color:var(--text-dark);margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dkb2-opts{display:flex;flex-wrap:wrap;gap:10px}
.dkb2-opt{flex:1 1 45%;min-width:140px;text-align:left;background:#fff;border:1.5px solid var(--glass-border);border-radius:var(--radius-sm);padding:11px 14px;cursor:pointer;font-size:.95rem;color:var(--text-dark);transition:.2s}
.dkb2-opt:hover{border-color:var(--gold);background:var(--gold-glow)}
.dkb2-opt.correct{border-color:var(--teal);background:rgba(13,148,136,.12);color:var(--teal)}
.dkb2-opt.wrong{border-color:var(--coral);background:rgba(231,111,81,.12);color:var(--coral)}
.dkb2-fill{display:flex;gap:10px;flex-wrap:wrap}
.dkb2-fill-in{flex:1;min-width:180px;border:1.5px solid var(--glass-border);border-radius:var(--radius-sm);padding:11px 14px;font-size:1rem;background:#fff;color:var(--text-dark)}
.dkb2-fill-in.correct{border-color:var(--teal)}
.dkb2-fill-in.wrong{border-color:var(--coral)}
.dkb2-match{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.dkb2-match-col{display:flex;flex-direction:column;gap:8px}
.dkb2-mbtn{text-align:left;background:#fff;border:1.5px solid var(--glass-border);border-radius:var(--radius-sm);padding:10px 12px;cursor:pointer;color:var(--text-dark);transition:.2s}
.dkb2-mbtn.sel{border-color:var(--gold);background:var(--gold-glow)}
.dkb2-mbtn.correct{border-color:var(--teal);background:rgba(13,148,136,.12)}
.dkb2-mbtn.wrong{border-color:var(--coral);background:rgba(231,111,81,.12)}
.dkb2-feedback{margin:12px 0 0;font-weight:600;min-height:1.2em}
.dkb2-feedback.ok{color:var(--teal)}
.dkb2-feedback.no{color:var(--coral)}
.btn.btn-gold{background:var(--gold-gradient);color:#1a1305;border:none;border-radius:999px;padding:10px 20px;font-weight:700;cursor:pointer}

/* accordion (vocab / sentences) */
.dkb2-accordion{display:flex;flex-direction:column;gap:10px}
.dkb2-acc-item{background:var(--soft-white);border:1px solid var(--glass-border);border-radius:var(--radius-md);overflow:hidden}
.dkb2-acc-sum{cursor:pointer;padding:14px 18px;font-weight:700;color:var(--text-dark);list-style:none;display:flex;justify-content:space-between;align-items:center}
.dkb2-acc-sum::-webkit-details-marker{display:none}
.dkb2-acc-item[open] .dkb2-acc-sum{border-bottom:1px solid var(--glass-border)}
.dkb2-acc-count{background:var(--gold-glow);color:var(--gold-dark);border-radius:999px;padding:2px 10px;font-size:.78rem}
.dkb2-acc-body{padding:16px}

/* coming soon */
.dkb2-coming{text-align:center;max-width:560px;margin:30px auto;padding:40px 26px;background:var(--soft-white);border:1px dashed var(--gold);border-radius:var(--radius-lg)}
.dkb2-coming-icon{font-size:2.4rem}
.dkb2-coming h3{margin:10px 0 8px;color:var(--text-dark)}
.dkb2-coming p{color:var(--text-muted)}
.dkb2-notify{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.dkb2-notify input{flex:1;min-width:200px;border:1.5px solid var(--glass-border);border-radius:999px;padding:11px 18px;background:#fff;color:var(--text-dark)}
.dkb2-coming-soon-note{font-size:.78rem;color:var(--text-light);margin-top:8px}

/* starter path */
.dkb2-starter{list-style:none;counter-reset:d;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dkb2-starter-item{display:flex;align-items:center;gap:14px;background:var(--soft-white);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:14px 16px;transition:.25s}
.dkb2-starter-item.done{border-color:var(--teal);background:rgba(13,148,136,.06)}
.dkb2-day{flex:0 0 auto;background:var(--gold-gradient);color:#1a1305;font-weight:800;font-size:.78rem;border-radius:999px;padding:5px 12px}
.dkb2-starter-item a{flex:1;font-weight:600;color:var(--text-dark)}
.dkb2-tick{opacity:0;color:var(--teal);font-weight:800;transition:.25s}
.dkb2-starter-item.done .dkb2-tick{opacity:1}

/* progress page + rings + bars */
.dkb2-progress-page{display:flex;flex-direction:column;gap:24px;align-items:center}
.dkb2-prog-card{text-align:center}
.dkb2-ring{--p:0;width:140px;height:140px;border-radius:50%;margin:6px auto 12px;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(212,168,83,.15) 0);position:relative}
.dkb2-ring::before{content:'';position:absolute;inset:12px;border-radius:50%;background:var(--soft-white)}
.dkb2-ring-v{position:relative;font-weight:800;font-size:1.6rem;color:var(--gold-dark)}
.dkb2-prog-langs{width:100%;max-width:640px;display:flex;flex-direction:column;gap:14px}
.dkb2-prog-lang-top{display:flex;justify-content:space-between;font-weight:600;color:var(--text-dark);margin-bottom:5px}
.dkb2-bar{height:10px;border-radius:999px;background:rgba(212,168,83,.15);overflow:hidden}
.dkb2-bar span{display:block;height:100%;background:var(--gold-gradient);border-radius:999px;transition:width .6s var(--transition)}
.dkb2-prog-note{color:var(--text-light);font-size:.85rem}

/* lesson mark-done + confetti */
.dkb2-lesson-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:34px;padding-top:20px;border-top:1px solid var(--glass-border)}
.dkb2-mark-done{background:var(--teal);color:#fff;border:none;border-radius:999px;padding:12px 22px;font-weight:700;cursor:pointer;transition:.25s}
.dkb2-mark-done.done{background:rgba(13,148,136,.15);color:var(--teal);border:1.5px solid var(--teal)}
.dkb2-next{font-weight:600;color:var(--teal)}
.dkb2-conf{position:absolute;top:0;width:8px;height:8px;border-radius:2px;pointer-events:none;animation:dkb2pop .9s ease-out forwards}
@keyframes dkb2pop{from{transform:translate(0,0) rotate(0);opacity:1}to{transform:translate(var(--dx,0),-90px) rotate(220deg);opacity:0}}

/* header tools */
.dkb2-header-tools{display:flex;align-items:center;gap:8px;margin-left:auto;margin-right:12px}
.dkb2-theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--glass-border);background:var(--glass-white);cursor:pointer;font-size:1rem;display:inline-flex;align-items:center;justify-content:center}
.dkb2-ic-sun{display:none}
.dkb2-dark .dkb2-ic-sun{display:inline}
.dkb2-ic-moon{display:inline}
.dkb2-dark .dkb2-ic-moon{display:none}
.dkb2-continue,.dkb2-install{font-size:.8rem;font-weight:700;border-radius:999px;padding:8px 14px;text-decoration:none;white-space:nowrap}
.dkb2-continue{background:var(--teal);color:#fff}
.dkb2-install{background:var(--gold-gradient);color:#1a1305;border:none;cursor:pointer}
@media (max-width:620px){ .dkb2-continue span,.dkb2-install{font-size:.72rem;padding:7px 10px} }

/* level hub cards row */
.dkb2-levels{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.dkb2-level-card{display:block;background:var(--soft-white);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:18px;text-align:center;transition:.3s;color:var(--text-dark)}
.dkb2-level-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--gold)}
.dkb2-level-card .lv{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-dark);font-weight:700}
.dkb2-level-card h4{margin:6px 0 4px}
.dkb2-level-card.soon{opacity:.7;border-style:dashed}

/* small hub stat strip */
.dkb2-hub-hero{background:linear-gradient(135deg,var(--charcoal),var(--navy));color:#fff;border-radius:var(--radius-lg);padding:28px;margin-bottom:24px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.dkb2-hub-hero h2{color:#fff;margin:0 0 6px}
.dkb2-hub-hero p{color:rgba(255,255,255,.75);margin:0}

/* ===================== DARK MODE ===================== */
html.dkb2-dark{
    --cream:#0e1422; --soft-white:#131c30; --text-dark:#eef2f9; --text-muted:#a7b2c6; --text-light:#7f8aa0;
    --glass-white:rgba(255,255,255,.05); --glass-border:rgba(255,255,255,.10); --glass-strong:rgba(255,255,255,.14);
    --shadow-sm:0 2px 8px rgba(0,0,0,.3); --shadow-md:0 8px 30px rgba(0,0,0,.4);
}
html.dkb2-dark body{background-color:var(--cream);color:var(--text-dark)}
html.dkb2-dark .post-card,
html.dkb2-dark .language-card,
html.dkb2-dark .feature-card,
html.dkb2-dark .entry-content,
html.dkb2-dark .dkb-page,
html.dkb2-dark .dkb-page-inner,
html.dkb2-dark .word-of-day,
html.dkb2-dark .newsletter-section,
html.dkb2-dark .sidebar .widget,
html.dkb2-dark input,
html.dkb2-dark textarea,
html.dkb2-dark .dkb2-opt,
html.dkb2-dark .dkb2-mbtn,
html.dkb2-dark .dkb2-fill-in,
html.dkb2-dark .dkb2-notify input{background:var(--soft-white);color:var(--text-dark);border-color:var(--glass-border)}
html.dkb2-dark .dkb2-ring::before{background:var(--soft-white)}
html.dkb2-dark a{color:var(--teal-light)}
html.dkb2-dark .section-padding[style*="soft-white"]{background:var(--navy) !important}

@media (prefers-reduced-motion: reduce){
    .dkb2-phrase,.dkb2-letter,.dkb2-level-card,.dkb2-conf{transition:none !important;animation:none !important}
}