/* Kinva — app screens (words, cards, review, posts) */

.k-app-main { padding: 26px 0 80px; }

/* ---------- sublist grid ---------- */
.k-sublists { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.k-sublist-card { cursor: pointer; position: relative; overflow: hidden; }
.k-sublist-card .k-sub-num {
  width: 54px; height: 54px; border-radius: 16px; font-size: 1.4rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.k-progressbar { height: 10px; border-radius: 999px; background: var(--k-border); overflow: hidden; margin-top: 14px; }
.k-progressbar > div {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--k-sky), var(--k-primary));
  transition: width 600ms var(--k-ease);
}

/* ---------- words grid ---------- */
.k-words { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.k-word-tile {
  cursor: pointer; text-align: center; padding: 18px 12px;
  border: 2px solid var(--k-border); border-radius: var(--k-radius); background: var(--k-surface);
  transition: transform var(--k-fast) var(--k-ease), border-color var(--k-fast), box-shadow var(--k-fast);
}
.k-word-tile:hover { transform: translateY(-3px) scale(1.02); border-color: var(--k-primary); box-shadow: var(--k-shadow); }
.k-word-tile:active { transform: scale(0.96); }
.k-word-tile .k-emoji { font-size: 2.4rem; margin-bottom: 6px; }
.k-word-tile .k-w { font-weight: 900; font-size: 1.05rem; }
.k-word-tile.k-known { border-color: var(--k-green); background: var(--k-green-soft); }

/* ---------- word card ---------- */
.k-wordcard { text-align: center; }
.k-wordcard .k-visual {
  width: 132px; height: 132px; margin: 0 auto 14px; border-radius: 32px;
  display: flex; align-items: center; justify-content: center; font-size: 4rem;
  background: linear-gradient(135deg, var(--k-primary-soft), var(--k-sky-soft));
  box-shadow: inset 0 0 0 2px rgba(91,95,239,.08);
}
.k-wordcard h2 { font-size: 2.2rem; margin: 6px 0 2px; letter-spacing: .3px; }
.k-wordcard .k-ipa { color: var(--k-text-faint); font-size: 1rem; direction: ltr; }
.k-wordcard .k-translation {
  font-size: 1.5rem; font-weight: 900; color: var(--k-primary); margin: 10px 0 4px;
}
.k-wordcard .k-def { color: var(--k-text-soft); max-width: 40ch; margin-inline: auto; }
.k-wordcard .k-example {
  background: var(--k-yellow-soft); border-radius: var(--k-radius); padding: 12px 16px;
  margin: 14px 0; font-style: italic; color: #7C5E10; direction: ltr;
}

/* mic button */
.k-mic {
  width: 72px; height: 72px; border: none; border-radius: 50%; cursor: pointer;
  font-size: 1.9rem; color: #fff; margin: 8px auto;
  background: linear-gradient(135deg, var(--k-violet), var(--k-sky));
  box-shadow: 0 8px 22px rgba(91, 95, 239, 0.4);
  transition: transform var(--k-fast) var(--k-ease);
  display: flex; align-items: center; justify-content: center;
}
.k-mic:hover { transform: scale(1.08); }
.k-mic:active { transform: scale(0.9); }
.k-mic.k-speaking { animation: k-pulse-ring 1.1s ease-out infinite; }
.k-mic-hint { font-size: .8rem; color: var(--k-text-faint); margin-bottom: 8px; }
.k-speed-tag {
  display: inline-block; min-width: 74px; font-size: .78rem; font-weight: 800;
  padding: 3px 12px; border-radius: 999px; background: var(--k-sky-soft); color: #0369A1;
  opacity: 0; transition: opacity var(--k-fast);
}
.k-speed-tag.show { opacity: 1; }

/* card nav arrows */
.k-card-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }

/* ---------- header bits ---------- */
.k-nav-tabs { display: flex; gap: 4px; margin-inline: auto; }
.k-nav-tab {
  padding: 9px 18px; border-radius: 999px; border: none; background: transparent;
  font-weight: 800; font-size: .95rem; color: var(--k-text-soft); cursor: pointer;
  transition: background var(--k-fast), color var(--k-fast);
}
.k-nav-tab:hover { background: var(--k-primary-soft); }
.k-nav-tab.active { background: var(--k-primary); color: #fff; }

.k-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--k-coral), var(--k-yellow)); color: #fff; font-weight: 900; cursor: pointer;
}

/* ---------- daily posts ---------- */
.k-post { margin-bottom: 22px; }
.k-post-body {
  margin-top: 14px; line-height: 1.9; font-size: 1.05rem;
  background: #FCFDFF; border: 1px solid var(--k-border); border-radius: var(--k-radius);
  padding: 18px 20px; text-align: left;
}
.k-blank-wrap { position: relative; display: inline-block; vertical-align: baseline; margin: 0 2px; }
.k-blank-wrap:focus-within { background: var(--k-primary-soft); border-radius: 4px; }
.k-blank-dots { font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace; font-weight: 800; font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--k-text-soft); white-space: pre; -webkit-user-select: none; user-select: none; }
.k-blank { position: absolute; left: 0; top: 0; width: 100%; height: 100%; box-sizing: border-box; border: none; outline: none; background: transparent; margin: 0; padding: 0; text-align: left; font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace; font-weight: 800; font-size: 16px; line-height: 1.5; letter-spacing: 0; color: var(--k-text); caret-color: var(--k-primary); }
.k-blank.k-blank-ok { color: var(--k-green); }
.k-blank.k-blank-bad { color: var(--k-red); animation: k-shake 320ms ease; }
.k-comment {
  background: var(--k-bg); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; position: relative;
}
.k-comment .k-cdel {
  position: absolute; inset-inline-end: 8px; top: 8px; border: none; background: none;
  color: var(--k-text-faint); cursor: pointer; font-size: .85rem;
}
.k-comment .k-cdel:hover { color: var(--k-red); }

/* ---------- post thumbnail, model answer, ad slots ---------- */
.k-post-thumb {
  width: 100%; max-height: 320px; object-fit: cover;
  border-radius: var(--k-radius); margin-top: 12px;
}
.k-answer {
  margin-top: 14px; padding: 14px 18px; border-radius: var(--k-radius);
  background: var(--k-green-soft); border: 1.5px solid var(--k-green);
  color: #14532D; line-height: 1.9; direction: ltr; text-align: left;
  animation: k-pop-in var(--k-med) var(--k-ease) both;
}
.k-ad-slot { margin: 18px auto; text-align: center; min-height: 0; }

/* bottom area switcher (Articles | Words) — fixed, like the blog's bottom tabs */
.k-areabar { position:fixed; left:0; right:0; bottom:14px; z-index:80; margin-inline:auto;
  width:min(420px,calc(100% - 24px)); display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:8px;
  border:1px solid var(--k-border); border-radius:999px; background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); box-shadow:var(--k-shadow); }
body.theme-dark .k-areabar { background:rgba(15,23,42,.9); }
.k-areabar a, .k-areabar button { border:none; border-radius:999px; padding:11px 12px; font-weight:900;
  font-family:inherit; font-size:1rem; text-align:center; cursor:pointer; text-decoration:none;
  color:var(--k-primary); background:var(--k-primary-soft); }
.k-areabar a.active, .k-areabar button.active { background:var(--k-primary); color:#fff; }
.k-app-main { padding-bottom: 92px; }

@media (max-width: 640px) {
  .k-app-main { padding-bottom: 96px; }
  .k-header { align-items: center; gap: 8px; }
  .k-logo-name { display: none; }
  .k-nav-tabs { flex: 1; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
  .k-nav-tabs::-webkit-scrollbar { display: none; }
  .k-nav-tab { padding: 8px 12px; font-size: .85rem; white-space: nowrap; }
  .k-wordcard h2 { font-size: 1.7rem; }
  .k-wordcard .k-visual { width: 104px; height: 104px; font-size: 3.1rem; }
}

/* ====================================================================
   Block content: inline images + responsive YouTube (reader & public)
   ==================================================================== */
.k-para { margin: 0 0 12px; }
.k-para:last-child { margin-bottom: 0; }
.k-inline-img {
  display: block; width: 100%; max-width: 100%; height: auto;
  border-radius: var(--k-radius); margin: 14px 0; box-shadow: var(--k-shadow-sm);
}
.k-yt {
  position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 16px 0;
  border-radius: var(--k-radius); overflow: hidden; background: #000; box-shadow: var(--k-shadow-sm);
}
.k-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* bigger, mobile-friendly cloze blanks — 16px font stops iOS auto-zoom and
   gives a comfortable tap target so typing works on phones */
input.k-blank { font-size: 16px; -webkit-user-select: text; user-select: text; }

/* ====================================================================
   Blogger-style rich composer (admin only)
   ==================================================================== */

.k-btn-sm { padding: 8px 14px; font-size: .9rem; }
.k-editor {
  min-height: 320px; max-height: 70vh; overflow-y: auto;
  border: 2px solid var(--k-border); border-radius: var(--k-radius);
  padding: 16px 18px; background: #FCFDFF; color: var(--k-text);
  font-size: 1.05rem; line-height: 1.9; text-align: left;
  outline: none; transition: border-color var(--k-fast), box-shadow var(--k-fast);
  -webkit-user-select: text; user-select: text;
}
.k-editor:focus { border-color: var(--k-primary); box-shadow: 0 0 0 4px rgba(91,95,239,.15); }
.k-editor:empty::before { content: attr(data-ph); color: var(--k-text-faint); }
.k-editor img.k-editor-img { display: block; max-width: 100%; height: auto; border-radius: 12px; margin: 10px 0; }
.k-editor-yt {
  position: relative; display: inline-block; max-width: 320px; width: 100%;
  margin: 10px 0; border-radius: 12px; overflow: hidden; user-select: none;
}
.k-editor-yt img { display: block; width: 100%; height: auto; }
.k-editor-yt .k-yt-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; color: #fff; background: rgba(0,0,0,.28); text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.k-preview { margin-top: 14px; }


/* ====== toolbar buttons + HTML source view ====== */
.k-tbtn { border:1px solid var(--k-border); background:var(--k-surface); color:var(--k-text); border-radius:10px; padding:7px 11px; font-weight:800; font-size:.95rem; cursor:pointer; line-height:1; }
.k-tbtn:hover { background:var(--k-primary-soft); color:var(--k-primary); border-color:var(--k-primary); }
.k-tbtn-code { font-family:monospace; }
.k-editor-html { min-height:320px; max-height:70vh; font-family:monospace; font-size:14px; line-height:1.6; white-space:pre; }

/* ====== rich rendered HTML (tables, lists, headings) ====== */
.k-rich h1,.k-rich h2,.k-rich h3,.k-rich h4,.k-rich h5,.k-rich h6 { line-height:1.3; margin:.6em 0 .3em; }
.k-rich p { margin:0 0 10px; }
.k-rich ul,.k-rich ol { margin:0 0 10px; padding-inline-start:24px; }
.k-rich blockquote { margin:10px 0; padding:8px 16px; border-inline-start:4px solid var(--k-primary); background:var(--k-primary-soft); border-radius:8px; }
.k-rich pre { background:#0b1220; color:#e2e8f0; padding:12px 14px; border-radius:10px; overflow:auto; direction:ltr; }
.k-rich code { background:var(--k-primary-soft); padding:1px 5px; border-radius:5px; }
.k-rich table { border-collapse:collapse; width:100%; margin:12px 0; }
.k-rich th,.k-rich td { border:1px solid var(--k-border); padding:8px 12px; text-align:start; }
.k-rich th { background:var(--k-primary-soft); font-weight:800; }
.k-rich a { color:var(--k-primary); font-weight:700; text-decoration:underline; }

/* ====== reactions ====== */
.k-react-row { position:relative; }
.k-react-btn.k-reacted { background:var(--k-primary-soft); color:var(--k-primary); }
.k-react-pop { position:absolute; bottom:48px; inset-inline-start:0; z-index:30; display:flex; gap:4px; padding:6px 8px; background:var(--k-surface); border:1px solid var(--k-border); border-radius:999px; box-shadow:var(--k-shadow-lg); }
.k-react-opt { border:none; background:transparent; font-size:1.5rem; cursor:pointer; line-height:1; padding:4px; border-radius:50%; transition:transform .12s ease; }
.k-react-opt:hover { transform:scale(1.35); }

/* ====== admin exit bar + dashboard stats ====== */

.k-stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; }
.k-stat { background:var(--k-bg); border:1px solid var(--k-border); border-radius:14px; padding:14px; text-align:center; }
.k-stat-n { font-size:1.8rem; font-weight:900; color:var(--k-primary); line-height:1; }
.k-stat-l { font-size:.82rem; color:var(--k-text-faint); margin-top:6px; font-weight:700; }


/* ====== type 3 (Q&A) + type 4 (MCQ) builders — admin ====== */
.k-qa-builder, .k-mcq-builder { margin-top:12px; padding:12px; border:1px dashed var(--k-border); border-radius:14px; background:var(--k-bg); }
.k-qa-row, .k-mcq-row { border:1px solid var(--k-border); border-radius:12px; padding:10px; margin-bottom:10px; background:var(--k-surface); display:grid; gap:8px; }
.k-qa-row [data-role=qadel], .k-mcq-row [data-role=mcqdel] { justify-self:end; }
.k-mcq-opt { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.k-mcq-opt input[type=radio] { width:20px; height:20px; flex:0 0 auto; accent-color:var(--k-primary); }
.k-mcq-opt .k-input { margin:0; }

/* ====== type 3 + type 4 render (reader + preview) ====== */
.k-qa { margin-top:16px; }
.k-qa-h { margin:0 0 10px; }
.k-qa-item { margin-bottom:12px; }
.k-qa-q { font-weight:800; margin-bottom:6px; }
.k-qa-ans { width:100%; }
.k-qa-reveal { margin-top:12px; display:grid; gap:8px; }
.k-qa-model { background:var(--k-green-soft); border:1px solid var(--k-green); border-radius:12px; padding:10px 14px; }
.k-qa-model .k-qa-a { color:#14532D; margin-top:4px; white-space:pre-wrap; }
.k-mcq { margin-top:16px; display:grid; gap:14px; }
.k-mcq-qtext { font-weight:800; margin-bottom:8px; }
.k-mcq-opts { display:grid; gap:8px; }
.k-mcq-choice { text-align:start; border:2px solid var(--k-border); background:var(--k-surface); color:var(--k-text); border-radius:12px; padding:11px 14px; font:inherit; font-weight:700; cursor:pointer; transition:border-color .15s, background .15s; }
.k-mcq-choice:hover { border-color:var(--k-primary); }
.k-mcq-choice.k-mcq-correct { border-color:var(--k-green); background:var(--k-green-soft); color:#15803D; }
.k-mcq-choice.k-mcq-wrong { border-color:var(--k-red); background:var(--k-red-soft); color:#B91C1C; }


/* ====== full-screen composer overlay (admin "+" new post) ====== */
.k-composer-overlay { position:fixed; inset:0; z-index:200; background:#fff; overflow-y:auto; }
body.theme-dark .k-composer-overlay { background:var(--k-bg); }

.k-composer-body { max-width:900px; margin:0 auto; padding:16px; }
.k-composer-body > .k-card { border:none; box-shadow:none; padding:0; background:transparent; }

.k-newpost-btn { font-size:1.05rem; }


/* ====== admin "my posts" list (Blogger-style) ====== */
.k-mp-row { display:flex; gap:12px; align-items:center; padding:10px; border:1px solid var(--k-border); border-radius:14px; margin-bottom:10px; background:var(--k-surface); }
.k-mp-thumb { width:84px; height:64px; object-fit:cover; border-radius:10px; flex:0 0 auto; }
.k-mp-noimg { display:flex; align-items:center; justify-content:center; background:var(--k-primary-soft); color:var(--k-primary); font-weight:900; text-transform:uppercase; }
.k-mp-info { flex:1; min-width:0; }
.k-mp-title { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.k-mp-stats { font-size:.85rem; color:var(--k-text-faint); margin-top:4px; }
.k-mp-acts { display:flex; gap:4px; flex:0 0 auto; }


/* ====== Blogger-like publish view: floating + button & slim header ====== */
.k-fab { position:fixed; inset-block-end:84px; inset-inline-end:18px; z-index:85; width:60px; height:60px; border-radius:50%; border:none; cursor:pointer; font-size:2.1rem; line-height:1; color:#fff; background:linear-gradient(135deg,var(--k-violet),var(--k-primary)); box-shadow:0 8px 26px rgba(91,95,239,.5); display:flex; align-items:center; justify-content:center; transition:transform .15s; }
.k-fab:hover { transform:scale(1.08); }
.k-fab:active { transform:scale(.94); }
.k-pub-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.k-mp-wrap { margin-bottom:20px; }


/* ====== app header unified with the blog topbar (gradient) ====== */
.k-header { position:sticky; top:0; z-index:90; gap:12px; padding:8px clamp(12px,4vw,40px);
  background:linear-gradient(90deg,#18245C 0%,#2468A8 56%,#27B7E8 100%);
  border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 8px 24px rgba(36,104,168,.22); }
body.theme-dark .k-header { background:linear-gradient(90deg,#081427 0%,#14265D 62%,#075985 100%); }
.k-brand { font-weight:900; font-size:1.5rem; color:#fff; text-decoration:none; letter-spacing:.3px; }
.k-burger { display:none; width:36px; height:36px; border:none; border-radius:10px; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; align-items:center; justify-content:center; flex:0 0 auto; }
.k-burger svg { width:22px; height:22px; }
.k-header .k-nav-tab { color:#E5E7EB; font-size:.9rem; padding:7px 13px; }
.k-header .k-nav-tab:hover { background:rgba(255,255,255,.14); color:#fff; }
.k-header .k-nav-tab.active { background:#fff; color:var(--k-primary); }
.k-header .k-avatar { width:34px; height:34px; font-size:.95rem; }
.k-drawer-back { position:fixed; inset:0; z-index:94; background:rgba(2,6,23,.5); }
.k-drawer-back.k-hidden, .k-drawer.k-hidden { display:none; }
.k-drawer { position:fixed; inset:0 auto 0 0; width:min(80vw,360px); z-index:95; background:var(--k-surface);
  padding:22px 18px; box-shadow:0 24px 70px rgba(2,6,23,.32); display:grid; gap:10px; align-content:start; }
.k-drawer .k-nav-tab { width:100%; text-align:start; padding:14px 16px; border-radius:14px; border:1px solid var(--k-border);
  background:var(--k-surface); color:var(--k-text); font-weight:800; font-size:1.1rem; cursor:pointer; }
.k-drawer .k-nav-tab.active { background:var(--k-primary); color:#fff; border-color:var(--k-primary); }
@media (max-width:640px) {
  .k-header .k-nav-tabs { display:none; }
  .k-burger { display:inline-flex; }
}


/* ====== shared dark mode (identical to the blog) ====== */
body.theme-dark { --k-bg:#071120; --k-surface:#101B2F; --k-border:#23304A; --k-text:#F8FAFC; --k-text-soft:#CBD5E1; --k-text-faint:#94A3B8; --k-primary-soft:#1C2750; background:#071120; color:#F8FAFC; }
/* ====== unified header: action icons + smaller, less crowded ====== */
.k-top-actions { display:flex; align-items:center; gap:6px; margin-inline-start:auto; }
.k-hicon { width:34px; height:34px; border:none; border-radius:10px; background:rgba(255,255,255,.14); color:#fff; cursor:pointer; font-size:1.05rem; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.k-hicon:hover { background:rgba(255,255,255,.24); }
.k-header { gap:8px; padding:7px clamp(10px,3.5vw,32px); }
.k-header .k-nav-tabs { flex:1; justify-content:center; gap:2px; }
.k-header .k-nav-tab { font-size:.82rem; padding:6px 10px; }
.k-header .k-avatar { width:32px; height:32px; font-size:.9rem; }
.k-brand { font-size:1.3rem; }
.k-burger { width:34px; height:34px; }


/* ====== header: match the blog exactly (LTR layout, SVG icons, smaller, gradient brand) ====== */
.k-header { direction: ltr; gap: 6px; padding: 6px clamp(8px,3vw,28px); }
.k-brand { background: linear-gradient(95deg,#FFFFFF 0%,#FFE27A 22%,#38BDF8 48%,#5B5FEF 70%,#FFFFFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.4rem; filter: drop-shadow(0 0 8px rgba(56,189,248,.35)); }
.k-burger { width: 34px; height: 34px; background: rgba(255,255,255,.12); }
.k-burger svg { width: 20px; height: 20px; }
.k-hicon { width: 34px; height: 34px; background: transparent; }
.k-hicon:hover { background: rgba(255,255,255,.14); }
.k-hicon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.k-header .k-nav-tab { font-size: .8rem; padding: 6px 9px; }
.k-header .k-avatar { width: 30px; height: 30px; font-size: .85rem; }
.k-top-actions { gap: 4px; }


/* ===== compact pass (app): smaller & less crowded ===== */
.k-drawer .k-nav-tab { font-size:.95rem; padding:10px 14px; }
.k-areabar a, .k-areabar button { padding:9px 10px; font-size:.92rem; }
.k-app-main h2 { font-size:1.2rem; }
.k-pub-head h2, .k-mp-wrap h2 { font-size:1.12rem; }
.k-sublist-card h3 { font-size:1.02rem; }
.k-card { padding:16px; }
.k-fab { width:52px; height:52px; font-size:1.8rem; inset-block-end:80px; }
.k-mp-row { padding:8px; }


/* ===== full stats dashboard (Step 5) ===== */
.k-stats-wrap { display:grid; gap:14px; }
.k-online { display:flex; align-items:center; gap:8px; font-weight:800; margin-top:10px; flex-wrap:wrap; }
.k-online .k-dot { width:10px; height:10px; border-radius:50%; background:var(--k-green); box-shadow:0 0 0 4px var(--k-green-soft); }
.k-range { display:flex; gap:6px; flex-wrap:wrap; margin:6px 0 10px; }
.k-range-btn { border:1px solid var(--k-border); background:var(--k-surface); color:var(--k-text); border-radius:999px; padding:6px 14px; font-weight:800; font-size:.85rem; cursor:pointer; }
.k-range-btn.active { background:var(--k-primary); color:#fff; border-color:var(--k-primary); }
.k-chart { display:flex; align-items:flex-end; gap:6px; height:150px; padding:10px; border:1px solid var(--k-border); border-radius:12px; background:var(--k-bg); overflow-x:auto; }
.k-bar-col { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1 0 24px; height:100%; justify-content:flex-end; }
.k-bar { width:62%; min-height:4px; background:linear-gradient(180deg,var(--k-sky),var(--k-primary)); border-radius:6px 6px 0 0; }
.k-bar-lb { font-size:.68rem; color:var(--k-text-faint); white-space:nowrap; }
.k-ctry-row { display:flex; align-items:center; gap:10px; margin:7px 0; }
.k-ctry-bar { flex:1; height:10px; background:var(--k-border); border-radius:999px; overflow:hidden; }
.k-ctry-bar i { display:block; height:100%; background:linear-gradient(90deg,var(--k-sky),var(--k-primary)); }
.k-mv-row { display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--k-border); }
.k-mv-row:last-child { border-bottom:none; }
.k-mv-t { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* ===== richer editor toolbar (Blogger-like) ===== */
.k-tsel { border:1px solid var(--k-border); background:var(--k-surface); color:var(--k-text); border-radius:10px; padding:6px 8px; font:inherit; font-size:.82rem; font-weight:700; cursor:pointer; }
.k-tcolor { position:relative; overflow:hidden; font-weight:900; }
.k-tcolor input[type=color] { position:absolute; inset:0; opacity:0; cursor:pointer; border:none; padding:0; }



/* ====================================================================
   Blogger-style composer rebuild — white canvas + Kinva blue accent.
   Original Kinva code; recreates the Blogger editor layout/feel without
   using any Blogger source. (Editor restyle — full structure)
   ==================================================================== */
.k-composer-overlay { background:#fff; }
body.theme-dark .k-composer-overlay { background:var(--k-bg); }
.k-composer-body { max-width:760px; margin:0 auto; padding:0; }
.k-bl-editor { display:block; }

/* sticky header wraps the top bar + toolbar so both stay visible */
.k-bl-head { position:sticky; top:0; z-index:6; background:#fff; }
body.theme-dark .k-bl-head { background:var(--k-surface); }

/* top bar: back · title (underline) · gear · preview · publish */
.k-bl-bar { display:flex; align-items:center; gap:6px; padding:8px 12px; border-bottom:1px solid var(--k-border); }
.k-bl-iconbtn { width:40px; height:40px; flex:0 0 auto; border:none; background:transparent; border-radius:50%;
  color:var(--k-text-soft); font-size:1.15rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--k-fast), color var(--k-fast); }
.k-bl-iconbtn:hover { background:var(--k-primary-soft); color:var(--k-primary); }
.k-bl-iconbtn svg { width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.k-bl-title { flex:1; min-width:0; border:none; border-bottom:2px solid var(--k-border); background:transparent;
  font:inherit; font-size:1.12rem; font-weight:800; color:var(--k-text); padding:8px 4px; outline:none; transition:border-color var(--k-fast); }
.k-bl-title::placeholder { color:var(--k-text-faint); font-weight:700; }
.k-bl-title:focus { border-bottom-color:var(--k-primary); }
.k-bl-publish { flex:0 0 auto; border:none; border-radius:999px; background:var(--k-primary); color:#fff;
  font:inherit; font-weight:800; font-size:.92rem; padding:9px 18px; cursor:pointer; transition:background var(--k-fast), transform var(--k-fast); }
.k-bl-publish:hover { background:var(--k-primary-dark); }
.k-bl-publish:active { transform:scale(.95); }

/* toolbar: flat icons + group dividers (Blogger look) */
.k-bl-toolbar { display:flex; align-items:center; gap:3px; flex-wrap:wrap; padding:5px 10px; border-bottom:1px solid var(--k-border); }
.k-bl-div { width:1px; height:24px; margin:0 5px; background:var(--k-border); flex:0 0 auto; }
.k-bl-toolbar .k-tbtn { border:none; background:transparent; color:var(--k-text-soft); border-radius:8px;
  min-width:36px; height:36px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:800; line-height:1; cursor:pointer; transition:background var(--k-fast), color var(--k-fast); }
.k-bl-toolbar .k-tbtn:hover { background:var(--k-primary-soft); color:var(--k-primary); }
.k-bl-toolbar .k-tsel { border:none; background:transparent; color:var(--k-text-soft); border-radius:8px;
  font:inherit; font-size:.85rem; font-weight:700; padding:7px 6px; cursor:pointer; }
.k-bl-toolbar .k-tsel:hover { background:var(--k-primary-soft); color:var(--k-primary); }
.k-bl-toolbar .k-tcolor { position:relative; overflow:hidden; }
.k-bl-toolbar .k-tcolor input[type=color] { position:absolute; inset:0; opacity:0; cursor:pointer; border:none; padding:0; }

/* pencil HTML / Compose dropdown menu */
.k-bl-pencil-wrap { position:relative; display:inline-flex; }
.k-bl-menu { position:absolute; top:42px; inset-inline-end:0; z-index:12; min-width:190px; display:grid; gap:2px;
  padding:6px; background:#fff; border:1px solid var(--k-border); border-radius:12px; box-shadow:var(--k-shadow-lg); }
body.theme-dark .k-bl-menu { background:var(--k-surface); }
.k-bl-menu[hidden] { display:none; }
.k-bl-menu button { border:none; background:transparent; text-align:start; font:inherit; font-size:.92rem; font-weight:700;
  color:var(--k-text); padding:9px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.k-bl-menu button:hover { background:var(--k-primary-soft); color:var(--k-primary); }

/* writing canvas: clean white page (borderless editor) */
.k-bl-canvas { padding:16px 16px 110px; }
.k-bl-canvas .k-cloze-hint { margin:0 0 10px; }
.k-bl-canvas .k-editor { min-height:58vh; max-height:none; border:none; border-radius:0; background:#fff;
  padding:12px 4px; box-shadow:none; font-size:1.08rem; }
body.theme-dark .k-bl-canvas .k-editor { background:var(--k-surface); }
.k-bl-canvas .k-editor:focus { border:none; box-shadow:none; }
.k-bl-canvas .k-editor-html { min-height:58vh; border:1px solid var(--k-border); border-radius:12px; padding:12px 14px; }

/* slide-in "Post settings" panel (opened from the gear) */
.k-bl-backdrop { position:fixed; inset:0; z-index:209; background:rgba(2,6,23,.42); opacity:0; transition:opacity var(--k-med); }
.k-bl-backdrop.open { opacity:1; }
.k-bl-backdrop[hidden] { display:none; }
.k-bl-settings { position:fixed; inset-block:0; inset-inline-end:0; z-index:210; width:min(360px,88vw);
  background:#fff; box-shadow:-18px 0 50px rgba(2,6,23,.22); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform var(--k-med) var(--k-ease); }
body.theme-dark .k-bl-settings { background:var(--k-surface); }
[dir="rtl"] .k-bl-settings { transform:translateX(-100%); }
.k-bl-settings.open { transform:translateX(0); }
.k-bl-settings[hidden] { display:none; }
.k-bl-settings-head { display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--k-border); flex:0 0 auto; }
.k-bl-settings-head strong { font-size:1.05rem; }
.k-bl-settings-body { padding:6px 16px 28px; overflow-y:auto; }
.k-bl-set-row { padding:14px 0; border-bottom:1px solid var(--k-border); }
.k-bl-set-row:last-child { border-bottom:none; }
.k-bl-set-row .k-label { display:block; margin-bottom:7px; }
.k-bl-set-row .k-input { margin:0; }

@media (max-width:560px) {
  .k-bl-bar { gap:3px; padding:7px 8px; }
  .k-bl-iconbtn { width:38px; height:38px; }
  .k-bl-publish { padding:8px 14px; font-size:.88rem; }
  .k-bl-title { font-size:1.02rem; }
  .k-bl-canvas { padding:14px 12px 110px; }
}


/* ====================================================================
   White Blogger-like header (overrides the earlier blue gradient)
   ==================================================================== */
.k-header{background:#fff;backdrop-filter:none;border-bottom:1px solid var(--k-border);box-shadow:0 1px 3px rgba(30,34,53,.06)}
.k-brand{background:linear-gradient(95deg,#6C5CE7 0%,#5B5FEF 45%,#38BDF8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:none}
.k-burger{background:transparent;color:#5f6368;width:40px;height:40px}
.k-burger svg{width:24px;height:24px}
.k-burger:hover{background:#f1f3f4;color:var(--k-primary)}
.k-hicon{background:transparent;color:#5f6368;width:40px;height:40px}
.k-hicon svg{width:24px;height:24px;stroke-width:2.2}
.k-hicon:hover{background:#f1f3f4;color:var(--k-primary)}
.k-header .k-nav-tab{color:var(--k-text-soft)}
.k-header .k-nav-tab:hover{background:#f1f3f4;color:var(--k-primary)}
.k-header .k-nav-tab.active{background:var(--k-primary);color:#fff}
body.theme-dark .k-header{background:var(--k-surface);border-bottom-color:rgba(255,255,255,.08)}
body.theme-dark .k-brand{background:linear-gradient(95deg,#A78BFA,#38BDF8);-webkit-background-clip:text;background-clip:text}
body.theme-dark .k-burger,body.theme-dark .k-hicon{color:#CBD5E1}
body.theme-dark .k-burger:hover,body.theme-dark .k-hicon:hover{background:rgba(255,255,255,.08);color:#fff}
body.theme-dark .k-header .k-nav-tab{color:#CBD5E1}


/* dark-mode reading body (was hardcoded near-white -> light text vanished) + lively cards */
body.theme-dark .k-post-body { background: var(--k-surface); border-color: var(--k-border); }
.blog-card { transition: transform var(--k-fast) var(--k-ease), box-shadow var(--k-fast); }
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--k-shadow-lg); }


/* ---- target-country picker (search + chips) ---- */
.k-cpick { border: 1px solid var(--k-border); border-radius: 12px; padding: 8px; background: var(--k-surface); }
.k-cpick-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.k-cchip { display: inline-flex; align-items: center; gap: 6px; background: var(--k-primary-soft); color: var(--k-primary); border-radius: 999px; padding: 4px 8px 4px 12px; font-weight: 800; font-size: .85rem; }
.k-cchip button { border: none; background: rgba(91,95,239,.18); color: inherit; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: .95rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.k-cpick-search { margin: 0 0 8px; }
.k-cpick-list { max-height: 210px; overflow-y: auto; display: grid; gap: 2px; }
.k-citem { text-align: start; border: none; background: transparent; color: var(--k-text); border-radius: 8px; padding: 9px 10px; font: inherit; font-weight: 700; cursor: pointer; }
.k-citem:hover { background: var(--k-primary-soft); color: var(--k-primary); }


/* ====================================================================
   Stats dashboard — real mobile layout (was showing desktop-style on phone)
   ==================================================================== */
@media (max-width: 640px) {
  .k-stats-wrap { gap: 12px; }
  .k-stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .k-stat { padding: 16px 10px; border-radius: 16px; }
  .k-stat-n { font-size: 1.6rem; }
  .k-stat-l { font-size: .78rem; }
  .k-online { font-size: .9rem; }
  .k-range { gap: 6px; }
  .k-range-btn { padding: 7px 12px; font-size: .82rem; flex: 1 1 auto; }
  .k-chart { height: 140px; padding: 8px; }
  .k-bar-lb { font-size: .62rem; }
  .k-mv-row, .k-ctry-row { font-size: .9rem; }
  .k-stats-wrap h2, .k-stats-wrap h3 { font-size: 1.05rem; }
}
@media (max-width: 380px) {
  .k-stats-grid { grid-template-columns: 1fr 1fr; }
  .k-stat-n { font-size: 1.45rem; }
}


/* ====================================================================
   Desktop polish — compact header icons + Blogger-style 2-column editor
   ==================================================================== */
@media (min-width: 721px) {
  .k-hicon, .k-burger { width: 36px; height: 36px; }
  .k-hicon svg, .k-burger svg { width: 20px; height: 20px; }
  .k-header { gap: 10px; padding: 6px clamp(14px, 3vw, 36px); }
  .k-header .k-nav-tab { font-size: .85rem; padding: 7px 12px; }
  .k-avatar { width: 34px; height: 34px; font-size: .9rem; }
}
@media (min-width: 980px) {
  .k-composer-body { max-width: 1080px; }
  .k-bl-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "head head" "canvas settings"; }
  .k-bl-head { grid-area: head; }
  .k-bl-canvas { grid-area: canvas; }
  .k-bl-settings { grid-area: settings; position: static; transform: none; width: auto; height: auto; max-height: none; box-shadow: none; border-inline-start: 1px solid var(--k-border); border-radius: 0; }
  .k-bl-settings[hidden] { display: flex; }
  .k-bl-backdrop { display: none !important; }
  .k-bl-bar [data-role=gear] { display: none; }
}


/* New-post button (desktop) vs floating + (mobile) */
.k-pub-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (min-width: 721px) { .k-fab { display: none; } }
@media (max-width: 720px) { .k-newpost-btn { display: none; } }


/* video interstitial (5s skip) */
.k-interstitial { position: fixed; inset: 0; z-index: 400; background: rgba(2,6,23,.85); display: flex; align-items: center; justify-content: center; padding: 16px; }
.k-int-box { background: var(--k-surface); border-radius: 18px; max-width: 520px; width: 100%; overflow: hidden; box-shadow: var(--k-shadow-lg); }
.k-int-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--k-border); }
.k-int-head span { font-weight: 800; color: var(--k-text-faint); font-size: .82rem; }
.k-int-skip { border: none; background: var(--k-primary); color: #fff; border-radius: 999px; padding: 7px 16px; font: inherit; font-weight: 800; cursor: pointer; }
.k-int-skip:disabled { background: var(--k-border); color: var(--k-text-faint); cursor: default; }
.k-int-ad { padding: 16px; min-height: 200px; display: flex; align-items: center; justify-content: center; text-align: center; }
.k-ad-zone:empty { display: none; }


/* admin-only ad placeholder (shows where an ad will appear; visitors see nothing) */
.k-ad-ph { border: 2px dashed var(--k-border); border-radius: 12px; padding: 16px 14px; text-align: center; color: var(--k-text-faint); font-weight: 800; font-size: .85rem; background: var(--k-bg); }


/* Blogger-style collapsible Post-settings sections (editor) */
.k-bl-set-sec { border-bottom: 1px solid var(--k-border); }
.k-bl-set-sec > summary { list-style: none; cursor: pointer; padding: 14px 2px; font-weight: 800; color: var(--k-text); display: flex; align-items: center; justify-content: space-between; gap: 8px; user-select: none; }
.k-bl-set-sec > summary::-webkit-details-marker { display: none; }
.k-bl-set-sec > summary::after { content: "⌄"; color: var(--k-text-faint); font-size: 1.15rem; line-height: 1; transition: transform .2s; }
.k-bl-set-sec[open] > summary::after { transform: rotate(180deg); }
.k-bl-set-sec > summary:hover { color: var(--k-primary); }
.k-bl-set-body { padding: 2px 2px 16px; }
.k-bl-set-body .k-input { margin: 0; }


/* ====================================================================
   Aurora polish — glassy header, livelier learning surfaces
   ==================================================================== */

/* glassy animated header (overrides the flat white pass above) */
.k-header { position: sticky; top: 0; background: rgba(255,255,255,.72); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--k-border); box-shadow: 0 1px 3px rgba(33,23,84,.05); }
.k-header::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--k-grad-aurora); opacity: .85; }
.k-brand { background: linear-gradient(100deg,#7C3AED 0%,#6C4CF1 20%,#C9A8FF 34%,#EC4899 50%,#BFEBFF 64%,#25B6F2 80%,#7C3AED 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: k-brand-flow 3.4s linear infinite, k-brand-glow 2.6s ease-in-out infinite alternate; }
body.theme-dark .k-header { background: rgba(16,27,47,.72); border-bottom-color: rgba(255,255,255,.08); }

/* nav tab active = gradient pill */
.k-header .k-nav-tab.active { background: var(--k-grad); color: #fff; box-shadow: 0 6px 16px -6px rgba(108,76,241,.6); }

/* word tiles: pop on hover, gradient accent when known */
.k-word-tile { box-shadow: var(--k-shadow-sm); }
.k-word-tile:hover { box-shadow: var(--k-shadow); }
.k-word-tile .k-emoji { transition: transform var(--k-fast) var(--k-ease); }
.k-word-tile:hover .k-emoji { transform: scale(1.18) rotate(-4deg); }
.k-word-tile.k-known { border-color: var(--k-green); }

/* sublist cards: gradient number badge + lift */
.k-sublist-card { transition: transform var(--k-med) var(--k-ease), box-shadow var(--k-med), border-color var(--k-med); }
.k-sublist-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-color); border-color: rgba(108,76,241,.2); }
.k-sublist-card .k-sub-num { background: var(--k-grad); box-shadow: 0 8px 18px -8px rgba(108,76,241,.6); }
.k-progressbar > div { background: var(--k-grad-aurora); }

/* word card visual: aurora glow */
.k-wordcard .k-visual { background: linear-gradient(135deg, var(--k-primary-soft), var(--k-sky-soft)); box-shadow: inset 0 0 0 2px rgba(108,76,241,.08), 0 14px 34px -18px rgba(108,76,241,.5); }
.k-wordcard .k-translation { background: var(--k-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-mic { background: linear-gradient(135deg, var(--k-violet), var(--k-fuchsia) 55%, var(--k-sky)); box-shadow: 0 10px 26px -6px rgba(108,76,241,.55); }

/* bottom area bar: gradient active + glass */
.k-areabar { background: rgba(255,255,255,.82); }
.k-areabar a.active, .k-areabar button.active { background: var(--k-grad); color: #fff; }

/* stat numbers + chart bars on-brand */
.k-stat-n { background: var(--k-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.k-bar { background: linear-gradient(180deg, var(--k-sky), var(--k-primary)); }
.k-fab { background: var(--k-grad); box-shadow: 0 12px 30px -8px rgba(108,76,241,.6); }