/*!
 * ForgePanel admin design system — v1.0.0
 * Forge My Brand · https://forgemybrands.com
 * Dependency-free. Light + dark themes, no drop shadows.
 * Colours, buttons and fonts come from Settings → Appearance (inline :root vars).
 */

/* ---------- Tokens ---------- */
:root {
  --fp-primary: #ff6d00;
  --fp-on-primary: #000;
  --fp-primary-soft: color-mix(in srgb, var(--fp-primary) 11%, transparent);
  --fp-primary-ink: color-mix(in srgb, var(--fp-primary) 78%, black);
  --fp-primary-ring: color-mix(in srgb, var(--fp-primary) 40%, transparent);

  --fp-bg: #f3f3f2;
  --fp-surface: #ffffff;
  --fp-surface-2: #f8f8f7;
  --fp-surface-hover: #f1f1ef;
  --fp-border: #e6e6e4;
  --fp-border-strong: #d4d4d1;
  --fp-text: #000000;
  --fp-text-2: #474747;
  --fp-text-3: #7d7d7d;

  --fp-btn-bg: #000000;
  --fp-btn-text: #ffffff;
  --fp-btn-hover-bg: #ff6d00;
  --fp-btn-hover-text: #000000;
  --fp-active: #ff6d00;      /* active page in the side panel (Appearance → Active page colour) */
  --fp-active-soft: rgba(255, 109, 0, .1);

  --fp-dock-bg: #000000;
  --fp-dock-text: rgba(255, 255, 255, .58);
  --fp-panel-bg: var(--fp-surface);
  --fp-panel-text: var(--fp-text-2);
  --fp-panel-border: var(--fp-border);

  --fp-success: #1f8a4c;
  --fp-success-soft: #e8f5ee;
  --fp-warning: #a86400;
  --fp-warning-soft: #fff5df;
  --fp-danger: #c8321e;
  --fp-danger-soft: #fdecea;
  --fp-info: #1d5fd1;
  --fp-info-soft: #eaf1fd;

  --fp-radius-xs: 5px;
  --fp-radius-sm: 7px;
  --fp-radius: 10px;
  --fp-radius-lg: 12px;
  --fp-ease: .14s ease;

  --fp-dock-w: 64px;
  --fp-panel-w: 236px;
  --fp-topbar-h: 64px;
  --fp-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fp-font-head: "Unbounded", system-ui, sans-serif;
  --fp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light;
}

[data-theme="dark"] {
  --fp-primary-soft: color-mix(in srgb, var(--fp-primary) 16%, transparent);
  --fp-primary-ink: color-mix(in srgb, var(--fp-primary) 80%, white);
  --fp-bg: #0d0d0d;
  --fp-surface: #171717;
  --fp-surface-2: #1d1d1d;
  --fp-surface-hover: #232323;
  --fp-border: #272727;
  --fp-border-strong: #353535;
  --fp-text: #ffffff;
  --fp-text-2: #cfcfcf;
  --fp-text-3: #8d8d8d;
  --fp-success: #4cc27f;
  --fp-success-soft: rgba(76, 194, 127, .13);
  --fp-warning: #f0b13b;
  --fp-warning-soft: rgba(240, 177, 59, .13);
  --fp-danger: #ff6b57;
  --fp-danger-soft: rgba(255, 107, 87, .13);
  --fp-info: #6ea2ff;
  --fp-info-soft: rgba(110, 162, 255, .13);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --fp-primary-soft: color-mix(in srgb, var(--fp-primary) 16%, transparent);
    --fp-primary-ink: color-mix(in srgb, var(--fp-primary) 80%, white);
    --fp-bg: #0d0d0d;
    --fp-surface: #171717;
    --fp-surface-2: #1d1d1d;
    --fp-surface-hover: #232323;
    --fp-border: #272727;
    --fp-border-strong: #353535;
    --fp-text: #ffffff;
    --fp-text-2: #cfcfcf;
    --fp-text-3: #8d8d8d;
    --fp-success: #4cc27f;
    --fp-success-soft: rgba(76, 194, 127, .13);
    --fp-warning: #f0b13b;
    --fp-warning-soft: rgba(240, 177, 59, .13);
    --fp-danger: #ff6b57;
    --fp-danger-soft: rgba(255, 107, 87, .13);
    --fp-info: #6ea2ff;
    --fp-info-soft: rgba(110, 162, 255, .13);
    color-scheme: dark;
  }
}

/* Corners (Settings → Appearance) */
[data-radius="sharp"] { --fp-radius-xs: 2px; --fp-radius-sm: 3px; --fp-radius: 4px; --fp-radius-lg: 5px; }
[data-radius="round"] { --fp-radius-xs: 8px; --fp-radius-sm: 11px; --fp-radius: 16px; --fp-radius-lg: 20px; }

/* Side panel style */
[data-panel="dark"] { --fp-panel-bg: #171717; --fp-panel-text: #cfcfcf; --fp-panel-border: #272727; }
[data-panel="black"] { --fp-panel-bg: #000000; --fp-panel-text: rgba(255, 255, 255, .7); --fp-panel-border: #1a1a1a; }

/* Motion */
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after { transition: none !important; animation: none !important; }
[data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation-duration: .001ms !important; transition-duration: .06s !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--fp-font); font-size: 13.5px; line-height: 1.55;
  color: var(--fp-text); background: var(--fp-bg); -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.fp-content a:not([class]) { color: var(--fp-primary-ink); }
.fp-content a:not([class]):hover { text-decoration: underline; }
img, svg { vertical-align: middle; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 500; letter-spacing: -.02em; font-family: var(--fp-font-head); }
p { margin: 0 0 .75rem; }
strong, b { font-weight: 600; }
code, kbd, pre { font-family: var(--fp-mono); font-size: .9em; }
code { background: var(--fp-surface-hover); padding: .1em .35em; border-radius: var(--fp-radius-xs); }
hr { border: 0; border-top: 1px solid var(--fp-border); margin: 1.25rem 0; }
[x-cloak], [hidden] { display: none !important; }
::selection { background: var(--fp-primary-ring); }
:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 2px; }

.fp-icon { width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.75; }
.fp-icon-sm { width: 15px; height: 15px; flex-shrink: 0; stroke-width: 1.85; }
.fp-icon-lg { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.6; }
.fp-icon-xl { width: 32px; height: 32px; flex-shrink: 0; stroke-width: 1.5; }
.fp-head { font-family: var(--fp-font-head); letter-spacing: -.02em; }
.fp-num { font-family: var(--fp-font-head); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }

/* ---------- App shell: dock + side panel + workspace ---------- */
.fp-app { display: grid; grid-template-columns: var(--fp-dock-w) var(--fp-panel-w) minmax(0, 1fr); min-height: 100vh;
  /* paint the dock and panel columns full height, even past the sticky elements */
  background: linear-gradient(90deg, var(--fp-dock-bg) var(--fp-dock-w), var(--fp-panel-bg) var(--fp-dock-w), var(--fp-panel-bg) calc(var(--fp-dock-w) + var(--fp-panel-w) - 1px), var(--fp-panel-border) calc(var(--fp-dock-w) + var(--fp-panel-w) - 1px), var(--fp-panel-border) calc(var(--fp-dock-w) + var(--fp-panel-w)), transparent calc(var(--fp-dock-w) + var(--fp-panel-w))); }
.fp-app.is-no-panel { grid-template-columns: var(--fp-dock-w) minmax(0, 1fr); }

.fp-dock {
  position: sticky; top: 0; height: 100vh; background: var(--fp-dock-bg); color: var(--fp-dock-text);
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; z-index: 41;
}
[data-theme="dark"] .fp-dock { border-right: 1px solid var(--fp-border); }
@media (prefers-color-scheme: dark) { [data-theme="system"] .fp-dock { border-right: 1px solid var(--fp-border); } }
.fp-dock-logo { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 12px; }
.fp-dock-logo img { max-width: 34px; max-height: 34px; object-fit: contain; }
.fp-dock-item {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--fp-radius-sm);
  color: var(--fp-dock-text); transition: background var(--fp-ease), color var(--fp-ease);
}
.fp-dock-item:hover { color: #fff; }
.fp-dock-item.is-active { color: var(--fp-primary); }
.fp-dock-item.is-active svg { stroke-width: 2.25; }
.fp-dock-item.is-add { border: 1px dashed rgba(255, 255, 255, .24); }
.fp-dock-item .fp-dock-dot { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--fp-primary); border: 2px solid var(--fp-dock-bg); }
.fp-dock-sep { width: 24px; height: 1px; background: rgba(255, 255, 255, .14); margin: 6px 0; }
.fp-dock-spacer { flex: 1; }
.fp-crumbs a { color: var(--fp-text-3); }
.fp-dock-tip {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  background: #000; color: #fff; border: 1px solid #2a2a2a; padding: 4px 9px; border-radius: var(--fp-radius-xs);
  font-size: 12px; font-weight: 500; pointer-events: none; opacity: 0; transition: opacity var(--fp-ease); z-index: 60;
}
.fp-dock-item:hover .fp-dock-tip, .fp-dock-item:focus-visible .fp-dock-tip { opacity: 1; }

.fp-panel {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--fp-panel-bg); color: var(--fp-panel-text);
  border-right: 1px solid var(--fp-panel-border); padding: 18px 14px; display: flex; flex-direction: column; z-index: 40;
}
.fp-panel-head { padding: 4px 8px 16px; min-width: 0; }
.fp-panel-head .fp-panel-title { font-family: var(--fp-font-head); font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--fp-text); display: flex; align-items: center; gap: 9px; }
[data-panel="dark"] .fp-panel-title, [data-panel="black"] .fp-panel-title { color: #fff; }
.fp-panel-head .fp-panel-sub { display: block; color: var(--fp-text-3); font-size: 12px; margin-top: 1px; }
.fp-panel-head img { max-height: 26px; max-width: 150px; object-fit: contain; }
.fp-nav { flex: 1; }
.fp-nav-group + .fp-nav-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--fp-panel-border); }
.fp-panel-head { border-bottom: 1px solid var(--fp-panel-border); margin-bottom: 12px; }
.fp-nav-label { font-size: 11.5px; font-weight: 500; color: var(--fp-text-3); padding: 10px 10px 6px; }
.fp-nav-link {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border-radius: var(--fp-radius-sm);
  color: inherit; font-weight: 500; font-size: 13.5px; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit;
  transition: background var(--fp-ease), color var(--fp-ease);
}
.fp-nav-link + .fp-nav-link { margin-top: 2px; }
.fp-nav-link { position: relative; }
.fp-nav-link:hover { background: var(--fp-active-soft); color: var(--fp-text); }
[data-panel="dark"] .fp-nav-link:hover, [data-panel="black"] .fp-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
/* Active page: colour only — no filled block — plus a short bar on the edge (as in ForgeTraq). */
.fp-nav-link.is-active, [data-panel] .fp-nav-link.is-active { background: transparent; color: var(--fp-text); font-weight: 600; }
[data-panel="dark"] .fp-nav-link.is-active, [data-panel="black"] .fp-nav-link.is-active { color: #fff; }
.fp-nav-link.is-active > svg:first-child { color: var(--fp-active); }
.fp-nav-link.is-active:hover { background: var(--fp-active-soft); }
.fp-nav > .fp-nav-group > .fp-nav-link.is-active::before, .fp-nav > .fp-nav-group > details > .fp-nav-link.is-active::before {
  content: ""; position: absolute; left: -14px; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0; background: var(--fp-active); }
.fp-nav-link .fp-nav-caret { margin-left: auto; transition: transform var(--fp-ease); }
.fp-nav-sub { display: none; padding: 2px 0 4px 29px; }
.fp-nav-sub .fp-nav-link { padding: 6px 10px; font-size: 13px; }
.fp-nav-badge { margin-left: auto; font-size: 11.5px; font-weight: 500; color: var(--fp-text-3); }
.fp-nav-link.is-active .fp-nav-badge { color: inherit; opacity: .75; }
.fp-panel-foot { margin-top: 16px; border: 1px solid var(--fp-panel-border); border-radius: var(--fp-radius); padding: 12px; font-size: 12px; color: var(--fp-text-3); }
.fp-panel-foot strong { display: block; font-family: var(--fp-font-head); font-weight: 500; font-size: 12.5px; color: var(--fp-text); margin-bottom: 3px; letter-spacing: -.01em; }
[data-panel="dark"] .fp-panel-foot strong, [data-panel="black"] .fp-panel-foot strong { color: #fff; }

.fp-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.fp-topbar {
  position: sticky; top: 0; z-index: 30; height: var(--fp-topbar-h);
  display: flex; align-items: center; gap: 10px; padding: 0 28px;
  background: var(--fp-surface); border-bottom: 1px solid var(--fp-border);
}
.fp-crumbs { display: flex; align-items: center; gap: 7px; color: var(--fp-text-3); font-weight: 500; min-width: 0; flex: 1; }
.fp-crumbs a:hover { color: var(--fp-text); }
.fp-crumbs > span:last-child { color: var(--fp-text); font-weight: 600; }
.fp-topbar-search { position: relative; width: min(360px, 34vw); }
.fp-topbar-search > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--fp-text-3); pointer-events: none; }
.fp-topbar-search .fp-input { padding-left: 36px; background: var(--fp-surface-2); border-color: var(--fp-border); }
.fp-topbar-actions { display: flex; align-items: center; gap: 8px; }
.fp-content { padding: 26px 28px 32px; flex: 1; width: 100%; max-width: 1480px; }
.fp-footer { padding: 14px 28px; color: var(--fp-text-3); font-size: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--fp-border); }
.fp-footer a:hover { color: var(--fp-text); }
.fp-burger { display: none !important; }
.fp-backdrop { display: none; }
.fp-sidebar-toggle-input { position: absolute; opacity: 0; pointer-events: none; }

@media (max-width: 1023px) {
  .fp-app, .fp-app.is-no-panel { grid-template-columns: minmax(0, 1fr); background: none; }
  .fp-dock {
    position: fixed; inset: auto 0 0 0; height: 62px; width: auto; flex-direction: row; justify-content: space-around;
    padding: 0 8px; border-top: 1px solid #1f1f1f; z-index: 45;
  }
  .fp-dock-logo, .fp-dock-sep, .fp-dock-spacer, .fp-dock-tip, .fp-dock-item.is-desktop { display: none; }
  .fp-panel {
    position: fixed; top: 0; left: 0; bottom: 62px; height: auto; width: min(300px, 86vw);
    transform: translateX(-102%); transition: transform .2s ease; z-index: 44;
  }
  .fp-sidebar-toggle-input:checked ~ .fp-panel { transform: none; }
  .fp-sidebar-toggle-input:checked ~ .fp-backdrop { display: block; position: fixed; inset: 0 0 62px 0; background: rgb(0 0 0 / .45); z-index: 43; }
  .fp-burger { display: inline-flex !important; }
  .fp-topbar { padding: 0 14px; }
  .fp-content { padding: 18px 14px 90px; }
  .fp-footer { padding: 14px 14px 80px; }
  .fp-topbar-search { display: none; }
  .fp-crumbs > :not(:last-child) { display: none; }
  .fp-table td { white-space: nowrap; }
}

/* ---------- Page header ---------- */
.fp-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.fp-page-title { font-size: 26px; font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.fp-page-subtitle { color: var(--fp-text-2); margin-top: 6px; font-size: 14px; }
.fp-page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fp-page-header .fp-breadcrumb { display: none; }
.fp-breadcrumb { display: flex; gap: 6px; align-items: center; color: var(--fp-text-3); font-size: 12.5px; margin-bottom: 8px; flex-wrap: wrap; }
.fp-breadcrumb a { color: var(--fp-text-2); }
.fp-breadcrumb a:hover { color: var(--fp-text); }
@media (max-width: 767px) { .fp-page-title { font-size: 21px; } .fp-page-header { align-items: flex-start; } }

/* ---------- Cards ---------- */
.fp-card { background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius-lg); min-width: 0; }
.fp-card + .fp-card { margin-top: 18px; }
.fp-card-header { padding: 16px 18px; border-bottom: 1px solid var(--fp-border); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fp-card-title { font-size: 14.5px; font-weight: 500; }
.fp-card-desc { color: var(--fp-text-3); font-size: 12.5px; margin-top: 3px; }
.fp-card-body { padding: 18px; }
.fp-card-footer { padding: 12px 18px; border-top: 1px solid var(--fp-border); background: var(--fp-surface-2); border-radius: 0 0 var(--fp-radius-lg) var(--fp-radius-lg); display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.fp-card-flush > .fp-card-body { padding: 0; }

/* ---------- Grid & utilities ---------- */
.fp-grid { display: grid; gap: 18px; }
.fp-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fp-layout-aside { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.fp-span-2 { grid-column: span 2; }
.fp-span-full { grid-column: 1 / -1; }
@media (max-width: 1199px) { .fp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fp-layout-aside { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .fp-grid-2, .fp-grid-3, .fp-grid-4 { grid-template-columns: 1fr; } .fp-span-2 { grid-column: auto; } }
.fp-grid > .fp-card + .fp-card, .fp-layout-aside > .fp-card + .fp-card, .fp-grid > * > .fp-card { margin-top: 0; }
.fp-stack > * + * { margin-top: 16px; }
.fp-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-between { justify-content: space-between; }
.fp-muted { color: var(--fp-text-2); }
.fp-faint { color: var(--fp-text-3); }
.fp-small { font-size: 12.5px; }
.fp-mono { font-family: var(--fp-mono); }
.fp-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-mt-0 { margin-top: 0 !important; }
.fp-mb-0 { margin-bottom: 0 !important; }
.fp-w-full { width: 100%; }
.fp-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.fp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 15px;
  font: 500 13px/1 var(--fp-font); border-radius: var(--fp-radius-sm); border: 1px solid var(--fp-border-strong);
  background: var(--fp-surface); color: var(--fp-text); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--fp-ease), border-color var(--fp-ease), color var(--fp-ease);
}
.fp-btn:hover { border-color: var(--fp-primary); color: var(--fp-primary-ink); background: var(--fp-primary-soft); text-decoration: none; }
.fp-btn:active, .fp-btn.is-pressed { background: var(--fp-primary); border-color: var(--fp-primary); color: var(--fp-on-primary); }
/* Main action: black in light theme (orange on hover), orange in dark theme (white on hover) — from Appearance. */
.fp-btn-primary { background: var(--fp-btn-bg); border-color: var(--fp-btn-bg); color: var(--fp-btn-text); }
.fp-btn-primary:hover, .fp-btn-primary:active { background: var(--fp-btn-hover-bg); border-color: var(--fp-btn-hover-bg); color: var(--fp-btn-hover-text); }
.fp-btn-ghost { background: transparent; border-color: var(--fp-border-strong); color: var(--fp-text); }
.fp-btn-ghost:hover { background: var(--fp-primary-soft); border-color: var(--fp-primary); color: var(--fp-primary-ink); }
.fp-btn-ghost.fp-btn-icon { border-color: transparent; color: var(--fp-text-3); }
.fp-btn-ghost.fp-btn-icon:hover { background: var(--fp-primary-soft); border-color: transparent; color: var(--fp-primary-ink); }
.fp-btn-soft { background: var(--fp-primary-soft); border-color: transparent; color: var(--fp-primary-ink); }
.fp-btn-soft:hover { background: var(--fp-primary); border-color: var(--fp-primary); color: var(--fp-on-primary); }
.fp-btn-danger { background: transparent; border-color: var(--fp-border-strong); color: var(--fp-danger); }
.fp-btn-danger:hover, .fp-btn-danger:active { background: var(--fp-danger); border-color: var(--fp-danger); color: #fff; }
/* Dark outline: the one outline that turns solid black (white in dark theme) on hover — for
   strong secondary actions next to a primary one. Plain outlines stay brand-tinted. */
.fp-btn-dark { border-color: var(--fp-text); color: var(--fp-text); }
.fp-btn-dark:hover, .fp-btn-dark:active { background: var(--fp-text); border-color: var(--fp-text); color: var(--fp-surface); }
/* Outline colour variants: tinted on hover, filled when pressed. Danger keeps its red. */
.fp-btn-success { color: var(--fp-success); }
.fp-btn-success:hover { background: var(--fp-success-soft); border-color: var(--fp-success); color: var(--fp-success); }
.fp-btn-success:active { background: var(--fp-success); border-color: var(--fp-success); color: #fff; }
.fp-btn-warning { color: var(--fp-warning); }
.fp-btn-warning:hover { background: var(--fp-warning-soft); border-color: var(--fp-warning); color: var(--fp-warning); }
.fp-btn-warning:active { background: var(--fp-warning); border-color: var(--fp-warning); color: #000; }
.fp-btn-info { color: var(--fp-info); }
.fp-btn-info:hover { background: var(--fp-info-soft); border-color: var(--fp-info); color: var(--fp-info); }
.fp-btn-info:active { background: var(--fp-info); border-color: var(--fp-info); color: #fff; }
.fp-btn-danger.is-solid { background: var(--fp-danger); border-color: var(--fp-danger); color: #fff; }
.fp-btn-sm { height: 32px; padding: 0 11px; font-size: 12.5px; }
.fp-btn-xs { height: 26px; padding: 0 8px; font-size: 12px; gap: 5px; border-radius: var(--fp-radius-xs); }
.fp-btn-icon { width: 38px; padding: 0; }
.fp-btn-sm.fp-btn-icon { width: 32px; }
.fp-btn-xs.fp-btn-icon { width: 26px; }
.fp-btn:disabled, .fp-btn[aria-disabled="true"], .fp-btn.is-loading { opacity: .4; cursor: not-allowed; pointer-events: none; }
.fp-btn.is-loading::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: fp-spin .7s linear infinite; }
@keyframes fp-spin { to { transform: rotate(360deg); } }
.fp-icon-btn {
  position: relative; width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: var(--fp-radius-sm);
  border: 1px solid var(--fp-border); background: var(--fp-surface); color: var(--fp-text-2); cursor: pointer; transition: border-color var(--fp-ease), color var(--fp-ease);
}
.fp-icon-btn:hover { border-color: var(--fp-primary); color: var(--fp-primary-ink); background: var(--fp-primary-soft); }
.fp-icon-btn .fp-dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--fp-primary); }

/* ---------- Forms ---------- */
.fp-field { margin-bottom: 18px; }
.fp-field:last-child { margin-bottom: 0; }
.fp-label { display: block; font-weight: 500; margin-bottom: 6px; font-size: 13px; }
.fp-label .fp-req { color: var(--fp-danger); margin-left: 2px; }
.fp-help { font-size: 12px; color: var(--fp-text-3); margin-top: 5px; }
.fp-error { font-size: 12px; color: var(--fp-danger); margin-top: 5px; }
.fp-input, .fp-select, .fp-textarea {
  display: block; width: 100%; height: 40px; padding: 0 12px; font: 400 13.5px var(--fp-font); color: var(--fp-text);
  background: var(--fp-surface); border: 1px solid var(--fp-border-strong); border-radius: var(--fp-radius-sm);
  transition: border-color var(--fp-ease);
}
.fp-textarea { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.fp-select {
  appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d8d8d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}
.fp-select[multiple] { height: auto; min-height: 96px; padding: 6px; background-image: none; }
.fp-input:hover, .fp-select:hover, .fp-textarea:hover { border-color: color-mix(in srgb, var(--fp-text) 30%, var(--fp-border-strong)); }
.fp-input:focus, .fp-select:focus, .fp-textarea:focus { outline: none; border-color: var(--fp-text); box-shadow: inset 0 0 0 1px var(--fp-text); }
.fp-input.is-invalid, .fp-select.is-invalid, .fp-textarea.is-invalid { border-color: var(--fp-danger); }
.fp-input::placeholder, .fp-textarea::placeholder { color: var(--fp-text-3); }
.fp-input[type="color"] { padding: 4px; width: 56px; cursor: pointer; }
.fp-input[type="file"] { padding: 7px 10px; height: auto; }
.fp-input-group { display: flex; }
.fp-input-group .fp-input { border-radius: var(--fp-radius-sm) 0 0 var(--fp-radius-sm); }
.fp-input-group .fp-btn { border-radius: 0 var(--fp-radius-sm) var(--fp-radius-sm) 0; height: 40px; }
.fp-input-wrap { position: relative; }
.fp-input-wrap .fp-input-action { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }

.fp-check { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; user-select: none; }
.fp-check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--fp-text); cursor: pointer; flex-shrink: 0; }
.fp-check-desc { display: block; color: var(--fp-text-3); font-size: 12px; }

.fp-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.fp-switch input { position: absolute; opacity: 0; pointer-events: none; }
.fp-switch-track { width: 36px; height: 20px; border-radius: 99px; background: var(--fp-border-strong); position: relative; transition: background var(--fp-ease); flex-shrink: 0; }
.fp-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform var(--fp-ease); }
.fp-switch input:checked + .fp-switch-track { background: var(--fp-primary); }
.fp-switch input:checked + .fp-switch-track::after { transform: translateX(16px); }
.fp-switch input:focus-visible + .fp-switch-track { outline: 2px solid var(--fp-primary); outline-offset: 2px; }

.fp-form-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--fp-border); }
.fp-form-row:first-child { padding-top: 0; }
.fp-form-row:last-child { border-bottom: 0; padding-bottom: 0; }
.fp-form-row-label .fp-label { margin-bottom: 2px; }
@media (max-width: 767px) { .fp-form-row { grid-template-columns: 1fr; gap: 8px; } }

/* ---------- Tables ---------- */
.fp-table-wrap { overflow-x: auto; }
.fp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.fp-table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--fp-text-3); padding: 10px 16px; background: var(--fp-surface-2); border-bottom: 1px solid var(--fp-border); white-space: nowrap; }
.fp-table td { padding: 12px 16px; border-bottom: 1px solid var(--fp-border); vertical-align: middle; }
.fp-table tbody tr:last-child td { border-bottom: 0; }
.fp-table tbody tr:hover td { background: var(--fp-surface-2); }
.fp-table td a:not([class]) { color: var(--fp-text); font-weight: 500; }
.fp-table td a:not([class]):hover { color: var(--fp-primary-ink); text-decoration: none; }
.fp-table .fp-col-actions { text-align: right; white-space: nowrap; width: 1%; }
.fp-table-toolbar { display: flex; gap: 8px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--fp-border); flex-wrap: wrap; }
.fp-table-toolbar .fp-input, .fp-table-toolbar .fp-select { height: 38px; width: auto; min-width: 200px; }
.fp-table-foot { padding: 12px 16px; border-top: 1px solid var(--fp-border); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--fp-text-3); font-size: 12.5px; }

.fp-pagination { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.fp-pagination a, .fp-pagination span {
  min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--fp-radius-sm); border: 1px solid var(--fp-border); color: var(--fp-text-2); font-size: 12.5px; background: var(--fp-surface);
}
.fp-pagination a:hover { border-color: var(--fp-text); color: var(--fp-text); text-decoration: none; }
.fp-pagination .is-active span { background: var(--fp-text); border-color: var(--fp-text); color: var(--fp-surface); }
.fp-pagination .is-disabled span { opacity: .45; }

/* ---------- Avatar / user ---------- */
.fp-avatar {
  width: 32px; height: 32px; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0; overflow: hidden;
  background: var(--fp-surface-2); border: 1px solid var(--fp-border); color: var(--fp-text-2); font-weight: 600; font-size: 11.5px; object-fit: cover;
}
.fp-avatar-lg { width: 72px; height: 72px; font-size: 22px; }
.fp-user-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fp-user-cell strong { display: block; font-weight: 500; }

/* ---------- Badges (status chips) ---------- */
.fp-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--fp-radius-xs); font-size: 11.5px; font-weight: 500; background: var(--fp-surface-2); color: var(--fp-text-2); border: 1px solid var(--fp-border); white-space: nowrap; line-height: 1; }
.fp-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fp-badge-primary, .fp-badge-success, .fp-badge-warning, .fp-badge-danger, .fp-badge-info { border-color: transparent; }
.fp-badge-primary { background: var(--fp-primary-soft); color: var(--fp-primary-ink); }
.fp-badge-success { background: var(--fp-success-soft); color: var(--fp-success); }
.fp-badge-warning { background: var(--fp-warning-soft); color: var(--fp-warning); }
.fp-badge-danger { background: var(--fp-danger-soft); color: var(--fp-danger); }
.fp-badge-info { background: var(--fp-info-soft); color: var(--fp-info); }

/* ---------- Alerts / toasts ---------- */
.fp-alert { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--fp-radius-sm); border: 1px solid var(--fp-border); border-left-width: 3px; background: var(--fp-surface); color: var(--fp-text); font-size: 13.5px; margin-bottom: 16px; align-items: flex-start; }
.fp-alert .fp-icon { margin-top: 1px; }
.fp-alert-success { border-left-color: var(--fp-success); } .fp-alert-success .fp-icon { color: var(--fp-success); }
.fp-alert-danger { border-left-color: var(--fp-danger); } .fp-alert-danger .fp-icon { color: var(--fp-danger); }
.fp-alert-warning { border-left-color: var(--fp-warning); } .fp-alert-warning .fp-icon { color: var(--fp-warning); }
.fp-alert-info { border-left-color: var(--fp-info); } .fp-alert-info .fp-icon { color: var(--fp-info); }
.fp-alert ul { margin: 4px 0 0; padding-left: 18px; }

.fp-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 10px; max-width: min(380px, calc(100vw - 40px)); }
.fp-toast { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--fp-radius-sm); background: var(--fp-surface); border: 1px solid var(--fp-border-strong); font-size: 13.5px; animation: fp-toast-in .2s ease; }
.fp-toast-success .fp-icon { color: var(--fp-success); }
.fp-toast-error .fp-icon { color: var(--fp-danger); }
.fp-toast-info .fp-icon { color: var(--fp-info); }
.fp-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: .2s; }
@keyframes fp-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Dropdown (native <details>) ---------- */
.fp-dropdown { position: relative; }
.fp-dropdown > summary { list-style: none; cursor: pointer; }
.fp-dropdown > summary::-webkit-details-marker { display: none; }
.fp-dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; z-index: 50; padding: 6px;
  background: var(--fp-surface); border: 1px solid var(--fp-border-strong); border-radius: var(--fp-radius); display: none;
}
.fp-dropdown[open] .fp-dropdown-menu, .fp-dropdown.is-open .fp-dropdown-menu { display: block; }
.fp-dropdown-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: var(--fp-radius-xs); color: var(--fp-text); background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
.fp-dropdown-item:hover { background: var(--fp-primary-soft); color: var(--fp-primary-ink); text-decoration: none; }
.fp-dropdown-item.is-danger:hover { background: var(--fp-danger-soft); color: var(--fp-danger); }
.fp-dropdown-item.is-current { font-weight: 600; }
.fp-dropdown-item.is-current::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--fp-primary); }
.fp-dropdown-item.is-danger { color: var(--fp-danger); }
.fp-dropdown-header { padding: 8px 10px 10px; border-bottom: 1px solid var(--fp-border); margin: -6px -6px 6px; }
.fp-dropdown-sep { height: 1px; background: var(--fp-border); margin: 6px -6px; }
.fp-dropdown-label { padding: 6px 10px 4px; font-size: 11.5px; color: var(--fp-text-3); font-weight: 500; }
.fp-account { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 8px 0 4px; border-radius: var(--fp-radius-sm); border: 1px solid var(--fp-border); background: var(--fp-surface); color: var(--fp-text); font-weight: 500; }
.fp-account:hover, details[open] > .fp-account { border-color: var(--fp-primary); background: var(--fp-primary-soft); }
.fp-account .fp-avatar { width: 28px; height: 28px; font-size: 11px; }

/* ---------- Modal ---------- */
.fp-modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: 20px; }
.fp-modal.is-open { display: flex; }
.fp-modal-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .55); }
.fp-modal-dialog { position: relative; width: 100%; max-width: 480px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--fp-surface); border-radius: var(--fp-radius-lg); border: 1px solid var(--fp-border-strong); animation: fp-modal-in .18s ease; }
.fp-modal-lg .fp-modal-dialog { max-width: 760px; }
.fp-modal-xl .fp-modal-dialog { max-width: 1120px; height: calc(100vh - 40px); }
.fp-modal-header { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--fp-border); }
.fp-modal-title { font-size: 15px; font-weight: 500; font-family: var(--fp-font-head); }
.fp-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.fp-modal-footer { padding: 14px 20px; border-top: 1px solid var(--fp-border); display: flex; justify-content: flex-end; gap: 8px; }
@keyframes fp-modal-in { from { opacity: 0; transform: translateY(10px); } }
.fp-confirm-icon { width: 44px; height: 44px; border-radius: var(--fp-radius); display: grid; place-items: center; background: var(--fp-danger-soft); color: var(--fp-danger); margin-bottom: 14px; }
.fp-confirm-page { max-width: 520px; margin: 40px auto; }

/* ---------- Tabs ---------- */
.fp-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--fp-border); margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.fp-tab { padding: 10px 14px; color: var(--fp-text-3); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 7px; align-items: center; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; font-size: 13.5px; }
.fp-tab:hover { color: var(--fp-text); text-decoration: none; }
.fp-tab.is-active { color: var(--fp-text); border-bottom-color: var(--fp-primary); }
.fp-tab .fp-count { font-size: 11.5px; background: var(--fp-surface-2); border: 1px solid var(--fp-border); border-radius: 10px; padding: 0 7px; color: var(--fp-text-2); line-height: 18px; }
.fp-tab.is-active .fp-count { background: var(--fp-text); border-color: var(--fp-text); color: var(--fp-surface); }

/* Segmented control (radio group) */
.fp-seg { display: inline-flex; border: 1px solid var(--fp-border); border-radius: var(--fp-radius-sm); padding: 2px; background: var(--fp-surface-2); gap: 2px; flex-wrap: wrap; }
.fp-seg > a, .fp-seg > label { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--fp-radius-xs); font-size: 12.5px; font-weight: 500; color: var(--fp-text-3); cursor: pointer; border: 1px solid transparent; }
.fp-seg > a:hover, .fp-seg > label:hover { color: var(--fp-text); text-decoration: none; }
.fp-seg > a.is-active, .fp-seg > label:has(input:checked) { background: var(--fp-surface); color: var(--fp-text); border-color: var(--fp-border); }
.fp-seg input { position: absolute; opacity: 0; pointer-events: none; }
.fp-seg > label:has(input:focus-visible) { outline: 2px solid var(--fp-primary); outline-offset: 1px; }

/* ---------- Stats (KPI strip) ---------- */
.fp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius-lg); overflow: hidden; }
.fp-kpi { padding: 16px 18px; border-left: 1px solid var(--fp-border); margin-left: -1px; border-top: 1px solid var(--fp-border); margin-top: -1px; min-width: 0; color: inherit; display: block; }
a.fp-kpi:hover { background: var(--fp-surface-2); text-decoration: none; }
.fp-kpi-label { color: var(--fp-text-3); font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 7px; }
.fp-kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 6px 0 4px; }
.fp-kpi-value { font-family: var(--fp-font-head); font-variant-numeric: tabular-nums; font-size: 25px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; }
.fp-kpi-spark { color: var(--fp-primary); flex-shrink: 0; }
.fp-kpi-spark.is-down { color: var(--fp-text); }
.fp-kpi-meta { font-size: 12px; color: var(--fp-text-3); }
.fp-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; margin-right: 4px; }
.fp-delta.is-up { color: var(--fp-success); }
.fp-delta.is-down { color: var(--fp-danger); }
/* legacy stat cards */
.fp-stat { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.fp-stat-icon { width: 38px; height: 38px; border-radius: var(--fp-radius-sm); display: grid; place-items: center; background: var(--fp-surface-2); border: 1px solid var(--fp-border); color: var(--fp-text-2); flex-shrink: 0; }
.fp-stat-label { color: var(--fp-text-3); font-size: 12.5px; font-weight: 500; }
.fp-stat-value { font-family: var(--fp-font-head); font-size: 22px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; margin-top: 3px; }
.fp-stat-meta { font-size: 12px; color: var(--fp-text-3); margin-top: 2px; }

/* ---------- Empty state ---------- */
.fp-empty { text-align: center; padding: 44px 20px; color: var(--fp-text-2); }
.fp-empty-icon { width: 52px; height: 52px; border-radius: var(--fp-radius); display: inline-grid; place-items: center; background: var(--fp-surface-2); border: 1px solid var(--fp-border); color: var(--fp-text-3); margin-bottom: 14px; }
.fp-empty h3 { color: var(--fp-text); font-size: 15px; margin-bottom: 6px; }

/* ---------- Lists ---------- */
.fp-kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; font-size: 13.5px; }
.fp-kv dt { color: var(--fp-text-3); }
.fp-kv dd { margin: 0; font-weight: 500; word-break: break-word; }
.fp-list { list-style: none; margin: 0; padding: 0; }
.fp-list > li { padding: 12px 18px; border-bottom: 1px solid var(--fp-border); display: flex; gap: 12px; align-items: center; }
.fp-list > li:last-child { border-bottom: 0; }
.fp-list a:not([class]) { color: var(--fp-text); }
.fp-timeline { list-style: none; margin: 0; padding: 4px 18px; }
.fp-timeline li { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--fp-border); align-items: flex-start; }
.fp-timeline li:first-child { border-top: 0; }
.fp-timeline-dot { width: 30px; height: 30px; border-radius: var(--fp-radius-sm); background: var(--fp-surface-2); border: 1px solid var(--fp-border); display: grid; place-items: center; color: var(--fp-text-2); flex-shrink: 0; }
.fp-timeline-dot.is-brand { background: var(--fp-primary); border-color: var(--fp-primary); color: var(--fp-on-primary); }
.fp-code-block { background: var(--fp-surface-2); border: 1px solid var(--fp-border); border-radius: var(--fp-radius-sm); padding: 12px 14px; font-family: var(--fp-mono); font-size: 12.5px; overflow-x: auto; white-space: pre; }
.fp-divider-text { display: flex; align-items: center; gap: 12px; color: var(--fp-text-3); font-size: 12px; margin: 18px 0; }
.fp-divider-text::before, .fp-divider-text::after { content: ""; flex: 1; height: 1px; background: var(--fp-border); }
.fp-color-swatch { width: 22px; height: 22px; border-radius: var(--fp-radius-xs); border: 1px solid var(--fp-border); display: inline-block; }
.fp-kbd { font-size: 11px; padding: 1px 6px; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-radius-xs); color: var(--fp-text-3); background: var(--fp-surface); font-family: var(--fp-font); }
.fp-progress { height: 5px; border-radius: 99px; background: var(--fp-surface-hover); overflow: hidden; }
.fp-progress > span { display: block; height: 100%; background: var(--fp-primary); }

/* ---------- Permission editor ---------- */
.fp-perm-group { border: 1px solid var(--fp-border); border-radius: var(--fp-radius); overflow: hidden; }
.fp-perm-group + .fp-perm-group { margin-top: 12px; }
.fp-perm-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--fp-surface-2); border-bottom: 1px solid var(--fp-border); font-weight: 500; }
.fp-perm-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 16px; padding: 14px; }

/* ---------- Settings index ---------- */
.fp-setting-tile { display: flex; gap: 14px; padding: 16px; border-radius: var(--fp-radius-lg); border: 1px solid var(--fp-border); background: var(--fp-surface); color: var(--fp-text); transition: border-color var(--fp-ease); }
.fp-setting-tile:hover { text-decoration: none; border-color: var(--fp-text); }
.fp-setting-tile h3 { font-size: 14px; margin-bottom: 3px; }
.fp-setting-tile p { color: var(--fp-text-3); font-size: 12.5px; margin: 0; }
.fp-setting-tile .fp-stat-icon { color: var(--fp-text); }

/* ---------- App cards ---------- */
.fp-app-card { display: flex; flex-direction: column; }
.fp-app-card .fp-card-body { flex: 1; display: flex; gap: 14px; }
.fp-app-icon { width: 46px; height: 46px; border-radius: var(--fp-radius); display: grid; place-items: center; background: #000; color: var(--fp-primary); flex-shrink: 0; }
.fp-app-icon img { width: 100%; height: 100%; border-radius: var(--fp-radius); object-fit: cover; }
.fp-app-card h3 { font-size: 14.5px; }
.fp-app-meta { display: flex; gap: 10px; flex-wrap: wrap; color: var(--fp-text-3); font-size: 12px; margin-top: 8px; }
.fp-app-card .fp-card-footer { justify-content: space-between; align-items: center; }

/* ---------- Media manager ---------- */
.fp-media { display: grid; grid-template-columns: minmax(0, 1fr) 300px; min-height: 560px; }
.fp-media-main { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--fp-border); }
.fp-media-toolbar { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--fp-border); flex-wrap: wrap; align-items: center; }
.fp-media-toolbar .fp-input, .fp-media-toolbar .fp-select { height: 36px; width: auto; }
.fp-media-crumbs { display: flex; gap: 4px; align-items: center; padding: 10px 14px; font-size: 13px; border-bottom: 1px solid var(--fp-border); flex-wrap: wrap; color: var(--fp-text-3); }
.fp-media-crumbs a, .fp-media-crumbs button { background: none; border: 0; padding: 2px 6px; border-radius: var(--fp-radius-xs); color: var(--fp-text-2); cursor: pointer; font: inherit; }
.fp-media-crumbs a:hover, .fp-media-crumbs button:hover { background: var(--fp-surface-hover); color: var(--fp-text); }
.fp-media-crumbs > :last-child { color: var(--fp-text); font-weight: 600; }
.fp-media-grid { flex: 1; overflow-y: auto; padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; align-content: start; position: relative; }
.fp-media-item { position: relative; border: 1px solid var(--fp-border); border-radius: var(--fp-radius); background: var(--fp-surface-2); cursor: pointer; overflow: hidden; user-select: none; transition: border-color var(--fp-ease); color: var(--fp-text); display: block; }
.fp-media-item:hover { border-color: var(--fp-text); text-decoration: none; }
.fp-media-item.is-selected { border-color: var(--fp-primary); box-shadow: inset 0 0 0 1px var(--fp-primary); }
.fp-media-thumb { aspect-ratio: 1; display: grid; place-items: center; color: var(--fp-text-3); background: var(--fp-surface-hover); overflow: hidden; }
.fp-media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fp-media-item.is-folder .fp-media-thumb { color: var(--fp-primary); background: var(--fp-primary-soft); }
.fp-media-name { padding: 7px 9px; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-media-check { position: absolute; top: 7px; left: 7px; width: 20px; height: 20px; border-radius: var(--fp-radius-xs); background: var(--fp-primary); color: #000; display: none; place-items: center; }
.fp-media-item.is-selected .fp-media-check { display: grid; }
.fp-media-aside { padding: 16px; overflow-y: auto; }
.fp-media-preview { aspect-ratio: 4/3; border-radius: var(--fp-radius); background: var(--fp-surface-hover); display: grid; place-items: center; overflow: hidden; margin-bottom: 14px; color: var(--fp-text-3); }
.fp-media-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fp-dropzone { position: absolute; inset: 8px; border: 2px dashed var(--fp-primary); border-radius: var(--fp-radius-lg); background: color-mix(in srgb, var(--fp-surface) 90%, transparent); display: none; place-items: center; z-index: 5; color: var(--fp-primary); font-weight: 600; text-align: center; }
.fp-media.is-dragging .fp-dropzone { display: grid; }
.fp-upload-list { position: fixed; left: 20px; bottom: 20px; z-index: 95; width: 320px; max-width: calc(100vw - 40px); }
.fp-modal-xl .fp-media { height: 100%; min-height: 0; }
@media (max-width: 899px) { .fp-media { grid-template-columns: 1fr; } .fp-media-aside { border-top: 1px solid var(--fp-border); } .fp-media-main { border-right: 0; } }
.fp-media-picker { display: flex; gap: 12px; align-items: center; }
.fp-media-picker-preview { width: 84px; height: 84px; border-radius: var(--fp-radius); border: 1px dashed var(--fp-border-strong); display: grid; place-items: center; overflow: hidden; background: var(--fp-surface-2); color: var(--fp-text-3); flex-shrink: 0; }
.fp-media-picker-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* ---------- Dashboard ---------- */
.fp-dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fp-dash-cell { min-width: 0; display: flex; flex-direction: column; }
.fp-dash-cell > .fp-card { flex: 1; }
.fp-dash-cell.is-span-1 { grid-column: span 1; }
.fp-dash-cell.is-span-2 { grid-column: span 2; }
.fp-dash-cell.is-span-3 { grid-column: 1 / -1; }
@media (max-width: 1199px) { .fp-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fp-dash-cell.is-span-2, .fp-dash-cell.is-span-3 { grid-column: 1 / -1; } }
@media (max-width: 767px) { .fp-dash { grid-template-columns: minmax(0, 1fr); } .fp-dash-cell.is-span-1 { grid-column: auto; } }
.fp-chart { display: block; width: 100%; height: auto; overflow: visible; }
.fp-chart text { font-family: var(--fp-font); }
.fp-chart-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--fp-text-3); }
.fp-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fp-chart-legend i { width: 14px; height: 2px; background: var(--fp-primary); display: inline-block; }
.fp-chart-legend i.is-before { background: repeating-linear-gradient(90deg, var(--fp-text) 0 4px, transparent 4px 7px); opacity: .6; }
.fp-chart-hit:hover .fp-chart-tip { opacity: 1; }
.fp-chart-tip { opacity: 0; transition: opacity var(--fp-ease); pointer-events: none; }
.fp-attention { list-style: none; margin: 0; padding: 4px 18px; }
.fp-attention li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 12px 0; border-top: 1px solid var(--fp-border); align-items: center; }
.fp-attention li:first-child { border-top: 0; }
.fp-attention strong { display: block; font-weight: 500; }
.fp-attention .fp-small { display: block; color: var(--fp-text-3); }

/* ---------- Appearance settings ---------- */
.fp-look { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
@media (max-width: 1199px) { .fp-look { grid-template-columns: 1fr; } .fp-look-preview { position: static !important; order: -1; } }
.fp-look-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px; padding: 16px 18px; border-top: 1px solid var(--fp-border); }
.fp-look-row:first-child { border-top: 0; }
.fp-look-row > div:first-child strong { display: block; font-weight: 500; }
.fp-look-row > div:first-child span { display: block; color: var(--fp-text-3); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
@media (max-width: 767px) { .fp-look-row { grid-template-columns: 1fr; gap: 10px; } }
.fp-colour { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px 0 4px; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-radius-sm); background: var(--fp-surface); }
.fp-colour input[type="color"] { width: 30px; height: 30px; padding: 0; border: 0; border-radius: var(--fp-radius-xs); background: none; cursor: pointer; }
.fp-colour input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.fp-colour input[type="color"]::-webkit-color-swatch { border: 1px solid rgba(127, 127, 127, .3); border-radius: var(--fp-radius-xs); }
.fp-colour input[type="text"] { width: 82px; border: 0; background: none; font: 500 13px var(--fp-font); color: var(--fp-text); text-transform: uppercase; padding: 0; }
.fp-colour input[type="text"]:focus { outline: none; }
.fp-colour:focus-within { border-color: var(--fp-text); }
.fp-colour-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fp-colour-box { border: 1px solid var(--fp-border); border-radius: var(--fp-radius); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.fp-colour-box.is-dark { background: #171717; border-color: #272727; color: #fff; }
.fp-colour-box.is-dark .fp-colour { background: #1d1d1d; border-color: #353535; }
.fp-colour-box.is-dark .fp-colour input[type="text"] { color: #fff; }
.fp-colour-box small { color: var(--fp-text-3); font-size: 12px; }
.fp-colour-box .fp-btn { align-self: flex-start; pointer-events: none; }
@media (max-width: 767px) { .fp-colour-pair { grid-template-columns: 1fr; } }
.fp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.fp-tile { position: relative; border: 1px solid var(--fp-border-strong); border-radius: var(--fp-radius); padding: 8px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; background: var(--fp-surface); transition: border-color var(--fp-ease); }
.fp-tile:hover { border-color: var(--fp-text); }
.fp-tile input { position: absolute; opacity: 0; pointer-events: none; }
.fp-tile:has(input:checked) { border-color: var(--fp-text); box-shadow: inset 0 0 0 1px var(--fp-text); }
.fp-tile:has(input:focus-visible) { outline: 2px solid var(--fp-primary); outline-offset: 2px; }
.fp-tile-cap { display: flex; align-items: center; gap: 7px; font-weight: 500; font-size: 12.5px; padding: 0 2px 2px; }
.fp-tile-cap::after { content: ""; margin-left: auto; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--fp-border-strong); flex-shrink: 0; }
.fp-tile:has(input:checked) .fp-tile-cap::after { border: 5px solid var(--fp-text); }
.fp-thumb { height: 62px; border-radius: var(--fp-radius-xs); border: 1px solid var(--fp-border); display: grid; grid-template-columns: 16px 1fr; overflow: hidden; background: #fff; }
.fp-thumb .s { background: #000; }
.fp-thumb .m { padding: 7px; display: flex; flex-direction: column; gap: 5px; }
.fp-thumb .m i { display: block; height: 5px; border-radius: 3px; background: #dedede; }
.fp-thumb .m i.b { width: 42%; height: 11px; background: #000; }
.fp-thumb.is-dark { background: #171717; border-color: #2c2c2c; }
.fp-thumb.is-dark .m i { background: #343434; }
.fp-thumb.is-dark .m i.b { background: var(--fp-primary); }
.fp-thumb.is-system { background: linear-gradient(90deg, #fff 50%, #171717 50%); }
.fp-thumb.is-panel { grid-template-columns: 9px 22px 1fr; }
.fp-thumb.is-panel .p { background: #fff; border-right: 1px solid #e6e6e6; }
.fp-thumb.is-panel.is-pdark .p { background: #171717; border-color: #171717; }
.fp-thumb.is-panel.is-pblack .p { background: #000; border-color: #000; }
.fp-shape { height: 44px; display: grid; place-items: center; }
.fp-shape span { width: 70px; height: 28px; background: var(--fp-text); }
.fp-font-tile { min-height: 82px; }
.fp-font-tile .fp-font-sample { font-size: 18px; white-space: nowrap; overflow: hidden; line-height: 1.1; padding: 4px 2px 0; color: var(--fp-text); letter-spacing: -.02em; }
.fp-uploads { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
@media (max-width: 767px) { .fp-uploads { grid-template-columns: 1fr; } }
.fp-upload { border: 1px dashed var(--fp-border-strong); border-radius: var(--fp-radius); padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fp-upload-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fp-upload-pv { width: 48px; height: 48px; border-radius: var(--fp-radius-sm); border: 1px solid var(--fp-border); display: grid; place-items: center; background: #fff; flex-shrink: 0; overflow: hidden; }
.fp-upload-pv.is-dark { background: #000; border-color: #000; }
.fp-upload-pv img { max-width: 80%; max-height: 80%; object-fit: contain; }
.fp-upload .fp-input[type="file"] { font-size: 12px; padding: 5px 6px; }
.fp-save-bar { display: flex; gap: 10px; align-items: center; padding: 12px 18px; border: 1px solid var(--fp-border); border-radius: var(--fp-radius-lg); background: var(--fp-surface); position: sticky; bottom: 12px; z-index: 5; }
.fp-look-preview { position: sticky; top: calc(var(--fp-topbar-h) + 18px); }

/* Live preview — reacts to the choices on the page through :has(), no script needed.
   Saved colours arrive as --pv-{portal}-* on .fp-look; swatches override them. */
.fp-pv { --pv-bg: #f3f3f2; --pv-surface: #fff; --pv-line: #e6e6e4; --pv-text: #000; --pv-mute: #7d7d7d; --pv-panel: #fff; --pv-panel-text: #474747; --pv-panel-line: #e6e6e4; --pv-r: 6px;
  --pv-accent: var(--pv-admin-accent); --pv-btn: var(--pv-admin-btn-l); --pv-btn-ink: var(--pv-admin-btn-l-ink); --pv-active: var(--pv-active-c, #ff6d00);
  --pv-head: var(--fp-font-head); --pv-body: var(--fp-font);
  border: 1px solid var(--fp-border); border-radius: var(--fp-radius); overflow: hidden; display: grid; grid-template-columns: 32px 98px 1fr; height: 300px; font-size: 9.5px; font-family: var(--pv-body); color: var(--pv-text); background: var(--pv-bg); }
.fp-pv-portals { display: flex; margin-bottom: 12px; }
.fp-pv-portals > label { flex: 1; justify-content: center; }
.fp-pv-dock { background: #000; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; border-right: 1px solid var(--pv-line); }
.fp-pv-dock img { width: 18px; height: 18px; object-fit: contain; }
.fp-pv-dock i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid #5c5c5c; display: block; }
.fp-pv-dock i.on { border-color: var(--pv-accent); }
.fp-pv-panel { background: var(--pv-panel); color: var(--pv-panel-text); border-right: 1px solid var(--pv-panel-line); padding: 10px 6px; display: flex; flex-direction: column; gap: 3px; }
.fp-pv-panel b { font-family: var(--pv-head); font-size: 10.5px; font-weight: 600; padding: 0 6px 7px; margin-bottom: 3px; color: var(--pv-text); border-bottom: 1px solid var(--pv-panel-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-pv-panel span { position: relative; padding: 4px 6px; border-radius: calc(var(--pv-r) - 1px); }
.fp-pv-panel span.on { color: var(--pv-active); font-weight: 600; }
.fp-pv-panel span.on::before { content: ""; position: absolute; left: -6px; top: 22%; bottom: 22%; width: 2px; border-radius: 2px; background: var(--pv-active); }
.fp-pv-panel em { display: block; height: 1px; background: var(--pv-panel-line); margin: 4px 0; }
.fp-pv-e { display: none; }
.fp-look:has(input[name="_pv_portal"][value="employee"]:checked) .fp-pv-a { display: none; }
.fp-look:has(input[name="_pv_portal"][value="employee"]:checked) .fp-pv-e { display: block; }
.fp-pv-main { padding: 10px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fp-pv-top { display: flex; gap: 6px; align-items: center; }
.fp-pv-search { flex: 1; height: 14px; border: 1px solid var(--pv-line); border-radius: calc(var(--pv-r) - 2px); background: var(--pv-surface); }
.fp-pv-switch { width: 24px; height: 14px; border-radius: 999px; border: 1px solid var(--pv-line); background: var(--pv-surface); position: relative; }
.fp-pv-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--pv-accent); }
.fp-pv-title { font-family: var(--pv-head); font-size: 13px; font-weight: 500; letter-spacing: -.02em; }
.fp-pv-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fp-pv-tiles div { background: var(--pv-surface); border: 1px solid var(--pv-line); border-radius: var(--pv-r); padding: 6px 8px; color: var(--pv-mute); }
.fp-pv-tiles strong { font-family: var(--pv-head); font-size: 13px; font-weight: 500; display: block; color: var(--pv-text); letter-spacing: -.03em; }
.fp-pv-card { background: var(--pv-surface); border: 1px solid var(--pv-line); border-radius: var(--pv-r); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.fp-pv-card i { display: block; height: 6px; border-radius: 3px; background: var(--pv-line); }
.fp-pv-btn { align-self: flex-start; background: var(--pv-btn); color: var(--pv-btn-ink); border: 1px solid var(--pv-btn); border-radius: calc(var(--pv-r) - 1px); padding: 3px 9px; font-weight: 500; }
.fp-pv-btn.is-outline { background: transparent; color: var(--pv-text); border-color: var(--pv-line); }
.fp-pv-chip { align-self: flex-start; background: color-mix(in srgb, var(--pv-accent) 14%, transparent); color: var(--pv-accent); border-radius: 3px; padding: 2px 6px; font-weight: 500; }
/* reacts: preview theme + portal */
.fp-look:has(input[name="_pv_portal"][value="employee"]:checked) .fp-pv { --pv-accent: var(--pv-employee-accent); --pv-btn: var(--pv-employee-btn-l); --pv-btn-ink: var(--pv-employee-btn-l-ink); }
.fp-look:has(input[name="_pv_mode"][value="dark"]:checked) .fp-pv { --pv-bg: #0d0d0d; --pv-surface: #171717; --pv-line: #272727; --pv-text: #fff; --pv-mute: #8d8d8d; --pv-btn: var(--pv-admin-btn-d); --pv-btn-ink: var(--pv-admin-btn-d-ink); }
.fp-look:has(input[name="_pv_mode"][value="dark"]:checked):has(input[name="_pv_portal"][value="employee"]:checked) .fp-pv { --pv-btn: var(--pv-employee-btn-d); --pv-btn-ink: var(--pv-employee-btn-d-ink); }
/* reacts: side panel */
.fp-look:has(input[name="admin_panel_style"][value="dark"]:checked) .fp-pv { --pv-panel: #171717; --pv-panel-text: #cfcfcf; --pv-panel-line: #272727; }
.fp-look:has(input[name="admin_panel_style"][value="black"]:checked) .fp-pv { --pv-panel: #000; --pv-panel-text: rgba(255,255,255,.7); --pv-panel-line: #1d1d1d; }
.fp-look:has(input[name="admin_panel_style"][value="dark"]:checked) .fp-pv-panel b,
.fp-look:has(input[name="admin_panel_style"][value="black"]:checked) .fp-pv-panel b { color: #fff; }
/* reacts: corners */
.fp-look:has(input[name="admin_radius"][value="sharp"]:checked) .fp-pv { --pv-r: 2px; }
.fp-look:has(input[name="admin_radius"][value="round"]:checked) .fp-pv { --pv-r: 11px; }

/* Appearance form pieces */
.fp-subsection { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--fp-border); }
.fp-subsection-head { display: flex; align-items: center; gap: 7px; font-weight: 600; margin-bottom: 12px; }
.fp-subsection-head svg { color: var(--fp-text-3); }
.fp-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fp-swatches { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.fp-swatch { position: relative; width: 28px; height: 28px; border-radius: var(--fp-radius-xs); background: var(--sw); border: 1px solid rgba(127, 127, 127, .28); cursor: pointer; }
.fp-swatch-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fp-swatch:has(input:checked), .fp-colour:has(.fp-swatch-radio:checked) { outline: 2px solid var(--fp-text); outline-offset: 2px; }
.fp-swatch:has(input:focus-visible) { outline: 2px solid var(--fp-primary); outline-offset: 2px; }
.fp-swatch:hover { transform: translateY(-1px); }
.fp-colour { position: relative; }
.fp-seg-icons > label { padding: 4px 8px; }
@media (max-width: 767px) { .fp-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Auth ---------- */
.fp-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--fp-surface); }
.fp-auth-art { position: relative; overflow: hidden; color: #fff; padding: 44px 52px; display: flex; flex-direction: column; background: #000; }
.fp-auth-art > * { position: relative; z-index: 1; }
.fp-auth-brand { display: flex; align-items: center; gap: 12px; font-family: var(--fp-font-head); font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.fp-auth-brand img { max-height: 36px; max-width: 200px; object-fit: contain; }
.fp-auth-flame { position: absolute !important; right: -120px; top: 50px; width: 520px; opacity: .16; z-index: 0 !important; pointer-events: none; }
.fp-auth-art h2 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.02; margin-top: auto; font-weight: 600; letter-spacing: -.035em; max-width: 10ch; }
.fp-auth-art p { color: rgba(255, 255, 255, .62); max-width: 42ch; font-size: 14.5px; margin: 18px 0 0; }
.fp-auth-foot { display: flex; gap: 18px; margin-top: 40px; color: rgba(255, 255, 255, .45); font-size: 12.5px; }
.fp-auth-art.is-image { background-size: cover; background-position: center; }
.fp-auth-art.is-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .15) 60%); z-index: 0; }
.fp-auth-panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--fp-surface); }
.fp-auth-box { width: 100%; max-width: 380px; }
.fp-auth-box h1 { font-size: 24px; font-weight: 500; margin-bottom: 6px; }
.fp-auth-box .fp-btn { height: 44px; }
.fp-auth-mobile-brand { display: none; }
.fp-auth.is-simple { grid-template-columns: 1fr; background: var(--fp-bg); }
.fp-auth.is-simple .fp-auth-art { display: none; }
.fp-auth.is-simple .fp-auth-panel { background: transparent; }
.fp-auth.is-simple .fp-auth-box { background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius-lg); padding: 28px; max-width: 420px; }
.fp-auth.is-simple .fp-auth-mobile-brand, .fp-auth-mobile-brand { margin-bottom: 26px; align-items: center; gap: 10px; font-family: var(--fp-font-head); font-size: 15px; font-weight: 500; }
.fp-auth.is-simple .fp-auth-mobile-brand { display: flex; }
@media (max-width: 899px) { .fp-auth { grid-template-columns: 1fr; } .fp-auth-art { display: none; } .fp-auth-mobile-brand { display: flex; } }

/* ---------- Legacy installer (CLI-only fallback) ---------- */
.fp-req-list { list-style: none; padding: 0; margin: 0; }
.fp-req-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--fp-border); }
.fp-req-list li:last-child { border-bottom: 0; }
.fp-ok { color: var(--fp-success); }
.fp-bad { color: var(--fp-danger); }
.fp-brand-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }

/* ---------- No-JS interaction patterns ---------- */
details.fp-nav-item > summary { list-style: none; }
details.fp-nav-item > summary::-webkit-details-marker { display: none; }
details.fp-nav-item[open] > .fp-nav-sub { display: block; }
details.fp-nav-item[open] > summary .fp-nav-caret { transform: rotate(90deg); }
.fp-dock-item.is-mobile { display: none; }
@media (max-width: 1023px) { .fp-dock-item.is-mobile { display: grid; } }

/* ---------- Top-bar tools (light/dark toggle) — borderless icons, as in ForgeTraq ---------- */
.fp-theme-toggle { display: flex; margin: 0; }
.fp-tool { position: relative; display: none; place-items: center; width: 38px; height: 38px; border: 0; border-radius: var(--fp-radius-sm); background: transparent; color: var(--fp-text-3); cursor: pointer; transition: color var(--fp-ease); }
.fp-tool svg { transition: transform var(--fp-ease); }
.fp-tool:hover { color: var(--fp-primary); }
.fp-tool:hover svg { transform: scale(1.18); }
.fp-tool:focus-visible { outline: 2px solid var(--fp-primary); outline-offset: 1px; }
[data-theme="light"] .fp-tool.is-to-dark, [data-theme="dark"] .fp-tool.is-to-light, [data-theme="system"] .fp-tool.is-to-dark { display: grid; }
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .fp-tool.is-to-dark { display: none; }
  [data-theme="system"] .fp-tool.is-to-light { display: grid; }
}
@media (prefers-reduced-motion: reduce) { .fp-tool:hover svg { transform: none; } }
[data-motion="off"] .fp-tool:hover svg { transform: none; }

/* ---------- Portals ---------- */
.fp-portal-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--fp-primary-ink); background: var(--fp-primary-soft); border-radius: 999px; padding: 3px 10px 3px 8px; margin-bottom: 14px; }
.fp-portal-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fp-text-2); white-space: nowrap; }
.fp-choice-list { display: grid; gap: 8px; }
.fp-choice { display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--fp-border); border-radius: var(--fp-radius); cursor: pointer; }
.fp-choice input { margin-top: 3px; accent-color: var(--fp-primary); }
.fp-choice strong { display: block; font-weight: 500; }
.fp-choice small { display: block; color: var(--fp-text-3); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.fp-choice-icon { color: var(--fp-text-3); margin-top: 1px; }
.fp-choice:hover { border-color: var(--fp-primary); }
.fp-choice:has(input:checked) { border-color: var(--fp-primary); background: var(--fp-primary-soft); }
.fp-choice:has(input:checked) .fp-choice-icon { color: var(--fp-primary); }
.fp-choice.is-disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Sign-in: animated style ---------- */
.fp-auth-embers { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; overflow: hidden; }
.fp-auth-embers i { position: absolute; bottom: -20px; width: 8px; height: 8px; border-radius: 50%; background: var(--fp-primary); opacity: 0; animation: fp-ember 7s linear infinite; }
.fp-auth-embers i:nth-child(odd) { width: 5px; height: 5px; }
.fp-auth-embers i:nth-child(3n) { background: #ffb36b; }
.fp-auth-embers i:nth-child(1) { left: 8%; animation-delay: 0s; animation-duration: 7s; }
.fp-auth-embers i:nth-child(2) { left: 16%; animation-delay: 2.4s; animation-duration: 9s; }
.fp-auth-embers i:nth-child(3) { left: 24%; animation-delay: 4.1s; animation-duration: 6.5s; }
.fp-auth-embers i:nth-child(4) { left: 33%; animation-delay: 1.2s; animation-duration: 8s; }
.fp-auth-embers i:nth-child(5) { left: 41%; animation-delay: 5.5s; animation-duration: 7.5s; }
.fp-auth-embers i:nth-child(6) { left: 49%; animation-delay: 3.3s; animation-duration: 10s; }
.fp-auth-embers i:nth-child(7) { left: 57%; animation-delay: 0.6s; animation-duration: 6s; }
.fp-auth-embers i:nth-child(8) { left: 64%; animation-delay: 4.8s; animation-duration: 8.5s; }
.fp-auth-embers i:nth-child(9) { left: 71%; animation-delay: 2s; animation-duration: 7s; }
.fp-auth-embers i:nth-child(10) { left: 78%; animation-delay: 6.1s; animation-duration: 9.5s; }
.fp-auth-embers i:nth-child(11) { left: 85%; animation-delay: 1.6s; animation-duration: 6.8s; }
.fp-auth-embers i:nth-child(12) { left: 92%; animation-delay: 3.9s; animation-duration: 8.2s; }
.fp-auth-embers i:nth-child(13) { left: 60%; animation-delay: 6.8s; animation-duration: 7.2s; }
.fp-auth-embers i:nth-child(14) { left: 30%; animation-delay: 7.4s; animation-duration: 9s; }

.fp-auth-art.is-animated .fp-auth-flame { opacity: .22; animation: fp-flicker 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes fp-ember { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .9; } 70% { opacity: .5; } 100% { transform: translateY(-105vh) translateX(30px); opacity: 0; } }
@keyframes fp-flicker { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.03) rotate(-1deg); } }
[data-motion="off"] .fp-auth-embers i, [data-motion="off"] .fp-auth-art.is-animated .fp-auth-flame { animation: none; }
[data-motion="off"] .fp-auth-embers i { opacity: .35; bottom: auto; top: calc(var(--y, 50) * 1%); }
@media (prefers-reduced-motion: reduce) { .fp-auth-embers i, .fp-auth-art.is-animated .fp-auth-flame { animation: none; } }
.fp-look-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.fp-look-pair .fp-tiles-3 { max-width: 460px; }

/* ---------- Notifications ---------- */
.fp-tool.is-shown { display: grid; }
summary.fp-tool { list-style: none; }
summary.fp-tool::-webkit-details-marker { display: none; }
details[open] > summary.fp-tool { color: var(--fp-primary); }
.fp-bell-count { position: absolute; top: 4px; left: 21px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: var(--fp-primary); color: var(--fp-on-primary);
  font: 600 9.5px/15px var(--fp-font); text-align: center; border: 2px solid var(--fp-surface); box-sizing: content-box; pointer-events: none; }
.fp-bell-menu { width: 380px; max-width: calc(100vw - 24px); padding: 0; overflow: hidden; }
.fp-bell-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--fp-border); }
.fp-bell-head strong { font-family: var(--fp-font-head); font-weight: 500; font-size: 13.5px; letter-spacing: -.01em; }
.fp-bell-head form { margin: 0; }
.fp-bell-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 16px; color: var(--fp-text-3); font-size: 12.5px; text-align: center; }
.fp-bell-all { display: block; text-align: center; padding: 11px; border-top: 1px solid var(--fp-border); font-weight: 500; font-size: 12.5px; color: var(--fp-text-2); }
.fp-bell-all:hover { background: var(--fp-primary-soft); color: var(--fp-primary-ink); text-decoration: none; }

.fp-notes { list-style: none; margin: 0; padding: 0; }
.fp-note { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 18px; border-bottom: 1px solid var(--fp-border); }
.fp-note:last-child { border-bottom: 0; }
.fp-note:hover { background: var(--fp-surface-2); }
.fp-note.is-unread::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--fp-primary); }
.fp-note-icon { width: 32px; height: 32px; border-radius: var(--fp-radius-sm); display: grid; place-items: center; border: 1px solid var(--fp-border); color: var(--fp-text-3); background: var(--fp-surface); flex-shrink: 0; }
.fp-note-icon.is-accent { color: var(--fp-primary); }
.fp-note-icon.is-success { color: var(--fp-success); }
.fp-note-icon.is-warning { color: var(--fp-warning); }
.fp-note-icon.is-danger { color: var(--fp-danger); }
.fp-note-icon.is-info { color: var(--fp-info); }
.fp-note-body { min-width: 0; color: var(--fp-text); display: flex; flex-direction: column; gap: 2px; }
.fp-note-body:hover { text-decoration: none; }
.fp-note-body strong { font-weight: 500; line-height: 1.4; }
.fp-note.is-unread .fp-note-body strong { font-weight: 600; }
.fp-note-context { color: var(--fp-text-3); font-size: 12px; }
.fp-note-text { color: var(--fp-text-2); font-size: 12.5px; line-height: 1.5; }
.fp-note-meta { display: flex; align-items: center; gap: 6px; color: var(--fp-text-3); font-size: 12px; white-space: nowrap; }
.fp-note-meta form { margin: 0; }
.fp-notes.is-compact { max-height: 380px; overflow-y: auto; }
.fp-notes.is-compact .fp-note { padding: 11px 14px; gap: 10px; }
.fp-notes.is-compact .fp-note-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.fp-notify-table .fp-col-switch { width: 96px; text-align: center; }
.fp-notify-table .fp-switch { justify-content: center; }
.fp-table-group th { background: var(--fp-surface); color: var(--fp-text); font-family: var(--fp-font-head); font-size: 12.5px; font-weight: 500; letter-spacing: -.01em; padding-top: 16px; text-align: left; }
@media (max-width: 767px) { .fp-bell-menu { position: fixed; left: 12px; right: 12px; top: 60px; width: auto; } }

/* ---------- Security ---------- */
.fp-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 767px) { .fp-choice-grid { grid-template-columns: 1fr; } }
.fp-checkup { list-style: none; margin: 0; padding: 4px 0; }
.fp-checkup li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 18px; }
.fp-checkup li + li { border-top: 1px solid var(--fp-border); }
.fp-checkup li > svg { margin-top: 2px; flex-shrink: 0; }
.fp-checkup li.is-ok > svg { color: var(--fp-success); }
.fp-checkup li.is-todo > svg { color: var(--fp-warning); }
.fp-checkup strong { display: block; font-weight: 500; }
.fp-checkup span { display: block; color: var(--fp-text-3); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.fp-card-body .fp-checkup li, .fp-card-body .fp-checkup { padding-left: 0; padding-right: 0; }
.fp-input-addon { display: inline-flex; align-items: center; padding: 0 12px; border: 1px solid var(--fp-border-strong); border-left: 0; border-radius: 0 var(--fp-radius-sm) var(--fp-radius-sm) 0; background: var(--fp-surface-2); color: var(--fp-text-3); font-size: 12.5px; white-space: nowrap; }
.fp-input-group > .fp-input:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.fp-setup-steps { margin: 0; padding-left: 20px; display: grid; gap: 18px; }
.fp-setup-steps li strong { display: block; font-weight: 500; margin-bottom: 2px; }
.fp-setup-steps li::marker { font-family: var(--fp-font-head); font-weight: 500; color: var(--fp-primary); }
.fp-qr { width: 200px; height: 200px; margin: 12px 0; padding: 8px; background: #fff; border: 1px solid var(--fp-border); border-radius: var(--fp-radius); }
.fp-qr svg { width: 100%; height: 100%; display: block; }
.fp-secret { font-family: var(--fp-mono); font-size: 12.5px; letter-spacing: .04em; word-break: break-all; }
.fp-code-input { font-family: var(--fp-mono); font-size: 18px; letter-spacing: .18em; text-align: center; }
.fp-recovery { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--fp-primary); border-radius: var(--fp-radius); background: var(--fp-primary-soft); }
.fp-recovery ol { margin: 8px 0 0; padding-left: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 24px; }
.fp-recovery code { font-family: var(--fp-mono); font-size: 13.5px; letter-spacing: .06em; }
.fp-mini-form .fp-label { margin-bottom: 6px; }

/* ---- Portal preview (read-only look at another portal) ------------------- */
.fp-preview-banner {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 22px; background: var(--fp-warning-soft); color: var(--fp-text);
  border-bottom: 1px solid color-mix(in srgb, var(--fp-warning) 35%, transparent); font-size: 13px;
}
.fp-preview-banner > svg { color: var(--fp-warning); flex: none; }
.fp-preview-banner > span { flex: 1 1 auto; min-width: 0; }
.fp-preview-banner-meta { color: var(--fp-text-2); }
.fp-preview-banner form { margin: 0; }
.fp-preview-lock { border: 0; margin: 0; padding: 0; min-width: 0; }
.fp-preview-lock :is(button, input, select, textarea):disabled { cursor: not-allowed; }
.fp-preview-roles { display: grid; gap: 8px; }
.fp-preview-role {
  display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px;
  border: 1px solid var(--fp-border); border-radius: var(--fp-radius);
}
.fp-preview-role-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.fp-preview-role-text small { color: var(--fp-text-3); font-size: 12px; }

/* ---- Roles grouped by portal (user form) and the role portal picker ------ */
.fp-role-portal + .fp-role-portal { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--fp-border); }
.fp-role-portal-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--fp-text-2); margin-bottom: 6px; }
.fp-portal-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* ---- Instant space switching (dock → side panel), no page load ------------ */
.fp-space-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.fp-space-pane { display: none; flex-direction: column; flex: 1; min-height: 0; }
label.fp-dock-item { cursor: pointer; }
.fp-dock-item.is-mobile-space { display: none; }
@media (max-width: 1023px) { .fp-dock-item.is-mobile-space { display: grid; } }

/* =====================================================================
   App UI refresh (v1.0.0): full-width pages, ForgePanel dropdowns, stat
   cards, pill filters, richer empty states, full screen. No drop shadows.
   ===================================================================== */
:root { --fp-bg: #f5f5f3; --fp-radius-sm: 8px; --fp-radius: 10px; --fp-radius-lg: 16px; }
[data-theme="dark"] { --fp-bg: #0c0c0c; --fp-surface: #141414; --fp-surface-2: #191919; --fp-surface-hover: #1f1f1f; --fp-border: #242424; --fp-border-strong: #313131; }
@media (prefers-color-scheme: dark) { [data-theme="system"] { --fp-bg: #0c0c0c; --fp-surface: #141414; --fp-surface-2: #191919; --fp-surface-hover: #1f1f1f; --fp-border: #242424; --fp-border-strong: #313131; } }
[data-radius="sharp"] { --fp-radius-sm: 3px; --fp-radius: 4px; --fp-radius-lg: 6px; }
[data-radius="round"] { --fp-radius-sm: 12px; --fp-radius: 16px; --fp-radius-lg: 22px; }

/* Pages use the full width of the screen. */
.fp-content { max-width: none; }
.fp-btn { border-radius: var(--fp-radius); }
.fp-input, .fp-select, .fp-textarea { border-radius: var(--fp-radius); }
.fp-check input, input[type="checkbox"], input[type="radio"] { accent-color: var(--fp-primary); }
.fp-badge { border-radius: 99px; padding: 0 9px; }

/* Page header: big title with a count, actions on the right. */
.fp-page-title { display: flex; align-items: center; gap: 12px; font-weight: 600; letter-spacing: -.035em; }
.fp-title-count { font: 600 12px/1 var(--fp-font); letter-spacing: 0; background: var(--fp-surface); border: 1px solid var(--fp-border); padding: 5px 10px; border-radius: 99px; color: var(--fp-text-2); }
.fp-page-subtitle { color: var(--fp-text-3); }

/* Stat cards row. */
.fp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.fp-stat { display: flex; align-items: center; gap: 13px; background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: 14px; padding: 14px 16px; min-width: 0; color: inherit; }
a.fp-stat:hover { border-color: var(--fp-primary); text-decoration: none; }
.fp-stat-icon { width: 40px; height: 40px; flex: none; border-radius: var(--fp-radius); display: grid; place-items: center; background: var(--fp-surface-2); border: 1px solid var(--fp-border); color: var(--fp-text-2); }
.fp-stat-icon.is-success { background: var(--fp-success-soft); color: var(--fp-success); border-color: transparent; }
.fp-stat-icon.is-warning { background: var(--fp-warning-soft); color: var(--fp-warning); border-color: transparent; }
.fp-stat-icon.is-danger { background: var(--fp-danger-soft); color: var(--fp-danger); border-color: transparent; }
.fp-stat-icon.is-primary { background: var(--fp-primary-soft); color: var(--fp-primary); border-color: transparent; }
.fp-stat small { display: block; color: var(--fp-text-3); font-size: 12px; }
.fp-stat strong { display: block; font: 600 20px/1.2 var(--fp-font-head); letter-spacing: -.03em; color: var(--fp-text); }

/* Tabs inside cards and on pages: orange underline, orange count when active. */
.fp-card > .fp-tabs { padding: 0 12px; margin-bottom: 0; }
.fp-tab { padding: 14px 12px 12px; }
.fp-tab .fp-count { border-radius: 99px; font-weight: 600; color: var(--fp-text-3); }
.fp-tab.is-active .fp-count { background: var(--fp-primary-soft); border-color: transparent; color: var(--fp-primary); }

/* List toolbars: search + pill filters. */
.fp-table-toolbar { gap: 8px; padding: 12px 16px; }
.fp-table-toolbar .fp-input[type="search"], .fp-table-toolbar input.fp-input:not([type]) , .fp-table-toolbar input.fp-input[type="text"] { flex: 0 1 320px; min-width: 200px; background: var(--fp-surface-2); border-color: var(--fp-border); }
.fp-js .fp-table-toolbar .fp-toolbar-submit { display: none; }
.fp-table th { font-weight: 500; }
.fp-table td { padding: 11px 16px; }
.fp-table tbody tr:hover td { background: color-mix(in srgb, var(--fp-primary) 4%, var(--fp-surface)); }

/* ---- ForgePanel dropdown (fp.js turns every select.fp-select into one) ---- */
.fp-dd { position: relative; display: block; width: 100%; min-width: 0; }
.fp-dd-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.fp-dd-btn {
  display: flex; align-items: center; gap: 7px; width: 100%; height: 40px; padding: 0 12px; text-align: left; cursor: pointer;
  font: 400 13.5px var(--fp-font); color: var(--fp-text); background: var(--fp-surface);
  border: 1px solid var(--fp-border-strong); border-radius: var(--fp-radius); transition: border-color var(--fp-ease), background var(--fp-ease);
}
.fp-dd-btn:hover { border-color: color-mix(in srgb, var(--fp-text) 30%, var(--fp-border-strong)); }
.fp-dd-btn:focus-visible, .fp-dd.is-open .fp-dd-btn { outline: none; border-color: var(--fp-primary); box-shadow: 0 0 0 3px var(--fp-primary-soft); }
.fp-dd-btn:disabled { opacity: .55; cursor: not-allowed; }
.fp-dd.is-invalid .fp-dd-btn { border-color: var(--fp-danger); }
.fp-dd-prefix { color: var(--fp-text-3); font-size: 12.5px; }
.fp-dd-prefix:empty { display: none; }
.fp-dd-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-dd-caret { width: 15px; height: 15px; flex: none; color: var(--fp-text-3); transition: transform var(--fp-ease); }
.fp-dd.is-open .fp-dd-caret { transform: rotate(180deg); }
.fp-dd-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(360px, 90vw); z-index: 80;
  display: none; flex-direction: column; background: var(--fp-surface); border: 1px solid var(--fp-border-strong); border-radius: 14px; padding: 6px;
}
.fp-dd.is-up .fp-dd-menu { top: auto; bottom: calc(100% + 6px); }
.fp-dd.is-open .fp-dd-menu { display: flex; }
.fp-dd-search { display: flex; align-items: center; gap: 8px; padding: 0 8px 6px; margin: 0 0 4px; border-bottom: 1px solid var(--fp-border); color: var(--fp-text-3); }
.fp-dd-search svg { width: 15px; height: 15px; flex: none; }
.fp-dd-search input { flex: 1; min-width: 0; height: 32px; border: 0; outline: 0; background: transparent; font: 400 13px var(--fp-font); color: var(--fp-text); }
.fp-dd-list { max-height: 280px; overflow-y: auto; scrollbar-width: thin; }
.fp-dd-group { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 600; color: var(--fp-text-3); }
.fp-dd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; cursor: pointer; color: var(--fp-text-2); font-weight: 500; white-space: nowrap; }
.fp-dd-item > span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.fp-dd-check { width: 15px; height: 15px; flex: none; color: var(--fp-primary); visibility: hidden; }
.fp-dd-item.is-selected { color: var(--fp-text); font-weight: 600; }
.fp-dd-item.is-selected .fp-dd-check { visibility: visible; }
.fp-dd-item.is-active { background: var(--fp-primary-soft); color: var(--fp-text); }
.fp-dd-item.is-disabled { opacity: .45; cursor: not-allowed; }
.fp-dd-empty { padding: 10px; color: var(--fp-text-3); font-size: 12.5px; }
.fp-dd-empty[hidden] { display: none; }
/* In list toolbars the dropdown is a compact pill: "Category  All ▾"; orange when a filter is set. */
.fp-dd.is-pill { width: auto !important; min-width: 0 !important; flex: none; }
.fp-dd.is-pill .fp-dd-btn { height: 38px; width: auto; padding: 0 11px 0 13px; font-weight: 500; color: var(--fp-text-2); border-color: var(--fp-border); }
.fp-dd.is-pill.is-set .fp-dd-btn { background: var(--fp-primary-soft); border-color: transparent; color: var(--fp-primary-ink); }
.fp-dd.is-pill.is-set .fp-dd-prefix { color: inherit; opacity: .8; }
.fp-dd.is-pill .fp-dd-menu { min-width: 220px; }
/* Without fp.js the native select still looks like ForgePanel. */
.fp-select option:checked { background: var(--fp-primary-soft); color: var(--fp-text); }

/* ---- Empty states ---- */
.fp-empty { padding: 56px 20px 64px; }
.fp-empty-art { position: relative; width: 150px; height: 92px; margin: 0 auto 20px; }
.fp-empty-art > span { position: absolute; display: grid; place-items: center; border-radius: 18px; border: 1px solid var(--fp-border); background: var(--fp-surface-2); color: var(--fp-text-3); }
.fp-empty-art .fp-empty-icon { width: 76px; height: 76px; left: 37px; top: 8px; margin: 0; background: var(--fp-primary-soft); border-color: transparent; color: var(--fp-primary); z-index: 1; }
.fp-empty-art .fp-empty-icon svg { width: 32px; height: 32px; stroke-width: 1.7; }
.fp-empty-tile { width: 50px; height: 50px; top: 32px; }
.fp-empty-tile.is-left { left: 0; transform: rotate(-10deg); }
.fp-empty-tile.is-right { right: 0; transform: rotate(9deg); }
.fp-empty h3 { font: 600 18px var(--fp-font-head); letter-spacing: -.03em; margin-bottom: 6px; }
.fp-empty p { color: var(--fp-text-3); max-width: 420px; margin: 0 auto; }
.fp-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---- Product rows: picture, stock bar ---- */
.fp-thumb { width: 40px; height: 40px; flex: none; border-radius: var(--fp-radius); background: var(--fp-surface-2); border: 1px solid var(--fp-border); display: grid; place-items: center; color: var(--fp-text-3); overflow: hidden; }
.fp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fp-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fp-item strong { display: block; font-weight: 500; }
.fp-item small { display: block; color: var(--fp-text-3); font-size: 12px; }
.fp-meter { display: inline-flex; align-items: center; gap: 10px; }
.fp-meter-bar { width: 72px; height: 6px; border-radius: 9px; background: var(--fp-surface-2); border: 1px solid var(--fp-border); overflow: hidden; }
.fp-meter-bar i { display: block; height: 100%; border-radius: 9px; background: var(--fp-success); }
.fp-meter.is-warning .fp-meter-bar i { background: var(--fp-warning); }
.fp-meter.is-warning .fp-meter-num { color: var(--fp-warning); }
.fp-meter.is-danger .fp-meter-num { color: var(--fp-danger); }
.fp-meter-num { font-weight: 500; font-size: 12.5px; }

/* ---- Full screen ---- */
.fp-fs-toggle .fp-fs-exit, .is-fullscreen .fp-fs-toggle .fp-fs-enter { display: none; }
.is-fullscreen .fp-fs-toggle .fp-fs-exit { display: contents; }
.fp-fs-toggle > span { display: contents; }
.is-fullscreen .fp-fs-toggle { color: var(--fp-primary); }
.fp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--fp-primary); z-index: 200; opacity: 0; transition: width .4s ease, opacity .2s ease; }
.fp-progress.is-on { width: 80%; opacity: 1; transition: width 4s cubic-bezier(.1,.7,.3,1), opacity .1s; }
[hidden] { display: none !important; }
.fp-fs-toggle { display: grid; }

/* ---- Settings, app style: section list on the left, the section on the right ---- */
.fp-settings { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; }
.fp-settings-nav { position: sticky; top: calc(var(--fp-topbar-h) + 16px); display: grid; gap: 2px; background: var(--fp-surface); border: 1px solid var(--fp-border); border-radius: var(--fp-radius-lg); padding: 8px; }
.fp-settings-link { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 11px; color: var(--fp-text-2); min-width: 0; }
.fp-settings-link:hover { background: var(--fp-primary-soft); color: var(--fp-text); text-decoration: none; }
.fp-settings-icon { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--fp-surface-2); border: 1px solid var(--fp-border); color: var(--fp-text-2); }
.fp-settings-text { min-width: 0; display: grid; }
.fp-settings-text strong { font-weight: 500; font-size: 13.5px; }
.fp-settings-text small { color: var(--fp-text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-settings-link.is-active { color: var(--fp-text); }
.fp-settings-link.is-active strong { font-weight: 600; }
.fp-settings-link.is-active .fp-settings-icon { background: var(--fp-primary-soft); border-color: transparent; color: var(--fp-primary); }
.fp-settings-body { min-width: 0; }
@media (max-width: 1199px) {
  .fp-settings { grid-template-columns: minmax(0, 1fr); }
  .fp-settings-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none; padding: 6px; }
  .fp-settings-link { flex: none; }
  .fp-settings-text small { display: none; }
}
/* Settings home: big tiles. */
.fp-setting-tile { border-radius: var(--fp-radius-lg) !important; padding: 18px !important; }
.fp-setting-tile:hover { border-color: var(--fp-primary) !important; }
.fp-setting-tile:hover .fp-stat-icon { background: var(--fp-primary-soft); color: var(--fp-primary); border-color: transparent; }

/* File pickers in the ForgePanel style (no grey browser button). */
input[type="file"] { font: 400 13px var(--fp-font); color: var(--fp-text-3); max-width: 100%; }
input[type="file"]::file-selector-button {
  height: 34px; padding: 0 14px; margin-right: 12px; border-radius: var(--fp-radius); border: 1px solid var(--fp-border-strong);
  background: var(--fp-surface); color: var(--fp-text); font: 500 13px var(--fp-font); cursor: pointer; transition: all var(--fp-ease);
}
input[type="file"]::file-selector-button:hover { border-color: var(--fp-primary); background: var(--fp-primary-soft); color: var(--fp-primary-ink); }
.fp-input[type="file"] { height: auto; padding: 5px; }
/* Date and time fields: brand focus and calendar icon colour. */
input[type="date"], input[type="datetime-local"], input[type="time"] { color-scheme: inherit; }
input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
::selection { background: var(--fp-primary-soft); }
@media (max-width: 767px) {
  .fp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fp-stat { padding: 11px 12px; gap: 10px; }
  .fp-stat-icon { width: 34px; height: 34px; }
  .fp-stat strong { font-size: 17px; }
}

/* ---- Backups ---- */
.fp-recovery-key { font: 600 20px/1.6 var(--fp-mono); letter-spacing: .04em; padding: 18px 20px; margin: 16px 0 6px; border: 1px dashed var(--fp-primary); border-radius: var(--fp-radius); background: var(--fp-primary-soft); color: var(--fp-text); word-break: break-word; user-select: all; }
.fp-backup-log { list-style: none; margin: 0; padding: 12px 18px 16px; display: grid; gap: 4px; font-size: 12.5px; color: var(--fp-text-2); }
.fp-backup-log li:first-child { color: var(--fp-text); font-weight: 500; }
.fp-spin { animation: fp-spin 1s linear infinite; }
.fp-confirm-pop { display: inline-block; position: relative; }
.fp-confirm-pop > summary { list-style: none; }
.fp-confirm-pop > summary::-webkit-details-marker { display: none; }
.fp-pop-form { right: 0; left: auto; width: 260px; padding: 12px; display: grid; gap: 8px; text-align: left; white-space: normal; }
.fp-pop-form .fp-help { margin: 0; }
.fp-mini-field { display: grid; gap: 3px; font-size: 12px; color: var(--fp-text-3); }
.fp-cron { display: block; padding: 10px 12px; border-radius: var(--fp-radius-sm); background: var(--fp-surface-2); border: 1px solid var(--fp-border); font-size: 12px; word-break: break-all; user-select: all; }
/* Role templates */
.fp-role-template-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.fp-role-template { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--fp-border); border-radius: var(--fp-radius-sm, 10px); color: inherit; text-decoration: none; background: var(--fp-surface); }
.fp-role-template:hover { border-color: var(--fp-primary); }
.fp-role-template.is-active { border-color: var(--fp-primary); box-shadow: 0 0 0 1px var(--fp-primary) inset; }
.fp-role-template strong { display: block; font-size: 13.5px; }
.fp-role-template small { display: block; font-size: 12px; color: var(--fp-text-3); margin-top: 2px; line-height: 1.4; }
/* Cloud storage */
.fp-cloud-form:not(:has(input[name="backup_cloud_enabled"][type="checkbox"]:checked)) [data-when-cloud] { display: none; }
.fp-backup-cloud { margin-top: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fp-backup-cloud .fp-badge .fp-icon-sm { width: 13px; height: 13px; }
.fp-storage-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fp-storage-steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.fp-storage-steps li { display: flex; align-items: flex-start; gap: 6px; overflow-wrap: anywhere; }
.fp-storage-steps li.is-ok > svg { color: var(--fp-success, #16a34a); flex: none; }
.fp-storage-steps li.is-bad > svg { color: var(--fp-danger, #dc2626); flex: none; }
.fp-storage-missing { margin: 6px 0 0; padding-left: 18px; max-height: 180px; overflow: auto; }
.fp-link-btn { background: none; border: 0; padding: 0; color: var(--fp-primary, #ff6d00); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
/* Restore */
.fp-steps-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; color: var(--fp-text-2); }
.fp-restore-history { list-style: none; margin: 0; padding: 4px 18px 14px; display: grid; gap: 12px; }
.fp-restore-history li { display: flex; gap: 10px; align-items: flex-start; }
.fp-restore-history li > span:last-child { display: grid; gap: 2px; min-width: 0; }
.fp-restore-history strong { font-size: 13px; overflow-wrap: anywhere; }
.fp-restore-history small { font-size: 12px; color: var(--fp-text-3); }
.fp-restore-history .fp-badge { flex: none; }
.fp-mail-paused { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fp-mail-paused > div { flex: 1 1 260px; }
.fp-mail-paused form { display: flex; gap: 8px; }