:root {
  --bg: #08101d;
  --bg-2: #0b1424;
  --card: #101b2d;
  --card-2: #0e1828;
  --line: #22324a;
  --text: #ecf3ff;
  --muted: #8fa1ba;
  --accent: #41d6c3;
  --accent-2: #70a8ff;
  --ok: #5de38a;
  --warn: #ffc857;
  --danger: #ff6f7d;
  --shadow: 0 12px 28px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 14% -10%, rgba(65,214,195,.10), transparent 34rem),
    radial-gradient(circle at 92% 0%, rgba(112,168,255,.08), transparent 28rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select { font: inherit; }
button { color: inherit; }

.shell { width: min(1600px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0 48px; }
.topbar { display: flex; gap: 24px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
h1 { margin: 2px 0 5px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.04em; }
h2 { margin: 2px 0 0; font-size: 18px; }
.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 800; }
.subline, .muted { color: var(--muted); font-size: 13px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.refresh-picker { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:4px 8px 4px 10px; border:1px solid var(--line); border-radius:9px; background:rgba(255,255,255,.025); color:#9fb0c7; font-size:12px; font-weight:700; }
.refresh-picker select { border:1px solid var(--line); border-radius:7px; background:#0a1423; color:var(--text); padding:5px 7px; outline:none; }
.refresh-picker select:focus { border-color:rgba(65,214,195,.7); box-shadow:0 0 0 2px rgba(65,214,195,.08); }

.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); color: #c8d4e7; font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.badge-ok { color: var(--ok); border-color: rgba(93,227,138,.25); background: rgba(93,227,138,.08); }
.badge-warn { color: var(--warn); border-color: rgba(255,200,87,.25); background: rgba(255,200,87,.08); }
.badge-danger { color: var(--danger); border-color: rgba(255,111,125,.25); background: rgba(255,111,125,.08); }

.notice { margin: 0 0 18px; padding: 11px 14px; border: 1px solid rgba(255,200,87,.24); border-radius: 10px; color: #e8d8a5; background: rgba(255,200,87,.055); font-size: 13px; }

.tabs { display: flex; align-items: center; gap: 4px; overflow-x: auto; margin-bottom: 16px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,19,33,.82); box-shadow: var(--shadow); }
.tab { border: 0; border-radius: 9px; padding: 10px 16px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 750; white-space: nowrap; }
.tab:hover { color: var(--text); background: rgba(255,255,255,.035); }
.tab.active { color: #07141a; background: var(--accent); }

.view { display: none; }
.view.active { display: block; }
.cards { display: grid; gap: 12px; margin-bottom: 12px; }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-card, .panel-card { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(17,29,48,.96), rgba(12,22,37,.96)); box-shadow: var(--shadow); }
.metric-card { min-height: 116px; padding: 16px; border-radius: 12px; }
.metric-label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; }
.metric-value { margin-top: 8px; font-size: 28px; font-weight: 850; letter-spacing: -.04em; }
.metric-foot { margin-top: 7px; color: var(--muted); font-size: 12px; }
.metric-value.ok { color: var(--ok); }
.metric-value.warn { color: var(--warn); }
.metric-value.danger { color: var(--danger); }

.grid { display: grid; gap: 12px; margin-bottom: 12px; }
.two-col { grid-template-columns: 1fr 1fr; }
.panel-card { padding: 16px; border-radius: 12px; margin-bottom: 12px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }

.status-list { display: grid; gap: 8px; }
.status-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.045); border-radius: 9px; }
.status-name { color: #d5dfef; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; }
.dot { width: 8px; height: 8px; border-radius: 999px; background: var(--muted); box-shadow: 0 0 0 3px rgba(143,161,186,.08); }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(93,227,138,.10); }
.dot.danger { background: var(--danger); box-shadow: 0 0 0 3px rgba(255,111,125,.10); }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail { padding: 11px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.05); background: rgba(255,255,255,.025); }
.detail dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.detail dd { margin: 5px 0 0; font-weight: 800; overflow-wrap: anywhere; }

.mini-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.mini { padding: 10px; border: 1px solid rgba(255,255,255,.05); border-radius: 9px; background: rgba(255,255,255,.025); }
.mini strong { display: block; font-size: 20px; }
.mini span { color: var(--muted); font-size: 11px; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { padding: 10px 9px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.055); vertical-align: middle; }
th { color: #94a8c2; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
td { color: #dbe5f4; font-size: 13px; }
tr:hover td { background: rgba(255,255,255,.018); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; }
.truncate { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.button { border: 1px solid rgba(65,214,195,.34); background: rgba(65,214,195,.14); color: #b9fff4; padding: 8px 12px; border-radius: 8px; cursor: pointer; font-weight: 800; font-size: 12px; }
.button:hover { background: rgba(65,214,195,.20); }
.button-secondary { border-color: var(--line); background: rgba(255,255,255,.035); color: #d7e2f2; }
.button-danger { border-color: rgba(255,111,125,.28); background: rgba(255,111,125,.10); color: #ffb5bc; }
.button:disabled { opacity: .5; cursor: not-allowed; }

.settings-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; }
.field { display: grid; gap: 6px; }
.field label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.field input, .field select, .rules-table input, .rules-table select { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: #0a1423; color: var(--text); padding: 8px; outline: none; }
.field input:focus, .field select:focus, .rules-table input:focus, .rules-table select:focus { border-color: rgba(65,214,195,.7); box-shadow: 0 0 0 2px rgba(65,214,195,.08); }
.checkbox { width: 18px !important; height: 18px; accent-color: var(--accent); }
.rules-table input[type="number"] { min-width: 90px; }
.rules-table select { min-width: 112px; }

.backend-stack { display: grid; gap: 12px; }
.backend-card { border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 14px; background: rgba(255,255,255,.02); }
.backend-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 12px; }
.backend-title h3 { margin: 0; font-size: 17px; }
.backend-meta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.model-row { margin-top: 10px; padding: 10px 12px; border-left: 2px solid rgba(112,168,255,.5); background: rgba(112,168,255,.035); border-radius: 0 8px 8px 0; }

.empty { padding: 24px; text-align: center; color: var(--muted); }
.toast { position: fixed; right: 22px; bottom: 22px; max-width: 420px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: #111d30; box-shadow: var(--shadow); transform: translateY(20px); opacity: 0; pointer-events: none; transition: .18s ease; font-size: 13px; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { border-color: rgba(255,111,125,.35); color: #ffc1c7; }

@media (max-width: 1100px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .mini-cards { grid-template-columns: repeat(3, 1fr); }
  .settings-grid { grid-template-columns: repeat(2, 1fr); }
  .backend-meta { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .shell { width: min(100% - 20px, 1600px); padding-top: 18px; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .top-actions { justify-content: flex-start; }
  .cards-4, .two-col, .settings-grid { grid-template-columns: 1fr; }
  .mini-cards { grid-template-columns: repeat(2, 1fr); }
  .detail-grid, .backend-meta { grid-template-columns: 1fr; }
  .section-head { align-items: flex-start; flex-direction: column; }
}

.form-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 10px; align-items: end; }
.form-grid-key { grid-template-columns: minmax(220px, 2fr) minmax(220px, 1fr) minmax(140px, .7fr); margin-bottom: 14px; }
.field-action { align-self: end; }
.inline-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.compact-input, .compact-select { border: 1px solid var(--line); border-radius: 7px; background: #0a1423; color: var(--text); padding: 8px; outline: none; }
.compact-input { min-width: 260px; }
.compact-select { min-width: 110px; }
.compact-input:focus, .compact-select:focus { border-color: rgba(65,214,195,.7); box-shadow: 0 0 0 2px rgba(65,214,195,.08); }
.secret-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; margin-bottom: 14px; border: 1px solid rgba(255,200,87,.30); border-radius: 10px; background: rgba(255,200,87,.065); }
.secret-value { margin-top: 6px; color: #fff0b8; overflow-wrap: anywhere; word-break: break-all; font-size: 13px; }

@media (max-width: 1100px) {
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid-key { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .form-grid, .form-grid-key { grid-template-columns: 1fr; }
  .compact-input { min-width: 0; width: 100%; }
  .secret-box { align-items: flex-start; flex-direction: column; }
}
.secret-box[hidden], #userKeysCard[hidden] { display: none !important; }

/* usage / quota */
.detail-card, .sub-card { border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: 14px; background: rgba(255,255,255,.02); }
.detail-card h3, .sub-card h3 { margin: 0 0 12px; font-size: 16px; }
.limit-grid { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
.quota-summary { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
.quota-chip { padding: 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: rgba(255,255,255,.025); }
.quota-chip strong { display:block; font-size: 18px; }
.quota-chip span { color: var(--muted); font-size: 11px; }
.inline-form { display:flex; gap:8px; align-items:end; flex-wrap:wrap; margin-top:10px; }
.inline-form input, .inline-form select, .switch-label select { border:1px solid var(--line); border-radius:7px; background:#0a1423; color:var(--text); padding:8px; }
.switch-label { color:var(--muted); font-size:12px; display:flex; align-items:center; gap:8px; }
#usageUserCard[hidden] { display:none !important; }
@media (max-width: 1100px) { .limit-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 720px) { .limit-grid, .quota-summary { grid-template-columns: 1fr; } .inline-form { flex-direction:column; align-items:stretch; } }

/* v0.1.9 - compact lists, filters and drawers */
body.drawer-open { overflow: hidden; }

.table-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}
.table-tools .compact-input { min-width: 220px; max-width: 420px; flex: 1 1 260px; }
.table-tools .compact-select { min-width: 150px; flex: 0 1 210px; }
.table-tools .filter-count { margin-left: auto; white-space: nowrap; }

.table-wrap {
  width: 100%;
  overflow-x: hidden;
  border-radius: 9px;
}
.table-scroll {
  max-height: 430px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid rgba(255,255,255,.045);
}
.table-scroll-sm { max-height: 300px; }
.table-scroll table { border-collapse: separate; border-spacing: 0; }
.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #111d30;
  box-shadow: 0 1px 0 rgba(255,255,255,.07);
}
.fit-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.fit-table th,
.fit-table td {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.fit-table input,
.fit-table select,
.fit-table .compact-input,
.fit-table .compact-select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.fit-table .inline-actions { gap: 5px; }
.fit-table .button { padding: 7px 9px; }

.users-table th:nth-child(1) { width: 26%; }
.users-table th:nth-child(2), .users-table th:nth-child(3) { width: 11%; }
.users-table th:nth-child(4) { width: 10%; }
.users-table th:nth-child(5) { width: 15%; }
.users-table th:nth-child(6) { width: 27%; }

.usage-users-table th:nth-child(1) { width: 24%; }
.usage-users-table th:nth-child(2),
.usage-users-table th:nth-child(3),
.usage-users-table th:nth-child(4),
.usage-users-table th:nth-child(5),
.usage-users-table th:nth-child(6) { width: 10%; }
.usage-users-table th:nth-child(7) { width: 13%; }
.usage-users-table th:nth-child(8) { width: 13%; }

.api-key-table th:nth-child(1) { width: 18%; }
.api-key-table th:nth-child(2) { width: 16%; }
.api-key-table th:nth-child(3) { width: 12%; }
.api-key-table th:nth-child(4),
.api-key-table th:nth-child(5) { width: 15%; }
.api-key-table th:nth-child(6) { width: 14%; }
.api-key-table th:nth-child(7) { width: 10%; }

.key-limits-table th:nth-child(1) { width: 18%; }
.key-limits-table th:nth-child(n+2):nth-child(-n+7) { width: 11%; }
.key-limits-table th:nth-child(8) { width: 12%; }
.key-limits-table td { padding: 8px 6px; }

.job-table { font-size: 12px; min-width: 1200px; }
.job-table-scroll { overflow-x: auto; }
.job-table th { white-space: nowrap; }
.job-table th:nth-child(1) { width: 12%; }
.job-table th:nth-child(2) { width: 16%; }
.job-table th:nth-child(3) { width: 8%; }
.job-table th:nth-child(4) { width: 6%; }
.job-table th:nth-child(5) { width: 6%; }
.job-table th:nth-child(6) { width: 7%; }
.job-table th:nth-child(7) { width: 7%; }
.job-table th:nth-child(8) { width: 7%; }
.job-table th:nth-child(9) { width: 8%; }
.job-table th:nth-child(10) { width: 12%; }
.job-table th:nth-child(11) { width: 11%; }


.security-events-table th:nth-child(1) { width: 15%; }
.security-events-table th:nth-child(2) { width: 14%; }
.security-events-table th:nth-child(3) { width: 12%; }
.security-events-table th:nth-child(4) { width: 13%; }
.security-events-table th:nth-child(5) { width: 20%; }
.security-events-table th:nth-child(6) { width: 26%; }
.audit-table th:nth-child(1) { width: 14%; }
.audit-table th:nth-child(2) { width: 13%; }
.audit-table th:nth-child(3) { width: 17%; }
.audit-table th:nth-child(4) { width: 18%; }
.audit-table th:nth-child(5) { width: 13%; }
.audit-table th:nth-child(6) { width: 25%; }

.drawer[hidden] { display: none !important; }
.drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
}
.drawer-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: rgba(2, 8, 16, .72);
  backdrop-filter: blur(3px);
  cursor: default;
}
.drawer-panel {
  position: relative;
  z-index: 1;
  width: min(1050px, calc(100vw - 34px));
  height: calc(100vh - 34px);
  margin: 17px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #111d30, #0b1525);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
}
.drawer-panel-wide { width: min(1380px, calc(100vw - 34px)); }
.drawer-header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(17,29,48,.98);
}
.drawer-header h2 { margin-top: 3px; font-size: 20px; }
.drawer-close { flex: 0 0 auto; }
.drawer-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 22px;
}
.drawer-body > :last-child { margin-bottom: 0; }

/* Keep large forms inside their cards instead of forcing horizontal scrolling. */
.drawer .form-grid,
.drawer .form-grid-key,
.drawer .limit-grid { min-width: 0; }
.drawer .field { min-width: 0; }
.drawer .inline-form > * { min-width: 0; }
.drawer #quotaAdjustmentDescription { flex: 2 1 220px; }
.drawer #quotaAdjustmentAmount { flex: 1 1 140px; }

@media (max-width: 1200px) {
  .fit-table { table-layout: auto; }
  .fit-table th, .fit-table td { font-size: 12px; padding: 8px 6px; }
  .job-table th:nth-child(n),
  .users-table th:nth-child(n),
  .usage-users-table th:nth-child(n),
  .api-key-table th:nth-child(n),
  .key-limits-table th:nth-child(n),
  .security-events-table th:nth-child(n),
  .audit-table th:nth-child(n) { width: auto; }
}

@media (max-width: 820px) {
  .drawer-panel, .drawer-panel-wide {
    width: calc(100vw - 16px);
    height: calc(100vh - 16px);
    margin: 8px;
  }
  .drawer-header { padding: 13px; }
  .drawer-body { padding: 12px; }
  .table-tools { align-items: stretch; }
  .table-tools .compact-input,
  .table-tools .compact-select { max-width: none; flex: 1 1 100%; }
  .table-tools .filter-count { margin-left: 0; }
  .table-scroll { max-height: 360px; }
}

/* v0.1.10 - centered full-height modals with internal tabbed workspaces */
.drawer {
  justify-content: center;
  align-items: center;
  padding: 12px;
}
.drawer-panel {
  width: min(1120px, calc(100vw - 24px));
  height: calc(100dvh - 24px);
  max-height: calc(100dvh - 24px);
  margin: 0;
}
.drawer-panel-wide {
  width: min(1460px, calc(100vw - 24px));
}
.drawer-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drawer .fit-table { table-layout: fixed; }
.drawer .table-scroll { overflow-x: hidden; }

/* API-key modal: forms stay visible, only the list scrolls. */
#userKeysCard .drawer-body > .table-scroll {
  flex: 1 1 auto;
  min-height: 180px;
  max-height: none;
}

.detail-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 20, 35, .96);
}
.detail-tab {
  min-width: 128px;
  padding: 9px 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 9px;
  background: #162338;
  color: var(--muted);
  font-weight: 700;
  cursor: pointer;
}
.detail-tab:hover { color: var(--text); border-color: rgba(88, 215, 198, .32); }
.detail-tab.active {
  color: #061519;
  background: var(--accent);
  border-color: transparent;
}

.usage-detail-body { padding-top: 12px; }
.detail-pane[hidden] { display: none !important; }
.detail-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.detail-pane.active {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.settings-top-grid {
  flex: 0 0 auto;
  margin: 0;
}
.flex-list-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.flex-list-card .section-head,
.flex-list-card .table-tools { flex: 0 0 auto; }
.modal-list-grow {
  flex: 1 1 auto;
  min-height: 160px;
  max-height: none;
}
.table-scroll-key-limits { min-height: 150px; }
.pane-card-full { height: 100%; }
.compact-note { margin: 9px 0 0; line-height: 1.45; }
.quota-policy-form { margin-top: 8px; }

.topup-controls {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.6fr);
  gap: 12px;
}
.topup-summary-card,
.topup-form-card { min-width: 0; }
.topup-form {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(120px, .7fr) minmax(220px, 1.5fr) auto;
  align-items: end;
  gap: 8px;
}
.topup-form > * { width: 100%; min-width: 0; }
.topup-form .button { width: auto; white-space: nowrap; }

@media (max-width: 980px) {
  .drawer { padding: 8px; }
  .drawer-panel,
  .drawer-panel-wide {
    width: calc(100vw - 16px);
    height: calc(100dvh - 16px);
    max-height: calc(100dvh - 16px);
    margin: 0;
  }
  .detail-tabs { padding: 8px 12px; overflow-x: auto; }
  .detail-tab { min-width: 112px; }
  .settings-top-grid,
  .topup-controls { grid-template-columns: 1fr; }
  .topup-form { grid-template-columns: 1fr 1fr; }
  .topup-form #quotaAdjustmentDescription { grid-column: 1 / -1; }
  .detail-pane.active { overflow-y: auto; }
  .modal-list-grow { min-height: 260px; }
}

/* v0.1.11 - panel authentication and self-service account */
.auth-gate[hidden] { display: none !important; }
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 10%, rgba(65,214,195,.08), transparent 32%), #07111f;
}
.auth-card {
  width: min(460px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  background: linear-gradient(180deg, #111d30, #0b1525);
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.auth-card h1 { margin: 4px 0 8px; font-size: 34px; }
.auth-form { display: grid; gap: 12px; margin-top: 18px; }
.compact-auth-form { margin-top: 0; }
.auth-submit { width: 100%; margin-top: 4px; }
.auth-error {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(255,111,125,.35);
  border-radius: 8px;
  color: #ffc1c7;
  background: rgba(255,111,125,.07);
}
.compact-notice { margin: 0 0 4px; }
#view-account .two-col { align-items: stretch; }
#view-account .mini-cards { margin: 0 0 12px; }
#sessionRows .truncate { max-width: 360px; }

/* v0.1.12 - subscriptions and self-service allocations */
.allocation-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:12px; margin-top:12px; }
.allocation-card { border:1px solid var(--line); border-radius:14px; padding:14px; background:var(--card-2); min-width:0; }
.allocation-card-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:10px; }
.allocation-card-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; align-items:end; }
.allocation-card-grid .field { min-width:0; }
.allocation-card-grid input { width:100%; min-width:0; }
.allocation-usage { display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 10px; color:var(--muted); font-size:.86rem; }
.subscription-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.subscription-admin-card { margin-bottom:12px; }
.notice.compact-note { margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.025); }
@media (max-width:1100px) { .allocation-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .subscription-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:700px) { .allocation-card-grid,.subscription-grid { grid-template-columns:1fr; } }

/* v0.1.15 - reliable hidden state, SMTP settings and Email OTP */
[hidden] { display: none !important; }
.section-divider { height: 1px; background: var(--line); margin: 18px 0; }
.compact-head { margin-bottom: 8px; }
.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
  margin-top: 16px;
}
.settings-form-grid .field,
.smtp-test-grid .field { min-width: 0; }
.check-field {
  display: flex;
  gap: 9px;
  align-items: center;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  color: var(--text);
  font-size: .9rem;
}
.check-field input { width: 17px; height: 17px; }
.smtp-test-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(260px, 1.4fr) auto;
  gap: 12px;
  align-items: end;
  margin: 12px 0;
}
.smtp-test-actions { align-self: end; margin-bottom: 1px; }
#smtpLogRows td:last-child { max-width: 440px; white-space: normal; overflow-wrap: anywhere; }
#smtpTestResult.ok-result { border-color: rgba(91,230,161,.35); color: #aaf5ca; }
#smtpTestResult.error-result { border-color: rgba(255,111,125,.35); color: #ffc1c7; }
@media (max-width: 1180px) {
  .settings-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .smtp-test-grid { grid-template-columns: 1fr 1fr; }
  .smtp-test-actions { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .settings-form-grid, .smtp-test-grid { grid-template-columns: 1fr; }
  .smtp-test-actions { grid-column: auto; }
}

/* v0.1.22 - public panel / trusted proxy / account recovery */
.field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #0a1423;
  color: var(--text);
  padding: 8px;
  outline: none;
  resize: vertical;
  min-height: 72px;
}
.field textarea:focus { border-color: rgba(65,214,195,.7); box-shadow: 0 0 0 2px rgba(65,214,195,.08); }
.settings-form-grid .span-2 { grid-column: span 2; }
@media (max-width: 720px) { .settings-form-grid .span-2 { grid-column: auto; } }