/* =====================================================================
   GLASBENA ŠOLA BANOVŠEK — design system
   Koncept: "Konjiški gozd in medenina" — topel papir, globoka gozdna
   zelena kot nosilna barva, medenina iz harmonikinih okovij za poudarke.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ------------------------------------------------------------- žetoni */
:root{
  --paper:#F7F4EC;  --paper-2:#EFEADD;  --paper-3:#E4DDCB;
  --card:#FFFFFF;
  --ink:#14231D;    --ink-2:#34443C;    --ink-3:#56655D;
  --muted:#7D8A82;  --line:#E2DCCB;     --line-2:#CFC7B1;

  --accent:#1F5A45; --accent-2:#164333; --accent-soft:#E7F0EB;
  --red:#A8322B;    --red-2:#86241E;    --red-soft:#FBEDEB;
  --brass:#C08A2E;  --brass-2:#9C6E1F;  --brass-soft:#FAF1DE;
  --green:#2E7A52;  --green-soft:#E8F3EC;
  --amber:#B4741A;  --amber-soft:#FCF1DE;
  --blue:#2F5F8A;   --blue-soft:#E9F0F7;

  --sidebar-bg:#122019;

  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
  --sh-1:0 1px 2px rgba(20,35,29,.05), 0 1px 3px rgba(20,35,29,.04);
  --sh-2:0 2px 6px rgba(20,35,29,.06), 0 8px 24px rgba(20,35,29,.07);
  --sh-3:0 14px 44px rgba(20,35,29,.16);

  --sans:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'DM Serif Display',Georgia,'Times New Roman',serif;

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

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; line-height:1.12; margin:0; letter-spacing:-.005em}
h1{font-size:clamp(28px,4.2vw,42px)}
h2{font-size:clamp(22px,3vw,30px)}
h3{font-size:19px}
h4{font-size:16px}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
::selection{background:var(--accent); color:#fff}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 24px}
.mt0{margin-top:0} .mb0{margin-bottom:0}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:12px}
.mono{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.right{text-align:right} .center{text-align:center}
.nowrap{white-space:nowrap}
.hidden{display:none !important}

/* --------------------------------------------------------- tipografija */
.eyebrow{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--muted);
}
.lead{font-size:clamp(16px,2vw,19px); line-height:1.65; color:var(--ink-2)}
.display{font-family:var(--serif); font-weight:600}
.serif{font-family:var(--serif)}

/* -------------------------------------------------------------- gumbi */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  padding:10px 18px; border-radius:var(--r); font-weight:600; font-size:14.5px;
  cursor:pointer; transition:transform .12s var(--ease), box-shadow .18s var(--ease), background .18s;
  white-space:nowrap; text-align:center;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none}
.btn-primary{--bg:var(--accent); --bd:var(--accent)}
.btn-primary:hover{--bg:var(--accent-2)}
.btn-brass{--bg:var(--brass); --bd:var(--brass); --fg:#1E1606}
.btn-brass:hover{--bg:#D29A39}
.btn-ghost{--bg:transparent; --fg:var(--ink); --bd:var(--line-2)}
.btn-ghost:hover{--bg:var(--paper-2)}
.btn-quiet{--bg:var(--paper-2); --fg:var(--ink-2); --bd:transparent}
.btn-quiet:hover{--bg:var(--paper-3)}
.btn-danger{--bg:transparent; --fg:var(--red); --bd:#E7C6C9}
.btn-danger:hover{--bg:var(--red-soft)}
.btn-sm{padding:6px 12px; font-size:13px; border-radius:var(--r-sm)}
.btn-lg{padding:14px 26px; font-size:16px; border-radius:14px}
.btn-block{display:flex; width:100%}

/* -------------------------------------------------------------- kartice */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.card-p{padding:22px}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 22px; border-bottom:1px solid var(--line);
}
.card-head h3{font-size:17px}
.card-body{padding:22px}
.card-foot{padding:14px 22px; border-top:1px solid var(--line); background:var(--paper-2);
  border-radius:0 0 var(--r-lg) var(--r-lg)}

.grid{display:grid; gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.flex{display:flex; gap:12px; align-items:center}
.flex-between{display:flex; gap:12px; align-items:center; justify-content:space-between}
.flex-wrap{flex-wrap:wrap}
.stack{display:flex; flex-direction:column; gap:14px}
.gap-sm{gap:8px} .gap-lg{gap:24px}

/* ------------------------------------------------------------- značke */
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--paper-2); color:var(--ink-2); border:1px solid var(--line);
  white-space:nowrap;
}
.badge-green{background:var(--green-soft); color:var(--green); border-color:#CBE4D6}
.badge-red{background:var(--red-soft); color:var(--red); border-color:#EFD2D5}
.badge-amber{background:var(--amber-soft); color:var(--amber); border-color:#EEDCBB}
.badge-blue{background:var(--blue-soft); color:var(--blue); border-color:#CFDFEC}
.badge-brass{background:var(--brass-soft); color:var(--brass); border-color:#EDDCB6}
.dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}

/* -------------------------------------------------------------- obrazci */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px}
.field label, .lbl{font-size:13px; font-weight:600; color:var(--ink-2)}
.field .hint{font-size:12.5px; color:var(--muted)}
.input, input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=date],input[type=time],input[type=number],input[type=search],select,textarea{
  width:100%; background:#fff; border:1px solid var(--line-2); border-radius:var(--r);
  padding:10px 13px; font-size:15px; transition:border-color .15s, box-shadow .15s;
}
textarea{min-height:104px; resize:vertical; line-height:1.6}
select{appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238E8375' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:36px}
.input:focus,input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,90,69,.13);
}
input[type=checkbox],input[type=radio]{width:17px; height:17px; accent-color:var(--accent); margin:0}
.check{display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5; cursor:pointer}
.row{display:grid; gap:14px; grid-template-columns:repeat(2,minmax(0,1fr))}
.row-3{display:grid; gap:14px; grid-template-columns:repeat(3,minmax(0,1fr))}
fieldset{border:none; margin:0 0 8px; padding:0}
legend{font-family:var(--serif); font-size:17px; font-weight:600; margin-bottom:12px; padding:0}

/* -------------------------------------------------------------- tabele */
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.tbl{width:100%; border-collapse:collapse; font-size:14px}
.tbl th{
  text-align:left; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:10px 14px; border-bottom:1px solid var(--line);
  white-space:nowrap; background:var(--paper-2);
}
.tbl td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tbody tr{transition:background .12s}
.tbl tbody tr:hover{background:var(--paper-2)}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{text-align:right; font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- avatarji */
.avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-weight:700; font-size:13.5px;
  background:var(--ink); color:var(--paper); letter-spacing:.02em;
}
.avatar-lg{width:60px; height:60px; font-size:20px}
.avatar-sm{width:30px; height:30px; font-size:11.5px}

/* --------------------------------------------------------- obvestila */
.alert{
  display:flex; gap:12px; align-items:flex-start;
  padding:13px 16px; border-radius:var(--r); font-size:14px; margin-bottom:16px;
  border:1px solid; line-height:1.55;
}
.alert-ok{background:var(--green-soft); border-color:#CBE4D6; color:#1F5638}
.alert-err{background:var(--red-soft); border-color:#EFD2D5; color:var(--red-2)}
.alert-info{background:var(--blue-soft); border-color:#CFDFEC; color:var(--blue)}
.alert-warn{background:var(--amber-soft); border-color:#EEDCBB; color:#8A5C13}

.empty{
  text-align:center; padding:52px 24px; color:var(--muted);
}
.empty svg{margin:0 auto 14px; opacity:.4}
.empty h4{font-size:17px; color:var(--ink-2); margin-bottom:6px}

/* ==================================================================
   LUPINA PANELA
   ================================================================== */
.app{display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh}

.sidebar{
  background:var(--sidebar-bg); color:#C6CFC9; padding:22px 16px;
  background-image:radial-gradient(120% 60% at 0% 0%, rgba(192,138,46,.10), transparent 60%);
  display:flex; flex-direction:column; gap:8px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sidebar .brand{
  display:flex; align-items:center; gap:11px; padding:4px 8px 20px; color:var(--paper);
}
.sidebar .brand .mark{width:34px; height:34px; flex:none}
.sidebar .brand b{font-family:var(--serif); font-size:18px; font-weight:400; line-height:1.2; display:block}
.sidebar .brand span{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8FA197}

.nav-group{margin-top:14px}
.nav-label{
  font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:#6F8178; padding:0 10px 7px; font-weight:700;
}
.nav a{
  display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:10px;
  font-size:14.5px; font-weight:500; color:#C6CFC9; transition:background .15s, color .15s;
}
.nav a:hover{background:rgba(255,255,255,.07); color:#fff}
.nav a.on{background:linear-gradient(180deg,#2A6B53,var(--accent)); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.nav a .ic{width:18px; height:18px; flex:none; opacity:.85}
.nav a.on .ic{opacity:1}
.nav a .cnt{
  margin-left:auto; background:rgba(255,255,255,.14); color:#fff;
  font-size:11px; font-weight:700; padding:1px 7px; border-radius:999px;
}
.nav a.on .cnt{background:rgba(0,0,0,.22)}

.sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.1)}
.sidebar-user{display:flex; align-items:center; gap:10px; padding:8px 6px}
.sidebar-user .avatar{background:var(--brass); color:#241C0A}
.sidebar-user b{color:var(--paper); font-size:13.5px; display:block; line-height:1.3}
.sidebar-user span{font-size:11.5px; color:#8FA197}

.main{min-width:0; display:flex; flex-direction:column}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 30px; border-bottom:1px solid var(--line); background:rgba(247,244,236,.88);
  backdrop-filter:blur(10px); position:sticky; top:0; z-index:30;
}
.topbar h1{font-size:23px}
.topbar .sub{font-size:13px; color:var(--muted); margin-top:1px}
.content{padding:28px 30px 64px; flex:1}
.burger{display:none; background:none; border:none; padding:6px; cursor:pointer}

/* -------------------------------------------------------- kazalniki */
.stats{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--sh-1); position:relative; overflow:hidden;
}
.stat .k{font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.03em}
.stat .v{font-family:var(--serif); font-size:31px; font-weight:400; line-height:1.1; margin-top:7px;
  font-variant-numeric:tabular-nums}
.stat .m{font-size:12.5px; color:var(--muted); margin-top:5px}
.stat.accent-red .v{color:var(--red)}
.stat.accent-green .v{color:var(--green)}
.stat.accent-amber .v{color:var(--amber)}
.stat::after{content:''; position:absolute; inset:auto 0 0 0; height:3px; background:var(--line)}
.stat.accent-red::after{background:var(--red)}
.stat.accent-green::after{background:var(--green)}
.stat.accent-amber::after{background:var(--amber)}

/* ------------------------------------------------------------ zavihki */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-bottom:24px; overflow-x:auto}
.tabs a{
  padding:10px 15px; font-size:14px; font-weight:600; color:var(--muted);
  border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; transition:color .15s;
}
.tabs a:hover{color:var(--ink-2)}
.tabs a.on{color:var(--accent); border-bottom-color:var(--accent)}

/* ------------------------------------------------------- urnik/koledar */
.cal{display:grid; grid-template-columns:64px repeat(6,minmax(0,1fr)); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; background:var(--card)}
.cal .hdr{background:var(--paper-2); padding:10px 8px; text-align:center; border-bottom:1px solid var(--line);
  font-size:12px; font-weight:600}
.cal .hdr b{display:block; font-family:var(--serif); font-size:16px; font-weight:600}
.cal .hdr.today{background:var(--accent-soft); color:var(--accent)}
.cal .hour{font-size:11px; color:var(--muted); padding:6px 8px; text-align:right;
  border-right:1px solid var(--line); border-bottom:1px solid var(--paper-3); height:52px}
.cal .cell{border-right:1px solid var(--paper-3); border-bottom:1px solid var(--paper-3); height:52px;
  position:relative; padding:2px}
.cal .cell:last-child{border-right:none}

.ev{
  position:absolute; left:2px; right:2px; border-radius:7px; padding:4px 7px;
  font-size:11.5px; line-height:1.25; overflow:hidden; cursor:pointer;
  background:var(--ink); color:#fff; border-left:3px solid var(--brass);
  transition:transform .12s var(--ease), box-shadow .15s;
}
.ev:hover{transform:scale(1.02); box-shadow:var(--sh-2); z-index:5}
.ev b{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ev.grp{background:var(--blue); border-left-color:#9DC3E0}
.ev.done{background:var(--green); border-left-color:#9FD3B7}
.ev.cancel{background:var(--paper-3); color:var(--muted); border-left-color:var(--line-2); text-decoration:line-through}

/* ----------------------------------------------------------- časovnica */
.timeline{position:relative; padding-left:30px}
.timeline::before{content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--line)}
.tl-item{position:relative; padding-bottom:20px}
.tl-item::before{
  content:''; position:absolute; left:-26px; top:5px; width:11px; height:11px; border-radius:50%;
  background:var(--card); border:2px solid var(--line-2);
}
.tl-item.on::before{background:var(--accent); border-color:var(--accent)}
.tl-item .when{font-size:12px; color:var(--muted); font-weight:600}

/* ---------------------------------------------------------- napredek */
.bar{height:8px; background:var(--paper-3); border-radius:999px; overflow:hidden}
.bar > i{display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .5s var(--ease)}
.bar.green > i{background:var(--green)}
.bar.brass > i{background:var(--brass)}

/* izbira ocene — klik se takoj vidi */
.rate{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.rate label{
  position:relative; min-width:36px; height:36px; padding:0 11px;
  display:grid; place-items:center; border-radius:10px; cursor:pointer;
  font-size:13.5px; font-weight:700; background:var(--paper-2); color:var(--muted);
  border:1px solid var(--line); user-select:none;
  transition:background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.rate label:hover{background:var(--paper-3); color:var(--ink-2)}
.rate label input{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer;
}
.rate label:has(input:checked), .rate label.on{
  background:var(--brass); color:#fff; border-color:var(--brass);
}
.rate label:has(input:focus-visible), .rate label.focus{
  outline:2px solid var(--accent); outline-offset:2px;
}
.rate label.none{font-weight:600; min-width:auto}

.levels{display:flex; gap:5px; flex-wrap:wrap}
.lvl{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:var(--paper-2); color:var(--muted);
  border:1px solid var(--line);
}
.lvl.on{background:var(--brass); color:#fff; border-color:var(--brass)}
.lvl.cur{background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,90,69,.15)}

/* ------------------------------------------------------------- seznam */
.list{display:flex; flex-direction:column}
.list-item{
  display:flex; align-items:center; gap:14px; padding:14px 0;
  border-bottom:1px solid var(--line);
}
.list-item:last-child{border-bottom:none}
.list-item .grow{flex:1; min-width:0}
.list-item b{display:block; font-size:14.5px; font-weight:600}
.list-item .sub{font-size:13px; color:var(--muted)}

/* -------------------------------------------------------------- modal */
.modal-bg{
  position:fixed; inset:0; background:rgba(14,26,21,.52); backdrop-filter:blur(3px);
  display:grid; place-items:center; padding:20px; z-index:100;
}
.modal{
  background:var(--card); border-radius:var(--r-xl); box-shadow:var(--sh-3);
  width:min(560px,100%); max-height:88vh; overflow-y:auto;
}
.modal-head{padding:20px 24px 0; display:flex; justify-content:space-between; align-items:flex-start}
.modal-body{padding:16px 24px 24px}

/* ==================================================================
   JAVNA STRAN
   ================================================================== */
.pub-nav{
  position:sticky; top:0; z-index:50; background:rgba(247,244,236,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.pub-nav .inner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0}
.pub-nav .links{display:flex; gap:26px; align-items:center; font-size:14.5px; font-weight:500}
.pub-nav .links a:hover{color:var(--accent)}
.logo{display:flex; align-items:center; gap:11px}
.logo .mark{width:36px; height:36px}
.logo b{font-family:var(--serif); font-size:19px; font-weight:400; line-height:1.15; display:block}
.logo span{font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)}

.hero{padding:clamp(56px,9vw,110px) 0 clamp(48px,7vw,86px); position:relative; overflow:hidden}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}
.hero h1{margin-bottom:20px; letter-spacing:-.02em}
.hero h1 em{font-style:italic; color:var(--accent)}
.hero .lead{max-width:44ch; margin-bottom:30px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px}
.hero-proof{display:flex; gap:28px; flex-wrap:wrap; padding-top:26px; border-top:1px solid var(--line)}
.hero-proof div b{font-family:var(--serif); font-size:27px; font-weight:400; display:block; line-height:1.1}
.hero-proof div span{font-size:12.5px; color:var(--muted)}

.bellows{
  background:linear-gradient(155deg,#10201A 0%,#1C3329 100%);
  border-radius:var(--r-xl); padding:30px; color:var(--paper); box-shadow:var(--sh-3);
  position:relative; overflow:hidden;
}
.bellows::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.035) 22px 24px);
  pointer-events:none;
}
.bellows .mock{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:16px 18px; margin-bottom:12px; position:relative}
.bellows .mock:last-child{margin-bottom:0}
.bellows .mock .k{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#8FA197}
.bellows .mock .v{font-family:var(--serif); font-size:19px; margin-top:5px}
.bellows .mock .v small{font-size:13px; color:#AEBDB4; font-family:var(--sans)}

.section{padding:clamp(48px,7vw,84px) 0}
.section-head{max-width:62ch; margin-bottom:42px}
.section-head h2{margin-bottom:14px}
.section.tint{background:var(--paper-2); border-block:1px solid var(--line)}
.section.dark{background:var(--ink); color:var(--paper-2)}
.section.dark h2,.section.dark h3{color:var(--paper)}
.section.dark .muted{color:#8FA197}

.feature{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px}
.feature .ico{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); margin-bottom:16px;
}
.feature h3{margin-bottom:8px; font-size:18px}
.feature p{color:var(--ink-3); font-size:14.5px; margin:0}

.price{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px;
  display:flex; flex-direction:column}
.price.hot{border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,90,69,.1)}
.price .amt{font-family:var(--serif); font-size:42px; font-weight:400; line-height:1; margin:14px 0 4px}
.price .amt small{font-size:15px; color:var(--muted); font-family:var(--sans); font-weight:400}
.price ul{list-style:none; padding:0; margin:20px 0 24px; display:flex; flex-direction:column; gap:10px}
.price li{display:flex; gap:10px; font-size:14.5px; color:var(--ink-2)}
.price li svg{flex:none; margin-top:3px; color:var(--green)}

.footer{background:var(--sidebar-bg); color:#8FA197; padding:52px 0 34px; font-size:14px}
.footer a:hover{color:var(--paper)}
.footer h4{color:var(--paper); font-size:14px; font-family:var(--sans); font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:14px}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; margin-bottom:36px}
.footer-bot{border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px}
.footer-credit{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.07);
  font-size:12.5px; color:#71837A; letter-spacing:.01em;
}
.footer-credit a{color:#8FA197; border-bottom:1px solid rgba(143,161,151,.3)}
.footer-credit a:hover{color:var(--paper); border-bottom-color:var(--paper)}

/* ------------------------------------------------------------- prijava */
.auth{min-height:100vh; display:grid; grid-template-columns:1fr 1fr}
.auth-side{
  background:linear-gradient(155deg,#10201A,#1F3A2E); color:var(--paper);
  padding:52px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;
}
.auth-side::before{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.03) 26px 28px);
}
.auth-side blockquote{font-family:var(--serif); font-size:26px; line-height:1.35; margin:0; position:relative}
.auth-form{display:grid; place-items:center; padding:40px 24px}
.auth-form .inner{width:min(400px,100%)}


/* ==================================================================
   EKIPA UČITELJEV — značke, pregled lastnika, nadzor
   ================================================================== */
.ellipsis{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tchip{display:inline-flex; align-items:center; gap:7px; white-space:nowrap; font-size:13px; color:var(--ink-2)}
.tchip i{width:22px; height:22px; border-radius:999px; color:#fff; font-style:normal; font-size:9.5px; font-weight:800;
  display:grid; place-items:center; letter-spacing:.02em; flex:none}
.tavatar{border-radius:999px; color:#fff; font-weight:800; display:inline-grid; place-items:center; flex:none;
  width:40px; height:40px; font-size:14px; letter-spacing:.02em; box-shadow:0 0 0 2px var(--card)}
.sidebar-user .tavatar{box-shadow:0 0 0 2px rgba(255,255,255,.12)}
.tdot{width:9px; height:9px; border-radius:999px; flex:none; display:inline-block}

.flag{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:3px 9px;
  border-radius:999px; white-space:nowrap}
.flag-amber{background:var(--amber-soft); color:var(--amber)}
.flag-red{background:var(--red-soft); color:var(--red)}
.flag-green{background:var(--green-soft); color:var(--green)}
.cnt-inline{display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; margin-left:4px;
  border-radius:999px; background:var(--amber); color:#fff; font-size:10.5px; font-weight:800}

.team-strip{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); border-top:1px solid var(--line)}
.team-cell{padding:16px 20px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background .15s}
.team-cell:hover{background:var(--paper)}
.team-cell b{font-size:14px}

.teacher-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; align-content:start}
.tcard{padding:20px; position:relative; overflow:hidden}
.tcard::before{content:''; position:absolute; left:0; top:0; right:0; height:4px; background:var(--tc)}
.tcard.is-off{opacity:.55}
.tcard-top{display:flex; align-items:center; gap:13px; margin-bottom:16px}
.tcard h3{font-size:19px}
.tmetrics{display:grid; grid-template-columns:repeat(4,1fr); background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:14px}
.tmetrics div{padding:10px 6px; text-align:center; border-right:1px solid var(--line)}
.tmetrics div:last-child{border-right:none}
.tmetrics b{display:block; font-family:var(--serif); font-size:22px; font-weight:400; line-height:1.1}
.tmetrics span{font-size:11px; color:var(--muted)}
.tmetrics .warn b{color:var(--amber)}
.tdetail{display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; font-size:12.5px; margin-bottom:12px}
.tdetail div{display:flex; justify-content:space-between; gap:8px; border-bottom:1px dashed var(--line); padding:4px 0}
.tdetail span{color:var(--muted)}

.thead-card{position:relative; overflow:hidden}
.thead-card::before{content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--tc)}

.feed{display:flex; flex-direction:column}
.feed-item{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line)}
.feed-item:last-child{border-bottom:none}
.feed-item a{text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px}
.feed-day{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--muted); padding:14px 0 4px}
.feed-day:first-child{padding-top:0}

.hbars{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; align-items:end}
.hbar{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px}
.hbar-col{height:140px; width:100%; max-width:46px; background:var(--paper-2); border-radius:10px; display:flex; align-items:flex-end; overflow:hidden}
.hbar-col i{display:block; width:100%; border-radius:10px 10px 0 0; min-height:3px; transition:height .5s var(--ease)}
.hbar span{color:var(--muted); font-size:11px; text-transform:capitalize}

.kv{display:grid; grid-template-columns:1fr auto; gap:10px 18px; font-size:14px}
.kv span{color:var(--muted)}
.kv b{text-align:right; font-variant-numeric:tabular-nums}
.total-row{display:flex; justify-content:space-between; align-items:baseline; margin:20px 0 12px; padding-top:16px; border-top:2px solid var(--ink)}
.total-row b{font-family:var(--serif); font-size:30px; font-weight:400}

/* preklopnik pogleda */
.topbar-actions{flex-wrap:wrap; justify-content:flex-end}
.scope-switch{display:flex; align-items:center; gap:0; background:var(--card); border:1px solid var(--line-2);
  border-radius:var(--r); padding-left:11px; height:36px}
.scope-dot{width:9px; height:9px; border-radius:999px; flex:none}
.scope-switch select{border:none; background:transparent; box-shadow:none !important; font-weight:700; font-size:13.5px;
  padding:6px 30px 6px 8px; height:34px; width:auto; min-width:0; cursor:pointer}

/* obvestila osebja */
.notif{position:relative}
.notif summary{list-style:none; position:relative}
.notif summary::-webkit-details-marker{display:none}
.notif-n{position:absolute; top:-5px; right:-5px; background:var(--red); color:#fff; font-size:10px; font-weight:800;
  min-width:17px; height:17px; border-radius:999px; display:grid; place-items:center; padding:0 4px}
.notif-pop{position:absolute; right:0; top:calc(100% + 8px); width:min(340px,86vw); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-3); z-index:60; overflow:hidden}
.notif-item{display:flex; flex-direction:column; gap:2px; padding:11px 14px; border-bottom:1px solid var(--line); font-size:13px}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--paper)}
.notif-item.unread{background:var(--accent-soft)}
.notif-item span{color:var(--ink-3)}
.notif-item i{font-style:normal; font-size:11px; color:var(--muted)}

/* ==================================================================
   JAVNA STRAN — Banovšek
   ================================================================== */
.eyebrow-line{display:inline-flex; align-items:center; gap:12px; color:var(--accent)}
.eyebrow-line::before{content:''; width:28px; height:2px; background:var(--brass)}
.display-xl{font-size:clamp(40px,5.4vw,68px); line-height:1.02; letter-spacing:-.015em}
.hero-b{background:
  radial-gradient(60% 70% at 85% 30%, rgba(192,138,46,.13), transparent 70%),
  radial-gradient(50% 60% at 10% 100%, rgba(31,90,69,.08), transparent 70%)}
.hero-b .hero-grid{grid-template-columns:1.2fr .8fr}
.logo b,.sidebar .brand b{text-transform:none; letter-spacing:-.005em; color:var(--ink)}
.sidebar .brand b,.footer .logo b,.auth-side .logo b{color:var(--paper)}
.hero-art{position:relative; aspect-ratio:1/1; display:grid; place-items:center}
.hero-disc{position:absolute; inset:6%; border-radius:999px;
  background:radial-gradient(circle at 35% 30%, #2B6B53 0%, #173F31 55%, #10291F 100%);
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.03), 0 30px 80px rgba(20,35,29,.25)}
.hero-disc::after{content:''; position:absolute; inset:9%; border-radius:999px; border:1px dashed rgba(240,207,131,.28)}
.acc-art{position:relative; width:86%; transform:rotate(-8deg); animation:breathe 6s var(--ease) infinite}
@keyframes breathe{0%,100%{transform:rotate(-8deg) scale(1)} 50%{transform:rotate(-7deg) scale(1.025)}}
.float-chip{position:absolute; background:var(--card); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--sh-2); padding:11px 15px; font-size:14px; display:flex; flex-direction:column; gap:1px; min-width:170px}
.float-chip b{font-weight:700}
.fc-k{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700}
.fc-1{top:8%; left:-4%}
.fc-2{bottom:12%; right:-6%; min-width:210px}
.fc-3{bottom:4%; left:6%; flex-direction:row; align-items:center; gap:9px; min-width:0}
@media (prefers-reduced-motion:reduce){.acc-art{animation:none}}

.ribbon{background:var(--ink); color:#D7DED9; border-block:1px solid #0B1712}
.ribbon-in{display:flex; justify-content:space-between; gap:22px; padding:16px 24px; overflow-x:auto; font-size:14px; font-weight:600}
.ribbon-in span{display:inline-flex; align-items:center; gap:9px; white-space:nowrap}
.ribbon-in svg{color:var(--brass)}

.split-head{max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end}
.split-head .lead{margin:0}
.team-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px}
.teacher-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:26px 24px;
  box-shadow:var(--sh-1); position:relative; transition:transform .2s var(--ease), box-shadow .2s}
.teacher-card:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.teacher-card .tc-photo{margin-bottom:16px}
.teacher-card .tc-photo .tavatar{box-shadow:0 0 0 4px var(--paper), 0 0 0 5px var(--tc, var(--line))}
.teacher-card h3{font-size:22px; margin-bottom:3px}
.tc-role{font-size:13px; color:var(--accent); font-weight:700; margin-bottom:12px}
.teacher-card p{font-size:14px; color:var(--ink-3); margin:0}
.teacher-card.lead-card{grid-column:span 2; display:grid; grid-template-columns:auto 1fr; gap:6px 26px; align-items:start;
  background:linear-gradient(160deg,#FFFDF7,var(--brass-soft)); border-color:#EADBB8}
.teacher-card.lead-card .tc-photo{grid-row:span 4; margin:0}
.teacher-card.lead-card h3{font-size:28px}

.feature .ico{background:var(--accent-soft); color:var(--accent)}
.dark-row{display:flex; gap:18px; align-items:flex-start; margin-bottom:22px}
.dark-row h3{font-size:19px; margin-bottom:4px}
.dark-row p{margin:0; color:#AEBDB4; font-size:14.5px}
.dark-ico{width:44px; height:44px; border-radius:13px; background:rgba(192,138,46,.14); color:var(--brass); display:grid; place-items:center; flex:none}

.phone{justify-self:center; width:min(330px,100%); background:#0A1511; border-radius:42px; padding:12px;
  box-shadow:0 40px 90px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08)}
.phone-in{background:linear-gradient(170deg,#1A3328,#11231B); border-radius:32px; padding:22px 16px; display:flex; flex-direction:column; gap:10px}
.ph-top{display:flex; align-items:center; gap:10px; color:var(--paper); font-size:15px; padding:4px 4px 8px}
.ph-card{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:13px 15px;
  display:flex; flex-direction:column; gap:3px; color:var(--paper); font-size:14px}
.ph-card p{margin:4px 0 0; font-size:13.5px; color:#C6CFC9; line-height:1.5}
.ph-card .fc-k{color:#8FA197}
.ph-card.ok{flex-direction:row; align-items:center; gap:8px; color:#9FD9B8; font-weight:700}

.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-xl); background:var(--card); overflow:hidden}
.step{padding:28px 24px; border-right:1px solid var(--line); position:relative}
.step:last-child{border-right:none}
.step-n{font-family:var(--serif); font-size:44px; line-height:1; color:var(--brass); margin-bottom:14px}
.step-n::after{content:'. stopnja'; font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-left:8px; vertical-align:middle}
.step h3{font-size:21px; margin-bottom:6px}
.step p{font-size:14px; color:var(--ink-3); margin:0}

.shop-art{background:linear-gradient(150deg,#1D4637,#10291F); border-radius:var(--r-xl); padding:30px; color:var(--paper); position:relative; overflow:hidden; box-shadow:var(--sh-3)}
.shop-art::before{content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(255,255,255,.03) 24px 26px)}
.shop-tag{position:relative; display:inline-flex; gap:8px; align-items:center; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; color:var(--brass); margin-bottom:22px}
.shop-grid{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px}
.shop-grid div{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:18px}
.shop-grid b{display:block; font-family:var(--serif); font-size:22px; font-weight:400}
.shop-grid span{font-size:13px; color:#AEBDB4}

.date-tile{flex:none; width:58px; padding:8px 0; border-radius:14px; background:var(--accent-soft)}
.date-tile b{display:block; font-family:var(--serif); font-size:28px; font-weight:400; line-height:1; color:var(--accent)}
.date-tile span{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}

.cta-card{background:var(--sidebar-bg); color:var(--paper); border-radius:var(--r-xl); padding:clamp(30px,5vw,58px); position:relative; overflow:hidden;
  background-image:radial-gradient(70% 90% at 100% 0%, rgba(192,138,46,.18), transparent 60%)}
.cta-card h2{color:var(--paper)}
.cta-card .lead{color:#AEBDB4}
.contact-list{display:flex; flex-direction:column; gap:18px; font-size:14.5px}
.contact-list div{display:flex; gap:14px; align-items:flex-start}
.contact-list svg{color:var(--brass); margin-top:2px; flex:none}
.contact-list span{display:flex; flex-direction:column; color:#C6CFC9}
.contact-list b{color:var(--paper); font-size:12px; letter-spacing:.1em; text-transform:uppercase}

@media (max-width:1080px){
  .hero-b .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:460px; margin:0 auto; width:100%}
  .steps{grid-template-columns:1fr 1fr}
  .step:nth-child(2){border-right:none}
  .step:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:860px){
  .split-head{grid-template-columns:1fr; gap:14px}
  .teacher-card.lead-card{grid-column:auto; grid-template-columns:1fr}
  .teacher-card.lead-card .tc-photo{grid-row:auto}
  .tdetail{grid-template-columns:1fr}
  .scope-switch select{max-width:150px}
  .float-chip{transform:scale(.88)}
  .fc-1{left:0} .fc-2{right:0}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .step{border-right:none; border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:none}
  .shop-grid{grid-template-columns:1fr 1fr}
  .topbar h1{font-size:20px}
}

/* -------------------------------------------------------------- tisk */
@media print{
  .sidebar,.topbar,.no-print,.pub-nav,.footer{display:none !important}
  .app{grid-template-columns:1fr}
  .content{padding:0}
  body{background:#fff}
  .card{box-shadow:none; border-color:#ccc}
}

/* ------------------------------------------------------------- odziv */
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .sidebar{
    position:fixed; inset:0 auto 0 0; width:280px; z-index:90; height:100dvh;
    transform:translateX(-100%); transition:transform .28s var(--ease); box-shadow:var(--sh-3);
  }
  .sidebar.open{transform:none}
  .burger{display:inline-flex}
  .content{padding:20px 18px 60px}
  .topbar{padding:12px 18px}
  /* vsi mrežni bloki v en stolpec — tudi tisti z vrstično nastavljenimi stolpci */
  .grid,.g2,.g3,.g4,.row,.row-3,.stats{grid-template-columns:1fr !important}
  .grid[style]{grid-template-columns:1fr !important}
  .footer-grid{grid-template-columns:1fr; gap:28px}
  .cal{grid-template-columns:48px repeat(6,minmax(0,1fr)); font-size:11px}
  .scrim{position:fixed; inset:0; background:rgba(14,26,21,.45); z-index:80}
}
@media (max-width:560px){
  .pub-nav .links{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .stat .v{font-size:24px}
  .hero-proof{gap:20px}
}