/* Forge Studio shared kit (loaded by /ui/forge.js). Every selector is an fg- class or id and every token is --fg-*,
   so nothing here touches an app's own CSS; the rules set every property app.css's bare element rules would leak in. */
:root {
  --fg-bg: #121418; --fg-bg2: #181b21; --fg-bg3: #20242c; --fg-line: #2c313b; --fg-text: #e6e2d8; --fg-dim: #9a978f; --fg-faint: #6b6a66;
  --fg-gold: #d9a441; --fg-gold2: #f0c36a; --fg-ok: #5fc27a; --fg-warn: #e3b341; --fg-bad: #ef5a5a; --fg-blue: #5aa8ef;
  --fg-font: 14px/1.45 "Segoe UI", system-ui, sans-serif; --fg-radius: 10px; --fg-shadow: 0 14px 38px rgba(0,0,0,.55);
}
.fg-root { font: var(--fg-font); color: var(--fg-text); }
.fg-root *, .fg-root *::before, .fg-root *::after { box-sizing: border-box; }

/* buttons + inputs (usable by any page) */
.fg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: auto; margin: 0; padding: 7px 14px; border-radius: 7px;
  border: 1px solid var(--fg-line); background: var(--fg-bg3); color: var(--fg-text); font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: none; }
.fg-btn[hidden], .fg-input[hidden], .fg-row[hidden] { display: none; }
.fg-btn:hover:not(:disabled) { border-color: #4a5160; background: #262b34; }
.fg-btn:disabled { opacity: .45; cursor: default; }
.fg-btn:focus-visible, .fg-x:focus-visible { outline: 2px solid var(--fg-gold); outline-offset: 1px; }
.fg-btn.fg-primary { background: linear-gradient(#e2ae4c, #c48d2c); color: #1b1408; border-color: #e7b75a; font-weight: 600; }
.fg-btn.fg-primary:hover:not(:disabled) { background: linear-gradient(#f0c065, #d39b36); }
.fg-btn.fg-danger { background: #43201f; border-color: #7a3432; color: #ffb0b0; font-weight: 600; }
.fg-btn.fg-danger:hover:not(:disabled) { background: #5a2826; }
.fg-btn.fg-small { padding: 3px 10px; font-size: 12.5px; }
.fg-input { display: block; width: 100%; margin: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--fg-line); background: var(--fg-bg);
  color: var(--fg-text); font: inherit; outline: none; }
.fg-input:focus { border-color: var(--fg-gold); box-shadow: 0 0 0 3px rgba(217,164,65,.16); }
.fg-row { display: flex; gap: 8px; align-items: center; }
.fg-end { justify-content: flex-end; }

/* toasts */
.fg-toasts { position: fixed; right: 16px; bottom: 62px; z-index: 2147482600; display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  max-width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.fg-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 14px; border-radius: var(--fg-radius);
  border: 1px solid var(--fg-line); border-left: 3px solid var(--fg-blue); background: #1b1e25; color: var(--fg-text); box-shadow: var(--fg-shadow);
  font: var(--fg-font); font-size: 13px; animation: fg-in .16s ease-out; }
.fg-toast.fg-ok { border-left-color: var(--fg-ok); } .fg-toast.fg-warn { border-left-color: var(--fg-warn); } .fg-toast.fg-error { border-left-color: var(--fg-bad); }
.fg-toast.fg-out { opacity: 0; transform: translateY(6px); transition: opacity .16s, transform .16s; }
.fg-toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.fg-x { width: auto; margin: 0; padding: 0 4px; border: 0; background: none; color: var(--fg-faint); font: 18px/1 inherit; cursor: pointer; border-radius: 4px; }
.fg-x:hover { color: var(--fg-text); background: none; }
@keyframes fg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* modal (confirm / prompt / palette): a div, never <dialog> */
.fg-modal { position: fixed; inset: 0; z-index: 2147482700; display: grid; place-items: center; background: rgba(0,0,0,.55); padding: 16px; }
.fg-modal[hidden] { display: none; }
.fg-card { width: min(460px, 100%); padding: 20px 22px; border-radius: 14px; border: 1px solid var(--fg-line); background: #1b1e25; color: var(--fg-text);
  box-shadow: var(--fg-shadow); display: flex; flex-direction: column; gap: 12px; font: var(--fg-font); }
.fg-h { margin: 0; font-size: 18px; font-weight: 600; }
.fg-msg { margin: 0; color: var(--fg-dim); white-space: pre-wrap; overflow-wrap: anywhere; }

/* command palette */
.fg-pal { place-items: start center; padding-top: 12vh; }
.fg-palcard { width: min(640px, 100%); padding: 10px; gap: 6px; }
.fg-palq { font-size: 15px; padding: 11px 12px; }
.fg-pallist { max-height: 52vh; overflow-y: auto; }
.fg-palg { padding: 8px 8px 3px; font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--fg-faint); }
.fg-palrow { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.fg-palrow span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-palrow small { margin-left: auto; flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg-faint); font-size: 12px; }
.fg-palrow:hover { background: #232832; }
.fg-palrow.fg-on { background: #3a3220; color: var(--fg-gold2); }
.fg-palnone { padding: 14px 10px; color: var(--fg-faint); text-align: center; }
.fg-palfoot { display: flex; justify-content: space-between; gap: 10px; padding: 4px 6px 0; font-size: 11.5px; color: var(--fg-faint); }

/* job bell */
.fg-bell { position: fixed; right: 16px; bottom: 16px; z-index: 2147482500; width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--fg-line); background: #1b1e25; color: var(--fg-dim); cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.fg-bell[hidden] { display: none; }
.fg-bell:hover { color: var(--fg-text); border-color: #4a5160; background: #232832; }
.fg-bell svg { width: 18px; height: 18px; }
.fg-bell.fg-busy { color: var(--fg-gold2); border-color: #6a5426; }
.fg-bell.fg-busy svg { animation: fg-ring 2.4s ease-in-out infinite; transform-origin: 50% 10%; }
.fg-belln { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--fg-gold);
  color: #1b1408; font: 700 10.5px/17px "Segoe UI", system-ui, sans-serif; text-align: center; }
.fg-belln:empty { display: none; }
@keyframes fg-ring { 0%, 70%, 100% { transform: none; } 76% { transform: rotate(12deg); } 84% { transform: rotate(-10deg); } 92% { transform: rotate(5deg); } }
.fg-bellpanel { position: fixed; right: 16px; bottom: 62px; z-index: 2147482550; width: min(360px, calc(100vw - 32px)); max-height: 50vh; overflow-y: auto;
  padding: 6px; border-radius: 12px; border: 1px solid var(--fg-line); background: #1b1e25; box-shadow: var(--fg-shadow); font: var(--fg-font); color: var(--fg-text); }
.fg-bellpanel[hidden] { display: none; }
.fg-bellh { padding: 6px 8px 4px; font-size: 10.5px; letter-spacing: .7px; text-transform: uppercase; color: var(--fg-faint); }
.fg-bellrow { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px; border-radius: 8px; cursor: pointer; }
.fg-bellrow:hover { background: #232832; }
.fg-bellrow.fg-lock { cursor: default; }
.fg-bellrow small { color: var(--fg-faint); font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .fg-bell.fg-busy svg, .fg-toast { animation: none; } }

/* who's online (top-right edge tab + sidebar; forge.js `online`) */
.fg-online { position: fixed; right: 0; top: 58px; z-index: 2147482400; display: flex; align-items: center; gap: 6px; height: 32px; margin: 0;
  padding: 0 10px 0 9px; border: 1px solid var(--fg-line); border-right: 0; border-radius: 16px 0 0 16px; background: var(--fg-bg2);
  color: var(--fg-dim); font: var(--fg-font); font-size: 12.5px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); opacity: .92; }
.fg-online:hover, .fg-online.fg-on { color: var(--fg-text); background: var(--fg-bg3); opacity: 1; }
.fg-online svg { width: 15px; height: 15px; }
.fg-online .fg-onn { font-weight: 600; color: var(--fg-text); }
.fg-ondot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-ok); box-shadow: 0 0 0 3px rgba(95,194,122,.18); }
.fg-online.fg-solo .fg-ondot { background: var(--fg-faint); box-shadow: none; }
.fg-online:focus-visible { outline: 2px solid var(--fg-gold); outline-offset: 1px; }
.fg-onpanel { position: fixed; right: 0; top: 96px; z-index: 2147482450; width: min(290px, calc(100vw - 24px)); max-height: calc(100vh - 112px);
  overflow-y: auto; padding: 6px 0 4px; border: 1px solid var(--fg-line); border-right: 0; border-radius: var(--fg-radius) 0 0 var(--fg-radius);
  background: #1b1e25; color: var(--fg-text); box-shadow: var(--fg-shadow); font: var(--fg-font); font-size: 13px; animation: fg-in .14s ease-out; }
.fg-onpanel[hidden] { display: none; }
.fg-onhead { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 6px 14px; font-weight: 600; }
.fg-onhead small { color: var(--fg-faint); font-weight: 400; margin-left: 4px; }
.fg-onsub { padding: 10px 14px 4px; color: var(--fg-faint); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.fg-onrow { display: flex; align-items: center; gap: 10px; padding: 6px 14px; }
.fg-onrow[data-go] { cursor: pointer; }
.fg-onrow[data-go]:hover { background: var(--fg-bg3); }
.fg-onav { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: hsl(var(--h) 38% 34%); color: #f3efe6; font-size: 11.5px; font-weight: 700; letter-spacing: .02em; }
.fg-onav i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--fg-ok); border: 2px solid #1b1e25; }
.fg-idle .fg-onav i { background: var(--fg-warn); }
.fg-off .fg-onav { opacity: .45; }
.fg-ontx { display: flex; flex-direction: column; min-width: 0; }
.fg-ontx b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-ontx b small { color: var(--fg-faint); font-weight: 400; }
.fg-ontx small { color: var(--fg-dim); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-off .fg-ontx b, .fg-off .fg-ontx small { color: var(--fg-faint); }
.fg-onfoot { padding: 8px 14px 4px; color: var(--fg-faint); font-size: 11px; border-top: 1px solid var(--fg-line); margin-top: 6px; }
@media (max-width: 600px) { .fg-online { top: auto; bottom: 64px; } .fg-onpanel { top: auto; bottom: 102px; max-height: 60vh; } }

.fg-onav > img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.fg-face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }