/* ==========================================================   BUBA Network Looking Glass — Clean Premium theme   Dark / Orange, responsive, stable control layout   ========================================================== *//* ---------- Tokens ---------- */:root{  --accent:  #f7931e;  --accent2: #f7931e;  --bg:     #0b0b0b;  --panel:  rgba(255,255,255,.035);  --panel2: rgba(255,255,255,.05);  --input:  rgba(0,0,0,.45);  --text:   rgba(255,255,255,.92);  --muted:  rgba(255,255,255,.62);  --border: rgba(255,255,255,.10);  --border2:rgba(247,147,30,.35);  --radius: 16px;  --shadow-lg: 0 18px 45px rgba(0,0,0,.55);  --shadow-md: 0 10px 24px rgba(0,0,0,.45);  --pad: 18px;}/* ---------- Base ---------- */*{ box-sizing:border-box; }html,body{ height:100%; }body{  margin:0;  padding: 22px 0 44px;  font: 14px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;  color: var(--text);  background:    radial-gradient(1100px 650px at 18% -12%, rgba(247,147,30,.16), transparent 62%),    radial-gradient(900px 520px at 92% 6%, rgba(247,147,30,.10), transparent 58%),    radial-gradient(1200px 700px at 55% 110%, rgba(255,255,255,.06), transparent 55%),    var(--bg);}/* Center content without needing wrappers */body > *{  max-width: 1040px;  margin-left: auto;  margin-right:auto;  padding-left: 16px;  padding-right:16px;}/* Links */a{ color: var(--accent); text-decoration:none; }a:hover{ text-decoration:underline; }/* Divider */hr{  border:0;  border-top: 1px solid var(--border);  margin: 18px 0;}/* ==========================================================   Header with logo (recommended markup)   ========================================================== */.lg-header{  display:flex;  align-items:center;  gap: 16px;  padding: var(--pad);  border-radius: var(--radius);  background: linear-gradient(180deg, var(--panel2), var(--panel));  border: 1px solid var(--border);  border-left: 4px solid var(--accent);  box-shadow: var(--shadow-lg);  margin-bottom: 14px;}.lg-logo-link{  width: 56px;  height: 56px;  display:flex;  align-items:center;  justify-content:center;  border-radius: 16px;  background: rgba(255,255,255,.03);  border: 1px solid var(--border);  box-shadow: 0 0 0 3px rgba(247,147,30,.10);  text-decoration: none;}.lg-logo-link:hover{  border-color: var(--border2);  box-shadow: 0 0 0 3px rgba(247,147,30,.18);}.lg-logo{  height: 36px;  width: auto;  display:block;  filter: none;}.lg-title{ min-width: 0; }.lg-title h1{  margin: 0;  padding: 0;  border: 0;  background: transparent;  box-shadow: none;  font-size: 28px;  font-weight: 900;  letter-spacing: .2px;  line-height: 1.15;}.lg-title .sub{  margin: 6px 0 0;  padding: 0;  border: 0;  background: transparent;  box-shadow: none;  color: var(--muted);}/* Fallback if you ever render plain h1+p without lg-header */h1{  margin: 0 0 10px;  font-size: 28px;  font-weight: 900;  letter-spacing: .2px;}h1{  padding: var(--pad) var(--pad) 10px;  border-radius: var(--radius) var(--radius) 0 0;  background: linear-gradient(180deg, var(--panel2), var(--panel));  border: 1px solid var(--border);  border-left: 4px solid var(--accent);  box-shadow: var(--shadow-lg);}h1 + p, h1 + div, h1 + span{  display:block;  margin:0;  padding: 0 var(--pad) var(--pad);  border-radius: 0 0 var(--radius) var(--radius);  background: linear-gradient(180deg, var(--panel), rgba(255,255,255,.02));  border: 1px solid var(--border);  border-top: 0;  border-left: 4px solid var(--accent);  box-shadow: var(--shadow-lg);  color: var(--muted);}/* Never apply fallback card styling inside lg-header */.lg-header h1,.lg-header p{  all: unset;}/* ==========================================================   Panels (control/output/footer)   ========================================================== */#control,.monospace,#content{  margin-top: 14px;  padding: var(--pad);  border-radius: var(--radius);  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.025));  border: 1px solid var(--border);  box-shadow: var(--shadow-md);}p{ color: var(--muted); }/* ==========================================================   Controls: stable layout (requires wrappers you added)   #control     .row-top  -> holds .grp-action .grp-target .grp-ip     .row-btn  -> buttons (under textbox)   ========================================================== */#control{  display: grid;  grid-template-columns: auto 1fr auto;  gap: 12px 16px;  align-items: center;}/* Put groups into the first row */#control .row-top{ display: contents; }#control .grp-action{ grid-column: 1; }#control .grp-target{ grid-column: 2; min-width: 0; }#control .grp-ip{ grid-column: 3; }/* Buttons row under the textbox (target column) */#control .row-btn{  grid-column: 2;  display: flex;  gap: 10px;  justify-content: flex-start;  margin-top: -2px;}/* Group internals */#control .grp{  display: flex;  align-items: center;  gap: 10px;  flex-wrap: wrap;}#control .grp-ip{  flex-wrap: nowrap;  white-space: nowrap;}#control .lbl{  color: rgba(255,255,255,.70);  font-weight: 900;  margin-right: 4px;  white-space: nowrap;}#control .opt{  display: inline-flex;  align-items: center;  gap: 8px;  margin: 0;  white-space: nowrap;  color: rgba(255,255,255,.85);}/* Radios/checkbox */input[type="radio"], input[type="checkbox"]{  accent-color: var(--accent);  margin: 0;  transform: translateY(1px);}/* Target input */#target_input{  width: 100%;  min-width: 360px;  padding: 11px 12px;  background: var(--input);  border: 1px solid var(--border);  color: var(--text);  border-radius: 12px;}#target_input::placeholder{ color: rgba(255,255,255,.35); }#target_input:focus{  outline: none;  border-color: rgba(247,147,30,.55);  box-shadow: 0 0 0 4px rgba(247,147,30,.18);}/* Buttons */#control button,#control input[type="submit"],#control input[type="button"]{  appearance:none;  border: 0;  cursor: pointer;  padding: 10px 18px;  border-radius: 12px;  font-weight: 900;  font-size: 14px;  background: linear-gradient(180deg, var(--accent), var(--accent2));  color: #141414;  box-shadow: 0 10px 18px rgba(0,0,0,.45);  transition: transform .08s ease, filter .12s ease;}#control button:hover,#control input[type="submit"]:hover,#control input[type="button"]:hover{ filter: brightness(1.04); }#control button:active,#control input[type="submit"]:active,#control input[type="button"]:active{ transform: translateY(1px); }/* ==========================================================   Status indicator (dot + your classes)   Uses: <span id="status" class="status-null|status-working|status-done">...</span>   ========================================================== */.monospace p{ margin: 12px 0 8px; color: rgba(255,255,255,.65); }#status{  display: inline-flex;  align-items: center;  gap: 10px;  padding: 6px 12px;  border-radius: 999px;  border: 1px solid var(--border);  background: rgba(255,255,255,.03);  font-weight: 800;  font-size: 13px;  color: rgba(255,255,255,.82);}#status::before{  content:"";  width: 10px;  height: 10px;  border-radius: 50%;  background: #9ca3af;  box-shadow: 0 0 0 3px rgba(156,163,175,.20);}#status.status-working::before{  background: #fbbf24;  box-shadow: 0 0 0 3px rgba(251,191,36,.25);}#status.status-done::before{  background: #4ade80;  box-shadow: 0 0 0 3px rgba(74,222,128,.25);}#status.status-error::before{  background: #f87171;  box-shadow: 0 0 0 3px rgba(248,113,113,.25);}/* ==========================================================   Output   ========================================================== */pre{  margin: 12px 0 0;  padding: 12px;  background: rgba(0,0,0,.45);  border: 1px solid var(--border);  border-radius: 14px;  overflow-x:auto;  font-size: 13px;  color: var(--text);}table{  width:100%;  border-collapse: separate;  border-spacing: 0;  margin-top: 12px;  border: 1px solid var(--border);  border-radius: 14px;  overflow:hidden;  background: rgba(255,255,255,.02);}th, td{  text-align:left;  padding: 11px 10px;  border-bottom: 1px solid rgba(255,255,255,.06);  vertical-align: top;  color: rgba(255,255,255,.88);}th{  background: rgba(255,255,255,.05);  color: rgba(255,255,255,.92);  font-weight: 900;}tr:hover td{ background: rgba(255,255,255,.03); }td:nth-child(n+3){ font-variant-numeric: tabular-nums; }/* ==========================================================   API collapsible   ========================================================== */.api-details{  margin-top: 16px;  padding: 10px;  border-radius: 14px;  border: 1px solid var(--border);  background: rgba(255,255,255,.02);}.api-details > summary{  cursor:pointer;  user-select:none;  list-style:none;  display:inline-flex;  align-items:center;  gap: 10px;  padding: 10px 12px;  border-radius: 12px;  background: rgba(255,255,255,.03);  border: 1px solid var(--border);  color: var(--accent);  font-weight: 900;}.api-details > summary:hover{ border-color: var(--border2); }.api-details > summary::-webkit-details-marker{ display:none; }.api-details > summary:before{ content:"▸"; color: var(--accent); }.api-details[open] > summary:before{ content:"▾"; }.api-details h2{  margin: 14px 0 8px;  font-size: 16px;  font-weight: 900;  color: rgba(255,255,255,.92);}ul{ margin: 8px 0 0 18px; color: var(--muted); }li{ margin: 6px 0; }/* ==========================================================   Footer   ========================================================== */.footer, #footer{  margin-top: 18px;  padding-top: 14px;  border-top: 1px solid var(--border);  color: rgba(255,255,255,.55);  font-size: 12px;  display:flex;  justify-content: space-between;  gap: 10px;  flex-wrap: wrap;}/* ==========================================================   Responsive   ========================================================== */@media (max-width: 900px){  body{ padding-top: 18px; }  body > *{ max-width: 860px; }  .lg-title h1{ font-size: 24px; }}@media (max-width: 860px){  #control{    grid-template-columns: 1fr;  }  #control .grp-action,  #control .grp-target,  #control .grp-ip,  #control .row-btn{    grid-column: 1;  }  #target_input{ min-width: 0; }  #control .grp-ip{ flex-wrap: wrap; }  #control .row-btn{    margin-top: 0;    flex-direction: column;  }  #control .row-btn button{ width: 100%; }  table{ display:block; overflow-x:auto; white-space: nowrap; }  th, td{ padding: 10px 8px; }  pre{ font-size: 12px; }}@media (max-width: 600px){  body{ padding-top: 14px; }  body > *{ padding-left: 12px; padding-right: 12px; }  .lg-header{ padding: 14px; gap: 12px; }  .lg-logo-link{ width: 50px; height: 50px; border-radius: 14px; }  .lg-logo{ height: 32px; }  .lg-title h1{ font-size: 20px; }  .footer, #footer{ flex-direction: column; align-items: flex-start; }}/* Reduced motion */@media (prefers-reduced-motion: reduce){  *{ scroll-behavior:auto; transition:none !important; }}/* Center footer */.footer, #footer{  justify-content: center !important;  text-align: center !important;  width: 100%;}.footer > *, #footer > *{  flex: 0 0 auto;}.footer a, #footer a{  justify-content: center;}/* ===== Embed latency graph under API ===== */.api-graph{  margin-top: 14px;  border-radius: 14px;  overflow: hidden;  border: 1px solid var(--border);  background: rgba(0,0,0,.25);}.api-graph iframe{  width: 100%;  height: 520px;  border: 0;  display: block;}/* Mobile: malo niže da stane */@media (max-width: 600px){  .api-graph iframe{ height: 420px; }}/* ===== Fix iframe side scrollbar ===== */.api-graph{  overflow: hidden;}.api-graph iframe{  width: 100%;  height: 620px;          /* povećaj da stane cijeli graf + header */  border: 0;  display: block;  overflow: hidden;}@media (max-width: 600px){  .api-graph iframe{ height: 520px; }}/* ===== Top nav under header ===== */.lg-nav{  margin: 12px 0 14px;  padding: 10px;  border-radius: var(--radius);  border: 1px solid var(--border);  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));  box-shadow: var(--shadow-md);  display: flex;  gap: 10px;  flex-wrap: wrap;}.lg-nav-item{  display: inline-flex;  align-items: center;  gap: 8px;  padding: 10px 14px;  border-radius: 999px;  border: 1px solid rgba(255,255,255,.12);  background: rgba(0,0,0,.35);  color: rgba(255,255,255,.80);  font-weight: 900;  text-decoration: none;  transition: transform .08s ease, filter .12s ease, border-color .12s ease;}.lg-nav-item:hover{  border-color: rgba(247,147,30,.35);  filter: brightness(1.05);}.lg-nav-item.active{  background: linear-gradient(180deg, var(--accent), var(--accent2));  color: #141414;  border-color: transparent;}@media (max-width: 600px){  .lg-nav{ padding: 10px; }  .lg-nav-item{ width: 100%; justify-content: center; }}/* ===== Compact top nav (fix stretched bar) ===== */.lg-nav{  /* ne rasteži preko cijele širine */  width: fit-content;  max-width: 100%;  margin: 12px 0 16px;  padding: 8px;  border-radius: 999px;  border: 1px solid var(--border);  background: rgba(0,0,0,.28);  box-shadow: var(--shadow-md);  display: inline-flex;  gap: 8px;  flex-wrap: wrap;}/* pill buttons */.lg-nav-item{  padding: 9px 14px;  border-radius: 999px;  border: 1px solid rgba(255,255,255,.12);  background: rgba(255,255,255,.03);  color: rgba(255,255,255,.82);  font-weight: 900;  text-decoration: none;  line-height: 1;}.lg-nav-item:hover{  border-color: rgba(247,147,30,.35);}.lg-nav-item.active{  background: linear-gradient(180deg, var(--accent), var(--accent2));  color: #141414;  border-color: transparent;}/* Mobile: meni full width i centriran */@media (max-width: 600px){  .lg-nav{    width: 100%;    justify-content: center;    border-radius: 16px;  }}.api-graph{ overflow: hidden; }.api-graph iframe{  width: 100%;  height: 560px;  border: 0;  display: block;  overflow: hidden;}@media (max-width: 600px){  .api-graph iframe{ height: 460px; }}/* ===== Unified header + centered nav ===== */.lg-header{  display: grid;  grid-template-columns: 64px 1fr;  gap: 14px;  align-items: center;  padding: 18px;  border-radius: var(--radius);  border: 1px solid var(--border);  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));  box-shadow: var(--shadow-md);}.lg-logo{  width: 56px;  height: 56px;  object-fit: contain;  display: block;}.lg-head-title{  font-weight: 900;  color: rgba(255,255,255,.92);}.lg-head-sub{  margin-top: 4px;  color: rgba(255,255,255,.65);  font-size: 13px;  line-height: 1.35;}/* Menu centered under header/logo */.lg-nav{  margin: 12px auto 18px;   /* auto => centar */  width: fit-content;  max-width: calc(100% - 24px);  padding: 8px;  border-radius: 999px;  border: 1px solid var(--border);  background: rgba(0,0,0,.28);  box-shadow: var(--shadow-md);  display: flex;  gap: 8px;  flex-wrap: wrap;  justify-content: center;}.lg-nav-item{  padding: 9px 14px;  border-radius: 999px;  border: 1px solid rgba(255,255,255,.12);  background: rgba(255,255,255,.03);  color: rgba(255,255,255,.82);  font-weight: 900;  text-decoration: none;  line-height: 1;}.lg-nav-item.active{  background: linear-gradient(180deg, var(--accent), var(--accent2));  color: #141414;  border-color: transparent;}.lg-nav-item:hover{  border-color: rgba(247,147,30,.35);}/* Mobile */@media (max-width: 700px){  .lg-header{    grid-template-columns: 1fr;    text-align: center;    justify-items: center;  }  .lg-nav{    width: 100%;    border-radius: 16px;  }  .lg-nav-item{    flex: 1 1 auto;    justify-content: center;    text-align: center;  }}/* ==========================================================   Side calculators layout (Hosting left / VPS right)   ========================================================== *//* Allow a wider container only for the 3-column shell */body > .lg-shell{  max-width: 1440px;  margin-left: auto;  margin-right: auto;  padding-left: 16px;  padding-right: 16px;}/* 3-column grid */.lg-shell{  display: grid;  grid-template-columns: 320px minmax(0, 1fr) 320px;  gap: 16px;  align-items: start;  margin-top: 14px;}/* Sidebars */.lg-side{  position: sticky;  top: 14px;  display: flex;  flex-direction: column;  gap: 14px;}/* Widgets */.lg-widget{  padding: var(--pad);  border-radius: var(--radius);  background: linear-gradient(180deg, var(--panel2), var(--panel));  border: 1px solid var(--border);  box-shadow: var(--shadow-md);}.lg-widget-title{  font-weight: 900;  letter-spacing: .3px;  text-transform: uppercase;  font-size: 13px;  color: rgba(255,255,255,.90);  display: flex;  align-items: center;  justify-content: space-between;  gap: 10px;  margin-bottom: 12px;}.lg-badge{  font-size: 12px;  font-weight: 900;  padding: 4px 10px;  border-radius: 999px;  background: rgba(247,147,30,.14);  border: 1px solid var(--border2);  color: var(--accent);}.lg-field{ margin: 10px 0; }.lg-field label{  display: block;  margin-bottom: 6px;  color: rgba(255,255,255,.72);  font-weight: 900;  font-size: 12px;  text-transform: uppercase;  letter-spacing: .25px;}.lg-field select,.lg-field input[type="number"],.lg-field input[type="text"]{  width: 100%;  padding: 11px 12px;  background: var(--input);  border: 1px solid var(--border);  color: var(--text);  border-radius: 12px;}.lg-field select:focus,.lg-field input:focus{  outline: none;  border-color: rgba(247,147,30,.55);  box-shadow: 0 0 0 4px rgba(247,147,30,.18);}.lg-field input[type="range"]{ width: 100%; accent-color: var(--accent); }.lg-row2{  display: grid;  grid-template-columns: 1fr 1fr;  gap: 10px;}.lg-hint{  margin-top: 6px;  font-size: 12px;  color: rgba(255,255,255,.55);}/* Totals */.lg-total{  margin-top: 12px;  padding-top: 12px;  border-top: 1px solid var(--border);  display: flex;  align-items: flex-end;  justify-content: space-between;  gap: 10px;}.lg-total .lbl{  color: rgba(255,255,255,.62);  font-weight: 900;  font-size: 12px;  text-transform: uppercase;  letter-spacing: .25px;}.lg-total .price{  font-size: 22px;  font-weight: 900;  color: rgba(255,255,255,.92);}/* CTA button */.lg-cta{  display: inline-flex;  align-items: center;  justify-content: center;  width: 100%;  margin-top: 10px;  padding: 10px 18px;  border-radius: 12px;  font-weight: 900;  font-size: 14px;  background: linear-gradient(180deg, var(--accent), var(--accent2));  color: #141414;  box-shadow: 0 10px 18px rgba(0,0,0,.45);  text-decoration: none;}.lg-cta:hover{ filter: brightness(1.04); text-decoration: none; }/* Contact row */.lg-contact-row{  display: flex;  align-items: center;  justify-content: space-between;  gap: 10px;  color: rgba(255,255,255,.80);  font-weight: 800;}.lg-contact-row a{  color: var(--accent);  font-weight: 900;  text-decoration: none;}.lg-contact-row a:hover{ text-decoration: underline; }/* Ensure middle column can shrink without overflow */.lg-main{ min-width: 0; }/* Responsive: stack */@media (max-width: 1100px){  body > .lg-shell{ max-width: 1040px; }  .lg-shell{ grid-template-columns: 1fr; }  .lg-side{ position: static; }  .lg-row2{ grid-template-columns: 1fr; }}
.footer-grid{
  display: grid;
  grid-template-columns: 1fr 340px; /* desni stupac za graf */
  gap: 16px;
  align-items: start;
  margin-top: 14px;
}

.footer-left{
  font-size: 12px;
  color: #777;
  line-height: 1.5;
}

.footer-right{
  justify-self: end;
  text-align: center;
}

.footer-widget-title{
  font-size: 12px;
  font-weight: 600;
  color: #aaa;
  margin-bottom: 6px;
}

.footer-widget-img{
  width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  /* bolje na tamnoj podlozi nego bijeli border */
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}

/* mobitel: graf ispod teksta */
@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-right{ justify-self: start; text-align: left; }
  .footer-widget-img{ width: min(360px, 100%); margin: 0; }
}

.footer{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* 3 stupca: visitors | info | usage */
.footer-grid{
  display: grid;
  grid-template-columns: 160px 1fr 360px;
  gap: 18px;
  align-items: center;           /* ovo diže widget da ne visi prenisko */
}

#visitors{
  font-size: 11px;
  color: #999;
  opacity: .75;
}

.footer-info{
  font-size: 12px;
  color: #777;
  line-height: 1.5;
  text-align: center;            /* kao što ti već izgleda na stranici */
}

/* desno - mala kartica */
.footer-usage{
  justify-self: end;
}

.usage-card{
  width: 340px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}

.usage-title{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  margin-bottom: 8px;
  letter-spacing: .2px;
}

.usage-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* responsive */
@media (max-width: 980px){
  .footer-grid{
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
  }
  .footer-info{ text-align: left; }
  .footer-usage{ justify-self: start; }
  .usage-card{ width: min(360px, 100%); }
}
.footer{
  margin-top: 22px;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Ovo je ključ: footer sadržaj u istom “containeru” kao ostatak stranice */
.footer-inner{
  max-width: 1100px;      /* <- prilagodi ako ti je container drugačiji */
  margin: 0 auto;
  padding: 0 18px;        /* malo “guttera” kao gore */
}

.footer-grid{
  display: grid;
  grid-template-columns: 170px 1fr 340px;
  gap: 18px;
  align-items: center;    /* diže karticu, nema “visenja” */
}

#visitors{
  font-size: 11px;
  color: #999;
  opacity: .75;
}

.footer-info{
  font-size: 12px;
  color: #777;
  line-height: 1.5;
  text-align: center;
}

.footer-usage{
  justify-self: end;
}

.usage-card{
  width: 340px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
}

.usage-title{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.75);
  margin-bottom: 8px;
}

.usage-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* Mobile */
@media (max-width: 980px){
  .footer-grid{
    grid-template-columns: 1fr;
    align-items: start;
  }
  .footer-info{ text-align: left; }
  .footer-usage{ justify-self: start; }
  .usage-card{ width: min(360px, 100%); }
}
.usage-card{
  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,136,0,.08),
    0 0 24px rgba(255,136,0,.08);
}
.footer{
  margin-top: 22px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.footer-inner{
  max-width: 1100px;   /* stavi isto kao glavni container */
  margin: 0 auto;
  padding: 0 18px;
}

/* jedna linija: lijevo meta, desno kartica */
.footer-row{
  display:flex;
  justify-content: space-between;
  align-items: center;          /* ključno: kartica i tekst u istoj visini */
  gap: 18px;
}

.footer-meta{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.footer-visitors #visitors{
  font-size: 11px;
  color:#999;
  opacity:.75;
}

.footer-info{
  font-size: 12px;
  color:#777;
  line-height: 1.35;
  white-space: nowrap;          /* čisto u jednoj liniji */
  overflow: hidden;
  text-overflow: ellipsis;      /* ako je predugo, ne ruši layout */
  max-width: 680px;
}

/* kompaktna kartica, ne ogromna */
.usage-card{
  width: 300px;                 /* manja */
  padding: 10px 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.22);
  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    0 0 24px rgba(255,136,0,.08);
}

.usage-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.usage-title{
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.75);
}

.usage-sub{
  font-size: 11px;
  color: rgba(255,255,255,.45);
}

.usage-img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 10px;
}

/* mobile: složi vertikalno */
@media (max-width: 980px){
  .footer-row{ flex-direction: column; align-items: stretch; }
  .footer-info{ white-space: normal; max-width: none; }
  .usage-card{ width: min(360px, 100%); }
}

/* ===== UI polish override (2026-02-19) ===== */
.main{max-width:1100px;margin:0 auto;}
.lg-head-title{font-size:clamp(1.1rem,2.2vw,1.5rem);line-height:1.2;letter-spacing:.2px;}
.lg-head-sub{max-width:78ch;color:rgba(255,255,255,.72);}
.lg-nav{margin:14px auto 20px;padding:8px 10px;gap:8px;}
.lg-nav-item{font-weight:800;padding:10px 14px;}

#control{
  margin-top:16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
}
#control .lbl{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:rgba(255,255,255,.62);}
#control .opt{font-size:14px;}
#target_input{height:44px;font-size:15px;border-radius:12px;}
#target_input::placeholder{color:rgba(255,255,255,.45);}
#control .row-btn{gap:12px;}
#control .row-btn button{min-width:120px;}
#control .row-btn button:first-child{
  background:linear-gradient(180deg,#ff8c1a,#e06a00);
  color:#171717;
}
#control .row-btn button:last-child{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.9);
}
#control .row-btn button:last-child:hover{border-color:rgba(247,147,30,.5);}

.lg-help{margin:12px 2px 4px;color:rgba(255,255,255,.64);font-size:13px;}

.monospace{margin-top:16px;}
.monospace > p{margin:0 0 10px;}
#status{font-size:12px;padding:6px 11px;}
#output{
  min-height:220px;
  max-height:420px;
  overflow:auto;
  border-radius:12px;
  line-height:1.45;
}
#mtr_output th{position:sticky;top:0;z-index:1;}
#mtr_output tr:nth-child(even) td{background:rgba(255,255,255,.02);}

@media (max-width:860px){
  #control .row-btn{flex-direction:row;}
  #control .row-btn button{flex:1;}
}
@media (max-width:600px){
  .lg-head-sub{font-size:12px;}
  .lg-help{font-size:12px;}
  #control .row-btn{flex-direction:column;}
}

/* ===== desktop rebalance hotfix (2026-02-19b) ===== */
body{padding-top:20px;}
.main{max-width:980px !important; margin:0 auto !important; padding:0 8px;}
.lg-header{margin-bottom:12px;}
.lg-nav{margin:10px auto 16px;}
#control,.monospace,.api-graph{margin-left:0 !important; margin-right:0 !important;}
.lg-help{margin:10px 0 0 !important; display:block;}
.footer-info{white-space:normal !important; max-width:none !important;}
.footer-row{align-items:flex-start;}
@media (min-width:1200px){.main{max-width:1020px !important;}}

/* ===== footer fix (2026-02-19c) ===== */
.footer{margin-top:20px;padding:14px 0;border-top:1px solid rgba(255,255,255,.1);} 
.footer-inner{max-width:1020px;margin:0 auto;padding:0 6px;}
.footer-row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start;}
.footer-meta{min-width:0;display:flex;flex-direction:column;gap:8px;}
.footer-visitors{font-size:12px;color:rgba(255,255,255,.72);}
#visitors{display:inline-block;min-height:18px;}
.footer-info{font-size:12px;line-height:1.4;color:rgba(255,255,255,.58);white-space:normal !important;overflow:visible;text-overflow:clip;max-width:none;}
.footer-usage{justify-self:end;}
.usage-card{width:300px;max-width:100%;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.28);box-shadow:0 8px 24px rgba(0,0,0,.45);} 
.usage-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.usage-title{font-size:12px;font-weight:700;color:rgba(255,255,255,.84);} 
.usage-sub{font-size:11px;color:rgba(255,255,255,.5);} 
.usage-img{display:block;width:100%;height:auto;border-radius:8px;}

@media (max-width:980px){
  .footer-row{grid-template-columns:1fr;}
  .footer-usage{justify-self:start;}
  .usage-card{width:min(360px,100%);} 
}

/* ===== footer compact alignment fix (2026-02-19d) ===== */
.footer-inner{max-width:980px !important;padding:0 8px !important;}
.footer-row{
  display:flex !important;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.footer-meta{
  flex:1 1 auto;
  min-width:0;
  padding-top:4px;
}
.footer-visitors{
  margin-bottom:6px;
  text-align:left;
}
.footer-info{
  text-align:left !important;
  color:rgba(255,255,255,.62);
  max-width:100%;
}
.footer-usage{
  flex:0 0 300px;
  width:300px;
}
.usage-card{width:100% !important;}

@media (max-width:980px){
  .footer-row{display:block !important;}
  .footer-meta{margin-bottom:12px;}
  .footer-usage{width:min(360px,100%);}
}

/* ===== footer stack cleanup (2026-02-19e) ===== */
.footer-row--stack{display:block !important;}
.footer-row--stack .footer-meta{margin-bottom:10px;}
.footer-row--stack .footer-visitors,
.footer-row--stack .footer-info{text-align:left !important;}
.footer-row--stack .footer-usage{width:300px;max-width:100%;}
.footer-row--stack .usage-card{width:100% !important;}

@media (max-width:980px){
  .footer-row--stack .footer-usage{width:min(360px,100%);} 
}

/* ===== footer + mtr box final layout (2026-02-19f) ===== */
.footer-inner{max-width:980px !important;padding:0 8px !important;}
.footer-row--stack{display:flex !important;flex-direction:column;align-items:center;gap:10px;}
.footer-row--stack .footer-meta{width:100%;text-align:center;}
.footer-row--stack .footer-visitors,
.footer-row--stack .footer-info{text-align:center !important;}
.footer-row--stack .footer-usage{width:100%;max-width:980px;}
.footer-row--stack .usage-card{width:100% !important;max-width:980px;margin:0 auto;}
.footer-row--stack .usage-head{justify-content:space-between;}

#results_box{margin-top:10px;}
#output{min-height:220px;max-height:420px;overflow:auto;}
#mtr_wrap{display:none;max-height:420px;overflow:auto;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.35);}
#mtr_output{margin-top:0 !important;border:none !important;border-radius:0 !important;}
#mtr_output th{position:sticky;top:0;z-index:2;background:rgba(25,25,25,.95);} 

/* ===== mobile optimization for footer graph (2026-02-19g) ===== */
@media (max-width: 700px){
  .footer-inner{padding:0 10px !important;}
  .footer-row--stack{gap:8px !important;}
  .footer-row--stack .footer-meta{padding:0 2px;}
  .footer-row--stack .footer-info{font-size:11px !important;line-height:1.45 !important;}
  .footer-row--stack .footer-visitors{font-size:11px !important;}
  .footer-row--stack .footer-usage,
  .footer-row--stack .usage-card{
    width:100% !important;
    max-width:100% !important;
  }
  .footer-row--stack .usage-card{
    padding:8px !important;
    border-radius:10px !important;
  }
  .footer-row--stack .usage-title{font-size:11px !important;}
  .footer-row--stack .usage-sub{font-size:10px !important;}
  .footer-row--stack .usage-img{
    width:100% !important;
    height:auto !important;
    border-radius:8px !important;
  }
}

/* ===== hard mobile overflow fix (2026-02-19h) ===== */
html, body{max-width:100%; overflow-x:hidden;}
.main{width:100%; max-width:980px; box-sizing:border-box;}
.api-graph, .monospace, #control, .footer, .footer-inner, .footer-row--stack{max-width:100%; box-sizing:border-box;}
.footer{overflow:hidden;}
.footer-row--stack .footer-usage,
.footer-row--stack .usage-card,
.footer-row--stack .usage-img{max-width:100% !important;}
.footer-row--stack .usage-img{display:block; height:auto; object-fit:contain;}

@media (max-width:700px){
  .main{padding:0 10px !important;}
  .api-graph{margin-left:0 !important; margin-right:0 !important;}
  .api-graph iframe{height:430px !important;}
  .footer-inner{padding:0 10px !important;}
  .footer-row--stack .footer-meta{width:100% !important;}
  .footer-row--stack .footer-info{word-break:break-word;}
  .footer-row--stack .usage-card{padding:6px !important;}
}

/* ===== width sync fix (2026-02-19i) ===== */
.main,
.footer-inner{
  max-width: 980px !important;
  width: 100% !important;
  box-sizing: border-box;
}
.footer-inner{padding:0 10px !important;}
.footer-row,
.footer-row--stack{width:100% !important;}
.footer-row--stack .footer-usage{width:100% !important;max-width:none !important;}
.footer-row--stack .usage-card{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  box-sizing:border-box;
}

/* ===== absolute width lock (2026-02-19j) ===== */
:root{--content-max:980px;--content-pad:10px;}
.main,
.footer-inner{
  width: min(var(--content-max), calc(100vw - (var(--content-pad) * 2))) !important;
  max-width: var(--content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
#control,.monospace,.api-graph,.footer,.usage-card{
  width: 100% !important;
  box-sizing: border-box !important;
}
.footer-row--stack,
.footer-row--stack .footer-usage,
.footer-row--stack .usage-card{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}
@media (max-width:700px){
  :root{--content-pad:12px;}
}

/* remove divider between latency and tool-usage graph */
.footer{border-top:none !important; padding-top:0 !important; margin-top:8px !important;}

/* phase2+3 quick targets */
#quick_targets{margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
#quick_targets .qt{padding:7px 10px !important;border-radius:999px !important;background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.14) !important;color:rgba(255,255,255,.85) !important;}
#quick_targets .qt:hover{border-color:rgba(247,147,30,.45) !important;}
#control .row-btn button:nth-child(3){background:rgba(255,255,255,.08) !important;color:#fff !important;border:1px solid rgba(255,255,255,.18) !important;}
@media (max-width:860px){#quick_targets{justify-content:flex-start;}#quick_targets .qt{font-size:12px;}}

/* phase3 ux toast */
#ux_toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(20,20,20,.92);color:#fff;border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:10px;font-size:12px;opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:9999;}
#ux_toast.show{opacity:1;}
#control .row-btn button:nth-child(4){background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;}

/* phase5 usage controls */
.usage-controls{display:flex;align-items:center;gap:8px;margin:6px 0 8px;}
.usage-controls label{font-size:11px;color:rgba(255,255,255,.62);}
.usage-controls select{padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12px;}

/* ===== theme + hamburger ===== */
:root{--bg:#06070a;--panel:#0f1218;--text:#f4f6fb;--muted:#b7bfcb;}
html[data-theme='light']{--bg:#f4f7fb;--panel:#ffffff;--text:#161922;--muted:#5a6475;}
body{background:var(--bg)!important;color:var(--text)!important;}
.main,#control,.monospace,.api-graph,.wrap,.lat-wrap{background:var(--panel)!important;color:var(--text)!important;}
.lg-head-sub,.muted,.footer-info{color:var(--muted)!important;}

/* logo contrast background depending theme */
.lg-logo-link{padding:6px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.14);}
html[data-theme='dark'] .lg-logo-link{background:#f6f8fc;}
html[data-theme='light'] .lg-logo-link{background:#1d2330;}

.lg-head-actions{margin-left:auto;display:flex;gap:8px;align-items:center;}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:inherit;cursor:pointer;}
html[data-theme='light'] .icon-btn{background:#eef2f9;border-color:#cfd6e4;}
#nav_toggle{display:none;}

@media (max-width: 992px){
  #nav_toggle{display:inline-flex;align-items:center;justify-content:center;}
  .lg-nav{display:none!important;flex-direction:column;gap:8px;align-items:stretch;max-width:320px;margin:10px auto 14px;}
  .lg-nav.open{display:flex!important;}
  .lg-nav-item{text-align:center;}
}

/* ===== light theme readability hotfix ===== */
html[data-theme='light'] body{background:#eef2f7!important;color:#171b24!important;}
html[data-theme='light'] .lg-header,
html[data-theme='light'] #control,
html[data-theme='light'] .monospace,
html[data-theme='light'] .api-graph,
html[data-theme='light'] .footer,
html[data-theme='light'] .usage-card,
html[data-theme='light'] #mtr_wrap,
html[data-theme='light'] #output{background:#ffffff!important;color:#1b2330!important;border-color:#d7deea!important;box-shadow:0 8px 24px rgba(20,30,50,.12)!important;}

html[data-theme='light'] .lg-head-title,
html[data-theme='light'] .lbl,
html[data-theme='light'] .opt,
html[data-theme='light'] .footer-info,
html[data-theme='light'] .footer-visitors,
html[data-theme='light'] #status,
html[data-theme='light'] .usage-title,
html[data-theme='light'] .usage-sub,
html[data-theme='light'] .lg-nav-item{color:#1a2230!important;}

html[data-theme='light'] .lg-nav-item{background:#f3f6fb!important;border-color:#ccd6e6!important;}
html[data-theme='light'] .lg-nav-item.active{background:#f7931e!important;color:#1a1f28!important;border-color:#f7931e!important;}

html[data-theme='light'] input,
html[data-theme='light'] select{background:#f7f9fd!important;color:#121722!important;border-color:#cfd8e8!important;}
html[data-theme='light'] input::placeholder{color:#6d7789!important;}

html[data-theme='light'] #control .row-btn button{color:#1a1f28!important;}
html[data-theme='light'] #control .row-btn button:first-child{background:#f7931e!important;border-color:#f7931e!important;}
html[data-theme='light'] #control .row-btn button:last-child,
html[data-theme='light'] #control .row-btn button:nth-child(3),
html[data-theme='light'] #control .row-btn button:nth-child(4),
html[data-theme='light'] .qt{background:#eef3fb!important;border-color:#ccd5e6!important;color:#1d2432!important;}

html[data-theme='light'] #mtr_output{color:#1b2330!important;background:#fff!important;}
html[data-theme='light'] #mtr_output th{background:#f0f4fb!important;color:#1b2330!important;border-color:#d5deed!important;}
html[data-theme='light'] #mtr_output td{border-color:#e4eaf5!important;}

/* keep chart areas dark for readability regardless of theme */
html[data-theme='light'] .api-graph,
html[data-theme='light'] .lat-wrap,
html[data-theme='light'] .wrap{background:#0c0f15!important;color:#eef3ff!important;border-color:#252c3b!important;}
html[data-theme='light'] .api-graph canvas,
html[data-theme='light'] .api-graph iframe{background:#0b0d13!important;}

/* ===== hotfix 2026-02-20 (light theme readability + action layout) ===== */
html[data-theme='light'] .lg-logo-link{
  background:#ffffff !important;
  border-color:#d7deea !important;
  box-shadow:none !important;
}

/* quick targets: force readable text on light */
html[data-theme='light'] #quick_targets .qt,
html[data-theme='light'] #quick_targets .qt *,
html[data-theme='light'] .qt,
html[data-theme='light'] .qt *{
  color:#0f172a !important;
  text-shadow:none !important;
}

/* tool usage card keeps dark canvas so white labels in image remain visible */
html[data-theme='light'] .usage-card{
  background:#0c1018 !important;
  border-color:#252c3b !important;
}
html[data-theme='light'] .usage-title,
html[data-theme='light'] .usage-sub{
  color:#e6edf9 !important;
}

/* ACTION options stacked vertically: MTR / Traceroute / Ping */
#control .grp-action{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:6px !important;
}
#control .grp-action .lbl{margin-right:0 !important;}
#control .grp-action .opt{display:inline-flex !important;}

/* ===== hotfix 2026-02-20b (light table contrast) ===== */
html[data-theme='light'] #mtr_output,
html[data-theme='light'] #mtr_output th,
html[data-theme='light'] #mtr_output td,
html[data-theme='light'] #mtr_output span,
html[data-theme='light'] #mtr_output a{
  color:#0f172a !important;
}
html[data-theme='light'] #mtr_output a{
  text-decoration:none;
  font-weight:600;
}
html[data-theme='light'] #mtr_output a:hover{
  color:#0b57d0 !important;
  text-decoration:underline;
}

/* force remove legacy k5 quick target */
#quick_targets .qt[data-target='k5.hr']{display:none !important;}

/* ===== hotfix 2026-02-20c (light theme graphs must be light) ===== */
html[data-theme='light'] .api-graph,
html[data-theme='light'] .lat-wrap,
html[data-theme='light'] .wrap,
html[data-theme='light'] .usage-card{
  background:#ffffff !important;
  color:#0f172a !important;
  border-color:#d7deea !important;
}
html[data-theme='light'] .api-graph iframe,
html[data-theme='light'] .api-graph canvas{
  background:#ffffff !important;
}
html[data-theme='light'] .usage-title,
html[data-theme='light'] .usage-sub,
html[data-theme='light'] .title,
html[data-theme='light'] .muted,
html[data-theme='light'] .legendLabel{
  color:#1e293b !important;
}

/* ===== hotfix 2026-02-20g (latency table text visible in light) ===== */
html[data-theme='light'] #tbl,
html[data-theme='light'] #tbl th,
html[data-theme='light'] #tbl td,
html[data-theme='light'] #tbl .mono,
html[data-theme='light'] #tbl .badge{
  color:#0f172a !important;
}
html[data-theme='light'] #tbl{
  background:#ffffff !important;
  border-color:#d7deea !important;
}
html[data-theme='light'] #tbl th{
  background:#f1f5f9 !important;
  border-bottom:1px solid #d7deea !important;
}
html[data-theme='light'] #tbl td{
  border-bottom:1px solid #e5eaf3 !important;
}
html[data-theme='light'] #tbl tr:hover td{background:#f8fafc !important;}

/* ===== hotfix 2026-02-20j (remove dark bottom line under latency graph in light) ===== */
html[data-theme='light'] .api-graph{
  background:#ffffff !important;
  border:1px solid #d7deea !important;
  box-shadow:none !important;
}
html[data-theme='light'] .api-graph iframe{
  background:#ffffff !important;
  border:0 !important;
  box-shadow:none !important;
}

/* ===== hotfix 2026-02-20k (remove dark strip below embed graph) ===== */
.api-graph{ margin-bottom:0 !important; padding-bottom:0 !important; line-height:0; }
.api-graph iframe{ display:block; margin:0 !important; }
html[data-theme='light'] .api-graph{ background:#ffffff !important; }
html[data-theme='light'] .api-graph iframe{ height:520px !important; background:#ffffff !important; }
html[data-theme='dark'] .api-graph iframe{ height:520px !important; }

/* hotfix 2026-02-20l: no extra strip under graph */
.api-graph{overflow:hidden !important;}
.api-graph iframe{height:500px !important;vertical-align:top !important;}
@media (max-width:600px){.api-graph iframe{height:420px !important;}}

/* ===== hotfix 2026-02-20p (footer width aligned with content cards) ===== */
.footer, #footer{
  width: 100% !important;
  max-width: 1040px !important;
  margin: 14px auto 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
}
.footer-inner{ width:100% !important; }

/* ===== hotfix 2026-02-20q (unify header/nav/footer width to graph card width) ===== */
:root{ --page-max: 1200px; }
body > *{ max-width: var(--page-max) !important; }
.lg-header,
.lg-nav,
.wrap,
.footer,
#footer{
  max-width: var(--page-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== hotfix 2026-02-20r (light menu should be white) ===== */
html[data-theme='light'] .lg-nav{
  background:#ffffff !important;
  border-color:#d7deea !important;
  box-shadow:0 8px 20px rgba(15,23,42,.08) !important;
}
html[data-theme='light'] .lg-nav-item{
  background:#ffffff !important;
  border-color:#cfd8e8 !important;
  color:#0f172a !important;
}
html[data-theme='light'] .lg-nav-item.active{
  background:#f7931e !important;
  border-color:#f7931e !important;
  color:#111827 !important;
}

/* ===== hotfix 2026-02-20s (theme button bottom-right in header on all pages) ===== */
.lg-header{ position:relative !important; }
.lg-head-actions{
  position:absolute !important;
  right:14px !important;
  bottom:12px !important;
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
}
@media (max-width:700px){
  .lg-head-actions{ right:10px !important; bottom:10px !important; }
}

/* ===== hotfix 2026-02-20t (mobile/tablet: theme+menu top-right) ===== */
@media (max-width: 1024px){
  .lg-header{ padding-right: 86px !important; }
  .lg-head-actions{
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
  }
}

/* ===== hotfix 2026-02-20u (mail audit page) ===== */
.mail-audit-wrap textarea{
  width:100%;
  min-height:320px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--input);
  color:var(--text);
  padding:12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.mail-result{
  margin-top:14px;
  padding:12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  display:grid;
  gap:6px;
}
html[data-theme='light'] .mail-audit-wrap textarea{
  background:#ffffff;
  color:#0f172a;
  border-color:#d7deea;
}
html[data-theme='light'] .mail-result{
  background:#ffffff;
  border-color:#d7deea;
  color:#0f172a;
}

/* ===== hotfix 2026-02-20x (mail audit fix-for-me flow) ===== */
.mail-ok,.mail-err{margin:8px 0 12px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);}
.mail-ok{background:rgba(74,222,128,.12);}
.mail-err{background:rgba(248,113,113,.12);}
.fix-cta-wrap{margin-top:10px;}
.fix-form{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.03);}
.fix-form input{width:100%;max-width:380px;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--input);color:var(--text);margin:8px 0 10px;}
html[data-theme='light'] .fix-form{background:#fff;border-color:#d7deea;color:#0f172a;}
html[data-theme='light'] .fix-form input{background:#fff;border-color:#d7deea;color:#0f172a;}

/* CSP hardening helpers */
.embed-mode #control{display:none !important;}
.mail-audit-title{margin:0 0 10px;}
.mail-audit-actions{margin-top:10px;}
.is-hidden{display:none !important;}
.u-hidden{display:none !important;}

/* Mail Audit primary button in BUBA orange */
.mail-audit-form button,
.mail-audit-wrap button[type="submit"]{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:10px 18px;
  border-radius:12px;
  font-weight:900;
  font-size:14px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color:#141414;
  box-shadow: 0 10px 18px rgba(0,0,0,.25);
}
.mail-audit-form button:hover,
.mail-audit-wrap button[type="submit"]:hover{ filter: brightness(1.04); }

/* Force light theme graph surfaces to be light */
html[data-theme='light'] .api-graph,
html[data-theme='light'] .api-graph iframe,
html[data-theme='light'] #latChart,
html[data-theme='light'] canvas{
  background:#ffffff !important;
}

/* Accessibility contrast boost (light theme) */
html[data-theme='light'] body,
html[data-theme='light'] .main,
html[data-theme='light'] #control,
html[data-theme='light'] .monospace,
html[data-theme='light'] #content{
  color:#0f172a !important;
}
html[data-theme='light'] .lg-head-title{color:#0f172a !important;}
html[data-theme='light'] .lg-head-sub{color:#1e293b !important;}
html[data-theme='light'] .lbl,
html[data-theme='light'] .usage-sub,
html[data-theme='light'] .footer-info,
html[data-theme='light'] .footer-visitors,
html[data-theme='light'] .muted,
html[data-theme='light'] p{color:#1f2937 !important;}
html[data-theme='light'] .lg-nav-item{
  color:#111827 !important;
  border-color:#94a3b8 !important;
  background:#ffffff !important;
}
html[data-theme='light'] .lg-nav-item.active{
  color:#111827 !important;
  background:linear-gradient(180deg,#f59e0b,#f59e0b) !important;
  border-color:#d97706 !important;
}
html[data-theme='light'] input::placeholder,
html[data-theme='light'] textarea::placeholder{color:#475569 !important; opacity:1 !important;}

/* Accessibility: stronger link contrast on light theme */
html[data-theme='light'] a,
html[data-theme='light'] .footer a,
html[data-theme='light'] .lg-contact-row a,
html[data-theme='light'] .lg-nav-item a{
  color:#92400e !important;
}
html[data-theme='light'] a:hover{
  color:#78350f !important;
  text-decoration:underline;
}
html[data-theme='light'] .footer-info,
html[data-theme='light'] .footer-visitors,
html[data-theme='light'] #usage_caption{
  color:#111827 !important;
}

/* Accessibility: fix footer contrast (PageSpeed mobile) */
html[data-theme='light'] .footer,
html[data-theme='light'] .footer-inner,
html[data-theme='light'] .footer-row,
html[data-theme='light'] .footer-meta,
html[data-theme='light'] .usage-card{
  background:#ffffff !important;
  opacity:1 !important;
}
html[data-theme='light'] #visitors,
html[data-theme='light'] .footer-visitors,
html[data-theme='light'] .footer-info,
html[data-theme='light'] .usage-title,
html[data-theme='light'] #usage_caption,
html[data-theme='light'] .usage-controls,
html[data-theme='light'] .usage-controls label,
html[data-theme='light'] #usage_period{
  color:#111827 !important;
  border-color:#94a3b8 !important;
}

#fix_for_me_btn{background:linear-gradient(180deg,var(--accent),var(--accent2)) !important;color:#141414 !important;border:0 !important;border-radius:12px;padding:10px 18px;font-weight:900;box-shadow:0 10px 18px rgba(0,0,0,.25);}
#fix_for_me_btn:hover{filter:brightness(1.04);}

.lg-nav-right{justify-content:flex-end;}
.privacy-footer-only .usage-card{display:none !important;}

@media (min-width: 1024px){
  
}

@media (max-width: 700px){
  .privacy-aup-page .lg-header{
    grid-template-columns: 64px minmax(0,1fr) 44px !important;
    align-items: start;
  }
  
}

.privacy-aup-page .footer .usage-card{
  display: block !important;
}

@media (max-width:700px){
  .privacy-aup-page .lg-header{
    grid-template-columns:50px minmax(0,1fr) 38px !important;
    align-items:start !important;
  }
  
}

.privacy-aup-page .privacy-footer-only .footer-usage,
.privacy-aup-page .privacy-footer-only .usage-card{
  display:none !important;
}
.privacy-aup-page .privacy-footer-only .footer-row,
.privacy-aup-page .privacy-footer-only .footer-row--stack{
  display:block !important;
}
.privacy-aup-page .privacy-footer-only .footer-meta{
  width:100% !important;
  text-align:left !important;
}

@media (max-width:700px){
  
}

@media (max-width:700px){
  html body
}

@media (max-width:700px){
  html body.privacy-aup-page .lg-header #theme_toggle{
    top:12px !important;
    right:12px !important;
    bottom:auto !important;
  }
}

.privacy-aup-page .lg-nav{margin:12px auto 18px !important;justify-content:center !important;}
@media (max-width:700px){
}
.privacy-aup-page .privacy-footer-only .footer-usage,
.privacy-aup-page .privacy-footer-only .usage-card{display:none !important;}


/* privacy-aup clean rules (single source of truth) */
.privacy-aup-page .lg-nav{margin:12px auto 18px !important;justify-content:center !important;}
.privacy-aup-page .lg-header{position:relative !important;padding-right:72px !important;}
@media (max-width:700px){
}
.privacy-aup-page .privacy-footer-only .footer-usage,
.privacy-aup-page .privacy-footer-only .usage-card{display:none !important;}

/* privacy-aup (CSP-safe): no inline styles */
.privacy-aup-page .lg-nav{margin:12px auto 18px !important;justify-content:center !important;}
.privacy-aup-page .lg-header{position:relative !important;padding-right:72px !important;}

@media (max-width:700px){
  
}
.privacy-aup-page .privacy-footer-only .footer-usage,
.privacy-aup-page .privacy-footer-only .usage-card{display:none !important;}

/* legacy overrides moved out; canonical header/nav/footer rules now live in /static/header-unify.css */