/*
 * Ulaz za Tailwind CLI (`npm run css`): aplikacija, pa admin panel IZA nje.
 *
 * Zasebna datoteka, a ne `@import` na kraju app.css, i to je IZMERENO (24.09.2026):
 * Tailwind CLI (postcss-import) `@import` koji nije na vrhu fajla TIHO IZBACI —
 * u izlazu nema ni pravila ni samog `@import`-a, a build izlazi sa 0. Ulaz sa dva
 * `@import`-a na vrhu čuva redosled, pa pravila panela stoje iza pravila aplikacije.
 */

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
 ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

/*
   * Placeholder SVUDA (vlasnik 17.09.2026). Bez ovoga ga boji Tailwind preflight
   * (`#9ca3af`, plavkastosiv) — izmereno 2,23:1 na `--sheet-2`, ispod 4,5:1
   * (odluka 13). Predložak pravila nema, pa njegov Chromium crta podrazumevanu boju.
   * Stoji u `base` sloju POSLE preflight-a, pa ga pobeđuje redosledom; svako
   * uže pravilo (`.inp`, `.search`, `.field`) i dalje važi. `--muted-2` daje 4,86:1.
   * Kvar je bio u 22 polja van `.inp` (i u „Novi termin"); do 17.09. je bio
   * popravljen samo u „Nov vaučer" — ta lokalna zakrpa je uklonjena.
   * Čuva ga `kontrast-tokena.test.ts`; merenje u pregledaču: `kontrastPlaceholder`.
   */

input::-moz-placeholder, textarea::-moz-placeholder {
  color: var(--muted-2);
}

input::placeholder,
  textarea::placeholder {
  color: var(--muted-2);
}

/* Alpine: sakrij dok se ne inicijalizuje (forme koje se otvaraju na klik). */

[x-cloak] {
  display: none !important;
}

html {
  /*
     * e-Rokovnik je svetla tema i to mora da PIŠE — i to sa rečju `only`.
     *
     * Bez ove linije Samsung Internet i Chrome za Android primenjuju „Auto dark":
     * algoritamski invertuju svaku stranu koja nije rekla kakva je. Rezultat je
     * krem pozadina pretvorena u crnu, boje usluga i radnika izmenjene, a
     * kalendar — čiji je ceo smisao da se boje razlikuju — u nečemu što nismo
     * nacrtali.
     *
     * Golo `color-scheme: light` NIJE dovoljno i zbog toga je vlasnik u Samsung
     * Internetu (telefon na tamnoj temi) i dalje dobijao crn ekran. Ta vrednost
     * pregledaču kaže samo „nemam tamnu varijantu" — a upravo takve strane Auto
     * dark i cilja, pa ih svejedno invertuje. Odjava je ključna reč `only`: ona
     * znači „ovako je nacrtano, ne diraj" i jedino nju Chromium (a Samsung
     * Internet je Chromium) čita kao izlazak iz automatskog tamnjenja.
     *
     * `theme-color` meta tag boji samo traku pregledača i ovde ne pomaže. Isti
     * `only light` stoji i kao <meta name="color-scheme"> u layout.njk i
     * marketing.njk: meta se pročita iz samog HTML-a, pre nego što app.css
     * uopšte stigne — a app.css ume da bude i star, jer ga service worker
     * poslužuje iz keša pa tek onda osvežava u pozadini (public/sw.js).
     *
     * Namerno tamne teme mini sajta salona („noć", „smaragd"…) ovo ne kvari:
     * one same kažu `color-scheme: only dark` na .site (sites/_shared.njk), pa
     * ostaju tamne jer su tako izabrane, a ne zato što ih pregledač invertuje.
     *
     * Kad jednog dana bude prave tamne teme aplikacije, ovo postaje `light dark`.
     */
  color-scheme: only light;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--ink) calc(var(--tw-text-opacity, 1) * 100%), transparent);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*
     * Papir, izričito — ne kroz `bg-bg`. Od sloja tokena `bg` znači PLOČU
     * (`--sheet-2`), a strana je `--paper`; da je `body` ostao na `bg-bg`,
     * ploča i strana bi bile ista boja i svaka ploča bez okvira bi nestala.
     *
     * NAPOMENA za fazu 2: u aplikaciji ovo ne stiže do ekrana. `layout.njk:71`
     * postavlja `style="background: {{ locationColor }}"` inline na <body>, a
     * `location-scope.ts` ga daje kad god postoji aktivna lokacija — a lokaciju
     * ima svaki salon. Izmereno: pozadina svake strane aplikacije je boja eef2f7
     * („magla", `LOCATION_PALETTE[0]`), dakle hladno plava ispod krem kartica.
     * Ta paleta je birana uz staru neutralnu podlogu i traži svoju odluku.
     */
  background-color: var(--paper);
  /*
     * Ekran se koristi kao aplikacija, ne kao stranica sa tekstom: pokazivač
     * je strelica i nad naslovom i nad karticom termina. Kucalica (I-beam)
     * ostaje samo tamo gde se zaista kuca.
     *
     * Bez ovoga <a> bez href-a — a takvi su svi htmx prekidači, recimo filter
     * radnika na dnevnom pregledu — dobija kucalicu i deluje kao tekst umesto
     * kao dugme. Dugmad i pravi linkovi zadržavaju šaku, to im daje pregledač.
     */
  cursor: default;
}

/*
   * KOSTUR IZ PREDLOSKA: telo je kolona PUNE VISINE koja se ne skroluje —
   * skroluje `.scr` unutar `.main`. Bez ovoga donja traka nije uz ivicu
   * ekrana nego na kraju dokumenta, pa je nema dok se ne doskroluje do dna.
   *
   * `100dvh`, ne `100vh`: na telefonu se traka pregledaca skuplja i siri, a
   * `vh` ostaje na velikoj meri — pa donja traka izlazi ispod ekrana.
   *
   * SAMO kad strana IMA kostur (`body > .app`, layout.njk). Do 19.09. je ovo
   * stajalo na golom `body` i pogadjalo i strane bez kostura — landing,
   * `poverenje`, `primeri`, `industry` (marketing.njk) i obe strane za stampu.
   * `overflow:hidden` sa tela prelazi na ceo prozor, pa se te strane NISU MOGLE
   * SKROLOVATI ni tockicem ni prstom (skripta jeste, zato je kvar prosao
   * neprimecen). Nadjeno na produkciji odmah posle prozora 19.09.2026; cuva
   * `src/web/skrol-bez-kostura.test.ts`.
   */

body:has(> .app) {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

input,
  textarea,
  [contenteditable="true"] {
  cursor: auto;
}

/*
   * Početna strana prodaje ideju "prebaci svesku u telefon", pa njena
   * pozadina to diskretno nagoveštava: boja papira + linije kao u svesci.
   * Ograničeno na .marketing-paper (landing.njk) — ostatak aplikacije
   * (kalendar, kartoteka…) ostaje na običnoj --bg, nema efekta na njih.
   */

.marketing-paper {
  /* Bez rezerve: `--paper` je od faze 1 token na `:root`, pa je
       `var(--paper, theme("colors.paper"))` postalo `var(--paper, var(--paper))`
       — rezerva koja pokazuje na samu sebe. Izmereno: da token jednog dana
       nestane, takvo pravilo ne puca nego TIHO ostane bez pozadine. */
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      var(--rule) 27px,
      var(--rule) 28px
    );
  background-attachment: fixed;
}

@media (min-width: 900px) {
  .marketing-paper {
    /* red linije + tanka "margina" po uzoru na sveske sa crvenom linijom */
    background-image:
        repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent 27px,
          var(--rule) 27px,
          var(--rule) 28px
        ),
        linear-gradient(
          to right,
          transparent 0,
          transparent 63px,
          color-mix(in srgb, var(--margin) 55%, transparent) 63px,
          color-mix(in srgb, var(--margin) 55%, transparent) 64px,
          transparent 64px
        );
    background-attachment: fixed, fixed;
  }
}

/* =========================================================================
     MOST DO PREDLOSKA — stara imena, novi izgled
     =========================================================================

     Stari sloj komponenti (744 linije: svoja dugmad, polja, kalendar, navigacija,
     modal, marketing) je OBRISAN 09.09. Razlog nije urednost nego to sto su se
     dva izgleda bila na istom ekranu: predloskov `.ap` je crtao karticu, a stari
     `.cal-card` je preko nje stavljao svoju ivicu i boju usluge, pa ni jedan ni
     drugi nije izgledao kako treba.

     Ali 45 starih imena jos stoji u sablonima, i to ona najprometnija — `.btn`
     367 puta, `.field` 312, `.field-label` 268. Prepisati svih sto sablona u
     jednom potezu znaci sto neproverenih izmena odjednom; zato ovde stoji MOST:
     stara imena dobijaju predloskov izgled, jednim pravilom po imenu.

     Most je PRIVREMEN i smanjuje se kako ekrani prelaze na predloskove klase.
     Kad neko ime ostane bez upotrebe, brise se odavde — a ne dopisuje novo.
     ========================================================================= */

/* --- polja obrasca -----------------------------------------------------
     Predlozak polje crta preko `textarea` pravila (`.form textarea`): meki
     `--sheet-2`, hairline, radijus 10, i akcentni prsten na fokusu. Isto vazi i
     za `input` i `select`, jer u predlosku drugog polja nema. */

.field {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--sheet-2);
  padding: 0 13px;
  font: inherit;
  /* 16px na telefonu sprecava iOS auto-zoom pri fokusu; od `sm` navise moze
       da se spusti na crtanih 14. */
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
}

@media (min-width: 640px) {
  .field {
    font-size: 14px;
  }
}

textarea.field {
  height: auto;
  min-height: 64px;
  padding: 11px 13px;
  resize: none;
}

select.field {
  padding-right: 34px;
}

.field::-moz-placeholder {
  color: var(--muted);
  font-weight: 600;
}

.field::placeholder {
  color: var(--muted);
  font-weight: 600;
}

.field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: var(--sheet);
}

/* Naziv polja je verzalna oznaka, kao `.form .fr .k` u predlosku. */

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.field-error {
  margin-top: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--s-miss);
}

/* Polje koje je palo na proveri. Pise se UZ `.field`, ne umesto nje. */

.field-bad,
  .field-bad:focus {
  border-color: var(--s-miss);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-miss) 18%, transparent);
}

/* Zvezdica obaveznog polja: ista boja kao greska — „mora se popuniti" i „nije
     popunjeno" su isti znak, pa vlasnica ne uci dva. */

.req::after {
  content: " *";
  color: var(--s-miss);
}

/* --- dugmad ------------------------------------------------------------
     `.btn` je vec definisan u prenetom predlosku (geometrija + pun akcenat).
     Ovde stoje samo stara imena varijanti, prevezana na predloskove. */

.btn-primary {
  background: var(--accent);
  color: var(--on-accent, var(--on-dark));
}

.btn-primary:hover {
  background: var(--accent-strong);
}

.btn-primary:disabled {
  opacity: 0.4;
}

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}

.btn-ghost:hover {
  background: var(--sheet-2);
}

/* Nepovratna radnja NIKAD nije puno crveno dugme — samo tekst i tanak okvir. */

.btn-danger {
  background: transparent;
  color: var(--s-miss);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--s-miss) 34%, transparent);
}

.btn-danger:hover {
  background: color-mix(in srgb, var(--s-miss) 8%, transparent);
}

/* Ikonicno dugme — predloskov `.ico`. */

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  flex: none;
}

.icon-btn:hover {
  background: var(--sheet-2);
}

.icon-btn svg {
  width: 19px;
  height: 19px;
}

/* --- sitno -------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-full);
  background: var(--sheet-2);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.pop {
  position: absolute;
  z-index: 30;
  margin-top: 4px;
  width: 100%;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--sheet);
  box-shadow: 0 10px 26px -18px rgba(45, 36, 16, 0.7);
}

.pop-item {
  display: flex;
  width: 100%;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
}

.pop-item:hover {
  background: var(--sheet-2);
}

/* --- ostaci kostura ----------------------------------------------------
     Donju traku vise ne prekriva sadrzaj (ona je sestra skrolera, ne `fixed`
     preko njega), pa `pb-nav` nema sta da odgurne. Ostaje kao ime u 64 sablona
     dok ne izadje iz njih. */

.pb-nav {
  padding-bottom: 12px;
}

/* Omotac sa najvecom sirinom sa starog `/day`. Sirinu sada drzi `.main`, pa
     omotac samo propusta decu — ali SAMO on: `display:contents` na `<body>`
     obara ceo kostur (vidi layout.njk). */

.app-shell {
  display: contents;
}

.flash-slot {
  bottom: 84px;
}

/* --- modal / donji list ------------------------------------------------
     Aplikacija ima svoj omotac modala (`#modal`, htmx meta) sa cetiri imena u
     sest sablona; predlozak ima `.sheetup`. Da se ne prepisuje sest obrazaca
     odjednom, stara imena dobijaju PREDLOSKOV izgled, ukljucujuci i to sto na
     desktopu prestaje da bude centriran prozor a postaje FIOKA UZ DESNU IVICU
     (predlozak, `.stage.desk .sheetup`) — sirina 400px, puna visina, bez
     zaobljenja. */

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--dark) 34%, transparent);
  animation: modalFade 0.18s ease-out;
}

/* Hvataljka lista — predloskov `.sheetup .grab`. */

@media (min-width: 1024px) {
  .modal-root {
    align-items: stretch;
    justify-content: flex-end;
  }

  .modal-panel {
    width: 400px;
    max-width: 400px;
    max-height: none;
    border-radius: 0;
    border-top: 0;
    border-left: 1px solid var(--line);
    box-shadow: -14px 0 40px -20px rgba(45, 36, 16, 0.6);
    animation: modalDrawerIn 0.42s var(--e-out);
  }

  .sheet-handle {
    display: none;
  }
}

@keyframes modalFade {
  from {
    opacity: 0;
  }
}

@keyframes modalSheetIn {
  from {
    transform: translateY(calc(100% + 40px));
  }
}

@keyframes modalDrawerIn {
  from {
    transform: translateX(100%);
  }
}

/* --- sitni ostaci ------------------------------------------------------ */

.accent-text {
  color: var(--accent);
}

.accent-dot {
  background: var(--accent);
}

.paper-blur {
  background-color: color-mix(in srgb, var(--paper) 85%, transparent);
}

/* Drugo plutajuce dugme (tehnicka pauza, `.fab-secondary`) je uklonjeno
     11.09.2026 — odluka 6: predlozak ima JEDAN `.fab`, a pauza je vrsta unosa u
     listu „Novi termin". Pravila su otisla zajedno sa dugmetom. */

/* --- demo: traka „nije sacuvano" ---------------------------------------
     Stize SA STRANOM posle odbijenog upisa u izlozbenom salonu, pa je nema ko
     da ukloni — `htmx:afterSwap` gleda samo ono sto je htmx sam doneo. Gasi se
     sama, cistim CSS-om. `visibility` na kraju, ne samo `opacity`: providnu
     traku citac ekrana i dalje cita. */

.demo-toast {
  animation: demoToast 5s ease-out forwards;
}

@keyframes demoToast {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }

  6%,
    85% {
    opacity: 1;
    transform: none;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* Ko je ugasio pokret ne sme da ostane sa trakom koja se nikad ne skloni —
     ali ni da je izgubi pre nego sto je procita. Opsti prekidac pokreta (dole,
     `prefers-reduced-motion`) svaku animaciju skraćuje na .001ms, pa bi traka
     nestala istog trena; zato ovde ide izricito trajanje, bez ijednog pokreta. */

@media (prefers-reduced-motion: reduce) {
  .demo-toast {
    animation: demoToastMirno 5s steps(1, end) forwards !important;
  }

  @keyframes demoToastMirno {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
      visibility: hidden;
    }
  }
}

/* --- traka branši (javne strane) ---------------------------------------
     Marketinske strane se prepisuju u fazi 5 (landing). Dotle traka i njen
     padajuci meni dobijaju papirni izgled, da javna strana ne stoji razbijena
     dok se do nje ne stigne. */

.ind-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  padding-block: 4px;
  scrollbar-width: none;
}

.ind-strip::-webkit-scrollbar {
  display: none;
}

.ind-tab {
  display: inline-flex;
  height: 40px;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  border-radius: var(--r-sm);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.ind-tab:hover {
  background: var(--sheet-2);
  color: var(--ink);
}

.ind-tab-active {
  background: var(--sheet-2);
  color: var(--ink);
}

.ind-tab svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.ind-menu {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 30;
  display: none;
  padding: 8px 20px 0;
}

@media (min-width: 640px) {
  .ind-strip {
    overflow-x: visible;
    padding-block: 0;
  }

  .ind-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition:
        opacity 0.15s var(--e-out),
        transform 0.15s var(--e-out),
        visibility 0.15s;
  }

  .group:hover > .ind-menu,
    .group:focus-within > .ind-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
  }
}

.ind-menu-card {
  margin: 0 auto;
  max-width: 64rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--sheet);
  padding: 8px;
  box-shadow: 0 10px 26px -18px rgba(45, 36, 16, 0.7);
}

@media (min-width: 768px) {
  .ind-menu-card {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .ind-menu-card {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ind-menu-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--r-md);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.ind-menu-item:hover {
  background: var(--sheet-2);
  color: var(--ink);
}

.ind-menu-item svg {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.6;
}

.ind-menu-all {
  grid-column: 1 / -1;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 12px 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

/* --- strane sa jednom porukom (redizajn 16.09) --------------------------
   *
   * 404, „nešto nije u redu", „baza ne odgovara", „previše pokušaja" i ekran
   * bez mreže. Do ove izmene su bile centriran tekst na ravnoj `--bg` podlozi:
   * korektno, ali to je strana koju bi mogao imati bilo koji SaaS. Salon koji
   * je otvori ne prepozna da je i dalje u svom rokovniku.
   *
   * MEHANIKA JE JEDNA I ISTA ZA SVE: papir sa linijama na 28px i crvena
   * margina — isto što nosi i početna strana (`.marketing-paper`). Poruka je
   * složena LEVO uz marginu, kao red upisan u svesku, a ne centrirana u
   * praznini. Razlika u odnosu na početnu je gde margina stoji: tamo je na
   * 63px od ivice EKRANA i pojavljuje se tek od 900px, ovde je leva ivica
   * same kolone teksta, pa radi i na telefonu.
   *
   * Broj (404, 503…) stoji samo na ekranima APLIKACIJE, gde ga vlasnik može
   * prepisati u poruci podršci. Javne strane zakazivanja ga nemaju: strancu
   * koji je hteo termin taj broj ne znači ništa i ne može ništa s njim.
   */

.paper-page {
  display: flex;
  min-height: 100dvh;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  /* Crvena za TEKST na papiru. Brend `colors.now` (#d1483a) daje na ovoj
       podlozi 3.7:1 i pada na sitnom slogu; ova nijansa iste porodice daje
       5.4:1. Linija margine ostaje brend crvena jer nije tekst. */
  --now-papir: #a83527;
  /* Papir i linije iz ISTIH tokena kao `.marketing-paper` (redizajn je iz
       tailwind.config uklonio `colors.paper`). Do spajanja 19.09. je ovde stajalo
       `theme("colors.paper")`: posle redizajna build nije pukao nego je TIHO
       izbacio pozadinu, linije i `--now-papir` — izmereno u pregledaču. */
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 27px,
      var(--rule) 27px,
      var(--rule) 28px
    );
  background-attachment: fixed;
}

.paper-note {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 24rem;
  padding-left: 1.25rem;
  border-left: 1px solid rgba(209, 72, 58, 0.45);
}

/* Nosi znak (`partials/logo.njk`, glavni u boji); poravnat uz levu ivicu beleške. */

.paper-mark {
  display: flex;
}

.paper-code {
  margin-top: 1.75rem;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--now-papir);
}

.paper-title {
  margin-top: 0.5rem;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.75rem;
  letter-spacing: -0.025em;
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--ink) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

/* `colors.muted` (#6f6b64) na papiru daje 4.4:1 — ispod praga. Ista uloga,
     jedan ton tamnija, 5.9:1. */

.paper-text {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.75rem;
  color: #5d584d;
}

.paper-actions {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}

/* `.btn` se od `sm` naviše spušta na 36px. Ovde je to jedina akcija na celoj
     strani, pa ostaje puna meta na svakoj širini. */

.paper-actions .btn {
  height: 3rem;
  font-size: 15px;
}

@media (min-width: 640px) {
  .paper-actions .btn {
    height: 3rem;
  }
}

.paper-link {
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-decoration-line: underline;
  text-underline-offset: 2px;
  color: #5d584d;
}

.ind-menu-all:hover {
  color: var(--accent);
}

/* Tackica u boji lokacije uz njeno ime. Ostatak trake koja je do 07.09. bojila
     celu stranu — tacka je PODATAK u redu, ne ukras preko ekrana. */

.loc-tacka {
  display: inline-block;
  height: 8px;
  width: 8px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--loc, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 22%, transparent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.bottom-4 {
  bottom: 1rem;
}

.left-0 {
  left: 0px;
}

.right-1 {
  right: 0.25rem;
}

.right-1\.5 {
  right: 0.375rem;
}

.right-2\.5 {
  right: 0.625rem;
}

.right-3 {
  right: 0.75rem;
}

.top-0 {
  top: 0px;
}

.top-1\.5 {
  top: 0.375rem;
}

.top-1\/2 {
  top: 50%;
}

.z-40 {
  z-index: 40;
}

.z-\[60\] {
  z-index: 60;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}

.-my-1\.5 {
  margin-top: -0.375rem;
  margin-bottom: -0.375rem;
}

.-my-2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-7 {
  margin-bottom: 1.75rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-6 {
  margin-left: 1.5rem;
}

.mr-0\.5 {
  margin-right: 0.125rem;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-2\.5 {
  margin-top: 0.625rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-7 {
  margin-top: 1.75rem;
}

.mt-8 {
  margin-top: 2rem;
}

.mt-\[1\.15rem\] {
  margin-top: 1.15rem;
}

.mt-\[3px\] {
  margin-top: 3px;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.table {
  display: table;
}

.flow-root {
  display: flow-root;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-16 {
  height: 4rem;
}

.h-2 {
  height: 0.5rem;
}

.h-2\.5 {
  height: 0.625rem;
}

.h-24 {
  height: 6rem;
}

.h-28 {
  height: 7rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-32 {
  height: 8rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-56 {
  height: 14rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.max-h-80 {
  max-height: 20rem;
}

.min-h-0 {
  min-height: 0px;
}

.min-h-\[3\.5rem\] {
  min-height: 3.5rem;
}

.min-h-\[36px\] {
  min-height: 36px;
}

.min-h-\[4\.5rem\] {
  min-height: 4.5rem;
}

.min-h-\[40px\] {
  min-height: 40px;
}

.min-h-\[44px\] {
  min-height: 44px;
}

.min-h-\[48px\] {
  min-height: 48px;
}

.min-h-\[56px\] {
  min-height: 56px;
}

.min-h-dvh {
  min-height: 100dvh;
}

.min-h-screen {
  min-height: 100vh;
}

.w-1\.5 {
  width: 0.375rem;
}

.w-10 {
  width: 2.5rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-2 {
  width: 0.5rem;
}

.w-2\.5 {
  width: 0.625rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-32 {
  width: 8rem;
}

.w-36 {
  width: 9rem;
}

.w-4 {
  width: 1rem;
}

.w-40 {
  width: 10rem;
}

.w-5 {
  width: 1.25rem;
}

.w-56 {
  width: 14rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[10\.5rem\] {
  width: 10.5rem;
}

.w-\[3px\] {
  width: 3px;
}

.w-\[6\.2rem\] {
  width: 6.2rem;
}

.w-\[68px\] {
  width: 68px;
}

.w-\[8\.5rem\] {
  width: 8.5rem;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-\[10rem\] {
  min-width: 10rem;
}

.min-w-\[640px\] {
  min-width: 640px;
}

.min-w-\[8rem\] {
  min-width: 8rem;
}

.max-w-2xl {
  max-width: 42rem;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-5xl {
  max-width: 64rem;
}

.max-w-\[10rem\] {
  max-width: 10rem;
}

.max-w-\[11rem\] {
  max-width: 11rem;
}

.max-w-\[12rem\] {
  max-width: 12rem;
}

.max-w-\[16rem\] {
  max-width: 16rem;
}

.max-w-\[240px\] {
  max-width: 240px;
}

.max-w-\[280px\] {
  max-width: 280px;
}

.max-w-full {
  max-width: 100%;
}

.max-w-lg {
  max-width: 32rem;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-sm {
  max-width: 24rem;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-none {
  flex: none;
}

.shrink-0 {
  flex-shrink: 0;
}

.border-collapse {
  border-collapse: collapse;
}

.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-default {
  cursor: default;
}

.cursor-pointer {
  cursor: pointer;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize {
  resize: both;
}

.list-none {
  list-style-type: none;
}

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-12 {
  gap: 3rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-x-1\.5 {
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}

.gap-y-0\.5 {
  row-gap: 0.125rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-2 {
  row-gap: 0.5rem;
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}

.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

.space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.625rem * var(--tw-space-y-reverse));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

.divide-line > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: color-mix(in srgb, var(--line) calc(var(--tw-divide-opacity, 1) * 100%), transparent);
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.whitespace-pre-line {
  white-space: pre-line;
}

.text-wrap {
  text-wrap: wrap;
}

.break-words {
  overflow-wrap: break-word;
}

.break-all {
  word-break: break-all;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[1\.5rem\] {
  border-radius: 1.5rem;
}

.rounded-\[2rem\] {
  border-radius: 2rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-t {
  border-top-width: 1px;
}

.border-\[\#e2b876\] {
  --tw-border-opacity: 1;
  border-color: rgb(226 184 118 / var(--tw-border-opacity, 1));
}

.border-amber-600\/40 {
  border-color: rgb(217 119 6 / 0.4);
}

.border-amber-600\/50 {
  border-color: rgb(217 119 6 / 0.5);
}

.border-ink {
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--ink) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-line {
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--line) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-line-strong {
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--line-2) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-line\/60 {
  border-color: color-mix(in srgb, var(--line) calc(0.6 * 100%), transparent);
}

.border-line\/70 {
  border-color: color-mix(in srgb, var(--line) calc(0.7 * 100%), transparent);
}

.border-now {
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--s-miss) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.border-now\/30 {
  border-color: color-mix(in srgb, var(--s-miss) calc(0.3 * 100%), transparent);
}

.border-now\/40 {
  border-color: color-mix(in srgb, var(--s-miss) calc(0.4 * 100%), transparent);
}

.bg-\[\#fff8ee\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 238 / var(--tw-bg-opacity, 1));
}

.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}

.bg-bg {
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--sheet-2) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-bg\/60 {
  background-color: color-mix(in srgb, var(--sheet-2) calc(0.6 * 100%), transparent);
}

.bg-done\/10 {
  background-color: color-mix(in srgb, var(--s-done) calc(0.1 * 100%), transparent);
}

.bg-ink {
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--ink) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-ink\/15 {
  background-color: color-mix(in srgb, var(--ink) calc(0.15 * 100%), transparent);
}

.bg-ink\/40 {
  background-color: color-mix(in srgb, var(--ink) calc(0.4 * 100%), transparent);
}

.bg-ink\/60 {
  background-color: color-mix(in srgb, var(--ink) calc(0.6 * 100%), transparent);
}

.bg-line {
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--line) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-line\/30 {
  background-color: color-mix(in srgb, var(--line) calc(0.3 * 100%), transparent);
}

.bg-line\/40 {
  background-color: color-mix(in srgb, var(--line) calc(0.4 * 100%), transparent);
}

.bg-line\/50 {
  background-color: color-mix(in srgb, var(--line) calc(0.5 * 100%), transparent);
}

.bg-line\/60 {
  background-color: color-mix(in srgb, var(--line) calc(0.6 * 100%), transparent);
}

.bg-line\/70 {
  background-color: color-mix(in srgb, var(--line) calc(0.7 * 100%), transparent);
}

.bg-now {
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--s-miss) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-now\/10 {
  background-color: color-mix(in srgb, var(--s-miss) calc(0.1 * 100%), transparent);
}

.bg-now\/5 {
  background-color: color-mix(in srgb, var(--s-miss) calc(0.05 * 100%), transparent);
}

.bg-surface {
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--sheet) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.bg-wait\/10 {
  background-color: color-mix(in srgb, var(--s-wait) calc(0.1 * 100%), transparent);
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.p-0\.5 {
  padding: 0.125rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-3\.5 {
  padding: 0.875rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-7 {
  padding: 1.75rem;
}

.p-8 {
  padding: 2rem;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-24 {
  padding-bottom: 6rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pl-1 {
  padding-left: 0.25rem;
}

.pl-3 {
  padding-left: 0.75rem;
}

.pl-6 {
  padding-left: 1.5rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-11 {
  padding-right: 2.75rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pr-8 {
  padding-right: 2rem;
}

.pr-9 {
  padding-right: 2.25rem;
}

.pr-\[5\.25rem\] {
  padding-right: 5.25rem;
}

.pt-10 {
  padding-top: 2.5rem;
}

.pt-12 {
  padding-top: 3rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

.pt-8 {
  padding-top: 2rem;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.align-middle {
  vertical-align: middle;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[17px\] {
  font-size: 17px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[19px\] {
  font-size: 19px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[24px\] {
  font-size: 24px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[32px\] {
  font-size: 32px;
}

.text-\[34px\] {
  font-size: 34px;
}

.text-\[9px\] {
  font-size: 9px;
}

.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.font-semibold {
  font-weight: 600;
}

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.italic {
  font-style: italic;
}

.ordinal {
  --tw-ordinal: ordinal;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}

.leading-7 {
  line-height: 1.75rem;
}

.leading-\[1\.1\] {
  line-height: 1.1;
}

.leading-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}

.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.tracking-widest {
  letter-spacing: 0.1em;
}

.text-\[\#8a4b12\] {
  --tw-text-opacity: 1;
  color: rgb(138 75 18 / var(--tw-text-opacity, 1));
}

.text-\[\#a2865f\] {
  --tw-text-opacity: 1;
  color: rgb(162 134 95 / var(--tw-text-opacity, 1));
}

.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}

.text-bg {
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--sheet-2) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-done {
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--s-done) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-ink {
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--ink) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-muted {
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--muted) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-muted\/50 {
  color: color-mix(in srgb, var(--muted) calc(0.5 * 100%), transparent);
}

.text-muted\/70 {
  color: color-mix(in srgb, var(--muted) calc(0.7 * 100%), transparent);
}

.text-muted\/80 {
  color: color-mix(in srgb, var(--muted) calc(0.8 * 100%), transparent);
}

.text-now {
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--s-miss) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-surface {
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--sheet) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-wait {
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--s-wait) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}

.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}

.underline {
  text-decoration-line: underline;
}

.line-through {
  text-decoration-line: line-through;
}

.underline-offset-2 {
  text-underline-offset: 2px;
}

.accent-ink {
  accent-color: var(--ink);
}

.opacity-25 {
  opacity: 0.25;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-55 {
  opacity: 0.55;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-70 {
  opacity: 0.7;
}

.opacity-80 {
  opacity: 0.8;
}

.shadow-card {
  --tw-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 5%, transparent), 0 1px 3px color-mix(in srgb, var(--ink) 6%, transparent);
  --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-modal {
  --tw-shadow: 0 12px 48px color-mix(in srgb, var(--ink) 20%, transparent);
  --tw-shadow-colored: 0 12px 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.ring-line {
  --tw-ring-opacity: 1;
  --tw-ring-color: color-mix(in srgb, var(--line) calc(var(--tw-ring-opacity, 1) * 100%), transparent);
}

.ring-transparent {
  --tw-ring-color: transparent;
}

.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}

.ring-offset-surface {
  --tw-ring-offset-color: var(--sheet);
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-filter {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ===========================================================================
   PISMO (redizajn, faza 2) — Manrope radi, Newsreader imenuje i broji
   ===========================================================================

   Do 07.09.2026. je ovde i u `src/lib/appearance.ts` stajalo da se nijedan
   font ne preuzima sa mreze i da repo nema nijedan `@font-face`. Redizajn to
   obara, ali RAZLOG iza pravila — „font koji se ceka je font koji se ne vidi",
   jer rokovnik radi u salonu sa losom mrezom — ostaje i ovde je postovan sa
   tri stvari, ne sa jednom:

     1. fajlovi su NASI (`public/fonts/`), ne sa Google CDN-a. CSP se time ne
        dira uopste: `font-src 'self'` ih vec pokriva, dok bi Google trazio dva
        nova hosta u `style-src` i `font-src`;
     2. `font-display: optional` znaci da se font NIKAD ne ceka i da se NIKAD
        ne menja usred citanja — prvi prikaz ide sistemskim pismom, bez skoka
        rasporeda, a od drugog otvaranja je font vec u kesu;
     3. `public/sw.js` ih nosi u `STATIC` listi, pa ulaze u kes pri instalaciji
        servisnog radnika i rade i bez mreze.

   Cena je izmerena, ne procenjena: 79.000 B (77,1 KiB) u cetiri fajla.
   Obrazlozenje izbora bas tih fajlova stoji u `public/fonts/LICENSE.txt`,
   zajedno sa licencom — ukratko, Newsreader se u celom predlosku koristi u
   jednoj tezini (600), a njegova opticka osa bi kostala 2,3x ceo font.

   `unicode-range` je doslovno Google-ov, jer su i podskupovi njegovi; nasa
   slova (c, c, s, z, dj) su u `latin-ext`, ne u `latin`, pa taj fajl nije
   opcion.
   =========================================================================== */

@font-face {
  font-family: "Manrope";

  font-style: normal;

  font-weight: 400 800;

  font-display: optional;

  src: url("/fonts/manrope-latin-ext.woff2") format("woff2");

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Manrope";

  font-style: normal;

  font-weight: 400 800;

  font-display: optional;

  src: url("/fonts/manrope-latin.woff2") format("woff2");

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Newsreader";

  font-style: normal;

  font-weight: 600;

  font-display: optional;

  src: url("/fonts/newsreader-600-latin-ext.woff2") format("woff2");

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Newsreader";

  font-style: normal;

  font-weight: 600;

  font-display: optional;

  src: url("/fonts/newsreader-600-latin.woff2") format("woff2");

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Caveat 500 — rukopis sveske na početnoj (O-77). Za razliku od Manrope/Newsreader nosi
   `font-display: swap` (vlasnik 19.09.2026): sveska bez rukopisa gubi smisao, pa se font sačeka
   i zameni čim stigne; do tada crta `--font-rukopis` rezerva. Opsezi su Google-ovi, isti kao
   iznad; č ć š ž đ su u latin-ext (izmereno `cmap`-om i pikselima, vidi dnevnik). */

@font-face {
  font-family: "Caveat";

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url("/fonts/caveat-latin-ext-500.woff2") format("woff2");

  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Caveat";

  font-style: normal;

  font-weight: 500;

  font-display: swap;

  src: url("/fonts/caveat-latin-500.woff2") format("woff2");

  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   SLOJ TOKENA (redizajn, faza 1) — jedini izvor boje, ritma i krivih
   ===========================================================================

   Izvor istine je predložak `skice/ekrani-aplikacije.html`. Ceo `:root` je
   prepisan odatle token po token (32 : 32, bez ijedne razlike); kad se
   predložak promeni, menja se OVDE i nigde drugde. `tailwind.config.js` ne
   drži nijednu boju — on samo prevodi zatečena imena klasa (`bg-surface`,
   `text-muted` …) na ove tokene.

   DVA MESTA GDE OVO NIJE DOSLOVAN PREPIS, i to namerno:
   `--accent` je `#2d709a` („Petrolej"), difolt predloška — odluka 1 (vlasnik
   10.09.2026, izvedeno 11.09.): Petrolej je podrazumevana boja. Ranije je ovde
   stajao `#376e86` („Fjord") kao vlasnikov izbor iz faze 2; odluka 1 ga je
   zamenila. Ovo je samo rezerva — stvarnu boju salona postavlja `layout.njk`
   na `<body>` iz `lib/appearance.ts`. `--accent-wash` u ovom predlošku ne postoji nego samo u
   `skice/landing-rokovnik.html` — uzet je odatle da faza 5 ne krene od
   pravila koje računa `background-image: none`.

   PODELA KOJU NE TREBA MEŠATI: papir je identitet, akcenat je tema.
   Boja papira, linija, crvena margina i četiri statusne boje su FIKSNE —
   tema ih ne dira. Menja se samo `--accent` i sve što se iz njega izvodi.

   ZAŠTO SU IZVEDENICE AKCENTA NA `body`, A NE NA `:root`
   `color-mix()` u custom property-ju se izračuna u trenutku deklaracije. Na
   `:root` bi se zamrznuo na startnoj vrednosti `--accent` i prestao da prati
   izmenu — a `--accent` se postavlja NIŽE (danas inline na `<body>` iz
   `industry.njk`, sutra iz podešavanja salona). Na `body` je deklaracija u
   istom čvoru u kom se `--accent` i menja, pa se preračuna. Predložak nosi
   isto upozorenje i navodi da je greška već dvaput pojedena.

   `--paper` NIJE novo ime: `industry.njk:7` ga već postavlja inline na
   `<body>` po branši, a `.marketing-paper` ga već čita. Definicija ovde je
   podrazumevana vrednost koju branšna strana svesno pregazi (inline pobeđuje
   stylesheet), i to je izmereno — `/za/:bransa` ostaje netaknuta.
   =========================================================================== */

:root {
  /* papir i listovi */
  --paper: #f0ebd9;
  --paper-deep: #e6dfc6;
  --sheet: #fbf8ee;
  --sheet-2: #f6f2e4;
  /* linije: `--rule` je linija reda unutar lista, `--line` obrub lista */
  --rule: #e0dccb;
  --rule-2: #d3d2cc;
  --line: #ddd5bf;
  --line-2: #cbc2a8;
  /* crvena margina sveske. Ista boja nosi i liniju „sada" u kalendaru —
     to je isti gest, crvena olovka preko papira, i zato ista boja. Nikad
     puna zasićenost: u predlošku uvek `opacity` .42–.6 i debljina 1,5px. */
  --margin: #a77478;
  /* mastilo */
  --ink: #221f1a;
  --ink-2: #4b4539;
  /*
   * ODLUKA 13 (10.09.2026) — SVESNO ODSTUPANJE OD ZAMRZNUTOG MOCKUPA, sa merenjem.
   * (Od predloška 1fc29758, 11.09.2026, ovo više NIJE odstupanje: vlasnik je
   * predložak uskladio sa vrednostima ispod — mockup je sustigao kod.)
   * Tadašnji mockup (b2c06abd…) nosi `--muted:#7b7466` = 3,88:1 i `--muted-2:
   * #9a9383` = 2,56:1 na papiru #f0ebd9 — oba ispod 4,5:1 za sitan tekst. Kod ga
   * u tome NE sledi; hijerarhiju (sekundarni tekst svetliji od primarnog) zadrzava.
   * Ton je mockupov (H=40°, S=9,3%), menja se samo svetlina:
   *   --muted   #5d584d  5,93:1   sekundarni tekst
   *   --muted-2 #6e685b  4,64:1   tercijarni tekst (mikro-oznake, placeholder)
   *   --faint   #8b8374  3,14:1   ikonica koja SAMA nosi znacenje (strelica reda)
   *   --faint-2 #9a9383  2,56:1   suvisna ikonica — natpis pored kaze isto
   * Pragove i dozvoljenu upotrebu cuva `src/web/kontrast-tokena.test.ts`, NE
   * ovaj komentar (komentar koji je jednom cuvao pravilo za `--muted-2` nestao je
   * u prepisu). Istorija ispod je stanje pre odluke 13.
   *
   * `--muted` je 07.09. spusten sa #7b7466 na #6f685c, i to je ISPRAVKA
   * predloska, ne odstupanje od njega — predlozak nosi novu vrednost.
   *
   * Povod je merenje posle faze 1: prigusen tekst je na 938 cvorova pao ispod
   * WCAG AA (4,36 na listu, treba 4,5), naspram 24 pre redizajna. Uzrok nije
   * bio papir nego to sto predlozak `--muted` skoro uvek nosi na debljini
   * 600-800, a aplikacija ga u 98% od 546 upotreba nosi na 400. Boja crtana
   * za polucrno slovo spustena je na tanko.
   *
   * Popravka ide u TOKEN, ne u markup: da je 938 cvorova izuzetak, podigla bi
   * se debljina; 98% nije izuzetak nego pravilo aplikacije, pa token sluzi
   * vecini. Izmereno na novoj vrednosti — sheet 5,19, paper 4,62, sheet-2 4,71
   * — dakle prolazi na debljini 400 na sve tri podloge.
   */
  --muted: #5d584d;
  /* (Do 10.09. je `--muted-2` bio #9a9383 i „nikad tekst" — zamrznuti mockup ga je
     namerno prebacio na tercijarni tekst, pa je zatamnjen do 4,64:1; odluka 13.) */
  --muted-2: #6e685b;
  --faint: #8b8374;
  --faint-2: #9a9383;
  --dark: #1f1d18;
  --on-dark: #f3eedd;
  /* POČETNA (G-01, predložak `#v-land`, 1fc29758). Boje koje predložak piše kao
     heks/rgba u pravilima landinga — ovde postaju tokeni, pa pravila nose samo
     `var()` (vlasnik 19.09.2026: nijedan heks u komponentama). Senke su iste
     vrednosti kao u predlošku, providnost ide kroz `color-mix` na mestu upotrebe. */
  --belo: #fff;
  --crno: #000;
  --senka: #1e1a10;
  --senka-topla: #2d2410;
  --senka-tamna: #14120f;
  --sveska-papir: #fdfaf0;
  --sveska-linija: #e3e2da;
  --sveska-rupa: #e0dbc9;
  --sveska-naslov: #5b5346;
  --mastilo: #33507a;
  --mastilo-bledo: #8b8478;
  --precrt: #9a5b52;
  --crvena-olovka: #a83a30;
  --strelica: #b0453c;
  /* LOGO (znak „e2", `partials/logo.njk`). Logo u boji je BREND, ne tema salona:
     ove vrednosti su fiksne i ne prate `--accent` salona — salon sa crvenom
     paletom (Trešnja, Terakota, Koralna) inače bi dobio crvenu strelicu na
     crvenom slovu. `var()` se razrešava OVDE, na `:root`, pa ni tema koja na
     `body` pregazi `--ink` ne menja natpis. U temi salona ide jednobojni logo
     (`currentColor`). Vrednosti su iz kita, PROCITAJ.md §3. */
  --logo-slovo: #2d709a;
  --logo-prsten: #7ba4ba;
  --logo-strelica: var(--crvena-olovka);
  --logo-natpis: var(--ink);
  --logo-slovo-tamno: #5e90ab;
  --logo-prsten-tamno: #b8c8c9;
  --logo-strelica-tamno: #d1604c;
  --logo-natpis-tamno: var(--on-dark);
  /* Rukopis sveske (O-77). Rezerva je STVARNA lista, ne samo `cursive` (vlasnik): ako se
     Caveat ne učita, sveska ostaje čitljiva — prvo rukopisna pisma sistema (Windows,
     macOS/iOS), pa naše osnovno pismo i generičko bezserifno. Generičko `cursive` na
     Androidu je nepredvidivo i zato NIJE poslednja rezerva. Tvrdi `fontovi-podskupovi.test.ts`. */
  --font-rukopis: "Caveat", "Segoe Print", "Bradley Hand", "Manrope", system-ui, sans-serif;
  /* JEDAN RITAM ZA CEO PROIZVOD
     Svaki red, polje i blok je visok `--row` ili umnožak i završava se
     hairline-om. Zato ekran koji niko nije posebno crtao i dalje izgleda
     kao stranica iz iste sveske. */
  --row: 52px;
  --rail: 14px;
  /* koliko je crvena margina uvučena od leve ivice */
  /* Statusi su GLOBALNI i SEMANTIČKI — tema menja akcenat i neutralne,
     nikad značenje. `--s-miss` je i „nije došao" i nepovratna radnja; u
     predlošku nepovratna radnja nikad nije puno crveno dugme nego proziran
     `.btn.dgr` sa crvenim tekstom i okvirom na 34% zasićenosti. */
  --s-ok: #3f7d5f;
  --s-ok-bg: #dfe9dc;
  /* potvrđen */
  --s-wait: #8f6a1c;
  --s-wait-bg: #f1e5c4;
  /* zakazan, čeka */
  --s-miss: #a94a3d;
  --s-miss-bg: #eeddd4;
  /* nije došao / otkazan / greška */
  /* ODLUKA 13, iznad mockupa: mockup nosi #6f6b64 = 4,21:1 na svojoj
     pozadini, a kartica zavrsenog termina ga jos bledi providnoscu (izmereno
     2,62:1 za vreme). #66625b = 4,82:1, isti ton; tvrdi kontrast-tokena.test.ts. */
  --s-done: #66625b;
  --s-done-bg: #e8e5dd;
  /* završen */
  /*
   * Naslovno pismo. Predlozak ga ispisuje kao `Newsreader,Georgia,serif` na 31
   * mestu; ovde stoji jednom, pa se 31 kopija ne moze raziici. Rezerva je
   * Georgia, koja je siroko dostupna i takodje serifna — ali je sira i tamnija,
   * pa `.top h1` sa `text-overflow:ellipsis` na njoj sece ranije. To je i
   * razlog zasto se Newsreader uopste isporucuje.
   */
  --font-naslov: "Newsreader", Georgia, "Times New Roman", serif;
  /* oblik i vreme */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-full: 999px;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* expo-out, ulazak */
  --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  /* blagi spring, sletanje */
}

body {
  --accent: #2d709a;
  /*
   * Predložak boju teksta na akcentu NE bira u CSS-u nego u JS-u, po WCAG
   * luminanciji (belo ili #181509). Ovde je konstanta jer je i akcenat
   * konstanta — na #376e86 belo prolazi. Čim akcenat postane izbor salona,
   * ovo mora da se računa, inače svetao akcenat (predložak nudi i „Pistać"
   * #87a24d) daje belo na svetlom.
   */
  --on-accent: #ffffff;
  --accent-strong: color-mix(in srgb, var(--accent) 84%, #0d1215);
  --accent-deep: color-mix(in srgb, var(--accent) 55%, #0b0f12);
  /* REZERVA. U aplikaciji `--accent-ink` stize inline na <body> izracunat
     (`akcenatTekst`, lib/appearance.ts): za svetle akcente (Pistać, Med) je
     66% davalo tekst ispod 4,5:1. Ovo pravilo vazi samo tamo gde inline nema. */
  --accent-ink: color-mix(in srgb, var(--accent) 66%, #191510);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, var(--sheet));
  --accent-softer: color-mix(in srgb, var(--accent) 7%, var(--sheet));
  --accent-line: color-mix(in srgb, var(--accent) 34%, var(--line));
  /* `--accent-wash` — podvlaka pod „niko" u naslovu početne (O-83, vlasnik: „jedina oznaka
     koja naslov čini našim"). Zamrznuti predložak ga koristi u \`.lp-hl\` a NE definiše, pa se
     tamo podvlaka ne crta — to je greška reference. Vrednost je iz \`skice/landing-rokovnik.html\`
     (26% akcenta), izvedena iz \`--accent\` kao i ostale izvedenice, pa prati akcenat. Izmereno:
     mastilo \`--ink\` preko podvlake na papiru ima 9,81:1. Tvrdi \`pocetna-g01.test.ts\`. */
  --accent-wash: color-mix(in srgb, var(--accent) 26%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent);
  /*
   * ALIAS, PRIVREMEN — briše se u fazi 3.
   *
   * `--akcenat` je bilo staro ime istog pojma i stizalo je sa <html>. Od faze 2
   * akcenat je jedan (`--accent`, inline na <body>), ali alias stoji jedno
   * izdanje da ništa što ga još čita ne pukne u procepu između postavljanja
   * migracije i podizanja nove verzije — isti razlog zbog kog `drop column`
   * nikad ne ide u istu migraciju sa zamenom (CLAUDE.md §1).
   *
   * Provera pre brisanja: `grep -rn -- "--akcenat" src public` mora da vrati
   * samo ovaj red i komentare uz njega.
   */
  --akcenat: var(--accent);
}

/* ===========================================================================
   IZGLED IZ PREDLOSKA — 1:1 prepis (redizajn, faza 3+)
   ===========================================================================

   Ovo NIJE „primena tokena na zatecen raspored" nego doslovan prenos CSS-a iz
   `skice/ekrani-aplikacije.html`, linije 108-792 i 1225-1383. Prvi pokusaj je
   preneo samo sistem komponenti a zadrzao zatecene rasporede ekrana — i to je
   bila pogresna procena: zadatak trazi da se aplikacija POKLOPI sa predloskom.

   Sta je izostavljeno i zasto:
     * radni okvir predloska (`.shell`, `.tabs`, `.seg`, `.pal`, `.sw`,
       `.custom`, `.mini`, `.sep`, `.hint`) i okvir uredjaja (`.stage`,
       `.device`) — to je alat kojim se predlozak gleda, ne proizvod;
     * landing (`#v-land`, linije 793-1224) — ide u fazu 5, iz
       `skice/landing-rokovnik.html`.

   Jedina izmena u prenosu: `.stage.desk X` je prevedeno u
   `@media (min-width:1024px) { X }`, jer predlozak desktop dobija klasom koju
   kaci njegov harness, a aplikacija sirinom ekrana. Prag je isti onaj na kom
   aplikacija vec prebacuje donju traku u bocni meni.

   `.device *` je postalo `.app *` — isti selektor, ime iz proizvoda.
   `.grid` je preimenovan u `.cal-grid` (satnica u kalendaru): `grid` je ime
   Tailwind utility-ja, pa ga Tailwind odbija sa „circular dependency" cim ga
   neko negde `@apply`-uje — a aplikacija to radi na tri mesta. Jedino
   preimenovanje u celom prenosu.
   =========================================================================== */

/* ============================================================
   APLIKACIJA — kostur
   Telefon: donja traka. Desktop: bočni meni. Isti spisak.
   ============================================================ */

.app{
  flex:1;
  display:flex;
  min-height:0;
  background:var(--paper)
}

.side{
  display:none
}

.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  position:relative;
  container-type:inline-size;
  container-name:frame
}

.scr{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:none;
  position:relative;
  background:var(--paper);
  -ms-overflow-style:none
}

.scr::-webkit-scrollbar{
  width:0;
  height:0;
  display:none
}

/* LEPLJIVI SLOJ — PODRAZUMEVANO U CSS-u (vlasnik 11.09.2026): ekran mora da radi i
   pre nego što se app.js izvrši, ili ako padne. JS (`dayScroll`, ResizeObserver
   nad zaglavljem dana i zaglavljem kolona) samo KORIGUJE ove vrednosti po stvarnom
   sloju, ne uvodi ih. Od 12.09.2026 (posle kruga 13) je lepljiva samo glava dana
   (traka datuma 76px + čipovi 59px = 135px na svim merenim širinama, izmereno na
   Lux-u); desktop dodaje `.lanehd`. Na niskom prozoru ostaju samo čipovi (59px).
   `scroll-padding-top` = sloj + 8px, da fokus dovede element ISPOD sloja, ne pod
   njega (WCAG 2.4.11). */

#day-view{
  --vrh-zaglavlja:135px;
  --visina-trake:76px
}

.scr{
  scroll-padding-top:143px
}

@media (max-height:500px){
  #day-view{
    --vrh-zaglavlja:59px
  }

  .scr{
    scroll-padding-top:67px
  }
}

.app *{
  scrollbar-width:none;
  -ms-overflow-style:none
}

.app *::-webkit-scrollbar{
  width:0;
  height:0;
  display:none
}

.view{
  display:none
}

.view.on{
  display:block
}

/* crvena margina — jedina crvena linija na ekranu; uvek znači „sada / pažnja" */

.railed{
  position:relative
}

/* Predložak 1fc29758 (11.09.2026): crvena margina ostaje SAMO na landingu —
   radni ekrani su mirni. Pravilo je zadržano, kao u predlošku, da se vidi gde
   je stajalo; uvlačenje koje joj je pravilo mesto vraćeno je na 16px. */

.railed::before{
  display:none
}

/* zaglavlje ekrana */

.top{
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb,var(--paper) 88%,#fff);
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:13px 16px 13px 30px
}

.top .r1{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:38px
}

.top h1{
  font-family:Newsreader,Georgia,serif;
  font-size:19px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:600;
  letter-spacing:-.02em;
  margin:0;
  line-height:1.45;
  padding-bottom:1px;
  flex:1;
  min-width:0
}

.top .sub{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  margin-top:2px;
  line-height:17px
}

/* Posle grupe B (11.09.): podnaslov nosi i tekst koji upisuje korisnik (ime
   fajla uvoza) — duga reč bez razmaka je širila `.scr` 134–244px preko ekrana
   na 430–320px. Lomi se u reči tek kad sama ne staje. */

.top .sub{
  overflow-wrap:anywhere
}

.top .sp{
  margin-left:auto
}

/* donja traka (telefon) */

.bottom{
  display:flex;
  background:color-mix(in srgb,var(--paper) 92%,#fff);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)
}

/* Ispod 360px (12.09.2026, krug 11): pet stavki po 64px na 320 stavlja „Kalendar"
   11px od ivice ekrana (prag 11,5). 4px sa strane ga pomera na ~13,7px. Od 360 naviše
   traka je doslovno predložak. Svesno odstupanje — predložak nema tako usku širinu. */

@media (max-width:359.98px){
  .bottom{
    padding-left:4px;
    padding-right:4px
  }
}

/* Traka „Dodaj na početni ekran" (ZA-ADMIN-POCETNI-EKRAN.md): sestra `.scr`-a u `.main`,
   iznad `.bottom` — ne prekriva listu i nikad ne stoji na mestu gornjih traka (proba, kvota,
   SMS), koje su u sadržaju strane. Dugmad su `.btn` (44px), i „×" je kvadrat od 44px. */

.pocetni-traka{
  flex:none;
  margin:0 12px 8px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  background:var(--sheet);
  box-shadow:inset 0 0 0 1px var(--line)
}

.pocetni-red{
  display:flex;
  align-items:center;
  gap:8px
}

.pocetni-red .btn{
  flex:none
}

.pocetni-tekst{
  flex:1 1 auto;
  min-width:0;
  font-size:13px;
  line-height:18px;
  color:var(--ink)
}

.pocetni-x{
  width:44px;
  padding:0;
  font-size:20px
}

.pocetni-uputstvo{
  margin-top:8px;
  font-size:13px;
  line-height:18px;
  color:var(--muted)
}

/* Plutajuće dugme („Novi termin") stoji na fiksnoj visini iznad `.bottom`, pa bi ga traka
   podvukla pod sebe (izmereno snimkom na 390 px: „Novi termin" preko „Dodaj"). Dok je traka
   vidljiva, komponenta `pocetniTraka` upisuje njenu visinu u `--pocetni-h` na `.main`, i dugme
   se diže za toliko — i kad se traka prelomi ili otvori uputstvo. Sakrivena traka = 0. */

.fab{
  margin-bottom:var(--pocetni-h,0px)
}

.bottom a{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:11px 0 13px;
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  position:relative
}

.bottom a svg{
  width:21px;
  height:21px
}

.bottom a.on{
  color:var(--accent-ink)
}

.bottom a.on::before{
  content:"";
  position:absolute;
  top:0;
  left:22%;
  right:22%;
  height:2.5px;
  border-radius:0 0 3px 3px;
  background:var(--accent)
}

.bottom a .bdg{
  position:absolute;
  top:5px;
  left:calc(50% + 7px);
  min-width:16px;
  height:16px;
  border-radius:8px;
  background:var(--s-miss);
  color:#fff;
  font-size:9.5px;
  font-weight:800;
  display:grid;
  place-items:center;
  padding:0 4px
}

/* O-03: oznaka paketa na stavci trake. Nije bedž broja nego reč, pa je niža i šira;
   boja je neutralna (linija), da ne liči na upozorenje — ovo nije greška nego cena. */

.bottom a .bdg.pro{
  background:var(--line-strong);
  color:var(--ink);
  font-size:8.5px;
  letter-spacing:.02em;
  height:14px;
  border-radius:7px;
  top:3px;
  left:calc(50% + 2px);
  padding:0 5px
}

.side a .bdg.pro{
  background:var(--line-strong);
  color:var(--ink);
  font-size:10px;
  font-weight:800;
  border-radius:8px;
  padding:1px 7px;
  margin-inline-start:auto
}

/* ============================================================
   ELEMENTI KOJI SE PONAVLJAJU NA SVIM EKRANIMA
   Sve leži na liniji: red je 44px i završava se hairline-om.
   ============================================================ */

.sheet{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 10px 26px -22px rgba(45,36,16,.55)
}

.pad{
  padding:14px 16px
}

.sect-t{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
  padding:20px 0 10px 16px
}

.wrap{
  padding:16px 16px 20px
}

.row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:var(--row);
  padding:11px 14px;
  border-bottom:1px solid var(--rule);
  position:relative
}

.row:last-child{
  border-bottom:0
}

.row .ic{
  width:34px;
  height:34px;
  border-radius:var(--r-sm);
  display:grid;
  place-items:center;
  flex:none;
  background:var(--accent-soft);
  color:var(--accent-ink)
}

.row .ic svg{
  width:16px;
  height:16px
}

.row .tx{
  flex:1;
  min-width:0
}

.row .tx b{
  display:block;
  font-size:14.5px;
  font-weight:700;
  line-height:21px
}

.row .tx span{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  line-height:18px;
  margin-top:2px
}

/* Posle grupe B (11.09.): naziv koji upisuje korisnik, kad je jedna duga reč,
   izlazio je iz svoje kutije i crtao se PREKO dugmeta u redu (polja.njk: 16px
   preklapanja na 320px). Lomi se u reči samo kad reč sama ne staje. */

.row .tx b,.row .tx span{
  overflow-wrap:anywhere
}

.row .rt{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap
}

.row .ch{
  color:var(--faint);
  flex:none;
  width:16px;
  height:16px
}

.row.tap:active{
  background:var(--accent-softer)
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11.5px;
  font-weight:800;
  border-radius:var(--r-full);
  padding:6px 11px;
  line-height:1.1;
  white-space:nowrap
}

.pill.ok{
  background:var(--s-ok-bg);
  color:color-mix(in srgb,var(--s-ok) 80%,#000)
}

.pill.wait{
  background:var(--s-wait-bg);
  color:color-mix(in srgb,var(--s-wait) 80%,#000)
}

.pill.miss{
  background:var(--s-miss-bg);
  color:color-mix(in srgb,var(--s-miss) 80%,#000)
}

.pill.done{
  background:var(--s-done-bg);
  color:color-mix(in srgb,var(--s-done) 78%,#000)
}

.pill.acc{
  background:var(--accent-soft);
  color:var(--accent-ink)
}

.pill.out{
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--line-2);
  color:var(--muted)
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--accent);
  color:var(--on-accent);
  border-radius:10px;
  padding:0 16px;
  height:44px;
  font-weight:800;
  font-size:14.5px;
  box-shadow:0 1px 2px rgba(20,18,15,.14), 0 8px 20px -12px var(--accent-glow);
  transition:transform .16s var(--e-out), background .16s
}

.btn:active{
  transform:scale(.975)
}

.btn.sec{
  background:var(--sheet);
  color:var(--accent-ink);
  box-shadow:inset 0 0 0 1.5px var(--accent-line)
}

.btn.gh{
  background:transparent;
  color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.btn.sm{
  height:38px;
  padding:0 14px;
  font-size:13px;
  border-radius:9px
}

.btn.wide{
  width:100%
}

.btn.dgr{
  background:transparent;
  color:var(--s-miss);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s-miss) 34%,transparent)
}

.fab{
  position:absolute;
  right:16px;
  bottom:80px;
  z-index:35;
  display:none;
  transition:transform .3s var(--e-out),opacity .2s;
  height:52px;
  border-radius:26px;
  padding:0 20px;
  align-items:center;
  gap:9px;
  background:var(--accent);
  color:var(--on-accent);
  font-weight:800;
  font-size:15px;
  box-shadow:0 6px 18px -6px var(--accent-glow), 0 2px 6px rgba(20,18,15,.2)
}

.fab svg{
  width:18px;
  height:18px
}

/* NEAKTIVNO plutajuće dugme (vlasnik 17.09.2026): ista prigušena boja kao ranije
   (`opacity:.45` preko papira), ali NEPROZIRNO. Providno dugme kroz koje se vidi red
   spiska ne izgleda kao „ne može", nego kao kvar u crtanju (izmereno na VAU-02:
   kroz dugme se čitalo „važi do 17.03."). Boja se meša, a ne propušta. */

.fab:disabled{
  opacity:1;
  cursor:default;
  box-shadow:none;
  background:color-mix(in srgb,var(--accent) 45%,var(--paper));
  color:color-mix(in srgb,var(--on-accent) 45%,var(--paper))
}

.main.calendaring .fab{
  display:inline-flex
}

.main.sheeted .fab{
  transform:translateY(160%) scale(.9);
  opacity:0;
  pointer-events:none
}

.fab:active{
  transform:scale(.97)
}

/* PRILAGODJENO — plutajuca dugmad kalendara. U predlosku `.fab` stoji u `.main`
   VAN skrolera, `position:absolute`. Kod nas zivi u `#day-view` (menja se htmx-om
   sa danom, pa i vreme novog termina prati dan) — dakle UNUTAR `.scr`, gde bi
   `absolute` klizio sa sadrzajem. `fixed` daje isto mesto kao predlozak: `.main`
   ima `container-type`, a ono ukljucuje layout containment, pa je `.main` okvir
   i za `fixed` potomke — dugme stoji uz `.main` i ne klizi.
   Donja traka na iPhone-u je visa za safe area; dugme na fiksnih 80px bi je
   preklapalo, pa se dize za istu ivicu (desktop ima svoje pravilo ispod). */

.scr .fab{
  position:fixed
}

/* Odluka 4 (vlasnik 10.09.2026): na telefonu nema strelice „sledeci" (dan, nedelja,
   mesec) — ostaju „‹" i „Danas", kao u predlosku; na desktopu stoje obe strelice.
   Granica je 1024px, ISTA kao prelaz na bocni meni: prvo je ovde stajalo 767px, pa je
   telefon polozeno (844px) dobijao i „›" (izmereno 11.09., [odluka-4] na p844). */

@media (max-width:1023px){
  .cal .top .r1 .ico.sledeci{
    display:none
  }
}

/* Naslov kalendara na najužim telefonima: predložak ga seče tri tačke (`nowrap`), a
   sa „‹" i „Danas" u istom redu na 320px datum gubi mesec („Petak, 11. septembar"
   170px u 148px, izmereno 11.09.). 16px ga vraća u red; od 375px ostaje predloškov. */

@media (max-width:374px){
  .cal .top h1{
    font-size:16px
  }
}

/* Naslov dana: pun oblik, a ispod 352px dan skraćen na tri slova (vlasnik 12.09.2026 —
   svesno odstupanje, predložak nema tako usku širinu). Granica je IZMERENA: najduži
   naslov „Ponedeljak, 28. septembar" je 179,9px, kutija je 180,2px na 352 i 179,2px na
   351 — pa skraćen oblik ide samo tamo gde pun ne staje (320: 25 od 168 naslova). Test
   `src/lib/time-naslov-kratak.test.ts` pada ako se skraćen oblik pojavi na 352px ili više. */

.top h1 .nsl-kr{
  display:none
}

@media (max-width:351.98px){
  .cal .top h1 .nsl-dug{
    display:none
  }

  .cal .top h1 .nsl-kr{
    display:inline
  }
}

.fab{
  bottom:calc(80px + env(safe-area-inset-bottom))
}

.num{
  font-family:Newsreader,Georgia,serif;
  font-weight:600;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums
}

.av{
  width:34px;
  height:34px;
  border-radius:50%;
  flex:none;
  display:grid;
  place-items:center;
  font-size:11.5px;
  font-weight:800;
  background:var(--accent-soft);
  color:var(--accent-ink)
}

.seg2{
  display:flex;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  padding:3px;
  gap:2px
}

.seg2 button{
  padding:7px 13px;
  border-radius:var(--r-full);
  font-size:12.5px;
  font-weight:800;
  color:var(--muted)
}

.seg2 button[aria-pressed=true]{
  background:var(--accent);
  color:var(--on-accent)
}

/* PRILAGODJENO: predlozak sklopku crta samo nad `<button aria-pressed>`. Kod nas
   su Dan/Nedelja i birac perioda LINKOVI (adresa se pamti i deli), a tekuci
   izbor nosi `aria-current="page"` — isti izgled, drugi element. Bez ovoga su
   stajali kao go tekst u beloj traci (snimak 10.09.). */

.seg2 > a{
  padding:7px 13px;
  border-radius:var(--r-full);
  font-size:12.5px;
  font-weight:800;
  color:var(--muted);
  text-align:center;
  white-space:nowrap
}

.seg2 > a[aria-current=page]{
  background:var(--accent);
  color:var(--on-accent)
}

/* Birac perioda na Statistici ima PET izbora; na 390px ne staju ni sa punim
   paddingom predloska (izmereno: „Godina" odsecena). Klizi unutar SVOJE trake,
   strana nikad. */

.seg2.st-per{
  overflow-x:auto;
  scrollbar-width:none
}

.seg2.st-per::-webkit-scrollbar{
  display:none
}

.seg2.st-per > a{
  flex:1 0 auto;
  padding-inline:10px
}

.ico{
  width:38px;
  height:38px;
  border-radius:var(--r-sm);
  display:grid;
  place-items:center;
  color:var(--ink-2);
  flex:none
}

.ico:hover{
  background:var(--sheet-2)
}

.ico svg{
  width:19px;
  height:19px
}

.sw2{
  width:48px;
  height:28px;
  border-radius:14px;
  background:var(--line-2);
  position:relative;
  flex:none;
  transition:background .22s var(--e-out)
}

.sw2::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(20,18,15,.3);
  transition:transform .24s var(--e-spring)
}

.sw2[aria-checked=true]{
  background:var(--accent)
}

.sw2[aria-checked=true]::after{
  transform:translateX(20px)
}

.empty{
  text-align:center;
  padding:34px 20px;
  color:var(--muted);
  font-size:13.5px;
  font-weight:600;
  line-height:21px
}

/* Red „Još N podešavanja vidi samo vlasnik" (odluka 29) je napomena UZ spisak,
   pa stoji poravnat sa redovima iznad, ne centriran kao prazno stanje: levi
   razmak je ISTI kao kod `.mv .ri` (10px), pa tekst počinje na ivici ikonica. */

.empty.skriveno{
  text-align:left;
  padding:18px 10px 10px
}

/* ============================================================
   1 · KALENDAR
   Sat je linija. Termin je list koji leži preko linija, sa šinom
   u boji statusa. Jedina crvena stvar je „sada".
   ============================================================ */

.cal .strip{
  display:flex;
  gap:6px;
  padding:9px 16px 9px 30px;
  overflow-x:auto;
  scrollbar-width:none;
  border-bottom:1px solid var(--line);
  background:var(--paper);
  -webkit-mask-image:linear-gradient(90deg,#000 0 92%,transparent);
  mask-image:linear-gradient(90deg,#000 0 92%,transparent)
}

.cal .strip::-webkit-scrollbar{
  display:none
}

.cal .d{
  flex:none;
  width:42px;
  text-align:center;
  padding:6px 0 7px;
  border-radius:10px;
  line-height:1.15
}

.cal .d small{
  display:block;
  font-size:9.5px;
  font-weight:800;
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:.06em
}

.cal .d b{
  display:block;
  font-family:Newsreader,Georgia,serif;
  font-size:19px;
  font-weight:600;
  margin-top:2px;
  line-height:1.25
}

.cal .d i{
  display:block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
  margin:3px auto 0;
  opacity:.55
}

.cal .d.on{
  background:var(--dark);
  color:var(--on-dark)
}

.cal .d.on small{
  color:color-mix(in srgb,var(--on-dark) 62%,transparent)
}

.cal .d.on i{
  background:var(--on-dark)
}

.cal .d.off{
  opacity:.42
}

/* PRILAGODJENO — prevlacenje termina (public/app.js, `calDrag`). Predlozak ga
   nema; pravila su bila u obrisanom starom sloju, pa vucenje od 09.09. nije
   imalo NIKAKAV vizuelni odziv — kartica se nije podizala, dan ispod prsta se
   nije isticao, natpis vremena nije imao oblik. Izgled iz postojecih tokena. */

/* Kartica koja se vuce: podignuta, bez prelaza (prati prst bez kasnjenja) i
   providna za pokazivac — inace bi ONA bila „ispod prsta" umesto dana. */

.cal .ap.cal-card-drag{
  pointer-events:none;
  z-index:30;
  transition:none;
  transform:scale(1.02);
  box-shadow:0 18px 34px -16px rgba(45,36,16,.55)
}

/* Dan u traci na koji ce termin pasti. */

.cal .d.day-pill-drop{
  box-shadow:0 0 0 2px var(--accent)
}

/* GLAVA DANA (vlasnik 12.09.2026, posle kruga 13): lepljivi su SAMO traka datuma i
   čipovi radnica — skok na liniju „sada" pomera samo mrežu sati. Zaglavlje dana,
   sklopka Dan/Nedelja/Mesec, lokacija i branša skroluju sa mrežom (do tada je ceo
   taj blok bio lepljiv: 322px = 41% ekrana na 390). Cilj je zamrznut deo ≤ 25%
   visine prozora (provera `zamrznuto`). Pozadina je papir, kao `.scr` (boja
   lokacije je na `body`). */

.glava-dana{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--paper)
}

#day-view > .top{
  position:relative
}

/* NIZAK PROZOR (visina ≤ 500px, npr. telefon položeno 844×390): lepi se samo red
   čipova, a traka datuma otplovi — negativan `top` od visine trake drži glavu
   prilepljenu tek od čipova. Čipovi su prekidač koji mora biti dostupan, datum je
   navigacija i stoji i u naslovu. `--visina-trake` meri `dayScroll` (app.js);
   ovde je podrazumevana, izmerena vrednost. Pre izmene je na 844×390 mreži
   ostajalo 15px. */

@media (max-height:500px){
  .glava-dana{
    top:calc(-1 * var(--visina-trake,76px))
  }
}

/* SPISAK KLIJENATA NA NISKOM PROZORU (12.09.2026, isto pravilo kao glava dana):
   zaglavlje nosi pretragu, filtere i „Poređaj" (predložak `#v-cli`), pa bi
   lepljivo na 844×390 prekrilo sadržaj — krug 14: polje novog klijenta i pretrage
   zaklonjeni i nedostupni, „Ipak napravi" posle fokusa ispod reda „Poređaj". Na
   visini ≤ 500px zaglavlje skroluje sa spiskom; do pretrage se stiže skrolom na vrh. */

@media (max-height:500px){
  .cl .top{
    position:relative
  }
}

/* Vreme na koje kartica pada, uz sam prst — oblik `.toast`-a iz predloska. */

.cal-drag-hint{
  position:fixed;
  z-index:70;
  display:none;
  pointer-events:none;
  background:var(--dark);
  color:var(--on-dark);
  border-radius:var(--r-sm);
  padding:4px 10px;
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  box-shadow:0 10px 26px -14px rgba(45,36,16,.7)
}

.cal .who{
  display:flex;
  gap:7px;
  padding:11px 16px 12px 30px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0 92%,transparent);
  mask-image:linear-gradient(90deg,#000 0 92%,transparent)
}

.cal .who::-webkit-scrollbar{
  display:none
}

/* Branše u redu radnica (vlasnik 12.09.2026): grupa pilula pa tanka crta, pa
   čipovi radnica — dva filtera u jednom redu, bez novog reda iznad trake datuma. */

.cal .who{
  align-items:center
}

.cal .who .bransa{
  display:flex;
  gap:7px;
  flex:none;
  align-items:center;
  padding-right:10px;
  margin-right:3px;
  border-right:1px solid var(--line)
}

/* „Svi" koji ne staje (kolona radnice uža od `data-svi-min`) — sakriva ga
   `sviPoSirini` u public/app.js (vlasnik 11.09.2026). */

.cal .who a.w[hidden]{
  display:none
}

.cal .w{
  flex:none;
  display:flex;
  align-items:center;
  gap:7px;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  padding:4px 12px 4px 4px;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink-2)
}

.cal .w .av{
  width:26px;
  height:26px;
  font-size:10px
}

.cal .w.on{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent)
}

.cal .w.on .av{
  background:color-mix(in srgb,#000 18%,var(--accent));
  color:var(--on-accent)
}

.cal .w.free{
  opacity:.5
}

/* O-75 (vlasnik): IZBOR RADNICE NA USKOM EKRANU — jedno dugme umesto reda koji klizi.
   Oba su uvek u markupu, a sta se vidi bira MERENJE u pregledacu (`sviPoSirini` pali
   `.uzak` na `.who` kad red ne staje) — isti razlog kao kod „Svi": sirinu zna samo
   pregledac. Dugme nosi iste mere kao cip (`.w`), jer je to isti red i isti ritam;
   `font:inherit` je jedino sto <button> trazi a <a> ne. */

.cal .who .radnik-bir{
  display:none
}

.cal .who.uzak .radnice{
  display:none
}

/* Dugme sme da se SKUPI, red ne sme da klizi: na 320 px sa branshama ispred njega
   ceo natpis ne staje (izmereno: red 371 px u okviru od 320). Skracuje se IME NA
   DUGMETU, a ne imena u spisku — u listu je ime celo, i to je ceo smisao izmene. */

.cal .who.uzak .radnik-bir{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  justify-content:flex-end
}

.cal .w.wbtn{
  font-family:inherit;
  font-size:12.5px;
  cursor:pointer;
  padding-right:9px;
  min-width:0
}

.cal .w.wbtn .wbtn-ime{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.cal .w.wbtn .ch{
  flex:none
}

/* Strelica nadole: znak da dugme OTVARA spisak, a ne da je prekidac. */

.cal .w.wbtn .ch{
  width:0;
  height:0;
  margin-left:1px;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.75
}

/* List odozdo sa spiskom radnica (partials/radnice-list.njk). Red je visok 52px, sto je
   iznad praga za dodir; ime stoji CELO, jer je ceo smisao izmene u tome da se procita. */

.rad-lista{
  display:grid;
  gap:2px;
  margin-top:14px
}

.rad-red{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:52px;
  padding:8px 12px;
  border-radius:var(--r-md);
  font-size:15px;
  font-weight:700;
  color:var(--ink-2)
}

.rad-red:hover{
  background:var(--line)
}

.rad-red.on{
  background:var(--accent);
  color:var(--on-accent)
}

.rad-red.on .av{
  background:color-mix(in srgb,#000 18%,var(--accent));
  color:var(--on-accent)
}

.rad-red .rad-ime{
  min-width:0;
  overflow-wrap:anywhere
}

/* „Svi" nema inicijale — prazan krug bi izgledao kao radnica bez imena, pa nosi tri tacke. */

.av-svi{
  background:var(--line);
  color:var(--muted)
}

.av-svi::after{
  content:"•••";
  font-size:9px;
  letter-spacing:.5px
}

/* „Svi" se nudi SAMO kad se nudi i u cipovima; odluku donosi isto merenje
   (`sviPoSirini` upisuje `data-svi-staje` na <html>), ne druga kopija pravila. */

html[data-svi-staje="0"] .rad-red[data-svi]{
  display:none
}

.calbody{
  position:relative;
  padding:4px 16px 96px 50px
}

.cal-grid{
  position:relative
}

.cal-grid .h{
  position:relative;
  height:86px;
  border-top:1px solid var(--rule)
}

.cal-grid .h:first-child{
  border-top:0
}

.cal-grid .h > b{
  position:absolute;
  left:-42px;
  top:-8px;
  width:30px;
  text-align:right;
  font-size:10.5px;
  font-weight:700;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums
}

.cal-grid .h::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:43px;
  border-top:1px dashed var(--rule);
  opacity:.65
}

.slots{
  position:absolute;
  inset:4px 16px 96px 50px
}

/* PRILAGODJENO — polozaj kartice dolazi kao CSS promenljive: `--l`/`--w` za
   telefon, `--ld`/`--wd` za kolonu radnika na desktopu. Inline `left/width` bi
   pobedio desktop pravilo, a dva DOM-a bi zbunila prevlacenje i testove. */

.slots > .ap{
  left:var(--l,0%);
  width:var(--w,100%);
  right:auto
}

.ap{
  position:absolute;
  left:0;
  right:0;
  border-radius:9px;
  padding:6px 10px 7px 12px;
  overflow:hidden;
  border-left:3.5px solid;
  background:var(--sheet);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 6px 16px -12px rgba(45,36,16,.7);
  opacity:0;
  transform:translateY(-8px) scale(.985)
}

.on .ap{
  animation:apIn .5s var(--e-spring) forwards;
  animation-delay:calc(var(--i)*.07s + .12s)
}

@keyframes apIn{
  to{
    opacity:1;
    transform:none
  }
}

.ap .t{
  font-size:10.5px;
  font-weight:800;
  opacity:.72;
  font-variant-numeric:tabular-nums
}

.ap .n{
  font-family:Newsreader,Georgia,serif;
  font-size:15.5px;
  font-weight:600;
  line-height:1.38;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.ap .s{
  font-size:11.5px;
  font-weight:600;
  opacity:.74;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

/* DRUGI RED KARTICE SE PRELAMA (vlasnik 11.09.2026) — svesno odstupanje od
   predloškovih tri tačke: na 820 („Svi", kolona 164px) ima mesta, pa tri tačke
   znače da red pakuje previše u jednu liniju. Dva dela (usluga · radnica) ostaju
   cela i prelamaju se NA razdvajaču; ako prelom jednog dana razbije mrežu
   kartica, odsecanje se predlaže vlasniku sa merenjem, ne vraća se ćutke. */

.ap .s{
  display:flex;
  flex-wrap:wrap;
  -moz-column-gap:4px;
       column-gap:4px;
  text-overflow:clip
}

.ap .s > span{
  white-space:nowrap
}

/* ODLUKA 34 (vlasnik 17.09.2026) — POJAS 768–1023px NOSI INICIJALE.
   Put do nje je zapisan jer su dva izlaza pre nje oborena merenjem: prelom krije
   ime (kartica od 45 min je 63px, tri reda traze 80px), a `display:block;
   white-space:nowrap` ga sece i usput pojede `column-gap`, pa razdvajac ostane
   bez razmaka. Treci pokusaj — sakriti „Svi" na toj sirini — vlasnik je povukao:
   prikaz ostaje, a kartica nosi „· AĐ" umesto „· Anđela Đurić".
   Kad ni tako ne stane, skracuje se NAZIV USLUGE, nikad osoba: `.rad` se ne
   steze (`flex:none`), usluga se steze i dobija tri tacke. Van ovog pojasa
   prelom ostaje kako je vlasnik odlucio 11.09, a od 1024px `.rad` nestaje jer
   zaglavlje kolone nosi ime. */

.ap .s .rad-ini{
  display:none;
  text-decoration:none
}

/* ODLUKA 36 (vlasnik 17.09.2026) — OD 768px DAN U PRIKAZU „Svi" IDE U KOLONE PO
   RADNICI, sa punim imenom u zaglavlju kolone i bez inicijala na kartici. Uslov
   je prag izveden iz sadrzaja: nijedno ime u zaglavlju ne sme da se seche, a
   kartica ne sme ispod poda (`data-svi-min`). Ako ne prodje, vraca se na trake
   po preklapanju sa inicijalima — ODLUKA 34 je od sada REZERVNI raspored, ne
   glavni (nije obrisana: bez nje bi salon sa sest radnica ostao bez „Svi").
   Odluku donosi `sviPoSirini` (public/app.js) i pise je klasom `.kolone`.

   Deklaracije ispod su KOPIJA desktop bloka (od 1024px). Kopija je svesna i
   ogradjena: `src/web/dan-svi-kolona.test.ts` poredi obe strane i pada na svaku
   razliku. Alternativa — spustiti desktop blok na 768px i paliti ga klasom —
   znacila bi da desktop kolone zavise od JS-a, sto danas ne zavise. */

@media (min-width:768px) and (max-width:1023.98px){
  .cal.kolone .lanehd{
    display:grid;
    grid-template-columns:repeat(var(--kol,4),1fr);
    gap:8px;
    margin-left:58px;
    padding:8px 22px 8px 0;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:var(--vrh-zaglavlja,0px);
    background:var(--paper);
    z-index:15
  }

  .cal.kolone .lanehd > *{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12.5px;
    font-weight:800;
    color:var(--ink-2);
    min-height:44px;
    padding:0;
    border:0;
    background:none;
    font-family:inherit;
    text-align:left;
    width:100%
  }

  .cal.kolone .lanehd .av{
    width:24px;
    height:24px;
    font-size:9.5px
  }

  .cal.kolone .lanehd .fr{
    margin-left:auto;
    font-size:10.5px;
    font-weight:700;
    color:var(--muted-2)
  }

  .cal.kolone .slots{
    inset:4px 22px 96px 58px
  }

  .cal.kolone .slots > .ap{
    left:calc(var(--ld,0%) + 4px);
    width:calc(var(--wd,100%) - 8px)
  }

  .cal.kolone .slots > .gap{
    left:calc(var(--ld,0%) + 4px);
    width:calc(var(--wd,100%) - 8px)
  }

  .cal.kolone .gap.samo-desk{
    display:flex
  }

  /* Ime radnice se ne ponavlja na kartici u koloni koja to ime vec nosi. */

  .cal.kolone .ap .s .rad{
    display:none
  }

  /* REZERVA (odluka 34) vazi SAMO kad kolone ne stanu. */

  .cal:not(.kolone) .ap .s{
    flex-wrap:nowrap
  }

  .cal:not(.kolone) .ap .s > span:first-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis
  }

  .cal:not(.kolone) .ap .s .rad{
    flex:none
  }

  .cal:not(.kolone) .ap .s .rad-pun{
    display:none
  }

  .cal:not(.kolone) .ap .s .rad-ini{
    display:inline
  }
}

/* ODLUKA 37 (vlasnik 17.09.2026) — CIPOVI RADNICA SE CRTAJU SAMO KAD ZAGLAVLJA
   KOLONA NISU NA EKRANU. U rasporedu „kolone" zaglavlje kolone JESTE filter
   (dugme, `day-column.njk`), pa bi red cipova ponavljao ista imena jedno iznad
   drugog i bez potrebe trosio zamrznutu visinu.

   Gasi se SAMO red radnica; cipovi bransi (Sve / Frizer / Nokti) ostaju, jer
   filtriraju drugo i nemaju par u zaglavlju.

   Nema medija-upita: klasu `.kolone` postavlja `sviPoSirini` svuda gde se kolone
   stvarno crtaju, pa pravilo vazi i u pojasu 768–1023 i na desktopu. Kad dan
   padne na jednu radnicu, klase nema — cipovi se vracaju sami i nose put nazad.

   Odluka 16 nije obrisana nego PREMESTENA u 37: filter po radnici i dalje postoji
   na velikom ekranu, samo je sada u zaglavlju kolone umesto u posebnom redu. */

/* OMOTAC CIPOVA RADNICA JE FLEX, ISTO KAO `.bransa` (izmereno 17.09.2026).
   Uveden je uz odluku 37 da bi se red radnica mogao ugasiti u kolonama — i odmah
   je, kao obican `<span>`, postao flex-stavka u kojoj se cipovi PRELAMAJU umesto
   da klize vodoravno. Posledica je merena, ne naslucena: zamrznut deo dana na
   320px skocio je sa ~135 na 289px (34,2% prozora), dakle preko pravila od 25%,
   a isto na 360, 390 i 430. Sa `flex:none` red se ponasa kao pre. */

.cal .who .radnice{
  display:flex;
  gap:7px;
  flex:none;
  align-items:center
}

.cal.kolone .who .radnice{
  display:none
}

/* Zaglavlje kolone je prekidac, pa nosi saku — globalno pravilo daje `default`
   svemu sto nije pravi link. Bez ovog reda `.kolhd` je i klasa BEZ IJEDNOG
   PRAVILA, sto provera `bezStila` ispravno prijavljuje. */

.kolhd{
  cursor:pointer
}

/* NIZAK PROZOR (odluka 36, tacka 2): zaglavlje kolona prestaje da bude lepljivo i
   klizi sa sadrzajem, istim mehanizmom kojim traka datuma otplovi (linija 1096).
   Bez toga zamrznut deo raste sa 135 na 176px i probija pravilo od 12.09. (najvise
   25% visine prozora). Prag se NE uvodi nov — koristi se postojeci `500px`. */

@media (max-height:500px){
  .cal.kolone .lanehd{
    position:static
  }
}

.ap.ok{
  border-color:var(--s-ok);
  background:var(--s-ok-bg);
  color:color-mix(in srgb,var(--s-ok) 78%,#000)
}

.ap.wait{
  border-color:var(--s-wait);
  background:var(--s-wait-bg);
  color:color-mix(in srgb,var(--s-wait) 78%,#000)
}

.ap.miss{
  border-color:var(--s-miss);
  background:var(--s-miss-bg);
  color:color-mix(in srgb,var(--s-miss) 78%,#000)
}

.ap.done{
  border-color:var(--s-done);
  background:var(--s-done-bg);
  color:var(--s-done)
}

.ap.done .n{
  text-decoration:line-through;
  text-decoration-thickness:1px;
  opacity:.8
}

/* ODLUKA 13: status kartice se nosi bojom kartice (i precrtanim imenom kod
   zavrsenog), ne providnoscu teksta. Providnost vremena (.72) i usluge (.74)
   spustala je SVAKI status ispod 4,5:1 — izmereno: zavrsen 2,62, nije dosao 3,43
   (vreme) / 3,57 (usluga); racunato za potvrdjen 3,20 i zakazan 3,21 (bez
   providnosti 5,69 / 5,73). Hijerarhija ostaje u velicini i debljini slova. */

.ap .t,.ap .s,.ap.done .n{
  opacity:1
}

/* KRATAK TERMIN (11.09.2026): kartica niža od 48px (20 min = 25px) nema mesta za
   tri reda predloška (vreme, ime, usluga), pa je ime stajalo odsečeno na 8px visine
   — vlasnik ga je video golim okom u 15:00, alat ga je izmerio. Predložak kraći
   termin od 45 min nema. Jedan red: vreme · ime; usluga je u terminu na dodir. */

.ap.kratak{
  padding:3px 8px 3px 10px;
  white-space:nowrap
}

.ap.kratak .t,.ap.kratak .n{
  display:inline
}

.ap.kratak .n{
  font-size:13.5px;
  line-height:1.3;
  margin-left:4px
}

.ap.kratak .s{
  display:none
}

.ap.pause{
  border-color:var(--line-2);
  background:repeating-linear-gradient(135deg,var(--sheet-2) 0 7px,transparent 7px 14px);
  color:var(--muted);
  border-left-style:dashed
}

/* Bez `opacity:.6` iz predloška: „✕" je tekst, a providnost ga je spuštala na 2,58:1
   preko šrafure pauze (odluka 13; izmereno 11.09. kad je šrafura postala merljiva).
   Boju daje `.ap .kbd` niže (`--muted`). */

.ap .kbd{
  position:absolute;
  right:9px;
  top:8px;
  font-size:10px;
  font-weight:800
}

.gap{
  position:absolute;
  left:0;
  right:0;
  border:1.5px dashed var(--accent-line);
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:11.5px;
  font-weight:800;
  color:var(--accent-ink);
  background:color-mix(in srgb,var(--accent) 4%,transparent);
  opacity:0
}

.on .gap{
  animation:apIn .55s var(--e-out) forwards 1.1s
}

.gap svg{
  width:14px;
  height:14px
}

/* RUPA (odluka 10, 11.09.2026): `.gap` iz predloska je u aplikaciji DUGME u
   koloni radnice — isti polozaj kao kartica (`--ld`/`--wd` na desktopu), preko
   cele sirine na telefonu kad je prikazana jedna radnica. Pod „Svi" je na
   telefonu nema (`samo-desk`): telefon tada nema kolone po radnici, pa bi blok
   stajao preko tudjih kartica. */

/* `z-index:1` kao `.calslot`: pri istom sloju pobeđuje kasniji u DOM-u, a rupa
   dolazi POSLE slotova — pa je iznad praznog mesta, a ispod kartice (`.ap` 2).
   Bez ovoga je slot ležao PREKO rupe i dodir na „ponudi listi čekanja" otvarao je
   „Novi termin" (prolaz sa animacijama, krug 9, 11.09.: klik na `.gap` istekao na
   390/820/1280; proba: sredinu svake vidljive rupe pogađa `<button.calslot>`). */

.slots > .gap{
  left:0;
  right:auto;
  width:100%;
  font-family:inherit;
  cursor:pointer;
  z-index:1
}

.gap.samo-desk{
  display:none
}

/* „sada" — jedina crvena stvar na radnom ekranu */

.now{
  position:absolute;
  left:-42px;
  right:0;
  height:0;
  z-index:6;
  pointer-events:none;
  opacity:0
}

.on .now{
  animation:apIn .5s var(--e-out) forwards 1.4s
}

.now::before{
  content:"";
  position:absolute;
  left:42px;
  right:0;
  top:0;
  border-top:1.5px solid var(--margin)
}

.now b{
  position:absolute;
  left:0;
  top:-9px;
  font-size:10px;
  font-weight:800;
  color:#fff;
  background:var(--margin);
  border-radius:var(--r-full);
  padding:2px 6px;
  font-variant-numeric:tabular-nums
}

/* ODSTUPANJE OD PREDLOSKA, svesno (10.09.): natpis „sada" je u predlosku beo na
   `--margin` — izmereno 3,88:1, ispod 4,5:1 za tekst od 10px. Aplikacija se
   drzi na telefonu ceo dan, i napolju. Zatamnjena je SAMO plocica natpisa (na
   ~5,1:1); linija „sada" ostaje boje margine. Crvena i dalje znaci „sada". */

.now b{
  background:color-mix(in srgb,var(--margin) 80%,var(--ink))
}

/* otvoren termin — donji list */

.sheetup{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:30;
  background:var(--sheet);
  border-top:1px solid var(--line);
  border-radius:20px 20px 0 0;
  padding:8px 16px 16px;
  box-shadow:0 -14px 40px -20px rgba(45,36,16,.6);
  transform:translateY(calc(100% + 40px));
  transition:transform .42s var(--e-out)
}

.sheetup.on{
  transform:none
}

.sheetup{
  max-height:82%;
  overflow-y:auto;
  scrollbar-width:none
}

.sheetup::-webkit-scrollbar{
  display:none
}

.sheetup .grab{
  width:38px;
  height:4px;
  border-radius:2px;
  background:var(--line-2);
  margin:0 auto 12px
}

.sheetup .close-x{
  display:none;
  position:absolute;
  right:16px;
  top:16px;
  width:34px;
  height:34px;
  border-radius:9px;
  place-items:center;
  color:var(--muted);
  background:var(--sheet-2);
  z-index:3
}

.sheetup .close-x:hover{
  color:var(--ink);
  background:var(--line)
}

.sheetup .close-x svg{
  width:16px;
  height:16px
}

.sheetup .hd{
  display:flex;
  align-items:flex-start;
  gap:11px
}

.sheetup .hd .n{
  font-family:Newsreader,Georgia,serif;
  font-size:21px;
  font-weight:600;
  line-height:1.3
}

.sheetup .hd .m{
  font-size:12.5px;
  color:var(--muted);
  font-weight:700;
  margin-top:2px
}

.sheetup .meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin:12px 0 0;
  border-top:1px solid var(--rule)
}

.sheetup .meta div{
  padding:9px 0;
  border-bottom:1px solid var(--rule)
}

.sheetup .meta div:nth-child(odd){
  padding-right:12px
}

.sheetup .meta .k{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2)
}

.sheetup .meta .v{
  font-size:14px;
  font-weight:700;
  margin-top:2px
}

.sheetup .acts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px
}

.sheetup .acts .btn:first-child{
  grid-column:1/-1
}

/* ============================================================
   2 · PREGLED
   ============================================================ */

.kpi3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--sheet)
}

.kpi3 > div{
  padding:14px 13px 15px;
  border-left:1px solid var(--rule)
}

.kpi3 > div:first-child{
  border-left:0
}

.kpi3 .k{
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted-2)
}

.kpi3 .v{
  font-family:Newsreader,Georgia,serif;
  font-size:26px;
  font-weight:600;
  letter-spacing:-.02em;
  margin-top:4px;
  line-height:1.24;
  font-variant-numeric:tabular-nums
}

.kpi3 .d{
  font-size:10.5px;
  font-weight:800;
  margin-top:2px
}

.kpi3 .d.up{
  color:var(--s-ok)
}

.kpi3 .d.dn{
  color:var(--s-miss)
}

.kpi3 .d.fl{
  color:var(--muted)
}

/* PRILAGODJENO: predlozak ima tacno tri plocice. Statistika ima cetiri (Zarada,
   Termina, Klijenata, Otkazano) i dve (Uspesnost, Novi klijenti).
   Kod cetiri, Zarada dobija CEO red a ostale tri stoje kao predloskov `.kpi3`:
   iznos od sedam cifara („1.807.800 RSD") u 26px Newsreadera je ~165px, a
   polovina ekrana od 390px daje 153px — dakle 2×2 bi ga prelomio ili odsekao,
   a smanjen font ne bi vise bio predlozak. Male brojke u tri kolone staju. */

.kpi3.k1{
  grid-template-columns:1fr
}

.kpi3.k2{
  grid-template-columns:repeat(2,1fr)
}

.kpi3.k4 > div:first-child{
  grid-column:1/-1;
  border-bottom:1px solid var(--rule)
}

.kpi3.k4 > div:nth-child(2){
  border-left:0
}

.next{
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-radius:var(--r-md);
  padding:16px;
  position:relative;
  overflow:hidden
}

.next .t{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-ink);
  display:flex;
  align-items:center;
  gap:7px
}

.next .t i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  position:relative
}

.next .t i::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:var(--accent);
  animation:ping 2.4s ease-out infinite
}

@keyframes ping{
  0%{
    transform:scale(1);
    opacity:.6
  }

  100%{
    transform:scale(3.4);
    opacity:0
  }
}

.next .n{
  font-family:Newsreader,Georgia,serif;
  font-size:25px;
  font-weight:600;
  margin:6px 0 3px;
  letter-spacing:-.01em;
  line-height:1.28
}

.next .m{
  font-size:12.5px;
  font-weight:700;
  color:var(--accent-ink);
  opacity:.85
}

.next .acts{
  display:flex;
  gap:9px;
  margin-top:14px
}

.next .acts .btn{
  flex:1
}

.spark{
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:74px;
  padding-top:8px
}

.spark i{
  flex:1;
  background:var(--accent-line);
  border-radius:3px 3px 0 0;
  height:0;
  position:relative;
  transition:height .8s var(--e-out);
  transition-delay:calc(var(--i)*.06s + .25s)
}

.spark i.hi{
  background:linear-gradient(180deg,var(--accent),var(--accent-deep))
}

.on .spark i{
  height:var(--h)
}

.sparkx{
  display:flex;
  justify-content:space-between;
  font-size:9.5px;
  font-weight:700;
  color:var(--muted-2);
  margin-top:6px;
  border-top:1px solid var(--rule);
  padding-top:5px
}

.mini-bar{
  height:6px;
  border-radius:3px;
  background:var(--line);
  overflow:hidden;
  margin-top:6px
}

.mini-bar i{
  display:block;
  height:100%;
  width:0;
  border-radius:3px;
  background:var(--accent);
  transition:width 1s var(--e-out) .3s
}

.on .mini-bar i{
  width:var(--w)
}

/* ============================================================
   3 · KLIJENTI
   ============================================================ */

.search{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  padding:0 16px;
  height:48px
}

.search svg{
  width:17px;
  height:17px;
  color:var(--faint-2);
  flex:none
}

.search input{
  flex:1;
  border:0;
  background:none;
  outline:none;
  font:inherit;
  font-size:14.5px;
  font-weight:600;
  color:var(--ink)
}

.search input::-moz-placeholder{
  color:var(--muted-2);
  font-weight:600
}

.search input::placeholder{
  color:var(--muted-2);
  font-weight:600
}

.alpha{
  font-family:Newsreader,Georgia,serif;
  font-size:15px;
  font-weight:600;
  color:var(--muted-2);
  padding:16px 0 6px 12px;
  letter-spacing:.06em;
  line-height:1.4
}

.cl .row .tx b{
  font-family:Newsreader,Georgia,serif;
  font-size:16.5px;
  font-weight:600;
  line-height:24px
}

.cl .row .rt{
  text-align:right
}

/* Telefon u spisku se ne seče (vlasnik 11.09.2026; na 320px je `truncate` odsecao
   poslednju cifru). `.tx` ne sme ispod širine broja (min-width:auto = broj u
   jednom komadu, jer je ime `overflow-wrap:anywhere`), a red sme da se prelomi:
   kad av + ime/telefon + iznos + strelica ne staju, iznos i strelica prelaze u
   drugi red, desno. Na širinama gde sve staje, raspored je isti kao pre. */

.cl .row{
  flex-wrap:wrap
}

.cl .row .tx{
  min-width:auto
}

.cl .row .rt{
  margin-left:auto
}

.cl .row .rt b{
  display:block;
  font-size:13px;
  font-weight:800;
  color:var(--ink-2);
  font-variant-numeric:tabular-nums
}

.cl .row .rt span{
  display:block;
  font-size:10.5px;
  color:var(--muted-2);
  font-weight:700;
  margin-top:1px
}

.karton .hd{
  display:flex;
  gap:12px;
  align-items:center
}

.karton .hd .av{
  width:52px;
  height:52px;
  font-size:17px
}

.karton .hd .n{
  font-family:Newsreader,Georgia,serif;
  font-size:23px;
  font-weight:600;
  line-height:1.3
}

/* Posle grupe B (11.09.), PRIVREMENO do odluke vlasnika o rasporedu: na 320px
   kolona imena ima 72px (360: 112px), a 21 od 37 reči imena u Lux-u je šira —
   bez loma se ime crtalo ispod dugmeta „Pozovi". Lom u reči je ružan, ali
   ništa ne prekriva; raspored `.hd` na uskom ekranu je pitanje za vlasnika. */

.karton .hd .n{
  overflow-wrap:anywhere
}

.karton .hd .p{
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  margin-top:2px;
  font-variant-numeric:tabular-nums
}

.karton .tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:12px
}

.karton .stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-top:14px
}

.karton .stats > div{
  padding:11px 0;
  border-left:1px solid var(--rule);
  padding-left:12px
}

.karton .stats > div:first-child{
  border-left:0;
  padding-left:0
}

/* PRILAGODJENO: zaposleni ne vidi „Potroseno“, pa ostaju dve kolone umesto rupe. */

.karton .stats.k2{
  grid-template-columns:repeat(2,1fr)
}

/* Posle grupe B (11.09.), odluka vlasnika: pločice se preslažu po SADRŽAJU, ne
   po širini ekrana — `auto-fit` ih spusti u novi red čim prestanu da staju.
   Najmanja pločica = najšira izmerena vrednost (90px, „čet 30.12.") + uvlaka i
   ivica (13px) + 1: na 320px ploča ima 236px, pa dve pločice staju. Iznos sa
   „RSD" stoji u svom redu (`.sum .ln`) — u tri kolone na 320px ima 66px mesta,
   a već „128.900" traži 78px (svesno odstupanje od predloška, dnevnik). */

.karton .stats,.karton .stats.k2{
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr))
}

.karton .stats .k{
  font-size:10px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--muted-2)
}

.karton .stats .v{
  font-family:Newsreader,Georgia,serif;
  font-size:20px;
  font-weight:600;
  margin-top:3px;
  line-height:1.3;
  font-variant-numeric:tabular-nums
}

.hist .h{
  display:flex;
  gap:12px;
  align-items:baseline;
  min-height:44px;
  padding:10px 0;
  border-bottom:1px solid var(--rule)
}

.hist .h .dt{
  width:66px;
  flex:none;
  font-size:11.5px;
  font-weight:800;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums
}

.hist .h .sv{
  flex:1;
  font-size:13.5px;
  font-weight:700
}

.hist .h .pr{
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.note-in{
  background:var(--s-wait-bg);
  border-radius:var(--r-sm);
  padding:10px 12px;
  font-size:13px;
  line-height:20px;
  color:color-mix(in srgb,var(--s-wait) 76%,#000);
  font-weight:600;
  position:relative;
  padding-left:14px
}

.note-in::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:2px;
  background:color-mix(in srgb,var(--s-wait) 60%,transparent)
}

/* ============================================================
   4 · BOOKING
   ============================================================ */

.bk .link{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--sheet-2);
  border:1px dashed var(--accent-line);
  border-radius:10px;
  padding:11px 12px;
  font-size:13px;
  font-weight:700;
  color:var(--accent-ink);
  font-variant-numeric:tabular-nums
}

.bk .link .u{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.bk .qr{
  display:flex;
  gap:14px;
  align-items:center
}

.bk .qr .code{
  width:104px;
  height:104px;
  flex:none;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--line);
  padding:8px;
  display:grid;
  place-items:center
}

.bk .qr .code svg{
  width:100%;
  height:100%
}

.bk .fld{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:60px;
  border-bottom:1px solid var(--rule);
  padding:11px 0
}

.bk .fld:last-child{
  border-bottom:0
}

.bk .fld .lb{
  flex:1;
  min-width:0
}

.bk .fld .lb b{
  display:block;
  font-size:14px;
  font-weight:700;
  line-height:19px
}

.bk .fld .lb span{
  display:block;
  font-size:11.5px;
  color:var(--muted);
  font-weight:600;
  line-height:16px;
  margin-top:1px
}

.step{
  display:flex;
  align-items:center;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  flex:none
}

.step button{
  width:38px;
  height:40px;
  font-size:17px;
  font-weight:700;
  color:var(--accent-ink);
  display:grid;
  place-items:center
}

.step button:active{
  background:var(--accent-soft)
}

.step .v{
  min-width:54px;
  text-align:center;
  font-size:14px;
  font-weight:800;
  border-inline:1px solid var(--rule);
  height:40px;
  display:grid;
  place-items:center;
  font-variant-numeric:tabular-nums
}

.prev{
  background:var(--dark);
  border-radius:20px;
  padding:8px;
  width:182px;
  flex:none
}

.prev .in{
  background:var(--sheet);
  border-radius:14px;
  overflow:hidden
}

.prev .hb{
  height:44px;
  background:linear-gradient(118deg,var(--accent-deep),var(--accent));
  display:grid;
  place-items:center;
  color:var(--on-accent);
  font-size:11.5px;
  font-weight:800
}

.prev .bd{
  padding:9px
}

.prev .sv{
  display:flex;
  justify-content:space-between;
  font-size:9px;
  font-weight:700;
  background:var(--sheet-2);
  border-radius:6px;
  padding:6px 7px;
  margin-bottom:5px;
  color:var(--ink-2)
}

.prev .go{
  background:var(--accent);
  color:var(--on-accent);
  border-radius:7px;
  text-align:center;
  padding:8px;
  font-size:10px;
  font-weight:800
}

/* ============================================================
   5 · VIŠE
   ============================================================ */

.more .grp{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden
}

.row .ic.a{
  background:var(--accent-soft);
  color:var(--accent-ink)
}

.row .ic.g{
  background:var(--s-ok-bg);
  color:var(--s-ok)
}

.row .ic.w{
  background:var(--s-wait-bg);
  color:var(--s-wait)
}

.row .ic.r{
  background:var(--s-miss-bg);
  color:var(--s-miss)
}

.row .ic.n{
  background:var(--s-done-bg);
  color:var(--s-done)
}

.row .ic{
  transition:background .25s var(--e-out), color .25s var(--e-out)
}

.plan-card{
  background:var(--dark);
  color:var(--on-dark);
  border-radius:var(--r-md);
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  position:relative;
  overflow:hidden
}

.plan-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(to bottom,transparent 0 21px,rgba(243,238,221,.09) 21px 22px)
}

.plan-card > *{
  position:relative
}

.plan-card .l{
  flex:1;
  min-width:0
}

.plan-card .k{
  display:block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  opacity:.6
}

.plan-card .v{
  display:block;
  font-family:Newsreader,Georgia,serif;
  font-size:22px;
  font-weight:600;
  margin-top:2px;
  line-height:1.3
}

.plan-card .m{
  display:block;
  font-size:11.5px;
  font-weight:600;
  opacity:.66;
  margin-top:2px
}

.plan-card .btn{
  background:var(--on-dark);
  color:var(--dark);
  box-shadow:none;
  flex:none;
  height:38px
}

.side .brandbar{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 10px 8px;
  border-bottom:1px solid var(--line)
}

.side .brandbar a{
  display:flex;
  border-radius:var(--r-sm,8px)
}

.side .nav{
  padding:10px 10px 0;
  flex:1;
  overflow-y:auto
}

.side .nav .gt{
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
  padding:14px 8px 6px
}

.side .nav a{
  display:flex;
  align-items:center;
  gap:11px;
  height:42px;
  border-radius:9px;
  padding:0 10px;
  font-size:14px;
  font-weight:700;
  color:var(--ink-2);
  position:relative
}

.side .nav a svg{
  width:19px;
  height:19px;
  flex:none;
  color:var(--muted)
}

.side .nav a:hover{
  background:var(--sheet-2)
}

.side .nav a.on{
  background:var(--accent-soft);
  color:var(--accent-ink)
}

.side .nav a.on svg{
  color:var(--accent)
}

.side .nav a.on::before{
  content:"";
  position:absolute;
  left:-10px;
  top:9px;
  bottom:9px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--accent)
}

.side .nav a .bdg{
  margin-left:auto;
  min-width:20px;
  height:20px;
  border-radius:10px;
  background:var(--s-miss);
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:grid;
  place-items:center;
  padding:0 5px
}

.side .foot{
  padding:12px;
  border-top:1px solid var(--line)
}

.side .foot .u{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px
}

.side .foot .u .tx b{
  display:block;
  font-size:13px;
  font-weight:800
}

.side .foot .u .tx span{
  display:block;
  font-size:11px;
  color:var(--muted);
  font-weight:700
}

/* dvokolonski raspored na širokom */

.cols2{
  display:grid;
  gap:14px
}

.lanes{
  display:none
}

.lanehd{
  display:none
}

/* ============================================================
   6 · KLIJENTSKA STRANICA ZA ZAKAZIVANJE
   Javna strana, pa sme da bude toplija od radnog dela — ali isti
   zakon: sve leži na liniji, korak je numerisan, izbor nosi akcenat.
   ============================================================ */

.app.public .side,.app.public .bottom{
  display:none
}

.app.catalog .side{
  display:none
}

.pub{
  padding:0 0 120px
}

.pub .hero{
  padding:20px 16px 16px 16px;
  border-bottom:1px solid var(--line)
}

.pub .hero h2{
  font-family:Newsreader,Georgia,serif;
  font-size:clamp(28px,8cqw,34px);
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.22;
  margin:0
}

.pub .meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
  font-size:12.5px;
  font-weight:700;
  color:var(--muted)
}

.pub .meta b{
  color:var(--ink);
  font-weight:800
}

.pub .meta .st{
  color:var(--s-wait)
}

.pub .meta svg{
  width:14px;
  height:14px;
  flex:none;
  color:var(--faint-2)
}

/* Odluka 39: pozdrav na ličnom linku je SVOJ red iznad `.meta`, iste tipografije
   kakvu je imao dok je stajao u njemu — nov stil se ne izmišlja. */

.pub .hero .hi{
  margin:8px 0 0;
  font-size:12.5px;
  font-weight:700;
  color:var(--muted)
}

.pub .open{
  margin-top:10px
}

.pub .body{
  padding:16px 16px 0 16px;
  display:grid;
  gap:14px
}

.stp{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--rule)
}

.stp .no{
  width:24px;
  height:24px;
  border-radius:50%;
  background:var(--dark);
  color:var(--on-dark);
  flex:none;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:800
}

.stp b{
  font-size:15.5px;
  font-weight:800;
  flex:1
}

.stp .pick{
  font-size:12.5px;
  font-weight:700;
  color:var(--accent-ink)
}

.opt{
  display:flex;
  align-items:center;
  gap:13px;
  padding:13px 16px;
  border-bottom:1px solid var(--rule);
  min-height:64px;
  cursor:pointer
}

.opt:last-child{
  border-bottom:0
}

.opt .rd{
  width:22px;
  height:22px;
  border-radius:50%;
  flex:none;
  background:var(--sheet-2);
  box-shadow:inset 0 0 0 1.5px var(--line-2);
  display:grid;
  place-items:center;
  transition:all .2s var(--e-out)
}

.opt .rd svg{
  width:13px;
  height:13px;
  color:var(--on-accent);
  opacity:0;
  transform:scale(.5);
  transition:all .22s var(--e-spring)
}

.opt.on{
  background:var(--accent-softer)
}

.opt.on .rd{
  background:var(--accent);
  box-shadow:inset 0 0 0 1.5px var(--accent)
}

.opt.on .rd svg{
  opacity:1;
  transform:none
}

.opt .tx{
  flex:1;
  min-width:0
}

.opt .tx b{
  display:block;
  font-size:15px;
  font-weight:700;
  line-height:22px
}

.opt .tx span{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  line-height:18px;
  margin-top:1px
}

.opt .pr{
  font-size:14.5px;
  font-weight:800;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

.who2{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:14px 16px
}

.who2 button{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--sheet-2);
  border-radius:var(--r-full);
  padding:8px 15px 8px 8px;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line)
}

.who2 button .av{
  width:26px;
  height:26px;
  font-size:10px
}

.who2 button.on{
  background:var(--accent-soft);
  color:var(--accent-ink);
  box-shadow:inset 0 0 0 1.5px var(--accent)
}

.who2 button.any{
  padding-left:15px
}

/* Izbor radnika na javnoj strani je PRAVO radio polje (salje se sa obrascem,
   radi bez JS-a), a predlozak tu crta `<button>`. Zato `label` nosi isti
   izgled, a „izabrano" cita samo polje — isti obrazac kao `.slotg label`. */

.who2 label{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--sheet-2);
  border-radius:var(--r-full);
  padding:8px 15px 8px 8px;
  font-size:13.5px;
  font-weight:700;
  color:var(--ink-2);
  cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line)
}

.who2 label.any{
  padding-left:15px
}

.who2 label .av{
  width:26px;
  height:26px;
  font-size:10px
}

.who2 label:has(> input:checked){
  background:var(--accent-soft);
  color:var(--accent-ink);
  box-shadow:inset 0 0 0 1.5px var(--accent)
}

.who2 label:has(> input:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:2px
}

.mon{
  padding:14px 16px 4px
}

.mon .h{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px
}

.mon .h b{
  font-size:14.5px;
  font-weight:800;
  flex:1
}

.mon .h button{
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--sheet-2);
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px var(--line)
}

.mon .h button svg{
  width:15px;
  height:15px
}

.mon .dow{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  font-size:10.5px;
  font-weight:800;
  color:var(--muted-2);
  text-align:center;
  text-transform:lowercase;
  letter-spacing:.04em;
  padding-bottom:4px
}

.mon .days{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:2px
}

.mon .dy{
  height:42px;
  border-radius:9px;
  display:grid;
  place-items:center;
  position:relative;
  font-size:14px;
  font-weight:700;
  color:var(--ink-2)
}

.mon .dy i{
  position:absolute;
  bottom:6px;
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--accent);
  opacity:.7
}

/* Dan koji se ne nudi: predlozak ga gasi providnoscu (.5), sto na papiru daje
   2,04:1 — daleko ispod 4,5 za sitan tekst (odluka 13). Broj ostaje citljiv u
   `--muted-2` (4,64:1), a razlika prema ponudjenom danu i dalje stoji: taj je
   u `--ink-2`, ima tackicu i prima dodir. Svesno odstupanje od predloska. */

.mon .dy.mut{
  color:var(--muted-2)
}

.mon .dy.on{
  background:var(--dark);
  color:var(--on-dark)
}

.mon .dy.on i{
  background:var(--on-dark)
}

.mon .dy.free:hover{
  background:var(--accent-softer)
}

/* Dan u mesecu je PRAVO radio polje na javnoj strani (salje se sa obrascem,
   radi bez JS-a), a predlozak tu crta obican `div` sa klasom `.on`. Zato
   `label.dy` nosi isti izgled, a „izabrano" cita samo polje — isti obrazac
   kao `.slotg label` i `.who2 label`. */

.mon label.dy{
  cursor:pointer
}

.mon label.dy:has(> input:checked){
  background:var(--dark);
  color:var(--on-dark)
}

.mon label.dy:has(> input:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:-2px
}

/* Strelice meseca su DODIRNE mete: predlozak ih crta 34x34, a to je ispod
   praga od 44px (izmereno 16.09.2026 na 390). Vizuelno ostaju iste velicine
   kao u predlosku — raste samo meta. Svesno odstupanje. */

.mon .h a{
  width:44px;
  height:44px;
  border-radius:9px;
  background:var(--sheet-2);
  display:grid;
  place-items:center;
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink-2)
}

.mon .h a svg{
  width:15px;
  height:15px
}

.slotwrap{
  padding:6px 16px 16px;
  border-top:1px solid var(--rule);
  margin-top:10px
}

.slotwrap .h{
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:10px 0 10px
}

.slotwrap .h b{
  font-size:14.5px;
  font-weight:800;
  flex:1
}

.slotwrap .h span{
  font-size:11.5px;
  font-weight:700;
  color:var(--muted)
}

.slotg{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px
}

.slotg button{
  height:46px;
  border-radius:10px;
  background:var(--sheet-2);
  font-size:14px;
  font-weight:800;
  color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
  font-variant-numeric:tabular-nums;
  transition:transform .16s var(--e-out)
}

.slotg button:active{
  transform:scale(.96)
}

.slotg button.on{
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:none
}

.sum .ln{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 0;
  border-bottom:1px solid var(--rule);
  font-size:13.5px;
  font-weight:700
}

.sum .ln span{
  color:var(--muted);
  font-weight:600
}

.sum .ln b{
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

.sum .tot{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:14px 0 4px
}

.sum .tot span{
  font-size:13.5px;
  font-weight:800
}

.sum .tot b{
  font-family:Newsreader,Georgia,serif;
  font-size:26px;
  font-weight:600;
  line-height:1.3;
  font-variant-numeric:tabular-nums
}

.inp{
  margin-top:12px
}

.inp label{
  display:block;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted-2);
  margin-bottom:5px
}

.inp input{
  width:100%;
  height:48px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--sheet-2);
  padding:0 14px;
  font:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  outline:none
}

.inp input::-moz-placeholder{
  color:var(--muted-2);
  font-weight:600
}

.inp input::placeholder{
  color:var(--muted-2);
  font-weight:600
}

.inp input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
  background:var(--sheet)
}

.trust{
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin-top:12px;
  font-size:12px;
  line-height:18px;
  color:var(--muted);
  font-weight:600
}

.trust svg{
  width:15px;
  height:15px;
  flex:none;
  color:var(--s-ok);
  margin-top:1px
}

.trust b{
  color:var(--ink-2);
  font-weight:800
}

.proof{
  display:flex;
  gap:9px;
  align-items:center;
  margin-top:12px;
  background:var(--s-wait-bg);
  border-radius:10px;
  padding:11px 13px;
  font-size:12px;
  font-weight:700;
  line-height:17px;
  color:color-mix(in srgb,var(--s-wait) 78%,#000)
}

.proof svg{
  width:15px;
  height:15px;
  flex:none
}

/* mobilna traka sa iznosom — desktop je ima u koloni desno */

.paybar{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:40;
  display:none;
  transition:transform .32s var(--e-out);
  align-items:center;
  gap:12px;
  background:var(--sheet);
  border-top:1px solid var(--line-2);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow:0 -18px 30px -24px rgba(45,36,16,.8)
}

.paybar .l{
  flex:1;
  min-width:0
}

.paybar .l b{
  display:block;
  font-family:Newsreader,Georgia,serif;
  font-size:22px;
  font-weight:600;
  line-height:1.25
}

.paybar .l span{
  display:block;
  font-size:11.5px;
  color:var(--muted);
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px
}

.paybar .btn{
  flex:none;
  padding:0 24px
}

.main.paying .paybar{
  display:flex
}

/* S07: usluga koja se ovim putem ne zakazuje — ni polja ni dugme za slanje (vidi `sazetak`
   u partials/pub-izbor.njk i omot `.slanje` na obe javne strane). Pravilo stoji na
   sažetku jer se samo on menja posle izbora. */

.sum:has(#sazetak[data-bez-slanja]) .slanje,
body:has(#sazetak[data-bez-slanja]) .main.paying .paybar{
  display:none
}

.paybar.away{
  transform:translateY(112%)
}

.only-mob{
  display:block
}

.only-wide{
  display:none
}

/* ============================================================
   VIŠE — dve kolone: levo šta postoji, desno izabrani odeljak.
   Isti zakon: red je 52px i završava se linijom; aktivno stanje
   nosi akcenat, jedina crvena je odjava (nepovratna radnja).
   ============================================================ */

.mv{
  display:flex;
  min-height:100%
}

.mv .rail{
  width:100%;
  flex:none;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  min-height:100%
}

.mv .rhead{
  padding:14px 16px 12px 16px;
  display:grid;
  gap:10px;
  min-width:0
}

.mv .rail .top{
  position:static;
  border-bottom:0;
  padding:26px 16px 6px 30px;
  background:transparent;
  -webkit-backdrop-filter:none;
          backdrop-filter:none
}

.mv .gt:first-child{
  padding-top:8px
}

.find{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 12px;
  height:44px;
  min-width:0;
  overflow:hidden
}

.find svg{
  width:16px;
  height:16px;
  color:var(--faint-2);
  flex:none
}

.find input{
  flex:1;
  min-width:0;
  border:0;
  background:none;
  outline:none;
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--ink)
}

.find input::-moz-placeholder{
  color:var(--muted-2)
}

.find input::placeholder{
  color:var(--muted-2)
}

.find kbd{
  flex:none;
  font:inherit;
  font-size:10.5px;
  font-weight:800;
  color:var(--muted-2);
  background:var(--sheet-2);
  border:1px solid var(--line);
  border-radius:5px;
  padding:2px 5px;
  display:none
}

/* Odluka 38: bedž prečice tek od 1024px — na telefonu tastera nema. */

@media (min-width:1024px){
  .find kbd{
    display:block
  }
}

.mv .lvl{
  display:flex;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:10px;
  padding:3px;
  gap:2px;
  min-width:0
}

.mv .lvl button{
  flex:1;
  min-width:0;
  height:34px;
  border-radius:7px;
  font-size:12.5px;
  font-weight:800;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  white-space:nowrap
}

.mv .lvl button svg{
  width:14px;
  height:14px
}

.mv .lvl button[aria-pressed=true]{
  background:var(--sheet-2);
  color:var(--ink);
  box-shadow:0 1px 2px rgba(45,36,16,.12), inset 0 0 0 1px var(--line)
}

.mv .rlist{
  flex:1;
  overflow-y:auto;
  scrollbar-width:none;
  padding:4px 10px 14px
}

.mv .rlist::-webkit-scrollbar{
  width:0;
  display:none
}

.mv .gt{
  font-size:10px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-2);
  padding:16px 8px 6px
}

.mv .ri{
  display:flex;
  align-items:center;
  gap:11px;
  height:46px;
  border-radius:9px;
  padding:0 10px;
  font-size:14.5px;
  font-weight:700;
  color:var(--ink-2);
  position:relative;
  cursor:pointer
}

.mv .ri svg.ic{
  width:19px;
  height:19px;
  flex:none;
  color:var(--muted)
}

.mv .ri .n{
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.mv .ri .c{
  font-size:11.5px;
  font-weight:800;
  color:var(--muted-2);
  background:var(--sheet-2);
  border-radius:var(--r-full);
  min-width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0 6px
}

.mv .ri:hover{
  background:var(--sheet-2)
}

.mv .ri.on{
  background:var(--accent-soft);
  color:var(--accent-ink)
}

.mv .ri.on svg.ic{
  color:var(--accent)
}

.mv .ri.on .c{
  background:color-mix(in srgb,var(--accent) 18%,var(--sheet));
  color:var(--accent-ink)
}

.mv .ri.on::before{
  content:"";
  position:absolute;
  left:-10px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--accent)
}

.mv .ri.danger{
  color:var(--s-miss)
}

.mv .ri.danger svg.ic{
  color:var(--s-miss)
}

.mv .rfoot{
  padding:8px 10px 12px;
  border-top:1px solid var(--line)
}

.mv .pane{
  flex:1;
  min-width:0;
  background:var(--paper);
  display:none;
  flex-direction:column
}

.mv.open .rail{
  display:none
}

.mv.open .pane{
  display:flex
}

.mv .phead{
  padding:18px 18px 16px;
  border-bottom:1px solid var(--line)
}

.mv .phead .back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:800;
  color:var(--muted);
  margin-bottom:10px
}

.mv .phead .back svg{
  width:14px;
  height:14px
}

.mv .phead h2{
  font-family:Newsreader,Georgia,serif;
  font-size:clamp(24px,6.4cqw,30px);
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.3;
  margin:0
}

.mv .phead p{
  font-size:13.5px;
  line-height:21px;
  color:var(--muted);
  font-weight:600;
  margin-top:6px;
  max-width:62ch
}

.mv .pbody{
  flex:1;
  overflow-y:auto;
  scrollbar-width:none;
  padding:16px 18px 26px
}

.mv .pbody::-webkit-scrollbar{
  width:0;
  display:none
}

.mv .cards{
  display:grid;
  gap:10px
}

.mv .card2{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:14px 16px;
  min-height:74px;
  cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 22px -20px rgba(45,36,16,.55);
  transition:transform .16s var(--e-out), box-shadow .16s var(--e-out)
}

.mv .card2:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
  0 12px 26px -18px rgba(45,36,16,.6);
  border-color:var(--accent-line)
}

.mv .card2 .ic{
  width:42px;
  height:42px;
  border-radius:11px;
  display:grid;
  place-items:center;
  flex:none
}

.mv .card2 .ic svg{
  width:20px;
  height:20px
}

.mv .card2 .ic.a{
  background:var(--accent-soft);
  color:var(--accent-ink)
}

.mv .card2 .ic.g{
  background:var(--s-ok-bg);
  color:var(--s-ok)
}

.mv .card2 .ic.w{
  background:var(--s-wait-bg);
  color:var(--s-wait)
}

.mv .card2 .ic.r{
  background:var(--s-miss-bg);
  color:var(--s-miss)
}

.mv .card2 .ic.n{
  background:var(--s-done-bg);
  color:var(--s-done)
}

.mv .card2 .tx{
  flex:1;
  min-width:0
}

.mv .card2 .tx b{
  display:block;
  font-family:Newsreader,Georgia,serif;
  font-size:17px;
  font-weight:600;
  line-height:1.35
}

.mv .card2 .tx span{
  display:block;
  font-size:12.5px;
  color:var(--muted);
  font-weight:600;
  line-height:18px;
  margin-top:2px
}

.mv .card2 .v{
  font-size:12.5px;
  font-weight:800;
  color:var(--muted);
  white-space:nowrap
}

.mv .card2 .v.off{
  color:var(--s-miss);
  background:var(--s-miss-bg);
  border-radius:var(--r-full);
  padding:5px 10px;
  font-size:11.5px
}

.mv .card2 .ch{
  width:16px;
  height:16px;
  color:var(--faint);
  flex:none
}

.mv .advtag{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--accent-ink);
  background:var(--accent-soft);
  border-radius:var(--r-full);
  padding:3px 7px;
  margin-left:7px;
  vertical-align:2px
}

/* nedeljni i mesečni pregled — isti ritam, samo gušće */

.cal .vsw{
  display:flex;
  gap:8px;
  align-items:center;
  padding:11px 0 1px
}

.cal .vsw .seg2{
  flex:1
}

.cal .vsw .seg2 button{
  flex:1
}

.cal .vsw .seg2 > a{
  flex:1
}

.wk{
  padding:0 16px 96px 50px;
  position:relative
}

.wk .hd{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
  position:sticky;
  top:0;
  z-index:5;
  background:var(--paper);
  padding:8px 0 8px;
  border-bottom:1px solid var(--line)
}

.wk .hd div{
  text-align:center;
  font-size:10px;
  font-weight:800;
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:.05em
}

.wk .hd div b{
  display:block;
  font-family:Newsreader,Georgia,serif;
  font-size:17px;
  font-weight:600;
  color:var(--ink-2);
  margin-top:2px;
  line-height:1.3;
  text-transform:none;
  letter-spacing:0
}

.wk .hd div.on b{
  background:var(--dark);
  color:var(--on-dark);
  border-radius:8px;
  display:block;
  margin:2px auto 0;
  width:30px
}

.wk .body{
  position:relative;
  margin-top:6px
}

.wk .hrs{
  position:absolute;
  left:-42px;
  top:0;
  width:32px;
  text-align:right
}

.wk .hrs span{
  display:block;
  height:52px;
  font-size:10.5px;
  font-weight:700;
  color:var(--muted-2);
  transform:translateY(-6px)
}

.wk .cols{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
  background:repeating-linear-gradient(to bottom,transparent 0 51px,var(--rule) 51px 52px)
}

.wk .col{
  position:relative;
  height:364px
}

.wk .b{
  position:absolute;
  left:0;
  right:0;
  border-radius:5px;
  border-left:3px solid;
  font-size:9px;
  font-weight:800;
  padding:2px 3px;
  overflow:hidden;
  line-height:1.25;
  opacity:0;
  transform:scale(.96)
}

.on .wk .b{
  animation:apIn .4s var(--e-spring) forwards;
  animation-delay:calc(var(--i)*.02s + .1s)
}

.wk .b.ok{
  background:var(--s-ok-bg);
  border-color:var(--s-ok);
  color:color-mix(in srgb,var(--s-ok) 76%,#000)
}

.wk .b.wait{
  background:var(--s-wait-bg);
  border-color:var(--s-wait);
  color:color-mix(in srgb,var(--s-wait) 76%,#000)
}

.wk .b.miss{
  background:var(--s-miss-bg);
  border-color:var(--s-miss);
  color:color-mix(in srgb,var(--s-miss) 76%,#000)
}

.wk .b.done{
  background:var(--s-done-bg);
  border-color:var(--s-done);
  color:var(--s-done)
}

.wk .nowl{
  position:absolute;
  left:-42px;
  right:0;
  height:0;
  z-index:6
}

.wk .nowl::before{
  content:"";
  position:absolute;
  left:42px;
  right:0;
  top:0;
  border-top:1.5px solid var(--margin)
}

.wk .nowl b{
  position:absolute;
  left:0;
  top:-9px;
  font-size:9.5px;
  font-weight:800;
  color:#fff;
  background:var(--margin);
  border-radius:var(--r-full);
  padding:2px 5px
}

/* Isti natpis „sada" u NEDELJI — beo na `--margin` je 3,88:1. Isto odstupanje i
   ista vrednost kao `.now b` (odluka 13, 10.09.; nasao ga je test kontrasta). Mora
   da stoji POSLE pravila iznad: ranije postavljeno na mestu `.now b` nije imalo
   efekta, jer pri istoj tezini kasnije pravilo pobedjuje. */

.wk .nowl b{
  background:color-mix(in srgb,var(--margin) 80%,var(--ink))
}

.mo{
  padding:4px 16px 96px 16px
}

.mo .dow{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
  padding:6px 0 8px
}

.mo .dow span{
  text-align:center;
  font-size:10px;
  font-weight:800;
  color:var(--muted-2);
  text-transform:uppercase;
  letter-spacing:.05em
}

.mo .grid2{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px
}

.mo .c{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:9px;
  min-height:74px;
  padding:6px 5px 5px;
  display:flex;
  flex-direction:column;
  gap:3px;
  opacity:0;
  transform:translateY(6px)
}

.on .mo .c{
  animation:apIn .35s var(--e-out) forwards;
  animation-delay:calc(var(--i)*.008s + .08s)
}

.mo .c .d{
  font-size:13px;
  font-weight:800;
  color:var(--ink-2);
  line-height:1.2;
  font-variant-numeric:tabular-nums
}

.mo .c.mut{
  background:transparent;
  border-color:transparent
}

/* Odluka 13: status i „prigušeno" se ne nose providnošću teksta. Predložak ovde
   drži `opacity:.55` na `--muted-2` = 2,11:1 (izmereno 11.09., 186 nalaza); broj
   dana je tekst, pa ostaje `--muted-2` (4,64:1). Razliku nosi ćelija bez podloge. */

.mo .c.mut .d{
  color:var(--muted-2)
}

.mo .c.on{
  border-color:var(--accent);
  box-shadow:0 0 0 1.5px var(--accent)
}

.mo .c.on .d{
  color:var(--accent-ink)
}

.mo .bars{
  display:flex;
  gap:2px;
  margin-top:auto;
  height:4px
}

.mo .bars i{
  height:4px;
  border-radius:2px;
  display:block;
  min-width:2px
}

.mo .bars i.ok{
  background:var(--s-ok)
}

.mo .bars i.wait{
  background:var(--s-wait)
}

.mo .bars i.miss{
  background:var(--s-miss)
}

.mo .bars i.done{
  background:var(--s-done);
  opacity:.55
}

.mo .c .n{
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden
}

.mo .c.full .n{
  color:var(--s-ok)
}

/* ============================================================


/* poređaj — jedan red iznad spiska, ne skriveno u meniju */

.sortbar{
  display:grid;
  gap:7px;
  margin-top:12px
}

.sortbar .lb{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-2);
  flex:none
}

/* P-46 (vlasnik 20.09.2026): red pilula se NE rešava vodoravnim klizanjem nego se
   prelama, da svaka pilula stane u ekran. Izmereno pre izmene, spisak klijenata:
   na 320 su dve pilule filtera i tri pilule poretka bile van vidnog polja (169 i 252 px
   skrivenog klizanja), na 390 jedna i dve, na 430 jedna i dve. Pilula koja se ne vidi je
   mogućnost koje za korisnika nema — a maska sa prelivom je to i skrivala, jer ivica
   izbledi pa ne liči na presecanje. Cena je jedan red više u visini kad se prelomi. */

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px
}

.chips .pill{
  flex:none;
  cursor:pointer;
  border:0
}

.chips .pill.on{
  background:var(--dark);
  color:var(--on-dark);
  box-shadow:none
}

.cl .metric{
  font-size:11px;
  font-weight:800;
  color:var(--accent-ink);
  background:var(--accent-soft);
  border-radius:var(--r-full);
  padding:4px 9px;
  white-space:nowrap
}

/* Odluka 13 (statusni tekst van grupe A, dnevnik): „+N dana" je bio 4,27:1.
   Isti izraz kao `.pill.off` (5,67:1 na istoj pozadini) — bez novog tokena. */

.cl .metric.warn{
  color:color-mix(in srgb,var(--s-miss) 82%,#000);
  background:var(--s-miss-bg)
}

/* novi termin — isti list, obrazac umesto detalja */

.form .fr{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:58px;
  padding:10px 0;
  border-bottom:1px solid var(--rule)
}

.form .fr:last-child{
  border-bottom:0
}

.form .fr .k{
  width:82px;
  flex:none;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2)
}

.form .fr .v{
  flex:1;
  min-width:0;
  font-size:15px;
  font-weight:700
}

.form .fr .v small{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  margin-top:1px
}

.form .fr .ed{
  font-size:12.5px;
  font-weight:800;
  color:var(--accent-ink);
  flex:none
}

.form .opts{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin:10px 0 2px
}

.form .opts button{
  font-size:13px;
  font-weight:700;
  background:var(--sheet-2);
  border-radius:var(--r-full);
  padding:9px 14px;
  color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line)
}

.form .opts button.on{
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:none
}

.form .tsl{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:10px
}

.form .tsl button{
  height:44px;
  border-radius:10px;
  background:var(--sheet-2);
  font-size:14px;
  font-weight:800;
  color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
  font-variant-numeric:tabular-nums
}

.form .tsl button.on{
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:none
}

.form .tsl button.busy{
  opacity:.38;
  text-decoration:line-through
}

.form .tot{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:14px 0 2px;
  border-top:1px solid var(--rule);
  margin-top:6px
}

.form .tot span{
  font-size:13px;
  font-weight:800;
  color:var(--muted)
}

.form .tot b{
  font-family:Newsreader,Georgia,serif;
  font-size:26px;
  font-weight:600;
  line-height:1.3;
  font-variant-numeric:tabular-nums
}

.form textarea{
  width:100%;
  min-height:64px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--sheet-2);
  padding:11px 13px;
  font:inherit;
  font-size:14px;
  font-weight:600;
  color:var(--ink);
  outline:none;
  resize:none;
  margin-top:8px
}

.form textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
  background:var(--sheet)
}

/* stanje javne strane — kad je ugašena, pravila su tu ali ne važe */

.pill.off{
  background:var(--s-miss-bg);
  color:color-mix(in srgb,var(--s-miss) 82%,#000)
}

#bkRules{
  transition:opacity .3s var(--e-out), filter .3s var(--e-out)
}

#bkRules.dim{
  opacity:.42;
  filter:grayscale(.5);
  pointer-events:none
}

.bk .link.dim{
  opacity:.5;
  pointer-events:none
}

/* ============================================================
   PRIJAVA I REGISTRACIJA  (predložak `#v-auth`, 1fc29758)
   Van ljuske salona — nema menija, nema donje trake.
   `.stage.desk .auth::before{display:none}` se ne prenosi: isto pravilo bez
   `.stage.desk` već važi na svim širinama. `.auth .bran` se ne prenosi:
   registracija ne pita za branšu (vlasnik 16.09.2026, pitanje 2).
   ============================================================ */

.auth{
  min-height:100%;
  padding:28px 20px 40px;
  position:relative
}

/* display ide samo uz .on — inace bi ovo pravilo ugasilo .view{display:none} */

.view.auth.on{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}

.auth::before{
  display:none
}

.auth .card{
  width:100%;
  max-width:360px;
  position:relative
}

.auth .mark{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-bottom:6px
}

.auth .lead{
  text-align:center;
  font-size:13px;
  line-height:19px;
  color:var(--muted);
  font-weight:600;
  margin:0 auto 20px;
  max-width:30ch
}

.auth .seg2{
  display:flex;
  gap:2px;
  background:var(--sheet-2);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  padding:3px;
  margin-bottom:18px
}

.auth .seg2 button{
  flex:1;
  height:38px;
  border-radius:var(--r-full);
  font-size:13.5px;
  font-weight:800;
  color:var(--muted);
  transition:background .18s var(--e-out),color .18s
}

.auth .seg2 button[aria-pressed=true]{
  background:var(--accent);
  color:var(--on-accent)
}

/* Svesno odstupanje 6 (dnevnik): kod nas su Prijava i Registracija DVE ADRESE, pa je
   sklopka od linkova (`aria-current`), isti izgled kao dugme predloška. */

.auth .seg2 > a{
  flex:1;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border-radius:var(--r-full);
  font-size:13.5px;
  font-weight:800;
  color:var(--muted);
  transition:background .18s var(--e-out),color .18s
}

.auth .seg2 > a[aria-current=page]{
  background:var(--accent);
  color:var(--on-accent)
}

.auth .pane{
  display:none
}

.auth .pane.on{
  display:block
}

.auth .forgot{
  display:block;
  text-align:right;
  font-size:12.5px;
  font-weight:700;
  color:var(--accent-ink);
  margin-top:8px
}

.auth .go{
  margin-top:18px
}

.auth .alt{
  text-align:center;
  font-size:12.5px;
  font-weight:600;
  color:var(--muted);
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--rule)
}

.auth .alt b{
  color:var(--accent-ink);
  font-weight:800
}

.auth .note{
  text-align:center;
  font-size:11.5px;
  line-height:17px;
  color:var(--muted-2);
  font-weight:600;
  margin-top:14px
}

.auth .err{
  display:flex;
  align-items:flex-start;
  gap:9px;
  background:var(--s-miss-bg);
  border-radius:10px;
  padding:11px 13px;
  font-size:12.5px;
  line-height:18px;
  font-weight:700;
  color:color-mix(in srgb,var(--s-miss) 82%,#000);
  margin-bottom:14px
}

.auth .err svg{
  width:16px;
  height:16px;
  flex:none;
  margin-top:1px
}

/* Dve boje trake iz stanja predloška (REG-02 nosi `--s-wait` inline stilom). Šablon
   ne sme heks boju (`#000` u `color-mix`, skelet), pa boja stoji ovde, pod imenima
   koja predložak već koristi za ista stanja (`.errpage.warn`, `.pill.ok`). */

.auth .err.warn{
  background:var(--s-wait-bg);
  color:color-mix(in srgb,var(--s-wait) 82%,#000)
}

.auth .err.ok{
  background:var(--s-ok-bg);
  color:color-mix(in srgb,var(--s-ok) 82%,#000)
}

.auth .inp .bad input{
  border-color:var(--s-miss);
  background:var(--s-miss-bg)
}

.auth .fieldbad{
  font-size:11.5px;
  font-weight:700;
  color:color-mix(in srgb,var(--s-miss) 82%,#000);
  margin-top:5px
}

/* G-03 (19.09.2026): zaboravljena lozinka, nova lozinka i potvrda adrese u istoj
   kartici. Stanja su `.errpage` iz PRIJ-03; dodato je samo ono što ta tri ekrana
   nose, a prijava ne: uvodna rečenica iznad polja (ista mera kao `.errpage p`),
   link unutar rečenice, ispisan link potvrde koji je jedna reč od sto znakova,
   i odjava na dnu. Uspeh nosi boju ikonice kao `.row .ic.g`. Bez ijedne nove boje. */

.auth .intro{
  font-size:13.5px;
  line-height:20px;
  color:var(--muted);
  font-weight:600;
  margin:0 0 14px
}

.auth .errpage p a{
  color:var(--accent-ink);
  text-decoration:underline;
  text-underline-offset:2px
}

.auth .errpage .tech.veza{
  word-break:break-all;
  text-align:left
}

.errpage.ok .ic{
  background:var(--s-ok-bg);
  color:var(--s-ok)
}

.auth .odjava{
  text-align:center;
  margin-top:6px
}

.auth .odjava button{
  font-size:12.5px;
  font-weight:700;
  color:var(--muted);
  padding:13px 12px;
  text-decoration:underline;
  text-underline-offset:2px
}

/* ============================================================
   SPISAK + OBRAZAC + DETALJ  (predložak `#v-vau`, 1fc29758)
   Obrazac: vaučeri, paketi, bodovi, depozit. Isti red od 52px i ista kartica
   kao svuda — samo drugi sadržaj. Prenet doslovno za grupu F (vaučeri).
   ============================================================ */

.lst .code{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--muted);
  font-style:normal
}

.lst .row .rt b{
  display:block;
  font-family:Newsreader,Georgia,serif;
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums
}

.lst .row .rt > span:not(.pill){
  display:block;
  font-size:11px;
  color:var(--muted-2);
  font-weight:700;
  margin-top:1px
}

/* Ikonica reda koji više ne važi — predložak je boji inline (`#v-vau`); ovde, jer
   šablon ne sme heks boju (`#000` u `color-mix`, skelet). */

.lst .row .ic.done{
  background:var(--s-done-bg);
  color:var(--s-done)
}

.lst .row .ic.miss{
  background:var(--s-miss-bg);
  color:color-mix(in srgb,var(--s-miss) 80%,#000)
}

.lst .grp{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
  padding:18px 0 8px 12px
}

.lst .sum{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  margin-top:12px
}

.lst .sum > div{
  padding:12px 14px;
  border-right:1px solid var(--rule)
}

.lst .sum > div:last-child{
  border-right:0
}

.lst .sum .k{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2)
}

.lst .sum .v{
  font-family:Newsreader,Georgia,serif;
  font-size:21px;
  font-weight:600;
  margin-top:3px;
  font-variant-numeric:tabular-nums
}

.vaucher{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:16px;
  position:relative;
  overflow:hidden;
  margin-top:12px
}

.vaucher::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--accent)
}

.vaucher .c{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:19px;
  font-weight:600;
  letter-spacing:.12em
}

.vaucher .val{
  font-family:Newsreader,Georgia,serif;
  font-size:30px;
  font-weight:600;
  line-height:1.1;
  margin-top:6px;
  font-variant-numeric:tabular-nums
}

.vaucher .vm{
  font-size:12px;
  color:var(--muted);
  font-weight:600;
  margin-top:3px
}

/* ============================================================
   GREŠKE I PRAZNA STANJA  (predložak `.errpage`, 1fc29758)
   Manir aplikacije: kaže šta se desilo i nudi izlaz.
   Prenet 16.09.2026 zbog PRIJ-03; `.errs` (spisak grešaka u katalogu) nije
   ekran proizvoda i ne prenosi se.
   ============================================================ */

.errpage{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:30px 20px;
  text-align:center
}

.errpage .cd{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.14em;
  color:var(--muted-2);
  margin-bottom:10px
}

.errpage .ic{
  width:56px;
  height:56px;
  border-radius:16px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  background:var(--accent-soft);
  color:var(--accent-ink)
}

.errpage.bad .ic{
  background:var(--s-miss-bg);
  color:color-mix(in srgb,var(--s-miss) 80%,#000)
}

.errpage.warn .ic{
  background:var(--s-wait-bg);
  color:color-mix(in srgb,var(--s-wait) 80%,#000)
}

.errpage .ic svg{
  width:26px;
  height:26px
}

.errpage h3{
  font-family:Newsreader,Georgia,serif;
  font-size:21px;
  font-weight:600;
  line-height:1.35;
  margin:0
}

.errpage p{
  font-size:13.5px;
  line-height:20px;
  color:var(--muted);
  font-weight:600;
  margin:7px auto 0;
  max-width:36ch
}

.errpage .acts{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:16px;
  flex-wrap:wrap
}

.errpage .tech{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;
  color:var(--muted-2);
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--rule)
}

/* ============================================================
   STANJA — katalog
   Svaka kartica pokazuje tačno onaj deo ekrana koji se menja,
   u pravoj veličini, plus kada se dešava i šta se animira.
   ============================================================ */

/* `.st` je u predlosku DVA razlicita imena: zvezda ocene na javnoj strani
   (`.pub .meta .st`) i ekran-katalog stanja, koji je harness predloska i u
   proizvodu ne postoji. Dok je ovde stajalo golo `.st{padding:0 0 40px}`,
   zvezda je dobijala 40px dopune i nije se videla (izmereno 16.09.2026:
   kutija 14x40 umesto 14x14). Pravilo katalog-ekrana zato nosi svoj koren. */

.view.stanja{
  padding:0 0 40px
}

.stanja .head{
  padding:16px 16px 14px 30px;
  border-bottom:1px solid var(--line)
}

.stanja .head h1{
  font-family:Newsreader,Georgia,serif;
  font-size:24px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.35;
  margin:0
}

.stanja .head p{
  font-size:13px;
  line-height:20px;
  color:var(--muted);
  font-weight:600;
  margin-top:6px;
  max-width:62ch
}

.stanja .filt{
  display:flex;
  gap:7px;
  overflow-x:auto;
  scrollbar-width:none;
  padding:12px 16px 0 30px
}

.stanja .filt::-webkit-scrollbar{
  display:none
}

.stanja .filt button{
  flex:none;
  font-size:12px;
  font-weight:800;
  border-radius:var(--r-full);
  padding:7px 13px;
  background:var(--sheet);
  color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line);
  line-height:1.1
}

.stanja .filt button.on{
  background:var(--dark);
  color:var(--on-dark);
  box-shadow:none
}

.stanja .list{
  padding:14px 16px 0 30px;
  display:grid;
  gap:14px
}

.stanja .gt{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-2);
  padding:14px 0 2px
}

.stcard{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 26px -22px rgba(45,36,16,.55)
}

.stcard .t{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 14px;
  border-bottom:1px solid var(--rule)
}

.stcard .t b{
  font-size:14px;
  font-weight:800;
  flex:1
}

.stcard .t .id{
  font-size:10.5px;
  font-weight:800;
  color:var(--muted-2);
  font-variant-numeric:tabular-nums;
  background:var(--sheet-2);
  border-radius:var(--r-full);
  padding:4px 8px
}

.stcard .demo{
  padding:14px;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  position:relative;
  pointer-events:none;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.stcard .meta{
  padding:11px 14px;
  display:grid;
  gap:7px
}

.stcard .meta div{
  display:flex;
  gap:9px;
  font-size:12px;
  line-height:18px
}

.stcard .meta .k{
  width:64px;
  flex:none;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted-2);
  font-size:10px;
  padding-top:1px
}

.stcard .meta .v{
  color:var(--ink-2);
  font-weight:600
}

.stcard .meta code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;
  background:var(--sheet-2);
  border-radius:4px;
  padding:1px 5px;
  color:var(--accent-ink)
}

/* --- obrasci koji se ponavljaju u svim stanjima --- */

.skel{
  background:linear-gradient(90deg,var(--line) 0%,color-mix(in srgb,var(--line) 45%,var(--sheet)) 40%,
  var(--line) 80%);
  background-size:220% 100%;
  border-radius:7px;
  animation:shim 1.4s linear infinite
}

@keyframes shim{
  to{
    background-position:-220% 0
  }
}

.skel.r{
  border-radius:var(--r-full)
}

.skel-row{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 0;
  border-bottom:1px solid var(--rule)
}

.skel-row:last-child{
  border-bottom:0
}

.emptyst{
  text-align:center;
  padding:26px 18px
}

.emptyst .ic{
  width:56px;
  height:56px;
  border-radius:16px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  background:var(--accent-soft);
  color:var(--accent-ink)
}

.emptyst .ic svg{
  width:26px;
  height:26px
}

.emptyst.warn .ic{
  background:var(--s-wait-bg);
  color:var(--s-wait)
}

.emptyst.bad .ic{
  background:var(--s-miss-bg);
  color:var(--s-miss)
}

.emptyst h3{
  font-family:Newsreader,Georgia,serif;
  font-size:20px;
  font-weight:600;
  line-height:1.35;
  margin:0
}

.emptyst p{
  font-size:13.5px;
  line-height:20px;
  color:var(--muted);
  font-weight:600;
  margin:6px auto 0;
  max-width:34ch
}

.emptyst .acts{
  display:flex;
  gap:8px;
  justify-content:center;
  margin-top:14px;
  flex-wrap:wrap
}

.toast{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--dark);
  color:var(--on-dark);
  border-radius:12px;
  padding:12px 14px;
  font-size:13.5px;
  font-weight:700;
  box-shadow:0 14px 30px -16px rgba(20,18,15,.7)
}

.toast .dot{
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
  background:var(--s-ok);
  color:#fff
}

.toast .dot svg{
  width:13px;
  height:13px
}

.toast.bad .dot{
  background:var(--s-miss)
}

.toast .un{
  margin-left:auto;
  font-weight:800;
  color:var(--on-dark);
  opacity:.75;
  font-size:12.5px;
  flex:none
}

.toast.anim{
  animation:toastIn .45s var(--e-spring) both
}

@keyframes toastIn{
  from{
    opacity:0;
    transform:translateY(14px) scale(.97)
  }

  to{
    opacity:1;
    transform:none
  }
}

.offbar{
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--s-miss-bg);
  color:color-mix(in srgb,var(--s-miss) 82%,#000);
  border-radius:10px;
  padding:10px 12px;
  font-size:12.5px;
  font-weight:700;
  line-height:17px
}

.offbar .p{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--s-miss);
  flex:none;
  animation:pulse 1.6s ease-in-out infinite
}

@keyframes pulse{
  0%,100%{
    opacity:1
  }

  50%{
    opacity:.3
  }
}

.confirm{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  box-shadow:0 20px 44px -24px rgba(45,36,16,.6)
}

.confirm h3{
  font-family:Newsreader,Georgia,serif;
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  margin:0
}

.confirm p{
  font-size:13px;
  line-height:19px;
  color:var(--muted);
  font-weight:600;
  margin:6px 0 14px
}

.confirm .acts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px
}

.quota{
  display:flex;
  align-items:center;
  gap:12px
}

.quota .ring{
  width:46px;
  height:46px;
  flex:none;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:11.5px;
  font-weight:800;
  background:conic-gradient(var(--s-miss) var(--p,0%), var(--line) 0);
  color:var(--ink)
}

.quota .ring i{
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--sheet);
  display:grid;
  place-items:center;
  font-style:normal
}

.spin{
  width:18px;
  height:18px;
  border-radius:50%;
  border:2.5px solid var(--accent-line);
  border-top-color:var(--accent);
  animation:spin .8s linear infinite;
  display:inline-block;
  vertical-align:-3px
}

.spin.on-acc{
  border-color:color-mix(in srgb,var(--on-accent) 35%,transparent);
  border-top-color:var(--on-accent)
}

@keyframes spin{
  to{
    transform:rotate(360deg)
  }
}

.prog{
  height:6px;
  border-radius:3px;
  background:var(--line);
  overflow:hidden
}

.prog i{
  display:block;
  height:100%;
  border-radius:3px;
  background:var(--accent);
  width:var(--w,40%);
  transition:width .4s var(--e-out)
}

.locked{
  position:relative
}

.locked::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--paper);
  opacity:.55;
  border-radius:inherit
}

.locked .lk{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  font-size:11px;
  font-weight:800;
  color:var(--muted);
  background:var(--sheet);
  border-radius:var(--r-full);
  padding:5px 10px;
  box-shadow:inset 0 0 0 1px var(--line)
}

@keyframes nudge{
  0%,100%{
    transform:translateX(0)
  }

  25%{
    transform:translateX(-4px)
  }

  75%{
    transform:translateX(4px)
  }
}

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

  .ap,.gap,.now{
    opacity:1!important;
    transform:none!important
  }

  .spark i{
    height:var(--h)!important
  }

  .mini-bar i{
    width:var(--w)!important
  }
}

/* ===========================================================================
   OBRASCI VAN PREDLOSKA (10.09.) — ekrani kojih u predlosku nema, u istom stilu.
   Predlozi iz kataloga (`docs/redizajn-komponente.md`, „Obrasci"), pregledani:
   samo tokeni, bez hex i vw, bez animacije velicine. Ispravljeno pri unosu:
   natpis izbora boje je na `--muted` (ne `--muted-2` — nije boja teksta,
   odluka faze 1); pravo polje je VIZUELNO skriveno ali dostupno tastaturi i
   citacu, inace bi se videli i izvorni cekboks i kruzic.
   =========================================================================== */

/* Broj ili iznos sa jedinicom u samom polju (RSD, min, %, nedelje). */

.inp .box{
  display:flex;
  align-items:center;
  min-height:48px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--sheet-2);
  overflow:hidden
}

.inp .box:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
  background:var(--sheet)
}

.inp .box input{
  flex:1;
  min-width:0;
  height:46px;
  padding:0 14px;
  border:0;
  box-shadow:none;
  background:none;
  outline:none;
  font:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  font-variant-numeric:tabular-nums
}

.inp .box .ax{
  flex:none;
  padding:0 14px;
  font-size:14px;
  font-weight:700;
  color:var(--muted);
  white-space:nowrap
}

/* Visestruki izbor — spisak kvacica. Stanje „izabrano" dolazi iz PRAVOG polja
   (`:has(> input:checked)`), ne iz klase koju predlozak postavlja skriptom. */

.opt{
  position:relative;
  cursor:pointer
}

.opt > input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none
}

.opt:has(> input:checked){
  background:var(--accent-softer)
}

.opt:has(> input:checked) .rd{
  background:var(--accent);
  box-shadow:inset 0 0 0 1.5px var(--accent)
}

.opt:has(> input:checked) .rd svg{
  opacity:1;
  transform:none
}

.opt:has(> input:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:-2px
}

.opt .rd.sq{
  border-radius:var(--r-xs)
}

/* Izbor boje (usluga, radnik, lokacija, akcenat). Boja stize kao `--c` iz
   podataka, ne kao hex u CSS-u. Meta je 44×44. */

.clr{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  border:0;
  margin:12px 0 0;
  padding:0;
  min-width:0
}

.clr legend{
  display:block;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:5px;
  padding:0
}

.clr label{
  position:relative;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  cursor:pointer
}

.clr input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none
}

.clr i{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--c);
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.clr label:has(input:checked) i{
  box-shadow:0 0 0 2px var(--sheet),0 0 0 4px var(--ink)
}

.clr label:has(input:focus-visible){
  outline:2px solid var(--accent)
}

/* <select> i <textarea> u `.inp` — predlozak crta samo `input`; iste mere i isti
   fokus, da su polja jednog obrasca iste visine (48px). */

.inp select,.inp textarea{
  width:100%;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--sheet-2);
  padding-inline:14px;
  font:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  outline:none
}

.inp select{
  height:48px;
  padding-inline-end:34px
}

.inp textarea{
  display:block;
  min-height:88px;
  padding-block:12px;
  line-height:21px;
  resize:none
}

/* Posle grupe B (11.09.): 4.6 #1 je doneo `.inp textarea`, ali ne i placeholder,
   pa je textarea pala na sivu Tailwind preflight-a — 2,27:1 (pre prepisa 6,31:1
   kroz most). Isto kao `.inp input::placeholder`. */

.inp textarea::-moz-placeholder{
  color:var(--muted-2);
  font-weight:600
}

.inp textarea::placeholder{
  color:var(--muted-2);
  font-weight:600
}

/* Polje u stanju GREŠKE stoji na `--s-miss-bg`, gde `--muted-2` daje 4,20:1 (izmereno
   17.09.2026, krug F: PRIJ-02 lozinka, REG-01/02 e-pošta — i ona sa upisanom
   vrednošću, jer se placeholder vrati čim se polje obriše). `--muted` daje 5,37:1.
   Znak je `aria-invalid`, ne klasa: isti atribut čita i čitač ekrana. Stoji POSLE
   `.inp` pravila, iste težine, pa pobeđuje redosledom. */

input[aria-invalid="true"]::-moz-placeholder, textarea[aria-invalid="true"]::-moz-placeholder{
  color:var(--muted)
}

input[aria-invalid="true"]::placeholder,textarea[aria-invalid="true"]::placeholder{
  color:var(--muted)
}

.inp select:focus,.inp textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
  background:var(--sheet)
}

/* Kratki izbor u obrascu kao `<label>` sa PRAVIM poljem — oblik predloskovog
   `.form .opts button` (padding 9/14, bez min-height: meta za prst ide
   nevidljivim prosirenjem, u bloku TELEFON ispod). */

.form .opts label{
  position:relative;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  background:var(--sheet-2);
  border-radius:var(--r-full);
  padding-block:9px;
  padding-inline:14px;
  color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line)
}

.form .opts label > input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none
}

.form .opts label:has(> input:checked){
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:none
}

.form .opts label:has(> input:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:2px
}

/* „Drugi iznos" u listu „Nov vaučer" je VEZA na „Nov tip", ne izbor (odluka 26) —
   isti čip kao `label` iznad, bez polja. */

.form .opts > a{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-size:13px;
  font-weight:700;
  background:var(--sheet-2);
  border-radius:var(--r-full);
  padding-block:9px;
  padding-inline:14px;
  color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line)
}

/* Prekidac sa PRAVIM cekboksom (obrazac radi i bez JS-a), uz predloskov `[aria-checked]`. */

.sw2 > input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none
}

.sw2:has(> input:checked){
  background:var(--accent)
}

.sw2:has(> input:checked)::after{
  transform:translateX(20px)
}

.sw2:has(> input:focus-visible){
  outline:2px solid var(--accent);
  outline-offset:2px
}

.sw2:has(> input:disabled){
  opacity:.45
}

/* LOGO (`partials/logo.njk`). Boje delova su klase, vrednosti su brend tokeni sa
   `:root` (`--logo-*`). Jednobojni oblik nosi `fill="currentColor"` u samom SVG-u,
   pa mu boju daje roditelj (`color`) i ne treba mu ovo pravilo. Velicina, odnos
   stranica i prazan prostor su u `style` samog SVG-a, da logo radi i bez app.css. */

.logo .lg-s{
  fill:var(--logo-slovo)
}

.logo .lg-p{
  fill:var(--logo-prsten)
}

.logo .lg-a{
  fill:var(--logo-strelica)
}

.logo .lg-n{
  fill:var(--logo-natpis)
}

.logo-tamno .lg-s{
  fill:var(--logo-slovo-tamno)
}

.logo-tamno .lg-p{
  fill:var(--logo-prsten-tamno)
}

.logo-tamno .lg-a{
  fill:var(--logo-strelica-tamno)
}

.logo-tamno .lg-n{
  fill:var(--logo-natpis-tamno)
}

/* Jednobojni oblik (`logo(…, "jedna")`) nema SVOJU boju — nosi `currentColor`, pa boju daje
   roditelj. Danas ga ne zove nijedno mesto: vlasnik je 30.09.2026, posle sedmog prozora,
   tražio logo U BOJI i u aplikaciji salona („boje nisu dobre" nad jednobojnim u akcentu).
   Logo u boji ne prati temu salona (brend tokeni gore), pa crvena paleta salona ne dira
   ni slovo ni strelicu. Pravilo na samom `.logo-jedna` se ne piše: pobedilo bi roditelja. */

/* Cipovi klize vodoravno, a `overflow` onda sece i uspravno — prosirenje pilule
   za prst (blok TELEFON) bilo bi odseceno. Vazduh od 10px, vracen negativnom
   marginom: raspored isti. Inline margina na `.chips` se zato pise umanjena za
   10px na svojoj strani (12px -> 2px).
   OSIGURAC dok se stari sabloni ne prepisu: `.chips` koji nosi Tailwind razmak
   (`py-2`, `mt-3 pb-1` u day-inner/week) je iskljucen — negativna margina bi mu
   pomerila raspored. Posle prepisa grupe A `:not(...)` ostaje kao brana. */

.chips:not([class*=" p"],[class*=" m"]){
  padding-block:10px;
  margin-block:-10px
}

/* List odozdo iznad iOS indikatora. Na desktopu kasnije pravilo predloska
   (`padding:20px 22px 24px`) vraca donji padding na 24px. */

.sheetup{
  padding-bottom:calc(16px + env(safe-area-inset-bottom))
}

/* List aplikacije = `.sheetup` predloska u htmx omotacu `#modal`. `#modal` ostaje
   u <body>; `.modal-root` (fixed, ceo ekran) je okvir za `absolute` list;
   `.modal-backdrop` ostaje kao PROVIDNO polje koje zatvara list na dodir van
   njega — predlozak podlogu ne crta. List stize vec otvoren (`.sheetup.on`), pa
   ulazak ide animacijom (samo transform). FAB se sklanja kao pod
   `.main.sheeted` u predlosku, bez JS-a. */

.modal-root > .sheetup{
  animation:modalSheetIn .42s var(--e-out)
}

.modal-root:has(> .sheetup) > .modal-backdrop{
  background:none;
  animation:none
}

body:has(#modal .sheetup.on) .fab{
  transform:translateY(160%) scale(.9);
  opacity:0;
  pointer-events:none
}

/* Lepljiva traka radnji na dnu lista. Ponistava CEO donji padding lista (16px +
   safe-area na telefonu; 24px, sa strane 22px na desktopu), a svoj donji
   padding drzi iznad indikatora. Geometrija izmerena — vidi dnevnik. */

/* Fokus (Tab, citac, tastatura) ne sme da spusti polje ISPOD lepljive trake:
   pregledac pri fokusu skroluje samo „ako treba" i traku ne vidi, osim kroz
   `scroll-padding` klizaca. Visinu trake meri public/app.js (`--traka`), jer
   zavisi od broja dugmadi i prelamanja. Izmereno 10.09.2026 alatom (fokus,
   PROSTOR, TASTATURA): „Kopiraj poruku" dno 749 > traka 725. */

.sheetup{
  scroll-padding-bottom:calc(var(--traka,0px) + 8px)
}

.sheetup .acts.lep{
  position:sticky;
  bottom:calc(-16px - env(safe-area-inset-bottom));
  z-index:2;
  background:var(--sheet);
  margin:14px -16px calc(-16px - env(safe-area-inset-bottom));
  padding-block:10px calc(12px + env(safe-area-inset-bottom));
  padding-inline:16px;
  border-top:1px solid var(--rule)
}

@media (min-width:1024px){
  .modal-root > .sheetup{
    animation-name:modalDrawerIn
  }

  .sheetup .acts.lep{
    bottom:-24px;
    margin:14px -22px -24px;
    padding-block:10px 12px;
    padding-inline:22px
  }
}

/* ---- Posle grupe A (10.09.): nalazi provere, uneti centralno ---------------- */

/* Kartica termina je <button> (tastatura, citac ekrana), a pregledac sadrzaj
   dugmeta centrira i vodoravno i uspravno. Predloskov `.ap` je div, pa to ne
   resava — tekst kartice je stajao na sredini (izmereno 390px). */

button.ap{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  text-align:start
}

/* Nedelja: prosao dan se razlikuje podlogom, ne providnoscu (odluka 13 — providnost
   je sitan tekst spustala na 3,39:1). */

.sheet.prosao{
  background:var(--sheet-2);
  box-shadow:none
}

/* Poslednja linija mreze je ZATVARANJE, ne sat koji pocinje: bez isprekidane
   polovine ispod nje — inace se u rezervi za FAB crtalo „20:30" posle zatvaranja. */

.cal-grid .h:last-child::after{
  display:none
}

/* Redovi cipova u kalendaru (lokacija, bransa): leva ivica kao `.strip`/`.who`
   — 30px na telefonu, 46px od 1024px (inline stil ne moze da prati sirinu). */

.cal .chips{
  padding-inline:30px 16px
}

/* Trake obavestenja (plan, imejl, demo, zahtevi, podesavanje): jedna klasa umesto
   inline margine, da prate `.top`/`.strip` i na desktopu. Izmedju traka 10px, a
   do mreze kalendara jos 10px — jednom (ranije 20px izmedju dve trake). */

.obav{
  margin:10px 16px 0 30px
}

.obav + #day-scroll{
  margin-top:10px
}

/* Puna traka o planu nosi spisak; pruge `.plan-card` bi precrtavale redove. */

.plan-card:has(ul)::before{
  display:none
}

/* Izbor vremena kao PRAVO radio polje (salje se sa obrascem, radi bez JS-a) —
   oblik predloskovog `.slotg button`. */

.slotg label{
  position:relative;
  cursor:pointer
}

.slotg label > input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  margin:0;
  pointer-events:none
}

.slotg label > span{
  display:grid;
  place-items:center;
  height:46px;
  border-radius:10px;
  background:var(--sheet-2);
  font-size:14px;
  font-weight:800;
  color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
  font-variant-numeric:tabular-nums
}

.slotg label:has(> input:checked) > span{
  background:var(--accent);
  color:var(--on-accent);
  box-shadow:none
}

.slotg label:has(> input:focus-visible) > span{
  outline:2px solid var(--accent);
  outline-offset:2px
}

/* List: red radnji bez ijednog dugmeta (uloga bez prava na stanje) se ne crta. */

.sheetup .acts:not(:has(> *)){
  display:none
}

/* Dva dugmeta: oba preko cele sirine. Predlozak crta tri (prvo preko obe kolone,
   dva ispod) — sa dva bi drugo stajalo samo na pola reda. */

.sheetup .acts > .btn:nth-child(2):last-child{
  grid-column:1/-1
}

/* Potvrda (MORE-05) unutar lista: `.sheetup .acts .btn:first-child` ne sme da
   razvuce „Odustani" preko cele sirine. */

.sheetup .confirm .acts .btn:first-child{
  grid-column:auto
}

/* Polozen telefon: list je nizak (~320px), pa radnje idu u JEDAN red — traka sa
   tri dugmeta u dva reda je zauzimala ~200px (izmereno 844x390). */

@media (orientation:landscape) and (max-height:500px){
  .sheetup .acts.lep{
    grid-template-columns:none;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr)
  }

  .sheetup .acts.lep > .btn:nth-child(n){
    grid-column:auto
  }
}

/* Ugaseno polje u opciji ne sme da guta dodir: tap ide do <label>, koja bira opciju. */

.opt .inp input:disabled{
  opacity:.45;
  pointer-events:none
}

button.opt{
  width:100%;
  text-align:start
}

/* Pomocna recenica ispod polja i u listu (u grupi A inline na 15+ mesta). */

.pomoc{
  font-size:12px;
  line-height:17px;
  font-weight:600;
  color:var(--muted)
}

/* Trake u toku kad plutaju u #flash (preko kalendara): senka kao `.toast`. */

#flash > :is(.offbar,.note-in){
  box-shadow:0 14px 30px -16px rgba(20,18,15,.45)
}

@media (min-width:1024px){
  .cal .chips{
    padding-left:46px
  }

  .obav{
    margin-left:46px
  }
}

/* Stampa (vaucer): bez dugmadi i bez papirne pozadine. */

@media print{
  body{
    background:none!important;
    padding:0!important
  }

  .btn{
    display:none
  }

  .sheet{
    box-shadow:none;
    border:0
  }
}

/* ===========================================================================
   TELEFON — POLJE ZA DODIR (optimizacija, 10.09.)

   Kontrole predloska su crtane za oko, ne za prst: ikonica-dugme 38px, sklopka
   33px, cip 25px, radnik 36px, „Nivo" 34px. Prst je siroko ~45px, a Apple i
   Material traze 44/48. Izgled se NE MENJA — prosiruje se nevidljivo polje
   (`::after` sa negativnim `inset`-om), pa je kontrola piksel ista kao u
   predlosku a prst je pogadja. Meri se u `scripts/redizajn-provera.mjs`,
   ukljucujuci i to da predak koji klizi sece prosirenje.

   `position:relative` ide kroz `:where()` — nulta specificnost, pa pobedi SVAKO
   izricito pozicioniranje (npr. `.fab` koji je `absolute`). Samo do 1024px i na
   dodirnim ekranima: desktop sa misem ostaje doslovno predlozak.
   =========================================================================== */

@media (max-width: 1023.98px), (pointer: coarse) {
  :where(.ico, .btn.sm, a.pill, button.pill, .seg2 > a, .seg2 > button, .cal .w, .mv .lvl button,
    .step button, .mon .h button, .form .opts button, .toast .un, .odustani, .wk .hd a, .mo .c, .auth .alt a){
    position:relative
  }

  .ico::after{
    content:"";
    position:absolute;
    inset:-3px
  }

  .btn.sm::after{
    content:"";
    position:absolute;
    inset:-3px 0
  }

  /* G-03: link u `.alt` kartice prijave (Nazad na prijavu, Prijava, Preskoči) je red
     teksta od 17px, a na tim stranama često JEDINI izlaz — 17 + 2×14 = 45px. */

  .auth .alt a::after{
    content:"";
    position:absolute;
    inset:-14px -6px
  }

  a.pill::after,button.pill::after{
    content:"";
    position:absolute;
    inset:-10px -2px
  }

  .seg2 > a::after,.seg2 > button::after{
    content:"";
    position:absolute;
    inset:-6px 0
  }

  /* ODLUKA 23 (vlasnik 16.09.2026): CIPOVI I PILULE DANA NAJMANJE 44x44 ISPOD
     1024px; od 1024px naviše ostaju zatečeni (ovaj blok ionako važi samo ispod
     1024 i na dodirnim ekranima). Izgled se ne menja — proširuje se nevidljivo
     polje, istim obrascem kao sve ostalo u ovom bloku.

     Čip radnice / „Svi": IZMERENO 28,8px visok (ne 33, koliko je javljalo staro
     proširenje) → `inset:-8px 0` = 44,8. Staje u unutrašnji razmak reda `.who`
     (11px gore, 12px dole), pa ga klizač reda ne seče.

     Pilule dana u nedelji i ćelije meseca stoje u rešetki od 7 kolona sa
     razmakom 4px, pa se šire TAČNO do polovine razmaka (2px levo i desno): mete
     susednih dana se dodiruju, a ne preklapaju. Veće proširenje bi slalo dodir na
     susedni dan — gore od premale mete.

     IZMERENO (18.09.2026) — gde 44 u širinu fizički ne staje: sedam dana u
     rešetki ima najviše onoliko mesta koliko je razmak među njihovim levim
     ivicama:
        nedelja  320px → 37px, 360px → 43px   (od 390px: 47 i više)
        mesec    320px → 42px                  (od 360px: 47 i više)
     Na tim širinama meta je širine celog razmaka i ne može veća bez preklapanja.
     Visina je 44+ svuda. Čuva `src/web/odluka23-dodir.test.ts`. */

  .cal .w::after{
    content:"";
    position:absolute;
    inset:-8px 0
  }

  .wk .hd a{
    display:block
  }

  .wk .hd a::after{
    content:"";
    position:absolute;
    inset:-3px -2px
  }

  .mo .c::after{
    content:"";
    position:absolute;
    inset:-2px
  }

  .mv .lvl button::after{
    content:"";
    position:absolute;
    inset:-5px 0
  }

  /* 11.09.: blok nedelje ume da bude nizak (kratak termin) — nevidljivo
     prosirenje, isti mehanizam kao ostale kontrole. („✕" na pauzi je istog dana
     otisao sa kartice u list izmene pauze — odluka 6 — pa njegovo prosirenje nema
     vise sta da siri.) */

  .wk .b::after{
    content:"";
    position:absolute;
    inset:-5px 0
  }

  /* 12.09.: to prosirenje NIKAD nije primalo dodir — `.wk .b` iz predloska ima
     `overflow:hidden`, pa sece i sopstveni `::after`. Izmereno: 5px iznad i ispod
     bloka `elementFromPoint` vraca `.col`; blok „8:00" je stvarno 43×14. Alat ga je
     brojao kao 43×24 dok nije poceo da proverava pogodivost prosirenja. Secenje
     teksta prelazi na `span.bt` preko cele unutrasnje kutije (isti padding, isto
     secenje), a blok vise ne sece — prosirenje stvarno prima dodir.
     Usput izmereno (poredjenje piksela, 390): `<button>` centrira sadrzaj po
     vertikali, pa je vreme u bloku stajalo NA SREDINI, a u predlosku (`div`) stoji
     GORE. Sa `span.bt` stoji gore, kao predlozak; na 1280 (mis) nista se ne menja.
     Samo kontrole (`a`, `button`); „zatvoreno" nema sta da pritisne. */

  .wk :is(a,button).b{
    overflow:visible;
    padding:0
  }

  .wk .b > .bt{
    position:absolute;
    inset:0;
    padding:2px 3px;
    overflow:hidden;
    border-radius:inherit
  }

  /* `.step` u predlosku sece (`overflow:hidden`) zbog zaobljenja — pa bi secao i
     prosirenje. Zaobljenje prelazi na krajnja dugmad, izgled isti. 38x40 -> 44. */

  .step{
    overflow:visible
  }

  .step button:first-child{
    border-radius:9px 0 0 9px
  }

  .step button:last-child{
    border-radius:0 9px 9px 0
  }

  .step button::after{
    content:"";
    position:absolute;
    inset:-2px -3px
  }

  .mon .h button::after{
    content:"";
    position:absolute;
    inset:-5px
  }

  /* `::after` prekidaca je kruzic, pa prosirenje ide kroz `::before`. 48x28 -> 52x44. */

  .sw2::before{
    content:"";
    position:absolute;
    inset:-8px -2px
  }

  .form .opts button::after,.form .opts label::after,.form .opts > a::after{
    content:"";
    position:absolute;
    inset:-5px 0
  }

  /* Grupa F (izmereno 17.09.2026, krug F): „Prikaži" u polju lozinke je 73x21, a
     `.inp .box` ima `overflow:hidden`, pa bi `::after` bio presečen. Dugme zato
     zauzima PUNU visinu polja (46px) — izgled isti, jer nema pozadinu. */

  .inp .box button.ax{
    align-self:stretch
  }

  /* „Zaboravljena lozinka?" je 19px visoka. Prostor se uzima iz ZATEČENIH
     razmaka (8px iznad, 18px do „Uđi"), ne preko polja lozinke: `::after` bi
     prekrio donju ivicu polja i krao mu dodir. 8 + 19 + 17 = 44px; negativna
     donja margina se sabija sa `.go` (18px), pa tekst ostaje gde je bio. */

  .auth .forgot{
    margin-top:0;
    padding:8px 0 17px;
    margin-bottom:-17px
  }

  .toast .un::after{
    content:"";
    position:absolute;
    inset:-12px -6px
  }

  /* Ikonica-dugme od 28px (inline mera iz predloska) -> 44x44. */

  .ico[style*="28px"]::after{
    inset:-8px
  }

  /* JEDINI IZLAZ SA EKRANA POTVRDE LOZINKE (krug B, 17.09.2026). „Odustani" je
     tekstualni link u svom redu, izmereno 59x19 — ispod praga dodira, a to je
     jedini nacin da se sa tog ekrana izadje bez unosa lozinke. Izgled ostaje
     doslovno isti; prosiruje se nevidljivo polje na 45px visine (19 + 2x13). */

  .odustani::after{
    content:"";
    position:absolute;
    inset:-13px 0
  }

  /* iOS ZUMIRA celu stranu kad se fokusira polje sa fontom ispod 16px. Most je
     spustao `.field` na 14px vec od 640px, pa je na telefonu POLOZENO (844px)
     svih sest polja lista „Novi termin" imalo 14px (izmereno 10.09.); isto i
     padajuci meni Statistike sa `text-[13px]`. Na ekranu na dodir svako polje
     je najmanje 16px — ODSTUPANJE od predloska (njegova polja su 14px), svesno.
     `html body :is(...)` dize tezinu iznad klasa i Tailwind velicina. */

  html body :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea){
    font-size:max(16px,1em)
  }
}

/* ===== DESKTOP =====
   Predlozak nema nijedan @media po sirini nego klasu `.stage.desk` koju kaci
   njegov radni okvir. Prevedeno u prag na kom aplikacija vec prebacuje donju
   traku u bocni meni. */

@media (min-width: 1024px) {
  .fab{
    bottom:26px
  }

  .sheetup::-webkit-scrollbar{
    width:0;
    display:none
  }

  /* ============================================================
     DESKTOP — bočni meni umesto donje trake
     ============================================================ */

  .side{
    display:flex;
    flex-direction:column;
    width:246px;
    flex:none;
    background:var(--paper);
    border-right:1px solid var(--line);
    position:relative
  }

  .side::before{
    content:"";
    position:absolute;
    right:-1px;
    top:0;
    bottom:0;
    width:1px;
    background:var(--line)
  }

  .bottom{
    display:none
  }

  .top{
    padding:12px 22px 12px 46px
  }

  .top h1{
    font-size:24px
  }

  .wrap{
    padding:16px 22px 22px 46px
  }

  .sect-t{
    padding:20px 0 8px 46px
  }

  .calbody{
    padding-left:58px;
    padding-right:22px
  }

  .cal .strip, .cal .who{
    padding-left:46px
  }

  .now{
    left:-52px
  }

  .now::before{
    left:52px
  }

  .cal-grid .h > b{
    left:-52px;
    width:38px
  }

  :root, .railed{
    --rail:22px
  }

  /* .railed::before{left:22px} — margina ugašena (predložak 1fc29758) */

  .cols2{
    grid-template-columns:1.15fr .85fr;
    gap:16px;
    align-items:start
  }

  .cols3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    align-items:start
  }

  .kpi3 .v{
    font-size:32px
  }

  .kpi3.k4{
    grid-template-columns:repeat(4,1fr)
  }

  .kpi3.k4 > div:first-child{
    grid-column:auto;
    border-bottom:0
  }

  .kpi3.k4 > div:nth-child(2){
    border-left:1px solid var(--rule)
  }

  .cal .cal-grid .h{
    height:86px
  }

  .cal .strip .d{
    width:52px
  }

  .sheetup{
    left:auto;
    right:0;
    top:0;
    bottom:0;
    width:400px;
    border-radius:0;
    border-left:1px solid var(--line);
    border-top:0;
    max-height:none;
    overflow-y:auto;
    padding:20px 22px 24px;
    box-shadow:-24px 0 60px -30px rgba(45,36,16,.5);
    transform:translateX(101%);
    transition:transform .38s var(--e-out)
  }

  .sheetup.on{
    transform:none
  }

  .sheetup .grab{
    display:none
  }

  .sheetup .close-x{
    display:grid
  }

  .sheetup .hd{
    padding-right:46px
  }

  .fab{
    right:26px;
    bottom:26px
  }

  .prev{
    width:210px
  }

  /* desktop kalendar: kolone po radniku */

  .cal .who{
    display:none
  }

  .lanes{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    position:absolute;
    inset:4px 22px 96px 58px
  }

  .lane{
    position:relative
  }

  .lanehd{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin-left:58px;
    padding:8px 22px 8px 0;
    border-bottom:1px solid var(--line);
    position:sticky;
    top:0;
    background:var(--paper);
    z-index:5
  }

  .lanehd > *{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12.5px;
    font-weight:800;
    color:var(--ink-2);
    min-height:44px;
    padding:0;
    border:0;
    background:none;
    font-family:inherit;
    text-align:left;
    width:100%
  }

  .lanehd .av{
    width:24px;
    height:24px;
    font-size:9.5px
  }

  .lanehd .fr{
    margin-left:auto;
    font-size:10.5px;
    font-weight:700;
    color:var(--muted-2)
  }

  /* Ime radnice se NE ponavlja na kartici unutar kolone koja već nosi to ime
     (vlasnik 12.09.2026): zaglavlje kolone `.lanehd` se vidi tek od 1024px, pa se
     tek tu skida i ime sa kartice. Na telefonu (bez zaglavlja kolona) ostaje. */

  .ap .s .rad{
    display:none
  }

  .slots{
    display:none
  }

  .lanes{
    display:grid
  }

  /* Kolone po radniku (predlozak `.lanes`): aplikacija ih crta KROZ `.slots` —
     ista mreza, kartica pomerena u kolonu svog radnika (`--ld`/`--wd`), razmak
     8px kao `gap` u predlosku. Zaglavlje kolona je `.lanehd` iz sablona. */

  .slots{
    inset:4px 22px 96px 58px
  }

  .slots > .ap{
    left:calc(var(--ld,0%) + 4px);
    width:calc(var(--wd,100%) - 8px)
  }

  .slots > .gap{
    left:calc(var(--ld,0%) + 4px);
    width:calc(var(--wd,100%) - 8px)
  }

  .gap.samo-desk{
    display:flex
  }

  .lanehd{
    grid-template-columns:repeat(var(--kol,4),1fr);
    top:var(--vrh-zaglavlja,0px);
    z-index:15
  }

  /* Desktop podrazumevano (izmereno 12.09. na 1280, posle kruga 13): glava dana
     135px + zaglavlje kolona 41px + 8px vazduha. JS koriguje (vidi `.scr` gore). */

  #day-view{
    --vrh-zaglavlja:135px
  }

  .scr{
    scroll-padding-top:184px
  }

  /* ISTORIJA (10.09.) — predlozak na desktopu gasi `.slots` i red radnika
     (`.cal .who`) i umesto njih crta KOLONE PO RADNIKU u `.lanes`/`.lanehd`, koje
     pravi njegov JavaScript. Aplikacija ih jos ne crta, pa je na desktopu cela
     mreza termina bila SAKRIVENA (izmereno: `[data-cal]` 0×0, dan sa 2 termina
     prikazan prazan) i nestao je filter po radniku. Dok kolone ne dobiju
     serverski prikaz, desktop je crtao isto sto i telefon. Sada kolone postoje;
     red radnika OSTAJE i na desktopu (svesno odstupanje): radnica po difoltu
     gleda svoj dan, pa bez „Svi" ne bi mogla da vidi ceo salon. */

  .slots{
    display:block
  }

  .cal .who{
    display:flex
  }

  .pub .body{
    grid-template-columns:1.25fr .75fr;
    align-items:start;
    padding:20px 22px 0 46px;
    gap:18px
  }

  .pub .hero{
    padding:24px 22px 18px 46px
  }

  .pub{
    padding-bottom:24px
  }

  .paybar{
    display:none
  }

  .only-mob{
    display:none
  }

  .only-wide{
    display:block
  }

  .mv .rail{
    width:280px;
    border-right:1px solid var(--line)
  }

  .mv .rhead{
    padding:16px 16px 12px
  }

  .mv .pane{
    display:flex
  }

  .mv.open .rail{
    display:flex
  }

  .mv .phead{
    padding:22px 26px 18px
  }

  .mv .phead .back{
    display:none
  }

  .mv .pbody{
    padding:20px 26px 30px
  }

  .cal .vsw{
    padding:12px 0 2px
  }

  .wk{
    padding-left:58px;
    padding-right:22px
  }

  .mo{
    padding:8px 22px 40px 46px
  }

  .mo .c{
    min-height:96px;
    padding:8px 7px 7px
  }

  .mo .c .n::after{
    content:" termina";
    font-weight:700
  }

  .sortbar{
    display:flex;
    align-items:center;
    gap:12px
  }

  .nact{
    grid-template-columns:1fr 1fr
  }

  .nact .btn:first-child{
    grid-column:1/-1
  }

  .stanja .head{
    padding:20px 24px 18px 46px
  }

  .stanja .filt{
    padding-left:46px;
    flex-wrap:wrap;
    overflow:visible
  }

  .stanja .list{
    padding:18px 24px 0 46px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
  }

  .stanja .gt{
    grid-column:1/-1;
    padding-top:18px
  }
}

/* ---------------------------------------------------------------------------
   Kalendar: sto predlozak ne moze da zna
   ---------------------------------------------------------------------------
   Predlozak crta sate kao blokove od 86px jedan ispod drugog, jer je u njemu
   dan uvek pocinjao u pun sat. Salon otvara u 8:30 koliko i u 9:00, pa se linije
   crtaju APSOLUTNO, na `top` iz iste racunice iz koje se pozicioniraju i
   kartice — inace bi se mreza i termini razisli za pola sata.

   Zum ostaje: visina sata se mnozi sa `--zoom`, kao i sve ostalo.
   --------------------------------------------------------------------------- */

/* Seče SAMO vodoravno. Do 11.09. je stajalo `overflow:hidden`, pa je oznaka prvog
   sata („09", `top:-8px`) bila odsečena za 4px (izmereno proverom odsečenog teksta,
   na svakoj širini); predložak `.calbody` ne seče uopšte. `clip` po jednoj osi ne
   pravi klizač od druge (za razliku od `hidden`). */

.calbody {
  overflow-x: clip;
}

.cal-grid {
  position: absolute;
  inset: 4px 16px 96px 50px;
}

.cal-grid .h {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--rule);
}

/* Prva linija u predlosku nema obrub jer je prva u nizu; ovde su sve apsolutne,
   pa se to pravilo ne primenjuje samo — i ne treba, jer prvi sat ovde nije nuzno
   vrh mreze. */

.cal-grid .h:first-child {
  border-top: 1px solid var(--rule);
}

/* Nevidljiva meta za „novi termin" preko cele mreze. Predlozak je nema — on
   `gap` crta samo tamo gde je rupa — ali salon sme da upise termin i van radnog
   vremena, pa meta mora da pokriva sve. */

.calslot {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 1;
  border-radius: 6px;
}

.calslot:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

/* Rupa u radnom vremenu (pauza izmedju smena): vidljivo drugacije, ali i dalje
   klikabilno. */

.calslot.off {
  background: color-mix(in srgb, var(--line) 45%, transparent);
}

/* Kartica mora da bude IZNAD mete, inace se termin ne moze otvoriti. */

.ap {
  z-index: 2;
}

/* Termin koji ceka potvrdu: isprekidan obrub, kao online zahtev u predlosku. */

.ap.pending {
  border-left-style: dashed;
  outline: 1.5px dashed color-mix(in srgb, var(--s-wait) 55%, transparent);
  outline-offset: -2px;
}

/* Termin iz serije: segmentirana sina uz ivicu, bez novog simbola. */

.ap.series {
  border-left-style: dotted;
  border-left-width: 4px;
}

.ap.grupa .n {
  font-family: var(--font-naslov);
}

/* Bez animacije ulaska u aplikaciji: predlozak je pusta jednom, pri prikazu
   ekrana, a ovde se mreza menja htmx-om posle svakog upisa — pa bi svaka izmena
   ponovo „uletala" i ekran bi treperio.
   Tezina `.on .ap` je namerna: predloskovo `.on .ap{animation:…}` je (0,2,0) i
   pobedjuje golo `.ap`. Do 10.09. je ovde stajalo `.ap,.gap,.now` — i gubilo:
   kartice su uletale posle svakog upisa, a rupe se pojavljivale tek posle 1,1 s
   (nalaz pregleda pravilnika; pod reduced-motion se nije video). */

.on .ap,
.on .gap,
.on .now {
  opacity: 1;
  animation: none;
}

/* ---------------------------------------------------------------------------
   „Vise": koje okno se vidi i koji je nivo
   ---------------------------------------------------------------------------
   Predlozak ima jedno okno cija se sadrzina prepisuje JavaScriptom. Aplikacija
   sva okna iscrtava na serveru i pokazuje ono koje je izabrano — jer bez toga
   ni jedno ne postoji dok se JS ne ucita, a strana mora da radi i pre toga.
   Zato: `.mv.g-<id> .pane [data-g="<id>"]`.
   --------------------------------------------------------------------------- */

.mv .pane > [data-g] {
  display: none;
  flex-direction: column;
  min-height: 100%;
}

.mv.g-kal .pane > [data-g="kal"],
.mv.g-kli .pane > [data-g="kli"],
.mv.g-pn .pane > [data-g="pn"],
.mv.g-por .pane > [data-g="por"],
.mv.g-sajt .pane > [data-g="sajt"],
.mv.g-izv .pane > [data-g="izv"],
.mv.g-sys .pane > [data-g="sys"] {
  display: flex;
}

/* Napredna stavka postoji samo u naprednom rezimu. Pre nego sto Alpine procita
   izbor, server salje `bez-js` (uze stanje), pa se spisak moze samo prosiriti —
   nista ne izmice ispod prsta na sporoj vezi. Na desktopu se u tom stanju vidi
   prva grupa, a ne prazno okno. */

@media (min-width: 1024px) {
  .mv.bez-js .pane > [data-g="kal"] {
    display: flex;
  }
}

.mv.bez-js [data-nivo="napredno"],
.mv.samo-osnovno [data-nivo="napredno"] {
  display: none;
}

/* Pretraga skriva SVOJIM atributom, ne istim kojim i nivo: dva mehanizma nad
   jednim atributom znace da gasenje jednog gasi i drugi. `data-trazi="ne"`
   postavlja `viseMeni.osvezi()`; dok pretraga stoji prazna, atributa nema, pa
   je ovo pravilo mrtvo slovo i spisak izgleda tacno kao pre. */

/* ===========================================================================
   LEPLJIVA TRAKA JAVNE STRANE (`.paybar`) — dve popravke iz merenja 16.09.2026
   ===========================================================================

   Traka je dodata istog dana i ISTOG dana je krug grupe C oborio dve stvari
   koje su ušle s njom. Obe su bile moje, i obe su bile nevidljive u šablonu:

   1. Na 390 je red ispod iznosa bio odsečen: `<span>` 200px, tekst 239px —
      „od ukupno 4.500 · plaća se odmah po slan…". Predloškov `.paybar .l span`
      nosi `white-space:nowrap`, jer je u predlošku ta rečenica kratka
      („depozit · Bojenje · čet 3. sep"). Naša kaže i kada se plaća, pa ne staje.
      Rečenica se ne skraćuje (vlasnik ju je odobrio doslovno) — prelama se.

   2. Na 1280 je traka stajala PREKO „Cenovnik i radno vreme salona" i taj link
      se posle fokusa nije video. Predložak to i ne radi: `.stage.desk .paybar`
      je kod njega `display:none`. Aplikacija nema `.stage.desk`, pa je pravilo
      moralo da se izrazi preko granice telefon/desktop (odluka 14, 1024px).
      Lepljiva traka je pomoć na telefonu; na desktopu dugme ionako stoji u toku
      strane.
   =========================================================================== */

/* JEDNA vrednost: iz nje se crta traka I iz nje se racuna rezervisano mesto
   ispod nje. Prepisan broj bi se razisao prvim menjanjem visine dugmeta. */

:root {
  --paybar-h: 64px;
}

/* Traka je JEDAN red (odluka 24): levo iznos, desno dugme od 44px. Visina je
   vezana za `--paybar-h`, a ne za zbir paddinga — inace bi svaka izmena teksta
   pomerala i rezervisano mesto. */

.main.paying .paybar {
  min-height: var(--paybar-h);
  box-sizing: border-box;
  padding-top: 8px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}

/* Iznos ostaje u JEDNOM redu. Izmereno 16.09.2026: na 320 se „Kapara 1.350 RSD"
   pri 22px prelamao na dva reda i dizao traku na 72px — iznad praga od 64px.
   Ispod 360px slovo je manje; traka time ostaje visoka koliko i dugme u njoj. */

.main.paying .paybar .l b {
  white-space: nowrap;
}

@media (max-width: 359px) {
  .main.paying .paybar .l b {
    font-size: 17px;
  }
}

/* STRANA REZERVISE MESTO ISPOD TRAKE (odluka 24, vlasnik 16.09.2026).
   Kraca traka nije resenje: lepljiva traka pokriva sadrzaj na SVAKOJ visini,
   samo manje. Izmereno 16.09.2026 pre ove izmene: traka od 88px (390) i 116px
   (320) pokrivala je cele redove spiska usluga („Sisanje — Zensko" 64px,
   „Sisanje — Musko" 68px). Razmak se izvodi iz ISTE vrednosti iz koje se traka
   crta, plus sigurna zona. */

.main.paying .scr {
  padding-bottom: calc(var(--paybar-h) + 12px + env(safe-area-inset-bottom));
}

/* FOKUS TASTATUROM NE SME DA ZAVRSI ISPOD TRAKE (vlasnik 16.09.2026).
   Ovo je jedini oblik pokrivanja koji NIJE prolazan: pregledac skroluje polje
   „taman u vidno polje", ono zavrsi tacno ispod lepljive trake, a korisnik ne
   zna da treba da skroluje — misli da gleda polje u koje kuca. Vrednost dolazi
   iz ISTE promenljive iz koje se traka crta. */

.main.paying form :is(input, textarea, select, button, a, label, .opt) {
  scroll-margin-bottom: calc(var(--paybar-h) + 12px);
}

/* Iznos u traci je DODIRNA META koja vodi na red „Kapara" u sazetku (odluka 24,
   dopuna 16.09.2026): ko odmah hoce da zna kakva je kapara, dobija punu
   recenicu u jednom dodiru umesto posle celog obrasca. Meta je >=44px, kao i
   dugme pored nje. */

.main.paying .paybar .l a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}

@media (min-width: 1024px) {
  /* Od 1024px trake nema (predlozak: `.stage.desk .paybar{display:none}`), pa
     nema ni sta da se rezervise. */

  .main.paying .paybar {
    display: none;
  }

  .main.paying .scr {
    padding-bottom: 0;
  }
}

.mv [data-trazi="ne"] {
  display: none;
}

/* Odjava je dugme u formi, a `.ri` je crtan za link — poravnaj ga. */

.mv .rfoot form {
  margin: 0;
}

.mv .rfoot .ri {
  text-align: left;
}

/* ===========================================================================
   IZGLED APLIKACIJE PO SALONU (20260817_1020) — boja, stil, font
   ===========================================================================

   Namerno IZVAN `@layer`: sve što je gore završi na mestu `@tailwind
   components` odnosno `@tailwind utilities` (vrh fajla), a ovaj blok ostaje gde
   je napisan — na dnu. Time isti selektor pobeđuje redosledom, bez podizanja
   specifičnosti i bez ijednog `!important`.

   ZAŠTO VARIJABLE, A NE KLASE: Tailwind CLI čita šablone i generiše samo klase
   koje u njima vidi kao LITERAL. Ime sastavljeno u toku rada (`bg-{{ boja }}-500`)
   ne postoji u public/app.css, pa tiho nestane — ekran izgleda pokvareno, a u
   šablonu nema greške. Zato `layout.njk` prospe gotove vrednosti — `--accent`
   i `--on-accent` inline na <body>, `--font-app` i `data-stil` na <html> — a
   ovde stoje pravila koja ih koriste. Sva imena klasa ispod su literali koje
   Tailwind već generiše iz šablona; ništa se ne sastavlja.

   PODRAZUMEVANO = ZATEČENO: `data-stil="klasicno"` ne pogađa nijedan selektor,
   pa salon koji ništa ne izabere ne vidi razliku.

   JEDAN AKCENAT (redizajn, faza 2, 07.09.2026). Ovde su do danas stajala dva:
   `--akcenat` sa <html>, koji je birao salon, i `--accent` sa <body>, koji je
   doneo sloj tokena. Nisu se sudarali — različita imena, različiti čvorovi —
   ali su pravila ispod čitala samo prvi, pa akcenat iz redizajna do dugmadi
   NIJE stizao. Sada je `--accent` jedini, a `--akcenat` je alias u sloju
   tokena koji se briše u fazi 3.

   Dve stvari koje su uz to nestale, obe zato što su bile druga kopija
   računice koju sloj tokena već radi:
     * `--akcenat-jak` → `var(--accent-strong)`;
     * `accentStrong` iz kataloga (`lib/appearance.ts`) — izmereno da se sedam
       od osam boja poklapa sa izvedenicom u granici od 7 jedinica po kanalu.
       Jedini vidljiv pomak je `mastilo`, čiji hover prelazi sa pune crne na
       `#191918`, i to pogađa svih 25 zatečenih salona jer su svi na `mastilo`.

   Boja teksta na dugmetu se od sada RAČUNA (`bojaNaAkcentu`), ne zakucava:
   `--on-accent` je za današnjih osam boja uvek belo, ali najtamnija prolazi za
   0,03, pa bi prva svetlija dodata boja dala beo tekst na svetlom — bez ijedne
   poruke.

   MESTO GDE JE OVO MOGLO DA PROĐE TIHO, izmereno: `--accent` postavljen na
   <html> ne radi. `app.css` nosi `body { --accent: … }`, a sopstvena
   deklaracija na elementu pobeđuje nasleđenu vrednost — izbor salona bi bio
   progutan bez greške i bez traga na ekranu. Zato ide inline na <body>.
   =========================================================================== */

/* --- font -----------------------------------------------------------------
   ISPRAVKA 07.09.2026: ovde je stajalo „nijedan font se ne preuzima sa mreže —
   repo nema `@font-face` ni CDN i to ostaje tako". Rečenica je bila tačna dok
   je stajala; redizajn ju je oborio. Od faze 2 repo ima ČETIRI `@font-face`
   deklaracije na vrhu ovog fajla, ali fajlovi su NAŠI (`public/fonts/`), ne sa
   CDN-a, i nose `font-display: optional` — pa razlog zbog kog je pravilo
   napisano („font koji se čeka je font koji se ne vidi") i dalje važi: ništa
   se ne čeka i ništa ne skače. Ista ispravka stoji u `src/lib/appearance.ts`.

   Rezerva u `var()` je ceo zatečeni niz iz `fontFamily.sans`, pa strana koja
   varijablu ne postavi (marketing.njk) izgleda kao i pre. */

body {
  /* Manrope i OVDE. Ovo je TREĆA kopija istog niza (uz `fontFamily.sans` u
     tailwind.config.js i `APP_FONTS.sistemski`), i jedina koja ga nije dobila u
     fazi 2 — pa se naslovna i sve marketing strane, koje `--font-app` ne
     postavljaju, iscrtavaju sistemskim pismom dok aplikacija ide u Manropeu.
     Tri kopije ostaju jer ih čitaju tri različita mehanizma (build, katalog u
     bazi, rezerva), ali moraju da se menjaju zajedno. */
  font-family: var(
    --font-app,
    Manrope,
    ui-sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Roboto,
    Helvetica Neue,
    Arial,
    sans-serif
  );
}

/* --- boja -----------------------------------------------------------------
   Akcenat nosi ono što je i do sada bilo „mastilo": glavno dugme, aktivna
   stavka u donjoj traci, izabran dan i FAB. Tekst NIJE obojen — telo teksta
   ostaje `colors.ink` da čitljivost ne zavisi od izbora boje. */

.btn-primary {
  background-color: var(--accent);
  /* Boja teksta se RAČUNA uz akcenat (`bojaNaAkcentu`), pa svetla boja ne može
     da napravi belo na svetlom. Rezerva je za strane bez salona (marketing),
     gde `--on-accent` niko ne postavi. */
  color: var(--on-accent, var(--on-dark));
}

.btn-primary:hover {
  /* Izvedenica iz sloja tokena umesto nekadašnjeg `--akcenat-jak`: jedan izvor
     umesto druge, ručno održavane kopije iste računice. */
  background-color: var(--accent-strong);
}

.fab {
  background-color: var(--accent);
  color: var(--on-accent, var(--on-dark));
}

.day-pill-current,
.day-pill-current:hover {
  background-color: var(--accent);
  color: var(--on-accent, var(--on-dark));
}

.bottom-nav-active,
.side-nav-active {
  color: var(--accent-ink);
}

/* Prekidači (`peer-checked:bg-ink` u šablonima).

   Vodeće `html ` NIJE ukras: Tailwind CLI ne ostavlja ovaj blok na dnu izlaza
   nego ga umetne u sredinu utility sekcije, pa varijante (`peer-checked:*`,
   `file:*` …) završe ISPOD njega. Isti selektor bi zato izgubio od utility-ja —
   provereno u pregledaču, prekidač je ostajao crn. `html` diže težinu na
   (0,3,1) i pitanje redosleda nestaje.

   Komponente iznad (`.btn-primary`, `.fab` …) tu pomoć ne dobijaju namerno:
   nijedna nema utility sa istim imenom, a `html .btn-primary` bi počeo da
   pobeđuje i klase koje šablon svesno stavi na to isto dugme. */

html .peer:checked ~ .peer-checked\:bg-ink {
  background-color: var(--accent);
}

/* --- stil (zaobljenost) ----------------------------------------------------
   `:where()` ne doprinosi specifičnosti, pa je težina selektora `html[data-stil]`
   + 0 = (0,1,1) — taman toliko da nadjača utility klasu (0,1,0) i komponentu iz
   @layer components, a da ostane ispod svega što nosi dva imena klase.

   `rounded-full` se NE dira ni u jednom stilu: to su avatari, pilule i
   prekidači, kojima krug nije ukras nego oblik. */

html[data-stil="meko"]
  :where(.btn, .icon-btn, .field, .day-pill, .cal-card, .chip, .pop, .ind-tab, .side-nav-item, .rounded-lg) {
  border-radius: 0.875rem;
}

html[data-stil="meko"] :where(.rounded-xl) {
  border-radius: 1.125rem;
}

html[data-stil="meko"] :where(.rounded-2xl) {
  border-radius: 1.5rem;
}

html[data-stil="ostro"]
  :where(
    .btn,
    .icon-btn,
    .field,
    .day-pill,
    .cal-card,
    .chip,
    .pop,
    .ind-tab,
    .side-nav-item,
    .rounded-lg,
    .rounded-xl,
    .rounded-2xl
  ) {
  border-radius: 0.25rem;
}

/* ===========================================================================
   POČETNA — G-01 (vlasnik 19.09.2026), predložak `skice/ekrani-aplikacije.html`,
   tab „Landing" (`#v-land`, 1fc29758).

   Pravila su PREVEDENA skriptom iz predloška, ne prekucana: `#v-land` → `.lp-page`,
   `.stage.desk` → `min-width:1024px` (odluka 14), `.stage:not(.desk)` → ispod toga,
   `--st-*` → `--s-*`, heks i rgba → tokeni iz `:root` (blok POČETNA).

   Svesno drugačije od predloška, i zašto:
   - Tokeni predloška za ovaj tab (`--muted:#7b7466` i dr.) se NE prenose: odluka 13
     drži `--muted` na 5,93:1. `--rule`, `--r-md` i `--rh` se prenose lokalno.
   - Pokret (vlasnik: „samo tamo gde nešto objašnjava"): predložak otkriva elemente
     skriptom (`.lp-in` iz IntersectionObserver-a). Ovde `.lp-in` stoji u markupu od
     starta, pa nijedan prelaz ne okine — strana je odmah u krajnjem stanju. Ostaje
     SAMO tok zakazivanja (`lp_prog`, `lp_sIO`, `lp_sIO2`, `lp_sIn`: koraci 1 → 2 → 3,
     jednom), jer on objašnjava „tri dodira". Uklonjeni: `lp_pop`, `lp_ping`,
     `lp_sheen`; `lp_drop` i `lp_tick` su zamenjeni krajnjim stanjem.
   - Sveska: rukopis je Caveat 500 (O-77), `--font-rukopis` sa stvarnom rezervom. Od pokreta
     scene ostaje SAMO strelica sa sveske na ekran (`lp_strelica`, crta se jednom); zaokružen
     dupli termin, precrtan red i „dupli termin!" stoje odmah u krajnjem stanju.
   - Sklopka mesečno/godišnje radi bez skripta (radio + `:has`), jer marketing
     strane namerno ne učitavaju JS; traka „Uđi u demo" se na telefonu lepi
     `position:sticky` unutar omotača koji počinje ISPOD hero-a.
   =========================================================================== */

.lp-page{
  --rh:32px;
  --marg:34px;
  --rule:var(--rule-2);
  --r-md:14px;
  container-type:inline-size;
  color:var(--ink);
  position:relative;
  overflow-x:hidden;
  background-color:var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),
    linear-gradient(90deg, color-mix(in srgb,var(--belo) 30%,transparent) 0%, color-mix(in srgb,var(--belo) 0%,transparent) 30%, color-mix(in srgb,var(--crno) 2.2%,transparent) 100%),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--rh) - 1px), var(--rule) calc(var(--rh) - 1px) var(--rh));
  background-size:200px 200px, 100% 100%, 100% var(--rh)
}

.lp-page::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:18px;
  width:1.5px;
  background:var(--margin);
  opacity:.6;
  z-index:1;
  pointer-events:none
}

.lp-page .lp-wrap{
  position:relative;
  z-index:2;
  padding-inline:34px 28px
}

.lp-page h1,.lp-page h2,.lp-page h3{
  font-family:var(--font-naslov);
  font-weight:500;
  letter-spacing:-.02em;
  margin:0
}

.lp-page p{
  margin:0
}

.lp-page .lp-hand{
  font-family:var(--font-rukopis)
}

.lp-page .lp-kicker{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-ink);
  display:flex;
  align-items:center;
  gap:9px;
  line-height:var(--rh)
}

.lp-page .lp-kicker::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--accent);
  flex:none
}

.lp-page .lp-lead{
  font-size:16.5px;
  line-height:var(--rh);
  color:var(--ink-2)
}

.lp-page .lp-micro{
  font-size:12.5px;
  line-height:20px;
  color:var(--muted);
  font-weight:600
}

.lp-page .lp-hl{
  background:linear-gradient(transparent 58%, var(--accent-wash) 0);
  background-size:0% 100%;
  background-repeat:no-repeat;
  transition:background-size .8s var(--e-out) .35s
}

.lp-page .lp-in .lp-hl,.lp-page .lp-hl.lp-in{
  background-size:100% 100%
}

.lp-page .lp-ph{
  display:inline-block;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--s-wait);
  background:var(--s-wait-bg);
  border-radius:var(--r-xs);
  padding:2px 6px;
  vertical-align:1px
}

.lp-page .lp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  background:var(--accent);
  color:var(--on-accent);
  border:0;
  border-radius:11px;
  padding:0 22px;
  height:56px;
  font-weight:800;
  font-size:16px;
  cursor:pointer;
  text-decoration:none;
  width:100%;
  position:relative;
  overflow:hidden;
  box-shadow:0 1px 2px color-mix(in srgb,var(--senka-tamna) 16%,transparent), 0 10px 24px -12px var(--accent-glow);
  transition:transform .18s var(--e-out), box-shadow .18s var(--e-out), background .18s
}

.lp-page .lp-btn:active{
  transform:scale(.975)
}

.lp-page .lp-btn:hover{
  background:var(--accent-strong);
  box-shadow:0 2px 4px color-mix(in srgb,var(--senka-tamna) 18%,transparent), 0 14px 30px -12px var(--accent-glow)
}

.lp-page .lp-btn .lp-ar{
  transition:transform .3s var(--e-spring)
}

.lp-page .lp-btn:hover .lp-ar{
  transform:translateX(4px)
}

.lp-page .lp-btn.lp-sec{
  background:transparent;
  color:var(--accent-ink);
  box-shadow:inset 0 0 0 1.5px var(--accent-line)
}

.lp-page .lp-btn.lp-sec:hover{
  background:var(--accent-soft);
  box-shadow:inset 0 0 0 1.5px var(--accent-line)
}

.lp-page .lp-btn.lp-sm{
  height:40px;
  padding:0 15px;
  font-size:13.5px;
  width:auto;
  border-radius:9px
}

.lp-page .lp-btn.lp-dark{
  background:var(--on-dark);
  color:var(--dark)
}

.lp-page .lp-rv{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s var(--e-out),transform .7s var(--e-out)
}

.lp-page .lp-rv.lp-in{
  opacity:1;
  transform:none
}

.lp-page .lp-rv[data-d="1"]{
  transition-delay:.08s
}

.lp-page .lp-rv[data-d="2"]{
  transition-delay:.16s
}

.lp-page .lp-rv[data-d="3"]{
  transition-delay:.24s
}

.lp-page .lp-rv[data-d="4"]{
  transition-delay:.32s
}

.lp-page .lp-ln{
  display:block;
  overflow:hidden
}

.lp-page .lp-ln > span{
  display:block;
  transform:translateY(105%);
  transition:transform .85s var(--e-out)
}

.lp-page .lp-in .lp-ln > span{
  transform:none
}

.lp-page .lp-in .lp-ln:nth-child(2) > span{
  transition-delay:.09s
}

.lp-page .lp-in .lp-ln:nth-child(3) > span{
  transition-delay:.18s
}

.lp-page .lp-nav{
  position:sticky;
  top:0;
  z-index:30;
  background:color-mix(in srgb,var(--paper) 84%,var(--belo));
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
          backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s
}

.lp-page .lp-nav.lp-stuck{
  border-bottom-color:var(--line-2);
  box-shadow:0 6px 20px -14px color-mix(in srgb,var(--senka) 50%,transparent)
}

.lp-page .lp-nav .lp-nrow{
  display:flex;
  align-items:center;
  gap:14px;
  height:60px;
  flex-wrap:nowrap
}

.lp-page .lp-logo{
  display:flex;
  align-items:center
}

.lp-page .lp-nav a{
  color:var(--ink-2);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  white-space:nowrap
}

.lp-page .lp-nav a.lp-btn{
  color:var(--on-accent)
}

.lp-page .lp-nav a.lp-btn.lp-sec{
  color:var(--accent-ink)
}

.lp-page .lp-nav .lp-sp{
  margin-left:auto
}

.lp-page .lp-nav .lp-lk{
  display:none
}

.lp-page .lp-hero{
  padding-top:26px;
  padding-bottom:8px
}

.lp-page .lp-hero h1{
  font-size:clamp(34px,10.2cqw,44px);
  line-height:1.08;
  margin-top:10px
}

.lp-page .lp-hero .lp-lead{
  margin-top:16px
}

.lp-page .lp-hero .lp-cta{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:22px
}

.lp-page .lp-hero .lp-micro{
  margin-top:12px
}

.lp-page .lp-trust{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:20px
}

.lp-page .lp-trust span{
  font-size:11.5px;
  font-weight:800;
  color:var(--accent-ink);
  background:var(--accent-soft);
  border-radius:var(--r-full);
  padding:6px 11px;
  line-height:1
}

.lp-page .lp-scene{
  position:relative;
  margin:26px -28px 0 -34px;
  padding:0 18px 8px 24px;
  min-height:610px;
  perspective:1200px
}

.lp-page .lp-note{
  position:relative;
  width:80%;
  max-width:300px;
  background:var(--sveska-papir);
  border-radius:3px 3px 3px 3px;
  padding:16px 14px 22px 34px;
  box-shadow:0 1px 0 color-mix(in srgb,var(--belo) 80%,transparent) inset, 0 16px 34px -20px color-mix(in srgb,var(--senka-topla) 60%,transparent);
  transform:rotate(-2.4deg) translateY(16px);
  opacity:0;
  transition:opacity .6s var(--e-out), transform .9s var(--e-out);
  clip-path:polygon(0 0, 97.5% 0, 96% 3%, 99% 7%, 96.5% 12%, 99.4% 17%, 96.2% 22%, 99% 27%,
    96.6% 33%, 99.3% 38%, 96.4% 44%, 99% 49%, 96.8% 55%, 99.4% 61%, 96.3% 66%, 99% 72%,
    96.5% 78%, 99.3% 84%, 96.6% 90%, 99% 95%, 97% 100%, 0 100%);
  background-image:repeating-linear-gradient(to bottom,transparent 0 27px,var(--sveska-linija) 27px 28px);
  background-position:0 30px;
}

.lp-page .lp-in .lp-note{
  opacity:1;
  transform:rotate(-2.4deg) translateY(calc(var(--par,0) * -14px))
}

.lp-page .lp-note::before{
  content:"";
  position:absolute;
  left:24px;
  top:0;
  bottom:0;
  width:1.4px;
  background:var(--margin);
  opacity:.55
}

.lp-page .lp-note .lp-rings{
  position:absolute;
  left:7px;
  top:14px;
  bottom:14px;
  width:11px;
  background-image:radial-gradient(circle at 5.5px 5.5px, var(--sveska-rupa) 4.6px, transparent 5px);
  background-size:11px 34px;
  background-repeat:repeat-y
}

.lp-page .lp-note .lp-hd{
  font-family:var(--font-rukopis);
  font-size:22px;
  font-weight:600;
  color:var(--sveska-naslov);
  letter-spacing:.02em;
  line-height:28px;
  margin-bottom:2px
}

.lp-page .lp-note .lp-row{
  font-family:var(--font-rukopis);
  font-size:22px;
  color:var(--mastilo);
  line-height:30px;
  position:relative;
  white-space:nowrap;
  opacity:0;
  transform:translateX(-6px);
  transition:opacity .4s ease, transform .5s var(--e-out)
}

.lp-page .lp-in .lp-note .lp-row{
  opacity:1;
  transform:none
}

.lp-page .lp-in .lp-note .lp-row:nth-of-type(1){
  transition-delay:.18s
}

.lp-page .lp-in .lp-note .lp-row:nth-of-type(2){
  transition-delay:.26s
}

.lp-page .lp-in .lp-note .lp-row:nth-of-type(3){
  transition-delay:.34s
}

.lp-page .lp-in .lp-note .lp-row:nth-of-type(4){
  transition-delay:.42s
}

.lp-page .lp-in .lp-note .lp-row:nth-of-type(5){
  transition-delay:.50s
}

.lp-page .lp-in .lp-note .lp-row:nth-of-type(6){
  transition-delay:.58s
}

.lp-page .lp-note .lp-row.lp-faint{
  color:var(--mastilo-bledo)
}

.lp-page .lp-note .lp-row.lp-cut::after{
  content:"";
  position:absolute;
  left:-2px;
  top:15px;
  height:1.6px;
  background:var(--precrt);
  width:0;
  transition:width .45s var(--e-out) .95s;
  border-radius:2px
}

.lp-page .lp-in .lp-note .lp-row.lp-cut::after{
  width:calc(100% + 4px)
}

.lp-page .lp-note .lp-mark{
  position:absolute;
  left:16px;
  top:104px;
  width:206px;
  height:66px;
  overflow:visible;
  pointer-events:none
}

.lp-page .lp-note .lp-mark ellipse{
  fill:none;
  stroke:var(--crvena-olovka);
  stroke-width:2.7;
  stroke-linecap:round;
  stroke-dasharray:340;
  stroke-dashoffset:340;
  transition:stroke-dashoffset 1s var(--e-out) 1.25s
}

.lp-page .lp-in .lp-note .lp-mark ellipse{
  stroke-dashoffset:0
}

.lp-page .lp-note .lp-warn{
  position:absolute;
  left:40px;
  top:176px;
  font-family:var(--font-rukopis);
  font-size:21px;
  font-weight:600;
  color:var(--crvena-olovka);
  transform:rotate(-5deg);
  opacity:0;
  transition:opacity .45s ease 2.15s;
  white-space:nowrap;
  letter-spacing:.01em;
  text-shadow:0 0 6px var(--sveska-papir), 0 0 6px var(--sveska-papir), 0 0 12px var(--sveska-papir)
}

.lp-page .lp-in .lp-note .lp-warn{
  opacity:1
}

.lp-page .lp-arrow{
  position:absolute;
  right:2px;
  top:4px;
  width:112px;
  height:104px;
  z-index:3;
  pointer-events:none
}

.lp-page .lp-arrow path{
  fill:none;
  stroke:var(--strelica);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:200;
  stroke-dashoffset:200;
  transition:stroke-dashoffset .8s var(--e-out) 1.5s
}

.lp-page .lp-in .lp-arrow path{
  animation:lp_strelica .8s var(--e-out) .5s both
}

.lp-page .lp-app{
  position:relative;
  margin:-50px -6px 0 auto;
  width:84%;
  max-width:300px;
  background:var(--sheet);
  border-radius:16px;
  overflow:hidden;
  z-index:4;
  box-shadow:0 2px 4px color-mix(in srgb,var(--senka) 8%,transparent), 0 26px 54px -18px color-mix(in srgb,var(--senka) 42%,transparent),
             0 0 0 1px color-mix(in srgb,var(--senka) 6%,transparent);
  opacity:0;
  transform:translateY(34px) scale(.955);
  transition:opacity .55s var(--e-out) 1.85s, transform .95s var(--e-out) 1.85s
}

.lp-page .lp-in .lp-app{
  opacity:1;
  transform:translateY(calc(var(--par,0) * 16px))
}

.lp-page .lp-app .lp-chrome{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  background:var(--sheet-2);
  border-bottom:1px solid var(--line)
}

.lp-page .lp-app .lp-dots{
  display:flex;
  gap:4px
}

.lp-page .lp-app .lp-dots i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--line-2);
  display:block
}

.lp-page .lp-app .lp-url{
  flex:1;
  background:var(--sheet);
  border-radius:var(--r-full);
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:10.5px;
  font-weight:700;
  color:var(--muted);
  border:1px solid var(--line)
}

.lp-page .lp-app .lp-body{
  padding:12px
}

.lp-page .lp-app .lp-day{
  font-family:var(--font-naslov);
  font-size:18.5px;
  font-weight:600;
  letter-spacing:-.01em
}

.lp-page .lp-app .lp-sub{
  font-size:11.5px;
  color:var(--s-ok);
  font-weight:800;
  margin-top:1px;
  display:flex;
  align-items:center;
  gap:5px
}

.lp-page .lp-app .lp-sub::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--s-ok)
}

.lp-page .lp-app .lp-week{
  display:flex;
  gap:3px;
  margin:12px 0 11px
}

.lp-page .lp-app .lp-week span{
  flex:1;
  text-align:center;
  font-size:10.5px;
  font-weight:800;
  color:var(--muted);
  padding:6px 0;
  border-radius:var(--r-full)
}

.lp-page .lp-app .lp-week span.lp-on{
  background:var(--dark);
  color:var(--on-dark)
}

.lp-page .lp-app .lp-week span.lp-off{
  opacity:.4
}

.lp-page .lp-app .lp-ap{
  border-radius:10px;
  padding:8px 10px;
  margin-bottom:6px;
  opacity:0;
  transform:translateY(10px) scale(.98);
  transition:opacity .4s ease, transform .5s var(--e-spring)
}

.lp-page .lp-in .lp-app .lp-ap{
  opacity:1;
  transform:none
}

.lp-page .lp-in .lp-app .lp-ap:nth-of-type(1){
  transition-delay:2.25s
}

.lp-page .lp-in .lp-app .lp-ap:nth-of-type(2){
  transition-delay:2.36s
}

.lp-page .lp-in .lp-app .lp-ap:nth-of-type(3){
  transition-delay:2.47s
}

.lp-page .lp-in .lp-app .lp-ap:nth-of-type(4){
  transition-delay:2.58s
}

.lp-page .lp-app .lp-ap .lp-t{
  font-size:10.5px;
  font-weight:800;
  opacity:.75
}

.lp-page .lp-app .lp-ap .lp-n{
  font-family:var(--font-naslov);
  font-size:15px;
  font-weight:600;
  line-height:1.25;
  margin:1px 0
}

.lp-page .lp-app .lp-ap .lp-s{
  font-size:11px;
  font-weight:600;
  opacity:.72
}

.lp-page .lp-app .lp-ap.lp-g{
  background:var(--s-ok-bg);
  color:color-mix(in srgb,var(--s-ok) 78%,var(--crno))
}

.lp-page .lp-app .lp-ap.lp-w{
  background:var(--s-wait-bg);
  color:color-mix(in srgb,var(--s-wait) 78%,var(--crno))
}

.lp-page .lp-app .lp-ap.lp-a{
  background:var(--accent-soft);
  color:var(--accent-ink);
  box-shadow:0 0 0 1.5px var(--accent-line)
}

.lp-page .lp-app .lp-tabs{
  display:flex;
  border-top:1px solid var(--line);
  background:var(--sheet-2)
}

.lp-page .lp-app .lp-tabs span{
  flex:1;
  text-align:center;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  padding:11px 0
}

.lp-page .lp-app .lp-tabs span.lp-on{
  color:var(--accent-ink);
  font-weight:800;
  box-shadow:inset 0 -2px 0 var(--accent)
}

.lp-page .lp-cap{
  margin-top:16px;
  font-size:12.5px;
  color:var(--muted);
  font-weight:600;
  line-height:19px;
  display:flex;
  gap:9px;
  align-items:flex-start
}

.lp-page .lp-cap b{
  color:var(--ink-2);
  font-weight:800
}

.lp-page .lp-sect{
  padding-block:calc(var(--rh)*1.5);
  scroll-margin-top:76px
}

.lp-page .lp-sect h2{
  font-size:clamp(25px,7.4cqw,34px);
  line-height:1.16
}

.lp-page .lp-dbl{
  border-top:3px double var(--line-2);
  padding-top:20px
}

.lp-page .lp-sub{
  margin-top:12px
}

.lp-page .lp-ba{
  margin-top:22px;
  display:grid;
  gap:12px
}

.lp-page .lp-card{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-xs);
  padding:18px 18px 18px 44px;
  position:relative;
  box-shadow:0 1px 0 color-mix(in srgb,var(--belo) 70%,transparent) inset, 0 14px 30px -24px color-mix(in srgb,var(--senka-topla) 55%,transparent)
}

.lp-page .lp-card::before{
  content:"";
  position:absolute;
  left:24px;
  top:0;
  bottom:0;
  width:1.4px;
  background:var(--margin);
  opacity:.45
}

.lp-page .lp-card .lp-t{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:26px
}

.lp-page .lp-card.lp-now .lp-t{
  color:var(--accent-ink)
}

.lp-page .lp-card ul{
  margin:6px 0 0;
  padding:0;
  list-style:none
}

.lp-page .lp-card li{
  font-size:15px;
  line-height:30px;
  color:var(--ink-2);
  padding-left:26px;
  padding-right:4px;
  position:relative
}

.lp-page .lp-card li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--muted)
}

.lp-page .lp-card.lp-now li::before{
  content:"✓";
  color:var(--accent);
  font-weight:800
}

.lp-page .lp-card.lp-old li{
  color:var(--muted);
  position:relative
}

.lp-page .lp-card.lp-old li span{
  position:relative
}

.lp-page .lp-card.lp-old li span::after{
  content:"";
  position:absolute;
  left:-2px;
  right:-2px;
  top:52%;
  height:1.5px;
  background:color-mix(in srgb,var(--s-miss) 62%,transparent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s var(--e-out)
}

.lp-page .lp-card.lp-old.lp-in li:nth-child(1) span::after{
  transform:scaleX(1);
  transition-delay:.15s
}

.lp-page .lp-card.lp-old.lp-in li:nth-child(2) span::after{
  transform:scaleX(1);
  transition-delay:.27s
}

.lp-page .lp-card.lp-old.lp-in li:nth-child(3) span::after{
  transform:scaleX(1);
  transition-delay:.39s
}

.lp-page .lp-card.lp-old.lp-in li:nth-child(4) span::after{
  transform:scaleX(1);
  transition-delay:.51s
}

.lp-page .lp-card.lp-old.lp-in li:nth-child(5) span::after{
  transform:scaleX(1);
  transition-delay:.63s
}

.lp-page .lp-feat{
  padding:26px 0;
  border-top:1px solid var(--line-2)
}

.lp-page .lp-feat .lp-no{
  font-family:var(--font-naslov);
  font-size:12.5px;
  color:var(--accent);
  font-weight:600;
  letter-spacing:.16em;
  line-height:22px
}

.lp-page .lp-feat h3{
  font-size:clamp(21px,6.2cqw,27px);
  line-height:1.2;
  margin-top:2px
}

.lp-page .lp-feat p{
  font-size:15.5px;
  line-height:var(--rh);
  color:var(--ink-2);
  margin-top:8px
}

.lp-page .lp-feat .lp-note{
  margin-top:12px;
  font-size:13px;
  font-weight:700;
  color:var(--accent-ink);
  display:inline-block;
  background:var(--accent-soft);
  border-radius:var(--r-sm);
  padding:8px 12px;
  line-height:1.4
}

.lp-page .lp-feat .lp-an{
  margin-top:20px
}

.lp-page .lp-an{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:15px;
  position:relative;
  overflow:hidden;
  box-shadow:0 1px 0 color-mix(in srgb,var(--belo) 70%,transparent) inset, 0 18px 40px -26px color-mix(in srgb,var(--senka-topla) 60%,transparent)
}

.lp-page .lp-an .lp-bar{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:10.5px;
  font-weight:800;
  color:var(--muted);
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-bottom:12px;
  line-height:18px
}

.lp-page .lp-an .lp-bar .lp-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
  position:relative
}

.lp-page .lp-an .lp-bar .lp-r{
  margin-left:auto;
  font-weight:800;
  letter-spacing:0;
  text-transform:none;
  font-size:12px;
  color:var(--accent-ink)
}

.lp-page .lp-an-cal .lp-cols{
  display:grid;
  grid-template-columns:26px 1fr 1fr;
  gap:7px
}

.lp-page .lp-an-cal .lp-hrs{
  display:flex;
  flex-direction:column;
  font-size:9.5px;
  color:var(--muted);
  font-weight:700;
  padding-top:24px
}

.lp-page .lp-an-cal .lp-hrs span{
  height:34px;
  line-height:1
}

.lp-page .lp-an-cal .lp-hd{
  font-size:11px;
  font-weight:800;
  color:var(--ink-2);
  height:24px;
  display:flex;
  align-items:center;
  gap:5px
}

.lp-page .lp-an-cal .lp-hd i{
  width:17px;
  height:17px;
  border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-size:7.5px;
  font-style:normal;
  display:grid;
  place-items:center;
  font-weight:800;
  flex:none
}

.lp-page .lp-an-cal .lp-track{
  position:relative;
  height:170px;
  background:repeating-linear-gradient(to bottom,transparent 0 33px,var(--line) 33px 34px)
}

.lp-page .lp-an-cal .lp-ev{
  position:absolute;
  left:0;
  right:0;
  border-radius:6px;
  padding:4px 6px;
  font-size:9.5px;
  font-weight:700;
  line-height:1.25;
  overflow:hidden;
  border-left:3px solid;
  opacity:0;
  transform:translateY(-10px) scale(.94)
}

.lp-page .lp-an.lp-in .lp-an-cal .lp-ev{
  opacity:1;
  transform:none
}

.lp-page .lp-an-cal .lp-ev.lp-ok{
  background:var(--s-ok-bg);
  border-color:var(--s-ok);
  color:color-mix(in srgb,var(--s-ok) 74%,var(--crno))
}

.lp-page .lp-an-cal .lp-ev.lp-wt{
  background:var(--s-wait-bg);
  border-color:var(--s-wait);
  color:color-mix(in srgb,var(--s-wait) 74%,var(--crno))
}

.lp-page .lp-an-cal .lp-ev.lp-ms{
  background:var(--s-miss-bg);
  border-color:var(--s-miss);
  color:color-mix(in srgb,var(--s-miss) 74%,var(--crno))
}

.lp-page .lp-an-cal .lp-ev small{
  display:block;
  font-weight:600;
  opacity:.82;
  font-size:9px
}

.lp-page .lp-an-cal .lp-gap{
  position:absolute;
  left:0;
  right:0;
  border:1.5px dashed var(--accent-line);
  border-radius:6px;
  font-size:9px;
  color:var(--accent-ink);
  font-weight:800;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(.9)
}

.lp-page .lp-an.lp-in .lp-an-cal .lp-gap{
  opacity:1;
  transform:none
}

.lp-page .lp-an-cal .lp-fill{
  margin-top:12px
}

.lp-page .lp-an-cal .lp-fill .lp-lb{
  display:flex;
  justify-content:space-between;
  font-size:11px;
  font-weight:800;
  color:var(--ink-2)
}

.lp-page .lp-an-cal .lp-fill .lp-tr{
  height:7px;
  border-radius:var(--r-full);
  background:var(--line);
  margin-top:6px;
  overflow:hidden
}

.lp-page .lp-an-cal .lp-fill .lp-tr i{
  display:block;
  height:100%;
  width:0;
  border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--accent-deep),var(--accent));
  transition:width 1.3s var(--e-out) 1.3s
}

.lp-page .lp-an.lp-in .lp-an-cal .lp-fill .lp-tr i{
  width:82%
}

.lp-page .lp-an-book .lp-fone{
  width:206px;
  margin:0 auto;
  border:7px solid var(--dark);
  border-radius:28px;
  background:var(--paper);
  padding:13px 12px;
  position:relative;
  overflow:hidden;
  height:274px;
  box-shadow:0 18px 36px -20px color-mix(in srgb,var(--senka) 60%,transparent)
}

.lp-page .lp-an-book .lp-prog{
  position:absolute;
  left:12px;
  right:12px;
  top:6px;
  height:3px;
  border-radius:2px;
  background:var(--line);
  overflow:hidden;
  z-index:5
}

.lp-page .lp-an-book .lp-prog i{
  display:block;
  height:100%;
  width:0;
  background:var(--accent);
  border-radius:2px
}

.lp-page .lp-an.lp-in .lp-an-book .lp-prog i{
  animation:lp_prog 4.2s linear forwards .2s
}

.lp-page .lp-an-book .lp-scr{
  position:absolute;
  inset:16px 12px 13px;
  opacity:0
}

.lp-page .lp-an.lp-in .lp-an-book .lp-scr:nth-child(2){
  animation:lp_sIO 4.2s var(--e-out) forwards .2s
}

.lp-page .lp-an.lp-in .lp-an-book .lp-scr:nth-child(3){
  animation:lp_sIO2 4.2s var(--e-out) forwards .2s
}

.lp-page .lp-an.lp-in .lp-an-book .lp-scr:nth-child(4){
  animation:lp_sIn .6s var(--e-out) forwards 3s
}

.lp-page .lp-an-book .lp-ttl{
  font-size:11px;
  font-weight:800;
  margin-bottom:9px;
  color:var(--ink)
}

.lp-page .lp-an-book .lp-row{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:9px;
  padding:8px 9px;
  font-size:9.5px;
  font-weight:700;
  margin-bottom:6px;
  display:flex;
  justify-content:space-between;
  gap:6px;
  color:var(--ink-2)
}

.lp-page .lp-an-book .lp-row.lp-sel{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent-ink);
  box-shadow:0 0 0 1.5px var(--accent)
}

.lp-page .lp-an-book .lp-slots{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px
}

.lp-page .lp-an-book .lp-slot{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:9px;
  padding:8px 0;
  font-size:10px;
  font-weight:800;
  text-align:center;
  color:var(--ink-2)
}

.lp-page .lp-an-book .lp-slot.lp-sel{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent)
}

.lp-page .lp-an-book .lp-ok{
  text-align:center;
  padding-top:22px
}

.lp-page .lp-an-book .lp-ok .lp-tick{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--s-ok-bg);
  color:var(--s-ok);
  display:grid;
  place-items:center;
  font-size:24px;
  font-weight:800;
  margin:0 auto 11px
}

.lp-page .lp-an.lp-in .lp-an-book .lp-ok .lp-tick{
  opacity:1;
  transform:none
}

.lp-page .lp-an-book .lp-ok b{
  font-size:12.5px;
  display:block;
  margin-bottom:3px
}

.lp-page .lp-an-book .lp-ok span{
  font-size:10px;
  color:var(--muted);
  line-height:1.5;
  display:block
}

.lp-page .lp-an-book .lp-sms{
  margin-top:14px;
  background:var(--dark);
  color:var(--on-dark);
  border-radius:11px;
  padding:9px 10px;
  font-size:9px;
  line-height:1.5;
  text-align:left
}

.lp-page .lp-an-book .lp-sms b{
  display:block;
  font-size:8px;
  opacity:.6;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:3px
}

.lp-page .lp-an-site .lp-mini{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:11px;
  overflow:hidden
}

.lp-page .lp-an-site .lp-hb{
  height:72px;
  background:linear-gradient(118deg,var(--accent-deep),var(--accent));
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden
}

.lp-page .lp-an-site .lp-hb::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 40%,color-mix(in srgb,var(--belo) 22%,transparent) 50%,transparent 60%);
  transform:translateX(-100%)
}

.lp-page .lp-an-site .lp-hb b{
  color:var(--on-accent);
  font-size:15.5px;
  font-weight:800;
  letter-spacing:-.01em;
  opacity:0;
  position:relative;
  z-index:1
}

.lp-page .lp-an.lp-in .lp-an-site .lp-hb b{
  opacity:1;
  transform:none
}

.lp-page .lp-an-site .lp-body{
  padding:12px
}

.lp-page .lp-an-site .lp-srv{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:10.5px;
  font-weight:700;
  padding:9px 10px;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:8px;
  margin-bottom:6px;
  color:var(--ink-2);
  opacity:0;
  transform:translateY(8px)
}

.lp-page .lp-an.lp-in .lp-an-site .lp-srv{
  opacity:1;
  transform:none
}

.lp-page .lp-an-site .lp-srv span{
  color:var(--muted);
  font-weight:600;
  white-space:nowrap
}

.lp-page .lp-an-site .lp-cta{
  background:var(--accent);
  color:var(--on-accent);
  border-radius:9px;
  text-align:center;
  padding:11px;
  font-size:12px;
  font-weight:800;
  opacity:0;
  transform:translateY(8px)
}

.lp-page .lp-an.lp-in .lp-an-site .lp-cta{
  opacity:1;
  transform:none
}

.lp-page .lp-an-site .lp-link{
  margin-top:11px;
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  font-weight:700;
  color:var(--muted);
  background:var(--sheet-2);
  border:1.5px dashed var(--accent-line);
  border-radius:8px;
  padding:9px 10px;
  opacity:0;
  transform:translateY(-8px)
}

.lp-page .lp-an.lp-in .lp-an-site .lp-link{
  opacity:1;
  transform:none
}

.lp-page .lp-an-site .lp-link b{
  color:var(--accent-ink);
  font-weight:800
}

.lp-page .lp-an-stat .lp-bub{
  background:var(--dark);
  color:var(--on-dark);
  border-radius:14px 14px 14px 4px;
  padding:10px 12px;
  font-size:11px;
  line-height:1.5;
  max-width:88%;
  opacity:0;
  transform:translateY(8px) scale(.97)
}

.lp-page .lp-an.lp-in .lp-an-stat .lp-bub{
  opacity:1;
  transform:none
}

.lp-page .lp-an-stat .lp-bub b{
  display:block;
  font-size:8.5px;
  opacity:.6;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:4px
}

.lp-page .lp-an-stat .lp-rep{
  margin:8px 0 14px auto;
  background:var(--accent);
  color:var(--on-accent);
  border-radius:14px 14px 4px 14px;
  padding:8px 12px;
  font-size:11px;
  font-weight:700;
  width:-moz-max-content;
  width:max-content;
  opacity:0;
  transform:translateY(8px) scale(.97)
}

.lp-page .lp-an.lp-in .lp-an-stat .lp-rep{
  opacity:1;
  transform:none
}

.lp-page .lp-an-stat .lp-k2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}

.lp-page .lp-an-stat .lp-k2 > div{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:11px;
  padding:12px
}

.lp-page .lp-an-stat .lp-lb{
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted)
}

.lp-page .lp-an-stat .lp-vl{
  font-size:30px;
  font-weight:800;
  letter-spacing:-.035em;
  margin-top:4px;
  color:var(--ink);
  line-height:1.05;
  font-variant-numeric:tabular-nums
}

.lp-page .lp-an-stat .lp-dl{
  font-size:10.5px;
  font-weight:800;
  margin-top:3px;
  color:var(--s-ok)
}

.lp-page .lp-an-stat .lp-chart{
  margin-top:14px;
  display:flex;
  align-items:flex-end;
  gap:5px;
  height:86px;
  padding-top:10px;
  border-bottom:1px solid var(--line)
}

.lp-page .lp-an-stat .lp-chart i{
  flex:1;
  background:var(--accent-line);
  border-radius:4px 4px 0 0;
  height:0;
  transition:height .9s var(--e-out);
  transition-delay:calc(var(--i)*.07s + .3s)
}

.lp-page .lp-an-stat .lp-chart i.lp-hi{
  background:linear-gradient(180deg,var(--accent),var(--accent-deep))
}

.lp-page .lp-an.lp-in .lp-an-stat .lp-chart i{
  height:var(--h)
}

.lp-page .lp-an-stat .lp-lg{
  display:flex;
  justify-content:space-between;
  font-size:9.5px;
  color:var(--muted);
  font-weight:700;
  margin-top:6px
}

.lp-page .lp-plans{
  display:grid;
  gap:12px;
  margin-top:20px
}

.lp-page .lp-plan{
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:22px 20px;
  position:relative;
  box-shadow:0 1px 0 color-mix(in srgb,var(--belo) 70%,transparent) inset, 0 16px 34px -28px color-mix(in srgb,var(--senka-topla) 50%,transparent)
}

.lp-page .lp-plan.lp-best{
  background:var(--accent-softer);
  border-color:var(--accent-line);
  box-shadow:0 0 0 1.5px var(--accent-line),
  0 20px 44px -26px var(--accent-glow)
}

.lp-page .lp-plan .lp-nm{
  font-family:var(--font-naslov);
  font-size:25px;
  font-weight:600
}

.lp-page .lp-plan .lp-for{
  font-size:13px;
  color:var(--muted);
  margin:3px 0 14px;
  line-height:21px;
  font-weight:500
}

.lp-page .lp-plan .lp-pr{
  font-size:38px;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.05;
  font-variant-numeric:tabular-nums
}

.lp-page .lp-plan .lp-pu{
  font-size:12.5px;
  color:var(--muted);
  margin-top:4px;
  font-weight:600;
  line-height:18px
}

.lp-page .lp-plan ul{
  list-style:none;
  margin:14px 0 0;
  padding:12px 0 0;
  border-top:1px solid var(--line)
}

.lp-page .lp-plan li{
  font-size:14px;
  line-height:32px;
  color:var(--ink-2);
  padding-left:24px;
  position:relative;
  font-weight:500;
  border-bottom:1px solid var(--rule)
}

.lp-page .lp-plan li:last-child{
  border-bottom:0
}

.lp-page .lp-plan li::before{
  content:"✓";
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:800
}

.lp-page .lp-plan .lp-btn{
  margin-top:18px
}

.lp-page .lp-badge{
  position:absolute;
  top:-10px;
  right:18px;
  background:var(--accent);
  color:var(--on-accent);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:5px 10px;
  border-radius:var(--r-full)
}

.lp-page .lp-toggle{
  display:inline-flex;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-full);
  padding:3px;
  gap:2px;
  align-items:center
}

.lp-page .lp-toggle button{
  border:0;
  background:transparent;
  padding:9px 16px;
  border-radius:var(--r-full);
  font-weight:800;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  transition:color .2s
}

.lp-page .lp-toggle button[aria-pressed=true]{
  background:var(--accent);
  color:var(--on-accent)
}

.lp-page .lp-toggle .lp-sv{
  font-size:10px;
  font-weight:800;
  color:var(--s-ok);
  background:var(--s-ok-bg);
  border-radius:var(--r-full);
  padding:5px 9px;
  margin:0 6px 0 3px;
  white-space:nowrap
}

.lp-page .lp-faq details{
  border-top:1px solid var(--line-2)
}

.lp-page .lp-faq details:last-of-type{
  border-bottom:1px solid var(--line-2)
}

.lp-page .lp-faq summary{
  list-style:none;
  cursor:pointer;
  padding:15px 46px 15px 0;
  font-weight:700;
  font-size:16px;
  line-height:26px;
  position:relative;
  -webkit-tap-highlight-color:transparent
}

.lp-page .lp-faq summary::-webkit-details-marker{
  display:none
}

.lp-page .lp-faq summary::after,.lp-page .lp-faq summary::before{
  content:"";
  position:absolute;
  right:8px;
  background:var(--accent);
  transition:transform .3s var(--e-out);
  border-radius:2px
}

.lp-page .lp-faq summary::after{
  top:26px;
  width:13px;
  height:2px;
  right:8px
}

.lp-page .lp-faq summary::before{
  top:20px;
  width:2px;
  height:14px;
  right:13.5px
}

.lp-page .lp-faq details[open] summary::before{
  transform:scaleY(0)
}

.lp-page .lp-faq p{
  margin:0 8px 18px 0;
  font-size:15px;
  line-height:var(--rh);
  color:var(--ink-2)
}

.lp-page .lp-close{
  background:var(--dark);
  color:var(--on-dark);
  padding-block:44px;
  margin-top:calc(var(--rh)*1.5);
  position:relative;
  overflow:hidden
}

.lp-page .lp-close::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(to bottom,transparent 0 calc(var(--rh) - 1px),
    color-mix(in srgb,var(--on-dark) 11%,transparent) calc(var(--rh) - 1px) var(--rh))
}

.lp-page .lp-close::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:18px;
  width:1.5px;
  background:var(--margin);
  opacity:.5
}

.lp-page .lp-close .lp-wrap{
  position:relative;
  z-index:1
}

.lp-page .lp-close h2{
  color:var(--on-dark);
  font-size:clamp(26px,7.6cqw,36px);
  line-height:1.14
}

.lp-page .lp-close p{
  color:color-mix(in srgb,var(--on-dark) 66%,transparent);
  font-size:16px;
  line-height:var(--rh);
  margin-top:12px
}

.lp-page .lp-close .lp-btn{
  margin-top:22px
}

.lp-page .lp-foot{
  padding-block:24px 30px;
  font-size:12.5px;
  color:var(--muted);
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  font-weight:600;
  line-height:26px
}

.lp-page .lp-stick{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:60;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 90%,var(--belo));
  -webkit-backdrop-filter:blur(12px);
          backdrop-filter:blur(12px);
  border-top:1px solid var(--line-2);
  box-shadow:0 -8px 24px -16px color-mix(in srgb,var(--senka) 50%,transparent);
  transform:translateY(120%);
  transition:transform .45s var(--e-out)
}

.lp-page .lp-stick.lp-on{
  transform:none
}

.lp-page .lp-stick .lp-btn{
  height:52px
}

.lp-page .lp-stick span{
  display:block;
  text-align:center;
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  margin-top:5px
}

@keyframes lp_prog{
  to{
    width:100%
  }
}

@keyframes lp_sIn{
  from{
    opacity:0;
    transform:translateX(16px)
  }

  to{
    opacity:1;
    transform:none
  }
}

@keyframes lp_sIO{
  0%{
    opacity:0;
    transform:translateX(16px)
  }

  5%,30%{
    opacity:1;
    transform:none
  }

  36%,100%{
    opacity:0;
    transform:translateX(-16px)
  }
}

@keyframes lp_sIO2{
  0%,31%{
    opacity:0;
    transform:translateX(16px)
  }

  38%,62%{
    opacity:1;
    transform:none
  }

  68%,100%{
    opacity:0;
    transform:translateX(-16px)
  }
}

@media (min-width:1024px){
  .lp-page::before{
    left:calc(50% - 560px - var(--marg))
  }

  .lp-page .lp-wrap{
    width:min(1120px,100% - 80px);
    margin-inline:auto;
    padding-inline:0
  }

  .lp-page .lp-nav .lp-nrow{
    height:70px;
    gap:22px
  }

  .lp-page .lp-nav .lp-lk{
    display:inline
  }

  .lp-page .lp-hero{
    padding-top:52px
  }

  .lp-page .lp-hero .lp-grid{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    gap:52px;
    align-items:center
  }

  .lp-page .lp-hero h1{
    font-size:clamp(44px,4.6cqw,62px)
  }

  .lp-page .lp-hero .lp-lead{
    font-size:18px;
    max-width:48ch
  }

  .lp-page .lp-hero .lp-cta{
    flex-direction:row
  }

  .lp-page .lp-hero .lp-cta .lp-btn{
    width:auto;
    min-width:210px
  }

  .lp-page .lp-scene{
    margin:0;
    padding:0;
    min-height:560px
  }

  .lp-page .lp-note{
    width:300px;
    max-width:none
  }

  .lp-page .lp-app{
    width:330px;
    margin:-150px -10px 0 auto
  }

  .lp-page .lp-arrow{
    right:196px;
    top:-14px;
    width:150px;
    height:132px
  }

  .lp-page .lp-sect{
    padding-block:calc(var(--rh)*2)
  }

  .lp-page .lp-sect h2{
    font-size:clamp(30px,3.4cqw,42px)
  }

  .lp-page .lp-ba{
    grid-template-columns:1fr 1fr;
    gap:16px
  }

  .lp-page .lp-feat{
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:48px;
    align-items:center;
    padding:calc(var(--rh)*1.5) 0
  }

  .lp-page .lp-feat .lp-an{
    margin-top:0
  }

  .lp-page .lp-feat.lp-rev .lp-txt{
    order:2
  }

  .lp-page .lp-feat h3{
    font-size:clamp(24px,2.7cqw,31px)
  }

  .lp-page .lp-feat p{
    max-width:44ch
  }

  .lp-page .lp-plans{
    grid-template-columns:repeat(3,1fr);
    gap:14px
  }

  .lp-page .lp-plan{
    padding:26px 22px
  }

  .lp-page .lp-close{
    padding-block:calc(var(--rh)*2.2)
  }

  .lp-page .lp-close h2{
    font-size:clamp(30px,3.6cqw,44px)
  }

  .lp-page .lp-stick{
    display:none
  }

  .lp-page .lp-an-cal .lp-cols{
    grid-template-columns:30px 1fr 1fr 1fr
  }

  .lp-page .lp-hide-desk{
    display:none
  }
}

@media (max-width:1023.98px){
  .lp-page .lp-stick{
    position:sticky;
    bottom:0;
    margin-top:-84px
  }

  .lp-page .lp-only-desk{
    display:none
  }
}

@media (prefers-reduced-motion:reduce){
  .lp-page .lp-rv,.lp-page .lp-ln > span,.lp-page .lp-hl{
    opacity:1!important;
    transform:none!important;
    background-size:100% 100%!important;
    transition:none!important
  }

  .lp-page *,.lp-page *::before,.lp-page *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important
  }
}

@keyframes lp_strelica{
  from{
    stroke-dashoffset:200
  }

  to{
    stroke-dashoffset:0
  }
}

/* Bez skripta (vidi zaglavlje bloka): sklopka je radio + label, traka se lepi u omotaču. */

.lp-page .lp-toggle input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none
}

.lp-page .lp-toggle label{
  border:0;
  background:transparent;
  padding:9px 16px;
  border-radius:var(--r-full);
  font-weight:800;
  font-size:13px;
  color:var(--muted);
  cursor:pointer;
  transition:color .2s
}

.lp-page .lp-toggle input:checked + label{
  background:var(--accent);
  color:var(--on-accent)
}

.lp-page .lp-toggle input:focus-visible + label{
  outline:2px solid var(--accent-ink);
  outline-offset:2px
}

.lp-page .lp-y{
  display:none
}

.lp-page:has(#lp-per-y:checked) .lp-y{
  display:inline
}

.lp-page:has(#lp-per-y:checked) .lp-m{
  display:none
}

.lp-page .lp-stick.lp-on{
  transform:none
}

.lp-page .lp-demo-f{
  display:contents
}

/* Predložak ima `overflow-x:hidden` na `#v-land`; to od `.lp-page` pravi kontejner za klizanje,
   pa se `sticky` traka veže za njega i nikad se ne zalepi (izmereno: stoji na 7841px dok se
   ne doskroluje). `clip` seče isto, a kontejner ne pravi. */

.lp-page{
  overflow-x:clip
}

.lp-page button.lp-btn{
  font-family:inherit
}

/* Logo je ovde link na početnu (u predlošku `div`); znak (`partials/logo.njk`) ne sme da se skuplja
   kad traka na telefonu ostane bez mesta — ispod 140 px vodoravni logo se ne crta (PROCITAJ §4). */

.lp-page .lp-nav a.lp-logo{
  flex:none
}

/* G-02: izbor delatnosti na `/za/*`. Predložak tog bloka nema (nema ni te strane), pa su
   mere uzete iz njegovih značaka poverenja (`.lp-trust`): ista visina, ista pilula, isti
   ritam — samo što su ovo linkovi, pa nose i stanje „ova strana". Meta na dodir je 44px. */

.lp-page .lp-cipovi{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px
}

.lp-page .lp-cipovi a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  border-radius:var(--r-full);
  font-size:13.5px;
  font-weight:800;
  text-decoration:none;
  color:var(--accent-ink);
  background:var(--accent-soft)
}

.lp-page .lp-cipovi a:hover{
  background:var(--accent-softer);
  box-shadow:inset 0 0 0 1.5px var(--accent-line)
}

.lp-page .lp-cipovi a[aria-current=page]{
  background:var(--accent);
  color:var(--on-accent)
}

.lp-page .lp-cipovi a.lp-sve{
  background:transparent;
  color:var(--muted);
  box-shadow:inset 0 0 0 1.5px var(--line-2)
}

/* G-05: „Poverenje" nosi iste kartice i harmonike, ali sa tekstom umesto spiska u kartici i
   sa nabrajanjem unutar odgovora. Mere su iz `.lp-card li` i `.lp-faq p`, da ritam ostane isti. */

.lp-page .lp-card p{
  font-size:15px;
  line-height:30px;
  color:var(--ink-2);
  margin:6px 0 0
}

.lp-page .lp-card h3,.lp-page .lp-card .lp-knas{
  font-size:19px;
  line-height:1.3;
  margin-bottom:4px
}

.lp-page .lp-card ul li{
  padding-left:26px
}

.lp-page .lp-card ul li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--muted)
}

.lp-page .lp-faq ul{
  margin:8px 0 0;
  padding:0;
  list-style:none
}

.lp-page .lp-faq li{
  font-size:15px;
  line-height:var(--rh);
  color:var(--ink-2);
  padding-left:26px;
  position:relative
}

.lp-page .lp-faq li::before{
  content:"·";
  position:absolute;
  left:8px;
  color:var(--accent);
  font-weight:800
}

.lp-page .lp-faq strong{
  color:var(--ink);
  font-weight:800
}

.lp-page .lp-dl{
  display:grid;
  gap:12px 28px;
  margin:14px 0 0
}

.lp-page .lp-dl dt{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted)
}

.lp-page .lp-dl dd{
  margin:2px 0 0;
  font-size:15px;
  color:var(--ink-2);
  font-weight:600
}

@media (min-width:1024px){
  .lp-page .lp-dl{
    grid-template-columns:1fr 1fr
  }
}

/* G-04: izlog dizajna (`/primeri`). Stil je prešao iz ugrađenog `\3c style>` bloka u šablonu,
   gde je nosio heks boje (`#1b1a18`, `rgba(27,26,24,…)`, `#ffffff`), na tokene — ista pravila,
   iste mere, samo bez ijedne boje u komponenti. Kartica je „mali sajt": skeleton gore
   (`.lay-thumb`), ime i tema, pa tačke drugih tema. Mreža broj kolona bira po širini, bez
   preloma po ekranu; na 390 to je jedna kolona. */

.lp-page .lp-izl-mreza{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(14.5rem,1fr));
  gap:16px;
  margin-top:20px
}

.lp-page .lp-izl{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--sheet);
  box-shadow:0 1px 0 color-mix(in srgb,var(--belo) 70%,transparent) inset, 0 14px 30px -24px color-mix(in srgb,var(--senka-topla) 55%,transparent);
  transition:transform .35s var(--e-out), box-shadow .35s, border-color .35s
}

.lp-page .lp-izl:hover{
  transform:translateY(-4px);
  border-color:var(--line-2);
  box-shadow:0 24px 48px -24px color-mix(in srgb,var(--senka) 45%,transparent)
}

.lp-page .lp-izl-a{
  display:block;
  color:inherit;
  text-decoration:none
}

.lp-page .lp-izl-a .lay-thumb{
  border-radius:0;
  border-bottom:1px solid var(--line)
}

.lp-page .lp-izl-meta{
  display:block;
  padding:13px 15px 2px
}

.lp-page .lp-izl-red{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px
}

.lp-page .lp-izl-ime{
  font-size:15px;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--ink)
}

.lp-page .lp-izl-tema{
  flex:none;
  font-size:11px;
  color:var(--muted-2);
  font-weight:700
}

.lp-page .lp-izl-sub{
  display:block;
  margin-top:3px;
  font-size:12.5px;
  line-height:1.45;
  color:var(--muted);
  font-weight:600
}

.lp-page .lp-izl-open{
  display:inline-block;
  margin-top:7px;
  font-size:12px;
  font-weight:800;
  color:var(--accent-ink);
  opacity:0;
  transform:translateX(-4px);
  transition:opacity .25s ease, transform .25s ease
}

.lp-page .lp-izl:hover .lp-izl-open{
  opacity:1;
  transform:none
}

@media (hover:none){
  .lp-page .lp-izl-open{
    opacity:1;
    transform:none
  }
}

.lp-page .lp-izl-tacke{
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 15px 14px;
  margin-top:auto
}

.lp-page .lp-izl-tacke a{
  flex:none;
  height:17px;
  width:17px;
  border-radius:var(--r-full);
  border:1px solid var(--line-2);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--belo) 25%,transparent);
  transition:transform .15s ease, box-shadow .2s ease
}

.lp-page .lp-izl-tacke a:hover{
  transform:scale(1.22);
  box-shadow:0 0 0 2px var(--sheet), 0 0 0 3.5px var(--line-2)
}

.lp-page .lp-izl-tacke span{
  margin-left:auto;
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted-2);
  white-space:nowrap;
  font-weight:800
}

/* O-81: podnožje sa kolonama „Za koga" (šest branši) i „Primeri". Predložak ovog dela
   nema; mere su iz njegovog podnožja (\`.lp-foot\`: 12,5px, 26px red, \`--muted\`) i kicker-a
   (natpis kolone), da ritam ostane isti. Red od 26px + padding daje metu od 44px na dodir. */

.lp-page .lp-fkol{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 28px;
  padding-top:28px;
  border-top:1px solid var(--line-2);
  margin-top:calc(var(--rh)*1.5)
}

.lp-page .lp-fnas{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-ink);
  line-height:var(--rh)
}

.lp-page .lp-fkol ul{
  list-style:none;
  margin:0;
  padding:0
}

.lp-page .lp-fkol a{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--ink-2);
  text-decoration:none;
  padding:9px 0;
  line-height:26px
}

.lp-page .lp-fkol a:hover{
  color:var(--accent-ink);
  text-decoration:underline;
  text-underline-offset:3px
}

@media (min-width:1024px){
  .lp-page .lp-fkol{
    grid-template-columns:repeat(4,1fr)
  }

  .lp-page .lp-fkol a{
    padding:3px 0
  }
}

/* G-06: pravne strane (`/uslovi`, `/privatnost`, `/kontakt`). Strana je OBLIK bez teksta, pa
   ima dva svoja elementa: traku „NACRT" na vrhu i označeno mesto na kom čeka vlasnikov tekst.
   Oboje mora da se RAZLIKUJE od gotovog sadržaja na prvi pogled — nacrt koji liči na gotov
   tekst se posle ne razlikuje od odobrenog (O-80). Zato isprekidan obrub i ukošen tekst, a ne
   kartica. Bez ijedne boje: sve iz tokena. Uz to linkovi u podnožju, koji su do sada bili gol
   tekst jer tih strana nije ni bilo. */

.lp-page .lp-nacrt-traka{
  margin-top:14px;
  padding:11px 14px;
  border:1.5px dashed var(--accent);
  border-radius:var(--r-md);
  background:var(--sheet);
  font-size:13px;
  line-height:21px;
  color:var(--ink-2);
  font-weight:600
}

.lp-page .lp-nacrt-traka b{
  color:var(--accent-ink);
  font-weight:800;
  letter-spacing:.08em
}

.lp-page .lp-nacrt{
  margin-top:16px;
  padding:14px 16px;
  border:1.5px dashed var(--line-2);
  border-radius:var(--r-md)
}

.lp-page .lp-nacrt-n{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted-2);
  line-height:var(--rh)
}

.lp-page .lp-nacrt-p{
  margin:2px 0 0;
  font-size:15px;
  line-height:var(--rh);
  color:var(--muted);
  font-style:italic
}

.lp-page .lp-nacrt-p b{
  color:var(--ink-2);
  font-weight:800;
  font-style:normal
}

/* G-06, drugi krug (20.09.2026): Uslovi i Privatnost su od tog dana TEKST, ne oblik, pa im treba
   običan pasus — dotle je grupa G imala samo kartice i harmoniku. Mere su prepisane iz
   `.lp-faq p` i `.lp-card li`, da ritam strane ostane isti kao na ostatku sajta, a ne nov.
   `:not(.lp-cap)` stoji zato što je i fusnota na dnu `<p>`: bez toga bi je ovo pravilo
   nadjačalo i ona bi prestala da izgleda kao fusnota. Bez ijedne boje: sve iz tokena. */

.lp-page .lp-pravno p:not(.lp-cap){
  margin:12px 0 0;
  font-size:15px;
  line-height:var(--rh);
  color:var(--ink-2)
}

.lp-page .lp-pravno h2+p:not(.lp-cap){
  margin-top:14px
}

.lp-page .lp-pravno p b{
  color:var(--ink);
  font-weight:800
}

.lp-page .lp-pravno .lp-dl{
  margin-top:14px
}

.lp-page .lp-pravno .lp-card{
  margin-top:16px
}

/* Spisak otvorenih pitanja u traci nacrta: isti ritam kao `.lp-card li`, bez tačkice u boji. */

.lp-page .lp-nacrt-lista{
  margin:4px 0 0;
  padding:0;
  list-style:none
}

.lp-page .lp-nacrt-lista li{
  position:relative;
  padding-left:22px;
  font-size:14px;
  line-height:24px;
  color:var(--muted)
}

.lp-page .lp-nacrt-lista li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--muted-2)
}

/* Oznaka uz rečenicu koju nije izrekao vlasnik. Uvučena i sa crtom sa strane, da se
   vidi kojem pasusu pripada — traka na vrhu kaže da ih ima, ovo kaže koja je koja. */

.lp-page .lp-nacrt-pret{
  margin:8px 0 0;
  padding:8px 0 8px 14px;
  border-left:3px dashed var(--line-2);
  font-size:14px;
  line-height:var(--rh);
  color:var(--muted);
  font-style:italic
}

.lp-page .lp-nacrt-pret b{
  color:var(--ink-2);
  font-weight:800;
  font-style:normal
}

.lp-page .lp-foot a{
  color:inherit;
  text-decoration:none;
  padding-block:9px
}

.lp-page .lp-foot a:hover{
  color:var(--accent-ink);
  text-decoration:underline;
  text-underline-offset:3px
}

@media (min-width:1024px){
  .lp-page .lp-foot a{
    padding-block:0
  }
}

/* Diamond kartica na Goldu (docs/PLANOVI.md, odeljak 7): izveštaj na pravim
   podacima salona, iznosi zamućeni. Podaci su salonovi, pa zamućenje nije
   zaštita nego prikaz — ono što se plaća je da se vide i da se upisuje cilj,
   a upis je zatvoren u ruti. */

.primer-mutno .tabular-nums{
  filter:blur(6px);
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.primer-mutno .primer-traka .tabular-nums{
  filter:none
}

/* ===========================================================================
   PAKETI — pravac A „Proba na liniji" (vlasnik 25.09.2026; referenca
   `_supervizor/paketi-A.html`, šablon `pro.njk`, traka probe u `plan-banner.njk`).

   Sve leži na liniji: listovi (`.sheet`) sa redovima koji se završavaju hairline-om
   (`--rule`); unutar lista nema kartica. Brojke su pismo (Newsreader, tabularne
   cifre), jedinica je sitna i siva. Crvena (`--margin`) znači SAMO „danas" (crta u
   traci dana) i ono što STAJE (precrt u redovima „posle"). Akcenat je tema salona.
   Nijedan nov token i nijedna heks vrednost — sve iz postojećih promenljivih
   (straža `web/paketi-a-straza.test.ts`). `--pk-t` je korak pokreta, lokalan za
   stranu: svako kašnjenje je njegov umnožak.
   =========================================================================== */

.pk{
  --pk-t:60ms;
  padding-bottom:24px
}

.pk .pk-sect{
  padding:22px 0 10px 2px
}

.pk .pk-num{
  font-family:var(--font-naslov);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em
}

.pk-poruka{
  margin:0;
  padding:10px 2px;
  border-bottom:1px solid var(--rule);
  font-size:13.5px;
  line-height:1.45;
  color:var(--ink-2);
  font-weight:600
}

.pk-poruka-ne{
  color:var(--s-miss)
}

.pk-k{
  margin:0;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-ink)
}

.pk-h{
  font-family:var(--font-naslov);
  font-weight:600;
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.02em;
  margin:8px 0 6px;
  text-wrap:balance
}

.pk-do{
  font-size:.62em;
  color:var(--muted);
  font-weight:600;
  letter-spacing:0
}

.pk-m{
  margin:0;
  color:var(--muted);
  font-size:13.5px;
  line-height:1.5;
  max-width:58ch
}

/* 2.1 list probe i traka dana ------------------------------------------------ */

.pk-proba,.pk-tvoj{
  padding:18px 18px 16px
}

.pk-days{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(var(--n),1fr);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  position:relative
}

.pk-days i{
  height:36px;
  border-right:1px solid var(--rule);
  display:block;
  position:relative
}

.pk-days i:last-child{
  border-right:0
}

.pk-days i.p::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--accent-soft);
  transform-origin:left
}

.pk-days i.kraj{
  background:repeating-linear-gradient(135deg,transparent 0 5px,var(--rule) 5px 6px)
}

.pk-days .pk-now,.pk-traka-bar .pk-now{
  position:absolute;
  top:-6px;
  bottom:-6px;
  width:0;
  border-left:1.5px solid var(--margin);
  left:var(--now)
}

.pk-days .pk-now::before,.pk-traka-bar .pk-now::before{
  content:"";
  position:absolute;
  top:-3px;
  left:-4.5px;
  width:7.5px;
  height:7.5px;
  border-radius:var(--r-full);
  background:var(--margin)
}

.pk-dlab{
  display:flex;
  justify-content:space-between;
  font-size:11.5px;
  font-weight:700;
  color:var(--muted-2);
  margin-top:7px;
  position:relative;
  min-height:17px
}

.pk-dlab .n{
  position:absolute;
  left:var(--now);
  transform:translateX(-50%);
  color:var(--margin)
}

.pk-profaktura{
  margin-top:14px
}

/* 2.2 šta koristiš u probi ---------------------------------------------------- */

.pk-loss{
  align-items:flex-start;
  padding-top:12px;
  padding-bottom:12px
}

.pk-v{
  font-family:var(--font-naslov);
  font-size:24px;
  font-weight:600;
  min-width:40px;
  text-align:center;
  color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
  white-space:nowrap
}

.pk-l{
  flex:1;
  min-width:0
}

.pk-l b{
  display:block;
  font-size:14.5px;
  font-weight:700
}

.pk-l>span{
  display:block;
  font-size:12.5px;
  color:var(--muted)
}

.pk-posle{
  display:flex!important;
  align-items:baseline;
  gap:10px;
  margin-top:7px;
  padding-top:7px;
  border-top:1px dashed var(--rule);
  font-size:13px!important;
  color:var(--ink)!important;
  font-weight:600
}

.pk-posle i{
  font-style:normal;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted-2);
  white-space:nowrap
}

.pk-posle s{
  text-decoration:none;
  position:relative
}

/* Precrt stoji UVEK (i bez pokreta): on je poruka „ovo staje", ne ukras uvoda. */

.pk-posle s::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:55%;
  height:1.5px;
  background:var(--margin);
  transform-origin:left
}

/* 2.3 izaberi paket ---------------------------------------------------------- */

.pk-seg{
  display:inline-flex;
  background:var(--sheet-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:3px;
  gap:2px;
  position:relative
}

.pk-seg a{
  border-radius:6px;
  padding:7px 12px;
  font-size:13px;
  font-weight:700;
  color:var(--muted);
  position:relative;
  z-index:1;
  min-height:36px;
  display:inline-flex;
  align-items:center
}

.pk-seg a[aria-pressed="true"]{
  color:var(--ink);
  background:var(--sheet);
  box-shadow:0 1px 2px color-mix(in srgb,var(--senka) 18%,transparent)
}

.pk-seg em{
  font-style:normal;
  color:var(--accent-ink);
  font-weight:800;
  margin-left:4px
}

.pk-seg .pk-thumb{
  position:absolute;
  top:3px;
  bottom:3px;
  left:0;
  width:0;
  background:var(--sheet);
  border-radius:6px;
  box-shadow:0 1px 2px color-mix(in srgb,var(--senka) 18%,transparent)
}

/* Bez skripte pritisnuto dugme nosi svoju pozadinu; sa skriptom je nosi palac koji klizi. */

.pk-seg.pk-js a[aria-pressed="true"]{
  background:transparent;
  box-shadow:none
}

.pk-seg a:focus-visible,.pk-pick:has(input:focus-visible),.pk-plati:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:-2px
}

.pk-plans{
  margin-top:10px;
  display:block
}

.pk-pick{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:76px;
  padding:14px 16px;
  border-bottom:1px solid var(--rule);
  cursor:pointer;
  position:relative
}

.pk-pick input{
  position:absolute;
  opacity:0;
  pointer-events:none
}

.pk-pick:has(input:checked){
  background:var(--accent-softer)
}

.pk-dot{
  width:20px;
  height:20px;
  border-radius:var(--r-full);
  border:2px solid var(--line-2);
  flex:none;
  display:grid;
  place-items:center;
  background:var(--sheet)
}

.pk-dot::after{
  content:"";
  width:10px;
  height:10px;
  border-radius:var(--r-full);
  background:var(--accent);
  transform:scale(0)
}

.pk-pick:has(input:checked) .pk-dot{
  border-color:var(--accent)
}

.pk-pick:has(input:checked) .pk-dot::after{
  transform:scale(1)
}

.pk-pl{
  flex:1;
  min-width:0
}

.pk-nm{
  font-family:var(--font-naslov);
  font-size:21px;
  font-weight:600;
  letter-spacing:-.01em
}

.pk-tag{
  display:inline-block;
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
  border-radius:var(--r-xs);
  padding:2px 6px;
  background:var(--accent-soft);
  color:var(--accent-ink);
  vertical-align:3px;
  margin-left:6px
}

.pk-tag-tvoj{
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--line-2);
  color:var(--muted)
}

.pk-kome{
  display:block;
  font-size:12.5px;
  color:var(--muted);
  margin-top:1px
}

.pk-pr{
  text-align:right;
  flex:none
}

.pk-pr b{
  font-family:var(--font-naslov);
  font-size:24px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  display:block;
  line-height:1.1;
  white-space:nowrap
}

.pk-pr span{
  display:block;
  font-size:11.5px;
  color:var(--muted);
  font-weight:600;
  white-space:nowrap
}

.pk-pr em{
  display:block;
  font-style:normal;
  font-size:11.5px;
  font-weight:800;
  color:var(--s-ok);
  overflow:hidden;
  max-height:18px;
  white-space:nowrap
}

.pk[data-period="godisnje"] .pk-jed-mes,.pk[data-period="mesecno"] .pk-jed-god{
  display:none
}

.pk[data-period="mesecno"] .pk-usteda{
  max-height:0;
  opacity:0
}

.pk-incl{
  display:grid;
  grid-template-rows:0fr;
  background:var(--accent-softer);
  border-bottom:1px solid transparent
}

.pk-incl>div{
  overflow:hidden;
  min-height:0
}

.pk-pick:has(input:checked)+.pk-incl{
  grid-template-rows:1fr;
  border-bottom-color:var(--rule)
}

.pk-incl ul{
  margin:0;
  padding:2px 16px 14px 50px
}

.pk-incl li{
  list-style:none;
  position:relative;
  padding:7px 0 7px 18px;
  border-bottom:1px dashed var(--rule);
  font-size:13.5px;
  line-height:1.45
}

.pk-incl li:last-child{
  border-bottom:0
}

.pk-incl li::before{
  content:"";
  position:absolute;
  left:0;
  top:13px;
  width:8px;
  height:4px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg)
}

.pk-plus{
  margin:0;
  padding:4px 16px 0 50px;
  font-size:12px;
  font-weight:700;
  color:var(--muted-2)
}

.pk-margina{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 10px;
  padding:4px 16px 8px 50px
}

.pk-margina span:last-child{
  font-size:11.5px;
  font-weight:600;
  color:var(--muted-2)
}

.pk-hand{
  font-family:var(--font-rukopis);
  font-size:22px;
  line-height:1;
  color:var(--accent-ink);
  font-weight:500
}

.pk-free{
  display:flex;
  align-items:baseline;
  gap:12px;
  padding:14px 16px;
  color:var(--muted);
  font-size:13.5px
}

.pk-free b{
  font-family:var(--font-naslov);
  font-size:18px;
  color:var(--ink-2);
  font-weight:600
}

.pk-bezjs{
  padding:0 16px 14px
}

.pk-note{
  font-size:12.5px;
  color:var(--muted);
  margin:12px 2px 0;
  line-height:1.5
}

.pk-pomoc a{
  color:var(--accent-ink);
  text-decoration:underline;
  text-underline-offset:2px
}

/* 2.4 traka za plaćanje: lepljiva u skroleru, pa je na telefonu iznad donje trake. */

.pk-pay{
  position:sticky;
  bottom:12px;
  margin-top:18px;
  background:var(--dark);
  color:var(--on-dark);
  border-radius:var(--r-md);
  padding:12px 12px 12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  z-index:3;
  box-shadow:0 16px 30px -18px color-mix(in srgb,var(--senka) 70%,transparent)
}

.pk-pay[hidden]{
  display:none
}

.pk-pay-l{
  flex:1;
  min-width:0
}

.pk-pay-l>span{
  display:block;
  font-size:11.5px;
  font-weight:700;
  opacity:.75
}

.pk-pay-l b{
  display:block;
  font-family:var(--font-naslov);
  font-size:22px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  transform-origin:left center;
  white-space:nowrap
}

.pk-pay .pk-doplata{
  opacity:.85
}

.pk-pay .pk-doplata[hidden]{
  display:none
}

.pk-plati{
  flex:none;
  height:44px;
  padding:0 14px;
  font-size:14px
}

/* tok uplate: list na liniji --------------------------------------------------- */

.pk-uplata{
  scroll-margin-top:12px
}

.pk-uplata-list{
  margin-top:14px
}

.pk-uplata-hd .pk-l b{
  font-size:15px
}

.pk-uplata-iznos{
  flex:none;
  white-space:nowrap;
  font-size:12px;
  font-weight:700;
  color:var(--muted)
}

.pk-uplata-iznos .pk-num{
  font-size:20px;
  color:var(--ink)
}

.pk-uplata-telo{
  padding:14px 16px;
  text-align:center;
  border-bottom:1px solid var(--rule)
}

.pk-qr{
  display:block;
  margin:0 auto;
  width:100%;
  max-width:240px;
  height:auto
}

.pk-kopiraj{
  margin-top:12px
}

.pk-uplata-dugmad{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px
}

.pk-sitno{
  margin:8px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--muted)
}

.pk-bez-qr{
  color:var(--s-miss)
}

.pk-polja{
  margin:0
}

.pk-polja .row{
  min-height:44px;
  padding:6px 16px;
  justify-content:space-between;
  font-size:13px
}

.pk-polja dt{
  color:var(--muted);
  flex:none
}

.pk-polja dd{
  margin:0;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
  font-weight:700
}

.pk-polja dd>span{
  overflow-wrap:anywhere;
  text-align:right
}

.pk-polja .pk-tab{
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.pk-kopiraj-polje{
  width:32px;
  height:32px;
  flex:none;
  border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:12px
}

.pk-svrha{
  padding:0 16px 14px;
  text-align:left
}

/* 2.5 tvoj paket i kvota termina (upozorenje `--s-wait`, popunjeno `--s-miss`) --- */

.pk-proba-btn{
  margin-top:12px
}

/* Free: izbor radnika koji prima nove termine (20260927_1400) — čipovi na liniji, bez nove boje. */

.pk-radnici{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--rule)
}

.pk-radnici-izbor{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 10px
}

.pk-radnik{
  min-height:44px;
  padding:0 14px;
  border-radius:var(--r-full);
  font-size:13.5px;
  font-weight:700;
  color:var(--ink-2);
  background:var(--sheet);
  box-shadow:inset 0 0 0 1px var(--line-2)
}

.pk-radnik.on{
  background:var(--accent-soft);
  color:var(--accent-ink);
  box-shadow:inset 0 0 0 1.5px var(--accent-line)
}

.pk-radnik:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px
}

/* Isti izbor u modalu termina: radnik koji na Free-u ne prima nove termine izgleda ZAKLJUČANO, ne samo ne reaguje. */

.opts button.zakljucan{
  color:var(--muted-2);
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--rule);
  cursor:not-allowed
}

.pk-kvota{
  margin-top:14px
}

.pk-kvota-r{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin:0 0 8px;
  font-size:13.5px;
  color:var(--muted);
  font-weight:600
}

.pk-kvota-r .pk-num{
  font-size:20px;
  color:var(--ink)
}

.pk-kvota-o{
  font-size:12px;
  font-weight:800;
  color:var(--muted-2);
  white-space:nowrap
}

.pk-kvota.upoz .pk-kvota-o{
  color:var(--s-wait)
}

.pk-kvota.puna .pk-kvota-o{
  color:var(--s-miss)
}

.pk-bar{
  height:6px;
  border-radius:var(--r-full);
  background:var(--rule);
  overflow:hidden;
  margin-bottom:8px
}

.pk-bar i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:var(--muted-2)
}

.pk-kvota.upoz .pk-bar i{
  background:var(--s-wait)
}

.pk-kvota.puna .pk-bar i{
  background:var(--s-miss)
}

/* 2.6 traka probe na OSTALIM stranama: tiha linija na papiru ------------------- */

.pk-traka{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px;
  padding:10px 2px 12px;
  border-bottom:1px solid var(--line)
}

.pk-traka-r{
  flex:1 1 200px;
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 10px
}

.pk-traka-k{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-ink)
}

.pk-traka-v{
  font-family:var(--font-naslov);
  font-size:20px;
  font-weight:600;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.pk-traka-m{
  font-size:12px;
  font-weight:600;
  color:var(--muted)
}

.pk-traka-s{
  order:2;
  flex:1 0 100%;
  font-size:12px;
  line-height:1.45;
  color:var(--muted);
  margin-top:-4px
}

.pk-traka-bar{
  order:3;
  flex:1 0 100%;
  position:relative;
  height:3px;
  border-radius:var(--r-full);
  background:var(--rule)
}

.pk-traka-bar i{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:var(--now);
  border-radius:inherit;
  background:var(--accent-line)
}

.pk-traka-bar .pk-now{
  top:-4px;
  bottom:-4px
}

.pk-traka-bar .pk-now::before{
  display:none
}

.pk-traka-a{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  flex:none
}

/* desktop: dve kolone (sadržaj ima svoj prelom, odluka 14 dozvoljava) ---------- */

@media (min-width:900px){
  .pk-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:0 28px;
    align-items:start
  }

  .pk-grid>div:first-child .pk-proba,.pk-grid>div:first-child .pk-tvoj{
    margin-top:22px
  }

  .pk-h{
    font-size:36px
  }

  .pk-pay{
    bottom:18px
  }
}

/* POKRET — svaki objašnjava nešto; uz `prefers-reduced-motion` ništa od ovoga ne važi,
   a uvod ni ne počinje (`paketi.uvod` u public/app.js). -------------------------- */

@media (prefers-reduced-motion:no-preference){
  .pk-seg a{
    transition:color .2s
  }

  .pk-seg .pk-thumb{
    transition:transform .35s var(--e-out),width .35s var(--e-out)
  }

  .pk-pick{
    transition:background .3s var(--e-out)
  }

  .pk-dot{
    transition:border-color .2s
  }

  .pk-dot::after{
    transition:transform .3s var(--e-spring)
  }

  .pk-pr em{
    transition:max-height .35s var(--e-out),opacity .25s
  }

  .pk-incl{
    transition:grid-template-rows .4s var(--e-out)
  }

  .pk-go .pk-days i.p::after{
    animation:pk-puni .32s var(--e-out) both;
    animation-delay:calc(var(--i) * var(--pk-t))
  }

  .pk-go .pk-days .pk-now,.pk-go .pk-dlab .n{
    animation:pk-dodji .7s var(--e-out) both;
    animation-delay:calc(var(--np) * var(--pk-t))
  }

  .pk-go .pk-proba .pk-h,.pk-go .pk-proba .pk-m{
    animation:pk-gore .5s var(--e-out) both
  }

  .pk-go .pk-proba .pk-m{
    animation-delay:calc(2 * var(--pk-t))
  }

  .pk-go .pk-loss{
    animation:pk-gore .45s var(--e-out) both;
    animation-delay:calc((var(--np) + 4 + var(--j) * 3) * var(--pk-t))
  }

  .pk-go .pk-posle{
    animation:pk-otkrij .5s var(--e-out) both;
    animation-delay:calc((var(--np) + 12 + var(--j) * 3) * var(--pk-t))
  }

  .pk-go .pk-posle s::after{
    animation:pk-crta .4s var(--e-out) both;
    animation-delay:calc((var(--np) + 16 + var(--j) * 3) * var(--pk-t))
  }

  .pk-go .pk-pay{
    animation:pk-izroni .55s var(--e-out) both;
    animation-delay:calc((var(--np) + 6) * var(--pk-t))
  }

  .pk-klim{
    animation:pk-klim .45s var(--e-spring)
  }
}

@keyframes pk-puni{
  from{
    transform:scaleX(0)
  }
}

@keyframes pk-dodji{
  from{
    left:0;
    opacity:0
  }
}

@keyframes pk-gore{
  from{
    opacity:0;
    transform:translateY(8px)
  }
}

@keyframes pk-otkrij{
  from{
    opacity:0;
    clip-path:inset(0 100% 0 0)
  }

  to{
    opacity:1;
    clip-path:inset(0 0 0 0)
  }
}

@keyframes pk-crta{
  from{
    transform:scaleX(0)
  }
}

@keyframes pk-izroni{
  from{
    opacity:0;
    transform:translateY(24px)
  }
}

@keyframes pk-klim{
  0%{
    transform:scale(1)
  }

  40%{
    transform:scale(1.06)
  }

  100%{
    transform:scale(1)
  }
}

/* KRAJ PAKETA */

/* ═══════════════════════════════════════════════════════════════════════
   e-Rokovnik · admin panel platforme — sloj komponenti
   ───────────────────────────────────────────────────────────────────────
   NE UVODI NIJEDAN NOVI TOKEN. Sve boje, radijusi i pisma dolaze iz
   postojećeg app.css. Ako neki od tokena ispod ne postoji u app.css,
   to je greška u ovom fajlu — prijavi je, nemoj dodavati token.

   Korišćeni tokeni i uloga koju imaju u panelu:
     --paper        podloga oko tabaka
     --paper-deep   (ne koristi se ovde; rezervisan za dublju hartiju)
     --sheet        radna površina tabaka
     --sheet-2      utisnute površine: pretraga, traka naplate, filteri
     --line         glavna linija (1px) između sekcija i iznad tabela
     --line-2       ivica tabaka i dugmadi
     --rule         vlas između redova u tabeli i listama
     --rule-2       (ne koristi se)
     --ink          osnovni tekst i brojke
     --ink-2        tekst na dugmadi i u spojenim prekidačima
     --muted        sekundarni tekst (grad, vlasnik, napomene)
     --muted-2      plan u tabeli, zaglavlja kolona
     --faint        etikete verzalom
     --dark         leva ivica knjige
     --on-dark      tekst na levoj ivici
     --accent       jedina akcenatska boja: primarna radnja, aktivna stavka,
                    traka goriva, fokus
     --accent-ink / --accent-soft / --accent-softer / --accent-line / --accent-wash
                    izvedene iz --accent preko color-mix; DEKLARISANE NA body,
                    ne na :root — na :root se zamrznu i prestanu da prate temu
     --s-ok / --s-wait / --s-miss (+ -bg)  statusi; globalni i semantički,
                    tema menja akcenat i neutrale, NIKAD značenje
     --r-xs/-sm/-md/-lg/-full  radijusi
     --font-naslov  Newsreader — naslovi i SVE brojke
     --admin-ui     lokalni alias panela za pismo tela; NIJE iz app.css, deklarisan
                    samo na .admin (jedina linija koja se menja ako panel menja pismo)
     --e-out        krivulja prelaza

   IZMENE PRI UGRADNJI (24.09.2026, izmereno nad app.css, ne pretpostavljeno):
     1. Pomoćne klase ispod su u isporučenom fajlu bile GLOBALNE, a `.btn` i `.num`
        već postoje u app.css sa drugim izgledom (`.btn` je pun akcenat visine 44px,
        `.num` je Newsreader 600). Ovaj fajl ide IZA app.css, pa bi globalni `.btn`
        prefarbao svako dugme u aplikaciji. Zato je sve vezano za `.admin`, a gde
        app.css ostavlja svojstvo koje panel ne postavlja, ono se ovde vraća.
     2. `--font-ui` NE POSTOJI u app.css. Ispravljena predaja (24.09.) uvodi lokalni
        alias `--admin-ui` na `.admin`; alias ostaje, ali mu vrednost nije prepisan
        niz pisama nego `var(--font-app, …)` — isto ono što app.css stavlja na `body`
        (`--font-app` postavlja layout aplikacije na <html>; admin layout ga ne
        postavlja, pa važi rezerva Manrope). Tako alias prati pismo aplikacije, a niz
        rezervi je samo zaštita, ne četvrta kopija koja odlučuje.
     3. `.app` u app.css krije klizače svim potomcima (`.app *{scrollbar-width:none}`)
        i daje mu `display:flex` — panel oba vraća.
     4. Meni su LINKOVI (`a`), ne dugmad: svaka stavka je adresa. Selektori
        `.nav button` pokrivaju i `a` i `span` (stavka koja se još ne gradi).
     5. Osnovna pravila tabele iz mockupa (`th`, `td`, `.r`) nisu bila u ovom fajlu,
        a bez njih tabela nema ni visinu reda ni poravnanje; preneta su ispod.
     6. Pravilo fokusa u ispravljenoj predaji je `:where(button, .admin a, …)` —
        `button` u toj listi NIJE pod `.admin`, pa bi pogodio svako dugme u
        aplikaciji. Ovde je `.admin :where(button,a,input,select,[tabindex])`.

   Pravilo boje: pun statusni ton (--s-*-bg) nosi samo ono što gori.
   „Ističe uskoro" dobija samo vlas sa leve strane. Obavljeno je sivo.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── pomoćne klase panela ──────────────────────────────────────────────
   Isporučene su kao zajedničke sa aplikacijom; `.btn` i `.num` u app.css imaju
   drugi izgled, pa su ovde vezane za `.admin` (vidi izmenu 1 u zaglavlju). */

.admin .num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:inherit
}

.admin .mini{
  font-size:11.5px;
  color:var(--faint)
}

.admin .dim{
  color:var(--muted-2)
}

.admin .minus{
  color:var(--s-miss)
}

.admin .delta{
  font-size:12px;
  font-weight:700
}

.admin .delta.up{
  color:var(--s-ok)
}

.admin .delta.down{
  color:var(--s-miss)
}

.admin .tblwrap{
  overflow-x:auto
}

.admin .btn-row{
  display:flex;
  gap:6px;
  flex-wrap:wrap
}

.admin .salon-ime{
  font-weight:700;
  color:var(--ink)
}

.admin .salon-grad{
  color:var(--faint);
  font-size:11.5px
}

.admin .kpi-l{
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:700
}

.admin .btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  border:1px solid var(--line-2);
  background:var(--sheet);
  color:var(--ink-2);
  padding:6px 11px;
  border-radius:9px;
  font-size:12.5px;
  font-weight:600;
  transition:all .16s var(--e-out);
  height:auto;
  justify-content:flex-start;
  box-shadow:none;
  line-height:1.3;
  cursor:pointer
}

.admin .btn:active{
  transform:none
}

.admin .btn:hover{
  border-color:var(--accent-line);
  background:var(--accent-softer);
  color:var(--accent-ink)
}

.admin .btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent)
}

.admin .btn.primary:hover{
  background:var(--accent-strong);
  color:var(--on-accent)
}

.admin .btn.warn{
  color:var(--s-miss);
  border-color:color-mix(in srgb,var(--s-miss) 40%,var(--line))
}

/* pečat statusa: ravan, bez rotacije — nakrivljen tekst se sporije čita */

.admin .stamp{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding:3px 7px;
  border:1px solid currentColor;
  border-radius:var(--r-xs);
  white-space:nowrap
}

.admin .stamp.ok{
  color:var(--s-ok);
  background:var(--s-ok-bg)
}

.admin .stamp.wait{
  color:var(--s-wait);
  background:var(--s-wait-bg)
}

.admin .stamp.miss{
  color:var(--s-miss);
  background:var(--s-miss-bg)
}

.admin .stamp.done{
  color:var(--s-done);
  background:var(--s-done-bg)
}

.admin .stamp.trial{
  color:var(--accent-ink);
  background:var(--accent-soft)
}

/* vidljiv fokus za tastaturu — obavezno, panel ima 2FA i radnje bez povratka */

.admin :where(button,a,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:4px
}

/* spojena dugmad za produženje */

.admin .seg-join{
  display:inline-flex;
  border:1px solid var(--line-2);
  border-radius:9px;
  overflow:hidden;
  background:var(--sheet)
}

.admin .seg-join button{
  border:0;
  border-right:1px solid var(--line-2);
  background:transparent;
  padding:6px 13px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-2);
  transition:background .14s var(--e-out)
}

.admin .seg-join button:last-child{
  border-right:0
}

.admin .seg-join button:hover{
  background:var(--accent-soft);
  color:var(--accent-ink)
}

/* tihe radnje: retko se koriste, ne smeju da se takmiče sa primarnom */

.admin .tihe{
  display:flex;
  gap:13px;
  row-gap:7px;
  flex-wrap:wrap;
  font-size:12.5px;
  padding-top:2px
}

.admin .tihe button{
  border:0;
  background:none;
  padding:0;
  color:var(--muted);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--line-2)
}

.admin .tihe button:hover{
  color:var(--accent-ink);
  text-decoration-color:var(--accent-line)
}

.admin .tihe button.warn{
  color:var(--s-miss)
}

/* „šta je ušlo, šta je izašlo, šta je ostalo" */

.admin .trosak{
  margin-top:10px;
  border-top:1px solid var(--rule);
  padding-top:8px
}

.admin .trosak>div{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:3px 0;
  font-size:12.5px
}

.admin .trosak .neto{
  border-top:1px solid var(--rule);
  margin-top:6px;
  padding-top:7px;
  font-weight:700;
  font-size:13.5px
}

.admin{
  /* Lokalni alias za pismo tela teksta (vidi izmenu 2). Ako panel menja pismo,
     PROMENI SAMO OVU LINIJU. */
  --admin-ui:var(--font-app,Manrope,ui-sans-serif,system-ui,"Segoe UI",sans-serif);
  /* --row postoji u app.css; ovo je NAMERNO lokalno prepisivanje samo unutar panela,
     ne nov token. */
  --row:44px;
  padding:20px 16px 40px;
  background:var(--paper);
  min-height:100vh
}

.admin .app{
  display:grid;
  grid-template-columns:232px minmax(0,1fr);
  max-width:1180px;
  margin:0 auto;
  min-height:680px;
  background:var(--sheet);
  border:1px solid var(--line-2);
  border-radius:var(--r-md);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 26px 48px -36px var(--senka-tamna);
  overflow:hidden
}

@media (max-width:880px){
  .admin .app{
    grid-template-columns:minmax(0,1fr)
  }
}

/* ── tamna ivica knjige ── */

.admin .rub{
  background:var(--dark);
  color:var(--on-dark);
  padding:20px 0 18px;
  display:flex;
  flex-direction:column
}

/* Znak na tamnoj ivici: vodoravni logo, verzija za tamnu podlogu (`partials/logo.njk`,
   tokeni `--logo-*-tamno`). Prazan prostor oko njega dodaje sam makro, pa ovde ide samo
   uvlačenje do ivice poravnato sa redom „ko" ispod (18 px). */

.admin .rub .brand{
  margin:0 12px 10px;
  display:flex;
  align-items:center;
  align-self:flex-start;
  border-radius:6px
}

.admin .ko{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 18px 18px;
  margin-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.1)
}

.admin .ko .slovo{
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--accent);
  color:var(--on-accent);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:13px;
  flex:none
}

.admin .ko b{
  display:block;
  font-size:13px;
  font-weight:700;
  line-height:1.2
}

.admin .ko span{
  font-size:10.5px;
  opacity:.5
}

/* Naziv grupe (vlasnik 24.09.2026, odluka 13): bio je 2,85:1 (providnost .34). Izmereno na tamnoj
   ivici: .48 = 4,34:1, .50 = 4,59:1, .52 = 4,86:1. Ostaje bleđi od broja (.54) i natpisa (.68). */

.admin .grupa{
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.52;
  padding:14px 18px 6px
}

.admin .meni,.admin .nav{
  display:flex;
  flex-direction:column
}

.admin .nav :is(a,button,span){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  text-align:left;
  border:0;
  background:transparent;
  color:var(--on-dark);
  opacity:.68;
  height:34px;
  padding:0 18px;
  font-size:13.5px;
  font-weight:600;
  border-radius:var(--r-sm) 0 0 var(--r-sm);
  transition:opacity .14s var(--e-out),background .14s var(--e-out)
}

.admin .nav :is(a,button):hover{
  opacity:1;
  background:rgba(255,255,255,.07)
}

.admin .nav :is(a,button,span)[aria-current]{
  background:var(--sheet);
  color:var(--ink);
  opacity:1;
  margin-left:8px;
  padding-left:10px;
  font-weight:700
}

/* Broj uz stavku (vlasnik 24.09.2026): na aktivnoj, svetloj stavci je imao 1,05:1 i nije se video,
   na tamnoj 3,17:1. Odluka 13: sitan tekst najmanje 4,5:1. Ostaje bleđi od natpisa (hijerarhija). */

.admin .nav .kol{
  font-size:11.5px;
  opacity:.8;
  font-variant-numeric:tabular-nums
}

.admin .nav [aria-current] .kol{
  color:var(--muted);
  opacity:1
}

.admin .gorivo{
  margin:auto 18px 0;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1)
}

.admin .gorivo .l{
  font-size:9px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.4
}

.admin .gorivo b{
  font-family:var(--font-naslov);
  font-size:28px;
  font-weight:500;
  line-height:1.1;
  display:block;
  margin:2px 0 1px
}

.admin .gorivo .d{
  font-size:11.5px;
  opacity:.55
}

.admin .traka-goriva{
  height:3px;
  border-radius:2px;
  background:rgba(255,255,255,.14);
  margin:9px 0 11px;
  overflow:hidden
}

.admin .traka-goriva i{
  display:block;
  height:100%;
  background:var(--accent);
  border-radius:2px
}

.admin .gorivo a{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 13px;
  border-radius:9px;
  background:var(--accent);
  color:var(--on-accent);
  font-size:12.5px;
  font-weight:700;
  text-decoration:none
}

@media (max-width:880px){
  .admin .rub{
    padding:14px 0 12px
  }

  .admin .ko,.admin .grupa,.admin .gorivo{
    display:none
  }

  /* Jedan red za sve grupe; pomera se vodoravno, aktivnu stavku dovlači admin-panel.js. */

  .admin .meni{
    flex-direction:row;
    overflow-x:auto;
    padding:0 10px 2px
  }

  .admin .nav{
    flex-direction:row;
    flex:none
  }

  .admin .nav :is(a,button,span){
    border-radius:var(--r-sm);
    white-space:nowrap;
    padding:0 12px
  }

  .admin .nav :is(a,button,span)[aria-current]{
    margin-left:0
  }

  .admin .nav .kol{
    display:none
  }
}

/* ── tabak ── */

.admin .tabak{
  padding:26px 30px 34px;
  min-width:0
}

@media (max-width:600px){
  .admin .tabak{
    padding:20px 16px 26px
  }
}

.admin .nadnaslov{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--faint)
}

.admin h1{
  font-size:31px;
  font-weight:500;
  letter-spacing:-.022em;
  line-height:1.1;
  margin:5px 0 0
}

.admin .glava{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap
}

.admin .podnaslov{
  font-size:12.5px;
  color:var(--muted);
  margin-top:5px
}

.admin .vlas{
  height:2px;
  background:var(--accent);
  width:44px;
  margin:14px 0 0;
  border-radius:2px
}

.admin .stanje{
  font-family:var(--font-naslov);
  font-size:21px;
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--ink-2);
  margin:18px 0 4px;
  max-width:62ch
}

.admin .stanje b{
  font-weight:600;
  color:var(--ink)
}

.admin .stanje em{
  font-style:normal;
  font-weight:600;
  color:var(--s-miss)
}

.admin .cifre{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(142px,1fr));
  margin-top:20px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}

.admin .cifre>div{
  padding:15px 22px 15px 0
}

.admin .cifre>div+div{
  border-left:1px solid var(--rule);
  padding-left:22px
}

.admin .cifre .l{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint)
}

.admin .cifre .v{
  font-family:var(--font-naslov);
  font-size:34px;
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.08;
  margin:4px 0 2px;
  font-variant-numeric:tabular-nums
}

.admin .cifre .v.tekst{
  font-size:23px;
  letter-spacing:-.015em
}

.admin .cifre .v u{
  text-decoration:none;
  font-family:var(--admin-ui);
  font-size:12px;
  font-weight:700;
  color:var(--faint);
  padding-left:4px;
  letter-spacing:0
}

.admin .cifre .p{
  font-size:11.5px;
  color:var(--muted)
}

@media (max-width:640px){
  .admin .cifre>div+div{
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--rule)
  }
}

.admin .sek{
  display:flex;
  align-items:center;
  gap:12px;
  margin:30px 0 11px
}

.admin .sek span{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--faint);
  flex:none
}

.admin .sek::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line)
}

/* pažnja: boja samo tamo gde gori. Ostalo nosi vlas sa leve strane. */

.admin .zovi{
  display:flex;
  flex-direction:column
}

.admin .zovi .r{
  display:flex;
  align-items:center;
  gap:13px;
  flex-wrap:wrap;
  min-height:52px;
  padding:9px 14px;
  border-bottom:1px solid var(--rule);
  border-left:3px solid transparent
}

.admin .zovi .r.hitno{
  background:var(--s-miss-bg);
  border-left-color:var(--s-miss);
  border-bottom-color:transparent;
  border-radius:var(--r-xs);
  margin-bottom:3px
}

.admin .zovi .r.pazi{
  border-left-color:var(--s-wait)
}

.admin .zovi .r.ok{
  border-left-color:transparent;
  color:var(--muted)
}

.admin .zovi .r.ok .ime{
  font-weight:600;
  color:var(--muted)
}

.admin .zovi .ime{
  font-weight:700;
  font-size:14px
}

.admin .zovi .pod{
  font-size:12.5px;
  color:var(--muted)
}

.admin .zovi .kraj{
  margin-left:auto;
  font-size:12px;
  color:var(--muted)
}

.admin .kvacica{
  color:var(--s-ok);
  font-weight:700
}

.admin .dve{
  display:grid;
  grid-template-columns:minmax(0,1fr) 288px;
  gap:34px
}

@media (max-width:900px){
  .admin .dve{
    grid-template-columns:minmax(0,1fr)
  }
}

.admin .lista .s{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid var(--rule);
  font-size:13px
}

.admin .lista .s:last-child{
  border-bottom:0
}

.admin .lista .s b{
  font-weight:700;
  font-variant-numeric:tabular-nums
}

/* Vrednost desno se ne prelama (vlasnik 24.09.2026: „bez upisa“ je pucao u dva reda). */

.admin .lista .s>:last-child{
  white-space:nowrap;
  flex:none
}

.admin .lista .zbir{
  border-top:1px solid var(--line);
  border-bottom:0;
  margin-top:2px;
  padding-top:11px;
  font-size:14px
}

.admin table{
  min-width:660px
}

/* Uske tabele „Statistike" (O-116): malo kolona, pa ne traže 660 px i ne klize na telefonu. */

.admin table.t-stat,.admin .dve table.t-stat{
  min-width:0
}

.admin .dve table{
  min-width:420px
}

.admin thead th{
  padding:0 10px 8px;
  border-bottom:1px solid var(--line);
  color:var(--faint);
  font-size:9.5px;
  letter-spacing:.16em
}

.admin tbody tr{
  border-bottom:1px solid var(--rule)
}

.admin tbody tr:hover{
  background:var(--accent-softer)
}

.admin tbody tr.pazi td:first-child{
  box-shadow:inset 3px 0 0 var(--s-wait)
}

.admin tbody tr.hitno td:first-child{
  box-shadow:inset 3px 0 0 var(--s-miss)
}

.admin .stamp{
  transform:none;
  border-width:1px;
  font-size:10px
}

.admin .btn{
  border-radius:9px;
  font-size:12.5px
}

.admin .chip[aria-pressed="true"]{
  background:var(--dark);
  border-color:var(--dark);
  color:var(--on-dark)
}

.admin .search input[type=search]{
  border-radius:9px;
  background:var(--sheet-2)
}

.admin .fus{
  font-size:11.5px;
  color:var(--muted);
  margin-top:10px
}

/* ── tabela salona: jedan red = jedna visina, ime se ne prelama ── */

.admin .t-saloni{
  table-layout:fixed;
  min-width:900px
}

.admin .t-saloni th{
  white-space:nowrap;
  padding:0 9px 8px
}

.admin .t-saloni td{
  height:58px;
  padding:0 12px
}

.admin .t-saloni th{
  padding:0 12px 8px
}

.admin .t-saloni .c-ime{
  width:29%
}

.admin .t-saloni .c-plan{
  width:11%
}

.admin .t-saloni .c-rok{
  width:17%
}

.admin .t-saloni .c-br{
  width:9%
}

.admin .t-saloni .c-prij{
  width:15%
}

.admin .t-saloni .c-str{
  width:4%
}

.admin .nm{
  font-weight:700;
  font-size:14px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.admin .nm .tag{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-left:8px;
  vertical-align:1px
}

.admin .tag.miss{
  color:var(--s-miss)
}

.admin .tag.trial{
  color:var(--accent-ink)
}

.admin .sub2{
  font-size:11.5px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:1px
}

.admin .dat{
  font-variant-numeric:tabular-nums;
  font-size:13.5px
}

.admin .rokd{
  font-size:11.5px;
  color:var(--muted);
  margin-top:1px
}

.admin .rokd.wait{
  color:var(--s-wait);
  font-weight:700
}

.admin .rokd.miss{
  color:var(--s-miss);
  font-weight:700
}

.admin .str{
  color:var(--faint);
  text-align:right;
  font-size:16px;
  line-height:1
}

.admin tbody tr:hover .str{
  color:var(--accent)
}

.admin .plan-t{
  font-size:13px;
  color:var(--muted-2)
}

.admin tfoot .zbir-red td{
  border-top:1px solid var(--ink);
  height:44px;
  font-weight:700;
  font-size:13px
}

.admin tfoot .zbir-red:hover{
  background:transparent
}

/* ── filteri kao jedan prekidač, sa brojem koji ne može da slaže ── */

.admin .alat{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:20px 0 14px
}

.admin .alat input[type=search]{
  flex:1 1 220px;
  min-width:0;
  font:inherit;
  padding:9px 13px;
  border-radius:9px;
  border:1px solid var(--line-2);
  background:var(--sheet-2);
  color:var(--ink)
}

.admin .alat input[type=search]:focus{
  outline:2px solid var(--accent-wash);
  outline-offset:1px;
  border-color:var(--accent-line)
}

.admin .filteri{
  display:inline-flex;
  border:1px solid var(--line-2);
  border-radius:9px;
  overflow-x:auto;
  max-width:100%;
  background:var(--sheet-2);
  scrollbar-width:thin
}

@media (max-width:760px){
  .admin .filteri{
    width:100%
  }

  .admin .alat input[type=search]{
    flex:1 1 100%
  }
}

.admin .filteri button{
  border:0;
  border-right:1px solid var(--line-2);
  background:transparent;
  padding:8px 12px;
  font-size:12.5px;
  font-weight:600;
  color:var(--muted);
  white-space:nowrap
}

.admin .filteri button:last-child{
  border-right:0
}

.admin .filteri button:hover{
  background:var(--accent-softer);
  color:var(--accent-ink)
}

.admin .filteri button[aria-pressed="true"]{
  background:var(--dark);
  color:var(--on-dark)
}

.admin .filteri .br{
  opacity:.55;
  padding-left:6px;
  font-variant-numeric:tabular-nums
}

/* ── naplata kao rečenica: period → iznos → novi rok → potvrda ── */

.admin .naplata{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  background:var(--sheet-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:14px 16px
}

.admin .naplata .lab{
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--faint)
}

.admin .period{
  display:inline-flex;
  border:1px solid var(--line-2);
  border-radius:9px;
  overflow:hidden;
  background:var(--sheet)
}

.admin .period button{
  border:0;
  border-right:1px solid var(--line-2);
  background:transparent;
  padding:8px 14px;
  font-size:13px;
  font-weight:700;
  color:var(--ink-2)
}

.admin .period button:last-child{
  border-right:0
}

.admin .period button[aria-pressed="true"]{
  background:var(--accent);
  color:var(--on-accent)
}

/* Na telefonu dugme nosi samo „+1/+3/+6/+12" (O-111): sa jedinicom su se dugmad lomila u dva
   reda. Pun naziv ostaje u `aria-label`, pa čitač ekrana i dalje čuje „+3 meseca". */

.admin .period button{
  white-space:nowrap
}

@media (max-width:599.98px){
  .admin .period .per-jed{
    display:none
  }
}

.admin .ishod{
  display:flex;
  gap:22px;
  flex-wrap:wrap
}

.admin .ishod div{
  font-size:11px;
  color:var(--muted)
}

.admin .ishod b{
  display:block;
  font-family:var(--font-naslov);
  font-size:20px;
  font-weight:500;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  line-height:1.2
}

.admin .naplata .btn.primary{
  margin-left:auto;
  height:38px;
  padding:0 16px
}

.admin .ostale{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:11px;
  font-size:12.5px
}

.admin .ostale button{
  border:0;
  background:none;
  padding:0;
  color:var(--muted);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:var(--line-2)
}

.admin .ostale button:hover{
  color:var(--accent-ink);
  text-decoration-color:var(--accent-line)
}

.admin .ostale button.warn{
  color:var(--s-miss)
}

/* ── podela novca: koliko je ušlo, koliko je otišlo ── */

.admin .novac3{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(146px,1fr));
  gap:0;
  border-top:1px solid var(--line)
}

.admin .novac3>div{
  padding:14px 18px 14px 0
}

.admin .novac3>div+div{
  border-left:1px solid var(--rule);
  padding-left:18px
}

@media (max-width:520px){
  .admin .novac3>div+div{
    border-left:0;
    padding-left:0;
    border-top:1px solid var(--rule)
  }
}

.admin .novac3 .l{
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--faint)
}

.admin .novac3 .v{
  font-family:var(--font-naslov);
  font-size:30px;
  font-weight:500;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  line-height:1.1;
  margin:3px 0 1px
}

.admin .novac3 .v u{
  text-decoration:none;
  font-family:var(--admin-ui);
  font-size:11.5px;
  font-weight:700;
  color:var(--faint);
  padding-left:4px
}

.admin .novac3 .p{
  font-size:11.5px;
  color:var(--muted)
}

.admin .deoba{
  display:flex;
  height:7px;
  border-radius:4px;
  overflow:hidden;
  background:var(--rule);
  margin:14px 0 7px
}

.admin .deoba i{
  display:block;
  height:100%
}

.admin .deoba .t{
  background:var(--s-miss)
}

.admin .deoba .n{
  background:var(--accent)
}

.admin .deoba-txt{
  font-size:12px;
  color:var(--muted)
}

.admin .deoba-txt em{
  font-style:normal;
  font-weight:700;
  color:var(--ink)
}

.admin .rukopis{
  font-size:18px
}

/* ── ugradnja u aplikaciju (izmene 3–5 iz zaglavlja) ──────────────────── */

/* Telo panela: veličina i prored iz mockupa; pismo je ono iz app.css `body`. */

.admin{
  font-size:14px;
  line-height:1.45;
  color:var(--ink);
  -webkit-font-smoothing:antialiased
}

.admin h1{
  font-family:var(--font-naslov);
  text-wrap:balance
}

.admin a{
  color:var(--accent-ink)
}

/* `.app` iz app.css je flex kolona bez klizača; tabak mora da ima klizač tabele. */

.admin .app{
  flex:none;
  min-height:680px
}

.admin .app *{
  scrollbar-width:thin
}

.admin .nav a,.admin .nav span{
  text-decoration:none
}

.admin .nav span[aria-disabled]{
  cursor:default;
  opacity:.34
}

.admin .nav span[aria-disabled]:hover{
  background:transparent
}

/* Osnova tabele iz mockupa (bez nje red nema visinu ni poravnanje). */

.admin table{
  border-collapse:collapse;
  width:100%
}

.admin th{
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--faint);
  font-weight:700;
  text-align:left;
  padding:0 10px 7px;
  white-space:nowrap
}

.admin td{
  padding:0 10px;
  height:var(--row);
  vertical-align:middle;
  font-size:13px
}

.admin td.r,.admin th.r{
  text-align:right
}

.admin .nm a{
  color:inherit;
  text-decoration:none
}

.admin .nm a:hover{
  text-decoration:underline;
  text-underline-offset:3px
}

/* Stranice tabele, poruke o ishodu i obrasci panela — izvedeni iz postojećih
   komponenti (vlas, tihe radnje, utisnuta površina), bez nove boje. */

.admin .strane{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:12px;
  font-size:12.5px;
  color:var(--muted)
}

.admin .strane a{
  font-weight:600
}

.admin .poruka{
  margin:18px 0 0;
  padding:10px 14px;
  border-left:3px solid var(--s-ok);
  background:var(--sheet-2);
  border-radius:var(--r-xs);
  font-size:13px
}

.admin .poruka.greska{
  border-left-color:var(--s-miss);
  background:var(--s-miss-bg)
}

.admin .polje{
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:11px;
  color:var(--muted);
  min-width:0;
  max-width:100%
}

/* Dug izbor („Paket 1.500 poruka — 5.250 RSD", P-30) ne sme da izađe iz kartice na 390. */

.admin .polje select{
  max-width:100%
}

.admin .polje input,.admin .polje select{
  font:inherit;
  font-size:14px;
  color:var(--ink);
  padding:8px 11px;
  border:1px solid var(--line-2);
  border-radius:9px;
  background:var(--sheet);
  min-width:0
}

.admin .polje input:focus,.admin .polje select:focus{
  outline:2px solid var(--accent-wash);
  outline-offset:1px;
  border-color:var(--accent-line)
}

.admin .obrazac{
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap
}

/* Klizač tabele je blok sadržavanja za skrivenu oznaku u zaglavlju: bez toga
   `position:absolute` izlazi iz klizača i gura celu stranu u širinu (izmereno na
   375 px: `html` scrollWidth 911 umesto 375, uzrok oznaka „Otvori" u poslednjoj koloni). */

.admin .tblwrap{
  position:relative
}

.admin .sakriveno{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}

/* Jaka prijava: tabak bez leve ivice, uzan. */

.admin .znak-prijave{
  display:flex;
  justify-content:center;
  margin:0 0 14px
}

.admin .app.samo-tabak{
  grid-template-columns:minmax(0,1fr);
  max-width:520px;
  min-height:0
}

.admin .qr{
  width:184px;
  height:184px;
  background:var(--sheet);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:6px
}

.admin .kljuc{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:13px;
  letter-spacing:.08em;
  word-break:break-all;
  background:var(--sheet-2);
  padding:8px 10px;
  border-radius:var(--r-xs)
}

/* ── tabele sa novcem na telefonu (vlasnik 24.09.2026) ─────────────────
   Ispod 600 px novac se ne krije iza klizača: red postaje dvoredan. U prvom redu
   su datum i iznos, iznos desno. Ispod su salon i period. Način i „uneo" se na
   telefonu ne prikazuju. BEZ lepljive kolone: 06.09. je lepljivo ime na „Učinku“
   prekrivalo iznose koji klize ispod (160.000 se čitalo kao 60.000). */

@media (max-width:599.98px){
  .admin .tblwrap table.t-novac{
    min-width:0
  }

  .admin .t-novac,.admin .t-novac tbody{
    display:block
  }

  .admin .t-novac thead{
    display:none
  }

  .admin .t-novac tbody tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    -moz-column-gap:14px;
         column-gap:14px;
    row-gap:2px;
    padding:10px 0
  }

  .admin .t-novac td{
    display:block;
    height:auto;
    padding:0
  }

  .admin .t-novac .c-dat{
    grid-row:1;
    grid-column:1
  }

  .admin .t-novac .c-iznos{
    grid-row:1;
    grid-column:2;
    text-align:right
  }

  .admin .t-novac .c-salon,.admin .t-novac .c-per{
    grid-column:1 / -1
  }

  .admin .t-novac .c-nac,.admin .t-novac .c-uneo{
    display:none
  }

  /* Dnevnik (O-111, vlasnik 25.09.): isti obrazac. Gore radnja i vreme, pa salon, šta se
     promenilo i ko. IP ostaje na širem ekranu i u izvozu CSV. */

  .admin .tblwrap table.t-dnevnik{
    min-width:0
  }

  .admin .t-dnevnik,.admin .t-dnevnik tbody{
    display:block
  }

  .admin .t-dnevnik thead{
    display:none
  }

  .admin .t-dnevnik tbody tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    -moz-column-gap:14px;
         column-gap:14px;
    row-gap:2px;
    padding:10px 0;
    border-bottom:1px solid var(--rule)
  }

  .admin .t-dnevnik td{
    display:block;
    height:auto;
    padding:0;
    min-width:0
  }

  .admin .t-dnevnik .c-radnja{
    grid-row:1;
    grid-column:1
  }

  .admin .t-dnevnik .c-kad{
    grid-row:1;
    grid-column:2;
    text-align:right
  }

  .admin .t-dnevnik .c-salon{
    grid-row:2;
    grid-column:1 / -1
  }

  .admin .t-dnevnik .c-det{
    grid-row:3;
    grid-column:1 / -1
  }

  .admin .t-dnevnik .c-ko{
    grid-row:4;
    grid-column:1 / -1
  }

  .admin .t-dnevnik .c-ip{
    display:none
  }
}

/* Mejl u jednom komadu (O-111): „e-rokovnik" nosi crticu, a na crtici pregledač sme da
   prelomi red — adresa je stajala u dva reda. Sada se ne lomi nego seče tritačkom, bez
   vodoravnog klizača; ceo mejl je u `title` (hover), a dodir ga fokusira i otvara ceo. */

.admin .mejl-sec{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  vertical-align:bottom
}

.admin .mejl-sec:focus{
  white-space:normal;
  overflow-wrap:anywhere;
  outline:none;
  -webkit-text-decoration:underline dotted;
          text-decoration:underline dotted
}

.admin .lista .mejl-red{
  display:block
}

/* Levo sme da se skupi (bez ovoga je mejl u jednom komadu širio red na 361 px na 320 i
   gurao datum desno van kartice — izmereno 25.09.). */

.admin .lista .s>:first-child{
  min-width:0
}

.file\:mr-2::file-selector-button {
  margin-right: 0.5rem;
}

.file\:rounded-lg::file-selector-button {
  border-radius: 0.5rem;
}

.file\:border::file-selector-button {
  border-width: 1px;
}

.file\:border-line::file-selector-button {
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--line) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.file\:bg-surface::file-selector-button {
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--sheet) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.file\:px-3::file-selector-button {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.file\:py-1\.5::file-selector-button {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.file\:text-\[13px\]::file-selector-button {
  font-size: 13px;
}

.file\:font-medium::file-selector-button {
  font-weight: 500;
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:left-1::after {
  content: var(--tw-content);
  left: 0.25rem;
}

.after\:top-1::after {
  content: var(--tw-content);
  top: 0.25rem;
}

.after\:h-5::after {
  content: var(--tw-content);
  height: 1.25rem;
}

.after\:w-5::after {
  content: var(--tw-content);
  width: 1.25rem;
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:bg-surface::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--sheet) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.after\:transition::after {
  content: var(--tw-content);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.last\:border-0:last-child {
  border-width: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:border-ink:hover {
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--ink) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.hover\:bg-ink\/\[0\.05\]:hover {
  background-color: color-mix(in srgb, var(--ink) calc(0.05 * 100%), transparent);
}

.hover\:bg-now\/\[0\.08\]:hover {
  background-color: color-mix(in srgb, var(--s-miss) calc(0.08 * 100%), transparent);
}

.hover\:text-ink:hover {
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--ink) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.hover\:shadow-modal:hover {
  --tw-shadow: 0 12px 48px color-mix(in srgb, var(--ink) 20%, transparent);
  --tw-shadow-colored: 0 12px 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.active\:bg-line\/40:active {
  background-color: color-mix(in srgb, var(--line) calc(0.4 * 100%), transparent);
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.group[open] .group-open\:rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:bg-ink\/80 {
  background-color: color-mix(in srgb, var(--ink) calc(0.8 * 100%), transparent);
}

.peer:checked ~ .peer-checked\:block {
  display: block;
}

.peer:checked ~ .peer-checked\:grid {
  display: grid;
}

.peer:checked ~ .peer-checked\:hidden {
  display: none;
}

.peer:checked ~ .peer-checked\:border-ink {
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--ink) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.peer:checked ~ .peer-checked\:bg-ink {
  --tw-bg-opacity: 1;
  background-color: color-mix(in srgb, var(--ink) calc(var(--tw-bg-opacity, 1) * 100%), transparent);
}

.peer:checked ~ .peer-checked\:font-medium {
  font-weight: 500;
}

.peer:checked ~ .peer-checked\:text-ink {
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--ink) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.peer:checked ~ .peer-checked\:text-surface {
  --tw-text-opacity: 1;
  color: color-mix(in srgb, var(--sheet) calc(var(--tw-text-opacity, 1) * 100%), transparent);
}

.peer:checked ~ .peer-checked\:text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

.peer:checked ~ .peer-checked\:ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:checked ~ .peer-checked\:ring-ink {
  --tw-ring-opacity: 1;
  --tw-ring-color: color-mix(in srgb, var(--ink) calc(var(--tw-ring-opacity, 1) * 100%), transparent);
}

.peer:checked ~ .peer-checked\:after\:translate-x-5::after {
  content: var(--tw-content);
  --tw-translate-x: 1.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.peer:focus-visible ~ .peer-focus-visible\:ring-4 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.peer:focus-visible ~ .peer-focus-visible\:ring-ink\/\[0\.12\] {
  --tw-ring-color: color-mix(in srgb, var(--ink) calc(0.12 * 100%), transparent);
}

.has-\[\:checked\]\:border-ink:has(:checked) {
  --tw-border-opacity: 1;
  border-color: color-mix(in srgb, var(--ink) calc(var(--tw-border-opacity, 1) * 100%), transparent);
}

.has-\[\:checked\]\:bg-line\/40:has(:checked) {
  background-color: color-mix(in srgb, var(--line) calc(0.4 * 100%), transparent);
}

@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:h-9 {
    height: 2.25rem;
  }

  .sm\:w-24 {
    width: 6rem;
  }

  .sm\:w-28 {
    width: 7rem;
  }

  .sm\:w-32 {
    width: 8rem;
  }

  .sm\:w-48 {
    width: 12rem;
  }

  .sm\:w-64 {
    width: 16rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-end {
    align-items: flex-end;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-8 {
    gap: 2rem;
  }

  .sm\:justify-self-start {
    justify-self: start;
  }

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-8 {
    padding: 2rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:pt-20 {
    padding-top: 5rem;
  }

  .sm\:text-\[22px\] {
    font-size: 22px;
  }

  .sm\:text-\[30px\] {
    font-size: 30px;
  }

  .sm\:text-\[32px\] {
    font-size: 32px;
  }

  .sm\:text-\[44px\] {
    font-size: 44px;
  }

  .sm\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .lg\:inline {
    display: inline;
  }

  .lg\:hidden {
    display: none;
  }
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}