/* STREAMFINITY PANEL VERSION MARKERS
   1.0.582r20 - central TMDB key + visible panel revision
   1.0.413r18 - weekly encrypted Firebase backup
   1.0.413r17 - recycle bin
*/

:root {
  color-scheme: dark;
  --bg: #050914;
  --surface: #0b1220;
  --surface-2: #101a2a;
  --line: #213047;
  --cyan: #30d5ff;
  --gold: #ffb000;
  --green: #36d675;
  --red: #ff4f75;
  --purple: #b985ff;
  --muted: #8ea2bd;
  --text: #f2f7ff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Segoe UI, Arial, sans-serif; background: radial-gradient(circle at 25% 0%, #0b1d3a 0, var(--bg) 42%); color: var(--text); min-height: 100vh; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.shell { width: min(1800px, calc(100% - 32px)); margin: 18px auto 42px; }
.card { background: rgba(10,18,32,.92); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 16px 40px rgba(0,0,0,.26); }
.header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; }
.brand { display: flex; gap: 14px; align-items: center; }
.logo { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: linear-gradient(145deg,#063666,#0d1423); border: 1px solid #1c79b5; font-size: 28px; color: var(--cyan); }
h1 { margin: 0; font-size: 24px; letter-spacing: .02em; }
.sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.header-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.badge { padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.badge.ok { color: var(--green); border-color: rgba(54,214,117,.35); background: rgba(54,214,117,.08); }
.btn { border: 1px solid var(--line); color: var(--text); background: var(--surface-2); padding: 10px 14px; border-radius: 12px; font-weight: 700; }
.btn.primary { color: #001018; background: var(--cyan); border-color: var(--cyan); }
.btn.danger { color: #fff; background: #8b1e3a; border-color: #b42c51; }
.stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 12px; margin: 14px 0; }
.stat { padding: 16px; }
.stat small { color: var(--muted); text-transform: uppercase; font-weight: 800; }
.stat strong { display: block; font-size: 30px; margin-top: 6px; }
.grid { display: grid; grid-template-columns: minmax(330px, .85fr) minmax(650px, 1.8fr); gap: 14px; }
.panel { padding: 20px; }
.panel h2 { margin: 0 0 16px; font-size: 18px; }
.form-grid { display: grid; gap: 12px; }
label { display: grid; gap: 6px; color: #c7d4e6; font-size: 12px; font-weight: 800; }
input, select, textarea { width: 100%; border: 1px solid var(--line); background: #050b15; color: var(--text); border-radius: 11px; padding: 11px 12px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(48,213,255,.12); }
.type-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.type-row button.active { background: var(--cyan); color: #001018; border-color: var(--cyan); }
.inline { display: flex; align-items: center; gap: 10px; }
.inline input[type=checkbox] { width: 20px; height: 20px; }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 12px; }
.toolbar input { max-width: 340px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 760px; }
th, td { border-bottom: 1px solid rgba(33,48,71,.75); padding: 12px 8px; text-align: left; font-size: 12px; vertical-align: middle; }
th { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.status { display: inline-flex; padding: 5px 9px; border-radius: 999px; font-size: 10px; font-weight: 900; }
.status.on { color: var(--green); background: rgba(54,214,117,.1); border: 1px solid rgba(54,214,117,.3); }
.status.off { color: var(--red); background: rgba(255,79,117,.1); border: 1px solid rgba(255,79,117,.3); }
.actions { display: flex; gap: 6px; justify-content: flex-end; }
.actions button { padding: 7px 9px; }
.note { margin-top: 14px; padding: 14px; font-size: 12px; color: var(--muted); line-height: 1.55; }
.login { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(1,4,10,.92); backdrop-filter: blur(8px); }
.login-box { width: min(440px, calc(100% - 30px)); padding: 24px; }
.login-box h2 { margin-top: 0; }
.message { margin: 10px 0 0; min-height: 20px; font-size: 12px; color: var(--red); }
@media(max-width: 1050px) { .stats { grid-template-columns: repeat(2,1fr); } .grid { grid-template-columns: 1fr; } }
@media(max-width: 620px) { .shell { width: min(100% - 16px, 1800px); margin-top: 8px; } .header { align-items: flex-start; flex-direction: column; } .stats { grid-template-columns: 1fr 1fr; } .toolbar { align-items: stretch; flex-direction: column; } .toolbar input { max-width: none; } }

fieldset { border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin: 0; background: rgba(5,11,21,.42); }
legend { padding: 0 8px; color: var(--text); font-weight: 900; font-size: 16px; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 10px; }
.config-grid { display: grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 12px; }
.config-grid .wide { grid-column: 1 / -1; }
.checkbox-card { min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(16,26,42,.72); }
.config-panel { margin-top: 14px; }
@media(max-width: 720px) { .checks, .config-grid { grid-template-columns: 1fr; } .config-grid .wide { grid-column: auto; } }


/* 1.0.413r2 - diagnostics and resolved reports */
.badge.ok { border-color: rgba(54,211,153,.45); color: var(--green); background: rgba(54,211,153,.08); }
.badge.warn { border-color: rgba(255,190,62,.55); color: var(--gold); background: rgba(255,190,62,.10); }
.device-main-row td { border-bottom: 0; }
.device-diagnostics-row td { padding-top: 0; }
.diagnostics-wrap { display: grid; gap: 8px; padding: 0 8px 12px; }
.diagnostic-box { border: 1px solid rgba(57,198,255,.30); background: rgba(57,198,255,.06); border-radius: 12px; padding: 10px 12px; }
.diagnostic-box.report { border-color: rgba(255,190,62,.45); background: rgba(255,190,62,.08); }
.diagnostic-box.error { border-color: rgba(255,74,110,.48); background: rgba(255,74,110,.08); }
.diagnostic-box.ok-box { color: var(--green); border-color: rgba(54,211,153,.38); background: rgba(54,211,153,.06); }
.diagnostic-head { display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:6px; }
.diagnostic-head span, .tiny { color: var(--muted); font-size: 11px; }
.diagnostic-text { white-space: pre-wrap; overflow-wrap:anywhere; line-height:1.45; }
.diagnostic-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.btn.success { border-color: rgba(54,211,153,.55); color: var(--green); background: rgba(54,211,153,.10); }
.pending-command { color: var(--gold); font-size: 12px; font-weight: 700; }
@media (max-width: 720px) { .diagnostic-head { align-items:flex-start; flex-direction:column; gap:3px; } }


/* 1.0.413r3 - pregledne kartice umesto dugacke stranice */
.panel-tabs {
  display: flex;
  gap: 10px;
  margin: 14px 0;
  padding: 8px;
  position: sticky;
  top: 8px;
  z-index: 12;
  background: rgba(11,18,32,.96);
  backdrop-filter: blur(12px);
}
.panel-tab {
  flex: 0 1 260px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(16,26,42,.78);
  color: var(--muted);
  font-weight: 900;
  transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.panel-tab:hover { border-color: rgba(48,213,255,.55); color: var(--text); }
.panel-tab.active {
  color: #04101a;
  border-color: var(--cyan);
  background: linear-gradient(135deg, var(--cyan), #45b7ff);
  box-shadow: 0 0 0 1px rgba(48,213,255,.15), 0 10px 28px rgba(48,213,255,.16);
}
.panel-view { min-width: 0; }
#settingsView .config-panel { margin-top: 0; }
@media(max-width: 620px) {
  .panel-tabs { top: 4px; }
  .panel-tab { flex: 1 1 50%; font-size: 13px; padding: 9px 8px; }
}


/* 1.0.413r4 - update pregled i jasna verzija aplikacije */
.version-target { color: var(--cyan); font-size: 20px !important; line-height: 1.2; overflow-wrap: anywhere; }
.app-version-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 112px; }
.app-version-cell > strong { font-size: 14px; color: #f7fbff; white-space: nowrap; }
.update-state { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 900; line-height: 1; white-space: nowrap; border: 1px solid var(--line); }
.update-state.done { color: var(--green); border-color: rgba(30,210,130,.45); background: rgba(30,210,130,.10); }
.update-state.pending { color: var(--gold); border-color: rgba(255,183,3,.48); background: rgba(255,183,3,.10); }
.update-state.unknown { color: var(--muted); border-color: rgba(148,163,184,.35); background: rgba(148,163,184,.08); }
@media (max-width: 900px) { .update-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }


/* 1.0.413r5 - online/offline, update, test i command ACK pregled */
.status-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:5px; }
.presence { display:inline-flex; padding:5px 9px; border-radius:999px; font-size:10px; font-weight:900; border:1px solid var(--line); }
.presence.online { color:var(--green); background:rgba(54,214,117,.11); border-color:rgba(54,214,117,.38); box-shadow:0 0 12px rgba(54,214,117,.08); }
.presence.offline { color:var(--muted); background:rgba(142,162,189,.08); border-color:rgba(142,162,189,.28); }
.status.update { color:#1b1200; background:var(--gold); border:1px solid var(--gold); }
.status.test { color:#11051f; background:var(--purple); border:1px solid var(--purple); }
.device-flags { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:620px) { .device-flags { grid-template-columns:1fr; } }

/* 1.0.413r7 - kompaktne statistike, puni Device Key i stabilna izmena */
@media (min-width: 1200px) {
  .stats {
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 8px;
  }
  .stat {
    min-width: 0;
    padding: 12px 10px;
    border-radius: 14px;
  }
  .stat small {
    display: block;
    font-size: 9px;
    line-height: 1.2;
    min-height: 22px;
    overflow-wrap: anywhere;
  }
  .stat strong {
    font-size: 23px;
    line-height: 1.05;
    margin-top: 3px;
  }
  .stat .version-target {
    font-size: 15px !important;
    line-height: 1.15;
  }
}
@media (min-width: 850px) and (max-width: 1199px) {
  .stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.device-key-full {
  display: inline-block;
  min-width: 58px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--cyan);
  user-select: all;
}
#mac[readonly] {
  color: var(--muted);
  background: rgba(5,11,21,.72);
  cursor: not-allowed;
}


/* 1.0.413r10 - trajna prijava i auto osvezavanje */
#autoRefreshBadge { color: var(--cyan); border-color: rgba(48,213,255,.35); background: rgba(48,213,255,.07); }
@media(max-width: 620px) { .header-actions { width: 100%; justify-content: flex-start; } }

/* 1.0.413r13 - ručno osvežavanje ostaje dostupno */
#refreshBtn:disabled { opacity:.65; cursor:wait; }

/* 1.0.413r14 - VPN profiles + assignment */
.vpn-grid { align-items: start; }
.vpn-note { padding: 12px 14px; border: 1px solid rgba(48,213,255,.24); border-radius: 12px; background: rgba(48,213,255,.06); line-height: 1.55; }
.vpn-table { min-width: 760px; }
.vpn-assignment { margin-top: 18px; }
.fixed-setting { opacity: .88; }
.status.vpn-connected { color: #04130b; background: var(--green); border-color: var(--green); }
.status.vpn-ready { color: #1b1200; background: var(--gold); border-color: var(--gold); }
.status.vpn-error { color: #fff; background: #8b1e3a; border-color: #d33d66; }
.vpn-assigned-label { color: var(--cyan); margin-top: 4px; }
.vpn-error-text { color: var(--red); margin-top: 3px; max-width: 340px; overflow-wrap: anywhere; }
#vpnConfigText { font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 11px; line-height: 1.45; min-height: 220px; resize: vertical; }
#vpnAssignmentMessage { min-height: 18px; margin-top: 10px; color: var(--cyan); }
@media(max-width: 620px) {
  .panel-tabs { flex-wrap: wrap; }
  .panel-tab { flex: 1 1 30%; min-width: 90px; }
}


/* 1.0.413r15 - Live viewing status / Now Playing */
.now-playing-cell { min-width: 210px; }
.now-playing-card { min-width: 190px; max-width: 290px; border: 1px solid rgba(48,213,255,.26); background: rgba(48,213,255,.055); border-radius: 12px; padding: 9px 10px; }
.watching-head { display:flex; gap:6px; align-items:center; color:var(--cyan); font-size:10px; font-weight:900; }
.watching-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(54,214,117,.65); flex:0 0 auto; }
.watching-state { color:var(--green); margin-left:auto; font-size:9px; }
.watching-title { color:var(--text); font-weight:900; font-size:13px; margin-top:5px; overflow-wrap:anywhere; }
.watching-detail { margin-top:2px; color:#a9c5d9; }
.watching-duration { margin-top:5px; color:var(--muted); font-size:10px; }
.watching-duration strong { color:var(--cyan); font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.watching-idle { color:var(--muted); }
@media (min-width: 1200px) { .stats { grid-template-columns: repeat(12, minmax(0, 1fr)); } }


/* 1.0.413r16 - siri panel + uza registracija uredjaja */
/* Stari max 1800px je sprecavao da 80% browser zoom iskoristi dodatnu sirinu. */
.shell {
  width: min(2200px, calc(100% - 20px));
}

@media (min-width: 1051px) {
  /* Leva forma je oko 70-80px (~2cm) uza na tipicnom desktopu. */
  .grid {
    grid-template-columns: clamp(390px, 27vw, 500px) minmax(0, 1fr);
    gap: 14px;
  }
  .grid > .panel { min-width: 0; }

  /* Desna strana dobija prostor; ako ipak ne stane, skroluje se umesto preklapanja. */
  #devicesView .table-wrap { overflow-x: auto; overscroll-behavior-inline: contain; }
  #devicesView table { min-width: 1040px; }
  #devicesView .device-main-row > td:last-child { min-width: 128px; }
  #devicesView .device-main-row .actions {
    min-width: 118px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
  }
}

@media (min-width: 1900px) {
  /* Na veoma sirokom ekranu/80% zoom-u dozvoli jos vise prostora tabeli. */
  .shell { width: min(2300px, calc(100% - 20px)); }
}


/* 1.0.413r17 - recycle bin / restore deleted users */
.tab-count {
  display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; margin-left:6px;
  border-radius:999px; background:rgba(255,255,255,.12); color:inherit; font-size:11px; font-weight:900;
}
.panel-tab.active .tab-count { background:rgba(4,16,26,.16); }
.recycle-panel { margin-top:14px; }
.recycle-toolbar { align-items:flex-start; }
.recycle-tools { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.recycle-tools input { width:min(360px, 70vw); }
.recycle-warning {
  margin:0 0 12px; padding:11px 13px; border:1px solid rgba(255,190,70,.35); border-radius:12px;
  background:rgba(255,190,70,.08); color:#f7d995; font-size:12px; line-height:1.45;
}
#deletedView .table-wrap { overflow-x:auto; overscroll-behavior-inline:contain; }
#deletedView table { min-width:980px; }
.deleted-meta { display:flex; flex-direction:column; gap:3px; }
.deleted-actions { display:flex; gap:7px; justify-content:flex-end; flex-wrap:wrap; min-width:210px; }
.btn.restore { border-color:rgba(54,211,153,.55); color:var(--green); background:rgba(54,211,153,.10); }
.btn.permanent-delete { border-color:rgba(255,91,112,.55); color:#ff8ca0; background:rgba(255,91,112,.08); }
@media(max-width:620px) {
  .recycle-tools { width:100%; justify-content:stretch; }
  .recycle-tools input { width:100%; max-width:none; flex:1 1 100%; }
  .recycle-tools .btn { flex:1 1 auto; }
}


/* 1.0.413r17 - recycle bin */
/* 1.0.413r18 - weekly encrypted Firebase backup + Gmail */
.backup-panel {
  margin-top:18px; padding-top:18px; border-top:1px solid var(--line);
}
.backup-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.backup-head h2 { margin:4px 0 6px; }
.backup-security-note {
  margin:0 0 14px; padding:12px 14px; border:1px solid rgba(48,213,255,.28); border-radius:12px;
  background:rgba(48,213,255,.06); color:#b8d8e9; font-size:12px; line-height:1.55;
}
.backup-security-note strong { color:var(--cyan); }
.backup-hint { margin-top:10px; color:var(--muted); font-size:11px; line-height:1.5; }
.backup-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.backup-status-card { min-width:0; padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(16,26,42,.65); }
.backup-status-card span { display:block; color:var(--muted); font-size:10px; text-transform:uppercase; font-weight:900; }
.backup-status-card strong { display:block; margin-top:5px; font-size:12px; overflow-wrap:anywhere; }
.backup-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.backup-actions .message { margin:0; color:var(--cyan); }
.backup-error { margin-top:10px; padding:10px 12px; border:1px solid rgba(255,79,117,.38); border-radius:10px; background:rgba(255,79,117,.08); color:#ff91aa; font-size:11px; overflow-wrap:anywhere; }
.backup-status-ok { color:var(--green) !important; }
.backup-status-running { color:var(--gold) !important; }
.backup-status-error { color:var(--red) !important; }
@media(max-width:900px) { .backup-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
  .backup-head { flex-direction:column; }
  .backup-status-grid { grid-template-columns:1fr; }
  .backup-actions .btn { width:100%; }
}


/* 1.0.413r19 - safe full Firebase restore / disaster recovery */
.restore-panel { margin-top:24px; padding-top:20px; border-top:1px solid rgba(255,190,70,.28); }
.restore-head { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.restore-head h2 { margin:4px 0 6px; }
.restore-badge { border-color:rgba(255,190,70,.38); color:#f6cd7d; }
.restore-danger-note {
  margin:0 0 14px; padding:12px 14px; border:1px solid rgba(255,91,112,.42); border-radius:12px;
  background:rgba(255,91,112,.075); color:#f7b2bf; font-size:12px; line-height:1.55;
}
.restore-danger-note strong { color:#ff8ca0; }
.restore-danger-note.compact { margin-top:0; }
.restore-grid { display:grid; gap:12px; }
.restore-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:12px; }
.restore-actions .message { margin:0; color:var(--cyan); }
.restore-preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.restore-hash { margin-top:10px; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }
.restore-hash code { color:#b9d6e7; }
.restore-confirm { border-color:rgba(255,91,112,.34) !important; }
.restore-confirm label strong { color:#ff8ca0; }
#executeRestoreBtn:disabled { opacity:.42; cursor:not-allowed; filter:none; }
@media(max-width:900px) { .restore-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
  .restore-head { flex-direction:column; }
  .restore-preview-grid { grid-template-columns:1fr; }
  .restore-actions .btn { width:100%; }
}


/* 1.0.582r20 - central TMDB key + visible panel revision */
/* 1.0.582r21 - TMDB key persistence + secure masked status */
.panel-version {
  margin: 16px 0 8px; padding: 8px 12px; text-align: center;
  color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .06em;
  opacity: .9;
}
.panel-version::before { content: "Panel: "; color: var(--gold); }

.secret-status { display:block; margin-top:6px; color:var(--green); font-size:11px; font-weight:800; min-height:15px; }

/* Streamfinity VPN Usage R22 — isolated visual module; no changes to existing VPN forms */
.vpn-usage { margin-bottom:18px; }
.vpn-usage-head { display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.vpn-usage-head h2 { margin:4px 0 6px; }
.vpn-usage-kicker { font-size:11px; font-weight:900; letter-spacing:.18em; color:var(--cyan); }
.vpn-usage-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.vpn-usage-stat { padding:16px; min-width:0; border:1px solid var(--line); border-radius:14px; background:linear-gradient(155deg,#13243a,#0b1220); }
.vpn-usage-stat small { display:block; font-size:11px; font-weight:800; color:var(--muted); }
.vpn-usage-stat strong { display:block; font-size:clamp(19px,2.2vw,27px); margin:9px 0 4px; color:#e6f8ff; letter-spacing:-.04em; }
.vpn-usage-stat span { display:block; color:var(--muted); font-size:10px; }
.vpn-budget-row { padding:15px 0 12px; }
.vpn-budget-title { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; margin-bottom:10px; }
.vpn-budget-title strong:last-child { color:var(--cyan); }
.vpn-budget-track { height:14px; border:1px solid #244663; background:#07101f; border-radius:30px; overflow:hidden; }
.vpn-budget-fill { height:100%; width:0%; border-radius:inherit; background:linear-gradient(90deg,#1fbcf4,#43e1b4); transition:width .2s ease; }
.vpn-budget-fill.warn { background:linear-gradient(90deg,#e29f33,#fb577a); }
#vpnUsageBudgetNote { padding-top:9px; font-size:11px; line-height:1.5; }
.vpn-usage-subhead { font-size:14px; margin:17px 0 10px; }
.vpn-usage-chart { display:flex; gap:8px; align-items:end; min-height:145px; border:1px solid var(--line); border-radius:13px; padding:10px 14px; overflow-x:auto; background:rgba(6,15,31,.45); }
.vpn-usage-day { display:flex; flex:1 0 21px; min-width:21px; height:116px; flex-direction:column; justify-content:end; align-items:center; gap:6px; }
.vpn-usage-bar { width:100%; max-width:25px; min-height:2px; background:linear-gradient(0deg,#125ba5,#32d2f3); border-radius:5px 5px 2px 2px; }
.vpn-usage-day-label { font-size:9px; color:var(--muted); }
.vpn-usage-table-head { margin:16px 0 9px; }
.vpn-usage-table-head h3 { font-size:14px; margin:0 0 5px; }
.vpn-usage-table-head .sub { font-size:11px; }
.vpn-usage-footnote { font-size:11px; line-height:1.5; color:var(--muted); margin-top:10px; }
.vpn-usage tbody td { vertical-align:middle; }
.vpn-usage .status { white-space:nowrap; }
@media(max-width:850px) { .vpn-usage-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:550px) { .vpn-usage-cards { grid-template-columns:1fr 1fr; gap:8px; } .vpn-usage-stat { padding:12px; } .vpn-usage-stat strong { font-size:18px; } }

.vpn-r22-help { border:1px solid var(--line);border-radius:12px;padding:12px 15px;margin-bottom:16px;background:rgba(18,91,165,.12);font-size:12px;line-height:1.55;color:var(--muted);}
.vpn-r22-help strong {color:var(--cyan);}
/* Oracle one-device provisioning R23 */
.oracle-create { margin: 0 0 16px; }
.oracle-create h2 {margin: 5px 0 9px;}
.oracle-create .message {min-height: 1.6em; margin: 10px 0;}

/* R24: Oracle Germany server status; does not affect existing VPN controls */
.vpn-oracle-banner {display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:0 0 14px;padding:13px 15px;border:1px solid #245170;border-radius:12px;background:rgba(15,56,81,.35);font-size:13px;color:#d7eaf7;}
.vpn-oracle-country {display:flex;align-items:center;gap:7px;font-size:15px;}
.vpn-oracle-country-note {color:var(--muted);font-size:11px;}
.vpn-oracle-live {display:flex;align-items:center;gap:7px;}
.vpn-oracle-light {display:inline-block;width:8px;height:8px;background:#78899a;border-radius:50%;}
.vpn-oracle-light.active {background:#2ed29c;box-shadow:0 0 0 3px rgba(46,210,156,.14);}
.vpn-oracle-note {flex-basis:100%;font-size:10px;color:var(--muted);line-height:1.4;}
@media(max-width:550px){.vpn-oracle-banner{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}}

/* R25: mala akcija kopiranja; bez izmene tabele za VPN */
.copy-mini {margin-left:6px; padding:3px 6px !important; font-size:11px; vertical-align:middle; white-space:nowrap;}

/* R28_RELEASE_CHANNELS: odvojeni PRIVATE i GOOGLE PLAY pregledi. */
.r28-summary {display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:0 0 18px;}
.r28-summary-item {padding:14px;min-width:0;border:1px solid var(--line);}
.r28-summary-item small {display:block;color:var(--muted);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;}
.r28-summary-item strong {display:block;margin:8px 0;font-size:26px;line-height:1.1;}
.r28-summary-item span {display:block;font-size:11px;color:var(--muted);line-height:1.4;}
.r28-private strong {color:var(--green);}
.r28-play strong {color:var(--cyan);}
.r28-unknown strong {color:var(--gold);}
.r28-channel {display:inline-flex;border-radius:6px;padding:4px 7px;font-size:10px;font-weight:900;letter-spacing:.05em;white-space:nowrap;border:1px solid var(--line);}
.r28-channel.private {color:var(--green);background:rgba(54,214,117,.09);border-color:rgba(54,214,117,.36);}
.r28-channel.play {color:var(--cyan);background:rgba(35,184,242,.12);border-color:rgba(35,184,242,.35);}
.r28-channel.unknown {color:var(--gold);background:rgba(255,183,3,.09);border-color:rgba(255,183,3,.35);}
@media(max-width:620px){.r28-summary{grid-template-columns:repeat(2,minmax(0,1fr));}.r28-summary-item{padding:11px;}.r28-summary-item strong{font-size:22px;}}