/* ════════════════════════════════════════════════════════════════════
   mail.css — SILENTIA · Silentia Pošta (mail.silentia.live), odjemalec za ime.priimek@silentia.live
   Isti videz kot konzola (dvorana ponoči, papirnato besedilo, šampanjsko zlato). Na telefonu en pogled naenkrat (seznam,
   branje, pisanje drsijo čez), na širokem zaslonu trije stolpci: mape, seznam, branje. Pisma v HTML so na belem listu
   v zaprtem okvirju (iframe brez skript), navadno besedilo v pisavi Source Serif 4.
   Pisave so iz /pisave/ (na mail.silentia.live vzdevek na mapo aplikacije).
   ════════════════════════════════════════════════════════════════════ */
@font-face { font-family: 'EB Garamond'; font-weight: 500; font-display: swap; src: url(/pisave/eb-garamond-latin-500-normal.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: 'EB Garamond'; font-weight: 500; font-display: swap; src: url(/pisave/eb-garamond-latin-ext-500-normal.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: 'EB Garamond'; font-weight: 600; font-display: swap; src: url(/pisave/eb-garamond-latin-600-normal.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: 'EB Garamond'; font-weight: 600; font-display: swap; src: url(/pisave/eb-garamond-latin-ext-600-normal.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: 'EB Garamond'; font-weight: 500; font-style: italic; font-display: swap; src: url(/pisave/eb-garamond-latin-500-italic.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: 'EB Garamond'; font-weight: 500; font-style: italic; font-display: swap; src: url(/pisave/eb-garamond-latin-ext-500-italic.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-weight: 500; font-display: swap; src: url(/pisave/barlow-condensed-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 500; font-display: swap; src: url(/pisave/barlow-condensed-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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-weight: 600; font-display: swap; src: url(/pisave/barlow-condensed-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(/pisave/barlow-condensed-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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-weight: 800; font-display: swap; src: url(/pisave/barlow-condensed-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-display: swap; src: url(/pisave/barlow-condensed-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Source Serif 4'; font-weight: 400; font-display: swap; src: url(/pisave/source-serif-4-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-weight: 400; font-display: swap; src: url(/pisave/source-serif-4-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, 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: 'Source Serif 4'; font-weight: 400; font-style: italic; font-display: swap; src: url(/pisave/source-serif-4-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-weight: 600; font-display: swap; src: url(/pisave/source-serif-4-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-weight: 600; font-display: swap; src: url(/pisave/source-serif-4-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --noc: #0A1016; --noc2: #0D141B; --povrs: #111A23; --povrs2: #16212C; --povrs3: #1C2835;
  --crta: rgba(236, 229, 211, .09); --crta2: rgba(236, 229, 211, .16);
  --papir: #ECE5D3; --siva: #9AA7B4; --temna: #6F7B87;
  --zlato: #D2B67E; --zlato2: #E6CF9C; --zlatoT: rgba(210, 182, 126, .14); --zlatoR: rgba(210, 182, 126, .38);
  --zivo: #E5484D; --ok: #30C77B; --pozor: #E8B04B; --info: #5AA9FF;
  --znak: 'EB Garamond', Garamond, 'Times New Roman', serif;
  --ui: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --r: 12px; --r2: 18px; --senca: 0 18px 50px rgba(0, 0, 0, .45);
  --vrh: env(safe-area-inset-top, 0px); --dno: env(safe-area-inset-bottom, 0px);
  --glava: 58px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--noc); color: var(--papir); font: 500 17px/1.35 var(--ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overflow: hidden; overscroll-behavior: none; }
a { color: var(--zlato2); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(210, 182, 126, .35); }
:focus-visible { outline: 2px solid var(--zlato); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ik { width: 22px; height: 22px; flex: 0 0 22px; }

/* ─── znamka ─── */
.znamka { font-family: var(--znak); font-weight: 600; letter-spacing: .42em; color: var(--zlato); text-transform: uppercase; line-height: 1; padding-left: .42em; }
/* logotip silentia●live (logotip.svg) namesto napisa SILENTIA; velikost iz font-size okolja (Primož 13. 10.) */
img.znamka { display: block; height: 1.15em; width: auto; padding-left: 0; letter-spacing: 0; }
.izberi-pismo img.znamka, .sporocilo-zaslon img.znamka { margin-left: auto; margin-right: auto; }
.cifra { font-family: var(--ui); font-weight: 500; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--siva); line-height: 1.7; }

/* ─── gumbi in polja ─── */
.gumb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--crta2); background: var(--povrs2); color: var(--papir); font: 600 16px var(--ui); letter-spacing: .03em; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s, color .12s; }
.gumb:hover { border-color: var(--zlatoR); text-decoration: none; }
.gumb svg { width: 18px; height: 18px; flex: 0 0 18px; }
.gumb.glavni { background: linear-gradient(180deg, #DCC28E, #C6A86E); border-color: #C6A86E; color: #1B1406; }
.gumb.glavni:hover { background: linear-gradient(180deg, #E6CF9C, #D0B37A); }
.gumb.tiho { background: transparent; border-color: transparent; color: var(--siva); }
.gumb.tiho:hover { color: var(--papir); background: rgba(255, 255, 255, .05); }
.gumb.nevaren { background: transparent; border-color: rgba(229, 72, 77, .45); color: #FF9C9F; }
.gumb.nevaren:hover { background: rgba(229, 72, 77, .12); }
.gumb.majhen { min-height: 34px; padding: 0 12px; font-size: 15px; border-radius: 8px; }
.gumb[disabled] { opacity: .45; cursor: default; }
.gumb.nalaga { position: relative; color: transparent !important; }
.gumb.nalaga::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--papir); border-right-color: transparent; animation: vrti .7s linear infinite; }
.gumb.glavni.nalaga::after { border-color: #1B1406; border-right-color: transparent; }
.ikg { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 0; background: none; color: var(--siva); cursor: pointer; position: relative; padding: 0; }
.ikg:hover { color: var(--papir); background: rgba(255, 255, 255, .06); }
.ikg:active { background: rgba(255, 255, 255, .1); }
.ikg.vklop { color: var(--zlato); }
.ikg .pika-st { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--zivo); color: #fff; font: 800 11px/18px var(--ui); text-align: center; }
input.vnos, select.vnos, textarea.vnos { width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--crta2); background: #0C141C; color: var(--papir); font: 500 17px var(--ui); }
input.vnos:focus, select.vnos:focus, textarea.vnos:focus { outline: none; border-color: var(--zlato); box-shadow: 0 0 0 3px rgba(210, 182, 126, .15); }
.oznaka { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 12px; font: 600 13.5px/24px var(--ui); letter-spacing: .03em; background: rgba(255, 255, 255, .05); color: var(--siva); border: 1px solid var(--crta); white-space: nowrap; }
.oznaka.ok { color: #7FE0AD; border-color: rgba(48, 199, 123, .35); background: rgba(48, 199, 123, .08); }
.oznaka.pozor { color: #F3C267; border-color: rgba(232, 176, 75, .4); background: rgba(232, 176, 75, .08); }
.oznaka.napaka { color: #FF9C9F; border-color: rgba(229, 72, 77, .4); background: rgba(229, 72, 77, .08); }
.oznaka.zlato { color: var(--zlato2); border-color: var(--zlatoR); background: var(--zlatoT); }
@keyframes vrti { to { transform: rotate(360deg); } }
@keyframes pojavi { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tresi { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-10px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
.vrtavka { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--zlatoR); border-right-color: var(--zlato); animation: vrti .8s linear infinite; }

/* ─── zaslon PIN ─── */
.pin-zaslon { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: max(24px, var(--vrh)) 20px max(24px, var(--dno)); background: radial-gradient(800px 520px at 50% 30%, #121C26, var(--noc) 70%); overflow-y: auto; }
.pin-okvir { width: min(380px, 100%); display: grid; justify-items: center; gap: 10px; text-align: center; position: relative; z-index: 1; }
.pin-okvir .znamka { font-size: 42px; margin: 4px 0 2px; }
.pin-okvir .cifra { margin-bottom: 22px; letter-spacing: .5em; font-size: 13px; color: var(--zlato2); }
.pin-naslov { font-family: var(--znak); font-style: italic; font-weight: 500; font-size: 22px; color: var(--papir); margin: 0 0 6px; }
.pin-racun-ime { margin: -4px 0 0; color: var(--siva); font-size: 15px; }
.pin-pike { display: flex; gap: 16px; margin: 10px 0 6px; }
.pin-pike i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--zlatoR); transition: background .15s, transform .15s, border-color .15s; font-style: normal; }
.pin-pike i.polna { background: var(--zlato); border-color: var(--zlato); transform: scale(1.05); }
.pin-pike i.vidna { width: 22px; height: 30px; border-radius: 6px; background: transparent; border-color: var(--zlatoR); color: var(--papir); font: 600 20px/28px var(--ui); text-align: center; }
.pin-okvir.tresi .pin-pike { animation: tresi .42s; }
.pin-vrsta { display: flex; align-items: center; gap: 14px; }
.pin-oko { background: none; border: 1px solid var(--crta2); border-radius: 999px; color: var(--siva); font-size: 14px; padding: 4px 12px; cursor: pointer; }
.pin-oko:hover, .pin-oko[aria-pressed="true"] { color: var(--papir); border-color: var(--zlatoR); }
.pin-korak-email { display: grid; gap: 10px; width: min(320px, 100%); justify-items: stretch; }
.pin-oznaka { text-align: left; font-size: 14px; color: var(--siva); }
.pin-racun { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: 15px; color: var(--siva); }
.pin-racun button { background: none; border: 0; color: var(--zlatoR); cursor: pointer; text-decoration: underline; padding: 2px; font-size: 14px; }
.pin-sporocilo { min-height: 22px; font-size: 16px; color: var(--siva); max-width: 330px; }
.pin-sporocilo.napaka { color: #FF9C9F; }
.tipkovnica { display: grid; grid-template-columns: repeat(3, 74px); gap: 12px 22px; margin-top: 14px; }
.tipkovnica button { width: 74px; height: 74px; border-radius: 50%; border: 1px solid var(--crta2); background: rgba(255, 255, 255, .02); font: 500 30px/1 var(--znak); color: var(--papir); cursor: pointer; transition: background .12s, border-color .12s, transform .08s; display: grid; place-items: center; }
.tipkovnica button:hover { border-color: var(--zlatoR); background: var(--zlatoT); }
.tipkovnica button:active { transform: scale(.95); background: rgba(210, 182, 126, .24); }
.tipkovnica button.prazna { visibility: hidden; }
.tipkovnica button.brisi { border-color: transparent; background: none; font: 600 15px var(--ui); letter-spacing: .12em; color: var(--siva); }
.pin-vnos { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.pin-spodaj { margin-top: 22px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-size: 15px; }
.pin-spodaj button { background: none; border: 0; color: var(--temna); cursor: pointer; letter-spacing: .04em; padding: 4px; }
.pin-spodaj button:hover { color: var(--siva); }
.pin-dobrodoslica { font-family: var(--znak); font-size: 30px; color: var(--papir); animation: pojavi .5s ease both; margin: 0; }
.pin-okvir .obroc { position: absolute; top: -40px; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(210, 182, 126, .08); pointer-events: none; z-index: -1; }
.pin-okvir .obroc::after { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed rgba(210, 182, 126, .08); animation: vrti 120s linear infinite; }
@media (max-height: 640px) { .tipkovnica { grid-template-columns: repeat(3, 62px); gap: 8px 18px; } .tipkovnica button { width: 62px; height: 62px; font-size: 26px; } .pin-okvir .znamka { font-size: 34px; } .pin-okvir .cifra { margin-bottom: 10px; } }

/* ─── zagon in sporočila čez cel zaslon ─── */
.zagon { position: fixed; inset: 0; display: grid; place-items: center; z-index: 5; }
.zagon .znamka { font-size: 30px; opacity: .8; }
.sporocilo-zaslon { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; background: var(--noc); }
.sporocilo-zaslon > div { max-width: 420px; text-align: center; display: grid; gap: 14px; justify-items: center; }
.sporocilo-zaslon h1 { font: 600 28px/1.15 var(--znak); margin: 0; }
.sporocilo-zaslon p { color: var(--siva); margin: 0; font-size: 17px; }

/* ─── ogrodje: stranska (mape), seznam, branje ─── */
.lupina { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--noc); }
.stranska { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(330px, 86vw); background: linear-gradient(180deg, #0D151D, #0A1016); border-right: 1px solid var(--crta); display: flex; flex-direction: column; padding: calc(var(--vrh) + 18px) 12px calc(var(--dno) + 12px); gap: 2px; overflow-y: auto; transform: translateX(-102%); transition: transform .24s cubic-bezier(.2, .8, .2, 1); scrollbar-width: thin; }
.stranska.odprta { transform: none; box-shadow: var(--senca); }
.zavesa { position: fixed; inset: 0; z-index: 39; background: rgba(4, 8, 12, .55); opacity: 0; pointer-events: none; transition: opacity .2s; }
.zavesa.vidna { opacity: 1; pointer-events: auto; }
.stranska .glava-znamke { padding: 2px 10px 14px; display: flex; align-items: center; gap: 12px; }
.stranska .glava-znamke > div { display: grid; gap: 4px; }
.ikona-apl { display: block; border-radius: 22%; flex: 0 0 auto; }
.pin-okvir .ikona-apl { margin-bottom: 4px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.stranska .glava-znamke .znamka { font-size: 22px; }
.stranska .glava-znamke .cifra { font-size: 10px; letter-spacing: .5em; color: var(--zlato2); }
.jaz { display: flex; gap: 10px; align-items: center; padding: 8px 10px 12px; border-bottom: 1px solid var(--crta); margin-bottom: 8px; min-width: 0; }
.jaz b { display: block; font-size: 17px; color: var(--papir); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jaz small { display: block; font-size: 14px; color: var(--siva); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jaz > div { min-width: 0; }
.skupina { font: 600 11.5px var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--temna); padding: 14px 12px 4px; }
.pov { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border-radius: 10px; color: var(--siva); font-size: 17px; font-weight: 600; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; position: relative; text-decoration: none; }
.pov svg { width: 20px; height: 20px; flex: 0 0 20px; opacity: .9; }
/* zlata ploščica (kot ikona aplikacije, vogal 22 %): izbrano zlato s temnim znakom, drugo zlata obroba */
.pov .pl { width: 32px; height: 32px; flex: 0 0 32px; box-sizing: border-box; border-radius: 7px; display: grid; place-items: center; border: 1.5px solid rgba(210, 182, 126, .42); background: rgba(210, 182, 126, .07); color: var(--zlato); }
.pov .pl svg { width: 20px; height: 20px; flex: none; opacity: 1; }
.pov.izbrana .pl { background: var(--zlato); border-color: var(--zlato); color: #0F1720; }
.pov.izbrana .pl svg { stroke-width: 2; }
.pov:hover { background: rgba(255, 255, 255, .04); color: var(--papir); text-decoration: none; }
.pov.izbrana { background: linear-gradient(90deg, rgba(210, 182, 126, .17), rgba(210, 182, 126, .04)); color: var(--papir); }
.pov .ime { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pov .st { margin-left: auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; color: var(--papir); font: 700 14px/22px var(--ui); text-align: center; }
.pov .st.nova { background: var(--zlato); color: #1B1406; font-weight: 800; }
.pov.nab { font-size: 16px; }
.pov.nab small { display: block; font-size: 13px; color: var(--temna); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stranska .noga { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--crta); display: grid; gap: 2px; }

.plosca-seznam { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; }
.glava { display: flex; align-items: center; gap: 4px; padding: calc(var(--vrh) + 6px) 6px 6px; min-height: calc(var(--glava) + var(--vrh)); background: rgba(10, 16, 22, .94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--crta); position: relative; z-index: 5; }
.glava .naslov { min-width: 0; flex: 1; padding: 0 4px; }
.glava .naslov b { display: block; font: 600 21px/1.1 var(--znak); letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glava .naslov small { display: block; font-size: 13.5px; color: var(--siva); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .02em; }
.glava .iskalnik { flex: 1; min-width: 0; }
.glava .iskalnik input { width: 100%; height: 42px; border-radius: 21px; border: 1px solid var(--crta2); background: #0C141C; padding: 0 16px; font-size: 17px; }
.glava .iskalnik input:focus { outline: none; border-color: var(--zlato); }
.glava.izbor { background: #1A2430; }
.glava.izbor .naslov b { font-family: var(--ui); font-size: 20px; }
.filtri { display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--crta); flex: 0 0 auto; }
.filtri::-webkit-scrollbar { display: none; }
.cip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(210, 182, 126, .32); background: transparent; color: var(--siva); font: 600 15px var(--ui); letter-spacing: .02em; cursor: pointer; white-space: nowrap; }
.cip b { font-weight: 800; color: var(--papir); }
.cip.izbran { background: var(--zlato); border-color: var(--zlato); color: #0F1720; }
.cip.izbran b { color: #0F1720; }
.cip:hover { border-color: var(--zlatoR); }

.drsnik { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; position: relative; }
.osvezi-kazalo { position: absolute; left: 50%; top: 6px; width: 38px; height: 38px; margin-left: -19px; border-radius: 50%; background: var(--povrs2); border: 1px solid var(--crta2); display: grid; place-items: center; z-index: 4; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); transform: translateY(-60px); opacity: 0; pointer-events: none; color: var(--zlato); }
.osvezi-kazalo svg { width: 20px; height: 20px; }
.osvezi-kazalo.vrti svg { animation: vrti .8s linear infinite; }
.pasica { margin: 10px 12px 2px; padding: 12px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(210, 182, 126, .12), rgba(210, 182, 126, .05)); border: 1px solid var(--zlatoR); display: flex; gap: 12px; align-items: center; font-size: 16px; }
.pasica svg { color: var(--zlato); flex: 0 0 22px; }
.pasica .razmik { flex: 1; }
.pasica.opozorilo { background: rgba(229, 72, 77, .08); border-color: rgba(229, 72, 77, .35); }
.pasica.opozorilo svg { color: #FF9C9F; }

.sporocila { list-style: none; margin: 0; padding: 0 0 calc(var(--dno) + 96px); }
.vrsta { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px 12px 12px; border-bottom: 1px solid var(--crta); cursor: pointer; position: relative; background: var(--noc); transition: background .12s; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.vrsta:hover { background: #0E1720; }
.vrsta.aktivna { background: #142030; }
.vrsta.izbrana { background: rgba(210, 182, 126, .12); }
.vrsta .avatar { grid-row: 1 / 4; align-self: start; margin-top: 2px; }
.vrsta .od { font-size: 17px; font-weight: 600; color: var(--siva); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vrsta .cas { font-size: 14px; color: var(--temna); white-space: nowrap; text-align: right; align-self: center; }
.vrsta .zad { grid-column: 2 / 3; font-size: 16px; color: var(--siva); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vrsta .ikone { grid-column: 3; grid-row: 2 / 4; display: flex; gap: 4px; align-items: center; justify-content: flex-end; color: var(--temna); }
.vrsta .ikone svg { width: 16px; height: 16px; }
.vrsta .ikone .zvezda { color: var(--pozor); }
.vrsta .odl { grid-column: 2 / 3; font-size: 15px; color: var(--temna); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.vrsta.nova .od, .vrsta.nova .zad { color: var(--papir); font-weight: 700; }
.vrsta.nova .cas { color: var(--zlato2); font-weight: 700; }
.vrsta.nova::before { content: ''; position: absolute; left: 3px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--zivo); }   /* rdeča pika: samo novo */
.vrsta .podlaga { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 22px; font-weight: 700; z-index: -1; }
.vrsta.vlece { transition: none; z-index: 1; }
.vlecenje-ozadje { position: absolute; inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; background: #22321F; color: #9BE7B7; font-weight: 700; letter-spacing: .04em; pointer-events: none; }
.vlecenje-ozadje.levo { background: #2D2618; color: var(--zlato2); }
.vlecenje-ozadje svg { width: 22px; height: 22px; }
.vec-sporocil { display: flex; justify-content: center; padding: 16px; color: var(--temna); }
.prazno { color: var(--temna); font-size: 17px; padding: 60px 24px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.prazno svg { width: 42px; height: 42px; color: rgba(210, 182, 126, .35); }
.prazno b { color: var(--siva); font-size: 19px; font-weight: 600; }

.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 700 16px/1 var(--ui); letter-spacing: .02em; color: #10161D; background: var(--zlato); flex: 0 0 40px; position: relative; }
.avatar.velik { width: 46px; height: 46px; flex-basis: 46px; font-size: 18px; }
.avatar.izbran { background: var(--zlato) !important; color: #1B1406; }
.avatar svg { width: 20px; height: 20px; }

.fab { position: absolute; right: 18px; bottom: calc(var(--dno) + 18px); z-index: 6; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 18px; border-radius: 12px; border: 0; background: var(--zlato); color: #0F1720; font: 700 18px var(--ui); letter-spacing: .03em; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
.fab svg { width: 22px; height: 22px; }
.fab:active { transform: translateY(1px); }

/* ─── branje ─── */
.plosca-branje { position: fixed; inset: 0; z-index: 20; background: var(--noc); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); visibility: hidden; }
.plosca-branje.odprta { transform: none; visibility: visible; }
.plosca-branje .glava .razmik { flex: 1; }
.branje { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; padding: 0 0 calc(var(--dno) + 90px); }
.branje .zadeva { font: 600 26px/1.18 var(--znak); margin: 18px 16px 12px; letter-spacing: .005em; overflow-wrap: anywhere; }
.branje .zadeva .oznaka { vertical-align: middle; margin-left: 8px; font-family: var(--ui); }
.posiljatelj { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 0 12px; padding: 4px 16px 12px; align-items: center; }
.posiljatelj .ime { font-size: 18px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posiljatelj .naslov-e { font-size: 15px; color: var(--siva); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.posiljatelj .cas { font-size: 14px; color: var(--temna); text-align: right; }
.posiljatelj .komu { grid-column: 2 / 4; font-size: 15px; color: var(--temna); background: none; border: 0; padding: 4px 0 0; text-align: left; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podrobnosti { margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px; background: var(--povrs); border: 1px solid var(--crta); font-size: 15px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; }
.podrobnosti dt { color: var(--temna); }
.podrobnosti dd { margin: 0; color: var(--siva); overflow-wrap: anywhere; }
.slike-pasica { margin: 0 16px 10px; padding: 8px 8px 8px 14px; border-radius: 10px; background: var(--povrs); border: 1px solid var(--crta); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15px; color: var(--siva); }
.slike-pasica .razmik { flex: 1; }
.vsiljena-pasica { margin: 0 16px 12px; padding: 10px 14px; border-radius: 10px; background: rgba(232, 176, 75, .08); border: 1px solid rgba(232, 176, 75, .35); color: #F3C267; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 15px; }
.vsiljena-pasica .razmik { flex: 1; }
.list { margin: 0 10px; border-radius: 14px; overflow: hidden; background: #FFFFFF; }
.list iframe { display: block; width: 100%; border: 0; height: 120px; background: #FFFFFF; }
.besedilo { margin: 0 16px; font: 400 17px/1.6 var(--serif); color: var(--papir); white-space: pre-wrap; overflow-wrap: anywhere; }
.besedilo a { color: var(--zlato2); text-decoration: underline; text-decoration-color: rgba(230, 207, 156, .4); }
.besedilo .citat { display: block; color: var(--siva); border-left: 2px solid var(--crta2); padding-left: 10px; margin: 2px 0; }
.priponke { display: grid; gap: 8px; margin: 16px; }
.priponka { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 12px; background: var(--povrs); border: 1px solid var(--crta); cursor: pointer; text-align: left; color: var(--papir); width: 100%; }
.priponka:hover { border-color: var(--zlatoR); }
.priponka .vrsta-dat { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: var(--zlatoT); color: var(--zlato2); font: 800 11px var(--ui); letter-spacing: .06em; flex: 0 0 38px; }
.priponka .ime-dat { min-width: 0; flex: 1; }
.priponka .ime-dat b { display: block; font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.priponka .ime-dat small { color: var(--temna); font-size: 14px; }
.priponka.nalaga { opacity: .6; pointer-events: none; }
.odgovori { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; gap: 8px; justify-content: center; padding: 10px 12px calc(var(--dno) + 12px); background: linear-gradient(180deg, rgba(10, 16, 22, 0), rgba(10, 16, 22, .94) 34%); }
.odgovori .gumb { flex: 1; max-width: 200px; min-height: 46px; border-radius: 23px; background: var(--povrs2); }
.izberi-pismo { flex: 1; display: grid; place-items: center; color: var(--temna); text-align: center; padding: 24px; }
.izberi-pismo .znamka { font-size: 22px; opacity: .45; display: block; margin-bottom: 12px; }
.nalagam { display: grid; place-items: center; padding: 60px 0; }

/* ─── pisanje ─── */
.pisanje { position: fixed; inset: 0; z-index: 50; background: var(--noc); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); visibility: hidden; }
.pisanje.odprta { transform: none; visibility: visible; }
.pisanje .glava .naslov b { font-size: 20px; }
.pisanje .telo { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0 calc(var(--dno) + 20px); }
.polje { display: flex; align-items: flex-start; gap: 8px; padding: 6px 14px; border-bottom: 1px solid var(--crta); min-height: 52px; }
.polje > label { flex: 0 0 auto; min-width: 46px; color: var(--temna); font-size: 16px; padding-top: 11px; }
.polje select, .polje input.gol { flex: 1; min-width: 0; min-height: 40px; border: 0; background: none; font-size: 17px; padding: 6px 0; }
.polje select { color: var(--papir); }
.polje select option { background: var(--povrs); }
.polje input.gol:focus, .polje select:focus { outline: none; }
.polje .razsiri { flex: 0 0 auto; align-self: center; background: none; border: 0; color: var(--siva); font: 600 15px var(--ui); cursor: pointer; padding: 6px; }
.prejemniki { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; position: relative; }
.prejemniki input { flex: 1; min-width: 120px; min-height: 36px; border: 0; background: none; font-size: 17px; padding: 4px 0; }
.prejemniki input:focus { outline: none; }
.prejemnik { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 32px; padding: 0 4px 0 12px; border-radius: 16px; background: var(--povrs2); border: 1px solid var(--crta2); font-size: 15px; cursor: default; }
.prejemnik.slab { border-color: rgba(229, 72, 77, .6); color: #FF9C9F; }
.prejemnik span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prejemnik button { width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .06); color: var(--siva); cursor: pointer; display: grid; place-items: center; padding: 0; }
.prejemnik button svg { width: 14px; height: 14px; }
.predlogi { position: absolute; left: 0; right: 0; top: 100%; z-index: 10; background: var(--povrs2); border: 1px solid var(--crta2); border-radius: 12px; box-shadow: var(--senca); max-height: 280px; overflow-y: auto; margin-top: 4px; }
.predlog { display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px 12px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--papir); }
.predlog:hover, .predlog.izbran { background: rgba(210, 182, 126, .12); }
.predlog .avatar { width: 32px; height: 32px; flex-basis: 32px; font-size: 13px; }
.predlog b { display: block; font-size: 16px; font-weight: 600; }
.predlog small { display: block; font-size: 14px; color: var(--siva); }
.predlog .vl { margin-left: auto; font-size: 13px; color: var(--temna); }
.skp-namig { padding: 6px 14px; font-size: 14px; color: var(--temna); border-bottom: 1px solid var(--crta); }
.pisanje textarea.besedilo-v { display: block; width: 100%; min-height: 40vh; border: 0; background: none; resize: none; padding: 14px; font: 400 17px/1.55 var(--serif); color: var(--papir); }
.pisanje textarea.besedilo-v:focus { outline: none; }
.dodane { display: grid; gap: 8px; padding: 6px 14px 10px; }
.dodana { display: flex; gap: 10px; align-items: center; padding: 8px 6px 8px 12px; border-radius: 10px; background: var(--povrs); border: 1px solid var(--crta); }
.dodana .ime-dat { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dodana small { color: var(--temna); }
.pisanje .noga-pisanja { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--crta); }
.pisanje .noga-pisanja .razmik { flex: 1; }
.pisanje .noga-pisanja small { color: var(--temna); }

/* ─── ekipa in nastavitve ─── */
.pogled { position: fixed; inset: 0; z-index: 30; background: var(--noc); display: flex; flex-direction: column; }
.pogled .vsebina { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 0 calc(var(--dno) + 110px); }
.kartica { margin: 12px; padding: 14px 16px; border-radius: var(--r2); background: linear-gradient(180deg, var(--povrs), rgba(17, 26, 35, .86)); border: 1px solid var(--crta); }
.kartica > h2 { font: 600 22px/1.15 var(--znak); margin: 0 0 4px; }
.kartica > p { margin: 4px 0 10px; color: var(--siva); font-size: 16px; }
.kartica .dejanja { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.produkcija > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.produkcija > header h2 { font: 600 22px/1.15 var(--znak); margin: 0; min-width: 0; flex: 1; }
.produkcija .koda { font: 600 13px var(--ui); letter-spacing: .14em; color: var(--temna); }
.vloge { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 6px; }
.clan { display: flex; gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--crta); cursor: pointer; }
.clan:first-of-type { border-top: 0; }
.clan .potrdi { width: 24px; height: 24px; border-radius: 7px; border: 1.5px solid var(--crta2); display: grid; place-items: center; flex: 0 0 24px; color: transparent; }
.clan .potrdi svg { width: 16px; height: 16px; }
.clan.izbran .potrdi { background: var(--zlato); border-color: var(--zlato); color: #1B1406; }
.clan .podatki { min-width: 0; flex: 1; }
.clan .podatki b { display: block; font-size: 17px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan .podatki small { display: block; font-size: 14px; color: var(--siva); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan .vl { font-size: 14px; color: var(--zlato2); white-space: nowrap; text-align: right; }
.clan .pisi-enemu { flex: 0 0 auto; }
.spodnja-vrstica { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; padding: 10px 14px calc(var(--dno) + 12px); background: rgba(13, 20, 27, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--crta); display: flex; gap: 10px; align-items: center; }
.spodnja-vrstica .razmik { flex: 1; }
.spodnja-vrstica .gumb { min-height: 48px; }
.nastavitev { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--crta); }
.nastavitev:first-of-type { border-top: 0; }
.nastavitev .opis { flex: 1; min-width: 0; }
.nastavitev .opis b { display: block; font-size: 17px; font-weight: 600; }
.nastavitev .opis small { display: block; font-size: 15px; color: var(--siva); }
.skupni-nab { display: grid; gap: 10px; }
.skupni-nab .vrstica { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dostopi { display: flex; gap: 6px; flex-wrap: wrap; }
.navodilo { margin: 8px 0 0; padding-left: 20px; color: var(--siva); font-size: 16px; }
.navodilo li { margin: 4px 0; }

/* ─── pogovorna okna, slika, sporočilce ─── */
.okno-ozadje { position: fixed; inset: 0; z-index: 80; background: rgba(4, 8, 12, .62); display: grid; place-items: center; padding: 16px; animation: pojavi .15s ease both; }
.okno { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--povrs); border: 1px solid var(--crta2); border-radius: 18px; padding: 18px; box-shadow: var(--senca); display: grid; gap: 12px; }
.okno h2 { font: 600 22px/1.2 var(--znak); margin: 0; }
.okno p { margin: 0; color: var(--siva); font-size: 17px; }
.okno .dejanja { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.meni { position: fixed; z-index: 85; min-width: 220px; background: var(--povrs2); border: 1px solid var(--crta2); border-radius: 14px; box-shadow: var(--senca); padding: 6px; display: grid; animation: pojavi .12s ease both; }
.meni button { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; border: 0; background: none; border-radius: 10px; text-align: left; cursor: pointer; font-size: 17px; color: var(--papir); }
.meni button:hover { background: rgba(255, 255, 255, .06); }
.meni button svg { width: 20px; height: 20px; color: var(--siva); }
.slika-ogled { position: fixed; inset: 0; z-index: 88; background: rgba(0, 0, 0, .92); display: flex; flex-direction: column; }
.slika-ogled .glava { background: transparent; border: 0; }
.slika-ogled .glava .naslov b { font-family: var(--ui); font-size: 17px; }
.slika-ogled .platno { flex: 1; min-height: 0; display: grid; place-items: center; padding: 8px; }
.slika-ogled img { max-width: 100%; max-height: 100%; object-fit: contain; }
.zdravica { position: fixed; left: 50%; bottom: calc(var(--dno) + 92px); z-index: 95; transform: translateX(-50%); display: flex; gap: 14px; align-items: center; max-width: calc(100vw - 24px); min-height: 48px; padding: 8px 8px 8px 18px; border-radius: 14px; background: #ECE5D3; color: #141A21; font-size: 17px; font-weight: 600; box-shadow: var(--senca); animation: pojavi .18s ease both; }
.zdravica.napaka { background: #3A1618; color: #FFD4D6; border: 1px solid rgba(229, 72, 77, .5); }
.zdravica button { border: 0; background: none; color: #7A5A1E; font: 800 16px var(--ui); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: 8px 10px; border-radius: 8px; }
.zdravica.napaka button { color: #FFB1B4; }
.zdravica span { min-width: 0; }
.brez-povezave { position: fixed; left: 0; right: 0; top: 0; z-index: 70; padding: calc(var(--vrh) + 4px) 12px 4px; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: .04em; background: #5B2124; color: #FFD4D6; }

/* ─── širok zaslon: mape | seznam | branje ─── */
@media (min-width: 900px) {
  .lupina { grid-template-columns: 280px minmax(330px, 400px) minmax(0, 1fr); }
  .stranska { position: relative; transform: none; width: auto; z-index: 2; box-shadow: none; padding-top: 20px; }
  .zavesa { display: none; }
  .glava [data-a="meni"] { display: none; }
  .plosca-seznam { border-right: 1px solid var(--crta); }
  .plosca-branje { position: relative; inset: auto; transform: none; visibility: visible; z-index: 1; transition: none; }
  .plosca-branje .glava [data-a="nazaj"] { display: none; }
  .pogled { position: relative; inset: auto; z-index: 1; grid-column: 2 / 4; }
  .lupina.v-pogledu .plosca-seznam, .lupina.v-pogledu .plosca-branje { display: none; }
  .spodnja-vrstica { position: sticky; }
  .pisanje { inset: auto 24px 0 auto; width: min(640px, calc(100vw - 48px)); height: min(720px, calc(100vh - 40px)); border: 1px solid var(--crta2); border-bottom: 0; border-radius: 16px 16px 0 0; box-shadow: var(--senca); }
  .pisanje textarea.besedilo-v { min-height: 280px; }
  .fab { bottom: 22px; }
  .zdravica { bottom: 28px; }
  .branje .zadeva { font-size: 30px; margin: 24px 24px 14px; }
  .posiljatelj, .podrobnosti, .slike-pasica, .vsiljena-pasica { margin-left: 24px; margin-right: 24px; }
  .posiljatelj { padding-left: 24px; padding-right: 24px; margin: 0; }
  .list { margin: 0 20px; }
  .besedilo { margin: 0 24px; }
  .priponke { margin: 16px 24px; }
}
@media (min-width: 1500px) { .lupina { grid-template-columns: 300px 440px minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .stranska, .plosca-branje, .pisanje { transition: none; } }

/* ─── dodatki: barve krogov, zvezdica, vlečenje, iskanje ─── */
.avatar[data-barva="0"] { background: #D2B67E; } .avatar[data-barva="1"] { background: #5AA9FF; } .avatar[data-barva="2"] { background: #FF8A5B; }
.avatar[data-barva="3"] { background: #7BD88F; } .avatar[data-barva="4"] { background: #F5C451; } .avatar[data-barva="5"] { background: #C792EA; }
.avatar[data-barva="6"] { background: #4FD1C5; } .avatar[data-barva="7"] { background: #FF6B9A; } .avatar[data-barva="8"] { background: #B8C4D6; }
.avatar[data-barva="9"] { background: #F6AD55; }
.ik.zvezda { color: var(--pozor); fill: currentColor; }
.sporocila { position: relative; }
.vrsta.vlece { z-index: 2; }
.vlecenje-ozadje { inset: auto 0 auto 0; z-index: 1; }
.glava .iskalnik input::-webkit-search-cancel-button { filter: invert(.7); }
.pasica .ikg { width: 36px; height: 36px; flex-basis: 36px; }
.prazno span { color: var(--temna); font-size: 16px; max-width: 420px; }
.kartica .jaz { border-bottom: 0; padding: 4px 0; margin: 0; }
.vsebina > .prazno { padding: 24px; }
.pisanje .glava .gumb.glavni { margin-left: 4px; }
.pisanje .glava .gumb.glavni svg { width: 18px; height: 18px; }
.izberi-pismo .znamka { display: block; }

/* ─── priloge kot mediji (mediji.js), velike datoteke, forum (forum.js) ─── */
.priloge-pisma { margin: 14px 16px 0; }
.priloge-pisma:empty { display: none; }
@media (min-width: 900px) { .priloge-pisma { margin: 16px 24px 0; } }
.dodana .predogled, .dodana .vrsta-dat { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 7px; object-fit: cover; }
.dodana .vrsta-dat { display: grid; place-items: center; background: var(--zlatoT); color: var(--zlato2); font: 800 10.5px var(--ui); letter-spacing: .05em; }
.dodana .ime-dat { display: grid; gap: 3px; }
.dodana .ime-dat > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dodana .ime-dat small { color: var(--zlato2); font-size: 13.5px; }
.dodana .ime-dat small.napaka-dat { color: #FF9C9F; }
.dodana.napaka { border-color: rgba(229, 72, 77, .45); }
.dodana .potek { display: block; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dodana .potek i { display: block; height: 100%; background: var(--zlato); transition: width .2s; }
.pogled.fo { padding: 0; }
.forum-uvod { margin: 14px 16px 4px; color: var(--siva); font-size: 16px; }
.forum-sobe { display: grid; gap: 0; }
.forum-soba { display: flex; align-items: center; gap: 12px; width: calc(100% - 24px); text-align: left; color: var(--papir); cursor: pointer; font: inherit; }
.forum-soba:hover { border-color: var(--zlatoR); }
.forum-soba .opis { flex: 1; min-width: 0; display: grid; gap: 4px; }
.forum-soba .opis b { font: 600 21px/1.15 var(--znak); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-soba .opis small { display: flex; align-items: center; gap: 6px; color: var(--temna); font-size: 14.5px; }
.forum-soba .opis small svg { width: 16px; height: 16px; flex: 0 0 16px; margin-left: 6px; }
.forum-soba .opis .koda { letter-spacing: .14em; font-weight: 600; }
.forum-soba .opis small.zadnje { color: var(--siva); }
.forum-soba .st { min-width: 26px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--zivo); color: #fff; font: 800 13px/24px var(--ui); text-align: center; }
.forum-soba.nova .opis b { color: #fff; }