/* ==========================================================================
   M.Azimova AI — dizayn tizimi
   Yo'nalish: akademik lingvistika laboratoriyasi.
   Motivlar: nutq to'lqini, CEFR spektri, iqtibos chetlari.
   ========================================================================== */
/* Shriftlar base.html da <link> orqali yuklanadi (tezroq va bloklanmaydi).
   Shrift kelmasa, quyidagi zaxira shriftlar ishlatiladi — layout buzilmaydi. */

:root{
  /* Palitra */
  --ink:#0B1220;          /* chuqur siyoh */
  --ink-2:#16213A;
  --paper:#F7F5F0;        /* pergament */
  --paper-2:#FFFFFF;
  --line:#E3DFD6;
  --muted:#6B7385;

  --indigo:#3D5AFE;
  --teal:#00BFA5;
  --amber:#FFA726;
  --red:#EF5350;
  --violet:#7C4DFF;

  --ok:#16A34A;
  --warn:#D97706;
  --err:#DC2626;

  /* CEFR spektri */
  --a1:#94A3B8; --a2:#38BDF8; --b1:#22C55E;
  --b2:#00BFA5; --c1:#7C4DFF; --c2:#FFA726;

  /* Shakl */
  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow:0 1px 2px rgba(11,18,32,.04), 0 10px 30px -12px rgba(11,18,32,.18);
  --shadow-lg:0 24px 60px -24px rgba(11,18,32,.35);
  --ring:0 0 0 3px rgba(61,90,254,.28);

  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--paper);
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(61,90,254,.07), transparent 60%),
    radial-gradient(700px 420px at 96% 4%, rgba(0,191,165,.06), transparent 60%);
  background-attachment:fixed;
  line-height:1.55;
}
a{color:var(--indigo); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--serif); letter-spacing:-.015em; margin:0}
::selection{background:rgba(61,90,254,.18)}

:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--r-sm)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}

/* ---------------------------------------------------------------- Layout */
.layout{display:flex; min-height:100vh}

.sidebar{
  width:260px; flex-shrink:0; position:sticky; top:0; height:100vh;
  overflow-y:auto; padding:22px 16px 18px;
  background:linear-gradient(180deg,var(--ink) 0%, #0E1730 100%);
  color:#D7DCE8; border-right:1px solid rgba(255,255,255,.06);
}
.sidebar .brand{
  font-family:var(--serif); font-weight:700; font-size:1.22rem; line-height:1.2;
  color:#fff; display:flex; align-items:center; gap:9px;
}
.sidebar .brand .dot{
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  background:var(--teal); box-shadow:0 0 0 4px rgba(0,191,165,.18);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(0,191,165,.18)}50%{box-shadow:0 0 0 8px rgba(0,191,165,.05)}}
.sidebar .muted{color:#8892A6; font-size:.78rem; margin-top:4px}

.sidebar nav{margin-top:22px; display:flex; flex-direction:column; gap:2px}
.sidebar nav .navlabel{
  font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  color:#5C6680; font-weight:700; margin:14px 12px 6px;
}
.sidebar nav a{
  color:#C3CAD9; padding:9px 12px; border-radius:10px; font-weight:500;
  font-size:.9rem; display:flex; align-items:center; gap:10px;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
  position:relative;
}
.sidebar nav a .ico{width:18px; text-align:center; opacity:.85; font-size:.95rem}
.sidebar nav a:hover{background:rgba(255,255,255,.05); color:#fff; text-decoration:none; transform:translateX(2px)}
.sidebar nav a.active{
  background:linear-gradient(90deg, rgba(61,90,254,.22), rgba(61,90,254,.04));
  color:#fff;
}
.sidebar nav a.active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--teal);
}
.sidebar .userbox{
  margin-top:22px; padding:14px 12px; border-radius:var(--r);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
}
.sidebar .userbox .name{font-weight:600; color:#fff; font-size:.92rem}

.content{flex:1; padding:30px 34px 56px; max-width:1240px; margin:0 auto; width:100%}

/* ------------------------------------------------------------------ Hero */
.hero{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  padding:32px 34px; margin-bottom:24px; color:#fff;
  background:linear-gradient(135deg,#0B1220 0%, #1B2A5B 55%, #24406E 100%);
  box-shadow:var(--shadow-lg);
}
/* Signature: nutq to'lqini chizig'i hero fonida */
.hero::before{
  content:""; position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='200' viewBox='0 0 1200 200'><path d='M0 100 Q 25 40 50 100 T 100 100 T 150 100 T 200 100 T 250 100 T 300 100 T 350 100 T 400 100 T 450 100 T 500 100 T 550 100 T 600 100 T 650 100 T 700 100 T 750 100 T 800 100 T 850 100 T 900 100 T 950 100 T 1000 100 T 1050 100 T 1100 100 T 1150 100 T 1200 100' fill='none' stroke='white' stroke-width='2'/></svg>");
  background-size:600px 120px; background-repeat:repeat-x; background-position:center bottom;
}
.hero::after{
  content:""; position:absolute; right:-70px; top:-90px; width:280px; height:280px;
  border-radius:50%; background:radial-gradient(circle,rgba(0,191,165,.30),transparent 65%);
}
.hero > *{position:relative; z-index:1}
.hero .eyebrow{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:#7DE2D1; font-weight:600; margin-bottom:10px;
}
.hero h1{font-size:1.85rem; font-weight:600; margin:0}
.hero p{margin:8px 0 0; opacity:.82; max-width:66ch; font-size:.95rem}
.hero .herostats{display:flex; gap:26px; margin-top:20px; flex-wrap:wrap}
.hero .herostats div span{display:block}
.hero .herostats .n{font-family:var(--serif); font-size:1.5rem; font-weight:600}
.hero .herostats .l{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6}

/* ------------------------------------------------------------ Cards/grid */
.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:22px 24px; box-shadow:var(--shadow); margin-bottom:16px;
}
.card.tight{padding:16px 18px}
.card h2{font-size:1.12rem; font-weight:600; margin-bottom:4px}
.card h3{font-size:1rem; font-weight:600}
.card .sub{color:var(--muted); font-size:.86rem; margin-bottom:14px}

.grid{display:grid; gap:16px}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1080px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .grid.cols-2,.grid.cols-3{grid-template-columns:1fr}
  .sidebar{display:none}
  .content{padding:20px 16px 44px}
  .hero{padding:24px 20px; border-radius:var(--r-lg)}
}

/* Stat tile */
.stat{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 18px 16px; position:relative; overflow:hidden;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.stat:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.stat .k{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600}
.stat .v{font-family:var(--serif); font-size:2rem; font-weight:600; line-height:1.15; margin-top:6px}
.stat .foot{font-size:.78rem; color:var(--muted); margin-top:4px}
.stat::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--indigo); opacity:.75}
.stat.teal::after{background:var(--teal)} .stat.amber::after{background:var(--amber)}
.stat.red::after{background:var(--red)}   .stat.violet::after{background:var(--violet)}

/* ---------------------------------------------------------------- Badges */
.badge{
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  border-radius:999px; font-size:.74rem; font-weight:600; line-height:1.7;
  background:#EEF1F6; color:var(--ink-2); border:1px solid var(--line);
}
.badge.ok{background:#E9F7EF; color:#116E3B; border-color:#BFE6CF}
.badge.warn{background:#FEF4E6; color:#8A5200; border-color:#F6DCB0}
.badge.err{background:#FDECEC; color:#9B1C1C; border-color:#F6C9C9}
.badge.info{background:#EBEFFF; color:#20308F; border-color:#C9D2FB}
.badge.mono{font-family:var(--mono); letter-spacing:.02em}

.cefr{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; padding:2px 8px; border-radius:8px;
  font-family:var(--mono); font-weight:600; font-size:.76rem; color:#fff;
}
.cefr.A1{background:var(--a1)} .cefr.A2{background:var(--a2)} .cefr.B1{background:var(--b1)}
.cefr.B2{background:var(--b2)} .cefr.C1{background:var(--c1)} .cefr.C2{background:var(--c2)}

/* Media turi chiplari */
.chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:8px;
  font-size:.72rem; font-weight:600; border:1px solid var(--line); background:#fff; color:var(--muted);
}
.chip.audio{border-color:#CDEDE7; background:#EBF9F6; color:#046B5C}
.chip.video{border-color:#D6D0F7; background:#F1EEFE; color:#3A2A8C}
.chip.image{border-color:#FBE0BE; background:#FEF6EA; color:#8A5200}
.chip.document{border-color:#C9D2FB; background:#EEF1FF; color:#20308F}
.chip.text{border-color:var(--line)}

/* --------------------------------------------------------------- Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:11px; cursor:pointer;
  font:600 .875rem/1 var(--sans); padding:11px 17px; color:#fff;
  background:linear-gradient(180deg,#4A66FF,#3247E8);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 8px 20px -10px rgba(50,71,232,.9);
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), filter .16s var(--ease);
}
.btn:hover{transform:translateY(-1px); filter:brightness(1.05); text-decoration:none}
.btn:active{transform:translateY(0)}
.btn[disabled],.btn.disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn.ghost{background:#fff; color:var(--ink); border-color:var(--line); box-shadow:none}
.btn.ghost:hover{background:#FAFAF8; border-color:#CFCABF}
.btn.teal{background:linear-gradient(180deg,#12CBB1,#00A791); box-shadow:0 8px 20px -10px rgba(0,167,145,.9)}
.btn.danger{background:linear-gradient(180deg,#F2635F,#DC2626); box-shadow:0 8px 20px -10px rgba(220,38,38,.85)}
.btn.amber{background:linear-gradient(180deg,#FFB74D,#F59E0B); box-shadow:0 8px 20px -10px rgba(245,158,11,.85)}
.btn.sm{padding:7px 12px; font-size:.8rem; border-radius:9px}
.btn.block{width:100%}
.btn .spin{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.btnrow{display:flex; gap:10px; flex-wrap:wrap; align-items:center}

/* ----------------------------------------------------------------- Forms */
label{display:block; font-weight:600; font-size:.82rem; margin-bottom:6px; color:var(--ink-2)}
input[type=text],input[type=password],input[type=url],input[type=number],
input[type=datetime-local],input[type=file],select,textarea{
  width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:11px;
  font:400 .9rem/1.5 var(--sans); color:var(--ink); background:#fff;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
textarea{resize:vertical; min-height:88px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--indigo); box-shadow:var(--ring)}
input[type=file]{padding:9px; background:#FCFCFB; cursor:pointer}
input[type=file]::file-selector-button{
  border:1px solid var(--line); background:#fff; border-radius:8px;
  padding:6px 12px; margin-right:10px; font:600 .8rem var(--sans); cursor:pointer;
}
/* Chrome autofill — brauzerning ko'k-och fonini bekor qilamiz */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  box-shadow:0 0 0 1000px #fff inset;
  caret-color:var(--ink);
  transition:background-color 9999s ease-out 0s;
}
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #fff inset, var(--ring);
  box-shadow:0 0 0 1000px #fff inset, var(--ring);
}

.field{margin-bottom:15px}
.hint{font-size:.78rem; color:var(--muted); margin-top:5px}
.checkline{display:flex; align-items:center; gap:9px}
.checkline input{width:auto; margin:0}
.checkline label{margin:0; font-weight:500}
.errtext{color:var(--err); font-size:.8rem; margin-top:5px}

/* ---------------------------------------------------------------- Tables */
table{width:100%; border-collapse:separate; border-spacing:0; font-size:.875rem}
thead th{
  text-align:left; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-weight:700; padding:10px 12px;
  border-bottom:1px solid var(--line); background:#FBFAF7;
}
tbody td{padding:12px; border-bottom:1px solid #F0EDE6; vertical-align:middle}
tbody tr:hover{background:#FCFBF8}
tbody tr:last-child td{border-bottom:none}
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff}

/* -------------------------------------------------------------- Messages */
.msg{
  display:flex; gap:11px; align-items:flex-start; padding:13px 16px; border-radius:var(--r);
  margin-bottom:12px; font-size:.88rem; border:1px solid; animation:slideIn .32s var(--ease);
}
@keyframes slideIn{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.msg.success{background:#EDF9F1; border-color:#BFE6CF; color:#0F5C31}
.msg.error{background:#FDECEC; border-color:#F6C9C9; color:#8F1A1A}
.msg.warning{background:#FEF6E9; border-color:#F6DCB0; color:#7A4A00}
.msg.info{background:#EEF2FF; border-color:#C9D2FB; color:#1E2C86}

/* -------------------------------------------------------- Rubric / bars */
.rubric{display:grid; gap:11px}
.rubric .row{display:grid; grid-template-columns:150px 1fr 46px; gap:12px; align-items:center}
.bar{height:9px; border-radius:99px; background:#EFECE4; overflow:hidden}
.bar > i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--indigo),var(--teal));
  transform-origin:left; animation:grow .8s var(--ease) both;
}
@keyframes grow{from{transform:scaleX(0)}}
.rubric .row .n{font-family:var(--mono); font-size:.8rem; text-align:right; color:var(--muted)}
.rubric .row .lbl{font-size:.82rem; font-weight:500}

/* Score ring */
.ring{position:relative; width:104px; height:104px; flex-shrink:0}
.ring svg{transform:rotate(-90deg)}
.ring .val{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--serif); font-size:1.6rem; font-weight:600;
}

/* ------------------------------------------------------- Audio recorder */
.recorder{
  border:1px solid var(--line); border-radius:var(--r-lg); background:#fff;
  padding:18px; position:relative; overflow:hidden;
}
.recorder.armed{border-color:var(--red); box-shadow:0 0 0 4px rgba(239,83,80,.10)}
.rec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px}
.rec-title{font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:8px}
.rec-dot{width:9px; height:9px; border-radius:50%; background:#C9C6BE}
.recorder.armed .rec-dot{background:var(--red); animation:blink 1.05s steps(2,start) infinite}
@keyframes blink{50%{opacity:.25}}
.rec-time{font-family:var(--mono); font-size:.9rem; color:var(--muted); font-variant-numeric:tabular-nums}

/* Signature element: jonli nutq to'lqini */
.wave{
  width:100%; height:82px; border-radius:var(--r); background:#0B1220;
  display:block; margin-bottom:14px;
}
.wave.idle{background:linear-gradient(180deg,#F4F2EC,#EFECE4)}

.rec-transcript{
  margin-top:12px; padding:12px 14px; border-radius:var(--r); background:#FBFAF7;
  border:1px dashed var(--line); font-size:.86rem; min-height:52px; color:var(--ink-2);
}
.rec-transcript:empty::before{content:"Nutq matni shu yerda real vaqtda paydo bo'ladi\2026"; color:var(--muted)}
.rec-transcript .interim{color:var(--muted); font-style:italic}
.rec-note{font-size:.76rem; color:var(--muted); margin-top:8px}

audio,video{width:100%; border-radius:var(--r); background:#000}
audio{background:#F1EFE9; height:44px}
video{max-height:420px}

/* ------------------------------------------------------------- Consultant */
.consult-answer{
  border-left:3px solid var(--teal); padding:2px 0 2px 18px; margin:8px 0 18px;
  font-size:.95rem; line-height:1.75;
}
.attrib{
  border:1px solid var(--line); border-radius:var(--r); padding:13px 15px;
  background:#FBFAF7; margin-bottom:10px;
}
.attrib .claim{font-weight:600; font-size:.88rem}
.attrib .src{font-family:var(--mono); font-size:.76rem; color:var(--indigo); margin-top:5px}
.attrib .loc{font-size:.78rem; color:var(--muted)}
.attrib blockquote{
  margin:9px 0 0; padding:8px 12px; border-left:2px solid var(--teal);
  background:#fff; font-size:.83rem; color:var(--ink-2); font-style:italic; border-radius:0 8px 8px 0;
}
.reflist{display:flex; flex-direction:column; gap:9px; max-height:460px; overflow-y:auto; padding-right:4px}
.refitem{
  border:1px solid var(--line); border-radius:var(--r); padding:12px 13px; background:#fff;
  font-size:.83rem; transition:border-color .16s var(--ease);
}
.refitem:hover{border-color:#CFCABF}
.refitem .cite{line-height:1.5}
.refitem .meta{display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; align-items:center}
.refitem.used{border-color:var(--teal); background:#F6FDFB}

/* Tabs */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:18px; overflow-x:auto}
.tabs button{
  background:none; border:none; cursor:pointer; padding:11px 15px;
  font:600 .86rem var(--sans); color:var(--muted); border-bottom:2px solid transparent;
  white-space:nowrap; transition:color .16s var(--ease), border-color .16s var(--ease);
}
.tabs button:hover{color:var(--ink)}
.tabs button.active{color:var(--indigo); border-bottom-color:var(--indigo)}
.tabpane{display:none} .tabpane.active{display:block; animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0; transform:translateY(4px)}}

/* Accordion */
details.acc{border:1px solid var(--line); border-radius:var(--r); background:#fff; margin-bottom:10px; overflow:hidden}
details.acc summary{
  cursor:pointer; padding:13px 16px; font-weight:600; font-size:.88rem;
  list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary::after{content:"\203A"; transform:rotate(90deg); transition:transform .2s var(--ease); color:var(--muted); font-size:1.2rem}
details.acc[open] summary::after{transform:rotate(270deg)}
details.acc summary:hover{background:#FBFAF7}
details.acc .accbody{padding:0 16px 16px; border-top:1px solid #F2EFE8}
div.acc{border:1px solid var(--line); border-radius:var(--r); margin-bottom:8px; overflow:hidden}
.acc-toggle{width:100%; background:none; border:none; text-align:left; padding:12px 16px; font-size:.85rem; font-weight:600; color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:6px}
.acc-toggle:hover{background:#FBFAF7}
div.acc .accbody{padding:0 16px 16px; border-top:1px solid #F2EFE8}
.hidden{display:none!important}

/* Empty state */
.empty{
  text-align:center; padding:44px 20px; color:var(--muted);
  border:1px dashed var(--line); border-radius:var(--r-lg); background:#FCFBF8;
}
.empty .big{font-size:2rem; margin-bottom:8px; opacity:.55}
.empty h3{font-size:1.02rem; color:var(--ink); margin-bottom:6px}

/* Auth */
.authwrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.authcard{
  width:100%; max-width:420px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-xl); padding:34px 32px; box-shadow:var(--shadow-lg);
}
.authcard .logo{font-family:var(--serif); font-size:1.5rem; font-weight:700; text-align:center}
.authcard .tag{text-align:center; color:var(--muted); font-size:.84rem; margin:6px 0 24px}

/* Utility */
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}
.serif{font-family:var(--serif)}
.right{text-align:right}
.center{text-align:center}
.flex{display:flex; gap:12px; align-items:center}
.between{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.wrap{flex-wrap:wrap}
.mt0{margin-top:0} .mt1{margin-top:10px} .mt2{margin-top:20px}
.mb0{margin-bottom:0} .mb1{margin-bottom:10px} .mb2{margin-bottom:20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
hr{border:none; border-top:1px solid var(--line); margin:20px 0}
.divider{height:1px; background:var(--line); margin:18px 0}
code{font-family:var(--mono); font-size:.85em; background:#F2EFE8; padding:2px 6px; border-radius:6px}

/* Print */
@media print{
  .sidebar,.btn,.tabs{display:none!important}
  .content{padding:0} body{background:#fff}
  .card{box-shadow:none; break-inside:avoid}
}

/* ==========================================================================
   So'rovnoma
   ========================================================================== */
.req{color:#EF5350;font-weight:700;margin-left:2px}

.likert{display:grid;gap:8px}
.likert-opt{display:flex;align-items:center;gap:12px;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:12px;cursor:pointer;
  transition:border-color .15s,background .15s}
.likert-opt:hover{border-color:var(--accent);background:rgba(74,102,255,.04)}
.likert-opt input{margin:0}
.likert-opt input:checked ~ .likert-num{background:var(--accent);color:#fff}
.likert-num{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:#EEF0F4;font-weight:700;
  font-size:.85rem;flex-shrink:0}
.likert-lbl{font-size:.9rem}
.likert-opt:has(input:checked){border-color:var(--accent);background:rgba(74,102,255,.06)}

.rating-row{display:flex;gap:6px;flex-wrap:wrap}
.rating-dot{cursor:pointer}
.rating-dot input{position:absolute;opacity:0;width:0;height:0}
.rating-dot span{display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1.5px solid var(--line);border-radius:10px;
  font-weight:600;transition:all .15s}
.rating-dot:hover span{border-color:var(--accent)}
.rating-dot input:checked + span{background:var(--accent);color:#fff;border-color:var(--accent)}

.choice{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:12px;cursor:pointer;
  transition:border-color .15s,background .15s;font-size:.9rem}
.choice:hover{border-color:var(--accent);background:rgba(74,102,255,.04)}
.choice:has(input:checked){border-color:var(--accent);background:rgba(74,102,255,.06)}
.choice input{margin:0}

.statcard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:16px 22px;min-width:120px}
.statnum{font-size:1.5rem;font-weight:700;font-family:var(--serif)}
.statlbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);font-weight:700;margin-top:2px}