/* ============================================================================
   AutoDMS UI replica — the real product's design system ("Calm density")
   transcribed from frontend/src/app/globals.css + components. Used to render
   faithful, animatable screens of the application inside the landing page.
   Scale: the app's own 13px/20px body, 11px captions, 10px radius, Inter.
   ========================================================================== */

.app {
  --a-surface: oklch(0.985 0.004 255);
  --a-card: #fff;
  --a-sunken: oklch(0.968 0.005 255);
  --a-muted: oklch(0.968 0.005 255);
  --a-fg: #000742;
  --a-sec: oklch(0.46 0.03 260);
  --a-ter: oklch(0.555 0.025 260);
  --a-primary: #0065ff;
  --a-primary-hover: oklch(0.55 0.20 258);
  --a-accent: #eff4ff;
  --a-accent-fg: #0052cc;
  --a-border: #e8ecf4;
  --a-border-strong: oklch(0.86 0.01 255);
  --a-success: oklch(0.62 0.15 150);
  --a-success-subtle: oklch(0.965 0.04 152);
  --a-success-fg: oklch(0.40 0.11 150);
  --a-warning: oklch(0.75 0.15 78);
  --a-warning-subtle: oklch(0.965 0.06 82);
  --a-warning-fg: oklch(0.45 0.12 70);
  --a-info: oklch(0.62 0.16 250);
  --a-info-subtle: oklch(0.965 0.04 250);
  --a-info-fg: oklch(0.42 0.12 252);
  --a-danger: oklch(0.58 0.22 27);
  --a-danger-subtle: oklch(0.965 0.05 25);
  --a-danger-fg: oklch(0.47 0.18 27);
  --a-chart-1: #0065ff; --a-chart-2: #00b894; --a-chart-3: #ffb100; --a-chart-4: #ff6ce4; --a-chart-5: #000742;
  --a-e1: 0 1px 2px oklch(0.30 0.04 264 / 0.06);
  --a-e2: 0 2px 6px oklch(0.30 0.04 264 / 0.08), 0 1px 2px oklch(0.30 0.04 264 / 0.05);
  --a-e3: 0 8px 24px oklch(0.30 0.04 264 / 0.10), 0 2px 6px oklch(0.30 0.04 264 / 0.06);
  --a-e4: 0 16px 40px oklch(0.20 0.04 264 / 0.16), 0 4px 12px oklch(0.20 0.04 264 / 0.08);
  --a-ring: 0 0 0 1px oklch(0.15 0.05 264 / 0.10);

  position: relative; width: 1280px; height: 800px; display: grid; grid-template-columns: 256px 1fr;
  background: var(--a-surface); color: var(--a-fg);
  font-family: var(--sans); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-align: left; overflow: hidden; user-select: none;
}
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app svg.i { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.app .i-3 { width: 12px; height: 12px; } .app .i-35 { width: 14px; height: 14px; } .app .i-5 { width: 20px; height: 20px; } .app .i-6 { width: 24px; height: 24px; }
.app .mono { font-family: var(--mono); }
.app .cap { font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.01em; }
.app .sm { font-size: 12px; line-height: 18px; }
.app .c2 { color: var(--a-sec); } .app .ter { color: var(--a-ter); }
.app .trunc { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- sidebar ---------- */
.app .sb { display: flex; flex-direction: column; background: var(--a-surface); padding: 0 8px; min-height: 0; }
.app .sb-head { height: 64px; display: flex; align-items: center; padding: 0 8px; }
.app .sb-lbl { height: 28px; display: flex; align-items: center; padding: 0 12px; margin: 8px 0 2px; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: color-mix(in oklch, var(--a-sec) 60%, transparent); }
.app .sb-nav { display: flex; flex-direction: column; gap: 2px; }
.app .sb-item { position: relative; height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 18px; color: var(--a-fg); }
.app .sb-item svg { color: var(--a-sec); }
.app .sb-item.on { background: color-mix(in oklch, var(--a-primary) 10%, transparent); box-shadow: var(--a-e1); font-weight: 600; }
.app .sb-item.on svg { color: var(--a-primary); }
.app .sb-item .chev { margin-left: auto; width: 14px; height: 14px; color: var(--a-sec); }
.app .sb-sub { margin: 2px 0 2px 26px; padding: 2px 0 2px 10px; border-left: 1px solid var(--a-border); display: flex; flex-direction: column; gap: 4px; }
.app .sb-sub a, .app .sb-sub span { display: block; height: 28px; line-height: 28px; padding: 0 8px; border-radius: 8px; font-size: 12px; color: var(--a-fg); }
.app .sb-sub .on { background: color-mix(in oklch, var(--a-primary) 10%, transparent); color: var(--a-primary); font-weight: 600; }
.app .sb-foot { margin-top: auto; padding: 8px 0; }
.app .sb-user { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; }
.app .avatar { position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; box-shadow: var(--a-e1); background: linear-gradient(135deg, var(--a-primary), color-mix(in oklch, var(--a-primary) 55%, var(--a-chart-4))); flex-shrink: 0; }
.app .avatar i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: var(--a-success); box-shadow: 0 0 0 2px var(--a-surface); }
.app .avatar.sm { width: 24px; height: 24px; font-size: 9px; }
.app .sb-user b { display: block; font-size: 12px; font-weight: 500; }
.app .sb-user small { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in oklch, var(--a-sec) 80%, transparent); }

/* brand (exact glyph from autodms-brand.tsx) */
.app .brand-app { display: inline-flex; align-items: flex-start; gap: 10px; }
.app .brand-app svg { width: 44px; height: 34px; }
.app .brand-app .w { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.app .brand-app .w b { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; color: var(--a-fg); }
.app .brand-app .w b em { font-style: normal; color: #A259FF; }
.app .brand-app .w small { align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-sec); background: var(--a-muted); border-radius: 6px; padding: 2px 4px; margin: 0 -4px; }
.dms-checkline { stroke-dasharray: 100; animation: dms-checkdraw 3.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes dms-checkdraw { 0% { stroke-dashoffset: 100; } 35% { stroke-dashoffset: 0; } 65% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
.dms-ping-icon { transform-origin: 112px 54px; animation: dms-ping 3.2s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes dms-ping { 0%, 58% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.9); } 84% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; transform: scale(.4); } }
.dms-arrow-group { animation: dms-arrow-nudge 1.8s ease-in-out infinite, dms-arrow-reveal 3.2s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes dms-arrow-nudge { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(3px,-2.6px); } }
@keyframes dms-arrow-reveal { 0%, 32% { opacity: 0; } 40%, 60% { opacity: 1; } 68%, 100% { opacity: 0; } }

/* ---------- main / header ---------- */
.app .main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app .hd { height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 8px; background: var(--a-surface); flex-shrink: 0; }
.app .hd .ib { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--a-sec); }
.app .hd .ttl { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; min-width: 0; }
.app .hd .ttl b { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.app .hd .ttl small { font-size: 11px; color: var(--a-sec); }
.app .hd .crumb { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.app .hd .crumb svg { color: color-mix(in oklch, var(--a-sec) 70%, transparent); }
.app .hd .crumb .sep { color: color-mix(in oklch, var(--a-sec) 40%, transparent); }
.app .hd .right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.app .hd .act { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--a-fg); }
.app .hd .act svg { color: var(--a-sec); }
.app .qs { display: flex; align-items: center; gap: 8px; height: 32px; width: 320px; padding: 0 10px; border-radius: 6px; border: 1px solid color-mix(in oklch, var(--a-border) 80%, transparent); background: var(--a-surface); font-size: 12px; color: var(--a-sec); }
.app .qs kbd { margin-left: auto; display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 4px; border: 1px solid color-mix(in oklch, var(--a-border) 60%, transparent); background: var(--a-muted); font-family: var(--mono); font-size: 9.5px; color: color-mix(in oklch, var(--a-sec) 80%, transparent); }
.app .site { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--a-border); background: var(--a-surface); font-size: 12px; }
.app .site .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--a-primary); }
.app .hd .btn32 { position: relative; width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--a-border); background: var(--a-surface); display: grid; place-items: center; color: var(--a-sec); }
.app .hd .badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--a-danger); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--a-surface); }

/* ---------- page ---------- */
.app .pg { flex: 1; min-height: 0; overflow: hidden; padding: 20px 24px; background: color-mix(in oklch, var(--a-muted) 40%, transparent); display: flex; flex-direction: column; gap: 16px; position: relative; }
.app .pg.sunk { background: color-mix(in oklch, var(--a-muted) 50%, transparent); }
.app .orbs { position: absolute; inset: 0 0 auto; height: 260px; overflow: hidden; pointer-events: none; }
.app .orbs i { position: absolute; border-radius: 50%; filter: blur(64px); }
.app .orbs i:nth-child(1) { width: 384px; height: 384px; top: -33%; right: 10%; background: radial-gradient(circle, color-mix(in oklch, var(--a-primary) 10%, transparent) 0%, transparent 70%); }
.app .orbs i:nth-child(2) { width: 320px; height: 320px; top: -25%; left: 15%; background: radial-gradient(circle, color-mix(in oklch, var(--a-success) 8%, transparent) 0%, transparent 70%); }

/* buttons, inputs, chips (app) */
.app .b { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 10px; font-size: 14px; font-weight: 500; white-space: nowrap; border: 1px solid transparent; }
.app .b.pr { background: var(--a-primary); color: #fff; }
.app .b.ol { background: var(--a-surface); border-color: var(--a-border); color: var(--a-fg); }
.app .b.gh { color: var(--a-fg); }
.app .b.sm { height: 28px; padding: 0 10px; font-size: 12.8px; border-radius: 8px; }
.app .b svg { width: 16px; height: 16px; }
.app .inp { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--a-border); background: transparent; font-size: 12px; color: var(--a-sec); }
.app .seg { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 2px; border-radius: 10px; background: var(--a-sunken); }
.app .seg span { display: inline-flex; align-items: center; gap: 6px; height: 100%; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--a-sec); }
.app .seg span.on { background: var(--a-card); color: var(--a-fg); box-shadow: var(--a-e1); }
.app .pill { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 999px; border: 1px solid; font-size: 11px; font-weight: 500; white-space: nowrap; line-height: 1; }
.app .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.app .pill.nodot::before { display: none; }
.app .pill.ok { background: var(--a-success-subtle); color: var(--a-success-fg); border-color: color-mix(in oklch, var(--a-success) 20%, transparent); }
.app .pill.wa { background: var(--a-warning-subtle); color: var(--a-warning-fg); border-color: color-mix(in oklch, var(--a-warning) 20%, transparent); }
.app .pill.in { background: var(--a-info-subtle); color: var(--a-info-fg); border-color: color-mix(in oklch, var(--a-info) 20%, transparent); }
.app .pill.da { background: var(--a-danger-subtle); color: var(--a-danger-fg); border-color: color-mix(in oklch, var(--a-danger) 20%, transparent); }
.app .pill.ne { background: var(--a-muted); color: var(--a-sec); border-color: var(--a-border); }
.app .pill.pr { background: var(--a-accent); color: var(--a-fg); border-color: color-mix(in oklch, var(--a-primary) 20%, transparent); }
.app .pill.pr::before { background: var(--a-primary); }
.app .pill.ok::before { background: var(--a-success); } .pill.wa::before { background: var(--a-warning); } .pill.in::before { background: var(--a-info); } .pill.da::before { background: var(--a-danger); } .pill.ne::before { background: var(--a-ter); }

/* cards */
.app .card { background: var(--a-card); border-radius: 14px; box-shadow: var(--a-ring); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.app .card h5 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; font-weight: 500; line-height: 1.35; }
.app .card h5 .ic { width: 32px; height: 32px; border-radius: 10px; background: var(--a-accent); color: var(--a-primary); display: grid; place-items: center; }
.app .card h5 .cnt { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--a-sec); }
.app .kpi { position: relative; overflow: hidden; background: var(--a-card); border-radius: 22px; box-shadow: var(--a-e1); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.app .kpi.hero { padding: 24px; }
.app .kpi .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.app .kpi .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in oklch, var(--a-sec) 80%, transparent); }
.app .kpi .val { font-size: 28px; line-height: 1; font-weight: 700; letter-spacing: -0.01em; margin-top: 12px; }
.app .kpi.hero .val { font-size: 34px; }
.app .kpi .sub { font-size: 11px; font-weight: 500; color: var(--a-sec); margin-top: 8px; }
.app .kpi .delta { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 600; margin-left: 8px; vertical-align: middle; box-shadow: inset 0 0 0 1px; }
.app .kpi .delta.up { background: var(--a-success-subtle); color: var(--a-success-fg); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--a-success) 30%, transparent); }
.app .kpi .delta.down { background: var(--a-danger-subtle); color: var(--a-danger-fg); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--a-danger) 30%, transparent); }
.app .kpi .delta svg { width: 10px; height: 10px; }
.app .kpi .ico { width: 44px; height: 44px; border-radius: 16px; display: grid; place-items: center; color: #fff; box-shadow: var(--a-e1), inset 0 0 0 1px rgba(0,0,0,.04); flex-shrink: 0; }
.app .kpi.hero .ico { width: 56px; height: 56px; }
.app .kpi .ico svg { width: 20px; height: 20px; }
.app .kpi.hero .ico svg { width: 24px; height: 24px; }
.app .kpi.compact { padding: 14px; border-radius: 22px; gap: 0; }
.app .kpi.compact .val { font-size: 16px; margin-top: 6px; }
.app .kpi.compact .ico { width: 32px; height: 32px; border-radius: 12px; background: var(--a-muted); color: var(--a-sec); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--a-border) 60%, transparent); }
.app .kpi.compact .ico svg { width: 16px; height: 16px; }
.app .g-primary { background: linear-gradient(135deg, var(--a-primary), color-mix(in oklch, var(--a-primary) 55%, var(--a-chart-4))); }
.app .g-emerald { background: linear-gradient(135deg, var(--a-success), color-mix(in oklch, var(--a-success) 55%, var(--a-chart-1))); }
.app .g-amber { background: linear-gradient(135deg, var(--a-warning), color-mix(in oklch, var(--a-warning) 60%, var(--a-danger))); }
.app .g-violet { background: linear-gradient(135deg, var(--a-chart-4), color-mix(in oklch, var(--a-chart-4) 55%, var(--a-primary))); }
.app .g-sky { background: linear-gradient(135deg, var(--a-info), color-mix(in oklch, var(--a-info) 55%, var(--a-success))); }
.app .g-ai { background: linear-gradient(135deg, #0065ff, #00e1af); }
.app .spark { width: 100%; height: 56px; }
.app .spark path.l { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.app .spark path.a { opacity: 0.12; }

/* bar list (Répartition …) */
.app .bars { display: flex; flex-direction: column; }
.app .bars .r { display: grid; grid-template-columns: 1fr auto auto; gap: 0 14px; align-items: center; padding: 8px 0 6px; border-bottom: 1px solid color-mix(in oklch, var(--a-border) 60%, transparent); font-size: 12.5px; }
.app .bars .r:last-child { border-bottom: 0; }
.app .bars .r .n { display: flex; align-items: center; gap: 8px; }
.app .bars .r .n::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--a-primary)); }
.app .bars .r b { font-weight: 600; }
.app .bars .r .p { color: var(--a-sec); font-size: 12px; min-width: 40px; text-align: right; }
.app .bars .r .bar { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--a-muted); margin-top: 6px; overflow: hidden; }
.app .bars .r .bar i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--c, var(--a-primary)); }

/* table */
.app .tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.app .tbl th { height: 40px; padding: 0 8px; text-align: left; font-size: 11px; font-weight: 500; color: var(--a-sec); background: color-mix(in oklch, var(--a-muted) 40%, transparent); border-bottom: 1px solid color-mix(in oklch, var(--a-border) 60%, transparent); white-space: nowrap; }
.app .tbl td { height: 44px; padding: 8px; border-bottom: 1px solid color-mix(in oklch, var(--a-border) 40%, transparent); white-space: nowrap; vertical-align: middle; }
.app .tbl td.num, .app .tbl th.num { text-align: right; }
.app .tbl tr.sel td { background: color-mix(in oklch, var(--a-accent) 30%, transparent); }
.app .tbl .ref { font-family: var(--mono); font-weight: 600; color: var(--a-sec); font-size: 11px; }
.app .toolbar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-bottom: 1px solid color-mix(in oklch, var(--a-border) 60%, transparent); font-size: 12px; }
.app .filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* kanban */
.app .kb { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; align-items: start; }
.app .kb .col h6 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 0 4px; font-size: 12px; font-weight: 600; }
.app .kb .col h6::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.app .kb .col h6 .cnt { font-size: 11px; font-weight: 500; color: var(--a-ter); background: var(--a-muted); border-radius: 999px; padding: 2px 6px; }
.app .kb .well { background: color-mix(in oklch, var(--a-muted) 80%, transparent); border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; }
.app .kc { background: var(--a-card); border-radius: 14px; box-shadow: var(--a-ring); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.app .kc .t { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app .kc .ref { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--a-sec); }
.app .kc .cu { font-size: 12px; font-weight: 500; }
.app .kc .ve { font-size: 11px; color: var(--a-ter); margin-top: -4px; }
.app .kc .f { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--a-border); font-size: 11px; color: var(--a-ter); }
.app .kc .f b { font-family: var(--mono); font-weight: 600; color: var(--a-fg); }
.app .kc .as { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--a-ter); }
.app .kc.drag { box-shadow: var(--a-e3), 0 0 0 2px color-mix(in oklch, var(--a-primary) 30%, transparent); transform: rotate(-1.5deg); }

/* workflow stepper */
.app .stepper { background: var(--a-card); border-bottom: 1px solid var(--a-border); padding: 12px 20px 8px; display: flex; align-items: flex-start; }
.app .stepper .st { width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.app .stepper .st .c { position: relative; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.app .stepper .st.done .c { background: var(--a-primary); color: #fff; box-shadow: 0 1px 2px color-mix(in oklch, var(--a-primary) 20%, transparent); }
.app .stepper .st.done .c svg { width: 14px; height: 14px; stroke-width: 3; }
.app .stepper .st.cur .c { background: var(--a-primary); color: #fff; box-shadow: 0 4px 6px -1px color-mix(in oklch, var(--a-primary) 30%, transparent), 0 0 0 2px color-mix(in oklch, var(--a-primary) 10%, transparent); }
.app .stepper .st.cur .c::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: color-mix(in oklch, var(--a-primary) 20%, transparent); animation: ping 2s cubic-bezier(0,0,.2,1) infinite; z-index: -1; }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.app .stepper .st.todo .c { border: 2px solid color-mix(in oklch, var(--a-sec) 20%, transparent); background: var(--a-surface); color: color-mix(in oklch, var(--a-sec) 40%, transparent); font-weight: 500; }
.app .stepper .st span { font-size: 11px; line-height: 1.2; transform: scale(.85); transform-origin: top; }
.app .stepper .st.done span { color: var(--a-sec); font-weight: 500; }
.app .stepper .st.cur span { color: var(--a-primary); font-weight: 600; }
.app .stepper .st.todo span { color: color-mix(in oklch, var(--a-sec) 40%, transparent); }
.app .stepper .ln { flex: 1; min-width: 8px; max-width: 48px; padding: 14px 2px 0; }
.app .stepper .ln i { display: block; height: 2px; border-radius: 2px; background: color-mix(in oklch, var(--a-sec) 15%, transparent); }
.app .stepper .ln.on i { background: var(--a-primary); }
.app .stepper .go { margin-left: auto; margin-top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--a-primary); color: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px color-mix(in oklch, var(--a-primary) 20%, transparent); }
.app .stepper .go svg { width: 14px; height: 14px; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.app .sla { display: flex; align-items: center; gap: 6px; padding: 6px 20px 10px; font-size: 11px; color: var(--a-sec); background: var(--a-card); border-bottom: 1px solid var(--a-border); }
.app .sla.warn { color: var(--a-warning-fg); font-weight: 500; }

/* toast (sonner) */
.app .toast { display: flex; align-items: center; gap: 10px; width: 296px; padding: 10px 8px 10px 10px; border-radius: 10px; border: 1px solid var(--a-border); border-left: 2px solid var(--a-success); background: var(--a-card); box-shadow: var(--a-e3); font-size: 12px; }
.app .toast svg { width: 16px; height: 16px; color: var(--a-success); }
.app .toast.info { border-left-color: var(--a-info); } .toast.info svg { color: var(--a-info); }
.app .toast b { display: block; font-weight: 500; line-height: 1.3; }
.app .toast small { display: block; font-size: 11px; color: var(--a-sec); margin-top: 2px; }

/* AI pulse chip (login page motif) */
.aichip { font-family: var(--sans); display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 999px; background: var(--a-card, #fff); box-shadow: var(--a-e3, 0 8px 24px oklch(0.30 0.04 264 / 0.10)); outline: 1px solid rgba(0,0,0,.04); font-size: 12px; font-weight: 500; color: #000742; }
.aichip .g { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #0065ff, #00e1af); display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.aichip .g svg { width: 14px; height: 14px; }
.aichip .txt { position: relative; min-width: 0; }
.aichip .txt span { display: block; white-space: nowrap; }
.aichip .txt span + span { position: absolute; inset: 0; opacity: 0; }
.aichip .txt span.on { opacity: 1; transition: opacity .35s; } .aichip .txt span.off { opacity: 0; transition: opacity .35s; }
.aichip .live { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.62 0.15 150); position: relative; flex-shrink: 0; }
.aichip .live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.6s cubic-bezier(0,0,.2,1) infinite; }

/* lead detail widgets */
.app .score { display: inline-flex; align-items: center; gap: 8px; }
.app .score .ring { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: conic-gradient(var(--a-success) calc(var(--v) * 1%), var(--a-muted) 0); position: relative; }
.app .score .ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--a-card); }
.app .score .ring b { position: relative; }
.app .tl { display: flex; flex-direction: column; gap: 10px; }
.app .tl .ev { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.app .tl .ev .ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--a-muted); color: var(--a-sec); }
.app .tl .ev .ic.wa { background: #e7f8ee; color: #128c5b; }
.app .tl .ev .ic.ai { background: var(--a-accent); color: var(--a-primary); }
.app .tl .ev b { font-size: 12px; font-weight: 500; display: block; }
.app .tl .ev small { font-size: 11px; color: var(--a-ter); }
.app .tl .ev p { margin: 4px 0 0; font-size: 12px; color: var(--a-sec); line-height: 1.45; }
.app .bubble { background: var(--a-sunken); border-radius: 12px; padding: 10px 12px; font-size: 12px; line-height: 1.45; }
.app .bubble.ai { background: var(--a-accent); border: 1px solid color-mix(in oklch, var(--a-primary) 15%, transparent); }

/* doc slots */
.app .slots { display: flex; flex-direction: column; gap: 6px; }
.app .slot { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px dashed var(--a-border-strong); font-size: 12px; }
.app .slot.ok { border-style: solid; border-color: var(--a-border); background: var(--a-card); }
.app .slot .ic { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--a-muted); color: var(--a-sec); }
.app .slot.ok .ic { background: var(--a-success-subtle); color: var(--a-success-fg); }
.app .slot .pill { margin-left: auto; }

/* planning grid */
.app .plan { display: grid; grid-template-columns: 120px repeat(5, 1fr); gap: 1px; background: var(--a-border); border: 1px solid var(--a-border); border-radius: 12px; overflow: hidden; font-size: 11px; }
.app .plan > div { background: var(--a-card); min-height: 52px; padding: 6px 8px; position: relative; }
.app .plan .h { background: color-mix(in oklch, var(--a-muted) 60%, transparent); font-weight: 600; color: var(--a-sec); min-height: 36px; display: flex; align-items: center; }
.app .plan .bay { font-weight: 600; display: flex; align-items: center; }
.app .plan .ev { border-radius: 8px; padding: 4px 8px; font-weight: 500; color: #fff; margin: 2px 0; }
.app .plan .ev.b { background: var(--a-primary); } .plan .ev.g { background: var(--a-success); } .plan .ev.a { background: var(--a-warning); color: #3a2a00; } .plan .ev.v { background: var(--a-chart-4); }

/* generic layout helpers */
.app .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.app .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.app .g21 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.app .g12 { display: grid; grid-template-columns: 1fr 2fr; gap: 12px; }
.app .g32 { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; }
.app .flex { display: flex; align-items: center; gap: 8px; }
.app .between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app .stack { display: flex; flex-direction: column; gap: 6px; }
.app .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.app .hidden-y { overflow: hidden; }

/* ============================================================================
   Life inside the screens — looped, product-specific motion (blurred for
   privacy, still readable as activity). All loops stop under reduced motion.
   ========================================================================== */
@property --v { syntax: '<number>'; inherits: false; initial-value: 0; }
/* kanban: the card being dragged travels to the next column, the drop zone breathes */
.app .kc.drag { animation: kb-drag 7s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes kb-drag { 0%, 12% { transform: rotate(0) translate(0,0); box-shadow: var(--a-ring); } 22% { transform: rotate(-2deg) translate(6px,-4px); box-shadow: var(--a-e3), 0 0 0 2px color-mix(in oklch, var(--a-primary) 30%, transparent); } 48% { transform: rotate(-1.5deg) translate(236px, 4px); box-shadow: var(--a-e3), 0 0 0 2px color-mix(in oklch, var(--a-primary) 30%, transparent); } 58%, 100% { transform: rotate(0) translate(236px, 0); box-shadow: var(--a-ring); } }
.app .kc.drop { animation: kb-drop 7s ease-in-out infinite; }
@keyframes kb-drop { 0%, 12% { opacity: .35; } 30%, 50% { opacity: 1; background: color-mix(in oklch, var(--a-primary) 6%, transparent); } 60%, 100% { opacity: 0; } }
.app .pg .float-toast.show { animation: toast-in 7s ease-in-out infinite; }
@keyframes toast-in { 0%, 55% { opacity: 0; transform: translateY(-8px); } 62%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* score / progress rings fill */
.app .score .ring { animation: ring-fill 1.6s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes ring-fill { from { --v: 0; } }
/* typing caret on the AI suggested reply */
.app .bubble.ai::after { content: ""; display: inline-block; width: 2px; height: 12px; margin-left: 3px; vertical-align: -2px; background: var(--a-primary); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* table rows: a review sweep travels down the list */
.app .tbl tbody tr { animation: row-sweep 9s ease-in-out infinite; animation-delay: calc(var(--r, 0) * .9s); }
@keyframes row-sweep { 0%, 6% { background: transparent; } 9%, 14% { background: color-mix(in oklch, var(--a-accent) 70%, transparent); } 20%, 100% { background: transparent; } }
/* planning bars settle into place, KPI values tick */
.app .plan .ev { transform-origin: left center; animation: bar-in .9s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--r, 0) * .12s + .3s); }
@keyframes bar-in { from { transform: scaleX(0); opacity: 0; } }
/* document drawers check in one after another, the pending file slides in */
.app .slot.ok .ic { animation: pop .5s cubic-bezier(.2,.9,.3,1.4) backwards; animation-delay: calc(var(--r, 0) * .18s + .4s); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }
.app .slot { animation: slide-in .5s var(--ease, ease) backwards; animation-delay: calc(var(--r, 0) * .1s); }
@keyframes slide-in { from { transform: translateX(-8px); opacity: 0; } }
/* workflow designer: execution travels across the nodes */
.app .wf-node { animation: node-run 8s ease-in-out infinite; animation-delay: calc(var(--r, 0) * .7s); }
@keyframes node-run { 0%, 4% { box-shadow: var(--a-ring); } 7%, 11% { box-shadow: 0 0 0 2px var(--a-primary), var(--a-e2); } 15%, 100% { box-shadow: var(--a-ring); } }
/* dashboard bars grow in, the AI fab breathes */
.app .bars .r .bar i { transform-origin: left; animation: grow .9s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(var(--r, 0) * .08s + .9s); }
@keyframes grow { from { transform: scaleX(0); } }
.app .fab { animation: fab 3.2s ease-in-out infinite; }
@keyframes fab { 0%, 100% { box-shadow: var(--a-e3); } 50% { box-shadow: var(--a-e3), 0 0 0 10px color-mix(in oklch, var(--a-primary) 14%, transparent); } }
/* bento: signature statuses advance, notifications arrive, connector log ticks */
.app .cycle > * { animation: cycle 6s ease-in-out infinite; animation-delay: calc(var(--r, 0) * 2s); }
@keyframes cycle { 0%, 10% { opacity: .35; transform: translateX(-4px); } 18%, 100% { opacity: 1; transform: none; } }
.app .live-in > .card { animation: live-in 9s ease-in-out infinite; animation-delay: calc(var(--r, 0) * 3s); }
@keyframes live-in { 0% { opacity: 0; transform: translateY(-10px); } 8%, 100% { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .app * { animation: none !important; } }