/*
 * BlaineCounty.de NUI theme — "Schablone" (direction D, round 5)
 *
 * Source of truth for colours, type and component styles of every bcde_ NUI.
 * Docs: styleguide/README.md. Do not edit values in a resource's copy;
 * change them here and re-copy.
 *
 * Chosen parameters: accent Straßengelb, base tone Teer, selection Weiß,
 * panel radius 8px, element radius 5px, panel opacity 85 %, no backdrop blur.
 *
 * Rules baked into this file:
 *  - White paint on dark sheet steel. Colour only for state: road yellow, rust, patina.
 *  - No gradients, glows or textures. The one exception is the dashed road line
 *    under each .bc-header, drawn as a hard-edged repeating-linear-gradient.
 *  - No backdrop-filter. FiveM draws the NUI on a transparent layer over the game, so there is
 *    nothing behind a panel to blur and CEF renders blurred areas black. Panels rely on opacity alone.
 *  - All sizes are px at 1920x1080. Scaling is done once on the root (see layout.md).
 *  - No color-mix(): FiveM's CEF is not guaranteed to support it. Tints are precomputed.
 */

/* ---------- fonts (files live in ./fonts, see fonts/README.md) ---------- */
@font-face { font-family: "Bebas Neue"; src: url("./fonts/BebasNeue-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Barlow"; src: url("./fonts/Barlow-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Barlow"; src: url("./fonts/Barlow-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; }
@font-face { font-family: "Barlow"; src: url("./fonts/Barlow-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url("./fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; }

/* ---------- tokens ---------- */
:root {
  /* surfaces: "Teer" base tone at 85 % opacity. Rows and fields keep the same
     transparency ratio so they don't sit as solid blocks on a see-through panel. */
  --bc-panel: rgba(18, 20, 23, 0.85);       /* Teer: every panel background */
  --bc-item: rgba(31, 35, 40, 0.89);        /* Stahl hell: rows, slots, secondary buttons */
  --bc-item-hover: rgba(41, 46, 52, 0.89);
  --bc-field: rgba(15, 17, 20, 0.89);       /* text inputs */
  --bc-line: #353b42;                       /* borders, dividers */
  --bc-frame: rgba(242, 239, 232, 0.10);    /* painted inner frame, 5px inside each panel */
  --bc-overlay: rgba(8, 7, 6, 0.55);        /* dim behind dialogs */
  --bc-page: #0f1114;                       /* solid page background for web pages outside FiveM (NUI bodies stay transparent) */

  /* text */
  --bc-fg: #f2efe8;                         /* Schablonenweiß: text, titles, outlines */
  --bc-muted: #9d968b;                      /* descriptions, hints, eyebrow, wordmark */

  /* headers: no fill, white title over the road line */
  --bc-head-fg: #f2efe8;
  --bc-lane: #e2b33c;                       /* dashed road line under each header */

  /* selection: painted white, deliberately different from the yellow accent */
  --bc-sel: #efeae0;                        /* Weiß gestrichen */
  --bc-sel-fg: #161412;
  --bc-sel-icon: #c4572e;                   /* Rost */
  --bc-sel-ctl: #161412;                    /* checkboxes + bars inside a selected row */

  /* accent: checkboxes, bars, primary button, TextUI key */
  --bc-accent: #e2b33c;                     /* Straßengelb */
  --bc-accent-fg: #161412;

  /* semantic */
  --bc-success: #8fae6b;
  --bc-danger: #c94f30;                     /* Rostrot */
  --bc-info: #6e9fa3;                       /* Patina */
  --bc-warn: #e2b33c;
  --bc-success-tint: rgba(143, 174, 107, 0.2);
  --bc-danger-tint: rgba(201, 79, 48, 0.2);
  --bc-info-tint: rgba(110, 159, 163, 0.2);
  --bc-warn-tint: rgba(226, 179, 60, 0.2);
  --bc-error-fg: #e07a5c;                   /* validation message text under a field */
  --bc-focus-ring: rgba(226, 179, 60, 0.25);/* 3px ring around a focused field */

  /* HUD status (one faded colour per stat so rings stay recognisable; see foundations/tokens.md) */
  --bc-stat-health: #d9646f;
  --bc-stat-armor: #7fa3c9;
  --bc-stat-hunger: #e08a3c;
  --bc-stat-thirst: #5aaed6;
  --bc-stat-stress: #c06a9c;
  --bc-stat-stamina: #a08fd8;
  --bc-stat-oxygen: #9cd0e8;
  --bc-stat-track: rgba(242, 239, 232, 0.12); /* empty part of a ring, bar or dial (faint white paint) */


  /* shape */
  --bc-radius: 8px;                         /* panels */
  --bc-radius-sm: 5px;                      /* rows, buttons, fields, slots, bars */
  --bc-gap: 3px;                            /* between list rows */
  --bc-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.6);

  /* type */
  --bc-font-display: "Bebas Neue", "Barlow Condensed", "Arial Narrow", sans-serif;
  --bc-font-body: "Barlow", "Segoe UI", Arial, sans-serif;
  --bc-font-mono: "JetBrains Mono", Consolas, monospace;
}

/* ---------- base ---------- */
.bc-root { font-family: var(--bc-font-body); font-size: 15px; line-height: 1.35; color: var(--bc-fg); -webkit-font-smoothing: antialiased; }
.bc-root *, .bc-root *::before, .bc-root *::after { box-sizing: border-box; }

/* ---------- panel + header ---------- */
.bc-panel {
  background: var(--bc-panel); border: 1px solid var(--bc-line); border-radius: var(--bc-radius);
  box-shadow: var(--bc-shadow); overflow: hidden;
  outline: 1px solid var(--bc-frame); outline-offset: -5px;            /* painted inner frame */
}

/* Header of every menu/dialog/inventory pane: white title on the panel, dashed road line below. */
.bc-header {
  position: relative; padding: 14px 16px 20px;
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 12px;
  color: var(--bc-head-fg);
}
.bc-header::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--bc-lane) 0 28px, transparent 28px 44px);
}
.bc-header > .bc-eyebrow, .bc-header > .bc-title { grid-column: 1; }
.bc-header--compact { padding: 6px 6px 18px; margin-bottom: 8px; grid-template-columns: 34px 1fr 34px; align-items: center; text-align: center; }
.bc-header--compact::after { left: 6px; right: 6px; bottom: 4px; }
.bc-eyebrow { font-family: var(--bc-font-mono); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--bc-muted); }
.bc-title { margin: 0; font-family: var(--bc-font-display); font-weight: 400; font-size: 28px; line-height: 1.05; letter-spacing: .05em; text-transform: uppercase; }
.bc-header .bc-title { font-size: 34px; }
.bc-header--compact .bc-title { font-size: 28px; }

/* stencilled ID box on the header: counters like "1/6" */
.bc-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 400 15px/1 var(--bc-font-display); letter-spacing: .05em; color: var(--bc-fg); border: 2px solid var(--bc-fg); border-radius: var(--bc-radius-sm); padding: 5px 8px 4px; }

/* ---------- list rows (list menu, context menu) ---------- */
.bc-list { list-style: none; margin: 0; padding: 6px; display: grid; gap: var(--bc-gap); }
.bc-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 48px; padding: 6px 12px; border-radius: var(--bc-radius-sm);
  background: var(--bc-item); cursor: pointer;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.bc-row:hover { background: var(--bc-item-hover); }
.bc-row__icon { color: var(--bc-muted); font-size: 16px; text-align: center; }
.bc-row__title { display: block; font-weight: 600; font-size: 15px; }
.bc-row__desc { display: block; color: var(--bc-muted); font-size: 12.5px; }
.bc-row__end { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.bc-row.is-selected { background: var(--bc-sel); color: var(--bc-sel-fg); box-shadow: none; }
.bc-row.is-selected .bc-row__title { text-transform: uppercase; letter-spacing: .03em; }
.bc-row.is-selected .bc-row__icon { color: var(--bc-sel-icon); }
.bc-row.is-selected .bc-row__desc { color: inherit; opacity: .72; }
.bc-row.is-disabled { opacity: .42; cursor: not-allowed; }
.bc-row--card { grid-template-columns: 30px minmax(0, 1fr) auto; padding: 11px 12px; }          /* context menu option */
.bc-row--card .bc-row__icon { color: var(--bc-accent); font-size: 17px; }
.bc-row--card.is-selected .bc-row__icon { color: var(--bc-sel-icon); }
.bc-row--card.is-disabled .bc-row__icon { color: var(--bc-muted); }
.bc-row--card > .bc-bar { grid-column: 2 / span 2; width: auto; margin-top: 6px; }

/* ---------- controls ---------- */
.bc-check { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 3px; border: 2px solid var(--bc-muted); color: transparent; font-size: 11px; }
.bc-check.is-on { background: var(--bc-accent); border-color: var(--bc-accent); color: var(--bc-accent-fg); }
.bc-row.is-selected .bc-check { border-color: var(--bc-sel-ctl); }
.bc-row.is-selected .bc-check.is-on { background: var(--bc-sel-ctl); color: var(--bc-sel); }

.bc-bar { display: block; width: 110px; height: 6px; border-radius: var(--bc-radius-sm); background: rgba(0, 0, 0, 0.4); overflow: hidden; }
.bc-bar > i { display: block; height: 100%; background: var(--bc-accent); border-radius: inherit; }
.bc-bar.is-critical > i { background: var(--bc-danger); }
.bc-row.is-selected .bc-bar { background: rgba(22, 20, 18, 0.16); }
.bc-row.is-selected .bc-bar > i { background: var(--bc-sel-ctl); }

.bc-kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; font: 500 11px/1 var(--bc-font-mono); color: var(--bc-fg); background: transparent; border: 1px solid rgba(242, 239, 232, 0.4); border-radius: var(--bc-radius-sm); }
.bc-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 10px 16px; border-top: 1px solid var(--bc-line); font-size: 12px; color: var(--bc-muted); }
.bc-keys > span { display: inline-flex; align-items: center; gap: 6px; }
.bc-wordmark { margin-left: auto; font-family: var(--bc-font-display); font-size: 14px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: var(--bc-muted); opacity: .5; }
.bc-desc { padding: 10px 16px 12px; font-size: 13px; color: var(--bc-muted); border-top: 1px solid var(--bc-line); min-height: 44px; }

.bc-btn { height: 40px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--bc-radius-sm); border: 1px solid var(--bc-line); background: var(--bc-item); color: var(--bc-fg); font: 600 14px var(--bc-font-body); cursor: pointer; }
.bc-btn:hover { background: var(--bc-item-hover); }
.bc-btn--primary { background: var(--bc-accent); color: var(--bc-accent-fg); border-color: transparent; text-transform: uppercase; letter-spacing: .05em; }
.bc-btn--danger { background: var(--bc-danger); color: #f6efe6; border-color: transparent; text-transform: uppercase; letter-spacing: .05em; }
.bc-btn--primary:hover, .bc-btn--danger:hover { filter: brightness(1.06); }
.bc-btn .bc-kbd { height: 18px; min-width: 18px; font-size: 10px; border-color: rgba(0, 0, 0, 0.3); color: inherit; }
.bc-icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--bc-radius-sm); background: transparent; border: 1px solid var(--bc-line); color: var(--bc-fg); cursor: pointer; font-size: 13px; }
.bc-icon-btn:hover { background: var(--bc-item-hover); }

/* ---------- form fields ---------- */
.bc-form { padding: 16px 18px 6px; display: grid; gap: 14px; }
.bc-field { display: grid; gap: 6px; }
.bc-label { font-size: 13px; font-weight: 600; }
.bc-label .bc-req { color: var(--bc-danger); margin-left: 2px; }
.bc-help { font-size: 12px; color: var(--bc-muted); }
.bc-error { font-size: 12px; color: var(--bc-error-fg); }
.bc-input { display: flex; align-items: center; height: 42px; background: var(--bc-field); border: 1px solid var(--bc-line); border-radius: var(--bc-radius-sm); }
.bc-input:focus-within { border-color: var(--bc-accent); box-shadow: 0 0 0 3px var(--bc-focus-ring); }
.bc-input.is-invalid { border-color: var(--bc-danger); }
.bc-input > .bc-input__icon { margin-left: 12px; width: 14px; color: var(--bc-muted); }
.bc-input input, .bc-input select, .bc-input textarea { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: transparent; color: var(--bc-fg); font: inherit; font-size: 15px; outline: none; }
.bc-input select option { background: #1f2328; color: var(--bc-fg); }
.bc-input--area { height: auto; }
.bc-input textarea { padding: 10px 12px; resize: none; height: 66px; }

/* ---------- dialogs ---------- */
.bc-overlay { position: fixed; inset: 0; background: var(--bc-overlay); }
.bc-dialog { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 460px; }
.bc-dialog--alert { width: 420px; }
.bc-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 18px 18px; }
.bc-alert { padding: 20px 18px 6px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; }
.bc-alert__badge { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--bc-radius-sm); font-size: 19px; color: var(--bc-danger); background: var(--bc-danger-tint); }
.bc-alert p { margin: 6px 0 0; color: var(--bc-muted); font-size: 14px; line-height: 1.5; }
.bc-alert p b { color: var(--bc-fg); font-weight: 600; }

/* ---------- notify / progress / textUI ---------- */
.bc-notify { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; padding: 12px 14px; width: 330px; }
.bc-notify__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--bc-radius-sm); font-size: 15px; }
.bc-notify--success .bc-notify__icon { color: var(--bc-success); background: var(--bc-success-tint); }
.bc-notify--error .bc-notify__icon { color: var(--bc-danger); background: var(--bc-danger-tint); }
.bc-notify--info .bc-notify__icon { color: var(--bc-info); background: var(--bc-info-tint); }
.bc-notify--warn .bc-notify__icon { color: var(--bc-warn); background: var(--bc-warn-tint); }
.bc-notify__title { display: block; font-size: 14.5px; font-weight: 600; }
.bc-notify__text { display: block; color: var(--bc-muted); font-size: 13px; margin-top: 1px; }

.bc-progress { width: 380px; padding: 12px 14px; }
.bc-progress__row { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.bc-progress__value { font-family: var(--bc-font-mono); font-weight: 500; font-size: 13px; color: var(--bc-muted); }
.bc-progress .bc-bar { width: 100%; height: 10px; }

.bc-textui { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; font-weight: 600; font-size: 15px; }
.bc-textui .bc-kbd { height: 30px; min-width: 30px; font: 400 17px/1 var(--bc-font-display); background: var(--bc-accent); color: var(--bc-accent-fg); border: 0; }

/* ---------- inventory ---------- */
.bc-inv { display: flex; gap: 14px; align-items: flex-start; }
.bc-inv__pane { width: calc(5 * var(--bc-slot, 104px) + 4 * 4px + 24px + 2px); }
.bc-inv__weight { font: 500 13px/1 var(--bc-font-mono); white-space: nowrap; align-self: center; grid-column: 2; grid-row: 1 / span 2; }
.bc-inv__bar { padding: 10px 12px 0; }
.bc-inv__bar .bc-bar { width: 100%; height: 5px; }
.bc-grid { display: grid; grid-template-columns: repeat(5, var(--bc-slot, 104px)); gap: 4px; padding: 10px 12px 12px; }
.bc-slot { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: var(--bc-item); border: 1px solid var(--bc-line); border-radius: var(--bc-radius-sm); overflow: hidden; }
.bc-slot.is-empty { background: rgba(31, 35, 40, 0.35); }
.bc-slot:not(.is-empty):hover, .bc-slot.is-hover { border-color: var(--bc-accent); box-shadow: inset 0 0 0 1px var(--bc-accent); }
.bc-slot__img { width: 60%; height: 60%; object-fit: contain; margin-bottom: 12%; }
.bc-slot__hotkey { position: absolute; left: 4px; top: 4px; min-width: 15px; height: 15px; display: grid; place-items: center; font: 600 10px/1 var(--bc-font-mono); color: var(--bc-accent-fg); background: var(--bc-accent); border-radius: 3px; }
.bc-slot__count { position: absolute; right: 5px; top: 3px; font: 600 11px/1.3 var(--bc-font-mono); }
.bc-slot__name { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 4px 3px; font-size: 10.5px; font-weight: 600; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(0, 0, 0, 0.35); }
.bc-slot__dur { position: absolute; left: 0; right: 0; bottom: 18px; height: 3px; background: rgba(0, 0, 0, 0.35); }
.bc-slot__dur > i { display: block; height: 100%; background: var(--bc-accent); }
.bc-slot__dur.is-low > i { background: var(--bc-danger); }
.bc-tooltip { position: absolute; width: 236px; padding: 12px 14px; pointer-events: none; }
.bc-tooltip h4 { margin: 0; font: 400 20px/1.1 var(--bc-font-display); letter-spacing: .05em; text-transform: uppercase; }
.bc-tooltip p { margin: 4px 0 8px; font-size: 12.5px; color: var(--bc-muted); }
.bc-tooltip dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 12.5px; border-top: 1px solid var(--bc-line); padding-top: 8px; }
.bc-tooltip dt { color: var(--bc-muted); }
.bc-tooltip dd { margin: 0; text-align: right; font: 500 12px var(--bc-font-mono); }

/* ---------- radial menu (lib.registerRadial) ---------- */
/* 480px disc: SVG ring segments around a round hub with a painted double ring. Geometry: see components/radial-menu.md */
.bc-radial { position: fixed; left: 50%; top: 50%; width: 480px; height: 480px; transform: translate(-50%, -50%); }
.bc-radial__svg { position: absolute; inset: 0; overflow: visible; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55)); }
.bc-radial__seg { fill: var(--bc-item); stroke: rgba(18, 20, 23, 0.9); stroke-width: 4; cursor: pointer; }
.bc-radial__seg:hover, .bc-radial__seg.is-hover { fill: var(--bc-sel); }
.bc-radial__item { position: absolute; width: 104px; margin: -30px 0 0 -52px; display: grid; justify-items: center; gap: 6px; text-align: center; pointer-events: none; }
.bc-radial__item > .bc-radial__icon { font-size: 22px; color: var(--bc-muted); }
.bc-radial__item > b { font-size: 13px; font-weight: 600; line-height: 1.15; }
.bc-radial__item.is-hover { color: var(--bc-sel-fg); }
.bc-radial__item.is-hover > .bc-radial__icon { color: var(--bc-sel-icon); }
/* submenu marker: chevron at radius 213 on the segment's centre angle, rotated by that angle so it points away from the hub */
.bc-radial__sub { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; display: grid; place-items: center; font-size: 11px; color: var(--bc-muted); pointer-events: none; }
.bc-radial__sub.is-hover { color: var(--bc-sel-icon); }
.bc-radial__hub {
  position: absolute; left: 50%; top: 50%; width: 164px; height: 164px; margin: -82px 0 0 -82px; border-radius: 50%;
  display: grid; align-content: center; justify-items: center; gap: 2px; text-align: center; color: var(--bc-fg);
  background: rgba(18, 20, 23, 0.9);
  box-shadow: inset 0 0 0 2px var(--bc-fg), inset 0 0 0 6px rgba(18, 20, 23, 0.9), inset 0 0 0 7px rgba(242, 239, 232, 0.25), 0 0 0 6px rgba(18, 20, 23, 0.9);
}
.bc-radial__hub .bc-eyebrow { font-size: 10px; }
.bc-radial__hub .bc-title { font-size: 30px; line-height: 1; }
.bc-radial__close { margin-top: 6px; font-size: 11.5px; font-weight: 600; opacity: .75; }
.bc-radial__page { position: absolute; left: 50%; top: calc(50% + 70px); transform: translateX(-50%); font: 400 13px/1 var(--bc-font-display); letter-spacing: .05em; padding: 5px 8px; background: var(--bc-sel); color: var(--bc-sel-fg); border-radius: var(--bc-radius-sm); }

/* ---------- target (ox_target) ---------- */
/* .bc-target sits exactly on the screen centre; the eye is centred on that point, the list hangs to its right. */
.bc-target { position: fixed; left: 50%; top: 50%; }
.bc-target__eye { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 17px; color: var(--bc-fg); background: rgba(12, 13, 15, 0.55); box-shadow: 0 0 0 2px rgba(242, 239, 232, 0.35); }
.bc-target__eye.is-active { color: var(--bc-accent-fg); background: var(--bc-accent); box-shadow: 0 0 0 2px rgba(18, 20, 23, 0.9), 0 0 0 4px var(--bc-accent); }
.bc-target__list { position: absolute; left: 34px; top: -26px; width: 260px; padding: 6px; display: grid; gap: var(--bc-gap); }
.bc-target__label { padding: 2px 6px 6px; }
.bc-target__label .bc-eyebrow { color: var(--bc-fg); }
.bc-target__opt { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; min-height: 38px; padding: 0 10px; border-radius: var(--bc-radius-sm); background: var(--bc-item); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5); }
.bc-target__opt > .bc-target__icon { color: var(--bc-accent); text-align: center; }
.bc-target__opt:hover, .bc-target__opt.is-selected { background: var(--bc-sel); color: var(--bc-sel-fg); box-shadow: none; }
.bc-target__opt:hover > .bc-target__icon, .bc-target__opt.is-selected > .bc-target__icon { color: var(--bc-sel-icon); }
.bc-target__opt.is-disabled { opacity: .42; cursor: not-allowed; }
.bc-target__meta { font: 500 11.5px var(--bc-font-mono); opacity: .7; }

/* ---------- screen anchors (see layout.md) ---------- */
.bc-at-menu { position: fixed; left: 40px; top: 44px; width: 384px; }
.bc-at-context { position: fixed; right: 40px; top: 44px; width: 352px; padding: 8px; }
.bc-at-notify { position: fixed; right: 40px; top: 44px; display: grid; gap: 8px; }
.bc-at-progress { position: fixed; left: 50%; bottom: 80px; transform: translateX(-50%); }
.bc-at-textui { position: fixed; left: 40px; top: 50%; transform: translateY(-50%); }
.bc-at-center { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }