/* Wassuply app surfaces: customer portal (/portal/), agency console (/agency/) and
   affiliate portal (/affiliates/portal/), in the home page's keyplate system.

   Loaded after each app's own inline <style>, so it is a skin over the existing
   class names: no markup or script depends on it. Rules are prefixed with :root to
   outrank the inline sheet, and use !important only where the inline sheet (or an
   inline style attribute) already does. The apps' own tokens are remapped first,
   so their remaining rules pick up the new palette too. */

:root{
  --ink:#0A0A0F; --lime:#39FF14; --lime-h:#2EE810; --lime-a:#25D400; --lime-deep:#1A8917;
  --elevated:#EBEBF5; --line:#E2E2EE; --body:#4E4E6A;
  --panel:#09090E; --panel2:#0F0F18; --panel-line:#202035; --panel-text:#F0F0FF; --panel-muted:#8888AA;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --sh-sm:2px 2px 0 var(--ink); --sh:3px 3px 0 var(--ink); --sh-lg:4px 4px 0 var(--ink); --sh-xl:6px 6px 0 var(--ink);

  /* the apps' own names */
  --accent:#39FF14; --accent-h:#1A8917; --text:#0A0A0F; --muted:#5E5E7C; --faint:#8C8CAA;
  --bg:#F5F5FB; --white:#FFFFFF; --border:#E2E2EE; --surface:#F7F7FC;
  --font:'Inter',-apple-system,'Segoe UI',sans-serif;
  --green:#1A8917; --green-bg:#E6FFDC; --amber:#B45309; --amber-bg:#FFF3E0;
  --red:#DC2626; --red-bg:#FFECEC; --blue:#1D4ED8; --blue-bg:#E8EEFF; --orange:#C2410C;
}

:root body{font-family:var(--font);background:var(--bg);color:var(--ink);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
::selection{background:var(--lime);color:var(--ink)}
:root :focus-visible{outline:2px solid var(--lime-a);outline-offset:3px}
:root code,:root .key,:root .ref-code{font-family:var(--mono)}

/* ── Top bar ── */
:root .a-topbar{background:var(--panel);border-bottom:2px solid var(--ink);padding:0 20px}
:root .a-topbar .a-logo,:root .a-logo{color:var(--panel-text);font-size:16px;font-weight:800;letter-spacing:-.04em}
:root .a-topbar .a-logo img{height:26px}
:root .a-admin-badge{margin-left:4px;padding:3px 8px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  background:var(--lime);color:var(--ink);border:1.5px solid var(--lime);border-radius:6px}
:root .a-user-name{font-family:var(--mono);font-size:12px;color:var(--panel-muted)}
:root .a-logout-btn{padding:8px 14px;font-size:13px;font-weight:650;color:var(--panel-text);background:var(--panel2);
  border:1.5px solid var(--panel-line);border-radius:10px;transition:border-color .15s,background .15s}
:root .a-logout-btn:hover{border-color:var(--lime);background:#15151F;color:#fff}
:root .a-burger{background:var(--panel2);border:1.5px solid var(--panel-line);border-radius:10px;color:#fff}
:root .a-burger:hover{border-color:var(--lime);background:#15151F}

/* ── Sidebar ── */
:root .a-sidebar{background:#fff;border-right:2px solid var(--ink);padding:14px 12px}
:root .a-nav-group{padding:14px 10px 8px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;color:var(--faint)}
:root .a-nav-item{gap:10px;margin:0 0 4px;padding:10px 12px;font-size:14px;font-weight:600;color:var(--body);
  border:2px solid transparent!important;border-radius:10px;transition:background .15s,color .15s,box-shadow .15s}
:root .a-nav-item:hover{color:var(--ink);background:var(--elevated)}
:root .a-nav-item.active{color:var(--ink)!important;font-weight:750;background:var(--lime)!important;
  border:2px solid var(--ink)!important;box-shadow:var(--sh-sm)}
:root .a-sidebar-footer{border-top:2px solid var(--line);padding:10px 0 0}
:root .a-nav-overlay{background:rgba(10,10,15,.45);backdrop-filter:blur(2px)}

/* ── Content area ── */
:root .a-content{max-width:1080px;padding:32px 32px 72px}
:root .a-section-header{margin-bottom:22px}
:root .a-section-title{font-size:clamp(24px,2.6vw,30px);font-weight:800;letter-spacing:-.045em;line-height:1.05;font-variation-settings:'opsz' 32}
:root .a-section-title .sub{display:block;margin-top:6px;font-size:14px;font-weight:500;letter-spacing:0;color:var(--muted)}

/* ── Sign-in, set-password, pending and loading screens ── */
:root .p-auth-wrap,:root .a-splash{padding:40px 16px;
  background:radial-gradient(560px 340px at 50% 32%,rgba(57,255,20,.15),transparent 70%),
             radial-gradient(circle at 1px 1px,rgba(10,10,15,.11) 1px,transparent 1.6px) 0 0/22px 22px,var(--bg)}
:root .p-auth-card,:root .a-auth-card{max-width:440px;padding:36px 34px;background:#fff;border:2px solid var(--ink)!important;
  border-radius:22px;box-shadow:var(--sh-xl)!important}
:root .p-auth-card h1,:root .a-auth-card h1{font-size:clamp(26px,4vw,32px);font-weight:800;letter-spacing:-.05em;line-height:1.02;
  font-variation-settings:'opsz' 32;text-wrap:balance;margin-bottom:8px}
:root .p-auth-card .sub,:root .a-auth-card .sub{font-size:15px;line-height:1.55;color:var(--muted)}
:root .a-auth-card .brand{font-size:18px;font-weight:800;letter-spacing:-.04em}
:root .a-splash-logo span{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
:root .a-dot{background:var(--lime);border:2px solid var(--ink)}
:root input[type=checkbox]{accent-color:var(--lime-deep)!important}

/* ── Cards ── */
:root .p-card,:root .a-card{background:#fff;border:2px solid var(--ink)!important;border-radius:18px;box-shadow:var(--sh-lg)!important;padding:24px 26px}
:root .a-card[style*="padding:0"]{overflow:hidden}
:root .p-card h2,:root .a-card h2{font-size:18px;font-weight:800;letter-spacing:-.035em;line-height:1.15;font-variation-settings:'opsz' 32}
:root .a-card h2 .sub{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
:root .p-card .desc{font-size:14px;line-height:1.6;color:var(--muted)}
:root .p-card-note{color:var(--muted)}

/* Form labels: mono, like the buy modal */
:root .pf label,:root .af label,:root .pv-label,
:root :is(.p-card,.a-card,.p-auth-card,.a-auth-card) label:not(:has(input)){
  font-family:var(--mono)!important;font-size:11px!important;font-weight:700!important;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}

/* ── Stat tiles ── */
:root .p-stats,:root .a-stats{gap:14px}
:root .p-stat,:root .a-stat{background:#fff;border:2px solid var(--ink)!important;border-radius:14px!important;box-shadow:var(--sh)!important;
  transition:transform .15s var(--ease,ease),box-shadow .15s ease!important}
:root .p-stat:hover,:root .a-stat:hover{transform:translate(-1px,-1px)!important;box-shadow:var(--sh-lg)!important}
:root .p-stat-val,:root .a-stat-val,:root .p-bal-val{font-weight:800;letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 32}
:root .p-stat-lbl,:root .a-stat-lbl{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
:root .p-stat.green{background:var(--lime)}
:root .p-stat.green .p-stat-val{color:var(--ink)}
:root .p-stat.green .p-stat-lbl{color:rgba(10,10,15,.72)}
:root .a-stat-foot{border-top:1.5px dashed var(--line)!important}

/* Plan hero + status pill */
:root .p-plan-name{font-size:clamp(26px,4vw,36px);font-weight:800;letter-spacing:-.05em;font-variation-settings:'opsz' 32}
:root .p-plan-sub{font-size:14px;color:var(--muted)}
:root .p-status{padding:5px 10px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.1em;border:1.5px solid var(--ink)!important;border-radius:8px}
:root .p-status.active{background:var(--lime);color:var(--ink)}

/* ── Tags and badges ── */
:root .p-badge-tag,:root .tag,:root .chip,:root .p-badge{padding:3px 8px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  border:1.5px solid var(--ink)!important;border-radius:7px}
:root .key{display:inline-block;line-height:1.35;vertical-align:middle;font-size:12px;background:var(--bg);border:1.5px solid var(--ink);border-radius:7px;padding:2px 8px;transition:background .15s}
/* agency: the "license assigned" result under the assign form */
:root #m-key{background:#F1FFE9!important;border:2px solid var(--ink)!important;border-radius:12px!important;box-shadow:3px 3px 0 var(--lime-a);line-height:1.7}
:root .key:hover{background:var(--lime);border-color:var(--ink)}
:root .ref-code{display:inline-block;font-size:18px;font-weight:800;letter-spacing:.08em;background:var(--lime);border:2px solid var(--ink);border-radius:10px;box-shadow:var(--sh-sm)}

/* ── Buttons: lime keycap ── */
:root :is(.p-btn-primary,.a-btn-primary,.p-btn-sm.green,.a-btn.green,.p-copy-btn,.mk-copy-btn){
  background:var(--lime);color:var(--ink);font-weight:700;letter-spacing:-.01em;
  border:2px solid var(--ink)!important;border-radius:12px!important;box-shadow:var(--sh)!important;
  transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease!important}
:root :is(.p-btn-primary,.a-btn-primary,.p-btn-sm.green,.a-btn.green,.p-copy-btn,.mk-copy-btn):hover{
  background:var(--lime-h);transform:translate(1px,1px)!important;box-shadow:2px 2px 0 var(--ink)!important}
:root :is(.p-btn-primary,.a-btn-primary,.p-btn-sm.green,.a-btn.green,.p-copy-btn,.mk-copy-btn):active{
  background:var(--lime-a);transform:translate(3px,3px)!important;box-shadow:0 0 0 var(--ink)!important}
:root .p-btn-primary,:root .a-btn-primary{padding:14px 18px;font-size:15.5px}

/* small sizes */
:root .p-btn-sm{min-height:38px;padding:9px 14px;font-size:13.5px;font-weight:650}
:root :is(.p-btn-sm,.a-btn.sm,.a-btn.xs,.p-copy-btn,.mk-copy-btn){border-radius:10px!important;box-shadow:var(--sh-sm)!important}
:root :is(.p-btn-sm,.a-btn.sm,.a-btn.xs,.p-copy-btn,.mk-copy-btn):hover{transform:translate(1px,1px)!important;box-shadow:1px 1px 0 var(--ink)!important}
:root :is(.p-btn-sm,.a-btn.sm,.a-btn.xs,.p-copy-btn,.mk-copy-btn):active{transform:translate(2px,2px)!important;box-shadow:0 0 0 var(--ink)!important}
:root .mk-copy-btn{padding:8px 14px;font-size:12.5px}

/* dark keycap: ink face, lime shadow */
:root :is(.p-btn-sm.dark,.a-btn.dark){background:var(--ink);color:#fff;border-color:var(--ink)!important;box-shadow:2px 2px 0 var(--lime-a)!important}
:root :is(.p-btn-sm.dark,.a-btn.dark):hover{background:#1A1A24;box-shadow:1px 1px 0 var(--lime-a)!important}
:root :is(.p-btn-sm.dark,.a-btn.dark):active{box-shadow:0 0 0 var(--lime-a)!important}

/* white keycap */
:root :is(.p-btn-sm.outline,.a-btn.outline){background:#fff!important;color:var(--ink)!important;border-color:var(--ink)!important}
:root :is(.p-btn-sm.outline,.a-btn.outline):hover{background:var(--elevated)!important}

/* destructive */
:root :is(.p-btn-sm.danger,.a-btn.red){background:#FFF5F5;color:#C81E1E;border-color:var(--red)!important;box-shadow:2px 2px 0 var(--red)!important}
:root :is(.p-btn-sm.danger,.a-btn.red):hover{background:#FFE8E8;box-shadow:1px 1px 0 var(--red)!important}
:root :is(.p-btn-sm.danger,.a-btn.red):active{box-shadow:0 0 0 var(--red)!important}

/* save feedback states keep a readable face */
:root :is(.p-btn-sm,.p-btn-primary).fb-ok{background:var(--lime)!important;color:var(--ink)!important}

:root .p-link-btn{color:var(--lime-deep);font-weight:700;text-decoration:underline;text-decoration-color:var(--lime);text-decoration-thickness:2px;text-underline-offset:3px}
:root .p-link-btn:hover{color:var(--ink)}

/* ── Inputs ── */
:root :is(.pf,.af,.p-card,.a-card,.p-auth-card,.a-auth-card,.p-form-row,.utm-fields,.pv-keyrow,.tkt-reply-row,.a-search,.a-filters)
  :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select){
  color:var(--ink);background-color:#fff!important;border:2px solid var(--ink)!important;border-radius:12px!important;
  transition:box-shadow .15s ease,background-color .15s ease}
:root :is(.pf,.af,.p-card,.a-card,.p-auth-card,.a-auth-card,.p-form-row,.utm-fields,.pv-keyrow,.tkt-reply-row,.a-search,.a-filters)
  :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select):focus{
  outline:none!important;border-color:var(--ink)!important;box-shadow:3px 3px 0 var(--lime-a)!important}
:root :is(input,textarea)::placeholder{color:#9A9AB8}
:root textarea[readonly]{background-color:var(--bg)!important}
:root #o-gift{font-family:var(--mono)!important;letter-spacing:.04em}
/* portal profile: stacked fields, so the save button sits under them rather than beside the last one */
:root .p-card input[style*="max-width:440px"]{display:block}
:root #o-gift-wrap{background:var(--bg);border:2px dashed #C9C9DC!important;border-radius:14px!important}

/* custom selects (native <select> enhanced into .a-select by the app) */
:root .a-select-trigger{background:#fff;border:2px solid var(--ink)!important;border-radius:12px!important;min-height:46px;font-weight:550}
:root .a-select-trigger:hover{background:var(--surface)}
:root .a-select.open .a-select-trigger,:root .a-select-trigger:focus-visible{background:#fff;border-color:var(--ink)!important;outline:none;box-shadow:3px 3px 0 var(--lime-a)!important}
:root .a-select .a-dd-chev{color:var(--ink);font-size:13px;opacity:1}
:root .a-dd-menu{padding:6px;background:#fff;border:2px solid var(--ink)!important;border-radius:14px!important;box-shadow:var(--sh-lg)!important}
:root .a-dd-item{border-radius:9px;font-weight:550}
:root .a-dd-item:hover{background:var(--elevated)}
:root .a-dd-item.active{background:var(--lime);font-weight:700}

/* ── Tables ── */
:root .p-table th,:root .a-table th{padding:11px 12px;font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--bg);border-bottom:2px solid var(--ink)!important;white-space:nowrap}
:root .p-table td,:root .a-table td{padding:13px 12px;font-size:14px;border-bottom:1px solid var(--line)}
:root .p-table tbody tr:hover td,:root .a-table tbody tr:hover td{background:#FAFAFE}
:root .p-empty,:root .a-empty{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--faint)}
:root .a-kv{border-bottom:1px solid var(--line)}
:root .a-kv .k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-self:center}

/* ── Banners ── */
:root .p-info{background:#F1FFE9;color:var(--ink);border:2px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--lime-a);font-size:14px}
:root .p-warn{background:#FFF4E5;color:#7C2D12;border:2px solid var(--ink);border-radius:14px;box-shadow:var(--sh-sm)}
:root .p-ann{border-width:2px!important;border-color:var(--ink)!important;border-radius:14px;box-shadow:var(--sh)}

/* ── Progress ── */
:root .p-progress-track,:root .a-bar{height:14px!important;background:#fff!important;border:2px solid var(--ink)!important;border-radius:100px;overflow:hidden}
:root .p-progress-bar,:root .a-bar>i{background:var(--lime)!important;border-radius:0;border-right:2px solid var(--ink)}
:root .p-progress-label{font-family:var(--mono);font-size:12px}

/* ── Support tickets ── */
:root .tkt-card{background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:var(--sh);padding:18px 20px}
:root .tkt-card:hover{border-color:var(--ink)}
:root .tkt-subject,:root .tkt-card-subject{font-size:15px;font-weight:750;letter-spacing:-.02em}
:root .tkt-meta,:root .tkt-card-meta{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted)}
:root .tkt-msg{border-radius:14px;padding:12px 16px}
:root .tkt-msg.mine{background:#F1FFE9;border:1.5px solid var(--ink);border-bottom-right-radius:4px}
:root .tkt-msg.reply{background:var(--bg);border:1.5px solid var(--ink);border-bottom-left-radius:4px}
:root .tkt-msg-h,:root .tkt-msg-header{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
:root .tkt-rate{border-top:2px dashed var(--line)}

/* ── Affiliate portal ── */
:root .p-reflink{background:var(--bg);border:2px solid var(--ink)!important;border-radius:14px}
:root .p-reflink code{font-size:13.5px;font-weight:600}
:root .p-bal-hero{padding:26px 28px;border:2px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--lime-a);
  background:radial-gradient(420px 220px at 88% 0%,rgba(57,255,20,.22),transparent 70%),var(--panel)}
:root .p-bal-val{color:var(--lime)}
:root .p-bal-lbl{margin-top:8px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--panel-muted)}
:root .p-feed-item{border-bottom:1px solid var(--line)}
:root .p-feed-dot{width:12px;height:12px;border-radius:4px;border:2px solid var(--ink);margin-top:4px}
:root .p-feed-dot.green{background:var(--lime)}
:root .p-feed-dot.blue{background:#6E9BFF}
:root .p-feed-dot.orange{background:#FFA94D}
:root .p-feed-title{font-weight:650}
:root .p-feed-sub{font-family:var(--mono);font-size:11px;letter-spacing:.03em}
:root .utm-result{font-family:var(--mono);font-size:12.5px;background:var(--bg);border:2px dashed var(--ink);border-radius:12px}
:root .mk-copy-block{background:var(--bg);border:2px solid var(--ink);border-radius:14px;padding:18px 20px}
:root .mk-copy-block h3{font-size:15px;font-weight:750;letter-spacing:-.02em}
:root .mk-copy-block pre{font-family:var(--mono);font-size:12.5px;color:var(--body)}
:root .p-faq-item{background:#fff;border:2px solid var(--ink)!important;border-radius:14px;box-shadow:var(--sh-sm)}
:root .p-faq-item h3{font-size:15px;font-weight:750;letter-spacing:-.02em}
:root .p-faq-item p{color:var(--body)}
:root .p-divider{height:2px;background:var(--line)}

/* ── Customer portal: phone verification ── */
:root .pv-drop{border:2px dashed var(--ink);border-radius:16px;background:var(--bg)}
:root .pv-drop:hover,:root .pv-drop.over,:root .pv-drop:focus-visible{background:#F1FFE9;border-style:solid}
:root .pv-drop-t{font-size:15px;font-weight:750;letter-spacing:-.01em}
:root .pv-drop-s{font-family:var(--mono);font-size:11.5px}
:root .pv-steps{color:var(--body)}
:root .pv-grid{align-items:end}

/* ── Toasts ── */
:root .p-toast-item,:root .a-toast-item{padding:11px 16px;font-size:13.5px;font-weight:650;background:var(--ink);color:#fff;
  border:2px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--lime-a)}
:root .p-toast-item.ok,:root .a-toast-item.ok{background:var(--lime);color:var(--ink);box-shadow:var(--sh)}
:root .p-toast-item.err,:root .a-toast-item.err{background:var(--red);color:#fff;box-shadow:var(--sh)}

/* ── Confirm dialog (built by the portal's script with inline styles) ── */
:root div:has(> div > .pc-ok){border:2px solid var(--ink)!important;border-radius:20px!important;box-shadow:var(--sh-xl)!important;padding:24px!important}
:root div:has(> div > .pc-ok) > div:first-child{font-size:19px!important;font-weight:800!important;letter-spacing:-.035em}
:root .pc-ok,:root .pc-cancel{padding:10px 16px!important;border:2px solid var(--ink)!important;border-radius:10px!important;box-shadow:var(--sh-sm);
  font-family:var(--font);font-size:14px;transition:transform .12s ease,box-shadow .12s ease}
:root .pc-ok{background:var(--lime)!important;color:var(--ink)!important}
:root .pc-ok[style*="e5484d"]{background:var(--red)!important;color:#fff!important}
:root .pc-cancel{background:#fff!important}
:root :is(.pc-ok,.pc-cancel):hover{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}

/* ── Older tab bar (kept for any page still using it) ── */
:root .p-tabs-bar,:root .p-topbar{border-bottom:2px solid var(--ink)!important}
:root .p-tab.active{border-bottom-color:var(--lime)}

/* ── Phones ── */
@media (max-width:768px){
  :root .a-topbar{padding:0 12px}
  :root .a-sidebar{border-right:2px solid var(--ink);box-shadow:none}
  :root .a-sidebar.open{box-shadow:6px 0 0 rgba(10,10,15,.14)}
  :root .a-content{padding:20px 16px 56px}
}
@media (max-width:520px){
  :root .a-user-name{display:none!important}
  :root .a-logout-btn{white-space:nowrap}
}
@media (max-width:640px){
  :root .p-card,:root .a-card{padding:20px 18px;border-radius:16px;box-shadow:var(--sh)!important}
  :root .p-auth-card,:root .a-auth-card{padding:28px 22px;box-shadow:var(--sh-lg)!important}
  :root .p-stat,:root .a-stat{box-shadow:var(--sh-sm)!important}
  :root .p-table th,:root .a-table th{padding:9px 8px}
  :root .p-table td,:root .a-table td{padding:11px 8px;font-size:13px}
  :root .p-bal-hero{padding:22px 20px;box-shadow:4px 4px 0 var(--lime-a)}
}