/* =========================================================
   RESS STUDIO — novi izgled admin aplikacije (okt 2026)
   Sloj preko admin.css (+ desktop.css). admin.css se ne menja:
   klasičan izgled = studio.css/studio.js se ne učitaju
   (Opšta podešavanja → Izgled, localStorage "ress_skin"="classic").
   ========================================================= */

:root {
  --bg-base: #F5F5F7;
  --bg-elevated: #FFFFFF;
  --bg-tertiary: #EEEEF0;
  --bg-card: #FFFFFF;
  --border-soft: rgba(0,0,0,.07);
  --border-glass: rgba(0,0,0,.07);
  --text-main: #111113;
  --text-muted: #86868B;
  --text-dim: rgba(60,60,67,.32);
  --text-secondary: #86868B;
  --card-bg: #FFFFFF;
  --orange: #FF8A00;
  --orange-dim: rgba(255,138,0,.14);
  --on-accent: #1A0F00;
  --red: #FF3B30;
  --green: #34C759;
  --blue: #007AFF;
  --purple: #AF52DE;
  --hero-bg: #FFF4E6;
  --hero-line: rgba(255,138,0,.30);
  --fill: rgba(0,0,0,.045);
  --input-bg: rgba(0,0,0,.045);
  --aura-1: transparent; --aura-2: transparent;
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px -12px rgba(0,0,0,.12);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.25);
  --bar: rgba(245,245,247,.82);
  --font-d: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Onest", "Segoe UI", sans-serif;
  --st-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Onest", "Segoe UI", sans-serif;
  --ease: cubic-bezier(.25,.8,.25,1);
  --ease-apple: cubic-bezier(.32,.72,0,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.36,.64,1);
  --blur-sm: blur(20px) saturate(180%);
  --blur-md: blur(24px) saturate(180%);
  --blur-lg: blur(30px) saturate(180%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base: #0A0A0B; --bg-elevated: #151517; --bg-tertiary: #1D1D20; --bg-card: #151517; --card-bg: #151517;
    --border-soft: rgba(255,255,255,.075); --border-glass: rgba(255,255,255,.075);
    --text-main: #F5F5F7; --text-muted: #8E8E93; --text-dim: rgba(235,235,245,.3); --text-secondary: #8E8E93;
    --orange: #FF8A00; --orange-dim: rgba(255,138,0,.16);
    --red: #FF453A; --green: #30D158; --blue: #0A84FF; --purple: #BF5AF2;
    --hero-bg: #1E150B; --hero-line: rgba(255,138,0,.28);
    --fill: rgba(255,255,255,.06); --input-bg: rgba(255,255,255,.06);
    --shadow-sm: none; --shadow-md: 0 12px 30px -14px rgba(0,0,0,.8); --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.9);
    --bar: rgba(10,10,11,.8);
  }
}
:root[data-theme="dark"] {
  --bg-base: #0A0A0B; --bg-elevated: #151517; --bg-tertiary: #1D1D20; --bg-card: #151517; --card-bg: #151517;
  --border-soft: rgba(255,255,255,.075); --border-glass: rgba(255,255,255,.075);
  --text-main: #F5F5F7; --text-muted: #8E8E93; --text-dim: rgba(235,235,245,.3); --text-secondary: #8E8E93;
  --orange: #FF8A00; --orange-dim: rgba(255,138,0,.16);
  --red: #FF453A; --green: #30D158; --blue: #0A84FF; --purple: #BF5AF2;
  --hero-bg: #1E150B; --hero-line: rgba(255,138,0,.28);
  --fill: rgba(255,255,255,.06); --input-bg: rgba(255,255,255,.06);
  --shadow-sm: none; --shadow-md: 0 12px 30px -14px rgba(0,0,0,.8); --shadow-lg: 0 30px 70px -20px rgba(0,0,0,.9);
  --bar: rgba(10,10,11,.8);
}
:root[data-accent="blue"]   { --orange:#0A84FF; --orange-dim:rgba(10,132,255,.15); --on-accent:#fff; --hero-bg:color-mix(in srgb,#0A84FF 10%,var(--bg-base)); --hero-line:rgba(10,132,255,.3); }
:root[data-accent="green"]  { --orange:#30D158; --orange-dim:rgba(48,209,88,.15); --on-accent:#03210B; --hero-bg:color-mix(in srgb,#30D158 10%,var(--bg-base)); --hero-line:rgba(48,209,88,.3); }
:root[data-accent="pink"]   { --orange:#BF5AF2; --orange-dim:rgba(191,90,242,.15); --on-accent:#fff; --hero-bg:color-mix(in srgb,#BF5AF2 10%,var(--bg-base)); --hero-line:rgba(191,90,242,.3); }
:root[data-accent="yellow"] { --orange:#FFD60A; --orange-dim:rgba(255,214,10,.16); --on-accent:#221B00; --hero-bg:color-mix(in srgb,#FFD60A 10%,var(--bg-base)); --hero-line:rgba(255,214,10,.35); }
:root[data-accent="red"]    { --orange:#FF453A; --orange-dim:rgba(255,69,58,.15); --on-accent:#fff; --hero-bg:color-mix(in srgb,#FF453A 10%,var(--bg-base)); --hero-line:rgba(255,69,58,.3); }

/* ───────────── osnova ───────────── */
html, body { font-family: var(--st-font); letter-spacing: -.01em; }
body::before { display: none; }
.glass-panel::before, .modal::before, .item-front::before, .top-bar::before, .top-bar::after, #mobileNav::before { display: none !important; }
.glass-panel, .modal, .cBox, .loginCard, .loadingBox, .item-front, #pwaPrompt {
  background: var(--bg-elevated); backdrop-filter: none; -webkit-backdrop-filter: none;
}
.glass-panel { border: 1px solid var(--border-soft); border-radius: 20px; box-shadow: var(--shadow-sm); }
.title { font-weight: 700; letter-spacing: -.03em; }
.num, .item-time { font-variant-numeric: tabular-nums; }

input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"],
input[type="time"], input[type="tel"], select, textarea {
  border-radius: 12px; background: var(--fill); border: 1px solid transparent; font-family: var(--st-font);
}
input:focus, select:focus, textarea:focus { background: var(--bg-elevated); border-color: var(--orange); box-shadow: 0 0 0 4px var(--orange-dim); }
input[type="time"] { font-family: var(--st-font); font-variant-numeric: tabular-nums; }
label { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); }

.btn { border-radius: 14px; font-weight: 600; background: var(--fill); border: 0; transition: transform .2s var(--spring), background .2s, opacity .2s; }
.btn:active { transform: scale(.96); opacity: 1; }
.btn.gold, .btn.primary { background: var(--orange); color: var(--on-accent); box-shadow: none; }
.btn.red { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.btn.green { background: color-mix(in srgb, var(--green) 14%, transparent); color: var(--green); }
.ios-switch.on { background: var(--green); box-shadow: none; }
.chip { border-radius: 99px; background: var(--fill); border: 0; }
.chip.sel { background: var(--text-main); color: var(--bg-base); }

/* ───────────── zaglavlje (zamenjuje top-bar na mobilnom) ───────────── */
html.st .top-bar { display: none; }
.wrap { padding-top: calc(10px + env(safe-area-inset-top)); }
#stHead { display: flex; justify-content: space-between; align-items: center; margin: 6px 2px 16px; }
#stHead .d { font-size: 13.5px; color: var(--text-muted); font-weight: 500; }
#stHead .g { font-size: 27px; font-weight: 700; letter-spacing: -.035em; margin-top: 2px; line-height: 1.1; }
#stHead .g span { display: inline-block; animation: stWave 2.4s var(--ease) .6s 1 both; transform-origin: 70% 80%; }
@keyframes stWave { 0%,60%,100% { transform: rotate(0) } 10%,30% { transform: rotate(14deg) } 20%,40% { transform: rotate(-8deg) } }
.st-ib { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--fill); color: var(--text-main);
  display: grid; place-items: center; cursor: pointer; transition: transform .25s var(--spring); }
.st-ib:active { transform: scale(.9); }
.st-ib svg { width: 20px; height: 20px; }
.st-ib .bd { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--bg-base);
  transform: scale(0); transition: transform .4s var(--spring); }
.st-ib .bd.on { transform: scale(1); }
.st-ib.ring svg { animation: stRing 1s var(--ease) 1; transform-origin: 50% 10%; }
@keyframes stRing { 0%,100% { transform: rotate(0) } 15% { transform: rotate(16deg) } 30% { transform: rotate(-14deg) } 45% { transform: rotate(9deg) } 60% { transform: rotate(-5deg) } }

/* mesec + Danas */
#appView .wrap > div:last-child > div:first-child { margin-bottom: 14px !important; }
#appView .wrap > div:last-child > div:first-child > .row { margin-bottom: 6px !important; }
#monthTitle { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text-muted); cursor: pointer; }
#appView .wrap > div:last-child > div:first-child .btn.secondary { background: transparent !important; color: var(--orange); padding: 6px 8px !important; font-size: 14px !important; }
#appView .wrap > div:last-child > div:first-child .btn.secondary svg { display: none; }

/* nedeljna traka */
.week-calendar { gap: 4px; padding: 2px 0 4px; margin: 0; scroll-snap-type: x proximity; }
.week-day { flex: 0 0 calc((100% - 24px) / 7); padding: 8px 0 9px; border-radius: 14px; transition: background .3s var(--ease), color .3s; }
.wd-name { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; margin-bottom: 3px; }
.wd-num { width: auto; height: auto; font-size: 17px; font-weight: 600; border-radius: 0; background: none !important; box-shadow: none !important; transform: none !important; }
.week-calendar { position: relative; }
.week-day { position: relative; z-index: 1; background: transparent !important; }
.week-day .wd-name, .week-day .wd-num { transition: color .35s var(--ease); }
.week-day.sel .wd-name, .week-day.sel .wd-num { color: var(--bg-base) !important; }
.week-day.today:not(.sel) .wd-num { color: var(--orange); }
.week-day:active { transform: scale(.94); }
/* klizna pozadina — potpis aplikacije (dani + tabovi) */
.st-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 14px; background: var(--text-main); pointer-events: none;
  transition: transform .55s var(--spring), width .45s var(--spring), height .45s var(--spring); }

/* ───────────── HERO v2: puna kartica u boji + prsten ───────────── */
#stHero { position: relative; overflow: hidden; border-radius: 26px; padding: 18px; margin: 14px 0 10px; color: var(--on-accent); border: 0 !important;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, #fff 22%, var(--orange)) 0%, transparent 55%), linear-gradient(160deg, var(--orange), color-mix(in srgb, var(--orange) 78%, #E0301E));
  box-shadow: 0 18px 40px -18px var(--orange); transition: transform .5s var(--ease-out); isolation: isolate; }
/* sjaj: meka svetla mrlja koja lebdi (krug, bez ivica) */
#stHero::after { content: ""; position: absolute; z-index: -1; pointer-events: none; width: 260px; height: 260px; border-radius: 50%; left: -40px; top: -150px;
  background: radial-gradient(closest-side, rgba(255,255,255,.38), rgba(255,255,255,.12) 55%, transparent 100%); filter: blur(6px);
  animation: stSheen 11s ease-in-out infinite alternate; }
@keyframes stSheen { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(120px, 40px) scale(1.15); } 100% { transform: translate(220px, -10px) scale(.95); } }
#stHero.pop { animation: stPop .7s var(--spring); }
@keyframes stPop { 0% { transform: scale(.96); } 100% { transform: scale(1); } }
#stHero .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#stHero .k { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; color: inherit; opacity: .85; letter-spacing: .01em; }
#stHero .k i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: stPulse2 1.8s infinite; }
@keyframes stPulse2 { 0% { box-shadow: 0 0 0 0 rgba(0,0,0,.25) } 70%,100% { box-shadow: 0 0 0 8px transparent } }
#stHero .n { font-size: 24px; font-weight: 800; letter-spacing: -.035em; margin-top: 6px; line-height: 1.1; }
#stHero .s { font-size: 13.5px; margin-top: 4px; opacity: .72; font-weight: 500; }
#stHero .rw { position: relative; width: 84px; height: 84px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#stHero .rw svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
#stHero .rw .b { stroke: rgba(0,0,0,.13); } #stHero .rw .f { stroke: currentColor; }
#stHero .rw svg.rg circle { stroke-width: 4.5; }
#stHero .rw b { position: relative; font-size: 24px; font-weight: 800; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
#stHero .rw small { position: relative; display: block; font-size: 10.5px; font-weight: 700; opacity: .65; margin-top: 2px; line-height: 1; }
#stHero .act { display: flex; gap: 8px; margin-top: 16px; }
#stHero .act a, #stHero .act button { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.12);
  color: inherit; border: 0; cursor: pointer; text-decoration: none; transition: transform .3s var(--spring), background .2s; }
#stHero .act .main { flex: 1; width: auto; border-radius: 23px; background: var(--on-accent); color: var(--orange); font: 700 15px var(--st-font); display: flex; gap: 6px; justify-content: center; align-items: center; }
#stHero .act > *:active { transform: scale(.92); }
#stHero.idle { color: var(--text-main); background: var(--bg-elevated); box-shadow: none; border: 1px solid var(--border-soft) !important; }
#stHero.idle::after { display: none; }
#stHero.idle .k { color: var(--text-muted); opacity: 1; }
#stHero.idle .rw .b { stroke: var(--fill); } #stHero.idle .rw .f { stroke: var(--orange); }
#stHero.idle .rw b { font-size: 16px; margin: 0; }
#stHero.idle .act .main { background: var(--orange); color: var(--on-accent); }
svg.rg circle { fill: none; stroke-width: 5; stroke-linecap: round; }
svg.rg .f { transition: stroke-dashoffset 1.4s var(--ease-out); }

/* statistika v2: ikonica + mali vizual */
#stStats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 10px; }
#stStats > div { position: relative; overflow: hidden; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 20px; padding: 12px 13px 12px; transition: transform .3s var(--spring); }
#stStats > div.tap { cursor: pointer; } #stStats > div.tap:active { transform: scale(.95); }
#stStats .ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--fill); color: var(--text-muted); margin-bottom: 9px; }
#stStats .v { font-size: 22px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
#stStats .l { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
#stStats .seg { display: flex; gap: 3px; margin-top: 9px; height: 4px; }
#stStats .seg i { flex: 1; border-radius: 2px; background: var(--fill); transition: background .5s var(--ease); }
#stStats .seg i.on { background: var(--orange); }
#stStats .mb { height: 4px; border-radius: 2px; background: var(--fill); margin-top: 9px; overflow: hidden; }
#stStats .mb b { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--green); transition: width 1.4s var(--ease-out); }
#stStats .dotp { height: 4px; margin-top: 9px; }
#stStats .hot { background: color-mix(in srgb, var(--orange) 10%, var(--bg-elevated)); border-color: color-mix(in srgb, var(--orange) 30%, transparent); }
#stStats .hot .v, #stStats .hot .ic { color: var(--orange); }
#stStats .hot .ic { background: var(--orange-dim); }
#stStats .hot .dotp { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); position: absolute; top: 14px; right: 14px; margin: 0; animation: stPulse2o 1.8s infinite; }
@keyframes stPulse2o { 0% { box-shadow: 0 0 0 0 var(--orange-dim) } 70%,100% { box-shadow: 0 0 0 9px transparent } }

/* odometar */
.od { display: inline-block; height: 1.15em; overflow: hidden; vertical-align: top; }
.od > span { display: flex; flex-direction: column; transition: transform 1.1s var(--ease-out); }
.od > span > span { height: 1.15em; line-height: 1.15em; }

/* zahtevi v2 */
#stPend:empty { display: none; }
#stPend { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.st-ph { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 4px 0; }
.st-ph span { font-size: 13px; font-weight: 700; }
.st-ph small { font-size: 11.5px; color: var(--text-muted); }
.st-ph small b { color: var(--green); }
.st-rq { position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px; padding: 11px 10px 11px 12px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 20px;
  animation: stIn .55s var(--ease-out) both; transition: transform .45s var(--ease-out), opacity .35s, margin .45s var(--ease-out), height .45s var(--ease-out), padding .45s, border-width .45s; }
.st-rq::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--hp, 0) * 100%); background: color-mix(in srgb, var(--green) 12%, transparent); pointer-events: none; }
.st-rq .m { flex: 1; min-width: 0; position: relative; }
.st-rq .m b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-rq .m small { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; }
.st-rq .m small svg { flex: none; }
.st-rq button { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; flex: none;
  background: var(--fill); color: var(--text-muted); transition: transform .3s var(--spring), background .25s, color .25s; touch-action: none; user-select: none; -webkit-user-select: none; }
.st-rq button.ok { width: 46px; height: 46px; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); }
.st-rq button.ok > svg:not(.rg) { position: relative; z-index: 1; width: 20px; height: 20px; transition: transform .3s var(--spring); }
.st-rq button.ok svg.rg { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); }
.st-rq button.ok svg.rg .b { stroke: transparent; } .st-rq button.ok svg.rg .f { stroke: var(--green); stroke-width: 3.5; transition: none; }
.st-rq button.ok.holding { transform: scale(1.12); }
.st-rq button.ok.fired { background: var(--green); color: #04210C; transform: scale(1); }
.st-rq button.ok.fired > svg:not(.rg) { transform: scale(1.15); }
.st-rq button.no:active { transform: scale(.88); }
.st-rq.nudge { animation: stNudge .5s var(--ease); }
@keyframes stNudge { 20% { transform: translateX(-5px) } 45% { transform: translateX(4px) } 70% { transform: translateX(-2px) } }
.st-rq.gone { opacity: 0; transform: scale(.96); }
.st-more { font-size: 13px; color: var(--orange); font-weight: 600; text-align: center; padding: 2px 0 4px; cursor: pointer; background: none; border: 0; font-family: var(--st-font); }
@keyframes stIn { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }

/* avatar: boja po imenu, blagi gradijent */
.st-av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 12.5px; font-weight: 800; letter-spacing: -.01em;
  color: var(--c); background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 30%, transparent), color-mix(in srgb, var(--c) 14%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }

/* dan klizne levo/desno kad promeniš dan */
#dayList.st-sl > * { animation: stFromR .45s var(--ease-out) both; }
#dayList.st-sr > * { animation: stFromL .45s var(--ease-out) both; }
@keyframes stFromR { from { opacity: 0; transform: translateX(28px) } to { opacity: 1; transform: none } }
@keyframes stFromL { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: none } }
/* traka napretka u redu "u toku" */
.st-lp { height: 3px; margin: 9px 0 -3px 56px; border-radius: 2px; background: var(--fill); overflow: hidden; }
.st-lp::after { content: ""; display: block; height: 100%; width: var(--p); background: var(--orange); border-radius: 2px; animation: stGrow 1.2s var(--ease-out) both; transform-origin: left; }
@keyframes stGrow { from { transform: scaleX(0) } to { transform: scaleX(1) } }
.st-tag.live i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; animation: stBlink 1.4s infinite; }
@keyframes stBlink { 50% { opacity: .25 } }
.st-tag[style*="--c"] { background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }

/* ulazak u aplikaciju: sve se složi talasom */
html.st-boot #stHead, html.st-boot .week-calendar, html.st-boot #stHero, html.st-boot #stStats, html.st-boot #stPend, html.st-boot #appView .wrap > div:last-child > .row {
  animation: stIn .7s var(--ease-out) both; }
html.st-boot .week-calendar { animation-delay: .06s; } html.st-boot #stHero { animation-delay: .12s; } html.st-boot #stStats { animation-delay: .18s; }
html.st-boot #stPend { animation-delay: .24s; } html.st-boot #appView .wrap > div:last-child > .row { animation-delay: .3s; }

/* ───────────── raspored ───────────── */
#appView .wrap > div:last-child > .row { border: 0 !important; padding: 0 !important; margin: 14px 2px 8px !important; }
#appView .wrap > div:last-child > .row .title-sm { font-size: 19px; font-weight: 700; letter-spacing: -.03em; }
#viewToggle, #cntDay { display: none !important; }
#dayList.list { gap: 0; }
#dayList .list-row { background: var(--bg-elevated); border-left: 1px solid var(--border-soft); border-right: 1px solid var(--border-soft); }
#dayList .list-row.st-first { border-top: 1px solid var(--border-soft); border-radius: 20px 20px 0 0; }
#dayList .list-row.st-last { border-bottom: 1px solid var(--border-soft); border-radius: 0 0 20px 20px; }
#dayList .list-row.st-first.st-last { border-radius: 20px; }
#dayList .list-row:not(.st-first) .item-front { box-shadow: inset 0 1px 0 var(--border-soft); }
#dayList .list-row .item-scroll { border-radius: inherit; animation: stIn .5s var(--ease-out) both; }
#dayList .item-front { background: transparent; border: 0; border-radius: inherit; box-shadow: none; padding: 11px 14px; }
#dayList .item-front:active { transform: none; background: var(--fill); }
#dayList .item-actions-scroll { padding: 6px 6px 6px 8px; }
#dayList .item-actions-scroll .btn { border-radius: 14px; }
.st-sec { font-size: 13px; font-weight: 600; color: var(--text-muted); margin: 14px 4px 7px; display: flex; justify-content: space-between; }
.st-sec:first-child { margin-top: 2px; }
.st-r { display: flex; align-items: center; gap: 12px; }
.st-r .tm { width: 44px; flex: none; font-size: 15px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.st-r .tm small { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; margin-top: 1px; }
.st-r .mn { flex: 1; min-width: 0; }
.st-r .mn b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-r .mn small { display: block; font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.st-r .en { flex: none; display: flex; align-items: center; }
.st-tag { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 7px; background: var(--fill); color: var(--text-muted); }
.st-tag.wait { background: var(--orange-dim); color: var(--orange); }
.st-tag.live { background: var(--orange); color: var(--on-accent); }
.st-ok { width: 20px; height: 20px; color: var(--green); }
#dayList .list-row.st-past .st-r { opacity: .42; }
#dayList .list-row.st-live .tm { color: var(--orange); }
.st-now { position: relative; height: 0; z-index: 2; }
.st-now::before { content: ""; position: absolute; left: 6px; right: 6px; top: -1px; height: 2px; background: var(--red); border-radius: 1px;
  transform-origin: left; animation: stDraw .9s var(--ease-out) both; }
.st-now span { position: absolute; left: 0; top: -9px; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--red); padding: 2px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
@keyframes stDraw { from { transform: scaleX(0) } to { transform: scaleX(1) } }
#dayList > .sub { font-size: 12.5px !important; margin-top: 12px !important; color: var(--text-dim); }
#dayList .hint-ico { color: var(--text-dim); }
.skel-item { border-radius: 18px; margin-bottom: 8px; background: var(--fill); }
.empty-state { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 22px; padding: 36px 20px 28px; }
.empty-icon svg { stroke: var(--text-dim); }
.empty-title { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }

/* ───────────── Dynamic Island ───────────── */
#stIsland { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 50%; z-index: 4000; height: 44px; border-radius: 22px;
  background: #000; color: #fff; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 7px; cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.55), inset 0 0 0 .5px rgba(255,255,255,.08);
  transform: translateX(-50%) scale(.5, .4); opacity: 0; pointer-events: none; max-width: calc(100% - 32px);
  transition: transform .55s var(--spring), opacity .25s, width .5s var(--spring); white-space: nowrap; }
#stIsland.on { transform: translateX(-50%) scale(1); opacity: 1; pointer-events: auto; }
#stIsland .st-av { width: 30px; height: 30px; font-size: 11px; }
#stIsland .i-m { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
#stIsland .i-m small { color: rgba(255,255,255,.55); font-weight: 500; margin-left: 4px; }
#stIsland .i-t { font-size: 13.5px; font-weight: 700; color: #FF9F0A; font-variant-numeric: tabular-nums; }
#stIsland svg.rg { width: 28px; height: 28px; flex: none; transform: rotate(-90deg); }
#stIsland svg.rg circle { fill: none; stroke-width: 3; }
#stIsland svg.rg .b { stroke: rgba(255,255,255,.14); }
#stIsland svg.rg .f { stroke: #FF9F0A; stroke-linecap: round; transition: stroke-dashoffset 1s var(--ease-out); }
#stIsland .i-c { opacity: 0; transform: translateY(4px); transition: opacity .3s .15s, transform .4s var(--ease-out) .15s; display: flex; align-items: center; gap: 10px; min-width: 0; }
#stIsland.on .i-c { opacity: 1; transform: none; }

/* leteća kartica (prihvaćen zahtev) */
.st-fly { position: fixed; z-index: 6000; pointer-events: none; margin: 0 !important; box-shadow: 0 20px 50px -15px rgba(0,0,0,.45);
  transition: transform .75s cubic-bezier(.5,0,.1,1), opacity .75s, border-radius .75s; }
.st-land { animation: stLand 1.2s var(--ease-out) both; }
@keyframes stLand { 0% { background: color-mix(in srgb, var(--green) 22%, var(--bg-elevated)); } 100% { background: var(--bg-elevated); } }

/* ───────────── donja traka ───────────── */
#mobileNav { left: 12px; right: 12px; width: auto; max-width: 460px; margin: 0 auto; transform: none; bottom: calc(10px + env(safe-area-inset-bottom));
  height: 62px; border-radius: 31px; padding: 0 8px; background: var(--bar); backdrop-filter: var(--blur-lg); -webkit-backdrop-filter: var(--blur-lg);
  border: 1px solid var(--border-soft); box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); justify-content: space-around; }
#mobileNav.nav-hidden { transform: translateY(120px); }
.mnavBtn { color: var(--text-muted); width: 58px; z-index: 1; }
.mnavBtn svg { width: 24px; height: 24px; transition: transform .45s var(--spring); }
.mnavBtn svg .d { fill: currentColor; fill-opacity: 0; transition: fill-opacity .3s; }
.mnavBtn span.label { font-size: 10px; font-weight: 600; }
.mnavBtn.active { color: var(--orange); }
.mnavBtn.active svg { transform: translateY(-1px) scale(1.06); }
.mnavBtn.active svg .d { fill-opacity: .22; }
#stNavPill { top: 7px; height: 48px !important; border-radius: 24px; background: var(--orange-dim); }
.mnavBtn.plus { width: 48px; height: 48px; transform: none; margin: 0; background: var(--orange); color: var(--on-accent); box-shadow: 0 8px 18px -8px var(--orange); }
.mnavBtn.plus:active { transform: scale(.9); }
.mnavBtn.plus:hover { transform: none; }
.mnavBtn.plus svg { transition: transform .45s var(--spring); }
.mnavBtn.plus:active svg { transform: rotate(90deg); }
.mnavBtn .badge { border-color: var(--bg-elevated); box-shadow: none; }
.wrap { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

/* ───────────── prozori (sheet) ───────────── */
/* ekran ispod otvorenog prozora se zamuti i potamni → prozor je u fokusu */
.ov { background: rgba(0,0,0,.42); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.modal { position: relative; border-radius: 28px; border: 0; box-shadow: var(--shadow-lg); }
.mhead { border-bottom: 0; padding: 16px 18px 8px; }
#mt { font-size: 17px !important; font-weight: 700 !important; letter-spacing: -.02em; }
.mbody { padding: 10px 18px 22px; }
@media (max-width:600px) {
  .modal { border-radius: 28px 28px 0 0; }
  /* ručica gore, naziv ispod nje (ranije su se preklapali) */
  .modal::after { top: 0; margin-top: 7px; width: 38px; height: 5px; background: var(--text-dim); }
  .mhead { padding-top: 24px; }
}
@keyframes slideUpSheet { from { transform: translateY(100%) } to { transform: translateY(0) } }
@keyframes slideUpModal { from { opacity: 0; transform: translateY(24px) scale(.97) } to { opacity: 1; transform: none } }
.ov.show .modal { animation: slideUpModal .5s var(--ease-out); }
@media (max-width:600px) { .ov.show .modal { animation: slideUpSheet .5s var(--ease-apple); } }
.mbody .item-front { border: 1px solid var(--border-soft); border-radius: 18px; box-shadow: none; }
.mbody > div > .item-scroll, .mbody .list > .item-scroll { animation: stIn .45s var(--ease-out) both; }
.mbody a.btn[href^="https://wa.me"] { background: #25D366 !important; }
.cBox { border-radius: 24px; border: 0; }
#cOv { background: rgba(0,0,0,.42); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); }
.slot { border-radius: 12px; background: var(--fill); border: 1px solid transparent; font-variant-numeric: tabular-nums; font-weight: 600; }
.slot.sel { background: var(--orange); color: var(--on-accent); border-color: transparent; box-shadow: none; }
.dayBtn.sel { background: var(--orange); color: var(--on-accent); box-shadow: none; }

/* toast */
#opToast { background: #000; color: #fff; border-radius: 22px; padding: 12px 18px; font-size: 14px; }
#undoToast { background: #1C1C1E; color: #fff; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
#undoToast .ut-btn { color: var(--on-accent); }

/* prijava */
.loginCard { border-radius: 28px; border: 1px solid var(--border-soft); box-shadow: var(--shadow-md); }
.loginCard > img { box-shadow: none !important; border-radius: 18px !important; }
.loginCard .glass-panel { background: var(--fill) !important; border: 0; box-shadow: none; }
#loginBtn { border-radius: 16px !important; }

/* podešavanja: jedna grupisana lista (iOS stil) */
#mb .list:has(> .item-scroll > .item-front[style*="gap:16px"]) { gap: 0; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 20px; overflow: hidden; }
#mb .list > .item-scroll > .item-front[style*="gap:16px"] { border: 0; border-radius: 0; background: transparent !important; padding: 12px 14px !important; gap: 13px !important; }
#mb .list > .item-scroll + .item-scroll > .item-front[style*="gap:16px"] { box-shadow: inset 0 1px 0 var(--border-soft); }
#mb .list > .item-scroll > .item-front[style*="gap:16px"] > div:first-child { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--orange); color: var(--on-accent) !important; }
#mb .list > .item-scroll > .item-front[style*="gap:16px"] > div:first-child svg { width: 19px; height: 19px; }
#mb .list > .item-scroll > .item-front[style*="gap:16px"]::after { content: ""; margin-left: auto; width: 8px; height: 8px; flex: none; border-right: 2px solid var(--text-dim); border-top: 2px solid var(--text-dim); transform: rotate(45deg); }
#mb .list > .item-scroll > .item-front[style*="gap:16px"] div[style*="font-size:16px"] { font-size: 15.5px !important; color: var(--text-main) !important; }
#mb .list > .item-scroll > .item-front[style*="rgba(59,130,246"] > div:first-child { background: var(--blue); color: #fff !important; }
.st-logout { width: 100%; margin-top: 14px; padding: 14px; border: 1px solid var(--border-soft); border-radius: 18px; background: var(--bg-elevated);
  color: var(--red); font: 600 15.5px var(--st-font); cursor: pointer; }

#stHero .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ───────────── točkić za vreme ───────────── */
input[data-stw] { cursor: pointer; caret-color: transparent; color: var(--text-main) !important; font-weight: 600 !important; letter-spacing: -.01em !important; text-align: center; }
input[data-stw].st-set { animation: stSet .7s var(--ease-out); }
@keyframes stSet { 0% { box-shadow: 0 0 0 0 var(--orange); background: var(--orange-dim); } 100% { box-shadow: 0 0 0 10px transparent; } }
#stWheel { position: fixed; inset: 0; z-index: 30000; background: rgba(0,0,0,0); display: flex; align-items: flex-end; justify-content: center; pointer-events: none; transition: background .35s; }
#stWheel.on { background: rgba(0,0,0,.42); pointer-events: auto; }
.sw-sh { width: 100%; max-width: 440px; background: var(--bg-elevated); border-radius: 30px 30px 0 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .5s var(--ease-apple); box-shadow: 0 -20px 60px -20px rgba(0,0,0,.5); }
#stWheel.on .sw-sh { transform: none; }
@media (min-width: 600px) { #stWheel { align-items: center; } .sw-sh { border-radius: 30px; padding-bottom: 18px; } }
.sw-sh::before { content: ""; display: block; width: 38px; height: 5px; border-radius: 3px; background: var(--text-dim); margin: 0 auto 8px; }
.sw-hd { display: flex; align-items: center; justify-content: space-between; }
.sw-hd button { border: 0; background: none; font: 600 16px var(--st-font); color: var(--text-muted); padding: 8px 4px; cursor: pointer; }
.sw-hd .sw-ok { color: var(--orange); font-weight: 700; }
.sw-hd b { font-size: 16px; font-weight: 700; letter-spacing: -.01em; max-width: 50%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-big { text-align: center; font-size: 46px; font-weight: 800; letter-spacing: -.05em; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.sw-big i { font-style: normal; color: var(--orange); animation: stBlink 1.2s infinite; margin: 0 2px; }
.sw-body { position: relative; display: flex; justify-content: center; gap: 4px; height: 220px; perspective: 600px; }
.sw-band { position: absolute; left: 0; right: 0; top: 88px; height: 44px; border-radius: 14px; background: var(--fill); pointer-events: none; }
.sw-col { position: relative; width: 92px; height: 220px; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); transform-style: preserve-3d; }
.sw-col::-webkit-scrollbar { display: none; }
.sw-pad { height: 88px; }
.sw-it { height: 44px; line-height: 44px; text-align: center; scroll-snap-align: center; font-size: 25px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; cursor: pointer; transform-origin: 50% 50% -60px; will-change: transform; }
.sw-sep { align-self: center; font-size: 25px; font-weight: 700; color: var(--text-muted); z-index: 1; }
.sw-q { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; }
.sw-q::-webkit-scrollbar { display: none; }
.sw-q button { flex: none; border: 0; border-radius: 99px; padding: 8px 13px; background: var(--fill); color: var(--text-main); font: 600 13px var(--st-font); font-variant-numeric: tabular-nums; cursor: pointer; transition: transform .25s var(--spring); }
.sw-q button:active { transform: scale(.92); }

/* ───────────── PIN: izbor naloga + tastatura ───────────── */
#pinScreen { background: var(--bg-base); }
#pinScreen .ps-logo img { height: 74px; border-radius: 20px; box-shadow: 0 16px 40px -14px var(--orange); }
#pinScreen .ps-logo h2 { font-size: 28px; font-weight: 800; letter-spacing: -.04em; }
#pinScreen .ps-glass { background: var(--bg-elevated); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--border-soft); border-radius: 26px; box-shadow: var(--shadow-md); }
.ps-item { border-radius: 18px; transition: transform .3s var(--spring), background .2s; }
.ps-item:active { transform: scale(.94); }
.pa-av { box-shadow: none; font-weight: 800; }
.pa-av.lg { width: 64px; height: 64px; box-shadow: 0 10px 24px -10px rgba(0,0,0,.5); }
.ps-btn-add { border-radius: 18px; background: var(--orange); color: var(--on-accent); box-shadow: 0 12px 26px -12px var(--orange); }
#pinSheetOv { background: rgba(0,0,0,.45); }
#pinSheet { padding: 0; gap: 0; background: var(--bg-elevated); border-radius: 34px 34px 0 0; padding-bottom: env(safe-area-inset-bottom, 12px); box-shadow: 0 -30px 80px -20px rgba(0,0,0,.6); }
#pinSheet .sh-handle { background: var(--text-dim); margin: 9px auto 4px; }
.sh-loc-card, .sh-dots-card, .sh-numpad-card { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; box-shadow: none; border-radius: 0; }
.sh-loc-card { justify-content: center; flex-direction: column; text-align: center; gap: 8px; padding: 10px 16px 0; }
.sh-loc-card .pa-av.sm { width: 56px; height: 56px; font-size: 19px; border-radius: 50%; box-shadow: 0 10px 24px -10px rgba(0,0,0,.45); }
.sh-loc-card .sh-name { color: var(--text-main); text-shadow: none; font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.sh-loc-card .sh-sub { color: var(--text-muted); font-size: 13px; }
.sh-dots-card { padding: 14px 16px 8px; }
.sh-dots-label { color: var(--text-muted); letter-spacing: .02em; text-transform: none; font-size: 13px; font-weight: 600; }
#pinSheet .sh-dots { gap: 16px; }
.sh-dot { width: 14px; height: 14px; background: transparent; border: 2px solid var(--text-dim); transition: background .2s, border-color .2s, transform .35s var(--spring), width .35s var(--spring), border-radius .35s; }
.sh-dot.on { background: var(--orange); border-color: var(--orange); transform: scale(1.15); box-shadow: 0 0 0 5px var(--orange-dim); }
.sh-dot.success { background: var(--green) !important; border-color: var(--green) !important; box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 25%, transparent) !important; }
.sh-numpad-card { padding: 6px 16px 12px; }
#pinSheet .sh-numpad { grid-template-columns: repeat(3, 76px); gap: 14px 26px; }
.pk { position: relative; overflow: hidden; width: 76px; height: 76px; background: var(--fill); border: 0; box-shadow: none; transition: transform .25s var(--spring), background .15s; }
.pk:active { transform: scale(.9); background: var(--orange-dim); }
.pk.back { background: transparent; }
.pk-num { color: var(--text-main); text-shadow: none; font-size: 30px; font-weight: 500; letter-spacing: -.02em; }
.pk-sub { color: var(--text-muted); font-size: 9px; font-weight: 700; letter-spacing: .16em; margin-top: 1px; }
.pk-wave { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; border: 2px solid var(--orange); pointer-events: none; animation: pkWave .55s var(--ease-out) forwards; }
@keyframes pkWave { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.25); opacity: 0; } }
#pinSheet .sh-forgot { color: var(--orange); font-weight: 600; font-size: 14px; margin-top: 4px; }

/* prijava: kartica bez stakla, ulaz kao pin */
#loginView { background: var(--bg-base); }
.loginCard { background: var(--bg-elevated); padding: 34px 24px 26px; animation: stIn .7s var(--ease-out) both; }
.loginCard > img { height: 64px !important; box-shadow: 0 16px 40px -14px var(--orange) !important; border-radius: 18px !important; }
.loginCard .title { font-size: 28px !important; font-weight: 800; letter-spacing: -.04em; }
.loginCard .glass-panel { padding: 4px !important; border-radius: 18px !important; }
.loginCard .glass-panel input { font-size: 16px !important; }
.loginCard .glass-panel input#u { border-bottom: 1px solid var(--border-soft) !important; border-radius: 14px 14px 0 0 !important; }
#loginBtn { height: 54px !important; border-radius: 18px !important; font-size: 17px !important; box-shadow: 0 14px 28px -14px var(--orange); }

/* ───────────── DETALJI TERMINA ───────────── */
.sd { animation: stIn .45s var(--ease-out) both; }
.sd-hd { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 0 16px; }
.st-av.xl { width: 78px; height: 78px; font-size: 26px; margin-bottom: 12px; animation: sdPop .7s var(--spring) both; }
@keyframes sdPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.sd-n { font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
.sd-ph { font-size: 15px; color: var(--text-muted); text-decoration: none; margin-top: 3px; font-variant-numeric: tabular-nums; }
.sd-st { margin-top: 10px; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 99px; background: var(--fill); color: var(--text-muted); }
.sd-st.ok { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); }
.sd-st.wait { background: var(--orange-dim); color: var(--orange); }
.sd-st.live { background: var(--orange); color: var(--on-accent); }
.sd-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.sd-acts a, .sd-acts button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 18px; border: 0; cursor: pointer;
  background: var(--fill); color: var(--orange); text-decoration: none; font: 600 12px var(--st-font); transition: transform .3s var(--spring), background .2s; }
.sd-acts a span, .sd-acts button span { color: var(--text-main); }
.sd-acts > *:active { transform: scale(.92); background: var(--orange-dim); }
.sd-card { background: var(--fill); border-radius: 20px; padding: 16px; }
.sd-time { display: flex; align-items: center; gap: 12px; font-size: 32px; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.sd-time b { font-weight: 800; }
.sd-time i { flex: 1; height: 2px; border-radius: 1px; background: linear-gradient(90deg, var(--orange), color-mix(in srgb, var(--orange) 25%, transparent)); position: relative; }
.sd-time i::after { content: ""; position: absolute; right: -2px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--orange) 40%, transparent); }
.sd-time b + i + b { color: var(--text-muted); }
.sd-date { font-size: 13.5px; color: var(--text-muted); margin-top: 4px; }
.sd-rows { margin-top: 14px; }
.sd-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--border-soft); font-size: 14.5px; }
.sd-rows span { color: var(--text-muted); } .sd-rows b { font-weight: 700; text-align: right; }
.sd-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 13px 15px; border-radius: 18px; border: 1px dashed var(--border-soft); color: var(--text-muted); font-size: 14px; line-height: 1.45; }
.sd-note svg { flex: none; margin-top: 2px; }
.sd-note div { color: var(--text-main); } .sd-note i { color: var(--text-muted); }
.sd-foot { display: flex; gap: 8px; margin-top: 16px; }
.sd-foot .btn { flex: 1; height: 50px; gap: 7px; }

/* ───────────── NOVI TERMIN (jedan ekran) ───────────── */
.na { padding-bottom: 6px; }
.na-l { font-size: 13px; font-weight: 700; color: var(--text-muted); margin: 18px 2px 8px; }
.na-l:first-child { margin-top: 2px; }
.na-l span { font-weight: 500; }
.na-x { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -18px; padding: 2px 18px; scroll-snap-type: x proximity; }
.na-x::-webkit-scrollbar { display: none; }
.na-x button { flex: none; scroll-snap-align: center; text-align: left; border: 1.5px solid transparent; background: var(--fill); color: var(--text-main); border-radius: 16px; padding: 11px 14px; cursor: pointer;
  font-family: var(--st-font); transition: transform .3s var(--spring), border-color .2s, background .2s; }
.na-x button:active { transform: scale(.94); }
.na-x button b { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; }
.na-x button small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; white-space: nowrap; }
.na-x button.on { border-color: var(--orange); background: var(--orange-dim); }
.na-w button { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 99px; }
.na-w .st-av { width: 30px; height: 30px; font-size: 11px; }
.na-d button { width: 52px; padding: 9px 0; text-align: center; border-radius: 16px; }
.na-d button small { margin: 0 0 2px; font-weight: 600; }
.na-d button b { font-size: 18px; font-variant-numeric: tabular-nums; }
.na-d button.on { background: var(--text-main); border-color: var(--text-main); }
.na-d button.on b, .na-d button.on small { color: var(--bg-base); }
.na-sg { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; }
.na-sec { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--text-muted); margin: 6px 2px 0; }
.na-sec:first-child { margin-top: 0; }
.na-sg .slot { padding: 11px 2px; margin: 0; font-size: 14.5px; animation: stUp .4s var(--ease-out) both; }
@keyframes stUp { from { transform: translateY(10px); } to { transform: none; } }
.na-sg .slot[disabled] { opacity: .3; text-decoration: line-through; background: transparent; }
.na-sg .slot.sel { transform: scale(1.05); }
.na-sk { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.na-sk i { height: 42px; border-radius: 12px; background: var(--fill); animation: stBlink 1.2s infinite; }
.na-empty { text-align: center; padding: 22px 12px; color: var(--text-muted); font-size: 14px; background: var(--fill); border-radius: 18px; }
.na-cl { position: relative; }
.na-cl input, .na-ph input, .na-ph select, .na-rp select, .na-rp input { margin: 0; }
.na-sug { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.na-sug:empty { display: none; }
.na-sug button { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; border: 0; background: var(--fill); color: var(--text-main); text-align: left; cursor: pointer; font-family: var(--st-font); animation: stIn .3s var(--ease-out) both; }
.na-sug .st-av { width: 32px; height: 32px; font-size: 11px; }
.na-sug b { display: block; font-size: 14px; } .na-sug small { display: block; font-size: 12px; color: var(--text-muted); }
.na-ph, .na-rp { display: flex; gap: 8px; margin-top: 8px; }
.na-ph select { width: 96px; flex: none; } .na-rp input { width: 96px; flex: none; }
.na-go { width: 100%; height: 54px; margin-top: 20px; gap: 8px; font-size: 16px !important; transition: transform .3s var(--spring), opacity .25s; }
.na-go:disabled { opacity: .4; }

/* ───────────── KLIJENTI ───────────── */
.cl-sum { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 6px; }
.cl-sum > div { background: var(--fill); border-radius: 16px; padding: 11px 12px; }
.cl-sum b { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cl-sum span { font-size: 11.5px; color: var(--text-muted); }
.cl-L { position: sticky; top: -12px; z-index: 2; font-size: 13px; font-weight: 800; color: var(--orange); padding: 12px 4px 6px; background: var(--bg-elevated); }
#clientsListContainer.list { gap: 6px; padding-right: 18px; }
.cl-row .item-front { padding: 11px 13px; border-radius: 18px; }
.cl-row .cl-r { text-align: right; flex: none; }
.cl-row .cl-r b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cl-row .cl-r small { display: block; font-size: 11.5px; color: var(--text-muted); }
.cl-vip, .cl-blk { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; vertical-align: 2px; }
.cl-vip { background: color-mix(in srgb, #FFD60A 18%, transparent); color: #E0A800; }
.cl-blk { background: color-mix(in srgb, var(--red) 14%, transparent); color: var(--red); }
.cl-row.blk .st-r { opacity: .5; }
.cl-row .item-actions-scroll .btn { height: 100%; border-radius: 16px; margin: 0; min-width: 56px; }
#clRail { position: absolute; right: 2px; top: 120px; bottom: 30px; z-index: 5; display: flex; flex-direction: column; justify-content: center; touch-action: none; }
#clRail button { border: 0; background: none; color: var(--orange); font: 700 10.5px var(--st-font); padding: 1px 5px; cursor: pointer; line-height: 1.25; }

/* ───────────── donja traka v2: 4 taba + odvojen "+" desno, kružić ispod aktivnog ───────────── */
#mobileNav { left: 12px; right: 86px; max-width: none; margin: 0; padding: 0 6px; height: 64px; border-radius: 32px; justify-content: space-around; }
#stNavPill { display: none !important; }
#mobileNav .mnavBtn { width: auto; flex: 1; gap: 3px; padding-bottom: 6px; }
/* meni i "+" niže, bliže ivici (na iPhone-u ulaze u zonu iznad crtice za povratak) */
#mobileNav { bottom: max(8px, calc(env(safe-area-inset-bottom) - 10px)); }
#mobileNav .mnavBtn.active { color: var(--text-main); }
#mobileNav .mnavBtn.active svg { transform: translateY(-1px); }
#mobileNav .mnavBtn::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--orange);
  transform: scale(0); transition: transform .45s var(--spring); }
#mobileNav .mnavBtn.active::after { transform: scale(1); }
#mobileNav .mnavBtn span.label { font-size: 10px; }
#stFab { position: fixed; z-index: 5000; right: 12px; bottom: max(8px, calc(env(safe-area-inset-bottom) - 10px)); width: 64px; height: 64px; margin: 0; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: var(--orange); color: var(--on-accent); transform: none; cursor: pointer;
  box-shadow: 0 14px 30px -12px var(--orange), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .45s var(--spring), opacity .3s; }
#stFab svg { width: 28px; height: 28px; stroke-width: 2.4; transition: transform .45s var(--spring); }
#stFab:active { transform: scale(.88); }
#stFab:active svg { transform: rotate(90deg); }
#stFab .label { display: none; }
#stFab.active::after { display: none; }
#mobileNav.nav-hidden + #stFab { transform: translateY(120px); }
body:not([data-authed="1"]) #stFab { display: none !important; }
@media (min-width: 901px) { #stFab { display: none !important; } }

/* ───────────── PODEŠAVANJA: zajednički delovi (sg-*) ───────────── */
.sg-wrap { padding-bottom: 8px; }
.sg-h { display: flex; align-items: baseline; gap: 6px; font-size: 13px; font-weight: 700; color: var(--text-muted); margin: 20px 4px 8px; }
.sg-h:first-child { margin-top: 2px; }
.sg-h span { font-weight: 600; color: var(--text-dim); }
.sg-p { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin: 0 4px 12px; }
.sg { background: var(--fill); border-radius: 20px; overflow: hidden; }
.sg.dis { opacity: .45; pointer-events: none; filter: grayscale(1); }
.sg-r { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: transparent; color: var(--text-main); text-align: left;
  font-family: var(--st-font); cursor: default; animation: stIn .45s var(--ease-out) both; position: relative; }
button.sg-r { cursor: pointer; } button.sg-r:active { background: var(--fill); }
.sg-r + .sg-r, .sg-r + .sg-day, .sg-day + .sg-day { box-shadow: inset 0 1px 0 var(--border-soft); }
.sg-r > svg:last-child { color: var(--text-dim); flex: none; }
.sg-m { flex: 1; min-width: 0; }
.sg-m b { display: block; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-m small { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.sg-m small + b { margin-top: 1px; }
.sg-v { font-size: 15px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sg-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--c); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 20%, transparent); }
.sg-dot.xl { width: 22px; height: 22px; box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 18%, transparent); }
.lk-ic { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--orange); color: var(--on-accent); }
.sg-x { width: 34px; height: 34px; border-radius: 50%; flex: none; border: 0; display: grid; place-items: center; background: var(--fill); color: var(--text-muted); cursor: pointer; transition: transform .3s var(--spring); }
.sg-x:active { transform: scale(.88); } .sg-x.red { color: var(--red); }
.sg-none { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--text-muted); font-size: 13.5px; }
.sg-none svg { color: var(--orange); flex: none; }
.sg-ok { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #04210C; }
.sg-mini { height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: 17px; }
.sg-role { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: var(--fill); color: var(--text-muted); }
.sg-role.adm { background: var(--orange-dim); color: var(--orange); }
.sg-lock { font-size: 10.5px; font-weight: 800; color: var(--orange); background: var(--orange-dim); padding: 2px 8px; border-radius: 99px; }
.sg-save { width: 100%; height: 52px; margin-top: 14px; gap: 8px; font-size: 16px !important; }
.sg-row2 { display: flex; gap: 8px; margin-top: 14px; } .sg-row2 .btn { flex: 1; height: 52px; gap: 7px; }
.sg-link { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 10px; border: 0; background: none; color: var(--orange); font: 600 13.5px var(--st-font); cursor: pointer; }
.sg-addbtn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 12px; padding: 15px; border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--orange) 55%, transparent); background: transparent; color: var(--orange); font: 700 15px var(--st-font); cursor: pointer; }
.sg-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 6px 0 14px; }
.sg-hero .st-av { width: 70px; height: 70px; font-size: 24px; margin-bottom: 8px; }
.sg-hero .pa-av.lg { margin-bottom: 8px; }
.sg-hero b { font-size: 21px; font-weight: 800; letter-spacing: -.035em; } .sg-hero small { font-size: 13px; color: var(--text-muted); }
.sg-hero .sg-dot { margin: 8px 0 14px; }
img.st-av { object-fit: cover; }
/* forma: oznaka levo, polje desno (iOS) */
.sg-form .sg-f { display: flex; align-items: center; gap: 10px; padding: 4px 14px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 500; color: var(--text-main); }
.sg-form .sg-f + .sg-f, .sg-form .sg-f2 + .sg-f { box-shadow: inset 0 1px 0 var(--border-soft); }
.sg-form .sg-f > span { flex: none; min-width: 92px; color: var(--text-main); display: flex; align-items: center; }
.sg-form .sg-f input, .sg-form .sg-f select { flex: 1; min-width: 0; margin: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 12px 0; text-align: right; font-size: 15.5px; }
.sg-form .sg-f select { text-align-last: right; }
.sg-form .sg-f em { font-style: normal; color: var(--text-muted); font-size: 14px; }
.sg-form .sg-f:focus-within > span { color: var(--orange); }
.sg-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.sg-f2 label, .sg-dt label { margin: 0; display: flex; flex-direction: column; gap: 4px; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; color: var(--text-muted); position: relative; }
.sg-f2 input, .sg-dt input { margin: 0; background: var(--bg-elevated) !important; height: 48px; font-size: 17px !important; }
.sg-dt label em { position: absolute; right: 12px; bottom: 15px; font-style: normal; font-size: 12px; color: var(--text-muted); }
.sg-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 10px; }
.sg-chips::-webkit-scrollbar { display: none; }
.sg-chips button { flex: none; border: 0; border-radius: 99px; padding: 8px 13px; background: var(--fill); color: var(--text-main); font: 600 12.5px var(--st-font); cursor: pointer; font-variant-numeric: tabular-nums; }
/* dodaj (rasklopivo) */
.sg-add { margin-bottom: 4px; }
.sg-add summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 15px; border-radius: 18px; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--orange) 55%, transparent); color: var(--orange); font-weight: 700; font-size: 15px; }
.sg-add summary::-webkit-details-marker { display: none; }
.sg-add[open] summary { border-style: solid; background: var(--orange-dim); margin-bottom: 10px; }
.sg-add[open] summary svg { transform: rotate(45deg); }
.sg-add summary svg { transition: transform .35s var(--spring); }
.sg-add[open] > .sg { animation: stIn .4s var(--ease-out) both; }
/* radno vreme */
.sg-day { padding: 12px 14px; transition: background .3s; animation: stIn .45s var(--ease-out) both; }
.sg-day.flash { background: var(--orange-dim); }
.sg-dh { display: flex; align-items: center; gap: 10px; }
.sg-dh b { font-size: 15px; font-weight: 600; min-width: 92px; color: var(--text-muted); transition: color .2s; }
.sg-day.on .sg-dh b { color: var(--text-main); }
.sg-dh small { flex: 1; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sg-day.on .sg-dh small { color: var(--orange); font-weight: 600; }
.sg-dt { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 92px; gap: 8px; margin-top: 10px; animation: stIn .35s var(--ease-out) both; }
.sg-dt input, .sg-f2 input { width: 100%; min-width: 0; text-align: center; padding: 0 8px; }
.sg-dt label:last-child input { padding-right: 34px; }
/* pauze */
.sg-r.lk.full .lk-ic { background: var(--red); color: #fff; }
.sg-r.lk .lk-ic { background: var(--orange-dim); color: var(--orange); }
/* šabloni poruka sa pregledom */
.tp { background: var(--fill); border-radius: 20px; padding: 12px; margin-bottom: 10px; }
.tp-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tp-h b { font-size: 14.5px; }
.tp-tok { display: flex; gap: 4px; flex-wrap: wrap; }
.tp-tok button { border: 0; border-radius: 8px; padding: 4px 8px; background: var(--orange-dim); color: var(--orange); font: 700 11.5px var(--st-font); cursor: pointer; }
.tp textarea { margin: 0; background: var(--bg-elevated) !important; font-size: 14px; line-height: 1.5; resize: vertical; }
.tp-prev { display: flex; justify-content: flex-start; margin-top: 10px; }
.tp-b { max-width: 88%; background: #34C759; color: #fff; font-size: 13.5px; line-height: 1.45; padding: 9px 12px; border-radius: 18px 18px 18px 6px; white-space: pre-wrap; }
/* notifikacije */
.sg-tip { background: var(--orange-dim); border-radius: 20px; padding: 14px 16px; font-size: 13.5px; line-height: 1.5; margin-bottom: 4px; }
.sg-tip b:first-child { display: block; color: var(--orange); margin-bottom: 4px; }
.sg-tip ol { margin: 0; padding-left: 18px; color: var(--text-main); }
/* salon / licenca */
.lic { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 22px; background: var(--fill); }
.lic-r { position: relative; width: 76px; height: 76px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lic-r svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.lic-r circle { fill: none; stroke-width: 6; stroke-linecap: round; } .lic-r .b { stroke: var(--fill); } .lic-r .f { transition: stroke-dashoffset 1.2s var(--ease-out); }
.lic-r b { position: relative; font-size: 22px; font-weight: 800; letter-spacing: -.04em; line-height: 1; } .lic-r small { position: relative; font-size: 10.5px; color: var(--text-muted); font-weight: 600; }
.lic b { display: block; font-size: 16px; font-weight: 700; margin-top: 6px; } .lic small { font-size: 12.5px; color: var(--text-muted); }
.lic-p { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 3px 9px; border-radius: 99px; background: var(--orange-dim); color: var(--orange); }
.lic-p.premium { background: linear-gradient(135deg, #FFD60A, #FF8A00); color: #1A0F00; }
.sg-wa { background: #25D366 !important; color: #fff !important; text-decoration: none; }
/* ───────────── bez interneta ───────────── */
#stNet { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); z-index: 30001; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 99px;
  background: #1C1C1E; color: #fff; font: 600 13px var(--st-font); box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); transform: translate(-50%, -150%); transition: transform .5s var(--spring); white-space: nowrap; }
#stNet i { width: 8px; height: 8px; border-radius: 50%; background: #FF9F0A; animation: stBlink 1.2s infinite; }
#stNet.on, #stNet.back { transform: translate(-50%, 0); }
/* sakrivena traka ne sme da viri ispod statusne trake (senka je padala preko datuma na iPhone-u) */
#stNet:not(.on):not(.back) { visibility: hidden; transition: transform .5s var(--spring), visibility 0s .5s; }
#stIsland:not(.on) { visibility: hidden; }

/* ───────────── iOS: vrh i dno ekrana ───────────── */
/* traka u boji pozadine ispod statusne trake: iOS 26+ zamućuje sadržaj ispod sata, pa tu ne sme biti teksta */
#stTop { position: fixed; z-index: 3000; left: 0; right: 0; top: 0; height: calc(env(safe-area-inset-top) + 10px); pointer-events: none;
  background: linear-gradient(var(--bg-base) 72%, transparent); }
@media (max-width: 900px) { .wrap { padding-top: calc(18px + env(safe-area-inset-top)); } }
/* ispod donjeg menija: zamućenje + tamniji prelaz da se meni jasno vidi preko sadržaja */
#stScrim { position: fixed; z-index: 4900; left: 0; right: 0; bottom: 0; height: calc(118px + env(safe-area-inset-bottom)); pointer-events: none;
  background: linear-gradient(transparent, color-mix(in srgb, var(--bg-base) 88%, transparent) 62%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }
body:not([data-authed="1"]) #stScrim, body:not([data-authed="1"]) #stTop { display: none; }
@media (min-width: 901px) { #stScrim, #stTop { display: none; } }
#stNet.back i { background: #30D158; animation: none; }
html:has(#stNet.on) #stIsland { display: none; }

/* ───────────── zahtevi (prozor zvonceta) ───────────── */
#stPend { display: none !important; }
.pq .st-rq { margin-bottom: 8px; background: var(--fill); border: 0; }
.pq-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; padding: 2px 0 12px; }
.pq-top > b { font-size: 21px; font-weight: 800; letter-spacing: -.035em; }
.pq-top small { font-size: 12.5px; color: var(--text-muted); } .pq-top small b { color: var(--green); }
.pq-h { font-size: 13px; font-weight: 700; color: var(--text-muted); margin: 12px 4px 8px; }
.st-rq .m .pq-p { font-size: 12px; color: var(--text-dim); margin-top: 1px; display: block; font-variant-numeric: tabular-nums; }
.st-rq.acc { background: color-mix(in srgb, var(--green) 22%, var(--bg-elevated)) !important; transition: background .25s, height .45s var(--ease-out), padding .45s, margin .45s, opacity .4s; }
.pq-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 10px 18px; animation: stIn .5s var(--ease-out) both; }
.pq-ok { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); margin-bottom: 14px; animation: sdPop .7s var(--spring) both; }
.pq-empty b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; } .pq-empty small { font-size: 14px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

/* ───────────── v3: dolazak, ocene, klijent, rođendani, lista čekanja, galerija ───────────── */
.att { margin-top: 10px; padding: 12px 14px; border-radius: 20px; background: var(--fill); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.att > span { font-size: 13.5px; font-weight: 600; color: var(--text-muted); }
.att > div { display: flex; gap: 6px; }
.att button { display: flex; align-items: center; gap: 5px; border: 0; border-radius: 99px; padding: 8px 12px; background: var(--bg-elevated); color: var(--text-main); font: 600 13px var(--st-font); cursor: pointer; transition: transform .3s var(--spring), background .2s, color .2s; }
.att button svg { width: 15px; height: 15px; }
.att button:active { transform: scale(.92); }
.att button.on.ok { background: var(--green); color: #04210C; } .att button.on.no { background: var(--red); color: #fff; }
.rate-ask { width: 100%; display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 13px 14px; border: 0; border-radius: 18px; cursor: pointer; font: 600 14.5px var(--st-font);
  color: var(--text-main); background: linear-gradient(120deg, color-mix(in srgb, #FFD60A 16%, transparent), var(--fill)); }
.rate-ask > svg:first-child { color: #FFB800; } .rate-ask span { flex: 1; text-align: left; } .rate-ask > svg:last-child { color: var(--text-dim); }
.st-tag.no { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
#dayList .list-row.st-noshow .st-r { opacity: .55; }
.cl-ns { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--red); vertical-align: 1px; }
.cl-ns svg { width: 12px; height: 12px; } .cl-bd { margin-left: 6px; color: #FF375F; vertical-align: -2px; } .cl-bd svg { width: 15px; height: 15px; }
.cc-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-top: 4px; }
.cc-stats > div { background: var(--fill); border-radius: 16px; padding: 11px 12px; text-align: center; }
.cc-stats b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.035em; font-variant-numeric: tabular-nums; } .cc-stats small { font-size: 11.5px; color: var(--text-muted); }
.cc-stats .warn b { color: var(--red); }
.cc-warn { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--text-main); font-size: 13.5px; }
.cc-warn svg { color: var(--red); flex: none; }
#stBd { margin: 0 0 10px; padding: 12px 12px 6px 14px; border-radius: 20px; background: linear-gradient(130deg, color-mix(in srgb, #FF375F 14%, var(--bg-elevated)), color-mix(in srgb, #BF5AF2 10%, var(--bg-elevated))); box-shadow: inset 0 0 0 1px var(--border-soft); animation: stIn .5s var(--ease-out) both; }
.bd-h { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: #FF375F; margin-bottom: 4px; }
.bd-h b { color: var(--text-main); } .bd-h svg { animation: wbBeat 2s ease-in-out infinite; }
.bd-r { display: flex; align-items: center; gap: 10px; padding: 7px 0; } .bd-r + .bd-r { box-shadow: inset 0 1px 0 var(--border-soft); }
.bd-r .st-av { width: 34px; height: 34px; font-size: 11.5px; }
#stWl { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 4px; border: 0; border-radius: 20px; cursor: pointer; text-align: left; color: var(--text-main); font-family: var(--st-font);
  background: color-mix(in srgb, var(--orange) 10%, var(--bg-elevated)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 30%, transparent); animation: stIn .5s var(--ease-out) both; }
#stWl > svg { color: var(--text-dim); flex: none; }
.wl-ic { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--orange); color: var(--on-accent); }
.wl-ic svg { width: 20px; height: 20px; }
.wb-hero > svg { color: var(--orange); }
.sg-r.gone-r, .gl-i.gone-r { opacity: 0; transform: scale(.94); transition: opacity .3s, transform .3s; }
.rt-hero { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 22px; background: var(--fill); margin-bottom: 12px; }
.rt-hero > div:first-child { text-align: center; flex: none; } .rt-hero > div:first-child > b { display: block; font-size: 42px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.rt-hero small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.rt-s { display: inline-flex; gap: 1px; } .rt-s i { font-style: normal; font-size: 13px; color: var(--text-dim); } .rt-s i.on { color: #FFB800; }
.rt-dist { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.rt-dist > div { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.rt-dist i { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-elevated); overflow: hidden; } .rt-dist i b { display: block; height: 100%; background: #FFB800; border-radius: 3px; animation: stGrow 1s var(--ease-out) both; transform-origin: left; }
.rt-r { align-items: flex-start; } .rt-r .sg-m b { white-space: normal; } .rt-r p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-main); }
.sg-x.pub { color: var(--orange); background: var(--orange-dim); }
.gl { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.gl-i { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--fill); animation: stIn .4s var(--ease-out) both; }
.gl-i img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-i button { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; backdrop-filter: blur(8px); }
.gl-add { aspect-ratio: 1; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--orange) 55%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--orange); font-size: 12.5px; font-weight: 700; cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0; }

/* ───────────── CILJ MESECA ───────────── */
#stGoal { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; font-family: var(--st-font); color: var(--text-main); margin: 0 0 10px; padding: 14px 15px 12px;
  border-radius: 20px; background: var(--bg-elevated); box-shadow: inset 0 0 0 1px var(--border-soft); animation: stIn .5s var(--ease-out) both; transition: transform .3s var(--spring); }
#stGoal:active { transform: scale(.98); }
#stGoal.empty { display: flex; align-items: center; gap: 12px; background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--orange) 40%, transparent); }
#stGoal.empty > svg { color: var(--text-dim); }
.g-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--orange-dim); color: var(--orange); flex: none; }
.g-top { display: flex; justify-content: space-between; align-items: flex-end; }
.g-top b { display: block; font-size: 15px; font-weight: 700; } .g-top small { font-size: 12.5px; color: var(--text-muted); }
.g-v { font-size: 26px; font-weight: 800; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.g-bar { position: relative; height: 10px; border-radius: 5px; background: var(--fill); margin: 10px 0 8px; overflow: visible; }
.g-bar i { display: block; height: 100%; width: var(--p); border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--orange) 70%, #FFD60A), var(--orange)); transform-origin: left; animation: stGrow 1.3s var(--ease-out) both; }
.g-bar em { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--text-main); opacity: .5; }
.g-ft { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#stGoal.hit .g-bar i { background: linear-gradient(90deg, #30D158, #34C759); } #stGoal.hit .g-v { color: var(--green); }

/* ───────────── VRATI KLIJENTE ───────────── */
#stWin { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 10px; border: 0; border-radius: 20px; cursor: pointer; text-align: left; color: var(--text-main); font-family: var(--st-font);
  background: linear-gradient(120deg, color-mix(in srgb, #FF375F 14%, var(--bg-elevated)), var(--bg-elevated)); box-shadow: inset 0 0 0 1px var(--border-soft); animation: stIn .5s var(--ease-out) both; }
#stWin > svg { color: var(--text-dim); flex: none; }
.w-av { display: flex; flex: none; } .w-av .st-av { width: 30px; height: 30px; font-size: 10.5px; box-shadow: 0 0 0 2px var(--bg-elevated); background: color-mix(in srgb, var(--c) 28%, var(--bg-elevated)); } .w-av .st-av + .st-av { margin-left: -9px; }
.wb-hero { text-align: center; padding: 6px 10px 6px; } .wb-hero svg { width: 34px; height: 34px; color: #FF375F; animation: wbBeat 1.6s ease-in-out infinite; }
@keyframes wbBeat { 0%,100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } 45% { transform: scale(1.12); } }
.wb-hero b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; } .wb-hero small { display: block; font-size: 13px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.wb-go { width: 38px; height: 38px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; background: #25D366; color: #fff; cursor: pointer; transition: transform .3s var(--spring); }
.wb-go:active { transform: scale(.88); }
.sg-r.wb-done { opacity: .5; } .sg-r.wb-done .wb-go { background: var(--fill); color: var(--green); }

/* ───────────── BRZO ZAKAZIVANJE ───────────── */
.na-q { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 12px; border-radius: 16px; margin-bottom: 4px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--orange) 14%, transparent), color-mix(in srgb, #BF5AF2 12%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 30%, transparent); }
.na-q > span { color: var(--orange); display: grid; animation: illSpark 2.6s ease-in-out infinite; }
.na-q input { flex: 1; min-width: 0; margin: 0; padding: 10px 0; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 15px; }
.na-q button { border: 0; border-radius: 12px; padding: 9px 13px; background: var(--orange); color: var(--on-accent); font: 700 13.5px var(--st-font); cursor: pointer; }
.na-qh { display: none; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); margin: 6px 4px 0; }
.na-qh.on { display: flex; animation: stIn .35s var(--ease-out) both; } .na-qh svg { color: var(--green); flex: none; }

/* glavni ekran podešavanja */
.set-hero { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px; border: 0; border-radius: 24px; cursor: pointer; text-align: left; color: var(--text-main); font-family: var(--st-font);
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--orange) 22%, transparent), transparent 60%), var(--fill); animation: stIn .5s var(--ease-out) both; transition: transform .3s var(--spring); }
.set-hero:active { transform: scale(.98); }
.set-av { width: 58px; height: 58px; flex: none; border-radius: 18px; display: grid; place-items: center; font-size: 21px; font-weight: 800; color: var(--on-accent);
  background: linear-gradient(140deg, color-mix(in srgb, #fff 18%, var(--orange)), color-mix(in srgb, var(--orange) 75%, #E0301E)); box-shadow: 0 10px 22px -10px var(--orange); }
.set-hero .sg-m b { font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.set-hero .lic-p { display: inline-block; margin-top: 6px; }
.set-ring { position: relative; width: 52px; height: 52px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.set-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.set-ring circle { fill: none; stroke-width: 4.5; stroke-linecap: round; } .set-ring .b { stroke: var(--fill); } .set-ring .f { transition: stroke-dashoffset 1.3s var(--ease-out); }
.set-ring b { position: relative; font-size: 15px; font-weight: 800; line-height: 1; } .set-ring small { position: relative; font-size: 9px; color: var(--text-muted); font-weight: 700; }
.set-q { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 0 12px; height: 42px; border-radius: 13px; background: var(--fill); color: var(--text-muted); text-transform: none; letter-spacing: 0; font-weight: 500; }
.set-q input { flex: 1; margin: 0; padding: 0; height: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 15.5px; }
.st-tile { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(160deg, color-mix(in srgb, #fff 18%, var(--c)), var(--c)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.st-tile svg { width: 18px; height: 18px; }
.set-sg .sg-r { padding: 10px 14px; }
.set-sg .sg-r:nth-child(n) { animation-delay: calc(var(--i, 0) * 30ms); }
.set-ref { position: relative; margin-top: 12px; padding: 14px 16px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, #BF5AF2 22%, transparent), color-mix(in srgb, var(--orange) 18%, transparent)); }
.set-ref span { font-size: 12px; font-weight: 700; color: var(--text-muted); } .set-ref b { display: block; font-size: 22px; font-weight: 800; letter-spacing: .04em; margin: 2px 0; }
.set-ref small { font-size: 12.5px; color: var(--text-muted); }
.set-ref button { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 5px; border: 0; border-radius: 99px; padding: 8px 12px; background: var(--bg-elevated); color: var(--text-main); font: 600 12.5px var(--st-font); cursor: pointer; }
.set-none { display: none; text-align: center; color: var(--text-muted); padding: 24px 0; font-size: 14px; }
.set-ver { text-align: center; font-size: 11.5px; color: var(--text-dim); margin-top: 14px; }

/* stari ekrani (Opšta podešavanja i sl.): naslovi sekcija i kartice u istom stilu */
#mb div[style*="text-transform:uppercase"][style*="letter-spacing:.08em"] { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; color: var(--text-muted) !important; }
#mb div[style*="text-transform:uppercase"][style*="letter-spacing:.08em"] svg { display: none; }
#mb .glass-panel { background: var(--fill); border: 0; box-shadow: none; border-radius: 20px; }
#mb [id^="tc_"], #mb [id^="mc_"], .rk-skin button { border-radius: 18px !important; }
#st_currency { border-radius: 16px; }
/* računi */
#mb .glass-panel.inv { background: var(--fill); border: 0; border-radius: 20px; animation: stIn .45s var(--ease-out) both; }
.inv-b { border-radius: 99px !important; }
.inv-b.paid { background: color-mix(in srgb, var(--green) 16%, transparent) !important; color: var(--green) !important; }
.inv-b.due { background: var(--orange-dim) !important; color: var(--orange) !important; }

/* ───────────── uvodni ekran ───────────── */
#stSplash { position: fixed; inset: 0; z-index: 99999999; background: var(--bg-base); display: grid; place-items: center; transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
#stSplash.out { opacity: 0; transform: scale(1.08); pointer-events: none; }
#stSplash .sp-w { position: relative; width: 128px; height: 128px; display: grid; place-items: center; }
#stSplash svg { position: absolute; inset: 0; transform: rotate(-90deg); }
#stSplash circle { fill: none; stroke-width: 5; stroke-linecap: round; }
#stSplash .b { stroke: var(--fill); }
#stSplash .f { stroke: var(--orange); stroke-dasharray: 340; stroke-dashoffset: 340; animation: spFill 1s var(--ease-out) .1s forwards; }
#stSplash img { width: 74px; height: 74px; border-radius: 22px; animation: spLogo .9s var(--spring) both; }
@keyframes spFill { to { stroke-dashoffset: 0; } }
@keyframes spLogo { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ───────────── DAN / NEDELJA ───────────── */
.st-seg2 { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; background: var(--fill); border-radius: 11px; padding: 3px; }
.st-seg2::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--w, 50%); transform: translateX(var(--x, 3px)); border-radius: 8px; background: var(--bg-elevated); box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .5s var(--spring), width .4s var(--spring); }
.st-seg2 button { position: relative; z-index: 1; border: 0; background: none; color: var(--text-main); font: 600 13px var(--st-font); padding: 6px 13px; cursor: pointer; }
#stWeek { display: none; }
html.st-wk #stWeek { display: block; }
html.st-wk #dayList { display: none !important; }
.wk { background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 22px; overflow: hidden; animation: stIn .5s var(--ease-out) both; }
.wk-hd { display: grid; grid-template-columns: 34px repeat(7, minmax(0,1fr)); padding: 8px 4px 6px; border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; background: var(--bg-elevated); z-index: 3; }
.wk-hd button { border: 0; background: none; color: var(--text-main); font-family: var(--st-font); padding: 4px 0; border-radius: 12px; cursor: pointer; }
.wk-hd small { display: block; font-size: 11px; color: var(--text-muted); font-weight: 600; }
.wk-hd b { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-hd .today b { color: var(--orange); }
.wk-hd .sel { background: var(--text-main); } .wk-hd .sel b, .wk-hd .sel small { color: var(--bg-base); }
.wk-bd { position: relative; display: grid; grid-template-columns: 34px 1fr; margin: 8px 0 10px; }
.wk-hr { position: relative; }
.wk-hr div { position: absolute; right: 6px; transform: translateY(-50%); font-size: 10px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wk-hr div:first-child { transform: none; }
.wk-grid { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); background-image: linear-gradient(var(--border-soft) 1px, transparent 1px); margin-right: 4px; }
.wk-col { position: relative; border-left: 1px solid var(--border-soft); }
.wk-col.today { background: color-mix(in srgb, var(--orange) 5%, transparent); }
.wk-b { position: absolute; padding: 3px 4px; border: 0; border-radius: 7px; text-align: left; overflow: hidden; cursor: pointer; font-family: var(--st-font);
  background: color-mix(in srgb, var(--c) 24%, var(--bg-elevated)); color: var(--text-main); box-shadow: inset 2px 0 0 var(--c); animation: wkIn .5s var(--spring) both; margin-left: 1px; }
.wk-b b { display: block; font-size: 9.5px; font-weight: 800; color: var(--c); font-variant-numeric: tabular-nums; line-height: 1.2; }
.wk-b span { display: block; font-size: 9.5px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-b.wait { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c) 18%, var(--bg-elevated)) 0 5px, var(--bg-elevated) 5px 9px); }
.wk-b:active { transform: scale(.94); }
@keyframes wkIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.wk-now { position: absolute; left: -3px; right: 0; height: 2px; background: var(--red); z-index: 2; border-radius: 1px; }
.wk-now::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.wk-sk { height: 420px; border-radius: 22px; background: var(--fill); animation: stBlink 1.2s infinite; }

/* ───────────── PRAZAN DAN ───────────── */
.st-empty { text-align: center; padding: 26px 20px 22px; background: var(--bg-elevated); border: 1px solid var(--border-soft); border-radius: 24px; animation: stIn .5s var(--ease-out) both; }
.st-ill { width: 120px; height: 96px; display: block; margin: 0 auto 12px; }
.st-ill .a { fill: var(--fill); stroke: var(--border-soft); stroke-width: 1.5; }
.st-ill .b { stroke: var(--text-dim); stroke-width: 3; stroke-linecap: round; fill: none; }
.st-ill .c { fill: var(--orange); animation: illDot 1.6s ease-in-out infinite; }
.st-ill .d2 { animation-delay: .2s; } .st-ill .d3 { animation-delay: .4s; }
.st-ill .s { fill: var(--orange); transform-box: fill-box; transform-origin: center; animation: illSpark 2.4s ease-in-out infinite; }
.st-ill .s2 { animation-delay: 1.1s; fill: var(--text-dim); }
@keyframes illDot { 0%,100% { opacity: .25; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes illSpark { 0%,100% { transform: scale(.6) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(45deg); opacity: 1; } }
.st-empty b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
.st-empty small { display: block; font-size: 14px; color: var(--text-muted); margin: 5px auto 0; max-width: 270px; line-height: 1.45; }
.st-empty-a { display: flex; gap: 8px; margin-top: 18px; }
.st-empty-a .btn { flex: 1; height: 46px; }

/* ───────────── KRAJ DANA ───────────── */
.rc { position: relative; text-align: center; padding: 6px 0 4px; }
#rcConf { position: absolute; left: -18px; right: -18px; top: -40px; width: calc(100% + 36px); height: 420px; pointer-events: none; z-index: 3; }
.rc-r { position: relative; width: 130px; height: 130px; margin: 6px auto 14px; display: flex; flex-direction: column; justify-content: center; }
.rc-r svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.rc-r circle { fill: none; stroke-width: 9; stroke-linecap: round; }
.rc-r .b { stroke: var(--fill); } .rc-r .f { stroke: var(--orange); stroke-dasharray: 327; stroke-dashoffset: 327; animation: rcFill 1.4s var(--ease-out) .2s forwards; }
@keyframes rcFill { to { stroke-dashoffset: 0; } }
.rc-r b { position: relative; font-size: 40px; font-weight: 800; letter-spacing: -.05em; line-height: 1; }
.rc-r small { position: relative; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.rc h2 { font-size: 24px; font-weight: 800; letter-spacing: -.04em; margin: 0; }
.rc p { color: var(--text-muted); margin: 4px 0 16px; font-size: 14.5px; }
.rc-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(0,1fr)); gap: 8px; margin-bottom: 16px; }
.rc-g > div { background: var(--fill); border-radius: 18px; padding: 12px; }
.rc-g b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-g small { font-size: 12px; color: var(--text-muted); }

/* ───────────── IZVEŠTAJI ───────────── */
.rp-seg { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--fill); border-radius: 13px; padding: 3px; }
.rp-seg::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--w, 25%); transform: translateX(var(--x, 3px)); border-radius: 10px;
  background: var(--bg-elevated); box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform .5s var(--spring), width .4s var(--spring); }
.rp-seg button { position: relative; z-index: 1; border: 0; background: none; color: var(--text-main); font: 600 13.5px var(--st-font); padding: 8px 2px; cursor: pointer; white-space: nowrap; }
.rp-hero { text-align: center; padding: 22px 0 16px; }
.rp-hero small { font-size: 13px; color: var(--text-muted); font-weight: 600; }
.rp-big { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin-top: 2px; }
.rp-big b { font-size: 44px; font-weight: 800; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.rp-big span { font-size: 16px; font-weight: 700; color: var(--text-muted); }
.rp-sub { font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }
.rp-card { background: var(--fill); border-radius: 22px; padding: 15px 15px 13px; margin-bottom: 10px; }
.rp-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.rp-h b { font-size: 15px; font-weight: 700; } .rp-h small { font-size: 12px; color: var(--orange); font-weight: 600; }
.rp-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; height: 150px; align-items: end; }
.rp-bars > div { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; }
.rp-bars i { width: 100%; max-width: 30px; height: var(--h, 8%); border-radius: 8px; background: color-mix(in srgb, var(--text-main) 16%, transparent); transform-origin: bottom; animation: rpGrow .9s var(--spring) both; }
.rp-bars .best i { background: var(--orange); box-shadow: 0 8px 18px -8px var(--orange); }
.rp-bars em { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--text-muted); min-height: 13px; font-variant-numeric: tabular-nums; }
.rp-bars .best em { color: var(--orange); }
.rp-bars small { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.rp-bars .today small { color: var(--text-main); }
@keyframes rpGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.rp-svc { display: flex; flex-direction: column; gap: 12px; transition: opacity .25s; }
.rp-svc.ld { opacity: .4; }
.rp-s { animation: stIn .5s var(--ease-out) both; }
.rp-st { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.rp-st b { font-weight: 700; } .rp-st span { font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-sb { height: 8px; border-radius: 4px; background: var(--fill); margin: 6px 0 3px; overflow: hidden; }
.rp-sb i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--c); transform-origin: left; animation: stGrow 1s var(--ease-out) both; }
.rp-s small { font-size: 11.5px; color: var(--text-muted); }
.rp-cust { width: 100%; margin-top: 4px; height: 48px; }

/* ───────────── povuci za osvežavanje ───────────── */
#ptr-indicator { background: var(--bg-elevated); border: 1px solid var(--border-soft); box-shadow: var(--shadow-md); backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px; }
#ptr-icon { width: 26px; height: 26px; }

/* ───────────── brzi meni (dugo držanje) ───────────── */
#stCtx { position: fixed; inset: 0; z-index: 25000; background: rgba(0,0,0,0); transition: background .28s, backdrop-filter .28s; }
#stCtx.on { background: rgba(0,0,0,.35); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); }
.st-ctx-card { position: fixed; margin: 0; border-radius: 18px !important; background: var(--bg-elevated) !important; border: 1px solid var(--border-soft) !important;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.6) !important; transition: transform .45s var(--spring); }
#stCtx.on .st-ctx-card { transform: scale(1.03); }
.st-ctx-menu { position: fixed; width: 240px; border-radius: 16px; overflow: hidden; background: var(--bg-elevated); box-shadow: 0 24px 60px -16px rgba(0,0,0,.55);
  transform: scale(.6); opacity: 0; transition: transform .45s var(--spring), opacity .2s; }
#stCtx.on .st-ctx-menu { transform: none; opacity: 1; }
.st-ctx-menu button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border: 0; background: transparent; color: var(--text-main); font: 500 16px var(--st-font); cursor: pointer; }
.st-ctx-menu button + button { box-shadow: inset 0 1px 0 var(--border-soft); }
.st-ctx-menu button:active { background: var(--fill); }
.st-ctx-menu button.danger { color: var(--red); }
#dayList .item-scroll { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

/* ───────────── desktop (desktop.php) ───────────── */
#dsk-sidebar { background: var(--bg-base); backdrop-filter: none; -webkit-backdrop-filter: none; border-right: 1px solid var(--border-soft); }
.dsk-logo-row, .dsk-salon-info, .dsk-footer { border-color: var(--border-soft); }
.dsk-nav-btn { border-radius: 10px; font-size: 14px; }
.dsk-nav-btn.active { background: var(--bg-elevated); color: var(--text-main); box-shadow: 0 0 0 1px var(--border-soft); }
.dsk-nav-btn.active svg { color: var(--orange); }
.dsk-nav-btn.dsk-new { background: var(--orange); color: var(--on-accent); border: 0; }
.dsk-avatar { color: var(--on-accent); }
body[data-authed="1"] #dsk-sidebar ~ * #stHead { display: none; }
@media (min-width: 1024px) {
  html.st .wrap { max-width: 900px !important; padding-top: 28px; }
  #stHero { margin-top: 18px; }
  #stIsland { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* =========================================================
   POKRETI (studio-motion.js) — fluidnost
   ========================================================= */
/* prelaz između ekrana: "duh" prethodnog ekrana */
.st-ghost { overflow: hidden !important; will-change: transform, opacity; }
#mb { will-change: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/* zatvaranje prozora: kopija klizi dole dok se pravi prozor odmah sklanja */
.st-close-bg { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
.st-close-ghost { z-index: 9999 !important; pointer-events: none; will-change: transform, opacity; box-shadow: var(--shadow-lg); }
/* pozadina se odmagljuje dok se prozor vuče nadole */
.ov { background: rgba(0,0,0, calc(.42 * var(--st-dim, 1))); }
/* osvežavanje istog ekrana: stavke ne uleću ponovo (nema "skakanja") */
#mb.st-quiet :is(.item-scroll, .sd, .sg, .sg-r, .sg-day, .sg-dt, .pq-empty, .gl-i, .glass-panel, .wk, .st-empty, .rp-s, .st-rq, .set-hero, .na-sug button, .cl-row) { animation: none !important; }
/* promena dana: termini ulaze kaskadno iz smera kretanja */
#dayList.st-sl > *:nth-child(2), #dayList.st-sr > *:nth-child(2) { animation-delay: .03s; }
#dayList.st-sl > *:nth-child(3), #dayList.st-sr > *:nth-child(3) { animation-delay: .06s; }
#dayList.st-sl > *:nth-child(4), #dayList.st-sr > *:nth-child(4) { animation-delay: .09s; }
#dayList.st-sl > *:nth-child(n+5), #dayList.st-sr > *:nth-child(n+5) { animation-delay: .12s; }
/* obaveštenje ("ostrvo") gore: samo transform/opacity, bez animiranja pozicije */
#opToast { top: calc(10px + env(safe-area-inset-top)); transform: translate(-50%, -160%) scale(.6, .7); transition: transform .55s var(--spring), opacity .25s, visibility 0s .55s; visibility: hidden; backdrop-filter: none; -webkit-backdrop-filter: none; }
#opToast.show { top: calc(10px + env(safe-area-inset-top)); transform: translate(-50%, 0) scale(1); visibility: visible; transition: transform .55s var(--spring), opacity .2s, visibility 0s; }
/* zamućenja: lakša za telefon (glatkiji skrol), ista slika */
#mobileNav { backdrop-filter: blur(20px) saturate(170%); -webkit-backdrop-filter: blur(20px) saturate(170%); transform: translateZ(0); }
#stScrim { transform: translateZ(0); transition: opacity .3s; }
body:has(.ov.show) #stScrim { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .st-ghost, .st-close-ghost, .st-close-bg { display: none !important; } }
/* obaveštenje gore: duža poruka (npr. pogrešna lozinka) prelazi u drugi red umesto da izađe van ekrana */
#opToast { white-space: normal; max-width: calc(100vw - 32px); width: max-content; text-align: center; line-height: 1.35; border-radius: 22px; }
#opToast > *:not(#opToastIcon) { min-width: 0; overflow-wrap: anywhere; }