:root {
  --bg: #070b14;
  --panel: #0e1524;
  --panel2: #111a2c;
  --line: rgba(255,255,255,.09);
  --text: #f7f9ff;
  --muted: #94a1b8;
  --primary: #7c5cff;
  --primary2: #20d4ff;
  --success: #39d98a;
  --warning: #ffc857;
  --danger: #ff6577;
  --radius: 20px;
  --shadow: 0 20px 70px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(124,92,255,.14), transparent 30rem),
    radial-gradient(circle at 90% 20%, rgba(32,212,255,.08), transparent 28rem),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  border-bottom: 1px solid var(--line);
  background: rgba(7,11,20,.78);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.03em; }
.brand > span:last-child > span { color: var(--primary2); }
.brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg,var(--primary),var(--primary2));
  color: white; font-weight: 900;
  box-shadow: 0 10px 30px rgba(124,92,255,.3);
}
.nav { display: flex; align-items: center; gap: 24px; }
.nav > a { color: var(--muted); font-size: 14px; font-weight: 600; }
.nav > a:hover { color: white; }

.btn {
  border: 0; border-radius: 12px; padding: 11px 16px; font-weight: 700;
  transition: .2s ease; color: white;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg,var(--primary),#5c85ff); box-shadow: 0 12px 30px rgba(124,92,255,.25); }
.btn-secondary { background: rgba(255,255,255,.07); border: 1px solid var(--line); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-lg { padding: 14px 20px; }
.btn-small { padding: 8px 11px; font-size: 12px; }
.full { width: 100%; }

.page, .section { max-width: 1180px; margin: 0 auto; }
.hero {
  min-height: 690px; padding: 100px 5vw 80px;
  display: grid; grid-template-columns: 1.06fr .94fr; gap: 70px; align-items: center;
}
.hero h1 { margin: 18px 0; max-width: 760px; font-size: clamp(45px,6vw,76px); line-height: .99; letter-spacing: -.065em; }
.hero h1 span, .section-heading h2 span { color: var(--primary2); }
.hero p { color: var(--muted); font-size: 18px; line-height: 1.75; max-width: 650px; }
.eyebrow { color: #8d9bff; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; color: #aeb9cd; font-size: 12px; }

.hero-card { display: flex; justify-content: center; }
.mini-window {
  width: min(470px,100%); padding: 18px; border-radius: 26px;
  background: linear-gradient(160deg,#121b2e,#0a101d);
  border: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow);
  transform: rotate(1.5deg);
}
.mini-top { display: flex; gap: 6px; align-items: center; color: #8490a8; font-size: 11px; padding-bottom: 15px; }
.mini-top span { width: 7px; height: 7px; border-radius: 50%; background: #66738d; }
.mini-top b { margin-left: auto; margin-right: auto; font-weight: 600; }
.mini-balance { padding: 28px; border-radius: 18px; background: linear-gradient(135deg,rgba(124,92,255,.2),rgba(32,212,255,.06)); border: 1px solid var(--line); }
.mini-balance small, .mini-grid small { display: block; color: var(--muted); }
.mini-balance strong { display: block; font-size: 34px; margin: 8px 0; }
.mini-balance em { font-size: 12px; color: var(--success); font-style: normal; }
.mini-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 12px 0; }
.mini-grid > div { padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.025); }
.mini-grid strong { display: block; margin-top: 7px; }
.mini-order { padding: 7px 10px; }
.mini-order > div { display: flex; align-items: center; gap: 9px; padding: 13px 5px; border-bottom: 1px solid var(--line); font-size: 12px; }
.mini-order b { margin-left: auto; font-size: 10px; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; }
.dot.green { background: var(--success); }
.dot.blue { background: var(--primary2); }
.dot.yellow { background: var(--warning); }

.section { padding: 90px 5vw; }
.section-heading { max-width: 760px; margin-bottom: 34px; }
.section-heading h2 { margin: 10px 0 12px; font-size: clamp(30px,4vw,48px); letter-spacing: -.045em; }
.section-heading p { color: var(--muted); line-height: 1.7; }
.section-heading.compact { max-width: none; display: flex; align-items: end; justify-content: space-between; gap: 20px; }

.feature-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.feature-card, .panel, .stat-card {
  background: linear-gradient(145deg,rgba(18,27,46,.92),rgba(10,15,26,.92));
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.feature-card { padding: 24px; }
.feature-card .icon { font-size: 25px; margin-bottom: 22px; }
.feature-card h3 { margin: 0 0 9px; }
.feature-card p { color: var(--muted); line-height: 1.6; font-size: 13px; }

.services-preview { text-align: center; }
.services-preview .section-heading { margin-left: auto; margin-right: auto; }
.service-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.service-pills span { padding: 13px 17px; border: 1px solid var(--line); background: rgba(255,255,255,.03); border-radius: 999px; color: #c7d0e1; font-size: 13px; }

.app-section { padding-top: 60px; }
.stats-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.stat-card { padding: 22px; }
.stat-card span, .stat-card small { color: var(--muted); display: block; font-size: 12px; }
.stat-card strong { display: block; margin: 10px 0 5px; font-size: 30px; letter-spacing: -.04em; }

.dashboard-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; margin-top: 14px; }
.panel { padding: 22px; }
.panel-head { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.panel-head h3 { margin: 0 0 5px; }
.panel-head p { margin: 0; color: var(--muted); font-size: 12px; }
.text-link { color: #a99cff; font-size: 12px; font-weight: 700; }
.quick-order { width: 100%; display: flex; align-items: center; gap: 14px; border: 1px dashed rgba(124,92,255,.4); background: rgba(124,92,255,.06); color: white; padding: 17px; border-radius: 15px; text-align: left; }
.quick-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(124,92,255,.2); font-size: 25px; }
.quick-order small { display: block; color: var(--muted); margin-top: 4px; }
.provider-balance { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }
.provider-balance strong { font-size: 32px; }

.order-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 14px; }
.form-panel label { display: block; color: #c9d2e2; font-size: 12px; font-weight: 700; margin-bottom: 15px; }
input, select, .search {
  width: 100%; margin-top: 8px; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: #0a111f; color: white; outline: none;
}
input:focus, select:focus { border-color: rgba(124,92,255,.7); box-shadow: 0 0 0 3px rgba(124,92,255,.1); }
.service-info { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin: 20px 0; }
.service-info div { padding: 13px; border-radius: 12px; background: rgba(255,255,255,.035); border: 1px solid var(--line); }
.service-info span { display: block; color: var(--muted); font-size: 10px; }
.service-info b { display: block; margin-top: 5px; font-size: 12px; }
.order-total { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); margin-bottom: 15px; }
.order-total span { color: var(--muted); font-size: 12px; }
.order-total strong { font-size: 24px; }
.form-note { color: #718099; font-size: 10px; line-height: 1.6; }

.catalog-panel { min-height: 520px; }
.service-list { margin-top: 14px; max-height: 590px; overflow: auto; padding-right: 3px; }
.service-item { width: 100%; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: white; padding: 13px; border-radius: 13px; margin-bottom: 8px; text-align: left; }
.service-item:hover, .service-item.selected { border-color: rgba(124,92,255,.55); background: rgba(124,92,255,.08); }
.service-item strong { display: block; font-size: 12px; line-height: 1.4; }
.service-item small { display: block; color: var(--muted); margin-top: 6px; font-size: 10px; }

.table-panel { padding: 0; overflow: hidden; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 850px; }
th, td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 12px; }
th { color: #8794aa; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
td { color: #cdd6e5; }
.target { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 10px; }
.status.completed { color: var(--success); background: rgba(57,217,138,.08); }
.status.processing, .status.in-progress { color: var(--primary2); }
.status.pending { color: var(--warning); }
.empty { color: var(--muted); text-align: center; padding: 45px; }

.cta { margin-top: 50px; margin-bottom: 80px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 50px !important; border: 1px solid var(--line); border-radius: 26px; background: linear-gradient(120deg,rgba(124,92,255,.14),rgba(32,212,255,.05)); }
.cta h2 { font-size: 34px; margin: 10px 0; }
.cta p { color: var(--muted); max-width: 680px; line-height: 1.6; }

.footer { border-top: 1px solid var(--line); padding: 30px 5vw; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 11px; }

.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(10px); }
.modal-card { position: relative; width: min(430px,100%); padding: 28px; border: 1px solid var(--line); border-radius: 22px; background: #0c1423; box-shadow: var(--shadow); }
.modal-close { position: absolute; right: 15px; top: 12px; border: 0; background: none; color: var(--muted); font-size: 26px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; background: rgba(255,255,255,.04); padding: 4px; border-radius: 12px; margin-bottom: 25px; }
.auth-tabs button { border: 0; padding: 10px; border-radius: 9px; background: transparent; color: var(--muted); font-weight: 700; font-size: 12px; }
.auth-tabs button.active { background: rgba(255,255,255,.08); color: white; }
.auth-form h2 { margin: 0 0 7px; }
.auth-form > p { color: var(--muted); font-size: 12px; margin: 0 0 22px; }
.auth-link { border: 0; background: transparent; color: var(--primary2); padding: 10px 0 0; font-size: 12px; font-weight: 700; text-align: center; width: 100%; }
.auth-link:hover { text-decoration: underline; }
.form-message { min-height: 18px; margin: 14px 0 0 !important; line-height: 1.5; }
.auth-form label { display: block; margin-bottom: 14px; color: #cbd4e4; font-size: 12px; font-weight: 700; }

.toast { position: fixed; right: 22px; bottom: 22px; z-index: 200; max-width: 360px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: #121c2e; box-shadow: var(--shadow); font-size: 12px; transform: translateY(20px); opacity: 0; pointer-events: none; transition: .25s; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { border-color: rgba(255,101,119,.4); }
.toast.success { border-color: rgba(57,217,138,.4); }

@media (max-width: 900px) {
  .topbar { padding: 0 18px; }
  .nav > a { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 70px; }
  .hero-card { order: -1; }
  .feature-grid, .stats-grid { grid-template-columns: repeat(2,1fr); }
  .dashboard-grid, .order-layout { grid-template-columns: 1fr; }
  .cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .hero, .section { padding-left: 18px; padding-right: 18px; }
  .hero h1 { font-size: 44px; }
  .feature-grid, .stats-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .cta { padding: 28px !important; }
  .footer { flex-direction: column; gap: 15px; align-items: flex-start; }
}

.muted { color: var(--muted); font-size: 12px; }
.admin-warning { display:flex; align-items:center; gap:12px; margin-bottom:14px; border-color:rgba(255,200,87,.25); background:rgba(255,200,87,.05); }
.admin-warning span { color:var(--muted); font-size:12px; }
.admin-toolbar { padding:18px; border-bottom:1px solid var(--line); }
.admin-toolbar .search { max-width:420px; margin:0; }
.admin-table-panel { padding:0; }
.balance-action { white-space:nowrap; }

.admin-adjust-btn { position: relative; z-index: 2; cursor: pointer; pointer-events: auto; }


/* Account settings */
.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.account-grid .panel {
  min-height: 100%;
}
@media (max-width: 800px) {
  .account-grid {
    grid-template-columns: 1fr;
  }
}


/* Service catalog grouping */
.service-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0}
.service-platform-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px}
.service-platform-tab{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:inherit;border-radius:999px;padding:8px 13px;cursor:pointer;font:inherit}
.service-platform-tab.active{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.09)}
.service-group{margin:14px 0}
.service-group-title{font-size:.86rem;font-weight:700;letter-spacing:.02em;margin:0 0 8px;opacity:.85}
@media (max-width:760px){.service-filters{grid-template-columns:1fr}}

.ticket-layout{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:18px}
.ticket-conversation{margin-top:18px;border-top:1px solid rgba(255,255,255,.08);padding-top:18px}
.ticket-message{padding:12px 14px;margin:10px 0;border-radius:12px;background:rgba(255,255,255,.04)}
.ticket-message.admin{border-left:3px solid rgba(255,255,255,.35)}
.ticket-message small{display:block;opacity:.65;margin-bottom:5px}
.order-actions{display:flex;gap:6px;flex-wrap:wrap}
.btn-danger{border-color:rgba(255,90,90,.35)!important}
@media(max-width:900px){.ticket-layout{grid-template-columns:1fr}}

/* Authenticated panel: clean light layout inspired by modern SMM panels. */
body.app-mode {
  --bg: #f5f8ff;
  --panel: #ffffff;
  --panel2: #ffffff;
  --line: #e4eaf5;
  --text: #172033;
  --muted: #718096;
  --primary: #2563eb;
  --primary2: #1d4ed8;
  --success: #22c55e;
  --warning: #f0a000;
  background: #f5f8ff;
  color: #172033;
}
body.app-mode .topbar {
  height: 68px;
  padding: 0 22px;
  background: rgba(255,255,255,.94);
  border-bottom-color: #e4eaf5;
  color: #172033;
  box-shadow: 0 2px 14px rgba(37,99,235,.06);
}
body.app-mode .topbar > .brand { display: none; }
body.app-mode .logged-user-nav { width: 100%; }
.logged-user-nav { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.user-page-title { font-weight: 700; font-size: 14px; margin-right:auto; }
.user-nav-actions { display:flex; align-items:center; gap:10px; }
.menu-toggle { width:38px; height:38px; border:1px solid #e2e8f2; border-radius:10px; background:#fff; display:grid; place-content:center; gap:4px; padding:0; }
.menu-toggle span { width:15px; height:2px; background:#526176; border-radius:2px; display:block; }
.balance-pill, .user-pill { display:flex; align-items:center; gap:7px; min-height:38px; border:1px solid #e2e8f2; background:#fff; color:#334155; border-radius:10px; padding:0 11px; font-size:11px; font-weight:700; }
.balance-pill:hover, .user-pill:hover { background:#f5f8ff; }
.balance-pill-icon { font-size:10px; }
.chevron { color:#7c8799; font-size:13px; }
.user-avatar { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; background:#e8f0ff; color:#2563eb; font-size:8px; }
.user-avatar.large { width:38px; height:38px; border-radius:12px; font-size:12px; }

.menu-backdrop { position:fixed; inset:0; z-index:80; background:rgba(20,26,21,.28); backdrop-filter:blur(2px); }
.side-menu { position:fixed; top:0; bottom:0; left:0; z-index:90; width:285px; background:#fff; border-right:1px solid #e2e8f2; box-shadow:16px 0 45px rgba(37,99,235,.12); transform:translateX(-105%); transition:transform .24s ease; display:flex; flex-direction:column; }
.side-menu.open { transform:translateX(0); }
.side-menu-head { height:68px; padding:0 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e8edf5; }
.side-menu-head .brand { color:#172033; }
.side-menu-head .brand > span:last-child > span { color:#2563eb; }
.side-close { border:0; background:transparent; color:#7c8799; font-size:27px; line-height:1; }
.side-menu-user { display:flex; align-items:center; gap:11px; padding:20px 18px; border-bottom:1px solid #e8edf5; }
.side-menu-user strong { display:block; font-size:13px; }
.side-menu-user small { display:block; color:#929a92; font-size:10px; margin-top:4px; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-nav { padding:12px; display:flex; flex-direction:column; gap:4px; }
.side-nav a, .side-logout { display:flex; align-items:center; gap:12px; width:100%; padding:12px 13px; border-radius:10px; color:#64748b; font-size:13px; font-weight:600; background:transparent; border:0; text-align:left; }
.side-nav a span, .side-logout span { width:20px; text-align:center; }
.side-nav a:hover, .side-nav a.active { color:#253047; background:#eaf1ff; }
.side-nav a.active { color:#2563eb; }
.side-menu-foot { margin-top:auto; padding:12px; border-top:1px solid #e8edf5; }
.side-logout { color:#9a5a5a; cursor:pointer; }
.side-logout:hover { background:#fff3f3; }

body.app-mode .app-section { padding:28px 22px 55px; }
body.app-mode .dashboard-home { max-width:1120px; }
.mobile-page-heading { margin:3px 0 18px; }
.mobile-page-heading h2 { margin:5px 0 0; font-size:22px; letter-spacing:-.03em; }
.dashboard-stats { grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:18px; }
.dashboard-stat { min-height:96px; display:flex; align-items:center; gap:13px; padding:18px; background:#fff; border-color:#e2e8f2; box-shadow:0 5px 18px rgba(37,99,235,.06); }
.dashboard-stat span { color:#66758b; font-size:10px; }
.dashboard-stat strong { color:#172033; font-size:20px; margin:6px 0 0; }
.stat-icon { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-size:15px; font-weight:800; }
.balance-stat .stat-icon { background:#e8f0ff; color:#2563eb; }
.spent-stat .stat-icon { background:#e8f0ff; color:#2563eb; }
.active-stat .stat-icon { background:#fff0dc; color:#e88900; }
.home-order-layout { display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:14px; align-items:start; }
body.app-mode .panel, body.app-mode .stat-card { background:#fff; border-color:#e2e8f2; box-shadow:0 5px 18px rgba(37,99,235,.045); }
.peak-order-panel { padding:19px; }
body.app-mode .form-panel label { color:#5f6f85; font-size:10px; margin-bottom:13px; }
body.app-mode input, body.app-mode select, body.app-mode .search, body.app-mode textarea { background:#fff; color:#263247; border-color:#e2e8f2; border-radius:10px; padding:11px 12px; }
body.app-mode input:focus, body.app-mode select:focus, body.app-mode textarea:focus { border-color:#93b4f5; box-shadow:0 0 0 3px rgba(37,99,235,.10); }
body.app-mode .btn-primary { background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; box-shadow:0 7px 18px rgba(37,99,235,.18); }
.peak-charge { padding:12px 0; margin-bottom:10px; }
.peak-charge span { color:#748196; font-size:10px; }
.peak-charge strong { font-size:19px; color:#172033; }
.peak-submit { border-radius:9px; }
.field-hint { display:block; color:#94a0b3; font-size:9px; margin-top:5px; }
.home-services-panel { min-height:0; }
.home-services-panel .service-list { max-height:570px; }
body.app-mode .service-item { color:#334155; background:#fbfdff; border-color:#e2e8f2; }
body.app-mode .service-item:hover, body.app-mode .service-item.selected { background:#eaf1ff; border-color:#9dbcf5; }
body.app-mode .service-item small { color:#7c8799; }
body.app-mode .service-group-title { color:#718096; }
body.app-mode .service-platform-tab { color:#64748b; background:#fff; border-color:#e2e8f2; }
body.app-mode .service-platform-tab.active { background:#eaf1ff; color:#2563eb; border-color:#b7cdf7; }
.compatibility-service-info { display:none; }
.panel-news { margin-top:14px; padding:17px; }
.news-box { border:1px solid #e2e8f2; background:#fbfdff; border-radius:10px; padding:13px; color:#5f6b7d; font-size:11px; line-height:1.65; }
.news-box strong { color:#334155; }
.news-box p { margin:5px 0 0; }
body.app-mode .table-panel { background:#fff; }
body.app-mode th { color:#7b879b; }
body.app-mode td { color:#526176; border-bottom-color:#e8edf5; }
body.app-mode .muted { color:#7c8799; }
body.app-mode .section-heading h2 { color:#172033; }
body.app-mode .section-heading p { color:#718096; }

@media (max-width: 800px) {
  body.app-mode .topbar { padding:0 12px; }
  .user-page-title { font-size:13px; }
  .balance-pill { padding:0 8px; }
  .balance-pill-icon { display:none; }
  .user-pill { padding:0 8px; }
  .user-pill #navUserName { max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.app-mode .app-section { padding:18px 12px 45px; }
  .dashboard-stats { grid-template-columns:repeat(3,1fr); gap:8px; }
  .dashboard-stat { min-height:86px; padding:12px 9px; gap:7px; }
  .dashboard-stat .stat-icon { width:31px; height:31px; border-radius:9px; font-size:11px; flex:none; }
  .dashboard-stat span { font-size:8px; }
  .dashboard-stat strong { font-size:13px; letter-spacing:-.02em; }
  .home-order-layout { grid-template-columns:1fr; }
  .home-services-panel { order:2; }
}
@media (max-width: 480px) {
  .user-page-title { display:none; }
  .user-nav-actions { gap:5px; }
  .balance-pill { max-width:120px; }
  .dashboard-stats { gap:6px; }
  .dashboard-stat { padding:10px 7px; }
  .dashboard-stat strong { font-size:12px; }
}

/* ArezBoost authenticated theme: match the public landing page's dark navy / purple / cyan visual language. */
body.app-mode {
  --bg: #070b14;
  --panel: #0e1524;
  --panel2: #111a2c;
  --line: rgba(255,255,255,.09);
  --text: #f7f9ff;
  --muted: #94a1b8;
  --primary: #7c5cff;
  --primary2: #20d4ff;
  --success: #39d98a;
  --warning: #ffc857;
  --danger: #ff6577;
  background:
    radial-gradient(circle at 15% 0%, rgba(124,92,255,.14), transparent 30rem),
    radial-gradient(circle at 90% 20%, rgba(32,212,255,.08), transparent 28rem),
    var(--bg);
  color: var(--text);
}

body.app-mode .topbar {
  background: rgba(7,11,20,.82);
  border-bottom-color: var(--line);
  color: var(--text);
  box-shadow: 0 8px 30px rgba(0,0,0,.16);
  backdrop-filter: blur(18px);
}
body.app-mode .topbar > .brand { display: none; }

body.app-mode .user-page-title { color: #f7f9ff; }
body.app-mode .menu-toggle,
body.app-mode .balance-pill,
body.app-mode .user-pill {
  border-color: var(--line);
  background: rgba(255,255,255,.045);
  color: #dbe4f5;
  box-shadow: none;
}
body.app-mode .menu-toggle:hover,
body.app-mode .balance-pill:hover,
body.app-mode .user-pill:hover { background: rgba(255,255,255,.08); }
body.app-mode .menu-toggle span { background: #aab7cd; }
body.app-mode .balance-pill-icon { color: var(--primary2); }
body.app-mode .chevron { color: #7f8da6; }
body.app-mode .user-avatar {
  background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(32,212,255,.16));
  color: #fff;
}

body.app-mode .side-menu {
  background: #0b1220;
  border-right-color: var(--line);
  box-shadow: 18px 0 55px rgba(0,0,0,.38);
}
body.app-mode .side-menu-head { border-bottom-color: var(--line); }
body.app-mode .side-menu-head .brand { color: #f7f9ff; }
body.app-mode .side-menu-head .brand > span:last-child > span { color: var(--primary2); }
body.app-mode .side-close { color: #94a1b8; }
body.app-mode .side-menu-user { border-bottom-color: var(--line); }
body.app-mode .side-menu-user strong { color: #f7f9ff; }
body.app-mode .side-menu-user small { color: #7f8da6; }
body.app-mode .side-nav a,
body.app-mode .side-logout { color: #94a1b8; }
body.app-mode .side-nav a:hover,
body.app-mode .side-nav a.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(124,92,255,.18), rgba(32,212,255,.05));
}
body.app-mode .side-nav a.active {
  color: #fff;
  border: 1px solid rgba(124,92,255,.24);
}
body.app-mode .side-menu-foot { border-top-color: var(--line); }
body.app-mode .side-logout { color: #ff8d9b; }
body.app-mode .side-logout:hover { background: rgba(255,101,119,.08); }
body.app-mode .menu-backdrop { background: rgba(0,0,0,.64); }

body.app-mode .app-section { color: var(--text); }
body.app-mode .eyebrow { color: #8c78ff; }
body.app-mode .mobile-page-heading h2,
body.app-mode .section-heading h2 { color: #f7f9ff; }
body.app-mode .section-heading p { color: #94a1b8; }

body.app-mode .dashboard-stat,
body.app-mode .panel,
body.app-mode .stat-card {
  background: linear-gradient(145deg, rgba(18,27,46,.96), rgba(10,15,26,.96));
  border-color: var(--line);
  box-shadow: 0 16px 45px rgba(0,0,0,.18);
  color: var(--text);
}
body.app-mode .dashboard-stat span { color: #94a1b8; }
body.app-mode .dashboard-stat strong { color: #f7f9ff; }
body.app-mode .balance-stat .stat-icon {
  background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(124,92,255,.08));
  color: #a996ff;
}
body.app-mode .spent-stat .stat-icon {
  background: linear-gradient(135deg, rgba(32,212,255,.22), rgba(32,212,255,.06));
  color: #20d4ff;
}
body.app-mode .active-stat .stat-icon {
  background: rgba(57,217,138,.12);
  color: #39d98a;
}

body.app-mode .panel-head h3 { color: #f7f9ff; }
body.app-mode .panel-head p { color: #7f8da6; }
body.app-mode .form-panel label { color: #94a1b8; }
body.app-mode input,
body.app-mode select,
body.app-mode .search,
body.app-mode textarea {
  background: #0a111f;
  color: #f7f9ff;
  border-color: var(--line);
}
body.app-mode input::placeholder,
body.app-mode textarea::placeholder { color: #66738d; }
body.app-mode input:focus,
body.app-mode select:focus,
body.app-mode textarea:focus {
  border-color: rgba(124,92,255,.7);
  box-shadow: 0 0 0 3px rgba(124,92,255,.12);
}
body.app-mode .btn-primary {
  background: linear-gradient(135deg, #7c5cff, #5c85ff);
  box-shadow: 0 12px 30px rgba(124,92,255,.25);
}
body.app-mode .btn-secondary {
  background: rgba(255,255,255,.055);
  border: 1px solid var(--line);
  color: #dbe4f5;
}
body.app-mode .btn-secondary:hover { background: rgba(255,255,255,.09); }
body.app-mode .btn-ghost { color: #94a1b8; }

body.app-mode .service-item {
  color: #dbe4f5;
  background: rgba(255,255,255,.025);
  border-color: var(--line);
}
body.app-mode .service-item:hover,
body.app-mode .service-item.selected {
  background: rgba(124,92,255,.09);
  border-color: rgba(124,92,255,.5);
}
body.app-mode .service-item small,
body.app-mode .service-group-title { color: #7f8da6; }
body.app-mode .service-platform-tab {
  color: #94a1b8;
  background: rgba(255,255,255,.025);
  border-color: var(--line);
}
body.app-mode .service-platform-tab.active {
  background: rgba(124,92,255,.12);
  color: #b5a7ff;
  border-color: rgba(124,92,255,.42);
}
body.app-mode .peak-charge { border-top-color: var(--line); }
body.app-mode .peak-charge span { color: #94a1b8; }
body.app-mode .peak-charge strong { color: #f7f9ff; }
body.app-mode .field-hint { color: #66738d; }

body.app-mode .news-box {
  border-color: var(--line);
  background: rgba(255,255,255,.025);
  color: #94a1b8;
}
body.app-mode .news-box strong { color: #f7f9ff; }
body.app-mode th { color: #7f8da6; }
body.app-mode td { color: #b8c3d6; border-bottom-color: var(--line); }
body.app-mode .muted { color: #7f8da6; }
body.app-mode .status { background: rgba(255,255,255,.06); }
body.app-mode .status.completed { color: var(--success); background: rgba(57,217,138,.08); }
body.app-mode .status.processing,
body.app-mode .status.in-progress { color: var(--primary2); }
body.app-mode .status.pending { color: var(--warning); }

body.app-mode .account-grid .panel,
body.app-mode .ticket-layout .panel { background: linear-gradient(145deg, rgba(18,27,46,.96), rgba(10,15,26,.96)); }
body.app-mode .ticket-message { background: rgba(255,255,255,.04); }

/* Match the public ArezBoost landing-page glow around key controls. */
body.app-mode .peak-submit,
body.app-mode .account-grid .btn-primary,
body.app-mode .ticket-layout .btn-primary {
  box-shadow: 0 12px 30px rgba(124,92,255,.24);
}
.brand-logo {
  width: 48px;
  height: 48px;
  display: inline-block;
  background-image: url('/favicon.png?v=2');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 12px;
  flex-shrink: 0;
}

.user-avatar-logo {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;

    object-fit: cover !important;
    object-position: center !important;

    display: block !important;
    border-radius: 12px !important;
    flex: 0 0 48px !important;

    position: static !important;
}
.public-brand-logo {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;

    object-fit: contain !important;
    display: block !important;
    flex: 0 0 42px !important;
    position: static !important;
}
.topbar .brand .public-brand-logo {
    width: 42px !important;
    height: 42px !important;
}
#admin .admin-table-panel h2 {
  font-size: 22px;
  line-height: 1.2;
  margin: 4px 0 6px;
}

#adminServiceSearch {
  max-width: 380px;
  height: 44px;
  font-size: 14px;
}
.admin-recommend-btn {
  background: linear-gradient(135deg, #7c3aed, #6366f1) !important;
  color: white !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
}

.admin-recommend-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.admin-recommend-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
/* FIX AREZBOOST FOOTER LOGO SIZE */
.footer-pro .footer-brand img {
  width: 46px !important;
  height: 46px !important;

  min-width: 46px !important;
  min-height: 46px !important;

  max-width: 46px !important;
  max-height: 46px !important;

  object-fit: contain !important;
  display: block !important;
}

/* Prevent old footer flex styles from breaking new footer */
.footer.footer-pro {
  display: block !important;
  width: 100% !important;
}

.footer-pro .footer-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.footer-pro .footer-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.footer-contact-list p {
  margin: 0;
  color: #c9d4f1;
  font-size: 15px;
}

.footer-social-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.footer-social-pills a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.footer-social-pills a:hover {
  background: rgba(124, 77, 255, 0.15);
  border-color: rgba(124, 77, 255, 0.45);
  box-shadow: 0 0 18px rgba(124, 77, 255, 0.18);
  transform: translateY(-1px);
}
.footer-social-pills {
  white-space: nowrap;
}
/* =========================================
   AREZBOOST FOOTER FINAL LAYOUT
========================================= */

.footer.footer-pro {
  display: block !important;
  width: 100% !important;

  background: #050a14 !important;
  border-top: 1px solid rgba(255,255,255,0.08);

  padding: 45px 6% !important;
}


/* LEFT + RIGHT */

.footer-main {
  width: 100%;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 50px;
}


/* LEFT */

.footer-left {
  display: flex;
  flex-direction: column;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-column h3 {
  color: #9fb7dc;
  font-size: 15px;
  margin: 0 0 14px;
}


/* COMPANY LINKS */

.footer-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;

  margin-bottom: 20px;
}

.footer-links a {
  color: #9eb4d4;
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  color: #27c9ff;
}


/* SOCIAL PILLS */

.footer-social-pills {
  display: flex !important;
  flex-wrap: wrap !important;

  gap: 12px !important;

  margin-bottom: 18px !important;
}

.footer-social-pills a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 46px !important;

  padding: 0 22px !important;

  border-radius: 999px !important;

  border: 1px solid rgba(255,255,255,0.14) !important;

  background: rgba(255,255,255,0.025) !important;

  color: #e2e8f5 !important;

  text-decoration: none !important;

  font-size: 15px !important;
  font-weight: 500 !important;

  transition: 0.2s ease !important;
}

.footer-social-pills a:hover {
  border-color: #27c9ff !important;

  background: rgba(39,201,255,0.08) !important;

  color: #ffffff !important;

  transform: translateY(-2px);
}


/* LOCATION */

.footer-location {
  color: #8da4c4;
  font-size: 14px;
}


/* RIGHT SIDE */

.footer-right {
  margin-left: auto;

  display: flex;
  flex-direction: column;

  align-items: flex-end;
  justify-content: flex-end;

  text-align: right;
}


/* LOGO + NAME */

.footer-brand-right {
  display: flex !important;
  align-items: center !important;

  gap: 12px;

  margin-bottom: 12px;
}

.footer-brand-right img {
  width: 48px !important;
  height: 48px !important;

  min-width: 48px !important;
  max-width: 48px !important;

  min-height: 48px !important;
  max-height: 48px !important;

  object-fit: contain !important;

  display: block !important;
}

.footer-brand-name {
  color: #ffffff;

  font-size: 21px;
  font-weight: 800;
}

.footer-brand-name span {
  color: #27c9ff;
}

.footer-right p {
  margin: 0;

  color: #8295b3;

  font-size: 13px;
}


/* MOBILE */

@media (max-width: 760px) {

  .footer-main {
    flex-direction: column;

    align-items: flex-start;
  }

  .footer-right {
    margin-left: 0;

    align-items: flex-start;

    text-align: left;
  }

  .footer-social-pills {
    gap: 9px !important;
  }

  .footer-social-pills a {
    padding: 0 17px !important;
  }
}
/* FORCE FOOTER LOGO SIZE */

.arez-footer-logo-wrap {
  width: 48px !important;
  height: 48px !important;

  min-width: 48px !important;
  min-height: 48px !important;

  max-width: 48px !important;
  max-height: 48px !important;

  flex: 0 0 48px !important;

  overflow: hidden !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.arez-footer-logo-wrap .arez-footer-logo {
  width: 48px !important;
  height: 48px !important;

  min-width: 48px !important;
  min-height: 48px !important;

  max-width: 48px !important;
  max-height: 48px !important;

  object-fit: contain !important;

  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  position: static !important;

  transform: none !important;
}
/* ==================================
   AREZBOOST FOOTER - FINAL FIX
================================== */

.footer.footer-pro {
  display: block !important;
  width: 100% !important;
  background: #050a14 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  padding: 50px 6% !important;
}


/* LEFT + RIGHT LAYOUT */

.footer-pro .footer-main {
  width: 100% !important;

  display: flex !important;
  flex-direction: row !important;

  align-items: center !important;
  justify-content: space-between !important;

  gap: 60px !important;
}


/* LEFT */

.footer-pro .footer-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  width: auto !important;
}

.footer-pro .footer-left h3 {
  margin: 0 0 14px !important;
  color: #a4b9db !important;
  font-size: 15px !important;
}


/* COMPANY LINKS */

.footer-pro .footer-links {
  display: flex !important;
  gap: 15px !important;
  flex-wrap: wrap !important;

  margin-bottom: 20px !important;
}

.footer-pro .footer-links a {
  color: #9db2d0 !important;
  text-decoration: none !important;
}


/* SOCIAL PILLS */

.footer-pro .footer-social-pills {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  gap: 12px !important;
  margin-bottom: 18px !important;
}

.footer-pro .footer-social-pills a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 46px !important;
  padding: 0 22px !important;

  border-radius: 999px !important;

  border: 1px solid rgba(255,255,255,0.15) !important;

  background: rgba(255,255,255,0.025) !important;

  color: #e6edff !important;

  text-decoration: none !important;

  font-size: 15px !important;
  font-weight: 500 !important;
}

.footer-pro .footer-social-pills a:hover {
  border-color: #26c9ff !important;
  background: rgba(38,201,255,0.08) !important;
}


/* LOCATION */

.footer-pro .footer-location {
  color: #8fa6c7 !important;
  font-size: 14px !important;
}


/* ===============================
   RIGHT SIDE
================================ */

.footer-pro .footer-right {
  margin-left: auto !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-end !important;
  justify-content: center !important;

  text-align: right !important;

  width: auto !important;
}


/* BRAND */

.footer-pro .footer-brand-right {
  display: flex !important;
  flex-direction: row !important;

  align-items: center !important;
  justify-content: flex-end !important;

  gap: 12px !important;

  margin-bottom: 10px !important;
}


/* LOGO */

.footer-pro .arez-footer-logo-bg {
  width: 48px !important;
  height: 48px !important;

  min-width: 48px !important;
  min-height: 48px !important;

  max-width: 48px !important;
  max-height: 48px !important;

  flex: 0 0 48px !important;

  background-image: url("/favicon.png?v=11") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


/* AREZBOOST NAME */

.footer-pro .footer-brand-name {
  font-size: 21px !important;
  font-weight: 800 !important;

  color: #ffffff !important;
}

.footer-pro .footer-brand-name span {
  color: #26c9ff !important;
}


/* COPYRIGHT */

.footer-pro .footer-copyright {
  margin: 0 !important;

  color: #899bb8 !important;

  font-size: 13px !important;

  text-align: right !important;
}


/* MOBILE */

@media (max-width: 760px) {

  .footer-pro .footer-main {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .footer-pro .footer-right {
    margin-left: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .footer-pro .footer-copyright {
    text-align: left !important;
  }
}