@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/PlusJakartaSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

/* ============================================================
   BASE THEME
============================================================ */
:root {
  --bg: #0f1220;
  --card: #171a2b;
  --text: #eef6fb;
  --muted: #8ea3b0;
  --accent: rgba(77,163,255,0.35);

  --role-ot: #4da3ff;
  --role-ipos: #b57bff;
  --role-mc: #168347;
  --role-door-expo: #ffcc66;
  --role-traffic: #ff6f6f;
  --leader: #e51636;

  --inside: #1a2c46;
  --outside: #3f7d4a;
  --cover: #ff4d4f;
  --line: #222b47;
}

/* ============================================================
   GLOBAL
============================================================ */
.icon-btn,
.move-icon,
.cover-icon,
.pause-icon {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif !important;
}

/* ============================================================
   REMOVE BLUE HIGHLIGHT FROM BUTTON CLICKS / TOUCHES
============================================================ */
*:focus {
  outline: none !important;
}

button,
.icon-btn,
.mini-end-btn,
.modal-btn,
.toggle-btn,
.cover-name-pill,
.adjust-btn {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove Chrome/Android tap highlight */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   FORCE NO SCROLLBARS ANYWHERE
============================================================ */
* {
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none !important;
}

.column,
#app,
.card-list {
  min-height: 0;
  min-width: 0;
  overflow: visible; /* allow stacking */
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

button, input, select, textarea { font-family: inherit; }

/* Keep the pointer stable while it crosses text/icons inside clickable controls. */
button,
[role="button"],
label:has(input[type="radio"]),
label:has(input[type="checkbox"]),
summary {
  user-select: none;
  -webkit-user-select: none;
}

button *,
[role="button"] *,
label:has(input[type="radio"]) *,
label:has(input[type="checkbox"]) *,
summary * {
  cursor: inherit;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none !important;
}

/* Main layout: Inside 50%, Outside 50% */
#app {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
}

.column {
  width: 50%;
  padding: 0 10px;
}

.column-title {
  text-align: center;
  font-weight: 900;
  font-size: 22px;
  color: var(--muted);
  margin-bottom: 14px;
}

.card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ============================================================
   CARD BASE
============================================================ */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  position: relative;
  z-index: 1;
  overflow: visible;
  padding-right: 15px;
  min-height: 87px;
  height: auto;
}

/* ============================================================
   STATUS BAR
============================================================ */
.status-bar {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 32px;
  height: 100%;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* This element rotates 180°, so these become right-side corners visually. */
  border-radius: 14px 0 0 14px;
}

.status-inside { background: var(--inside); }
.status-outside { background: var(--outside); }
.status-cover { background: var(--cover); }
.status-off-soon { background: #d85b91; }

.status-bar.role-change-edge {
  cursor: pointer;
  font-size: 9px;
  letter-spacing: 0.6px;
}

.status-bar.role-change-edge:hover {
  filter: brightness(1.12);
}

.status-bar.split-role-edge {
  writing-mode: horizontal-tb;
  transform: none;
  border-radius: 0 14px 14px 0;
}

.role-edge-words {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transform: rotate(-90deg);
  font-size: 13px;
  line-height: 0.9;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.role-edge-word {
  display: block;
}

.secondary-status-bar {
  display: none;
  font-size: 12px;
  letter-spacing: 2px;
}

.card.dual-status .status-bar:not(.secondary-status-bar) {
  right: 32px;
  border-radius: 0;
}

.card.dual-status .card-header-grid {
  width: calc(100% - 64px);
}

/* ============================================================
   HEADER GRID
============================================================ */
.card-header-grid {
  display: grid;
  grid-template-columns: 32% 35% 10% 0% 23%;
  align-items: center;
  gap: 0px;
  width: calc(100% - 32px);
  min-height: 71px;
}

/* ============================================================
   ROLE PILL / NAME / SHIFT
============================================================ */
.col-role-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-self: stretch;
  justify-content: center;
}

.role-pill {
  display: inline-block;
  width: fit-content;
  padding: 3px 8px;
  white-space: nowrap;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.role-Order-Taker { background: var(--role-ot); }
.role-iPOS-Lead   { background: var(--role-ipos); }
.role-Mobile-Cash { background: var(--role-mc); }
.role-Door-Expo   { background: var(--role-door-expo); }
.role-Traffic     { background: var(--role-traffic); }

.card-name {
  font-size: 20px;
  font-weight: 800;
}

.card.leader-card .card-name {
  color: var(--leader);
}

.card-shift {
  font-size: 12px;
  color: var(--muted);
}

/* ============================================================
   HISTORY
============================================================ */
.col-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: stretch;
  justify-content: center;
  overflow: hidden;
  align-items: flex-start;
}

.history-row {
  background: #1e2b33;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--muted);
  opacity: 0.95;
  display: inline-block;
  width: auto;
}

/* ============================================================
   ICON BUTTONS
============================================================ */
.col-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: stretch;
  justify-content: center;
  align-items: center;
  margin-top: 0;
}

.icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #22283f;
  border: 1px solid #303a55;
  color: var(--text);
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover { background: #2d3552; }

/* ============================================================
   TIMER
============================================================ */
.col-timer {
  font-size: 26px;
  font-weight: 900;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
  gap: 8px;
}

.exposure-rating {
  display: flex;
  justify-content: flex-end;
  gap: 0;
  height: 10px;
  font-size: clamp(10px, 1.15vw, 16px);
  line-height: 10px;
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  min-width: 28px;
}

.exposure-rating:empty {
  display: none;
}

.exposure-rating span {
  display: inline-block;
}

/* ===============================
   MINI-CARD WRAPPER
================================ */
.mini-card-wrapper {
  margin-top: 10px;
  display: none;
  position: relative;
}

.mini-card-wrapper.has-mini {
  display: block;
}

/* MINI-CARD GRID */
.mini-card {
  display: grid;
  grid-template-columns: 45% 35% 20%;
  width: 70%;
  height: 48px;
  margin-left: auto;
  margin-right: 26px;
  gap: 6px;
  padding: 8px 10px;
  background: #0f162d;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
}

.mini-card > * {
  min-width: 0 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* COLUMN 1 — NAME */
.mini-name {
  font-size: 16px;
  font-weight: 900;
  justify-content: flex-start;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* COLUMN 2 — END COVER BUTTON */
.mini-end-btn {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff4d4f;
  border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 10px;
  font-weight: 900;
  color: var(--text);
  padding: 2px;
  white-space: nowrap;
  overflow: hidden;
}

.mini-end-btn:hover {
  opacity: 0.85;
}

/* COLUMN 3 — TIMER */
.mini-timer {
  font-size: 20px;
  font-weight: 900;
  justify-content: flex-end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  margin-right: 16px;
}

/* Outer horizontal row — label flush against mini-card */
.mini-cover-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  width: 100%;
  margin-right: 26px;
}

.mini-cover-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  width: 30%;
  margin: 0;
  padding: 0;
  text-align: right;
}

/* Pause icon for main card during cover */
.pause-icon {
  font-size: 28px;
  font-weight: 900;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 12px;
}

.pause-icon.pulsing {
  animation: pausePulse 1.1s ease-in-out infinite;
}

@keyframes pausePulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.14);
    opacity: 0.65;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ============================================================
   MODALS
============================================================ */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10500000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.modal:not(.hidden) {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.modal-box {
  background: var(--card);
  border-radius: 14px;
  border: 1px solid var(--line);
  padding: 20px;
  width: 300px;
  transform: scale(0.92) translateY(10px);
  opacity: 0;
  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
}

.modal:not(.hidden) .modal-box {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.modal.hidden .modal-box {
  transform: scale(0.92) translateY(10px);
  opacity: 0;
}

/* Mobile browsers can duplicate transformed card layers when backdrop-filter
   samples them. Blur the stable page containers instead on phone portrait. */
body[data-layout="phone-portrait"] .modal {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(15, 18, 32, 0.62);
}

body[data-layout="phone-portrait"].modal-open {
  overflow: hidden;
}

body[data-layout="phone-portrait"].modal-open #weather-row,
body[data-layout="phone-portrait"].modal-open #app {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

/* ROLE MODAL BUTTONS */
.role-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
}

.role-btn {
  width: 100%;
  padding: 8px 12px;
  height: 44px;
  border-radius: 10px;
  border: none;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease;
  margin-bottom: 6px;
}

.role-btn:hover {
  opacity: 0.9;
}

.role-btn.role-Order-Taker { background: var(--role-ot); }
.role-btn.role-iPOS-Lead   { background: var(--role-ipos); }
.role-btn.role-Mobile-Cash { background: var(--role-mc); }
.role-btn.role-Door-Expo        { background: var(--role-door-expo); }
.role-btn.role-Traffic     { background: var(--role-traffic); }

.modal-cancel {
  width: 100%;
  padding: 10px 14px;
  height: 44px;
  background: #22283f;
  border: 1px solid #303a55;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.modal-cancel:hover {
  background: #2d3552;
}

/* ============================================================
   COVER MODAL
============================================================ */
.cover-name-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  justify-items: center;
  margin-top: 16px;
}

.cover-name-pill {
  background: #2a334a;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  width: 100%;
  max-width: 160px;
  cursor: pointer;
  transition: opacity .2s;
}

.cover-name-pill:hover {
  opacity: 0.85;
}

.cover-toggle-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #1e2539;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  height: 44px;
}

.cover-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  border-radius: 12px;
  transition: transform 0.25s ease;
  z-index: 0;
  background: var(--accent);
}

.toggle-btn {
  position: relative;
  z-index: 2;
  background: transparent;
  border: none;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-btn.active {
  color: white;
}

.cover-cancel-btn {
  width: 100%;
  padding: 12px;
  margin-top: 20px;
  background: #22283f;
  border: 1px solid #303a55;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.cover-cancel-btn:hover {
  opacity: 0.85;
}

/* ============================================================
   ADJUST TIMER MODAL
============================================================ */
.adjust-box { width: 320px; }

.adjust-toggle-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #1e2539;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  height: 44px;
}

.adjust-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: var(--accent);
  border-radius: 12px;
  transition: transform 0.22s ease;
  z-index: 1;
}

.adjust-toggle-btn {
  position: relative;
  z-index: 2;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.adjust-toggle-btn.active {
  color: white;
}

.adjust-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 16px;
  margin-bottom: 16px;
}

.adjust-btn {
  width: 100%;
  padding: 10px 14px;
  height: 44px;
  background: var(--accent);
  border: 1px solid #303a55;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.adjust-btn:hover {
  background: #2d3552;
}

/* ============================================================
   ADJUST EXPOSURE MODAL
============================================================ */

.exposure-box {
  width: min(340px, calc(100vw - 40px));
  text-align: center;
}

.exposure-modal-value {
  min-height: 42px;
  margin: 14px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
}

.exposure-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.exposure-adjust-btn {
  height: 52px;
  border: 1px solid #3a456d;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.exposure-minus {
  background: #386b9d;
}

.exposure-plus {
  background: #a44545;
}

.exposure-adjust-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.adjust-toggle-btn,
.adjust-btn,
#adjust-cancel {
  -webkit-tap-highlight-color: transparent;
}

#inside-list,
#outside-list {
  padding-bottom: 70px;
  position: relative;
}

/* ===========================================
   FULL SCREEN LOADING OVERLAY
=========================================== */
#loading-screen {
  position: fixed;
  inset: 0;
  background: var(--bg);
  backdrop-filter: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
  opacity: 1;
}

#loading-screen.hidden {
  display: none;
}

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 10000000;
  display: grid;
  place-items: start center;
  padding: 22px;
  background:
    radial-gradient(circle at top, rgba(88, 101, 242, 0.18), transparent 38%),
    #111214;
  /* Keep login input responsive: this layer is already effectively opaque,
     so blurring the animated dashboard underneath only adds repaint work. */
  backdrop-filter: none;
  overflow: hidden;
}

.auth-screen.hidden {
  display: none;
}

.tool-launcher-screen {
  position: fixed;
  inset: 0;
  z-index: 10000000;
  overflow-y: auto;
  padding: clamp(24px, 7vh, 70px) 20px;
  background:
    radial-gradient(circle at 18% 0%, rgba(88, 101, 242, .2), transparent 34rem),
    var(--bg);
  color: var(--text);
}
.tool-launcher-screen.hidden { display: none; }
.tool-launcher-shell { position: relative; width: min(1180px, 100%); margin: 0 auto; }
.tool-launcher-header { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; padding-right: 96px; }
.tool-launcher-logout { position: absolute; top: 0; right: 0; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); cursor: pointer; font: inherit; font-size: 12px; font-weight: 850; }
.tool-launcher-logout:hover { border-color: #6975ff; background: color-mix(in srgb, var(--card) 90%, #5865f2); }
.tool-launcher-logout:disabled { cursor: wait; opacity: .6; }
.tool-launcher-logout.hidden { display: none; }
.tool-launcher-settings-btn { position: absolute; top: 0; right: 108px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); cursor: pointer; }
.tool-launcher-settings-btn:hover { border-color: #6975ff; background: color-mix(in srgb, var(--card) 90%, #5865f2); }
.tool-launcher-settings-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 520px) {
  .tool-launcher-settings-btn { right: 92px; width: 36px; height: 36px; }
}
/* Global-context settings modal (opened from the launcher, outside any hub):
   only Appearance and Account are meaningful without a hub's own data loaded,
   so the rest of the nav (all Rotations-Hub-specific) is hidden rather than
   showing empty/default placeholder content. */
#settings-modal.settings-global .settings-nav [data-settings-tab]:not([data-settings-tab="appearance"]):not([data-settings-tab="account"]) { display: none; }
#settings-modal:not(.settings-global) .settings-nav [data-settings-tab="appearance"], #settings-modal:not(.settings-global) .settings-nav [data-settings-tab="account"] { display: none; }
#settings-modal.settings-global .settings-footer { display: none; }

.tool-launcher-logo { display: grid; place-items: center; flex: 0 0 64px; width: 64px; height: 64px; border: 1px solid #51545c; border-radius: 16px; background: linear-gradient(145deg, #343a58, #252732); color: #dce5ff; font-size: 30px; font-weight: 900; box-shadow: 0 12px 30px rgba(0,0,0,.24); }
.tool-launcher-header p { margin: 0 0 4px; color: #9da7ff; font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.tool-launcher-header h1 { margin: 0; font-size: clamp(28px, 5vw, 44px); letter-spacing: -.045em; line-height: 1; }
.tool-launcher-header > div > span { display: block; margin-top: 8px; color: var(--muted); }
.tool-launcher-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-launcher-card { position: relative; min-height: 150px; overflow: hidden; display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 15px; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); color: var(--text); font: inherit; text-align: left; }
button.tool-launcher-card.available { cursor: pointer; box-shadow: 0 16px 38px rgba(0,0,0,.16); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
button.tool-launcher-card.available:hover { border-color: #6975ff; background: color-mix(in srgb, var(--card) 90%, #5865f2); }
.tool-launcher-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 13px; background: rgba(88,101,242,.17); color: #b7beff; font-size: 16px; font-weight: 950; letter-spacing: -.03em; }
.tool-launcher-icon svg { width: 30px; height: 30px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tool-launcher-copy { min-width: 0; }
.tool-launcher-copy strong { display: block; font-size: 18px; line-height: 1.15; }
.tool-launcher-copy small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.tool-launcher-open { color: #aeb7ff; font-size: 25px; }
.tool-launcher-card.coming-soon { filter: saturate(.55); }
.tool-launcher-card.coming-soon::after { content: ""; position: absolute; inset: 0; background: rgba(12,14,19,.34); pointer-events: none; }
.tool-launcher-card.coming-soon:not(.admin-bypass) { cursor: not-allowed; }
.tool-launcher-card.coming-soon .admin-only-tool-open { display: none; }
.tool-launcher-card.coming-soon.admin-bypass { cursor: pointer; filter: none; box-shadow: 0 16px 38px rgba(0,0,0,.16); transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.tool-launcher-card.coming-soon.admin-bypass:hover { border-color: #6975ff; background: color-mix(in srgb, var(--card) 90%, #5865f2); }
.tool-launcher-card.coming-soon.admin-bypass .admin-only-tool-open { display: block; position: relative; z-index: 3; }
.tool-launcher-ribbon { position: absolute; z-index: 2; top: 16px; right: -35px; width: 145px; padding: 6px 0; transform: rotate(36deg); background: #d7193f; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.28); font-size: 9px; font-weight: 950; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
:root[data-theme="light"] .tool-launcher-screen { background: radial-gradient(circle at 18% 0%, rgba(88,101,242,.13), transparent 34rem), #f3f5f8; }
:root[data-theme="light"] .tool-launcher-logo { border-color: #cfd4dc; }
:root[data-theme="light"] .tool-launcher-card.coming-soon::after { background: rgba(232,235,240,.48); }
@media (max-width: 900px) {
  .tool-launcher-card { min-height: 136px; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 15px; }
  .tool-launcher-icon { width: 44px; height: 44px; border-radius: 11px; }
  .tool-launcher-icon svg { width: 25px; height: 25px; }
  .tool-launcher-copy strong { font-size: 15px; }
  .tool-launcher-copy small { font-size: 10px; line-height: 1.35; }
  .tool-launcher-open { display: none; }
}
@media (max-width: 680px) {
  .tool-launcher-screen { padding: 24px 14px; }
  .tool-launcher-header { align-items: flex-start; margin-bottom: 20px; padding-top: 52px; padding-right: 0; }
  .tool-launcher-logo { flex-basis: 52px; width: 52px; height: 52px; border-radius: 13px; font-size: 24px; }
  .tool-launcher-grid { grid-template-columns: 1fr; gap: 10px; }
  .tool-launcher-card { min-height: 112px; padding: 17px; }
}

.tool-workspace-screen {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  color: var(--text);
}
.tool-workspace-screen.hidden { display: none; }
.tool-workspace-header {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 74px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.tool-workspace-header button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
}
.tool-workspace-header span { display: block; margin-bottom: 2px; color: #9da7ff; font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.tool-workspace-header h1 { margin: 0; font-size: clamp(20px, 3vw, 28px); letter-spacing: -.03em; }
.tool-workspace-canvas { min-height: 0; background: var(--bg); }
.admin-preview-active .tool-workspace-screen { inset: 48px 0 0; }
@media (max-width: 520px) {
  .tool-workspace-header { min-height: 66px; padding: 10px 14px; }
}

/* Equipment Maintenance workspace */
.tool-workspace-screen[data-tool="equipment-maintenance"] .tool-workspace-header { display: none; }
.tool-workspace-screen[data-tool="equipment-maintenance"] .tool-workspace-canvas { overflow-y: auto; }
.equipment-app { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 72px; color: var(--text); }
.equipment-app-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.equipment-app-header > div:first-child > span, .equipment-modal-header span { color: #8e99ff; font-size: 11px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.equipment-app-header h2 { margin: 4px 0 6px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.045em; }
.equipment-app-header p { margin: 0; color: var(--muted); }
.equipment-header-actions { display: flex; gap: 9px; flex: 0 0 auto; }
.equipment-corner-actions { position: fixed; z-index: 9998; right: 20px; bottom: 20px; display: grid; grid-template-columns: 108px 96px 50px; align-items: center; gap: 12px; }
.equipment-corner-actions > button { height: 50px; border: 1px solid #2d3552; background: #1a1f33; color: #cbd8ef; box-shadow: none; font-family: inherit; font-size: 13px; font-weight: 800; line-height: normal; }
.equipment-corner-actions > button:hover { background: #252c46; }
.equipment-tools-home-btn { min-width: 96px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 25px; font-size: 13px; }
.equipment-corner-actions > .equipment-settings-open-btn { display: grid; place-items: center; width: 50px; padding: 0 0 3px; border-radius: 8px; font-size: 30px; font-weight: 400; }
.equipment-quick-add { min-width: 108px; padding: 0 14px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 25px; font-size: 13px; }
.equipment-quick-add-icon { font-size: 19px; font-weight: 700; line-height: 1; }
.equipment-corner-actions svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="light"] .equipment-corner-actions > button { border-color: #c8ced8; background: #fff; color: #252a32; box-shadow: 0 8px 22px rgba(40,48,60,.12); }
:root[data-theme="light"] .equipment-corner-actions > button:hover { background: #eef1f5; }
.equipment-primary, .equipment-secondary, .equipment-link { min-height: 42px; border-radius: 8px; padding: 0 15px; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.equipment-danger { min-height: 40px; padding: 0 14px; border: 1px solid #8d3343; border-radius: 8px; background: #542631; color: #ffdce2; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; }
.equipment-danger:hover { background: #6a2c39; }
.equipment-danger:disabled { cursor: wait; opacity: .6; }
.equipment-primary { border: 1px solid #6975ff; background: #5865f2; color: #fff; }
.equipment-primary:hover { background: #6975ff; }
.equipment-primary b { margin-right: 5px; font-size: 18px; line-height: 0; }
.equipment-primary:disabled, .equipment-secondary:disabled { cursor: wait; opacity: .6; }
.equipment-secondary { border: 1px solid var(--line); background: var(--card); color: var(--text); }
.equipment-secondary:hover { border-color: #6975ff; }
.equipment-link { min-height: 32px; padding: 0; border: 0; background: transparent; color: #9ca5ff; }
.equipment-area-tabs { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 20px; padding-bottom: 3px; }
.equipment-area-tabs button { flex: 0 0 auto; min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.equipment-area-tabs button span { margin-left: 6px; opacity: .65; }
.equipment-area-tabs button.active { border-color: #6975ff; background: rgba(88,101,242,.18); color: var(--text); }
.equipment-view-tabs { display: flex; gap: 7px; margin: -8px 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.equipment-view-tabs button { min-height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 850; }
.equipment-view-tabs button span { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 5px; padding: 0 5px; border-radius: 999px; background: var(--card); font-size: 9px; }
.equipment-view-tabs button.active { border-color: #6975ff; color: var(--text); }
.equipment-ticket-workspace { padding-bottom: 76px; }
.equipment-ticket-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.equipment-ticket-panel > header { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.equipment-ticket-panel > header h3 { margin: 0; font-size: 20px; }
.equipment-ticket-panel > header p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.equipment-ticket-panel > header label { display: grid; gap: 5px; min-width: 150px; }
.equipment-ticket-panel > header label span, .equipment-ticket-submit form label > span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.equipment-ticket-panel select, .equipment-ticket-panel input, .equipment-ticket-panel textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; }
.equipment-ticket-panel select, .equipment-ticket-panel input { min-height: 40px; padding: 0 10px; }
.equipment-ticket-panel textarea { min-height: 120px; padding: 10px; resize: vertical; }
.equipment-ticket-list { display: grid; }
.equipment-ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.equipment-ticket:last-child { border-bottom: 0; }
.equipment-ticket.resolved { opacity: .68; }
.equipment-ticket-main h4 { margin: 5px 0 4px; font-size: 15px; }
.equipment-ticket-main p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.equipment-ticket-status { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: 7px; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.equipment-ticket-status.open { background: #8b6814; color: #fff1b3; }
.equipment-ticket-status.resolved { background: #237247; color: #d8ffea; }
.equipment-ticket-meta { display: grid; justify-items: end; align-content: start; gap: 4px; min-width: 170px; color: var(--muted); font-size: 9px; }
.equipment-ticket-meta strong { color: var(--text); font-size: 11px; }
.equipment-ticket-meta button { min-height: 34px; margin-top: 6px; }
.equipment-ticket-empty { display: grid; justify-items: center; gap: 5px; padding: 50px 20px; text-align: center; }
.equipment-ticket-empty h3, .equipment-ticket-empty p { margin: 0; }
.equipment-ticket-empty p { color: var(--muted); font-size: 11px; }
.equipment-ticket-submit { width: min(680px, 100%); }
.equipment-ticket-submit form { display: grid; gap: 15px; padding: 20px; }
.equipment-ticket-submit form label { display: grid; gap: 6px; }
.equipment-ticket-submit form > button { justify-self: end; min-width: 130px; }
.equipment-ticket-columns { display: grid; grid-template-columns: 1fr 1fr; min-height: 280px; }
.equipment-ticket-column + .equipment-ticket-column { border-left: 1px solid var(--line); }
.equipment-ticket-column > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 92%, var(--bg)); }
.equipment-ticket-column > header h3 { margin: 0; font-size: 13px; }
.equipment-ticket-column > header span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--bg); color: var(--muted); font-size: 9px; font-weight: 900; }
.equipment-ticket-column > div { display: grid; align-content: start; }
.equipment-ticket-row { display: grid; gap: 4px; min-width: 0; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; text-align: left; }
.equipment-ticket-row:hover { background: color-mix(in srgb, var(--card) 88%, #5865f2); }
.equipment-ticket-row.resolved { opacity: .66; }
.equipment-ticket-row > strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.equipment-ticket-row > p { margin: 0; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.equipment-ticket-row > footer { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 8px; }
.equipment-ticket-column-empty { padding: 36px 14px; color: var(--muted); font-size: 10px; text-align: center; }
.equipment-ticket-detail { display: grid; gap: 10px; padding: 20px; }
.equipment-ticket-detail > .equipment-ticket-status { justify-self: start; }
.equipment-ticket-detail h3 { margin: 6px 0 0; font-size: 12px; text-transform: uppercase; }
.equipment-ticket-detail > p { margin: 0; color: var(--muted); line-height: 1.55; white-space: pre-wrap; }
.equipment-ticket-detail dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 8px 0 0; border: 1px solid var(--line); border-radius: 8px; }
.equipment-ticket-detail dl div { padding: 12px; border-right: 1px solid var(--line); }
.equipment-ticket-detail dl div:last-child { border-right: 0; }
.equipment-ticket-detail dt { color: var(--muted); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.equipment-ticket-detail dd { margin: 4px 0 0; font-size: 11px; font-weight: 750; }
.equipment-ticket-detail-actions .equipment-danger { margin-left: auto; }
.equipment-groups { display: grid; gap: 18px; }
.equipment-group { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 16px 36px rgba(0,0,0,.12); }
.equipment-group > header { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.equipment-group-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: rgba(88,101,242,.17); color: #b9c0ff; font-size: 20px; }
.equipment-group-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.equipment-group header span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.equipment-group header h3 { margin: 2px 0 0; font-size: 18px; }
.equipment-group header > strong { padding: 6px 9px; border-radius: 999px; background: #272a31; color: var(--muted); font-size: 11px; }

/* Form Hub */
.tool-workspace-screen[data-tool="form-hub"] .tool-workspace-header{display:none}.tool-workspace-screen[data-tool="form-hub"] .tool-workspace-canvas{overflow:hidden;padding:0}.form-hub-app{position:relative;display:grid;grid-template-columns:276px minmax(0,1fr);height:100%;min-height:0;background:var(--bg);color:var(--text)}.form-hub-sidebar{position:relative;display:flex;flex-direction:column;min-height:0;padding:17px 13px 72px;border-right:1px solid var(--line);background:var(--card)}.form-hub-sidebar>header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 3px 15px}.form-hub-sidebar>header>div{display:flex;align-items:center;gap:10px}.form-hub-sidebar>header>div>i{width:25px;height:25px;color:#75b4de}.form-hub-sidebar>header strong,.form-hub-sidebar>header small{display:block}.form-hub-sidebar>header strong{font-size:16px}.form-hub-sidebar>header small{margin-top:1px;color:var(--muted);font-size:10px}.form-hub-sidebar>header>button{display:flex;align-items:center;gap:5px;padding:8px 10px;border:0;border-radius:8px;background:#287fc0;color:#fff;font:inherit;font-size:12px;font-weight:800;cursor:pointer}.form-hub-sidebar>header>button i{width:15px}.form-library-search{display:flex;align-items:center;gap:7px;margin-bottom:14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}.form-library-search i{width:15px;color:var(--muted)}.form-library-search input{width:100%;border:0;background:transparent;color:var(--text);font:inherit;font-size:12px;outline:0}.form-sidebar-label{display:flex;align-items:center;justify-content:space-between;padding:9px 8px 5px;color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.form-sidebar-label button{display:grid;place-items:center;width:25px;height:25px;border:0;background:transparent;color:var(--muted);cursor:pointer}.form-sidebar-label button i{width:15px}.form-folder-list{display:grid;gap:2px}.form-folder-list>button,.form-folder-row>button:first-child{display:grid;grid-template-columns:17px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;padding:8px;border:0;border-radius:7px;background:transparent;color:var(--muted);font:inherit;font-size:11px;text-align:left;cursor:pointer}.form-folder-list button.active{background:#3d91df20;color:#7ebdec}.form-folder-list i{width:15px}.form-folder-list b{font-size:9px}.form-folder-row{display:grid;grid-template-columns:minmax(0,1fr) 25px}.form-folder-row>button:last-child{border:0;background:transparent;color:var(--muted);cursor:pointer}.form-library-list{min-height:0;overflow:auto;display:grid;align-content:start;gap:5px;padding:3px}.form-library-item{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;width:100%;padding:9px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}.form-library-item:hover{background:var(--bg)}.form-library-item.active{border-color:#3d91df55;background:#3d91df16}.form-library-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:8px;background:#3d91df22;color:#72b7e8}.form-library-icon i{width:17px}.form-library-item strong,.form-library-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.form-library-item strong{font-size:11px}.form-library-item small{margin-top:3px;color:var(--muted);font-size:8px}.form-library-empty{padding:18px 8px;color:var(--muted);font-size:11px;text-align:center}.form-tools-button{position:absolute;bottom:15px;left:15px;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--text);font:inherit;font-size:11px;font-weight:800;cursor:pointer}.form-hub-main{min-width:0;min-height:0;display:flex;flex-direction:column}.form-hub-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) auto minmax(250px,1fr);align-items:center;gap:16px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--card)}.form-hub-toolbar>div:first-child span{display:block;color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.form-hub-toolbar>div:first-child span.dirty{color:#e8a542}.form-hub-toolbar h1{max-width:320px;margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.form-hub-toolbar nav{display:flex;padding:3px;border-radius:8px;background:var(--bg)}.form-hub-toolbar nav button{padding:7px 11px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:inherit;font-size:10px;font-weight:800;cursor:pointer}.form-hub-toolbar nav button.active{background:var(--card);color:var(--text);box-shadow:0 2px 7px #0002}.form-hub-toolbar nav b{margin-left:4px;color:#72b7e8}.form-hub-toolbar>div:last-child{display:flex;justify-content:flex-end;gap:7px}.form-hub-toolbar>div:last-child button,.form-responses-panel>header button{display:flex;align-items:center;gap:5px;padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;font-size:10px;font-weight:800;cursor:pointer}.form-hub-toolbar button.primary{border-color:#287fc0!important;background:#287fc0!important;color:white!important}.form-hub-toolbar button:disabled{opacity:.38;cursor:default}.form-hub-toolbar i,.form-responses-panel>header button i{width:14px}.form-hub-content{min-height:0;overflow:auto;padding:20px}.form-builder{width:min(840px,100%);margin:0 auto}.form-builder-title,.form-builder-section{border:1px solid var(--line);border-radius:11px;background:var(--card);box-shadow:0 9px 24px #0002}.form-builder-title{padding:20px;margin-bottom:14px;border-top:4px solid #3d91df}.form-builder-title input,.form-builder-title textarea,.form-builder-section input,.form-builder-section textarea,.form-builder-section select,.form-settings-panel input,.form-settings-panel textarea,.form-settings-panel select,.form-hub-modal input,.form-hub-modal select{border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;outline:0}.form-builder-title input{width:100%;padding:5px 0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font-size:23px;font-weight:800}.form-builder-title textarea{width:100%;margin-top:9px;padding:8px 0;border:0;background:transparent;resize:vertical}.form-builder-sections{display:grid;gap:14px}.form-builder-section{position:relative;padding:18px}.form-section-drag,.form-question-drag{position:absolute;top:4px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:14px;cursor:grab}.form-builder-section>header{display:flex;justify-content:space-between;gap:18px;padding:5px 0 13px;border-bottom:1px solid var(--line)}.form-builder-section>header>div:first-child{flex:1}.form-builder-section>header input{width:100%;padding:7px 9px;font-size:16px;font-weight:800}.form-builder-section>header textarea{width:100%;margin-top:6px;padding:7px 9px;resize:vertical}.form-builder-section>header>div:last-child{display:flex;align-items:flex-start;gap:4px}.form-builder-section>header>div:last-child>span{padding:7px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.form-builder-section button{font-family:inherit}.form-builder-section>header button,.form-question-card footer>button{display:grid;place-items:center;width:31px;height:31px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}.form-builder-section button i{width:15px}.form-builder-section button.danger.confirming,.form-question-card button.danger.confirming{background:#8a2f38;color:#fff}.form-condition-editor,.form-condition-note{margin:12px 0;padding:10px 12px;border:1px solid #b075252f;border-radius:8px;background:#b0752510;color:var(--muted);font-size:10px}.form-condition-note{display:flex;align-items:center;gap:8px}.form-condition-note i{width:16px}.form-switch{display:flex;align-items:center;gap:8px;font-weight:750}.form-switch input,.form-required-toggle input,.form-setting-toggle input{position:absolute;opacity:0}.form-switch>span,.form-required-toggle>span,.form-setting-toggle>i{position:relative;width:30px;height:17px;border-radius:99px;background:#4a4f59}.form-switch>span:after,.form-required-toggle>span:after,.form-setting-toggle>i:after{content:"";position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:white;transition:.16s}.form-switch input:checked+span,.form-required-toggle input:checked+span,.form-setting-toggle input:checked+i{background:#328dca}.form-switch input:checked+span:after,.form-required-toggle input:checked+span:after,.form-setting-toggle input:checked+i:after{transform:translateX(13px)}.form-condition-editor>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.form-condition-editor label span{display:block;margin-bottom:4px}.form-condition-editor select{width:100%;padding:7px}.form-question-list{display:grid;gap:9px;padding-top:12px}.form-question-card{position:relative;padding:18px 13px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}.form-question-head{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:9px}.form-question-head input,.form-question-head select,.form-question-card>textarea{width:100%;padding:9px 10px}.form-question-head input{font-weight:750}.form-question-card>textarea{margin-top:7px;resize:vertical}.form-option-list{display:grid;gap:5px;margin:10px 0}.form-option-list>div{display:grid;grid-template-columns:20px minmax(0,1fr) 28px;align-items:center}.form-option-list input{width:100%;padding:7px 8px}.form-option-list button{border:0;background:transparent;color:var(--muted);cursor:pointer}.form-add-option{justify-self:start;padding:5px 8px;border:0;background:transparent;color:#72b7e8;cursor:pointer}.form-scale-settings{display:flex;gap:12px;padding:10px 0}.form-scale-settings select{padding:6px}.form-question-card footer{display:flex;justify-content:flex-end;align-items:center;gap:3px;margin-top:7px;padding-top:8px;border-top:1px solid var(--line)}.form-required-toggle{display:flex;align-items:center;gap:7px;margin-left:7px;color:var(--muted);font-size:10px;font-weight:750}.form-add-question{display:flex;justify-content:flex-end;gap:7px;margin-top:11px}.form-add-question select,.form-add-question button,.form-add-section{padding:8px 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;font-size:10px;font-weight:750}.form-add-question button,.form-add-section{display:flex;align-items:center;gap:5px;cursor:pointer}.form-add-section{margin:14px auto}.form-add-section i{width:15px}.form-responses-panel,.form-settings-panel{width:min(920px,100%);margin:0 auto;padding:20px;border:1px solid var(--line);border-radius:11px;background:var(--card)}.form-responses-panel>header{display:flex;justify-content:space-between;align-items:center}.form-responses-panel h2,.form-settings-panel h2{margin:0;font-size:19px}.form-responses-panel header p{margin:4px 0;color:var(--muted);font-size:11px}.form-response-list{display:grid;gap:7px;margin-top:16px}.form-response-list details{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.form-response-list summary{display:flex;justify-content:space-between;align-items:center;padding:12px;cursor:pointer;list-style:none}.form-response-list summary strong,.form-response-list summary small{display:block}.form-response-list summary small{margin-top:3px;color:var(--muted);font-size:9px}.form-response-list summary i{width:17px}.form-response-list details>div{padding:0 12px 12px;border-top:1px solid var(--line)}.form-response-list dl{margin:12px 0}.form-response-list dt{color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.form-response-list dd{margin:3px 0;font-size:12px}.form-delete-response{padding:7px 9px;border:1px solid #943d47;border-radius:6px;background:transparent;color:#ee7885;cursor:pointer}.form-responses-empty,.form-hub-welcome{display:grid;place-items:center;align-content:center;text-align:center;color:var(--muted)}.form-responses-empty{min-height:300px}.form-responses-empty i,.form-hub-welcome>i{width:42px;height:42px}.form-responses-empty h3,.form-hub-welcome h2{margin:12px 0 3px;color:var(--text)}.form-responses-empty p,.form-hub-welcome p{max-width:430px;margin:0}.form-hub-welcome button{margin-top:16px;padding:10px 15px;border:0;border-radius:8px;background:#287fc0;color:#fff;font-weight:800;cursor:pointer}.form-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.form-settings-grid label>span,.form-public-link>span{display:block;margin-bottom:6px;color:var(--muted);font-size:10px;font-weight:800}.form-settings-grid label:not(.form-setting-toggle) input,.form-settings-grid label textarea,.form-settings-grid label select{width:100%;padding:10px}.form-settings-grid .wide{grid-column:1/-1}.form-setting-toggle{display:flex;justify-content:space-between;align-items:center;padding:11px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}.form-setting-toggle strong,.form-setting-toggle small{display:block}.form-setting-toggle small{margin-top:3px;color:var(--muted)}.form-public-link>div{display:flex;gap:7px}.form-public-link input{flex:1;padding:10px}.form-public-link button,.form-settings-actions button{padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font-weight:750;cursor:pointer}.form-unpublished-note{display:flex;align-items:center;gap:8px;padding:12px;border-radius:8px;background:#a8740018;color:#d2a43d}.form-unpublished-note i{width:17px}.form-settings-actions{display:flex;justify-content:flex-end;gap:8px}.form-settings-actions button{display:flex;align-items:center;gap:6px}.form-settings-actions button i{width:15px}.form-settings-actions button.danger{border-color:#843a44;color:#e37682}.form-hub-modal-wrap{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:20px;background:#0009;backdrop-filter:blur(4px)}.form-hub-modal{width:min(440px,100%);padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--card);box-shadow:0 25px 80px #0008}.form-hub-modal>header{display:flex;justify-content:space-between;align-items:center}.form-hub-modal h2{margin:0;font-size:18px}.form-hub-modal>header button{border:0;background:transparent;color:var(--text);font-size:22px;cursor:pointer}.form-hub-modal form{display:grid;gap:12px;margin-top:17px}.form-hub-modal label span{display:block;margin-bottom:5px;color:var(--muted);font-size:10px;font-weight:800}.form-hub-modal input,.form-hub-modal select{width:100%;padding:10px}.form-hub-modal footer{display:flex;justify-content:flex-end;gap:7px}.form-hub-modal footer button{padding:9px 12px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font-weight:750;cursor:pointer}.form-hub-modal footer button.primary{border-color:#287fc0;background:#287fc0;color:#fff}.form-hub-modal footer button.danger{margin-right:auto;color:#e37682}.form-hub-toast{position:absolute;right:18px;bottom:18px;z-index:30;padding:10px 14px;border-radius:8px;background:#1d8b64;color:white;font-size:11px;font-weight:800;box-shadow:0 10px 30px #0005}.form-hub-toast.error{background:#9c3945}
@media(max-width:900px){.form-hub-app{grid-template-columns:220px minmax(0,1fr)}.form-hub-toolbar{grid-template-columns:1fr auto}.form-hub-toolbar nav{order:3;grid-column:1/-1;justify-self:center}.form-question-head{grid-template-columns:1fr}.form-hub-toolbar>div:last-child button:first-child{display:none}}@media(max-width:680px){.form-hub-app{display:block;overflow:auto}.form-hub-sidebar{min-height:auto;padding-bottom:12px;border-right:0;border-bottom:1px solid var(--line)}.form-folder-list{grid-template-columns:repeat(2,minmax(0,1fr))}.form-library-list{max-height:190px}.form-tools-button{position:static;align-self:flex-start;margin-top:10px}.form-hub-main{min-height:calc(100vh - 350px)}.form-hub-toolbar{position:sticky;top:0;z-index:8;grid-template-columns:1fr;padding:10px}.form-hub-toolbar nav{order:2;grid-column:auto;width:100%}.form-hub-toolbar nav button{flex:1}.form-hub-toolbar>div:last-child{order:3;justify-content:stretch}.form-hub-toolbar>div:last-child button{flex:1;justify-content:center}.form-hub-content{padding:10px}.form-builder-section{padding:14px 10px}.form-settings-grid{grid-template-columns:1fr}.form-settings-grid .wide{grid-column:auto}}
.equipment-unit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(195px, 1fr)); gap: 8px; padding: 10px; }
.equipment-unit-card { position: relative; display: grid; gap: 2px; min-height: 142px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--card) 90%, var(--bg)); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.equipment-unit-card:hover { border-color: #6975ff; }
.equipment-unit-card.maintenance-required { border-color: #d2a72d; background: color-mix(in srgb, var(--card) 86%, #d2a72d); box-shadow: inset 0 0 0 1px rgba(238,190,48,.14); }
.equipment-unit-status { position: absolute; top: 9px; right: 9px; padding: 3px 6px; border-radius: 999px; font-size: 7px; font-weight: 950; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.equipment-unit-status.working { background: #237247; color: #d8ffea; box-shadow: 0 0 0 2px rgba(67,181,129,.11); }
.equipment-unit-status.broken { background: #8d2f40; color: #ffe1e6; box-shadow: 0 0 0 2px rgba(226,61,85,.12); }
.equipment-unit-status.maintenance-required { background: #b78916; color: #fff7d0; box-shadow: 0 0 0 2px rgba(238,190,48,.15); }
.equipment-unit-card > strong { padding-right: 58px; overflow: hidden; font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.equipment-unit-card.maintenance-required > strong { margin-top: 18px; padding-right: 0; }
.equipment-unit-card > small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.equipment-unit-card > span:not(.equipment-unit-status) { color: #9ca5ff; font-size: 11px; font-weight: 800; }
.equipment-maintenance-due { display: grid; gap: 1px; margin-top: 4px; color: var(--muted); }
.equipment-maintenance-due small { font-size: 8px; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.equipment-maintenance-due strong { font-size: 10px; font-weight: 850; }
.equipment-maintenance-due.required { color: #f0c84b; }
.equipment-unit-card footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-width: 0; margin-top: auto; padding-top: 7px; overflow: hidden; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; white-space: nowrap; }
.equipment-unit-card footer b { color: #aeb7ff; font-size: 20px; line-height: .8; }
.equipment-empty { display: grid; justify-items: center; padding: 64px 20px; border: 1px dashed var(--line); border-radius: 12px; background: var(--card); text-align: center; }
.equipment-empty > div { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 14px; background: rgba(88,101,242,.16); color: #b9c0ff; font-size: 28px; }
.equipment-empty h3 { margin: 16px 0 6px; font-size: 22px; }
.equipment-empty p { max-width: 520px; margin: 0 0 20px; color: var(--muted); }
.equipment-modal-overlay { position: fixed; inset: 0; z-index: 12000000; display: grid; place-items: center; padding: 20px; background: rgba(4,5,8,.76); }
.admin-preview-active .equipment-modal-overlay { top: 48px; }
.equipment-modal { width: min(720px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); box-shadow: 0 28px 90px rgba(0,0,0,.5); }
.admin-preview-active .equipment-modal { max-height: calc(100dvh - 88px); }
.equipment-modal-header { display: flex; justify-content: space-between; gap: 16px; padding: 20px; border-bottom: 1px solid var(--line); }
.equipment-modal-header h2 { margin: 3px 0 0; font-size: 25px; letter-spacing: -.03em; }
.equipment-modal-header p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.equipment-modal-header > button { position: relative; align-self: start; width: 36px; height: 36px; border: 0; border-radius: 7px; background: #292c33; color: transparent; font: inherit; font-size: 0; cursor: pointer; }
.equipment-modal-header > button::before, .equipment-modal-header > button::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; border-radius: 2px; background: var(--text); transform: translate(-50%, -50%) rotate(45deg); }
.equipment-modal-header > button::after { transform: translate(-50%, -50%) rotate(-45deg); }
.equipment-form { display: grid; gap: 16px; padding: 20px; }
.equipment-modal:has(.equipment-wizard-form) { width: min(620px, 100%); }
.equipment-wizard-header { padding-bottom: 16px; }
.equipment-wizard-header p { max-width: 430px; }
.equipment-wizard-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 20px; transform: translateY(-4px); }
.equipment-wizard-progress i { height: 3px; border-radius: 999px; background: var(--line); transition: background .18s ease; }
.equipment-wizard-progress i.active { background: #6975ff; }
.equipment-wizard-form { min-height: 390px; grid-template-rows: 1fr auto auto; padding-top: 14px; }
.equipment-wizard-step[hidden], #equipment-single-fields[hidden], #equipment-multiple-fields[hidden] { display: none !important; }
.equipment-wizard-step { align-self: start; }
.equipment-choice-list { display: grid; gap: 8px; }
.equipment-choice-list label { position: relative; display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 12px; min-height: 66px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: color-mix(in srgb, var(--card) 92%, var(--bg)); color: var(--text); cursor: pointer; }
.equipment-choice-list label:hover { border-color: #6975ff; }
.equipment-choice-list label:has(input:checked) { border-color: #6975ff; background: rgba(88,101,242,.14); }
.equipment-choice-list input, .equipment-mode-choices input { position: absolute; opacity: 0; pointer-events: none; }
.equipment-choice-list span { display: grid; gap: 3px; }
.equipment-choice-list b { font-size: 14px; }
.equipment-choice-list small { color: var(--muted); font-size: 10px; font-weight: 650; }
.equipment-choice-list i, .equipment-mode-choices > label > i { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; color: transparent; font-style: normal; font-size: 11px; }
.equipment-choice-list label:has(input:checked) i, .equipment-mode-choices label:has(input:checked) > i { border-color: #6975ff; background: #5865f2; color: #fff; }
.equipment-wizard-fields { display: grid; gap: 16px; }
.equipment-wizard-fields > [hidden] { display: none !important; }
.equipment-wizard-fields-two { grid-template-columns: 110px 1fr; }
.equipment-wizard-fields-two label:last-child { grid-column: 1 / -1; }
.equipment-wizard-fields label > span > small { margin-left: 4px; color: var(--muted); font-size: 9px; font-weight: 650; }
.equipment-mode-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.equipment-mode-choices > label { position: relative; display: grid; justify-items: start; align-content: start; min-height: 190px; padding: 18px; border: 1px solid var(--line); border-radius: 11px; background: color-mix(in srgb, var(--card) 92%, var(--bg)); color: var(--text); cursor: pointer; }
.equipment-mode-choices > label:hover, .equipment-mode-choices > label:has(input:checked) { border-color: #6975ff; }
.equipment-mode-choices > label:has(input:checked) { background: rgba(88,101,242,.14); }
.equipment-mode-choices > label > i { position: absolute; top: 14px; right: 14px; }
.equipment-mode-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 20px; border-radius: 12px; background: rgba(88,101,242,.18); color: #bfc5ff; font-size: 18px; font-weight: 950; }
.equipment-mode-choices strong { font-size: 15px; }
.equipment-mode-choices small { margin-top: 7px; color: var(--muted); font-size: 10px; font-weight: 650; line-height: 1.45; }
.equipment-wizard-actions { align-self: end; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--line); }
.equipment-wizard-actions > div { display: flex; gap: 8px; }
.equipment-wizard-actions button[hidden] { display: none !important; }
.equipment-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.equipment-form label, .equipment-template-toolbar label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.equipment-form input, .equipment-form select, .equipment-form textarea, .equipment-template-toolbar select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; }
.equipment-form textarea { resize: vertical; }
.equipment-naming { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 0; border: 0; }
.equipment-naming legend { margin-bottom: 7px; color: var(--muted); font-size: 11px; font-weight: 800; }
.equipment-naming label { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); }
.equipment-naming label:has(input:checked) { border-color: #6975ff; background: rgba(88,101,242,.14); }
.equipment-naming input { min-height: 0; accent-color: #6975ff; }
.equipment-naming small { grid-column: 2; color: var(--muted); font-size: 9px; }
.equipment-custom-names { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.equipment-custom-names[hidden] { display: none !important; }
.equipment-area-add-choice { width: 100%; display: grid; grid-template-columns: 1fr 24px; align-items: center; gap: 12px; min-height: 66px; max-height: 66px; margin-top: 8px; padding: 12px 14px; overflow: hidden; border: 1px dashed #59617b; border-radius: 9px; background: transparent; color: var(--text); text-align: left; opacity: 1; transition: min-height .2s ease, max-height .2s ease, margin .2s ease, padding .2s ease, opacity .14s ease, border-width .2s ease; }
.equipment-area-add-choice span { display: grid; gap: 3px; }
.equipment-area-add-choice b { font-size: 14px; }
.equipment-area-add-choice small { color: var(--muted); font-size: 10px; font-weight: 650; }
.equipment-area-add-choice i { position: relative; display: block; width: 22px; height: 22px; border: 1px solid #6975ff; border-radius: 50%; color: transparent; font-style: normal; font-size: 0; }
.equipment-area-add-choice i::before, .equipment-area-add-choice i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.5px; border-radius: 2px; background: #bfc5ff; transform: translate(-50%, -50%); }
.equipment-area-add-choice i::after { transform: translate(-50%, -50%) rotate(90deg); }
.equipment-area-add-choice:hover { border-color: #6975ff; background: rgba(88,101,242,.10); }
.equipment-area-add-choice.active { min-height: 0; max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; opacity: 0; pointer-events: none; }
.equipment-inline-area { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .22s ease, opacity .18s ease; }
.equipment-inline-area.open { grid-template-rows: 1fr; opacity: 1; }
.equipment-inline-area > div { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr auto auto; gap: 8px; }
.equipment-inline-area.open > div { padding-top: 8px; }
.equipment-form-error { margin: 0; padding: 10px 12px; border-radius: 7px; background: rgba(229,22,54,.15); color: #ffb7c2; font-size: 12px; }
.equipment-modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.equipment-template-toolbar { padding: 16px 20px 0; }
.equipment-task-row { display: grid; grid-template-columns: 1fr 120px 36px; gap: 8px; margin-bottom: 8px; }
.equipment-task-row label { position: relative; }
.equipment-task-row label span { position: absolute; right: 10px; top: 14px; }
.equipment-task-row .task-days { padding-right: 42px; }
.equipment-task-row button { border: 1px solid var(--line); border-radius: 7px; background: var(--bg); color: var(--muted); font: inherit; font-size: 19px; cursor: pointer; }
.equipment-manual-field { margin-top: 5px; }
.equipment-device-overview { border-bottom: 1px solid var(--line); }
.equipment-device-overview > h3 { margin: 0; padding: 18px 20px 0; font-size: 15px; }
.equipment-device-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.equipment-device-summary > div { display: grid; gap: 5px; padding: 15px 20px; border-right: 1px solid var(--line); }
.equipment-device-summary > div:last-child { border: 0; }
.equipment-device-summary span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.equipment-device-summary strong { font-size: 12px; }
.equipment-device-summary a { color: #9ca5ff; }
.equipment-device-summary .equipment-due-required { background: rgba(210,167,45,.12); }
.equipment-device-summary .equipment-due-required span, .equipment-device-summary .equipment-due-required strong { color: #f0c84b; }
.equipment-status-toggle { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; }
.equipment-status-toggle button { min-height: 31px; border: 0; background: var(--bg); color: var(--muted); font: inherit; font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.equipment-status-toggle button + button { border-left: 1px solid var(--line); }
.equipment-status-toggle .working.active { background: #237247; color: #d8ffea; }
.equipment-status-toggle .broken.active { background: #8d2f40; color: #ffe1e6; }
.equipment-status-toggle button:disabled { cursor: wait; opacity: .65; }
.equipment-record-form { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.equipment-record-form[hidden] { display: none !important; }
.equipment-no-tasks { padding: 18px 20px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 94%, var(--bg)); }
.equipment-no-tasks strong { font-size: 13px; }
.equipment-no-tasks p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.equipment-record-form h3, .equipment-history h3 { margin: 0; font-size: 15px; }
.equipment-record-form > .equipment-primary { justify-self: end; }
.equipment-history { padding: 20px; }
.equipment-history > p { color: var(--muted); font-size: 12px; }
.equipment-history article { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.equipment-history article > span { font-weight: 800; }
.equipment-history article > strong, .equipment-history article time { color: var(--muted); font-size: 11px; }
.equipment-history article time { grid-column: 1; }
.equipment-history article p { grid-column: 1 / -1; margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.equipment-device-error { margin: 0 20px 12px; }
.equipment-device-actions { display: flex; align-items: center; gap: 8px; padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.equipment-device-actions .equipment-danger { margin-left: auto; }
.equipment-delete-confirm { padding: 20px 20px 4px; color: var(--muted); line-height: 1.55; }
.equipment-delete-confirm p { margin: 0 0 12px; }
.equipment-confirm-actions { padding: 12px 20px 20px; }
.equipment-settings-shell { display: grid; grid-template-columns: 190px minmax(0,1fr); min-height: 430px; }
.equipment-settings-nav { display: grid; align-content: start; gap: 5px; padding: 16px 12px; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--card) 92%, var(--bg)); }
.equipment-settings-nav button { min-height: 42px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 800; text-align: left; }
.equipment-settings-nav button.active { background: rgba(88,101,242,.18); color: var(--text); }
.equipment-settings-content { min-width: 0; padding: 22px; }
.equipment-settings-section > header h3 { margin: 0; font-size: 20px; }
.equipment-settings-section > header p { margin: 5px 0 20px; color: var(--muted); font-size: 12px; }
.equipment-area-manager { display: grid; gap: 9px; }
.equipment-area-manager-row { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 8px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.equipment-area-manager-row > div { display: grid; gap: 4px; }
.equipment-area-manager-row input { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); font: inherit; }
.equipment-area-manager-row small { color: var(--muted); font-size: 10px; }
.equipment-settings-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); }
.equipment-settings-card strong { display: block; margin-top: 3px; }
.equipment-settings-card span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.equipment-settings-card p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.equipment-settings-host .equipment-modal { width: min(920px, 100%); height: min(700px, 100%); max-height: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; box-shadow: none; }
.equipment-settings-host .settings-shell { width: 100%; height: 100%; }
.equipment-settings-nav::before { content: "APP SETTINGS"; }
.equipment-settings-nav button[data-equipment-settings-tab="areas"]::before { content: "▦"; }
.equipment-settings-nav button[data-equipment-settings-tab="tasks"]::before { content: "⌁"; }
.equipment-settings-nav button[data-equipment-settings-tab="appearance"]::before { content: "◐"; }
.equipment-settings-nav button[data-equipment-settings-tab="account"]::before { content: "●"; }
@media (max-width: 700px) {
  .equipment-app { width: min(100% - 20px, 1180px); padding-top: 16px; }
  .equipment-app-header { align-items: stretch; flex-direction: column; }
  .equipment-header-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .equipment-form-grid, .equipment-custom-names, .equipment-device-summary { grid-template-columns: 1fr; }
  .equipment-device-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .equipment-device-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .equipment-device-actions .equipment-danger { margin-left: 0; }
  .equipment-settings-shell { grid-template-columns: 1fr; }
  .equipment-settings-nav { grid-template-columns: repeat(3, 1fr); border-right: 0; border-bottom: 1px solid var(--line); }
  .equipment-settings-nav button { padding: 0 6px; text-align: center; }
  .equipment-settings-content { padding: 16px; }
  .equipment-area-manager-row { grid-template-columns: 1fr 1fr; }
  .equipment-area-manager-row > div { grid-column: 1 / -1; }
  .equipment-settings-card { align-items: stretch; flex-direction: column; }
  .equipment-corner-actions { grid-template-columns: 108px 50px 50px; }
  .equipment-tools-home-btn { min-width: 50px; width: 50px; padding: 0; border-radius: 50%; }
  .equipment-tools-home-btn > span:last-child { display: none; }
  .equipment-settings-host .equipment-modal { width: 100%; height: 100%; }
  .equipment-naming { grid-template-columns: 1fr; }
  .equipment-mode-choices { grid-template-columns: 1fr; }
  .equipment-mode-choices > label { min-height: 128px; }
  .equipment-wizard-fields-two { grid-template-columns: 1fr; }
  .equipment-wizard-fields-two label:last-child { grid-column: auto; }
  .equipment-inline-area > div { grid-template-columns: 1fr 1fr; }
  .equipment-inline-area > div input { grid-column: 1 / -1; }
  .equipment-wizard-form { min-height: 430px; }
  .equipment-modal-overlay { padding: 8px; }
  .equipment-modal { max-height: calc(100dvh - 16px); }
  .equipment-view-tabs { overflow-x: auto; }
  .equipment-view-tabs button { flex: 0 0 auto; }
  .equipment-ticket-panel > header { align-items: stretch; flex-direction: column; }
  .equipment-ticket { grid-template-columns: 1fr; }
  .equipment-ticket-meta { justify-items: start; min-width: 0; }
  .equipment-ticket-columns { grid-template-columns: 1fr; }
  .equipment-ticket-column + .equipment-ticket-column { border-top: 1px solid var(--line); border-left: 0; }
  .equipment-ticket-detail dl { grid-template-columns: 1fr; }
  .equipment-ticket-detail dl div { border-right: 0; border-bottom: 1px solid var(--line); }
  .equipment-ticket-detail dl div:last-child { border-bottom: 0; }
  .equipment-ticket-detail-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .equipment-ticket-detail-actions .equipment-danger { grid-column: 1 / -1; margin-left: 0; }
}

.onboarding-screen { position: fixed; inset: 0; z-index: 10000001; display: grid; place-items: start center; overflow-y: auto; padding: clamp(20px, 6vh, 54px) 18px; background: #111214; color: #f2f3f5; }
.onboarding-screen.hidden, .onboarding-step.hidden, .onboarding-results.hidden, .onboarding-error.hidden { display: none; }
.onboarding-card { width: min(560px, 100%); padding: 26px; border: 1px solid #3f4147; border-radius: 18px; background: #1e1f22; box-shadow: 0 26px 80px rgba(0,0,0,.45); }
.onboarding-progress { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; color: #949ba4; font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.onboarding-progress b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #5865f2; color: #fff; }
.onboarding-step h2 { margin: 0; font-size: clamp(25px, 6vw, 34px); letter-spacing: -.035em; }
.onboarding-step > p { margin: 8px 0 20px; color: #b5bac1; line-height: 1.45; }
.onboarding-field { position: relative; display: grid; gap: 7px; margin-bottom: 14px; color: #dbdee1; font-size: 13px; font-weight: 800; }
.onboarding-field input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #3f4147; border-radius: 8px; background: #111214; color: #f2f3f5; font: inherit; }
.onboarding-results { position: absolute; z-index: 3; top: 72px; left: 0; right: 0; overflow: hidden; border: 1px solid #464a54; border-radius: 9px; background: #232428; box-shadow: 0 14px 32px rgba(0,0,0,.35); }
.onboarding-results button { width: 100%; border: 0; border-bottom: 1px solid #36383e; background: transparent; color: #f2f3f5; cursor: pointer; padding: 11px 12px; text-align: left; }
.onboarding-results button:last-child { border-bottom: 0; }
.onboarding-results button:hover { background: #313338; }
.onboarding-primary { width: 100%; min-height: 46px; border: 0; border-radius: 8px; background: #5865f2; color: #fff; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 900; }
.onboarding-primary:disabled { background: #404249; color: #949ba4; cursor: not-allowed; }
.onboarding-options { display: grid; gap: 10px; }
.onboarding-options button { display: grid; gap: 4px; width: 100%; border: 1px solid #3f4147; border-radius: 10px; background: #2b2d31; color: #f2f3f5; cursor: pointer; padding: 14px; text-align: left; }
.onboarding-options button.restricted { position: relative; overflow: hidden; border-color: #4b3a3e; cursor: not-allowed; }
.onboarding-options button.restricted::before, .shift-source-option.restricted::before { content: ""; position: absolute; z-index: 1; inset: 0; background: rgba(25, 27, 31, .56); }
.onboarding-options button.restricted::after, .shift-source-option.restricted::after { content: "COMING SOON"; position: absolute; z-index: 2; top: 13px; right: -34px; width: 132px; padding: 5px 0; transform: rotate(36deg); background: #d7193f; color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.28); font-size: 9px; font-weight: 950; letter-spacing: .08em; text-align: center; }
.shift-source-option.restricted { position: relative; overflow: hidden; cursor: not-allowed; }
:root[data-theme="light"] .onboarding-options button.restricted::before, :root[data-theme="light"] .shift-source-option.restricted::before { background: rgba(226, 229, 234, .68); }
.shift-source-option.restricted input { pointer-events: none; }
.onboarding-options button:hover { border-color: #5865f2; background: rgba(88,101,242,.15); }
.onboarding-options strong { font-size: 15px; }
.onboarding-options span { color: #b5bac1; font-size: 12px; }
.onboarding-job-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; max-height: 290px; overflow-y: auto; margin: 0 0 16px; }
.onboarding-job-list label { display: flex; align-items: center; gap: 8px; border: 1px solid #3f4147; border-radius: 8px; background: #2b2d31; padding: 9px; font-size: 12px; font-weight: 800; }
.onboarding-job-list label:has(input:checked) { border-color: #5865f2; background: rgba(88,101,242,.18); }
.onboarding-file { display: grid; place-items: center; min-height: 130px; margin-bottom: 14px; border: 1px dashed #65708a; border-radius: 10px; cursor: pointer; text-align: center; }
.onboarding-file input { position: absolute; opacity: 0; pointer-events: none; }
.onboarding-file span { color: #949ba4; font-size: 11px; }
.onboarding-error { margin: 14px 0 0; padding: 10px 12px; border-radius: 7px; background: rgba(229,22,54,.16); color: #ff9aaa; font-size: 13px; font-weight: 750; }
:root[data-theme="light"] .onboarding-screen { background: #f3f5f8; color: #20242a; }
:root[data-theme="light"] .onboarding-card { border-color: #d4d8df; background: #fff; }
:root[data-theme="light"] .onboarding-field, :root[data-theme="light"] .onboarding-step h2 { color: #20242a; }
:root[data-theme="light"] .onboarding-field input, :root[data-theme="light"] .onboarding-results { border-color: #ccd1d8; background: #f7f8fa; color: #20242a; }
@media (max-width: 520px) { .onboarding-card { padding: 20px; } .onboarding-job-list { grid-template-columns: 1fr; } }

body.auth-required > #weather-row,
body.auth-required > #app,
body.auth-required > #tools-home-btn,
body.auth-required > #roster-open-btn,
body.auth-required > #add-member-open-btn,
body.auth-required > #undo-action-btn,
body.auth-required > #debug-open-btn {
  display: none !important;
}

#auth-first-store.hidden,
#auth-first-store .auth-field.hidden,
.auth-field.hidden,
.auth-step-hidden,
.auth-error.hidden {
  display: none !important;
}

.auth-card {
  width: min(520px, 100%);
  max-height: none;
  margin-top: clamp(22px, 7vh, 56px);
  overflow: visible;
  padding: 28px;
  border: 1px solid #3f4147;
  border-radius: 18px;
  background: #1e1f22;
  color: var(--text);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.45);
}

.auth-brand {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-bottom: 26px;
  text-align: center;
}

.auth-logo-placeholder {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1px solid #51545c;
  border-radius: 18px;
  background: linear-gradient(145deg, #343a58, #252732);
  color: #dce5ff;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}

.auth-eyebrow {
  color: #9ec3ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.6px;
}

.auth-brand h1 {
  margin: 0;
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1;
}

.auth-brand p,
.auth-note,
.auth-source-card p,
.auth-source-options small {
  color: #b5bac1;
  line-height: 1.4;
}

.auth-brand p {
  margin: -2px 0 0;
  font-size: 14px;
}

.auth-provider-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(320px, 100%);
  margin: 0 auto 28px;
  padding: 4px;
  border: 1px solid #3f4147;
  border-radius: 12px;
  background: #111214;
  isolation: isolate;
}

.auth-provider-row::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 8px;
  background: #5865f2;
  box-shadow: 0 5px 14px rgba(88, 101, 242, .28);
  transform: translateX(0);
  transition: transform 180ms ease;
}

.auth-provider-row[data-mode="register"]::before {
  transform: translateX(100%);
}

.auth-provider-btn,
.auth-submit,
.auth-source-options button {
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-weight: 900;
  cursor: pointer;
}

.auth-provider-btn {
  min-height: 44px;
  position: relative;
  background: transparent;
  color: #b5bac1;
  transition: color 180ms ease;
}

.auth-provider-btn.secondary {
  background: transparent;
  color: #b5bac1;
}

.auth-provider-btn.active {
  color: #fff;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: #949ba4;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #3f4147;
}

.auth-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: #dbdee1;
  font-size: 13px;
  font-weight: 800;
}

.auth-field input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid #3f4147;
  border-radius: 8px;
  background: #111214;
  color: #f2f3f5;
  font-size: 15px;
}

.auth-source-card {
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #3f4147;
  border-radius: 12px;
  background: #232428;
}

.auth-source-card strong {
  display: block;
  margin-bottom: 4px;
  color: #f2f3f5;
}

.auth-source-options {
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.auth-source-options button {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid #3f4147;
  background: #2b2d31;
  color: #f2f3f5;
  text-align: left;
}

.auth-source-options button.active {
  border-color: #5865f2;
  background: rgba(88, 101, 242, 0.18);
}

.auth-submit {
  width: 100%;
  min-height: 46px;
  background: #5865f2;
  color: #fff;
  font-size: 15px;
}

.auth-actions { display: flex; gap: 9px; }
.auth-actions .auth-submit { flex: 1; }

.auth-note {
  margin: 12px 0 0;
  font-size: 12px;
}

.auth-error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 7px;
  background: rgba(229, 22, 54, .16);
  color: #ff9aaa;
  font-size: 13px;
  font-weight: 750;
}

/* Invite (join-as-manager) page polish */
.invite-card { position: relative; overflow: hidden; }
.invite-card::before {
  content: "";
  position: absolute;
  top: -130px;
  left: 50%;
  width: 360px;
  height: 240px;
  background: radial-gradient(circle, rgba(88, 101, 242, .28), transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
}

.invite-store-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 12px 14px;
  border: 1px solid rgba(88, 101, 242, .35);
  border-radius: 12px;
  background: rgba(88, 101, 242, .12);
  color: #cdd3ff;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.invite-store-banner-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(88, 101, 242, .22);
  color: #9ec3ff;
}
.invite-store-banner-icon svg { width: 17px; height: 17px; }
.invite-store-banner.invite-store-banner-error {
  border-color: rgba(229, 22, 54, .4);
  background: rgba(229, 22, 54, .12);
  color: #ff9aaa;
}
.invite-store-banner.invite-store-banner-error .invite-store-banner-icon {
  background: rgba(229, 22, 54, .2);
  color: #ff9aaa;
}

.auth-field input {
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.auth-field input:focus {
  outline: none;
  border-color: #5865f2;
  box-shadow: 0 0 0 3px rgba(88, 101, 242, .22);
}
.auth-field input:disabled { opacity: .5; cursor: not-allowed; }

.auth-field-input-wrap { position: relative; }
.auth-field-input-wrap input { width: 100%; padding-right: 44px; box-sizing: border-box; }
.auth-field-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #8b90a0;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.auth-field-toggle:hover { color: #dbdee1; background: rgba(255, 255, 255, .06); }
.auth-field-toggle svg { width: 19px; height: 19px; }

.auth-field-msg {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: #8b90a0;
  transition: color .16s ease;
}
.auth-field-msg.is-error { color: #ff9aaa; }
.auth-field-msg.is-ok { color: #63c99e; }

.auth-submit {
  transition: transform .12s ease, box-shadow .16s ease, opacity .16s ease;
  box-shadow: 0 10px 26px rgba(88, 101, 242, .32);
}
.auth-submit:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.auth-submit:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(88, 101, 242, .4); }
.auth-submit:not(:disabled):active { transform: translateY(0); }

.invite-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #8b90a0;
}
.invite-privacy-note svg { flex: none; width: 15px; height: 15px; margin-top: 1px; color: #6b7280; }

:root[data-theme="light"] .invite-store-banner {
  border-color: rgba(88, 101, 242, .28);
  background: rgba(88, 101, 242, .08);
  color: #3d47a8;
}
:root[data-theme="light"] .invite-store-banner-icon {
  background: rgba(88, 101, 242, .16);
  color: #4653c9;
}
:root[data-theme="light"] .invite-store-banner.invite-store-banner-error {
  border-color: rgba(229, 22, 54, .3);
  background: rgba(229, 22, 54, .08);
  color: #b6293f;
}
:root[data-theme="light"] .invite-store-banner.invite-store-banner-error .invite-store-banner-icon {
  background: rgba(229, 22, 54, .14);
  color: #b6293f;
}
:root[data-theme="light"] .auth-field-toggle { color: #7a8088; }
:root[data-theme="light"] .auth-field-toggle:hover { color: #20242a; background: rgba(0, 0, 0, .05); }
:root[data-theme="light"] .auth-field-msg { color: #7a8088; }
:root[data-theme="light"] .auth-field-msg.is-error { color: #c23a4e; }
:root[data-theme="light"] .auth-field-msg.is-ok { color: #1f8f63; }
:root[data-theme="light"] .invite-privacy-note { color: #7a8088; }
:root[data-theme="light"] .invite-privacy-note svg { color: #9aa0a8; }

:root[data-theme="light"] .auth-screen {
  background:
    radial-gradient(circle at top, rgba(88, 101, 242, 0.14), transparent 40%),
    #f2f3f5;
}

:root[data-theme="light"] .auth-logo-placeholder {
  border-color: #d5d9e0;
  background: linear-gradient(145deg, #f6f7ff, #e1e5f3);
  color: #394261;
  box-shadow: 0 12px 30px rgba(25, 42, 61, .12);
}

:root[data-theme="light"] .auth-card {
  border-color: #d9dde3;
  background: #fff;
  box-shadow: 0 22px 65px rgba(25, 42, 61, 0.18);
}

:root[data-theme="light"] .auth-brand p,
:root[data-theme="light"] .auth-note,
:root[data-theme="light"] .auth-source-card p,
:root[data-theme="light"] .auth-source-options small {
  color: #5f6670;
}

:root[data-theme="light"] .auth-field,
:root[data-theme="light"] .auth-source-card strong,
:root[data-theme="light"] .auth-source-options button {
  color: #20242a;
}

:root[data-theme="light"] .auth-field input,
:root[data-theme="light"] .auth-source-card,
:root[data-theme="light"] .auth-source-options button {
  border-color: #d9dde3;
  background: #f2f3f5;
}

:root[data-theme="light"] .auth-field input {
  color: #20242a;
}

:root[data-theme="light"] .auth-provider-btn.secondary {
  background: transparent;
  color: #5f6670;
}

:root[data-theme="light"] .auth-provider-row {
  border-color: #d9dde3;
  background: #eef0f3;
}

:root[data-theme="light"] .auth-provider-btn {
  color: #5f6670;
}

:root[data-theme="light"] .auth-provider-btn.active {
  color: #fff;
}

:root[data-theme="light"] .auth-source-options button.active {
  border-color: #5865f2;
  background: #e8ebff;
}

@media (max-width: 520px) {
  .auth-screen {
    padding: 12px;
  }

  .auth-card {
    padding: 20px;
    margin-top: 10px;
    max-height: calc(100vh - 20px);
  }

  .auth-provider-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* Standardized loading component: spinner + cycling CFA phrase (js/loading.js). Used for the full-screen boot splash and every hub's inline loading state. */
.cfa-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 55vh;
  padding: 40px 20px;
  text-align: center;
}

.cfa-loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid color-mix(in srgb, var(--text) 15%, transparent);
  border-top-color: #5865f2;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.cfa-loading-phrase {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  opacity: 0.85;
}

:root[data-theme="light"] #loading-screen {
  background: var(--bg);
}

:root[data-theme="light"] .cfa-loading-spinner {
  border-color: rgba(32, 36, 42, 0.13);
  border-top-color: #5865f2;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ----------------------------
      WEATHER WIDGET
-----------------------------*/
#weather-widget {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  min-height: 180px;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  margin-bottom: 0;
  overflow: hidden;
}

.wx-top-label {
  background: #1a2c46;
  color: #9ec3ff;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 1px;
  text-align: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.wx-cols {
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  margin-top: 4px;
}

.wx-left,
.wx-right {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.wx-temp {
  font-size: 78px;
  font-weight: 900;
  margin: 0;
}

.wx-delta {
  font-size: 28px;
  font-weight: 900;
  margin: 3px 0 0;
}
.wx-delta.warmer { color: #ff7043; }
.wx-delta.cooler { color: #79c7ff; }
.wx-delta.neutral { color: #fff; }
:root[data-theme="light"] .wx-delta.neutral { color: #253142; }

.wx-sub {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  margin: 0 0 -4px;
}

.wx-zone {
  font-size: 36px;
  font-weight: 900;
  margin: 0;
}

.wx-zone-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-top: 4px;
  margin-bottom: 20px;
}

.wx-rules {
  font-size: 18px;
  font-weight: 700;
  margin-top: 4px;
  line-height: 1.1;
}

.wx-forecast {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.wx-forecast-hour {
  min-height: 58px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 8px 6px;
  border-left: 1px solid var(--line);
  text-align: center;
}

.wx-forecast-hour:first-child {
  border-left: 0;
}

.wx-forecast-time {
  color: #9ec3ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.wx-forecast-temp {
  color: var(--text);
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
}

.wx-forecast-zone {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}

.wx-forecast-empty {
  grid-column: 1 / -1;
  padding: 10px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.wx-refresh-status {
  --wx-progress: 0%;
  position: absolute;
  z-index: 3;
  top: 2px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #9ec3ff;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wx-refresh-status::before,
.wx-refresh-status::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.wx-refresh-status::before {
  inset: 0;
  background:
    conic-gradient(#4da3ff var(--wx-progress), rgba(77, 163, 255, 0.16) 0);
}

.wx-refresh-status::after {
  inset: 4px;
  background: #1a2c46;
}

.wx-refresh-status > span {
  position: relative;
  z-index: 1;
}

.wx-refresh-status.is-loading::before {
  background:
    conic-gradient(transparent 0 22%, #4da3ff 22% 100%);
  animation: wx-refresh-spin 0.8s linear infinite;
}

.wx-refresh-status.is-error {
  color: #ff9a9a;
}

.wx-refresh-status.is-error::before {
  background: #ff6f6f;
}

.wx-refresh-status.is-override {
  color: var(--muted);
}

.wx-refresh-status.is-override::before {
  background: rgba(142, 163, 176, 0.28);
}

@keyframes wx-refresh-spin {
  to { transform: rotate(360deg); }
}

/* PULSE SYSTEM */
.card-inner {
  position: relative;
}

.card-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0.25;
  background: transparent;
  border: 2px solid transparent;
  z-index: 5;
}

.card.pulse-yellow .card-inner::after {
  background: rgba(255, 255, 0, 0.25);
  border-color: rgba(255, 255, 0, 0.9);
  animation: exposurePulse 2.2s ease-in-out infinite;
}

.card.pulse-red .card-inner::after {
  background: rgba(255, 0, 0, 0.25);
  border-color: rgba(255, 0, 0, 0.9);
  animation: exposurePulse 2.2s ease-in-out infinite;
}

@keyframes exposurePulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .card.pulse-yellow .card-inner::after,
  .card.pulse-red .card-inner::after {
    animation: none;
    opacity: 0.7;
  }
}

/* ============================================
   DEBUG PANEL STYLES
============================================ */
#debug-panel {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  background: #0f1120;
  border-left: 2px solid #1c2238;
  padding: 20px;
  color: #d0dae7;
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  transition: right 0.25s ease;
  z-index: 9999;
}

#debug-panel.open {
  right: 0;
}

#debug-open-btn,
#roster-open-btn {
  position: fixed;
  bottom: 20px;
  height: 50px;
  width: 50px;
  background: #1a1f33;
  border: 1px solid #2d3552;
  padding-bottom: 3px;
  border-radius: 8px;
  color: #cbd8ef;
  font-size: 30px;
  cursor: pointer;
  z-index: 9999;
}

#debug-close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #cbd8ef;
  font-size: 26px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
}

.dbg-title {
  margin: 40px 0 15px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dbg-tools-toggle {
  font-size: 12px;
  padding: 2px 8px;
}

.dbg-section {
  margin: 20px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #232a44;
}

.dbg-section:last-child {
  border-bottom: none;
}

.dbg-section.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Toggle switch */
.dbg-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dbg-toggle input {
  display: none;
}

.dbg-toggle .slider {
  width: 45px;
  height: 22px;
  background: #2b334d;
  border-radius: 22px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}

.dbg-toggle .slider::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.dbg-toggle input:checked + .slider {
  background: #4da3ff;
}

.dbg-toggle input:checked + .slider::after {
  transform: translateX(23px);
}

.dbg-row {
  display: grid;
  grid-template-columns: 70px 1fr 40px;
  align-items: center;
  margin-bottom: 10px;
}

.dbg-row input[type="range"] {
  width: 100%;
}

.dbg-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.dbg-zone {
  flex: 1 1 45%;
  padding: 8px;
  background: #1b2033;
  border: 1px solid #2d3553;
  border-radius: 6px;
  color: #cdd7ef;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.dbg-zone:hover {
  background: #223056;
}

.dbg-btn {
  width: 100%;
  padding: 10px;
  background: #283053;
  border: 1px solid #3a456d;
  color: #d0d8ea;
  border-radius: 6px;
  cursor: pointer;
  font-size: 18px;
  transition: opacity 0.2s;
}

.dbg-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

#leadership-open-btn {
  margin-top: 10px;
}

.history-row {
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

#debug-open-btn {
  right: 20px;
}

#roster-open-btn {
  right: 80px;
  z-index: 9998;
  padding: 0 0 4px;
  font-size: 32px;
  line-height: 1;
}

/* Toggle container */
.dbg-tools-toggle-wrap {
  position: relative;
  width: 54px;
  height: 26px;
  background: #222a;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 0;
  justify-content: space-between;
  overflow: hidden;
  transform: translateY(8px);
}

.dbg-tools-toggle-slider {
  position: absolute;
  width: 26px;
  height: 26px;
  background: var(--accent, #4da3ff);
  border-radius: 50%;
  left: 0;
  top: 0;
  transition: transform 0.25s ease;
}

.dbg-tools-toggle-btn {
  width: 50%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.modal-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.modal-input,
.modal-select {
  background: #101321;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px 8px;
  color: #f5f7fb;
  font-size: 18px;
}

.modal-select {
  height: 40px; /* collapsed height */
}

.modal-input:focus,
.modal-select:focus {
  outline: none;
  border-color: var(--accent, #4da3ff);
}

.modal-actions {
  display: flex;
  gap: 8px;
}

.leadership-box {
  width: min(360px, calc(100vw - 40px));
  max-height: min(650px, calc(100vh - 40px));
  overflow-y: auto;
}

.leadership-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
}

.leadership-row,
.leadership-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.leadership-name,
#leadership-name {
  flex: 1;
  min-width: 0;
}

.leadership-remove,
.leadership-add {
  flex: 0 0 42px;
  height: 42px;
  border: 1px solid #3a456d;
  border-radius: 8px;
  color: #fff;
  font-size: 26px;
  cursor: pointer;
}

.leadership-remove {
  background: #8f334f;
}

.leadership-add {
  background: #283053;
}

.leadership-add-row {
  margin: 14px 0;
}

.leadership-empty {
  padding: 14px;
  color: var(--muted);
  text-align: center;
  border: 1px dashed #3a456d;
  border-radius: 8px;
}

.roster-box {
  width: min(520px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 32px));
  max-height: min(760px, calc(100dvh - 32px));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.roster-sections {
  overflow-y: auto;
  margin: 12px 0;
  padding-right: 4px;
}

.roster-section + .roster-section {
  margin-top: 16px;
}

.roster-heading {
  margin: 0 0 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid #3a456d;
  color: var(--accent);
  font-size: 18px;
}

.roster-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .9fr) minmax(132px, .85fr);
  column-gap: 16px;
  align-items: center;
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 6px;
}

.roster-row:nth-of-type(odd) {
  background: rgba(255, 255, 255, 0.035);
}

.roster-name {
  min-width: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
}

.roster-name.roster-leader {
  color: var(--leader);
}

.roster-job {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.roster-shift {
  color: var(--muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.roster-empty {
  padding: 6px 8px;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

@media (max-width: 480px) {
  #roster-modal {
    align-items: stretch;
    box-sizing: border-box;
    padding:
      max(10px, env(safe-area-inset-top))
      10px
      max(10px, env(safe-area-inset-bottom));
  }

  .roster-box {
    width: 100%;
    max-height: 100%;
    min-height: 0;
    margin: auto;
  }

  .roster-row {
    column-gap: 8px;
    padding-inline: 4px;
  }

  .roster-name {
    font-size: 16px;
  }

  .roster-shift {
    font-size: 13px;
  }

  .roster-row {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .8fr) minmax(108px, .9fr);
  }

  .roster-job { font-size: 12px; }
}

/* =========================================
   SWIPE TO DELETE
========================================= */

/* card we can slide */
.card.swipe-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border-radius: 14px;  /* match your card corner radius */
  touch-action: pan-y;
}

/* Inner card that actually slides (already added earlier) */
.card-inner {
  position: relative;
  z-index: 1;
  background: var(--card);
  border-radius: 14px;
  padding: 8px;
  padding-right: 15px;
  min-height: 87px;
  height: auto;
}

.card.off-soon .card-inner {
  background: #3a2438;
  box-shadow: inset 0 0 0 1px rgba(255, 132, 188, 0.55);
}

/* Red delete strip “under” the card — completely stationary */
.card.swipe-card::before {
  content: "Delete ✕";
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 1px;
  width: calc(50% - 1px);
  background: #ff4d4f;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 16px;
  z-index: 0;
  transform: none;
  transition: none;
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}


/* Optional: you can still style “active” state without sliding */
.card.swipe-card.swipe-active::before {
  /* maybe a tiny visual change, but NOT movement */
  filter: brightness(1.05);
}

/* Card snapping back after swipe */
.card.swipe-card.swipe-animating .card-inner {
  transition: transform 0.15s ease-out;
}

/* Confirm Delete button — same style as cancel, but red */
.modal-confirm-delete {
  width: 100%;
  padding: 10px 14px;
  height: 44px;
  background: #ff4d4f;              /* 🔥 red background */
  border: 1px solid #8c2f30;         /* darker red border */
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  margin-bottom: 10px;
}

.modal-confirm-delete:hover {
  background: #e54446;               /* slightly darker red on hover */
}

.modal-add {
  width: 100%;
  padding: 10px 14px;
  height: 44px;
  background: var(--accent);
  border: 1px solid #303a55;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.modal-add:hover { filter: brightness(1.06); }

.custom-select {
  position: relative;
  background: #101321;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 6px 8px;
  color: #f5f7fb;
  cursor: pointer;
  user-select: none;
}

.custom-select-display {
  font-size: 14px;
}

.custom-select-options {
  position: absolute;
  top: calc(100% + 4px);  /* always below */
  left: 0;
  width: 100%;
  background: #101321;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  max-height: 200px;      /* 🔥 fixed dropdown height */
  overflow-y: auto;       /* scroll instead of expanding */
  display: none;
  z-index: 999999;
}

.custom-select.open .custom-select-options {
  display: block;
}

.custom-select-option {
  padding: 8px;
  font-size: 14px;
  cursor: pointer;
}

.custom-select-option:hover {
  background: #1c2438;
}

.modal-row {
  display: flex;
  gap: 12px;
}

.modal-row .modal-field {
  flex: 1; /* each column = 50% */
}

.modal-row .modal-field .custom-select {
  width: 100%;  /* fill full half */
  margin: 0;
}

/* ==============================
   WEATHER ROW — BASE (DESKTOP DEFAULT)
   - Full-width row
   - Widget aligned to inside column cards
============================== */

#weather-row {
  padding: 20px 20px 0;      /* match #app padding */
  display: block;
  pointer-events: none;
}

/*
  Cards in inside column:
    left = 20px (#app padding) + 10px (.column padding-left) = 30px
  So we match that frame.
*/
#weather-row #weather-widget {
  width: calc(50% - 20px);
  margin-left: 10px;         /* 20 (app) + 10 = 30px total offset */
}

/* ============================================================
   DESKTOP (DEFAULT) ALIGNMENT
   - Right column top flush with widget top
   - Inside column starts just BELOW widget
   - Gap under widget ~= card gap (8px)
============================================================ */

body[data-layout="default"] #weather-row {
  position: relative;
  z-index: 2;
}

/* Pull columns up so OUTSIDE top aligns with widget top */
body[data-layout="default"] #app {
  margin-top: -230px;        /* ≈ widget height; tweak if needed */
}

body[data-layout="default"] #inside-column {
  padding-top: 218px;
}

body[data-layout="default"] #outside-column {
  padding-top: 8px;
}

/* ============================================================
   PORTRAIT PHONE LAYOUT
   - Weather centered above columns
   - Same inner width as two-column area
   - Gap under widget = card gap (8px)
============================================================ */

body[data-layout="phone-portrait"] #weather-row {
  padding: 8px 8px 0;        /* match phone #app padding: 8px 8px */
  display: block;
}

body[data-layout="phone-portrait"] #weather-row #weather-widget {
  width: calc(100% - 16px);
  margin: 0 auto 8px;
}

/* Lightning monitoring prototype */
.lightning-widget {
  width: calc(50% - 20px);
  margin: 0 0 10px 10px;
  overflow: hidden;
  border: 1px solid rgba(250, 204, 21, .55);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
}
.lightning-widget.hidden { display: none; }
.lightning-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 14px; background: linear-gradient(90deg, rgba(250,204,21,.18), rgba(250,204,21,.035)); }
.lightning-header > div:first-child { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; }
.lightning-header strong { font-size: 17px; }
.lightning-header small { grid-column: 2; color: var(--muted); font-size: 11px; font-weight: 750; }
.lightning-bolt { grid-row: 1 / 3; color: #facc15; font-size: 26px; }
.lightning-countdown { display: grid; justify-items: end; }
.lightning-countdown span { color: #facc15; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.lightning-countdown strong { color: #facc15; font-size: 24px; line-height: 1; }
.lightning-live-map { min-height: 170px; border-top: 1px solid rgba(250,204,21,.25); background: #202833; }
.lightning-map-footer { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; color: var(--muted); font-size: 11px; }
.lightning-map-footer strong { color: #facc15; white-space: nowrap; }
.lightning-choice-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.countdown-choices { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lightning-radius-control { display: grid; gap: 10px; margin-top: 16px; }
.lightning-radius-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lightning-radius-readout strong { color: #facc15; font-size: 24px; }
.lightning-radius-readout span { color: var(--muted); font-size: 12px; }
.lightning-radius-slider { width: 100%; accent-color: #facc15; cursor: pointer; }
.lightning-radius-scale { position: relative; height: 15px; margin: 0 8px; color: var(--muted); font-size: 11px; font-weight: 800; }
.lightning-radius-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.lightning-radius-scale span:first-child { left: 0; transform: none; }
.lightning-radius-scale span:nth-child(2) { left: 44.444%; }
.lightning-radius-scale span:last-child { right: 0; transform: none; }
.lightning-setting-choice { position: relative; display: grid; place-items: center; min-height: 46px; border: 1px solid #4a4d54; border-radius: 8px; background: #35373c; cursor: pointer; }
.lightning-setting-choice input { position: absolute; opacity: 0; pointer-events: none; }
.lightning-setting-choice.selected { border-color: #facc15; background: rgba(250,204,21,.14); color: #ffe879; box-shadow: inset 0 0 0 1px rgba(250,204,21,.22); }
.lightning-settings-body.disabled { opacity: .42; pointer-events: none; filter: grayscale(.4); }
.settings-card.lightning-coming-soon-card {
  position: relative;
  overflow: hidden;
  padding: 14px 16px;
  border: 1px solid #484b52;
  border-radius: 7px;
  background: #313338;
}
.settings-card.lightning-coming-soon-card .settings-switch-row { margin: 0; }
.lightning-coming-soon-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(25, 27, 31, .42);
  pointer-events: none;
}
.lightning-coming-soon-ribbon {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: -34px;
  width: 132px;
  padding: 4px 0 5px;
  transform: rotate(36deg);
  background: #d7193f;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .28);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  line-height: 1.15;
  text-align: center;
  text-transform: uppercase;
}
:root[data-theme="light"] .lightning-coming-soon-card::after { background: rgba(226, 229, 234, .58); }
:root[data-theme="light"] .settings-card.lightning-coming-soon-card { border-color: #c9cdd3; background: #e5e7eb; }
.lightning-settings-preview { position: relative; width: min(100%, 600px); min-height: 292px; margin: 12px 0; overflow: hidden; border: 1px solid #494c52; border-radius: 9px; background: #202833; box-shadow: 0 8px 22px rgba(0,0,0,.22); }
.lightning-map-example > img { position: absolute; z-index: 0; inset: 62px 0 0; width: 100%; height: calc(100% - 62px); object-fit: cover; transition: filter .2s ease; }
:root:not([data-theme="light"]) .lightning-map-example > img { filter: invert(.86) hue-rotate(176deg) saturate(.62) brightness(1.24) contrast(.94); }
.lightning-map-example::after { content: ""; position: absolute; z-index: 1; inset: 58% 0 0; background: linear-gradient(transparent, rgba(8, 10, 14, .84)); pointer-events: none; }
.lightning-preview-alert { position: absolute; z-index: 5; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,.2); background: linear-gradient(100deg, #d97706, #f59e0b 65%, #fbbf24); color: #17130a; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.lightning-preview-alert-copy { display: flex; align-items: center; gap: 9px; min-width: 0; }
.lightning-preview-alert-copy > b { color: #fff; font-family: Arial, sans-serif; font-size: 27px; line-height: 1; text-shadow: 0 2px 5px rgba(0,0,0,.3); }
.lightning-preview-alert-copy > span { display: grid; gap: 1px; min-width: 0; }
.lightning-preview-alert-copy strong { font-size: 16px; letter-spacing: -.01em; }
.lightning-preview-alert-copy small { overflow: hidden; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.lightning-preview-countdown { display: grid; flex: 0 0 auto; justify-items: end; }
.lightning-preview-countdown span { font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.lightning-preview-countdown strong { color: #fff; font-size: 24px; line-height: 1; text-shadow: 0 2px 5px rgba(0,0,0,.28); }
.lightning-preview-radius { position: absolute; z-index: 2; top: 59%; left: 50%; width: clamp(120px, 32%, 174px); aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px solid #facc15; border-radius: 50%; background: rgba(250,204,21,.14); box-shadow: 0 0 0 1px rgba(0,0,0,.38), 0 0 18px rgba(250,204,21,.22); }
.lightning-preview-radius i { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; transform: translate(-50%,-50%); border: 2px solid #fff; border-radius: 50%; background: #facc15; }
.lightning-preview-radius > b { position: absolute; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; background: #facc15; box-shadow: 0 1px 4px rgba(0,0,0,.55); }
.lightning-preview-radius .strike-one { top: 22%; left: 66%; }
.lightning-preview-radius .strike-two { top: 61%; left: 23%; }
.lightning-preview-radius .strike-three { top: 72%; left: 68%; }
.lightning-example-copy { position: absolute; z-index: 3; left: 12px; bottom: 10px; display: grid; gap: 2px; color: #fff; text-shadow: 0 1px 3px #000; }
.lightning-example-copy span { color: #e6e8ec; font-size: 11px; }
.lightning-map-attribution { position: absolute; z-index: 3; right: 8px; bottom: 7px; color: rgba(255,255,255,.82); font-size: 8px; text-shadow: 0 1px 2px #000; }
@media (max-width: 560px) { .lightning-preview-alert-copy small { display: none; } .lightning-settings-preview { min-height: 270px; } }
:root[data-theme="light"] .lightning-widget { background: #fff; }
:root[data-theme="light"] .lightning-setting-choice { border-color: #c8cdd4; background: #f3f4f6; }
:root[data-theme="light"] .lightning-setting-choice.selected { border-color: #b58a00; background: #fff7cc; color: #715500; }
body[data-layout="phone-portrait"] #weather-row .lightning-widget { width: calc(100% - 16px); margin: 0 auto 8px; }
@media (max-width: 620px) { .lightning-choice-grid { grid-template-columns: repeat(5, minmax(44px, 1fr)); } }

body[data-layout="phone-portrait"] .wx-rules {
  font-size: 13px;
}

body[data-layout="phone-portrait"] .wx-zone {
  font-size: 25px;
}

body[data-layout="phone-portrait"] .wx-temp {
  font-size: 62px;
}

body[data-layout="phone-portrait"] .wx-forecast-hour {
  min-height: 50px;
  padding: 7px 4px;
}

body[data-layout="phone-portrait"] .wx-forecast-time {
  font-size: 10px;
}

body[data-layout="phone-portrait"] .wx-forecast-temp {
  font-size: 18px;
}

body[data-layout="phone-portrait"] .wx-forecast-zone {
  font-size: 9px;
}

/* Slightly tighten app padding on phone */
body[data-layout="phone-portrait"] #app {
  padding: 0px 8px 16px;
}

/* Optional: slightly smaller column titles on phone */
body[data-layout="phone-portrait"] .column-title {
  font-size: 18px;
  margin-bottom: 8px;
}

body[data-layout="phone-portrait"] .card-name {
  font-size: 16px;
}

body[data-layout="phone-portrait"] .card-shift {
  font-size: 10px;
}

body[data-layout="phone-portrait"] .role-pill {
  font-size: 8px;
}

body[data-layout="phone-portrait"] .status-bar {
  width: 20px;
  font-size: 10px;
}

body[data-layout="phone-portrait"] .status-bar.role-change-edge {
  font-size: 8px;
  letter-spacing: 0.2px;
}

body[data-layout="phone-portrait"] .status-bar.secondary-status-bar {
  font-size: 10px;
  letter-spacing: 2px;
}

body[data-layout="phone-portrait"] .role-edge-words {
  font-size: 10px;
  line-height: 0.9;
  letter-spacing: 0.1px;
}

body[data-layout="phone-portrait"]
  .card.dual-status
  .status-bar:not(.secondary-status-bar) {
  right: 20px;
}

body[data-layout="phone-portrait"] .card.dual-status .card-header-grid {
  width: calc(100% - 20px);
}

body[data-layout="phone-portrait"] .mini-cover-label {
  display: none !important;
}

/* Global top breathing room so widget + columns aren't crammed to top */
body {
  padding-top: 8px;
}


/* =========================================
   PHONE PORTRAIT — 
   Row 1: name + shift
   Row 2: buttons (side-by-side) + timer
========================================= */
body[data-layout="phone-portrait"] .card-header-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 0;
}

/* Row 1 — identity on the left, timer/exposure on the right */
body[data-layout="phone-portrait"] .col-role-name {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  align-self: center;
}

/* Hide history on mobile */
body[data-layout="phone-portrait"] .col-history {
  display: none !important;
}

/* Row 2 — full-width touch-friendly action strip */
body[data-layout="phone-portrait"] .col-buttons {
  grid-column: 1 / 3;
  grid-row: 2;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 6px;
  row-gap: 0;
  margin-top: 0;
  align-items: center;
  width: 100%;
  padding-right: 24px;
  align-self: center;
}

/* Large touch targets while preserving the existing symbols */
body[data-layout="phone-portrait"] .col-buttons .icon-btn {
  width: 100%;
  height: 30px;
  font-size: 22px;
  padding: 0;
  border-radius: 8px;
}

/* =========================================
   Row 2 — RIGHT SIDE: TIMER
========================================= */
body[data-layout="phone-portrait"] .col-timer {
  grid-column: 2;
  grid-row: 1;
  display: flex;              /* enable centering */
  align-items: flex-end;
  justify-content: center;
  text-align: right;
  padding-right: 12px;
  font-size: 20px;
  align-self: center;
}

body[data-layout="phone-portrait"] .exposure-rating {
  font-size: clamp(8px, 2.5vw, 10px);
}

/* ============================================================
   GENERALIZED STORE SETTINGS
============================================================ */
#settings-modal {
  padding: 24px;
  box-sizing: border-box;
}

.settings-shell {
  width: min(980px, 100%);
  height: min(760px, 100%);
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #303a55;
  border-radius: 18px;
  background: #111526;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.settings-header,
.settings-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #29314b;
}

.settings-header h2 {
  margin: 2px 0 0;
  font-size: 28px;
}

.settings-eyebrow {
  color: #76b6ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.settings-close {
  width: 44px;
  height: 44px;
  border: 1px solid #39435f;
  border-radius: 10px;
  background: #20263b;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}

.settings-layout {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

.settings-nav {
  padding: 18px 12px;
  border-right: 1px solid #29314b;
  background: #0d1120;
}

.settings-nav button {
  width: 100%;
  margin-bottom: 6px;
  padding: 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #9dadc7;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.settings-nav button.active {
  background: #26324d;
  color: #fff;
}

.settings-content {
  min-height: 0;
  overflow-y: auto;
  padding: 24px;
}

.settings-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.settings-section-header h3 {
  margin: 0 0 5px;
  font-size: 24px;
}

.settings-section-header p,
.settings-help {
  margin: 0;
  color: #91a2bb;
  line-height: 1.45;
}

.settings-card {
  margin-bottom: 16px;
  padding: 18px;
  border: 1px solid #2d3652;
  border-radius: 12px;
  background: #171c2e;
}

.settings-card h4 {
  margin: 0 0 14px;
  font-size: 17px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  color: #bac7dc;
  font-size: 13px;
  font-weight: 700;
}

.settings-field input,
.settings-field select,
.position-setting-row input,
.position-setting-row select {
  min-width: 0;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid #35405f;
  border-radius: 8px;
  background: #0f1322;
  color: #fff;
  padding: 8px 10px;
  font-size: 15px;
}

.settings-field input[type="color"],
.position-setting-row input[type="color"] {
  padding: 4px;
}

.settings-secondary,
.settings-add-position,
.settings-tool-grid button {
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid #3b496b;
  border-radius: 8px;
  background: #242d46;
  color: #eaf2ff;
  font-weight: 700;
  cursor: pointer;
}

.position-settings-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 14px;
}

.position-setting-row {
  display: grid;
  grid-template-columns: 32px minmax(120px, 1fr) 52px 150px 42px;
  gap: 8px;
  align-items: center;
}

.position-drag {
  display: grid;
  place-items: center;
  color: #7f90aa;
  font-weight: 800;
}

.position-delete {
  height: 42px;
  border: 1px solid #74364b;
  border-radius: 8px;
  background: #692d43;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

.position-delete:disabled,
.settings-add-position:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.settings-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.settings-switch-row span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-switch-row small {
  color: #91a2bb;
  font-weight: 400;
}

.settings-switch-row input {
  width: 24px;
  height: 24px;
}

.settings-permission-grid { display: grid; gap: 2px; margin-bottom: 4px; }
.settings-permission-grid-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px;
  align-items: center;
  gap: 12px;
  padding: 0 2px 6px;
  color: #91a2bb;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.settings-permission-grid-head span:not(:first-child) { text-align: center; }
.settings-permission-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 64px;
  align-items: center;
  gap: 12px;
  padding: 8px 2px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.settings-permission-row:first-of-type { border-top: 0; }
.settings-permission-row input {
  justify-self: center;
  width: 22px;
  height: 22px;
}
.settings-permission-row input:disabled { opacity: .35; cursor: not-allowed; }

.settings-color-field input {
  width: 90px;
}

.settings-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.settings-footer {
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #29314b;
  border-bottom: 0;
}

.settings-footer button {
  min-width: 130px;
  height: 44px;
  border-radius: 9px;
  border: 1px solid #39445f;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.settings-cancel {
  background: #22283a;
}

.settings-save {
  background: #337ccb;
}

@media (max-width: 700px) {
  #settings-modal {
    align-items: stretch;
    padding:
      max(8px, env(safe-area-inset-top))
      8px
      max(8px, env(safe-area-inset-bottom));
  }

  .settings-shell {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 12px;
  }

  .settings-header {
    padding: 12px 14px;
  }

  .settings-header h2 {
    font-size: 23px;
  }

  .settings-layout {
    display: flex;
    flex-direction: column;
  }

  .settings-nav {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 8px;
    border-right: 0;
    border-bottom: 1px solid #29314b;
  }

  .settings-nav button {
    width: auto;
    flex: 0 0 auto;
    margin: 0;
    padding: 9px 11px;
    font-size: 13px;
  }

  .settings-content {
    padding: 15px;
  }

  .settings-section-header {
    flex-direction: column;
    gap: 10px;
  }

  .settings-grid {
    grid-template-columns: 1fr;
  }

  .position-setting-row {
    grid-template-columns: 26px minmax(0, 1fr) 45px 42px;
  }

  .position-setting-row select {
    grid-column: 2 / 5;
  }

  .settings-footer {
    padding: 10px 12px;
  }

  .settings-footer button {
    flex: 1;
    min-width: 0;
  }
}

/* Clean three-row thermometer layout */
.thermometer-scale {
  height: 92px;
}

.thermometer-scale::before {
  top: 40px;
}

.thermometer-boundary {
  top: 26px;
}

.thermometer-labels,
.thermometer-values {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  pointer-events: none;
}

.thermometer-labels {
  top: 0;
  height: 28px;
  align-items: end;
}

.thermometer-values {
  top: 68px;
  height: 18px;
  align-items: start;
}

.thermometer-labels span,
.thermometer-labels span.staggered,
.thermometer-values span,
.thermometer-values span.staggered {
  position: static;
  width: auto;
  transform: none;
  text-align: center;
}

.thermometer-labels span,
.thermometer-labels span.staggered {
  color: #b5bac1;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  white-space: normal;
}

.thermometer-values span,
.thermometer-values span.staggered {
  color: #f2f3f5;
  font-size: 11px;
  font-weight: 800;
}

.thermometer-endpoints {
  margin-top: -2px;
}

@media (max-width: 700px) {
  .thermometer-labels span,
  .thermometer-labels span.staggered {
    font-size: 8px;
  }

  .thermometer-values span,
  .thermometer-values span.staggered {
    font-size: 9px;
  }
}

/* Tighter thermometer range with labels above and values below */
.thermometer-scale {
  height: 102px;
}

.thermometer-scale::before {
  top: 38px;
}

.thermometer-boundary {
  top: 24px;
  bottom: auto;
  height: 42px;
}

.thermometer-labels,
.thermometer-values {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.thermometer-labels span,
.thermometer-values span {
  position: absolute;
  width: 92px;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.thermometer-labels span {
  top: 0;
  color: #b5bac1;
  font-size: 10px;
  font-weight: 700;
}

.thermometer-labels span.staggered {
  top: 13px;
}

.thermometer-values span {
  top: 68px;
  color: #f2f3f5;
  font-size: 11px;
  font-weight: 800;
}

.thermometer-values span.staggered {
  top: 82px;
}

.thermometer-endpoints {
  margin-top: -5px;
}

:root[data-theme="light"] .thermometer-labels span {
  color: #5f6670;
}

:root[data-theme="light"] .thermometer-values span {
  color: #20242a;
}

@media (max-width: 700px) {
  .thermometer-labels span,
  .thermometer-values span {
    width: 74px;
    font-size: 9px;
  }
}

/* ============================================================
   VISUAL SETTINGS CONTROLS
============================================================ */
.settings-close svg {
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transform: translateY(2px);
}

.zone-thermometer {
  padding: 18px 12px 10px;
  border: 1px solid #3f4147;
  border-radius: 7px;
  background: #2b2d31;
}

.thermometer-scale {
  position: relative;
  height: 42px;
  margin: 0 10px;
}

.thermometer-scale::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: linear-gradient(
    90deg,
    #475db5 0%,
    #6259c7 25%,
    #2878c8 38%,
    #247847 52%,
    #b56f15 68%,
    #c65f25 82%,
    #c83f49 100%
  );
}

.thermometer-boundary {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 42px;
  margin: 0;
  appearance: none;
  background: transparent;
  pointer-events: none;
}

.thermometer-boundary::-webkit-slider-runnable-track {
  height: 14px;
  background: transparent;
}

.thermometer-boundary::-webkit-slider-thumb {
  width: 18px;
  height: 28px;
  margin-top: -7px;
  appearance: none;
  border: 3px solid #f2f3f5;
  border-radius: 5px;
  background: #1e1f22;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.48);
  cursor: ew-resize;
  pointer-events: auto;
}

.thermometer-boundary::-moz-range-track {
  height: 14px;
  background: transparent;
}

.thermometer-boundary::-moz-range-thumb {
  width: 14px;
  height: 24px;
  border: 3px solid #f2f3f5;
  border-radius: 5px;
  background: #1e1f22;
  cursor: ew-resize;
  pointer-events: auto;
}

.thermometer-endpoints {
  display: flex;
  justify-content: space-between;
  margin: -2px 8px 12px;
  color: #949ba4;
  font-size: 11px;
}

.thermometer-readouts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.thermometer-readouts span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 4px;
  background: #202225;
}

.thermometer-readouts strong {
  overflow: hidden;
  color: #b5bac1;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thermometer-readouts b {
  color: #f2f3f5;
  font-size: 11px;
}

.outside-time-groups > div > label {
  width: min(260px, calc(50% - 7px));
}

.outside-time-groups > div > .outside-time-minimum {
  justify-self: start;
}

.outside-time-groups > div > .outside-time-maximum {
  justify-self: end;
}

.outside-time-groups .time-pair label {
  width: auto;
}

.outside-time-groups .time-pair .outside-time-minimum {
  justify-self: stretch;
}

.outside-time-groups .time-pair .outside-time-maximum {
  justify-self: stretch;
}

.visual-color-picker {
  position: relative;
  width: 48px;
}

.color-picker-trigger {
  width: 44px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #4b4e55;
  border-radius: 6px;
  background: #1e1f22;
  cursor: pointer;
}

.color-picker-trigger > span {
  width: 24px;
  height: 24px;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  background: var(--selected-color);
}

.color-swatch-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  left: 0;
  width: 218px;
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: 7px;
  padding: 10px;
  border: 1px solid #4b4e55;
  border-radius: 7px;
  background: #1e1f22;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
}

.color-swatch-popover.hidden {
  display: none;
}

.color-swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--swatch);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.color-swatch:hover { border-color: #9ca5ff; }

.color-swatch.selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px #5865f2;
}

.position-setting-row {
  grid-template-columns: 32px minmax(110px, 1fr) 48px 145px 42px;
}

.leader-color-select {
  width: auto;
}

:root[data-theme="light"] .zone-thermometer {
  border-color: #d9dde3;
  background: #f2f3f5;
}

:root[data-theme="light"] .thermometer-scale::before {
  border-color: rgba(32, 36, 42, 0.18);
}

:root[data-theme="light"] .thermometer-boundary::-webkit-slider-thumb {
  border-color: #fff;
  background: #303640;
}

:root[data-theme="light"] .thermometer-boundary::-moz-range-thumb {
  border-color: #fff;
  background: #303640;
}

:root[data-theme="light"] .thermometer-readouts span {
  background: #fff;
}

:root[data-theme="light"] .thermometer-readouts strong {
  color: #5f6670;
}

:root[data-theme="light"] .thermometer-readouts b {
  color: #20242a;
}

:root[data-theme="light"] .color-picker-trigger,
:root[data-theme="light"] .color-swatch-popover {
  border-color: #c4ccd5;
  background: #fff;
}

:root[data-theme="light"] .color-picker-trigger > span {
  border-color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 700px) {
  .thermometer-readouts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .outside-time-groups > div > label {
    width: 50%;
  }

  .outside-time-groups .time-pair label {
    width: 100%;
  }

  .position-setting-row {
    grid-template-columns: 26px minmax(0, 1fr) 48px;
  }

  .color-swatch-popover {
    right: 0;
    left: auto;
  }
}

/* ============================================================
   SETTINGS REFINEMENT
============================================================ */
.settings-close {
  padding: 0;
  line-height: 1;
}

.settings-close > span {
  display: block;
  line-height: 1;
  transform: translateY(-1px);
}

.location-search-field {
  position: relative;
}

.location-search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% - 10px);
  left: 0;
  right: 0;
  overflow: hidden;
  border: 1px solid #4b4e55;
  border-radius: 6px;
  background: #1e1f22;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
}

.location-search-results.hidden {
  display: none;
}

.location-result {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 12px;
  border: 0;
  border-bottom: 1px solid #35373c;
  background: transparent;
  color: #f2f3f5;
  text-align: left;
  cursor: pointer;
}

.location-result:last-child {
  border-bottom: 0;
}

.location-result:hover {
  background: #404249;
}

.location-result span {
  color: #949ba4;
  font-size: 12px;
}

.location-search-empty {
  padding: 12px;
  color: #949ba4;
  font-size: 13px;
}

.zone-boundary-list {
  overflow: hidden;
  border: 1px solid #3f4147;
  border-radius: 7px;
}

.zone-boundary-row,
.zone-boundary-derived {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px;
  gap: 16px;
  align-items: center;
  padding: 7px 12px;
  border-bottom: 1px solid #3f4147;
  background: #2b2d31;
}

.zone-boundary-row:nth-child(1) { box-shadow: inset 3px 0 #c83f49; }
.zone-boundary-row:nth-child(2) { box-shadow: inset 3px 0 #c65f25; }
.zone-boundary-row:nth-child(3) { box-shadow: inset 3px 0 #b56f15; }
.zone-boundary-row:nth-child(4) { box-shadow: inset 3px 0 #247847; }
.zone-boundary-row:nth-child(5) { box-shadow: inset 3px 0 #2878c8; }
.zone-boundary-row:nth-child(6) { box-shadow: inset 3px 0 #6259c7; }
.zone-boundary-derived { box-shadow: inset 3px 0 #475db5; }

.zone-boundary-row > span:first-child,
.zone-boundary-derived > span {
  color: #dbdee1;
  font-size: 14px;
  font-weight: 700;
}

.zone-boundary-derived {
  border-bottom: 0;
}

.zone-boundary-derived strong {
  color: #949ba4;
  font-size: 11px;
  font-weight: 500;
  text-align: right;
}

.unit-input {
  position: relative;
  display: flex;
  align-items: center;
}

.unit-input input {
  width: 100%;
  height: 36px;
  padding: 7px 34px 7px 10px;
  border: 1px solid #1e1f22;
  border-radius: 4px;
  background: #1e1f22;
  color: #f2f3f5;
  font-size: 14px;
}

.unit-input b {
  position: absolute;
  right: 10px;
  color: #949ba4;
  font-size: 12px;
  pointer-events: none;
}

.outside-time-groups {
  overflow: hidden;
  border: 1px solid #3f4147;
  border-radius: 7px;
}

.outside-time-groups > div {
  min-height: 62px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #3f4147;
  background: #2b2d31;
}

.outside-time-groups > div:last-child {
  border-bottom: 0;
}

.outside-time-groups > div > strong {
  color: #dbdee1;
  font-size: 14px;
}

.outside-time-groups label {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: #949ba4;
  font-size: 12px;
}

.time-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.position-setting-row {
  grid-template-columns: 32px minmax(110px, 1fr) 130px 145px 42px;
}

.role-color-select {
  padding-left: 34px !important;
  background:
    linear-gradient(var(--selected-color), var(--selected-color)) 9px center / 16px 16px no-repeat,
    #1e1f22 !important;
}

.settings-subsection-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.settings-subsection-title > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-subsection-title strong {
  color: #f2f3f5;
  font-size: 16px;
}

.settings-subsection-title small {
  color: #949ba4;
  font-size: 12px;
}

.leader-color-select {
  width: 180px;
}

:root[data-theme="light"] .location-search-results {
  border-color: #c4ccd5;
  background: #fff;
  box-shadow: 0 12px 28px rgba(40, 51, 65, 0.2);
}

:root[data-theme="light"] .location-result {
  border-color: #e0e4e9;
  color: #20242a;
}

:root[data-theme="light"] .location-result:hover {
  background: #e8eaed;
}

:root[data-theme="light"] .zone-boundary-list,
:root[data-theme="light"] .outside-time-groups {
  border-color: #d9dde3;
}

:root[data-theme="light"] .zone-boundary-row,
:root[data-theme="light"] .zone-boundary-derived,
:root[data-theme="light"] .outside-time-groups > div {
  border-color: #d9dde3;
  background: #f2f3f5;
}

:root[data-theme="light"] .zone-boundary-row > span:first-child,
:root[data-theme="light"] .zone-boundary-derived > span,
:root[data-theme="light"] .outside-time-groups > div > strong,
:root[data-theme="light"] .settings-subsection-title strong {
  color: #20242a;
}

:root[data-theme="light"] .unit-input input {
  border-color: #b9c1cb;
  background: #fff;
  color: #20242a;
}

:root[data-theme="light"] .role-color-select {
  background:
    linear-gradient(var(--selected-color), var(--selected-color)) 9px center / 16px 16px no-repeat,
    #fff !important;
}

@media (max-width: 700px) {
  .zone-boundary-row,
  .zone-boundary-derived {
    grid-template-columns: minmax(0, 1fr) 100px;
  }

  .outside-time-groups > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .time-pair {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .position-setting-row {
    grid-template-columns: 26px minmax(0, 1fr) 42px;
  }

  .position-setting-row .role-color-select,
  .position-setting-row select[data-position-field="exposure"] {
    grid-column: 2 / 4;
  }
}

/* ============================================================
   SETTINGS POLISH — desktop-app style hierarchy
============================================================ */
#settings-modal {
  background: rgba(7, 9, 16, 0.78);
}

.settings-shell {
  width: min(1080px, 100%);
  height: min(800px, 100%);
  border: 0;
  border-radius: 12px;
  background: #313338;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 28px 90px rgba(0, 0, 0, 0.7);
}

.settings-header {
  min-height: 76px;
  box-sizing: border-box;
  padding: 16px 24px;
  border-color: rgba(255, 255, 255, 0.06);
  background: #2b2d31;
}

.settings-header h2 {
  margin-top: 1px;
  color: #f2f3f5;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.settings-eyebrow {
  color: #949ba4;
  font-size: 10px;
  letter-spacing: 1.25px;
}

.settings-close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0 0 3px;
  border-color: #4e5058;
  border-radius: 50%;
  background: transparent;
  color: #b5bac1;
  font-size: 25px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.settings-close:hover {
  border-color: #b5bac1;
  background: rgba(255, 255, 255, 0.05);
  color: #f2f3f5;
}

/* Shared app-settings close control. Keep this more specific than app modal button resets. */
.settings-header .settings-close {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #4e5058;
  border-radius: 50%;
  background: transparent;
  color: #b5bac1;
  line-height: 1;
}

.settings-header .settings-close:hover {
  border-color: #b5bac1;
  background: rgba(255, 255, 255, 0.05);
  color: #f2f3f5;
}

.settings-header .settings-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.8;
}

.settings-layout {
  grid-template-columns: 252px minmax(0, 1fr);
}

.settings-nav {
  padding: 24px 12px 24px 20px;
  border-color: rgba(255, 255, 255, 0.05);
  background: #2b2d31;
}

.settings-nav::before {
  content: "APP SETTINGS";
  display: block;
  margin: 0 10px 8px;
  color: #949ba4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.8px;
}

.settings-nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  margin-bottom: 3px;
  padding: 9px 12px;
  border-radius: 5px;
  color: #b5bac1;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.12s ease, color 0.12s ease;
}

.settings-nav button::before {
  width: 21px;
  color: #949ba4;
  font-size: 17px;
  text-align: center;
}

.settings-nav button[data-settings-tab="weather"]::before { content: "☁"; }
.settings-nav button[data-settings-tab="lightning"]::before { content: "⚡"; }
.settings-nav button.coming-soon-tab { overflow: hidden; padding-right: 80px; }
.settings-nav button.coming-soon-tab::before {
  content: "\26A1\FE0E";
  color: #fff;
  font-family: Arial, sans-serif;
}
.settings-nav button.coming-soon-tab > span {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 8px;
  display: block;
  min-width: 42px;
  transform: translateY(-50%);
  border-radius: 999px;
  padding: 3px 6px;
  background: #d7193f;
  color: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .28);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .06em;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}
.settings-nav button[data-settings-tab="lightning"]::before {
  content: "\26A1\FE0E";
  color: #fff;
  font-family: Arial, sans-serif;
}
.settings-nav button[data-settings-tab="shift-import"]::before { content: "⇩"; }
.settings-nav button[data-settings-tab="positions"]::before { content: "▦"; }
.settings-nav button[data-settings-tab="people"]::before { content: "♟"; }
.settings-nav button[data-settings-tab="appearance"]::before { content: "◐"; }
.settings-nav button[data-settings-tab="team"]::before { content: "♟"; }
.settings-nav button[data-settings-tab="account"]::before { content: "●"; }
.settings-nav button[data-settings-tab="debug"]::before { content: "⌁"; }

.settings-nav button:hover {
  background: #35373c;
  color: #dbdee1;
}

.settings-nav button.active {
  background: #404249;
  color: #fff;
}

.settings-nav button.active::after {
  content: "";
  position: absolute;
  top: 9px;
  bottom: 9px;
  left: -8px;
  width: 3px;
  border-radius: 3px;
  background: #5865f2;
}

.settings-content {
  padding: 32px 38px 44px;
  background: #313338;
}

.settings-content > * {
  max-width: 720px;
}

.settings-section-header {
  margin-bottom: 24px;
}

.settings-section-header h3 {
  margin-bottom: 7px;
  color: #f2f3f5;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.35px;
}

.settings-section-header p,
.settings-help {
  color: #b5bac1;
  font-size: 14px;
}

.settings-card {
  margin-bottom: 20px;
  padding: 0 0 22px;
  border: 0;
  border-bottom: 1px solid #3f4147;
  border-radius: 0;
  background: transparent;
}

.settings-card:last-child {
  border-bottom: 0;
}

.settings-card h4 {
  margin-bottom: 14px;
  color: #dbdee1;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.settings-field {
  gap: 7px;
  margin-bottom: 16px;
  color: #b5bac1;
  font-size: 12px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.settings-field input,
.settings-field select,
.position-setting-row input,
.position-setting-row select {
  height: 44px;
  border-color: #1e1f22;
  border-radius: 4px;
  background: #1e1f22;
  color: #dbdee1;
  font-size: 15px;
  text-transform: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.settings-field input:hover,
.settings-field select:hover,
.position-setting-row input:hover,
.position-setting-row select:hover {
  border-color: #111214;
}

.settings-field input:focus,
.settings-field select:focus,
.position-setting-row input:focus,
.position-setting-row select:focus {
  border-color: #00a8fc;
  box-shadow: 0 0 0 1px #00a8fc;
}

.settings-secondary,
.settings-add-position,
.settings-tool-grid button {
  border: 0;
  border-radius: 4px;
  background: #4e5058;
  color: #fff;
  transition: background 0.15s ease, transform 0.08s ease;
}

.settings-secondary:hover,
.settings-add-position:hover,
.settings-tool-grid button:hover {
  background: #5d6069;
}

.settings-secondary:active,
.settings-add-position:active,
.settings-tool-grid button:active { filter: brightness(.94); }

.position-settings-list {
  gap: 8px;
}

.position-setting-row {
  padding: 8px;
  border-radius: 6px;
  background: #2b2d31;
}

.position-drag {
  color: #949ba4;
  font-size: 12px;
}

.position-delete {
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #f23f42;
  transition: background 0.15s ease;
}

.position-delete:hover:not(:disabled) {
  background: rgba(242, 63, 66, 0.14);
}

.settings-switch-row {
  min-height: 58px;
  padding: 4px 0;
}

.settings-switch-row strong {
  color: #dbdee1;
  font-size: 15px;
}

.settings-switch-row small {
  color: #949ba4;
  font-size: 13px;
}

.settings-switch-row input {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 42px;
  appearance: none;
  border-radius: 12px;
  background: #4e5058;
  cursor: pointer;
  transition: background 0.18s ease;
}

.settings-switch-row input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}

.settings-switch-row input:checked {
  background: #23a55a;
}

.settings-switch-row input:checked::after {
  transform: translateX(18px);
}

.settings-tool-grid button {
  min-height: 50px;
  text-align: left;
}

.settings-footer {
  min-height: 72px;
  box-sizing: border-box;
  padding: 14px 24px;
  border-color: rgba(255, 255, 255, 0.06);
  background: #2b2d31;
}

.settings-footer button {
  min-width: 118px;
  height: 40px;
  border: 0;
  border-radius: 4px;
  font-size: 14px;
}

.settings-cancel {
  background: transparent;
  color: #dbdee1;
}

.settings-cancel:hover {
  text-decoration: underline;
}

.settings-save {
  background: #5865f2;
  transition: background 0.15s ease;
}

.settings-save:hover {
  background: #4752c4;
}

.theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.theme-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #2b2d31;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.theme-option:hover {
  background: #35373c;
}

.theme-option.selected {
  border-color: #5865f2;
}

.theme-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-preview {
  height: 72px;
  display: grid;
  grid-template-columns: 28% 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 5px;
  padding: 7px;
  border-radius: 5px;
  overflow: hidden;
}

.theme-preview i {
  display: block;
  border-radius: 3px;
}

.theme-preview i:first-child {
  grid-row: 1 / 3;
}

.theme-preview-dark {
  background: #1e1f22;
}

.theme-preview-dark i:first-child { background: #2b2d31; }
.theme-preview-dark i:not(:first-child) { background: #404249; }

.theme-preview-light {
  background: #e9edf2;
}

.theme-preview-light i:first-child { background: #d7dde5; }
.theme-preview-light i:not(:first-child) { background: #fff; }

.theme-preview-system {
  background: linear-gradient(115deg, #1e1f22 0 49%, #e9edf2 51% 100%);
}

.theme-preview-system i:first-child { background: #68707c; }
.theme-preview-system i:not(:first-child) { background: #8a93a0; }

.theme-option-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.theme-option-copy strong {
  color: #f2f3f5;
  font-size: 14px;
}

.theme-option-copy small {
  color: #949ba4;
  font-size: 11px;
  line-height: 1.35;
}

@media (max-width: 700px) {
  .settings-shell {
    border-radius: 8px;
  }

  .settings-header {
    min-height: 66px;
  }

  .settings-nav {
    padding: 8px;
    background: #2b2d31;
  }

  .settings-nav::before {
    display: none;
  }

  .settings-nav button {
    min-height: 38px;
    padding: 8px 11px;
    white-space: nowrap;
  }

  .settings-nav button::before,
  .settings-nav button.active::after {
    display: none;
  }

  .settings-content {
    padding: 22px 18px 34px;
  }

  .settings-content > * {
    max-width: none;
  }

  .settings-section-header h3 {
    font-size: 22px;
  }

  .position-setting-row {
    padding: 7px;
  }

  .settings-footer {
    min-height: 64px;
    padding: 10px 12px;
  }

  .theme-options {
    grid-template-columns: 1fr;
  }

  .theme-option {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
  }

  .theme-preview {
    height: 58px;
  }
}

/* ============================================================
   LIGHT THEME — operational colors remain unchanged
============================================================ */
:root[data-theme="light"] {
  --bg: #dfe5ec;
  --card: #ffffff;
  --text: #182230;
  --muted: #5f7182;
  --accent: rgba(41, 118, 196, 0.2);
  --line: #b9c5d2;
  --inside: #2f78bd;
}

:root[data-theme="light"] body {
  color-scheme: light;
}

:root[data-theme="dark"] body {
  color-scheme: dark;
}

:root[data-theme="dark"] {
  --bg: #0d0e10;
  --card: #18191c;
  --text: #f1f2f3;
  --muted: #a2a6ad;
  --accent: rgba(150, 156, 166, 0.22);
  --line: #2d2f34;
  /* Intentionally retain the established blue Inside status color. */
  --inside: #1a2c46;
}

:root[data-theme="dark"] .history-row {
  background: #24262a;
}

:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .modal-cancel,
:root[data-theme="dark"] .cover-cancel-btn {
  border-color: #383b41;
  background: #24262a;
}

:root[data-theme="dark"] .icon-btn:hover,
:root[data-theme="dark"] .modal-cancel:hover,
:root[data-theme="dark"] .cover-cancel-btn:hover {
  background: #303238;
}

:root[data-theme="dark"] .mini-card {
  background: #111214;
}

:root[data-theme="dark"] .wx-top-label {
  background: #202226;
}

:root[data-theme="dark"] .wx-refresh-status::after {
  background: #202226;
}

:root[data-theme="dark"] .modal-input,
:root[data-theme="dark"] .modal-select,
:root[data-theme="dark"] .custom-select,
:root[data-theme="dark"] .custom-select-options {
  border-color: #35383e;
  background: #111214;
}

:root[data-theme="dark"] #debug-open-btn,
:root[data-theme="dark"] #roster-open-btn {
  border-color: #35383e;
  background: #1c1e21;
  color: #d7d9dc;
}

:root[data-theme="dark"] #debug-panel {
  border-color: #292b30;
  background: #111214;
}

:root[data-theme="light"] .card-inner {
  background: var(--card);
  box-shadow:
    0 1px 2px rgba(25, 42, 61, 0.12),
    0 4px 12px rgba(25, 42, 61, 0.08);
}

:root[data-theme="light"] .card.off-soon .card-inner {
  background: #f9e8f0;
}

:root[data-theme="light"] .history-row {
  background: #edf2f6;
}

:root[data-theme="light"] .icon-btn,
:root[data-theme="light"] .modal-cancel,
:root[data-theme="light"] .cover-cancel-btn {
  border-color: #c5d0dc;
  background: #e7edf4;
  color: #172333;
}

:root[data-theme="light"] .icon-btn:hover,
:root[data-theme="light"] .modal-cancel:hover,
:root[data-theme="light"] .cover-cancel-btn:hover {
  background: #dbe4ee;
}

:root[data-theme="light"] .mini-card {
  background: #edf2f7;
}

:root[data-theme="light"] #weather-widget {
  box-shadow:
    0 1px 2px rgba(25, 42, 61, 0.12),
    0 5px 16px rgba(25, 42, 61, 0.1);
}

:root[data-theme="light"] .wx-forecast {
  background: #f4f7fb;
}

:root[data-theme="light"] .wx-forecast-time {
  color: #2878c8;
}

:root[data-theme="light"] .wx-forecast-zone {
  color: #5f6670;
}

:root[data-theme="light"] .wx-top-label {
  background: #dce9f7;
  color: #245f9f;
}

:root[data-theme="light"] .wx-refresh-status::after {
  background: #dce9f7;
}

:root[data-theme="light"] .modal {
  background: rgba(42, 52, 67, 0.34);
}

:root[data-theme="light"] .modal-box {
  box-shadow: 0 18px 55px rgba(37, 49, 66, 0.22);
}

:root[data-theme="light"] .cover-toggle-wrap {
  border-color: #c5d0dc;
  background: #e7edf4;
}

:root[data-theme="light"] .cover-toggle-slider {
  background: #2878c8;
}

:root[data-theme="light"] .cover-name-pill {
  border: 1px solid #c5d0dc;
  background: #edf2f7;
  color: #172333;
}

:root[data-theme="light"] .cover-name-pill:hover {
  border-color: #9fb4c9;
  background: #e1e8f0;
}

:root[data-theme="light"] .cover-toggle-wrap .toggle-btn {
  color: #4f6275;
}

:root[data-theme="light"] .cover-toggle-wrap .toggle-btn.active {
  color: #fff;
}

:root[data-theme="light"] .modal-input,
:root[data-theme="light"] .modal-select,
:root[data-theme="light"] .custom-select,
:root[data-theme="light"] .custom-select-options {
  border-color: #c7d1dc;
  background: #f4f7fa;
  color: #172333;
}

:root[data-theme="light"] .custom-select-option:hover {
  background: #e1e8f0;
}

:root[data-theme="light"] #debug-open-btn,
:root[data-theme="light"] #roster-open-btn {
  border-color: #c3ceda;
  background: #ffffff;
  color: #32445a;
  box-shadow: 0 4px 14px rgba(35, 52, 73, 0.16) !important;
}

:root[data-theme="light"] #debug-panel {
  border-color: #c8d2de;
  background: #f5f7fa;
  color: #26374b;
}

:root[data-theme="light"] .settings-shell,
:root[data-theme="light"] .settings-content {
  background: #ffffff;
}

:root[data-theme="light"] .settings-header,
:root[data-theme="light"] .settings-footer,
:root[data-theme="light"] .settings-nav {
  border-color: #d9dee5;
  background: #f2f3f5;
}

:root[data-theme="light"] .settings-header h2,
:root[data-theme="light"] .settings-section-header h3,
:root[data-theme="light"] .settings-card h4,
:root[data-theme="light"] .settings-switch-row strong,
:root[data-theme="light"] .theme-option-copy strong {
  color: #20242a;
}

:root[data-theme="light"] .settings-eyebrow,
:root[data-theme="light"] .settings-nav::before,
:root[data-theme="light"] .settings-section-header p,
:root[data-theme="light"] .settings-help,
:root[data-theme="light"] .settings-switch-row small,
:root[data-theme="light"] .theme-option-copy small {
  color: #5f6670;
}

:root[data-theme="light"] .settings-close {
  border-color: #b5bbc3;
  color: #4e555f;
}

:root[data-theme="light"] .settings-nav button {
  color: #4f5660;
}

:root[data-theme="light"] .settings-nav button:hover {
  background: #e2e4e8;
  color: #272b31;
}

:root[data-theme="light"] .settings-nav button.active {
  background: #d8dbe0;
  color: #17191d;
}

:root[data-theme="light"] .settings-card {
  border-color: #d9dde3;
}

:root[data-theme="light"] .settings-field {
  color: #555d68;
}

:root[data-theme="light"] .settings-field input,
:root[data-theme="light"] .settings-field select,
:root[data-theme="light"] .position-setting-row input,
:root[data-theme="light"] .position-setting-row select {
  border-color: #b9c1cb;
  background: #ffffff;
  color: #20242a;
}

:root[data-theme="light"] .position-setting-row,
:root[data-theme="light"] .theme-option {
  background: #f2f3f5;
}

:root[data-theme="light"] .theme-option:hover {
  background: #e8eaed;
}

:root[data-theme="light"] .settings-secondary,
:root[data-theme="light"] .settings-add-position,
:root[data-theme="light"] .settings-tool-grid button {
  background: #e1e4e8;
  color: #252a31;
}

:root[data-theme="light"] .settings-secondary:hover,
:root[data-theme="light"] .settings-add-position:hover,
:root[data-theme="light"] .settings-tool-grid button:hover {
  background: #d3d7dd;
}

:root[data-theme="light"] .settings-cancel {
  color: #303640;
}

/* ============================================================
   COMPACT SETTINGS + EMBEDDED TOOLS
============================================================ */
.settings-shell {
  width: min(920px, 100%);
  height: min(700px, 100%);
}

.settings-header {
  min-height: 68px;
  padding: 13px 20px;
}

.settings-layout {
  grid-template-columns: 220px minmax(0, 1fr);
}

.settings-nav {
  padding: 20px 10px 20px 16px;
}

.settings-content {
  padding: 26px 30px 34px;
}

.settings-footer {
  min-height: 64px;
  padding: 11px 20px;
}

.zone-boundary-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.zone-boundary-grid .settings-field {
  margin-bottom: 4px;
}

.zone-boundary-grid .settings-field input {
  height: 38px;
}

.settings-debug-embedded#debug-panel {
  position: static;
  width: auto;
  height: auto;
  padding: 18px;
  border: 1px solid #3f4147;
  border-radius: 7px;
  background: #2b2d31;
  color: inherit;
  transition: none;
  z-index: auto;
}

.settings-action-list {
  overflow: hidden;
  padding: 0;
  border: 1px solid #3f4147;
  border-radius: 7px;
  background: #2b2d31;
}

.settings-action-row {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 20px;
  gap: 13px;
  align-items: center;
  padding: 12px 15px;
  border: 0;
  border-bottom: 1px solid #3f4147;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: background 0.14s ease;
}

.settings-action-row:last-child {
  border-bottom: 0;
}

.settings-action-row:hover {
  background: #35373c;
}

.settings-action-row.active {
  background: #383a40;
}

.settings-action-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #404249;
  color: #dbdee1;
  font-size: 20px;
  font-weight: 700;
  pointer-events: none;
}

.settings-action-row > span:nth-child(2),
.debug-section-heading > span:last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  pointer-events: none;
}

.settings-action-row strong,
.debug-section-heading strong {
  color: #f2f3f5;
  font-size: 15px;
}

.settings-action-row small,
.debug-section-heading small {
  color: #949ba4;
  font-size: 12px;
  line-height: 1.35;
}

.settings-action-row b {
  color: #949ba4;
  font-size: 25px;
  font-weight: 400;
  pointer-events: none;
}

.settings-inline-panel {
  padding: 16px;
  border-bottom: 1px solid #3f4147;
  background: #232428;
}

.settings-inline-panel.hidden {
  display: none;
}

.settings-inline-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(130px, 0.85fr) minmax(130px, 0.85fr);
  gap: 12px;
  align-items: end;
}

.settings-inline-panel .settings-field {
  margin: 0;
}

.settings-inline-panel select {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid #4b4d55;
  border-radius: 6px;
  background: #18191c;
  color: #f2f3f5;
  font-size: 14px;
  font-weight: 700;
}

.settings-inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.settings-inline-actions:has(.settings-save-inline:only-child) {
  justify-content: flex-start;
}

.settings-save-inline {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  background: #5865f2;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.settings-save-inline:hover {
  background: #4752c4;
}

.settings-inline-leader-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.settings-inline-leader-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 10px;
  align-items: center;
}

.settings-inline-add-row {
  margin-top: 12px;
}

.debug-section-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin-bottom: 2px;
}

.settings-debug-embedded #dbg-tools-body {
  display: block;
}

.settings-debug-embedded .dbg-section {
  margin: 0;
  padding: 16px 0;
  border: 0;
  border-top: 1px solid #3f4147;
  border-radius: 0;
  background: transparent;
}

.settings-debug-embedded .dbg-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

.settings-debug-embedded .dbg-row {
  grid-template-columns: 55px minmax(0, 1fr) 44px;
  gap: 8px;
}

.settings-debug-embedded .dbg-zone {
  flex: 1 1 30%;
  min-height: 40px;
  border: 0;
  border-radius: 4px;
  background: #404249;
  color: var(--text);
  font-weight: 700;
}

.settings-debug-embedded .dbg-zone:hover {
  background: #4e5058;
}

.settings-debug-embedded .dbg-btn {
  min-height: 42px;
  border: 0;
  border-radius: 4px;
  background: #5865f2;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.settings-debug-embedded .dbg-btn:hover {
  background: #4752c4;
}

.settings-debug-embedded .dbg-toggle {
  justify-content: space-between;
}

.settings-debug-embedded .dbg-toggle .label {
  order: -1;
  color: #dbdee1;
  font-size: 15px;
  font-weight: 700;
}

.settings-debug-embedded .dbg-row label {
  color: #b5bac1;
  font-size: 13px;
  font-weight: 700;
}

.settings-debug-embedded input[type="range"] {
  accent-color: #5865f2;
}

:root[data-theme="light"] .settings-debug-embedded#debug-panel {
  border-color: #d9dde3;
  background: #f2f3f5;
  color: #26374b;
}

:root[data-theme="light"] .settings-debug-embedded .dbg-section {
  border-color: #d9dde3;
  background: transparent;
}

:root[data-theme="light"] .settings-debug-embedded .dbg-zone,
:root[data-theme="light"] .settings-debug-embedded .dbg-btn {
  background: #e4e8ed;
  color: #252a31;
}

:root[data-theme="light"] .settings-debug-embedded .dbg-zone:hover {
  background: #d6dce3;
}

:root[data-theme="light"] .settings-debug-embedded .dbg-btn {
  background: #5865f2;
  color: #fff;
}

:root[data-theme="light"] .settings-debug-embedded .dbg-toggle .label,
:root[data-theme="light"] .settings-action-row strong,
:root[data-theme="light"] .debug-section-heading strong {
  color: #20242a;
}

:root[data-theme="light"] .settings-debug-embedded .dbg-row label,
:root[data-theme="light"] .settings-action-row small,
:root[data-theme="light"] .debug-section-heading small {
  color: #5f6670;
}

:root[data-theme="light"] .settings-action-list {
  border-color: #d9dde3;
  background: #f2f3f5;
}

:root[data-theme="light"] .settings-action-row {
  border-color: #d9dde3;
  color: #20242a;
}

:root[data-theme="light"] .settings-action-row:hover {
  background: #e8eaed;
}

:root[data-theme="light"] .settings-action-row.active {
  background: #e3e7ec;
}

:root[data-theme="light"] .settings-action-icon {
  background: #d8dbe0;
  color: #363b44;
}

:root[data-theme="light"] .settings-inline-panel {
  border-color: #d9dde3;
  background: #ffffff;
}

:root[data-theme="light"] .settings-inline-panel select {
  border-color: #b8c0cb;
  background: #f9fafb;
  color: #20242a;
}

@media (max-width: 700px) {
  .settings-shell {
    width: 100%;
    height: 100%;
  }

  .settings-content {
    padding: 20px 16px 30px;
  }

  .zone-boundary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-inline-grid {
    grid-template-columns: 1fr;
  }

  .settings-inline-actions {
    flex-direction: column-reverse;
  }

  .settings-inline-actions button {
    width: 100%;
  }
}


/* =========================================
   PHONE PORTRAIT — mini-card adjustments
========================================= */
body[data-layout="phone-portrait"] .mini-card-wrapper {
  margin-top: -10px;        /* tighten spacing if you want */
}

body[data-layout="phone-portrait"] .mini-card {
  width: 100% !important;          /* full width */
  margin: 0 !important;            /* remove right offset */
  grid-template-columns: 1fr auto auto; /* name | X button | timer */
  gap: 6px;                        /* adjust spacing inside */
  height: 42px;                    /* tweak as needed */
  padding: 6px 10px;
  margin-right: 24px !important;
}

/* Smaller, mobile-friendly name */
body[data-layout="phone-portrait"] .mini-card .mini-name {
  font-size: 10px;                /* 🔥 tweak smaller or bigger */
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================
   Replace "End Cover" with a square X button
========================================= */
body[data-layout="phone-portrait"] .mini-card .mini-end-btn {
  width: 20px;                   /* 🔥 square size (tweak) */
  height: 20px;
  padding: 0;
  position: relative;
  color: transparent !important; /* hide original "End Cover" text */
  font-size: 0 !important;       /* neutralize text height */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* X replacement (visible) */
body[data-layout="phone-portrait"] .mini-card .mini-end-btn::before {
  content: "✕";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;               /* 🔥 X size */
  font-weight: 900;
  color: #fff;
}

/* Mini timer size */
body[data-layout="phone-portrait"] .mini-card .mini-timer {
  font-size: 12px;
  margin-right: 0;
}

/* =========================================
   PHONE PORTRAIT — tighten inside/outside column gap
========================================= */
body[data-layout="phone-portrait"] .column {
  padding: 0 4px !important;       /* reduce space BETWEEN the two columns */
}

/* =========================================
   PHONE PORTRAIT — tighter card padding
   without exposing delete background
========================================= */
body[data-layout="phone-portrait"] .card {
  min-height: 0;
  height: auto;
  padding-top: 0;      /* outer shell has NO vertical padding */
  padding-bottom: 0;
}

/* The sliding inner card controls visual padding */
body[data-layout="phone-portrait"] .card-inner {
  min-height: 0;
  height: auto;

  /* 🔥 tighten these values */
  padding-top: 4px;     
  padding-bottom: 0px;  /* VERY tight bottom padding */
}

/* Prevent flex spacing from creating artificial height */
body[data-layout="phone-portrait"] .card-main {
  justify-content: flex-start;
}

/* Final thermometer alignment override */
.thermometer-scale { height: 92px; }
.thermometer-scale::before { top: 40px; }
.thermometer-boundary { top: 26px; }
.thermometer-labels,
.thermometer-values {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  pointer-events: none;
}
.thermometer-labels { top: 0; height: 28px; align-items: end; }
.thermometer-values { top: 68px; height: 18px; align-items: start; }
.thermometer-labels span,
.thermometer-labels span.staggered,
.thermometer-values span,
.thermometer-values span.staggered {
  position: static;
  width: auto;
  transform: none;
  text-align: center;
}
.thermometer-labels span,
.thermometer-labels span.staggered {
  top: auto;
  color: #b5bac1;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  white-space: normal;
}
.thermometer-values span,
.thermometer-values span.staggered {
  top: auto;
  color: #f2f3f5;
  font-size: 11px;
  font-weight: 800;
}
.thermometer-endpoints { margin-top: -2px; }
:root[data-theme="light"] .thermometer-labels span { color: #5f6670; }
:root[data-theme="light"] .thermometer-values span { color: #20242a; }
@media (max-width: 700px) {
  .thermometer-labels span,
  .thermometer-labels span.staggered { font-size: 8px; }
  .thermometer-values span,
  .thermometer-values span.staggered { font-size: 9px; }
}

/* Zone names center within their live temperature sections. */
.thermometer-labels,
.thermometer-values {
  display: block;
}

.thermometer-labels span,
.thermometer-values span {
  position: absolute;
  width: auto;
  transform: translateX(-50%);
  white-space: nowrap;
}

.thermometer-labels span {
  color: #b5bac1;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.25px;
  text-transform: uppercase;
}

.thermometer-values span {
  color: #f2f3f5;
  font-size: 11px;
  font-weight: 800;
}

:root[data-theme="light"] .thermometer-labels span { color: #5f6670; }
:root[data-theme="light"] .thermometer-values span { color: #20242a; }

@media (max-width: 700px) {
  .thermometer-labels span { font-size: 7px; }
  .thermometer-values span { font-size: 9px; }
}

.thermometer-labels span[data-zone-index="0"] { color: #6f83df; }
.thermometer-labels span[data-zone-index="1"] { color: #8b70df; }
.thermometer-labels span[data-zone-index="2"] { color: #4699e3; }
.thermometer-labels span[data-zone-index="3"] { color: #4fa56b; }
.thermometer-labels span[data-zone-index="4"] { color: #d39a2c; }
.thermometer-labels span[data-zone-index="5"] { color: #dc7835; }
.thermometer-labels span[data-zone-index="6"] { color: #df5660; }

:root[data-theme="light"] .thermometer-labels span[data-zone-index="0"] { color: #445bb8; }
:root[data-theme="light"] .thermometer-labels span[data-zone-index="1"] { color: #684caf; }
:root[data-theme="light"] .thermometer-labels span[data-zone-index="2"] { color: #176eaf; }
:root[data-theme="light"] .thermometer-labels span[data-zone-index="3"] { color: #247847; }
:root[data-theme="light"] .thermometer-labels span[data-zone-index="4"] { color: #956500; }
:root[data-theme="light"] .thermometer-labels span[data-zone-index="5"] { color: #a94f16; }
:root[data-theme="light"] .thermometer-labels span[data-zone-index="6"] { color: #b72f40; }

.settings-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-card-heading h4 {
  margin: 0;
}

.settings-section-reset {
  padding: 3px 7px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #949ba4;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.14s ease, color 0.14s ease;
}

.settings-section-reset:hover {
  background: #404249;
  color: #f2f3f5;
}

:root[data-theme="light"] .settings-section-reset {
  color: #68707a;
}

:root[data-theme="light"] .settings-section-reset:hover {
  background: #e1e4e8;
  color: #20242a;
}

.role-exposure-toggle {
  position: relative;
  height: 42px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid #3f4147;
  border-radius: 6px;
  background: #1e1f22;
}

.role-exposure-slider {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: 4px;
  background: #5865f2;
  transform: translateX(calc(var(--exposure-index) * 100%));
  transition: transform 0.18s ease, background 0.18s ease;
}

.role-exposure-toggle[data-exposure-state="half"] .role-exposure-slider {
  background: #a87400;
}

.role-exposure-toggle[data-exposure-state="none"] .role-exposure-slider {
  background: #4e5058;
}

.role-exposure-toggle button {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #949ba4;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition: color 0.15s ease;
}

.role-exposure-toggle button.active {
  color: #fff;
}

:root[data-theme="light"] .role-exposure-toggle {
  border-color: #c4ccd5;
  background: #e4e8ed;
}

:root[data-theme="light"] .role-exposure-toggle button {
  color: #5f6670;
}

:root[data-theme="light"] .role-exposure-toggle button.active {
  color: #fff;
}

@media (max-width: 700px) {
  .position-setting-row .role-exposure-toggle {
    grid-column: 2 / 4;
  }
}

.role-settings-header {
  display: grid;
  grid-template-columns: 32px minmax(110px, 1fr) 48px 145px 42px;
  gap: 8px;
  align-items: center;
  min-height: 22px;
  padding: 0 8px 7px;
  color: #949ba4;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}

.role-settings-header span {
  display: flex;
  align-items: center;
  min-height: 18px;
  line-height: 1;
}

.role-settings-header span:nth-child(3) {
  justify-content: center;
  text-align: center;
}

.role-settings-header span:nth-child(4) {
  justify-content: center;
  text-align: center;
}

:root[data-theme="light"] .role-settings-header {
  color: #68707a;
}

@media (max-width: 700px) {
  .role-settings-header {
    grid-template-columns: 26px minmax(0, 1fr) 48px;
    row-gap: 5px;
  }

  .role-settings-header span:nth-child(4) {
    grid-column: 2 / 4;
    text-align: center;
  }

  .role-settings-header span:nth-child(5) {
    display: none;
  }
}

/* Keep role headings and role rows on one shared column grid. */
.position-setting-row,
.role-settings-header {
  grid-template-columns: 32px minmax(110px, 1fr) 48px 145px 42px;
}

@media (max-width: 700px) {
  .position-setting-row,
  .role-settings-header {
    grid-template-columns: 26px minmax(0, 1fr) 48px;
  }
}

.role-exposure-help {
  margin: 0 0 12px;
}

.exposure-formula {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 8px;
  background: #232428;
}

.exposure-formula span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #dbdee1;
  font-size: 12px;
  font-weight: 700;
}

.exposure-formula span b { font-size: 16px; }
.exposure-formula > i { color: #80848e; font-style: normal; font-weight: 800; }
.exposure-formula-result { color: #fff !important; }

.exposure-guide-tables {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 12px;
}

.exposure-guide-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid #3f4147;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  color: #dbdee1;
  font-size: 13px;
}

.exposure-guide-table caption {
  padding: 0 0 7px;
  color: #b5bac1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .5px;
  text-align: left;
  text-transform: uppercase;
}

.exposure-guide-table th,
.exposure-guide-table td { padding: 8px 10px; border-bottom: 1px solid #3f4147; }
.exposure-guide-table tr:last-child th,
.exposure-guide-table tr:last-child td { border-bottom: 0; }
.exposure-guide-table th { font-weight: 600; text-align: left; }
.exposure-guide-table td { width: 52px; color: #fff; font-weight: 800; text-align: right; }

.exposure-zone-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
}
.exposure-zone-dot.safe { background: #43b581; }
.exposure-zone-dot.mild { background: #4da3ff; }
.exposure-zone-dot.caution { background: #faa61a; }
.exposure-zone-dot.extreme { background: #ed4245; }

.exposure-symbol-key,
.exposure-cover-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #232428;
  color: #b5bac1;
  font-size: 12px;
}
.exposure-symbol-key span { color: #dbdee1; font-weight: 700; }
.exposure-symbol-key b { margin-right: 3px; font-size: 16px; }
.exposure-symbol-key strong,
.exposure-cover-note strong { margin-left: auto; color: #dbdee1; }
.exposure-cover-note span { padding: 4px 7px; border: 1px solid #4f545c; border-radius: 5px; color: #dbdee1; font-size: 10px; font-weight: 800; }
.exposure-cover-note b { color: #b5bac1; }
.exposure-reset-note { margin: 10px 0 0; color: #949ba4; font-size: 12px; }

@media (max-width: 700px) {
  .exposure-formula { flex-wrap: wrap; }
  .exposure-guide-tables { grid-template-columns: 1fr; }
  .exposure-symbol-key,
  .exposure-cover-note { flex-wrap: wrap; }
  .exposure-symbol-key strong,
  .exposure-cover-note strong { width: 100%; margin-left: 0; }
}

:root[data-theme="light"] .exposure-formula,
:root[data-theme="light"] .exposure-symbol-key,
:root[data-theme="light"] .exposure-cover-note { background: #f2f3f5; }
:root[data-theme="light"] .exposure-formula span,
:root[data-theme="light"] .exposure-formula-result,
:root[data-theme="light"] .exposure-guide-table,
:root[data-theme="light"] .exposure-guide-table td,
:root[data-theme="light"] .exposure-symbol-key span,
:root[data-theme="light"] .exposure-symbol-key strong,
:root[data-theme="light"] .exposure-cover-note strong,
:root[data-theme="light"] .exposure-cover-note span { color: #20242a !important; }
:root[data-theme="light"] .exposure-guide-table,
:root[data-theme="light"] .exposure-guide-table th,
:root[data-theme="light"] .exposure-guide-table td { border-color: #d9dee5; }

.team-leadership-settings {
  display: grid;
  gap: 12px;
}

.team-leadership-settings .settings-field {
  margin-bottom: 0;
}

.team-leadership-overview,
.team-off-soon-overview { display: grid; grid-template-columns: minmax(180px, .8fr) minmax(300px, 1.2fr); gap: 26px; align-items: center; }
.settings-card.team-leadership-overview { margin-bottom: 10px; padding-bottom: 6px; border-bottom: 0; }
.settings-card.team-off-soon-overview { margin-top: 0; margin-bottom: 0; padding-top: 20px; padding-bottom: 14px; border-top: 1px solid #3f4147; border-bottom: 0; }
.settings-card.off-soon-preview-section { padding-top: 0; border-top: 0; }
.settings-card-heading.off-soon-preview-heading { justify-content: flex-start; width: min(100%, 520px); margin: 0 auto 9px; }
.off-soon-preview-heading .source-status { margin-left: 0; }
.team-leadership-overview .settings-switch-row,
.team-off-soon-overview .settings-switch-row,
.team-leadership-overview .settings-field { margin: 0; }
.team-setting-column { min-width: 0; }
.team-sort-column,
.off-soon-time-group { padding-left: 24px; border-left: 1px solid #3f4147; }
.team-setting-label { margin-bottom: 9px; color: #949ba4; font-size: 11px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }

.team-single-action { margin-bottom: 20px; }

.settings-action-chevron {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #949ba4;
  pointer-events: none;
  transition: transform .16s ease, color .16s ease;
}

.settings-action-chevron svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.settings-action-row.active .settings-action-chevron { transform: rotate(90deg); color: #dbdee1; }

.off-soon-time-group.disabled,
.off-soon-preview-section.disabled { opacity: .42; pointer-events: none; filter: grayscale(.35); }

.off-soon-time-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.off-soon-time-option { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 48px; padding: 0 8px; border: 1px solid #4a4d54; border-radius: 7px; background: #35373c; color: #b5bac1; cursor: pointer; text-align: center; }
.off-soon-time-option input { position: absolute; opacity: 0; pointer-events: none; }
.off-soon-time-option strong { font-size: 18px; }
.off-soon-time-option span { font-size: 11px; font-weight: 800; }
.off-soon-time-option.selected { border-color: #d85b91; background: rgba(216,91,145,.16); color: #ffacd0; box-shadow: inset 0 0 0 1px rgba(216,91,145,.18); }

.settings-off-soon-card-preview { width: min(100%, 520px); margin: 0 auto; pointer-events: none; }
.settings-off-soon-card-preview .secondary-status-bar { display: flex; }
.settings-off-soon-card-preview .icon-btn { cursor: default; }
.settings-off-soon-card-preview .timer-value { white-space: nowrap; }

:root[data-theme="light"] .settings-action-row.active .settings-action-chevron { color: #20242a; }
:root[data-theme="light"] .team-sort-column,
:root[data-theme="light"] .off-soon-time-group { border-color: #d9dde3; }
:root[data-theme="light"] .settings-card.team-off-soon-overview { border-top-color: #d9dde3; }
:root[data-theme="light"] .off-soon-time-option { border-color: #c8cdd4; background: #f3f4f6; color: #5f6670; }
:root[data-theme="light"] .off-soon-time-option.selected { border-color: #bd4b7d; background: #f9e8f0; color: #842d55; }

@media (max-width: 720px) {
  .team-leadership-overview,
  .team-off-soon-overview { grid-template-columns: 1fr; gap: 18px; }
  .team-sort-column,
  .off-soon-time-group { padding-top: 18px; padding-left: 0; border-top: 1px solid #3f4147; border-left: 0; }
  :root[data-theme="light"] .team-sort-column,
  :root[data-theme="light"] .off-soon-time-group { border-top-color: #d9dde3; }
}

@media (max-width: 700px) {
  .role-exposure-help {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #232428;
    line-height: 1.4;
  }

  .role-settings-header {
    display: none;
  }

  .position-setting-row {
    grid-template-columns: 28px minmax(0, 1fr) 56px 38px !important;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 12px;
  }

  .position-setting-row .position-name-input {
    grid-column: 2;
  }

  .position-setting-row .visual-color-picker {
    grid-column: 3;
    justify-self: center;
  }

  .position-setting-row .role-exposure-toggle {
    grid-column: 1 / -1 !important;
    width: 100%;
  }

  .position-setting-row .position-delete {
    grid-column: 4;
    grid-row: 1;
    width: 38px;
    height: 42px;
  }
}

:root[data-theme="light"] .role-exposure-help {
  background: #f2f3f5;
}

/* Final settings button normalization. Several older settings passes define
   footer buttons, so keep this near the end as the source of truth. */
.settings-footer {
  min-height: 64px;
  padding: 11px 20px;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid #3f4147;
  background: #2b2d31;
}

.settings-footer button,
.settings-save-inline {
  min-height: 40px;
  border-radius: 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.settings-footer button {
  min-width: 118px;
  padding: 0 14px;
  border: 0;
}

.settings-cancel {
  background: #404249;
  color: #f2f3f5;
}

.settings-cancel:hover {
  background: #4e5058;
  text-decoration: none;
}

.settings-save,
.settings-save-inline {
  border: 0;
  background: #5865f2;
  color: #fff;
}

.settings-save:hover,
.settings-save-inline:hover {
  background: #4752c4;
}

.settings-save:disabled,
.settings-save:disabled:hover {
  background: #404249;
  color: #949ba4;
  cursor: not-allowed;
  opacity: .72;
}

:root[data-theme="light"] .settings-save:disabled,
:root[data-theme="light"] .settings-save:disabled:hover {
  background: #d5d8dc;
  color: #7a8088;
}

/* Floating roster and short-lived undo controls. */
#tools-home-btn {
  position: fixed;
  right: 82px;
  bottom: 20px;
  min-width: 96px;
  height: 50px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #2d3552;
  border-radius: 25px;
  background: #1a1f33;
  color: #cbd8ef;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  z-index: 9998;
}
#tools-home-btn:hover { background: #252c46; }
.tools-home-icon { display: grid; grid-template-columns: repeat(3, 4px); grid-template-rows: repeat(3, 4px); gap: 2px; }
.tools-home-icon i { width: 4px; height: 4px; border-radius: 1px; background: currentColor; }
#debug-open-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="light"] #tools-home-btn { border-color: #c8ced8; background: #fff; color: #252a32; box-shadow: 0 8px 22px rgba(40,48,60,.12); }
:root[data-theme="light"] #tools-home-btn:hover { background: #eef1f5; }

#roster-open-btn {
  right: 190px;
  bottom: 20px;
  width: auto;
  min-width: 108px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 25px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

#roster-open-btn svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

#undo-action-btn {
  position: fixed;
  right: 20px;
  bottom: 82px;
  min-width: 104px;
  height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #3f4b70;
  border-radius: 10px;
  background: #242b43;
  color: #f2f3f5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  cursor: pointer;
  z-index: 9999;
}

#undo-action-btn.hidden { display: none; }
#undo-action-btn:hover { background: #303a5a; }
#undo-action-btn:disabled { cursor: wait; opacity: .65; }
.undo-action-icon { font-size: 24px; line-height: 1; }
.undo-action-copy { display: flex; align-items: baseline; gap: 6px; }
.undo-action-copy strong { font-size: 13px; }
.undo-action-copy small { color: #aebbd4; font-size: 11px; font-weight: 800; }

:root[data-theme="light"] #undo-action-btn {
  border-color: #c8ced8;
  background: #fff;
  color: #252a32;
  box-shadow: 0 8px 22px rgba(40, 48, 60, .16);
}
:root[data-theme="light"] #undo-action-btn:hover { background: #eef1f5; }
:root[data-theme="light"] .undo-action-copy small { color: #687180; }

#inside-column { display: flex; flex-direction: column; }
#inside-list { order: 1; padding-bottom: 0; }
#add-member-open-btn { order: 2; width: 100%; min-height: 72px; margin: 8px 0 0; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px dashed #3f4b70; border-radius: 14px; background: var(--card); color: var(--text); cursor: pointer; padding: 12px; }
#add-member-open-btn.hidden { display: none; }
#add-member-open-btn:hover { border-color: #5865f2; background: color-mix(in srgb, var(--card) 88%, #5865f2); }
.add-member-card-plus { position: relative; display: block; width: 42px; height: 42px; border: 1px solid #5865f2; border-radius: 50%; background: rgba(88,101,242,.18); color: #aeb7ff; }
.add-member-card-plus::before,
.add-member-card-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.add-member-card-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
:root[data-theme="light"] #add-member-open-btn { border-color: #9aa8c8; background: rgba(255,255,255,.72); }

.custom-select.disabled {
  cursor: not-allowed;
  opacity: .48;
  filter: grayscale(.35);
}

.shift-import-instructions {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 88%, var(--bg));
  color: var(--muted);
}
.shift-import-instructions strong { color: var(--text); }
.shift-import-instructions p { margin: 5px 0 0; }
.shift-import-instructions ol { margin: 10px 0 0; padding-left: 20px; }
.shift-import-instructions li + li { margin-top: 6px; }

@media (max-width: 520px) {
  #tools-home-btn {
    right: 82px;
    min-width: 50px;
    width: 50px;
    padding: 0;
    border-radius: 50%;
  }
  #tools-home-btn > span:last-child { display: none; }
  #roster-open-btn {
    right: 144px;
    min-width: 50px;
    width: 50px;
    padding: 0;
    border-radius: 50%;
  }
  #roster-open-btn span { display: none; }
}

:root[data-theme="light"] .settings-footer {
  border-color: #d9dde3;
  background: #f2f3f5;
}

:root[data-theme="light"] .settings-cancel {
  background: #e1e4e8;
  color: #252a31;
}

:root[data-theme="light"] .settings-cancel:hover {
  background: #d6dce3;
}

/* Shift importing */
.shift-source-list { display: grid; gap: 9px; }
.shift-source-option {
  display: grid; grid-template-columns: 42px 1fr 18px; align-items: center; gap: 12px;
  padding: 12px; border: 1px solid #42454d; border-radius: 8px; background: #313338;
  cursor: pointer;
}
.shift-source-option:hover { border-color: #67709a; background: #35383e; }
.shift-source-option.selected { border-color: #7482ff; background: #34384c; }
.shift-source-option input { position: absolute; opacity: 0; pointer-events: none; }
.shift-source-option small, .csv-drop-zone small { display: block; margin-top: 4px; color: #b5bac1; }
.shift-source-option > i {
  width: 15px; height: 15px; border: 2px solid #777d87; border-radius: 50%;
  box-shadow: inset 0 0 0 3px #313338;
}
.shift-source-option.selected > i { border-color: #8791ff; background: #8791ff; }
.shift-source-icon {
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: #25272b; color: #dfe2ff; font-size: 17px; font-weight: 900;
}
.settings-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.source-status {
  flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #41444a;
  color: #c6c9cf; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
}
.source-status.active { background: #244f3a; color: #8de0ae; }
.shift-import-detail { margin-top: 12px; }
.shift-import-notice, .shift-import-warning {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 7px; background: #2e405f; color: #dbe8ff;
  font-size: 12px; font-weight: 700;
}
.shift-import-detail > .shift-import-notice { margin: 8px 0 0; }
.shift-import-warning { margin-top: 10px; background: #574321; color: #ffe0a2; }
.csv-drop-zone {
  margin-top: 12px; min-height: 104px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 3px; border: 1px dashed #65708a; border-radius: 8px; cursor: pointer;
}
.csv-drop-zone:hover { background: #363941; }
.csv-drop-zone input { position: absolute; opacity: 0; pointer-events: none; }
.settings-inline-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.settings-inline-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.settings-secondary {
  min-height: 40px; padding: 0 13px; border: 0; border-radius: 5px; background: #404249;
  color: #f2f3f5; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.settings-save-inline { min-height: 40px; padding: 0 14px; }
.settings-save-inline:disabled { background: #404249; color: #949ba4; cursor: not-allowed; }
.hs-setup-hidden { display: none !important; }
.hs-connection-card.initialized .hs-credential-grid { display: none; }
.hs-jobs-card { padding: 12px !important; }
.hs-job-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.hs-job-toggle { display: flex; gap: 8px; align-items: center; padding: 7px 8px; border: 1px solid transparent; border-radius: 6px; background: #2b2d31; cursor: pointer; }
.hs-job-toggle:has(input:checked) { border-color: #5865f2; background: rgba(88, 101, 242, .2); }
.hs-job-toggle input { accent-color: #7b86ff; }
.hs-job-toggle strong { font-size: 12px; }
.hs-job-toggle small { display: block; margin-top: 2px; color: #949ba4; font-size: 10px; }
.shift-import-status-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; }
.shift-import-status-card dl div { padding: 9px; border-radius: 6px; background: #2b2d31; }
.shift-import-status-card dt { color: #aeb2b9; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.shift-import-status-card dd { margin: 5px 0 0; font-size: 12px; font-weight: 800; }

:root[data-theme="light"] .shift-source-option { border-color: #d4d8df; background: #fff; }
:root[data-theme="light"] .shift-source-option:hover { background: #f6f7f9; }
:root[data-theme="light"] .shift-source-option.selected { border-color: #5865f2; background: #eef0ff; }
:root[data-theme="light"] .shift-source-icon,
:root[data-theme="light"] .hs-job-toggle,
:root[data-theme="light"] .shift-import-status-card dl div { background: #eef0f3; color: #353b48; }
:root[data-theme="light"] .shift-source-option > i { box-shadow: inset 0 0 0 3px #fff; }
:root[data-theme="light"] .settings-secondary { background: #e1e4e8; color: #252a31; }
:root[data-theme="light"] .hs-job-toggle:has(input:checked) { border-color: #5865f2; background: #e8eaff; }

.store-pin-overlay {
  position: fixed; inset: 0; z-index: 12000000; display: grid; place-items: center;
  padding: 20px; background: rgba(8, 9, 12, .72);
}
.store-pin-dialog {
  width: min(360px, 100%); padding: 20px; border: 1px solid #444852; border-radius: 12px;
  background: #1e1f22; box-shadow: 0 22px 70px rgba(0,0,0,.45);
}
.store-pin-dialog h4 { margin: 0 0 6px; font-size: 18px; }
.store-pin-dialog p { margin: 0 0 14px; color: #b5bac1; font-size: 13px; }
.store-pin-dialog input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #464a54; border-radius: 7px; background: #111214; color: #fff; font-size: 17px; }
.store-pin-dialog > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
:root[data-theme="light"] .store-pin-dialog { border-color: #d4d8df; background: #fff; }
:root[data-theme="light"] .store-pin-dialog input { border-color: #ccd1d8; background: #f2f3f5; color: #20242a; }

@media (max-width: 720px) {
  .settings-inline-grid, .hs-job-list, .shift-import-status-card dl { grid-template-columns: 1fr; }
}

.account-session-card { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.admin-preview-active { padding-top: 48px; }
.admin-preview-banner { position: fixed; inset: 0 0 auto; z-index: 11000000; min-height: 48px; display: grid; place-items: center; padding: 5px 124px; border-bottom: 1px solid rgba(36,21,0,.22); background: #f0a72f; color: #241500; box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.admin-preview-title { display: grid; place-items: center; gap: 0; text-align: center; line-height: 1; }
.admin-preview-banner strong { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; }
.admin-preview-banner span { font-size: 16px; font-weight: 900; }
.admin-preview-banner button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 1px solid rgba(36,21,0,.35); border-radius: 999px; background: rgba(255,255,255,.46); color: #241500; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 800; padding: 7px 11px; }
.admin-preview-banner button:hover { border-color: rgba(36,21,0,.6); background: rgba(255,255,255,.65); }
.admin-preview-banner.hidden { display: none; }
.demo-mode-banner{position:fixed;inset:0 0 auto;z-index:11000000;min-height:40px;display:grid;place-items:center;padding:4px 112px;border-bottom:1px solid rgba(11,43,64,.28);background:#67b8e8;color:#10263a;box-shadow:0 4px 18px #0004}.demo-mode-banner[hidden]{display:none}.demo-mode-banner strong{font-size:11px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}.demo-mode-banner button{position:absolute;right:8px;top:50%;padding:5px 10px;transform:translateY(-50%);border:1px solid #17365366;border-radius:999px;background:#ffffff75;color:#10263a;font:inherit;font-size:10px;font-weight:850;cursor:pointer}.demo-mode-banner button:hover{border-color:#173653aa;background:#ffffffa8}body.demo-mode{padding-top:40px}body.demo-mode .tool-launcher-screen,body.demo-mode .tool-workspace-screen{inset:40px 0 0}body.demo-mode #settings-modal,body.demo-mode #roster-modal{inset:40px 0 0}.demo-mode-banner-error{background:#ed8179;color:#32120f}@media(max-width:700px){.demo-mode-banner{min-height:36px;padding:3px 92px}.demo-mode-banner strong{font-size:10px}.demo-mode-banner button{right:6px;padding:4px 8px;font-size:9px}body.demo-mode{padding-top:36px}body.demo-mode .tool-launcher-screen,body.demo-mode .tool-workspace-screen{inset:36px 0 0}body.demo-mode #settings-modal,body.demo-mode #roster-modal{inset:36px 0 0}}
.admin-preview-active #settings-modal,
.admin-preview-active #roster-modal { inset: 48px 0 0; }
.admin-preview-active .tool-launcher-screen { inset: 48px 0 0; }
.admin-preview-active #roster-modal {
  padding: 10px 0;
  box-sizing: border-box;
}
.admin-preview-active #roster-modal .roster-box {
  max-height: min(760px, calc(100dvh - 68px));
}
@media (max-width: 520px) {
  .admin-preview-banner { min-height: 48px; padding: 5px 96px; }
  .admin-preview-active { padding-top: 48px; }
  .admin-preview-title { justify-self: center; }
  .admin-preview-banner button { right: 7px; padding: 7px 9px; }
}
.account-session-card h4 { margin: 5px 0 0; font-size: 18px; }
.settings-danger {
  min-height: 40px; padding: 0 16px; border: 1px solid #7d3340; border-radius: 6px;
  background: #4a252c; color: #ffd9df; font-family: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.settings-danger:hover { background: #62303a; }

/* App-style cursor behavior: keep one stable arrow across every surface,
   including the borders and editable centers of form fields. */
html,
body,
body * {
  cursor: default !important;
}
.settings-danger:disabled { opacity: .65; cursor: wait; }
:root[data-theme="light"] .settings-danger { border-color: #e0abb4; background: #fff0f2; color: #9d2338; }
@media (max-width: 520px) { .account-session-card { align-items: stretch; flex-direction: column; } }

/* Keep the shared Tools and Settings controls visually identical in every app. */
:root[data-theme="dark"] .equipment-settings-open-btn {
  border-color: #35383e;
  background: #1c1e21;
  color: #d7d9dc;
}
:root[data-theme="light"] .equipment-settings-open-btn {
  border-color: #c3ceda;
  background: #fff;
  color: #32445a;
  box-shadow: 0 4px 14px rgba(35, 52, 73, 0.16);
}

/* Team Hub */
.team-hub-app,.team-editor-overlay{--panel:var(--card);--panel-2:color-mix(in srgb,var(--card) 90%,var(--bg));--border:var(--line)}
.team-editor-grid [hidden]{display:none!important}
.tool-workspace-screen[data-tool="team-hub"] .tool-workspace-header{display:none}.tool-workspace-screen[data-tool="team-hub"] .tool-workspace-canvas{overflow-y:auto;padding:0}
.team-hub-app{min-height:100%;padding:28px 28px 94px;color:var(--text);background:var(--bg)}
.team-hub-header{max-width:1120px;margin:0 auto 18px}.team-hub-header h2{margin:0;font-size:30px}.team-hub-header span{color:var(--muted);font-size:13px}
.team-hub-tabs{max-width:1120px;margin:0 auto 20px;display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--border)}
.team-hub-tabs button{border:0;background:transparent;color:var(--muted);padding:12px 14px;font:700 13px inherit;white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent}.team-hub-tabs button.active{color:var(--text);border-color:#f4c542}.team-hub-tabs span{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;border-radius:9px;background:var(--panel-2);font-size:10px}
.team-hub-app>main{max-width:1120px;margin:auto}.team-hub-panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:20px}.team-hub-panel>header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.team-hub-panel h3,.team-hub-panel p{margin:0}.team-hub-panel header p{margin-top:4px;color:var(--muted);font-size:13px}
.team-primary,.team-hub-panel button,.team-hub-corner-actions button,.team-editor-modal button{font:750 13px inherit;cursor:pointer}.team-primary{border:0;border-radius:9px;padding:10px 14px;background:#f4c542;color:#181818}
.team-builder-list{display:grid;gap:8px}.team-builder-item{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px;border:1px solid var(--border);border-radius:10px;background:var(--panel-2)}.team-builder-item.hidden-item{opacity:.55}.team-item-kind{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:color-mix(in srgb,#f4c542 16%,transparent);color:#d7aa21;font-size:9px;font-weight:900}.team-builder-item strong,.team-builder-item small{display:block}.team-builder-item small{margin-top:3px;color:var(--muted);font-size:11px}.team-builder-actions{display:flex;gap:5px}.team-builder-actions button{border:1px solid var(--border);border-radius:7px;padding:7px 9px;background:transparent;color:var(--text)}.team-builder-actions button:disabled{opacity:.3;cursor:default}
.team-hub-app:has(.team-builder-workspace)>main{max-width:none}.team-hub-app:has(.team-builder-workspace)>.team-hub-header,.team-hub-app:has(.team-builder-workspace)>.team-hub-tabs{max-width:none;margin-right:390px}.team-builder-workspace{display:grid;grid-template-columns:minmax(480px,760px) 350px;align-items:start;justify-content:space-between;gap:38px}.team-builder-canvas{min-width:0}.team-builder-sections{display:grid;gap:14px}.team-builder-section{overflow:hidden;border:1px solid var(--border);border-radius:11px;background:var(--bg);transition:opacity .15s,transform .15s}.team-builder-section.dragging,.team-builder-item.dragging{opacity:.42;transform:scale(.99)}.team-builder-section>header{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;margin:0!important;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--panel-2)}.team-builder-section>header input{min-width:0;border:0;background:transparent;color:var(--text);font:850 14px inherit}.team-builder-section>header>div{display:flex;gap:4px}.team-builder-section>header button{width:28px;height:28px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--muted)}.team-drag-handle{color:var(--muted);font-size:18px;line-height:1;cursor:grab}.team-builder-section .team-builder-list{padding:9px}.team-builder-section .team-builder-item{grid-template-columns:20px 36px minmax(0,1fr) auto;padding:9px}.team-section-add-item{width:100%;padding:10px;border:1px dashed var(--border);border-radius:8px;background:transparent;color:var(--muted)}.team-live-preview{position:sticky;top:28px;display:grid;justify-items:center;gap:9px;margin-top:-141px;padding-left:28px;border-left:1px solid var(--border)}body.admin-preview-active .team-live-preview{top:76px}.team-live-preview>span,.team-preview-page>span{font-size:10px;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.team-phone-frame{--phone-available:calc(100dvh - 48px);display:flex;flex-direction:column;width:min(320px,calc(var(--phone-available)*.516));height:min(620px,var(--phone-available));box-sizing:border-box;padding:10px 7px 12px;border:3px solid #3b414c;border-radius:36px;background:#080a0d;box-shadow:0 22px 55px #0006}body.admin-preview-active .team-phone-frame{--phone-available:calc(100dvh - 96px)}.team-phone-speaker{flex:0 0 5px;width:22.5%;height:5px;margin:2px auto 8px;border-radius:99px;background:#303641}.team-phone-home{flex:0 0 4px;width:25.6%;height:4px;margin:10px auto 0;border-radius:99px;background:#353b45}.team-phone-frame .team-public-preview{flex:1 1 auto;min-height:0;overflow-y:auto;border:0;border-radius:25px;background:var(--panel-2)}.team-phone-frame .team-public-preview header{padding:24px 17px}.team-phone-frame .team-public-preview header h2{font-size:23px}.team-phone-frame .team-public-preview-body{padding:13px}.team-phone-frame .team-preview-link{grid-template-columns:30px 1fr auto;padding:9px}.team-phone-frame .team-preview-link strong{font-size:12px}.team-phone-frame .team-preview-link small{font-size:9px}.team-preview-page{display:grid;justify-items:center;gap:10px}.team-section-modal{width:min(430px,100%)}.team-section-modal form>label{display:grid;gap:7px}.team-section-modal form>label span{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase}.team-section-modal form>label input{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--text);padding:11px;font:inherit}
.team-empty{text-align:center;padding:44px 18px;color:var(--muted)}.team-empty h3{color:var(--text);margin-bottom:7px}.team-native-form-card{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}.team-native-form-card>span{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:#f4c542;color:#111;font-weight:900}.team-native-form-card small{display:block;color:var(--muted);margin-top:3px}.team-native-form-card button{border:1px solid var(--border);border-radius:8px;padding:9px 12px;background:transparent;color:var(--text)}
.team-submission-list{display:grid;gap:8px}.team-submission-list article{padding:13px;border:1px solid var(--border);border-radius:9px;background:var(--panel-2)}.team-submission-list article>span{font-size:9px;font-weight:850;color:var(--muted);text-transform:uppercase}.team-submission-list strong{display:block;margin-top:3px}.team-submission-list p{margin:7px 0;color:var(--text);font-size:13px}.team-submission-list footer{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px}.team-submission-list footer b{color:var(--text)}
.team-settings-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:26px}.team-settings-fields{display:grid;gap:15px}.team-settings-fields label,.team-editor-grid label{display:grid;gap:7px}.team-settings-fields label>span,.team-editor-grid label>span{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.team-settings-fields input,.team-settings-fields textarea,.team-editor-grid input,.team-editor-grid textarea,.team-editor-grid select{width:100%;box-sizing:border-box;border:1px solid var(--border);border-radius:8px;background:var(--input-bg,var(--panel-2));color:var(--text);padding:10px 11px;font:500 14px inherit}.team-url-row{display:flex;gap:7px}.team-url-row input{min-width:0}.team-url-row button,.team-qr-card button{border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--text);padding:9px 12px}.team-danger-link{justify-self:start;border:0!important;background:transparent!important;color:#e66!important;padding:2px!important}.team-qr-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px;border:1px solid var(--border);border-radius:11px;background:var(--panel-2)}#team-hub-qr{padding:10px;background:#fff;border-radius:8px;min-height:220px;box-sizing:border-box}.team-qr-card small{color:var(--muted);line-height:1.4}
.team-public-preview{max-width:620px;margin:auto;border:1px solid var(--border);border-radius:18px;overflow:hidden;background:var(--panel-2)}.team-public-preview header{padding:30px;background:linear-gradient(135deg,#f4c542,#ec8b35);color:#181818}.team-public-preview header span{font-size:12px;font-weight:850;text-transform:uppercase}.team-public-preview header h2{margin:5px 0 2px;font-size:28px}.team-public-preview header p{margin:0}.team-public-preview-body{padding:18px}.team-public-preview section+section{margin-top:19px}.team-public-preview h3{margin:0 0 7px;font-size:11px;color:var(--muted);text-transform:uppercase}.team-public-preview section>div{display:grid;gap:7px}.team-preview-link{display:grid;grid-template-columns:35px 1fr auto;align-items:center;text-align:left;gap:10px;border:1px solid var(--border);border-radius:10px;padding:11px;background:var(--panel);color:var(--text)}.team-preview-link b{font-size:8px}.team-preview-link strong,.team-preview-link small{display:block}.team-preview-link small{color:var(--muted);margin-top:2px}.team-preview-link i{font-style:normal;font-size:9px;color:var(--muted)}
.team-hub-corner-actions{position:fixed;z-index:15;right:18px;bottom:18px;display:flex;gap:7px}.team-hub-corner-actions button{height:43px;border:1px solid var(--border);border-radius:10px;padding:0 14px;background:var(--panel);color:var(--text);box-shadow:0 8px 25px #0004}.team-hub-corner-actions button[data-team-publish]{background:#f4c542;color:#151515;border-color:#f4c542}.team-hub-corner-actions button:disabled{opacity:.42;cursor:default}.team-tools-button{display:flex;align-items:center;gap:8px}.team-tools-button .tools-home-icon{display:grid;grid-template-columns:repeat(3,3px);gap:2px}.team-tools-button .tools-home-icon i{width:3px;height:3px;border-radius:1px;background:currentColor}
.team-editor-overlay{position:fixed;inset:0;z-index:1100;display:grid;place-items:center;padding:18px;background:#000a}.team-editor-modal{width:min(620px,100%);max-height:calc(100vh - 36px);overflow:auto;border:1px solid var(--border);border-radius:14px;background:var(--panel);color:var(--text);box-shadow:0 24px 70px #0008}.team-editor-modal>header{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid var(--border)}.team-editor-modal header span{font-size:11px;color:var(--muted);text-transform:uppercase}.team-editor-modal h2{margin:3px 0 0}.team-editor-modal header button{width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--text)}.team-editor-modal form{padding:20px}.team-editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.team-editor-wide{grid-column:1/-1}.team-visible-toggle{display:flex!important;align-items:center;gap:8px}.team-visible-toggle input{width:auto}.team-editor-modal footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}.team-editor-modal footer button{border:1px solid var(--border);border-radius:8px;padding:10px 14px;background:transparent;color:var(--text)}.team-editor-modal footer .team-primary{background:#f4c542;color:#151515}.team-toast{position:fixed;left:50%;bottom:76px;z-index:1200;translate:-50% 0;padding:9px 14px;border-radius:8px;background:#20242b;color:#fff;box-shadow:0 8px 24px #0007;font-size:13px}
@media(max-width:899px){.team-hub-app:has(.team-builder-workspace)>.team-hub-header,.team-hub-app:has(.team-builder-workspace)>.team-hub-tabs{margin-right:0}.team-builder-workspace{grid-template-columns:1fr}.team-live-preview,body.admin-preview-active .team-live-preview{position:static;margin-top:10px;padding-left:0;border-left:0}}
@media(max-width:720px){.team-hub-app{padding:18px 12px 86px}.team-hub-header h2{font-size:25px}.team-hub-panel{padding:14px}.team-hub-panel>header{align-items:flex-start}.team-builder-section .team-builder-item{grid-template-columns:18px 34px minmax(0,1fr)}.team-builder-actions{grid-column:1/-1;justify-content:flex-end}.team-settings-grid{grid-template-columns:1fr}.team-qr-card{order:2}.team-editor-grid{grid-template-columns:1fr}.team-editor-wide{grid-column:auto}.team-hub-corner-actions{left:10px;right:10px;justify-content:flex-end}.team-hub-corner-actions button{padding:0 10px}.team-hub-corner-actions .team-tools-button{margin-left:auto}.team-public-preview header{padding:24px 20px}.team-phone-frame,body.admin-preview-active .team-phone-frame{--phone-available:min(620px,calc(100dvh - 140px));width:min(320px,100%);height:var(--phone-available)}}
@media(min-width:721px){.team-phone-frame{--phone-available:calc(100dvh - 68px)}body.admin-preview-active .team-phone-frame{--phone-available:calc(100dvh - 116px)}}
@media(min-width:900px){.team-hub-app>.team-hub-header,.team-hub-app>.team-hub-tabs,.team-hub-app>main{max-width:none;margin-right:390px}.team-builder-workspace{display:block}.team-live-preview{position:fixed;z-index:10;top:28px;right:28px;bottom:71px;width:350px;margin:0;padding-left:28px;box-sizing:border-box;align-content:start}body.admin-preview-active .team-live-preview{top:76px}body.demo-mode .team-live-preview{top:84px}.team-live-preview .team-phone-frame,body.admin-preview-active .team-live-preview .team-phone-frame,body.demo-mode .team-live-preview .team-phone-frame{--phone-available:calc(100dvh - 120px);width:min(320px,calc((100dvh - 120px)*.516));height:calc(100% - 21px);max-height:620px}body.admin-preview-active .team-live-preview .team-phone-frame{--phone-available:calc(100dvh - 168px);width:min(320px,calc((100dvh - 168px)*.516))}body.demo-mode .team-live-preview .team-phone-frame{--phone-available:calc(100dvh - 176px);width:min(320px,calc((100dvh - 176px)*.516))}}
@media(min-width:900px){.team-live-preview .team-phone-frame{height:min(620px,calc(100dvh - 120px))}body.admin-preview-active .team-live-preview .team-phone-frame{height:min(620px,calc(100dvh - 168px))}body.demo-mode .team-live-preview .team-phone-frame{height:min(620px,calc(100dvh - 176px))}}
.team-phone-frame{position:relative;overflow:visible!important;padding:5px!important;border:1px solid #70747b!important;background:linear-gradient(110deg,#303238 0%,#a5a8ad 8%,#3a3c42 17%,#16171a 48%,#565960 85%,#b6b8bc 93%,#34363b 100%)!important;box-shadow:0 24px 65px #0009,inset 0 0 0 1px #d8dade55!important}.team-phone-glass{position:relative;display:flex;flex:1;min-height:0;flex-direction:column;overflow:hidden;border:3px solid #050506;border-radius:30px;background:#07080a;box-shadow:inset 0 0 0 1px #ffffff12}.team-phone-status{position:absolute;z-index:6;top:7px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 17px;color:#fff;font-size:8px;font-weight:800;pointer-events:none;text-shadow:0 1px 2px #000}.team-phone-status-icons{display:flex;align-items:center;gap:3px}.team-phone-status-icons>i:first-child{width:8px;height:6px;background:linear-gradient(to top,right,#fff 0 20%,transparent 20% 30%,#fff 30% 50%,transparent 50% 60%,#fff 60% 80%,transparent 80%)}.team-phone-status-icons>i:nth-child(2){width:7px;height:5px;border:1px solid #fff;border-width:1px 1px 0;border-radius:7px 7px 0 0}.team-phone-status-icons>b{position:relative;width:11px;height:5px;border:1px solid #fff;border-radius:2px}.team-phone-status-icons>b:after{content:"";position:absolute;inset:1px;background:#fff}.team-phone-island{position:absolute;z-index:7;top:5px;left:50%;translate:-50% 0;width:29%;height:16px;border-radius:999px;background:#020203;box-shadow:inset 0 -1px 1px #ffffff10}.team-phone-island i{position:absolute;right:7px;top:5px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#243a59,#07101f 55%,#000);box-shadow:0 0 2px #275da477}.team-phone-frame .team-public-preview{margin-top:0;padding-top:24px;border-radius:26px!important}.team-phone-frame .team-public-preview header{padding-top:20px}.team-phone-home{position:absolute;z-index:6;bottom:5px;left:50%;translate:-50% 0;width:34%;height:4px;margin:0;background:#fff;border-radius:99px;box-shadow:0 1px 3px #0008}.team-phone-button{position:absolute;display:block;width:3px;background:linear-gradient(90deg,#202126,#8b8d93,#282a2f);border:1px solid #202126;box-sizing:border-box}.team-phone-action{left:-3px;top:16%;height:7%;border-radius:2px 0 0 2px}.team-phone-volume-up{left:-3px;top:27%;height:11%;border-radius:2px 0 0 2px}.team-phone-volume-down{left:-3px;top:41%;height:11%;border-radius:2px 0 0 2px}.team-phone-power{right:-3px;top:30%;height:17%;border-radius:0 2px 2px 0}
.team-phone-frame .team-public-preview{padding-bottom:72px}.team-phone-safari{position:absolute;z-index:5;left:0;right:0;bottom:0;padding:5px 8px 13px;background:linear-gradient(to top,rgba(28,31,37,.98),rgba(38,42,49,.88));border-top:1px solid #ffffff16;backdrop-filter:blur(14px);color:#dce8f7}.team-safari-address{height:24px;display:grid;grid-template-columns:26px 1fr 22px;align-items:center;border-radius:8px;background:#565c66;color:#f4f5f7;font-size:7px;box-shadow:inset 0 1px #ffffff18}.team-safari-address>span{padding-left:7px;font-weight:800}.team-safari-address>strong{text-align:center;font-weight:600;white-space:nowrap}.team-safari-address>strong i{font-size:5px;color:#cbd0d5;font-style:normal}.team-safari-address>b{text-align:center;font-size:11px}.team-safari-tools{height:24px;display:flex;align-items:center;justify-content:space-between;padding:2px 10px 0;color:#6cb1ff;font-size:17px;line-height:1}.team-safari-tools span:nth-child(2){opacity:.35}.team-safari-share{font-size:13px;border:1px solid currentColor;border-top:0;border-radius:2px;padding:1px 3px 2px}.team-phone-safari+.team-phone-home{z-index:7;bottom:4px}
.team-phone-frame .team-public-preview{padding-bottom:80px}.team-phone-safari{padding:6px 9px 12px;background:linear-gradient(to top,rgba(30,32,37,.985),rgba(48,51,57,.94));border-top-color:#ffffff20}.team-safari-address{height:28px;grid-template-columns:30px 1fr 28px;border-radius:9px;background:#5c6068;font-size:8.5px;letter-spacing:-.01em}.team-safari-address>span{padding-left:8px;font-size:8px}.team-safari-address>strong{overflow:hidden;text-overflow:ellipsis}.team-safari-address>strong i{font-size:6px}.team-safari-address>b{position:relative;height:20px;font-size:0}.team-safari-address>b:before{content:"";position:absolute;left:8px;top:5px;width:8px;height:8px;border:1.4px solid #e8edf5;border-left-color:transparent;border-radius:50%}.team-safari-address>b:after{content:"";position:absolute;left:7px;top:4px;border-left:3px solid #e8edf5;border-top:2px solid transparent;border-bottom:2px solid transparent;rotate:-35deg}.team-safari-tools{height:27px;padding:3px 8px 0;color:#6fb6ff}.team-safari-tools span{position:relative;display:block;width:22px;height:21px;box-sizing:border-box;font-size:0;border:0;padding:0}.team-safari-tools span:nth-child(1):before,.team-safari-tools span:nth-child(2):before{content:"";position:absolute;left:8px;top:6px;width:7px;height:7px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;rotate:45deg}.team-safari-tools span:nth-child(2):before{left:5px;rotate:225deg}.team-safari-tools span:nth-child(2){opacity:.32}.team-safari-tools .team-safari-share:before{content:"";position:absolute;left:6px;bottom:2px;width:10px;height:10px;border:1.4px solid currentColor;border-radius:2px}.team-safari-tools .team-safari-share:after{content:"↑";position:absolute;left:7px;top:-5px;font-size:17px;font-weight:500}.team-safari-tools span:nth-child(4):before{content:"";position:absolute;left:5px;top:4px;width:12px;height:13px;border:1.4px solid currentColor;border-radius:2px 4px 3px 2px}.team-safari-tools span:nth-child(4):after{content:"";position:absolute;left:11px;top:5px;height:12px;border-left:1px solid currentColor}.team-safari-tools span:nth-child(5):before,.team-safari-tools span:nth-child(5):after{content:"";position:absolute;width:10px;height:10px;border:1.4px solid currentColor;border-radius:2px}.team-safari-tools span:nth-child(5):before{left:4px;top:4px}.team-safari-tools span:nth-child(5):after{left:8px;top:7px;background:#30343b}
iphone-16-max.team-phone-frame{display:block!important;width:min(320px,calc((100dvh - 120px)*.4923))!important;height:auto!important;aspect-ratio:415/843;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:0 24px 65px #0009!important}body.admin-preview-active iphone-16-max.team-phone-frame{width:min(320px,calc((100dvh - 168px)*.4923))!important}body.demo-mode iphone-16-max.team-phone-frame{width:min(320px,calc((100dvh - 176px)*.4923))!important}.team-phone-frame .team-phone-glass{position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border:0;border-radius:0;background:#07080a;box-shadow:none}.team-phone-frame .team-public-preview{height:100%;padding-top:25px;border-radius:0!important}.team-phone-frame .team-public-preview header{padding-top:18px}

/* iOS Safari chrome inside the Team Hub preview. The hardware component owns the
   status bar; page content begins beneath its safe-area rather than behind it. */
.team-phone-frame .team-public-preview{padding-top:31px;padding-bottom:84px;background:#18191d}
.team-phone-frame .team-public-preview header{padding-top:17px}
.team-phone-safari{padding:6px 9px 14px;background:rgba(37,39,45,.96);border-top:1px solid #ffffff18;backdrop-filter:blur(18px) saturate(130%)}
.team-safari-address{height:29px;grid-template-columns:32px minmax(0,1fr) 30px;border-radius:10px;background:#5b5e66;color:#fff;font-size:9.2px;letter-spacing:-.012em;box-shadow:inset 0 1px #ffffff20,0 1px 2px #0003}
.team-safari-address .team-safari-page-menu{padding:0;text-align:center;font-size:9px;font-weight:750;letter-spacing:-.08em}
.team-safari-address>strong{display:flex;align-items:center;justify-content:center;gap:3px;min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.team-safari-address>strong i{display:block;flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:#d8dbe0}
.team-safari-address .team-safari-reload{position:relative;height:22px}
.team-safari-address .team-safari-reload:before{content:"";position:absolute;left:9px;top:6px;width:8px;height:8px;border:1.35px solid #f4f6fa;border-left-color:transparent;border-radius:50%}
.team-safari-address .team-safari-reload:after{content:"";position:absolute;left:8px;top:5px;border-left:3px solid #f4f6fa;border-top:2px solid transparent;border-bottom:2px solid transparent;rotate:-38deg}
.team-safari-tools{height:28px;padding:4px 6px 0;color:#55aaff}
.team-safari-tools span{position:relative;display:block;width:26px;height:22px;box-sizing:border-box}
.team-safari-back:before,.team-safari-forward:before{content:"";position:absolute;top:6px;width:8px;height:8px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.team-safari-back:before{left:9px;rotate:45deg}.team-safari-forward:before{left:6px;rotate:225deg}.team-safari-forward{opacity:.3}
.team-safari-share:before{content:"";position:absolute;left:7px;bottom:1px;width:11px;height:11px;border:1.4px solid currentColor;border-radius:2px}
.team-safari-share:after{content:"\2191";position:absolute;left:8px;top:-7px;font:500 19px/1 Arial,sans-serif}
.team-safari-bookmarks:before{content:"";position:absolute;left:5px;top:4px;width:14px;height:14px;border:1.4px solid currentColor;border-radius:2px 5px 4px 2px;transform:skewY(-4deg)}
.team-safari-bookmarks:after{content:"";position:absolute;left:12px;top:5px;height:13px;border-left:1px solid currentColor}
.team-safari-tabs:before,.team-safari-tabs:after{content:"";position:absolute;width:11px;height:11px;border:1.4px solid currentColor;border-radius:2px}
.team-safari-tabs:before{left:5px;top:4px}.team-safari-tabs:after{left:9px;top:7px;background:#25272d}
.team-phone-safari+.team-phone-home{bottom:4px}

/* Team Hub product-color accents: neutral foundations with small, repeatable cues. */
.team-hub-app{
  --hub-blue:#86c8e8;
  --hub-pink:#e9a4b8;
  --hub-green:#8fc89c;
  --hub-purple:#aa95d5;
  --hub-yellow:#f2cf62;
  --hub-orange:#eaa05d;
  --hub-gray:#a9afb8;
  --hub-tan:#c8ad86;
}
.team-hub-tabs button{border-radius:8px 8px 0 0;transition:color .16s,background-color .16s,border-color .16s}
.team-hub-tabs button[data-team-tab="builder"].active{color:var(--hub-blue);border-color:var(--hub-blue);background:color-mix(in srgb,var(--hub-blue) 8%,transparent)}
.team-hub-tabs button[data-team-tab="forms"].active{color:var(--hub-pink);border-color:var(--hub-pink);background:color-mix(in srgb,var(--hub-pink) 8%,transparent)}
.team-hub-tabs button[data-team-tab="submissions"].active{color:var(--hub-green);border-color:var(--hub-green);background:color-mix(in srgb,var(--hub-green) 8%,transparent)}
.team-hub-tabs button[data-team-tab="settings"].active{color:var(--hub-purple);border-color:var(--hub-purple);background:color-mix(in srgb,var(--hub-purple) 8%,transparent)}
.team-builder-section{border-left:3px solid var(--hub-blue)}
.team-builder-section:nth-child(4n+2){border-left-color:var(--hub-pink)}
.team-builder-section:nth-child(4n+3){border-left-color:var(--hub-green)}
.team-builder-section:nth-child(4n+4){border-left-color:var(--hub-purple)}
.team-builder-section .team-drag-handle{color:color-mix(in srgb,var(--hub-blue) 78%,var(--muted))}
.team-section-add-item:hover{border-color:var(--hub-blue);color:var(--hub-blue);background:color-mix(in srgb,var(--hub-blue) 6%,transparent)}
.team-hub-app .team-primary{background:linear-gradient(135deg,var(--hub-yellow),var(--hub-orange));color:#181818}
.team-native-form-card>span{background:var(--hub-pink)}
.team-hub-corner-actions button[data-team-save]:not(:disabled){border-color:color-mix(in srgb,var(--hub-blue) 55%,var(--border));color:var(--hub-blue)}
.team-hub-corner-actions button[data-team-publish]{background:var(--hub-yellow);border-color:var(--hub-yellow)}
.team-hub-corner-actions .team-tools-button{border-color:color-mix(in srgb,var(--hub-purple) 38%,var(--border))}
.team-hub-tabs button:hover:not(.active){color:var(--text);background:color-mix(in srgb,var(--hub-gray) 6%,transparent)}
.team-builder-section.dragging,.team-builder-item.dragging{opacity:.34;transform:scale(.985);box-shadow:0 10px 28px #0005}
.team-builder-section:not(.dragging),.team-builder-item:not(.dragging){transition:transform .14s ease,opacity .14s ease,box-shadow .14s ease}
.team-builder-section .team-builder-item{display:block;padding:0;overflow:hidden}
.team-builder-item-summary{display:grid;grid-template-columns:20px 36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px}
.team-builder-item.editing{opacity:1;border-color:color-mix(in srgb,var(--hub-blue) 55%,var(--border));background:var(--panel-2)}
.team-builder-item.editing>.team-builder-item-summary{border-bottom:1px solid var(--border)}
.team-builder-actions button[data-team-edit],.team-builder-actions button[data-team-visibility]{display:grid;place-items:center;width:31px;height:31px;padding:0}
.team-builder-actions button[data-team-edit]{display:none}
.team-builder-item-summary{cursor:pointer;transition:background-color .15s,box-shadow .15s}
.team-builder-item-summary:hover,.team-builder-item-summary:focus-visible{outline:none;background:color-mix(in srgb,var(--hub-blue) 8%,transparent);box-shadow:inset 3px 0 var(--hub-blue)}
.team-builder-item.editing>.team-builder-item-summary{background:color-mix(in srgb,var(--hub-blue) 7%,transparent);box-shadow:inset 3px 0 var(--hub-blue)}
.team-builder-item-summary .team-drag-handle{cursor:grab}
.team-builder-section>header input{width:max-content;max-width:100%;padding:5px 27px 5px 3px;border:1px solid transparent!important;border-radius:6px;font-size:17px!important;line-height:1.2;cursor:pointer;background-repeat:no-repeat!important;background-position:right 7px center!important;background-size:13px!important;transition:background-color .15s,border-color .15s}
.team-builder-section>header input[readonly]:hover{border-color:color-mix(in srgb,var(--hub-blue) 28%,transparent)!important;background-color:color-mix(in srgb,var(--hub-blue) 7%,transparent)!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386c8e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L20 8l-4-4L4 16v4Zm10.5-13.5 4 4'/%3E%3C/svg%3E")!important}
.team-builder-section>header input.editing{cursor:text;border-color:var(--hub-blue)!important;background-color:var(--panel)!important;background-image:none!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--hub-blue) 15%,transparent)}
.team-builder-section>header input[readonly]::selection{background:transparent;color:inherit}
.team-hub-tabs button[data-team-tab="forms"],.team-hub-tabs button[data-team-tab="submissions"]{display:none}
.team-editor-grid label:has(select[name="section"]){display:none}
.team-type-choices{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.team-type-choices button{min-height:34px;border:1px solid var(--border);border-radius:7px;background:var(--input-bg,var(--panel));color:var(--muted);font:750 11px inherit;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
.team-type-choices button:first-child.active{color:#173342;border-color:var(--hub-blue);background:var(--hub-blue)}
.team-type-choices button:last-child.active{color:#321d29;border-color:var(--hub-pink);background:var(--hub-pink)}
.team-editor-grid label:has(select[name="access"]){grid-row:2}
.team-inline-editor label:has(select[name="type"]){display:none}
.team-section-add-choices{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.team-section-add-choices button{width:100%;padding:10px;border:1px dashed var(--border);border-radius:8px;background:transparent;color:var(--muted);font:750 12px inherit;cursor:pointer;transition:color .15s,border-color .15s,background-color .15s}
.team-section-add-choices button:first-child:hover{color:var(--hub-blue);border-color:var(--hub-blue);background:color-mix(in srgb,var(--hub-blue) 7%,transparent)}
.team-section-add-choices button:last-child:hover{color:var(--hub-pink);border-color:var(--hub-pink);background:color-mix(in srgb,var(--hub-pink) 7%,transparent)}
@media(max-width:520px){.team-section-add-choices{grid-template-columns:1fr}}
.team-public-preview header{background:linear-gradient(135deg,var(--team-banner,#f2b544),color-mix(in srgb,var(--team-banner,#f2b544) 68%,#ee7d3e))}.team-item-kind i,.team-item-kind svg,.team-preview-link b i,.team-preview-link b svg{width:20px;height:20px;display:block;stroke:currentColor}.team-icon-field{grid-column:1;grid-row:1}.team-icon-search{display:grid;grid-template-columns:1fr 34px;gap:5px}.team-icon-search input[type="color"]{width:34px;padding:3px;cursor:pointer}.team-icon-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;max-height:112px;overflow:auto;padding:4px;border:1px solid var(--border);border-radius:7px;background:var(--panel)}.team-icon-grid button{display:grid;place-items:center;min-height:30px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer}.team-icon-grid button:hover,.team-icon-grid button.selected{color:var(--hub-blue);border-color:var(--hub-blue);background:color-mix(in srgb,var(--hub-blue) 9%,transparent)}.team-icon-grid svg{width:16px;height:16px}
.team-icon-search{grid-template-columns:1fr 34px;align-items:center}.team-color-picker{position:relative;display:inline-grid;justify-self:start}.team-color-trigger{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid var(--border);border-radius:8px;background:var(--panel);cursor:pointer}.team-color-trigger span{width:20px;height:20px;border-radius:50%;background:var(--selected-color);box-shadow:0 0 0 1px #ffffff44}.team-color-palette{position:absolute;z-index:30;top:calc(100% + 6px);left:0;display:grid;grid-template-columns:repeat(6,20px);gap:7px;width:max-content;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--panel);box-shadow:0 14px 35px #0008}.team-color-palette.hidden{display:none}.team-color-palette button{width:20px;height:20px;border:2px solid transparent;border-radius:50%;padding:0;background:var(--swatch);cursor:pointer;box-shadow:0 0 0 1px #ffffff22}.team-color-palette button:hover,.team-color-palette button.selected{border-color:#fff;box-shadow:0 0 0 2px var(--swatch)}
.team-icon-grid{max-height:none;overflow:visible}.team-icon-grid button:nth-child(n+25){display:none}
.team-editor-grid.grouped{grid-template-columns:minmax(170px,.72fr) minmax(280px,1.28fr);gap:12px}.team-editor-column{display:grid;align-content:start;gap:9px;min-width:0}.team-editor-grid.grouped .team-editor-column>label{grid-column:auto;grid-row:auto}.team-editor-grid.grouped .team-editor-column-right label[data-url],.team-editor-grid.grouped .team-editor-column-right label[data-form]{grid-column:auto;grid-row:auto}@media(max-width:720px){.team-editor-grid.grouped{grid-template-columns:1fr}.team-editor-column{gap:8px}}@media(min-width:900px) and (max-width:1180px){.team-editor-grid.grouped{grid-template-columns:1fr}}
.team-editor-column-right label:has(input[name="title"]){order:1}.team-editor-column-right label[data-url],.team-editor-column-right label[data-form]{order:2}.team-editor-column-right label:has(textarea[name="description"]){order:3}.team-editor-column-right textarea[name="description"]{min-height:54px;max-height:112px;resize:none}
.team-builder-actions button[data-team-edit] svg,.team-builder-actions button[data-team-visibility] svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.team-builder-actions button[data-team-visibility]{color:var(--hub-green);border-color:color-mix(in srgb,var(--hub-green) 35%,var(--border))}
.team-builder-actions button[data-team-visibility].is-hidden{color:var(--hub-gray);border-color:var(--border)}
.team-builder-actions .team-delete-item{min-width:31px;height:31px;padding:0 8px!important;color:#ef6b72!important;border-color:color-mix(in srgb,#ef6b72 45%,var(--border))!important;font-size:18px;line-height:1}
.team-builder-actions .team-delete-item.confirming{font-size:10px;font-weight:850;background:#a72f38!important;color:#fff!important;border-color:#d9515b!important}
.team-inline-editor{padding:14px;background:color-mix(in srgb,var(--panel-2) 88%,var(--hub-blue))}
.team-inline-editor footer{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.team-inline-editor footer button{border:1px solid var(--border);border-radius:8px;padding:9px 13px;background:transparent;color:var(--text);font:750 13px inherit;cursor:pointer}
.team-inline-editor footer .team-primary{border:0;color:#181818}
@media(max-width:720px){.team-builder-item-summary{grid-template-columns:18px 34px minmax(0,1fr)}.team-builder-item-summary .team-builder-actions{grid-column:1/-1;justify-content:flex-end}.team-inline-editor{padding:12px}}

/* Compact Team Hub add/edit forms. */
.team-editor-grid{gap:9px 12px}
.team-editor-grid label{gap:4px}
.team-editor-grid label>span{font-size:9.5px;line-height:1.15}
.team-editor-grid input,.team-editor-grid textarea,.team-editor-grid select{padding:7px 9px;min-height:34px;font-size:13px}
.team-editor-grid textarea{line-height:1.3;resize:vertical}
.team-inline-editor{padding:10px 12px}
.team-inline-add{overflow:hidden;border:1px solid color-mix(in srgb,var(--hub-blue) 55%,var(--border));border-left:3px solid var(--hub-blue);border-radius:10px;background:var(--panel-2);box-shadow:0 8px 22px #0002}
.team-inline-add:before{content:"New link";display:block;padding:8px 12px;border-bottom:1px solid var(--border);color:var(--hub-blue);font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.team-inline-editor footer{margin-top:9px}
.team-inline-editor footer button{padding:7px 11px}
.team-editor-modal>header{padding:13px 16px}
.team-editor-modal form{padding:14px 16px}
.team-editor-modal footer{margin-top:13px}
.team-editor-modal footer button{padding:8px 12px}
@media(max-width:720px){.team-inline-editor{padding:9px}.team-editor-grid{gap:8px}.team-editor-modal form{padding:12px}}

/* Team Hub editor: selections left, written content right. */
.team-editor-grid{grid-template-columns:minmax(170px,.72fr) minmax(280px,1.28fr);align-items:start}
.team-editor-grid label:has(select[name="type"]){grid-column:1;grid-row:1}
.team-editor-grid label:has(select[name="section"]){grid-column:1;grid-row:2}
.team-editor-grid label:has(select[name="access"]){grid-column:1;grid-row:3}
.team-editor-grid .team-visible-toggle{grid-column:1;grid-row:4;align-self:center;min-height:34px}
.team-editor-grid label:has(input[name="title"]){grid-column:2;grid-row:1}
.team-editor-grid label:has(textarea[name="description"]){grid-column:2;grid-row:2}
.team-editor-grid label[data-url],.team-editor-grid label[data-form]{grid-column:2;grid-row:3}
.team-inline-editor>footer,.team-editor-modal form>footer{margin-left:calc(36% + 6px);justify-content:flex-end}
.team-editor-modal .team-visible-toggle{display:none!important}
@media(max-width:720px){
  .team-editor-grid{grid-template-columns:1fr}
  .team-editor-grid label:has(select[name="type"]),.team-editor-grid label:has(select[name="section"]),.team-editor-grid label:has(select[name="access"]),.team-editor-grid .team-visible-toggle,.team-editor-grid label:has(input[name="title"]),.team-editor-grid label:has(textarea[name="description"]),.team-editor-grid label[data-url],.team-editor-grid label[data-form]{grid-column:1;grid-row:auto}
  .team-inline-editor>footer,.team-editor-modal form>footer{margin-left:0}
}

/* Form Hub file tree and shared corner navigation */
.form-hub-sidebar{padding-bottom:13px}
.form-file-tree{flex:1;min-height:0;overflow:auto;display:grid;align-content:start;gap:2px;padding:2px 3px 12px}
.form-tree-folder{display:grid;gap:1px}
.form-folder-row{display:grid;grid-template-columns:minmax(0,1fr) 25px;align-items:center}
.form-folder-row>button:first-child{grid-template-columns:14px 16px minmax(0,1fr) auto;padding:8px 6px}
.form-folder-row>button:first-child.active{background:#3d91df20;color:#7ebdec}
.form-folder-chevron{transition:transform .15s ease}
.form-tree-folder.expanded .form-folder-chevron{transform:rotate(90deg)}
.form-tree-children{display:grid;gap:2px;margin-left:19px;padding-left:8px;border-left:1px solid var(--line)}
.form-tree-children .form-library-item{padding:7px 8px}
.form-tree-children .form-library-icon,.form-file-tree>.form-library-item .form-library-icon{width:28px;height:28px;border-radius:6px;background:transparent}
.form-tree-children .form-library-icon i,.form-file-tree>.form-library-item .form-library-icon i{width:15px}
.form-tree-empty{padding:7px 9px;color:var(--muted);font-size:9px;font-style:italic}
.form-hub-corner-actions{position:fixed;z-index:15;right:18px;bottom:18px;display:flex}
.form-hub-corner-actions .form-tools-button{position:static;height:43px;margin:0;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);box-shadow:0 8px 25px #0004;font-size:13px}
.form-hub-corner-actions .tools-home-icon{display:grid;grid-template-columns:repeat(3,3px);gap:2px}
.form-hub-corner-actions .tools-home-icon i{width:3px;height:3px;border-radius:1px;background:currentColor}
.form-hub-content{padding-bottom:78px}
.tool-workspace-screen[data-tool="form-hub"]{grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden}
.tool-workspace-screen[data-tool="form-hub"] .tool-workspace-canvas{height:100%;min-height:0}

.tool-workspace-screen[data-tool="form-hub"] .form-hub-app,.tool-workspace-screen[data-tool="form-hub"] .form-hub-sidebar{height:100%}
@media(max-width:680px){
  .form-hub-app{display:grid;grid-template-columns:1fr;height:auto;min-height:100%}
  .form-hub-sidebar{min-height:280px;max-height:42vh}
  .form-file-tree{min-height:120px}
  .form-hub-corner-actions{right:10px;bottom:10px}
  .form-hub-corner-actions .form-tools-button{margin:0}
  .form-hub-main{min-height:58vh}
}

/* Form Hub builder interaction upgrade */
.form-builder-add-actions{display:flex;justify-content:center;gap:8px}.form-builder-add-actions .form-add-section{margin:14px 0}
.form-section-drag,.form-question-drag{z-index:2;padding:2px 12px;cursor:grab}.form-section-drag:active,.form-question-drag:active{cursor:grabbing}
.form-section-drag,.form-question-drag{top:2px;display:flex;align-items:center;justify-content:center;width:46px;height:18px;padding:0}.form-section-drag i,.form-question-drag i{display:block;width:20px;height:20px;stroke-width:1.7}
.form-builder-section.drag-before,.form-question-card.drag-before{box-shadow:0 -4px 0 #55aef0,0 9px 24px #0002}.form-builder-section.drag-after,.form-question-card.drag-after{box-shadow:0 4px 0 #55aef0,0 9px 24px #0002}
.form-attachment-preview{display:flex;align-items:center;gap:8px;margin-top:9px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--card)}.form-attachment-preview img{width:72px;height:48px;border-radius:6px;object-fit:cover}.form-attachment-preview>i{width:18px;color:#72b7e8}.form-attachment-preview span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:750}.form-attachment-preview button{width:27px!important;height:27px!important;border:0;background:transparent;color:#e37682!important;cursor:pointer}
.form-routing-editor{margin:11px 0;padding:9px 11px;border:1px solid #8f72dd45;border-radius:8px;background:#8f72dd0e}.form-routing-editor summary{display:flex;align-items:center;gap:7px;color:#b8a2ee;font-size:10px;font-weight:850;cursor:pointer;list-style:none}.form-routing-editor summary i{width:15px}.form-routing-editor>p{margin:7px 0;color:var(--muted);font-size:9px}.form-routing-editor>label{display:grid;grid-template-columns:minmax(90px,1fr) minmax(170px,1.4fr);align-items:center;gap:8px;margin-top:6px}.form-routing-editor>label>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}.form-routing-editor select{width:100%;padding:7px}
.form-settings-subhead{padding-top:6px;border-top:1px solid var(--line)}.form-settings-subhead h3{margin:7px 0 2px;font-size:14px}.form-settings-subhead p{margin:0;color:var(--muted);font-size:10px}.form-settings-grid label>small{display:block;margin-top:5px;color:var(--muted);font-size:9px}.form-response-file{display:inline-flex;align-items:center;gap:6px;color:#72b7e8;text-decoration:none}.form-response-file i{width:14px}
@media(max-width:680px){.form-routing-editor>label{grid-template-columns:1fr}.form-builder-add-actions{position:relative;z-index:1}}
.form-builder-title textarea,.form-builder-section>header textarea,.form-question-card>textarea{min-height:30px;max-height:150px;overflow-y:auto;resize:none;line-height:1.35}.form-builder-title textarea:placeholder-shown,.form-builder-section>header textarea:placeholder-shown,.form-question-card>textarea:placeholder-shown{min-height:30px}
.form-builder-section:not(.is-editing-section)>header textarea,.form-question-card:not(.is-editing-question)>textarea{display:none}.form-builder-section:not(.is-editing-section)>header button,.form-builder-section:not(.is-editing-section)>.form-add-question{display:none}.form-question-card:not(.is-editing-question)>footer,.form-question-card:not(.is-editing-question) button,.form-question-card:not(.is-editing-question)>.form-routing-editor{display:none}.form-builder-section,.form-question-card{transition:border-color .15s,background-color .15s}.form-builder-section.is-editing-section,.form-question-card.is-editing-question{border-color:#55aef075}
.form-builder-section>header input[data-section-title]{font-size:20px;line-height:1.2}.form-builder-section>header textarea[data-section-description]{font-size:11px;line-height:1.35}
.form-builder-section,.form-question-card{transition:transform .2s cubic-bezier(.2,.8,.2,1),opacity .16s,border-color .15s,background-color .15s}.form-builder-section.is-dragging,.form-question-card.is-dragging{opacity:0}.form-builder-section.drag-before,.form-question-card.drag-before{box-shadow:0 -3px 0 #55aef0}.form-builder-section.drag-after,.form-question-card.drag-after{box-shadow:0 3px 0 #55aef0}

/* Compact rich-text descriptions */
.form-rich-description{margin-top:7px;border:1px solid var(--line);border-radius:7px;background:var(--bg);overflow:hidden}
.form-rich-toolbar{display:flex;align-items:center;gap:3px;padding:4px 6px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--card) 82%,var(--bg))}
.form-rich-toolbar button{display:grid!important;place-items:center;width:30px!important;height:29px!important;padding:0!important;border:0!important;border-radius:5px!important;background:transparent!important;color:var(--muted)!important;font:inherit!important;font-size:13px!important;cursor:pointer}
.form-rich-toolbar button:hover{background:color-mix(in srgb,var(--card) 70%,#55aef0 30%)!important;color:var(--text)!important}
.form-rich-toolbar button.active{background:#55aef02b!important;color:#78c5fa!important;box-shadow:inset 0 0 0 1px #55aef06b}
.form-rich-toolbar button>svg{width:16px!important;height:16px!important}
.form-rich-toolbar select{width:auto!important;height:29px;margin-left:4px;padding:3px 25px 3px 8px!important;border:1px solid var(--line)!important;border-radius:6px!important;background:var(--card)!important;color:var(--text)!important;font:inherit!important;font-size:11px!important;font-weight:700;box-shadow:0 1px 2px #0002;color-scheme:dark;cursor:pointer;outline:none}
.form-rich-toolbar select:hover,.form-rich-toolbar select:focus{border-color:#55aef080!important;background:color-mix(in srgb,var(--card) 88%,#55aef0 12%)!important}
.form-rich-toolbar select option{background:var(--card);color:var(--text)}
:root[data-theme="light"] .form-rich-toolbar select{color-scheme:light;background:#fff!important;color:#252a32!important;border-color:#cbd1da!important;box-shadow:0 1px 2px #25314212}
:root[data-theme="light"] .form-rich-toolbar select:hover,:root[data-theme="light"] .form-rich-toolbar select:focus{background:#f2f7fb!important;border-color:#72acd3!important}
:root[data-theme="light"] .form-rich-toolbar select option{background:#fff;color:#252a32}
.form-rich-input{min-height:30px;max-height:112px;overflow-y:auto;padding:7px 9px;color:var(--muted);font-size:12px;line-height:1.4;outline:0;white-space:pre-wrap}
.form-rich-input:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,var(--muted) 65%,transparent);pointer-events:none}
.form-rich-size-controls{display:flex;align-items:center;margin-left:3px;border-left:1px solid var(--line);padding-left:4px}
.form-rich-size-controls select{margin-left:0!important;min-width:67px;text-align:center}
.form-rich-input font[size="1"]{font-size:10px}.form-rich-input font[size="2"]{font-size:12px}.form-rich-input font[size="3"]{font-size:14px}.form-rich-input font[size="4"]{font-size:16px}.form-rich-input font[size="5"]{font-size:18px}.form-rich-input font[size="6"]{font-size:20px}.form-rich-input font[size="7"]{font-size:22px}
.form-builder-title>.form-rich-description{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.form-builder-title>.form-rich-description .form-rich-input{padding-left:0;padding-right:0}

/* Training Hub */
.training-app{--tr-blue:#58aaf2;--tr-panel:color-mix(in srgb,var(--card) 91%,#0e2035);min-height:100%;padding:30px 34px 80px;color:var(--text);background:radial-gradient(circle at 90% 0,#4aa6ef16,transparent 35%)}
.training-app-header span{color:var(--tr-blue);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em}.training-app-header h1{margin:4px 0 22px;font-size:28px}.training-tabs{display:flex;gap:4px;margin-bottom:25px;padding:4px;width:max-content;border:1px solid var(--line);border-radius:12px;background:var(--bg)}.training-tabs button{padding:9px 16px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:750;cursor:pointer}.training-tabs button.active{background:var(--card);color:var(--text);box-shadow:0 2px 10px #0002}
.training-dashboard>header,.training-report>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.training-dashboard h2,.training-report h2{margin:0 0 4px;font-size:21px}.training-dashboard header p,.training-report header p{margin:0;color:var(--muted);font-size:11px}.training-primary{padding:10px 15px;border:0;border-radius:8px;background:var(--tr-blue);color:#07111d;font:inherit;font-size:11px;font-weight:850;cursor:pointer}.training-primary:disabled{opacity:.55}
.training-filters{display:grid;grid-template-columns:minmax(220px,1fr) 190px;gap:12px;margin-bottom:24px}.training-filters label,.training-form-grid label,.training-modal form label{display:grid;gap:6px}.training-filters label>span,.training-form-grid label>span,.training-modal form label>span{color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.07em}.training-app input,.training-app select,.training-app textarea,.training-modal input,.training-modal select{box-sizing:border-box;width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:11px}.training-cohort{margin-bottom:24px}.training-cohort>header{display:flex;align-items:center;gap:8px;margin-bottom:8px}.training-cohort>header h3{margin:0;font-size:13px}.training-cohort>header span{display:grid;place-items:center;min-width:21px;height:21px;border-radius:10px;background:#58aaf21b;color:var(--tr-blue);font-size:9px;font-weight:850}
.training-member-card{display:grid;grid-template-columns:38px minmax(180px,1.2fr) minmax(125px,.6fr) minmax(120px,.6fr);align-items:center;gap:13px;width:100%;margin-bottom:7px;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:var(--tr-panel);color:var(--text);text-align:left;cursor:pointer;transition:.15s}.training-member-card:hover{border-color:#58aaf26e;transform:translateY(-1px)}.training-avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#58aaf21c;color:#7fc4fb;font-size:11px;font-weight:900}.training-member-card>span{display:grid;gap:3px}.training-member-card strong{font-size:12px}.training-member-card small,.training-member-updated{color:var(--muted);font-size:9px}.training-member-score strong{font-size:17px;color:#82c7fb}.training-member-updated{text-align:right}
.training-report{max-width:830px}.training-report form{padding:22px;border:1px solid var(--line);border-radius:13px;background:var(--tr-panel)}.training-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.training-job-field,.training-notes{grid-column:1/-1}.training-current{display:flex;align-items:center;justify-content:space-between;margin:16px 0 0;padding:12px 14px;border:1px solid #58aaf238;border-radius:9px;background:#58aaf20d}.training-current span{color:var(--muted);font-size:10px}.training-current strong{font-size:14px}.training-current small{margin-left:5px;color:var(--muted);font-size:8px}.training-score{margin:17px 0;padding:0;border:0}.training-score legend{margin-bottom:8px;font-size:10px;font-weight:800}.training-score>div{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.training-score label input{position:absolute;opacity:0}.training-score label span{display:grid;place-items:center;height:42px;border:1px solid var(--line);border-radius:9px;background:var(--bg);font-size:13px;font-weight:850;cursor:pointer}.training-score input:checked+span{border-color:var(--tr-blue);background:#58aaf227;color:#83caff;box-shadow:inset 0 0 0 1px var(--tr-blue)}.training-score>small{display:block;margin-top:7px;color:var(--muted);font-size:9px}.training-report form>.training-primary{margin-top:16px}.training-error{color:#e78787;font-size:10px}
.training-empty,.training-loading{padding:55px 20px;text-align:center;color:var(--muted)}.training-empty h3{color:var(--text)}.training-toast{position:fixed;right:24px;bottom:24px;z-index:100;padding:11px 16px;border:1px solid #58aaf258;border-radius:9px;background:#10243a;color:#baddf8;font-size:11px;font-weight:750;box-shadow:0 12px 40px #0006}
.training-modal-overlay{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:20px;background:#05090fc7;backdrop-filter:blur(5px)}.training-modal{width:min(560px,94vw);max-height:86vh;overflow:auto;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text);box-shadow:0 25px 80px #0008}.training-modal>header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.training-modal h3{margin:0 0 4px}.training-modal header p{margin:0;color:var(--muted);font-size:10px}.training-modal header button{border:0;background:transparent;color:var(--muted);font-size:22px;cursor:pointer}.training-modal form{display:grid;gap:13px}.training-job-list{display:grid;grid-template-columns:1fr 1fr;gap:7px}.training-job-list>div{display:flex;align-items:center;justify-content:space-between;padding:9px;border:1px solid var(--line);border-radius:8px;font-size:10px}.training-job-list small{color:var(--muted)}.training-rating-dots{display:flex;gap:2px}.training-rating-dots i{display:grid;place-items:center;width:16px;height:16px;border-radius:5px;background:var(--bg);color:var(--muted);font-style:normal;font-size:7px}.training-rating-dots i.on{background:#58aaf229;color:#81c8fb}.training-modal h4{margin:20px 0 8px}.training-history article{padding:10px 0;border-top:1px solid var(--line)}.training-history article>*{display:block}.training-history article strong{font-size:10px}.training-history article span,.training-history article p{margin:3px 0 0;color:var(--muted);font-size:9px}
.tool-workspace-screen[data-tool="training-hub"] .tool-workspace-canvas{overflow-y:auto;padding:0}@media(max-width:700px){.training-app{padding:22px 15px 70px}.training-filters,.training-form-grid{grid-template-columns:1fr}.training-member-card{grid-template-columns:38px 1fr}.training-member-score{grid-column:2}.training-member-updated{display:none!important}.training-job-list{grid-template-columns:1fr}.training-tabs{width:100%}.training-tabs button{flex:1}.training-score>div{gap:4px}.training-score label span{height:38px}}

/* Attendance Hub */
.attendance-app{--at-accent:#e4a72b;--at-red:#ed6b62;min-height:100%;padding:30px 34px 80px;background:radial-gradient(circle at 90% 0,#e4a72b1a,transparent 35%);color:var(--text)}.attendance-header{display:flex;justify-content:space-between;gap:20px;align-items:start}.attendance-header span,.attendance-alerts span{color:var(--at-accent);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.attendance-header h1{margin:4px 0 3px;font-size:28px}.attendance-header p,.attendance-record header p,.attendance-discipline header p,.attendance-settings header p{margin:0;color:var(--muted);font-size:12px}.attendance-primary{padding:10px 14px;border:0;border-radius:9px;background:var(--at-accent);color:#17120a;font:inherit;font-size:12px;font-weight:850;cursor:pointer}.attendance-tabs{display:flex;gap:4px;margin:25px 0;padding:4px;width:max-content;border:1px solid var(--line);border-radius:12px;background:var(--bg)}.attendance-tabs button{padding:9px 14px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:750;cursor:pointer}.attendance-tabs button.active{background:var(--card);color:var(--text);box-shadow:0 2px 10px #0002}.attendance-tabs b{display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:4px;border-radius:9px;background:#e4a72b2b;color:var(--at-accent);font-size:9px}.attendance-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.attendance-metrics article,.attendance-roster,.attendance-alerts,.attendance-record,.attendance-discipline,.attendance-settings{border:1px solid var(--line);border-radius:14px;background:var(--card)}.attendance-metrics article{padding:18px}.attendance-metrics span{display:block;color:var(--muted);font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.07em}.attendance-metrics b{display:block;margin-top:8px;font-size:26px}.attendance-metrics .warn{color:var(--at-red)}.attendance-alerts{margin-top:16px;padding:18px}.attendance-alerts header,.attendance-roster header,.attendance-record header,.attendance-discipline>header{display:flex;justify-content:space-between;align-items:center;gap:18px}.attendance-alerts h2,.attendance-roster h2,.attendance-record h2,.attendance-discipline h2,.attendance-settings h2{margin:3px 0;font-size:17px}.attendance-alerts header button{border:0;background:transparent;color:var(--at-accent);font:inherit;font-weight:750;cursor:pointer}.attendance-alerts>button{display:flex;justify-content:space-between;width:100%;margin-top:10px;padding:11px 0;border:0;border-top:1px solid var(--line);background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}.attendance-alerts>button span{color:var(--muted);letter-spacing:0;text-transform:none}.attendance-roster,.attendance-record,.attendance-discipline,.attendance-settings{margin-top:16px;padding:20px}.attendance-roster header label{display:grid;gap:5px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.attendance-app input,.attendance-app select,.attendance-app textarea,.attendance-modal input,.attendance-modal select,.attendance-modal textarea{box-sizing:border-box;width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:12px}.attendance-member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:18px}.attendance-member-card{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer}.attendance-member-card.attention{border-color:#e4a72b77}.attendance-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e4a72b22;color:var(--at-accent);font-size:12px;font-weight:900}.attendance-member-card strong,.attendance-member-card small{display:block}.attendance-member-card small{margin-top:3px;color:var(--muted);font-size:10px}.attendance-member-card>b{font-size:19px;text-align:right}.attendance-member-card>b small{font-size:8px;text-transform:uppercase}.attendance-empty,.attendance-clear{padding:24px 4px;color:var(--muted);text-align:center}.attendance-empty h3{margin:0;color:var(--text)}.attendance-entry-list{margin-top:18px}.attendance-entry-list article,.attendance-alert-list article,.attendance-action-history article{display:flex;gap:13px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}.attendance-entry-list article>div,.attendance-alert-list article>div,.attendance-action-history article>div:first-child{flex:1}.attendance-entry-list strong,.attendance-alert-list strong,.attendance-action-history strong{font-size:13px}.attendance-entry-list p,.attendance-alert-list p,.attendance-action-history p{margin:3px 0;color:var(--muted);font-size:11px}.attendance-entry-list small{color:var(--muted);font-size:10px}.attendance-entry-list button,.attendance-action-history button{padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--text);font:inherit;font-size:10px;cursor:pointer}.attendance-entry-list>article>span{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;font-weight:900;font-size:11px}.attendance-entry-list .debit{background:#ed6b6222;color:var(--at-red)}.attendance-entry-list .credit{background:#50bd8e22;color:#63c99e}.attendance-thresholds{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.attendance-thresholds span{padding:11px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:10px}.attendance-thresholds b{display:block;margin-bottom:3px;color:var(--at-accent);font-size:18px}.attendance-alert-list,.attendance-action-history{margin-top:22px}.attendance-alert-list h3,.attendance-action-history h3{font-size:13px}.attendance-settings form{display:grid;gap:16px;margin-top:20px}.attendance-settings form>label,.attendance-modal label{display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.attendance-settings small{color:var(--muted);font-size:9px;text-transform:none;letter-spacing:0}.attendance-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.attendance-settings-grid label{display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}.attendance-settings fieldset{margin:0;padding:14px;border:1px solid var(--line);border-radius:10px}.attendance-settings legend{padding:0 6px;color:var(--at-accent);font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.attendance-settings fieldset label{display:grid;grid-template-columns:1fr 72px 42px;align-items:center;gap:8px;margin-top:8px;color:var(--muted);font-size:10px}.attendance-tools{position:fixed;right:22px;bottom:20px;padding:10px 13px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--text);font:inherit;font-size:11px;font-weight:800;cursor:pointer}.attendance-toast{position:fixed;right:24px;bottom:68px;padding:11px 14px;border-radius:9px;background:#1d8355;color:#fff;font-size:12px;font-weight:700;box-shadow:0 8px 30px #0004}.attendance-toast.error,.attendance-error{background:#9f3d39;color:#fff}.attendance-modal-wrap{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:18px;background:#0009}.attendance-modal{width:min(520px,100%);max-height:90vh;overflow:auto;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text)}.attendance-modal header{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px}.attendance-modal header span{color:var(--at-accent);font-size:10px;font-weight:850;letter-spacing:.1em}.attendance-modal header h2{margin:3px 0;font-size:20px}.attendance-modal header p{margin:0;color:var(--muted);font-size:12px}.attendance-modal header button{border:0;background:transparent;color:var(--text);font-size:24px;cursor:pointer}.attendance-modal form{display:grid;gap:13px}.attendance-modal textarea{resize:vertical}.attendance-error{margin:0;padding:9px;border-radius:7px;font-size:11px;text-transform:none;letter-spacing:0}.tool-workspace-screen[data-tool="attendance-hub"] .tool-workspace-canvas{padding:0}@media(max-width:700px){.attendance-app{padding:22px 15px 70px}.attendance-header{display:block}.attendance-header .attendance-primary{margin-top:15px}.attendance-tabs{width:100%;overflow:auto}.attendance-tabs button{white-space:nowrap}.attendance-metrics{grid-template-columns:1fr}.attendance-roster header,.attendance-record header,.attendance-discipline>header{align-items:start;flex-direction:column}.attendance-thresholds,.attendance-settings-grid{grid-template-columns:1fr 1fr}.attendance-settings fieldset label{grid-template-columns:1fr 58px 34px}}
.tool-workspace-screen[data-tool="training-hub"]>.tool-workspace-header{display:none}.tool-workspace-screen[data-tool="training-hub"] .tool-workspace-canvas{height:100%}.training-corner-actions{position:fixed;right:18px;bottom:18px;z-index:20;display:flex;gap:7px}.training-tools-button,.training-settings-button{display:flex;align-items:center;justify-content:center;gap:8px;height:43px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit;font-size:12px;font-weight:800;box-shadow:0 8px 25px #0004;cursor:pointer}.training-settings-button{width:50px;padding:0}.training-settings-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7}.training-tools-button .tools-home-icon{display:grid;grid-template-columns:repeat(3,3px);gap:2px}.training-tools-button .tools-home-icon i{width:3px;height:3px;border-radius:1px;background:currentColor}
.public-training-current{display:flex;align-items:center;justify-content:space-between;padding:11px;border:1px solid #328dca55;border-radius:8px;background:#328dca12}.public-training-current span{color:var(--muted);font-size:11px}.public-training-rating{margin:0;padding:0;border:0}.public-training-rating legend{margin-bottom:7px;font-size:11px;font-weight:800}.public-training-rating>div{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.public-training-rating label input{position:absolute;opacity:0}.public-training-rating label span{display:grid;place-items:center;height:39px;border:1px solid var(--border);border-radius:7px;background:var(--bg);font-weight:850}.public-training-rating input:checked+span{border-color:#328dca;background:#328dca25;color:#70bced}.public-training-rating>small{display:block;margin-top:6px;color:var(--muted);font-size:9px}
.team-hub-tabs button[data-team-tab="forms"],.team-hub-tabs button[data-team-tab="submissions"]{display:inline-flex;align-items:center}
.training-settings-nav::before{content:"APP SETTINGS"}.training-settings-nav button::before{content:"▤"}.training-setup-list{display:grid;gap:9px}.training-setup-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}.training-setup-row.active{border-color:#58aaf267;background:#58aaf20c}.training-setup-row span{color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.08em}.training-setup-row strong{display:block;margin-top:3px;font-size:13px}.training-setup-row p{margin:4px 0 0;color:var(--muted);font-size:10px}.training-setup-row>div:last-child{display:flex;align-items:center;gap:6px}.training-setup-row button,.training-setup-row b,.training-setup-editor button{padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--text);font:inherit;font-size:9px;font-weight:800}.training-setup-row b{border-color:#58aaf253;color:#75bdf5}.training-setup-row button.danger{color:#ea7883}.training-setup-editor>label,.training-setup-job-columns label{display:grid;gap:6px}.training-setup-editor label>span{color:var(--muted);font-size:9px;font-weight:850;text-transform:uppercase}.training-setup-editor input,.training-setup-editor textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}.training-setup-job-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}.training-setup-editor .settings-section-header button{margin-bottom:12px}@media(max-width:700px){.training-setup-row{align-items:flex-start;flex-direction:column}.training-setup-row>div:last-child{flex-wrap:wrap}.training-setup-job-columns{grid-template-columns:1fr}}
.form-rich-description:not(:focus-within) .form-rich-toolbar{display:none}
.form-rich-description:not(:focus-within){border-color:transparent;background:transparent}
.form-rich-description:not(:focus-within) .ql-editor{padding:5px 0}
.form-builder-section:not(.is-editing-section)>header .form-rich-description:not(.has-content),.form-question-card:not(.is-editing-question)>.form-rich-description:not(.has-content){display:none}
.form-builder-section>header>div:last-child>span{display:none}
.form-builder-section:not(.is-editing-section)>header input[data-section-title],.form-question-card:not(.is-editing-question) .form-question-head input[data-question-label]{padding-left:0;padding-right:0;border-color:transparent;background:transparent;box-shadow:none}
.form-question-card:not(.is-editing-question) .form-question-head{display:block}
.form-question-card:not(.is-editing-question) .form-question-head select[data-question-type]{display:none}
.form-question-card:not(.is-editing-question){padding-top:13px;padding-bottom:7px}
.form-rich-input.ql-container{min-height:30px;max-height:112px;border:0!important;font-family:inherit;font-size:12px;overflow:hidden}
.form-rich-input .ql-editor{min-height:30px;max-height:112px;padding:7px 9px;overflow-y:auto;color:var(--muted);font-family:inherit;font-size:12px;line-height:1.4;white-space:pre-wrap}
.form-rich-input .ql-editor.ql-blank:before{left:9px;right:9px;color:color-mix(in srgb,var(--muted) 65%,transparent);font-style:normal}
.form-builder-title>.form-rich-description .form-rich-input .ql-editor{padding-left:0;padding-right:0}

.attendance-member-card.discipline-verbal{border-color:#d5a834;background:#d5a83414}.attendance-member-card.discipline-verbal .attendance-avatar{background:#d5a83429;color:#e7bf51}.attendance-member-card.discipline-written{border-color:#e57c3a;background:#e57c3a16}.attendance-member-card.discipline-written .attendance-avatar{background:#e57c3a2b;color:#f09a5f}.attendance-member-card.discipline-suspension{border-color:#df5056;background:#df505614}.attendance-member-card.discipline-suspension .attendance-avatar{background:#df50562b;color:#f07176}.attendance-member-card.discipline-termination{border-color:#a93d5f;background:#a93d5f1b;box-shadow:inset 3px 0 #d94c72}.attendance-member-card.discipline-termination .attendance-avatar{background:#a93d5f35;color:#ee7294}
.attendance-scoreboard-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px;padding:11px 15px;border:1px solid var(--line);border-radius:10px;background:var(--card)}.attendance-scoreboard-header>div{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px}.attendance-scoreboard-header span{color:#e4a72b;font-size:10px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.attendance-scoreboard-header i{width:1px;height:14px;background:var(--line)}.attendance-scoreboard-header .warn{color:#ee7885}.attendance-scoreboard-header button{border:0;background:transparent;color:#e4a72b;font:inherit;font-size:11px;font-weight:800;cursor:pointer}.attendance-scoreboard{padding:0}.attendance-scoreboard>header{padding:18px 20px;border-bottom:1px solid var(--line)}.attendance-scoreboard-actions{display:flex;align-items:end;gap:8px}.attendance-scoreboard-actions label{min-width:190px}.attendance-scoreboard-actions button{padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:11px;font-weight:800;cursor:pointer}.attendance-table-wrap{overflow:auto}.attendance-scoreboard table{width:100%;border-collapse:collapse}.attendance-scoreboard th{padding:10px 20px;border-bottom:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.07em;text-align:left;text-transform:uppercase}.attendance-scoreboard td{padding:11px 20px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:12px}.attendance-scoreboard tbody tr{cursor:pointer;transition:background .15s}.attendance-scoreboard tbody tr:focus{outline:0;background:color-mix(in srgb,var(--card) 88%,#e4a72b)}@media(hover:hover){.attendance-scoreboard tbody tr:hover{outline:0;background:color-mix(in srgb,var(--card) 88%,#e4a72b)}}.attendance-scoreboard td:first-child{display:flex;align-items:center;gap:10px}.attendance-scoreboard td:nth-child(2)>b{font-size:18px}.attendance-scoreboard td:nth-child(4) strong,.attendance-scoreboard td:nth-child(4) small{display:block}.attendance-scoreboard td:nth-child(4) small{margin-top:2px;color:var(--muted);font-size:10px}.attendance-level{display:inline-block;padding:4px 7px;border-radius:5px;background:var(--bg);color:var(--muted);font-size:10px;font-weight:800}.discipline-verbal .attendance-level{background:#d5a83422;color:#e7bf51}.discipline-written .attendance-level{background:#e57c3a22;color:#f09a5f}.discipline-suspension .attendance-level{background:#df505622;color:#f07176}.discipline-termination .attendance-level{background:#a93d5f2b;color:#ee7294}.attendance-row-action{padding:7px 9px;border:0;border-radius:6px;background:#e4a72b;color:#17120a;font:inherit;font-size:10px;font-weight:850;cursor:pointer}.attendance-row-arrow{color:var(--muted);font-size:21px}

/* Attendance Hub */
.tool-workspace-screen[data-tool="attendance-hub"] .tool-workspace-header{display:none}.tool-workspace-screen[data-tool="attendance-hub"] .tool-workspace-canvas{overflow-y:auto;padding:0}.attendance-app{min-height:100%;padding:30px 34px 80px;background:radial-gradient(circle at 90% 0,#e4a72b1a,transparent 35%);color:var(--text)}.attendance-header,.attendance-roster header,.attendance-record header,.attendance-discipline>header{display:flex;justify-content:space-between;gap:18px;align-items:center}.attendance-header h1{margin:4px 0;font-size:28px}.attendance-header span{color:#e4a72b;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.attendance-header p,.attendance-record header p,.attendance-discipline header p,.attendance-settings header p{margin:0;color:var(--muted);font-size:12px}.attendance-primary{padding:10px 14px;border:0;border-radius:9px;background:#e4a72b;color:#17120a;font:inherit;font-size:12px;font-weight:850;cursor:pointer}.attendance-tabs{display:flex;gap:4px;margin:25px 0;padding:4px;width:max-content;border:1px solid var(--line);border-radius:12px;background:var(--bg)}.attendance-tabs button{padding:9px 14px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:750;cursor:pointer}.attendance-tabs button.active{background:var(--card);color:var(--text)}.attendance-tabs b{color:#e4a72b}.attendance-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.attendance-metrics article,.attendance-roster,.attendance-alerts,.attendance-record,.attendance-discipline,.attendance-settings{border:1px solid var(--line);border-radius:14px;background:var(--card)}.attendance-metrics article{padding:18px}.attendance-metrics span{display:block;color:var(--muted);font-size:10px;font-weight:750;text-transform:uppercase}.attendance-metrics b{display:block;margin-top:8px;font-size:26px}.attendance-metrics .warn{color:#ed6b62}.attendance-alerts,.attendance-roster,.attendance-record,.attendance-discipline,.attendance-settings{margin-top:16px;padding:20px}.attendance-alerts>button{display:flex;justify-content:space-between;width:100%;margin-top:10px;padding:11px 0;border:0;border-top:1px solid var(--line);background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer}.attendance-alerts span{color:var(--muted)}.attendance-roster h2,.attendance-record h2,.attendance-discipline h2,.attendance-settings h2{margin:0;font-size:17px}.attendance-roster header label{display:grid;gap:5px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.attendance-app input,.attendance-app select,.attendance-app textarea,.attendance-modal input,.attendance-modal select,.attendance-modal textarea{box-sizing:border-box;width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:12px}.attendance-member-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:18px}.attendance-member-card{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer}.attendance-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e4a72b22;color:#e4a72b;font-size:12px;font-weight:900}.attendance-member-card strong,.attendance-member-card small{display:block}.attendance-member-card small{margin-top:3px;color:var(--muted);font-size:10px}.attendance-member-card>b{font-size:19px;text-align:right}.attendance-member-card>b small{font-size:8px;text-transform:uppercase}.attendance-entry-list article,.attendance-alert-list article,.attendance-action-history article{display:flex;gap:13px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}.attendance-entry-list article>div,.attendance-alert-list article>div,.attendance-action-history article>div:first-child{flex:1}.attendance-entry-list p,.attendance-alert-list p,.attendance-action-history p{margin:3px 0;color:var(--muted);font-size:11px}.attendance-entry-list>article>span{display:grid;place-items:center;width:37px;height:37px;border-radius:50%;font-weight:900;font-size:11px}.attendance-entry-list .debit{background:#ed6b6222;color:#ed6b62}.attendance-entry-list .credit{background:#50bd8e22;color:#63c99e}.attendance-entry-list button,.attendance-action-history button{padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:transparent;color:var(--text);font:inherit;font-size:10px;cursor:pointer}.attendance-thresholds{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.attendance-thresholds span{padding:11px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:10px}.attendance-thresholds b{display:block;margin-bottom:3px;color:#e4a72b;font-size:18px}.attendance-settings form{display:grid;gap:16px;margin-top:20px}.attendance-settings form>label,.attendance-modal label{display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}.attendance-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.attendance-settings fieldset{margin:0;padding:14px;border:1px solid var(--line);border-radius:10px}.attendance-settings legend{color:#e4a72b;font-size:10px;font-weight:850;text-transform:uppercase}.attendance-settings fieldset label{display:grid;grid-template-columns:1fr 72px 42px;align-items:center;gap:8px;margin-top:8px;color:var(--muted);font-size:10px}.attendance-tools{position:fixed;right:22px;bottom:20px;padding:10px 13px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--text);font:inherit;font-size:11px;font-weight:800;cursor:pointer}.attendance-toast{position:fixed;right:24px;bottom:68px;padding:11px 14px;border-radius:9px;background:#1d8355;color:#fff;font-size:12px;font-weight:700}.attendance-toast.error,.attendance-error{background:#9f3d39;color:#fff}.attendance-modal-wrap{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:18px;background:#0009}.attendance-modal{width:min(520px,100%);max-height:90vh;overflow:auto;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text)}.attendance-modal header{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px}.attendance-modal header h2{margin:3px 0;font-size:20px}.attendance-modal header button{border:0;background:transparent;color:var(--text);font-size:24px;cursor:pointer}.attendance-modal form{display:grid;gap:13px}.attendance-error{margin:0;padding:9px;border-radius:7px;font-size:11px}.attendance-empty,.attendance-clear{padding:24px 4px;color:var(--muted);text-align:center}@media(max-width:700px){.attendance-app{padding:22px 15px 70px}.attendance-header,.attendance-roster header,.attendance-record header,.attendance-discipline>header{align-items:start;flex-direction:column}.attendance-metrics{grid-template-columns:1fr}.attendance-tabs{width:100%;overflow:auto}.attendance-tabs button{white-space:nowrap}.attendance-thresholds,.attendance-settings-grid{grid-template-columns:1fr 1fr}}

/* Attendance record detail */
.attendance-modal:has(.attendance-member-record){width:min(940px,100%);padding:0;overflow:hidden}.attendance-record-modal-header{padding:22px 24px 17px!important;margin:0!important;border-bottom:1px solid var(--line)}.attendance-record-modal-header p{margin:4px 0 0;color:var(--muted);font-size:12px}.attendance-member-record{max-height:calc(90vh - 186px);overflow:auto;padding:20px 24px}.attendance-record-overview{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:20px}.attendance-record-overview>div{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}.attendance-record-overview span,.attendance-record-overview small{display:block;color:var(--muted);font-size:10px}.attendance-record-overview span{font-weight:800;letter-spacing:.06em;text-transform:uppercase}.attendance-record-overview b{display:block;margin:5px 0;font-size:21px}.attendance-record-overview .attendance-record-level{font-size:14px}.attendance-record-section{margin-top:18px}.attendance-record-section:first-child{margin-top:0}.attendance-record-section h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:13px}.attendance-record-section h3 span{display:grid;place-items:center;min-width:19px;height:19px;border-radius:10px;background:#e4a72b22;color:#e4a72b;font-size:10px}.attendance-record-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:9px}.attendance-member-record table{width:100%;min-width:590px;border-collapse:collapse}.attendance-member-record th,.attendance-member-record td{padding:9px 10px;border-bottom:1px solid var(--line);font-size:11px;text-align:left;vertical-align:top}.attendance-member-record th{color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.attendance-member-record tbody tr:last-child td{border-bottom:0}.attendance-member-record td.debit{color:#ed6b62;font-weight:850}.attendance-member-record td.credit{color:#63c99e;font-weight:850}.attendance-record-empty{margin:0;padding:13px;border:1px dashed var(--line);border-radius:9px;color:var(--muted);font-size:11px}.attendance-record-modal-actions{display:flex;justify-content:flex-end;gap:8px;padding:15px 24px;border-top:1px solid var(--line);background:var(--bg)}.attendance-record-modal-actions button{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font:inherit;font-size:11px;font-weight:800;cursor:pointer}.attendance-record-modal-actions .attendance-primary{border:0;background:#e4a72b;color:#17120a}@media(max-width:700px){.attendance-modal:has(.attendance-member-record){width:100%;max-height:100vh;border-radius:0}.attendance-member-record{max-height:calc(100vh - 181px);padding:16px}.attendance-record-modal-header{padding:18px 16px 14px!important}.attendance-record-overview{grid-template-columns:1fr}.attendance-record-modal-actions{padding:12px 16px}}

/* Attendance activity table */
.attendance-activity{padding:0}.attendance-activity>header{padding:18px 20px;border-bottom:1px solid var(--line)}.attendance-activity-table-wrap{overflow:auto}.attendance-activity-table{width:100%;min-width:900px;border-collapse:collapse}.attendance-activity-table th,.attendance-activity-table td{padding:10px 12px;border-bottom:1px solid var(--line);font-size:11px;text-align:left;vertical-align:top}.attendance-activity-table th{color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.attendance-activity-table th:first-child,.attendance-activity-table td:first-child{padding-left:20px;white-space:nowrap}.attendance-activity-table th:last-child,.attendance-activity-table td:last-child{padding-right:20px;text-align:right}.attendance-activity-table tbody tr:last-child td{border-bottom:0}.attendance-activity-table td:nth-child(2) strong{white-space:nowrap}.attendance-activity-table td:nth-child(4){font-weight:850;white-space:nowrap}.attendance-activity-table td.debit{color:#ed6b62}.attendance-activity-table td.credit{color:#63c99e}.attendance-activity-table td:nth-child(5){min-width:170px;color:var(--muted)}.attendance-delete-pill{min-width:58px;padding:7px 9px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font:inherit;font-size:9px;font-weight:800;white-space:nowrap;cursor:pointer}.attendance-delete-pill:hover{border-color:#ed6b6280;color:#ed8a83}.attendance-delete-pill.confirming{border-color:#ed6b62;background:#ed6b6222;color:#f18b84}.attendance-delete-pill:disabled{opacity:.55;cursor:wait}@media(max-width:700px){.attendance-activity>header{padding:16px}.attendance-activity-table th:first-child,.attendance-activity-table td:first-child{padding-left:16px}.attendance-activity-table th:last-child,.attendance-activity-table td:last-child{padding-right:16px}}

/* Attendance policy list editing */
.attendance-policy-rows{display:grid;gap:7px;margin-top:8px}.attendance-policy-row{display:grid;grid-template-columns:minmax(0,1fr) 76px 38px 30px;align-items:center;gap:7px}.attendance-policy-row span{color:var(--muted);font-size:9px}.attendance-policy-row button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:7px;background:transparent;color:#ed8179;font:inherit;font-size:16px;cursor:pointer}.attendance-policy-row button:hover{border-color:#ed6b6280;background:#ed6b6214}.attendance-policy-add{width:100%;margin-top:9px;padding:8px 10px;border:1px dashed #e4a72b66;border-radius:8px;background:#e4a72b0b;color:#e6b44d;font:inherit;font-size:9px;font-weight:850;text-align:left;cursor:pointer}@media(max-width:520px){.attendance-policy-row{grid-template-columns:minmax(0,1fr) 66px 30px}.attendance-policy-row span{display:none}}

/* Attendance policy category layout */
.attendance-policy-groups{display:grid;grid-template-columns:1fr 1fr;gap:12px}.attendance-policy-groups fieldset{min-width:0}.attendance-policy-fixed>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}.attendance-policy-fixed strong{font-size:11px}.attendance-policy-fixed span{color:#e4a72b;font-size:10px;font-weight:850}.attendance-policy-fixed p{margin:8px 2px 0;color:var(--muted);font-size:9px;line-height:1.45}@media(max-width:780px){.attendance-policy-groups{grid-template-columns:1fr}}

/* Attendance policy settings sizing and controls */
.attendance-settings{box-sizing:border-box;width:min(980px,100%);margin:16px auto 0}.attendance-settings>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.attendance-policy-reset{flex:none;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:10px;font-weight:800;cursor:pointer}.attendance-policy-reset:hover{border-color:#e4a72b88;color:var(--text)}.attendance-policy-reset.confirming{border-color:#ed6b6288;background:#ed6b6214;color:#ed8179}.attendance-policy-row button{display:flex;align-items:center;justify-content:center;font-size:0;line-height:1}.attendance-policy-row .attendance-policy-delete-icon{display:block;color:#ed8179;font-size:17px;line-height:1;transform:translateY(-1px)}@media(max-width:520px){.attendance-settings>header{align-items:stretch;flex-direction:column}.attendance-policy-reset{width:100%}}

.attendance-settings form>fieldset{box-sizing:border-box;width:calc(50% - 6px)}@media(max-width:780px){.attendance-settings form>fieldset{width:100%}}

/* Shared Attendance Hub content width */
.attendance-header,.attendance-app>main{box-sizing:border-box;width:min(980px,100%);margin-left:auto;margin-right:auto}.attendance-tabs{margin-left:auto;margin-right:auto}.attendance-excused-table{min-width:760px}.attendance-excused-table td:nth-child(3){min-width:230px;color:var(--muted)}.attendance-excused-table td:nth-child(4){font-weight:400}.attendance-excused-table td:nth-child(5){min-width:110px}.attendance-excused-table a{color:var(--at-accent);font-weight:750;text-decoration:none}.attendance-excused-table a:hover{text-decoration:underline}

/* Attendance overview summary cards */
.attendance-overview-summary{display:grid;grid-template-columns:1.05fr .8fr 1fr .8fr 1.55fr;gap:9px;margin-bottom:14px}.attendance-overview-summary-title,.attendance-summary-card{box-sizing:border-box;min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:11px;background:var(--card);color:var(--text);text-align:left}.attendance-overview-summary-title{display:flex;justify-content:center;flex-direction:column;background:linear-gradient(135deg,#e4a72b18,transparent 72%),var(--card)}.attendance-overview-summary-title span,.attendance-summary-card span{display:block;color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.attendance-overview-summary-title strong{display:block;margin-top:5px;color:var(--at-accent);font-size:14px}.attendance-summary-card{position:relative;font:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}.attendance-summary-card:focus-visible{outline:0;border-color:#e4a72b88;background:color-mix(in srgb,var(--card) 90%,#e4a72b);transform:translateY(-1px)}@media(hover:hover){.attendance-summary-card:hover{outline:0;border-color:#e4a72b88;background:color-mix(in srgb,var(--card) 90%,#e4a72b);transform:translateY(-1px)}}.attendance-summary-card strong{display:block;overflow:hidden;margin-top:5px;font-size:22px;line-height:1.05;text-overflow:ellipsis;white-space:nowrap}.attendance-summary-card small{display:block;overflow:hidden;margin-top:5px;color:var(--muted);font-size:8px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}.attendance-summary-card.warning{border-color:#ed6b624d;background:linear-gradient(135deg,#ed6b6213,transparent 75%),var(--card)}.attendance-summary-card.warning strong{color:#ed8179}.attendance-summary-latest strong{font-size:12px}.attendance-summary-latest small{font-size:9px}.attendance-summary-card.disabled{cursor:default}.attendance-summary-card.disabled:hover{border-color:var(--line);background:var(--card);transform:none}@media(max-width:900px){.attendance-overview-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.attendance-overview-summary-title,.attendance-summary-latest{grid-column:span 2}}@media(max-width:520px){.attendance-overview-summary{grid-template-columns:1fr}.attendance-overview-summary-title,.attendance-summary-latest{grid-column:auto}}

/* Keep overview summaries together; use a swipeable strip on narrow screens. */
.attendance-overview-summary{grid-template-columns:minmax(135px,1.05fr) minmax(110px,.8fr) minmax(150px,1fr) minmax(110px,.8fr) minmax(220px,1.55fr)}@media(max-width:800px){.attendance-overview-summary{display:flex;gap:8px;margin-right:-15px;margin-left:-15px;padding:0 15px 8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:15px;scroll-snap-type:x proximity;scrollbar-width:none;-ms-overflow-style:none}.attendance-overview-summary::-webkit-scrollbar{display:none}.attendance-overview-summary-title,.attendance-summary-card{flex:0 0 145px;min-height:80px;scroll-snap-align:start}.attendance-summary-card.warning{flex-basis:180px}.attendance-summary-latest{flex-basis:245px}}

/* Attendance navigation, activity search, and app settings */
.attendance-scoreboard-actions label{display:none!important}

/* Match the FOH Weather Tracker settings shell exactly at the host level. */
.attendance-modal-wrap.attendance-settings-host{box-sizing:border-box;padding:24px;background:rgba(7,9,16,.78)}.attendance-settings-host .attendance-modal{width:min(920px,100%);height:min(700px,100%);max-height:calc(100dvh - 48px);border-radius:12px}.attendance-settings-host .settings-header{min-height:68px;padding:13px 20px}.attendance-settings-host .settings-layout{grid-template-columns:220px minmax(0,1fr)}.attendance-settings-host .settings-nav{padding:20px 10px 20px 16px}.attendance-settings-host .settings-content{padding:26px 30px 34px}.attendance-settings-host .settings-footer{min-height:64px;padding:11px 20px}

/* Balanced overview metrics: four equal cards and a wider latest-activity card. */
.attendance-overview-summary{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.55fr)}@media(max-width:800px){.attendance-overview-summary-title,.attendance-summary-card,.attendance-summary-card.warning{flex-basis:160px}.attendance-summary-latest{flex-basis:240px}}

/* Attendance never requires sideways scrolling outside the overview metrics. */
@media(max-width:700px){.attendance-tabs{flex-wrap:wrap;width:auto;overflow:visible}.attendance-tabs button{flex:1 1 auto}.attendance-table-wrap,.attendance-activity-table-wrap,.attendance-record-table-wrap{overflow-x:hidden}.attendance-scoreboard table,.attendance-activity-table,.attendance-member-record table{min-width:0}.attendance-scoreboard table,.attendance-scoreboard tbody,.attendance-activity-table,.attendance-activity-table tbody,.attendance-member-record table,.attendance-member-record tbody{display:block;width:100%}.attendance-scoreboard thead,.attendance-activity-table thead,.attendance-member-record thead{display:none}.attendance-scoreboard tbody tr,.attendance-activity-table tbody tr,.attendance-member-record tbody tr{display:block;margin:10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);overflow:hidden}.attendance-scoreboard td,.attendance-activity-table td,.attendance-member-record td{box-sizing:border-box;display:grid!important;grid-template-columns:92px minmax(0,1fr);align-items:start;gap:10px;width:100%;min-width:0!important;padding:8px 10px!important;border-bottom:1px solid var(--line)!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere}.attendance-scoreboard td:last-child,.attendance-activity-table td:last-child,.attendance-member-record td:last-child{border-bottom:0!important}.attendance-scoreboard td::before,.attendance-activity-table td::before,.attendance-member-record td::before{color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.attendance-scoreboard td:nth-child(1)::before{content:"Team member"}.attendance-scoreboard td:nth-child(2)::before{content:"Points"}.attendance-scoreboard td:nth-child(3)::before{content:"Current level"}.attendance-scoreboard td:nth-child(4)::before{content:"Latest event"}.attendance-scoreboard td:nth-child(5){display:none!important}.attendance-activity-table td:nth-child(1)::before{content:"Date"}.attendance-activity-table td:nth-child(2)::before{content:"Team member"}.attendance-activity-table td:nth-child(3)::before{content:"Activity"}.attendance-activity-table td:nth-child(4)::before{content:"Points"}.attendance-activity-table td:nth-child(5)::before{content:"Notes"}.attendance-activity-table td:nth-child(6)::before{content:"Recorded by"}.attendance-activity-table td:nth-child(7)::before{content:"Action"}.attendance-excused-table td:nth-child(1)::before{content:"Date"}.attendance-excused-table td:nth-child(2)::before{content:"Team member"}.attendance-excused-table td:nth-child(3)::before{content:"Details"}.attendance-excused-table td:nth-child(4)::before{content:"Reported by"}.attendance-excused-table td:nth-child(5)::before{content:"Attachment"}.attendance-excused-table td:nth-child(6)::before{content:"Action"}.attendance-excused-table td:nth-child(7){display:none!important}.attendance-record-table-wrap{border:0}.attendance-member-record tbody tr{margin:8px 0}.attendance-member-record td::before{content:"Record detail"}.attendance-settings-host .settings-layout{grid-template-columns:1fr}.attendance-settings-host .settings-nav{display:grid;grid-template-columns:1fr 1fr;padding:10px;border-right:0;border-bottom:1px solid var(--line)}.attendance-settings-host .settings-nav::before{grid-column:1/-1}.attendance-settings-host .settings-nav button{margin:0;text-align:center}.attendance-settings-host .settings-content{padding:18px 16px 26px}.attendance-settings-host .attendance-settings-grid,.attendance-settings-host .attendance-policy-groups{grid-template-columns:1fr}.attendance-settings-host .attendance-settings form>fieldset{width:100%}}
.attendance-tabs button.active{box-shadow:none!important;filter:none!important}.attendance-scoreboard>header p,.attendance-scoreboard-actions label{display:none}.attendance-activity-actions{display:flex;align-items:flex-end;gap:8px}.attendance-activity-actions label{display:grid;gap:5px;min-width:210px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.attendance-activity-no-results{margin:0;padding:24px;color:var(--muted);font-size:11px;text-align:center}.attendance-corner-actions{position:fixed;right:22px;bottom:20px;z-index:20;display:flex;gap:7px}.attendance-corner-actions .attendance-tools{position:static}.attendance-leader-needed{margin:0;padding:10px;border:1px solid #e4a72b55;border-radius:8px;background:#e4a72b12;color:var(--muted);font-size:10px}.attendance-settings-host .attendance-modal{width:min(920px,100%);height:min(700px,100%);max-height:100%;padding:0;overflow:hidden;border:0;background:transparent;box-shadow:none}.attendance-settings-host .settings-shell{width:100%;height:100%}.attendance-settings-nav::before{content:"APP SETTINGS"}.attendance-settings-nav button[data-attendance-settings-tab="policy"]::before{content:"≡"}.attendance-settings-nav button[data-attendance-settings-tab="leadership"]::before{content:"♟"}.attendance-settings-content{min-width:0;overflow:auto}.attendance-settings-content .attendance-settings{width:100%;margin:0;padding:0;border:0;background:transparent}.attendance-leadership-settings>header h3{margin:0;font-size:20px}.attendance-leadership-settings>header p{margin:5px 0 20px;color:var(--muted);font-size:12px}.attendance-leader-add{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.attendance-leader-add select{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit}.attendance-leader-add button{padding:0 13px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:10px;font-weight:800;cursor:pointer}.attendance-leader-list{display:grid;gap:7px;margin:16px 0}.attendance-leader-list>p{padding:22px;border:1px dashed var(--line);border-radius:9px;color:var(--muted);font-size:11px;text-align:center}.attendance-leader-list>div{display:grid;grid-template-columns:34px minmax(0,1fr) 32px;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg)}.attendance-leader-list .attendance-avatar{width:34px;height:34px}.attendance-leader-list strong{font-size:11px}.attendance-leader-list button{display:flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:1px solid var(--line);border-radius:7px;background:transparent;color:#ed8179;font:inherit;font-size:17px;line-height:1;cursor:pointer}.attendance-leader-list button span{display:block;line-height:1;transform:translateY(-1px)}@media(max-width:700px){.attendance-activity-actions{align-items:stretch;flex-direction:column;width:100%}.attendance-activity-actions label{min-width:0}.attendance-settings-host .attendance-modal{width:100%;height:100%}.attendance-leader-add{grid-template-columns:1fr}.attendance-corner-actions{right:15px;bottom:15px}}

/* Attendance scoreboard responsive table */
.attendance-scoreboard table{min-width:720px}.attendance-scoreboard td:first-child{display:table-cell}.attendance-scoreboard-member{display:flex;align-items:center;gap:10px}@media(max-width:760px){.attendance-scoreboard>header,.attendance-scoreboard-header{align-items:stretch;flex-direction:column}.attendance-scoreboard-actions{align-items:end;width:100%}.attendance-scoreboard-actions label{flex:1;min-width:0}.attendance-scoreboard-header>div{flex-wrap:wrap}.attendance-table-wrap{overscroll-behavior-x:contain}}

/* Attendance modal layering and member search */
.attendance-modal-wrap{z-index:2147483000}.attendance-member-picker{position:relative}.attendance-member-results{display:grid;gap:5px;text-transform:none;letter-spacing:0}.attendance-member-search-help{margin:0;padding:7px 2px;color:var(--muted);font-size:10px;font-weight:500}.attendance-member-results>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer}.attendance-member-results>button:hover{border-color:#e4a72b80;background:#e4a72b0d}.attendance-member-results>button strong{font-size:11px}.attendance-member-results>button span{color:#e4a72b;font-size:9px;font-weight:800;text-transform:uppercase}.attendance-member-selected{padding:9px 10px;border:1px solid #e4a72b66;border-radius:7px;background:#e4a72b12}.attendance-member-selected span{display:block;color:#e4a72b;font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.attendance-member-selected strong{display:block;margin-top:2px;color:var(--text);font-size:11px;text-transform:none}.attendance-member-no-results{padding:10px;border:1px dashed var(--line);border-radius:8px;background:var(--bg)}.attendance-member-no-results p{margin:0 0 8px;color:var(--muted);font-size:10px;font-weight:500}.attendance-member-no-results button{width:100%;padding:8px 10px;border:1px solid #e4a72b66;border-radius:7px;background:#e4a72b14;color:#e9b84f;font:inherit;font-size:10px;font-weight:800;text-align:left;cursor:pointer}.attendance-member-no-results button:disabled{opacity:.55;cursor:wait}

/* Current-cycle attendance highlighting */
.attendance-member-record tr.attendance-current-cycle td{background:#e4a72b12}.attendance-member-record tr.attendance-current-cycle td:first-child{box-shadow:inset 3px 0 #e4a72b}.attendance-current-badge{display:block;width:max-content;margin-top:4px;padding:2px 5px;border-radius:999px;background:#e4a72b26;color:#e8b74f;font-size:7px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}@media print{.attendance-print-record tr.attendance-current-cycle td{background:#fff4d8!important}.attendance-print-record tr.attendance-current-cycle td:first-child{border-left:3px solid #d39a1f}.attendance-print-record .attendance-current-badge{background:#f2e3bd!important;color:#6d4c0d}}

/* Full team member record printing */
.attendance-print-record{display:none}@media print{@page{margin:.55in}body.attendance-printing{-webkit-print-color-adjust:exact;print-color-adjust:exact;background:#fff!important}body.attendance-printing>*:not(.attendance-print-record){display:none!important}.attendance-print-record{display:block!important;color:#17202a;font-family:Arial,sans-serif;font-size:11px;line-height:1.4}.attendance-print-record *{box-sizing:border-box}.attendance-print-record .print-header{display:flex;justify-content:space-between;align-items:end;padding-bottom:15px;border-bottom:3px solid #d71920}.attendance-print-record .print-header span{color:#d71920;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.attendance-print-record .print-header h1{margin:3px 0 0;font-size:24px}.attendance-print-record .print-header p{margin:0;color:#68727d}.attendance-print-record .print-member{margin:18px 0 22px;padding:15px;border:1px solid #ccd2d8;border-radius:8px;background:#f7f8f9}.attendance-print-record .print-member h2{margin:0 0 12px;font-size:20px}.attendance-print-record .print-member>div{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.attendance-print-record .print-member span{display:block}.attendance-print-record .print-member small{display:block;color:#68727d;font-size:9px;font-weight:700;text-transform:uppercase}.attendance-print-record .print-member b{display:block;margin-top:3px;font-size:13px}.attendance-print-record h3{margin:22px 0 7px;font-size:14px}.attendance-print-record h3 em{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:4px;border-radius:10px;background:#f2e3bd;color:#7a5812;font-size:9px;font-style:normal}.attendance-print-record table{width:100%;border-collapse:collapse;page-break-inside:auto}.attendance-print-record thead{display:table-header-group}.attendance-print-record tr{page-break-inside:avoid}.attendance-print-record th,.attendance-print-record td{padding:7px 8px;border:1px solid #d8dde2;text-align:left;vertical-align:top}.attendance-print-record th{background:#f1f3f5;color:#59636e;font-size:9px;text-transform:uppercase}.attendance-print-record .empty{padding:10px;border:1px dashed #cbd1d7;color:#68727d}}

@media(max-width:700px){.attendance-table-wrap{overflow-x:hidden!important}.attendance-scoreboard table{min-width:0!important}}

/* Compact overview metrics with intentional wrapped headings. */
.attendance-overview-summary{grid-template-columns:repeat(4,110px) minmax(0,1fr)}.attendance-overview-summary-title span,.attendance-summary-card span{line-height:1.25;white-space:normal}@media(max-width:800px){.attendance-overview-summary-title,.attendance-summary-card,.attendance-summary-card.warning{flex-basis:108px}.attendance-summary-latest{flex-basis:240px}}

.attendance-overview-summary{grid-template-columns:160px repeat(3,110px) minmax(0,260px)}@media(max-width:800px){.attendance-overview-summary-title{flex-basis:160px}}

.attendance-summary-card:not(.attendance-summary-latest)>small{display:none}

@media(max-width:800px){.attendance-overview-summary{margin-top:-3px;padding-top:3px}}

.attendance-tabs button,.attendance-tabs button:hover,.attendance-tabs button:focus,.attendance-tabs button:focus-visible,.attendance-tabs button.active{outline:0!important;filter:none!important;box-shadow:none!important}.attendance-tabs button.active{background:var(--card)!important;color:var(--text)!important}.attendance-activity-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 20px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.attendance-activity-footer button{padding:7px 11px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;font-size:10px;font-weight:800;cursor:pointer}.attendance-activity-footer button[hidden]{display:none}@media(max-width:520px){.attendance-activity-footer{align-items:stretch;flex-direction:column}.attendance-activity-footer button{width:100%}}

/* Readable long logs: alternating rows and pinned identifying columns. */
.attendance-activity-table tbody tr:nth-child(even):not(:hover):not(:focus) td,.attendance-scoreboard tbody tr:nth-child(even):not(:hover):not(:focus) td{background:color-mix(in srgb,var(--bg) 52%,var(--card))}.attendance-activity-table th:first-child,.attendance-activity-table td:first-child{position:sticky;z-index:3;left:0;width:78px;background:var(--card)}.attendance-activity-table th:nth-child(2),.attendance-activity-table td:nth-child(2){position:sticky;z-index:3;left:78px;background:var(--card)}.attendance-activity-table tbody tr:nth-child(even):not(:hover):not(:focus) td:first-child,.attendance-activity-table tbody tr:nth-child(even):not(:hover):not(:focus) td:nth-child(2){background:color-mix(in srgb,var(--bg) 52%,var(--card))}.attendance-activity-table th:first-child,.attendance-activity-table th:nth-child(2){z-index:4;background:var(--card)}

@media(min-width:701px) and (max-width:1040px){.attendance-activity-table-wrap{overflow-x:hidden}.attendance-activity-table{display:block;width:100%;min-width:0}.attendance-activity-table thead{display:none}.attendance-activity-table tbody{display:block;width:100%}.attendance-activity-table tbody tr{display:block;margin:10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);overflow:hidden}.attendance-activity-table td{box-sizing:border-box;position:static!important;display:grid!important;grid-template-columns:110px minmax(0,1fr);align-items:start;gap:10px;width:100%!important;min-width:0!important;padding:9px 11px!important;border-bottom:1px solid var(--line)!important;background:transparent!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere}.attendance-activity-table td:last-child{border-bottom:0!important}.attendance-activity-table td::before{color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.attendance-activity-table td:nth-child(1)::before{content:"Date"}.attendance-activity-table td:nth-child(2)::before{content:"Team member"}.attendance-activity-table td:nth-child(3)::before{content:"Activity"}.attendance-activity-table td:nth-child(4)::before{content:"Points"}.attendance-activity-table td:nth-child(5)::before{content:"Notes"}.attendance-activity-table td:nth-child(6)::before{content:"Recorded by"}.attendance-activity-table td:nth-child(7)::before{content:"Action"}.attendance-excused-table td:nth-child(1)::before{content:"Date"}.attendance-excused-table td:nth-child(2)::before{content:"Team member"}.attendance-excused-table td:nth-child(3)::before{content:"Details"}.attendance-excused-table td:nth-child(4)::before{content:"Reported by"}.attendance-excused-table td:nth-child(5)::before{content:"Attachment"}.attendance-excused-table td:nth-child(6)::before{content:"Action"}.attendance-excused-table td:nth-child(7){display:none!important}.attendance-activity-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--bg) 52%,var(--card))}}

/* Preserve continuous tables on laptops and tablets. */
@media(min-width:701px) and (max-width:1040px){.attendance-activity-table-wrap{overflow-x:auto}.attendance-activity-table{display:table;width:100%;min-width:900px}.attendance-excused-table{min-width:760px}.attendance-activity-table thead{display:table-header-group}.attendance-activity-table tbody{display:table-row-group}.attendance-activity-table tbody tr{display:table-row;margin:0;border:0;border-radius:0;background:transparent;overflow:visible}.attendance-activity-table td{display:table-cell!important;width:auto!important;min-width:0;padding:10px 12px!important;border-bottom:1px solid var(--line)!important;background:var(--card)!important;text-align:left!important;white-space:normal!important}.attendance-activity-table tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--bg) 52%,var(--card))!important}.attendance-activity-table td::before{display:none}.attendance-activity-table th:first-child,.attendance-activity-table td:first-child{position:sticky!important;left:0;width:78px!important;z-index:3}.attendance-activity-table th:nth-child(2),.attendance-activity-table td:nth-child(2){position:sticky!important;left:78px;z-index:3}.attendance-activity-table th:first-child,.attendance-activity-table th:nth-child(2){z-index:4}}

/* Excused absence columns sized by their actual content. */
.attendance-excused-table th:nth-child(1),.attendance-excused-table td:nth-child(1){width:72px!important}.attendance-excused-table th:nth-child(2),.attendance-excused-table td:nth-child(2),.attendance-excused-table th:nth-child(4),.attendance-excused-table td:nth-child(4){width:185px!important}.attendance-excused-table th:nth-child(5),.attendance-excused-table td:nth-child(5){width:62px!important;min-width:62px}.attendance-excused-table th:nth-child(6),.attendance-excused-table td:nth-child(6){width:82px!important}
.attendance-excused-table{table-layout:fixed;min-width:850px}.attendance-excused-table th:nth-child(1),.attendance-excused-table td:nth-child(1){width:72px}.attendance-excused-table th:nth-child(2),.attendance-excused-table td:nth-child(2),.attendance-excused-table th:nth-child(4),.attendance-excused-table td:nth-child(4){width:185px}.attendance-excused-table th:nth-child(5),.attendance-excused-table td:nth-child(5){width:62px;min-width:62px}.attendance-excused-table th:nth-child(6),.attendance-excused-table td:nth-child(6){width:82px}.attendance-excused-table th:nth-child(2),.attendance-excused-table td:nth-child(2),.attendance-excused-table th:nth-child(4),.attendance-excused-table td:nth-child(4){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attendance-excused-table th:nth-child(2),.attendance-excused-table td:nth-child(2){left:72px!important}

/* Activity columns use the same content-based sizing system. */
body .attendance-excused-table th:nth-child(2),body .attendance-excused-table td:nth-child(2),body .attendance-excused-table th:nth-child(4),body .attendance-excused-table td:nth-child(4),body .attendance-activity-table:not(.attendance-excused-table) th:nth-child(2),body .attendance-activity-table:not(.attendance-excused-table) td:nth-child(2),body .attendance-activity-table:not(.attendance-excused-table) th:nth-child(6),body .attendance-activity-table:not(.attendance-excused-table) td:nth-child(6){width:139px!important;overflow:visible!important;text-overflow:clip!important;white-space:normal!important;overflow-wrap:anywhere!important}
.attendance-activity-table:not(.attendance-excused-table){table-layout:fixed;min-width:1000px}.attendance-activity-table:not(.attendance-excused-table) th:nth-child(1),.attendance-activity-table:not(.attendance-excused-table) td:nth-child(1){width:72px!important}.attendance-activity-table:not(.attendance-excused-table) th:nth-child(2),.attendance-activity-table:not(.attendance-excused-table) td:nth-child(2),.attendance-activity-table:not(.attendance-excused-table) th:nth-child(6),.attendance-activity-table:not(.attendance-excused-table) td:nth-child(6){width:185px!important}.attendance-activity-table:not(.attendance-excused-table) th:nth-child(3),.attendance-activity-table:not(.attendance-excused-table) td:nth-child(3){width:230px!important}.attendance-activity-table:not(.attendance-excused-table) th:nth-child(4),.attendance-activity-table:not(.attendance-excused-table) td:nth-child(4){width:68px!important}.attendance-activity-table:not(.attendance-excused-table) th:nth-child(7),.attendance-activity-table:not(.attendance-excused-table) td:nth-child(7){width:82px!important}.attendance-activity-table:not(.attendance-excused-table) th:nth-child(2),.attendance-activity-table:not(.attendance-excused-table) td:nth-child(2),.attendance-activity-table:not(.attendance-excused-table) th:nth-child(6),.attendance-activity-table:not(.attendance-excused-table) td:nth-child(6){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attendance-activity-table:not(.attendance-excused-table) th:nth-child(2),.attendance-activity-table:not(.attendance-excused-table) td:nth-child(2){left:72px!important}

/* Team members are created only from the attendance-event search flow. */
.attendance-app [data-attendance-member]{display:none!important}

/* The overview context already explains this scoreboard; start directly with its rows. */
.attendance-scoreboard>header{display:none!important}

/* Keep every Attendance tab on the same neutral canvas and top-right haze as Overview. */
.attendance-app main>.attendance-record,.attendance-app main>.attendance-discipline{border:0;background:transparent;padding:0}

/* A uniform canvas prevents the active tab position from appearing to change the page tint. */
.tool-workspace-screen[data-tool="attendance-hub"] .attendance-app{background:var(--bg)!important}

/* Discipline workspace: actionable alerts first, vertical policy scale alongside. */
.attendance-discipline>header{grid-area:heading}
.attendance-discipline>.attendance-alert-list{grid-area:alerts;margin-top:0}
.attendance-discipline>.attendance-thresholds{grid-area:scale;display:grid;grid-template-columns:1fr;gap:8px;margin:0}
.attendance-discipline>.attendance-thresholds span{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:10px;min-height:48px;padding:10px 12px}
.attendance-discipline>.attendance-thresholds b{margin:0;font-size:19px;text-align:center}
.attendance-discipline>.attendance-action-history{grid-area:history;margin-top:4px}
@media(max-width:700px){.attendance-discipline>.attendance-thresholds{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.attendance-discipline>.attendance-thresholds{grid-template-columns:1fr}}

.attendance-alert-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"identity action" "facts action";align-items:center;gap:8px 14px;padding:13px 0!important}
.attendance-alert-identity{grid-area:identity;min-width:0}.attendance-alert-identity strong,.attendance-alert-identity span{display:block}.attendance-alert-identity strong{overflow-wrap:anywhere}.attendance-alert-identity span{margin-top:3px;color:#e8b74f;font-size:10px;font-weight:800}
.attendance-alert-card dl{grid-area:facts;display:flex;gap:22px;margin:0}.attendance-alert-card dl>div{display:grid;gap:2px}.attendance-alert-card dt{color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.attendance-alert-card dd{margin:0;color:var(--text);font-size:11px;font-weight:800}.attendance-alert-card>.attendance-primary{grid-area:action;white-space:nowrap}
@media(max-width:480px){.attendance-alert-card{grid-template-columns:1fr;grid-template-areas:"identity" "facts" "action"}.attendance-alert-card>.attendance-primary{width:100%}}

/* Frozen-chicken bag palette: purposeful color roles, with yellow reserved for caution. */
.attendance-app,.attendance-modal{--at-blue:#4f91d8;--at-coral:#df626c;--at-green:#55ad83;--at-orange:#e89443;--at-purple:#9874cf;--at-yellow:#d9ae45;--at-accent:var(--at-blue)}
.attendance-app .attendance-primary,.attendance-modal .attendance-primary{background:var(--at-blue);color:#07121e}
.attendance-header>div>span,.attendance-app a{color:var(--at-blue)}
.attendance-tabs b{color:var(--at-coral)}
.attendance-overview-summary-title{background:linear-gradient(135deg,color-mix(in srgb,var(--at-blue) 15%,transparent),transparent 72%),var(--card)}
.attendance-overview-summary-title strong{color:var(--at-blue)}
.attendance-summary-card[data-attendance-scroll-points]{border-color:color-mix(in srgb,var(--at-green) 30%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--at-green) 10%,transparent),transparent 75%),var(--card)}
.attendance-summary-card[data-attendance-scroll-points] strong{color:var(--at-green)}
.attendance-summary-card[data-attendance-view="record"]{border-color:color-mix(in srgb,var(--at-orange) 28%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--at-orange) 9%,transparent),transparent 75%),var(--card)}
.attendance-summary-card[data-attendance-view="record"] strong{color:var(--at-orange)}
.attendance-summary-latest{border-color:color-mix(in srgb,var(--at-purple) 28%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--at-purple) 9%,transparent),transparent 75%),var(--card)}
.attendance-summary-latest strong{color:var(--at-purple)}
.attendance-summary-card.warning{border-color:color-mix(in srgb,var(--at-coral) 38%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--at-coral) 11%,transparent),transparent 75%),var(--card)}
.attendance-summary-card.warning strong{color:var(--at-coral)}
.attendance-alert-identity span{color:var(--at-coral)}
.attendance-discipline>.attendance-thresholds span:nth-child(1) b{color:var(--at-yellow)}.attendance-discipline>.attendance-thresholds span:nth-child(2) b{color:var(--at-orange)}.attendance-discipline>.attendance-thresholds span:nth-child(3) b{color:var(--at-coral)}.attendance-discipline>.attendance-thresholds span:nth-child(4) b{color:var(--at-purple)}
.attendance-avatar{background:color-mix(in srgb,var(--avatar-color,var(--at-blue)) 18%,transparent);color:var(--avatar-color,var(--at-blue));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--avatar-color,var(--at-blue)) 28%,transparent)}
.attendance-scoreboard tbody tr:nth-child(5n+1),.attendance-member-grid>*:nth-child(5n+1),.attendance-leader-list>div:nth-child(5n+1){--avatar-color:var(--at-blue)}
.attendance-scoreboard tbody tr:nth-child(5n+2),.attendance-member-grid>*:nth-child(5n+2),.attendance-leader-list>div:nth-child(5n+2){--avatar-color:var(--at-coral)}
.attendance-scoreboard tbody tr:nth-child(5n+3),.attendance-member-grid>*:nth-child(5n+3),.attendance-leader-list>div:nth-child(5n+3){--avatar-color:var(--at-green)}
.attendance-scoreboard tbody tr:nth-child(5n+4),.attendance-member-grid>*:nth-child(5n+4),.attendance-leader-list>div:nth-child(5n+4){--avatar-color:var(--at-orange)}
.attendance-scoreboard tbody tr:nth-child(5n),.attendance-member-grid>*:nth-child(5n),.attendance-leader-list>div:nth-child(5n){--avatar-color:var(--at-purple)}
.attendance-avatar[data-avatar-tone="0"]{--avatar-color:var(--at-blue)}.attendance-avatar[data-avatar-tone="1"]{--avatar-color:var(--at-coral)}.attendance-avatar[data-avatar-tone="2"]{--avatar-color:var(--at-green)}.attendance-avatar[data-avatar-tone="3"]{--avatar-color:var(--at-orange)}.attendance-avatar[data-avatar-tone="4"]{--avatar-color:var(--at-purple)}
.attendance-avatar{box-sizing:border-box;flex:0 0 38px;aspect-ratio:1/1;min-width:38px;min-height:38px;border-radius:50%}
.attendance-leader-list .attendance-avatar{flex-basis:34px;min-width:34px;min-height:34px}
.attendance-activity-actions>.attendance-primary{display:none}
.attendance-member-link{display:inline;padding:0;border:0;background:transparent;color:var(--text);font:inherit;font-weight:800;line-height:inherit;text-align:left;text-decoration:none;cursor:pointer}.attendance-member-link:hover{color:var(--at-blue);text-decoration:underline;text-underline-offset:2px}.attendance-member-link:focus-visible{outline:2px solid color-mix(in srgb,var(--at-blue) 70%,transparent);outline-offset:3px;border-radius:2px}.attendance-alert-identity>.attendance-member-link{display:block;max-width:100%;overflow-wrap:anywhere;font-size:13px}.attendance-activity-table .attendance-member-link{white-space:normal;overflow-wrap:anywhere}
.attendance-leader-needed [data-attendance-configure-leaders]{display:block;width:max-content;margin-top:9px;padding:8px 11px;border:1px solid color-mix(in srgb,var(--at-blue) 55%,var(--line));border-radius:7px;background:color-mix(in srgb,var(--at-blue) 13%,var(--card));color:var(--at-blue);font:inherit;font-size:10px;font-weight:850;cursor:pointer}.attendance-leader-needed [data-attendance-configure-leaders]:hover{background:color-mix(in srgb,var(--at-blue) 20%,var(--card))}.attendance-leader-needed [data-attendance-configure-leaders]:focus-visible{outline:2px solid var(--at-blue);outline-offset:2px}
.attendance-leader-picker{margin-top:16px}.attendance-leader-picker>label{display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}.attendance-leader-picker .modal-input{width:100%}.attendance-leader-results{display:grid;gap:5px;margin-top:7px}.attendance-leader-results>p{margin:0;padding:10px;color:var(--muted);font-size:10px}.attendance-leader-results>button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--text);font:inherit;font-size:11px;text-align:left;cursor:pointer}.attendance-leader-results>button:hover,.attendance-leader-results>button:focus-visible{border-color:color-mix(in srgb,var(--at-blue) 55%,var(--line));background:color-mix(in srgb,var(--at-blue) 9%,var(--bg));outline:none}.attendance-leader-results>button strong{color:var(--at-blue);font-size:9px;text-transform:uppercase}
.attendance-header p{display:none}.attendance-cycle-toggle{display:flex;align-items:center;width:max-content;margin:0 0 8px;padding:3px;border:1px solid var(--line);border-radius:9px;background:var(--card)}.attendance-cycle-toggle button{padding:6px 10px;border:0;border-radius:6px;background:transparent;color:var(--muted);font:inherit;font-size:10px;font-weight:800;text-transform:capitalize;cursor:pointer}.attendance-cycle-toggle button.active{background:color-mix(in srgb,var(--at-blue) 15%,var(--bg));color:var(--at-blue)}
.attendance-dashboard:has([data-attendance-cycle="previous"].active) .attendance-summary-latest{display:none}.attendance-dashboard:has([data-attendance-cycle="previous"].active) .attendance-overview-summary{grid-template-columns:160px repeat(3,110px)}

/* Keep primary app workspaces readable on wide displays. */
body[data-layout="default"] #weather-row,
body[data-layout="default"] #app{box-sizing:border-box;width:min(1180px,100%);margin-right:auto;margin-left:auto}
.training-app{box-sizing:border-box;width:min(1180px,100%);margin-right:auto;margin-left:auto}
.team-hub-app{box-sizing:border-box;width:min(1180px,100%);margin-right:auto;margin-left:auto}
@media(min-width:900px){.team-hub-app .team-live-preview{right:max(28px,calc((100vw - 1180px)/2 + 28px))}}

/* Attendance Hub: custom threshold colors, condensed alerts, signature settings (2026-08-11) */
.attendance-level{background:color-mix(in srgb,var(--tc,var(--muted)) 20%,transparent);color:var(--tc,var(--muted))}

.attendance-scoreboard tbody tr:nth-of-type(even):not(:hover):not(:focus){background:color-mix(in srgb,var(--card) 90%,black)}

.attendance-alert-card{display:flex!important;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:9px 12px!important;border-radius:8px;background:var(--card);margin-bottom:2px}
.attendance-alert-card:nth-of-type(even){background:color-mix(in srgb,var(--card) 90%,black)}
.attendance-alert-card .attendance-alert-identity{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:160px}
.attendance-alert-card .attendance-alert-level{padding:3px 7px;border-radius:5px;background:color-mix(in srgb,var(--tc,var(--muted)) 22%,transparent);color:var(--tc,var(--muted));font-size:10px;font-weight:800;white-space:nowrap}
.attendance-alert-card .attendance-alert-fact{color:var(--muted);font-size:11px;font-weight:700;white-space:nowrap}
.attendance-alert-card>.attendance-primary{white-space:nowrap;margin-left:auto}
@media(max-width:640px){.attendance-alert-card>.attendance-primary{width:100%;margin-left:0}}

.attendance-policy-row{grid-template-columns:minmax(0,1fr) 56px 24px 26px!important;gap:6px!important}
.attendance-policy-row-color{grid-template-columns:34px minmax(0,1fr) 56px 24px 26px!important}
.attendance-policy-row-color input[type=color]{width:34px;height:30px;padding:2px;border:1px solid var(--line);border-radius:6px;background:transparent;cursor:pointer}
@media(max-width:520px){
  .attendance-policy-row{grid-template-columns:minmax(0,1fr) 50px 26px!important}
  .attendance-policy-row-color{grid-template-columns:28px minmax(0,1fr) 50px 26px!important}
  .attendance-policy-row-color input[type=color]{width:28px;height:26px}
}

.attendance-action-level{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--tc,var(--line));border-left-width:4px;border-radius:8px;background:color-mix(in srgb,var(--tc,var(--line)) 8%,transparent)}
.attendance-action-level span{color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.attendance-action-level strong{font-size:16px}
.attendance-action-level small{color:var(--muted);font-size:11px}

.attendance-signature-options{display:grid;gap:10px;margin-top:16px}
.attendance-signature-option{position:relative;display:grid;gap:5px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--text);font:inherit;text-align:left;cursor:pointer;overflow:hidden}
.attendance-signature-option strong{font-size:13px}
.attendance-signature-option span{color:var(--muted);font-size:11px}
.attendance-signature-option.active{border-color:#e4a72b;background:color-mix(in srgb,var(--card) 88%,#e4a72b)}
.attendance-signature-option.coming-soon{cursor:not-allowed;opacity:.7}
.attendance-signature-option:disabled{cursor:not-allowed}
.attendance-settings-grid label[hidden]{display:none!important}

/* Attendance Hub: discipline/completed tables, settings section backgrounds (2026-08-11) */
/* iPadOS/touch: dragging a finger over any text reads to WebKit as a
   text-selection drag rather than a scroll gesture, painting distracting
   highlight bands mid-scroll. Text selection by drag isn't a real interaction
   on a touch kiosk, so disable it suite-wide for coarse-pointer/no-hover
   (touch) input — desktop mouse users are unaffected. Actual text-entry
   fields stay selectable/editable, including Quill's contenteditable area. */
@media (hover: none) and (pointer: coarse) {
  body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  input, textarea, [contenteditable="true"], .ql-editor {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
  }
}
.attendance-hub-table{width:100%;border-collapse:collapse}
.attendance-hub-table th{padding:10px 20px;border-bottom:1px solid var(--line);color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.07em;text-align:left;text-transform:uppercase}
.attendance-hub-table td{padding:11px 20px;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);font-size:12px;vertical-align:middle}
.attendance-hub-table tbody tr:last-child td{border-bottom:0}
.attendance-hub-table tbody tr:nth-of-type(even){background:color-mix(in srgb,var(--card) 90%,black)}
.attendance-hub-table .attendance-member-link{background:transparent;border:0;color:var(--text);font:inherit;font-weight:800;cursor:pointer;padding:0}
.attendance-hub-table-actions{display:flex;gap:8px;justify-content:flex-end}
.attendance-hub-table th:last-child,.attendance-hub-table td:last-child{text-align:right}

.attendance-policy-section{margin:0;padding:14px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--card) 96%,white)}
.attendance-settings-grid-stacked{grid-template-columns:1fr!important}
.attendance-settings fieldset{background:color-mix(in srgb,var(--card) 96%,white)}
:root[data-theme="light"] .attendance-policy-section,:root[data-theme="light"] .attendance-settings fieldset{background:color-mix(in srgb,var(--card) 96%,black)}

/* Reserve enough bottom room so the floating Tools/Settings buttons never sit over the last row of content (2026-08-11) */
.attendance-app,.training-app,.team-hub-app,.equipment-app{padding-bottom:150px}

/* Fix: activity/excused-absence table's non-sticky columns had no background on odd rows, so the darker page background showed through and broke the zebra match with the sticky Date/Team member columns (2026-08-12) */
.attendance-activity-table tbody tr:not(:nth-child(even)):not(:hover):not(:focus) td{background:var(--card)}

/* Per-threshold "requires team member signature" toggle in Disciplinary thresholds settings (2026-08-12) */
.attendance-policy-sig-toggle{grid-column:1/-1;display:flex;align-items:center;gap:7px;margin-top:2px;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.attendance-policy-sig-toggle input{width:auto;margin:0;accent-color:var(--at-accent,#e4a72b)}

/* Sleeker primary button variant for compact table row actions (2026-08-12) */
.attendance-primary-compact{padding:7px 11px;font-size:11px;border-radius:7px}

/* Mobile-only Attendance Hub redesign: dense info-first rows on Overview/Activity/Excused Absences, Discipline hidden entirely on phones (2026-08-12) */
.attendance-row-meta{display:none}
@media(max-width:700px){
  /* Override desktop-oriented fixed-width table rules that would otherwise force horizontal scroll/clipping at phone widths */
  .attendance-scoreboard table,.attendance-activity-table:not(.attendance-excused-table),.attendance-excused-table{table-layout:auto!important;min-width:0!important;width:100%!important}
  .attendance-activity-table:not(.attendance-excused-table) tbody tr td,.attendance-excused-table tbody tr td{background:transparent!important}
  /* Overview: one dense row per team member instead of a stacked label/value card */
  .attendance-scoreboard tbody tr{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:11px 8px!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:transparent!important}
  .attendance-scoreboard tbody tr td{background:transparent!important}
  .attendance-scoreboard tbody tr:nth-child(even){background:color-mix(in srgb,var(--card) 65%,black)!important}
  .attendance-scoreboard td{display:block!important;grid-template-columns:none!important;width:auto!important;min-width:0!important;padding:0!important;border:0!important}
  .attendance-scoreboard td:nth-child(n)::before{content:none!important}
  .attendance-scoreboard td:first-child{order:1;flex:1;min-width:0}
  .attendance-scoreboard td:first-child .attendance-scoreboard-member strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
  .attendance-scoreboard td:nth-child(2){order:2;text-align:right;white-space:nowrap}
  .attendance-scoreboard td:nth-child(2) b{font-size:15px}
  .attendance-scoreboard td:nth-child(3){order:3;max-width:100px;text-align:right}
  .attendance-scoreboard td:nth-child(3) .attendance-level{display:inline-block;max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
  .attendance-scoreboard td:nth-child(4),.attendance-scoreboard td:nth-child(5){display:none!important}

  /* Activity: dense card per entry, name+points on one line. Flexbox (not grid) — table-cell-origin elements don't reliably stretch to fill a grid track. */
  .attendance-activity-table:not(.attendance-excused-table) tbody tr{position:relative!important;display:flex!important;flex-direction:column!important;gap:3px;margin:8px 10px!important;padding:12px 80px 12px 14px!important;border:1px solid var(--line)!important;border-radius:10px!important;background:var(--bg)!important}
  .attendance-activity-table:not(.attendance-excused-table) tbody tr:nth-child(even){background:var(--bg)!important}
  .attendance-activity-table:not(.attendance-excused-table) td{display:block!important;grid-template-columns:none!important;width:100%!important;min-width:0!important;padding:0!important;border:0!important;box-sizing:border-box!important}
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(n)::before{content:none!important}
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(1){display:none!important}
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(2){order:1}
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(2) .attendance-member-link{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:800;font-size:16px;text-align:left}
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(3){order:2;font-size:14px;color:var(--muted)}
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(4){position:absolute!important;top:12px;right:14px;width:64px!important;text-align:center;font-weight:850;font-size:18px;white-space:nowrap}
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(5){order:4;font-size:11px;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(5):empty{display:none!important}
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(6){display:none!important}
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(7){position:absolute!important;top:40px;right:14px;width:64px!important;text-align:center}
  .attendance-activity-table:not(.attendance-excused-table) td:nth-child(7) .attendance-delete-pill{width:100%;min-width:0}
  .attendance-activity-table:not(.attendance-excused-table) td.attendance-row-meta{display:block!important;order:3;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:750}

  /* Excused absences: same dense card treatment */
  .attendance-excused-table tbody tr{display:flex!important;flex-direction:column!important;gap:3px;margin:8px 10px!important;padding:12px 14px!important;border:1px solid var(--line)!important;border-radius:10px!important;background:var(--bg)!important}
  .attendance-excused-table tbody tr:nth-child(even){background:var(--bg)!important}
  .attendance-excused-table td{display:block!important;grid-template-columns:none!important;width:100%!important;min-width:0!important;padding:0!important;border:0!important;box-sizing:border-box!important}
  .attendance-excused-table td:nth-child(n)::before{content:none!important}
  .attendance-excused-table td:nth-child(1){display:none!important}
  .attendance-excused-table td:nth-child(2){order:1}
  .attendance-excused-table td:nth-child(2) .attendance-member-link{display:block;text-align:left;font-weight:800;font-size:16px}
  .attendance-excused-table td:nth-child(3){order:2;font-size:14px;color:var(--muted);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
  .attendance-excused-table td:nth-child(4){display:none!important}
  .attendance-excused-table td:nth-child(5){order:4;font-size:11px}
  .attendance-excused-table td:nth-child(6){order:5;width:auto!important;align-self:flex-end!important;margin-top:2px}
  .attendance-excused-table td.attendance-row-meta{display:block!important;order:3;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:750}

  /* Discipline isn't a mobile task: hide the tab and its content entirely on phones */
  .attendance-tabs [data-attendance-view="discipline"]{display:none!important}
  .attendance-discipline{display:none!important}
  .attendance-summary-card.warning{display:none!important}

  /* Override old desktop fixed-column-width rules (higher specificity via "body" prefix) that were still pinning the name cell to 139px and breaking left alignment */
  body .attendance-activity-table:not(.attendance-excused-table) td:nth-child(2),body .attendance-excused-table td:nth-child(2){width:100%!important;left:auto!important;position:static!important}
}

/* Whole-record click: Activity, Excused Absences, and Discipline rows open the team member's record from anywhere in the row, not just the name (2026-08-12) */
.attendance-activity-table tbody tr[data-attendance-detail],.attendance-hub-table tbody tr[data-attendance-detail]{cursor:pointer}
@media(hover:hover){.attendance-activity-table tbody tr[data-attendance-detail]:hover,.attendance-hub-table tbody tr[data-attendance-detail]:hover{background:color-mix(in srgb,var(--card) 88%,#e4a72b)}}

/* Quick visual fixes batch (2026-08-12) */
.attendance-tabs{margin-top:14px!important;margin-bottom:14px!important}
.attendance-alert-list .attendance-alert-list .attendance-hub-table th:nth-child(3),.attendance-alert-list .attendance-hub-table td:nth-child(3){max-width:80px;white-space:normal;line-height:1.3}
.attendance-discipline-top{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-top:16px}
.attendance-discipline-top .attendance-alert-list{flex:1 1 420px;min-width:0;margin-top:0}
.attendance-thresholds-panel{flex:0 1 280px;min-width:240px;margin-top:16px;padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.attendance-thresholds-panel h3{margin:0 0 12px;font-size:13px}
.attendance-thresholds-panel .attendance-thresholds{grid-template-columns:repeat(2,1fr)}
.attendance-thresholds span{border-color:var(--tc,var(--line))}
.attendance-thresholds b{color:var(--tc,var(--at-accent))}
@media(max-width:900px){.attendance-thresholds-panel{flex-basis:100%}}
@media(max-width:520px){.attendance-thresholds-panel .attendance-thresholds{grid-template-columns:1fr}}

/* The sticky Date/Team member columns paint their own opaque background on every row (needed so scrolled content doesn't show through), which was masking row hover on those two cells. Match the hover tint there explicitly. (2026-08-12) */
.attendance-activity-table tbody tr:focus td:first-child,.attendance-activity-table tbody tr:focus td:nth-child(2){background:color-mix(in srgb,var(--card) 88%,#e4a72b)!important}@media(hover:hover){.attendance-activity-table tbody tr:hover td:first-child,.attendance-activity-table tbody tr:hover td:nth-child(2){background:color-mix(in srgb,var(--card) 88%,#e4a72b)!important}}

/* Days-since-threshold-crossed color coding on the Pending Actions table (2026-08-12) */
.attendance-days-green b{color:#63c99e}
.attendance-days-yellow b{color:#e4a72b}
.attendance-days-red b{color:#ed6b62}

/* "Mark signed" was relying on a barely-visible var(--line) border that blended into the row, unlike the bold blue Reprint/View button beside it (2026-08-12) */
.attendance-hub-table-actions [data-attendance-sign]{padding:7px 11px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--text);font:inherit;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}
@media(hover:hover){.attendance-hub-table-actions [data-attendance-sign]:hover{border-color:color-mix(in srgb,var(--at-accent,#e4a72b) 60%,var(--line));color:var(--at-accent,#e4a72b)}}
/* When the whole row is hovered, the button's own var(--line) border reads as a stray seam against the row's orange tint — blend it in instead (2026-08-12) */
.attendance-hub-table tbody tr:focus [data-attendance-sign]{border-color:color-mix(in srgb,#e4a72b 45%,var(--line))}@media(hover:hover){.attendance-hub-table tbody tr:hover [data-attendance-sign]{border-color:color-mix(in srgb,#e4a72b 45%,var(--line))}}

/* Prep Hub (2026-08-12) — full-bleed kiosk layout, top 2/3 sliding card queue, bottom 1/3 button grid */
.tool-workspace-screen[data-tool="prep-hub"] .tool-workspace-header{display:none}
/* No explicit height here — the base/admin-preview/demo-mode rules already size this via inset (top+bottom); forcing height:100dvh on top of that fights the demo-mode banner's inset:56px offset and pushes the bottom off-screen. */
.tool-workspace-screen[data-tool="prep-hub"]{grid-template-rows:minmax(0,1fr);min-height:0;overflow:hidden}
.tool-workspace-screen[data-tool="prep-hub"] .tool-workspace-canvas{position:absolute;inset:0;overflow:hidden;padding:0;background:#000}
/* The queue always renders at a fixed vertical-iPad size and is scaled (letterboxed) to fit whatever screen it's on — JS in prep-hub.js sets the transform. */
.prep-hub-stage{position:absolute;top:50%;left:50%;width:820px;height:1180px;transform-origin:center center;box-shadow:0 0 60px rgba(0,0,0,.55)}
/* iPad Pro (2021) shell adapted from picturepan2/devices.css (MIT).
   Its 560x778 frame and 506x724 screen opening are scaled 1.648x so the
   source's bezel, corner, camera, and button proportions remain intact. */
.prep-hub-stage.is-ipad-framed{box-sizing:content-box;padding:45px;border-radius:59px;background:#0d0d0d;box-shadow:0 24px 70px rgba(0,0,0,.62),inset 0 0 0 2px #6b7073,inset 0 0 2px 5px #83878a}
.prep-hub-stage.is-ipad-framed .prep-hub-app{box-sizing:border-box;overflow:hidden;border:3px solid #121212;border-radius:18px}
.prep-ipad-buttons,.prep-ipad-sensors{display:none}
.prep-hub-stage.is-ipad-framed .prep-ipad-buttons,.prep-hub-stage.is-ipad-framed .prep-ipad-sensors{position:absolute;z-index:2;display:block;inset:0;pointer-events:none}
.prep-hub-stage.is-ipad-framed .prep-ipad-buttons:after,.prep-hub-stage.is-ipad-framed .prep-ipad-buttons:before{content:"";position:absolute;background:#696d70}
.prep-hub-stage.is-ipad-framed .prep-ipad-buttons:after{top:-3px;right:96px;width:59px;height:3px}
.prep-hub-stage.is-ipad-framed .prep-ipad-buttons:before{top:-3px;left:96px;width:30px;height:3px;box-shadow:44px 0 #696d70}
.prep-hub-stage.is-ipad-framed .prep-ipad-sensors:after,.prep-hub-stage.is-ipad-framed .prep-ipad-sensors:before{content:"";position:absolute;border-radius:50%}
.prep-hub-stage.is-ipad-framed .prep-ipad-sensors:after{top:400px;left:875px;width:24px;height:24px;background:#1a1a1a}
.prep-hub-stage.is-ipad-framed .prep-ipad-sensors:before{z-index:1;top:406px;left:881px;width:12px;height:12px;background:radial-gradient(farthest-corner at 25% 25%,#6074bf 0,transparent 40%),radial-gradient(farthest-corner at 80% 80%,#513785 0,#24555e 20%,transparent 50%);box-shadow:0 0 2px 1px rgba(255,255,255,.05)}
.prep-ipad-statusbar{display:none}
.prep-hub-stage.is-ipad-framed .prep-ipad-statusbar{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;position:relative;z-index:15;height:24px;padding:0 18px;background:#000;color:#fff;font-size:11px;font-weight:650;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.prep-ipad-statusbar .prep-ipad-dots{position:absolute;left:50%;translate:-50% 0;display:flex;gap:2.5px}
.prep-ipad-statusbar .prep-ipad-dots i{width:3px;height:3px;border-radius:50%;background:#fff}
.prep-ipad-statusbar .prep-ipad-status-icons{display:flex;align-items:center;gap:4px}
.prep-ipad-statusbar svg{display:block}
.prep-ipad-battery{position:relative;box-sizing:border-box;width:20px;height:10px;border:1.1px solid #fff;border-radius:2.5px;padding:1.1px}
.prep-ipad-battery:after{content:"";position:absolute;top:2.4px;right:-2.6px;width:1.4px;height:3.6px;border-radius:0 1.2px 1.2px 0;background:#fff}
.prep-ipad-battery i{display:block;height:100%;border-radius:.8px;background:#fff}
.prep-ipad-home-indicator{display:none}
.prep-hub-stage.is-ipad-framed .prep-ipad-home-indicator{position:absolute;z-index:20;left:0;right:0;bottom:-10px;display:flex;align-items:center;justify-content:center;height:50px;background:#000;pointer-events:none}
.prep-hub-stage.is-ipad-framed .prep-ipad-home-indicator::after{content:"";width:150px;height:5px;border-radius:999px;background:rgba(255,255,255,.82);box-shadow:0 1px 3px rgba(0,0,0,.5)}
.prep-hub-stage.is-combining .prep-hub-icon-btn,.prep-hub-stage.is-combining .prep-hub-buttons-wrap{pointer-events:none}
.prep-bump-buffered{position:absolute;z-index:35;top:92px;left:50%;padding:8px 14px;translate:-50% -8px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(18,20,23,.92);color:#fff;font-size:13px;font-weight:850;letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity .18s ease,translate .18s ease}
.prep-hub-stage.is-bump-buffered .prep-bump-buffered{opacity:1;translate:-50% 0;animation:prep-buffer-pulse .36s ease-out}
@keyframes prep-buffer-pulse{0%{scale:.92}65%{scale:1.05}100%{scale:1}}
/* user-select/touch-callout are disabled app-wide so dragging a finger across an item name to swipe-delete doesn't get hijacked by native text selection or the iOS magnifier callout */
.prep-hub-app{position:relative;display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:none;background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.prep-hub-topbar{display:grid;grid-template-columns:1fr auto 1fr;flex:0 0 auto;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line);background:var(--card)}
.prep-hub-topbar h1{margin:0;font-size:28px;font-weight:850;letter-spacing:-.015em}
.prep-hub-icon-btn{display:grid;place-items:center;width:56px;height:56px;border:1px solid var(--line);border-radius:13px;background:var(--bg);color:var(--text);font-size:26px;line-height:1;cursor:pointer;transition:transform .18s ease,border-color .18s ease,background-color .18s ease}
.prep-hub-settings-btn svg{display:block;width:29px;height:29px;fill:currentColor;stroke:none}
.prep-hub-topbar .prep-hub-icon-btn:last-child{justify-self:end}
.prep-hub-tools-btn{display:flex;justify-self:start;width:auto;min-width:0;padding:0 10px;gap:7px;font-size:14px;font-weight:800}
.prep-hub-tools-btn .tools-home-icon{grid-template-columns:repeat(3,4px);grid-template-rows:repeat(3,4px);gap:2px}
/* Home-screen iPhones render beneath the notch/status area. Prep Hub's canvas is
   834 logical pixels wide and scaled to the phone, so 96 logical pixels becomes
   roughly 44-48 physical pixels: the correct iPhone safe-area reservation. */
@media(max-width:600px){html.installed-web-app body:not(.demo-mode):not(.admin-preview-active) .prep-hub-topbar{padding-top:111px}}

/* In an installed iPhone app, fixed suite banners live below the hardware safe
   area. Their corresponding pages and modals start below safe-area + banner,
   so the notch is counted exactly once. */
@media(max-width:600px){
  html.installed-web-app .demo-mode-banner{top:env(safe-area-inset-top);bottom:auto}
  html.installed-web-app body.demo-mode{padding-top:calc(36px + env(safe-area-inset-top))}
  html.installed-web-app body.demo-mode .tool-launcher-screen,
  html.installed-web-app body.demo-mode .tool-workspace-screen,
  html.installed-web-app body.demo-mode #settings-modal,
  html.installed-web-app body.demo-mode #roster-modal{inset:calc(36px + env(safe-area-inset-top)) 0 0}
  html.installed-web-app .admin-preview-banner{top:env(safe-area-inset-top);bottom:auto}
  html.installed-web-app body.admin-preview-active{padding-top:calc(48px + env(safe-area-inset-top))}
  html.installed-web-app body.admin-preview-active .tool-workspace-screen,
  html.installed-web-app body.admin-preview-active .tool-launcher-screen,
  html.installed-web-app body.admin-preview-active #settings-modal,
  html.installed-web-app body.admin-preview-active #roster-modal{inset:calc(48px + env(safe-area-inset-top)) 0 0}
  html.installed-web-app body.admin-preview-active .tool-workspace-screen{min-height:calc(100dvh - 48px - env(safe-area-inset-top))}

  /* iOS/iPadOS installed-app note: the large-viewport unit only reaches the
     true physical screen bottom WHILE a scroll/drag gesture is active — it's
     a live state (like Safari's address-bar hide/show), not a one-time
     measurement, and reverts the instant the gesture ends. Sizing anything
     interactive to it is unsafe: a bottom-anchored element sized that way
     only renders mid-gesture and disappears at rest. The workspace stays on
     fixed insets (its native, always-painted height) with no manufactured
     filler below it — don't reintroduce viewport-unit sizing here. */
  html.installed-web-app .prep-hub-buttons{padding-bottom:calc(36px + env(safe-area-inset-bottom))}
}
.prep-hub-icon-btn:hover{transform:translateY(-2px);border-color:color-mix(in srgb,#5865f2 55%,var(--line));background:color-mix(in srgb,var(--bg) 88%,#5865f2)}
.prep-hub-icon-btn:active{transform:translateY(0) scale(.96)}
.prep-hub-queue{flex:1 1 0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:16px 16px 98px}
.prep-hub-stage.is-ipad-framed .prep-hub-queue{padding-bottom:138px}
.prep-modal-wrap,.prep-modal{touch-action:pan-y}
/* flex:0 0 auto keeps cards at their natural size instead of shrinking to fit — the queue scrolls instead of squeezing cards together */
.prep-hub-card-wrap{position:relative;flex:0 0 auto;border-radius:16px;touch-action:pan-y;will-change:transform,opacity}
.prep-hub-card-wrap:not(.is-active){width:80%;align-self:center}
.prep-hub-card-wrap.is-active + .prep-hub-card-wrap{width:90%}
.prep-hub-card-wrap.is-active{cursor:pointer}
.prep-hub-card-wrap.is-oven::after{content:"";position:absolute;z-index:4;inset:1px;border:4.5px solid transparent;border-radius:15px;background:linear-gradient(110deg,#ff3b30,#ffcc00,#34c759,#00c7ff,#5856d6,#ff2d92,#ff3b30) border-box;background-size:260% 100%;-webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:prep-oven-border 2.1s linear infinite;filter:drop-shadow(0 0 5px rgba(255,90,210,.85))}
@keyframes prep-oven-border{0%{background-position:0 50%;filter:drop-shadow(0 0 3px rgba(255,70,70,.65))}50%{background-position:100% 50%;filter:drop-shadow(0 0 8px rgba(60,210,255,.95))}100%{background-position:0 50%;filter:drop-shadow(0 0 3px rgba(255,70,70,.65))}}
.prep-hub-card-wrap.is-active:focus-visible{outline:3px solid #fff;outline-offset:3px}
.prep-hub-card{position:relative;z-index:1;border-radius:16px;padding:18px 20px;color:#fff;background:linear-gradient(135deg,var(--card-color),color-mix(in srgb,var(--card-color) 65%,#000));box-shadow:0 6px 20px rgba(0,0,0,.25);transition:transform .18s cubic-bezier(.22,1,.36,1),box-shadow .18s cubic-bezier(.22,1,.36,1)}
/* Light default colors (parfaits white, light purple/green/tan) get dark text instead of white-on-white — js computes luminance and adds this class */
.prep-hub-card.is-light{color:#17120a}
.prep-hub-card-wrap.is-holding .prep-hub-card{transform:scale(1.045);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.prep-hub-card.is-active{display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:center;gap:12px;padding:26px 20px;box-shadow:0 12px 34px rgba(0,0,0,.35)}
.prep-hub-card-wrap.has-no-batch .prep-hub-card.is-active{grid-template-columns:minmax(0,1fr) auto}
.prep-hub-card-wrap.has-no-batch .prep-hub-card.is-active .prep-hub-card-row.is-combined{grid-template-columns:78px 28px 104px}
.prep-hub-card-name{margin:0;font-size:29px;font-weight:850;line-height:1.12}
.prep-hub-card.is-active .prep-hub-card-name{font-size:36px}
.prep-hub-card-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;gap:12px;margin-top:16px}
.prep-hub-card.is-active .prep-hub-card-row{grid-auto-flow:row;justify-content:stretch;margin-top:0}
.prep-hub-card-row.is-single{grid-template-columns:104px;gap:7px}
.prep-hub-card-row.is-combined{grid-template-columns:78px 14px 78px 28px 104px;gap:7px}
.prep-hub-card-spacer{min-width:0}
.prep-hub-card-multiply{display:grid;place-items:center;align-self:center;color:color-mix(in srgb,currentColor 72%,transparent);font-size:22px;font-weight:900}
.prep-hub-card-stat{padding:10px 14px;border-radius:11px;background:rgba(0,0,0,.2);text-align:center}
.prep-hub-card.is-light .prep-hub-card-stat{background:rgba(0,0,0,.1)}
.prep-hub-card .prep-hub-card-stat.is-total{background:#fff;color:#17120a;box-shadow:0 5px 16px rgba(0,0,0,.2)}
.prep-hub-card.is-light .prep-hub-card-stat.is-total{background:#17120a;color:#fff}
.prep-hub-card-stat span{display:block;color:color-mix(in srgb,currentColor 75%,transparent);font-size:12px;font-weight:800;line-height:1;text-transform:uppercase;letter-spacing:.06em}
.prep-hub-card.is-active .prep-hub-card-stat span{font-size:10px}
.prep-hub-card.is-active .prep-hub-card-stat.is-compact-metric,.prep-hub-card-row-compact .prep-hub-card-stat{align-self:center;box-sizing:border-box;width:78px;min-width:78px;height:69px;padding:8px 10px}
.prep-hub-card-row-compact .prep-hub-card-stat span{font-size:10px}
.prep-hub-card-row-compact .prep-hub-card-stat b{font-size:27px}
.prep-hub-card.is-active .prep-hub-card-stat.is-timer{display:flex;align-items:center;justify-content:center;box-sizing:border-box;height:73px}
.prep-hub-card.is-active .prep-hub-card-stat.is-timer b{display:inline-block;margin:0}
.prep-hub-card-stat b{display:block;margin-top:1px;font-size:24px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.prep-hub-card-stat:not(.is-timer){display:flex;flex-direction:column;align-items:center;justify-content:center}
.prep-hub-card.is-active .prep-hub-card-stat b{font-size:30px}
.prep-hub-card-stat-btn{border:0;border-radius:11px;background:#fff;color:#111;font:inherit;font-size:18px;font-weight:850;cursor:pointer}
/* Non-active cards: name on the left, kanban/quantity stats on the right, no timer/prepped */
.prep-hub-card-inline{display:flex;align-items:center;justify-content:space-between;gap:14px}
.prep-hub-card-inline .prep-hub-card-name{flex:1;min-width:0}
.prep-hub-card:not(.is-active) .prep-hub-card-name{padding-left:8px}
.prep-hub-card-row-compact{flex:none;grid-auto-columns:min-content;margin-top:0}
.prep-hub-card-row-compact .prep-hub-card-stat{text-align:center}
.prep-hub-empty{max-width:760px;margin:auto;padding:40px;color:var(--muted);text-align:center}
.prep-hub-empty h3{margin:0 0 12px;color:var(--text);font-size:38px;line-height:1.12;letter-spacing:-.02em}
.prep-hub-empty p{margin:0;font-size:24px;line-height:1.35;white-space:nowrap}
.prep-hub-buttons-wrap{position:absolute;z-index:10;right:0;bottom:0;left:0;overflow:hidden;display:flex;flex-direction:column;border-top:1px solid var(--line);background:var(--card);transform:translateY(var(--add-panel-travel,377px));will-change:transform;box-shadow:0 -12px 30px rgba(0,0,0,.2)}
.prep-hub-stage.is-ipad-framed .prep-hub-buttons-wrap{bottom:40px}
.prep-hub-buttons-wrap.is-open{transform:translateY(0)}
.prep-hub-buttons-wrap:not(.is-open) .prep-hub-buttons{pointer-events:none}
.prep-hub-buttons-title{flex:0 0 83px;width:100%;margin:0;padding:25px 0;border:0;background:transparent;color:var(--muted);font:inherit;font-size:26px;font-weight:850;line-height:33px;text-align:center;text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.prep-hub-buttons{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;padding:0 12px 36px}
.prep-hub-buttons-grid-prep{min-height:240px}
.prep-hub-buttons-grid-prep:has(~ .prep-hub-oven-divider){min-height:0}
.prep-hub-buttons-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(54px,1fr);gap:8px}
.prep-hub-oven-divider{flex:0 0 auto;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.prep-hub-oven-divider::before,.prep-hub-oven-divider::after{content:"";height:1px;flex:1;background:var(--line)}
.prep-hub-buttons-wrap.is-open .prep-hub-buttons{pointer-events:auto}
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .prep-hub-topbar{padding:18px 20px}
  html.installed-web-app body:not(.demo-mode):not(.admin-preview-active) .prep-hub-topbar{padding-top:calc(18px + env(safe-area-inset-top))}
  .prep-hub-icon-btn{width:64px;height:64px;font-size:29px}
  .prep-hub-settings-btn svg{width:31px;height:31px}
  .prep-hub-tools-btn{width:64px;padding:0;justify-content:center}
  .prep-hub-tools-btn>span:last-child{display:none}
  .prep-hub-tools-btn .tools-home-icon{grid-template-columns:repeat(3,5px);grid-template-rows:repeat(3,5px);gap:2px}
  .prep-hub-tools-btn .tools-home-icon i{width:5px;height:5px}
  .prep-hub-buttons{padding-bottom:10px}
}
.prep-hub-item-btn{position:relative;display:flex;min-height:0;flex-direction:column;align-items:center;justify-content:center;padding:9px 32px;border:2px solid rgba(255,255,255,.85);border-radius:11px;background:var(--btn-color);color:#fff;font:inherit;font-size:22px;font-weight:850;text-align:center;cursor:pointer;transition:transform .18s cubic-bezier(.22,1,.36,1),filter .18s ease,box-shadow .18s ease}
.prep-hub-item-btn{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.prep-hub-item-btn:not(.is-full):hover{z-index:1;transform:translateY(-2px);filter:brightness(1.06);box-shadow:0 7px 16px rgba(0,0,0,.22)}
.prep-hub-item-btn span{width:100%;line-height:1.15}
.prep-hub-item-btn small{position:absolute;top:7px;right:9px;color:rgba(255,255,255,.82);font-size:15px;font-weight:850;line-height:1}
.prep-hub-item-btn.is-light{color:#17120a}
.prep-hub-item-btn.is-light small{color:rgba(0,0,0,.65)}
.prep-hub-item-btn.is-full{border-color:var(--line);background:var(--bg);color:var(--text);opacity:.4;cursor:not-allowed}
.prep-hub-item-btn.is-full small{color:var(--muted)}
.prep-hub-item-btn:not(.is-full):active{transform:translateY(0) scale(.965)}
.prep-hub-toast{position:fixed;z-index:50;right:24px;bottom:24px;padding:11px 14px;border-radius:9px;background:#1d8355;color:#fff;font-size:12px;font-weight:750;box-shadow:0 8px 30px #0004;will-change:transform,opacity}
.prep-hub-toast.error{background:#9f3d39}
.prep-hold-preview{position:absolute;z-index:70;top:50%;left:50%;display:grid;grid-template-columns:minmax(0,auto) auto;align-items:center;gap:7px 12px;min-width:230px;max-width:70%;padding:20px 24px;translate:-50% -50%;border:1px solid color-mix(in srgb,var(--hold-color,#5865f2) 58%,#fff);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--hold-color,#5865f2) 22%,rgba(25,27,31,.96)),rgba(25,27,31,.97));color:#fff;box-shadow:0 22px 65px rgba(0,0,0,.62),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(14px);pointer-events:none;will-change:transform,opacity}
.prep-hold-preview[hidden]{display:none}
.prep-hold-preview strong{overflow:hidden;font-size:24px;font-weight:850;line-height:1.1;text-overflow:ellipsis;white-space:nowrap}
.prep-hold-preview span{color:#8ea1ff;font-size:30px;font-weight:950;line-height:1;font-variant-numeric:tabular-nums}
.prep-hold-preview small{grid-column:1/-1;color:#b5bac1;font-size:11px;font-weight:750;letter-spacing:.035em;text-align:center;text-transform:uppercase}
.prep-modal-wrap{position:absolute;z-index:10000000;inset:0;display:grid;place-items:center;box-sizing:border-box;background:#0009}.prep-hub-sleep-overlay{position:fixed;inset:0;z-index:20000000;background:rgba(5,8,12,.74);backdrop-filter:blur(20px) saturate(120%);-webkit-backdrop-filter:blur(20px) saturate(120%);opacity:0;pointer-events:none;transition:opacity .7s ease;cursor:pointer}.prep-hub-sleep-overlay.is-visible{opacity:1;pointer-events:auto}.prep-hub-sleep-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:16px;color:#fff;text-align:center}.prep-hub-sleep-icon{font-size:100px;line-height:1;filter:drop-shadow(0 8px 24px rgba(0,0,0,.4));animation:prep-sleep-breathe 3.4s ease-in-out infinite}.prep-hub-sleep-content p{margin:0;color:#e8ecf2;font-size:20px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;opacity:.82}@keyframes prep-sleep-breathe{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}@media(prefers-reduced-motion:reduce){.prep-hub-sleep-icon{animation:none}}
.prep-modal{box-sizing:border-box;width:65%;max-width:798px;max-height:calc(100% - 36px);overflow:auto;padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--text);will-change:transform,opacity}
.prep-modal header{display:flex;justify-content:space-between;gap:12px;margin-bottom:16px}
.prep-modal header span{color:#5865f2;font-size:10px;font-weight:850;letter-spacing:.1em}
.prep-modal header h2{margin:3px 0;font-size:20px}
.prep-modal header button{border:0;background:transparent;color:var(--text);font-size:24px;cursor:pointer}
.prep-settings-editor{overflow:visible;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.prep-settings-columns,.prep-settings-row{display:grid;grid-template-columns:minmax(0,1fr) 82px 82px 52px 36px;align-items:center;gap:9px}
.prep-settings-columns.prep-product-columns,.prep-settings-row.prep-product-row{grid-template-columns:minmax(0,1fr) 52px 36px}
.prep-settings-columns.prep-oven-columns,.prep-settings-row.prep-oven-row{grid-template-columns:minmax(110px,1fr) 59px 61px 47px 56px 47px 32px;gap:7px}
.prep-oven-settings>header h3{margin:0;font-size:24px}.prep-oven-settings>header p{margin:7px 0 16px;color:var(--muted);font-size:13px;line-height:1.5}.prep-oven-editor{margin-top:16px;overflow-x:auto}.prep-oven-batch-toggle{display:flex!important;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:10px;font-weight:800}.prep-oven-batch-toggle input{width:18px!important;height:18px!important;accent-color:#5865f2}.prep-oven-batch-value.is-disabled{opacity:.35}.prep-oven-row label:not(.prep-settings-name):not(.prep-oven-batch-toggle) input{text-align:center;padding-inline:5px;font-variant-numeric:tabular-nums}
.prep-oven-autoadd{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:8px;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--line) 75%,transparent)}
.prep-oven-autoadd-toggle{display:flex!important;align-items:center;gap:7px;color:var(--muted);font-size:11px;font-weight:800;cursor:pointer}
.prep-oven-autoadd-toggle input{width:16px!important;height:16px!important;accent-color:#5865f2}
.prep-oven-autoadd select{padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--text);font:inherit;font-size:12px;font-weight:800}
.prep-oven-autoadd select:disabled{opacity:.35}
.prep-settings-columns{padding:11px 12px 8px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.075em;text-transform:uppercase}
.prep-settings-columns span:nth-child(2),.prep-settings-columns span:nth-child(3){text-align:center}
.prep-settings-list{display:grid}
.prep-settings-row{position:relative;padding:9px 12px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent);background:transparent;transition:background-color .16s ease}
.prep-settings-row:hover,.prep-settings-row:focus-within{background:color-mix(in srgb,var(--card) 72%,transparent)}
.prep-settings-row label,.prep-color-field{display:grid;min-width:0}
.prep-field-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.prep-settings-row input{box-sizing:border-box;width:100%;height:44px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font:inherit;font-size:14px;font-weight:750;outline:none;transition:border-color .16s ease,box-shadow .16s ease}
.prep-settings-row input[type="number"]{padding-inline:5px;text-align:center;font-variant-numeric:tabular-nums}
.prep-settings-row input:focus{border-color:#6975ff;box-shadow:0 0 0 3px rgba(88,101,242,.13)}
.prep-danger{display:grid;place-items:center;width:36px;height:44px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:#ed8179;font-size:20px;line-height:1;cursor:pointer;transition:background-color .16s ease,border-color .16s ease}
.prep-danger:hover{border-color:color-mix(in srgb,#c83f49 45%,var(--line));background:rgba(200,63,73,.1)}
.prep-color-field{position:relative}
.prep-color-button{display:grid;place-items:center;width:52px;height:44px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer}
.prep-color-button i{display:block;width:22px;height:22px;border:2px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #0005}
.prep-color-popover{position:absolute;z-index:5;top:calc(100% + 7px);right:0;width:190px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--card);box-shadow:0 12px 30px #0008;will-change:transform,opacity}
.prep-color-popover[hidden]{display:none}
.prep-swatch-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.prep-swatch{width:24px;height:24px;border:2px solid transparent;border-radius:50%;background:var(--swatch);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}
.prep-swatch:hover{transform:scale(1.12)}
.prep-swatch.selected{border-color:#fff;box-shadow:0 0 0 2px var(--swatch)}
@media(max-width:680px){.prep-modal{width:65%}.prep-settings-columns,.prep-settings-row{grid-template-columns:minmax(0,1fr) 66px 66px 44px 34px;gap:6px}.prep-settings-columns{padding-inline:9px}.prep-settings-row{padding:8px 9px}.prep-settings-row input{padding-inline:8px}.prep-color-button{width:44px}.prep-color-popover{right:-40px}}
.prep-settings-add{width:100%;padding:12px;border:0;border-top:1px solid var(--line);border-radius:0 0 11px 11px;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:850;cursor:pointer;transition:background-color .16s ease,color .16s ease}
.prep-settings-add:hover{background:color-mix(in srgb,var(--card) 72%,transparent);color:var(--text)}
.prep-kanban-list{overflow:visible;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.prep-kanban-columns,.prep-kanban-row{display:grid;grid-template-columns:minmax(0,1fr) 86px 86px;align-items:center;gap:11px}
.prep-kanban-columns{position:sticky;z-index:4;top:-28px;padding:10px 14px;border:1px solid var(--line);border-radius:0;background:var(--bg);box-shadow:0 -6px 0 var(--bg),0 5px 12px rgba(0,0,0,.18);color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.055em;line-height:1.08;text-transform:uppercase}
.prep-kanban-columns span:nth-child(n+2){text-align:center}
.prep-kanban-row{padding:10px 14px;border-top:1px solid var(--line)}
.prep-kanban-row:first-child{border-top:0}
.prep-kanban-row>strong{min-width:0;align-self:center;overflow:hidden;font-size:15px;line-height:1.25;text-overflow:ellipsis;white-space:nowrap}
.prep-kanban-row label{display:grid;justify-items:center}
.prep-kanban-row input{box-sizing:border-box;width:100%;height:46px;padding:7px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font:inherit;font-size:16px;font-weight:850;text-align:center;font-variant-numeric:tabular-nums;outline:none}
.prep-kanban-row input:focus{border-color:#6975ff;box-shadow:0 0 0 3px rgba(88,101,242,.13)}
.prep-error{margin:10px 0 0;padding:9px;border-radius:7px;background:#9f3d39;color:#fff;font-size:11px}
.prep-settings-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.prep-settings-actions>div{display:flex;gap:8px}
.prep-settings-actions button{padding:10px 14px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text);font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.prep-settings-actions .prep-hub-primary{border:0;background:#5865f2;color:#fff}
.prep-settings-actions .prep-settings-reset{color:#ed8179}
.prep-settings-actions .prep-settings-reset[data-confirm="true"]{border-color:#c83f49;background:rgba(200,63,73,.12);color:#ff9a93}
.prep-settings-nav button[data-prep-settings-tab="products"]::before{content:"◆"}
.prep-settings-host .prep-modal{width:min(900px,92%);height:min(760px,92%);max-width:none;max-height:none;padding:0;overflow:hidden;border:0;background:transparent}.prep-settings-host .settings-shell{width:100%;height:100%}.prep-settings-nav::before{content:"PREP HUB"}.prep-settings-nav button[data-prep-settings-tab="kanbans"]::before{content:"▦"}.prep-settings-nav button[data-prep-settings-tab="tablet"]::before{content:"▭"}.prep-settings-content{min-width:0;overflow:auto}.prep-settings-content>[hidden]{display:none}.prep-tablet-settings>header h3{margin:0;font-size:24px}.prep-tablet-settings>header p{margin:7px 0 22px;color:var(--muted);font-size:13px;line-height:1.5}.prep-tablet-toggle{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);cursor:pointer}.prep-streak-toggle{margin:-6px 0 0 22px;padding:12px 16px;border-color:transparent;border-left:2px solid var(--line);border-radius:0 8px 8px 0;background:transparent}.prep-streak-toggle[hidden]{display:none}.prep-tablet-toggle strong,.prep-tablet-location strong{display:block;font-size:14px}.prep-tablet-toggle small,.prep-tablet-location small{display:block;margin-top:4px;color:var(--muted);font-size:11px}.prep-tablet-toggle input{position:absolute;opacity:0}.prep-tablet-toggle i{position:relative;flex:0 0 48px;width:48px;height:27px;border-radius:999px;background:#4e5058;transition:background .18s ease}.prep-tablet-toggle i::after{content:"";position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;transition:translate .18s ease}.prep-tablet-toggle input:checked+i{background:#5865f2}.prep-tablet-toggle input:checked+i::after{translate:21px 0}.prep-tablet-location{margin-top:16px;transition:opacity .18s ease}.prep-tablet-location.is-disabled{opacity:.38;pointer-events:none}.prep-tablet-location>p:first-child{margin:0 0 8px;color:var(--muted);font-size:11px;font-weight:850;text-transform:uppercase}.prep-tablet-location>label{display:flex;align-items:center;gap:12px;min-height:60px;margin-top:8px;padding:12px 14px;border:1px solid var(--line);border-radius:9px;background:var(--bg);cursor:pointer}.prep-tablet-location>label:has(input:checked){border-color:#5865f2;background:color-mix(in srgb,var(--bg) 88%,#5865f2)}.prep-tablet-location input{width:20px;height:20px;accent-color:#5865f2}.prep-tablet-safe-note{margin:14px 0 0!important;color:var(--muted);font-size:11px;line-height:1.5}.prep-hub-queue.is-prep-station{padding-bottom:16px}
.prep-hub-stage.is-ipad-framed .prep-hub-queue.is-prep-station{padding-bottom:56px}
.prep-tablet-visibility{margin-top:16px}
.prep-tablet-visibility-columns{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px 44px;gap:8px;padding:0 12px 6px;color:var(--muted);font-size:10px;font-weight:900;text-align:center;text-transform:uppercase;letter-spacing:.05em}
.prep-tablet-visibility-columns span:first-child{text-align:left}
.prep-tablet-visibility-list{display:flex;flex-direction:column;gap:6px}
.prep-tablet-visibility-row{display:grid;grid-template-columns:minmax(0,1fr) 44px 44px 44px;align-items:center;gap:8px;padding:9px 12px;border:2px solid rgba(255,255,255,.85);border-radius:8px;background:var(--btn-color);color:#fff;font-size:13px;font-weight:800}
.prep-tablet-visibility-row.is-light{color:#17120a}
.prep-tablet-visibility-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prep-tablet-visibility-row label{display:flex;align-items:center;justify-content:center;cursor:pointer}
.prep-tablet-visibility-row input[type="checkbox"]{width:20px;height:20px;accent-color:currentColor;cursor:pointer}
.prep-delete-confirm{padding:40px 30px;text-align:center}
.prep-delete-confirm h2{margin:0 0 30px;font-size:34px;font-weight:900}
.prep-delete-confirm-actions{display:flex;flex-direction:column;gap:14px}
.prep-delete-confirm-btn{padding:24px;border:0;border-radius:14px;background:#c83f49;color:#fff;font:inherit;font-size:23px;font-weight:850;cursor:pointer}
.prep-delete-confirm-btn.is-armed{background:#a52833;box-shadow:inset 0 0 0 3px rgba(255,255,255,.5)}
.prep-delete-confirm-btn:active{filter:brightness(.92)}
.prep-delete-cancel-btn{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--bg);color:var(--text);font:inherit;font-size:17px;font-weight:800;cursor:pointer}
@media(prefers-reduced-motion:reduce){.prep-hub-icon-btn,.prep-hub-item-btn,.prep-hub-card,.prep-swatch{transition-duration:.001ms!important}.prep-hub-icon-btn:hover,.prep-hub-item-btn:not(.is-full):hover,.prep-swatch:hover{transform:none!important}}

/* Prep Hub timer alerts and tab-scoped settings controls */
.prep-hub-card-stat.is-timer b{transition:color .28s ease,text-shadow .28s ease}
.prep-settings-divider{margin:22px 0 18px;border:0;border-top:1px solid var(--line)}
/* Caution/warning now read as a pulsing glow around the timer box itself,
   not a text-color change — the digits stay neutral so they stay legible
   at a glance from across the kitchen. */
.prep-hub-card-stat.is-timer{position:relative;overflow:hidden}
.prep-hub-card-stat.is-timer:has(b.is-caution){animation:prep-timer-pulse-caution 1.4s ease-in-out infinite}
.prep-hub-card-stat.is-timer:has(b.is-warning){animation:prep-timer-pulse-warning 1s ease-in-out infinite}
.prep-hub-card-stat.is-timer b{position:relative;z-index:1}
@keyframes prep-timer-pulse-caution{0%,100%{box-shadow:inset 0 0 0 0 rgba(255,212,90,0);background-color:rgba(0,0,0,.2)}50%{box-shadow:inset 0 0 34px 14px rgba(255,212,90,.95);background-color:rgba(255,212,90,.4)}}
@keyframes prep-timer-pulse-warning{0%,100%{box-shadow:inset 0 0 0 0 rgba(255,100,104,0);background-color:rgba(0,0,0,.2)}50%{box-shadow:inset 0 0 38px 16px rgba(255,100,104,1);background-color:rgba(255,100,104,.48)}}
@media(prefers-reduced-motion:reduce){.prep-hub-card-stat.is-timer:has(b.is-caution),.prep-hub-card-stat.is-timer:has(b.is-warning){animation:none}.prep-hub-card-stat.is-timer:has(b.is-caution){box-shadow:inset 0 0 30px 10px rgba(255,212,90,.7);background-color:rgba(255,212,90,.25)}.prep-hub-card-stat.is-timer:has(b.is-warning){box-shadow:inset 0 0 32px 12px rgba(255,100,104,.75);background-color:rgba(255,100,104,.3)}}
.prep-settings-nav button[data-prep-settings-tab="timer-alerts"]::before{content:"◷"}
.prep-timer-settings>header h3{margin:0;font-size:24px}
.prep-timer-settings>header p{margin:7px 0 22px;color:var(--muted);font-size:13px;line-height:1.5}
.prep-timer-thresholds{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;transition:opacity .18s ease}
.prep-timer-thresholds.is-disabled{opacity:.38;pointer-events:none}
.prep-timer-thresholds>label{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.prep-timer-thresholds strong,.prep-timer-thresholds small{display:block}
.prep-timer-thresholds small{margin-top:4px;color:var(--muted);font-size:11px}
.prep-timer-thresholds>label>div{display:flex;align-items:center;gap:7px}
.prep-timer-thresholds input{box-sizing:border-box;width:64px;padding:10px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font:inherit;font-size:17px;font-weight:850;text-align:center}
.prep-timer-thresholds em{color:var(--muted);font-size:10px;font-style:normal;font-weight:750}
.prep-pane-reset{margin-top:18px}
.prep-settings-nav button[data-prep-settings-tab="monday"]::before{content:"M"}
.prep-settings-nav button[data-prep-settings-tab="saturday"]::before{content:"S"}
.prep-monday-settings>header h3,.prep-saturday-settings>header h3{margin:0;font-size:24px}
.prep-monday-settings>header p,.prep-saturday-settings>header p{margin:7px 0 22px;color:var(--muted);font-size:13px;line-height:1.5}
.prep-monday-body,.prep-saturday-body{margin-top:18px;transition:opacity .18s ease}
.prep-monday-body.is-disabled,.prep-saturday-body.is-disabled{opacity:.38;pointer-events:none}
.prep-week-select-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.prep-week-select-row span{font-size:14px;font-weight:750}
.prep-week-select-row select{padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font:inherit;font-size:14px;font-weight:850}
.prep-week-hint{margin:0 0 10px;color:var(--muted);font-size:11px}
.prep-priority-list{display:flex;flex-direction:column;gap:6px}
.prep-priority-card{position:relative;display:flex;align-items:center;gap:6px;min-height:0;width:50%;padding:7px 26px 7px 9px;border:2px solid rgba(255,255,255,.85);border-radius:8px;background:var(--btn-color);color:#fff;font-size:12px;font-weight:800;touch-action:none;-webkit-user-select:none;user-select:none;cursor:grab}
.prep-priority-card.is-light{color:#17120a}
.prep-priority-card.is-dragging{cursor:grabbing;box-shadow:0 8px 18px rgba(0,0,0,.28);z-index:2;position:relative}
.prep-priority-grip{flex:0 0 auto;opacity:.75;font-size:13px;line-height:1}
.prep-priority-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prep-priority-card small{position:absolute;top:6px;right:8px;color:rgba(255,255,255,.82);font-size:10px;font-weight:850;line-height:1}
.prep-priority-card.is-light small{color:rgba(0,0,0,.65)}
.prep-hour-grid{display:flex;flex-direction:column;gap:8px}
.prep-hour-row{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.prep-hour-head{display:flex;align-items:center;justify-content:space-between;gap:14px}
.prep-hour-head strong{font-size:14px}
.prep-hour-head select{padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font:inherit;font-size:13px;font-weight:850}
.prep-hour-readout{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin-top:8px}
.prep-hour-card{display:flex;align-items:center;justify-content:space-between;gap:5px;min-width:0;padding:4px 8px;border:1px solid rgba(255,255,255,.85);border-radius:999px;background:var(--btn-color);color:#fff;font-size:10px;font-weight:800}
.prep-hour-card.is-light{color:#17120a}
.prep-hour-card>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prep-hour-card b{flex:0 0 auto;font-weight:900}
.prep-not-in-rotation{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;padding:8px 16px;border-top:1px solid var(--line);background:var(--card)}
.prep-not-in-rotation{margin-bottom:98px}
.prep-hub-stage.is-ipad-framed .prep-not-in-rotation{margin-bottom:138px}
.prep-not-in-rotation-label{flex:0 0 auto;color:var(--muted);font-size:20px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.prep-hub-flyout-card{position:fixed;z-index:60;padding:10px 18px;border-radius:12px;background:var(--btn-color);color:#fff;font-size:18px;font-weight:850;white-space:nowrap;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.prep-hub-flyout-card.is-light{color:#17120a}
.prep-not-in-rotation-list{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.prep-not-in-rotation-card{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;padding:8px 10px;border-radius:10px;background:var(--btn-color);color:#fff;font-size:20px;font-weight:800;opacity:.7}
.prep-not-in-rotation-card.is-light{color:#17120a}
.prep-not-in-rotation-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prep-not-in-rotation-card b{flex:0 0 auto;font-weight:900}
.prep-settings-editor>.prep-pane-reset{width:100%}
.prep-settings-actions .settings-save[hidden]{display:none}
@media(min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .prep-settings-host .prep-modal{height:72%;max-height:760px}
  .prep-timer-thresholds{grid-template-columns:1fr}
  .prep-settings-columns.prep-oven-columns,.prep-settings-row.prep-oven-row{grid-template-columns:minmax(105px,1fr) 58px 58px 46px 54px 44px 34px}
}

/* Suite-wide settings close button: anchor the SVG to the circle's exact center. */
.settings-header .settings-close{position:relative;display:block;padding:0!important}
.settings-header .settings-close svg{position:absolute;top:50%;left:50%;display:block;margin:0;transform:translate(-50%,-50%)}

/* Prep Hub oven-priority settings and motion. */
.prep-oven-settings>header{display:block}
.prep-oven-type select{box-sizing:border-box;width:100%;height:44px;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text);font:inherit;font-size:12px;font-weight:800;outline:none}.prep-oven-type select:focus{border-color:#6975ff;box-shadow:0 0 0 3px rgba(88,101,242,.13)}
.prep-hub-card-wrap.is-oven .prep-hub-card.is-active{display:block;padding:26px 24px}.prep-hub-oven-card-line{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px}.prep-hub-card-wrap.is-oven:not(.is-active) .prep-hub-oven-card-line{grid-template-columns:minmax(0,1fr) auto}.prep-hub-oven-instruction{justify-self:center;font-size:27px;font-weight:950;line-height:1.05;letter-spacing:.025em;text-align:center;text-transform:uppercase;white-space:nowrap}.prep-hub-card-wrap.is-oven:not(.is-active) .prep-hub-oven-instruction{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:69px;padding:8px 14px;border-radius:11px;background:rgba(0,0,0,.2);font-size:19px}.prep-hub-card-wrap.is-oven:not(.is-active) .prep-hub-card.is-light .prep-hub-oven-instruction{background:rgba(0,0,0,.1)}.prep-hub-card-wrap.is-oven .prep-hub-card-stat.is-timer{justify-self:end;min-width:104px}
.prep-hub-card-wrap.is-oven.is-active .prep-hub-oven-card-line{position:relative;grid-template-columns:auto minmax(0,1fr) auto}.prep-hub-card-wrap.is-oven.is-active .prep-hub-oven-instruction{position:static;left:auto;justify-self:center;box-sizing:border-box;min-height:73px;padding:10px 16px;border-radius:11px;background:rgba(0,0,0,.2);transform:none;display:flex;align-items:center;justify-content:center}.prep-hub-card-wrap.is-oven.is-active .prep-hub-card.is-light .prep-hub-oven-instruction{background:rgba(0,0,0,.1)}
.prep-settings-nav button[data-prep-settings-tab="oven-items"]::before{content:"♨"}
@media(max-width:680px){.prep-settings-columns.prep-oven-columns,.prep-settings-row.prep-oven-row{grid-template-columns:minmax(115px,1fr) 65px 52px 58px 44px 34px}}
@media(max-width:680px){.prep-settings-columns.prep-oven-columns,.prep-settings-row.prep-oven-row{grid-template-columns:minmax(105px,1fr) 58px 58px 46px 54px 44px 34px}.prep-hub-oven-card-line{gap:10px}.prep-hub-oven-instruction{font-size:22px}}
@media(prefers-reduced-motion:reduce){.prep-hub-card-wrap.is-oven::after{animation:none!important}}

/* Shared visual treatment for a hub's own settings-trigger button when the
   signed-in manager lacks that module's Settings permission (see
   window.CFAGateSettingsButton in app.js). Stays visible so the manager
   knows the feature exists, but reads as inert. */
.cfa-settings-locked { opacity: .4; cursor: not-allowed; filter: grayscale(.4); }
.cfa-settings-locked:hover { opacity: .4; }

/* Gamified streak badge — how many cards in a row were bumped before
   hitting their warning threshold. Sits behind the Add to Queue drawer
   (lower z-index) so it’s naturally covered when the drawer opens, and
   only appears once there’s something to celebrate. */
.prep-hub-streak{position:absolute;z-index:5;right:16px;bottom:98px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 26px 14px;border-radius:20px;background:linear-gradient(135deg,#ffb020,#ff5f45);color:#241200;font-weight:900;box-shadow:0 14px 36px rgba(255,120,40,.45),0 0 0 1.5px rgba(255,255,255,.22) inset;animation:prep-streak-glow 2.2s ease-in-out infinite}
.prep-hub-streak-label{font-size:14px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.prep-hub-streak-row{display:flex;align-items:center;gap:8px}
.prep-hub-streak-flame{font-size:34px;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.prep-hub-streak-count{font-size:46px;font-weight:950;line-height:1;font-variant-numeric:tabular-nums}
@keyframes prep-streak-glow{0%,100%{box-shadow:0 10px 26px rgba(255,120,40,.4),0 0 0 1px rgba(255,255,255,.18) inset}50%{box-shadow:0 10px 34px rgba(255,120,40,.7),0 0 0 1px rgba(255,255,255,.28) inset}}
@media(prefers-reduced-motion:reduce){.prep-hub-streak{animation:none}}