/* TMDB Embed API — Premium Control Center */
:root {
  --bg: #070a0f;
  --bg-2: #0a0f17;
  --surface: #0e141d;
  --surface-2: #121a25;
  --surface-3: #182230;
  --surface-hover: #1a2635;
  --line: rgba(255,255,255,.075);
  --line-strong: rgba(255,255,255,.13);
  --text: #f5f8fc;
  --text-soft: #c4cedb;
  --text-dim: #7e8b9c;
  --text-faint: #556273;
  --blue: #3b8cff;
  --blue-2: #1677ff;
  --blue-soft: rgba(59,140,255,.13);
  --green: #28d98b;
  --orange: #ffb454;
  --red: #ff6174;
  --violet: #8f7cff;
  --shadow-lg: 0 28px 80px rgba(0,0,0,.45);
  --shadow-md: 0 14px 40px rgba(0,0,0,.28);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --transition: .2s cubic-bezier(.2,.8,.2,1);
  --mono: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
html { background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 75% -10%, rgba(40,113,255,.11), transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(35,100,220,.055), transparent 30%),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-size: 14px;
}
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
code, pre { font-family: var(--mono); }
::selection { background: rgba(59,140,255,.32); color: #fff; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #273444; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: #3a4b61; }

/* ---------- Shared primitives ---------- */
.eyebrow {
  color: #7190b5;
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.live-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(40,217,139,.10), 0 0 14px rgba(40,217,139,.65);
}
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  background: linear-gradient(145deg, #54a7ff, #1268df);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.25), 0 8px 25px rgba(22,119,255,.25);
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  color: #dcebff;
  background: linear-gradient(145deg, #23476d, #12263e);
  border: 1px solid rgba(106,166,255,.25);
  font-size: 12px;
  font-weight: 800;
}
.avatar.small { width: 28px; height: 28px; flex-basis: 28px; font-size: 10px; }

/* ---------- Login ---------- */
.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 32px 18px;
  position: relative;
  background:
    radial-gradient(circle at 50% 0%, rgba(31,105,255,.17), transparent 32%),
    linear-gradient(145deg, #05080c 0%, #08101b 52%, #05080d 100%);
}
.auth-orb {
  position: fixed;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: .22;
}
.auth-orb-a { background: #1476ff; top: -160px; right: -120px; }
.auth-orb-b { background: #1552a9; bottom: -220px; left: -150px; }

.auth-shell { width: min(100%, 450px); position: relative; z-index: 1; }
.auth-card {
  padding: 32px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(19,28,40,.96), rgba(9,14,21,.97));
  box-shadow: 0 40px 120px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.06);
}
.auth-brand { display:flex; align-items:center; gap:12px; margin-bottom:38px; }
.brand-copy { display:flex; flex-direction:column; gap:3px; }
.auth-brand .brand-title { font-weight:800; letter-spacing:-.02em; font-size:16px; }
.auth-heading { margin-bottom:24px; }
.status-dot {
  display:inline-flex; align-items:center; gap:8px;
  color:#90a4bc; font-size:11px; font-weight:650;
  margin-bottom:15px;
}
.status-dot span { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 10px rgba(40,217,139,.8); }
.auth-heading h1 { margin:0; font-size:34px; letter-spacing:-.04em; line-height:1.05; }
.auth-heading p { margin:10px 0 0; color:var(--text-dim); line-height:1.6; font-size:13px; }

.auth-alert { border-radius:13px; padding:12px 14px; display:flex; flex-direction:column; gap:3px; margin-bottom:16px; font-size:12px; }
.auth-alert.danger { background:rgba(255,97,116,.08); border:1px solid rgba(255,97,116,.22); color:#ffb0ba; }

.auth-form { display:flex; flex-direction:column; gap:16px; }
.auth-field { display:flex; flex-direction:column; gap:7px; }
.auth-field label { font-size:11px; font-weight:750; color:#aebdce; letter-spacing:.02em; }
.input-shell { display:flex; align-items:center; min-height:50px; border:1px solid var(--line-strong); border-radius:13px; background:rgba(4,8,13,.55); transition:var(--transition); }
.input-shell:focus-within { border-color:rgba(59,140,255,.75); box-shadow:0 0 0 4px rgba(59,140,255,.09); background:#09111b; }
.input-icon { width:42px; text-align:center; color:#5f7188; font-size:13px; }
.input-shell input {
  flex:1; min-width:0; border:0; outline:0; background:transparent; color:#f7fbff;
  padding:13px 0; font-size:13px;
}
.input-shell input::placeholder { color:#465465; }
.input-action { border:0; background:transparent; color:#6ea7ee; padding:8px 12px; font-size:11px; font-weight:750; }
.auth-submit {
  min-height:50px; width:100%; display:flex; align-items:center; justify-content:space-between;
  border:1px solid #4a9bff; border-radius:13px; padding:0 15px 0 18px;
  color:white; background:linear-gradient(135deg,#3d91ff,#176de0);
  box-shadow:0 12px 28px rgba(25,111,235,.22), inset 0 1px rgba(255,255,255,.25);
  font-size:13px; font-weight:800; transition:var(--transition);
}
.auth-submit:hover { transform:translateY(-1px); filter:brightness(1.06); }
.auth-submit:active { transform:translateY(0); }
.auth-submit.compact { min-height:46px; width:auto; min-width:190px; }
.button-arrow { font-size:18px; opacity:.8; }
.auth-status { min-height:18px; font-size:11px; text-align:center; color:var(--text-dim); }
.status.error { color:#ff7d8c !important; }
.status.success { color:#4ce3a1 !important; }

.auth-divider { display:flex; align-items:center; gap:12px; margin:24px 0 12px; color:#526173; font-size:10px; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.auth-divider::before, .auth-divider::after { content:""; height:1px; background:var(--line); flex:1; }
.secondary-action {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:transparent; border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; color:#b8c6d6; font-size:12px; font-weight:700;
}
.secondary-action:hover { background:rgba(255,255,255,.035); border-color:var(--line-strong); }
.pw-change { display:none; margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
.auth-actions-row { display:flex; flex-direction:column; gap:8px; }
.strength { display:flex; align-items:center; gap:10px; }
.strength-track { height:4px; background:#1d2734; border-radius:99px; flex:1; overflow:hidden; }
.strength-fill { display:block; width:0; height:100%; background:linear-gradient(90deg,#ff6174,#ffb454,#28d98b); transition:width .25s ease; }
.strength-label { min-width:60px; color:#637387; font-size:10px; }
.auth-footer { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; }
.security-note, .default-note { color:#667588; font-size:10px; line-height:1.5; }
.security-note span { color:#5ea2ff; margin-right:5px; }
.default-note code { color:#9eb3cc; }
.auth-page-footer { display:flex; justify-content:center; gap:9px; margin-top:18px; color:#4c5a6b; font-size:10px; }

/* ---------- App shell ---------- */
body:not(.auth-page) { display:flex; min-height:100vh; overflow:hidden; }
.sidebar {
  position:fixed; inset:0 auto 0 0; width:258px; z-index:50;
  display:flex; flex-direction:column; padding:22px 15px 15px;
  background:linear-gradient(180deg,#0b1119,#080d13);
  border-right:1px solid var(--line);
}
.sidebar-head { display:flex; align-items:center; gap:11px; padding:0 7px 22px; }
.brand-copy strong { font-size:13px; letter-spacing:-.01em; }
.brand-copy span { display:block; margin-top:3px; color:#667487; font-size:9px; font-weight:700; letter-spacing:.04em; }
.workspace-card {
  display:flex; align-items:center; gap:9px; padding:11px 12px;
  border:1px solid rgba(59,140,255,.14); border-radius:13px;
  background:linear-gradient(135deg,rgba(25,82,146,.13),rgba(10,17,25,.5));
  margin-bottom:22px;
}
.workspace-card > div { min-width:0; flex:1; }
.workspace-card strong { display:block; font-size:10px; color:#b9c8da; }
.workspace-card span:not(.live-dot):not(.workspace-chevron) { display:block; font-size:9px; color:#5f7084; margin-top:3px; }
.workspace-chevron { color:#435366; font-size:10px; letter-spacing:2px; }
.nav-label { padding:0 11px 8px; color:#4f5e70; font-size:9px; text-transform:uppercase; letter-spacing:.14em; font-weight:850; }
.nav { display:flex; flex-direction:column; gap:3px; }
.nav-item {
  width:100%; min-height:42px; display:flex; align-items:center; gap:11px;
  padding:0 12px; border:1px solid transparent; border-radius:11px;
  background:transparent; color:#8492a4; text-align:left;
  font-size:11px; font-weight:700; transition:var(--transition);
}
.nav-item:hover { background:rgba(255,255,255,.035); color:#dce6f1; }
.nav-item.active {
  color:#f4f8ff; background:linear-gradient(100deg,rgba(46,126,242,.18),rgba(46,126,242,.06));
  border-color:rgba(59,140,255,.18); box-shadow:inset 3px 0 0 #398cff;
}
.nav-icon { width:18px; color:#5f7187; text-align:center; font-size:13px; }
.nav-item.active .nav-icon { color:#63a7ff; }
.sidebar-spacer { flex:1; min-height:18px; }
.account-card {
  display:flex; align-items:center; gap:9px; padding:10px;
  border:1px solid var(--line); border-radius:13px; background:#0d141d;
  margin-bottom:9px;
}
.account-copy { min-width:0; flex:1; }
.account-copy strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; color:#d6e0eb; }
.account-copy span { display:block; margin-top:3px; color:#5e6d80; font-size:8px; }
.account-menu { border:0; background:transparent; color:#617085; padding:4px; }
.sidebar-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.sidebar-action {
  min-height:35px; display:flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid var(--line); border-radius:9px; color:#7f8da0; background:transparent;
  font-size:9px; font-weight:800;
}
.sidebar-action:hover { background:#121b26; color:#d7e1ed; border-color:var(--line-strong); }
.sidebar-action.danger-outline { color:#ff7180; border-color:rgba(255,97,116,.17); }
.sidebar-action.danger-outline:hover { background:rgba(255,97,116,.07); }
.side-footer { margin-top:14px; display:flex; flex-direction:column; gap:7px; color:#455364; font-size:8px; text-align:center; }
.footer-links { display:flex; justify-content:center; gap:12px; }
.footer-links a { color:#5e7188; text-decoration:none; }
.footer-links a:hover { color:#8ebcff; }

.main {
  margin-left:258px; width:calc(100% - 258px); height:100vh; overflow:auto;
  min-width:0; position:relative;
}
.topbar {
  height:72px; position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px; background:rgba(7,10,15,.82); backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
}
.topbar-left { display:flex; align-items:center; gap:14px; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:11px; color:#556477; }
.breadcrumb b { color:#2e3a49; font-weight:500; }
.breadcrumb strong { color:#cbd6e2; font-weight:750; }
.topbar-subtitle { margin-top:4px; color:#526173; font-size:9px; }
.topbar-right { display:flex; align-items:center; gap:8px; }
.system-chip, .security-status-pill {
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 11px;
  border:1px solid rgba(40,217,139,.13); border-radius:999px; background:rgba(40,217,139,.05);
  color:#7f9d91; font-size:9px; font-weight:750;
}
.top-icon { width:34px; height:34px; border:1px solid var(--line); border-radius:10px; color:#718095; background:rgba(255,255,255,.025); }
.top-icon:hover { color:#dbe6f2; background:rgba(255,255,255,.06); }
.profile-pill {
  display:flex; align-items:center; gap:7px; padding:3px 7px 3px 4px;
  border:1px solid var(--line); border-radius:999px; background:#0d141d; color:#aab8c9;
  font-size:9px; font-weight:750;
}
.profile-pill:hover { border-color:var(--line-strong); }
.profile-pill > span:last-child { color:#58687a; }
.mobile-close { display:none; }

.panels { padding:34px 38px 120px; max-width:1320px; margin:0 auto; }
.panel { display:none; animation:panelIn .24s ease; }
.panel.active { display:block; }
@keyframes panelIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

.hero-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:27px; }
.hero-heading h1 { margin:8px 0 5px; font-size:27px; letter-spacing:-.035em; line-height:1.1; }
.hero-heading p { margin:0; color:#647387; font-size:11px; }
.ghost-button {
  display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px;
  border:1px solid var(--line-strong); border-radius:10px; background:#0d141d; color:#9eacbc;
  font-size:10px; font-weight:800;
}
.ghost-button:hover { color:#edf5ff; background:#121c28; }
.ghost-button span { color:#63a7ff; font-size:15px; }

/* metric cards */
.metric-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:11px; margin-bottom:26px; }
.metric-card {
  min-height:116px; position:relative; padding:17px;
  border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(145deg,rgba(16,24,34,.95),rgba(11,16,23,.95));
  box-shadow:var(--shadow-md);
}
.metric-card > div { display:flex; flex-direction:column; gap:4px; }
.metric-card > div span { color:#657487; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.metric-card strong { color:#eef5fd; font-size:21px; letter-spacing:-.03em; }
.metric-card small { display:block; margin-top:12px; color:#4e5d70; font-size:9px; }
.metric-icon {
  width:28px; height:28px; display:grid; place-items:center; border-radius:9px; margin-bottom:13px;
  font-size:11px; border:1px solid currentColor;
}
.metric-icon.blue { color:#5ea2ff; background:rgba(59,140,255,.10); }
.metric-icon.violet { color:#9b8dff; background:rgba(143,124,255,.08); }
.metric-icon.green { color:#38d99a; background:rgba(40,217,139,.08); }
.metric-icon.orange { color:#ffbd69; background:rgba(255,180,84,.08); }

/* cards/status */
.status-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.status-block {
  min-width:0; padding:19px; border:1px solid var(--line); border-radius:16px;
  background:linear-gradient(145deg,rgba(13,20,29,.94),rgba(9,14,20,.94));
}
.status-block.wide { grid-column:1/-1; }
.status-block h2 { margin:0 0 14px; font-size:12px; letter-spacing:-.01em; }
.status-pre { max-height:280px; margin:0; }
pre {
  background:#080d13; border:1px solid var(--line); border-radius:11px; color:#8da0b6;
  padding:13px 14px; overflow:auto; line-height:1.55; font-size:9px;
}
.providers-table { display:flex; flex-direction:column; gap:5px; overflow:auto; }
.prov-row {
  display:grid; grid-template-columns:1.2fr .6fr .7fr .7fr .7fr 1.5fr;
  gap:7px; align-items:center; min-width:620px; padding:8px 9px;
  border:1px solid var(--line); border-radius:9px; background:#0c131c; color:#8796a8; font-size:9px;
}
.prov-row.header { background:#111b27; color:#617187; text-transform:uppercase; letter-spacing:.07em; font-weight:800; }
.notes { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#5e6d7e; }

/* forms */
.field { margin-bottom:21px; }
.field label { display:flex; flex-direction:column; gap:8px; color:#aab8c8; font-size:10px; font-weight:800; letter-spacing:.04em; }
.field .hint, .hint {
  color:#5d6c7f; font-size:9px; line-height:1.55; font-weight:500; letter-spacing:0; text-transform:none;
}
.field input[type=text], .field input[type=password], .field textarea, .field select {
  width:100%; border:1px solid var(--line-strong); border-radius:11px; outline:0;
  background:#0b121b; color:#dce6f0; padding:11px 12px; font-size:11px; transition:var(--transition);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color:rgba(59,140,255,.62); box-shadow:0 0 0 4px rgba(59,140,255,.07);
}
.field select { appearance:none; }
textarea { min-height:110px; resize:vertical; }
button {
  border:1px solid var(--line-strong); border-radius:10px; padding:9px 13px;
  background:#0d151f; color:#9cabbc; font-size:10px; font-weight:800; transition:var(--transition);
}
button:hover { background:#15202d; color:#e8f0f8; }
button.primary { color:#fff; border-color:#4a9bff; background:linear-gradient(135deg,#3d91ff,#176de0); }
button.primary:hover { filter:brightness(1.07); }
button.danger { color:#fff; background:#a92e42; border-color:#d34257; }
button.danger:hover { background:#c23a50; }

/* Domains */
.domain-access-card, .domain-list-card, .settings-card, .security-card {
  border:1px solid var(--line); border-radius:16px; background:#0c131c; padding:17px; margin-bottom:13px;
}
.domain-access-header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.domain-access-header strong { font-size:12px; }
.switch-label { display:flex !important; flex-direction:row !important; align-items:center; gap:8px !important; font-size:10px !important; color:#8da0b5 !important; }
.switch-label input { appearance:none; width:40px; height:23px; border-radius:99px; padding:0; border:1px solid #263547; background:#151e29; position:relative; cursor:pointer; }
.switch-label input::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#647487; transition:.2s; }
.switch-label input:checked { background:#2279ee; border-color:#4a9bff; }
.switch-label input:checked::after { transform:translateX(17px); background:#fff; }
.domain-access-status { margin-top:12px; color:#617286; font-size:9px; }
.domain-add-row, .key-add-row, .cookie-add-row { display:flex; gap:8px; align-items:center; margin-top:5px; }
.domain-add-row input, .key-add-row input, .cookie-add-row input { flex:1; }
.domain-list-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.domain-list-title strong { font-size:11px; }
.badge { display:inline-flex; align-items:center; justify-content:center; min-width:30px; padding:4px 8px; border-radius:999px; border:1px solid var(--line-strong); background:#151e29; color:#7e8c9e; font-size:8px; font-weight:800; text-transform:uppercase; }
.badge.ok { color:#52e3a4; border-color:rgba(40,217,139,.2); background:rgba(40,217,139,.07); }
.badge.fail { color:#ff7d8c; border-color:rgba(255,97,116,.2); background:rgba(255,97,116,.07); }
.badge.warn { color:#ffc170; border-color:rgba(255,180,84,.2); background:rgba(255,180,84,.07); }
.badge.off { color:#667587; }
.domain-list, .key-list, .cookie-list { display:flex; flex-direction:column; gap:6px; max-height:260px; overflow:auto; }
.domain-item, .key-item, .cookie-item {
  display:flex; align-items:center; gap:10px; padding:9px 10px; border:1px solid var(--line);
  border-radius:10px; background:#101822;
}
.domain-item code, .key-item code, .cookie-item code { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; color:#a8b9cc; font-size:9px; }
.remove-domain, .key-item button.remove, .cookie-item button.remove {
  border:0; background:rgba(255,97,116,.07); color:#ff7180; padding:6px 8px; font-size:8px;
}
.domain-warning { margin:14px 0 0 !important; }

/* chips/presets */
.provider-matrix, .quality-presets, .codec-presets, .adv-flag-grid { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.pm-item, .quality-presets label, .codec-presets .c-item, .adv-flag-item {
  min-height:36px; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:0 10px; border:1px solid var(--line); border-radius:9px;
  background:#0d151e; color:#718094; font-size:9px; font-weight:750; cursor:pointer;
}
.pm-item:hover, .quality-presets label:hover, .codec-presets .c-item:hover, .adv-flag-item:hover { border-color:rgba(59,140,255,.35); color:#aebfd1; }
.pm-item[data-enabled="true"] { color:#9db9d8; }
.pm-enable, .pm-default { min-width:26px; padding:5px 7px; }
.quality-presets input, .codec-presets input { accent-color:var(--blue); }
.quality-json, .json-adv { margin-top:9px; width:100%; min-height:100px; }
.adv-flag-item { width:170px; min-height:80px; text-align:center; flex-direction:column; }
.adv-flag-item.on { border-color:rgba(59,140,255,.5); background:rgba(59,140,255,.10); color:#cfe2ff; }
.adv-flag-item input { accent-color:var(--blue); }

/* alerts / action bar */
.alert {
  margin:12px 38px 0; padding:11px 13px; border:1px solid var(--line); border-radius:11px;
  background:#0d151e; color:#718095; font-size:9px; line-height:1.5;
}
.alert.warning { border-color:rgba(255,180,84,.20); background:rgba(255,180,84,.05); color:#e2ad63; }
.alert.info { border-color:rgba(59,140,255,.18); background:rgba(59,140,255,.05); color:#82b5f4; }
.actions-bar {
  position:fixed; z-index:35; left:258px; right:0; bottom:0;
  min-height:66px; display:flex; align-items:center; gap:8px; padding:12px 38px;
  background:rgba(8,12,18,.90); backdrop-filter:blur(18px); border-top:1px solid var(--line);
}
.actions-bar .status { margin-left:auto; }
.validation-summary { color:#ff7180; font-size:9px; }
.validation-summary.has-errors::before { content:'⚠ '; }
input.invalid, textarea.invalid { border-color:#ff6174 !important; }

/* Security */
.security-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:13px; }
.security-card { display:flex; gap:13px; margin:0; }
.security-card-icon { width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center; border-radius:11px; color:#6daaff; background:rgba(59,140,255,.09); border:1px solid rgba(59,140,255,.14); }
.card-label { display:block; color:#5f7084; text-transform:uppercase; font-size:8px; letter-spacing:.1em; font-weight:800; margin-bottom:5px; }
.security-card strong { font-size:12px; }
.security-card p { margin:5px 0 0; color:#5f6e80; font-size:9px; line-height:1.5; }
.security-form { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; align-items:end; }
.security-form .field { margin:0; }
.security-form-actions { grid-column:1/-1; display:flex; align-items:center; gap:10px; padding-top:3px; }
.security-tip { margin:0; display:flex; gap:7px; flex-direction:column; }

/* Modal */
.modal { display:none; position:fixed; inset:0; z-index:100; align-items:center; justify-content:center; padding:20px; }
.modal.show { display:flex; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
.modal-window {
  position:relative; z-index:1; width:min(100%,470px); padding:23px; border:1px solid var(--line-strong);
  border-radius:19px; background:#0d141e; box-shadow:var(--shadow-lg);
}
.modal-window h3 { margin:0; font-size:17px; letter-spacing:-.02em; }
.modal-text { color:#758397; font-size:10px; line-height:1.6; }
.modal-list { color:#8795a7; padding-left:18px; font-size:10px; line-height:1.8; }
.modal-opt { color:#78889b; font-size:10px; display:flex; gap:7px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }

/* Responsive */
@media (max-width:1100px) {
  .metric-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .security-form { grid-template-columns:1fr; }
}
@media (max-width:880px) {
  body:not(.auth-page) { overflow:auto; }
  .sidebar {
    transform:translateX(-102%); transition:transform .24s ease; width:275px; box-shadow:20px 0 50px rgba(0,0,0,.45);
  }
  #sidebar.open { transform:translateX(0); }
  .overlay { display:none; position:fixed; inset:0; z-index:45; background:rgba(0,0,0,.65); backdrop-filter:blur(4px); }
  .overlay.show { display:block; }
  .main { width:100%; margin-left:0; height:auto; min-height:100vh; overflow:visible; }
  .topbar { padding:0 17px; height:64px; }
  .mobile-close { display:block; width:34px; height:34px; padding:0; }
  .topbar-subtitle, .system-chip { display:none; }
  .panels { padding:26px 17px 110px; }
  .actions-bar { left:0; padding:10px 15px; }
  .hero-heading { align-items:flex-start; }
  .hero-heading h1 { font-size:23px; }
  .status-grid, .security-grid { grid-template-columns:1fr; }
  .status-block.wide { grid-column:auto; }
  .metric-cards { grid-template-columns:1fr 1fr; }
  .alert { margin-left:17px; margin-right:17px; }
}
@media (max-width:560px) {
  .auth-card { padding:24px 20px; border-radius:20px; }
  .auth-heading h1 { font-size:29px; }
  .metric-cards { grid-template-columns:1fr; }
  .domain-add-row, .key-add-row, .cookie-add-row { flex-direction:column; align-items:stretch; }
  .domain-add-row button, .key-add-row button, .cookie-add-row button { width:100%; }
  .hero-heading { flex-direction:column; }
  .topbar-right .profile-pill { display:none; }
  .security-form-actions { flex-direction:column; align-items:stretch; }
}

/* Keep legacy helpers functional */
.grow { flex:1; }
.bmc-btn, .bmc-btn-container { display:none !important; }
.functional-status { display:flex; flex-direction:column; gap:5px; }
.inline-actions { display:flex; gap:8px; align-items:center; }
.cookie-list .empty, .key-list .empty, .domain-list .empty { color:#526174; font-size:9px; padding:10px; }

.panel > h1 {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: -.035em;
  color: #eef5fc;
}
.panel > h2 {
  margin: 25px 0 10px;
  font-size: 13px;
  letter-spacing: -.01em;
  color: #d3deea;
}
.panel > .hint {
  margin: 0 0 24px;
}
.panel > h1 button { margin-left: 10px; vertical-align: middle; }

.burger { display:none !important; }

.login-security-card {
  display:flex; gap:11px; align-items:flex-start; padding:12px;
  border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.018);
}
.login-security-card .security-card-icon {
  width:28px; height:28px; flex:0 0 28px; display:grid; place-items:center;
  border-radius:8px; color:#68a9ff; background:rgba(59,140,255,.08); font-size:10px;
}
.login-security-card strong { display:block; color:#aebdce; font-size:10px; }
.login-security-card p { margin:4px 0 0; color:#5d6c7f; font-size:9px; line-height:1.5; }