:root {
  --bg: #050505;
  --bg-2: #070707;
  --panel: #0b0b0b;
  --panel-2: #0e0e0e;
  --line: #1c1c1c;
  --line-2: #242424;
  --text: #f5f5f5;
  --muted: #a3a3a3;
  --dim: #737373;
  --accent: #e5e5e5;
  --accent-2: #e5e5e5;
  --accent-soft: rgba(229, 229, 229, 0.08);
  --green: #86efac;
  --green-soft: rgba(29, 58, 39, 0.42);
  --red: #f87171;
  --red-soft: rgba(74, 32, 32, 0.42);
  --amber: #fbbf24;
  --amber-soft: rgba(64, 48, 25, 0.42);
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 18px 45px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
a { color: var(--accent-2); }

/* ═══ Auth screen ═══ */
.auth-screen { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.auth-bg {
  position: absolute; z-index: 0; inset: -50%;
  background:
    radial-gradient(circle at 25% 30%, rgba(124, 92, 255, 0.30), transparent 45%),
    radial-gradient(circle at 75% 70%, rgba(167, 139, 250, 0.22), transparent 45%),
    radial-gradient(circle at 50% 110%, rgba(46, 204, 113, 0.12), transparent 50%);
  animation: drift 18s ease-in-out infinite alternate;
}
.auth-particles { position:absolute; z-index:1; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(3%, 3%, 0) scale(1.08); }
}
.auth-card {
  position: relative;
  z-index: 2;
  width: min(400px, 92vw);
  max-height: 94vh;
  overflow-y: auto;
  background: rgba(17, 17, 28, 0.86);
  backdrop-filter: blur(18px);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 38px 34px 30px;
  box-shadow: var(--shadow);
  text-align: center;
}
.auth-card.signup-wide { width:min(900px,96vw); }
.auth-logo {
  width: 62px; height: 62px; margin: 0 auto 16px;
  display: grid; place-items: center;
  font-size: 30px;
  background: var(--accent-soft);
  border: 1px solid rgba(124, 92, 255, 0.35);
  border-radius: 18px;
}
.brand-subtitle { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 2.2px; margin-top: 5px; }
.auth-title { font-size: 24px; font-weight: 700; letter-spacing: -0.4px; }
.auth-sub { color: var(--muted); margin: 7px 0 24px; font-size: 13px; }
.auth-error { color: var(--red); font-size: 13px; margin-top: 14px; min-height: 18px; }
.setup-banner {
  background: var(--accent-soft);
  border: 1px solid rgba(124, 92, 255, 0.3);
  color: var(--accent-2);
  padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 12.5px; margin-bottom: 18px; text-align: left;
}
.auth-mode-controls { display:grid; justify-items:center; gap:8px; margin-top:18px; }
.google-signin-wrap { display:flex; justify-content:center; margin:14px 0 4px; }
.social-login-wrap { margin:12px auto 4px; }
.social-login-divider { display:flex; align-items:center; gap:12px; margin:12px 0; color:var(--dim); font-size:12px; }
.social-login-divider::before,.social-login-divider::after { content:""; height:1px; flex:1; background:var(--line); }
.social-login-buttons { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.social-login-buttons .google-signin-wrap { margin:0; }
.social-provider-button { display:flex; align-items:center; justify-content:center; gap:9px; min-width:145px; height:40px; padding:0 15px; border:1px solid var(--line-2); border-radius:9px; background:var(--panel-2); color:var(--text); font-size:13px; font-weight:600; text-decoration:none; }
.social-provider-button:hover { border-color:var(--accent); background:var(--accent-soft); }
.social-provider-button:disabled { opacity:.5; cursor:not-allowed; }
#google-signin-unavailable { width:40px; min-width:40px; padding:0; }
.google-mark { display:block; width:20px; height:20px; flex:0 0 20px; color:#4285f4; }
.discord-mark { color:#7289da; font-size:19px; line-height:1; }
.social-provider-button svg { width:19px; height:19px; color:#7289da; }
.field .hint { display:block; margin-top:5px; font-size:11px; }
.signup-verify-panel { padding:12px; border:1px solid var(--line); border-radius:12px; background:rgba(8,10,13,.35); }
.signup-verify-panel > strong { color:var(--text); font-size:13px; }
.signup-verify-panel .hint { margin:7px 0 0; }
.signup-verify-status { margin:10px 0; overflow-wrap:anywhere; }
.signup-discord-panel { min-width:0; align-self:stretch; padding:17px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,rgba(8,10,13,.48),rgba(18,26,25,.62)); text-align:left; }
.signup-discord-heading { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.signup-discord-heading h2 { color:var(--text); font-size:14px; font-weight:700; }
.signup-discord-heading .hint { margin-top:4px; font-size:11.5px; }
.signup-bot-toggle-control { display:grid; place-items:center; flex:0 0 46px; width:46px; height:42px; border:1px solid var(--line-2); border-radius:11px; background:var(--panel-2); cursor:pointer; }
.signup-bot-toggle-control:has(input:checked) { border-color:var(--accent); background:var(--accent-soft); }
.signup-bot-toggle-control input { width:19px; height:19px; margin:0; accent-color:var(--accent); cursor:pointer; }
.signup-bot-fields { display:grid; gap:10px; margin-top:15px; padding-top:15px; border-top:1px solid var(--line); text-align:left; }
.signup-bot-fields .field { margin:0; }
.signup-bot-fields .btn { justify-self:start; }
.signup-bot-fields .hint:empty { display:none; }
.signup-discord-example { margin-top:16px; padding-top:13px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; text-align:left; }
.signup-discord-example strong { display:block; margin-bottom:5px; color:var(--text); font-size:12px; }
.signup-discord-example ol { display:grid; gap:7px; margin:8px 0 9px; padding-left:19px; line-height:1.5; }
.signup-discord-example li { padding-left:2px; }
.signup-discord-example li b { color:var(--text); font-weight:600; }
.signup-discord-example p { margin:8px 0 0; line-height:1.55; }
.signup-discord-example code { color:var(--accent-2); font-family:ui-monospace,Consolas,monospace; }
.signup-discord-example .signup-command-example { display:inline-block; padding:5px 9px; border:1px solid var(--line-2); border-radius:7px; background:var(--bg-2); font-size:13px; font-weight:700; }
.signup-submit { grid-column:1; justify-self:stretch; width:100%; margin-top:16px; }
#auth-screen:has(.auth-card.signup-wide) #auth-mode-controls { width:100%; justify-items:center; margin:18px auto 0; }
#auth-screen:has(.auth-card.signup-wide) #social-login-wrap { width:min(520px,100%); margin:16px auto 0; }
.signup-back { display:block; margin:12px auto 0; }

/* ═══ Shell ═══ */
.app { display: flex; height: 100vh; overflow: hidden; position:relative; isolation:isolate; }
#app-particles { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.app > .sidebar, .app > .main { position:relative; z-index:1; }

.sidebar {
  width: 250px; flex-shrink: 0;
  background: var(--bg-2);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 20px 14px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.2px;
  padding: 0 8px 20px;
}
.brand b { color: var(--accent-2); font-weight: 600; }
.brand-logo {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: linear-gradient(145deg, #00c98d, #00775a); border: 1px solid rgba(102, 228, 184, 0.4);
  border-radius: 10px; font-size: 12px; color: #04150f; font-weight: 900; letter-spacing: -.5px;
}
.brand-copy { line-height: 1.1; font-size:20px; font-weight:800; color:var(--text); }
.brand-copy-name { opacity:1; font-weight:800; }
.brand-copy b { font-weight:800; opacity:.85; }
.brand-copy small { display: block; margin-top: 5px; color: var(--dim); font-size: 8px; letter-spacing: 1.45px; font-weight: 700; }
#nav { flex: 1; overflow-y: auto; user-select:none; -webkit-user-select:none; }
#nav * { user-select:none; -webkit-user-select:none; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 12px; margin-bottom: 3px;
  background: none; border: 0; border-radius: 10px;
  color: var(--muted); font: inherit; font-size: 13.5px;
  cursor: pointer; text-align: left;
  transition: background 0.15s, color 0.15s;
}
.nav-item span { font-size: 15px; width: 18px; text-align: center; }
.nav-item:hover { background: var(--panel-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.nav-sep {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.1px;
  color: var(--dim); padding: 18px 12px 7px; font-weight: 700;
}
.sidebar-foot { border-top: 1px solid var(--line); padding-top: 14px; }
.me { display: flex; align-items: center; gap: 10px; padding: 0 6px 12px; }
.avatar {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; text-transform: uppercase;
}
.me-info { min-width: 0; }
.me-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-role { font-size: 11.5px; color: var(--muted); text-transform: capitalize; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 66px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 18, 0.82);
  backdrop-filter: blur(10px);
}
.topbar h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.2px; }
#page-title { text-transform:uppercase; }
.content { flex: 1; overflow-y: auto; padding: 26px 28px 60px; }

/* SK AUTH visual system */
::selection { background: rgba(0, 201, 141, .28); color: #fff; }
button, input, select, textarea { accent-color: var(--accent); }
.auth-bg { background:
  radial-gradient(circle at 18% 22%, rgba(0, 201, 141, .19), transparent 38%),
  radial-gradient(circle at 82% 72%, rgba(17, 112, 93, .19), transparent 42%),
  linear-gradient(135deg, #080a0d, #0d1517 55%, #080a0d); }
.auth-card { background: rgba(13, 19, 22, .91); border-color: rgba(102, 228, 184, .19); box-shadow: 0 28px 90px rgba(0,0,0,.58), 0 0 60px rgba(0,201,141,.06); }
.auth-logo { color: #05110d; font-size: 17px; font-weight: 900; background: linear-gradient(145deg,#67e9bc,#00a978); border-color: rgba(102,228,184,.5); box-shadow: 0 8px 24px rgba(0,201,141,.18); }
.brand { min-height: 48px; }
.topbar { background: rgba(8, 10, 13, .88); }
.card, .stat { box-shadow: 0 10px 32px rgba(0,0,0,.12); transition: border-color .18s, transform .18s, box-shadow .18s; }
.card:hover { border-color: rgba(102,228,184,.18); }
.stat:hover { transform: translateY(-2px); border-color: rgba(102,228,184,.26); }
.btn-primary { background: linear-gradient(135deg, #00bd87, #008c68); box-shadow: 0 5px 16px rgba(0, 201, 141, .14); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #1bdba3, #00a77a); }
.nav-item.active { box-shadow: inset 2px 0 var(--accent); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(0,201,141,.33); border-color: var(--accent) !important; }
.pill { border-color: var(--line-2); }
@media (max-width: 720px) { .content { padding: 18px 14px 40px; } .topbar { padding: 0 16px; } }

body[data-theme="light"] {
  --bg: #f2f6f4;
  --bg-2: #ffffff;
  --panel: #ffffff;
  --panel-2: #edf3f0;
  --line: #dce6e1;
  --line-2: #cbd8d2;
  --text: #17231f;
  --muted: #50625b;
  --dim: #71827c;
  --accent: #008d64;
  --accent-2: #087b5a;
  --accent-soft: rgba(0, 141, 100, .10);
  --green: #13834f;
  --green-soft: rgba(19, 131, 79, .10);
  --amber: #a76b00;
  --amber-soft: rgba(167, 107, 0, .10);
  --red: #bd3737;
  --red-soft: rgba(189, 55, 55, .09);
  background: var(--bg);
  color: var(--text);
}
body[data-theme="light"] .auth-bg {
  background: radial-gradient(circle at 18% 22%, rgba(0, 141, 100, .12), transparent 38%),
    radial-gradient(circle at 82% 72%, rgba(17, 112, 93, .10), transparent 42%),
    linear-gradient(135deg, #f6faf8, #eaf3ef 55%, #f8fbf9);
}
body[data-theme="light"] .auth-card {
  background: rgba(255,255,255,.91);
  border-color: rgba(0, 141, 100, .2);
  box-shadow: 0 24px 70px rgba(22, 50, 39, .12);
}
body[data-theme="light"] .topbar { background: rgba(255,255,255,.9); }
body[data-theme="light"] .spinner { border-color: var(--line-2); border-top-color: var(--accent); }


/* ═══ Buttons ═══ */
button { text-transform: capitalize; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; border: 1px solid transparent; border-radius: 10px;
  font: inherit; font-size: 13.5px; font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: filter 0.15s, background 0.15s, border-color 0.15s, transform 0.05s;
  text-transform: capitalize;
}
label, .field > span { text-transform: capitalize; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #8f72ff; }
.btn-ghost { background: var(--panel-2); color: var(--muted); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { background: var(--line); color: var(--text); }
.btn-danger { background: var(--red-soft); color: var(--red); border-color: rgba(239, 68, 68, 0.3); }
.btn-danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.22); }
.btn-green { background: var(--green-soft); color: var(--green); border-color: rgba(46, 204, 113, 0.3); }
.btn-green:hover:not(:disabled) { background: rgba(46, 204, 113, 0.22); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.btn-block { width: 100%; }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 12px; }

/* ═══ Cards / layout ═══ */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px; flex-wrap: wrap;
}
.card-head h3 { font-size: 15px; font-weight: 650; }
.card-head p { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.row > * { flex: 1; min-width: 160px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.spacer { flex: 1; }
.mt { margin-top: 18px; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 12.5px; }
.mono { font-family: "Cascadia Code", Consolas, "SF Mono", monospace; }

/* ═══ Stats ═══ */
.stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  position: relative; overflow: hidden;
}
.stat::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.stat.green::after { background: linear-gradient(90deg, var(--green), transparent); }
.stat.amber::after { background: linear-gradient(90deg, var(--amber), transparent); }
.stat-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 600; }
.stat-value { font-size: 27px; font-weight: 700; margin-top: 6px; letter-spacing: -0.6px; }

/* ═══ Forms ═══ */
.field { display: block; margin-bottom: 14px; }
.remember-me { display:flex; align-items:center; gap:8px; margin:-2px 0 14px; color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; }
.remember-me input { width:15px; height:15px; margin:0; accent-color:var(--accent); cursor:pointer; }
.remember-me span { margin:0; }
.field > span {
  display: block; margin-bottom: 6px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.field .hint { font-weight: 400; color: var(--dim); font-size: 11.5px; margin-top: 5px; }
input, select, textarea {
  width: 100%; padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  color: var(--text); font: inherit; font-size: 13.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
input::placeholder { color: var(--dim); }
.input-suffix-group { display:flex !important; align-items:stretch; width:100%; margin:0 !important; padding:0; border:1px solid var(--line-2); border-radius:var(--radius-sm); background:var(--bg-2); overflow:hidden; }
.input-suffix-group:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.input-suffix-group input { flex:1 1 auto; min-width:0; width:0; border:0; border-radius:0; box-shadow:none !important; }
.input-suffix-group input:focus { outline:none; border-color:transparent !important; box-shadow:none !important; }
body[data-role-theme] .input-suffix-group input { border:0 !important; background:transparent !important; }
.input-suffix-group input:hover,.input-suffix-group input:focus { background:transparent !important; }
.input-suffix { display:flex !important; flex:0 0 auto; align-items:center; margin:0 !important; padding:0 13px; border-left:1px solid var(--line-2); color:var(--text); font-size:13.5px; font-weight:650; white-space:nowrap; }
.password-input-wrap { position:relative; display:block; width:100%; min-width:0; }
.password-input-wrap > input { display:block; padding-right:44px !important; }
.password-visibility-toggle { position:absolute; top:0; right:7px; bottom:0; z-index:2; display:grid; place-items:center; width:30px; height:30px; margin-block:auto; padding:0; transform:none; border:0; border-radius:7px; background:transparent; color:var(--muted); cursor:pointer; }
.password-visibility-toggle:hover { color:var(--accent-2); background:var(--accent-soft); }
.password-visibility-toggle:focus-visible { outline:2px solid var(--accent-2); outline-offset:1px; }
.password-visibility-toggle svg { display:block; width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
select {
  cursor: pointer; appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px;
  background-size: 5px 5px; background-repeat: no-repeat;
}
input[type="checkbox"] { width: auto; margin-right: 8px; accent-color: var(--accent); }
.check { display: flex; align-items: center; font-size: 13.5px; cursor: pointer; }
.auth-card .form { text-align: left; }
#signup-form:not(.hidden) { display:block; }
#signup-form .signup-main-fields { min-width:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
#signup-form .signup-main-fields .field:last-child { margin-bottom:0; }
.profile-2fa-setup { margin-top:15px; padding:14px; border:1px solid var(--line); border-radius:11px; background:var(--bg-2); }
.profile-2fa-setup .keycode { max-width:100%; overflow-wrap:anywhere; }
.profile-2fa-qr-wrap { display:grid; justify-items:center; gap:8px; width:max-content; max-width:100%; margin:14px auto; padding:11px; border:1px solid var(--line-2); border-radius:11px; background:#fff; color:#344148; font-size:11px; text-align:center; }
.profile-2fa-qr { display:block; width:220px; height:220px; max-width:100%; image-rendering:pixelated; }
.license-api-form { display:grid; gap:2px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }
.license-api-endpoint { filter:blur(5px); user-select:none; }
.license-api-form .field { margin-bottom:10px; }
.license-api-status { min-height:16px; margin:2px 0 0; overflow-wrap:anywhere; }
.profile-two-factor .form { margin-top:14px; }

/* ═══ Tables ═══ */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.staff-accounts-table { min-width: 1320px; }
.staff-accounts-table .staff-server-gap > td { height:8px; padding:0; border:0; background:transparent; }
.staff-row-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px; }
.staff-reseller-group-row,
.staff-linked-extra-row { background:color-mix(in srgb,var(--accent) 2.5%,transparent); }
.staff-reseller-group-row > td { border-top:1px solid color-mix(in srgb,var(--accent-2) 72%,var(--line)); border-bottom:1px solid color-mix(in srgb,var(--accent-2) 72%,var(--line)); }
.staff-accounts-table .staff-reseller-group-row > td { border-top:2px solid color-mix(in srgb,var(--accent-2) 82%,var(--line)); }
.staff-linked-extra-row > td { border-top:1px solid color-mix(in srgb,var(--accent-2) 72%,var(--line)); }
.staff-reseller-group-row > td:last-child,
.staff-linked-extra-row > td:last-child { border-right:1px solid color-mix(in srgb,var(--accent-2) 72%,var(--line)); }
.staff-linked-extra-last > td { border-bottom:1px solid color-mix(in srgb,var(--accent-2) 72%,var(--line)); }
.staff-accounts-table th,
.staff-accounts-table td { vertical-align:middle; }
.staff-reseller-group-row > td:first-child,
.staff-linked-extra-row > td:first-child { padding-left:14px; box-shadow:inset 3px 0 color-mix(in srgb,var(--accent-2) 82%,transparent); }
.staff-reseller-group-row > td:nth-child(6) { position:relative; }
.staff-group-link { position:absolute; z-index:3; left:50%; bottom:-11px; display:grid; width:22px; height:22px; place-items:center; transform:translateX(-50%); border:1px solid var(--accent-2); border-radius:50%; background:var(--panel); box-shadow:0 0 0 3px var(--panel); font-size:12px; line-height:1; }
.self-registered-account-row > td { border-top:1px solid color-mix(in srgb,var(--accent-2) 72%,var(--line)); border-bottom:1px solid color-mix(in srgb,var(--accent-2) 72%,var(--line)); background:color-mix(in srgb,var(--accent) 2.5%,transparent); }
.self-registered-account-row > td:first-child { border-left:1px solid color-mix(in srgb,var(--accent-2) 72%,var(--line)); box-shadow:inset 3px 0 color-mix(in srgb,var(--accent-2) 82%,transparent); }
.self-registered-account-row > td:last-child { border-right:1px solid color-mix(in srgb,var(--accent-2) 72%,var(--line)); }
@media(min-width:1201px) { .staff-accounts-table .staff-row-actions { flex-wrap:nowrap; } }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 14px; text-align: left; white-space: nowrap; }
.self-registered-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:14px; }
.self-account-card { min-width:0; padding:18px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(145deg,var(--panel-2),color-mix(in srgb,var(--panel) 88%,transparent)); box-shadow:0 8px 24px rgba(0,0,0,.12); }
.self-account-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.self-account-heading h4 { margin:0 0 5px; font-size:15px; }
.self-account-heading .mono { font-size:12px; }
.self-account-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:15px 0; }
.self-account-details > div { min-width:0; display:grid; gap:5px; }
.self-account-details span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.55px; }
.self-account-details strong { min-width:0; overflow-wrap:anywhere; font-size:12px; font-weight:600; }
.self-account-actions { display:flex; flex-wrap:wrap; gap:8px; padding-top:13px; border-top:1px solid var(--line); }
.self-account-card:hover { border-color:var(--line-2); box-shadow:0 12px 28px rgba(0,0,0,.2); }
@media(max-width:600px) { .self-account-details { grid-template-columns:1fr; } .self-account-card { padding:14px; } }
th {
  background: var(--panel-2); color: var(--muted);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.7px; font-weight: 700;
  border-bottom: 1px solid var(--line);
}
tbody tr { border-bottom: 1px solid var(--line); }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: var(--panel-2); }
td.wrap { white-space: normal; }


/* ═══ Badges / pills ═══ */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.2px;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line-2);
}
.badge.green { background: var(--green-soft); color: var(--green); border-color: rgba(46, 204, 113, 0.3); }
.badge.red { background: var(--red-soft); color: var(--red); border-color: rgba(239, 68, 68, 0.3); }
.badge.amber { background: var(--amber-soft); color: var(--amber); border-color: rgba(245, 158, 11, 0.3); }
.badge.purple { background: var(--accent-soft); color: var(--accent-2); border-color: rgba(124, 92, 255, 0.3); }
.pill {
  padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--panel-2); border: 1px solid var(--line-2); color: var(--muted);
}
.pill.ok { background: var(--green-soft); color: var(--green); border-color: rgba(46, 204, 113, 0.3); }
.pill.bad { background: var(--red-soft); color: var(--red); border-color: rgba(239, 68, 68, 0.3); }

.keycode {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-2); border: 1px solid var(--line-2);
  padding: 9px 13px; border-radius: var(--radius-sm);
  font-family: "Cascadia Code", Consolas, monospace; font-size: 14px;
  letter-spacing: 0.6px;
}
.keycode button {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 14px; padding: 0 2px; line-height: 1;
}
.keycode button:hover { color: var(--accent-2); }

.app-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  transition: border-color 0.15s;
}
.app-card:hover { border-color: var(--line-2); }
.app-card.disabled { opacity: 0.6; }
.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.app-name { font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.app-desc { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.app-meta { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; font-size: 12.5px; color: var(--muted); }
.app-meta b { color: var(--text); font-weight: 600; }
.exe-list { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.exe-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 13px; }
.exe-row + .exe-row { border-top: 1px solid var(--line); }
.exe-actions { display: flex; gap: 6px; }

/* Inline form for connecting an application's id + secret */
.connect-box {
  background: var(--bg-2);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius-sm);
  padding: 16px;
}
.connect-title { font-size: 13.5px; font-weight: 650; margin-bottom: 4px; }
.connect-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 14px; }
.connect-hint b { color: var(--text); }
.connect-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; align-items: end; }
.connect-form .field { margin-bottom: 12px; }
.connect-form button { margin-bottom: 12px; white-space: nowrap; }

/* Small inline action inside a hint, e.g. "Load my packages" */
.link-btn {
  background: none; border: 0; padding: 0;
  color: var(--accent-2); font: inherit; font-size: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
.link-btn:hover { color: #b9a2ff; }
.link-btn:disabled { color: var(--dim); cursor: wait; }

/* ═══ Modal ═══ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5, 5, 10, 0.72);
  backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 20px;
  animation: fade 0.15s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: min(520px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line-2);
  border-radius: 18px; padding: 24px; box-shadow: var(--shadow);
  animation: rise 0.2s ease;
}
@keyframes rise { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h3 { font-size: 17px; font-weight: 650; margin-bottom: 4px; }
.modal .modal-sub { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.application-created-details { display:grid; gap:10px; margin:16px 0 20px; }
.application-created-details > div { display:grid; grid-template-columns:minmax(120px, .8fr) minmax(0, 1.2fr); gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--bg-2); }
.application-created-details dt { color:var(--muted); font-size:12px; font-weight:650; }
.application-created-details dd { min-width:0; margin:0; color:var(--text); font-family:ui-monospace,Consolas,monospace; font-size:12px; overflow-wrap:anywhere; }
.creation-success-dialog { text-align:center; }
.creation-success-mark { display:grid; place-items:center; width:46px; height:46px; margin:0 auto 12px; border:1px solid color-mix(in srgb,var(--green) 58%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--green) 12%,var(--panel)); color:var(--green); font-size:25px; font-weight:800; box-shadow:0 0 24px color-mix(in srgb,var(--green) 15%,transparent); }
.creation-success-dialog h3 { color:var(--green); font-size:19px; }
.creation-success-dialog .modal-sub { margin:6px 0 18px; }
.creation-success-details { display:grid; gap:9px; text-align:left; }
.creation-success-detail { display:grid; grid-template-columns:minmax(105px,.7fr) minmax(0,1.3fr); align-items:center; gap:12px; min-width:0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--bg-2) 82%,var(--panel)); }
.creation-success-detail > span:first-child { color:var(--muted); font-size:12px; font-weight:650; }
.creation-success-detail > b { min-width:0; color:var(--text); overflow-wrap:anywhere; }
.creation-success-detail > b.delivery-sent { color:#34d399; }
.creation-success-detail > b.delivery-failed { color:#f87171; }
.creation-success-detail .keycode { max-width:100%; min-width:0; }
.creation-success-detail .keycode > span { min-width:0; overflow-wrap:anywhere; }
.creation-success-dialog .modal-actions { justify-content:center; }
.creation-success-dialog .modal-actions .btn { min-width:100px; }
.otp-result-dialog { text-align:center; }
.otp-result-icon { display:grid; width:62px; height:62px; margin:0 auto 14px; place-items:center; border:1px solid color-mix(in srgb,var(--green) 62%,var(--line)); border-radius:50%; color:var(--green); background:color-mix(in srgb,var(--green) 12%,var(--panel)); box-shadow:0 0 26px color-mix(in srgb,var(--green) 20%,transparent); animation:otp-success-pop 420ms cubic-bezier(.2,.72,.22,1) both; }
.otp-result-icon svg { width:34px; height:34px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; }
.otp-result-dialog.is-success h3 { color:var(--green); font-size:20px; }
.otp-result-dialog.is-error .otp-result-icon { border-color:color-mix(in srgb,var(--red) 68%,var(--line)); color:var(--red); background:color-mix(in srgb,var(--red) 12%,var(--panel)); box-shadow:0 0 26px color-mix(in srgb,var(--red) 18%,transparent); }
.otp-result-dialog.is-error h3 { color:var(--red); font-size:20px; }
.otp-result-dialog .modal-sub { margin:7px 0 16px; }
.otp-result-details { display:grid; gap:9px; margin:0 0 20px; padding:13px 15px 13px 36px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--bg-2) 82%,var(--panel)); color:var(--muted); font-size:12px; line-height:1.55; text-align:left; }
.otp-result-details li { padding-left:2px; }
.otp-result-details li::marker { color:var(--accent-2); font-weight:750; }
.otp-result-dialog .modal-actions { justify-content:center; margin-top:16px; }
.otp-result-dialog .modal-actions .btn { min-width:110px; }
.connection-key-dialog .panel-kicker { margin-bottom:12px; font-size:10px; }
.connection-key-value { display:flex; align-items:center; gap:8px; min-width:0; margin:0 0 13px; padding:8px 10px; border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line)); border-radius:10px; background:color-mix(in srgb,var(--bg-2) 88%,var(--panel)); }
.connection-key-value code { flex:1; min-width:0; color:var(--accent-2); font:750 19px ui-monospace,Consolas,monospace; letter-spacing:.12em; overflow-wrap:anywhere; }
.connection-key-copy { display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border:1px solid var(--line-2); border-radius:9px; color:var(--text); background:var(--panel-2); cursor:pointer; }
.connection-key-copy:hover { border-color:var(--accent-2); color:var(--accent-2); }
.connection-key-copy svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.connection-key-dialog .modal-sub { margin:0; overflow-wrap:anywhere; }
.connection-key-dialog .modal-sub code { color:var(--accent-2); font:600 12px ui-monospace,Consolas,monospace; }
.connection-key-dialog .modal-actions { justify-content:center; margin-top:18px; }
.activation-key-dialog .panel-kicker { margin-bottom:12px; font-size:10px; }
.activation-key-dialog .modal-sub { margin:0; overflow-wrap:anywhere; }
.activation-key-dialog .modal-sub code { color:var(--accent-2); font:600 12px ui-monospace,Consolas,monospace; }
.activation-key-dialog .modal-actions { justify-content:flex-end; margin-top:18px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.modal-actions .btn { flex: 0 0 auto; }

/* ═══ Toast ═══ */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 90; padding: 12px 20px;
  background: var(--panel-2); border: 1px solid var(--line-2);
  border-radius: 12px; box-shadow: var(--shadow);
  font-size: 13.5px; font-weight: 500;
  animation: rise 0.2s ease; max-width: 90vw;
}
.toast.ok { border-color: rgba(46, 204, 113, 0.45); color: var(--green); }
.toast.err { border-color: rgba(239, 68, 68, 0.45); color: var(--red); }

.result-box {
  background: var(--green-soft);
  border: 1px solid rgba(46, 204, 113, 0.32);
  border-radius: var(--radius); padding: 18px; margin-top: 18px;
}
.result-box h4 { color: var(--green); font-size: 14px; margin-bottom: 12px; }
.users-table th:first-child,.users-table td:first-child { width:64px; color:var(--muted); white-space:nowrap; }
.users-table .user-name-keycode { padding:5px 9px; font-size:12px; }
.result-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.key-result-row { display:grid; grid-template-columns:minmax(220px,1.6fr) minmax(110px,.9fr) minmax(190px,1.35fr) minmax(95px,.65fr) minmax(135px,1fr) auto; align-items:center; gap:16px; margin-top:12px; }
.key-result-codes { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.key-result-row .keycode { max-width:100%; }
.key-result-app { min-width:0; color:var(--text); font-weight:650; overflow-wrap:anywhere; }
.key-result-cell { display:flex; align-items:center; gap:5px; min-width:0; white-space:nowrap; color:var(--muted); }
.key-result-cell b { color:var(--text); }
.key-result-note { overflow:hidden; }
.key-result-note b { overflow:hidden; text-overflow:ellipsis; }
@media(max-width:1100px) { .key-result-row { grid-template-columns:minmax(200px,1.4fr) minmax(110px,1fr) minmax(180px,1.2fr) minmax(100px,.8fr); } }
@media(max-width:680px) { .key-result-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .key-result-cell { white-space:normal; } }
.empty { text-align: center; padding: 46px 20px; color: var(--dim); }
.empty .icon { font-size: 40px; margin-bottom: 12px; opacity: 0.65; }
.empty p { font-size: 13.5px; }

.spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: #fff;
  display: inline-block; vertical-align: -2px; animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 13px; }
.bar-row .name { width: 130px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; height: 7px; background: var(--panel-2); border-radius: 20px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 20px; }
.bar-row .count { width: 44px; text-align: right; color: var(--muted); font-size: 12.5px; }

.log-line { display: flex; gap: 10px; padding: 7px 0; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.log-line:last-child { border-bottom: 0; }
.log-time { color: var(--dim); white-space: nowrap; font-family: Consolas, monospace; }
.log-actor { color: var(--accent-2); min-width: 110px; }
.log-detail { color: var(--muted); }

@media (max-width: 780px) {
  .sidebar { width: 62px; padding: 16px 8px; }
  .brand span:last-child, .nav-item { font-size: 0; }
  .nav-item span { font-size: 17px; }
  .nav-sep, .me-info { display: none; }
  .content, .topbar { padding-left: 16px; padding-right: 16px; }
}

/* ═══ Fatal error card ═══ */
.fatal {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: grid; place-items: center; padding: 24px;
}
.fatal-card {
  width: min(560px, 100%);
  background: var(--panel);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}
.fatal-card h2 { font-size: 19px; font-weight: 650; color: var(--red); margin-bottom: 8px; }
.fatal-card p { color: var(--text); font-size: 14px; margin-bottom: 14px; }
.fatal-card pre {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 14px;
  font-family: Consolas, "Cascadia Code", monospace; font-size: 12.5px;
  color: var(--muted); white-space: pre-wrap; word-break: break-word;
  max-height: 200px; overflow: auto; margin-bottom: 18px;
}
.fatal-card pre:empty { display: none; }

.create-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.create-mode-card {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, transform .16s ease, background .16s ease;
}
.create-mode-card:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--bg-3);
  transform: translateY(-2px);
}
.create-mode-card:disabled { opacity: .48; cursor: not-allowed; }
.subscription-expired-action { filter: blur(1.1px); opacity: .68; cursor: not-allowed !important; }
.subscription-expired-action:hover { transform: none !important; }
.subscription-renewal-notice { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.subscription-renewal-notice span { flex: 1 1 260px; }
.support-page { display:flex; max-width:1200px; min-height:0; flex-direction:column; margin:0 auto; padding-bottom:16px; }
.support-nav-icon { display:inline-grid; width:20px; height:20px; place-items:center; }
.support-nav-icon svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.support-page > .card-head { margin-top:10px; }
.support-chat-heading { align-items:center; }
.support-chat-heading { margin-top:0; }
.support-chat-heading h3 { margin:0; }
.support-chat-titlebar { display:flex; align-items:center; justify-content:space-between; min-height:40px; margin:-16px -16px 12px; padding:0 14px; border-radius:13px 13px 0 0; color:#edf1f8; background:#11141d; }
.support-chat-brand { display:flex; align-items:center; gap:8px; font-size:12px; }
.support-chat-brand .pulse-dot { width:7px; height:7px; }
.support-chat-online { padding:3px 7px; border:1px solid rgba(52,211,153,.25); border-radius:20px; color:#54e5a9; background:rgba(16,185,129,.12); font-size:10px; }
.support-chat-conversation { display:flex; flex:1; min-height:0; flex-direction:column; padding:7px 8px 2px; border:1px solid var(--line); border-radius:13px; background:#090d1b; }
.support-chat-messages { display:flex; flex:1; flex-direction:column; gap:9px; min-height:210px; max-height:420px; overflow:auto; padding:3px; border:0; border-radius:8px; background:transparent; }
.support-chat-message { display:flex; align-items:flex-start; gap:8px; padding:0; border:0; background:transparent; }
.support-chat-avatar { display:grid; flex:0 0 28px; width:28px; height:28px; place-items:center; border-radius:50%; color:#f3f5ff; background:linear-gradient(145deg,#687bce,#394780); font-size:10px; font-weight:800; }
.support-chat-bubble { min-width:0; max-width:calc(100% - 36px); padding:8px 10px; border:1px solid rgba(160,177,208,.1); border-radius:5px 12px 12px; background:#171b27; }
.support-chat-message-meta { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.support-chat-message-meta b { color:#edf2fb; font-size:11px; }
.support-chat-message-meta time { margin-left:auto; color:#7f8ba0; font-size:9px; }
.support-chat-role { padding:2px 6px; border-radius:5px; color:#a8b5c8; background:#272d3b; font-size:9px; font-weight:750; }
.support-chat-role-admin { color:#b8f0ff; background:#087aa5; }
.support-chat-role-owner { color:#d8c7ff; background:#493878; }
.support-chat-role-reseller { color:#9bead8; background:#145847; }
.support-chat-bubble p { margin:5px 0 0; color:#e1e6f0; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.support-chat-moderation { display:flex; justify-content:flex-end; gap:6px; margin-top:8px; }
.support-chat-moderation .btn { min-height:26px; padding:3px 8px; font-size:10px; }
.support-chat-empty { margin:auto; padding:40px 10px; text-align:center; }
.support-chat-form { display:grid; grid-template-columns:minmax(0,1fr) 42px; align-items:center; gap:6px; margin-top:6px; }
.support-chat-form .field { margin:0; }
.support-chat-form input { display:block; width:100%; height:42px; min-height:42px; box-sizing:border-box; }
.support-chat-form input.is-validation-warning::placeholder { color:#f87171; opacity:1; }
.support-chat-form .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.support-chat-form button { min-height:42px; }
.support-chat-send { display:grid; width:42px; min-width:42px; height:42px; place-items:center; padding:0; }
.support-chat-send svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.support-chat-status { min-height:0; margin:2px 0 0; line-height:1.25; }
.support-chat-status:empty { display:none; }
.support-chat-form + .support-chat-status + .support-join-server { margin-top:10px; }
.support-live-chat { margin:18px 0; padding:16px; border:1px solid var(--line); border-radius:14px; background:color-mix(in srgb,var(--bg-2) 45%,transparent); }
.support-two-column { display:grid; flex:0 0 auto; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:16px; margin-top:18px; }
.support-two-column > .support-live-chat,.support-two-column > .support-ticket-panel { min-width:0; height:auto; margin:0; }
.support-two-column > .support-live-chat { display:flex; flex-direction:column; }
.support-two-column .support-chat-conversation { min-height:320px; }
.support-two-column .support-chat-conversation { padding-bottom:8px; }
.support-two-column .support-chat-messages { flex:1; min-height:210px; max-height:460px; }
.support-two-column .support-ticket-panel { display:flex; flex-direction:column; justify-content:flex-start; }
.support-live-chat .card-head { margin:0 0 12px; }
.support-live-chat h3 { margin:0; }
.owner-support-chat-card { margin-top:16px; }
.support-settings-columns { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:16px; }
.support-settings-config-column { min-width:0; }
.support-settings-config-column .support-config-actions { align-items:flex-start; }
.owner-support-chat-card { display:flex; min-width:0; min-height:620px; flex-direction:column; margin:0; }
.owner-support-chat-card > .support-live-chat { display:flex; flex:1; min-height:0; flex-direction:column; }
.owner-support-chat-card .support-chat-conversation { min-height:430px; padding-bottom:10px; }
.owner-support-chat-card > .card-head { margin-bottom:12px; }
.owner-support-chat-card > .card-head h3 { margin:0 0 4px; }
.owner-support-chat-card > .card-head p { margin:0; color:var(--muted); }
.support-ticket-copy h3 { margin:5px 0; }
.support-ticket-copy p { margin:0; color:var(--muted); }
.support-server-details { display:grid; gap:0; margin:18px 0 0; }
.support-server-details > div { display:grid; grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr); align-items:center; gap:12px; min-height:58px; padding:10px 0; border-top:1px solid var(--line); }
.support-server-details dt { color:var(--muted); font-size:12px; font-weight:700; }
.support-server-details dd { min-width:0; margin:0; color:var(--text); font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.support-server-details .btn { white-space:nowrap; }
.support-server-links { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.support-server-links .hint { margin:0; }
.support-message { margin:16px 0 20px; padding:18px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:color-mix(in srgb,var(--bg-2) 72%,transparent); line-height:1.7; overflow-wrap:anywhere; }
.support-contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.support-contact-card { display:flex; align-items:center; gap:13px; min-width:0; padding:15px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--panel); text-decoration:none; transition:border-color .2s,transform .2s,box-shadow .2s; }
.support-contact-card:hover { transform:translateY(-2px); border-color:var(--accent-2); box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 12%,transparent); }
.support-contact-icon { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border-radius:11px; color:var(--accent-2); background:var(--accent-soft); font-size:20px; }
.support-contact-card > span:last-child { display:grid; gap:4px; min-width:0; }
.support-contact-card small { color:var(--muted); }
.support-contact-card b { overflow-wrap:anywhere; }
.support-join-server { margin:4px 0 16px; }
.support-ticket-panel { margin-top:20px; padding:20px; border:1px solid color-mix(in srgb,var(--accent-2) 36%,var(--line)); border-radius:14px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel)); }
.support-ticket-panel .card-head { margin-bottom:14px; }
.support-ticket-panel h3 { margin:0 0 5px; }
.support-ticket-panel form { display:grid; justify-items:start; gap:12px; }
.support-ticket-panel .field { width:100%; margin:0; }
.support-ticket-panel textarea { min-height:150px; resize:vertical; }
.support-ticket-result { min-height:1.4em; margin:12px 0 0; overflow-wrap:anywhere; }
.support-ticket-result.is-success { color:#34d399; }
.support-ticket-result.is-error { color:#f87171; }
.support-ticket-result a { color:inherit; font-weight:750; }
.owner-support-settings { margin-top:14px; }
.support-config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.support-config-single { grid-template-columns:minmax(0,1fr); }
.support-config-audience { display:grid; align-content:start; gap:12px; padding:16px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--bg-2) 60%,transparent); }
.support-config-audience h4 { margin:0; }
.support-config-audience .field { margin:0; }
.support-config-audience textarea { resize:vertical; min-height:100px; }
.support-config-server { grid-column:1/-1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:16px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--bg-2) 60%,transparent); }
.support-config-server > div,.support-config-server > p { grid-column:1/-1; }
.support-config-server h3 { margin:0 0 5px; }
.support-config-server > div p { margin:0; color:var(--muted); font-size:12px; }
.support-config-server .field { margin:0; }
.support-config-server input[readonly] { color:var(--muted); background:color-mix(in srgb,var(--bg-2) 65%,transparent); }
.support-metadata-actions { grid-column:1/-1; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.support-metadata-actions .hint { margin:0; }
.support-config-actions { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
@media(max-width:760px) { .support-config-grid,.support-config-server { grid-template-columns:minmax(0,1fr); } }
@media(max-width:560px) { .support-chat-form { grid-template-columns:minmax(0,1fr) 42px; } }
@media(max-width:900px) { .support-two-column { grid-template-columns:minmax(0,1fr); } }
@media(max-width:1050px) { .support-settings-columns { grid-template-columns:minmax(0,1fr); } .owner-support-chat-card { min-height:560px; margin-top:4px; } .owner-support-chat-card .support-chat-conversation { min-height:380px; } }
@media(max-width:760px) { .support-page { min-height:calc(100vh - 120px); } }
.create-mode-card b { font-size: 15px; }
.create-mode-card > span:last-child { color: var(--muted); font-size: 12px; line-height: 1.5; }
.create-mode-card .mode-icon { color: var(--accent); font-size: 22px; }
.key-row-actions { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; width: max-content; margin-left: auto; gap: 6px; }
.key-row-actions .icon-action { min-width: 36px; padding-inline: 9px; font-size: 15px; }
.key-row-actions .icon-action:disabled { opacity: .4; cursor: not-allowed; }

/* Dashboard control-center surfaces */
.dashboard-hero {
  isolation: isolate;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 250px;
  padding: clamp(26px, 4vw, 48px);
  margin-bottom: 16px;
  overflow: hidden;
  border: 1px solid rgba(102, 228, 184, .22);
  border-radius: 22px;
  background:
    radial-gradient(ellipse at 78% 48%, rgba(0, 201, 141, .18), transparent 38%),
    radial-gradient(ellipse at 15% 110%, rgba(16, 100, 82, .22), transparent 45%),
    linear-gradient(120deg, #111b1d 0%, #101619 48%, #0b1214 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.035);
  transform-style: preserve-3d;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.dashboard-hero:hover { transform: perspective(1200px) rotateX(.45deg) translateY(-2px); border-color: rgba(102,228,184,.38); box-shadow: 0 30px 72px rgba(0,0,0,.34), 0 0 32px rgba(0,201,141,.07), inset 0 1px rgba(255,255,255,.05); }
.dashboard-hero-copy { position: relative; z-index: 2; max-width: 680px; }
.dashboard-eyebrow, .panel-kicker { color: var(--accent-2); font-size: 10px; font-weight: 800; letter-spacing: 1.65px; }
.dashboard-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 15px; }
.eyebrow-divider { color: var(--dim); }
.pulse-dot, .metric-dot, .status-light { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px rgba(0,201,141,.7); }
.pulse-dot { animation: dashboard-pulse 2s ease-in-out infinite; }
@keyframes dashboard-pulse { 50% { box-shadow: 0 0 0 5px rgba(0,201,141,.08), 0 0 17px rgba(0,201,141,.85); } }
.dashboard-hero h1 { font-size: clamp(27px, 3vw, 39px); line-height: 1.12; letter-spacing: -1.35px; font-weight: 750; }
.dashboard-hero h1 > span { color: var(--accent); }
.dashboard-hero-copy > p { max-width: 530px; margin-top: 11px; color: #a8b8b5; font-size: 13px; }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dashboard-actions .btn { min-height: 42px; }
.btn-glass { color: #d1dfdc; border-color: rgba(163,194,185,.18); background: rgba(255,255,255,.045); backdrop-filter: blur(10px); }
.btn-glass:hover { color: #fff; border-color: rgba(102,228,184,.4); background: rgba(0,201,141,.09); transform: translateY(-2px); }
.dashboard-orb-wrap { position: absolute; z-index: 1; right: 8%; top: 50%; width: 205px; height: 205px; transform: translateY(-50%); perspective: 700px; }
.dashboard-orb { position: absolute; inset: 13px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 33% 27%, rgba(103,233,188,.32), rgba(0,201,141,.09) 34%, rgba(3,12,12,.16) 68%); box-shadow: inset 0 0 34px rgba(102,228,184,.16), 0 0 55px rgba(0,201,141,.14); transform:none; animation: orb-float 7s ease-in-out infinite; }
.orb-core { display: grid; place-items: center; width: 77px; height: 77px; border-radius: 24px; border: 1px solid rgba(155,255,221,.65); background: linear-gradient(145deg,#61e8b9,#009d70 62%,#075842); color: #052117; font-size: 24px; font-weight: 950; letter-spacing: -2px; box-shadow: 0 14px 35px rgba(0,201,141,.28), inset 0 2px 3px rgba(255,255,255,.48); transform:none; }
.orb-ring { position: absolute; inset: 1px -9px; border: 1px solid rgba(102,228,184,.28); border-radius: 50%; transform: rotateX(68deg) rotateZ(-24deg); }
.ring-two { inset: 17px -18px; border-color: rgba(102,228,184,.16); transform: rotateX(68deg) rotateZ(40deg); }
.orb-glint { position: absolute; top: 23px; right: 40px; width: 25px; height: 25px; border-radius: 50%; background: rgba(209,255,239,.72); filter: blur(14px); }
.orb-caption { position: absolute; right: -56px; bottom: 3px; color: var(--muted); font-size: 8px; line-height: 1.7; letter-spacing: 1.1px; }
.orb-caption .pulse-dot { margin-right: 5px; width: 5px; height: 5px; }
.orb-caption b { color: #d0e8df; font-size: 8px; }
.hero-grid-lines { position: absolute; z-index: -1; inset: 0; opacity: .15; background-image: linear-gradient(rgba(160,220,200,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(160,220,200,.12) 1px, transparent 1px); background-size: 38px 38px; mask-image: linear-gradient(90deg, transparent, #000 72%); }
@keyframes orb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.dashboard-status-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 17px; }
.dashboard-status-row.reseller-status-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
.dashboard-status { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 12px 15px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(23,32,39,.8), rgba(15,21,25,.9)); box-shadow: 0 8px 20px rgba(0,0,0,.11), inset 0 1px rgba(255,255,255,.025); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.dashboard-status:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: 0 14px 26px rgba(0,0,0,.2); }
.dashboard-status > div { display: grid; min-width: 0; line-height: 1.45; }
.dashboard-status small { color: var(--dim); font-size: 9px; font-weight: 800; letter-spacing: 1.1px; }
.dashboard-status b { overflow: hidden; color: var(--text); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-status .status-detail { overflow:hidden; color:var(--dim); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-official-server a { width:max-content; max-width:100%; overflow:hidden; color:var(--accent-2); font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.status-icon { display: grid; flex: 0 0 31px; width: 31px; height: 31px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--accent-2); background: rgba(0,201,141,.07); font-size: 17px; }
.status-icon.is-offline { color: var(--amber); background: var(--amber-soft); }
.status-light { width: 6px; height: 6px; margin-left: auto; }
.status-light.is-offline { background: var(--amber); box-shadow: 0 0 9px rgba(245,158,11,.55); }
.dashboard-metrics { margin-bottom: 17px; }
.reseller-subscription-name { overflow:hidden; font-size:clamp(17px,1.6vw,23px); text-overflow:ellipsis; white-space:nowrap; }
.metric-card { min-height: 142px; background: linear-gradient(145deg, rgba(20,28,33,.98), rgba(13,18,22,.98)); box-shadow: 0 15px 35px rgba(0,0,0,.17), inset 0 1px rgba(255,255,255,.035); transform-style: preserve-3d; }
.metric-card:hover { transform: perspective(700px) translateY(-5px) rotateX(1.3deg); box-shadow: 0 22px 42px rgba(0,0,0,.27), 0 0 25px rgba(0,201,141,.045), inset 0 1px rgba(255,255,255,.05); }
.metric-top { display: flex; align-items: center; justify-content: space-between; }
.metric-icon { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(102,228,184,.15); border-radius: 11px; background: rgba(0,201,141,.08); color: var(--accent-2); font-size: 19px; }
.metric-card.green .metric-icon { color: var(--green); background: var(--green-soft); border-color: rgba(46,204,113,.15); }
.metric-card.amber .metric-icon { color: var(--amber); background: var(--amber-soft); border-color: rgba(245,158,11,.15); }
.metric-foot { display: flex; align-items: center; gap: 7px; margin-top: 9px; color: var(--dim); font-size: 11px; }
.metric-dot { width: 5px; height: 5px; background: #71827e; box-shadow: none; }
.metric-dot.green-dot { background: var(--green); box-shadow: 0 0 8px rgba(46,204,113,.48); }
.metric-dot.amber-dot { background: var(--amber); box-shadow: 0 0 8px rgba(245,158,11,.45); }
.dashboard-paid-subscription { display:grid; gap:14px; margin:0 0 17px; padding:20px; border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); box-shadow:0 14px 34px rgba(0,0,0,.16),0 0 22px color-mix(in srgb,var(--accent) 8%,transparent),inset 0 1px rgba(255,255,255,.04); }
.dashboard-paid-subscription .card-head { margin:0; }
.dashboard-paid-subscription .card-head h3 { margin-top:4px; }
.dashboard-paid-subscription .card-head p { margin-top:4px; color:var(--muted); font-size:12px; }
.dashboard-paid-subscription-details { display:grid; grid-template-columns:repeat(auto-fit,minmax(135px,1fr)); gap:10px; }
.dashboard-paid-subscription-details > div { display:grid; gap:4px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--bg-2) 76%,var(--panel)); }
.dashboard-paid-subscription-details small { color:var(--dim); font-size:10px; font-weight:750; letter-spacing:.65px; text-transform:uppercase; }
.dashboard-paid-subscription-details b { color:var(--text); font-size:13px; }
.dashboard-paid-subscription > .btn { justify-self:start; }
.dashboard-panels { margin-bottom: 0; }
.dashboard-panel, .dashboard-activity { box-shadow: 0 17px 38px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.025); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.dashboard-panel:hover, .dashboard-activity:hover { transform: translateY(-3px); border-color: rgba(102,228,184,.22); box-shadow: 0 22px 42px rgba(0,0,0,.2); }
.dashboard-panel .card-head { margin-bottom: 22px; }
.dashboard-panel .card-head h3, .dashboard-activity .card-head h3 { margin-top: 4px; }
.panel-mark { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--dim); font: 600 11px "Cascadia Code", Consolas, monospace; }
.dashboard-bar-row { margin-bottom: 16px; }
.dashboard-bar-row:last-child { margin-bottom: 0; }
.dashboard-bar-row .name { width: 116px; color: var(--text); font-size: 12px; }
.dashboard-bar-row .count { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.dashboard-bar-row .bar-track { height: 7px; border-radius: 9px; background: rgba(139,164,157,.1); overflow: visible; }
.dashboard-bar-row .bar-fill { position: relative; min-width: 3px; border-radius: 9px; background: linear-gradient(90deg, #008c68, #3fe2ad); box-shadow: 0 0 12px rgba(0,201,141,.24); transition: width .9s cubic-bezier(.2,.8,.2,1); }
.dashboard-bar-row .bar-fill::after { content: ""; position: absolute; top: -2px; right: -1px; width: 4px; height: 11px; border-radius: 3px; background: #c5ffea; box-shadow: 0 0 7px rgba(63,226,173,.42); }
.dashboard-bar-row .staff-fill { background: linear-gradient(90deg, #087568, #58c9bd); box-shadow: 0 0 12px rgba(88,201,189,.19); }
.dashboard-bar-row .staff-fill::after { background: #d5fffa; box-shadow: 0 0 7px rgba(88,201,189,.35); }

.access-apps { border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.access-apps legend { padding: 0 6px; color: var(--text); font-size: 13px; font-weight: 650; }
.access-app-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 6px; }
.access-app-grid .field.check { display: flex; align-items: center; min-height: 38px; margin: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.access-app-grid .field.check:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-2)); }
.dashboard-activity { margin-top: 16px; }
.activity-list { display: grid; }
.activity-item { display: grid; grid-template-columns: 34px minmax(0,1fr) minmax(150px, auto); align-items: center; gap: 12px; min-height: 58px; border-top: 1px solid var(--line); }
.activity-icon { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(102,228,184,.15); border-radius: 10px; background: rgba(0,201,141,.065); color: var(--accent-2); }
.activity-main, .activity-meta { display: grid; min-width: 0; }
.activity-main b, .activity-meta b { overflow: hidden; color: var(--text); font-size: 11.5px; text-overflow: ellipsis; white-space: nowrap; text-transform: capitalize; }
.activity-main span, .activity-meta time { overflow: hidden; color: var(--dim); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.activity-meta { text-align: right; }
body[data-theme="light"] .dashboard-hero { background: radial-gradient(ellipse at 78% 48%, rgba(0,141,100,.12), transparent 38%), linear-gradient(120deg,#f8fcfa,#e8f4ef 65%,#f5faf8); box-shadow: 0 20px 48px rgba(22,50,39,.11), inset 0 1px #fff; }
body[data-theme="light"] .dashboard-hero-copy > p, body[data-theme="light"] .orb-caption b { color: var(--muted); }
body[data-theme="light"] .dashboard-status, body[data-theme="light"] .metric-card { background: linear-gradient(145deg,#fff,#f4f8f6); box-shadow: 0 12px 28px rgba(22,50,39,.07), inset 0 1px #fff; }
body[data-theme="light"] .btn-glass { color: var(--text); background: rgba(255,255,255,.6); }
@media (max-width: 900px) { .dashboard-orb-wrap { right: 4%; transform: translateY(-50%) scale(.83); } .dashboard-hero-copy { max-width: 62%; } .dashboard-status-row { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .dashboard-hero { min-height: 300px; align-items: flex-start; padding: 27px 22px; } .dashboard-hero-copy { max-width: 100%; padding-right: 10px; } .dashboard-hero-copy > p { max-width: 420px; } .dashboard-orb-wrap { right: -38px; top: auto; bottom: -69px; transform: scale(.64); opacity: .44; } .dashboard-status-row { grid-template-columns: 1fr 1fr; } .dashboard-date { grid-column: 1 / -1; } .activity-item { grid-template-columns: 32px minmax(0,1fr); padding: 9px 0; } .activity-meta { grid-column: 2; display: flex; gap: 8px; text-align: left; } }
@media (prefers-reduced-motion: reduce) { .dashboard-hero, .dashboard-orb, .pulse-dot, .metric-card, .dashboard-status, .dashboard-panel, .dashboard-activity { animation: none !important; transition: none !important; } }

/* Unified SK AUTH finish for every panel page */
:root { --surface-glass: rgba(19, 27, 31, .88); --shadow-raised: 0 16px 36px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035); }
body { background-image: radial-gradient(ellipse at 88% -12%, rgba(0,201,141,.07), transparent 35%), radial-gradient(ellipse at -10% 90%, rgba(17,112,93,.06), transparent 33%); background-attachment: fixed; }
.app { background: transparent; }
.sidebar { position: relative; z-index: 4; background: linear-gradient(180deg, rgba(13,17,21,.98), rgba(10,14,17,.98)); box-shadow: 10px 0 34px rgba(0,0,0,.12); }
.brand-logo { box-shadow: 0 8px 20px rgba(0,201,141,.2), inset 0 1px rgba(255,255,255,.42); transform: perspective(120px) rotateY(-8deg); }
.brand { border-bottom: 1px solid rgba(148,163,163,.09); margin-bottom: 12px; }
.nav-item { position: relative; overflow: hidden; border: 1px solid transparent; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.nav-item:hover { transform: translateX(3px); border-color: rgba(148,163,163,.1); box-shadow: 0 5px 13px rgba(0,0,0,.12); }
.nav-item.active { border-color: rgba(0,201,141,.12); background: linear-gradient(100deg, rgba(0,201,141,.15), rgba(0,201,141,.045)); box-shadow: inset 2px 0 var(--accent), 0 7px 20px rgba(0,0,0,.12); }
.topbar { position: relative; z-index: 3; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.content { scroll-behavior: smooth; }
.content { view-transition-name: dashboard-content; }
.content.page-transition-leaving { animation: page-content-out 140ms cubic-bezier(.4,0,.7,.2) both; }
.content.page-transition-entering { animation: page-content-in 285ms cubic-bezier(.16,1,.3,1) both; }
@keyframes page-content-out { to { opacity:0; transform:translate3d(-7px,0,0); filter:blur(1px); } }
@keyframes page-content-in { from { opacity:0; transform:translate3d(8px,0,0); filter:blur(1px); } to { opacity:1; transform:translate3d(0,0,0); filter:blur(0); } }
::view-transition-group(root) { animation-duration: 0s; }
::view-transition-group(dashboard-content) { animation-duration: 380ms; animation-timing-function:cubic-bezier(.16,1,.3,1); }
::view-transition-old(root), ::view-transition-new(root) { animation:none; }
::view-transition-old(dashboard-content) { animation:page-content-out 140ms cubic-bezier(.4,0,.7,.2) both; }
::view-transition-new(dashboard-content) { animation:page-content-in 285ms 110ms cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) {
  .content.page-transition-leaving, .content.page-transition-entering,
  ::view-transition-group(root), ::view-transition-group(dashboard-content),
  ::view-transition-old(root), ::view-transition-new(root),
  ::view-transition-old(dashboard-content), ::view-transition-new(dashboard-content) { animation:none !important; }
}
.card { background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 96%, white 4%), var(--panel)); box-shadow: var(--shadow-raised); transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease, background .24s ease; }
.card:hover { border-color: rgba(102,228,184,.23); box-shadow: 0 20px 42px rgba(0,0,0,.23), inset 0 1px rgba(255,255,255,.04); }
.card-head { padding-bottom: 12px; border-bottom: 1px solid rgba(148,163,163,.09); }
.card-head h3 { letter-spacing: -.2px; }
.btn { position: relative; overflow: hidden; transform: translateZ(0); box-shadow: 0 4px 9px rgba(0,0,0,.12), inset 0 1px rgba(255,255,255,.055); transition: transform .18s ease, filter .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 17px rgba(0,0,0,.19), inset 0 1px rgba(255,255,255,.08); }
.btn:active:not(:disabled) { transform: translateY(0) scale(.985); box-shadow: 0 2px 5px rgba(0,0,0,.14); }
.btn-primary { background: linear-gradient(135deg, #16d6a0, #008964 82%); border-color: rgba(125,255,218,.25); box-shadow: 0 7px 18px rgba(0,201,141,.16), inset 0 1px rgba(255,255,255,.22); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, #43e9b6, #00a77a 82%); box-shadow: 0 10px 24px rgba(0,201,141,.22), inset 0 1px rgba(255,255,255,.3); }
.btn-ghost { background: linear-gradient(145deg, rgba(29,40,47,.96), rgba(20,28,33,.96)); }
.btn-danger { box-shadow: 0 4px 12px rgba(239,68,68,.08), inset 0 1px rgba(255,255,255,.045); }
.btn:focus-visible, .nav-item:focus-visible, .create-mode-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.stat { background: linear-gradient(145deg, rgba(22,31,36,.98), rgba(13,18,22,.98)); box-shadow: 0 14px 33px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.035); }
.stat-value { font-variant-numeric: tabular-nums; text-shadow: 0 4px 18px rgba(0,201,141,.08); }
.app-card { background: linear-gradient(145deg, rgba(20,28,33,.98), rgba(13,18,22,.98)); box-shadow: 0 14px 32px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.03); transform-style: preserve-3d; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.app-card:hover { transform: perspective(950px) translateY(-4px) rotateX(.7deg); border-color: rgba(102,228,184,.3); box-shadow: 0 22px 42px rgba(0,0,0,.23), 0 0 22px rgba(0,201,141,.04); }
.app-name { letter-spacing: -.25px; }
.app-meta > span { padding: 5px 9px; border: 1px solid rgba(148,163,163,.1); border-radius: 9px; background: rgba(255,255,255,.018); }
.exe-row { transition: background .18s ease, padding .18s ease; }
.exe-row:hover { padding-inline: 8px; border-radius: 9px; background: rgba(255,255,255,.025); }
.connect-box { background: linear-gradient(145deg, rgba(8,14,16,.82), rgba(16,23,27,.82)); border-style: solid; border-color: rgba(102,228,184,.14); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.create-mode-card { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(23,33,38,.96), rgba(13,19,22,.98)); box-shadow: 0 12px 27px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.04); transition: transform .23s ease, border-color .23s ease, background .23s ease, box-shadow .23s ease; }
.create-mode-card::after { content: ""; position: absolute; width: 150px; height: 150px; right: -86px; bottom: -100px; border-radius: 50%; background: rgba(0,201,141,.1); filter: blur(4px); transition: transform .3s ease; }
.create-mode-card:hover:not(:disabled) { transform: perspective(700px) translateY(-5px) rotateX(1deg); border-color: rgba(102,228,184,.43); background: linear-gradient(145deg, rgba(25,43,42,.98), rgba(13,20,22,.98)); box-shadow: 0 20px 36px rgba(0,0,0,.23), 0 0 22px rgba(0,201,141,.07); }
.create-mode-card:hover::after { transform: scale(1.45); }
.table-wrap { background: rgba(8,12,14,.26); box-shadow: 0 12px 28px rgba(0,0,0,.1), inset 0 1px rgba(255,255,255,.02); }
th { position: sticky; top: 0; z-index: 1; background: linear-gradient(180deg, #1a242a, #172027); }
tbody tr { transition: background .18s ease, box-shadow .18s ease; }
tbody tr:hover { background: linear-gradient(90deg, rgba(0,201,141,.055), rgba(255,255,255,.015)); box-shadow: inset 2px 0 rgba(0,201,141,.45); }
td { transition: color .18s ease; }
.keycode { background: linear-gradient(145deg, #0a1012, #11191c); box-shadow: inset 0 1px rgba(255,255,255,.035), 0 4px 12px rgba(0,0,0,.11); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.keycode:hover { border-color: rgba(102,228,184,.42); box-shadow: 0 6px 18px rgba(0,201,141,.08), inset 0 1px rgba(255,255,255,.05); transform: translateY(-1px); }
.badge, .pill { box-shadow: inset 0 1px rgba(255,255,255,.035); }
.modal-backdrop { background: rgba(3,8,9,.76); backdrop-filter: blur(9px) saturate(125%); }
.modal { background: linear-gradient(145deg, #151e22, #101619 68%); border-color: rgba(102,228,184,.2); box-shadow: 0 35px 100px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.055); transform-style: preserve-3d; }
.modal h3 { letter-spacing: -.35px; }
.modal input, .modal select, .modal textarea { background: rgba(8,13,15,.7); }
.result-box { background: linear-gradient(145deg, rgba(22,67,49,.58), rgba(9,31,25,.7)); box-shadow: inset 0 1px rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.12); }
.empty { border: 1px dashed rgba(148,163,163,.15); border-radius: 14px; background: rgba(255,255,255,.012); }
.toast { background: linear-gradient(145deg, #1b282c, #121a1e); box-shadow: 0 18px 48px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(12px); }
.log-line { transition: background .16s ease; }
.log-line:hover { background: rgba(255,255,255,.025); }
body[data-theme="light"] { background-image: radial-gradient(ellipse at 88% -12%, rgba(0,141,100,.07), transparent 36%), radial-gradient(ellipse at -10% 90%, rgba(17,112,93,.04), transparent 34%); }
body[data-theme="light"] .sidebar { background: linear-gradient(180deg,#fff,#f7faf8); box-shadow: 8px 0 24px rgba(22,50,39,.055); }
body[data-theme="light"] .card, body[data-theme="light"] .app-card, body[data-theme="light"] .stat { background: linear-gradient(145deg,#fff,#f8fbf9); box-shadow: 0 12px 28px rgba(22,50,39,.07), inset 0 1px #fff; }
body[data-theme="light"] .btn-ghost { background: linear-gradient(145deg,#fff,#edf3f0); }
body[data-theme="light"] .create-mode-card { background: linear-gradient(145deg,#fff,#f0f6f3); box-shadow: 0 12px 27px rgba(22,50,39,.07), inset 0 1px #fff; }
body[data-theme="light"] .table-wrap { background: #fff; }
body[data-theme="light"] th { background: linear-gradient(180deg,#f4f8f6,#edf3f0); }
body[data-theme="light"] .keycode { background: linear-gradient(145deg,#fff,#f3f7f5); }
body[data-theme="light"] .modal { background: linear-gradient(145deg,#fff,#f5f9f7); box-shadow: 0 30px 80px rgba(22,50,39,.22), inset 0 1px #fff; }
body[data-theme="light"] .modal input, body[data-theme="light"] .modal select, body[data-theme="light"] .modal textarea { background: #fff; }
body[data-theme="light"] .toast { background: linear-gradient(145deg,#fff,#f2f7f4); box-shadow: 0 18px 48px rgba(22,50,39,.16), inset 0 1px #fff; }

/* Role palettes */
body[data-role-theme="owner"] {
  --bg: #020024;
  --bg-2: #050533;
  --panel: #08082f;
  --panel-2: #0d1040;
  --line: #191a52;
  --line-2: #263c78;
  --text: #f2f5ff;
  --muted: #aab7d5;
  --dim: #747fa7;
  --green: #00d4ff;
  --green-soft: rgba(0,212,255,.14);
  --accent: #00d4ff;
  --accent-2: #00d4ff;
  --accent-soft: rgba(0,212,255,.14);
  --amber: #00d4ff;
  --amber-soft: rgba(0,212,255,.14);
  --role-trim: #72e8ff;
  --role-glow: rgba(0,212,255,.2);
}
body[data-role-theme="admin"] {
  --bg: #0a1a2f;
  --bg-2: #1f1f1f;
  --panel: #111a27;
  --panel-2: #192638;
  --line: #293746;
  --line-2: #40546a;
  --text: #f1f4f8;
  --muted: #aab7c6;
  --dim: #778798;
  --accent: #0a1a2f;
  --accent-2: #9bb4d0;
  --accent-soft: rgba(10,26,47,.38);
  --green: #9bb4d0;
  --green-soft: rgba(155,180,208,.14);
  --amber: #9bb4d0;
  --amber-soft: rgba(155,180,208,.14);
  --role-trim: #c2d1e2;
  --role-glow: rgba(10,26,47,.28);
}
body[data-role-theme="reseller"] {
  --bg: #082026;
  --bg-2: #082026;
  --panel: #0b2c32;
  --panel-2: #10404a;
  --line: #1d555c;
  --line-2: #397681;
  --text: #f5fbfc;
  --muted: #b7d4d8;
  --dim: #84aeb5;
  --accent: #97dde8;
  --accent-2: #ffd1e2;
  --accent-soft: rgba(151,221,232,.2);
  --green: #ffd1e2;
  --green-soft: rgba(255,209,226,.15);
  --amber: #ffd1e2;
  --amber-soft: rgba(255,209,226,.15);
  --role-trim: #ffd1e2;
  --role-glow: rgba(151,221,232,.22);
}
body[data-role-theme="auth"] {
  --accent: #11b98a;
  --accent-2: #78e7c3;
  --accent-soft: rgba(17, 185, 138, .13);
  --role-trim: #d5b66c;
  --role-glow: rgba(17, 185, 138, .11);
}

/* Shared role-aware surfaces and interaction states. */
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) {
  background-image: radial-gradient(ellipse at 88% -12%, var(--role-glow), transparent 38%),
    radial-gradient(ellipse at -10% 90%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 35%);
}
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) ::selection { background: color-mix(in srgb, var(--accent) 42%, transparent); color: #fff; }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .sidebar {
  border-right-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, var(--bg-2)), var(--bg-2) 62%);
}
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .topbar { border-bottom-color: color-mix(in srgb, var(--accent) 28%, var(--line)); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent) 48%, transparent 100%);
}
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .brand-logo {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent-2) 75%, white), var(--accent) 58%, color-mix(in srgb, var(--accent) 52%, #111));
  border-color: color-mix(in srgb, var(--accent-2) 58%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 25%, transparent), inset 0 1px rgba(255,255,255,.45);
}
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .nav-item.active {
  color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 28%, transparent);
  background: linear-gradient(100deg, var(--accent-soft), color-mix(in srgb, var(--accent) 3%, transparent));
  box-shadow: inset 3px 0 var(--accent), 0 7px 20px color-mix(in srgb, var(--accent) 8%, transparent);
}
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .btn-primary {
  background: linear-gradient(135deg, var(--accent-2), var(--accent) 56%, color-mix(in srgb, var(--accent) 70%, #10151a));
  border-color: color-mix(in srgb, var(--accent-2) 40%, transparent);
  box-shadow: 0 7px 20px color-mix(in srgb, var(--accent) 22%, transparent), inset 0 1px rgba(255,255,255,.28);
}
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .btn-primary:hover:not(:disabled) {
  filter: brightness(1.12); box-shadow: 0 11px 28px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px rgba(255,255,255,.34);
}
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .card:hover,
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .app-card:hover,
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .dashboard-panel:hover,
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .dashboard-activity:hover,
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .stat:hover { border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .card-head { border-bottom-color: color-mix(in srgb, var(--accent) 16%, var(--line)); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) input:focus,
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) select:focus,
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) textarea:focus { outline-color: color-mix(in srgb, var(--accent) 42%, transparent); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .create-mode-card:hover:not(:disabled),
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .access-app-grid .field.check:has(input:checked) { border-color: var(--accent); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) tbody tr:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), rgba(255,255,255,.012)); box-shadow: inset 2px 0 color-mix(in srgb, var(--accent) 68%, transparent); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .keycode:hover { border-color: color-mix(in srgb, var(--accent-2) 60%, var(--line)); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 15%, transparent); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .dashboard-hero {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: radial-gradient(ellipse at 78% 42%, color-mix(in srgb, var(--accent) 19%, transparent), transparent 40%),
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 8%, #11191d), #101619 54%, #0b1115);
}
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .dashboard-hero:hover { border-color: color-mix(in srgb, var(--accent-2) 58%, var(--line)); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .dashboard-orb { background: radial-gradient(circle at 33% 27%, color-mix(in srgb, var(--accent-2) 47%, transparent), color-mix(in srgb, var(--accent) 16%, transparent) 39%, rgba(3,12,12,.16) 72%); box-shadow: inset 0 0 34px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 55px color-mix(in srgb, var(--accent) 18%, transparent); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .orb-core { border-color: color-mix(in srgb, var(--accent-2) 75%, white); background: linear-gradient(145deg, var(--accent-2), var(--accent) 62%, color-mix(in srgb, var(--accent) 48%, #10151a)); box-shadow: 0 14px 35px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 2px 3px rgba(255,255,255,.48); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .orb-ring, body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .ring-two { border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .pulse-dot,
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .metric-dot:not(.green-dot):not(.amber-dot),
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .status-light:not(.is-offline) { background: var(--accent); box-shadow: 0 0 11px color-mix(in srgb, var(--accent) 68%, transparent); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .metric-icon,
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .status-icon,
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .activity-icon { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 26%, var(--line)); background: color-mix(in srgb, var(--accent) 9%, transparent); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .dashboard-bar-row .bar-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 68%, #172027), var(--accent-2)); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 28%, transparent); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .dashboard-bar-row .bar-fill::after { border-color: var(--accent-2); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .modal { border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .result-box { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 18%, var(--panel)), color-mix(in srgb, var(--accent) 5%, var(--bg-2))); }
body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .dashboard-hero, body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .card, body:is([data-role-theme="owner"], [data-role-theme="reseller"]) .app-card { transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }

/* Owner: deep navy surfaces with vivid blue highlights. */
body[data-role-theme="owner"] .brand b,
body[data-role-theme="owner"] .dashboard-eyebrow { color: var(--role-trim); }
body[data-role-theme="owner"] .brand-logo { box-shadow: 0 0 0 2px color-mix(in srgb, var(--role-trim) 36%, transparent), 0 8px 25px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px rgba(255,255,255,.5); }
body[data-role-theme="owner"] .card, body[data-role-theme="owner"] .app-card, body[data-role-theme="owner"] .stat { border-top-color: color-mix(in srgb, var(--role-trim) 36%, var(--line)); }
body[data-role-theme="owner"] .stat { background: linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 96%, var(--accent)), var(--bg-2)); }
body[data-role-theme="owner"] .app-card { background: linear-gradient(145deg, color-mix(in srgb, var(--panel) 95%, var(--accent)), var(--bg-2)); }
body[data-role-theme="owner"] .dashboard-hero { box-shadow: 0 24px 65px rgba(0,0,0,.3), 0 0 35px color-mix(in srgb, var(--accent-2) 12%, transparent), inset 0 1px rgba(255,255,255,.07); }
body[data-role-theme="owner"] .sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 8%, #020024), #020024 68%); }
body[data-role-theme="owner"] .btn-primary { color: #020024; text-shadow: 0 1px rgba(255,255,255,.18); }
body[data-role-theme="owner"] .me-role { color: var(--role-trim); }
body[data-role-theme="owner"] .owner-name-highlight,
body[data-role-theme="owner"] .support-chat-message-owner .support-chat-message-meta b {
  color:#f1d27c;
  text-shadow:0 0 12px rgba(241,210,124,.22);
}

/* Admin: retain the established emerald operational-console palette. */

/* Reseller: neon brights with hot pink and violet on deep plum surfaces. */
body[data-role-theme="reseller"] .sidebar { box-shadow: inset -2px 0 color-mix(in srgb, var(--accent) 45%, transparent), 10px 0 34px rgba(0,0,0,.14); }
body[data-role-theme="reseller"] .brand b,
body[data-role-theme="reseller"] .topbar h2 { color: var(--accent-2); }
body[data-role-theme="reseller"] .card,
body[data-role-theme="reseller"] .app-card,
body[data-role-theme="reseller"] .stat { border-radius: 16px; }
body[data-role-theme="reseller"] .dashboard-hero { box-shadow: 0 24px 60px rgba(0,0,0,.3), 0 0 34px rgba(151,221,232,.22), inset 0 1px rgba(255,255,255,.045); }
body[data-role-theme="reseller"] .sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, #004a4a), #082026 64%); }
body[data-role-theme="reseller"] .me-role { color: var(--accent-2); }

/* Static sign-in identity; it does not inherit the signed-in account palette. */
body[data-role-theme="auth"] .auth-bg {
  background: radial-gradient(circle at 18% 22%, rgba(17,185,138,.2), transparent 39%),
    radial-gradient(circle at 82% 70%, rgba(213,182,108,.13), transparent 42%),
    linear-gradient(135deg, #070a0b, #111918 55%, #080a0d);
}
body[data-role-theme="auth"] .auth-card {
  width: min(430px, 92vw); max-height: 94vh; padding: 38px 36px 32px; overflow-y: auto; overscroll-behavior: contain;
  border-color: rgba(213,182,108,.27); border-radius: 23px;
  background: linear-gradient(148deg, rgba(20,28,27,.97), rgba(11,16,17,.96) 72%);
  box-shadow: 0 34px 100px rgba(0,0,0,.62), 0 0 60px rgba(17,185,138,.07), inset 0 1px rgba(255,255,255,.07);
}
body[data-role-theme="auth"] .auth-card.signup-wide { width:min(900px,96vw); }
body[data-role-theme="auth"] .auth-card::before {
  content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, #d5b66c, #78e7c3, transparent); opacity: .8;
}
body[data-role-theme="auth"] .auth-logo {
  width: 66px; height: 66px; margin-bottom: 19px; border-radius: 19px;
  color: #082019; background: linear-gradient(145deg, #baf5df, #17bd8d 60%, #087456);
  border: 1px solid rgba(213,182,108,.62); box-shadow: 0 12px 30px rgba(17,185,138,.2), 0 0 0 5px rgba(213,182,108,.055), inset 0 1px rgba(255,255,255,.55);
}
body[data-role-theme="auth"] .auth-title { font-size: 29px; letter-spacing: 1.1px; }
body[data-role-theme="auth"] .brand-subtitle { color: #c7b77f; font-size: 9px; letter-spacing: 2.6px; }
body[data-role-theme="auth"] .auth-sub { margin: 15px 0 25px; }
body[data-role-theme="auth"] .auth-card .field { text-align: left; }
body[data-role-theme="auth"] .auth-card input { min-height: 44px; border-radius: 10px; }
body[data-role-theme="auth"] .auth-card .remember-me input { min-height:15px; padding:0; border-radius:4px; }
body[data-role-theme="auth"] .signup-discord-panel .signup-bot-toggle-control { display:grid; place-items:center; }
body[data-role-theme="auth"] .signup-discord-panel .signup-bot-toggle-control input[type="checkbox"] { display:block; width:18px; height:18px; min-height:18px; padding:0; margin:0; border-radius:4px; }
body[data-role-theme="auth"] .signup-discord-panel:has(#signup-bot-access:checked) .signup-discord-example { display:none; }
body[data-role-theme="auth"] .auth-card .btn-primary { color: #062117; background: linear-gradient(135deg, #baf5df, #19c190 55%, #078260); border-color: rgba(213,182,108,.4); }
body[data-role-theme="auth"] .auth-card .btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

body[data-theme="light"][data-role-theme="owner"] { background-image: radial-gradient(ellipse at 88% -12%, rgba(0,212,255,.12), transparent 38%), radial-gradient(ellipse at -10% 90%, rgba(2,0,36,.08), transparent 35%); }
body[data-theme="light"][data-role-theme="admin"] { background-image: radial-gradient(ellipse at 88% -12%, rgba(10,26,47,.1), transparent 36%), radial-gradient(ellipse at -10% 90%, rgba(31,31,31,.05), transparent 34%); }
body[data-theme="light"][data-role-theme="reseller"] { background-image: radial-gradient(ellipse at 88% -12%, rgba(151,221,232,.11), transparent 38%), radial-gradient(ellipse at -10% 90%, rgba(255,209,226,.07), transparent 35%); }
body[data-theme="light"]:is([data-role-theme="owner"], [data-role-theme="reseller"]) .sidebar { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, white), white 65%); }
body[data-theme="light"]:is([data-role-theme="owner"], [data-role-theme="reseller"]) .dashboard-hero { background: radial-gradient(ellipse at 78% 42%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 40%), linear-gradient(120deg, #fff, color-mix(in srgb, var(--accent) 5%, #f5f8fb)); }
body[data-theme="light"][data-role-theme="auth"] .auth-card { background: linear-gradient(148deg, rgba(255,255,255,.98), rgba(245,249,247,.98)); border-color: rgba(178,144,67,.34); }
@media (max-width: 720px) {
  body[data-role-theme="auth"] .auth-card.signup-wide { width:min(460px,94vw); padding:28px 22px 24px; }
  #signup-form .signup-main-fields { grid-template-columns:minmax(0,1fr); gap:0; }
  #signup-form .signup-main-fields .field:last-child { margin-bottom:14px; }
  .signup-discord-panel { padding:15px; }
  #auth-screen:has(.auth-card.signup-wide) #social-login-wrap { width:100%; margin:16px 0 0; }
}

/* Final role palette pass. Owner surfaces and every decorative accent stay navy/blue. */
body[data-role-theme="owner"] {
  --bg: #020024;
  --bg-2: #050533;
  --panel: #08082f;
  --panel-2: #0d1040;
  --line: #191a52;
  --line-2: #263c78;
  --text: #f2f5ff;
  --muted: #aab7d5;
  --dim: #747fa7;
  --green: #00d4ff;
  --green-soft: rgba(0,212,255,.14);
  --accent: #00d4ff;
  --accent-2: #00d4ff;
  --accent-soft: rgba(0,212,255,.14);
  --amber: #00d4ff;
  --amber-soft: rgba(0,212,255,.14);
  --role-trim: #72e8ff;
  --role-glow: rgba(0,212,255,.15);
}
body[data-role-theme="admin"] {
  --bg: #0a1a2f;
  --bg-2: #1f1f1f;
  --panel: #111a27;
  --panel-2: #192638;
  --line: #293746;
  --line-2: #40546a;
  --text: #f1f4f8;
  --muted: #aab7c6;
  --dim: #778798;
  --accent: #0a1a2f;
  --accent-2: #9bb4d0;
  --accent-soft: rgba(10,26,47,.38);
  --green: #9bb4d0;
  --green-soft: rgba(155,180,208,.14);
  --amber: #9bb4d0;
  --amber-soft: rgba(155,180,208,.14);
  --role-trim: #c2d1e2;
  --role-glow: rgba(10,26,47,.28);
}
body[data-role-theme="reseller"] {
  --bg: #082026;
  --bg-2: #082026;
  --panel: #0b2c32;
  --panel-2: #10404a;
  --line: #1d555c;
  --line-2: #397681;
  --text: #f5fbfc;
  --muted: #b7d4d8;
  --dim: #84aeb5;
  --accent: #97dde8;
  --accent-2: #ffd1e2;
  --accent-soft: rgba(151,221,232,.2);
  --green: #ffd1e2;
  --green-soft: rgba(255,209,226,.15);
  --amber: #ffd1e2;
  --amber-soft: rgba(255,209,226,.15);
  --role-trim: #ffd1e2;
  --role-glow: rgba(151,221,232,.22);
}
body[data-role-theme="owner"] .dashboard-hero,
body[data-role-theme="owner"] .metric-card,
body[data-role-theme="owner"] .dashboard-status { border-color: rgba(0,212,255,.3); }
body[data-role-theme="owner"] .dashboard-hero { background:radial-gradient(ellipse at 78% 42%,rgba(0,212,255,.22),transparent 43%),radial-gradient(ellipse at 14% 100%,rgba(2,0,36,.72),transparent 48%),linear-gradient(120deg,#020024,#050533 56%,#08082f); }
body[data-role-theme="owner"] .dashboard-orb { background:radial-gradient(circle at 32% 25%,rgba(114,232,255,.5),rgba(0,212,255,.2) 42%,rgba(2,0,36,.4) 74%); box-shadow:inset 0 0 38px rgba(114,232,255,.2),0 0 62px rgba(0,212,255,.25); }
body[data-role-theme="owner"] .orb-core { color:#020024; background:linear-gradient(145deg,#a5f2ff,#00d4ff 74%); border-color:#72e8ff; box-shadow:0 14px 35px rgba(0,212,255,.34),inset 0 2px 3px rgba(255,255,255,.5); }
body[data-role-theme="owner"] .btn-primary { color:#020024; background:linear-gradient(135deg,#00d4ff,#00a7d4); border-color:rgba(114,232,255,.72); }
body[data-role-theme="owner"] .btn-green,
body[data-role-theme="owner"] .badge.green,
body[data-role-theme="owner"] .pill.ok { color:var(--accent-2); background:var(--accent-soft); border-color:rgba(0,212,255,.42); }
body[data-role-theme="owner"] .dashboard-bar-row .staff-fill { background:linear-gradient(90deg,#020024,#00d4ff); }
body[data-role-theme="owner"] .dashboard-bar-row .staff-fill::after { border-color:#72e8ff; }
body[data-role-theme="owner"] .dashboard-bar-row .bar-fill { background:linear-gradient(90deg,#020024,#00d4ff); box-shadow:0 0 12px rgba(0,212,255,.26); }
body[data-role-theme="owner"] .dashboard-bar-row .bar-fill::after { border-color:#72e8ff; }
body[data-role-theme="owner"] .sidebar { background:linear-gradient(180deg,#08082f,#020024 68%); }
body[data-role-theme="owner"] .create-mode-card { background:linear-gradient(145deg,#0d1040,#050533); border-color:#191a52; box-shadow:0 12px 27px rgba(0,0,0,.2),inset 0 1px rgba(114,232,255,.045); }
body[data-role-theme="owner"] .create-mode-card::after { background:rgba(0,212,255,.14); }
body[data-role-theme="owner"] .create-mode-card .mode-icon { color:#00d4ff; }
body[data-role-theme="owner"] .create-mode-card:hover:not(:disabled) { background:linear-gradient(145deg,#14144f,#08082f); border-color:rgba(0,212,255,.55); box-shadow:0 20px 36px rgba(0,0,0,.25),0 0 22px rgba(0,212,255,.12); }

body[data-role-theme="admin"] .btn-primary { color:#f1f4f8; background:linear-gradient(135deg,#0a1a2f,#1f1f1f 72%); border-color:#40546a; }
body[data-role-theme="admin"] .dashboard-hero { background:radial-gradient(ellipse at 78% 42%,rgba(10,26,47,.62),transparent 42%),radial-gradient(ellipse at 15% 100%,rgba(155,180,208,.06),transparent 48%),linear-gradient(120deg,#0a1a2f,#151b24 55%,#1f1f1f); }
body[data-role-theme="admin"] .dashboard-orb { background:radial-gradient(circle at 32% 25%,rgba(194,209,226,.34),rgba(10,26,47,.58) 42%,rgba(10,10,10,.34) 74%); box-shadow:inset 0 0 38px rgba(155,180,208,.12),0 0 62px rgba(10,26,47,.35); }
body[data-role-theme="admin"] .orb-core { color:#f1f4f8; background:linear-gradient(145deg,#40546a,#0a1a2f 58%,#1f1f1f); border-color:#9bb4d0; box-shadow:0 14px 35px rgba(10,26,47,.4),inset 0 2px 3px rgba(255,255,255,.32); }
body[data-role-theme="admin"] .dashboard-bar-row .bar-fill { background:linear-gradient(90deg,#0a1a2f,#9bb4d0); box-shadow:0 0 12px rgba(10,26,47,.24); }
body[data-role-theme="admin"] .dashboard-bar-row .bar-fill::after { border-color:#c2d1e2; }
body[data-role-theme="admin"] .dashboard-bar-row .staff-fill { background:linear-gradient(90deg,#0a1a2f,#9bb4d0); }
body[data-role-theme="admin"] .dashboard-bar-row .staff-fill::after { border-color:#c2d1e2; }
body[data-role-theme="admin"] .sidebar { background:linear-gradient(180deg,#0a1a2f,#151515 68%); }
body[data-role-theme="admin"] .metric-card,
body[data-role-theme="admin"] .dashboard-status { border-color:#293746; }
body[data-role-theme="admin"] .metric-card { background:linear-gradient(145deg,#192638,#1f1f1f); }
body[data-role-theme="admin"] .dashboard-status { background:linear-gradient(145deg,rgba(25,38,56,.96),rgba(31,31,31,.98)); }
body[data-role-theme="admin"] { background-image:radial-gradient(ellipse at 88% -12%,rgba(10,26,47,.22),transparent 36%),radial-gradient(ellipse at -10% 90%,rgba(31,31,31,.12),transparent 34%); }
body[data-role-theme="admin"] .dashboard-hero:hover { border-color:#40546a; box-shadow:0 30px 72px rgba(0,0,0,.34),0 0 32px rgba(10,26,47,.24),inset 0 1px rgba(255,255,255,.05); }
body[data-role-theme="admin"] .metric-card:hover { box-shadow:0 22px 42px rgba(0,0,0,.27),0 0 25px rgba(10,26,47,.2),inset 0 1px rgba(255,255,255,.05); }
body[data-role-theme="admin"] .btn-primary:hover:not(:disabled) { background:linear-gradient(135deg,#17365a,#292929 72%); box-shadow:0 10px 24px rgba(10,26,47,.32),inset 0 1px rgba(255,255,255,.2); }
body[data-role-theme="admin"] .btn-glass:hover { color:#f1f4f8; border-color:#40546a; background:rgba(10,26,47,.32); }
body[data-role-theme="admin"] .status-icon, body[data-role-theme="admin"] .metric-icon, body[data-role-theme="admin"] .activity-icon { color:#c2d1e2; background:rgba(10,26,47,.3); border-color:#293746; }
body[data-role-theme="admin"] .stat-value { text-shadow:0 4px 18px rgba(10,26,47,.2); }
body[data-role-theme="admin"] .pulse-dot, body[data-role-theme="admin"] .metric-dot, body[data-role-theme="admin"] .status-light { box-shadow:0 0 12px rgba(155,180,208,.28); }
body[data-role-theme="admin"] .brand-logo { background:linear-gradient(145deg,#9bb4d0,#0a1a2f 64%,#1f1f1f); border-color:#40546a; box-shadow:0 0 0 2px rgba(10,26,47,.3),0 8px 24px rgba(10,26,47,.28); color:#f1f4f8; }
body[data-role-theme="admin"] .brand b, body[data-role-theme="admin"] .dashboard-eyebrow { color:#c2d1e2; }
body[data-role-theme="admin"] .nav-item.active { color:#d5e1ed; border-color:#40546a; background:linear-gradient(100deg,rgba(10,26,47,.68),rgba(31,31,31,.48)); box-shadow:inset 3px 0 #9bb4d0,0 7px 20px rgba(0,0,0,.18); }
body[data-role-theme="admin"] .card:hover, body[data-role-theme="admin"] .app-card:hover, body[data-role-theme="admin"] .stat:hover { border-color:#40546a; }
body[data-role-theme="admin"] .card-head { border-bottom-color:#293746; }
body[data-role-theme="admin"] input:focus, body[data-role-theme="admin"] select:focus, body[data-role-theme="admin"] textarea:focus { outline-color:rgba(155,180,208,.4); border-color:#9bb4d0 !important; }
body[data-role-theme="admin"] .stat { background:linear-gradient(145deg,#192638,#1f1f1f); }
body[data-role-theme="admin"] .app-card { background:linear-gradient(145deg,#111d2c,#1f1f1f); }
body[data-role-theme="admin"] .create-mode-card { background:linear-gradient(145deg,#192638,#1f1f1f); border-color:#293746; }
body[data-role-theme="admin"] .create-mode-card::after { background:rgba(10,26,47,.4); }
body[data-role-theme="admin"] .create-mode-card .mode-icon { color:#9bb4d0; }
body[data-role-theme="admin"] .create-mode-card:hover:not(:disabled) { background:linear-gradient(145deg,#20334a,#1f1f1f); border-color:#607a96; box-shadow:0 20px 36px rgba(0,0,0,.24),0 0 22px rgba(10,26,47,.2); }
body[data-role-theme="admin"] .dashboard-bar-row .count, body[data-role-theme="admin"] .log-actor { color:#c2d1e2; }
body[data-role-theme="admin"] .keycode:hover { border-color:#607a96; box-shadow:0 6px 18px rgba(10,26,47,.22),inset 0 1px rgba(255,255,255,.05); }

body[data-role-theme="reseller"] .dashboard-hero,
body[data-role-theme="reseller"] .metric-card,
body[data-role-theme="reseller"] .dashboard-status { border-color:rgba(151,221,232,.4); }
body[data-role-theme="reseller"] .metric-card { background:linear-gradient(145deg,#0b2c32,#082026); }
body[data-role-theme="reseller"] .dashboard-status { background:linear-gradient(145deg,rgba(30,18,48,.96),rgba(14,8,23,.98)); }
body[data-role-theme="reseller"] .dashboard-hero { background:radial-gradient(ellipse at 78% 42%,rgba(151,221,232,.28),transparent 42%),radial-gradient(ellipse at 15% 100%,rgba(255,209,226,.12),transparent 48%),linear-gradient(120deg,#004a4a,#0b343a 55%,#082026); }
body[data-role-theme="reseller"] .dashboard-orb { background:radial-gradient(circle at 32% 25%,rgba(255,209,226,.48),rgba(151,221,232,.32) 42%,rgba(13,5,24,.32) 74%); box-shadow:inset 0 0 38px rgba(255,209,226,.14),0 0 62px rgba(151,221,232,.3); }
body[data-role-theme="reseller"] .orb-core { color:#fff; background:linear-gradient(145deg,#ffd1e2,#97dde8 58%,#004a4a); border-color:#ffd1e2; box-shadow:0 14px 35px rgba(151,221,232,.42),inset 0 2px 3px rgba(255,255,255,.35); }
body[data-role-theme="reseller"] .btn-primary { color:#fff; background:linear-gradient(120deg,#ffd1e2,#97dde8 62%,#004a4a); border-color:rgba(255,209,226,.55); }
body[data-role-theme="reseller"] [role="tablist"][aria-label="Access record type"] [data-key-tab].btn-primary:hover:not(:disabled) { background:linear-gradient(120deg,#ffd1e2,#97dde8 62%,#004a4a); filter:none; box-shadow:0 8px 22px rgba(151,221,232,.32),inset 0 1px rgba(255,255,255,.2); }
body[data-role-theme="reseller"] [role="tablist"][aria-label="Access record type"] [data-key-tab].btn-ghost:hover:not(:disabled) { color:var(--accent-2); background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 18%,var(--panel-2)),color-mix(in srgb,#ffd1e2 10%,var(--panel-2))); border-color:color-mix(in srgb,var(--accent) 52%,var(--line)); }
body[data-role-theme="reseller"] .btn-green,
body[data-role-theme="reseller"] .badge.green,
body[data-role-theme="reseller"] .pill.ok { color:var(--accent-2); background:var(--accent-soft); border-color:rgba(151,221,232,.52); }
body[data-role-theme="reseller"] .dashboard-bar-row .bar-fill { background:linear-gradient(90deg,#004a4a,#ffd1e2); box-shadow:0 0 12px rgba(151,221,232,.3); }
body[data-role-theme="reseller"] .dashboard-bar-row .bar-fill::after { border-color:#ffd1e2; }
body[data-role-theme="reseller"] .dashboard-bar-row .staff-fill { background:linear-gradient(90deg,#004a4a,#ffd1e2); }
body[data-role-theme="reseller"] .dashboard-bar-row .staff-fill::after { border-color:#ffd1e2; }
body[data-role-theme="reseller"] .sidebar { background:linear-gradient(180deg,#004a4a,#082026 68%); }

body[data-theme="light"][data-role-theme="owner"] .dashboard-hero { background:radial-gradient(ellipse at 78% 42%,rgba(0,212,255,.15),transparent 42%),linear-gradient(120deg,#f4fcff,#e0f5fb 65%,#f3faff); }
body[data-theme="light"][data-role-theme="reseller"] .dashboard-hero { background:radial-gradient(ellipse at 78% 42%,rgba(151,221,232,.14),transparent 42%),radial-gradient(ellipse at 12% 100%,rgba(255,209,226,.08),transparent 48%),linear-gradient(120deg,#fbf7ff,#f2eaff 65%,#fff7fb); }

/* Account profile and scoped audit log workspace. */
.profile-trigger { display:block; width:100%; padding:5px; color:inherit; text-align:left; background:transparent; border:1px solid transparent; border-radius:12px; cursor:pointer; transition:background .18s,border-color .18s,transform .18s; }
.profile-trigger:hover { transform:translateY(-1px); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 28%,transparent); }
.profile-trigger .me { padding:3px 2px 3px 1px; }
.profile-trigger .me-info { display:flex; flex:1; flex-direction:column; align-items:flex-start; gap:2px; overflow:hidden; text-align:left; }
.profile-trigger .me-name, .profile-trigger .me-role { display:block; width:100%; }
.profile-trigger .profile-chevron { margin-left:auto; color:var(--accent-2); font-size:22px; line-height:1; opacity:.45; transition:transform .18s,opacity .18s; }
.profile-trigger:hover .profile-chevron { transform:translateX(3px); opacity:1; }
.app-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:14px; }
.app-actions .btn { width:100%; min-width:0; justify-content:center; }
.app-actions .btn:disabled { cursor:not-allowed; opacity:.42; filter:saturate(.45); }
.app-route-warning { display:grid; gap:4px; margin:12px 0 4px; padding:11px 13px; border:1px solid color-mix(in srgb,var(--amber) 42%,var(--line)); border-radius:10px; background:color-mix(in srgb,var(--amber) 9%,var(--panel)); color:var(--text); font-size:12px; }
.app-route-warning b { color:var(--amber); font-size:12px; }
.app-route-warning span { color:var(--muted); }
body[data-role-theme="owner"] .app-route-warning { border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--panel)); }
body[data-role-theme="owner"] .app-route-warning b { color:var(--accent-2); }
body[data-role-theme="reseller"] .app-route-warning { border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); background:color-mix(in srgb,var(--accent) 8%,var(--panel)); }
body[data-role-theme="reseller"] .app-route-warning b { color:var(--accent-2); }
.profile-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 18px; }
.profile-heading h2 { margin-top:5px; font-size:24px; letter-spacing:-.5px; }
.profile-heading p { color:var(--muted); margin-top:4px; }
.profile-account-heading { margin:0 0 24px; }
.profile-security-heading { margin:30px 0 12px; }
.profile-role-mark { padding:8px 13px; border:1px solid color-mix(in srgb,var(--accent) 36%,var(--line)); border-radius:999px; color:var(--accent-2); background:var(--accent-soft); font-size:11px; font-weight:750; letter-spacing:.6px; text-transform:uppercase; }
.profile-grid { align-items:stretch; }
.profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.profile-summary { min-height:0; text-align:left; padding:24px 20px; }
.profile-summary-identity { display:flex; align-items:center; justify-content:center; gap:18px; min-height:72px; }
.profile-summary-name { min-width:0; text-align:left; }
.profile-avatar-wrap { position:relative; flex:0 0 92px; width:92px; height:92px; }
.profile-summary-icon { display:grid; flex:0 0 92px; width:92px; height:92px; margin:0; place-items:center; border:1px solid color-mix(in srgb,var(--accent-2) 52%,transparent); border-radius:50%; color:var(--bg); background:linear-gradient(145deg,var(--accent-2),var(--accent)); box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 24%,transparent); font-size:32px; font-weight:850; }
.profile-avatar-edit { position:absolute; inset:0; display:grid; place-items:center; border:0; border-radius:50%; color:#fff; background:rgba(0,0,0,.58); cursor:pointer; opacity:0; transition:opacity .16s; }
.profile-avatar-wrap:hover .profile-avatar-edit, .profile-avatar-wrap:focus-within .profile-avatar-edit { opacity:1; }
.profile-avatar-edit:focus-visible { outline:2px solid var(--accent-2); outline-offset:3px; }
.profile-avatar-edit svg { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.profile-summary-icon img, .avatar img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.profile-summary-icon.has-image, .avatar.has-image { overflow:hidden; padding:0; background:var(--panel-2); }
.profile-summary h3 { margin:0 0 8px; font-size:20px; text-transform:capitalize; }
.profile-details { display:grid; gap:0; margin-top:24px; text-align:left; }
.profile-details > div { display:flex; justify-content:space-between; gap:15px; padding:13px 2px; border-top:1px solid color-mix(in srgb,var(--accent) 15%,var(--line)); }
.profile-details dt { color:var(--muted); font-size:12px; }
.profile-details dd { color:var(--text); font-size:12px; font-weight:650; text-align:right; }
.profile-details dd { min-width:0; max-width:65%; overflow-wrap:anywhere; }
.profile-details dd.mono { white-space:normal; overflow-wrap:anywhere; }
.profile-password-form { max-width:520px; padding-top:17px; }
.profile-password-card .card-head { padding-bottom:14px; }
.profile-password-card .card-head h3 { font-size:15px; }
.profile-security-section { min-width:0; }
.profile-security-section .profile-two-factor { width:100%; }
.owner-reset-card { grid-column:1/-1; margin-top:0; border-color:color-mix(in srgb,#ef626f 34%,var(--line)); }
.owner-reset-card > .card-head { margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.owner-reset-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:0; }
.owner-reset-actions .btn { width:100%; min-width:0; height:48px; min-height:48px; white-space:normal; line-height:1.2; display:flex; align-items:center; justify-content:center; }
.owner-reset-actions .owner-delete-keys { white-space:normal; line-height:1.2; }
.owner-reset-actions .owner-delete-keys small { font-size:10px; }
.owner-reset-actions .owner-delete-accounts { white-space:normal; line-height:1.2; }
.owner-reset-actions .owner-reset-locked { cursor:not-allowed; opacity:.48; filter:saturate(.45); }
.owner-reset-actions .owner-reset-locked:hover { transform:none; box-shadow:none; }
.owner-bot-exit { margin-left:0; }
.owner-reset-note { margin-top:12px; padding:11px 13px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:color-mix(in srgb,var(--bg-2) 72%,transparent); font-size:12px; line-height:1.6; }
.owner-reset-note b { color:var(--text); }
.license-api-locked { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:13px; padding:13px 14px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--bg-2) 72%,transparent); }
.license-api-locked > div { min-width:0; }
.license-api-locked b { color:var(--text); font-size:13px; }
.license-api-locked .hint { margin-top:4px; }
.license-api-locked .btn { flex:0 0 auto; }
.license-api-form { margin-top:14px; padding:15px; border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line)); border-radius:11px; background:color-mix(in srgb,var(--accent) 4%,var(--panel)); }
.license-api-form .row { display:flex; flex-wrap:wrap; gap:8px; }
.license-api-status:empty { display:none; }
.official-server-note { margin-top:13px; padding:11px 13px; border-left:3px solid var(--accent); border-radius:0 9px 9px 0; background:color-mix(in srgb,var(--accent) 7%,var(--panel)); line-height:1.65; }
.create-key-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(260px,.8fr); align-items:stretch; gap:18px; }
.create-key-main,.create-key-guide { min-width:0; }
.create-key-main.no-usable-apps { position:relative; overflow:hidden; }
.create-key-main.no-usable-apps > :not(.select-application-overlay) { filter:blur(.8px); opacity:.9; pointer-events:none; user-select:none; }
.select-application-overlay { position:absolute; inset:0; z-index:5; display:grid; place-items:center; border-radius:inherit; background:rgba(5,7,18,.08); }
.select-application-overlay .btn { min-width:190px; }
.create-key-main-head { align-items:center; }
.create-key-main-title { flex:1 1 250px; min-width:220px; }
.trial-access-status { display:grid; grid-template-columns:auto minmax(150px,1fr) auto; align-items:center; gap:14px; flex:1 1 560px; max-width:740px; min-width:0; margin-left:auto; padding:11px 14px; border:1px solid color-mix(in srgb,var(--accent-2) 38%,var(--line)); border-radius:12px; background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),color-mix(in srgb,var(--accent-2) 7%,var(--panel-2))); }
.trial-access-status.is-full { border-color:color-mix(in srgb,var(--red) 52%,var(--line)); background:color-mix(in srgb,var(--red) 8%,var(--panel)); }
.trial-access-total { display:grid; grid-template-columns:auto auto; align-items:baseline; gap:1px 7px; white-space:nowrap; }
.trial-access-total > span:first-child { grid-column:1/-1; color:var(--accent-2); font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }
.trial-access-total strong { color:var(--text); font-size:21px; line-height:1.15; }
.trial-access-total strong small { color:var(--muted); font-size:13px; font-weight:650; }
.trial-access-total > span:last-child { color:var(--muted); font-size:10px; }
.trial-access-progress { min-width:0; }
.trial-access-track { height:7px; overflow:hidden; border-radius:999px; background:color-mix(in srgb,var(--line-2) 55%,var(--bg-2)); }
.trial-access-track > span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transition:width .2s ease; }
.trial-access-status.is-full .trial-access-track > span { background:var(--red); }
.trial-access-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; font-size:10.5px; }
.trial-access-meta b { color:var(--text); white-space:nowrap; }
.trial-access-meta > span { min-width:0; color:var(--muted); text-align:right; }
.trial-access-status > .btn { flex:0 0 auto; }
.create-key-guide { position:sticky; top:18px; }
.create-guide-step { display:grid; grid-template-columns:36px minmax(0,1fr); gap:9px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); }
.create-guide-step > span { display:grid; width:32px; height:32px; place-items:center; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius:9px; color:var(--accent-2); background:var(--accent-soft); font:750 11px ui-monospace,Consolas,monospace; }
.create-guide-step b { display:block; margin:1px 0 4px; font-size:13px; }
.create-guide-step p,.create-guide-note p { color:var(--muted); font-size:12px; line-height:1.55; }
.create-guide-note { margin-top:14px; padding:13px; border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line)); border-radius:10px; background:color-mix(in srgb,var(--accent) 5%,var(--panel)); }
.create-guide-note b { display:block; margin-bottom:5px; color:var(--text); font-size:12px; }
.create-guide-note code { color:var(--accent-2); }
.create-key-recent-logs { margin-top:14px; }
.create-key-recent-logs .card-head { margin-bottom:4px; }
.create-key-recent-logs .empty { padding:18px 10px; }
@media(max-width:1050px) { .create-key-layout { grid-template-columns:1fr; } .create-key-guide { position:static; } }
@media(max-width:760px) { .trial-access-status { grid-template-columns:auto minmax(0,1fr) auto; flex-basis:100%; max-width:none; margin-left:0; } }
@media(max-width:520px) { .trial-access-status { grid-template-columns:1fr; } .trial-access-total { grid-template-columns:auto auto; justify-content:start; } .trial-access-total > span:first-child { grid-column:1/-1; } .trial-access-meta { align-items:flex-start; flex-direction:column; gap:2px; } .trial-access-meta > span { text-align:left; } .trial-access-status > .btn { justify-self:start; } }
@media(max-width:760px) { .profile-grid { grid-template-columns:1fr; } .profile-summary { grid-row:auto; } .owner-reset-card { grid-column:auto; } }
@media(max-width:640px) { .license-api-locked { align-items:stretch; flex-direction:column; } .license-api-locked .btn { align-self:flex-start; } .owner-reset-actions { grid-template-columns:minmax(0,1fr); } .owner-reset-actions .btn { width:100%; } .owner-bot-exit { margin-left:0; } }
.logs-page .card-head { align-items:center; }
.logs-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:16px; }
.logs-column { min-width:0; }
.logs-column .card-head { align-items:flex-start; }
.logs-column .card-head h3 { font-size:16px; }
.logs-column .log-toolbar { align-items:stretch; flex-direction:column; }
.logs-column .log-toolbar input { width:100%; }
.logs-column .logs-table { min-width:600px; }
.log-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 12px; }
.log-toolbar input { width:min(100%,560px); }
.logs-table { min-width:760px; }
.logs-table td { vertical-align:top; }
.logs-table .log-detail { max-width:520px; color:var(--muted); white-space:normal; overflow-wrap:anywhere; }
.log-pager { display:flex; justify-content:center; align-items:center; gap:14px; margin-top:16px; }
body[data-role-theme="owner"] .profile-summary-icon { color:#edf5ff; }
body[data-role-theme="reseller"] .profile-summary-icon { color:#f5fbfc; }
body[data-theme="light"] .profile-summary-icon { color:#fff; }

/* Segmented one-time code entry, based on the supplied verification reference. */
.otp-cells { justify-content:center; gap:10px; }
.otp-cells .otp-cell,
.two-factor-login-form .otp-cells .otp-cell {
  flex:0 1 50px; width:50px; max-width:50px; height:52px; min-height:52px;
  border:1px solid color-mix(in srgb,var(--line-2) 80%,var(--muted));
  border-radius:13px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--panel-2) 76%,var(--bg-2)),color-mix(in srgb,var(--bg-2) 92%,var(--bg)));
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  font-size:20px; font-weight:650;
}
.otp-cells .otp-cell:hover { border-color:color-mix(in srgb,var(--accent-2) 48%,var(--line-2)); }
.otp-cells .otp-cell.is-filled { border-color:color-mix(in srgb,var(--accent) 48%,var(--line-2)); background:color-mix(in srgb,var(--accent) 8%,var(--bg-2)); }
.otp-cells .otp-cell:focus,
.two-factor-login-form .otp-cells .otp-cell:focus {
  transform:translateY(-2px); border-color:var(--accent-2) !important;
  background:color-mix(in srgb,var(--accent) 11%,var(--bg-2)) !important;
  box-shadow:0 0 0 3px var(--accent-soft),0 0 22px color-mix(in srgb,var(--accent) 20%,transparent) !important;
}
@media(max-width:520px) {
  .otp-cells { gap:7px; }
  .otp-cells .otp-cell,
  .two-factor-login-form .otp-cells .otp-cell { flex-basis:44px; width:44px; max-width:44px; height:48px; min-height:48px; font-size:18px; }
}

/* Unified Dark Elegant palette and full glass surfaces across every role dashboard. */
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) {
  --bg:#0a1a2f;
  --bg-2:#1f1f1f;
  --panel:rgba(18,34,54,.72);
  --panel-2:rgba(31,48,69,.68);
  --line:rgba(155,180,208,.2);
  --line-2:rgba(155,180,208,.36);
  --text:#f1f4f8;
  --muted:#aab7c6;
  --dim:#778798;
  --accent:#9bb4d0;
  --accent-2:#d7e4f5;
  --accent-soft:rgba(155,180,208,.16);
  --green:#9bb4d0;
  --green-soft:rgba(155,180,208,.16);
  --amber:#c2d1e2;
  --amber-soft:rgba(194,209,226,.16);
  --role-trim:#d7e4f5;
  --role-glow:rgba(155,180,208,.2);
}
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-hero,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-status,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .metric-card,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-panel,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-activity,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-paid-subscription {
  border:1px solid rgba(155,180,208,.24);
  background:linear-gradient(145deg,rgba(31,31,31,.48),rgba(10,26,47,.48));
  backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  box-shadow:0 20px 48px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.13);
}
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-hero {
  background:radial-gradient(ellipse at 78% 38%,rgba(155,180,208,.2),transparent 44%),linear-gradient(125deg,rgba(10,26,47,.62),rgba(31,31,31,.58));
}
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-status { background:linear-gradient(145deg,rgba(31,31,31,.46),rgba(10,26,47,.5)); }
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .metric-card { background:linear-gradient(145deg,rgba(31,31,31,.52),rgba(10,26,47,.58)); }
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-paid-subscription-details > div,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-bar-row .bar-track {
  border:1px solid rgba(155,180,208,.16);
  background:rgba(10,26,47,.36);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .metric-icon,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .status-icon,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .panel-mark {
  border-color:rgba(155,180,208,.24);
  background:rgba(155,180,208,.1);
  color:#d7e4f5;
}
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .btn-primary {
  color:#0a1a2f;
  border-color:rgba(215,228,245,.5);
  background:linear-gradient(125deg,#d7e4f5,#9bb4d0);
  box-shadow:0 8px 24px rgba(155,180,208,.18),inset 0 1px rgba(255,255,255,.5);
}
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-panel:hover,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-status:hover,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .metric-card:hover {
  border-color:rgba(215,228,245,.48);
  box-shadow:0 24px 52px rgba(0,0,0,.3),0 0 26px rgba(155,180,208,.12),inset 0 1px rgba(255,255,255,.16);
}
@media(prefers-reduced-transparency:reduce) {
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-hero,
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-status,
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .metric-card,
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-panel,
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-activity,
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-paid-subscription { backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Shared glass treatment for Owner, Admin, and Reseller dashboards. */
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-hero,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-status,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .metric-card,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-panel,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-activity,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-paid-subscription {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line-2));
  background-color: color-mix(in srgb, var(--panel) 68%, transparent);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 18px 42px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.09);
}
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-hero {
  background:
    radial-gradient(ellipse at 78% 42%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
    radial-gradient(ellipse at 14% 100%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 48%),
    linear-gradient(125deg, color-mix(in srgb, var(--panel-2) 72%, transparent), color-mix(in srgb, var(--bg-2) 76%, transparent));
}
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-status {
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 66%, transparent), color-mix(in srgb, var(--bg-2) 72%, transparent));
}
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .metric-card {
  background: linear-gradient(145deg, color-mix(in srgb, var(--panel-2) 74%, transparent), color-mix(in srgb, var(--bg-2) 78%, transparent));
}
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-paid-subscription-details > div {
  background: color-mix(in srgb, var(--panel-2) 58%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-hero:hover,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-status:hover,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .metric-card:hover,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-panel:hover,
body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-activity:hover {
  border-color: color-mix(in srgb, var(--accent-2) 50%, var(--line-2));
  box-shadow: 0 22px 48px rgba(0,0,0,.25), 0 0 25px color-mix(in srgb, var(--accent) 10%, transparent), inset 0 1px rgba(255,255,255,.12);
}
@media (prefers-reduced-transparency: reduce) {
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-hero,
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-status,
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .metric-card,
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-panel,
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-activity,
  body:is([data-role-theme="owner"], [data-role-theme="admin"], [data-role-theme="reseller"]) .dashboard-paid-subscription { backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Reseller palette: blush, ice cyan, and deep teal. */
body[data-role-theme="reseller"] {
  --bg:#082026;
  --bg-2:#004a4a;
  --panel:#0b2c32;
  --panel-2:#10404a;
  --line:#1d555c;
  --line-2:#397681;
  --text:#f5fbfc;
  --muted:#b7d4d8;
  --dim:#84aeb5;
  --accent:#97dde8;
  --accent-2:#ffd1e2;
  --accent-soft:rgba(151,221,232,.16);
  --green:#97dde8;
  --green-soft:rgba(151,221,232,.16);
  --amber:#ffd1e2;
  --amber-soft:rgba(255,209,226,.16);
  --role-trim:#ffd1e2;
  --role-glow:rgba(151,221,232,.24);
}
body[data-role-theme="reseller"] .sidebar { background:linear-gradient(180deg,#004a4a,#082026 72%); }
body[data-role-theme="reseller"] .dashboard-hero {
  border-color:rgba(151,221,232,.4);
  background:radial-gradient(ellipse at 78% 42%,rgba(151,221,232,.22),transparent 43%),radial-gradient(ellipse at 13% 100%,rgba(255,209,226,.16),transparent 48%),linear-gradient(125deg,#004a4a,#0b343a 55%,#082026);
  box-shadow:0 24px 60px rgba(0,0,0,.32),0 0 34px rgba(151,221,232,.12),inset 0 1px rgba(255,255,255,.09);
}
body[data-role-theme="reseller"] .dashboard-orb { background:radial-gradient(circle at 32% 25%,rgba(255,209,226,.52),rgba(151,221,232,.3) 42%,rgba(8,32,38,.34) 74%); box-shadow:inset 0 0 38px rgba(151,221,232,.2),0 0 62px rgba(151,221,232,.22); }
body[data-role-theme="reseller"] .orb-core { color:#082026; background:linear-gradient(145deg,#ffd1e2,#97dde8 68%,#004a4a); border-color:#ffd1e2; box-shadow:0 14px 35px rgba(151,221,232,.32),inset 0 2px 3px rgba(255,255,255,.48); }
body[data-role-theme="reseller"] .btn-primary { color:#082026; background:linear-gradient(120deg,#ffd1e2,#97dde8 58%,#5cbcc9); border-color:rgba(255,209,226,.72); }
body[data-role-theme="reseller"] .btn-primary:hover:not(:disabled) { filter:brightness(1.08); box-shadow:0 8px 24px rgba(151,221,232,.26),0 0 20px rgba(255,209,226,.16); }
body[data-role-theme="reseller"] [role="tablist"][aria-label="Access record type"] [data-key-tab].btn-primary:hover:not(:disabled) { background:linear-gradient(120deg,#ffe2ec,#a9e8ef 62%,#69c7d2); box-shadow:0 8px 22px rgba(151,221,232,.24),inset 0 1px rgba(255,255,255,.3); }
body[data-role-theme="reseller"] [role="tablist"][aria-label="Access record type"] [data-key-tab].btn-ghost:hover:not(:disabled) { color:#ffd1e2; background:linear-gradient(120deg,rgba(151,221,232,.18),rgba(255,209,226,.12)); border-color:rgba(151,221,232,.48); }
body[data-role-theme="reseller"] .btn-green,
body[data-role-theme="reseller"] .badge.green,
body[data-role-theme="reseller"] .pill.ok { color:#97dde8; background:rgba(151,221,232,.14); border-color:rgba(151,221,232,.46); }
body[data-role-theme="reseller"] .dashboard-bar-row .bar-fill,
body[data-role-theme="reseller"] .dashboard-bar-row .staff-fill { background:linear-gradient(90deg,#004a4a,#97dde8); box-shadow:0 0 12px rgba(151,221,232,.24); }
body[data-role-theme="reseller"] .dashboard-bar-row .bar-fill::after,
body[data-role-theme="reseller"] .dashboard-bar-row .staff-fill::after { border-color:#ffd1e2; }
body[data-role-theme="reseller"] .metric-card { background:linear-gradient(145deg,rgba(0,74,74,.76),rgba(8,32,38,.8)); }
body[data-role-theme="reseller"] .dashboard-status { background:linear-gradient(145deg,rgba(0,74,74,.62),rgba(8,32,38,.78)); }
body[data-role-theme="reseller"] .metric-icon,
body[data-role-theme="reseller"] .status-icon,
body[data-role-theme="reseller"] .activity-icon { color:#ffd1e2; border-color:rgba(151,221,232,.35); background:rgba(151,221,232,.1); }
body[data-role-theme="reseller"] .dashboard-paid-subscription-details > div { border-color:rgba(151,221,232,.24); background:rgba(0,74,74,.42); }
body[data-role-theme="reseller"] .create-mode-card { background:linear-gradient(145deg,#10404a,#082026); border-color:#1d555c; }
body[data-role-theme="reseller"] .create-mode-card::after { background:rgba(151,221,232,.16); }
body[data-role-theme="reseller"] .create-mode-card .mode-icon { color:#ffd1e2; }
body[data-role-theme="reseller"] .create-mode-card:hover:not(:disabled) { background:linear-gradient(145deg,#15545d,#0b343a); border-color:rgba(151,221,232,.6); box-shadow:0 20px 36px rgba(0,0,0,.25),0 0 22px rgba(151,221,232,.14); }
body[data-theme="light"][data-role-theme="reseller"] { background-image:radial-gradient(ellipse at 88% -12%,rgba(151,221,232,.2),transparent 38%),radial-gradient(ellipse at -10% 90%,rgba(255,209,226,.18),transparent 35%); }
body[data-theme="light"][data-role-theme="reseller"] .dashboard-hero { background:radial-gradient(ellipse at 78% 42%,rgba(151,221,232,.2),transparent 42%),radial-gradient(ellipse at 12% 100%,rgba(255,209,226,.18),transparent 48%),linear-gradient(120deg,#f1fcfd,#e2f8fa 65%,#fff2f7); }

@media(max-width:640px) { .profile-grid { grid-template-columns:1fr; } .profile-heading { align-items:flex-start; } .log-toolbar { align-items:stretch; flex-direction:column; } }
@media(max-width:1150px) { .logs-columns { grid-template-columns:1fr; } }
@media (max-width: 780px) { .card { padding: 16px; } .app-card:hover, .card:hover { transform: none; } }

/* ═══ Reseller Discord bot access ═══ */
.bot-access-hero { border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); }
.bot-access-details { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bot-detail { min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
.bot-detail > span, .bot-command-example > span { display:block; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; margin-bottom:7px; }
.bot-detail > strong { display:block; overflow-wrap:anywhere; }
.bot-detail > small { display:block; color:var(--dim); margin-top:6px; overflow-wrap:anywhere; }
.bot-detail .keycode { width:100%; justify-content:space-between; }
.bot-command-example { display:grid; grid-template-columns: minmax(130px, 220px) minmax(0,1fr); align-items:center; gap:10px 16px; padding:17px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); }
.bot-command-example > span { margin:0; }
.bot-command-example code { width:max-content; max-width:100%; padding:7px 11px; border:1px solid var(--line-2); border-radius:8px; background:var(--panel); color:var(--text); font:600 13px ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
.bot-command-example code.command-highlight { color:var(--accent-2); border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); }
.bot-command-example p { grid-column:1/-1; color:var(--muted); margin-top:3px; }
.bot-command-list { grid-column:1/-1; display:grid; gap:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.bot-command-list > div { display:grid; grid-template-columns:minmax(190px, 250px) minmax(0,1fr); align-items:center; gap:10px 16px; padding:10px 13px; border-bottom:1px solid var(--line); }
.bot-command-list > div:last-child { border-bottom:0; }
.bot-command-list code { width:max-content; }
.bot-command-list span { color:var(--muted); font-size:13px; }
.bot-command-list .staff-only { background:color-mix(in srgb,var(--accent) 5%,transparent); }
.bot-connect-grid { align-items:start; }
.bot-connect-code { margin:18px 0 12px; padding:16px; border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:12px; background:var(--bg-2); }
.bot-connect-code > span { display:block; margin-bottom:8px; color:var(--muted); font-size:10px; font-weight:750; letter-spacing:.08em; }
.bot-connect-code > code { display:inline-block; padding:9px 13px; border:1px solid var(--line-2); border-radius:8px; color:var(--accent-2); font:700 20px ui-monospace,Consolas,monospace; letter-spacing:.12em; }
.bot-connect-code p { margin:10px 0 0; color:var(--muted); font-size:12px; }
.bot-setup-steps { padding-left:23px; margin:2px 0 17px; color:var(--muted); }
.settings-right-column .bot-setup-steps { margin-top:14px; }
.bot-setup-steps li { padding-left:4px; margin-bottom:11px; }
.bot-setup-steps b { color:var(--text); }
.bot-server-id { margin-top:15px; display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:12px; }
.bot-server-id span { color:var(--text); font-family:ui-monospace,Consolas,monospace; }
.discord-guide { overflow:hidden; border:1px solid var(--line-2); border-radius:12px; background:#25272d; color:#f2f3f5; font-size:12px; }
.discord-guide-window { display:grid; grid-template-columns:minmax(105px,.8fr) minmax(150px,1.2fr); min-height:152px; }
.discord-guide-title { grid-column:1/-1; padding:9px 12px; border-bottom:1px solid #3b3d44; color:#b8bac1; font-size:9px; font-weight:800; letter-spacing:.1em; }
.discord-guide-row { padding:7px 10px; color:#b5bac1; border-right:1px solid #3b3d44; }
.discord-guide-row.active { color:#fff; background:#42454d; border-radius:5px; }
.discord-guide-row span { float:right; }
.discord-guide-main { padding:13px 11px; }
.discord-guide-main > strong { display:block; font-size:14px; margin-bottom:12px; }
.discord-guide-toggle { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px; background:#30323a; border-radius:7px; }
.discord-guide-toggle b,.discord-guide-toggle small { display:block; }
.discord-guide-toggle small { color:#b8bac1; font-size:9px; margin-top:3px; }
.discord-guide-toggle i { background:#248046; color:#fff; padding:4px 6px; border-radius:9px; font-size:9px; font-style:normal; font-weight:800; }
.discord-guide-caption { padding:9px 12px; border-top:1px solid #3b3d44; color:#b8bac1; }
.discord-guide-menu { display:flex; flex-wrap:wrap; gap:7px; padding:9px 12px 12px; background:#30323a; }
.discord-guide-menu span { padding:6px 8px; border-radius:5px; background:#42454d; color:#d8d9dc; }
.discord-guide-menu .copy-id { background:#5865f2; color:white; font-weight:700; }
.bot-access-form { max-width:560px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.bot-access-form .field { margin-bottom:12px; }
.bot-access-form.is-disabled { opacity:.55; }
.bot-access-status { min-height:20px; margin-top:12px; color:var(--accent-2); font-size:12.5px; }
.error-text { color:var(--red); }
@media(max-width:600px) { .bot-command-example { grid-template-columns:1fr; gap:6px; } .bot-command-example p { grid-column:auto; margin-top:8px; } .bot-command-list > div { grid-template-columns:1fr; gap:5px; } .discord-guide-window { grid-template-columns:1fr; } .discord-guide-row { display:none; } }
@media (max-width: 780px) { .brand { justify-content: center; padding-inline: 0; } .brand-copy { display: none; } .brand-logo { margin-inline: auto; } .nav-item { justify-content: center; padding-inline: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (prefers-reduced-motion: reduce) { .auth-bg { animation:none; } }

/* Application actions stay visually active and keep a stable click target. */
.app-card:hover { transform: none; }
.app-actions .btn, .exe-actions .btn { min-height: 40px; }
.app-actions .btn-ghost, .exe-actions .btn-ghost {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
}
.app-actions .btn-ghost:hover:not(:disabled), .exe-actions .btn-ghost:hover:not(:disabled) {
  color: var(--accent-2);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, var(--panel-2));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 15%, transparent);
}
.app-actions .btn:hover:not(:disabled), .exe-actions .btn:hover:not(:disabled) { transform: none; }
.app-actions .btn:active:not(:disabled), .exe-actions .btn:active:not(:disabled) { transform: scale(.985); }

/* Galaxy cursor; native cursors remain available as browser fallbacks. */
body { cursor: url("../assets/cyber-arrow.svg?v=electric-blue-pointer-20261008-1") 1 1, auto; }
a, button:not(:disabled), [role="button"], select, summary, input[type="checkbox"] {
  cursor: url("../assets/cyber-arrow.svg?v=electric-blue-pointer-20261008-1") 1 1, pointer;
}
button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
input:not([type="checkbox"]), textarea, [contenteditable="true"] {
  cursor: url("../assets/cyber-arrow.svg?v=electric-blue-pointer-20261008-1") 1 1, pointer;
}
@media (hover: none), (pointer: coarse) {
  body, a, button:not(:disabled), [role="button"], select, summary, input[type="checkbox"] { cursor: auto; }
  button:disabled, [aria-disabled="true"] { cursor: not-allowed; }
}

/* Keep the sidebar navigation vertical-only; hover movement must not create a
   horizontal scrollbar above the account controls. */
.sidebar, #nav { min-width: 0; overflow-x: hidden; }
#nav .nav-item { max-width: 100%; }
#nav .nav-item:hover { transform: none; }

/* Neon scrollbar theme for page and nested scroll regions. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb,var(--accent-2) 78%,var(--accent)) color-mix(in srgb,var(--bg-2) 82%,transparent);
}
html { scrollbar-gutter:stable; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line)); border-radius:999px; background:color-mix(in srgb,var(--bg-2) 90%,#050708); }
::-webkit-scrollbar-thumb {
  min-height:36px;
  border:3px solid transparent;
  border-radius:999px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent)) padding-box;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 55%,transparent),0 0 9px color-mix(in srgb,var(--accent) 52%,transparent);
}
::-webkit-scrollbar-thumb:hover {
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-2) 86%,white),var(--accent-2)) padding-box;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent-2) 80%,white),0 0 14px color-mix(in srgb,var(--accent-2) 72%,transparent);
}
::-webkit-scrollbar-thumb:active { background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 70%,black)) padding-box; }
::-webkit-scrollbar-corner { background:var(--bg); }
body[data-theme="light"] * { scrollbar-color:color-mix(in srgb,var(--accent) 70%,#68767c) #e8eeeb; }
body[data-theme="light"] ::-webkit-scrollbar-track { background:#e8eeeb; }

/* Assigned application dashboard for reseller and admin accounts. */
.assigned-apps-description { margin:0 0 10px; color:var(--muted); font-size:12px; line-height:1.4; }
.assigned-apps-intro { display:flex; align-items:center; min-height:58px; margin:0 0 10px; padding:14px 20px; border-color:color-mix(in srgb,var(--accent) 32%,var(--line)); }
.assigned-apps-intro p { margin:0; color:var(--text); font-size:15px; font-weight:650; line-height:1.4; }
.assigned-apps-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(290px,.8fr); align-items:start; gap:17px; }
.assigned-app-panels { display:grid; min-width:0; gap:17px; }
.assigned-app-panels > .card { min-width:0; }
.assigned-app-panels .assigned-all-apps { position:static; }
.assigned-countdown { display:inline-flex; flex:0 0 auto; align-items:center; padding:7px 10px; border:1px solid color-mix(in srgb,var(--accent-2) 45%,var(--line)); border-radius:999px; color:var(--accent-2); background:color-mix(in srgb,var(--accent) 10%,var(--panel)); font-family:ui-monospace,Consolas,monospace; font-size:12px; font-weight:800; white-space:nowrap; }
.assigned-panel-status { display:grid; justify-items:end; gap:7px; }
.assigned-panel-time-label { margin:10px 0 0; }
.assigned-my-apps,.assigned-all-apps { min-width:0; }
.assigned-all-apps { position:sticky; top:18px; }
.assigned-app-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.assigned-app-card { min-width:0; padding:16px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 4%,var(--panel)),var(--panel)); }
.assigned-app-title { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-width:0; padding-bottom:13px; border-bottom:1px solid var(--line); }
.assigned-app-title h4 { flex:1 1 140px; min-width:0; margin:0; overflow-wrap:anywhere; word-break:normal; font-size:15px; }
.assigned-app-title .badge { margin-left:auto; flex:0 0 auto; }
.assigned-app-title .assigned-key-count { margin-left:auto; }
.assigned-app-title .assigned-key-count + .badge { margin-left:0; }
.assigned-app-title > .badge { margin-left:0; white-space:nowrap; }
.assigned-app-icon { display:grid; flex:0 0 34px; width:34px; height:34px; place-items:center; border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:10px; color:var(--accent-2); background:var(--accent-soft); }
.assigned-app-details { display:grid; margin:7px 0 0; }
.assigned-app-details > div { display:grid; grid-template-columns:minmax(120px,.65fr) minmax(0,1fr); align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.assigned-app-details > div:last-child { border-bottom:0; }
.assigned-app-details dt { color:var(--muted); font-size:12px; }
.assigned-app-details dd { min-width:0; margin:0; color:var(--text); font-size:12px; font-weight:650; overflow-wrap:anywhere; }
.assigned-secret-row dd { display:flex; gap:8px; align-items:center; }
.assigned-secret-row input { flex:1; width:100%; min-width:0; height:34px; padding:6px 9px; font-size:11px; }
.assigned-secret-row .btn { flex:0 0 36px; width:36px; min-height:34px; padding:0; justify-content:center; }
.assigned-choice-list { display:grid; gap:7px; max-height:520px; overflow:auto; padding-right:3px; }
.assigned-choice { display:flex; align-items:center; gap:11px; min-height:45px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--bg-2) 66%,transparent); cursor:pointer; transition:border-color .16s,background .16s,box-shadow .16s; }
.assigned-choice:hover { border-color:color-mix(in srgb,var(--accent-2) 52%,var(--line)); background:color-mix(in srgb,var(--accent) 6%,var(--panel)); }
.assigned-choice { position:relative; }
.assigned-choice-readonly { cursor:default; }
.assigned-choice-readonly:hover { border-color:var(--line); background:color-mix(in srgb,var(--bg-2) 66%,transparent); }
.assigned-choice-locked { opacity:.72; cursor:pointer; }
.assigned-choice-locked:hover { border-color:var(--line); background:color-mix(in srgb,var(--bg-2) 66%,transparent); }
.assigned-choice-locked input[type="checkbox"] { cursor:pointer; filter:grayscale(1); }
.assigned-choice:has(input:checked) { border:2px solid #22d3ee; background:linear-gradient(105deg,rgba(34,211,238,.16),rgba(34,211,238,.055)); box-shadow:inset 4px 0 #22d3ee,0 0 0 1px rgba(34,211,238,.32),0 0 22px rgba(34,211,238,.22); }
.assigned-choice input[type="checkbox"] { appearance:none; -webkit-appearance:none; display:grid; flex:0 0 18px; width:18px; height:18px; place-content:center; margin:0; border:1.5px solid #71838a; border-radius:5px; background:linear-gradient(145deg,#12191d,#0b1013); box-shadow:inset 0 1px 2px rgba(0,0,0,.4); cursor:pointer; transition:background .16s,border-color .16s,box-shadow .16s,transform .16s; }
.assigned-choice input[type="checkbox"]::before { content:""; width:9px; height:5px; border:solid #07130f; border-width:0 0 2px 2px; transform:translateY(-1px) rotate(-45deg) scale(0); transition:transform .16s cubic-bezier(.2,.8,.25,1.25); }
.assigned-choice input[type="checkbox"]:checked { border-color:#a5f3fc; background:#22d3ee; box-shadow:0 0 0 3px rgba(34,211,238,.2),0 0 14px rgba(34,211,238,.55); }
.assigned-choice input[type="checkbox"]:checked::before { transform:translateY(-1px) rotate(-45deg) scale(1); }
.assigned-choice.is-selection-pulse input[type="checkbox"]:checked::before { animation:assigned-check-pop .2s cubic-bezier(.2,.8,.25,1.3) both; }
.assigned-choice.is-selection-pulse { animation:assigned-row-pulse .38s ease-out both; }
@keyframes assigned-check-pop { 0% { opacity:0; transform:translateY(-1px) rotate(-45deg) scale(.35); } 72% { opacity:1; transform:translateY(-1px) rotate(-45deg) scale(1.18); } 100% { opacity:1; transform:translateY(-1px) rotate(-45deg) scale(1); } }
@keyframes assigned-row-pulse { 0% { transform:scale(1); box-shadow:inset 3px 0 color-mix(in srgb,var(--accent) 78%,transparent),0 0 0 color-mix(in srgb,var(--accent) 0%,transparent); } 42% { transform:scale(1.012); box-shadow:inset 3px 0 color-mix(in srgb,var(--accent) 78%,transparent),0 0 18px color-mix(in srgb,var(--accent) 30%,transparent); } 100% { transform:scale(1); box-shadow:inset 3px 0 color-mix(in srgb,var(--accent) 78%,transparent),0 0 16px color-mix(in srgb,var(--accent) 9%,transparent); } }
.assigned-choice input[type="checkbox"]:focus-visible { outline:3px solid color-mix(in srgb,var(--accent-2) 62%,transparent); outline-offset:3px; }
.assigned-choice:active input[type="checkbox"] { transform:scale(.92); }
@media(prefers-reduced-motion:reduce) { .assigned-choice,.assigned-choice input[type="checkbox"],.assigned-choice input[type="checkbox"]::before { animation:none !important; transition:none !important; } }
.assigned-choice-name { flex:1; min-width:0; color:var(--text); font-size:13px; font-weight:650; overflow-wrap:anywhere; }
.assigned-unlock-badge { flex:0 0 auto; margin-left:auto; color:var(--warning,#f5b942); white-space:nowrap; }
.assigned-app-save { display:grid; gap:11px; margin-top:15px; padding-top:14px; border-top:1px solid var(--line); }
.assigned-app-save .hint { line-height:1.5; }
.assigned-app-save .btn { justify-self:start; }
.assigned-app-empty { display:grid; justify-items:center; gap:8px; min-height:200px; padding:28px 18px; align-content:center; border:1px dashed var(--line-2); border-radius:12px; text-align:center; }
.assigned-app-empty > span { color:var(--accent-2); font-size:25px; }
.assigned-app-empty b { font-size:14px; }
.assigned-app-empty p { color:var(--muted); font-size:12px; }
@media(max-width:920px) { .assigned-apps-layout { grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr); } }
@media(max-width:740px) { .assigned-apps-layout { grid-template-columns:1fr; } .assigned-apps-layout > .assigned-app-panels { grid-row:1; } .assigned-app-panels .assigned-all-apps { position:static; } }
@media(max-width:1100px) { .assigned-app-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .assigned-app-list { grid-template-columns:1fr; } }
@media(max-width:460px) { .assigned-app-details > div { grid-template-columns:1fr; gap:6px; } }
@media(max-width:780px) {
  /* Give the application name a full line beside its icon; let count/status
     badges flow beneath it instead of squeezing the name to one character. */
  .assigned-app-title h4 { flex:1 1 calc(100% - 44px); }
  .assigned-app-title > .badge { margin-left:0; }
  /* Center mobile notifications in the usable area to the right of the
     collapsed icon sidebar and keep them inside the visible viewport. */
  .toast { left:calc(50% + 31px); bottom:calc(18px + env(safe-area-inset-bottom, 0px)); max-width:calc(100vw - 92px); box-sizing:border-box; text-align:center; }
}

/* Credential fields use compact copyable blocks, matching the account detail reference. */
.assigned-app-values { display:grid; gap:9px; padding-top:12px; }
.assigned-app-value { min-width:0; padding:9px 11px 10px 13px; border:1px solid color-mix(in srgb,var(--line) 78%,transparent); border-left:3px solid color-mix(in srgb,var(--accent) 58%,var(--line)); border-radius:9px; background:color-mix(in srgb,var(--bg-2) 76%,var(--panel)); }
.assigned-app-value-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:20px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.09em; }
.assigned-app-value-text { min-width:0; margin-top:3px; color:var(--text); font-size:13px; font-weight:700; overflow-wrap:anywhere; }
.assigned-app-value-text.mono { font-family:ui-monospace,Consolas,monospace; font-size:12px; }
.assigned-copy { display:grid; flex:0 0 26px; width:26px; height:26px; place-items:center; padding:0; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:17px; cursor:pointer; }
.assigned-copy:hover:not(:disabled) { color:var(--accent-2); background:color-mix(in srgb,var(--accent) 13%,transparent); }
.assigned-copy:disabled { opacity:.35; cursor:not-allowed; }
.assigned-app-value-actions { display:flex; gap:4px; }
.assigned-secret-value { display:flex; min-width:0; align-items:center; }
.assigned-secret-value input { min-width:0; flex:1; width:100%; height:23px; padding:0; border:0; outline:0; background:transparent; color:var(--text); font-family:ui-monospace,Consolas,monospace; font-size:12px; font-weight:700; }
.assigned-secret-value input:focus { box-shadow:none; }
.assigned-obscured { filter:blur(3px); }
.credential-not-configured { color:var(--dim) !important; font-family:inherit !important; font-size:11px !important; font-weight:500 !important; }
.connection-result { display:flex; align-items:center; gap:13px; margin:2px 0 13px; }
.connection-result-icon { display:grid; width:42px; height:42px; flex:0 0 42px; place-items:center; border:1px solid color-mix(in srgb,var(--green) 40%,var(--line)); border-radius:13px; background:color-mix(in srgb,var(--green) 12%,var(--panel)); color:var(--green); font-size:22px; font-weight:800; }
.connection-result h3 { margin:3px 0 0; }
.owner-app-credentials { display:grid; gap:8px; margin:11px 0 13px; }
.owner-app-credential { min-width:0; padding:8px 10px 9px 12px; border:1px solid var(--line); border-left:3px solid color-mix(in srgb,var(--accent) 58%,var(--line)); border-radius:9px; background:color-mix(in srgb,var(--bg-2) 76%,var(--panel)); }
.owner-app-credential-head { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.09em; }
.owner-app-credential-value { margin-top:3px; color:var(--text); font-size:12px; font-weight:700; overflow-wrap:anywhere; }

/* Reseller-only plan and billing screen */
.billing-hero { max-width:1080px; margin-inline:auto; padding:clamp(18px,3vw,30px); }
.billing-hero > .card-head { align-items:flex-start; margin-bottom:20px; }
.billing-hero > .card-head h3 { font-size:clamp(18px,2.2vw,24px); }
.billing-payment-info { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.85fr); align-items:center; gap:20px; margin-bottom:16px; }
.billing-payment-contact { min-width:0; }
.billing-fee-callout { display:flex; min-height:72px; align-items:center; justify-content:center; padding:16px 20px; border:1px solid color-mix(in srgb,var(--accent-2) 60%,var(--line)); border-radius:12px; color:var(--text); background:color-mix(in srgb,var(--accent) 12%,var(--bg-2)); box-shadow:0 0 20px color-mix(in srgb,var(--accent-2) 14%,transparent); text-align:center; }
.billing-fee-callout strong { color:var(--accent-2); font-size:clamp(13px,1.4vw,16px); font-weight:800; letter-spacing:.02em; }
.billing-phone { max-width:440px; margin:0 0 18px; }
.billing-checkout-status { width:min(100%,440px); min-height:1.5em; margin:8px 0 14px; text-align:center; line-height:1.45; }
.billing-checkout-status[data-state="loading"]::before { content:""; display:inline-block; width:12px; height:12px; margin-right:8px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; vertical-align:-2px; animation:billing-checkout-spin .7s linear infinite; }
.billing-checkout-status[data-state="error"] { color:var(--red); }
@keyframes billing-checkout-spin { to { transform:rotate(360deg); } }
.billing-plans { gap:14px; }
.billing-plans-trial { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.billing-plans-paid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.billing-plan { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:21px; border-color:color-mix(in srgb,var(--accent) 20%,var(--line)); }
.billing-plan h4 { margin:8px 0 0; font-size:18px; }
.billing-plan .billing-price { margin-top:12px; color:var(--text); font-size:30px; font-weight:800; letter-spacing:-.04em; }
.billing-price small { color:var(--muted); font-size:12px; font-weight:500; letter-spacing:0; }
.billing-plan .billing-fee-breakdown { flex:0; margin:4px 0 8px; color:var(--muted); font-size:12px; line-height:1.5; }
.billing-plan .billing-fee-breakdown strong { color:var(--text); font-weight:800; }
.billing-plan p { flex:1; margin:10px 0 18px; color:var(--muted); font-size:13px; line-height:1.6; }
.billing-features { width:100%; margin:12px 0 2px; border-collapse:collapse; color:var(--text); font-size:12px; }
.billing-features th,.billing-features td { padding:6px 4px; border-bottom:1px solid var(--line); text-align:left; }
.billing-features thead th { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.04em; }
.billing-features tbody th { font-weight:600; }
.billing-features td { width:58px; text-align:center; }
.billing-feature-mark { display:inline-grid; width:21px; height:21px; place-items:center; border-radius:50%; font-size:14px; font-weight:800; }
.billing-feature-mark.included { color:var(--green); background:color-mix(in srgb,var(--green) 12%,transparent); }
.billing-feature-mark.excluded { color:var(--muted); background:color-mix(in srgb,var(--muted) 10%,transparent); }
.billing-trial-plan { border-color:color-mix(in srgb,var(--muted) 30%,var(--line)); }
.billing-cycle-field { display:grid; gap:6px; width:100%; margin-top:12px; color:var(--muted); font-size:12px; }
.billing-cycle-field select { width:100%; }
.billing-cycle-field select:invalid, .billing-cycle-field select option { color:var(--text); }
.billing-plan .billing-proration-note { flex:0; margin:8px 0 0; }
.billing-confirm-dialog .modal-sub { margin:6px 0 16px; }
.billing-confirm-note { margin:0 0 14px; padding:10px 12px; border:1px solid color-mix(in srgb,var(--accent-2) 38%,var(--line)); border-radius:10px; color:var(--text); background:color-mix(in srgb,var(--accent-2) 9%,var(--panel)); font-size:12px; line-height:1.5; }
.billing-confirm-breakdown { display:grid; gap:0; margin:0; padding:10px 14px; border:1px solid var(--line); border-radius:12px; background:var(--bg-2); }
.billing-confirm-breakdown > div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent); }
.billing-confirm-breakdown > div:last-child { border-bottom:0; }
.billing-confirm-breakdown dt { color:var(--muted); font-size:13px; }
.billing-confirm-breakdown dd { margin:0; color:var(--text); font-size:13px; font-weight:650; font-variant-numeric:tabular-nums; }
.billing-confirm-breakdown .billing-confirm-total { margin-top:2px; padding-top:13px; border-top:1px solid var(--line-2); }
.billing-confirm-breakdown .billing-confirm-total dt,.billing-confirm-breakdown .billing-confirm-total dd { color:var(--accent-2); font-size:15px; font-weight:800; }
.billing-confirm-status { min-height:1.3em; margin:12px 0 0; color:var(--muted); font-size:12px; line-height:1.45; }
.billing-confirm-dialog [data-billing-continue]:disabled { opacity:.62; cursor:wait; }
.billing-plan .billing-next-plan { flex:0; }
.billing-plan-premium { border-color:color-mix(in srgb,var(--accent) 46%,var(--line)); box-shadow:0 12px 34px color-mix(in srgb,var(--accent) 10%,transparent); }
.billing-plan.is-current-plan { position:relative; border:2px solid var(--accent-2); filter:drop-shadow(0 0 9px color-mix(in srgb,var(--accent-2) 55%,transparent)) drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 34%,transparent)); animation:current-plan-border 2.8s ease-in-out infinite; }
.billing-plan.is-current-plan:hover { border-color:var(--accent-2); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 52%,transparent),0 0 30px color-mix(in srgb,var(--accent) 28%,transparent),inset 0 0 24px color-mix(in srgb,var(--accent) 8%,transparent); }
@keyframes current-plan-border { 0%,100% { border-color:color-mix(in srgb,var(--accent-2) 72%,var(--line)); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 26%,transparent),0 0 18px color-mix(in srgb,var(--accent) 16%,transparent),inset 0 0 18px color-mix(in srgb,var(--accent) 5%,transparent); } 50% { border-color:var(--accent-2); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 58%,transparent),0 0 32px color-mix(in srgb,var(--accent) 30%,transparent),inset 0 0 24px color-mix(in srgb,var(--accent) 9%,transparent); } }
.billing-payment-status { margin:0 0 15px; padding:11px 13px; border:1px solid var(--line); border-radius:9px; color:var(--text); background:var(--bg-2); }
@media(max-width:900px) { .billing-plans-trial,.billing-plans-paid { grid-template-columns:1fr; } }
@media(max-width:700px) { .billing-payment-info { grid-template-columns:1fr; gap:8px; } .billing-fee-callout { min-height:58px; } }
@media(max-width:560px) { .billing-plan { min-height:0; padding:16px; } .billing-plan .btn { width:100%; } }
@media(prefers-reduced-motion:reduce) { .billing-plan.is-current-plan { animation:none; border-color:var(--accent-2); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-2) 52%,transparent),0 0 28px color-mix(in srgb,var(--accent) 26%,transparent); filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent-2) 58%,transparent)) drop-shadow(0 0 24px color-mix(in srgb,var(--accent) 38%,transparent)); } }

/* Compact page density for standard 100% desktop scaling and short browser viewports. */
@media(min-width:1000px) and (max-height:1000px) {
  .topbar { height:56px; }
  .content { padding:14px 20px 28px; }
  .assigned-apps-intro { min-height:48px; margin-bottom:8px; padding:10px 15px; }
  .assigned-apps-layout { grid-template-columns:minmax(0,1.4fr) minmax(290px,.8fr); gap:12px; }
  .assigned-app-panels { grid-template-columns:minmax(0,1fr); gap:12px; }
  .assigned-apps-layout .card { padding:15px; }
  .assigned-app-list { gap:9px; }
  .assigned-app-card { padding:12px; }
  .assigned-app-details > div { padding:7px 0; }
  .assigned-choice-list { max-height:min(380px,calc(100vh - 500px)); }
  .billing-hero { max-width:none; padding:16px; }
  .billing-hero > .card-head { margin-bottom:10px; }
  .billing-payment-info { margin-bottom:8px; gap:14px; }
  .billing-fee-callout { min-height:54px; padding:10px 14px; }
  .billing-phone { margin-bottom:7px; }
  .billing-checkout-status { min-height:1em; margin:4px 0 8px; }
  .billing-plans-trial,.billing-plans-paid { gap:10px; }
  .billing-plan { padding:14px; }
  .billing-plan h4 { margin-top:5px; }
  .billing-plan .billing-price { margin-top:7px; font-size:26px; }
  .billing-plan .billing-fee-breakdown { margin:2px 0 5px; font-size:11px; }
  .billing-features { margin-top:8px; font-size:11px; }
  .billing-features th,.billing-features td { padding:4px; }
  .billing-feature-mark { width:18px; height:18px; font-size:12px; }
  .billing-cycle-field { gap:4px; margin-top:8px; }
  .billing-plan p { margin:7px 0 10px; font-size:12px; line-height:1.4; }
  .billing-plan .btn { min-height:38px; }
}

/* Owner applications: use four columns on wide screens with responsive collapse. */
.application-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; }
.applications-intro-card { padding:12px 20px; margin-bottom:10px; }
.applications-intro-card .card-head { align-items:center; margin:0; padding:0; border:0; }
.applications-intro-card .card-head p { margin:0; }
.application-grid > .app-card { display:flex; min-width:0; height:100%; flex-direction:column; }
.application-grid .app-head { min-height:56px; }
.application-grid .app-actions { margin-top:auto; }
.app-meta .app-connection-badge { margin-left:auto; }
.app-actions-keyauth { grid-template-columns:repeat(3,minmax(0,1fr)); }
.app-actions-keyauth .app-action-connected { display:flex; align-items:center; justify-content:center; min-width:0; min-height:40px; padding:5px 7px; border-radius:9px; font-size:11px; white-space:nowrap; }
.app-head { align-items: flex-start; }
.app-head-main { flex:1; min-width:0; }
.app-title-row { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.app-title-row .app-name { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-badges { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:6px; }
.app-head-actions { display:flex; flex:0 0 auto; align-items:flex-start; }
.app-key-count { margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
.app-key-count b { color:var(--text); font-weight:700; }
.trial-app-card { border-color: rgba(0, 217, 184, .48); background: linear-gradient(145deg, rgba(13, 43, 43, .98), rgba(12, 25, 31, .98)); box-shadow: 0 12px 34px rgba(0, 201, 170, .11), inset 0 1px rgba(158, 255, 233, .08); }
.trial-app-card:hover { border-color: rgba(69, 255, 219, .7); box-shadow: 0 18px 40px rgba(0, 201, 170, .17), 0 0 22px rgba(0, 201, 170, .09); }
.trial-app-card .owner-app-credential { border-left-color: #00d9b8; }
.trial-app-badge { color: #8fffea; border-color: rgba(0, 217, 184, .4); background: rgba(0, 217, 184, .12); }
.assigned-trial-app { border-color: rgba(0, 217, 184, .48); background: linear-gradient(145deg, rgba(13, 43, 43, .82), rgba(12, 25, 31, .92)); box-shadow: 0 10px 28px rgba(0, 201, 170, .08); }
.assigned-trial-app .assigned-app-value { border-left-color: #00d9b8; }
.assigned-trial-choice { border-color: rgba(0, 217, 184, .38) !important; background: rgba(0, 217, 184, .07) !important; }
.assigned-trial-choice .assigned-choice-name { color: #8fffea; }
@media(max-width:1050px) { .application-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width:640px) { .application-grid { grid-template-columns: minmax(0, 1fr); } }

/* Six-cell authenticator entry with paste and one-time-code autofill support. */
.otp-field { min-width:0; }
.otp-cells { display:flex; align-items:center; gap:9px; width:100%; }
.otp-cells .otp-cell { flex:1 1 0; width:100%; min-width:0; max-width:52px; height:48px; min-height:48px; padding:0; border:1px solid var(--line-2); border-radius:11px; background:linear-gradient(155deg,var(--bg-2),color-mix(in srgb,var(--panel) 75%,var(--bg))); color:var(--text); font-size:18px; font-weight:700; font-variant-numeric:tabular-nums; text-align:center; }
.otp-cells .otp-cell:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft),0 0 18px color-mix(in srgb,var(--accent) 15%,transparent); }
.otp-value { display:none !important; }
.two-factor-login-form .field { margin-bottom:12px; }
.two-factor-login-form .two-factor-hint { margin:0 0 14px; color:var(--text); font-size:12.5px; line-height:1.55; }
.two-factor-login-form > .btn-block { display:flex; width:100%; justify-content:center; margin:0 0 9px; }
.two-factor-login-form #two-factor-cancel { display:inline-block; margin:0; padding:3px 0; line-height:1.5; }
.two-factor-login-form .auth-error { margin:10px 0 0; }
.trial-app-reauth { margin-top:12px; padding:13px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--bg-2) 82%,var(--panel)); }
.trial-app-reauth .field { margin-bottom:10px; }
.trial-app-reauth .row { gap:9px; }
.trial-app-select-row { align-items:stretch; gap:9px; }
.trial-app-select-row select { min-width:0; flex:1; }
.trial-app-select-row .btn { flex:0 0 auto; }
.settings-category-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:18px; padding-top:18px; }
.settings-controls-card > .card-head { margin-bottom:0; padding-bottom:8px; }
.settings-controls-card .settings-category-grid { padding-top:16px; }
.settings-category-column { display:flex; flex-direction:column; gap:18px; min-width:0; }
.automatic-logout-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.automatic-logout-row label { color:var(--text); font-size:12px; font-weight:650; }
.automatic-logout-value { display:flex; align-items:center; gap:8px; flex:0 0 auto; color:var(--muted); font-size:12px; font-weight:650; }
.automatic-logout-value input { flex:0 1 84px; width:84px; min-width:72px; margin:0; }
.settings-category { min-width:0; padding:18px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 68%,transparent),color-mix(in srgb,var(--bg-2) 80%,transparent)); }
.settings-category-heading { margin-bottom:16px; padding-bottom:11px; border-bottom:1px solid var(--line); }
.settings-category-heading h4 { color:var(--text); font-size:13px; font-weight:750; }
.settings-category-heading p { margin-top:3px; color:var(--muted); font-size:11.5px; line-height:1.45; }
.settings-category .field:last-child { margin-bottom:0; }
.settings-left-column,.settings-right-column { display:flex; flex-direction:column; gap:18px; min-width:0; }
.settings-left-column > .settings-controls-card,.settings-right-column > .card { margin-bottom:0; }
.settings-controls-card { padding-bottom:30px; }
.owner-reset-card { min-height:154px; margin-bottom:0; }
.reseller-trial-card { min-height:192px; margin-bottom:0; }
.owner-subscription-grant { container: owner-subscription-card / inline-size; }
.owner-subscription-grant input[name="username"] { max-width:none; }
.owner-subscription-plan-field { max-width:none; }
.owner-subscription-plan-row { display:grid; grid-template-columns:minmax(0,300px) auto; justify-content:start; gap:16px; align-items:end; }
.owner-subscription-plan-row > .field { margin-bottom:14px; }
.owner-subscription-plan-row > button { justify-self:start; max-width:100%; margin-bottom:14px; white-space:normal; }
.owner-subscription-auth-enable { max-width:48%; color:var(--red); font-size:12px; font-weight:700; white-space:normal; text-align:right; }
.owner-subscription-auth-enable:hover { color:var(--red); }
@container owner-subscription-card (max-width:520px) {
  .owner-subscription-top-row,.owner-subscription-plan-row { grid-template-columns:minmax(0,1fr); gap:0; }
  .owner-subscription-plan-row > .field { max-width:none; }
  .owner-subscription-plan-row > button { justify-self:stretch; width:100%; }
  .owner-subscription-grant > .card-head { align-items:flex-start; flex-wrap:wrap; }
  .owner-subscription-auth-enable { max-width:100%; text-align:left; }
}
.reseller-trial-security-card { margin-bottom:0; }
.bot-video-settings-card { margin-bottom:0; }
.bot-video-settings-card > video,.bot-activation-tutorial > video { display:block; width:100%; max-height:460px; aspect-ratio:16/9; margin:0 0 12px; border:1px solid var(--line); border-radius:10px; background:#080c18; object-fit:contain; }
.bot-video-settings-actions { gap:8px; flex-wrap:wrap; }
.bot-activation-tutorial { width:100%; }
.bot-activation-tutorial > video { max-height:600px; margin-bottom:0; }
.reseller-trial-security-message { display:flex; align-items:center; min-height:92px; margin:0; padding:14px; border:1px solid color-mix(in srgb,var(--red) 38%,var(--line-2)); border-radius:var(--radius-sm); background:var(--bg-2); color:var(--red); font-size:13px; line-height:1.5; }
.reseller-trial-security-message.is-enabled { border-color:color-mix(in srgb,var(--green) 38%,var(--line-2)); color:var(--green); }
.settings-category-grid > button[type="submit"], .settings-category-grid > p { grid-column:1 / -1; justify-self:start; }
@media(max-width:680px) { .settings-category-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:380px) { .otp-cells { gap:6px; } .otp-cells .otp-cell { height:43px; min-height:43px; border-radius:9px; font-size:16px; } }

/* Neon Brights sign-in palette inspired by the reseller login reference. */
body[data-role-theme="auth"] {
  --accent: #f01887;
  --accent-2: #ff55b0;
  --accent-soft: rgba(240,24,135,.16);
  --line: #38213f;
  --line-2: #5a2d62;
  --panel: #160d1d;
  --panel-2: #211129;
  --bg-2: #100817;
  --text: #fff4fc;
  --muted: #c3a9c4;
  --dim: #906f95;
}
body[data-role-theme="auth"] .auth-bg { background:
  radial-gradient(ellipse at 15% 24%, rgba(239,24,135,.32), transparent 37%),
  radial-gradient(ellipse at 76% 18%, rgba(126,22,190,.28), transparent 42%),
  radial-gradient(ellipse at 83% 82%, rgba(209,24,123,.19), transparent 38%),
  linear-gradient(135deg,#08040d,#13071c 52%,#09040f); }
body[data-role-theme="auth"] .auth-card {
  border:1px solid rgba(255,68,174,.55);
  background:linear-gradient(148deg,rgba(25,9,31,.97),rgba(11,5,17,.98) 74%);
  box-shadow:0 34px 100px rgba(0,0,0,.72),0 0 45px rgba(240,24,135,.13),inset 0 1px rgba(255,255,255,.07);
}
body[data-role-theme="auth"] .auth-card::before { background:linear-gradient(90deg,transparent,#a71bce,#ff38a2,transparent); }
body[data-role-theme="auth"] .auth-logo {
  color:#fff5fc;
  background:linear-gradient(145deg,#a91ed0,#f01887 58%,#ff66b8);
  border-color:rgba(255,93,186,.82);
  box-shadow:0 12px 32px rgba(240,24,135,.35),0 0 0 5px rgba(213,43,156,.09),inset 0 1px rgba(255,255,255,.46);
}
body[data-role-theme="auth"] .auth-title { color:#fff5fc; text-shadow:0 0 24px rgba(255,61,170,.24); }
body[data-role-theme="auth"] .brand-subtitle { color:#ff70bd; }
body[data-role-theme="auth"] .auth-card input:not([type="checkbox"]) {
  color:#fff4fc; border-color:#4b3151; background:rgba(7,5,11,.82);
}
body[data-role-theme="auth"] .auth-card input:not([type="checkbox"]):focus { border-color:#f43a9b !important; box-shadow:0 0 0 3px rgba(240,24,135,.14); }
body[data-role-theme="auth"] .auth-card .btn-primary {
  color:#fff; border-color:rgba(255,108,190,.7);
  background:linear-gradient(110deg,#a417c4,#ed1687 58%,#ff438f);
  box-shadow:0 7px 22px rgba(240,24,135,.27);
}
body[data-role-theme="auth"] .auth-card .btn-primary:hover:not(:disabled) { filter:brightness(1.14); box-shadow:0 8px 28px rgba(240,24,135,.39); }
body[data-role-theme="auth"] .auth-card .link-btn,
body[data-role-theme="auth"] .auth-card a { color:#ff66b4; }
body[data-role-theme="auth"] .social-login-divider::before,
body[data-role-theme="auth"] .social-login-divider::after { background:linear-gradient(90deg,transparent,#71365f,transparent); }
body[data-role-theme="auth"] .social-provider-button { border-color:#4b3151; background:linear-gradient(145deg,#211129,#140b1b); }
body[data-role-theme="auth"] .social-provider-button:hover { border-color:#f43a9b; background:rgba(240,24,135,.12); }
body[data-role-theme="auth"] .setup-banner { border-color:rgba(255,68,174,.35); color:#ff83c5; }
body[data-role-theme="auth"] .auth-card:not(.signup-wide) { width:min(490px,94vw); }
body[data-role-theme="auth"] .social-login-buttons {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:12px;
  width:100%;
}
body[data-role-theme="auth"] .social-login-buttons .google-signin-wrap { display:flex; align-items:stretch; justify-content:stretch; width:100%; min-width:0; min-height:40px; overflow:hidden; border:0; border-radius:9px; background:transparent; }
body[data-role-theme="auth"] #google-signin-button { flex:1 1 100%; width:100%; min-width:0; min-height:40px; overflow:hidden; border-radius:9px; }
body[data-role-theme="auth"] #google-signin-button > div { width:100% !important; }
body[data-role-theme="auth"] .social-login-buttons .social-provider-button { width:100%; min-width:0; height:40px; justify-content:center; }
body[data-role-theme="auth"] #google-signin-unavailable { width:auto; min-width:0; padding:0; border:0; background:transparent; }
body[data-role-theme="auth"] #google-signin-unavailable .google-mark { visibility:hidden; }
body[data-role-theme="auth"] #google-signin-unavailable::before { content:""; flex:0 0 22px; width:22px; height:22px; background:transparent url("../assets/google-color-mark.svg") center / contain no-repeat; }
body[data-role-theme="auth"] .google-signin-wrap:has(#google-signin-unavailable:not(.hidden)) #google-signin-button { display:none; }
@media(max-width:520px) {
  body[data-role-theme="auth"] .social-login-buttons { grid-template-columns:minmax(0,200px); justify-content:center; }
}

/* Glass OTP sign-in panel, recolored to the Neon Brights auth palette. */
body[data-role-theme="auth"] .auth-card.otp-verification-mode {
  width:min(500px,94vw);
  padding:34px 38px 28px;
  overflow:visible;
  border:1px solid color-mix(in srgb,var(--text) 22%,transparent);
  border-radius:24px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 78%,transparent),color-mix(in srgb,var(--bg) 75%,transparent));
  box-shadow:0 28px 86px rgba(0,0,0,.55),0 0 52px color-mix(in srgb,var(--accent) 14%,transparent),inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(22px) saturate(135%);
}
body[data-role-theme="auth"] .auth-card.otp-verification-mode .auth-logo,
body[data-role-theme="auth"] .auth-card.otp-verification-mode > .auth-title,
body[data-role-theme="auth"] .auth-card.otp-verification-mode > .auth-sub { display:none; }
.two-factor-login-form { position:relative; display:grid; gap:0; margin:0; }
.two-factor-login-form > :not(.otp-value) { position:relative; z-index:1; }
.otp-glass-panel { position:relative; min-width:0; margin:0 0 14px; padding:17px; overflow:hidden; border:1px solid color-mix(in srgb,var(--text) 17%,var(--line)); border-radius:18px; background:radial-gradient(ellipse at 8% 30%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 44%),radial-gradient(ellipse at 92% 78%,color-mix(in srgb,var(--accent-2) 6%,transparent),transparent 48%),linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 78%,transparent),color-mix(in srgb,var(--bg) 84%,transparent)); box-shadow:0 16px 34px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.1); backdrop-filter:blur(16px) saturate(125%); }
.otp-glass-panel > * { position:relative; z-index:1; }
.otp-template-heading { display:grid; justify-items:center; text-align:center; margin:0 0 27px; }
.otp-template-icon { display:grid; place-items:center; width:44px; height:44px; margin-bottom:9px; border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:13px; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent-2) 8%,transparent)); box-shadow:0 0 25px color-mix(in srgb,var(--accent) 14%,transparent),inset 0 1px rgba(255,255,255,.12); color:var(--accent-2); }
.otp-template-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.otp-template-heading h2 { margin:0; color:var(--text); font-size:21px; font-weight:750; letter-spacing:-.35px; }
.otp-template-heading h2 span { color:var(--accent-2); text-shadow:0 0 20px color-mix(in srgb,var(--accent) 30%,transparent); }
.otp-template-heading p { margin:6px 0 0; color:var(--muted); font-size:12px; line-height:1.5; }
.otp-glass-panel .otp-template-heading { margin-bottom:15px; }
.otp-glass-panel .otp-template-icon { width:38px; height:38px; margin-bottom:7px; }
.otp-glass-panel .otp-template-icon svg { width:20px; height:20px; }
.otp-glass-panel .otp-template-heading h2 { font-size:18px; }
.otp-glass-panel .otp-template-heading p { max-width:380px; }
.otp-glass-panel .otp-field { margin:0; }
.otp-glass-panel .otp-field > span { display:block; margin-bottom:7px; color:var(--muted); font-size:11px; }
.otp-glass-panel .otp-cells .otp-cell { background:linear-gradient(155deg,color-mix(in srgb,var(--panel-2) 82%,transparent),color-mix(in srgb,var(--bg) 90%,transparent)); }
.otp-glass-panel.is-verifying .otp-cell, .form.is-verifying .otp-glass-panel .otp-cell { animation:otp-verifying 850ms ease-in-out infinite alternate; }
.otp-glass-panel.is-verifying .otp-template-icon, .form.is-verifying .otp-glass-panel .otp-template-icon { animation:otp-key-pulse 850ms ease-in-out infinite alternate; }
.otp-glass-panel.is-verified .otp-cells .otp-cell, .form.is-verified .otp-glass-panel .otp-cells .otp-cell { border-color:color-mix(in srgb,var(--green) 68%,var(--line)); color:var(--text); box-shadow:0 0 15px color-mix(in srgb,var(--green) 18%,transparent); }
.otp-glass-panel.is-verified .otp-template-icon, .form.is-verified .otp-glass-panel .otp-template-icon { border-color:color-mix(in srgb,var(--green) 62%,var(--line)); color:var(--green); background:color-mix(in srgb,var(--green) 12%,var(--panel)); }
.otp-glass-panel.is-verified .otp-template-heading h2 span, .form.is-verified .otp-glass-panel .otp-template-heading h2 span { color:var(--green); text-shadow:0 0 20px color-mix(in srgb,var(--green) 30%,transparent); }
.form:has(.otp-glass-panel) .otp-submit { position:relative; display:flex; align-items:center; justify-content:center; gap:12px; }
.form:has(.otp-glass-panel) .otp-submit-arrow { font-size:18px; line-height:1; }
.form.is-verifying:has(.otp-glass-panel) .otp-submit-arrow { display:none; }
.form.is-verifying:has(.otp-glass-panel) .otp-submit::before { content:""; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:otp-spinner 650ms linear infinite; }
.form.is-verified:has(.otp-glass-panel) .otp-submit { border-color:color-mix(in srgb,var(--green) 60%,var(--line)); background:linear-gradient(110deg,color-mix(in srgb,var(--green) 68%,var(--panel)),var(--green)); box-shadow:0 8px 25px color-mix(in srgb,var(--green) 22%,transparent); }
.otp-countdown-hint { margin:12px 0 0; color:var(--muted); font-size:11px; text-align:center; }
.otp-countdown-hint strong { color:var(--accent-2); font-variant-numeric:tabular-nums; font-weight:750; }
.two-factor-login-form .otp-field { margin:0 0 17px; }
.two-factor-login-form .otp-cells { justify-content:center; gap:11px; }
.two-factor-login-form .otp-cells .otp-cell { flex:0 1 54px; width:54px; max-width:54px; height:54px; min-height:54px; border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line-2)); border-radius:12px; background:linear-gradient(155deg,color-mix(in srgb,var(--panel-2) 82%,transparent),color-mix(in srgb,var(--bg) 90%,transparent)); box-shadow:inset 0 1px rgba(255,255,255,.06); font-size:21px; transition:transform .2s cubic-bezier(.2,.75,.25,1),border-color .2s ease,box-shadow .2s ease,background .2s ease; }
.two-factor-login-form .otp-cells .otp-cell:focus { transform:translateY(-2px) scale(1.025); border-color:var(--accent-2) !important; background:color-mix(in srgb,var(--accent) 13%,var(--bg)) !important; box-shadow:0 0 0 3px var(--accent-soft),0 0 22px color-mix(in srgb,var(--accent) 21%,transparent) !important; }
.two-factor-login-form .two-factor-hint { margin:0 0 19px; color:var(--muted); font-size:11.5px; text-align:center; }
.two-factor-login-form .two-factor-hint strong { color:var(--accent-2); font-variant-numeric:tabular-nums; }
body[data-role-theme="auth"] .auth-card .two-factor-login-form .otp-submit { position:relative; display:flex; align-items:center; justify-content:center; gap:12px; width:min(270px,100%); min-height:46px; margin:0 auto 11px; border:1px solid color-mix(in srgb,var(--accent-2) 52%,var(--line)); border-radius:11px; background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 72%,var(--panel)),var(--accent) 62%,color-mix(in srgb,var(--accent-2) 82%,var(--accent))); box-shadow:0 8px 25px color-mix(in srgb,var(--accent) 24%,transparent),inset 0 1px rgba(255,255,255,.23); font-weight:750; }
body[data-role-theme="auth"] .auth-card .two-factor-login-form .otp-submit:hover:not(:disabled) { filter:brightness(1.12); transform:translateY(-1px); }
body[data-role-theme="auth"] .auth-card .two-factor-login-form .otp-submit:disabled { cursor:wait; opacity:.95; }
.otp-submit-arrow { font-size:18px; line-height:1; }
.two-factor-login-form #two-factor-cancel { justify-self:center; color:var(--accent-2); font-size:12px; }
.two-factor-login-form .auth-error { margin:8px 0 0; text-align:center; }
.two-factor-login-form.is-verifying .otp-cell { animation:otp-verifying 850ms ease-in-out infinite alternate; }
.two-factor-login-form.is-verifying .otp-template-icon { animation:otp-key-pulse 850ms ease-in-out infinite alternate; }
.two-factor-login-form.is-verifying .otp-submit-arrow { display:none; }
.two-factor-login-form.is-verifying .otp-submit::before { content:""; width:14px; height:14px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:otp-spinner 650ms linear infinite; }
@keyframes otp-spinner { to { transform:rotate(360deg); } }
@keyframes otp-verifying { from { transform:translateY(0) scale(1); } to { transform:translateY(-1px) scale(1.008); } }
@keyframes otp-key-pulse { from { box-shadow:0 0 12px color-mix(in srgb,var(--accent) 12%,transparent); } to { box-shadow:0 0 28px color-mix(in srgb,var(--accent) 36%,transparent); } }
.two-factor-login-form.is-verified .otp-cells .otp-cell { border-color:color-mix(in srgb,var(--green) 68%,var(--line)); color:var(--text); box-shadow:0 0 15px color-mix(in srgb,var(--green) 18%,transparent); }
.two-factor-login-form.is-verified .otp-template-icon { border-color:color-mix(in srgb,var(--green) 62%,var(--line)); color:var(--green); background:color-mix(in srgb,var(--green) 12%,var(--panel)); }
.two-factor-login-form.is-verified .otp-template-heading h2 span { color:var(--green); text-shadow:0 0 20px color-mix(in srgb,var(--green) 30%,transparent); }
body[data-role-theme="auth"] .auth-card .two-factor-login-form.is-verified .otp-submit { border-color:color-mix(in srgb,var(--green) 55%,var(--line)); background:linear-gradient(110deg,color-mix(in srgb,var(--green) 70%,var(--panel)),var(--green)); box-shadow:0 8px 25px color-mix(in srgb,var(--green) 22%,transparent); }
@media(max-width:420px) {
  body[data-role-theme="auth"] .auth-card.otp-verification-mode { padding:30px 20px 24px; }
  .two-factor-login-form .otp-cells { gap:7px; }
  .two-factor-login-form .otp-cells .otp-cell { flex-basis:45px; width:45px; max-width:45px; height:48px; min-height:48px; font-size:19px; }
}
body[data-role-theme="auth"] .auth-screen:has(.auth-card.otp-verification-mode) .auth-bg::before,
body[data-role-theme="auth"] .auth-screen:has(.auth-card.otp-verification-mode) .auth-bg::after { content:""; position:absolute; inset:-20%; pointer-events:none; }
body[data-role-theme="auth"] .auth-screen:has(.auth-card.otp-verification-mode) .auth-bg::before {
  background:radial-gradient(ellipse at 50% 55%,transparent 34%,color-mix(in srgb,var(--accent) 16%,transparent) 35%,transparent 37%),radial-gradient(ellipse at 48% 58%,transparent 48%,color-mix(in srgb,var(--accent-2) 11%,transparent) 49%,transparent 51%);
  filter:blur(2px); transform:rotate(-18deg) scale(1.3); animation:otp-ribbon-drift 18s ease-in-out infinite alternate;
}
body[data-role-theme="auth"] .auth-screen:has(.auth-card.otp-verification-mode) .auth-bg::after {
  background:linear-gradient(158deg,transparent 38%,color-mix(in srgb,var(--accent-2) 8%,transparent) 40%,transparent 42%),linear-gradient(23deg,transparent 48%,color-mix(in srgb,var(--accent) 10%,transparent) 50%,transparent 52%);
  filter:blur(10px); opacity:.8; animation:otp-ribbon-drift 22s ease-in-out infinite alternate-reverse;
}
@keyframes otp-ribbon-drift { from { translate:-2% -1%; rotate:-2deg; } to { translate:2% 2%; rotate:2deg; } }
@media(max-width:520px) { .otp-glass-panel { padding:14px 11px; border-radius:15px; } .otp-glass-panel .otp-cells { gap:6px; } .otp-glass-panel .otp-cells .otp-cell { flex-basis:42px; width:42px; max-width:42px; height:46px; min-height:46px; font-size:17px; } }

/* Refined OTP micro-interactions, shared by sign-in, email and authenticator forms. */
.otp-glass-panel.otp-enter, .two-factor-login-form.otp-screen-enter { animation:otp-panel-enter 440ms cubic-bezier(.2,.75,.25,1) both; }
.otp-cells .otp-cell { transform-origin:center; transition:transform 180ms cubic-bezier(.2,.75,.25,1),border-color 180ms ease,box-shadow 180ms ease,background-color 180ms ease; }
.otp-glass-panel .otp-cells .otp-cell:focus, .otp-cells .otp-cell:focus { transform:translateY(-2px) scale(1.025); border-color:var(--accent-2); box-shadow:0 0 0 3px var(--accent-soft),0 0 18px color-mix(in srgb,var(--accent) 18%,transparent); }
.otp-cells .otp-cell.otp-digit-enter { animation:otp-digit-enter 190ms cubic-bezier(.2,.75,.25,1) both; }
.otp-cells.otp-complete .otp-cell { animation:otp-complete 300ms cubic-bezier(.2,.75,.25,1) both; }
.otp-cells.otp-complete .otp-cell:nth-child(2) { animation-delay:18ms; }
.otp-cells.otp-complete .otp-cell:nth-child(3) { animation-delay:36ms; }
.otp-cells.otp-complete .otp-cell:nth-child(4) { animation-delay:54ms; }
.otp-cells.otp-complete .otp-cell:nth-child(5) { animation-delay:72ms; }
.otp-cells.otp-complete .otp-cell:nth-child(6) { animation-delay:90ms; }
.otp-error .otp-glass-panel, .two-factor-login-form.otp-error { animation:otp-invalid 360ms cubic-bezier(.36,.07,.19,.97) both; }
.otp-error .otp-cell { border-color:color-mix(in srgb,var(--red) 62%,var(--line-2)); box-shadow:0 0 0 2px color-mix(in srgb,var(--red) 12%,transparent); }
.two-factor-login-form.otp-screen-exit { animation:otp-panel-exit 210ms cubic-bezier(.4,0,.7,.2) both; pointer-events:none; }
.otp-success-mark { position:relative; z-index:0; isolation:isolate; display:none; place-items:center; width:68px; height:68px; margin:18px auto 20px; border:2px solid color-mix(in srgb,var(--green) 72%,var(--line)); border-radius:20px; background:color-mix(in srgb,var(--green) 12%,var(--panel)); color:var(--text); font-size:34px; line-height:1; box-shadow:0 0 22px color-mix(in srgb,var(--green) 20%,transparent); }
.otp-success-mark::before { content:""; position:absolute; z-index:-1; inset:-28px; border:2px solid color-mix(in srgb,var(--green) 48%,transparent); border-radius:50%; opacity:0; }
.form.is-verifying .otp-success-mark { display:grid; border-color:color-mix(in srgb,var(--green) 72%,var(--line)); animation:otp-success-pop 680ms cubic-bezier(.2,.72,.22,1) both; }
.form.is-verifying .otp-success-mark::after { content:""; width:25px; height:25px; border:2px solid color-mix(in srgb,var(--green) 35%,transparent); border-top-color:var(--green); border-radius:50%; animation:otp-verify-spin 1.15s cubic-bezier(.45,.05,.55,.95) infinite; }
.form.is-verified .otp-success-mark { display:grid; animation:otp-success-pop 680ms cubic-bezier(.2,.72,.22,1) both; }
.form.is-verified .otp-success-mark::before { opacity:1; animation:otp-success-ring 1.15s cubic-bezier(.18,.62,.25,1) both; }
.form.is-verified .otp-success-mark::after { content:"✓"; font-family:Arial,sans-serif; font-size:36px; font-weight:700; color:var(--green); animation:otp-check-draw 600ms cubic-bezier(.2,.7,.25,1) both; }
.modal #modal-form .otp-field { text-align:center; }
.modal #modal-form .otp-cells { justify-content:center; }
.modal #modal-form .otp-success-mark { display:none !important; }
.modal #modal-form.is-verifying .otp-success-mark,
.modal #modal-form.is-verified .otp-success-mark,
.modal #modal-form.is-invalid .otp-success-mark { display:grid !important; }
.modal #modal-form.is-invalid .otp-success-mark { border-color:color-mix(in srgb,var(--red) 74%,var(--line)); background:color-mix(in srgb,var(--red) 12%,var(--panel)); color:var(--red); box-shadow:0 0 22px color-mix(in srgb,var(--red) 20%,transparent); }
.modal #modal-form.is-invalid .otp-success-mark::before { display:none; }
.modal #modal-form.is-invalid .otp-success-mark::after { content:"×"; color:var(--red); font-family:Arial,sans-serif; font-size:38px; font-weight:600; animation:otp-check-draw 600ms cubic-bezier(.2,.7,.25,1) both; }
.modal #modal-form.is-verifying .spinner { animation-duration:1.15s; }
.form.is-verified .otp-cells, .two-factor-login-form.is-verified .otp-cells { display:none; }
.form.is-verified .otp-field > span:first-child, .two-factor-login-form.is-verified .otp-field > span:first-child { display:none; }
.form.is-verified .otp-success-mark, .two-factor-login-form.is-verified .otp-success-mark { display:grid; }
.form.is-verified .otp-countdown-hint, .two-factor-login-form.is-verified .otp-countdown-hint { visibility:hidden; }
.form.is-verified .otp-template-heading h2, .two-factor-login-form.is-verified .otp-template-heading h2 { animation:otp-success-copy 450ms ease both; }
.app-auth-enter { animation:app-auth-enter 440ms cubic-bezier(.2,.75,.25,1) both; }
@keyframes app-auth-enter { from { opacity:0; transform:translateY(7px) scale(.995); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes otp-success-pop { 0% { opacity:0; transform:scale(.72); } 55% { opacity:1; transform:scale(1.06); } 100% { opacity:1; transform:scale(1); } }
@keyframes otp-success-ring { 0% { opacity:.65; transform:scale(.42); } 100% { opacity:0; transform:scale(1.16); } }
@keyframes otp-verify-spin { to { transform:rotate(360deg); } }
@keyframes otp-check-draw { from { opacity:0; transform:scale(.65); } to { opacity:1; transform:scale(1); } }
@keyframes otp-success-copy { from { opacity:.45; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }
@keyframes otp-panel-enter { from { opacity:0; transform:translateY(8px) scale(.97); filter:blur(3px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
@keyframes otp-panel-exit { to { opacity:0; transform:translateY(-4px) scale(.985); filter:blur(2px); } }
@keyframes otp-digit-enter { from { opacity:.55; transform:scale(.91); } to { opacity:1; transform:scale(1); } }
@keyframes otp-complete { 0%,100% { transform:scale(1); } 48% { transform:translateY(-2px) scale(1.045); border-color:var(--accent-2); box-shadow:0 0 16px color-mix(in srgb,var(--accent) 24%,transparent); } }
@keyframes otp-invalid { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-3px); } 50% { transform:translateX(2px); } 75% { transform:translateX(-1px); } }
@media(prefers-reduced-motion:reduce) {
  .app-auth-enter, .otp-success-mark, .otp-success-mark::before,
  .form.is-verified .otp-template-heading h2, .two-factor-login-form.is-verified .otp-template-heading h2 { animation:none !important; }
  .otp-glass-panel.otp-enter, .two-factor-login-form.otp-screen-enter, .two-factor-login-form.otp-screen-exit,
  .otp-cells .otp-cell.otp-digit-enter, .otp-cells.otp-complete .otp-cell,
  .otp-error .otp-glass-panel, .two-factor-login-form.otp-error { animation:none !important; filter:none !important; }
  .otp-cells .otp-cell { transition:none !important; }
}
.password-current-row { display:flex; align-items:flex-end; gap:12px; }
.password-current-row .field { flex:1; min-width:0; margin-bottom:17px; }
.password-current-row .link-btn { flex:0 0 auto; margin:0 0 21px; }
.password-recovery-panel { margin-top:16px; padding:15px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--bg-2) 70%,transparent); }
.password-recovery-panel > .hint { margin:0 0 12px; }
.password-recovery-panel .otp-glass-panel { margin-bottom:14px; }
.password-recovery-panel .otp-cells { justify-content:center; gap:10px; }
.password-recovery-panel .otp-cells .otp-cell { flex:0 1 48px; width:48px; max-width:48px; text-align:center; transition:transform 280ms cubic-bezier(.2,.72,.22,1),border-color 280ms ease,box-shadow 280ms ease,background-color 280ms ease; }
.password-recovery-panel .otp-cells .otp-cell:focus { transform:translateY(-2px) scale(1.025); }
@media(max-width:480px) { .password-recovery-panel .otp-cells { gap:6px; } .password-recovery-panel .otp-cells .otp-cell { flex-basis:42px; width:42px; max-width:42px; } }
@media(max-width:480px) { .password-current-row { align-items:stretch; flex-direction:column; gap:0; } .password-current-row .link-btn { align-self:flex-start; margin:-10px 0 14px; } }
@media(prefers-reduced-motion:reduce) {
  .password-recovery-panel .otp-cells .otp-cell { transition:none !important; }
  .form.is-verifying .otp-success-mark::after { animation:none !important; }
}

/* Two-factor setup: keep the instructions, QR and verification controls in one visible panel. */
.profile-2fa-setup { margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(145deg,color-mix(in srgb,var(--panel-2) 68%,transparent),color-mix(in srgb,var(--bg-2) 90%,transparent)); }
.profile-2fa-setup-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(230px,.8fr); align-items:stretch; gap:16px; }
.profile-2fa-code-column { min-width:0; display:flex; flex-direction:column; gap:14px; }
.profile-2fa-instructions { display:grid; gap:5px; padding:12px 13px; border:1px solid var(--line); border-radius:10px; background:color-mix(in srgb,var(--bg) 72%,transparent); }
.profile-2fa-instructions b { font-size:13px; }
.profile-2fa-instructions span { color:var(--muted); font-size:12px; line-height:1.5; }
.profile-2fa-manual-key { margin:0; }
.profile-2fa-manual-key .keycode { width:fit-content; max-width:min(100%,420px); overflow-wrap:anywhere; }
.profile-2fa-manual-key .keycode > span { min-width:0; overflow-wrap:anywhere; }
.profile-2fa-enable-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:10px; margin-top:auto !important; }
.profile-2fa-enable-form .otp-glass-panel { grid-column:1 / -1; padding:14px; }
.profile-2fa-enable-form .otp-glass-panel .otp-template-heading { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; margin:0 0 12px; text-align:center; }
.profile-2fa-enable-form .otp-glass-panel .otp-template-icon { flex:0 0 34px; width:34px; height:34px; margin:0; }
.profile-2fa-enable-form .otp-glass-panel .otp-template-heading h2 { font-size:15px; }
.profile-2fa-enable-form .otp-glass-panel .otp-template-heading p { max-width:100%; margin:0; font-size:13px; }
.profile-2fa-enable-form .otp-glass-panel .otp-field > span:first-child { display:none; }
.profile-2fa-enable-form .otp-glass-panel .otp-cells { justify-content:center; gap:8px; }
.profile-2fa-enable-form .otp-glass-panel .otp-cell { flex:0 1 46px; width:46px; max-width:46px; height:48px; min-height:48px; }
.profile-2fa-enable-form .otp-success-mark { display:none !important; }
.profile-2fa-enable-form.is-verifying .otp-success-mark,
.profile-2fa-enable-form.is-verified .otp-success-mark,
.profile-2fa-enable-form.is-invalid .otp-success-mark { display:grid !important; }
.profile-2fa-enable-form.is-invalid .otp-success-mark { border-color:color-mix(in srgb,var(--red) 74%,var(--line)); background:color-mix(in srgb,var(--red) 12%,var(--panel)); box-shadow:0 0 22px color-mix(in srgb,var(--red) 20%,transparent); }
.profile-2fa-enable-form.is-invalid .otp-success-mark::before { display:none; }
.profile-2fa-enable-form.is-invalid .otp-success-mark::after { content:"×"; color:var(--red); font-family:Arial,sans-serif; font-size:38px; font-weight:600; animation:otp-check-draw 600ms cubic-bezier(.2,.7,.25,1) both; }
.profile-2fa-enable-form > .btn { align-self:center; min-height:42px; white-space:nowrap; }
.profile-2fa-enable-form > .hint { grid-column:1 / -1; margin:0; }
.profile-2fa-qr-column { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-width:0; padding:12px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--bg) 70%,transparent); }
.profile-2fa-qr-stage { position:relative; display:grid; place-items:center; width:min(100%,260px); aspect-ratio:1; overflow:hidden; border:1px solid var(--line-2); border-radius:11px; background:#fff; }
.profile-2fa-qr-blurred { display:grid; place-items:center; width:82%; aspect-ratio:1; color:#101418; font-size:160px; line-height:1; filter:blur(7px); opacity:.42; background:repeating-conic-gradient(#111820 0 25%,#fff 0 50%) 50% / 22px 22px; }
.profile-2fa-qr-cover { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:#263238; font-size:12px; font-weight:700; background:rgba(255,255,255,.34); backdrop-filter:blur(2px); }
.profile-2fa-qr-stage.is-generated .profile-2fa-qr-blurred, .profile-2fa-qr-stage.is-generated .profile-2fa-qr-cover { display:none; }
.profile-2fa-qr { display:block; width:100%; height:100%; max-width:220px; max-height:220px; image-rendering:pixelated; }
.profile-2fa-qr-caption { color:var(--muted); font-size:11px; text-align:center; }
.profile-2fa-locked-panel { position:relative; min-height:250px; margin-top:15px; overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line)); border-radius:13px; background:linear-gradient(145deg,var(--panel-2),var(--bg-2)); }
.profile-2fa-locked-content { display:grid; grid-template-columns:minmax(0,1fr) 190px; align-items:center; gap:20px; min-height:250px; padding:22px; filter:blur(5px); opacity:.48; user-select:none; }
.profile-2fa-locked-copy { display:grid; gap:12px; }
.profile-2fa-locked-copy > span { color:var(--accent-2); font-size:10px; font-weight:800; letter-spacing:1.5px; }
.profile-2fa-locked-copy > b { font-size:20px; }
.profile-2fa-locked-code { width:max-content; padding:11px 20px; border:1px solid var(--line-2); border-radius:9px; color:var(--text); font-size:20px; letter-spacing:7px; }
.profile-2fa-locked-bars { display:flex; gap:8px; }
.profile-2fa-locked-bars i { width:34px; height:40px; border:1px solid var(--line-2); border-radius:7px; background:var(--panel); }
.profile-2fa-locked-qr { display:grid; place-items:center; width:170px; aspect-ratio:1; border:10px solid #fff; border-radius:8px; background:repeating-conic-gradient(#111820 0 25%,#fff 0 50%) 50% / 18px 18px; color:#fff; font-size:0; }
.profile-2fa-lock-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:20px; background:color-mix(in srgb,var(--bg) 28%,transparent); text-align:center; }
.profile-2fa-lock-overlay .btn { min-width:170px; }
@media(max-width:700px) { .profile-2fa-setup-grid { grid-template-columns:minmax(0,1fr); } .profile-2fa-qr-column { grid-row:1; } .profile-2fa-qr-stage { width:min(100%,230px); } .profile-2fa-locked-content { grid-template-columns:minmax(0,1fr) 120px; gap:12px; padding:16px; } .profile-2fa-locked-qr { width:115px; border-width:7px; } }
@media(max-width:480px) { .profile-2fa-setup { padding:11px; } .profile-2fa-enable-form { grid-template-columns:minmax(0,1fr); } .profile-2fa-enable-form > .btn { justify-self:start; } .profile-2fa-enable-form .otp-glass-panel .otp-cells { gap:5px; } .profile-2fa-enable-form .otp-glass-panel .otp-cell { flex-basis:40px; width:40px; max-width:40px; height:44px; min-height:44px; } }
@media(prefers-reduced-motion:reduce) { .profile-2fa-enable-form.is-invalid .otp-success-mark::after { animation:none !important; } }
@media(prefers-reduced-motion:reduce) { .profile-2fa-qr-blurred { filter:blur(3px); } }

.owner-subscriptions-layout { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.95fr); align-items:start; gap:18px; }
.owner-subscriptions-left,.owner-subscriptions-right { display:grid; align-content:start; gap:18px; min-width:0; }
.owner-subscriptions-left > .card,.owner-subscriptions-right .card { margin-bottom:0; }
.owner-subscription-grant,.owner-subscription-overview { min-width:0; }
.owner-subscription-overview { display:grid; align-content:start; gap:18px; }
.owner-payment-subscriptions { border-color:color-mix(in srgb,var(--red) 62%,var(--line)); box-shadow:0 0 0 1px color-mix(in srgb,var(--red) 12%,transparent); }
.owner-payment-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px 12px; color:var(--muted); font-size:11px; }
.owner-payment-details b { color:var(--text); margin-right:4px; }
.owner-payment-order { grid-column:1 / -1; overflow-wrap:anywhere; }
.owner-payment-order code { color:var(--text); font-size:10px; }
@media(max-width:1400px) {
  .owner-subscriptions-layout { grid-template-columns:minmax(0,1fr); }
}
.owner-active-subscription-list { display:grid; gap:10px; }
.owner-active-subscription { display:grid; gap:7px; min-width:0; padding:13px; border:1px solid var(--line); border-radius:11px; background:color-mix(in srgb,var(--bg-2) 75%,var(--panel)); }
.owner-active-subscription-main,.owner-active-subscription-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.owner-active-subscription-main > b { min-width:0; overflow-wrap:anywhere; }
.owner-active-subscription-meta { color:var(--text); font-size:12px; }
.owner-active-subscription-meta span,.owner-active-subscription > small { color:var(--muted); font-size:11px; }
.owner-manual-subscription-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:4px; }
.owner-subscription-activity .activity-item { grid-template-columns:34px minmax(0,1fr) auto; }
@media(max-width:560px) { .owner-active-subscription-meta { align-items:flex-start; flex-direction:column; gap:3px; } .owner-payment-details { grid-template-columns:minmax(0,1fr); } .owner-subscription-activity .activity-item { grid-template-columns:30px minmax(0,1fr); } .owner-subscription-activity .activity-meta { grid-column:2; text-align:left; } }
.owner-subscription-grant .otp-glass-panel .otp-field > span:first-child { display:block; margin:0 0 10px; text-align:center; }
.owner-subscription-grant .otp-glass-panel .otp-cells { justify-content:center; gap:8px; }
.owner-subscription-grant .otp-glass-panel .otp-cells .otp-cell { flex:0 1 46px; width:46px; max-width:46px; height:48px; min-height:48px; }
.owner-subscription-grant .otp-glass-panel .otp-success-mark,
.owner-subscription-grant .otp-glass-panel .otp-countdown-hint { display:none !important; }

/* A crisp, high-contrast check for successful authenticator verification. */
.form.is-verified .otp-success-mark,
.two-factor-login-form.is-verified .otp-success-mark,
.modal #modal-form.is-verified .otp-success-mark,
.profile-2fa-enable-form.is-verified .otp-success-mark {
  border:2px solid rgba(142,255,112,.92) !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 32% 22%,#70ed3b 0%,#42c91b 48%,#1b8f0a 100%) !important;
  color:#fff !important;
  box-shadow:inset 0 2px 4px rgba(255,255,255,.3),inset 0 -8px 12px rgba(8,77,0,.28),0 0 24px rgba(64,220,30,.42) !important;
}
.otp-success-mark .otp-check-svg { display:block; width:46px; height:46px; overflow:visible; }
.otp-success-mark .otp-check-svg path { fill:none !important; stroke:#fff !important; stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:34; stroke-dashoffset:34; animation:otp-check-stroke 520ms cubic-bezier(.2,.7,.25,1) 100ms forwards; }
.form.is-verified .otp-success-mark::after,
.two-factor-login-form.is-verified .otp-success-mark::after,
.modal #modal-form.is-verified .otp-success-mark::after,
.profile-2fa-enable-form.is-verified .otp-success-mark::after { content:none !important; display:none !important; }
@keyframes otp-check-stroke { to { stroke-dashoffset:0; } }
@media(prefers-reduced-motion:reduce) { .otp-success-mark .otp-check-svg path { animation:none !important; stroke-dashoffset:0; } }

/* Quick accessibility/performance switch: preserve all layouts and controls,
   while using a flat, muted palette and disabling expensive visual effects. */
.topbar-right { display:flex; align-items:center; gap:9px; min-width:0; }
.low-end-toggle { display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:5px 9px; border:1px solid var(--line-2); border-radius:999px; color:var(--muted); background:var(--panel-2); font:inherit; font-size:11px; font-weight:650; white-space:nowrap; cursor:pointer; }
.low-end-toggle:hover { border-color:var(--accent-2); color:var(--text); }
.low-end-switch { position:relative; display:block; flex:0 0 30px; width:30px; height:17px; border:1px solid var(--line-2); border-radius:999px; background:var(--bg-2); }
.low-end-switch::after { position:absolute; top:2px; left:2px; width:11px; height:11px; border-radius:50%; background:var(--muted); content:""; }
.low-end-toggle[aria-checked="true"] .low-end-switch { border-color:var(--accent-2); background:var(--accent-soft); }
.low-end-toggle[aria-checked="true"] .low-end-switch::after { left:15px; background:var(--accent-2); }
@media(max-width:620px) { .topbar-right { gap:5px; } .low-end-toggle { gap:5px; padding:4px 6px; font-size:10px; } .low-end-toggle-label { display:none; } .low-end-switch { flex-basis:26px; width:26px; } .low-end-toggle[aria-checked="true"] .low-end-switch::after { left:12px; } }

html[data-performance-mode="low"] body {
  --bg:#f5f6f8;
  --bg-2:#f3f4f6;
  --panel:#ffffff;
  --panel-2:#ffffff;
  --line:#e5e7eb;
  --line-2:#d1d5db;
  --text:#111827;
  --muted:#4b5563;
  --dim:#6b7280;
  --accent:#e5e7eb;
  --accent-2:#111827;
  --accent-soft:#e5e7eb;
  --role-trim:#d1d5db;
  --role-glow:transparent;
  background:var(--bg) !important;
  background-image:none !important;
}
html[data-performance-mode="low"] { scroll-behavior:auto !important; }
html[data-performance-mode="low"] *:not(#auth-screen):not(#auth-screen *) { scroll-behavior:auto !important; animation:none !important; transition:none !important; box-shadow:none !important; text-shadow:none !important; filter:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html[data-performance-mode="low"] *:not(#auth-screen):not(#auth-screen *) { background-image:none !important; }
html[data-performance-mode="low"] :is(.sidebar,.topbar,.card,.app-card,.stat,.dashboard-status,.dashboard-hero,.modal,.toast,.profile-trigger,.assigned-app-card,.assigned-app-value,.keycode,.activity-item,.table-wrap,.support-chat-panel,.owner-support-settings) { background-color:var(--panel) !important; }
html[data-performance-mode="low"] :is(input,select,textarea,.assigned-choice,.assigned-app-empty,.assigned-app-value,.keycode) { background-color:var(--bg-2) !important; }
html[data-performance-mode="low"] .btn-primary { background-color:var(--accent) !important; color:#0b1220 !important; }
html[data-performance-mode="low"] .nav-item.active { background-color:var(--accent-soft) !important; }
html[data-performance-mode="low"] .modal-backdrop { background-color:rgba(4,8,16,.82) !important; }

/* Keep conditionally hidden form fields hidden even when .field sets display. */
.field[hidden] { display:none !important; }

/* Segmented one-time-code fields modeled on the supplied verification reference. */
.otp-cells { justify-content:center; gap:10px; }
.otp-cells .otp-cell,
.two-factor-login-form .otp-cells .otp-cell {
  flex:0 1 50px; width:50px; max-width:50px; height:52px; min-height:52px;
  border:1px solid color-mix(in srgb,var(--line-2) 80%,var(--muted));
  border-radius:13px;
  background:linear-gradient(155deg,color-mix(in srgb,var(--panel-2) 76%,var(--bg-2)),color-mix(in srgb,var(--bg-2) 92%,var(--bg)));
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  font-size:20px; font-weight:650;
}
.otp-cells .otp-cell:hover { border-color:color-mix(in srgb,var(--accent-2) 48%,var(--line-2)); }
.otp-cells .otp-cell.is-filled { border-color:color-mix(in srgb,var(--accent) 48%,var(--line-2)); background:color-mix(in srgb,var(--accent) 8%,var(--bg-2)); }
.otp-cells .otp-cell:focus,
.two-factor-login-form .otp-cells .otp-cell:focus {
  transform:translateY(-2px); border-color:var(--accent-2) !important;
  background:color-mix(in srgb,var(--accent) 11%,var(--bg-2)) !important;
  box-shadow:0 0 0 3px var(--accent-soft),0 0 22px color-mix(in srgb,var(--accent) 20%,transparent) !important;
}
@media(max-width:520px) {
  .otp-cells { gap:7px; }
  .otp-cells .otp-cell,
  .two-factor-login-form .otp-cells .otp-cell { flex-basis:44px; width:44px; max-width:44px; height:48px; min-height:48px; font-size:18px; }
}

/* Final role dashboard override: unified Dark Elegant colors with glass panels. */
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) {
  --bg:#0a1a2f; --bg-2:#1f1f1f; --panel:rgba(18,34,54,.72); --panel-2:rgba(31,48,69,.68);
  --line:rgba(155,180,208,.2); --line-2:rgba(155,180,208,.36); --text:#f1f4f8; --muted:#aab7c6; --dim:#778798;
  --accent:#9bb4d0; --accent-2:#d7e4f5; --accent-soft:rgba(155,180,208,.16);
  --green:#9bb4d0; --green-soft:rgba(155,180,208,.16); --amber:#c2d1e2; --amber-soft:rgba(194,209,226,.16);
  --role-trim:#d7e4f5; --role-glow:rgba(155,180,208,.2);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-hero,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-status,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .metric-card,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-panel,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-activity,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-paid-subscription {
  border:1px solid rgba(155,180,208,.24);
  background:linear-gradient(145deg,rgba(31,31,31,.48),rgba(10,26,47,.48));
  backdrop-filter:blur(24px) saturate(145%); -webkit-backdrop-filter:blur(24px) saturate(145%);
  box-shadow:0 20px 48px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.13);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-hero {
  background:radial-gradient(ellipse at 78% 38%,rgba(155,180,208,.2),transparent 44%),linear-gradient(125deg,rgba(10,26,47,.62),rgba(31,31,31,.58));
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-status { background:linear-gradient(145deg,rgba(31,31,31,.46),rgba(10,26,47,.5)); }
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .metric-card { background:linear-gradient(145deg,rgba(31,31,31,.52),rgba(10,26,47,.58)); }
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-paid-subscription-details > div,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-bar-row .bar-track {
  border:1px solid rgba(155,180,208,.16); background:rgba(10,26,47,.36);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .metric-icon,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .status-icon,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .panel-mark {
  border-color:rgba(155,180,208,.24); background:rgba(155,180,208,.1); color:#d7e4f5;
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .btn-primary {
  color:#0a1a2f; border-color:rgba(215,228,245,.5); background:linear-gradient(125deg,#d7e4f5,#9bb4d0);
  box-shadow:0 8px 24px rgba(155,180,208,.18),inset 0 1px rgba(255,255,255,.5);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-panel:hover,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-status:hover,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .metric-card:hover {
  border-color:rgba(215,228,245,.48); box-shadow:0 24px 52px rgba(0,0,0,.3),0 0 26px rgba(155,180,208,.12),inset 0 1px rgba(255,255,255,.16);
}
@media(prefers-reduced-transparency:reduce) {
  body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-hero,
  body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-status,
  body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .metric-card,
  body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-panel,
  body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-activity,
  body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .dashboard-paid-subscription { backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* Dark Elegant glass navigation for all role dashboards. */
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .sidebar {
  background:linear-gradient(180deg,rgba(31,31,31,.78),rgba(10,26,47,.82));
  border-right:1px solid rgba(155,180,208,.24);
  backdrop-filter:blur(26px) saturate(145%); -webkit-backdrop-filter:blur(26px) saturate(145%);
  box-shadow:inset -1px 0 rgba(255,255,255,.08),12px 0 38px rgba(0,0,0,.18);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .brand {
  border-bottom:1px solid rgba(155,180,208,.18);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .brand-logo {
  color:#0a1a2f; border:1px solid rgba(215,228,245,.5);
  background:linear-gradient(145deg,#d7e4f5,#9bb4d0 62%,#0a1a2f);
  box-shadow:0 0 0 2px rgba(155,180,208,.12),0 8px 24px rgba(155,180,208,.2),inset 0 1px rgba(255,255,255,.5);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .brand b,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .topbar h2 { color:#d7e4f5; }
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .topbar {
  background:linear-gradient(100deg,rgba(10,26,47,.76),rgba(31,31,31,.72));
  border-bottom:1px solid rgba(155,180,208,.24);
  backdrop-filter:blur(24px) saturate(145%); -webkit-backdrop-filter:blur(24px) saturate(145%);
  box-shadow:0 10px 28px rgba(0,0,0,.17);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .nav-item {
  border:1px solid transparent;
  transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .nav-item:hover {
  color:#f1f4f8; border-color:rgba(155,180,208,.2);
  background:rgba(155,180,208,.09); box-shadow:inset 0 1px rgba(255,255,255,.07);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .nav-item.active {
  color:#e5eef8; border-color:rgba(155,180,208,.34);
  background:linear-gradient(105deg,rgba(155,180,208,.2),rgba(10,26,47,.38));
  box-shadow:inset 3px 0 #9bb4d0,0 8px 20px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.1);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .nav-sep { color:#9bb4d0; }
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .sidebar-foot {
  border-top-color:rgba(155,180,208,.22);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .profile-trigger {
  border:1px solid rgba(155,180,208,.16); border-radius:12px;
  background:linear-gradient(145deg,rgba(31,31,31,.42),rgba(10,26,47,.42));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .profile-trigger:hover {
  border-color:rgba(155,180,208,.36); background:rgba(155,180,208,.1);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .me-role,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .profile-chevron { color:#9bb4d0; }
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .topbar-right .pill,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) #theme-toggle {
  border-color:rgba(155,180,208,.22); background:rgba(31,31,31,.42);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}

/* Stronger glass finish for signed-in dashboards only; auth/login styling stays untouched. */
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-hero,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-status,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .metric-card,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-panel,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-activity,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-paid-subscription {
  background-color:rgba(16,31,50,.28);
  backdrop-filter:blur(32px) saturate(175%);
  -webkit-backdrop-filter:blur(32px) saturate(175%);
  border-color:rgba(215,228,245,.3);
  box-shadow:0 24px 58px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.2),inset 0 -1px rgba(255,255,255,.035);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-hero {
  background:radial-gradient(ellipse at 78% 36%,rgba(155,180,208,.18),transparent 42%),linear-gradient(130deg,rgba(10,26,47,.34),rgba(31,31,31,.3));
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-status,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .metric-card,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-panel,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-paid-subscription {
  background-image:linear-gradient(135deg,rgba(255,255,255,.095),rgba(255,255,255,.018) 38%,transparent 68%);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-paid-subscription-details > div {
  background:rgba(10,26,47,.2); backdrop-filter:blur(20px) saturate(165%); -webkit-backdrop-filter:blur(20px) saturate(165%);
  border-color:rgba(215,228,245,.22); box-shadow:inset 0 1px rgba(255,255,255,.12);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .sidebar {
  background:linear-gradient(180deg,rgba(31,31,31,.56),rgba(10,26,47,.62));
  backdrop-filter:blur(32px) saturate(165%); -webkit-backdrop-filter:blur(32px) saturate(165%);
  box-shadow:inset -1px 0 rgba(255,255,255,.12),14px 0 42px rgba(0,0,0,.16);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .topbar {
  background:linear-gradient(100deg,rgba(10,26,47,.5),rgba(31,31,31,.46));
  backdrop-filter:blur(30px) saturate(165%); -webkit-backdrop-filter:blur(30px) saturate(165%);
  box-shadow:0 12px 30px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.08);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .nav-item.active,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .profile-trigger {
  background:linear-gradient(125deg,rgba(155,180,208,.16),rgba(10,26,47,.2));
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:inset 0 1px rgba(255,255,255,.13),0 8px 22px rgba(0,0,0,.12);
}

/* Final consistency pass: remove role-specific dashboard accents and make glass visibly translucent. */
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-hero,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-status,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .metric-card,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-panel,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-paid-subscription {
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.012) 40%,transparent 72%),linear-gradient(145deg,rgba(31,31,31,.2),rgba(10,26,47,.22));
  border-color:rgba(215,228,245,.34);
  backdrop-filter:blur(38px) saturate(180%); -webkit-backdrop-filter:blur(38px) saturate(180%);
  box-shadow:0 24px 60px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.2),inset 0 -1px rgba(255,255,255,.05);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-hero {
  background:radial-gradient(ellipse at 80% 35%,rgba(155,180,208,.16),transparent 44%),linear-gradient(130deg,rgba(10,26,47,.32),rgba(31,31,31,.28));
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-status { background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.01) 45%,transparent 76%),rgba(10,26,47,.2); }
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .metric-card { background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.012) 42%,transparent 72%),rgba(10,26,47,.24); }
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-orb {
  background:radial-gradient(circle at 32% 25%,rgba(215,228,245,.34),rgba(155,180,208,.2) 42%,rgba(10,26,47,.24) 74%);
  box-shadow:inset 0 0 38px rgba(215,228,245,.14),0 0 62px rgba(155,180,208,.2);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .orb-core {
  color:#0a1a2f; background:linear-gradient(145deg,#f1f4f8,#9bb4d0 62%,#40546a);
  border-color:#d7e4f5; box-shadow:0 14px 35px rgba(155,180,208,.28),inset 0 2px 3px rgba(255,255,255,.5);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .orb-ring,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .ring-two { border-color:rgba(215,228,245,.28); }
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-bar-row .bar-fill,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-bar-row .staff-fill {
  background:linear-gradient(90deg,#40546a,#d7e4f5); box-shadow:0 0 12px rgba(155,180,208,.2);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-bar-row .bar-fill::after,
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .content:has(.dashboard-hero) .dashboard-bar-row .staff-fill::after { border-color:#f1f4f8; }
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .sidebar {
  background:linear-gradient(160deg,rgba(31,31,31,.52),rgba(10,26,47,.58));
  border-right-color:rgba(215,228,245,.25);
  backdrop-filter:blur(36px) saturate(175%); -webkit-backdrop-filter:blur(36px) saturate(175%);
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .brand-logo {
  color:#0a1a2f; background:linear-gradient(145deg,#f1f4f8,#9bb4d0 62%,#40546a); border-color:rgba(215,228,245,.55);
  box-shadow:0 0 0 2px rgba(155,180,208,.12),0 8px 24px rgba(155,180,208,.2),inset 0 1px rgba(255,255,255,.52);
}

/* Keep the account card and sign-out button separated in every role sidebar. */
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .sidebar-foot {
  display:flex; flex-direction:column; gap:9px;
}
body:is([data-role-theme="owner"],[data-role-theme="admin"],[data-role-theme="reseller"]) .profile-trigger { margin:0 0 1px; }

/* Shared black and silver theme: color overrides only; layout remains defined above. */
body[data-role-theme], body[data-theme="light"] {
  --bg:#050505 !important; --bg-2:#070707 !important; --panel:#0b0b0b !important; --panel-2:#0e0e0e !important;
  --line:#1c1c1c !important; --line-2:#242424 !important; --text:#f5f5f5 !important; --muted:#a3a3a3 !important; --dim:#737373 !important;
  --accent:#e5e5e5 !important; --accent-2:#e5e5e5 !important; --accent-soft:rgba(229,229,229,.08) !important;
  --green:#86efac !important; --green-soft:#09130d !important; --red:#f87171 !important; --red-soft:#180a0a !important;
  --amber:#fbbf24 !important; --amber-soft:#151008 !important; --role-trim:#e5e5e5 !important; --role-glow:rgba(229,229,229,.08) !important;
  --warning:#fbbf24 !important;
  color-scheme:dark; color:#f5f5f5 !important; background:#050505 !important; background-image:none !important;
}
body[data-role-theme] :is(.app,.main,.content,.auth-screen) { background:#050505 !important; background-image:none !important; }
body[data-role-theme] .auth-bg { background:#050505 !important; }
body[data-role-theme] .auth-card { color:#f5f5f5 !important; background:#0b0b0b !important; border-color:#242424 !important; box-shadow:0 18px 45px rgba(0,0,0,.5) !important; }
body[data-role-theme] .auth-card::before { background:#303030 !important; opacity:1 !important; }
body[data-role-theme] .auth-logo { color:#050505 !important; background:#e5e5e5 !important; border-color:#e5e5e5 !important; box-shadow:none !important; }

body[data-role-theme] .sidebar { background:#050505 !important; border-color:#1c1c1c !important; box-shadow:none !important; }
body[data-role-theme] .topbar { background:#070707 !important; border-color:#1c1c1c !important; box-shadow:none !important; }
body[data-role-theme] .brand-logo, body[data-role-theme] .avatar { color:#050505 !important; background:#e5e5e5 !important; border-color:#e5e5e5 !important; box-shadow:none !important; }
body[data-role-theme] .brand b, body[data-role-theme] .topbar h2 { color:#f5f5f5 !important; }
body[data-role-theme] .brand { height:46px; min-height:46px; padding-bottom:12px; box-sizing:border-box; }
body[data-role-theme] .me-role, body[data-role-theme] .nav-sep { color:#666666 !important; }
body[data-role-theme] .nav-item { color:#8a8a8a !important; background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
body[data-role-theme] .nav-item:hover { color:#d4d4d4 !important; background:#111111 !important; border-color:#242424 !important; }
body[data-role-theme] .nav-item.active { color:#ffffff !important; background:#151515 !important; border-color:#303030 !important; box-shadow:inset 3px 0 #e5e5e5 !important; }
@media(max-width:720px) { body[data-role-theme] .brand { height:40px; min-height:40px; padding-bottom:6px; } }

body[data-role-theme] :is(.card,.stat,.app-card,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription) {
  color:#f5f5f5 !important; background:#0b0b0b !important; background-image:none !important; border-color:#242424 !important; box-shadow:none !important;
}
body[data-role-theme] :is(.card:hover,.stat:hover,.app-card:hover,.dashboard-panel:hover,.dashboard-status:hover,.metric-card:hover) { background:#101010 !important; border-color:#333333 !important; box-shadow:none !important; }
body[data-role-theme] :is(.dashboard-paid-subscription-details > div,.dashboard-bar-row .bar-track) { background:#111111 !important; border-color:#242424 !important; }
body[data-role-theme] .dashboard-orb { background:radial-gradient(circle,#1b1b1b,#0b0b0b 72%) !important; box-shadow:none !important; }
body[data-role-theme] .orb-core { color:#050505 !important; background:#e5e5e5 !important; border-color:#e5e5e5 !important; box-shadow:none !important; }
body[data-role-theme] :is(.orb-ring,.ring-two) { border-color:#303030 !important; }
body[data-role-theme] .dashboard-bar-row :is(.bar-fill,.staff-fill) { background:#e5e5e5 !important; box-shadow:none !important; }
body[data-role-theme] .dashboard-bar-row :is(.bar-fill,.staff-fill)::after { border-color:#f5f5f5 !important; }
body[data-role-theme] :is(.metric-icon,.status-icon,.activity-icon,.panel-mark,.mode-icon,.assigned-app-icon,.profile-summary-icon) { color:#cfcfcf !important; background:#151515 !important; border-color:#2a2a2a !important; box-shadow:none !important; }
body[data-role-theme] :is(.pulse-dot,.metric-dot) { background:#e5e5e5 !important; box-shadow:none !important; }
body[data-role-theme] .status-light.is-online { background:#86efac !important; box-shadow:none !important; }
body[data-role-theme] .status-light.is-offline { background:#737373 !important; box-shadow:none !important; }

body[data-role-theme] :is(input,select,textarea) { color:#f5f5f5 !important; background:#111111 !important; border-color:#292929 !important; accent-color:#e5e5e5 !important; }
body[data-role-theme] :is(input,select,textarea)::placeholder { color:#666666 !important; }
body[data-role-theme] :is(input,select,textarea):hover { background:#151515 !important; border-color:#383838 !important; }
body[data-role-theme] :is(input,select,textarea):focus { color:#f5f5f5 !important; background:#171717 !important; border-color:#5a5a5a !important; outline:1px solid rgba(229,229,229,.12) !important; box-shadow:none !important; }
body[data-role-theme] select option { color:#f5f5f5; background:#0d0d0d; }
body[data-role-theme] .btn-primary { color:#050505 !important; background:#e5e5e5 !important; border-color:#e5e5e5 !important; box-shadow:none !important; text-shadow:none !important; }
body[data-role-theme] .btn-primary:hover:not(:disabled) { color:#000000 !important; background:#ffffff !important; border-color:#ffffff !important; box-shadow:none !important; }
body[data-role-theme] .btn:not(.btn-primary):not(.btn-danger):not(.btn-green) { color:#d4d4d4; background:#111111; border-color:#292929; }
body[data-role-theme] .btn:not(.btn-primary):not(.btn-danger):not(.btn-green):hover:not(:disabled) { color:#f5f5f5; background:#181818; border-color:#3a3a3a; }
body[data-role-theme] :is(.btn-danger,.badge.red,.pill.bad) { color:#f87171 !important; background:#180a0a !important; border-color:#4a2020 !important; }
body[data-role-theme] .btn-danger:hover:not(:disabled) { background:#261010 !important; }
body[data-role-theme] :is(.btn-green,.badge.green,.pill.ok) { color:#86efac !important; background:#09130d !important; border-color:#1d3a27 !important; }
body[data-role-theme] :is(.badge.amber,.pill.warn) { color:#fbbf24 !important; background:#151008 !important; border-color:#403019 !important; }
body[data-role-theme] :is(.badge,.pill):not(.green):not(.red):not(.amber):not(.ok):not(.bad) { color:#cfcfcf !important; background:#151515 !important; border-color:#2a2a2a !important; }

body[data-role-theme] .table-wrap { background:#0b0b0b !important; border-color:#242424 !important; }
body[data-role-theme] table { color:#e5e5e5; background:#0b0b0b; }
body[data-role-theme] th { color:#a3a3a3; background:#0e0e0e; border-color:#242424; }
body[data-role-theme] td { color:#e5e5e5; border-color:#242424; }
body[data-role-theme] tbody tr:hover { background:#111111 !important; }
body[data-role-theme] .modal-backdrop { background:rgba(0,0,0,.78) !important; }
body[data-role-theme] .modal { color:#f5f5f5 !important; background:#0b0b0b !important; border-color:#242424 !important; box-shadow:0 24px 60px rgba(0,0,0,.45) !important; }
body[data-role-theme] .toast { color:#f5f5f5 !important; background:#0e0e0e !important; border-color:#242424 !important; box-shadow:0 12px 32px rgba(0,0,0,.35) !important; }
body[data-role-theme] .toast.ok { color:#86efac !important; border-color:#1d3a27 !important; }
body[data-role-theme] .toast.err { color:#f87171 !important; border-color:#4a2020 !important; }
body[data-role-theme] .discord-guide-menu { background:#0d0d0d !important; }
body[data-role-theme] .discord-guide-menu span { color:#d4d4d4 !important; background:#151515 !important; }
body[data-role-theme="auth"] .auth-card :is(.link-btn,a) { color:#e5e5e5 !important; }
body[data-role-theme="auth"] .auth-card a:hover { color:#ffffff !important; }
body[data-role-theme="auth"] :is(.social-provider-button,.signup-discord-panel,.signup-verify-panel,.signup-bot-toggle-control) { color:#d4d4d4 !important; background:#111111 !important; border-color:#292929 !important; box-shadow:none !important; }
body[data-role-theme="auth"] .social-provider-button:hover { color:#ffffff !important; background:#181818 !important; border-color:#3a3a3a !important; }
body[data-role-theme="auth"] :is(.discord-mark,.social-provider-button svg:not(.google-mark)) { color:#cfcfcf !important; }
body[data-role-theme="auth"] .social-login-divider::before,
body[data-role-theme="auth"] .social-login-divider::after { background:#242424 !important; }
body[data-role-theme="auth"] .setup-banner { color:#d4d4d4 !important; background:#111111 !important; border-color:#292929 !important; }
body[data-role-theme] :is(.profile-trigger,.create-mode-card,.connect-box,.result-box,.notice,.empty,.empty-state,.loading-state) { color:#f5f5f5; background:#0e0e0e; border-color:#242424; box-shadow:none; }
body[data-role-theme] .create-mode-card::after { background:rgba(229,229,229,.06) !important; }
body[data-role-theme] .create-mode-card:hover:not(:disabled) { color:#f5f5f5 !important; background:#101010 !important; border-color:#333333 !important; box-shadow:none !important; }
body[data-role-theme] .btn-glass:hover { color:#f5f5f5 !important; background:#181818 !important; border-color:#3a3a3a !important; box-shadow:none !important; }
body[data-role-theme] .keycode:hover { border-color:#333333 !important; box-shadow:none !important; }
body[data-role-theme] :is(.dashboard-eyebrow,.dashboard-bar-row .count,.log-actor,.profile-chevron) { color:#a3a3a3 !important; }
body[data-role-theme] a { color:#e5e5e5; }
body[data-role-theme] a:hover { color:#ffffff; }
body[data-role-theme] ::selection { color:#050505 !important; background:rgba(229,229,229,.75) !important; }

* { scrollbar-color:#242424 #070707; }
::-webkit-scrollbar-track { background:#070707; }
::-webkit-scrollbar-thumb { background:#242424; }
::-webkit-scrollbar-thumb:hover { background:#353535; }

/* Keep the reference pointer consistent over every page element, including fields and custom controls. */
body[data-role-theme], body[data-role-theme] * { cursor:url("../assets/cyber-arrow.svg?v=electric-blue-pointer-20261008-1") 1 1, auto !important; }
body[data-role-theme] :is(button:disabled,[aria-disabled="true"],button:disabled *,[aria-disabled="true"] *) { cursor:not-allowed !important; }
@media (hover:none), (pointer:coarse) {
  body[data-role-theme], body[data-role-theme] * { cursor:auto !important; }
  body[data-role-theme] :is(button:disabled,[aria-disabled="true"],button:disabled *,[aria-disabled="true"] *) { cursor:not-allowed !important; }
}

/* Global premium glass palette. These are visual-only overrides for every role and page. */
body[data-role-theme], body[data-theme="light"] {
  --bg:#050817 !important;
  --bg-2:#070b1d !important;
  --panel:rgba(14,21,48,.92) !important;
  --panel-2:rgba(20,25,57,.9) !important;
  --line:rgba(105,125,190,.28) !important;
  --line-2:rgba(126,96,220,.3) !important;
  --text:#f5f7ff !important;
  --muted:#b8c3dd !important;
  --dim:#7c89a8 !important;
  --accent:#8b5cf6 !important;
  --accent-2:#22d3ee !important;
  --accent-soft:rgba(139,92,246,.16) !important;
  --green:#34d399 !important;
  --green-soft:rgba(16,185,129,.14) !important;
  --red:#f87171 !important;
  --red-soft:rgba(239,68,68,.12) !important;
  --amber:#fbbf24 !important;
  --amber-soft:rgba(251,191,36,.12) !important;
  --role-trim:#c084fc !important;
  --role-glow:rgba(139,92,246,.18) !important;
  --warning:#fbbf24 !important;
  --bg-primary:#050817;
  --bg-secondary:#070b1d;
  --bg-sidebar:rgba(7,10,24,.94);
  --glass-primary:rgba(14,21,48,.88);
  --glass-secondary:rgba(20,25,57,.86);
  --glass-elevated:rgba(27,25,67,.9);
  --border-glass:rgba(105,125,190,.28);
  --border-active:rgba(190,100,255,.7);
  --text-primary:#f5f7ff;
  --text-secondary:#b8c3dd;
  --text-muted:#7c89a8;
  --accent-purple:#8b5cf6;
  --accent-cyan:#22d3ee;
  --accent-violet:#a855f7;
  --accent-magenta:#ec4899;
  --accent-green:#34d399;
  --accent-red:#f87171;
  --accent-warning:#fbbf24;
  --shadow-glass:0 16px 38px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.055);
  --glow-purple:0 0 25px rgba(139,92,246,.08);
  --glow-cyan:0 0 25px rgba(34,211,238,.08);
  color-scheme:dark;
  color:#f5f7ff !important;
  background-color:#050817 !important;
  background-image:
    radial-gradient(ellipse at 12% 18%,rgba(34,211,238,.10),transparent 34%),
    radial-gradient(ellipse at 83% 22%,rgba(139,92,246,.14),transparent 38%),
    radial-gradient(ellipse at 63% 88%,rgba(236,72,153,.085),transparent 42%),
    linear-gradient(135deg,#050817,#070b1d 58%,#09091d) !important;
}
body[data-role-theme] :is(.app,.main,.content) { background:transparent !important; background-image:none !important; }
body[data-role-theme="auth"] .auth-screen { background:transparent !important; }
body[data-role-theme="auth"] .auth-bg {
  background:
    radial-gradient(ellipse at 18% 26%,rgba(34,211,238,.15),transparent 38%),
    radial-gradient(ellipse at 78% 24%,rgba(139,92,246,.19),transparent 42%),
    radial-gradient(ellipse at 68% 78%,rgba(236,72,153,.11),transparent 40%),
    linear-gradient(135deg,#050817,#0a0d24 55%,#08091c) !important;
}
body[data-role-theme] .sidebar { background:rgba(7,10,24,.94) !important; border-color:rgba(91,110,170,.25) !important; box-shadow:8px 0 30px rgba(0,0,0,.16) !important; backdrop-filter:blur(18px) saturate(140%) !important; -webkit-backdrop-filter:blur(18px) saturate(140%) !important; }
body[data-role-theme] .topbar { background:rgba(7,12,30,.88) !important; border-color:rgba(85,110,180,.22) !important; box-shadow:0 8px 28px rgba(0,0,0,.16) !important; backdrop-filter:blur(16px) saturate(140%) !important; -webkit-backdrop-filter:blur(16px) saturate(140%) !important; }
body[data-role-theme] :is(.brand b,.topbar h2,.dashboard-eyebrow,.profile-chevron) { color:#c4b5fd !important; }
body[data-role-theme] :is(.me-role,.nav-sep) { color:#9aa8c4 !important; }
body[data-role-theme] .nav-item { color:#a8b4d0 !important; background:transparent !important; border-color:transparent !important; box-shadow:none !important; }
body[data-role-theme] .nav-item:hover { color:#e7e9ff !important; background:rgba(70,60,130,.45) !important; border-color:rgba(126,96,220,.3) !important; }
body[data-role-theme] .nav-item.active { color:#ffffff !important; background:linear-gradient(90deg,rgba(139,92,246,.48),rgba(34,211,238,.24)) !important; border-color:rgba(170,130,255,.65) !important; box-shadow:inset 3px 0 #22d3ee,0 0 18px rgba(139,92,246,.18) !important; }
body[data-role-theme] .brand-logo,
body[data-role-theme] .avatar { color:#ffffff !important; background:linear-gradient(135deg,#8b5cf6,#22d3ee) !important; border-color:rgba(255,255,255,.25) !important; box-shadow:0 0 18px rgba(139,92,246,.18) !important; }

body[data-role-theme] :is(.card,.stat,.app-card,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.profile-trigger,.create-mode-card,.connect-box,.result-box,.notice,.empty,.empty-state,.loading-state,.profile-2fa-setup,.profile-2fa-instructions,.profile-2fa-qr-column,.signup-discord-panel,.signup-verify-panel) {
  color:#f5f7ff !important;
  background:linear-gradient(140deg,rgba(20,25,57,.92),rgba(14,21,48,.91)) !important;
  background-color:rgba(14,21,48,.9) !important;
  border-color:rgba(105,125,190,.28) !important;
  box-shadow:var(--shadow-glass),var(--glow-purple) !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
}
body[data-role-theme] .dashboard-hero { background:radial-gradient(ellipse at 78% 40%,rgba(34,211,238,.16),transparent 38%),radial-gradient(ellipse at 16% 100%,rgba(236,72,153,.13),transparent 44%),linear-gradient(125deg,rgba(27,25,67,.94),rgba(14,21,48,.94)) !important; border-color:rgba(139,92,246,.38) !important; box-shadow:0 22px 52px rgba(0,0,0,.3),0 0 28px rgba(139,92,246,.12),inset 0 1px rgba(255,255,255,.08) !important; }
body[data-role-theme] :is(.card:hover,.stat:hover,.app-card:hover,.dashboard-panel:hover,.dashboard-status:hover,.metric-card:hover,.dashboard-activity:hover,.dashboard-paid-subscription:hover,.create-mode-card:hover:not(:disabled),.profile-trigger:hover) { background:linear-gradient(140deg,rgba(27,25,67,.94),rgba(16,24,53,.94)) !important; border-color:rgba(110,200,255,.55) !important; box-shadow:var(--shadow-glass),0 0 25px rgba(34,211,238,.08) !important; }
body[data-role-theme] :is(.dashboard-paid-subscription-details > div,.dashboard-bar-row .bar-track,.profile-2fa-qr-wrap,.profile-2fa-locked-panel) { background:rgba(20,27,54,.88) !important; border-color:rgba(105,125,190,.28) !important; }
body[data-role-theme] .dashboard-orb { background:radial-gradient(circle at 32% 25%,rgba(103,232,249,.32),rgba(139,92,246,.2) 42%,rgba(14,21,48,.72) 75%) !important; box-shadow:inset 0 0 38px rgba(103,232,249,.12),0 0 42px rgba(139,92,246,.14) !important; }
body[data-role-theme] .orb-core { color:#ffffff !important; background:linear-gradient(135deg,#c084fc,#8b5cf6 52%,#22d3ee) !important; border-color:rgba(255,255,255,.42) !important; box-shadow:0 10px 28px rgba(139,92,246,.24) !important; }
body[data-role-theme] :is(.orb-ring,.ring-two) { border-color:rgba(103,232,249,.3) !important; }
body[data-role-theme] .dashboard-bar-row :is(.bar-fill,.staff-fill) { background:linear-gradient(90deg,#8b5cf6,#22d3ee) !important; box-shadow:0 0 12px rgba(34,211,238,.16) !important; }
body[data-role-theme] .dashboard-bar-row :is(.bar-fill,.staff-fill)::after { border-color:#c4b5fd !important; }
body[data-role-theme] :is(.metric-icon,.status-icon,.activity-icon,.panel-mark,.mode-icon,.assigned-app-icon,.profile-summary-icon,.otp-template-icon) { color:#67e8f9 !important; background:rgba(34,211,238,.13) !important; border-color:rgba(34,211,238,.35) !important; box-shadow:0 0 18px rgba(34,211,238,.07) !important; }
body[data-role-theme] :is(.pulse-dot,.metric-dot) { background:#22d3ee !important; box-shadow:0 0 12px rgba(34,211,238,.35) !important; }
body[data-role-theme] .status-light.is-online { background:#34d399 !important; box-shadow:0 0 10px rgba(52,211,153,.24) !important; }
body[data-role-theme] .status-light.is-offline { background:#7c89a8 !important; box-shadow:none !important; }

body[data-role-theme] :is(input,select,textarea) { color:#f1f5ff !important; background:rgba(20,27,54,.92) !important; border-color:rgba(100,120,180,.3) !important; accent-color:#8b5cf6 !important; }
body[data-role-theme] :is(input,select,textarea)::placeholder { color:#7582a3 !important; }
body[data-role-theme] :is(input,select,textarea):hover { background:rgba(28,36,70,.95) !important; border-color:rgba(126,146,210,.44) !important; }
body[data-role-theme] :is(input,select,textarea):focus { color:#f1f5ff !important; background:rgba(32,35,78,.96) !important; border-color:rgba(139,92,246,.7) !important; outline:1px solid rgba(139,92,246,.18) !important; box-shadow:0 0 15px rgba(139,92,246,.12) !important; }
body[data-role-theme] select option { color:#eaf0ff !important; background:#111832 !important; }
body[data-role-theme] .btn-primary { color:#ffffff !important; background:linear-gradient(90deg,#c084fc,#8b5cf6,#22d3ee) !important; border-color:rgba(255,255,255,.25) !important; box-shadow:0 0 22px rgba(139,92,246,.22) !important; text-shadow:none !important; }
body[data-role-theme] .btn-primary:hover:not(:disabled) { color:#ffffff !important; background:linear-gradient(90deg,#d8b4fe,#a78bfa,#67e8f9) !important; border-color:rgba(255,255,255,.38) !important; box-shadow:0 0 24px rgba(139,92,246,.28) !important; }
body[data-role-theme] .btn:not(.btn-primary):not(.btn-danger):not(.btn-green) { color:#dce7ff !important; background:rgba(24,32,63,.88) !important; border-color:rgba(115,135,200,.35) !important; box-shadow:none !important; }
body[data-role-theme] .btn:not(.btn-primary):not(.btn-danger):not(.btn-green):hover:not(:disabled) { color:#ffffff !important; background:rgba(38,47,86,.94) !important; border-color:rgba(120,190,255,.55) !important; }
body[data-role-theme] :is(.btn-danger,.badge.red,.pill.bad) { color:#fca5a5 !important; background:rgba(239,68,68,.12) !important; border-color:rgba(248,113,113,.4) !important; box-shadow:0 0 15px rgba(248,113,113,.08) !important; }
body[data-role-theme] .btn-danger:hover:not(:disabled) { background:rgba(127,29,29,.34) !important; }
body[data-role-theme] :is(.btn-green,.badge.green,.pill.ok) { color:#6ee7b7 !important; background:rgba(16,185,129,.14) !important; border-color:rgba(52,211,153,.4) !important; }
body[data-role-theme] :is(.badge.amber,.pill.warn) { color:#fbbf24 !important; background:rgba(251,191,36,.12) !important; border-color:rgba(251,191,36,.36) !important; }
body[data-role-theme] :is(.badge.purple,.badge:not(.green):not(.red):not(.amber),.pill:not(.ok):not(.bad):not(.warn)) { color:#c4b5fd !important; background:rgba(139,92,246,.16) !important; border-color:rgba(167,139,250,.4) !important; }

body[data-role-theme] .table-wrap { background:rgba(13,20,43,.84) !important; border-color:rgba(90,110,170,.26) !important; backdrop-filter:blur(16px) saturate(135%) !important; -webkit-backdrop-filter:blur(16px) saturate(135%) !important; }
body[data-role-theme] table { color:#eaf0ff !important; background:rgba(13,20,43,.78) !important; }
body[data-role-theme] th { color:#b8c3dd !important; background:rgba(26,32,62,.88) !important; border-color:rgba(90,110,170,.22) !important; }
body[data-role-theme] td { color:#eaf0ff !important; background:rgba(14,21,45,.72) !important; border-color:rgba(90,110,170,.22) !important; }
body[data-role-theme] tbody tr:hover td { background:rgba(48,40,91,.48) !important; }
body[data-role-theme] .modal-backdrop { background:rgba(2,4,12,.72) !important; backdrop-filter:blur(8px) !important; }
body[data-role-theme] .modal { color:#f5f7ff !important; background:rgba(12,17,38,.96) !important; border-color:rgba(139,92,246,.35) !important; box-shadow:0 20px 70px rgba(0,0,0,.55) !important; backdrop-filter:blur(24px) saturate(140%) !important; -webkit-backdrop-filter:blur(24px) saturate(140%) !important; }
body[data-role-theme] .toast { color:#f5f7ff !important; background:rgba(14,21,48,.94) !important; border-color:rgba(105,125,190,.3) !important; box-shadow:var(--shadow-glass),var(--glow-purple) !important; backdrop-filter:blur(18px) saturate(140%) !important; -webkit-backdrop-filter:blur(18px) saturate(140%) !important; }
body[data-role-theme] .toast.ok { color:#6ee7b7 !important; border-color:rgba(52,211,153,.4) !important; }
body[data-role-theme] .toast.err { color:#fca5a5 !important; border-color:rgba(248,113,113,.4) !important; }
body[data-role-theme] :is(.discord-guide-menu,.dropdown-menu,[role="listbox"]) { color:#eaf0ff !important; background:rgba(17,24,50,.97) !important; border-color:rgba(104,120,180,.35) !important; box-shadow:var(--shadow-glass) !important; backdrop-filter:blur(18px) saturate(140%) !important; -webkit-backdrop-filter:blur(18px) saturate(140%) !important; }
body[data-role-theme] .discord-guide-menu span { color:#dce7ff !important; background:rgba(24,32,63,.82) !important; }
body[data-role-theme="auth"] .auth-card { background:linear-gradient(145deg,rgba(20,25,57,.96),rgba(12,17,38,.96)) !important; border-color:rgba(126,96,220,.36) !important; box-shadow:0 30px 80px rgba(0,0,0,.48),0 0 35px rgba(139,92,246,.12) !important; }
body[data-role-theme="auth"] .auth-card::before { background:linear-gradient(90deg,transparent,#22d3ee,#8b5cf6,#ec4899,transparent) !important; }
body[data-role-theme="auth"] .auth-logo { color:#ffffff !important; background:linear-gradient(135deg,#c084fc,#8b5cf6,#22d3ee) !important; border-color:rgba(255,255,255,.3) !important; box-shadow:0 8px 24px rgba(139,92,246,.18) !important; }
body[data-role-theme="auth"] .auth-card :is(.link-btn,a) { color:#c4b5fd !important; }
body[data-role-theme="auth"] .auth-card a:hover { color:#67e8f9 !important; }
body[data-role-theme="auth"] :is(.social-provider-button,.signup-discord-panel,.signup-verify-panel,.signup-bot-toggle-control) { color:#dce7ff !important; background:rgba(20,25,57,.9) !important; border-color:rgba(105,125,190,.3) !important; }
body[data-role-theme="auth"] .social-provider-button:hover { color:#ffffff !important; background:rgba(38,47,86,.92) !important; border-color:rgba(120,190,255,.55) !important; }
body[data-role-theme="auth"] :is(.discord-mark,.social-provider-button svg:not(.google-mark)) { color:#93c5fd !important; }
body[data-role-theme="auth"] .social-login-divider::before, body[data-role-theme="auth"] .social-login-divider::after { background:linear-gradient(90deg,transparent,rgba(139,92,246,.45),transparent) !important; }
body[data-role-theme="auth"] .setup-banner { color:#c4b5fd !important; background:rgba(139,92,246,.12) !important; border-color:rgba(167,139,250,.38) !important; }
body[data-role-theme] a { color:#67e8f9; }
body[data-role-theme] a:hover { color:#c4b5fd; }
body[data-role-theme] ::selection { color:#ffffff !important; background:rgba(139,92,246,.62) !important; }
body[data-role-theme] { scrollbar-color:#303a66 #070b1d; }
body[data-role-theme] ::-webkit-scrollbar-track { background:#070b1d; }
body[data-role-theme] ::-webkit-scrollbar-thumb { background:#303a66; }
body[data-role-theme] ::-webkit-scrollbar-thumb:hover { background:#4b4f9a; }
body[data-role-theme] #api-pill { color:#6ee7b7 !important; background:rgba(16,185,129,.12) !important; border-color:rgba(52,211,153,.45) !important; box-shadow:0 0 16px rgba(52,211,153,.08) !important; }
body[data-role-theme] .dashboard-status-row .dashboard-status:nth-child(1) { background:radial-gradient(ellipse at 8% 50%,rgba(16,185,129,.16),transparent 60%),linear-gradient(135deg,rgba(14,34,46,.94),rgba(12,20,45,.94)) !important; border-color:rgba(52,211,153,.45) !important; box-shadow:var(--shadow-glass),0 0 22px rgba(16,185,129,.07) !important; }
body[data-role-theme] .dashboard-status-row .dashboard-status:nth-child(2) { background:radial-gradient(ellipse at 8% 50%,rgba(59,130,246,.18),transparent 62%),linear-gradient(135deg,rgba(20,25,57,.94),rgba(12,19,45,.94)) !important; border-color:rgba(96,165,250,.52) !important; box-shadow:var(--shadow-glass),0 0 22px rgba(59,130,246,.08) !important; }
body[data-role-theme] .dashboard-status-row .dashboard-status:nth-child(3) { background:radial-gradient(ellipse at 8% 50%,rgba(34,211,238,.15),transparent 62%),linear-gradient(135deg,rgba(15,28,58,.94),rgba(12,19,45,.94)) !important; border-color:rgba(34,211,238,.42) !important; box-shadow:var(--shadow-glass),0 0 22px rgba(34,211,238,.07) !important; }
body[data-role-theme] .dashboard-status-row .dashboard-status:nth-child(4) { background:radial-gradient(ellipse at 8% 50%,rgba(168,85,247,.17),transparent 62%),linear-gradient(135deg,rgba(27,20,61,.94),rgba(14,18,47,.94)) !important; border-color:rgba(192,132,252,.52) !important; box-shadow:var(--shadow-glass),0 0 22px rgba(168,85,247,.08) !important; }
body[data-role-theme] .dashboard-status-row .dashboard-status:nth-child(1) .status-icon { color:#6ee7b7 !important; background:rgba(16,185,129,.15) !important; border-color:rgba(52,211,153,.42) !important; }
body[data-role-theme] .dashboard-status-row .dashboard-status:nth-child(2) .status-icon { color:#93c5fd !important; background:rgba(59,130,246,.16) !important; border-color:rgba(96,165,250,.45) !important; }
body[data-role-theme] .dashboard-status-row .dashboard-status:nth-child(3) .status-icon { color:#67e8f9 !important; background:rgba(34,211,238,.15) !important; border-color:rgba(34,211,238,.4) !important; }
body[data-role-theme] .dashboard-status-row .dashboard-status:nth-child(4) .status-icon { color:#e9d5ff !important; background:rgba(168,85,247,.16) !important; border-color:rgba(192,132,252,.42) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(1) { background:radial-gradient(ellipse at 95% 8%,rgba(34,211,238,.15),transparent 54%),linear-gradient(140deg,rgba(17,28,59,.95),rgba(12,19,45,.95)) !important; border-color:rgba(103,232,249,.52) !important; box-shadow:var(--shadow-glass),0 0 22px rgba(34,211,238,.07) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(2) { background:radial-gradient(ellipse at 95% 8%,rgba(139,92,246,.19),transparent 54%),linear-gradient(140deg,rgba(25,22,64,.95),rgba(14,19,48,.95)) !important; border-color:rgba(167,139,250,.56) !important; box-shadow:var(--shadow-glass),0 0 22px rgba(139,92,246,.08) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(3) { background:radial-gradient(ellipse at 95% 8%,rgba(59,130,246,.17),transparent 54%),linear-gradient(140deg,rgba(16,29,62,.95),rgba(12,19,45,.95)) !important; border-color:rgba(96,165,250,.52) !important; box-shadow:var(--shadow-glass),0 0 22px rgba(59,130,246,.07) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(4) { background:radial-gradient(ellipse at 95% 8%,rgba(236,72,153,.16),transparent 54%),linear-gradient(140deg,rgba(30,20,61,.95),rgba(14,18,47,.95)) !important; border-color:rgba(217,70,239,.52) !important; box-shadow:var(--shadow-glass),0 0 22px rgba(236,72,153,.07) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(1) .metric-icon { color:#67e8f9 !important; background:rgba(34,211,238,.15) !important; border-color:rgba(34,211,238,.4) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(2) .metric-icon { color:#c4b5fd !important; background:rgba(139,92,246,.17) !important; border-color:rgba(167,139,250,.44) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(3) .metric-icon { color:#93c5fd !important; background:rgba(59,130,246,.15) !important; border-color:rgba(96,165,250,.42) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(4) .metric-icon { color:#f0abfc !important; background:rgba(217,70,239,.15) !important; border-color:rgba(217,70,239,.4) !important; }
body[data-role-theme] .dashboard-metrics .green-dot { background:#34d399 !important; box-shadow:0 0 10px rgba(52,211,153,.25) !important; }
body[data-role-theme] .dashboard-metrics .amber-dot { background:#fbbf24 !important; box-shadow:0 0 10px rgba(251,191,36,.2) !important; }
body[data-role-theme] .dashboard-panels > .dashboard-panel:first-child { border-color:rgba(34,211,238,.38) !important; box-shadow:var(--shadow-glass),0 0 24px rgba(34,211,238,.07) !important; }
body[data-role-theme] .dashboard-panels > .dashboard-panel:nth-child(2) { border-color:rgba(167,139,250,.42) !important; box-shadow:var(--shadow-glass),0 0 24px rgba(139,92,246,.08) !important; }
body[data-role-theme] .hero-grid-lines { opacity:.22 !important; background-image:linear-gradient(rgba(103,232,249,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.12) 1px,transparent 1px) !important; }

/* Match the reference's brighter aurora edge and flowing light on the existing hero. */
body[data-role-theme] .dashboard-hero { border-color:rgba(103,232,249,.72) !important; box-shadow:0 22px 52px rgba(0,0,0,.3),0 0 28px rgba(34,211,238,.15),0 0 42px rgba(139,92,246,.16),inset 0 1px rgba(255,255,255,.1) !important; }
body[data-role-theme] .hero-grid-lines { z-index:0 !important; inset:0 !important; opacity:.84 !important; background-image:linear-gradient(rgba(103,232,249,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(103,232,249,.075) 1px,transparent 1px) !important; background-size:38px 38px,38px 38px !important; background-position:center,center !important; mask-image:linear-gradient(90deg,#000 0%,#000 100%) !important; pointer-events:none !important; }
body[data-role-theme] .nav-item.active { background:linear-gradient(100deg,rgba(139,92,246,.64),rgba(59,130,246,.38) 58%,rgba(34,211,238,.48)) !important; border-color:rgba(170,130,255,.82) !important; box-shadow:inset 3px 0 #67e8f9,0 0 20px rgba(139,92,246,.3),0 0 30px rgba(34,211,238,.12) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(1) { border-color:rgba(103,232,249,.68) !important; box-shadow:var(--shadow-glass),0 0 26px rgba(34,211,238,.12) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(2) { border-color:rgba(167,139,250,.72) !important; box-shadow:var(--shadow-glass),0 0 26px rgba(139,92,246,.14) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(3) { border-color:rgba(96,165,250,.66) !important; box-shadow:var(--shadow-glass),0 0 26px rgba(59,130,246,.12) !important; }
body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(4) { border-color:rgba(217,70,239,.68) !important; box-shadow:var(--shadow-glass),0 0 26px rgba(236,72,153,.12) !important; }
body[data-role-theme] .dashboard-panels > .dashboard-panel:first-child { border-color:rgba(34,211,238,.58) !important; box-shadow:var(--shadow-glass),0 0 30px rgba(34,211,238,.1) !important; }
body[data-role-theme] .dashboard-panels > .dashboard-panel:nth-child(2) { border-color:rgba(167,139,250,.6) !important; box-shadow:var(--shadow-glass),0 0 30px rgba(139,92,246,.12) !important; }

/* Extend the same glass surfaces to page-specific panels used outside the dashboard. */
body[data-role-theme] :is(.self-account-card,.assigned-app-card,.assigned-choice,.assigned-app-empty,.assigned-app-value,.owner-app-credential,.owner-active-subscription,.billing-payment-status,.password-recovery-panel,.profile-2fa-locked-panel,.profile-2fa-instructions,.profile-2fa-qr-column,.otp-glass-panel,.otp-cell,.bot-setup-panel,.discord-guide,.activity-item,.log-row,.log-entry,.exe-row,.build-row,.app-action-info) {
  color:#f5f7ff !important;
  background:linear-gradient(140deg,rgba(20,25,57,.9),rgba(14,21,48,.88)) !important;
  border-color:rgba(105,125,190,.28) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.035) !important;
  backdrop-filter:blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(130%) !important;
}
body[data-role-theme] :is(.assigned-choice:hover,.assigned-app-card:hover,.self-account-card:hover,.owner-active-subscription:hover) {
  background:linear-gradient(140deg,rgba(27,25,67,.94),rgba(16,24,53,.94)) !important;
  border-color:rgba(110,200,255,.48) !important;
}
body[data-role-theme] .assigned-choice:has(input:checked) {
  border:2px solid #22d3ee !important;
  background:linear-gradient(105deg,rgba(34,211,238,.18),rgba(34,211,238,.07)) !important;
  box-shadow:inset 4px 0 #22d3ee,0 0 0 1px rgba(34,211,238,.42),0 0 24px rgba(34,211,238,.3) !important;
}
body[data-role-theme] .assigned-choice:has(input:checked) .assigned-choice-name { color:#e6fcff !important; font-weight:800 !important; }
body[data-role-theme] .assigned-choice input[type="checkbox"]:checked { border-color:#a5f3fc !important; background:#22d3ee !important; box-shadow:0 0 0 3px rgba(34,211,238,.24),0 0 16px rgba(34,211,238,.65) !important; }
body[data-role-theme] :is(.assigned-app-icon,.connection-result-icon) { color:#67e8f9 !important; background:rgba(34,211,238,.13) !important; border-color:rgba(34,211,238,.35) !important; }
body[data-role-theme] :is(.assigned-secret-value input,.otp-cell) { color:#f1f5ff !important; background:rgba(20,27,54,.92) !important; }
/* Keep QR codes on a light field so authenticator apps can scan them. */
body[data-role-theme] :is(.profile-2fa-qr-wrap,.profile-2fa-qr-stage) { color:#263238 !important; background:#ffffff !important; border-color:rgba(126,96,220,.42) !important; }
body[data-role-theme] .profile-2fa-qr-caption { color:#b8c3dd !important; }

/* Keep the License API heading readable while visually obscuring its panel contents. */
body[data-role-theme] .license-api-panel > :not(.card-head),
body[data-role-theme] .license-api-panel .card-head > button,
body[data-role-theme] .license-api-panel .card-head > div > :not(h3) {
  filter:blur(6px);
  user-select:none;
}
/* Keep page headings easy to scan against the dark panel theme. */
body[data-role-theme] #content h1,
body[data-role-theme] #content h2,
body[data-role-theme] #content h3,
body[data-role-theme] #content h4,
body[data-role-theme] #content h5,
body[data-role-theme] #content h6,
body[data-role-theme] #page-title {
  color: #f0eaff !important;
  text-shadow: 0 0 14px rgba(167, 139, 250, 0.12);
}

body[data-role-theme] #content .creation-success-dialog h3,
body[data-role-theme] #content .otp-result-dialog.is-success h3,
body[data-role-theme] #content .result-box h4 {
  color: #6ee7b7 !important;
}

body[data-role-theme] #content .otp-result-dialog.is-error h3,
body[data-role-theme] #content .fatal-card h2 {
  color: #fca5a5 !important;
}

/* Keep the authenticator notice while removing its surrounding card frame. */
.reseller-trial-security-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.backup-settings-card,
.bot-video-settings-card {
  min-height: 160px;
}

.website-logo-settings-content { display:flex; align-items:center; gap:16px; }
.website-logo-preview { position:relative; display:grid; flex:0 0 58px; width:58px; height:58px; place-items:center; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:14px; color:#fff; background:linear-gradient(145deg,#8b5cf6,#22d3ee); font-size:16px; font-weight:900; }
.brand-logo { position:relative; overflow:hidden; }
.auth-logo { position:relative; overflow:hidden; }
.website-brand-image { position:absolute; inset:0; display:none; width:100%; height:100%; border-radius:inherit; object-fit:contain; }
.brand-logo.has-custom-image,
.auth-logo.has-custom-image,
.website-logo-preview.has-custom-image { color:transparent !important; }
.brand-logo.has-custom-image { border-color:rgba(255,255,255,.2); }
.orb-core { position:relative; overflow:hidden; }
.orb-core.has-custom-image { color:transparent !important; }
.has-custom-image .website-brand-image { display:block; }
.website-logo-settings-controls { min-width:0; }
.website-logo-settings-controls .row { flex-wrap:wrap; }
.website-logo-settings-controls .hint { margin:8px 0 0; }

/* Keep the owner's premium name color above the shared heading palette. */
body[data-role-theme="owner"] #content .owner-name-highlight,
body[data-role-theme="owner"] .me-name.owner-name-highlight,
body[data-role-theme="owner"] .support-chat-message-owner .support-chat-message-meta b {
  color:#f4c95d !important;
  -webkit-text-fill-color:#f4c95d !important;
  text-shadow:0 0 12px rgba(244,201,93,.28) !important;
}

/* Keep low-end overrides last so later role themes cannot re-enable effects. */
html[data-performance-mode="low"] body[data-role-theme] *:not(#auth-screen):not(#auth-screen *),
html[data-performance-mode="low"] body[data-role-theme] *:not(#auth-screen):not(#auth-screen *)::before,
html[data-performance-mode="low"] body[data-role-theme] *:not(#auth-screen):not(#auth-screen *)::after,
html[data-performance-mode="low"] body *:not(#auth-screen):not(#auth-screen *),
html[data-performance-mode="low"] body *:not(#auth-screen):not(#auth-screen *)::before,
html[data-performance-mode="low"] body *:not(#auth-screen):not(#auth-screen *)::after {
  animation:none !important;
  transition:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  scroll-behavior:auto !important;
  background-image:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] .topbar,
html[data-performance-mode="low"] body[data-role-theme] .sidebar,
html[data-performance-mode="low"] body[data-role-theme] .card,
html[data-performance-mode="low"] body[data-role-theme] .app-card,
html[data-performance-mode="low"] body[data-role-theme] .stat,
html[data-performance-mode="low"] body[data-role-theme] .dashboard-status,
html[data-performance-mode="low"] body[data-role-theme] .dashboard-hero,
html[data-performance-mode="low"] body[data-role-theme] .modal,
html[data-performance-mode="low"] body[data-role-theme] .toast {
  background-color:var(--panel) !important;
  background-image:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] .btn-primary:not(#auth-screen *) {
  background-color:var(--accent) !important;
  background-image:none !important;
  color:#0b1220 !important;
}
html[data-performance-mode="low"] body .btn-ghost,
html[data-performance-mode="low"] body .low-end-toggle { background-color:var(--panel-2) !important; }
html[data-performance-mode="low"] body .btn-danger { background-color:var(--red-soft) !important; color:var(--red) !important; }
html[data-performance-mode="low"] body :is(.brand-logo,.avatar) { background-color:var(--accent) !important; color:#0b1220 !important; }
html[data-performance-mode="low"] body[data-role-theme] :is(.dashboard-status,.metric-card,.dashboard-panel) {
  border-color:#344256 !important;
  background-color:#121c2b !important;
}
html[data-performance-mode="low"] body[data-role-theme] :is(.status-icon,.metric-icon,.panel-mark) {
  border-color:#3a4b62 !important;
  background-color:#1b293a !important;
  color:#aabbd0 !important;
}
html[data-performance-mode="low"] body[data-role-theme] .dashboard-bar-row .bar-fill {
  background:#8198b5 !important;
}
html[data-performance-mode="low"] body[data-role-theme] .dashboard-bar-row .bar-fill::after { display:none !important; }
html[data-performance-mode="low"] body[data-role-theme] *:not(#auth-screen):not(#auth-screen *):hover,
html[data-performance-mode="low"] body[data-role-theme] *:not(#auth-screen):not(#auth-screen *):focus-visible {
  filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] :is(.card,.app-card,.stat,.dashboard-status,.dashboard-panel,.dashboard-activity,.self-account-card,.support-contact-card,.profile-trigger,.keycode,.create-mode-card,.exe-row):hover {
  border-color:#344256 !important;
  background-color:#121c2b !important;
}
html[data-performance-mode="low"] body[data-role-theme] .btn-primary:hover:not(:disabled) {
  background-color:var(--accent) !important;
  background-image:none !important;
  color:#0b1220 !important;
}
html[data-performance-mode="low"] body[data-role-theme] .btn-ghost:hover:not(:disabled) { background-color:var(--panel-2) !important; color:var(--text) !important; }
html[data-performance-mode="low"] body[data-role-theme] .btn-danger:hover:not(:disabled) { background-color:var(--red-soft) !important; color:var(--red) !important; }
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item:hover:not(.active) { background-color:transparent !important; color:var(--muted) !important; }
html[data-performance-mode="low"] body[data-role-theme] :is(.link-btn,.keycode button):hover { color:inherit !important; }
html[data-performance-mode="low"] body[data-role-theme] tbody tr:hover { background-color:transparent !important; }
/* Keep every interactive surface visually stable on hover in low-end mode. */
html[data-performance-mode="low"] body[data-role-theme] a:hover { color:var(--accent-2) !important; }
html[data-performance-mode="low"] body[data-role-theme] :is(.card,.app-card,.stat,.dashboard-status,.dashboard-hero,.dashboard-panel,.dashboard-activity,.metric-card,.self-account-card,.support-contact-card,.profile-trigger,.keycode,.create-mode-card,.exe-row,.trial-app-card,.billing-plan,.assigned-choice):hover {
  border-color:var(--line) !important;
  background-color:var(--panel) !important;
}
html[data-performance-mode="low"] body[data-role-theme] :is(.dashboard-status,.dashboard-panel,.metric-card):hover { border-color:#344256 !important; background-color:#121c2b !important; }
/* Flatten role-theme dashboard nth-child accents in low mode, including the
   higher-specificity decorative rules defined earlier in this stylesheet. */
html[data-performance-mode="low"] body[data-role-theme] .dashboard-status-row > .dashboard-status:nth-child(n),
html[data-performance-mode="low"] body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(n),
html[data-performance-mode="low"] body[data-role-theme] .dashboard-paid-subscription {
  border-color:#344256 !important;
  background:#121c2b !important;
  box-shadow:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] .dashboard-status-row > .dashboard-status:nth-child(n):hover,
html[data-performance-mode="low"] body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(n):hover,
html[data-performance-mode="low"] body[data-role-theme] .dashboard-paid-subscription:hover {
  border-color:#344256 !important;
  background:#121c2b !important;
  box-shadow:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] .app-card,
html[data-performance-mode="low"] body[data-role-theme] .app-card:hover {
  border-color:var(--line) !important;
  background:var(--panel) !important;
  box-shadow:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] .app-card :is(.btn-primary,.btn-ghost,.btn-danger,.btn-green):hover:not(:disabled) {
  background-image:none !important;
  box-shadow:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] .profile-trigger:hover { border-color:transparent !important; background-color:transparent !important; }
html[data-performance-mode="low"] body[data-role-theme] :is(input,select,textarea):hover { color:var(--text) !important; border-color:var(--line-2) !important; background-color:var(--bg-2) !important; }
html[data-performance-mode="low"] body[data-role-theme] :is(.btn-primary,.btn-ghost,.btn-danger,.btn-green,.btn-glass,.social-provider-button,.password-visibility-toggle,.connection-key-copy,.link-btn,.keycode button,.assigned-copy,.low-end-toggle):hover:not(:disabled) {
  border-color:var(--line-2) !important;
  color:var(--text) !important;
}
html[data-performance-mode="low"] body[data-role-theme] .btn-primary:hover:not(:disabled) { background-color:var(--accent) !important; color:#0b1220 !important; }
html[data-performance-mode="low"] body[data-role-theme] .btn-ghost:hover:not(:disabled) { background-color:var(--panel-2) !important; color:var(--muted) !important; }
html[data-performance-mode="low"] body[data-role-theme] .btn-danger:hover:not(:disabled) { background-color:var(--red-soft) !important; color:var(--red) !important; }
html[data-performance-mode="low"] body[data-role-theme] .btn-green:hover:not(:disabled) { background-color:var(--green-soft) !important; color:var(--green) !important; }
html[data-performance-mode="low"] body[data-role-theme] :is(.social-provider-button,.connection-key-copy):hover { background-color:var(--panel-2) !important; }
html[data-performance-mode="low"] body[data-role-theme] .password-visibility-toggle:hover { background-color:transparent !important; color:var(--muted) !important; }
html[data-performance-mode="low"] body[data-role-theme] .link-btn:hover,
html[data-performance-mode="low"] body[data-role-theme] .keycode button:hover { color:var(--text) !important; }
html[data-performance-mode="low"] body[data-role-theme] .link-btn:hover { color:var(--accent-2) !important; background-color:transparent !important; }
html[data-performance-mode="low"] body[data-role-theme] .assigned-copy:hover:not(:disabled) { color:var(--muted) !important; background-color:transparent !important; }
html[data-performance-mode="low"] body[data-role-theme] .btn:not(.btn-primary):not(.btn-danger):not(.btn-green):not(.btn-ghost):not(.btn-glass):hover:not(:disabled) { color:var(--muted) !important; background-color:var(--panel-2) !important; border-color:var(--line) !important; }
html[data-performance-mode="low"] body[data-role-theme] .low-end-toggle:hover { color:var(--muted) !important; }
html[data-performance-mode="low"] body[data-role-theme] tbody tr:hover,
html[data-performance-mode="low"] body[data-role-theme] tbody tr:hover td { background:transparent !important; }
/* Final low-end reset: match each decorative surface while idle and hovered. */
html[data-performance-mode="low"] body[data-role-theme] .dashboard-status-row > .dashboard-status:nth-child(n),
html[data-performance-mode="low"] body[data-role-theme] .dashboard-status-row > .dashboard-status:nth-child(n):hover,
html[data-performance-mode="low"] body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(n),
html[data-performance-mode="low"] body[data-role-theme] .dashboard-metrics > .metric-card:nth-child(n):hover,
html[data-performance-mode="low"] body[data-role-theme] .dashboard-paid-subscription,
html[data-performance-mode="low"] body[data-role-theme] .dashboard-paid-subscription:hover {
  border-color:#344256 !important;
  background:#121c2b !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] .app-card,
html[data-performance-mode="low"] body[data-role-theme] .app-card:hover {
  border-color:var(--line) !important;
  background:var(--panel) !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] .app-card :is(.btn-primary,.btn-ghost,.btn-danger,.btn-green):hover:not(:disabled) { background-image:none !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item:not(.active),
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item:not(.active):hover { background:transparent !important; border-color:transparent !important; color:var(--muted) !important; box-shadow:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .btn-primary,
html[data-performance-mode="low"] body[data-role-theme] .btn-primary:hover:not(:disabled) { background:var(--accent) !important; border-color:transparent !important; color:#0b1220 !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .btn-ghost,
html[data-performance-mode="low"] body[data-role-theme] .btn-ghost:hover:not(:disabled) { background:var(--panel-2) !important; border-color:var(--line) !important; color:var(--muted) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .btn-danger,
html[data-performance-mode="low"] body[data-role-theme] .btn-danger:hover:not(:disabled) { background:var(--red-soft) !important; border-color:rgba(239,68,68,.3) !important; color:var(--red) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .btn-green,
html[data-performance-mode="low"] body[data-role-theme] .btn-green:hover:not(:disabled) { background:var(--green-soft) !important; border-color:rgba(46,204,113,.3) !important; color:var(--green) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
/* Flatten themed panels in low-end mode. Apply the same values at rest and
   hover so role-specific accent borders cannot reappear on pointer movement. */
html[data-performance-mode="low"] body[data-role-theme] .content :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card),
html[data-performance-mode="low"] body[data-role-theme] .content :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card):hover {
  border-color:#344256 !important;
  background-color:#121c2b !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] .content:has(.dashboard-hero) .dashboard-status-row > .dashboard-status:nth-child(n),
html[data-performance-mode="low"] body[data-role-theme] .content:has(.dashboard-hero) .dashboard-status-row > .dashboard-status:nth-child(n):hover,
html[data-performance-mode="low"] body[data-role-theme] .content:has(.dashboard-hero) .dashboard-metrics > .metric-card:nth-child(n),
html[data-performance-mode="low"] body[data-role-theme] .content:has(.dashboard-hero) .dashboard-metrics > .metric-card:nth-child(n):hover {
  border-color:#344256 !important;
  background:#121c2b !important;
  box-shadow:none !important;
}
/* Set the same flat surface on and off hover so the pointer causes no repainting color shift. */
html[data-performance-mode="low"] body[data-role-theme] :is(.card,.app-card,.stat,.dashboard-status,.dashboard-hero,.dashboard-panel,.dashboard-activity,.metric-card,.self-account-card,.support-contact-card,.keycode,.create-mode-card,.exe-row,.trial-app-card,.billing-plan,.assigned-choice) { border-color:var(--line) !important; background-color:var(--panel) !important; }
html[data-performance-mode="low"] body[data-role-theme] :is(.dashboard-status,.dashboard-panel,.metric-card) { border-color:#344256 !important; background-color:#121c2b !important; }
html[data-performance-mode="low"] body[data-role-theme] :is(.card,.app-card,.stat,.dashboard-status,.dashboard-hero,.dashboard-panel,.dashboard-activity,.metric-card,.self-account-card,.support-contact-card,.keycode,.create-mode-card,.exe-row,.trial-app-card,.billing-plan,.assigned-choice):hover { border-color:var(--line) !important; background-color:var(--panel) !important; }
html[data-performance-mode="low"] body[data-role-theme] :is(.dashboard-status,.dashboard-panel,.metric-card):hover { border-color:#344256 !important; background-color:#121c2b !important; }
/* Final button state lock: low-end mode keeps button fills, borders, and text unchanged on hover. */
html[data-performance-mode="low"] body[data-role-theme] button.btn-primary,
html[data-performance-mode="low"] body[data-role-theme] button.btn-primary:hover:not(:disabled),
html[data-performance-mode="low"] body[data-role-theme] .auth-card button.btn-primary,
html[data-performance-mode="low"] body[data-role-theme] .auth-card button.btn-primary:hover:not(:disabled) { background:var(--accent) !important; border-color:transparent !important; color:#0b1220 !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] button.btn-ghost,
html[data-performance-mode="low"] body[data-role-theme] button.btn-ghost:hover:not(:disabled),
html[data-performance-mode="low"] body[data-role-theme] .content button.btn-ghost,
html[data-performance-mode="low"] body[data-role-theme] .content button.btn-ghost:hover:not(:disabled) { background:var(--panel-2) !important; border-color:var(--line) !important; color:var(--muted) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] button.btn-danger,
html[data-performance-mode="low"] body[data-role-theme] button.btn-danger:hover:not(:disabled),
html[data-performance-mode="low"] body[data-role-theme] .content button.btn-danger,
html[data-performance-mode="low"] body[data-role-theme] .content button.btn-danger:hover:not(:disabled) { background:var(--red-soft) !important; border-color:rgba(239,68,68,.3) !important; color:var(--red) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] button.btn-green,
html[data-performance-mode="low"] body[data-role-theme] button.btn-green:hover:not(:disabled),
html[data-performance-mode="low"] body[data-role-theme] .content button.btn-green,
html[data-performance-mode="low"] body[data-role-theme] .content button.btn-green:hover:not(:disabled) { background:var(--green-soft) !important; border-color:rgba(46,204,113,.3) !important; color:var(--green) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] button.btn-glass,
html[data-performance-mode="low"] body[data-role-theme] button.btn-glass:hover:not(:disabled),
html[data-performance-mode="low"] body[data-role-theme] .content button.btn:not(.btn-primary):not(.btn-danger):not(.btn-green):not(.btn-ghost):not(.btn-glass),
html[data-performance-mode="low"] body[data-role-theme] .content button.btn:not(.btn-primary):not(.btn-danger):not(.btn-green):not(.btn-ghost):not(.btn-glass):hover:not(:disabled) { background:var(--panel-2) !important; border-color:var(--line) !important; color:var(--muted) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .create-mode-card,
html[data-performance-mode="low"] body[data-role-theme] .content .create-mode-card:hover:not(:disabled) { border-color:#344256 !important; background:#121c2b !important; color:var(--text) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item:not(.active),
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item:not(.active):hover { background:transparent !important; border-color:transparent !important; color:var(--muted) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card),
html[data-performance-mode="low"] body[data-role-theme] .content :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card):hover { border-color:#344256 !important; background-color:#121c2b !important; background-image:none !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] button.low-end-toggle,
html[data-performance-mode="low"] body[data-role-theme] button.low-end-toggle:hover,
html[data-performance-mode="low"] body[data-role-theme] button.connection-key-copy,
html[data-performance-mode="low"] body[data-role-theme] button.connection-key-copy:hover { background:var(--panel-2) !important; border-color:var(--line-2) !important; color:var(--muted) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] button.social-provider-button,
html[data-performance-mode="low"] body[data-role-theme] button.social-provider-button:hover { background:var(--panel-2) !important; border-color:var(--line-2) !important; color:var(--text) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] button.password-visibility-toggle,
html[data-performance-mode="low"] body[data-role-theme] button.password-visibility-toggle:hover,
html[data-performance-mode="low"] body[data-role-theme] button.assigned-copy,
html[data-performance-mode="low"] body[data-role-theme] button.assigned-copy:hover { background:transparent !important; border-color:transparent !important; color:var(--muted) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
/* Lightweight press feedback only; hover styling stays disabled in low-end mode. */
html[data-performance-mode="low"] body[data-role-theme] button:active:not(:disabled),
html[data-performance-mode="low"] body[data-role-theme] [role="button"]:active:not([aria-disabled="true"]) { opacity:.68 !important; transform:scale(.98) !important; filter:none !important; box-shadow:none !important; transition:none !important; }
html[data-performance-mode="low"] body[data-role-theme] button:active:not(:disabled) { opacity:.68 !important; transform:scale(.98) !important; filter:none !important; box-shadow:none !important; transition:none !important; }
/* Low-end sidebar state uses a quiet neutral marker, not role-theme gradients. */
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item.active,
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item.active:hover { background:var(--panel-2) !important; background-image:none !important; border-color:var(--line-2) !important; color:var(--text) !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] button:active:not(:disabled),
html[data-performance-mode="low"] body[data-role-theme] [role="button"]:active:not([aria-disabled="true"]) { opacity:.86 !important; transform:scale(.99) !important; filter:none !important; box-shadow:none !important; transition:none !important; }
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item:active:not(:disabled) { opacity:.92 !important; transform:none !important; }
/* Application-specific low-end palette: keep cards and selection controls flat. */
html[data-performance-mode="low"] body[data-role-theme] .content .application-grid > .app-card,
html[data-performance-mode="low"] body[data-role-theme] .content .application-grid > .app-card:hover,
html[data-performance-mode="low"] body[data-role-theme] .content .application-grid > .app-card.trial-app-card,
html[data-performance-mode="low"] body[data-role-theme] .content .application-grid > .app-card.trial-app-card:hover { border-color:#344256 !important; background:#121c2b !important; background-image:none !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-all-apps .assigned-choice,
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-all-apps .assigned-choice:hover,
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-all-apps .assigned-choice:has(input:checked),
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-all-apps .assigned-choice:has(input:checked):hover { border:1px solid var(--line-2) !important; border-left:1px solid var(--line-2) !important; background:var(--bg-2) !important; background-image:none !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-all-apps .assigned-choice input[type="checkbox"] { accent-color:var(--accent) !important; transition:none !important; box-shadow:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-all-apps .assigned-choice input[type="checkbox"]:checked { border-color:var(--line-2) !important; background:var(--accent) !important; box-shadow:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-all-apps .assigned-choice input[type="checkbox"]:checked::before { animation:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .access-app-grid .field.check,
html[data-performance-mode="low"] body[data-role-theme] .content .access-app-grid .field.check:has(input:checked) { border-color:var(--line-2) !important; background:var(--bg-2) !important; box-shadow:none !important; }
/* Current billing plan gets a quiet static border in low-end mode. */
html[data-performance-mode="low"] body[data-role-theme] .content .billing-plan.is-current-plan,
html[data-performance-mode="low"] body[data-role-theme] .content .billing-plan.is-current-plan:hover { border-color:#344256 !important; filter:none !important; animation:none !important; box-shadow:none !important; transform:none !important; }
/* Subtle static border cue for the current plan in low-end mode. */
html[data-performance-mode="low"] body[data-role-theme] .content .billing-plan.is-current-plan,
html[data-performance-mode="low"] body[data-role-theme] .content .billing-plan.is-current-plan:hover { border-color:#526984 !important; filter:none !important; animation:none !important; box-shadow:none !important; transform:none !important; }
/* Preserve the default current-plan border treatment even when the rest of low-end mode is flat. */
@keyframes low-end-current-plan-border { 0%,100% { border-color:#8b5cf6; box-shadow:0 0 0 1px rgba(139,92,246,.35),0 0 14px rgba(139,92,246,.18); } 50% { border-color:#22d3ee; box-shadow:0 0 0 1px rgba(34,211,238,.5),0 0 22px rgba(34,211,238,.24); } }
html[data-performance-mode="low"] body[data-role-theme] .content .billing-plan.is-current-plan { border:2px solid #8b5cf6 !important; animation:low-end-current-plan-border 2.8s ease-in-out infinite !important; filter:drop-shadow(0 0 7px rgba(139,92,246,.24)) !important; box-shadow:0 0 0 1px rgba(139,92,246,.22),0 0 14px rgba(139,92,246,.12) !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .billing-plan.is-current-plan:hover { border-color:#22d3ee !important; animation:low-end-current-plan-border 2.8s ease-in-out infinite !important; filter:drop-shadow(0 0 7px rgba(34,211,238,.24)) !important; box-shadow:0 0 0 1px rgba(34,211,238,.28),0 0 18px rgba(34,211,238,.14) !important; }
/* Low-cost hover feedback: one flat color step, with no transition or glow. */
html[data-performance-mode="low"] body[data-role-theme] .content :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card):hover {
  background-color:#17263a !important;
  background-image:none !important;
  border-color:#526984 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item:not(.active):hover { background:#17263a !important; border-color:#364a63 !important; color:var(--text) !important; box-shadow:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content button:hover:not(:disabled),
html[data-performance-mode="low"] body[data-role-theme] .content [role="button"]:hover:not([aria-disabled="true"]) { opacity:.92 !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-all-apps .assigned-choice:hover { background:#17263a !important; border-color:#526984 !important; box-shadow:none !important; }

/* Low-end mode keeps the same appearance while pointing; the dashboard mark is static. */
html[data-performance-mode="low"] body[data-role-theme] .content :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card,.assigned-app-card,.assigned-app-value,.assigned-choice,.assigned-app-empty,.owner-app-credential,.owner-active-subscription,.field.check),
html[data-performance-mode="low"] body[data-role-theme] .content :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card,.assigned-app-card,.assigned-app-value,.assigned-choice,.assigned-app-empty,.owner-app-credential,.owner-active-subscription,.field.check):hover,
html[data-performance-mode="low"] body[data-role-theme] .content :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card,.assigned-app-card,.assigned-app-value,.assigned-choice,.assigned-app-empty,.owner-app-credential,.owner-active-subscription,.field.check):focus-within {
  background:#121c2b !important;
  background-image:none !important;
  border-color:#344256 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-choice:has(input:checked),
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-choice:has(input:checked):hover { border:1px solid #526984 !important; background:#17263a !important; color:#e2e8f0 !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-choice:has(input:checked) .assigned-choice-name { color:#e2e8f0 !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-choice input[type="checkbox"]:checked { border-color:#9db3d3 !important; background:#7189ad !important; color:#0b1220 !important; box-shadow:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-app-value,
html[data-performance-mode="low"] body[data-role-theme] .content .assigned-secret-value input { color:#cbd5e1 !important; background:#101a2a !important; border-color:#344256 !important; }
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item:not(.active):hover,
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item.active,
html[data-performance-mode="low"] body[data-role-theme] #nav .nav-item.active:hover { background:#1a2940 !important; background-image:none !important; border-color:#364a63 !important; color:#e2e8f0 !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content button:hover:not(:disabled),
html[data-performance-mode="low"] body[data-role-theme] .content [role="button"]:hover:not([aria-disabled="true"]) { filter:none !important; box-shadow:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .btn-primary,
html[data-performance-mode="low"] body[data-role-theme] .content .btn-primary:hover:not(:disabled) { color:#0b1220 !important; background:#7189ad !important; background-image:none !important; border-color:#7189ad !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .btn-danger,
html[data-performance-mode="low"] body[data-role-theme] .content .btn-danger:hover:not(:disabled) { color:#c98b91 !important; background:#251b25 !important; background-image:none !important; border-color:#59404b !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .btn:not(.btn-primary):not(.btn-danger),
html[data-performance-mode="low"] body[data-role-theme] .content .btn:not(.btn-primary):not(.btn-danger):hover:not(:disabled) { color:#cbd5e1 !important; background:#1a2940 !important; background-image:none !important; border-color:#364a63 !important; }
html[data-performance-mode="low"] body[data-role-theme] .low-end-toggle,
html[data-performance-mode="low"] body[data-role-theme] .low-end-toggle:hover { color:#a8b5c7 !important; background:#1a2940 !important; border-color:#364a63 !important; }
html[data-performance-mode="low"] body[data-role-theme] .dashboard-orb,
html[data-performance-mode="low"] body[data-role-theme] .dashboard-orb:hover { background:transparent !important; border:0 !important; box-shadow:none !important; transform:none !important; animation:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .dashboard-orb .orb-core { color:#e2e8f0 !important; background:#1a2940 !important; border-color:#526984 !important; box-shadow:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .dashboard-orb .orb-ring,
html[data-performance-mode="low"] body[data-role-theme] .dashboard-orb .orb-glint { display:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .dashboard-orb-wrap { perspective:none !important; transform:translateY(-50%) !important; }
@media(max-width:640px) { html[data-performance-mode="low"] body[data-role-theme] .dashboard-orb-wrap { top:50% !important; bottom:auto !important; transform:translateY(-50%) scale(.64) !important; } }

/* Authentication keeps its normal visual treatment even with low-end mode enabled. */
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-bg {
  background:radial-gradient(ellipse at 18% 26%,rgba(34,211,238,.15),transparent 38%),radial-gradient(ellipse at 78% 24%,rgba(139,92,246,.19),transparent 42%),radial-gradient(ellipse at 68% 78%,rgba(236,72,153,.11),transparent 40%),linear-gradient(135deg,#050817,#0a0d24 55%,#08091c) !important;
  animation:drift 18s ease-in-out infinite alternate !important;
}
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card {
  background:linear-gradient(145deg,rgba(20,25,57,.96),rgba(12,17,38,.96)) !important;
  border-color:rgba(126,96,220,.36) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.48),0 0 35px rgba(139,92,246,.12) !important;
  backdrop-filter:blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(130%) !important;
}
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card::before { background:linear-gradient(90deg,transparent,#22d3ee,#8b5cf6,#ec4899,transparent) !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-logo { background:linear-gradient(135deg,#c084fc,#8b5cf6,#22d3ee) !important; border-color:rgba(255,255,255,.3) !important; box-shadow:0 8px 24px rgba(139,92,246,.18) !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-title { text-shadow:0 0 24px rgba(255,61,170,.24) !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card input:not([type="checkbox"]):focus { border-color:#f43a9b !important; box-shadow:0 0 0 3px rgba(240,24,135,.14) !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .btn-primary { color:#fff !important; border-color:rgba(255,108,190,.7) !important; background:linear-gradient(110deg,#a417c4,#ed1687 58%,#ff438f) !important; box-shadow:0 7px 22px rgba(240,24,135,.27) !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .btn-primary:hover:not(:disabled) { filter:brightness(1.14) !important; box-shadow:0 8px 28px rgba(240,24,135,.39) !important; transform:translateY(-2px) !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .social-provider-button { color:#dce7ff !important; background:linear-gradient(145deg,#211129,#140b1b) !important; border-color:#4b3151 !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .social-provider-button:hover { color:#fff !important; background:rgba(240,24,135,.12) !important; border-color:#f43a9b !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .password-visibility-toggle:hover { color:#c4b5fd !important; background:rgba(139,92,246,.13) !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen a:hover,
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .link-btn:hover { color:#67e8f9 !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-particles { display:block !important; }
/* Keep the License API actions clear and operable while the details stay obscured. */
body[data-role-theme] .license-api-panel #license-api-edit,
body[data-role-theme] .license-api-panel #test-api { filter:none !important; user-select:auto !important; }

/* Global deep charcoal palette, enabled independently from Low-end device mode. */
html[data-color-mode="dark"] body {
  --bg:#050505 !important;
  --bg-2:#070707 !important;
  --panel:#0b0b0b !important;
  --panel-2:#0e0e0e !important;
  --line:#1c1c1c !important;
  --line-2:#242424 !important;
  --text:#f5f5f5 !important;
  --muted:#a3a3a3 !important;
  --dim:#737373 !important;
  --accent:#e5e5e5 !important;
  --accent-2:#e5e5e5 !important;
  --accent-soft:rgba(229,229,229,.08) !important;
  --role-trim:#e5e5e5 !important;
  --role-glow:transparent !important;
  --green:#86efac !important;
  --green-soft:rgba(29,58,39,.42) !important;
  --red:#f87171 !important;
  --red-soft:rgba(74,32,32,.42) !important;
  --amber:#fbbf24 !important;
  --amber-soft:rgba(64,48,25,.42) !important;
  color:#f5f5f5 !important;
  background:#050505 !important;
  background-image:none !important;
}
html[data-color-mode="dark"] body :is(.app,.main,.content,#app,#content,#auth-screen) { color:#f5f5f5 !important; background:#070707 !important; background-image:none !important; }
html[data-color-mode="dark"] body :is(.sidebar,.topbar) { color:#f5f5f5 !important; background:#050505 !important; background-image:none !important; border-color:#1c1c1c !important; }
html[data-color-mode="dark"] body .topbar { background:#070707 !important; }
html[data-color-mode="dark"] body :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card,.assigned-app-card,.assigned-choice,.assigned-app-empty,.owner-app-credential,.owner-active-subscription,.profile-trigger,.keycode,.activity-item,.log-row,.log-entry,.exe-row,.build-row,.app-action-info,.create-mode-card,.table-wrap,.support-chat-panel,.owner-support-settings,.auth-card,.modal,.toast,.dropdown-menu,.select-menu,[role="menu"]) {
  color:#f5f5f5 !important;
  background:#0b0b0b !important;
  background-image:none !important;
  border-color:#242424 !important;
}
html[data-color-mode="dark"] body :is(.dashboard-status,.metric-card,.dashboard-panel,.assigned-app-card,.assigned-choice,.assigned-app-empty,.owner-app-credential,.owner-active-subscription,.activity-item,.log-row,.log-entry,.exe-row,.build-row,.app-action-info,.create-mode-card,.keycode,.table-wrap,.dropdown-menu,.select-menu,[role="menu"]) { background-color:#0e0e0e !important; }
html[data-color-mode="dark"] body :is(input,select,textarea,.input-suffix-group,.assigned-secret-row input,.search-input) { color:#f5f5f5 !important; background:#111111 !important; border-color:#292929 !important; }
html[data-color-mode="dark"] body :is(input,select,textarea)::placeholder { color:#666666 !important; }
html[data-color-mode="dark"] body select option { color:#f5f5f5 !important; background:#0d0d0d !important; }
html[data-color-mode="dark"] body :is(.field label,.field-label,.muted,.hint,.dashboard-hero-copy > p,.dashboard-status small,.stat-label,.metric-foot,.status-detail,.small,.text-muted) { color:#a3a3a3 !important; }
html[data-color-mode="dark"] body :is(h1,h2,h3,h4,h5,h6,.auth-title,.auth-card h1,.auth-card h2) { color:#ffffff !important; text-shadow:none !important; }
html[data-color-mode="dark"] body :is(.eyebrow,.panel-kicker,.dashboard-eyebrow,.nav-sep,.nav-section-label,.section-label) { color:#8f8f8f !important; }
html[data-color-mode="dark"] body :is(a,.link-btn,.owner-name-highlight,.metric-icon,.status-icon,.assigned-app-icon,.connection-result-icon) { color:#e5e5e5 !important; }
html[data-color-mode="dark"] body .btn-primary,
html[data-color-mode="dark"] body .btn-primary:not(:disabled) { color:#050505 !important; background:#e5e5e5 !important; background-image:none !important; border-color:#e5e5e5 !important; box-shadow:none !important; text-shadow:none !important; }
html[data-color-mode="dark"] body :is(.btn-ghost,.btn-glass,.btn:not(.btn-primary):not(.btn-danger):not(.btn-green),.social-provider-button,.connection-key-copy,.assigned-copy,.password-visibility-toggle) { color:#d4d4d4 !important; background:#111111 !important; background-image:none !important; border-color:#292929 !important; box-shadow:none !important; }
html[data-color-mode="dark"] body :is(.btn-danger,.badge.red,.pill.bad,.status-badge.danger) { color:#f87171 !important; background:#180a0a !important; background-image:none !important; border-color:#4a2020 !important; }
html[data-color-mode="dark"] body :is(.btn-green,.badge.green,.pill.good,.status-badge.success,.is-online) { color:#86efac !important; background:#09130d !important; background-image:none !important; border-color:#1d3a27 !important; }
html[data-color-mode="dark"] body :is(.badge.amber,.pill.warn,.status-badge.warning,.is-offline) { color:#fbbf24 !important; background:#151008 !important; background-image:none !important; border-color:#403019 !important; }
html[data-color-mode="dark"] body :is(.badge:not(.green):not(.red):not(.amber),.pill:not(.good):not(.bad):not(.warn)) { color:#cfcfcf !important; background:#151515 !important; background-image:none !important; border-color:#2a2a2a !important; }
html[data-color-mode="dark"] body .nav-item { color:#8a8a8a !important; background:transparent !important; background-image:none !important; border-color:transparent !important; box-shadow:none !important; }
html[data-color-mode="dark"] body .nav-item.active { color:#ffffff !important; background:#151515 !important; background-image:none !important; border-color:#303030 !important; box-shadow:none !important; }
html[data-color-mode="dark"] body :is(th,thead) { color:#bdbdbd !important; background:#0e0e0e !important; background-image:none !important; border-color:#242424 !important; }
html[data-color-mode="dark"] body :is(td,tbody tr) { color:#e5e5e5 !important; border-color:#242424 !important; }
html[data-color-mode="dark"] body table { border-color:#242424 !important; }
html[data-color-mode="dark"] body :is(.modal,.modal-content,.modal-dialog,.dialog) { color:#f5f5f5 !important; background:#0b0b0b !important; background-image:none !important; border-color:#242424 !important; }
html[data-color-mode="dark"] body .modal-backdrop { background:rgba(0,0,0,.78) !important; }
html[data-color-mode="dark"] body :is(.toast,.toast-item) { background:#0b0b0b !important; background-image:none !important; border-color:#242424 !important; }
html[data-color-mode="dark"] body :is(.success,.text-success,.green-dot,.metric-dot.green-dot) { color:#86efac !important; }
html[data-color-mode="dark"] body :is(.error-text,.text-danger,.red-dot) { color:#f87171 !important; }
html[data-color-mode="dark"] body :is(.warning-text,.text-warning,.amber-dot) { color:#fbbf24 !important; }
html[data-color-mode="dark"] body :is(.success,.error-text,.warning-text,.text-success,.text-danger,.text-warning) { background-image:none !important; }
html[data-color-mode="dark"] body :is(.status-icon,.metric-icon,.panel-mark,.assigned-app-icon,.connection-result-icon) { color:#d4d4d4 !important; background:#151515 !important; background-image:none !important; border-color:#292929 !important; }
html[data-color-mode="dark"] body .dashboard-orb { background:radial-gradient(circle at 33% 27%,rgba(255,255,255,.08),rgba(255,255,255,.025) 38%,rgba(0,0,0,.12) 72%) !important; background-image:radial-gradient(circle at 33% 27%,rgba(255,255,255,.08),rgba(255,255,255,.025) 38%,rgba(0,0,0,.12) 72%) !important; box-shadow:inset 0 0 34px rgba(255,255,255,.035),0 0 55px rgba(255,255,255,.025) !important; }
html[data-color-mode="dark"] body .orb-core { color:#f5f5f5 !important; background:linear-gradient(145deg,#292929,#151515 62%,#0b0b0b) !important; background-image:linear-gradient(145deg,#292929,#151515 62%,#0b0b0b) !important; border-color:#5a5a5a !important; box-shadow:0 14px 35px rgba(0,0,0,.28),inset 0 2px 3px rgba(255,255,255,.12) !important; }
html[data-color-mode="dark"] body :is(.orb-ring,.ring-two) { background:transparent !important; background-image:none !important; border-color:rgba(229,229,229,.22) !important; box-shadow:none !important; }
html[data-color-mode="dark"] body .orb-glint { background:rgba(229,229,229,.25) !important; border-color:transparent !important; box-shadow:none !important; }
html[data-color-mode="dark"] body .hero-grid-lines { background-color:transparent !important; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) !important; border-color:transparent !important; box-shadow:none !important; }
html[data-color-mode="dark"] body :is(.dashboard-bar-row .bar-fill,.progress-bar,.progress-fill) { background:#a3a3a3 !important; background-image:none !important; box-shadow:none !important; }
html[data-color-mode="dark"] body .dashboard-bar-row .bar-track { background:#111111 !important; border-color:#292929 !important; }
html[data-color-mode="dark"] body :is(.auth-bg,.auth-screen) { background:#050505 !important; background-image:radial-gradient(ellipse at 18% 24%,rgba(255,255,255,.045),transparent 38%),radial-gradient(ellipse at 80% 76%,rgba(255,255,255,.025),transparent 42%),linear-gradient(135deg,#050505,#090909 55%,#050505) !important; }
html[data-color-mode="dark"] body .auth-card::before { background:linear-gradient(90deg,transparent,#737373,#a3a3a3,transparent) !important; }
html[data-color-mode="dark"] body .auth-card input:not([type="checkbox"]) { color:#f5f5f5 !important; background:#111111 !important; border-color:#292929 !important; }
html[data-color-mode="dark"] body .auth-card .btn-primary { color:#050505 !important; background:#e5e5e5 !important; border-color:#e5e5e5 !important; }
html[data-color-mode="dark"] body ::selection { color:#050505 !important; background:#e5e5e5 !important; }
html[data-color-mode="dark"] body { scrollbar-color:#242424 #070707 !important; }
html[data-color-mode="dark"] body ::-webkit-scrollbar-track { background:#070707 !important; }
html[data-color-mode="dark"] body ::-webkit-scrollbar-thumb { background:#242424 !important; }
@keyframes dark-current-plan-border { 0%,100% { border-color:#3a3a3a; box-shadow:0 0 0 1px rgba(229,229,229,.12),0 0 14px rgba(229,229,229,.05); } 50% { border-color:#666666; box-shadow:0 0 0 1px rgba(229,229,229,.2),0 0 18px rgba(229,229,229,.08); } }
html[data-color-mode="dark"] body .billing-plan.is-current-plan { border-color:#3a3a3a !important; }
html[data-color-mode="dark"][data-performance-mode="low"] body .billing-plan.is-current-plan { border-color:#3a3a3a !important; animation:dark-current-plan-border 2.8s ease-in-out infinite !important; filter:none !important; box-shadow:0 0 0 1px rgba(229,229,229,.12),0 0 14px rgba(229,229,229,.05) !important; }

/* Normal dark-mode hover/focus colors; Low-end mode keeps its own reduced effects. */
html[data-color-mode="dark"]:not([data-performance-mode="low"]) body :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card,.assigned-app-card,.assigned-choice,.create-mode-card):hover { background:#101010 !important; background-image:none !important; border-color:#333333 !important; }
html[data-color-mode="dark"]:not([data-performance-mode="low"]) body .nav-item:not(.active):hover { color:#d4d4d4 !important; background:#111111 !important; border-color:#1c1c1c !important; }
html[data-color-mode="dark"]:not([data-performance-mode="low"]) body .btn-primary:hover:not(:disabled) { color:#000000 !important; background:#ffffff !important; border-color:#ffffff !important; }
html[data-color-mode="dark"]:not([data-performance-mode="low"]) body :is(.btn-ghost,.btn-glass,.btn:not(.btn-primary):not(.btn-danger):not(.btn-green),.social-provider-button,.connection-key-copy,.assigned-copy):hover:not(:disabled) { color:#f5f5f5 !important; background:#181818 !important; border-color:#3a3a3a !important; }
html[data-color-mode="dark"]:not([data-performance-mode="low"]) body .btn-danger:hover:not(:disabled) { background:#261010 !important; border-color:#4a2020 !important; }
html[data-color-mode="dark"]:not([data-performance-mode="low"]) body input:hover,
html[data-color-mode="dark"]:not([data-performance-mode="low"]) body select:hover,
html[data-color-mode="dark"]:not([data-performance-mode="low"]) body textarea:hover { background:#151515 !important; border-color:#383838 !important; }
html[data-color-mode="dark"]:not([data-performance-mode="low"]) body :is(input,select,textarea):focus { color:#f5f5f5 !important; background:#171717 !important; border-color:#5a5a5a !important; box-shadow:0 0 0 2px rgba(229,229,229,.07) !important; }
html[data-color-mode="dark"]:not([data-performance-mode="low"]) body tbody tr:hover,
html[data-color-mode="dark"]:not([data-performance-mode="low"]) body tbody tr:hover td { background:#111111 !important; }
html[data-color-mode="dark"] body .mode-selector { color:#bdbdbd !important; background:#111111 !important; border-color:#292929 !important; }
html[data-color-mode="dark"] body .mode-option { color:#bdbdbd !important; background:transparent !important; }
html[data-color-mode="dark"] body .mode-option:hover { color:#f5f5f5 !important; background:#181818 !important; }
html[data-color-mode="dark"] body .mode-option[aria-pressed="true"] { color:#050505 !important; background:#e5e5e5 !important; }

/* Finish the global neutral palette on role-specific admin and reseller panels. */
html[data-color-mode="dark"] body :is(tbody tr,tbody tr > td,tbody tr > th) { color:#e5e5e5 !important; background:#0b0b0b !important; background-image:none !important; border-color:#242424 !important; }
html[data-color-mode="dark"] body :is(.self-registered-account-row > td,.staff-reseller-group-row > td) { background:#0e0e0e !important; border-color:#303030 !important; box-shadow:none !important; }
html[data-color-mode="dark"] body :is(.activity-list,.activity-item) { border-color:#242424 !important; }
html[data-color-mode="dark"] body .activity-list > .activity-item:last-child { border-bottom:1px solid #242424 !important; }
html[data-color-mode="dark"] body :is(.empty,.empty-state,.loading-state,.connect-box,.result-box,.notice,.license-api-locked,.license-api-form,.official-server-note,.owner-reset-note,.bot-setup-steps,.select-application-overlay) { color:#e5e5e5 !important; background:#0e0e0e !important; background-image:none !important; border-color:#242424 !important; box-shadow:none !important; }
html[data-color-mode="dark"] body :is(.empty-icon,.empty-state-icon) { color:#a3a3a3 !important; background:#151515 !important; border-color:#292929 !important; box-shadow:none !important; }
html[data-color-mode="dark"] body :is(.profile-2fa-setup,.profile-2fa-instructions,.profile-2fa-qr-column,.profile-2fa-locked-panel,.profile-2fa-locked-code,.profile-2fa-locked-bars i,.otp-glass-panel,.otp-cells .otp-cell,.otp-template-icon) { color:#e5e5e5 !important; background:#0e0e0e !important; background-image:none !important; border-color:#242424 !important; box-shadow:none !important; }
html[data-color-mode="dark"] body :is(.profile-2fa-qr-stage,.profile-2fa-locked-qr) { color:#050505 !important; background-color:#ffffff !important; background-image:none !important; border-color:#3a3a3a !important; }
html[data-color-mode="dark"] body .profile-2fa-qr-cover { color:#e5e5e5 !important; background:rgba(5,5,5,.78) !important; backdrop-filter:none !important; }
html[data-color-mode="dark"] body .profile-2fa-qr-blurred { color:#737373 !important; background:repeating-conic-gradient(#bdbdbd 0 25%,#f5f5f5 0 50%) 50% / 22px 22px !important; }
html[data-color-mode="dark"] body :is(.support-chat-titlebar,.support-chat-conversation,.support-chat-bubble,.support-chat-role) { color:#e5e5e5 !important; background:#0e0e0e !important; background-image:none !important; border-color:#242424 !important; box-shadow:none !important; }
html[data-color-mode="dark"] body :is(.support-chat-avatar,.support-chat-role-admin,.support-chat-role-owner,.support-chat-role-reseller) { color:#e5e5e5 !important; background:#242424 !important; background-image:none !important; border-color:#3a3a3a !important; box-shadow:none !important; }
html[data-color-mode="dark"] body :is(.support-chat-message-meta b,.support-chat-bubble p) { color:#e5e5e5 !important; }
html[data-color-mode="dark"] body :is(.support-chat-message-meta time,.support-chat-chat-hint) { color:#737373 !important; }
html[data-color-mode="dark"] body :is(.dashboard-paid-subscription-details > div,.dashboard-bar-row .bar-track,.trial-access-status,.trial-access-progress,.profile-2fa-lock-overlay) { color:#e5e5e5 !important; background:#111111 !important; background-image:none !important; border-color:#242424 !important; box-shadow:none !important; }
html[data-color-mode="dark"] body :is(.activity-icon,.metric-icon,.status-icon,.panel-mark,.mode-icon,.assigned-app-icon,.connection-result-icon,.otp-template-icon) { color:#d4d4d4 !important; background:#151515 !important; border-color:#292929 !important; box-shadow:none !important; }
html[data-color-mode="dark"] body .self-registered-account-row { box-shadow:none !important; }
html[data-color-mode="dark"] body :is(.license-api-panel table,.license-api-panel tr,.license-api-panel td) { background:#0b0b0b !important; background-image:none !important; border-color:#242424 !important; }
html[data-color-mode="dark"] body .license-api-panel td { color:#e5e5e5 !important; }
html[data-color-mode="dark"] body .support-chat-online { color:#9be7b0 !important; background:#0d1510 !important; border-color:#24402d !important; }

/* Compact, mutually exclusive appearance selector. */
.mode-selector { display:inline-flex; flex:0 0 auto; align-items:center; gap:2px; max-width:100%; padding:3px; border:1px solid var(--line-2); border-radius:999px; background:var(--panel-2); }
.mode-option { min-height:26px; padding:5px 9px; border:0; border-radius:999px; color:var(--muted); background:transparent; font:inherit; font-size:10px; font-weight:700; line-height:1; white-space:nowrap; cursor:pointer; }
.mode-option:hover { color:var(--text); background:color-mix(in srgb,var(--panel) 72%,transparent); }
.mode-option[aria-pressed="true"] { color:var(--bg); background:var(--accent-2); }
.auth-mode-selector { position:fixed; z-index:3; top:16px; right:18px; }
@media(max-width:900px) { .mode-option { padding-right:6px; padding-left:6px; font-size:9px; } }
@media(max-width:620px) { .topbar-right { gap:5px; } .mode-selector { padding:2px; gap:0; } .mode-option { min-height:24px; padding:4px 5px; font-size:8px; } }
@media(max-width:620px) { .auth-mode-selector { top:8px; right:8px; } }

/* Dashboard cards use neutral charcoal surfaces in Dark Mode across all roles. */
html[data-color-mode="dark"] body[data-role-theme] .content :is(.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-hero,.dashboard-paid-subscription) {
  color:#f5f5f5 !important;
  background-color:#0b0b0b !important;
  background-image:none !important;
  border-color:#242424 !important;
  box-shadow:none !important;
  filter:none !important;
}
html[data-color-mode="dark"] body[data-role-theme] .content :is(.dashboard-status .status-icon,.metric-card .metric-icon,.panel-mark) {
  color:#d4d4d4 !important;
  background:#151515 !important;
  background-image:none !important;
  border-color:#292929 !important;
  box-shadow:none !important;
}
html[data-color-mode="dark"] body[data-role-theme] .content :is(.dashboard-bar-row .bar-track,.dashboard-paid-subscription-details > div) {
  background:#111111 !important;
  background-image:none !important;
  border-color:#242424 !important;
  box-shadow:none !important;
}
html[data-color-mode="dark"] body[data-role-theme] .content .dashboard-bar-row .bar-fill,
html[data-color-mode="dark"] body[data-role-theme] .content .dashboard-bar-row .bar-fill::after {
  background:#a3a3a3 !important;
  background-image:none !important;
  box-shadow:none !important;
  filter:none !important;
}
html[data-color-mode="dark"] body[data-role-theme] .profile-trigger:hover,
html[data-color-mode="dark"] body[data-role-theme] .profile-trigger:focus-visible {
  color:#f5f5f5 !important;
  background:#111111 !important;
  background-image:none !important;
  border-color:#333333 !important;
  box-shadow:none !important;
}
html[data-color-mode="dark"] body[data-role-theme] .profile-trigger:hover .profile-chevron,
html[data-color-mode="dark"] body[data-role-theme] .profile-trigger:focus-visible .profile-chevron { color:#a3a3a3 !important; }
html[data-color-mode="dark"] body[data-role-theme] .owner-subscription-activity .activity-main > span {
  overflow:visible !important;
  overflow-wrap:anywhere !important;
  text-overflow:clip !important;
  white-space:normal !important;
  line-height:1.45 !important;
}
html[data-color-mode="dark"] body[data-role-theme] .owner-active-subscription:hover {
  color:#f5f5f5 !important;
  background:#101010 !important;
  background-image:none !important;
  border-color:#333333 !important;
  box-shadow:none !important;
}
html[data-color-mode="dark"] body[data-role-theme] #bot-pill.pill.ok {
  color:#6ee7b7 !important;
  background:rgba(16,185,129,.12) !important;
  background-image:none !important;
  border-color:rgba(52,211,153,.45) !important;
  box-shadow:0 0 16px rgba(52,211,153,.08) !important;
}
html[data-color-mode="dark"] body .auth-screen .auth-card input:not([type="checkbox"]),
html[data-color-mode="dark"] body .auth-screen .auth-card input:not([type="checkbox"]):hover,
html[data-color-mode="dark"] body .auth-screen .auth-card input:not([type="checkbox"]):focus,
html[data-color-mode="dark"] body .auth-screen .auth-card input:not([type="checkbox"]):focus-visible {
  color:#f5f5f5 !important;
  background:#111111 !important;
  background-image:none !important;
  border-color:#292929 !important;
  box-shadow:none !important;
}

/* Keep License API details obscured in both normal and low-end modes. */
body[data-role-theme] .license-api-panel > :not(.card-head),
body[data-role-theme] .license-api-panel .card-head > button,
body[data-role-theme] .license-api-panel .card-head > div > :not(h3) {
  filter:blur(6px) !important;
  user-select:none !important;
}
body[data-role-theme] .license-api-endpoint { filter:blur(6px) !important; user-select:none !important; }

/* Low End Device Mode: flat, readable light surfaces with no decorative rendering. */
html[data-performance-mode="low"] body {
  --bg:#f5f6f8 !important;
  --bg-2:#f3f4f6 !important;
  --panel:#ffffff !important;
  --panel-2:#ffffff !important;
  --line:#e5e7eb !important;
  --line-2:#d1d5db !important;
  --text:#111827 !important;
  --muted:#4b5563 !important;
  --dim:#6b7280 !important;
  --accent:#e5e7eb !important;
  --accent-2:#111827 !important;
  --accent-soft:#e5e7eb !important;
  --green:#166534 !important;
  --green-soft:#ecfdf3 !important;
  --red:#b91c1c !important;
  --red-soft:#fef2f2 !important;
  --amber:#92400e !important;
  --amber-soft:#fffbeb !important;
  color:#111827 !important;
  background:#f5f6f8 !important;
  background-image:none !important;
}
html[data-performance-mode="low"] body,
html[data-performance-mode="low"] body *,
html[data-performance-mode="low"] body *::before,
html[data-performance-mode="low"] body *::after {
  animation:none !important;
  transition:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background-image:none !important;
  mix-blend-mode:normal !important;
}
html[data-performance-mode="low"] body :is(.app,.main,.content,#app,#content,.auth-screen,.auth-bg,.sidebar,.topbar) {
  color:#111827 !important;
  background:#f5f6f8 !important;
  background-image:none !important;
  border-color:#e5e7eb !important;
}
html[data-performance-mode="low"] body :is(.main,.content,#content) { background:#ffffff !important; }
html[data-performance-mode="low"] body :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card,.assigned-app-card,.assigned-choice,.assigned-app-empty,.owner-app-credential,.owner-active-subscription,.profile-trigger,.keycode,.activity-item,.log-row,.log-entry,.exe-row,.build-row,.app-action-info,.create-mode-card,.table-wrap,.support-chat-panel,.owner-support-settings,.auth-card,.modal,.toast,.dropdown-menu,.select-menu,[role="menu"],.profile-2fa-setup,.profile-2fa-instructions,.profile-2fa-qr-column,.otp-glass-panel,.bot-setup-panel,.discord-guide,.license-api-panel,.empty-state,.empty,.loading-state,.connect-box,.result-box,.notice) {
  color:#111827 !important;
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  border-color:#d1d5db !important;
}
html[data-performance-mode="low"] body :is(.sidebar,.topbar,.nav-item.active,.mode-selector) {
  color:#111827 !important;
  background:#ffffff !important;
  background-image:none !important;
  border-color:#d1d5db !important;
}
html[data-performance-mode="low"] body :is(input,select,textarea,.input-suffix-group,.assigned-secret-row input,.search-input,.signup-command-example,.otp-cells .otp-cell) {
  color:#111827 !important;
  background:#f3f4f6 !important;
  background-color:#f3f4f6 !important;
  background-image:none !important;
  border-color:#d1d5db !important;
  box-shadow:none !important;
}
html[data-performance-mode="low"] body :is(input,select,textarea)::placeholder { color:#6b7280 !important; }
html[data-performance-mode="low"] body select option { color:#111827 !important; background:#ffffff !important; }
html[data-performance-mode="low"] body :is(.field label,.field-label,.muted,.hint,.dashboard-hero-copy > p,.dashboard-status small,.stat-label,.metric-foot,.status-detail,.small,.text-muted,.nav-sep,.nav-section-label,.section-label,.topbar h2) { color:#4b5563 !important; }
html[data-performance-mode="low"] body :is(h1,h2,h3,h4,h5,h6,.auth-title,.auth-card h1,.auth-card h2) { color:#111827 !important; }
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-hero h1 > span:not(.owner-name-highlight) { color:#111827 !important; -webkit-text-fill-color:#111827 !important; text-shadow:none !important; }
html[data-performance-mode="low"] body[data-role-theme="owner"] #content .dashboard-hero h1 > span.owner-name-highlight { color:#b7791f !important; -webkit-text-fill-color:#b7791f !important; text-shadow:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .brand-copy b { color:#374151 !important; -webkit-text-fill-color:#374151 !important; font-weight:800 !important; }
html[data-performance-mode="low"] body :is(a,.link-btn,.nav-item,.brand,.brand-copy,.profile-trigger,.owner-name-highlight) { color:#4b5563 !important; }
html[data-performance-mode="low"] body .nav-item.active,
html[data-performance-mode="low"] body .nav-item.active:hover { color:#111827 !important; background:#e5e7eb !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body :is(th,thead) { color:#4b5563 !important; background:#f3f4f6 !important; border-color:#e5e7eb !important; }
html[data-performance-mode="low"] body :is(td,tbody tr,table) { color:#111827 !important; background:#ffffff !important; border-color:#e5e7eb !important; }
html[data-performance-mode="low"] body tbody tr:hover,
html[data-performance-mode="low"] body tbody tr:hover td { background:#f9fafb !important; }
html[data-performance-mode="low"] body .btn-primary,
html[data-performance-mode="low"] body .btn-primary:hover:not(:disabled) {
  color:#111827 !important;
  background:#e5e7eb !important;
  background-color:#e5e7eb !important;
  border-color:#d1d5db !important;
  background-image:none !important;
  transform:none !important;
}
html[data-performance-mode="low"] body :is(.btn-ghost,.btn-glass,.btn:not(.btn-primary):not(.btn-danger):not(.btn-green),.social-provider-button,.connection-key-copy,.assigned-copy,.password-visibility-toggle),
html[data-performance-mode="low"] body :is(.btn-ghost,.btn-glass,.btn:not(.btn-primary):not(.btn-danger):not(.btn-green),.social-provider-button,.connection-key-copy,.assigned-copy,.password-visibility-toggle):hover:not(:disabled) {
  color:#111827 !important;
  background:#ffffff !important;
  background-color:#ffffff !important;
  border-color:#d1d5db !important;
  background-image:none !important;
  transform:none !important;
}
html[data-performance-mode="low"] body :is(button,a,[role="button"],.card,.app-card,.stat,.dashboard-status,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card,.assigned-app-card,.assigned-choice,.owner-active-subscription,.profile-trigger,.keycode,.create-mode-card,.exe-row):hover {
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
}
html[data-performance-mode="low"] body .mode-selector {
  color:#111827 !important;
  background:#ffffff !important;
  border-color:#d1d5db !important;
}
html[data-performance-mode="low"] body .mode-option { color:#4b5563 !important; background:transparent !important; }
html[data-performance-mode="low"] body .mode-option:hover { color:#111827 !important; background:#f3f4f6 !important; }
html[data-performance-mode="low"] body .mode-option[aria-pressed="true"] { color:#111827 !important; background:#e5e7eb !important; }
html[data-performance-mode="low"] body :is(.badge.green,.pill.ok,.pill.good,.btn-green,.status-badge.success,.is-online,.support-chat-online) { color:#166534 !important; background:#ecfdf3 !important; border-color:#bbf7d0 !important; }
html[data-performance-mode="low"] body .status-light.is-online { background:#16a34a !important; border-color:#16a34a !important; }
html[data-performance-mode="low"] body .status-light.is-offline { background:#dc2626 !important; border-color:#dc2626 !important; }
html[data-performance-mode="low"] body :is(.badge.red,.pill.bad,.btn-danger,.status-badge.danger,.error-text,.text-danger) { color:#b91c1c !important; background:#fef2f2 !important; border-color:#fecaca !important; }
html[data-performance-mode="low"] body :is(.badge.amber,.pill.warn,.status-badge.warning,.warning-text,.text-warning) { color:#92400e !important; background:#fffbeb !important; border-color:#fde68a !important; }
html[data-performance-mode="low"] body :is(.status-icon,.metric-icon,.panel-mark,.activity-icon,.mode-icon,.assigned-app-icon,.connection-result-icon,.otp-template-icon,.empty-icon,.empty-state-icon) { color:#4b5563 !important; background:#f3f4f6 !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body .dashboard-orb,
html[data-performance-mode="low"] body .dashboard-orb .orb-core { color:#111827 !important; background:#f3f4f6 !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body :is(.dashboard-orb .orb-ring,.dashboard-orb .orb-glint,.hero-grid-lines,.auth-card::before,.auth-bg::before,.auth-bg::after) { display:none !important; }
html[data-performance-mode="low"] body #auth-screen .auth-bg { background:#f5f6f8 !important; animation:none !important; }
html[data-performance-mode="low"] body #auth-screen .auth-card { color:#111827 !important; background:#ffffff !important; background-image:none !important; border:1px solid #d1d5db !important; }
html[data-performance-mode="low"] body #auth-screen .auth-card::before { display:none !important; }
html[data-performance-mode="low"] body #auth-screen .auth-card :is(input,select,textarea) { color:#111827 !important; background:#f3f4f6 !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body #auth-screen .auth-card .btn-primary { color:#111827 !important; background:#e5e7eb !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body #auth-screen .auth-logo { color:#111827 !important; background:#f3f4f6 !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body #auth-screen .social-provider-button { color:#111827 !important; background:#ffffff !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body #auth-screen .auth-particles { display:none !important; }
html[data-performance-mode="low"] body .modal-backdrop { background:rgba(17,24,39,.28) !important; backdrop-filter:none !important; }
html[data-performance-mode="low"] body :is(.profile-2fa-qr-stage,.profile-2fa-locked-qr) { background:#ffffff !important; }
html[data-performance-mode="low"] body :is(input,select,textarea):focus-visible,
html[data-performance-mode="low"] body :focus-visible { outline:2px solid #6b7280 !important; outline-offset:2px !important; box-shadow:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .content .billing-plan.is-current-plan,
html[data-performance-mode="low"] body[data-role-theme] .content .billing-plan.is-current-plan:hover { animation:none !important; filter:none !important; box-shadow:none !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-bg { background:#f5f6f8 !important; background-image:none !important; animation:none !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card { color:#111827 !important; background:#ffffff !important; background-image:none !important; border-color:#d1d5db !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card::before { display:none !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-logo { color:#111827 !important; background:#f3f4f6 !important; background-image:none !important; border-color:#d1d5db !important; box-shadow:none !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card input:not([type="checkbox"]),
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card input:not([type="checkbox"]):hover,
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card input:not([type="checkbox"]):focus,
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card input:not([type="checkbox"]):focus-visible {
  color:#111827 !important;
  background:#f3f4f6 !important;
  background-image:none !important;
  border-color:#d1d5db !important;
  box-shadow:none !important;
}
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card input:not([type="checkbox"]):focus-visible { outline:2px solid #6b7280 !important; outline-offset:2px !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .btn-primary,
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .btn-primary:hover:not(:disabled) { color:#111827 !important; background:#e5e7eb !important; background-image:none !important; border-color:#d1d5db !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .social-provider-button,
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .social-provider-button:hover { color:#111827 !important; background:#ffffff !important; background-image:none !important; border-color:#d1d5db !important; box-shadow:none !important; filter:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .password-visibility-toggle:hover { color:#111827 !important; background:#f3f4f6 !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen a:hover,
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .link-btn:hover { color:#111827 !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-particles { display:none !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card input:-webkit-autofill,
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card input:-webkit-autofill:hover,
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card input:-webkit-autofill:focus {
  -webkit-text-fill-color:#111827 !important;
  -webkit-box-shadow:0 0 0 1000px #f3f4f6 inset !important;
  caret-color:#111827 !important;
}
html[data-performance-mode="low"] body { scrollbar-color:#9ca3af #f5f6f8 !important; }
html[data-performance-mode="low"] body ::-webkit-scrollbar-track { background:#f5f6f8 !important; }
html[data-performance-mode="low"] body ::-webkit-scrollbar-thumb { background:#9ca3af !important; }
html[data-performance-mode="low"] body ::-webkit-scrollbar-thumb:hover { background:#6b7280 !important; }
html[data-performance-mode="low"] body #content :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card,.assigned-app-card,.assigned-choice,.assigned-app-empty,.owner-app-credential,.owner-active-subscription,.profile-trigger,.keycode,.activity-item,.log-row,.log-entry,.exe-row,.build-row,.app-action-info,.create-mode-card,.table-wrap,.support-chat-panel,.owner-support-settings,.profile-2fa-setup,.profile-2fa-instructions,.profile-2fa-qr-column,.otp-glass-panel,.bot-setup-panel,.discord-guide,.license-api-panel,.empty-state,.empty,.loading-state,.connect-box,.result-box,.notice) {
  color:#111827 !important;
  background:#ffffff !important;
  background-color:#ffffff !important;
  background-image:none !important;
  border-color:#d1d5db !important;
  box-shadow:none !important;
  filter:none !important;
}
html[data-performance-mode="low"] body #content :is(.card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,.dashboard-activity,.dashboard-paid-subscription,.trial-app-card,.billing-plan,.support-contact-card,.self-account-card,.assigned-app-card,.assigned-choice,.assigned-app-empty,.owner-app-credential,.owner-active-subscription,.profile-trigger,.keycode,.activity-item,.log-row,.log-entry,.exe-row,.build-row,.app-action-info,.create-mode-card,.table-wrap,.support-chat-panel,.owner-support-settings):hover {
  transform:none !important;
  background:#ffffff !important;
  background-image:none !important;
  border-color:#d1d5db !important;
  box-shadow:none !important;
  filter:none !important;
}
html[data-performance-mode="low"] body #content :is(input,select,textarea,.assigned-choice,.assigned-app-empty,.assigned-app-value,.keycode,.owner-app-credential,.owner-active-subscription) {
  color:#111827 !important;
  background:#f3f4f6 !important;
  background-color:#f3f4f6 !important;
  background-image:none !important;
  border-color:#d1d5db !important;
}
html[data-performance-mode="low"] body #content :is(button,a,[role="button"]):hover { color:#111827 !important; transform:none !important; filter:none !important; box-shadow:none !important; }
html[data-performance-mode="low"] body #content :is(.nav-item,.profile-trigger,.profile-trigger:hover) { color:#4b5563 !important; background:#ffffff !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body #content .nav-item.active,
html[data-performance-mode="low"] body #content .nav-item.active:hover { color:#111827 !important; background:#e5e7eb !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body #content :is(thead,th) { color:#4b5563 !important; background:#f3f4f6 !important; border-color:#e5e7eb !important; }
html[data-performance-mode="low"] body #content :is(tbody,tr,td) { color:#111827 !important; background:#ffffff !important; background-image:none !important; border-color:#e5e7eb !important; }
html[data-performance-mode="low"] body #content tbody tr:hover,
html[data-performance-mode="low"] body #content tbody tr:hover td { background:#f9fafb !important; }
html[data-performance-mode="low"] body #content :is(.btn-primary,.btn-primary:hover:not(:disabled)) { color:#111827 !important; background:#e5e7eb !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body #content :is(.btn-ghost,.btn-glass,.btn:not(.btn-primary):not(.btn-danger):not(.btn-green),.social-provider-button,.connection-key-copy,.assigned-copy,.password-visibility-toggle,.btn-ghost:hover:not(:disabled),.btn-glass:hover:not(:disabled),.social-provider-button:hover,.password-visibility-toggle:hover) {
  color:#111827 !important;
  background:#ffffff !important;
  border-color:#d1d5db !important;
  background-image:none !important;
  transform:none !important;
  box-shadow:none !important;
}
html[data-performance-mode="low"] body #content :is(.badge.green,.pill.ok,.pill.good,.btn-green,.status-badge.success,.support-chat-online) { color:#166534 !important; background:#ecfdf3 !important; border-color:#bbf7d0 !important; }
html[data-performance-mode="low"] body #content :is(.badge.red,.pill.bad,.btn-danger,.status-badge.danger) { color:#b91c1c !important; background:#fef2f2 !important; border-color:#fecaca !important; }
html[data-performance-mode="low"] body #content :is(.badge.amber,.pill.warn,.status-badge.warning) { color:#92400e !important; background:#fffbeb !important; border-color:#fde68a !important; }
html[data-performance-mode="low"] body #content :is(.metric-icon,.status-icon,.activity-icon,.panel-mark,.mode-icon,.assigned-app-icon,.connection-result-icon,.otp-template-icon) { color:#4b5563 !important; background:#f3f4f6 !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card :is(a,.link-btn),
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card :is(a,.link-btn):hover { color:#4b5563 !important; text-shadow:none !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-card :is(a,.link-btn):hover { color:#111827 !important; }
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-title { color:#111827 !important; text-shadow:none !important; }
html[data-performance-mode="low"] body #app #nav .nav-item,
html[data-performance-mode="low"] body #app #nav .nav-item:hover { color:#4b5563 !important; background:#ffffff !important; background-image:none !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body #app #nav .nav-item.active,
html[data-performance-mode="low"] body #app #nav .nav-item.active:hover { color:#111827 !important; background:#e5e7eb !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body #app .topbar-right .pill { color:#4b5563 !important; background:#ffffff !important; border-color:#d1d5db !important; box-shadow:none !important; }
html[data-performance-mode="low"] body #app .topbar-right .pill.ok,
html[data-performance-mode="low"] body #app .topbar-right .pill.good { color:#166534 !important; background:#ecfdf3 !important; border-color:#bbf7d0 !important; }
html[data-performance-mode="low"] body #app .topbar-right .pill.bad { color:#b91c1c !important; background:#fef2f2 !important; border-color:#fecaca !important; }
html[data-performance-mode="low"] body #app .sidebar { color:#111827 !important; background:#ffffff !important; border-color:#e5e7eb !important; }
html[data-performance-mode="low"] body #app .topbar { color:#111827 !important; background:#ffffff !important; border-color:#e5e7eb !important; }
html[data-performance-mode="low"] body #content :is(input,select,textarea):focus,
html[data-performance-mode="low"] body #content :is(input,select,textarea):focus-visible { color:#111827 !important; background:#f3f4f6 !important; border-color:#9ca3af !important; box-shadow:none !important; outline:2px solid #6b7280 !important; outline-offset:2px !important; }
html[data-performance-mode="low"] body #content .dashboard-orb,
html[data-performance-mode="low"] body #content .dashboard-orb .orb-core { color:#111827 !important; background:#f3f4f6 !important; background-image:none !important; border-color:#d1d5db !important; box-shadow:none !important; filter:none !important; }
html[data-performance-mode="low"] body #content .dashboard-orb .orb-ring,
html[data-performance-mode="low"] body #content .dashboard-orb .orb-glint { display:none !important; }
html[data-performance-mode="low"] body #content .dashboard-orb-wrap { perspective:none !important; }
html[data-performance-mode="low"] body #content .dashboard-bar-row .bar-track { background:#f3f4f6 !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body #content .dashboard-bar-row .bar-fill { background:#9ca3af !important; }
html[data-performance-mode="low"] body #content .dashboard-bar-row .bar-fill::after { display:none !important; }
html[data-performance-mode="low"] body #content :is(.eyebrow,.panel-kicker,.dashboard-eyebrow,.nav-sep,.nav-section-label,.section-label,.field label,.field-label,.muted,.hint,.small,.text-muted,.dashboard-hero-copy > p,.dashboard-status small,.stat-label,.metric-foot,.status-detail) { color:#6b7280 !important; }
html[data-performance-mode="low"] body #content :is(h1,h2,h3,h4,h5,h6,.card-title,.panel-title,.dashboard-hero-title,.dashboard-panel-title) { color:#111827 !important; text-shadow:none !important; }
html[data-performance-mode="low"] body[data-role-theme] #app :is(h1,h2,h3,h4,h5,h6),
html[data-performance-mode="low"] body[data-role-theme] #page-title {
  color:#111827 !important;
  text-shadow:none !important;
}
html[data-performance-mode="low"] body #content :is(.dropdown-menu,.select-menu,[role="menu"],.modal,.toast,.toast-item) { color:#111827 !important; background:#ffffff !important; background-image:none !important; border-color:#d1d5db !important; box-shadow:none !important; }
html[data-performance-mode="low"] body #modal :is(input,select,textarea) { color:#111827 !important; background:#f3f4f6 !important; border-color:#d1d5db !important; }
html[data-performance-mode="low"] body #modal :is(button,a,[role="button"]):hover { color:#111827 !important; transform:none !important; filter:none !important; box-shadow:none !important; }
html[data-performance-mode="low"] body #toast { color:#111827 !important; background:#ffffff !important; border-color:#d1d5db !important; box-shadow:none !important; }
html[data-performance-mode="low"] body[data-role-theme] .password-input-wrap > .password-visibility-toggle,
html[data-performance-mode="low"] body[data-role-theme] .password-input-wrap > .password-visibility-toggle:hover,
html[data-performance-mode="low"] body[data-role-theme] .password-input-wrap > .password-visibility-toggle:focus-visible { position:absolute !important; top:0 !important; right:7px !important; bottom:0 !important; margin-block:auto !important; transform:none !important; }
/* Keep the live support chat on the Low End light palette, including its
   independently styled message area. */
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-titlebar {
  color:#111827 !important;
  background:#f3f4f6 !important;
  border-color:#d1d5db !important;
}
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-conversation {
  color:#111827 !important;
  background:#ffffff !important;
  border-color:#d1d5db !important;
}
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-message,
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-messages { color:#111827 !important; }
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-avatar {
  color:#374151 !important;
  background:#e5e7eb !important;
  background-image:none !important;
  border:1px solid #d1d5db !important;
}
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-bubble {
  color:#111827 !important;
  background:#f3f4f6 !important;
  border-color:#e5e7eb !important;
}
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-message-meta b,
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-bubble p { color:#111827 !important; }
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-message-meta time { color:#6b7280 !important; }
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-role,
html[data-performance-mode="low"] body #content .support-live-chat :is(.support-chat-role-admin,.support-chat-role-owner,.support-chat-role-reseller) {
  color:#374151 !important;
  background:#e5e7eb !important;
  border:1px solid #d1d5db !important;
}
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-heading { color:#111827 !important; }
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-form .support-chat-send,
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-form .support-chat-send:hover {
  color:#111827 !important;
  background:#e5e7eb !important;
  border-color:#d1d5db !important;
}
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-bubble .btn,
html[data-performance-mode="low"] body #content .support-live-chat .support-chat-bubble .btn:hover {
  color:#111827 !important;
  background:#ffffff !important;
  border-color:#d1d5db !important;
}
html[data-performance-mode="low"] body[data-role-theme] #content .profile-2fa-locked-panel {
  color:#111827 !important;
  background:#f3f4f6 !important;
  background-image:none !important;
  border-color:#d1d5db !important;
}
html[data-performance-mode="low"] body[data-role-theme] #content .profile-2fa-locked-content {
  color:#374151 !important;
  opacity:1 !important;
  filter:blur(2px) !important;
}
html[data-performance-mode="low"] body[data-role-theme] #content .profile-2fa-locked-copy > span,
html[data-performance-mode="low"] body[data-role-theme] #content .profile-2fa-locked-copy > b,
html[data-performance-mode="low"] body[data-role-theme] #content .profile-2fa-locked-code { color:#374151 !important; }
html[data-performance-mode="low"] body[data-role-theme] #content .profile-2fa-locked-code,
html[data-performance-mode="low"] body[data-role-theme] #content .profile-2fa-locked-bars i {
  background:#ffffff !important;
  border-color:#d1d5db !important;
}
html[data-performance-mode="low"] body[data-role-theme] #content .profile-2fa-locked-qr {
  color:#6b7280 !important;
  background:#e5e7eb !important;
  background-image:none !important;
  border-color:#ffffff !important;
}
html[data-performance-mode="low"] body[data-role-theme] #content .profile-2fa-lock-overlay { background:rgba(245,246,248,.12) !important; }
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb,
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb:hover {
  animation:none !important;
  transform:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb .orb-core,
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb .orb-core:hover { animation:none !important; transform:none !important; }
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-hero,
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-hero:hover {
  transform:none !important;
  transition:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb-wrap,
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb-wrap:hover,
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb,
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb:hover,
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb .orb-core {
  animation:none !important;
  transition:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb-wrap,
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb-wrap:hover {
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  pointer-events:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb,
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb:hover,
html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb .orb-core {
  transform:none !important;
}
@media(max-width:640px) {
  html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb-wrap,
  html[data-performance-mode="low"] body[data-role-theme] #content .dashboard-orb-wrap:hover {
    transform:translateY(-50%) scale(.64) !important;
  }
}
@media(prefers-reduced-motion:reduce) {
  html[data-performance-mode="low"] *,
  html[data-performance-mode="low"] *::before,
  html[data-performance-mode="low"] *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
html[data-performance-mode="low"] #app-particles { display:none !important; }

/* White Mode uses the existing canvas with a light background and dark particles. */
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-screen .auth-bg {
  inset:0 !important;
  background-color:#f5f6f8 !important;
  background-image:none !important;
  animation:none !important;
  transform:none !important;
}
html[data-performance-mode="low"] body[data-role-theme="auth"] #auth-particles {
  display:block !important;
  opacity:1 !important;
}

/* Live dashboard speed panel shown in every appearance mode. */
body[data-role-theme] .dashboard-hero:has(.dashboard-speed-panel) .dashboard-hero-copy {
  max-width:52%;
}
body[data-role-theme] .dashboard-speed-panel {
  position:absolute;
  z-index:2;
  top:50%;
  right:clamp(18px, 3.5vw, 48px);
  width:min(430px, 43%);
  transform:translateY(-50%);
  color:#f8fafc;
}
body[data-role-theme] .dashboard-speed-heading { margin-bottom:8px; text-align:center; }
body[data-role-theme] .dashboard-speed-heading h2 { color:inherit; font-size:20px; line-height:1.2; font-weight:750; }
body[data-role-theme] .dashboard-speed-heading p { margin-top:3px; color:rgba(226,232,240,.74); font-size:12px; }
body[data-role-theme] .dashboard-speed-content { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(140px,.85fr); align-items:center; gap:14px; }
body[data-role-theme] .dashboard-speed-gauge { position:relative; min-width:0; height:148px; }
body[data-role-theme] .dashboard-speed-gauge svg { display:block; width:100%; height:100%; overflow:visible; }
body[data-role-theme] .dashboard-speed-gauge path { fill:none; stroke-linecap:round; }
body[data-role-theme] .speed-gauge-track { stroke:rgba(148,163,184,.22); stroke-width:13; }
body[data-role-theme] .speed-gauge-value { stroke:url(#dashboard-speed-gradient); stroke-width:13; transition:stroke-dasharray .5s ease; }
body[data-role-theme] .speed-gauge-tick { stroke:rgba(148,163,184,.42); stroke-width:1.5; }
body[data-role-theme] .dashboard-speed-score { position:absolute; inset:auto 0 3px; display:grid; justify-items:center; gap:0; text-align:center; }
body[data-role-theme] .dashboard-speed-score strong { color:#f8fafc; font-size:36px; line-height:1; font-weight:800; letter-spacing:-1.3px; }
body[data-role-theme] .dashboard-speed-score span { margin-top:6px; color:rgba(203,213,225,.72); font-size:8px; line-height:1.3; letter-spacing:1.15px; }
body[data-role-theme] .dashboard-speed-stats { display:grid; gap:10px; }
body[data-role-theme] .dashboard-speed-stat { display:grid; min-height:63px; align-content:center; gap:1px; padding:9px 12px; border:1px solid rgba(148,163,184,.22); border-radius:12px; background:rgba(2,6,23,.34); }
body[data-role-theme] .dashboard-speed-stat span { color:rgba(203,213,225,.8); font-size:11px; }
body[data-role-theme] .dashboard-speed-stat strong { color:#60a5fa; font-size:24px; line-height:1.05; font-weight:800; letter-spacing:-.4px; white-space:nowrap; }
body[data-role-theme] .dashboard-speed-stat strong.is-healthy { color:#34d399; font-size:17px; }
body[data-role-theme] .dashboard-speed-stat strong.is-unavailable { color:#f87171; font-size:16px; }
html[data-color-mode="dark"] body[data-role-theme] .dashboard-speed-stat strong { color:#d1d5db; }
html[data-color-mode="dark"] body[data-role-theme] .dashboard-speed-stat strong.is-healthy { color:#86efac; }
html[data-color-mode="dark"] body[data-role-theme] .dashboard-speed-stat strong.is-unavailable { color:#f87171; }
html[data-performance-mode="low"] body[data-role-theme] .dashboard-speed-panel { color:#111827; }
html[data-performance-mode="low"] body[data-role-theme] .dashboard-speed-heading p,
html[data-performance-mode="low"] body[data-role-theme] .dashboard-speed-score span,
html[data-performance-mode="low"] body[data-role-theme] .dashboard-speed-stat span { color:#6b7280; }
html[data-performance-mode="low"] body[data-role-theme] .dashboard-speed-score strong { color:#111827; }
html[data-performance-mode="low"] body[data-role-theme] .dashboard-speed-stat { background:#f9fafb; border-color:#d1d5db; }
html[data-performance-mode="low"] body[data-role-theme] .dashboard-speed-stat strong { color:#2563eb; }
html[data-performance-mode="low"] body[data-role-theme] .dashboard-speed-stat strong.is-healthy { color:#15803d; }
html[data-performance-mode="low"] body[data-role-theme] .dashboard-speed-stat strong.is-unavailable { color:#b91c1c; }
html[data-performance-mode="low"] body[data-role-theme] .speed-gauge-track { stroke:#d1d5db; }
html[data-performance-mode="low"] body[data-role-theme] .speed-gauge-tick { stroke:#9ca3af; }

/* Owner identity accent: keep the gold sheen visible in every appearance mode. */
body[data-role-theme="owner"] .owner-name-highlight {
  color:#b7791f !important;
  -webkit-text-fill-color:transparent !important;
  background-image:linear-gradient(105deg,#9a610b 0%,#d5a52c 22%,#fff0a6 42%,#c88c16 58%,#9a610b 76%,#f5d76e 100%) !important;
  background-size:220% 100% !important;
  background-position:100% 50%;
  background-clip:text !important;
  -webkit-background-clip:text !important;
  text-shadow:0 0 7px rgba(204,151,31,.48),0 0 16px rgba(230,184,65,.3) !important;
  font-weight:800 !important;
  animation:owner-gold-shimmer 4.8s ease-in-out infinite !important;
}
@keyframes owner-gold-shimmer {
  0%,100% { background-position:100% 50%; }
  50% { background-position:0% 50%; }
}
/* Low End Device Mode removes effects globally; explicitly restore this small owner-only accent. */
html[data-performance-mode="low"] body[data-role-theme="owner"] #app #content .owner-name-highlight,
html[data-performance-mode="low"] body[data-role-theme="owner"] #app #me-name.owner-name-highlight {
  background-image:linear-gradient(105deg,#9a610b 0%,#d5a52c 22%,#fff0a6 42%,#c88c16 58%,#9a610b 76%,#f5d76e 100%) !important;
  background-size:220% 100% !important;
  background-clip:text !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
  text-shadow:0 0 7px rgba(204,151,31,.48),0 0 16px rgba(230,184,65,.3) !important;
  animation:owner-gold-shimmer 4.8s ease-in-out infinite !important;
}
@media (prefers-reduced-motion:reduce) {
  body[data-role-theme="owner"] .owner-name-highlight {
    animation:none !important;
    background-position:50% 50%;
  }
}
@media(max-width:900px) {
  body[data-role-theme] .dashboard-hero:has(.dashboard-speed-panel) { min-height:410px; align-items:flex-start; }
  body[data-role-theme] .dashboard-hero:has(.dashboard-speed-panel) .dashboard-hero-copy { max-width:100%; }
  body[data-role-theme] .dashboard-speed-panel { top:auto; right:18px; bottom:14px; left:18px; width:auto; transform:none; }
  body[data-role-theme] .dashboard-speed-heading { text-align:left; }
  body[data-role-theme] .dashboard-speed-content { grid-template-columns:minmax(0,1fr) minmax(160px,.9fr); }
}
@media(max-width:640px) {
  body[data-role-theme] .dashboard-hero:has(.dashboard-speed-panel) { min-height:500px; }
  body[data-role-theme] .dashboard-speed-panel { right:14px; bottom:12px; left:14px; }
  body[data-role-theme] .dashboard-speed-content { grid-template-columns:minmax(0,.95fr) minmax(130px,1.05fr); gap:8px; }
  body[data-role-theme] .dashboard-speed-gauge { height:135px; }
  body[data-role-theme] .dashboard-speed-stat { min-height:58px; padding:8px; }
  body[data-role-theme] .dashboard-speed-stat strong { font-size:20px; }
}
body[data-role-theme] .dashboard-hero,
body[data-role-theme] .dashboard-hero:hover {
  transform:none !important;
  transition: border-color .35s ease, box-shadow .35s ease !important;
}

/* Application credential fields use neutral charcoal surfaces in Dark Mode. */
html[data-color-mode="dark"] body[data-role-theme] #content :is(.owner-app-credential,.assigned-app-value) {
  color:#e5e5e5 !important;
  background:#111111 !important;
  background-color:#111111 !important;
  background-image:none !important;
  border-color:#292929 !important;
  border-left-color:#444444 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
html[data-color-mode="dark"] body[data-role-theme] #content :is(.owner-app-credential-head,.assigned-app-value-head) { color:#a3a3a3 !important; }
html[data-color-mode="dark"] body[data-role-theme] #content :is(.owner-app-credential-value,.assigned-app-value-text) { color:#f5f5f5 !important; }

/* White Mode selected application labels need dark ink on their pale row surfaces. */
html[data-performance-mode="low"] body[data-role-theme] #content .assigned-all-apps .assigned-choice .assigned-choice-name {
  color:#111827 !important;
  -webkit-text-fill-color:#111827 !important;
  opacity:1 !important;
  font-weight:750 !important;
}

/* Dark Mode uses a neutral checked state instead of the bright cyan treatment. */
html[data-color-mode="dark"] body[data-role-theme] #content .assigned-all-apps .assigned-choice:has(input:checked),
html[data-color-mode="dark"] body[data-role-theme] #content .assigned-all-apps .assigned-choice:has(input:checked):hover {
  color:#f5f5f5 !important;
  background:#171717 !important;
  background-image:none !important;
  border:1px solid #4b4b4b !important;
  box-shadow:inset 3px 0 #a3a3a3 !important;
}
html[data-color-mode="dark"] body[data-role-theme] #content .assigned-all-apps .assigned-choice:has(input:checked) .assigned-choice-name {
  color:#f5f5f5 !important;
  -webkit-text-fill-color:#f5f5f5 !important;
}
html[data-color-mode="dark"] body[data-role-theme] #content .assigned-all-apps .assigned-choice input[type="checkbox"]:checked {
  border-color:#a3a3a3 !important;
  background:#d4d4d4 !important;
  box-shadow:none !important;
}

/* Raise White Mode muted text contrast by about 10% for easier reading. */
html[data-performance-mode="low"] body {
  --muted:#414955 !important;
  --dim:#59616d !important;
}
html[data-performance-mode="low"] body #content :is(
  .field label,.field-label,.muted,.hint,.small,.text-muted,.dashboard-hero-copy > p,
  .dashboard-status small,.stat-label,.metric-foot,.status-detail,.eyebrow,.panel-kicker,
  .dashboard-eyebrow,.nav-sep,.nav-section-label,.section-label,.dashboard-speed-heading p,
  .dashboard-speed-score span,.dashboard-speed-stat span,.assigned-app-value-head,
  .owner-app-credential-head,.support-chat-message-meta time
) {
  color:#59616d !important;
  opacity:1 !important;
}
/* Slightly strengthen neutral outlines and dividers in White Mode. */
html[data-performance-mode="low"] body {
  --line:#cbd2dc !important;
  --line-2:#b8c1cd !important;
}
html[data-performance-mode="low"] body #content :is(
  .card,.app-card,.stat,.dashboard-hero,.dashboard-status,.metric-card,.dashboard-panel,
  .table-wrap,.assigned-choice,.assigned-app-value,.owner-app-credential,.profile-trigger,
  input,select,textarea,th,td,hr
) {
  border-color:#cbd2dc !important;
}
html[data-performance-mode="low"] body #content :is(hr,.divider,.card-head,.table-wrap table,th,td) {
  border-color:#cbd2dc !important;
}

/* Low End Device Mode removes filters globally, so restore the License API privacy blur explicitly. */
html[data-performance-mode="low"] body[data-role-theme] #app #content .license-api-panel > :not(.card-head):not(#test-api),
html[data-performance-mode="low"] body[data-role-theme] #app #content .license-api-panel .card-head > button,
html[data-performance-mode="low"] body[data-role-theme] #app #content .license-api-panel .card-head > div > :not(h3) {
  filter:blur(6px) !important;
  user-select:none !important;
}
html[data-performance-mode="low"] body[data-role-theme] #app #content .license-api-panel #license-api-edit,
html[data-performance-mode="low"] body[data-role-theme] #app #content .license-api-panel #test-api {
  filter:none !important;
  user-select:auto !important;
}

/* Keep horizontal table scrollbars visible but understated in every mode. */
.bot-setup-divider { width:100%; height:1px; margin:12px 0 14px; background:var(--line); }
body, body * { scrollbar-color:rgba(107,114,128,.42) rgba(107,114,128,.08) !important; }
::-webkit-scrollbar-track { background:rgba(107,114,128,.08) !important; border-color:transparent !important; }
::-webkit-scrollbar-thumb { background:rgba(107,114,128,.42) !important; border:3px solid transparent !important; background-clip:padding-box !important; box-shadow:none !important; }
::-webkit-scrollbar-thumb:hover { background:rgba(107,114,128,.58) !important; box-shadow:none !important; }
html[data-color-mode="dark"] body { scrollbar-color:rgba(156,163,175,.4) rgba(156,163,175,.07) !important; }
html[data-color-mode="dark"] body ::-webkit-scrollbar-track { background:rgba(156,163,175,.07) !important; border-color:transparent !important; }
html[data-color-mode="dark"] body ::-webkit-scrollbar-thumb { background:rgba(156,163,175,.4) !important; border-color:transparent !important; background-clip:padding-box !important; box-shadow:none !important; }
html[data-color-mode="dark"] body ::-webkit-scrollbar-thumb:hover { background:rgba(156,163,175,.56) !important; }
html[data-performance-mode="low"] body { scrollbar-color:rgba(107,114,128,.42) rgba(107,114,128,.08) !important; }
html[data-performance-mode="low"] body ::-webkit-scrollbar-track { background:rgba(107,114,128,.08) !important; border-color:transparent !important; }
html[data-performance-mode="low"] body ::-webkit-scrollbar-thumb { background:rgba(107,114,128,.42) !important; border-color:transparent !important; background-clip:padding-box !important; box-shadow:none !important; }
html[data-performance-mode="low"] body ::-webkit-scrollbar-thumb:hover { background:rgba(107,114,128,.58) !important; }

/* Give every sidebar option a clear hover response across appearance modes. */
html body #app #nav .nav-item:not(.active):hover {
  color:var(--text) !important;
  background:var(--accent-soft) !important;
  border-color:var(--accent) !important;
  box-shadow:inset 3px 0 var(--accent),0 0 14px rgba(34,211,238,.12) !important;
}
html body #app #nav .nav-item.active:hover {
  filter:brightness(1.12) !important;
}
html[data-color-mode="dark"] body #app #nav .nav-item:not(.active):hover {
  color:#f5f5f5 !important;
  background:#202020 !important;
  border-color:#444444 !important;
  box-shadow:inset 3px 0 #bdbdbd,0 0 12px rgba(255,255,255,.06) !important;
}
html[data-color-mode="dark"] body #app #nav .nav-item.active:hover {
  filter:brightness(1.15) !important;
}
html[data-performance-mode="low"] body #app #nav .nav-item:not(.active):hover {
  color:#111827 !important;
  background:#e8eef6 !important;
  border-color:#aebed0 !important;
  box-shadow:inset 3px 0 #64748b !important;
}
html[data-performance-mode="low"] body #app #nav .nav-item.active:hover {
  background:#d8e2ef !important;
  border-color:#aebed0 !important;
  box-shadow:inset 3px 0 #64748b !important;
}

/* App-wide responsive layout safeguards. Keep cards and their contents inside
   the available viewport, then stack multi-panel layouts as space narrows. */
#app, #app .main, #app .content, #app #content,
#app #content :is(.card,.stat,.app-card,.dashboard-panel,.dashboard-status,
  .dashboard-hero,.settings-category,.assigned-app-card,.billing-plan,
  .support-contact-card,.profile-2fa-setup,.table-wrap) {
  min-width:0;
  max-width:100%;
}
#app #content :is(input,select,textarea,pre,code) { max-width:100%; }
#app #content :is(.card-head,.app-head,.app-actions,.row,.form-actions,
  .modal-actions,.dashboard-actions,.topbar-right) { min-width:0; flex-wrap:wrap; }
#app #content :is(.btn,button) { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
#app #content :is(.mono,pre,code,.keycode,.assigned-app-value-text,
  .owner-app-credential,.application-created-details,.creation-success-detail) {
  overflow-wrap:anywhere;
  word-break:break-word;
}
#app #content .table-wrap { width:100%; overflow-x:auto; overscroll-behavior-inline:contain; }
#app #content .table-wrap > table { min-width:600px; }

@media (max-width: 900px) {
  #app #content :is(.grid-2,.settings-category-grid,.owner-subscriptions-layout,
    .assigned-apps-layout,.profile-grid,.logs-columns,.support-two-column,
    .support-settings-columns,.billing-payment-info,.billing-plans-trial,
    .billing-plans-paid,.profile-2fa-setup-grid,.dashboard-panels) {
    grid-template-columns:minmax(0,1fr);
  }
  #app #content .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #app #content :is(.application-grid,.assigned-app-list) {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #app #content :is(.settings-left-column,.settings-right-column,
    .settings-category-column) { min-width:0; }
  #app #content :is(.dashboard-hero,.dashboard-paid-subscription) { padding:18px; }
  #app #content .dashboard-status-row,
  #app #content .dashboard-status-row.reseller-status-row {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 600px) {
  #app { height:100dvh; min-height:100%; }
  #app .sidebar { width:54px; flex-basis:54px; padding:12px 5px; }
  #app .topbar { min-height:56px; height:auto; padding:9px 12px; gap:8px; }
  #app .topbar h2 { min-width:0; font-size:15px; overflow-wrap:anywhere; }
  #app .content { padding:12px 10px 28px; }
  #app #content :is(.card,.settings-category,.assigned-app-card,
    .dashboard-paid-subscription,.dashboard-panel,.billing-plan) { padding:14px; }
  #app #content :is(.card-head,.app-head) { align-items:flex-start; gap:9px; }
  #app #content :is(.card-head > button,.card-head .btn,
    .app-head-actions,.modal-actions .btn) { max-width:100%; }
  #app #content :is(.application-grid,.assigned-app-list,
    .dashboard-status-row,.dashboard-status-row.reseller-status-row,
    .dashboard-paid-subscription-details,.owner-payment-details,.grid-4) {
    grid-template-columns:minmax(0,1fr);
  }
  #app #content :is(.row,.form-actions,.modal-actions,.dashboard-actions) {
    align-items:stretch;
  }
  #app #content .row > * { min-width:0; flex-basis:100%; }
  #app #content :is(.row,.form-actions,.modal-actions) > .btn,
  #app #content .dashboard-actions > .btn { flex:1 1 100%; width:100%; }
  #app #content :is(.assigned-app-details > div,.application-created-details > div,
    .creation-success-detail,.support-server-details > div) {
    grid-template-columns:minmax(0,1fr);
    gap:5px;
  }
  #app #content .bar-row .name { width:min(34vw,110px); }
  #app #content :is(.dashboard-hero,.dashboard-paid-subscription) { padding:15px; }
  #app #content .dashboard-hero { min-height:0; }
  #app #content .dashboard-orb-wrap { display:none; }
  .modal-backdrop { align-items:flex-start; overflow-y:auto; padding:12px; }
  .modal { width:min(100%,560px); max-height:calc(100dvh - 24px); overflow-y:auto; padding:16px; }
  #app .topbar { flex-wrap:wrap; }
  #app .topbar-right { flex:1 1 100%; justify-content:flex-end; flex-wrap:wrap; }
  .auth-screen { overflow-y:auto; padding:12px; }
  .auth-card { width:min(100%,420px); max-height:calc(100dvh - 24px); padding:26px 18px 22px; }
  .auth-card.signup-wide { width:100%; }
  #signup-form .signup-main-fields { grid-template-columns:minmax(0,1fr); }
}

@media (max-width: 380px) {
  #app .sidebar { width:48px; flex-basis:48px; }
  #app .topbar { padding-inline:9px; }
  #app .content { padding-inline:8px; }
  #app #content :is(.card,.settings-category,.assigned-app-card,
    .dashboard-paid-subscription,.dashboard-panel,.billing-plan) { padding:12px; }
  #app #content .otp-cells { gap:5px; }
  #app #content .otp-cells .otp-cell { height:42px; min-height:42px; }
}

.action-rate-limit-dialog,.session-replaced-dialog { display:grid; gap:10px; }
.action-rate-limit-countdown { padding:12px 14px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--bg-2); text-align:center; }
.action-rate-limit-countdown strong { display:inline-block; min-width:3.5em; margin-left:4px; color:var(--accent-2); font-variant-numeric:tabular-nums; }
.action-rate-limit-dialog .modal-actions,.session-replaced-dialog .modal-actions { margin-top:8px; }