/* Osnovno poravnanje, isto ono koje okvir objavljenog artifacta dodaje sam */
:root { color-scheme: light dark; }
img { max-width: 100%; }
[hidden] { display: none !important; }

:root{
    --bg:#F1F4F3;
    --surface:#FFFFFF;
    --surface-2:#E7ECEA;
    --line:#CBD6D2;
    --line-soft:#DEE6E3;
    --ink:#141F1D;
    --ink-2:#41534F;
    --ink-3:#6D807B;
    --accent:#0F5C51;
    --accent-soft:#DCEAE6;
    --good:#1B6E43;
    --good-soft:#DDEDE2;
    --warn:#8A5410;
    --warn-soft:#F3E7D2;
    --bad:#9A2F2A;
    --bad-soft:#F2DEDC;
    --radius:4px;
    --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
    --body:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
    --display:"Bitter",Georgia,"Times New Roman",serif;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0D1413; --surface:#151E1C; --surface-2:#1D2826;
      --line:#2E3E3A; --line-soft:#243130;
      --ink:#E4EBE8; --ink-2:#AFBFBA; --ink-3:#82938E;
      --accent:#5CC4B0; --accent-soft:#16302B;
      --good:#67C48F; --good-soft:#142C1F;
      --warn:#D9A45B; --warn-soft:#2E2416;
      --bad:#E08A83; --bad-soft:#301A18;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0D1413; --surface:#151E1C; --surface-2:#1D2826;
    --line:#2E3E3A; --line-soft:#243130;
    --ink:#E4EBE8; --ink-2:#AFBFBA; --ink-3:#82938E;
    --accent:#5CC4B0; --accent-soft:#16302B;
    --good:#67C48F; --good-soft:#142C1F;
    --warn:#D9A45B; --warn-soft:#2E2416;
    --bad:#E08A83; --bad-soft:#301A18;
  }

  *{box-sizing:border-box}
  body{
    background:var(--bg);color:var(--ink);font-family:var(--body);
    font-size:16px;line-height:1.55;margin:0;
    padding-inline:20px;padding-block:0 64px;-webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1060px;margin:0 auto;display:flex;flex-direction:column;gap:34px}

  header{padding-block:44px 0;display:flex;flex-direction:column;gap:14px}
  .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
  h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,5.2vw,44px);line-height:1.1;margin:0;text-wrap:balance;letter-spacing:-.01em}
  .standfirst{max-width:64ch;color:var(--ink-2);font-size:17px;margin:0}

  .verdict{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);display:grid;grid-template-columns:repeat(3,1fr)}
  .v-cell{padding:20px 22px;display:flex;flex-direction:column;gap:5px;border-left:1px solid var(--line-soft)}
  .v-cell:first-child{border-left:0}
  .v-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
  .v-num{font-family:var(--mono);font-weight:600;font-size:clamp(19px,3.2vw,25px);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
  .v-note{font-size:13.5px;color:var(--ink-2)}
  .v-cell.hero .v-num{color:var(--accent)}

  .statusbar{display:flex;flex-wrap:wrap;gap:10px}
  .chip{
    display:flex;align-items:baseline;gap:8px;border:1px solid var(--line);border-radius:99px;
    padding:6px 14px;background:var(--surface);font-size:13px;color:var(--ink-2);
  }
  .chip b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
  .chip.ok{border-color:var(--good);background:var(--good-soft);color:var(--good)}
  .chip.ok b{color:var(--good)}
  .chip.warn{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
  .chip.warn b{color:var(--warn)}
  .chip.over{border-color:var(--bad);background:var(--bad-soft);color:var(--bad)}
  .chip.over b{color:var(--bad)}

  section{display:flex;flex-direction:column;gap:16px}
  h2{font-family:var(--display);font-weight:600;font-size:20px;margin:0;letter-spacing:-.005em;display:flex;align-items:baseline;gap:10px}
  h2 .n{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:500}
  .lede{margin:0;color:var(--ink-2);max-width:66ch;font-size:15.5px}

  .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}

  .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:18px 20px}
  .field{display:grid;grid-row:span 3;grid-template-rows:subgrid;gap:5px;align-content:start}
  @supports not (grid-template-rows:subgrid){
    .field{display:flex;flex-direction:column}
    .field label{min-height:2.7em}
    .field .hint{min-height:1.4em}
  }
  .field label{font-size:12.5px;color:var(--ink-2);font-weight:500;letter-spacing:.01em;align-self:end}
  .field .hint{font-size:11.5px;color:var(--ink-3);align-self:start}
  input[type="number"]{
    font-family:var(--mono);font-size:14.5px;font-variant-numeric:tabular-nums;
    background:var(--bg);color:var(--ink);border:1px solid var(--line);
    border-radius:3px;padding:8px 10px;width:100%;
  }
  input[type="number"]:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}

  .panel-foot{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:20px;padding-top:18px;border-top:1px solid var(--line-soft)}
  .btn{
    font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--accent);
    background:var(--accent-soft);border:1px solid var(--accent);border-radius:3px;
    padding:7px 14px;cursor:pointer;
  }
  .btn.ghost{background:transparent;border-color:var(--line);color:var(--ink-2);font-weight:500}
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .panel-foot span{font-size:13px;color:var(--ink-3)}

  .conditional{
    margin-top:20px;padding:18px;border:1px dashed var(--warn);border-radius:var(--radius);
    background:var(--warn-soft);display:flex;flex-direction:column;gap:14px;
  }
  .conditional .q{display:flex;gap:10px;align-items:flex-start}
  .conditional .q input{margin-top:4px;accent-color:var(--warn);width:16px;height:16px}
  .conditional .q label{font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.4}
  .conditional .q .why{display:block;font-weight:400;font-size:13px;color:var(--ink-2);margin-top:3px}
  .conditional .sub-field{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-2)}
  .conditional .sub-field input{max-width:110px}

  .subgroup{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:14px}
  .sub-h{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
  .field .checkwrap{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);
    border-radius:3px;padding:8px 10px;font-size:12.5px;color:var(--ink-2);min-height:39px}
  .field .checkwrap input{width:15px;height:15px;accent-color:var(--accent);margin:0;flex:none}
  .field .checkwrap:focus-within{outline:2px solid var(--accent);outline-offset:1px}

  .slider-row{display:flex;flex-direction:column;gap:10px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
  .slider-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
  .slider-head label{font-size:12.5px;color:var(--ink-2);font-weight:500}
  .slider-head strong{font-family:var(--mono);font-size:17px;font-variant-numeric:tabular-nums;color:var(--accent)}
  input[type="range"]{width:100%;accent-color:var(--accent)}
  input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--ink-3)}

  .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
  table{border-collapse:collapse;width:100%;min-width:620px}
  th,td{padding:10px 16px;text-align:right;font-variant-numeric:tabular-nums}
  th:first-child,td:first-child{text-align:left;font-variant-numeric:normal}
  thead th{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500;border-bottom:1px solid var(--line);padding-block:14px;vertical-align:bottom}
  table[data-win="p"] thead th:nth-child(2),
  table[data-win="l"] thead th:nth-child(3),
  table[data-win="s"] thead th:nth-child(4){color:var(--accent)}
  tbody td{font-family:var(--mono);font-size:14px;border-bottom:1px solid var(--line-soft);color:var(--ink-2)}
  tbody td:first-child{font-family:var(--body);font-size:14.5px;color:var(--ink)}
  tbody tr.total td{font-weight:600;color:var(--ink);border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
  tbody tr.keep td{font-weight:600;color:var(--ink)}
  tbody tr:last-child td{border-bottom:0}
  table[data-win="p"] tbody td:nth-child(2),
  table[data-win="l"] tbody td:nth-child(3),
  table[data-win="s"] tbody td:nth-child(4){background:var(--accent-soft);color:var(--ink)}
  .win-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
    text-transform:uppercase;padding:2px 7px;border-radius:99px;margin-top:6px;
    background:var(--accent-soft);color:var(--accent)}
  .sub{display:block;font-family:var(--body);font-size:12px;color:var(--ink-3);font-variant-numeric:normal}
  .flag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:99px;margin-top:6px}
  .flag.no{background:var(--bad-soft);color:var(--bad)}
  .flag.yes{background:var(--good-soft);color:var(--good)}

  .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
  .note{border-left:2px solid var(--line);padding:2px 0 2px 16px;display:flex;flex-direction:column;gap:6px}
  .note.alert{border-left-color:var(--warn)}
  .note.key{border-left-color:var(--accent)}
  .note h3{margin:0;font-family:var(--body);font-size:14.5px;font-weight:600;letter-spacing:.01em}
  .note p{margin:0;font-size:14px;color:var(--ink-2)}
  .note .date{font-family:var(--mono);font-size:12px;color:var(--warn)}
  .note.key .date{color:var(--accent)}

  dl.params{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px 24px}
  dl.params div{display:flex;flex-direction:column;gap:1px}
  dl.params dt{font-size:12.5px;color:var(--ink-3)}
  dl.params dd{margin:0;font-family:var(--mono);font-size:14.5px;font-variant-numeric:tabular-nums}

  footer{border-top:1px solid var(--line);padding-top:18px;color:var(--ink-3);font-size:13px;display:flex;flex-direction:column;gap:8px}

  @media (max-width:640px){
    .verdict{grid-template-columns:1fr}
    .v-cell{border-left:0;border-top:1px solid var(--line-soft)}
    .v-cell:first-child{border-top:0}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}