*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#FAFAF8;--bg2:#fff;
  --text:#0A0A0A;--text-s:#5C5854;--text-m:#6E5F52;
  --border:rgba(10,10,10,.08);--border-s:rgba(10,10,10,.14);
  --cap:#C4B5A8;--cap-d:#A89880;
  --cap-f:rgba(196,181,168,.10);--cap-fb:rgba(196,181,168,.18);
  --or:var(--cap);--or-l:var(--cap-d);
  --crit:var(--text);--warn:var(--cap-d);--ok:var(--cap-d);--info:var(--cap-d);
  --faint:rgba(196,181,168,.06);
}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--cap)}
body{font-family:var(--ylux-font-ui),system-ui,sans-serif;background:var(--bg,#FAFAF8)!important;color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
.content,.main{background:var(--bg,#FAFAF8)!important}
button{cursor:pointer;font-family:inherit;border:none;background:none}
a{color:inherit}
.shell{display:flex;height:100vh;overflow:hidden}

/* ── Sidebar ── */
.sidebar{width:200px;min-width:200px;background:var(--bg2);border-right:.5px solid var(--border);display:flex;flex-direction:column;overflow-y:auto}
.sb-brand{padding:20px 16px 14px;border-bottom:.5px solid var(--border)}
.sb-wordmark{display:block;font-family:var(--ylux-font-editorial);font-size:20px;font-weight:400;letter-spacing:.25em;color:var(--text)}
.sb-sub{display:block;font-size:11px;letter-spacing:.2em;color:var(--text-m);text-transform:uppercase;margin-top:3px}
.sb-sec{padding:12px 8px 4px}
.sb-lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cap);padding:0 6px;margin-bottom:4px}
/* Segmented pill switcher — a filled capsule track (cap-tinted) with
   each tab its own pill; the active one floats on --bg2 with a hairline
   border, no underline. Icons are hidden app-wide for a cleaner look;
   .hub-tab-ic stays in the DOM (used elsewhere, e.g. command palette)
   so it's just suppressed here rather than removed at the source. */
.hub-tabs,.pill-track{display:flex;flex-wrap:wrap;gap:2px;background:var(--cap-f);border-radius:999px;padding:4px;margin:0 0 20px;width:fit-content;max-width:100%}
.hub-tab{padding:8px 16px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;border:.5px solid transparent;background:none;border-radius:999px;cursor:pointer;color:var(--text-m);font-family:inherit;transition:all .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.hub-tab:hover{color:var(--text)}
.hub-tab.act{color:var(--text);background:var(--bg2);border-color:var(--border)}
svg.hub-tab-ic{display:none}
.hub-tab-divider{width:10px;flex-shrink:0}
.hub-tab-action{opacity:.6}
.hub-tab-action:hover{opacity:1}
.conn-brand-bar{display:flex;align-items:center;gap:10px;margin:0 0 18px;flex-wrap:wrap}
.conn-brand-lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-m);flex:0 0 auto}
.conn-brand-sel-wrap{flex:0 0 auto;width:220px;max-width:min(220px,100%)}
.conn-brand-sel-wrap select.fi{width:100%;max-width:220px;font-size:11px;padding:6px 10px;background:var(--bg2)}
.conn-brand-hint{font-size:11px;color:var(--text-m);line-height:1.4;flex:1;min-width:0}
.nd .ylux-ic{display:block}
.settings-hub-link{font-size:11px;color:var(--cap);cursor:pointer;text-decoration:none;letter-spacing:.06em}
.settings-hub-link:hover{text-decoration:underline}
.sb-internal-wrap{border-top:.5px solid var(--border);margin-top:4px;padding-top:2px;background:linear-gradient(180deg,rgba(158,125,79,.04) 0%,transparent 48px)}
.sb-internal-wrap>.sb-internal-hdr{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--text-m);padding:14px 6px 6px;margin:0 8px}
.sb-internal-wrap .sb-lbl{color:var(--text-m);letter-spacing:.2em;font-size:11px}
.ni{display:flex;align-items:center;gap:7px;padding:6px 8px;font-size:11.5px;color:var(--text-s);transition:all .12s;width:100%;text-align:left;text-decoration:none}
.ni:hover{background:var(--faint);color:var(--text)}
.ni.act{color:var(--text);box-shadow:inset 2px 0 0 var(--cap)}
.nd{width:15px;height:15px;border-radius:0;flex-shrink:0;background:none !important;display:inline-flex;align-items:center;justify-content:center;opacity:.55}
.ni.act .nd,.ni:hover .nd{opacity:1}
.nbadge{margin-left:auto;font-size:11px;padding:1px 5px;background:var(--cap-f);color:var(--cap-d)}
.nbadge-cap{background:transparent;color:var(--text-m);border:.5px solid var(--border)}
.nbadge-cap.at-limit{color:var(--cap-d);border-color:var(--cap)}
.nbadge-cap:empty{display:none}

/* ── Main ── */
.main{flex:1;overflow-y:auto;display:flex;flex-direction:column;overflow-anchor:none;scroll-behavior:auto}
/* topbar chrome — see ylux.css .lau-topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20;flex-shrink:0}
.tb-l{display:flex;align-items:center}
.tb-r{display:flex;align-items:center}
.tb-tog{display:flex;align-items:center;cursor:pointer;transition:all .12s}
.tb-tog:hover{border-color:var(--cap)}
.tb-tog-dot{transition:all .2s}

/* ── Content ── */
.content{padding:32px 32px 60px;flex:1}
.view{display:none}.view.act{display:block}
.ph{font-family:var(--ylux-font-editorial);font-size:22px;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:var(--text);margin-bottom:16px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ph-left{display:flex;align-items:center;gap:10px}
.ph-right{display:flex;align-items:center;gap:8px;flex-shrink:0;text-transform:none;letter-spacing:normal;font-size:13px}
.dash-head{margin-bottom:8px}
.dash-head .ph{margin-bottom:6px}
.dash-head .ph-hr{margin-bottom:12px}
.dash-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dash-section{margin-bottom:24px}
.dash-onboarding{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.dash-forecast{background:var(--bg2);border:.5px solid var(--border);padding:20px;border-radius:14px}
.dash-forecast-lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-m);margin-bottom:16px}
.dash-chart-area{min-height:120px;position:relative}
.dash-chart-empty{position:relative;height:120px;display:flex;align-items:center;justify-content:center}
.dash-chart-empty svg{position:absolute;inset:0;width:100%;height:100%}
.dash-chart-empty-lbl{position:relative;z-index:1;font-size:11px;color:var(--text-m);text-align:center;max-width:280px;line-height:1.5;padding:0 16px;background:var(--bg2)}
.fc-dot{transition:r .12s ease}
.fc-dot:hover{r:3.5}

/* Dashboard hero row — big Revenue card + stacked Expenses/Net cards,
   the 5-segment status strip below it, the compact forecast-CTA card,
   and the "Next steps" onboarding cards. Shared by both apps' dashboard
   home — same class names in lau_os.html and ylauxi_dashboard.html so a
   restyle here updates both at once. */
/* Elevation matches the reference design 1:1 — a neutral dark-tinted
   shadow isn't a "color scheme" element (every theme uses one regardless
   of accent), so the literal rgba(10,10,10,…) values are safe to port
   directly rather than needing an app-token equivalent. */
.dash-hero-row{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;margin-bottom:16px}
.dash-hero-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(10,10,10,.05),0 4px 12px -4px rgba(10,10,10,.04);padding:28px 30px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;transition:box-shadow .26s,border-color .26s}
.dash-hero-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--text-m);text-transform:uppercase;margin-bottom:12px;display:flex;align-items:center;gap:8px;position:relative}
.dash-hero-lbl svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.dash-hero-val{font-family:var(--ylux-font-editorial);font-size:clamp(38px,6vw,60px);font-weight:200;color:var(--text);line-height:1;letter-spacing:-.02em;position:relative}
.dash-hero-note{margin-top:12px;font-size:12px;color:var(--text-m);position:relative}
.dash-side-stack{display:flex;flex-direction:column;gap:16px}
.dash-side-card{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(10,10,10,.05),0 4px 12px -4px rgba(10,10,10,.04);padding:22px 26px;display:flex;flex-direction:column;justify-content:center;transition:box-shadow .26s,border-color .26s}
.dash-side-lbl{font-size:10.5px;font-weight:600;letter-spacing:.1em;color:var(--text-m);text-transform:uppercase;margin-bottom:8px}
.dash-side-val{font-family:var(--ylux-font-editorial);font-size:28px;font-weight:500;color:var(--text)}

.dash-stat-strip{display:grid;grid-template-columns:repeat(5,1fr);background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(10,10,10,.05),0 4px 12px -4px rgba(10,10,10,.04);margin-bottom:16px;overflow:hidden}
.dash-stat-seg{display:flex;align-items:center;gap:9px;padding:16px 18px;transition:background .2s}
.dash-stat-seg:hover{background:var(--faint)}
.dash-stat-seg+.dash-stat-seg{border-left:1px solid var(--border)}
.dash-stat-dot{width:7px;height:7px;border-radius:50%;background:var(--border-s);flex-shrink:0;transition:box-shadow .2s}
.dash-stat-dot.on{background:var(--warn);box-shadow:0 0 0 3px rgba(184,154,106,.16);animation:dashStatPulse 2.4s ease-in-out infinite}
@keyframes dashStatPulse{0%,100%{box-shadow:0 0 0 3px rgba(184,154,106,.16)}50%{box-shadow:0 0 0 5px rgba(184,154,106,.06)}}
.dash-stat-num{font-family:var(--ylux-font-editorial);font-weight:600;font-size:15px;color:var(--text)}
.dash-stat-lbl{font-size:11.5px;font-weight:500;color:var(--text-m)}

.dash-forecast-card2{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(10,10,10,.05),0 4px 12px -4px rgba(10,10,10,.04);padding:22px 26px;margin-bottom:32px;flex-wrap:wrap}
.dash-forecast-left{display:flex;align-items:center;gap:16px}
.dash-forecast-icon{width:38px;height:38px;border-radius:10px;background:rgba(184,154,106,.12);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--cap-d)}
.dash-forecast-icon svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.dash-forecast-title{font-size:13.5px;font-weight:500;color:var(--text);margin-bottom:3px}
.dash-forecast-sub{font-size:12px;color:var(--text-m)}
.dash-forecast-link{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);white-space:nowrap;cursor:pointer;padding:9px 16px;border-radius:999px;background:var(--bg2);border:1px solid var(--cap);font-family:var(--ylux-font-display);transition:background .2s}
.dash-forecast-link:hover{background:var(--faint)}
.dash-forecast-card2 .dash-chart-area{flex:1 1 100%;margin-top:10px}

.dash-next-hd{font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--text-m);text-transform:uppercase;margin-bottom:16px}
.dash-next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.dash-next-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(10,10,10,.05),0 4px 12px -4px rgba(10,10,10,.04);padding:24px;cursor:pointer;position:relative;transition:box-shadow .26s,transform .26s,border-color .26s}
.dash-next-card:hover{border-color:var(--border);box-shadow:0 4px 8px rgba(10,10,10,.06),0 20px 40px -12px rgba(10,10,10,.14);transform:translateY(-3px)}
.dash-next-card:active{transform:translateY(-1px)}
.dash-next-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.dash-next-cat{font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--cap-d);text-transform:uppercase}
.dash-next-arrow{width:24px;height:24px;border-radius:50%;background:var(--faint);display:flex;align-items:center;justify-content:center;color:var(--text-m);flex-shrink:0;transition:background .22s,color .22s,transform .22s}
.dash-next-arrow svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.dash-next-card:hover .dash-next-arrow{background:var(--text);color:var(--bg2);transform:rotate(-45deg)}
@media (max-width:980px){.dash-next-grid{grid-template-columns:repeat(2,1fr)}.dash-hero-row{grid-template-columns:1fr}}
.dash-next-title{font-family:var(--ylux-font-editorial);font-size:20px;font-weight:400;color:var(--text);margin-bottom:7px}
.dash-next-desc{font-size:12px;color:var(--text-m);line-height:1.5}
@media (max-width:640px){
  .dash-hero-val{font-size:34px}
  .dash-stat-strip{grid-template-columns:1fr}
  .dash-stat-seg+.dash-stat-seg{border-left:none;border-top:1px solid var(--border)}
  .dash-next-grid{grid-template-columns:1fr}
  .dash-forecast-card2{flex-direction:column;align-items:flex-start;gap:14px}
  .dash-forecast-link{width:100%;justify-content:center}
}
/* Website Builder preview chrome — shared by both apps' editors
   (YLAUXI's inline copies in ylauxi_dashboard.html take precedence
   there; these give Lau OS the identical device-toggle + framed
   canvas). Base-token translation of the same values. */
.site-editor-preview{position:sticky;top:16px;border:.5px solid var(--border);background:var(--bg2);display:flex;flex-direction:column;height:calc(100vh - 32px);border-radius:14px;overflow:hidden}
.site-editor-preview-hd{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:.5px solid var(--border);flex-shrink:0}
.site-editor-device-toggle{display:flex;gap:4px}
.sedt-btn{border:.5px solid var(--border);background:var(--bg);color:var(--text-m);padding:6px 8px;cursor:pointer;display:flex;align-items:center;border-radius:999px}
.sedt-btn.is-active{border-color:var(--cap);color:var(--text);background:var(--bg2)}
.site-editor-preview-stage{flex:1;overflow:auto;display:flex;justify-content:center;background:#e8e5e0;padding:12px}
.site-editor-preview-stage > iframe{background:#fff;box-shadow:0 2px 12px rgba(10,10,10,.12);transition:width .2s ease}

/* Briefing tab: cap the content column at a readable measure — full-
   viewport text lines were the single worst readability problem here. */
.dash-briefing-col{max-width:860px}
/* Actions rail + brief reading column side by side on wide viewports,
   stacking to one column below 1100px. */
.dash-briefing-grid{display:grid;grid-template-columns:minmax(300px,400px) minmax(0,1fr);gap:24px;align-items:start}
.dash-briefing-grid .dash-brief{margin-bottom:0}
.dash-briefing-grid .dash-section{margin-bottom:0}
@media(max-width:1100px){.dash-briefing-grid{grid-template-columns:1fr}}
.dash-briefing-grid .dash-actions{background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(10,10,10,.05),0 4px 12px -4px rgba(10,10,10,.04);padding:22px 24px}
.dash-brief{padding:22px 26px;background:var(--bg2);border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 3px rgba(10,10,10,.05),0 4px 12px -4px rgba(10,10,10,.04)}
.dash-brief.is-empty .dash-brief-body{color:var(--text-m);font-style:italic}
.dash-brief .ylux-ed-lbl{font-size:19px;font-style:italic;letter-spacing:0;text-transform:none;color:var(--cap-d)}
.dash-brief .brief-stats .plan-tier-kpi{border-radius:999px}
.dash-brief-time{font-size:11px;color:var(--text-m)}
.dash-brief-open{margin-left:auto;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cap-d);cursor:pointer;white-space:nowrap;background:none;border:none;padding:0;font-family:inherit}
.dash-brief-open:hover{color:var(--text)}
.dash-brief-body{font-size:12.5px;color:var(--text);margin-top:10px;line-height:1.7}
.dash-brief-body p,.brief-body p{margin:0 0 10px}
.dash-brief-body p:last-child,.brief-body p:last-child{margin-bottom:0}
.dash-brief-body .brief-h3,.brief-body .brief-h3{font-family:var(--ylux-font-display,inherit);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cap-d);margin:18px 0 8px;padding-top:14px;border-top:.5px solid var(--border)}
.dash-brief-body .brief-h3:first-child,.brief-body .brief-h3:first-child{margin-top:0;padding-top:0;border-top:none}
.dash-brief-body .brief-h4,.brief-body .brief-h4{font-size:11px;font-weight:600;color:var(--text);margin:10px 0 4px}
.dash-brief-body .brief-list,.brief-body .brief-list{margin:0 0 10px;padding-left:18px}
.dash-brief-body .brief-list li,.brief-body .brief-list li{margin-bottom:5px;line-height:1.5}
.dash-brief-body .brief-hr,.brief-body .brief-hr{border:none;border-top:.5px solid var(--border);margin:12px 0}
/* Today's actions: contained card list with priority dots, hover
   states, an empty-until-hover done-check, and a click-through arrow. */
.ylux-action-list{list-style:none;margin:0;padding:0 16px;background:var(--bg2);border:.5px solid var(--border);border-radius:14px;overflow:hidden}
.ylux-action-item{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;border-bottom:.5px solid var(--border);transition:background .15s}
.ylux-action-item:last-child{border-bottom:none}
.ylux-action-item:hover{background:var(--faint)}
.ylux-action-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:8px;background:var(--cap-d)}
.ylux-action-check{width:22px;height:22px;border:.5px solid var(--border-s);border-radius:999px;background:var(--bg2);cursor:pointer;font-size:11px;flex-shrink:0;color:transparent;transition:border-color .15s,color .15s,background .15s}
.ylux-action-check:hover{border-color:var(--cap-d);color:var(--cap-d);background:var(--cap-f)}
.ylux-action-body{flex:1;min-width:0}
.ylux-action-title{font-size:12px;color:var(--text)}
.ylux-action-detail{font-size:11px;color:var(--text-m);margin-top:3px;line-height:1.5}
.ylux-action-go{flex-shrink:0;align-self:center;font-size:12px;color:var(--cap-d);opacity:0;transition:opacity .15s}
.ylux-action-item:hover .ylux-action-go{opacity:1}
.dash-panel{border:.5px solid var(--border);background:var(--bg2);padding:18px 20px;border-radius:14px}
/* Plan & Billing — light seamless (YLAÜXI design system) */
.plan-bill-view{max-width:1100px}
.plan-bill-actions{display:flex;gap:8px;justify-content:flex-end;margin-bottom:20px}
.plan-bill-lede{font-size:11px;color:var(--text-s);margin:-8px 0 20px;max-width:540px;line-height:1.65}
.plan-tier-strip{display:grid;grid-template-columns:minmax(180px,1.15fr) repeat(4,minmax(0,1fr));gap:10px;margin-bottom:24px}
.plan-tier-identity{padding:22px 20px;background:var(--bg2);border:.5px solid var(--border);border-radius:14px}
.plan-tier-identity.is-featured{border-color:rgba(196,181,168,.35)}
.plan-tier-kpi{padding:16px 12px;background:var(--bg2);border:.5px solid var(--border);text-align:center;display:flex;flex-direction:column;justify-content:center;border-radius:14px}
.plan-tier-eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-m);margin-bottom:8px}
.plan-tier-name{font-family:var(--ylux-font-editorial);font-size:22px;font-weight:400;letter-spacing:.06em;line-height:1.1;margin-bottom:6px;color:var(--text)}
.plan-tier-price{font-family:var(--ylux-font-editorial);font-size:19px;font-weight:400;color:var(--cap)}
.plan-tier-price span{font-size:11px;color:var(--text-m);font-weight:300}
.plan-tier-note{font-size:11px;color:var(--text-m);margin-top:8px;line-height:1.5;font-style:italic;font-family:var(--ylux-font-editorial)}
.plan-tier-kpi-lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-m);margin-bottom:6px}
.plan-tier-kpi-val{font-family:var(--ylux-font-editorial);font-size:20px;font-weight:400;line-height:1;color:var(--text)}
.plan-tier-kpi-val.gold{color:var(--cap)}
.plan-tier-kpi-sub{font-size:11px;color:var(--text-m);margin-top:4px}
.plan-bill-layout{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start}
.plan-credit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:8px}
.plan-credit-card{padding:18px 16px;border:.5px solid var(--border);background:var(--bg2);border-radius:14px}
.plan-credit-card.low{border-color:rgba(196,181,168,.4);background:var(--cap-f)}
.plan-credit-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-m);margin-bottom:8px}
.plan-credit-amt{font-family:var(--ylux-font-editorial);font-size:24px;font-weight:400;line-height:1;margin-bottom:10px}
.plan-credit-bar{height:2px;background:var(--border);margin-bottom:6px}
.plan-credit-bar-fill{height:2px;background:var(--cap);transition:width .35s ease}
.plan-credit-meta{font-size:11px;color:var(--text-m)}
.plan-credit-note{font-size:11px;color:var(--text-s);line-height:1.55;margin:10px 0 0}
.plan-thresh-wrap{border:.5px solid var(--border);background:var(--bg2);border-radius:14px;overflow:hidden}
.plan-thresh-row{display:grid;grid-template-columns:1fr 64px 64px 40px;gap:10px;padding:10px 14px;border-bottom:.5px solid var(--border);font-size:11px;align-items:center}
.plan-thresh-row:last-child{border-bottom:none}
.plan-thresh-row.hd{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-m);background:var(--faint)}
.plan-thresh-name{color:var(--text-s)}
.plan-thresh-pct{font-family:var(--ylux-font-editorial);font-size:12px;text-align:right}
.plan-thresh-dot{width:6px;height:6px;border-radius:50%;justify-self:center}
.plan-thresh-dot.ok{background:var(--cap)}
.plan-thresh-dot.warn{background:var(--cap-d)}
.plan-thresh-dot.crit{background:var(--text-m)}
.plan-ledger-card{border:.5px solid var(--border);background:var(--bg2);padding:2px 0;border-radius:14px;overflow:hidden}
.plan-ledger-inner{font-size:11px;color:var(--text-s)}
.plan-aside-card{border:.5px solid var(--border);background:var(--bg2);padding:16px 14px;margin-bottom:12px;border-radius:14px}
.plan-aside-hd{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-m);margin-bottom:10px}
.plan-aside-copy{font-size:11px;color:var(--text-m);line-height:1.55;margin-bottom:10px}
.plan-include-row{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-s);padding:5px 0;border-bottom:.5px solid var(--border)}
.plan-include-row:last-child{border-bottom:none}
.plan-include-dot{width:5px;height:5px;border-radius:50%;background:var(--cap);flex-shrink:0}
.plan-payg-stack{display:flex;flex-direction:column;gap:6px}
.plan-payg-btn{width:100%;text-align:left;padding:10px 12px!important;font-size:11px!important}
.plan-credit-types{font-size:11px;color:var(--text-m);line-height:1.7}
.plan-credit-types strong{color:var(--text);font-weight:400}
/* Settings — navigation toggles */
.nav-lux-wrap{border:.5px solid var(--border);background:var(--bg2);border-radius:14px;overflow:hidden}
.nav-lux-group-hd{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-m);padding:10px 14px;background:var(--faint);border-bottom:.5px solid var(--border)}
.nav-lux-grid{display:grid;grid-template-columns:1fr 1fr}
.nav-lux-item{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;border-bottom:.5px solid var(--border);border-right:.5px solid var(--border);font-size:11px;color:var(--text-s);gap:10px}
.nav-lux-item:nth-child(2n){border-right:none}
.nav-lux-sw{position:relative;width:32px;height:17px;flex-shrink:0;cursor:pointer}
.nav-lux-sw input{opacity:0;width:0;height:0;position:absolute}
.nav-lux-sw span{position:absolute;inset:0;background:var(--border);border-radius:9px;transition:background .2s}
.nav-lux-sw span::after{content:'';position:absolute;width:13px;height:13px;left:2px;top:2px;background:var(--bg2);border-radius:50%;box-shadow:0 1px 2px rgba(10,10,10,.08);transition:transform .2s}
.nav-lux-sw input:checked+span{background:var(--cap-fb)}
.nav-lux-sw input:checked+span::after{transform:translateX(15px);background:var(--cap)}
.settings-plan-teaser{border:.5px solid var(--border);background:var(--bg2);padding:18px 16px;margin-bottom:20px;border-radius:14px}
.settings-plan-teaser-lbl{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-m);margin-bottom:6px}
.settings-plan-teaser-name{font-family:var(--ylux-font-editorial);font-size:20px;font-weight:400;letter-spacing:.06em;margin-bottom:4px;color:var(--text)}
.settings-plan-teaser-meta{font-size:11px;color:var(--text-m);margin-bottom:12px;line-height:1.5}
@media(max-width:960px){
  .plan-tier-strip{grid-template-columns:1fr 1fr}
  .plan-tier-identity{grid-column:1/-1}
  .plan-bill-layout{grid-template-columns:1fr}
  .nav-lux-grid{grid-template-columns:1fr}
  .nav-lux-item{border-right:none}
}
.ph-hr{height:.5px;background:var(--border-s);margin-bottom:28px}
.sec-h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-m);margin-bottom:12px}
.sec-hr{height:.5px;background:var(--border);margin:20px 0}

/* ── Quick Actions tiles ── */
.qa-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1100px){.qa-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.qa-grid{grid-template-columns:1fr}}
.qa-tile{background:var(--bg2);border-radius:14px;padding:16px 18px;cursor:pointer;box-shadow:0 1px 2px rgba(10,10,10,.04);transition:box-shadow .15s ease,transform .15s ease}
.qa-tile:hover{box-shadow:0 6px 20px rgba(10,10,10,.09);transform:translateY(-2px)}
.qa-cat{font-size: 11px;letter-spacing:.14em;color:var(--text-m);text-transform:uppercase;margin-bottom:6px}
.qa-lbl{font-size:13px;color:var(--text);font-weight:400;line-height:1.4}

/* ── Metric cards ── */
.mg{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:24px}
.mc{background:var(--bg2);border:1px solid var(--border);padding:14px 16px;transition:border-color .12s;border-radius:14px}
.mc:hover{border-color:var(--cap)}
.ml{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-m);margin-bottom:7px}
.mv{font-family:var(--ylux-font-editorial);font-size:22px;font-weight:300;color:var(--text);line-height:1}
.pulse-stat{font-size:24px;font-weight:300;color:var(--cap);line-height:1}
.md{font-size:11px;margin-top:4px}
.up{color:var(--cap-d)}.dn{color:var(--text)}.fl{color:var(--text-m)}

/* ── Metric cards (ylauxi-style, used on the dashboard's Portfolio
   metrics grid) — kept distinct from .mg/.mc above, which other
   metric grids across the app still use. ── */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:14px;margin-bottom:24px}
.stat{background:var(--bg2);border:1px solid var(--border);padding:20px 22px;border-radius:14px}
.stat-l{font-size: 11px;letter-spacing:.15em;color:var(--text-m);text-transform:uppercase;margin-bottom:8px}
.stat-v{font-family:var(--ylux-font-editorial);font-size:26px;font-weight:200;color:var(--text)}
.stat-s{font-size:11px;color:var(--text-m);margin-top:4px}

/* ── Brand Identity tone chips (Brand Default System) ── */
.bd-tone-chip.act{border-color:var(--cap)!important;color:var(--text)!important;background:var(--cap-f)!important}

/* ── Tabs ── */
.tabs{display:flex;border-bottom:.5px solid var(--border);margin-bottom:20px;gap:0;overflow-x:auto;flex-wrap:nowrap}
.tab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:10px 18px;color:var(--text-m);border-bottom:1.5px solid transparent;margin-bottom:-.5px;transition:color .12s,border-color .12s;white-space:nowrap;flex-shrink:0;background:none}
.tab:hover{color:var(--text)}.tab.act{color:var(--text);border-bottom-color:var(--cap-d);font-weight:500}
.tp{display:none}.tp.act{display:block}
#bdc-t>.tp:not(.act),#bde-t>.tp:not(.act),#bdc-ct>.tp:not(.act),#ops-ren>.tp:not(.act),#bda-ct>.tp:not(.act){display:none!important}
#bda-admin-ct>.tp:not(.act){display:none!important}
#bd-tabs{margin:0!important;border-bottom:.5px solid var(--border)!important;padding:0 0!important}
#bd-body>div.tp.act{padding-top:0}
/* Sub-tabs (pill style, inside brand detail sections) */
.sub-tabs{display:flex;gap:6px;flex-wrap:wrap}
.stab{font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 14px;color:var(--text-m);border:.5px solid var(--border);background:none;transition:all .12s;cursor:pointer}
.stab:hover{border-color:var(--cap);color:var(--text)}
.stab.act{background:var(--cap-f);color:var(--text);border-color:var(--cap)}

/* ── Brand grid ── */
.br-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.brc{background:var(--bg2);border:1px solid var(--border);padding:18px 20px;position:relative;overflow:hidden;cursor:pointer;transition:all .14s;box-shadow:0 1px 3px rgba(10,10,10,.05),0 4px 12px -4px rgba(10,10,10,.04);border-radius:14px}
.brc.brc{border-radius:14px}
.brc:hover{border-color:var(--cap);box-shadow:0 2px 6px rgba(10,10,10,.06),0 8px 20px -6px rgba(10,10,10,.08)}
.br-en{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-m);margin-bottom:4px}
.br-nm{font-family:var(--ylux-font-editorial);font-size:19px;font-weight:400;letter-spacing:.04em;margin-bottom:3px}
.br-tp{font-size:11px;color:var(--text-s);margin-bottom:10px}
/* Portfolio's welcome/empty state — dashed, centered, no icon, matches
   .card-empty elsewhere rather than the old solid-border left-aligned box. */
.brands-empty{border:1px dashed var(--border-s);border-radius:14px;background:transparent;text-align:center;padding:36px 24px}
.brands-empty .ylux-ed-hero{font-family:var(--ylux-font-editorial);font-size:1.2rem;letter-spacing:.04em;margin-bottom:8px}
.brands-empty p{font-size:12px;color:var(--text-m);line-height:1.65;margin:0 auto 18px;max-width:420px}
/* Compact drag cards used by both apps' hiring pipelines (hi-card/cb-card
   applicant cards, and their hi-col/cb-col stage columns) — small radius
   since these are dense kanban-style rows, not full cards. */
.hi-card,.cb-card{border-radius:8px!important}
.hi-card:hover,.cb-card:hover{border-color:var(--cap)!important;box-shadow:0 2px 10px rgba(10,9,8,.07)}
.hi-col,.cb-col{border-radius:10px!important;overflow:hidden}

/* ── Tables ── */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-m);padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}
.tbl td{font-size:11.5px;padding:10px 12px;border-bottom:.5px solid var(--border);color:var(--text-s)}
.tbl tr:hover td{background:var(--cap-f)}
.tbl td:first-child{color:var(--text)}

/* ── Brand Management table — a real card, not a bare table ── */
#bm-table{background:var(--bg2);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(10,10,10,.05),0 4px 12px -4px rgba(10,10,10,.04)}
#bm-table .tbl{table-layout:fixed}
#bm-table .tbl th{background:var(--bg);padding:12px 18px}
#bm-table .tbl td{padding:14px 18px;border-bottom-color:var(--border-light,var(--border));vertical-align:middle}
#bm-table .tbl tr:last-child td{border-bottom:none}
#bm-table .tbl td{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bm-table .bmr-brand{display:flex;align-items:center;gap:12px;min-width:0}
#bm-table .bmr-logo{width:32px;height:32px;border-radius:8px;object-fit:contain;background:var(--bg);border:.5px solid var(--border);flex-shrink:0;padding:3px}
#bm-table .bmr-logo-ph{width:32px;height:32px;border-radius:8px;background:var(--bg);border:.5px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-m);font-family:var(--ylux-font-editorial)}
#bm-table .bmr-id-wrap{min-width:0;overflow:hidden}
#bm-table .bmr-name{font-family:var(--ylux-font-editorial);font-size:14.5px;letter-spacing:.02em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bm-table .bmr-id{font-size:10px;color:var(--text-m);font-family:var(--mono,monospace);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bm-table .bmr-tag{display:inline-block;font-size:10.5px;letter-spacing:.04em;padding:3px 10px;border-radius:999px;background:var(--cap-f);color:var(--text-s);border:.5px solid var(--border)}
#bm-table .bmr-empty{color:var(--text-m);font-size:11px}
#bm-table .bmr-url{color:var(--cap-d);text-decoration:none}
#bm-table .bmr-url:hover{text-decoration:underline}

/* ── Buttons ── */
/* border-radius lives on the base .btn so every variant (.btn-blk,
   .btn-crit, plain .btn) is a pill by default, not just .btn-out —
   previously only .btn-out declared its own 999px, so a plain .btn-blk
   with no accompanying .btn-pill class rendered sharp-cornered. */
.btn{font-family:sans-serif;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 16px;cursor:pointer;transition:all .12s;display:inline-flex;align-items:center;gap:6px;border-radius:999px}
.btn-blk{background:var(--text);color:#fff;border:1px solid var(--text)}
.btn-blk:hover{background:#2a2a2a}
.btn-out.btn-out{background:var(--bg2);color:var(--text);border:1px solid var(--border-s);border-radius:999px}
.btn-out.btn-out:hover{border-color:var(--cap);color:var(--text)}
.btn-crit{background:none;color:var(--text);border:1px solid var(--border-s)}
.btn-crit:hover{background:var(--faint)}
.al-lf.act{border-color:var(--cap) !important;color:var(--cap-d) !important}
.btn-sm{font-size:11px;padding:5px 10px}
.btn-pill.btn-pill{border-radius:999px}
.btn-blk.btn-pill{background:var(--cap);color:#fff;border-color:var(--cap)}
.btn-blk.btn-pill:hover{background:var(--cap-d);border-color:var(--cap-d)}
.lau-topbar .tb-brand-btn.tb-brand-btn{padding:7px 16px;border-radius:999px;font-family:var(--ylux-font-display);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:400}

/* ── Forms ── */
.fgrp{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.flbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-m)}
.fi{background:var(--bg2);border:.5px solid var(--border-s);padding:8px 10px;color:var(--text);font-size:12px;font-family:var(--ylux-font-ui);outline:none;transition:border-color .15s;width:100%;border-radius:1px}
.fi:focus{border-color:var(--cap);box-shadow:none}
select.fi{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239A8C80'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px;cursor:pointer}
select.fi:focus{border-color:var(--cap)}
.fi-ta{resize:vertical;min-height:100px}
.frow{display:flex;gap:12px}.frow .fgrp{flex:1}

/* ── Cards ── */
.card{background:var(--bg2);border:1px solid var(--border);padding:18px 20px;margin-bottom:12px;overflow:hidden}
.card.card{border-radius:14px}
.card-empty{border:1px dashed var(--border-s);background:transparent;text-align:center;padding:32px 20px}
.card-empty-title{font-size:13px;color:var(--text);font-weight:500;margin-bottom:6px}
.card-empty-sub{font-size:12px;color:var(--text-m);margin-bottom:16px}
.entity-pill{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--cap-d);background:var(--cap-f);border:.5px solid rgba(196,181,168,.3);border-radius:999px;padding:3px 10px;flex-shrink:0}
.card-t{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-m);margin-bottom:12px}

/* ── Agent cards ── */
.ag-group-lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cap-d);margin:20px 0 10px;padding-bottom:6px;border-bottom:.5px solid var(--border)}
.ag-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:4px}
.agc{background:var(--bg2);border:1px solid var(--border);padding:14px 16px;position:relative;overflow:hidden;transition:all .14s;border-radius:14px}
.agc:hover{border-color:var(--cap)}
.agc::before{content:'';position:absolute;top:0;left:0;width:1.5px;height:100%;background:var(--cap)}
.ag-nm{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;margin-bottom:4px;color:var(--text)}
.ag-sc{font-size:11px;color:var(--text-m);margin-bottom:10px}
.ag-ft{display:flex;justify-content:flex-end;align-items:center;padding-top:8px;border-top:.5px solid var(--border)}

/* ── Calendar ── */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-m{font-family:var(--ylux-font-editorial);font-size:20px;font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--border)}
.cal-dh{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-m);padding:8px 0;text-align:center;border-bottom:1px solid var(--border);background:var(--bg2)}
.cal-day{min-height:80px;border-right:.5px solid var(--border);border-bottom:.5px solid var(--border);padding:6px 8px;background:var(--bg2);vertical-align:top}
.cal-day:nth-child(7n){border-right:none}
.cal-dn{font-size:11px;color:var(--text-m);margin-bottom:4px}
.cal-dn.today{font-weight:600;color:var(--cap-d)}
.cal-ev{font-size:11px;padding:2px 5px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--bg2)}
.cal-past{opacity:.45}
.cal-legend{display:flex;gap:16px;margin-top:12px;font-size:11px;color:var(--text-s);align-items:center}
.cal-leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ── Email ── */
.em-banner{background:var(--cap-f);border:1px solid rgba(196,181,168,.3);padding:10px 14px;font-size:11px;color:var(--cap-d);margin-bottom:18px}
.em-brand-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto}
.em-bt{font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;color:var(--text-m);border-bottom:1.5px solid transparent;margin-bottom:-.5px;white-space:nowrap;flex-shrink:0}
.em-bt:hover{color:var(--text)}.em-bt.act{color:var(--text);border-bottom-color:var(--cap);background:var(--bg2)}
.em-row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:.5px solid var(--border);cursor:pointer;transition:all .1s}
.em-row:hover{background:var(--cap-f)}
.em-from{font-size:12px;min-width:160px;color:var(--text)}
.em-subj{flex:1;font-size:11.5px;color:var(--text-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-t{font-size:11px;color:var(--text-m);min-width:70px;text-align:right}
.em-unread .em-from,.em-unread .em-subj{font-weight:500;color:var(--text)}

/* ── Connector cards ── */
.conn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.conn-card{background:var(--bg2);border:1px solid var(--border);padding:16px;display:flex;flex-direction:column;gap:6px;border-radius:14px}
.conn-hd{display:flex;align-items:center;justify-content:space-between}
.conn-nm{font-size:12px;color:var(--text)}
.conn-badge{font-size:11px;padding:2px 7px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px}
.cb-ok{background:var(--cap-f);color:var(--cap-d);border:1px solid rgba(196,181,168,.3)}
.cb-off{background:var(--faint);color:var(--text-m);border:1px solid var(--border)}
.cb-disc{background:var(--faint);color:var(--text-m);border:1px solid var(--border-s)}
.conn-lbl{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-m)}
.conn-note{font-size:11px;color:var(--text-s);line-height:1.5}
.conn-last{font-size:11px;color:var(--text-m)}

/* ── Badges/status — cappuccino only ── */
.badge{font-size:11px;padding:2px 7px;letter-spacing:.08em;text-transform:uppercase;border-radius:999px}
.b-ok{background:var(--cap-f);color:var(--cap-d);border:1px solid rgba(196,181,168,.25)}
.b-warn{background:var(--faint);color:var(--cap-d);border:1px solid rgba(196,181,168,.2)}
.b-crit{background:var(--faint);color:var(--text);border:1px solid var(--border-s)}
.b-idle{background:var(--faint);color:var(--text-m);border:1px solid var(--border)}
.status-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-m);background:var(--faint);border:.5px solid var(--border);border-radius:999px;cursor:pointer;font-family:inherit;transition:all .15s}
.status-chip:hover{color:var(--text);border-color:var(--border-s)}
.status-chip-dot{width:5px;height:5px;border-radius:50%;background:var(--cap-d);flex-shrink:0}
.b-opt{background:none;color:var(--text-m);border:1px solid var(--border)}

/* command palette — see ylux.css .ylux-cmd */
/* breadcrumb — see ylux-shell.css */
/* FAB — see ylux.css .tb-fab-wrap .fab-menu */
/* ─── KANBAN ──────────────────────────────────────────── */
.kanban-board{display:flex;gap:16px;overflow-x:auto;padding:4px 0 16px;min-height:300px}
.kanban-col{min-width:220px;flex-shrink:0;background:var(--bg);border:.5px solid var(--border);padding:0;display:flex;flex-direction:column;max-height:600px;border-radius:14px;overflow:hidden}
.kanban-col-hdr{padding:12px 14px 10px;border-bottom:.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.kanban-col-lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-s)}
.kanban-col-cnt{font-size:11px;color:var(--cap);background:var(--cap-f);width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.kanban-cards{flex:1;overflow-y:auto;padding:8px}
.kanban-card{background:var(--bg2);border:.5px solid var(--border);padding:10px 12px;margin-bottom:6px;cursor:grab;transition:box-shadow .1s,border-color .1s;user-select:none;border-radius:8px}
.kanban-card:hover{border-color:var(--cap);box-shadow:0 2px 10px rgba(10,9,8,.07)}
.kanban-card.dragging{opacity:.4}
.kanban-drop-zone.drag-over{background:var(--cap-f);border:.5px dashed var(--cap)}
.kanban-add-btn{margin:6px 8px;padding:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;border:.5px dashed var(--border-s);background:none;cursor:pointer;color:var(--text-m);width:calc(100% - 16px);font-family:inherit;text-align:center;transition:border-color .1s,color .1s}
.kanban-add-btn:hover{border-color:var(--cap);color:var(--text)}
/* ─── ACTIVITY FEED ───────────────────────────────────── */
.activity-line{display:flex;gap:14px;padding:12px 0;border-bottom:.5px solid var(--border);align-items:flex-start}
.activity-dot{width:8px;height:8px;border-radius:50%;background:var(--cap);flex-shrink:0;margin-top:4px}
.activity-body{flex:1}
.activity-text{font-size:12px;color:var(--text);letter-spacing:.02em;line-height:1.45}
.activity-meta{font-size:11px;color:var(--text-m);letter-spacing:.06em;margin-top:2px}
.activity-brand-tag{display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:1px 6px;border:.5px solid var(--border-s);color:var(--cap-d);margin-right:6px}
/* ─── CONFETTI ────────────────────────────────────────── */
.confetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.cf{position:absolute;width:6px;height:6px;opacity:0;animation:cfFall linear forwards}
@keyframes cfFall{0%{opacity:1;transform:translateY(-10px) rotate(0deg)}100%{opacity:0;transform:translateY(110vh) rotate(720deg)}}
/* ─── SHORTCUTS MODAL ─────────────────────────────────── */
#shortcuts-modal{display:none;position:fixed;inset:0;background:rgba(250,249,247,.85);backdrop-filter:blur(24px);z-index:9100;align-items:center;justify-content:center}
#shortcuts-modal.open{display:flex}
#shortcuts-box{--bg:#FAFAF8;--bg2:#FFFFFF;--text:#0A0A0A;--text-s:#5C5854;--text-m:#6E5F52;--border:rgba(10,10,10,.08);--border-s:rgba(10,10,10,.14);--faint:rgba(196,181,168,.06);--cap-f:rgba(196,181,168,.1);--cap-fb:rgba(196,181,168,.18);background:var(--bg2);color:var(--text);border:.5px solid var(--border-s);padding:32px 36px;width:100%;max-width:560px;max-height:80vh;overflow-y:auto;box-shadow:0 24px 80px rgba(10,9,8,.15);border-radius:14px}
.sc-group{margin-bottom:20px}
.sc-group-lbl{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cap);margin-bottom:10px;padding-bottom:6px;border-bottom:.5px solid var(--border)}
.sc-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:11px;color:var(--text-s);letter-spacing:.03em}
.sc-keys{display:flex;gap:4px}
.sc-key{font-size:11px;border:.5px solid var(--border-s);padding:2px 7px;color:var(--text-m);font-family:inherit;background:var(--bg);border-radius:4px}
/* ─── SIDEBAR COLLAPSE ────────────────────────────────── */
.sb-sec-hdr{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.sb-sec-hdr:hover .sb-collapse-icon{opacity:1}
.sb-collapse-icon{font-size:11px;color:var(--cap-d);opacity:0;transition:opacity .15s,transform .2s;flex-shrink:0}
.sb-sec.collapsed .sb-collapse-icon{transform:rotate(-90deg);opacity:0.6}
.sb-sec.collapsed .sb-sec-body{display:none}
/* ─── PINNED VIEWS ────────────────────────────────────── */
.pin-btn{background:none;border:none;cursor:pointer;font-size:11px;color:var(--border-s);padding:0 2px;transition:color .1s;line-height:1}
.pin-btn.pinned{color:var(--cap)}
#pinned-section{padding:6px 0}
.pinned-lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-m);padding:4px 16px 2px;font-family:inherit}
/* ─── MAGIC LINK ──────────────────────────────────────── */
.magic-link-row{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--cap-f);border:.5px solid var(--border);margin-top:8px}
.srch-item{padding:10px 20px;font-size:11.5px;color:var(--text-s);cursor:pointer;border-bottom:.5px solid var(--border);display:flex;align-items:center;gap:10px}
.srch-item:hover{background:var(--faint);color:var(--text)}

/* ── Run log ── */
.run-row{display:flex;gap:12px;padding:9px 0;border-bottom:.5px solid var(--border);font-size:11px;color:var(--text-s);align-items:center}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:2px;height:2px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--cap);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--cap-d)}

/* ── Toast ── */
/* toast — ylux-ui.js #ylux-toast */

/* ── Mobile responsive ── */
/* ── Mobile drawer overlay ───────────────────────────── */
#mob-overlay{display:none;position:fixed;inset:0;background:rgba(250,250,248,.72);backdrop-filter:blur(4px);z-index:199}
#mob-overlay.open{display:block}
#mob-hamburger{display:none;background:none;border:.5px solid var(--border);cursor:pointer;padding:4px 10px;color:var(--text-s);font-size:11px;letter-spacing:.18em;text-transform:uppercase;flex-shrink:0;font-family:inherit}

@media(max-width:768px){
  /* Layout — HTML uses .shell not .app */
  .shell{flex-direction:column;height:100dvh;height:100vh;overflow:hidden}
  .main{flex:1;min-height:0;overflow:hidden}

  /* Sidebar becomes a slide-in drawer */
  .sidebar{
    position:fixed;left:-280px;top:0;bottom:0;width:280px;z-index:200;
    flex-direction:column;overflow-y:auto;overflow-x:hidden;
    border-right:.5px solid var(--border);
    transition:left .22s ease;
    height:100%;
  }
  .sidebar.mob-open{left:0}
  .sb-sec{padding:10px 8px 4px;display:block}
  .sb-lbl{display:block}
  .ni{padding:10px 14px;font-size:11px;min-height:44px;display:flex;align-items:center}

  /* Topbar — MENU | LAU OS (center) | ALERTS */
  #mob-hamburger{display:flex;align-items:center;position:relative;z-index:25;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .ni,.mob-nav-btn,button[type="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  .topbar{padding:0 14px;height:52px;position:relative;justify-content:space-between}
  /* Hide everything except hamburger, logo, alerts */
  .tb-l .tb-clock,.tb-l .tb-pg,.tb-l .tb-live,.tb-l .tb-search-pill,.tb-l{display:none!important}
  .tb-r .tb-tog,.tb-r .tb-exit,.tb-r [id="new-btn"],.tb-r .ylux-new-wrap:first-child,.tb-brand{display:none!important}
  /* Keep only the alerts button in tb-r */
  .tb-r{gap:0}
  /* Sidebar footer visible on mobile */
  #mob-sb-footer{display:block!important}
  #mob-sb-footer .tb-tog{width:34px;height:20px;border:.5px solid var(--border);border-radius:10px;padding:2px;background:var(--bg);display:flex;align-items:center;cursor:pointer;flex-shrink:0}
  #mob-sb-footer .tb-tog-dot{width:14px;height:14px;border-radius:50%;background:var(--cap);transition:transform .2s}
  #mob-sb-footer .tb-exit{font-family:var(--ylux-font-display);font-size: 11px;letter-spacing:.16em;text-transform:uppercase;padding:6px 0;border:none;background:transparent;color:var(--text-m);cursor:pointer;width:100%;text-align:left}
  #mob-sb-footer .mob-sb-account-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  #mob-sb-footer .mob-sb-account-lbl{font-family:var(--ylux-font-display);font-size: 11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-m)}

  /* Content */
  .content{padding:14px 12px 80px;flex:1;overflow-y:auto;height:100%}

  /* Grids */
  .mg{grid-template-columns:repeat(2,1fr)!important}
  .br-grid{grid-template-columns:1fr!important}
  .frow{flex-direction:column}
  [style*="grid-template-columns:2fr 1fr"]{display:flex!important;flex-direction:column!important}
  [style*="grid-template-columns:1fr 1fr"]{display:flex!important;flex-direction:column!important}
  [style*="grid-template-columns:repeat(2"]{display:flex!important;flex-direction:column!important}
  [style*="grid-template-columns:repeat(3"]{display:flex!important;flex-direction:column!important}

  /* Tables */
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl{font-size:11px;min-width:500px}
  table.tbl th,table.tbl td{padding:8px 10px}

  /* Cards */
  .card{padding:14px}

  /* Tabs */
  .tabs,.sub-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}
  .tab,.stab{white-space:nowrap;font-size:11px;min-height:36px;display:inline-flex;align-items:center}

  /* Buttons — bigger touch targets */
  .btn{min-height:36px;padding:8px 14px;font-size:11px}
  .btn-sm{min-height:32px;padding:6px 12px;font-size:11px}

  /* Inputs — 16px prevents iOS auto-zoom */
  input,select,textarea{font-size:16px!important}
  .fi{font-size:16px!important}

  /* Brand detail header */
  #v-brand-detail [style*="position:sticky"]{flex-wrap:wrap;gap:8px;padding:10px 14px}
  #bd-body{padding:14px 12px 60px!important}

  /* Calendar */
  .cal-grid{grid-template-columns:repeat(7,1fr)}
  .cal-day{min-height:36px;font-size:11px}

  /* Modals */
  #run-modal>div{width:96vw!important;max-height:90vh!important;padding:16px!important}

  /* Section headings */
  .ph{font-size:13px}
}

@media(max-width:480px){
  .topbar .tb-l > *:not(#mob-hamburger){display:none!important}
  .mg{grid-template-columns:1fr!important}
}


/* ── Skeleton loading ────────────────────────────────────────── */
@keyframes skel-shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skel{
  background:linear-gradient(90deg,var(--faint) 25%,var(--border) 50%,var(--faint) 75%);
  background-size:800px 100%;
  animation:skel-shimmer 1.4s infinite linear;
  border-radius:2px;
}
.skel-line{height:11px;margin-bottom:8px;width:100%}
.skel-line.w60{width:60%}
.skel-line.w40{width:40%}
.skel-line.w80{width:80%}
.skel-val{height:28px;width:50%;margin-bottom:4px}
.skel-row{display:flex;gap:12px;margin-bottom:10px;align-items:center}
.skel-cell{height:11px;flex:1}
.skel-block{height:80px;margin-bottom:12px}

/* ── Collapsible sidebar ─────────────────────────────────────── */
.sb-sec-hdr{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;padding:10px 14px 4px;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cap);
  user-select:none;
}
.sb-sec-hdr:hover{color:var(--text)}
.sb-sec-hdr .sb-chev{font-size:11px;transition:transform .18s;margin-left:4px;opacity:.5}
.sb-sec.collapsed .sb-chev{transform:rotate(-90deg)}
.sb-sec.collapsed .ni{display:none}


/* ── CSV export button ───────────────────────────────────────── */
.btn-csv{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 14px;border:1px solid var(--border-s);border-radius:999px;color:var(--text);
  background:var(--bg2);cursor:pointer;transition:all .12s;flex-shrink:0;
}
.btn-csv:hover{border-color:var(--cap);color:var(--text)}

/* ── Bulk select ─────────────────────────────────────────────── */
.bulk-bar{
  display:none;position:sticky;top:52px;z-index:15;
  background:var(--bg2);border-bottom:.5px solid var(--cap-d);
  padding:8px 16px;align-items:center;gap:12px;
  font-size:11px;letter-spacing:.06em;
}
.bulk-bar.active{display:flex}
.tbl .row-chk{width:16px;height:16px;cursor:pointer;accent-color:var(--cap)}

/* ── Auto-refresh indicator ──────────────────────────────────── */
#refresh-dot{
  width:5px;height:5px;border-radius:50%;background:var(--border-s);
  display:inline-block;margin-left:6px;transition:background .3s;
  vertical-align:middle;
}
#refresh-dot.live{background:var(--cap-d)}

.cms-loading{padding:20px;font-size:11px;color:var(--text-m)}
.cms-list{display:flex;flex-direction:column;gap:1px}
.cms-row{padding:10px 0;border-bottom:.5px solid var(--border);display:flex;align-items:center;gap:10px}
.cms-row-main{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.cms-row-title{font-size:12px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cms-row-date{font-size:11px;color:var(--text-m);white-space:nowrap}
.cms-row-actions{display:flex;gap:5px;flex-shrink:0}
.cms-form{background:var(--faint);border:.5px solid var(--border);border-radius:14px;padding:18px;margin-bottom:14px}
.cms-form-title{font-family:var(--ylux-font-editorial);font-size:15px;font-weight:400;margin-bottom:14px;padding-bottom:10px;border-bottom:.5px solid var(--border)}
.cms-field{display:flex;flex-direction:column;gap:4px}
.cms-label{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-m)}
.cms-input{border:.5px solid var(--border);background:var(--bg2,#fff);color:var(--text);padding:6px 8px;font-size:11px;width:100%;border-radius:2px;outline:none;font-family:inherit}
.cms-input:focus{border-color:var(--cap-d,var(--text-m))}
.cms-form-fields{display:flex;flex-direction:column;gap:10px}
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.media-tile{background:var(--faint);border:.5px solid var(--border);border-radius:3px;padding:6px}
.cms-types{gap:4px!important}
@media(max-width:768px){
  /* Auto-wrap tables for mobile scroll — was missing this media guard
     entirely, so table.tbl got display:block (breaking the native table
     layout algorithm and letting columns shrink to content width instead
     of stretching to fill) at every screen size, not just mobile. */
  .view:not(#v-sales):not(#v-ylauxi)>div>table.tbl,.view:not(#v-sales):not(#v-ylauxi) table.tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}

  /* Metric card values — larger and more readable */
  .mv{font-size:22px!important}
  .ml{font-size:11px!important}
  .mc{padding:14px 16px!important}

  /* Table — horizontal scroll + min width so columns breathe */
  .tbl{min-width:480px;font-size:11px!important}
  .tbl th,.tbl td{padding:9px 10px!important;white-space:nowrap}

  /* Hide less-critical table columns on mobile */
  .tbl th:nth-child(4),.tbl td:nth-child(4),
  .tbl th:nth-child(5),.tbl td:nth-child(5){display:none}

  /* Make all inline-grid layouts collapse */
  div[style*="display:grid"]{display:flex!important;flex-direction:column!important;gap:10px!important}
  div[style*="display: grid"]{display:flex!important;flex-direction:column!important;gap:10px!important}

  /* But keep .mg as 2-col */
  .mg{display:grid!important;grid-template-columns:repeat(2,1fr)!important;flex-direction:unset!important}

  /* Brand detail sub-tabs scroll */
  .tabs,.sub-tabs,#bda-ct,#bdc-ct,#bde-ct{overflow-x:auto!important;flex-wrap:nowrap!important}
  .tp{flex-shrink:0}

  /* Section heading font */
  .sec-h{font-size:11px!important}

  /* Make ph (page heading) more compact */
  .ph{padding-bottom:6px!important}
  .ph-hr{margin-bottom:14px!important}

  /* Card grid inside brand detail */
  #bd-overview [style*="grid-template-columns"]{display:flex!important;flex-direction:column!important}

  /* Form rows */
  .fgrp{margin-bottom:10px}
  .frow,.fgrp+.fgrp{flex-direction:column!important}

  /* Sticky brand detail header compact */
  #v-brand-detail > div:first-child{flex-wrap:wrap!important;padding:10px 14px!important;gap:8px!important}
  #v-brand-detail > div:first-child > div:last-child{flex-wrap:wrap!important;gap:6px!important}

  /* Charts / analytics overflow */
  canvas{max-width:100%!important;height:auto!important}

  /* Sidebar width when open */
  .sidebar.mob-open{box-shadow:4px 0 24px rgba(10,10,10,.18)}

  /* Hide brand selector from topbar on mobile — accessed via sidebar */
  .topbar > div[style*="brand"]{display:none!important}
  /* Hide the middle brand selector div in topbar */
  .topbar > div:not(.tb-l):not(.tb-r):not(#mob-logo){display:none!important}
  /* The + ADD SKU / add buttons full width */
  .view > div > .btn-blk{width:100%!important;text-align:center!important}

  /* Agent cards */
  .av-card{flex-direction:column!important;align-items:flex-start!important}
}

.serp-preview{padding:12px;background:var(--bg2);border:.5px solid var(--border);border-radius:3px;max-width:520px;margin-top:6px}
.serp-url{font-size:12px;color:var(--text-m);margin-bottom:2px}
.serp-title{font-size:18px;color:var(--text);line-height:1.3;margin-bottom:4px}
.serp-desc{font-size:13px;color:var(--text-s);line-height:1.5}

.ver-preview{animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* ── Global confirm modal ── */
#lau-confirm-overlay{position:fixed;inset:0;z-index:9000;background:rgba(250,250,248,.78);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .18s}
#lau-confirm-overlay.show{opacity:1;pointer-events:all}
/* Floats above the page, so it re-pins the light token set rather than
   just its own background — must stay legible even when the page itself
   is in dark mode, where these tokens would otherwise flip dark. */
#lau-confirm-box{--bg:#FAFAF8;--bg2:#FFFFFF;--text:#0A0A0A;--text-s:#5C5854;--text-m:#6E5F52;--border:rgba(10,10,10,.08);--border-s:rgba(10,10,10,.14);--faint:rgba(196,181,168,.06);--cap-f:rgba(196,181,168,.1);--cap-fb:rgba(196,181,168,.18);background:var(--bg2);color:var(--text);border:.5px solid var(--border-s);padding:32px 36px;max-width:380px;width:90%;text-align:center;border-radius:14px}
#lau-confirm-msg{font-size:15px;color:var(--text);margin-bottom:6px;font-family:var(--ylux-font-editorial);font-weight:300}
#lau-confirm-sub{font-size:11px;color:var(--text-m);margin-bottom:22px;letter-spacing:.04em}
/* Feature modals/drawers (bd-ef-modal, tm-modal, deal-modal, etc. — every
   id ending in "-modal", plus a handful of overlay/panel/composer ids that
   don't follow that suffix) each style their own inner box inline with
   background:var(--bg2) and no local light-token pin, same bug class as
   the shell chrome above. Since custom properties inherit, re-declaring
   them once here on the outer fixed/absolute wrapper (whatever its own
   background is — a literal rgba backdrop, unaffected) fixes every
   descendant that reads var(--bg2)/var(--text)/etc., without touching
   ~40 individual HTML blocks. */
[id$="-modal"],
#soc-composer,
#vault-versions-panel,
#yx-vault-versions-panel,
#lau-multi-overlay,
#lau-input-overlay,
.ce-menu,
.ce-modal-overlay {
  --bg:#FAFAF8;--bg2:#FFFFFF;--text:#0A0A0A;--text-s:#5C5854;--text-m:#6E5F52;
  --border:rgba(10,10,10,.08);--border-s:rgba(10,10,10,.14);--faint:rgba(196,181,168,.06);
  --cap-f:rgba(196,181,168,.1);--cap-fb:rgba(196,181,168,.18);
}
/* Same ~40 modals' inner content box (their direct-child div, inline-
   styled with background:var(--bg2)) never had a radius declared at
   all — sharp corners, same root gap as the .plan-* card family and
   the base .btn rules fixed alongside this. */
[id$="-modal"] > div,
#soc-composer > div,
#vault-versions-panel,
#yx-vault-versions-panel {
  border-radius: 14px;
}
/* ── Skeleton shimmer ── */
.skel{background:var(--faint);position:relative;overflow:hidden}
.skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.05) 50%,transparent 100%);animation:skelShim 1.5s infinite}
@keyframes skelShim{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skel-row{display:flex;gap:10px;padding:11px 0;border-bottom:.5px solid var(--border)}
.skel-text{height:10px;border-radius:1px}

.view.act{display:block;min-height:0}
.main{overflow-x:hidden}
.content{overflow-x:hidden;max-width:100%;box-sizing:border-box}
.view{max-width:100%;box-sizing:border-box;overflow-x:hidden}
#v-alerts .ph,#v-alerts .ph-hr{max-width:100%}
.al-row-card{background:var(--bg2);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:8px}

/* Embed panel fix (admin/sales portals) */
[hidden]{display:none!important}
#ylauxi-admin-root .yla-panel:not(.is-on),#v-ylauxi .yla-panel:not(.is-on){display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important;border:none!important}
#ylauxi-admin-root .yla-panel.is-on,#v-ylauxi .yla-panel.is-on{display:block!important;height:auto!important;overflow:visible!important}
#sales-portal-root .sp-panel:not(.is-on),#v-sales .sp-panel:not(.is-on){display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important;border:none!important}
#sales-portal-root .sp-panel.is-on,#v-sales .sp-panel.is-on{display:block!important;height:auto!important;overflow:visible!important}

/* Mobile OS polish */
@media(max-width:768px){
  .sidebar{width:min(280px,92vw)}
  .shell{height:100dvh;height:100vh}
  .content{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}
  .ph{font-size:11px;letter-spacing:.18em}
  .mc{padding:12px 14px}
  .view .card{overflow-x:auto}
  .tabs,.sub-tabs{scrollbar-width:none}
  .tabs::-webkit-scrollbar,.sub-tabs::-webkit-scrollbar{display:none}
}
@media(max-width:480px){
  .mg{grid-template-columns:1fr!important}
  .sidebar{width:100%;max-width:320px;left:-100%}
  .sidebar.mob-open{left:0}
}


/* LAU OS layout fix */
.shell{display:flex;height:100vh;overflow:hidden}
.main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
.content{flex:1;min-height:0;padding:32px 32px 60px;max-width:100%;overflow-x:hidden;box-sizing:border-box}
.view{display:none}
.view.act{display:block !important}

/* Mobile padding + floating-nav clearance — must come after the
   unconditional ".content{padding:...60px}" above (same specificity) so it
   actually wins the cascade instead of being silently overridden by it.
   That override was the real cause of page cards scrolling up behind the
   floating pill. It also wiped the mobile horizontal padding set at
   :576, which is why phones were rendering 32px side gutters instead of
   12px — so this sets the whole shorthand, not just padding-bottom. */
@media(max-width:768px){
  .content{padding:14px 12px calc(114px + env(safe-area-inset-bottom,0px))!important}
}

/* No dropdown arrows on any <select> app-wide, per explicit request. */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:none!important}