/* =====================================================================
   app-shell.css — page-local LAYOUT only.
   ---------------------------------------------------------------------
   Atoms come from finaxis-components.css. This file only describes the
   PAGE STRUCTURE (shell grid, login two-column, placeholder card, etc).
   Every colour/space/radius/shadow must consume a --fnx-* token.
   ===================================================================== */

/* ====== APP SHELL ====== */

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--fnx-font-sans);
  background: var(--fnx-bg-page);
  color: var(--fnx-text-b);
  font-size: var(--fnx-fs-base);
  line-height: var(--fnx-lh-base);
  -webkit-font-smoothing: antialiased;
}

.fnx-app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
}

.fnx-app-shell--collapsed {
  grid-template-columns: 60px 1fr;
}

.fnx-app-shell--collapsed .fnx-sidebar__brand-name,
.fnx-app-shell--collapsed .fnx-sidebar__brand-edition,
.fnx-app-shell--collapsed .fnx-nav-item span,
.fnx-app-shell--collapsed .fnx-nav-section,
.fnx-app-shell--collapsed .fnx-sidebar__foot { display: none; }

.fnx-app-shell--collapsed .fnx-nav-item { justify-content: center; }

/* ====== SIDEBAR ====== */
.fnx-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--fnx-bg-card);
  border-right: 1px solid var(--fnx-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--fnx-z-sticky);
}

.fnx-sidebar__brand {
  padding: var(--fnx-space-4) var(--fnx-space-4);
  border-bottom: 1px solid var(--fnx-border-3);
  flex-shrink: 0;
}

.fnx-sidebar__brand-link {
  display: flex;
  align-items: center;
  gap: var(--fnx-space-3);
  text-decoration: none;
  color: var(--fnx-text-h);
}

.fnx-sidebar__brand-mark {
  width: 36px;
  height: 36px;
  border-radius: var(--fnx-radius-lg);
  background: linear-gradient(135deg, var(--fnx-brand-600), var(--fnx-brand-800));
  color: var(--fnx-text-inv);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.5px;
  box-shadow: var(--fnx-shadow-2);
  flex-shrink: 0;
}

.fnx-sidebar__brand-name {
  font-size: var(--fnx-fs-h4);
  font-weight: 800;
  letter-spacing: -0.3px;
  line-height: 1.1;
}

.fnx-sidebar__brand-edition {
  font-size: var(--fnx-fs-2xs);
  font-weight: 700;
  color: var(--fnx-brand-600);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  line-height: 1.4;
}

.fnx-sidebar__scroll {
  flex: 1;
  overflow-y: auto;
  padding: var(--fnx-space-2) var(--fnx-space-2) var(--fnx-space-4);
  scrollbar-width: thin;
}
.fnx-sidebar__scroll::-webkit-scrollbar { width: 6px; }
.fnx-sidebar__scroll::-webkit-scrollbar-thumb { background: var(--fnx-ink-200); border-radius: 3px; }

.fnx-sidebar__foot {
  border-top: 1px solid var(--fnx-border-3);
  padding: var(--fnx-space-3);
  flex-shrink: 0;
}

.fnx-sidebar__foot-row {
  display: flex;
  align-items: center;
  gap: var(--fnx-space-2);
}

.fnx-sidebar__db { flex: 1; min-width: 0; }
.fnx-sidebar__db-name { font-size: var(--fnx-fs-sm); font-weight: 600; color: var(--fnx-text-b); }
.fnx-sidebar__db-host { font-family: var(--fnx-font-mono); font-size: var(--fnx-fs-2xs); color: var(--fnx-text-d); }

/* ====== TOP SHELL ====== */
.fnx-content-col {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-width: 0;
}

.fnx-topshell {
  position: sticky;
  top: 0;
  z-index: calc(var(--fnx-z-sticky) - 1);
  display: flex;
  align-items: center;
  gap: var(--fnx-space-3);
  padding: 10px var(--fnx-space-5);
  background: var(--fnx-bg-card);
  border-bottom: 1px solid var(--fnx-border);
  box-shadow: var(--fnx-shadow-1);
  min-height: 60px;
}

.fnx-sidebar-toggle { padding: 6px 10px; }

.fnx-topshell__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--fnx-space-2);
  font-size: var(--fnx-fs-lg);
  font-weight: 500;
}
.fnx-topshell__crumb { color: var(--fnx-text-m); text-decoration: none; }
.fnx-topshell__crumb--active { color: var(--fnx-text-h); font-weight: 700; }
.fnx-topshell__crumb-sep { font-size: var(--fnx-fs-2xs); color: var(--fnx-text-faint); }

.fnx-topshell__flex-grow { flex: 1; }

.fnx-entity-switcher {
  display: flex;
  align-items: center;
  gap: var(--fnx-space-2);
  padding: 6px var(--fnx-space-3);
  background: var(--fnx-bg-soft);
  border: 1px solid var(--fnx-border);
  border-radius: var(--fnx-radius-lg);
  font-size: var(--fnx-fs-md);
  cursor: pointer;
  transition: border-color var(--fnx-dur-base) var(--fnx-ease);
}
.fnx-entity-switcher:hover { border-color: var(--fnx-brand-300); }
.fnx-entity-switcher__name { font-weight: 700; color: var(--fnx-text-h); }
.fnx-entity-switcher__period { font-size: var(--fnx-fs-xs); color: var(--fnx-text-d); padding-left: var(--fnx-space-2); border-left: 1px solid var(--fnx-border); }

/* density pip group */
.density-pip-group {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--fnx-bg-soft);
  padding: 3px;
  border-radius: var(--fnx-radius-md);
  border: 1px solid var(--fnx-border);
}
.density-pip {
  cursor: pointer; border: none; background: none; padding: 4px 6px;
  display: flex; align-items: flex-end; gap: 2px;
  border-radius: var(--fnx-radius-sm);
  transition: background var(--fnx-dur-base) var(--fnx-ease);
}
.density-pip:hover { background: rgba(255,255,255,0.7); }
.density-pip.is-active { background: var(--fnx-bg-card); box-shadow: var(--fnx-shadow-1); }
.density-pip span { display: block; width: 3px; background: var(--fnx-brand-600); border-radius: 1px; opacity: 0.35; }
.density-pip.is-active span { opacity: 1; }
.density-pip:nth-child(1) span:nth-child(1) { height: 7px } .density-pip:nth-child(1) span:nth-child(2) { height: 9px } .density-pip:nth-child(1) span:nth-child(3) { height: 11px }
.density-pip:nth-child(2) span:nth-child(1) { height: 6px } .density-pip:nth-child(2) span:nth-child(2) { height: 8px } .density-pip:nth-child(2) span:nth-child(3) { height: 10px }
.density-pip:nth-child(3) span:nth-child(1) { height: 5px } .density-pip:nth-child(3) span:nth-child(2) { height: 7px } .density-pip:nth-child(3) span:nth-child(3) { height: 9px }

/* brand swatches */
.fnx-brand-swatches { display: flex; align-items: center; gap: 4px; padding: 3px; background: var(--fnx-bg-soft); border-radius: var(--fnx-radius-md); border: 1px solid var(--fnx-border); }
.fnx-brand-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: border-color var(--fnx-dur-base) var(--fnx-ease), transform var(--fnx-dur-base) var(--fnx-ease); }
.fnx-brand-swatch:hover { transform: scale(1.08); }
.fnx-brand-swatch.is-active { border-color: var(--fnx-text-h); box-shadow: var(--fnx-shadow-1); }
.fnx-brand-swatch--blue    { background: #2563EB; }
.fnx-brand-swatch--emerald { background: #16A34A; }
.fnx-brand-swatch--purple  { background: #9333EA; }
.fnx-brand-swatch--crimson { background: #DC2626; }
.fnx-brand-swatch--slate   { background: #475569; }

.fnx-bell { position: relative; }
.fnx-bell__badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--fnx-danger); color: #fff;
  font-family: var(--fnx-font-mono); font-size: 9.5px; font-weight: 700;
  border-radius: 999px; line-height: 16px; text-align: center;
}

.fnx-userchip {
  display: flex; align-items: center; gap: var(--fnx-space-2);
  padding: 4px 8px;
  background: var(--fnx-bg-soft);
  border-radius: var(--fnx-radius-pill);
  border: 1px solid var(--fnx-border);
}
.fnx-userchip__avatar {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--fnx-brand-600), var(--fnx-purple-600));
  color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fnx-fs-xs); font-weight: 700; letter-spacing: -0.3px;
}
.fnx-userchip__body { line-height: 1.1; }
.fnx-userchip__name { font-size: var(--fnx-fs-md); font-weight: 700; color: var(--fnx-text-h); }
.fnx-userchip__role { font-size: var(--fnx-fs-2xs); color: var(--fnx-text-d); }

/* ====== MAIN ====== */
.fnx-main { padding: var(--fnx-space-5); flex: 1; }

/* ====== CLAB BUBBLE ====== */
.fnx-clab-bubble {
  position: fixed;
  bottom: var(--fnx-space-5);
  right: var(--fnx-space-5);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fnx-brand-600), var(--fnx-purple-600));
  color: #fff;
  border: none;
  box-shadow: var(--fnx-shadow-3);
  cursor: pointer;
  font-size: 20px;
  z-index: calc(var(--fnx-z-toast) - 1);
  transition: transform var(--fnx-dur-base) var(--fnx-ease), box-shadow var(--fnx-dur-base) var(--fnx-ease);
}
.fnx-clab-bubble:hover { transform: translateY(-2px) scale(1.05); box-shadow: var(--fnx-shadow-4); }

/* ====== HOME — KPI strip ====== */
.fnx-kpibar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: var(--fnx-space-3);
  margin-bottom: var(--fnx-space-5);
}

/* override .fnx-kpi from components to make it card-style and slightly richer */
.fnx-kpibar .fnx-kpi {
  display: flex;
  align-items: center;
  gap: var(--fnx-space-3);
  background: var(--fnx-bg-card);
  border: 1px solid var(--fnx-border);
  border-radius: var(--fnx-radius-2xl);
  padding: var(--fnx-space-3) var(--fnx-space-4);
  box-shadow: var(--fnx-shadow-1);
  transition: transform var(--fnx-dur-base) var(--fnx-ease), box-shadow var(--fnx-dur-base) var(--fnx-ease);
  position: relative;
  overflow: hidden;
}
.fnx-kpibar .fnx-kpi:hover { transform: translateY(-2px); box-shadow: var(--fnx-shadow-2); }
.fnx-kpibar .fnx-kpi::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--kpi-accent, var(--fnx-brand-600));
}

.fnx-kpi__icon { width: 40px; height: 40px; border-radius: var(--fnx-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.fnx-kpi__body { min-width: 0; flex: 1; }
.fnx-kpi__label { font-size: var(--fnx-fs-xs); font-weight: 700; color: var(--fnx-text-faint); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fnx-kpi__value { font-family: var(--fnx-font-mono); font-size: 22px; font-weight: 800; color: var(--fnx-text-h); line-height: 1.1; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.fnx-kpi__foot { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.fnx-kpi__delta { font-size: var(--fnx-fs-2xs); font-weight: 700; padding: 1px 5px; border-radius: var(--fnx-radius-pill); display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.fnx-kpi__delta.up { background: var(--fnx-success-bg); color: var(--fnx-success-600); }
.fnx-kpi__delta.down { background: var(--fnx-danger-bg); color: var(--fnx-danger-600); }
.fnx-kpi__delta-cap { font-size: var(--fnx-fs-2xs); color: var(--fnx-text-d); }
.fnx-kpi__spark { width: 52px; height: 22px; flex-shrink: 0; }

/* ====== HOME — cockpit strip ====== */
.fnx-cockpit-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--fnx-space-4);
  background: linear-gradient(135deg, var(--fnx-brand-700) 0%, var(--fnx-brand-800) 50%, var(--fnx-purple-700) 100%);
  color: #fff;
  padding: var(--fnx-space-4) var(--fnx-space-5);
  border-radius: var(--fnx-radius-2xl);
  margin-bottom: var(--fnx-space-5);
  box-shadow: var(--fnx-shadow-2);
}
.fnx-cockpit-strip__greet-h { font-size: var(--fnx-fs-h3); font-weight: 800; letter-spacing: -0.3px; }
.fnx-cockpit-strip__greet-sub { font-size: var(--fnx-fs-lg); opacity: 0.85; margin-top: 4px; }
.fnx-cockpit-strip__actions { display: flex; align-items: center; gap: var(--fnx-space-2); flex-wrap: wrap; }
.fnx-cockpit-strip__actions .fnx-btn--soft { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.22); }
.fnx-cockpit-strip__actions .fnx-btn--soft:hover { background: rgba(255,255,255,0.24); }

/* ====== HOME — three zones ====== */
.fnx-zone-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: var(--fnx-space-4);
  margin-bottom: var(--fnx-space-5);
}

.fnx-zone {
  background: var(--fnx-bg-card);
  border: 1px solid var(--fnx-border);
  border-radius: var(--fnx-radius-2xl);
  box-shadow: var(--fnx-shadow-1);
  overflow: hidden;
}

.fnx-zone__h {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--fnx-space-3) var(--fnx-space-4);
  border-bottom: 1px solid var(--fnx-border-3);
  background: var(--fnx-bg-soft-3);
}
.fnx-zone__title { display: flex; align-items: center; gap: var(--fnx-space-2); font-size: var(--fnx-fs-lg); font-weight: 700; color: var(--fnx-text-h); }
.fnx-zone__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.fnx-zone__count { font-size: var(--fnx-fs-xs); font-weight: 600; color: var(--fnx-text-d); text-transform: uppercase; letter-spacing: 0.4px; }

.fnx-feed { list-style: none; margin: 0; padding: 0; }
.fnx-feed__row {
  display: flex; align-items: center; gap: var(--fnx-space-3);
  padding: var(--fnx-space-3) var(--fnx-space-4);
  border-bottom: 1px solid var(--fnx-border-3);
  transition: background var(--fnx-dur-fast) var(--fnx-ease);
}
.fnx-feed__row:last-child { border-bottom: none; }
.fnx-feed__row:hover { background: var(--fnx-bg-soft); }
.fnx-feed__lead {
  width: 32px; height: 32px;
  background: var(--fnx-bg-soft); border-radius: var(--fnx-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.fnx-feed__body { flex: 1; min-width: 0; }
.fnx-feed__title { font-size: var(--fnx-fs-lg); font-weight: 600; color: var(--fnx-text-h); line-height: 1.3; }
.fnx-feed__meta { font-size: var(--fnx-fs-xs); color: var(--fnx-text-d); margin-top: 2px; }
.fnx-feed__tail { flex-shrink: 0; }
.fnx-feed__time { font-size: var(--fnx-fs-xs); color: var(--fnx-text-faint); font-variant-numeric: tabular-nums; }

/* ====== HOME — CLAB strip ====== */
.fnx-clab-strip {
  display: flex; align-items: center; gap: var(--fnx-space-4);
  background: var(--fnx-bg-card);
  border: 1px solid var(--fnx-border);
  border-radius: var(--fnx-radius-2xl);
  padding: var(--fnx-space-4) var(--fnx-space-5);
  box-shadow: var(--fnx-shadow-1);
  flex-wrap: wrap;
}
.fnx-clab-strip__icon {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, var(--fnx-brand-600), var(--fnx-purple-600));
  color: #fff; border-radius: var(--fnx-radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.fnx-clab-strip__body { flex: 1; min-width: 200px; }
.fnx-clab-strip__h { font-size: var(--fnx-fs-h4); font-weight: 700; color: var(--fnx-text-h); letter-spacing: -0.2px; }
.fnx-clab-strip__sub { font-size: var(--fnx-fs-md); color: var(--fnx-text-d); margin-top: 2px; }
.fnx-clab-strip__field { display: flex; align-items: center; gap: var(--fnx-space-2); flex: 1; min-width: 320px; }
.fnx-clab-strip__field .fnx-input { flex: 1; }

/* ====== EMPTY ====== */
.fnx-empty {
  text-align: center;
  padding: var(--fnx-space-8) var(--fnx-space-4);
  color: var(--fnx-text-d);
}
.fnx-empty__icon { font-size: 32px; color: var(--fnx-text-faint); margin-bottom: var(--fnx-space-3); }
.fnx-empty__heading { font-size: var(--fnx-fs-h4); font-weight: 700; color: var(--fnx-text-h); margin-bottom: 4px; }
.fnx-empty__sub { font-size: var(--fnx-fs-md); }

/* ====== BANNER ====== */
.fnx-banner {
  display: flex; align-items: center; gap: var(--fnx-space-2);
  padding: var(--fnx-space-3) var(--fnx-space-4);
  border-radius: var(--fnx-radius-lg);
  font-size: var(--fnx-fs-md);
  margin: var(--fnx-space-2) 0;
}
.fnx-banner--danger { background: var(--fnx-danger-bg); color: var(--fnx-danger-700); border: 1px solid var(--fnx-danger-bd); }
.fnx-banner--warning { background: var(--fnx-warning-bg); color: var(--fnx-warning-700); border: 1px solid var(--fnx-warning-bd); }
.fnx-banner--success { background: var(--fnx-success-bg); color: var(--fnx-success-700); border: 1px solid var(--fnx-success-bd); }
.fnx-banner--info { background: var(--fnx-brand-50); color: var(--fnx-brand-700); border: 1px solid var(--fnx-brand-100); }

/* ====== LOGIN ====== */
.fnx-login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 960px) { .fnx-login { grid-template-columns: 1fr; } .fnx-login__hero { display: none; } }

.fnx-login__hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--fnx-brand-900) 0%, var(--fnx-brand-700) 45%, var(--fnx-purple-700) 100%);
  color: #fff;
  padding: var(--fnx-space-10);
  display: flex; flex-direction: column; justify-content: space-between;
}
.fnx-login__hero-grain { position: absolute; inset: 0; opacity: 0.4; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.10), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.06), transparent 50%); pointer-events: none; }
.fnx-login__hero-body { position: relative; z-index: 1; max-width: 480px; }

.fnx-login__brand { display: flex; align-items: center; gap: var(--fnx-space-3); margin-bottom: var(--fnx-space-10); }
.fnx-login__brand-mark { width: 48px; height: 48px; background: rgba(255,255,255,0.16); border-radius: var(--fnx-radius-lg); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; backdrop-filter: blur(6px); }
.fnx-login__brand-name { font-size: var(--fnx-fs-h3); font-weight: 800; letter-spacing: -0.3px; }
.fnx-login__brand-sub { font-size: var(--fnx-fs-2xs); font-weight: 700; opacity: 0.7; letter-spacing: 0.8px; }

.fnx-login__hero-h { font-size: 38px; font-weight: 800; line-height: 1.15; margin-bottom: var(--fnx-space-4); letter-spacing: -0.8px; }
.fnx-login__hero-h-em { background: linear-gradient(90deg, var(--fnx-accent), #fff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fnx-login__hero-sub { font-size: var(--fnx-fs-3xl); opacity: 0.85; line-height: 1.5; margin-bottom: var(--fnx-space-6); }
.fnx-login__hero-chips { display: flex; flex-wrap: wrap; gap: var(--fnx-space-2); }
.fnx-login__hero-foot { position: relative; z-index: 1; display: flex; gap: var(--fnx-space-6); flex-wrap: wrap; }
.fnx-login__hero-foot-kpi {}
.fnx-login__hero-foot-val { font-family: var(--fnx-font-mono); font-size: 24px; font-weight: 800; letter-spacing: -0.4px; }
.fnx-login__hero-foot-lbl { font-size: var(--fnx-fs-xs); opacity: 0.75; text-transform: uppercase; letter-spacing: 0.6px; }

.fnx-login__form-col { display: flex; flex-direction: column; justify-content: center; padding: var(--fnx-space-8); background: var(--fnx-bg-card); }
.fnx-login__form-card { max-width: 420px; width: 100%; margin: 0 auto; }
.fnx-login__form-h-text { font-size: var(--fnx-fs-h1); font-weight: 800; color: var(--fnx-text-h); letter-spacing: -0.5px; }
.fnx-login__form-h-sub { font-size: var(--fnx-fs-lg); color: var(--fnx-text-d); margin-top: 4px; margin-bottom: var(--fnx-space-6); }
.fnx-login__form { display: flex; flex-direction: column; gap: var(--fnx-space-4); }
.fnx-login__field { display: flex; flex-direction: column; gap: 6px; }
.fnx-login__field-row { display: flex; justify-content: space-between; align-items: baseline; }
.fnx-login__row { display: flex; justify-content: space-between; align-items: center; }
.fnx-checkbox { display: flex; align-items: center; gap: var(--fnx-space-2); font-size: var(--fnx-fs-md); color: var(--fnx-text-b); cursor: pointer; }
.fnx-checkbox input { width: 16px; height: 16px; accent-color: var(--fnx-brand-600); }
.fnx-link { color: var(--fnx-brand-700); text-decoration: none; font-weight: 600; }
.fnx-link:hover { text-decoration: underline; }
.fnx-text-xs { font-size: var(--fnx-fs-xs); }
.fnx-text-faint { color: var(--fnx-text-faint); }
.fnx-login__submit { width: 100%; justify-content: center; gap: var(--fnx-space-2); }
.fnx-login__demo { display: flex; align-items: center; gap: var(--fnx-space-3); padding-top: var(--fnx-space-3); border-top: 1px dashed var(--fnx-border); }
.fnx-login__demo-h { font-size: var(--fnx-fs-xs); font-weight: 700; color: var(--fnx-text-d); text-transform: uppercase; letter-spacing: 0.6px; }
.fnx-login__foot { display: flex; gap: var(--fnx-space-2); align-items: center; margin-top: var(--fnx-space-8); font-size: var(--fnx-fs-xs); color: var(--fnx-text-d); justify-content: center; }

.fnx-input-group__icon-right { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: transparent; border: none; color: var(--fnx-text-faint); cursor: pointer; padding: 4px; }
.fnx-input-group__icon-right:hover { color: var(--fnx-text-h); }

/* ====== PLACEHOLDER ====== */
.fnx-placeholder { min-height: 70vh; display: flex; align-items: center; justify-content: center; padding: var(--fnx-space-6); }
.fnx-placeholder__card { max-width: 560px; width: 100%; text-align: center; background: var(--fnx-bg-card); border: 1px solid var(--fnx-border); border-radius: var(--fnx-radius-2xl); box-shadow: var(--fnx-shadow-2); padding: var(--fnx-space-10) var(--fnx-space-8); }
.fnx-placeholder__icon { width: 76px; height: 76px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto var(--fnx-space-4); }
.fnx-placeholder__milestone { display: inline-block; background: var(--fnx-brand-50); color: var(--fnx-brand-700); font-size: var(--fnx-fs-xs); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 4px var(--fnx-space-3); border-radius: var(--fnx-radius-pill); border: 1px solid var(--fnx-brand-100); margin-bottom: var(--fnx-space-3); }
.fnx-placeholder__h { font-size: var(--fnx-fs-h1); font-weight: 800; color: var(--fnx-text-h); margin-bottom: var(--fnx-space-3); letter-spacing: -0.5px; }
.fnx-placeholder__sub { font-size: var(--fnx-fs-lg); color: var(--fnx-text-m); line-height: 1.5; margin-bottom: var(--fnx-space-6); }
.fnx-placeholder__progress { margin-bottom: var(--fnx-space-6); }
.fnx-placeholder__progress-bar { width: 100%; height: 8px; background: var(--fnx-bg-soft-2); border-radius: var(--fnx-radius-pill); overflow: hidden; margin-bottom: 8px; }
.fnx-placeholder__progress-fill { height: 100%; background: linear-gradient(90deg, var(--fnx-brand-600), var(--fnx-purple-600)); border-radius: var(--fnx-radius-pill); transition: width 600ms var(--fnx-ease-out); }
.fnx-placeholder__progress-meta { display: flex; justify-content: space-between; font-size: var(--fnx-fs-xs); color: var(--fnx-text-d); }
.fnx-placeholder__actions { display: flex; justify-content: center; gap: var(--fnx-space-2); margin-bottom: var(--fnx-space-5); flex-wrap: wrap; }
.fnx-placeholder__path { font-size: var(--fnx-fs-xs); color: var(--fnx-text-faint); padding-top: var(--fnx-space-3); border-top: 1px dashed var(--fnx-border); }
.fnx-code { font-family: var(--fnx-font-mono); background: var(--fnx-bg-soft-2); padding: 2px 6px; border-radius: var(--fnx-radius-sm); color: var(--fnx-text-b); }

/* ====== ERROR ====== */
.fnx-error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--fnx-space-6); }
.fnx-error-page__card { max-width: 480px; width: 100%; text-align: center; background: var(--fnx-bg-card); border: 1px solid var(--fnx-border); border-radius: var(--fnx-radius-2xl); box-shadow: var(--fnx-shadow-2); padding: var(--fnx-space-10) var(--fnx-space-8); }
.fnx-error-page__icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 30px; margin: 0 auto var(--fnx-space-4); }
.fnx-error-page__h { font-size: var(--fnx-fs-h2); font-weight: 800; color: var(--fnx-text-h); margin-bottom: 8px; }
.fnx-error-page__sub { font-size: var(--fnx-fs-lg); color: var(--fnx-text-m); margin-bottom: var(--fnx-space-6); }
.fnx-error-page__actions { display: flex; justify-content: center; }

/* ====== UTILS ====== */
.fnx-d-md-inline { display: none; }
@media (min-width: 768px) { .fnx-d-md-inline { display: inline; } }

.fnx-chip--sm { padding: 1px 6px; font-size: 10.5px; }

/* responsive sidebar */
@media (max-width: 768px) {
  .fnx-app-shell { grid-template-columns: 1fr; }
  .fnx-sidebar { position: fixed; left: 0; top: 0; width: 280px; transform: translateX(-100%); transition: transform var(--fnx-dur-slow) var(--fnx-ease); }
  .fnx-app-shell--sidebar-open .fnx-sidebar { transform: translateX(0); }
}