:root{
  --bg:#0c1017; --panel:#0f141b; --panel2:#121a24;
  --bd:#1f2a38; --bd2:#2b3b50; --txt:#e8f1ff; --muted:#94a5bd;
  --brand:#39a8ff; --brand-2:#82d0ff; --ok:#00d27a; --danger:#ff5c5c; --warn:#ffb020;
  --shadow: rgba(0,0,0,.45);
}

*{ box-sizing:border-box }
/* ZÁKLAD */
html, body { height: 100%; }
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--txt);
  background: transparent;
  position: relative;
}

/* FIXNÍ POZADÍ */
body::before{
  content:"";
  position: fixed;
  inset: 0;              /* top:0; right:0; bottom:0; left:0 */
  z-index: -1;           /* pod obsahem */
  background:
    radial-gradient(1100px 600px at -10% -10%, #172236 0, transparent 70%),
    radial-gradient(1100px 600px at 110% 110%, #0f1b2b 0, transparent 70%),
    linear-gradient(180deg, var(--bg), var(--bg));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center top, center bottom, center;
  background-size: auto, auto, auto;
  will-change: transform; /* plynulejší scroll */
}

/* Utilities */
.container{ max-width:1100px; margin:0 auto; padding:20px }
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--bd);
  border-radius:16px; box-shadow:0 20px 50px var(--shadow);
  overflow:hidden;
}
.card header{
  padding:14px 16px; border-bottom:1px solid var(--bd);
  display:flex; align-items:center; justify-content:space-between;
}
.card .content{ padding:16px }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:12px; border:1px solid var(--bd);
  color:var(--txt);
  background:linear-gradient(180deg,#0f1825,#0d141e);
  cursor:pointer; transition: box-shadow .2s ease, transform .02s ease;
  text-decoration:none; user-select:none;
  font-size: 12px;
}
.btn:hover{ box-shadow:0 0 0 2px rgba(130,208,255,.2), 0 0 20px rgba(57,168,255,.15); }
.btn.brand{ background:linear-gradient(180deg,#0e2136,#0e1723); border-color:#1f3850 }
.btn.ok{ background:linear-gradient(180deg,#0e2b22,#0d1f1a); border-color:#164338 }
.btn.danger{ background:linear-gradient(180deg,#2e1416,#1d0f11); border-color:#4a1e22 }
.btn.warn{ background:linear-gradient(180deg,#2a2412,#1b160c); border-color:#3d361e }

/* Inputs */
.input, .select{
  width:100%; padding:12px 12px; border-radius:12px;
  border:1px solid var(--bd); background:#0f1622; color:var(--txt);
}
.input:focus, .select:focus{ outline:none; box-shadow:0 0 0 2px rgba(130,208,255,.2) }

/* Nav */
.nav{ position:sticky; top:0; z-index:20; backdrop-filter: blur(6px);
  background:linear-gradient(180deg, rgba(12,16,23,.8), rgba(12,16,23,.55));
  border-bottom:1px solid var(--bd);
}
.nav .inner{ max-width:1100px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; gap:12px }
.brand{ font-weight:800; letter-spacing:.4px; display:flex; gap:10px; align-items:center }
.brand .logo{ width:35px; height:35px; border-radius:8px; background: url("https://ovaluk.eu/images/logo_vpn.png") no-repeat center center; background-size: cover; }

.spacer{ flex:1 }

.menu{ display:flex; gap:8px; flex-wrap:wrap }
#modCard,
#adminCard,
#usrCard {
  grid-column: 1 / -1; /* natáhne se přes všechny sloupce gridu */
}

/* Grid */
.grid{ display:grid; gap:16px }
@media (min-width: 900px){
  .grid.cols-2{ grid-template-columns: 1fr 1fr }
}

/* Device list — polished */
.device{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 400px;     /* výchozí varianta: hlavička vlevo, boxy vpravo pod sebou */
  gap:18px;
  padding:18px;
  border:1px solid var(--bd);
  border-radius:18px;
  background:
    radial-gradient(120% 120% at 105% -15%, rgba(57,168,255,.07), transparent 60%),
    linear-gradient(180deg,#0f141b,#0f1622);
  box-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.device:hover{
  border-color: var(--bd2);
  box-shadow: 0 16px 40px rgba(0,0,0,.38), 0 0 0 2px rgba(130,208,255,.08) inset;
}


.device.device--row{
  grid-template-columns: 1fr;
}
.device.device--row .device-side{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}

/* responzivní zalomení boxů */
@media (max-width: 1100px){
  .device.device--row .device-side{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .device.device--row .device-side{ grid-template-columns: 1fr; }
}

.device-head{
  display:flex; align-items:center; gap:14px;
}
.device-icon{
  width:44px; height:44px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#1a2b3f,#132033);
  border:1px solid var(--bd2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.device-icon i{ font-size:18px; color:#d8ecff }

.device-name{ display:flex; flex-direction:column; }
.device-name .ttl{ font-weight:900; font-size:18px; letter-spacing:.2px }
.device-name .sub{ color:var(--muted); font-weight:600; margin-top:2px }

.device-pill{
  margin-left:auto;
  font-size:12px; font-weight:900; letter-spacing:.3px;
  border:1px solid #21445d; color:#cfeaff;
  background:linear-gradient(180deg,#0e1a28,#0b1622);
  padding:5px 12px; border-radius:999px; text-transform:uppercase;
}

/* “Buňky” */
.device-side{
  display:grid;
  grid-template-columns: 1fr;  /* default (pro .device bez .device--row) – pod sebou */
  gap:12px;
}
.side-box{
  border:1px solid var(--bd);
  background:linear-gradient(180deg,#0f1722,#0d141d);
  border-radius:14px; padding:12px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:10px;
}
.side-box .label{
  color:#9fb7d4; font-size:12px; margin-bottom:2px; text-transform:uppercase; letter-spacing:.35px;
}

/* token a akce */
.token{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-weight:800; letter-spacing:.35px;
  font-size: 14px;
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  border:1px solid #27425a; color:#e8f1ff;
  background:linear-gradient(180deg,#0c1420,#0a121b);
}
.token .copy{
  border:none; background:transparent; color:#a7d4ff; cursor:pointer;
  padding:0 6px; border-radius:8px; transition: background .15s ease, transform .05s ease;
}
.token .copy:hover{ background:rgba(130,208,255,.1) }
.token .copy:active{ transform: scale(.96) }

.device-actions{ display:flex; flex-wrap:wrap; gap:10px }
.device .btn{ padding:10px 12px; border-radius:12px }
.device .btn.warn{
  background:linear-gradient(180deg,#2b2413,#1a150c);
  border-color:#4a3e1e;
}
.device .btn i{ opacity:.95 }

/* Skeleton */
.skeleton-row{
  height:110px; border-radius:16px; border:1px solid var(--bd);
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,0) 35%, rgba(255,255,255,.05) 70%),
    linear-gradient(180deg,#0e1520,#0c111a);
  background-size: 240px 100%, 100% 100%;
  animation: skel 1.2s infinite linear;
}
@keyframes skel{ from{background-position:-240px 0,0 0} to{background-position:240px 0,0 0} }

@media (max-width: 1100px){
  .device{ grid-template-columns: 1fr }
}

/* Pills */
.actions{ display:flex; gap:8px; flex-wrap:wrap }
.kv{ display:grid; grid-template-columns: 120px 1fr; gap:8px; font-size:14px; color:#cde1ff }
.pill{ font-size:12px; color:#eef5ff; border:1px solid var(--bd); background:#6ea70b; padding:3px 7px; border-radius:999px; }

/* Alerts */
.alert{ margin-bottom: 15px; padding:12px; border-radius:12px; border:1px solid var(--bd); background:#0e1622; color:#d6e7ff; }
.alert.ok{ border-color:#1c4a3a; background:#0e1e18 }
.alert.err{ border-color:#4a2326; background:#1a1112 }

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  display: flex;                  /* Modal je vždy flexbox */
  align-items: center;
  justify-content: center;
  z-index: 50;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);

  /* výchozí stav = neviditelné */
  opacity: 0;
  pointer-events: none;

  /* animace fade-in/out */
  transition: opacity .25s ease, background .25s ease;
}

/* Aktivní modal */
.modal.show {
  opacity: 1;
  pointer-events: auto;
}

/* Samotný dialog */
.dialog {
  width: min(560px, 96vw);
  border: 1px solid var(--bd2);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  max-height: 88vh;

  /* výchozí animovaný stav */
  transform: translateY(20px) scale(.96);
  opacity: 0;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
}

/* Aktivní dialog – fade-in + slide */
.modal.show .dialog {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Hlavička, obsah a patička */
.dialog header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--bd2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog .content {
  padding: 14px;
  overflow: auto;
}

.dialog footer {
  padding: 12px 14px;
  border-top: 1px solid var(--bd2);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* Scrollbar styling (globálně i v modalu) */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-thumb{ background:#203247; border:2px solid #0b0f14; border-radius:999px }
*::-webkit-scrollbar-track{ background:#0b0f14 }

/* Forms helper */
.form-row{ display:grid; gap:10px; margin-bottom:10px }
.form-row.cols-2{ grid-template-columns: 1fr 1fr }

/* Small */
.small{ color:#9fb7d4; font-size:13px }

/* Login layout */
.auth-wrap { min-height: 100vh; width: 100%; display: grid; place-items: center; padding: 14px; }
.auth-card { width: min(400px, calc(100vw - 24px)); margin: 0 auto; }
.auth-title{ font-size:22px; font-weight:800; margin:0 0 4px }
.auth-sub{ color:#9fb7d4; margin:0 0 16px }

/* Ghost ikonové tlačítko v headeru */
.btn.icon { padding:8px 10px; gap:6px; }
.btn.ghost{
  background:transparent;
  border-color:transparent;
  border:1px solid #27425a;
}
.btn.ghost:hover{
  border-color:var(--bd);
}

/* Collapsible obsah */
.collapse{
  overflow:hidden;
  max-height:0;
  opacity:0;
  transform: translateY(-6px);
  transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
}
.collapse.open{
  opacity:1;
  transform: translateY(0);
}

/* Rotace šipky, když je otevřeno */
#devicesToggle[aria-expanded="true"] i{
  transform: rotate(180deg);
  transition: transform .25s ease;
}
#devicesToggle i{ transition: transform .25s ease; }

/* iOS-like switch (fix border centering) */
.ios-switch{
  --h: 22px;  /* výška switche */
  --w: 46px;  /* šířka switche */
  --p: 1px;   /* odsazení od okrajů (uvnitř borderu) */
  --b: 1px;   /* tloušťka borderu tracku */
  position: relative;
  display: inline-block;
  width: var(--w);
  height: var(--h);
}

.ios-switch input{ display:none; }

.ios-switch .track{
  position:absolute; inset:0;
  border-radius:999px;
  background:#555;
  border: var(--b) solid var(--bd);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: background .18s ease, border-color .18s ease;
  box-sizing:border-box; /* důležité */
}

.ios-switch .track::after{
  content:"";
  position:absolute;
  /* 1px mezera shora i zleva – měřeno od vnitřní hrany borderu */
  top: var(--p);
  left: var(--p);
  /* průměr kuličky: výška mínus 2×mezera a 2×border */
  width:  calc(var(--h) - (2*var(--p)) - (2*var(--b)));
  height: calc(var(--h) - (2*var(--p)) - (2*var(--b)));
  border-radius:50%;
  background:whitesmoke;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
  transition: transform .18s ease;
}

/* zapnuto */
.ios-switch input:checked + .track{
  background:#00c851; border-color:#00c851;
}

/* posun doprava – vzdálenost je (w - h), p a border se samy vyruší */
.ios-switch input:checked + .track::after{
  transform: translateX(calc(var(--w) - var(--h)));
}

.ios-switch input:disabled + .track{ opacity:.6; cursor:not-allowed; }


.plan-grid{
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
  margin-bottom:12px;
}
@media (max-width: 980px){ .plan-grid{ grid-template-columns: 1fr; } }

.plan-card{
  position:relative; cursor:pointer; user-select:none;
  border:1px solid var(--bd); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,#0f141b,#0f1622);
  transition: box-shadow .15s ease, border-color .15s ease, transform .05s ease;
  display:block;
}
.plan-card input{ display:none; }
.plan-card .plan-body{ padding:16px; }
.plan-card .plan-title{ font-weight:900; font-size:18px; margin-bottom:6px }
.plan-card .plan-price .big{ font-size:28px; font-weight:900 }
.plan-card .plan-feats{ margin:10px 0 5px 0; padding:0 0 0 0px; color:#b9cde8; font-size:14px }
.plan-card:hover{ border-color: var(--bd2); box-shadow:0 0 0 2px rgba(130,208,255,.08) inset; }
.plan-card input:checked + .plan-body,
.plan-card input:checked ~ .plan-body{ box-shadow:0 0 0 2px rgba(0,210,122,.28) inset; border-color:#1c4a3a; }
.plan-feats-red { color: red;}
.plan-feats-green {color: #00c851;}


/* Chips */
.term-wrap{ margin:15px 0 }
.term-title{ font-weight:800; margin-bottom:10px }
.term-grid{ display:flex; flex-wrap:wrap; gap:8px }
.logo-wrap{ margin:25px 0 }
.logo-grid{
  display:flex;
  flex-wrap:wrap; gap:8px;
  justify-content: space-evenly;
  align-items: center;
}
.term-grid.small .chip span{ padding:8px 12px }
.chip{ display:inline-block; cursor:pointer }
.chip input{ display:none }
.chip span{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border-radius:999px; border:1px solid var(--bd);
  background:linear-gradient(180deg,#0f1722,#0d141d);
}
.chip .badge{
  font-style:normal; font-size:12px; padding:2px 6px; border-radius:999px;
  background:#14301f; border:1px solid #1c4a3a; color:#a6f0cd;
}
.chip input:checked + span{ box-shadow:0 0 0 2px rgba(0,210,122,.28) inset; border-color:#1c4a3a; }

/* Checkout bar */
.checkout-bar{
  margin-top:12px; padding:12px; border:1px solid var(--bd); border-radius:14px;
  background:linear-gradient(180deg,#0f1722,#0d141d);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.checkout-bar .total{ font-size:22px; font-weight:900; color: #00c851; margin-top: 5px;}


.bank-box{
  margin-top:14px; padding:12px; border:1px solid var(--bd); border-radius:14px;
  background:linear-gradient(180deg,#0f1722,#0d141d);
}
.bank-box .grid{ display:grid; gap:12px; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .bank-box .grid{ grid-template-columns: 1fr 1fr; } }
.bigline{ font-weight:900; font-size:18px }
.qrcol{ display:flex; flex-direction:column; align-items:flex-start; gap:6px }

/* Loading stav tlačítka */
.btn.loading {
  position: relative;
  pointer-events: none;
  opacity: .8;
}

/* Spinner uvnitř tlačítka */
.btn.loading .spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
  display: inline-block;
  margin-right: 8px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Kanály modal */
.ch-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.ch-tabs .tab{
  padding:8px 12px; border:1px solid var(--bd);
  background:#0f1622; border-radius:999px; cursor:pointer; user-select:none;
}
.ch-tabs .tab.active{
  border-color:#1f3850; box-shadow:0 0 0 2px rgba(130,208,255,.12);
}

.ch-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
}

.ch-item{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px; border:1px solid var(--bd); border-radius:12px;
  background:linear-gradient(180deg,#0f1722,#0d141d);
}
.ch-item img{ width:56px; height:56px; object-fit:contain; display:block; }
.ch-item .name{ font-size:12px; text-align:center; color:#cfe1ff }


.ch-img-wrapper {
  position: relative;
  width: 60px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}


.ch-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 2px 5px;
  font-size: 9px;
  font-weight: bold;
  color: white;
  border-radius: 4px;
  background: #1f7aff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  z-index: 2;
}

.ch-badge.uhd {
  background: #ff4b4b;
}

/* === Cookie banner blokující web === */
.cookie-banner-block {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  display: none;
  justify-content: center;
  align-items: center;
}

/* Když se má ukázat */
.cookie-banner-block.show {
  display: flex;
}

/* Krabice uvnitř banneru */
.cookie-banner-block .cb-box {
  background: linear-gradient(180deg,#0f1722,#0d141d);
  color: #e8f1ff;
  padding: 24px;
  max-width: 560px;
  width: 92%;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  text-align: center;
  border: 1px solid #1f2a38;
}

/* Nadpis */
.cookie-banner-block .cb-title {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
}

/* Text */
.cookie-banner-block .cb-text {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 18px;
  color: #cfe1ff;
}

/* Tlačítko */
.cookie-banner-block .cb-actions {
  display: flex;
  justify-content: center;
}

.cookie-banner-block .cb-actions .btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
}

#devicesToggle[aria-expanded="true"] i,
#extendToggle[aria-expanded="true"] i,
#payhistToggle[aria-expanded="true"] i {
  transform: rotate(180deg);
  transition: transform .25s ease;
}

#devicesToggle i,
#extendToggle i,
#payhistToggle i {
  transition: transform .25s ease;
}
.hist-table thead th{ color:#cfe1ff; font-weight:700; }
.hist-row{
  background:linear-gradient(180deg,#0f1722,#0d141d);
  border:1px solid var(--bd);
  border-radius:12px;
}
.hist-row td{ padding:10px 8px; }