/* ============================ TOKENS ============================ */
:root{
  color-scheme: light;
  --bg:#f4f6f5;
  --surface:#fdfdfc;
  --surface-2:#eef1f0;
  --surface-3:#e6eae9;
  --line:#dde3e1;
  --line-strong:#c6cfcd;
  --ink:#0f1614;
  --ink-2:#485452;
  --muted:#7c8886;
  --accent:#10474d;
  --accent-hover:#0b3236;
  --accent-ink:#ffffff;
  --accent-soft:#e0eeee;
  --focus:#1c7a83;

  --good:#0ca30c;
  --warn:#b8790a;
  --crit:#d03b3b;

  --s1:#2a78d6;  --s2:#eb6834;  --s3:#1baf7a;  --s4:#eda100;
  --s5:#e87ba4;  --s6:#008300;  --s7:#4a3aa7;  --s8:#e34948;
  --s9:#17a2a2;  --s10:#a3562b; --s11:#d64a8b; --s12:#6d8f1c;
  --s13:#8e44ad; --s14:#b5651d;

  --tint:14%;
  --r-sm:5px; --r-md:9px; --r-lg:14px;
  --shadow:0 1px 2px rgba(15,22,20,.05), 0 8px 24px -14px rgba(15,22,20,.28);
  --pxm:0.92;
  --f-display:"Bricolage Grotesque", "Public Sans", system-ui, sans-serif;
  --f-body:"Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#101413;
    --surface:#181d1c;
    --surface-2:#202625;
    --surface-3:#2a3130;
    --line:#2b3231;
    --line-strong:#3d4645;
    --ink:#eef2f1;
    --ink-2:#aab4b2;
    --muted:#828d8b;
    --accent:#7fd4d9;
    --accent-hover:#a3e4e8;
    --accent-ink:#06201f;
    --accent-soft:#13332f;
    --focus:#7fd4d9;
    --good:#0ca30c; --warn:#fab219; --crit:#e06464;
    --s1:#3987e5;  --s2:#d95926;  --s3:#199e70;  --s4:#c98500;
    --s5:#d55181;  --s6:#008300;  --s7:#9085e9;  --s8:#e66767;
    --s9:#199f9f;  --s10:#b0652f; --s11:#d4519a; --s12:#7aa02a;
    --s13:#a259c4; --s14:#c47a35;
    --tint:26%;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#101413; --surface:#181d1c; --surface-2:#202625; --surface-3:#2a3130;
  --line:#2b3231; --line-strong:#3d4645;
  --ink:#eef2f1; --ink-2:#aab4b2; --muted:#828d8b;
  --accent:#7fd4d9; --accent-hover:#a3e4e8; --accent-ink:#06201f;
  --accent-soft:#13332f; --focus:#7fd4d9;
  --good:#0ca30c; --warn:#fab219; --crit:#e06464;
  --s1:#3987e5;  --s2:#d95926;  --s3:#199e70;  --s4:#c98500;
  --s5:#d55181;  --s6:#008300;  --s7:#9085e9;  --s8:#e66767;
  --s9:#199f9f;  --s10:#b0652f; --s11:#d4519a; --s12:#7aa02a;
  --s13:#a259c4; --s14:#c47a35;
  --tint:26%;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:14px; line-height:1.45;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-display); margin:0; text-wrap:balance; font-weight:700; letter-spacing:-.015em}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* ============================ SHELL ============================ */
.shell{display:flex; flex-direction:column; min-height:100vh}

.headwrap{position:sticky; top:0; z-index:40; background:var(--surface); border-bottom:1px solid var(--line)}
.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:11px 20px 10px;
}
.subbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:0 20px 10px; border-top:1px solid var(--line); padding-top:9px;
}
.brand{display:flex; align-items:baseline; gap:9px; margin-right:4px}
.brand h1{font-size:17px}
.brand .sub{color:var(--muted); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase}
.topbar .spacer{flex:1 1 auto}

.tabs{display:flex; gap:2px; background:var(--surface-2); padding:3px; border-radius:var(--r-md)}
.tabs button{
  border:0; background:transparent; padding:6px 13px; border-radius:6px;
  color:var(--ink-2); cursor:pointer; font-weight:500; font-size:13.5px;
}
.tabsep{width:1px; align-self:stretch; margin:3px 4px; background:var(--line-strong); opacity:.7}
.tabs button[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.09); font-weight:600}

.btn{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  padding:6px 12px; border-radius:var(--r-sm); cursor:pointer; font-weight:500;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
}
.btn:hover{background:var(--surface-2)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink); font-weight:600}
.btn-primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.btn-ghost{border-color:transparent; background:transparent}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{color:var(--crit); border-color:var(--line-strong)}
.btn-danger:hover{background:color-mix(in srgb, var(--crit) 10%, var(--surface))}
.btn-sm{padding:3px 9px; font-size:12.5px}

.periodnav{display:flex; align-items:center; gap:4px}
.periodnav .label{
  min-width:172px; text-align:center; font-weight:600; font-size:13.5px;
  font-family:var(--f-mono); letter-spacing:-.01em;
}
.iconbtn{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2);
  width:29px; height:29px; border-radius:var(--r-sm); cursor:pointer;
  display:grid; place-items:center; padding:0;
}
.iconbtn:hover{background:var(--surface-2); color:var(--ink)}

.body{display:grid; grid-template-columns:264px minmax(0,1fr); flex:1 1 auto; align-items:start}
@media (max-width:900px){ .body{grid-template-columns:1fr} }

/* ============================ SIDEBAR ============================ */
.side{
  border-right:1px solid var(--line); background:var(--surface);
  padding:14px 12px 28px; align-self:stretch; min-height:100%;
}
@media (max-width:900px){ .side{min-height:0; border-right:0; border-bottom:1px solid var(--line)} }
.side h2{
  font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-family:var(--f-body); font-weight:600; margin:0 6px 9px;
}
.plist{display:flex; flex-direction:column; gap:5px; list-style:none; margin:0; padding:0}
.pcard{
  width:100%; text-align:left; border:1px solid transparent; background:transparent;
  border-radius:var(--r-md); padding:9px 10px; cursor:pointer; display:block;
}
.pcard:hover{background:var(--surface-2)}
.pcard[aria-current="true"]{background:var(--accent-soft); border-color:color-mix(in srgb, var(--accent) 35%, transparent)}
.pcard .nm{font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:8px}
.pcard .rl{color:var(--muted); font-size:12px; margin-top:1px}
.pcard .meter{display:flex; gap:2px; margin-top:8px; height:5px}
.pcard .meter i{flex:1 1 auto; border-radius:2px; background:var(--surface-3)}
.pcard .cap{
  margin-top:7px; font-size:11.5px; color:var(--ink-2);
  font-family:var(--f-mono); display:flex; justify-content:space-between; gap:6px;
}
.side .addrow{margin-top:12px; padding:0 2px}

/* ============================ MAIN ============================ */
.main{padding:18px 20px 60px; min-width:0}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.panel + .panel{margin-top:18px}
.panel-h{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 16px; border-bottom:1px solid var(--line);
}
.panel-h h3{font-size:15px}
.panel-h .hint{color:var(--muted); font-size:12.5px}
.panel-b{padding:16px}

.layout-cal{display:grid; grid-template-columns:minmax(0,1fr) 322px; gap:18px; align-items:start}
@media (max-width:1180px){ .layout-cal{grid-template-columns:1fr} }

/* ============================ WEEK GRID ============================ */
.calwrap{overflow-x:auto}
.cal{min-width:660px}
.cal-head{display:grid; border-bottom:1px solid var(--line)}
.cal-head .gut{border-right:1px solid var(--line)}
.dayh{padding:8px 9px; border-right:1px solid var(--line); text-align:left}
.dayh:last-child{border-right:0}
.dayh .dw{font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:600}
.dayh .dd{font-family:var(--f-display); font-size:19px; font-weight:700; line-height:1.15}
.dayh.today .dd{color:var(--accent)}
.dayh .hrs{
  margin-top:3px; font-family:var(--f-mono); font-size:11px; color:var(--ink-2);
  display:flex; align-items:center; gap:5px;
}
.dayh .hrs button{
  border:0; background:transparent; padding:1px 4px; border-radius:4px;
  color:var(--ink-2); cursor:pointer; font:inherit; text-align:left;
}
.dayh .hrs button:hover{background:var(--surface-2); color:var(--ink)}
.loc{
  font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-family:var(--f-body);
  font-weight:700; padding:1px 4px; border-radius:3px; background:var(--surface-3); color:var(--ink-2);
}
.dayh.off .dd, .dayh.off .hrs{opacity:.42}

.cal-body{display:grid; position:relative}
.gutter{border-right:1px solid var(--line); position:relative}
.gutter .tick{
  position:absolute; right:6px; font-family:var(--f-mono); font-size:10.5px;
  color:var(--muted); transform:translateY(-50%);
}
.daycol{border-right:1px solid var(--line); position:relative}
.daycol:last-child{border-right:0}
.daycol.offday{background:repeating-linear-gradient(135deg, transparent 0 7px, var(--surface-2) 7px 8px)}
.hourline{position:absolute; left:0; right:0; border-top:1px solid var(--line); pointer-events:none}
.hourline.half{border-top-style:dotted; opacity:.55}
.shade{position:absolute; left:0; right:0; background:var(--surface-2); opacity:.7; pointer-events:none}
.nowline{position:absolute; left:0; right:0; height:2px; background:var(--crit); z-index:6; pointer-events:none}
.nowline::before{content:""; position:absolute; left:-3px; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--crit)}

.blk{
  position:absolute; border-radius:var(--r-sm); padding:3px 6px 3px 8px;
  overflow:hidden; cursor:grab; border:1px solid transparent;
  background:color-mix(in srgb, var(--c) var(--tint), var(--surface));
  border-left:3px solid var(--c); z-index:3; user-select:none; touch-action:none;
}
.blk:hover{border-color:color-mix(in srgb, var(--c) 55%, transparent); z-index:7}
.blk.dragging{cursor:grabbing; z-index:20; box-shadow:var(--shadow); opacity:.94; pointer-events:none}
.blk .bt{font-family:var(--f-mono); font-size:10.5px; color:var(--ink-2); line-height:1.25}
.blk .bn{font-size:12px; font-weight:600; line-height:1.25; margin-top:1px}
.blk .ba{font-size:11px; color:var(--ink-2); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.blk.short{padding-top:1px; padding-bottom:1px}
.blk.short .bn{font-size:11px; margin-top:0}
.blk.mode-reserve{background:
  repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) var(--tint), var(--surface)) 0 6px,
  color-mix(in srgb, var(--c) calc(var(--tint) + 9%), var(--surface)) 6px 12px)}
.blk.mode-fixed{border-left-width:5px}
.blk .rsz{position:absolute; left:0; right:0; bottom:0; height:7px; cursor:ns-resize}
.blk .pin{position:absolute; right:4px; top:3px; font-size:9px; color:var(--ink-2); opacity:.8}

/* ============================ MONTH GRID ============================ */
.month{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border-top:1px solid var(--line)}
.month .mh{
  padding:6px 8px; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:600; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.month .mh:nth-child(7n){border-right:0}
.mcell{
  min-height:112px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:5px 6px 7px; display:flex; flex-direction:column; gap:3px; cursor:pointer;
}
.mcell:nth-child(7n){border-right:0}
.mcell:hover{background:var(--surface-2)}
.mcell.out{background:var(--surface-2); opacity:.62}
.mcell .md{font-family:var(--f-mono); font-size:12px; color:var(--ink-2); font-weight:500}
.mcell.today .md{color:var(--accent); font-weight:700}
.mcell .msum{font-family:var(--f-mono); font-size:10.5px; color:var(--muted); margin-left:auto}
.mcell .mtop{display:flex; align-items:center; gap:6px}
.chip{
  display:flex; align-items:center; gap:5px; font-size:11px; line-height:1.3;
  padding:2px 5px; border-radius:4px; border-left:3px solid var(--c);
  background:color-mix(in srgb, var(--c) var(--tint), var(--surface));
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; text-align:left;
  border-top:0; border-right:0; border-bottom:0; width:100%;
}
.chip .ct{font-family:var(--f-mono); font-size:10px; color:var(--ink-2); flex:0 0 auto}
.chip .cn{overflow:hidden; text-overflow:ellipsis}

/* ============================ DISTRIBUTION ============================ */
.dist{display:flex; flex-direction:column; gap:11px}
.drow{display:grid; grid-template-columns:1fr auto; gap:3px 10px; align-items:baseline}
.drow .dn{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:500; min-width:0}
.drow .dn .sw{width:9px; height:9px; border-radius:2px; background:var(--c); flex:0 0 auto}
.drow .dn span{min-width:0; overflow-wrap:anywhere}
.drow .dv{font-family:var(--f-mono); font-size:12px; color:var(--ink-2); white-space:nowrap}
.drow .track{
  grid-column:1/-1; position:relative; height:9px; border-radius:3px;
  background:var(--surface-3); overflow:visible; margin-top:2px;
}
.drow .fill{position:absolute; left:0; top:0; bottom:0; border-radius:3px 4px 4px 3px; background:var(--c)}
.drow .tgt{
  position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink);
  opacity:.72; border-radius:1px;
}
.drow .diff{grid-column:1/-1; font-family:var(--f-mono); font-size:11px; margin-top:1px}
.diff.ok{color:var(--good)} .diff.warn{color:var(--warn)} .diff.bad{color:var(--crit)}

.summary{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line);
}
.stat .k{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600}
.stat .v{font-family:var(--f-display); font-size:22px; font-weight:700; line-height:1.15; white-space:nowrap}
.stat .v small{font-family:var(--f-mono); font-size:12px; font-weight:400; color:var(--ink-2)}

.legendnote{font-size:11.5px; color:var(--muted); padding:10px 16px 14px; border-top:1px solid var(--line)}

/* ============================ TABLE ============================ */
.tblwrap{overflow-x:auto}
table.tbl{border-collapse:collapse; width:100%; min-width:680px}
table.tbl th{
  text-align:left; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:8px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
table.tbl td{padding:8px 12px; border-bottom:1px solid var(--line); vertical-align:middle}
table.tbl tbody tr{cursor:pointer}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl tbody tr:last-child td{border-bottom:0}
.areachip{
  display:inline-flex; align-items:center; gap:6px; padding:2px 8px 2px 6px;
  border-radius:20px; background:color-mix(in srgb, var(--c) var(--tint), var(--surface));
  font-size:12px; white-space:nowrap;
}
.areachip i{width:8px; height:8px; border-radius:50%; background:var(--c); flex:0 0 auto}
.tag{
  font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700;
  padding:2px 6px; border-radius:3px; background:var(--surface-3); color:var(--ink-2);
}
.dgroup td{background:var(--surface-2); font-weight:600; font-family:var(--f-mono); font-size:12px}

/* ============================ FORMS ============================ */
.field{display:flex; flex-direction:column; gap:4px}
.field label, .lbl{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
input[type=text],input[type=number],input[type=time],input[type=date],select,textarea{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  padding:6px 9px; width:100%; color:var(--ink);
}
textarea{resize:vertical; min-height:80px; line-height:1.5}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.grid3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
@media (max-width:640px){ .grid2,.grid3{grid-template-columns:1fr} }
.check{display:flex; align-items:center; gap:8px; font-size:13px}
.check input{width:auto}

/* ============================ DIALOG ============================ */
dialog{
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  color:var(--ink); padding:0; max-width:min(620px, 94vw); width:100%; box-shadow:var(--shadow);
}
dialog::backdrop{background:rgba(8,14,13,.5)}
dialog .dh{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)}
dialog .dh h3{font-size:16px; flex:1 1 auto}
dialog .db{padding:18px; display:flex; flex-direction:column; gap:14px; max-height:min(70vh,640px); overflow:auto}
dialog .df{display:flex; gap:9px; padding:13px 18px; border-top:1px solid var(--line); flex-wrap:wrap}
dialog .df .spacer{flex:1 1 auto}

/* ============================ AREAS EDITOR ============================ */
.arealist{display:flex; flex-direction:column; gap:6px}
.arearow{display:grid; grid-template-columns:14px minmax(0,1fr) 84px 30px; gap:9px; align-items:center}
.arearow .sw{width:11px; height:11px; border-radius:3px; background:var(--c)}
.pctsum{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:12.5px; padding:8px 10px;
  background:var(--surface-2); border-radius:var(--r-sm); margin-top:10px;
}
.banner{
  display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--line); font-size:13px; margin-bottom:16px;
}
.banner.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line)); background:color-mix(in srgb,var(--warn) 9%,var(--surface))}
/* ============================ ŠKOLA ============================ */
.blk.locked{cursor:pointer; border-left-style:double; border-left-width:6px}
.blk.locked .lk{position:absolute; right:4px; top:3px; font-size:9px; opacity:.75}
.blk.mode-program{background:color-mix(in srgb, var(--c) var(--tint), var(--surface))}
.blk.mode-club{background:repeating-linear-gradient(90deg,
  color-mix(in srgb, var(--c) var(--tint), var(--surface)) 0 10px,
  color-mix(in srgb, var(--c) calc(var(--tint) + 7%), var(--surface)) 10px 20px)}

.schoolmonth .mcell{min-height:104px; cursor:pointer}
.dtchip{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:2px 7px; border-radius:20px; background:var(--accent-soft);
  color:var(--ink); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dtchip.closed{background:var(--surface-3); border-color:transparent; color:var(--muted); font-weight:500}
.fillbadge{
  font-family:var(--f-mono); font-size:10.5px; padding:1px 5px; border-radius:3px;
  background:var(--surface-3); color:var(--ink-2);
}
.fillbadge.full{background:color-mix(in srgb,var(--good) 18%,var(--surface)); color:var(--good)}
.fillbadge.part{background:color-mix(in srgb,var(--warn) 18%,var(--surface)); color:var(--warn)}
.staffline{font-size:11px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.slotrow{
  display:grid; grid-template-columns:108px 108px minmax(0,1fr) 64px 32px; gap:8px; align-items:center;
}
.slotrow.head{font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:600}
@media (max-width:640px){ .slotrow{grid-template-columns:1fr 1fr; } .slotrow.head{display:none} }

.assignbox{
  border:1px solid var(--line); border-radius:var(--r-md); padding:10px 12px;
  display:flex; flex-direction:column; gap:8px; background:var(--surface-2);
}
.assignbox .ah{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.assignbox .ah .t{font-family:var(--f-mono); font-size:12px; color:var(--ink-2)}
.assignbox .ah .n{font-weight:600}
.assignrow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto; gap:8px; align-items:center}
.assignrow .who{font-size:13px; font-weight:500; display:flex; align-items:center; gap:6px; min-width:0}
.conflict{color:var(--crit); font-size:11px; font-weight:600}

.dtpicker{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px}
.dtpicker button{
  border:1px solid var(--line-strong); background:var(--surface); border-radius:20px;
  padding:4px 12px; cursor:pointer; font-size:13px; font-weight:500;
}
.dtpicker button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.patternrow{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px}
@media (max-width:760px){ .patternrow{grid-template-columns:repeat(2,minmax(0,1fr))} }
.patternrow .pd{display:flex; flex-direction:column; gap:4px}
.patternrow .pd .d{font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}

.empty{padding:42px 20px; text-align:center; color:var(--muted)}
.empty h3{color:var(--ink); margin-bottom:6px; font-size:16px}

/* ============================ AI ============================ */
.aiprog{display:flex; flex-direction:column; gap:8px; font-size:13px}
.aibar{height:6px; border-radius:3px; background:var(--surface-3); overflow:hidden}
.aibar i{display:block; height:100%; background:var(--accent); width:0; transition:width .3s ease}
.ailog{
  font-family:var(--f-mono); font-size:11.5px; color:var(--ink-2); max-height:150px;
  overflow:auto; background:var(--surface-2); border-radius:var(--r-sm); padding:8px 10px;
  white-space:pre-wrap; line-height:1.6;
}
@media (prefers-reduced-motion: reduce){ *{animation:none!important; transition:none!important} }

/* ============================ UŽIVATEL ============================ */
.usermenu{display:flex; align-items:center; gap:9px; padding-left:12px; border-left:1px solid var(--line)}
.usermenu img{border-radius:50%; flex:0 0 auto; background:var(--surface-3)}
.usermenu .uinfo{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.usermenu .un{font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px}
.usermenu .ur{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:170px}
@media (max-width:760px){ .usermenu .uinfo{display:none} .usermenu{padding-left:8px} }

/* ============================ PŘIHLÁŠENÍ ============================ */
.loginwrap{min-height:100vh; display:grid; place-items:center; padding:24px 16px}
.logincard{
  width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow); padding:34px 30px 28px; text-align:center;
}
.logincard .mark{
  width:46px; height:46px; margin:0 auto 18px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent); color:var(--accent-ink); font-family:var(--f-display); font-weight:700; font-size:21px;
}
.logincard h1{font-size:22px; margin-bottom:6px}
.logincard p{color:var(--ink-2); margin:0 0 24px; font-size:14px; line-height:1.55}
.gbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:11px; width:100%;
  padding:11px 16px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); font-weight:600; font-size:14.5px;
  text-decoration:none; cursor:pointer;
}
.gbtn:hover{background:var(--surface-2)}
.gbtn svg{flex:0 0 auto}
.loginnote{margin-top:20px; font-size:12.5px; color:var(--muted); line-height:1.6}
.loginerr{
  background:color-mix(in srgb, var(--crit) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--crit) 40%, transparent);
  color:var(--ink); border-radius:var(--r-md); padding:11px 14px; margin-bottom:20px;
  font-size:13px; text-align:left; line-height:1.55;
}