/* ==========================================================================
   OmniGuard console — design tokens
   Cobalt sidebar (both themes), Manrope, three signal colours with meaning:
   safe = green, attention = amber, threat = red.
   ========================================================================== */
:root, [data-bs-theme="light"] {
  --fg-canvas: #edf0f5;
  --fg-surface: #ffffff;
  --fg-raised: #f6f8fb;
  --fg-ink: #16203a;
  --fg-muted: #5f6b82;
  --fg-line: #dce2ec;
  --fg-primary: #2747d8;
  --fg-primary-soft: rgba(39, 71, 216, .09);
  --fg-safe: #1a8f5f;
  --fg-warn: #b97c06;
  --fg-threat: #cc3d34;
  --fg-safe-soft: rgba(26, 143, 95, .11);
  --fg-warn-soft: rgba(201, 138, 11, .14);
  --fg-threat-soft: rgba(204, 61, 52, .1);
  --fg-side-bg: #14215c;
  --fg-side-ink: #c9d2f5;
  --fg-side-strong: #ffffff;
  --fg-side-hover: rgba(255, 255, 255, .07);
  --fg-side-active: rgba(255, 255, 255, .13);
  --fg-shadow: 0 1px 2px rgba(22, 32, 58, .05), 0 6px 20px -12px rgba(22, 32, 58, .18);
}
[data-bs-theme="dark"] {
  --fg-canvas: #0e1424;
  --fg-surface: #151d31;
  --fg-raised: #1b2540;
  --fg-ink: #e4e9f4;
  --fg-muted: #8f9bb3;
  --fg-line: #26314d;
  --fg-primary: #7c95ff;
  --fg-primary-soft: rgba(124, 149, 255, .14);
  --fg-safe: #3ccb8e;
  --fg-warn: #f0b43c;
  --fg-threat: #f26b60;
  --fg-safe-soft: rgba(60, 203, 142, .13);
  --fg-warn-soft: rgba(240, 180, 60, .14);
  --fg-threat-soft: rgba(242, 107, 96, .14);
  --fg-side-bg: #0a1030;
  --fg-side-ink: #a9b4dc;
  --fg-side-hover: rgba(255, 255, 255, .05);
  --fg-side-active: rgba(124, 149, 255, .18);
  --fg-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* Bootstrap follows the tokens, so every existing page themes itself. */
:root, [data-bs-theme] {
  --bs-body-font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bs-body-bg: var(--fg-canvas);
  --bs-body-color: var(--fg-ink);
  --bs-secondary-color: var(--fg-muted);
  --bs-tertiary-bg: var(--fg-raised);
  --bs-border-color: var(--fg-line);
  --bs-emphasis-color: var(--fg-ink);
  --bs-primary: var(--fg-primary);
  --bs-link-color: var(--fg-primary);
  --bs-link-hover-color: var(--fg-primary);
  --bs-card-bg: var(--fg-surface);
}
body { background: var(--fg-canvas); color: var(--fg-ink); font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .h6 { letter-spacing: -.01em; font-weight: 700; }
:focus-visible { outline: 2px solid var(--fg-primary); outline-offset: 2px; }
.fg-skip { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--fg-surface); padding: .5rem .75rem; border-radius: 8px; }
.fg-skip:focus { left: 8px; }

/* ---- Shell ---------------------------------------------------------------- */
.fg-shell { display: flex; min-height: 100vh; }
.fg-side {
  --w: 248px;
  width: var(--w); flex: none; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--fg-side-bg); color: var(--fg-side-ink); padding: 18px 12px 12px; z-index: 1040;
  transition: width .2s ease;
}
.fg-brand { display: flex; align-items: center; gap: 10px; color: var(--fg-side-strong); text-decoration: none; padding: 4px 8px 18px; }
.fg-brand:hover { color: var(--fg-side-strong); }
.fg-brand-mark { width: 30px; height: 30px; flex: none; color: #8fa6ff; }
.fg-brand-text { font-weight: 800; font-size: 1.08rem; line-height: 1.1; white-space: nowrap; }
.fg-brand-text small { display: block; font-weight: 500; font-size: .72rem; color: var(--fg-side-ink); opacity: .8; }
.fg-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain;
  /* Scrollbar hidden until the menu is hovered or focused; space stays reserved so nothing shifts. */
  scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; }
.fg-nav:hover, .fg-nav:focus-within { scrollbar-color: rgba(255, 255, 255, .28) transparent; }
/* Older WebKit/Chromium fallback */
.fg-nav::-webkit-scrollbar { width: 6px; }
.fg-nav::-webkit-scrollbar-track { background: transparent; }
.fg-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 99px; }
.fg-nav:hover::-webkit-scrollbar-thumb, .fg-nav:focus-within::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28); }
.fg-nav::-webkit-scrollbar-button { display: none; height: 0; }
.fg-nav-group { font-size: .72rem; font-weight: 600; color: var(--fg-side-ink); opacity: .6; padding: 14px 10px 6px; white-space: nowrap; }
.fg-nav-link {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; margin: 1px 0;
  color: var(--fg-side-ink); text-decoration: none; border-radius: 9px; font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.fg-nav-link .bi { font-size: 1.1rem; width: 20px; text-align: center; flex: none; }
.fg-nav-link:hover { background: var(--fg-side-hover); color: var(--fg-side-strong); }
.fg-nav-link.is-active { background: var(--fg-side-active); color: var(--fg-side-strong); }
.fg-nav-link.is-active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: #8fa6ff; }
.fg-nav-badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 700; text-align: center; }
.fg-nav-badge.is-warn { background: #f0b43c; color: #2b1d00; }
.fg-nav-badge.is-threat { background: #f26b60; color: #fff; }
.fg-side-foot { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; margin-top: 8px; }
.fg-user { display: flex; align-items: center; gap: 10px; padding: 6px 6px 8px; }
.fg-avatar { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  background: #8fa6ff; color: var(--fg-side-bg); font-weight: 800; font-size: .8rem; }
.fg-user-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; white-space: nowrap; }
.fg-user-text b { color: var(--fg-side-strong); font-size: .86rem; }
.fg-user-text small { font-size: .74rem; opacity: .75; }
.fg-side .fg-icon-btn { color: var(--fg-side-ink); }
.fg-side .fg-icon-btn:hover { background: var(--fg-side-hover); color: #fff; }
.fg-collapse { display: flex; align-items: center; gap: 12px; width: 100%; background: none; border: 0; color: var(--fg-side-ink);
  padding: 8px 10px; border-radius: 9px; font: inherit; font-size: .84rem; opacity: .75; }
.fg-collapse:hover { background: var(--fg-side-hover); opacity: 1; }
.fg-collapse .bi { width: 20px; transition: transform .2s; }

/* Slim (icon-only) sidebar — desktop only; phones always get the full drawer */
@media (min-width: 992px) {
.fg-nav-slim .fg-side { --w: 76px; }
.fg-nav-slim .fg-side .fg-brand-text, .fg-nav-slim .fg-side .fg-nav-label, .fg-nav-slim .fg-side .fg-user-text,
.fg-nav-slim .fg-side .fg-user form, .fg-nav-slim .fg-side .fg-nav-group { display: none; }
.fg-nav-slim .fg-side .fg-brand { justify-content: center; padding-left: 0; padding-right: 0; }
.fg-nav-slim .fg-side .fg-nav-link, .fg-nav-slim .fg-side .fg-collapse { justify-content: center; }
.fg-nav-slim .fg-side .fg-nav-badge { position: absolute; top: 2px; right: 4px; min-width: 18px; padding: 0 5px; font-size: .65rem; }
.fg-nav-slim .fg-side .fg-collapse .bi { transform: rotate(180deg); }
.fg-nav-slim .fg-side .fg-user { justify-content: center; }
.fg-nav-slim .fg-side .fg-nav-group + .fg-nav-link { margin-top: 12px; }
}

.fg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fg-top {
  position: sticky; top: 0; z-index: 1030; display: flex; align-items: center; gap: 12px; padding: 14px 28px;
  background: color-mix(in srgb, var(--fg-canvas) 86%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--fg-line);
}
.fg-top-title { font-size: 1.25rem; margin: 0; font-weight: 800; }
.fg-top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.fg-search { align-items: center; gap: 8px; background: var(--fg-surface); border: 1px solid var(--fg-line); border-radius: 10px; padding: 0 10px; height: 38px; }
.fg-search input { border: 0; background: transparent; outline: none; color: var(--fg-ink); width: 170px; font: inherit; font-size: .88rem; }
.fg-search .bi { color: var(--fg-muted); }
.fg-theme { display: flex; background: var(--fg-surface); border: 1px solid var(--fg-line); border-radius: 10px; padding: 3px; }
.fg-theme button { border: 0; background: none; color: var(--fg-muted); width: 32px; height: 30px; border-radius: 7px; }
.fg-theme button[aria-checked="true"] { background: var(--fg-primary-soft); color: var(--fg-primary); }
.fg-theme button:hover { color: var(--fg-ink); }
.fg-icon-btn { border: 0; background: none; color: var(--fg-ink); width: 36px; height: 36px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 1.15rem; }
.fg-icon-btn:hover { background: var(--fg-primary-soft); }
.fg-content { padding: 24px 28px 40px; flex: 1; }
/* The page title lives in the top bar, so the old in-page headings are hidden. */
.fg-content > h1.h3, .fg-content > .d-flex > h1.h3 { display: none; }
.fg-content > .d-flex:has(> h1.h3:only-child) { display: none !important; }
.fg-foot { padding: 14px 28px; color: var(--fg-muted); font-size: .8rem; border-top: 1px solid var(--fg-line); }
.fg-scrim { position: fixed; inset: 0; background: rgba(8, 12, 30, .45); z-index: 1035; }

@media (max-width: 991.98px) {
  .fg-side { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .22s ease; --w: 260px; }
  .fg-side.is-open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  .fg-collapse { display: none; }
  .fg-top, .fg-content, .fg-foot { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- Existing components, re-skinned to the tokens ------------------------- */
.card { background: var(--fg-surface); border: 1px solid var(--fg-line); border-radius: 14px; box-shadow: var(--fg-shadow); color: var(--fg-ink); }
.fg-flash { border-radius: 12px; }
.fg-stat .fg-stat-label { font-size: .8rem; font-weight: 600; color: var(--fg-muted); }
.fg-stat .fg-stat-num { font-size: 2rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.fg-progress { height: 8px; background: var(--fg-raised); border-radius: 99px; }
.fg-table { --bs-table-bg: transparent; --bs-table-color: var(--fg-ink); }
.fg-table thead th { color: var(--fg-muted); font-size: .78rem; font-weight: 600; border-color: var(--fg-line); }
.fg-table td { border-color: var(--fg-line); }
.fg-row-link { cursor: pointer; }
.fg-row-link:hover td { background: var(--fg-primary-soft); }
.nav-tabs { border-color: var(--fg-line); }
.nav-tabs .nav-link { color: var(--fg-muted); font-weight: 600; }
.nav-tabs .nav-link.active { color: var(--fg-ink); background: var(--fg-surface); border-color: var(--fg-line) var(--fg-line) var(--fg-surface); }
.text-secondary { color: var(--fg-muted) !important; }
.text-success { color: var(--fg-safe) !important; }
.text-warning { color: var(--fg-warn) !important; }
.text-danger { color: var(--fg-threat) !important; }
.bg-body-tertiary { background: var(--fg-raised) !important; }
.link-light { color: var(--fg-ink) !important; }
.btn { border-radius: 9px; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--fg-primary); --bs-btn-border-color: var(--fg-primary); --bs-btn-hover-bg: color-mix(in srgb, var(--fg-primary) 88%, #000); --bs-btn-hover-border-color: transparent; --bs-btn-active-bg: var(--fg-primary); }
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0b1230; --bs-btn-hover-color: #0b1230; --bs-btn-active-color: #0b1230; }
.btn-outline-light { --bs-btn-color: var(--fg-ink); --bs-btn-border-color: var(--fg-line); --bs-btn-hover-bg: var(--fg-primary-soft); --bs-btn-hover-color: var(--fg-ink); --bs-btn-hover-border-color: var(--fg-line); --bs-btn-active-bg: var(--fg-primary-soft); --bs-btn-active-color: var(--fg-ink); background: var(--fg-surface); }
.form-control, .form-select { border-radius: 9px; background-color: var(--fg-surface); border-color: var(--fg-line); color: var(--fg-ink); }
.modal-content { background: var(--fg-surface); border: 1px solid var(--fg-line); border-radius: 16px; }
.dropdown-menu { background: var(--fg-surface); border-color: var(--fg-line); border-radius: 12px; box-shadow: 0 12px 32px -12px rgba(0,0,0,.35); }
.badge.bg-success { background: var(--fg-safe) !important; }
.badge.bg-danger { background: var(--fg-threat) !important; }
.badge.bg-warning { background: var(--fg-warn) !important; color: #231600 !important; }
[data-bs-theme="dark"] .badge.bg-success { color: #052414; }
.alert-info { --bs-alert-bg: var(--fg-primary-soft); --bs-alert-color: var(--fg-ink); --bs-alert-border-color: transparent; }
code { color: var(--fg-primary); }

/* Live activity */
.fg-live-card { border-left: 3px solid var(--fg-primary); }
.fg-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-safe); box-shadow: 0 0 0 0 var(--fg-safe-soft); animation: fgpulse 1.6s infinite; }
@keyframes fgpulse { 0% { box-shadow: 0 0 0 0 var(--fg-safe-soft); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.fg-progress .progress-bar { transition: width .6s ease; }
.fg-live-patch { border-left-color: var(--fg-warn); }
.fg-steps { display: flex; flex-wrap: wrap; gap: .35rem; }
.fg-step { padding: .1rem .55rem; border-radius: 999px; border: 1px solid var(--fg-line); color: var(--fg-muted); }
.fg-step.is-done { border-color: var(--fg-safe); color: var(--fg-safe); }
.fg-step.is-now  { border-color: var(--fg-primary); color: var(--fg-ink); background: var(--fg-primary-soft); }
.fg-step.is-fail { border-color: var(--fg-threat); color: var(--fg-threat); }

/* ---- Dashboard -------------------------------------------------------------- */
.fg-dash { display: grid; gap: 18px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.fg-w { grid-column: span 12; background: var(--fg-surface); border: 1px solid var(--fg-line); border-radius: 16px; box-shadow: var(--fg-shadow); padding: 20px 22px; min-width: 0; }
.fg-w-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.fg-w-head h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.fg-w-head .fg-w-sub { color: var(--fg-muted); font-size: .82rem; }
.fg-w-head a { margin-left: auto; font-size: .84rem; font-weight: 600; text-decoration: none; }
@media (min-width: 1200px) {
  .fg-span-7 { grid-column: span 7; } .fg-span-5 { grid-column: span 5; } .fg-span-8 { grid-column: span 8; } .fg-span-4 { grid-column: span 4; } .fg-span-6 { grid-column: span 6; }
}
@media (min-width: 768px) and (max-width: 1199.98px) { .fg-span-6, .fg-span-4, .fg-span-5 { grid-column: span 6; } }

/* Hero: posture gauge + to-do list share one surface */
.fg-hero { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 0; padding: 0; overflow: hidden; }
.fg-hero > div { padding: 22px 24px; }
.fg-posture { border-right: 1px solid var(--fg-line); background:
  radial-gradient(120% 90% at 0% 0%, var(--fg-primary-soft), transparent 60%), var(--fg-surface); }
.fg-gauge { position: relative; width: 100%; max-width: 260px; margin: 2px auto 6px; }
.fg-gauge svg { width: 100%; display: block; overflow: visible; }
.fg-gauge-num { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; }
.fg-gauge-num b { display: block; font-size: 3.2rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.fg-gauge-num span { color: var(--fg-muted); font-size: .84rem; font-weight: 600; }
.fg-comp { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin-top: 14px; font-size: .84rem; }
.fg-comp a { color: var(--fg-ink); text-decoration: none; font-weight: 600; }
.fg-comp a:hover { color: var(--fg-primary); }
.fg-comp .v { font-weight: 700; text-align: right; }
.fg-comp .bar { grid-column: 1 / -1; height: 5px; border-radius: 99px; background: var(--fg-raised); overflow: hidden; margin-bottom: 6px; }
.fg-comp .bar i { display: block; height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.fg-todo h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 4px; }
.fg-todo > p { color: var(--fg-muted); font-size: .86rem; margin-bottom: 12px; }
.fg-todo ul { list-style: none; margin: 0; padding: 0; }
.fg-todo li { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--fg-line); }
.fg-todo li:first-child { border-top: 0; }
.fg-todo .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; font-size: 1.1rem; }
.fg-todo .is-threat .ic { background: var(--fg-threat-soft); color: var(--fg-threat); }
.fg-todo .is-warn .ic { background: var(--fg-warn-soft); color: var(--fg-warn); }
.fg-todo .is-info .ic { background: var(--fg-primary-soft); color: var(--fg-primary); }
.fg-todo .txt { flex: 1; font-weight: 600; font-size: .92rem; }
.fg-todo .cta { font-size: .84rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.fg-allclear { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 12px; background: var(--fg-safe-soft); color: var(--fg-safe); font-weight: 700; }
.fg-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* KPI strip: one surface, divided — not a row of identical cards */
.fg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.fg-kpi { padding: 18px 22px; border-left: 1px solid var(--fg-line); text-decoration: none; color: inherit; display: block; }
.fg-kpi:first-child { border-left: 0; }
.fg-kpi:hover { background: var(--fg-raised); color: inherit; }
.fg-kpi .k { color: var(--fg-muted); font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.fg-kpi .v { font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin-top: 2px; }
.fg-kpi .s { font-size: .8rem; color: var(--fg-muted); }
@media (max-width: 767.98px) { .fg-kpis { grid-template-columns: 1fr 1fr; } .fg-kpi:nth-child(3) { border-left: 0; } .fg-kpi:nth-child(n+3) { border-top: 1px solid var(--fg-line); } .fg-hero { grid-template-columns: 1fr; } .fg-posture { border-right: 0; border-bottom: 1px solid var(--fg-line); } }

.fg-chart { position: relative; height: 240px; }
.fg-donut { position: relative; height: 190px; }
.fg-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .82rem; color: var(--fg-muted); margin-top: 12px; }
.fg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.fg-hbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; font-size: .86rem; padding: 7px 0; }
.fg-hbar .n { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-hbar .c { color: var(--fg-muted); font-size: .8rem; }
.fg-hbar .bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--fg-raised); }
.fg-hbar .bar i { display: block; height: 100%; border-radius: 99px; background: var(--fg-warn); }
.fg-feed { list-style: none; margin: 0; padding: 0; }
.fg-feed li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--fg-line); font-size: .88rem; }
.fg-feed li:first-child { border-top: 0; }
.fg-feed .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex: none; }
.fg-feed .meta { color: var(--fg-muted); font-size: .8rem; }
.fg-feed .path { color: var(--fg-muted); font-size: .8rem; word-break: break-all; }
.fg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.fg-chip.is-safe { background: var(--fg-safe-soft); color: var(--fg-safe); }
.fg-chip.is-warn { background: var(--fg-warn-soft); color: var(--fg-warn); }
.fg-chip.is-threat { background: var(--fg-threat-soft); color: var(--fg-threat); }
.fg-chip.is-muted { background: var(--fg-raised); color: var(--fg-muted); }
.fg-chip.is-info { background: var(--fg-primary-soft); color: var(--fg-primary); }
.fg-devtable td, .fg-devtable th { padding: 10px 8px; }
.fg-devtable a { color: var(--fg-ink); font-weight: 700; text-decoration: none; }
.fg-devtable a:hover { color: var(--fg-primary); }
.fg-updated { color: var(--fg-muted); font-size: .8rem; display: flex; align-items: center; gap: 6px; }

/* ---- Login ------------------------------------------------------------------ */
.fg-login { min-height: 100vh; display: grid; place-items: center; background:
  radial-gradient(900px 500px at 15% -10%, var(--fg-primary-soft), transparent 60%), var(--fg-canvas); }
.fg-login-card { width: 380px; max-width: 92vw; padding: 2rem; background: var(--fg-surface);
  border: 1px solid var(--fg-line); border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(10, 20, 60, .45); }
.fg-logo { color: var(--fg-primary); }

.fg-feed a, .fg-w-head a { text-decoration: none; }
.fg-feed a:hover { text-decoration: underline; }

/* ---- Audit log ---------------------------------------------------------------- */
.fg-audit-filters { display: grid; gap: 12px; padding: 16px 18px; }
.fg-af-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fg-af-search { flex: 1 1 280px; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px;
  border: 1px solid var(--fg-line); border-radius: 10px; background: var(--fg-canvas); }
.fg-af-search:focus-within { border-color: var(--fg-primary); box-shadow: 0 0 0 3px var(--fg-primary-soft); }
.fg-af-search .bi { color: var(--fg-muted); }
.fg-af-search input { flex: 1; border: 0; background: transparent; outline: none; color: var(--fg-ink); font: inherit; font-size: .9rem; }
.fg-seg { display: inline-flex; flex-wrap: wrap; background: var(--fg-canvas); border: 1px solid var(--fg-line); border-radius: 10px; padding: 3px; }
.fg-seg a, .fg-seg button { border: 0; background: none; font: inherit; font-size: .82rem; font-weight: 600; color: var(--fg-muted);
  padding: 5px 11px; border-radius: 7px; text-decoration: none; }
.fg-seg a:hover, .fg-seg button:hover { color: var(--fg-ink); }
.fg-seg .is-on { background: var(--fg-surface); color: var(--fg-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
[data-bs-theme="dark"] .fg-seg .is-on { background: var(--fg-raised); }
.fg-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-cats a { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--fg-line); font-size: .82rem; font-weight: 600;
  color: var(--fg-muted); text-decoration: none; }
.fg-cats a:hover { color: var(--fg-ink); border-color: var(--fg-muted); }
.fg-cats a.is-on { background: var(--fg-primary); border-color: var(--fg-primary); color: #fff; }
[data-bs-theme="dark"] .fg-cats a.is-on { color: #0b1230; }
.fg-af-selects .form-select { width: auto; min-width: 170px; }
.fg-af-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 2px; }
.fg-fchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 11px; border-radius: 999px;
  background: var(--fg-primary-soft); color: var(--fg-primary); font-size: .8rem; font-weight: 700; text-decoration: none; }
.fg-fchip:hover { color: var(--fg-threat); }

.fg-audit-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--fg-line); font-size: .88rem; }
.fg-audit td { vertical-align: middle; padding: 10px 14px; border-color: var(--fg-line); }
.fg-audit-day th { background: var(--fg-raised); color: var(--fg-muted);
  font-size: .78rem; font-weight: 700; padding: 7px 20px; border-color: var(--fg-line); }
.fg-audit-row:hover td { background: var(--fg-primary-soft); }
.fg-audit-row td:first-child { padding-left: 20px; }
.fg-a-time { width: 92px; color: var(--fg-muted); font-size: .82rem; white-space: nowrap; }
.fg-a-event { min-width: 280px; }
.fg-a-evwrap { display: flex; align-items: center; gap: 12px; }
.fg-a-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; font-size: .95rem; }
.fg-a-ic.is-safe { background: var(--fg-safe-soft); color: var(--fg-safe); }
.fg-a-ic.is-warn { background: var(--fg-warn-soft); color: var(--fg-warn); }
.fg-a-ic.is-threat { background: var(--fg-threat-soft); color: var(--fg-threat); }
.fg-a-ic.is-info { background: var(--fg-primary-soft); color: var(--fg-primary); }
.fg-a-ic.is-muted { background: var(--fg-raised); color: var(--fg-muted); }
.fg-a-text { display: flex; flex-direction: column; min-width: 0; }
.fg-a-sentence { font-weight: 600; font-size: .9rem; }
.fg-a-cat { font-size: .76rem; color: var(--fg-muted); }
.fg-a-actor { white-space: nowrap; font-size: .86rem; }
.fg-a-actor .bi { color: var(--fg-muted); margin-right: 5px; }
.fg-a-actor a, .fg-a-target a { color: var(--fg-ink); font-weight: 600; text-decoration: none; }
.fg-a-actor a:hover, .fg-a-target a:hover { color: var(--fg-primary); text-decoration: underline; }
.fg-a-target { font-size: .86rem; max-width: 280px; }
.fg-a-more { width: 52px; text-align: right; padding-right: 14px !important; }
.fg-a-more .bi { transition: transform .15s; }
.fg-a-more [aria-expanded="true"] .bi { transform: rotate(180deg); }
.fg-audit-detail td { border-top: 0 !important; }
.fg-audit-detail:has(.collapse:not(.show)) td { border-bottom: 0; }
.fg-a-dl { display: grid; grid-template-columns: 140px 1fr; gap: 6px 16px; margin: 0; padding: 12px 20px 16px 136px;
  font-size: .84rem; background: var(--fg-raised); border-top: 1px dashed var(--fg-line); }
.fg-a-dl dt { color: var(--fg-muted); font-weight: 600; }
.fg-a-dl dd { margin: 0; word-break: break-word; }
.fg-audit-empty { text-align: center; padding: 48px 20px; }
.fg-audit-empty .bi { font-size: 2.2rem; color: var(--fg-muted); }
.fg-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--fg-line); }
.fg-pager > a { font-weight: 600; font-size: .86rem; text-decoration: none; padding: 6px 10px; border-radius: 8px; }
.fg-pager > a:hover { background: var(--fg-primary-soft); }
.fg-pager a.is-off { pointer-events: none; color: var(--fg-muted); opacity: .5; }
.fg-pager-nums { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
.fg-pager-nums a { min-width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; font-weight: 600;
  font-size: .86rem; color: var(--fg-ink); text-decoration: none; }
.fg-pager-nums a:hover { background: var(--fg-primary-soft); }
.fg-pager-nums a.is-on { background: var(--fg-primary); color: #fff; }
[data-bs-theme="dark"] .fg-pager-nums a.is-on { color: #0b1230; }
.fg-pager-nums .gap { min-width: 20px; text-align: center; color: var(--fg-muted); align-self: center; }
@media (max-width: 767.98px) {
  .fg-a-dl { padding-left: 20px; grid-template-columns: 110px 1fr; }
  .fg-a-target { display: none; }
  .fg-af-selects .form-select { flex: 1 1 100%; }
}

/* ---- Antivirus page ------------------------------------------------------------ */
.fg-choice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fg-choice label { position: relative; cursor: pointer; }
.fg-choice input { position: absolute; opacity: 0; inset: 0; }
.fg-choice span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 10px 12px; border: 1px solid var(--fg-line); border-radius: 11px; background: var(--fg-surface); }
.fg-choice b { font-size: .9rem; }
.fg-choice small { color: var(--fg-muted); font-size: .76rem; line-height: 1.3; }
.fg-choice input:checked + span { border-color: var(--fg-primary); background: var(--fg-primary-soft); box-shadow: inset 0 0 0 1px var(--fg-primary); }
.fg-choice input:focus-visible + span { outline: 2px solid var(--fg-primary); outline-offset: 2px; }
.fg-newsched { padding: 14px; margin-bottom: 12px; border: 1px dashed var(--fg-line); border-radius: 12px; background: var(--fg-raised); }
.fg-scheds { display: grid; gap: 10px; }
.fg-sched { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--fg-line); border-radius: 12px; border-left: 3px solid var(--fg-safe); }
.fg-sched.is-paused { border-left-color: var(--fg-muted); opacity: .75; }
.fg-sched-main { flex: 1; min-width: 0; }
.fg-sched-title { font-weight: 700; font-size: .92rem; }
.fg-sched-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: .8rem; color: var(--fg-muted); }
.fg-sched-meta .bi { margin-right: 4px; }
.fg-sched-warn { margin-top: 8px; font-size: .8rem; color: var(--fg-warn); background: var(--fg-warn-soft); padding: 6px 10px; border-radius: 8px; }
.fg-sched-warn .bi { margin-right: 6px; }
.fg-sched-actions { display: flex; align-items: center; gap: 4px; }
.fg-path { font-family: inherit; font-weight: 500; color: var(--fg-muted); word-break: break-all; }
.fg-hist-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 10px; }
.fg-hist-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 20px 14px; border-bottom: 1px solid var(--fg-line); }
.fg-hist-filters .form-select { width: auto; min-width: 170px; }
.fg-scans th { font-size: .78rem; padding: 10px 14px; }
.fg-scans th:first-child { padding-left: 20px; }
@media (max-width: 767.98px) { .fg-choice { grid-template-columns: 1fr; } .fg-hist-filters .form-select { flex: 1 1 100%; } }

/* ---- USB control --------------------------------------------------------------- */
.fg-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fg-seg button.is-danger:hover, .fg-seg button.is-danger.is-on { color: var(--fg-threat); }
.fg-seg button.is-danger.is-on { background: var(--fg-threat-soft); box-shadow: none; }
.fg-seg-sm button { padding: 3px 9px; font-size: .78rem; }
.fg-why { max-width: 280px; }
.fg-usb-note { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 20px; border-top: 1px solid var(--fg-line);
  background: var(--fg-primary-soft); font-size: .84rem; }
.fg-usb-note .bi { color: var(--fg-primary); margin-top: 2px; }
.fg-usb-list { list-style: none; margin: 0; padding: 0; }
.fg-usb-list li { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--fg-line); }
.fg-usb-list li:first-child { border-top: 0; }
.fg-usb-list li.is-storage { background: linear-gradient(90deg, var(--fg-warn-soft), transparent 40%); }
.fg-usb-list a { color: var(--fg-ink); font-weight: 600; text-decoration: none; }
.fg-usb-list a:hover { color: var(--fg-primary); text-decoration: underline; }

/* ---- Antivirus protection line (device page, antivirus page) ---- */
.fg-avline { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; font-weight: 700; font-size: .88rem; text-decoration: none; margin-bottom: 14px; }
.fg-avline i { font-size: 1.05rem; }
.fg-avline.is-safe { background: var(--fg-safe-soft); color: var(--fg-safe); }
.fg-avline.is-warn { background: var(--fg-warn-soft); color: var(--fg-warn); }
.fg-avline.is-threat { background: var(--fg-threat-soft); color: var(--fg-threat); }
.fg-avline.is-muted { background: var(--fg-raised); color: var(--fg-muted); }
a.fg-avline:hover { filter: brightness(.97); }

/* ---- Threat feed (signatures page) ---- */
.fg-feedhead { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.fg-feedstate { display: flex; align-items: center; gap: 12px; }
.fg-feedstate .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; }
.fg-feedstate .ic.is-safe { background: var(--fg-safe-soft); color: var(--fg-safe); }
.fg-feedstate .ic.is-warn { background: var(--fg-warn-soft); color: var(--fg-warn); }
.fg-feedstate .ic.is-threat { background: var(--fg-threat-soft); color: var(--fg-threat); }
.fg-feedstate .ic.is-muted { background: var(--fg-raised); color: var(--fg-muted); }
.fg-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; }
.fg-steps li { counter-increment: s; position: relative; padding: 0 0 12px 34px; font-size: .9rem; }
.fg-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--fg-primary-soft); color: var(--fg-primary); font-weight: 700; font-size: .75rem; display: grid; place-items: center; }
.fg-runs { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.fg-runs li { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--fg-line); }
.fg-runs li:last-child { border-bottom: 0; }
.fg-runs .t { color: var(--fg-muted); white-space: nowrap; min-width: 92px; }

/* ---- Confirmation dialog (replaces the browser's confirm box) ---- */
.fg-noscroll { overflow: hidden; }
.fg-dialog { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px;
  background: rgba(10, 16, 32, .42); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%);
  opacity: 0; transition: opacity .18s ease; }
.fg-dialog.is-open { opacity: 1; }
.fg-dialog-card { width: min(440px, 100%); background: var(--fg-surface); color: var(--fg-ink); border: 1px solid var(--fg-line);
  border-radius: 20px; padding: 26px 26px 20px; box-shadow: 0 24px 60px -12px rgba(10, 20, 50, .35), 0 2px 6px rgba(10, 20, 50, .08);
  transform: translateY(10px) scale(.96); transition: transform .22s cubic-bezier(.2, .9, .3, 1.2); position: relative; overflow: hidden; }
.fg-dialog-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--fg-dlg-c); }
.fg-dialog.is-open .fg-dialog-card { transform: none; }
.fg-dialog.is-closing .fg-dialog-card { transform: scale(.97); }
.fg-dialog-card.is-primary { --fg-dlg-c: var(--fg-primary); --fg-dlg-soft: var(--fg-primary-soft); }
.fg-dialog-card.is-warn { --fg-dlg-c: var(--fg-warn); --fg-dlg-soft: var(--fg-warn-soft); }
.fg-dialog-card.is-danger { --fg-dlg-c: var(--fg-threat); --fg-dlg-soft: var(--fg-threat-soft); }
.fg-dialog-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.5rem;
  background: var(--fg-dlg-soft); color: var(--fg-dlg-c); margin-bottom: 14px; }
.fg-dialog-card h2 { font-size: 1.12rem; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.fg-dialog-card p { color: var(--fg-muted); font-size: .92rem; line-height: 1.5; margin: 0; }
.fg-dialog-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.fg-dialog-btns button { border: 0; border-radius: 11px; padding: 9px 18px; font-weight: 700; font-size: .9rem; font-family: inherit; cursor: pointer;
  transition: transform .08s ease, filter .15s ease, background .15s ease; }
.fg-dialog-btns button:active { transform: scale(.97); }
.fg-dlg-cancel { background: var(--fg-raised); color: var(--fg-ink); border: 1px solid var(--fg-line) !important; }
.fg-dlg-cancel:hover { filter: brightness(.97); }
.fg-dlg-ok { background: var(--fg-dlg-c); color: #fff; box-shadow: 0 6px 16px -6px var(--fg-dlg-c); }
.fg-dlg-ok:hover { filter: brightness(1.08); }
.fg-dialog-btns button:focus-visible { outline: 3px solid var(--fg-dlg-soft); outline-offset: 2px; }
@media (max-width: 480px) { .fg-dialog { place-items: end center; } .fg-dialog-btns { flex-direction: column-reverse; } .fg-dialog-btns button { width: 100%; padding: 11px; } }

/* ---- Toasts (replace the flash banner) ---- */
.fg-toasts { position: fixed; top: 18px; right: 18px; z-index: 1990; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.fg-toast { pointer-events: auto; position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start;
  background: var(--fg-surface); color: var(--fg-ink); border: 1px solid var(--fg-line); border-radius: 16px; padding: 14px 14px 16px;
  box-shadow: 0 16px 40px -14px rgba(10, 20, 50, .35), 0 2px 6px rgba(10, 20, 50, .06);
  transform: translateX(24px); opacity: 0; transition: transform .28s cubic-bezier(.2, .9, .3, 1.15), opacity .2s ease; }
.fg-toast.is-in { transform: none; opacity: 1; }
.fg-toast.is-out { transform: translateX(24px); opacity: 0; }
.fg-toast.is-success { --fg-t: var(--fg-safe); --fg-ts: var(--fg-safe-soft); }
.fg-toast.is-info { --fg-t: var(--fg-primary); --fg-ts: var(--fg-primary-soft); }
.fg-toast.is-warn { --fg-t: var(--fg-warn); --fg-ts: var(--fg-warn-soft); }
.fg-toast.is-danger { --fg-t: var(--fg-threat); --fg-ts: var(--fg-threat-soft); }
.fg-toast-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--fg-ts); color: var(--fg-t); font-size: 1.05rem; }
.fg-toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: .88rem; line-height: 1.45; }
.fg-toast-body b { font-size: .92rem; }
.fg-toast-body span { color: var(--fg-muted); overflow-wrap: anywhere; }
.fg-toast-x { flex: none; border: 0; background: transparent; color: var(--fg-muted); width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; }
.fg-toast-x:hover { background: var(--fg-raised); color: var(--fg-ink); }
.fg-toast-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--fg-t); opacity: .55; transform-origin: left; animation: fgToastBar linear forwards; }
.fg-toast.is-paused .fg-toast-bar { animation-play-state: paused; }
@keyframes fgToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 576px) { .fg-toasts { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; } .fg-toast, .fg-toast.is-out { transform: translateY(16px); } .fg-toast.is-in { transform: none; } }
@media (prefers-reduced-motion: reduce) { .fg-dialog, .fg-dialog-card, .fg-toast { transition: none; } .fg-toast-bar { animation: none; display: none; } }

/* Button waiting after a confirmed action */
.btn.is-busy, button.is-busy { pointer-events: none; opacity: .7; position: relative; }
.btn.is-busy::after { content: ""; display: inline-block; width: .85em; height: .85em; margin-left: .45em; vertical-align: -.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fgSpin .7s linear infinite; }
@keyframes fgSpin { to { transform: rotate(360deg); } }

/* ---- USB: connected devices grouped by PC ---- */
.fg-usb-sum { display: flex; flex-wrap: wrap; gap: 6px; }
.fg-usb-sum span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: var(--fg-primary-soft); color: var(--fg-primary); }
.fg-usb-sum span.is-warn { background: var(--fg-warn-soft); color: var(--fg-warn); }
.fg-usb-sum span.is-muted { background: var(--fg-raised); color: var(--fg-muted); }
.fg-usb-eps { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; }
.fg-usb-ep { border: 1px solid var(--fg-line); border-radius: 14px; padding: 12px 12px 10px; background: var(--fg-surface); }
.fg-usb-ephead { display: flex; align-items: center; gap: 10px; padding: 2px; list-style: none; cursor: pointer; }
.fg-usb-ephead::-webkit-details-marker { display: none; }
.fg-usb-host { font-weight: 800; display: inline-flex; align-items: center; gap: 7px; }
.fg-usb-host i { color: var(--fg-muted); }
.fg-usb-ephead a { font-weight: 600; text-decoration: none; }
.fg-usb-ep[open] > .fg-usb-ephead { margin-bottom: 8px; }
.fg-usb-ep[open] > .fg-usb-ephead > .fg-usb-chev { transform: rotate(180deg); }
.fg-usb-mini { display: inline-flex; gap: 5px; }
.fg-usb-mini span { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: var(--fg-primary-soft); color: var(--fg-primary); }
.fg-usb-mini span.is-warn { background: var(--fg-warn-soft); color: var(--fg-warn); }
.fg-usb-mini span.is-muted { background: var(--fg-raised); color: var(--fg-muted); }
.fg-usb-tools { display: flex; gap: 8px; align-items: center; padding: 0 16px 10px; }
.fg-usb-search { position: relative; flex: 1; max-width: 280px; }
.fg-usb-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--fg-muted); font-size: .8rem; }
.fg-usb-search input { width: 100%; padding: 6px 10px 6px 30px; border-radius: 9px; border: 1px solid var(--fg-line); background: var(--fg-surface); color: var(--fg-ink); font-size: .85rem; }
.fg-usb-search input:focus { outline: 2px solid var(--fg-primary-soft); border-color: var(--fg-primary); }
.fg-usb-ep[hidden] { display: none; }
.fg-usb-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-muted); margin: 6px 2px 6px; }
.fg-usb-label.is-warn { color: var(--fg-warn); }
.fg-usbt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 6px; }
.fg-usbt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; background: var(--fg-raised); border: 1px solid transparent; min-width: 0; }
.fg-usbt .fg-a-ic { width: 32px; height: 32px; flex: none; }
.fg-usbt.is-storage { background: var(--fg-warn-soft); border-color: color-mix(in srgb, var(--fg-warn) 25%, transparent); }
.fg-usbt.is-blocked { background: var(--fg-threat-soft); border-color: color-mix(in srgb, var(--fg-threat) 30%, transparent); }
.fg-usbt-name { font-weight: 700; font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-usbt-meta { font-size: .75rem; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-usbt form { flex: none; }
.fg-usbt-grid.is-compact .fg-usbt { padding: 6px 8px; background: transparent; border-color: var(--fg-line); }
.fg-usbt-grid.is-compact .fg-a-ic { width: 26px; height: 26px; font-size: .85rem; }
.fg-usb-builtin { margin-top: 4px; }
.fg-usb-builtin summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 7px 8px; border-radius: 9px;
  font-size: .82rem; font-weight: 700; color: var(--fg-ink); }
.fg-usb-builtin summary::-webkit-details-marker { display: none; }
.fg-usb-builtin summary:hover { background: var(--fg-raised); }
.fg-usb-builtin summary .text-secondary { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fg-usb-builtin[open] .fg-usb-chev { transform: rotate(180deg); }
.fg-usb-chev { transition: transform .15s ease; color: var(--fg-muted); }
.fg-usb-builtin .fg-usbt-grid { margin-top: 6px; }

/* ---- Software library ---- */
.fg-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; padding: 6px 20px 20px; }
.fg-pkg { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--fg-line); border-radius: 16px; background: var(--fg-surface);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; min-width: 0; }
.fg-pkg:hover { box-shadow: 0 10px 28px -16px rgba(10, 20, 50, .35); border-color: color-mix(in srgb, var(--fg-primary) 25%, var(--fg-line)); }
.fg-pkg-top { display: flex; align-items: center; gap: 12px; }
.fg-pkg-av { flex: none; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h) 70% 55%), hsl(calc(var(--h) + 35) 70% 45%)); box-shadow: 0 6px 14px -8px hsl(var(--h) 70% 40%); }
.fg-pkg-name { font-weight: 800; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-pkg-sub { font-size: .8rem; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-pkg-desc { font-size: .84rem; color: var(--fg-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fg-pkg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.fg-pkg-chips .fg-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-pkg-inst { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--fg-muted); flex-wrap: wrap; }
.fg-pkg-inst b { color: var(--fg-ink); }
.fg-pkg-bar { width: 54px; height: 6px; border-radius: 99px; background: var(--fg-raised); overflow: hidden; flex: none; }
.fg-pkg-bar i { display: block; height: 100%; background: var(--fg-safe); border-radius: 99px; }
.fg-pkg-actions { display: flex; gap: 8px; margin-top: auto; }
.fg-pkg-actions .btn { flex: 1; }
.fg-pop { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 620px; margin: 0 auto; }
.fg-pop-chip { border: 1px dashed var(--fg-line); background: var(--fg-surface); color: var(--fg-ink); border-radius: 999px; padding: 5px 12px 5px 8px;
  font-size: .82rem; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.fg-pop-chip:hover { border-color: var(--fg-primary); color: var(--fg-primary); background: var(--fg-primary-soft); }
.fg-wgres { border: 1px solid var(--fg-line); border-radius: 12px; max-height: 240px; overflow-y: auto; }
.fg-wgrow { display: grid; grid-template-columns: 1.3fr 1.2fr .6fr; gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--fg-line);
  background: transparent; color: var(--fg-ink); padding: 8px 12px; font-size: .82rem; }
.fg-wgrow:last-child { border-bottom: 0; }
.fg-wgrow:hover, .fg-wgrow.is-on { background: var(--fg-primary-soft); }
.fg-wgrow > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 26px 18px; border: 2px dashed var(--fg-line);
  border-radius: 16px; cursor: pointer; background: var(--fg-raised); transition: border-color .15s ease, background .15s ease; }
.fg-drop i.bi { font-size: 2rem; color: var(--fg-primary); }
.fg-drop:hover, .fg-drop.is-over { border-color: var(--fg-primary); background: var(--fg-primary-soft); }
.fg-targets { display: flex; flex-direction: column; gap: 6px; }
.fg-target { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--fg-line); border-radius: 11px; cursor: pointer; margin: 0; }
.fg-target:hover { background: var(--fg-raised); }
.fg-target:has(input:checked) { border-color: var(--fg-primary); background: var(--fg-primary-soft); }
.fg-target input { accent-color: var(--fg-primary); }
.fg-target-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.fg-target-dot.is-on { background: var(--fg-safe); } .fg-target-dot.is-off { background: var(--fg-muted); }
.fg-rm { color: var(--fg-muted); }
.fg-rm:hover { color: var(--fg-threat); background: var(--fg-threat-soft); }
#swTable tbody tr .fg-rm { opacity: .35; transition: opacity .15s ease; }
#swTable tbody tr:hover .fg-rm, #swTable tbody tr .fg-rm:focus-visible { opacity: 1; }


/* ---- Clients ---- */
.fg-cl-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #fff;
  background: hsl(var(--h, 225) 62% 48%); }
.fg-cl-av.is-lg { width: 64px; height: 64px; font-size: 1.4rem; }
.fg-cl-av.is-empty { background: var(--fg-raised); color: var(--fg-muted); border: 1.5px dashed var(--fg-line); }
.fg-cl-link { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-ink); text-decoration: none; }
.fg-cl-link i { color: var(--fg-muted); }
.fg-cl-link:hover { color: var(--fg-primary); }
.fg-cl-link:hover i { color: var(--fg-primary); }
.fg-cl-dev { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--fg-line); border-radius: 11px;
  color: var(--fg-ink); text-decoration: none; font-weight: 600; font-size: .88rem; }
.fg-cl-dev:hover { border-color: var(--fg-primary); background: var(--fg-primary-soft); }
.fg-cl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.fg-cl-dl { display: grid; grid-template-columns: 90px 1fr; gap: 10px 12px; margin: 0; font-size: .9rem; }
.fg-cl-dl dt { color: var(--fg-muted); font-weight: 600; }
.fg-cl-dl dd { margin: 0; }
.fg-devclient { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--fg-line);
  border-radius: 16px; background: var(--fg-surface); box-shadow: var(--fg-shadow); }
.fg-cl-pick { max-height: 280px; overflow-y: auto; }
.fg-cl-pick .fg-target[hidden] { display: none; }

/* ---- Device location ---- */
.fg-loc .fg-w-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fg-loc-switch { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--fg-line); background: var(--fg-surface);
  color: var(--fg-muted, #6b7280); border-radius: 999px; padding: 4px 12px 4px 4px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.fg-loc-knob { width: 34px; height: 20px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .2s; }
.fg-loc-knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.fg-loc-switch.is-on { color: var(--fg-ink); }
.fg-loc-switch.is-on .fg-loc-knob { background: #16a34a; }
.fg-loc-switch.is-on .fg-loc-knob::after { transform: translateX(14px); }
.fg-loc-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 900px) { .fg-loc-body { grid-template-columns: 1fr; } }
.fg-loc-map { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--fg-line); min-height: 240px; background: #e5edf3; }
.fg-loc-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fg-loc-area { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%;
  background: rgba(25,195,230,.18); border: 2px solid rgba(25,195,230,.85); pointer-events: none; }
.fg-loc-area::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #19c3e6; border: 2px solid #fff; box-shadow: 0 0 0 4px rgba(25,195,230,.3); }
.fg-loc-place { display: flex; align-items: center; gap: 12px; }
.fg-loc-flag { font-size: 2rem; line-height: 1; }
.fg-loc-hist { list-style: none; padding: 0; margin: 0; font-size: .85rem; }
.fg-loc-hist li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0 6px 18px; border-bottom: 1px dashed var(--fg-line); position: relative; }
.fg-loc-hist li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.fg-loc-hist li.is-now::before { background: #19c3e6; }
.fg-loc-empty { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--fg-bg, rgba(0,0,0,.03)); }
.fg-loc-empty > i { font-size: 1.4rem; color: #19c3e6; }
.fg-loc-foot { margin-top: 12px; }
.fg-loc-foot a { color: inherit; }
.fg-ep-loc { white-space: nowrap; }