@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #eef0f7;
  --surface: #eef0f7;
  --surface-2: #e5e8f2;
  --border: #dcdff0;
  --text: #18181b;
  --text-sec: #6b7280;
  --accent: #e040fb;
  --accent-dark: #b800d8;
  --danger: #dc2626;
  --success: #16a34a;
  --radius: 20px;
  --radius-sm: 14px;
  --font: 'Quicksand', 'Inter', system-ui, -apple-system, sans-serif;
  --font-logo: 'Pacifico', cursive; /* NAMENOMA nedotaknjeno — logotip "face" + izpis države zgoraj levo */
  --shadow-light: rgba(255,255,255,.85);
  --shadow-dark: rgba(163,169,201,.45);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
/* Počasnejši prehod pri kliku na kartico profila (glej view-transition-name:profil-foto-{id} na
   index.php/panel.js/oseba.php) — privzeta hitrost brskalnika (~250ms) je bila premalo opazna. */
::view-transition-group(*) { animation-duration: .6s; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .45s; }
body {
  margin: 0; font-family: var(--font); color: var(--text); line-height: 1.6;
  background:
    linear-gradient(rgba(238,240,247,.87), rgba(238,240,247,.93)),
    url('/img/ozadje.jpg') center top / cover no-repeat fixed;
  min-height: 100vh;
}
a { color: var(--accent); text-decoration: none; }
h1, h2, h3 { margin: 0 0 .5rem; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.25rem; }
.container-sm { max-width: 560px; margin: 0 auto; padding: 0 1.25rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.4rem; border-radius: 999px; border: none;
  font-family: var(--font); font-size: .9rem; font-weight: 600; cursor: pointer;
  background: var(--bg); color: var(--text);
  box-shadow: 5px 5px 12px var(--shadow-dark), -5px -5px 12px var(--shadow-light);
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light); }
.btn-primary { background: linear-gradient(135deg, #f472e0, var(--accent)); color: #fff; box-shadow: 5px 5px 16px rgba(224,64,251,.4), -3px -3px 10px rgba(255,255,255,.5); }
.btn-primary:hover { box-shadow: 7px 7px 20px rgba(224,64,251,.5), -3px -3px 10px rgba(255,255,255,.5); }
.btn-secondary { background: var(--bg); }
.btn-zari-belo { animation: zariBelo 2s ease-in-out infinite; }
@keyframes zariBelo {
  0%, 100% { box-shadow: 5px 5px 12px var(--shadow-dark), -5px -5px 12px var(--shadow-light), 0 0 6px rgba(255,255,255,.4); }
  50%      { box-shadow: 5px 5px 12px var(--shadow-dark), -5px -5px 12px var(--shadow-light), 0 0 18px 4px rgba(255,255,255,.95); }
}
.btn-danger { background: var(--bg); color: var(--danger); }
.btn-uspeh { background: #22c55e !important; color: #fff !important; box-shadow: 5px 5px 16px rgba(34,197,94,.4), -3px -3px 10px rgba(255,255,255,.5) !important; }
.btn-sm { padding: .45rem 1rem; font-size: .8rem; }
.btn-full { width: 100%; }

/* Trajno "vgreznjen + sveti" izgled za gumbe s stanjem vklop/izklop (npr. "Jeziki", ko je panel odprt) */
.btn.aktiven {
  color: var(--accent);
  box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light), 0 0 12px rgba(224,64,251,.55);
}

.card { background: var(--bg); border: none; border-radius: var(--radius); padding: 1.25rem; box-shadow: 8px 8px 20px var(--shadow-dark), -8px -8px 20px var(--shadow-light); }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 1rem; }

.form-group { margin-bottom: 1rem; flex: 1; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
/* Spol / Želim spoznati / Datum rojstva (2026-10-21): na telefonu je datum stisnil izbirnika ("Mo", "Žen") —
   z minimalnimi širinami gresta izbirnika v eno vrsto, datum v svojo; na širokem zaslonu vsi trije v eni. */
.form-row-spol .form-group { flex: 1 1 7.5rem; }
.form-row-spol .form-group:last-child { flex: 1 1 10rem; }
.form-group label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .3rem; color: var(--text); }
input, select, textarea {
  width: 100%; padding: .65rem .8rem; border: none; border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font-family: var(--font); font-size: .92rem;
  box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);
}
input[type=checkbox], input[type=radio] { width: auto; box-shadow: none; }
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light), 0 0 0 2px var(--accent);
}
textarea { resize: vertical; min-height: 80px; }

.alert { padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 1rem; }
.alert-error { background: #fee2e2; color: #991b1b; }
.alert-success { background: #dcfce7; color: #166534; }

.hidden { display: none !important; }

/* Auth */
.auth-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; }
.auth-card { width: 100%; max-width: 380px; background: var(--bg); border: none; border-radius: var(--radius); padding: 2rem; box-shadow: 10px 10px 24px var(--shadow-dark), -10px -10px 24px var(--shadow-light); }
.auth-logo { text-align: center; font-size: 2.3rem; font-family: var(--font-logo); font-weight: 400; margin-bottom: 1.5rem; }
.auth-logo span { color: var(--accent); }
/* Preklopnik Prijava/Registracija — obkljukljiv par (radio), ne gumba. Prej sta bila oba
   zavihka polno-barvna "pilulasta" gumba, kar je zavajalo uporabnike v misel, da zgornji
   "Prijava" zavihek TUDI prijavi (v resnici samo preklopi obrazec, pravi gumb za prijavo je
   spodaj v obrazcu) — popravljeno 2026-08-30. */
.tab-switch { display: flex; gap: 1.75rem; margin-bottom: 1.25rem; }
.tab-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.tab-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tab-check-box {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border);
  flex-shrink: 0; position: relative; transition: border-color .15s, background .15s;
}
.tab-check input:checked + .tab-check-box { border-color: var(--accent); background: var(--accent); }
.tab-check input:checked + .tab-check-box::after {
  content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.tab-check-label { font-family: var(--font); font-weight: 600; font-size: .85rem; color: var(--text-sec); transition: color .15s; }
.tab-check input:checked ~ .tab-check-label { color: var(--text); font-weight: 700; }
.auth-back { display: block; text-align: center; margin-top: 1.25rem; font-size: .82rem; color: var(--text-sec); }

/* Nav — lepljena (sticky) na vrhu, vodoravno drsljiva, ko vsebina ne gre v širino zaslona */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.5rem; background: var(--bg); box-shadow: 0 6px 18px var(--shadow-dark);
  position: sticky; top: 0; z-index: 100;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.nav > * { flex-shrink: 0; }
/* Fiksirana noga — samo neprijavljeni na index.php (2026-09-28); ožja od glave, gumbi na sredini.
   body.ima-nogo doda spodnji odmik, da noga ne prekrije zadnje vsebine (klasičnega <footer>). */
.noga-fiksna {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; gap: .65rem;
  padding: .5rem 1rem calc(.5rem + env(safe-area-inset-bottom));
  background: var(--bg); box-shadow: 0 -6px 18px var(--shadow-dark);
}
body.ima-nogo { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
.nav-logo { font-size: 1.9rem; font-family: var(--font-logo); font-weight: 400; color: var(--text); }
/* v2: "blindmagik." je ~2× daljši od "face." — na ozkih telefonih manjši logotip in država, da Odjava ostane v vrstici */
@media (max-width: 480px) { .nav-logo { font-size: 1.45rem; } .nav-drzava { font-size: 1.05rem; } }
.nav-logo span { color: var(--accent); }
.nav-drzava { font-size: 1.4rem; font-family: var(--font-logo); font-weight: 400; color: var(--text-sec); }

.hero-face { font-family: var(--font-logo); font-weight: 400; color: var(--accent); font-size: 1.15em; margin-right: .15em; }

/* Slogan pod naslovom vstopne strani — vijoličen prelivni sijaj, isti princip in trademark
   odtenki kot na blindmagik.com/index.html (.hero-tagline) in klepet-oblak gradient v tem CSS-u. */
.hero-tagline {
  background: linear-gradient(90deg, var(--accent), #f472e0, var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: hero-tagline-shine 4s ease-in-out infinite;
}
@keyframes hero-tagline-shine {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}
/* Štempiljka pod sloganom — rahlo zavrtena, kot žig (isti princip kot na blindmagik.com). */
.freebie-stamp {
  display: inline-block;
  padding: .4rem 1.15rem; border: 2px solid var(--accent); border-radius: 999px;
  color: var(--accent); font-weight: 800; font-size: .82rem; letter-spacing: .03em;
  text-transform: uppercase; transform: rotate(-3deg);
}
.nav-links { display: flex; gap: .65rem; align-items: center; flex-shrink: 0; }

/* Panel tabs */
.panel-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; background: var(--bg); border-radius: var(--radius-sm); padding: .35rem; box-shadow: inset 2px 2px 6px var(--shadow-dark), inset -2px -2px 6px var(--shadow-light); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.panel-tab { padding: .7rem 1.1rem; border: none; background: none; border-radius: var(--radius-sm); font-family: var(--font); font-weight: 600; font-size: .9rem; cursor: pointer; color: var(--text-sec); flex-shrink: 0; white-space: nowrap; }
.panel-tab.active { color: #fff; background: linear-gradient(135deg, #f472e0, var(--accent)); }

/* Grid kartice profilov */
.profil-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 1.1rem; }
/* Tanka temnejša črta tik pod spodnjim robom (0 3px 0 0, brez zamegljenosti) nakaže rahlo
   debelino kartice — prej je bila povsem ploščata kot list papirja. */
.profil-kartica { background: var(--bg); border: none; border-radius: var(--radius); overflow: hidden; cursor: pointer; box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light), 0 6px 0 0 rgba(0,0,0,.24); transition: transform .15s, box-shadow .15s; }
.profil-kartica:hover { transform: translateY(-3px); }
/* Spolna žarnica — moški: modra, ženska: rdeče-roza (isti vzorec kot na blindmagik.com). */
.profil-kartica.glow-moski { box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light), 0 0 0 1px rgba(59,130,246,.25), 0 22px 34px -16px rgba(59,130,246,.65); }
.profil-kartica.glow-moski:hover { box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light), 0 0 0 1px rgba(59,130,246,.35), 0 26px 40px -14px rgba(59,130,246,.8); }
.profil-kartica.glow-zenska { box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light), 0 0 0 1px rgba(244,63,94,.25), 0 22px 34px -16px rgba(244,63,94,.65); }
.profil-kartica.glow-zenska:hover { box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light), 0 0 0 1px rgba(244,63,94,.35), 0 26px 40px -14px rgba(244,63,94,.8); }
/* Promo kartice (dodatne vsebine, oglasi — 2026-10-14): zelena žarnica, da se ločijo od profilov. */
.profil-kartica.glow-zelena, .promo-kartica.glow-zelena { box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light), 0 0 0 1px rgba(34,197,94,.25), 0 22px 34px -16px rgba(34,197,94,.65); }
.profil-kartica.glow-zelena:hover, .promo-kartica.glow-zelena:hover { box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light), 0 0 0 1px rgba(34,197,94,.35), 0 26px 40px -14px rgba(34,197,94,.8); }
/* Gumbi v zavihku "Izgled" (panel.php) — vijolična žarnica za "Poglej svoj profil" (ločen od
   akcij urejanja), zelena žarnica za akcijske gumbe "Shrani izgled"/"Ponastavi na privzeto"
   (isti vzorec kot .glow-moski/.glow-zenska zgoraj). */
.btn-glow-vijolicna { box-shadow: 5px 5px 16px var(--shadow-dark), -3px -3px 10px var(--shadow-light), 0 0 0 1px rgba(224,64,251,.35), 0 0 18px 2px rgba(224,64,251,.55); }
.btn-glow-vijolicna:hover { box-shadow: 5px 5px 16px var(--shadow-dark), -3px -3px 10px var(--shadow-light), 0 0 0 1px rgba(224,64,251,.5), 0 0 24px 4px rgba(224,64,251,.75); }
.btn-glow-zelena { box-shadow: 5px 5px 16px var(--shadow-dark), -3px -3px 10px var(--shadow-light), 0 0 0 1px rgba(34,197,94,.35), 0 0 18px 2px rgba(34,197,94,.55); }
.btn-glow-zelena:hover { box-shadow: 5px 5px 16px var(--shadow-dark), -3px -3px 10px var(--shadow-light), 0 0 0 1px rgba(34,197,94,.5), 0 0 24px 4px rgba(34,197,94,.75); }
.profil-kartica-foto { width: 100%; aspect-ratio: 3/4; object-fit: cover; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; transition: transform .25s; }
/* Ob hoverju se slika rahlo "približa" (zoom), medtem ko se kartica dvigne (glej .profil-kartica:hover
   zgoraj) — .profil-kartica ima overflow:hidden, zato povečana slika ostane znotraj iste velikosti kartice. */
.profil-kartica:hover .profil-kartica-foto { transform: scale(1.05); }
.profil-kartica-info { padding: .75rem .9rem; }
/* 2026-10-16: kartica v vrsti je visoka kot najvišja — del z besedilom se raztegne do dna, da ozadje teme
   (izgled uporabnika, karticaTemaSlog) ne pusti pasu v privzeti barvi pod besedilom. */
.profil-kartica { display: flex; flex-direction: column; }
.profil-kartica > * { flex-shrink: 0; }
.profil-kartica > .profil-kartica-info { flex: 1 0 auto; }
/* Skini (skini/*.css): »brez okraska na sliki« — skrije okrasek nad sliko (pentlja, vitica, eksplozija …) na kartici in profilu. */
.profil-kartica.skin-brez-okrasa::before, body.skin-brez-okrasa .skin-foto-okvir::before { display: none !important; }
/* overflow-wrap (2026-10-20): dolgo ime brez presledka (npr. »Ozebekandraz…«) se prelomi v novo vrstico, namesto da ga kartica odreže. */
.profil-kartica-ime { font-weight: 700; font-size: .95rem; overflow-wrap: anywhere; min-width: 0; }
.profil-kartica-meta { font-size: .8rem; color: var(--text-sec); }

/* Zvezdica "priljubljen" — plavajoč gumb čez zgornji desni kot fotografije, ločeno od klika na sliko
   (preklop slike) IN klika na spodnji del (odpre profil), glej .profil-kartica-zvezda spodaj. */
.profil-kartica-zvezda {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(20,20,30,.45); color: #fff; font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .15s;
}
.profil-kartica-zvezda:hover { transform: scale(1.12); }
.profil-kartica-zvezda.aktivna { background: rgba(224,64,251,.75); color: #ffd93d; }

/* Skupnost: klik na fotografijo kroži med slikami profila (ločeno od klika na kartico = ogled profila) */
/* overflow:hidden (2026-10-16): hover-zoom slike (scale 1.05) ostane znotraj okvirja — sicer povečana slika pogleda
   izpod okvirja skina (trak/paspartu) kot ozek pas nad besedilom. */
.profil-kartica-foto-wrap { position: relative; overflow: hidden; }
.profil-kartica-foto-wrap.vec-slik { cursor: pointer; }
.profil-kartica-foto-pike { position: absolute; bottom: 6px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.profil-kartica-foto-pike .pika { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); box-shadow: 0 0 2px rgba(0,0,0,.4); }
.profil-kartica-foto-pike .pika.aktivna { background: #fff; }

/* Manjše polje čez pribl. trup 3D avatarja — samo tu dotik zavrti model, drugod po sliki gre dotik
   skozi kot navadno podrsavanje strani (glej hotspotEl v avatar-3d-tap-rotate.js). Odstotki so
   groba ocena lege trupa na doprsnem modelu (glava zgoraj ~0-40%, noge/rob spodaj ~75-100%). */
.avatar-3d-hotspot { position: absolute; left: 25%; width: 50%; top: 40%; height: 32%; z-index: 2; }

/* Promocijske kartice (Simple, Blind Magik, AI Trener) v mreži profilov */
.promo-kartica { background: var(--bg); border: none; border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; display: block; box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light); transition: transform .15s, box-shadow .15s; }
.promo-kartica:hover { transform: translateY(-3px); }
.promo-kartica-vizual { width: 100%; aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: #fff; overflow: hidden; }
.promo-kartica-vizual img { width: 100%; height: 100%; object-fit: cover; }
.promo-kartica-info { padding: .75rem .9rem; }
.promo-kartica-naslov { font-weight: 700; font-size: .95rem; }
.promo-kartica-opis { font-size: .78rem; color: var(--text-sec); margin-top: .15rem; }

/* Veliki oglasi (svetilkar.com/Landlord/Termini/Organizator) — zasedejo mesto 2 profilov, s pravo generirano sliko.
   min-width:0 je nujen — brez tega grid item privzeto ne skrči vsebine (min-width:auto), zato se slika
   na ozkih zaslonih zna prikazati v naravni (zelo veliki) velikosti namesto skrčena na širino kartice. */
.promo-kartica-veliko { grid-column: span 2; min-width: 0; }
.promo-kartica-vizual-slika { width: 100%; max-width: 100%; aspect-ratio: 2/1; object-fit: cover; display: block; }
.promo-kartica-veliko .promo-kartica-opis { max-height: 4.2rem; overflow-y: auto; }

/* Pod ~370px na voljo pogosto samo 1 stolpec — "span 2" tam ni zanesljiv (manj stolpcev, kot kartica zahteva),
   zato na ozkih zaslonih raje eksplicitno razširimo čez CELO širino mreže. */
@media (max-width: 480px) {
  .promo-kartica-veliko { grid-column: 1 / -1; }
}

/* Foto upload sloti */
.foto-sloti { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.foto-slot { width: 110px; height: 140px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; background: var(--bg); box-shadow: inset 3px 3px 8px var(--shadow-dark), inset -3px -3px 8px var(--shadow-light); }
.foto-slot img { width: 100%; height: 100%; object-fit: cover; }
.foto-slot span { font-size: 1.6rem; color: var(--text-sec); }
.foto-premakni { position: absolute; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: .9rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.foto-premakni:hover { background: rgba(0,0,0,.75); }
.foto-premakni-levo { left: 6px; }
.foto-premakni-desno { right: 6px; }

.foto-slot-wrap { display: flex; flex-direction: column; align-items: center; gap: .4rem; position: relative; }
/* Vidnost 2./3. slike (2026-10-19, aa/027): 🔒 = samo prijavljeni; meni F pod sliko */
.foto-zaklep { display: none; position: absolute; top: 6px; left: 6px; z-index: 2; padding: .1rem .35rem; border-radius: 999px;
  background: rgba(0,0,0,.6); color: #fff; font-size: .8rem; line-height: 1.4; pointer-events: none; }
.foto-slot-wrap.samo-prijavljeni .foto-zaklep { display: block; }
.foto-f-ovoj { position: relative; }
.foto-f-meni { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 20; min-width: 210px;
  display: flex; flex-direction: column; padding: .3rem; border-radius: 12px; background: var(--surface, #fff);
  border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.foto-f-meni[hidden] { display: none; }
[data-wrap-slot="3"] .foto-f-meni { left: auto; right: -2rem; transform: none; } /* 3. slika je ob desnem robu — meni ne sme čez zaslon */
.foto-f-meni button { padding: .55rem .7rem; border: 0; border-radius: 8px; background: none; text-align: left; font: inherit; font-size: .88rem; cursor: pointer; color: inherit; white-space: nowrap; }
.foto-f-meni button:hover { background: var(--surface-2); }
.foto-f-meni button.izbrano { font-weight: 700; color: #a21caf; }
.foto-f-meni button.izbrano::after { content: ' ✓'; }
.foto-akcije { display: flex; gap: .4rem; }
.foto-akcija {
  width: 30px; height: 26px; border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--font); font-size: .8rem; font-weight: 700; color: var(--text-sec);
  background: var(--bg); box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light);
}
.foto-akcija:hover { color: var(--accent); }
.foto-akcija:disabled { opacity: .35; cursor: default; }
.foto-akcija:disabled:hover { color: var(--text-sec); }
.foto-akcija-x:hover { color: var(--danger); }

.foto-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.25rem; cursor: zoom-out; }
.foto-lightbox-ozadje { position: absolute; inset: 0; background: rgba(10,10,15,.85); }
.foto-lightbox img { position: relative; max-width: 92vw; max-height: 92vh; object-fit: contain; border-radius: var(--radius-sm); }
.foto-lightbox-x {
  position: absolute; top: 1rem; right: 1.25rem; z-index: 1; color: #fff; font-size: 1.8rem;
  line-height: 1; cursor: pointer; opacity: .85; background: none; border: none;
}
.foto-lightbox-x:hover { opacity: 1; }

.avatar-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.avatar-modal-ozadje { position: absolute; inset: 0; background: rgba(20,20,30,.55); }
.avatar-modal-karta { position: relative; width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; }
.avatar-modal-glava { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.avatar-modal-glava h3 { margin: 0; }
.avatar-modal-mreza { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .75rem; }
.avatar-opcija {
  padding: 0; border: none; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  aspect-ratio: 3 / 4; background: var(--bg);
  box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light);
  transition: transform .15s;
}
.avatar-opcija:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--accent); }
.avatar-opcija img { width: 100%; height: 100%; object-fit: cover; display: block; }

.chip-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { padding: .4rem .85rem; border-radius: 999px; border: none; font-size: .82rem; cursor: pointer; background: var(--bg); box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light); }
.chip.selected { background: linear-gradient(135deg, #f472e0, var(--accent)); color: #fff; box-shadow: inset 2px 2px 5px rgba(0,0,0,.2); }

.filter-bar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; background: var(--bg); border: none; border-radius: var(--radius); padding: .85rem 1.1rem; margin-bottom: 1.25rem; box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light); }
.filter-bar select { width: auto; flex: 0 0 auto; }
.filter-label { font-size: .8rem; font-weight: 600; color: var(--text-sec); }

.text-sec { color: var(--text-sec); }
.text-center { text-align: center; }

footer.copyright { text-align: center; padding: 2rem 1rem; color: var(--text-sec); font-size: .8rem; }

.spinner {
  width: 18px; height: 18px; border: 3px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; display: inline-block; animation: spin .7s linear infinite;
}
.btn-secondary .spinner, .btn-danger .spinner { border-color: rgba(0,0,0,.15); border-top-color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }

.ac-wrap { position: relative; }
.ac-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 100;
  background: var(--bg); border: none; border-radius: var(--radius-sm);
  box-shadow: 6px 6px 16px var(--shadow-dark), -6px -6px 16px var(--shadow-light);
  max-height: 220px; overflow-y: auto; display: none;
}
.ac-item { padding: .5rem .75rem; cursor: pointer; font-size: .88rem; border-radius: var(--radius-sm); }
.ac-item:hover { background: var(--surface-2); }

/* ─── Klepet (zavihek "Klepet" v panel.php) ──────────────────────────────── */
.klepet-badge {
  display: none; margin-left: .4rem; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; vertical-align: middle;
}
.klepet-badge.vidno { display: inline-block; }
.panel-tab.active .klepet-badge { box-shadow: 0 0 0 2px rgba(255,255,255,.65); }

.klepet-ovoj { display: flex; gap: 1rem; align-items: flex-start; }
.klepet-seznam {
  flex: 0 0 260px; max-width: 260px; display: flex; flex-direction: column; gap: .5rem;
  max-height: 70vh; overflow-y: auto;
  /* Brez tega odmika scroll vsebnik obreže rob box-shadow "obroča" (.klepet-vrstica.aktivna) na
     levi/desni in pri prvi/zadnji vrstici — vrstice bi se dotikale samega roba vsebnika. */
  padding: 3px;
}
.klepet-nit { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.klepet-vrstica {
  display: flex; gap: .6rem; align-items: center; padding: .55rem .65rem; cursor: pointer;
  background: var(--bg); border-radius: var(--radius-sm);
  /* Prosojen border (ne 0) VEDNO prisoten, tudi ko ni aktivna — s tem se velikost vrstice ne
     spremeni, ko .aktivna doda barvo (glej spodaj), box-sizing:border-box pa poskrbi, da border
     ne poveča skupne velikosti elementa. */
  border: 2px solid transparent;
  box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light);
}
.klepet-vrstica.aktivna {
  /* Prej box-shadow "0 0 0 2px" obroč — na nekaterih mobilnih brskalnikih se je spodnji rob obroča
     ni izrisal (glej sejo 2026-09-15, potrjeno na Poco X8 Pro Max). Pravi border je del standardnega
     izrisa robu elementa (ne "sence"), zato se dosledno izriše na vseh štirih straneh. */
  border-color: var(--accent);
  box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);
}
.klepet-vrstica-foto { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.klepet-vrstica-telo { flex: 1 1 auto; min-width: 0; }
.klepet-vrstica-ime { font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klepet-vrstica-zadnje { font-size: .78rem; color: var(--text-sec); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.klepet-vrstica-pika {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center;
}
.klepet-vrstica-izbrisi {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: var(--text-sec); font-size: .85rem;
  display: flex; align-items: center; justify-content: center;
}
.klepet-vrstica-izbrisi:hover { background: var(--surface-2); color: var(--danger); }
/* Mapa »Čakam odgovor« (2026-10-20, js/klepet.js) — zložljiva, na vrhu seznama klepetov. */
.klepet-mapa { border: 1px solid var(--border); border-radius: 12px; margin-bottom: .5rem; background: var(--surface); }
.klepet-mapa-glava { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .6rem .75rem;
  border: none; background: none; font: inherit; font-weight: 600; color: var(--text); cursor: pointer; }
.klepet-mapa-st { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; margin-left: .3rem; border-radius: 99px; background: var(--surface-2); color: var(--text-sec); font-size: .78rem; text-align: center; }
.klepet-mapa-puscica { transition: transform .2s; color: var(--text-sec); }
.klepet-mapa.odprta .klepet-mapa-puscica { transform: rotate(180deg); }
.klepet-mapa-vsebina { display: none; padding: 0 .35rem .35rem; }
.klepet-mapa.odprta .klepet-mapa-vsebina { display: block; }
.klepet-mapa-opomba { margin: 0 .4rem .4rem; color: var(--text-sec); font-size: .78rem; }

.klepet-nit-glava { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.klepet-nit-oseba { display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; min-width: 0; color: var(--text); text-decoration: none; }
.klepet-nit-oseba:hover .klepet-nit-ime { text-decoration: underline; }
.klepet-nit-foto { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--surface-2); flex-shrink: 0; }
.klepet-nit-ime { font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klepet-nit-nazaj { display: none; }

.klepet-sporocila {
  flex: 1 1 auto; min-height: 240px; max-height: 55vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: .4rem; padding: .6rem;
  background: var(--bg); border-radius: var(--radius-sm);
  box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light);
}
.klepet-vrsta { display: flex; align-items: flex-end; gap: .4rem; }
.klepet-vrsta.moje { justify-content: flex-end; }
.klepet-vrsta.tuje { justify-content: flex-start; }
.klepet-oblak-ava {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  font-size: .95rem; text-decoration: none; margin-bottom: .1rem;
}
.klepet-oblak-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.klepet-oblak {
  max-width: 80%; padding: .5rem .8rem; border-radius: 14px; font-size: .88rem; line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.klepet-vrsta.tuje .klepet-oblak { max-width: calc(85% - 32px); }
.klepet-oblak-cas { display: block; font-size: .68rem; opacity: .65; margin-top: .2rem; }
.klepet-oblak-prebrano { margin-left: .35rem; letter-spacing: -1px; }
.klepet-oblak-prebrano.prebrano { color: #7dd3fc; opacity: 1; }
.klepet-oblak.moje { background: linear-gradient(135deg, #f472e0, var(--accent)); color: #fff; }
.klepet-oblak.tuje { background: var(--surface-2); color: var(--text); }
/* Sogovornik na zahtevo tipka (2026-10-15) — tri utripajoče pikice */
/* AI pomoč v Klepetu (2026-10-16): siv predlog sporočila (klik → v polje za vnos) in sporočilo AI sestre */
.klepet-oblak.klepet-predlog { background: var(--surface-2); color: var(--text-sec); border: 1px dashed var(--border); cursor: pointer; opacity: .9; }
.klepet-oblak.klepet-predlog:hover { opacity: 1; border-color: var(--accent); }
.klepet-predlog-oznaka, .klepet-sestra-oznaka { display: block; font-size: .72rem; font-weight: 700; margin-bottom: .25rem; opacity: .85; }
.klepet-oblak.klepet-sestra { border: 1px dashed #a78bfa; }
.klepet-tipka { display: inline-flex; gap: .3rem; align-items: center; padding: .7rem .9rem; }
.klepet-tipka span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-sec); opacity: .35; animation: klepetTipka 1.2s infinite ease-in-out; }
.klepet-tipka span:nth-child(2) { animation-delay: .2s; }
.klepet-tipka span:nth-child(3) { animation-delay: .4s; }
@keyframes klepetTipka { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.klepet-info { text-align: center; font-size: .78rem; color: var(--text-sec); padding: .4rem .5rem; margin: auto 0; }

.klepet-vnos-ovoj { margin-top: .6rem; }
.klepet-vnos-ovoj textarea { min-height: 58px; }
.klepet-stevec { font-size: .72rem; color: var(--text-sec); text-align: right; margin-top: .2rem; }
.klepet-opozorilo { font-size: .78rem; color: var(--text-sec); margin-top: .3rem; }
.klepet-napaka { font-size: .8rem; color: var(--danger); margin-top: .3rem; }
.klepet-prazno { color: var(--text-sec); font-size: .86rem; padding: 1rem .25rem; }

/* ─── mIRC — dodatki nad skupno Klepet-osnovo ───────────────────────────── */
/* Soba z vsaj enim sporočilom mlajšim od 7 dni ("sveža") — ime in številka v isti temno modri
   barvi, ločeno od "zgolj nekoč aktivna" soba (glej api/mirc_sobe.php za pomen s.stevilo). */
.klepet-vrstica-ime.mirc-svez { color: #1a3a8f; }
.klepet-vrstica-pika.mirc-svez { background: #1a3a8f; }
/* Uporabnikova lastna država (vedno na vrhu seznama sob) — zelena, ima prednost pred "sveže". */
.klepet-vrstica-ime.mirc-moja { color: #15803d; font-weight: 800; }
.klepet-vrstica-pika.mirc-moja { background: #15803d; }
.mirc-akcija {
  border: none; background: transparent; cursor: pointer; color: inherit; opacity: .8;
  font-size: .72rem; margin-left: .4rem; padding: 0 .25rem; border-radius: 999px; vertical-align: middle;
}
.mirc-akcija:hover { opacity: 1; }
.mirc-akcija:disabled { cursor: default; opacity: .45; }
/* Reakcije + odgovori (2026-10-22, aa/031) */
.mirc-reakcije { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.klepet-vrsta.moje .mirc-reakcije { justify-content: flex-end; }
.mirc-reakcija {
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
  font-size: .78rem; padding: .05rem .45rem; border-radius: 999px; line-height: 1.5;
}
.mirc-reakcija.moja { border-color: var(--accent); background: rgba(224, 64, 251, .12); font-weight: 700; }
.mirc-izbirnik {
  position: fixed; z-index: 1000; display: flex; gap: .15rem; padding: .3rem .4rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.mirc-izbirnik button { border: none; background: transparent; cursor: pointer; font-size: 1.35rem; padding: .1rem .2rem; border-radius: 50%; transition: transform .12s; }
.mirc-izbirnik button:hover { transform: scale(1.25); }
.mirc-izbirnik button.moja { background: rgba(224, 64, 251, .18); }
.mirc-citat {
  display: block; font-size: .76rem; padding: .25rem .5rem; margin-bottom: .3rem; border-left: 3px solid currentColor;
  border-radius: 6px; background: rgba(0,0,0,.07); opacity: .85; cursor: pointer; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mirc-citat-izbrisan { font-style: italic; cursor: default; }
.mirc-odgovor {
  display: flex; align-items: center; gap: .35rem; font-size: .8rem; padding: .35rem .6rem; margin-bottom: .35rem;
  border-left: 3px solid var(--accent); border-radius: 8px; background: var(--surface-2); color: var(--text-sec);
}
.mirc-odgovor #mircOdgovorBesedilo { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mirc-odgovor-oznaka { font-weight: 700; flex-shrink: 0; }
.klepet-oblak.mirc-poudari { outline: 2px solid var(--accent); outline-offset: 2px; transition: outline-color .3s; }

/* ─── Prazno stanje ("Tukaj si sam.") — Skupnost + vstopna stran, ko ni zadetkov ────────────── */
.prazno-stanje { text-align: center; padding: 2.5rem 1rem; grid-column: 1 / -1; }
.prazno-stanje-emoji { display: inline-block; font-size: 3rem; animation: prazno-stanje-poskok 1.8s ease-in-out infinite; }
.prazno-stanje-tekst { color: var(--text-sec); font-size: .95rem; margin-top: .75rem; }
@keyframes prazno-stanje-poskok {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-8deg); }
}

@media (max-width: 640px) {
  .klepet-seznam { flex-basis: auto; max-width: none; width: 100%; }
  .klepet-ovoj.nit-odprta .klepet-seznam { display: none; }
  .klepet-ovoj:not(.nit-odprta) .klepet-nit { display: none; }
  .klepet-nit-nazaj { display: inline-flex; }
}


/* Cupid prelet (2026-10-03) — glej cupidPrelet() v js/panel.js */
.cupid-prelet { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; width: 90px; height: 90px; }
.cupid-prelet img { width: 90px; height: 90px; border-radius: 50%; object-fit: cover; border: 3px solid #f2c96b;
  box-shadow: 0 0 24px rgba(242,201,107,.85), 0 0 48px rgba(224,64,251,.45); }
.cupid-prelet span { position: absolute; right: -6px; bottom: -4px; font-size: 30px; }
.cupid-iskra { position: fixed; z-index: 9998; width: 7px; height: 7px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff6c8 0%, #f2c96b 50%, transparent 70%); animation: cupid-iskra .9s ease-out forwards; }
@keyframes cupid-iskra { to { transform: translateY(26px) scale(.2); opacity: 0; } }

/* Kartica "Tu je bil Cupid" na vstopni strani (2026-10-03) */
.cupid-kartica { box-shadow: 0 0 0 2px #f2c96b, 0 0 22px rgba(242,201,107,.55), 6px 6px 16px var(--shadow-dark); }
.cupid-kartica .profil-kartica-meta b { display: block; margin-top: .25rem; }

/* % ujemanja (v2, 2026-10-10) — čipi v Profilu, značka na kartici v Skupnosti, poziv brez vprašalnika */
.uj-chipi { display: flex; flex-wrap: wrap; gap: .45rem; }
.uj-chip { padding: .4rem .85rem; border-radius: 999px; border: none; font-family: var(--font); font-size: .82rem; cursor: pointer; color: var(--text); background: var(--bg); box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light); transition: transform .15s; }
.uj-chip.aktiven { background: linear-gradient(135deg, #f472e0, var(--accent)); color: #fff; box-shadow: inset 2px 2px 5px rgba(0,0,0,.2); }
.uj-chip-polno { animation: ujTresi .4s; }
@keyframes ujTresi { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* Barvne stopnje = srčki ujemanja v Blind Magik Skupnosti (0-50 črno … 91-100 roza + sij) */
.uj-znacka { position: absolute; top: 6px; left: 6px; z-index: 3; padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #fff; background: #27272a; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.uj-znacka.uj-0 { background: #f4f4f5; color: #52525b; border: 1px solid #a1a1aa; box-shadow: 0 1px 3px rgba(0,0,0,.2); } /* pod 50 % — sivo-belo */
.uj-znacka.uj-51 { background: #4c1d95; }
.uj-znacka.uj-61 { background: #7c3aed; }
.uj-znacka.uj-71 { background: #dc2626; }
.uj-znacka.uj-81 { background: #ec4899; }
.uj-znacka.uj-91 { background: #ec4899; box-shadow: 0 0 10px 2px rgba(236,72,153,.75); }
/* Zavihek Zmenki (v2, 2026-10-10) */
.zm-nastavitve summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.zm-nastavitve[open] .zm-uredi { display: none; }
.zm-nastavitve summary::-webkit-details-marker { display: none; }
.zm-podzavihki { display: flex; gap: .4rem; flex-wrap: wrap; }
.zm-podzavihek { position: relative; padding: .5rem 1rem; border: none; border-radius: 999px; font-family: var(--font); font-weight: 600; font-size: .88rem; cursor: pointer; color: var(--text); background: var(--bg); box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 8px var(--shadow-light); }
.zm-podzavihek.aktiven { color: #fff; background: linear-gradient(135deg, #f472e0, var(--accent)); box-shadow: inset 2px 2px 5px rgba(0,0,0,.2); }
.zm-podzavihek.aktiven .text-sec { color: rgba(255,255,255,.85); }
.zm-pika { position: absolute; top: 2px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); }
.zm-kartica { position: relative; }
.zm-kartica.zm-potrjen { box-shadow: 0 0 0 2px #eab308, 0 0 22px 6px rgba(234,179,8,.25), 8px 8px 20px var(--shadow-dark); }
.zm-kartica.zm-zavrnjen { filter: grayscale(1); opacity: .6; }
.zm-glava { display: flex; align-items: center; gap: .9rem; }
.zm-avatar { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: var(--surface-2); }
.zm-info { flex: 1; min-width: 0; }
.zm-ime { font-weight: 700; font-size: 1.1rem; }
/* Razlaga slepih zmenkov za nevključene (2026-10-21, js/zmenki.js) */
.zm-razlaga-koraki { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.zm-razlaga-koraki li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.45; }
.zm-razlaga-koraki li > span:first-child { font-size: 1.15rem; flex-shrink: 0; }
.uj-znacka.zm-score { position: static; font-size: .95rem; padding: .3rem .7rem; flex-shrink: 0; }
.zm-novo { position: absolute; top: -8px; left: 14px; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; }
.zm-stanje { margin-top: .8rem; }
.zm-gumbi { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.zm-termin { display: inline-flex; flex-direction: column; align-items: center; min-width: 78px; line-height: 1.3; }
.zm-termin span:first-child { font-size: .75rem; font-weight: 600; }
.zm-termin-partner { outline: 2px solid var(--accent); outline-offset: 1px; }
.zm-ne-morem { color: var(--danger); }
.zm-dogovor { background: #dcfce7; color: #166534; border-radius: var(--radius-sm); padding: .6rem .8rem; line-height: 1.6; }
.zm-opozorilo { margin-top: .5rem; background: #fef3c7; color: #78350f; border-radius: var(--radius-sm); padding: .6rem .8rem; font-size: .78rem; line-height: 1.6; }
.uj-poziv { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .85rem 1.1rem; border-radius: var(--radius-sm); font-size: .9rem; background: var(--bg); box-shadow: 0 0 0 1px rgba(224,64,251,.35), 4px 4px 12px var(--shadow-dark); }
/* ── Podpora (2026-10-10) ─────────────────────────────────────────── */
.pod-glava { display:flex; align-items:center; gap:.7rem; margin-bottom:.6rem; }
.pod-ikona { font-size:1.9rem; line-height:1; flex:none; }
.pod-kartica { border-color:rgba(var(--pod-barva),.38); background:linear-gradient(135deg,rgba(var(--pod-barva),.08),rgba(var(--pod-barva),.02)); transition: box-shadow .2s, transform .2s; }
/* Kot kartice v Simple »Podpora« (2026-10-16): ob prehodu z miško svetleč rob in sij v barvi kartice + rahel dvig. */
.pod-kartica:hover { transform: translateY(-2px); box-shadow: 10px 10px 24px var(--shadow-dark), -8px -8px 20px var(--shadow-light), 0 0 0 1px rgba(var(--pod-barva),.35), 0 0 26px -6px rgba(var(--pod-barva),.6); }
@media (prefers-reduced-motion: reduce) { .pod-kartica, .pod-kartica:hover { transition: none; transform: none; } }
.pod-koraki { margin:0; padding-left:1.2rem; display:grid; gap:.55rem; font-size:.92rem; line-height:1.6; color:var(--text-sec); }
.pod-koraki b { color:var(--text); }.pod-mreza { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; }
.pod-mreza .card { margin:0; display:flex; flex-direction:column; align-items:flex-start; }
.pod-mreza .card > p { flex:1; }

/* ── Hamburger meni v glavi panela (2026-10-10) ───────────────────── */
.ham-ovoj { position:relative; }
.ham-gumb { font-size:1.15rem; line-height:1; padding:.45rem .8rem; }
.ham-meni { position:fixed; z-index:300; /* fixed: .nav ima overflow-x:auto, ki bi absolutni meni odrezal; top/right nastavi js/panel.js */ min-width:210px; display:flex; flex-direction:column;
  padding:.4rem; border-radius:16px; background:var(--surface); border:1px solid var(--border);
  box-shadow:6px 6px 16px var(--shadow-dark), -4px -4px 12px var(--shadow-light); }
.ham-meni[hidden] { display:none; }
.ham-meni button, .ham-meni a { display:block; width:100%; text-align:left; padding:.6rem .85rem; border:0; border-radius:10px;
  background:none; font:inherit; font-size:.95rem; color:var(--text); text-decoration:none; cursor:pointer; }
.ham-meni button:hover, .ham-meni a:hover { background:var(--surface-2); }
.ham-meni button.aktiven { color:var(--accent); font-weight:700; }
/* Podzavihki v meniju (2026-10-15): puščica ▾ desno od imena zavihka razpre .ham-pod */
.ham-meni { max-height:calc(100vh - 80px); overflow-y:auto; }
.ham-vrsta { display:flex; align-items:center; }
.ham-vrsta > button:first-child { flex:1; }
.ham-meni .ham-puscica { width:auto; flex:none; padding:.6rem .75rem; color:var(--text-sec); transition:transform .2s; }
.ham-meni .ham-puscica[aria-expanded="true"] { transform:rotate(180deg); }
.ham-pod { display:flex; flex-direction:column; margin:0 0 .2rem 1.4rem; border-left:2px solid var(--border); }
.ham-pod[hidden] { display:none; }
.ham-meni .ham-pod button { padding:.45rem .8rem; font-size:.88rem; color:var(--text-sec); }
/* AI ocena profila (2026-10-18, aa/025) — kartica v Profil → Osnovno + značka na tujem profilu */
.ocena-preklop { display:flex; align-items:center; gap:.6rem; width:100%; padding:0; border:0; background:none; cursor:pointer; text-align:left; color:inherit; font:inherit; }
.ocena-preklop-naslov { font-size:1.17rem; font-weight:700; }
.ocena-povzetek { padding:.1rem .55rem; border-radius:999px; background:rgba(224,64,251,.12); color:#a21caf; font-size:.85rem; font-weight:700; }
.ocena-povzetek:empty { display:none; }
.ocena-puscica { margin-left:auto; color:var(--text-sec); transition:transform .2s; }
.ocena-kartica.skrceno .ocena-puscica { transform:rotate(-90deg); }
#ocenaVsebina[hidden] { display:none; }
.ocena-glava { display:flex; align-items:baseline; gap:.35rem; }
.ocena-stevilka { font-size:2.4rem; font-weight:800; line-height:1; color:#e040fb; }
.ocena-od { font-size:1.1rem; font-weight:700; color:var(--text-sec); }
.ocena-zasebno { margin:.5rem 0 .8rem; padding:.45rem .7rem; border-radius:10px; background:var(--surface-2); font-size:.85rem; font-weight:600; }
.ocena-vrstice { display:flex; flex-direction:column; gap:.4rem; }
.ocena-vrstica { display:grid; grid-template-columns:110px 1fr 2.2rem; align-items:center; gap:.6rem; font-size:.9rem; }
.ocena-vrstica b { text-align:right; }
.ocena-trak { height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.ocena-trak i { display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, #f0abfc, #e040fb); }
.ocena-podnaslov { margin:1rem 0 .3rem; font-weight:700; font-size:.92rem; }
.ocena-predlogi { margin:0; padding-left:1.2rem; font-size:.9rem; line-height:1.5; }
.ocena-predlogi li + li { margin-top:.25rem; }
.ocena-predlog { margin:0 0 .5rem; padding:.6rem .8rem; border-left:3px solid #e040fb; border-radius:0 10px 10px 0; background:var(--surface-2); font-size:.9rem; white-space:pre-wrap; }
.ocena-korist { margin:1rem 0 .6rem; font-size:.9rem; }
.ocena-znacka { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:.9rem; cursor:pointer; }
.ocena-znacka input { width:auto; margin:0; }
.ocena-znacka-predogled, .ocena-znacka-profil { display:inline-block; padding:.2rem .6rem; border-radius:999px; background:rgba(224,64,251,.12); color:#a21caf; font-size:.85rem; font-weight:600; }
@media (max-width:480px) { .ocena-vrstica { grid-template-columns:90px 1fr 2rem; } }
/* »Slepi zmenki« — stanje ob zavihku/v hamburgerju (% vprašalnika / Začni) + podnapis (2026-10-18) */
.zm-stanje { display:inline-block; margin-left:.4rem; padding:0 .45rem; height:18px; line-height:18px; border-radius:999px;
  background:#e040fb; color:#fff; font-size:.7rem; font-weight:700; vertical-align:middle; white-space:nowrap; }
.zm-stanje[hidden] { display:none; }
.panel-tab.active .zm-stanje { box-shadow:0 0 0 2px rgba(255,255,255,.65); }
.ham-podnapis { display:block; margin:.15rem 0 0 1.55rem; font-size:.76rem; font-weight:400; color:var(--text-sec); white-space:normal; line-height:1.3; }
.ham-podnapis[hidden] { display:none; }
/* Opozorila profila (2026-10-18): ⚠ + števec levo od hamburgerja, seznam je .ham-meni */
.ham-ovoj[hidden] { display:none; }
/* Lastna slika v glavi (2026-10-22) — enako velika kot okrogla ikona opozoril (22 px). */
.glava-slika { display:inline-flex; align-items:center; background:none; border:0; padding:.3rem .2rem; cursor:pointer; line-height:1; }
.glava-slika img { width:22px; height:22px; border-radius:50%; object-fit:cover; display:block; box-shadow:0 0 0 1.5px var(--accent); }
.opoz-gumb { position:relative; display:inline-flex; align-items:center; justify-content:center; background:none; border:0; padding:.3rem .45rem; cursor:pointer; line-height:1; }
.opoz-gumb svg { display:block; animation:opoz-utrip 2.4s ease-in-out 3; }
.opoz-stevec { position:absolute; top:-2px; right:-4px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--danger); color:#fff; font-size:.72rem; font-weight:700; line-height:18px; text-align:center; box-shadow:0 0 0 2px var(--surface, #fff); }
@keyframes opoz-utrip { 0%,100% { transform:scale(1); } 50% { transform:scale(1.15); } }
.opoz-meni { min-width:250px; max-width:min(320px, calc(100vw - 16px)); }
.opoz-naslov { padding:.5rem .85rem .35rem; font-size:.8rem; font-weight:700; color:var(--text-sec); text-transform:uppercase; letter-spacing:.03em; }
.opoz-gumb.opoz-mirno svg { opacity:.4; filter:grayscale(1); animation:none; }
.opoz-gumb .opoz-ikona-ok, .opoz-gumb.opoz-ok .opoz-ikona-ne { display:none; }
.opoz-gumb.opoz-ok .opoz-ikona-ok { display:block; animation:none; }
.opoz-ok-vrstica { padding:.6rem .85rem; color:#15803d; font-weight:600; }
.opoz-ok-vrstica[hidden], .opoz-naslov[hidden] { display:none; }
.opoz-stevec[hidden] { display:none; }
.opoz-vrsta { display:flex; align-items:center; gap:.25rem; }
.ham-meni .opoz-vrsta > button { flex:1; min-width:0; }
.opoz-ignor { flex:none; display:flex; align-items:center; gap:.3rem; padding:.4rem .6rem; font-size:.75rem; font-weight:400; color:var(--text-sec); cursor:pointer; white-space:nowrap; }
.opoz-ignor input { width:auto; margin:0; }
.opoz-vrsta.ignor { opacity:.5; }
.opoz-vrsta:not(.ignor) + .opoz-vrsta.ignor { border-top:1px dashed var(--border); }
.opoz-oznaci { animation:opoz-oznaci 2.2s ease-out; border-radius:10px; }
@keyframes opoz-oznaci { 0%,40% { box-shadow:0 0 0 3px #f59e0b; } 100% { box-shadow:0 0 0 3px transparent; } }
.ham-meni .ham-odjava { margin-top:.3rem; border-top:1px solid var(--border); border-radius:0 0 10px 10px; color:var(--text-sec); }
/* Profil → Dodatno (2026-10-11) */
.dod-tip { font-size:1.35rem; color:var(--accent); margin:.2rem 0 .8rem; }
.dod-portret { display:block; width:100%; max-width:320px; height:auto; margin:0 auto 1rem; border-radius:18px; box-shadow:0 10px 30px rgba(224,64,251,.3); }
.dod-naslov { font-size:1rem; color:var(--accent); margin:1rem 0 .3rem; }
.dod-vrstica { margin:.45rem 0; }
.dod-vrstica-ime { display:flex; justify-content:space-between; gap:.5rem; font-size:.88rem; margin-bottom:.2rem; }
.dod-trak { height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; }
.dod-trak > div { height:100%; border-radius:99px; }
.dod-stevci { display:flex; gap:2rem; margin:.4rem 0 1rem; }
.dod-stevci > div { display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.dod-stevci b { font-size:1.6rem; }
.dod-stevci span { font-size:.85rem; color:var(--text-sec); }
.dod-koda { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; padding:.6rem .8rem; border:1px dashed var(--accent); border-radius:12px; }
.dod-koda b { letter-spacing:.06em; flex:1; }
/* Idealni partner strnjeno (2026-10-11): <details> — v vrstici sličica + tip + 2 vrstici opisa, klik raztegne. */
.dod-razteg > summary { list-style:none; display:flex; align-items:center; gap:.8rem; cursor:pointer; }
.dod-razteg > summary::-webkit-details-marker { display:none; }
.dod-razteg > summary::after { content:'▾'; margin-left:auto; color:var(--text-sec); transition:transform .2s; flex:none; }
.dod-razteg[open] > summary::after { transform:rotate(180deg); }
.dod-slicica { width:56px; height:56px; object-fit:cover; border-radius:12px; flex:none; }
.dod-povzetek { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.dod-povzetek .dod-tip { font-size:1.05rem; margin:0; }
.dod-povzetek .text-sec { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dod-razteg[open] .dod-povzetek .text-sec { -webkit-line-clamp:unset; display:block; }
.dod-razteg[open] .dod-slicica { display:none; }
.dod-razteg[open] > summary { margin-bottom:1rem; }
/* Profil → Ujemanje: izpolnjenost + posebne vrste podatkov (2026-10-11) */
.uj-glava { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.uj-izpolnjenost { display:inline-flex; align-items:baseline; gap:.3rem; padding:.3rem .75rem; border-radius:999px; font-size:.85rem;
  background:rgba(239,68,68,.12); color:#dc2626; white-space:nowrap; }
.uj-izpolnjenost b { font-size:1.05rem; }
.uj-izpolnjenost.ok { background:rgba(34,197,94,.14); color:#15803d; }
.uj-posebni { margin-top:1rem; padding:.9rem 1rem; border:1px dashed var(--border); border-radius:14px; }
.uj-soglasje { display:flex; align-items:flex-start; gap:.5rem; font-weight:600; cursor:pointer; }
.uj-soglasje input { margin-top:.2rem; flex:none; }
.uj-posebna-polja { border:0; padding:0; margin:0; min-width:0; }
.uj-posebna-polja[disabled] { opacity:.45; }