/* ============================================================
   PapilioHost CONSOLE — client-area design layer (v300)
   Loaded after papilio.css, scoped to body.pc (logged-in pages).
   Same tokens, type and components as metal.papiliohost.com so the
   site, the Metal panel and the client area read as ONE product.
   ============================================================ */
@font-face{font-family:'Plus Jakarta Sans';src:url(../fonts/plusjakarta.woff2) format('woff2');font-weight:300 800;font-display:swap}
@font-face{font-family:'Clash Display';src:url(../fonts/clash-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Clash Display';src:url(../fonts/clash-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Clash Display';src:url(../fonts/clash-700.woff2) format('woff2');font-weight:700;font-display:swap}

body.pc{
  /* ---- tokens (metal) ---- */
  --bg:#05080f; --surface:#080e18; --panel:#0c1422; --panel-2:#111d30; --raise:#17263d; --raise-2:#1f3150;
  --border:rgba(125,211,252,.10); --border-soft:rgba(125,211,252,.06); --border-strong:rgba(125,211,252,.20);
  --text:#e9f4ff; --dim:#8fa3ba; --faint:#5b7189; --ghost:#34475e;
  --accent:#38bdf8; --accent-2:#7dd3fc; --accent-ink:#04121c; --accent-soft:rgba(56,189,248,.12); --accent-line:rgba(56,189,248,.40);
  --ice-1:#bfeeff; --ice-4:#0ea5e9;
  --glow:0 10px 26px -12px rgba(56,189,248,.9);
  --tile:linear-gradient(150deg,rgba(191,238,255,.20),rgba(14,165,233,.10));
  --green:#34d399; --green-soft:rgba(52,211,153,.13);
  --amber:#fbbf24; --amber-soft:rgba(251,191,36,.13);
  --red:#fb7185; --red-soft:rgba(251,113,133,.13);
  --violet:#8aa0ff; --violet-soft:rgba(138,160,255,.14);
  --r-sm:6px; --r:8px; --r-lg:10px; --r-xl:12px;
  --sh-lg:0 16px 48px -16px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.35);
  --font:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Clash Display','Plus Jakarta Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',Consolas,monospace;
  --ease:cubic-bezier(.32,.72,0,1);
  --aside:232px;
  /* bridge the old theme's names so its long tail keeps working */
  --surface-2:var(--panel-2); --surface-3:var(--raise); --text-2:var(--dim); --text-3:var(--faint);
  --brand:var(--accent); --brand-2:var(--ice-4); --body:var(--font); --sans:var(--display);
  --blue-bg:var(--accent-soft); --green-bg:var(--green-soft); --amber-bg:var(--amber-soft); --red-bg:var(--red-soft);
}
html.pl-light body.pc{
  --bg:#f1f6fb; --surface:#ffffff; --panel:#ffffff; --panel-2:#f4f8fc; --raise:#e9f0f8; --raise-2:#dce6f1;
  --border:rgba(2,132,199,.12); --border-soft:rgba(2,132,199,.07); --border-strong:rgba(2,132,199,.20);
  --text:#0b1a2b; --dim:#4a5d73; --faint:#8296ad; --ghost:#c3d0de;
  --accent:#0284c7; --accent-2:#0ea5e9; --accent-ink:#ffffff; --accent-soft:rgba(14,165,233,.11); --accent-line:rgba(14,165,233,.38);
  --glow:0 10px 24px -12px rgba(2,132,199,.7);
  --tile:linear-gradient(150deg,rgba(191,238,255,.55),rgba(14,165,233,.14));
  --green:#12905f; --green-soft:rgba(18,144,95,.10); --amber:#b7791f; --amber-soft:rgba(183,121,31,.12);
  --red:#d92d20; --red-soft:rgba(217,45,32,.09); --violet:#6d4fd8; --violet-soft:rgba(109,79,216,.10);
  --sh-lg:0 16px 48px -20px rgba(16,24,40,.28),0 2px 8px rgba(16,24,40,.08);
}

/* ---- base ---- */
body.pc,body.pc.primary-bg-color{background:radial-gradient(ellipse 70% 50% at 50% -8%,var(--accent-soft),transparent 60%) fixed,var(--bg) !important;
  color:var(--text);font-family:var(--font);font-size:13px;line-height:1.45}
body.pc .pl-app::before,body.pc .pl-app::after{display:none}
body.pc h1,body.pc h2,body.pc h3,body.pc h4{font-family:var(--font);letter-spacing:-.015em;font-weight:600;color:var(--text)}
body.pc a{color:var(--accent)} body.pc a:hover{color:var(--accent-2)}
body.pc .mono,body.pc .num{font-family:var(--mono);font-size:.94em;font-feature-settings:'tnum'}
body.pc ::selection{background:var(--accent-soft);color:var(--text)}
body.pc :focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
body.pc ::-webkit-scrollbar{width:10px;height:10px}
body.pc ::-webkit-scrollbar-thumb{background:var(--raise-2);border-radius:8px;border:3px solid var(--bg);background-clip:padding-box}

/* ---- shell: sidebar ---- */
body.pc .pl-side{width:var(--aside);padding:0;background:linear-gradient(180deg,var(--surface),var(--bg));border-right:1px solid var(--border)}
body.pc .pl-brand{height:52px;padding:0 14px;margin:0;justify-content:flex-start;gap:9px;border-bottom:1px solid var(--border-soft);font-family:var(--display);font-weight:600;font-size:14.5px;letter-spacing:-.01em;color:var(--text)}
body.pc .pl-brand img{height:26px;max-height:26px;width:auto;max-width:none;filter:none}
body.pc .pl-brand:hover img{filter:drop-shadow(0 0 8px rgba(56,189,248,.55))}
body.pc .pl-brand b{color:var(--accent);font-weight:600}
body.pc .pl-side-scroll{flex:1;overflow:auto;padding:8px 10px 10px}
body.pc .pl-navgroup{font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--faint);padding:14px 8px 5px;text-transform:uppercase}
body.pc .pl-side-scroll .pl-navgroup:first-child{padding-top:6px}
body.pc .pl-nav{gap:1px}
body.pc .pl-nav a{display:flex;align-items:center;gap:9px;height:30px;min-height:0;padding:0 8px;border-radius:var(--r-sm);color:var(--dim);font-size:12.5px;font-weight:500;transition:background .15s var(--ease),color .15s var(--ease)}
body.pc .pl-nav a svg{width:15px;height:15px;opacity:1;color:var(--faint);stroke-width:1.7;transition:color .15s var(--ease)}
body.pc .pl-nav a:hover{background:var(--raise);color:var(--text)}
body.pc .pl-nav a:hover svg{color:var(--dim)}
body.pc .pl-nav a.active{background:var(--accent-soft);color:var(--text);font-weight:600;box-shadow:none}
body.pc .pl-nav a.active svg{color:var(--accent)}
body.pc .pl-nav a .pl-badge,body.pc .pl-nav a .pc-count{margin-left:auto;background:var(--raise);color:var(--dim);font-family:var(--mono);font-size:10.5px;font-weight:600;border-radius:4px;padding:1px 6px;line-height:1.5}
body.pc .pl-nav a .pl-badge.hot,body.pc .pl-nav a .pc-count.hot{background:var(--red-soft);color:var(--red)}
body.pc .pl-nav a .pc-count.warm{background:var(--amber-soft);color:var(--amber)}
body.pc .pl-side-user{margin:0;border:0;border-top:1px solid var(--border);border-radius:0;padding:10px 12px;gap:9px}
body.pc .pl-side-user .av{width:26px;height:26px;border-radius:6px;background:var(--raise);color:var(--dim);font-size:11.5px}
body.pc .pl-side-user .av svg{width:14px;height:14px}
body.pc .pl-side-user .nm{font-size:12.5px;font-weight:600}
body.pc .pl-side-user .rl{font-size:11px;color:var(--faint);font-family:var(--mono)}
body.pc .pl-side-user .out{color:var(--faint)} body.pc .pl-side-user .out:hover{color:var(--accent)}
body.pc .pc-tgside{margin:8px 10px 2px;display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px dashed var(--accent-line);border-radius:var(--r);font-size:11.5px;color:var(--dim);text-decoration:none;transition:background .15s var(--ease)}
body.pc .pc-tgside svg{width:14px;height:14px;color:var(--accent)}
body.pc .pc-tgside b{color:var(--text);font-weight:600}
body.pc .pc-tgside:hover{background:var(--accent-soft);color:var(--text)}

/* ---- shell: topbar + content ---- */
body.pc .pl-top{height:48px;padding:0 20px;gap:10px;background:var(--surface);border-bottom:1px solid var(--border);backdrop-filter:none}
body.pc .pl-title{font-family:var(--font);font-weight:600;font-size:13.5px;gap:8px}
body.pc .pl-title-ic{width:24px;height:24px;border-radius:6px;background:var(--accent-soft);border:0;color:var(--accent)}
body.pc .pl-title-ic svg{width:13px;height:13px;stroke-width:1.8}
body.pc .pl-title .pc-crumb{color:var(--faint);font-weight:500}
body.pc .pl-title .pc-crumb svg{width:12px;height:12px;color:var(--ghost);margin:0 2px;vertical-align:-2px}
body.pc .pl-search{max-width:300px;height:30px;padding:0 10px;gap:8px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--faint)}
body.pc .pl-search:hover{border-color:var(--border-strong)}
body.pc .pl-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
body.pc .pl-search svg{width:14px;height:14px}
body.pc .pl-top .pl-search input{font-size:12.5px !important}
body.pc .pl-icbtn{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid rgba(125,211,252,.28);background:transparent;color:var(--dim)}
body.pc .pl-icbtn:hover{background:var(--accent-soft);color:var(--accent-2);border-color:rgba(125,211,252,.48)}
body.pc .pl-icbtn svg{width:15px;height:15px}
body.pc .pl-icbtn .dot{top:6px;right:7px;width:6px;height:6px;background:var(--red)}
body.pc .pl-avatar{width:32px;height:32px;border-radius:var(--r-sm);background:var(--raise);color:var(--dim);font-weight:600;font-size:11px;display:grid;place-items:center}
body.pc .pl-avatar:hover{background:var(--accent-soft);color:var(--accent-2)}
body.pc .pl-avatar svg{width:15px;height:15px}
body.pc .pl-main{overflow-x:hidden}
body.pc .pl-content{padding:20px 24px 56px;max-width:1360px;margin:0 auto;animation:pcfade .25s var(--ease)}
@keyframes pcfade{from{opacity:0}to{opacity:1}}

/* ---- notices: one quiet stack ---- */
body.pc .pc-notices{display:flex;flex-direction:column;gap:8px;margin:0}
body.pc .pc-notices:has(>*){margin-bottom:14px}
body.pc #nmTgBar{margin:0 !important;padding:7px 10px 7px 12px !important;background:var(--accent-soft) !important;border:1px solid var(--accent-line) !important;border-radius:var(--r) !important;font-size:12.5px !important}
body.pc #nmTgBar .i{width:24px;height:24px;border-radius:6px;background:transparent;color:var(--accent)}
body.pc #nmTgBar .t{font-weight:500;color:var(--text) !important}
body.pc #nmTgBar .t small{color:var(--dim);font-size:12px}
body.pc #nmTgBar .b{height:28px;padding:0 11px !important;border-radius:var(--r-sm) !important;font-size:12px !important;border-color:rgba(125,211,252,.4) !important;color:var(--accent-2) !important}
body.pc #nmTgBar .b:hover{background:var(--accent) !important;color:var(--accent-ink) !important}
body.pc .verification-banner,body.pc .verification-banner.email-verification{margin:0 !important;padding:7px 38px 7px 12px !important;border-radius:var(--r) !important;background:var(--amber-soft) !important;border:1px solid color-mix(in srgb,var(--amber) 30%,transparent) !important}
body.pc .verification-banner .text{font-size:12.5px;color:var(--text) !important}
body.pc .verification-banner .btn-resend-verify-email{height:28px;padding:0 11px !important;font-size:12px !important;border-radius:var(--r-sm) !important;border-color:color-mix(in srgb,var(--amber) 45%,transparent) !important;color:var(--amber) !important}
body.pc .verification-banner .close{top:5px !important;right:8px !important;font-size:18px}
body.pc .pl-content>.alert,body.pc .pc-notices .alert{margin:0 !important;padding:8px 12px !important;border-radius:var(--r) !important;font-size:12.5px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--border) !important;background:var(--panel) !important;color:var(--text) !important}
body.pc .alert-warning{border-color:color-mix(in srgb,var(--amber) 30%,transparent) !important;background:var(--amber-soft) !important}
body.pc .alert-danger{border-color:color-mix(in srgb,var(--red) 30%,transparent) !important;background:var(--red-soft) !important}
body.pc .alert-success{border-color:color-mix(in srgb,var(--green) 30%,transparent) !important;background:var(--green-soft) !important}
body.pc .alert-info{border-color:var(--accent-line) !important;background:var(--accent-soft) !important}
body.pc .alert .btn,body.pc .alert a.btn{margin-left:auto;height:28px;padding:0 11px !important;font-size:12px !important;border-radius:var(--r-sm) !important;display:inline-flex;align-items:center}
body.pc .alert p{margin:0}

/* ---- buttons ---- */
body.pc .pc-btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:var(--r-sm);font-weight:600;font-size:12.5px;white-space:nowrap;border:1px solid transparent;cursor:pointer;text-decoration:none !important;font-family:var(--font);line-height:1;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease)}
body.pc .pc-btn:active{transform:translateY(.5px)}
body.pc .pc-btn svg{width:15px;height:15px;stroke-width:1.8}
body.pc .pc-btn.primary{background:linear-gradient(118deg,var(--accent-2),var(--accent));color:var(--accent-ink) !important;box-shadow:var(--glow)}
body.pc .pc-btn.primary:hover{filter:brightness(1.08);box-shadow:0 12px 30px -12px var(--accent);color:var(--accent-ink) !important}
body.pc .pc-btn.secondary{background:rgba(56,189,248,.06);color:var(--accent-2) !important;border-color:rgba(125,211,252,.28)}
body.pc .pc-btn.secondary:hover{background:rgba(56,189,248,.13);border-color:rgba(125,211,252,.48);color:var(--ice-1) !important}
body.pc .pc-btn.ghost{color:var(--dim) !important;background:transparent}
body.pc .pc-btn.ghost:hover{background:var(--accent-soft);color:var(--accent-2) !important}
body.pc .pc-btn.danger{color:var(--red) !important;border-color:color-mix(in srgb,var(--red) 30%,transparent);background:transparent}
body.pc .pc-btn.danger:hover{background:var(--red-soft)}
body.pc .pc-btn.sm{height:28px;padding:0 10px;font-size:12px}
body.pc .pc-btn.lg{height:36px;padding:0 16px;font-size:13px}
body.pc .pc-btn:disabled,body.pc .pc-btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
body.pc .pc-iconbtn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--r-sm);background:transparent;border:1px solid rgba(125,211,252,.28);color:var(--dim);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
body.pc .pc-iconbtn:hover{background:var(--accent-soft);color:var(--accent-2);border-color:rgba(125,211,252,.48)}
body.pc .pc-iconbtn svg{width:14px;height:14px;stroke-width:1.8}
/* map the stock bootstrap buttons onto the same range */
body.pc .btn{height:32px;padding:0 12px !important;border-radius:var(--r-sm) !important;font-weight:600 !important;font-size:12.5px !important;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;font-family:var(--font)}
body.pc .btn-primary,body.pc .btn-info,body.pc .btn-success{background:linear-gradient(118deg,var(--accent-2),var(--accent)) !important;border-color:transparent !important;color:var(--accent-ink) !important;box-shadow:var(--glow)}
body.pc .btn-primary:hover,body.pc .btn-info:hover,body.pc .btn-success:hover{filter:brightness(1.08);color:var(--accent-ink) !important}
body.pc .btn-default,body.pc .btn-secondary,body.pc .btn-outline-secondary,body.pc .btn-light{background:rgba(56,189,248,.06) !important;border:1px solid rgba(125,211,252,.28) !important;color:var(--accent-2) !important;box-shadow:none}
body.pc .btn-default:hover,body.pc .btn-secondary:hover,body.pc .btn-outline-secondary:hover{background:rgba(56,189,248,.13) !important;color:var(--ice-1) !important}
body.pc .btn-danger{background:transparent !important;border:1px solid color-mix(in srgb,var(--red) 30%,transparent) !important;color:var(--red) !important;box-shadow:none}
body.pc .btn-danger:hover{background:var(--red-soft) !important}
body.pc .btn-sm,body.pc .btn-xs{height:28px;padding:0 10px !important;font-size:12px !important}
body.pc .btn-lg{height:36px;padding:0 16px !important;font-size:13px !important}
body.pc .btn-block{width:100%}

/* ---- inputs ---- */
body.pc label,body.pc .control-label,body.pc .form-control-label{display:block;font-size:11.5px;color:var(--dim);margin:0 0 5px;font-weight:500;text-transform:none;letter-spacing:0}
body.pc .form-control,body.pc .custom-select,body.pc textarea,body.pc select,body.pc input[type=text],body.pc input[type=email],body.pc input[type=password],body.pc input[type=number],body.pc input[type=tel]{
  height:32px;background:var(--panel-2) !important;border:1px solid var(--border-strong) !important;color:var(--text) !important;padding:0 10px;border-radius:var(--r-sm) !important;font-size:12.5px;font-family:var(--font);box-shadow:none !important;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
body.pc textarea,body.pc textarea.form-control{height:auto;padding:8px 10px;line-height:1.55;font-family:var(--font)}
body.pc .form-control:focus,body.pc select:focus,body.pc textarea:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-soft) !important;background:var(--panel-2) !important}
body.pc .form-control::placeholder{color:var(--faint)}
body.pc .form-control:disabled,body.pc .form-control[readonly]{opacity:.6;background:var(--panel) !important}
body.pc .input-group-text{background:var(--raise) !important;border-color:var(--border-strong) !important;color:var(--dim) !important;font-size:12px;border-radius:var(--r-sm) !important}
body.pc .form-group{margin-bottom:12px}
body.pc .custom-control-label,body.pc .form-check-label{font-size:12.5px;color:var(--text);font-weight:500}
body.pc .card label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}

/* ---- status: badges, pills, tags ---- */
body.pc .pc-badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.01em;white-space:nowrap;background:var(--raise);color:var(--dim);line-height:1}
body.pc .pc-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
body.pc .pc-badge.green{background:var(--green-soft);color:var(--green)}
body.pc .pc-badge.blue{background:var(--accent-soft);color:var(--accent)}
body.pc .pc-badge.amber{background:var(--amber-soft);color:var(--amber)}
body.pc .pc-badge.red{background:var(--red-soft);color:var(--red)}
body.pc .pc-badge.violet{background:var(--violet-soft);color:var(--violet)}
body.pc .pc-badge.gray{background:var(--raise);color:var(--dim)}
body.pc .pc-badge.pulse::before{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 45%,transparent);animation:pcpulse 1.6s var(--ease) infinite}
@keyframes pcpulse{to{box-shadow:0 0 0 6px transparent}}
body.pc .pc-chip{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:4px;font-size:11px;font-family:var(--mono);background:var(--raise);color:var(--dim);white-space:nowrap}
body.pc .pl-pill,body.pc .status,body.pc .label,body.pc .badge,body.pc .invoice-status-tag{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px !important;border-radius:4px !important;font-size:11px !important;font-weight:600 !important;letter-spacing:.01em;line-height:1;border:0 !important}
body.pc .pl-pill.on,body.pc .status-active,body.pc .status-paid,body.pc .label-success,body.pc .badge-success{background:var(--green-soft) !important;color:var(--green) !important}
body.pc .pl-pill.pend,body.pc .status-pending,body.pc .status-unpaid,body.pc .label-info,body.pc .badge-info,body.pc .badge-primary,body.pc .label-primary{background:var(--accent-soft) !important;color:var(--accent) !important}
body.pc .pl-pill.off,body.pc .status-suspended,body.pc .status-cancelled,body.pc .status-terminated,body.pc .label-default,body.pc .badge-secondary{background:var(--raise) !important;color:var(--dim) !important}
body.pc .status-overdue,body.pc .label-danger,body.pc .badge-danger{background:var(--red-soft) !important;color:var(--red) !important}
body.pc .label-warning,body.pc .badge-warning{background:var(--amber-soft) !important;color:var(--amber) !important}

/* ---- product tile (species art) ---- */
body.pc .pc-tile{width:36px;height:36px;border-radius:9px;flex:none;overflow:hidden;background:var(--tile);box-shadow:inset 0 0 0 1px rgba(125,211,252,.16);display:grid;place-items:center;color:var(--accent)}
body.pc .pc-tile img{width:100%;height:100%;object-fit:cover;display:block}
body.pc .pc-tile.lg{width:56px;height:56px;border-radius:14px}
body.pc .pc-tile.xl{width:88px;height:88px;border-radius:20px}
body.pc .pc-tile svg{width:16px;height:16px;stroke-width:1.7}

/* ---- cards, page heads, section titles ---- */
body.pc .pc-card,body.pc .card{background:var(--panel) !important;border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;box-shadow:none !important;color:var(--text)}
body.pc .pc-card.pad{padding:16px}
body.pc .pc-card+.pc-card{margin-top:12px}
body.pc .card-header,body.pc .panel-heading{padding:11px 16px;font-size:12.5px;font-weight:600;border-bottom:1px solid var(--border) !important;background:transparent !important}
body.pc .card-body{padding:16px;color:var(--text)}
body.pc .pc-pagehead{display:flex;align-items:flex-start;gap:12px;margin:0 0 16px;min-height:32px;flex-wrap:wrap}
body.pc .pc-pagehead h1{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0}
body.pc .pc-pagehead .sub{color:var(--faint);font-size:12.5px;margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.pc .pc-pagehead .sub i.d{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft);display:inline-block}
body.pc .pc-pagehead .actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
body.pc .pl-hello,body.pc h1.pl-hello{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;margin:0 0 16px}
body.pc .pc-sectitle{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:0 0 8px}
body.pc .pc-subhead{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);min-height:42px}
body.pc .pc-subhead h2{font-size:12.5px;font-weight:600;margin:0;display:flex;align-items:center;gap:8px}
body.pc .pc-subhead h2 svg{width:14px;height:14px;color:var(--accent);stroke-width:1.8}
body.pc .pc-subhead .sp{flex:1}
body.pc .pc-subhead a{font-size:12px;font-weight:500;color:var(--dim)}
body.pc .pc-subhead a:hover{color:var(--accent)}
body.pc .pc-subhead .n{font-family:var(--mono);font-size:11px;color:var(--faint);background:var(--raise);padding:1px 6px;border-radius:4px}

/* ---- KPI strip: one card, divided cells ---- */
body.pc .pc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin:0 0 14px}
body.pc .pc-kpi{padding:12px 16px 12px;border-right:1px solid var(--border-soft);min-width:0;position:relative;display:block;color:var(--text);text-decoration:none !important;transition:background .12s var(--ease)}
body.pc .pc-kpi:last-child{border-right:none}
body.pc a.pc-kpi:hover{background:var(--panel-2);color:var(--text)}
body.pc .pc-kpi .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap;display:flex;align-items:center;gap:6px}
body.pc .pc-kpi .k svg{width:13px;height:13px;color:var(--accent);stroke-width:1.8}
body.pc .pc-kpi .v{font-size:20px;font-weight:600;margin-top:5px;letter-spacing:-.02em;font-family:var(--mono);font-feature-settings:'tnum';line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-kpi .v small{font-size:12px;color:var(--faint);font-weight:500;font-family:var(--font);letter-spacing:0;margin-left:4px}
body.pc .pc-kpi .s{font-size:11.5px;color:var(--faint);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-kpi.is-warn .v{color:var(--amber)} body.pc .pc-kpi.is-bad .v{color:var(--red)} body.pc .pc-kpi.is-good .v{color:var(--green)}
body.pc .pc-kpi .spark{display:flex;align-items:flex-end;gap:2px;height:18px;position:absolute;right:16px;bottom:14px;width:48px;opacity:.9}
body.pc .pc-kpi .spark i{flex:1;min-width:2px;min-height:2px;background:var(--accent-line);border-radius:1px 1px 0 0;display:block}
body.pc .pc-kpi .spark i.max{background:var(--accent)}

/* ---- service detail head ---- */
body.pc .pc-dhead{display:flex;align-items:center;gap:14px;margin:0 0 14px;flex-wrap:wrap;min-height:56px}
body.pc .pc-dhead .t{min-width:0;flex:1 1 260px}
body.pc .pc-dhead h1{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0 0 6px}
body.pc .pc-dhead .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px}
body.pc .pc-dhead .meta .dim{color:var(--dim)}
body.pc .pc-dhead .actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
body.pc .pc-facts+.pl-vzc,body.pc .pc-facts+.card{margin-top:0}
@media(max-width:760px){body.pc .pc-dhead .actions{margin-left:0;width:100%}body.pc .pc-dhead .actions .pc-btn{flex:1;justify-content:center}}

/* ---- facts grid (service header) ---- */
body.pc .pc-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border-soft);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin:0 0 16px}
body.pc .pc-fact{background:var(--panel);padding:9px 14px 10px;min-width:0}
body.pc .pc-fact .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
body.pc .pc-fact .v{font-size:12.5px;font-weight:500;color:var(--text);margin-top:3px;line-height:1.35;overflow-wrap:anywhere}
body.pc .pc-fact .v.mono{font-family:var(--mono);font-size:12px}
@media(max-width:900px){body.pc .pc-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---- tables ---- */
body.pc .pc-table{width:100%;border-collapse:collapse}
body.pc .pc-table thead th{text-align:left;padding:0 14px;height:34px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--border);white-space:nowrap;background:var(--panel)}
body.pc .pc-table thead th.r,body.pc .pc-table tbody td.r{text-align:right}
body.pc .pc-table tbody td{padding:0 14px;height:44px;border-bottom:1px solid var(--border-soft);font-size:12.5px;white-space:nowrap;vertical-align:middle;color:var(--text)}
body.pc .pc-table tbody tr:last-child td{border-bottom:none}
body.pc .pc-table tbody tr{transition:background .12s var(--ease)}
body.pc .pc-table tbody tr:hover{background:var(--panel-2)}
body.pc .pc-table tbody tr.click{cursor:pointer}
body.pc .pc-table .namecell{display:flex;align-items:center;gap:10px;min-width:0}
body.pc .pc-table .namecell .t{display:flex;flex-direction:column;justify-content:center;line-height:1.25;min-width:0}
body.pc .pc-table .namecell .lk{font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-table .namecell .sub{font-size:11px;color:var(--faint);font-family:var(--mono);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-table tr.click:hover .namecell .lk{color:var(--accent)}
body.pc .pc-table .mono{font-family:var(--mono);font-size:12px;color:var(--text)}
body.pc .pc-table .dim{color:var(--dim)} body.pc .pc-table .faint{color:var(--faint)}
body.pc .pc-table td.rowact{text-align:right;padding-right:10px}
body.pc .pc-table td.rowact .pc-btn,body.pc .pc-table td.rowact .pc-iconbtn{opacity:.85}
body.pc .pc-table tr:hover td.rowact .pc-btn,body.pc .pc-table tr:hover td.rowact .pc-iconbtn{opacity:1}
body.pc .pc-copy{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--text);background:transparent;border:0;padding:0;cursor:pointer}
body.pc .pc-copy svg{width:12px;height:12px;color:var(--faint);stroke-width:1.8;transition:color .15s}
body.pc .pc-copy:hover svg{color:var(--accent)}
body.pc .pc-copy.done svg{color:var(--green)}
body.pc .pc-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* stock bootstrap tables + DataTables get the same skin */
body.pc .table,body.pc .table-list{color:var(--text);margin:0}
body.pc .table thead th,body.pc .table-list thead th{background:var(--panel) !important;color:var(--faint) !important;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:0 14px;height:34px;border-bottom:1px solid var(--border) !important;border-top:0 !important}
body.pc .table td,body.pc .table-list>tbody>tr>td{background:transparent !important;color:var(--text) !important;padding:10px 14px;border-color:var(--border-soft) !important;font-size:12.5px}
body.pc .table-container{padding:0;overflow:hidden;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg)}
body.pc .table-container .dataTables_filter{margin:10px 14px}
body.pc .table-container .dataTables_info,body.pc .table-container .dataTables_paginate{padding:8px 14px 10px !important;font-size:12px}
body.pc .table td a,body.pc .table-list td a{color:var(--accent) !important}

/* ---- segmented filter ---- */
body.pc .pc-filterbar{display:flex;align-items:center;gap:8px;margin:0 0 10px;flex-wrap:wrap}
body.pc .pc-filterbar .sp{flex:1}
body.pc .pc-seg{display:inline-flex;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px;gap:2px}
body.pc .pc-seg button{height:24px;padding:0 9px;border-radius:4px;font-size:12px;font-weight:500;color:var(--dim);display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;font-family:var(--font);transition:background .12s var(--ease),color .12s var(--ease)}
body.pc .pc-seg button .n{font-family:var(--mono);font-size:10.5px;color:var(--faint)}
body.pc .pc-seg button:hover{color:var(--text)}
body.pc .pc-seg button.on{background:var(--raise);color:var(--text)}
body.pc .pc-seg button.on .n{color:var(--dim)}
body.pc .pc-rowcount{color:var(--faint);font-size:12px;font-family:var(--mono)}

/* ---- tabs ---- */
body.pc .pc-tabs,body.pc .nav-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:0 0 16px;overflow:auto;scrollbar-width:none}
body.pc .pc-tabs a,body.pc .nav-tabs .nav-link{padding:0 12px;height:36px;display:inline-flex;align-items:center;gap:7px;color:var(--dim);border:0;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:12.5px;font-weight:500;white-space:nowrap;background:transparent;transition:color .15s var(--ease),border-color .15s var(--ease)}
body.pc .pc-tabs a svg,body.pc .nav-tabs .nav-link svg{width:14px;height:14px;stroke-width:1.8}
body.pc .pc-tabs a:hover,body.pc .nav-tabs .nav-link:hover{color:var(--text)}
body.pc .pc-tabs a.active,body.pc .nav-tabs .nav-link.active{color:var(--text);border-bottom-color:var(--accent);font-weight:600;background:transparent}

/* ---- empty states ---- */
body.pc .pc-empty{padding:34px 16px 36px;text-align:center;color:var(--faint);font-size:12.5px}
body.pc .pc-empty img{display:block;width:150px;height:auto;margin:0 auto 12px;opacity:.9}
html.pl-light body.pc .pc-empty img{filter:invert(.82) hue-rotate(180deg)}
body.pc .pc-empty b{display:block;color:var(--text);font-size:14px;font-weight:600;margin-bottom:3px}
body.pc .pc-empty .pc-btn{margin-top:14px}

/* ---- dashboard ---- */
body.pc .pc-dash{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
body.pc .pc-dash .pc-card{margin:0}
body.pc .pc-dash aside{display:flex;flex-direction:column;gap:12px}
body.pc .pc-wallet{padding:14px 16px 16px}
body.pc .pc-wallet .k{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
body.pc .pc-wallet .bal{font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em;margin:4px 0 12px;font-feature-settings:'tnum'}
body.pc .pc-wallet .acts{display:flex;gap:8px}
body.pc .pc-wallet .acts .pc-btn{flex:1;justify-content:center}
body.pc .pc-wallet .due{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border-soft);font-size:12px;color:var(--dim)}
body.pc .pc-wallet .due b{margin-left:auto;font-family:var(--mono);color:var(--amber);font-weight:600}
body.pc .pc-wallet .due i{width:6px;height:6px;border-radius:50%;background:var(--amber);display:inline-block}
body.pc .pc-act{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid var(--border-soft);color:var(--text);text-decoration:none !important;font-size:12.5px;transition:background .12s var(--ease)}
body.pc .pc-act:last-child{border-bottom:0}
body.pc .pc-act:hover{background:var(--panel-2);color:var(--text)}
body.pc .pc-act .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;background:var(--raise);color:var(--dim)}
body.pc .pc-act .ic svg{width:13px;height:13px;stroke-width:1.8}
body.pc .pc-act .ic.paid{background:var(--green-soft);color:var(--green)}
body.pc .pc-act .ic.due{background:var(--amber-soft);color:var(--amber)}
body.pc .pc-act .ic.tkt{background:var(--accent-soft);color:var(--accent)}
body.pc .pc-act .m{flex:1;min-width:0;line-height:1.25}
body.pc .pc-act .m b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-act .m span{display:block;font-size:11px;color:var(--faint);font-family:var(--mono);margin-top:2px}
body.pc .pc-act .t{font-size:11px;color:var(--faint);font-family:var(--mono);white-space:nowrap}
body.pc .pc-quick{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border-soft)}
body.pc .pc-quick a{background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:8px;color:var(--text);text-decoration:none !important;font-size:12.5px;font-weight:600;transition:background .12s var(--ease)}
body.pc .pc-quick a:hover{background:var(--panel-2);color:var(--accent)}
body.pc .pc-quick a svg{width:16px;height:16px;color:var(--accent);stroke-width:1.7}
body.pc .pc-quick a small{font-weight:400;color:var(--faint);font-size:11.5px}
@media(max-width:1100px){body.pc .pc-dash{grid-template-columns:1fr}}

/* ---- ticket thread ---- */
body.pc .pc-thread{display:flex;flex-direction:column;gap:12px}
body.pc .pc-msg{display:flex;gap:12px;align-items:flex-start}
body.pc .pc-msg .av{width:32px;height:32px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--raise);color:var(--dim);font-weight:600;font-size:12px;overflow:hidden}
body.pc .pc-msg .av img{width:20px;height:20px}
body.pc .pc-msg.staff .av{background:var(--accent-soft);color:var(--accent)}
body.pc .pc-msg .bubble{flex:1;min-width:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
body.pc .pc-msg.staff .bubble{border-color:var(--accent-line);background:linear-gradient(180deg,rgba(56,189,248,.05),transparent 60%),var(--panel)}
body.pc .pc-msg .hd{display:flex;align-items:center;gap:8px;padding:8px 14px;border-bottom:1px solid var(--border-soft);font-size:12px}
body.pc .pc-msg .hd b{font-weight:600}
body.pc .pc-msg .hd .who{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
body.pc .pc-msg.staff .hd .who{color:var(--accent)}
body.pc .pc-msg .hd time{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint)}
body.pc .pc-msg .body{padding:12px 14px;font-size:13px;line-height:1.6;color:var(--text);overflow-wrap:anywhere}
body.pc .pc-msg .body p:last-child{margin-bottom:0}
body.pc .pc-msg .body pre,body.pc .pc-msg .body code{font-family:var(--mono);font-size:12px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-sm)}
body.pc .pc-msg .body pre{padding:10px 12px}
body.pc .pc-msg .att{padding:8px 14px 12px;border-top:1px solid var(--border-soft);display:flex;gap:8px;flex-wrap:wrap}
body.pc .pc-msg .att a{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border:1px solid var(--border-strong);border-radius:var(--r-sm);font-size:11.5px;color:var(--dim)}
body.pc .pc-msg .att a svg{width:12px;height:12px}
body.pc .pc-msg .att a:hover{color:var(--accent);border-color:var(--accent-line)}
body.pc .pc-msg .rating{display:flex;gap:2px;padding:0 14px 10px}
body.pc .pc-reply{margin-top:12px}
body.pc .pc-reply .card-body{padding:14px 16px 16px}
body.pc .pc-reply textarea{min-height:140px}
body.pc .pc-reply .acts{display:flex;gap:8px;align-items:center;margin-top:12px;flex-wrap:wrap}
body.pc .pc-reply .acts .sp{flex:1}
body.pc .pc-reply .custom-file-label{height:32px;line-height:30px;background:var(--panel-2);border:1px solid var(--border-strong);color:var(--dim);font-size:12px;border-radius:var(--r-sm)}
body.pc .pc-reply .custom-file-label::after{height:30px;line-height:30px;background:var(--raise);color:var(--dim);border-left:1px solid var(--border-strong)}
body.pc .pc-reply .text-muted small{font-size:11.5px}
body.pc .markdown-editor-toolbar,body.pc .markdown-editor-status{background:var(--panel-2) !important;border-color:var(--border-strong) !important;color:var(--dim) !important}
body.pc .markdown-editor-toolbar a,body.pc .markdown-editor-toolbar button{color:var(--dim) !important}

/* ---- responsive: tables become cards on phones ---- */
@media(max-width:760px){
  body.pc .pl-content{padding:14px 14px 48px}
  body.pc .pc-pagehead h1{font-size:19px}
  body.pc .pc-kpis{grid-template-columns:1fr 1fr}
  body.pc .pc-kpi{border-bottom:1px solid var(--border-soft)}
  body.pc .pc-kpi:nth-child(2n){border-right:none}
  body.pc .pc-table.stack thead{display:none}
  body.pc .pc-table.stack,body.pc .pc-table.stack tbody,body.pc .pc-table.stack tr,body.pc .pc-table.stack td{display:block;width:100%}
  body.pc .pc-table.stack tr{padding:10px 14px 12px;border-bottom:1px solid var(--border-soft)}
  body.pc .pc-table.stack tr:last-child{border-bottom:0}
  body.pc .pc-table.stack td{height:auto;padding:4px 0;border:0;white-space:normal;display:flex;align-items:center;justify-content:space-between;gap:12px}
  body.pc .pc-table.stack td[data-k]::before{content:attr(data-k);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
  body.pc .pc-table.stack td.namecell-td{padding-bottom:8px}
  body.pc .pc-table.stack td.rowact{justify-content:flex-end;padding-top:8px}
  body.pc .pc-table.stack td.rowact .pc-btn{width:100%;justify-content:center}
  body.pc .pc-quick{grid-template-columns:1fr 1fr}
  body.pc .pc-msg .av{display:none}
}
@media(max-width:480px){body.pc .pc-kpis{grid-template-columns:1fr}body.pc .pc-kpi{border-right:none}}
@media(prefers-reduced-motion:reduce){body.pc *{animation:none !important;transition:none !important}}

/* ---- light-mode odds and ends ---- */
html.pl-light body.pc .pl-side{background:var(--surface)}
html.pl-light body.pc .pc-btn.secondary{background:rgba(2,132,199,.06);border-color:rgba(2,132,199,.28);color:var(--accent) !important}
html.pl-light body.pc .pc-btn.secondary:hover{background:rgba(2,132,199,.12);color:var(--accent) !important}
html.pl-light body.pc .btn-default,html.pl-light body.pc .btn-secondary{background:rgba(2,132,199,.06) !important;border-color:rgba(2,132,199,.28) !important;color:var(--accent) !important}

/* ---- account page switch (label.pl-switch is a flex row, not a block label) ---- */
body.pc label.pl-switch{display:inline-flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--text);margin:0;cursor:pointer}
body.pc .pl-switch .pl-switch-state{font-weight:600;color:var(--accent)}

/* ---- product details: the stock "Server Information" tab rows, left-aligned as a definition list ---- */
body.pc .product-details-tab-container{background:var(--panel) !important;border:1px solid var(--border);border-radius:var(--r-lg);padding:6px 16px}
body.pc .product-details-tab-container .tab-pane{text-align:left !important}
body.pc .product-details-tab-container .tab-pane>.row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border-soft);margin:0}
body.pc .product-details-tab-container .tab-pane>.row:last-child{border-bottom:0}
body.pc .product-details-tab-container .tab-pane>.row>[class*="col-"]{padding:0;flex:none;max-width:none;width:auto;text-align:left !important}
body.pc .product-details-tab-container .tab-pane>.row>.col-sm-5{flex:0 0 190px;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
body.pc .product-details-tab-container .tab-pane>.row>.col-sm-5 strong{font-weight:600}
body.pc .product-details-tab-container .tab-pane>.row>.col-sm-7{flex:1;font-family:var(--mono);font-size:12.5px;color:var(--text)}
body.pc .product-details-tab-container .tab-pane>p,body.pc .product-details-tab-container .tab-pane>div:not(.row){color:var(--dim);font-size:12.5px;padding:10px 0}
body.pc .responsive-tabs-sm-connector{display:none}

/* ---- ticket reply editor (EasyMDE / CodeMirror) on the dark panel ---- */
body.pc .editor-toolbar{background:var(--panel-2) !important;border:1px solid var(--border-strong) !important;border-bottom:0 !important;border-radius:var(--r-sm) var(--r-sm) 0 0;opacity:1}
body.pc .editor-toolbar a,body.pc .editor-toolbar button{color:var(--dim) !important;background:transparent !important;border:0 !important}
body.pc .editor-toolbar a:hover,body.pc .editor-toolbar a.active,body.pc .editor-toolbar button:hover{background:var(--raise) !important;color:var(--text) !important}
body.pc .editor-toolbar i.separator{border-color:var(--border-strong) !important}
body.pc .CodeMirror{background:var(--panel-2) !important;color:var(--text) !important;border:1px solid var(--border-strong) !important;border-radius:0 0 var(--r-sm) var(--r-sm);font-family:var(--font);font-size:13px;min-height:160px}
body.pc .CodeMirror-cursor{border-left-color:var(--text)}
body.pc .CodeMirror-placeholder,body.pc .CodeMirror pre.CodeMirror-placeholder{color:var(--faint) !important}
body.pc .editor-statusbar{background:transparent;color:var(--faint);font-size:11px;font-family:var(--mono);padding:4px 2px}
body.pc .editor-preview,body.pc .editor-preview-side{background:var(--panel) !important;color:var(--text)}
body.pc .markdown-editor-toolbar,body.pc .markdown-editor-status,body.pc .markdown-editor .btn-toolbar{background:var(--panel-2) !important;border-color:var(--border-strong) !important;color:var(--dim) !important}
body.pc .markdown-editor .btn-toolbar .btn{background:transparent !important;border:0 !important;color:var(--dim) !important;box-shadow:none}

/* ---- facts grid: hairlines on the cells, so a short last row never shows the gap colour (light mode) ---- */
body.pc .pc-facts{gap:0;background:var(--panel)}
body.pc .pc-fact{border-right:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft);margin-bottom:-1px}
body.pc .pc-fact:nth-child(4n){border-right:0}
@media(max-width:900px){body.pc .pc-fact:nth-child(4n){border-right:1px solid var(--border-soft)}body.pc .pc-fact:nth-child(2n){border-right:0}}

/* ---- WHMCS bootstrap-markdown editor (ticket reply / submit) ---- */
body.pc .md-editor{background:var(--panel-2) !important;border:1px solid var(--border-strong) !important;border-radius:var(--r-sm);overflow:hidden;box-shadow:none !important}
body.pc .md-editor.active{border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-soft) !important}
body.pc .md-editor>.md-header,body.pc .md-editor .md-footer{background:var(--panel) !important;border-color:var(--border-strong) !important;color:var(--faint) !important;padding:6px 8px}
body.pc .md-editor .md-header .btn,body.pc .md-editor .md-header .btn-default{background:transparent !important;border:0 !important;color:var(--dim) !important;height:26px;padding:0 8px !important;box-shadow:none !important}
body.pc .md-editor .md-header .btn:hover{background:var(--raise) !important;color:var(--text) !important}
body.pc .md-editor .md-header .btn-group{margin-right:4px}
body.pc .md-editor textarea.md-input,body.pc .md-editor .md-input{background:var(--panel-2) !important;color:var(--text) !important;border:0 !important;border-top:1px solid var(--border-strong) !important;border-radius:0 !important;padding:10px 12px;font-family:var(--font);font-size:13px;box-shadow:none !important}
body.pc .md-editor .md-preview{background:var(--panel-2) !important;color:var(--text) !important;border-top:1px solid var(--border-strong) !important}
body.pc .md-editor .md-footer{font-size:11px;font-family:var(--mono)}

/* ============================================================
   v304 - the store under login joins the console: category strip
   instead of the sidebar, plan cards with the species tile, mono
   price, two-column spec list, Metal gradient order button.
   ============================================================ */
body.pc #order-standard_cart>.row{display:block;margin:0}
body.pc #order-standard_cart .cart-sidebar{width:100%;float:none;padding:0;margin:0 0 12px;position:static}
body.pc #order-standard_cart .cart-sidebar .card,body.pc #order-standard_cart .cart-sidebar .panel{background:transparent !important;border:0 !important;margin:0 !important;box-shadow:none !important}
body.pc #order-standard_cart .cart-sidebar .card-header,body.pc #order-standard_cart .cart-sidebar .panel-heading{display:none}
body.pc #order-standard_cart .cart-sidebar [menuitemname="Actions"],body.pc #order-standard_cart .cart-sidebar #categoriesCollapsed,body.pc #order-standard_cart .cart-sidebar .card-body{display:none !important}
body.pc #order-standard_cart .cart-sidebar .list-group{display:flex;flex-wrap:wrap;gap:6px;border:0;border-radius:0}
body.pc #order-standard_cart .cart-sidebar .list-group-item{height:30px;padding:0 12px !important;border-radius:var(--r-sm) !important;border:1px solid var(--border-strong) !important;background:var(--panel) !important;color:var(--dim) !important;font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;gap:7px;width:auto;margin:0 !important;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
body.pc #order-standard_cart .cart-sidebar .list-group-item:hover{background:var(--panel-2) !important;color:var(--text) !important}
body.pc #order-standard_cart .cart-sidebar .list-group-item.active{background:var(--accent-soft) !important;color:var(--text) !important;border-color:var(--accent-line) !important;font-weight:600}
body.pc #order-standard_cart .cart-sidebar .list-group-item i{display:none}
body.pc #order-standard_cart .cart-sidebar .list-group-item .badge{margin-left:2px}
body.pc #order-standard_cart .cart-body{width:100%;float:none;padding:0}
body.pc #order-standard_cart .header-lined{border:0;padding:0;margin:0 0 14px}
body.pc #order-standard_cart .header-lined h1{font-family:var(--display);font-size:22px !important;font-weight:600;letter-spacing:-.02em;margin:0;color:var(--text)}
body.pc #order-standard_cart .header-lined p{color:var(--faint);font-size:12.5px;margin:4px 0 0}
body.pc #order-standard_cart .products{margin:0}
body.pc #order-standard_cart .pl-plan-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
body.pc #order-standard_cart .pl-plan{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;box-shadow:none;transform:none;transition:background .15s var(--ease),border-color .15s var(--ease)}
body.pc #order-standard_cart .pl-plan::after{display:none}
body.pc #order-standard_cart .pl-plan:hover{transform:none;border-color:var(--border-strong);box-shadow:none;background:var(--panel-2)}
body.pc #order-standard_cart .pl-plan-head{justify-content:flex-start;gap:12px;align-items:center}
body.pc #order-standard_cart .pl-plan-head .pc-tile{width:52px;height:52px;border-radius:13px}
body.pc #order-standard_cart .pl-plan-head .t{min-width:0;flex:1}
body.pc #order-standard_cart .pl-plan-name{font-family:var(--display) !important;font-size:17px !important;font-weight:600 !important;letter-spacing:-.01em;display:block;line-height:1.15}
body.pc #order-standard_cart .pl-plan-qty{display:block;font-size:11px;color:var(--faint);font-family:var(--mono);margin-top:3px;white-space:nowrap}
body.pc #order-standard_cart .pl-plan-tag{font-size:12px;color:var(--dim);margin:10px 0 0;line-height:1.5}
body.pc #order-standard_cart .pl-plan-price{margin:12px 0 0;align-items:baseline;gap:2px 6px}
body.pc #order-standard_cart .pl-plan-price .from{font-size:10px;color:var(--faint);margin-bottom:2px}
body.pc #order-standard_cart .pl-plan-price .amt{font-family:var(--mono);font-size:24px;font-weight:600;color:var(--text);letter-spacing:-.02em;font-feature-settings:'tnum'}
body.pc #order-standard_cart .pl-plan-price .per{font-size:12px;color:var(--faint);font-weight:500}
body.pc #order-standard_cart .pl-plan-feats{display:grid;grid-template-columns:1fr 1fr;gap:7px 10px;padding:12px 0 0;margin:12px 0 0;border-top:1px solid var(--border-soft)}
body.pc #order-standard_cart .pl-plan-feats li{font-size:12px;color:var(--dim);gap:8px;min-width:0}
body.pc #order-standard_cart .pl-plan-feats li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc #order-standard_cart .pl-plan-feats li svg{width:22px;height:22px;padding:4px;border-radius:6px;background:var(--accent-soft);border:0;color:var(--accent);transform:none !important}
body.pc #order-standard_cart .pl-plan-feats b,body.pc #order-standard_cart .pl-plan-feats strong,body.pc #order-standard_cart .pl-plan-feats .feature-value{color:var(--text);font-weight:600}
body.pc #order-standard_cart .pl-plan-setup{font-size:11px;color:var(--faint);margin-top:10px;font-family:var(--mono)}
body.pc #order-standard_cart .pl-plan-btn{margin-top:14px;height:34px;padding:0 14px;border-radius:var(--r-sm);background:linear-gradient(118deg,var(--accent-2),var(--accent)) !important;color:var(--accent-ink) !important;font-weight:600;font-size:12.5px;box-shadow:var(--glow);border:0 !important;transform:none !important;font-family:var(--font);text-decoration:none !important}
body.pc #order-standard_cart .pl-plan-btn:hover{filter:brightness(1.08);box-shadow:0 12px 30px -12px var(--accent)}
body.pc #order-standard_cart .pl-plan-btn i{display:none}
body.pc #order-standard_cart .pl-plan-feat{box-shadow:none !important;border-color:var(--accent-line) !important;padding-top:16px}
body.pc #order-standard_cart .pl-plan-badge{left:auto;right:12px;top:12px;transform:none;border-radius:4px;padding:3px 7px;font-size:10px;letter-spacing:.06em}
body.pc #order-standard_cart .alert{margin:0 0 12px}
@media(max-width:760px){
  body.pc #order-standard_cart .cart-sidebar .list-group{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  body.pc #order-standard_cart .cart-sidebar .list-group-item{flex:none}
  body.pc #order-standard_cart .pl-plan-grid{grid-template-columns:1fr}
}

/* ---- emails: console table ---- */
body.pc .pc-emails tr.click td{cursor:pointer}
body.pc .pc-emails .clip{color:var(--faint);margin-left:6px;vertical-align:-2px}
body.pc .pc-emails .clip svg{width:12px;height:12px}

/* ---- v305: store fixes after the first live audit ----
   bootstrap's .list-group-item-action forces width:100% (chips stacked),
   WHMCS swaps the sidebar for two <select> cards on phones (we keep the
   strip everywhere), and the product description carries <br> noise that
   became grid cells (the spec list slid into the right column). */
body.pc #order-standard_cart .cart-sidebar{display:block !important}
body.pc #order-standard_cart .sidebar-collapsed{display:none !important}
body.pc #order-standard_cart .cart-sidebar .card,body.pc #order-standard_cart .cart-sidebar .panel{padding:0 !important;border:0 !important;background:transparent !important;border-radius:0 !important}
body.pc #order-standard_cart .cart-sidebar .list-group{border:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important;margin:0 !important;border-radius:0 !important}
body.pc #order-standard_cart .cart-sidebar .list-group-item{width:auto !important;flex:0 0 auto !important;box-shadow:none !important;line-height:1}
body.pc #order-standard_cart .pl-plan br{display:none}
body.pc #order-standard_cart .pl-plan p:empty{display:none}
body.pc #order-standard_cart .pl-plan>p{margin:10px 0 0;font-size:12px;color:var(--dim);line-height:1.5}
body.pc #order-standard_cart .pl-plan>p strong{color:var(--text);font-weight:600}
body.pc #order-standard_cart .pl-plan-feats{margin-top:12px}
body.pc #order-standard_cart .pl-plan-price{margin-top:auto;padding-top:14px}
body.pc #order-standard_cart .pl-plan-feats+.pl-plan-price{padding-top:14px}
/* emails on phones: the stacked date row repeats the subtitle */
@media(max-width:760px){body.pc .pc-emails td[data-k]{display:none}}

/* ---- v306: category strip really a strip (papilio.css sets the list-group
   to flex-direction:column, and WHMCS collapses the panel body on phones) ---- */
body.pc #order-standard_cart .cart-sidebar .list-group{display:flex !important;flex-direction:row !important;flex-wrap:wrap;height:auto !important}
body.pc #order-standard_cart .cart-sidebar .list-group-item{display:inline-flex !important;width:auto !important;max-width:100%}
body.pc #order-standard_cart .cart-sidebar .list-group-item:hover{transform:none !important}
@media(max-width:760px){body.pc #order-standard_cart .cart-sidebar .list-group{flex-wrap:nowrap;overflow-x:auto}}

/* ---- v307: add funds, security, 2FA card, password form ---- */
body.pc .w-hidden{display:none !important}
body.pc .pc-addfunds{max-width:640px}
body.pc .pc-facts-3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.pc .pc-facts-3 .pc-fact:nth-child(3n){border-right:0}
body.pc .pc-addfunds-form .form-group{margin-bottom:14px}
body.pc .pc-amount{position:relative}
body.pc .pc-amount .cur{position:absolute;left:11px;top:0;height:36px;display:flex;align-items:center;font-family:var(--mono);font-size:14px;color:var(--faint);pointer-events:none}
body.pc .pc-amount input{height:36px;padding-left:28px;font-family:var(--mono);font-size:15px;font-weight:600}
body.pc .pc-addfunds-form select{height:36px}
body.pc .pc-addfunds-go{width:100%;justify-content:center;margin-top:4px}
body.pc .pc-addfunds-note{margin:12px 0 0;font-size:11.5px;color:var(--faint)}
/* the walletplus hook injects its own light-green box; give it the console's voice */
body.pc #wppBox{margin:0 0 14px}
body.pc .wpp-banner{background:var(--green-soft) !important;border:1px solid color-mix(in srgb,var(--green) 35%,transparent) !important;color:var(--text) !important;border-radius:var(--r) !important;padding:9px 12px !important;font-size:12.5px !important;margin:0 0 10px !important;display:flex;align-items:center;gap:8px}
body.pc .wpp-banner i{color:var(--green)}
body.pc .wpp-banner b{color:var(--green)}
body.pc .wpp-presets{gap:6px !important;margin:0 !important}
body.pc .wpp-btn{background:var(--panel-2) !important;border:1px solid var(--border-strong) !important;color:var(--text) !important;border-radius:var(--r-sm) !important;height:30px;padding:0 12px !important;font-family:var(--mono) !important;font-size:12.5px !important;font-weight:600 !important;transform:none !important;transition:background .15s var(--ease),border-color .15s var(--ease)}
body.pc .wpp-btn:hover{background:var(--accent-soft) !important;border-color:var(--accent-line) !important;color:var(--accent-2) !important}
@media(max-width:560px){body.pc .pc-facts-3{grid-template-columns:1fr}body.pc .pc-facts-3 .pc-fact{border-right:0}}
/* security landing */
body.pc .pc-security-links{overflow:hidden}
body.pc .pc-security-links a{padding:16px}
body.pc .pc-security-links a svg{width:18px;height:18px}
/* user security / password cards (stock markup) */
body.pc .card .card-title{font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px}
body.pc .twofa-config-link{font-size:12.5px;color:var(--dim)}
body.pc p.twofa-config-link strong{color:var(--text)}
body.pc a.twofa-config-link.btn{display:inline-flex}
body.pc .pl-content>p:first-child{color:var(--dim);font-size:12.5px;margin:0 0 10px}
body.pc .using-password-strength .form-group.row{align-items:center}
body.pc .using-password-strength .col-form-label{padding-top:0;padding-bottom:0}
body.pc .using-password-strength .progress{height:4px;background:var(--raise);border-radius:2px;margin:6px 0 0}
body.pc .using-password-strength .progress-bar{background:linear-gradient(90deg,var(--accent-2),var(--accent))}
body.pc .using-password-strength #newPassword1 .alert{margin-top:8px !important;font-size:12px}
body.pc .generate-password{height:32px}

/* ============================================================
   v310 - phase 1 of the "reads like the login page" pass
   (Arshia: notices glued together, topbar right side is clutter,
   everything boxed, plan butterflies not wanted).
   1. notices = ONE quiet rail, rows divided by hairlines
   2. topbar = title left, search + theme + bell + avatar, no boxes
   3. fewer containers: list cards lose their frame, the dashboard
      side column becomes one stacked panel
   4. plan tiles = family icons, no species art
   ============================================================ */

/* 1. notices rail */
body.pc .pc-notices{gap:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--panel)}
body.pc .pc-notices:empty{display:none;border:0}
body.pc .pc-notices>*{border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;margin:0 !important;padding:8px 14px !important;min-height:38px;display:flex;align-items:center;gap:10px;font-size:12.5px}
body.pc .pc-notices>*+*{border-top:1px solid var(--border-soft) !important}
body.pc .pc-notices #nmTgBar .i{width:20px;height:20px;background:transparent;color:var(--accent);font-size:16px;display:grid;place-items:center}
body.pc .pc-notices #nmTgBar .t{color:var(--text) !important;font-weight:500;flex:1}
body.pc .pc-notices #nmTgBar .t small{color:var(--faint);margin-left:6px}
body.pc .pc-notices #nmTgBar .b,body.pc .pc-notices .btn-resend-verify-email,body.pc .pc-notices .alert .btn{height:26px !important;padding:0 10px !important;font-size:12px !important;border-radius:var(--r-sm) !important;background:transparent !important;border:1px solid var(--border-strong) !important;color:var(--accent-2) !important;box-shadow:none !important;margin-left:auto;white-space:nowrap}
body.pc .pc-notices #nmTgBar .b:hover,body.pc .pc-notices .btn-resend-verify-email:hover,body.pc .pc-notices .alert .btn:hover{background:var(--accent-soft) !important;color:var(--accent-2) !important}
body.pc .pc-notices .verification-banner{padding-right:38px !important}
body.pc .pc-notices .verification-banner .text{flex:1;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.pc .pc-notices .verification-banner .fa-exclamation-triangle,body.pc .pc-notices .verification-banner i.fas{color:var(--amber);font-size:14px}
body.pc .pc-notices .verification-banner .close,body.pc .pc-notices #nmTgBar .x{position:absolute;right:10px;top:50%;transform:translateY(-50%);opacity:.5;font-size:16px;color:var(--dim) !important;text-shadow:none}
body.pc .pc-notices .verification-banner .close:hover,body.pc .pc-notices #nmTgBar .x:hover{opacity:1}
body.pc .pc-notices .alert-warning{background:transparent !important}
body.pc .pc-notices .alert-warning::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}
body.pc .pc-notices .alert-danger::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
body.pc .pc-notices .alert-success::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
body.pc .pc-notices .alert-info::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
body.pc .pc-notices .alert>svg{display:none}
body.pc .pl-content>.pc-notices+.pc-notices{margin-top:-15px;border-top:0;border-top-left-radius:0;border-top-right-radius:0}
body.pc .pc-notices{margin-bottom:14px}
@media(max-width:760px){
  body.pc .pc-notices>*{flex-wrap:wrap;padding:8px 12px !important}
  body.pc .pc-notices #nmTgBar .b,body.pc .pc-notices .btn-resend-verify-email{margin-left:0}
}

/* 2. topbar */
body.pc .pl-top{gap:6px;padding:0 18px 0 16px}
body.pc .pl-icbtn{border:0;background:transparent;color:var(--faint)}
body.pc .pl-icbtn:hover{background:var(--raise);color:var(--text);border:0}
body.pc .pl-icbtn.pl-burger{border:0}
body.pc .pl-avatar{background:var(--accent-soft);color:var(--accent);margin-left:4px}
body.pc .pl-avatar:hover{background:var(--accent);color:var(--accent-ink)}
body.pc .pl-top .pl-search{max-width:260px;background:transparent;border-color:var(--border);margin-right:6px}
body.pc .pl-top .pl-search:focus-within{background:var(--panel-2)}
body.pc .pl-top a.pl-icbtn[href*="cart.php"]{display:none}
body.pc .pl-title-ic{display:none}
body.pc .pl-title{font-size:13px;color:var(--dim);font-weight:500}
body.pc .pl-title .pl-title-txt{color:var(--text);font-weight:600}

/* 3. fewer boxes */
body.pc .pc-card:has(> .pc-tablewrap),body.pc .pc-card:has(> .pc-subhead + .pc-tablewrap){background:transparent !important;border:0 !important;border-radius:0 !important}
body.pc .pc-card:has(> .pc-subhead + .pc-tablewrap) .pc-subhead{padding-left:2px;padding-right:2px;border-bottom:1px solid var(--border)}
body.pc .pc-card:has(> .pc-tablewrap) .pc-table thead th{background:transparent;padding-left:2px}
body.pc .pc-card:has(> .pc-tablewrap) .pc-table thead th:first-child,body.pc .pc-card:has(> .pc-tablewrap) .pc-table tbody td:first-child{padding-left:2px}
body.pc .pc-card:has(> .pc-tablewrap) .pc-table tbody tr:hover{background:var(--panel)}
body.pc .pc-card:has(> .pc-tablewrap) .pc-table tbody tr:last-child td{border-bottom:1px solid var(--border-soft)}
body.pc .pc-card:has(> .pc-tablewrap) .pc-table tbody td{height:48px}
body.pc .pc-dash aside{gap:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
body.pc .pc-dash aside .pc-card{border:0 !important;border-radius:0 !important;background:transparent !important}
body.pc .pc-dash aside .pc-card+.pc-card{border-top:1px solid var(--border) !important}
body.pc .pc-dash aside .pc-card .pc-subhead{border-bottom:0;padding-bottom:4px;min-height:38px}
body.pc .pc-dash aside .pc-quick{background:transparent;gap:0}
body.pc .pc-dash aside .pc-quick a{background:transparent;border-top:1px solid var(--border-soft);border-right:1px solid var(--border-soft)}
body.pc .pc-dash aside .pc-quick a:nth-child(2n){border-right:0}
body.pc .pc-dash aside .pc-act{padding-left:16px;padding-right:16px}
body.pc .pc-kpis{background:transparent;border:0;border-radius:0;gap:12px;overflow:visible}
body.pc .pc-kpi{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--panel)}
body.pc .pc-kpi:last-child{border-right:1px solid var(--border)}
body.pc .pc-pagehead{margin-bottom:18px}

/* 4. tiles: family icons */
body.pc .pc-tile{background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(125,211,252,.18);color:var(--accent)}
body.pc .pc-tile img{display:none}
body.pc .pc-tile::before{content:"";width:55%;height:55%;background:currentColor;-webkit-mask:var(--fam,var(--fam-vps)) center/contain no-repeat;mask:var(--fam,var(--fam-vps)) center/contain no-repeat}
body.pc .pc-tile[data-fam=dedicated]{--fam:var(--fam-dedicated)}
body.pc .pc-tile[data-fam=network]{--fam:var(--fam-network)}
body.pc .pc-tile[data-fam=traffic]{--fam:var(--fam-traffic)}
body.pc .pc-tile[data-fam=generic]{--fam:var(--fam-generic)}
body.pc .pc-tile:has(> svg)::before{display:none}
body.pc{
  --fam-vps:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='7' rx='2'/%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='M7 7.5h.01M7 16.5h.01'/%3E%3C/svg%3E");
  --fam-dedicated:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='1.5'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='.5'/%3E%3Cpath d='M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2'/%3E%3C/svg%3E");
  --fam-network:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 3 2.6 15 0 18M12 3c-2.6 3-2.6 15 0 18'/%3E%3C/svg%3E");
  --fam-traffic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2.5 7 5-14 2.5 7h4'/%3E%3C/svg%3E");
  --fam-generic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M12 12l8-4.5M12 12v9M12 12L4 7.5'/%3E%3C/svg%3E");
}

/* ---- v311: notice rail needs to out-rank the id/compound rules from v303; KPIs back to ONE divided strip ---- */
body.pc .pl-content .pc-notices>#nmTgBar,body.pc .pl-content .pc-notices>.verification-banner,body.pc .pl-content .pc-notices>.verification-banner.email-verification,body.pc .pl-content .pc-notices>.alert,body.pc .pl-content .pc-notices>div{
  border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;margin:0 !important;padding:8px 14px !important;min-height:38px;display:flex;align-items:center;gap:10px;font-size:12.5px !important;position:relative}
body.pc .pl-content .pc-notices>*+*{border-top:1px solid var(--border-soft) !important}
body.pc .pl-content .pc-notices>#nmTgBar .i{width:20px !important;height:20px !important;background:transparent !important;color:var(--accent) !important;border-radius:0}
body.pc .pl-content .pc-notices>#nmTgBar .t{color:var(--text) !important;font-weight:500 !important;flex:1;line-height:1.35}
body.pc .pl-content .pc-notices>#nmTgBar .t small{color:var(--faint) !important;font-size:12px !important;margin-left:6px}
body.pc .pl-content .pc-notices>#nmTgBar .b,body.pc .pl-content .pc-notices>.verification-banner .btn-resend-verify-email{height:26px !important;line-height:24px !important;padding:0 10px !important;font-size:12px !important;border-radius:var(--r-sm) !important;background:transparent !important;border:1px solid var(--border-strong) !important;color:var(--accent-2) !important;box-shadow:none !important;margin-left:auto !important;white-space:nowrap;font-weight:500 !important}
body.pc .pl-content .pc-notices>#nmTgBar .b:hover,body.pc .pl-content .pc-notices>.verification-banner .btn-resend-verify-email:hover{background:var(--accent-soft) !important}
body.pc .pl-content .pc-notices>.verification-banner{padding-right:36px !important}
body.pc .pl-content .pc-notices>.verification-banner .text{flex:1;font-size:12.5px !important;color:var(--text) !important;display:flex;align-items:center;gap:10px}
body.pc .pl-content .pc-notices>.verification-banner .text i{color:var(--amber) !important;font-size:13px}
body.pc .pl-content .pc-notices>.verification-banner .close,body.pc .pl-content .pc-notices>#nmTgBar .x{position:absolute !important;right:10px !important;top:50% !important;transform:translateY(-50%);opacity:.5;color:var(--dim) !important;font-size:16px;text-shadow:none;padding:0}
body.pc .pl-content .pc-notices>.verification-banner .close:hover,body.pc .pl-content .pc-notices>#nmTgBar .x:hover{opacity:1}
body.pc .pl-content .pc-notices>.alert>.btn{margin-left:auto;height:26px !important;padding:0 10px !important;font-size:12px !important;background:transparent !important;border:1px solid var(--border-strong) !important;color:var(--accent-2) !important;box-shadow:none !important}
body.pc .pl-content .pc-notices>.alert>.btn:hover{background:var(--accent-soft) !important}
body.pc .pl-content .pc-notices>.alert>svg{display:none}
body.pc .pl-content .pc-notices>.alert-warning::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none}
body.pc .pl-content .pc-notices>.alert-danger::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red);flex:none}
body.pc .pl-content .pc-notices>.alert-success::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);flex:none}
body.pc .pl-content .pc-notices>.alert-info::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
/* the page-level overdue notice joins the same rail visually */
body.pc .pc-pagehead+.pc-notices{margin-top:-4px}
/* KPIs: one strip again (v310 boxed them) */
body.pc .pc-kpis{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);gap:0;overflow:hidden}
body.pc .pc-kpi{border:0;border-right:1px solid var(--border-soft);border-radius:0;background:transparent}
body.pc .pc-kpi:last-child{border-right:0}
@media(max-width:760px){body.pc .pc-kpi{border-bottom:1px solid var(--border-soft)}body.pc .pc-kpi:nth-child(2n){border-right:0}body.pc .pc-kpi:nth-last-child(-n+2){border-bottom:0}}
@media(max-width:760px){
  body.pc .pl-content .pc-notices>#nmTgBar,body.pc .pl-content .pc-notices>.verification-banner{flex-wrap:wrap;padding:8px 12px !important}
  body.pc .pl-content .pc-notices>#nmTgBar .b,body.pc .pl-content .pc-notices>.verification-banner .btn-resend-verify-email{margin-left:0 !important}
}

/* ============================================================
   v320 - the account family becomes ONE section: a tab strip
   (Profile · Security · Contacts · Users · Payment · Emails)
   on every account page, security + password rebuilt as cards.
   ============================================================ */
body.pc .pc-acct-tabs{display:flex;gap:2px;margin:0 0 18px;border-bottom:1px solid var(--border);overflow:auto;scrollbar-width:none}
body.pc .pc-acct-tabs::-webkit-scrollbar{display:none}
body.pc .pc-acct-tabs a{padding:0 12px;height:36px;display:inline-flex;align-items:center;gap:7px;color:var(--dim);border-bottom:2px solid transparent;margin-bottom:-1px;font-size:12.5px;font-weight:500;white-space:nowrap;text-decoration:none !important;transition:color .15s var(--ease),border-color .15s var(--ease)}
body.pc .pc-acct-tabs a svg{width:14px;height:14px;stroke-width:1.8}
body.pc .pc-acct-tabs a:hover{color:var(--text)}
body.pc .pc-acct-tabs a.on{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
body.pc .pc-acct-tabs a.on svg{color:var(--accent)}
/* security cards */
body.pc .pc-sec+.pc-sec{margin-top:12px}
body.pc .pc-sec-row{display:flex;align-items:center;gap:16px;padding:16px 18px;flex-wrap:wrap}
body.pc .pc-sec-row .t{flex:1 1 320px;min-width:0}
body.pc .pc-sec-row h2{font-size:14px;font-weight:600;margin:0 0 4px}
body.pc .pc-sec-row p{margin:0;font-size:12.5px;color:var(--dim);line-height:1.5;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.pc .pc-sec-row .acts{display:flex;gap:8px;margin-left:auto}
body.pc .pc-sec .card-body{padding:16px 18px}
body.pc .pc-narrow{max-width:560px}
body.pc .pc-form .form-group{margin-bottom:14px}
body.pc .pc-form-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
body.pc .pc-form-acts{display:flex;gap:8px;align-items:center;margin-top:4px}
body.pc .pc-pwrow{display:flex;gap:8px}
body.pc .pc-pwrow .form-control{flex:1}
body.pc .pc-pwrow .pc-btn{flex:none;height:32px}
body.pc .pc-form .progress{height:5px;border-radius:99px;background:var(--raise);margin:8px 0 4px;overflow:hidden}
body.pc .pc-form .progress-bar{background:linear-gradient(90deg,var(--accent-2),var(--accent));border-radius:99px}
body.pc .pc-form #passwordStrengthTextLabel,body.pc .pc-form .password-strength-meter p{font-size:11px;color:var(--faint);font-family:var(--mono);margin:0}
body.pc .pc-form #inputNewPassword2Msg{font-size:11.5px;color:var(--red);margin-top:4px}
body.pc .pc-form #passwdFeedback{margin:0 0 12px}
@media(max-width:760px){
  body.pc .pc-sec-row{padding:14px}
  body.pc .pc-sec-row .acts{margin-left:0;width:100%}
  body.pc .pc-sec-row .acts .pc-btn{flex:1;justify-content:center}
  body.pc .pc-form-2{grid-template-columns:1fr}
}
/* new ticket: department picker as tiles under a real head */
body.pc .pc-depts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
body.pc .pc-depts a{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;display:flex;gap:12px;align-items:flex-start;color:var(--text);text-decoration:none !important;transition:background .15s var(--ease),border-color .15s var(--ease)}
body.pc .pc-depts a:hover{background:var(--panel-2);border-color:var(--border-strong)}
body.pc .pc-depts a b{display:block;font-size:13.5px;font-weight:600;margin-bottom:3px}
body.pc .pc-depts a span{font-size:12.5px;color:var(--dim);line-height:1.45}
body.pc .pc-depts a .go{margin-left:auto;color:var(--faint);align-self:center}
body.pc .pc-depts a .go svg{width:16px;height:16px}

/* ---- v321: empty states + knowledgebase + announcements in the console voice ---- */
body.pc .pc-kbsearch{display:flex;align-items:center;gap:10px;height:40px;padding:0 6px 0 12px;background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--r);margin:0 0 16px;max-width:640px}
body.pc .pc-kbsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
body.pc .pc-kbsearch svg{width:15px;height:15px;color:var(--faint);flex:none}
body.pc .pc-kbsearch input{flex:1;height:36px !important;background:transparent !important;border:0 !important;box-shadow:none !important;padding:0 !important;font-size:13px}
body.pc .pc-kbcats a .pc-chip{align-self:center;margin-left:auto}
body.pc .pc-empty .pc-btn{margin-top:14px}
body.pc .pc-empty img{width:130px}
/* domains: the old card grid's empty state */
body.pc .pl-dom-empty .pc-empty{padding:40px 16px}
/* announcements: flat list, one sheet */
body.pc .pc-ann{display:flex;flex-direction:column}
body.pc .pc-ann article{padding:18px 20px;border-bottom:1px solid var(--border-soft)}
body.pc .pc-ann article:last-child{border-bottom:0}
body.pc .pc-ann h2{font-size:15px;font-weight:600;margin:0 0 4px}
body.pc .pc-ann h2 a{color:var(--text)} body.pc .pc-ann h2 a:hover{color:var(--accent)}
body.pc .pc-ann time{display:block;font-family:var(--mono);font-size:11px;color:var(--faint);margin-bottom:10px}
body.pc .pc-ann .body{font-size:13px;line-height:1.65;color:var(--dim);max-width:72ch}
body.pc .pc-ann .body p:last-child{margin-bottom:0}
body.pc .pc-ann .more{margin-top:10px}

/* ============================================================
   v322 - the purchase path (configure -> cart -> checkout) in
   the console voice: same page head, flat panels, one primary
   button per screen, order summary as a quiet side panel.
   ============================================================ */
body.pc #order-standard_cart.pl-cfgx .pl-cfgx-head{margin:0 0 18px}
body.pc #order-standard_cart.pl-cfgx .pl-cfgx-head h1{font-family:var(--display) !important;font-size:22px !important;font-weight:600 !important;letter-spacing:-.02em;margin:10px 0 0 !important;color:var(--text)}
body.pc #order-standard_cart.pl-cfgx .pl-cfgx-steps{gap:6px}
body.pc #order-standard_cart.pl-cfgx .pl-cfgx-steps .st{height:26px;padding:0 10px 0 6px;border-radius:var(--r-sm);background:var(--panel);border:1px solid var(--border);color:var(--dim);font-size:12px;font-weight:500;gap:7px;font-family:var(--font)}
body.pc #order-standard_cart.pl-cfgx .pl-cfgx-steps .st i{width:16px;height:16px;border-radius:5px;background:var(--raise);color:var(--dim);font-size:10px;font-family:var(--mono)}
body.pc #order-standard_cart.pl-cfgx .pl-cfgx-steps .st.done i{background:var(--green-soft);color:var(--green)}
body.pc #order-standard_cart.pl-cfgx .pl-cfgx-steps .st.on{color:var(--text);border-color:var(--accent-line);background:var(--accent-soft)}
body.pc #order-standard_cart.pl-cfgx .pl-cfgx-steps .st.on i{background:var(--accent);color:var(--accent-ink)}
body.pc #order-standard_cart.pl-cfgx .pl-cfgx-steps .sep{background:var(--border);height:1px;width:28px}
body.pc #order-standard_cart.pl-cfgx .cart-body>p,body.pc #order-standard_cart.pl-cfgx .pl-cfgx-sub{color:var(--faint);font-size:12.5px;margin:-8px 0 16px}
/* panels */
body.pc #order-standard_cart.pl-cfgx .product-info,body.pc #order-standard_cart.pl-cfgx .pl-cfg-hero,body.pc #order-standard_cart.pl-cfgx .field-container,body.pc #order-standard_cart.pl-cfgx .view-cart-items-header,body.pc #order-standard_cart.pl-cfgx .view-cart-items,body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .tab-pane,body.pc #order-standard_cart.pl-cfgx .account-select-container .col-sm-12>*,body.pc #order-standard_cart.pl-cfgx #paymentGatewaysContainer,body.pc #order-standard_cart.pl-cfgx .already-registered{
  background:var(--panel) !important;border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;box-shadow:none !important}
body.pc #order-standard_cart.pl-cfgx .pl-cfg-hero{padding:16px 18px !important}
body.pc #order-standard_cart.pl-cfgx .pl-cfg-hero .pl-cfg-name,body.pc #order-standard_cart.pl-cfgx .pl-cfg-hero h1,body.pc #order-standard_cart.pl-cfgx .pl-cfg-hero .name{font-family:var(--display) !important;font-size:17px !important;font-weight:600 !important}
body.pc #order-standard_cart.pl-cfgx .pl-cfg-specs,body.pc #order-standard_cart.pl-cfgx .pl-cfg-feats{gap:8px}
body.pc #order-standard_cart.pl-cfgx .pl-cfg-specs>*,body.pc #order-standard_cart.pl-cfgx .pl-cfg-feats>*{background:var(--panel-2) !important;border:1px solid var(--border-soft) !important;border-radius:var(--r) !important;font-size:12.5px;padding:8px 10px !important}
body.pc #order-standard_cart.pl-cfgx .pl-cfg-specs svg,body.pc #order-standard_cart.pl-cfgx .pl-cfg-feats svg{width:22px;height:22px;padding:4px;border-radius:6px;background:var(--accent-soft);border:0;color:var(--accent)}
body.pc #order-standard_cart.pl-cfgx .field-container{padding:16px 18px !important;margin:0 0 12px !important}
body.pc #order-standard_cart.pl-cfgx .sub-heading{margin:16px 0 8px !important;padding:0 !important;border:0 !important}
body.pc #order-standard_cart.pl-cfgx .sub-heading span{background:transparent !important;padding:0 !important;font-size:10.5px !important;font-weight:600 !important;letter-spacing:.06em;text-transform:uppercase;color:var(--faint) !important;font-family:var(--font)}
body.pc #order-standard_cart.pl-cfgx .pl-cycle-chip{height:32px;padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--panel-2);color:var(--dim);font-size:12.5px;font-weight:500;box-shadow:none}
body.pc #order-standard_cart.pl-cfgx .pl-cycle-chip.on,body.pc #order-standard_cart.pl-cfgx .pl-cycle-chip.active{background:var(--accent-soft);border-color:var(--accent-line);color:var(--text)}
body.pc #order-standard_cart.pl-cfgx h3,body.pc #order-standard_cart.pl-cfgx h4,body.pc #order-standard_cart.pl-cfgx .pl-cfgx-title{font-family:var(--font) !important;font-size:13px !important;font-weight:600 !important;margin:14px 0 8px !important}
/* order summary */
body.pc #order-standard_cart.pl-cfgx #orderSummary,body.pc #order-standard_cart.pl-cfgx #orderSummary .order-summary,body.pc #order-standard_cart.pl-cfgx #scrollingPanelContainer .order-summary{background:var(--panel) !important;border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;box-shadow:none !important;border-top:1px solid var(--border) !important}
body.pc #order-standard_cart.pl-cfgx #orderSummary .order-summary{border:0 !important;background:transparent !important}
body.pc #order-standard_cart.pl-cfgx .order-summary h2,body.pc #order-standard_cart.pl-cfgx .order-summary .summary-title{font-family:var(--font) !important;font-size:12.5px !important;font-weight:600 !important;text-transform:uppercase;letter-spacing:.06em;color:var(--faint) !important}
body.pc #order-standard_cart.pl-cfgx .order-summary .summary-totals{border-color:var(--border-soft) !important}
body.pc #order-standard_cart.pl-cfgx .order-summary .summary-totals span,body.pc #order-standard_cart.pl-cfgx .order-summary .summary-totals .pull-right{font-family:var(--mono);font-size:12.5px}
body.pc #order-standard_cart.pl-cfgx .order-summary .pl-total,body.pc #order-standard_cart.pl-cfgx .order-summary .amt,body.pc #order-standard_cart.pl-cfgx .order-summary #totalTodayAmount,body.pc #order-standard_cart.pl-cfgx .order-summary .total-due-today .amt,body.pc #order-standard_cart.pl-cfgx .order-summary .total-due-today span.amt{font-family:var(--mono) !important;font-size:24px !important;font-weight:600 !important;color:var(--text) !important;-webkit-text-fill-color:currentColor;background:none !important;letter-spacing:-.02em}
body.pc #order-standard_cart.pl-cfgx #btnCompleteProductConfig,body.pc #order-standard_cart.pl-cfgx #checkout,body.pc #order-standard_cart.pl-cfgx #btnCompleteOrder{height:36px !important;padding:0 16px !important;border-radius:var(--r-sm) !important;background:linear-gradient(118deg,var(--accent-2),var(--accent)) !important;color:var(--accent-ink) !important;font-weight:600 !important;font-size:13px !important;box-shadow:var(--glow) !important;border:0 !important;font-family:var(--font)}
body.pc #order-standard_cart.pl-cfgx #btnCompleteProductConfig:hover,body.pc #order-standard_cart.pl-cfgx #checkout:hover,body.pc #order-standard_cart.pl-cfgx #btnCompleteOrder:hover{filter:brightness(1.08)}
body.pc #order-standard_cart.pl-cfgx .order-summary .btn-checkout,body.pc #order-standard_cart.pl-cfgx .order-summary a.btn{height:34px !important;border-radius:var(--r-sm) !important}
/* view cart */
body.pc #order-standard_cart.pl-cfgx .view-cart-items-header{background:transparent !important;border:0 !important;border-bottom:1px solid var(--border) !important;border-radius:0 !important;padding:0 14px 8px !important;font-size:10.5px !important;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint) !important}
body.pc #order-standard_cart.pl-cfgx .view-cart-items{padding:0 !important}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item{padding:14px !important;border-bottom:1px solid var(--border-soft) !important;background:transparent !important;border-radius:0 !important;box-shadow:none !important;margin:0 !important}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item:last-child{border-bottom:0 !important}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item-title,body.pc #order-standard_cart.pl-cfgx .view-cart-items .item-group{font-family:var(--font) !important;font-size:14px !important;font-weight:600 !important}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item-domain{font-family:var(--mono);font-size:12px;color:var(--accent)}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item-price span{font-family:var(--mono);font-size:14px;font-weight:600;color:var(--text)}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item-price small{color:var(--faint);font-weight:500}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item-price .btn,body.pc #order-standard_cart.pl-cfgx .view-cart-items .btn{height:26px !important;padding:0 8px !important;font-size:12px !important}
body.pc #order-standard_cart.pl-cfgx #btnEmptyCart{height:30px !important;padding:0 10px !important;font-size:12px !important;background:transparent !important;border:1px solid var(--border-strong) !important;color:var(--dim) !important;box-shadow:none !important;border-radius:var(--r-sm) !important}
body.pc #order-standard_cart.pl-cfgx #btnEmptyCart:hover{color:var(--red) !important;border-color:color-mix(in srgb,var(--red) 40%,transparent) !important}
body.pc #order-standard_cart.pl-cfgx .view-cart-tabs{margin-top:14px}
body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .nav-tabs{border-bottom:1px solid var(--border);margin:0 0 12px}
body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .nav-tabs .nav-link{font-size:12.5px;height:34px;padding:0 10px;color:var(--dim);font-weight:500;border:0;border-bottom:2px solid transparent}
body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .nav-tabs .nav-link.active{color:var(--text);border-bottom-color:var(--accent);background:transparent}
body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .tab-pane{padding:14px !important}
body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .tab-pane .form-group,body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .tab-pane form{display:flex;gap:8px;align-items:center;margin:0}
body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .tab-pane .input-group{flex:1;margin:0}
body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .tab-pane .btn{width:auto !important;height:32px !important;padding:0 14px !important;flex:none;background:rgba(56,189,248,.06) !important;border:1px solid rgba(125,211,252,.28) !important;color:var(--accent-2) !important;box-shadow:none !important;border-radius:var(--r-sm) !important;font-size:12.5px !important}
body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .tab-pane .btn:hover{background:rgba(56,189,248,.13) !important}
/* checkout */
body.pc #order-standard_cart.pl-cfgx .already-registered{padding:10px 14px !important;margin:0 0 16px !important}
body.pc #order-standard_cart.pl-cfgx .already-registered p{margin:0;font-size:12.5px;color:var(--dim)}
body.pc #order-standard_cart.pl-cfgx .account-select-container .col-sm-12>*{padding:12px 14px !important;margin:0 0 8px !important}
body.pc #order-standard_cart.pl-cfgx .account-select-container label,body.pc #order-standard_cart.pl-cfgx .account-select-container .custom-control-label{font-size:13px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text)}
body.pc #order-standard_cart.pl-cfgx .account-select-container .badge{margin-left:8px}
body.pc #order-standard_cart.pl-cfgx .account-select-container .account-details,body.pc #order-standard_cart.pl-cfgx .account-select-container p,body.pc #order-standard_cart.pl-cfgx .account-select-container small{font-size:12px;color:var(--faint)}
body.pc #order-standard_cart.pl-cfgx #totalDueToday{background:var(--panel) !important;border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;color:var(--text) !important;padding:10px 14px !important;font-size:13px !important;display:flex;align-items:center;justify-content:space-between;text-align:left !important}
body.pc #order-standard_cart.pl-cfgx #totalDueToday strong,body.pc #order-standard_cart.pl-cfgx #totalCartPrice{font-family:var(--mono);font-size:16px !important;color:var(--text) !important}
body.pc #order-standard_cart.pl-cfgx #paymentGatewaysContainer{padding:12px 14px !important;margin:8px 0 0 !important}
body.pc #order-standard_cart.pl-cfgx #paymentGatewaysContainer p.small{margin:0 0 8px;font-size:11.5px;color:var(--faint)}
body.pc #order-standard_cart.pl-cfgx #paymentGatewaysContainer .text-center{text-align:left !important;display:flex;flex-wrap:wrap;gap:8px 18px}
body.pc #order-standard_cart.pl-cfgx #paymentGatewaysContainer .custom-control,body.pc #order-standard_cart.pl-cfgx #paymentGatewaysContainer .radio,body.pc #order-standard_cart.pl-cfgx #paymentGatewaysContainer label{display:inline-flex;align-items:center;gap:8px;margin:0 !important;font-size:13px;color:var(--text);font-weight:500;text-transform:none;letter-spacing:0}
body.pc #order-standard_cart.pl-cfgx #frmCheckout textarea{min-height:90px}
body.pc #order-standard_cart.pl-cfgx #frmCheckout>.text-center{text-align:left !important;margin-top:14px}
body.pc #order-standard_cart.pl-cfgx .checkout-security-msg{background:transparent !important;border:0 !important;border-top:1px solid var(--border-soft) !important;border-radius:0 !important;padding:12px 0 0 !important;margin:14px 0 0 !important;color:var(--faint) !important;font-size:11.5px !important;display:flex;align-items:center;gap:10px}
body.pc #order-standard_cart.pl-cfgx .checkout-security-msg i{font-size:14px;color:var(--faint);width:auto;height:auto}
body.pc #order-standard_cart.pl-cfgx .checkout-security-msg strong{color:var(--dim)}
/* empty states within the flow */
body.pc #order-standard_cart.pl-cfgx .view-cart-empty{padding:34px 16px;text-align:center;color:var(--faint);font-size:12.5px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg)}
body.pc .pc-empty>.pc-btn{display:inline-flex;margin:14px auto 0}
body.pc .pc-empty{display:flex;flex-direction:column;align-items:center}
body.pc form:has(.pl-dom-empty) .btn-group{display:none}
@media(max-width:920px){body.pc #order-standard_cart.pl-cfgx .pl-cfgx-steps .st span{display:none}body.pc #order-standard_cart.pl-cfgx .pl-cfgx-steps .st.on span{display:inline}}

/* ---- v323: purchase-path fixes after the live walk ----
   view-cart total (id #totalDueToday.amt) gets the big mono figure back; the
   security note's floated children stopped floating; promo row stacks on phones */
body.pc #order-standard_cart.pl-cfgx .order-summary .total-due-today{display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding:12px 0 4px !important;border:0 !important;background:transparent !important}
body.pc #order-standard_cart.pl-cfgx .order-summary .total-due-today #totalDueToday,body.pc #order-standard_cart.pl-cfgx .order-summary .total-due-today .amt,body.pc #order-standard_cart.pl-cfgx .order-summary #totalDueToday.amt{font-family:var(--mono) !important;font-size:26px !important;font-weight:600 !important;color:var(--text) !important;background:none !important;border:0 !important;padding:0 !important;box-shadow:none !important;display:block;width:auto;-webkit-text-fill-color:currentColor;letter-spacing:-.02em;line-height:1.1}
body.pc #order-standard_cart.pl-cfgx .order-summary .total-due-today>span:last-child{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
body.pc #order-standard_cart.pl-cfgx .checkout-security-msg{display:flex !important;align-items:center;gap:10px;flex-wrap:nowrap;background:transparent !important;border:0 !important;border-top:1px solid var(--border-soft) !important;border-radius:0 !important;padding:12px 0 0 !important;margin:14px 0 0 !important;color:var(--faint) !important;font-size:11.5px !important;line-height:1.5}
body.pc #order-standard_cart.pl-cfgx .checkout-security-msg i{float:none !important;font-size:14px;color:var(--faint) !important;flex:none;width:auto;height:auto;margin:0}
body.pc #order-standard_cart.pl-cfgx .checkout-security-msg strong{margin:0 !important;float:none !important;flex:none}
body.pc #order-standard_cart.pl-cfgx .checkout-security-msg .clearfix,body.pc #order-standard_cart.pl-cfgx .checkout-security-msg div{float:none !important;display:inline;width:auto !important;overflow:visible !important;padding:0 !important;margin:0 !important;text-align:left !important}
body.pc #order-standard_cart.pl-cfgx .checkout-security-msg .clearfix::after,body.pc #order-standard_cart.pl-cfgx .checkout-security-msg::after{display:none}
@media(max-width:760px){
  body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .tab-pane .form-group,body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .tab-pane form{flex-direction:column;align-items:stretch}
  body.pc #order-standard_cart.pl-cfgx .view-cart-tabs .tab-pane .btn{width:100% !important}
  body.pc #order-standard_cart.pl-cfgx .checkout-security-msg{flex-wrap:wrap}
}

/* ============================================================
   v324 - the service page: VPS control / dedicated Server
   Management card, action buttons, usage bars, reinstall panel
   and the OS modal in the console voice (papilio.css .pl-vzc-*
   rules are un-prefixed, so body.pc + the class wins).
   ============================================================ */
body.pc .pl-vzc{background:var(--panel) !important;border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;box-shadow:none !important;margin:0 0 14px;overflow:visible}
body.pc .pl-vzc::before{display:none}
body.pc .pl-vzc .card-body{padding:16px 18px}
body.pc .pl-vzc-head{margin-bottom:14px;gap:10px}
body.pc .pl-vzc-title{font-family:var(--font);font-size:13.5px;font-weight:600;gap:9px;color:var(--text)}
body.pc .pl-vzc-ic{width:26px;height:26px;border-radius:7px;background:var(--accent-soft);border:0;box-shadow:none;color:var(--accent)}
body.pc .pl-vzc-ic svg{width:14px;height:14px}
body.pc .pl-dsm-note{font-size:12.5px;color:var(--dim);margin:-6px 0 14px}
body.pc .pl-vzc-power{height:24px;padding:0 9px;border-radius:5px;font-size:11.5px;font-weight:600;gap:6px;border:0}
body.pc .pl-vzc-power .dot{width:6px;height:6px}
body.pc .pl-vzc-refresh{width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:transparent;color:var(--dim)}
body.pc .pl-vzc-refresh:hover{color:var(--accent);background:var(--accent-soft)}
body.pc .pl-vzc-refresh svg{width:14px;height:14px}
/* specs chips -> facts */
body.pc .pl-vzc-specs{gap:8px;margin-bottom:14px}
body.pc .pl-vzc-chip{padding:9px 12px;border-radius:var(--r);background:var(--panel-2);border:1px solid var(--border-soft);gap:9px}
body.pc .pl-vzc-chip svg{width:16px;height:16px;color:var(--accent)}
body.pc .pl-vzc-chip .l{font-size:10px;font-weight:600;color:var(--faint);letter-spacing:.06em}
body.pc .pl-vzc-chip .v{font-size:12.5px;font-weight:600;font-family:var(--mono);color:var(--text)}
/* IP chips */
body.pc .pl-dsm-ips,body.pc .pl-vzc-ips{gap:8px;margin:0 0 14px}
body.pc .pl-svc-hero-ip{height:30px;padding:0 10px;border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--border-strong);font-family:var(--mono);font-size:12.5px;color:var(--text);display:inline-flex;align-items:center;gap:8px;box-shadow:none}
body.pc .pl-svc-hero-ip svg{width:13px;height:13px;color:var(--faint)}
/* actions: a row of console secondary buttons, colour only on hover */
body.pc .pl-vzc-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0}
body.pc .pl-vzc-btn{flex:0 0 auto;height:32px;padding:0 12px;border-radius:var(--r-sm);font-family:var(--font);font-weight:600;font-size:12.5px;gap:7px;background:rgba(56,189,248,.06);border:1px solid rgba(125,211,252,.28);color:var(--accent-2) !important;box-shadow:none;transform:none !important;text-decoration:none !important;line-height:1;transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
body.pc .pl-vzc-btn svg{width:14px;height:14px}
body.pc .pl-vzc-btn:hover{background:rgba(56,189,248,.13);border-color:rgba(125,211,252,.48);color:var(--ice-1) !important}
body.pc .pl-vzc-btn.on{color:var(--green) !important;border-color:color-mix(in srgb,var(--green) 35%,transparent)}
body.pc .pl-vzc-btn.on:hover{background:var(--green-soft);border-color:var(--green)}
body.pc .pl-vzc-btn.off,body.pc .pl-vzc-btn.po{color:var(--dim) !important}
body.pc .pl-vzc-btn.off:hover,body.pc .pl-vzc-btn.po:hover{background:var(--red-soft);border-color:color-mix(in srgb,var(--red) 50%,transparent);color:var(--red) !important}
body.pc .pl-vzc-btn.ri,body.pc .pl-dsm .pl-vzc-btn.rs{color:var(--amber) !important;border-color:color-mix(in srgb,var(--amber) 35%,transparent)}
body.pc .pl-vzc-btn.ri:hover,body.pc .pl-dsm .pl-vzc-btn.rs:hover{background:var(--amber-soft);border-color:var(--amber)}
body.pc .pl-vzc-btn.adv{color:var(--violet) !important;border-color:color-mix(in srgb,var(--violet) 35%,transparent)}
body.pc .pl-vzc-btn.adv:hover{background:var(--violet-soft);border-color:var(--violet)}
body.pc .pl-vzc-btn.danger{background:transparent !important;border-color:color-mix(in srgb,var(--red) 40%,transparent) !important;color:var(--red) !important}
body.pc .pl-vzc-btn.danger:hover{background:var(--red-soft) !important}
body.pc .pl-dsm-pend{height:26px;padding:0 10px;border-radius:5px;font-size:11.5px;font-weight:600;background:var(--amber-soft);color:var(--amber) !important;border:0}
body.pc .pl-dsm-pend .dot{width:6px;height:6px}
/* usage */
body.pc .pl-vzc-usage{gap:12px;margin-top:14px}
body.pc .pl-vzc-metric .mh{font-size:11px;color:var(--faint);font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
body.pc .pl-vzc-metric .mv{font-family:var(--mono);font-weight:600;color:var(--text);text-transform:none;letter-spacing:0;font-size:12px}
body.pc .pl-vzc-metric .mbar{height:6px;background:var(--raise)}
body.pc .pl-vzc-metric .mbar i{background:linear-gradient(90deg,var(--accent-2),var(--accent))}
body.pc .pl-vzc-raw summary{font-size:11.5px;color:var(--faint)}
body.pc .pl-vzc-raw pre{background:var(--panel-2);border-color:var(--border);font-family:var(--mono);font-size:11px;color:var(--dim)}
/* reinstall panel */
body.pc .pl-vzc-reinstall{margin-top:14px;padding:16px;border-radius:var(--r-lg);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent);background:var(--amber-soft)}
body.pc .pl-vzc-reinstall .rh{font-size:12.5px;font-weight:600;margin-bottom:12px}
body.pc .pl-vzc-reinstall .rg{gap:12px}
body.pc .pl-vzc-reinstall .rf label{font-size:10.5px;color:var(--faint);letter-spacing:.06em}
body.pc .pl-vzc-mini{width:32px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:var(--panel-2);color:var(--dim)}
body.pc .pl-vzc-reinstall .rc{font-size:12.5px;color:var(--text);font-weight:500}
body.pc .pl-vzc-reinstall .ra .pl-vzc-btn{height:32px;padding:0 14px}
/* OS modal (dedicated) */
body.pc .pio-modal{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:22px 22px 18px}
body.pc .pio-modal h4{font-family:var(--font);font-size:15px;font-weight:600}
body.pc .pio-modal p{font-size:12.5px;color:var(--dim)}
body.pc .pio-modal-btn{height:32px;padding:0 14px;border-radius:var(--r-sm);border:1px solid var(--border-strong);background:transparent;color:var(--dim);font-family:var(--font);font-size:12.5px;font-weight:600}
body.pc .pio-modal-btn:hover{background:var(--raise);color:var(--text)}
body.pc .pio-modal-btn-primary{background:linear-gradient(118deg,var(--accent-2),var(--accent));border-color:transparent;color:var(--accent-ink);box-shadow:var(--glow)}
body.pc .pio-modal-btn-primary:hover{filter:brightness(1.08);background:linear-gradient(118deg,var(--accent-2),var(--accent));color:var(--accent-ink)}
/* the "Server Information" tab card sits flush under the facts */
body.pc .pc-facts+.nav-tabs,body.pc .pc-facts+.pc-tabs{margin-top:2px}
body.pc .product-details-tab-container{margin-bottom:14px}
/* pay-invoice notice on the service page joins the rail voice */
body.pc .pl-content>.alert.alert-warning:has(.btn),body.pc .pl-content>.alert:has(> a.btn:first-child){padding:8px 12px !important;font-size:12.5px}
body.pc .pl-content>.alert:has(> a.btn:first-child)>a.btn{margin-left:0;margin-right:10px;order:2;margin-left:auto}
@media(max-width:760px){
  body.pc .pl-vzc .card-body{padding:14px}
  body.pc .pl-vzc-btn{flex:1 1 calc(50% - 4px);justify-content:center}
}

/* ---- v322: knowledgebase category + article ---- */
body.pc .pc-crumbs{font-size:12px;color:var(--faint);margin-bottom:6px;display:flex;gap:8px;align-items:center}
body.pc .pc-crumbs a{color:var(--dim)} body.pc .pc-crumbs a:hover{color:var(--accent)}
body.pc .pc-crumbs b{color:var(--dim);font-weight:500}
body.pc .pc-kblist .pc-act .m span{font-family:var(--font);color:var(--faint);font-size:12px;white-space:normal;line-height:1.45}
body.pc .pc-kblist .pc-act .t{color:var(--ghost)}
body.pc .pc-kblist .pc-act:hover .t{color:var(--accent)}
body.pc .pc-kbgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}
body.pc .pc-article{padding:26px 30px 22px;font-size:14px;line-height:1.7;color:var(--text)}
body.pc .pc-article h2,body.pc .pc-article h3{font-size:15px;font-weight:600;margin:22px 0 8px;color:var(--text)}
body.pc .pc-article h3{font-size:14px}
body.pc .pc-article p{margin:0 0 12px;max-width:72ch}
body.pc .pc-article ul,body.pc .pc-article ol{margin:0 0 14px;padding-left:22px;max-width:72ch}
body.pc .pc-article li{margin-bottom:6px}
body.pc .pc-article a{color:var(--accent)}
body.pc .pc-article strong{color:var(--text);font-weight:600}
body.pc .pc-article code{font-family:var(--mono);font-size:12.5px;background:var(--panel-2);border:1px solid var(--border);border-radius:5px;padding:1px 6px;color:var(--accent-2)}
body.pc .pc-article pre{font-family:var(--mono);font-size:12.5px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;overflow:auto;color:var(--text);margin:0 0 14px}
body.pc .pc-article pre code{background:none;border:0;padding:0;color:inherit}
body.pc .pc-vote{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:16px;border-top:1px solid var(--border-soft);font-size:12.5px;color:var(--dim);flex-wrap:wrap}
body.pc .pc-kbhelp{padding:16px 18px;display:flex;flex-direction:column;gap:6px;margin-top:12px}
body.pc .pc-kbhelp b{font-size:13.5px;font-weight:600}
body.pc .pc-kbhelp span{font-size:12.5px;color:var(--dim);line-height:1.5}
body.pc .pc-kbhelp .pc-btn{align-self:flex-start;margin-top:8px}
body.pc .pc-kbgrid aside .pc-card:first-child{margin-top:0}
@media(max-width:900px){body.pc .pc-kbgrid{grid-template-columns:1fr}body.pc .pc-article{padding:20px 18px}}
@media print{body.pc .pl-side,body.pc .pl-top,body.pc .pc-notices,body.pc .pc-kbgrid aside,body.pc .pc-vote,body.pc .pc-pagehead .actions,#plChat{display:none !important}body.pc .pc-kbgrid{display:block}}


/* ============================================================
   v324 (2026-09-13) - Ali's review, client area batch 1
   1. guest shell: public pages (store, cart, domains, knowledgebase,
      announcements, tickets, contact, portal home) share the console
      with a guest sidebar and a sign-in button.
   2. new-ticket step 2: one compact card, icon inputs, custom
      dropdowns, attachments in plain sight, dark captcha.
   3. captcha: dark, click-to-refresh, on every image captcha.
   ============================================================ */

/* ---- 1. guest shell ---- */
body.pc-guest .pl-side-auth{margin-top:auto;border-top:1px solid var(--border);padding:12px;display:grid;gap:8px}
body.pc-guest .pl-side-auth .pc-btn{width:100%;justify-content:center;height:34px}
body.pc-guest .pc-top-signin{height:32px;padding:0 14px}
body.pc-guest .pc-top-signin svg{width:14px;height:14px}
body.pc-guest .pl-content>p:first-child{color:var(--dim)}

/* ---- 3. captcha (shared) ---- */
body.pc .pc-captcha{display:flex;align-items:flex-end;gap:8px;margin:0 0 4px}
body.pc .pc-captcha>.text-center{flex:1;margin:0 !important;padding:0;min-width:0}
body.pc .pc-captcha .col-md-8{flex:none;width:100%;max-width:none;padding:0;margin:0 !important}
body.pc .pc-captcha #default-captcha-domainchecker{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 !important;margin:0}
body.pc .pc-captcha #default-captcha-domainchecker p{flex:0 0 100%;font-size:11px;color:var(--faint);margin:0 0 2px;text-align:left;line-height:1.4}
body.pc .pc-captcha #default-captcha-domainchecker>.col-6{flex:1 1 auto;width:auto;max-width:none;padding:0}
body.pc .pc-captcha #default-captcha-domainchecker>.captchaimage{flex:0 0 auto}
body.pc #inputCaptchaImage{height:34px;width:auto;border-radius:var(--r-sm);display:block;cursor:pointer;border:1px solid var(--border-strong);
  filter:invert(.93) hue-rotate(185deg) saturate(1.5) contrast(1.05)}
body.pc #inputCaptcha{width:100% !important;min-width:96px;height:34px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase}
body.pc .pl-captcha-refresh{width:34px;height:34px;flex:none;border-radius:var(--r-sm);border:1px solid rgba(125,211,252,.28);background:transparent;color:var(--dim);display:grid;place-items:center;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
body.pc .pl-captcha-refresh:hover{background:var(--accent-soft);color:var(--accent-2)}
body.pc .pl-captcha-refresh svg{width:15px;height:15px}
body.pc .pc-captcha .g-recaptcha,body.pc .pc-captcha .recaptcha-container{margin:0 auto}

/* ---- 2. new ticket ---- */
body.pc .pc-tgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
body.pc .pc-tmain{padding:16px 16px 10px}
body.pc .pc-tf{margin:0 0 12px;min-width:0}
body.pc .pc-tf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
body.pc .pc-tf-row.three{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
body.pc .pc-tf label{font-size:11.5px;color:var(--dim);margin:0 0 5px;font-weight:500}
body.pc .pc-in{position:relative}
body.pc .pc-in>svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--faint);pointer-events:none;transition:color .15s var(--ease)}
body.pc .pc-in .form-control{padding-left:32px;height:34px}
body.pc .pc-in:focus-within>svg{color:var(--accent)}
body.pc textarea.pc-msg{min-height:132px;height:132px;resize:vertical;font-size:13px;line-height:1.55}
body.pc .pc-tf-hint{font-size:11px;color:var(--faint);margin-top:6px;line-height:1.45}
body.pc .pc-tmain .form-control:disabled{opacity:.72}
body.pc #customFieldsContainer .form-group{margin:0 0 12px}
body.pc .pc-tside{display:grid;gap:12px;position:sticky;top:62px}
body.pc .pc-attach-body{padding:12px 14px 12px}
body.pc .pc-attach-row{display:flex;gap:8px;align-items:stretch;margin:0 0 8px !important;flex-wrap:nowrap}
body.pc .pc-attach-row .custom-file{flex:1;height:34px;position:relative;min-width:0;margin:0}
body.pc .pc-attach-row .custom-file-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;z-index:2;margin:0}
body.pc .pc-attach-row .custom-file-label{position:absolute;inset:0;margin:0;height:34px;display:flex;align-items:center;padding:0 10px;border:1px dashed rgba(125,211,252,.4);border-radius:var(--r-sm);background:var(--panel-2);color:var(--dim);font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:32px;transition:border-color .15s var(--ease),color .15s var(--ease)}
body.pc .pc-attach-row .custom-file:hover .custom-file-label{border-color:var(--accent);color:var(--text)}
body.pc .pc-attach-row .custom-file-label::after{display:none !important}
body.pc .pc-attach-row .input-group-append{display:flex}
body.pc .pc-attach-row .input-group-append .btn{height:34px;white-space:nowrap;border-radius:var(--r-sm) !important}
body.pc .pc-attach .file-upload.w-hidden{display:none}
body.pc .pc-tsubmit{padding:14px;display:grid;gap:8px}
body.pc .pc-tsubmit .pc-btn{width:100%;justify-content:center}
body.pc .pc-tsubmit .pc-btn svg{width:15px;height:15px}
body.pc .pc-tsla{display:flex;align-items:center;gap:6px;margin:2px 0 0}
body.pc .pc-tsla .d{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft);display:inline-block;flex:none}
@media(max-width:900px){body.pc .pc-tgrid{grid-template-columns:1fr} body.pc .pc-tside{position:static}}
@media(max-width:560px){body.pc .pc-tf-row{grid-template-columns:1fr}}

/* ---- custom dropdown (console.js builds it on .pc-sel select) ---- */
body.pc .pc-sel{position:relative}
body.pc .pc-sel.has-dd>select{position:absolute;opacity:0;pointer-events:none;height:0 !important;width:0;padding:0;margin:0;border:0 !important}
body.pc .pc-dd-btn{width:100%;height:34px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;background:var(--panel-2);border:1px solid var(--border-strong);border-radius:var(--r-sm);color:var(--text);font:inherit;font-size:12.5px;cursor:pointer;text-align:left;transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
body.pc .pc-dd-btn span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.pc .pc-dd-btn i{width:7px;height:7px;flex:none;border-right:1.6px solid var(--dim);border-bottom:1.6px solid var(--dim);transform:rotate(45deg) translate(-1px,-1px);transition:transform .22s var(--ease)}
body.pc .pc-dd-btn:hover{border-color:var(--accent-line)}
body.pc .pc-sel.open .pc-dd-btn{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
body.pc .pc-sel.open .pc-dd-btn i{transform:rotate(225deg) translate(-2px,-2px)}
body.pc .pc-dd-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:var(--panel);border:1px solid var(--border-strong);border-radius:var(--r);box-shadow:var(--sh-lg);padding:6px;opacity:0;transform:translateY(-6px) scale(.985);transform-origin:top;pointer-events:none;transition:opacity .18s var(--ease),transform .24s var(--ease);max-height:260px;overflow:auto}
body.pc .pc-sel.open .pc-dd-list{opacity:1;transform:none;pointer-events:auto}
body.pc .pc-dd-opt{padding:8px 10px;border-radius:6px;font-size:12.5px;color:var(--dim);cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .12s var(--ease),color .12s var(--ease)}
body.pc .pc-dd-opt:hover{background:var(--raise);color:var(--text)}
body.pc .pc-dd-opt.on{background:var(--accent-soft);color:var(--text);font-weight:600}
body.pc .pc-dd-opt.on::after{content:"";margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--accent)}


/* ============================================================
   v325 (2026-09-13) - Ali's review, client area batch 2
   portal home hub · domain search page · pre-sales contact ·
   store card polish · shared spinner
   ============================================================ */
@keyframes pcspin{to{transform:rotate(360deg)}}
body.pc .pc-spin{display:inline-block;width:14px;height:14px;border:2px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:pcspin .8s linear infinite;vertical-align:-3px;margin-right:4px}

/* ---- portal home ---- */
body.pc .pc-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);overflow:hidden;position:relative;min-height:270px;margin:0 0 18px}
body.pc .pc-hero-in{padding:30px 32px 26px;position:relative;z-index:2;min-width:0}
body.pc .pc-hero .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:8px;margin:0 0 14px}
body.pc .pc-hero .k .d{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft);display:inline-block}
body.pc .pc-hero h1{font-family:var(--display);font-size:clamp(26px,3.2vw,36px);font-weight:600;letter-spacing:-.025em;line-height:1.05;margin:0 0 12px}
body.pc .pc-hero h1 .g{background:linear-gradient(100deg,var(--ice-1) 10%,var(--accent) 60%,#7aa8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
body.pc .pc-hero p{color:var(--dim);font-size:14px;line-height:1.6;max-width:54ch;margin:0 0 18px}
body.pc .pc-hero-cta{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
body.pc .pc-hero-cta .pc-btn svg{width:15px;height:15px}
body.pc .pc-hero-facts{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--faint);align-items:center}
body.pc .pc-hero-facts b{color:var(--text);font-weight:600;margin-right:4px}
body.pc .pc-hero-facts .st{display:inline-flex;align-items:center;gap:7px;color:var(--green);text-decoration:none}
body.pc .pc-hero-facts .st i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
body.pc .pc-hero-art{position:relative;min-height:220px;display:grid;place-items:center;overflow:hidden;border-left:1px solid var(--border-soft);background:radial-gradient(60% 60% at 50% 50%,var(--accent-soft),transparent 70%)}
body.pc .pc-hero-art img{width:min(230px,70%);height:auto;filter:drop-shadow(0 20px 40px rgba(56,189,248,.35));position:relative;z-index:1;animation:pcfloat 6s ease-in-out infinite}
@keyframes pcfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
body.pc .pc-hero-art .glow{position:absolute;border-radius:50%;pointer-events:none}
body.pc .pc-hero-art .g1{width:60%;height:60%;left:-10%;top:-10%;background:radial-gradient(circle,rgba(56,189,248,.35),transparent 62%);animation:hg1 9s ease-in-out infinite alternate}
body.pc .pc-hero-art .g2{width:55%;height:55%;right:-12%;bottom:-12%;background:radial-gradient(circle,rgba(14,116,244,.35),transparent 62%);animation:hg2 11s ease-in-out infinite alternate}
@keyframes hg1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(40px,30px,0) scale(1.15)}}
@keyframes hg2{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-36px,-30px,0) scale(.9)}}
body.pc .pc-homegroups a .t{flex:1;min-width:0}
body.pc .pc-homegroups a .pc-tile{color:var(--accent)}
body.pc .pc-homegroups a .pc-tile svg{width:22px;height:22px;stroke-width:1.6}
body.pc .pc-homegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
body.pc .pc-homegrid .pc-card+.pc-card{margin-top:0}
body.pc .pc-homegrid .pc-act .m span{font-family:var(--font);font-size:11.5px;color:var(--dim);white-space:normal}
body.pc .pc-homeauth{padding:16px}
body.pc .pc-homeauth p{color:var(--dim);font-size:12.5px;line-height:1.55;margin:0 0 14px}
body.pc .pc-homeauth .row2{display:flex;gap:8px;flex-wrap:wrap}
body.pc .pc-homeauth .row2 .pc-btn{flex:1;justify-content:center;height:34px}
body.pc .pc-homeauth-tg{display:flex;align-items:center;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--border-soft);font-size:12px;color:var(--dim)}
body.pc .pc-homeauth-tg svg{width:16px;height:16px;color:var(--accent)}
@media(max-width:900px){
  body.pc .pc-hero{grid-template-columns:1fr}
  body.pc .pc-hero-art{min-height:150px;border-left:0;border-top:1px solid var(--border-soft)}
  body.pc .pc-hero-art img{width:130px}
  body.pc .pc-homegrid{grid-template-columns:1fr}
}

/* ---- domain search ---- */
body.pc .pl-domreg .pc-domsearch{padding:16px 16px 14px}
body.pc .pl-domreg .pc-dom-bar{position:relative;display:flex;gap:10px;align-items:stretch}
body.pc .pl-domreg .pc-dom-ic{position:absolute;left:14px;top:24px;transform:translateY(-50%);width:20px;height:20px;color:var(--faint);pointer-events:none;z-index:2}
body.pc .pl-domreg .pc-dom-ic svg{width:20px;height:20px}
body.pc .pl-domreg .pc-dom-bar .form-control,body.pc .pl-domreg .pc-dom-bar textarea{flex:1;height:48px !important;padding:0 14px 0 44px !important;font-size:15px;font-family:var(--mono);letter-spacing:.01em;border-radius:var(--r) !important;line-height:46px !important;resize:none;overflow:hidden;min-width:0}
body.pc .pl-domreg .pc-dom-bar textarea::placeholder,body.pc .pl-domreg .pc-dom-bar .form-control::placeholder{font-family:var(--font);letter-spacing:0;color:var(--faint)}
body.pc .pl-domreg .pc-dom-go{height:48px !important;padding:0 20px !important;border-radius:var(--r) !important;font-size:13.5px !important;display:inline-flex;align-items:center;gap:9px;flex:none;
  background:linear-gradient(118deg,#0ea5e9,#0369a1) !important;color:#fff !important;border:0 !important;box-shadow:0 12px 30px -12px rgba(14,165,233,.9);position:relative;overflow:hidden;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
body.pc .pl-domreg .pc-dom-go::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .5s var(--ease)}
body.pc .pl-domreg .pc-dom-go:hover{transform:translateY(-1px);box-shadow:0 16px 34px -12px rgba(14,165,233,1);filter:none}
body.pc .pl-domreg .pc-dom-go:hover::after{left:120%}
body.pc .pl-domreg .pc-dom-go svg{width:16px;height:16px}
body.pc .pl-domreg .pc-dom-opts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
body.pc .pl-domreg .pc-dom-opts .btn-group{display:inline-block}
body.pc .pl-domreg .pc-dom-opts .multiselect{height:32px;padding:0 12px !important;border-radius:var(--r-sm) !important;background:var(--panel-2) !important;border:1px solid var(--border-strong) !important;color:var(--text) !important;font-size:12.5px !important;box-shadow:none}
body.pc .pl-domreg .pc-dom-opts .multiselect-container{background:var(--panel) !important;border:1px solid var(--border-strong) !important;border-radius:var(--r) !important;box-shadow:var(--sh-lg);padding:6px;max-height:260px;overflow:auto;min-width:200px}
body.pc .pl-domreg .pc-dom-opts .multiselect-container li a,body.pc .pl-domreg .pc-dom-opts .multiselect-container .dropdown-item{color:var(--text) !important;background:transparent !important;padding:5px 8px;border-radius:6px;font-size:12.5px}
body.pc .pl-domreg .pc-dom-opts .multiselect-container li.active a,body.pc .pl-domreg .pc-dom-opts .multiselect-container .dropdown-item.active{background:var(--accent-soft) !important}
body.pc .pl-domreg .pc-dom-opts .multiselect-container input[type=text]{height:30px;width:100%}
body.pc .pl-domreg .pc-dom-safe{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:var(--dim);cursor:pointer;user-select:none;height:32px}
body.pc .pl-domreg .pc-dom-safe input{position:absolute;opacity:0;width:0;height:0}
body.pc .pl-domreg .pc-dom-safe .sw{width:34px;height:18px;border-radius:999px;background:var(--raise-2);position:relative;transition:background .2s var(--ease);flex:none}
body.pc .pl-domreg .pc-dom-safe .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
body.pc .pl-domreg .pc-dom-safe input:checked+.sw{background:var(--accent)}
body.pc .pl-domreg .pc-dom-safe input:checked+.sw::after{transform:translateX(16px)}
body.pc .pl-domreg .pc-domcaptcha{margin-top:12px;max-width:560px}
body.pc .pl-domreg .pc-domcaptcha.pc-captcha{align-items:flex-end}
body.pc .pl-domreg .pc-domcaptcha .default-captcha{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;min-width:0}
body.pc .pl-domreg .pc-domcaptcha .default-captcha p{flex:0 0 100%;font-size:11px;color:var(--faint);margin:0 0 2px;line-height:1.4}
body.pc .pl-domreg .pc-domcaptcha .default-captcha>div{flex:1 1 auto;min-width:0}
body.pc .pl-domreg .pc-domcaptcha .default-captcha>.captchaimage{flex:0 0 auto}
body.pc .pl-domreg .pc-dom-foot{display:flex;gap:16px;margin-top:14px;font-size:11.5px;color:var(--faint);flex-wrap:wrap;align-items:center}
body.pc .pl-domreg .pc-dom-foot span{display:inline-flex;align-items:center;gap:6px}
body.pc .pl-domreg .pc-dom-foot i.ok{width:14px;height:14px;border-radius:50%;background:var(--green-soft);position:relative;flex:none}
body.pc .pl-domreg .pc-dom-foot i.ok::after{content:"";position:absolute;left:4px;top:3px;width:4px;height:7px;border:solid var(--green);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
/* results (markup owned by standard_cart/js/scripts.js) */
body.pc .pl-domreg .pc-domres{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;animation:pcfade .3s var(--ease)}
body.pc .pl-domreg .primary-domain-header{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 8px;background:transparent;border:0;padding:0}
body.pc .pl-domreg .domain-checker-result-headline{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;text-align:left}
body.pc .pl-domreg .domain-lookup-loader{color:var(--dim);font-size:13px;margin:0}
body.pc .pl-domreg .domain-checker-result-headline p{margin:0 0 6px;font-size:13px}
body.pc .pl-domreg .domain-available{color:var(--green);font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em}
body.pc .pl-domreg .domain-unavailable,body.pc .pl-domreg .domain-tld-unavailable,body.pc .pl-domreg .domain-error{color:var(--red);font-weight:600}
body.pc .pl-domreg .domain-invalid{color:var(--amber);font-weight:600}
body.pc .pl-domreg .domain-length-restrictions{display:block;color:var(--dim);font-weight:400;font-size:12px}
body.pc .pl-domreg .domain-price{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 0 !important}
body.pc .pl-domreg .domain-price .price{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--text);padding:6px 12px;border-radius:var(--r);background:var(--accent-soft);border:1px solid var(--accent-line);line-height:1}
body.pc .pl-domreg .domain-price .price:empty{display:none}
body.pc .pl-domreg .btn-add-to-cart{height:36px;padding:0 16px !important;font-size:13px !important}
body.pc .pl-domreg .domain-contact-support{height:34px}
body.pc .pl-domreg .spotlight-tlds{margin:12px 0 0}
body.pc .pl-domreg .spotlight-tlds-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
body.pc .pl-domreg .spotlight-tld-container{width:auto !important;float:none !important;padding:0 !important}
body.pc .pl-domreg .spotlight-tld{background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px;text-align:center;font-family:var(--display);font-weight:600;font-size:16px;color:var(--text);display:flex;flex-direction:column;gap:8px;align-items:center}
body.pc .pl-domreg .spotlight-tld .price{font-family:var(--mono);font-size:12.5px;color:var(--ice-1);font-weight:500}
body.pc .pl-domreg .spotlight-tld .btn{height:28px;font-size:12px !important;padding:0 10px !important}
body.pc .pl-domreg .spotlight-tld .btn.unavailable,body.pc .pl-domreg .spotlight-tld .btn.invalid{background:var(--red-soft) !important;color:var(--red) !important;border:0 !important;opacity:1}
body.pc .pl-domreg .spotlight-tld .btn-add-to-cart{background:linear-gradient(118deg,var(--accent-2),var(--accent)) !important;color:var(--accent-ink) !important;border:0 !important}
body.pc .pl-domreg .suggested-domains{margin-top:12px;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--panel-2)}
body.pc .pl-domreg .suggested-domains .card-header{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:10px 14px;border-bottom:1px solid var(--border) !important}
body.pc .pl-domreg .suggested-domains .card-body{padding:12px 14px;color:var(--dim);font-size:12.5px}
body.pc .pl-domreg .domain-suggestion{display:flex;align-items:center;gap:0;padding:10px 14px;border:0 !important;border-bottom:1px solid var(--border-soft) !important;background:transparent !important;color:var(--text);margin:0;border-radius:0 !important;flex-wrap:wrap}
body.pc .pl-domreg .domain-suggestion .domain{font-family:var(--mono);font-size:13.5px;color:var(--text)}
body.pc .pl-domreg .domain-suggestion .extension{font-family:var(--mono);font-size:13.5px;color:var(--accent)}
body.pc .pl-domreg .domain-suggestion .promo{margin-left:8px}
body.pc .pl-domreg .domain-suggestion .actions{margin-left:auto;display:flex;gap:10px;align-items:center}
body.pc .pl-domreg .domain-suggestion .actions .price{font-family:var(--mono);font-size:13px;color:var(--ice-1);padding:4px 9px;border-radius:6px;background:var(--accent-soft)}
body.pc .pl-domreg .domain-suggestion .btn{height:30px;font-size:12px !important;padding:0 12px !important}
body.pc .pl-domreg .more-suggestions{padding:10px 14px;background:transparent;border-top:1px solid var(--border-soft) !important;font-size:12.5px}
body.pc .pl-domreg .domain-suggestions-warning{padding:8px 14px 10px;font-size:11px;color:var(--faint)}
body.pc .pl-domreg .domain-suggestions-warning p{margin:0}
body.pc .pl-domreg .sales-group-hot,body.pc .pl-domreg .sales-group-new,body.pc .pl-domreg .sales-group-sale,body.pc .pl-domreg [class*="spotlight-tld-"]:not(.spotlight-tld-container){display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:var(--amber-soft);color:var(--amber)}
/* TLD grid */
body.pc .pl-domreg .pc-tldhead{margin:18px 0 8px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
body.pc .pl-domreg .pc-tldhead span{color:var(--faint);font-weight:500;text-transform:none;letter-spacing:0;font-size:11.5px}
body.pc .pl-domreg .pc-tldgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
body.pc .pl-domreg .pc-tld{display:flex;flex-direction:column;align-items:flex-start;gap:5px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 14px;color:var(--text);cursor:pointer;text-align:left;position:relative;font:inherit;transition:border-color .15s var(--ease),transform .2s var(--ease),background .15s var(--ease)}
body.pc .pl-domreg .pc-tld:hover{border-color:var(--border-strong);background:var(--panel-2);transform:translateY(-1px)}
body.pc .pl-domreg .pc-tld b{font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1}
body.pc .pl-domreg .pc-tld b i{font-style:normal;color:var(--accent)}
body.pc .pl-domreg .pc-tld em{font-style:normal;font-family:var(--mono);font-size:12px;color:var(--dim)}
body.pc .pl-domreg .pc-tld em small{font-size:10px;color:var(--faint);margin-left:2px}
body.pc .pl-domreg .pc-tld.deal em{color:var(--ice-1)}
body.pc .pl-domreg .pc-tld .pc-badge{position:absolute;top:10px;right:10px}
@media(max-width:640px){
  body.pc .pl-domreg .pc-dom-bar{flex-wrap:wrap}
  body.pc .pl-domreg .pc-dom-go{width:100%;justify-content:center}
  body.pc .pl-domreg .pc-tldgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.pc .pl-domreg .domain-suggestion .actions{width:100%;margin:8px 0 0;justify-content:space-between}
}

/* ---- pre-sales contact ---- */
body.pc .pc-contact{max-width:1080px;margin:0 auto}
body.pc .pc-contact-hero{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--border);padding:38px 36px 118px;
  background:linear-gradient(165deg,rgba(14,116,244,.22),rgba(56,189,248,.10) 40%,rgba(8,14,24,.2) 70%),var(--panel)}
body.pc .pc-contact-hero .glow{position:absolute;border-radius:50%;pointer-events:none}
body.pc .pc-contact-hero .g1{width:520px;height:520px;left:-160px;top:-260px;background:radial-gradient(circle,rgba(56,189,248,.28),transparent 62%);animation:hg1 10s ease-in-out infinite alternate}
body.pc .pc-contact-hero .g2{width:460px;height:460px;right:-120px;top:-200px;background:radial-gradient(circle,rgba(14,116,244,.3),transparent 62%);animation:hg2 12s ease-in-out infinite alternate}
body.pc .pc-contact-hero .art{position:absolute;right:6%;top:18px;width:200px;opacity:.75;filter:drop-shadow(0 20px 40px rgba(56,189,248,.4));animation:pcfloat 7s ease-in-out infinite;pointer-events:none}
body.pc .pc-contact-hero .k{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
body.pc .pc-contact-hero h1{position:relative;font-family:var(--display);font-size:clamp(28px,3.4vw,38px);font-weight:600;letter-spacing:-.025em;line-height:1.05;margin:0 0 10px}
body.pc .pc-contact-hero h1 .g{background:linear-gradient(100deg,var(--ice-1) 10%,var(--accent) 60%,#7aa8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
body.pc .pc-contact-hero p{position:relative;color:var(--dim);font-size:14px;line-height:1.6;max-width:52ch;margin:0}
body.pc .pc-contact-card{display:grid;grid-template-columns:330px minmax(0,1fr);margin:-78px 28px 0;position:relative;z-index:2;overflow:hidden;box-shadow:var(--sh-lg)}
body.pc .pc-contact-info{position:relative;overflow:hidden;padding:26px 24px;background:linear-gradient(160deg,#0ea5e9,#0369a1 70%,#075985);color:#fff}
body.pc .pc-contact-info h2{font-family:var(--display);font-size:20px;font-weight:600;color:#fff;margin:0 0 6px;letter-spacing:-.01em}
body.pc .pc-contact-info>p{color:rgba(255,255,255,.78);font-size:12.5px;line-height:1.55;margin:0 0 20px}
body.pc .pc-contact-info ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;position:relative;z-index:1}
body.pc .pc-contact-info li,body.pc .pc-contact-info li a{display:flex;gap:12px;align-items:center;color:#fff;text-decoration:none !important;min-width:0}
body.pc .pc-contact-info li a:hover .ic{background:rgba(255,255,255,.26)}
body.pc .pc-contact-info .ic{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.14);display:grid;place-items:center;flex:none;transition:background .15s var(--ease)}
body.pc .pc-contact-info .ic svg{width:17px;height:17px;color:#fff}
body.pc .pc-contact-info .t{min-width:0}
body.pc .pc-contact-info .t b{display:block;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.pc .pc-contact-info .t small{display:block;font-size:11.5px;color:rgba(255,255,255,.72);margin-top:1px}
body.pc .pc-contact-info .orb{position:absolute;right:-70px;bottom:-70px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
body.pc .pc-contact-form{padding:24px 26px 20px;min-width:0}
body.pc .pc-contact-actions{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:4px}
body.pc .pc-contact-actions .pc-captcha{flex:1;min-width:260px;margin:0}
body.pc .pc-contact-actions .pc-btn svg{width:15px;height:15px}
body.pc .pc-contact-form .pc-tf-hint{margin-top:14px}
body.pc .pc-contact-form .pc-tf-hint a{color:var(--accent)}
body.pc .pc-sent{text-align:center;padding:30px 10px}
body.pc .pc-sent .ic{width:52px;height:52px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;margin:0 auto 14px}
body.pc .pc-sent .ic svg{width:24px;height:24px}
body.pc .pc-sent h3{font-family:var(--display);font-size:20px;font-weight:600;margin:0 0 6px}
body.pc .pc-sent p{color:var(--dim);font-size:13px;margin:0 0 16px}
@media(max-width:900px){
  body.pc .pc-contact-hero{padding:30px 22px 100px}
  body.pc .pc-contact-hero .art{width:120px;right:4%;top:auto;bottom:22px;opacity:.5}
  body.pc .pc-contact-card{grid-template-columns:1fr;margin:-64px 12px 0}
  body.pc .pc-contact-info{padding:20px}
  body.pc .pc-contact-form{padding:18px 16px}
}

/* ---- store cards (#12): shorter, bigger specs, gradient titles, equal heights ---- */
body.pc #order-standard_cart .pl-plan-grid{align-items:stretch}
body.pc #order-standard_cart .pl-plan{display:flex;flex-direction:column;padding:14px 16px 14px}
body.pc #order-standard_cart .pl-plan-name{font-size:19px !important;background:linear-gradient(100deg,#f4fbff 0%,var(--ice-1) 55%,var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent !important}
html.pl-light body.pc #order-standard_cart .pl-plan-name{background:linear-gradient(100deg,#0b1a2b,#0369a1 70%,#0ea5e9);-webkit-background-clip:text;background-clip:text}
body.pc #order-standard_cart .pl-plan-tag,body.pc #order-standard_cart .pl-plan>p{font-size:12px;color:var(--faint);margin:8px 0 0;line-height:1.45;font-weight:400}
body.pc #order-standard_cart .pl-plan>p b,body.pc #order-standard_cart .pl-plan>p strong{font-weight:500;color:var(--dim)}
body.pc #order-standard_cart .pl-plan-feats{gap:6px 10px;padding:10px 0 0;margin:10px 0 0}
body.pc #order-standard_cart .pl-plan-feats li{font-size:12.5px;color:var(--dim)}
body.pc #order-standard_cart .pl-plan-feats b,body.pc #order-standard_cart .pl-plan-feats strong,body.pc #order-standard_cart .pl-plan-feats .feature-value{font-size:13px}
body.pc #order-standard_cart .pl-plan-price{margin:12px 0 0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
body.pc #order-standard_cart .pl-plan-price .amt{font-size:24px;display:inline-flex;align-items:baseline;gap:3px}
body.pc #order-standard_cart .pl-plan-price .amt .cur{font-style:normal;font-size:14px;color:var(--dim);font-weight:500}
body.pc #order-standard_cart .pl-plan-price .amt b{font-weight:600;letter-spacing:-.02em}
body.pc #order-standard_cart .pl-plan-price .amt small{font-size:11px;color:var(--faint);font-weight:500;letter-spacing:.04em;margin-left:2px}
body.pc #order-standard_cart .pl-plan-price .per{font-size:11.5px}
body.pc #order-standard_cart .pl-plan-btn{margin-top:auto;height:32px}
body.pc #order-standard_cart .pl-plan-price+.pl-plan-btn,body.pc #order-standard_cart .pl-plan-setup+.pl-plan-btn{margin-top:12px}
body.pc #order-standard_cart .pl-plan .pl-plan-btn{position:relative;top:auto}
body.pc #order-standard_cart .pl-plan>*:not(.pl-plan-btn):last-of-type{margin-bottom:12px}


/* ---- v326 (2026-09-13): fixes after the live walk of batch 2 ----
   domain page: the stock cart css paints .domain-checker-bg amber and the
   captcha box white - both overridden; species art has a black ground, so it
   is screened onto the panels instead of sitting in a square. */
body.pc .pl-domreg .pc-dom-wrap,body.pc .pl-domreg .domain-checker-bg,body.pc .pl-domreg .domain-checker-container{background:transparent !important;border:0 !important;padding:0 !important;margin:0 !important;box-shadow:none !important}
body.pc .pl-domreg .default-captcha,body.pc .pl-domreg .captcha-container{background:transparent !important;border:0 !important;padding:0 !important;box-shadow:none !important;color:var(--text)}
body.pc .pl-domreg .default-captcha p{color:var(--faint) !important}
body.pc .pl-domreg .domain-checker-bg .row{margin:0}
body.pc .pl-domreg #inputCaptcha.form-control{height:34px !important;width:100% !important}
body.pc .pl-domreg .tooltip{font-family:var(--font)}
body.pc .pc-hero-art img,body.pc .pc-contact-hero .art{mix-blend-mode:screen}
body.pc .pc-hero-art{background:radial-gradient(60% 60% at 50% 50%,rgba(56,189,248,.16),transparent 70%),#05080f}
body.pc .pc-contact-hero .art{top:auto;bottom:70px;width:230px;opacity:.9}
html.pl-light body.pc .pc-hero-art img,html.pl-light body.pc .pc-contact-hero .art{mix-blend-mode:normal;border-radius:18px}


/* ============================================================
   v327 (2026-09-13) - Ali's review, client area batch 3
   cart (#9): glowing item cards, bigger names, a bin for remove,
   red Empty Cart on the page head, +/- quantity stepper, promo
   code inside the order summary, one big total box.
   checkout (#10): fields in rows, icons in the fields, mailing
   list as Yes/No, instant required-field feedback.
   domain configuration page, store price alignment, search icon.
   ============================================================ */
body.pc .pl-domreg .pc-dom-go svg{width:16px !important;height:16px !important}
body.pc #order-standard_cart .pl-plan-price{margin-top:auto;padding-top:12px}
body.pc #order-standard_cart .pl-plan>*:not(.pl-plan-btn):last-of-type{margin-bottom:0}
body.pc #order-standard_cart .pl-plan-btn{margin-top:12px}

/* ---- cart items ---- */
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item{position:relative;border-radius:14px !important;border:1px solid var(--border) !important;background:linear-gradient(180deg,var(--panel-2),var(--panel)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 18px 40px -30px rgba(56,189,248,.55);padding:18px 20px;margin-bottom:12px;
  transition:border-color .2s var(--ease),box-shadow .3s var(--ease),transform .35s var(--ease),opacity .35s var(--ease),filter .35s var(--ease)}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item::before{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;background:radial-gradient(70% 90% at 0% 0%,rgba(56,189,248,.10),transparent 60%)}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item:hover{border-color:var(--accent-line) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 22px 48px -26px rgba(56,189,248,.75)}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item>.row{position:relative}
body.pc #order-standard_cart.pl-cfgx .item-title{font-size:19px !important;font-family:var(--display) !important;font-weight:600 !important;letter-spacing:-.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.pc #order-standard_cart.pl-cfgx .item-title .btn-link{font-size:12px !important;font-weight:500 !important;font-family:var(--font);height:auto;padding:2px 8px !important;border-radius:6px !important;background:var(--raise);color:var(--dim) !important}
body.pc #order-standard_cart.pl-cfgx .item-title .btn-link i{display:none}
body.pc #order-standard_cart.pl-cfgx .item-title .btn-link:hover{color:var(--accent-2) !important;background:var(--accent-soft)}
body.pc #order-standard_cart.pl-cfgx .item-group{font-size:12px;color:var(--faint) !important;display:block;margin-top:2px}
body.pc #order-standard_cart.pl-cfgx .item-domain{display:block;margin-top:4px}
body.pc #order-standard_cart.pl-cfgx .item-price{text-align:right}
body.pc #order-standard_cart.pl-cfgx .item-price>span:first-child{font-family:var(--mono);font-size:20px;font-weight:600;color:var(--text);letter-spacing:-.02em}
body.pc #order-standard_cart.pl-cfgx .item-price .cycle{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint) !important;margin-top:2px}
/* remove = a bin */
body.pc #order-standard_cart.pl-cfgx .btn-remove-from-cart{width:38px;height:38px;padding:0 !important;border-radius:11px !important;border:1px solid rgba(251,113,133,.28) !important;background:rgba(251,113,133,.06) !important;color:var(--red) !important;
  display:inline-grid !important;place-items:center;position:relative;font-size:0 !important;line-height:0;transition:background .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
body.pc #order-standard_cart.pl-cfgx .btn-remove-from-cart i,body.pc #order-standard_cart.pl-cfgx .btn-remove-from-cart span{display:none !important}
body.pc #order-standard_cart.pl-cfgx .btn-remove-from-cart::before{content:"";width:17px;height:17px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s var(--ease)}
body.pc #order-standard_cart.pl-cfgx .btn-remove-from-cart:hover{background:rgba(251,113,133,.18) !important;transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(251,113,133,.9)}
body.pc #order-standard_cart.pl-cfgx .btn-remove-from-cart:hover::before{transform:rotate(-8deg) scale(1.08)}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item.pc-binning{transform:scale(.94) translateX(22px);opacity:.3;filter:saturate(.5)}
body.pc #order-standard_cart.pl-cfgx .view-cart-items .item .visible-xs-inline{display:none !important}
@media(max-width:575px){body.pc #order-standard_cart.pl-cfgx .view-cart-items .item .d-none.d-sm-block{display:block !important}}
/* empty cart: red, with a bin, on the page head */
body.pc #order-standard_cart.pl-cfgx .pl-cfgx-head{position:relative}
body.pc #order-standard_cart.pl-cfgx #btnEmptyCart.pc-emptycart{position:absolute;right:0;bottom:2px;height:34px;padding:0 12px 0 10px !important;border-radius:var(--r-sm) !important;border:1px solid rgba(251,113,133,.35) !important;background:rgba(251,113,133,.08) !important;color:var(--red) !important;
  font-size:12.5px !important;font-weight:600 !important;display:inline-flex !important;align-items:center;gap:8px;box-shadow:none !important;transition:background .2s var(--ease),transform .2s var(--ease)}
body.pc #order-standard_cart.pl-cfgx #btnEmptyCart.pc-emptycart i{display:none}
body.pc #order-standard_cart.pl-cfgx #btnEmptyCart.pc-emptycart::before{content:"";width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v6M14 11v6'/%3E%3C/svg%3E") center/contain no-repeat}
body.pc #order-standard_cart.pl-cfgx #btnEmptyCart.pc-emptycart:hover{background:rgba(251,113,133,.2) !important;transform:translateY(-1px)}
body.pc #order-standard_cart.pl-cfgx .pc-emptyrow:empty{display:none}
/* quantity stepper */
body.pc #order-standard_cart.pl-cfgx .item-qty{display:flex;align-items:center;justify-content:center;gap:8px}
body.pc #order-standard_cart.pl-cfgx .pc-qty{display:inline-flex;align-items:center;border:1px solid var(--border-strong);border-radius:10px;overflow:hidden;background:var(--panel-2)}
body.pc #order-standard_cart.pl-cfgx .pc-qty button{width:32px;height:34px;border:0;background:transparent;color:var(--dim);font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;font-family:var(--font);transition:background .15s var(--ease),color .15s var(--ease)}
body.pc #order-standard_cart.pl-cfgx .pc-qty button:hover{background:var(--accent-soft);color:var(--accent-2)}
body.pc #order-standard_cart.pl-cfgx .pc-qty input{width:46px !important;height:34px !important;border:0 !important;border-left:1px solid var(--border-soft) !important;border-right:1px solid var(--border-soft) !important;border-radius:0 !important;text-align:center;font-family:var(--mono);font-weight:600;padding:0 !important;-moz-appearance:textfield;box-shadow:none !important}
body.pc #order-standard_cart.pl-cfgx .pc-qty input::-webkit-outer-spin-button,body.pc #order-standard_cart.pl-cfgx .pc-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
body.pc #order-standard_cart.pl-cfgx .item-qty>.btn{display:none}
/* promo inside the summary */
body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo{margin:14px 0 0;padding-top:14px;border-top:1px dashed var(--border)}
body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo .pc-promo-k{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 8px;display:flex;align-items:center;gap:6px}
body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo .pc-promo-k svg{width:13px;height:13px;color:var(--accent)}
body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo form{display:flex;gap:8px;align-items:center;margin:0}
body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo form::before{display:none !important;content:none}
body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo .form-control{flex:1;height:34px !important;min-width:0;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo .btn{height:34px;white-space:nowrap;flex:none}
body.pc #order-standard_cart.pl-cfgx .view-cart-tabs.pc-moved{display:none !important}
/* the total */
body.pc #order-standard_cart.pl-cfgx #orderSummary .total-due-today{margin:14px 0 0 !important;padding:14px 16px !important;border-radius:12px;background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(14,116,244,.10));border:1px solid var(--accent-line);
  box-shadow:0 18px 40px -24px rgba(56,189,248,.8),inset 0 1px 0 rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:flex-end;position:relative;overflow:hidden}
body.pc #order-standard_cart.pl-cfgx #orderSummary .total-due-today::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.09) 50%,transparent 70%);background-size:220% 100%;animation:pcshine 5.5s ease-in-out infinite}
@keyframes pcshine{0%,55%{background-position:120% 0}100%{background-position:-120% 0}}
body.pc #order-standard_cart.pl-cfgx #orderSummary .total-due-today .amt{font-size:34px !important;font-weight:700 !important;letter-spacing:-.03em;color:var(--text) !important;line-height:1;position:relative;margin:0 0 4px}
body.pc #order-standard_cart.pl-cfgx #orderSummary .total-due-today span:not(.amt){position:relative;color:var(--accent-2) !important}
body.pc #order-standard_cart.pl-cfgx #orderSummary #checkout{margin-top:14px !important}
@media(prefers-reduced-motion:reduce){body.pc #order-standard_cart.pl-cfgx #orderSummary .total-due-today::before{animation:none}}

/* ---- checkout ---- */
body.pc #order-standard_cart.pl-cfgx #containerNewUserSignup .row>.col-sm-12:has(#inputCompanyName),
body.pc #order-standard_cart.pl-cfgx #containerNewUserSignup .row>.col-sm-12:has(#inputAddress1),
body.pc #order-standard_cart.pl-cfgx #containerNewUserSignup .row>.col-sm-12:has(#inputAddress2),
body.pc #order-standard_cart.pl-cfgx #containerNewUserSignup .row>.col-sm-12:has(#inputCountry),
body.pc #order-standard_cart.pl-cfgx #containerNewUserSignup .row>.col-sm-12:has(#inputTaxId),
body.pc #order-standard_cart.pl-cfgx #containerNewUserSignup .row>.col-sm-4:has(#inputCity){flex:0 0 50%;max-width:50%}
body.pc #order-standard_cart.pl-cfgx #containerNewUserSignup .row>.col-sm-5:has(#inputState),
body.pc #order-standard_cart.pl-cfgx #containerNewUserSignup .row>.col-sm-3:has(#inputPostcode){flex:0 0 25%;max-width:25%}
body.pc #order-standard_cart.pl-cfgx #domainRegistrantInputFields>.col-sm-12{flex:0 0 50%;max-width:50%}
@media(max-width:640px){body.pc #order-standard_cart.pl-cfgx #containerNewUserSignup .row>[class*="col-"]{flex:0 0 100% !important;max-width:100% !important}}
/* icons in the fields (the FA6-Pro glyphs never load) */
body.pc #order-standard_cart.pl-cfgx .prepend-icon{position:relative}
body.pc #order-standard_cart.pl-cfgx .prepend-icon .field-icon{display:none !important}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:not(:has(#inputPhone)):not(:has(#inputDCPhone)) .field.form-control{padding-left:34px !important}
body.pc #order-standard_cart.pl-cfgx .prepend-icon::after{content:"";position:absolute;left:11px;bottom:9px;width:15px;height:15px;background:var(--faint);pointer-events:none;
  -webkit-mask:var(--ico,none) center/contain no-repeat;mask:var(--ico,none) center/contain no-repeat;transition:background .15s var(--ease)}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:focus-within::after{background:var(--accent)}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputPhone)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCPhone)::after{display:none}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputFirstName)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputLastName)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCFirstName)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCLastName)::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M5 20c0-3.6 3.1-5.6 7-5.6s7 2 7 5.6'/%3E%3C/svg%3E")}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputEmail)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputLoginEmail)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCEmail)::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputCompanyName)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCCompanyName)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputCity)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCCity)::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 7h.01M12 7h.01M16 7h.01M8 11h.01M12 11h.01M16 11h.01M10 21v-4h4v4'/%3E%3C/svg%3E")}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputAddress1)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputAddress2)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCAddress1)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCAddress2)::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E")}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputState)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCState)::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E")}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputPostcode)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCPostcode)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputTaxId)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCTaxId)::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h16M4 15h16M10 3 8 21M16 3l-2 18'/%3E%3C/svg%3E")}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputCountry)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputDCCountry)::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 3 2.6 15 0 18M12 3c-2.6 3-2.6 15 0 18'/%3E%3C/svg%3E")}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputNewPassword1)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputNewPassword2)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputLoginPassword)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputSecurityQAns)::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputCardNumber)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputCardCVV)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputCardCVV2)::after,body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputCardExpiry)::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3C/svg%3E")}
/* required-field feedback */
body.pc #order-standard_cart.pl-cfgx .form-group.pc-invalid .form-control{border-color:var(--red) !important;box-shadow:0 0 0 3px rgba(251,113,133,.18) !important;animation:pcshake .4s var(--ease)}
body.pc #order-standard_cart.pl-cfgx .form-group.pc-invalid::before{content:attr(data-err);position:absolute;right:0;top:0;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
@keyframes pcshake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
body.pc #order-standard_cart.pl-cfgx .checkout-error-feedback{border:1px solid rgba(251,113,133,.35) !important;background:var(--red-soft) !important;border-radius:var(--r-lg) !important;padding:12px 14px !important;margin:0 0 14px}
body.pc #order-standard_cart.pl-cfgx .checkout-error-feedback p{margin:0 0 8px;font-weight:600;color:var(--red)}
body.pc #order-standard_cart.pl-cfgx .checkout-error-feedback ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
body.pc #order-standard_cart.pl-cfgx .checkout-error-feedback li{font-size:12px;padding:4px 10px;border-radius:999px;background:rgba(251,113,133,.14);color:var(--text)}
body.pc #order-standard_cart.pl-cfgx .checkout-error-feedback li.d-none,body.pc #order-standard_cart.pl-cfgx .checkout-error-feedback li:empty{display:none}
/* mailing list: yes / no */
body.pc #order-standard_cart.pl-cfgx .pc-optin{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--panel-2);margin:14px 0}
body.pc #order-standard_cart.pl-cfgx .pc-optin .ic{width:36px;height:36px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
body.pc #order-standard_cart.pl-cfgx .pc-optin .ic svg{width:17px;height:17px}
body.pc #order-standard_cart.pl-cfgx .pc-optin .t{flex:1;min-width:0}
body.pc #order-standard_cart.pl-cfgx .pc-optin .t b{display:block;font-size:13px;font-weight:600}
body.pc #order-standard_cart.pl-cfgx .pc-optin .t span{font-size:12px;color:var(--dim);line-height:1.45}
body.pc #order-standard_cart.pl-cfgx .pc-optin .seg{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden;background:var(--panel);flex:none}
body.pc #order-standard_cart.pl-cfgx .pc-optin .seg button{height:32px;padding:0 16px;border:0;background:transparent;color:var(--dim);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
body.pc #order-standard_cart.pl-cfgx .pc-optin .seg button.on{background:linear-gradient(118deg,var(--accent-2),var(--accent));color:var(--accent-ink)}
body.pc #order-standard_cart.pl-cfgx .pc-optin-orig{display:none !important}
@media(max-width:560px){body.pc #order-standard_cart.pl-cfgx .pc-optin{flex-wrap:wrap} body.pc #order-standard_cart.pl-cfgx .pc-optin .seg{width:100%} body.pc #order-standard_cart.pl-cfgx .pc-optin .seg button{flex:1}}

/* ---- domain configuration (cart.php?a=confdomains) ---- */
body.pc #order-standard_cart #frmConfigureDomains>p{color:var(--dim);font-size:12.5px;margin:0 0 12px}
body.pc #order-standard_cart #frmConfigureDomains .sub-heading{height:auto;border:0;text-align:left;margin:22px 0 10px;display:flex;align-items:center;gap:10px}
body.pc #order-standard_cart #frmConfigureDomains .sub-heading span{position:static;top:auto;display:inline-block;padding:0;background:transparent !important;border:0 !important;color:var(--text) !important;font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.01em;text-transform:none;border-radius:0}
body.pc #order-standard_cart #frmConfigureDomains .sub-heading::after{content:"";flex:1;height:1px;background:var(--border)}
body.pc #order-standard_cart #frmConfigureDomains .col-sm-6>.form-group{padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);font-size:14px;font-weight:600;color:var(--text)}
body.pc #order-standard_cart #frmConfigureDomains .col-sm-6>.form-group label{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
body.pc #order-standard_cart #frmConfigureDomains .col-sm-6>.form-group br{display:none}
body.pc #order-standard_cart #frmConfigureDomains a[style*="cc0000"]{color:var(--amber) !important;font-weight:600;text-decoration:none}
body.pc #order-standard_cart #frmConfigureDomains a[style*="cc0000"]:hover{text-decoration:underline}
body.pc #order-standard_cart #frmConfigureDomains span[style*="009900"]{color:var(--green) !important}
body.pc #order-standard_cart .panel-addon{background:var(--panel) !important;border:1px solid var(--border) !important;border-radius:var(--r-lg) !important;overflow:hidden;box-shadow:none !important;margin:0;transition:border-color .15s var(--ease)}
body.pc #order-standard_cart .panel-addon.panel-addon-selected{border-color:var(--accent-line) !important;background:var(--panel-2) !important}
body.pc #order-standard_cart .panel-addon .panel-body{padding:14px 16px;color:var(--dim);font-size:12.5px;line-height:1.5;text-align:left;background:transparent}
body.pc #order-standard_cart .panel-addon .panel-body label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--text);text-transform:none;letter-spacing:0;margin:0 0 6px;cursor:pointer}
body.pc #order-standard_cart .panel-addon .panel-body input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);margin:0}
body.pc #order-standard_cart .panel-addon .panel-body br{display:none}
body.pc #order-standard_cart .panel-addon .panel-price{padding:9px 16px;font-family:var(--mono);font-size:12.5px;color:var(--ice-1);border-top:1px solid var(--border-soft);background:transparent;text-align:left}
body.pc #order-standard_cart .panel-addon .panel-add{background:var(--accent-soft) !important;color:var(--accent-2) !important;padding:10px 16px;font-weight:600;font-size:12.5px;cursor:pointer;border-top:1px solid var(--border-soft);text-align:center;transition:background .15s var(--ease)}
body.pc #order-standard_cart .panel-addon .panel-add:hover{background:rgba(56,189,248,.2) !important}
body.pc #order-standard_cart .panel-addon.panel-addon-selected .panel-add{background:linear-gradient(118deg,var(--accent-2),var(--accent)) !important;color:var(--accent-ink) !important}
body.pc #order-standard_cart .panel-addon .panel-add i{display:none}
body.pc #order-standard_cart #frmConfigureDomains .form-control{height:36px}
body.pc #order-standard_cart #frmConfigureDomains .text-center .btn{height:38px;padding:0 22px !important;font-size:13.5px !important}
body.pc #order-standard_cart #frmConfigureDomains .btn i{display:none}
/* leftovers seen on the live walk: text injected by the older cart rules, and the phone flag overlapping its input */
body.pc #order-standard_cart.pl-cfgx .item-title .btn-link::after,body.pc #order-standard_cart.pl-cfgx .item-title .btn-link::before{content:none !important}
body.pc #order-standard_cart.pl-cfgx .btn-remove-from-cart::after{content:none !important}
body.pc #order-standard_cart.pl-cfgx .iti input.form-control{padding-left:96px !important}

/* ---- v328 (2026-09-13): after the batch-3 walk ----
   icon slot paints a solid square when no icon is mapped (mask:none) -> empty svg default;
   state dropdown gets the map glyph; the promo form drops the label + icon it inherited. */
body.pc #order-standard_cart.pl-cfgx .prepend-icon{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E")}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#stateselect)::after{--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2z'/%3E%3Cpath d='M9 4v14M15 6v14'/%3E%3C/svg%3E")}
body.pc #order-standard_cart.pl-cfgx .prepend-icon:has(#inputPromotionCode)::after{display:none}
body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo .cfa-lbl,body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo .field-icon,body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo i{display:none !important}
body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo .prepend-icon{margin:0;flex:1;min-width:0}
body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo .form-control{padding-left:10px !important;width:100%}
body.pc #order-standard_cart.pl-cfgx #orderSummary .pc-promo form{align-items:stretch}


/* ---- v329 (2026-09-14): Higgsfield art on the pre-sales contact band (Ali #14) ---- */
body.pc .pc-contact-hero{background:linear-gradient(100deg,rgba(5,8,15,.94) 0%,rgba(5,8,15,.82) 40%,rgba(5,8,15,.3) 72%,rgba(5,8,15,.12) 100%),url(../images/contact-band.webp?v=1) center/cover no-repeat,var(--panel)}
body.pc .pc-contact-hero .art{display:none}
body.pc .pc-contact-hero .g1,body.pc .pc-contact-hero .g2{opacity:.55}
html.pl-light body.pc .pc-contact-hero{background:linear-gradient(100deg,rgba(241,246,251,.97) 0%,rgba(241,246,251,.9) 42%,rgba(241,246,251,.45) 76%,rgba(241,246,251,.25) 100%),url(../images/contact-band.webp?v=1) center/cover no-repeat,var(--panel)}
/* ==========================================================================
   v330 (2026-09-14) - Metal-parity pass for the console shell (Ali round 13)
   foundation / notices / store / knowledgebase / account details
   ========================================================================== */



/* ======================= FOUNDATION ======================= */
/* ---- v330 (2026-09-14): foundation ---- */
/* Global scale (body 14 / title 28 / nav 36 / top bar 54 / controls 36-38 / rows 50),
   full-width content like Metal, two drifting blue orbs behind the shell, sharper icons.
   Appended after console.css v329 (line 1464). Every selector carries body.pc; where a
   console rule sits at higher specificity (frameless table cells, .pc-in inputs, attach
   rows) the same compound selector is restated so the later declaration wins. */

/* ============================================================
   0. shared tokens — ONE radius scale, ONE hover contract, ONE elevation
      pair, ONE tile surface. Declared on body.pc (same specificity as the
      console.css:12 token block, appended later, so these win) and read by
      all five sections below; nothing here changes a selector's weight.
   ============================================================ */
body.pc{
  /* radii: card-like surfaces / the three tile sizes / pills.
     Badges + chips keep 5px; buttons + inputs keep --r (8px) / --r-sm (6px). */
  --r-card:14px;
  --r-tile:11px;
  --r-tile-lg:16px;
  --r-tile-xl:22px;
  --r-pill:999px;
  /* hover: one duration and one lift distance for every card that lifts */
  --t-hover:.22s var(--ease);
  --lift-y:-3px;
  /* elevation: resting raise / hovered raise. Brand blue only. */
  --lift:0 18px 48px -26px rgba(56,189,248,.35);
  --lift-hi:0 26px 60px -24px rgba(56,189,248,.55);
  /* tile surface — Metal's values verbatim (metal-ref.md, :root L11-12) */
  --tile:linear-gradient(150deg,rgba(191,238,255,.20),rgba(14,165,233,.10));
  --tile-ring:inset 0 0 0 1px rgba(125,211,252,.16);
}
html.pl-light body.pc{
  --lift:0 18px 48px -26px rgba(2,132,199,.30),0 1px 2px rgba(16,24,40,.04);
  --lift-hi:0 26px 60px -24px rgba(2,132,199,.42),0 1px 2px rgba(16,24,40,.05);
  --tile:linear-gradient(150deg,rgba(191,238,255,.55),rgba(14,165,233,.14));
  --tile-ring:inset 0 0 0 1px rgba(2,132,199,.14);
}
/* ONE entrance for the whole console: 8px rise, .38s, backwards so a card's
   own hover transform still works once the entrance has finished.
   (console.css:400 mutes it under prefers-reduced-motion: reduce.) */
@keyframes pcrise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================
   1. scale + shell
   ============================================================ */
body.pc,body.pc.primary-bg-color{font-size:14px;line-height:1.5}
body.pc .pl-content{max-width:1720px;padding:24px 28px 64px;margin:0 auto;width:100%;position:relative;z-index:1}
body.pc .pl-top{z-index:20}

/* background orbs: fixed to the viewport, blurred, slow drift; the sidebar keeps its own
   solid surface (papilio gives .pl-side z-index:1 -> .pl-main drops to 0 so it paints below) */
/* v331: .pl-main keeps its z-index (demoting it put the sidebar above the topbar and
   trapped every in-content overlay); the orbs sit at -1, behind .pl-content's z-index:1.
   overflow-x:clip (not hidden) so position:sticky keeps working inside the column. */
body.pc .pl-main{overflow-x:clip}
body.pc .pl-main::before,body.pc .pl-main::after{content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(70px);opacity:.32;transform:translate3d(0,0,0)}
body.pc .pl-main::before{width:560px;height:560px;top:-180px;left:calc(var(--aside) + 4vw);background:radial-gradient(circle at 50% 50%,rgba(56,189,248,.85) 0%,rgba(14,165,233,.32) 42%,rgba(14,165,233,0) 68%)}
body.pc .pl-main::after{width:480px;height:480px;right:-140px;bottom:-160px;background:radial-gradient(circle at 50% 50%,rgba(125,211,252,.7) 0%,rgba(14,165,233,.26) 44%,rgba(14,165,233,0) 70%)}
@media(prefers-reduced-motion:no-preference){
  body.pc .pl-main::before{animation:pcOrbA 26s ease-in-out infinite alternate}
  body.pc .pl-main::after{animation:pcOrbB 34s ease-in-out infinite alternate}
}
@keyframes pcOrbA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(90px,70px,0) scale(1.08)}}
@keyframes pcOrbB{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(-80px,-90px,0) scale(.94)}}

/* ============================================================
   2. sidebar
   ============================================================ */
body.pc .pl-brand{height:54px;font-size:15px;gap:10px}
body.pc .pl-brand img{height:28px;max-height:28px}
body.pc .pl-side-scroll{padding:10px 10px 12px}
body.pc .pl-navgroup{font-size:11px;letter-spacing:.06em;padding:16px 10px 6px}
body.pc .pl-side-scroll .pl-navgroup:first-child{padding-top:6px}
body.pc .pl-nav{gap:2px}
body.pc .pl-nav a{position:relative;height:36px;padding:0 10px;gap:10px;font-size:13.5px;font-weight:500;border-radius:var(--r)}
body.pc .pl-nav a svg{width:18px;height:18px;stroke-width:1.7;flex:none;transition:color .15s var(--ease),filter .2s var(--ease)}
body.pc .pl-nav a.active{font-weight:600}
body.pc .pl-nav a.active svg{color:var(--accent);filter:drop-shadow(0 0 6px rgba(56,189,248,.55))}
body.pc .pl-nav a.active::before{content:"";position:absolute;left:-10px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
[dir=rtl] body.pc .pl-nav a.active::before{left:auto;right:-10px;border-radius:3px 0 0 3px}
body.pc .pl-nav a .pl-badge,body.pc .pl-nav a .pc-count{font-size:11px;padding:2px 7px;border-radius:5px}
body.pc .pl-side-user{padding:12px 12px 12px 14px;gap:10px}
body.pc .pl-side-user .av{width:30px;height:30px;border-radius:8px;font-size:12px}
body.pc .pl-side-user .av svg{width:16px;height:16px}
body.pc .pl-side-user .nm{font-size:13.5px}
body.pc .pl-side-user .rl{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-tgside{font-size:12.5px;padding:9px 11px}
body.pc .pc-tgside svg{width:16px;height:16px}

/* ============================================================
   3. top bar
   ============================================================ */
body.pc .pl-top{height:54px;padding:0 20px 0 18px;gap:6px}
body.pc .pl-title{font-size:13.5px;gap:8px}
body.pc .pl-title .pl-title-txt{font-size:13.5px}
body.pc .pl-top .pl-search{max-width:300px;height:34px;padding:0 12px;gap:9px;border-radius:var(--r)}
body.pc .pl-search svg{width:16px;height:16px}
body.pc .pl-top .pl-search input{font-size:13.5px !important}
body.pc .pl-icbtn{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--faint);transition:background .15s var(--ease),color .15s var(--ease)}
body.pc .pl-icbtn:hover{background:var(--accent-soft);color:var(--accent-2);border:0}
body.pc .pl-icbtn svg{width:18px;height:18px}
body.pc .pl-icbtn .dot{top:7px;right:8px;width:7px;height:7px;box-shadow:0 0 0 2px var(--surface)}
body.pc .pl-avatar{width:34px;height:34px;border-radius:50%;margin-left:6px;box-shadow:inset 0 0 0 1px var(--accent-line);transition:background .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease)}
body.pc .pl-avatar:hover{box-shadow:0 0 0 3px var(--accent-soft)}
body.pc .pl-avatar svg{width:17px;height:17px}
body.pc-guest .pc-top-signin{height:34px;padding:0 14px}
body.pc-guest .pc-top-signin svg{width:15px;height:15px}

/* ============================================================
   4. page heads, section heads, cards
   ============================================================ */
body.pc .pc-pagehead{margin:0 0 22px;min-height:36px;gap:14px}
body.pc .pc-pagehead h1{font-size:28px;letter-spacing:-.022em;line-height:1.1}
body.pc .pc-pagehead .sub{font-size:13.5px;margin-top:5px}
body.pc .pc-pagehead .actions{gap:10px}
body.pc .pl-hello,body.pc h1.pl-hello{font-size:28px;margin:0 0 18px}
body.pc .pc-dhead h1{font-size:26px}
body.pc .pc-dhead .meta{font-size:13.5px}
body.pc .pc-sectitle{font-size:11.5px;letter-spacing:.06em}
body.pc .pc-subhead{padding:12px 18px;min-height:46px}
body.pc .pc-subhead h2{font-size:13.5px}
body.pc .pc-subhead h2 svg{width:16px;height:16px;stroke-width:1.7}
body.pc .pc-subhead a{font-size:13px}
body.pc .pc-subhead .n{font-size:11.5px;padding:2px 7px}
/* one card radius for the whole console; !important is kept because console.css:205
   needs it to beat papilio.css, and this rule only replaces its value */
body.pc .pc-card,body.pc .card{border-radius:var(--r-card) !important}
body.pc .pc-card.pad{padding:18px}
body.pc .card-header,body.pc .panel-heading{padding:12px 18px;font-size:13.5px}
body.pc .card-body{padding:18px}
body.pc .card .card-title{font-size:18px}
body.pc .pc-sec-row h2{font-size:15px}
body.pc .pc-sec-row p{font-size:13.5px}
body.pc .pl-content>p:first-child{font-size:13.5px}

/* ============================================================
   5. buttons
   ============================================================ */
body.pc .pc-btn{height:36px;padding:0 14px;font-size:13.5px;gap:8px}
body.pc .pc-btn svg{width:16px;height:16px}
body.pc .pc-btn.sm{height:30px;padding:0 11px;font-size:12.5px}
body.pc .pc-btn.sm svg{width:14px;height:14px}
body.pc .pc-btn.lg{height:40px;padding:0 18px;font-size:14px}
body.pc .pc-iconbtn{width:32px;height:32px}
body.pc .pc-iconbtn svg{width:15px;height:15px}
body.pc .btn{height:36px;padding:0 14px !important;font-size:13.5px !important;gap:8px}
body.pc .btn-sm,body.pc .btn-xs{height:30px;padding:0 11px !important;font-size:12.5px !important}
body.pc .btn-lg{height:40px;padding:0 18px !important;font-size:14px !important}

/* ============================================================
   6. inputs (generic forms; the account-details form builds on these)
   ============================================================ */
body.pc label,body.pc .control-label,body.pc .form-control-label{font-size:12.5px;margin:0 0 6px}
body.pc .form-control,body.pc .custom-select,body.pc textarea,body.pc select,body.pc input[type=text],body.pc input[type=email],body.pc input[type=password],body.pc input[type=number],body.pc input[type=tel]{height:38px;padding:0 12px;font-size:14px}
body.pc textarea,body.pc textarea.form-control{height:auto;padding:10px 12px;font-size:14px;line-height:1.55}
body.pc .input-group-text{font-size:13px}
body.pc .form-group{margin-bottom:14px}
body.pc .custom-control-label,body.pc .form-check-label{font-size:13.5px}
body.pc .card label{font-size:11.5px}
/* controls that carried their own height in console.css: keep them level with the 38px inputs */
body.pc .pc-tf label{font-size:12.5px;margin:0 0 6px}
body.pc .pc-tf-hint{font-size:11.5px}
body.pc .pc-in .form-control{height:38px;padding-left:36px}
body.pc .pc-in>svg{width:16px;height:16px;left:12px}
body.pc textarea.pc-msg{font-size:14px}
body.pc .pc-dd-btn{height:38px;font-size:14px;padding:0 12px}
body.pc .pc-dd-opt{font-size:13.5px;padding:9px 10px}
body.pc .pc-amount .cur{height:38px;left:12px}
body.pc .pc-amount input{height:38px;padding-left:30px}
body.pc .pc-addfunds-form select{height:38px}
body.pc .pc-pwrow .pc-btn{height:38px}
body.pc .generate-password{height:38px}
body.pc .pc-reply .custom-file-label{height:38px;line-height:36px;font-size:12.5px}
body.pc .pc-reply .custom-file-label::after{height:36px;line-height:36px}
body.pc .pc-attach-row .custom-file{height:38px}
body.pc .pc-attach-row .custom-file-label{height:38px;line-height:36px;font-size:12.5px}
body.pc .pc-attach-row .input-group-append .btn{height:38px}
body.pc .pc-tside{top:68px}
body.pc .pc-reply textarea{min-height:150px}
body.pc .pc-reply .card-body{padding:16px 18px 18px}

/* ============================================================
   7. badges, chips, tabs, segmented filter
   ============================================================ */
body.pc .pc-badge{height:22px;padding:0 8px;font-size:11.5px;border-radius:5px}
body.pc .pc-chip{height:22px;padding:0 7px;font-size:11.5px;border-radius:5px}
body.pc .pl-pill,body.pc .status,body.pc .label,body.pc .badge,body.pc .invoice-status-tag{height:22px;padding:0 8px !important;font-size:11.5px !important;border-radius:5px !important}
body.pc .pc-tabs,body.pc .nav-tabs{margin:0 0 18px}
body.pc .pc-tabs a,body.pc .nav-tabs .nav-link{height:40px;padding:0 14px;font-size:13.5px;gap:8px}
body.pc .pc-tabs a svg,body.pc .nav-tabs .nav-link svg{width:16px;height:16px;stroke-width:1.7}
body.pc .pc-acct-tabs a{height:40px;padding:0 14px;font-size:13.5px;gap:8px}
body.pc .pc-acct-tabs a svg{width:16px;height:16px;stroke-width:1.7}
body.pc .pc-filterbar{margin:0 0 12px}
body.pc .pc-seg button{height:26px;padding:0 10px;font-size:12.5px}
body.pc .pc-seg button .n{font-size:11px}
body.pc .pc-rowcount{font-size:12.5px}

/* ============================================================
   8. product tiles: bigger glyph, soft inner highlight
   ============================================================ */
/* ONE tile surface (--tile + --tile-ring, Metal's) and ONE glyph-to-tile ratio
   per size — a 60px tile shows the same size mark wherever it is drawn. The
   inner highlight is the only ornament layered on top of the ring. */
body.pc .pc-tile{width:40px;height:40px;border-radius:var(--r-tile);background:var(--tile);box-shadow:var(--tile-ring),inset 0 1px 0 rgba(255,255,255,.10)}
body.pc .pc-tile svg{width:20px;height:20px;stroke-width:1.7}
body.pc .pc-tile::before{width:50%;height:50%}
body.pc .pc-tile.lg{width:60px;height:60px;border-radius:var(--r-tile-lg)}
body.pc .pc-tile.lg svg{width:26px;height:26px}
body.pc .pc-tile.lg::before{width:46%;height:46%}
body.pc .pc-tile.xl{width:96px;height:96px;border-radius:var(--r-tile-xl)}
body.pc .pc-tile.xl svg{width:40px;height:40px;stroke-width:1.5}
body.pc .pc-tile.xl::before{width:44%;height:44%}

/* ============================================================
   9. dashboard: KPI strip, facts, wallet, activity rows, quick links
   ============================================================ */
body.pc .pc-kpis{margin:0 0 16px}
body.pc .pc-kpi{padding:14px 18px 14px}
body.pc .pc-kpi .k{font-size:11px;letter-spacing:.06em;gap:7px}
body.pc .pc-kpi .k svg{width:15px;height:15px;stroke-width:1.7}
/* hero number, one face + two sizes console-wide: mono 26px primary / 22px secondary */
body.pc .pc-kpi .v{font-family:var(--mono);font-size:26px;margin-top:6px}
body.pc .pc-kpi .v small{font-size:13px}
body.pc .pc-kpi .s{font-size:12.5px;margin-top:4px}
body.pc .pc-kpi .spark{right:18px;bottom:16px;height:20px;width:52px}
body.pc .pc-fact{padding:11px 16px 12px}
body.pc .pc-fact .k{font-size:11px;letter-spacing:.06em}
body.pc .pc-fact .v{font-size:13.5px;margin-top:4px}
body.pc .pc-fact .v.mono{font-size:13px}
body.pc .pc-wallet{padding:16px 18px 18px}
body.pc .pc-wallet .k{font-size:11px;letter-spacing:.06em}
body.pc .pc-wallet .bal{font-family:var(--mono);font-size:26px}
body.pc .pc-wallet .due{font-size:12.5px}
body.pc .pc-act{padding:11px 18px;font-size:13.5px;gap:12px}
body.pc .pc-act .ic{width:32px;height:32px;border-radius:9px}
body.pc .pc-act .ic svg{width:16px;height:16px;stroke-width:1.7}
body.pc .pc-act .m span{font-size:11.5px;margin-top:3px}
body.pc .pc-act .t{font-size:11.5px}
body.pc .pc-quick a{padding:14px 16px;font-size:13.5px;gap:9px}
body.pc .pc-quick a svg{width:18px;height:18px}
body.pc .pc-quick a small{font-size:12px}

/* ============================================================
   10. tables (console + stock bootstrap/DataTables)
   ============================================================ */
body.pc .pc-table thead th{height:38px;font-size:11px;letter-spacing:.06em;padding:0 16px}
body.pc .pc-table tbody td{height:50px;font-size:13.5px;padding:0 16px}
body.pc .pc-card:has(> .pc-tablewrap) .pc-table tbody td{height:50px}
body.pc .pc-table .namecell{gap:12px}
body.pc .pc-table .namecell .sub{font-size:11.5px}
body.pc .pc-table .mono{font-size:12.5px}
body.pc .pc-table td.rowact{padding-right:12px}
body.pc .pc-copy{font-size:12.5px}
body.pc .pc-copy svg{width:13px;height:13px}
body.pc .table thead th,body.pc .table-list thead th{font-size:11px;letter-spacing:.06em;padding:0 16px;height:38px}
body.pc .table td,body.pc .table-list>tbody>tr>td{padding:13px 16px;font-size:13.5px}
body.pc .table-container .dataTables_filter{margin:12px 16px}
body.pc .table-container .dataTables_info,body.pc .table-container .dataTables_paginate{font-size:12.5px}

/* ============================================================
   11. ticket thread, empty states, department tiles
   ============================================================ */
body.pc .pc-msg .av{width:34px;height:34px;border-radius:9px}
body.pc .pc-msg .hd{padding:9px 16px;font-size:12.5px}
body.pc .pc-msg .hd time{font-size:11.5px}
body.pc .pc-msg .body{padding:14px 16px;font-size:14px;line-height:1.6}
body.pc .pc-msg .body pre,body.pc .pc-msg .body code{font-size:12.5px}
body.pc .pc-msg .att a{height:28px;font-size:12px}
body.pc .pc-empty{padding:38px 16px 40px;font-size:13.5px}
body.pc .pc-empty b{font-size:15px}
body.pc .pc-depts a{padding:16px 18px;border-radius:var(--r-card)}
body.pc .pc-depts a b{font-size:14px}
body.pc .pc-depts a span{font-size:13px}

/* ============================================================
   12. light mode
   ============================================================ */
html.pl-light body.pc .pl-main::before,html.pl-light body.pc .pl-main::after{opacity:.18}
html.pl-light body.pc .pl-main::before{background:radial-gradient(circle at 50% 50%,rgba(2,132,199,.8) 0%,rgba(14,165,233,.3) 42%,rgba(14,165,233,0) 68%)}
html.pl-light body.pc .pl-main::after{background:radial-gradient(circle at 50% 50%,rgba(14,165,233,.75) 0%,rgba(125,211,252,.3) 44%,rgba(125,211,252,0) 70%)}
html.pl-light body.pc .pl-nav a.active svg{filter:drop-shadow(0 0 5px rgba(2,132,199,.4))}
/* the tile's surface + ring already swap with --tile / --tile-ring; only the
   inner highlight needs a light-mode alpha */
html.pl-light body.pc .pc-tile{box-shadow:var(--tile-ring),inset 0 1px 0 rgba(255,255,255,.75)}

/* ============================================================
   13. responsive (console breakpoints 1100 / 900 / 760 / 480, papilio 860 / 767)
   ============================================================ */
@media(max-width:1100px){
  body.pc .pl-top .pl-search{max-width:220px}
}
@media(max-width:900px){
  body.pc .pl-content{padding:20px 20px 56px}
  body.pc .pc-pagehead h1{font-size:25px}
}
@media(max-width:860px){
  body.pc .pl-main::before{width:480px;height:480px;top:-220px;left:-160px}
  body.pc .pl-main::after{right:-180px;bottom:-200px}
}
@media(max-width:767px){
  body.pc header.pl-top.pl-search-open .pl-search{height:auto;max-width:none;padding:8px 12px}
}
@media(max-width:760px){
  body.pc .pl-content{padding:16px 14px 48px}
  body.pc .pc-pagehead{margin-bottom:18px}
  body.pc .pc-pagehead h1{font-size:22px}
  body.pc .pc-pagehead .sub{font-size:13px}
  body.pc .pl-hello,body.pc h1.pl-hello{font-size:24px}
  body.pc .pc-dhead h1{font-size:23px}
  body.pc .pl-nav a{height:34px;font-size:13px;padding:0 9px}
  body.pc .pl-nav a svg{width:17px;height:17px}
  body.pc .pl-top{padding:0 12px 0 10px}
  body.pc .pc-kpi{padding:12px 14px}
  /* the hero number drops to the secondary size; every numeral follows the same step */
  body.pc .pc-kpi .v,body.pc .pc-wallet .bal{font-size:22px}
  /* the 52px tile is declared once here, for every section that shows a .lg tile */
  body.pc .pc-tile.lg{width:52px;height:52px}
  body.pc .pc-tile.lg svg{width:22px;height:22px}
  body.pc .pc-subhead{padding:10px 14px}
  body.pc .pc-act{padding:10px 14px}
  body.pc .pc-card.pad,body.pc .card-body{padding:16px 14px}
  body.pc .pc-table.stack tr{padding:12px 14px 14px}
  body.pc .pc-table.stack td[data-k]::before{font-size:11px}
  body.pc .pc-msg .body{padding:12px 14px}
}
@media(max-width:480px){
  body.pc .pl-icbtn{width:34px;height:34px}
  body.pc .pl-avatar{width:32px;height:32px;margin-left:2px}
  body.pc .pl-top .pl-search{max-width:150px}
}

/* ============================================================
   14. reduced motion (console :400 `body.pc *` does not reach pseudo-elements)
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  body.pc .pl-main::before,body.pc .pl-main::after{animation:none !important;transform:none}
}


/* ======================= NOTICES ======================= */
/* ---- v330 (2026-09-14): notices — separate, breathable cards (Ali #5) ----
   Replaces the v310/v311 "one rail" look (console.css :588-614 and :668-699)
   without touching it: every selector below is the SAME prefix as v311
   (body.pc .pl-content .pc-notices>…) or longer, carries !important on the
   same properties, and is appended after :1464 so source order settles ties.
   Card anatomy (all three kinds share it):
     panel bg · 1px --border · r-lg · 12px 16px, min-height 48px
     3px tone stripe on the left  = inset box-shadow (follows the radius)
     34px round disc (accent-soft) = #nmTgBar .i (real element, keeps its
        22px image) / ::before on .verification-banner and .alert
     tone glyph                    = ::after, masked, laid over the disc
     text 13.5px/500, second line 12.5px --dim
     CTA = .pc-btn-like ghost pill, 32px, right-aligned
     dismiss = 28px round hover disc, absolute right
   Tone: --accent (#nmTgBar, .alert-info, plain .alert) · --amber
   (.verification-banner, .alert-warning) · --green (.alert-success) ·
   --red (.alert-danger). Amber/green/red live ONLY in the stripe + disc; the
   card, text and CTA stay brand-blue. Light mode + ≤760px at the bottom.
   Also covers page-level alerts that land directly in .pl-content (alert.tpl
   includes, the service-page pay-invoice notice) and the second .pc-notices
   on knowledgebasearticle.tpl. */

/* glyphs (mask layers; colour comes from the element) */
body.pc{
  --pcn-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 8h.01'/%3E%3C/svg%3E");
  --pcn-warn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --pcn-ok:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12.5 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --pcn-bad:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E");
  --pcn-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
  --pcn-shield:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
}

/* tone variables — deliberately LOW specificity so the tone classes can win;
   the high-specificity card rules below only read them */
body.pc .pl-content .pc-notices,body.pc #nmTgBar,body.pc .verification-banner,body.pc .alert{--tone:var(--accent);--tone-soft:var(--accent-soft);--pcn-ico:var(--pcn-info);--pcn-sh:0 0 0 transparent}
body.pc .verification-banner,body.pc .alert-warning{--tone:var(--amber);--tone-soft:var(--amber-soft);--pcn-ico:var(--pcn-warn)}
body.pc .verification-banner.email-verification{--pcn-ico:var(--pcn-mail)}
body.pc .verification-banner.user-validation{--pcn-ico:var(--pcn-shield)}
body.pc .alert-success{--tone:var(--green);--tone-soft:var(--green-soft);--pcn-ico:var(--pcn-ok)}
body.pc .alert-danger,body.pc .alert-error{--tone:var(--red);--tone-soft:var(--red-soft);--pcn-ico:var(--pcn-bad)}

/* 1. the container stops being a rail: no frame, cards separated by 10px */
body.pc .pl-content .pc-notices{display:flex;flex-direction:column;gap:10px !important;margin:0 0 16px !important;padding:0;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none;overflow:visible !important}
body.pc .pl-content .pc-notices:not(:has(>*)){display:none !important;margin:0 !important}
/* knowledgebasearticle.tpl carries a second .pc-notices (v310 glued it on with -15px) */
body.pc .pl-content>.pc-notices+.pc-notices{margin-top:0 !important;border-top:0;border-radius:0 !important}
body.pc .pl-content>.pc-notices:has(>*)+.pc-notices:has(>*){margin-top:-6px !important}

/* 2. the card frame — same list as v311 :669 plus the page-level alerts
      (:945/:946 selectors repeated verbatim so they tie on specificity and lose on order) */
body.pc .pl-content .pc-notices>#nmTgBar,
body.pc .pl-content .pc-notices>.verification-banner,
body.pc .pl-content .pc-notices>.verification-banner.email-verification,
body.pc .pl-content .pc-notices>.alert,
body.pc .pl-content .pc-notices>div,
body.pc .pl-content>.alert:not(.wpp-banner),
body.pc .pl-content>.alert.alert-warning:has(.btn),
body.pc .pl-content>.alert:has(> a.btn:first-child){
  position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;
  min-height:48px !important;margin:0 !important;padding:12px 16px !important;
  background:var(--panel) !important;border:1px solid var(--border) !important;border-radius:var(--r-card) !important;
  box-shadow:inset 3px 0 0 var(--tone),var(--pcn-sh) !important;
  color:var(--text) !important;font-family:var(--font);font-size:13.5px !important;font-weight:500;line-height:1.45;
  text-align:left !important;overflow:visible !important;
  transition:box-shadow .2s var(--ease),border-color .15s var(--ease)}
/* the three known kinds carry a disc on the left -> text starts at 62px (16 + 34 + 12) */
body.pc .pl-content .pc-notices>#nmTgBar,
body.pc .pl-content .pc-notices>.verification-banner,
body.pc .pl-content .pc-notices>.verification-banner.email-verification,
body.pc .pl-content .pc-notices>.alert,
body.pc .pl-content>.alert:not(.wpp-banner),
body.pc .pl-content>.alert.alert-warning:has(.btn),
body.pc .pl-content>.alert:has(> a.btn:first-child){padding-left:62px !important}
/* room for the dismiss disc */
body.pc .pl-content .pc-notices>#nmTgBar:has(>.x),
body.pc .pl-content .pc-notices>.verification-banner,
body.pc .pl-content .pc-notices>.verification-banner.email-verification,
body.pc .pl-content .pc-notices>.alert:has(.close),
body.pc .pl-content>.alert:not(.wpp-banner):has(.close){padding-right:48px !important}
/* page-level alerts are not inside the gap column: space them themselves */
body.pc .pl-content>.alert:not(.wpp-banner),
body.pc .pl-content>.alert.alert-warning:has(.btn),
body.pc .pl-content>.alert:has(> a.btn:first-child){margin:0 0 16px !important}
body.pc .pl-content>.alert:not(.wpp-banner)+.alert:not(.wpp-banner){margin-top:-6px !important}
/* info cards answer the pointer with the console's resting lift shadow.
   DELIBERATE: notices never translate on hover — they are not clickable
   surfaces, so they carry no --lift-y. Only the shadow and border answer. */
body.pc .pl-content .pc-notices>#nmTgBar:hover,
body.pc .pl-content .pc-notices>.alert-info:hover,
body.pc .pl-content>.alert-info:not(.wpp-banner):hover{--pcn-sh:var(--lift);border-color:var(--border-strong) !important}

/* 3. the disc: #nmTgBar keeps its real .i (image inside stays 22px) */
body.pc .pl-content .pc-notices>#nmTgBar .i{position:absolute !important;left:16px !important;top:50% !important;transform:translateY(-50%);width:34px !important;height:34px !important;margin:0 !important;padding:0 !important;border-radius:50% !important;background:var(--accent-soft) !important;box-shadow:var(--tile-ring);color:var(--accent) !important;display:grid !important;place-items:center;font-size:16px;line-height:1;overflow:hidden;flex:none}
body.pc .pl-content .pc-notices>#nmTgBar .i img,body.pc .pl-content .pc-notices>#nmTgBar .i svg{width:22px !important;height:22px !important;max-width:none;display:block;object-fit:contain;border-radius:0}
/* .verification-banner and .alert draw theirs: ::before = disc, ::after = glyph over it
   (both absolute so they stay put when the CTA wraps under the text on small screens) */
body.pc .pl-content .pc-notices>.verification-banner::before,
body.pc .pl-content .pc-notices>.alert::before,
body.pc .pl-content>.alert:not(.wpp-banner)::before{content:"" !important;position:absolute !important;left:16px !important;top:50% !important;transform:translateY(-50%);width:34px !important;height:34px !important;margin:0 !important;border-radius:50% !important;background:var(--tone-soft) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 18%,transparent);flex:none !important;pointer-events:none}
body.pc .pl-content .pc-notices>.verification-banner::after,
body.pc .pl-content .pc-notices>.alert::after,
body.pc .pl-content>.alert:not(.wpp-banner)::after{content:"";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:34px;height:34px;background:var(--tone);-webkit-mask:var(--pcn-ico) center/17px 17px no-repeat;mask:var(--pcn-ico) center/17px 17px no-repeat;pointer-events:none}
/* the stock glyphs (FontAwesome <i>, the theme's inline <svg>) give way to the disc */
body.pc .pl-content .pc-notices>.verification-banner [class*="col-"]>i,
body.pc .pl-content .pc-notices>.verification-banner .fa-exclamation-triangle,
body.pc .pl-content .pc-notices>.alert>svg,
body.pc .pl-content .pc-notices>.alert>i[class*="fa"],
body.pc .pl-content>.alert:not(.wpp-banner)>svg,
body.pc .pl-content>.alert:not(.wpp-banner)>i[class*="fa"]{display:none !important}

/* 4. text */
body.pc .pl-content .pc-notices>#nmTgBar .t{flex:1 1 240px !important;min-width:0;color:var(--text) !important;font-size:13.5px !important;font-weight:500 !important;line-height:1.45}
body.pc .pl-content .pc-notices>#nmTgBar .t br{display:none}
body.pc .pl-content .pc-notices>#nmTgBar .t small{display:block !important;margin:2px 0 0 !important;font-size:12.5px !important;font-weight:400 !important;color:var(--dim) !important;line-height:1.45}
/* verification: bootstrap grid flattened into one flexible row */
body.pc .pl-content .pc-notices>.verification-banner>.container{flex:1 1 0 !important;min-width:0;width:auto !important;max-width:none !important;padding:0 !important;margin:0 !important}
body.pc .pl-content .pc-notices>.verification-banner .row{display:flex !important;align-items:center !important;flex-wrap:wrap;gap:8px 12px !important;margin:0 !important}
body.pc .pl-content .pc-notices>.verification-banner .text{display:block;flex:1 1 auto;min-width:0;font-size:13.5px !important;font-weight:500 !important;color:var(--text) !important;line-height:1.45}
/* alerts: whatever alert.tpl / the page puts inside */
body.pc .pl-content .pc-notices>.alert p,body.pc .pl-content>.alert:not(.wpp-banner) p{margin:0 !important;min-width:0}
body.pc .pl-content .pc-notices>.alert ul,body.pc .pl-content>.alert:not(.wpp-banner) ul{margin:0;padding-left:18px;min-width:0}
body.pc .pl-content .pc-notices>.alert li+li,body.pc .pl-content>.alert:not(.wpp-banner) li+li{margin-top:3px}
body.pc .pl-content .pc-notices>.alert small,body.pc .pl-content>.alert:not(.wpp-banner) small{font-size:12.5px;font-weight:400;color:var(--dim)}
body.pc .pl-content .pc-notices>.alert strong,body.pc .pl-content .pc-notices>.alert b,body.pc .pl-content>.alert:not(.wpp-banner) strong,body.pc .pl-content>.alert:not(.wpp-banner) b{font-weight:600;color:var(--text)}
body.pc .pl-content .pc-notices>.alert a:not(.btn):not(.pc-btn),body.pc .pl-content>.alert:not(.wpp-banner) a:not(.btn):not(.pc-btn){color:var(--accent-2) !important;font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--accent-line)}

/* 5. the CTA: .pc-btn-like ghost pill, 32px, on the right */
body.pc .pl-content .pc-notices>#nmTgBar .b,
body.pc .pl-content .pc-notices>.verification-banner .btn,
body.pc .pl-content .pc-notices>.verification-banner .btn-resend-verify-email,
body.pc .pl-content .pc-notices>.alert .btn,
body.pc .pl-content .pc-notices>.alert>.btn,
body.pc .pl-content>.alert:not(.wpp-banner) .btn,
body.pc .pl-content>.alert:has(> a.btn:first-child)>a.btn{
  display:inline-flex !important;align-items:center;justify-content:center;gap:7px;
  height:32px !important;line-height:30px !important;padding:0 14px !important;margin:0 0 0 auto !important;
  width:auto !important;flex:none;order:2;
  border-radius:var(--r-pill) !important;background:transparent !important;border:1px solid var(--border-strong) !important;
  color:var(--accent-2) !important;font-family:var(--font);font-size:12.5px !important;font-weight:600 !important;
  white-space:nowrap;text-decoration:none !important;box-shadow:none !important;cursor:pointer;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)}
body.pc .pl-content .pc-notices>#nmTgBar .b:hover,
body.pc .pl-content .pc-notices>.verification-banner .btn:hover,
body.pc .pl-content .pc-notices>.verification-banner .btn-resend-verify-email:hover,
body.pc .pl-content .pc-notices>.alert .btn:hover,
body.pc .pl-content .pc-notices>.alert>.btn:hover,
body.pc .pl-content>.alert:not(.wpp-banner) .btn:hover,
body.pc .pl-content>.alert:has(> a.btn:first-child)>a.btn:hover{background:var(--accent-soft) !important;border-color:rgba(125,211,252,.48) !important;color:var(--ice-1) !important;transform:none}
body.pc .pl-content .pc-notices>#nmTgBar .b:active,
body.pc .pl-content .pc-notices>.verification-banner .btn:active,
body.pc .pl-content .pc-notices>.alert .btn:active,
body.pc .pl-content>.alert:not(.wpp-banner) .btn:active{transform:translateY(.5px)}
body.pc .pl-content .pc-notices>#nmTgBar .b svg,
body.pc .pl-content .pc-notices>.verification-banner .btn svg,
body.pc .pl-content .pc-notices>.alert .btn svg,
body.pc .pl-content>.alert:not(.wpp-banner) .btn svg{width:15px;height:15px;stroke-width:1.8}
body.pc .pl-content .pc-notices>#nmTgBar .b i,
body.pc .pl-content .pc-notices>.verification-banner .btn i,
body.pc .pl-content .pc-notices>.alert .btn i,
body.pc .pl-content>.alert:not(.wpp-banner) .btn i{font-size:13px}

/* 6. dismiss: 28px round hover disc, vertically centred on the right
      (#btnEmailVerificationClose is listed by id to out-rank papilio.css :1232) */
body.pc .pl-content .pc-notices>#nmTgBar .x,
body.pc .pl-content .pc-notices>.verification-banner .close,
body.pc .pl-content .pc-notices>.verification-banner button.close,
body.pc .pl-content .pc-notices>.verification-banner #btnEmailVerificationClose,
body.pc .pl-content .pc-notices>.alert .close,
body.pc .pl-content>.alert:not(.wpp-banner) .close{
  position:absolute !important;right:10px !important;top:50% !important;bottom:auto !important;transform:translateY(-50%);
  width:28px !important;height:28px !important;padding:0 !important;margin:0 !important;
  display:grid !important;place-items:center;float:none !important;z-index:2;
  border:0 !important;border-radius:50% !important;background:transparent !important;
  color:var(--faint) !important;opacity:1 !important;
  font-family:var(--font);font-size:18px !important;font-weight:400 !important;line-height:1 !important;
  text-shadow:none !important;box-shadow:none !important;cursor:pointer;
  transition:background .15s var(--ease),color .15s var(--ease)}
body.pc .pl-content .pc-notices>#nmTgBar .x:hover,
body.pc .pl-content .pc-notices>.verification-banner .close:hover,
body.pc .pl-content .pc-notices>.verification-banner #btnEmailVerificationClose:hover,
body.pc .pl-content .pc-notices>.alert .close:hover,
body.pc .pl-content>.alert:not(.wpp-banner) .close:hover{background:var(--raise) !important;color:var(--text) !important;opacity:1 !important}
body.pc .pl-content .pc-notices>#nmTgBar .x span,
body.pc .pl-content .pc-notices>.verification-banner .close span,
body.pc .pl-content .pc-notices>.alert .close span,
body.pc .pl-content>.alert:not(.wpp-banner) .close span{display:block;line-height:1;transform:translateY(-1px)}

/* 7. entrance: the console's ONE rise (@keyframes pcrise, FOUNDATION section 0),
      staggered per card and capped at .18s so the ladder ends inside .2s
      (console.css :400 already mutes everything under prefers-reduced-motion) */
@media(prefers-reduced-motion:no-preference){
  body.pc .pl-content .pc-notices>*,body.pc .pl-content>.alert:not(.wpp-banner){animation:pcrise .38s var(--ease) backwards}
  body.pc .pl-content .pc-notices>*:nth-child(2){animation-delay:.06s}
  body.pc .pl-content .pc-notices>*:nth-child(3){animation-delay:.12s}
  body.pc .pl-content .pc-notices>*:nth-child(n+4){animation-delay:.18s}
}

/* 8. light mode: white cards get Metal's hairline lift, the pill uses the
      darker accent for contrast, hover glow retuned to the light accent */
html.pl-light body.pc .pl-content .pc-notices>#nmTgBar,
html.pl-light body.pc .pl-content .pc-notices>.verification-banner,
html.pl-light body.pc .pl-content .pc-notices>.verification-banner.email-verification,
html.pl-light body.pc .pl-content .pc-notices>.alert,
html.pl-light body.pc .pl-content .pc-notices>div,
html.pl-light body.pc .pl-content>.alert:not(.wpp-banner){--pcn-sh:0 1px 2px rgba(16,24,40,.04),0 1px 0 rgba(16,24,40,.02)}
html.pl-light body.pc .pl-content .pc-notices>#nmTgBar:hover,
html.pl-light body.pc .pl-content .pc-notices>.alert-info:hover,
html.pl-light body.pc .pl-content>.alert-info:not(.wpp-banner):hover{--pcn-sh:var(--lift)}
/* (the disc's ring rides on --tile-ring, which already swaps in light mode) */
html.pl-light body.pc .pl-content .pc-notices>#nmTgBar .b,
html.pl-light body.pc .pl-content .pc-notices>.verification-banner .btn,
html.pl-light body.pc .pl-content .pc-notices>.verification-banner .btn-resend-verify-email,
html.pl-light body.pc .pl-content .pc-notices>.alert .btn,
html.pl-light body.pc .pl-content .pc-notices>.alert>.btn,
html.pl-light body.pc .pl-content>.alert:not(.wpp-banner) .btn,
html.pl-light body.pc .pl-content>.alert:has(> a.btn:first-child)>a.btn{color:var(--accent) !important;border-color:rgba(2,132,199,.28) !important}
html.pl-light body.pc .pl-content .pc-notices>#nmTgBar .b:hover,
html.pl-light body.pc .pl-content .pc-notices>.verification-banner .btn:hover,
html.pl-light body.pc .pl-content .pc-notices>.verification-banner .btn-resend-verify-email:hover,
html.pl-light body.pc .pl-content .pc-notices>.alert .btn:hover,
html.pl-light body.pc .pl-content .pc-notices>.alert>.btn:hover,
html.pl-light body.pc .pl-content>.alert:not(.wpp-banner) .btn:hover,
html.pl-light body.pc .pl-content>.alert:has(> a.btn:first-child)>a.btn:hover{background:var(--accent-soft) !important;border-color:rgba(2,132,199,.45) !important;color:#0369a1 !important}
html.pl-light body.pc .pl-content .pc-notices>.alert a:not(.btn):not(.pc-btn),
html.pl-light body.pc .pl-content>.alert:not(.wpp-banner) a:not(.btn):not(.pc-btn){color:var(--accent) !important}

/* 9. ≤760px: the CTA drops under the text (still aligned with it thanks to
      the 58px inset), disc and dismiss tuck in by 4px */
@media(max-width:760px){
  body.pc .pl-content .pc-notices>#nmTgBar,
  body.pc .pl-content .pc-notices>.verification-banner,
  body.pc .pl-content .pc-notices>.verification-banner.email-verification,
  body.pc .pl-content .pc-notices>.alert,
  body.pc .pl-content .pc-notices>div,
  body.pc .pl-content>.alert:not(.wpp-banner),
  body.pc .pl-content>.alert.alert-warning:has(.btn),
  body.pc .pl-content>.alert:has(> a.btn:first-child){flex-wrap:wrap;gap:8px 12px;padding:11px 14px !important}
  body.pc .pl-content .pc-notices>#nmTgBar,
  body.pc .pl-content .pc-notices>.verification-banner,
  body.pc .pl-content .pc-notices>.verification-banner.email-verification,
  body.pc .pl-content .pc-notices>.alert,
  body.pc .pl-content>.alert:not(.wpp-banner),
  body.pc .pl-content>.alert.alert-warning:has(.btn),
  body.pc .pl-content>.alert:has(> a.btn:first-child){padding-left:58px !important}
  body.pc .pl-content .pc-notices>#nmTgBar:has(>.x),
  body.pc .pl-content .pc-notices>.verification-banner,
  body.pc .pl-content .pc-notices>.verification-banner.email-verification,
  body.pc .pl-content .pc-notices>.alert:has(.close),
  body.pc .pl-content>.alert:not(.wpp-banner):has(.close){padding-right:44px !important}
  body.pc .pl-content .pc-notices>#nmTgBar .i,
  body.pc .pl-content .pc-notices>.verification-banner::before,
  body.pc .pl-content .pc-notices>.verification-banner::after,
  body.pc .pl-content .pc-notices>.alert::before,
  body.pc .pl-content .pc-notices>.alert::after,
  body.pc .pl-content>.alert:not(.wpp-banner)::before,
  body.pc .pl-content>.alert:not(.wpp-banner)::after{left:12px !important}
  body.pc .pl-content .pc-notices>#nmTgBar .t{flex-basis:160px !important}
  body.pc .pl-content .pc-notices>.verification-banner .row{flex-direction:row;align-items:center !important}
  body.pc .pl-content .pc-notices>#nmTgBar .b,
  body.pc .pl-content .pc-notices>.verification-banner .btn,
  body.pc .pl-content .pc-notices>.verification-banner .btn-resend-verify-email,
  body.pc .pl-content .pc-notices>.alert .btn,
  body.pc .pl-content .pc-notices>.alert>.btn,
  body.pc .pl-content>.alert:not(.wpp-banner) .btn,
  body.pc .pl-content>.alert:has(> a.btn:first-child)>a.btn{margin-left:0 !important}
  body.pc .pl-content .pc-notices>#nmTgBar .x,
  body.pc .pl-content .pc-notices>.verification-banner .close,
  body.pc .pl-content .pc-notices>.verification-banner #btnEmailVerificationClose,
  body.pc .pl-content .pc-notices>.alert .close,
  body.pc .pl-content>.alert:not(.wpp-banner) .close{right:8px !important}
}


/* ======================= STORE ======================= */
/* ---- v330 (2026-09-14): store cards ----
   Ali #6 - real effects on the plan cards (.pl-plan inside #order-standard_cart).
   Gradient stroke = masked ::before (card body stays opaque), one diagonal light
   sweep per hover (::after, translateX .9s, under the content), 4px lift on a soft
   blue shadow, glow ring on the species tile, featured card with a permanent glow
   + gradient top hairline, bigger type: name 20 / tag 13 / price 30 Clash Display
   with a 15px --dim currency / specs 13.5 on 24px chips / 38px order button.
   No tpl change. Appended after console.css v329 (:1464). Every selector carries
   `body.pc #order-standard_cart` so it out-ranks v304/v305/v327 and papilio.css.
   Cascade notes:
   - papilio :444 keeps overflow:hidden (needed for the sweep). overflow clips at the
     padding box, so the stroke cannot sit ON a real border -> border:0 and the ring
     is drawn at inset:0, exactly where the 1px border used to be.
   - .pl-plan-feat has box-shadow:none !important (console :498) -> the featured glow
     and its hover are !important at >= (1,2,1) / (1,3,1).
   - console :478 (:hover, 1,3,1) paints background:var(--panel-2) and would erase the
     featured card's layered background on hover / on tap -> the background is built
     from --plan-layers + --plan-bg so base, hover, touch and light share one source.
   - console :1267 (.pl-plan-price+.pl-plan-btn, 1,3,1) out-ranks .pl-plan-btn alone
     -> the button block uses `.pl-plan .pl-plan-btn`.
   ---- */

/* ---- grid ---- */
body.pc #order-standard_cart .pl-plan-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;align-items:stretch}

/* ---- card ---- */
body.pc #order-standard_cart .pl-plan{
  --plan-bg:var(--panel);
  --plan-layers:none;
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;
  padding:20px 20px 18px;
  border:0;border-radius:var(--r-card);
  background:var(--plan-layers),var(--plan-bg);
  box-shadow:none;transform:translateY(0);
  transition:transform var(--t-hover),box-shadow var(--t-hover),background-color var(--t-hover)}

/* gradient stroke: a 1px ring cut out of the pseudo with a mask, so the body stays opaque */
body.pc #order-standard_cart .pl-plan::before{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(191,238,255,.55),rgba(56,189,248,.15),rgba(56,189,248,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.75;filter:none;
  transition:opacity .35s var(--ease),filter .35s var(--ease)}
body.pc #order-standard_cart .pl-plan:focus-within::before{opacity:1}
/* very old engines without mask-composite: no ring -> plain border back */
@supports not ((-webkit-mask-composite:xor) or (mask-composite:exclude)){
  body.pc #order-standard_cart .pl-plan{border:1px solid var(--border-strong)}
  body.pc #order-standard_cart .pl-plan::before{display:none}
}

/* light sweep: a skewed band parked off the left edge, crosses once on hover,
   z-index:-1 inside the card's own stacking context = between the ground and the type */
body.pc #order-standard_cart .pl-plan::after{
  content:"";display:block;position:absolute;top:-30%;bottom:-30%;left:0;right:auto;width:38%;height:auto;
  border-radius:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(191,238,255,0) 0%,rgba(191,238,255,.07) 35%,rgba(191,238,255,.15) 50%,rgba(191,238,255,.07) 65%,rgba(191,238,255,0) 100%);
  transform:translateX(-150%) skewX(-18deg);opacity:0}
@keyframes pcPlanSweep{
  0%{transform:translateX(-150%) skewX(-18deg);opacity:0}
  12%{opacity:1}
  82%{opacity:1}
  100%{transform:translateX(420%) skewX(-18deg);opacity:0}
}

/* ---- head: species tile + name ---- */
body.pc #order-standard_cart .pl-plan-head{justify-content:flex-start;align-items:center;gap:14px}
/* the species tile IS the console's 60px tile: same surface tokens, same radius,
   same glyph ratio (mask 46% / svg 26px). The trailing 0-spread ring only exists
   so the hover glow has something to animate from. */
body.pc #order-standard_cart .pl-plan-head .pc-tile{
  width:60px;height:60px;border-radius:var(--r-tile-lg);flex:none;
  background:var(--tile);
  box-shadow:var(--tile-ring),inset 0 1px 0 rgba(255,255,255,.06),0 0 0 0 rgba(56,189,248,0);
  color:var(--accent-2);
  transition:box-shadow var(--t-hover),color var(--t-hover)}
body.pc #order-standard_cart .pl-plan-head .pc-tile::before{width:46%;height:46%}
body.pc #order-standard_cart .pl-plan-head .pc-tile svg{width:26px;height:26px}
body.pc #order-standard_cart .pl-plan-head .t{min-width:0;flex:1}
body.pc #order-standard_cart .pl-plan-name{font-size:20px !important;line-height:1.15;letter-spacing:-.012em}
body.pc #order-standard_cart .pl-plan-qty{font-size:11.5px;margin-top:4px}
body.pc #order-standard_cart .pl-plan-tag,body.pc #order-standard_cart .pl-plan>p{font-size:13px;color:var(--dim);line-height:1.5;margin:12px 0 0;font-weight:400}
body.pc #order-standard_cart .pl-plan>p b,body.pc #order-standard_cart .pl-plan>p strong{color:var(--text);font-weight:500}

/* ---- spec list: 24px icon chips, 13.5px, fading hairline on top ---- */
body.pc #order-standard_cart .pl-plan-feats{
  grid-template-columns:1fr 1fr;gap:9px 12px;padding:14px 0 0;margin:14px 0 0;border-top:0;
  background:linear-gradient(90deg,rgba(125,211,252,.30),rgba(125,211,252,.05)) 0 0/100% 1px no-repeat}
body.pc #order-standard_cart .pl-plan-feats li{font-size:13.5px;color:var(--dim);gap:9px;align-items:center;line-height:1.3;min-width:0}
body.pc #order-standard_cart .pl-plan-feats li span{white-space:normal;overflow:visible;text-overflow:clip;min-width:0}
body.pc #order-standard_cart .pl-plan-feats li svg{
  width:24px;height:24px;padding:5px;border-radius:7px;flex:none;box-sizing:border-box;
  background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(125,211,252,.12);color:var(--accent);
  transition:background-color .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease)}
body.pc #order-standard_cart .pl-plan-feats b,body.pc #order-standard_cart .pl-plan-feats strong,body.pc #order-standard_cart .pl-plan-feats .feature-value{font-size:14px;font-weight:600;color:var(--text)}

/* ---- price: the console's primary hero number (mono 26px), 15px --dim currency ---- */
body.pc #order-standard_cart .pl-plan-price,
body.pc #order-standard_cart .pl-plan-feats+.pl-plan-price{margin-top:auto;padding-top:16px;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
body.pc #order-standard_cart .pl-plan-price .from{width:100%;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 0 2px}
body.pc #order-standard_cart .pl-plan-price .amt{
  font-family:var(--mono);font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--text);
  display:inline-flex;align-items:baseline;gap:4px}
body.pc #order-standard_cart .pl-plan-price .amt .cur{font-family:var(--font);font-style:normal;font-size:15px;font-weight:500;letter-spacing:0;color:var(--dim)}
body.pc #order-standard_cart .pl-plan-price .amt b{font-weight:600;letter-spacing:-.02em}
body.pc #order-standard_cart .pl-plan-price .amt small{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.05em;color:var(--faint);margin-left:2px}
body.pc #order-standard_cart .pl-plan-price .per{font-size:12.5px;font-weight:500;color:var(--faint)}
body.pc #order-standard_cart .pl-plan-setup{font-size:11.5px;margin-top:8px}

/* ---- order button: 38px, glass edge + glow, brighter on hover ---- */
body.pc #order-standard_cart .pl-plan .pl-plan-btn,
body.pc #order-standard_cart .pl-plan-price+.pl-plan-btn,
body.pc #order-standard_cart .pl-plan-setup+.pl-plan-btn{
  margin-top:16px;height:38px;padding:0 16px;gap:8px;border-radius:var(--r);
  font-size:13.5px;font-weight:600;letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--glow);
  transition:box-shadow .3s var(--ease),filter .2s var(--ease)}
body.pc #order-standard_cart .pl-plan .pl-plan-btn::after{content:"\2192";font-size:15px;line-height:1;margin-left:2px;transition:transform .3s var(--ease)}
body.pc #order-standard_cart .pl-plan .pl-plan-btn:hover{filter:brightness(1.1) saturate(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 14px 34px -12px rgba(56,189,248,.95)}
body.pc #order-standard_cart .pl-plan .pl-plan-btn:hover::after{transform:translateX(3px)}

/* ---- featured card: permanent soft glow, gradient top hairline, corner badge ---- */
body.pc #order-standard_cart .pl-plan-feat{
  padding-top:22px;
  --plan-layers:linear-gradient(90deg,rgba(191,238,255,0) 0%,rgba(191,238,255,.95) 50%,rgba(191,238,255,0) 100%) 50% 0/68% 2px no-repeat,
                radial-gradient(70% 45% at 50% 0%,rgba(56,189,248,.18),rgba(56,189,248,0) 70%);
  box-shadow:var(--lift),0 0 36px -12px rgba(56,189,248,.28) !important}
body.pc #order-standard_cart .pl-plan-feat::before{
  background:linear-gradient(90deg,rgba(191,238,255,0) 0%,rgba(191,238,255,.9) 50%,rgba(191,238,255,0) 100%) 50% 0/70% 2px no-repeat,
             linear-gradient(135deg,rgba(191,238,255,.6),rgba(56,189,248,.25),rgba(56,189,248,.6));
  opacity:.95}
body.pc #order-standard_cart .pl-plan-badge{
  left:auto;right:14px;top:14px;transform:none;z-index:3;
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:5px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(118deg,var(--accent-2),var(--accent));color:var(--accent-ink);
  box-shadow:0 6px 16px -6px rgba(56,189,248,.8)}
body.pc #order-standard_cart .pl-plan-feat .pl-plan-head .t{padding-right:104px}

/* ---- hover (pointer devices only; touch gets no lift) ----
   one contract: --lift-y of travel over --t-hover, landing on --lift-hi */
@media(hover:hover){
  body.pc #order-standard_cart .pl-plan:hover{
    --plan-bg:var(--panel-2);
    background:var(--plan-layers),var(--plan-bg);
    transform:translateY(var(--lift-y));border-color:transparent;
    box-shadow:var(--lift-hi)}
  body.pc #order-standard_cart .pl-plan:hover::before{opacity:1;filter:brightness(1.2)}
  body.pc #order-standard_cart .pl-plan-feat:hover{box-shadow:var(--lift-hi),0 0 44px -10px rgba(56,189,248,.4) !important}
  body.pc #order-standard_cart .pl-plan-feat:hover::before{filter:brightness(1.15)}
  body.pc #order-standard_cart .pl-plan:hover .pl-plan-head .pc-tile{
    color:var(--ice-1);
    box-shadow:inset 0 0 0 1px rgba(191,238,255,.45),inset 0 1px 0 rgba(255,255,255,.1),0 0 0 4px rgba(56,189,248,.14),0 10px 28px -8px rgba(56,189,248,.7)}
  body.pc #order-standard_cart .pl-plan:hover .pl-plan-feats li svg{background:rgba(56,189,248,.18);box-shadow:inset 0 0 0 1px rgba(125,211,252,.26);color:var(--accent-2)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  body.pc #order-standard_cart .pl-plan:hover::after{animation:pcPlanSweep .9s var(--ease) forwards}
}
/* touch: neutralise the tap-emulated hover from console :478 (keeps the featured layers) */
@media(hover:none){
  body.pc #order-standard_cart .pl-plan:hover{background:var(--plan-layers),var(--plan-bg);transform:none;box-shadow:none}
  body.pc #order-standard_cart .pl-plan-feat:hover{box-shadow:var(--lift),0 0 36px -12px rgba(56,189,248,.28) !important}
}

/* ---- light mode: white cards, denser blue stroke, blue-tinted shadow ---- */
html.pl-light body.pc #order-standard_cart .pl-plan{--plan-bg:#ffffff;box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 0 rgba(16,24,40,.02)}
html.pl-light body.pc #order-standard_cart .pl-plan::before{background:linear-gradient(135deg,rgba(2,132,199,.42),rgba(14,165,233,.12),rgba(2,132,199,.36));opacity:.85}
html.pl-light body.pc #order-standard_cart .pl-plan::after{background:linear-gradient(100deg,rgba(2,132,199,0) 0%,rgba(2,132,199,.04) 35%,rgba(2,132,199,.09) 50%,rgba(2,132,199,.04) 65%,rgba(2,132,199,0) 100%)}
/* the tile's surface + ring swap with --tile / --tile-ring; only the highlight
   alpha and the transparent starting ring need a light-mode value */
html.pl-light body.pc #order-standard_cart .pl-plan-head .pc-tile{
  box-shadow:var(--tile-ring),inset 0 1px 0 rgba(255,255,255,.6),0 0 0 0 rgba(2,132,199,0);
  color:var(--accent)}
html.pl-light body.pc #order-standard_cart .pl-plan-feats{background:linear-gradient(90deg,rgba(2,132,199,.25),rgba(2,132,199,.04)) 0 0/100% 1px no-repeat}
html.pl-light body.pc #order-standard_cart .pl-plan-feats li svg{box-shadow:inset 0 0 0 1px rgba(2,132,199,.10)}
html.pl-light body.pc #order-standard_cart .pl-plan .pl-plan-btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),var(--glow)}
html.pl-light body.pc #order-standard_cart .pl-plan .pl-plan-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 14px 32px -12px rgba(2,132,199,.75)}
html.pl-light body.pc #order-standard_cart .pl-plan-feat{
  --plan-layers:linear-gradient(90deg,rgba(2,132,199,0) 0%,rgba(2,132,199,.85) 50%,rgba(2,132,199,0) 100%) 50% 0/68% 2px no-repeat,
                radial-gradient(70% 45% at 50% 0%,rgba(14,165,233,.14),rgba(14,165,233,0) 70%);
  box-shadow:var(--lift),0 0 36px -12px rgba(2,132,199,.12) !important}
html.pl-light body.pc #order-standard_cart .pl-plan-feat::before{
  background:linear-gradient(90deg,rgba(2,132,199,0) 0%,rgba(2,132,199,.8) 50%,rgba(2,132,199,0) 100%) 50% 0/70% 2px no-repeat,
             linear-gradient(135deg,rgba(2,132,199,.5),rgba(14,165,233,.2),rgba(2,132,199,.45));
  opacity:1}
html.pl-light body.pc #order-standard_cart .pl-plan-badge{box-shadow:0 6px 16px -6px rgba(2,132,199,.6)}
@media(hover:hover){
  html.pl-light body.pc #order-standard_cart .pl-plan:hover{--plan-bg:#ffffff;box-shadow:var(--lift-hi)}
  html.pl-light body.pc #order-standard_cart .pl-plan:hover::before{opacity:1;filter:none;background:linear-gradient(135deg,rgba(2,132,199,.62),rgba(14,165,233,.22),rgba(2,132,199,.52))}
  html.pl-light body.pc #order-standard_cart .pl-plan-feat:hover{box-shadow:var(--lift-hi),0 0 44px -10px rgba(2,132,199,.16) !important}
  html.pl-light body.pc #order-standard_cart .pl-plan-feat:hover::before{filter:none}
  html.pl-light body.pc #order-standard_cart .pl-plan:hover .pl-plan-head .pc-tile{
    color:var(--ice-4);
    box-shadow:inset 0 0 0 1px rgba(2,132,199,.3),inset 0 1px 0 rgba(255,255,255,.7),0 0 0 4px rgba(14,165,233,.12),0 10px 26px -8px rgba(2,132,199,.4)}
  html.pl-light body.pc #order-standard_cart .pl-plan:hover .pl-plan-feats li svg{background:rgba(14,165,233,.16);box-shadow:inset 0 0 0 1px rgba(2,132,199,.2);color:var(--accent)}
}
@media(hover:none){
  html.pl-light body.pc #order-standard_cart .pl-plan:hover{box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 0 rgba(16,24,40,.02)}
  html.pl-light body.pc #order-standard_cart .pl-plan-feat:hover{box-shadow:var(--lift),0 0 36px -12px rgba(2,132,199,.12) !important}
}

/* ---- phones: one column, slightly tighter, no lift (hover rules are pointer-only above) ---- */
@media(max-width:760px){
  body.pc #order-standard_cart .pl-plan-grid{grid-template-columns:1fr;gap:12px}
  /* the card keeps var(--r-card): one radius at every width */
  body.pc #order-standard_cart .pl-plan{padding:18px 16px 16px}
  body.pc #order-standard_cart .pl-plan-feat{padding-top:20px}
  body.pc #order-standard_cart .pl-plan-head{gap:12px}
  body.pc #order-standard_cart .pl-plan-head .pc-tile{width:52px;height:52px}
  body.pc #order-standard_cart .pl-plan-head .pc-tile svg{width:22px;height:22px}
  body.pc #order-standard_cart .pl-plan-name{font-size:19px !important}
  /* hero number steps down to the secondary size, like every other numeral */
  body.pc #order-standard_cart .pl-plan-price .amt{font-size:22px}
  body.pc #order-standard_cart .pl-plan-feats{gap:8px 10px}
}


/* ======================= KB ======================= */
/* ---- v330 (2026-09-14): knowledgebase ---- */
/* Scope: body.pc[data-tpl^="knowledgebase"] = knowledgebase (index), knowledgebasecat
   (category + search results) and knowledgebasearticle. Needs data-tpl="{$templatefile}"
   on <body> (header.tpl:40). Every selector below is (0,3,1) or higher, so it beats the
   v321/v322 rules at console.css:749-753 and :953-977 and the v330 foundation scale
   (.pc-pagehead h1 28px, .pc-act 13.5px, .pc-tile.lg 60px) regardless of order.
   Strokes use the padding-box/border-box gradient trick (no pseudo-elements), so they
   survive overflow:hidden and never fight the rows' hover backgrounds. */

@property --kba{syntax:'<angle>';inherits:false;initial-value:0deg}
@property --kb-s1{syntax:'<color>';inherits:false;initial-value:transparent}
@property --kb-s2{syntax:'<color>';inherits:false;initial-value:transparent}
@keyframes pckbspin{from{--kba:0deg}to{--kba:360deg}}

/* page-level palette for the three KB templates (light mode re-tunes at the bottom) */
body.pc[data-tpl^="knowledgebase"]{
  --kb-stroke-a:rgba(191,238,255,.40);      --kb-stroke-b:rgba(56,189,248,.12);
  --kb-stroke-a-hi:rgba(191,238,255,.82);   --kb-stroke-b-hi:rgba(56,189,248,.50);
  --kb-stroke-card-a:rgba(191,238,255,.26); --kb-stroke-card-b:rgba(56,189,248,.10);
  /* elevation comes from the console's two recipes; these aliases only keep the
     KB rules below readable (they swap with --lift/--lift-hi in light mode too) */
  --kb-shadow:var(--lift);
  --kb-shadow-hi:var(--lift-hi);
  --kb-shadow-card:var(--lift);
  --kb-hover:rgba(56,189,248,.06);
  --kb-ring:rgba(125,211,252,.20);
  --kb-hi:rgba(56,189,248,.95);
  --kb-peak:#e9f8ff;
  --kb-focus:0 0 0 6px rgba(56,189,248,.10);
  --kb-title:linear-gradient(100deg,#e9f8ff 5%,#bfeeff 35%,#38bdf8 70%,#0ea5e9 100%);
  --kb-title-hover:var(--ice-1);
}

/* 1. big gradient title ------------------------------------------------ */
body.pc[data-tpl^="knowledgebase"] .pc-pagehead{margin-bottom:20px}
body.pc[data-tpl^="knowledgebase"] .pc-pagehead h1{
  font-family:var(--display);font-size:32px;font-weight:600;letter-spacing:-.02em;line-height:1.1;
  width:fit-content;max-width:100%;padding-bottom:.04em;margin:0;
  background:var(--kb-title);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
body.pc[data-tpl="knowledgebasearticle"] .pc-pagehead h1{font-size:28px;line-height:1.15;max-width:min(100%,40ch)}
body.pc[data-tpl^="knowledgebase"] .pc-pagehead .sub{font-size:13.5px;margin-top:6px;line-height:1.45}
body.pc[data-tpl^="knowledgebase"] .pc-crumbs{font-size:13px;margin-bottom:10px;gap:8px}
body.pc[data-tpl^="knowledgebase"] .pc-crumbs span{color:var(--ghost)}
body.pc[data-tpl^="knowledgebase"] .pc-crumbs b{color:var(--text);font-weight:500}

/* 2. the search pill: wide, rounded, animated conic stroke ------------- */
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch{
  --kba:0deg;--kb-w1:6%;--kb-w2:12%;--kb-w3:18%;--kb-w4:24%;
  position:relative;display:flex;align-items:center;gap:12px;
  width:100%;max-width:880px;height:56px;margin:0 0 24px;padding:0 8px 0 22px;
  border:1.5px solid transparent;border-radius:var(--r-pill);
  background:
    linear-gradient(var(--panel),var(--panel)) padding-box,
    conic-gradient(from var(--kba),transparent 0,var(--kb-hi) var(--kb-w1),var(--kb-peak) var(--kb-w2),var(--kb-hi) var(--kb-w3),transparent var(--kb-w4)) border-box,
    linear-gradient(var(--kb-ring),var(--kb-ring)) border-box;
  box-shadow:var(--kb-shadow),inset 0 1px 0 rgba(191,238,255,.04);
  transition:box-shadow .2s var(--ease)}
@media(prefers-reduced-motion:no-preference){
  body.pc[data-tpl^="knowledgebase"] .pc-kbsearch{animation:pckbspin 5s linear infinite}
}
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch:hover{--kb-ring:rgba(125,211,252,.30)}
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch:focus-within{
  --kb-ring:rgba(125,211,252,.36);--kb-w1:5%;--kb-w2:14%;--kb-w3:23%;--kb-w4:30%;
  border-color:transparent;
  box-shadow:var(--kb-focus),var(--kb-shadow-hi),inset 0 1px 0 rgba(191,238,255,.05);
  animation-duration:2.4s}
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch>svg{width:18px;height:18px;flex:none;color:var(--faint);stroke-width:1.9;transition:color .2s var(--ease)}
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch:focus-within>svg{color:var(--accent)}
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch input{
  flex:1;min-width:0;height:52px !important;padding:0 !important;margin:0;
  background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  font-family:var(--font);font-size:15px;line-height:1;color:var(--text) !important}
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch input::placeholder{color:var(--faint);opacity:1}
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch input:focus,
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch input:focus-visible{outline:none !important;box-shadow:none !important;border:0 !important;background:transparent !important}
/* the only button in the console allowed off the default 36px: it fills the 56px
   search pill. It uses the ladder's LARGE step verbatim — .pc-btn.lg is
   height:40px / padding:0 18px / font-size:14px (FOUNDATION section 5) — and only
   trades the button radius for the pill radius. .pc-btn.sm is never resized here. */
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch .pc-btn{flex:none;height:40px;padding:0 18px;font-size:14px;border-radius:var(--r-pill);font-weight:600;letter-spacing:.01em}

/* 3. category tiles ---------------------------------------------------- */
body.pc[data-tpl^="knowledgebase"] .pc-depts.pc-kbcats{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;margin-bottom:22px !important}
body.pc[data-tpl^="knowledgebase"] .pc-kbcats+.pc-card{margin-top:0 !important}
body.pc[data-tpl^="knowledgebase"] .pc-kbcats a{
  --kb-s1:var(--kb-stroke-a);--kb-s2:var(--kb-stroke-b);
  position:relative;padding:20px;gap:16px;align-items:flex-start;
  border:1px solid transparent;border-radius:var(--r-card);color:var(--text);
  background:
    linear-gradient(160deg,rgba(191,238,255,.035),transparent 45%) padding-box,
    linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(135deg,var(--kb-s1),var(--kb-s2)) border-box;
  box-shadow:var(--kb-shadow);
  transition:transform var(--t-hover),box-shadow var(--t-hover),--kb-s1 var(--t-hover),--kb-s2 var(--t-hover)}
body.pc[data-tpl^="knowledgebase"] .pc-kbcats a:hover{
  --kb-s1:var(--kb-stroke-a-hi);--kb-s2:var(--kb-stroke-b-hi);
  transform:translateY(var(--lift-y));border-color:transparent;
  background:
    linear-gradient(160deg,rgba(191,238,255,.06),transparent 50%) padding-box,
    linear-gradient(var(--panel-2),var(--panel-2)) padding-box,
    linear-gradient(135deg,var(--kb-s1),var(--kb-s2)) border-box;
  box-shadow:var(--kb-shadow-hi)}
/* size, radius and glyph ratio come from the FOUNDATION's .pc-tile.lg; only the
   KB's halo ornament lives here (the surface rides on --tile / --tile-ring) */
body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .pc-tile.lg{
  color:var(--accent);font-size:0;line-height:0;
  background:var(--tile),var(--panel-2);
  box-shadow:var(--tile-ring),0 0 0 4px rgba(56,189,248,.06),0 12px 28px -14px rgba(56,189,248,.70);
  transition:box-shadow var(--t-hover)}
body.pc[data-tpl^="knowledgebase"] .pc-kbcats a:hover .pc-tile.lg{box-shadow:inset 0 0 0 1px rgba(125,211,252,.36),0 0 0 6px rgba(56,189,248,.12),0 16px 34px -12px rgba(56,189,248,.95)}
body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .t{flex:1;min-width:0;display:block;padding-top:3px;color:var(--text);font-size:13px;line-height:1.5}
body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .t b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;line-height:1.3;margin-bottom:5px;color:var(--text);transition:color .2s var(--ease)}
body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .t>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.5;color:var(--dim)}
body.pc[data-tpl^="knowledgebase"] .pc-kbcats a:hover .t b{color:var(--kb-title-hover)}
/* the chip keeps the console's size and 5px radius (FOUNDATION section 7);
   only its placement in the card and its colours are KB business */
body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .pc-chip{
  align-self:center;margin-left:auto;color:var(--dim);
  background:var(--raise);box-shadow:inset 0 0 0 1px rgba(125,211,252,.10);
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
body.pc[data-tpl^="knowledgebase"] .pc-kbcats a:hover .pc-chip{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line)}

/* cards on the KB pages: gradient stroke + soft blue shadow (list, most-read, article, help, empty) */
body.pc[data-tpl^="knowledgebase"] .pl-content .pc-card{
  --kb-s1:var(--kb-stroke-card-a);--kb-s2:var(--kb-stroke-card-b);
  position:relative;overflow:hidden;
  border:1px solid transparent !important;border-radius:var(--r-card) !important;
  background:linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,var(--kb-s1),var(--kb-s2)) border-box !important;
  box-shadow:var(--kb-shadow-card) !important}
/* (.pc-empty is sized once, for the whole console, in FOUNDATION section 11) */

/* 4. article rows (category list, most read, related) -----------------
   .pc-act, its .ic and its .m span are sized ONCE for the whole console in
   FOUNDATION section 9; everything below is KB ornament only (stripe, stroke,
   glow, chevron, colour). */
body.pc[data-tpl^="knowledgebase"] .pc-act{position:relative;transition:background .18s var(--ease)}
body.pc[data-tpl^="knowledgebase"] .pc-act::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:0 2px 2px 0;background:linear-gradient(180deg,var(--accent-2),var(--accent));opacity:0;transform:scaleY(.4);transition:opacity .18s var(--ease),transform .22s var(--ease)}
body.pc[data-tpl^="knowledgebase"] .pc-act:hover{background:var(--kb-hover);color:var(--text)}
body.pc[data-tpl^="knowledgebase"] .pc-act:hover::before{opacity:1;transform:scaleY(1)}
body.pc[data-tpl^="knowledgebase"] .pc-act:focus-visible{outline-offset:-2px;border-radius:8px}
body.pc[data-tpl^="knowledgebase"] .pc-act .ic{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px rgba(125,211,252,.12);transition:box-shadow .2s var(--ease)}
body.pc[data-tpl^="knowledgebase"] .pc-act:hover .ic{box-shadow:inset 0 0 0 1px rgba(125,211,252,.28),0 8px 18px -10px rgba(56,189,248,.8)}
body.pc[data-tpl^="knowledgebase"] .pc-act .m{line-height:1.35}
body.pc[data-tpl^="knowledgebase"] .pc-act .m b{font-size:14px;font-weight:600;letter-spacing:-.005em;line-height:1.35;white-space:normal;overflow:visible;text-overflow:clip;transition:color .18s var(--ease)}
body.pc[data-tpl^="knowledgebase"] .pc-act:hover .m b{color:var(--kb-title-hover)}
body.pc[data-tpl^="knowledgebase"] .pc-act .m span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--font);line-height:1.5;color:var(--faint);white-space:normal}
/* chevron: the category list carries one in .t; most-read / related rows get one drawn by CSS */
body.pc[data-tpl^="knowledgebase"] .pc-kblist .pc-act .t{display:inline-flex;align-items:center;flex:none;color:var(--ghost);transition:color .18s var(--ease),transform .22s var(--ease)}
body.pc[data-tpl^="knowledgebase"] .pc-kblist .pc-act .t svg{width:16px;height:16px}
body.pc[data-tpl^="knowledgebase"] .pc-kblist .pc-act:hover .t{color:var(--accent);transform:translateX(4px)}
body.pc[data-tpl^="knowledgebase"] .pc-card:not(.pc-kblist) .pc-act::after{
  content:"";flex:none;width:16px;height:16px;color:var(--ghost);background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:color .18s var(--ease),transform .22s var(--ease)}
body.pc[data-tpl^="knowledgebase"] .pc-card:not(.pc-kblist) .pc-act:hover::after{color:var(--accent);transform:translateX(4px)}
/* (the aside rows keep the console row density — same as the dashboard rail) */
body.pc[data-tpl="knowledgebasearticle"] .pc-kbgrid aside .pc-act .m b{font-size:13.5px}

/* 5. article page ------------------------------------------------------ */
/* ONE rail: 300px wide, 14px gutter, collapsing at 1100px — the same rail the
   dashboard (.pc-dash) and the account page (.pc-acct-layout) use */
body.pc[data-tpl="knowledgebasearticle"] .pc-kbgrid{grid-template-columns:minmax(0,1fr) 300px;gap:14px}
body.pc[data-tpl="knowledgebasearticle"] .pc-article{padding:32px 36px 28px;font-size:15px;line-height:1.75;color:var(--text)}
body.pc[data-tpl="knowledgebasearticle"] .pc-article>:first-child{margin-top:0}
body.pc[data-tpl="knowledgebasearticle"] .pc-article h2{position:relative;padding-left:16px;font-family:var(--font);font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin:32px 0 12px;color:var(--text)}
body.pc[data-tpl="knowledgebasearticle"] .pc-article h2::before{content:"";position:absolute;left:0;top:.16em;width:3px;height:1em;border-radius:2px;background:linear-gradient(180deg,var(--accent-2),var(--accent));box-shadow:0 0 12px rgba(56,189,248,.45)}
body.pc[data-tpl="knowledgebasearticle"] .pc-article h3{font-size:16.5px;font-weight:600;letter-spacing:-.01em;margin:24px 0 8px;color:var(--text)}
body.pc[data-tpl="knowledgebasearticle"] .pc-article h4{font-size:15px;font-weight:600;margin:18px 0 6px}
body.pc[data-tpl="knowledgebasearticle"] .pc-article p{margin:0 0 14px;max-width:72ch}
body.pc[data-tpl="knowledgebasearticle"] .pc-article ul,body.pc[data-tpl="knowledgebasearticle"] .pc-article ol{margin:0 0 16px;padding-left:24px;max-width:72ch}
body.pc[data-tpl="knowledgebasearticle"] .pc-article li{margin-bottom:7px}
body.pc[data-tpl="knowledgebasearticle"] .pc-article li::marker{color:var(--accent)}
body.pc[data-tpl="knowledgebasearticle"] .pc-article a{color:var(--accent);text-decoration:underline;text-decoration-color:rgba(56,189,248,.35);text-underline-offset:3px;transition:text-decoration-color .15s var(--ease)}
body.pc[data-tpl="knowledgebasearticle"] .pc-article a:hover{color:var(--accent-2);text-decoration-color:currentColor}
body.pc[data-tpl="knowledgebasearticle"] .pc-article code{font-family:var(--mono);font-size:13px;padding:2px 7px;border-radius:6px;background:rgba(56,189,248,.08);border:1px solid rgba(125,211,252,.16);color:var(--accent-2)}
body.pc[data-tpl="knowledgebasearticle"] .pc-article pre{
  font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--text);margin:0 0 18px;padding:16px 18px;overflow:auto;
  border:1px solid transparent;border-radius:12px;
  background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,linear-gradient(135deg,rgba(191,238,255,.28),rgba(56,189,248,.10) 60%,rgba(125,211,252,.16)) border-box;
  box-shadow:inset 0 1px 0 rgba(191,238,255,.04),0 14px 36px -24px rgba(56,189,248,.40)}
body.pc[data-tpl="knowledgebasearticle"] .pc-article pre code{font-size:inherit;padding:0;border:0;background:none;color:inherit}
body.pc[data-tpl="knowledgebasearticle"] .pc-article img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border);margin:4px 0 16px}
body.pc[data-tpl="knowledgebasearticle"] .pc-article blockquote{margin:0 0 16px;padding:10px 16px;border-left:3px solid var(--accent);border-radius:0 10px 10px 0;background:rgba(56,189,248,.05);color:var(--dim);font-size:14.5px}
body.pc[data-tpl="knowledgebasearticle"] .pc-article hr{border:0;height:1px;background:var(--border);margin:24px 0}
body.pc[data-tpl="knowledgebasearticle"] .pc-article table{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 18px}
body.pc[data-tpl="knowledgebasearticle"] .pc-article th,body.pc[data-tpl="knowledgebasearticle"] .pc-article td{padding:9px 12px;border-bottom:1px solid var(--border-soft);text-align:left;vertical-align:top}
body.pc[data-tpl="knowledgebasearticle"] .pc-article th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border-bottom-color:var(--border)}
body.pc[data-tpl="knowledgebasearticle"] .pc-vote{margin-top:28px;padding-top:18px;font-size:13px;gap:10px}
body.pc[data-tpl="knowledgebasearticle"] .pc-vote span{margin-right:2px}
body.pc[data-tpl="knowledgebasearticle"] .pl-content .pc-kbhelp{
  --kb-s1:var(--kb-stroke-a);--kb-s2:var(--kb-stroke-b);
  padding:20px 20px 18px;gap:6px;margin-top:14px;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(56,189,248,.10),transparent 55%) padding-box,
    linear-gradient(var(--panel),var(--panel)) padding-box,
    linear-gradient(135deg,var(--kb-s1),var(--kb-s2)) border-box !important;
  box-shadow:var(--kb-shadow) !important}
body.pc[data-tpl="knowledgebasearticle"] .pc-kbhelp b{font-size:15px;font-weight:600;letter-spacing:-.01em}
body.pc[data-tpl="knowledgebasearticle"] .pc-kbhelp span{font-size:13px;line-height:1.55;color:var(--dim)}
/* .pc-btn.sm keeps its ONE size (30px / 12.5px, FOUNDATION section 5) here too */
body.pc[data-tpl="knowledgebasearticle"] .pc-kbhelp .pc-btn.sm{margin-top:10px}

/* responsive ---------------------------------------------------------- */
/* the rail collapses at the console's own rail breakpoint, not 100px later */
@media(max-width:1100px){
  body.pc[data-tpl="knowledgebasearticle"] .pc-kbgrid{grid-template-columns:1fr}
}
@media(max-width:900px){
  body.pc[data-tpl="knowledgebasearticle"] .pc-article{padding:24px 20px 22px}
}
@media(max-width:760px){
  body.pc[data-tpl^="knowledgebase"] .pc-pagehead h1{font-size:26px}
  body.pc[data-tpl="knowledgebasearticle"] .pc-pagehead h1{font-size:24px}
  body.pc[data-tpl^="knowledgebase"] .pc-pagehead .sub{font-size:13.5px}
  body.pc[data-tpl^="knowledgebase"] .pc-kbsearch{height:50px;padding:0 6px 0 16px;gap:10px;margin-bottom:18px}
  body.pc[data-tpl^="knowledgebase"] .pc-kbsearch input{height:46px !important;font-size:14.5px}
  /* on phones the pill button falls back to the ladder's DEFAULT step
     (.pc-btn = 36px / 0 14px / 13.5px), keeping only the pill radius */
  body.pc[data-tpl^="knowledgebase"] .pc-kbsearch .pc-btn{height:36px;padding:0 14px;font-size:13.5px}
  body.pc[data-tpl^="knowledgebase"] .pc-depts.pc-kbcats{gap:12px}
  /* the card keeps var(--r-card); the .lg tile keeps the 52px phone size the
     FOUNDATION already declares for every section */
  body.pc[data-tpl^="knowledgebase"] .pc-kbcats a{padding:16px;gap:14px}
  body.pc[data-tpl="knowledgebasearticle"] .pc-article pre{padding:12px 14px;font-size:12.5px}
}

/* motion: the ring is opt-in above; under reduced motion it freezes as a static stroke */
@media(prefers-reduced-motion:reduce){
  body.pc[data-tpl^="knowledgebase"] .pc-kbsearch{--kba:210deg;animation:none !important}
}

/* print: gradient text would print as nothing */
@media print{
  body.pc[data-tpl^="knowledgebase"] .pc-pagehead h1{background:none;color:#000;-webkit-text-fill-color:#000}
  body.pc[data-tpl^="knowledgebase"] .pl-content .pc-card{box-shadow:none !important;background:#fff !important;border-color:#d0d7de !important;overflow:visible}
  body.pc[data-tpl="knowledgebasearticle"] .pc-article pre{background:#f4f6f8;border-color:#d0d7de;box-shadow:none}
}

/* 6. light mode ------------------------------------------------------- */
html.pl-light body.pc[data-tpl^="knowledgebase"]{
  --kb-stroke-a:rgba(2,132,199,.38);        --kb-stroke-b:rgba(14,165,233,.10);
  --kb-stroke-a-hi:rgba(2,132,199,.70);     --kb-stroke-b-hi:rgba(14,165,233,.40);
  --kb-stroke-card-a:rgba(2,132,199,.26);   --kb-stroke-card-b:rgba(14,165,233,.08);
  /* --kb-shadow* are aliases of --lift / --lift-hi, which already carry their
     own light-mode values (FOUNDATION section 0) — nothing to restate here */
  --kb-hover:rgba(14,165,233,.06);
  --kb-ring:rgba(2,132,199,.22);
  --kb-hi:rgba(2,132,199,.85);
  --kb-peak:#38bdf8;
  --kb-focus:0 0 0 6px rgba(14,165,233,.10);
  --kb-title:linear-gradient(100deg,#0b1a2b 0%,#0c3352 30%,#0369a1 65%,#0ea5e9 100%);
  --kb-title-hover:var(--accent);
}
html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-kbsearch{box-shadow:var(--kb-shadow)}
html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-kbsearch:hover{--kb-ring:rgba(2,132,199,.32)}
html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-kbsearch:focus-within{--kb-ring:rgba(2,132,199,.40);box-shadow:var(--kb-focus),var(--kb-shadow-hi)}
html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-kbcats a{background:linear-gradient(160deg,rgba(14,165,233,.04),transparent 45%) padding-box,linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,var(--kb-s1),var(--kb-s2)) border-box}
html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-kbcats a:hover{background:linear-gradient(160deg,rgba(14,165,233,.07),transparent 50%) padding-box,linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,var(--kb-s1),var(--kb-s2)) border-box}
html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .pc-tile.lg{box-shadow:var(--tile-ring),0 0 0 4px rgba(14,165,233,.06),0 12px 28px -14px rgba(2,132,199,.40)}
html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-kbcats a:hover .pc-tile.lg{box-shadow:inset 0 0 0 1px rgba(2,132,199,.28),0 0 0 6px rgba(14,165,233,.11),0 16px 34px -12px rgba(2,132,199,.55)}
html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .pc-chip{box-shadow:inset 0 0 0 1px rgba(2,132,199,.10)}
html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-act .ic{box-shadow:inset 0 0 0 1px rgba(2,132,199,.12)}
html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-act:hover .ic{box-shadow:inset 0 0 0 1px rgba(2,132,199,.26),0 8px 18px -10px rgba(2,132,199,.45)}
html.pl-light body.pc[data-tpl="knowledgebasearticle"] .pc-article h2::before{box-shadow:0 0 10px rgba(2,132,199,.30)}
html.pl-light body.pc[data-tpl="knowledgebasearticle"] .pc-article code{background:rgba(14,165,233,.07);border-color:rgba(2,132,199,.16);color:#0369a1}
html.pl-light body.pc[data-tpl="knowledgebasearticle"] .pc-article pre{background:linear-gradient(var(--panel-2),var(--panel-2)) padding-box,linear-gradient(135deg,rgba(2,132,199,.30),rgba(14,165,233,.08) 60%,rgba(2,132,199,.14)) border-box;box-shadow:0 14px 36px -24px rgba(2,132,199,.28)}
html.pl-light body.pc[data-tpl="knowledgebasearticle"] .pc-article blockquote{background:rgba(14,165,233,.05)}
html.pl-light body.pc[data-tpl="knowledgebasearticle"] .pl-content .pc-kbhelp{background:radial-gradient(120% 90% at 0% 0%,rgba(14,165,233,.09),transparent 55%) padding-box,linear-gradient(var(--panel),var(--panel)) padding-box,linear-gradient(135deg,var(--kb-s1),var(--kb-s2)) border-box !important}


/* ======================= ACCOUNT ======================= */
/* ---- v330 (2026-09-14): account details ---- */
/* clientareadetails.tpl: form cards on the left with a glowing top hairline, an overview rail of icon boxes on the right.
   Append after the end of console.css. All selectors carry body.pc; light mode via html.pl-light body.pc.
   Specificity notes: labels must beat papilio.css:793 (.pl-acct .pl-fg>label = 0,2,1) -> body.pc .pl-acct .pl-fg>label (0,3,1);
   inputs beat console.css:167 (0,2,0 with !important on bg/border/color/radius) by repeating !important at 0,3,0. */

/* (.pl-main{overflow-x:clip} now lives in the FOUNDATION block - it is a shell-wide change) */

/* ---- layout ---- */
/* ONE rail: 300px wide, 14px gutter, collapsing at 1100px — same as .pc-dash
   and .pc-kbgrid */
body.pc .pc-acct-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
body.pc .pc-acct-side{display:flex;flex-direction:column;gap:10px;min-width:0}
@media(min-height:820px){body.pc .pc-acct-side{position:sticky;top:76px}}

/* ---- form cards ---- */
body.pc .pl-acct{width:100%;max-width:none;min-width:0}
body.pc .pl-acct-card{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:none;padding:24px 26px;margin:0 0 14px;transition:border-color .2s var(--ease)}
body.pc .pl-acct-card:focus-within{border-color:var(--border-strong)}
/* the glowing line: sits on the top border, inset from the rounded corners; no overflow:hidden on the card (the phone country dropdown must escape it) */
body.pc .pl-acct-card::before{content:"";position:absolute;left:28px;right:28px;top:-1px;height:1px;border-radius:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(125,211,252,.7),transparent);box-shadow:0 0 18px rgba(56,189,248,.45)}
@keyframes pcacctBreathe{from{opacity:.62}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){
  body.pc .pl-acct-card::before{animation:pcacctBreathe 7s ease-in-out infinite alternate}
  body.pc .pl-acct-card:nth-child(2n)::before{animation-delay:-3.5s}
}

body.pc .pl-acct-head{display:flex;align-items:center;gap:14px;margin:0 0 20px;padding:0 0 16px;border-bottom:0;position:relative}
body.pc .pl-acct-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,var(--accent-line),var(--border) 42%,transparent)}
body.pc .pl-acct-ic{width:44px;height:44px;border-radius:var(--r-xl);flex:none;display:grid;place-items:center;color:var(--accent);background:var(--accent-soft);border:0;box-shadow:var(--tile-ring),0 0 0 4px rgba(56,189,248,.06),0 10px 22px -12px rgba(56,189,248,.7)}
body.pc .pl-acct-ic svg{width:20px;height:20px;stroke-width:1.7}
body.pc .pl-acct-head .t{flex:1;min-width:0}
body.pc .pl-acct-head h3{margin:0;font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.15;color:var(--text)}
body.pc .pl-acct-head .sub{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--faint)}

/* ---- fields ---- */
body.pc .pl-acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
body.pc .pl-acct .pl-fg{margin:0 0 16px;min-width:0}
body.pc .pl-acct .pl-fg-full{grid-column:1/-1}
body.pc .pl-acct .pl-fg>label{display:block;font-size:12.5px;font-weight:500;color:var(--dim);text-transform:none;letter-spacing:0;margin:0 0 6px;line-height:1.3}
body.pc .pl-acct .pl-fg>label .text-danger{color:var(--accent);font-weight:600}
body.pc .pl-acct .form-control,body.pc .pl-acct select,body.pc .pl-acct .custom-select,
body.pc .pl-acct input[type=text],body.pc .pl-acct input[type=email],body.pc .pl-acct input[type=tel],
body.pc .pl-acct .control>input:not([type=checkbox]):not([type=radio]),body.pc .pl-acct .control>select{
  width:100%;height:38px;padding:0 12px;font-size:14px;font-family:var(--font);color:var(--text) !important;
  background-color:var(--panel-2) !important;border:1px solid var(--border-strong) !important;border-radius:var(--r-sm) !important;box-shadow:none !important;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
body.pc .pl-acct textarea.form-control,body.pc .pl-acct .control>textarea{width:100%;height:auto;min-height:96px;padding:9px 12px;font-size:14px;line-height:1.5}
body.pc .pl-acct .form-control:hover:not(:disabled):not(:focus),body.pc .pl-acct select:hover:not(:disabled):not(:focus){border-color:var(--accent-line) !important}
body.pc .pl-acct .form-control:focus,body.pc .pl-acct select:focus,body.pc .pl-acct .custom-select:focus,body.pc .pl-acct textarea:focus{border-color:var(--accent) !important;box-shadow:0 0 0 3px var(--accent-soft) !important;outline:none}
body.pc .pl-acct .form-control::placeholder{color:var(--faint)}
body.pc .pl-acct .form-control:disabled,body.pc .pl-acct select:disabled{opacity:.55;background-color:var(--panel) !important;cursor:not-allowed}
/* selects: own caret (console.css:167 paints background with a shorthand and drops bootstrap's) */
body.pc .pl-acct select,body.pc .pl-acct .custom-select,body.pc .pl-acct .control>select{
  -webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa3ba' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat:no-repeat !important;background-position:right 11px center !important;background-size:13px 13px !important}
body.pc .pl-acct select:focus,body.pc .pl-acct .custom-select:focus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important}
body.pc .pl-acct .pl-fg .iti{width:100%;display:block}
body.pc .pl-acct .pl-fg .control{min-width:0}
body.pc .pl-acct .pl-fg .control input[type=checkbox],body.pc .pl-acct .pl-fg .control input[type=radio]{width:16px;height:16px;accent-color:var(--accent);vertical-align:-3px;margin:0 6px 0 0}
body.pc .pl-acct .pl-fg-hint{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--faint)}
body.pc .pl-acct-note{font-size:13.5px;line-height:1.6;color:var(--dim);margin:-6px 0 16px;max-width:70ch}

/* ---- email preference checks ---- */
body.pc .pl-acct-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:4px}
body.pc .pl-acct .pl-check{display:flex;align-items:center;gap:12px;padding:11px 12px;margin:0;border-radius:var(--r);border:1px solid transparent;font-size:14px;font-weight:500;line-height:1.3;color:var(--dim);text-transform:none;letter-spacing:0;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
body.pc .pl-acct .pl-check:hover{background:var(--panel-2);color:var(--text)}
body.pc .pl-acct .pl-check input[type=checkbox]{-webkit-appearance:none;appearance:none;width:20px;height:20px;margin:0;flex:none;position:relative;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--panel-2);cursor:pointer;transition:background .15s var(--ease),border-color .15s var(--ease),box-shadow .15s var(--ease)}
body.pc .pl-acct .pl-check input[type=checkbox]:hover{border-color:var(--accent-line)}
body.pc .pl-acct .pl-check input[type=checkbox]:checked{background:linear-gradient(135deg,var(--accent-2),var(--accent));border-color:transparent;box-shadow:0 6px 14px -8px rgba(56,189,248,.8)}
body.pc .pl-acct .pl-check input[type=checkbox]:checked::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(42deg)}
body.pc .pl-acct .pl-check input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
body.pc .pl-acct .pl-check input:checked~span{color:var(--text)}

/* ---- marketing switch ---- */
body.pc .pl-acct label.pl-switch{display:inline-flex;align-items:center;gap:12px;margin:0;font-size:14px;font-weight:500;color:var(--text);text-transform:none;letter-spacing:0;cursor:pointer;user-select:none}
body.pc .pl-acct .pl-switch input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
body.pc .pl-acct .pl-switch-track{width:48px;height:27px;border-radius:var(--r-pill);position:relative;flex:none;background:var(--raise);border:1px solid var(--border-strong);transition:background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
body.pc .pl-acct .pl-switch-thumb{position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--dim);box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .2s var(--ease),background .2s var(--ease)}
body.pc .pl-acct .pl-switch input:checked+.pl-switch-track{background:linear-gradient(118deg,var(--accent-2),var(--accent));border-color:transparent;box-shadow:0 8px 18px -10px rgba(56,189,248,.85)}
body.pc .pl-acct .pl-switch input:checked+.pl-switch-track .pl-switch-thumb{left:23px;background:#fff}
body.pc .pl-acct .pl-switch input:focus-visible+.pl-switch-track{box-shadow:0 0 0 3px var(--accent-soft)}
body.pc .pl-acct .pl-switch-state{font-family:var(--font);font-size:14px;font-weight:600;color:var(--dim)}
body.pc .pl-acct .pl-switch input:checked~.pl-switch-state{color:var(--accent)}

/* ---- actions ---- */
body.pc .pl-acct-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:18px;flex-wrap:wrap}
body.pc .pl-acct-actions .note{margin-right:auto;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint);opacity:0;transform:translateX(-4px);transition:opacity .2s var(--ease),transform .2s var(--ease)}
body.pc .pl-acct-actions .note i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
body.pc .pl-acct.is-dirty .pl-acct-actions .note{opacity:1;transform:none}
body.pc .pl-acct-save{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--r-sm);border:1px solid transparent;background:linear-gradient(118deg,var(--accent-2),var(--accent));color:var(--accent-ink);font-family:var(--font);font-size:14px;font-weight:600;line-height:1;cursor:pointer;box-shadow:var(--glow);transition:filter .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
body.pc .pl-acct-save:hover{filter:brightness(1.08);box-shadow:0 12px 30px -12px var(--accent);background:linear-gradient(118deg,var(--accent-2),var(--accent));border-color:transparent;color:var(--accent-ink);transform:none}
body.pc .pl-acct-save:active{transform:translateY(.5px)}
body.pc .pl-acct-save svg{width:16px;height:16px;stroke-width:2.2}
body.pc .pl-acct.is-dirty .pl-acct-save{box-shadow:var(--glow),0 0 0 3px var(--accent-soft)}
body.pc .pl-acct-cancel{height:40px;padding:0 16px;border-radius:var(--r-sm);border:1px solid transparent;background:transparent;color:var(--dim);font-family:var(--font);font-size:14px;font-weight:600;line-height:1;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
body.pc .pl-acct-cancel:hover{background:var(--accent-soft);color:var(--accent-2)}

/* ---- overview rail: icon boxes ---- */
body.pc .pc-acct-box{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;min-width:0;overflow:hidden;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-card);color:var(--text);text-decoration:none !important;transition:border-color var(--t-hover),box-shadow var(--t-hover),transform var(--t-hover),background var(--t-hover)}
body.pc .pc-acct-box::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:0 2px 2px 0;background:linear-gradient(180deg,transparent,var(--accent) 35%,var(--accent) 65%,transparent);box-shadow:0 0 12px rgba(56,189,248,.65);opacity:0;transition:opacity var(--t-hover)}
/* same hover contract as .pl-plan and .pc-kbcats a: --lift-y over --t-hover onto --lift-hi */
body.pc .pc-acct-box:hover{border-color:var(--border-strong);box-shadow:var(--lift-hi);transform:translateY(var(--lift-y))}
body.pc .pc-acct-box:hover::before{opacity:1}
body.pc a.pc-acct-box:hover{background:var(--panel-2);color:var(--text)}
body.pc .pc-acct-box .ic{width:40px;height:40px;border-radius:var(--r-tile);flex:none;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);box-shadow:var(--tile-ring)}
body.pc .pc-acct-box .ic svg{width:18px;height:18px;stroke-width:1.7}
body.pc .pc-acct-box .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
body.pc .pc-acct-box .k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-acct-box .v{display:flex;align-items:center;gap:8px;min-width:0;font-size:15px;font-weight:600;line-height:1.25;color:var(--text)}
body.pc .pc-acct-box .v.mono{font-family:var(--mono);font-size:14.5px;letter-spacing:0;font-feature-settings:'tnum'}
body.pc .pc-acct-box .v.wrap{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-acct-box .v.clip{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-acct-box .s{font-family:var(--mono);font-size:12px;line-height:1.35;color:var(--faint)}
body.pc .pc-acct-box .s.sans{font-family:var(--font);font-size:12.5px;color:var(--dim);line-height:1.4}
body.pc .pc-acct-box .tag{margin-left:auto;flex:none}
body.pc .pc-acct-box .pc-copy{width:28px;height:28px;justify-content:center;border-radius:7px;transition:background .15s var(--ease)}
body.pc .pc-acct-box .pc-copy svg{width:14px;height:14px}
body.pc .pc-acct-box .pc-copy:hover{background:var(--accent-soft)}
body.pc .pc-acct-box .dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
body.pc .pc-acct-box .dot.warn{background:var(--amber);box-shadow:0 0 0 3px var(--amber-soft)}
body.pc .pc-acct-box .dot.off{background:var(--faint);box-shadow:0 0 0 3px var(--raise)}
body.pc .pc-acct-box .go{margin-left:auto;flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:var(--faint);transition:color .15s var(--ease),background .15s var(--ease),transform .2s var(--ease)}
body.pc .pc-acct-box .go svg{width:14px;height:14px;stroke-width:2}
body.pc a.pc-acct-box:hover .go{color:var(--accent);background:var(--accent-soft);transform:translateX(2px)}

/* 3-up KPI strip */
body.pc .pc-acct-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:var(--panel);border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden}
body.pc .pc-acct-kpis a{display:block;min-width:0;padding:12px 14px 13px;border-right:1px solid var(--border-soft);color:var(--text);text-decoration:none !important;transition:background .15s var(--ease)}
body.pc .pc-acct-kpis a:last-child{border-right:0}
body.pc .pc-acct-kpis a:hover{background:var(--panel-2);color:var(--text)}
body.pc .pc-acct-kpis .k{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-acct-kpis .k svg{width:13px;height:13px;flex:none;color:var(--accent);stroke-width:1.8}
/* hero number, secondary size — same mono face and same 22px step as .pc-kpi .v on phones */
body.pc .pc-acct-kpis .v{display:block;margin-top:6px;font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1;font-feature-settings:'tnum';transition:color .15s var(--ease)}
body.pc .pc-acct-kpis a:hover .v,body.pc .pc-acct-kpis a.hot .v{color:var(--accent-2)}

/* two small boxes side by side (currency / country) */
body.pc .pc-acct-2up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.pc .pc-acct-2up .pc-acct-box{padding:12px 14px;gap:10px}
body.pc .pc-acct-2up .pc-acct-box .ic{width:36px;height:36px;border-radius:var(--r-lg)}
body.pc .pc-acct-2up .pc-acct-box .ic svg{width:16px;height:16px}
body.pc .pc-acct-2up .pc-acct-box .v{font-size:13.5px}
body.pc .pc-acct-2up .pc-acct-box .v.clip{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25}
body.pc .pc-acct-2up .pc-acct-box .v.mono{font-size:13.5px}

/* rise-in stagger: the console's ONE entrance (@keyframes pcrise, FOUNDATION
   section 0) — 8px / .38s / backwards, so a card's own hover transform still
   works once the entrance is done. The ladder is capped at .2s total; the rail
   used to run out to .41s, which read as a second, slower animation. */
@media(prefers-reduced-motion:no-preference){
  body.pc .pl-acct>.pl-acct-card,body.pc .pc-acct-side>*{animation:pcrise .38s var(--ease) backwards}
  body.pc .pl-acct>.pl-acct-card:nth-child(2),body.pc .pc-acct-side>*:nth-child(2){animation-delay:.05s}
  body.pc .pl-acct>.pl-acct-card:nth-child(3),body.pc .pc-acct-side>*:nth-child(3){animation-delay:.1s}
  body.pc .pl-acct>.pl-acct-card:nth-child(4),body.pc .pc-acct-side>*:nth-child(4){animation-delay:.15s}
  body.pc .pl-acct>.pl-acct-card:nth-child(n+5),body.pc .pc-acct-side>*:nth-child(n+5){animation-delay:.2s}
}

/* ---- light mode ---- */
html.pl-light body.pc .pl-acct-card{box-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 0 rgba(16,24,40,.02)}
html.pl-light body.pc .pl-acct-card::before{background:linear-gradient(90deg,transparent,rgba(2,132,199,.55),transparent);box-shadow:0 0 14px rgba(2,132,199,.25)}
html.pl-light body.pc .pl-acct-ic{box-shadow:var(--tile-ring),0 0 0 4px rgba(2,132,199,.05),0 10px 20px -12px rgba(2,132,199,.45)}
html.pl-light body.pc .pl-acct select,html.pl-light body.pc .pl-acct .custom-select,html.pl-light body.pc .pl-acct .control>select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5d73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important}
html.pl-light body.pc .pl-acct select:focus,html.pl-light body.pc .pl-acct .custom-select:focus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230284c7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important}
html.pl-light body.pc .pl-acct .pl-check input[type=checkbox]:checked{box-shadow:0 6px 14px -8px rgba(2,132,199,.55)}
html.pl-light body.pc .pl-acct .pl-switch-thumb{background:var(--faint);box-shadow:0 1px 3px rgba(16,24,40,.28)}
html.pl-light body.pc .pl-acct .pl-switch input:checked+.pl-switch-track .pl-switch-thumb{background:#fff}
html.pl-light body.pc .pl-acct .pl-switch input:checked+.pl-switch-track{box-shadow:0 8px 18px -10px rgba(2,132,199,.6)}
html.pl-light body.pc .pc-acct-box{box-shadow:0 1px 2px rgba(16,24,40,.04)}
html.pl-light body.pc .pc-acct-box::before{box-shadow:0 0 10px rgba(2,132,199,.4)}
html.pl-light body.pc .pc-acct-box:hover{box-shadow:var(--lift-hi)}
/* (the .ic ring rides on --tile-ring, which already swaps in light mode) */
html.pl-light body.pc .pc-acct-kpis{box-shadow:0 1px 2px rgba(16,24,40,.04)}

/* ---- responsive ---- */
@media(max-width:1100px){
  body.pc .pc-acct-layout{grid-template-columns:1fr}
  body.pc .pc-acct-side{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.pc .pc-acct-side>.pc-acct-kpis,body.pc .pc-acct-side>.pc-acct-2up{grid-column:1/-1}
}
@media(max-width:760px){
  /* the card keeps var(--r-card): one radius at every width */
  body.pc .pl-acct-card{padding:16px;margin-bottom:12px}
  body.pc .pl-acct-card::before{left:16px;right:16px}
  body.pc .pl-acct-head{gap:12px;margin-bottom:16px;padding-bottom:14px}
  body.pc .pl-acct-ic{width:40px;height:40px;border-radius:var(--r-tile)}
  body.pc .pl-acct-head h3{font-size:17px}
  body.pc .pl-acct-grid{grid-template-columns:1fr;gap:0}
  body.pc .pl-acct-checks{grid-template-columns:1fr}
  body.pc .pl-acct-actions{justify-content:stretch;gap:8px}
  body.pc .pl-acct-actions .note{width:100%;margin:0 0 2px}
  body.pc .pl-acct-save,body.pc .pl-acct-cancel{flex:1;justify-content:center;text-align:center}
  body.pc .pc-acct-side{grid-template-columns:1fr}
  body.pc .pc-acct-2up{gap:8px}
}

/* ======================= COPY BUTTON FEEDBACK (v330) ======================= */
body.pc .pc-copy{transition:color .18s var(--ease),background .18s var(--ease),border-color .18s var(--ease)}
body.pc .pc-copy.is-copied{color:var(--green);border:1px solid color-mix(in srgb,var(--green) 45%,transparent);background:var(--green-soft);border-radius:var(--r-sm);padding:2px 5px}
body.pc .pc-copy.is-failed{color:var(--red);border:1px solid color-mix(in srgb,var(--red) 45%,transparent);background:var(--red-soft);border-radius:var(--r-sm);padding:2px 5px}
body.pc .pc-copy.is-copied svg{color:var(--green)}
body.pc .pc-copy.is-failed svg{color:var(--red)}
body.pc .pc-copy.is-copied svg,body.pc .pc-copy.is-failed svg{width:13px;height:13px}

/* ==========================================================================
   v331 (2026-09-14) - corrections after the v330 review
   print / forced colours / stacked tables on phones / captcha row /
   dashboard rail density / no double glow on the two guest heroes
   ========================================================================== */

/* print: the fixed orbs and the notice gutter must not reach paper */
@media print{
  body.pc .pl-main::before,body.pc .pl-main::after{display:none !important}
  body.pc .pl-content{max-width:none;padding:0}
  body.pc .pl-content .pc-notices>*,body.pc .pl-content>.alert:not(.wpp-banner){padding-left:12px !important;box-shadow:none !important}
  body.pc .pl-content .pc-notices>*::before,body.pc .pl-content .pc-notices>*::after,
  body.pc .pl-content>.alert:not(.wpp-banner)::before,body.pc .pl-content>.alert:not(.wpp-banner)::after{display:none !important}
}

/* forced colours: gradient text is transparent text, which disappears there */
@media (forced-colors: active){
  body.pc .pc-pagehead h1,
  body.pc[data-tpl^="knowledgebase"] .pc-pagehead h1,
  body.pc #order-standard_cart .pl-plan-name{background:none !important;color:CanvasText !important;-webkit-text-fill-color:CanvasText !important}
  body.pc .pl-main::before,body.pc .pl-main::after{display:none !important}
}

/* phones: stacked table rows are label+value pairs, they cannot live in a 50px box */
@media(max-width:760px){
  body.pc .pc-card:has(> .pc-tablewrap) .pc-table.stack tbody td,
  body.pc .pc-table.stack tbody td{height:auto !important;min-height:0}
}

/* the captcha row kept 34px controls while every neighbouring field grew to 38px */
body.pc #inputCaptcha,body.pc .pl-domreg #inputCaptcha.form-control{height:38px !important}
body.pc #inputCaptchaImage,body.pc .pl-domreg #inputCaptchaImage{height:38px !important}
body.pc .pl-captcha-refresh,body.pc .pl-domreg .pl-captcha-refresh{width:38px !important;height:38px !important}

/* the dashboard's right rail is reached through a compound selector, so the new
   density stopped at its door: bring its rows and section heads in line */
body.pc .pc-dash aside .pc-act{padding:11px 18px;font-size:13.5px;gap:12px}
body.pc .pc-dash aside .pc-act .ic{width:32px;height:32px;border-radius:9px}
body.pc .pc-dash aside .pc-act .ic svg{width:16px;height:16px}
body.pc .pc-dash aside .pc-card .pc-subhead{padding:12px 18px;min-height:46px}
body.pc .pc-dash aside .pc-card .pc-subhead h2{font-size:13.5px}

/* the guest landing and contact heroes already carry their own two glows */
body.pc[data-tpl="homepage"] .pl-main::before,body.pc[data-tpl="homepage"] .pl-main::after,
body.pc[data-tpl="contact"] .pl-main::before,body.pc[data-tpl="contact"] .pl-main::after{opacity:.16}

/* v331b: the invoice notice ships its CTA as .pc-btn.primary.sm, not .btn - it must keep
   its dark ink on the gradient (the generic link colour made it pale blue on pale blue) */
body.pc .pl-content .pc-notices>.alert .pc-btn,
body.pc .pl-content>.alert:not(.wpp-banner) .pc-btn{margin:0 0 0 auto !important;order:2;flex:none;height:32px !important;padding:0 16px !important;border-radius:var(--r-pill) !important;font-size:12.5px !important}
body.pc .pl-content .pc-notices>.alert .pc-btn.primary,
body.pc .pl-content>.alert:not(.wpp-banner) .pc-btn.primary{color:var(--accent-ink) !important;font-weight:600 !important}


/* ==========================================================================
   v331c - the Telegram bar is injected as a DIRECT child of .pl-content by the
   pnotify hook, not into .pc-notices, so the v330 notice-card rules never
   reached it and it kept the old v300 pill look next to the new cards.
   Same card, same disc, same ghost CTA - wherever it is mounted.
   ========================================================================== */
body.pc .pl-content>#nmTgBar{
  position:relative;display:flex !important;align-items:center;flex-wrap:wrap;gap:8px 12px;
  min-height:48px !important;margin:0 0 10px !important;padding:12px 16px 12px 62px !important;
  background:var(--panel) !important;border:1px solid var(--border) !important;border-radius:var(--r-card) !important;
  box-shadow:inset 3px 0 0 var(--accent) !important;
  color:var(--text) !important;font-family:var(--font);font-size:13.5px !important;line-height:1.45 !important}
body.pc .pl-content>#nmTgBar .i{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:34px !important;height:34px !important;border-radius:50% !important;
  background:var(--accent-soft) !important;box-shadow:var(--tile-ring);
  display:grid;place-items:center;flex:none}
body.pc .pl-content>#nmTgBar .i svg,body.pc .pl-content>#nmTgBar .i img{width:17px !important;height:17px !important}
body.pc .pl-content>#nmTgBar .t{flex:1 1 240px;min-width:0;font-weight:500 !important}
body.pc .pl-content>#nmTgBar .t small{display:block;font-size:12.5px !important;font-weight:400;color:var(--dim) !important;margin-top:2px}
body.pc .pl-content>#nmTgBar .b{
  height:32px !important;line-height:30px !important;padding:0 14px !important;margin:0 0 0 auto !important;
  display:inline-flex !important;align-items:center;gap:7px;flex:none;
  border-radius:var(--r-pill) !important;background:transparent !important;border:1px solid var(--border-strong) !important;
  color:var(--accent-2) !important;font-size:12.5px !important;font-weight:600 !important;
  box-shadow:none !important;text-decoration:none !important;
  transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease)}
body.pc .pl-content>#nmTgBar .b:hover{background:var(--accent-soft) !important;border-color:rgba(125,211,252,.48) !important;color:var(--ice-1) !important}
body.pc .pl-content>#nmTgBar .x{
  position:absolute !important;right:10px;top:50%;transform:translateY(-50%);
  width:28px !important;height:28px !important;border-radius:50% !important;
  display:grid;place-items:center;color:var(--faint) !important;opacity:.6;font-size:16px !important;
  background:transparent !important;border:0 !important;transition:background .15s var(--ease),opacity .15s var(--ease)}
body.pc .pl-content>#nmTgBar .x:hover{background:var(--raise) !important;color:var(--text) !important;opacity:1}
body.pc .pl-content>#nmTgBar:has(>.x){padding-right:48px !important}
/* it sits directly above the .pc-notices rail - keep one rhythm */
html.pl-light body.pc .pl-content>#nmTgBar{background:var(--panel) !important;border-color:var(--border) !important;box-shadow:inset 3px 0 0 var(--accent),0 1px 2px rgba(16,24,40,.04) !important}
html.pl-light body.pc .pl-content>#nmTgBar .i{box-shadow:var(--tile-ring)}
html.pl-light body.pc .pl-content>#nmTgBar .b{color:var(--accent) !important;border-color:rgba(2,132,199,.28) !important}
html.pl-light body.pc .pl-content>#nmTgBar .b:hover{background:var(--accent-soft) !important;border-color:rgba(2,132,199,.45) !important;color:#0369a1 !important}
@media(max-width:760px){
  body.pc .pl-content>#nmTgBar{padding:11px 14px 11px 58px !important}
  body.pc .pl-content>#nmTgBar .i{left:12px}
  body.pc .pl-content>#nmTgBar .b{margin-left:0 !important}
}
@media print{body.pc .pl-content>#nmTgBar{display:none !important}}


/* ==========================================================================
   v331d (2026-09-14) - the last verification pass
   light-mode contrast, the unsaved-changes note, three cascade losses,
   a tone wash back on the notice cards, icon-box radius, KPI strip radius
   ========================================================================== */

/* --- light mode: --faint #8296ad measures 3.04:1 on white; every eyebrow and
       meta line in the console is painted with it. Metal's own light value is
       #66798f (4.6:1) - adopt it, plus the two other light-only failures. --- */
html.pl-light body.pc{--faint:#66798f;--r-ic:9px}
body.pc{--r-ic:9px}
html.pl-light body.pc[data-tpl^="knowledgebase"]{--kb-title:linear-gradient(100deg,#0b1a2b 0%,#0369a1 45%,#0284c7 100%)}
html.pl-light body.pc .pc-crumbs span,html.pl-light body.pc .pc-acct-box .go,html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-act .t{color:var(--faint)}

/* --- the "You have unsaved changes" note ships hidden; an author rule with
       display:inline-flex beats the UA [hidden] rule, so it showed on load --- */
body.pc .pl-acct-actions .note[hidden]{display:none !important}

/* --- three rules the new ladder loses to, restated at their own weight --- */
body.pc .pc-kblist .pc-act .m span{font-size:11.5px}
body.pc #order-standard_cart #frmConfigureDomains .form-control{height:38px}
body.pc .pl-content .pc-notices>.verification-banner .text i,
body.pc .pl-content .pc-notices>.verification-banner .fas,
body.pc .pl-content .pc-notices>.verification-banner .fa-exclamation-triangle{display:none !important}

/* --- one radius for the small icon discs (26-34px), one for the KPI strips --- */
body.pc .pl-side-user .av,body.pc .pc-act .ic,body.pc .pc-msg .av,body.pc .pc-acct-kpis a .k svg{border-radius:var(--r-ic)}
body.pc .pc-kpis,body.pc .pc-acct-kpis{border-radius:var(--r-card)}

/* --- the four notice tones all rendered as the same panel card; give each one
       a wash and a matching edge so severity is readable at a glance again --- */
body.pc .pl-content .pc-notices>.alert-warning,
body.pc .pl-content .pc-notices>.verification-banner,
body.pc .pl-content>.alert-warning:not(.wpp-banner){background:color-mix(in srgb,var(--amber) 7%,var(--panel)) !important;border-color:color-mix(in srgb,var(--amber) 24%,var(--border)) !important}
body.pc .pl-content .pc-notices>.alert-danger,
body.pc .pl-content>.alert-danger:not(.wpp-banner){background:color-mix(in srgb,var(--red) 7%,var(--panel)) !important;border-color:color-mix(in srgb,var(--red) 24%,var(--border)) !important}
body.pc .pl-content .pc-notices>.alert-success,
body.pc .pl-content>.alert-success:not(.wpp-banner){background:color-mix(in srgb,var(--green) 7%,var(--panel)) !important;border-color:color-mix(in srgb,var(--green) 24%,var(--border)) !important}
body.pc .pl-content .pc-notices>.alert-info,
body.pc .pl-content>.alert-info:not(.wpp-banner),
body.pc .pl-content>#nmTgBar{background:color-mix(in srgb,var(--accent) 6%,var(--panel)) !important;border-color:color-mix(in srgb,var(--accent) 22%,var(--border)) !important}

/* --- account rail: the KPI numbers need the same overflow guard the dashboard
       KPIs have, or a long count pushes the strip --- */
body.pc .pc-acct-kpis .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* --- featured store card: 104px reserved for the badge leaves ~120px of title
       at the grid's 300px minimum --- */
body.pc #order-standard_cart .pl-plan-feat .pl-plan-head .t{padding-right:76px}

/* --- knowledgebase title keeps the console's 900px step --- */
@media(max-width:900px){
  body.pc[data-tpl^="knowledgebase"] .pc-pagehead h1{font-size:29px}
  body.pc[data-tpl="knowledgebasearticle"] .pc-pagehead h1{font-size:26px}
}


/* v331e: the account rail narrowed to 300px to match the dashboard, and the
   three-up KPI labels no longer fit with their glyph - drop the glyph there
   and step the label down; the value keeps its own ellipsis guard. */
body.pc .pc-acct-kpis a .k{font-size:10px;letter-spacing:.05em;gap:0}
body.pc .pc-acct-kpis a .k svg{display:none}
body.pc .pc-acct-kpis a{padding-left:12px;padding-right:12px}


/* ==========================================================================
   v332 (2026-09-15) - Ali round 4: client area
   desktop: quick actions under the servers, activity list scrolls (3 rows),
            wandering background glows, add-funds page, full-ring KB search stroke
   phone:   compact notices, 2x2 KPIs, one/two-line table rows, 2-column
            knowledgebase tiles, account rail + form in two columns
   ========================================================================== */

/* ---------- dashboard: main column = servers + quick bar ---------- */
body.pc .pc-dash-main{display:flex;flex-direction:column;gap:14px;min-width:0}
body.pc .pc-dash-main>.pc-card{margin:0}
body.pc .pc-quickbar{
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px;border-radius:var(--r-card);
  border:1px solid transparent;
  background:
    linear-gradient(180deg,rgba(18,31,52,.92),rgba(11,19,33,.94)) padding-box,
    linear-gradient(135deg,rgba(125,211,252,.42),rgba(56,189,248,.07) 38%,rgba(56,189,248,.07) 62%,rgba(125,211,252,.32)) border-box;
  box-shadow:var(--lift),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden}
body.pc .pc-quickbar::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(191,238,255,.7),transparent);box-shadow:0 0 16px 1px rgba(56,189,248,.35)}
body.pc .pc-quickbar a{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 12px 16px;
  text-align:center;border-radius:12px;color:var(--text);text-decoration:none !important;
  transition:background var(--t-hover),color var(--t-hover)}
body.pc .pc-quickbar a+a::before{content:"";position:absolute;left:0;top:16%;bottom:16%;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(125,211,252,.30) 50%,transparent)}
body.pc .pc-quickbar .ic{width:42px;height:42px;border-radius:var(--r-tile);display:grid;place-items:center;background:var(--tile);box-shadow:var(--tile-ring);color:var(--accent);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
body.pc .pc-quickbar .ic svg{width:20px;height:20px;stroke-width:1.7}
body.pc .pc-quickbar .tx{display:flex;flex-direction:column;gap:3px;min-width:0}
body.pc .pc-quickbar b{font-size:13.5px;font-weight:600;letter-spacing:-.005em;transition:color var(--t-hover)}
body.pc .pc-quickbar small{font-size:12px;color:var(--faint)}
body.pc .pc-quickbar a:hover{background:radial-gradient(90% 100% at 50% 0%,rgba(56,189,248,.13),transparent 72%)}
body.pc .pc-quickbar a:hover .ic{transform:translateY(-2px);box-shadow:var(--tile-ring),0 12px 26px -12px rgba(56,189,248,.95)}
body.pc .pc-quickbar a:hover b{color:var(--accent-2)}
body.pc .pc-quickbar a:focus-visible{outline:2px solid var(--accent-line);outline-offset:-2px}
html.pl-light body.pc .pc-quickbar{background:linear-gradient(180deg,#fff,#f6fafd) padding-box,linear-gradient(135deg,rgba(2,132,199,.35),rgba(2,132,199,.06) 40%,rgba(2,132,199,.06) 60%,rgba(2,132,199,.28)) border-box}
html.pl-light body.pc .pc-quickbar a+a::before{background:linear-gradient(180deg,transparent,rgba(2,132,199,.22) 50%,transparent)}

/* ---------- recent activity: the last three, the rest scrolls ---------- */
body.pc .pc-actlist{max-height:calc(3 * 61px);overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;
  scrollbar-width:thin;scrollbar-color:var(--raise-2) transparent;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 22px),transparent)}
body.pc .pc-actlist.at-end{-webkit-mask-image:none;mask-image:none}
body.pc .pc-actlist .pc-act{scroll-snap-align:start;min-height:61px}
body.pc .pc-actlist .pc-act:last-child{border-bottom:0}
body.pc .pc-actlist::-webkit-scrollbar{width:6px}
body.pc .pc-actlist::-webkit-scrollbar-thumb{background:var(--raise-2);border-radius:6px}
body.pc .pc-actlist:focus-visible{outline:2px solid var(--accent-line);outline-offset:-2px}

/* ---------- background glows: the JS layer replaces the two drifting pseudo orbs ---------- */
body.pc .pc-orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body.pc .pc-orbs i{position:absolute;left:0;top:0;border-radius:50%;opacity:0;filter:blur(64px);will-change:opacity;
  transition:opacity 2.6s cubic-bezier(.4,0,.2,1);
  background:radial-gradient(circle at 50% 50%,rgba(56,189,248,.85) 0%,rgba(14,165,233,.30) 42%,rgba(14,165,233,0) 68%)}
body.pc .pc-orbs i:nth-child(2){background:radial-gradient(circle at 50% 50%,rgba(125,211,252,.75) 0%,rgba(56,189,248,.26) 44%,rgba(56,189,248,0) 70%)}
body.pc .pc-orbs i:nth-child(3){background:radial-gradient(circle at 50% 50%,rgba(14,165,233,.8) 0%,rgba(2,132,199,.30) 42%,rgba(2,132,199,0) 68%)}
body.pc .pc-orbs i.on{opacity:.32}
@media(prefers-reduced-motion:no-preference){
  body.pc .pc-orbs i{animation:pcOrbWander 17s ease-in-out infinite alternate}
  body.pc .pc-orbs i:nth-child(2){animation-duration:23s;animation-delay:-6s}
  body.pc .pc-orbs i:nth-child(3){animation-duration:29s;animation-delay:-11s}
}
@keyframes pcOrbWander{0%{translate:0 0}50%{translate:46px -34px}100%{translate:-30px 26px}}
body.pc.pc-orbs-on .pl-main::before,body.pc.pc-orbs-on .pl-main::after{display:none !important}
html.pl-light body.pc .pc-orbs i.on{opacity:.17}
body.pc[data-tpl="homepage"] .pc-orbs i.on,body.pc[data-tpl="contact"] .pc-orbs i.on{opacity:.16}
@media print{body.pc .pc-orbs{display:none !important}}
@media(forced-colors:active){body.pc .pc-orbs{display:none !important}}

/* ---------- knowledgebase search: the stroke runs the whole way round, fading ---------- */
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch{
  border:1.5px solid transparent;
  background:
    linear-gradient(var(--panel),var(--panel)) padding-box,
    conic-gradient(from var(--kba),
      rgba(56,189,248,.14) 0deg, rgba(125,211,252,.95) 34deg, #e9f8ff 52deg, rgba(56,189,248,.55) 86deg, rgba(56,189,248,.14) 130deg,
      rgba(56,189,248,.20) 180deg, rgba(125,211,252,.85) 214deg, #d8f3ff 232deg, rgba(56,189,248,.5) 266deg, rgba(56,189,248,.14) 310deg, rgba(56,189,248,.14) 360deg) border-box}
body.pc[data-tpl^="knowledgebase"] .pc-kbsearch:focus-within{
  background:
    linear-gradient(var(--panel),var(--panel)) padding-box,
    conic-gradient(from var(--kba),
      rgba(56,189,248,.34) 0deg, #bfeeff 34deg, #ffffff 52deg, rgba(56,189,248,.8) 86deg, rgba(56,189,248,.34) 130deg,
      rgba(56,189,248,.40) 180deg, #bfeeff 214deg, #ffffff 232deg, rgba(56,189,248,.8) 266deg, rgba(56,189,248,.34) 310deg, rgba(56,189,248,.34) 360deg) border-box}
html.pl-light body.pc[data-tpl^="knowledgebase"] .pc-kbsearch{
  background:
    linear-gradient(var(--panel),var(--panel)) padding-box,
    conic-gradient(from var(--kba),
      rgba(2,132,199,.14) 0deg, rgba(14,165,233,.9) 34deg, #7dd3fc 52deg, rgba(2,132,199,.5) 86deg, rgba(2,132,199,.14) 130deg,
      rgba(2,132,199,.18) 180deg, rgba(14,165,233,.8) 214deg, #7dd3fc 232deg, rgba(2,132,199,.45) 266deg, rgba(2,132,199,.14) 310deg, rgba(2,132,199,.14) 360deg) border-box}

/* ---------- add funds ---------- */
body.pc .pc-af{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
body.pc .pc-af-form{padding:22px 24px 22px !important;margin:0 !important}
body.pc .pc-af-head{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:0 0 16px;border-bottom:1px solid var(--border-soft)}
body.pc .pc-af-ic{flex:none;width:48px;height:48px;border-radius:var(--r-tile);display:grid;place-items:center;background:var(--tile);box-shadow:var(--tile-ring),0 12px 28px -16px rgba(56,189,248,.8);color:var(--accent)}
body.pc .pc-af-ic svg{width:23px;height:23px;stroke-width:1.6}
body.pc .pc-af-head h2{margin:0 0 3px;font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.015em}
body.pc .pc-af-head p{margin:0;font-size:13.5px;color:var(--dim)}
body.pc .pc-af .pc-af-amount{margin:0 !important}
body.pc .pc-af .pc-af-amount>label{display:block;margin:0 0 8px;font-size:12.5px;color:var(--dim);font-weight:500}
body.pc .pc-af .pc-amount{position:relative}
body.pc .pc-af .pc-amount input{height:62px !important;padding:0 70px 0 46px !important;font-family:var(--mono) !important;font-size:26px !important;letter-spacing:-.01em;border-radius:14px !important}
body.pc .pc-af .pc-amount .cur{position:absolute;left:16px;top:0;height:62px !important;display:flex;align-items:center;font-size:20px;color:var(--dim);font-family:var(--mono)}
body.pc .pc-af .pc-amount .code{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--faint);pointer-events:none}
body.pc .pc-af-presets{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
body.pc .pc-af-presets button{height:34px;padding:0 15px;border-radius:999px;cursor:pointer;border:1px solid var(--border-strong);background:rgba(56,189,248,.05);
  color:var(--text);font-family:var(--mono);font-size:13px;transition:background .18s var(--ease),border-color .18s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
body.pc .pc-af-presets button:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-1px)}
body.pc .pc-af-presets button.on{background:linear-gradient(118deg,#7dd3fc,#38bdf8);color:#03121d;border-color:transparent;box-shadow:var(--glow)}
body.pc .pc-af-range{display:block;margin:10px 0 0;font-size:12px;color:var(--faint)}
body.pc .pc-af-range b{font-weight:500;color:var(--dim)}
body.pc .pc-af-methods{border:0;margin:22px 0 0;padding:0;min-width:0}
body.pc .pc-af-methods legend{float:none;width:auto;margin:0 0 8px;padding:0;font-size:12.5px;font-weight:500;color:var(--dim)}
body.pc .pc-af-mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
body.pc .pc-af-method{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px;border-radius:14px;cursor:pointer;
  border:1px solid var(--border);background:var(--panel-2);transition:border-color .2s var(--ease),background .25s var(--ease),box-shadow .3s var(--ease)}
body.pc .pc-af-method input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
body.pc .pc-af-method .ic{flex:none;width:40px;height:40px;border-radius:var(--r-tile);display:grid;place-items:center;background:var(--tile);box-shadow:var(--tile-ring);color:var(--accent)}
body.pc .pc-af-method .ic svg{width:20px;height:20px;stroke-width:1.6}
body.pc .pc-af-method .tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
body.pc .pc-af-method b{font-size:14px;font-weight:600;color:var(--text)}
body.pc .pc-af-method small{font-size:12px;color:var(--faint);line-height:1.35}
body.pc .pc-af-method .tick{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--border-strong);transition:background .2s,border-color .2s}
body.pc .pc-af-method .tick svg{width:12px;height:12px;color:#03121d;opacity:0;transform:scale(.5);transition:opacity .2s,transform .3s var(--ease)}
body.pc .pc-af-method:hover{border-color:var(--border-strong)}
body.pc .pc-af-method:has(input:checked){border-color:var(--accent-line);background:linear-gradient(160deg,rgba(56,189,248,.13),rgba(56,189,248,.03));box-shadow:0 16px 36px -24px rgba(56,189,248,.9)}
body.pc .pc-af-method:has(input:checked) .tick{background:var(--accent);border-color:var(--accent)}
body.pc .pc-af-method:has(input:checked) .tick svg{opacity:1;transform:none}
body.pc .pc-af-method:has(input:focus-visible){outline:2px solid var(--accent-line);outline-offset:2px}
body.pc .pc-af-go{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;margin:22px 0 0}
body.pc .pc-af .pc-addfunds-go{width:auto !important;height:48px !important;padding:0 26px !important;font-size:15px !important;border-radius:12px !important}
body.pc .pc-af .pc-addfunds-note{margin:0 !important;font-size:12px;color:var(--faint)}
body.pc .pc-af-side{display:flex;flex-direction:column;gap:12px;min-width:0}
body.pc .pc-af-side>.pc-card{margin:0 !important}
body.pc .pc-af-wallet{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:4px;padding:18px 20px !important;
  background:radial-gradient(90% 120% at 100% 0%,rgba(56,189,248,.16),transparent 60%),var(--panel) !important}
body.pc .pc-af-wallet .k{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
body.pc .pc-af-wallet .bal{font-size:28px;font-weight:600;color:var(--text);letter-spacing:-.01em;margin:2px 0}
body.pc .pc-af-wallet .s{font-size:12px;color:var(--faint)}
body.pc .pc-af-limits{padding:4px 0 !important}
body.pc .pc-af-limits .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:11px 18px;border-bottom:1px solid var(--border-soft)}
body.pc .pc-af-limits .row:last-child{border-bottom:0}
body.pc .pc-af-limits .k{font-size:12.5px;color:var(--dim)}
body.pc .pc-af-limits .v{font-size:13px;color:var(--text)}
body.pc .pc-af-how{padding:16px 18px !important}
body.pc .pc-af-how h3{margin:0 0 12px;font-size:13.5px;font-weight:600;color:var(--text)}
body.pc .pc-af-how ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;position:relative}
body.pc .pc-af-how li{display:flex;gap:12px;position:relative}
body.pc .pc-af-how li:not(:last-child)::after{content:"";position:absolute;left:11.5px;top:26px;bottom:-12px;width:1px;background:linear-gradient(180deg,var(--accent-line),transparent)}
body.pc .pc-af-how li i{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:var(--mono);font-size:12px;color:var(--accent-2);background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line)}
body.pc .pc-af-how li span{display:flex;flex-direction:column;gap:1px;font-size:12.5px;color:var(--faint);line-height:1.4}
body.pc .pc-af-how li b{font-size:13.5px;font-weight:600;color:var(--text)}
body.pc .pc-af-help{display:flex !important;align-items:center;gap:12px;padding:14px 16px !important;color:var(--text) !important;text-decoration:none !important;
  transition:border-color var(--t-hover),box-shadow var(--t-hover),transform var(--t-hover)}
body.pc .pc-af-help .ic{flex:none;width:36px;height:36px;border-radius:var(--r-tile);display:grid;place-items:center;background:var(--tile);box-shadow:var(--tile-ring);color:var(--accent)}
body.pc .pc-af-help .ic svg{width:18px;height:18px}
body.pc .pc-af-help .tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
body.pc .pc-af-help b{font-size:13.5px;font-weight:600}
body.pc .pc-af-help small{font-size:12px;color:var(--faint)}
body.pc .pc-af-help .go{color:var(--faint);transition:transform .25s var(--ease),color .2s}
body.pc .pc-af-help .go svg{width:16px;height:16px}
body.pc .pc-af-help:hover{border-color:var(--accent-line) !important;box-shadow:var(--lift);transform:translateY(var(--lift-y))}
body.pc .pc-af-help:hover .go{transform:translateX(3px);color:var(--accent)}
@media(max-width:1100px){
  body.pc .pc-af{grid-template-columns:1fr}
  body.pc .pc-af-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}

/* ==========================================================================
   phones
   ========================================================================== */
@media(max-width:760px){
  body.pc .pl-content{padding:14px 12px 44px}

  /* ---- notices: one compact row each, text first, a short CTA on the right ---- */
  body.pc .pl-content .pc-notices,body.pc .pl-content .pc-dashnotices{gap:8px}
  body.pc .pl-content .pc-notices>#nmTgBar,
  body.pc .pl-content .pc-notices>.verification-banner,
  body.pc .pl-content .pc-notices>.verification-banner.email-verification,
  body.pc .pl-content .pc-notices>.alert,
  body.pc .pl-content .pc-notices>div,
  body.pc .pl-content>.alert:not(.wpp-banner),
  body.pc .pl-content>.alert.alert-warning:has(.btn),
  body.pc .pl-content>.alert:has(> a.btn:first-child),
  body.pc .pl-content>#nmTgBar{
    min-height:0 !important;flex-wrap:nowrap !important;align-items:center !important;gap:8px !important;
    padding:9px 34px 9px 44px !important;margin-bottom:0 !important;border-radius:12px !important;
    font-size:12.5px !important;line-height:1.35 !important}
  body.pc .pl-content>.alert:not(.wpp-banner),body.pc .pl-content>#nmTgBar{margin-bottom:8px !important}
  body.pc .pl-content .pc-notices>.alert:not(:has(.close)),body.pc .pl-content>.alert:not(.wpp-banner):not(:has(.close)){padding-right:10px !important}
  body.pc .pl-content .pc-notices>#nmTgBar .i,body.pc .pl-content>#nmTgBar .i{left:10px !important;width:26px !important;height:26px !important}
  body.pc .pl-content .pc-notices>#nmTgBar .i img,body.pc .pl-content .pc-notices>#nmTgBar .i svg,
  body.pc .pl-content>#nmTgBar .i img,body.pc .pl-content>#nmTgBar .i svg{width:16px !important;height:16px !important}
  body.pc .pl-content .pc-notices>.verification-banner::before,body.pc .pl-content .pc-notices>.alert::before,body.pc .pl-content>.alert:not(.wpp-banner)::before{left:10px !important;width:26px !important;height:26px !important}
  body.pc .pl-content .pc-notices>.verification-banner::after,body.pc .pl-content .pc-notices>.alert::after,body.pc .pl-content>.alert:not(.wpp-banner)::after{left:10px !important;width:26px !important;height:26px !important;-webkit-mask-size:14px 14px !important;mask-size:14px 14px !important}
  /* text: up to three lines, never pushed out by the button */
  body.pc .pl-content .pc-notices>#nmTgBar .t,body.pc .pl-content>#nmTgBar .t,
  body.pc .pl-content .pc-notices>.verification-banner .text,
  body.pc .pl-content .pc-notices>.alert>span,body.pc .pl-content .pc-notices>.alert>p,
  body.pc .pl-content>.alert:not(.wpp-banner)>span,body.pc .pl-content>.alert:not(.wpp-banner)>p{
    flex:1 1 0 !important;min-width:0 !important;font-size:12.5px !important;line-height:1.35 !important;
    display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
  body.pc .pl-content .pc-notices>#nmTgBar .t small,body.pc .pl-content>#nmTgBar .t small{display:none !important}
  body.pc .pl-content .pc-notices>.verification-banner>.container{flex:1 1 0 !important}
  body.pc .pl-content .pc-notices>.verification-banner .row{flex-wrap:nowrap !important;gap:8px !important}
  body.pc .pl-content .pc-notices>.verification-banner .row>[class*="col-"]{flex:0 0 auto !important;width:auto !important;max-width:none !important;padding:0 !important}
  body.pc .pl-content .pc-notices>.verification-banner .row>[class*="col-"]:has(.text){flex:1 1 0 !important;min-width:0 !important}
  /* short CTAs */
  body.pc .pl-content .pc-notices>#nmTgBar .b,body.pc .pl-content>#nmTgBar .b,
  body.pc .pl-content .pc-notices>.verification-banner .btn-resend-verify-email,
  body.pc .pl-content .pc-notices>.alert .pc-btn,body.pc .pl-content .pc-notices>.alert .btn,
  body.pc .pl-content>.alert:not(.wpp-banner) .pc-btn,body.pc .pl-content>.alert:not(.wpp-banner) .btn{
    flex:none !important;order:2;height:28px !important;line-height:26px !important;padding:0 11px !important;margin:0 !important;
    font-size:12px !important;width:auto !important;white-space:nowrap}
  body.pc .pl-content .pc-notices>#nmTgBar .b,body.pc .pl-content>#nmTgBar .b{font-size:0 !important;gap:0 !important}
  body.pc .pl-content .pc-notices>#nmTgBar .b::after,body.pc .pl-content>#nmTgBar .b::after{content:"Connect";font-size:12px}
  body.pc .pl-content .pc-notices>#nmTgBar .b svg,body.pc .pl-content .pc-notices>#nmTgBar .b img,body.pc .pl-content>#nmTgBar .b svg,body.pc .pl-content>#nmTgBar .b img{display:none !important}
  body.pc .pl-content .pc-notices>.verification-banner .btn-resend-verify-email{font-size:0 !important}
  body.pc .pl-content .pc-notices>.verification-banner .btn-resend-verify-email::after{content:"Resend";font-size:12px}
  /* dismiss: a small disc at the right edge, vertically centred */
  body.pc .pl-content .pc-notices>#nmTgBar .x,body.pc .pl-content>#nmTgBar .x,
  body.pc .pl-content .pc-notices>.verification-banner .close,body.pc .pl-content .pc-notices>.alert .close,body.pc .pl-content>.alert:not(.wpp-banner) .close{
    position:absolute !important;right:5px !important;top:50% !important;transform:translateY(-50%) !important;
    width:24px !important;height:24px !important;margin:0 !important;font-size:15px !important}

  /* ---- page head on a phone ---- */
  body.pc .pc-pagehead{margin-bottom:14px;gap:10px}
  body.pc .pc-pagehead h1{font-size:22px}
  body.pc .pc-pagehead .actions{width:100%}
  body.pc .pc-pagehead .actions .pc-btn{flex:1;justify-content:center;height:38px}

  /* ---- KPIs: 2 x 2 ---- */
  body.pc .pc-kpis{grid-template-columns:repeat(2,minmax(0,1fr)) !important;margin-bottom:12px}
  body.pc .pc-kpi{padding:10px 12px 11px !important;border-right:1px solid var(--border-soft) !important;border-bottom:1px solid var(--border-soft) !important}
  body.pc .pc-kpi:nth-child(2n){border-right:0 !important}
  body.pc .pc-kpi:nth-last-child(-n+2){border-bottom:0 !important}
  body.pc .pc-kpi .k{font-size:10px;gap:5px}
  body.pc .pc-kpi .k svg{width:13px;height:13px}
  body.pc .pc-kpi .v{font-size:19px !important;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.pc .pc-kpi .s{font-size:11px;margin-top:2px}

  /* ---- tables in stack mode: two short lines per row ---- */
  body.pc .pc-table.stack tr{display:flex !important;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:11px 12px !important}
  body.pc .pc-table.stack tr::after{content:"";order:1;flex:0 0 100%;height:0}
  body.pc .pc-table.stack td{display:inline-flex !important;align-items:center;width:auto !important;height:auto !important;min-height:0 !important;padding:0 !important;
    order:2;flex:0 1 auto;gap:5px;justify-content:flex-start !important;font-size:12px;white-space:nowrap;border:0 !important}
  body.pc .pc-table.stack td.namecell-td{order:0;flex:1 1 0 !important;min-width:0;padding:0 !important}
  body.pc .pc-table.stack td:has(>.pc-badge){order:0;flex:none}
  body.pc .pc-table.stack td.rowact{order:0;flex:none;padding:0 !important}
  body.pc .pc-table.stack td.rowact .pc-btn{width:auto !important;height:28px;padding:0 10px;font-size:12px}
  body.pc .pc-table.stack td[data-k]:not(:has(>.pc-badge))::before{font-size:9.5px !important;letter-spacing:.06em;color:var(--faint)}
  body.pc .pc-table.stack td[data-k]:has(>.pc-badge)::before{display:none}
  body.pc .pc-table.stack td[data-k]:not(:has(>.pc-badge)){padding-right:10px !important;border-right:1px solid var(--border-soft) !important}
  body.pc .pc-table.stack td[data-k]:not(:has(>.pc-badge)):nth-last-child(2),
  body.pc .pc-table.stack td[data-k]:not(:has(>.pc-badge)):last-child{border-right:0 !important;padding-right:0 !important}
  body.pc .pc-table.stack .namecell{gap:10px}
  body.pc .pc-table.stack .namecell .pc-tile{width:32px;height:32px;border-radius:9px}
  body.pc .pc-table.stack .namecell .pc-tile svg{width:16px;height:16px}
  body.pc .pc-table.stack .namecell .lk{font-size:13.5px}
  body.pc .pc-table.stack .namecell .sub{font-size:11px}
  body.pc .pc-table.stack .pc-copy{font-size:12px}
  body.pc .pc-filterbar{flex-wrap:wrap;gap:8px}

  /* ---- dashboard ---- */
  body.pc .pc-dash{gap:12px}
  body.pc .pc-dash-main{gap:12px}
  body.pc .pc-quickbar{padding:4px}
  body.pc .pc-quickbar a{gap:7px;padding:12px 4px 10px}
  body.pc .pc-quickbar .ic{width:34px;height:34px}
  body.pc .pc-quickbar .ic svg{width:17px;height:17px}
  body.pc .pc-quickbar b{font-size:11.5px;font-weight:500}
  body.pc .pc-quickbar small{display:none}
  body.pc .pc-dash aside .pc-wallet{padding:14px 14px 12px !important}
  body.pc .pc-dash aside .pc-wallet .bal{font-size:22px}
  body.pc .pc-dash aside .pc-wallet .acts .pc-btn{height:36px}
  body.pc .pc-dash aside .pc-act{padding:10px 14px !important;min-height:56px}
  body.pc .pc-actlist{max-height:calc(3 * 56px)}

  /* ---- knowledgebase: two columns of compact tiles ---- */
  body.pc[data-tpl^="knowledgebase"] .pc-depts.pc-kbcats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;margin-bottom:14px !important}
  body.pc[data-tpl^="knowledgebase"] .pc-kbcats a{flex-direction:column !important;align-items:flex-start !important;gap:10px !important;padding:14px 12px 13px !important;position:relative}
  body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .pc-tile.lg{width:38px !important;height:38px !important;border-radius:11px !important}
  body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .pc-tile.lg svg{width:18px !important;height:18px !important}
  body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .t{gap:3px}
  body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .t b{font-size:13.5px !important;line-height:1.25}
  body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .t span{font-size:11.5px !important;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  body.pc[data-tpl^="knowledgebase"] .pc-kbcats a .pc-chip{position:absolute;top:12px;right:12px;margin:0 !important}
  body.pc[data-tpl^="knowledgebase"] .pc-kbsearch{height:48px !important;margin-bottom:14px !important}
  body.pc[data-tpl^="knowledgebase"] .pc-pagehead{margin-bottom:12px}

  /* ---- account details: form and rail in two columns ---- */
  body.pc .pl-acct-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:0 10px !important}
  body.pc .pl-acct-grid .pl-fg-full{grid-column:1 / -1}
  body.pc .pl-acct-grid .pl-fg{margin-bottom:12px}
  body.pc .pl-acct-card{padding:14px !important}
  body.pc .pl-acct-head{margin-bottom:12px !important;padding-bottom:12px !important}
  body.pc .pl-acct-head .t .sub{display:none}
  body.pc .pc-acct-side{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important}
  body.pc .pc-acct-side>.pc-acct-kpis,body.pc .pc-acct-side>.pc-acct-2up{grid-column:1 / -1}
  body.pc .pc-acct-side>.pc-acct-box:nth-child(3){grid-column:1 / -1}
  body.pc .pc-acct-box{padding:10px 12px !important;gap:10px !important}
  body.pc .pc-acct-box .ic{width:32px !important;height:32px !important}
  body.pc .pc-acct-box .ic svg{width:15px !important;height:15px !important}
  body.pc .pc-acct-box .k{font-size:10px}
  body.pc .pc-acct-box .v{font-size:13.5px !important}
  body.pc .pc-acct-box .v.mono{font-size:13px !important}
  body.pc .pc-acct-box.link .s.sans{display:none}
  body.pc .pc-acct-box.link .go{display:none}

  /* ---- add funds ---- */
  body.pc .pc-af-form{padding:16px !important}
  body.pc .pc-af-head{gap:12px;margin-bottom:14px;padding-bottom:12px}
  body.pc .pc-af-ic{width:40px;height:40px}
  body.pc .pc-af-head h2{font-size:17px}
  body.pc .pc-af-head p{font-size:12.5px}
  body.pc .pc-af .pc-amount input{height:54px !important;font-size:22px !important}
  body.pc .pc-af .pc-amount .cur{height:54px !important;font-size:18px}
  body.pc .pc-af-presets{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}
  body.pc .pc-af-presets::-webkit-scrollbar{display:none}
  body.pc .pc-af-presets button{flex:none;height:32px;padding:0 13px}
  body.pc .pc-af-mgrid{grid-template-columns:1fr}
  body.pc .pc-af-method{padding:12px 14px}
  body.pc .pc-af-go .pc-addfunds-go{width:100% !important;justify-content:center}
  body.pc .pc-af-side{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px}
  body.pc .pc-af-how,body.pc .pc-af-help{grid-column:1 / -1}
  body.pc .pc-af-wallet{padding:14px !important}
  body.pc .pc-af-wallet .bal{font-size:21px}
  body.pc .pc-af-limits .row{padding:8px 12px}
  body.pc .pc-af-limits .k{font-size:11.5px}
  body.pc .pc-af-limits .v{font-size:12px}
}
@media(max-width:380px){
  body.pc .pc-quickbar b{font-size:10.5px}
  body.pc .pc-acct-side{grid-template-columns:1fr !important}
}

/* v332b: the meta line on phone rows - drop labels that the value already explains
   (an IP, a price) and the invoice date the name cell already prints */
@media(max-width:760px){
  body.pc .pc-table.stack td.namecell-td+td[data-k]::before,
  body.pc .pc-table.stack td.r[data-k]::before{display:none !important}
  body.pc[data-tpl="clientareainvoices"] .pc-table.stack td.namecell-td+td[data-k]{display:none !important}
  body.pc .pc-table.stack td[data-k]:not(:has(>.pc-badge)){font-size:11.5px}
}


/* ==========================================================================
   v333 (2026-09-16) - Ali round 5
   1. the background glows drift and fade smoothly even when the OS asks for
      reduced motion (console.css:400 kills every animation AND transition
      under reduce - on Ali's Windows the orbs blinked instead of moving)
   2. same for the knowledgebase search ring: it was frozen on desktop
   3. the space to the right of the search box is filled with quick links
   ========================================================================== */

/* ---------- 1. orbs: cheaper to paint, and always in motion ---------- */
body.pc .pc-orbs i{
  filter:none;                      /* a soft radial needs no blur pass - blur(64px) on a
                                       moving 500px layer is what made it stutter */
  will-change:opacity,transform;
  transition:opacity 3.4s cubic-bezier(.33,0,.2,1) !important;
  background:radial-gradient(circle at 50% 50%,
    rgba(56,189,248,.55) 0%,rgba(56,189,248,.42) 18%,rgba(45,170,235,.26) 38%,
    rgba(20,140,210,.13) 56%,rgba(14,165,233,.05) 74%,rgba(14,165,233,0) 88%)}
body.pc .pc-orbs i:nth-child(2){background:radial-gradient(circle at 50% 50%,
    rgba(125,211,252,.5) 0%,rgba(125,211,252,.38) 18%,rgba(90,190,245,.24) 38%,
    rgba(56,189,248,.12) 58%,rgba(56,189,248,.04) 76%,rgba(56,189,248,0) 90%)}
body.pc .pc-orbs i:nth-child(3){background:radial-gradient(circle at 50% 50%,
    rgba(14,165,233,.5) 0%,rgba(14,165,233,.38) 18%,rgba(10,140,200,.24) 38%,
    rgba(2,132,199,.12) 58%,rgba(2,132,199,.04) 76%,rgba(2,132,199,0) 90%)}
body.pc .pc-orbs i.on{opacity:.42}
html.pl-light body.pc .pc-orbs i.on{opacity:.22}
/* the fade and the drift are deliberate ambient motion the owner asked for:
   restate them inside the reduce query so console.css:400 cannot mute them,
   only slower and gentler than at full preference */
@media(prefers-reduced-motion:reduce){
  body.pc .pc-orbs i{transition:opacity 4.2s cubic-bezier(.33,0,.2,1) !important;
    animation:pcOrbWander 46s ease-in-out infinite alternate !important}
  body.pc .pc-orbs i:nth-child(2){animation-duration:58s !important;animation-delay:-14s !important}
  body.pc .pc-orbs i:nth-child(3){animation-duration:70s !important;animation-delay:-26s !important}
}
@media(prefers-reduced-motion:no-preference){
  body.pc .pc-orbs i{animation:pcOrbWander 26s ease-in-out infinite alternate}
  body.pc .pc-orbs i:nth-child(2){animation-duration:34s;animation-delay:-9s}
  body.pc .pc-orbs i:nth-child(3){animation-duration:42s;animation-delay:-17s}
}
@keyframes pcOrbWander{0%{translate:0 0}50%{translate:60px -44px}100%{translate:-42px 34px}}

/* ---------- 2. the knowledgebase ring keeps turning under reduce ---------- */
@media(prefers-reduced-motion:reduce){
  body.pc[data-tpl^="knowledgebase"] .pc-kbsearch{--kba:0deg;animation:pckbspin 18s linear infinite !important}
  body.pc[data-tpl^="knowledgebase"] .pc-kbsearch:focus-within{animation-duration:9s !important}
}

/* ---------- 3. quick links beside the search box ---------- */
body.pc[data-tpl^="knowledgebase"] .pc-kbrow{display:flex;align-items:stretch;gap:12px;margin:0 0 22px;flex-wrap:wrap}
body.pc[data-tpl^="knowledgebase"] .pc-kbrow .pc-kbsearch{flex:1 1 420px;max-width:none !important;margin:0 !important}
body.pc[data-tpl^="knowledgebase"] .pc-kbquick{display:flex;gap:10px;flex:0 1 auto;min-width:0}
body.pc[data-tpl^="knowledgebase"] .pc-kbquick a{
  display:flex;align-items:center;gap:10px;min-width:0;padding:0 14px 0 12px;height:56px;border-radius:var(--r-card);
  color:var(--text);text-decoration:none !important;border:1px solid var(--border);background:var(--panel);
  transition:border-color var(--t-hover),box-shadow var(--t-hover),transform var(--t-hover),background var(--t-hover)}
body.pc[data-tpl^="knowledgebase"] .pc-kbquick .ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--tile);box-shadow:var(--tile-ring);color:var(--accent);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
body.pc[data-tpl^="knowledgebase"] .pc-kbquick .ic svg{width:17px;height:17px;stroke-width:1.7}
body.pc[data-tpl^="knowledgebase"] .pc-kbquick .t{display:flex;flex-direction:column;gap:1px;min-width:0}
body.pc[data-tpl^="knowledgebase"] .pc-kbquick b{font-size:13px;font-weight:600;white-space:nowrap}
body.pc[data-tpl^="knowledgebase"] .pc-kbquick small{font-size:11.5px;color:var(--faint);white-space:nowrap}
body.pc[data-tpl^="knowledgebase"] .pc-kbquick a:hover{border-color:var(--accent-line);background:var(--panel-2);
  box-shadow:var(--lift);transform:translateY(var(--lift-y))}
body.pc[data-tpl^="knowledgebase"] .pc-kbquick a:hover .ic{transform:translateY(-1px);box-shadow:var(--tile-ring),0 10px 22px -12px rgba(56,189,248,.9)}
@media(max-width:1180px){
  body.pc[data-tpl^="knowledgebase"] .pc-kbquick a small{display:none}
  body.pc[data-tpl^="knowledgebase"] .pc-kbquick a{height:52px}
}
@media(max-width:900px){
  body.pc[data-tpl^="knowledgebase"] .pc-kbrow{flex-direction:column}
  /* in a column flex the basis sizes the HEIGHT - without this the pill became a 420px ellipse */
  body.pc[data-tpl^="knowledgebase"] .pc-kbrow .pc-kbsearch{flex:0 0 auto !important;height:48px !important;width:100%}
  body.pc[data-tpl^="knowledgebase"] .pc-kbquick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  body.pc[data-tpl^="knowledgebase"] .pc-kbquick a{height:48px;padding:0 10px;justify-content:center}
  body.pc[data-tpl^="knowledgebase"] .pc-kbquick b{font-size:12px}
  body.pc[data-tpl^="knowledgebase"] .pc-kbquick small{display:none}
}
@media(max-width:520px){
  body.pc[data-tpl^="knowledgebase"] .pc-kbquick .t{display:none}
  body.pc[data-tpl^="knowledgebase"] .pc-kbquick a{padding:0}
}



/* ==========================================================================
   v334 (2026-09-16) - Ali round 5, part 2
   the account family (contacts / users) and the domains tab get the console
   grid: fewest rows, no empty right edge, preferences as one row of chips
   ========================================================================== */

/* ---------- a switcher bar (contacts "choose contact") ---------- */
body.pc .pc-switchbar{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:10px 14px;border-radius:var(--r-card);
  border:1px solid transparent;
  background:linear-gradient(180deg,rgba(18,31,52,.9),rgba(11,19,33,.92)) padding-box,
    linear-gradient(120deg,rgba(125,211,252,.38),rgba(56,189,248,.06) 45%,rgba(125,211,252,.26)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
body.pc .pc-switchbar .ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--tile);box-shadow:var(--tile-ring);color:var(--accent)}
body.pc .pc-switchbar .ic svg{width:17px;height:17px;stroke-width:1.7}
body.pc .pc-switchbar>label{flex:none;margin:0;font-size:12.5px;color:var(--dim);white-space:nowrap}
body.pc .pc-switchbar .pc-sel{flex:1 1 auto;min-width:0;position:relative}
body.pc .pc-switchbar select{width:100%;height:40px}
body.pc .pc-switchbar .pc-btn{flex:none;height:40px}
body.pc .pc-switchbar .pc-btn svg{width:15px;height:15px}

/* ---------- a card sub-head with an icon (contacts) ---------- */
body.pc .pc-subhead2{display:flex;align-items:center;gap:13px;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid var(--border-soft)}
body.pc .pc-subhead2 .ic{flex:none;width:40px;height:40px;border-radius:var(--r-tile);display:grid;place-items:center;background:var(--tile);box-shadow:var(--tile-ring);color:var(--accent)}
body.pc .pc-subhead2 .ic svg{width:19px;height:19px;stroke-width:1.7}
body.pc .pc-subhead2 h2{margin:0 0 2px;font-family:var(--display);font-size:17px;font-weight:600;letter-spacing:-.015em}
body.pc .pc-subhead2 p{margin:0;font-size:12.5px;color:var(--dim)}
body.pc .pc-subhead2 .tag{margin-left:auto;flex:none;font-family:var(--mono);font-size:11.5px;color:var(--accent-2);
  padding:5px 10px;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent-line)}

/* ---------- three-column field grid ---------- */
body.pc .pc-fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
body.pc .pc-fgrid .pc-f{display:flex;flex-direction:column;min-width:0}
body.pc .pc-fgrid .pc-f.s2{grid-column:span 2}
body.pc .pc-fgrid .pc-f>label{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:12.5px;font-weight:500;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-fgrid .pc-f>label em{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  padding:2px 6px;border-radius:5px;border:1px solid var(--border)}
body.pc .pc-fgrid .pc-in,body.pc .pc-fgrid input,body.pc .pc-fgrid select{width:100%;height:40px}
body.pc .pc-fgrid .pc-sel{position:relative}
body.pc .pc-fgrid .pc-sel::after{content:"";position:absolute;right:13px;top:17px;width:7px;height:7px;pointer-events:none;
  border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);transform:rotate(45deg)}
body.pc .pc-fgrid select{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer}
body.pc .pc-cphone .intl-tel-input,body.pc .pc-cphone .iti{display:block;width:100%}
body.pc .pc-cform .pc-card+.pc-card{margin-top:12px}

/* ---------- e-mail preferences: one row of chips in a hollow gradient box ---------- */
body.pc .pc-prefs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;padding:12px;border-radius:14px;
  border:1px solid transparent;
  background:linear-gradient(180deg,rgba(12,20,34,.55),rgba(12,20,34,.25)) padding-box,
    linear-gradient(120deg,rgba(125,211,252,.32),rgba(56,189,248,.05) 40%,rgba(56,189,248,.05) 60%,rgba(125,211,252,.24)) border-box}
body.pc .pc-pref{position:relative;display:flex;align-items:center;gap:10px;margin:0;padding:11px 12px;border-radius:11px;cursor:pointer;min-width:0;
  border:1px solid var(--border);background:var(--panel);transition:border-color .2s var(--ease),background .25s var(--ease),box-shadow .3s var(--ease)}
body.pc .pc-pref input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
body.pc .pc-pref .bx{flex:none;width:19px;height:19px;border-radius:6px;display:grid;place-items:center;
  border:1.5px solid var(--border-strong);background:var(--panel-2);transition:background .2s,border-color .2s}
body.pc .pc-pref .bx svg{width:12px;height:12px;color:#03121d;opacity:0;transform:scale(.5);transition:opacity .18s,transform .3s var(--ease)}
body.pc .pc-pref .tx{display:flex;flex-direction:column;gap:1px;min-width:0}
body.pc .pc-pref b{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-pref small{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.pc .pc-pref:hover{border-color:var(--border-strong)}
body.pc .pc-pref:has(input:checked){border-color:var(--accent-line);background:linear-gradient(160deg,rgba(56,189,248,.12),rgba(56,189,248,.02))}
body.pc .pc-pref:has(input:checked) .bx{background:var(--accent);border-color:var(--accent)}
body.pc .pc-pref:has(input:checked) .bx svg{opacity:1;transform:none}
body.pc .pc-pref:has(input:focus-visible){outline:2px solid var(--accent-line);outline-offset:2px}

/* the profile page uses the same idea with its own markup */
body.pc .pl-acct-checks{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;gap:10px !important;
  padding:12px;border-radius:14px;border:1px solid transparent;
  background:linear-gradient(180deg,rgba(12,20,34,.55),rgba(12,20,34,.25)) padding-box,
    linear-gradient(120deg,rgba(125,211,252,.32),rgba(56,189,248,.05) 40%,rgba(56,189,248,.05) 60%,rgba(125,211,252,.24)) border-box}
body.pc .pl-acct-checks .pl-check{margin:0 !important;padding:11px 12px !important;font-size:13px !important;font-weight:500 !important;
  border-radius:11px !important;min-width:0}
body.pc .pl-acct-checks .pl-check span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* ---------- actions row ---------- */
body.pc .pc-cactions{display:flex;align-items:center;gap:10px;margin:14px 0 0}
body.pc .pc-cactions .note{margin:0;margin-right:auto;font-size:12.5px;color:var(--faint)}
body.pc .pc-cactions .pc-btn svg{width:15px;height:15px}
body.pc .pc-btn.ghost.danger{color:var(--red) !important;border-color:color-mix(in srgb,var(--red) 32%,transparent) !important}
body.pc .pc-btn.ghost.danger:hover{background:var(--red-soft) !important;border-color:color-mix(in srgb,var(--red) 55%,transparent) !important}
body.pc input.pc-btn{-webkit-appearance:none;appearance:none;cursor:pointer}

/* ---------- users tab: console table + a compact invite card ---------- */
body.pc[data-tpl^="account-user"] .card .table,body.pc[data-tpl^="account-user"] .table-striped{margin:0}
body.pc[data-tpl^="account-user"] .table-striped tbody tr:nth-of-type(odd){background:transparent}
body.pc[data-tpl^="account-user"] .card-title{margin-bottom:14px}
body.pc[data-tpl^="account-user"] form .form-group{margin-bottom:12px}
body.pc[data-tpl^="account-user"] form:has([name=inviteemail]){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:start}
body.pc[data-tpl^="account-user"] form:has([name=inviteemail]) .form-group:has([name=inviteemail]){margin:0}
body.pc[data-tpl^="account-user"] form:has([name=inviteemail]) .form-group:has([name=permissions]){grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap;margin:0}
body.pc[data-tpl^="account-user"] form:has([name=inviteemail]) #invitePermissions{grid-column:1/-1}
body.pc[data-tpl^="account-user"] .well{background:var(--panel-2) !important;border:1px solid var(--border) !important;border-radius:var(--r-card) !important;padding:14px !important}
body.pc[data-tpl^="account-user"] #invitePermissions .form-check-inline{display:flex;align-items:flex-start;gap:8px;margin:0;padding:8px 10px;border-radius:10px;
  background:var(--panel);border:1px solid var(--border);font-size:12.5px}
body.pc[data-tpl^="account-user"] #invitePermissions{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
body.pc[data-tpl^="account-user"] .btn-toolbar,body.pc[data-tpl^="account-user"] .text-center{text-align:left !important}

/* ---------- domains ---------- */
body.pc .pc-dombulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 12px}
body.pc .pc-bulklabel{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-right:2px}
body.pc .pc-cbcol{width:38px}
body.pc .pc-cb{display:inline-flex;align-items:center;justify-content:center;margin:0;cursor:pointer}
body.pc .pc-cb input{position:absolute;opacity:0;width:1px;height:1px}
body.pc .pc-cb span{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--border-strong);background:var(--panel-2);display:block;position:relative;transition:background .2s,border-color .2s}
body.pc .pc-cb input:checked+span{background:var(--accent);border-color:var(--accent)}
body.pc .pc-cb input:checked+span::after{content:"";position:absolute;left:5px;top:1.5px;width:5px;height:9px;border:solid #03121d;border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
body.pc .pc-cb input:focus-visible+span{outline:2px solid var(--accent-line);outline-offset:2px}

body.pc .pc-domzero{padding:0 !important;overflow:hidden}
body.pc .pc-domzero-in{display:flex;align-items:center;gap:28px;padding:26px 28px}
body.pc .pc-domzero .art{flex:none;width:170px;height:170px;display:grid;place-items:center;color:var(--accent);position:relative}
body.pc .pc-domzero .art::before{content:"";position:absolute;inset:-10%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(56,189,248,.18),transparent 62%)}
body.pc .pc-domzero .art svg{width:100%;height:100%;position:relative}
body.pc .pc-domzero .art .g{opacity:.55}
body.pc .pc-domzero .art .ring{opacity:.35;transform-origin:54px 54px}
body.pc .pc-domzero .art .mag{color:var(--ice-1);opacity:.95}
body.pc .pc-domzero .art .d1,body.pc .pc-domzero .art .d2{color:var(--ice-1)}
@media(prefers-reduced-motion:no-preference){
  body.pc .pc-domzero .art .ring{animation:pcDomRing 26s linear infinite}
  body.pc .pc-domzero .art .d1{animation:pcDomPulse 3.4s ease-in-out infinite}
  body.pc .pc-domzero .art .d2{animation:pcDomPulse 3.4s ease-in-out 1.2s infinite}
}
@media(prefers-reduced-motion:reduce){
  body.pc .pc-domzero .art .ring{animation:pcDomRing 60s linear infinite !important}
}
@keyframes pcDomRing{to{rotate:360deg}}
@keyframes pcDomPulse{0%,100%{opacity:.45}50%{opacity:1}}
body.pc .pc-domzero .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
body.pc .pc-domzero .tx b{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.015em}
body.pc .pc-domzero .tx p{margin:0;font-size:13.5px;color:var(--dim);max-width:58ch}
body.pc .pc-domsearch{display:flex;align-items:center;gap:10px;margin:6px 0 2px;padding:6px 6px 6px 16px;max-width:520px;
  border-radius:999px;border:1px solid var(--border-strong);background:var(--panel-2)}
body.pc .pc-domsearch>svg{width:17px;height:17px;flex:none;color:var(--faint)}
body.pc .pc-domsearch input{flex:1;min-width:0;height:38px;border:0 !important;background:transparent !important;font-family:var(--mono);font-size:14px;box-shadow:none !important}
body.pc .pc-domsearch input:focus{box-shadow:none !important}
body.pc .pc-domsearch .pc-btn{flex:none;height:38px;border-radius:999px !important}
body.pc .pc-domsearch:focus-within{border-color:var(--accent-line);box-shadow:0 0 0 3px rgba(56,189,248,.12)}
body.pc .pc-domtlds{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
body.pc .pc-domtlds a{display:inline-flex;align-items:baseline;gap:7px;padding:7px 12px;border-radius:999px;text-decoration:none !important;
  border:1px solid var(--border);background:var(--panel);color:var(--text);transition:border-color .2s var(--ease),background .2s var(--ease),transform .25s var(--ease)}
body.pc .pc-domtlds a b{font-size:13px;font-weight:600}
body.pc .pc-domtlds a span{font-family:var(--mono);font-size:11.5px;color:var(--accent-2)}
body.pc .pc-domtlds a:hover{border-color:var(--accent-line);background:var(--accent-soft);transform:translateY(-1px)}
body.pc .pc-domtlds a.more{color:var(--accent-2);font-size:12.5px;background:transparent;border-style:dashed}
@media(max-width:900px){
  body.pc .pc-domzero-in{flex-direction:column;align-items:flex-start;gap:16px;padding:20px 18px}
  body.pc .pc-domzero .art{width:120px;height:120px;align-self:center}
  body.pc .pc-domsearch{max-width:none;width:100%}
}

/* ---------- phones ---------- */
@media(max-width:760px){
  body.pc .pc-switchbar{flex-wrap:wrap;gap:10px;padding:10px 12px}
  body.pc .pc-switchbar>label{flex:1 1 auto}
  body.pc .pc-switchbar .pc-sel{flex:1 1 100%;order:3}
  body.pc .pc-switchbar .pc-btn{order:4;flex:none}
  body.pc .pc-fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.pc .pc-fgrid .pc-f.s2{grid-column:1 / -1}
  body.pc .pc-fgrid .pc-in,body.pc .pc-fgrid input,body.pc .pc-fgrid select{height:44px;font-size:16px}
  body.pc .pc-subhead2{gap:10px;margin-bottom:14px;padding-bottom:12px}
  body.pc .pc-subhead2 p{display:none}
  body.pc .pc-subhead2 .tag{display:none}
  body.pc .pc-prefs,body.pc .pl-acct-checks{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;padding:8px}
  body.pc .pc-pref{padding:10px}
  body.pc .pc-pref small{display:none}
  body.pc .pc-cactions{flex-wrap:wrap}
  body.pc .pc-cactions .note{flex:1 1 100%;margin:0 0 4px}
  body.pc .pc-cactions .pc-btn{flex:1;justify-content:center}
  body.pc .pc-dombulk{gap:6px}
  body.pc .pc-dombulk .pc-btn{flex:1 1 auto;justify-content:center}
  body.pc .pc-bulklabel{flex:1 1 100%}
  body.pc .pc-domtable .pc-cbcol{display:none !important}
}



/* ==========================================================================
   v335 (2026-09-16) - Ali round 5, part 3: the portal home (the logo page)
   equal tiles in three columns, a framed hero panel, list rows that answer
   the pointer, and a phone layout with the fewest rows we can manage
   ========================================================================== */

body.pc .pc-home{display:flex;flex-direction:column;gap:16px}

/* ---------- hero ---------- */
body.pc .pc-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);gap:0;padding:0 !important;overflow:hidden;position:relative}
body.pc .pc-hero-in{padding:30px 32px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-width:0}
body.pc .pc-hero-in .k{display:inline-flex;align-items:center;gap:9px;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
body.pc .pc-hero-in .k .d{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
body.pc .pc-hero-in h1{margin:0;font-family:var(--display);font-size:clamp(26px,2.6vw,36px);line-height:1.07;font-weight:600;letter-spacing:-.025em}
body.pc .pc-hero-in h1 .g{background:linear-gradient(100deg,#e0f6ff 0%,#7dd3fc 45%,#38bdf8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.pc .pc-hero-in p{margin:0;max-width:56ch;font-size:14px;line-height:1.6;color:var(--dim)}
body.pc .pc-hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
body.pc .pc-hero-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:4px;font-size:12px;color:var(--faint)}
body.pc .pc-hero-facts b{font-family:var(--mono);font-size:13px;color:var(--text);margin-right:4px}
body.pc .pc-hero-facts .st{display:inline-flex;align-items:center;gap:7px;color:var(--green);text-decoration:none !important;
  padding:5px 11px;border-radius:999px;background:color-mix(in srgb,var(--green) 10%,transparent);border:1px solid color-mix(in srgb,var(--green) 26%,transparent)}
body.pc .pc-hero-facts .st i{width:6px;height:6px;border-radius:50%;background:currentColor}
body.pc .pc-hero-facts .st:hover{background:color-mix(in srgb,var(--green) 18%,transparent)}

body.pc .pc-hero-art{position:relative;overflow:hidden;min-height:260px;display:grid;place-items:center;
  border-left:1px solid var(--border-soft);
  background:radial-gradient(90% 90% at 70% 20%,rgba(56,189,248,.12),transparent 62%),linear-gradient(180deg,rgba(13,22,38,.7),rgba(9,15,26,.85))}
body.pc .pc-hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(125,211,252,.05) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(125,211,252,.05) 0 1px,transparent 1px 64px);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent 78%)}
body.pc .pc-hero-art img{position:relative;z-index:2;width:min(78%,300px);height:auto;object-fit:contain;
  filter:drop-shadow(0 22px 40px rgba(2,132,199,.45))}
body.pc .pc-hero-art .glow{position:absolute;border-radius:50%;pointer-events:none;z-index:1}
body.pc .pc-hero-art .g1{width:280px;height:280px;top:-40px;right:-60px;background:radial-gradient(circle,rgba(56,189,248,.35),transparent 68%)}
body.pc .pc-hero-art .g2{width:220px;height:220px;bottom:-50px;left:-40px;background:radial-gradient(circle,rgba(125,211,252,.28),transparent 70%)}
@media(prefers-reduced-motion:no-preference){
  body.pc .pc-hero-art img{animation:pcHeroFloat 9s ease-in-out infinite alternate}
  body.pc .pc-hero-art .g1{animation:pcHeroGlow 11s ease-in-out infinite alternate}
  body.pc .pc-hero-art .g2{animation:pcHeroGlow 14s ease-in-out infinite alternate-reverse}
}
@media(prefers-reduced-motion:reduce){
  body.pc .pc-hero-art img{animation:pcHeroFloat 22s ease-in-out infinite alternate !important}
  body.pc .pc-hero-art .g1{animation:pcHeroGlow 30s ease-in-out infinite alternate !important}
}
@keyframes pcHeroFloat{from{transform:translateY(-6px) rotate(-1deg)}to{transform:translateY(8px) rotate(1.5deg)}}
@keyframes pcHeroGlow{from{opacity:.65;transform:scale(.94)}to{opacity:1;transform:scale(1.08)}}

/* ---------- product tiles: three equal columns, equal heights ---------- */
body.pc .pc-homegroups{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:12px !important;align-items:stretch}
body.pc .pc-homegroups a{position:relative;display:flex !important;align-items:center;gap:14px;min-height:96px;padding:16px 18px !important;overflow:hidden;
  border-radius:var(--r-card) !important;transition:border-color var(--t-hover),background var(--t-hover),box-shadow var(--t-hover),transform var(--t-hover)}
body.pc .pc-homegroups a::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
  background:radial-gradient(90% 120% at 0% 0%,rgba(56,189,248,.14),transparent 62%)}
body.pc .pc-homegroups a:hover{border-color:var(--accent-line) !important;box-shadow:var(--lift);transform:translateY(var(--lift-y))}
body.pc .pc-homegroups a:hover::before{opacity:1}
body.pc .pc-homegroups .pc-tile{flex:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
body.pc .pc-homegroups a:hover .pc-tile{transform:translateY(-2px);box-shadow:var(--tile-ring),0 12px 26px -12px rgba(56,189,248,.95)}
body.pc .pc-homegroups .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
body.pc .pc-homegroups .t b{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
body.pc .pc-homegroups .t span{font-size:12.5px;line-height:1.4;color:var(--faint);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
body.pc .pc-homegroups .go{flex:none;color:var(--faint);transition:transform .25s var(--ease),color .2s}
body.pc .pc-homegroups .go svg{width:16px;height:16px}
body.pc .pc-homegroups a:hover .go{transform:translateX(3px);color:var(--accent)}

/* ---------- the two list cards ---------- */
body.pc .pc-homegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
body.pc .pc-homegrid .pc-card{margin:0}
body.pc .pc-homegrid .pc-act{position:relative;padding-right:38px}
body.pc .pc-homegrid .pc-act::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-4px;
  border-right:1.8px solid var(--ghost);border-bottom:1.8px solid var(--ghost);transform:rotate(-45deg);
  transition:transform .25s var(--ease),border-color .2s}
body.pc .pc-homegrid .pc-act:hover::after{border-color:var(--accent);transform:rotate(-45deg) translate(2px,2px)}
body.pc .pc-homegrid .pc-act .ic{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
body.pc .pc-homegrid .pc-act:hover .ic{transform:scale(1.06);box-shadow:0 8px 20px -10px rgba(56,189,248,.9)}
body.pc .pc-homegrid .pc-act:last-child{border-bottom:0}

/* ---------- phones: fewest rows, nothing oversized ---------- */
@media(max-width:900px){
  body.pc .pc-hero{grid-template-columns:1fr}
  body.pc .pc-hero-art{order:-1;min-height:0;height:168px;border-left:0;border-bottom:1px solid var(--border-soft)}
  body.pc .pc-hero-art img{width:min(52%,190px)}
  body.pc .pc-homegroups{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.pc .pc-homegrid{grid-template-columns:1fr}
}
@media(max-width:760px){
  body.pc .pc-home{gap:12px}
  body.pc .pc-hero-in{padding:18px 16px 20px;gap:11px}
  body.pc .pc-hero-in h1{font-size:23px}
  body.pc .pc-hero-in p{font-size:13px;line-height:1.5}
  body.pc .pc-hero-cta{width:100%;flex-wrap:nowrap;gap:8px}
  body.pc .pc-hero-cta .pc-btn{flex:1;justify-content:center;height:40px;padding:0 10px;font-size:13px}
  body.pc .pc-hero-cta .pc-btn svg{display:none}
  body.pc .pc-hero-facts{gap:6px 12px;font-size:11.5px}
  body.pc .pc-hero-art{height:140px}
  body.pc .pc-homegroups{gap:8px !important}
  body.pc .pc-homegroups a{flex-direction:column !important;align-items:flex-start !important;gap:9px;min-height:0;padding:12px !important}
  body.pc .pc-homegroups .pc-tile.lg{width:36px !important;height:36px !important;border-radius:11px !important}
  body.pc .pc-homegroups .pc-tile.lg svg{width:18px !important;height:18px !important}
  body.pc .pc-homegroups .t b{font-size:13px;line-height:1.2}
  body.pc .pc-homegroups .t span{font-size:11.5px;-webkit-line-clamp:2}
  body.pc .pc-homegroups .go{position:absolute;top:12px;right:12px}
  body.pc .pc-homegrid .pc-act{padding:10px 34px 10px 14px !important;min-height:0}
  body.pc .pc-homegrid .pc-act .m span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}
  body.pc .pc-homeauth .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
}
@media(max-width:420px){
  body.pc .pc-hero-facts span:nth-child(3){display:none}
  body.pc .pc-homegroups .t span{display:none}
}


/* ==========================================================================
   v336 (2026-09-17) - Ali round 6
   1. background glows: truly blurred, no visible rim
   2. the 404 page inside the console (same language as papiliohost.com/404)
   3. domains empty state: a richer mark and a filled right side
   ========================================================================== */

/* ---------- 1. glows: a real blur on a composited layer, and a gradient with no edge ---------- */
body.pc .pc-orbs i{
  filter:blur(46px);
  will-change:opacity,transform;
  transform:translateZ(0);
  background:radial-gradient(circle at 50% 50%,
    rgba(56,189,248,.62) 0%,rgba(56,189,248,.44) 14%,rgba(45,170,235,.26) 30%,
    rgba(28,150,220,.13) 46%,rgba(14,140,210,.05) 60%,rgba(14,140,210,.015) 70%,rgba(14,140,210,0) 78%)}
body.pc .pc-orbs i:nth-child(2){background:radial-gradient(circle at 50% 50%,
    rgba(125,211,252,.58) 0%,rgba(125,211,252,.4) 14%,rgba(90,190,245,.24) 30%,
    rgba(56,189,248,.12) 46%,rgba(56,189,248,.045) 60%,rgba(56,189,248,.012) 70%,rgba(56,189,248,0) 78%)}
body.pc .pc-orbs i:nth-child(3){background:radial-gradient(circle at 50% 50%,
    rgba(14,165,233,.6) 0%,rgba(14,165,233,.42) 14%,rgba(10,140,200,.24) 30%,
    rgba(2,132,199,.12) 46%,rgba(2,132,199,.045) 60%,rgba(2,132,199,.012) 70%,rgba(2,132,199,0) 78%)}
body.pc .pc-orbs i.on{opacity:.5}
html.pl-light body.pc .pc-orbs i.on{opacity:.26}

/* ---------- 2. console 404 ---------- */
body.pc .pc-nf{display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 16px 48px;min-height:calc(100vh - 54px - 64px);justify-content:center}
body.pc .pc-nf-code{font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--accent-2);opacity:.9;margin-bottom:8px}
body.pc .pc-nf-stage{position:relative;width:min(92vw,660px);aspect-ratio:720/300;margin:0 auto}
body.pc .pc-nf-stage svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
body.pc .pc-nf-stage text{font-family:var(--display);font-weight:700;font-size:250px;letter-spacing:-.03em;text-anchor:middle;dominant-baseline:middle}
body.pc .pc-nf-stage .halo{fill:url(#pcNfHalo);opacity:.5;filter:url(#pcNfBlur)}
body.pc .pc-nf-stage .fill{fill:url(#pcNfFill)}
body.pc .pc-nf-stage .edge{fill:none;stroke:rgba(125,211,252,.22);stroke-width:1.5}
body.pc .pc-nf-stage .run{fill:none;stroke:url(#pcNfRun);stroke-width:3;stroke-linecap:round;stroke-dasharray:230 1400;stroke-dashoffset:0;animation:pcNfRun 7s linear infinite}
body.pc .pc-nf-stage .run.b{stroke:url(#pcNfRun2);stroke-dasharray:150 1480;animation-delay:-3.5s;stroke-width:2.2;opacity:.85}
@keyframes pcNfRun{to{stroke-dashoffset:-1630}}
@media(prefers-reduced-motion:reduce){
  body.pc .pc-nf-stage .run{animation:pcNfRun 16s linear infinite !important}
  body.pc .pc-nf-stage .run.b{animation:pcNfRun 16s linear infinite -8s !important}
}
body.pc .pc-nf h1{margin:6px 0 10px;font-family:var(--display);font-size:clamp(24px,3vw,36px);font-weight:600;letter-spacing:-.02em}
body.pc .pc-nf h1 .g{background:linear-gradient(100deg,#e0f6ff 0%,#7dd3fc 45%,#38bdf8 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.pc .pc-nf p{margin:0 0 26px;max-width:46ch;font-size:14px;line-height:1.6;color:var(--dim)}
body.pc .pc-nf-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
body.pc .pc-nf-btn{position:relative;display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 22px;border-radius:12px;
  font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.01em;text-decoration:none !important;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),filter .25s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
body.pc .pc-nf-btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}
body.pc .pc-nf-btn.primary{color:#03121d !important;
  background:radial-gradient(120% 140% at 50% -40%,rgba(255,255,255,.5),transparent 55%),linear-gradient(118deg,#bfeeff 0%,#7dd3fc 32%,#38bdf8 68%,#0ea5e9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 18px 40px -18px rgba(56,189,248,.95),0 0 0 1px rgba(125,211,252,.35)}
body.pc .pc-nf-btn.primary::after{content:"";position:absolute;left:12%;right:12%;bottom:-12px;height:22px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(56,189,248,.6),rgba(56,189,248,0));filter:blur(8px);opacity:.8;transition:opacity .3s}
body.pc .pc-nf-btn.primary:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 22px 48px -16px rgba(56,189,248,1),0 0 0 1px rgba(191,238,255,.5)}
body.pc .pc-nf-btn.primary:hover svg{transform:translateX(3px)}
body.pc .pc-nf-btn.ghost{color:var(--text) !important;border:1px solid var(--border-strong);background:rgba(56,189,248,.05)}
body.pc .pc-nf-btn.ghost:hover{border-color:var(--accent-line);background:var(--accent-soft);box-shadow:0 12px 30px -18px rgba(56,189,248,.8)}
body.pc .pc-nf-foot{margin-top:38px;font-family:var(--mono);font-size:12px;color:var(--faint)}
body.pc .pc-nf-foot a{color:var(--accent-2)}
@media(max-width:760px){
  body.pc .pc-nf{padding:20px 8px 36px;min-height:calc(100vh - 54px - 40px)}
  body.pc .pc-nf-stage{width:96vw}
  body.pc .pc-nf-cta{width:100%;flex-wrap:nowrap;gap:8px}
  body.pc .pc-nf-btn{flex:1;justify-content:center;padding:0 12px;font-size:14px}
  body.pc .pc-nf-foot{margin-top:26px}
}

/* ---------- 3. domains empty state: art on the left, copy in the middle, a facts rail on the right ---------- */
body.pc .pc-domzero-in{display:grid;grid-template-columns:200px minmax(0,1fr) 280px;gap:24px;align-items:center;padding:24px 26px}
body.pc .pc-domzero .art{width:200px;height:200px}
body.pc .pc-domzero .art .g{opacity:.62}
body.pc .pc-domzero .art .orbit{opacity:.5;transform-origin:54px 54px}
body.pc .pc-domzero .art .sat{color:var(--ice-1);transform-origin:54px 54px}
body.pc .pc-domzero .art .tag{color:var(--ice-1)}
@media(prefers-reduced-motion:no-preference){
  body.pc .pc-domzero .art .sat{animation:pcDomRing 14s linear infinite}
  body.pc .pc-domzero .art .tag{animation:pcDomFloat 4.5s ease-in-out infinite alternate}
}
@media(prefers-reduced-motion:reduce){
  body.pc .pc-domzero .art .sat{animation:pcDomRing 40s linear infinite !important}
}
@keyframes pcDomFloat{from{transform:translateY(0)}to{transform:translateY(-4px)}}
body.pc .pc-domfacts{display:flex;flex-direction:column;gap:8px;min-width:0}
body.pc .pc-domfact{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:12px;border:1px solid var(--border);
  background:linear-gradient(160deg,rgba(56,189,248,.06),transparent 60%),var(--panel-2)}
body.pc .pc-domfact .ic{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:var(--tile);box-shadow:var(--tile-ring);color:var(--accent)}
body.pc .pc-domfact .ic svg{width:15px;height:15px;stroke-width:1.7}
body.pc .pc-domfact b{display:block;font-size:13px;font-weight:600;line-height:1.2}
body.pc .pc-domfact span{display:block;font-size:11.5px;color:var(--faint);line-height:1.3}
@media(max-width:1100px){
  body.pc .pc-domzero-in{grid-template-columns:150px minmax(0,1fr)}
  body.pc .pc-domzero .art{width:150px;height:150px}
  body.pc .pc-domfacts{grid-column:1 / -1;flex-direction:row}
  body.pc .pc-domfact{flex:1}
}
@media(max-width:760px){
  body.pc .pc-domzero-in{grid-template-columns:1fr;gap:14px;padding:18px 16px}
  body.pc .pc-domzero .art{width:120px;height:120px;margin:0 auto}
  body.pc .pc-domfacts{flex-direction:column;gap:6px}
  body.pc .pc-domfact{padding:8px 10px}
}


/* ==========================================================================
   v337 (2026-09-17) - Higgsfield artwork inside the console
   1. portal home hero: the crystal-tower hub (cover-fit photo, slow drift)
      replaces the butterfly cut-out
   2. domains empty state: a crystal ".com" mark replaces the line icon
   ========================================================================== */

/* ---------- 1. home hero art as a photo ---------- */
body.pc .pc-hero-art.photo{background:#050b19}
body.pc .pc-hero-art.photo .glow{display:none}
body.pc .pc-hero-art.photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:56% 44%;
  filter:none;z-index:1;transform-origin:50% 60%}
/* the card's own colour bleeds in from the text side so the seam is a hairline, not a step */
body.pc .pc-hero-art.photo::after{content:"";z-index:2;-webkit-mask-image:none;mask-image:none;
  background:linear-gradient(90deg,rgba(13,22,38,.9) 0,rgba(13,22,38,.32) 12%,rgba(13,22,38,0) 30%),linear-gradient(180deg,rgba(13,22,38,.22),transparent 26%)}
html.pl-light body.pc .pc-hero-art.photo{border-left:1px solid rgba(2,132,199,.18)}
html.pl-light body.pc .pc-hero-art.photo::after{background:linear-gradient(180deg,rgba(5,11,25,.18),transparent 30%)}
@media(prefers-reduced-motion:no-preference){
  body.pc .pc-hero-art.photo img{animation:pcHubDrift 18s ease-in-out infinite alternate}
}
@media(prefers-reduced-motion:reduce){
  body.pc .pc-hero-art.photo img{animation:pcHubDrift 40s ease-in-out infinite alternate !important}
}
@keyframes pcHubDrift{from{transform:scale(1.03) translate(0,0)}to{transform:scale(1.09) translate(-1.6%,-1.2%)}}
/* stacked tier (console-18 goes single-column at 900): a taller band, butterfly kept in frame */
@media(max-width:900px){
  body.pc .pc-hero-art.photo{height:200px}
  body.pc .pc-hero-art.photo img{object-position:50% 30%}
  body.pc .pc-hero-art.photo::after{background:linear-gradient(180deg,rgba(13,22,38,0) 72%,rgba(13,22,38,.5))}
}
@media(max-width:760px){
  body.pc .pc-hero-art.photo{height:176px}
}

/* ---------- 2. domains empty state mark ---------- */
body.pc .pc-domzero .art{position:relative;display:block}
body.pc .pc-domzero .art::before{content:"";position:absolute;inset:6%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(56,189,248,.26),rgba(56,189,248,0) 68%);filter:blur(12px)}
body.pc .pc-domzero .art img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 32px rgba(2,132,199,.28))}
@media(prefers-reduced-motion:no-preference){
  body.pc .pc-domzero .art img{animation:pcDomHover 5.5s ease-in-out infinite alternate}
  body.pc .pc-domzero .art::before{animation:pcHeroGlow 7s ease-in-out infinite alternate}
}
@media(prefers-reduced-motion:reduce){
  body.pc .pc-domzero .art img{animation:pcDomHover 13s ease-in-out infinite alternate !important}
}
@keyframes pcDomHover{from{transform:translateY(3px) rotate(-.6deg)}to{transform:translateY(-6px) rotate(.8deg)}}
/* light mode: the mark sits on its own dark tile - the image edges fade into the same navy */
html.pl-light body.pc .pc-domzero .art{border-radius:34px;background:radial-gradient(circle at 50% 46%,#10224a 0,#0a1529 60%,#091428 100%);
  box-shadow:0 22px 44px -26px rgba(2,132,199,.55),inset 0 0 0 1px rgba(125,211,252,.14)}
html.pl-light body.pc .pc-domzero .art::before{opacity:.7}

/* v337b (2026-09-18): the Gcore-era top bar pieces inside the Papilio look */
body.pc .pl-avatarwrap{display:inline-flex;align-items:center}body.pc .pl-avatarwrap>svg{display:none}body.pc .pl-stylebtn{color:var(--accent)}body.pc .pl-collapse{display:none}