/*
 * Klinik theme (controls and spacing) on the prototype's own colors and fonts (palette since 2026-10-14, fonts since
 * 2026-10-17: the prototype's system font for the interface, Georgia for headings and questions).
 * Loads after the prototype; the screens stay the prototype's. Colors here are the prototype's hex values.
 */


:root{
  --font-ui:-apple-system,"Segoe UI",system-ui,sans-serif;
  --line-strong:#cfc8bc;
  --ring:0 0 0 3px #e6eef0,0 0 0 4px #12343b;
  --shadow-1:0 1px 2px rgba(22,32,42,.05),0 1px 1px rgba(22,32,42,.03);

  /* Tailwind / Flux tokens (defined in app.css @theme) */
  --font-sans:var(--font-ui);
  --color-bg:#f5f3ee; --color-ink:#16202a; --color-muted:#56606b; --color-line:#ddd8ce; --color-soft:#efebe4; --color-field:#cfc8bc;
  --color-stone-50:#fbfaf7; --color-stone-100:#efebe4; --color-stone-200:#ddd8ce; --color-stone-300:#cfc8bc; --color-stone-400:#a39c90;
  --color-stone-500:#8a8378; --color-stone-600:#56606b; --color-stone-700:#3e3933; --color-stone-800:#16202a; --color-stone-900:#1b232c; --color-stone-950:#0f151b;
  --color-brand-50:#e6eef0; --color-brand-100:#bfd0d4; --color-brand-200:#a9c3c8; --color-brand-300:#7fa3a9; --color-brand-400:#4f8691;
  --color-brand-500:#346a75; --color-brand-600:#24535d; --color-brand-700:#1a424b; --color-brand-800:#12343b; --color-brand-900:#0c252a; --color-brand-950:#08191d;
  --color-solved:#1f8a4c; --color-solved-soft:#e3f3e9; --color-assisted:#e8700f; --color-assisted-soft:#fdebdc; --color-assisted-dark:#a84b06;
  --color-notyet:#c0392b; --color-notyet-soft:#f8e1de;
}

/* ---- Type: the prototype's own (system font for the interface; its serif headings stay serif) */
body{font-family:var(--font-ui)}
button,input,select,textarea{font-family:inherit}

:root{--bg:#f5f3ee;--elev-1:0 1px 2px rgba(22,32,42,.05),0 2px 8px rgba(22,32,42,.05);--elev-2:0 2px 4px rgba(22,32,42,.05),0 10px 24px rgba(22,32,42,.08)}
body{background:var(--bg)}

/* ===== Prototype elements are drawn exactly as the prototype draws them (2026-10-17): inside the student and parent
   pages (.pj-main) and the teacher / admin content (#p-hoca, under the tabs) the theme's re-styling of prototype classes
   stops. Rules after the scope style the app's own parts (top bar, menus, crumbs, admin, messages…) everywhere. */
@scope (body) to (.pj-main, #p-hoca > :not(.tabrow)) {
.mark .q,.qcard{font-family:Georgia,"Times New Roman",serif;letter-spacing:0}
.btn{min-height:42px;border-radius:10px;padding:0 16px;font-size:14.5px;font-weight:600;letter-spacing:-.005em;
  box-shadow:var(--shadow-1);transition:background-color .15s,box-shadow .15s,filter .15s;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn:active{filter:brightness(.95)}
.btn:focus-visible,.mb:focus-visible,.sc:focus-visible,.f:focus-visible{outline:0;box-shadow:var(--ring)}
.btn.sec{background:#ffffff;border:1px solid var(--line-strong);box-shadow:var(--shadow-1)}
.btn.sec:hover{filter:none;background:#faf8f4;border-color:#b8b1a6}
button.btn.sm,a.btn.sm,label.btn.sm,.btn.sm{min-height:34px;padding:0 12px;font-size:13.5px;border-radius:8px}
.btn:disabled,.btn[disabled]{opacity:.5;cursor:not-allowed;filter:none}
@media (max-width:600px){button.btn.sm,a.btn.sm,label.btn.sm{min-height:40px}}
.inp,textarea,select.inp,input[type=date],input[type=time]{border-color:var(--line-strong);border-radius:10px;transition:border-color .15s,box-shadow .15s}
.inp:focus,textarea:focus,select:focus,input[type=date]:focus,input[type=time]:focus{outline:0;border-color:#4f8691;box-shadow:0 0 0 3px #e6eef0}
.card,.v31-card,.v19-card,.kpi,.v20-card{border-color:var(--line);box-shadow:var(--shadow-1)}
.card{border-radius:14px}
.seg2 button,.seg3 button,.v50-seg button{font-weight:600}
.pn-main{display:grid;gap:16px;min-width:0}
.pn-main>*{margin:0!important}
.pn-main>*{min-width:0;max-width:100%}
.pn-main>.v19,.pn-main>.v31{max-width:none;width:100%;min-width:0}
.pn-main .v19-head,.pn-main .v31-head{flex-wrap:wrap}
.pn-main .v19-head>div:first-child,.pn-main .v31-head>div:first-child{min-width:0}
@media (min-width:701px){.pn-main .v19-head>div:first-child,.pn-main .v31-head>div:first-child{flex:1 1 320px}}
@media (prefers-reduced-motion:reduce){.btn,.inp,textarea{transition:none}}
.f[data-stf="new"]{background:#ffffff!important;border-color:var(--line-strong)!important;color:var(--ink)!important}
.f[data-stf="closed"]{background:#e3f3e9!important;border-color:#a9d3bb!important;color:var(--ink)!important}
.f[data-stf="clean"]{background:#e0f2fe!important;border-color:#bae6fd!important;color:var(--ink)!important}
.f[data-stf="following"]{background:#fff0df!important;border-color:#eec493!important;color:var(--ink)!important}
.f[data-stf="chronic"]{background:#f8e1de!important;border-color:#e2aaa3!important;color:var(--ink)!important}
.f[data-stf]:not([data-stf="all"]).on{box-shadow:0 0 0 2px var(--brand)!important;font-weight:700!important}
.v63-lang{margin:0 0 0 auto}
.v63-lang{display:inline-flex;align-items:center;gap:2px;font-size:13.5px;color:rgba(255,255,255,.45)}
.v63-lang button{border:0;border-bottom:2px solid transparent;background:none;color:rgba(255,255,255,.62);font:inherit;font-weight:600;padding:6px 4px;cursor:pointer;letter-spacing:.01em;border-radius:0}
.v63-lang button:hover{color:#ffffff}
.v63-lang button.on{color:#ffffff;border-bottom-color:#d4a629}
.v63-lang button:focus-visible{outline:2px solid #d4a629;outline-offset:2px;border-radius:4px}
.card,.v31-card,.v19-card,.kpi,.v20-card,.v20-obc,.v20-next,.v22,.qcard,.v51-r{border-color:transparent!important;box-shadow:var(--elev-1)!important}
.card:hover,.qcard:hover{box-shadow:var(--elev-2)!important}
.card,.v31-card,.v19-card{transition:box-shadow .2s}
.qcard{border-radius:14px}
.v50-box,.pop-card,.vw-card{box-shadow:0 24px 60px rgba(18,32,42,.22)!important;border:0!important}
.row+.row,.v53-r,.v49-r,.v48-hw,.hwrow,.v19-hwr,.v31-list>div{border-color:#efebe4!important}
.card table thead th{background:#f8f6f2;border-color:#efebe4!important}
.card table td{border-color:#f1eee8!important}
.inp,textarea,select.inp{background:#fbfaf7}
.chip,.v49-p,.v53-ok,.v53-pend,.v48-c,.v19-pill,.v59-tag{display:inline-flex!important;align-items:center;gap:6px;border-radius:999px!important;padding:4px 10px 4px 9px!important;
  font-size:12.5px!important;font-weight:600!important;letter-spacing:0;line-height:1.3;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.chip::before,.v49-p::before,.v53-ok::before,.v53-pend::before,.v48-c::before,.v19-pill::before,.v59-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.9}
.chip.c-s::before,.chip.c-a::before,.chip.c-n::before,.chip.c-miss::before,.chip.chipbtn::before,.v53-btn::before{display:none}
.chip.c-kp,.chip.c-good,.v53-ok,.v49-p.done,.v19-pill.ok{background:#e3f3e9!important;color:#17643a!important}
.chip.c-tk,.chip.c-warn,.v49-p.late,.v19-pill.late,.v48-c.late1,.v48-c.late2{background:#fcf0dd!important;color:#8f5410!important}
.chip.c-kr,.chip.c-tel,.v49-p.late2,.v19-pill.late3,.v19-pill.miss,.v48-c.late3,.v59-tag{background:#fbe4e1!important;color:#9b2c20!important}
.chip.c-ek,.v53-pend{background:#e5eef7!important;color:#2f5f86!important}
.chip.c-tm{background:#e0f2fe!important;color:#0369a1!important}
.chip.c-soft,.chip.c-pers,.chip.c-tag,.v53-st,.v51-d{background:#efebe4!important;color:#56606b!important}
.chip.c-pers,.chip.c-tag{background:#efeaf7!important;color:#5a3e91!important}
.v53-st,.v51-d,.v48-c.wait{background:transparent!important;box-shadow:none;padding-left:0!important}
.v59-c.closed .v59-tag{background:#e3f3e9!important;color:#17643a!important}
.lv{border-radius:6px;font-weight:600;letter-spacing:.01em}
.top{padding:10px 16px;position:relative;z-index:50}
.top .top-in{display:flex;align-items:center;gap:12px;flex-wrap:nowrap}
.pagehead>*{min-width:0;max-width:100%}
@media (max-width:600px){.pagehead>label{width:100%}}
@media (max-width:600px){.pagehead select.inp{width:100%}}
.qcards{gap:14px!important;align-items:stretch}
.qcards .qcard[class]{background:#ffffff!important;border:0!important;border-radius:14px;padding:14px 16px 16px;gap:12px;position:relative;overflow:hidden;opacity:1}
.qcards .qcard[class]::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:transparent}
.qcards .qcard.t-kp::before{background:#1f8a4c}
.qcards .qcard.t-tm::before{background:#0284c7}
.qcards .qcard.t-tk::before{background:#e8700f}
.qcards .qcard.t-kr::before{background:#c0392b}
.qcards .qcard.t-bk::before{background:#346a75}
.qcards .qcard.t-ms::before{background:#5a5fb0}
.qcards .qcard.t-pl::before{background:repeating-linear-gradient(90deg,#a39c90 0 6px,transparent 6px 10px)}
.qcards .qcard.seen{opacity:.6}
.qcards .qcard .row.between{align-items:center;min-height:26px}
.qcards .qcard .qimg{background:transparent!important;border:0!important;padding:0!important;min-height:48px;font-size:15px;line-height:1.55;color:var(--ink)}
.qcards .qcard .qimg:hover{color:var(--brand)}
.qcards .qcard .qimg:focus-visible{outline:0;box-shadow:var(--ring);border-radius:6px}
.qcards .qcard .code{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.qcards .stl{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:4px 10px 4px 9px;font:inherit;font-size:12px!important;font-weight:600;cursor:pointer;background:#efebe4!important;color:#56606b!important;font-family:var(--font-ui)!important;text-align:left;line-height:1.3}
.qcards .stl::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.qcards .stl:hover{filter:brightness(.97)}
.qcards .stl:focus-visible{outline:0;box-shadow:var(--ring)}
.qcards .t-kp .stl{background:#e3f3e9!important;color:#17643a!important}
.qcards .t-tm .stl{background:#e0f2fe!important;color:#0369a1!important}
.qcards .t-tk .stl{background:#fcf0dd!important;color:#8f5410!important}
.qcards .t-kr .stl{background:#fbe4e1!important;color:#9b2c20!important}
.qcards .t-bk .stl{background:#e6eef0!important;color:#12343b!important}
.qcards .t-ms .stl{background:#eceefb!important;color:#3b3f8f!important}
.qcards .lv.lvt{font-size:11px;padding:2px 8px;border-radius:6px}
.qcards .qcard .hl{display:flex;flex-direction:column;gap:4px;font-size:12.5px;border-top:1px solid #efebe4;padding-top:10px}
.qcards .qcard>.btn,.qcards .qcard>.row:last-child .btn{margin-top:auto}
@media (max-width:900px){.qcards{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media (max-width:560px){.qcards{grid-template-columns:minmax(0,1fr)!important}}
.oblegend.v63-f{gap:8px!important;margin:4px 0 14px!important}
.oblegend.v63-f .lg{border-radius:999px!important;padding:6px 14px!important;font-size:13px!important;font-weight:600;border:1px solid transparent!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.oblegend.v63-f .lg.on{box-shadow:0 0 0 2px var(--brand)!important}
.oblegend.v63-f .lg.v63-all{background:#ffffff!important}
.oblegend.v63-f .lg.v63-all.on{background:var(--brand)!important;color:#ffffff!important}
#ktSt{background:#ffffff;border-radius:14px;box-shadow:var(--elev-1);padding:16px 18px 18px;margin:0 0 16px}
#ktSt .v29-h3{font-size:16px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
#ktOb,#ktOnce,#ktSonra{display:block}
.v59-g{margin-top:14px}
.v59-gh{font-size:12px!important;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important;margin:0 0 8px!important}
.v59-c{background:#fff7f5!important;border:0!important;border-left:3px solid #c0392b!important;border-radius:10px!important;padding:10px 14px!important;margin-top:8px!important}
.v59-c p{font-size:14.5px!important;line-height:1.5;color:var(--ink)}
.v59-c.closed{background:#f5f3ee!important;border-left-color:#a39c90!important}
.v59-c.closed p{color:var(--muted)!important}
.v59-m{gap:8px!important}
.qcards .qcard.v29-here{box-shadow:0 0 0 2px #1f8a4c,var(--elev-1)!important}
.qcards .qcard .btn{font-family:var(--font-ui)!important;font-size:13.5px}
#marks .mark.sel{background:var(--brand-soft);border-radius:10px;padding-left:6px;padding-right:6px}
#p-hoca:not(.hide)>div:not(.tabrow),.pn-main{background:#ffffff;border-radius:18px;box-shadow:var(--elev-1);padding:22px 24px 26px}
#p-hoca:not(.hide)>div:not(.tabrow) :is(.card,.v31-card,.v19-card,.kpi,.v20-card,.v20-obc,.v20-next,.v22,.km-list,.km-thread,#ktSt),.pn-main :is(.card,.v31-card,.v19-card,.kpi,.v20-card,.v20-obc,.v20-next,.v22,#ktSt){box-shadow:none!important;border:1px solid #e7e1d6!important;background:#ffffff}
#p-hoca:not(.hide)>div:not(.tabrow) .card:hover,.pn-main .card:hover{box-shadow:none!important}
#p-hoca:not(.hide)>div:not(.tabrow) .qcards .qcard[class],.pn-main .qcards .qcard[class]{border:1px solid #e7e1d6!important;box-shadow:none!important}
#p-hoca:not(.hide)>div:not(.tabrow) .qcards .qcard[class]:hover,.pn-main .qcards .qcard[class]:hover{box-shadow:var(--elev-1)!important}
.pn-main .v51-r{box-shadow:none!important;border:1px solid #e7e1d6!important}
.pn-main .v19-big,.pn-main .hero{border:0!important}
@media (max-width:899px){#p-hoca:not(.hide)>div:not(.tabrow),.pn-main{border-radius:14px;padding:16px 14px 20px;margin:0 -4px}}
:is(#p-hoca:not(.hide)>div:not(.tabrow),.pn-main) :is(.card,.v31-card,.v19-card,.v20-card,.v20-obc,.v20-next,.v22,.km-list,.km-thread,#ktSt){border:0!important;box-shadow:none!important;background:transparent!important;padding-left:0!important;padding-right:0!important}
:is(#p-hoca:not(.hide)>div:not(.tabrow),.pn-main) :is(.card,.v31-card,.v19-card,.v20-card,#ktSt){padding-top:4px!important;padding-bottom:4px!important;margin-bottom:22px}
:is(#p-hoca:not(.hide)>div:not(.tabrow),.pn-main) :is(.qcards .qcard[class],.v20-sum,.v20-sum.in,.kpi,.v51-r,.v53-r,.v59-c,.km-item,.v19-detail,.v19-rail){border:0!important;box-shadow:none!important}
:is(#p-hoca:not(.hide)>div:not(.tabrow),.pn-main) :is(.qcards .qcard[class],.v20-sum,.v20-sum.in,.kpi){background:#f8f6f2!important}
:is(#p-hoca:not(.hide)>div:not(.tabrow),.pn-main) .qcards .qcard[class]:hover{background:#efebe4!important;box-shadow:none!important}
:is(#p-hoca:not(.hide)>div:not(.tabrow),.pn-main) .v51-r.wait{background:#f8f6f2!important}
:is(#p-hoca:not(.hide)>div:not(.tabrow),.pn-main) .v20-sum.in{padding:14px 16px!important;border-radius:12px}
:is(#p-hoca:not(.hide)>div:not(.tabrow),.pn-main) .v20-t,:is(#p-hoca:not(.hide)>div:not(.tabrow),.pn-main) .v20-tw{border:0!important}
#snOnce .v34-n{display:flex;align-items:flex-start;gap:10px;padding:8px 0}
.v19-goal{margin:6px 0 0;font-size:15px;color:var(--muted)}
.v19-goal span{text-transform:uppercase;font-size:11.5px;letter-spacing:.06em;font-weight:700;margin-right:6px}
.v19-goal b{color:var(--ink);font-size:18px}
main,main:has(#p-hoca:not(.hide)){max-width:1280px!important;margin:0 auto;padding:20px 24px 60px!important}
.top .top-in,body:has(#p-hoca:not(.hide)) .top-in{max-width:1280px!important;margin:0 auto;padding:0 8px}
body:has(#p-hoca:not(.hide)) .top{padding-left:16px;padding-right:16px}
@media (min-width:900px){#p-hoca:not(.hide){grid-template-columns:220px minmax(0,1fr)!important;column-gap:22px!important;max-width:none!important}}
@media (max-width:899px){main,main:has(#p-hoca:not(.hide)){padding:16px 16px 48px!important}}
@container (min-width:560px){.kq .kq-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@container (min-width:980px){.kq .kq-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)!important}}
.qcard{font-family:var(--font-ui)}
table.ut{table-layout:auto}
table.ut thead th{background:#f8f6f2}
table.ut th,table.ut td{white-space:normal}
table.ut td:nth-child(4){min-width:110px}
table.ut td:last-child{white-space:nowrap;width:1%}
table.ut tbody tr{cursor:default}
.v65-kt{margin-top:4px}
.v63-lang{position:static!important;transform:none!important}
.top .top-in{padding-right:8px!important}
}

/* App-only screens and parts (no counterpart in the prototype): styled everywhere, inside the prototype areas too */
.qtext,.qimg .qtext{font-family:Georgia,"Times New Roman",serif;letter-spacing:0}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13.5px;color:var(--muted);margin:0 0 12px}
.crumbs a{color:var(--muted);text-decoration:none;border-radius:6px;padding:3px 6px;margin:0 -2px}
.crumbs a:hover{color:var(--brand);background:var(--brand-soft)}
.crumbs a:focus-visible{outline:0;box-shadow:var(--ring)}
.crumbs .sep{color:#a39c90;padding:0 1px}
.crumbs [aria-current]{color:var(--ink);font-weight:600;padding:3px 4px}
.pj{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;align-items:start}
.pj-nav{position:sticky;top:16px;display:flex;flex-direction:column;gap:2px;background:#ffffff;border-radius:14px;padding:8px;box-shadow:var(--elev-1,0 1px 2px rgba(22,32,42,.06))}
.pj-nav a,.pj-nav .pj-ob{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap}
.pj-nav a:hover{background:var(--soft)}
.pj-nav a:focus-visible,.pj-nav .pj-ob:focus-visible{outline:0;box-shadow:var(--ring)}
.pj-nav a[aria-current]{background:var(--brand-soft);color:var(--brand);font-weight:600}
.pj-nav .pj-ob{margin-top:6px;border:0;background:var(--brand);color:#ffffff;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;justify-content:space-between}
.pj-nav .pj-ob:hover{filter:brightness(1.1)}
.pj [id^="p-"],.pj [id^="s-"],.pj #v-soru{scroll-margin-top:16px}
@media (max-width:899px){.pj{grid-template-columns:minmax(0,1fr);gap:12px}}
@media (max-width:899px){.pj-nav{top:0;z-index:20;flex-direction:row;overflow-x:auto;margin:0 -16px;padding:6px 10px;border-radius:0;scrollbar-width:none}}
@media (max-width:899px){.pj-nav::-webkit-scrollbar{display:none}}
@media (max-width:899px){.pj-nav a,.pj-nav .pj-ob{flex:0 0 auto}}
@media (max-width:899px){.pj-nav .pj-ob{margin:0 0 0 4px}}
@media (max-width:899px){.pj [id^="p-"],.pj [id^="s-"],.pj #v-soru{scroll-margin-top:64px}}
.v63-lang.v63-light{color:#8a8378;background:rgba(255,255,255,.8);border-radius:10px;padding:2px 6px;backdrop-filter:blur(6px)}
.v63-lang.v63-light button{color:#56606b}
.v63-lang.v63-light button:hover,.v63-lang.v63-light button.on{color:var(--brand)}
.kb-panel,.km-list,.km-thread,.ku-card{border-color:transparent!important;box-shadow:var(--elev-1)!important}
.kb-item{border-color:#efebe4!important}
.hw-chip,.kq-st{display:inline-flex!important;align-items:center;gap:6px;border-radius:999px!important;padding:4px 10px 4px 9px!important;
  font-size:12.5px!important;font-weight:600!important;letter-spacing:0;line-height:1.3;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.hw-chip::before,.kq-st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto;opacity:.9}
.kq-st-approved{background:#e3f3e9!important;color:#17643a!important}
.kq-st-pending{background:#fcf0dd!important;color:#8f5410!important}
.kq-st-rejected{background:#fbe4e1!important;color:#9b2c20!important}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:6px;min-width:0}
.top .kb-btn{width:42px;height:42px;border-radius:10px;color:#e6eef0}
.um{position:relative;min-width:0}
.um-btn{display:flex;align-items:center;gap:10px;min-width:0;max-width:280px;height:46px;padding:0 10px 0 5px;border:0;border-radius:12px;background:transparent;color:#fff;cursor:pointer;text-align:left}
.um-btn:hover,.um-btn[aria-expanded="true"]{background:rgba(255,255,255,.12)}
.um-btn:focus-visible,.top .kb-btn:focus-visible{outline:2px solid #d4a629;outline-offset:2px}
.um-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#e6eef0;color:var(--brand);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;letter-spacing:.02em}
.um-av.lg{width:40px;height:40px;font-size:14px;background:var(--brand);color:#fff}
.um-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.um-txt b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-txt small{font-size:12px;color:#c9dadd;white-space:nowrap}
.um-chev{flex:0 0 auto;color:#c9dadd}
.um-panel{position:absolute;right:0;top:54px;width:260px;background:#fff;color:var(--ink);border-radius:14px;box-shadow:0 16px 40px rgba(18,32,42,.2);padding:6px;z-index:70}
.um-head{display:flex;align-items:center;gap:10px;padding:10px 10px 12px;border-bottom:1px solid #efebe4;margin-bottom:6px}
.um-head b{display:block;font-size:14.5px}
.um-head small{display:block;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.um-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 10px 4px}
.um-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.um-item:hover{background:var(--soft)}
.um-item:focus-visible{outline:0;box-shadow:var(--ring)}
.um-item.on{font-weight:600;color:var(--brand)}
.um-sep{height:1px;background:#efebe4;margin:6px 4px}
@media (max-width:600px){.um-txt,.um-chev{display:none}}
@media (max-width:600px){.um-btn{padding:0 4px;height:44px}}
.lgs{position:relative}
.lgs-btn{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 10px;border:0;border-radius:10px;background:transparent;color:#e6eef0;font:inherit;font-size:13.5px;font-weight:700;letter-spacing:.04em;cursor:pointer}
.lgs-btn:hover,.lgs-btn[aria-expanded="true"]{background:rgba(255,255,255,.12);color:#fff}
.lgs-btn:focus-visible{outline:2px solid #d4a629;outline-offset:2px}
.lgs-panel{width:180px;top:50px}
#lqCard .lq-row{flex-wrap:nowrap;align-items:center;gap:10px}
#lqCard .lq-n{flex:0 0 22px;text-align:right;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
#lqCard .lq-row>.qimg,#lqCard .lq-row>button.qv{flex:1;min-width:0}
@media (max-width:600px){#marks .mark .mk-tag{order:0}}
#snOnce .v34-n.sn-new span:nth-child(2){font-weight:600}
.v34-n .sn-st{margin-left:auto;flex:0 0 auto;font-size:12px;color:var(--muted);white-space:nowrap}
.v34-n .sn-st.read{color:#17643a}
.brand{display:inline-flex;align-items:center;gap:10px;color:#ffffff;text-decoration:none;flex:0 0 auto}
.brand-mark{width:38px;height:38px;color:#ffffff;flex:0 0 auto}
.brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand-txt b{font-size:19px;font-weight:700;letter-spacing:-.01em}
.brand-txt small{font-size:11px;letter-spacing:.14em;color:#c9dadd;font-style:italic;font-family:Georgia,serif;margin-top:2px}
.brand:focus-visible{outline:2px solid #d4a629;outline-offset:3px;border-radius:10px}
@media (max-width:600px){.brand-txt small{display:none}}
@media (max-width:600px){.brand-mark{width:34px;height:34px}}
.kq{container-type:inline-size}
.kq .kq-grid{grid-template-columns:minmax(0,1fr)!important}
.kq .kq-row{grid-template-columns:minmax(0,1fr)!important}
.kq .kq-form .filters{flex-wrap:wrap}
.kq .kq-form select.inp,.kq .kq-form input.inp{min-width:0}
.kq-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
#h-review .kq+.kq,#h-import .kq+.kq{border-top:1px solid #e7e1d6!important;padding-top:20px!important}
.ao-tools{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1.4fr);gap:10px;margin:4px 0 10px}
.ao-tools .inp{width:100%;margin:0}
.ao-tools-2{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
@media (max-width:760px){.ao-tools{grid-template-columns:minmax(0,1fr)}}
.ao-card .ao-meta{display:grid;gap:6px;margin:0;font-size:12.5px}
.ao-card .ao-meta>div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px}
.ao-card .ao-meta dt{color:var(--muted);font-weight:600}
.ao-card .ao-meta dd{margin:0;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.ao-card .ao-actions{display:flex;gap:8px;margin-top:auto;padding-top:4px}
.ao-card .ao-del{color:#9b2c20!important}
.ao-card.sel{box-shadow:0 0 0 2px var(--brand)!important}
.ao-drawer-bg{position:fixed;inset:0;background:rgba(18,32,42,.32);z-index:80}
.ao-drawer{position:fixed;top:0;right:0;bottom:0;width:min(780px,100vw);background:#ffffff;z-index:81;display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(18,32,42,.18)}
.ao-drawer-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 22px;border-bottom:1px solid #efebe4}
.ao-drawer-b{flex:1;overflow:auto;padding:18px 22px 28px}
.ao-drawer-b .kq{border:0!important;box-shadow:none!important;padding:0!important;background:transparent!important}
.kq .kq-form .seg2{display:flex;width:max-content;max-width:100%;margin-top:4px}
table.ut .ut-contact span{display:block;overflow-wrap:anywhere}
table.ut .ut-contact small{display:block;color:var(--muted);white-space:nowrap;font-size:12.5px}
.au-drawer{width:min(640px,100vw)}
.au-form{display:flex;flex-direction:column;gap:14px}
.au-form h2{display:none}
.au-form .grid2{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.au-form .grid2{grid-template-columns:minmax(0,1fr)}}
.au-form label.small{display:flex;flex-direction:column;gap:4px;font-weight:600}
.au-form .inp{width:100%;margin:0}
.au-form label.small .muted{font-weight:400}
.au-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.au-lbl{flex-basis:100%;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.au-chk{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;background:#f8f6f2;font-size:14px;cursor:pointer}
.au-chk:has(input:checked){background:var(--brand-soft);color:var(--brand);font-weight:600}
.au-chk input{accent-color:var(--brand);width:16px;height:16px}
.au-foot{display:flex;gap:10px;padding-top:6px;margin-top:auto}
.kc{position:fixed;inset:0;z-index:120;background:rgba(18,32,42,.4);display:flex;align-items:center;justify-content:center;padding:16px}
.kc.hide{display:none!important}
.kc-card{background:#ffffff;border-radius:16px;width:100%;display:flex;flex-direction:column}
.kc-card{max-width:400px;align-items:center;text-align:center;padding:26px 24px 22px;gap:14px}
.kc-ico{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:20px;background:var(--brand-soft,#e6eef0);color:var(--brand)}
.kc.kc-danger .kc-ico{background:#fbeae7;color:#9b2c20}
.kc-msg{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
.kc-act{display:flex;gap:10px;width:100%;margin-top:4px}
.kc-act .btn{flex:1}
.kc.kc-danger .kc-ok{background:#9b2c20;color:#ffffff}
.ao-drawer.ao-modal{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(860px,calc(100vw - 32px));max-height:calc(100vh - 48px);border-radius:16px;box-shadow:0 24px 60px rgba(18,32,42,.22)}
.ao-drawer.ao-modal .ao-drawer-b{flex:1 1 auto;min-height:0}
@media (max-width:560px){.ao-drawer.ao-modal{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}}
.oblegend.v63-f .lg.kt{background:#ffffff!important;border-color:#e3a39b!important}
.oblegend.v63-f .lg.kt.on{background:#9b2c20!important;border-color:#9b2c20!important;color:#ffffff!important}
.top-actions .v63-lang{margin:0 0 0 8px}
.lg-lang{position:absolute;top:14px;right:16px;z-index:10}
.lg-lang .v63-lang{font-size:13px;padding:0!important;background:none!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;color:#8a8378}
.lg-lang .v63-lang button{padding:5px 3px;color:#56606b}
.lg-lang .v63-lang button.on{color:#16202a}
.lg-h{margin:44px 0 0;max-width:100%;text-align:center;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(28px,7.6vw,46px);line-height:1.22;letter-spacing:-.01em;color:#16202a;text-wrap:balance}
.lg-h em{font-style:italic;color:#12343b}
.lg-ob{display:inline-flex;align-items:center;margin-top:30px;padding:12px 26px;border-radius:999px;background:rgba(255,255,255,.72);box-shadow:0 1px 2px rgba(22,32,42,.06),0 6px 18px rgba(22,32,42,.06);backdrop-filter:blur(8px)}
.lg-ob .v37-tab{font-family:Georgia,"Times New Roman",serif!important;font-weight:700!important;font-size:clamp(19px,5vw,22px);color:#16202a;gap:6px;letter-spacing:0}
.lg-ob .v37-the{font-size:inherit;font-weight:400;margin-right:2px}
.lg-ob .v37-tc{font-size:inherit;margin-left:8px}
.lg-vals{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin:26px 0 0;padding:0;list-style:none;color:#3e4a54;font-weight:500;font-size:clamp(14px,3.9vw,16px);letter-spacing:.03em}
.lg-vals li{padding:0 12px;line-height:1.2;white-space:nowrap}
.lg-vals li+li{border-left:1px solid rgba(22,32,42,.22)}


/* App-only keys the prototype styles under other names: these apply on the student and parent pages too */
.f[data-stf="new"]{background:#ffffff!important;border-color:var(--line-strong)!important;color:var(--ink)!important}
.f[data-stf="closed"]{background:#e3f3e9!important;border-color:#a9d3bb!important;color:var(--ink)!important}
.f[data-stf="clean"]{background:#e0f2fe!important;border-color:#bae6fd!important;color:var(--ink)!important}
.f[data-stf="following"]{background:#fff0df!important;border-color:#eec493!important;color:var(--ink)!important}
.f[data-stf="chronic"]{background:#f8e1de!important;border-color:#e2aaa3!important;color:var(--ink)!important}
.f[data-stf]:not([data-stf="all"]).on{box-shadow:0 0 0 2px var(--brand)!important;font-weight:700!important}
.oblegend.v63-f .lg.kt{background:#ffffff!important;border-color:#e3a39b!important}
.oblegend.v63-f .lg.kt.on{background:#9b2c20!important;border-color:#9b2c20!important;color:#ffffff!important}
.v65-kt{margin-top:4px}
/* The prototype draws these as buttons; here they are links, so they lose the link underline */
.pj-main a.btn,.pj-main a.v19-file,.pj-main a.v25-ob,#p-hoca a.btn{text-decoration:none}
#p-hoca a.btn,.pj-main a.btn{display:inline-block;align-content:center}
.pj-main a.v19-file{color:inherit}
/* My Openbook on its own (no side navigation): the prototype's page width */
.pj-main{width:100%;max-width:1100px;margin:0 auto}

/* Admin card: the mobile back button keeps its label centred. */
#p-hoca .adm-back{align-items:center;margin-bottom:8px}

/* Logo as the prototype draws it (v25.5): Georgia "Klinik", italic "Dr. Karatov" between two short rules. */
.brand{gap:0}
.brand-txt{line-height:1.15}
.brand-txt b{font-family:Georgia,serif;font-size:25px;font-weight:600;letter-spacing:.015em;color:#ffffff}
.brand-txt small{display:flex;align-items:center;gap:8px;margin-top:3px;font-family:Georgia,serif;font-style:italic;font-size:12.5px;font-weight:400;letter-spacing:.16em;color:#CFE0E2}
.brand-txt small::before,.brand-txt small::after{content:"";height:1px;width:20px;background:#7FA3A9}
@media (max-width:600px){.brand-txt b{font-size:21px}.brand-txt small{display:flex;font-size:11px}}

/* Teacher screens: the prototype's wide layout. Top bar and page use the full width,
   side menu 200px, content up to 1560px (prototype v25.5). Admin, parent and student pages keep their widths. */
body:has(main.hoca-wide) .top{padding:14px 28px 14px 20px}
body:has(main.hoca-wide) .top .top-in{max-width:none!important;padding:0!important}
main.hoca-wide:has(#p-hoca:not(.hide)){max-width:none!important;padding:20px 28px 60px 20px!important}
@media (min-width:900px){main.hoca-wide #p-hoca:not(.hide){grid-template-columns:200px minmax(0,1fr)!important;max-width:1560px!important;column-gap:22px!important}}
@media (max-width:899px){main.hoca-wide:has(#p-hoca:not(.hide)){padding:16px 16px 48px!important}body:has(main.hoca-wide) .top{padding-left:16px;padding-right:16px}}