/* ==========================================================================
   wenex-wdxs · COMPONENTS — shell · widgets · KPI · charts · funnel · tables · cards · gallery · motion · responsive
   Generated from the FROZEN WDXS 2.0 Visual Master Reference (deploy/wdxs2/v2-app.css).
   PRESENTATION ONLY — no business logic. Do not edit here; edit the reference + rebuild.
   ========================================================================== */
/* ===================== SHELL ===================== */
.app{position:relative;z-index:1;display:grid;grid-template-columns:var(--rail) 1fr;grid-template-rows:auto 1fr;min-height:100vh;}
.rail{grid-column:1;grid-row:1 / span 2;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:18px 0;background:color-mix(in srgb,var(--surface-raised) 70%,transparent);border-inline-end:1px solid var(--border-subtle);backdrop-filter:blur(8px);z-index:5;}
/* sidebar brand mark — official full-colour Fennec-X icon (compact navigation identity) */
.brand-x{width:36px;height:36px;flex:0 0 auto;margin-bottom:10px;background:var(--brand-icon) center/contain no-repeat;
  transition:transform var(--t-standard) var(--ease);} /* subtle micro-motion on hover, never continuous */
.brand-x:hover{transform:scale(1.06);}
.rail-nav{display:flex;flex-direction:column;gap:4px;width:100%;align-items:center;margin-top:4px;}
.rail-btn{position:relative;width:46px;height:46px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--text-muted);transition:color var(--t-fast),background var(--t-fast);}
.rail-btn svg{width:22px;height:22px;}
.rail-btn:hover{color:var(--text-primary);background:var(--surface-interactive);}
.rail-btn[aria-current="page"]{color:var(--text-primary);}
.rail-btn[aria-current="page"]::before{content:'';position:absolute;inset-inline-start:-18px;top:50%;transform:translateY(-50%);width:3px;height:26px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--accent-hover),var(--accent-deep));box-shadow:0 0 12px var(--accent-glow);}
[dir=rtl] .rail-btn[aria-current="page"]::before{border-radius:3px 0 0 3px;}
/* rail tooltip */
.rail-btn[data-tip]::after{content:attr(data-tip);position:absolute;inset-inline-start:56px;top:50%;transform:translateY(-50%) scale(.96);transform-origin:left center;
  background:var(--surface-overlay);color:var(--text-primary);border:1px solid var(--border-strong);box-shadow:var(--shadow-2);
  padding:5px 10px;border-radius:var(--r-sm);font-size:12px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast);z-index:20;}
[dir=rtl] .rail-btn[data-tip]::after{inset-inline-start:auto;inset-inline-end:56px;transform-origin:right center;}
.rail-btn:hover[data-tip]::after,.rail-btn:focus-visible[data-tip]::after{opacity:1;transform:translateY(-50%) scale(1);}
.rail-spacer{flex:1;}
.rail-avatar{width:38px;height:38px;border-radius:var(--r-pill);border:1px solid var(--border-strong);overflow:hidden;}

.top{grid-column:2;grid-row:1;display:flex;align-items:center;gap:14px;padding:16px var(--gutter);position:sticky;top:0;z-index:4;
  background:color-mix(in srgb,var(--surface-base) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--border-subtle);}
.top-title{font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:.02em;white-space:nowrap;}
.top-title b{color:var(--text-muted);font-weight:500;}
.modes{display:flex;gap:2px;padding:3px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--r-pill);}
.mode-btn{padding:7px 13px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--text-muted);white-space:nowrap;transition:color var(--t-fast),background var(--t-fast);}
.mode-btn:hover{color:var(--text-secondary);}
.mode-btn.on{color:var(--text-primary);background:var(--surface-interactive);box-shadow:var(--shadow-1);}
.top-spacer{flex:1;}
.demo-badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--status-warning);background:var(--status-warning-soft);border:1px solid color-mix(in srgb,var(--status-warning) 30%,transparent);padding:6px 11px;border-radius:var(--r-pill);white-space:nowrap;}
[dir=rtl] .demo-badge{letter-spacing:.02em;}
.demo-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--status-warning);box-shadow:0 0 8px var(--status-warning);}
.seg{display:flex;gap:2px;padding:3px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--r-pill);}
.seg button{width:34px;height:30px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--text-muted);font-size:12px;font-weight:700;transition:color var(--t-fast),background var(--t-fast);}
.seg button svg{width:16px;height:16px;}
.seg button.on{color:var(--text-primary);background:var(--surface-interactive);}
.seg.lang button{width:auto;padding:0 11px;}
.icon-btn{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;color:var(--text-secondary);position:relative;transition:background var(--t-fast),color var(--t-fast);}
.icon-btn:hover{background:var(--surface-interactive);color:var(--text-primary);}
.icon-btn svg{width:20px;height:20px;}
.icon-btn .badge{position:absolute;top:6px;inset-inline-end:6px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--surface-base);}

.canvas{grid-column:2;grid-row:2;padding:calc(var(--gutter) + 4px) var(--gutter) 90px;max-width:calc(var(--maxw) + 2*var(--gutter));width:100%;margin:0 auto;}
.mode-view{display:none;} .mode-view.active{display:block;}

/* ===================== HERO ===================== */
.hero{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--border-subtle);
  background:linear-gradient(135deg,var(--surface-elevated),var(--surface-raised));box-shadow:var(--shadow-3);
  display:grid;grid-template-columns:1.4fr .9fr;gap:20px;padding:30px 34px;margin-bottom:var(--gutter);}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(680px 320px at 100% -30%,var(--accent-soft),transparent 62%);}
[dir=rtl] .hero::before{background:radial-gradient(680px 320px at 0% -30%,var(--accent-soft),transparent 62%);}
/* hero watermark — geometry of the official Fennec-X icon, masked to the theme ink at
   very low opacity; secondary to content, never distorted, kept upright in RTL */
.hero-x{position:absolute;inset-inline-end:-26px;bottom:-66px;width:290px;height:290px;pointer-events:none;
  background:var(--text-primary);opacity:.05;
  -webkit-mask:var(--brand-icon-mask) center/contain no-repeat;mask:var(--brand-icon-mask) center/contain no-repeat;}
[dir=rtl] .hero-x{inset-inline-end:auto;inset-inline-start:-26px;}
.hero-main{position:relative;z-index:1;display:flex;flex-direction:column;}
.hero-id{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.hero-ava{width:54px;height:54px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border-strong);flex:0 0 auto;box-shadow:var(--shadow-2);}
.hero-greet{font-family:var(--font-display);font-weight:700;font-size:var(--type-hero);letter-spacing:-.02em;line-height:1.04;margin:0;text-wrap:balance;}
.hero-greet .light{color:var(--text-muted);font-weight:500;}
.tier-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.03em;padding:5px 11px;border-radius:var(--r-pill);margin-top:8px;width:max-content;
  color:var(--status-warning);background:var(--status-warning-soft);border:1px solid color-mix(in srgb,var(--status-warning) 30%,transparent);}
.tier-chip svg{width:14px;height:14px;}
.tier-chip.cat{color:var(--status-cat);background:var(--status-cat-soft);border-color:color-mix(in srgb,var(--status-cat) 30%,transparent);}
/* neutral tier chip — monochrome by default; colour reserved for genuinely semantic tiers */
.tier-chip.neutral{color:var(--text-secondary);background:var(--surface-interactive);border-color:var(--border-strong);}
.tier-chip.info{color:var(--status-info);background:var(--status-info-soft);border-color:color-mix(in srgb,var(--status-info) 30%,transparent);}
/* contextual insight line in hero */
.hero-context{display:flex;gap:11px;align-items:flex-start;margin:4px 0 0;padding:12px 14px;border-radius:var(--r-md);
  background:var(--surface-base);border:1px solid var(--border-subtle);max-width:52ch;}
.hero-context .hi{width:30px;height:30px;border-radius:var(--r-sm);flex:0 0 auto;display:grid;place-items:center;background:var(--status-info-soft);color:var(--status-info);}
.hero-context .hi svg{width:17px;height:17px;}
.hero-context p{margin:0;font-size:13.5px;color:var(--text-secondary);line-height:1.5;}
.hero-context b{color:var(--text-primary);font-weight:700;}
.hero-priority{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.priority-note{display:flex;align-items:center;gap:10px;color:var(--text-secondary);font-size:14px;}
.priority-note .pin{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;flex:0 0 auto;background:var(--status-warning-soft);color:var(--status-warning);}
.priority-note .pin svg{width:18px;height:18px;}
.priority-note b{color:var(--text-primary);}
.cta{display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:var(--r-md);font-weight:700;font-size:14px;color:#fff;
  background:linear-gradient(180deg,var(--accent),var(--accent-hover));box-shadow:var(--glow);
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast),filter var(--t-fast);}
.cta:hover{transform:translateY(-1px);filter:brightness(1.04);} .cta:active{transform:translateY(0);}
.cta svg{width:17px;height:17px;}
.cta.on-accent{color:var(--text-on-accent);}
.hero-orbit{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;}
.orbit-wrap{position:relative;width:224px;height:224px;}
.orbit-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 30px;}
.orbit-center .val{font-family:var(--font-num);font-weight:700;font-size:38px;letter-spacing:-.02em;line-height:1;}
.orbit-center .lab{font-size:12px;color:var(--text-muted);margin-top:6px;font-weight:600;letter-spacing:.04em;}
.orbit-center .sub{font-size:12px;color:var(--text-muted);margin-top:4px;font-weight:600;}
.orbit-cap{position:absolute;top:-4px;inset-inline-start:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;}
.orbit-cap .n{font-family:var(--font-num);font-weight:700;font-size:14px;} .orbit-cap .l{font-size:10.5px;color:var(--text-muted);}

/* ===================== GRID / WIDGET ===================== */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);align-items:start;}
.col-3{grid-column:span 3;} .col-4{grid-column:span 4;} .col-5{grid-column:span 5;}
.col-6{grid-column:span 6;} .col-7{grid-column:span 7;} .col-8{grid-column:span 8;} .col-12{grid-column:span 12;}
.widget{position:relative;background:linear-gradient(180deg,var(--surface-raised),var(--surface-elevated));border:1px solid var(--border-subtle);border-radius:var(--r-lg);box-shadow:var(--shadow-2);}
.widget-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--border-subtle);}
.widget-head .wico{width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;flex:0 0 auto;}
.widget-head .wico svg{width:18px;height:18px;}
.widget-head h3{font-family:var(--font-display);font-weight:600;font-size:15px;margin:0;letter-spacing:-.01em;}
.widget-head .sub{font-size:12px;color:var(--text-muted);margin-top:1px;}
.widget-head .spacer{flex:1;}
.widget-body{padding:18px 20px 20px;}
.chip-btn{font-size:12px;font-weight:600;color:var(--text-muted);padding:5px 10px;border-radius:var(--r-pill);border:1px solid var(--border-subtle);transition:color var(--t-fast),border-color var(--t-fast);}
.chip-btn:hover{color:var(--text-primary);border-color:var(--border-strong);}
.chip-btn.on{color:var(--text-primary);background:var(--surface-interactive);border-color:var(--border-strong);}

/* KPI card types A–E */
.metric{padding:18px;display:flex;flex-direction:column;gap:12px;min-height:148px;}
.metric-top{display:flex;align-items:center;gap:10px;}
.metric-ico{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;flex:0 0 auto;}
.metric-ico svg{width:19px;height:19px;}
.metric-name{font-size:12.5px;font-weight:600;color:var(--text-secondary);}
.metric-help{margin-inline-start:auto;}
.metric-val{font-family:var(--font-num);font-weight:700;font-size:var(--type-metric);letter-spacing:-.02em;line-height:1;}
.metric-val .cur{font-size:16px;color:var(--text-muted);font-weight:600;margin-inline-end:4px;}
.metric-foot{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);margin-top:auto;}
.metric-type{position:absolute;top:14px;inset-inline-end:16px;font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--text-faint);text-transform:uppercase;}
.delta{display:inline-flex;align-items:center;gap:3px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);font-size:12px;}
.delta svg{width:12px;height:12px;}
.delta.up{color:var(--status-success);background:var(--status-success-soft);}
.delta.down{color:var(--status-danger);background:var(--status-danger-soft);}
.delta.flat{color:var(--text-muted);background:var(--viz-track);}
.spark{width:100%;height:40px;display:block;}
.pbar{height:8px;border-radius:var(--r-pill);background:var(--viz-track);overflow:hidden;}
/* progress fill is MONOCHROME — neutral info, not a decorative accent (the crimson Orbit gauge is the brand progress moment) */
.pbar>span{display:block;height:100%;border-radius:inherit;background:var(--text-secondary);transform-origin:left;transform:scaleX(0);transition:transform var(--t-draw) var(--ease);}
[dir=rtl] .pbar>span{transform-origin:right;}
.reveal-on .pbar>span{transform:scaleX(var(--p,0));}

/* charts */
.chart{width:100%;display:block;} .chart text{fill:var(--text-muted);}
.legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:14px;}
.legend .li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-secondary);}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:0 0 auto;}
.legend .li b{color:var(--text-primary);font-family:var(--font-num);}
.donut-wrap{display:flex;align-items:center;gap:22px;}
.donut-center{position:relative;flex:0 0 auto;}
.donut-center .c-val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.donut-center .c-val .n{font-family:var(--font-num);font-weight:700;font-size:22px;}
.donut-center .c-val .l{font-size:11px;color:var(--text-muted);}
.vbars{display:flex;align-items:flex-end;gap:12px;height:150px;padding-top:8px;}
.vbars .vb{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;}
.vbars .vb .grp{display:flex;gap:4px;width:100%;height:100%;align-items:flex-end;justify-content:center;}
.vbars .vb .track{width:100%;max-width:16px;background:var(--viz-track);border-radius:5px 5px 0 0;height:100%;display:flex;align-items:flex-end;overflow:hidden;}
.vbars .vb .fill{width:100%;border-radius:5px 5px 0 0;transform-origin:bottom;transform:scaleY(0);transition:transform var(--t-slow) var(--ease);}
.reveal-on .vbars .vb .fill{transform:scaleY(var(--h,0));}
.vbars .vb .vl{font-size:11px;color:var(--text-muted);}

/* STEPPED FUNNEL (redesigned, first-class) */
.funnel2{display:flex;flex-direction:column;gap:0;}
.fstep{position:relative;padding:13px 0;}
.fstep+.fstep{border-top:1px dashed var(--border-subtle);}
.fhead{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.fhead .fdot{width:26px;height:26px;border-radius:var(--r-sm);flex:0 0 auto;display:grid;place-items:center;color:var(--on-fill);}
.fhead .fdot svg{width:15px;height:15px;}
.fhead .fl{font-size:13.5px;font-weight:600;color:var(--text-primary);}
.fhead .fn{margin-inline-start:auto;font-family:var(--font-num);font-weight:700;font-size:15px;}
.ftrack{height:12px;border-radius:var(--r-pill);background:var(--viz-track);overflow:hidden;}
.fbar{height:100%;border-radius:var(--r-pill);transform-origin:left;transform:scaleX(0);transition:transform var(--t-slow) var(--ease);}
[dir=rtl] .fbar{transform-origin:right;}
.reveal-on .fbar{transform:scaleX(var(--w,1));}
.fmeta{display:flex;justify-content:space-between;gap:12px;margin-top:6px;font-size:11.5px;color:var(--text-muted);}
.fmeta .conv{font-weight:700;color:var(--text-secondary);}
.funnel-overall{margin-top:14px;padding-top:14px;border-top:1px solid var(--border-subtle);display:flex;align-items:baseline;gap:8px;}
.funnel-overall .big{font-family:var(--font-num);font-weight:700;font-size:22px;color:var(--status-success);}
.funnel-overall .lab{font-size:12.5px;color:var(--text-muted);}

/* timeline */
.timeline{list-style:none;margin:0;padding:0;}
.tl-day{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin:6px 0 10px;}
[dir=rtl] .tl-day{letter-spacing:.02em;}
.tl-item{position:relative;display:flex;gap:14px;padding-bottom:18px;}
.tl-item::before{content:'';position:absolute;inset-inline-start:19px;top:40px;bottom:-2px;width:1.5px;background:var(--border-subtle);}
.tl-item:last-child::before{display:none;}
.tl-ico{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;flex:0 0 auto;z-index:1;border:1px solid var(--border-subtle);background:var(--surface-interactive);}
.tl-ico svg{width:19px;height:19px;}
.tl-body{flex:1;padding-top:2px;} .tl-body .t{font-size:14px;color:var(--text-primary);} .tl-body .t b{font-weight:700;}
.tl-body .m{font-size:12px;color:var(--text-muted);margin-top:3px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.tl-amt{font-family:var(--font-num);font-weight:700;font-size:14px;white-space:nowrap;}
.tl-amt.pos{color:var(--status-success);} .tl-amt.neg{color:var(--status-danger);}

/* pills */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--border-strong);color:var(--text-secondary);}
[dir=rtl] .pill{letter-spacing:0;}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill.t{text-transform:none;letter-spacing:0;}
.pill.warn{color:var(--status-warning);background:var(--status-warning-soft);border-color:color-mix(in srgb,var(--status-warning) 28%,transparent);}
.pill.ok{color:var(--status-success);background:var(--status-success-soft);border-color:color-mix(in srgb,var(--status-success) 28%,transparent);}
.pill.info{color:var(--status-info);background:var(--status-info-soft);border-color:color-mix(in srgb,var(--status-info) 28%,transparent);}
.pill.cat{color:var(--status-cat);background:var(--status-cat-soft);border-color:color-mix(in srgb,var(--status-cat) 28%,transparent);}
.pill.crit{color:var(--status-danger);background:var(--status-danger-soft);border-color:color-mix(in srgb,var(--status-danger) 28%,transparent);}

/* insight card (typed) */
.insight{border:1px solid var(--border-subtle);}
.insight.momentum{background:linear-gradient(135deg,var(--status-cat-soft),transparent);border-color:color-mix(in srgb,var(--status-cat) 24%,transparent);}
.insight.attention{background:linear-gradient(135deg,var(--status-warning-soft),transparent);border-color:color-mix(in srgb,var(--status-warning) 24%,transparent);}
.insight.opportunity{background:linear-gradient(135deg,var(--status-info-soft),transparent);border-color:color-mix(in srgb,var(--status-info) 24%,transparent);}
.insight.milestone{background:linear-gradient(135deg,var(--status-success-soft),transparent);border-color:color-mix(in srgb,var(--status-success) 24%,transparent);}
.insight .widget-body{display:flex;gap:14px;align-items:flex-start;}
.insight .ai{width:40px;height:40px;border-radius:var(--r-md);display:grid;place-items:center;flex:0 0 auto;}
.insight.momentum .ai{background:var(--status-cat-soft);color:var(--status-cat);}
.insight.attention .ai{background:var(--status-warning-soft);color:var(--status-warning);}
.insight.opportunity .ai{background:var(--status-info-soft);color:var(--status-info);}
.insight.milestone .ai{background:var(--status-success-soft);color:var(--status-success);}
.insight .ai svg{width:22px;height:22px;}
.insight .it{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;}
[dir=rtl] .insight .it{letter-spacing:.02em;}
.insight.momentum .it{color:var(--status-cat);} .insight.attention .it{color:var(--status-warning);}
.insight.opportunity .it{color:var(--status-info);} .insight.milestone .it{color:var(--status-success);}
.insight p{margin:0;font-size:14px;color:var(--text-primary);line-height:1.55;}
.insight .ilink{margin-top:8px;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:var(--text-secondary);}
.insight .ilink svg{width:14px;height:14px;}

/* campaign / product cards + fallback hierarchy */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px;}
.pcard{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-elevated);transition:transform var(--t-fast) var(--ease),border-color var(--t-fast),box-shadow var(--t-fast);}
.pcard:hover{transform:translateY(-2px);border-color:var(--border-strong);box-shadow:var(--shadow-2);}
.pcard .cover{height:98px;position:relative;display:grid;place-items:center;overflow:hidden;}
.pcard .cover.img{background-size:cover;background-position:center;}
.pcard .cover .art{width:60px;height:60px;opacity:.92;}
/* brand-tier fallback cover — official full-colour Fennec-X icon */
.pcard .cover .art.brand-art{background:var(--brand-icon) center/contain no-repeat;width:54px;height:54px;opacity:.9;}
.pcard .cover .badge-src{position:absolute;top:8px;inset-inline-start:8px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--surface-base) 70%,transparent);color:var(--text-muted);backdrop-filter:blur(4px);}
.pcard .body{padding:11px 13px;}
.pcard .name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pcard .meta{font-size:11.5px;color:var(--text-muted);margin-top:5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pcard .prog{height:5px;border-radius:var(--r-pill);background:var(--viz-track);overflow:hidden;margin-top:8px;}
.pcard .prog>span{display:block;height:100%;background:var(--text-muted);}

/* command */
.cmd-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:var(--gutter);padding:18px 22px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-raised),var(--surface-elevated));border:1px solid var(--border-subtle);box-shadow:var(--shadow-2);}
.cmd-head h2{font-family:var(--font-display);font-weight:700;font-size:20px;margin:0;letter-spacing:-.01em;}
.verdict{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:14px;letter-spacing:.05em;padding:8px 14px;border-radius:var(--r-md);}
[dir=rtl] .verdict{letter-spacing:0;}
.verdict.pass{color:var(--status-success);background:var(--status-success-soft);border:1px solid color-mix(in srgb,var(--status-success) 30%,transparent);}
.verdict.warn{color:var(--status-warning);background:var(--status-warning-soft);border:1px solid color-mix(in srgb,var(--status-warning) 30%,transparent);}
.verdict.fail{color:var(--status-danger);background:var(--status-danger-soft);border:1px solid color-mix(in srgb,var(--status-danger) 30%,transparent);}
.verdict svg{width:17px;height:17px;}
.attn{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:var(--gutter);}
.attn .cell{padding:14px 16px;border-radius:var(--r-md);background:var(--surface-raised);border:1px solid var(--border-subtle);transition:border-color var(--t-fast),transform var(--t-fast) var(--ease);}
.attn .cell:hover{transform:translateY(-2px);border-color:var(--border-strong);}
.attn .cell.hot{border-color:color-mix(in srgb,var(--status-warning) 42%,transparent);background:linear-gradient(180deg,var(--status-warning-soft),var(--surface-raised));}
.attn .cell.crit{border-color:color-mix(in srgb,var(--status-danger) 46%,transparent);background:linear-gradient(180deg,var(--status-danger-soft),var(--surface-raised));}
.attn .cell .n{font-family:var(--font-num);font-weight:700;font-size:26px;letter-spacing:-.02em;}
.attn .cell.hot .n{color:var(--status-warning);} .attn .cell.crit .n{color:var(--status-danger);}
.attn .cell .l{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);margin-top:3px;display:flex;align-items:center;gap:5px;}
[dir=rtl] .attn .cell .l{letter-spacing:0;}
.dtable{width:100%;border-collapse:collapse;font-size:13px;}
.dtable th{text-align:start;padding:9px 12px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border-subtle);white-space:nowrap;}
[dir=rtl] .dtable th{letter-spacing:0;}
.dtable td{padding:11px 12px;border-bottom:1px solid var(--border-subtle);vertical-align:middle;}
.dtable tbody tr{transition:background var(--t-fast);} .dtable tbody tr:hover{background:var(--surface-interactive);}
.dtable tbody tr:last-child td{border-bottom:none;}
.dtable .who{display:flex;align-items:center;gap:10px;}
.dtable .who .av{width:30px;height:30px;border-radius:8px;overflow:hidden;flex:0 0 auto;border:1px solid var(--border-subtle);}
.dtable .who .em{font-size:11.5px;color:var(--text-muted);}
.num-cell{font-family:var(--font-num);font-variant-numeric:tabular-nums;text-align:end;white-space:nowrap;}
.ref{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary);}
.row-btn{font-size:12px;font-weight:600;padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--border-strong);color:var(--text-secondary);transition:all var(--t-fast);}
.row-btn:hover{color:var(--text-primary);border-color:var(--text-faint);background:var(--surface-interactive);}
.row-btn.primary{color:#fff;background:linear-gradient(180deg,var(--accent),var(--accent-hover));border-color:transparent;}
.check{display:grid;grid-template-columns:76px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--border-subtle);}
.check:last-child{border-bottom:none;}
.check .st{font-size:11px;font-weight:700;letter-spacing:.05em;padding-top:2px;}
.check .st.pass{color:var(--status-success);} .check .st.warn{color:var(--status-warning);} .check .st.fail{color:var(--status-danger);}
.check .cn{font-weight:600;font-size:13.5px;} .check .cw{font-size:12.5px;color:var(--text-muted);margin-top:2px;}


/* gallery */
.gal-sec{margin-bottom:34px;}
/* ---- WENEX COLOR SYSTEM — the Color Lab (canonical visual reference) ---- */
.lab{display:grid;gap:16px;}
.lab-card{background:linear-gradient(180deg,var(--surface-raised),var(--surface-elevated));border:1px solid var(--border-subtle);border-radius:var(--r-lg);box-shadow:var(--shadow-2);padding:20px 22px;}
.lab-card h4{font-family:var(--font-display);font-weight:600;font-size:14px;margin:0 0 3px;letter-spacing:-.01em;}
.lab-card .lc-sub{font-size:12px;color:var(--text-muted);margin:0 0 14px;}
/* distribution doctrine bar */
.lab-dist{display:flex;height:44px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border-subtle);}
.lab-dist span{display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;letter-spacing:.02em;white-space:nowrap;overflow:hidden;}
.lab-dist .d-mono{flex:75;background:var(--text-primary);color:var(--surface-base);}
.lab-dist .d-neu{flex:13;background:var(--text-muted);}
.lab-dist .d-fn{flex:8;background:var(--status-info);}
.lab-dist .d-brand{flex:4;background:var(--accent);}
.lab-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:10px;font-size:12px;color:var(--text-secondary);}
.lab-legend b{color:var(--text-primary);font-family:var(--font-num);}
/* ramps */
.lab-ramp{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:center;padding:9px 0;border-top:1px solid var(--hairline);}
.lab-ramp:first-of-type{border-top:none;}
.lab-ramp .rn{font-size:12.5px;font-weight:600;color:var(--text-secondary);}
.lab-ramp .rn small{display:block;color:var(--text-faint);font-weight:500;font-size:11px;}
.lab-stops{display:flex;gap:8px;flex-wrap:wrap;}
.lab-stop{width:104px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-base);}
.lab-stop .sw{height:38px;}
.lab-stop .lb{padding:4px 7px;font-size:10px;line-height:1.35;}
.lab-stop .lb b{display:block;font-weight:700;color:var(--text-primary);}
.lab-stop .lb span{font-family:var(--font-num);color:var(--text-muted);}
/* semantic token grid */
.lab-tok{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.lab-tk{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border-subtle);border-radius:var(--r-sm);background:var(--surface-base);}
.lab-tk i{width:26px;height:26px;border-radius:6px;flex:0 0 auto;border:1px solid var(--border-subtle);}
.lab-tk .tt{font-size:11px;line-height:1.3;}
.lab-tk .tt b{display:block;font-weight:700;color:var(--text-primary);font-size:11.5px;}
.lab-tk .tt span{color:var(--text-muted);font-family:var(--font-num);}
/* do / dont */
.lab-updown{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.lab-ex{border:1px solid var(--border-subtle);border-radius:var(--r-md);padding:14px 16px;background:var(--surface-base);}
.lab-ex .xh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;margin-bottom:10px;letter-spacing:.02em;text-transform:uppercase;}
.lab-ex .xh svg{width:16px;height:16px;}
.lab-ex.do .xh{color:var(--status-success);} .lab-ex.dont .xh{color:var(--status-danger);}
.lab-ex ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;}
.lab-ex li{font-size:12.5px;color:var(--text-secondary);display:flex;gap:8px;align-items:flex-start;}
.lab-ex li::before{content:'';width:6px;height:6px;border-radius:50%;flex:0 0 auto;margin-top:6px;}
.lab-ex.do li::before{background:var(--status-success);} .lab-ex.dont li::before{background:var(--status-danger);}
/* contrast badges */
.lab-cr{display:flex;flex-wrap:wrap;gap:8px;}
.lab-crb{display:flex;align-items:center;gap:8px;padding:7px 11px;border-radius:var(--r-pill);border:1px solid var(--border-subtle);background:var(--surface-base);font-size:11.5px;}
.lab-crb .chip{width:16px;height:16px;border-radius:4px;flex:0 0 auto;display:grid;place-items:center;font-size:9px;font-weight:800;}
.lab-crb .r{font-family:var(--font-num);font-weight:700;color:var(--text-primary);}
.lab-crb .ok{color:var(--status-success);font-weight:700;}
@media(max-width:760px){.lab-updown{grid-template-columns:1fr;} .lab-ramp{grid-template-columns:1fr;gap:6px;}}
/* ---- brand identity showcase (official assets, theme-aware) ---- */
.brand-band{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;}
.brand-word{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:34px 34px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--surface-raised),var(--surface-elevated));border:1px solid var(--border-subtle);box-shadow:var(--shadow-2);}
.brand-word .wm{height:46px;background:var(--brand-word-light) left center/contain no-repeat;}
:root[data-theme="dark"] .brand-word .wm{background-image:var(--brand-word-dark);}
[dir=rtl] .brand-word .wm{background-position:right center;}
.brand-word .cap{font-size:12.5px;color:var(--text-muted);}
.brand-word .cap b{color:var(--text-secondary);font-weight:700;}
.brand-icons{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.brand-chip{aspect-ratio:1;border-radius:var(--r-md);border:1px solid var(--border-subtle);display:grid;place-items:center;gap:8px;
  background:var(--surface-raised);box-shadow:var(--shadow-1);position:relative;}
.brand-chip .ic{width:46px;height:46px;background:var(--brand-icon) center/contain no-repeat;}
.brand-chip.rev{background:linear-gradient(160deg,var(--accent),var(--accent-hover));border-color:transparent;}
.brand-chip.rev .ic{background:#fff;-webkit-mask:var(--brand-icon-mask) center/contain no-repeat;mask:var(--brand-icon-mask) center/contain no-repeat;}
.brand-chip.ink{background:#0C0D11;border-color:rgba(255,255,255,.12);}
.brand-chip .bl{position:absolute;bottom:8px;inset-inline:0;text-align:center;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);}
.brand-chip.rev .bl,.brand-chip.ink .bl{color:rgba(255,255,255,.72);}
.brand-rules{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-top:4px;}
.brand-rules .r{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--text-secondary);}
.brand-rules .r svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px;color:var(--status-success);}
.brand-rules .r.no svg{color:var(--text-faint);}
@media(max-width:900px){.brand-band{grid-template-columns:1fr;}}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.swatch{border-radius:var(--r-md);border:1px solid var(--border-subtle);overflow:hidden;background:var(--surface-raised);}
.swatch .chip{height:64px;} .swatch .cap{padding:9px 12px;font-size:12px;} .swatch .cap b{display:block;font-family:var(--font-num);}
.btn-demo{display:inline-flex;gap:9px;flex-wrap:wrap;align-items:center;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-md);font-weight:700;font-size:13.5px;transition:all var(--t-fast) var(--ease);}
.btn svg{width:16px;height:16px;}
.btn.primary{color:#fff;background:linear-gradient(180deg,var(--accent),var(--accent-hover));box-shadow:var(--glow);}
.btn.secondary{color:var(--text-primary);background:var(--surface-interactive);border:1px solid var(--border-strong);}
.btn.ghost{color:var(--text-secondary);border:1px solid var(--border-strong);}
.btn.ghost:hover{color:var(--text-primary);background:var(--surface-interactive);}
.btn.danger{color:var(--status-danger);border:1px solid color-mix(in srgb,var(--status-danger) 40%,transparent);}
.btn:hover{transform:translateY(-1px);}

/* motion */
.rise{opacity:0;transform:translateY(14px);}
.reveal-on.rise,.reveal-on .rise{opacity:1;transform:none;transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease);}
.stagger>*{opacity:0;transform:translateY(12px);}
.reveal-on.stagger>*{opacity:1;transform:none;transition:opacity var(--t-standard) var(--ease-out),transform var(--t-standard) var(--ease);}
.reveal-on.stagger>*:nth-child(2){transition-delay:60ms;} .reveal-on.stagger>*:nth-child(3){transition-delay:120ms;}
.reveal-on.stagger>*:nth-child(4){transition-delay:180ms;} .reveal-on.stagger>*:nth-child(5){transition-delay:240ms;} .reveal-on.stagger>*:nth-child(6){transition-delay:300ms;}
.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);}
.reveal-on .draw{stroke-dashoffset:0;transition:stroke-dashoffset var(--t-draw) var(--ease-out);}
.orbit-arc{stroke-dasharray:var(--len);stroke-dashoffset:var(--off,var(--len));transition:stroke-dashoffset var(--t-draw) var(--ease);}
.reveal-on .orbit-arc{stroke-dashoffset:var(--off);}
.area-fill{opacity:0;} .reveal-on .area-fill{opacity:1;transition:opacity var(--t-slow) ease var(--t-standard);}

/* responsive */
@media(max-width:1180px){
  .hero{grid-template-columns:1fr;} .hero-orbit{order:-1;justify-content:flex-start;}
  .attn{grid-template-columns:repeat(3,1fr);}
  .col-3{grid-column:span 6;} .col-4{grid-column:span 6;} .col-5{grid-column:span 6;} .col-7,.col-8{grid-column:span 12;}
}
@media(max-width:900px){ .canvas{padding:16px 16px 96px;} .col-3,.col-4,.col-5,.col-6{grid-column:span 12;} .top-title{display:none;} }
@media(max-width:720px){
  .app{grid-template-columns:1fr;}
  .rail{position:fixed;bottom:0;top:auto;inset-inline:0;height:auto;width:100%;flex-direction:row;justify-content:space-around;padding:8px max(8px,env(safe-area-inset-bottom)) 8px;border-inline-end:none;border-top:1px solid var(--border-subtle);z-index:50;gap:0;}
  .brand-x,.rail-spacer,.rail-avatar{display:none;} .rail-nav{flex-direction:row;justify-content:space-around;margin:0;}
  .rail-btn[data-tip]::after{display:none;}
  .rail-btn[aria-current="page"]::before{inset-inline-start:50%;top:auto;bottom:-8px;transform:translateX(-50%);width:22px;height:3px;border-radius:3px 3px 0 0;}
  .top,.canvas{grid-column:1;} .top{flex-wrap:wrap;gap:10px;padding:12px 16px;}
  .modes{order:4;width:100%;overflow-x:auto;justify-content:flex-start;} .canvas{padding-bottom:96px;}
  .attn{grid-template-columns:repeat(2,1fr);} .hero{padding:22px 20px;border-radius:var(--r-lg);}
  .hero-priority{flex-direction:column;align-items:stretch;} .cta{justify-content:center;}
  .donut-wrap{flex-direction:column;align-items:flex-start;}
  .metric-strip{grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;display:grid !important;grid-template-columns:none;padding-bottom:6px;}
  .metric-strip>*{scroll-snap-align:start;}
  .cmd-scroll{overflow-x:auto;} .dtable{min-width:640px;}
}
@media(max-width:400px){ .hero-greet{font-size:24px;} .orbit-wrap{width:186px;height:186px;} .attn{grid-template-columns:1fr 1fr;} }
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  .rise,.stagger>*{opacity:1 !important;transform:none !important;} .draw{stroke-dashoffset:0 !important;}
  .skel{animation:none;} body::before{opacity:.7;}
}