/* pisava Inter (licenca SIL OFL, fonts/OFL.txt); latin-ext vsebuje č, š, ž */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* naslovi, imena tekem in klubov, gumbi: Barlow Condensed (licenca SIL OFL, fonts/OFL-Barlow.txt) */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/barlow-condensed-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/barlow-condensed-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/barlow-condensed-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/barlow-condensed-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* teme: svetla, temna; brez izbire (data-theme) sledi nastavitvi računalnika. Videz »športni program«: zelo temna
   mornarsko modra namesto črne, hladne sive, ostri robovi, črte namesto senc, en poudarek (modra);
   --inv je obrnjena ploskev (izbrano kolo, gumb), --top-text in --top-muted besedilo v vrstici na vrhu */
:root {
  --bg: #f2f4f7; --card: #fff; --text: #0f172a; --muted: #5b6676; --line: #dde2e8;
  --primary: #1d4ed8; --primary-h: #1e40af; --danger: #c62828; --ok: #1f7a3a; --warn: #a86200;
  --inv: #0f172a; --inv-text: #fff; --top: #0f172a; --top-text: #cbd5e1; --top-muted: #94a3b8;
  --radius: 3px;
  --shadow: none;
  --tint-mix: 12%; --tint-base: var(--card);    /* barvne podlage (oznake): koliko barve in na čem */
  --btn-line: color-mix(in srgb, var(--text) 35%, var(--card));   /* rob sekundarnih gumbov, v obeh temah dobro viden */
  --display: "Barlow Condensed", "Arial Narrow", "Inter", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #0b1018; --card: #121924; --text: #e9edf3; --muted: #8f9aab; --line: #233042;
    --primary: #5b8cff; --primary-h: #7ba2ff; --danger: #ef5350; --ok: #5cc27a; --warn: #ffb74d;
    --inv: #e9edf3; --inv-text: #0b1018; --top: #070b11;
    --tint-mix: 22%; --tint-base: var(--card); color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #0b1018; --card: #121924; --text: #e9edf3; --muted: #8f9aab; --line: #233042;
  --primary: #5b8cff; --primary-h: #7ba2ff; --danger: #ef5350; --ok: #5cc27a; --warn: #ffb74d;
  --inv: #e9edf3; --inv-text: #0b1018; --top: #070b11;
  --tint-mix: 22%; --tint-base: var(--card); color-scheme: dark; }
* { box-sizing: border-box; }
/* drsnik je vedno prikazan, da se vsebina ne premakne vstran, ko se stran podaljša ali skrajša (npr. »Skrči vse«) */
html { overflow-y: scroll; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, th, .btn, .tag, .disp { font-family: var(--display); text-transform: uppercase; letter-spacing: .03em; }
h1 { font-size: 1.9rem; line-height: 1.05; font-weight: 700; margin: 0 0 .25rem; }
h1.formtitle { margin-bottom: 1rem; }               /* naslov obrazca brez vrstice s podatki pod njim */
h2 { font-size: 1.35rem; line-height: 1.1; font-weight: 700; margin: 0 0 1rem; }
h3 { font-size: 1.1rem; font-weight: 700; margin: 1.5rem 0 .75rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

.top { background: var(--top); color: #fff; }
/* vsebina vrstice je poravnana z robovi vsebine strani: enaka največja širina in odmik kot .wrap */
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 1100px; margin: 0 auto; padding: .6rem 1rem; }
.top-left { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.brand { font-family: var(--display); font-weight: 700; font-size: 1.3rem; text-transform: uppercase;
  letter-spacing: .08em; color: #fff; }
.top nav { display: flex; align-items: center; gap: .35rem; flex: none; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin-bottom: 1.25rem; }
.center { text-align: center; }
.login-card { width: 100%; }
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.25rem; }

label { display: block; margin-bottom: .9rem; font-size: .9rem; }
input:not([type=checkbox]):not([type=radio]), select { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); font: inherit; }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
label.check { display: flex; gap: .5rem; align-items: center; margin-bottom: .4rem; }
fieldset.checks, fieldset.kinds { border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem .9rem; margin: 0 0 .9rem; }
/* izbira z daljšim opisom v več vrsticah: kljukica ob prvi vrstici */
fieldset.kinds label.check, fieldset.checks:not(.inline) label.check { align-items: flex-start; }
fieldset.kinds input, fieldset.checks:not(.inline) input { margin-top: .3rem; }
legend { font-size: .9rem; padding: 0 .3rem; }

/* gumbi: ozka pisava z velikimi črkami, ostri robovi; primarni poln v barvi poudarka */
.btn { display: inline-block; padding: .45rem 1rem; border-radius: var(--radius); border: 1px solid var(--btn-line);
  background: var(--card); color: var(--text); font-size: 1rem; font-weight: 600; line-height: 1.35; cursor: pointer;
  text-decoration: none; }
.btn:hover { text-decoration: none; border-color: var(--text); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:hover { background: var(--primary-h); border-color: var(--primary-h); }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn.danger:hover { background: var(--danger); color: #fff; }
.btn.small { padding: .25rem .7rem; font-size: .9rem; }
/* »Nazaj …« nad vsebino strani: majhen gumb s puščico */
p.back { margin: 0 0 1rem; }
.btn.back::before { content: "←"; margin-right: .4rem; }
.btn.wide { width: 100%; margin-top: .5rem; }
button.link { background: none; border: 0; color: var(--primary); font: inherit; cursor: pointer; padding: 0; }
form.inline { display: inline; margin: 0; }

.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid; border-left-width: 4px;
  background: var(--card); }
.alert.err { color: var(--danger); border-color: var(--danger); }
.alert.ok { color: var(--ok); border-color: var(--ok); }
.alert.warn { color: var(--warn); border-color: var(--warn); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .95rem; color: var(--muted); font-weight: 600; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.name { word-break: break-word; }
td.actions { text-align: right; white-space: nowrap; }
td.actions > * + * { margin-left: .35rem; }
tr.dim td { opacity: .55; }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.empty { padding: 1.5rem 0; text-align: center; }

.tag { display: inline-block; font-size: .85rem; font-weight: 600; line-height: 1.3; padding: .05rem .45rem;
  border-radius: 2px; border: 1px solid var(--line); white-space: nowrap; }
.tag.on { color: var(--ok); border-color: var(--ok); }
.tag.off { color: var(--danger); border-color: var(--danger); }
.tag.admin { color: var(--primary); border-color: var(--primary); }
.tag.act-prijava_neuspesna, .tag.act-brisanje { color: var(--danger); border-color: var(--danger); }
.tag.act-nalaganje { color: var(--ok); border-color: var(--ok); }
.tag.act-prenos { color: var(--primary); border-color: var(--primary); }

.listhead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.listhead h2 { margin: 0; }
.listhead input { max-width: 280px; margin: 0; }

.rowform { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin-top: 1.25rem; }
.rowform label { margin: 0; flex: 1 1 200px; }
.rowform.compact { margin: 0; }
.rowform.compact label { flex: 0 1 200px; }
/* polja in gumbi v vrstici enako visoki (izbirni seznam, datum in besedilo so sicer različno visoki) */
.rowform input:not([type=checkbox]):not([type=radio]):not([type=file]), .rowform select { height: 2.6rem; }
.rowform > .btn:not(.small), .logfilters > .btn { display: inline-flex; align-items: center; height: 2.6rem; }
.itemrow > .btn.small { margin-bottom: .38rem; }   /* »Shrani« lige na sredini polja, kot v vrsticah klubov */
.danger-zone { margin-top: 1rem; }

.queue { list-style: none; margin: 0; padding: 0; }
.queue li { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.queue li:last-child { border-bottom: 0; }
.qrow { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.qname { font-weight: 600; flex: 1 1 200px; word-break: break-word; }
.qstat { font-size: .85rem; }
.qstat.okc { color: var(--ok); } .qstat.errc { color: var(--danger); } .qstat.warn { color: var(--warn); }
.qdone { color: var(--ok); }
.qdone .btn { margin-left: .5rem; }

/* ---------- estetski dodatki ---------- */
body { -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* zgornja vrstica: črna, napis VIDEOTEKA, za črto znak in ime organizacije; desno povezave in uporabniški meni */
.top { position: sticky; top: 0; z-index: 10; }
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand:hover { text-decoration: none; }
.brand .logo { color: var(--primary); flex: none; }
.login-logo { color: var(--primary); flex: none; }
/* le povezave v sami vrstici (Administracija, Dnevnik); »Nastavitve« v spustnem meniju je navaden .menu-item */
.top nav > a { display: inline-flex; align-items: center; gap: .4rem; height: 2.25rem; padding: 0 .65rem; border-radius: var(--radius);
  color: var(--top-muted); font-family: var(--display); font-size: 1.02rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  transition: color .15s, background .15s; }
.top nav > a:hover { color: #fff; text-decoration: none; background: rgb(255 255 255 / .08); }
.top nav > a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 var(--primary); border-radius: 0; }
.navicon { flex: none; opacity: .9; }

/* izbira organizacije (administrator), organizacija uporabnika in uporabniški meni */
.crumb-sep { flex: none; width: 1px; height: 1.4rem; margin: 0 .35rem; background: rgb(255 255 255 / .25); }
.top-left { flex: 0 1 auto; }
.top-left .brand { flex: none; }
.top-org { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; color: var(--top-text); }
.top-org .co-name, .cosw .co-name { font-family: var(--display); font-size: 1.05rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; }
.usermenu { flex: none; }
.cosw { flex: 0 1 auto; }
/* oba gumba z robom in enako visoka kot povezave, da je desni rob menija poravnan z robom kartice */
.cosw > summary, .usermenu > summary { display: inline-flex; align-items: center; gap: .45rem; height: 2.25rem; cursor: pointer;
  border: 1px solid rgb(255 255 255 / .2); border-radius: var(--radius); color: #fff; transition: background .15s, border-color .15s; }
.cosw > summary { padding: 0 .5rem 0 .35rem; max-width: 100%; }
.usermenu > summary { padding: 0 .5rem 0 .3rem; margin-left: .35rem; font-size: .9rem; }
.cosw > summary:hover, .usermenu > summary:hover { border-color: rgb(255 255 255 / .5); }
.usermenu > summary.on { background: rgb(255 255 255 / .1); }
.chev { flex: none; color: var(--muted); transition: transform .15s; }
.top .chev { color: var(--top-muted); }
details.menu[open] > summary .chev { transform: rotate(180deg); }
.cosw { min-width: 0; }
.co-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; min-width: 0; }
.co-mini { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 2px; display: grid; place-items: center;
  font-family: var(--display); font-size: .85rem; font-weight: 700; color: #fff; background: var(--co, var(--primary)); }
.initials { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 2px; display: grid; place-items: center;
  font-family: var(--display); font-size: .9rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--primary); }

/* grb kluba (slika ali ščit s črko) in znak organizacije (logotip ali ploščica s črko); velikost iz razreda sz-N
   (_grb.html), ker atribut style prepoveduje varnostna politika strani */
.sz-14 { --s: 14px; } .sz-16 { --s: 16px; } .sz-20 { --s: 20px; } .sz-22 { --s: 22px; } .sz-24 { --s: 24px; }
.sz-30 { --s: 30px; } .sz-32 { --s: 32px; } .sz-36 { --s: 36px; } .sz-40 { --s: 40px; } .sz-48 { --s: 48px; } .sz-52 { --s: 52px; }
.grb, .orgmark { flex: none; width: var(--s, 24px); height: var(--s, 24px); }
img.grb, img.orgmark { object-fit: contain; }
/* logotip organizacije: ležeči (npr. znak in napis zveze) ohrani obliko – višina je velikost, širina po sliki; bela
   podlaga, da je logotip z belim ozadjem tudi na temni vrstici in v temni temi videti namerno */
img.orgmark { width: auto; max-width: calc(var(--s, 40px) * 4); padding: calc(var(--s, 40px) * .08); border-radius: 2px;
  background: #fff; }
/* v glavi strani je logotip večji, da je berljiv tudi napis v njem (npr. »Rokometna zveza Slovenije«) */
.oh-row > img.orgmark { --s: 76px; }
.oh-fed > img.orgmark { --s: 48px; }
.grb.shield { display: inline-grid; place-items: center; height: calc(var(--s, 24px) * 1.12); padding-bottom: calc(var(--s, 24px) * .12);
  color: #fff; font-family: var(--display); font-weight: 700; font-size: calc(var(--s, 24px) * .5); line-height: 1;
  background: var(--cc); clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%); }
.cc-0 { --cc: #b3122a; } .cc-1 { --cc: #0b5ea8; } .cc-2 { --cc: #1d7a46; } .cc-3 { --cc: #5b2a86; }
.cc-4 { --cc: #c77d00; } .cc-5 { --cc: #2b2b2b; } .cc-6 { --cc: #0e7c86; } .cc-7 { --cc: #8a3b12; }
span.orgmark { display: inline-grid; place-items: center; border-radius: 2px; color: #fff; font-family: var(--display); font-weight: 700;
  font-size: calc(var(--s, 40px) * .5); background: var(--co, var(--primary)); }
.top span.orgmark { box-shadow: 0 0 0 1px rgb(255 255 255 / .2); }
.menu-list.left { left: 0; right: auto; }
.cosw .menu-list { min-width: 240px; max-width: min(420px, calc(100vw - 2rem)); max-height: 60vh; overflow-y: auto; }
.cosw .menu-item { white-space: normal; }         /* dolga imena organizacij v več vrsticah, ne čez rob */
.menu-who { padding: .4rem .65rem .55rem; margin-bottom: .25rem; border-bottom: 1px solid var(--line); font-weight: 600; font-size: .9rem; }
.menu-who span { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }
a.menu-item:hover { text-decoration: none; }
.menu-item.on { font-weight: 600; background: color-mix(in srgb, var(--primary) 9%, transparent); }

.login-card { max-width: 420px; padding: 2rem 1.75rem; text-align: center; border-top: 4px solid var(--primary); }
.login-card label { text-align: left; }
.login-card h1 { font-size: 2.2rem; letter-spacing: .06em; margin-top: .6rem; }
.login-card > p { margin: 0 0 1.5rem; }
.login-logo { display: block; margin: 0 auto; }
.login-card .btn.wide { padding: .6rem 1rem; font-size: 1.1rem; }

.btn { transition: background .15s, border-color .15s, color .15s; }
.btn:active { transform: translateY(1px); }
input:not([type=checkbox]):not([type=radio]), select { transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline: 0; border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }

td.name { font-weight: 500; }
/* oznaka vrste datoteke (MP4, MOV, MXF …) v barvni ploščici */
.ft { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 2.8rem; height: 1.5rem;
  padding: 0 .35rem; border-radius: 2px; font-family: var(--display); font-size: .85rem; font-weight: 700; letter-spacing: .05em;
  color: color-mix(in srgb, var(--k) 88%, var(--text)); background: color-mix(in srgb, var(--k) var(--tint-mix), var(--tint-base)); }
.ft-blue { --k: #3b82f6; } .ft-purple { --k: #8b5cf6; } .ft-green { --k: #2bb04f; } .ft-orange { --k: #eb8a12; }
.ft-teal { --k: #0ea5b7; } .ft-red { --k: #e5484d; } .ft-pink { --k: #d6409f; } .ft-grey { --k: #8b93a1; }

/* barve organizacij (izbira pri organizaciji) */
.co-modra { --co: #3b82f6; } .co-vijolicna { --co: #8b5cf6; } .co-zelena { --co: #22a35a; } .co-turkizna { --co: #0ea5b7; }
.co-oranzna { --co: #e07a1f; } .co-rdeca { --co: #e5484d; } .co-roza { --co: #d6409f; } .co-siva { --co: #8b93a1; }
.dot { display: inline-block; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--co, var(--primary));
  border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); vertical-align: middle; }
.dot.small { width: .7rem; height: .7rem; border-width: 0; box-shadow: none; margin-right: .1rem; flex: none; }
fieldset.swatches { display: flex; flex-wrap: wrap; gap: .5rem; border: 0; padding: 0; margin: 0 0 1rem; }
fieldset.swatches legend { padding: 0; margin-bottom: .4rem; }
label.sw { margin: 0; cursor: pointer; }
label.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.sw input:checked + .dot { box-shadow: 0 0 0 2px var(--text); }
label.sw input:focus-visible + .dot { outline: 2px solid var(--primary); outline-offset: 2px; }

/* glava strani organizacije (vrh kartice z datotekami): znak ali grb, veliko ime, tiha vrstica s podatki, desno
   opomnik za naj akcije in nalaganje. Klub v zvezi: zgoraj zveza, pod njo s črto povezan klub (.has-club) */
.organization-head { padding: 1.25rem 1.25rem 1.1rem; border-bottom: 1px solid var(--line); }
.oh-row { display: flex; align-items: flex-end; gap: .9rem 1rem; flex-wrap: wrap; }
.oh-kicker { font-family: var(--display); font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); }
.ch-main { flex: 1 1 260px; min-width: 0; }
.ch-main h1 { margin: 0; font-size: 2.1rem; word-break: break-word; }
.ch-main progress.quota { margin-top: .6rem; }
.oh-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem 0; margin-top: .35rem; font-size: .9rem; color: var(--muted); }
.oh-meta > * + *::before { content: "·"; margin: 0 .5rem; color: var(--muted); }
.oh-new { color: var(--primary); font-weight: 600; }
.oh-meta > .seen-all { margin-left: .6rem; }
.oh-meta > .seen-all::before { content: none; }
.oh-side { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
/* opomnik klubu: koliko odigranih tekem še čaka na naj akcije (povezava na »Moje tekme«) */
.oh-todo { display: block; padding: .35rem .75rem .4rem; border-left: 4px solid var(--primary); background: var(--bg);
  color: var(--muted); font-size: .8rem; line-height: 1.25; }
.oh-todo:hover { text-decoration: none; background: color-mix(in srgb, var(--primary) 8%, var(--bg)); }
.oh-todo strong { display: block; font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--primary); }
.oh-todo span { display: block; max-width: 9rem; }
.oh-fed { display: flex; align-items: center; gap: .65rem; }
.oh-fedname { font-family: var(--display); font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  line-height: 1.1; }
/* klub pod zvezo: zamaknjen, s kotno črto od znaka zveze, ki se konča na sredini grba (grb je navpično na sredini
   imena in podatkov, črta sega do polovice višine) */
.has-club .oh-clubrow { margin-top: .7rem; padding-left: 2.6rem; }
.oh-club { position: relative; flex: 1 1 260px; min-width: 0; align-self: stretch; display: flex; align-items: center; gap: 1rem; }
.oh-club > .ch-main { flex: 1; }
.oh-club::before { content: ""; position: absolute; left: -1.55rem; top: -.55rem; bottom: calc(50% - 1px); width: 1rem;
  border-left: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }

/* razdelki po datumu v seznamu datotek; črta loči razdelke med sabo */
table.files tr.grp td { padding: 1rem 1.25rem .3rem; border-bottom: 0; border-top: 1px solid var(--line);
  font-family: var(--display); font-size: 1.05rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: color-mix(in srgb, var(--text) 70%, var(--muted)); }
table.files tr.grp.first td { border-top: 0; padding-top: .8rem; }
tbody tr.grp:hover { background: none; }
td.num { font-variant-numeric: tabular-nums; color: var(--muted); }
td.nowrap { color: var(--muted); font-size: .9rem; }
th { padding-bottom: .5rem; border-bottom-width: 2px; }
tbody tr:last-child td { border-bottom: 0; }


/* koš, kvota, razvrščanje, dnevnik */
.listtools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.listtools:not(:has(*)) { display: none; }          /* brez orodij (klub): ne zavzame razmika na desnem robu */
progress.quota { max-width: 320px; }
.logfilters { margin: 0 0 1rem; }
.rowform.logfilters label { flex: 1 1 140px; max-width: 200px; }   /* vsi filtri in gumb v eni vrstici */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; }
.pager .btn + .btn { margin-left: .35rem; }
.tag.act-obnova { color: var(--ok); border-color: var(--ok); }
.tag.act-izbris_trajno { color: var(--danger); border-color: var(--danger); }
.tag.act-kopija { color: var(--warn); border-color: var(--warn); }

/* progress bar: nalaganje, prenos, kvota */
progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 10px; margin-top: .45rem;
  border: 0; border-radius: 99px; overflow: hidden; background: color-mix(in srgb, var(--muted) 22%, transparent); }
progress::-webkit-progress-bar { background: transparent; }
progress::-webkit-progress-value { background: var(--primary); border-radius: 99px; transition: width .25s ease; }
progress::-moz-progress-bar { background: var(--primary); border-radius: 99px; }
.queue li.done progress::-webkit-progress-value, .qtotal.done progress::-webkit-progress-value { background: var(--ok); }
.queue li.done progress::-moz-progress-bar, .qtotal.done progress::-moz-progress-bar { background: var(--ok); }
.queue li.err progress::-webkit-progress-value { background: var(--danger); }
.queue li.err progress::-moz-progress-bar { background: var(--danger); }
.queue li.cancelled { opacity: .6; }
progress.quota.full::-webkit-progress-value { background: var(--warn); }
progress.quota.full::-moz-progress-bar { background: var(--warn); }
.qtotal { padding: .7rem 0 .8rem; border-bottom: 1px solid var(--line); }
.qtotal .qname { font-weight: 700; }

/* prenosi: plošča v spodnjem desnem kotu */
.tray { position: fixed; right: 1rem; bottom: 1rem; z-index: 30; margin: 0; width: min(420px, calc(100vw - 2rem));
  max-height: 60vh; overflow-y: auto; padding: .9rem 1.1rem .3rem;
  box-shadow: 0 12px 32px rgb(16 24 40 / .22), var(--shadow); }
.tray-head { display: flex; justify-content: space-between; align-items: center; }
.tray-head h2 { margin: 0; font-size: 1rem; }
button.tray-close { background: none; border: 0; color: var(--muted); font-size: 1.4rem; line-height: 1;
  cursor: pointer; padding: 0 .25rem; }
button.tray-close:hover { color: var(--text); }
.queue li.stopped progress::-webkit-progress-value { background: var(--warn); }
.queue li.stopped progress::-moz-progress-bar { background: var(--warn); }

/* lige in tekme: lige kot zavihki, »Vse / Moje tekme« kot dva gumba, kola, tekme kot vrstice razporeda */
.ltabs { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 1.6rem; padding: 0 1.25rem; border-bottom: 1px solid var(--line); }
.ltabs > a, .ltabs-arch > summary { display: inline-flex; align-items: center; gap: .3rem; padding: .7rem 0 .5rem;
  border-bottom: 3px solid transparent; font-family: var(--display); font-size: 1.15rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); white-space: nowrap; cursor: pointer; }
.ltabs > a:hover, .ltabs-arch > summary:hover { color: var(--text); text-decoration: none; }
.ltabs > a[aria-current="page"] { color: var(--text); font-weight: 700; border-bottom-color: var(--primary); }
.ltabs-arch { margin-left: auto; }
.vm { display: flex; gap: .5rem; flex: none; }
.vm a { display: inline-flex; align-items: center; gap: .45rem; height: 2.5rem; padding: 0 1rem; border: 1px solid var(--btn-line);
  border-radius: var(--radius); background: var(--card); color: var(--text); font-family: var(--display); font-size: 1.1rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.vm a:hover { text-decoration: none; border-color: var(--text); }
.vm a[aria-current="page"] { background: var(--inv); border-color: var(--inv); color: var(--inv-text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* izbira kola: puščici, veliko izbrano kolo in številke vseh kol s črtico stanja pod vsako */
.rnav { padding: .9rem 1.25rem .8rem; border-bottom: 1px solid var(--line); }
.rnav-main { display: flex; align-items: center; gap: .75rem; }
.rarrow { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--btn-line); border-radius: var(--radius); color: var(--text); }
.rarrow:hover { text-decoration: none; border-color: var(--text); }
.rarrow[aria-disabled] { opacity: .3; pointer-events: none; }
.rinfos { flex: 1; min-width: 0; text-align: center; }
.rinfo strong { display: block; font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: .03em; }
.rtitle { font-family: var(--display); font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.rmeta { color: var(--muted); font-size: .85rem; }
/* pod naslovom kola datum kot podnaslov, pod njim tekme (kdor nalaga ali montira: cele tekme X/Y; montažer še naj
   akcije), vsak števec v barvi svojega stanja (vse zeleno, manjka rumeno, kolo še ni odigrano sivo), desno od tega
   gumb za izvoz (na ozkem zaslonu pod) */
.rinfo .rdate { display: block; margin-top: .3rem; font-family: var(--display); font-size: 1.2rem; font-weight: 600; line-height: 1.1;
  letter-spacing: .05em; }
.rmetarow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .35rem .75rem; margin-top: .2rem; }
.rcount { white-space: nowrap; }
.rcount.st-done { color: var(--ok); font-weight: 600; }
.rcount.st-wait { color: var(--warn); font-weight: 600; }
.rpills { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: .75rem; }
.rpill { position: relative; flex: none; min-width: 2.1rem; height: 2.4rem; padding: 0 .35rem 4px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--text); font-family: var(--display); font-size: 1.15rem; font-weight: 600;
  font-variant-numeric: tabular-nums; }
.rpill::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: 3px; }
.rpill:hover { text-decoration: none; background: color-mix(in srgb, var(--text) 7%, transparent); }
.rpill.on { color: var(--inv-text); background: var(--inv); font-weight: 700; }
.rpill.st-future { color: var(--muted); font-weight: 500; }
.rpill.st-done::after, .rlegend .st-done::before { background: var(--ok); }
.rpill.st-wait::after, .rlegend .st-wait::before { background: var(--warn); }
.rlegend { display: flex; justify-content: center; flex-wrap: wrap; gap: .2rem 1.1rem; margin-top: .55rem; font-size: .75rem; color: var(--muted); }
.rlegend span::before { content: ""; display: inline-block; width: .9rem; height: 3px; margin-right: .4rem; vertical-align: middle; }
/* kolo, ki še ni odigrano: črtkana črta pod številko, enaka kot v legendi */
.rpill.st-future::after, .rlegend .st-future::before { height: 0; border-top: 2px dashed var(--muted); }
/* naslov kola le pri »Moje tekme« in iskanju (sicer je izbrano kolo zgoraj) */
.rhead { display: none; margin: 0; padding: .6rem 1.25rem; font-size: 1.15rem; border-top: 1px solid var(--line); background: var(--bg); }
.multi .rhead { display: block; }
.rhead .rmeta { font-family: Inter, sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: .35rem; }
.league-list.searching .rnav { display: none; }
.mrow { border-top: 1px solid var(--line); }
.multi .rhead + .mrow { border-top: 0; }
/* datoteke brez tekme: vrstica, ki se odpre in zapre */
details.nomatch { border-top: 1px solid var(--line); }
details.nomatch > summary { display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .7rem; padding: .7rem 1.25rem;
  list-style: none; cursor: pointer; background: var(--bg); }
details.nomatch > summary::-webkit-details-marker { display: none; }
details.nomatch > summary:hover { background: color-mix(in srgb, var(--text) 5%, var(--bg)); }
details.nomatch > summary > svg { margin-left: auto; color: var(--muted); transition: transform .15s; }
details.nomatch[open] > summary > svg { transform: rotate(180deg); }
/* tekma kot vrstica razporeda: levo kolo in čas, na sredini domači nad gosti z grboma (klik odpre in zapre datoteke),
   desno naj akcije in meni ⋯; tekma kluba uporabnika ima na levi modro črto */
.mrow.mine { box-shadow: inset 4px 0 0 var(--primary); }
.mhead { display: flex; align-items: center; gap: .5rem .75rem; padding: .35rem 1.25rem .35rem .75rem; }
.mtoggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 1rem; padding: .45rem .5rem; border: 0;
  border-radius: var(--radius); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mtoggle:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.mtoggle > svg { flex: none; margin-left: auto; color: var(--muted); transition: transform .15s; }
.mrow.closed .mtoggle > svg { transform: rotate(-90deg); }
.mdate { flex: none; width: 4.6rem; padding-right: .8rem; border-right: 1px solid var(--line); line-height: 1.2;
  font-variant-numeric: tabular-nums; }
.mround { display: block; margin-bottom: .1rem; font-family: var(--display); font-size: .95rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--primary); }
.mday { display: block; font-family: var(--display); font-size: .9rem; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.mdd { display: block; font-weight: 600; }
.mtime { display: block; font-size: .8rem; color: var(--muted); }
.mname { flex: 1; min-width: 0; }
.mteam { display: flex; align-items: center; gap: .55rem; font-family: var(--display); font-size: 1.25rem; font-weight: 600;
  line-height: 1.2; text-transform: uppercase; letter-spacing: .02em; word-break: break-word; }
.mteam + .mteam { margin-top: .25rem; }
.mteam.me { font-weight: 700; }
.msum { display: none; margin-top: .3rem; color: var(--muted); font-size: .85rem; }
.mrow.closed .msum { display: block; }
.mrow.closed .mfiles { display: none; }
.mhl, .mmenu { flex: none; }
/* »Razširi vse / Skrči vse« ob iskanju, enako visok kot iskanje */
.files-card .listhead .mall { flex: none; align-self: stretch; white-space: nowrap; }
/* datoteke tekme pod imeni klubov (oznaka cele tekme se začne točno pod grbi), pod njo zamaknjeni utrinki s črto,
   ki kaže, da spadajo k tekmi */
.mfiles { padding-bottom: .4rem; }
.mfiles table.files td:first-child { padding-left: 6.85rem; }
.mfiles table.files tr.clip td:first-child { padding-left: 8.35rem;
  background: linear-gradient(var(--line), var(--line)) no-repeat 7.45rem 0 / 2px 100%; }
.mfiles tr.none td { padding-top: .35rem; padding-bottom: .35rem; color: var(--muted); font-size: .85rem; font-weight: 400; }
tbody tr.none:hover { background: none; }
/* vrsta datoteke pri tekmi: cela tekma poudarjeno, utrinek umirjeno; enaka širina, da so imena poravnana */
.kchip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 5.8rem; height: 1.5rem;
  border-radius: 2px; font-family: var(--display); font-size: .85rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; white-space: nowrap; }
.kchip.full { color: color-mix(in srgb, var(--primary) 85%, var(--text));
  background: color-mix(in srgb, var(--primary) var(--tint-mix), var(--tint-base)); }
.kchip.clip { color: var(--muted); border: 1px solid var(--line); }
.mfiles .fmeta { padding-left: 6.3rem; }
/* naj akcije: oddano (zeleno besedilo), oddaj (gumb), montažer koliko ekip je oddalo, zaklenjeno; klik odpre tabelo */
.hlst { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: var(--radius);
  font-family: var(--display); font-size: 1.02rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap; border: 1px solid transparent; }
a.hlst:hover { text-decoration: none; border-color: currentColor; }
.hlst.ok { color: var(--ok); }
a.hlst.ok:hover { border-color: transparent; text-decoration: underline; }
.hlst.wait { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.hlst.todo { color: #fff; background: var(--primary); }
a.hlst.todo:hover { background: var(--primary-h); border-color: transparent; }
.hlst.off { color: var(--muted); border-color: var(--line); }
.hlst-lbl { font-weight: 600; }
.hlst-n { display: inline-flex; align-items: center; gap: .3rem; }
details.nomatch > table.files { margin-bottom: .3rem; }
.nomatch-hint { margin: 0; padding: .55rem 1.25rem 0; }
/* manjkajoča datoteka: gumb za nalaganje namesto »še ni« */
.addfile { margin: .1rem 0; }
/* »Moje tekme«: kolo je v stolpcu z datumom, zato brez naslovov kol */
.mine-list .rhead { display: none; }
.mine-list .rhead + .mrow { border-top: 1px solid var(--line); }
/* izvoz naj akcij kola (montažer) desno od podatkov kola */
.rexport { flex: none; }
/* stran naj akcij: datoteke tekme za montažerja */
.hl-files .upload { margin: 0 0 .75rem; }
.hl-files .mfiles table.files td:first-child { padding-left: 0; }
.hl-files .mfiles table.files td:last-child { padding-right: 0; }
.hl-files .mfiles table.files tr.clip td:first-child { padding-left: 1.5rem; background-position: .6rem 0; }
/* uvoz razporeda: polje za prilepljeno besedilo iz Excela (tabulatorji ostanejo poravnani) */
textarea { display: block; width: 100%; margin-top: .3rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text); font: .9rem/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; tab-size: 12;
  resize: vertical; }
textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.import-rows .imp-msg { color: var(--danger); }
.import-rows .imp-line { margin-top: .2rem; font-family: ui-monospace, Consolas, monospace; word-break: break-all; }
.files-card .addform { margin: 1rem 1.25rem; }
.menu-form { padding: .35rem .45rem .15rem; border-bottom: 1px solid var(--line); margin-bottom: .25rem; }
.menu-form label { margin: 0 .2rem .35rem; font-size: .8rem; color: var(--muted); }
.menu-form select { margin-top: .2rem; padding: .35rem .5rem; font-size: .85rem; min-width: 240px; }
.itemrow { margin: 0; padding: .6rem 0; border-top: 1px solid var(--line); }
.itemrow label { flex: 1 1 160px; }
.itemrow label.check { flex: none; margin: 0 0 .55rem; }
.itemrow .muted { margin-bottom: .6rem; }

/* tabela naj akcij: obrazec ekipe in pregled za montažo */
.alert.lock { color: var(--warn); border-color: var(--warn); }
table.hl-form th[scope="row"] { font-size: 1.1rem; color: var(--text);
  white-space: nowrap; border-bottom-width: 1px; }
/* »Akcija N« v isti višini kot semafor, rezultat in igralec (ne na sredini med njimi in opisom) */
table.hl-form th[rowspan] { vertical-align: top; padding-top: 1.2rem; }
table.hl-form th[scope="row"] .muted { display: block; font-family: Inter, sans-serif; font-size: .78rem; font-weight: 400;
  text-transform: none; letter-spacing: 0; }
table.hl-form td { padding: .35rem .4rem; }
table.hl-form thead th { padding-left: .4rem; padding-right: .4rem; }   /* naslovi stolpcev točno nad polji */
table.hl-form input { margin: 0; padding: .45rem .6rem; }
/* semafor, rezultat (domači – gostje) in igralec: ozka polja s števkami na sredini */
table.hl-form input.clock { width: 5.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.hl-form .score { display: inline-flex; align-items: center; gap: .35rem; }
table.hl-form .score input { width: 3.2rem; text-align: center; font-variant-numeric: tabular-nums; }
table.hl-form input.player { width: 3.6rem; text-align: center; }
.hl-teams { display: block; font-size: .7rem; font-weight: 500; text-transform: none; letter-spacing: 0; }
.hl-teams-short { display: none; }                         /* na telefonu namesto imen klubov */
/* kratka navodila nad obrazcem, ostalo v »Več o vpisu« */
.hl-howto { margin: 0 0 1rem; font-size: .9rem; }
.hl-howto > p { margin: 0 0 .2rem; }
.hl-help > summary { width: fit-content; margin-top: .5rem; list-style: none; }
.hl-help > summary::-webkit-details-marker { display: none; }
.hl-help > summary svg { transition: transform .15s; }
.hl-help[open] > summary svg { transform: rotate(180deg); }
.hl-help > p { margin: .4rem 0 0; }
table.hl-form tr.bad input, table.hl-form input.bad { border-color: var(--danger); }
/* opis akcije: v vrstici pod semaforjem, rezultatom in igralcem, črta šele pod opisom */
table.hl-form tr.hl-main td { border-bottom: 0; padding-bottom: .15rem; }
table.hl-form tr.note-row td { padding-top: .15rem; padding-bottom: .6rem; }
/* opis: dve vrstici običajne pisave (splošni textarea je za uvoz razporeda z enakomerno pisavo), raztegne se navzdol */
table.hl-form textarea.note { margin: 0; padding: .45rem .6rem; font: .9rem/1.4 "Inter", system-ui, sans-serif; resize: vertical;
  min-height: 2.6rem; background: var(--card); border-radius: var(--radius); }
table.hl-form textarea.note:focus { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent); }
/* pregled za montažo: opis v svoji vrstici pod akcijo (poravnan s semaforjem), dolge besede se prelomijo */
.hl-merged tr.has-note td { border-bottom: 0; padding-bottom: .15rem; }
.hl-merged tr.hl-note-row td { padding-top: 0; padding-left: 2.2rem; font-size: .9rem; white-space: normal; overflow-wrap: anywhere; }
.hl-note-lbl { margin-right: .5rem; font-family: var(--display); font-size: .85rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.hl-err { margin: .3rem 0 0; color: var(--danger); font-size: .85rem; font-weight: 500; }   /* napaka pod vrstico */
table.hl-form + .hl-save { margin-top: 1rem; }
/* pregled za montažo: kljukica pri akciji, ki je že zmontirana (vrstica umirjena); oznaka kot blok, da je čas v isti
   višini kot besedilo ostalih stolpcev */
.hl-donehead { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; margin: 0 0 .75rem; }
label.hl-check { display: flex; width: fit-content; align-items: center; gap: .55rem; margin: 0; font-size: inherit; cursor: pointer; }
label.hl-check input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--ok); cursor: pointer; }
.hl-merged tr.done td, .hl-merged tr.done td.title { color: var(--muted); }
.card .chips { margin: 0 0 1rem; }
.tag.long { white-space: normal; border-radius: 8px; }   /* daljše stanje (kdo, kdaj) se na telefonu prelomi */

/* logotipi organizacij */
.organization-link { display: inline-flex; align-items: center; gap: .5rem; }
/* znak organizacije v tabeli: enako širok okvir pri vseh (logotip ali ploščica s črko), da so imena poravnana */
.tablelogo { flex: none; display: inline-flex; justify-content: center; width: 3rem; }
.tablelogo img.orgmark { max-width: 100%; }
.logo-preview { display: flex; align-items: center; justify-content: center; padding: 1rem; margin-bottom: 1rem;
  border: 1px dashed var(--line); border-radius: 8px; background: var(--bg); }
.logo-preview img { max-height: 90px; max-width: 100%; object-fit: contain; }
.logo-remove { margin-top: .75rem; }
/* klubi pri organizaciji: grb, ime, aktiven, Shrani, grb naloži ali odstrani – vse v eni vrstici */
.clubrow { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.clubrow form { margin: 0; }
.clubrow-main { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; flex: 1 1 260px; min-width: 0; }
.clubrow-main input[name=name] { flex: 1 1 160px; width: auto; margin: 0; }
.clubrow-main label.check { margin: 0; }
/* gumba za grb v enako širokem okviru pri vseh klubih, da so imena, »aktiven« in »Shrani« v istih stolpcih */
.clubrow-logo { flex: 0 0 14rem; display: flex; gap: .75rem; }
.filebtn { position: relative; margin: 0; }
.filebtn:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
/* stran naj akcij: naslov z grboma obeh klubov */
h1.vs { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .75rem; margin-top: .2rem; }
.vs-team { display: inline-flex; align-items: center; gap: .55rem; }
.vs-x { color: var(--muted); }

/* kontrolna vsota (SHA-256) */
.hash-help { margin-top: 1rem; }
.hash-help code { word-break: break-all; }

/* stran organizacije: gumb za nalaganje v glavi, okvir za spuščanje datotek čez celo stran */
.btn-ico { display: inline-flex; align-items: center; gap: .4rem; }
.upload-note { margin: 0 0 .5rem; }
.dropzone { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; text-align: center;
  pointer-events: none; color: var(--primary); font-size: 1.15rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent); border: 3px dashed var(--primary); }

/* seznam datotek: glava, iskanje in vrstice do robov kartice; ime s podatki v eni celici, dejanja desno */
.card.files-card { overflow: visible; padding: 0 0 .5rem; }   /* meni ⋯ sme segati čez rob (močnejše od .card spodaj) */
.files-card .upload { padding: .9rem 1.25rem .3rem; border-bottom: 1px solid var(--line); }
.files-card .listhead { margin: 0; padding: .9rem 1.25rem; gap: .6rem; border-bottom: 1px solid var(--line); }
.files-card .listhead input { flex: 1 1 200px; width: auto; min-width: 0; max-width: none; margin: 0; }
/* iskanje: samo črta spodaj */
.files-card .listhead input[type=search] { border-width: 0 0 1px; border-color: var(--text); border-radius: 0; background: transparent;
  padding-left: .2rem; }
.files-card .listhead input[type=search]:focus { box-shadow: 0 2px 0 var(--primary); border-color: var(--primary); }
.files-card .listhead input, .files-card .listhead select { height: 2.5rem; }   /* iskanje, Koš in razvrščanje enako visoki */
.files-card .listtools .btn { display: inline-flex; align-items: center; align-self: stretch; }
.files-card .listhead .listtools { align-self: stretch; }       /* Dodaj tekmo, Uvozi razpored, Koš enako visoki kot iskanje */
.files-card > p { margin: 0; padding: 1rem 1.25rem; }
.files-card > p.hash-help { margin-top: .5rem; border-top: 1px solid var(--line); }
table.files td { border-bottom: 0; padding: .6rem .5rem; }
table.files td:first-child { padding-left: 1.25rem; }
table.files td:last-child { padding-right: 1.25rem; }
.fname { display: flex; align-items: center; gap: .15rem .5rem; flex-wrap: wrap; font-weight: 600; }
.fmeta { margin-top: .1rem; padding-left: 3.3rem; font-weight: 400; font-size: .85rem; color: var(--muted); }
.tag.new { color: #fff; border-color: transparent; background: var(--primary); font-size: .78rem; font-weight: 700; }
.listtools select { width: auto; margin: 0; }
details.menu { position: relative; display: inline-block; vertical-align: middle; }
details.menu > summary { list-style: none; }
/* Prenesi in ⋯ enako visoka in poravnana na sredino */
td.actions > .dl, td.actions > details.menu { vertical-align: middle; }
td.actions > .dl, details.menu > summary.btn { height: 2.25rem; }
td.actions > .dl { padding: 0 .9rem; font-size: .9rem; }
details.menu > summary.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; padding: 0 .5rem; }
details.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 200px; padding: .3rem;
  text-align: left; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 28px rgb(0 0 0 / .18); }
.menu-list form { margin: 0; }
.menu-item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: 2px;
  background: none; color: var(--text); font: inherit; font-size: .9rem; text-align: left; white-space: nowrap; cursor: pointer; }
.menu-item:hover { background: color-mix(in srgb, var(--primary) 9%, transparent); }
.menu-item.danger { color: var(--danger); }
span.menu-item { cursor: default; white-space: normal; }
span.menu-item:hover { background: none; }

/* potrditveno okno */
dialog.dialog { width: min(420px, calc(100vw - 2rem)); padding: 1.3rem 1.4rem 1.1rem; color: var(--text);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 40px rgb(0 0 0 / .3); }
dialog.dialog::backdrop { background: rgb(0 0 0 / .45); }
.dlg-title { font-size: 1.1rem; margin: 0 0 .5rem; }
.dlg-text { margin: 0 0 1.25rem; color: var(--muted); word-break: break-word; }
.dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; }

/* administracija: nadzorna plošča, zasedenost, obrazci za dodajanje */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
/* števci kot na semaforju: črta zgoraj, velika ozka številka */
.stat { display: block; padding: .8rem 1.1rem .9rem; color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-top: 3px solid var(--text); border-radius: 0; }
a.stat:hover { text-decoration: none; border-top-color: var(--primary); }
.stat.warn { border-top-color: var(--warn); }
.stat-label { font-family: var(--display); font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); }
.stat-value { font-family: var(--display); font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin-top: .1rem; }
.stat.warn .stat-value { color: var(--warn); }
.stat-sub { font-size: .85rem; color: var(--muted); margin-top: .25rem; }
progress.meter { height: 8px; }
progress.lvl-ok::-webkit-progress-value { background: var(--ok); }
progress.lvl-ok::-moz-progress-bar { background: var(--ok); }
progress.lvl-warn::-webkit-progress-value { background: var(--warn); }
progress.lvl-warn::-moz-progress-bar { background: var(--warn); }
progress.lvl-full::-webkit-progress-value { background: var(--danger); }
progress.lvl-full::-moz-progress-bar { background: var(--danger); }
td.usage progress { width: 150px; margin: 0 0 .2rem auto; }
.cardhead { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.cardhead h2 { margin: 0; }
.addform { margin: 0 0 1.25rem; padding: 1rem 1rem .1rem; border: 1px solid var(--line); border-left: 4px solid var(--primary);
  border-radius: 0; background: var(--bg); }
.addform.rowform { padding-bottom: 1rem; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 1rem; align-items: start; }
.hint { display: block; margin-top: .3rem; font-size: .8rem; color: var(--muted); }
.checks.inline { display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; align-items: center; margin-top: 0; }
.checks.inline label.check { margin: 0; }
.form-actions { display: flex; justify-content: flex-end; margin-bottom: .9rem; }
/* dodajanje tekem: zavihka »Ena tekma« / »Celo kolo« (kot zavihki lig, manjša) */
.add-tabs { display: flex; gap: 1.4rem; margin: -.3rem 0 1rem; border-bottom: 1px solid var(--line); }
.add-tabs button { padding: .35rem 0 .45rem; border: 0; border-bottom: 3px solid transparent; background: none; cursor: pointer;
  font: 600 1.05rem var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.add-tabs button:hover { color: var(--text); }
.add-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--primary); }
/* celo kolo: liga, kolo in datum kola, nato vrstice št. | domači | gostje | dan | ura */
.round-head { display: grid; grid-template-columns: minmax(12rem, 16rem) 6rem 14rem; gap: 0 1rem; align-items: end; }
.rr { display: grid; grid-template-columns: 1.4rem 1fr 1fr 10.5rem 7rem; gap: .45rem .75rem; align-items: center; margin-bottom: .45rem; }
.rr-head { margin-bottom: .2rem; font-family: var(--display); font-size: .85rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.rr-head .muted { font-family: Inter, sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; }
.rr-n { color: var(--muted); font-size: .85rem; text-align: right; }
.rr select, .rr input:not([type=checkbox]) { margin: 0; height: 2.5rem; min-width: 0; }
.rr-note { margin: .35rem 0 .7rem; }
.rr-actions { justify-content: space-between; align-items: center; }
/* prazna liga: dodajanje kol in uvoz razporeda na sredini */
.empty-league { padding: 2.5rem 1.25rem 2.8rem; text-align: center; }
.empty-league h3 { margin: 0 0 .35rem; font-size: 1.3rem; }
.empty-league p { margin: 0 0 1.1rem; }
.empty-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; }

/* Izbriši: manjši od Prenesi in odmaknjen od njega, da ga ni mogoče pritisniti po pomoti */
.btn.btn-del { padding: .15rem .45rem; font-size: .75rem; border-color: transparent; background: transparent; }
.btn.btn-del:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
td.actions > form.del { margin-left: 1rem; }
.btn.btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: .3rem; line-height: 0;
  vertical-align: middle; }

/* ozke strani (nastavitve, urejanje organizacije in uporabnika) na sredini */
.wrap.slim { max-width: calc(460px + 2rem); }
.wrap.mid { max-width: calc(760px + 2rem); }          /* urejanje organizacije: vrstice klubov z grbi */
.wrap.slim .login-card { max-width: none; }
.wrap.slim .login-card h1 { margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
  word-break: break-word; }
.wrap.slim .login-card h2 { margin-bottom: 1.25rem; }

/* ---------- različne velikosti zaslona ---------- */

/* varovalka: preširoka vsebina drsi znotraj kartice, nikoli cela stran */
.card { overflow-x: auto; }

/* široki monitorji: nekaj več prostora za dolga imena datotek */
@media (min-width: 1600px) {
  .wrap:not(.slim), .top-in { max-width: 1320px; }
}

/* administrator: ožje od 1000 px so v vrstici samo ikone, da ostane prostor za ime organizacije v izbiri */
@media (max-width: 1000px) {
  .top.has-cosw nav .navlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .top.has-cosw nav > a { padding: 0 .55rem; }
}
@media (max-width: 760px) {
  .has-cosw .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* tablice in telefoni: tabele (organizacije, uporabniki, dnevnik, koš) postanejo kartice z oznakami */
@media (max-width: 900px) {
  table.stack thead { display: none; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: .75rem 0; border-bottom: 1px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: .15rem 0; text-align: right; white-space: normal; }
  table.stack td::before { content: attr(data-label); float: left; margin-right: 1rem; color: var(--muted);
    font-size: .75rem; font-weight: 600; line-height: 1.9; text-transform: uppercase; letter-spacing: .03em; }
  table.stack td:empty { display: none; }
  table.stack td.title, table.stack td.actions, table.stack td[colspan] { text-align: left; }
  table.stack td.title { font-size: 1rem; font-weight: 600; }
  table.stack td.actions { margin-top: .45rem; }
  tbody tr:hover { background: none; }

  .hlst { padding: .45rem .75rem; }                          /* naj akcije: večje za prst */
  /* pregled za montažo: opis pod akcijo, poravnan levo, brez črte med akcijo in opisom */
  .hl-merged tr.has-note { border-bottom: 0; padding-bottom: 0; }
  .hl-merged tr.hl-note-row { padding-top: .25rem; }
  table.stack.hl-merged tr.hl-note-row td { text-align: left; padding-left: 0; }
}

/* telefoni */
@media (max-width: 700px) {
  .wrap { padding: 1rem .75rem 2.5rem; }
  .top-in { padding-left: .75rem; padding-right: .75rem; }
  .card { padding: 1rem; }
  h1 { font-size: 1.3rem; }

  /* seznam datotek: ime, pod njim podatki, spodaj velik gumb Prenesi in meni ⋯ */
  table.files, table.files tbody, table.files tr, table.files td { display: block; }
  table.files tr { padding: .7rem 1rem; }
  table.files td, table.files td:first-child, table.files td:last-child { padding: 0; text-align: left; }
  table.files td.actions { display: flex; gap: .5rem; margin-top: .6rem; }
  table.files td.actions > * + * { margin-left: 0; }
  table.files td.actions .dl { flex: 1; justify-content: center; padding: .55rem; }
  table.files td.actions > .dl, table.files td.actions details.menu > summary.btn { height: 2.6rem; }   /* večja za prst */
  table.files td.actions details.menu > summary { display: flex; align-items: center; padding: 0 .75rem; }
  .fmeta { padding-left: 0; }
  table.files tr.grp { padding: 0; }
  table.files tr.grp td { padding: .9rem 1rem .1rem; }
  table.files tr.grp.first td { padding-top: .7rem; }
  .organization-head, .ltabs, .files-card .listhead, .files-card .upload, .files-card > p { padding-left: 1rem; padding-right: 1rem; }
  .ch-main { flex: 1 1 0; }                                      /* ime ostane ob grbu */
  /* stran tekem: čim manj prostora pred prvo tekmo (manjša glava, »Vse/Moje« čez celo širino, brez legende kol) */
  .organization-head { padding-top: .85rem; padding-bottom: .8rem; }
  .oh-row { align-items: center; gap: .6rem .75rem; }
  .ch-main h1 { font-size: 1.5rem; }
  .oh-meta { font-size: .8rem; }
  .oh-side { flex: 1 1 100%; }
  .oh-side .btn { flex: 1; display: inline-flex; justify-content: center; }
  .oh-fedname { font-size: 1.05rem; }
  .oh-fed .orgmark, .oh-fed .grb { --s: 26px; }
  .oh-fed > img.orgmark { --s: 34px; }
  .oh-row > .grb, .oh-row > .orgmark, .oh-club > .grb { --s: 40px; }
  .oh-row > img.orgmark { --s: 52px; }
  .has-club .oh-clubrow { padding-left: 1.9rem; margin-top: .55rem; }
  .oh-club { gap: .75rem; }
  .oh-club::before { left: -1.2rem; }
  /* na telefonu v glavi le »novo« (podatki o datotekah niso pomembni), opomnik v eni vrstici */
  .oh-meta > span:not(.oh-new) { display: none; }
  .oh-meta > .oh-new::before { content: none; }
  .oh-todo { display: flex; align-items: baseline; gap: .45rem; width: 100%; }
  .oh-todo strong { display: inline; font-size: 1.3rem; }
  .oh-todo span { display: inline; max-width: none; }
  .ltabs { gap: 0 1.1rem; }
  .ltabs > a, .ltabs-arch > summary { font-size: 1.05rem; padding: .55rem 0 .4rem; }
  .files-card .listhead { padding-top: .7rem; padding-bottom: .7rem; gap: .5rem; }
  .files-card .listhead input[type=search] { flex: 1 1 0; }       /* ob njem gumb »Razširi / Skrči vse« */
  .files-card .listhead .listtools { flex: 1 1 100%; }
  .vm { flex: 1 1 100%; }
  .vm a { flex: 1; justify-content: center; padding: 0 .5rem; }
  .rarrow { width: 2.4rem; height: 2.4rem; }
  .rinfo strong { font-size: 1.6rem; }
  .rinfo .rdate { font-size: 1.05rem; }
  .rinfo .rmeta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .6rem; }   /* deli brez pik */
  .rinfo .rsep { display: none; }
  .rlegend { display: none; }
  /* montažer: »Naj akcije« nad številom, da je oznaka ožja in ime tekme ostane široko */
  .hlst:has(.hlst-lbl) { flex-direction: column; gap: 0; padding: .25rem .55rem; line-height: 1.1; }
  .hlst-lbl { font-size: .78rem; }
  .nomatch-hint { padding-left: 1rem; padding-right: 1rem; }
  .rhead, details.nomatch > summary { padding-left: 1rem; padding-right: 1rem; }
  /* tekma: ožji stolpec z datumom, manjša imena klubov */
  .mhead { padding: .35rem 1rem .35rem .65rem; gap: .4rem .5rem; }   /* datum in desni rob v črti z ostalo vsebino */
  .mtoggle { gap: .6rem; padding: .4rem .35rem; }
  .mdate { width: 3.5rem; padding-right: .5rem; font-size: .9rem; }
  .mteam { font-size: 1.02rem; gap: .45rem; }
  .mtoggle > svg { display: none; }                          /* tekmo odpre in zapre dotik, puščica bi vzela prostor imenu */
  .hlst { font-size: .92rem; padding: .35rem .5rem; }
  /* datoteke tekme: brez zamika, utrinki malo zamaknjeni s črto */
  .mfiles table.files tr { padding: .6rem 1rem; }
  .mfiles table.files tr.clip { padding-left: 2.2rem; background: linear-gradient(var(--line), var(--line)) no-repeat 1.35rem 0 / 2px 100%; }
  .mfiles table.files td:first-child, .mfiles table.files tr.clip td:first-child { padding-left: 0; background: none; }
  .mfiles .fmeta { padding-left: 0; }
  /* datoteke tekme so krajše: oznaka in ime v isti vrstici, desno majhen gumb za prenos (beseda le za bralnike zaslona) */
  .mfiles table.files tr { display: flex; align-items: flex-start; gap: .6rem; }
  .mfiles table.files td.name { flex: 1; min-width: 0; }
  .mfiles table.files td.actions { flex: none; margin-top: 0; }
  .mfiles table.files td.actions .dl { flex: none; width: 2.6rem; padding: 0; }
  .mfiles .dl-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mfiles .fname { display: block; }
  .mfiles .kchip { width: auto; height: 1.35rem; padding: 0 .45rem; margin-right: .4rem; vertical-align: .1rem; }
  .hl-files .mfiles table.files tr { padding-left: 0; padding-right: 0; }
  .hl-files .mfiles table.files tr.clip { padding-left: 1.2rem; background-position: .45rem 0; }
  .hl-files .mfiles table.files tr.clip td:first-child { padding-left: 0; background: none; }
  /* kola: številke v eni vrstici, ki se podrsa (izbrano kolo app.js pomakne na sredino) */
  .rnav { padding: .5rem 1rem .45rem; }
  .rpills { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: .5rem -1rem 0;
    padding: 4px 1rem 2px; scrollbar-width: none; }
  .rpills::-webkit-scrollbar { display: none; }
  .files-card .addform { margin: 1rem; }
  /* celo kolo na telefonu: liga in kolo, pod njima datum kola; vrstica tekme v dveh vrsticah (klubi, nato dan in ura) */
  .round-head { grid-template-columns: 1fr 5.5rem; }
  .round-head label:last-child { grid-column: 1 / -1; }
  .rr-head { display: none; }
  .rr { grid-template-columns: 1.2rem 1fr 1fr; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
  .rr > input[name=dan] { grid-column: 2; }
  .rr select, .rr input:not([type=checkbox]) { padding-left: .45rem; padding-right: .35rem; font-size: .92rem; }   /* datum cel */
  /* tabela naj akcij: oznaka vrstice se prelomi, polja so ožja */
  table.hl-form th[scope="row"] { white-space: normal; width: 5.2rem; padding-left: 0; }
  table.hl-form thead th { font-size: .68rem; padding-left: .15rem; padding-right: .15rem; }
  table.hl-form th[rowspan] { padding-top: 1.1rem; }
  table.hl-form td { padding: .3rem .15rem; }
  table.hl-form input { padding: .45rem .4rem; }
  table.hl-form input.clock { width: 4.5rem; }
  table.hl-form .score input { width: 2.6rem; }
  .hl-form .score { gap: .2rem; }
  table.hl-form input.player { width: 2.9rem; }
  .hl-teams-long { display: none; }
  .hl-teams-short { display: inline; }

  .listtools select { flex: 0 0 auto; }

  /* filtri dnevnika v dveh stolpcih */
  .logfilters { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .75rem; align-items: end; }
  .rowform.logfilters label { max-width: none; }
  .logfilters label:nth-of-type(3) { grid-column: 1 / -1; }
  table.stack td.title { color: var(--text); }

}

/* ozki telefoni: v glavi samo ikone, da je glava ena vrstica */
@media (max-width: 600px) {
  .top-in { padding: .5rem .75rem; gap: .5rem; }
  .top nav { gap: .1rem; }
  .top nav > a { padding: 0 .5rem; }
  .navlabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .navicon { width: 20px; height: 20px; }
  .co-name { max-width: 34vw; }
  /* uporabnik organizacije: v vrstici le znak aplikacije, znak in ime organizacije ter meni */
  .top-left:has(.top-org) .brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .top-left:has(.top-org) .crumb-sep { margin: 0 .15rem; }
  /* seznam organizacij čez celo širino pod vrstico (vrstica je sticky, zato je izhodišče za postavitev) */
  details.menu.cosw { position: static; }
  .cosw .menu-list { left: .75rem; right: .75rem; top: calc(100% - 4px); min-width: 0; max-width: none; }
  .usermenu > summary { margin-left: .15rem; }
}

/* ---------- drobne animacije (ne predvajajo se, če ima uporabnik v sistemu vklopljeno »manj gibanja«) ---------- */
.qstat.okc::before { content: "✓ "; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  tbody tr { transition: background-color .15s; }
  .files-card .upload, .card.files-card, .stats .stat { animation: rise .3s ease-out both; }
  .stats .stat:nth-child(2) { animation-delay: .04s; } .stats .stat:nth-child(3) { animation-delay: .08s; }
  .stats .stat:nth-child(4) { animation-delay: .12s; }
  dialog.dialog[open] { animation: pop .16s ease-out; }
  dialog.dialog[open]::backdrop { animation: fade .16s ease-out; }
  .menu-list { animation: drop .12s ease-out; }
  .qstat.okc::before { animation: pop .35s ease-out; }
  .tag.new { animation: glow 1.6s ease-in-out 2; }
  .mrow.flash, tr.flash { animation: flash 2.2s ease-out; }   /* tekma, na katero je stran skočila, ali naložena datoteka */
  /* med nalaganjem se po vrstici napredka premikajo črte */
  .queue li:not(.done):not(.err):not(.cancelled):not(.stopped) progress::-webkit-progress-value,
  .qtotal:not(.done) progress::-webkit-progress-value {
    background-image: linear-gradient(-45deg, rgb(255 255 255 / .2) 25%, transparent 25%, transparent 50%,
      rgb(255 255 255 / .2) 50%, rgb(255 255 255 / .2) 75%, transparent 75%);
    background-size: 18px 18px; animation: stripes .9s linear infinite; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(1px); }
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
@keyframes fade { from { opacity: 0; } }
@keyframes drop { from { opacity: 0; transform: translateY(-4px); } }
@keyframes stripes { to { background-position: 18px 0; } }
@keyframes flash { from { background: color-mix(in srgb, var(--primary) 22%, transparent); } }
@keyframes glow { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); } }