/* Tokeni preuzeti iz styles.css teme webstore2go */
  .vodic {
    --ground:      #ffffff;
    --surface:     #ffffff;
    --surface-alt: #f7fcfd;
    --ink:         #393939;
    --ink-soft:    #626262;
    --ink-faint:   #8a9296;
    --rule:        #c4d8dc;
    --rule-strong: #9dbcc3;

    --accent:      #00bfd8;
    --accent-dark: #0079f9;

    --stop:        #c8102e;
    --stop-bg:     #fdf0f2;
    --ok:          #0a6b25;
    --ok-bg:       #eef7f0;
    --warn:        #8a5a00;
    --warn-bg:     #fdf7e8;

    --code-bg:     #f7fcfd;
    --code-ink:    #393939;

    --shadow: 0 1px 2px rgba(57, 57, 57, .06), 0 8px 24px rgba(57, 57, 57, .05);

    --display: "Raleway", sans-serif;
    --text:    "Raleway", sans-serif;
    --mono:    ui-monospace, Consolas, "Cascadia Mono", monospace;
  }

  /* ---- Tokeni: svijetla tema ---- */
  /* ---- Osnova ---- */
  .vodic * { box-sizing: border-box; }
  /* Atribut hidden mora nadjačati display iz komponenti ispod. */
  .vodic [hidden] { display: none !important; }
  .vodic {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--text);
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    padding: 0 0 6rem;
    -webkit-font-smoothing: antialiased;
  }
  .vodic .wrap { max-width: 62rem; margin: 0 auto; }
  /* ---- Zaglavlje ---- */
  .vodic header {
    padding: 3.5rem 0 2rem;
    border-bottom: 2px solid var(--ink);
    display: flex;
    flex-direction: column;
    gap: .9rem;
  }
  .vodic .eyebrow {
    font-family: var(--mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .vodic h1 {
    font-family: var(--display);
    font-size: clamp(2rem, 5vw, 2.9rem);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.08;
    text-wrap: balance;
    margin: 0;
  }
  .vodic .lede {
    color: var(--ink-soft);
    max-width: 60ch;
    margin: 0;
    font-size: 1.02rem;
  }
  /* ---- Ključni datumi ---- */
  .vodic .keydates {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: .7rem;
    margin-top: .4rem;
  }
  .vodic .keydate {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 5px;
    padding: .8rem .95rem;
  }
  .vodic .keydate b {
    display: block;
    font-family: var(--mono);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
  }
  .vodic .keydate span { color: var(--ink-soft); font-size: .86rem; }
  /* ---- Brojači napretka ---- */
  .vodic .vodic-progress {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--ground);
    border-bottom: 1px solid var(--rule);
    padding: .6rem 0;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-family: var(--mono);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-soft);
  }
  .vodic .track { display: flex; align-items: center; gap: .8rem; }
  .vodic .track-name {
    width: 8.5rem;
    flex: none;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: .02em;
  }
  .vodic .track-count { width: 3.4rem; flex: none; }
  .vodic .track-pct { width: 2.6rem; flex: none; text-align: right; }
  .vodic .bar {
    flex: 1;
    height: 5px;
    background: var(--rule);
    border-radius: 3px;
    overflow: hidden;
    min-width: 2rem;
  }
  .vodic .bar > i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--ok);
    transition: width .25s ease;
  }
@media (max-width: 33rem) {
  .vodic .track-name { width: 6.2rem; font-size: .7rem; }
  
}
@media (prefers-reduced-motion: reduce) {
  .vodic .bar > i { transition: none; }
  
}
  /* ---- Faze ---- */
  .vodic .phase {
    display: grid;
    grid-template-columns: 3.25rem 1fr;
    gap: 0 1.25rem;
    padding: 2.4rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .vodic .phase-num {
    font-family: var(--mono);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
    padding-top: .28rem;
    border-top: 2px solid var(--rule-strong);
    align-self: start;
  }
  .vodic .phase-body { min-width: 0; display: flex; flex-direction: column; gap: .9rem; }
  .vodic h2 {
    font-family: var(--display);
    font-size: 1.42rem;
    font-weight: 650;
    letter-spacing: -.015em;
    line-height: 1.2;
    text-wrap: balance;
    margin: 0;
  }
  .vodic h3 {
    font-family: var(--display);
    font-size: 1.02rem;
    font-weight: 650;
    margin: .5rem 0 0;
  }
  .vodic p { margin: 0; max-width: 68ch; }
  .vodic a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
  .vodic a:hover { text-decoration-color: currentColor; }
  /* ---- Zadaci ---- */
  .vodic ul.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
  .vodic ul.tasks li {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: .6rem;
    align-items: start;
  }
  .vodic input[type="checkbox"] {
    appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    margin: .28rem 0 0;
    border: 1.5px solid var(--rule-strong);
    border-radius: 3px;
    background: var(--surface);
    cursor: pointer;
    display: grid;
    place-content: center;
    flex: none;
  }
  .vodic input[type="checkbox"]::after {
    content: "";
    width: .55rem;
    height: .3rem;
    border-left: 2px solid var(--surface);
    border-bottom: 2px solid var(--surface);
    transform: rotate(-45deg) translate(1px, -1px);
    opacity: 0;
  }
  .vodic input[type="checkbox"]:checked { background: var(--ok); border-color: var(--ok); }
  .vodic input[type="checkbox"]:checked::after { opacity: 1; }
  .vodic input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .vodic label { cursor: pointer; }
  .vodic input[type="checkbox"]:checked + label { color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1px; }
  /* ---- Kod ---- */
  .vodic pre {
    background: var(--code-bg);
    color: var(--code-ink);
    border: 1px solid var(--rule);
    border-radius: 5px;
    padding: .85rem 1rem;
    margin: 0;
    overflow-x: auto;
    font-family: var(--mono);
    font-size: .81rem;
    line-height: 1.65;
  }
  .vodic code {
    font-family: var(--mono);
    font-size: .86em;
    background: var(--surface-alt);
    padding: .1em .35em;
    border-radius: 3px;
  }
  .vodic pre code { background: none; padding: 0; font-size: inherit; }
  /* ---- Isticanja ---- */
  .vodic .note {
    border-left: 3px solid var(--rule-strong);
    background: var(--surface);
    padding: .8rem 1rem;
    border-radius: 0 5px 5px 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
  }
  .vodic .note.stop { border-left-color: var(--stop); background: var(--stop-bg); }
  .vodic .note.warn { border-left-color: var(--warn); background: var(--warn-bg); }
  .vodic .note.verify { border-left-color: var(--ok);   background: var(--ok-bg); }
  .vodic .note-label {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-faint);
  }
  .vodic .note.stop   .note-label { color: var(--stop); }
  .vodic .note.warn   .note-label { color: var(--warn); }
  .vodic .note.verify .note-label { color: var(--ok); }
  /* ---- Tablice ---- */
  .vodic .scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: 5px; background: var(--surface); }
  .vodic table { border-collapse: collapse; width: 100%; font-size: .89rem; }
  .vodic th,
  .vodic td {
    text-align: left;
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
  }
  .vodic thead th {
    background: var(--surface-alt);
    font-family: var(--mono);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    font-weight: 700;
    white-space: nowrap;
  }
  .vodic tbody tr:last-child td { border-bottom: 0; }
  /* ---- Kriteriji ---- */
  .vodic .criteria { display: grid; gap: .7rem; }
  .vodic .criterion {
    display: grid;
    grid-template-columns: 1.4rem 2rem 1fr;
    gap: .6rem;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 5px;
    padding: .75rem .9rem;
  }
  .vodic .criterion .k {
    font-family: var(--mono);
    font-size: .95rem;
    font-weight: 700;
    color: var(--stop);
    font-variant-numeric: tabular-nums;
    padding-top: .12rem;
  }
  .vodic .criterion input[type="checkbox"]:checked + .k { color: var(--ok); }
  /* ---- Generator cjenika ---- */
  .vodic .tool {
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
    padding: 1.1rem 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .9rem;
  }
  .vodic .field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .65rem;
  }
  .vodic .field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
  .vodic .field > span {
    font-size: .74rem;
    letter-spacing: .04em;
    color: var(--ink-soft);
    font-family: var(--mono);
  }
  .vodic input[type="text"],
  .vodic input[type="number"],
  .vodic select {
    font-family: inherit;
    font-size: .88rem;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    padding: .42rem .55rem;
    width: 100%;
    min-width: 0;
  }
  .vodic input[type="text"]:focus-visible,
  .vodic input[type="number"]:focus-visible,
  .vodic select:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
  .vodic .vodic-rows { display: flex; flex-direction: column; gap: .5rem; }
  .vodic .vodic-row {
    display: grid;
    grid-template-columns: 1fr 6.5rem 5rem 8rem 6.5rem 2rem;
    gap: .45rem;
    align-items: center;
  }
  .vodic .vodic-row.head {
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .vodic .vodic-row.head > div { padding: 0 .2rem; }
  .vodic button {
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface-alt);
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    padding: .45rem .85rem;
    cursor: pointer;
  }
  .vodic button:hover { border-color: var(--ink-faint); }
  .vodic button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .vodic button.primary { background: var(--ink); color: var(--ground); border-color: var(--ink); }
  .vodic button.drop {
    padding: .2rem .4rem;
    font-size: .95rem;
    line-height: 1;
    color: var(--ink-faint);
    background: none;
    border-color: transparent;
  }
  .vodic button.drop:hover { color: var(--stop); border-color: var(--rule); }
  .vodic .actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  .vodic .filename {
    font-family: var(--mono);
    font-size: .78rem;
    color: var(--ink-soft);
    word-break: break-all;
  }
  /* ---- Pitanja ---- */
  .vodic details {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 5px;
    padding: .7rem .95rem;
  }
  .vodic details + details { margin-top: .5rem; }
  .vodic details[open] { border-color: var(--rule-strong); }
  .vodic summary {
    cursor: pointer;
    font-weight: 600;
    list-style-position: outside;
  }
  .vodic summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .vodic details > p { margin-top: .55rem; color: var(--ink-soft); }
  .vodic .tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: .63rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--warn);
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    border-radius: 3px;
    padding: 0 .35em;
    margin-left: .4rem;
    vertical-align: .1em;
  }
  /* ---- Kazne ---- */
  .vodic .penalty {
    margin-top: 3rem;
    border: 2px solid var(--stop);
    border-radius: 6px;
    background: var(--surface);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: .9rem;
  }
  .vodic .penalty h2 { color: var(--stop); font-size: 1.2rem; }
  .vodic footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-faint);
    font-size: .84rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
  }
  .vodic footer a { color: var(--ink-soft); }
@media (max-width: 45rem) {
  .vodic .vodic-row { grid-template-columns: 1fr 1fr; }
  .vodic .vodic-row.head { display: none; }
  
}
@media (max-width: 33rem) {
  .vodic .phase { grid-template-columns: 1fr; gap: .8rem; }
  .vodic .phase-num { border-top: 0; padding-top: 0; }
  
}
  /* ---- Prikaz cijene na webshopu ---- */
  .vodic .mocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .8rem;
  }
  .vodic .mock {
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
    padding: 1rem 1.1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
  }
  .vodic .mock-cap {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: .5rem;
  }
  .vodic .mock-title { font-weight: 650; font-size: 1rem; margin-bottom: .3rem; }
  .vodic .mock-now {
    font-family: var(--display);
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.1;
  }
  .vodic .mock-was { color: var(--ink-soft); font-size: .92rem; }
  .vodic .mock-was s { text-decoration-thickness: 1.5px; }
  .vodic .mock-off {
    display: inline-block;
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 700;
    color: #fff;
    background: var(--stop);
    border-radius: 3px;
    padding: .05rem .4rem;
    margin-left: .4rem;
    vertical-align: .18em;
  }
  .vodic .mock-line {
    font-size: .84rem;
    color: var(--ink-soft);
    display: flex;
    gap: .4rem;
    align-items: baseline;
  }
  .vodic .mock-line b { color: var(--ink); font-variant-numeric: tabular-nums; }
  .vodic .mock-src {
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    flex: none;
    width: 4.6rem;
  }
  .vodic .mock hr { border: 0; border-top: 1px solid var(--rule); margin: .6rem 0 .5rem; }
  /* ---- Kalkulator popusta ---- */
  .vodic .calc-out {
    background: var(--surface-alt);
    border-radius: 5px;
    padding: .75rem .9rem;
    font-size: .9rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
  }
  .vodic .calc-big {
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.15;
  }
  .vodic .calc-out.bad { background: var(--stop-bg); color: var(--stop); }
  .vodic .calc-out.bad b { color: inherit; }
  /* ---- Upit za implementaciju ---- */
  .vodic .panel {
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 1rem 1.1rem 1.1rem;
    width: min(23rem, calc(100vw - 2rem));
    display: flex;
    flex-direction: column;
    gap: .6rem;
    text-align: left;
  }
  .vodic .panel h3 { margin: 0; font-size: 1.05rem; }
  .vodic .panel p { font-size: .84rem; color: var(--ink-soft); }
  .vodic .panel textarea {
    font-family: inherit;
    font-size: .88rem;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    padding: .42rem .55rem;
    width: 100%;
    min-height: 4.5rem;
    resize: vertical;
  }
  .vodic .panel textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
  .vodic .panel #sendAsk {
    background: #0a6b25;
    border-color: #0a6b25;
    color: #fff;
  }
  .vodic .panel #sendAsk:hover { background: #08561d; border-color: #08561d; }
  .vodic .dock {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
  }
  .vodic .dock-buttons { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
  .vodic .dock button {
    font-size: .88rem;
    font-weight: 700;
    padding: .55rem 1.1rem;
    border-radius: 5px;
    box-shadow: var(--shadow);
    color: #fff;
  }
  .vodic .dock .cta { background: #16202e; border-color: #16202e; }
  .vodic .dock .cta:hover { background: #24344a; border-color: #24344a; }
  .vodic .dock .save { background: #0a6b25; border-color: #0a6b25; }
  .vodic .dock .save:hover { background: #08561d; border-color: #08561d; }
  .vodic .dock .load { background: #d9a300; border-color: #b78a00; color: #241c00; }
  .vodic .dock .load:hover { background: #c39300; border-color: #a07800; }
  .vodic .dock-msg {
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    border-radius: 5px;
    box-shadow: var(--shadow);
    padding: .4rem .7rem;
    font-size: .8rem;
    color: var(--ink-soft);
    max-width: 18rem;
    text-align: right;
  }
@media (max-width: 33rem) {
  .vodic .dock { right: .7rem; bottom: .7rem; }
  .vodic .dock button { padding: .5rem .85rem; }
  
}
  /* ---- Ispis ---- */
@media print {
  .vodic .dock { display: none; }
  .vodic { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .vodic .vodic-progress,
  .vodic .tool,
  .vodic button,
  .vodic details { display: none; }
  .vodic .phase { break-inside: avoid; border-bottom: 1px solid #ccc; }
  .vodic .note,
  .vodic .criterion,
  .vodic .keydate,
  .vodic .penalty { break-inside: avoid; }
  .vodic a { text-decoration: none; }
  
}


  /* ---- Gumbi i tipografija preuzeti iz teme ---- */
  .vodic h1, .vodic h2, .vodic h3 {
    font-family: "Raleway", sans-serif;
    font-weight: 700;
    color: var(--ink);
  }

  .vodic a { color: var(--accent); }
  .vodic a:hover { color: var(--accent); }

  .vodic button,
  .vodic .dock button {
    display: inline-block;
    padding: 0.9rem 1.75rem;
    border: 0.125rem solid var(--accent);
    border-radius: 2rem;
    background-color: transparent;
    color: var(--accent);
    font: 700 0.75rem/1 "Raleway", sans-serif;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
  }

  .vodic button:hover,
  .vodic .dock button:hover {
    background-color: var(--accent);
    color: #fff;
  }

  .vodic button.primary,
  .vodic .dock .cta,
  .vodic .panel #sendAsk {
    background-color: var(--accent);
    color: #fff;
  }

  .vodic button.primary:hover,
  .vodic .dock .cta:hover,
  .vodic .panel #sendAsk:hover {
    background-color: transparent;
    color: var(--accent);
  }

  /* Gumb za uklanjanje retka ostaje mali i neutralan */
  .vodic button.drop {
    padding: 0.25rem 0.55rem;
    border-color: var(--rule);
    border-radius: 0.35rem;
    color: var(--ink-faint);
    font-size: 1rem;
    letter-spacing: 0;
    text-transform: none;
  }

  .vodic button.drop:hover {
    border-color: var(--stop);
    background-color: transparent;
    color: var(--stop);
  }

  .vodic input[type="checkbox"]:checked {
    border-color: var(--accent);
    background-color: var(--accent);
  }

  .vodic .bar > i { background: var(--accent); }

  /* Fiksna navigacija teme ne smije prekriti naslov */
  .vodic { padding-top: 1rem; }

  /* Dock traka lijevo umjesto desno */
  .vodic .dock { right: auto; left: 1rem; align-items: flex-start; }
  .vodic .dock-buttons { justify-content: flex-start; }

  @media (max-width: 33rem) {
    .vodic .dock { right: auto; left: .7rem; }
  }

  /* Traka napretka ispod fiksne navigacije teme */
  .vodic .vodic-progress { top: 4.25rem; }

  @media (max-width: 991px) {
    .vodic .vodic-progress { top: 3.75rem; }
  }

  /* Dock gumbi kao gumb "Pošalji poruku" u kontakt obrascu */
  .vodic .dock button,
  .vodic .dock .cta,
  .vodic .dock .save,
  .vodic .dock .load {
    height: 3.125rem;
    padding: 0 1.75rem;
    border: 1px solid #00bfd8;
    border-radius: 1.5rem;
    background-color: #00bfd8;
    color: #fff;
    font: 700 0.75rem/1.75rem "Raleway", sans-serif;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
  }

  .vodic .dock button:hover,
  .vodic .dock .cta:hover,
  .vodic .dock .save:hover,
  .vodic .dock .load:hover {
    background-color: transparent;
    color: #00bfd8;
  }