/* ===== Moderna arhitektura — design system ===== */
:root{
  --bg:#f5f5f7; --surface:#ffffff; --surface-2:#eeeef1; --surface-3:#f7f7f9;
  --ink:#141418; --ink-2:#46464f; --muted:#8c8c97; --border:#e7e7ec;
  --accent:#6366f1; --accent-2:#818cf8; --accent-ink:#ffffff; --accent-soft:#eef0ff;
  --good:#10b981; --good-soft:#e7f8f1; --bad:#ef4444; --bad-soft:#fdecec;
  --shadow-sm:0 1px 2px rgba(20,20,45,.05),0 1px 3px rgba(20,20,45,.05);
  --shadow:0 8px 24px -10px rgba(25,25,60,.20),0 2px 8px rgba(25,25,60,.05);
  --shadow-lg:0 28px 60px -18px rgba(20,20,60,.30);
  --r:22px; --r-sm:14px; --r-xs:11px;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --dock-h:74px; color-scheme:light;
}
/* dark tokens — shared by auto (system) and manual override */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0b0b0f; --surface:#16161d; --surface-2:#23232c; --surface-3:#1c1c23;
  --ink:#f2f2f6; --ink-2:#c7c7d2; --muted:#7e7e8c; --border:#272730;
  --accent:#7c83ff; --accent-2:#9aa0ff; --accent-ink:#0b0b0f; --accent-soft:#1c1d2e;
  --good:#34d399; --good-soft:#11261f; --bad:#f87171; --bad-soft:#2a1717;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 10px 30px -12px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.8); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0b0b0f; --surface:#16161d; --surface-2:#23232c; --surface-3:#1c1c23;
  --ink:#f2f2f6; --ink-2:#c7c7d2; --muted:#7e7e8c; --border:#272730;
  --accent:#7c83ff; --accent-2:#9aa0ff; --accent-ink:#0b0b0f; --accent-soft:#1c1d2e;
  --good:#34d399; --good-soft:#11261f; --bad:#f87171; --bad-soft:#2a1717;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 10px 30px -12px rgba(0,0,0,.6),0 2px 8px rgba(0,0,0,.4);
  --shadow-lg:0 30px 70px -20px rgba(0,0,0,.8); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none; padding-bottom:var(--safe-b);
}
.hidden{display:none !important}
button{font-family:inherit; cursor:pointer; color:inherit}
::-webkit-scrollbar{height:0;width:0}

/* ---- top bar ---- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(12px + var(--safe-t)) 18px 12px;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; letter-spacing:-.02em;
  border:0; background:none; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:opacity .15s}
.brand:active{opacity:.6}
.brand-mark{width:22px; height:22px; border-radius:7px;
  background:conic-gradient(from 210deg,var(--accent),var(--accent-2),var(--accent));
  box-shadow:0 2px 8px -2px var(--accent); transform:rotate(8deg)}
.bar-actions{display:flex; gap:8px}
.icon-btn{width:38px; height:38px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); font-size:16px; color:var(--ink-2); box-shadow:var(--shadow-sm);
  display:grid; place-items:center; transition:transform .15s, background .2s}
.icon-btn:active{transform:scale(.92)}

/* ---- filter button ---- */
.filters{position:sticky; top:0; z-index:20; padding:12px 16px 6px; background:var(--bg);
  display:flex; flex-direction:column; gap:8px}
.filter-btn{display:flex; align-items:center; gap:8px; width:100%; padding:13px 16px;
  border:1px solid var(--border); background:var(--surface); border-radius:14px; box-shadow:var(--shadow-sm);
  font-size:15px; font-weight:600; color:var(--ink); transition:transform .15s, box-shadow .2s}
.filter-btn:active{transform:scale(.99)}
.fb-label{flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fb-chev{width:18px; height:18px; flex:none; color:var(--muted)}

.seg{position:relative; display:flex; gap:4px; padding:4px; background:var(--surface-2); border-radius:14px}
.seg button{flex:1; border:0; background:transparent; padding:9px 6px; font-size:13px; font-weight:600;
  color:var(--muted); border-radius:10px; transition:color .2s, background .25s, box-shadow .25s}
.seg button.active{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}

main{padding:10px 16px 18px; max-width:780px; margin:0 auto}

/* ---- progress header ---- */
.phead{display:flex; align-items:center; gap:14px; margin:2px 2px 14px}
.ring{--p:0; width:46px; height:46px; border-radius:50%; flex:none; position:relative;
  background:conic-gradient(var(--accent) calc(var(--p)*1%), var(--surface-2) 0); display:grid; place-items:center}
.ring::before{content:""; position:absolute; width:36px; height:36px; border-radius:50%; background:var(--surface)}
.ring b{position:relative; z-index:1; font-size:11px; font-weight:700; color:var(--ink)}
.phead .meta{display:flex; flex-direction:column; min-width:0}
.phead .meta b{font-size:15px; font-weight:700}
.phead .meta span{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ---- flashcard ---- */
.deck{perspective:1500px}
.flash{position:relative; width:100%; min-height:54vh; cursor:pointer;
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.8,.2,1); touch-action:pan-y}
.flash.flipped{transform:rotateY(180deg)}
/* clear affordance that the card is clickable */
@media (hover:hover) and (pointer:fine){
  .flash:not(.flipped):hover .face.front{box-shadow:0 0 0 2px var(--accent), var(--shadow); transform:translateY(-3px)}
}
.flash:not(.flipped):active .face.front{transform:scale(.992)}
.face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column;
  overflow-y:auto; -webkit-overflow-scrolling:touch; transition:box-shadow .2s, transform .2s}
.face.back{transform:rotateY(180deg)}
/* visible scrollbar on the flipped (back) face — overrides the global hidden scrollbar */
.face.back{scrollbar-width:thin; scrollbar-color:var(--muted) transparent}
.face.back::-webkit-scrollbar{width:9px; height:9px}
.face.back::-webkit-scrollbar-thumb{background:var(--muted); border-radius:99px; border:2px solid var(--surface)}
.face.back::-webkit-scrollbar-thumb:active{background:var(--ink-2)}
.eyebrow{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); flex:none}
.face h2{font-size:23px; font-weight:800; line-height:1.18; letter-spacing:-.025em; margin:8px 0 4px; flex:none}
.sub{color:var(--muted); font-size:14px; font-weight:500; margin-bottom:12px; flex:none}
.imgs{display:flex; flex-direction:column; gap:10px; margin:0 -4px 4px; padding:0 4px; flex:none}
.imgwrap{position:relative; border-radius:var(--r-sm); overflow:hidden; background:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--border)}
.imgwrap img{width:100%; height:auto; max-height:46vh; object-fit:contain; display:block;
  background:repeating-conic-gradient(var(--surface-3) 0% 25%, var(--surface) 0% 50%) 50%/22px 22px}
.cap{font-size:11px; color:var(--muted); padding:6px 10px; text-align:center; background:var(--surface-3)}
.hint{margin:auto auto 0; color:var(--accent); font-size:12.5px; font-weight:700; letter-spacing:.005em;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; flex:none;
  padding:8px 14px; border-radius:999px; background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); animation:hintnudge 2.4s ease-in-out infinite}
.hint::before{content:"⟲"; font-size:15px; line-height:1}
@keyframes hintnudge{0%,92%,100%{transform:translateY(0)}96%{transform:translateY(-2px)}}
.bullets{margin:0; padding:0; list-style:none; flex:none}
.bullets li{position:relative; padding:9px 0 9px 22px; border-bottom:1px solid var(--border);
  font-size:15px; line-height:1.45; color:var(--ink-2)}
.bullets li:last-child{border-bottom:0}
.bullets li::before{content:""; position:absolute; left:4px; top:16px; width:7px; height:7px;
  border-radius:2px; background:var(--accent)}
.bullets li.sub-b{padding-left:34px; color:var(--muted); font-size:14px}
.bullets li.sub-b::before{left:18px; width:9px; height:2px; border-radius:2px; top:18px}

.rate{display:flex; gap:12px; margin-top:14px; position:relative; z-index:41}
.rate button{flex:1; border:0; border-radius:16px; padding:16px; font-size:15.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px; transition:transform .12s, filter .2s}
.rate button:active{transform:scale(.96)}
.again{background:var(--surface); color:var(--ink-2); box-shadow:inset 0 0 0 1.5px var(--border)}
.know{background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 20px -8px var(--accent)}
.counter{text-align:center; color:var(--muted); font-size:12.5px; font-weight:600; margin-top:12px; letter-spacing:.02em}

/* ---- empty / done states ---- */
.done{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow); padding:36px 22px; text-align:center; margin-top:6px}
.done .emoji{font-size:40px; display:block; margin-bottom:8px}
.done h2{margin:0 0 8px; font-size:24px; font-weight:800; letter-spacing:-.02em}
.done p{color:var(--muted); margin:0; line-height:1.5; font-size:14.5px}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--accent-ink);
  border:0; border-radius:14px; padding:14px 22px; font-size:15px; font-weight:700; margin-top:18px;
  box-shadow:0 10px 24px -10px var(--accent); transition:transform .12s}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.45; box-shadow:none}

/* ---- browse ---- */
.search-wrap{position:relative; margin-bottom:12px}
.search{width:100%; padding:14px 16px 14px 44px; border-radius:16px; border:1px solid var(--border);
  background:var(--surface); font-size:15px; color:var(--ink); box-shadow:var(--shadow-sm); outline:none;
  transition:box-shadow .2s, border-color .2s}
.search:focus{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.search-wrap::before{content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; border-radius:50%; border:2px solid var(--muted)}
.search-wrap::after{content:""; position:absolute; left:28px; top:26px; width:7px; height:2px;
  background:var(--muted); transform:rotate(45deg)}
.sec-title{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); margin:20px 6px 10px}
.item{background:var(--surface); border:1px solid var(--border); border-radius:18px; margin-bottom:10px;
  box-shadow:var(--shadow-sm); overflow:hidden; transition:box-shadow .2s}
.item[open]{box-shadow:var(--shadow)}
.item>summary{list-style:none; padding:14px; display:flex; align-items:center; gap:13px; cursor:pointer}
.item>summary::-webkit-details-marker{display:none}
.thumb{width:54px; height:54px; border-radius:12px; object-fit:cover; flex:none;
  background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border)}
.thumb.ph{display:grid; place-items:center; color:var(--muted); font-size:18px; font-weight:800}
.sumtext{flex:1; min-width:0}
.sumtext b{display:block; font-size:15px; font-weight:600; letter-spacing:-.01em}
.sumtext small{display:block; color:var(--muted); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chev{color:var(--muted); transition:transform .25s; flex:none}
.item[open] .chev{transform:rotate(90deg)}
.item .body{padding:4px 16px 16px}
.tag{display:inline-block; background:var(--accent-soft); color:var(--accent); font-size:11px; font-weight:600;
  padding:3px 10px; border-radius:999px; margin-bottom:10px}

/* ---- quiz ---- */
.quiz-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow); padding:16px}
.quiz-back{display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; padding:7px 12px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); border-radius:999px;
  font-size:13px; font-weight:600; transition:transform .15s, background .2s}
.quiz-back:active{transform:scale(.96)}
.quiz-top{display:flex; justify-content:space-between; align-items:center; color:var(--muted);
  font-size:13px; font-weight:600; margin-bottom:12px}
.qbar{height:6px; background:var(--surface-2); border-radius:999px; overflow:hidden; margin-bottom:14px}
.qbar>i{display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .3s}
.quiz-card .imgwrap img{max-height:40vh}
.choices{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.choice{width:100%; text-align:left; background:var(--surface); border:1.5px solid var(--border);
  border-radius:14px; padding:15px; font-size:15px; font-weight:500; color:var(--ink);
  transition:transform .12s, border-color .2s, background .2s}
.choice:active{transform:scale(.98)}
.choice.correct{background:var(--good-soft); border-color:var(--good); color:var(--good); font-weight:700}
.choice.wrong{background:var(--bad-soft); border-color:var(--bad); color:var(--bad)}
.choice:disabled{opacity:1}

/* ---- dock (normal flow, last element) ---- */
.dock{position:static; margin:14px auto calc(22px + var(--safe-b)); width:max-content; max-width:calc(100% - 24px);
  display:flex; gap:4px; padding:6px;
  background:var(--surface);
  border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow)}
.dock-btn{display:flex; flex-direction:column; align-items:center; gap:3px; border:0; background:transparent;
  color:var(--muted); font-size:11px; font-weight:600; padding:8px 18px; border-radius:14px;
  transition:color .2s, background .25s}
.dock-btn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.dock-btn svg .o{fill:color-mix(in srgb, currentColor 14%, transparent)}
.dock-btn.active{color:var(--accent-ink); background:var(--accent)}

/* ---- bottom sheet (section picker) ---- */
.sheet-backdrop{position:fixed; inset:0; z-index:50; background:rgba(8,8,16,.45);
  backdrop-filter:blur(2px); animation:fade .2s ease}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:51;
  background:var(--surface); border-radius:24px 24px 0 0; box-shadow:var(--shadow-lg);
  padding:10px 14px calc(20px + var(--safe-b)); max-height:72vh; display:flex; flex-direction:column;
  animation:slideUp .28s cubic-bezier(.2,.8,.2,1)}
.sheet-grip{width:40px; height:4px; border-radius:99px; background:var(--border); margin:4px auto 8px; flex:none}
.sheet-title{margin:2px 6px 10px; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); flex:none}
.sheet-list{overflow-y:auto; display:flex; flex-direction:column; gap:4px}
.sheet-opt{display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:0; background:transparent;
  padding:14px 12px; border-radius:13px; font-size:15.5px; font-weight:500; color:var(--ink); transition:background .15s}
.sheet-opt:active{background:var(--surface-2)}
.sheet-opt.active{background:var(--accent-soft); color:var(--accent); font-weight:700}
.sheet-opt .n{margin-left:auto; font-size:13px; color:var(--muted); font-weight:600}
.sheet-opt.active .n{color:var(--accent)}
.sheet-opt .tick{width:18px; flex:none; opacity:0}
.sheet-opt.active .tick{opacity:1}

@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

@media (min-width:780px){ .flash{min-height:50vh} main{padding-top:14px} }
@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} .flash{transition:transform .01s !important} }

/* ===== v2: SRS grades, star, cloze, quiz modes, stats ===== */
.phead .star{margin-left:auto; width:40px; height:40px; border-radius:12px; border:1px solid var(--border);
  background:var(--surface); font-size:20px; line-height:1; color:var(--muted); box-shadow:var(--shadow-sm); flex:none}
.phead .star.on{color:#f5b301; border-color:#f5b30155}

.grades{display:flex; gap:10px; margin-top:14px}
.g{flex:1; border:0; border-radius:16px; padding:13px 6px; font-weight:800; font-size:15px;
  display:flex; flex-direction:column; align-items:center; gap:2px; transition:transform .12s}
.g small{font-weight:600; font-size:11px; opacity:.85}
.g:active{transform:scale(.95)}
.g.again{background:var(--surface); color:var(--bad); box-shadow:inset 0 0 0 1.5px var(--border)}
.g.good{background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 20px -8px var(--accent)}
.g.easy{background:var(--good); color:#fff; box-shadow:0 8px 20px -8px var(--good)}

.cloze{font-size:19px; line-height:1.5; font-weight:600; margin:12px 0; flex:none}
.blank{display:inline-block; min-width:84px; border-bottom:2.5px solid var(--accent); color:transparent}

.btn-soft{display:inline-flex; align-items:center; gap:8px; background:var(--surface-2); color:var(--ink);
  border:0; border-radius:13px; padding:11px 16px; font-size:14px; font-weight:600; margin-bottom:10px; transition:transform .12s}
.btn-soft:active{transform:scale(.97)}
.muted-c{color:var(--muted); text-align:center; margin-top:30px}

.tagrow{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.tagchip{border:1px solid var(--border); background:var(--surface-2); color:var(--ink-2); font-size:12px; font-weight:600; padding:5px 11px; border-radius:999px}
.tagchip:active{transform:scale(.95)}

.quiz-hub{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.qtile{display:flex; flex-direction:column; align-items:flex-start; gap:3px; background:var(--surface);
  border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-sm); padding:16px; text-align:left; transition:transform .12s}
.qtile:active{transform:scale(.97)}
.qtile.off{opacity:.4}
.qe{font-size:26px}
.ql{font-size:15px; font-weight:700}
.qn{font-size:12px; color:var(--muted)}
.q-prompt{font-size:18px; font-weight:700; margin:12px 2px; line-height:1.25}
.type-in{margin-top:14px}
.tres{margin-top:12px; text-align:center; font-size:15px; font-weight:600}
.tres.ok{color:var(--good)} .tres.no{color:var(--bad)}

.match{display:flex; gap:10px; margin-top:14px}
.mcol{flex:1; display:flex; flex-direction:column; gap:8px}
.mtile{display:flex; align-items:center; gap:8px; width:100%; text-align:left; background:var(--surface);
  border:1.5px solid var(--border); border-radius:13px; padding:8px 10px; font-size:13px; font-weight:600;
  color:var(--ink); min-height:52px; transition:transform .1s, border-color .2s, background .2s}
.mtile img{width:38px; height:38px; border-radius:8px; object-fit:cover; flex:none}
.mtile.r{justify-content:center; text-align:center}
.mtile.sel{border-color:var(--accent); background:var(--accent-soft)}
.mtile.matched{opacity:.4; border-style:dashed}
.mtile.wrong{border-color:var(--bad); background:var(--bad-soft)}

.stat-row{display:flex; gap:10px; margin-bottom:12px}
.stat-card{flex:1; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm); padding:14px 6px; text-align:center}
.stat-card .big{font-size:22px; font-weight:800}
.stat-card .lbl{font-size:11px; color:var(--muted); margin-top:2px}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-sm); padding:14px; margin-bottom:12px}
.panel-h{font-size:13px; font-weight:700; margin-bottom:12px}
.spark{display:flex; align-items:flex-end; gap:8px; height:90px}
.spark-col{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.spark-bar{width:62%; min-height:3px; background:var(--accent); border-radius:5px 5px 0 0}
.spark-col span{font-size:10px; color:var(--muted)}
.secbar{display:flex; align-items:center; gap:10px; margin:9px 0}
.sb-l{font-size:12px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink-2)}
.sb-track{width:36%; height:7px; background:var(--surface-2); border-radius:99px; overflow:hidden}
.sb-track>i{display:block; height:100%; background:var(--good); border-radius:99px}
.sb-n{font-size:11px; color:var(--muted); width:44px; text-align:right}
.hard-row{display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px}
.hard-row:last-of-type{border-bottom:0}
.hb{font-size:11px; color:var(--bad)}

.cmp-h{font-size:15px; font-weight:700; margin:6px 2px 12px}
.cmp-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cmp-cell{margin:0; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-sm)}
.cmp-cell img{width:100%; height:120px; object-fit:contain; background:var(--surface-3)}
.cmp-cell figcaption{font-size:11px; padding:6px; text-align:center; color:var(--ink-2)}

.sheet-grp{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); padding:12px 8px 4px}
.dock-btn{padding:9px 14px}

/* browse — collapsible sections */
.secblock{margin-bottom:10px; border:1px solid var(--border); border-radius:16px; background:var(--surface); box-shadow:var(--shadow-sm); overflow:hidden}
.secblock>summary{list-style:none; display:flex; align-items:center; gap:10px; padding:15px 16px; font-weight:700; font-size:15px; cursor:pointer}
.secblock>summary::-webkit-details-marker{display:none}
.sh-name{letter-spacing:-.01em}
.sh-n{margin-left:auto; font-size:12px; color:var(--muted); font-weight:600; background:var(--surface-2); padding:2px 10px; border-radius:999px}
.sec-chev{color:var(--muted); transition:transform .25s; flex:none}
.secblock[open]>summary{border-bottom:1px solid var(--border)}
.secblock[open]>summary .sec-chev{transform:rotate(90deg)}
.secitems{padding:8px}
.secitems .item{box-shadow:none; margin-bottom:8px}
.secitems .item:last-child{margin-bottom:0}