/* =====================================================================
   VASTROX — Dashboard / app shell (client + admin areas)
   Loads after styles.css (reuses the same design tokens)
   ===================================================================== */

body.app-body { background: var(--bg-muted); }

.app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }

/* Mobile-only overlay; hidden on desktop so it never occupies a grid column. */
.app-backdrop { display: none; }

/* ----------  Sidebar  ---------- */
.app-sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: #fff; border-right: 1px solid var(--border);
  padding: 18px 16px; display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: thin;
}
.app-sidebar::-webkit-scrollbar { width: 6px; }
.app-sidebar::-webkit-scrollbar-thumb { background: #dfe6ef; border-radius: 10px; }
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 16px; font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text); }
.sb-brand .logo { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-blue); color: #fff; box-shadow: 0 6px 14px rgba(37,99,235,.3); }
.sb-brand .logo svg { width: 21px; height: 21px; }

.sb-label { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); padding: 14px 10px 6px; }
.sb-nav { display: grid; gap: 2px; }
.sb-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--text-3); transition: background .16s ease, color .16s ease; position: relative;
}
.sb-link svg { width: 19px; height: 19px; flex: none; opacity: .85; }
.sb-link:hover { background: var(--bg-soft); color: var(--primary-700); }
.sb-link.active { background: var(--primary); color: #fff; box-shadow: 0 8px 18px rgba(37,99,235,.28); }
.sb-link.active svg { opacity: 1; }
.sb-badge { margin-left: auto; font-size: 11px; font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-700); }
.sb-link.active .sb-badge { background: rgba(255,255,255,.24); color: #fff; }

.sb-card { margin-top: 14px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 14px; padding: 16px; }
.sb-card .t { font-size: 12.5px; color: var(--muted); }
.sb-card .v { font-size: 24px; font-weight: 800; font-family: var(--font-display); color: var(--green-600); margin: 2px 0 12px; }
.sb-card.promo { background: var(--grad-blue); border: none; color: #fff; text-align: center; }
.sb-card.promo .pico { width: 48px; height: 48px; border-radius: 13px; background: rgba(255,255,255,.16); display: grid; place-items: center; margin: 0 auto 12px; }
.sb-card.promo .pico svg { width: 24px; height: 24px; }
.sb-card.promo h4 { color: #fff; font-size: 16px; margin-bottom: 5px; }
.sb-card.promo p { font-size: 12.5px; color: rgba(255,255,255,.88); margin-bottom: 14px; }

/* ----------  Main  ---------- */
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-topbar {
  position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 16px; padding: 12px 28px; height: 68px;
}
.tb-search { flex: 1; max-width: 440px; display: flex; align-items: center; gap: 10px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; color: var(--muted); position: relative; }
.tb-search svg { width: 18px; height: 18px; }
.tb-search input { border: none; background: none; outline: none; flex: 1; font-size: 14px; color: var(--text); }
.tb-search .kbd { font-size: 11px; font-weight: 700; color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; }
.tb-search.open { border-color: var(--primary-400); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.tb-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px; display: none; z-index: 200; max-height: 64vh; overflow-y: auto; }
.tb-search.open .tb-results { display: block; }
.tb-result { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 8px; cursor: pointer; color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none; }
.tb-result svg { width: 16px; height: 16px; opacity: .6; flex: none; }
.tb-result.sel { background: var(--primary-soft); color: var(--primary-700); }
.tb-result.sel svg { opacity: .9; }
.tb-result .tb-hint { margin-left: auto; font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--muted); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }
.tb-empty { padding: 16px 12px; color: var(--muted); font-size: 13px; text-align: center; }
.tb-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.tb-btn { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; color: var(--text-3); border: 1px solid transparent; position: relative; transition: background .16s ease, border-color .16s; }
.tb-btn:hover { background: var(--bg-soft); border-color: var(--border); }
.tb-btn svg { width: 20px; height: 20px; }
.tb-btn .dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid #fff; }
.tb-btn .cnt { position: absolute; top: 5px; right: 5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: var(--pill); background: var(--red); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; border: 2px solid #fff; }
.tb-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-3); padding: 9px 12px; border-radius: 10px; }
.tb-link:hover { background: var(--bg-soft); color: var(--primary-700); }
.tb-link svg { width: 17px; height: 17px; }
.tb-user { display: flex; align-items: center; gap: 10px; padding-left: 8px; border-left: 1px solid var(--border); margin-left: 4px; }
.tb-user .av { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-blue); color: #fff; font-weight: 800; font-family: var(--font-display); font-size: 14px; }
.tb-user .nm { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.2; }
.tb-user .rl { font-size: 12px; color: var(--muted); }

.app-content { padding: 26px 28px 40px; display: grid; gap: 22px; }
.app-foot { padding: 18px 28px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; }
.app-foot a { color: var(--muted); } .app-foot a:hover { color: var(--primary); }

.sb-toggle { display: none; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--border); place-items: center; color: var(--text); }
.sb-toggle svg { width: 22px; height: 22px; }

/* ----------  Welcome banner  ---------- */
.welcome { position: relative; overflow: hidden; background: linear-gradient(110deg,#eef4ff 0%, #e7efff 60%, #eafaff 100%); border: 1px solid var(--primary-soft-2); border-radius: var(--radius-lg); padding: 26px 28px; }
.welcome::after { content:""; position:absolute; right:-40px; top:-40px; width:240px; height:240px; background: radial-gradient(circle, rgba(37,99,235,.12), transparent 65%); }
.welcome h2 { font-size: 24px; margin-bottom: 4px; }
.welcome p { color: var(--text-3); font-size: 14.5px; }
.welcome .qa { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 20px; max-width: 640px; }
.qa-card { background: rgba(255,255,255,.8); border: 1px solid var(--border); border-radius: 13px; padding: 14px; text-align: center; transition: transform .18s ease, box-shadow .18s ease, background .18s; }
.qa-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); background: #fff; }
.qa-card .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin: 0 auto 9px; background: var(--primary-soft); color: var(--primary); }
.qa-card .ico svg { width: 20px; height: 20px; }
.qa-card span { font-size: 12.5px; font-weight: 700; color: var(--text-2); font-family: var(--font-display); }
.welcome .wfig { position: absolute; right: 30px; bottom: 0; top: 0; display: grid; place-items: center; }
.welcome .wfig .box { width: 120px; height: 120px; border-radius: 26px; background: var(--grad-blue); display: grid; place-items: center; box-shadow: var(--shadow-lg); }
.welcome .wfig .box svg { width: 60px; height: 60px; color: #fff; }

/* ----------  KPI cards  ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
.kpi { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; transition: transform .18s ease, box-shadow .18s ease; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.kpi .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 14px; }
.kpi .ico svg { width: 20px; height: 20px; }
.kpi .v { font-size: 26px; font-weight: 800; font-family: var(--font-display); color: var(--text); line-height: 1; }
.kpi .t { font-size: 13px; color: var(--muted); margin: 6px 0 10px; }
.kpi .lnk { font-size: 12.5px; font-weight: 700; color: var(--primary); }
.kpi .sub { font-size: 12px; font-weight: 700; }
.kpi .sub.up { color: var(--green-600); } .kpi .sub.down { color: var(--red); }

/* ----------  Cards / panels  ---------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.card-head h3 { font-size: 17px; }
.card-head .link-arrow { font-size: 13.5px; }
.card-head .link-arrow svg { width: 14px; height: 14px; }
.grid-2c { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-3c { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.grid-2u { display: grid; grid-template-columns: 1.5fr 1fr; gap: 22px; }

/* ----------  Tables  ---------- */
.dtable { width: 100%; border-collapse: collapse; }
.dtable th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.dtable td { padding: 13px 10px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text-2); }
.dtable tr:last-child td { border-bottom: none; }
.dtable tbody tr { transition: background .14s ease; }
.dtable tbody tr:hover { background: var(--bg-soft); }
.dtable .dom { font-weight: 700; color: var(--text); }
.dtable .dom small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.dtable .muted { color: var(--muted); }
.menu-dots { color: var(--muted-2); cursor: pointer; }
.menu-dots:hover { color: var(--text); }

/* ----------  Badges  ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: var(--pill); font-family: var(--font-display); }
.badge::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.green { color: var(--green-600); background: rgba(34,197,94,.12); }
.badge.blue { color: var(--primary-700); background: var(--primary-soft); }
.badge.orange { color: #c2410c; background: rgba(249,115,22,.12); }
.badge.red { color: #b91c1c; background: rgba(239,68,68,.1); }
.badge.purple { color: #6d28d9; background: rgba(139,92,246,.12); }
.badge.gray { color: var(--muted); background: var(--bg-muted); }
.badge.no-dot::before { display: none; }

/* ----------  Resource usage cards  ---------- */
.usage-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.usage { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.usage .t { font-size: 13px; font-weight: 700; color: var(--text-2); }
.usage .sub { font-size: 12px; color: var(--muted); }
.usage .v { font-size: 30px; font-weight: 800; font-family: var(--font-display); color: var(--text); margin: 8px 0 2px; }
.usage .chg { font-size: 12px; font-weight: 700; }
.usage .chg.up { color: var(--green-600); } .usage .chg.down { color: var(--red); }
.spark { width: 100%; height: 46px; margin-top: 8px; }

/* ----------  Quick access tiles  ---------- */
.qaccess { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 13px; transition: border-color .16s ease, box-shadow .16s; }
.qaccess:hover { border-color: var(--primary-400); box-shadow: var(--shadow); }
.qaccess .lg { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--font-display); }
.qaccess b { font-size: 14.5px; color: var(--text); font-family: var(--font-display); }
.qaccess span { font-size: 12.5px; color: var(--muted); }
.qaccess .go { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--bg-soft); color: var(--primary); }
.qaccess .go svg { width: 17px; height: 17px; }

/* ----------  Simple list rows (security, status)  ---------- */
.list-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.list-row:last-child { border-bottom: none; }
.list-row .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.list-row .ico svg { width: 17px; height: 17px; }
.list-row b { font-size: 13.5px; color: var(--text); font-weight: 600; }
.list-row .meta { margin-left: auto; text-align: right; }

/* ----------  Announcements  ---------- */
.ann { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.ann:last-child { border-bottom: none; }
.ann .pin { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; }
.ann h4 { font-size: 13.5px; color: var(--text); margin-bottom: 3px; }
.ann p { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.ann .date { font-size: 11px; color: var(--muted-2); margin-top: 4px; display: block; }

/* ----------  Banners (refer / help)  ---------- */
.mini-banner { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 24px; }
.mini-banner .ico { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary); }
.mini-banner .ico svg { width: 25px; height: 25px; }
.mini-banner b { font-size: 15.5px; color: var(--text); font-family: var(--font-display); }
.mini-banner p { font-size: 13px; color: var(--muted); }
.mini-banner .btn { margin-left: auto; }

/* ----------  Charts  ---------- */
.chart-box { width: 100%; height: 220px; }
.chart-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; }

.seg { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px; padding: 3px; }
.seg button { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 5px 12px; border-radius: 7px; }
.seg button.active { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }

/* ----------  Responsive  ---------- */
@media (max-width: 1240px) { .kpi-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 1080px) {
  .app { grid-template-columns: 1fr; }
  .app-sidebar { position: fixed; left: 0; top: 0; z-index: 80; width: 280px; transform: translateX(-100%); transition: transform .28s ease; box-shadow: var(--shadow-lg); }
  .app.nav-open .app-sidebar { transform: none; }
  .sb-toggle { display: grid; }
  .app-backdrop { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 70; opacity: 0; visibility: hidden; transition: opacity .25s ease; }
  .app.nav-open .app-backdrop { opacity: 1; visibility: visible; }
  .grid-2u, .grid-2c, .grid-3c { grid-template-columns: 1fr; }
  .usage-grid { grid-template-columns: repeat(2,1fr); }
  .welcome .wfig { display: none; }
}
@media (max-width: 720px) {
  .kpi-grid { grid-template-columns: repeat(2,1fr); }
  .welcome .qa { grid-template-columns: repeat(2,1fr); max-width: none; }
  .tb-search { display: none; }
  .tb-link span, .tb-user .who-txt { display: none; }
  .app-content { padding: 18px 16px 32px; }
  .app-topbar { padding: 12px 16px; }
  .app, .app-main, .app-content, .card { min-width: 0; max-width: 100%; }
  .page-h, .page-h > div { min-width: 0; max-width: 100%; }
  .page-h .sub { overflow-wrap: anywhere; }
}
@media (max-width: 480px) { .usage-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Client Health Score — gauge + factor breakdown
   ===================================================================== */
.health-card { display: flex; align-items: center; gap: 22px; }
.health-gauge { position: relative; width: 120px; height: 120px; flex: none; }
.health-gauge svg { transform: rotate(-90deg); }
.health-gauge .hg-track { fill: none; stroke: var(--bg-muted); stroke-width: 11; }
.health-gauge .hg-fill { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.health-gauge .hg-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; }
.health-gauge .hg-num b { font-size: 30px; font-weight: 800; font-family: var(--font-display); color: var(--text); line-height: 1; letter-spacing: -.02em; }
.health-gauge .hg-num span { font-size: 11px; font-weight: 600; color: var(--muted); line-height: 1; }
.health-meta h3 { font-size: 17px; margin-bottom: 4px; }
.health-meta .grade { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.health-meta p { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.hg-green { stroke: var(--green); } .hg-orange { stroke: var(--orange); } .hg-red { stroke: var(--red); }

.factor-list { display: grid; gap: 12px; }
.factor { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.factor:last-child { border-bottom: none; }
.factor .fico { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.factor .fico svg { width: 16px; height: 16px; }
.factor.pass .fico { background: rgba(34,197,94,.14); color: var(--green-600); }
.factor.warn .fico { background: rgba(249,115,22,.14); color: #c2410c; }
.factor.fail .fico { background: rgba(239,68,68,.12); color: #b91c1c; }
.factor .fbody { flex: 1; }
.factor .fbody .ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.factor .fbody b { font-size: 14px; color: var(--text); font-family: var(--font-display); }
.factor .fbody .fdetail { font-size: 12.5px; font-weight: 600; }
.factor.pass .fdetail { color: var(--green-600); } .factor.warn .fdetail { color: #c2410c; } .factor.fail .fdetail { color: #b91c1c; }
.factor .frec { font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.health-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: var(--pill); font-size: 12px; font-weight: 800; font-family: var(--font-display); }
.health-pill.green { background: rgba(34,197,94,.12); color: var(--green-600); }
.health-pill.orange { background: rgba(249,115,22,.12); color: #c2410c; }
.health-pill.red { background: rgba(239,68,68,.1); color: #b91c1c; }

/* =====================================================================
   Platform additions — flash, page headers, forms, tables, auth, detail
   ===================================================================== */
.hidden { display: none !important; }

.flash { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-radius: 12px; font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.flash svg { width: 18px; height: 18px; flex: none; }
.flash-ok { background: rgba(34,197,94,.1); color: var(--green-600); border: 1px solid rgba(34,197,94,.22); }
.flash-err { background: rgba(239,68,68,.08); color: #b91c1c; border: 1px solid rgba(239,68,68,.2); }

.page-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-h h1 { font-size: 24px; font-family: var(--font-display); }
.page-h .sub { font-size: 14px; color: var(--muted); margin-top: 3px; }
.page-h .actions { display: flex; gap: 10px; flex-wrap: wrap; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 4px; }
.filters .seg a { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 7px 13px; border-radius: 8px; }
.filters .seg a.active { background: #fff; color: var(--text); box-shadow: var(--shadow-sm); }
.filters form { display: flex; gap: 8px; margin-left: auto; }
.filters input[type=search], .filters input[type=text] { padding: 9px 13px; border: 1px solid var(--border-2); border-radius: 9px; font-size: 13.5px; background: #fff; min-width: 220px; }

.empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.empty .ico { width: 56px; height: 56px; border-radius: 15px; background: var(--bg-muted); color: var(--muted-2); display: grid; place-items: center; margin: 0 auto 14px; }
.empty .ico svg { width: 27px; height: 27px; }
.empty h3 { font-size: 17px; color: var(--text); margin-bottom: 6px; }

/* Forms */
.pform { display: grid; gap: 18px; }
.pform .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pform .row-3 { grid-template-columns: 1fr 1fr 1fr; }
.pfield { display: grid; gap: 7px; }
.pfield label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.pfield input, .pfield select, .pfield textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--border-2); border-radius: 10px;
  font-size: 14px; color: var(--text); background: #fff; transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.pfield input::placeholder, .pfield textarea::placeholder { color: var(--muted-2); }
.pfield input:hover:not(:focus), .pfield select:hover:not(:focus), .pfield textarea:hover:not(:focus) { border-color: var(--primary-400); }
.pfield input:focus, .pfield select:focus, .pfield textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.pfield select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 17px;
}
.pfield textarea { resize: vertical; min-height: 92px; font-family: inherit; }
.pfield .hint { font-size: 12px; color: var(--muted); }
.pcheck { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text-2); font-weight: 600; }
.pcheck input { width: 18px; height: 18px; }
.form-actions { display: flex; gap: 10px; padding-top: 8px; border-top: 1px solid var(--border); margin-top: 4px; }

/* Detail / key-value */
.detail-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items: start; }
.kv { display: grid; gap: 0; }
.kv .row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.kv .row:last-child { border-bottom: none; }
.kv .row .k { color: var(--muted); }
.kv .row .v { color: var(--text); font-weight: 600; text-align: right; }
.kv .row .v.mono { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }

/* Ticket thread */
.thread { display: grid; gap: 14px; }
.msg { border: 1px solid var(--border); border-radius: 14px; padding: 16px 18px; background: #fff; }
.msg.staff { background: var(--primary-soft); border-color: var(--primary-soft-2); }
.msg .mh { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.msg .mh .av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 12px; font-family: var(--font-display); background: var(--primary); }
.msg .mh b { font-size: 14px; color: var(--text); }
.msg .mh .when { margin-left: auto; font-size: 12px; color: var(--muted); }
.msg p { font-size: 14px; color: var(--text-2); white-space: pre-wrap; }

/* Invoice table */
.inv-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; }
.inv-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.inv-table td { padding: 13px 12px; border-bottom: 1px solid var(--border); font-size: 14px; }
.inv-table td.amt, .inv-table th.amt { text-align: right; font-variant-numeric: tabular-nums; }
.inv-total { display: flex; justify-content: flex-end; }
.inv-total .box { width: 280px; display: grid; gap: 8px; }
.inv-total .line { display: flex; justify-content: space-between; font-size: 14px; color: var(--text-2); }
.inv-total .line.grand { font-size: 18px; font-weight: 800; color: var(--text); font-family: var(--font-display); padding-top: 10px; border-top: 1px solid var(--border); }
.invoice-card { overflow: hidden; }
.invoice-card .card-head { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.invoice-meta-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 16px 0 18px; }
.invoice-meta { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--bg-soft); min-width: 0; }
.invoice-meta .mi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
.invoice-meta .mi svg { width: 17px; height: 17px; }
.invoice-meta span { display: block; color: var(--muted); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.invoice-meta b { display: block; color: var(--text); font-size: 14px; font-family: var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice-timeline { margin-top: 22px; padding: 18px; border: 1px solid var(--border); border-radius: 15px; background: linear-gradient(180deg,#fff,#f8fbff); }
.invoice-timeline h3 { font-size: 16px; margin-bottom: 14px; }
.invoice-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.invoice-step { position: relative; padding: 14px; border: 1px solid var(--border); border-radius: 13px; background: #fff; min-width: 0; }
.invoice-step .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 9px; background: var(--bg-muted); color: var(--muted); }
.invoice-step .dot svg { width: 14px; height: 14px; }
.invoice-step.done .dot { background: rgba(34,197,94,.14); color: var(--green-600); }
.invoice-step.current { border-color: var(--primary-soft-2); background: var(--primary-soft); }
.invoice-step.current .dot { background: var(--primary); color: #fff; }
.invoice-step b { display: block; color: var(--text); font-size: 13.5px; font-family: var(--font-display); }
.invoice-step span { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 3px; }
.invoice-pay-card { position: sticky; top: 92px; overflow: hidden; }
.invoice-pay-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-blue); }
.pay-hero { display: grid; gap: 12px; padding: 2px 0 18px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.pay-hero .ey { display:inline-flex; align-items:center; gap:7px; width:max-content; padding:5px 10px; border-radius:999px; background:var(--primary-soft); color:var(--primary-700); font-size:11.5px; font-weight:800; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.035em; }
.pay-hero .ey svg { width:14px; height:14px; }
.pay-hero .amt { font-size: 36px; line-height: 1; font-weight: 900; font-family: var(--font-display); color: var(--text); letter-spacing:-.035em; }
.pay-hero p { color: var(--text-3); font-size: 13.5px; line-height: 1.6; max-width: 360px; }
.pay-stack { display:grid; gap:10px; margin: 14px 0 18px; }
.pay-row { display:flex; align-items:center; gap:11px; padding:11px 12px; border:1px solid var(--border); border-radius:12px; background:var(--bg-soft); }
.pay-row .pi { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; flex:none; background:#fff; color:var(--primary); box-shadow:var(--shadow-sm); }
.pay-row .pi svg { width:17px; height:17px; }
.pay-row b { display:block; color:var(--text); font-size:13.5px; }
.pay-row span:not(.pi) { display:block; color:var(--muted); font-size:12px; line-height:1.35; }
.pay-note { display:flex; align-items:center; justify-content:center; gap:7px; color:var(--muted); font-size:12px; margin-top:12px; text-align:center; }
.pay-note svg { width:14px; height:14px; color:var(--green-600); flex:none; }
.pay-row-highlight { border-color:var(--green-600) !important; background:rgba(34,197,94,.05) !important; }
.pay-row-highlight .pi { background:rgba(34,197,94,.14); color:var(--green-600); }
.pay-row-tag { display:inline-flex; align-items:center; margin-left:8px; padding:2px 8px; border-radius:999px; background:rgba(34,197,94,.14); color:var(--green-600); font-size:11px; font-weight:900; letter-spacing:.04em; }
.pay-row-tag-warn { background:rgba(249,115,22,.13); color:#c2410c; }
.gateway-list { display:grid; gap:12px; margin-bottom:22px; }
.gateway-card { display:flex; align-items:center; gap:14px; padding:16px 18px; border:2px solid var(--border); border-radius:14px; cursor:pointer; background:#fff; transition:border-color .16s, box-shadow .16s, background .16s, transform .16s; }
.gateway-card:hover { border-color:var(--primary-400); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.gateway-card input { width:18px; height:18px; accent-color:var(--primary); flex:none; }
.gateway-card.active { border-color:var(--primary); background:var(--grad-blue-soft); box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.gateway-card .gi { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none; background:#fff; color:var(--primary); box-shadow:var(--shadow-sm); }
.gateway-card .gi svg { width:19px; height:19px; }
.gateway-card .gcopy b { display:block; font-family:var(--font-display); color:var(--text); font-size:15px; }
.gateway-card .gcopy span { display:block; color:var(--muted); font-size:12.5px; line-height:1.45; margin-top:2px; }
.gateway-card-disabled { display:flex; align-items:center; gap:14px; padding:16px 18px; border:1px solid var(--border); border-radius:14px; background:var(--bg-soft); opacity:.7; pointer-events:none; margin-bottom:0; }
.gateway-card-disabled .gi { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:none; background:#fff; color:var(--muted); box-shadow:var(--shadow-sm); }
.gateway-card-disabled .gi svg { width:19px; height:19px; }
.gateway-card-disabled .gcopy b { display:block; font-family:var(--font-display); color:var(--muted); font-size:15px; }
.gateway-card-disabled .gcopy span { display:block; color:var(--muted); font-size:12.5px; line-height:1.45; margin-top:2px; }
.gw-balance-badge { display:inline-flex; align-items:center; margin-left:8px; padding:2px 9px; border-radius:999px; background:var(--bg-muted); color:var(--muted); font-size:12px; font-weight:900; letter-spacing:.04em; vertical-align:middle; }
.gw-balance-badge.gw-balance-ok { background:rgba(34,197,94,.14); color:var(--green-600); }
.checkout-paypal-logo { background:#fff; }

/* =====================================================================
   Invoice show — premium redesign
   ===================================================================== */
.inv-action-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.inv-action-bar .breadcrumb { margin-bottom:0; }
.inv-action-btns { display:flex; gap:8px; flex-wrap:wrap; }

.inv-banner { border-radius:20px; padding:26px 30px; margin-bottom:26px; display:flex; justify-content:space-between; align-items:center; gap:20px; position:relative; overflow:hidden; }
.inv-banner-paid    { background:linear-gradient(130deg,#f0fdf4,#dcfce7); border:1px solid #86efac; }
.inv-banner-unpaid  { background:linear-gradient(130deg,#eff4ff,#e0ecff); border:1px solid #93c5fd; }
.inv-banner-overdue { background:linear-gradient(130deg,#fff7ed,#fee2e2); border:1px solid #fca5a5; }
.inv-banner-num     { font-size:26px; font-weight:900; font-family:var(--font-display); color:var(--text); margin-bottom:6px; letter-spacing:-.02em; }
.inv-banner-meta    { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.inv-banner-dot     { width:4px; height:4px; border-radius:50%; background:currentColor; flex:none; }
.inv-banner-right   { text-align:right; flex:none; }
.inv-banner-amount  { font-size:34px; font-weight:900; font-family:var(--font-display); color:var(--text); letter-spacing:-.03em; }
.inv-status-pill    { display:inline-flex; align-items:center; gap:7px; padding:5px 14px; border-radius:999px; font-size:12.5px; font-weight:800; font-family:var(--font-display); margin-top:6px; }
.inv-status-pill svg{ width:13px; height:13px; }
.inv-status-green   { background:rgba(34,197,94,.14); color:var(--green-600); }
.inv-status-orange  { background:rgba(249,115,22,.12); color:#c2410c; }
.inv-status-red     { background:rgba(239,68,68,.1); color:#b91c1c; }

.inv-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr); gap:22px; align-items:start; }
.inv-sidebar { display:grid; gap:16px; position:sticky; top:92px; }

/* Invoice document card */
.inv-doc { background:#fff; border:1px solid var(--border); border-radius:20px; overflow:hidden; }
.inv-doc-header { display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:28px 30px; border-bottom:1px solid var(--border); }
.inv-from-brand  { font-size:20px; font-weight:900; font-family:var(--font-display); color:var(--primary-700); margin-bottom:7px; }
.inv-addr        { font-size:12.5px; color:var(--muted); line-height:1.75; white-space:pre-line; }
.inv-to-label    { font-size:10px; font-weight:900; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-bottom:9px; }
.inv-to-name     { font-size:16px; font-weight:800; color:var(--text); margin-bottom:3px; }
.inv-to-company, .inv-to-email, .inv-to-country { font-size:13px; color:var(--muted); line-height:1.7; }

/* Items */
.inv-doc-items  { padding:6px 30px 24px; }
.inv-doc-table  { width:100%; border-collapse:collapse; margin-top:4px; }
.inv-doc-table th { font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); padding:10px 10px; border-bottom:2px solid var(--border); text-align:left; }
.inv-doc-table td { padding:14px 10px; border-bottom:1px solid var(--border); font-size:14px; color:var(--text-2); }
.inv-doc-table tbody tr:last-child td { border-bottom:0; }
.inv-desc-col { width:60%; }
.inv-qty-col  { width:10%; text-align:center; }
.inv-qty-col.inv-qty-col { text-align:center; }
.inv-amt-col  { width:30%; text-align:right; font-variant-numeric:tabular-nums; }
.inv-totals   { display:flex; justify-content:flex-end; margin-top:16px; }
.inv-totals-rows { width:290px; display:grid; gap:2px; }
.inv-total-row   { display:flex; justify-content:space-between; padding:7px 0; font-size:13.5px; color:var(--text-3); border-bottom:1px solid var(--border); }
.inv-discount-row span:last-child { color:var(--green-600); font-weight:700; }
.inv-grand-row   { display:flex; justify-content:space-between; align-items:center; padding:12px 0 0; font-size:20px; font-weight:900; font-family:var(--font-display); color:var(--text); margin-top:4px; }

/* Timeline */
.inv-progress       { padding:26px 30px; border-top:1px solid var(--border); }
.inv-progress-title { font-size:13px; font-weight:800; color:var(--text); margin-bottom:22px; font-family:var(--font-display); }
.inv-steps { display:flex; gap:0; position:relative; }
.inv-step  { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; }
.inv-step:not(:last-child)::after { content:""; position:absolute; top:17px; left:50%; right:-50%; height:2px; background:var(--border); z-index:0; }
.inv-step-done:not(:last-child)::after { background:var(--green-600); }
.inv-step-dot { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; position:relative; z-index:1; background:var(--bg-muted); color:var(--muted); flex:none; margin-bottom:9px; }
.inv-step-dot svg    { width:15px; height:15px; }
.inv-step-done .inv-step-dot    { background:var(--green-600); color:#fff; }
.inv-step-current .inv-step-dot { background:var(--primary); color:#fff; box-shadow:0 0 0 5px rgba(37,99,235,.14); }
.inv-step-label { font-size:12.5px; font-weight:700; color:var(--text); text-align:center; }
.inv-step-sub   { font-size:11.5px; color:var(--muted); margin-top:3px; text-align:center; }

/* Payment history */
.inv-txn-section { padding:20px 30px; border-top:1px solid var(--border); }
.inv-section-label { font-size:10.5px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:13px; }
.inv-txn-list { display:grid; gap:8px; }
.inv-txn-row { display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid var(--border); border-radius:12px; background:var(--bg-soft); }
.inv-txn-completed { background:rgba(34,197,94,.05); border-color:rgba(34,197,94,.2) !important; }
.inv-txn-icon { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--bg-muted); color:var(--muted); flex:none; }
.inv-txn-completed .inv-txn-icon { background:rgba(34,197,94,.14); color:var(--green-600); }
.inv-txn-icon svg { width:14px; height:14px; }
.inv-txn-body { flex:1; min-width:0; }
.inv-txn-body b    { display:block; color:var(--text); font-size:13.5px; }
.inv-txn-body span { color:var(--muted); font-size:12px; }
.inv-txn-amount { font-size:15px; font-weight:900; color:var(--text); font-family:var(--font-display); white-space:nowrap; }

/* Notes / footer */
.inv-notes { padding:18px 30px; border-top:1px solid var(--border); }
.inv-notes p { font-size:13.5px; color:var(--text-3); line-height:1.65; margin-top:8px; }
.inv-doc-footer { padding:16px 30px; border-top:1px solid var(--border); background:var(--bg-soft); font-size:12.5px; color:var(--muted); line-height:1.7; }

/* Sidebar: paid state */
.inv-paid-sidebar { text-align:center; padding:28px 22px; background:linear-gradient(135deg,#f0fdf4,#dcfce7); border-color:#86efac; }
.inv-paid-icon  { width:52px; height:52px; border-radius:16px; background:rgba(34,197,94,.18); color:var(--green-600); display:grid; place-items:center; margin:0 auto 14px; }
.inv-paid-icon svg { width:26px; height:26px; }
.inv-paid-title { font-size:18px; font-weight:900; font-family:var(--font-display); color:var(--green-600); margin-bottom:4px; }
.inv-paid-when  { font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:3px; }
.inv-paid-via   { font-size:12.5px; color:var(--muted); }

/* Sidebar: unpaid state */
.inv-pay-sidebar .inv-pay-amount { font-size:36px; font-weight:900; font-family:var(--font-display); color:var(--text); letter-spacing:-.03em; }
.inv-pay-sidebar .inv-pay-label  { font-size:13px; color:var(--muted); margin-top:4px; margin-bottom:10px; }
.inv-pay-credit-pill { display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:10px; background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.2); color:var(--green-600); font-size:12.5px; font-weight:700; margin-bottom:4px; }
.inv-pay-credit-pill svg { width:14px; height:14px; }

/* Services */
.inv-services-card .inv-service-list { display:grid; gap:0; }
.inv-service-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.inv-service-row:last-child { border-bottom:0; padding-bottom:0; }
.inv-service-info b    { display:block; font-size:13.5px; color:var(--text); font-family:var(--font-display); }
.inv-service-info span { font-size:12px; color:var(--muted); }
.inv-service-right { display:flex; align-items:center; gap:8px; flex:none; }

@media (max-width: 1060px) {
  .inv-layout  { grid-template-columns:1fr; }
  .inv-sidebar { position:static; }
}
@media (max-width: 640px) {
  .inv-action-bar  { flex-direction:column; align-items:flex-start; }
  .inv-action-btns { width:100%; justify-content:flex-start; }
  .inv-banner { flex-direction:column; align-items:flex-start; gap:12px; padding:18px 20px; }
  .inv-banner-right { text-align:left; }
  .inv-banner-amount { font-size:26px; }
  .inv-banner-num { font-size:20px; }
  .inv-doc-header { grid-template-columns:1fr; padding:20px; }
  .inv-doc-items  { padding:0 18px 20px; }
  .inv-doc-table th, .inv-doc-table td { padding:10px 6px; font-size:12.5px; }
  .inv-doc-table .inv-qty-col { display:none; }
  .inv-progress, .inv-txn-section, .inv-notes, .inv-doc-footer { padding-left:18px; padding-right:18px; }
  .inv-steps { gap:0; }
  .inv-step-label, .inv-step-sub { font-size:10.5px; }
}
.co-wrap { display:grid; grid-template-columns:minmax(0,1.38fr) minmax(320px,.62fr); gap:28px; align-items:start; }

/* Hero amount */
.co-hero { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:28px 30px; border-radius:20px; background:linear-gradient(130deg,#1d4ed8 0%,#2563eb 55%,#4f46e5 100%); color:#fff; margin-bottom:24px; overflow:hidden; position:relative; }
.co-hero::before { content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.07); }
.co-hero::after  { content:""; position:absolute; left:40%; bottom:-80px; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,.05); }
.co-hero > * { position:relative; z-index:1; }
.co-eyebrow { display:inline-flex; align-items:center; gap:7px; padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.16); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; margin-bottom:14px; width:max-content; }
.co-eyebrow svg { width:13px; height:13px; }
.co-amount { font-size:52px; line-height:1; font-weight:900; font-family:var(--font-display); letter-spacing:-.04em; margin-bottom:10px; }
.co-inv-meta { font-size:13px; color:rgba(255,255,255,.75); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.co-inv-meta b { color:#fff; }
.co-dot { width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.45); }
.co-hero-badge { display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 18px; border-radius:16px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); text-align:center; flex:none; }
.co-hero-badge svg { width:22px; height:22px; }
.co-hero-badge span:last-child { font-size:11px; font-weight:800; line-height:1.35; color:rgba(255,255,255,.9); letter-spacing:.02em; }

/* Section label */
.co-section-label { font-size:11.5px; font-weight:900; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-bottom:12px; }

/* Method cards */
.co-methods { display:grid; gap:10px; margin-bottom:22px; }
.co-method { display:flex; align-items:center; gap:14px; padding:16px 18px; border:2px solid var(--border); border-radius:16px; cursor:pointer; background:#fff; transition:border-color .15s,box-shadow .15s,background .15s; position:relative; overflow:hidden; }
.co-method input { display:none; }
.co-method:hover { border-color:var(--primary-400); box-shadow:0 0 0 3px rgba(37,99,235,.06); }
.co-method-active { border-color:var(--primary) !important; background:linear-gradient(135deg,#f7faff,#eef4ff) !important; box-shadow:0 0 0 3px rgba(37,99,235,.1) !important; }
.co-method-active::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary); border-radius:2px 0 0 2px; }
.co-method-locked { opacity:.65; pointer-events:none; cursor:default; border-color:var(--border); background:var(--bg-soft); }
.co-method-icon { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; flex:none; background:var(--bg-soft); color:var(--primary); box-shadow:var(--shadow-sm); border:1px solid var(--border); }
.co-method-icon svg { width:21px; height:21px; }
.co-method-icon-green { background:rgba(34,197,94,.1); color:var(--green-600); border-color:rgba(34,197,94,.2); }
.co-method-icon-paypal { background:#fff; }
.co-method-body { flex:1; min-width:0; }
.co-method-title { font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--text); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.co-method-desc { font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.5; }
.co-balance-pill { display:inline-flex; align-items:center; padding:2px 10px; border-radius:999px; font-size:11.5px; font-weight:900; letter-spacing:.03em; background:var(--bg-muted); color:var(--muted); vertical-align:middle; }
.co-balance-pill-green { background:rgba(34,197,94,.14); color:var(--green-600); }
.co-topup-link { color:var(--primary); font-weight:700; text-decoration:none; }
.co-topup-link:hover { text-decoration:underline; }
.co-method-check { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--bg-soft); color:var(--muted-2); border:2px solid var(--border); transition:background .15s,color .15s,border-color .15s; }
.co-method-check svg { width:13px; height:13px; }
.co-method-active .co-method-check { background:var(--primary); color:#fff; border-color:var(--primary); }
.co-method-lock { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--bg-muted); color:var(--muted-2); }
.co-method-lock svg { width:14px; height:14px; }

/* Summary row */
.co-summary { padding:18px 20px; background:var(--bg-soft); border:1px solid var(--border); border-radius:14px; margin-bottom:20px; }
.co-summary-row { display:flex; justify-content:space-between; align-items:center; font-size:14px; color:var(--text-2); padding:5px 0; }
.co-summary-discount span:last-child { color:var(--green-600); font-weight:700; }
.co-summary-total { display:flex; justify-content:space-between; align-items:center; font-size:19px; font-weight:900; font-family:var(--font-display); color:var(--text); padding-top:12px; margin-top:8px; border-top:1px solid var(--border); }

/* Pay button */
.co-pay-btn { height:56px; font-size:16px; font-weight:800; border-radius:14px; letter-spacing:.01em; box-shadow:0 8px 24px rgba(37,99,235,.32); transition:transform .16s,box-shadow .16s; }
.co-pay-btn:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(37,99,235,.38); }
.co-pay-btn:active { transform:none; box-shadow:0 4px 14px rgba(37,99,235,.28); }

/* Trust strip */
.co-trust-strip { display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:16px; padding:12px; background:var(--bg-soft); border-radius:10px; }
.co-trust-strip span { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); font-weight:700; }
.co-trust-strip svg { width:13px; height:13px; color:var(--green-600); }

/* Aside */
.co-aside { display:grid; gap:16px; position:sticky; top:92px; }
.co-aside-card { background:#fff; border:1px solid var(--border); border-radius:18px; padding:20px 22px; }
.co-aside-card-blue { background:linear-gradient(135deg,#eef4ff,#f0f7ff); border-color:var(--primary-soft-2); }
.co-aside-card-green { background:rgba(34,197,94,.06); border-color:rgba(34,197,94,.2); }
.co-aside-head { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:15px; font-weight:800; color:var(--text); margin-bottom:14px; }
.co-aside-head svg { width:18px; height:18px; color:var(--primary); }
.co-item-list { display:grid; gap:0; }
.co-item { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.co-item:last-child { border-bottom:0; }
.co-item-name { font-size:13.5px; color:var(--text-2); line-height:1.45; }
.co-item-price { font-size:14px; font-weight:800; color:var(--text); white-space:nowrap; }
.co-aside-total { display:flex; justify-content:space-between; align-items:center; padding-top:14px; margin-top:4px; border-top:2px solid var(--border); }
.co-aside-total span { font-size:13px; color:var(--muted); font-weight:700; }
.co-aside-total strong { font-size:22px; font-weight:900; font-family:var(--font-display); color:var(--text); }
.co-activation-header { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.co-activation-header svg { width:18px; height:18px; color:var(--primary); }
.co-activation-header b { font-family:var(--font-display); font-size:14.5px; color:var(--text); }
.co-aside-card-blue p,.co-aside-card-green p { font-size:13px; color:var(--text-3); line-height:1.6; margin-bottom:14px; }
.co-activation-steps { display:flex; align-items:center; gap:0; font-size:11.5px; font-weight:700; color:var(--muted); }
.co-activation-steps div { display:flex; align-items:center; gap:5px; padding:5px 10px; border-radius:8px; background:rgba(255,255,255,.6); }
.co-activation-steps div + div::before { content:"→"; margin:0 4px; color:var(--muted-2); font-weight:400; }
.co-step-active { background:var(--primary) !important; color:#fff !important; }
.co-step-active svg { color:#fff !important; }
.co-activation-steps svg { width:13px; height:13px; }
.co-aside-secure { display:flex; align-items:flex-start; gap:10px; font-size:12px; color:var(--muted); line-height:1.55; padding:12px 16px; background:var(--bg-soft); border-radius:12px; border:1px solid var(--border); }
.co-aside-secure svg { width:16px; height:16px; color:var(--green-600); flex:none; margin-top:1px; }
.co-cancel-link { display:flex; align-items:center; gap:7px; justify-content:center; font-size:13px; color:var(--muted); font-weight:600; padding:8px; border-radius:10px; transition:color .15s; }
.co-cancel-link:hover { color:var(--text); }
.co-cancel-link svg { width:14px; height:14px; }

@media (max-width: 1020px) {
  .co-wrap { grid-template-columns:1fr; }
  .co-aside { position:static; }
  .co-amount { font-size:42px; }
}
@media (max-width: 640px) {
  .co-hero { padding:20px; flex-direction:column; align-items:flex-start; gap:16px; }
  .co-amount { font-size:36px; }
  .co-hero-badge { flex-direction:row; width:100%; justify-content:center; }
  .co-trust-strip { gap:12px; }
  .co-method { flex-wrap:wrap; }
  .co-activation-steps { flex-direction:column; align-items:flex-start; }
  .co-activation-steps div + div::before { display:none; }
}
.manual-pay-card { background: rgba(124,58,237,.055); border-color: rgba(124,58,237,.22); }
.manual-pay-card code { font-family: ui-monospace, Menlo, monospace; }
.invoice-help-card .btn svg { width:16px; height:16px; }
.invoice-paid-card { background: rgba(34,197,94,.06); border-color: rgba(34,197,94,.2); }
.invoice-paid-card .paid-mark { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(34,197,94,.14); color: var(--green-600); margin-bottom: 12px; }
.invoice-paid-card .paid-mark svg { width: 23px; height: 23px; }

/* Billing / wallet */
.wallet-hero { position: relative; overflow: hidden; background: linear-gradient(135deg,#eff4ff,#f8fbff); border-color: var(--primary-soft-2); }
.wallet-hero::after { content:""; position:absolute; right:-70px; top:-90px; width:210px; height:210px; background: radial-gradient(circle, rgba(37,99,235,.14), transparent 64%); }
.wallet-hero > * { position: relative; z-index: 1; }
.wallet-balance { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.wallet-balance .amount { font-size:46px; line-height:1; font-weight:900; font-family:var(--font-display); color:var(--primary-700); letter-spacing:-.035em; }
.wallet-balance .label { font-size:13px; color:var(--muted); padding-bottom:4px; }
.wallet-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.wallet-pills > span { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:999px; background:#fff; border:1px solid var(--border); color:var(--text-2); font-size:12px; font-weight:800; }
.wallet-pills > span svg { width:13px; height:13px; color:var(--primary); }
.billing-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:0 0 18px; }
.billing-summary-card { display:flex; gap:12px; align-items:center; padding:16px; border:1px solid var(--border); background:#fff; border-radius:16px; box-shadow:var(--shadow-sm); min-width:0; }
.billing-summary-card .ico { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); flex:none; }
.billing-summary-card .ico svg { width:20px; height:20px; }
.billing-summary-card span:not(.ico) { display:block; color:var(--muted); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; }
.billing-summary-card b { display:block; margin-top:3px; color:var(--text); font-family:var(--font-display); font-size:22px; line-height:1.08; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.billing-summary-card.due { border-color:var(--primary-soft-2); background:linear-gradient(135deg,#fff,#f7faff); }
.billing-summary-card.due b { color:var(--primary-700); }
.invoice-list-card .card-head { align-items:flex-start; gap:12px; }
.invoice-list-card .card-head .small { line-height:1.45; }
.invoice-number-cell b { display:block; color:var(--text); }
.invoice-mobile-list { display:none; }
.invoice-mobile-card { display:grid; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
.invoice-mobile-card:last-child { border-bottom:0; padding-bottom:0; }
.im-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.im-head b { display:block; color:var(--text); font-family:var(--font-display); font-size:14.5px; }
.im-head span:not(.badge) { display:block; color:var(--muted); font-size:12.5px; margin-top:3px; }
.im-meta { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 18px; }
.im-meta span { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.im-meta b { justify-self:end; color:var(--text-2); font-size:13px; font-weight:800; text-align:right; min-width:0; }
.amount-row { display:flex; align-items:center; gap:10px; }
.amount-row .cur { font-weight:900; color:var(--primary-700); font-size:20px; }
.preset-row { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 14px; }
.billing-method-card { display:flex; gap:12px; align-items:flex-start; padding:13px; border:1px solid var(--border); border-radius:13px; background:var(--bg-soft); margin-bottom:16px; }
.billing-method-card .ico { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#fff; color:var(--primary); box-shadow:var(--shadow-sm); flex:none; }
.billing-method-card .ico svg { width:18px; height:18px; }
.billing-method-card b { display:block; color:var(--text); font-family:var(--font-display); font-size:14px; }
.billing-method-card span:not(.ico) { color:var(--muted); font-size:12.5px; line-height:1.45; }
.invoice-list-table .dom small { margin-top:3px; }
.invoice-action { display:flex; justify-content:flex-end; }
.admin-invoice-filters { align-items:stretch; }
.admin-invoice-filters .seg { align-self:center; }
.invoice-search-form { display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap; }
.invoice-search-form input[type=search] { min-width:280px; padding:9px 13px; border:1px solid var(--border-2); border-radius:9px; background:#fff; font-size:13.5px; color:var(--text); }
.admin-invoice-card .card-head { align-items:flex-start; gap:12px; }
.admin-invoice-card .card-head .small { font-size:12.5px; color:var(--muted); line-height:1.45; }
.admin-invoice-table .client-cell a { color:var(--text); }
.admin-invoice-table .client-cell a:hover { color:var(--primary); }
.admin-invoice-table .late-note { display:block; margin-top:3px; color:#b91c1c; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.admin-invoice-mobile-list { display:none; }
.admin-invoice-mobile-card { display:grid; gap:14px; padding:16px 0; border-bottom:1px solid var(--border); }
.admin-invoice-mobile-card:last-child { border-bottom:0; padding-bottom:0; }
.aim-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.aim-head b { display:block; color:var(--text); font-family:var(--font-display); font-size:14.5px; }
.aim-head span:not(.badge) { display:block; color:var(--muted); font-size:12.5px; margin-top:3px; overflow-wrap:anywhere; }
.aim-meta { display:grid; grid-template-columns:auto minmax(0,1fr); gap:8px 18px; }
.aim-meta span { color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.aim-meta b { justify-self:end; color:var(--text-2); font-size:13px; font-weight:800; text-align:right; min-width:0; }

/* Admin client credit */
.admin-credit-card { overflow:hidden; }
.admin-credit-balance { display:flex; align-items:center; gap:13px; padding:15px; border:1px solid var(--primary-soft-2); border-radius:15px; background:linear-gradient(135deg,#fff,#f7faff); margin-bottom:14px; }
.admin-credit-balance .ico { width:44px; height:44px; border-radius:13px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary); flex:none; }
.admin-credit-balance .ico svg { width:21px; height:21px; }
.admin-credit-balance span:not(.ico) { display:block; color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.admin-credit-balance b { display:block; color:var(--primary-700); font-family:var(--font-display); font-size:28px; line-height:1.05; margin-top:2px; }
.admin-credit-note { color:var(--muted); font-size:12.5px; line-height:1.55; margin-bottom:14px; }
.admin-credit-presets { margin-top:-6px; }
.admin-ledger-list { display:grid; gap:0; border-top:1px solid var(--border); margin-top:16px; padding-top:8px; }
.admin-ledger-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.admin-ledger-row:last-child { border-bottom:0; }
.admin-ledger-row b { display:block; color:var(--text); font-size:13px; font-family:var(--font-display); }
.admin-ledger-row span { display:block; color:var(--muted); font-size:12px; line-height:1.4; margin-top:2px; }
.admin-ledger-row strong { flex:none; font-size:13px; font-weight:900; }
.admin-ledger-row strong.credit { color:var(--green-600); }
.admin-ledger-row strong.debit { color:var(--text-2); }

/* Referrals */
.ref-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr); gap:22px; align-items:start; }
.ref-main, .ref-side { display:grid; gap:22px; }
.ref-hero { display:flex; align-items:stretch; justify-content:space-between; gap:18px; overflow:hidden; background:linear-gradient(135deg,#eff4ff,#f8fbff); border-color:var(--primary-soft-2); }
.ref-hero .ey { display:inline-flex; align-items:center; gap:7px; width:max-content; padding:5px 10px; border-radius:999px; background:#fff; color:var(--primary-700); font-size:11.5px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; margin-bottom:12px; }
.ref-hero .ey svg { width:14px; height:14px; }
.ref-hero h2 { font-size:28px; line-height:1.12; max-width:520px; margin-bottom:9px; color:var(--text); }
.ref-hero p { color:var(--text-3); font-size:14px; line-height:1.65; max-width:620px; }
.ref-code-card { min-width:170px; display:grid; place-items:center; align-content:center; gap:6px; padding:18px; border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow:var(--shadow-sm); text-align:center; }
.ref-code-card span { color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.ref-code-card b { color:var(--primary-700); font-family:var(--font-display); font-size:23px; letter-spacing:.08em; }
.ref-link-box { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:13px; background:var(--bg-soft); }
.ref-link-box code { flex:1; min-width:0; color:var(--primary-700); font-size:13px; font-family:ui-monospace, Menlo, monospace; overflow-wrap:anywhere; }
.ref-note { display:flex; align-items:center; gap:8px; color:var(--text-3); font-size:12.5px; line-height:1.5; margin-top:12px; }
.ref-note svg { width:15px; height:15px; color:var(--primary); flex:none; }
.ref-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ref-mobile-list { display:none; }
.ref-earnings-card .paid-mark { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; background:rgba(37,99,235,.12); color:var(--primary); margin-bottom:12px; }
.ref-earnings-card .paid-mark svg { width:22px; height:22px; }
.ref-earned { color:var(--green-600); font-family:var(--font-display); font-size:38px; font-weight:900; line-height:1; margin-bottom:8px; }
.ref-earnings-card p { color:var(--muted); font-size:13px; line-height:1.55; margin-bottom:16px; }
.ref-steps { display:grid; gap:14px; counter-reset:none; }
.ref-steps li { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; align-items:start; }
.ref-steps li span { grid-row:span 2; width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--primary-soft); color:var(--primary-700); font-weight:900; font-family:var(--font-display); }
.ref-steps li b { color:var(--text); font-size:13.5px; }
.ref-steps li em { color:var(--muted); font-size:12.5px; font-style:normal; line-height:1.45; }
.ref-mobile-card { display:grid; gap:10px; padding:15px 0; border-bottom:1px solid var(--border); }
.ref-mobile-card:last-child { border-bottom:0; padding-bottom:0; }
.ref-mobile-card b { display:block; color:var(--text); font-family:var(--font-display); }
.ref-mobile-card span:not(.badge) { display:block; color:var(--muted); font-size:12.5px; overflow-wrap:anywhere; }
.ref-mobile-meta { display:flex; justify-content:space-between; gap:14px; align-items:center; }
.ref-mobile-meta span { color:var(--muted); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; }
.ref-mobile-meta b { color:var(--text-2); font-size:13px; }

@media (max-width: 980px) {
  .invoice-meta-grid, .invoice-steps { grid-template-columns: 1fr; }
  .invoice-pay-card { position: static; }
  .billing-summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ref-grid { grid-template-columns:1fr; }
  .ref-side { grid-template-columns:1fr 1fr; }
  .admin-billing-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .billing-summary-grid { grid-template-columns:1fr; }
  .billing-summary-card { width:100%; }
  .billing-summary-card span:not(.ico), .billing-summary-card b { white-space:normal; }
  .wallet-hero, .billing-method-card, .invoice-list-card { overflow:hidden; }
  .wallet-hero p, .billing-method-card span:not(.ico), .invoice-list-card .card-head .small, .pay-note { overflow-wrap:anywhere; }
  .invoice-list-card .card-head { flex-direction:column; align-items:flex-start; }
  .invoice-action { justify-content:flex-start; }
  table.invoice-list-table { display:none; }
  .invoice-mobile-list { display:grid; }
  .invoice-list-table, .invoice-list-table thead, .invoice-list-table tbody, .invoice-list-table tr, .invoice-list-table td { display:block; width:100%; }
  .invoice-list-table thead { display:none; }
  .invoice-list-table tr { padding:14px 0; border-bottom:1px solid var(--border); }
  .invoice-list-table tr:last-child { border-bottom:0; }
  .invoice-list-table td { border-bottom:0; padding:5px 0; }
  .invoice-list-table td:nth-child(2)::before { content:"Issued"; }
  .invoice-list-table td:nth-child(3)::before { content:"Due"; }
  .invoice-list-table td:nth-child(4)::before { content:"Total"; }
  .invoice-list-table td:nth-child(5)::before { content:"Status"; }
  .invoice-list-table td:nth-child(n+2):nth-child(-n+5) { display:grid; grid-template-columns:minmax(74px,auto) minmax(0,1fr); gap:14px; align-items:center; text-align:right; }
  .invoice-list-table td:nth-child(n+2):nth-child(-n+5)::before { color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; text-align:left; }
  .invoice-list-table td:nth-child(n+2):nth-child(-n+5) > * { justify-self:end; min-width:0; max-width:100%; text-align:right; }
  .invoice-list-table .invoice-action { padding-top:10px; }
  .invoice-list-table .invoice-action .btn { width:100%; justify-content:center; }
  .billing-method-card { align-items:flex-start; }
  .wallet-balance .amount { font-size:40px; }
  .pay-note { align-items:flex-start; }
  .ref-hero { flex-direction:column; }
  .ref-code-card { width:100%; min-width:0; }
  .ref-link-box { flex-direction:column; align-items:stretch; }
  .ref-link-box .btn { width:100%; justify-content:center; }
  .ref-metrics, .ref-side { grid-template-columns:1fr; }
  .ref-table { display:none; }
  .ref-mobile-list { display:grid; }
  .admin-invoice-filters { display:grid; gap:12px; }
  .admin-invoice-filters .seg { overflow-x:auto; padding-bottom:2px; }
  .invoice-search-form { margin-left:0; width:100%; }
  .invoice-search-form input[type=search] { min-width:0; width:100%; }
  .invoice-search-form .btn { flex:1; justify-content:center; }
  .admin-billing-summary { grid-template-columns:1fr; }
  table.admin-invoice-table { display:none; }
  .admin-invoice-mobile-list { display:grid; }
  .admin-invoice-card .card-head { flex-direction:column; }
  .admin-credit-balance { align-items:flex-start; }
  .admin-credit-balance b { font-size:24px; }
  .admin-ledger-row { align-items:flex-start; }
  .admin-ledger-row strong { padding-top:2px; }
}

/* Auth pages */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-aside { background: var(--grad-cta); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-aside::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.12) 1px, transparent 0); background-size: 30px 30px; opacity:.5; }
.auth-aside .brand { color: #fff; position: relative; }
.auth-aside .pitch { position: relative; }
.auth-aside .pitch h2 { color: #fff; font-size: 32px; line-height: 1.2; margin-bottom: 16px; }
.auth-aside .pitch p { color: rgba(255,255,255,.9); font-size: 16px; max-width: 420px; }
.auth-aside .feats { position: relative; display: grid; gap: 12px; margin-top: 26px; }
.auth-aside .feats li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; }
.auth-aside .feats svg { width: 18px; height: 18px; }
.auth-main { display: grid; place-items: center; padding: 40px 24px; background: var(--bg-soft); }
.auth-card { width: 100%; max-width: 420px; }
.auth-card .brand-m { display: none; }
.auth-card h1 { font-size: 26px; margin-bottom: 6px; }
.auth-card .lead { color: var(--muted); font-size: 15px; margin-bottom: 26px; }
.auth-card .pfield { margin-bottom: 16px; }
.auth-card .alt { text-align: center; margin-top: 20px; font-size: 14px; color: var(--muted); }
.auth-card .alt a { color: var(--primary); font-weight: 700; }
@media (max-width: 860px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .pform .row, .pform .row-3 { grid-template-columns: 1fr; }
}