/* Polish with Rocakami — supplemental component styles.
   Built on the captured design tokens (:root vars come from the source CSS bundle):
   --background 220 20% 97% · --primary 221 83% 50% · --radius .75rem · etc.        */

:root{
  --pl-sidebar: 222 47% 6%;
  --pl-sidebar-2: 222 40% 11%;
  --pl-ink: 222 47% 8%;
  --pl-sub: 215 20% 45%;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:"Plus Jakarta Sans",sans-serif;
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  -webkit-font-smoothing:antialiased;
}
.font-mono{ font-family:"JetBrains Mono",monospace; }

/* ---- shell ---- */
.app-shell{ display:flex; min-height:100vh; }
.app-main{ flex:1; min-width:0; }
.app-main-inner{ max-width:1040px; margin:0 auto; padding:32px 28px 80px; }

/* ---- sidebar ---- */
.sidebar{
  width:248px; flex:0 0 248px; min-height:100vh; position:sticky; top:0;
  background:hsl(var(--pl-sidebar)); color:#e7ecf5; display:flex; flex-direction:column;
  padding:20px 14px; gap:6px;
}
.sidebar-brand{ display:flex; align-items:center; gap:12px; padding:6px 8px 16px; text-decoration:none; color:#fff; }
.brand-badge{
  width:42px;height:42px;border-radius:12px;flex:0 0 42px;display:grid;place-items:center;
  background:hsl(var(--primary)); color:#fff; font-weight:800; letter-spacing:.5px;
}
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-size:15px; }
.brand-text small{ color:#8a97ad; font-size:12px; }
.sidebar-nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-link{
  display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px;
  color:#aab4c5; text-decoration:none; font-size:14.5px; font-weight:500; transition:.15s;
}
.nav-link:hover{ background:hsl(var(--pl-sidebar-2)); color:#fff; }
.nav-link.is-active{ background:hsl(var(--pl-sidebar-2)); color:#fff; box-shadow:inset 3px 0 0 hsl(var(--primary)); }
.nav-ic{ width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center; }
.nav-ic svg{ width:20px;height:20px; }
.sidebar-refresh{ display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:#8a97ad;text-decoration:none;font-size:14px;margin-top:8px; }
.sidebar-refresh:hover{ color:#fff; }

/* ---- typography / headings ---- */
.eyebrow{ text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:700; color:hsl(var(--pl-sub)); }
.page-title{ font-size:34px; font-weight:800; margin:.15em 0 .1em; letter-spacing:-.02em; }
.page-sub{ color:hsl(var(--pl-sub)); margin:0 0 6px; }
h2.section-title{ font-size:20px; font-weight:700; margin:26px 0 12px; }

/* ---- card ---- */
.card{ background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:var(--radius); padding:20px; }
.card-tight{ padding:16px; }
.grid{ display:grid; gap:16px; }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.row{ display:flex; gap:12px; align-items:center; }
.between{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.wrap{ flex-wrap:wrap; }

/* ---- stat cards ---- */
.stat{ text-align:center; }
.stat .ic{ width:40px;height:40px;border-radius:11px;margin:0 auto 8px;display:grid;place-items:center;background:hsl(var(--muted)); color:hsl(var(--primary)); }
.stat .num{ font-size:30px; font-weight:800; }
.stat .lbl{ color:hsl(var(--pl-sub)); font-size:13.5px; }

/* ---- badges & pills ---- */
.badge{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; letter-spacing:.03em; }
.badge.violet{ background:#ede9fe; color:#6d28d9; } .badge.blue{ background:#dbeafe; color:#1d4ed8; }
.badge.emerald{ background:#d1fae5; color:#047857; } .badge.amber{ background:#fef3c7; color:#b45309; }
.badge.rose{ background:#ffe4e6; color:#be123c; } .badge.green{ background:#dcfce7; color:#15803d; }
.badge.cyan{ background:#cffafe; color:#0e7490; } .badge.slate{ background:hsl(var(--muted)); color:hsl(var(--muted-foreground)); }
.badge.b1{ background:#e0e7ff; color:#3730a3; }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1px solid hsl(var(--border)); background:hsl(var(--card)); color:hsl(var(--foreground)); font-size:13.5px; font-weight:600; cursor:pointer; }
.pill.is-active{ background:hsl(var(--primary)); border-color:hsl(var(--primary)); color:#fff; }
.pill.dark.is-active{ background:hsl(var(--pl-ink)); border-color:hsl(var(--pl-ink)); }
.pill-row{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; border:1px solid hsl(var(--border)); background:hsl(var(--card)); color:hsl(var(--foreground)); font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; transition:.15s; }
.btn:hover{ background:hsl(var(--muted)); }
.btn.primary{ background:hsl(var(--primary)); border-color:hsl(var(--primary)); color:#fff; }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.success{ background:hsl(var(--success)); border-color:hsl(var(--success)); color:#fff; }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn.lg{ padding:14px 20px; font-size:15px; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---- search ---- */
.search{ width:100%; display:flex; align-items:center; gap:10px; background:hsl(var(--card)); border:1px solid hsl(var(--border)); border-radius:12px; padding:12px 16px; }
.search input{ border:0; outline:0; flex:1; font-size:15px; background:transparent; font-family:inherit; color:inherit; }

/* ---- progress bars ---- */
.bar{ height:9px; border-radius:999px; background:hsl(var(--muted)); overflow:hidden; }
.bar > i{ display:block; height:100%; border-radius:999px; background:hsl(var(--primary)); }
.bar > i.green{ background:hsl(var(--success)); } .bar > i.violet{ background:#7c3aed; } .bar > i.amber{ background:hsl(var(--warning)); }

/* ---- readiness gauge ---- */
.gauge{ width:150px; height:150px; border-radius:50%; display:grid; place-items:center; position:relative; }
.gauge .inner{ position:absolute; inset:14px; background:hsl(var(--card)); border-radius:50%; display:grid; place-items:center; text-align:center; }
.gauge .pct{ font-size:30px; font-weight:800; } .gauge .cap{ font-size:11px; letter-spacing:.1em; color:hsl(var(--pl-sub)); }

/* ---- TTS button ---- */
.spk{ display:inline-grid; place-items:center; width:26px;height:26px;border-radius:50%; background:hsl(var(--muted)); color:hsl(var(--primary)); border:0; cursor:pointer; }
.spk svg{ width:15px;height:15px; }

/* ---- slownik entry ---- */
.entry{ display:flex; flex-direction:column; gap:6px; }
.entry .hd{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.entry .pl{ font-size:18px; font-weight:700; color:hsl(var(--primary)); }
.entry .en{ color:hsl(var(--foreground)); }
.entry .note{ color:hsl(var(--pl-sub)); font-size:13px; }
.entry .meta{ margin-left:auto; display:flex; gap:6px; align-items:center; }
.iconbtn{ border:1px solid hsl(var(--border)); background:hsl(var(--card)); border-radius:8px; padding:4px 8px; cursor:pointer; font-size:12px; color:hsl(var(--pl-sub)); }
.iconbtn.on{ background:hsl(var(--primary)); border-color:hsl(var(--primary)); color:#fff; }
.iconbtn.star.on{ background:hsl(var(--warning)); border-color:hsl(var(--warning)); }

/* ---- flashcard ---- */
.flash{ perspective:1200px; }
.flash .card3d{ position:relative; min-height:240px; transition:transform .5s; transform-style:preserve-3d; cursor:pointer; }
.flash .card3d.flipped{ transform:rotateY(180deg); }
.flash .face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; border:1px solid hsl(var(--border)); display:grid; place-items:center; text-align:center; padding:24px; background:linear-gradient(180deg,#eef2ff,#e0e7ff); }
.flash .face.back{ transform:rotateY(180deg); background:linear-gradient(180deg,#ecfdf5,#d1fae5); }
.flash .face .big{ font-size:38px; font-weight:800; color:hsl(var(--primary)); }
.flash .face.back .big{ color:hsl(var(--success)); }

/* ---- quiz ---- */
.opt{ display:block; width:100%; text-align:left; padding:14px 16px; border-radius:12px; border:1px solid hsl(var(--border)); background:hsl(var(--card)); margin-bottom:10px; cursor:pointer; font-size:15px; font-family:inherit; color:inherit; transition:.12s; }
.opt:hover{ background:hsl(var(--muted)); }
.opt.correct{ background:#dcfce7; border-color:hsl(var(--success)); }
.opt.wrong{ background:#fee2e2; border-color:hsl(var(--destructive)); }
.opt[disabled]{ cursor:default; }

/* ---- table ---- */
table.tbl{ width:100%; border-collapse:collapse; font-size:14px; }
table.tbl th, table.tbl td{ text-align:left; padding:10px 12px; border-bottom:1px solid hsl(var(--border)); }
table.tbl th{ color:hsl(var(--pl-sub)); font-weight:600; }

/* ---- info / tips boxes ---- */
.tips{ background:#fffbeb; border:1px solid #fde68a; border-radius:14px; padding:16px 18px; }
.tips .h{ color:#b45309; font-weight:700; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; }
.tips ul{ margin:0; padding-left:0; list-style:none; display:flex; flex-direction:column; gap:6px; }
.tips li{ color:#92400e; font-size:14px; }
.note-box{ background:#eff6ff; border:1px solid #bfdbfe; border-radius:14px; padding:14px 16px; color:#1e3a8a; font-size:14px; }

.muted{ color:hsl(var(--pl-sub)); }
.hidden{ display:none !important; }
.right{ margin-left:auto; }
.mt{ margin-top:16px; } .mt-lg{ margin-top:28px; }
.tabbar{ display:flex; gap:8px; border-bottom:1px solid hsl(var(--border)); padding-bottom:14px; margin-bottom:18px; flex-wrap:wrap; }

/* ---- responsive ---- */
@media (max-width:880px){
  .sidebar{ width:72px; flex-basis:72px; }
  .brand-text, .nav-link span:last-child, .sidebar-refresh span:last-child{ display:none; }
  .cols-3{ grid-template-columns:1fr; } .cols-2{ grid-template-columns:1fr; }
  .app-main-inner{ padding:22px 16px 70px; }
  .page-title{ font-size:27px; }
}