/* =========================================================
   ViralSky — operator console styles (layers on styles.css)
   ========================================================= */

.admin .main{ max-width:none; }
.brand--center{ flex-direction:column; text-align:center; gap:8px; padding-bottom:8px; }
.brand--center .brand__text{ align-items:center; }

/* ---------- login gate ---------- */
.login{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(4,6,14,.86); backdrop-filter:blur(10px); }
.login.is-hidden{ display:none; }
.login__card{ width:min(440px,100%); max-height:94vh; overflow:auto; padding:32px; border-radius:var(--r-lg);
  border:1px solid var(--stroke-2); background:linear-gradient(160deg, rgba(22,28,52,.97), rgba(12,16,32,.98));
  box-shadow:var(--shadow); animation:modalIn .35s cubic-bezier(.2,.9,.3,1); }
.login__title{ font-family:var(--display); font-weight:600; font-size:24px; margin:18px 0 6px; text-align:center; }
.login__sub{ color:var(--ink-dim); font-size:13.5px; line-height:1.5; margin:0 0 20px; text-align:center; }
.login__demo{ position:relative; padding:16px; border-radius:var(--r-md); margin-bottom:20px;
  background:rgba(34,227,255,.06); border:1px dashed var(--stroke-2); }
.login__demo-label{ display:block; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:10px; }
.login__demo-row{ display:flex; align-items:center; justify-content:space-between; font-size:13px; padding:3px 0; }
.login__demo-row b{ color:var(--ink-dim); font-weight:500; }
.login__demo-row code{ font-family:"Space Grotesk",monospace; color:var(--ink); background:rgba(8,11,22,.6);
  padding:3px 9px; border-radius:7px; border:1px solid var(--stroke); }
.login__demo .link-btn{ margin-top:8px; }
.login__btn{ width:100%; justify-content:center; margin-top:18px; }
.login__back{ display:block; text-align:center; margin-top:18px; color:var(--ink-faint); font-size:13px; text-decoration:none; }
.login__back:hover{ color:var(--ink); }

.input--select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6adcf' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px; padding-right:38px; }

.usermenu__item--cta{ justify-content:center; background:rgba(34,227,255,.08); border:1px solid var(--stroke-2);
  color:var(--ink); margin-bottom:6px; }
.usermenu__item--cta:hover{ background:rgba(34,227,255,.14); color:#fff; }
.usermenu__item--logout{ color:var(--ink-faint); border:1px solid var(--stroke); }
.usermenu__item--logout:hover{ color:var(--pink); }

.live-pill{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:99px;
  font-size:12px; font-weight:600; color:var(--lime); background:rgba(125,255,176,.1); border:1px solid rgba(125,255,176,.3); }
.live-pill__dot{ width:8px;height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); animation:pulse 2s infinite; }

/* ---------- KPIs ---------- */
.kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:22px; }
.kpi{ padding:20px 22px; border-radius:var(--r-md); background:var(--panel); border:1px solid var(--stroke);
  backdrop-filter:blur(14px); position:relative; overflow:hidden; transition:.18s; }
.kpi:hover{ transform:translateY(-3px); border-color:var(--stroke-2); box-shadow:var(--shadow); }
.kpi::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad-hot); opacity:.7; }
.kpi__label{ font-size:12px; color:var(--ink-dim); letter-spacing:.04em; }
.kpi__val{ font-family:var(--display); font-weight:700; font-size:30px; line-height:1; color:#fff; margin:10px 0 8px; }
.kpi__delta{ font-size:12px; font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.kpi__delta.up{ color:var(--lime); }
.kpi__delta.down{ color:var(--pink); }

/* ---------- charts ---------- */
.chart-cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:22px; }
.chart-card{ padding:24px; }
.chart-card__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.chart-card__title{ font-family:var(--display); font-weight:600; font-size:17px; margin:0; }
.chart-card__hint{ font-size:11.5px; color:var(--ink-faint); }
.chart{ display:flex; align-items:flex-end; gap:10px; height:160px; padding-top:10px; }
.bar{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.bar__fill{ width:100%; max-width:40px; border-radius:8px 8px 3px 3px; background:var(--grad);
  transition:height .9s cubic-bezier(.2,.8,.2,1); position:relative; min-height:4px; }
.bar:last-child .bar__fill{ background:var(--grad-hot); box-shadow:0 0 22px -6px rgba(34,227,255,.7); }
.bar__val{ font-size:11px; font-weight:600; color:var(--ink); }
.bar__label{ font-size:11px; color:var(--ink-faint); }

/* plan breakdown bars */
.pb-row{ display:grid; grid-template-columns:120px 1fr 56px; align-items:center; gap:12px; padding:8px 0; }
.pb-row__name{ font-size:13.5px; font-weight:500; }
.pb-row__name small{ display:block; color:var(--ink-faint); font-size:11px; font-weight:400; }
.pb-row__bar{ height:9px; border-radius:9px; background:rgba(255,255,255,.07); overflow:hidden; }
.pb-row__bar i{ display:block; height:100%; border-radius:9px; background:var(--grad); transition:width .9s ease; }
.pb-row__count{ text-align:right; font-family:var(--display); font-weight:700; font-size:15px; }

.chart-cols--2{ margin-bottom:22px; }
.signups-card{ padding:24px; }
.signup-row{ display:grid; grid-template-columns:36px 1fr auto auto; align-items:center; gap:14px; padding:11px; border-radius:var(--r-md); transition:.15s; }
.signup-row:hover{ background:rgba(120,140,220,.06); }
.signup-row__av{ width:36px;height:36px; border-radius:10px; display:grid; place-items:center; font-size:13px; font-weight:700; color:#06121a; background:var(--grad); }
.signup-row__name{ font-weight:600; font-size:14px; }
.signup-row__email{ font-size:12px; color:var(--ink-faint); }
.signup-row__time{ font-size:12px; color:var(--ink-faint); }

/* ---------- users table ---------- */
.users-tools{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.users-tools .search{ min-width:220px; }
.users-tools .input--select{ width:auto; min-width:140px; padding-top:10px; padding-bottom:10px; }
.table-wrap{ padding:8px; overflow-x:auto; }
.utable{ width:100%; border-collapse:collapse; min-width:760px; }
.utable th{ text-align:left; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); padding:14px 14px; border-bottom:1px solid var(--stroke); }
.utable th.num,.utable td.num{ text-align:right; }
.utable td{ padding:13px 14px; border-bottom:1px solid var(--stroke); font-size:13.5px; vertical-align:middle; }
.utable tr:last-child td{ border-bottom:none; }
.utable tr:hover td{ background:rgba(120,140,220,.04); }
.u-user{ display:flex; align-items:center; gap:11px; }
.u-user__av{ width:34px;height:34px; flex:none; border-radius:10px; display:grid; place-items:center; font-size:12.5px; font-weight:700; color:#06121a; background:var(--grad); }
.u-user__name{ font-weight:600; }
.u-user__email{ font-size:11.5px; color:var(--ink-faint); }
.badge{ font-size:11px; font-weight:600; padding:4px 10px; border-radius:99px; letter-spacing:.02em; white-space:nowrap; }
.badge--free{ color:var(--ink-dim); background:rgba(120,140,220,.12); }
.badge--creator{ color:var(--cyan); background:rgba(34,227,255,.12); }
.badge--studio{ color:var(--violet); background:rgba(165,91,255,.16); }
.badge--agency{ color:#ffd27a; background:rgba(255,178,60,.14); }
.badge--active{ color:var(--lime); background:rgba(125,255,176,.12); }
.badge--suspended{ color:var(--pink); background:rgba(255,77,141,.12); }
.actions-col{ width:1%; white-space:nowrap; }
.row-actions{ display:flex; gap:6px; justify-content:flex-end; }
.utable-empty{ text-align:center; padding:44px 20px; color:var(--ink-dim); }
.utable-empty .dash-empty__orb{ margin-bottom:12px; }

/* ---------- platforms ---------- */
.plat-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.plat{ display:flex; align-items:center; gap:14px; padding:20px; border-radius:var(--r-md);
  background:var(--panel); border:1px solid var(--stroke); backdrop-filter:blur(14px); transition:.18s; }
.plat.is-off{ opacity:.6; }
.plat__glyph{ width:46px;height:46px; flex:none; border-radius:13px; display:grid; place-items:center; font-size:22px;
  background:rgba(34,227,255,.1); border:1px solid var(--stroke-2); color:var(--cyan); }
.plat__meta{ min-width:0; flex:1; }
.plat__name{ font-family:var(--display); font-weight:600; font-size:17px; }
.plat__hint{ font-size:12px; color:var(--ink-faint); margin-top:2px; }
.plat__status{ font-size:11px; font-weight:600; margin-top:4px; }
.plat__status.on{ color:var(--lime); } .plat__status.off{ color:var(--ink-faint); }

/* toggle switch */
.toggle{ position:relative; width:46px; height:26px; flex:none; border-radius:99px; border:1px solid var(--stroke-2);
  background:rgba(120,140,220,.1); transition:.2s; padding:0; }
.toggle::after{ content:""; position:absolute; top:3px; left:3px; width:18px;height:18px; border-radius:50%;
  background:var(--ink-dim); transition:.2s; }
.toggle.is-on{ background:var(--grad); border-color:transparent; }
.toggle.is-on::after{ left:23px; background:#06121a; }

/* ---------- hooks admin ---------- */
.hadmin-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.hadmin{ display:flex; flex-direction:column; gap:12px; padding:20px; border-radius:var(--r-md);
  background:var(--panel); border:1px solid var(--stroke); backdrop-filter:blur(14px); transition:.18s; }
.hadmin:hover{ border-color:var(--stroke-2); box-shadow:var(--shadow); }
.hadmin__text{ font-family:var(--display); font-weight:500; font-size:15.5px; line-height:1.34; margin:0; flex:1; }
.hadmin__foot{ display:flex; align-items:center; justify-content:space-between; }
.hadmin__actions{ display:flex; gap:6px; }

/* user modal details */
.um-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:14px 0 4px; }
.um-stat{ padding:14px; border-radius:var(--r-sm); background:rgba(8,11,22,.4); border:1px solid var(--stroke); }
.um-stat__label{ font-size:11px; color:var(--ink-faint); letter-spacing:.04em; }
.um-stat__val{ font-family:var(--display); font-weight:700; font-size:20px; margin-top:4px; }
.um-controls{ display:flex; flex-direction:column; gap:14px; margin-top:18px; padding-top:18px; border-top:1px solid var(--stroke); }
.um-quota{ display:flex; gap:10px; align-items:center; }
.um-quota .input{ flex:1; }
.um-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.btn-danger{ display:inline-flex; align-items:center; gap:8px; padding:11px 17px; border-radius:var(--r-sm);
  font-size:13.5px; font-weight:600; color:var(--pink); background:rgba(255,77,141,.1); border:1px solid rgba(255,77,141,.35); transition:.16s; }
.btn-danger:hover{ background:rgba(255,77,141,.18); }
.btn-ok{ color:var(--lime); background:rgba(125,255,176,.1); border-color:rgba(125,255,176,.35); }
.btn-ok:hover{ background:rgba(125,255,176,.18); }

@media (max-width:1080px){
  .chart-cols{ grid-template-columns:1fr; }
}
@media (max-width:430px){
  .kpi-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .kpi{ padding:16px; } .kpi__val{ font-size:24px; }
  .users-tools{ width:100%; }
  .users-tools .search,.users-tools .input--select{ width:100%; min-width:0; }
  .um-grid{ grid-template-columns:1fr 1fr; }
  .login__card{ padding:24px 20px; }
  .signup-row{ grid-template-columns:36px 1fr auto; }
  .signup-row__time{ display:none; }
}