/* tcasx.si — osnova: žetoni, ponastavitev, steklo, gumbi, obrazci */
@font-face{font-family:"InterVariable";font-style:normal;font-weight:100 900;font-display:swap;src:url("/assets/fonts/InterVariable.woff2") format("woff2")}
@font-face{font-family:"InterVariable";font-style:italic;font-weight:100 900;font-display:swap;src:url("/assets/fonts/InterVariable-Italic.woff2") format("woff2")}

:root{
  --ink:#000;--graphite:#141414;--fog:#8a8a8e;--silver:#d1d1d6;--paper:#f5f5f7;
  --text:#f5f5f7;--text-2:#a1a1a6;--text-3:#6e6e73;
  --glass:rgba(255,255,255,.06);--glass-2:rgba(255,255,255,.1);--glass-3:rgba(255,255,255,.16);
  --line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.22);
  --r-card:28px;--r-tile:20px;--r-field:14px;--r-pill:999px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","InterVariable","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-0:.9375rem;--fs-1:1.0625rem;--fs-2:1.3125rem;--fs-3:1.75rem;--fs-4:2.3125rem;--fs-5:3.0625rem;--fs-6:4.0625rem;--fs-7:5.375rem;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --wrap:1180px;--gutter:clamp(20px,4vw,40px);
  --fg:#fff;--bg:#000;
  --s1:rgba(255,255,255,.03);--s2:rgba(255,255,255,.05);--s3:rgba(255,255,255,.08);--s4:rgba(255,255,255,.12);--s5:rgba(255,255,255,.18);--s6:rgba(255,255,255,.4);
  color-scheme:dark;
}
/* svetla tema (portal, admin): isti žetoni, obrnjene vrednosti */
html[data-theme="light"]{
  --ink:#f5f5f7;--text:#0a0a0a;--text-2:#4b4b50;--text-3:#8a8a8e;
  --glass:rgba(0,0,0,.03);--glass-2:rgba(0,0,0,.05);--glass-3:rgba(0,0,0,.08);
  --line:rgba(0,0,0,.09);--line-2:rgba(0,0,0,.2);
  --fg:#000;--bg:#fff;
  --s1:rgba(0,0,0,.025);--s2:rgba(0,0,0,.04);--s3:rgba(0,0,0,.06);--s4:rgba(0,0,0,.1);--s5:rgba(0,0,0,.16);--s6:rgba(0,0,0,.3);
  color-scheme:light;
}
html[data-theme="light"],html[data-theme="light"] body{background:#f5f5f7}
html[data-theme="light"] body::before{opacity:.05;mix-blend-mode:multiply}
html[data-theme="light"] ::selection{background:#000;color:#fff}
html[data-theme="light"] :focus-visible{outline-color:#000}
html[data-theme="light"] .glass{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.62));box-shadow:inset 0 1px 0 #fff,0 30px 60px -36px rgba(0,0,0,.25)}
html[data-theme="light"] .glass::before{background:linear-gradient(135deg,#fff,rgba(0,0,0,.08) 40%,rgba(0,0,0,.05) 60%,#fff)}
html[data-theme="light"] .glass::after{background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,1),rgba(255,255,255,.3) 40%,transparent 62%)}
html[data-theme="light"] .glass--soft{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.4))}
html[data-theme="light"] .btn--primary{background:#000;color:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}
html[data-theme="light"] .btn--primary:hover{background:#1a1a1a}
html[data-theme="light"] .btn--primary::after{background:linear-gradient(90deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%)}
html[data-theme="light"] .btn--glass{color:#000;border-color:rgba(0,0,0,.14);background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));box-shadow:inset 0 1px 0 #fff}
html[data-theme="light"] .btn--glass:hover{border-color:rgba(0,0,0,.3)}
html[data-theme="light"] .btn--ghost{color:#000;border-color:var(--line-2)}
html[data-theme="light"] .btn--ghost:hover{background:var(--glass)}
html[data-theme="light"] .pill{color:var(--text);border-color:var(--line-2);background:rgba(255,255,255,.7)}
html[data-theme="light"] .pill__dot{background:#000;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
html[data-theme="light"] .pill--hollow .pill__dot,html[data-theme="light"] .pill--half .pill__dot{border-color:#000;background:transparent}
html[data-theme="light"] .input,html[data-theme="light"] .select,html[data-theme="light"] .textarea{background:rgba(255,255,255,.8);border-color:var(--line-2)}
html[data-theme="light"] .input:focus,html[data-theme="light"] .select:focus,html[data-theme="light"] .textarea:focus{border-color:rgba(0,0,0,.6);background:#fff;box-shadow:0 0 0 4px rgba(0,0,0,.06)}
html[data-theme="light"] .select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234b4b50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 14px center}
html[data-theme="light"] .select--mini{background-position:right 10px center}
html[data-theme="light"] .check input{background:#fff;border-color:var(--line-2)}
html[data-theme="light"] .check input:checked{background:#000;border-color:#000}
html[data-theme="light"] .check input::after{border-color:#fff}
html[data-theme="light"] .check a{color:#000}
html[data-theme="light"] .field__error{color:#b00020}
html[data-theme="light"] .notice{background:rgba(255,255,255,.7)}
html[data-theme="light"] .notice--err{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.3)}
html[data-theme="light"] .kbd{background:rgba(0,0,0,.04)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--ink)}
html.is-smooth{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html.is-smooth{scroll-behavior:auto}}
body{margin:0;font-family:var(--font);font-size:var(--fs-1);line-height:1.55;color:var(--text);background:var(--ink);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"ss01","cv11";overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0}
:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}
::selection{background:#fff;color:#000}

/* zrno čez vse steklo */
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:160px 160px}

.wrap{width:min(var(--wrap),100% - 2*var(--gutter));margin-inline:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- tipografija ---------- */
.t-display{font-size:clamp(2.6rem,7.2vw,var(--fs-7));line-height:.98;letter-spacing:-.035em;font-weight:600}
.t-1{font-size:clamp(2.1rem,4.6vw,var(--fs-6));line-height:1.02;letter-spacing:-.03em;font-weight:600}
.t-2{font-size:clamp(1.7rem,3.4vw,var(--fs-5));line-height:1.06;letter-spacing:-.028em;font-weight:600}
.t-3{font-size:clamp(1.45rem,2.6vw,var(--fs-4));line-height:1.12;letter-spacing:-.022em;font-weight:600}
.t-4{font-size:var(--fs-3);line-height:1.2;letter-spacing:-.016em;font-weight:600}
.t-5{font-size:var(--fs-2);line-height:1.3;letter-spacing:-.01em;font-weight:600}
.lead{font-size:clamp(1.1rem,1.6vw,var(--fs-2));line-height:1.45;color:var(--text-2);max-width:34em;text-wrap:pretty}
.muted{color:var(--text-2)}.dim{color:var(--text-3)}
.small{font-size:var(--fs-0)}
.measure{max-width:64ch;text-wrap:pretty}
.balance{text-wrap:balance}

/* ---------- steklo ---------- */
.glass{position:relative;isolation:isolate;border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.03),0 40px 90px -40px rgba(0,0,0,.9)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.06) 32%,rgba(255,255,255,.03) 62%,rgba(255,255,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .5s var(--ease);
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.12),rgba(255,255,255,.02) 42%,transparent 62%)}
.glass.is-lit::after,.glass:hover::after{opacity:1}
.glass>*{position:relative;z-index:3}
.glass--tile{border-radius:var(--r-tile)}
.glass--soft{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}
.glass--pill{border-radius:var(--r-pill)}

/* ---------- gumbi ---------- */
.btn{--pad:14px 24px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:var(--pad);border-radius:var(--r-pill);
  font-weight:600;font-size:var(--fs-1);line-height:1.1;letter-spacing:-.005em;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:transform .35s var(--ease-out),background .3s,border-color .3s,box-shadow .35s,color .3s;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn--primary{background:#fff;color:#000;box-shadow:0 10px 30px -12px rgba(255,255,255,.35)}
.btn--primary:hover{background:#f5f5f7;box-shadow:0 16px 40px -14px rgba(255,255,255,.45)}
.btn--glass{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border-color:rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.btn--glass:hover{border-color:rgba(255,255,255,.4);background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08))}
.btn--ghost{color:var(--text);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--line-2);background:var(--glass)}
.btn--sm{--pad:10px 16px;font-size:var(--fs-0)}
.btn--lg{--pad:18px 32px;font-size:var(--fs-2)}
.btn--block{width:100%}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none}
/* sijaj, ki steče čez gumb ob hoverju */
.btn::after{content:"";position:absolute;inset:-40% -60%;z-index:-1;transform:translateX(-70%) rotate(18deg);
  background:linear-gradient(90deg,transparent 35%,rgba(255,255,255,.35) 50%,transparent 65%);opacity:0;transition:transform .9s var(--ease-out),opacity .3s}
.btn--primary::after{background:linear-gradient(90deg,transparent 35%,rgba(0,0,0,.08) 50%,transparent 65%)}
.btn:hover::after{transform:translateX(70%) rotate(18deg);opacity:1}
/* tekoče steklo (feDisplacementMap) — vklopi JS ob hoverju */
.btn.is-liquid{filter:url(#liquid)}
.btn__icon{width:18px;height:18px;flex:none}

/* ---------- oznake stanja ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);font-size:var(--fs-0);font-weight:500;color:var(--text);border:1px solid var(--line);background:var(--glass)}
.pill__dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.12)}
.pill--live .pill__dot{animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(255,255,255,.12)}50%{box-shadow:0 0 0 7px rgba(255,255,255,.04)}}
.pill--hollow .pill__dot{background:transparent;border:1.5px solid #fff;box-shadow:none}
.pill--half .pill__dot{background:linear-gradient(90deg,#fff 50%,transparent 50%);border:1.5px solid #fff;box-shadow:none}
.pill--muted{color:var(--text-2)}.pill--muted .pill__dot{background:var(--fog);box-shadow:none}

/* ---------- obrazci ---------- */
.field{display:grid;gap:8px}
.field>label,.field__label{font-size:var(--fs-0);color:var(--text-2);font-weight:500}
.input,.select,.textarea{width:100%;padding:14px 16px;border-radius:var(--r-field);border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--text);
  transition:border-color .25s,background .25s,box-shadow .25s;appearance:none;-webkit-appearance:none}
.input::placeholder,.textarea::placeholder{color:var(--text-3)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--line-2)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.textarea{min-height:140px;resize:vertical;line-height:1.5}
.select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a1a1a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.select option{color:#000;background:#fff}
.field.is-invalid .input,.field.is-invalid .textarea,.field.is-invalid .select{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.08)}
.field__error{font-size:var(--fs-0);color:#fff;display:none}
.field.is-invalid .field__error{display:block}
.check{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-0);color:var(--text-2);cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin-top:1px;border-radius:7px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);display:grid;place-items:center;transition:background .2s,border-color .2s;cursor:pointer}
.check input::after{content:"";width:10px;height:6px;border:2px solid #000;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px);opacity:0;transition:opacity .15s}
.check input:checked{background:#fff;border-color:#fff}
.check input:checked::after{opacity:1}
.check a{text-decoration:underline;text-underline-offset:3px;color:var(--text)}
.form-grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
.form-grid .field--full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- opozorila ---------- */
.notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r-field);border:1px solid var(--line);background:var(--glass);font-size:var(--fs-0);color:var(--text)}
.notice--ok{border-color:rgba(255,255,255,.3)}
.notice--err{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.1)}
.notice svg{flex:none;width:18px;height:18px;margin-top:2px}

/* ---------- ikone ---------- */
svg.ico{width:20px;height:20px;flex:none}
.ico-sm{width:16px;height:16px;flex:none}
.ico-menu,.ico-close{width:20px;height:20px}

/* ---------- pomoč ---------- */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.stack{display:grid;gap:var(--stack,16px)}
.hr{height:1px;background:var(--line);border:0;margin:0}
.kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;padding:2px 6px;border-radius:6px;border:1px solid var(--line);background:rgba(255,255,255,.04)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .btn.is-liquid{filter:none}
}