:root {
  color-scheme: light;
  --lumen-canvas: #f6f8fc;
  --lumen-surface: #ffffff;
  --lumen-surface-soft: #f9faff;
  --lumen-text: #111827;
  --lumen-text-soft: #667085;
  --lumen-text-faint: #98a2b3;
  --lumen-border: #e6eaf2;
  --lumen-border-strong: #d5dbe8;
  --lumen-primary: #6157e8;
  --lumen-primary-hover: #5046d5;
  --lumen-primary-soft: #f0efff;
  --lumen-teal: #159a80;
  --lumen-teal-soft: #eaf8f4;
  --lumen-amber: #d88b18;
  --lumen-amber-soft: #fff6e6;
  --lumen-rose: #d84b68;
  --lumen-rose-soft: #fff0f3;
  --lumen-blue: #3278d5;
  --lumen-blue-soft: #edf5ff;
  --lumen-shadow-1: 0 1px 2px rgba(16, 24, 40, .03), 0 12px 32px rgba(58, 65, 105, .055);
  --lumen-shadow-2: 0 24px 70px rgba(36, 42, 76, .14);
  --lumen-radius-sm: 12px;
  --lumen-radius-md: 18px;
  --lumen-radius-lg: 26px;
  --lumen-ease: cubic-bezier(.2, .8, .2, 1);
  --lumen-speed: 210ms;
  --lumen-z-dropdown: 40;
  --lumen-z-modal: 100;
}

html { background: var(--lumen-canvas) !important; }

body {
  min-height: 100dvh !important;
  background:
    radial-gradient(circle at 8% -6%, rgba(97, 87, 232, .115), transparent 31rem),
    radial-gradient(circle at 95% 3%, rgba(61, 190, 181, .10), transparent 28rem),
    var(--lumen-canvas) !important;
  color: var(--lumen-text) !important;
  font-family: Inter, "SF Pro Display", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei UI", system-ui, sans-serif !important;
  font-size: 16px;
  line-height: 1.6;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.42) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.42) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.28), transparent 54%);
}

::selection { background: #dcd8ff; color: #241d7a; }

.wrap,
.box {
  width: min(1320px, calc(100% - 48px)) !important;
  max-width: 1320px !important;
  padding: 32px 0 64px !important;
}

.user-app .box > .card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.nav {
  position: relative;
  overflow: visible;
  align-items: center !important;
  min-height: 144px;
  margin-bottom: 24px !important;
  padding: 28px 30px !important;
  border: 1px solid rgba(230, 234, 242, .92);
  border-radius: var(--lumen-radius-lg);
  background:
    radial-gradient(circle at 88% 10%, rgba(97, 87, 232, .10), transparent 19rem),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(249,250,255,.96));
  box-shadow: var(--lumen-shadow-1);
}

.nav::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 4px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #7b70f3, #52c5b1);
}

.nav h1 {
  max-width: 760px;
  font-size: clamp(34px, 4.1vw, 54px) !important;
  letter-spacing: -.055em !important;
}

.nav .tip,
.nav .muted { margin: 7px 0 0; }

.navlinks { position: relative; z-index: 3; }

h1, h2, h3, h4 { color: var(--lumen-text) !important; }
h2 { letter-spacing: -.04em !important; }

.btn,
button,
input[type="submit"] {
  min-height: 44px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em;
  touch-action: manipulation;
  transition: color var(--lumen-speed) var(--lumen-ease), background-color var(--lumen-speed) var(--lumen-ease), border-color var(--lumen-speed) var(--lumen-ease), box-shadow var(--lumen-speed) var(--lumen-ease), transform var(--lumen-speed) var(--lumen-ease) !important;
}

.btn:active,
button:active { transform: scale(.975) !important; }

.primary,
.save {
  border-color: var(--lumen-primary) !important;
  background: var(--lumen-primary) !important;
  color: #fff !important;
  box-shadow: 0 9px 24px rgba(97, 87, 232, .20) !important;
}

.primary:hover,
.save:hover {
  border-color: var(--lumen-primary-hover) !important;
  background: var(--lumen-primary-hover) !important;
  box-shadow: 0 12px 28px rgba(97, 87, 232, .26) !important;
}

.soft,
.edit,
.check {
  border-color: var(--lumen-border) !important;
  background: #f4f6fa !important;
  color: #344054 !important;
}

.soft:hover,
.edit:hover,
.check:hover {
  border-color: var(--lumen-border-strong) !important;
  background: #eceff5 !important;
  color: var(--lumen-text) !important;
}

.danger {
  border-color: #ffd8df !important;
  background: var(--lumen-rose-soft) !important;
  color: #b42345 !important;
}

.danger:hover { background: #ffe4e9 !important; }

input,
select,
textarea {
  min-height: 48px !important;
  border-color: var(--lumen-border-strong) !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--lumen-text) !important;
}

input:hover,
select:hover,
textarea:hover { border-color: #aab4c7 !important; }

input:focus,
select:focus,
textarea:focus {
  border-color: var(--lumen-primary) !important;
  box-shadow: 0 0 0 4px rgba(97, 87, 232, .12) !important;
}

label { color: #344054 !important; }

/* Realtime system ribbon */
.system-ribbon {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 24px;
  padding: 10px;
  border: 1px solid var(--lumen-border);
  border-radius: 18px;
  background: rgba(255,255,255,.76);
  box-shadow: 0 8px 24px rgba(58, 65, 105, .04);
}

.system-status {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 58px;
  padding: 10px 14px;
  border-radius: 13px;
  color: var(--lumen-text-soft);
}

.system-status + .system-status { border-left: 1px solid var(--lumen-border); border-radius: 0 13px 13px 0; }
.system-status b { display: block; color: var(--lumen-text); font-size: 14px; }
.system-status small { display: block; margin-top: 1px; font-size: 12px; }
.status-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--lumen-teal); box-shadow: 0 0 0 5px rgba(21,154,128,.10); }
.status-dot.is-idle { background: #98a2b3; box-shadow: 0 0 0 5px rgba(152,162,179,.12); }
.status-dot.is-warn { background: var(--lumen-amber); box-shadow: 0 0 0 5px rgba(216,139,24,.12); }

/* KPI surface */
.stats-head {
  margin-top: 0 !important;
  padding: 8px 2px 0 !important;
  border: 0 !important;
}

.stats-head h2 { font-size: 27px !important; }
.stats-head small { border: 1px solid var(--lumen-border); background: rgba(255,255,255,.72) !important; }

.stats-grid {
  gap: 16px !important;
  margin-top: 15px !important;
}

.stat-card {
  min-height: 152px !important;
  padding: 22px !important;
  border: 1px solid var(--lumen-border) !important;
  border-top: 1px solid var(--lumen-border) !important;
  border-radius: var(--lumen-radius-md) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--lumen-shadow-1) !important;
  isolation: isolate;
}

.stat-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  right: -65px;
  top: -75px;
  border-radius: 50%;
  background: rgba(97,87,232,.075);
}

.stat-card:nth-child(2)::before,
.stat-card:nth-child(4)::before { background: rgba(21,154,128,.075); }
.stat-card:nth-child(3)::before,
.stat-card:nth-child(5)::before { background: rgba(216,139,24,.085); }

.stat-card:hover { border-color: #d8d4ff !important; box-shadow: 0 18px 42px rgba(58,65,105,.09) !important; }
.stat-label { color: var(--lumen-text-soft) !important; letter-spacing: .01em; }
.stat-value { margin-top: 17px !important; font-size: clamp(30px, 3vw, 40px) !important; font-variant-numeric: tabular-nums; }
.stat-unit { color: var(--lumen-text-faint) !important; }
.recharge-btn { border-color: var(--lumen-primary) !important; background: var(--lumen-primary) !important; box-shadow: 0 8px 20px rgba(97,87,232,.18) !important; }
.recharge-btn:hover { background: var(--lumen-primary-hover) !important; }

.workspace-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 34px;
  padding: 0 2px;
}
.workspace-head h2 { margin: 0 !important; padding: 0 !important; border: 0 !important; font-size: 27px !important; }
.workspace-head p { max-width: 520px; margin: 0; color: var(--lumen-text-soft); text-align: right; }

/* Permission-aware work modules */
.feature-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 15px !important;
}

.feature-card {
  --feature-accent: var(--lumen-primary);
  --feature-soft: var(--lumen-primary-soft);
  min-height: 178px !important;
  padding: 23px !important;
  border: 1px solid var(--lumen-border) !important;
  border-top: 1px solid var(--lumen-border) !important;
  border-radius: var(--lumen-radius-md) !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: var(--lumen-shadow-1) !important;
  isolation: isolate;
  transition: transform var(--lumen-speed) var(--lumen-ease), border-color var(--lumen-speed) var(--lumen-ease), box-shadow var(--lumen-speed) var(--lumen-ease) !important;
}

.feature-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 18px 0 0 18px;
  background: var(--feature-accent);
}

.feature-card::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  right: -105px;
  bottom: -120px;
  border-radius: 50%;
  background: var(--feature-soft);
  opacity: .85;
}

.feature-card:hover {
  transform: translateY(-3px) !important;
  border-color: color-mix(in srgb, var(--feature-accent) 32%, var(--lumen-border)) !important;
  background: #fff !important;
  box-shadow: 0 20px 44px rgba(58,65,105,.11) !important;
}

.feature-card:active { transform: translateY(-1px) scale(.99) !important; }
.feature-card.purple { --feature-accent: #6a5ce7; --feature-soft: #efedff; }
.feature-card.cyan { --feature-accent: #238fa6; --feature-soft: #e9f8fa; }
.feature-card.orange { --feature-accent: #d88b18; --feature-soft: #fff3df; }
.feature-card.pink { --feature-accent: #bd3568; --feature-soft: #fff0f5; }
.feature-card.complaint { --feature-accent: #347f71; --feature-soft: #ebf8f5; }
.feature-card.subject-hub { --feature-accent: #2563eb; --feature-soft: #eff6ff; }
.feature-card.current-numbers-hub { --feature-accent: #7c3aed; --feature-soft: #f3e8ff; }
.feature-card.balance-sms-hub { --feature-accent: #0f8a74; --feature-soft: #eaf9f5; }
.feature-card strong { max-width: 90%; font-size: 21px !important; letter-spacing: -.025em; }
.feature-card small { color: var(--lumen-text-soft) !important; }
.feature-icon {
  width: auto !important;
  min-width: 44px;
  height: 31px !important;
  padding: 0 12px;
  background: var(--feature-soft) !important;
  color: var(--feature-accent) !important;
  font-variant-numeric: tabular-nums;
}

/* Secondary user pages */
.user-app:not(.view-home) .box > .card > .page-desc,
.user-app:not(.view-home) .box > .card > form:not(.recharge-form) {
  margin-left: 0;
  margin-right: 0;
}

.user-app.view-add .box > .card > form,
.user-app.view-manual .box > .card > form {
  padding: 26px;
  border: 1px solid var(--lumen-border);
  border-radius: var(--lumen-radius-md);
  background: rgba(255,255,255,.94);
  box-shadow: var(--lumen-shadow-1);
}

.page-desc {
  max-width: 720px;
  margin: 0 0 20px !important;
  font-size: 16px !important;
}

.preset {
  padding: 17px 18px !important;
  border-color: var(--lumen-border) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow: var(--lumen-shadow-1) !important;
}
.preset:hover { border-color: #cbc6ff !important; }
.preset small { font-variant-numeric: tabular-nums; }

.empty {
  border-color: var(--lumen-border-strong) !important;
  background: rgba(255,255,255,.68) !important;
}

.number-detail summary { background: #f4f6fa !important; color: #344054 !important; }
.number-detail[open] summary { border-color: #cbc6ff !important; background: var(--lumen-primary-soft) !important; color: var(--lumen-primary) !important; }
.number-pop { border-color: var(--lumen-border) !important; box-shadow: var(--lumen-shadow-2) !important; }
.number-row { background: var(--lumen-surface-soft) !important; }
.number-row b { background: var(--lumen-primary-soft) !important; color: var(--lumen-primary) !important; }

/* User account menu */
.avatar {
  width: 48px !important;
  height: 48px !important;
  border: 3px solid #ebe8ff !important;
  background: linear-gradient(145deg, #655ae7, #8978ef) !important;
  box-shadow: 0 10px 26px rgba(97,87,232,.18) !important;
}
.menu-pop { border-color: var(--lumen-border) !important; box-shadow: var(--lumen-shadow-2) !important; }
.menu-link:hover { background: var(--lumen-surface-soft) !important; }

/* Generic non-index pages */
.wrap > .nav { margin-bottom: 18px !important; }
.panel {
  border-color: var(--lumen-border) !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: var(--lumen-shadow-1) !important;
}
.section { border-top-color: var(--lumen-border) !important; }

/* Admin overview */
.admin-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.admin-summary-item {
  padding: 18px 20px;
  border: 1px solid var(--lumen-border);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: var(--lumen-shadow-1);
}
.admin-summary-item span { color: var(--lumen-text-soft); font-size: 13px; font-weight: 700; }
.admin-summary-item strong { display: block; margin-top: 7px; color: var(--lumen-text); font-size: 28px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.admin-page .panel { padding: 30px !important; }
.admin-page .panel > h2 { margin-top: 0 !important; }
.wide-table { border-color: var(--lumen-border) !important; border-radius: 15px !important; box-shadow: 0 8px 24px rgba(58,65,105,.035); }
th { background: #f7f8fb !important; color: #667085 !important; }
td { color: #344054 !important; font-variant-numeric: tabular-nums; }
tbody tr:hover td { background: #fafbff !important; }
.status-pill { border: 1px solid transparent; }
.status-enabled { border-color: #b9eadb; background: var(--lumen-teal-soft) !important; color: #08705c !important; }
.status-disabled { border-color: #ffd8df; background: var(--lumen-rose-soft) !important; color: #b42345 !important; }
.role-admin { border-color: #d7d2ff; background: var(--lumen-primary-soft) !important; color: #5146cf !important; }
.role-user { border-color: var(--lumen-border); background: #f7f8fb !important; color: #475467 !important; }
.permission-button,
.channel-button,
.stats-button,
.complaint-button { border: 1px solid var(--lumen-border) !important; background: #f7f8fb !important; color: #344054 !important; }
.permission-button.configured,
.channel-button.configured,
.stats-button.configured,
.complaint-button.configured { border-color: #d4cffc !important; background: var(--lumen-primary-soft) !important; color: #5146cf !important; }

/* Right-side configuration drawers */
.channel-dialog {
  width: min(620px, 100%) !important;
  height: 100dvh;
  max-height: 100dvh !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--lumen-border) !important;
  border-radius: 24px 0 0 24px !important;
  box-shadow: -24px 0 70px rgba(36,42,76,.18) !important;
}
.channel-dialog[open] { animation: lumen-drawer-in 240ms var(--lumen-ease) both; }
.channel-dialog::backdrop { background: rgba(17,24,39,.38) !important; }
.channel-form { min-height: 100%; padding: 30px !important; }
.dialog-head { position: sticky; z-index: 2; top: -30px; margin: -30px -30px 18px !important; padding: 24px 30px 17px !important; border-bottom: 1px solid var(--lumen-border); background: rgba(255,255,255,.96); }
.dialog-note { border: 1px solid var(--lumen-border) !important; background: var(--lumen-surface-soft) !important; }
.permission-option { border-color: var(--lumen-border) !important; background: var(--lumen-surface-soft) !important; }
.permission-option:has(input:checked) { border-color: #cbc6ff !important; background: var(--lumen-primary-soft) !important; color: #4037ae !important; }
.admin-toggle { border: 1px solid var(--lumen-border); background: var(--lumen-surface-soft) !important; }

@keyframes lumen-drawer-in {
  from { opacity: 0; transform: translateX(36px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Recharge modal */
.recharge-dialog { border: 1px solid var(--lumen-border) !important; border-radius: 24px !important; box-shadow: var(--lumen-shadow-2) !important; }
.recharge-balance { border-color: #d8d4ff !important; background: var(--lumen-primary-soft) !important; color: #5146cf !important; }
.payment-option { border-color: var(--lumen-border) !important; }
.payment-option:has(input:checked) { border-color: #bdb6ff !important; background: var(--lumen-primary-soft) !important; color: #5146cf !important; }

/* Complaint automation */
.automation-wrap { max-width: 920px !important; }
.automation-hero {
  min-height: 136px;
  padding: 27px 29px;
  border: 1px solid var(--lumen-border);
  border-radius: var(--lumen-radius-lg);
  background: linear-gradient(135deg, #fff, #f8f9ff);
  box-shadow: var(--lumen-shadow-1);
}
.automation-card { border-color: var(--lumen-border) !important; box-shadow: var(--lumen-shadow-1) !important; }
.state-row { border: 1px solid var(--lumen-border); background: var(--lumen-surface-soft) !important; }
.state-on { background: var(--lumen-teal-soft) !important; color: #08705c !important; }
.state-off { background: #f0f2f6 !important; color: #667085 !important; }
.safety { border-color: #b9eadb !important; background: var(--lumen-teal-soft) !important; color: #116956 !important; }
.status-item { border: 1px solid var(--lumen-border); background: var(--lumen-surface-soft) !important; }

/* Login and account */
.auth-shell {
  min-height: 620px !important;
  border: 1px solid var(--lumen-border) !important;
  background: #fff !important;
  box-shadow: var(--lumen-shadow-2) !important;
}
.auth-brand {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 88%, rgba(75,194,173,.22), transparent 15rem),
    radial-gradient(circle at 86% 8%, rgba(97,87,232,.22), transparent 18rem),
    #f4f3ff !important;
  color: var(--lumen-text) !important;
}
.auth-brand::after { content: ""; position: absolute; width: 240px; height: 240px; right: -110px; bottom: -110px; border: 1px solid rgba(97,87,232,.20); border-radius: 50%; }
.auth-brand h1 { color: var(--lumen-text) !important; }
.auth-brand p { color: var(--lumen-text-soft) !important; }
.auth-orb { border-color: rgba(97,87,232,.20) !important; background: #fff !important; color: var(--lumen-primary) !important; box-shadow: 0 12px 30px rgba(97,87,232,.12) !important; }
.auth-points span { border-color: #d7d2ff !important; background: rgba(255,255,255,.72); color: #5146cf !important; }
.auth-form { background: rgba(255,255,255,.98) !important; }

@media (max-width: 1000px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-page .wide-table table { min-width: 1180px; }
}

@media (max-width: 760px) {
  .wrap,
  .box { width: min(100% - 24px, 1320px) !important; padding: 18px 0 40px !important; }
  .nav { min-height: 0; align-items: flex-start !important; padding: 23px 22px !important; border-radius: 21px; }
  .nav::before { top: 22px; bottom: 22px; }
  .nav h1 { font-size: 34px !important; }
  .user-app.view-home .nav { padding-right: 86px !important; }
  .user-app.view-home .navlinks { position: absolute; top: 20px; right: 20px; width: auto; }
  .user-app.view-home .menu-pop { left: auto !important; right: 0 !important; }
  .system-ribbon { grid-template-columns: 1fr; }
  .system-status + .system-status { border-left: 0; border-top: 1px solid var(--lumen-border); border-radius: 0; }
  .workspace-head { align-items: flex-start; flex-direction: column; }
  .workspace-head p { text-align: left; }
  .stats-grid,
  .feature-grid,
  .admin-summary { grid-template-columns: 1fr !important; }
  .stat-card,
  .stat-card:nth-child(4),
  .stat-card:nth-child(5) { grid-column: auto !important; }
  .feature-card { min-height: 154px !important; }
  .user-app.view-add .box > .card > form,
  .user-app.view-manual .box > .card > form { padding: 21px; }
  .channel-dialog {
    width: 100% !important;
    height: min(92dvh, 820px);
    max-height: 92dvh !important;
    margin: auto 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--lumen-border) !important;
    border-radius: 24px 24px 0 0 !important;
  }
  .channel-dialog[open] { animation-name: lumen-sheet-in; }
  .channel-form { padding: 24px 20px !important; }
  .dialog-head { top: -24px; margin: -24px -20px 17px !important; padding: 20px !important; }
}

@keyframes lumen-sheet-in {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 420px) {
  .nav h1 { font-size: 30px !important; }
  .navlinks { width: 100%; }
  .navlinks > .btn { width: auto !important; flex: 1 1 auto; }
  .stat-main { align-items: flex-start !important; }
  .preset-actions { display: grid !important; grid-template-columns: 1fr 1fr; }
  .preset-actions form,
  .preset-actions .btn,
  .preset-actions button { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}