/* ============================================================
   alat-simulator.css — „Fišing simulator" (/simulator/)
   PORT dizajnerove predaje (design_handoff_fising_simulator,
   2026-07-06): sim-simulator.css + sim-article.css + inline
   page-stilovi iz prototipa. Rescope: prototip je nosio
   body.page-alat-lozinka (copy artefakt) → ovde page-alat-simulator.
   Tokeni --al-* = konzola paleta (isti set kao lozinka). Telefonski
   ekran je tema-nezavisan. Učitava se SAMO na ovoj ruti (extra_css).
   ============================================================ */

/* ---- tokeni — konzola (dark) ---- */
body.page-alat-simulator{
  --al-bg:#0f0f0d; --al-grid:rgba(232,232,230,.02);
  --al-plate:#141412; --al-plate2:#191917; --al-field:#0a0a09;
  --al-line:#262624; --al-line2:#343430;
  --al-hi:#ece9e3; --al-md:#c8c5be; --al-lo:#a0a09e; --al-mute:#8a8780; --al-faint:#5a5754; --al-mute-text:#8a8780;
  --al-brand:#c0392b; --al-brand-hi:#d44a3a;
  /* crvena kao TEKST: --al-brand/-hi nose i podloge i ivice, pa se ne diraju.
     Tamna uzima --brand-on-dark (#ee4130, S130); svetla ostaje na #b0301f. */
  --al-brand-text:var(--brand-on-dark); --al-brand-soft:rgba(192,57,43,.16);
  --al-accent:#ffd9a8;
  /* akcent nosi i podloge i obrise; tekst ide na -text (svetla tema nize) */
  --al-accent-text:var(--al-accent);
  --al-risk-hi:#d0604e; --al-risk-med:#c79248; --al-risk-low:#7fa168;
  --container-wide:1320px;
}
html{ color-scheme:dark; }
html, body.page-alat-simulator{ background:var(--al-bg); }
body.page-alat-simulator{ color:var(--al-hi); }
body.page-alat-simulator ::selection{ background:var(--al-brand-soft); color:var(--al-hi); }

/* Sticky footer — kratke rute (/simulator/test/, .../rezultati prazan) inače
   ostave enc-footer da lebdi na visokim ekranima. Telo je flex-kolona pune
   visine; main raste, .simx apsorbuje višak (grid pozadina ide do futera). */
body.page-alat-simulator{ display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
body.page-alat-simulator > main#main{ display:flex; flex-direction:column; flex:1 0 auto; }
body.page-alat-simulator > main#main > .simx{ flex:1 0 auto; }

/* ============================================================
   HERO — statusna traka (.axc)
   ============================================================ */
.axc{ background:#0f0f0d; border-bottom:1px solid #262624; }
.axc-inner{
  max-width:var(--container-wide); margin:0 auto; padding:38px 28px 34px;
  display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end;
}
.axc-kick{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:#8a8780; margin:0 0 14px;
}
.axc-kick::before{
  content:""; width:6px; height:6px; background:#c0392b;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.axc-kick b{ color:#ffd9a8; font-weight:500; }
.axc h1{
  font-weight:600; font-size:clamp(30px,3.6vw,44px); line-height:1.06;
  letter-spacing:-.024em; margin:0 0 10px; color:#ece9e3; text-wrap:balance;
}
.axc h1 em{ font-style:normal; color:var(--al-brand-text); }
.axc-sub{ font-size:15.5px; line-height:1.6; color:#a0a09e; margin:0; max-width:62ch; }
.axc-mods{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; }
.axc-mods a{
  display:inline-flex; align-items:baseline; gap:8px;
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:9px 13px; color:#c8c5be;
  border:1px solid #343430; border-radius:2px;
  transition:color .15s ease, border-color .15s ease;
}
.axc-mods a::before{
  content:""; width:6px; height:6px; align-self:center; flex:0 0 auto;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.axc-mods a:nth-of-type(1)::before{ background:#8fa9c4; }
.axc-mods a:nth-of-type(2)::before{ background:#c48a9e; }
.axc-mods a:nth-of-type(3)::before{ background:#93ab7c; }
.axc-mods a:hover{ color:#ece9e3; border-color:#8a8780; }
.axc-mods .num{ color:#ffd9a8; font-weight:600; }
.axc-stat{
  font-family:var(--font-mono); font-size:10.5px; line-height:2;
  letter-spacing:.14em; text-transform:uppercase; color:#8a8780;
  text-align:right; white-space:nowrap; padding-bottom:4px;
}
.axc-stat b{ color:#ece9e3; font-weight:500; }
.axc-stat .ok{ color:#7fa168; }
@media (max-width:1000px){
  .axc-inner{ grid-template-columns:1fr; gap:22px; }
  .axc-stat{ text-align:left; }
}
@media (max-width:560px){ .axc-inner{ padding:30px 18px 28px; } }
/* Nivo 2 rute: hero prati CENTRIRANU kolonu tela (test kartica 760 /
   dashboard 940 + 2×28 padding), a tekst ostaje levo — kao svuda u alatu.
   Glavna /simulator/ ruta zadržava širok hero (telo joj je širok 3-panel). */
.axc--col .axc-inner{ max-width:816px; }
.axc--col-dash .axc-inner{ max-width:996px; }

/* ============================================================
   TELO — simx omotač + intro
   ============================================================ */
body.page-alat-simulator .simx{
  background:var(--al-bg); padding:56px 28px 96px;
  background-image:
    linear-gradient(to right,var(--al-grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--al-grid) 1px,transparent 1px);
  background-size:56px 56px;
}
body.page-alat-simulator .simx__inner{ max-width:1320px; margin:0 auto; }

.simx__intro{
  max-width:none; margin:0 0 40px; padding-top:26px;
  border-top:1px solid var(--al-line); color:var(--al-md); font-size:16.5px; line-height:1.7;
}
.simx__toolkick{
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text);
}
.simx__toolkick::before{
  content:""; flex:0 0 auto; width:6px; height:6px; background:var(--al-brand);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.simx__intro p:not(.simx__toolkick){ margin:0 0 12px; max-width:70ch; text-wrap:pretty; }
.simx__intro p:last-child{ margin-bottom:0; }
.simx__intro strong{ color:var(--al-hi); font-weight:600; }
/* ≥1100: meta levo, proza u dve kolone. Tok (columns) umesto grid ćelija —
   grid od tri kolone je držao kicker + TAČNO dva paragrafa; treći (SEO uvod,
   2026-07-11) je padao u drugi red, u usku meta-kolonu. */
@media (min-width:1100px){
  .simx__intro{ display:grid; grid-template-columns:minmax(180px,220px) 1fr; column-gap:48px; align-items:start; }
  .simx__toolkick{ margin:4px 0 0; }
  .simx__introtx{ columns:2; column-gap:48px; }
  .simx__intro p:not(.simx__toolkick){ margin:0 0 14px; max-width:none; break-inside:avoid; }
  .simx__intro p:not(.simx__toolkick):last-child{ margin-bottom:0; }
}

/* ============================================================
   SIMULATOR — komponenta .sim  (dizajnerov sim-simulator.css)
   ============================================================ */
body.page-alat-simulator .sim{
  position:relative;
  border:1px solid var(--al-line);
  background:var(--al-plate);
  scroll-margin-top:120px;
}
body.page-alat-simulator .sim::before,
body.page-alat-simulator .sim::after{
  content:""; position:absolute; width:14px; height:14px;
  border:0 solid var(--al-mute); pointer-events:none; z-index:3;
}
body.page-alat-simulator .sim::before{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; }
body.page-alat-simulator .sim::after{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; }

/* ---- traka režima ---- */
.sim__modebar{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:14px 18px; background:var(--al-plate2);
  border-bottom:1px solid var(--al-line);
}
.sim__modelead{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--al-mute-text); white-space:nowrap;
}
.sim__modes{ display:flex; gap:8px; flex-wrap:wrap; }
.sim__mode{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--al-md);
  padding:9px 15px; background:transparent;
  border:1px solid var(--al-line2); border-radius:2px; cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.sim__mode::before{
  content:""; width:7px; height:7px; flex:0 0 auto;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
  background:var(--m-dot,#8fa9c4);
}
.sim__mode:nth-child(1){ --m-dot:#8fa9c4; }
.sim__mode:nth-child(2){ --m-dot:#c48a9e; }
.sim__mode:nth-child(3){ --m-dot:#93ab7c; }
.sim__mode .num{ color:var(--al-accent-text); font-weight:600; }
.sim__mode:hover{ color:var(--al-hi); border-color:var(--al-mute); }
.sim__mode[aria-selected="true"]{ color:#fff; background:var(--al-brand); border-color:var(--al-brand); }
.sim__mode[aria-selected="true"] .num{ color:#ffe7cf; }
.sim__mode[aria-selected="true"]::before{ background:#fff; }
.sim__hint{ margin-left:auto; max-width:42ch; font-size:12.5px; line-height:1.45; color:var(--al-mute-text); text-wrap:pretty; }
.sim__hint b{ color:var(--al-md); font-weight:600; }

/* ---- mreža tri kolone ---- */
.sim__grid{ display:grid; grid-template-columns:1fr; }
@media (min-width:1100px){
  .sim__grid{ grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(268px,340px); }
}
.sim__col{ min-width:0; }
.sim__col + .sim__col{ border-top:1px solid var(--al-line); }
@media (min-width:1100px){ .sim__col + .sim__col{ border-top:0; border-left:1px solid var(--al-line); } }
/* Oznake iza „//" drze JEDNU meru: 10.5px / .18em, kao na /lozinka/.
   Ranije su ovde bile 10.5 / 10 / 9.5px i .18 / .16 / .14em, pa je strana
   izgledala nemirnije od lozinke pri istom poslu. (Denis, S130) */
.sim__colhead{
  display:flex; align-items:center; gap:9px;
  padding:11px 16px; background:var(--al-field);
  border-bottom:1px solid var(--al-line);
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--al-mute-text); white-space:nowrap;
}
.sim__colhead .cnt{ margin-left:auto; color:var(--al-mute-text); font-variant-numeric:tabular-nums; }
.sim__colhead .cnt b{ color:var(--al-accent-text); font-weight:500; }
/* „Osveži" — samo ikonica (strelica je jasna sama po sebi, Denis); nov
   nasumičan set poruka iz pool-a (skriveno u Nivo 2, deck je zaključan).
   Borderless, uklopljena u kolonu; blag okret ikone na hover/klik. */
.sim__refresh{ display:inline-flex; align-items:center; justify-content:center; padding:4px; margin:-4px 0 -4px 2px; background:transparent; border:0; border-radius:4px; color:var(--al-mute-text); cursor:pointer; transition:color .13s; }
.sim__refresh svg{ width:15px; height:15px; flex:0 0 auto; display:block; transition:transform .3s ease; }
.sim__refresh:hover{ color:var(--al-hi); }
.sim__refresh:hover svg{ transform:rotate(-90deg); }
.sim__refresh:active svg{ transform:rotate(-160deg); transition:transform .1s ease; }
.sim__refresh:focus-visible{ outline:2px solid var(--al-brand-hi); outline-offset:2px; }
.sim__refresh[hidden]{ display:none; }

/* ---- sandučić ---- */
.sim__search{ padding:12px 14px; border-bottom:1px solid var(--al-line); }
.sim__search input{
  width:100%; height:36px; padding:0 12px;
  background:var(--al-field); border:1px solid var(--al-line2); border-radius:2px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; color:var(--al-hi);
}
.sim__search input::placeholder{ color:var(--al-mute-text); }
.sim__search input:focus{ outline:none; border-color:var(--al-mute); }
.sim__list{ list-style:none; margin:0; padding:0; max-height:560px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--al-line2) transparent; }
.sim__list::-webkit-scrollbar{ width:8px; }
.sim__list::-webkit-scrollbar-thumb{ background:var(--al-line2); border-radius:4px; border:2px solid var(--al-plate); }
.sim-item{
  display:flex; gap:12px; align-items:flex-start; width:100%;
  padding:13px 15px; text-align:left; cursor:pointer;
  background:transparent; border:0; border-bottom:1px solid var(--al-line);
  transition:background .13s ease;
}
.sim-item:hover{ background:var(--al-plate2); }
.sim-item.is-read .sim-item__from{ color:var(--al-md); font-weight:500; }
.sim-item.is-read{ opacity:.82; }
/* Unread (nepročitano) — podebljan pošiljalac + topli akcenat levo, kao u pravom klijentu */
.sim-item.is-unread{ box-shadow:inset 2px 0 0 var(--al-accent); }
.sim-item.is-unread .sim-item__from{ font-weight:700; color:var(--al-hi); }
.sim-item.is-unread .sim-item__subj{ color:var(--al-hi); }
.sim-item[aria-current="true"]{ background:var(--al-brand-soft); box-shadow:inset 2px 0 0 var(--al-brand); }
.sim-item[aria-current="true"] .sim-item__from{ color:var(--al-hi); }
.sim-item:disabled{ cursor:default; opacity:.5; }
.sim-item__ch{
  flex:0 0 auto; width:30px; height:30px; border-radius:4px;
  display:flex; align-items:center; justify-content:center; background:var(--ch,#8fa9c4);
}
.sim-item__ch svg{ width:16px; height:16px; display:block; color:#12110f; }
/* boja kanala kroz klasu — CSP blokira inline style atribute iz JS-a */
.sim-item__ch.ch--mejl{ --ch:#8fa9c4; }
.sim-item__ch.ch--sms{ --ch:#c79248; }
.sim-item__ch.ch--wa{ --ch:#7fa168; }
.sim-item__ch.ch--viber{ --ch:#8f7fd0; }
.sim-item__body{ min-width:0; flex:1 1 auto; }
.sim-item__from{ font-size:13.5px; font-weight:600; color:var(--al-hi); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sim-item__subj{ font-size:12.5px; color:var(--al-md); margin-top:2px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.sim-item__snip{ font-size:11.5px; color:var(--al-mute-text); margin-top:3px; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.sim-item__meta{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:5px; padding-top:2px; }
.sim-item__time{ font-family:var(--font-mono); font-size:10px; color:var(--al-mute-text);
  font-variant-numeric:tabular-nums; }
.sim-item__lvl{ font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; line-height:1;
  color:var(--al-mute-text); border:1px solid var(--al-line2); border-radius:2px; padding:2px 4px; }

/* ---- čitač ---- */
.sim__reader{ padding:20px 22px 24px; }
.sim__empty{
  display:flex; align-items:center; justify-content:center; min-height:280px; padding:40px; text-align:center;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--al-mute-text); text-transform:uppercase;
}
.sim-mail__head{ margin:0 0 16px; }
.sim-mail__badge{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:12px;
  font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--al-risk-med); border:1px solid color-mix(in srgb, var(--al-risk-med) 40%, transparent);
  padding:5px 9px; border-radius:2px;
}
.sim-mail__badge::before{
  content:""; width:6px; height:6px; background:var(--al-risk-med);
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);
}
.sim-mail__rows{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; padding-bottom:14px; border-bottom:1px solid var(--al-line); }
.sim-mail__k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--al-mute-text); padding-top:2px; white-space:nowrap; }
.sim-mail__v{ font-size:14px; color:var(--al-hi); line-height:1.45; overflow-wrap:anywhere; }
.sim-mail__v .sim-addr{ font-family:var(--font-mono); font-size:12.5px; color:var(--al-md); }
.sim-mail__subject{ margin:16px 0 6px; font-size:19px; font-weight:600; letter-spacing:-.015em; color:var(--al-hi); line-height:1.25; text-wrap:balance; }

/* email papir — uvek svetla kartica */
.sim__paper{
  background:#f5f3ee; color:#1c1b19; border:1px solid rgba(0,0,0,.10); border-radius:4px;
  padding:20px 22px; margin-top:14px; font-size:14.5px; line-height:1.6;
}
.sim__paper p{ margin:0 0 12px; color:#1c1b19; }
.sim__paper p:last-child{ margin:0; }
.sim__paper strong{ color:#000; }
.sim__paper .sim-signoff{ color:#4a4842; font-size:13px; }
.sim__paper hr{ border:0; border-top:1px solid rgba(0,0,0,.10); margin:16px 0; }
.sim-cta{
  display:inline-block; background:#2f6fd6; color:#fff !important; text-decoration:none;
  padding:10px 18px; border-radius:4px; font-weight:600; font-size:13.5px; margin:6px 0; cursor:pointer;
}
.sim-cta:hover{ background:#2a63bd; }
html[data-theme="light"] .sim__paper{
  background:#ffffff; border-color:rgba(0,0,0,.08);
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(20,20,18,.06);
}

/* ---- telefonski ekran (tema-nezavisan) ---- */
/* Realne proporcije (~9:16, min-height 498 na 280 širine) umesto visine po
   sadržaju iz predaje — sa jednim mehurom je telefon ispadao zdepast
   („kepec", Denis 2026-07-07). Chat raste da popuni ekran, mehuri se sidre
   na DNO kao u pravom razgovoru; dug niz mehurića normalno izdužuje telefon
   (min-height, NE aspect-ratio — aspect-ratio je sabijao flex decu). */
.sim-phone{
  --bar:#20232a; --chat:#f2f2f7; --bub:#ffffff; --ink:#141414;
  width:min(280px,100%); margin:2px auto 0;
  display:flex; flex-direction:column; min-height:498px;
  background:var(--chat); border-radius:30px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.34), 0 0 0 6px #0a0a0a, 0 0 0 7px #33332f;
}
.sim-phone--wa{ --bar:#075e54; --chat:#e6ddd4; }
.sim-phone--viber{ --bar:#5d54a4; --chat:#f3f2f8; }
.sim-phone__st{
  display:flex; justify-content:space-between; align-items:center;
  padding:9px 18px 4px; background:var(--bar); color:#fff;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
}
.sim-phone__st .sig{ display:flex; align-items:center; gap:5px; }
.sim-phone__bat{ width:18px; height:9px; border:1px solid rgba(255,255,255,.85); border-radius:2px; position:relative; }
.sim-phone__bat::after{ content:""; position:absolute; left:1px; top:1px; bottom:1px; width:11px; background:#fff; border-radius:1px; }
.sim-phone__bat::before{ content:""; position:absolute; right:-3px; top:2.5px; width:2px; height:3px; background:rgba(255,255,255,.85); border-radius:0 1px 1px 0; }
.sim-phone__ab{ display:flex; align-items:center; gap:9px; padding:7px 12px 11px; background:var(--bar); color:#fff; }
.sim-phone__bk{ font-size:20px; line-height:1; opacity:.92; }
.sim-phone__av{ width:30px; height:30px; border-radius:50%; flex:0 0 auto; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; }
.sim-phone__av svg{ width:17px; height:17px; color:rgba(255,255,255,.9); }
.sim-phone__id{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.sim-phone__nm{ font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sim-phone__ap{ font-size:10px; opacity:.78; letter-spacing:.02em; }
.sim-phone__ch{ padding:16px 13px 20px; min-height:132px; background:var(--chat);
  background-image:radial-gradient(rgba(0,0,0,.025) 1px, transparent 1px); background-size:16px 16px;
  flex:1; display:flex; flex-direction:column; justify-content:flex-end; }
.sim-phone__bub{
  position:relative; max-width:90%; background:var(--bub); color:var(--ink);
  padding:10px 12px 22px; border-radius:12px 12px 12px 3px;
  font-size:13px; line-height:1.5; box-shadow:0 1px 1.5px rgba(0,0,0,.16);
  flex:0 0 auto;   /* mehur se nikad ne sabija (chat je flex kolona) */
}
.sim-phone__bub + .sim-phone__bub{ margin-top:8px; }
.sim-phone__tm{ position:absolute; right:10px; bottom:6px; font-size:9.5px; color:#9a9a9a; }
.sim-phone__note{ margin-top:14px; text-align:center; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--al-mute-text); }

/* ---- ZNAK (.sim-sign) — stanja ---- */
.sim-sign{ position:relative; border-radius:3px; padding:0 2px; }
.sim--vezba .sim-sign[data-sign]{
  text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px;
  text-decoration-color:rgba(192,57,43,.65); text-decoration-thickness:1.5px; cursor:pointer;
}
.sim--vezba .sim-sign[data-sign]:hover{ background:rgba(192,57,43,.14); }
.sim--vezba .sim-sign[data-sign].is-clicked{ background:rgba(192,57,43,.16); box-shadow:0 0 0 2px rgba(192,57,43,.34); font-weight:600; }
.sim--kviz .sim-sign{ cursor:pointer; }
.sim--kviz .sim-sign:hover{ background:rgba(120,120,120,.14); }
.sim--kviz .sim-sign.is-picked{ background:rgba(233,168,20,.34); box-shadow:0 0 0 2px rgba(233,168,20,.5); }
.sim-sign.is-correct{ background:rgba(127,161,104,.30); box-shadow:0 0 0 2px rgba(127,161,104,.5); font-weight:600; }
.sim-sign.is-wrong{ background:rgba(208,96,78,.26); box-shadow:0 0 0 2px rgba(208,96,78,.5); text-decoration:line-through; }
.sim-sign.is-missed{ background:rgba(192,57,43,.14); box-shadow:0 0 0 2px rgba(192,57,43,.4); }
.sim--odluci .sim-sign[data-sign].is-revealed{ background:rgba(192,57,43,.14); box-shadow:0 0 0 2px rgba(192,57,43,.32); }

/* ---- panel analize ---- */
.sim__panel{ padding:18px 18px 22px; display:flex; flex-direction:column; gap:14px; }
.sim__panelhead{
  font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--al-mute-text); padding-bottom:12px; border-bottom:1px solid var(--al-line);
}
.sim__panelmsg{ font-size:13px; line-height:1.55; color:var(--al-mute-text); text-wrap:pretty; }
.sim .u-md{ color:var(--al-md); }

/* Vežba: legitimna poruka — objašnjenje zašto je bezbedna */
.sim-legit{ border:1px solid var(--al-line); border-left:3px solid var(--al-risk-low); background:var(--al-plate2);
  padding:14px 15px; margin-bottom:12px; font-size:13px; line-height:1.55; color:var(--al-md); }
.sim-legit b{ color:var(--al-hi); }

/* Vežba: spisak svih zastavica trenutne poruke */
.sim-signlist{ margin-top:14px; border-top:1px dashed var(--al-line); padding-top:12px; }
.sim-signlist__lead{ margin:0 0 8px; font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--al-mute-text); }
.sim-signlist__it{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  padding:8px 10px; background:transparent; border:1px solid var(--al-line); border-radius:2px;
  font-size:12.5px; color:var(--al-md); transition:border-color .13s ease, background .13s ease; }
.sim-signlist__it + .sim-signlist__it{ margin-top:6px; }
.sim-signlist__it:hover{ border-color:var(--al-mute); }
.sim-signlist__it.on{ background:var(--al-brand-soft); border-color:var(--al-brand); color:var(--al-hi); }
.sim-signlist__it .rk{ width:7px; height:7px; flex:0 0 auto;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.sim-signlist__it .rk--hi{ background:var(--al-risk-hi); }
.sim-signlist__it .rk--med{ background:var(--al-risk-med); }
.sim-signlist__it .rk--low{ background:var(--al-risk-low); }
.sim-expl{ border:1px solid var(--al-line); border-left:3px solid var(--sig,#c0392b); background:var(--al-plate2); padding:15px 16px; }
.sim-expl--hi{ --sig:var(--al-risk-hi); }
.sim-expl--med{ --sig:var(--al-risk-med); }
.sim-expl--low{ --sig:var(--al-risk-low); }
.sim-expl__cat{ display:flex; align-items:center; gap:8px; margin:0 0 12px; font-size:15px; font-weight:600; color:var(--al-hi); letter-spacing:-.01em; }
.sim-expl__risk{
  font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--sig,#c0392b); border:1px solid color-mix(in srgb,var(--sig,#c0392b) 45%,transparent);
  padding:2px 6px; border-radius:2px; margin-left:auto;
}
.sim-expl__block + .sim-expl__block{ margin-top:12px; }
.sim-expl__k{ font-family:var(--font-mono); font-size:9.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--al-accent-text); margin:0 0 4px; }
.sim-expl__v{ font-size:13.5px; line-height:1.55; color:var(--al-md); margin:0; }
.sim-quiz__stat{ display:flex; flex-direction:column; gap:6px; }
.sim-quiz__row{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--al-md); padding:6px 0; border-top:1px dashed var(--al-line); }
.sim-quiz__row strong{ font-family:var(--font-mono); color:var(--al-hi); font-variant-numeric:tabular-nums; }
.sim-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.06em;
  padding:12px 16px; border-radius:2px; cursor:pointer; text-transform:uppercase;
  border:1px solid var(--al-line2); background:var(--al-field); color:var(--al-hi);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.sim-btn:hover{ border-color:var(--al-mute); }
.sim-btn:disabled{ opacity:.45; cursor:not-allowed; }
.sim-btn--primary{ background:var(--al-brand); border-color:var(--al-brand); color:#fff; }
.sim-btn--primary:hover{ background:var(--al-brand-hi); border-color:var(--al-brand-hi); }
.sim-btn--danger{ color:#fff; background:#a5342a; border-color:#a5342a; }
.sim-btn--danger:hover{ background:#bd3a2e; border-color:#bd3a2e; }
.sim-btn--safe{ color:var(--al-risk-low); border-color:color-mix(in srgb,var(--al-risk-low) 45%,transparent); }
.sim-btn--safe:hover{ background:color-mix(in srgb,var(--al-risk-low) 12%,transparent); border-color:var(--al-risk-low); }
.sim__panelbtns{ display:flex; flex-direction:column; gap:9px; }
.sim-decide__q{ font-size:13.5px; line-height:1.5; color:var(--al-md); margin:0 0 4px; }
.sim-decide__prog{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--al-mute-text); }
.sim-decide__prog b{ color:var(--al-accent-text); }
.sim-decide__verdict{ padding:12px 14px; border:1px solid var(--al-line); border-left:3px solid var(--v,#7fa168); background:var(--al-plate2); font-size:13px; line-height:1.5; color:var(--al-md); }
.sim-decide__verdict b{ color:var(--al-hi); }
.sim-decide__verdict--ok{ --v:var(--al-risk-low); }
.sim-decide__verdict--bad{ --v:var(--al-risk-hi); }
.sim-decide__why{ display:block; margin-top:8px; font-size:12.5px; line-height:1.5; color:var(--al-mute-text); }
/* Odluči kontrola — samo mobilni (≤719). Denisova dorada mobilnog brifa:
   reader je flex kolona — poruka skroluje GORE (.sim__msgscroll), a kontrola
   sedi DOLE (ne preklapa poruku, kao ranija sticky traka). Odluka = dve kocke
   u donjim uglovima (crvena X · zelena ✓) sa progresom+brojačem u sredini;
   posle odluke = verdikt-traka + „Sledeća". Desktop: skriveno (panel uz poruku). */
.sim-decidebar{ display:none; }
@media (max-width:719px){
  /* reader kao flex kolona: poruka gore (skrol), kontrola dole (fiksno) */
  .sim--odluci .sim__grid[data-view="reader"] .sim__reader{ display:flex; flex-direction:column; overflow:hidden; }
  .sim__msgscroll{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
  /* poruka u Odluči malo niža (Denis: suzi po visini, podigni iznad kontrole) */
  .sim--odluci .sim__msgscroll .sim-phone{ min-height:360px; }

  /* verdikt-traka (posle odluke) */
  .sim-decidebar{
    display:block; flex:0 0 auto; margin:0; padding:9px 16px 11px;
    border:0; border-top:1px solid var(--al-line2); background:var(--al-plate);
  }
  .sim-decidebar--ok{ box-shadow:inset 3px 0 0 var(--al-risk-low); }
  .sim-decidebar--bad{ box-shadow:inset 3px 0 0 var(--al-risk-hi); }
  .sim-decidebar__seg{ display:flex; gap:3px; margin:0 0 8px; }
  .sim-decidebar__cell{ flex:1 1 0; height:3px; border-radius:2px; background:var(--al-line2); }
  .sim-decidebar__cell.is-done{ background:var(--al-risk-low); }
  .sim-decidebar__cell.is-miss{ background:var(--al-risk-hi); }
  .sim-decidebar__cell.is-current{ background:var(--al-accent); }
  .sim-decidebar__v{ margin:0 0 9px; font-size:12.5px; line-height:1.5; color:var(--al-md); }
  .sim-decidebar__v b{ color:var(--al-hi); }
  .sim-decidebar .sim__panelbtns{ flex-direction:row; gap:8px; }
  .sim-decidebar .sim__panelbtns .sim-btn{ flex:1; min-height:0; padding:9px 12px; font-size:11.5px; }

  /* ODLUKA — kocke u uglovima + progres/brojač u sredini, spušteno uz traku */
  .sim-decidebar--choose{
    display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
    padding:8px 12px 10px; border-top:1px solid var(--al-line); background:var(--al-plate);
    box-shadow:none;
  }
  .sim-dsq{
    flex:0 0 auto; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
    border:0; border-radius:3px; cursor:pointer; color:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.35); transition:background .12s ease, transform .1s ease;
  }
  .sim-dsq svg{ width:26px; height:26px; }
  .sim-dsq:active{ transform:translateY(1px); }
  .sim-dsq--report{ background:#a5342a; }
  .sim-dsq--report:active{ background:#bd3a2e; }
  .sim-dsq--safe{ background:#5a8a3f; }
  .sim-dsq--safe:active{ background:#69a049; }
  .sim-dsq-mid{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; gap:7px; padding-bottom:7px; }
  .sim-dsq-mid .sim-decidebar__seg{ width:100%; max-width:170px; margin:0; }
  .sim-dsq-count{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--al-mute-text); }
  .sim-dsq-count b{ color:var(--al-accent-text); }

  /* Odluči: treći ekran (Analiza) je isključen — duplira drugi. Tab se sakriva,
     traka postaje dvodelna, a rezultat se prikazuje u čitaču (.sim__resultm). */
  .sim--odluci .sim__tab[data-sim-view="panel"]{ display:none; }
  .sim--odluci .sim__tabbar{ grid-template-columns:repeat(2,1fr); }
  .sim__resultm{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:18px 16px 24px; }
  .sim__resultm-head{ font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 14px; }
}
.sim-result{ border:1px solid var(--al-line); border-left:3px solid var(--al-brand); background:var(--al-plate2); padding:18px; }
.sim-result--good{ border-left-color:var(--al-risk-low); --big:var(--al-risk-low); }
.sim-result--mid{ border-left-color:var(--al-risk-med); --big:var(--al-risk-med); }
.sim-result--bad{ border-left-color:var(--al-risk-hi); --big:var(--al-risk-hi); }
.sim-result__lead{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 12px; }
.sim-result__big{ font-family:var(--font-mono); font-size:46px; font-weight:600; line-height:1; color:var(--big,#c79248); letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.sim-result__biglbl{ font-size:12.5px; color:var(--al-mute-text); margin-top:6px; }
.sim-result__rows{ margin-top:16px; }
.sim-result__row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; color:var(--al-md); padding:9px 0; border-top:1px dashed var(--al-line); }
.sim-result__row strong{ font-family:var(--font-mono); color:var(--al-hi); font-variant-numeric:tabular-nums; }
.sim-result__note{ margin-top:14px; font-size:12.5px; line-height:1.55; color:var(--al-mute-text); text-wrap:pretty; }
.sim-result__big .of{ font-size:22px; color:var(--al-mute-text); }
.sim-result__note .u-ok{ color:var(--al-risk-low); }
.sim-result__note .u-bad{ color:var(--al-risk-hi); }
.sim-result__note .u-brand{ color:var(--al-brand-text); }

/* ---- mobilni: donji tab bar ---- */
.sim__tabbar{ display:none; }
@media (max-width:719px){
  /* Sanduče od ivice do ivice (Denis, 2026-07-07): elementi unutra već imaju
     sopstveni padding, pa bočni gutter stranice (28px) samo krade širinu.
     Negativne margine ponište .simx padding; bočne ivice i L-uglovi otpadaju. */
  /* APP OKVIR (Denis): .sim = pane visine jednog ekrana (viewport − heder).
     Flex kolona: režim GORE (fiksno) · sadržaj SREDINA (skroluje) · tabbar
     DOLE (fiksno). Ista visina za sva tri prikaza → bez poskakivanja; tabbar
     je pravi flex-ред na dnu (ne sticky-preko) → NE preklapa poruke; kolona
     skroluje interno, a na krajevima LANČA na stranicu (bez overscroll:contain
     → nastavlja iznad/ispod klijenta ka herou/članku). */
  body.page-alat-simulator .sim{
    margin-left:-28px; margin-right:-28px; border-left:0; border-right:0;
    display:flex; flex-direction:column;
    /* pane = viewport − heder − globalni .cp-tabbar (48px + safe-area, S85):
       interni prebacivač tako sedi tik IZNAD tabbara, ne ispod njega */
    height:calc(100vh - 56px - 48px);
    height:calc(100dvh - var(--hdr-h, 56px) - 48px - env(safe-area-inset-bottom, 0px));
    scroll-margin-top:var(--hdr-h, 56px);
    overflow-x:clip;   /* klizna animacija (translateX) ne sme da napravi h-preliv */
  }
  body.page-alat-simulator .sim::before,
  body.page-alat-simulator .sim::after{ display:none; }
  .sim__modebar{ flex:0 0 auto; }
  /* Režim čipovi = segmentirana kontrola u JEDNOM redu (Denis): svaki trećina
     širine, centriran; staje i na 360px. Lead ide iznad, hint ispod. */
  .sim__modes{ width:100%; flex-wrap:nowrap; gap:6px; }
  .sim__mode{ flex:1 1 0; justify-content:center; padding:9px 6px; letter-spacing:.06em; }
  /* grid → flex kolona koja puni pane; vidljiva kolona skroluje interno */
  .sim__grid{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
  .sim__grid[data-view="inbox"] .sim__reader,
  .sim__grid[data-view="inbox"] .sim__panel{ display:none; }
  .sim__grid[data-view="reader"] .sim__inbox,
  .sim__grid[data-view="reader"] .sim__panel{ display:none; }
  .sim__grid[data-view="panel"] .sim__inbox,
  .sim__grid[data-view="panel"] .sim__reader{ display:none; }
  .sim__col{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .sim__col + .sim__col{ border-top:0; }
  /* klizni prelaz između ekrana (svajp / tabbar): novi ekran ulazi sa strane */
  .sim__grid.is-slide-fwd .sim__col{ animation:simSlideFwd .19s ease; }
  .sim__grid.is-slide-back .sim__col{ animation:simSlideBack .19s ease; }
  @keyframes simSlideFwd{ from{ opacity:.35; transform:translateX(26px); } to{ opacity:1; transform:none; } }
  @keyframes simSlideBack{ from{ opacity:.35; transform:translateX(-26px); } to{ opacity:1; transform:none; } }
  .sim__list{ max-height:none; }
  /* safe-area padding otpao (S85): sada ga nosi .cp-tabbar ispod prebacivača */
  .sim__tabbar{ flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--al-line); background:var(--al-plate2); }
  .sim__tab{
    position:relative;
    display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 6px; min-height:52px; cursor:pointer;
    background:transparent; border:0; border-right:1px solid var(--al-line);
    font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--al-mute-text);
  }
  .sim__tab:last-child{ border-right:0; }
  .sim__tab svg{ width:18px; height:18px; }
  /* aktivna crvena traka kao ::before element (ne inset box-shadow — Safari
     na sticky tabbaru lenjo repaint-uje senke pa linija „kasni" za tabom) */
  .sim__tab[aria-selected="true"]{ color:var(--al-hi); }
  .sim__tab[aria-selected="true"]::before{
    content:""; position:absolute; top:-1px; left:0; right:0; height:2px;
    background:var(--al-brand);
  }
}
@media (max-width:820px){ .sim__hint{ margin-left:0; flex-basis:100%; } }

/* ---- Nivo 2 · banner učesnika ---- */
.sim-testbanner{ display:none; }
.sim-testbanner.on{
  display:flex; align-items:center; gap:16px 20px; flex-wrap:wrap; margin-bottom:16px; padding:15px 20px;
  border:1px solid var(--al-line); border-left:3px solid var(--al-brand); background:var(--al-plate);
}
.sim-testbanner__badge{ display:inline-flex; align-items:center; gap:9px; flex:0 0 auto; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--al-brand-text); }
.sim-testbanner__badge::before{ content:""; width:8px; height:8px; background:var(--al-brand); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.sim-testbanner__tx{ flex:1 1 320px; min-width:0; font-size:13.5px; line-height:1.55; color:var(--al-md); }
.sim-testbanner__tx b{ color:var(--al-hi); }
.sim-testbanner__code{ flex:0 0 auto; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--al-mute-text); border:1px solid var(--al-line2); padding:6px 11px; border-radius:2px; }
.sim-testbanner__code b{ color:var(--al-accent-text); font-weight:500; }
.sim--locked .sim__mode[data-sim-mode="vezba"],
.sim--locked .sim__mode[data-sim-mode="kviz"]{ display:none; }
.sim--locked .sim__modelead::after{ content:" · ZAKLJUČANO"; color:var(--al-mute-text); }

/* ============================================================
   ČLANAK + PODELI  (dizajnerov sim-article.css)
   ============================================================ */
.simx__article{ margin-top:64px; }
/* centrirana kolona sa levim tekstom — isti obrazac kao članak na /lozinka/;
   samo bočne margine, da ne pregazi margin-top sa .simx__article */
.simx__read{ max-width:760px; margin-left:auto; margin-right:auto; }
.simx__sec{ padding-top:48px; }
.simx__sec:first-child{ padding-top:0; }
/* Nadnaslov sekcije. Selektor MORA da nosi i `.simx__read p`, inace ga
   generalno pravilo za pasus u clanku (nize u fajlu: `.simx__read p`,
   font-size:15.5px) pregazi i po specifičnosti i po redosledu — sto se i
   desavalo: deklarisano 11px, prikazivalo se 15.5px, a .16em razmaka se na
   toj velicini razvuklo na 2.48px pa su „//" izgledali kao markeri.
   Mera je 10.5px/.18em — ista kao sve ostale oznake iza „//". (S130) */
.simx__read p.simx__kick,
.simx__kick{ display:flex; align-items:center; gap:10px; margin:0 0 8px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--al-mute-text); }
.simx__kick::before{ content:""; width:6px; height:6px; background:var(--al-brand); flex:0 0 auto; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.simx__kick .n{ color:var(--al-accent-text); }
.simx__h2{ margin:0 0 10px; font-size:clamp(21px,2.2vw,27px); font-weight:600; letter-spacing:-.02em; line-height:1.15; color:var(--al-hi); text-wrap:balance; }
.simx__lead{ margin:0 0 6px; max-width:70ch; color:var(--al-md); font-size:16px; line-height:1.65; text-wrap:pretty; }
.simx__read p{ color:var(--al-md); font-size:15.5px; line-height:1.7; max-width:70ch; margin:0 0 14px; text-wrap:pretty; }
.simx__read p:last-child{ margin-bottom:0; }
.simx__read strong{ color:var(--al-hi); font-weight:600; }
.simx__read a{ color:var(--al-hi); text-decoration:none; border-bottom:1px solid var(--al-line2); transition:color .15s, border-color .15s; }
.simx__read a:hover{ color:var(--al-brand-text); border-bottom-color:var(--al-brand-hi); }
.simx__signs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--al-line); border:1px solid var(--al-line); margin:20px 0 0; }
.simx__signcard{ background:var(--al-plate); padding:16px 18px 18px; }
.simx__signcard .ix{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; color:var(--al-mute-text); font-variant-numeric:tabular-nums; }
.simx__signcard h3{ display:flex; align-items:center; gap:9px; margin:8px 0 7px; font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:var(--al-hi); }
.simx__signcard h3::before{ content:""; width:7px; height:7px; flex:0 0 auto; background:var(--c,#c79248); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.simx__signcard p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--al-mute-text); max-width:none; }
.simx__signcard--hi{ --c:var(--al-risk-hi); }
.simx__signcard--med{ --c:var(--al-risk-med); }
.simx__chans{ display:grid; gap:0; border:1px solid var(--al-line); margin:20px 0 0; }
.simx__chan{ display:grid; grid-template-columns:auto 128px 1fr; gap:16px; align-items:center; padding:14px 18px; }
.simx__chan + .simx__chan{ border-top:1px dashed var(--al-line); }
.simx__chan .dot{ width:10px; height:10px; flex:0 0 auto; border-radius:50%; background:var(--c,#8fa9c4); }
.simx__chan--mejl{ --c:#8fa9c4; }
.simx__chan--sms{ --c:#c79248; }
.simx__chan--wa{ --c:#7fa168; }
.simx__chan--viber{ --c:#8f7fd0; }
.simx__chan .nm{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--al-hi); }
.simx__chan .ds{ font-size:13.5px; line-height:1.5; color:var(--al-mute-text); }
@media (max-width:560px){ .simx__chan{ grid-template-columns:auto 1fr; } .simx__chan .ds{ grid-column:1 / -1; } }
.simx__steps{ list-style:none; margin:20px 0 0; padding:0; counter-reset:st; display:grid; gap:14px; }
.simx__steps li{ counter-increment:st; position:relative; padding-left:46px; color:var(--al-md); font-size:15px; line-height:1.6; max-width:66ch; }
.simx__steps li::before{ content:counter(st,decimal-leading-zero); position:absolute; left:0; top:1px; font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--al-accent-text); }
.simx__steps strong{ color:var(--al-hi); }
.simx__firm{ margin:22px 0 0; padding:20px 22px; border:1px solid var(--al-line); border-left:3px solid var(--al-brand); background:var(--al-plate); display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.simx__firm .tx{ flex:1 1 320px; min-width:0; }
.simx__firm h3{ margin:0 0 6px; font-size:17px; font-weight:600; color:var(--al-hi); letter-spacing:-.01em; }
.simx__firm p{ margin:0; font-size:14px; line-height:1.6; color:var(--al-md); max-width:60ch; }
.simx__cta{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding:12px 18px; border-radius:2px; text-decoration:none; background:var(--al-brand); color:#fff !important; border:1px solid var(--al-brand); transition:background .15s, border-color .15s; }
.simx__cta:hover{ background:var(--al-brand-hi); border-color:var(--al-brand-hi); }

/* „Iz stvarnog sandučeta" — rekonstrukcija primljenog fišing mejla + anotacije.
   Statična (nema klikabilnih linkova — adresa/prosleđivanje su plain spanovi).
   Na desktopu se blok PROBIJA iz 760 kolone članka do širine sandučeta (isti
   --container-wide kao .sim iznad), sa više vazduha gore/dole — da ne bude
   slepljen za tekst (Denis, 2026-07-07). */
.simx-real{ margin:36px 0 0; border:1px solid var(--al-line); background:var(--al-plate); }
.simx-real__hd{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; padding:17px 22px; background:var(--al-plate2); border-bottom:1px solid var(--al-line); }
.simx-real__k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); padding-top:3px; }
.simx-real__v{ font-size:14px; line-height:1.5; color:var(--al-hi); min-width:0; overflow-wrap:anywhere; }
.simx-real__bd{ padding:28px 24px 30px; }
.simx-real__bd p{ margin:0 0 14px; font-size:14px; line-height:1.7; color:var(--al-md); max-width:78ch; }
.simx-real__bd p:last-child{ margin-bottom:0; }
.simx-real__lnk{ color:var(--al-brand-text); border-bottom:1px solid color-mix(in srgb, var(--al-brand-hi) 40%, transparent); overflow-wrap:anywhere; }
.simx-real__ft{ padding:14px 22px; border-top:1px solid var(--al-line); font-family:var(--font-mono); font-size:11px; line-height:1.65; color:var(--al-mute-text); }
.simx-real__list{ margin:24px 0 0; padding:0; list-style:none; }
.simx-real__list li{ position:relative; padding-left:22px; margin:0 0 12px; font-size:14px; line-height:1.6; color:var(--al-md); max-width:70ch; }
.simx-real__list li::before{ content:""; position:absolute; left:0; top:8px; width:8px; height:8px; background:var(--al-risk-hi); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.simx-real__list strong{ color:var(--al-hi); }
.simx-real__note{ margin:18px 0 0; padding-top:16px; border-top:1px dashed var(--al-line); font-size:13.5px; line-height:1.6; color:var(--al-mute-text); max-width:70ch; }
/* desktop: SAMO kartica se probija iz 760 kolone, i to na umerenu širinu —
   ni usku kao tekst (760) ni široku kao sanduče (1320), negde između (Denis).
   Anotacije ostaju u koloni teksta (da tekst ne beži u širinu). */
@media (min-width:761px){
  .simx-real{
    width:980px;
    max-width:calc(100vw - 56px);
    margin-top:44px; margin-left:50%;
    transform:translateX(-50%);
  }
  .simx-real__list{ margin-top:26px; }
}
/* mobilni: primer je edge-to-edge, kao sanduče iznad (full-bleed, poништи 28px
   gutter .simx-a). Denis: „širina sandučeta i za mobilni." Anotacije ostaju u
   koloni teksta (edge-to-edge tekst bi bio pretesan). */
@media (max-width:719px){
  .simx-real{ margin-left:-28px; margin-right:-28px; border-left:0; border-right:0; }
}
@media (max-width:560px){ .simx-real__hd{ grid-template-columns:1fr; gap:3px; } .simx-real__k{ padding-top:8px; } }
.simx__faq{ margin:20px 0 0; border:1px solid var(--al-line); }
.simx__faq details{ border-bottom:1px solid var(--al-line); }
.simx__faq details:last-child{ border-bottom:0; }
.simx__faq summary{ list-style:none; cursor:pointer; padding:15px 18px; display:flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color:var(--al-hi); letter-spacing:-.005em; }
.simx__faq summary::-webkit-details-marker{ display:none; }
.simx__faq summary::before{ content:"+"; flex:0 0 auto; width:18px; text-align:center; font-family:var(--font-mono); font-size:16px; color:var(--al-accent-text); transition:transform .18s; }
.simx__faq details[open] summary::before{ content:"–"; }
.simx__faq summary:hover{ color:var(--al-brand-text); }
.simx__faq .a{ padding:0 18px 16px 48px; }
.simx__faq .a p{ margin:0; font-size:14px; line-height:1.65; color:var(--al-md); max-width:70ch; }
.simx__links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; background:var(--al-line); border:1px solid var(--al-line); margin:20px 0 0; }
.simx__link{ background:var(--al-plate); padding:16px 18px; text-decoration:none; display:block; transition:background .13s; }
.simx__link:hover{ background:var(--al-plate2); }
.simx__link .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); }
.simx__link .t{ display:block; margin-top:6px; font-size:15px; font-weight:600; color:var(--al-hi); letter-spacing:-.01em; }
.simx__link .t::after{ content:" →"; color:var(--al-accent-text); }
.simx__share{ max-width:760px; margin:56px auto 0; padding:24px 26px; border:1px solid var(--al-line); background:var(--al-plate2); display:flex; gap:24px; align-items:center; flex-wrap:wrap; }
.simx__share .tx{ flex:1 1 300px; }
.simx__share .k{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 8px; }
.simx__share h3{ margin:0 0 6px; font-size:19px; font-weight:600; color:var(--al-hi); letter-spacing:-.015em; }
.simx__share p{ margin:0; font-size:14px; line-height:1.6; color:var(--al-md); max-width:52ch; }
.simx__sharebtns{ display:flex; gap:9px; flex-wrap:wrap; }
.simx__sharebtn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; padding:11px 15px; border-radius:2px; cursor:pointer; text-decoration:none; border:1px solid var(--al-line2); background:var(--al-field); color:var(--al-hi); transition:border-color .15s, background .15s; }
.simx__sharebtn:hover{ border-color:var(--al-mute); }
.simx__sharebtn svg{ width:15px; height:15px; }
.simx__sharebtn.ok{ border-color:var(--al-risk-low); color:var(--al-risk-low); }

/* transparentnost — ista centrirana kolona, sitniji zapis */
.simx__note{ max-width:760px; margin:32px auto 0; padding-top:20px; border-top:1px dashed var(--al-line); }
.simx__note p{ margin:0 0 10px; font-size:13.5px; line-height:1.65; color:var(--al-mute-text); text-wrap:pretty; }
.simx__note p:last-child{ margin-bottom:0; }
.simx__note b{ color:var(--al-md); font-weight:600; }

/* ============================================================
   NIVO 2 — timski test: stepper, kartica kreiranja, dashboard
   (port dizajnerove predaje, Test v1 HTML)
   ============================================================ */
/* Nivo 2 = centrirana kolona (kao članak na /simulator/): stepper, kartica
   i dashboard dele istu osu. margin-left/right pojedinačno, NE shorthand —
   shorthand bi gazio postojeće vertikalne margine. */
/* stepper */
.simt__steps{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:28px;
  max-width:760px; margin-left:auto; margin-right:auto; }
.simt__steps--dash{ max-width:940px; }
.simt__steps .arr{ color:var(--al-mute-text); }
.simt__step{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--al-mute-text); }
.simt__step .n{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; border:1px solid var(--al-line2); border-radius:2px; font-size:11px; color:var(--al-mute-text); }
.simt__step.on{ color:var(--al-hi); }
.simt__step.on .n{ border-color:var(--al-brand); color:#fff; background:var(--al-brand); }
.simt__step.done .n{ border-color:var(--al-risk-low); color:var(--al-risk-low); }

/* panel kartica */
.simt{ max-width:760px; margin-left:auto; margin-right:auto; }
.simt__card{ border:1px solid var(--al-line); background:var(--al-plate); position:relative; }
.simt__card::before,.simt__card::after{ content:""; position:absolute; width:14px; height:14px; border:0 solid var(--al-mute); pointer-events:none; }
.simt__card::before{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; }
.simt__card::after{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; }
.simt__head{ display:flex; align-items:center; gap:10px; padding:14px 20px; background:var(--al-plate2); border-bottom:1px solid var(--al-line);
  font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--al-mute-text); }
.simt__head .code{ margin-left:auto; color:var(--al-accent-text); }
.simt__body{ padding:24px 22px; margin:0; }
.simt__body p.simt__intro{ margin:0 0 20px; color:var(--al-md); font-size:15px; line-height:1.65; max-width:60ch; }
.simt__intro code{ font-family:var(--font-mono); font-size:.88em; color:var(--al-hi); }

/* forma */
.simt__field{ margin-bottom:18px; }
.simt__label{ display:block; margin-bottom:8px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--al-mute-text); }
.simt__label .opt{ color:var(--al-mute-text); }
.simt__input{ width:100%; height:44px; padding:0 14px; background:var(--al-field); border:1px solid var(--al-line2); border-radius:2px;
  font-family:var(--font-sans); font-size:15px; color:var(--al-hi); }
.simt__input::placeholder{ color:var(--al-mute-text); }
.simt__input:focus{ outline:none; border-color:var(--al-mute); }
.simt__hintline{ margin:6px 0 0; font-size:12.5px; color:var(--al-mute-text); line-height:1.5; }
.simt__err{ margin:0 0 18px; padding:12px 15px; border:1px solid var(--al-line); border-left:2px solid var(--al-brand); background:var(--al-plate2);
  font-size:13px; line-height:1.55; color:var(--al-md); }
.simt__hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* link blokovi */
.simt__link{ border:1px solid var(--al-line); border-left:2px solid var(--lc,var(--al-brand)); background:var(--al-plate2); padding:15px 17px; }
.simt__link + .simt__link{ margin-top:14px; }
.simt__link--play{ --lc:var(--al-risk-low); }
.simt__link--res{ --lc:var(--al-brand); }
.simt__link .lh{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--lc,var(--al-accent)); margin-bottom:5px; }
.simt__link .ld{ font-size:12.5px; color:var(--al-mute-text); margin:0 0 11px; line-height:1.5; }
.simt__link .ld b{ color:var(--al-hi); }
.simt__link .lr{ display:flex; gap:8px; }
.simt__link input{ flex:1 1 auto; min-width:0; height:40px; padding:0 12px; background:var(--al-field); border:1px solid var(--al-line2); border-radius:2px;
  font-family:var(--font-mono); font-size:12px; color:var(--al-hi); }
.simt__copy{ flex:0 0 auto; height:40px; padding:0 15px; background:var(--al-brand); color:#fff; border:0; border-radius:2px; cursor:pointer;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; display:inline-flex; align-items:center; gap:7px; }
.simt__copy:hover{ background:var(--al-brand-hi); }
.simt__copy.ok{ background:var(--al-risk-low); }
.simt__warn{ margin:16px 0 0; padding:12px 15px; border:1px solid var(--al-line); border-left:2px solid var(--al-risk-med); background:var(--al-plate2);
  font-size:12.5px; line-height:1.55; color:var(--al-md); }
.simt__warn b{ color:var(--al-hi); }
.simt__actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }

/* dashboard */
.simt-dash{ max-width:940px; margin-left:auto; margin-right:auto; }
/* prazno stanje (simt kartica) unutar dashboarda ostaje na osi dash kolone */
.simt-dash .simt{ margin-left:0; margin-right:0; }
.simt-dash__top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.simt-dash__title{ margin:0; font-size:22px; font-weight:600; letter-spacing:-.015em; color:var(--al-hi); }
.simt-dash__title span{ color:var(--al-accent-text); }
.simt-dash__meta{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--al-mute-text); }
.simres{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--al-line); border:1px solid var(--al-line); }
.simres__c{ background:var(--al-plate); padding:16px 18px 18px; }
.simres__l{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--al-mute-text); }
.simres__v{ font-family:var(--font-mono); font-size:34px; font-weight:600; line-height:1; margin-top:10px; color:var(--al-hi); font-variant-numeric:tabular-nums; }
.simres__v.mid{ color:var(--al-risk-med); }
.simres__v.good{ color:var(--al-risk-low); }
.simres__v.bad{ color:var(--al-risk-hi); }
.simres__s{ font-size:12px; color:var(--al-mute-text); margin-top:6px; line-height:1.4; }

.simt-dash__sub{ margin:32px 0 12px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--al-mute-text);
  display:flex; align-items:center; gap:10px; }
.simt-dash__sub::before{ content:""; width:6px; height:6px; background:var(--al-brand); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.simt-dash__tblwrap{ overflow-x:auto; }
.simtbl{ width:100%; border-collapse:collapse; border:1px solid var(--al-line); font-size:14px; }
.simtbl th,.simtbl td{ text-align:left; padding:12px 16px; border-bottom:1px solid var(--al-line); }
.simtbl th{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--al-mute-text); background:var(--al-field); }
.simtbl th.w-bar{ width:200px; }
.simtbl td{ color:var(--al-md); }
.simtbl tr:last-child td{ border-bottom:0; }
.simtbl .ch{ display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--al-hi); }
.simtbl .ch .d{ width:8px; height:8px; border-radius:50%; background:var(--c,#8fa9c4); flex:0 0 auto; }
.simtbl .d.d--mejl{ --c:#8fa9c4; }
.simtbl .d.d--sms{ --c:#c79248; }
.simtbl .d.d--wa{ --c:#7fa168; }
.simtbl .d.d--viber{ --c:#8f7fd0; }
.simtbl .bar{ display:flex; align-items:center; gap:10px; }
.simtbl .bar .track{ flex:1 1 auto; height:7px; min-width:80px; background:var(--al-field); border:1px solid var(--al-line); border-radius:4px; overflow:hidden; display:block; }
.simtbl .bar .fill{ height:100%; width:0; background:var(--bc,var(--al-risk-med)); display:block; }
.simtbl .fill--hi{ --bc:var(--al-risk-hi); }
.simtbl .fill--med{ --bc:var(--al-risk-med); }
.simtbl .fill--low{ --bc:var(--al-risk-low); }
.simtbl .bar .pc{ font-family:var(--font-mono); font-size:12.5px; color:var(--al-hi); font-variant-numeric:tabular-nums; width:38px; text-align:right; }

.simt-dash__read{ margin-top:26px; padding:18px 20px; border:1px solid var(--al-line); border-left:3px solid var(--al-brand); background:var(--al-plate); }
.simt-dash__read h3{ margin:0 0 8px; font-size:15px; font-weight:600; color:var(--al-hi); }
.simt-dash__read p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--al-md); max-width:74ch; }
.simt-dash__read p + p{ margin-top:8px; }
.simt-dash__read b{ color:var(--al-hi); }
.simt-dash__read a{ color:var(--al-hi); text-decoration:none; border-bottom:1px solid var(--al-line2); }
.simt-dash__read a:hover{ border-color:var(--al-mute); }
.simt-dash__note{ margin-top:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--al-mute-text); }

@media (max-width:560px){
  .simt__link .lr{ flex-wrap:wrap; }
  .simt__copy{ width:100%; justify-content:center; }
}

/* ============================================================
   FUTER — enc-footer (dark, port iz lozinka)
   ============================================================ */
body.page-alat-simulator .enc-ftr{ background:#0a0a09; border-top:1px solid #2e2e2c; color:#a0a09e; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; }
body.page-alat-simulator .enc-ftr-inner{
  /* Pun po sirini prozora (kao /enciklopedija/, /lozinka/, /izlozenost/ i
     /alati/), ne do kraja kolone sadrzaja. Denisova odluka S132: sravnjeno
     na svih deset strana koje koriste enc-footer. Ranije je ovde stajalo
     max-width + margin:0 auto. */
  padding:10px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
body.page-alat-simulator .enc-ftr-l, body.page-alat-simulator .enc-ftr-r{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; }
body.page-alat-simulator .enc-ftr a{ color:inherit; text-decoration:none; transition:color .12s; }
body.page-alat-simulator .enc-ftr a:hover{ color:#ece9e3; }
body.page-alat-simulator .enc-ftr .dot{ width:3px; height:3px; background:#3a3a37; border-radius:50%; display:inline-block; }
@media (max-width:767px){
  body.page-alat-simulator .enc-ftr{ display:none; }
  /* S85 (Denis: „fišing alat nema nikakav futer — tu bi stavio onaj tabbar
     sa vesti"): .cp-tabbar se VIŠE NE KRIJE ni na tool-prikazu. Sudar sa
     internim .sim__tabbar prebacivačem (Sanduče/Poruka/Analiza) rešen je
     skraćivanjem .sim app-okvira za visinu tabbara (vidi @719 blok) —
     prebacivač sedi IZNAD globalnog tabbara, dva reda, bez preklapanja. */
  body.page-alat-simulator main{ padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   LIGHT TEMA — redefiniše --al-* (dark je default)
   ============================================================ */
html[data-theme="light"]{ color-scheme:light; }
/* notch i donja traka Safarija uzorkuju BODY kad nema sticky/fixed elementa uz
   ivicu — body ostaje taman, boju strane nosi #main (vidi alat-zakon.css) */
html[data-theme="light"]{ background:#f2f0e9; }
html[data-theme="light"] body.page-alat-simulator{ background:#0f0f0d; }
html[data-theme="light"] body.page-alat-simulator > main#main{ background:#f2f0e9; }
html[data-theme="light"] body.page-alat-simulator{
  --al-bg:#f2f0e9; --al-grid:rgba(20,20,18,.035);
  --al-plate:#ffffff; --al-plate2:#f6f4ee; --al-field:#ffffff;
  --al-line:#e3dfd4; --al-line2:#cec9bb;
  --al-hi:#1a1917; --al-md:#403d37; --al-lo:#5b574f; --al-mute:#7b776e; --al-faint:#a8a49b; --al-mute-text:#666663;
  --al-brand:#b0301f; --al-brand-hi:#c0392b; --al-brand-text:#b0301f; --al-brand-soft:rgba(192,57,43,.10);
  --al-accent:#9a5a15; --al-accent-text:#935614;
  --al-risk-hi:#bd3322; --al-risk-med:#8f6415; --al-risk-low:#4d7838;
  color:var(--al-hi);
}
html[data-theme="light"] body.page-alat-simulator ::selection{ background:var(--al-brand-soft); color:var(--al-hi); }
html[data-theme="light"] .axc{ background:#ecebe3; border-bottom-color:#e3dfd4; }
html[data-theme="light"] .axc-kick{ color:var(--al-mute-text); }
html[data-theme="light"] .axc-kick b{ color:#935614; }
html[data-theme="light"] .axc h1{ color:#1a1917; }
html[data-theme="light"] .axc h1 em{ color:#b0301f; }
html[data-theme="light"] .axc-sub{ color:#5b574f; }
html[data-theme="light"] .axc-mods a{ color:#403d37; border-color:#cec9bb; }
html[data-theme="light"] .axc-mods a:hover{ color:#1a1917; border-color:#7b776e; }
html[data-theme="light"] .axc-mods .num{ color:#935614; }
html[data-theme="light"] .axc-stat{ color:var(--al-mute-text); }
html[data-theme="light"] .axc-stat b{ color:#1a1917; }
html[data-theme="light"] .axc-stat .ok{ color:#487034; }

@media (prefers-reduced-motion: reduce){
  body.page-alat-simulator *{ transition:none !important; animation:none !important; }
}