/* ============================================================================
   FLOWSMART · UNIFIED COMPONENT LAYER  (.fs-* namespaced)
   From Claude Design "FlowSmart Redesign" (2026-07-09). Consumes the two-axis
   tokens defined in styles.css. Safe to load app-wide: every selector is
   .fs-* / .fs-scope scoped, so it does not touch legacy shell or React markup
   until those adopt the classes. See doc/UI-Redesign-DECISIONS.md.
   ============================================================================ */

/* ------------------------------------------------------------ BASE */
.fs-root,.fs-scope{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:var(--fw-body);
  line-height:var(--lh-body);
  color:var(--text-primary);
  background:var(--bg-app);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.fs-scope ::selection{background:var(--accent-soft)}

.fs-display{font-size:var(--fs-display);font-weight:var(--fw-bold);line-height:var(--lh-tight);letter-spacing:-.02em}
.fs-title{font-size:var(--fs-title);font-weight:var(--fw-bold);line-height:1.25;letter-spacing:-.01em}
.fs-h2{font-size:var(--fs-h2);font-weight:var(--fw-bold);letter-spacing:-.01em}
.fs-h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold)}
.fs-body{font-size:var(--fs-body);font-weight:var(--fw-body);color:var(--text-secondary);line-height:var(--lh-body)}
.fs-label{font-size:var(--fs-label);font-weight:var(--fw-semibold)}
.fs-eyebrow{font-size:var(--fs-caption);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.09em;color:var(--text-tertiary)}
.fs-section-title{font-size:var(--fs-label);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.04em;color:var(--text-secondary);display:flex;align-items:center;gap:var(--s2)}
.fs-mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

.msi{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;line-height:1;
  font-size:20px;display:inline-flex;flex:none;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;-webkit-font-smoothing:antialiased}
.msi-18{font-size:18px}.msi-16{font-size:16px}.msi-22{font-size:22px}

/* ------------------------------------------------------------ CONTROLS */
.fs-btn{
  font-family:inherit;font-size:var(--fs-body);font-weight:var(--fw-semibold);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:9px 15px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--surface-2);color:var(--text-primary);
  border:1px solid var(--border);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
  white-space:nowrap;
}
.fs-btn:hover{background:var(--surface-3);border-color:var(--border-strong)}
.fs-btn:active{transform:translateY(.5px)}
.fs-btn:focus-visible{outline:none;box-shadow:var(--ring)}
.fs-btn[disabled],.fs-btn.is-disabled{opacity:.45;pointer-events:none}
.fs-btn .msi{font-size:18px}

.fs-btn--primary{background:var(--accent);color:var(--text-on-accent);border-color:transparent}
.fs-btn--primary:hover{background:var(--accent-strong);border-color:transparent;box-shadow:0 6px 22px var(--accent-glow)}
.fs-btn--gradient{background:var(--gradient-accent);color:#fff;border-color:transparent;font-weight:var(--fw-bold);letter-spacing:.01em}
.fs-btn--gradient:hover{box-shadow:0 8px 28px var(--accent-glow)}
.fs-btn--ghost{background:transparent;border-color:transparent}
.fs-btn--ghost:hover{background:var(--surface-2);border-color:transparent}
.fs-btn--danger{color:var(--danger-text);background:transparent;border-color:var(--border)}
.fs-btn--danger:hover{background:var(--danger-soft);border-color:color-mix(in oklab,var(--danger) 45%,transparent)}
.fs-btn--sm{padding:6px 11px;font-size:var(--fs-micro)}
.fs-btn--lg{padding:13px 22px;font-size:var(--fs-lg)}
.fs-btn--block{width:100%}

.fs-iconbtn{
  width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);
  background:transparent;border:1px solid transparent;color:var(--text-secondary);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.fs-iconbtn:hover{background:var(--surface-2);color:var(--text-primary)}
.fs-iconbtn:focus-visible{outline:none;box-shadow:var(--ring)}
.fs-iconbtn--sm{width:30px;height:30px}

.fs-seg{display:inline-flex;gap:2px;padding:3px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--r-sm)}
.fs-seg button{font-family:inherit;font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.02em;
  color:var(--text-secondary);padding:6px 15px;border:none;border-radius:6px;background:transparent;cursor:pointer;transition:all var(--dur) var(--ease)}
.fs-seg button.is-on{background:var(--accent);color:var(--text-on-accent)}
.fs-seg button:not(.is-on):hover{color:var(--text-primary)}

.fs-chip{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:var(--fs-micro);font-weight:var(--fw-semibold);
  color:var(--text-secondary);background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 12px;cursor:pointer;transition:all var(--dur) var(--ease)}
.fs-chip:hover{border-color:var(--border-strong);color:var(--text-primary)}
.fs-chip.is-on{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent-text)}

.fs-input,.fs-select,.fs-textarea{
  width:100%;font-family:inherit;font-size:var(--fs-body);font-weight:var(--fw-body);color:var(--text-primary);
  background:var(--surface-3);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 12px;outline:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.fs-textarea{line-height:var(--lh-body);resize:vertical;min-height:96px}
.fs-input::placeholder,.fs-textarea::placeholder{color:var(--text-faint)}
.fs-input:focus,.fs-select:focus,.fs-textarea:focus{border-color:var(--accent);box-shadow:var(--ring)}
.fs-field-label{display:block;font-size:var(--fs-micro);font-weight:var(--fw-semibold);color:var(--text-secondary);margin-bottom:6px}

.fs-search{position:relative;display:flex;align-items:center}
.fs-search .msi{position:absolute;left:11px;color:var(--text-faint);pointer-events:none;font-size:18px}
.fs-search .fs-input{padding-left:36px}

.fs-switch{position:relative;width:40px;height:22px;flex:none;display:inline-block;cursor:pointer}
.fs-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.fs-switch .track{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--border-strong);transition:background var(--dur) var(--ease)}
.fs-switch .thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease)}
.fs-switch input:checked+.track{background:var(--accent)}
.fs-switch input:checked+.track .thumb{transform:translateX(18px)}
.fs-switch input:focus-visible+.track{box-shadow:var(--ring)}

.fs-check{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

.fs-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:var(--r-pill);background:var(--border-strong);outline:none;cursor:pointer}
.fs-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--surface-1);box-shadow:var(--shadow-1);transition:transform var(--dur) var(--ease)}
.fs-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.fs-range::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid var(--surface-1)}

/* ------------------------------------------------------------ SURFACES */
.fs-card{background:var(--surface-1);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--s4);box-shadow:var(--shadow-1)}
.fs-card--flush{padding:0;overflow:hidden}
.fs-card--pop{box-shadow:var(--shadow-3)}

.fs-stat{background:var(--surface-1);border:1px solid var(--border-soft);border-radius:var(--r-md);padding:var(--s4);position:relative;overflow:hidden;box-shadow:var(--shadow-1)}
.fs-stat .topbar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-accent);opacity:.9}
.fs-stat .head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--s3)}
.fs-stat .k{font-size:var(--fs-micro);font-weight:var(--fw-semibold);color:var(--text-tertiary);letter-spacing:.02em}
.fs-stat .ico{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text)}
.fs-stat .v{font-size:var(--fs-display);font-weight:var(--fw-bold);line-height:1;letter-spacing:-.01em}
.fs-stat .v.accent{background:var(--gradient-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;display:inline-block;padding-right:2px}
.fs-stat .sub{font-size:var(--fs-micro);color:var(--text-tertiary);margin-top:6px}

.fs-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-caption);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:var(--r-pill);line-height:1.4}
.fs-badge--accent{background:var(--accent-soft);color:var(--accent-text)}
.fs-badge--success{background:var(--success-soft);color:var(--success-text)}
.fs-badge--warning{background:var(--warning-soft);color:var(--warning-text)}
.fs-badge--danger{background:var(--danger-soft);color:var(--danger-text)}
.fs-badge--neutral{background:var(--surface-2);color:var(--text-secondary);border:1px solid var(--border)}
.fs-badge--outline{background:transparent;border:1px solid var(--border);color:var(--text-tertiary)}

.fs-dot{width:8px;height:8px;border-radius:50%;flex:none;display:inline-block}
.fs-dot--ready{background:var(--success)}
.fs-dot--ready.is-connected{box-shadow:0 0 0 3px var(--success-soft)}
.fs-dot--cooldown{background:var(--warning)}
.fs-dot--error{background:var(--danger)}
.fs-dot--running{background:var(--accent);animation:fs-pulse 1.5s ease-out infinite}
@keyframes fs-pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

.fs-progress{height:6px;border-radius:var(--r-pill);background:var(--surface-2);overflow:hidden}
[data-mode="dark"] .fs-progress{background:rgba(255,255,255,.07)}
.fs-progress i{display:block;height:100%;border-radius:var(--r-pill);background:var(--gradient-accent)}
.fs-progress i.success{background:var(--success)}
.fs-progress i.warning{background:var(--warning)}
.fs-progress i.danger{background:var(--danger)}

/* ------------------------------------------------------------ NAVIGATION (unified rail) */
.fs-rail{width:var(--rail-w);flex:none;background:var(--bg-chrome);border-right:1px solid var(--border-soft);
  display:flex;flex-direction:column;overflow:hidden}
.fs-rail__brand{display:flex;align-items:center;gap:9px;padding:var(--s5) var(--s5) var(--s4);font-size:var(--fs-h3);font-weight:var(--fw-bold);letter-spacing:-.02em}
.fs-rail__brand .smart{color:var(--accent-text)}
.fs-rail__brand .ver{font-size:var(--fs-caption);font-weight:var(--fw-semibold);color:var(--text-faint);letter-spacing:0}
.fs-rail__nav{flex:1;overflow-y:auto;padding:0 var(--s3) var(--s4);display:flex;flex-direction:column;gap:2px}
.fs-navlabel{font-size:var(--fs-caption);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.09em;color:var(--text-faint);padding:var(--s4) var(--s3) 6px}
.fs-navitem{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:var(--r-sm);
  color:var(--text-secondary);font-size:var(--fs-body);font-weight:var(--fw-medium);cursor:pointer;border:none;background:none;
  position:relative;text-align:left;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.fs-navitem .msi{font-size:20px;flex:none}
.fs-navitem:hover{background:var(--surface-2);color:var(--text-primary)}
.fs-navitem.is-active{background:var(--accent-soft);color:var(--accent-text);font-weight:var(--fw-semibold)}
.fs-navitem.is-active::before{content:"";position:absolute;left:calc(-1 * var(--s3));top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.fs-navitem .count{margin-left:auto;font-size:var(--fs-caption);font-weight:var(--fw-bold)}
.fs-navitem--nested{padding-left:var(--s7)}
.fs-rail__divider{height:1px;background:var(--border-soft);margin:var(--s3) var(--s2)}
.fs-rail__foot{padding:var(--s3);border-top:1px solid var(--border-soft)}

.fs-topbar{height:var(--topbar-h);display:flex;align-items:center;gap:var(--s3);padding:0 var(--s5);
  border-bottom:1px solid var(--border-soft);background:var(--bg-chrome)}
.fs-toolbar{height:var(--toolbar-h);display:flex;align-items:center;gap:var(--s2);padding:0 var(--s3);
  border-bottom:1px solid var(--border-soft);background:var(--bg-chrome)}
.fs-urlbar{flex:1;height:34px;display:flex;align-items:center;padding:0 13px;border-radius:var(--r-sm);
  background:var(--surface-1);border:1px solid var(--border);color:var(--text-secondary);font-size:var(--fs-label);
  font-family:var(--font-mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.fs-tabbar{height:40px;display:flex;align-items:flex-end;gap:3px;padding:0 var(--s2);background:var(--bg-chrome);border-bottom:1px solid var(--border-soft)}
.fs-tab{display:flex;align-items:center;gap:8px;max-width:190px;padding:7px 12px;border-radius:var(--r-sm) var(--r-sm) 0 0;
  color:var(--text-secondary);font-size:var(--fs-label);font-weight:var(--fw-medium);cursor:pointer;white-space:nowrap}
.fs-tab:hover{background:var(--surface-2);color:var(--text-primary)}
.fs-tab.is-active{background:var(--surface-1);color:var(--text-primary)}
.fs-tab .x{opacity:.5;font-size:15px}
.fs-tab .x:hover{opacity:1;color:var(--danger-text)}

.fs-statusbar{height:var(--statusbar-h);display:flex;align-items:center;gap:var(--s4);padding:0 var(--s4);
  border-top:1px solid var(--border-soft);background:var(--bg-chrome);color:var(--text-tertiary);font-size:var(--fs-micro)}
.fs-statusbar .sep{color:var(--border-strong)}

.fs-rptabs{display:flex;gap:var(--s5);padding:var(--s5) var(--s4) 0;border-bottom:1px solid var(--border-soft)}
.fs-rptab{position:relative;padding-bottom:12px;display:flex;align-items:center;gap:7px;cursor:pointer;
  font-size:var(--fs-micro);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary)}
.fs-rptab.is-on{color:var(--text-primary)}
.fs-rptab.is-on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--accent)}
.fs-rptab .n{padding:1px 7px;border-radius:var(--r-pill);font-size:var(--fs-caption);background:var(--surface-2);color:var(--text-secondary)}
.fs-rptab.is-on .n{background:var(--accent);color:var(--text-on-accent)}

/* ------------------------------------------------------------ OVERLAYS */
.fs-overlay{position:absolute;inset:0;background:var(--overlay);backdrop-filter:blur(3px);display:grid;place-items:center;z-index:50}
.fs-modal{width:400px;max-width:calc(100% - 32px);background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--shadow-3)}
.fs-modal h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);margin:0 0 6px}
.fs-modal p{font-size:var(--fs-label);color:var(--text-secondary);line-height:var(--lh-body);margin:0 0 var(--s4)}
.fs-modal__acts{display:flex;justify-content:flex-end;gap:var(--s2);margin-top:var(--s5)}

.fs-toast{display:inline-flex;align-items:center;gap:10px;background:var(--surface-1);border:1px solid var(--border);
  border-radius:var(--r-md);padding:11px 16px;font-size:var(--fs-label);font-weight:var(--fw-semibold);box-shadow:var(--shadow-3)}
.fs-toast .msi{font-size:18px}
.fs-toast--success{border-color:color-mix(in oklab,var(--success) 45%,transparent)}
.fs-toast--success .msi{color:var(--success-text)}
.fs-toast--danger{border-color:color-mix(in oklab,var(--danger) 45%,transparent)}
.fs-toast--danger .msi{color:var(--danger-text)}
.fs-toast--info .msi{color:var(--accent-text)}

.fs-scope ::-webkit-scrollbar{width:10px;height:10px}
.fs-scope ::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--r-pill);border:3px solid transparent;background-clip:padding-box}
.fs-scope ::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover);background-clip:padding-box}
.fs-scope ::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){.fs-scope *,.fs-root *{animation-duration:.001ms!important;transition-duration:.001ms!important}}