/* ==========================================================================
   Manage — the teacher's side of the same LMS (also used by his helpers).
   Built to be finished from a phone: the three things that need him sit on top.
   ========================================================================== */

.me .av.t{background:linear-gradient(135deg,#FF8A3D,#F24B12)}
.side-card.as-student{position:relative;display:block;transition:background .3s,border-color .3s}
.side-card.as-student p{margin-bottom:0}
.side-card.as-student .go{position:absolute;right:16px;top:50%;margin-top:-18px;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff}
.side-card.as-student .go svg{width:17px;height:17px}
.add-btn .arr.l{margin:0 0 0 -12px;background:rgba(255,255,255,.2)}

/* ---------------- the three things that need you ---------------- */
.need{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;align-items:center;padding:22px 24px;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .3s}
.need-ic{grid-row:1 / span 2;width:58px;height:58px;border-radius:19px;display:grid;place-items:center}
.need-ic svg{width:25px;height:25px}
.need b{font-family:var(--f-display);font-weight:600;font-size:46px;letter-spacing:-.05em;line-height:1}
.need-t{font-size:14.5px;color:var(--ink-2)}
.need-go{position:absolute;right:20px;top:22px;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px 0 14px;border-radius:999px;background:var(--ink);color:#fff;font-style:normal;font-size:12.5px;font-weight:700;transition:background .3s}
.need-go svg{width:12px;height:12px}
.need.zero b{color:var(--ink-3)}
.need.zero .need-go{background:#E7F9F1;color:#0E8C5C}

/* ---------------- add a recording (the everyday job) ---------------- */
.quick{display:flex;flex-direction:column;background:var(--mid);color:#fff;border:0;isolation:isolate;padding:26px 28px}
.quick::before{content:"";position:absolute;z-index:-1;width:440px;height:440px;right:-140px;top:-240px;border-radius:50%;background:radial-gradient(circle,rgba(255,90,31,.55),transparent 62%)}
.quick::after{content:"";position:absolute;z-index:-1;width:360px;height:360px;left:-150px;bottom:-250px;border-radius:50%;background:radial-gradient(circle,rgba(61,107,255,.45),transparent 62%)}
.quick h2{margin:0 0 16px;font-family:var(--f-display);font-weight:600;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.04em;line-height:1.1}
.quick-f{display:flex;gap:10px}
.q-link{flex:1;min-width:0;display:flex;align-items:center;gap:12px;height:56px;padding:0 18px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);transition:border-color .3s,background .3s}
.q-link:focus-within{border-color:var(--ember-2);background:rgba(255,255,255,.12)}
.q-link svg{width:20px;height:20px;flex:none;color:rgba(255,255,255,.55)}
.q-link input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-size:15.5px}
.q-link input::placeholder{color:rgba(255,255,255,.45)}
.quick-last{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;font-size:13px;color:rgba(255,255,255,.55)}
.quick-last b{color:#fff;font-weight:600}
.dotg{width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none}

/* ---------------- numbers ---------------- */
.stats{display:grid;grid-template-columns:1fr 1.6fr 1fr 1fr}
.stats > div{padding:2px 26px;border-left:1px solid var(--line-l)}
.stats > div:first-child{border-left:0;padding-left:0}
.stats small{display:block;font-size:12.5px;color:var(--ink-3)}
.stats b{display:block;margin:6px 0 4px;font-family:var(--f-display);font-weight:600;font-size:34px;letter-spacing:-.04em;line-height:1}
.stats b em{font-style:normal;font-family:var(--f-body);font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink-3)}
.stats > div > span{font-size:12.5px;color:var(--ink-3)}
.meter{display:block;height:8px;border-radius:8px;background:var(--ivory-2);overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--ember),var(--amber))}
.stats.two{grid-template-columns:1fr 1fr}

/* ---------------- tables ---------------- */
.tablecard{padding:6px 8px 8px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:12px;font-weight:600;color:var(--ink-3);padding:14px 16px 12px;white-space:nowrap}
.tbl td{padding:12px 16px;border-top:1px solid var(--line-l);vertical-align:middle}
.tbl td b{font-weight:600}
.who{display:flex;align-items:center;gap:12px;min-width:0}
.who > i{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;flex:none;font-style:normal;font-size:12px;font-weight:700;background:var(--ivory);color:var(--ink-2)}
.who small{display:block;font-size:12px;color:var(--ink-3)}
.rt{display:flex;align-items:center;gap:12px;min-width:0}
.rt .th{position:relative;width:68px;height:40px;border-radius:9px;overflow:hidden;flex:none;background:var(--mid)}
.rt .th svg{width:100%;height:100%;display:block}
.rt b[lang="si"]{font-family:var(--f-si)}
.tlink{font-weight:650;font-size:13px;color:var(--ember)}
.acts{display:flex;gap:6px;justify-content:flex-end}
.mini{height:34px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--ink);color:#fff;white-space:nowrap;transition:background .3s,color .3s}
.mini.soft{background:var(--ivory);color:var(--ink)}
.tbl tr.is-new td{background:linear-gradient(90deg,#F3F6FF,#fff 60%)}

/* ---------------- payment slips ---------------- */
.slips{display:flex;flex-direction:column;gap:8px}
.slip{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:18px;border:1px solid var(--line-l);background:#fff;text-align:left;transition:border-color .3s,box-shadow .3s,transform .4s var(--ease-out)}
.slip.on{border-color:var(--ink);box-shadow:0 16px 30px -22px rgba(11,18,34,.5)}
.slip > i{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;font-style:normal;font-size:13px;font-weight:700;background:var(--ivory);color:var(--ink-2)}
.slip b{display:block;font-size:14.5px;font-weight:650}
.slip small{display:block;font-size:12.5px;color:var(--ink-3)}
.slip time{margin-left:auto;font-size:12px;color:var(--ink-3);white-space:nowrap}
.slips-done{padding:26px 16px;text-align:center;border-radius:18px;background:#F1FBF6;color:#0E8C5C;font-weight:600;font-size:14.5px}
.unpaid{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px;border-radius:18px;background:var(--ivory)}
.unpaid > svg:first-child{width:20px;height:20px;flex:none;color:var(--ink-2)}
.unpaid b{display:block;font-size:14px;font-weight:650}
.unpaid small{font-size:12.5px;color:var(--ink-3)}
.unpaid .chev{margin-left:auto;width:16px;height:16px;color:var(--ink-3)}
.slip-view{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:24px;align-items:start}
.slip-img{position:relative;border-radius:20px;background:#E9E5DB;aspect-ratio:3/3.7;display:grid;place-items:center;overflow:hidden}
.slip-img svg{width:74%;height:auto;filter:drop-shadow(0 18px 24px rgba(11,18,34,.22));transform:rotate(-2.5deg)}
.slip-img .zoom{position:absolute;right:12px;bottom:12px;height:34px;padding:0 13px;border-radius:999px;display:inline-flex;align-items:center;gap:7px;background:rgba(7,11,20,.78);color:#fff;font-size:12.5px;font-weight:600}
.slip-img .zoom svg{width:14px;height:14px;filter:none;transform:none}
.slip-d h3{margin:2px 0 2px;font-family:var(--f-display);font-weight:600;font-size:28px;letter-spacing:-.035em;line-height:1.1}
.slip-d > span{font-size:13.5px;color:var(--ink-3)}
.slip-d .kv{grid-template-columns:1fr 1fr;margin-top:16px}
.slip-d .kv b.big{font-family:var(--f-display);font-size:24px;letter-spacing:-.03em}
.trust{display:flex;align-items:center;gap:10px;margin-top:6px;padding:12px 14px;border-radius:14px;background:#F1FBF6;color:#0B7A4E;font-size:13.5px;font-weight:550}
.trust svg{width:18px;height:18px;flex:none}
.slip-acts{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.btn-ok{background:#12A36B;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 28px -10px rgba(18,163,107,.7)}
.btn-ok::before{background:#0B7A4E}
.btn-ok .arr{background:rgba(255,255,255,.2)}
.why{display:flex;gap:6px;flex-wrap:wrap}
.why button{height:34px;padding:0 13px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--ivory);transition:background .3s,color .3s}
.slip-empty{grid-column:1 / -1;padding:70px 20px;text-align:center}
.slip-empty b{display:block;font-family:var(--f-display);font-weight:600;font-size:30px;letter-spacing:-.035em}
.slip-empty span{color:var(--ink-3)}

/* ---------------- AI notes: check, then publish ---------------- */
.notes-l{display:flex;flex-direction:column;gap:6px}
.nl{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:16px;border:1px solid transparent;text-align:left;transition:background .3s,border-color .3s}
.nl.on{background:var(--ivory);border-color:var(--line-l)}
.nl .st{width:9px;height:9px;border-radius:50%;flex:none;background:var(--ink-3)}
.nl .st.ready{background:var(--ember);box-shadow:0 0 0 4px rgba(255,90,31,.18)}
.nl .st.work{background:var(--blue)}
.nl .st.done{background:#12A36B}
.nl b{display:block;font-size:14px;font-weight:650;line-height:1.35}
.nl b[lang="si"]{font-family:var(--f-si);font-weight:600}
.nl small{display:block;font-size:12px;color:var(--ink-3)}
.nl > i{margin-left:auto;font-style:normal;flex:none}
.rv-h{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:16px}
.rv-h h2{margin:0 0 10px;font-family:var(--f-si-d);font-weight:800;font-size:clamp(26px,2.3vw,36px);line-height:1.2}
.rv-src{display:flex;gap:6px;flex-wrap:wrap}
.rv-src span{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;background:var(--ivory);font-size:12.5px;font-weight:600;color:var(--ink-2)}
.rv-src svg{width:14px;height:14px;color:var(--ink-3)}
.rv-acts{display:flex;gap:8px;flex:none}
.unsure{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px;padding:12px 14px;border-radius:16px;background:linear-gradient(90deg,#FFF1EA,#FFF8F3)}
.unsure > svg{width:18px;height:18px;color:var(--ember);flex:none}
.unsure > b{font-size:14px;font-weight:650;margin-right:4px}
.unsure button{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:999px;background:#fff;border:1px solid var(--line-l);font-size:12.5px;font-weight:600;color:var(--ink);transition:border-color .3s}
.unsure button svg{width:11px;height:11px;color:var(--ember)}
.unsure button time{font-family:var(--f-mono);font-size:11.5px;color:var(--ember)}
.unsure.clear{background:#F1FBF6}
.unsure.clear > svg{color:#12A36B}
.rv-tabs{margin:0 0 14px}
.rv-body{max-height:calc(100svh - 420px);min-height:220px;overflow-y:auto;padding-right:6px;scrollbar-width:thin;overscroll-behavior:contain}
.rv-body .ngrp{border:0;padding:0;margin-bottom:16px;background:none}
.rv-body .ncard{padding-right:54px}
.rv-body .ncard h4{padding-right:0}
.rv-edit{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#fff;border:1px solid var(--line-l);color:var(--ink-2);transition:border-color .3s,color .3s}
.rv-edit svg{width:15px;height:15px}
.rv-row{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:baseline;padding:12px 4px;border-bottom:1px solid var(--line-l);font-family:var(--f-si);font-size:15px;line-height:1.6;color:var(--ink)}
.rv-row time{font-family:var(--f-mono);font-size:12px;color:var(--ember)}
.rv-q{position:relative;padding:14px 54px 14px 16px;border-radius:16px;background:var(--ivory);margin-bottom:10px;font-family:var(--f-si)}
.rv-q p{margin:0 0 8px;font-weight:600;font-size:15px;line-height:1.65}
.rv-q li{font-size:14px;line-height:1.7;color:var(--ink-2)}
.rv-q ol{margin:0;padding-left:22px}
.rv-q li.ok{color:#0B7A4E;font-weight:600}

/* ---------------- forms + the "add a recording" sheet ---------------- */
.form label{display:block;margin-bottom:14px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.form select,.form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line-l2);background:#fff;font:inherit;font-size:15px;font-weight:400;color:var(--ink);outline:0;resize:vertical;transition:border-color .3s}
.form select:focus,.form textarea:focus{border-color:var(--ember)}
.doc-i .ic.who{width:44px;height:44px;border-radius:50%;background:var(--ivory);color:var(--ink-2);font-family:var(--f-body);font-size:13px;font-weight:700}
.doc-i .ic.who.t{background:linear-gradient(135deg,#FF8A3D,#F24B12);color:#fff}
.doc-i > .pill{margin-left:auto}
.sheet{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:20px;background:rgba(7,11,20,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:auto}
.sheet[hidden]{display:none}
.sheet-box{width:min(900px,100%);border-radius:28px;background:#fff;box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 4px 28px}
.sheet-h h2{margin:0;font-family:var(--f-display);font-weight:600;font-size:28px;letter-spacing:-.035em}
.add-g{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:26px;padding:16px 28px 22px}
.f{display:block;margin-bottom:14px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.f-in{display:flex;align-items:center;gap:10px;margin-top:6px;height:52px;padding:0 14px;border-radius:15px;border:1.5px solid var(--line-l2);background:#fff;transition:border-color .3s,box-shadow .3s}
.f-in:focus-within{border-color:var(--ember);box-shadow:0 0 0 4px rgba(255,90,31,.12)}
.f-in input,.f-in select{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font-size:15px;font-weight:500;color:var(--ink)}
.f-in input[lang="si"]{font-family:var(--f-si);font-size:16px}
.f-in > svg{width:18px;height:18px;flex:none;color:var(--ink-3)}
.f-in > i{width:26px;height:26px;border-radius:50%;display:none;place-items:center;flex:none;background:#E7F9F1;color:#0E8C5C}
.f-in.ok > i{display:grid}
.f-in > i svg{width:13px;height:13px}
.f-in.bad{border-color:#D9480F}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seg3{display:flex;gap:4px;margin-top:6px;padding:4px;border-radius:15px;background:var(--ivory-2)}
.seg3 button{flex:1;height:44px;border-radius:11px;font-size:14px;font-weight:600;color:var(--ink-3);transition:background .3s,color .3s}
.seg3 button.on{background:#fff;color:var(--ink);box-shadow:0 4px 14px -4px rgba(11,18,34,.18)}
.add-th{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--mid)}
.add-th svg{width:100%;height:100%;display:block}
.add-th .dur{position:absolute;right:10px;bottom:10px;height:24px;padding:0 8px;border-radius:8px;display:inline-flex;align-items:center;font-family:var(--f-mono);font-size:11px;color:#fff;background:rgba(7,11,20,.72)}
.tog{position:relative;display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:16px;border-radius:18px;background:var(--ivory);cursor:pointer}
.tog input{position:absolute;opacity:0;pointer-events:none}
.tog > i{position:relative;flex:none;width:46px;height:28px;border-radius:999px;background:var(--line-l2);transition:background .3s}
.tog > i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(11,18,34,.25);transition:transform .4s var(--ease-out)}
.tog input:checked + i{background:#12A36B}
.tog input:checked + i::after{transform:translateX(18px)}
.tog b{display:block;font-size:14.5px;font-weight:650}
.tog small{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:12.5px;font-weight:550;color:#0E8C5C}
.tog small svg{width:14px;height:14px;flex:none}
.sheet-f{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 28px 22px;border-top:1px solid var(--line-l);background:#FBFAF7}
.tdraw-x{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--ivory);color:var(--ink);flex:none;transition:background .3s,color .3s}
.tdraw-x svg{width:18px;height:18px}

/* ---------------- phones ---------------- */
@media (max-width:980px){
  .add-btn{display:none}
  .mg .grid .need{grid-column:span 4;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:14px}
  .need-ic{width:40px;height:40px;border-radius:13px}
  .need-ic svg{width:19px;height:19px}
  .need b{font-size:34px;margin-top:4px}
  .need-t{font-size:12px;line-height:1.3}
  .need-go{display:none}
  .quick{padding:20px}
  .quick-f{flex-direction:column}
  .quick-f .btn{width:100%}
  .q-link{flex:none}
  .quick-last{display:block;line-height:1.5}
  .quick-last .dotg{display:inline-block;margin-right:8px}
  .stats{grid-template-columns:1fr 1fr;gap:18px 0}
  .stats > div{padding:0 0 0 16px}
  .stats > div:nth-child(odd){border-left:0;padding-left:0}
  .stats > div.wide{grid-column:1 / -1;order:-1;border-left:0;padding-left:0}
  .stats b{font-size:28px}
  .tablecard{padding:2px 6px 6px}
  .tbl thead{display:none}
  .tbl td{padding:12px 8px}
  .tbl .hm{display:none}
  .tbl{table-layout:fixed}
  .tbl td:first-child{width:52%}
  .tbl td:last-child{width:92px;padding-left:0}
  #stTable .mini.soft{display:none}
  #mgRecs td:nth-child(2){display:none}
  #mgRecs td:last-child{display:none}
  .who > i{width:34px;height:34px}
  .pay-g .slip-view{order:-1}
  .slip-view{grid-template-columns:1fr;gap:16px}
  .slip-img{aspect-ratio:16/11}
  .slip-img svg{width:44%}
  .slip-d h3{font-size:24px}
  .rv-h{flex-direction:column;gap:12px}
  .rv-acts{width:100%}
  .rv-acts .btn{flex:1;padding:0 12px}
  .rv-body{max-height:none;overflow:visible}
  .sheet{padding:0;place-items:end center}
  .sheet-box{border-radius:26px 26px 0 0;max-height:94svh;overflow-y:auto}
  .sheet-h{padding:18px 16px 2px 20px}
  .add-g{grid-template-columns:1fr;gap:6px;padding:12px 20px 16px}
  .add-r{order:-1;margin-bottom:10px}
  .add-th{aspect-ratio:16/7}
  .sheet-f{padding:14px 20px calc(18px + env(safe-area-inset-bottom));position:sticky;bottom:0}
  .sheet-f .btn-ember{flex:1;padding:0 14px}
  .sheet-f .btn-ember .arr{display:none}
  .tab-add{color:var(--ink)!important}
  .tab-add span{width:42px;height:38px;margin-bottom:-1px;border-radius:14px;display:grid;place-items:center;background:var(--ink);color:#fff;box-shadow:0 10px 20px -8px rgba(11,18,34,.6)}
  .tab-add span svg{width:20px;height:20px}
}

@media (hover:hover){
  .need:hover{transform:translateY(-4px);box-shadow:0 24px 40px -24px rgba(11,18,34,.35)}
  .need:hover .need-go{background:var(--ember)}
  .tbl tbody tr:hover td{background:#FBFAF7}
  .slip:hover{border-color:var(--line-l2)}
  .mini:hover{background:var(--ember);color:#fff}
  .why button:hover{background:var(--ink);color:#fff}
  .nl:hover{background:var(--ivory)}
  .unsure button:hover{border-color:var(--ember)}
  .rv-edit:hover{border-color:var(--ember);color:var(--ember)}
  .side-card.as-student:hover{background:rgba(255,255,255,.09)}
  .tdraw-x:hover{background:var(--ink);color:#fff}
  .unpaid:hover b{color:var(--ember)}
}