/*
 * Fuse Forest shared design tokens v2.1
 * Loaded after assets/app.css. Scoped to .ff-theme-v21 so legacy rollback remains possible.
 */
body.ff-theme-v21 {
  color: var(--ff-text-primary, #10263a);
  font-family: var(--ff-font-family, "Segoe UI", Tahoma, sans-serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.ff-theme-v21 .container {
  position: relative;
  z-index: 1;
}

body.ff-theme-v21 .app-header {
  border: 1px solid var(--ff-surface-border, rgba(255,255,255,.70));
  background: linear-gradient(135deg, rgba(15,118,110,.92), rgba(17,94,89,.88));
  box-shadow: var(--ff-shadow-md, 0 15px 38px rgba(19,49,55,.11));
  backdrop-filter: blur(18px) saturate(1.14);
  -webkit-backdrop-filter: blur(18px) saturate(1.14);
}

body.ff-theme-v21 .tabs,
body.ff-theme-v21 .nav-submenu {
  border-color: var(--ff-surface-border, rgba(255,255,255,.70));
  background: var(--ff-surface-strong, rgba(255,255,255,.94));
  box-shadow: var(--ff-shadow-sm, 0 8px 22px rgba(19,49,55,.08));
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
}

body.ff-theme-v21 .tab,
body.ff-theme-v21 .nav-hamburger {
  color: var(--ff-text-primary, #10263a);
  border-radius: var(--ff-radius-sm, 12px);
}

body.ff-theme-v21 .tab.active,
body.ff-theme-v21 .tab[aria-current="page"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--ff-brand-primary, #0f766e), var(--ff-brand-accent, #115e59));
  box-shadow: 0 10px 22px rgba(var(--ff-brand-primary-rgb, 15,118,110), .22);
}

body.ff-theme-v21 :where(.card, .panel, .box, .ff-card, .search-card, .filter-card, .tool-card, .summary-card, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-hero"], [class*="-hero "]) {
  border-color: var(--ff-surface-border, rgba(255,255,255,.70));
  border-radius: var(--ff-radius-card, 28px);
  background: var(--ff-surface, rgba(255,255,255,.86));
  box-shadow: var(--ff-shadow-md, 0 15px 38px rgba(19,49,55,.11));
  backdrop-filter: blur(var(--ff-glass-blur, 18px)) saturate(1.10);
  -webkit-backdrop-filter: blur(var(--ff-glass-blur, 18px)) saturate(1.10);
}

body.ff-theme-v21.glass-mode-off :where(.card, .panel, .box, .ff-card, .search-card, .filter-card, .tool-card, .summary-card, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-hero"], [class*="-hero "]) {
  background: var(--ff-surface, rgba(255,255,255,.86));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--ff-shadow-md, 0 15px 38px rgba(19,49,55,.11));
}

body.ff-theme-v21.glass-mode-liquid :where(.card, .panel, .box, .ff-card, .search-card, .filter-card, .tool-card, .summary-card, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-hero"], [class*="-hero "]) {
  background: linear-gradient(135deg, var(--ff-glass-highlight, rgba(255,255,255,.45)) 0%, var(--ff-surface, rgba(255,255,255,.72)) 42%, var(--ff-surface-soft, rgba(245,250,249,.58)) 100%);
  backdrop-filter: blur(var(--ff-glass-blur, 20px)) saturate(var(--ff-glass-saturation, 140%)) contrast(1.03);
  -webkit-backdrop-filter: blur(var(--ff-glass-blur, 20px)) saturate(var(--ff-glass-saturation, 140%)) contrast(1.03);
  box-shadow: var(--ff-shadow-md, 0 15px 38px rgba(19,49,55,.11)), inset 0 1px 0 var(--ff-glass-highlight, rgba(255,255,255,.45)), inset 0 -1px 0 rgba(255,255,255,.10);
}

body.ff-theme-v21.surface-solid :where(.card, .panel, .box, .ff-card, .search-card, .filter-card, .tool-card, .summary-card, [class$="-card"], [class*="-card "], [class$="-panel"], [class*="-panel "], [class$="-hero"], [class*="-hero "]) {
  background: var(--ff-surface-strong, #fff);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.ff-theme-v21 :where(input, select, textarea) {
  color: var(--ff-text-primary, #10263a);
  border-color: var(--ff-control-border, rgba(183,202,208,.72));
  background: rgba(255,255,255,.91);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 5px 14px rgba(25,55,62,.04);
}

body.ff-theme-v21 :where(input, select, textarea):focus {
  border-color: rgba(var(--ff-brand-primary-rgb, 15,118,110), .70);
  outline: none;
  box-shadow: var(--ff-focus-ring, 0 0 0 4px rgba(15,118,110,.18));
}

body.ff-theme-v21 :where(button.primary, .btn.primary, .btn-primary, button[type="submit"]:not(.secondary):not(.danger)) {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(145deg, var(--ff-brand-primary, #0f766e), var(--ff-brand-accent, #115e59));
  box-shadow: 0 12px 26px rgba(var(--ff-brand-primary-rgb, 15,118,110), .22), inset 0 1px 0 rgba(255,255,255,.22);
}

body.ff-theme-v21 :where(button.secondary, .btn.secondary, .secondary) {
  color: var(--ff-brand-primary, #0f766e);
  border-color: rgba(var(--ff-brand-primary-rgb, 15,118,110), .22);
  background: rgba(255,255,255,.80);
}

body.ff-theme-v21 :where(.badge, .chip, .ff-chip) {
  color: var(--ff-brand-primary, #0f766e);
  border-color: rgba(var(--ff-brand-primary-rgb, 15,118,110), .18);
  background: rgba(var(--ff-brand-primary-rgb, 15,118,110), .09);
  border-radius: 999px;
}

body.ff-theme-v21 .alert,
body.ff-theme-v21 .flash,
body.ff-theme-v21 .ff-alert {
  border-radius: var(--ff-radius-md, 20px);
  box-shadow: var(--ff-shadow-sm, 0 8px 22px rgba(19,49,55,.08));
}

body.ff-theme-v21 .table-wrap {
  border: 1px solid var(--ff-surface-border, rgba(255,255,255,.70));
  border-radius: var(--ff-radius-md, 20px);
  background: rgba(255,255,255,.68);
  overflow: auto;
}

body.ff-theme-v21 table {
  color: var(--ff-text-primary, #10263a);
}

body.ff-theme-v21 table thead th {
  color: var(--ff-text-muted, #60727f);
  background: rgba(var(--ff-brand-primary-rgb, 15,118,110), .065);
}

body.ff-theme-v21 table tbody tr:hover td {
  background: rgba(var(--ff-brand-primary-rgb, 15,118,110), .045);
}

body.ff-theme-v21 :where(a, button, input, select, textarea, summary):focus-visible {
  outline: none;
  box-shadow: var(--ff-focus-ring, 0 0 0 4px rgba(15,118,110,.18));
}

/* Real preview endpoint */
body.page-ui_branding_preview.ff-theme-v21 {
  min-width: 0;
}
body.page-ui_branding_preview > .app-header {
  min-height: 58px;
  padding-block: 8px;
}
body.page-ui_branding_preview > .tabs {
  margin-block: 7px;
}
body.page-ui_branding_preview > .container {
  width: min(100%, 1100px);
  padding: 12px;
}
body.page-ui_branding_preview > .container > h1 { display: none; }
.ff-theme-preview { display: grid; gap: 16px; }
.ff-preview-view { display: grid; gap: 15px; }
.ff-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ff-preview-heading h2 { margin:2px 0 0; }
.ff-preview-heading small { color:var(--ff-text-muted); }
.ff-preview-stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.ff-preview-stat-grid article { padding:16px; }
.ff-preview-stat-grid strong { display:block; margin:7px 0 3px; font-size:1.8rem; }
.ff-preview-stat-grid p { margin:0; color:var(--ff-text-muted); }
.ff-preview-list { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding-top:10px; }
.ff-preview-list b { color:var(--ff-brand-primary); }
.ff-preview-form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.ff-preview-form-grid label { display:grid; gap:6px; font-weight:700; }
.ff-preview-field-wide { grid-column:1/-1; }
.ff-preview-home-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; padding:12px 6px 4px; }
.ff-preview-home-hero small, .ff-preview-home-hero p { color:var(--ff-text-muted); }
.ff-preview-home-hero h2 { margin:1px 0; font-size:2.15rem; }
.ff-preview-home-hero p { margin:0; }
.ff-preview-progress-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.ff-preview-progress { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:center; gap:13px; padding:14px; }
.ff-preview-progress p { margin:6px 0 0; color:var(--ff-text-muted); }
.ff-preview-ring { width:76px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; font-weight:900; font-size:1.1rem; border:9px solid rgba(var(--ff-brand-primary-rgb),.18); border-top-color:var(--ff-brand-primary); }
.ff-preview-ring-blue { border-color:rgba(var(--ff-brand-accent-rgb),.18); border-top-color:var(--ff-brand-accent); }
.ff-preview-app-surface { padding:18px; }
.ff-preview-app-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 10px; }
.ff-preview-app { min-width:0; display:grid; justify-items:center; gap:7px; text-align:center; }
.ff-preview-app > span { width:64px; aspect-ratio:1; display:grid; place-items:center; border-radius:20px; color:#fff; font-size:1.55rem; font-weight:900; box-shadow:0 12px 25px rgba(24,56,62,.17), inset 0 1px 0 rgba(255,255,255,.45); }
.ff-preview-app small { font-weight:700; }
.ff-preview-app .tone-1 { background:linear-gradient(145deg,#55d99d,#0eaa75); }
.ff-preview-app .tone-2 { background:linear-gradient(145deg,#58bffa,#087cd7); }
.ff-preview-app .tone-3 { background:linear-gradient(145deg,#ff7993,#eb315f); }
.ff-preview-app .tone-4 { background:linear-gradient(145deg,#be84f6,#7437d8); }
.ff-preview-app .tone-5 { background:linear-gradient(145deg,#ffbd66,#f28d16); }
.ff-preview-app .tone-6 { background:linear-gradient(145deg,#51d5d5,#0aa7bd); }
.ff-preview-login-view { min-height:520px; place-items:center; }
.ff-preview-login-card { width:min(390px,100%); padding:26px; display:grid; gap:13px; }
.ff-preview-login-card h2, .ff-preview-login-card p { margin:0; text-align:center; }
.ff-preview-login-card p { color:var(--ff-text-muted); }
.ff-preview-login-card label { display:grid; gap:6px; font-weight:700; }
.ff-preview-brand-mark { width:70px; aspect-ratio:1; margin:auto; display:grid; place-items:center; border-radius:24px; color:#fff; font-size:1.35rem; font-weight:900; background:linear-gradient(145deg,var(--ff-brand-primary),var(--ff-brand-accent)); box-shadow:var(--ff-shadow-md); }

@media (max-width:720px) {
  body.page-ui_branding_preview > .tabs { display:none; }
  body.page-ui_branding_preview > .container { padding:10px; }
  .ff-preview-stat-grid { grid-template-columns:1fr; }
  .ff-preview-progress-grid { grid-template-columns:1fr; }
  .ff-preview-app-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px 6px; }
  .ff-preview-app > span { width:58px; border-radius:18px; }
  .ff-preview-form-grid { grid-template-columns:1fr; }
  .ff-preview-field-wide { grid-column:auto; }
}