/* UNLIMITED.RS Tools – IBM Plex Sans/Mono (self-hosted, OFL). Latin, Latin Extended (š č ć ž đ) i ćirilica (.срб). */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-latin-400-normal.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:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-latin-ext-400-normal.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:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-sans-latin-500-normal.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:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-sans-latin-ext-500-normal.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:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-sans-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-latin-600-normal.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:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-latin-ext-600-normal.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:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(../fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-mono-latin-400-normal.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:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-mono-latin-ext-400-normal.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:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-mono-latin-500-normal.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:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-mono-latin-ext-500-normal.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:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(../fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ==========================================================================
   Brend tokeni – na jednom mestu. Zamenite tačnim UNLIMITED.RS vrednostima.
   ========================================================================== */
:root {
  --brand: #0d5bd7;
  --brand-strong: #0a47a8;
  --brand-tint: #e9f0fc;
  --ink: #0f1e33;
  --ink-2: #3f4e63;
  --ink-3: #5c6b80;
  --paper: #f3f5f8;
  --surface: #ffffff;
  --line: #dde3ea;
  --line-strong: #c3ccd7;
  --ok: #12703f;      --ok-bg: #e6f4ec;    --ok-line: #b9dfc9;
  --warn: #9a4f00;    --warn-bg: #fff2df;  --warn-line: #f2d3a4;
  --bad: #b1222d;     --bad-bg: #fdecee;   --bad-line: #f2c2c7;
  --lock: #34445c;    --lock-bg: #edf1f6;
  --neutral: #44546a; --neutral-bg: #eef1f5;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --wrap: 1120px;
  --shadow-search: 0 1px 2px rgba(15, 30, 51, .06), 0 10px 30px -14px rgba(15, 30, 51, .22);
  color-scheme: light;
}

/* ---------- Osnova ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 400 1rem/1.55 var(--font); color: var(--ink); background: var(--paper);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; outline: none; }
a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-strong); }
h1, h2, h3 { line-height: 1.2; }
p { margin: 0 0 .75em; }
code, kbd, pre, .mono { font-family: var(--mono); }
.mono { font-size: .94em; overflow-wrap: anywhere; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
:focus:not(:focus-visible) { outline: none; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 100; padding: 8px 14px; background: var(--ink); color: #fff; border-radius: var(--r-sm); }
.skip-link:focus { left: 16px; color: #fff; }
.muted { color: var(--ink-3); }
.i { width: 16px; height: 16px; flex: none; }

/* ---------- Header ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-logo { display: flex; align-items: center; }
.brand-logo img { display: block; height: 28px; width: auto; }
.brand-tools {
  position: relative; padding: 4px 8px 3px; border-radius: 4px; background: var(--brand); color: #fff;
  font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-decoration: none; line-height: 1.3;
}
.brand-tools::before { content: ''; position: absolute; left: -8px; top: 2px; bottom: 2px; width: 1px; background: var(--line-strong); }
.brand-tools:hover { color: #fff; background: var(--brand-strong); }
.back-link { color: var(--ink-2); font-size: .875rem; font-weight: 500; text-decoration: none; white-space: nowrap; }
.back-link:hover { color: var(--brand); }

/* ---------- Dugmad ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer;
  font: inherit; text-decoration: none; border-radius: var(--r-md); white-space: nowrap;
}
.btn-primary { background: var(--brand); color: #fff; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .9375rem; }
.btn-primary:hover { background: var(--brand-strong); color: #fff; }
.btn-secondary { min-height: 40px; padding: 0 16px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); font-weight: 500; font-size: .9375rem; }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
.btn-cta {
  min-height: 54px; padding: 0 34px; background: var(--brand); color: #fff; font-size: 1rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 20px -10px rgba(13, 91, 215, .7);
}
.btn-cta:hover { background: var(--brand-strong); color: #fff; }
.link-btn { padding: 4px 0; border: 0; background: none; color: var(--brand); font: inherit; font-size: .8125rem; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 44px; }
.hero--tool { padding-top: 40px; }
.hero-inner { max-width: calc(820px + 48px); }
.hero-title { margin: 0 0 10px; font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.08; }
.hero-lede { margin: 0 0 28px; max-width: 62ch; font-size: 1.125rem; color: var(--ink-2); }
.crumbs { margin-bottom: 14px; font-size: .875rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.examples { margin: 14px 0 0; font-size: .875rem; color: var(--ink-3); }
.examples span { margin-right: 4px; }
.examples a { margin-right: 10px; color: var(--ink-2); text-decoration-style: dotted; }

/* ---------- Pretraga ---------- */
.search-label { display: block; margin-bottom: 8px; font-weight: 500; font-size: .9375rem; }
.search-box {
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 20px;
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--r-lg);
  box-shadow: var(--shadow-search); transition: border-color .15s, box-shadow .15s;
}
.search-box:focus-within { border-color: var(--brand); box-shadow: var(--shadow-search), 0 0 0 4px rgba(13, 91, 215, .14); }
.search-box input {
  flex: 1; min-width: 0; height: 48px; border: 0; outline: none; background: transparent; color: var(--ink);
  font: 500 1.1875rem var(--font);
}
.search-box input::placeholder { color: #8c99ab; font-weight: 400; }
.search-box input[aria-invalid='true'] { color: var(--bad); }
.search-kind { padding: 3px 9px; border-radius: 999px; background: var(--neutral-bg); color: var(--ink-2); font-size: .75rem; font-weight: 500; white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
.search-kind:empty { display: none; }
.search-kbd { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-3); font-size: .6875rem; white-space: nowrap; }
.search-submit { height: 48px; padding: 0 28px; }
.search-box:focus-within .search-kbd { display: none; }
.tool-switch { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; border: 0; }
.tool-opt { position: relative; }
.tool-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tool-opt span {
  display: inline-block; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--ink-2); font-size: .875rem; font-weight: 500; transition: background .12s, color .12s, border-color .12s;
}
.tool-opt input:hover + span { border-color: var(--line-strong); color: var(--ink); }
.tool-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.tool-opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.search-hint { min-height: 1.4em; margin: 8px 0 0; font-size: .8125rem; color: var(--ink-3); }
.search--compact .search-box { padding: 4px 4px 4px 16px; border-radius: var(--r-md); box-shadow: none; }
.search--compact .search-box input { height: 40px; font-size: 1.0625rem; }
.search--compact .search-submit { height: 40px; padding: 0 20px; font-size: .875rem; }
.search--compact .tool-switch { margin-top: 10px; }
.search--compact .tool-opt span { padding: 4px 12px; font-size: .8125rem; }
.search--compact .search-hint:empty { display: none; }

/* ---------- IP kartica ---------- */
.ip-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 32px; padding: 14px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}
.ip-title { flex-basis: 100%; margin: 0; font-size: .8125rem; font-weight: 500; color: var(--ink-3); }
.ip-value { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.125rem; font-weight: 500; }
.ip-strip .copy { margin-left: auto; }
.ip-ptr { flex-basis: 100%; margin: 0; font-size: .8125rem; color: var(--ink-3); overflow-wrap: anywhere; }

/* ---------- Sekcije, lista alata, istorija, FAQ ---------- */
.section { padding: 40px 24px; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.section-title { margin: 0 0 14px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; }
.tool-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.tool-list li + li { border-top: 1px solid var(--line); }
.tool-link { display: grid; grid-template-columns: 150px 1fr; gap: 4px 20px; align-items: baseline; padding: 15px 20px; color: var(--ink); text-decoration: none; }
.tool-link:hover { background: var(--paper); color: var(--ink); }
.tool-link:hover .tool-name { color: var(--brand); }
.tool-name { font-weight: 600; }
.tool-desc { color: var(--ink-2); font-size: .9375rem; }
.history { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.history-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.history h2 { margin: 0 0 10px; font-size: 1rem; font-weight: 600; }
.history-list { list-style: none; margin: 0; padding: 0; }
.history-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; color: var(--ink); text-decoration: none; border-top: 1px solid var(--line); font-size: .9375rem; }
.history-list li:first-child a { border-top: 0; }
.history-list a:hover { color: var(--brand); }
.faq { margin: 0; max-width: 70ch; }
.faq-item { padding: 14px 0; border-top: 1px solid var(--line); }
.faq-item:first-child { border-top: 0; padding-top: 0; }
.faq dt { font-weight: 600; }
.faq dd { margin: 6px 0 0; color: var(--ink-2); }
.tag { display: inline-block; padding: 1px 7px; border-radius: 4px; background: var(--neutral-bg); color: var(--ink-2); font: 600 .6875rem/1.6 var(--font); letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }

/* ---------- Rezultat: okvir i učitavanje ---------- */
.result-wrap { padding-top: 24px; padding-bottom: 56px; }
.result-bar { margin-bottom: 28px; max-width: 820px; }
.loading { padding: 26px 28px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.loading-title { margin: 0 0 14px; font-size: 1.25rem; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { display: flex; align-items: center; gap: 10px; padding: 5px 0; color: var(--ink-2); }
.step-ico { display: inline-flex; width: 16px; height: 16px; flex: none; }
.step[data-state='active'] { color: var(--ink); font-weight: 500; }
.step[data-state='active'] .step-ico { border: 2px solid var(--line-strong); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
.step[data-state='done'] .step-ico { color: var(--ok); }
.step[data-state='failed'] .step-ico { color: var(--bad); }
.step[data-state='failed'] { color: var(--ink-3); }
.step[data-state='skipped'] { color: var(--ink-3); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Rezultat: zaglavlje ---------- */
.r-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.r-head-main { min-width: 0; }
.r-domain { margin: 0; font-size: clamp(2rem, 1.15rem + 3.6vw, 3.5rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.04; overflow-wrap: anywhere; }
.r-domain--small { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); }
.r-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px 0 0; color: var(--ink-3); font-size: .875rem; }
.r-head-status { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 5px 10px; border-radius: 999px; font-size: .875rem; font-weight: 600; line-height: 1.35; }
.pill.tone-ok { background: var(--ok-bg); color: var(--ok); }
.pill.tone-warn { background: var(--warn-bg); color: var(--warn); }
.pill.tone-bad { background: var(--bad-bg); color: var(--bad); }
.pill.tone-lock { background: var(--lock-bg); color: var(--lock); }
.pill.tone-neutral, .pill.tone-unknown { background: var(--neutral-bg); color: var(--neutral); }
.tone-text-ok { color: var(--ok); }
.tone-text-warn { color: var(--warn); }
.tone-text-bad { color: var(--bad); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin: 0 0 22px; }
.fact dt { font-size: .8125rem; color: var(--ink-3); }
.fact dd { margin: 3px 0 0; font-size: 1.0625rem; font-weight: 600; overflow-wrap: anywhere; }

/* Vremenska linija važenja – registracija domena / sertifikat */
.lifeline { margin: 26px 0 24px; --pct: 0%; }
.lifeline-track { position: relative; height: 8px; border-radius: 999px; background: var(--line); }
.lifeline-fill { position: absolute; inset: 0 auto 0 0; width: var(--pct); border-radius: 999px; background: var(--brand); }
.lifeline.tone-warn .lifeline-fill { background: var(--warn); }
.lifeline.tone-bad .lifeline-fill { background: var(--bad); }
.lifeline-now { position: absolute; top: -6px; bottom: -6px; left: var(--pct); width: 2px; margin-left: -1px; background: var(--ink); border-radius: 2px; }
.lifeline-now span { position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%); font-size: .6875rem; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.lifeline-labels { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; font-size: .875rem; font-weight: 500; }
.lifeline-labels span { display: grid; }
.lifeline-labels span:last-child { text-align: right; }
.lifeline-labels small { font-size: .75rem; font-weight: 400; color: var(--ink-3); }
.lifeline-fill, .bar-fill { width: var(--pct); }

.quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.qa-label { margin-right: 2px; font-size: .8125rem; color: var(--ink-3); }
.qa { display: inline-flex; align-items: center; min-height: 34px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 500; text-decoration: none; }
.qa:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- Kartice i ključ/vrednost ---------- */
.grid { display: grid; gap: 16px; margin-bottom: 16px; }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--contacts { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.card { min-width: 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.card--wide { margin-bottom: 16px; }
.card-title { margin: 0 0 10px; font-size: 1rem; font-weight: 600; }
.mini-title { margin: 16px 0 6px; font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
.kv { margin: 0; }
.kv-row { display: grid; grid-template-columns: minmax(96px, 36%) minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.kv-row:first-child { border-top: 0; padding-top: 2px; }
.kv dt { color: var(--ink-3); font-size: .875rem; }
.kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv-val { min-width: 0; }
.kv-sub { flex-basis: 100%; font-size: .75rem; color: var(--ink-3); overflow-wrap: anywhere; }
.kv--compact .kv-row { padding: 4px 0; }

.copy {
  display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 9px; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink-2); font: 500 .75rem var(--font); cursor: pointer; white-space: nowrap;
}
.copy .i { width: 13px; height: 13px; }
.copy:hover { border-color: var(--brand); color: var(--brand); }
.copy.is-copied { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok); }

.notice { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 13px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.notice .i { margin-top: 3px; }
.notice p { margin: 0; }
.notice p + p { margin-top: 10px; }
.notice--warn { background: var(--warn-bg); border-color: var(--warn-line); color: #5c3100; }
.notice--bad { background: var(--bad-bg); border-color: var(--bad-line); color: #6d1219; }
.notice--ok { background: var(--ok-bg); border-color: var(--ok-line); }
.notice--neutral { background: var(--surface); color: var(--ink-2); }

/* ---------- WHOIS ---------- */
.ns-list, .ns-ips, .ds-list, .addr-list, .notes, .source-list, .san-list, .checks { list-style: none; margin: 0; padding: 0; }
.ns-list > li { padding: 8px 0; border-top: 1px solid var(--line); }
.ns-list > li:first-child { border-top: 0; padding-top: 0; }
.ns-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-weight: 500; }
.ns-ips { margin-top: 4px; }
.ns-ips li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 2px 0; font-size: .8125rem; color: var(--ink-2); }
.dnssec { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.dnssec .mini-title { margin-top: 0; }
.mini-details { margin-top: 10px; }
.mini-details summary { color: var(--brand); font-size: .8125rem; font-weight: 500; cursor: pointer; }
.status-list { list-style: none; margin: 0; padding: 0; }
.status-item { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.status-item:first-child { border-top: 0; padding-top: 0; }
.status-code { justify-self: start; font-size: .75rem; color: var(--ink-3); }
.status-desc { grid-column: 1 / -1; margin: 0; font-size: .875rem; color: var(--ink-2); }
.r-section { margin: 8px 0 16px; }
.contact .card-title { font-size: .9375rem; }
.redacted { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink-2); font-size: .9375rem; }
.r-head--available { display: block; padding: 30px 32px; border: 1px solid var(--ok-line); border-radius: var(--r-lg); background: var(--ok-bg); }
.avail-title { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; color: var(--ok); font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); font-weight: 600; letter-spacing: -.015em; }
.avail-title .i { width: 1.1em; height: 1.1em; }
.avail-sub { margin: 0 0 20px; font-size: 1.125rem; color: var(--ink-2); }
.fine { max-width: 64ch; margin: 16px 0 0; font-size: .8125rem; color: var(--ink-2); }
.other-domain { margin: 22px 0 0; font-size: .9375rem; }
.notes li { padding: 8px 0; border-top: 1px solid var(--line); font-size: .875rem; }
.notes li p { margin: 4px 0 0; color: var(--ink-2); }

/* ---------- Detalji, raw, tabovi ---------- */
.advanced, .raw-details { margin: 16px 0 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.advanced > summary, .raw-details > summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; font-weight: 600; cursor: pointer; list-style: none; }
.advanced > summary::-webkit-details-marker, .raw-details > summary::-webkit-details-marker { display: none; }
.advanced > summary::after, .raw-details > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .15s; }
.advanced[open] > summary::after, .raw-details[open] > summary::after { transform: rotate(-135deg); }
.advanced[open] > summary, .raw-details[open] > summary { border-bottom: 1px solid var(--line); }
.advanced-body { padding: 12px 20px 18px; }
.tab-list { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 16px 0; border-bottom: 1px solid var(--line); }
.tab-list [role='tab'] { margin-bottom: -1px; padding: 9px 12px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-2); font: 500 .875rem var(--font); cursor: pointer; }
.tab-list [role='tab'][aria-selected='true'] { color: var(--ink); border-bottom-color: var(--brand); }
.tab-panel { padding: 14px 20px 20px; }
.pre-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.pre { max-height: 520px; margin: 0; padding: 14px 16px; overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .8125rem; line-height: 1.55; white-space: pre; tab-size: 2; }

.r-source { margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--line); }
.r-source-title { margin: 0 0 6px; font-size: .875rem; font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere; }
.source-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 0; font-size: .8125rem; overflow-wrap: anywhere; }
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: .8125rem; color: var(--ink-3); }

/* ---------- Greška ---------- */
.r-error-msg { max-width: 62ch; font-size: 1.0625rem; color: var(--ink-2); }
.r-error-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.r-error .notice { max-width: 70ch; }

/* ---------- DNS ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .8125rem var(--font); cursor: pointer; }
.chip--empty { color: var(--ink-3); font-weight: 500; }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-count { font-size: .75rem; font-weight: 500; opacity: .75; }
.dns-type { margin: 0 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.dns-type-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.dns-type-head h2 { margin: 0; font: 600 1rem var(--mono); }
.dns-type-head p { margin: 0; font-size: .8125rem; color: var(--ink-3); }
.dns-type.is-empty { background: transparent; border-style: dashed; }
.dns-type.is-empty .dns-type-head { border-bottom: 0; padding-bottom: 0; }
.dns-type > .kv-sub { display: block; padding: 8px 18px 0; }
.records { list-style: none; margin: 0; padding: 0; }
.record { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 14px; padding: 10px 18px; border-top: 1px solid var(--line); }
.record:first-child { border-top: 0; }
.rec-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.rec-main { min-width: 0; overflow-wrap: anywhere; }
.rec-wrap { white-space: pre-wrap; word-break: break-all; }
.rec-prio { display: inline-block; min-width: 2.2em; padding: 0 6px; border-radius: 4px; background: var(--brand-tint); color: var(--brand-strong); font: 500 .8125rem var(--mono); text-align: center; }
.rec-ttl { font-size: .75rem; color: var(--ink-3); white-space: nowrap; }
.rec-empty { margin: 0; padding: 8px 18px 12px; font-size: .875rem; color: var(--ink-3); }
.record .kv { flex-basis: 100%; }

/* ---------- Resolve / SSL ---------- */
.addr-list > li { padding: 8px 0; border-top: 1px solid var(--line); }
.addr-list > li:first-child { border-top: 0; padding-top: 0; }
.addr-list p { margin: 6px 0 0; }
.addr-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 500; }
.chain { margin: 0; padding-left: 1.3rem; }
.chain li { margin: 0 0 8px; }
.chain .kv-sub { display: block; }
.checks .check { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.checks .check:first-child { border-top: 0; padding-top: 0; }
.check p { margin: 0; }
.check-ico { display: inline-flex; margin-top: 3px; }
.check.tone-ok .check-ico { color: var(--ok); }
.check.tone-warn .check-ico { color: var(--warn); }
.check.tone-bad .check-ico { color: var(--bad); }
.san-list { display: flex; flex-wrap: wrap; gap: 6px; }
.san-list li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 3px 3px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .8125rem; }
.san-list .copy { min-height: 26px; }

/* ---------- Ping ---------- */
.metric { margin: 0 0 22px; }
.metric-value { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.metric-num { font-size: clamp(3rem, 2rem + 4vw, 4.5rem); font-weight: 600; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-unit { font-size: 1.375rem; font-weight: 600; color: var(--ink-2); }
.metric-label { margin: 6px 0 0; font-size: .875rem; color: var(--ink-3); }
.bars { list-style: none; margin: 0; padding: 0; }
.bar-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 76px; align-items: center; gap: 10px; padding: 6px 0; }
.bar-seq { font-size: .75rem; color: var(--ink-3); }
.bar { height: 10px; border-radius: 999px; background: var(--paper); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--brand); --pct: 0%; }
.bar-val { font: 500 .8125rem var(--mono); text-align: right; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 48px; padding: 28px 0 32px; background: var(--surface); border-top: 1px solid var(--line); }
.footer-row { display: grid; gap: 14px; }
.footer-brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.footer-name { margin: 0; font-size: .875rem; font-weight: 600; letter-spacing: .1em; }
.footer-tools { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: .875rem; color: var(--ink-3); }
.footer-tools a { color: var(--ink-2); text-decoration: none; }
.footer-tools a:hover { color: var(--brand); }
.footer-privacy { max-width: 72ch; margin: 0; font-size: .8125rem; color: var(--ink-3); }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .8125rem; color: var(--ink-3); }
.footer-meta a { font-weight: 600; text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 > :last-child { grid-column: 1 / -1; }
  .split { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 680px) {
  .wrap { padding: 0 16px; }
  .section { padding: 32px 16px; }
  .hero { padding: 36px 0 28px; }
  .hero-lede { font-size: 1rem; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .grid--3 > :last-child { grid-column: auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .search-box { flex-wrap: wrap; padding: 6px; gap: 6px; }
  .search-box input { flex-basis: 100%; height: 46px; padding: 0 10px; font-size: 1.0625rem; }
  .search-kind { order: 3; margin-left: 10px; }
  .search-kbd { display: none; }
  .search-submit { flex: 1 1 100%; height: 46px; order: 4; }
  .search--compact .search-box input { height: 42px; }
  .tool-link { grid-template-columns: 1fr; }
  .kv-row { grid-template-columns: 1fr; }
  .record { grid-template-columns: minmax(0, 1fr) auto; }
  .rec-ttl { grid-column: 1; grid-row: 2; }
  .r-head--available { padding: 22px 18px; }
  .btn-cta { width: 100%; }
  .header-row { min-height: 56px; }
  .brand-logo img { height: 24px; }
  .back-link { font-size: .8125rem; }
  .card { padding: 16px; }
}
@media (pointer: coarse) { .search-kbd { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Dorade ---------- */
.r-domain:focus, main:focus { outline: none; }
/* U listama i tabelama copy dugme je samo ikonica; potvrda "✓ Kopirano" se i dalje vidi. */
.kv .copy, .ns-list .copy, .addr-list .copy, .san-list .copy { padding: 0 7px; }
.kv .copy:not(.is-copied) .copy-label, .ns-list .copy:not(.is-copied) .copy-label,
.addr-list .copy:not(.is-copied) .copy-label, .san-list .copy:not(.is-copied) .copy-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.page-home .section, .page-tool .section { max-width: calc(820px + 48px); }
.lifeline-now[data-edge='end'] span { left: auto; right: 0; transform: none; }
.lifeline-now[data-edge='start'] span { left: 0; transform: none; }

/* ---------- Jezik, IP link ---------- */
.footer-links { display: inline-flex; flex-wrap: wrap; gap: 18px; align-items: baseline; }
.lang-switch { color: var(--ink-2); font-weight: 600; text-decoration: none; padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 999px; }
.lang-switch:hover { border-color: var(--brand); color: var(--brand); }
.ip-link { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.ip-link:hover { color: var(--brand); }

/* ---------- DNS propagacija ---------- */
.prop-meter { height: 8px; margin: -6px 0 20px; border-radius: 999px; background: var(--line); overflow: hidden; }
.prop-meter-fill { display: block; height: 100%; width: var(--pct); border-radius: 999px; background: var(--ok); --pct: 0%; }
.prop-meter-fill.tone-warn { background: var(--warn); }
.prop-meter-fill.tone-bad { background: var(--bad); }
a.chip { text-decoration: none; }
.chip.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
.card--flush { padding: 0; margin-bottom: 16px; overflow: hidden; }
.card--flush > .card-title { padding: 14px 18px 12px; margin: 0; border-bottom: 1px solid var(--line); }
.card--flush > .muted { padding: 14px 18px; margin: 0; }
.prop-table { list-style: none; margin: 0; padding: 0; }
.prop-row { display: grid; grid-template-columns: 20px minmax(170px, 1.1fr) minmax(0, 2fr) auto; gap: 4px 14px; align-items: start; padding: 11px 18px; border-top: 1px solid var(--line); }
.prop-row:first-child { border-top: 0; }
.prop-ico { display: inline-flex; margin-top: 3px; }
.prop-row.tone-ok .prop-ico { color: var(--ok); }
.prop-row.tone-warn { background: #fffaf2; }
.prop-row.tone-warn .prop-ico { color: var(--warn); }
.prop-row.tone-bad .prop-ico { color: var(--bad); }
.prop-row.tone-neutral .prop-ico { color: var(--ink-3); }
.prop-who { min-width: 0; }
.prop-who strong { display: block; font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.prop-note { font-family: var(--font); }
.prop-ans { min-width: 0; }
.prop-values { list-style: none; margin: 0; padding: 0; font-size: .875rem; overflow-wrap: anywhere; }
.prop-values li + li { margin-top: 2px; }
.prop-expected { margin-top: 6px; }
.prop-status { display: block; margin-top: 2px; font-size: .75rem; color: var(--ink-3); }
.prop-meta { display: grid; gap: 2px; justify-items: end; font-size: .75rem; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 680px) {
  .prop-row { grid-template-columns: 20px minmax(0, 1fr); padding: 11px 14px; }
  .prop-ans, .prop-meta { grid-column: 2; }
  .prop-meta { display: flex; gap: 12px; justify-items: start; }
}

/* ---------- Isticanje relevantnih alata za uneti domen / IP ---------- */
.tool-switch.has-relevant .tool-opt[data-relevant] input:not(:checked) + span {
  background: var(--brand-tint); border-color: #a9c2f2; color: var(--brand-strong);
}
.tool-switch.has-relevant .tool-opt[data-relevant] span::before {
  content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; border-radius: 50%; background: currentColor; vertical-align: middle;
}
.tool-switch.has-relevant .tool-opt:not([data-relevant]) input:not(:checked) + span { color: var(--ink-3); }

/* ---------- Blacklist ---------- */
.bl-sub { margin: 0; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: .8125rem; color: var(--ink-2); overflow-wrap: anywhere; }
.bl-status { display: block; font-size: .875rem; font-weight: 500; }
.prop-row.tone-bad { background: #fff6f7; }
.prop-row.tone-bad .bl-status { color: var(--bad); }
.prop-who .tag { margin: 4px 6px 0 0; }
.bl-clean > summary { display: flex; align-items: center; gap: 8px; padding: 11px 18px; border-top: 1px solid var(--line); color: var(--ok); font-size: .875rem; font-weight: 500; cursor: pointer; list-style: none; }
.bl-clean > summary::-webkit-details-marker { display: none; }
.prop-table + .bl-clean > summary { border-top: 1px solid var(--line); }
.card-title + .bl-clean > summary, .bl-sub + .bl-clean > summary { border-top: 0; }
.bl-clean[open] > summary { border-bottom: 1px solid var(--line); }

/* ---------- Zastave država ---------- */
.flag { display: inline-block; width: 20px; height: 15px; margin: 0 2px; border-radius: 2px; object-fit: cover; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(15, 30, 51, .14); }
.flag--lg { width: auto; height: .55em; margin-left: .3em; border-radius: 4px; vertical-align: .12em; }
.r-domain--flag { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 .1em; }
.country { display: inline-flex; align-items: center; gap: 6px; }
.country .flag { margin: 0; }
.country-code { font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.fact .country { font-weight: 600; }

/* ---------- Da li sajt radi: vreme po fazama ---------- */
.site-metric .metric-value { flex-wrap: wrap; }
.http-code { align-self: center; margin-left: 14px; padding: 4px 12px; border-radius: 999px; font: 600 .9375rem var(--mono); }
.http-code.tone-ok { background: var(--ok-bg); color: var(--ok); }
.http-code.tone-warn { background: var(--warn-bg); color: var(--warn); }
.http-code.tone-bad { background: var(--bad-bg); color: var(--bad); }
.http-code.tone-neutral { background: var(--neutral-bg); color: var(--neutral); }
.wf-wrap { margin: 0 0 24px; }
.wf { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--line); }
.wf-seg { display: block; height: 100%; width: var(--pct); min-width: 3px; --pct: 0%; }
.wf-seg + .wf-seg { border-left: 2px solid var(--paper); }
.wf-dns { background: #9ab8f2; }
.wf-redirect { background: #b9a7e3; }
.wf-connect { background: #5b8ae6; }
.wf-tls { background: #2c5fcf; }
.wf-server { background: #e3a13f; }
.wf-download { background: #3a9d6a; }
.wf-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--ink-2); }
.wf-legend li { display: inline-flex; align-items: center; gap: 6px; }
.wf-legend strong { font-weight: 600; color: var(--ink); }
.wf-dot { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- Speedtest ---------- */
.st { margin-top: 8px; padding: 26px 28px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-search); }
.st-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-metric { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color .2s, background .2s; }
.st-metric.is-active { border-color: var(--brand); background: var(--brand-tint); }
.st-label { margin: 0 0 4px; font-size: .8125rem; font-weight: 600; color: var(--ink-2); letter-spacing: .02em; }
.st-value { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.st-num { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.st-sub { margin: 4px 0 0; font-size: .8125rem; color: var(--ink-3); min-height: 1.3em; }
.st-progress { height: 6px; margin: 20px 0 12px; border-radius: 999px; background: var(--line); overflow: hidden; }
.st-bar { display: block; height: 100%; width: var(--pct); border-radius: 999px; background: var(--brand); transition: width .2s linear; --pct: 0%; }
.st-status { min-height: 1.5em; margin: 0 0 14px; color: var(--ink-2); }
.st-actions { margin: 0 0 12px; }
.st-actions .btn-cta[disabled] { opacity: .65; cursor: progress; }
.st-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; font-size: .8125rem; color: var(--ink-3); }
.page-speedtest .fine { margin-top: 14px; }
@media (max-width: 680px) {
  .st { padding: 18px 16px; }
  .st-gauges { grid-template-columns: 1fr 1fr; }
  .st-metric[data-st="ping"] { grid-column: 1 / -1; }
}

/* ---------- Monitoring domena ---------- */
.mon-hero { padding: 44px 0 36px; }
.mon-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "intro auth" "how auth"; grid-template-rows: auto 1fr; gap: 0 48px; align-items: start; }
.mon-intro { grid-area: intro; }
.mon-how { grid-area: how; }
.mon-auth-card { grid-area: auth; }
.mon-intro .hero-lede { margin-bottom: 22px; }
.mon-free { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 600; }
.mon-free-badge { padding: 3px 10px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: .8125rem; font-weight: 600; letter-spacing: .02em; }
.mon-types { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.mon-how { padding-bottom: 8px; }
.mon-types li { display: flex; gap: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.mon-types strong { display: block; margin-bottom: 2px; }
.mon-types p { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.mon-type-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--brand-tint); color: var(--brand); }
.mon-type-ico svg { width: 22px; height: 22px; }
.mon-steps-title { margin: 0 0 10px; font-size: 1rem; font-weight: 600; }
.mon-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 8px; }
.mon-steps li { counter-increment: step; display: flex; align-items: baseline; gap: 10px; color: var(--ink-2); }
.mon-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 600; }
.mon-auth-card { position: sticky; top: 20px; padding: 6px 26px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-search); }
.mon-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 0 -26px 20px; border-bottom: 1px solid var(--line); }
.mon-tabs [role="tab"] { padding: 16px 12px 13px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--ink-3); font: 600 1rem var(--font); cursor: pointer; }
.mon-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.mon-form-lede { margin: 0 0 16px; color: var(--ink-2); font-size: .9375rem; }
.mon-form { display: grid; gap: 14px; }
.mon-form label { display: grid; gap: 5px; min-width: 0; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.mon-form input:not([type="checkbox"]):not([type="radio"]), .mon-form select {
  width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: 400 1rem var(--font);
}
.mon-form input:focus, .mon-form select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13, 91, 215, .15); }
.mon-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.mon-check { display: flex !important; align-items: flex-start; gap: 10px !important; font-weight: 400 !important; font-size: .8125rem !important; line-height: 1.45; color: var(--ink-3) !important; }
.mon-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--brand); }
.mon-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mon-submit { width: 100%; min-height: 48px; }
.mon-forgot { margin: -4px 0 0; }
.mon-msg { min-height: 1.2em; margin: 0; font-size: .875rem; }
.mon-msg:empty { display: none; }
.mon-msg[data-tone="ok"] { padding: 10px 12px; border-radius: var(--r-md); background: var(--ok-bg); color: var(--ok); }
.mon-msg[data-tone="bad"] { padding: 10px 12px; border-radius: var(--r-md); background: var(--bad-bg); color: var(--bad); }
.mon-narrow { max-width: 320px; }
/* Dashboard */
.mon-wrap { padding-top: 28px; padding-bottom: 56px; max-width: 980px; }
.mon-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; }
.mon-title { margin: 0 0 4px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; }
.mon-top-actions { display: flex; gap: 8px; }
.mon-settings { margin-bottom: 18px; }
.mon-settings .mon-form + .mini-title { margin-top: 24px; }
.mon-settings .btn { justify-self: start; }
.mon-danger { color: var(--bad); border-color: var(--bad-line); }
.mon-pick { display: grid; gap: 16px; padding: 22px 24px; }
.mon-pick .card-title { margin: 0; font-size: 1.125rem; }
.mon-domain-field { display: grid; gap: 5px; max-width: 420px; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.mon-domain-field input { height: 46px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); font: 400 1.0625rem var(--font); }
.mon-domain-field input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13, 91, 215, .15); }
.mon-type-pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; border: 0; }
.mon-type-opt { position: relative; display: flex; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; background: var(--surface); }
.mon-type-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mon-type-opt strong { display: block; font-size: .9375rem; }
.mon-type-opt small { display: block; margin-top: 2px; color: var(--ink-3); font-size: .8125rem; line-height: 1.4; }
.mon-type-opt:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.mon-type-opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.mon-pick .btn-primary { justify-self: start; min-height: 46px; padding: 0 24px; }
.mon-plan { margin: 12px 0 0; font-size: .875rem; color: var(--ink-3); }
.mon-item { padding: 0; margin-bottom: 16px; overflow: hidden; }
.mon-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.mon-item-title { flex: 1; min-width: 0; }
.mon-item-title h2 { margin: 0; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mon-item-title p { margin: 2px 0 0; font-size: .875rem; color: var(--ink-3); }
.mon-item-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 18px 22px; }
.mon-item-body .mini-title:first-child { margin-top: 0; }
.mon-item-foot { display: grid; gap: 10px; padding: 14px 22px 16px; border-top: 1px solid var(--line); background: var(--paper); }
.mon-item-foot .quick-actions { margin: 0; }
.mon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mon-actions .btn { min-height: 36px; font-size: .875rem; }
.mon-remove { color: var(--ink-3); }
.mon-phase { margin: 0 0 14px; padding: 14px 16px; border-radius: var(--r-md); background: var(--neutral-bg); }
.mon-phase p { margin: 0; }
.mon-phase.tone-ok { background: var(--ok-bg); }
.mon-phase.tone-warn { background: var(--warn-bg); }
.mon-phase .btn-cta { margin-top: 14px; }
.mon-backorder-btn { margin-top: 14px; }
.mon-backorder-hint { margin: 8px 0 0; font-size: .875rem; color: var(--ink-2); }
.mon-company[hidden] { display: none; }
.mon-company { display: grid; gap: 12px; }
.mon-bo { margin-top: 14px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.mon-bo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.mon-phase .mon-bo p { margin: 0 0 6px; }
.mon-phase .mon-bo .mon-bo-title { font-weight: 700; }
.mon-bo-note { padding: 8px 12px; border-left: 3px solid var(--line); background: color-mix(in srgb, var(--neutral-bg) 60%, transparent); font-size: .9375rem; }
.mon-bo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px !important; }
.mon-bo-actions .btn { margin: 0; }
.mon-phase .mon-bo .mon-bo-small { margin: 8px 0 0; font-size: .875rem; color: var(--ink-2); }
.mon-form input[aria-invalid="true"] { border-color: var(--bad, #c62828); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad, #c62828) 18%, transparent); }
.bo-table td { vertical-align: top; }
.bo-table .bo-btns + .bo-btns { margin-top: 6px; }
.bo-offer { display: grid; gap: 8px; min-width: 220px; margin-bottom: 8px; }
.bo-offer label { display: grid; gap: 4px; font-size: .8125rem; color: var(--ink-2); }
.bo-offer input, .bo-offer textarea { font: inherit; font-size: .875rem; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm, 6px); background: var(--surface); color: var(--ink); }
.bo-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.bo-btns .btn { padding: 6px 12px; font-size: .8125rem; }
.mon-records { margin: 0; }
.mon-records > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-top: 1px solid var(--line); }
.mon-records > div:first-child { border-top: 0; }
.mon-records dt { font: 600 .8125rem var(--mono); color: var(--ink-2); }
.mon-records dd { margin: 0; min-width: 0; }
.mon-records ul { margin: 0; padding: 0; list-style: none; font-size: .8125rem; overflow-wrap: anywhere; }
.mon-events { list-style: none; margin: 0; padding: 0; }
.mon-events li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.mon-events li:first-child { border-top: 0; padding-top: 0; }
.mon-events p { margin: 0; }
.mon-events li.tone-ok .check-ico { color: var(--ok); }
.mon-events li.tone-warn .check-ico { color: var(--warn); }
.mon-events li.tone-bad .check-ico { color: var(--bad); }
@media (max-width: 900px) {
  .mon-hero-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "auth" "how"; grid-template-rows: auto; gap: 0; }
  .mon-auth-card { margin-bottom: 28px; }
  .mon-auth-card { position: static; }
  .mon-item-body, .mon-type-pick { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mon-row { grid-template-columns: 1fr; }
  .mon-auth-card { padding: 4px 18px 20px; }
  .mon-tabs { margin: 0 -18px 18px; }
}

/* Atribut hidden uvek sakriva element, i kad komponenta ima sopstveni display (npr. grid forme) */
[hidden] { display: none !important; }

/* ---------- Poziv na monitoring (WHOIS) ---------- */
.mon-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin: 0 0 22px; padding: 16px 18px; border: 1px solid #c9d8f5; border-radius: var(--r-md); background: var(--brand-tint); }
.mon-cta-text { flex: 1 1 280px; }
.mon-cta-text strong { display: block; }
.mon-cta-text p { margin: 2px 0 0; color: var(--ink-2); font-size: .9375rem; }
.mon-cta .btn { min-height: 42px; }

/* ---------- Modal "Prati domen" ---------- */
.mm { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: var(--r-lg); background: var(--surface); color: var(--ink); box-shadow: 0 24px 60px rgba(15, 30, 51, .28); }
.mm::backdrop { background: rgba(15, 30, 51, .45); }
.mm-box { padding: 0 24px 24px; }
.mm-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -24px 16px; padding: 18px 24px 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.mm-head h2 { margin: 0; font-size: 1.125rem; overflow-wrap: anywhere; }
.mm-close { flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink-2); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.mm-close:hover { background: var(--line); }
.mm-types { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.mm-types legend { margin-bottom: 8px; font-weight: 600; font-size: .9375rem; }
.mm-types .mon-type-opt { padding: 10px 12px; align-items: center; }
.mm-types .mon-type-ico { width: 34px; height: 34px; }
.mm-lede { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.mm-switch { margin: 0; text-align: center; font-size: .9375rem; }
.mm-pro-box { padding: 14px 16px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.mm-pro-box p { margin: 0 0 6px; }
.mm-pro-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.mm-pro-badge { background: var(--brand); color: #fff; }
.mm-pro-list { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: .9375rem; }
.mm-done { padding: 8px 0 4px; text-align: center; }
.mm-done-ico { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.mm-done-ico svg { width: 26px; height: 26px; }
.mm-done h3 { margin: 12px 0 6px; font-size: 1.25rem; }
.mm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }

/* ---------- Dashboard: Pro i predračuni ---------- */
.mon-pro { margin-top: 16px; padding: 22px 24px; }
.mon-pro .card-title { display: flex; align-items: center; gap: 8px; }
.mon-pro .mon-form { max-width: 520px; }
.mon-pro .btn-primary { justify-self: start; min-height: 44px; padding: 0 22px; }
.mon-invoices { margin-top: 22px; }
.mon-inv-list { margin: 0; padding: 0; list-style: none; }
.mon-inv-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--line); font-size: .9375rem; }
.mon-item-paused { padding: 14px 22px 0; }

/* ---------- Predračun ---------- */
.inv-wrap { max-width: 860px; padding-top: 24px; padding-bottom: 48px; }
.inv-actions { text-align: right; }
.inv { padding: 36px 40px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); color: #0f1e33; }
.inv-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 2px solid #0f1e33; }
.inv-brand strong { display: block; font-size: 1.5rem; letter-spacing: -.01em; }
.inv-brand strong span { color: var(--brand); }
.inv-brand > span { color: #5c6b80; }
.inv-title { text-align: right; }
.inv-title h1 { margin: 0 0 6px; font-size: 1.5rem; letter-spacing: .04em; text-transform: uppercase; }
.inv-title p { margin: 0; font-size: .9375rem; }
.inv-paid { margin-top: 6px !important; color: var(--ok); font-weight: 700; text-transform: uppercase; }
.inv-cancelled { margin-top: 6px !important; color: var(--bad); font-weight: 700; text-transform: uppercase; }
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 22px 0; }
.inv-parties h2, .inv-pay h2 { margin: 0 0 6px; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: #5c6b80; }
.inv-parties p { margin: 0; line-height: 1.6; }
.inv-table-wrap { overflow-x: auto; }
.inv-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.inv-table th { padding: 8px 10px; background: #f1f4f9; text-align: left; font-size: .8125rem; }
.inv-table td { padding: 10px; border-bottom: 1px solid #dfe5ee; }
.inv-table th:not(:first-child), .inv-table td:not(:first-child) { text-align: right; white-space: nowrap; }
.inv-totals { width: min(100%, 340px); margin: 16px 0 0 auto; }
.inv-totals div { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.inv-totals dt { color: #5c6b80; }
.inv-totals dd { margin: 0; font-variant-numeric: tabular-nums; }
.inv-total { margin-top: 4px; padding-top: 8px !important; border-top: 2px solid #0f1e33; font-weight: 700; font-size: 1.0625rem; }
.inv-total dt { color: #0f1e33 !important; }
.inv-pay { margin-top: 26px; padding: 16px 18px; border: 1px solid #dfe5ee; border-radius: var(--r-md); background: #f8fafc; }
.inv-pay dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.inv-pay dl div { display: contents; }
.inv-pay dt { color: #5c6b80; }
.inv-pay dd { margin: 0; font-weight: 600; }
.inv-note { margin: 20px 0 0; font-size: .8125rem; color: #5c6b80; }
@media (max-width: 640px) {
  .inv { padding: 22px 18px; }
  .inv-parties { grid-template-columns: 1fr; }
  .inv-title { text-align: left; }
  .inv-pay dl { grid-template-columns: 1fr; gap: 2px; }
  .inv-pay dd { margin-bottom: 8px; }
}
@media print {
  .site-header, .site-footer, .inv-actions, .skip-link { display: none !important; }
  body { background: #fff !important; }
  .inv-wrap { padding: 0; max-width: none; }
  .inv { border: 0; padding: 0; }
}

/* ---------- Administracija ---------- */
.adm { padding-top: 24px; padding-bottom: 56px; }
.adm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.adm-head h1 { margin: 0; font-size: 1.75rem; letter-spacing: -.02em; }
.adm-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.adm-nav a { padding: 7px 12px; border-radius: 999px; color: var(--ink-2); font-weight: 500; font-size: .9375rem; text-decoration: none; }
.adm-nav a:hover { background: var(--line); }
.adm-nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.adm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.adm-stat { padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.adm-stat-label { margin: 0; font-size: .8125rem; color: var(--ink-3); }
.adm-stat-value { margin: 4px 0 0; font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.adm-stat-sub { margin: 2px 0 0; font-size: .8125rem; color: var(--ink-2); }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.adm-grid > section > .card + .card { margin-top: 16px; }
.adm-cols { display: flex; align-items: flex-end; gap: 6px; height: 150px; }
.adm-col { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.adm-col > span { width: 100%; height: var(--pct); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--brand); --pct: 0%; }
.adm-col small { margin-top: 4px; font-size: .6875rem; color: var(--ink-3); }
.adm-bars { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.adm-bars li { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 3.5rem; align-items: center; gap: 10px; font-size: .875rem; }
.adm-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-bar { height: 10px; border-radius: 999px; background: var(--line); overflow: hidden; }
.adm-bar span { display: block; height: 100%; width: var(--pct); border-radius: 999px; background: var(--brand); --pct: 0%; }
.adm-bar-n { text-align: right; font-variant-numeric: tabular-nums; }
.adm-list { margin: 0; padding: 0; list-style: none; }
.adm-list li { padding: 8px 0; border-top: 1px solid var(--line); }
.adm-list li:first-child { border-top: 0; }
.adm-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.adm-filter input:not([type="checkbox"]), .adm-filter select { height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); font: 400 .9375rem var(--font); }
.adm-filter input[name="q"] { min-width: 240px; }
.adm-check { display: inline-flex; align-items: center; gap: 6px; font-size: .9375rem; }
.adm-hint { margin: -6px 0 12px; font-size: .8125rem; }
.adm-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.adm-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.adm-table th { padding: 10px 12px; background: var(--paper); text-align: left; font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.adm-table td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.adm-table--dense td { padding: 6px 12px; }
.adm-table small { color: var(--ink-3); }
.adm-actions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 180px; }
/* Ćelija tabele ostaje ćelija (flex na <td> je izbacuje iz tabele i pravi horizontalni skrol) */
.adm-table td.adm-actions { display: table-cell; min-width: 0; }
.adm-table td.adm-actions > .adm-btn { margin: 0 6px 6px 0; }
.adm-table td.adm-actions > .bo-offer, .adm-table td.adm-actions > .bo-btns { margin-bottom: 6px; }
.bo-table td.adm-actions { min-width: 240px; }
.adm-note { display: block; margin-top: 2px; font-size: .75rem; }
.adm-break { overflow-wrap: anywhere; }
/* Praćenje: 5 kolona, akcije jedna ispod druge */
.adm-table--items td.adm-actions { width: 12.5rem; }
.adm-table--items td.adm-actions > .adm-btn[data-adm-url*="bo-reminder"] { display: block; width: 100%; margin-right: 0; }
.adm-btn { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); font: 500 .8125rem var(--font); cursor: pointer; white-space: nowrap; }
.adm-btn:hover { border-color: var(--brand); color: var(--brand); }
.adm-danger { color: var(--bad); }
.adm-danger:hover { border-color: var(--bad); color: var(--bad); }
.adm-pager { display: flex; gap: 8px; margin-top: 14px; }
.adm .mon-form textarea { padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); font: 400 .9375rem var(--font); }
.adm .mon-form small { font-weight: 400; }
@media (max-width: 900px) {
  .adm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adm-grid { grid-template-columns: 1fr; }
}
.adm-cols { overflow: hidden; }
.adm-col { min-width: 0; }
.adm-col > span { height: calc(var(--pct) * .8); }
.adm-col small { font-size: .625rem; white-space: nowrap; }

/* ---------- Zaglavlje: TOOLS & MONITORING i dugme Monitoring ---------- */
.header-nav { display: flex; align-items: center; gap: 18px; }
.header-monitor { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1.5px solid var(--brand); border-radius: 999px; color: var(--brand); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.header-monitor svg { width: 16px; height: 16px; }
.header-monitor:hover { background: var(--brand); color: #fff; }
.brand-tools { white-space: nowrap; }
@media (max-width: 680px) {
  .header-nav .back-link { display: none; }
  .brand { gap: 10px; }
  .brand-logo img { width: 120px; height: auto; }
  .brand-tools { font-size: .625rem; letter-spacing: .08em; }
  .header-monitor { padding: 6px 10px; }
}
@media (max-width: 420px) {
  .header-monitor span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .header-monitor { padding: 7px; }
}

.adm-health { margin: 0 0 14px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); font-size: .9375rem; font-weight: 500; }

/* ---------- Administracija: RsReg EPP ---------- */
.epp-profile { padding: 14px 0; border-top: 1px solid var(--line); }
.epp-profile:first-of-type { border-top: 0; padding-top: 0; }
.epp-profile-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.epp-profile-head .mini-title { margin: 0; display: flex; align-items: center; gap: 8px; }
.epp-kv { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 6px 14px; margin: 12px 0 0; font-size: .9375rem; }
.epp-kv div { display: contents; }
.epp-kv dt { color: var(--ink-3); }
.epp-kv dd { margin: 0; overflow-wrap: anywhere; }
.epp-test { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.epp-steps { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .9375rem; }
.epp-steps span { color: var(--ink-2); }
.epp-form { display: grid; grid-template-columns: 9rem minmax(14rem, 1.2fr) minmax(12rem, 1fr) auto; gap: 10px; align-items: end; margin-bottom: 14px; }
.epp-form label { display: grid; gap: 4px; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.epp-form select, .epp-form input { height: 42px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); font: 400 .9375rem var(--font); min-width: 0; }
.epp-form .btn { height: 42px; }
.epp-res { display: grid; gap: 10px; }
.epp-res p { margin: 0; }
.epp-raw summary { cursor: pointer; font-weight: 500; font-size: .9375rem; }
.epp-raw .pre { max-height: 360px; overflow: auto; margin-top: 8px; font-size: .75rem; }
@media (max-width: 900px) { .epp-form { grid-template-columns: 1fr; } .epp-kv { grid-template-columns: 1fr; } .epp-kv dt { margin-top: 6px; } }

[data-epp-result]:not(:empty) { margin-bottom: 16px; }

.epp-diag { margin: 4px 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.epp-diag > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.epp-diag p { margin: 10px 0; font-size: .875rem; }
.epp-warn { margin: 0 0 12px; padding-left: 18px; color: var(--warn); font-size: .9375rem; font-weight: 500; }
.epp-warn li + li { margin-top: 4px; }

/* RsReg EPP: podnavigacija i forme za kontakt/registraciju */
.epp-subnav { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }
.epp-subnav a { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); font-size: .875rem; font-weight: 500; text-decoration: none; background: var(--surface); }
.epp-subnav a[aria-current="page"] { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.epp-grid-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 14px; align-items: end; margin-bottom: 14px; }
.epp-grid-form label { display: grid; gap: 4px; min-width: 0; font-size: .875rem; font-weight: 500; color: var(--ink-2); }
.epp-grid-form label small { font-weight: 400; color: var(--ink-3); }
.epp-grid-form input:not([type="checkbox"]), .epp-grid-form select, .epp-grid-form textarea { width: 100%; min-width: 0; padding: 0 10px; height: 40px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); font: 400 .9375rem var(--font); }
.epp-grid-form textarea { height: auto; padding: 8px 10px; }
.epp-grid-form .span2 { grid-column: span 2; }
.epp-grid-form .span-all { grid-column: 1 / -1; }
.epp-grid-form .mon-check { align-self: center; }
.epp-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 0; }
@media (max-width: 900px) { .epp-grid-form { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .epp-grid-form { grid-template-columns: 1fr; } .epp-grid-form .span2 { grid-column: auto; } }

.epp-effective { margin: 0; font-size: .875rem; color: var(--ink-2); }

/* Licitacija (backorder) */
.mon-bo-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 8px 0 10px; }
.mon-bo-facts > div { min-width: 0; }
.mon-bo-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.mon-bo-facts dd { margin: 2px 0 0; }
.mon-bo-left { color: var(--ink-2); font-size: .875rem; }
.mon-phase .mon-bo .mon-bo-lead { margin: 4px 0 8px; font-weight: 600; }
.mon-bo-bid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; }
.mon-bo-bid input { width: 9.5em; font: inherit; font-size: 1rem; font-weight: 600; padding: 9px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.mon-bo-bid .btn { margin: 0; }
.mon-bo-cur { color: var(--ink-2); font-weight: 600; }
.bo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bo-bids { margin: 6px 0 0; padding-left: 18px; font-size: .8125rem; }
@media (max-width: 520px) { .mon-bo-facts { grid-template-columns: 1fr; } .mon-bo-bid .btn { width: 100%; } }

/* ---------- WHOIS: „Verifikovan?" (.rs/.срб, EPP na klik) ---------- */
.rsv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 13px 4px 9px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.35; cursor: pointer; }
.rsv-btn svg { width: 16px; height: 16px; flex: none; }
.rsv-btn:hover { border-color: var(--brand); color: var(--brand); }
.rsv-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rsv-btn[data-rsv-done='verified'] { border-color: var(--ok-line); color: var(--ok); }
.rsv-btn[data-rsv-done='pending'] { border-color: var(--warn-line); color: var(--warn); }
.rsv-btn[data-rsv-done='overdue'] { border-color: var(--bad-line); color: var(--bad); }
.rsv-title { display: flex; align-items: flex-start; gap: 10px; }
.rsv-head-ico { display: inline-flex; flex: none; margin-top: 2px; color: var(--brand); }
.rsv-name { display: block; margin-top: 2px; font-size: 1rem; font-weight: 500; color: var(--ink-2); overflow-wrap: anywhere; }
.rsv-head-ico svg { width: 22px; height: 22px; }
.rsv-loading { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; color: var(--ink-2); }
.rsv-loading .spinner { width: 18px; height: 18px; flex: none; border: 2px solid var(--line-strong); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
.rsv-result { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--neutral-bg); }
.rsv-result.tone-ok { background: var(--ok-bg); border-color: var(--ok-line); }
.rsv-result.tone-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.rsv-result.tone-bad { background: var(--bad-bg); border-color: var(--bad-line); }
.rsv-ico { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--neutral); }
.rsv-result.tone-ok .rsv-ico { color: var(--ok); }
.rsv-result.tone-warn .rsv-ico { color: var(--warn); }
.rsv-result.tone-bad .rsv-ico { color: var(--bad); }
.rsv-ico svg { width: 20px; height: 20px; }
.rsv-state { margin: 2px 0 4px; font-size: 1.0625rem; }
.rsv-text { margin: 0; color: var(--ink-2); font-size: .9375rem; overflow-wrap: anywhere; }
.rsv-kv { margin: 16px 0 0; }
@media (max-width: 480px) {
  .rsv-result { padding: 14px; gap: 12px; }
  .rsv-ico { width: 34px; height: 34px; }
}