/* ======================================================================================================
   ASTORRE X — PORTAL SKIN
   The products portal wears the same clothes as the public sites. Every value below is the launch design
   system's (https://astorrex.com/assets/ax/ax.css, owned by the website workstream) — near-black space,
   ice-cyan signal light, hairlines, mono capitals, one accent per product. Nothing structural is changed:
   this file is loaded last and only re-paints what ac-flagship.css and the page styles already draw, so a
   page that is removed from the portal takes its skin with it and nothing here can break a flow.
   Motion is transform/opacity only, and stops under prefers-reduced-motion.
   ====================================================================================================== */
:root{
  --ax-void:#010406;--ax-deep:#03101a;
  --ax-ink:#eef8fa;--ax-sub:#bccbd0;--ax-muted:#8aa1a8;--ax-dim:#6a8188;
  --ax-line:rgba(140,228,245,.13);--ax-line-2:rgba(140,228,245,.24);--ax-line-3:rgba(140,228,245,.42);
  --ax-glass:rgba(140,228,245,.045);
  --ax-cyan:#8ce4f5;--ax-ice:#e9fdff;--ax-blue:#82b4ff;
  --ax-panel:linear-gradient(180deg,rgba(11,29,37,.78),rgba(3,11,15,.9));
  --ax-accent:#8ce4f5;--ax-accent-rgb:140,228,245;
  --ax-font:Inter,"Inter var","Segoe UI Variable Display","Segoe UI Variable Text",-apple-system,BlinkMacSystemFont,"SF Pro Display",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ax-mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace;
  --ax-math:"Cambria Math","STIX Two Math","Latin Modern Math",Cambria,"Times New Roman",Georgia,serif;
  --ax-r:18px;--ax-ease:cubic-bezier(.2,.7,.2,1);
  /* the portal's own tokens, re-pointed at the kit */
  --ac-bg:var(--ax-void);--ac-bg-soft:var(--ax-deep);
  --ac-surface:rgba(11,29,37,.78);--ac-surface-2:rgba(3,11,15,.9);
  --ac-surface-3:rgba(140,228,245,.06);--ac-surface-4:rgba(140,228,245,.045);
  --ac-line:var(--ax-line);--ac-line-soft:rgba(140,228,245,.07);--ac-line-dark:var(--ax-line);
  --ac-text:var(--ax-ink);--ac-text-soft:var(--ax-sub);--ac-text-muted:var(--ax-muted);
  --ac-text-dark:var(--ax-ink);--ac-text-dark-soft:var(--ax-sub);
  --ac-btn-primary-bg:var(--ax-ice);--ac-btn-primary-text:#021015;--ac-btn-primary-border:transparent;
  --ac-btn-secondary-bg:transparent;--ac-btn-secondary-text:var(--ax-ice);--ac-btn-secondary-border:rgba(140,228,245,.42);
  --ac-radius-sm:12px;--ac-radius-md:var(--ax-r);--ac-radius-lg:var(--ax-r);--ac-radius-xl:22px;
  --ac-shadow-soft:0 18px 50px -24px rgba(0,0,0,.9);
  --ac-shadow-strong:0 30px 80px -40px rgba(0,0,0,1);
}
/* ---------------------------------------------------------------- space: the kit's field, fixed behind */
html,body{background:var(--ax-void);color:var(--ax-ink);font-family:var(--ax-font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{background-image:
  radial-gradient(1100px 700px at 82% -8%,rgba(46,128,150,.2),transparent 62%),
  radial-gradient(900px 640px at -10% 34%,rgba(48,82,140,.12),transparent 66%),
  radial-gradient(800px 600px at 60% 108%,rgba(var(--ax-accent-rgb),.07),transparent 70%),
  linear-gradient(180deg,#020609 0%,#010406 48%,#02070a 100%);
  background-attachment:fixed}
html::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;opacity:.5;background:
  linear-gradient(11deg,transparent 0 31%,rgba(140,228,245,.1) 31.06%,rgba(233,253,255,.22) 31.1%,transparent 31.2% 100%),
  linear-gradient(-8deg,transparent 0 74%,rgba(140,228,245,.08) 74.06%,rgba(233,253,255,.18) 74.1%,transparent 74.2% 100%)}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.8;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' fill='none' stroke='%238ce4f5' stroke-width='1' stroke-opacity='.8'%3E%3Cpath d='M0 64h104l40 40h196'/%3E%3Cpath d='M64 0v84l40 40v216'/%3E%3Cpath d='M340 216H236l-40-40H92'/%3E%3Cpath d='M256 340V236l40-40V44'/%3E%3Cpath d='M0 272h60l32-32'/%3E%3Cpath d='M172 0v36l28 28h140'/%3E%3Ccircle cx='104' cy='64' r='2.5' fill='%238ce4f5' stroke='none'/%3E%3Ccircle cx='196' cy='176' r='2.5' fill='%238ce4f5' stroke='none'/%3E%3Ccircle cx='296' cy='196' r='2.5' fill='%238ce4f5' stroke='none'/%3E%3Ccircle cx='92' cy='240' r='2.5' fill='%238ce4f5' stroke='none'/%3E%3Ccircle cx='200' cy='64' r='2.5' fill='%238ce4f5' stroke='none'/%3E%3C/svg%3E");
  mask-image:radial-gradient(130% 110% at 82% 2%,#000 10%,rgba(0,0,0,.45) 46%,transparent 82%);
  -webkit-mask-image:radial-gradient(130% 110% at 82% 2%,#000 10%,rgba(0,0,0,.45) 46%,transparent 82%)}
body::after{content:"";position:fixed;z-index:-1;pointer-events:none;right:-150px;bottom:-200px;width:640px;height:640px;
  border-radius:50%;opacity:.8;background:
    radial-gradient(circle at 34% 30%,rgba(140,228,245,.2),rgba(11,29,37,.14) 46%,transparent 68%),
    radial-gradient(circle at 50% 50%,rgba(3,11,15,.9),rgba(1,4,6,0) 70%)}
/* ---------------------------------------------------------------- shell, sidebar, the mark */
.ac-portal-shell{background:transparent;color:var(--ax-ink)}
.ac-portal-sidebar{background:linear-gradient(180deg,rgba(140,228,245,.05),rgba(140,228,245,.015));
  border-color:var(--ax-line)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.ac-portal-brand-logo{border-radius:50%;background:radial-gradient(circle at 34% 28%,rgba(140,228,245,.18),rgba(255,255,255,.01) 64%);
  border:1px solid var(--ax-line-2);box-shadow:0 0 24px -6px rgba(var(--ax-accent-rgb),.5)}
.ac-portal-brand-title{font-weight:340;font-size:20px;letter-spacing:.2em;text-transform:uppercase;color:transparent;
  background:linear-gradient(180deg,#fff 0%,#eef8fa 46%,#a9bec4 100%);-webkit-background-clip:text;background-clip:text}
.ac-portal-brand-sub{font:700 9.5px/1.7 var(--ax-mono)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--ax-dim)}
.ac-portal-user{border-radius:var(--ax-r);background:var(--ax-panel);border:1px solid var(--ax-line);
  box-shadow:var(--ac-shadow-soft);position:relative;overflow:hidden}
.ac-portal-user::before{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--ax-line-3),transparent)}
.ac-portal-user .name{font-weight:700;font-size:17px;letter-spacing:-.025em;color:var(--ax-ink)}
.ac-portal-user .meta{font-family:var(--ax-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ax-muted);line-height:1.8}
.ac-portal-nav{gap:6px}
.ac-portal-nav a,.ac-portal-nav span.ax-nav-product{border-radius:12px;padding:12px 14px;font-size:14px;font-weight:600;
  letter-spacing:-.005em;background:rgba(140,228,245,.035);border:1px solid var(--ax-line);color:var(--ax-sub);
  transition:transform .2s var(--ax-ease),background .2s,border-color .2s,color .2s}
.ac-portal-nav a:hover{transform:translateY(-1px);background:rgba(140,228,245,.075);color:var(--ax-ink)}
.ac-portal-nav a.is-active{position:relative;background:linear-gradient(135deg,rgba(var(--ax-accent-rgb),.16),rgba(140,228,245,.04));
  border-color:var(--ax-line-2);color:var(--ax-ice);box-shadow:0 0 30px -12px rgba(var(--ax-accent-rgb),.5)}
.ac-portal-nav a.is-active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--ax-ice),var(--ax-cyan));box-shadow:0 0 12px rgba(var(--ax-accent-rgb),.8)}
.ac-portal-nav span.ax-nav-product{border-style:dashed;color:var(--ax-dim);background:rgba(140,228,245,.02)}
.ac-portal-nav .ax-nav-section{font:700 9.5px/1.5 var(--ax-mono);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ax-accent);margin:16px 2px 4px}
.ac-portal-nav .ax-nav-badge{font:700 9px/1.5 var(--ax-mono);letter-spacing:.14em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid var(--ax-line-2);color:var(--ax-muted)}
.ac-portal-nav a.ax-nav-product .ax-nav-badge{color:#74ecc8;border-color:rgba(116,236,200,.32)}
.ac-portal-nav a.ax-nav-product.is-active .ax-nav-badge{color:var(--ax-ice);border-color:var(--ax-line-3)}
/* ---------------------------------------------------------------- surfaces */
.ac-card-dark,.ac-panel-dark,.ac-card-light,.ac-panel-light,
.tenant-dash .hero-card,.tenant-dash .stat-card,.tenant-dash .ops-wrap,.tenant-dash .meta-card,
.ax-card,.stat-card,.meta-card,.ops-wrap,.hero-card{
  background:var(--ax-panel)!important;border:1px solid var(--ax-line)!important;color:var(--ax-ink);
  box-shadow:var(--ac-shadow-soft)!important;border-radius:var(--ax-r)}
.ax-card.is-locked{background:linear-gradient(180deg,rgba(11,29,37,.5),rgba(3,11,15,.72))!important;
  border-color:var(--ac-line-soft)!important}
.ac-card-dark,.ac-panel-dark,.ax-card,.stat-card,.meta-card,.hero-card,.ops-wrap{position:relative;overflow:hidden}
.ac-card-dark::before,.ac-panel-dark::before,.ax-card::before,.stat-card::before,.meta-card::before,
.hero-card::before,.ops-wrap::before{content:"";position:absolute;left:20px;right:20px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ax-line-3),transparent)}
.ax-card{transition:transform .2s var(--ax-ease),border-color .2s,box-shadow .3s}
a.ax-card:hover,.ax-card:hover{border-color:var(--ax-line-2)!important;transform:translateY(-2px);
  box-shadow:0 0 30px rgba(var(--ax-accent-rgb),.14)!important}
/* ---------------------------------------------------------------- type */
h1,.ac-title-xl,.tenant-dash .hero-title,.ax-products h1{letter-spacing:-.045em;font-weight:820;line-height:1}
h2,.ac-title-lg,.card-title,.ops-title{letter-spacing:-.035em;font-weight:790;line-height:1.08;color:var(--ax-ink)}
h3,.ac-title-md{letter-spacing:-.018em;font-weight:720}
.tenant-dash .hero-title{font-size:clamp(34px,7vw,58px);color:transparent!important;-webkit-text-fill-color:transparent;
  background:linear-gradient(96deg,#d6f8ff 0%,var(--ax-accent) 46%,#79a9ff 100%);
  -webkit-background-clip:text;background-clip:text;padding-bottom:.06em;line-height:1.06}
.ac-lead,.ax-lead,.tenant-dash .hero-lead,.tenant-dash .ops-lead,.card-text,.ax-desc,.meta-note,.ax-note{
  color:var(--ax-sub);line-height:1.7}
.ax-note,.ax-plan,.meta-note{color:var(--ax-muted)}
.tenant-dash .hero-kicker,.tenant-dash .ops-kicker{min-height:0;padding:0;border:0;background:none;border-radius:0;
  font:700 11px/1.2 var(--ax-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ax-accent);
  display:inline-flex;align-items:center;gap:10px}
.tenant-dash .hero-kicker::before,.tenant-dash .ops-kicker::before{content:"";width:6px;height:6px;flex:none;
  border-radius:50%;background:var(--ax-ice);box-shadow:0 0 0 3px rgba(var(--ax-accent-rgb),.14),0 0 12px rgba(var(--ax-accent-rgb),.9)}
.stat-label,.ac-stat-label,.meta-key,.ax-ent dt{font:700 9.5px/1.5 var(--ax-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ax-dim)}
.stat-value,.ac-stat-value{font-weight:300;letter-spacing:-.05em;color:var(--ax-ink);font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgba(var(--ax-accent-rgb),.28)}
.stat-note,.ac-stat-note{color:var(--ax-muted);font-size:11.5px}
.meta-val,.ax-ent dd{color:var(--ax-sub)}
.meta-row{border-color:var(--ac-line-soft)}
/* ---------------------------------------------------------------- buttons */
.ac-btn,.btn,.ax-btn{border-radius:12px;font-family:var(--ax-font);font-weight:700;letter-spacing:.005em;
  transition:transform .2s var(--ax-ease),box-shadow .2s,border-color .2s,background .2s,color .2s}
.ac-btn,.btn{min-height:48px}
.ax-btn{padding:0 20px;min-height:44px;font-size:14px}
.ac-btn-primary,.btn-primary,.ax-btn-primary,button.ax-btn-primary{color:#021015!important;border-color:transparent!important;
  background:linear-gradient(135deg,#f2fdff 0%,#c4f3fc 42%,var(--ax-accent) 100%)!important;
  box-shadow:0 0 0 1px rgba(233,253,255,.25) inset,0 10px 34px rgba(var(--ax-accent-rgb),.22)}
.ac-btn-primary:hover,.btn-primary:hover,.ax-btn-primary:hover{opacity:1;transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(233,253,255,.4) inset,0 16px 44px rgba(var(--ax-accent-rgb),.32)}
.ac-btn-secondary,.btn-secondary,.ax-btn-ghost{color:var(--ax-ice)!important;
  background:linear-gradient(135deg,rgba(var(--ax-accent-rgb),.1),rgba(255,255,255,.015))!important;
  border:1px solid rgba(var(--ax-accent-rgb),.42)!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ac-btn-secondary:hover,.btn-secondary:hover,.ax-btn-ghost:hover{border-color:rgba(var(--ax-accent-rgb),.8)!important;
  box-shadow:0 0 30px rgba(var(--ax-accent-rgb),.14);transform:translateY(-1px)}
.ax-btn-off{border:1px dashed var(--ax-line)!important;color:var(--ax-dim)!important;background:none!important}
/* ---------------------------------------------------------------- chips, notices, fields, tables */
.ac-badge,.badge,.ax-badge{border-radius:999px;font:700 9.5px/1.5 var(--ax-mono);letter-spacing:.16em;
  text-transform:uppercase;padding:5px 12px;border:1px solid var(--ax-line-2);color:var(--ax-muted);background:rgba(140,228,245,.05)}
.ax-badge.active{color:#74ecc8;border-color:rgba(116,236,200,.32);background:rgba(116,236,200,.08)}
.ax-badge.verify{color:var(--ax-cyan);border-color:var(--ax-line-2);background:rgba(140,228,245,.08)}
.ax-badge.pending{color:#f0cf86;border-color:rgba(240,207,134,.3);background:rgba(240,207,134,.08)}
.ax-badge.locked,.ax-badge.soon,.ax-badge.paused{color:var(--ax-dim);border-color:var(--ax-line)}
.ac-notice,.notice{background:rgba(140,228,245,.06);border:1px solid var(--ax-line);border-left:2px solid var(--ax-cyan);
  border-radius:12px;color:var(--ax-sub)}
.error,.err,.action-error{background:rgba(255,158,138,.1);border:1px solid rgba(255,158,138,.28);
  border-left:2px solid #ff9e8a;border-radius:12px;color:#ff9e8a}
/* a tick box is not a text field: the skin's field frame would draw a box around the native control */
input:not([type=checkbox]):not([type=radio]),select,textarea{background:rgba(140,228,245,.04);border:1px solid var(--ax-line);color:var(--ax-ink);
  border-radius:10px;transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:rgba(var(--ax-accent-rgb),.6);
  background:rgba(140,228,245,.07);box-shadow:0 0 0 3px rgba(var(--ax-accent-rgb),.16)}
input::placeholder,textarea::placeholder{color:var(--ax-dim)}
select option{background:#03101a;color:var(--ax-ink)}
:focus-visible{outline:2px solid var(--ax-ice);outline-offset:3px;border-radius:6px}
table{border-color:var(--ax-line)}
th{font:700 9.5px/1.5 var(--ax-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ax-dim)}
td{color:var(--ax-sub);border-color:var(--ac-line-soft)}
a{color:var(--ax-cyan)}
a:hover{color:var(--ax-ice)}
/* the mark, wherever the portal writes it: ASTORRE with the X as a mathematical exponent */
.ax-mark-x{display:inline-block;position:relative;top:-.84em;margin-left:-.26em;font-size:.56em;line-height:1;
  font-family:var(--ax-math);font-style:italic;font-weight:400;letter-spacing:0;text-transform:none;color:transparent;
  background:linear-gradient(140deg,#fff 0%,#d9f8ff 38%,#8ce4f5 72%,#4fb4cb 100%);-webkit-background-clip:text;
  background-clip:text;filter:drop-shadow(0 0 22px rgba(140,228,245,.28))}
@media (max-width:820px){body::before{opacity:.32}body::after{right:-280px;bottom:-320px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{html::before,body::before,body::after{display:none}}
/* ---------------------------------------------------------------- the way in: sign-in and the password flows
   These pages carry their own dark shell. The skin lets the space field through, turns their cards into the
   kit's glass, and writes their labels the way the rest of the family writes them. */
.login-shell,.ac-auth-page .login-shell,.ac-recovery-page .login-shell,.ac-change-password-page .login-shell{
  background:transparent!important}
.login-hero,.login-card{background:var(--ax-panel)!important;border:1px solid var(--ax-line)!important;
  border-radius:var(--ax-r)!important;box-shadow:var(--ac-shadow-soft)!important;position:relative;overflow:hidden}
.login-hero::before,.login-card::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--ax-line-3),transparent)}
.login-brand-logo{border-radius:50%!important;border:1px solid var(--ax-line-2)!important;
  background:radial-gradient(circle at 34% 28%,rgba(140,228,245,.18),rgba(255,255,255,.01) 64%)!important;
  box-shadow:0 0 24px -6px rgba(var(--ax-accent-rgb),.5)}
.login-brand-title{font-weight:340!important;letter-spacing:.2em!important;text-transform:uppercase;color:transparent!important;
  -webkit-text-fill-color:transparent;background:linear-gradient(180deg,#fff 0%,#eef8fa 46%,#a9bec4 100%);
  -webkit-background-clip:text;background-clip:text}
.login-brand-sub,.ac-kicker,.form-label{font-family:var(--ax-mono)!important;font-weight:700!important;
  letter-spacing:.2em!important;text-transform:uppercase;color:var(--ax-dim)!important;font-size:9.5px!important;line-height:1.7!important}
.ac-kicker{color:var(--ax-accent)!important;display:inline-flex;align-items:center;gap:10px}
.ac-kicker::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--ax-ice);
  box-shadow:0 0 0 3px rgba(var(--ax-accent-rgb),.14),0 0 12px rgba(var(--ax-accent-rgb),.9)}
.login-title{letter-spacing:-.045em!important;font-weight:820!important;line-height:1.04!important;
  color:transparent!important;-webkit-text-fill-color:transparent;padding-bottom:.06em;
  background:linear-gradient(96deg,#d6f8ff 0%,var(--ax-accent) 46%,#79a9ff 100%);-webkit-background-clip:text;background-clip:text}
.login-lead,.login-note{color:var(--ax-sub)!important;line-height:1.7}
.login-card h2{letter-spacing:-.035em;font-weight:790;color:var(--ax-ink)}
/* the footer is one quiet sentence, not a label: sentence case, readable size, link in the accent */
.login-foot{font-size:13.5px!important;line-height:1.6!important;color:var(--ax-sub)!important;text-transform:none!important;letter-spacing:0!important}
.login-foot a{color:var(--ax-cyan)!important}
.forgot-link{color:var(--ax-cyan)!important}
.forgot-link:hover{color:var(--ax-ice)!important}
/* ---------------------------------------------------------------- a number you can follow
   A figure on a dashboard is a question: where does it come from? Every stat tile is a link to the page
   that holds the records behind it, so the answer is one click away. The tile keeps the lit top edge and
   drops the stray marker the older sheets printed over the label. */
body:is(.ac-portal-body,.ac-admin-body) :is(.stat-card,.ac-stat,.ac-stat-dark)::before{
  top:0;left:20px;right:20px;width:auto;height:1px;border-radius:0;box-shadow:none;
  background:linear-gradient(90deg,transparent,var(--ax-line-3),transparent)}
a.stat-card{display:block;text-decoration:none;color:inherit;cursor:pointer}
a.stat-card:hover{text-decoration:none;color:inherit;transform:translateY(-2px);
  border-color:var(--ax-line-2)!important;box-shadow:0 0 30px rgba(var(--ax-accent-rgb),.14)!important}
a.stat-card:hover .stat-value{text-shadow:0 0 34px rgba(var(--ax-accent-rgb),.5)}
body:is(.ac-portal-body,.ac-admin-body) a.stat-card::after{content:"";position:absolute;right:20px;bottom:20px;
  left:auto;top:auto;width:9px;height:9px;pointer-events:none;background:none;opacity:1;
  border:0;border-right:1px solid var(--ax-dim);border-top:1px solid var(--ax-dim);transform:rotate(45deg);
  transition:border-color .2s,transform .2s var(--ax-ease)}
body:is(.ac-portal-body,.ac-admin-body) a.stat-card:hover::after{border-color:var(--ax-ice);transform:rotate(45deg) translate(2px,-2px)}
a.stat-card:focus-visible{outline:2px solid var(--ax-ice);outline-offset:3px}
/* ======================================================================================================
   EVERY PAGE, NOT JUST THE SHELL
   The owner's question looking at Opportunity: why doesn't all of it look like this? Because each portal
   page carries its own stylesheet, written before the house had a style, and those sheets load before this
   one but outrank it — their rules are scoped to the page wrapper. So this section answers them in their
   own terms: the same scopes, the kit's values. Nothing below changes a layout, a size or a flow; it only
   decides colour, surface, radius and the shape of a label.
   ====================================================================================================== */
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page,.ac-audit,.ax-products)
 :is(.hero-card,.card,.ocard,.booking-card,.conversation-card,.action-card,.danger-card,.empty-card,.error-card,
     .meta-card,.stat-card,.ops-wrap,.grid>.card,.panel,.tile,.filter,.list>li){
  background:var(--ax-panel)!important;border:1px solid var(--ax-line)!important;color:var(--ax-ink);
  border-radius:var(--ax-r)!important;box-shadow:var(--ac-shadow-soft)!important;position:relative}
:is(.tenant-dash,.bookings-page,.security-page,.assistant-conv,.calendar-page,.ax-products)
 :is(.hero-card,.card,.booking-card,.conversation-card,.action-card,.meta-card,.stat-card,.ops-wrap)::before{
  content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;width:auto;border-radius:0;box-shadow:none;
  pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--ax-accent-rgb),.55),transparent)}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page)
 :is(.hero-kicker,.ops-kicker,.ac-kicker,.kicker){min-height:0!important;padding:0!important;border:0!important;
  background:none!important;border-radius:0!important;display:inline-flex;align-items:center;gap:10px;
  font:700 11px/1.2 var(--ax-mono)!important;letter-spacing:.22em!important;text-transform:uppercase;
  color:var(--ax-accent)!important;margin-bottom:16px}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page)
 :is(.hero-kicker,.ops-kicker,.ac-kicker,.kicker)::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--ax-ice);box-shadow:0 0 0 3px rgba(var(--ax-accent-rgb),.14),0 0 12px rgba(var(--ax-accent-rgb),.9)}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page,.ax-products)
 :is(.hero-title,h1){letter-spacing:-.045em!important;font-weight:820!important;line-height:1.06!important;
  padding-bottom:.06em;color:transparent!important;-webkit-text-fill-color:transparent;
  background:linear-gradient(96deg,#d6f8ff 0%,var(--ax-accent) 46%,#79a9ff 100%);
  -webkit-background-clip:text;background-clip:text}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page,.ax-products)
 :is(.card-title,.ops-title,.booking-name,h2){letter-spacing:-.035em;font-weight:790;color:var(--ax-ink)}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page,.ax-products)
 :is(.hero-lead,.ops-lead,.card-text,.meta-note,.lead,.conversation-preview,.full-text,p){color:var(--ax-sub)}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page)
 :is(.meta-key,.stat-label,.label,.field-label,.preview-label,dt){font:700 9.5px/1.5 var(--ax-mono)!important;
  letter-spacing:.18em!important;text-transform:uppercase;color:var(--ax-dim)!important}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page)
 :is(.meta-val,.meta-row,dd){color:var(--ax-sub)}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page)
 :is(.stat-value,.stat-main){font-weight:300!important;letter-spacing:-.05em!important;color:var(--ax-ink)!important;
  font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(var(--ax-accent-rgb),.28)}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page)
 :is(.code,.mono,code,pre){font-family:var(--ax-mono)!important;color:var(--ax-sub)!important;
  background:rgba(0,0,0,.35)!important;border:1px solid var(--ax-line-soft)!important;border-radius:8px!important}
/* buttons and chips inside those pages, in the kit's shapes */
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page,.ax-products)
 :is(.btn,.ac-btn,button,input[type=submit]){border-radius:12px!important;font-family:var(--ax-font)!important;
  font-weight:700!important;letter-spacing:.005em!important;text-transform:none!important;color:#021015!important;
  border:1px solid transparent!important;
  background:linear-gradient(135deg,#f2fdff 0%,#c4f3fc 42%,var(--ax-accent) 100%)!important;
  box-shadow:0 0 0 1px rgba(233,253,255,.25) inset,0 10px 34px rgba(var(--ax-accent-rgb),.22);
  transition:transform .2s var(--ax-ease),box-shadow .2s,border-color .2s}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page,.ax-products)
 :is(.btn,.ac-btn,button,input[type=submit]):hover{transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(233,253,255,.4) inset,0 16px 44px rgba(var(--ax-accent-rgb),.32)}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page,.ax-products)
 :is(.btn.ghost,.btn-secondary,.btn.secondary,.ac-btn-secondary,.btn-ghost,.danger-card .btn){
  color:var(--ax-ice)!important;border:1px solid rgba(var(--ax-accent-rgb),.42)!important;
  background:linear-gradient(135deg,rgba(var(--ax-accent-rgb),.1),rgba(255,255,255,.015))!important;box-shadow:none}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page)
 .badge{border-radius:999px!important;font:700 9.5px/1.5 var(--ax-mono)!important;letter-spacing:.16em!important;
  text-transform:uppercase;padding:5px 12px!important;border:1px solid var(--ax-line-2)!important;
  color:var(--ax-muted)!important;background:rgba(140,228,245,.05)!important;display:inline-flex;align-items:center;gap:8px}
:is(.tenant-dash,.bookings-page,.leads,.security-page,.assistant-conv,.analytics,.automation,.calendar-page)
 .badge::before{content:"";width:5px!important;height:5px!important;border-radius:50%;flex:none;display:block;
  background:currentColor!important;box-shadow:0 0 8px currentColor}
:is(.bookings-page,.assistant-conv,.security-page,.calendar-page) :is(.badge.ok,.badge.confirmed,.badge.active,.badge.assistant){
  color:#74ecc8!important;border-color:rgba(116,236,200,.32)!important;background:rgba(116,236,200,.08)!important}
:is(.bookings-page,.assistant-conv,.security-page,.calendar-page) :is(.badge.pending,.badge.submitted,.badge.staff){
  color:#f0cf86!important;border-color:rgba(240,207,134,.3)!important;background:rgba(240,207,134,.08)!important}
:is(.bookings-page,.assistant-conv,.security-page,.calendar-page) :is(.badge.rejected,.badge.cancelled,.badge.danger){
  color:#ff9e8a!important;border-color:rgba(255,158,138,.28)!important;background:rgba(255,158,138,.1)!important}
:is(.security-page,.bookings-page) .danger-card{border-color:rgba(255,158,138,.28)!important;
  background:linear-gradient(180deg,rgba(255,158,138,.08),rgba(3,11,15,.9))!important}
/* the first-run guide on a product page */
.ax-fr,.ax-fr-banner,.ax-fr-item,.ax-fr-states{border-color:var(--ax-line)!important}
.ax-fr-banner{background:linear-gradient(135deg,rgba(var(--ax-accent-rgb),.14),rgba(140,228,245,.03))!important;
  border-radius:12px!important;color:var(--ax-ink)!important}
.ax-fr-n{background:rgba(var(--ax-accent-rgb),.16)!important;color:var(--ax-ice)!important;border:1px solid var(--ax-line-2)!important}
.ax-fr-steps li.is-done .ax-fr-n{background:rgba(116,236,200,.16)!important;color:#74ecc8!important;
  border-color:rgba(116,236,200,.32)!important}
.ax-fr-limits dt{font:700 9.5px/1.5 var(--ax-mono)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--ax-dim)!important}
.ax-fr-help,.ax-fr-lead{color:var(--ax-sub)!important}
/* the sky is drawn in ax_sky.php now; body::after keeps only the deep nebula wash behind it */
body::after{inset:0!important;right:auto!important;bottom:auto!important;width:auto!important;height:auto!important;
  border-radius:0!important;opacity:1!important;animation:none;background:
    radial-gradient(900px 620px at 88% 70%,rgba(57,127,144,.16),transparent 66%),
    radial-gradient(760px 520px at 6% 88%,rgba(140,228,245,.1),transparent 64%),
    radial-gradient(700px 480px at 72% 6%,rgba(130,180,255,.1),transparent 62%)}
/* a current along the seam of the sidebar, the portal's own topbar hairline */
.ac-portal-sidebar::after{content:"";position:absolute;top:0;bottom:0;right:-1px;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(233,253,255,.9) 50%,transparent 100%);
  background-size:100% 30%;background-repeat:no-repeat;opacity:.55;animation:ax-current 9s linear infinite}
@keyframes ax-current{from{background-position:0 -30%}to{background-position:0 130%}}
@media (prefers-reduced-motion:reduce){body::after,.ac-portal-sidebar::after{animation:none!important}}
/* ======================================================================================================
   THE ADMIN SIDE, AND THE BEAMS BETWEEN THE PLANETS
   The owner, on the admin portal: it must look as good as the rest, with planets in the background and
   beams of light running between them, as if the planets were talking to each other. The beams are an
   inline SVG the two layouts drop in (.ax-sky), so they can be drawn and animated properly rather than
   faked with gradients; they move by stroke-dashoffset and opacity only, and stop under reduced motion.
   ====================================================================================================== */
.ax-sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ax-sky svg{position:absolute;inset:0;width:100%;height:100%}
.ax-sky .ax-beam{fill:none;stroke:url(#axBeam);stroke-width:1.2;stroke-linecap:round;opacity:.85}
.ax-sky .ax-pulse{fill:none;stroke:var(--ax-ice);stroke-width:1.8;stroke-linecap:round;
  stroke-dasharray:26 1400;filter:drop-shadow(0 0 7px rgba(var(--ax-accent-rgb),.95));
  animation:ax-pulse 11s linear infinite}
.ax-sky .ax-pulse.b2{animation-duration:14s;animation-delay:2.4s}
.ax-sky .ax-pulse.b3{animation-duration:9.5s;animation-delay:5.1s}
.ax-sky .ax-pulse.b4{animation-duration:16s;animation-delay:7.6s}
.ax-sky .ax-node{fill:var(--ax-ice);opacity:.7;animation:ax-node 4.5s ease-in-out infinite}
.ax-sky .ax-node.n2{animation-delay:1.3s}
.ax-sky .ax-node.n3{animation-delay:2.6s}
@keyframes ax-pulse{from{stroke-dashoffset:1426}to{stroke-dashoffset:0}}
@keyframes ax-node{0%,100%{opacity:.3}50%{opacity:.9}}
@media (prefers-reduced-motion:reduce){.ax-sky .ax-pulse,.ax-sky .ax-node{animation:none!important}
  .ax-sky .ax-pulse{opacity:0}}
@media print{.ax-sky{display:none}}
/* the admin shell, in the same clothes as the customer one */
.ac-admin-shell{background:transparent!important;color:var(--ax-ink)}
.ac-admin-sidebar{background:linear-gradient(180deg,rgba(140,228,245,.05),rgba(140,228,245,.015))!important;
  border-color:var(--ax-line)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:relative}
.ac-admin-sidebar::after{content:"";position:absolute;top:0;bottom:0;right:-1px;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(233,253,255,.9) 50%,transparent 100%);
  background-size:100% 30%;background-repeat:no-repeat;opacity:.55;animation:ax-current 9s linear infinite}
.ac-admin-brand-logo{border-radius:50%!important;border:1px solid var(--ax-line-2)!important;
  background:radial-gradient(circle at 34% 28%,rgba(140,228,245,.18),rgba(255,255,255,.01) 64%)!important;
  box-shadow:0 0 24px -6px rgba(var(--ax-accent-rgb),.5)}
.ac-admin-brand-title{font-weight:340!important;letter-spacing:.2em!important;text-transform:uppercase;
  color:transparent!important;-webkit-text-fill-color:transparent;
  background:linear-gradient(180deg,#fff 0%,#eef8fa 46%,#a9bec4 100%);-webkit-background-clip:text;background-clip:text}
.ac-admin-brand-sub{font:700 9.5px/1.7 var(--ax-mono)!important;letter-spacing:.18em!important;
  text-transform:uppercase;color:var(--ax-dim)!important}
.ac-admin-user{border-radius:var(--ax-r)!important;background:var(--ax-panel)!important;
  border:1px solid var(--ax-line)!important;box-shadow:var(--ac-shadow-soft)!important}
.ac-admin-user .name{font-weight:700;letter-spacing:-.025em;color:var(--ax-ink)}
.ac-admin-user .meta{font-family:var(--ax-mono);font-size:11.5px;letter-spacing:.04em;color:var(--ax-muted)}
.ac-admin-nav a{border-radius:12px!important;padding:12px 14px!important;font-size:14px!important;font-weight:600!important;
  background:rgba(140,228,245,.035)!important;border:1px solid var(--ax-line)!important;color:var(--ax-sub)!important;
  transition:transform .2s var(--ax-ease),background .2s,border-color .2s,color .2s}
.ac-admin-nav a:hover{transform:translateY(-1px);background:rgba(140,228,245,.075)!important;color:var(--ax-ink)!important}
.ac-admin-nav a.is-active{position:relative;color:var(--ax-ice)!important;border-color:var(--ax-line-2)!important;
  background:linear-gradient(135deg,rgba(var(--ax-accent-rgb),.16),rgba(140,228,245,.04))!important;
  box-shadow:0 0 30px -12px rgba(var(--ax-accent-rgb),.5)}
.ac-admin-nav a.is-active::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--ax-ice),var(--ax-cyan));box-shadow:0 0 12px rgba(var(--ax-accent-rgb),.8)}
.ac-admin-nav .ax-nav-section,.ac-admin-nav .nav-section{font:700 9.5px/1.5 var(--ax-mono)!important;
  letter-spacing:.22em!important;text-transform:uppercase;color:var(--ax-accent)!important}
/* admin pages speak the same vocabulary as the customer ones, so they get the same answers */
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password,.ac-admin-main-inner)
 :is(.hero-card,.hero-block,.card,.op-card,.stat-card,.meta-card,.ops-wrap,.panel,.tile,.filter){
  background:var(--ax-panel)!important;border:1px solid var(--ax-line)!important;color:var(--ax-ink);
  border-radius:var(--ax-r)!important;box-shadow:var(--ac-shadow-soft)!important;position:relative}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password)
 :is(.hero-card,.hero-block,.card,.op-card,.stat-card,.meta-card,.ops-wrap)::before{
  content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;width:auto;border-radius:0;box-shadow:none;
  pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--ax-accent-rgb),.55),transparent)}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password)
 :is(.hero-kicker,.ops-kicker,.kicker){min-height:0!important;padding:0!important;border:0!important;background:none!important;
  border-radius:0!important;display:inline-flex;align-items:center;gap:10px;font:700 11px/1.2 var(--ax-mono)!important;
  letter-spacing:.22em!important;text-transform:uppercase;color:var(--ax-accent)!important;margin-bottom:16px}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password)
 :is(.hero-kicker,.ops-kicker,.kicker)::before{content:"";width:6px;height:6px;flex:none;border-radius:50%;
  background:var(--ax-ice);box-shadow:0 0 0 3px rgba(var(--ax-accent-rgb),.14),0 0 12px rgba(var(--ax-accent-rgb),.9)}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password) :is(.hero-title,h1){
  letter-spacing:-.045em!important;font-weight:820!important;line-height:1.06!important;padding-bottom:.06em;
  color:transparent!important;-webkit-text-fill-color:transparent;
  background:linear-gradient(96deg,#d6f8ff 0%,var(--ax-accent) 46%,#79a9ff 100%);-webkit-background-clip:text;background-clip:text}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password) :is(.op-title,.card-title,h2){
  letter-spacing:-.035em;font-weight:790;color:var(--ax-ink)}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password)
 :is(.hero-lead,.op-text,.op-note,.card-text,.meta-note,p){color:var(--ax-sub)}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password)
 :is(.stat-label,.meta-key,.label,dt,th){font:700 9.5px/1.5 var(--ax-mono)!important;letter-spacing:.18em!important;
  text-transform:uppercase;color:var(--ax-dim)!important}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password) :is(.stat-value,.stat-main){
  font-weight:300!important;letter-spacing:-.05em!important;color:var(--ax-ink)!important;font-variant-numeric:tabular-nums;
  text-shadow:0 0 30px rgba(var(--ax-accent-rgb),.28)}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password)
 :is(.op-btn,.btn,.ac-btn,button,input[type=submit]){border-radius:12px!important;font-family:var(--ax-font)!important;
  font-weight:700!important;letter-spacing:.005em!important;text-transform:none!important;color:#021015!important;
  border:1px solid transparent!important;background:linear-gradient(135deg,#f2fdff 0%,#c4f3fc 42%,var(--ax-accent) 100%)!important;
  box-shadow:0 0 0 1px rgba(233,253,255,.25) inset,0 10px 34px rgba(var(--ax-accent-rgb),.22);
  transition:transform .2s var(--ax-ease),box-shadow .2s}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password)
 :is(.op-btn,.btn,.ac-btn,button,input[type=submit]):hover{transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(233,253,255,.4) inset,0 16px 44px rgba(var(--ax-accent-rgb),.32)}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password) :is(.op-btn.ghost,.btn.ghost,.btn-secondary){
  color:var(--ax-ice)!important;border:1px solid rgba(var(--ax-accent-rgb),.42)!important;box-shadow:none;
  background:linear-gradient(135deg,rgba(var(--ax-accent-rgb),.1),rgba(255,255,255,.015))!important}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password) .badge{
  border-radius:999px!important;font:700 9.5px/1.5 var(--ax-mono)!important;letter-spacing:.16em!important;
  text-transform:uppercase;padding:5px 12px!important;border:1px solid var(--ax-line-2)!important;
  color:var(--ax-muted)!important;background:rgba(140,228,245,.05)!important}
:is(.ac-dashboard,.analytics-page,.ac-audit,.create-tenant-page,.admin-password) :is(.code,code,pre){
  font-family:var(--ax-mono)!important;color:var(--ax-sub)!important;background:rgba(0,0,0,.35)!important;
  border:1px solid var(--ax-line-soft)!important;border-radius:8px!important}
/* the drawn sky: worlds that drift, stars that breathe, beams that carry a pulse between them */
.ax-sky .ax-pulse.b5{animation-duration:12.5s;animation-delay:3.7s}
.ax-sky .ax-stars circle{fill:var(--ax-ice);opacity:.5;animation:ax-twinkle 5.5s ease-in-out infinite}
.ax-sky .ax-stars .t2{animation-duration:7.5s;animation-delay:1.8s}
.ax-sky .ax-stars .t3{animation-duration:9s;animation-delay:3.4s}
.ax-sky .ax-worlds{animation:ax-drift 90s ease-in-out infinite alternate}
.ax-sky .ax-w{transform-box:fill-box;transform-origin:50% 50%}
.ax-sky .ax-w-a{animation:ax-float-a 46s ease-in-out infinite alternate}
.ax-sky .ax-w-b{animation:ax-float-b 62s ease-in-out infinite alternate}
.ax-sky .ax-w-c{animation:ax-float-a 38s ease-in-out infinite alternate-reverse}
.ax-sky .ax-w-d{animation:ax-float-b 34s ease-in-out infinite alternate}
.ax-sky .ax-w-e{animation:ax-float-a 28s ease-in-out infinite alternate-reverse}
.ax-sky .ax-w-f{animation:ax-float-b 31s ease-in-out infinite alternate}
@keyframes ax-twinkle{0%,100%{opacity:.18}50%{opacity:.95}}
@keyframes ax-drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-1.4vw,1.2vh,0)}}
@keyframes ax-float-a{from{transform:translate3d(0,0,0)}to{transform:translate3d(10px,-14px,0)}}
@keyframes ax-float-b{from{transform:translate3d(0,0,0)}to{transform:translate3d(-12px,10px,0)}}
@media (prefers-reduced-motion:reduce){.ax-sky *{animation:none!important}.ax-sky .ax-pulse{opacity:0}}
/* a denser circuit field, and glass that lets the sky through instead of sealing it off */
:root{--ax-panel:linear-gradient(180deg,rgba(11,29,37,.66),rgba(3,11,15,.82))}
body::before{opacity:1;background-size:300px 300px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' fill='none' stroke='%238ce4f5' stroke-opacity='.85' stroke-width='1'%3E%3Cpath d='M0 48h84l28 28h188'/%3E%3Cpath d='M48 0v68l28 28v176'/%3E%3Cpath d='M300 184H196l-32-32H76'/%3E%3Cpath d='M228 300V204l32-32V36'/%3E%3Cpath d='M0 244h44l28-28h92l24 24h112'/%3E%3Cpath d='M140 0v34l24 24h136'/%3E%3Cpath d='M0 120h30l26 26'/%3E%3Cpath d='M300 92h-56l-24 24v40'/%3E%3Cpath d='M96 300v-44l-28-28H0'/%3E%3Cpath d='M184 300v-28l28-28h88'/%3E%3Ccircle cx='84' cy='48' r='2.4' fill='%238ce4f5' stroke='none'/%3E%3Ccircle cx='164' cy='152' r='2.4' fill='%238ce4f5' stroke='none'/%3E%3Ccircle cx='260' cy='172' r='2.4' fill='%238ce4f5' stroke='none'/%3E%3Ccircle cx='72' cy='216' r='2.4' fill='%238ce4f5' stroke='none'/%3E%3Ccircle cx='164' cy='58' r='2.4' fill='%238ce4f5' stroke='none'/%3E%3Ccircle cx='220' cy='116' r='2.4' fill='%238ce4f5' stroke='none'/%3E%3Ccircle cx='68' cy='228' r='2.4' fill='%238ce4f5' stroke='none'/%3E%3C/svg%3E");
  mask-image:radial-gradient(150% 130% at 70% 0%,#000 30%,rgba(0,0,0,.6) 60%,transparent 92%);
  -webkit-mask-image:radial-gradient(150% 130% at 70% 0%,#000 30%,rgba(0,0,0,.6) 60%,transparent 92%)}
/* ---------------------------------------------------------------- glass, actually glass
   The owner: the panels should be glass — blurred, almost transparent — not dark slabs laid over the sky. So the
   surfaces keep only a breath of tint and a hairline, and do their work with a real backdrop blur: what is behind
   them stays visible and in place, softened, the way frosted glass behaves. Text sits on the blur, not on a wash,
   which is what keeps it readable over a moving background. */
:is(.ac-portal-body,.ac-admin-body,.ac-auth-page,body)
 :is(.ac-card-dark,.ac-panel-dark,.ac-card-light,.ac-panel-light,.ax-card,.stat-card,.meta-card,.ops-wrap,
     .hero-card,.hero-block,.op-card,.booking-card,.conversation-card,.action-card,.danger-card,.empty-card,
     .error-card,.ac-portal-user,.ac-admin-user,.login-hero,.login-card,.tfa-card,.tfa-hero,.filter,.panel,.tile){
  background:linear-gradient(180deg,rgba(140,228,245,.075),rgba(140,228,245,.025))!important;
  border:1px solid rgba(140,228,245,.18)!important;
  backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);
  box-shadow:0 24px 60px -34px rgba(0,0,0,.9),0 1px 0 rgba(233,253,255,.06) inset!important}
:is(.ac-portal-body,.ac-admin-body) :is(.ax-card.is-locked,.stat-card.is-muted){
  background:linear-gradient(180deg,rgba(140,228,245,.04),rgba(140,228,245,.012))!important}
:is(.security-page,.bookings-page) .danger-card{
  background:linear-gradient(180deg,rgba(255,158,138,.1),rgba(255,158,138,.02))!important;
  border-color:rgba(255,158,138,.3)!important}
/* the two shells and the sticky chrome get the same treatment, so nothing reads as a solid block */
.ac-portal-sidebar,.ac-admin-sidebar{
  background:linear-gradient(180deg,rgba(140,228,245,.06),rgba(140,228,245,.015))!important;
  backdrop-filter:blur(26px) saturate(1.2);-webkit-backdrop-filter:blur(26px) saturate(1.2)}
.ac-portal-nav a,.ac-admin-nav a,.ac-portal-nav span.ax-nav-product{
  background:rgba(140,228,245,.05)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ac-portal-nav a.is-active,.ac-admin-nav a.is-active{
  background:linear-gradient(135deg,rgba(var(--ax-accent-rgb),.2),rgba(140,228,245,.05))!important}
/* a pane that is nearly transparent needs its content to hold the contrast, so the ink goes up a step */
:is(.ac-portal-body,.ac-admin-body,.ac-auth-page) :is(.card-text,.hero-lead,.ops-lead,.ax-desc,.op-text,.meta-val,.login-lead,p){
  color:#cfe0e6}
:is(.ac-portal-body,.ac-admin-body,.ac-auth-page) :is(.stat-note,.op-note,.ax-note,.meta-note,small){color:#a9bfc7}
/* ======================================================================================================
   THE VIEW FROM THE WINDOW
   The owner wants the admin console to feel like looking out of a ship: worlds at different distances,
   light between them, and the room you are standing in framing the view. Depth is done the way distance
   actually reads — the far worlds are softer, dimmer and drift slowly; the near ones are sharper, brighter
   and drift further — and the frame is a vignette, not a drawing of a window.
   ====================================================================================================== */
.ax-sky{z-index:-1}
.ax-sky .ax-w-b{filter:blur(.7px)}
.ax-sky .ax-w-a{filter:drop-shadow(0 0 26px rgba(140,228,245,.3))}
.ax-sky .ax-w-c{filter:drop-shadow(0 0 22px rgba(130,180,255,.32))}
.ax-sky .ax-w-d{filter:drop-shadow(0 0 18px rgba(240,207,134,.3))}
.ax-sky::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 220px 70px rgba(1,4,6,.78),inset 0 0 60px 10px rgba(1,4,6,.5)}
/* the console looks out of a bigger window: the worlds come closer and the light is stronger */
.ac-admin-body .ax-sky .ax-worlds{transform-origin:62% 54%;animation:ax-drift-wide 120s ease-in-out infinite alternate}
.ac-admin-body .ax-sky .ax-w-a{animation-duration:38s}
.ac-admin-body .ax-sky .ax-w-b{animation-duration:86s}
.ac-admin-body .ax-sky .ax-w-c{animation-duration:30s}
.ac-admin-body .ax-sky .ax-beam{stroke-width:1.5;opacity:1}
.ac-admin-body .ax-sky .ax-pulse{stroke-width:2.2}
.ac-admin-body .ax-sky::after{box-shadow:inset 0 0 260px 90px rgba(1,4,6,.74),inset 0 0 70px 14px rgba(1,4,6,.46)}
.ac-admin-body body::before,.ac-admin-body.ac-admin-body body::before{opacity:1}
@keyframes ax-drift-wide{from{transform:scale(1.14) translate3d(0,0,0)}to{transform:scale(1.2) translate3d(-2.2vw,1.6vh,0)}}
@media (prefers-reduced-motion:reduce){.ac-admin-body .ax-sky .ax-worlds{animation:none!important;transform:scale(1.14)}}
/* a satellite on its orbit, a shooting star now and then, and an aurora that breathes — the three things the
   Astorre X app does behind every screen, kept to transform and opacity so the page stays cheap to draw */
.ax-sky .ax-sat{transform-box:view-box;transform-origin:430px 792px;animation:ax-orbit-sat 13s linear infinite}
.ax-sky .ax-shoot{transform-box:view-box;transform-origin:0 0;opacity:0;animation:ax-shoot 17s ease-in infinite}
@keyframes ax-orbit-sat{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes ax-shoot{0%{opacity:0;transform:translate3d(240px,60px,0) rotate(18deg)}
  2%{opacity:.9}10%{opacity:.9}14%{opacity:0;transform:translate3d(1180px,340px,0) rotate(18deg)}
  100%{opacity:0;transform:translate3d(1180px,340px,0) rotate(18deg)}}
body::after{animation:ax-aurora 26s ease-in-out infinite alternate}
@keyframes ax-aurora{from{opacity:.8;transform:translate3d(0,0,0)}to{opacity:1;transform:translate3d(1.2vw,-1vh,0)}}
@media (prefers-reduced-motion:reduce){.ax-sky .ax-sat,.ax-sky .ax-shoot{animation:none!important}
  .ax-sky .ax-shoot{opacity:0}body::after{animation:none!important}}
/* the console's own colour and its own light: ion blue, and beams that read as plasma rather than wire —
   a white-hot core, a cyan glow around it and a far violet halo, all from shadows so the DOM stays as it is */
.ac-admin-body{--ax-accent:#7ab8ff;--ax-accent-rgb:122,184,255}
.ac-admin-body .ax-sky .ax-beam{stroke:url(#axBeam);
  filter:drop-shadow(0 0 4px rgba(140,228,245,.5)) drop-shadow(0 0 14px rgba(177,140,255,.25))}
.ac-admin-body .ax-sky .ax-pulse{stroke:#f4fbff;
  filter:drop-shadow(0 0 5px rgba(140,228,245,.95)) drop-shadow(0 0 16px rgba(122,184,255,.6)) drop-shadow(0 0 28px rgba(177,140,255,.3))}
.ac-admin-body .ax-sky .ax-node{filter:drop-shadow(0 0 10px rgba(122,184,255,.9))}
/* ======================================================================================================
   PHONES: THE SAME VIEW, NONE OF THE COST
   The owner on a phone: the portal freezes. Three things here are cheap on a desktop GPU and brutal on a
   handset — a fixed background attachment, which forces the whole page to repaint on every scroll frame;
   a backdrop blur on every card, which composites the layer under each one again and again; and CSS
   filters on the sky. So a phone gets the same picture and none of that: the background scrolls normally,
   the glass is a plain translucent fill, the filters are gone, and the sky stops moving. Nothing is
   hidden, nothing is rearranged — it simply costs what a phone can afford.
   ====================================================================================================== */
@media (max-width:900px),(pointer:coarse){
  html,body{background-attachment:scroll!important}
  :is(.ac-portal-body,.ac-admin-body,.ac-auth-page,body)
   :is(.ac-card-dark,.ac-panel-dark,.ac-card-light,.ac-panel-light,.ax-card,.stat-card,.meta-card,.ops-wrap,
       .hero-card,.hero-block,.op-card,.booking-card,.conversation-card,.action-card,.danger-card,.empty-card,
       .error-card,.ac-portal-user,.ac-admin-user,.login-hero,.login-card,.tfa-card,.tfa-hero,.filter,.panel,.tile,
       .ac-portal-sidebar,.ac-admin-sidebar,.ac-portal-nav a,.ac-admin-nav a,.ac-portal-nav span.ax-nav-product,
       .search,.button.secondary,.ac-btn-secondary,.btn.ghost,.ax-btn-ghost){
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  :is(.ac-portal-body,.ac-admin-body,.ac-auth-page,body)
   :is(.ac-card-dark,.ac-panel-dark,.ax-card,.stat-card,.meta-card,.ops-wrap,.hero-card,.hero-block,.op-card,
       .booking-card,.conversation-card,.action-card,.empty-card,.error-card,.ac-portal-user,.ac-admin-user,
       .login-hero,.login-card,.tfa-card,.tfa-hero,.filter,.panel,.tile){
    background:linear-gradient(180deg,rgba(11,29,37,.84),rgba(3,11,15,.92))!important}
  .ac-portal-sidebar,.ac-admin-sidebar{background:linear-gradient(180deg,rgba(11,29,37,.9),rgba(3,11,15,.95))!important}
  .ax-sky .ax-w,.ax-sky .ax-w-a,.ax-sky .ax-w-b,.ax-sky .ax-w-c,.ax-sky .ax-w-d,.ax-sky .ax-node,
  .ac-admin-body .ax-sky .ax-beam,.ac-admin-body .ax-sky .ax-pulse,.ac-admin-body .ax-sky .ax-node{filter:none!important}
  .ax-sky *,body::after,.ac-portal-sidebar::after,.ac-admin-sidebar::after,.button::after{animation:none!important}
  .ax-sky .ax-pulse,.ax-sky .ax-shoot,.ac-portal-sidebar::after,.ac-admin-sidebar::after,.button::after{display:none}
  .ac-admin-body .ax-sky .ax-worlds{transform:scale(1.06)}
  .stat-card,.ax-card,.op-card,.hero-card{box-shadow:0 14px 34px -24px rgba(0,0,0,.9)!important}
  /* a mask on a fixed layer is another per-frame cost; the circuit field just fades instead */
  body::before{mask-image:none!important;-webkit-mask-image:none!important;opacity:.3!important}
}
/* ======================================================================================================
   PHONES: A DOOR, NOT A CONVEYOR BELT
   The owner, opening the portal on his phone: why is the old menu still here? It was the product list laid
   out as a strip that scrolls sideways, cut off at both edges, with the rest of the workspace hidden past
   the fold — the older sheet forces display:flex and overflow-x:auto on that nav at every width.
   On a phone the strip is gone and the same links live behind one button, as a sheet that covers the
   screen: everything reachable, nothing cut in half. The button only appears once the script that opens it
   has run, so a browser without JavaScript keeps today's list and loses nothing.
   ====================================================================================================== */
.ax-nav-toggle{display:none}
@media (max-width:900px){
  .ax-js .ax-nav-toggle{display:inline-flex!important;align-items:center;justify-content:space-between;gap:12px;width:100%;
    min-height:48px;padding:0 16px!important;border-radius:12px!important;cursor:pointer;box-shadow:none!important;
    border:1px solid rgba(var(--ax-accent-rgb),.42)!important;color:var(--ax-ice)!important;
    background:linear-gradient(135deg,rgba(var(--ax-accent-rgb),.14),rgba(255,255,255,.02))!important;
    font:700 13px/1.2 var(--ax-font)!important;letter-spacing:.01em!important;text-transform:none!important}
  /* the shell has no list to hold any more, so it stops reserving a band of empty space: the grid stretched its
     first row to fill the screen, which was fine when that row was a menu and is not when it is one button */
  .ax-js :is(.ac-portal-sidebar,.ac-admin-sidebar){min-height:0!important;padding:10px 12px 12px!important}
  .ax-js :is(.ac-portal-grid,.ac-admin-grid){min-height:0!important;grid-template-rows:auto 1fr}
  .ax-js :is(.ac-portal-shell,.ac-admin-shell){min-height:100vh}
  .ax-nav-toggle .ax-nav-toggle-mark{font:700 9.5px/1 var(--ax-mono);letter-spacing:.18em;text-transform:uppercase;
    color:var(--ax-dim)}
  .ax-js .ac-portal-nav,.ax-js .ac-admin-nav{display:none!important}
  .ax-js .ac-portal-brand-sub,.ax-js .ac-admin-brand-sub{display:none}
  /* a backdrop-filter makes its element a containing block, so anything fixed inside it is fixed to the sidebar and
     not to the screen. While the sheet is open the sidebar gives up its blur, and the sheet covers the page. */
  body.ax-nav-open{overflow:hidden}
  body.ax-nav-open :is(.ac-portal-sidebar,.ac-admin-sidebar){backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;isolation:auto!important}
  body.ax-nav-open :is(.ac-portal-nav,.ac-admin-nav){display:flex!important;flex-direction:column;position:fixed;
    inset:0;z-index:60;margin:0;padding:84px 18px 28px;gap:8px!important;overflow-y:auto;
    background:linear-gradient(180deg,#030b0f,#010406)}
  body.ax-nav-open :is(.ac-portal-nav,.ac-admin-nav) a,
  body.ax-nav-open .ac-portal-nav span.ax-nav-product{min-height:52px;font-size:15px!important;
    padding:14px 16px!important;border-radius:12px!important;flex:0 0 auto}
  body.ax-nav-open .ax-nav-section{margin:18px 2px 6px!important}
  body.ax-nav-open .ax-nav-close{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;
    position:fixed!important;top:14px!important;right:14px!important;left:auto!important;bottom:auto!important;
    z-index:61!important;width:auto!important;min-height:44px!important;padding:0 18px!important;
    border-radius:999px!important;cursor:pointer;box-shadow:none!important;
    border:1px solid var(--ax-line-2)!important;background:rgba(140,228,245,.1)!important;color:var(--ax-ice)!important;
    font:700 10px/1 var(--ax-mono)!important;letter-spacing:.18em!important;text-transform:uppercase!important}
}
.ax-nav-close{display:none}
@media (prefers-reduced-motion:reduce){.ax-nav-toggle,.ax-nav-close{transition:none!important}}
/* ======================================================================================================
   INSIDE THE ASTORRE X APP
   The app draws its own chrome around the page and switches products with its dial, so the portal stops
   drawing a second one: no brand bar, no workspace box, no footer, and the page starts at the top of the
   screen. The app marks its requests in the User-Agent and the shell turns that into one body class — a
   claim about which browser this is, nothing more, and nothing here decides what a customer may see.
   The menu button stays: the app's dial moves between PRODUCTS, while the workspace pages — security,
   invoices, bookings — have no other door.
   ====================================================================================================== */
body.ax-in-app :is(.ac-portal-brand,.ac-admin-brand,.ac-portal-user,.ac-admin-user,footer,.ac-portal-foot){display:none!important}
body.ax-in-app :is(.ac-portal-sidebar,.ac-admin-sidebar){border:0!important;box-shadow:none!important;
  background:transparent!important;padding:10px 12px 0!important}
body.ax-in-app :is(.ac-portal-main-inner,.ac-admin-main-inner){padding-top:6px!important}
body.ax-in-app :is(.ac-portal-grid,.ac-admin-grid){min-height:0!important}
@media (min-width:901px){
  /* the app can be wide on a tablet; the column of links is still the app's job, not the page's */
  body.ax-in-app :is(.ac-portal-grid,.ac-admin-grid){grid-template-columns:1fr!important}
  body.ax-in-app :is(.ac-portal-nav,.ac-admin-nav){display:none!important}
  body.ax-in-app .ax-nav-toggle{display:inline-flex!important;align-items:center;justify-content:space-between;
    gap:12px;width:100%;min-height:48px;padding:0 16px!important;border-radius:12px!important;cursor:pointer;
    border:1px solid rgba(var(--ax-accent-rgb),.42)!important;color:var(--ax-ice)!important;box-shadow:none!important;
    background:linear-gradient(135deg,rgba(var(--ax-accent-rgb),.14),rgba(255,255,255,.02))!important;
    font:700 13px/1.2 var(--ax-font)!important;text-transform:none!important}
  body.ax-in-app.ax-nav-open :is(.ac-portal-nav,.ac-admin-nav){display:flex!important;flex-direction:column;
    position:fixed;inset:0;z-index:60;margin:0;padding:84px 18px 28px;gap:8px!important;overflow-y:auto;
    background:linear-gradient(180deg,#030b0f,#010406)}
  body.ax-in-app.ax-nav-open .ax-nav-close{display:inline-flex!important;position:fixed!important;top:14px!important;
    right:14px!important;z-index:61!important;width:auto!important;min-height:44px!important;padding:0 18px!important;
    border-radius:999px!important;border:1px solid var(--ax-line-2)!important;background:rgba(140,228,245,.1)!important;
    color:var(--ax-ice)!important;font:700 10px/1 var(--ax-mono)!important;letter-spacing:.18em!important}
}