:root {
  --text: #102445;
  --text-soft: #42516b;
  --card: rgba(238, 242, 250, .12);
  --card-border: rgba(255,255,255,.62);
  --field: rgba(255,255,255,.004);
  --field-border: rgba(255,255,255,.72);
  --button-a: #0f5cb2;
  --button-b: #167bd1;
  --shadow: 0 24px 80px rgba(15, 31, 57, .18);
  --overlay: linear-gradient(180deg, rgba(24,34,69,.04), rgba(8,26,52,.16));
  --footer: rgba(255,255,255,.92);
}

html[data-theme="dark"] {
  --text: #f7f8ff;
  --text-soft: #d3d7e4;
  --card: rgba(17, 22, 39, .15);
  --card-border: rgba(255,255,255,.23);
  --field: rgba(7,9,18,.004);
  --field-border: rgba(255,255,255,.28);
  --button-a: #365cdd;
  --button-b: #8555dc;
  --shadow: 0 28px 90px rgba(0,0,0,.32);
  --overlay: linear-gradient(180deg, rgba(4,8,26,.18), rgba(3,7,20,.22));
  --footer: rgba(255,255,255,.92);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  width: 100%;
  min-height: 100svh;
  background: #10131c;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  overflow-x: hidden;
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.background, .background-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
}
.background {
  width: 100vw;
  height: 100dvh;
  background-image: url('/assets/vtr24-bg-light.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  transform: none;
  transition: filter .35s ease;
}
html[data-theme="dark"] .background {
  background-image: url('/assets/vtr24-bg-dark.png');
  filter: brightness(.90) saturate(1.02) contrast(1.03);
}

.background-overlay {
  z-index: -1;
  background: var(--overlay);
  transition: background .35s ease;
}

.page-shell {
  width: min(1440px, 100%);
  min-height: 100svh;
  margin: 0 auto;
  padding: 28px 42px 24px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  color: white;
  text-shadow: 0 1px 10px rgba(0,0,0,.28);
}
.mini-nav {
  display: flex;
  gap: 40px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .42em;
}
.theme-toggle {
  border: 0;
  background: transparent;
  color: white;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
}
.switch {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  padding: 3px;
  display: inline-flex;
  align-items: center;
  transition: background .2s ease;
}
.switch-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .25s ease;
}
html[data-theme="dark"] .switch { background: #2387e8; }
html[data-theme="dark"] .switch-dot { transform: translateX(18px); }

.login-layout {
  align-self: center;
  justify-self: center;
  width: min(620px, 100%);
  padding: 24px 0 34px;
}
.brand {
  color: white;
  text-align: center;
  margin-bottom: 28px;
  text-shadow: 0 2px 16px rgba(0,0,0,.22);
}
.brand-mark {
  width: 88px;
  height: 90px;
  margin: 0 auto 6px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 7px;
}
.brand-mark span {
  width: 16px;
  border: 3px solid currentColor;
  border-bottom: 0;
  transform: skewY(-28deg);
}
.brand-mark span:nth-child(1) { height: 44px; }
.brand-mark span:nth-child(2) { height: 82px; }
.brand-mark span:nth-child(3) { height: 60px; }
.brand h1 {
  margin: 0;
  font-size: clamp(40px, 5vw, 62px);
  font-weight: 400;
  letter-spacing: .12em;
}
.brand p {
  margin: 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .55em;
}

.glass-card {
  background: var(--card);
  position: relative;
  border: 1px solid var(--card-border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(11px) saturate(1.04);
  -webkit-backdrop-filter: blur(11px) saturate(1.04);
}
#loginForm { padding: 28px 32px 24px; }
.card-heading { text-align: center; margin-bottom: 22px; }
.card-heading h2 { margin: 0; font-size: 24px; }
.card-heading p { margin: 8px 0 0; color: var(--text-soft); }

.input-wrap {
  height: 58px;
  border: 1px solid var(--field-border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.010), rgba(255,255,255,.002));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  margin-bottom: 14px;
  transition: border .2s ease, box-shadow .2s ease, background .2s ease;
}
.input-wrap:focus-within {
  border-color: rgba(77,136,255,.88);
  box-shadow: 0 0 0 3px rgba(63,120,240,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.006));
}
.field-icon { width: 20px; opacity: .78; font-size: 21px; }
.field-icon.lock { font-size: 18px; }
.input-wrap input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 16px;
}
.input-wrap input::placeholder { color: var(--text-soft); opacity: .83; }
.eye-button {
  border: 0;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 18px;
  padding: 8px;
}
.form-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin: 3px 0 16px;
  color: var(--text-soft);
  font-size: 13px;
}
.remember { display: flex; gap: 7px; align-items: center; }
.remember input { width: 17px; height: 17px; accent-color: #2577d4; }
.link-button {
  border: 0;
  padding: 4px;
  background: transparent;
  color: currentColor;
  text-decoration: underline;
  cursor: pointer;
}
.login-error {
  min-height: 0;
  height: 0;
  overflow: hidden;
  color: #d52a3b;
  font-size: 13px;
  transition: height .2s ease, margin .2s ease;
}
.login-error.visible { height: 30px; margin-top: -5px; }

.primary-button {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(90deg, var(--button-a), var(--button-b));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 8px 25px rgba(29, 91, 184, .20);
  transition: transform .15s ease, filter .15s ease;
}
.primary-button:hover { filter: brightness(1.06); }
.primary-button:active { transform: translateY(1px); }
.primary-button:disabled { cursor: progress; opacity: .70; }
.demo-note { text-align: center; color: var(--text-soft); margin: 16px 0 0; font-size: 11px; opacity: .82; }

.footer {
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  text-shadow: 0 2px 10px rgba(0,0,0,.42);
  font-size: 12px;
  line-height: 1.55;
}
.footer-links { text-align: right; display: flex; flex-direction: column; }

.dashboard {
  width: min(760px, calc(100% - 20px));
  align-self: center;
  justify-self: center;
  padding: 34px;
  text-align: center;
}
.dashboard-brand { font-size: 13px; font-weight: 700; letter-spacing: .35em; color: var(--text-soft); }
.dashboard h2 { font-size: 34px; margin: 9px 0; }
.dashboard > p { color: var(--text-soft); margin-bottom: 26px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.dashboard-grid article {
  min-height: 140px;
  padding: 18px 12px;
  border: 1px solid var(--field-border);
  border-radius: 14px;
  background: rgba(255,255,255,.025);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.dashboard-grid article > span { font-size: 26px; }
.dashboard-grid small { color: var(--text-soft); }
.hidden { display: none !important; }


.glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008));
  pointer-events: none;
}
#loginForm > * , .dashboard > * {
  position: relative;
  z-index: 1;
}
html[data-theme="dark"] .glass-card::before {
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.006));
}

@media (max-width: 720px) {
  .page-shell { padding: max(16px, env(safe-area-inset-top)) 14px max(15px, env(safe-area-inset-bottom)); }
  .topbar { justify-content: flex-end; }
  .mini-nav { display: none; }
  .theme-toggle { font-size: 12px; }
  .login-layout { width: 100%; padding: 8px 0 20px; }
  .brand { margin: 12px 0 20px; }
  .brand-mark { width: 58px; height: 58px; gap: 4px; }
  .brand-mark span { width: 11px; border-width: 2px; }
  .brand-mark span:nth-child(1) { height: 30px; }
  .brand-mark span:nth-child(2) { height: 54px; }
  .brand-mark span:nth-child(3) { height: 40px; }
  .brand h1 { font-size: clamp(32px, 11vw, 46px); letter-spacing: .08em; }
  .brand p { font-size: 8px; letter-spacing: .38em; }
  #loginForm { padding: 24px 18px 19px; border-radius: 19px; }
  .card-heading h2 { font-size: 21px; }
  .card-heading p { font-size: 13px; }
  .input-wrap { height: 56px; }
  .form-row { font-size: 12px; }
  .footer { font-size: 10px; align-items: end; }
  .footer-links { display: none; }
  .dashboard { padding: 24px 18px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid article { min-height: 95px; }
  .background { background-position: 54% center; }
}

@media (max-height: 760px) and (min-width: 721px) {
  .page-shell { padding-top: 14px; padding-bottom: 14px; }
  .brand-mark { display: none; }
  .brand { margin-bottom: 14px; }
  .brand h1 { font-size: 42px; }
  #loginForm { padding-top: 20px; padding-bottom: 18px; }
  .input-wrap { height: 52px; }
}

/* ==============================
   UK VTR24 v0.2.0 — app dashboard
   ============================== */
:root {
  --app-bg: #f3f6fb;
  --app-surface: rgba(255,255,255,.92);
  --app-surface-strong: #ffffff;
  --app-border: #e1e7f0;
  --app-text: #17233a;
  --app-muted: #6d7890;
  --app-blue: #176fc1;
  --app-blue-soft: #e8f2fd;
  --app-green: #23845f;
  --app-green-soft: #e6f5ef;
  --app-orange: #bd6b16;
  --app-orange-soft: #fff1df;
  --app-red: #c63a46;
  --app-red-soft: #fdecef;
  --app-violet: #6d50c6;
  --app-shadow: 0 12px 35px rgba(29,47,74,.08);
}

html[data-theme="dark"] {
  --app-bg: #0d1320;
  --app-surface: rgba(20,27,42,.96);
  --app-surface-strong: #161f30;
  --app-border: #28344a;
  --app-text: #f3f6fb;
  --app-muted: #9aa6bc;
  --app-blue: #54a9f7;
  --app-blue-soft: #182d46;
  --app-green: #59c89d;
  --app-green-soft: #17372e;
  --app-orange: #f1a45b;
  --app-orange-soft: #3c2a18;
  --app-red: #f07983;
  --app-red-soft: #3d2027;
  --app-violet: #a58ae9;
  --app-shadow: 0 12px 35px rgba(0,0,0,.22);
}

body.app-mode {
  background: var(--app-bg);
  color: var(--app-text);
  overflow-y: auto;
}
body.app-mode .background,
body.app-mode .background-overlay,
body.app-mode .login-only { display: none !important; }
body.app-mode .page-shell {
  display: block;
  width: 100%;
  max-width: none;
  min-height: 100svh;
  padding: 0;
}

.app-view {
  min-height: 100svh;
  background:
    radial-gradient(circle at 10% -10%, rgba(42,123,210,.09), transparent 27%),
    var(--app-bg);
  color: var(--app-text);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 76px;
  padding: 0 34px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 28px;
  align-items: center;
  background: color-mix(in srgb, var(--app-surface-strong) 94%, transparent);
  border-bottom: 1px solid var(--app-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.app-brand-block { display: flex; align-items: center; gap: 13px; min-width: 245px; }
.app-brand-block > div:last-child { display: flex; flex-direction: column; line-height: 1.15; }
.app-brand-block strong { font-size: 16px; letter-spacing: .14em; }
.app-brand-block small { color: var(--app-muted); font-size: 11px; margin-top: 4px; }
.app-logo-mark { width: 37px; height: 43px; display: flex; align-items: flex-end; gap: 3px; color: var(--app-blue); }
.app-logo-mark span { width: 8px; border: 2px solid currentColor; border-bottom: 0; transform: skewY(-28deg); }
.app-logo-mark span:nth-child(1) { height: 22px; }
.app-logo-mark span:nth-child(2) { height: 38px; }
.app-logo-mark span:nth-child(3) { height: 29px; }

.app-nav { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
.nav-link {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--app-muted);
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background .15s ease, color .15s ease;
}
.nav-link:hover, .nav-link.active { color: var(--app-blue); background: var(--app-blue-soft); }

.app-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.icon-action, .logout-action, .profile-chip {
  border: 1px solid var(--app-border);
  background: var(--app-surface-strong);
  color: var(--app-text);
  cursor: pointer;
}
.icon-action { position: relative; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; }
.icon-action.has-badge > span { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--app-red); color: white; font-size: 10px; display: grid; place-items: center; border: 2px solid var(--app-surface-strong); }
.profile-chip { min-height: 44px; padding: 4px 10px 4px 5px; border-radius: 13px; display: flex; align-items: center; gap: 8px; }
.avatar { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--app-blue), var(--app-violet)); color: white; display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.profile-copy { display: flex; flex-direction: column; align-items: flex-start; }
.profile-copy strong { font-size: 12px; }
.profile-copy small { font-size: 10px; color: var(--app-muted); margin-top: 2px; }
.logout-action { min-height: 40px; padding: 0 13px; border-radius: 10px; font-size: 12px; }

.preview-bar {
  width: min(1380px, calc(100% - 42px));
  margin: 18px auto 0;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px dashed color-mix(in srgb, var(--app-blue) 38%, var(--app-border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--app-blue-soft) 52%, var(--app-surface));
}
.preview-bar > div:first-child { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.preview-bar strong { font-size: 12px; color: var(--app-blue); }
.preview-bar span { font-size: 11px; color: var(--app-muted); }
.role-switch { display: flex; padding: 3px; background: var(--app-surface-strong); border: 1px solid var(--app-border); border-radius: 10px; flex-shrink: 0; }
.role-button { border: 0; background: transparent; color: var(--app-muted); border-radius: 7px; padding: 8px 12px; cursor: pointer; font-size: 12px; }
.role-button.active { background: var(--app-blue); color: white; }

.role-dashboard {
  width: min(1380px, calc(100% - 42px));
  margin: 16px auto 0;
  display: grid;
  gap: 16px;
}

.panel-card, .stat-card {
  border: 1px solid var(--app-border);
  background: var(--app-surface);
  box-shadow: var(--app-shadow);
  border-radius: 18px;
}
.panel-card { padding: 22px; }

.dashboard-hero {
  min-height: 142px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 30px;
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--app-blue-soft) 82%, var(--app-surface)), var(--app-surface) 60%),
    var(--app-surface);
}
.hero-copy .eyebrow, .eyebrow { display: block; color: var(--app-blue); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; font-weight: 800; }
.hero-copy h1 { margin: 8px 0 7px; font-size: clamp(25px, 3vw, 36px); letter-spacing: -.02em; }
.hero-copy p { margin: 0; color: var(--app-muted); font-size: 13px; }
.hero-date { min-width: 205px; padding: 13px 15px; border: 1px solid var(--app-border); border-radius: 13px; background: color-mix(in srgb, var(--app-surface-strong) 80%, transparent); display: flex; flex-direction: column; align-items: flex-end; }
.hero-date strong { font-size: 13px; }
.hero-date span { color: var(--app-muted); font-size: 10px; margin-top: 5px; }

.priority-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; border-left: 4px solid var(--app-orange); }
.alert-icon { width: 42px; height: 42px; border-radius: 13px; background: var(--app-orange-soft); color: var(--app-orange); display: grid; place-items: center; font-size: 22px; font-weight: 800; }
.priority-alert h2 { margin: 4px 0 5px; font-size: 19px; }
.priority-alert p { margin: 0; color: var(--app-muted); font-size: 12px; line-height: 1.5; }
.ghost-button, .secondary-button, .text-button {
  cursor: pointer;
  color: var(--app-blue);
}
.ghost-button { border: 1px solid color-mix(in srgb, var(--app-blue) 28%, var(--app-border)); background: var(--app-blue-soft); border-radius: 10px; padding: 10px 13px; font-size: 12px; }
.secondary-button { width: 100%; border: 1px solid var(--app-border); background: var(--app-surface-strong); border-radius: 10px; padding: 10px; margin-top: 14px; font-size: 12px; }
.text-button { border: 0; background: transparent; padding: 5px 0; font-size: 11px; }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat-card { min-height: 116px; padding: 18px; display: flex; flex-direction: column; }
.stat-card > span { color: var(--app-muted); font-size: 11px; }
.stat-card strong { font-size: 31px; margin: 7px 0 2px; line-height: 1; }
.stat-card small { margin-top: auto; color: var(--app-green); font-size: 10px; }
.stat-card.warning small { color: var(--app-red); }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.section-heading h2 { margin: 4px 0 0; font-size: 19px; }

.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.quick-grid button, .owner-action {
  border: 1px solid var(--app-border);
  background: var(--app-surface-strong);
  color: var(--app-text);
  border-radius: 13px;
  padding: 15px;
  text-align: left;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "icon small";
  column-gap: 11px;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.quick-grid button:hover, .owner-action:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--app-blue) 35%, var(--app-border)); box-shadow: 0 8px 20px rgba(23,111,193,.08); }
.quick-grid button > span, .owner-action > span { grid-area: icon; font-size: 22px; }
.quick-grid button strong, .owner-action strong { grid-area: title; font-size: 12px; }
.quick-grid button small, .owner-action small { grid-area: small; color: var(--app-muted); font-size: 10px; margin-top: 3px; }

.content-columns { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, .8fr); gap: 16px; }
.equal-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.content-panel { min-width: 0; }

.request-list { display: grid; gap: 7px; }
.request-row { width: 100%; border: 1px solid transparent; background: transparent; color: var(--app-text); border-radius: 11px; padding: 11px 9px; display: grid; grid-template-columns: 56px minmax(0,1fr) 100px 92px; align-items: center; gap: 8px; text-align: left; cursor: pointer; }
.request-row:hover { background: color-mix(in srgb, var(--app-blue-soft) 48%, transparent); border-color: var(--app-border); }
.request-id { color: var(--app-muted); font-size: 10px; font-weight: 700; }
.request-main { min-width: 0; display: flex; flex-direction: column; }
.request-main strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.request-main small, .assignee { color: var(--app-muted); font-size: 10px; margin-top: 3px; }
.assignee { margin-top: 0; }
.status { justify-self: end; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-style: normal; white-space: nowrap; }
.status.new { background: var(--app-blue-soft); color: var(--app-blue); }
.status.work { background: var(--app-orange-soft); color: var(--app-orange); }
.status.overdue { background: var(--app-red-soft); color: var(--app-red); }
.status.done { background: var(--app-green-soft); color: var(--app-green); }
.status.planned { background: var(--app-blue-soft); color: var(--app-blue); }

.team-list { display: grid; gap: 10px; }
.team-list > div { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--app-border); }
.team-list > div:last-child { border-bottom: 0; }
.person-avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--app-blue-soft); color: var(--app-blue); font-size: 10px; font-weight: 800; }
.team-list p { margin: 0; display: flex; flex-direction: column; min-width: 0; }
.team-list p strong { font-size: 11px; }
.team-list p small { color: var(--app-muted); font-size: 9px; margin-top: 3px; }
.presence { color: var(--app-muted); font-size: 9px; }
.presence.online { color: var(--app-green); }

.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.work-grid article { min-height: 112px; padding: 14px; border: 1px solid var(--app-border); border-radius: 13px; background: var(--app-surface-strong); display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon main" "state state"; gap: 10px; }
.work-icon { grid-area: icon; font-size: 20px; }
.work-grid article > div { grid-area: main; display: flex; flex-direction: column; }
.work-grid article strong { font-size: 11px; }
.work-grid article small { color: var(--app-muted); font-size: 9px; margin-top: 4px; }
.work-grid article > .status, .work-grid article > .progress { grid-area: state; justify-self: stretch; }
.progress { height: 6px; border-radius: 999px; background: var(--app-border); overflow: hidden; align-self: end; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--app-blue), var(--app-violet)); border-radius: inherit; }

.news-list, .document-list, .compact-announcements { display: grid; gap: 7px; }
.news-list button, .document-list button, .compact-announcements button { border: 0; background: transparent; color: var(--app-text); padding: 9px; border-radius: 10px; cursor: pointer; text-align: left; }
.news-list button:hover, .document-list button:hover, .compact-announcements button:hover { background: color-mix(in srgb, var(--app-blue-soft) 48%, transparent); }
.news-list button { display: grid; grid-template-columns: 48px 1fr; gap: 10px; }
.news-date { width: 42px; height: 42px; border-radius: 10px; background: var(--app-blue-soft); color: var(--app-blue); display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.news-list button > span:last-child { display: flex; flex-direction: column; }
.news-list strong, .document-list strong { font-size: 11px; }
.news-list small, .document-list small { color: var(--app-muted); font-size: 9px; margin-top: 4px; line-height: 1.4; }
.document-list button { display: grid; grid-template-columns: 38px 1fr 20px; gap: 10px; align-items: center; }
.document-list button > span { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--app-red-soft); color: var(--app-red); font-size: 8px; font-weight: 800; }
.document-list p { margin: 0; display: flex; flex-direction: column; }
.document-list b { color: var(--app-muted); font-size: 15px; font-weight: 400; }

.moderation-note { color: var(--app-muted); font-size: 10px; }
.announcement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.announcement-grid button { min-height: 118px; border: 1px solid var(--app-border); background: var(--app-surface-strong); color: var(--app-text); border-radius: 13px; padding: 14px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer; }
.announcement-grid strong { margin-top: 9px; font-size: 12px; }
.announcement-grid small { margin-top: 4px; color: var(--app-muted); font-size: 9px; }
.announcement-grid em { margin-top: auto; padding-top: 10px; color: var(--app-muted); font-size: 9px; font-style: normal; }
.announce-kind { display: inline-flex; width: fit-content; padding: 4px 7px; border-radius: 999px; background: var(--app-blue-soft); color: var(--app-blue); font-size: 8px; font-weight: 700; }
.announce-kind.sale { background: var(--app-green-soft); color: var(--app-green); }
.announce-kind.wanted { background: var(--app-orange-soft); color: var(--app-orange); }

.owner-hero { background: linear-gradient(118deg, color-mix(in srgb, var(--app-green-soft) 85%, var(--app-surface)), var(--app-surface) 64%); }
.owner-object-chip { border-color: color-mix(in srgb, var(--app-green) 26%, var(--app-border)); }
.owner-quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.owner-action { min-height: 80px; }
.owner-request-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.owner-request-cards button { border: 1px solid var(--app-border); background: var(--app-surface-strong); color: var(--app-text); border-radius: 13px; padding: 14px; text-align: left; cursor: pointer; }
.owner-request-cards button > div { display: flex; align-items: center; justify-content: space-between; }
.owner-request-cards strong { display: block; margin-top: 10px; font-size: 12px; }
.owner-request-cards small { display: block; margin-top: 4px; color: var(--app-muted); font-size: 9px; }
.owner-request-cards p { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--app-border); color: var(--app-muted); font-size: 9px; }
.meter-list { display: grid; gap: 8px; }
.meter-list > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--app-border); }
.meter-list > div:last-child { border-bottom: 0; }
.meter-list span { font-size: 10px; color: var(--app-muted); }
.meter-list strong { font-size: 14px; }
.meter-list small { grid-column: 1 / -1; color: var(--app-muted); font-size: 8px; }
.owner-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.owner-news-grid button { min-height: 108px; border: 1px solid var(--app-border); background: var(--app-surface-strong); color: var(--app-text); border-radius: 13px; padding: 14px; text-align: left; display: flex; flex-direction: column; cursor: pointer; }
.owner-news-grid button > span { color: var(--app-blue); font-size: 8px; font-weight: 800; }
.owner-news-grid strong { margin-top: 8px; font-size: 11px; }
.owner-news-grid small { margin-top: 5px; color: var(--app-muted); font-size: 9px; line-height: 1.4; }
.compact-announcements button { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.compact-announcements p { margin: 0; display: flex; flex-direction: column; }
.compact-announcements strong { font-size: 11px; }
.compact-announcements small { margin-top: 3px; color: var(--app-muted); font-size: 9px; }

.app-footer { min-height: 58px; margin-top: 4px; display: flex; align-items: center; justify-content: space-between; color: var(--app-muted); font-size: 9px; padding: 0 4px 18px; }
.demo-toast { position: fixed; z-index: 100; right: 22px; bottom: 22px; max-width: min(360px, calc(100% - 30px)); padding: 13px 16px; border-radius: 12px; background: #192337; color: white; box-shadow: 0 15px 45px rgba(0,0,0,.28); font-size: 12px; line-height: 1.4; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.demo-toast.visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1100px) {
  .app-header { grid-template-columns: auto 1fr; padding: 0 20px; }
  .app-nav { grid-column: 1 / -1; order: 3; justify-content: flex-start; overflow-x: auto; padding-bottom: 8px; }
  .app-header-actions { justify-self: end; }
  .profile-copy { display: none; }
  .app-brand-block { min-width: 0; }
  .stats-grid, .quick-grid, .work-grid, .owner-quick-grid { grid-template-columns: repeat(2, 1fr); }
  .content-columns { grid-template-columns: 1fr; }
  .equal-columns { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body.app-mode .page-shell { padding: 0; }
  .app-header { position: sticky; min-height: 62px; grid-template-columns: 1fr auto; gap: 9px; padding: 8px 12px 0; }
  .app-brand-block small { display: none; }
  .app-logo-mark { width: 29px; height: 34px; }
  .app-logo-mark span { width: 6px; border-width: 1.5px; }
  .app-logo-mark span:nth-child(1) { height: 18px; }
  .app-logo-mark span:nth-child(2) { height: 30px; }
  .app-logo-mark span:nth-child(3) { height: 23px; }
  .app-brand-block strong { font-size: 13px; }
  .app-header-actions { gap: 5px; }
  .icon-action { width: 35px; height: 35px; border-radius: 9px; }
  .profile-chip { padding: 3px; border: 0; background: transparent; }
  .avatar { width: 33px; height: 33px; }
  .logout-action { display: none; }
  .app-nav { gap: 2px; width: calc(100vw - 24px); padding: 4px 0 8px; }
  .nav-link { flex: 0 0 auto; padding: 8px 9px; font-size: 11px; }

  .preview-bar { width: calc(100% - 22px); margin-top: 11px; padding: 10px; align-items: stretch; flex-direction: column; gap: 9px; }
  .preview-bar > div:first-child { display: block; }
  .preview-bar span { display: block; margin-top: 4px; line-height: 1.35; }
  .role-switch { width: 100%; }
  .role-button { flex: 1; padding: 9px 7px; font-size: 10px; }

  .role-dashboard { width: calc(100% - 22px); margin-top: 11px; gap: 11px; }
  .panel-card { padding: 15px; border-radius: 15px; }
  .dashboard-hero { min-height: 0; padding: 18px; align-items: flex-start; flex-direction: column; }
  .hero-copy h1 { font-size: 24px; }
  .hero-copy p { font-size: 11px; line-height: 1.45; }
  .hero-date { width: 100%; min-width: 0; align-items: flex-start; }
  .priority-alert { grid-template-columns: auto 1fr; padding: 14px; }
  .priority-alert .ghost-button { grid-column: 1 / -1; width: 100%; }
  .priority-alert h2 { font-size: 16px; }
  .priority-alert p { font-size: 10px; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { min-height: 100px; padding: 14px; }
  .stat-card strong { font-size: 26px; }
  .quick-grid, .owner-quick-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .quick-grid button, .owner-action { min-height: 82px; padding: 12px; grid-template-columns: 1fr; grid-template-areas: "icon" "title" "small"; gap: 4px; }
  .quick-grid button > span, .owner-action > span { font-size: 20px; }
  .section-heading { align-items: center; margin-bottom: 11px; }
  .section-heading h2 { font-size: 17px; }

  .request-row { grid-template-columns: 42px 1fr auto; grid-template-areas: "id main status" "id main status"; }
  .request-row .request-id { grid-area: id; }
  .request-row .request-main { grid-area: main; }
  .request-row .assignee { display: none; }
  .request-row .status { grid-area: status; }
  .request-main strong { white-space: normal; }

  .work-grid, .announcement-grid, .owner-news-grid { grid-template-columns: 1fr; }
  .work-grid article { min-height: 90px; }
  .owner-request-cards { grid-template-columns: 1fr; }
  .demo-toast { right: 15px; bottom: 15px; }
}

/* ==============================
   UK VTR24 v0.2.1 additions
   ============================== */
.header-role-switch { margin-right: 4px; }
.role-short { display: none; }

/* The old preview banner is no longer used in v0.2.1. */
.preview-bar { display: none !important; }
.role-dashboard { margin-top: 18px; }

.quick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.owner-quick-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.employees-panel { overflow: hidden; }
.employee-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.employee-summary > span { border: 1px solid var(--app-border); background: var(--app-surface-strong); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.employee-summary strong { font-size: 22px; line-height: 1; }
.employee-summary small { color: var(--app-muted); font-size: 9px; margin-top: 6px; }
.schedule-wrap { overflow-x: auto; border: 1px solid var(--app-border); border-radius: 13px; }
.schedule-grid { min-width: 980px; display: grid; grid-template-columns: minmax(250px, 1.7fr) repeat(7, minmax(82px, .7fr)); }
.schedule-head { background: color-mix(in srgb, var(--app-blue-soft) 52%, var(--app-surface-strong)); border-bottom: 1px solid var(--app-border); color: var(--app-muted); font-size: 9px; font-weight: 700; text-align: center; }
.schedule-head > div { padding: 10px 8px; border-right: 1px solid var(--app-border); }
.schedule-head > div:first-child { text-align: left; padding-left: 14px; }
.schedule-head small { font-size: 8px; font-weight: 500; }
.schedule-row { border-bottom: 1px solid var(--app-border); background: var(--app-surface-strong); }
.schedule-row:last-child { border-bottom: 0; }
.schedule-row > div { min-height: 62px; border-right: 1px solid var(--app-border); display: flex; align-items: center; justify-content: center; padding: 8px; }
.employee-name { justify-content: flex-start !important; gap: 10px; padding-left: 12px !important; }
.employee-name p { margin: 0; display: flex; flex-direction: column; }
.employee-name strong { font-size: 10px; }
.employee-name small { color: var(--app-muted); font-size: 8px; margin-top: 3px; }
.shift { font-size: 9px; font-weight: 700; }
.shift.on { color: var(--app-green); background: color-mix(in srgb, var(--app-green-soft) 35%, transparent); }
.shift.duty { color: var(--app-orange); background: color-mix(in srgb, var(--app-orange-soft) 40%, transparent); }
.shift.off { color: var(--app-muted); }
.section-hint { margin: 12px 0 0; color: var(--app-muted); font-size: 9px; line-height: 1.5; }

.featured-news { border: 1px solid var(--app-border); background: linear-gradient(135deg, color-mix(in srgb, var(--app-blue-soft) 55%, var(--app-surface-strong)), var(--app-surface-strong)); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.featured-news-head { display: flex; gap: 12px; align-items: center; }
.featured-news-head > div { display: flex; flex-direction: column; }
.featured-news-head strong { font-size: 14px; }
.featured-news-head small { margin-top: 4px; color: var(--app-muted); font-size: 9px; }
.featured-news > p { margin: 14px 0; color: var(--app-text); font-size: 11px; line-height: 1.65; }
.engineer-directions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.engineer-directions > div { border: 1px solid var(--app-border); border-radius: 11px; padding: 12px; background: var(--app-surface); display: flex; flex-direction: column; }
.engineer-directions strong { font-size: 11px; }
.engineer-directions a { margin-top: 5px; color: var(--app-blue); font-size: 11px; text-decoration: none; font-weight: 700; }
.engineer-directions small { margin-top: 7px; color: var(--app-muted); font-size: 9px; line-height: 1.55; }
.secondary-news { margin-top: 10px; }

.contacts-note { color: var(--app-muted); font-size: 9px; }
.contacts-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .7fr); gap: 16px; }
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.contact-cards article { border: 1px solid var(--app-border); background: var(--app-surface-strong); border-radius: 13px; padding: 14px; display: flex; flex-direction: column; min-height: 122px; }
.contact-role { color: var(--app-blue); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.contact-cards strong { margin-top: 8px; font-size: 12px; }
.contact-cards a { margin-top: 6px; color: var(--app-text); font-size: 10px; text-decoration: none; }
.contact-cards a:hover { color: var(--app-blue); }
.messenger-block { border: 1px solid var(--app-border); background: var(--app-surface-strong); border-radius: 13px; padding: 14px; }
.messenger-block h3 { margin: 5px 0 5px; font-size: 15px; }
.messenger-block p { margin: 0 0 12px; color: var(--app-muted); font-size: 9px; line-height: 1.45; }
.messenger-qr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.messenger-qr-grid a { border: 1px solid var(--app-border); border-radius: 11px; padding: 9px 6px; color: var(--app-text); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 9px; }
.messenger-qr-grid img { width: min(100%, 94px); aspect-ratio: 1; border-radius: 6px; background: white; }

.modal-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(5,10,20,.62); display: grid; place-items: center; padding: 18px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.employee-modal { width: min(620px, 100%); border: 1px solid var(--app-border); border-radius: 18px; background: var(--app-surface-strong); color: var(--app-text); box-shadow: 0 24px 80px rgba(0,0,0,.28); padding: 20px; }
.modal-head { display: flex; justify-content: space-between; gap: 15px; align-items: flex-start; }
.modal-head h2 { margin: 5px 0 0; font-size: 21px; }
.modal-close { width: 34px; height: 34px; border: 1px solid var(--app-border); border-radius: 9px; background: var(--app-surface); color: var(--app-text); font-size: 20px; cursor: pointer; }
.employee-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.employee-form-grid label { display: flex; flex-direction: column; gap: 6px; }
.employee-form-grid label > span { color: var(--app-muted); font-size: 10px; }
.employee-form-grid input, .employee-form-grid select { width: 100%; min-height: 44px; border: 1px solid var(--app-border); border-radius: 10px; background: var(--app-surface); color: var(--app-text); padding: 0 11px; outline: none; }
.employee-form-grid input:focus, .employee-form-grid select:focus { border-color: var(--app-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-blue) 12%, transparent); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.secondary-modal-button, .save-modal-button { min-height: 42px; border-radius: 10px; padding: 0 16px; cursor: pointer; }
.secondary-modal-button { border: 1px solid var(--app-border); background: var(--app-surface); color: var(--app-text); }
.save-modal-button { border: 0; background: var(--app-blue); color: white; font-weight: 700; }

@media (max-width: 1250px) {
  .role-long { display: none; }
  .role-short { display: inline; }
  .quick-grid, .owner-quick-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 1100px) {
  .contacts-layout { grid-template-columns: 1fr; }
  .app-header-actions { gap: 5px; }
  .header-role-switch .role-button { padding: 7px 9px; font-size: 10px; }
}

@media (max-width: 720px) {
  .app-header { padding-bottom: 0; }
  .app-header-actions { flex-wrap: nowrap; }
  .profile-chip { display: none; }
  .logout-action { display: inline-flex !important; min-height: 35px; padding: 0 8px; align-items: center; justify-content: center; font-size: 10px; }
  .header-role-switch { order: 5; width: 100%; grid-column: 1 / -1; margin: 2px 0 0; }
  .header-role-switch .role-button { flex: 1; min-height: 34px; }
  .role-short { display: inline; }
  .app-nav { order: 6; }
  .role-dashboard { margin-top: 11px; }
  .quick-grid, .owner-quick-grid { grid-template-columns: 1fr 1fr; }
  .employee-summary { grid-template-columns: 1fr 1fr; }
  .engineer-directions { grid-template-columns: 1fr; }
  .contact-cards { grid-template-columns: 1fr; }
  .messenger-qr-grid { grid-template-columns: repeat(3, 1fr); }
  .contacts-note { display: none; }
  .employee-form-grid { grid-template-columns: 1fr; }
  .employee-modal { padding: 16px; }
}

@media (max-width: 430px) {
  .icon-action { width: 32px; height: 32px; }
  .logout-action { min-height: 32px; padding: 0 7px; }
  .messenger-qr-grid { grid-template-columns: 1fr 1fr 1fr; gap: 5px; }
  .messenger-qr-grid a { padding: 6px 3px; font-size: 8px; }
}

/* ==============================
   UK VTR24 v0.2.6 — announcements + scrollspy
   ============================== */
.role-dashboard section[id] { scroll-margin-top: 104px; }

/* Объявления заметнее, но без слишком яркой рекламы. */
.nav-link[data-key="announcements"] {
  position: relative;
  color: color-mix(in srgb, var(--app-orange) 80%, var(--app-muted));
}
.nav-link[data-key="announcements"]::after {
  content: "3";
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 6px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  vertical-align: 1px;
  background: var(--app-orange-soft);
  color: var(--app-orange);
  font-size: 8px;
  font-weight: 800;
}
.nav-link[data-key="announcements"].active {
  color: var(--app-orange);
  background: color-mix(in srgb, var(--app-orange-soft) 72%, var(--app-surface));
}
.nav-link[data-key="announcements"].active::after {
  background: var(--app-orange);
  color: #fff;
}

.announcement-panel {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--app-orange) 24%, var(--app-border));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--app-orange-soft) 32%, var(--app-surface)) 0%,
      var(--app-surface) 48%,
      color-mix(in srgb, var(--app-blue-soft) 16%, var(--app-surface)) 100%);
}
.announcement-panel::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--app-orange), color-mix(in srgb, var(--app-orange) 45%, var(--app-blue)));
}
.announcement-panel .eyebrow { color: var(--app-orange); }
.announcement-grid button,
.compact-announcements button {
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.announcement-grid button:hover,
.compact-announcements button:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--app-orange) 34%, var(--app-border));
  background: color-mix(in srgb, var(--app-orange-soft) 26%, var(--app-surface-strong));
  box-shadow: 0 8px 22px rgba(189,107,22,.09);
}
.announcement-grid button:first-child,
.compact-announcements button:first-child {
  border-left: 3px solid var(--app-orange);
}
.announcement-action {
  border-color: color-mix(in srgb, var(--app-orange) 32%, var(--app-border)) !important;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--app-orange-soft) 58%, var(--app-surface-strong)),
    var(--app-surface-strong)) !important;
}
.announcement-action > span { filter: saturate(1.08); }
.announcement-heading-actions { display: flex; align-items: center; gap: 10px; }
.announcement-count {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--app-orange-soft);
  color: var(--app-orange);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .role-dashboard section[id] { scroll-margin-top: 138px; }
  .nav-link[data-key="announcements"]::after { min-width: 15px; height: 15px; font-size: 7px; margin-left: 4px; }
  .announcement-heading-actions { gap: 6px; }
  .announcement-count { min-height: 23px; padding: 0 7px; font-size: 8px; }
}

/* ==============================
   UK VTR24 v0.2.6 — compact role switch on mobile
   ============================== */
@media (max-width: 720px) {
  .header-role-switch {
    width: max-content;
    max-width: calc(100vw - 24px);
    justify-self: center;
    grid-column: 1 / -1;
    margin: 2px auto 0;
    padding: 3px;
    border-radius: 11px;
  }

  .header-role-switch .role-button {
    flex: 0 0 auto;
    min-width: 92px;
    min-height: 32px;
    padding: 0 10px;
    font-size: 11px;
    border-radius: 8px;
  }
}

@media (max-width: 430px) {
  .header-role-switch .role-button {
    min-width: 84px;
    min-height: 30px;
    padding: 0 8px;
    font-size: 10px;
  }
}

/* ==============================
   UK VTR24 v0.2.6 — mobile header order + smaller role switch
   ============================== */
@media (max-width: 720px) {
  /* На телефоне: логотип → УК/Собственник → тема/уведомления/выход. */
  .app-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
  }

  .header-role-switch {
    order: -1;
    width: max-content;
    max-width: none;
    margin: 0 2px 0 0;
    padding: 2px;
    border-radius: 9px;
    flex: 0 0 auto;
  }

  .header-role-switch .role-button {
    flex: 0 0 auto;
    min-height: 29px;
    height: 29px;
    padding: 0 7px;
    font-size: 9.5px;
    line-height: 1;
    border-radius: 7px;
  }

  .header-role-switch .role-button[data-role="uk"] {
    min-width: 38px;
  }

  .header-role-switch .role-button[data-role="owner"] {
    min-width: 72px;
  }
}

@media (max-width: 430px) {
  .app-header { gap: 5px; padding-left: 8px; padding-right: 8px; }
  .app-header-actions { gap: 3px; }

  .header-role-switch {
    margin-right: 1px;
    padding: 2px;
  }

  .header-role-switch .role-button {
    min-height: 27px;
    height: 27px;
    padding: 0 5px;
    font-size: 9px;
  }

  .header-role-switch .role-button[data-role="uk"] { min-width: 34px; }
  .header-role-switch .role-button[data-role="owner"] { min-width: 66px; }

  .icon-action { width: 30px; height: 30px; }
  .logout-action { min-height: 30px; height: 30px; padding: 0 6px; font-size: 9px; }
}

/* ==============================
   UK VTR24 v0.2.6 — marketplace, settings, polls
   ============================== */
.nav-link[data-key="announcements"]::after { content: attr(data-count); }
.nav-link[data-key="votes"] { position: relative; }
.nav-link[data-key="votes"]::before { content: "●"; color: var(--app-green); font-size: 7px; margin-right: 5px; vertical-align: 2px; }
.nav-link[data-key="settings"] { color: color-mix(in srgb, var(--app-muted) 88%, var(--app-text)); }

.marketplace-preview-panel .section-heading { align-items: center; }
.market-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.market-preview-card { position: relative; min-height: 170px; border: 1px solid var(--app-border); background: var(--app-surface-strong); color: var(--app-text); border-radius: 15px; overflow: hidden; display: grid; grid-template-columns: 38% 1fr; text-align: left; padding: 0; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.market-preview-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--app-orange) 35%, var(--app-border)); box-shadow: 0 12px 30px rgba(0,0,0,.08); }
.market-card-visual { position: relative; min-height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 15px; color: white; isolation: isolate; }
.market-card-visual::before, .market-card-visual::after { content:""; position:absolute; inset:0; z-index:-2; }
.market-card-visual::after { z-index:-1; background: linear-gradient(180deg, rgba(3,8,17,.02), rgba(3,8,17,.38)); }
.market-card-visual.parking::before { background: radial-gradient(circle at 72% 24%, rgba(82,172,255,.9), transparent 24%), linear-gradient(145deg,#183a61,#0b172a 64%); }
.market-card-visual.storage::before { background: radial-gradient(circle at 25% 22%, rgba(255,190,96,.55), transparent 30%), linear-gradient(145deg,#80552d,#322317 72%); }
.market-card-visual.realty::before { background: radial-gradient(circle at 65% 25%, rgba(101,206,184,.55), transparent 28%), linear-gradient(145deg,#24675c,#132923 72%); }
.market-card-visual.services::before { background: radial-gradient(circle at 65% 25%, rgba(165,138,233,.55), transparent 28%), linear-gradient(145deg,#5a458d,#231c36 72%); }
.market-card-visual.generic::before { background: linear-gradient(145deg,#3b526f,#172235); }
.market-card-visual b { font-size: 25px; letter-spacing: .04em; }
.market-card-visual em { font-style: normal; font-size: 38px; align-self: flex-end; filter: drop-shadow(0 5px 12px rgba(0,0,0,.22)); }
.market-card-visual i { position:absolute; left:10px; bottom:10px; padding:5px 7px; border-radius:8px; background:rgba(12,18,28,.76); color:#ffd594; font-size:9px; font-style:normal; }
.market-card-copy { padding: 15px; display: flex; min-width:0; flex-direction: column; align-items:flex-start; }
.market-card-copy small { color: var(--app-muted); font-size: 9px; }
.market-card-copy strong { margin-top: 10px; font-size: 14px; line-height:1.35; }
.market-card-copy > b { margin-top: 8px; font-size: 16px; }
.market-card-copy em { margin-top:auto; padding-top:10px; color:var(--app-muted); font-size:10px; font-style:normal; }
.market-preview-footer { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; }
.market-preview-mini { display:grid; gap:8px; }
.mini-market-item { width:100%; border:1px solid var(--app-border); background:var(--app-surface-strong); color:var(--app-text); border-radius:12px; padding:11px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; text-align:left; cursor:pointer; }
.mini-market-icon { width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--app-orange-soft); font-size:20px; }
.mini-market-item p { margin:0; display:flex; flex-direction:column; gap:4px; }
.mini-market-item strong { font-size:11px; }
.mini-market-item small { color:var(--app-muted); font-size:9px; }

.subpage { width:min(1380px,calc(100% - 42px)); margin:18px auto 0; min-height:calc(100vh - 130px); }
.subpage-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; margin-bottom:16px; }
.subpage-head h1 { margin:4px 0 3px; font-size:30px; }
.subpage-head p { margin:0; color:var(--app-muted); font-size:11px; }
.back-button { min-height:40px; padding:0 13px; border:1px solid var(--app-border); border-radius:11px; background:var(--app-surface-strong); color:var(--app-text); cursor:pointer; }
.market-toolbar { display:grid; gap:14px; margin-bottom:16px; }
.market-search { height:48px; border:1px solid var(--app-border); border-radius:13px; background:var(--app-surface-strong); display:flex; align-items:center; gap:10px; padding:0 14px; }
.market-search span { font-size:20px; color:var(--app-muted); }
.market-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--app-text); }
.market-categories { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.market-categories::-webkit-scrollbar { display:none; }
.market-categories button { flex:0 0 auto; min-height:36px; padding:0 14px; border:1px solid var(--app-border); border-radius:999px; background:var(--app-surface-strong); color:var(--app-muted); cursor:pointer; }
.market-categories button.active { background:var(--app-text); color:var(--app-bg); border-color:var(--app-text); }
.market-filter-row { display:grid; grid-template-columns:190px 220px 1fr; gap:10px; align-items:center; }
.market-filter-row select { min-height:42px; border:1px solid var(--app-border); border-radius:11px; background:var(--app-surface-strong); color:var(--app-text); padding:0 11px; }
.market-result-count { justify-self:end; color:var(--app-muted); font-size:11px; }
.marketplace-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding-bottom:24px; }
.market-card { position:relative; min-width:0; border:1px solid var(--app-border); border-radius:16px; background:var(--app-surface); overflow:hidden; box-shadow:var(--app-shadow); }
.market-card.pending { border-color:color-mix(in srgb,var(--app-orange) 45%,var(--app-border)); }
.market-card-open { width:100%; border:0; background:transparent; color:var(--app-text); padding:0; text-align:left; cursor:pointer; }
.market-card .market-card-visual { aspect-ratio:16/10; min-height:0; }
.market-card .market-card-body { display:flex; flex-direction:column; padding:14px; min-height:150px; }
.market-card .market-card-body small { color:var(--app-muted); font-size:9px; }
.market-card .market-card-body strong { margin-top:8px; font-size:14px; }
.market-card .market-card-body > b { margin-top:7px; font-size:17px; }
.market-card .market-card-body em { margin-top:auto; padding-top:10px; color:var(--app-muted); font-size:10px; font-style:normal; }
.market-favorite { position:absolute; right:10px; top:10px; width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:11px; background:rgba(7,12,22,.55); color:white; font-size:22px; cursor:pointer; backdrop-filter:blur(8px); }
.market-empty { grid-column:1/-1; border:1px dashed var(--app-border); border-radius:16px; padding:44px 20px; text-align:center; color:var(--app-muted); }

.vote-action { border-color:color-mix(in srgb,var(--app-green) 32%,var(--app-border)) !important; background:linear-gradient(135deg,color-mix(in srgb,var(--app-green-soft) 62%,var(--app-surface-strong)),var(--app-surface-strong)) !important; }
.voting-panel { border-color:color-mix(in srgb,var(--app-green) 18%,var(--app-border)); }
.live-badge { display:inline-flex; align-items:center; gap:6px; min-height:25px; padding:0 9px; border-radius:999px; background:var(--app-green-soft); color:var(--app-green); font-size:9px; font-weight:800; white-space:nowrap; }
.live-badge i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 3px color-mix(in srgb,var(--app-green) 14%,transparent); }
.poll-card { border:1px solid var(--app-border); border-radius:15px; background:var(--app-surface-strong); padding:17px; }
.poll-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.poll-card-head small { color:var(--app-muted); font-size:9px; }
.poll-card h3 { margin:14px 0 16px; font-size:17px; line-height:1.35; }
.poll-results { display:grid; gap:12px; }
.poll-result-row > div:first-child { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.poll-result-row strong { font-size:11px; font-weight:600; }
.poll-result-row span { color:var(--app-muted); font-size:9px; white-space:nowrap; }
.poll-bar { height:8px; border-radius:99px; background:color-mix(in srgb,var(--app-border) 70%,transparent); overflow:hidden; margin-top:6px; }
.poll-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--app-blue),var(--app-green)); transition:width .3s ease; }
.poll-total { margin-top:15px; padding-top:13px; border-top:1px solid var(--app-border); display:flex; align-items:baseline; gap:7px; }
.poll-total strong { font-size:20px; }
.poll-total span { color:var(--app-muted); font-size:10px; }
.vote-options { display:grid; gap:8px; margin-bottom:16px; }
.vote-option { min-height:44px; border:1px solid var(--app-border); border-radius:11px; background:var(--app-surface); padding:0 12px; display:flex; align-items:center; gap:9px; cursor:pointer; }
.vote-option input { accent-color:var(--app-blue); }
.vote-option span { font-size:11px; }
.vote-options .ghost-button { justify-self:start; margin-top:4px; }
.vote-confirmed { margin:12px 0 0; color:var(--app-green); font-size:10px; }

.settings-panel { border-color:color-mix(in srgb,var(--app-violet) 22%,var(--app-border)); }
.settings-admin-badge { color:var(--app-violet); background:color-mix(in srgb,var(--app-violet) 10%,var(--app-surface-strong)); border:1px solid color-mix(in srgb,var(--app-violet) 18%,var(--app-border)); border-radius:999px; padding:6px 9px; font-size:9px; white-space:nowrap; }
.settings-grid { display:grid; grid-template-columns:1.6fr .7fr .7fr; gap:11px; }
.setting-row, .setting-status-card { border:1px solid var(--app-border); border-radius:14px; background:var(--app-surface-strong); padding:15px; }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.setting-row strong { font-size:13px; }
.setting-row p { margin:6px 0 0; color:var(--app-muted); font-size:10px; line-height:1.5; }
.setting-switch { flex:0 0 auto; position:relative; width:46px; height:27px; }
.setting-switch input { position:absolute; opacity:0; pointer-events:none; }
.setting-switch span { position:absolute; inset:0; border-radius:999px; background:var(--app-border); cursor:pointer; transition:.2s; }
.setting-switch span::after { content:""; position:absolute; width:21px; height:21px; left:3px; top:3px; border-radius:50%; background:white; box-shadow:0 2px 7px rgba(0,0,0,.2); transition:.2s; }
.setting-switch input:checked + span { background:var(--app-blue); }
.setting-switch input:checked + span::after { transform:translateX(19px); }
.setting-status-card { display:flex; flex-direction:column; }
.setting-status-card > span { color:var(--app-muted); font-size:9px; }
.setting-status-card strong { margin-top:8px; font-size:12px; }
.setting-status-card small { margin-top:auto; padding-top:10px; color:var(--app-muted); font-size:9px; line-height:1.45; }

.wide-modal { width:min(700px,100%); }
.form-span-2 { grid-column:1/-1; }
.employee-form-grid textarea { width:100%; border:1px solid var(--app-border); border-radius:10px; background:var(--app-surface); color:var(--app-text); padding:11px; outline:none; resize:vertical; font:inherit; }
.employee-form-grid textarea:focus { border-color:var(--app-blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--app-blue) 12%,transparent); }
.moderation-form-note { margin-top:12px; border-radius:10px; padding:10px 12px; background:var(--app-orange-soft); color:var(--app-orange); font-size:10px; }

@media (max-width: 1100px) {
  .marketplace-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .settings-grid { grid-template-columns:1fr 1fr; }
  .setting-row { grid-column:1/-1; }
}

@media (max-width: 720px) {
  .market-preview-grid { grid-template-columns:1fr; }
  .market-preview-card { min-height:145px; grid-template-columns:34% 1fr; }
  .market-preview-footer { align-items:stretch; flex-direction:column; }
  .market-preview-footer .ghost-button { width:100%; }
  .subpage { width:calc(100% - 24px); margin-top:12px; }
  .subpage-head { grid-template-columns:auto 1fr; gap:10px; }
  .subpage-head > .ghost-button { grid-column:1/-1; width:100%; }
  .subpage-head h1 { font-size:25px; }
  .market-toolbar { padding:13px; }
  .market-filter-row { grid-template-columns:1fr 1fr; }
  .market-result-count { grid-column:1/-1; justify-self:start; }
  .marketplace-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .market-card .market-card-visual { aspect-ratio:1/1; padding:10px; }
  .market-card-visual b { font-size:18px; }
  .market-card-visual em { font-size:27px; }
  .market-card .market-card-body { min-height:138px; padding:11px; }
  .market-card .market-card-body strong { font-size:11px; }
  .market-card .market-card-body > b { font-size:13px; }
  .market-card .market-card-body em { font-size:8px; }
  .market-favorite { width:31px; height:31px; right:7px; top:7px; font-size:18px; }
  .poll-card h3 { font-size:15px; }
  .settings-grid { grid-template-columns:1fr; }
  .setting-row { grid-column:auto; }
  .settings-admin-badge { display:none; }
  .announcement-form-grid, .poll-form-grid { grid-template-columns:1fr; }
  .form-span-2 { grid-column:auto; }
}

@media (max-width: 430px) {
  .marketplace-grid { grid-template-columns:1fr 1fr; gap:7px; }
  .market-categories button { min-height:33px; padding:0 11px; font-size:10px; }
  .market-filter-row { grid-template-columns:1fr; }
  .market-filter-row select { width:100%; }
  .market-card .market-card-body { min-height:128px; }
}


/* v0.2.6 — photo listings, separate schedule/settings, multi-poll history */
.nav-link[data-key="votes"]::after { content: attr(data-count); margin-left:6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; display:inline-grid; place-items:center; background:var(--app-orange); color:#fff; font-size:9px; font-weight:700; }
.nav-link[data-key="votes"][data-count="0"]::after { display:none; }
.section-heading-actions { display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:flex-end; }
.employee-directory { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.employee-directory article { border:1px solid var(--app-border); background:var(--app-surface-strong); border-radius:14px; padding:13px; display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; }
.employee-directory article>div { min-width:0; display:flex; flex-direction:column; gap:4px; }
.employee-directory strong { font-size:12px; } .employee-directory small,.employee-directory article>div>span { color:var(--app-muted); font-size:9px; line-height:1.35; }
.employee-directory a { color:var(--app-blue); font-size:10px; text-decoration:none; }
.market-card-photo { display:block; min-height:100%; background-size:cover; background-position:center; position:relative; }
.market-card-photo i { position:absolute; left:10px; bottom:10px; padding:5px 7px; border-radius:8px; background:rgba(12,18,28,.78); color:#ffd594; font-size:9px; font-style:normal; }
.market-preview-card.photo-card { grid-template-columns:42% 1fr; }
.market-preview-card.photo-card .market-card-photo { min-height:170px; }
.photo-mini-list .mini-market-item { grid-template-columns:76px 1fr; overflow:hidden; padding:0; }
.photo-mini-list .mini-market-item img { width:76px; height:62px; object-fit:cover; align-self:stretch; }
.photo-mini-list .mini-market-item p { padding:10px 10px 10px 0; }
.market-card .market-card-photo { aspect-ratio:16/10; min-height:0; }
.poll-stack { display:grid; gap:12px; }
.poll-summary-banner { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:-3px 0 14px; padding:11px 13px; border:1px solid color-mix(in srgb,var(--app-orange) 32%,var(--app-border)); border-radius:12px; background:color-mix(in srgb,var(--app-orange-soft) 58%,var(--app-surface-strong)); }
.poll-summary-banner strong { font-size:11px; } .poll-summary-banner span { color:var(--app-muted); font-size:9px; }
.pending-vote-badge { padding:7px 10px; border-radius:999px; background:color-mix(in srgb,var(--app-orange) 20%,var(--app-surface-strong)); border:1px solid color-mix(in srgb,var(--app-orange) 30%,var(--app-border)); color:#ffc476; font-size:10px; font-weight:700; white-space:nowrap; }
.poll-history-block { margin-top:22px; padding-top:17px; border-top:1px solid var(--app-border); }
.section-heading.compact { margin-bottom:10px; } .section-heading.compact h3 { margin:3px 0 0; font-size:16px; }
.poll-history-list { display:grid; gap:9px; }
.history-poll-card { border:1px solid var(--app-border); border-radius:13px; background:var(--app-surface-strong); padding:13px; }
.history-poll-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.history-status { padding:4px 7px; border-radius:999px; background:var(--app-green-soft); color:var(--app-green); font-size:8px; font-weight:700; }
.history-poll-head small { color:var(--app-muted); font-size:8px; } .history-poll-card h4 { margin:10px 0 12px; font-size:12px; }
.poll-total.compact { margin-top:8px; } .poll-total.compact strong { font-size:18px; }
.owner-poll-card.voted { border-color:color-mix(in srgb,var(--app-green) 30%,var(--app-border)); }
.schedule-page-card { overflow:hidden; } .schedule-toolbar { display:flex; justify-content:center; align-items:center; gap:14px; margin-bottom:12px; } .schedule-toolbar strong { min-width:180px; text-align:center; }
.settings-tabs { display:flex; gap:6px; padding:6px; margin-bottom:12px; overflow-x:auto; } .settings-tabs button { min-height:36px; padding:0 14px; border:0; border-radius:10px; background:transparent; color:var(--app-muted); cursor:pointer; white-space:nowrap; } .settings-tabs button.active { background:var(--app-blue-soft); color:var(--app-blue); }
.standalone-settings { margin-bottom:24px; }
.section-subcopy { margin:5px 0 0; color:var(--app-muted); font-size:10px; }
@media(max-width:900px){ .employee-directory{grid-template-columns:1fr;} .poll-summary-banner{align-items:flex-start;flex-direction:column;} }
@media(max-width:720px){ .market-preview-card.photo-card{grid-template-columns:42% 1fr;} .market-preview-card.photo-card .market-card-photo{min-height:145px;} .market-card .market-card-photo{aspect-ratio:1/1;} .pending-vote-badge{font-size:9px;} .schedule-page .subpage-head,.settings-page .subpage-head{align-items:flex-start;} }


/* v0.2.8 — shortcut icon, highlighted news, separate poll archive, chats */
.news-highlight-section {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--app-blue) 38%, var(--app-border));
  box-shadow: 0 14px 44px color-mix(in srgb, var(--app-blue) 10%, transparent);
}
.news-highlight-section::before {
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background:linear-gradient(180deg,var(--app-blue),#6cc9ff,var(--app-violet));
}
.news-highlight-section .section-heading { padding-left:4px; }
.new-pill { display:inline-flex; vertical-align:middle; margin-left:7px; padding:4px 7px; border-radius:999px; background:var(--app-blue-soft); color:var(--app-blue); font-size:8px; font-weight:800; letter-spacing:.02em; }
.featured-news-important { border-color: color-mix(in srgb,var(--app-blue) 28%,var(--app-border)); background:linear-gradient(135deg,color-mix(in srgb,var(--app-blue-soft) 85%,var(--app-surface-strong)),var(--app-surface-strong)); }

.archive-link-row { margin-top:16px; padding-top:15px; border-top:1px solid var(--app-border); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.archive-link-row span { color:var(--app-muted); font-size:10px; }
.archive-count,.chat-online { align-self:center; padding:7px 10px; border-radius:999px; border:1px solid var(--app-border); background:var(--app-surface-strong); color:var(--app-muted); font-size:9px; white-space:nowrap; }
.archive-filter-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.archive-filter-row select { min-height:38px; border:1px solid var(--app-border); border-radius:10px; background:var(--app-surface-strong); color:var(--app-text); padding:0 12px; }
.archive-full-list .history-poll-card { padding:18px; }

.nav-link[data-key="chat"]::before { content:"💬"; margin-right:5px; font-size:11px; }
.community-chat-card { padding:0; overflow:hidden; min-height:640px; display:grid; grid-template-rows:auto 1fr auto; }
.chat-notice { padding:14px 16px; border-bottom:1px solid var(--app-border); background:color-mix(in srgb,var(--app-blue-soft) 50%,var(--app-surface)); display:flex; flex-direction:column; gap:4px; }
.chat-notice strong { font-size:12px; } .chat-notice span { color:var(--app-muted); font-size:9px; line-height:1.45; }
.chat-message-list { min-height:420px; max-height:62vh; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.community-message { max-width:76%; border:1px solid var(--app-border); border-radius:14px 14px 14px 5px; padding:11px 12px; background:var(--app-surface-strong); }
.community-message.mine { margin-left:auto; border-radius:14px 14px 5px 14px; background:color-mix(in srgb,var(--app-blue-soft) 72%,var(--app-surface-strong)); border-color:color-mix(in srgb,var(--app-blue) 24%,var(--app-border)); }
.community-message.uk-message { border-left:3px solid var(--app-blue); }
.community-message-head { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.community-message-head strong { font-size:10px; } .community-message-head small { color:var(--app-muted); font-size:8px; } .community-message-head time { margin-left:auto; color:var(--app-muted); font-size:8px; }
.community-message-head span { padding:3px 6px; border-radius:999px; background:var(--app-blue); color:white; font-size:7px; font-weight:800; }
.community-message p { margin:7px 0 0; font-size:11px; line-height:1.5; }
.chat-compose { border-top:1px solid var(--app-border); padding:12px; display:grid; grid-template-columns:1fr auto; gap:9px; background:var(--app-surface); }
.chat-compose input { min-width:0; height:44px; border:1px solid var(--app-border); border-radius:11px; background:var(--app-surface-strong); color:var(--app-text); padding:0 13px; outline:none; }
.chat-compose input:focus { border-color:var(--app-blue); box-shadow:0 0 0 3px color-mix(in srgb,var(--app-blue) 10%,transparent); }
.chat-compose button { border:0; border-radius:10px; padding:0 16px; background:var(--app-blue); color:white; font-weight:700; cursor:pointer; }

.announcement-detail-modal { width:min(860px,calc(100% - 24px)); max-height:90vh; overflow:auto; border:1px solid var(--app-border); border-radius:18px; background:var(--app-surface); color:var(--app-text); box-shadow:0 28px 100px rgba(0,0,0,.35); padding:18px; }
.announcement-detail-content { display:grid; grid-template-columns:minmax(230px,.9fr) 1.1fr; gap:18px; margin-top:10px; }
.announcement-detail-media img { width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:14px; border:1px solid var(--app-border); }
.announcement-detail-copy { display:flex; flex-direction:column; align-items:flex-start; }
.announcement-detail-copy>span { color:var(--app-blue); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.announcement-detail-copy h3 { margin:9px 0 5px; font-size:23px; } .announcement-detail-copy b { font-size:19px; } .announcement-detail-copy p { color:var(--app-text); font-size:11px; line-height:1.6; margin:15px 0 8px; } .announcement-detail-copy small { color:var(--app-muted); font-size:9px; }
.listing-chat-block { margin-top:18px; border:1px solid var(--app-border); border-radius:14px; overflow:hidden; }
.listing-chat-title { padding:12px 13px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--app-border); }
.listing-chat-title strong { font-size:12px; } .listing-chat-title span { color:var(--app-muted); font-size:9px; }
.listing-chat-messages { max-height:240px; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
.chat-bubble { max-width:78%; align-self:flex-start; border:1px solid var(--app-border); background:var(--app-surface-strong); border-radius:12px 12px 12px 4px; padding:9px 10px; }
.chat-bubble.mine { align-self:flex-end; background:var(--app-blue-soft); border-color:color-mix(in srgb,var(--app-blue) 25%,var(--app-border)); border-radius:12px 12px 4px 12px; }
.chat-bubble strong { font-size:9px; } .chat-bubble p { margin:4px 0; font-size:10px; line-height:1.45; } .chat-bubble small { color:var(--app-muted); font-size:8px; }
.chat-empty { color:var(--app-muted); font-size:10px; line-height:1.5; text-align:center; padding:12px; }
.compact-chat-compose { padding:9px; }

@media(max-width:720px){
  .archive-link-row{align-items:stretch;flex-direction:column}.archive-link-row .ghost-button{width:100%}
  .community-chat-card{min-height:calc(100vh - 230px)} .chat-message-list{max-height:none;min-height:360px}.community-message{max-width:88%}
  .announcement-detail-modal{padding:13px}.announcement-detail-content{grid-template-columns:1fr}.announcement-detail-copy h3{font-size:20px}.listing-chat-title{align-items:flex-start;flex-direction:column}
  .chat-compose{grid-template-columns:1fr auto}.chat-compose button{padding:0 12px}
}


/* v0.2.8 — users, roles, permissions and owner registration modes */
.self-register-link { display:block; margin:13px auto 0; border:0; background:transparent; color:var(--text); opacity:.78; text-decoration:underline; cursor:pointer; font-size:12px; }
.settings-pane.hidden { display:none !important; }
.general-settings-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.users-settings-panel .section-heading { align-items:flex-start; }
.user-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:2px 0 16px; }
.user-summary-grid article { border:1px solid var(--app-border); border-radius:13px; background:var(--app-surface-strong); padding:13px; display:flex; flex-direction:column; }
.user-summary-grid article>span { color:var(--app-muted); font-size:9px; } .user-summary-grid article>strong { margin-top:5px; font-size:20px; } .user-summary-grid article>small { margin-top:4px; color:var(--app-muted); font-size:8px; }
.user-summary-grid article.pending { border-color:color-mix(in srgb,var(--app-orange) 30%,var(--app-border)); background:color-mix(in srgb,var(--app-orange-soft) 45%,var(--app-surface-strong)); }
.users-table-wrap { border:1px solid var(--app-border); border-radius:14px; overflow:hidden; }
.users-table { display:grid; grid-template-columns:1.1fr .9fr 2fr .7fr auto; gap:12px; align-items:center; }
.users-table-head { padding:10px 13px; background:color-mix(in srgb,var(--app-surface-strong) 74%,var(--app-blue-soft)); color:var(--app-muted); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.user-row { min-height:62px; padding:10px 13px; border-top:1px solid var(--app-border); background:var(--app-surface); font-size:10px; }
.user-row:first-child { border-top:0; } .user-row b { font-size:10px; } .user-row small { color:var(--app-muted); font-size:8px; }
.user-identity { min-width:0; display:flex; flex-direction:column; gap:4px; }.user-access-summary { color:var(--app-muted); line-height:1.45; }
.user-status { display:inline-flex; align-items:center; min-height:24px; width:max-content; padding:0 8px; border-radius:999px; font-size:8px; font-style:normal; font-weight:800; }
.user-status.active { background:var(--app-green-soft); color:var(--app-green); }.user-status.pending { background:var(--app-orange-soft); color:var(--app-orange); }
.pending-registrations-card { margin-top:14px; }.pending-registration-list { display:grid; gap:9px; }
.pending-registration-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:12px; border:1px solid var(--app-border); border-radius:13px; background:var(--app-surface-strong); padding:12px; }
.pending-registration-row>div { display:flex; flex-direction:column; gap:4px; }.pending-registration-row strong { font-size:11px; }.pending-registration-row small { color:var(--app-muted); font-size:9px; }
.registration-id { color:var(--app-blue); font-size:8px; font-weight:800; }.pending-registration-row.resolved { opacity:.72; }.approved-note { color:var(--app-green); font-size:9px; }
.empty-setting-state { border:1px dashed var(--app-border); border-radius:13px; padding:24px; text-align:center; display:flex; flex-direction:column; gap:6px; }.empty-setting-state strong { font-size:12px; }.empty-setting-state span { color:var(--app-muted); font-size:9px; }
.registration-mode-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.registration-mode-card { position:relative; border:1px solid var(--app-border); border-radius:15px; background:var(--app-surface-strong); padding:16px; display:grid; grid-template-columns:auto 1fr; gap:12px; cursor:pointer; }
.registration-mode-card:has(input:checked) { border-color:color-mix(in srgb,var(--app-blue) 55%,var(--app-border)); box-shadow:0 0 0 3px color-mix(in srgb,var(--app-blue) 9%,transparent); background:color-mix(in srgb,var(--app-blue-soft) 38%,var(--app-surface-strong)); }
.registration-mode-card input { position:absolute; opacity:0; }.mode-radio { width:20px; height:20px; border:2px solid var(--app-border); border-radius:50%; margin-top:1px; position:relative; }.registration-mode-card:has(input:checked) .mode-radio { border-color:var(--app-blue); }.registration-mode-card:has(input:checked) .mode-radio::after { content:""; position:absolute; inset:4px; border-radius:50%; background:var(--app-blue); }
.registration-mode-card div { display:flex; flex-direction:column; gap:6px; }.registration-mode-card strong { font-size:12px; }.registration-mode-card p { margin:0; color:var(--app-muted); font-size:9px; line-height:1.5; }.registration-mode-card small { color:var(--app-blue); font-size:8px; font-weight:700; }
.self-registration-options { margin-top:12px; border:1px solid var(--app-border); border-radius:13px; padding:13px; display:flex; align-items:center; gap:15px; flex-wrap:wrap; background:var(--app-surface); }.self-registration-options>div { margin-right:auto; }.self-registration-options strong { font-size:11px; }.self-registration-options p { margin:4px 0 0; color:var(--app-muted); font-size:8px; }.self-registration-options label { font-size:9px; }
.access-security-note { margin-top:12px; border:1px solid color-mix(in srgb,var(--app-green) 25%,var(--app-border)); border-radius:13px; padding:12px; display:flex; gap:10px; background:color-mix(in srgb,var(--app-green-soft) 36%,var(--app-surface-strong)); }.access-security-note>span { font-size:20px; }.access-security-note strong { font-size:11px; }.access-security-note p { margin:4px 0 0; color:var(--app-muted); font-size:9px; line-height:1.45; }.access-security-note.compact { margin-top:14px; }
.notification-settings-list { display:grid; gap:9px; }
.user-modal { max-height:90vh; overflow:auto; }.user-form-grid { margin-top:14px; }.user-config-section { margin-top:14px; border:1px solid var(--app-border); border-radius:14px; background:var(--app-surface); padding:14px; }.user-config-title { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }.user-config-title strong { font-size:12px; }.user-config-title p { margin:4px 0 0; color:var(--app-muted); font-size:9px; line-height:1.45; }.required-badge { flex:0 0 auto; padding:4px 7px; border-radius:999px; background:var(--app-orange-soft); color:var(--app-orange); font-size:8px; font-weight:800; }
.object-picker-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }.object-picker-grid label { min-height:42px; border:1px solid var(--app-border); border-radius:10px; padding:0 10px; display:flex; align-items:center; gap:8px; cursor:pointer; background:var(--app-surface-strong); }.object-picker-grid label:has(input:checked) { border-color:var(--app-blue); background:var(--app-blue-soft); }.object-picker-grid input { accent-color:var(--app-blue); }.object-picker-grid span { font-size:9px; }
.owner-fixed-rights { margin-top:11px; display:flex; flex-direction:column; gap:4px; padding:10px 11px; border-radius:10px; background:color-mix(in srgb,var(--app-blue-soft) 50%,var(--app-surface-strong)); }.owner-fixed-rights strong { font-size:10px; }.owner-fixed-rights span { color:var(--app-muted); font-size:8px; line-height:1.45; }
.permissions-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }.permissions-grid label { min-height:54px; border:1px solid var(--app-border); border-radius:10px; padding:9px 10px; display:flex; align-items:flex-start; gap:8px; cursor:pointer; background:var(--app-surface-strong); }.permissions-grid label:has(input:checked) { border-color:color-mix(in srgb,var(--app-blue) 50%,var(--app-border)); background:var(--app-blue-soft); }.permissions-grid input { margin-top:2px; accent-color:var(--app-blue); }.permissions-grid span { display:flex; flex-direction:column; gap:3px; }.permissions-grid strong { font-size:9px; }.permissions-grid small { color:var(--app-muted); font-size:8px; }
.user-form-error { min-height:18px; margin-top:8px; color:#e25b67; font-size:9px; }.self-reg-intro { margin:13px 0 0; color:var(--app-muted); font-size:10px; line-height:1.55; }
@media(max-width:1000px){.user-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.users-table{grid-template-columns:1fr .8fr 1.4fr .7fr auto}.registration-mode-grid{grid-template-columns:1fr}.object-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:720px){.user-summary-grid{grid-template-columns:1fr 1fr}.users-table-head{display:none}.user-row{grid-template-columns:1fr auto; gap:7px 10px}.user-row>span:nth-child(2),.user-row>span:nth-child(3){grid-column:1/-1}.user-row>span:nth-child(4){grid-column:1}.user-row>span:nth-child(5){grid-column:2;grid-row:1}.pending-registration-row{grid-template-columns:1fr}.pending-registration-row .ghost-button{width:100%}.object-picker-grid,.permissions-grid{grid-template-columns:1fr}.general-settings-grid{grid-template-columns:1fr}.settings-tabs{scrollbar-width:none}.self-registration-options{align-items:flex-start;flex-direction:column}.user-config-title{flex-direction:column}.user-config-title .text-button{align-self:flex-start}}

/* v0.2.9 — users, objects, QR and storage */
.admin-filter-bar{display:flex;gap:9px;align-items:center;margin:0 0 12px;flex-wrap:wrap}.admin-filter-bar select,.admin-search{min-height:38px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface-strong);color:var(--app-text)}.admin-filter-bar select{padding:0 34px 0 11px}.admin-search{display:flex;align-items:center;gap:8px;padding:0 11px;flex:1;min-width:230px}.admin-search span{color:var(--app-muted);font-size:18px}.admin-search input{width:100%;border:0;outline:0;background:transparent;color:var(--app-text)}
.row-actions{display:flex;justify-content:flex-end}.row-actions .text-button{white-space:nowrap}
.object-summary-grid,.qr-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 14px}.object-summary-grid article,.qr-summary article{border:1px solid var(--app-border);border-radius:13px;background:var(--app-surface-strong);padding:14px;display:flex;flex-direction:column;gap:4px}.object-summary-grid span,.qr-summary span{font-size:9px;color:var(--app-muted)}.object-summary-grid strong,.qr-summary strong{font-size:21px}.object-summary-grid small,.qr-summary small{font-size:8px;color:var(--app-muted)}
.inner-segment{display:inline-flex;padding:4px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface-strong);margin:0 0 12px}.inner-segment button{border:0;background:transparent;color:var(--app-muted);min-height:34px;padding:0 16px;border-radius:9px;cursor:pointer}.inner-segment button.active{background:var(--app-blue);color:white}
.registry-table-wrap{border:1px solid var(--app-border);border-radius:14px;overflow:hidden}.registry-table{display:grid;grid-template-columns:1.1fr 1fr 1fr auto;gap:12px;align-items:center;padding:12px 14px}.registry-table-head{background:color-mix(in srgb,var(--app-surface-strong) 75%,var(--app-blue-soft));font-size:8px;text-transform:uppercase;letter-spacing:.07em;color:var(--app-muted);font-weight:800}.registry-row{border-top:1px solid var(--app-border);background:var(--app-surface-strong)}.registry-row>span{display:flex;flex-direction:column;gap:3px;font-size:9px}.registry-row small{font-size:8px;color:var(--app-muted)}.allocation{display:inline-flex!important;width:max-content;padding:4px 8px;border-radius:999px;font-size:8px!important;font-weight:700}.allocation.assigned{background:color-mix(in srgb,#2ecc71 15%,transparent);color:#2dbd72}.allocation.free{background:var(--app-blue-soft);color:var(--app-blue)}
.qr-location-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.qr-location-card{border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface-strong);padding:12px;display:grid;grid-template-columns:88px 1fr auto;gap:13px;align-items:center}.qr-location-card img{width:88px;height:88px;border-radius:9px;background:white;padding:4px}.qr-location-card>div:nth-child(2){display:flex;flex-direction:column;gap:5px}.qr-location-card>div:nth-child(2)>span{font-size:8px;color:var(--app-blue);font-weight:800;text-transform:uppercase}.qr-location-card strong{font-size:11px}.qr-location-card small{font-size:8px;color:var(--app-muted)}.qr-location-card code{font-size:8px;color:var(--app-muted);word-break:break-all}.qr-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch}.qr-actions .ghost-button{display:inline-flex;align-items:center;text-decoration:none;text-align:center;justify-content:center}.future-map{border-style:dashed!important}
.storage-form{display:grid;grid-template-columns:1fr;gap:12px}.storage-form label{display:flex;flex-direction:column;gap:5px}.storage-form label>span{font-size:10px;font-weight:700}.storage-form input{min-height:42px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface-strong);color:var(--app-text);padding:0 12px}.storage-form small{font-size:8px;color:var(--app-muted)}.storage-status{min-height:38px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface-strong);padding:10px 12px;font-size:9px;color:var(--app-muted)}.storage-ok{color:#2dbd72}.storage-warn{color:var(--app-orange)}
.picker-loading{grid-column:1/-1;color:var(--app-muted);font-size:9px;padding:10px}.object-picker-grid label small{font-size:7px;color:var(--app-orange)}
.qr-request-overlay{position:fixed;inset:0;z-index:150;background:rgba(3,8,18,.72);display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(7px)}.qr-request-overlay.hidden{display:none}.qr-request-shell{width:min(620px,100%);padding:22px}.qr-request-head{display:flex;gap:16px;justify-content:space-between;align-items:flex-start}.qr-request-head h2{margin:4px 0;font-size:24px}.qr-request-head p{margin:0;color:var(--app-muted)}.qr-request-form{display:flex;flex-direction:column;gap:12px;margin-top:18px}.qr-request-form label{display:flex;flex-direction:column;gap:6px}.qr-request-form label>span{font-size:10px;font-weight:800}.qr-request-form select,.qr-request-form textarea{border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface-strong);color:var(--app-text);padding:11px;outline:0}.file-drop{border:1px dashed var(--app-border);border-radius:12px;padding:13px;background:var(--app-surface-strong)}.file-drop input{color:var(--app-muted)}.file-drop small{font-size:8px;color:var(--app-muted)}.success-message{color:#2dbd72;font-weight:700}

@media(max-width:900px){.qr-location-list{grid-template-columns:1fr}.object-summary-grid,.qr-summary{grid-template-columns:1fr 1fr}.registry-table{grid-template-columns:1fr 1fr}.registry-table-head{display:none}.registry-row>span:nth-child(3){grid-column:1}.registry-row>span:nth-child(4){grid-column:2;grid-row:1;align-items:flex-end}}
@media(max-width:720px){.admin-filter-bar{align-items:stretch}.admin-search{min-width:100%;width:100%}.admin-filter-bar select{flex:1}.object-summary-grid,.qr-summary{grid-template-columns:1fr}.qr-location-card{grid-template-columns:74px 1fr}.qr-location-card img{width:74px;height:74px}.qr-actions{grid-column:1/-1;flex-direction:row}.qr-actions>*{flex:1}.registry-table{grid-template-columns:1fr auto}.registry-row>span:nth-child(2),.registry-row>span:nth-child(3){grid-column:1/-1}.qr-request-overlay{padding:10px;align-items:flex-end}.qr-request-shell{max-height:90vh;overflow:auto;border-radius:20px 20px 0 0}}


/* ==============================
   UK VTR24 v0.2.12 — QR details and real requests
   ============================== */
.qr-location-details { display:block; margin-top:5px; line-height:1.55; color:var(--app-muted); }
.qr-description-hint { margin-top:10px; padding:10px 12px; border-radius:10px; background:rgba(51,151,255,.08); color:var(--app-muted); font-size:12px; line-height:1.45; }
.real-request-row { border-left:3px solid #39a7ff; }
.real-request-row .request-id { color:#39a7ff; font-weight:800; }
.real-request-row .assignee { display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
.real-request-row .assignee small { opacity:.65; font-size:10px; }
@media(max-width:720px){
  .qr-location-details{font-size:11px;}
  .real-request-row .assignee{align-items:flex-start;}
}


/* v0.2.12 — dedicated requests and announcements pages */
.single-column-content{grid-template-columns:1fr!important}.requests-page{display:block}.requests-toolbar{display:grid;grid-template-columns:minmax(300px,1fr) 180px 190px auto;gap:10px;align-items:center;padding:13px;margin-bottom:12px}.requests-toolbar select{min-height:38px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface-strong);color:var(--app-text);padding:0 32px 0 11px}.requests-full-card{padding:0;overflow:hidden}.requests-full-list{display:grid}.requests-full-list .request-row{border:0;border-bottom:1px solid var(--app-border);border-radius:0;padding:15px 16px}.requests-full-list .request-row:last-child{border-bottom:0}.requests-empty{display:flex;flex-direction:column;gap:5px;padding:28px;color:var(--app-muted)}.requests-empty strong{color:var(--app-text)}.request-detail-modal{width:min(820px,100%);max-height:min(86vh,900px);overflow:auto;border:1px solid var(--app-border);border-radius:18px;background:var(--app-surface);box-shadow:0 24px 70px rgba(0,0,0,.28);padding:20px}.request-detail-status{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.request-detail-status small{color:var(--app-muted)}.request-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.request-detail-grid>div,.request-detail-description{border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface-strong);padding:12px;display:flex;flex-direction:column;gap:5px}.request-detail-grid span,.request-detail-description span{font-size:9px;color:var(--app-muted);text-transform:uppercase;letter-spacing:.05em}.request-detail-grid strong{font-size:12px}.request-detail-description{margin:10px 0 14px}.request-detail-description p{margin:0;line-height:1.5}.request-photo-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:9px}.request-photo-gallery a{display:block;border:1px solid var(--app-border);border-radius:12px;overflow:hidden;background:var(--app-surface-strong);aspect-ratio:4/3}.request-photo-gallery img{width:100%;height:100%;object-fit:cover;display:block}.request-photo-loading,.request-no-photos{min-height:90px;border:1px dashed var(--app-border);border-radius:10px;display:grid;place-items:center;color:var(--app-muted);font-size:9px}.real-request-row{cursor:pointer}.real-request-row:hover{background:color-mix(in srgb,var(--app-blue-soft) 50%,var(--app-surface-strong))}
@media(max-width:900px){.requests-toolbar{grid-template-columns:1fr 1fr}.requests-toolbar .admin-search{grid-column:1/-1}.requestsResultCount{grid-column:1/-1}.request-photo-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.requests-toolbar{grid-template-columns:1fr}.requests-toolbar .admin-search{grid-column:auto}.requests-toolbar select{width:100%}.requests-full-list .request-row{padding:13px}.request-detail-modal{max-height:90vh;border-radius:20px 20px 0 0}.request-detail-grid{grid-template-columns:1fr}.request-photo-gallery{grid-template-columns:1fr 1fr}}


/* v0.2.13 — request workflow and simplified quick actions */
.quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.request-timeline { display:grid; gap:10px; margin:10px 0 16px; }
.request-timeline-item { position:relative; display:grid; grid-template-columns:16px 1fr; gap:10px; padding:10px 12px; border:1px solid var(--app-border); border-radius:12px; background:var(--app-surface-strong); }
.request-timeline-dot { width:10px; height:10px; border-radius:999px; margin-top:4px; background:var(--app-blue); box-shadow:0 0 0 4px color-mix(in srgb,var(--app-blue) 14%,transparent); }
.request-timeline-item.status .request-timeline-dot { background:var(--app-green); }
.request-timeline-item.eta .request-timeline-dot { background:var(--app-orange); }
.request-timeline-item.assignee .request-timeline-dot { background:#8b6ff7; }
.request-timeline-item strong { display:block; font-size:12px; line-height:1.45; }
.request-timeline-item p { margin:3px 0 0; color:var(--app-muted); font-size:10px; }
.request-timeline-item time { display:block; margin-top:3px; color:var(--app-muted); font-size:9px; }
.request-timeline-empty { margin:10px 0 16px; padding:14px; border:1px dashed var(--app-border); border-radius:12px; color:var(--app-muted); }

.request-management { margin-top:18px; padding-top:16px; border-top:1px solid var(--app-border); }
.request-management-title { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.request-management-title strong { font-size:14px; }
.request-management-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.request-management-grid label { display:flex; flex-direction:column; gap:6px; }
.request-management-grid label>span { font-size:9px; color:var(--app-muted); text-transform:uppercase; letter-spacing:.05em; }
.request-management-grid input,.request-management-grid select,.request-management-grid textarea { width:100%; border:1px solid var(--app-border); border-radius:10px; background:var(--app-surface-strong); color:var(--app-text); padding:10px 11px; font:inherit; }
.request-management-grid textarea { resize:vertical; min-height:84px; }
.request-management-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
.request-photos-section { margin-top:12px; }
.owner-real-request { text-align:left; }

@media(max-width:720px){
  .quick-grid { grid-template-columns:1fr 1fr; }
  .request-management-grid { grid-template-columns:1fr; }
  .request-management-grid .form-span-2 { grid-column:auto; }
  .request-management-actions { flex-direction:column; }
  .request-management-actions button { width:100%; }
}

/* v0.2.14 — owner login label, owner request edit/delete, guest QR */
.login-secondary-actions{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.login-secondary-actions .self-register-link{margin:0}
.guest-qr-link{border:1px solid rgba(93,174,255,.42);border-radius:10px;background:rgba(38,135,232,.12);color:inherit;padding:9px 13px;cursor:pointer;font-weight:700;font-size:12px}
.guest-qr-link:hover{background:rgba(38,135,232,.2)}
.owner-request-edit{margin-top:18px;padding-top:16px;border-top:1px solid var(--app-border)}
.owner-request-edit-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px}
.danger-button{border:1px solid color-mix(in srgb,#d9475f 55%,var(--app-border));border-radius:10px;background:color-mix(in srgb,#d9475f 10%,var(--app-surface));color:#d9475f;padding:10px 14px;font:inherit;font-weight:700;cursor:pointer}
.danger-button:hover{background:color-mix(in srgb,#d9475f 16%,var(--app-surface))}
@media(max-width:720px){.owner-request-edit-actions{flex-direction:column-reverse}.owner-request-edit-actions button{width:100%}.login-secondary-actions{gap:7px}.guest-qr-link{width:100%}}


/* v0.2.15 — personnel page, monthly schedule, public owner contacts */
.personnel-tabs{display:inline-flex;gap:5px;padding:5px;margin-bottom:14px;border-radius:14px;}
.personnel-tab-button{border:0;background:transparent;color:var(--app-muted);padding:10px 18px;border-radius:10px;font:inherit;font-weight:700;cursor:pointer;}
.personnel-tab-button.active{background:var(--app-blue-soft);color:var(--app-blue);}
.staff-manage-list{display:grid;gap:10px;margin-top:14px;}
.staff-manage-card{border:1px solid var(--app-border);background:var(--app-surface-strong);border-radius:14px;padding:14px;display:grid;grid-template-columns:auto minmax(260px,1fr) auto auto;gap:14px;align-items:center;}
.staff-main{min-width:0;display:flex;flex-direction:column;gap:4px;}.staff-main strong{font-size:12px}.staff-main small,.staff-main>span{font-size:9px;color:var(--app-muted);line-height:1.4}.staff-contact-line{display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}.staff-contact-line a{color:var(--app-blue);font-size:10px;text-decoration:none}
.staff-public-toggle{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--app-muted);white-space:nowrap}.staff-public-toggle input{accent-color:var(--app-blue);width:16px;height:16px}.staff-card-actions{display:flex;gap:7px}.danger-link{border:0;background:transparent;color:#db5c65;cursor:pointer;font:inherit;font-size:10px;padding:8px}
.public-contact-check{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px!important;border:1px solid var(--app-border);border-radius:12px;padding:12px;background:var(--app-surface)}.public-contact-check input{width:18px!important;min-height:auto!important;height:18px;margin-top:2px;accent-color:var(--app-blue)}.public-contact-check>span{display:flex;flex-direction:column;gap:3px}.public-contact-check strong{font-size:10px;color:var(--app-text)}.public-contact-check small{font-size:9px;color:var(--app-muted)}
.month-schedule-wrap{overflow:auto;border:1px solid var(--app-border);border-radius:14px;max-width:100%;}
.month-schedule{min-width:max-content;background:var(--app-surface-strong)}
.month-row{display:grid;grid-template-columns:220px repeat(var(--days),68px);border-bottom:1px solid var(--app-border)}.month-row:last-child{border-bottom:0}.month-row>*{border-right:1px solid var(--app-border)}.month-row>*:last-child{border-right:0}
.month-staff-sticky{position:sticky;left:0;z-index:2;background:var(--app-surface-strong);padding:10px 12px;display:flex;flex-direction:column;justify-content:center}.month-head .month-staff-sticky{z-index:4;background:color-mix(in srgb,var(--app-blue-soft) 55%,var(--app-surface-strong));font-size:10px;color:var(--app-muted)}.month-staff-sticky strong{font-size:10px}.month-staff-sticky small{font-size:8px;color:var(--app-muted);margin-top:3px}
.month-day-head{padding:7px 3px;text-align:center;background:color-mix(in srgb,var(--app-blue-soft) 55%,var(--app-surface-strong));display:flex;flex-direction:column}.month-day-head strong{font-size:10px}.month-day-head small{font-size:8px;color:var(--app-muted)}.month-day-head.weekend{background:color-mix(in srgb,#d89b40 9%,var(--app-surface-strong))}
.month-shift{border:0;background:transparent;color:var(--app-text);font:inherit;font-size:8px;cursor:pointer;min-height:52px;padding:4px}.month-shift.on{background:color-mix(in srgb,#2fbf71 7%,transparent)}.month-shift.duty{background:color-mix(in srgb,#e1a235 12%,transparent);color:#b97812}.month-shift.off{color:var(--app-muted)}.month-shift:hover{outline:2px solid color-mix(in srgb,var(--app-blue) 35%,transparent);outline-offset:-2px}
.contact-note-text{margin-top:7px;font-size:9px;color:var(--app-muted);line-height:1.45}
@media(max-width:900px){.staff-manage-card{grid-template-columns:auto 1fr}.staff-public-toggle,.staff-card-actions{grid-column:2}.staff-card-actions{justify-content:flex-start}.month-row{grid-template-columns:180px repeat(var(--days),62px)}}
@media(max-width:640px){.personnel-tabs{display:flex;width:100%}.personnel-tab-button{flex:1;padding:9px 10px}.employee-summary{grid-template-columns:1fr 1fr}.staff-manage-card{grid-template-columns:auto 1fr;padding:11px;gap:10px}.staff-public-toggle{white-space:normal}.month-row{grid-template-columns:150px repeat(var(--days),58px)}}


/* v0.2.17 — prominent guest QR entry and removable photo previews */
.guest-qr-link{
  border:1px solid #f0b62e;
  background:linear-gradient(180deg,#ffd861 0%,#f4b52d 100%);
  color:#2b1b00;
  box-shadow:0 8px 24px rgba(244,181,45,.26),0 0 0 1px rgba(255,226,130,.18) inset;
  padding:11px 17px;
  font-weight:900;
}
.guest-qr-link:hover{background:linear-gradient(180deg,#ffe27b 0%,#ffc744 100%);color:#201400;transform:translateY(-1px)}
.guest-qr-link:focus-visible{outline:3px solid rgba(255,211,88,.45);outline-offset:3px}
.qr-file-input{display:none}
.qr-file-actions{display:flex;align-items:center;gap:10px;margin:7px 0 10px}
.qr-add-photo-button{border:1px solid color-mix(in srgb,var(--app-blue) 55%,var(--app-border));border-radius:10px;background:var(--app-blue-soft);color:var(--app-blue);padding:9px 13px;font:inherit;font-weight:800;cursor:pointer}
.qr-add-photo-button:hover{filter:brightness(1.06)}
.qr-photo-count{font-size:9px;color:var(--app-muted)}
.qr-photo-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:2px 0 10px}
.qr-photo-empty{grid-column:1/-1;border:1px dashed var(--app-border);border-radius:10px;padding:13px;color:var(--app-muted);font-size:9px;text-align:center}
.qr-photo-item{position:relative;min-width:0;border:1px solid var(--app-border);border-radius:11px;overflow:hidden;background:var(--app-surface);margin:0}
.qr-photo-item img{width:100%;aspect-ratio:1.25/1;object-fit:cover;display:block}
.qr-photo-item small{display:block;padding:6px 7px;font-size:8px;color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-remove-photo{position:absolute;top:6px;right:6px;width:28px;height:28px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(12,18,30,.82);color:white;font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.28)}
.qr-remove-photo:hover{background:#c63f50}
@media(max-width:720px){.guest-qr-link{width:100%;font-size:13px;padding:12px 14px}.qr-photo-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.qr-file-actions{justify-content:space-between}.qr-add-photo-button{padding:10px 13px}}

/* v0.2.18 — scalable object assignment, owner settings, protected deletes */
.object-assign-search{display:flex;flex-direction:column;gap:8px;margin:12px 0}.object-assign-search>span{font-size:12px;font-weight:700;color:var(--app-muted)}.object-assign-search input{width:100%;min-height:44px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface-strong);color:var(--app-text);padding:0 14px;outline:none}.object-assign-search input:focus{border-color:var(--app-blue)}
.searchable-object-picker{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow:auto;padding:6px 2px}.search-object-result{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;border:1px solid var(--app-border);background:var(--app-surface-strong);color:var(--app-text);border-radius:12px;padding:11px 14px;cursor:pointer}.search-object-result:hover,.search-object-result.selected{border-color:var(--app-blue);background:var(--app-blue-soft)}.search-object-result span{display:flex;flex-direction:column;gap:3px}.search-object-result small{color:var(--app-muted);font-size:11px}.search-object-result>b{font-size:20px;color:var(--app-blue)}
.selected-object-chips{display:flex;gap:8px;flex-wrap:wrap;min-height:32px;margin-bottom:8px}.selected-object-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(25,132,255,.28);background:rgba(25,132,255,.09);color:var(--app-text);border-radius:999px;padding:7px 10px;cursor:pointer}.selected-object-chip b{color:#d9534f;font-size:16px}.selected-object-empty{color:var(--app-muted);font-size:12px;padding:6px 0}
.object-filter-bar{grid-template-columns:minmax(240px,1.8fr) minmax(130px,.7fr) minmax(170px,.9fr) minmax(150px,.8fr)}
.danger-text{color:#d74848!important}.row-actions{display:flex!important;gap:10px!important;justify-content:flex-end!important;align-items:center!important;flex-wrap:wrap}
.destructive-permissions-list{display:grid;gap:14px;margin-top:16px}.destructive-user-card{border:1px solid var(--app-border);border-radius:16px;padding:16px;background:var(--app-surface-strong)}.destructive-user-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px}.destructive-user-head>div{display:flex;flex-direction:column;gap:3px}.destructive-user-head small{color:var(--app-muted)}.destructive-action-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.destructive-action-grid label{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--app-border);border-radius:12px;padding:12px;cursor:pointer}.destructive-action-grid label>span{display:flex;flex-direction:column;gap:3px}.destructive-action-grid small{color:var(--app-muted);font-size:11px}
.owner-settings-page{max-width:1180px;margin:0 auto;padding:28px 20px 60px}.owner-password-card{max-width:760px;margin:0 auto}.owner-password-form{display:grid;gap:14px;margin-top:12px}.owner-password-form label{display:flex;flex-direction:column;gap:7px}.owner-password-form label>span{font-size:12px;font-weight:700;color:var(--app-muted)}.owner-password-form input{min-height:46px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface-strong);color:var(--app-text);padding:0 14px}.owner-password-form .save-modal-button{justify-self:start;min-width:190px}
@media(max-width:900px){.object-filter-bar{grid-template-columns:1fr 1fr}.destructive-action-grid{grid-template-columns:1fr}.searchable-object-picker{max-height:260px}}
@media(max-width:620px){.object-filter-bar{grid-template-columns:1fr}.owner-settings-page{padding:16px 12px 40px}.selected-object-chip{max-width:100%}.selected-object-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* v0.2.19 — settings gear, delegated rights and reversible QR controls */
.settings-gear-action {
  font-size: 18px;
  line-height: 1;
}
.qr-master-control {
  margin: 12px 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--app-border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: color-mix(in srgb, var(--app-card) 94%, transparent);
}
.qr-master-control > div { display: grid; gap: 4px; }
.qr-master-control strong { font-size: 15px; }
.qr-master-control small { color: var(--app-muted); max-width: 760px; line-height: 1.45; }
.qr-master-control.qr-system-off {
  border-color: rgba(245, 158, 11, .48);
  background: rgba(245, 158, 11, .08);
}
.danger-outline { border-color: rgba(239,68,68,.36) !important; color: #dc2626 !important; }
.restore-action { border-color: rgba(16,185,129,.38) !important; color: #059669 !important; }
.restore-text { color: #059669 !important; }
.qr-location-card.qr-disabled { opacity: .68; border-style: dashed; }
.qr-location-card.qr-disabled img { filter: grayscale(1); }
.qr-state-badge { display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: none; }
.qr-state-badge.on { background: rgba(16,185,129,.12); color: #059669; }
.qr-state-badge.off { background: rgba(245,158,11,.14); color: #b45309; }
.admin-delegated-grid { margin-top: 4px; }
.owner-qr-create-card { margin-top: 18px; }
@media (max-width: 760px) {
  .qr-master-control { align-items: stretch; flex-direction: column; }
  .qr-master-control button { width: 100%; }
  .settings-gear-action { order: 1; }
}

/* v0.2.20 — live date, schedule-driven team and working quick actions */
.team-today-empty{width:100%;padding:14px;border:1px dashed var(--app-border);border-radius:12px;display:flex!important;flex-direction:column;gap:4px;align-items:flex-start!important}.team-today-empty strong{font-size:12px}.team-today-empty small{font-size:9px;color:var(--app-muted)}
.presence.duty{color:var(--app-orange);background:var(--app-orange-soft);padding:4px 7px;border-radius:999px}.real-work-card{border-color:color-mix(in srgb,var(--app-blue) 28%,var(--app-border))!important}.modal-help-text{margin:12px 0 0;color:var(--app-muted);font-size:10px;line-height:1.45}.storage-status{display:flex;flex-direction:column;gap:4px}.storage-status span{font-size:9px;color:var(--app-muted)}

/* v0.2.21: important planned works, news publishing and notifications */
.important-work-check{display:flex!important;flex-direction:row!important;align-items:flex-start;gap:10px!important;border:1px solid color-mix(in srgb,var(--app-orange) 45%,var(--app-border));border-radius:12px;padding:12px;background:color-mix(in srgb,var(--app-orange-soft) 55%,var(--app-surface))}.important-work-check input{width:18px!important;height:18px!important;min-height:auto!important;margin-top:2px;accent-color:var(--app-orange)}.important-work-check>span{display:flex;flex-direction:column;gap:3px}.important-work-check strong{font-size:10px;color:var(--app-text)}.important-work-check small{font-size:9px;color:var(--app-muted)}
.work-card-image{grid-area:icon;width:64px;height:64px;border-radius:10px;object-fit:cover;background:var(--app-blue-soft);border:1px solid var(--app-border)}
.important-work-card{border-color:color-mix(in srgb,var(--app-orange) 55%,var(--app-border))!important;background:linear-gradient(135deg,color-mix(in srgb,var(--app-orange-soft) 34%,var(--app-surface-strong)),var(--app-surface-strong))!important}
.important-inline-badge{display:inline-flex;margin-left:7px;padding:2px 6px;border-radius:999px;background:var(--app-orange-soft);color:var(--app-orange);font-size:7px;font-style:normal;text-transform:uppercase;letter-spacing:.05em;vertical-align:middle}
.notifications-page{max-width:1200px;margin:0 auto;padding:26px 24px 60px}.notifications-list-panel{margin-top:18px}.notification-count-label{font-size:9px;color:var(--app-muted)}
.important-notification-list{display:grid;gap:12px;margin-top:12px}.important-notification-card{display:grid;grid-template-columns:160px 1fr;gap:16px;padding:14px;border:1px solid color-mix(in srgb,var(--app-orange) 35%,var(--app-border));border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--app-orange-soft) 22%,var(--app-surface-strong)),var(--app-surface-strong))}.notification-image-wrap{width:160px;height:110px;border-radius:11px;overflow:hidden;background:var(--app-surface);border:1px solid var(--app-border)}.notification-image-wrap:empty{display:none}.notification-image-wrap img{width:100%;height:100%;object-fit:cover;display:block}.important-notification-copy{display:flex;flex-direction:column;gap:7px;min-width:0}.important-notification-copy>div{display:flex;justify-content:space-between;gap:12px;align-items:center}.important-notification-copy time,.important-notification-copy small{font-size:9px;color:var(--app-muted)}.important-notification-copy h3{margin:0;font-size:16px}.important-notification-copy p{margin:0;color:var(--app-muted);font-size:11px;line-height:1.55}.real-news-item small{white-space:normal;line-height:1.4}
@media(max-width:700px){.notifications-page{padding:16px 12px 44px}.important-notification-card{grid-template-columns:1fr}.notification-image-wrap{width:100%;height:180px}.important-notification-copy>div{align-items:flex-start;flex-direction:column;gap:6px}.work-card-image{width:58px;height:58px}}


/* v0.2.22: session bootstrap without login-page flash */
.auth-boot{display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;flex-direction:column;gap:9px;background:var(--app-bg);color:var(--app-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
html.auth-pending .auth-boot{display:flex}
html.auth-pending .page-shell{visibility:hidden}
.auth-boot>strong{font-size:20px;letter-spacing:.18em}
.auth-boot>small{color:var(--text-soft);font-size:12px}
.auth-boot-mark{height:44px;display:flex;align-items:flex-end;gap:4px;margin-bottom:4px}
.auth-boot-mark span{display:block;width:4px;border:2px solid currentColor;border-bottom:0;transform:skewY(-28deg)}
.auth-boot-mark span:nth-child(1){height:22px}.auth-boot-mark span:nth-child(2){height:38px}.auth-boot-mark span:nth-child(3){height:29px}

/* v0.2.23 — aligned user registry, notification management, note filter */
.users-table.users-table-head,
.users-table.user-row {
  grid-template-columns: minmax(180px,1.15fr) minmax(150px,.9fr) minmax(360px,2.2fr) minmax(100px,.65fr) minmax(180px,.95fr);
  column-gap: 18px;
}
.users-table-head > span,
.user-row > span { min-width:0; }
.user-row > span:first-child,
.user-row > span:nth-child(2),
.user-row > span:nth-child(3),
.user-row > span:nth-child(4) {
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  line-height:1.35;
}
.user-row > span:first-child strong,
.user-row > span:nth-child(2) strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-row > span:nth-child(3) { color:var(--app-muted); }
.users-table-head > span:last-child { text-align:right; }
.user-row .row-actions { min-width:170px; }
.user-row { padding-block:13px; }

.object-filter-bar {
  grid-template-columns: minmax(280px,1.7fr) minmax(125px,.65fr) minmax(170px,.8fr) minmax(170px,.85fr) minmax(150px,.75fr);
}

.notification-admin-actions {
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:13px;
  padding-top:11px;
  border-top:1px solid var(--app-border);
}
.notification-admin-actions .text-button { padding:0; }
.important-notification-card { align-items:stretch; }
.important-notification-copy { min-width:0; }

.request-management-actions { flex-wrap:wrap; }
.request-management-actions .danger-button { margin-right:auto; }

@media (max-width:1100px) {
  .users-table.users-table-head,
  .users-table.user-row { grid-template-columns:minmax(150px,1fr) minmax(130px,.8fr) minmax(260px,1.6fr) 90px minmax(150px,.8fr); column-gap:12px; }
  .object-filter-bar { grid-template-columns:1.5fr 1fr 1fr; }
  .object-filter-bar > :nth-child(4), .object-filter-bar > :nth-child(5) { min-width:0; }
}
@media (max-width:720px) {
  .users-table.user-row { grid-template-columns:1fr auto; }
  .user-row .row-actions { min-width:0; }
  .object-filter-bar { grid-template-columns:1fr; }
  .request-management-actions .danger-button { width:100%; margin-right:0; }
}

/* v0.2.24 — work calendar, business center, controlled chat, information page */
.object-summary-grid-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.object-kind-tabs{width:max-content;max-width:100%;overflow:auto}
.object-kind-tabs .object-kind-tab{min-width:130px;white-space:nowrap}

.work-calendar-panel{padding:18px}
.work-calendar-toolbar{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:14px}
.work-calendar-toolbar strong{min-width:190px;text-align:center;font-size:16px;text-transform:capitalize}
.work-calendar-weekdays,.work-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.work-calendar-weekdays{border:1px solid var(--app-border);border-bottom:0;border-radius:14px 14px 0 0;overflow:hidden;background:var(--app-surface-strong)}
.work-calendar-weekdays span{padding:9px;text-align:center;color:var(--app-muted);font-size:9px;font-weight:800;border-right:1px solid var(--app-border)}
.work-calendar-weekdays span:last-child{border-right:0}
.work-calendar-grid{border:1px solid var(--app-border);border-radius:0 0 14px 14px;overflow:hidden;background:var(--app-border);gap:1px}
.work-calendar-day{border:0;background:var(--app-surface);color:var(--app-text);min-height:112px;padding:8px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:6px;transition:.15s ease}
.work-calendar-day:hover{background:var(--app-blue-soft)}
.work-calendar-day.muted{opacity:.48}
.work-calendar-day.today{box-shadow:inset 0 0 0 2px var(--app-blue)}
.calendar-day-number{font-weight:900;font-size:12px}
.calendar-day-works{display:flex;flex-direction:column;gap:4px;min-width:0}
.calendar-day-works small{font-size:8px;line-height:1.25;padding:4px 5px;border-radius:6px;background:var(--app-blue-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-day-works small.important{background:color-mix(in srgb,#f59e0b 18%,var(--app-surface));color:var(--app-text)}
.calendar-day-works em{font-size:8px;color:var(--app-muted);font-style:normal}

.information-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.info-card{min-height:210px}
.info-card p,.info-card li{font-size:11px;line-height:1.65;color:var(--app-muted)}
.info-card h2{margin:6px 0 10px}
.info-card ul{margin:8px 0 0 18px;padding:0}
.info-current{background:linear-gradient(135deg,color-mix(in srgb,#22c55e 8%,var(--app-surface)),var(--app-surface))}
.info-chat{background:linear-gradient(135deg,color-mix(in srgb,var(--app-blue) 8%,var(--app-surface)),var(--app-surface))}
.info-law{grid-column:1/-1;min-height:auto}
.law-links{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.law-links a{color:var(--app-blue);font-size:10px;text-decoration:none;border:1px solid var(--app-border);border-radius:9px;padding:8px 10px;background:var(--app-surface-strong)}
.info-law>small{display:block;color:var(--app-muted);font-size:9px;line-height:1.5}

.chat-legal-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid color-mix(in srgb,#f59e0b 40%,var(--app-border));background:color-mix(in srgb,#f59e0b 10%,var(--app-surface))}
.chat-legal-banner>div{display:flex;flex-direction:column;gap:4px}
.chat-legal-banner strong{font-size:11px}.chat-legal-banner span{font-size:9px;line-height:1.5;color:var(--app-muted)}
.chat-compose.chat-disabled{opacity:.55;pointer-events:none}
.chat-empty{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;min-height:130px}
.chat-ack-card{display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface);margin:14px 0;cursor:pointer}
.chat-ack-card input{margin-top:3px}.chat-ack-card span{display:flex;flex-direction:column;gap:4px}.chat-ack-card strong{font-size:11px}.chat-ack-card small{color:var(--app-muted);font-size:9px;line-height:1.45}
.chat-master-control{margin-top:0}
.nav-link[data-key="info"]::before{content:"ⓘ";margin-right:5px;font-size:11px}

@media(max-width:900px){
  .object-summary-grid-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .information-grid{grid-template-columns:1fr}.info-law{grid-column:auto}
  .work-calendar-panel{padding:10px;overflow-x:auto}.work-calendar-weekdays,.work-calendar-grid{min-width:760px}
  .chat-legal-banner{align-items:flex-start;flex-direction:column}
}
@media(max-width:600px){
  .object-summary-grid-four{grid-template-columns:1fr 1fr}
  .work-calendar-day{min-height:92px}
}

/* v0.2.25 — realtime events, browser notifications, chat reply/mention and local PII screening */
.notification-optin{position:fixed;z-index:150;right:20px;bottom:20px;width:min(470px,calc(100vw - 28px));display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:14px 14px;border:1px solid color-mix(in srgb,var(--app-blue) 35%,var(--app-border));border-radius:16px;background:color-mix(in srgb,var(--app-surface-strong) 94%,transparent);box-shadow:0 18px 55px rgba(0,0,0,.28);backdrop-filter:blur(18px);color:var(--app-text)}
.notification-optin.hidden{display:none}.notification-optin-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--app-blue-soft);font-size:19px}.notification-optin>div:nth-child(2){display:flex;flex-direction:column;gap:3px}.notification-optin strong{font-size:11px}.notification-optin span{font-size:9px;line-height:1.45;color:var(--app-muted)}.notification-optin>button:not(.notification-optin-dismiss){border:0;border-radius:10px;padding:10px 13px;background:var(--app-blue);color:#fff;font-weight:750;cursor:pointer}.notification-optin-dismiss{width:32px;height:32px;border:1px solid var(--app-border);border-radius:9px;background:transparent;color:var(--app-muted);cursor:pointer}
.chat-compose{display:block;padding:11px 12px}.chat-compose-row{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center}.chat-compose-row>input{height:44px;min-width:0;border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface-strong);color:var(--app-text);padding:0 13px;outline:none}.chat-compose-row>input:focus{border-color:var(--app-blue);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-blue) 10%,transparent)}.chat-compose-row>button{height:44px;border:0;border-radius:10px;padding:0 16px;background:var(--app-blue);color:white;font-weight:700;cursor:pointer}.chat-attach-button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface-strong);cursor:pointer;font-size:18px;transition:.15s ease}.chat-attach-button:hover{border-color:var(--app-blue);background:var(--app-blue-soft)}
.chat-compose-context,.chat-image-preview{margin-bottom:9px;padding:9px 10px;border:1px solid var(--app-border);border-radius:11px;background:color-mix(in srgb,var(--app-blue-soft) 42%,var(--app-surface-strong));display:flex;align-items:center;gap:10px}.chat-compose-context.hidden,.chat-image-preview.hidden{display:none}.chat-compose-context>div,.chat-image-preview>div{min-width:0;display:flex;flex:1;flex-direction:column;gap:3px}.chat-compose-context strong,.chat-image-preview strong{font-size:9px}.chat-compose-context span,.chat-image-preview span{font-size:8px;color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-compose-context>button,.chat-image-preview>button{border:0;background:transparent;color:var(--app-muted);cursor:pointer}.chat-compose-context>button{width:28px;height:28px;font-size:18px}.chat-image-preview>img{width:54px;height:54px;border-radius:8px;object-fit:cover;border:1px solid var(--app-border)}.chat-image-preview>button{color:#ef6d73;font-size:9px}.chat-compose-error{min-height:0;margin-top:7px;color:#ef6d73;font-size:9px;line-height:1.4}.chat-compose-error:empty{display:none}
.chat-reply-preview{margin-top:7px;padding:7px 8px;border-left:3px solid var(--app-blue);border-radius:7px;background:color-mix(in srgb,var(--app-blue-soft) 45%,transparent);display:flex;flex-direction:column;gap:2px}.chat-reply-preview strong{font-size:8px}.chat-reply-preview span{font-size:8px;color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-mention-chip{display:inline-flex;margin-top:7px;padding:4px 7px;border-radius:999px;background:color-mix(in srgb,var(--app-blue) 14%,transparent);color:var(--app-blue);font-size:8px;font-weight:750}.community-message-image{margin-top:8px;overflow:hidden;border-radius:10px;border:1px solid var(--app-border);max-width:360px}.community-message-image img{display:block;width:100%;max-height:320px;object-fit:cover;background:var(--app-surface)}.community-message-actions{display:flex;gap:10px;margin-top:8px;padding-top:7px;border-top:1px solid color-mix(in srgb,var(--app-border) 70%,transparent)}.community-message-actions button{border:0;background:transparent;padding:0;color:var(--app-blue);font-size:8px;cursor:pointer}.community-message-actions button:hover{text-decoration:underline}.community-message.mine .chat-mention-chip{background:rgba(255,255,255,.08);color:inherit}
@media(max-width:700px){.notification-optin{left:12px;right:12px;bottom:12px;width:auto;grid-template-columns:auto 1fr auto}.notification-optin>button:not(.notification-optin-dismiss){grid-column:2/3;width:max-content}.notification-optin-dismiss{grid-column:3;grid-row:1}.chat-compose-row{grid-template-columns:auto 1fr}.chat-compose-row>button{grid-column:1/-1}.community-message-image{max-width:100%}.community-message-actions{gap:14px}.chat-image-preview{align-items:flex-start}}

/* v0.2.27 — persistent Web Push, emoji picker and chat message deletion */
.device-notification-card{max-width:1200px;margin:0 auto 14px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;padding:13px 14px;border:1px solid color-mix(in srgb,var(--app-blue) 28%,var(--app-border));border-radius:14px;background:var(--app-surface-strong)}
.device-notification-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:var(--app-blue-soft);font-size:18px}.device-notification-card>div:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}.device-notification-card strong{font-size:11px}.device-notification-card span{font-size:9px;line-height:1.45;color:var(--app-muted)}.device-notification-card .ghost-button{white-space:nowrap}.device-notification-card button:disabled{opacity:.55;cursor:default}
.chat-compose-row{grid-template-columns:auto auto 1fr auto}.emoji-picker-wrap{position:relative}.chat-emoji-button{width:44px;height:44px;border:1px solid var(--app-border)!important;border-radius:11px!important;background:var(--app-surface-strong)!important;color:var(--app-text)!important;padding:0!important;font-size:18px!important;font-weight:400!important;cursor:pointer}.chat-emoji-button:hover{border-color:var(--app-blue)!important;background:var(--app-blue-soft)!important}.chat-emoji-picker{position:absolute;z-index:30;left:0;bottom:52px;width:236px;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:8px;border:1px solid var(--app-border);border-radius:13px;background:var(--app-surface-strong);box-shadow:0 16px 45px rgba(0,0,0,.28)}.chat-emoji-picker.hidden{display:none}.chat-emoji-picker button{height:32px!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:inherit!important;font-size:19px!important;cursor:pointer}.chat-emoji-picker button:hover{background:var(--app-blue-soft)!important}.community-message-actions .chat-delete-action{color:#ef6d73}.community-message-actions:empty{display:none}
@media(max-width:700px){.device-notification-card{margin:0 12px 12px;grid-template-columns:auto 1fr}.device-notification-card .ghost-button{grid-row:2}.device-notification-card .ghost-button:nth-of-type(1){grid-column:1/2}.device-notification-card .ghost-button:nth-of-type(2){grid-column:2/3}.chat-compose-row{grid-template-columns:auto auto 1fr}.chat-compose-row>button[type="submit"]{grid-column:1/-1}.chat-emoji-picker{left:-50px;width:228px}}

/* v0.2.27 — mobile notification onboarding and iOS Home Screen guidance */
.notification-help-modal{width:min(560px,100%)}
.notification-help-copy{font-size:13px;line-height:1.55;color:var(--app-muted)}
.notification-help-copy p{margin:10px 0 0}
.notification-help-copy ol{margin:8px 0 0;padding-left:22px;display:grid;gap:8px}
.notification-help-copy strong{color:var(--app-text)}
.notification-optin{z-index:10000;isolation:isolate;pointer-events:auto}
.notification-optin button{position:relative;z-index:1;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.demo-toast{z-index:11000}
@media(max-width:700px){
  .notification-optin{
    left:12px;right:12px;top:max(12px,env(safe-area-inset-top));bottom:auto;width:auto;
    max-height:calc(100dvh - max(24px,env(safe-area-inset-top)) - 18px);overflow:auto;
    grid-template-columns:44px minmax(0,1fr) 34px;gap:10px;padding:14px;
    border-width:2px;background:color-mix(in srgb,var(--app-surface-strong) 98%,transparent);
    box-shadow:0 20px 70px rgba(0,0,0,.50);
  }
  .notification-optin-icon{grid-column:1;grid-row:1;width:44px;height:44px}
  .notification-optin>div:nth-child(2){grid-column:2;grid-row:1;min-width:0}
  .notification-optin strong{font-size:13px}.notification-optin span{font-size:11px;line-height:1.45}
  .notification-optin>button:not(.notification-optin-dismiss){grid-column:1/4;grid-row:2;width:100%;min-height:46px;font-size:14px}
  .notification-optin-dismiss{grid-column:3;grid-row:1;width:34px;height:34px}
  .notification-help-backdrop{z-index:12000;padding:12px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}
  .notification-help-modal{max-height:calc(100dvh - 24px);overflow:auto}
  .demo-toast{left:12px;right:12px;bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px));max-width:none;font-size:12px}
}

/* ============================================================
   UK VTR24 v0.2.28 — hardened phone layout (iOS + Android)
   Forces the real mobile composition on touch phones even when
   an Android browser reports a desktop-like CSS viewport.
   ============================================================ */
html.mobile-device,
html.mobile-device body {
  max-width: 100%;
  overflow-x: hidden !important;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Phone header: one compact action row, optional role row, scrollable nav. */
html.mobile-device .app-header {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-auto-rows: auto;
  align-items: center;
  gap: 7px 8px;
  padding:
    max(8px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    0
    max(10px, env(safe-area-inset-left));
}
html.mobile-device .app-brand-block {
  min-width: 0;
  max-width: 148px;
  gap: 8px;
  overflow: hidden;
}
html.mobile-device .app-logo-mark { width: 27px; height: 33px; flex: 0 0 auto; }
html.mobile-device .app-logo-mark span { width: 6px; border-width: 1.5px; }
html.mobile-device .app-logo-mark span:nth-child(1) { height: 17px; }
html.mobile-device .app-logo-mark span:nth-child(2) { height: 29px; }
html.mobile-device .app-logo-mark span:nth-child(3) { height: 22px; }
html.mobile-device .app-brand-block strong {
  display: block;
  max-width: 106px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  letter-spacing: .11em;
}
html.mobile-device .app-brand-block small { display: none !important; }

html.mobile-device .app-header-actions {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
html.mobile-device .app-header-actions > * { flex: 0 0 auto; }
html.mobile-device .profile-chip { display: none !important; }
html.mobile-device .icon-action {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 9px;
  font-size: 14px;
}
html.mobile-device .icon-action.has-badge > span {
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  font-size: 9px;
}
html.mobile-device .logout-action {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  font-size: 10px;
  white-space: nowrap;
}

/* Do not squeeze UK/Owner selector into the icon row. */
html.mobile-device .header-role-switch:not(.hidden) {
  grid-column: 1 / -1;
  grid-row: 2;
  order: initial;
  width: max-content;
  max-width: 100%;
  justify-self: end;
  margin: 0;
  padding: 2px;
  border-radius: 9px;
}
html.mobile-device .header-role-switch .role-button {
  min-height: 30px;
  height: 30px;
  min-width: 0;
  padding: 0 9px;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}
html.mobile-device .header-role-switch .role-button[data-role="uk"] { min-width: 40px; }
html.mobile-device .header-role-switch .role-button[data-role="owner"] { min-width: 80px; }

html.mobile-device .app-nav {
  grid-column: 1 / -1;
  grid-row: 3;
  order: initial;
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  gap: 4px;
  overflow-x: auto !important;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 3px 0 max(8px, env(safe-area-inset-bottom));
  touch-action: pan-x;
}
html.mobile-device .app-nav::-webkit-scrollbar { display: none; }
html.mobile-device .nav-link {
  flex: 0 0 auto;
  scroll-snap-align: center;
  min-height: 38px;
  min-width: 92px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}
html.mobile-device .nav-link[data-key="votes"] { min-width: 118px; }
html.mobile-device .nav-link[data-key="announcements"] { min-width: 116px; }
html.mobile-device .nav-link[data-key="info"] { min-width: 112px; }

/* Force the dashboard to behave like a phone layout even if Android reports ~980 CSS px. */
html.mobile-device .role-dashboard,
html.mobile-device .preview-bar {
  width: calc(100% - 20px);
  margin-left: auto;
  margin-right: auto;
}
html.mobile-device .role-dashboard { margin-top: 10px; gap: 10px; }
html.mobile-device .panel-card { padding: 14px; border-radius: 15px; }
html.mobile-device .dashboard-hero {
  min-height: 0;
  padding: 17px;
  flex-direction: column;
  align-items: flex-start;
}
html.mobile-device .hero-copy h1 { font-size: 25px; }
html.mobile-device .hero-copy p { font-size: 11px; line-height: 1.45; }
html.mobile-device .hero-date { width: 100%; min-width: 0; align-items: flex-start; }
html.mobile-device .priority-alert { grid-template-columns: auto 1fr; gap: 12px; padding: 14px; }
html.mobile-device .priority-alert .ghost-button { grid-column: 1 / -1; width: 100%; min-height: 44px; }
html.mobile-device .priority-alert h2 { font-size: 17px; line-height: 1.25; }
html.mobile-device .priority-alert p { font-size: 11px; line-height: 1.45; }

html.mobile-device .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
html.mobile-device .stat-card { min-height: 102px; padding: 14px; }
html.mobile-device .stat-card > span { font-size: 11px; }
html.mobile-device .stat-card strong { font-size: 27px; }
html.mobile-device .quick-grid,
html.mobile-device .owner-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
html.mobile-device .quick-grid button,
html.mobile-device .owner-action {
  min-width: 0;
  min-height: 124px;
  padding: 14px;
  grid-template-columns: 1fr;
  grid-template-areas: "icon" "title" "small";
  row-gap: 6px;
}
html.mobile-device .quick-grid button > span,
html.mobile-device .owner-action > span { font-size: 24px; }
html.mobile-device .quick-grid button strong,
html.mobile-device .owner-action strong { font-size: 14px; line-height: 1.25; }
html.mobile-device .quick-grid button small,
html.mobile-device .owner-action small { font-size: 11px; line-height: 1.35; }

html.mobile-device .content-columns,
html.mobile-device .equal-columns,
html.mobile-device .contacts-layout,
html.mobile-device .owner-news-grid,
html.mobile-device .contact-cards { grid-template-columns: 1fr !important; }
html.mobile-device .section-heading h2 { font-size: 19px; }
html.mobile-device .request-row {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 7px;
  padding: 11px 7px;
}
html.mobile-device .request-row .assignee { grid-column: 2; }
html.mobile-device .request-row .status { grid-column: 3; grid-row: 1 / span 2; }
html.mobile-device .request-main strong { font-size: 12px; }
html.mobile-device .request-main small,
html.mobile-device .assignee { font-size: 9px; }

/* Subpages and admin tables should never stick out past the iPhone frame. */
html.mobile-device .subpage,
html.mobile-device .owner-settings-page,
html.mobile-device .notifications-page {
  width: calc(100% - 20px);
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
html.mobile-device .subpage-head { grid-template-columns: auto minmax(0, 1fr); }
html.mobile-device .subpage-head h1 { font-size: 24px; overflow-wrap: anywhere; }
html.mobile-device .section-heading,
html.mobile-device .section-heading-actions,
html.mobile-device .market-preview-footer { min-width: 0; }
html.mobile-device .ghost-button,
html.mobile-device .secondary-button,
html.mobile-device .save-modal-button,
html.mobile-device .secondary-modal-button { min-height: 42px; }
html.mobile-device .modal-backdrop {
  padding:
    max(10px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(10px, env(safe-area-inset-left));
}
html.mobile-device .employee-modal,
html.mobile-device .wide-modal,
html.mobile-device .request-detail-modal,
html.mobile-device .announcement-detail-modal {
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 20px);
  overflow: auto;
}
html.mobile-device .modal-actions { flex-wrap: wrap; }
html.mobile-device .modal-actions > button { flex: 1 1 120px; }

/* Owner page: keep exactly the iPhone-style 2-column action grid. */
html.mobile-device #ownerDashboard .owner-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html.mobile-device #ownerDashboard .owner-action { min-height: 132px; }

/* Notifications onboarding must always sit over the UI and respect the home indicator/notch. */
html.mobile-device .notification-optin {
  z-index: 20000 !important;
  left: max(10px, env(safe-area-inset-left)) !important;
  right: max(10px, env(safe-area-inset-right)) !important;
  top: auto !important;
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 12px)) !important;
  width: auto !important;
  max-height: min(72dvh, 520px);
  overflow: auto;
  grid-template-columns: 42px minmax(0, 1fr) 34px !important;
  gap: 10px;
  padding: 13px;
}
html.mobile-device .notification-optin > button:not(.notification-optin-dismiss) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 46px;
  font-size: 14px;
}
html.mobile-device .notification-optin-dismiss { grid-column: 3; grid-row: 1; }

/* Extra protection for narrow iPhones. */
@media (max-width: 390px) {
  html.mobile-device .app-header { gap: 6px 5px; padding-left: max(7px, env(safe-area-inset-left)); padding-right: max(7px, env(safe-area-inset-right)); }
  html.mobile-device .app-brand-block { max-width: 116px; gap: 6px; }
  html.mobile-device .app-brand-block strong { max-width: 78px; font-size: 11px; }
  html.mobile-device .app-logo-mark { width: 24px; height: 30px; }
  html.mobile-device .app-header-actions { gap: 3px; }
  html.mobile-device .icon-action { width: 31px; height: 31px; min-width: 31px; }
  html.mobile-device .logout-action { height: 31px; min-height: 31px; padding: 0 6px; font-size: 9px; }
  html.mobile-device .nav-link { min-width: 88px; font-size: 11px; }
  html.mobile-device .quick-grid button,
  html.mobile-device .owner-action { min-height: 118px; padding: 12px; }
}


/* ============================================================
   UK VTR24 v0.2.30 — compact chat and header shortcuts
   Long chat history scrolls inside the chat itself. The global
   navigation remains visible, so users never have to scroll the
   whole page back to the top just to change sections.
   ============================================================ */
body.chat-open .app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}
body.chat-open .chat-page {
  min-height: 0;
  padding-bottom: 0;
}
body.chat-open .community-chat-card {
  position: relative;
  min-height: 340px;
  max-height: none;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
}
body.chat-open .chat-message-list {
  min-height: 0 !important;
  max-height: none !important;
  height: auto;
  overflow-y: auto !important;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
body.chat-open .chat-compose {
  position: relative;
  z-index: 6;
  background: color-mix(in srgb, var(--app-surface) 97%, transparent);
  box-shadow: 0 -8px 24px rgba(0,0,0,.08);
}

/* On phones the chat page itself should not become a many-screen document. */
html.mobile-device body.chat-open .chat-page {
  width: calc(100% - 12px);
  margin-top: 7px;
}
html.mobile-device body.chat-open .chat-page .subpage-head {
  margin-bottom: 8px;
}
html.mobile-device body.chat-open .chat-page .subpage-head p {
  display: none;
}
html.mobile-device body.chat-open .community-chat-card {
  min-height: 340px;
  border-radius: 14px;
}
html.mobile-device body.chat-open .chat-legal-banner {
  padding: 9px 10px;
  gap: 7px;
}
html.mobile-device body.chat-open .chat-legal-banner span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
html.mobile-device body.chat-open .chat-notice {
  padding: 9px 10px;
}
html.mobile-device body.chat-open .chat-message-list {
  padding: 10px;
  gap: 8px;
}
html.mobile-device body.chat-open .chat-compose {
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}


/* ============================================================
   UK VTR24 v0.2.30 — compact owner chat + header shortcuts
   ============================================================ */
.header-shortcut.active {
  color: var(--app-blue);
  background: var(--app-blue-soft);
  border-color: color-mix(in srgb, var(--app-blue) 38%, var(--app-border));
}
.header-announcements-action { color: color-mix(in srgb, #f59e0b 84%, var(--app-text)); }
.header-chat-action { color: color-mix(in srgb, #60a5fa 84%, var(--app-text)); }

/* The chat is the content. Keep only one compact title/status row. */
body.chat-open .chat-page {
  margin-top: 8px;
  min-height: 0;
}
body.chat-open .community-chat-card {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  min-height: 360px;
}
.chat-compact-head {
  min-height: 48px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--app-border);
  background: color-mix(in srgb, var(--app-blue-soft) 42%, var(--app-surface));
}
.chat-compact-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-compact-title strong { font-size: 13px; }
.chat-compact-title span {
  color: var(--app-muted);
  font-size: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(60vw, 720px);
}
.chat-compact-actions { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.chat-info-shortcut {
  width: 31px; height: 31px; min-width: 31px;
  display: grid; place-items: center;
  border: 1px solid var(--app-border); border-radius: 9px;
  background: var(--app-surface-strong); color: var(--app-blue); cursor: pointer;
}

/* Legal note on Information page: precise wording, not a false 'chat approval'. */
.info-legal-callout {
  margin: 12px 0;
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid color-mix(in srgb, #f59e0b 40%, var(--app-border));
  border-radius: 12px;
  background: color-mix(in srgb, #f59e0b 9%, var(--app-surface));
}
.info-legal-callout strong { font-size: 11px; line-height: 1.4; }
.info-legal-callout span { color: var(--app-muted); font-size: 10px; line-height: 1.55; }

/* Mobile header: no bottom safe-area at the TOP of the screen. This was the
   protruding empty strip below the navigation on iPhone. */
html.mobile-device .app-nav {
  padding: 2px 0 3px !important;
  min-height: 41px;
}
html.mobile-device .app-header {
  row-gap: 4px;
  padding-bottom: 4px;
}
html.mobile-device .nav-link {
  min-height: 34px;
  padding-top: 0;
  padding-bottom: 0;
}

/* Header shortcuts replace two long navigation tabs. */
html.mobile-device .header-shortcut {
  width: 31px;
  height: 31px;
  min-width: 31px;
  font-size: 13px;
}
html.mobile-device .header-announcements-action.has-badge > span {
  top: -5px; right: -5px;
}

/* Chat on phones: use virtually the whole viewport for messages. */
html.mobile-device body.chat-open .chat-page {
  width: calc(100% - 8px);
  margin-top: 4px;
}
html.mobile-device body.chat-open .community-chat-card {
  border-radius: 12px;
  min-height: 360px;
}
html.mobile-device body.chat-open .chat-compact-head {
  min-height: 40px;
  padding: 5px 8px;
}
html.mobile-device body.chat-open .chat-compact-title strong { font-size: 12px; }
html.mobile-device body.chat-open .chat-compact-title span { display: none; }
html.mobile-device body.chat-open .chat-online { font-size: 8px; padding: 5px 7px; }
html.mobile-device body.chat-open .chat-info-shortcut { width: 29px; height: 29px; min-width: 29px; }
html.mobile-device body.chat-open .chat-message-list { padding: 7px 8px; gap: 7px; }
html.mobile-device body.chat-open .chat-compose { padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }

@media (max-width: 390px) {
  html.mobile-device .app-brand-block { max-width: 102px; }
  html.mobile-device .app-brand-block strong { max-width: 70px; font-size: 10px; }
  html.mobile-device .app-header-actions { gap: 2px; }
  html.mobile-device .header-shortcut,
  html.mobile-device .icon-action { width: 29px; height: 29px; min-width: 29px; }
  html.mobile-device .logout-action { height: 29px; min-height: 29px; padding: 0 5px; font-size: 8px; }
}


/* ============================================================
   UK VTR24 v0.2.31 — chat media + consistent phone header
   ============================================================ */
.community-message-media{margin-top:8px;overflow:hidden;border-radius:11px;border:1px solid var(--app-border);max-width:420px;background:#05070b}
.community-message-image img{display:block;width:100%;max-height:380px;object-fit:contain;background:#05070b;cursor:zoom-in}
.community-message-video video{display:block;width:100%;max-height:420px;background:#000;object-fit:contain}
.chat-image-preview>video{width:72px;height:58px;border-radius:8px;object-fit:cover;border:1px solid var(--app-border);background:#000}
.chat-image-preview>img.hidden,.chat-image-preview>video.hidden{display:none!important}
.chat-media-lightbox{position:fixed;inset:0;z-index:30000;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:rgba(0,0,0,.88);backdrop-filter:blur(6px)}
.chat-media-lightbox.hidden{display:none}.chat-media-lightbox img{display:block;max-width:min(96vw,1500px);max-height:92dvh;object-fit:contain;border-radius:12px;box-shadow:0 24px 90px rgba(0,0,0,.5)}
.chat-media-lightbox-close{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:1;width:44px;height:44px;border:1px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(20,25,35,.8);color:#fff;font-size:28px;line-height:1;cursor:pointer}
body.media-lightbox-open{overflow:hidden}

/* Always use exactly the same shortcut order on iPhone and Android. */
html.mobile-device .header-role-switch{order:0}
html.mobile-device #headerAnnouncementsButton{order:1}
html.mobile-device #headerChatButton{order:2}
html.mobile-device #settingsGearButton{order:3}
html.mobile-device #appThemeToggle{order:4}
html.mobile-device #notificationsButton{order:5}
html.mobile-device .profile-chip{order:6}
html.mobile-device #logoutButton{order:7}

/* Android devices that expose a wide desktop-like CSS viewport must still
   look like the iPhone mobile composition, not a miniature desktop page. */
html.mobile-device .app-view{font-size:16px}
html.mobile-device .app-header{max-width:100vw}
html.mobile-device .app-header-actions{direction:ltr}
html.mobile-device .app-nav{font-size:13px}
html.mobile-device .nav-link{font-size:13px!important;min-height:40px!important;padding-left:14px!important;padding-right:14px!important}
html.mobile-device .app-brand-block strong{font-size:13px!important;letter-spacing:.12em}
html.mobile-device .icon-action,html.mobile-device .header-shortcut{width:36px!important;height:36px!important;min-width:36px!important;font-size:16px!important}
html.mobile-device .logout-action{height:36px!important;min-height:36px!important;font-size:11px!important;padding:0 9px!important}
html.mobile-device .community-message{max-width:94%!important;padding:12px 13px}
html.mobile-device .community-message-head strong{font-size:12px}.mobile-device .community-message-head small{font-size:9px}.mobile-device .community-message-head time{font-size:9px}
html.mobile-device .community-message p{font-size:13px;line-height:1.5}
html.mobile-device .community-message-actions button{font-size:10px;min-height:28px}
html.mobile-device .community-message-media{max-width:min(100%,360px)}
html.mobile-device .chat-compose-row>input{font-size:15px}
html.mobile-device .chat-compose-row>button[type="submit"]{font-size:15px;min-height:46px}

@media(max-width:720px){
  .community-message-media{max-width:100%}
  .community-message-image img{max-height:62dvh}
  .community-message-video video{max-height:58dvh}
}

/* ============================================================
   UK VTR24 v0.2.32 — foldable-safe mobile viewport + QR printing
   ============================================================ */

/* Never fake a phone width. Foldables and Android browsers expose different
   CSS viewport sizes; the mobile-device class is the stable signal instead. */
html.mobile-device,
html.mobile-device body {
  width: 100%;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}
html.mobile-device .page-shell,
html.mobile-device .app-view,
html.mobile-device .app-header,
html.mobile-device .role-dashboard,
html.mobile-device .preview-bar,
html.mobile-device .subpage,
html.mobile-device .owner-settings-page,
html.mobile-device .notifications-page {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Login page must use the mobile composition even when Firefox/Samsung
   Internet reports a wide CSS viewport on a Galaxy Fold. */
html.mobile-device:not(.auth-pending) body:not(.app-mode) .page-shell,
html.mobile-device body:not(.app-mode) .page-shell {
  width: 100%;
  max-width: 100%;
  padding:
    max(14px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(14px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
}
html.mobile-device body:not(.app-mode) .topbar {
  width: 100%;
  min-width: 0;
  justify-content: flex-end;
}
html.mobile-device body:not(.app-mode) .mini-nav { display: none !important; }
html.mobile-device body:not(.app-mode) .theme-toggle {
  max-width: 100%;
  font-size: 13px;
}
html.mobile-device body:not(.app-mode) .login-layout {
  width: 100%;
  max-width: 560px;
  min-width: 0;
  justify-self: center;
  padding: 8px 0 18px;
}
html.mobile-device body:not(.app-mode) .brand {
  margin: 10px 0 18px;
}
html.mobile-device body:not(.app-mode) .brand-mark {
  width: 60px;
  height: 62px;
  gap: 4px;
}
html.mobile-device body:not(.app-mode) .brand-mark span {
  width: 11px;
  border-width: 2px;
}
html.mobile-device body:not(.app-mode) .brand-mark span:nth-child(1) { height: 31px; }
html.mobile-device body:not(.app-mode) .brand-mark span:nth-child(2) { height: 57px; }
html.mobile-device body:not(.app-mode) .brand-mark span:nth-child(3) { height: 42px; }
html.mobile-device body:not(.app-mode) .brand h1 {
  font-size: clamp(34px, 11vw, 48px);
  letter-spacing: .08em;
}
html.mobile-device body:not(.app-mode) .brand p {
  font-size: 8px;
  letter-spacing: .36em;
}
html.mobile-device body:not(.app-mode) #loginForm {
  width: 100%;
  max-width: 560px;
  min-width: 0;
  margin: 0 auto;
  padding: 23px 18px 19px;
  border-radius: 20px;
}
html.mobile-device body:not(.app-mode) .card-heading h2 { font-size: 22px; }
html.mobile-device body:not(.app-mode) .card-heading p { font-size: 13px; }
html.mobile-device body:not(.app-mode) .input-wrap { width: 100%; min-width: 0; height: 56px; }
html.mobile-device body:not(.app-mode) .form-row { min-width: 0; font-size: 12px; }
html.mobile-device body:not(.app-mode) .footer { font-size: 10px; }
html.mobile-device body:not(.app-mode) .footer-links { display: none; }
html.mobile-device body:not(.app-mode) .background {
  width: 100%;
  max-width: 100%;
  background-size: cover;
  background-position: center center !important;
}

/* App pages: no child is allowed to widen the document on a foldable cover
   display. Horizontal scrolling is reserved only for the navigation strips. */
html.mobile-device body.app-mode .page-shell,
html.mobile-device body.app-mode .app-view {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
html.mobile-device .app-header {
  width: 100%;
  box-sizing: border-box;
}
html.mobile-device .app-nav {
  width: 100% !important;
  max-width: 100% !important;
}
html.mobile-device .app-header-actions {
  max-width: 100%;
  min-width: 0;
}
html.mobile-device .panel-card,
html.mobile-device .stat-card,
html.mobile-device .content-columns,
html.mobile-device .equal-columns {
  min-width: 0;
}

/* QR action row gained one more action (Print); let it wrap instead of
   shrinking all controls into unreadable links on a phone. */
html.mobile-device .qr-actions {
  flex-wrap: wrap;
  gap: 7px 9px;
}
html.mobile-device .qr-actions > * {
  flex: 1 1 42% !important;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Galaxy Fold cover display and other very narrow phones. Put the brand on
   its own line, actions on the next line, and keep the navigation scrollable. */
@media (max-width: 380px) {
  html.mobile-device .app-header {
    grid-template-columns: 1fr !important;
    gap: 5px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }
  html.mobile-device .app-brand-block {
    grid-column: 1;
    grid-row: 1;
    max-width: 100%;
  }
  html.mobile-device .app-brand-block strong {
    max-width: 150px !important;
    font-size: 12px !important;
  }
  html.mobile-device .app-header-actions {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 1px 0 3px;
  }
  html.mobile-device .app-header-actions::-webkit-scrollbar { display: none; }
  html.mobile-device .app-nav {
    grid-column: 1;
    grid-row: 3;
  }
  html.mobile-device .header-role-switch:not(.hidden) {
    flex: 0 0 auto;
    margin: 0 2px 0 0;
  }
  html.mobile-device .icon-action,
  html.mobile-device .header-shortcut {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 15px !important;
  }
  html.mobile-device .logout-action {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 10px !important;
    padding: 0 8px !important;
  }
  html.mobile-device body:not(.app-mode) #loginForm { padding-left: 14px; padding-right: 14px; }
  html.mobile-device body:not(.app-mode) .brand h1 { font-size: clamp(31px, 12vw, 42px); }
  html.mobile-device body:not(.app-mode) .form-row { gap: 8px; }
}

@media (max-width: 330px) {
  html.mobile-device body:not(.app-mode) .page-shell {
    padding-left: 8px;
    padding-right: 8px;
  }
  html.mobile-device body:not(.app-mode) #loginForm { padding: 20px 12px 17px; }
  html.mobile-device body:not(.app-mode) .card-heading h2 { font-size: 19px; }
  html.mobile-device body:not(.app-mode) .card-heading p { font-size: 12px; }
  html.mobile-device body:not(.app-mode) .input-wrap { height: 53px; }
  html.mobile-device body:not(.app-mode) .form-row { font-size: 11px; }
}

/* =========================================================
   UK VTR24 v0.2.33 — live request stats, QR print packs,
   unread chat counters and cleaner conversation layout
   ========================================================= */

/* Live request summary: these cards are now buttons backed by real requests. */
button.stat-card.live-stat{
  appearance:none;width:100%;text-align:left;color:var(--app-text);font:inherit;
  border:1px solid var(--app-border);cursor:pointer;transition:.16s ease;
}
button.stat-card.live-stat:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--app-blue) 45%,var(--app-border));box-shadow:0 8px 24px rgba(0,0,0,.08)}
button.stat-card.live-stat:focus-visible{outline:2px solid var(--app-blue);outline-offset:2px}

/* QR print selection and print-options dialog. */
.qr-print-toolbar{margin:11px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;border:1px solid var(--app-border);border-radius:13px;background:color-mix(in srgb,var(--app-blue-soft) 28%,var(--app-surface))}
.qr-print-toolbar>div:first-child{display:flex;flex-direction:column;gap:3px}.qr-print-toolbar strong{font-size:11px}.qr-print-toolbar small{font-size:8.5px;color:var(--app-muted);line-height:1.45}
.qr-print-toolbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.qr-print-toolbar-actions>span{font-size:9px;color:var(--app-muted);white-space:nowrap}.qr-print-toolbar button:disabled{opacity:.45;cursor:not-allowed}
.qr-location-card{position:relative}.qr-location-card.selected-for-print{border-color:var(--app-blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-blue) 12%,transparent)}
.qr-select-print{position:absolute;left:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border:1px solid var(--app-border);border-radius:999px;background:color-mix(in srgb,var(--app-surface) 88%,transparent);backdrop-filter:blur(6px);font-size:8px;color:var(--app-muted);cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.qr-select-print input{width:14px;height:14px;margin:0;accent-color:var(--app-blue)}
.qr-location-card>img{margin-top:17px}
.qr-print-modal-shell{max-width:680px}.qr-print-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:8px 0 12px}.qr-print-options label{display:flex;flex-direction:column;gap:5px}.qr-print-options label>span{font-size:9px;color:var(--app-muted)}.qr-print-options select{height:42px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface-strong);color:var(--app-text);padding:0 10px}
.qr-print-selection-preview{display:grid;grid-template-columns:1fr 1fr;gap:8px}.qr-print-selection-preview article{min-width:0;display:grid;grid-template-columns:58px 1fr;gap:9px;align-items:center;padding:8px;border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface)}.qr-print-selection-preview img{width:58px;height:58px;background:#fff;padding:3px;border-radius:7px}.qr-print-selection-preview div{min-width:0;display:flex;flex-direction:column;gap:3px}.qr-print-selection-preview strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qr-print-selection-preview small{font-size:8px;color:var(--app-muted);line-height:1.35}

/* Chat shortcut unread badge. */
.header-chat-action{position:relative}.header-chat-action>span{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:#ef5f73;color:#fff;font-size:9px;font-weight:900;border:2px solid var(--app-surface)}.header-chat-action>span.hidden{display:none}.header-chat-action.has-unread{border-color:color-mix(in srgb,#ef5f73 52%,var(--app-border));background:color-mix(in srgb,#ef5f73 8%,var(--app-surface-strong))}

/* Cleaner conversation: avatar + compact bubble instead of full-width cards. */
.chat-message-list{background:linear-gradient(180deg,color-mix(in srgb,var(--app-blue-soft) 12%,transparent),transparent 22%)}
.community-message-row{width:100%;display:flex;align-items:flex-end;gap:8px}.community-message-row.mine-row{flex-direction:row-reverse}
.chat-avatar{width:30px;height:30px;min-width:30px;border-radius:50%;display:grid;place-items:center;background:var(--app-blue-soft);border:1px solid color-mix(in srgb,var(--app-blue) 24%,var(--app-border));color:var(--app-blue);font-size:8px;font-weight:900;letter-spacing:.02em}.chat-avatar.uk-avatar{background:linear-gradient(135deg,#176fba,#4aa7f3);color:#fff;border-color:transparent}
.community-message{width:auto!important;max-width:min(72%,720px)!important;margin:0!important;border-radius:15px 15px 15px 4px!important;padding:10px 12px!important;box-shadow:0 3px 12px rgba(0,0,0,.06)}
.community-message.mine{border-radius:15px 15px 4px 15px!important;background:color-mix(in srgb,var(--app-blue) 12%,var(--app-surface-strong))!important}
.community-message.uk-message:not(.mine){border-left:3px solid var(--app-blue)}
.community-message-head{display:grid!important;grid-template-columns:auto auto 1fr auto;align-items:center;gap:5px 7px}.community-message-head strong{font-size:10px}.community-message-head>span{font-size:7px;padding:2px 5px;border-radius:999px;background:var(--app-blue);color:#fff;font-weight:800}.community-message-head small{font-size:7.5px!important;color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.community-message-head time{font-size:7.5px!important;color:var(--app-muted);white-space:nowrap}.community-message>p{font-size:11px!important;line-height:1.48;margin:7px 0 0!important;white-space:pre-wrap;overflow-wrap:anywhere}
.community-message-actions{opacity:.82}.community-message-row:hover .community-message-actions{opacity:1}
.chat-day-separator,.chat-unread-separator{width:100%;display:flex;align-items:center;gap:9px;margin:6px 0}.chat-day-separator::before,.chat-day-separator::after,.chat-unread-separator::before,.chat-unread-separator::after{content:"";height:1px;flex:1;background:var(--app-border)}.chat-day-separator span{padding:4px 9px;border-radius:999px;background:var(--app-surface-strong);color:var(--app-muted);font-size:8px;white-space:nowrap}.chat-unread-separator::before,.chat-unread-separator::after{background:color-mix(in srgb,#ef5f73 48%,var(--app-border))}.chat-unread-separator span{padding:4px 10px;border-radius:999px;background:color-mix(in srgb,#ef5f73 12%,var(--app-surface-strong));color:#ef7181;font-size:8px;font-weight:800;white-space:nowrap}

@media(max-width:720px){
  .qr-print-toolbar{align-items:stretch;flex-direction:column}.qr-print-toolbar-actions{width:100%}.qr-print-toolbar-actions .ghost-button{flex:1}.qr-print-selection-preview{grid-template-columns:1fr}.qr-print-options{grid-template-columns:1fr}.qr-select-print{top:6px;left:6px}.qr-location-card>img{margin-top:19px}
  .community-message{max-width:84%!important;padding:9px 10px!important}.chat-avatar{width:27px;height:27px;min-width:27px}.community-message-head{grid-template-columns:auto auto 1fr}.community-message-head time{grid-column:3;grid-row:2;justify-self:end}.community-message-head small{grid-column:1/3;grid-row:2}.community-message>p{font-size:12px!important}.community-message-actions button{font-size:9px!important}
}

/* ==============================
   UK VTR24 v0.2.34 — dashboard composition + interface presets
   ============================== */
.request-overview-layout{
  display:grid;
  grid-template-columns:minmax(0,1.82fr) minmax(285px,.82fr);
  gap:16px;
  align-items:stretch;
}
.request-overview-main{display:grid;grid-template-rows:auto 1fr;gap:16px;min-width:0}
.request-stats-inline{grid-template-columns:repeat(4,minmax(0,1fr));min-width:0}
.request-stats-inline .stat-card{min-height:104px;padding:15px 16px;border-radius:15px}
.request-stats-inline .stat-card strong{font-size:28px}
.team-panel-stretched{height:100%;display:flex;flex-direction:column;min-height:100%}
.team-panel-stretched .team-list{flex:1;align-content:start}
.dashboard-quick-actions{position:relative;overflow:hidden}
.dashboard-quick-actions::after{content:"";position:absolute;right:-70px;top:-90px;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--app-blue) 9%,transparent),transparent 68%);pointer-events:none}

/* General settings / visual design selector */
.ui-design-settings{margin-top:18px;padding-top:18px;border-top:1px solid var(--app-border)}
.compact-heading{align-items:flex-start}
.compact-heading h3{margin:4px 0 0;font-size:17px}
.ui-design-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.ui-design-option{border:1px solid var(--app-border);background:var(--app-surface-strong);color:var(--app-text);border-radius:15px;padding:13px;text-align:left;cursor:pointer;display:grid;gap:8px;transition:.16s ease;min-width:0}
.ui-design-option:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--app-blue) 45%,var(--app-border));box-shadow:0 9px 24px rgba(25,67,115,.08)}
.ui-design-option.active{border-color:var(--app-blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-blue) 14%,transparent)}
.ui-design-option strong{font-size:12px}.ui-design-option small{font-size:9px;line-height:1.45;color:var(--app-muted)}
.design-preview{height:62px;border:1px solid var(--app-border);border-radius:10px;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:1fr 1fr;gap:5px;padding:7px;background:var(--app-bg);overflow:hidden}
.design-preview i{display:block;border-radius:5px;background:var(--app-surface-strong);border:1px solid var(--app-border)}
.design-preview i:first-child{grid-row:1 / 3}.premium-preview{background:linear-gradient(135deg,color-mix(in srgb,var(--app-blue-soft) 70%,var(--app-bg)),var(--app-bg))}.premium-preview i:first-child{background:linear-gradient(145deg,color-mix(in srgb,var(--app-blue) 12%,var(--app-surface-strong)),var(--app-surface-strong))}.premium-preview i:nth-child(2){background:color-mix(in srgb,var(--app-orange-soft) 70%,var(--app-surface-strong))}.contrast-preview{background:color-mix(in srgb,var(--app-text) 5%,var(--app-bg))}.contrast-preview i{border-width:2px;border-color:color-mix(in srgb,var(--app-blue) 45%,var(--app-border))}

/* CLASSIC: restrained, closest to the original dashboard. */
body.design-classic.app-mode .app-view{background:var(--app-bg)}
body.design-classic.app-mode .panel-card,
body.design-classic.app-mode .stat-card{box-shadow:0 6px 18px rgba(29,47,74,.055)}
body.design-classic.app-mode .dashboard-hero{background:var(--app-surface)}
body.design-classic.app-mode .dashboard-quick-actions::after{display:none}

/* PREMIUM: default visual direction for the complex. */
body.design-premium.app-mode .app-view{
  background:
    radial-gradient(circle at 14% 0%,color-mix(in srgb,var(--app-blue) 12%,transparent),transparent 28%),
    radial-gradient(circle at 92% 22%,color-mix(in srgb,var(--app-violet) 8%,transparent),transparent 25%),
    var(--app-bg);
}
body.design-premium.app-mode .panel-card,
body.design-premium.app-mode .stat-card{
  border-color:color-mix(in srgb,var(--app-blue) 11%,var(--app-border));
  box-shadow:0 12px 34px rgba(17,54,91,.075);
}
html[data-theme="dark"] body.design-premium.app-mode .panel-card,
html[data-theme="dark"] body.design-premium.app-mode .stat-card{box-shadow:0 14px 36px rgba(0,0,0,.24)}
body.design-premium.app-mode .dashboard-hero{
  position:relative;overflow:hidden;
  background:
    linear-gradient(112deg,color-mix(in srgb,var(--app-blue-soft) 88%,var(--app-surface)),color-mix(in srgb,var(--app-violet) 5%,var(--app-surface)) 62%,var(--app-surface));
}
body.design-premium.app-mode .dashboard-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--app-blue),var(--app-violet));border-radius:18px 0 0 18px}
body.design-premium.app-mode .dashboard-hero::after{content:"";position:absolute;width:220px;height:220px;right:-70px;top:-90px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--app-blue) 12%,transparent),transparent 68%);pointer-events:none}
body.design-premium.app-mode .quick-grid button{background:linear-gradient(145deg,var(--app-surface-strong),color-mix(in srgb,var(--app-blue-soft) 17%,var(--app-surface-strong)))}
body.design-premium.app-mode .request-stats-inline .stat-card{background:linear-gradient(150deg,var(--app-surface-strong),color-mix(in srgb,var(--app-blue-soft) 13%,var(--app-surface-strong)))}
body.design-premium.app-mode .request-stats-inline .stat-card.warning{background:linear-gradient(150deg,var(--app-surface-strong),color-mix(in srgb,var(--app-red-soft) 22%,var(--app-surface-strong)))}
body.design-premium.app-mode .team-panel-stretched{background:linear-gradient(165deg,var(--app-surface),color-mix(in srgb,var(--app-blue-soft) 18%,var(--app-surface)))}
body.design-premium.app-mode #requestsSection{background:linear-gradient(165deg,var(--app-surface),color-mix(in srgb,var(--app-blue-soft) 10%,var(--app-surface)))}

/* CONTRAST: stronger separation for control-room use. */
body.design-contrast.app-mode .app-view{background:color-mix(in srgb,var(--app-text) 3%,var(--app-bg))}
body.design-contrast.app-mode .panel-card,
body.design-contrast.app-mode .stat-card{border-width:2px;border-color:color-mix(in srgb,var(--app-blue) 28%,var(--app-border));box-shadow:none;border-radius:12px}
body.design-contrast.app-mode .dashboard-hero{background:var(--app-surface-strong);border-left:5px solid var(--app-blue)}
body.design-contrast.app-mode .quick-grid button{border-width:2px;border-radius:10px}
body.design-contrast.app-mode .priority-alert{border-left-width:6px}
body.design-contrast.app-mode .request-row{border-bottom:1px solid var(--app-border);border-radius:6px}

@media(max-width:980px){
  .request-overview-layout{grid-template-columns:1fr}
  .request-overview-main{gap:10px}
  .team-panel-stretched{min-height:0}
  .request-stats-inline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-design-options{grid-template-columns:1fr}
}
@media(max-width:700px){
  .request-overview-layout{gap:10px}
  .request-stats-inline{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .request-stats-inline .stat-card{min-height:96px;padding:13px}
  .dashboard-quick-actions{order:initial}
  .team-panel-stretched{height:auto}
}
.dashboard-quick-actions .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.dashboard-quick-actions .quick-grid{grid-template-columns:1fr!important}}

/* ==============================
   UK VTR24 v0.2.38 — desktop command center
   Desktop gets a persistent left rail; phones/tablets keep the compact top nav.
   ============================== */
.desktop-sidebar{display:none}
.dashboard-top-row{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;min-width:0}
.dashboard-top-row>.dashboard-quick-actions{min-width:0}
.quick-slogan{position:relative;z-index:2;max-width:150px;text-align:right;color:var(--app-blue);font-size:11px;font-weight:700;line-height:1.35}
.dashboard-quick-actions::before{content:"";position:absolute;inset:0 0 0 auto;width:38%;background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--app-surface) 28%,transparent)),url('/assets/vtr24-bg-light.jpg');background-size:cover;background-position:58% 46%;opacity:.19;pointer-events:none;filter:saturate(.9)}
html[data-theme="dark"] .dashboard-quick-actions::before{background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--app-surface) 18%,transparent)),url('/assets/vtr24-bg-dark.png');opacity:.24}
.dashboard-quick-actions>*{position:relative;z-index:1}
.dashboard-weather-card{position:relative;overflow:hidden;min-height:142px;padding:18px;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;align-items:end;background:var(--app-surface)}
.weather-photo{position:absolute;inset:0;background-image:linear-gradient(90deg,color-mix(in srgb,var(--app-surface) 90%,transparent) 0%,color-mix(in srgb,var(--app-surface) 58%,transparent) 55%,color-mix(in srgb,var(--app-surface) 14%,transparent) 100%),url('/assets/vtr24-bg-light.jpg');background-size:cover;background-position:61% 45%;opacity:.95;pointer-events:none}
html[data-theme="dark"] .weather-photo{background-image:linear-gradient(90deg,color-mix(in srgb,var(--app-surface) 90%,transparent) 0%,color-mix(in srgb,var(--app-surface) 55%,transparent) 55%,rgba(5,11,22,.08) 100%),url('/assets/vtr24-bg-dark.png')}
.weather-copy,.weather-reading{position:relative;z-index:1;display:flex;flex-direction:column}
.weather-copy{align-self:start;gap:3px}.weather-copy>span{font-size:9px;color:var(--app-muted);text-transform:uppercase;letter-spacing:.08em}.weather-copy>strong{font-size:20px}.weather-copy>small{font-size:9px;color:var(--app-muted)}
.weather-reading{align-items:flex-end;align-self:end;text-shadow:0 1px 12px color-mix(in srgb,var(--app-surface-strong) 75%,transparent)}.weather-reading>span{font-size:30px;line-height:1}.weather-reading>strong{font-size:29px;line-height:1.05;margin-top:7px}.weather-reading>small{font-size:10px;margin-top:5px;font-weight:700}

/* Real complex photo thumbnails in the news list. */
.news-list .news-with-photo{grid-template-columns:48px auto 1fr;gap:9px;align-items:center}
.news-complex-thumb{width:48px;height:38px;border-radius:9px;border:1px solid var(--app-border);background-image:url('/assets/vtr24-bg-light.jpg');background-size:210px auto;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.news-complex-thumb-0{background-position:58% 48%}.news-complex-thumb-1{background-position:38% 63%}.news-complex-thumb-2{background-position:76% 56%}
html[data-theme="dark"] .news-complex-thumb{background-image:url('/assets/vtr24-bg-dark.png')}

@media (min-width:1180px){
  html:not(.mobile-device) body.app-mode{--desktop-sidebar-w:212px}
  html:not(.mobile-device) .desktop-sidebar{display:flex;position:fixed;z-index:45;left:0;top:0;bottom:0;width:var(--desktop-sidebar-w);padding:18px 12px 14px;flex-direction:column;background:linear-gradient(180deg,color-mix(in srgb,var(--app-surface-strong) 98%,transparent),color-mix(in srgb,var(--app-blue-soft) 32%,var(--app-surface-strong)));border-right:1px solid color-mix(in srgb,var(--app-blue) 16%,var(--app-border));box-shadow:14px 0 38px rgba(21,56,93,.055);overflow:hidden}
  html[data-theme="dark"]:not(.mobile-device) .desktop-sidebar{background:linear-gradient(180deg,#0b1a31 0%,#0d203b 58%,#102948 100%);box-shadow:14px 0 38px rgba(0,0,0,.18)}
  html:not(.mobile-device) .desktop-sidebar-brand{display:flex;align-items:center;gap:11px;padding:4px 8px 20px;border-bottom:1px solid var(--app-border)}
  html:not(.mobile-device) .desktop-sidebar-brand .app-logo-mark{width:36px;height:43px;flex:0 0 auto}
  html:not(.mobile-device) .desktop-sidebar-brand>div:last-child{display:flex;flex-direction:column;min-width:0}
  html:not(.mobile-device) .desktop-sidebar-brand strong{font-size:15px;letter-spacing:.08em;white-space:nowrap}
  html:not(.mobile-device) .desktop-sidebar-brand small{font-size:9px;color:var(--app-muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html:not(.mobile-device) .desktop-side-nav{display:grid;gap:6px;margin-top:18px}
  html:not(.mobile-device) .desktop-side-nav .nav-link{width:100%;min-height:43px;display:flex;align-items:center;justify-content:flex-start;gap:11px;border:1px solid transparent;border-radius:11px;padding:0 12px;color:var(--app-muted);font-size:12px;text-align:left}
  html:not(.mobile-device) .desktop-side-nav .nav-link::before{display:grid;place-items:center;width:20px;flex:0 0 20px;font-size:16px;filter:saturate(.9)}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="home"]::before{content:"⌂"}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="requests"]::before{content:"▤"}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="third"]::before{content:"🛠";font-size:14px}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="documents"]::before{content:"▧"}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="votes"]::before{content:"◉"}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="staff"]::before{content:"♙"}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="info"]::before{content:"ⓘ"}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="settings"]::before{content:"⚙";font-size:14px}
  html:not(.mobile-device) .desktop-side-nav .nav-link:hover{background:color-mix(in srgb,var(--app-blue-soft) 65%,transparent);border-color:color-mix(in srgb,var(--app-blue) 18%,transparent);color:var(--app-text)}
  html:not(.mobile-device) .desktop-side-nav .nav-link.active{color:var(--app-blue);background:linear-gradient(90deg,color-mix(in srgb,var(--app-blue-soft) 95%,var(--app-surface-strong)),color-mix(in srgb,var(--app-blue-soft) 55%,var(--app-surface-strong)));border-color:color-mix(in srgb,var(--app-blue) 26%,var(--app-border));font-weight:700}
  html[data-theme="dark"]:not(.mobile-device) .desktop-side-nav .nav-link.active{color:#dff2ff;background:linear-gradient(90deg,rgba(31,113,207,.52),rgba(26,80,145,.25));border-color:rgba(74,161,255,.44);box-shadow:0 0 22px rgba(23,113,212,.1)}
  html:not(.mobile-device) .desktop-sidebar-complex{margin-top:auto;position:relative;overflow:hidden;min-height:210px;border:1px solid color-mix(in srgb,var(--app-blue) 23%,var(--app-border));border-radius:15px;padding:126px 14px 14px;background:var(--app-surface);box-shadow:var(--app-shadow)}
  html:not(.mobile-device) .desktop-sidebar-photo{position:absolute;inset:0 0 auto;height:135px;background-image:linear-gradient(180deg,transparent,color-mix(in srgb,var(--app-surface) 92%,transparent)),url('/assets/vtr24-bg-light.jpg');background-size:cover;background-position:58% 55%}
  html[data-theme="dark"]:not(.mobile-device) .desktop-sidebar-photo{background-image:linear-gradient(180deg,transparent,#102948 98%),url('/assets/vtr24-bg-dark.png')}
  html:not(.mobile-device) .desktop-sidebar-complex strong{position:relative;z-index:1;font-size:15px;line-height:1.3}.desktop-sidebar-complex>span{position:relative;z-index:1;display:block;margin-top:8px;font-size:9px;color:var(--app-muted);letter-spacing:.08em}

  html:not(.mobile-device) .app-header{margin-left:var(--desktop-sidebar-w);width:calc(100% - var(--desktop-sidebar-w));min-height:58px;padding:0 22px;grid-template-columns:1fr auto;gap:16px;background:color-mix(in srgb,var(--app-surface-strong) 90%,transparent)}
  html:not(.mobile-device) .app-header>.app-brand-block,html:not(.mobile-device) .app-header>.app-nav{display:none}
  html:not(.mobile-device) .app-header-actions{grid-column:2;justify-self:end}
  html:not(.mobile-device) .role-dashboard,html:not(.mobile-device) .subpage,html:not(.mobile-device) .app-footer{margin-left:calc(var(--desktop-sidebar-w) + 18px);margin-right:18px;width:auto;max-width:none}
  html:not(.mobile-device) .role-dashboard{margin-top:16px}
  html:not(.mobile-device) .subpage{max-width:none}
  html:not(.mobile-device) .app-footer{padding-left:4px}
  html:not(.mobile-device) .dashboard-hero{display:none}
  html:not(.mobile-device) .dashboard-top-row{grid-template-columns:minmax(0,1fr) 300px}
  html:not(.mobile-device) .dashboard-quick-actions{min-height:142px}
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid button{min-height:72px}
}

@media (max-width:1179px){
  .dashboard-top-row{grid-template-columns:1fr}
  .dashboard-weather-card{min-height:120px}
  .weather-photo{background-position:58% 48%}
}
@media (max-width:700px){
  .dashboard-top-row{gap:10px}
  .quick-slogan{display:none}
  .dashboard-weather-card{min-height:112px;padding:15px}
  .weather-reading>span{font-size:25px}.weather-reading>strong{font-size:25px}
  .dashboard-quick-actions::before{width:52%;opacity:.13}
  .news-list .news-with-photo{grid-template-columns:42px 1fr;grid-template-areas:"photo body" "date body"}
  .news-list .news-with-photo .news-complex-thumb{grid-area:photo;width:42px;height:34px}
  .news-list .news-with-photo .news-date{grid-area:date}
  .news-list .news-with-photo>span:last-child{grid-area:body}
}


/* ==============================
   UK VTR24 v0.2.38 — vivid command center + cleaner mobile UK/TSN
   The desktop premium theme now follows the approved luminous mockup more
   closely. Mobile keeps the compact top navigation and merges the UK identity
   into the weather card instead of spending a full card on a greeting.
   ============================== */

/* Premium light: icy blue surfaces, sharper cyan edges, more depth. */
body.design-premium.app-mode{
  --app-bg:#edf5ff;
  --app-surface:rgba(250,253,255,.96);
  --app-surface-strong:#ffffff;
  --app-border:#b7d7f3;
  --app-blue:#087cda;
  --app-blue-soft:#dff2ff;
  --app-green:#00a978;
  --app-green-soft:#dcf8ef;
  --app-orange:#da8616;
  --app-orange-soft:#fff0d3;
  --app-violet:#6d63df;
  --app-shadow:0 18px 50px rgba(31,102,160,.12);
}
html[data-theme="dark"] body.design-premium.app-mode{
  --app-bg:#061326;
  --app-surface:rgba(8,27,50,.965);
  --app-surface-strong:#0b203a;
  --app-border:#1c5e93;
  --app-text:#f7fbff;
  --app-muted:#9ebbd5;
  --app-blue:#45b7ff;
  --app-blue-soft:#0d3760;
  --app-green:#38e5ac;
  --app-green-soft:#0b4338;
  --app-orange:#ffb14c;
  --app-orange-soft:#4c3011;
  --app-red:#ff7283;
  --app-red-soft:#4b1725;
  --app-violet:#8e7cff;
  --app-shadow:0 18px 52px rgba(0,0,0,.32);
}
body.design-premium.app-mode .app-view{
  background:
    radial-gradient(circle at 17% -8%,rgba(35,151,255,.14),transparent 28%),
    radial-gradient(circle at 95% 4%,rgba(91,79,255,.11),transparent 24%),
    linear-gradient(180deg,color-mix(in srgb,var(--app-bg) 96%,#fff),var(--app-bg));
}
html[data-theme="dark"] body.design-premium.app-mode .app-view{
  background:
    radial-gradient(circle at 15% -8%,rgba(18,123,232,.22),transparent 30%),
    radial-gradient(circle at 92% 0%,rgba(38,120,218,.14),transparent 24%),
    linear-gradient(180deg,#07172c 0%,#061326 56%,#061124 100%);
}
body.design-premium.app-mode .panel-card,
body.design-premium.app-mode .stat-card{
  border-color:color-mix(in srgb,var(--app-blue) 40%,var(--app-border));
  box-shadow:0 12px 36px rgba(18,83,139,.10),inset 0 1px 0 rgba(255,255,255,.4);
}
html[data-theme="dark"] body.design-premium.app-mode .panel-card,
html[data-theme="dark"] body.design-premium.app-mode .stat-card{
  border-color:rgba(49,136,206,.55);
  box-shadow:0 14px 40px rgba(0,0,0,.30),inset 0 1px 0 rgba(100,190,255,.08);
}
body.design-premium.app-mode .panel-card:hover,
body.design-premium.app-mode .stat-card:hover{
  border-color:color-mix(in srgb,var(--app-blue) 66%,var(--app-border));
}

/* Desktop rail: cleaner, brighter, no decorative promo card. */
@media (min-width:1180px){
  html:not(.mobile-device) body.app-mode{--desktop-sidebar-w:222px}
  html:not(.mobile-device) .desktop-sidebar{
    background:
      radial-gradient(circle at 10% 95%,rgba(50,156,255,.12),transparent 32%),
      linear-gradient(180deg,#f7fbff 0%,#edf6ff 100%);
    border-right:1px solid color-mix(in srgb,var(--app-blue) 32%,var(--app-border));
    box-shadow:18px 0 48px rgba(14,74,132,.10);
  }
  html[data-theme="dark"]:not(.mobile-device) .desktop-sidebar{
    background:
      radial-gradient(circle at 22% 90%,rgba(34,111,219,.26),transparent 36%),
      linear-gradient(180deg,#06162c 0%,#082344 58%,#071b34 100%);
    border-right-color:rgba(49,137,213,.45);
    box-shadow:18px 0 56px rgba(0,0,0,.28);
  }
  html:not(.mobile-device) .desktop-sidebar-complex{display:none!important}
  html:not(.mobile-device) .desktop-side-nav{gap:8px}
  html:not(.mobile-device) .desktop-side-nav .nav-link{
    min-height:47px;border-radius:12px;font-size:13px;letter-spacing:.01em;
  }
  html:not(.mobile-device) .desktop-side-nav .nav-link::before{
    width:25px;flex-basis:25px;font-size:18px;color:var(--app-blue);
  }
  html:not(.mobile-device) .desktop-side-nav .nav-link.active{
    color:#fff;
    background:linear-gradient(135deg,#1688e8,#1760c8);
    border-color:#5cc7ff;
    box-shadow:0 0 0 1px rgba(63,182,255,.22),0 8px 28px rgba(15,112,211,.25),inset 0 1px rgba(255,255,255,.2);
  }
  html[data-theme="dark"]:not(.mobile-device) .desktop-side-nav .nav-link.active{
    background:linear-gradient(135deg,#0d83e6,#1553aa);
    border-color:#42baff;
    box-shadow:0 0 26px rgba(24,140,255,.24),inset 0 1px rgba(255,255,255,.15);
  }
}

/* Quick actions: closer to the render — luminous icon blocks and stronger cards. */
body.design-premium.app-mode .dashboard-quick-actions{
  overflow:hidden;
  background:
    linear-gradient(110deg,color-mix(in srgb,var(--app-surface) 96%,var(--app-blue-soft)),var(--app-surface) 62%);
}
html[data-theme="dark"] body.design-premium.app-mode .dashboard-quick-actions{
  background:linear-gradient(112deg,#08213e 0%,#0b294a 53%,#0b213d 100%);
}
body.design-premium.app-mode .dashboard-quick-actions::before{opacity:.33;filter:saturate(1.18) contrast(1.06)}
html[data-theme="dark"] body.design-premium.app-mode .dashboard-quick-actions::before{opacity:.34;filter:saturate(1.2) brightness(.82)}
body.design-premium.app-mode .quick-grid button{
  position:relative;
  min-height:78px;
  border:1px solid color-mix(in srgb,var(--app-blue) 32%,var(--app-border));
  background:linear-gradient(145deg,color-mix(in srgb,var(--app-surface-strong) 94%,var(--app-blue-soft)),var(--app-surface-strong));
  box-shadow:0 8px 22px rgba(13,91,151,.09);
}
html[data-theme="dark"] body.design-premium.app-mode .quick-grid button{
  background:linear-gradient(145deg,#0d2a4a,#0a203a);
  border-color:rgba(56,142,211,.46);
  box-shadow:0 8px 24px rgba(0,0,0,.18),inset 0 1px rgba(86,185,255,.06);
}
body.design-premium.app-mode .quick-grid button>span{
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;border-radius:11px;
  background:linear-gradient(145deg,#18a7ff,#36d4ff);color:#fff;font-size:23px;
  box-shadow:0 0 22px rgba(36,169,255,.30),inset 0 1px rgba(255,255,255,.34);
}
body.design-premium.app-mode .quick-grid button:nth-child(2)>span{background:linear-gradient(145deg,#00b7cb,#25dfe7);box-shadow:0 0 22px rgba(0,194,210,.25)}
body.design-premium.app-mode .quick-grid button:nth-child(3)>span{background:linear-gradient(145deg,#168ef2,#6b67ff);box-shadow:0 0 22px rgba(66,120,255,.28)}
body.design-premium.app-mode .quick-grid button strong{font-size:13px}
body.design-premium.app-mode .quick-grid button small{color:var(--app-muted)}

/* Weather: stronger photo, blue glass edge and luminous reading. */
body.design-premium.app-mode .dashboard-weather-card{
  border-color:color-mix(in srgb,var(--app-blue) 56%,var(--app-border));
  box-shadow:0 0 0 1px rgba(40,153,238,.06),0 14px 34px rgba(15,78,135,.14);
}
html[data-theme="dark"] body.design-premium.app-mode .dashboard-weather-card{box-shadow:0 0 26px rgba(14,107,194,.16),0 14px 38px rgba(0,0,0,.26)}
body.design-premium.app-mode .weather-photo{opacity:1;filter:saturate(1.18) contrast(1.06)}
html[data-theme="dark"] body.design-premium.app-mode .weather-photo{filter:saturate(1.18) brightness(.82) contrast(1.08)}
body.design-premium.app-mode .weather-reading>strong{color:var(--app-text);text-shadow:0 0 18px color-mix(in srgb,var(--app-blue) 30%,transparent)}

/* Alert and statistics get the vivid render treatment. */
body.design-premium.app-mode .priority-alert{
  border-color:color-mix(in srgb,var(--app-orange) 58%,var(--app-border));
  background:linear-gradient(100deg,color-mix(in srgb,var(--app-orange-soft) 48%,var(--app-surface)),var(--app-surface) 48%);
  box-shadow:0 0 0 1px rgba(255,171,61,.06),0 12px 34px rgba(155,95,16,.08);
}
html[data-theme="dark"] body.design-premium.app-mode .priority-alert{
  background:linear-gradient(100deg,#1c271e 0%,#0b2039 33%,#0a1e37 100%);
  border-color:rgba(255,168,50,.72);
  box-shadow:0 0 24px rgba(255,146,24,.10);
}
body.design-premium.app-mode .alert-icon{box-shadow:0 0 20px color-mix(in srgb,var(--app-orange) 22%,transparent)}
body.design-premium.app-mode .request-stats-inline .stat-card{
  position:relative;overflow:hidden;padding-left:58px;min-height:104px;
}
body.design-premium.app-mode .request-stats-inline .stat-card::before{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;color:#fff;font-size:18px;background:linear-gradient(145deg,#118fea,#25c4ff);box-shadow:0 0 18px rgba(38,163,255,.27)
}
body.design-premium.app-mode .request-stats-inline .stat-card:nth-child(1)::before{content:"▤"}
body.design-premium.app-mode .request-stats-inline .stat-card:nth-child(2)::before{content:"✓";background:linear-gradient(145deg,#00a97b,#39e0ad)}
body.design-premium.app-mode .request-stats-inline .stat-card:nth-child(3)::before{content:"◷";background:linear-gradient(145deg,#197ce0,#5ab8ff)}
body.design-premium.app-mode .request-stats-inline .stat-card:nth-child(4)::before{content:"♟";background:linear-gradient(145deg,#2778df,#36c7ff)}
body.design-premium.app-mode .request-stats-inline .stat-card strong{font-size:29px}
body.design-premium.app-mode .request-stats-inline .stat-card small{font-weight:700}

/* Requests and team: rows look like actionable command-center items. */
body.design-premium.app-mode #requestsSection .request-row{
  border:1px solid transparent;border-left:3px solid color-mix(in srgb,var(--app-blue) 78%,#fff0);
  background:linear-gradient(90deg,color-mix(in srgb,var(--app-blue-soft) 22%,transparent),transparent 24%);
  border-radius:9px;padding:10px 12px;margin-bottom:6px;
}
body.design-premium.app-mode #requestsSection .request-row:hover{border-color:color-mix(in srgb,var(--app-blue) 30%,transparent);border-left-color:var(--app-blue);background:color-mix(in srgb,var(--app-blue-soft) 36%,transparent)}
body.design-premium.app-mode .team-panel-stretched .staff-row{border-color:color-mix(in srgb,var(--app-blue) 18%,var(--app-border))}
body.design-premium.app-mode .team-panel-stretched .staff-avatar{background:linear-gradient(145deg,#126fca,#2ca9ff);color:#fff;box-shadow:0 0 16px rgba(36,146,242,.20)}

/* Work / news / document lower blocks: brighter headers and recognizable icons. */
body.design-premium.app-mode .work-grid article{
  background:linear-gradient(145deg,color-mix(in srgb,var(--app-surface-strong) 95%,var(--app-blue-soft)),var(--app-surface));
  border-color:color-mix(in srgb,var(--app-blue) 27%,var(--app-border));
}
html[data-theme="dark"] body.design-premium.app-mode .work-grid article{background:linear-gradient(145deg,#0a2543,#081d35);border-color:rgba(45,124,189,.42)}
body.design-premium.app-mode .work-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:color-mix(in srgb,var(--app-blue-soft) 90%,var(--app-surface));font-size:20px}
body.design-premium.app-mode .news-highlight-section .section-heading h2::before{content:"📣";display:inline-block;margin-right:8px;filter:saturate(1.25)}
body.design-premium.app-mode #documentsSection .section-heading h2::before{content:"📄";display:inline-block;margin-right:8px}
body.design-premium.app-mode .news-list button,
body.design-premium.app-mode .document-list button,
body.design-premium.app-mode .real-document-download{
  border-radius:9px;transition:.16s ease;
}
body.design-premium.app-mode .news-list button:hover,
body.design-premium.app-mode .document-list button:hover,
body.design-premium.app-mode .real-document-download:hover{background:color-mix(in srgb,var(--app-blue-soft) 42%,transparent);transform:translateX(2px)}
body.design-premium.app-mode .document-list button>span,
body.design-premium.app-mode .real-document-download>span{box-shadow:0 0 14px rgba(214,53,70,.12)}

/* Stable mobile header order on iPhone, Chrome Android and Samsung Internet. */
html.mobile-device .app-header-actions{display:flex!important;flex-flow:row nowrap!important;direction:ltr!important;align-items:center!important;gap:5px!important}
html.mobile-device #headerAnnouncementsButton{order:1!important}
html.mobile-device #headerChatButton{order:2!important}
html.mobile-device #settingsGearButton{order:3!important}
html.mobile-device #appThemeToggle{order:4!important}
html.mobile-device #notificationsButton{order:5!important}
html.mobile-device .header-role-switch{order:6!important}
html.mobile-device .profile-chip{order:7!important}
html.mobile-device #logoutButton{order:8!important}
html.mobile-device .app-header-actions>*{flex:0 0 auto!important}

/* Mobile UK/TSN: remove the duplicate management-company hero. Weather becomes
   the compact identity card, matching the approved mobile render. */
.mobile-weather-date,.mobile-weather-login{display:none}
html.mobile-device body[data-preview-role="uk"] .dashboard-hero{display:none!important}
html.mobile-device body[data-preview-role="uk"] .dashboard-top-row{display:flex!important;flex-direction:column!important}
html.mobile-device body[data-preview-role="uk"] .dashboard-weather-card{order:-1!important}
html.mobile-device body[data-preview-role="uk"] .weather-copy .weather-now-label,
html.mobile-device body[data-preview-role="uk"] #weatherUpdated{display:none!important}
html.mobile-device body[data-preview-role="uk"] .mobile-weather-date,
html.mobile-device body[data-preview-role="uk"] .mobile-weather-login{display:block!important}
html.mobile-device body[data-preview-role="uk"] .mobile-weather-date{font-size:12px!important;color:var(--app-text)!important;font-weight:700;margin-top:5px}
html.mobile-device body[data-preview-role="uk"] .mobile-weather-login{font-size:11px!important;color:var(--app-muted)!important;margin-top:3px}
html.mobile-device body[data-preview-role="uk"] .dashboard-weather-card{
  min-height:132px!important;padding:16px 17px!important;border-radius:17px!important;
  grid-template-columns:minmax(0,1fr) auto!important;
}
html.mobile-device body[data-preview-role="uk"] .weather-copy>strong{font-size:24px!important}
html.mobile-device body[data-preview-role="uk"] .weather-reading>span{font-size:31px!important}
html.mobile-device body[data-preview-role="uk"] .weather-reading>strong{font-size:32px!important}
html.mobile-device body[data-preview-role="uk"] .weather-reading>small{font-size:11px!important}

/* On mobile the quick action icons should feel like the mockup, but remain
   touch-friendly on narrow Fold-class displays. */
html.mobile-device body.design-premium.app-mode .dashboard-quick-actions{padding:14px!important}
html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button{min-height:128px!important;padding:12px 9px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:8px!important}
html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button>span{width:42px!important;height:42px!important;flex-basis:42px!important}
html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button strong{font-size:13px!important;line-height:1.2!important}
html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button small{font-size:10px!important;line-height:1.3!important}
@media(max-width:430px){
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button{min-height:120px!important;padding:10px 7px!important}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button strong{font-size:12px!important}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button small{font-size:9px!important}
}
@media(max-width:345px){
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid{grid-template-columns:1fr 1fr!important}
}

/* =========================================================
   UK VTR24 v0.2.38 — presentation start page
   Goal: closer to the approved presentation mockup while
   keeping the existing live data and all current functions.
   ========================================================= */

/* Premium palette becomes the presentation-grade default. */
body.design-premium.app-mode .app-view{
  background:
    radial-gradient(circle at 88% -8%,rgba(42,104,255,.15),transparent 28%),
    radial-gradient(circle at 8% 8%,rgba(0,169,255,.12),transparent 24%),
    linear-gradient(180deg,#eef7ff 0%,#f7fbff 52%,#eef6ff 100%);
}
html[data-theme="dark"] body.design-premium.app-mode .app-view{
  background:
    radial-gradient(circle at 82% -10%,rgba(45,99,255,.28),transparent 28%),
    radial-gradient(circle at 4% 5%,rgba(0,178,255,.18),transparent 25%),
    linear-gradient(180deg,#030d1d 0%,#041428 48%,#031023 100%);
}
body.design-premium.app-mode .panel-card,
body.design-premium.app-mode .stat-card{
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
html[data-theme="dark"] body.design-premium.app-mode .panel-card,
html[data-theme="dark"] body.design-premium.app-mode .stat-card{
  background:linear-gradient(145deg,rgba(7,31,57,.96),rgba(5,21,42,.97));
  border-color:rgba(39,137,220,.48);
  box-shadow:0 18px 42px rgba(0,0,0,.28),inset 0 1px 0 rgba(119,199,255,.07);
}
html[data-theme="light"] body.design-premium.app-mode .panel-card,
html[data-theme="light"] body.design-premium.app-mode .stat-card{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(243,249,255,.96));
  border-color:rgba(41,122,202,.28);
  box-shadow:0 16px 34px rgba(21,84,145,.10),inset 0 1px 0 #fff;
}

/* Desktop command-center shell. */
@media(min-width:1180px){
  html:not(.mobile-device) body.app-mode{--desktop-sidebar-w:224px}
  html:not(.mobile-device) .desktop-sidebar{
    padding:18px 14px 18px;
    background:
      radial-gradient(circle at 32% 88%,rgba(0,150,255,.25),transparent 34%),
      linear-gradient(180deg,#03152b 0%,#062347 58%,#061a35 100%);
    border-right:1px solid rgba(49,153,235,.44);
    box-shadow:18px 0 55px rgba(0,0,0,.28);
  }
  html[data-theme="light"]:not(.mobile-device) .desktop-sidebar{
    background:
      radial-gradient(circle at 30% 88%,rgba(55,155,255,.16),transparent 34%),
      linear-gradient(180deg,#f7fbff 0%,#e8f4ff 58%,#edf7ff 100%);
    box-shadow:18px 0 45px rgba(25,88,146,.12);
  }
  html:not(.mobile-device) .desktop-sidebar-brand{padding:4px 8px 24px}
  html:not(.mobile-device) .desktop-sidebar-brand .app-logo-mark{color:#1db3ff;filter:drop-shadow(0 0 9px rgba(19,166,255,.35))}
  html:not(.mobile-device) .desktop-side-nav .nav-link{
    position:relative;min-height:48px;border:1px solid transparent;color:var(--app-muted);padding-left:14px;
  }
  html:not(.mobile-device) .desktop-side-nav .nav-link:hover{
    color:var(--app-text);background:rgba(27,124,222,.10);border-color:rgba(70,167,245,.22);
  }
  html:not(.mobile-device) .desktop-side-nav .nav-link.active{
    color:#fff;background:linear-gradient(135deg,#0b8ef1,#1559c8 72%);
    border-color:#4bc7ff;box-shadow:0 0 0 1px rgba(72,195,255,.14),0 8px 30px rgba(0,126,255,.28),inset 0 1px rgba(255,255,255,.18);
  }
  html:not(.mobile-device) .role-dashboard{
    gap:12px;margin-top:12px;
  }
  html:not(.mobile-device) .dashboard-top-row{grid-template-columns:minmax(0,1fr) 285px;gap:12px}
  html:not(.mobile-device) .dashboard-quick-actions{min-height:145px}
  html:not(.mobile-device) .dashboard-weather-card{min-height:145px}
  html:not(.mobile-device) .request-overview-layout{gap:12px}
  html:not(.mobile-device) .content-columns{gap:12px}
}

/* Header: dark glass on the dark theme, cleaner actions. */
html[data-theme="dark"] body.design-premium.app-mode .app-header{
  background:rgba(3,18,36,.90);border-bottom-color:rgba(42,126,202,.35);box-shadow:0 8px 34px rgba(0,0,0,.18);
}
body.design-premium.app-mode .icon-action,
body.design-premium.app-mode .profile-chip,
body.design-premium.app-mode .logout-action{
  border-color:color-mix(in srgb,var(--app-blue) 24%,var(--app-border));
}
html[data-theme="dark"] body.design-premium.app-mode .icon-action,
html[data-theme="dark"] body.design-premium.app-mode .profile-chip,
html[data-theme="dark"] body.design-premium.app-mode .logout-action{
  background:rgba(8,29,53,.92);border-color:rgba(55,135,203,.38);
}

/* Quick actions: a wide visual hero rather than three plain buttons. */
body.design-premium.app-mode .dashboard-quick-actions{
  position:relative;isolation:isolate;padding:20px 22px;
  border-color:color-mix(in srgb,var(--app-blue) 48%,var(--app-border));
}
body.design-premium.app-mode .dashboard-quick-actions::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,color-mix(in srgb,var(--app-surface) 94%,transparent) 0%,color-mix(in srgb,var(--app-surface) 76%,transparent) 54%,transparent 100%),
    url('/assets/vtr24-bg-light.jpg') 70% 55%/cover no-repeat;
  opacity:.72;
}
html[data-theme="dark"] body.design-premium.app-mode .dashboard-quick-actions::before{
  background:
    linear-gradient(90deg,rgba(4,24,46,.95) 0%,rgba(4,27,51,.84) 53%,rgba(4,22,43,.42) 100%),
    url('/assets/vtr24-bg-dark.png') 68% 54%/cover no-repeat;
  opacity:1;filter:saturate(1.22) contrast(1.08);
}
body.design-premium.app-mode .dashboard-quick-actions .section-heading{align-items:flex-start;margin-bottom:13px}
body.design-premium.app-mode .dashboard-quick-actions .quick-slogan{color:var(--app-blue);font-size:11px;font-weight:800;letter-spacing:.04em;text-align:right;max-width:150px}
body.design-premium.app-mode .dashboard-quick-actions .quick-grid{gap:10px}
body.design-premium.app-mode .dashboard-quick-actions .quick-grid button{
  min-height:72px;border-radius:13px;padding:11px 13px;grid-template-columns:48px 1fr;column-gap:11px;
  background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(240,248,255,.88));
  border-color:rgba(48,129,204,.26);
}
html[data-theme="dark"] body.design-premium.app-mode .dashboard-quick-actions .quick-grid button{
  background:linear-gradient(145deg,rgba(8,45,80,.88),rgba(6,27,52,.92));
  border-color:rgba(45,147,230,.44);box-shadow:0 9px 22px rgba(0,0,0,.18),inset 0 1px rgba(110,205,255,.06);
}
body.design-premium.app-mode .dashboard-quick-actions .quick-grid button>span{
  width:46px;height:46px;border-radius:12px;font-size:24px;
}
body.design-premium.app-mode .dashboard-quick-actions .quick-grid button strong{font-size:13px;line-height:1.25}
body.design-premium.app-mode .dashboard-quick-actions .quick-grid button small{font-size:10px;line-height:1.25}

/* Weather cards: one visual language for UK/TSN and owners. */
.dashboard-weather-card,
.owner-weather-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  border:1px solid rgba(58,166,255,.72)!important;
  background:#06264a!important;
  box-shadow:0 0 0 1px rgba(55,177,255,.08),0 16px 36px rgba(0,71,139,.20)!important;
}
.dashboard-weather-card::before,
.owner-weather-hero::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background:url('/assets/vtr24-bg-dark.png') center 51%/cover no-repeat;
  filter:saturate(1.22) brightness(.82) contrast(1.08);
}
.dashboard-weather-card::after,
.owner-weather-hero::after{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,rgba(4,25,49,.88) 0%,rgba(5,25,48,.52) 54%,rgba(2,16,33,.18) 100%);
}
.dashboard-weather-card .weather-photo{display:none!important}
.dashboard-weather-card .weather-copy,
.dashboard-weather-card .weather-reading{position:relative;z-index:1}
.dashboard-weather-card .weather-copy>strong{color:#fff;font-size:23px}
.dashboard-weather-card .weather-copy small{color:rgba(232,244,255,.78)}
.dashboard-weather-card .weather-now-label{color:#9cd7ff}
.dashboard-weather-card .weather-reading>strong{color:#fff!important;font-size:32px;text-shadow:0 0 20px rgba(67,186,255,.45)}
.dashboard-weather-card .weather-reading>small{color:#fff}
.owner-weather-hero{
  min-height:170px;padding:23px 26px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:18px;border-radius:19px;
}
.owner-weather-photo{display:none}
.owner-weather-copy{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;max-width:68%}
.owner-weather-copy .weather-now-label{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:#8bd2ff;font-weight:800}
.owner-weather-copy h1{margin:6px 0 7px;font-size:34px;line-height:1;color:#fff}
.owner-weather-copy strong{font-size:16px;color:#fff}
.owner-weather-copy small{margin-top:5px;color:rgba(230,244,255,.82);font-size:11px;line-height:1.35}
.owner-weather-reading{position:relative;z-index:1;display:grid;grid-template-columns:auto auto;grid-template-areas:"icon temp" "icon text";align-items:end;column-gap:9px;text-align:right}
.owner-weather-reading>span{grid-area:icon;font-size:38px}
.owner-weather-reading>strong{grid-area:temp;font-size:38px;color:#fff;line-height:1;text-shadow:0 0 20px rgba(67,186,255,.45)}
.owner-weather-reading>small{grid-area:text;color:#fff;font-size:11px}
html[data-theme="light"] .dashboard-weather-card::before,
html[data-theme="light"] .owner-weather-hero::before{filter:saturate(1.03) brightness(1.16) contrast(.94)}
html[data-theme="light"] .dashboard-weather-card::after,
html[data-theme="light"] .owner-weather-hero::after{background:linear-gradient(90deg,rgba(13,63,110,.78),rgba(13,78,126,.30) 62%,rgba(255,255,255,.04))}

/* Important notice: strong amber edge like the render. */
body.design-premium.app-mode .priority-alert{
  border:1px solid rgba(246,156,38,.75);border-left-width:4px;
  background:linear-gradient(100deg,rgba(255,168,46,.12),color-mix(in srgb,var(--app-surface) 94%,transparent) 24%);
  box-shadow:0 0 22px rgba(255,150,28,.08),0 12px 30px rgba(0,0,0,.06);
}
html[data-theme="dark"] body.design-premium.app-mode .priority-alert{
  background:linear-gradient(100deg,rgba(63,43,10,.65),rgba(5,29,53,.97) 24%,rgba(4,23,44,.98));
}
body.design-premium.app-mode .alert-icon{background:linear-gradient(145deg,#8a4a08,#d68a20);color:#ffd887;border:1px solid rgba(255,187,80,.30)}

/* Stat cards: icon-led visual tiles. */
body.design-premium.app-mode .request-stats-inline{gap:10px}
body.design-premium.app-mode .request-stats-inline .stat-card{
  min-height:90px;padding:13px 13px 13px 58px;border-radius:13px;
}
body.design-premium.app-mode .request-stats-inline .stat-card::before{
  left:13px;width:36px;height:36px;border-radius:11px;font-size:19px;
  border:1px solid rgba(255,255,255,.14);
}
body.design-premium.app-mode .request-stats-inline .stat-card>span{font-size:10px}
body.design-premium.app-mode .request-stats-inline .stat-card strong{font-size:27px;margin-top:6px}

/* Requests: compact, luminous rows. */
body.design-premium.app-mode #requestsSection{padding:17px 18px}
body.design-premium.app-mode #requestsSection .section-heading{margin-bottom:10px}
body.design-premium.app-mode #requestsSection .request-list{gap:4px}
body.design-premium.app-mode #requestsSection .request-row{
  min-height:48px;margin:0;border:1px solid rgba(44,132,207,.20);border-left:3px solid #18a9ff;border-radius:10px;
  background:linear-gradient(90deg,rgba(12,115,206,.12),rgba(12,115,206,.015) 40%);
}
html[data-theme="dark"] body.design-premium.app-mode #requestsSection .request-row{background:linear-gradient(90deg,rgba(8,109,198,.16),rgba(4,28,51,.08) 46%)}

/* Team right rail: glowing avatars and call-ready feel. */
body.design-premium.app-mode .team-panel-stretched{padding:18px}
body.design-premium.app-mode .team-panel-stretched .team-list>div{padding:10px 0}
body.design-premium.app-mode .team-panel-stretched .person-avatar,
body.design-premium.app-mode .team-panel-stretched .staff-avatar{
  border:1px solid rgba(77,182,255,.28);box-shadow:0 0 18px rgba(21,146,244,.16);
}

/* Work / news / documents presentation polish. */
body.design-premium.app-mode .work-grid{gap:9px}
body.design-premium.app-mode .work-grid article{min-height:94px;padding:11px 12px;border-radius:12px}
body.design-premium.app-mode .work-icon{background:linear-gradient(145deg,rgba(19,128,224,.20),rgba(28,105,201,.12));border:1px solid rgba(70,173,255,.20)}
body.design-premium.app-mode .news-highlight-section,
body.design-premium.app-mode #documentsSection{position:relative;overflow:hidden}
body.design-premium.app-mode .news-highlight-section::before,
body.design-premium.app-mode #documentsSection::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#1db8ff,#2967ff)}
body.design-premium.app-mode .news-list button,
body.design-premium.app-mode .document-list button,
body.design-premium.app-mode .real-document-download{border:1px solid transparent}
body.design-premium.app-mode .news-list button:hover,
body.design-premium.app-mode .document-list button:hover,
body.design-premium.app-mode .real-document-download:hover{border-color:rgba(49,151,230,.28)}
body.design-premium.app-mode .news-date{background:linear-gradient(145deg,#0d67ad,#168fe8);color:#dff5ff;border-radius:9px}
body.design-premium.app-mode .document-list button>span,
body.design-premium.app-mode .real-document-download>span{background:linear-gradient(145deg,#7d1f2f,#c92e45);color:#fff}

/* Owner action grid should look like a polished product, not plain form buttons. */
body.design-premium.app-mode .owner-quick-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
body.design-premium.app-mode .owner-action{
  min-height:96px;border-color:color-mix(in srgb,var(--app-blue) 28%,var(--app-border));
  background:linear-gradient(145deg,color-mix(in srgb,var(--app-surface-strong) 95%,var(--app-blue-soft)),var(--app-surface));
}
html[data-theme="dark"] body.design-premium.app-mode .owner-action{background:linear-gradient(145deg,#0a2848,#071d35);border-color:rgba(48,134,203,.42)}
body.design-premium.app-mode .owner-action>span{width:42px;height:42px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#0c8ce8,#29c5ff);font-size:21px;box-shadow:0 0 18px rgba(21,152,241,.24)}
body.design-premium.app-mode .owner-action:nth-child(2)>span{background:linear-gradient(145deg,#0ea9d9,#34dcf6)}
body.design-premium.app-mode .owner-action:nth-child(4){border-color:rgba(236,157,69,.44);background:linear-gradient(145deg,color-mix(in srgb,var(--app-orange-soft) 22%,var(--app-surface)),var(--app-surface))}
body.design-premium.app-mode .owner-action:nth-child(4)>span{background:linear-gradient(145deg,#c66d19,#f1a041)}
body.design-premium.app-mode .owner-action:nth-child(6){border-color:rgba(45,195,161,.36);background:linear-gradient(145deg,color-mix(in srgb,var(--app-green-soft) 22%,var(--app-surface)),var(--app-surface))}
body.design-premium.app-mode .owner-action:nth-child(6)>span{background:linear-gradient(145deg,#099d81,#29d4a8)}

/* Mobile shell inspired by the approved render: compact top bar + bottom nav. */
.mobile-menu-toggle,.mobile-bottom-nav,.mobile-control-sheet{display:none}
@media(max-width:760px){
  html.mobile-device body.app-mode{padding-bottom:74px}
  html.mobile-device .app-header{
    position:sticky;top:0;min-height:78px;padding:10px 14px;grid-template-columns:minmax(0,1fr) auto;gap:8px;
    background:rgba(4,20,40,.96);border-bottom:1px solid rgba(43,126,202,.35);box-shadow:0 8px 28px rgba(0,0,0,.20);
  }
  html[data-theme="light"].mobile-device .app-header{background:rgba(248,252,255,.96)}
  html.mobile-device .app-brand-block{min-width:0;gap:9px}
  html.mobile-device .app-brand-block .app-logo-mark{width:34px;height:40px;color:#20b4ff;filter:drop-shadow(0 0 8px rgba(15,166,255,.30))}
  html.mobile-device .app-brand-block strong{font-size:16px;white-space:nowrap}
  html.mobile-device .app-brand-block small{display:none}
  html.mobile-device .app-nav{display:none!important}
  html.mobile-device .app-header-actions{display:flex!important;gap:6px!important;overflow:visible!important;max-width:none!important}
  html.mobile-device .app-header-actions>*{display:none!important}
  html.mobile-device #notificationsButton,
  html.mobile-device #mobileMenuButton{display:grid!important;width:42px;height:42px;border-radius:12px}
  html.mobile-device #mobileMenuButton{font-size:22px}
  html.mobile-device .mobile-menu-toggle{display:grid}
  html.mobile-device .role-dashboard{width:calc(100% - 20px)!important;margin:10px 10px 0!important;gap:10px!important}
  html.mobile-device .panel-card{border-radius:17px!important}
  html.mobile-device .app-footer{display:none!important}

  html.mobile-device .mobile-bottom-nav{
    position:fixed;display:grid;z-index:70;left:0;right:0;bottom:0;height:66px;padding:5px 8px max(5px,env(safe-area-inset-bottom));
    grid-template-columns:repeat(5,1fr);gap:3px;background:rgba(3,19,38,.96);border-top:1px solid rgba(49,137,213,.42);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 -10px 30px rgba(0,0,0,.22);
  }
  html[data-theme="light"].mobile-device .mobile-bottom-nav{background:rgba(250,253,255,.97);box-shadow:0 -10px 26px rgba(16,77,131,.12)}
  html.mobile-device .mobile-bottom-nav button{
    border:0;background:transparent;color:var(--app-muted);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:10px;min-width:0;
  }
  html.mobile-device .mobile-bottom-nav button>span{font-size:20px;line-height:1}
  html.mobile-device .mobile-bottom-nav button>small{font-size:9px;white-space:nowrap}
  html.mobile-device .mobile-bottom-nav button.active{color:#5dc3ff;background:rgba(18,110,202,.16)}

  html.mobile-device .mobile-control-sheet{
    display:flex;position:fixed;z-index:90;inset:0;padding:0 10px 76px;align-items:flex-end;background:rgba(0,8,18,.48);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  }
  html.mobile-device .mobile-control-sheet.hidden{display:none!important}
  html.mobile-device .mobile-control-sheet::before{content:"";position:absolute;left:10px;right:10px;bottom:76px;height:min(390px,70vh);border-radius:22px;background:linear-gradient(180deg,#0a2748,#061a33);border:1px solid rgba(58,157,235,.46);box-shadow:0 20px 55px rgba(0,0,0,.38)}
  html[data-theme="light"].mobile-device .mobile-control-sheet::before{background:linear-gradient(180deg,#fff,#eef7ff);box-shadow:0 20px 55px rgba(16,76,132,.24)}
  html.mobile-device .mobile-control-sheet-head,
  html.mobile-device .mobile-control-sheet-grid,
  html.mobile-device .mobile-role-switch-wrap{position:relative;z-index:1;width:100%}
  html.mobile-device .mobile-control-sheet{flex-direction:column;justify-content:flex-end}
  html.mobile-device .mobile-control-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 10px}
  html.mobile-device .mobile-control-sheet-head strong{font-size:18px}
  html.mobile-device .mobile-control-sheet-head button{width:34px;height:34px;border-radius:10px;border:1px solid var(--app-border);background:var(--app-surface-strong);color:var(--app-text);font-size:20px}
  html.mobile-device .mobile-control-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 18px 10px}
  html.mobile-device .mobile-control-sheet-grid>button{min-height:77px;border:1px solid rgba(55,139,208,.38);border-radius:13px;background:rgba(9,37,66,.82);color:#fff;text-align:left;padding:11px;display:grid;grid-template-columns:34px 1fr;grid-template-areas:"i t" "i s";column-gap:9px}
  html[data-theme="light"].mobile-device .mobile-control-sheet-grid>button{background:#f6fbff;color:var(--app-text)}
  html.mobile-device .mobile-control-sheet-grid>button>span{grid-area:i;font-size:22px}
  html.mobile-device .mobile-control-sheet-grid>button>strong{grid-area:t;font-size:12px}
  html.mobile-device .mobile-control-sheet-grid>button>small{grid-area:s;font-size:9px;color:var(--app-muted)}
  html.mobile-device .mobile-role-switch-wrap{padding:0 18px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--app-muted);font-size:10px}
  html.mobile-device .mobile-role-switch{margin-left:auto}

  /* UK weather comes first; owner has an equivalent identity-weather card. */
  html.mobile-device body[data-preview-role="uk"] .dashboard-top-row{display:flex!important;flex-direction:column!important;gap:10px!important}
  html.mobile-device body[data-preview-role="uk"] .dashboard-weather-card{order:-1!important;min-height:150px!important;padding:18px!important}
  html.mobile-device body[data-preview-role="uk"] .dashboard-weather-card .weather-copy>strong{font-size:28px!important}
  html.mobile-device body[data-preview-role="uk"] .dashboard-weather-card .weather-reading>strong{font-size:36px!important}
  html.mobile-device body[data-preview-role="uk"] .dashboard-weather-card .weather-reading>span{font-size:34px!important}
  html.mobile-device body[data-preview-role="uk"] .mobile-weather-date{display:block!important;font-size:12px!important;color:#fff!important;font-weight:700!important}
  html.mobile-device body[data-preview-role="uk"] .mobile-weather-login{display:block!important;font-size:11px!important;color:rgba(230,244,255,.78)!important}

  html.mobile-device .owner-weather-hero{min-height:162px;padding:18px!important;grid-template-columns:minmax(0,1fr) auto!important}
  html.mobile-device .owner-weather-copy{max-width:none}
  html.mobile-device .owner-weather-copy h1{font-size:28px}
  html.mobile-device .owner-weather-copy strong{font-size:15px}
  html.mobile-device .owner-weather-copy small{font-size:10px}
  html.mobile-device .owner-weather-reading>span{font-size:32px}
  html.mobile-device .owner-weather-reading>strong{font-size:34px}

  /* Quick actions are three bright cards just like the mockup. */
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions{padding:14px!important}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .section-heading{margin-bottom:10px}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-slogan{display:none}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button{min-height:124px!important;padding:10px 8px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:7px!important}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button>span{width:42px!important;height:42px!important;flex-basis:42px!important}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button strong{font-size:12px!important;line-height:1.25!important}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button small{font-size:9px!important;line-height:1.25!important}

  html.mobile-device .priority-alert{grid-template-columns:auto 1fr!important;padding:14px!important}
  html.mobile-device .priority-alert>.ghost-button{grid-column:1/-1;width:100%}
  html.mobile-device .owner-quick-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  html.mobile-device .owner-action{min-height:132px!important;padding:13px!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:8px!important}
  html.mobile-device .owner-action>span{width:42px!important;height:42px!important;flex:0 0 42px!important}
  html.mobile-device .owner-action strong{font-size:15px!important;line-height:1.25!important}
  html.mobile-device .owner-action small{font-size:11px!important;line-height:1.35!important}

  html.mobile-device .notification-optin{bottom:76px!important;left:10px!important;right:10px!important;width:auto!important}
}

@media(max-width:390px){
  html.mobile-device .app-header{padding-left:10px;padding-right:10px}
  html.mobile-device .app-brand-block strong{font-size:14px;letter-spacing:.10em}
  html.mobile-device #notificationsButton,html.mobile-device #mobileMenuButton{width:40px;height:40px}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button{min-height:116px!important;padding:9px 6px!important}
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid button strong{font-size:11px!important}
  html.mobile-device .owner-weather-reading>strong{font-size:31px}
}

@media(max-width:340px){
  html.mobile-device body.design-premium.app-mode .dashboard-quick-actions .quick-grid{grid-template-columns:1fr 1fr!important}
}

/* =========================================================
   UK VTR24 v0.2.39 — restore proven mobile navigation
   Android and iPhone use the same compact top action row and
   the same horizontally scrollable navigation as before v0.2.38.
   No hamburger sheet and no bottom navigation bar.
   ========================================================= */
.mobile-menu-toggle,
.mobile-control-sheet,
.mobile-bottom-nav{display:none!important}

html.mobile-device body.app-mode{padding-bottom:0!important}

@media(max-width:760px){
  html.mobile-device .app-header{
    position:sticky!important;
    top:0!important;
    z-index:60!important;
    min-height:0!important;
    display:grid!important;
    grid-template-columns:minmax(78px,1fr) auto!important;
    grid-auto-rows:auto!important;
    align-items:center!important;
    gap:6px 5px!important;
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))!important;
    background:rgba(4,20,40,.96)!important;
    border-bottom:1px solid rgba(43,126,202,.35)!important;
    box-shadow:0 8px 28px rgba(0,0,0,.18)!important;
  }
  html[data-theme="light"].mobile-device .app-header{background:rgba(248,252,255,.97)!important}

  html.mobile-device .app-brand-block{
    min-width:0!important;
    max-width:88px!important;
    gap:7px!important;
    overflow:hidden!important;
  }
  html.mobile-device .app-brand-block .app-logo-mark{
    width:27px!important;height:33px!important;flex:0 0 auto!important;
    color:#20b4ff!important;filter:drop-shadow(0 0 7px rgba(15,166,255,.28))!important;
  }
  html.mobile-device .app-brand-block strong{
    display:block!important;max-width:49px!important;overflow:hidden!important;
    white-space:nowrap!important;text-overflow:ellipsis!important;
    font-size:12px!important;letter-spacing:.10em!important;
  }
  html.mobile-device .app-brand-block small{display:none!important}

  html.mobile-device .app-header-actions{
    min-width:0!important;
    display:flex!important;
    flex-flow:row nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:3px!important;
    overflow:visible!important;
    max-width:none!important;
    direction:ltr!important;
  }
  html.mobile-device .app-header-actions>*{flex:0 0 auto!important}
  html.mobile-device .profile-chip{display:none!important}

  /* Same order on Chrome Android, Samsung Internet, Firefox Android and Safari iOS. */
  html.mobile-device #headerAnnouncementsButton:not(.hidden){display:grid!important;order:1!important}
  html.mobile-device #headerChatButton:not(.hidden){display:grid!important;order:2!important}
  html.mobile-device #settingsGearButton:not(.hidden){display:grid!important;order:3!important}
  html.mobile-device #appThemeToggle:not(.hidden){display:grid!important;order:4!important}
  html.mobile-device #notificationsButton:not(.hidden){display:grid!important;order:5!important}
  html.mobile-device #logoutButton:not(.hidden){display:inline-flex!important;order:6!important}
  html.mobile-device #mobileMenuButton{display:none!important}

  html.mobile-device .icon-action{
    width:29px!important;height:29px!important;min-width:29px!important;
    border-radius:9px!important;font-size:14px!important;
  }
  html.mobile-device .icon-action.has-badge>span{
    top:-5px!important;right:-5px!important;min-width:17px!important;height:17px!important;font-size:9px!important;
  }
  html.mobile-device .logout-action{
    min-height:29px!important;height:29px!important;min-width:38px!important;
    padding:0 6px!important;border-radius:9px!important;font-size:9px!important;white-space:nowrap!important;
  }

  /* Temporary UK/Owner test switch remains in the same top row, but compact. */
  html.mobile-device .header-role-switch:not(.hidden){
    display:flex!important;position:static!important;order:6!important;
    width:max-content!important;max-width:none!important;margin:0!important;padding:1px!important;
    border-radius:8px!important;
  }
  html.mobile-device .header-role-switch .role-button{
    min-height:26px!important;height:26px!important;min-width:0!important;
    padding:0 4px!important;font-size:8px!important;line-height:1!important;white-space:nowrap!important;
  }
  html.mobile-device .header-role-switch .role-button[data-role="uk"]{min-width:28px!important}
  html.mobile-device .header-role-switch .role-button[data-role="owner"]{min-width:47px!important}

  /* Old mobile navigation: one horizontal row directly under the header. */
  html.mobile-device .app-nav{
    grid-column:1/-1!important;
    grid-row:2!important;
    width:100%!important;min-width:0!important;
    display:flex!important;
    justify-content:flex-start!important;
    gap:4px!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
    padding:4px 0 max(8px,env(safe-area-inset-bottom))!important;
    touch-action:pan-x!important;
  }
  html.mobile-device .app-nav::-webkit-scrollbar{display:none!important}
  html.mobile-device .app-nav .nav-link{
    flex:0 0 auto!important;scroll-snap-align:center!important;
    min-height:38px!important;min-width:92px!important;padding:0 11px!important;
    display:inline-flex!important;align-items:center!important;justify-content:center!important;
    border-radius:10px!important;font-size:12px!important;white-space:nowrap!important;
  }
  html.mobile-device .app-nav .nav-link[data-key="votes"]{min-width:118px!important}
  html.mobile-device .app-nav .nav-link[data-key="info"]{min-width:112px!important}

  html.mobile-device .role-dashboard{width:calc(100% - 20px)!important;margin:10px auto 0!important}
  html.mobile-device .app-footer{display:none!important}
  html.mobile-device .notification-optin{bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px))!important}
}

@media(max-width:390px){
  html.mobile-device .app-brand-block{max-width:82px!important}
  html.mobile-device .app-brand-block strong{max-width:43px!important;font-size:10.5px!important}
  html.mobile-device .app-header-actions{gap:2px!important}
  html.mobile-device .icon-action{width:28px!important;height:28px!important;min-width:28px!important}
  html.mobile-device .logout-action{height:28px!important;min-height:28px!important;min-width:36px!important;padding:0 5px!important;font-size:8.5px!important}
}

/* Desktop sidebar: v0.2.38 accidentally gave the first four items mobile button classes.
   v0.2.39 restores the normal sidebar appearance. */
@media(min-width:1180px){
  html:not(.mobile-device) .desktop-side-nav .nav-link{display:flex!important}
}


/* =========================================================
   UK VTR24 v0.2.40 — elevated dark dashboard cards
   Presentation polish only. Keeps v0.2.39 mobile navigation.
   ========================================================= */

/* Make the canvas visibly darker than the cards so the dashboard gains depth. */
html[data-theme="dark"] body.design-premium.app-mode .app-view{
  background:
    radial-gradient(circle at 83% -8%,rgba(37,103,255,.24),transparent 27%),
    radial-gradient(circle at 3% 7%,rgba(0,167,255,.13),transparent 23%),
    linear-gradient(180deg,#020914 0%,#03101f 47%,#020b17 100%);
}

/* Main dashboard surfaces: brighter than the page, stronger cyan edge, soft lift. */
html[data-theme="dark"] body.design-premium.app-mode .role-dashboard .panel-card,
html[data-theme="dark"] body.design-premium.app-mode .role-dashboard .stat-card{
  background:linear-gradient(145deg,rgba(10,38,68,.98),rgba(5,24,46,.985));
  border-color:rgba(55,151,229,.58);
  box-shadow:
    0 16px 34px rgba(0,0,0,.36),
    0 0 24px rgba(22,132,224,.055),
    inset 0 1px 0 rgba(137,211,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.16);
}

/* The larger content sections get a slightly calmer surface than metric cards. */
html[data-theme="dark"] body.design-premium.app-mode #ukDashboard > .panel-card,
html[data-theme="dark"] body.design-premium.app-mode #ukDashboard .content-panel,
html[data-theme="dark"] body.design-premium.app-mode #ownerDashboard > .panel-card,
html[data-theme="dark"] body.design-premium.app-mode #ownerDashboard .content-panel{
  background:linear-gradient(145deg,rgba(9,34,61,.985),rgba(5,22,43,.99));
}

/* Important notification keeps amber meaning but still sits above the canvas. */
html[data-theme="dark"] body.design-premium.app-mode .role-dashboard .priority-alert{
  background:linear-gradient(100deg,rgba(74,48,8,.82),rgba(8,31,56,.985) 25%,rgba(5,23,44,.99));
  border-color:rgba(245,165,52,.82);
  box-shadow:0 16px 34px rgba(0,0,0,.35),0 0 24px rgba(255,153,31,.08),inset 0 1px 0 rgba(255,203,116,.08);
}

/* Metric tiles should read as separate objects, not holes cut in the page. */
html[data-theme="dark"] body.design-premium.app-mode .request-stats-inline .stat-card{
  background:linear-gradient(145deg,rgba(10,46,82,.99),rgba(6,27,51,.99));
  border-color:rgba(61,161,239,.67);
  box-shadow:0 13px 27px rgba(0,0,0,.32),0 0 18px rgba(30,150,236,.07),inset 0 1px 0 rgba(148,218,255,.11);
}
html[data-theme="dark"] body.design-premium.app-mode .request-stats-inline .stat-card:hover{
  transform:translateY(-1px);
  border-color:rgba(91,190,255,.82);
  box-shadow:0 17px 32px rgba(0,0,0,.36),0 0 24px rgba(32,157,245,.10),inset 0 1px 0 rgba(164,226,255,.13);
}

/* Quick-action controls gain their own small layer inside the large hero card. */
html[data-theme="dark"] body.design-premium.app-mode .dashboard-quick-actions .quick-grid button{
  background:linear-gradient(145deg,rgba(12,55,95,.94),rgba(7,31,58,.97));
  border-color:rgba(58,161,239,.60);
  box-shadow:0 10px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(140,219,255,.09);
}
html[data-theme="dark"] body.design-premium.app-mode .dashboard-quick-actions .quick-grid button:hover{
  transform:translateY(-2px);
  border-color:rgba(88,194,255,.82);
  box-shadow:0 15px 28px rgba(0,0,0,.33),0 0 20px rgba(38,164,247,.10),inset 0 1px 0 rgba(160,226,255,.12);
}

/* Work tiles and owner action tiles are distinct cards inside their sections. */
html[data-theme="dark"] body.design-premium.app-mode .work-grid article,
html[data-theme="dark"] body.design-premium.app-mode .owner-action,
html[data-theme="dark"] body.design-premium.app-mode .owner-request-cards button{
  background:linear-gradient(145deg,rgba(10,43,76,.92),rgba(6,28,53,.96));
  border-color:rgba(50,137,207,.48);
  box-shadow:0 8px 18px rgba(0,0,0,.22),inset 0 1px 0 rgba(128,205,255,.06);
}
html[data-theme="dark"] body.design-premium.app-mode .work-grid article:hover,
html[data-theme="dark"] body.design-premium.app-mode .owner-action:hover,
html[data-theme="dark"] body.design-premium.app-mode .owner-request-cards button:hover{
  border-color:rgba(76,176,245,.66);
  box-shadow:0 11px 22px rgba(0,0,0,.28),0 0 16px rgba(26,142,229,.07);
}

/* Request rows and list items get a restrained inner surface so content is easier to scan. */
html[data-theme="dark"] body.design-premium.app-mode #requestsSection .request-row{
  background:linear-gradient(90deg,rgba(11,72,124,.25),rgba(8,35,64,.32) 55%,rgba(6,27,51,.24));
  border-color:rgba(47,136,207,.28);
  border-left-color:#22b6ff;
}
html[data-theme="dark"] body.design-premium.app-mode #requestsSection .request-row:hover{
  background:linear-gradient(90deg,rgba(13,88,151,.34),rgba(9,42,75,.40) 58%,rgba(7,30,56,.30));
  border-color:rgba(71,174,244,.46);
  border-left-color:#58d0ff;
}

html[data-theme="dark"] body.design-premium.app-mode .news-list button,
html[data-theme="dark"] body.design-premium.app-mode .document-list button,
html[data-theme="dark"] body.design-premium.app-mode .real-document-download{
  border-color:rgba(45,126,193,.16);
  background:linear-gradient(90deg,rgba(10,44,78,.22),rgba(5,25,47,.10));
}
html[data-theme="dark"] body.design-premium.app-mode .news-list button:hover,
html[data-theme="dark"] body.design-premium.app-mode .document-list button:hover,
html[data-theme="dark"] body.design-premium.app-mode .real-document-download:hover{
  background:linear-gradient(90deg,rgba(14,65,111,.32),rgba(7,31,57,.18));
  border-color:rgba(67,163,233,.38);
}

/* Keep the approved v0.2.39 mobile layout and reduce heavy shadows on small GPUs. */
@media(max-width:760px){
  html.mobile-device[data-theme="dark"] body.design-premium.app-mode .role-dashboard .panel-card,
  html.mobile-device[data-theme="dark"] body.design-premium.app-mode .role-dashboard .stat-card{
    border-color:rgba(55,151,229,.54);
    box-shadow:0 10px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(137,211,255,.08);
  }
  html.mobile-device[data-theme="dark"] body.design-premium.app-mode .dashboard-quick-actions .quick-grid button,
  html.mobile-device[data-theme="dark"] body.design-premium.app-mode .work-grid article,
  html.mobile-device[data-theme="dark"] body.design-premium.app-mode .owner-action{
    box-shadow:0 6px 14px rgba(0,0,0,.22),inset 0 1px 0 rgba(128,205,255,.05);
  }
}

/* =========================================================
   UK VTR24 v0.2.41 — render-match desktop command center
   Purpose: make the real dashboard visually match the approved
   dark render. Desktop-only layout polish; v0.2.39 mobile rules stay intact.
   ========================================================= */

.desktop-global-search{display:none}

@media (min-width:1180px){
  html:not(.mobile-device) body.design-premium.app-mode{
    --desktop-sidebar-w:194px;
    --app-bg:#020b17;
    --app-surface:#08213c;
    --app-surface-strong:#0b2949;
    --app-border:#1468a4;
    --app-blue:#29c2ff;
    --app-blue-soft:#0a3b67;
    --app-muted:#92b7d4;
    --app-text:#f5fbff;
    --app-shadow:0 13px 30px rgba(0,0,0,.28),0 0 18px rgba(16,135,225,.045);
  }

  /* A luminous perimeter gives the whole product the framed look of the render. */
  html[data-theme="dark"] body.design-premium.app-mode::after{
    content:"";position:fixed;z-index:120;pointer-events:none;
    inset:12px;border:1px solid rgba(70,190,255,.92);border-radius:17px;
    box-shadow:0 0 0 1px rgba(48,114,255,.18),0 0 24px rgba(20,145,255,.18),inset 0 0 24px rgba(21,132,255,.04);
  }

  html[data-theme="dark"] body.design-premium.app-mode .app-view{
    background:
      radial-gradient(circle at 66% -18%,rgba(0,106,255,.27),transparent 31%),
      radial-gradient(circle at 4% 60%,rgba(0,108,255,.13),transparent 27%),
      linear-gradient(180deg,#020814 0%,#03101e 46%,#020a15 100%)!important;
  }

  /* Sidebar: narrower, luminous and with the same building card as the render. */
  html[data-theme="dark"]:not(.mobile-device) .desktop-sidebar{
    left:13px;top:13px;bottom:13px;width:var(--desktop-sidebar-w);padding:16px 12px 14px;
    background:
      radial-gradient(circle at 48% 82%,rgba(26,102,229,.30),transparent 37%),
      linear-gradient(180deg,#03152b 0%,#061b35 56%,#0a2a50 100%)!important;
    border:0!important;border-right:1px solid rgba(38,139,217,.44)!important;
    box-shadow:16px 0 42px rgba(0,0,0,.25)!important;
  }
  html:not(.mobile-device) .desktop-sidebar-brand{padding:4px 8px 17px!important;border-bottom:1px solid rgba(68,150,216,.23)!important}
  html:not(.mobile-device) .desktop-sidebar-brand .app-logo-mark{width:34px;height:41px;color:#1dc8ff;filter:drop-shadow(0 0 9px rgba(0,188,255,.52))}
  html:not(.mobile-device) .desktop-sidebar-brand strong{font-size:15px!important;letter-spacing:.07em}
  html:not(.mobile-device) .desktop-sidebar-brand small{font-size:8px!important;color:#8bb1d1!important}
  html:not(.mobile-device) .desktop-side-nav{gap:5px!important;margin-top:10px!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link{
    min-height:41px!important;padding:0 11px!important;border-radius:9px!important;gap:8px!important;
    color:#bed4e8!important;font-size:12px!important;border:1px solid transparent!important;
  }
  html:not(.mobile-device) .desktop-side-nav .nav-link::before{width:20px!important;flex-basis:20px!important;font-size:17px!important;color:#86d8ff!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link:hover{
    color:#fff!important;background:rgba(15,81,140,.52)!important;border-color:rgba(59,163,236,.34)!important;
  }
  html:not(.mobile-device) .desktop-side-nav .nav-link.active{
    color:#fff!important;background:linear-gradient(135deg,#0c8bea 0%,#155bd0 100%)!important;
    border-color:#46c9ff!important;
    box-shadow:0 0 0 1px rgba(35,161,255,.18),0 7px 22px rgba(0,95,218,.32),inset 0 1px rgba(255,255,255,.18)!important;
  }
  html:not(.mobile-device) .desktop-sidebar-complex{
    display:block!important;margin-top:auto!important;min-height:250px!important;padding:184px 14px 15px!important;
    border:1px solid rgba(51,174,250,.74)!important;border-radius:12px!important;background:#062346!important;
    box-shadow:0 0 20px rgba(11,134,237,.12),inset 0 1px rgba(152,222,255,.07)!important;
  }
  html:not(.mobile-device) .desktop-sidebar-photo{
    display:block!important;height:190px!important;
    background-image:linear-gradient(180deg,rgba(1,13,28,.02) 0%,rgba(3,20,41,.20) 57%,#062346 100%),url('/assets/vtr24-bg-dark.png')!important;
    background-size:cover!important;background-position:50% 54%!important;
    filter:saturate(1.33) brightness(.96) contrast(1.10);
  }
  html:not(.mobile-device) .desktop-sidebar-complex strong{font-size:14px!important;color:#fff!important;line-height:1.35!important}
  html:not(.mobile-device) .desktop-sidebar-complex>span{font-size:9px!important;color:#b8d4ea!important;margin-top:10px!important}

  /* Header: real search field + compact notification/profile cluster. */
  html:not(.mobile-device) .app-header{
    left:0;margin-left:calc(var(--desktop-sidebar-w) + 13px)!important;
    width:calc(100% - var(--desktop-sidebar-w) - 26px)!important;min-height:60px!important;height:60px!important;
    padding:0 22px 0 18px!important;grid-template-columns:minmax(320px,520px) 1fr auto!important;gap:14px!important;
    background:rgba(3,16,32,.92)!important;border-bottom:1px solid rgba(45,130,199,.30)!important;
    box-shadow:0 10px 28px rgba(0,0,0,.14)!important;
  }
  html:not(.mobile-device) .desktop-global-search{
    display:flex;grid-column:1;align-items:center;gap:10px;width:min(520px,100%);height:38px;padding:0 11px;
    border:1px solid rgba(41,144,222,.45);border-radius:10px;
    color:#8edbff;background:linear-gradient(180deg,rgba(6,38,72,.90),rgba(4,26,51,.92));
    box-shadow:inset 0 1px rgba(134,218,255,.06),0 0 16px rgba(0,126,255,.05);
  }
  html:not(.mobile-device) .desktop-global-search>span:first-child{font-size:22px;line-height:1;color:#62d2ff;transform:translateY(-1px)}
  html:not(.mobile-device) .desktop-search-placeholder{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b8cee3;font-size:10px}
  html:not(.mobile-device) .desktop-global-search kbd{margin-left:auto;border:1px solid rgba(83,159,220,.32);border-radius:6px;padding:4px 7px;background:rgba(19,60,99,.78);color:#d9e9f8;font:9px/1 system-ui}
  html:not(.mobile-device) .app-header-actions{grid-column:3!important;gap:5px!important}
  html:not(.mobile-device) .header-role-switch,
  html:not(.mobile-device) #headerAnnouncementsButton,
  html:not(.mobile-device) #headerChatButton,
  html:not(.mobile-device) #settingsGearButton,
  html:not(.mobile-device) #appThemeToggle{display:none!important}
  html:not(.mobile-device) .icon-action{width:35px!important;height:35px!important;border-radius:10px!important;background:rgba(7,34,62,.78)!important;border-color:rgba(52,139,207,.34)!important}
  html:not(.mobile-device) .profile-chip{min-height:39px!important;padding:3px 9px 3px 4px!important;border-color:rgba(58,143,210,.34)!important;background:rgba(7,31,58,.82)!important;border-radius:11px!important}
  html:not(.mobile-device) .profile-chip::after{content:"⌄";margin-left:5px;color:#7ed7ff;font-size:14px}
  html:not(.mobile-device) .profile-chip .avatar{width:31px;height:31px;border-radius:50%!important;background:linear-gradient(135deg,#3b73e8,#575adf)!important;box-shadow:0 0 16px rgba(64,116,255,.26)}
  html:not(.mobile-device) .profile-copy strong{font-size:10px!important}.profile-copy small{font-size:8px!important}
  html:not(.mobile-device) .logout-action{height:35px!important;min-height:35px!important;padding:0 9px!important;font-size:9px!important;background:rgba(7,31,58,.72)!important;border-color:rgba(52,139,207,.28)!important}

  /* Compact main canvas: same density as the approved render. */
  html:not(.mobile-device) .role-dashboard,
  html:not(.mobile-device) .subpage,
  html:not(.mobile-device) .app-footer{
    margin-left:calc(var(--desktop-sidebar-w) + 28px)!important;margin-right:28px!important;width:auto!important;max-width:none!important;
  }
  html:not(.mobile-device) .role-dashboard{margin-top:12px!important;gap:8px!important}
  html:not(.mobile-device) .panel-card,
  html:not(.mobile-device) .stat-card{border-radius:11px!important}

  /* Main surfaces are intentionally brighter than the page. */
  html[data-theme="dark"] body.design-premium.app-mode .role-dashboard .panel-card,
  html[data-theme="dark"] body.design-premium.app-mode .role-dashboard .stat-card{
    background:linear-gradient(145deg,rgba(7,37,68,.99),rgba(4,24,47,.995))!important;
    border:1px solid rgba(45,158,233,.64)!important;
    box-shadow:0 9px 24px rgba(0,0,0,.28),0 0 16px rgba(0,145,255,.055),inset 0 1px 0 rgba(132,219,255,.08)!important;
  }
  html[data-theme="dark"] body.design-premium.app-mode .role-dashboard .panel-card:hover,
  html[data-theme="dark"] body.design-premium.app-mode .role-dashboard .stat-card:hover{
    border-color:rgba(72,196,255,.82)!important;box-shadow:0 12px 28px rgba(0,0,0,.31),0 0 20px rgba(0,163,255,.085)!important;
  }

  /* Top hero/actions + weather. */
  html:not(.mobile-device) .dashboard-top-row{grid-template-columns:minmax(0,1fr) 300px!important;gap:9px!important}
  html:not(.mobile-device) .dashboard-quick-actions{min-height:108px!important;height:108px!important;padding:11px 13px!important}
  html:not(.mobile-device) .dashboard-quick-actions .section-heading{margin-bottom:7px!important;align-items:flex-start!important}
  html:not(.mobile-device) .dashboard-quick-actions .section-heading h2{font-size:14px!important;margin-top:2px!important}
  html:not(.mobile-device) .dashboard-quick-actions .eyebrow{font-size:8px!important}
  html:not(.mobile-device) .dashboard-quick-actions .quick-slogan{font-size:9px!important;max-width:130px!important}
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid{gap:8px!important}
  html:not(.mobile-device) body.design-premium.app-mode .dashboard-quick-actions .quick-grid button{
    min-height:59px!important;height:59px!important;padding:7px 9px!important;border-radius:9px!important;grid-template-columns:36px 1fr!important;column-gap:8px!important;
    background:linear-gradient(145deg,rgba(9,57,100,.96),rgba(5,32,61,.97))!important;
    border-color:rgba(48,163,239,.55)!important;box-shadow:0 5px 14px rgba(0,0,0,.24),inset 0 1px rgba(145,224,255,.06)!important;
  }
  html:not(.mobile-device) body.design-premium.app-mode .dashboard-quick-actions .quick-grid button>span{
    width:34px!important;height:34px!important;border-radius:8px!important;font-size:18px!important;box-shadow:0 0 17px rgba(25,172,255,.28)!important;
  }
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid button strong{font-size:10px!important;line-height:1.18!important}
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid button small{font-size:7.5px!important;line-height:1.18!important;margin-top:1px!important}
  html:not(.mobile-device) .dashboard-weather-card{min-height:108px!important;height:108px!important;padding:12px!important;border-radius:11px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-copy>strong{font-size:17px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-copy small{font-size:8px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-reading>span{font-size:28px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-reading>strong{font-size:27px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-reading>small{font-size:8px!important}

  /* Amber alert: one concise bar. */
  html:not(.mobile-device) .priority-alert{min-height:59px!important;padding:8px 12px!important;gap:10px!important;border-left-width:1px!important}
  html[data-theme="dark"] body.design-premium.app-mode .role-dashboard .priority-alert{
    background:linear-gradient(100deg,rgba(65,42,5,.86),rgba(6,31,58,.99) 25%,rgba(4,24,47,.995))!important;
    border-color:rgba(255,169,48,.82)!important;box-shadow:0 8px 21px rgba(0,0,0,.27),0 0 16px rgba(255,151,26,.07)!important;
  }
  html:not(.mobile-device) .alert-icon{width:33px!important;height:33px!important;border-radius:9px!important;font-size:18px!important}
  html:not(.mobile-device) .priority-alert .eyebrow{font-size:7px!important;color:#ffc35d!important}
  html:not(.mobile-device) .priority-alert h2{font-size:12px!important;margin:2px 0 2px!important}
  html:not(.mobile-device) .priority-alert p{font-size:8px!important;line-height:1.25!important}
  html:not(.mobile-device) .priority-alert .ghost-button{padding:7px 12px!important;font-size:9px!important;border-color:#22b7ff!important;background:rgba(3,73,118,.55)!important}

  /* Stats + requests + team rail. */
  html:not(.mobile-device) .request-overview-layout{grid-template-columns:minmax(0,1.82fr) 300px!important;gap:9px!important}
  html:not(.mobile-device) .request-overview-main{gap:8px!important;grid-template-rows:72px auto!important}
  html:not(.mobile-device) .request-stats-inline{gap:7px!important}
  html:not(.mobile-device) body.design-premium.app-mode .request-stats-inline .stat-card{
    min-height:72px!important;height:72px!important;padding:9px 8px 8px 52px!important;border-radius:10px!important;
    background:linear-gradient(145deg,rgba(6,43,78,.99),rgba(5,27,52,.99))!important;
  }
  html:not(.mobile-device) body.design-premium.app-mode .request-stats-inline .stat-card::before{
    left:10px!important;width:32px!important;height:32px!important;border-radius:8px!important;font-size:17px!important;
  }
  html:not(.mobile-device) .request-stats-inline .stat-card>span{font-size:8px!important}
  html:not(.mobile-device) .request-stats-inline .stat-card strong{font-size:20px!important;margin:3px 0 1px!important}
  html:not(.mobile-device) .request-stats-inline .stat-card small{font-size:7px!important}

  html:not(.mobile-device) body.design-premium.app-mode #requestsSection{padding:10px 12px!important;min-height:0!important}
  html:not(.mobile-device) #requestsSection .section-heading{margin-bottom:6px!important}
  html:not(.mobile-device) #requestsSection .section-heading .eyebrow{display:none!important}
  html:not(.mobile-device) #requestsSection .section-heading h2{font-size:12px!important;margin:0!important}
  html:not(.mobile-device) #requestsSection .text-button{font-size:8px!important}
  html:not(.mobile-device) #requestsSection .request-list{gap:2px!important}
  html:not(.mobile-device) body.design-premium.app-mode #requestsSection .request-row{
    min-height:38px!important;height:38px!important;padding:4px 7px!important;border-radius:7px!important;
    grid-template-columns:56px minmax(0,1fr) 82px 62px!important;gap:6px!important;
  }
  html:not(.mobile-device) #requestsSection .request-id{font-size:8px!important;color:#35c8ff!important}
  html:not(.mobile-device) #requestsSection .request-main strong{font-size:9px!important}
  html:not(.mobile-device) #requestsSection .request-main small,
  html:not(.mobile-device) #requestsSection .assignee{font-size:7px!important;margin-top:1px!important}
  html:not(.mobile-device) #requestsSection .status{font-size:7px!important;padding:4px 7px!important}

  html:not(.mobile-device) .team-panel-stretched{padding:10px 12px!important}
  html:not(.mobile-device) .team-panel-stretched .section-heading{margin-bottom:4px!important}
  html:not(.mobile-device) .team-panel-stretched .section-heading .eyebrow{font-size:7px!important}
  html:not(.mobile-device) .team-panel-stretched .section-heading h2{font-size:12px!important;margin-top:2px!important}
  html:not(.mobile-device) .team-panel-stretched .text-button{font-size:8px!important}
  html:not(.mobile-device) body.design-premium.app-mode .team-panel-stretched .team-list>div{padding:6px 0!important}
  html:not(.mobile-device) .team-panel-stretched .staff-row,
  html:not(.mobile-device) .team-panel-stretched .team-row{min-height:38px!important}
  html:not(.mobile-device) .team-panel-stretched .staff-avatar,
  html:not(.mobile-device) .team-panel-stretched .person-avatar{width:30px!important;height:30px!important;border-radius:9px!important;font-size:9px!important}
  html:not(.mobile-device) .team-panel-stretched strong{font-size:8px!important}
  html:not(.mobile-device) .team-panel-stretched small{font-size:7px!important}

  /* Work tiles. */
  html:not(.mobile-device) #worksSection{padding:10px 12px!important}
  html:not(.mobile-device) #worksSection .section-heading{margin-bottom:7px!important}
  html:not(.mobile-device) #worksSection .section-heading .eyebrow{display:none!important}
  html:not(.mobile-device) #worksSection .section-heading h2{font-size:12px!important;margin:0!important}
  html:not(.mobile-device) #worksSection .text-button{font-size:8px!important}
  html:not(.mobile-device) body.design-premium.app-mode .work-grid{gap:7px!important}
  html:not(.mobile-device) body.design-premium.app-mode .work-grid article{
    min-height:70px!important;height:70px!important;padding:7px 8px!important;border-radius:8px!important;
    grid-template-columns:34px 1fr!important;gap:6px!important;
  }
  html:not(.mobile-device) body.design-premium.app-mode .work-icon{width:31px!important;height:31px!important;border-radius:8px!important;font-size:17px!important}
  html:not(.mobile-device) .work-grid article strong{font-size:8px!important}.work-grid article small{font-size:7px!important;margin-top:2px!important}
  html:not(.mobile-device) .work-grid article>.status{font-size:7px!important;padding:4px 6px!important}

  /* News + docs: two compact lower cards like the render. */
  html:not(.mobile-device) .content-columns.equal-columns{gap:9px!important}
  html:not(.mobile-device) .news-highlight-section,
  html:not(.mobile-device) #documentsSection{padding:9px 11px!important;min-height:125px!important}
  html:not(.mobile-device) .news-highlight-section .section-heading,
  html:not(.mobile-device) #documentsSection .section-heading{margin-bottom:4px!important}
  html:not(.mobile-device) .news-highlight-section .section-heading .eyebrow,
  html:not(.mobile-device) #documentsSection .section-heading .eyebrow{display:none!important}
  html:not(.mobile-device) .news-highlight-section .section-heading h2,
  html:not(.mobile-device) #documentsSection .section-heading h2{font-size:11px!important;margin:0!important}
  html:not(.mobile-device) .news-list,
  html:not(.mobile-device) .document-list{gap:2px!important}
  html:not(.mobile-device) .news-list button,
  html:not(.mobile-device) .document-list button,
  html:not(.mobile-device) .real-document-download{min-height:29px!important;padding:3px 5px!important;border-radius:6px!important}
  html:not(.mobile-device) .news-list button{grid-template-columns:42px 1fr!important;gap:6px!important}
  html:not(.mobile-device) .news-date{font-size:7px!important;padding:4px 5px!important}
  html:not(.mobile-device) .news-list strong,
  html:not(.mobile-device) .document-list strong{font-size:8px!important}
  html:not(.mobile-device) .news-list small,
  html:not(.mobile-device) .document-list small{font-size:7px!important;margin-top:1px!important}
  html:not(.mobile-device) .document-list button{grid-template-columns:31px 1fr 16px!important;gap:6px!important}
  html:not(.mobile-device) .document-list button>span{width:29px!important;height:25px!important;border-radius:7px!important;font-size:7px!important}

  /* Voting becomes a slim final strip instead of another tall card. */
  html:not(.mobile-device) .voting-panel{padding:8px 11px!important}
  html:not(.mobile-device) .voting-panel .section-heading{margin:0!important;align-items:center!important}
  html:not(.mobile-device) .voting-panel .section-heading .eyebrow{display:none!important}
  html:not(.mobile-device) .voting-panel .section-heading h2{font-size:10px!important;margin:0!important;color:#35c9ff!important}
  html:not(.mobile-device) .voting-panel .section-subcopy{font-size:7px!important;margin:2px 0 0!important}
  html:not(.mobile-device) .voting-panel>.poll-summary-banner,
  html:not(.mobile-device) .voting-panel>.poll-stack,
  html:not(.mobile-device) .voting-panel>.archive-link-row{display:none!important}
  html:not(.mobile-device) .voting-panel #createPollButton{padding:6px 10px!important;font-size:8px!important}

  html:not(.mobile-device) .app-footer{padding:7px 0 10px!important;font-size:8px!important;color:#6f9cbe!important}
}

/* =========================================================
   UK VTR24 v0.2.42 — geometry + 110% desktop scale + restored controls
   - dashboard render styling now applies to every UI design preset;
   - restores announcements/chat/settings/theme controls on desktop;
   - restores functional voting content;
   - stronger amber priority notice;
   - desktop dashboard elements are ~10% larger than v0.2.41.
   Mobile layout from v0.2.39 remains untouched.
   ========================================================= */

@media (min-width:1180px){
  /* Force the real desktop rail back on and enlarge the shell by about 10%. */
  html:not(.mobile-device) body.app-mode{--desktop-sidebar-w:212px!important}
  html:not(.mobile-device) .desktop-sidebar{
    display:flex!important;
    left:13px!important;top:13px!important;bottom:13px!important;
    width:var(--desktop-sidebar-w)!important;
    padding:18px 13px 15px!important;
  }
  html:not(.mobile-device) .desktop-sidebar-brand{padding:5px 9px 19px!important}
  html:not(.mobile-device) .desktop-sidebar-brand .app-logo-mark{width:37px!important;height:45px!important}
  html:not(.mobile-device) .desktop-sidebar-brand strong{font-size:16.5px!important}
  html:not(.mobile-device) .desktop-sidebar-brand small{font-size:9px!important}
  html:not(.mobile-device) .desktop-side-nav{gap:5.5px!important;margin-top:11px!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link{
    min-height:45px!important;padding:0 12px!important;gap:9px!important;
    border-radius:10px!important;font-size:13px!important;
  }
  html:not(.mobile-device) .desktop-side-nav .nav-link::before{width:22px!important;flex-basis:22px!important;font-size:18px!important}

  /* Header geometry and the controls that disappeared in v0.2.41. */
  html:not(.mobile-device) .app-header{
    margin-left:calc(var(--desktop-sidebar-w) + 13px)!important;
    width:calc(100% - var(--desktop-sidebar-w) - 26px)!important;
    min-height:66px!important;height:66px!important;
    padding:0 22px 0 20px!important;
    grid-template-columns:minmax(330px,570px) 1fr auto!important;
  }
  html:not(.mobile-device) .desktop-global-search{height:42px!important;width:min(570px,100%)!important;padding:0 12px!important}
  html:not(.mobile-device) .desktop-search-placeholder{font-size:11px!important}
  html:not(.mobile-device) .desktop-global-search kbd{font-size:10px!important;padding:5px 8px!important}
  html:not(.mobile-device) .app-header-actions{gap:5px!important}
  html:not(.mobile-device) #headerAnnouncementsButton:not(.hidden),
  html:not(.mobile-device) #headerChatButton:not(.hidden),
  html:not(.mobile-device) #settingsGearButton:not(.hidden),
  html:not(.mobile-device) #appThemeToggle{display:grid!important}
  html:not(.mobile-device) .header-role-switch{display:none!important}
  html:not(.mobile-device) .icon-action{width:39px!important;height:39px!important;min-width:39px!important;border-radius:11px!important;font-size:16px!important}
  html:not(.mobile-device) .profile-chip{min-height:43px!important;padding:4px 10px 4px 5px!important}
  html:not(.mobile-device) .profile-chip .avatar{width:34px!important;height:34px!important}
  html:not(.mobile-device) .profile-copy strong{font-size:11px!important}
  html:not(.mobile-device) .profile-copy small{font-size:8.5px!important}
  html:not(.mobile-device) .logout-action{height:39px!important;min-height:39px!important;font-size:10px!important}

  /* Main canvas alignment. */
  html:not(.mobile-device) .role-dashboard,
  html:not(.mobile-device) .subpage,
  html:not(.mobile-device) .app-footer{
    margin-left:calc(var(--desktop-sidebar-w) + 29px)!important;
    margin-right:29px!important;width:auto!important;max-width:none!important;
  }
  html:not(.mobile-device) .role-dashboard{margin-top:13px!important;gap:9px!important}
  html:not(.mobile-device) .panel-card,
  html:not(.mobile-device) .stat-card{border-radius:12px!important}

  /* Render look must not depend on Classic/Premium/Contrast setting. */
  html[data-theme="dark"] body.app-mode .role-dashboard .panel-card,
  html[data-theme="dark"] body.app-mode .role-dashboard .stat-card{
    background:linear-gradient(145deg,rgba(7,38,70,.995),rgba(4,23,45,.995))!important;
    border:1px solid rgba(45,158,233,.68)!important;
    box-shadow:0 10px 25px rgba(0,0,0,.30),0 0 17px rgba(0,145,255,.06),inset 0 1px 0 rgba(135,220,255,.09)!important;
  }
  html[data-theme="light"] body.app-mode .role-dashboard .panel-card,
  html[data-theme="light"] body.app-mode .role-dashboard .stat-card{
    background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(239,248,255,.98))!important;
    border:1px solid rgba(28,132,211,.34)!important;
    box-shadow:0 10px 24px rgba(31,102,164,.12),inset 0 1px 0 rgba(255,255,255,.95)!important;
  }

  /* Top cards are scaled by ~10%, while keeping columns perfectly aligned. */
  html:not(.mobile-device) .dashboard-top-row{grid-template-columns:minmax(0,1fr) 330px!important;gap:10px!important}
  html:not(.mobile-device) .dashboard-quick-actions,
  html:not(.mobile-device) .dashboard-weather-card{min-height:119px!important;height:119px!important}
  html:not(.mobile-device) .dashboard-quick-actions{padding:12px 14px!important}
  html:not(.mobile-device) .dashboard-quick-actions .section-heading{margin-bottom:8px!important}
  html:not(.mobile-device) .dashboard-quick-actions .section-heading h2{font-size:15.5px!important}
  html:not(.mobile-device) .dashboard-quick-actions .eyebrow{font-size:9px!important}
  html:not(.mobile-device) .dashboard-quick-actions .quick-slogan{font-size:10px!important;max-width:145px!important}
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid{gap:9px!important}
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .quick-grid button{
    min-height:65px!important;height:65px!important;padding:8px 10px!important;
    border-radius:10px!important;grid-template-columns:40px minmax(0,1fr)!important;column-gap:9px!important;
    background:linear-gradient(145deg,rgba(9,57,100,.97),rgba(5,32,61,.98))!important;
    border:1px solid rgba(48,163,239,.60)!important;
    box-shadow:0 6px 15px rgba(0,0,0,.25),inset 0 1px rgba(145,224,255,.07)!important;
  }
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .quick-grid button>span{
    width:38px!important;height:38px!important;border-radius:9px!important;font-size:20px!important;
  }
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .quick-grid button:nth-child(1)>span{background:linear-gradient(145deg,#148cf0,#6dd7ff)!important;color:white!important;box-shadow:0 0 20px rgba(39,170,255,.31)!important}
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .quick-grid button:nth-child(2)>span{background:linear-gradient(145deg,#00aebf,#28dfe7)!important;color:white!important;box-shadow:0 0 20px rgba(0,194,210,.28)!important}
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .quick-grid button:nth-child(3)>span{background:linear-gradient(145deg,#168ef2,#6b67ff)!important;color:white!important;box-shadow:0 0 20px rgba(66,120,255,.30)!important}
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid button strong{font-size:11px!important}
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid button small{font-size:8.2px!important}
  html:not(.mobile-device) .dashboard-weather-card{padding:13px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-copy>strong{font-size:19px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-copy small{font-size:9px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-reading>span{font-size:31px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-reading>strong{font-size:30px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-reading>small{font-size:9px!important}

  /* Priority alert now has its own unmistakable amber/orange identity. */
  html:not(.mobile-device) body.app-mode .priority-alert{
    min-height:65px!important;padding:9px 14px!important;gap:11px!important;
    border:1px solid #e9a12f!important;border-left:4px solid #ffb128!important;
  }
  html[data-theme="dark"] body.app-mode .role-dashboard .priority-alert{
    background:linear-gradient(100deg,rgba(96,58,5,.94) 0%,rgba(43,38,25,.97) 16%,rgba(7,30,55,.995) 46%,rgba(4,23,45,.995) 100%)!important;
    border-color:#e9a12f!important;border-left-color:#ffbd3b!important;
    box-shadow:0 10px 24px rgba(0,0,0,.30),0 0 22px rgba(255,162,31,.14),inset 0 1px rgba(255,214,128,.10)!important;
  }
  html[data-theme="light"] body.app-mode .role-dashboard .priority-alert{
    background:linear-gradient(100deg,#fff0cc 0%,#fff8e9 31%,#f7fbff 100%)!important;
    border-color:#d99424!important;border-left-color:#f2a51d!important;
  }
  html:not(.mobile-device) body.app-mode .alert-icon{
    width:37px!important;height:37px!important;border-radius:10px!important;font-size:20px!important;
    background:linear-gradient(145deg,#ffbf38,#f08a12)!important;color:#2b1900!important;
    border:1px solid rgba(255,219,142,.55)!important;box-shadow:0 0 18px rgba(255,167,32,.28)!important;
  }
  html:not(.mobile-device) .priority-alert .eyebrow{font-size:8px!important;color:#ffd06b!important}
  html:not(.mobile-device) .priority-alert h2{font-size:13px!important;margin:2px 0!important}
  html:not(.mobile-device) .priority-alert p{font-size:8.8px!important}
  html:not(.mobile-device) .priority-alert .ghost-button{padding:8px 13px!important;font-size:10px!important}

  /* Stats: fixed icon geometry and 10% larger typography. */
  html:not(.mobile-device) .request-overview-layout{grid-template-columns:minmax(0,1.82fr) 330px!important;gap:10px!important;align-items:stretch!important}
  html:not(.mobile-device) .request-overview-main{gap:9px!important;grid-template-rows:80px auto!important;min-width:0!important}
  html:not(.mobile-device) .request-stats-inline{gap:8px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html:not(.mobile-device) body.app-mode .request-stats-inline .stat-card{
    position:relative!important;overflow:hidden!important;
    min-height:80px!important;height:80px!important;padding:10px 9px 9px 57px!important;
    display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
    background:linear-gradient(145deg,rgba(7,48,86,.995),rgba(5,28,54,.995))!important;
  }
  html:not(.mobile-device) body.app-mode .request-stats-inline .stat-card::before{
    position:absolute!important;left:11px!important;top:50%!important;transform:translateY(-50%)!important;
    width:36px!important;height:36px!important;border-radius:9px!important;
    display:grid!important;place-items:center!important;color:#fff!important;font-size:19px!important;font-weight:800!important;
    background:linear-gradient(145deg,#128feb,#28c5ff)!important;border:1px solid rgba(255,255,255,.16)!important;
    box-shadow:0 0 19px rgba(38,163,255,.30)!important;
  }
  html:not(.mobile-device) body.app-mode .request-stats-inline .stat-card:nth-child(1)::before{content:"▤"!important}
  html:not(.mobile-device) body.app-mode .request-stats-inline .stat-card:nth-child(2)::before{content:"✓"!important;background:linear-gradient(145deg,#00a97b,#39e0ad)!important;box-shadow:0 0 19px rgba(0,215,162,.25)!important}
  html:not(.mobile-device) body.app-mode .request-stats-inline .stat-card:nth-child(3)::before{content:"◷"!important;background:linear-gradient(145deg,#197ce0,#5ab8ff)!important}
  html:not(.mobile-device) body.app-mode .request-stats-inline .stat-card:nth-child(4)::before{content:"♟"!important;background:linear-gradient(145deg,#2778df,#36c7ff)!important}
  html:not(.mobile-device) .request-stats-inline .stat-card>span{font-size:9px!important;line-height:1.2!important}
  html:not(.mobile-device) .request-stats-inline .stat-card strong{font-size:22px!important;margin:4px 0 2px!important;line-height:1!important}
  html:not(.mobile-device) .request-stats-inline .stat-card small{font-size:8px!important;line-height:1.15!important;margin-top:auto!important}

  /* Requests and team use matching row heights, removing the uneven geometry. */
  html:not(.mobile-device) body.app-mode #requestsSection{padding:11px 13px!important}
  html:not(.mobile-device) #requestsSection .section-heading{margin-bottom:7px!important}
  html:not(.mobile-device) #requestsSection .section-heading h2{font-size:13px!important}
  html:not(.mobile-device) #requestsSection .text-button{font-size:9px!important}
  html:not(.mobile-device) #requestsSection .request-list{gap:2px!important}
  html:not(.mobile-device) body.app-mode #requestsSection .request-row{
    min-height:42px!important;height:42px!important;padding:5px 8px!important;
    grid-template-columns:62px minmax(0,1fr) 90px 68px!important;gap:7px!important;
    border:1px solid rgba(44,132,207,.24)!important;border-left:3px solid #18a9ff!important;border-radius:8px!important;
    background:linear-gradient(90deg,rgba(9,96,171,.17),rgba(5,31,58,.08) 48%)!important;
  }
  html:not(.mobile-device) #requestsSection .request-id{font-size:8.8px!important}
  html:not(.mobile-device) #requestsSection .request-main strong{font-size:10px!important}
  html:not(.mobile-device) #requestsSection .request-main small,
  html:not(.mobile-device) #requestsSection .assignee{font-size:7.8px!important}
  html:not(.mobile-device) #requestsSection .status{font-size:8px!important;padding:4px 7px!important}

  html:not(.mobile-device) .team-panel-stretched{padding:11px 13px!important}
  html:not(.mobile-device) .team-panel-stretched .section-heading h2{font-size:13px!important}
  html:not(.mobile-device) body.app-mode .team-panel-stretched .team-list>div{padding:7px 0!important}
  html:not(.mobile-device) .team-panel-stretched .staff-row,
  html:not(.mobile-device) .team-panel-stretched .team-row{min-height:42px!important}
  html:not(.mobile-device) .team-panel-stretched .staff-avatar,
  html:not(.mobile-device) .team-panel-stretched .person-avatar{width:33px!important;height:33px!important;border-radius:10px!important;font-size:10px!important}
  html:not(.mobile-device) .team-panel-stretched strong{font-size:9px!important}
  html:not(.mobile-device) .team-panel-stretched small{font-size:7.7px!important}

  /* Work and lower information sections: +10% and consistent card rhythm. */
  html:not(.mobile-device) #worksSection{padding:11px 13px!important}
  html:not(.mobile-device) #worksSection .section-heading h2{font-size:13px!important}
  html:not(.mobile-device) body.app-mode .work-grid{gap:8px!important}
  html:not(.mobile-device) body.app-mode .work-grid article{
    min-height:77px!important;height:77px!important;padding:8px 9px!important;
    border-radius:9px!important;grid-template-columns:38px minmax(0,1fr)!important;gap:7px!important;
    background:linear-gradient(145deg,rgba(8,43,77,.96),rgba(5,28,53,.97))!important;
    border:1px solid rgba(50,137,207,.48)!important;
  }
  html:not(.mobile-device) body.app-mode .work-icon{width:35px!important;height:35px!important;border-radius:9px!important;font-size:19px!important}
  html:not(.mobile-device) .work-grid article strong{font-size:9px!important}
  html:not(.mobile-device) .work-grid article small{font-size:7.8px!important}
  html:not(.mobile-device) .work-grid article>.status{font-size:7.8px!important}
  html:not(.mobile-device) .content-columns.equal-columns{gap:10px!important}
  html:not(.mobile-device) .news-highlight-section,
  html:not(.mobile-device) #documentsSection{padding:10px 12px!important;min-height:138px!important}
  html:not(.mobile-device) .news-highlight-section .section-heading h2,
  html:not(.mobile-device) #documentsSection .section-heading h2{font-size:12px!important}
  html:not(.mobile-device) .news-list button,
  html:not(.mobile-device) .document-list button,
  html:not(.mobile-device) .real-document-download{min-height:32px!important;padding:4px 6px!important}
  html:not(.mobile-device) .news-list strong,
  html:not(.mobile-device) .document-list strong{font-size:8.8px!important}
  html:not(.mobile-device) .news-list small,
  html:not(.mobile-device) .document-list small{font-size:7.7px!important}

  /* Voting is functional again: don't hide the live cards/forms. */
  html:not(.mobile-device) .voting-panel{padding:11px 13px!important}
  html:not(.mobile-device) .voting-panel .section-heading{margin-bottom:8px!important}
  html:not(.mobile-device) .voting-panel .section-heading .eyebrow{display:block!important;font-size:8px!important}
  html:not(.mobile-device) .voting-panel .section-heading h2{font-size:13px!important;margin-top:2px!important;color:var(--app-text)!important}
  html:not(.mobile-device) .voting-panel .section-subcopy{font-size:8px!important}
  html:not(.mobile-device) .voting-panel>.poll-summary-banner{display:flex!important;margin:8px 0!important}
  html:not(.mobile-device) .voting-panel>.poll-stack{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
  }
  html:not(.mobile-device) .voting-panel>.archive-link-row{display:flex!important;margin-top:8px!important}
  html:not(.mobile-device) .voting-panel #createPollButton{display:inline-flex!important;padding:7px 11px!important;font-size:9px!important}
  html:not(.mobile-device) .voting-panel .poll-card{padding:11px!important;border-radius:10px!important}
  html:not(.mobile-device) .voting-panel .poll-card h3{font-size:10px!important;line-height:1.3!important}
  html:not(.mobile-device) .voting-panel .poll-result-row strong,
  html:not(.mobile-device) .voting-panel .poll-result-row span{font-size:8px!important}
  html:not(.mobile-device) .voting-panel .poll-total strong{font-size:16px!important}
  html:not(.mobile-device) .voting-panel .poll-total span{font-size:8px!important}

  html:not(.mobile-device) .app-footer{font-size:9px!important;padding:8px 0 11px!important}
}

/* Keep the promo photo only where vertical space permits; sidebar itself always remains. */
@media (min-width:1180px) and (max-height:760px){
  html:not(.mobile-device) .desktop-sidebar-complex{display:none!important}
}

/* =========================================================
   UK VTR24 v0.2.43 — polished light theme, cover picker,
   corrected news geometry, richer imagery and +10% desktop scale
   ========================================================= */

/* Cover selection for news and marketplace announcements. */
.cover-picker-field{display:flex;flex-direction:column;gap:9px}
.cover-picker-title{font-size:11px;font-weight:800;color:var(--app-text)}
.cover-picker-hint{font-size:9px;color:var(--app-muted)}
.cover-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.cover-option{position:relative;display:grid!important;gap:6px!important;min-width:0;cursor:pointer}
.cover-option input{position:absolute;opacity:0;pointer-events:none}
.cover-option b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--app-muted);font-weight:700}
.cover-thumb{height:62px;border-radius:11px;border:2px solid transparent;background-size:cover;background-position:center;display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 6px 16px rgba(0,0,0,.10);filter:saturate(1.36) contrast(1.08) brightness(1.04);transition:.16s ease}
.cover-option input:checked + .cover-thumb{border-color:#27aef8;box-shadow:0 0 0 2px color-mix(in srgb,#27aef8 25%,transparent),0 8px 20px rgba(16,123,207,.20);transform:translateY(-1px)}
.cover-option input:checked ~ b{color:var(--app-blue)}
.cover-complex-night{background-image:linear-gradient(180deg,rgba(3,21,43,.08),rgba(3,21,43,.28)),url('/assets/vtr24-bg-dark.png');background-position:56% 54%}
.cover-parking{background-image:url('/assets/parking-p118.jpg')}
.cover-apartment{background-image:url('/assets/apartment-312.jpg')}
.cover-storage{background-image:url('/assets/storage-k24.jpg')}
.cover-courtyard{background-image:url('/assets/bicycle.jpg')}
.cover-engineering{background-image:linear-gradient(135deg,rgba(7,88,150,.12),rgba(5,35,65,.18)),url('/assets/vtr24-bg-light.jpg');background-position:72% 44%}
.cover-generic{background:radial-gradient(circle at 28% 22%,#37c9ff 0 6%,transparent 7%),radial-gradient(circle at 68% 62%,#6d73ff 0 8%,transparent 9%),linear-gradient(145deg,#0b6aad,#163d79 54%,#41258b)}

/* New real news must never collapse into the tiny date column. */
.news-list .real-news-item.news-with-photo{
  display:grid!important;grid-template-columns:64px 52px minmax(0,1fr)!important;grid-template-areas:"photo date copy"!important;
  gap:10px!important;align-items:center!important;min-width:0!important;
}
.news-list .real-news-item.news-with-photo .news-complex-thumb{grid-area:photo!important;width:64px!important;height:46px!important;border-radius:10px!important;background-size:cover!important;background-position:center!important;filter:saturate(1.38) contrast(1.09) brightness(1.05)}
.news-list .real-news-item.news-with-photo .news-date{grid-area:date!important;width:48px!important;height:42px!important}
.news-list .real-news-item.news-with-photo .news-copy{grid-area:copy!important;display:flex!important;flex-direction:column!important;min-width:0!important}
.news-list .real-news-item.news-with-photo .news-copy strong{white-space:normal!important;overflow-wrap:anywhere!important}
.news-list .real-news-item.news-with-photo .news-copy small{white-space:normal!important;overflow-wrap:anywhere!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.owner-news-grid .owner-real-news-item{display:grid!important;grid-template-columns:62px 44px minmax(0,1fr)!important;grid-template-areas:"photo date copy"!important;gap:10px!important;align-items:center!important;min-height:82px!important}
.owner-news-grid .owner-real-news-item .news-complex-thumb{grid-area:photo;width:62px;height:48px;border-radius:10px;background-size:cover;background-position:center;filter:saturate(1.38) contrast(1.09) brightness(1.05)}
.owner-news-grid .owner-real-news-item .news-date{grid-area:date}
.owner-news-grid .owner-real-news-item .news-copy{grid-area:copy;display:flex;flex-direction:column;min-width:0}
.owner-news-grid .owner-real-news-item .news-copy strong{margin-top:0!important}

/* Brighter, richer photos across cards without touching text layers. */
.news-complex-thumb,
.market-card-photo,
.market-preview-card .market-card-photo,
.work-card-image,
.notification-image-wrap img,
.desktop-sidebar-photo,
.owner-weather-photo{filter:saturate(1.34) contrast(1.08) brightness(1.04)}
.market-card-photo{background-size:cover!important;background-position:center!important}
.market-card .market-card-photo{min-height:175px!important}

/* Proper light theme: designed separately rather than a faded dark theme. */
html[data-theme="light"] body.app-mode{
  --app-bg:#eaf3fb;
  --app-surface:#ffffff;
  --app-surface-strong:#ffffff;
  --app-border:#bfd5e8;
  --app-text:#10283f;
  --app-muted:#557087;
  --app-blue:#087dd1;
  --app-blue-soft:#e1f2ff;
  --app-green:#087d61;
  --app-green-soft:#dff7ee;
  --app-orange:#b9670b;
  --app-orange-soft:#fff0d4;
  --app-red:#c73549;
  --app-red-soft:#ffe7eb;
  --app-shadow:0 10px 24px rgba(29,80,121,.10);
}
html[data-theme="light"] body.app-mode .app-view{
  background:
    radial-gradient(circle at 91% -8%,rgba(48,154,232,.16),transparent 29%),
    radial-gradient(circle at 8% 4%,rgba(67,187,255,.13),transparent 25%),
    linear-gradient(180deg,#edf7ff 0%,#f8fbfe 48%,#edf5fb 100%)!important;
}
html[data-theme="light"]:not(.mobile-device) .desktop-sidebar{
  background:linear-gradient(180deg,#f9fcff 0%,#eef7ff 58%,#e4f1fc 100%)!important;
  border:1px solid #a9cce7!important;border-right-color:#9cc4e3!important;
  box-shadow:12px 0 32px rgba(28,86,132,.12)!important;
}
html[data-theme="light"]:not(.mobile-device) .desktop-sidebar-brand{border-bottom-color:#c7ddec!important}
html[data-theme="light"]:not(.mobile-device) .desktop-side-nav .nav-link{color:#45667f!important}
html[data-theme="light"]:not(.mobile-device) .desktop-side-nav .nav-link:hover{background:#e4f3ff!important;color:#0b5f99!important;border-color:#b2d8f2!important}
html[data-theme="light"]:not(.mobile-device) .desktop-side-nav .nav-link.active{background:linear-gradient(135deg,#1593eb,#1767d0)!important;color:#fff!important;border-color:#0b81db!important;box-shadow:0 7px 18px rgba(18,119,198,.22)!important}
html[data-theme="light"]:not(.mobile-device) .desktop-sidebar-complex{background:#f9fcff!important;border-color:#aad0ec!important;box-shadow:0 10px 25px rgba(29,84,126,.11)!important}
html[data-theme="light"]:not(.mobile-device) .desktop-sidebar-photo{background-image:linear-gradient(180deg,transparent,rgba(235,247,255,.86) 98%),url('/assets/vtr24-bg-light.jpg')!important;filter:saturate(1.36) contrast(1.06) brightness(1.05)!important}
html[data-theme="light"] body.app-mode .app-header{background:rgba(249,252,255,.96)!important;border-bottom-color:#bdd7ea!important;box-shadow:0 5px 18px rgba(29,83,126,.08)!important}
html[data-theme="light"] .desktop-global-search,
html[data-theme="light"] .icon-action,
html[data-theme="light"] .profile-chip,
html[data-theme="light"] .logout-action{background:#fff!important;border-color:#bdd7ea!important;color:#163852!important;box-shadow:0 3px 10px rgba(33,92,137,.06)!important}
html[data-theme="light"] .desktop-global-search kbd{background:#e7f3fc!important;color:#315d7d!important;border-color:#c5ddeb!important}
html[data-theme="light"] body.app-mode .role-dashboard .panel-card,
html[data-theme="light"] body.app-mode .role-dashboard .stat-card{
  background:linear-gradient(145deg,#ffffff,#f6fbff)!important;
  border-color:#a9d2ee!important;
  box-shadow:0 9px 22px rgba(24,89,139,.10),inset 0 1px #fff!important;
}
html[data-theme="light"] body.app-mode .dashboard-quick-actions{
  background:
    linear-gradient(90deg,rgba(248,252,255,.98),rgba(236,248,255,.94)),
    url('/assets/vtr24-bg-light.jpg') center/cover!important;
}
html[data-theme="light"] body.app-mode .dashboard-quick-actions::before{background:linear-gradient(90deg,rgba(247,252,255,.96),rgba(237,249,255,.76),rgba(237,249,255,.52))!important}
html[data-theme="light"] body.app-mode .dashboard-quick-actions .quick-grid button{
  background:linear-gradient(145deg,#ffffff,#edf7ff)!important;border-color:#8fc7eb!important;
  box-shadow:0 6px 14px rgba(22,97,151,.11),inset 0 1px #fff!important;color:#10283f!important;
}
html[data-theme="light"] body.app-mode .request-stats-inline .stat-card{
  background:linear-gradient(145deg,#ffffff,#edf7ff)!important;border-color:#8fc7eb!important;color:#10283f!important;
}
html[data-theme="light"] body.app-mode #requestsSection .request-row{
  background:linear-gradient(90deg,#eff9ff,#ffffff 58%)!important;border-color:#b6d9ef!important;border-left-color:#159fe8!important;
}
html[data-theme="light"] body.app-mode .team-panel-stretched .team-list>div{border-bottom-color:#d7e5ef!important}
html[data-theme="light"] body.app-mode .work-grid article{
  background:linear-gradient(145deg,#ffffff,#edf7ff)!important;border-color:#a6d2ed!important;color:#10283f!important;
  box-shadow:0 5px 14px rgba(26,90,138,.08)!important;
}
html[data-theme="light"] body.app-mode .news-list button:hover,
html[data-theme="light"] body.app-mode .document-list button:hover{background:#eaf6ff!important}
html[data-theme="light"] body.app-mode .voting-panel .poll-card{background:#fff!important;border-color:#b8d8ec!important;box-shadow:0 5px 14px rgba(31,88,132,.07)!important}
html[data-theme="light"] body.app-mode .poll-bar{background:#dbeaf4!important}
html[data-theme="light"] body.app-mode .priority-alert{
  background:linear-gradient(100deg,#fff0c5 0%,#fff8e8 32%,#f8fcff 100%)!important;
  border-color:#d69018!important;border-left-color:#f0a11b!important;
  box-shadow:0 8px 20px rgba(170,105,18,.12)!important;
}
html[data-theme="light"] body.app-mode .priority-alert .eyebrow{color:#b36400!important}
html[data-theme="light"] body.app-mode .priority-alert h2{color:#4c3100!important}
html[data-theme="light"] body.app-mode .priority-alert p{color:#74561f!important}

/* Another +10% desktop scale from v0.2.42, using geometry-safe dimensions rather than browser zoom. */
@media (min-width:1180px){
  html:not(.mobile-device) body.app-mode{--desktop-sidebar-w:233px!important}
  html:not(.mobile-device) .desktop-sidebar{left:14px!important;top:14px!important;bottom:14px!important;padding:20px 14px 17px!important}
  html:not(.mobile-device) .desktop-sidebar-brand{padding:6px 10px 21px!important}
  html:not(.mobile-device) .desktop-sidebar-brand .app-logo-mark{width:41px!important;height:50px!important}
  html:not(.mobile-device) .desktop-sidebar-brand strong{font-size:18px!important}
  html:not(.mobile-device) .desktop-sidebar-brand small{font-size:10px!important}
  html:not(.mobile-device) .desktop-side-nav{gap:6px!important;margin-top:12px!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link{min-height:50px!important;padding:0 13px!important;gap:10px!important;border-radius:11px!important;font-size:14px!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link::before{width:24px!important;flex-basis:24px!important;font-size:20px!important}

  html:not(.mobile-device) .app-header{
    margin-left:calc(var(--desktop-sidebar-w) + 14px)!important;
    width:calc(100% - var(--desktop-sidebar-w) - 28px)!important;
    min-height:73px!important;height:73px!important;padding:0 24px 0 22px!important;
    grid-template-columns:minmax(365px,627px) 1fr auto!important;
  }
  html:not(.mobile-device) .desktop-global-search{height:46px!important;width:min(627px,100%)!important;padding:0 13px!important}
  html:not(.mobile-device) .desktop-search-placeholder{font-size:12px!important}
  html:not(.mobile-device) .desktop-global-search kbd{font-size:11px!important;padding:5px 9px!important}
  html:not(.mobile-device) .app-header-actions{gap:6px!important}
  html:not(.mobile-device) .icon-action{width:43px!important;height:43px!important;min-width:43px!important;border-radius:12px!important;font-size:18px!important}
  html:not(.mobile-device) .profile-chip{min-height:47px!important;padding:5px 11px 5px 6px!important}
  html:not(.mobile-device) .profile-chip .avatar{width:37px!important;height:37px!important}
  html:not(.mobile-device) .profile-copy strong{font-size:12px!important}
  html:not(.mobile-device) .profile-copy small{font-size:9.5px!important}
  html:not(.mobile-device) .logout-action{height:43px!important;min-height:43px!important;font-size:11px!important}

  html:not(.mobile-device) .role-dashboard,
  html:not(.mobile-device) .subpage,
  html:not(.mobile-device) .app-footer{
    margin-left:calc(var(--desktop-sidebar-w) + 32px)!important;
    margin-right:32px!important;
  }
  html:not(.mobile-device) .role-dashboard{margin-top:14px!important;gap:10px!important}
  html:not(.mobile-device) .panel-card,html:not(.mobile-device) .stat-card{border-radius:13px!important}

  html:not(.mobile-device) .dashboard-top-row{grid-template-columns:minmax(0,1fr) 363px!important;gap:11px!important}
  html:not(.mobile-device) .dashboard-quick-actions,html:not(.mobile-device) .dashboard-weather-card{min-height:131px!important;height:131px!important}
  html:not(.mobile-device) .dashboard-quick-actions{padding:13px 15px!important}
  html:not(.mobile-device) .dashboard-quick-actions .section-heading{margin-bottom:9px!important}
  html:not(.mobile-device) .dashboard-quick-actions .section-heading h2{font-size:17px!important}
  html:not(.mobile-device) .dashboard-quick-actions .eyebrow{font-size:10px!important}
  html:not(.mobile-device) .dashboard-quick-actions .quick-slogan{font-size:11px!important;max-width:160px!important}
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid{gap:10px!important}
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .quick-grid button{min-height:72px!important;height:72px!important;padding:9px 11px!important;border-radius:11px!important;grid-template-columns:44px minmax(0,1fr)!important;column-gap:10px!important}
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .quick-grid button>span{width:42px!important;height:42px!important;border-radius:10px!important;font-size:22px!important}
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid button strong{font-size:12px!important}
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid button small{font-size:9px!important}
  html:not(.mobile-device) .dashboard-weather-card{padding:14px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-copy>strong{font-size:21px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-copy small{font-size:10px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-reading>span{font-size:34px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-reading>strong{font-size:33px!important}
  html:not(.mobile-device) .dashboard-weather-card .weather-reading>small{font-size:10px!important}

  html:not(.mobile-device) body.app-mode .priority-alert{min-height:72px!important;padding:10px 15px!important;gap:12px!important}
  html:not(.mobile-device) body.app-mode .alert-icon{width:41px!important;height:41px!important;border-radius:11px!important;font-size:22px!important}
  html:not(.mobile-device) .priority-alert .eyebrow{font-size:9px!important}
  html:not(.mobile-device) .priority-alert h2{font-size:14.5px!important}
  html:not(.mobile-device) .priority-alert p{font-size:9.7px!important}
  html:not(.mobile-device) .priority-alert .ghost-button{padding:9px 14px!important;font-size:11px!important}

  html:not(.mobile-device) .request-overview-layout{grid-template-columns:minmax(0,1.82fr) 363px!important;gap:11px!important}
  html:not(.mobile-device) .request-overview-main{gap:10px!important;grid-template-rows:88px auto!important}
  html:not(.mobile-device) .request-stats-inline{gap:9px!important}
  html:not(.mobile-device) body.app-mode .request-stats-inline .stat-card{min-height:88px!important;height:88px!important;padding:11px 10px 10px 63px!important}
  html:not(.mobile-device) body.app-mode .request-stats-inline .stat-card::before{left:12px!important;width:40px!important;height:40px!important;border-radius:10px!important;font-size:21px!important}
  html:not(.mobile-device) .request-stats-inline .stat-card>span{font-size:10px!important}
  html:not(.mobile-device) .request-stats-inline .stat-card strong{font-size:24px!important;margin:4px 0 2px!important}
  html:not(.mobile-device) .request-stats-inline .stat-card small{font-size:9px!important}

  html:not(.mobile-device) body.app-mode #requestsSection{padding:12px 14px!important}
  html:not(.mobile-device) #requestsSection .section-heading{margin-bottom:8px!important}
  html:not(.mobile-device) #requestsSection .section-heading h2{font-size:14px!important}
  html:not(.mobile-device) #requestsSection .text-button{font-size:10px!important}
  html:not(.mobile-device) body.app-mode #requestsSection .request-row{min-height:46px!important;height:46px!important;padding:6px 9px!important;grid-template-columns:68px minmax(0,1fr) 99px 75px!important;gap:8px!important;border-radius:9px!important}
  html:not(.mobile-device) #requestsSection .request-id{font-size:9.7px!important}
  html:not(.mobile-device) #requestsSection .request-main strong{font-size:11px!important}
  html:not(.mobile-device) #requestsSection .request-main small,html:not(.mobile-device) #requestsSection .assignee{font-size:8.6px!important}
  html:not(.mobile-device) #requestsSection .status{font-size:8.8px!important;padding:4px 8px!important}

  html:not(.mobile-device) .team-panel-stretched{padding:12px 14px!important}
  html:not(.mobile-device) .team-panel-stretched .section-heading h2{font-size:14px!important}
  html:not(.mobile-device) body.app-mode .team-panel-stretched .team-list>div{padding:8px 0!important}
  html:not(.mobile-device) .team-panel-stretched .staff-row,html:not(.mobile-device) .team-panel-stretched .team-row{min-height:46px!important}
  html:not(.mobile-device) .team-panel-stretched .staff-avatar,html:not(.mobile-device) .team-panel-stretched .person-avatar{width:36px!important;height:36px!important;border-radius:11px!important;font-size:11px!important}
  html:not(.mobile-device) .team-panel-stretched strong{font-size:10px!important}
  html:not(.mobile-device) .team-panel-stretched small{font-size:8.5px!important}

  html:not(.mobile-device) #worksSection{padding:12px 14px!important}
  html:not(.mobile-device) #worksSection .section-heading h2{font-size:14px!important}
  html:not(.mobile-device) body.app-mode .work-grid{gap:9px!important}
  html:not(.mobile-device) body.app-mode .work-grid article{min-height:85px!important;height:85px!important;padding:9px 10px!important;border-radius:10px!important;grid-template-columns:42px minmax(0,1fr)!important;gap:8px!important}
  html:not(.mobile-device) body.app-mode .work-icon{width:39px!important;height:39px!important;border-radius:10px!important;font-size:21px!important}
  html:not(.mobile-device) .work-grid article strong{font-size:10px!important}
  html:not(.mobile-device) .work-grid article small{font-size:8.6px!important}
  html:not(.mobile-device) .work-grid article>.status{font-size:8.6px!important}

  html:not(.mobile-device) .content-columns.equal-columns{gap:11px!important}
  html:not(.mobile-device) .news-highlight-section,html:not(.mobile-device) #documentsSection{padding:11px 13px!important;min-height:152px!important}
  html:not(.mobile-device) .news-highlight-section .section-heading h2,html:not(.mobile-device) #documentsSection .section-heading h2{font-size:13px!important}
  html:not(.mobile-device) .news-list button,html:not(.mobile-device) .document-list button,html:not(.mobile-device) .real-document-download{min-height:35px!important;padding:5px 7px!important}
  html:not(.mobile-device) .news-list strong,html:not(.mobile-device) .document-list strong{font-size:9.7px!important}
  html:not(.mobile-device) .news-list small,html:not(.mobile-device) .document-list small{font-size:8.5px!important}
  html:not(.mobile-device) .news-list .real-news-item.news-with-photo{grid-template-columns:70px 56px minmax(0,1fr)!important;gap:11px!important;min-height:58px!important;padding:6px 7px!important}
  html:not(.mobile-device) .news-list .real-news-item.news-with-photo .news-complex-thumb{width:70px!important;height:50px!important}
  html:not(.mobile-device) .news-list .real-news-item.news-with-photo .news-date{width:52px!important;height:46px!important;font-size:8px!important}

  html:not(.mobile-device) .voting-panel{padding:12px 14px!important}
  html:not(.mobile-device) .voting-panel .section-heading h2{font-size:14px!important}
  html:not(.mobile-device) .voting-panel .section-subcopy{font-size:9px!important}
  html:not(.mobile-device) .voting-panel>.poll-stack{gap:11px!important}
  html:not(.mobile-device) .voting-panel #createPollButton{padding:8px 12px!important;font-size:10px!important}
  html:not(.mobile-device) .voting-panel .poll-card{padding:12px!important;border-radius:11px!important}
  html:not(.mobile-device) .voting-panel .poll-card h3{font-size:11px!important}
  html:not(.mobile-device) .voting-panel .poll-result-row strong,html:not(.mobile-device) .voting-panel .poll-result-row span{font-size:9px!important}
  html:not(.mobile-device) .voting-panel .poll-total strong{font-size:18px!important}
  html:not(.mobile-device) .voting-panel .poll-total span{font-size:9px!important}

  html:not(.mobile-device) .app-footer{font-size:10px!important;padding:9px 0 12px!important}
}

@media(max-width:900px){
  .cover-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:560px){
  .cover-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cover-thumb{height:72px}
  .news-list .real-news-item.news-with-photo{grid-template-columns:54px minmax(0,1fr)!important;grid-template-areas:"photo copy" "date copy"!important}
  .news-list .real-news-item.news-with-photo .news-complex-thumb{width:54px!important;height:40px!important}
  .news-list .real-news-item.news-with-photo .news-date{width:50px!important;height:25px!important}
}

/* =========================================================
   UK VTR24 v0.2.46 — WORK PRESET PICKER + QUICK ACTION SPACING
   Keeps the v0.2.43 scale, but actually changes dashboard proportions
   and internal alignment instead of simply making boxes larger.
   Desktop only. Mobile geometry remains untouched.
   ========================================================= */
@media (min-width:1180px){
  /* One shared geometry system for the two main desktop rows. */
  html:not(.mobile-device) body.app-mode{
    --dashboard-gap:12px;
    --dashboard-side-min:372px;
    --dashboard-main-ratio:2.18fr;
    --dashboard-side-ratio:1fr;
  }

  html:not(.mobile-device) .role-dashboard{
    gap:var(--dashboard-gap)!important;
  }

  html:not(.mobile-device) .dashboard-top-row,
  html:not(.mobile-device) .request-overview-layout{
    display:grid!important;
    grid-template-columns:minmax(0,var(--dashboard-main-ratio)) minmax(var(--dashboard-side-min),var(--dashboard-side-ratio))!important;
    gap:var(--dashboard-gap)!important;
    align-items:stretch!important;
  }

  /* Keep top pair exactly level. */
  html:not(.mobile-device) .dashboard-quick-actions,
  html:not(.mobile-device) .dashboard-weather-card{
    height:128px!important;
    min-height:128px!important;
    box-sizing:border-box!important;
  }

  html:not(.mobile-device) .dashboard-quick-actions{
    display:grid!important;
    grid-template-rows:auto 1fr!important;
    padding:12px 14px 11px!important;
    overflow:hidden!important;
  }
  html:not(.mobile-device) .dashboard-quick-actions .section-heading{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:start!important;
    gap:12px!important;
    margin:0 0 8px!important;
    min-height:31px!important;
  }
  html:not(.mobile-device) .dashboard-quick-actions .section-heading>div{
    min-width:0!important;
  }
  html:not(.mobile-device) .dashboard-quick-actions .section-heading h2{
    margin:2px 0 0!important;
    line-height:1.08!important;
  }
  html:not(.mobile-device) .dashboard-quick-actions .quick-slogan{
    align-self:start!important;
    line-height:1.25!important;
    text-align:right!important;
    margin-top:1px!important;
  }

  /* This is the geometry that was missing in v0.2.43. */
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;
    gap:10px!important;
    min-height:0!important;
    height:100%!important;
  }
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .quick-grid button{
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    padding:7px 12px!important;
    display:grid!important;
    grid-template-columns:46px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:"icon title" "icon small"!important;
    column-gap:11px!important;
    row-gap:2px!important;
    align-content:center!important;
    align-items:center!important;
    box-sizing:border-box!important;
  }
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .quick-grid button>span{
    grid-area:icon!important;
    align-self:center!important;
    justify-self:start!important;
    width:44px!important;
    height:44px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
  }
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid button strong{
    grid-area:title!important;
    align-self:end!important;
    line-height:1.18!important;
    margin:0!important;
    min-width:0!important;
  }
  html:not(.mobile-device) .dashboard-quick-actions .quick-grid button small{
    grid-area:small!important;
    align-self:start!important;
    line-height:1.2!important;
    margin:1px 0 0!important;
    min-width:0!important;
  }

  /* Weather uses the same vertical center as the action block. */
  html:not(.mobile-device) .dashboard-weather-card{
    padding:12px 14px!important;
    align-items:center!important;
  }

  /* Priority notice aligned to the same horizontal rhythm. */
  html:not(.mobile-device) body.app-mode .priority-alert{
    min-height:70px!important;
    padding:9px 14px!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:12px!important;
    box-sizing:border-box!important;
  }
  html:not(.mobile-device) body.app-mode .priority-alert .alert-icon{
    width:42px!important;height:42px!important;margin:0!important;
  }
  html:not(.mobile-device) .priority-alert h2{margin:2px 0 3px!important;line-height:1.12!important}
  html:not(.mobile-device) .priority-alert p{line-height:1.28!important}

  /* Requests + team now use the same column split as quick actions + weather. */
  html:not(.mobile-device) .request-overview-main{
    display:grid!important;
    grid-template-rows:82px auto!important;
    gap:10px!important;
    min-width:0!important;
  }
  html:not(.mobile-device) .request-stats-inline{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:9px!important;
    min-height:82px!important;
    height:82px!important;
  }
  html:not(.mobile-device) body.app-mode .request-stats-inline .stat-card{
    min-height:82px!important;
    height:82px!important;
    box-sizing:border-box!important;
    padding:9px 10px 9px 62px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
    position:relative!important;
    overflow:hidden!important;
  }
  html:not(.mobile-device) body.app-mode .request-stats-inline .stat-card::before{
    left:12px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:40px!important;
    height:40px!important;
    margin:0!important;
  }
  html:not(.mobile-device) .request-stats-inline .stat-card>span{
    line-height:1.15!important;
    margin:0!important;
  }
  html:not(.mobile-device) .request-stats-inline .stat-card strong{
    margin:3px 0 2px!important;
    line-height:.95!important;
  }
  html:not(.mobile-device) .request-stats-inline .stat-card small{
    margin:0!important;
    line-height:1.15!important;
  }

  /* Requests and team panels line up exactly at top and bottom. */
  html:not(.mobile-device) #requestsSection,
  html:not(.mobile-device) .team-panel-stretched{
    box-sizing:border-box!important;
    min-height:0!important;
  }
  html:not(.mobile-device) #requestsSection .section-heading,
  html:not(.mobile-device) .team-panel-stretched .section-heading,
  html:not(.mobile-device) #worksSection .section-heading,
  html:not(.mobile-device) .news-highlight-section .section-heading,
  html:not(.mobile-device) #documentsSection .section-heading{
    align-items:center!important;
  }

  /* A cleaner, consistent work-card geometry. */
  html:not(.mobile-device) body.app-mode .work-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch!important;
  }
  html:not(.mobile-device) body.app-mode .work-grid article{
    min-height:82px!important;
    height:auto!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-rows:1fr auto!important;
    align-items:center!important;
    align-content:center!important;
    padding:9px 10px!important;
  }
  html:not(.mobile-device) body.app-mode .work-grid article>div{
    justify-content:center!important;
    min-width:0!important;
  }
  html:not(.mobile-device) body.app-mode .work-grid article>.status,
  html:not(.mobile-device) body.app-mode .work-grid article>.progress{
    align-self:end!important;
    margin-top:1px!important;
  }

  /* Bottom columns use equal geometry and don't visually drift. */
  html:not(.mobile-device) .content-columns.equal-columns{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:var(--dashboard-gap)!important;
    align-items:stretch!important;
  }
  html:not(.mobile-device) .news-highlight-section,
  html:not(.mobile-device) #documentsSection{
    height:100%!important;
    box-sizing:border-box!important;
  }
}

/* v0.2.44 specificity lock: v0.2.41 premium rules used !important with a
   stronger selector, so later v0.2.42/v0.2.43 size rules could not win.
   These rules intentionally match/exceed that specificity. */
@media (min-width:1180px){
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .dashboard-quick-actions{
    height:118px!important;min-height:118px!important;padding:11px 13px 10px!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .dashboard-weather-card{
    height:118px!important;min-height:118px!important;padding:12px 13px!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .dashboard-quick-actions .quick-grid button{
    height:64px!important;min-height:64px!important;max-height:64px!important;
    padding:7px 11px!important;border-radius:10px!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    grid-template-areas:"icon title" "icon small"!important;
    column-gap:10px!important;row-gap:2px!important;
    align-content:center!important;align-items:center!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .dashboard-quick-actions .quick-grid button>span{
    width:40px!important;height:40px!important;border-radius:10px!important;font-size:21px!important;
    align-self:center!important;justify-self:start!important;margin:0!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .dashboard-quick-actions .quick-grid button strong{
    font-size:11px!important;line-height:1.15!important;margin:0!important;align-self:end!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .dashboard-quick-actions .quick-grid button small{
    font-size:8px!important;line-height:1.18!important;margin:1px 0 0!important;align-self:start!important;
  }

  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .request-stats-inline .stat-card{
    height:80px!important;min-height:80px!important;padding:9px 9px 9px 59px!important;border-radius:10px!important;
    display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .request-stats-inline .stat-card::before{
    left:11px!important;top:50%!important;transform:translateY(-50%)!important;
    width:37px!important;height:37px!important;border-radius:9px!important;font-size:19px!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .request-stats-inline .stat-card>span{font-size:9px!important;line-height:1.1!important}
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .request-stats-inline .stat-card strong{font-size:22px!important;margin:3px 0 2px!important;line-height:.95!important}
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .request-stats-inline .stat-card small{font-size:8px!important;line-height:1.1!important;margin:0!important}

  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection{
    padding:11px 12px!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .request-row{
    min-height:42px!important;height:42px!important;padding:5px 7px!important;
    grid-template-columns:62px minmax(0,1fr) 92px 68px!important;gap:7px!important;border-radius:8px!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .request-id{font-size:8.7px!important}
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .request-main strong{font-size:9.6px!important}
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .request-main small,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .assignee{font-size:7.6px!important}

  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .team-panel-stretched{
    padding:11px 12px!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .team-panel-stretched .team-list>div{
    padding:7px 0!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .team-panel-stretched .staff-row,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .team-panel-stretched .team-row{min-height:42px!important}
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .team-panel-stretched .staff-avatar,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .team-panel-stretched .person-avatar{width:33px!important;height:33px!important;border-radius:10px!important;font-size:10px!important}

  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-grid{
    gap:9px!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-grid article{
    min-height:78px!important;height:78px!important;padding:8px 9px!important;border-radius:9px!important;
    grid-template-columns:38px minmax(0,1fr)!important;grid-template-rows:1fr auto!important;gap:7px!important;
    align-items:center!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-icon{
    width:35px!important;height:35px!important;border-radius:9px!important;font-size:19px!important;
  }
}


/* UK VTR24 v0.2.46 — WORK PRESET PICKER + QUICK ACTION SPACING */
.work-grid .demo-work-card .work-card-image{display:block}
.work-grid .work-card-image{box-shadow:0 10px 22px rgba(7,62,116,.16);background:var(--app-surface)}
html[data-theme="light"] body.app-mode .work-grid .work-card-image{box-shadow:0 10px 24px rgba(26,82,138,.12)}
html:not(.mobile-device){font-size:110%}
@media (min-width:1180px){
  html:not(.mobile-device) body.app-mode .work-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important;gap:10px!important}
  html:not(.mobile-device) body.app-mode .work-grid article,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-grid article{
    min-height:88px!important;height:auto!important;padding:10px 11px!important;border-radius:12px!important;
    grid-template-columns:52px minmax(0,1fr)!important;grid-template-rows:1fr auto!important;gap:9px!important;
    box-shadow:0 10px 28px rgba(7,44,88,.16)!important;
  }
  html[data-theme="dark"] body.app-mode .work-grid article{background:linear-gradient(180deg,rgba(8,40,73,.98),rgba(7,31,58,.98))!important}
  html[data-theme="light"] body.app-mode .work-grid article{background:linear-gradient(180deg,#ffffff,#f7fbff)!important;border-color:#bed8ec!important}
  html:not(.mobile-device) body.app-mode .work-icon,
  html:not(.mobile-device) body.app-mode .work-card-image,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-icon,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-card-image{
    width:46px!important;height:46px!important;border-radius:11px!important;font-size:20px!important;
  }
  html:not(.mobile-device) body.app-mode .work-grid article strong,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-grid article strong{font-size:10.6px!important;line-height:1.18!important}
  html:not(.mobile-device) body.app-mode .work-grid article small,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-grid article small{font-size:8.6px!important;line-height:1.26!important;margin-top:2px!important}
  html:not(.mobile-device) body.app-mode .work-grid article>.status,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-grid article>.status{font-size:8.2px!important;padding:4px 8px!important;border-radius:999px!important;justify-self:start!important}
}


/* UK VTR24 v0.2.46 — WORK PRESET PICKER + QUICK ACTION SPACING */
.work-image-choice-block{display:flex;flex-direction:column;gap:7px;min-width:0}
.work-image-choice-title{font-size:10px;font-weight:800;color:var(--app-text)}
.work-image-choice-hint{font-size:9px;line-height:1.35;color:var(--app-muted)}
.work-image-picker{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.work-image-option{position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;padding:7px!important;min-width:0;border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface);cursor:pointer;transition:.18s ease}
.work-image-option input{position:absolute;opacity:0;pointer-events:none;width:1px!important;height:1px!important;min-height:0!important}
.work-image-option img,.work-preset-none{display:block;width:58px;height:58px;border-radius:10px;object-fit:cover;border:1px solid color-mix(in srgb,var(--app-blue) 20%,var(--app-border));background:var(--app-blue-soft)}
.work-preset-none{display:grid;place-items:center;font-size:27px;color:var(--app-blue);font-weight:300}
.work-image-option strong{font-size:8.5px;line-height:1.15;text-align:center;color:var(--app-text);white-space:normal}
.work-image-option:hover{border-color:color-mix(in srgb,var(--app-blue) 55%,var(--app-border));transform:translateY(-1px)}
.work-image-option:has(input:checked){border-color:var(--app-blue);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-blue) 18%,transparent),0 8px 20px rgba(16,106,185,.10);background:color-mix(in srgb,var(--app-blue-soft) 45%,var(--app-surface))}
.work-grid-empty{grid-column:1/-1;min-height:74px;border:1px dashed var(--app-border);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--app-muted);text-align:center}
.work-grid-empty strong{font-size:11px;color:var(--app-text)}
.work-grid-empty span{font-size:9px}

@media (min-width:1180px){
  /* Real space between the 3 action buttons and the outer panel frame. */
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .dashboard-quick-actions,
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions{
    height:142px!important;min-height:142px!important;padding:13px 17px 15px!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .dashboard-weather-card,
  html:not(.mobile-device) body.app-mode .dashboard-weather-card{height:142px!important;min-height:142px!important}
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .section-heading{margin-bottom:10px!important;min-height:32px!important}
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .quick-grid{gap:12px!important;padding:0 3px 4px!important;height:auto!important;min-height:0!important;align-self:stretch!important}
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .dashboard-quick-actions .quick-grid button,
  html:not(.mobile-device) body.app-mode .dashboard-quick-actions .quick-grid button{
    height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;border-radius:11px!important;
  }
  /* Planned-work cards are compact button-like cards; only real server items appear here. */
  html:not(.mobile-device) body.app-mode .work-grid,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
  html:not(.mobile-device) body.app-mode .work-grid article,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-grid article{
    min-height:76px!important;height:76px!important;padding:8px 10px!important;border-radius:11px!important;grid-template-columns:44px minmax(0,1fr)!important;gap:8px!important;
  }
  html:not(.mobile-device) body.app-mode .work-card-image,
  html:not(.mobile-device) body.app-mode .work-icon,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-card-image,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-icon{width:40px!important;height:40px!important;border-radius:9px!important}
}
@media (max-width:760px){.work-image-picker{grid-template-columns:repeat(3,minmax(0,1fr))}.work-image-option img,.work-preset-none{width:54px;height:54px}}


/* UK VTR24 v0.2.47 — CALENDAR / WORK EDIT / LEFT NAV / POLLS PAGE */
@media (min-width:1180px){
  /* Announcements, chat and settings now live in the left desktop navigation. */
  html:not(.mobile-device) .app-header-actions #headerAnnouncementsButton,
  html:not(.mobile-device) .app-header-actions #headerChatButton,
  html:not(.mobile-device) .app-header-actions #settingsGearButton{display:none!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="announcements"]::before{content:"📣";font-size:15px!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="chat"]::before{content:"💬";font-size:15px!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-count]:not([data-count="0"])::after{content:attr(data-count);margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:var(--app-orange);color:white;font-size:9px;font-weight:800}

  /* Calendar is intentionally compact enough to fit a normal desktop viewport. */
  html:not(.mobile-device) .work-calendar-page{margin-top:10px!important;min-height:auto!important}
  html:not(.mobile-device) .work-calendar-page .subpage-head{margin-bottom:9px!important;gap:12px!important}
  html:not(.mobile-device) .work-calendar-page .subpage-head h1{font-size:24px!important;margin:2px 0!important}
  html:not(.mobile-device) .work-calendar-page .subpage-head p{font-size:9px!important}
  html:not(.mobile-device) .work-calendar-panel{padding:10px 12px 12px!important}
  html:not(.mobile-device) .work-calendar-toolbar{margin-bottom:7px!important;gap:10px!important}
  html:not(.mobile-device) .work-calendar-toolbar strong{font-size:13px!important;min-width:150px!important}
  html:not(.mobile-device) .work-calendar-toolbar .ghost-button{min-height:31px!important;padding:5px 10px!important}
  html:not(.mobile-device) .work-calendar-weekdays span{padding:5px!important;font-size:8px!important}
  html:not(.mobile-device) .work-calendar-day{min-height:0!important;height:clamp(62px,8.4vh,76px)!important;padding:5px 6px!important;gap:3px!important}
  html:not(.mobile-device) .calendar-day-number{font-size:10px!important}
  html:not(.mobile-device) .calendar-day-works{gap:2px!important;overflow:hidden!important}
  html:not(.mobile-device) .calendar-day-works small,
  html:not(.mobile-device) .work-calendar-item{font-size:7px!important;line-height:1.15!important;padding:3px 4px!important;border-radius:5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;cursor:pointer!important}
  html:not(.mobile-device) .calendar-day-works em{font-size:7px!important}

  /* Work images: larger visual, no border/frame around the icon itself. */
  html:not(.mobile-device) body.app-mode .work-card-image,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .work-card-image{width:48px!important;height:48px!important;border:0!important;border-radius:10px!important;box-shadow:none!important}
  html:not(.mobile-device) body.app-mode .real-work-card{position:relative!important;padding-right:33px!important}
  html:not(.mobile-device) .edit-work-card{position:absolute;right:7px;top:7px;width:24px;height:24px;padding:0;border:0;border-radius:7px;background:color-mix(in srgb,var(--app-blue-soft) 82%,transparent);color:var(--app-blue);font-size:14px;display:grid;place-items:center;cursor:pointer;opacity:.78;transition:.15s ease}
  html:not(.mobile-device) .edit-work-card:hover{opacity:1;transform:translateY(-1px);background:color-mix(in srgb,var(--app-blue-soft) 100%,var(--app-surface))}
}

/* Preset picker: images themselves have no frame and are larger. */
.work-image-picker{gap:10px!important}
.work-image-option{border:1px solid transparent!important;background:transparent!important;padding:4px!important;border-radius:12px!important}
.work-image-option img,.work-preset-none{width:70px!important;height:70px!important;border:0!important;border-radius:12px!important;box-shadow:none!important}
.work-image-option:has(input:checked){border-color:color-mix(in srgb,var(--app-blue) 55%,transparent)!important;background:color-mix(in srgb,var(--app-blue-soft) 38%,transparent)!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-blue) 10%,transparent)!important}
.work-image-option:hover{border-color:color-mix(in srgb,var(--app-blue) 30%,transparent)!important}

/* Unified polls page with active questions above the archive. */
.polls-page{display:block}
.polls-page.hidden{display:none!important}
.polls-active-panel,.polls-archive-panel{margin-bottom:14px}
.polls-page-active{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.polls-page-count{font-size:10px;color:var(--app-muted);font-weight:800}
.polls-page .archive-filter-row>div{display:flex;flex-direction:column;gap:3px}
.polls-page .archive-filter-row>div strong{font-size:15px}
@media(max-width:900px){.polls-page-active{grid-template-columns:1fr}}


/* UK VTR24 v0.2.48 — DOCUMENTS PAGE / WORKS NEXT TO NEWS / CHAT PASTE */
.documents-page{max-width:1480px;margin:0 auto;padding:24px 24px 56px}
.documents-library-panel{margin-top:16px}
.document-page-count{font-size:10px;color:var(--app-muted);font-weight:700}
.documents-page-list{display:grid;gap:9px;margin-top:12px}
.document-page-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}
.document-page-download{width:100%!important;min-height:66px!important}
.document-delete-button{border:1px solid rgba(230,84,84,.34);background:rgba(203,49,49,.08);color:#e75b5b;border-radius:11px;padding:0 16px;font-weight:800;cursor:pointer}
.document-delete-button:hover{background:rgba(203,49,49,.16);border-color:rgba(230,84,84,.55)}
.documents-empty{padding:30px;border:1px dashed var(--app-border);border-radius:13px;display:flex;flex-direction:column;gap:5px;align-items:center;color:var(--app-muted)}
.documents-empty strong{color:var(--app-text);font-size:14px}
html[data-theme="light"] .document-delete-button{background:#fff5f5;color:#b42323;border-color:#efc5c5}
/* Main bottom pair: news and works are equal blocks. */
html:not(.mobile-device) body.app-mode .content-columns.equal-columns>.news-highlight-section,
html:not(.mobile-device) body.app-mode .content-columns.equal-columns>.works-highlight-section{min-width:0;height:100%;box-sizing:border-box}
html:not(.mobile-device) body.app-mode .works-highlight-section .work-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
html:not(.mobile-device) body.app-mode .works-highlight-section .work-grid article,
html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) .works-highlight-section .work-grid article{min-height:76px!important;padding:8px 9px!important;grid-template-columns:44px minmax(0,1fr)!important}
html:not(.mobile-device) body.app-mode .works-highlight-section .work-card-image,
html:not(.mobile-device) body.app-mode .works-highlight-section .work-icon{width:40px!important;height:40px!important}
@media(max-width:900px){.document-page-row{grid-template-columns:1fr}.document-delete-button{min-height:42px}.documents-page{padding:16px 12px 44px}}
.document-page-download{display:grid!important;grid-template-columns:42px minmax(0,1fr) 24px!important;gap:12px!important;align-items:center!important;text-align:left!important;border:1px solid var(--app-border)!important;background:var(--app-surface-strong)!important;color:var(--app-text)!important;border-radius:12px!important;padding:10px 12px!important;cursor:pointer!important}
.document-page-download>span{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--app-red-soft);color:var(--app-red);font-size:8px;font-weight:800}
.document-page-download>p{margin:0;display:flex;flex-direction:column;min-width:0}
.document-page-download>p strong{font-size:11px}
.document-page-download>p small{font-size:9px;color:var(--app-muted);margin-top:3px}
.document-page-download>b{font-size:16px;color:var(--app-muted);font-weight:500}
.document-page-download:hover{border-color:color-mix(in srgb,var(--app-blue) 45%,var(--app-border))!important;background:color-mix(in srgb,var(--app-blue-soft) 34%,var(--app-surface-strong))!important}

/* UK VTR24 v0.2.49 — calendar day actions, documents library, audit log, daytime light theme */
.desktop-global-search{position:relative}
.desktop-global-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:inherit;font:inherit;font-size:11px;padding:0}
.desktop-global-search input::placeholder{color:var(--app-muted);opacity:.95}
.global-search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:80;padding:7px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface-strong);box-shadow:0 18px 48px rgba(1,18,35,.32);max-height:360px;overflow:auto}
.global-search-results button{width:100%;border:0;border-bottom:1px solid var(--app-border);background:transparent;color:var(--app-text);padding:9px 10px;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"type title" "type copy";gap:2px 9px;text-align:left;cursor:pointer;border-radius:8px}
.global-search-results button:last-child{border-bottom:0}.global-search-results button:hover{background:var(--app-blue-soft)}
.global-search-results button .global-result-type{grid-area:type;align-self:center;padding:4px 7px;border-radius:999px;font-size:7px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--app-blue-soft);color:var(--app-blue)}
.global-search-results button strong{grid-area:title;font-size:10px}.global-search-results button small{grid-area:copy;color:var(--app-muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.global-search-empty{padding:14px;color:var(--app-muted);font-size:9px;line-height:1.45}
html[data-theme="light"] .global-search-results{background:#fff;box-shadow:0 18px 44px rgba(32,91,139,.18)}

.documents-filter-bar,.audit-filter-bar{display:grid;grid-template-columns:minmax(280px,1fr) 230px;gap:10px;margin:12px 0}
.documents-filter-bar select,.audit-filter-bar select{border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface);color:var(--app-text);padding:9px 11px;outline:0}
.document-library-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}
.document-page-download{display:grid!important;grid-template-columns:46px minmax(0,1fr) 150px 24px!important;gap:12px!important;align-items:center!important;width:100%!important}
.document-page-download time{font-size:9px;color:var(--app-muted);white-space:nowrap;text-align:right}
.document-file-icon{display:grid!important;place-items:center!important;width:42px!important;height:42px!important;border-radius:10px!important;font-size:10px!important;font-weight:900!important;letter-spacing:.03em!important}
.document-file-icon.pdf-icon{background:linear-gradient(145deg,#c91d2e,#ef4053)!important;color:white!important;border:1px solid rgba(255,102,118,.42)!important;box-shadow:0 7px 18px rgba(199,26,45,.20)!important}
.document-file-icon.generic-icon{background:var(--app-blue-soft)!important;color:var(--app-blue)!important}

.work-day-modal-shell{width:min(680px,calc(100vw - 28px))!important}
.work-day-modal-list{display:grid;gap:9px;max-height:55vh;overflow:auto;padding:2px 2px 4px}
.work-day-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main status" "actions actions";gap:8px 12px;padding:12px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface-strong)}
.work-day-row>div:first-child{grid-area:main;display:flex;flex-direction:column;gap:4px}.work-day-row>div:first-child strong{font-size:12px}.work-day-row>div:first-child small{font-size:9px;color:var(--app-muted);line-height:1.4}.work-day-row>.status{grid-area:status;align-self:start}.work-day-actions{grid-area:actions;display:flex;gap:12px;justify-content:flex-end;border-top:1px solid var(--app-border);padding-top:8px}
.work-calendar-day{cursor:pointer}.work-calendar-day:hover{box-shadow:inset 0 0 0 1px var(--app-blue);background:color-mix(in srgb,var(--app-blue-soft) 45%,var(--app-surface-strong))}

.audit-log-list{display:grid;gap:8px;margin-top:12px}.audit-log-row{display:grid;grid-template-columns:135px 180px 220px minmax(0,1fr);gap:12px;align-items:center;padding:11px 12px;border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface-strong)}
.audit-log-row time{font-size:9px;color:var(--app-muted)}.audit-actor,.audit-action{display:flex;flex-direction:column;gap:2px}.audit-log-row strong{font-size:10px}.audit-log-row small{font-size:8px;color:var(--app-muted)}.audit-log-row p{margin:0;font-size:9px;line-height:1.35;color:var(--app-muted)}
.permission-admin-only{opacity:.72}.form-field-hint{display:block;margin-top:4px;font-size:8px;color:#b06b12}.form-field-hint.hidden{display:none}

/* Light theme gets a real daytime image instead of a brightened night photo. */
html[data-theme="light"] .dashboard-weather-card::before,
html[data-theme="light"] .owner-weather-hero::before{background-image:url('/assets/vtr24-bg-light.jpg')!important;background-position:center 48%!important;filter:saturate(1.22) brightness(1.18) contrast(.96)!important}
html[data-theme="light"] .dashboard-weather-card::after,
html[data-theme="light"] .owner-weather-hero::after{background:linear-gradient(90deg,rgba(24,91,145,.68) 0%,rgba(35,118,174,.20) 58%,rgba(255,255,255,.08) 100%)!important}
html[data-theme="light"] .dashboard-weather-card,
html[data-theme="light"] .owner-weather-hero{background:#dcefff!important}

@media(max-width:900px){
  .documents-filter-bar,.audit-filter-bar{grid-template-columns:1fr}.document-page-download{grid-template-columns:42px minmax(0,1fr) 22px!important}.document-page-download time{grid-column:2/3;text-align:left}.audit-log-row{grid-template-columns:1fr 1fr}.audit-log-row p{grid-column:1/-1}
}


/* UK VTR24 v0.2.50 — audit clarity, shared polls, full sidebar art, upload controls */
@media (min-width:1180px){
  html:not(.mobile-device) .desktop-sidebar{
    isolation:isolate!important;
    background:#071b34!important;
  }
  html:not(.mobile-device) .desktop-sidebar::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background-image:url('/assets/vtr24-bg-dark.png');background-size:cover;background-position:52% center;
    filter:saturate(1.22) contrast(1.06) brightness(.72);
  }
  html:not(.mobile-device) .desktop-sidebar::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(3,20,39,.72) 0%,rgba(4,29,55,.78) 48%,rgba(5,32,59,.54) 100%);
    pointer-events:none;
  }
  html[data-theme="light"]:not(.mobile-device) .desktop-sidebar{background:#eaf6ff!important}
  html[data-theme="light"]:not(.mobile-device) .desktop-sidebar::before{
    background-image:url('/assets/vtr24-bg-light.jpg');filter:saturate(1.18) contrast(1.02) brightness(1.12);opacity:.74;
  }
  html[data-theme="light"]:not(.mobile-device) .desktop-sidebar::after{
    background:linear-gradient(180deg,rgba(247,252,255,.90),rgba(235,247,255,.82) 44%,rgba(227,243,255,.54));
  }
  html:not(.mobile-device) .desktop-sidebar-complex{
    display:flex!important;min-height:104px!important;margin-top:auto!important;padding:14px!important;
    border:0!important;border-radius:14px!important;background:linear-gradient(180deg,transparent,rgba(4,24,45,.42))!important;
    box-shadow:none!important;flex-direction:column;justify-content:flex-end;
  }
  html:not(.mobile-device) .desktop-sidebar-photo{display:none!important}
  html:not(.mobile-device) .desktop-sidebar-brand,html:not(.mobile-device) .desktop-side-nav{position:relative;z-index:1}
}

/* One consistent upload field for every form. */
body.app-mode input[type="file"]:not([hidden]){
  min-height:48px!important;padding:5px!important;border:1px solid color-mix(in srgb,var(--app-blue) 28%,var(--app-border))!important;
  border-radius:12px!important;background:color-mix(in srgb,var(--app-surface-strong) 94%,var(--app-blue-soft))!important;color:var(--app-muted)!important;
  font:inherit!important;cursor:pointer!important;
}
body.app-mode input[type="file"]:not([hidden])::file-selector-button{
  min-height:36px;margin-right:12px;padding:0 16px;border:0;border-radius:9px;
  background:linear-gradient(145deg,#0d8fe8,#45b7ff);color:#fff;font-weight:800;letter-spacing:.01em;
  box-shadow:0 5px 16px rgba(20,137,220,.25);cursor:pointer;transition:transform .16s ease,filter .16s ease;
}
body.app-mode input[type="file"]:not([hidden])::file-selector-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
html[data-theme="dark"] body.app-mode input[type="file"]:not([hidden]){background:#0b2038!important;border-color:#28557a!important;color:#bfd4e7!important}

.poll-archive-collapsed-head{display:flex;align-items:center;justify-content:space-between;gap:18px}
.poll-archive-collapsed-head>div{display:flex;flex-direction:column;gap:4px}.poll-archive-collapsed-head small{color:var(--app-muted);font-size:10px}
.poll-archive-body{margin-top:16px}.archive-filter-row{display:flex;gap:12px;align-items:end;justify-content:flex-end;margin-bottom:14px}
.archive-filter-row label{display:flex;flex-direction:column;gap:5px}.archive-filter-row label span{font-size:9px;color:var(--app-muted);font-weight:700}
.archive-filter-row input,.archive-filter-row select{min-height:38px;border:1px solid var(--app-border);border-radius:9px;background:var(--app-surface);color:var(--app-text);padding:0 11px}
.archive-search-field{min-width:min(360px,55vw);margin-right:auto}.global-result-type.poll-type{background:rgba(132,90,246,.16);color:#a98cff}
.close-shared-poll{margin-top:12px}


/* UK VTR24 v0.2.51 — global search, notification archive window, cleaner icons, iPhone 7 header */
.global-search-results .user-type{background:rgba(87,159,255,.14);color:#2e78da}
.global-search-results .audit-type{background:rgba(255,160,67,.16);color:#b96810}
.global-search-results .work-type{background:rgba(91,170,118,.16);color:#2b8451}
.global-search-results .notification-type{background:rgba(211,94,94,.14);color:#b43a3a}
.priority-multi-list{display:flex;flex-direction:column;gap:4px}
.priority-multi-line{display:block;line-height:1.45}
.priority-multi-line strong{font-weight:800}
.work-card-image,.notification-image-wrap img{background:transparent!important;border:0!important;box-shadow:none!important}
.real-work-card .work-card-image,.work-grid .work-card-image{border-radius:12px!important;width:56px!important;height:56px!important}
.work-grid .important-work-card .work-card-image{filter:saturate(1.06) contrast(1.03)}
.real-work-card .work-icon{background:linear-gradient(145deg,rgba(31,126,214,.16),rgba(31,126,214,.03));border:1px solid rgba(52,145,231,.18);color:var(--app-blue)}
.priority-alert .alert-icon{background:linear-gradient(145deg,#5a3510,#7a4516);border:0;box-shadow:none}
html.mobile-device .app-header-actions{overflow-x:auto!important;scrollbar-width:none!important;-ms-overflow-style:none!important}
html.mobile-device .app-header-actions::-webkit-scrollbar{display:none!important}
@media (max-width: 390px){
  html.mobile-device .app-header-actions{gap:4px!important;max-width:100%!important}
  html.mobile-device .icon-action{width:34px!important;height:34px!important;font-size:16px!important;border-radius:12px!important}
  html.mobile-device .profile-chip{max-width:128px!important;min-width:0!important;padding:5px 8px!important;gap:8px!important}
  html.mobile-device .profile-chip .avatar{width:30px!important;height:30px!important;font-size:14px!important}
  html.mobile-device .profile-chip .profile-copy strong{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.mobile-device .profile-chip .profile-copy small{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.mobile-device .logout-action{min-width:54px!important;padding:0 9px!important;font-size:12px!important;height:34px!important}
  html.mobile-device .desktop-global-search{min-width:0!important}
}


/* UK VTR24 v0.2.52 — cache-safe mobile header + platform-neutral vector icons */
.ui-vector-icon{width:19px;height:19px;display:block;filter:none;pointer-events:none}
.icon-action .ui-vector-icon{color:inherit}
.quick-vector-icon{width:24px;height:24px;display:block;filter:brightness(0) invert(1);pointer-events:none}
html[data-theme="light"] .quick-vector-icon{filter:brightness(0) invert(1)}
.work-card-preset[src$=".svg"]{object-fit:contain!important;padding:3px!important;background:transparent!important}
.work-grid .work-card-image{border:0!important;box-shadow:none!important;background:transparent!important}
.work-grid .real-work-card{overflow:hidden}

/* Force correct row placement on every touch phone/foldable. This is intentionally
   after all older mobile rules so iPhone 7, Chrome Android and Samsung Fold agree. */
@media (max-width: 900px){
  html.mobile-device .app-header{
    display:grid!important;
    grid-template-columns:minmax(74px,1fr) auto!important;
    grid-template-rows:auto auto!important;
    column-gap:6px!important;row-gap:5px!important;
    padding:max(7px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left))!important;
    overflow:hidden!important;
  }
  html.mobile-device .app-brand-block{grid-column:1!important;grid-row:1!important;align-self:center!important;max-width:92px!important}
  html.mobile-device .app-header-actions{
    grid-column:2!important;grid-row:1!important;
    display:flex!important;flex-flow:row nowrap!important;align-items:center!important;justify-content:flex-end!important;
    min-width:0!important;max-width:100%!important;overflow:visible!important;gap:3px!important;
  }
  html.mobile-device .app-nav{
    grid-column:1/-1!important;grid-row:2!important;
    display:flex!important;width:100%!important;min-width:0!important;max-width:100%!important;
    overflow-x:auto!important;overflow-y:hidden!important;padding:4px 0 8px!important;margin:0!important;
    scroll-padding-left:2px!important;
  }
  html.mobile-device .desktop-global-search{display:none!important}
  html.mobile-device .header-role-switch{display:none!important}
  html.mobile-device .profile-chip{display:none!important}
  html.mobile-device .icon-action{width:30px!important;height:30px!important;min-width:30px!important;border-radius:9px!important;padding:0!important;display:grid!important;place-items:center!important}
  html.mobile-device .icon-action .ui-vector-icon{width:17px!important;height:17px!important}
  html.mobile-device .logout-action{height:30px!important;min-height:30px!important;min-width:42px!important;padding:0 6px!important;font-size:9px!important;border-radius:9px!important}
  html.mobile-device .app-nav .nav-link{min-height:36px!important;min-width:88px!important;padding:0 10px!important;font-size:11px!important}
  html.mobile-device .icon-action.has-badge>span{top:-5px!important;right:-4px!important;min-width:16px!important;height:16px!important;font-size:8px!important}
  html.mobile-device .notification-optin{left:10px!important;right:10px!important;top:auto!important;bottom:max(12px,calc(env(safe-area-inset-bottom) + 12px))!important;width:auto!important;max-height:42vh!important}
}
@media (max-width: 390px){
  html.mobile-device .app-header{grid-template-columns:72px minmax(0,1fr)!important;column-gap:4px!important;padding-left:7px!important;padding-right:7px!important}
  html.mobile-device .app-brand-block{max-width:72px!important;gap:5px!important}
  html.mobile-device .app-brand-block .app-logo-mark{width:23px!important;height:29px!important}
  html.mobile-device .app-brand-block strong{max-width:42px!important;font-size:10px!important;letter-spacing:.07em!important}
  html.mobile-device .app-header-actions{gap:2px!important}
  html.mobile-device .icon-action{width:27px!important;height:27px!important;min-width:27px!important;border-radius:8px!important}
  html.mobile-device .icon-action .ui-vector-icon{width:15px!important;height:15px!important}
  html.mobile-device .logout-action{height:27px!important;min-height:27px!important;min-width:38px!important;padding:0 4px!important;font-size:8px!important}
  html.mobile-device .app-nav .nav-link{min-height:34px!important;min-width:82px!important;font-size:10.5px!important;padding:0 9px!important}
}
@media (min-width:391px) and (max-width:900px){
  html.mobile-device .app-brand-block{max-width:110px!important}
  html.mobile-device .app-brand-block strong{max-width:68px!important;font-size:11px!important}
  html.mobile-device .icon-action{width:32px!important;height:32px!important;min-width:32px!important}
  html.mobile-device .logout-action{height:32px!important;min-height:32px!important;min-width:45px!important;font-size:9.5px!important}
}


/* UK VTR24 v0.2.53 — visible header controls, colorful work pictograms, owner alert, richer light sidebar */
.icon-action{
  background:linear-gradient(180deg,#0d3155,#092744)!important;
  border:1px solid #2d668f!important;
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 5px 14px rgba(1,16,31,.18)!important;
}
.icon-action:hover{border-color:#4ba7e9!important;background:linear-gradient(180deg,#12436f,#0b3052)!important}
.icon-action .ui-vector-icon{width:21px!important;height:21px!important;opacity:1!important;filter:none!important}
html[data-theme="light"] .icon-action{
  background:linear-gradient(180deg,#ffffff,#edf7ff)!important;
  border-color:#9bc9e8!important;
  box-shadow:0 5px 14px rgba(28,94,144,.12)!important;
}
html[data-theme="light"] .icon-action:hover{background:#e5f5ff!important;border-color:#4ba7e9!important}

/* Important alert has the same amber emphasis for UK/TSN and owners. */
body.app-mode #ukPriorityAlert,
body.app-mode #ownerPriorityAlert{
  border:1px solid rgba(226,142,31,.78)!important;
  border-left:5px solid #ffad2e!important;
  background:linear-gradient(90deg,rgba(119,65,15,.34),rgba(12,35,61,.97) 22%,rgba(9,30,54,.98))!important;
  box-shadow:0 8px 25px rgba(0,0,0,.13),inset 0 0 24px rgba(255,158,32,.025)!important;
}
body.app-mode #ukPriorityAlert .alert-icon,
body.app-mode #ownerPriorityAlert .alert-icon{
  background:linear-gradient(145deg,#ffae2f,#d87913)!important;
  color:#241300!important;
  box-shadow:0 6px 16px rgba(212,119,19,.23)!important;
}
body.app-mode #ukPriorityAlert .eyebrow,
body.app-mode #ownerPriorityAlert .eyebrow{color:#ffc85f!important}
html[data-theme="light"] body.app-mode #ukPriorityAlert,
html[data-theme="light"] body.app-mode #ownerPriorityAlert{
  border-color:#e4a038!important;
  border-left-color:#f2a122!important;
  background:linear-gradient(90deg,#fff0cf,#fff8e9 34%,#fffdf8)!important;
  box-shadow:0 8px 22px rgba(180,109,15,.10)!important;
}
html[data-theme="light"] body.app-mode #ukPriorityAlert h2,
html[data-theme="light"] body.app-mode #ownerPriorityAlert h2{color:#4a3105!important}
html[data-theme="light"] body.app-mode #ukPriorityAlert p,
html[data-theme="light"] body.app-mode #ownerPriorityAlert p{color:#785a23!important}
html[data-theme="light"] body.app-mode #ukPriorityAlert .eyebrow,
html[data-theme="light"] body.app-mode #ownerPriorityAlert .eyebrow{color:#a76100!important}

/* Clean, colorful work pictograms: no dark picture frame. */
.work-image-option img,
.work-card-image.work-card-preset,
.work-grid .work-card-image[src$=".svg"]{
  object-fit:contain!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.work-image-option img{padding:5px!important}
.work-card-image.work-card-preset{padding:4px!important}
.work-image-option{background:transparent!important}
.work-image-option:has(input:checked){background:rgba(34,145,224,.10)!important}

/* Make the light sidebar image clearly visible instead of washed out. */
@media (min-width:901px){
  html[data-theme="light"] body.app-mode .desktop-sidebar::before{
    filter:saturate(1.55) contrast(1.10) brightness(1.02)!important;
    opacity:.94!important;
  }
  html[data-theme="light"] body.app-mode .desktop-sidebar::after{
    background:linear-gradient(180deg,rgba(247,252,255,.72),rgba(235,247,255,.56) 44%,rgba(226,243,255,.26))!important;
  }
}

/* Mobile buttons remain compact but are now high-contrast and readable. */
@media (max-width:900px){
  html.mobile-device .icon-action{
    background:linear-gradient(180deg,#102d4d,#0a213b)!important;
    border-color:#315978!important;
    box-shadow:0 3px 9px rgba(0,0,0,.20)!important;
  }
  html.mobile-device .icon-action .ui-vector-icon{width:19px!important;height:19px!important}
  html[data-theme="light"].mobile-device .icon-action{
    background:linear-gradient(180deg,#fff,#edf7ff)!important;
    border-color:#9dc9e8!important;
  }
}
@media (max-width:390px){
  html.mobile-device .icon-action{width:31px!important;height:31px!important;min-width:31px!important}
  html.mobile-device .icon-action .ui-vector-icon{width:18px!important;height:18px!important}
}


/* UK VTR24 v0.2.54 — compact requests, clear timeline, colorful light sidebar */

/* Compact request lists without hiding text. */
.request-row .request-main,
.request-row .request-main strong,
.request-row .request-main small,
.request-row .assignee{min-width:0!important;overflow:visible!important}
.request-row .request-main strong{white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.request-row .request-main small{display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
@media (min-width:1180px){
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection{padding:8px 10px!important}
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .section-heading{margin-bottom:5px!important}
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .request-row{
    min-height:35px!important;height:35px!important;padding:3px 6px!important;
    grid-template-columns:58px minmax(0,1fr) 84px 62px!important;gap:6px!important;border-radius:7px!important;
  }
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .request-id{font-size:7.9px!important;line-height:1.12!important}
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .request-main strong{font-size:9px!important;line-height:1.12!important}
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .request-main small,
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .assignee{font-size:7px!important;line-height:1.15!important}
  html:not(.mobile-device) body.app-mode:is(.design-premium,.design-classic,.design-contrast) #requestsSection .status{font-size:7.3px!important;padding:3px 6px!important}
  html:not(.mobile-device) .requests-full-list .request-row{min-height:48px!important;padding:8px 11px!important}
}

/* Request details: less vertical bulk and no clipped timeline lines. */
.request-detail-modal{width:min(780px,calc(100vw - 32px))!important;padding:16px!important;max-height:90vh!important}
.request-detail-status{margin-bottom:9px!important}
.request-detail-grid{gap:7px!important}
.request-detail-grid>div,.request-detail-description{padding:8px 10px!important;border-radius:10px!important;gap:3px!important}
.request-detail-grid span,.request-detail-description span{font-size:8px!important}
.request-detail-grid strong{font-size:11px!important;line-height:1.25!important;white-space:normal!important;overflow:visible!important}
.request-detail-description{margin:7px 0 10px!important}
.request-detail-description p{line-height:1.35!important;font-size:11px!important}
.request-timeline{gap:6px!important;margin:6px 0 10px!important;overflow:visible!important}
.request-timeline-item{
  grid-template-columns:12px minmax(0,1fr)!important;gap:8px!important;padding:7px 9px!important;
  min-height:0!important;height:auto!important;border-radius:10px!important;overflow:visible!important;align-items:start!important;
}
.request-timeline-item>div{min-width:0!important;overflow:visible!important}
.request-timeline-dot{width:8px!important;height:8px!important;margin-top:3px!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--app-blue) 13%,transparent)!important}
.request-timeline-item strong{font-size:10.5px!important;line-height:1.28!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word!important}
.request-timeline-item p{margin:2px 0 0!important;font-size:8.5px!important;line-height:1.2!important}
.request-timeline-item time{margin-top:2px!important;font-size:8px!important;line-height:1.15!important}
.request-photo-gallery{gap:7px!important;margin-top:7px!important}
.request-photo-gallery a{border-radius:10px!important;max-width:235px!important}
@media(max-width:720px){
  .request-detail-modal{width:100%!important;padding:13px!important}
  .request-timeline-item{padding:7px 8px!important}
  .request-timeline-item strong{font-size:10px!important}
}

/* Keep the desktop header visually separated from the left rail. */
@media (min-width:1180px){
  html:not(.mobile-device) body.app-mode .app-header{
    margin-left:calc(var(--desktop-sidebar-w) + 28px)!important;
    width:calc(100% - var(--desktop-sidebar-w) - 56px)!important;
    border-radius:0 0 12px 12px!important;
  }
  html:not(.mobile-device) body.app-mode .role-dashboard,
  html:not(.mobile-device) body.app-mode .subpage,
  html:not(.mobile-device) body.app-mode .app-footer{
    margin-left:calc(var(--desktop-sidebar-w) + 28px)!important;
  }
}

/* Light sidebar: stronger photo, readable text and colorful vector icons. */
@media (min-width:1180px){
  html:not(.mobile-device) .desktop-sidebar-complex{display:none!important}
  html[data-theme="light"] body.app-mode .desktop-sidebar::before{
    filter:saturate(1.82) contrast(1.16) brightness(.98)!important;
    opacity:1!important;
    background-position:52% center!important;
  }
  html[data-theme="light"] body.app-mode .desktop-sidebar::after{
    background:linear-gradient(180deg,rgba(245,252,255,.58) 0%,rgba(239,249,255,.43) 38%,rgba(232,247,255,.22) 70%,rgba(226,242,255,.12) 100%)!important;
  }
  html[data-theme="light"] body.app-mode .desktop-sidebar-brand strong{color:#0a3153!important;text-shadow:0 1px 0 rgba(255,255,255,.9)!important}
  html[data-theme="light"] body.app-mode .desktop-sidebar-brand small{color:#39749d!important;font-weight:650!important;text-shadow:0 1px 0 rgba(255,255,255,.85)!important}
  html[data-theme="light"] body.app-mode .desktop-side-nav{gap:7px!important}
  html[data-theme="light"] body.app-mode .desktop-side-nav .nav-link{
    color:#123f62!important;font-weight:650!important;
    background:rgba(255,255,255,.52)!important;border-color:rgba(74,153,210,.18)!important;
    box-shadow:0 3px 12px rgba(41,104,151,.05)!important;
    text-shadow:0 1px 0 rgba(255,255,255,.9)!important;
  }
  html[data-theme="light"] body.app-mode .desktop-side-nav .nav-link:hover{
    color:#072f53!important;background:rgba(255,255,255,.72)!important;border-color:rgba(46,139,208,.34)!important;
  }
  html[data-theme="light"] body.app-mode .desktop-side-nav .nav-link.active{
    color:#fff!important;text-shadow:none!important;background:linear-gradient(135deg,#139ee8,#2673df)!important;
    border-color:#168ad2!important;box-shadow:0 8px 20px rgba(20,122,203,.22)!important;
  }

  html:not(.mobile-device) .desktop-side-nav .nav-link::before{
    content:""!important;width:23px!important;height:23px!important;flex:0 0 23px!important;
    background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;
    filter:none!important;
  }
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="home"]::before{background-image:url('/assets/nav-home.svg')!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="requests"]::before{background-image:url('/assets/nav-requests.svg')!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="documents"]::before{background-image:url('/assets/nav-documents.svg')!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="announcements"]::before{background-image:url('/assets/nav-announcements.svg')!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="votes"]::before{background-image:url('/assets/nav-votes.svg')!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="chat"]::before{background-image:url('/assets/nav-chat.svg')!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="staff"]::before{background-image:url('/assets/nav-staff.svg')!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="info"]::before{background-image:url('/assets/nav-info.svg')!important}
  html:not(.mobile-device) .desktop-side-nav .nav-link[data-key="settings"]::before{background-image:url('/assets/nav-settings.svg')!important}
}


/* UK VTR24 v0.2.55 — light desktop sidebar only.
   IMPORTANT: no dashboard columns, cards, header geometry or mobile layout are changed here. */
@media (min-width:1180px){
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar{
    background:#eaf6ff!important;
    border-right-color:rgba(68,142,196,.28)!important;
    box-shadow:8px 0 24px rgba(28,86,129,.06)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar::before{
    background-image:url('/assets/vtr24-bg-light.jpg')!important;
    background-size:cover!important;
    background-position:52% center!important;
    filter:saturate(1.48) contrast(1.08) brightness(1.04)!important;
    opacity:1!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar::after{
    /* Clear photo, but enough frost behind labels to keep the Executive look readable. */
    background:linear-gradient(180deg,
      rgba(248,253,255,.72) 0%,
      rgba(242,250,255,.47) 24%,
      rgba(239,249,255,.28) 55%,
      rgba(235,247,255,.20) 100%)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand{
    background:transparent!important;
    border-bottom:1px solid rgba(62,131,184,.20)!important;
    box-shadow:none!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand strong{
    color:#082e50!important;
    text-shadow:0 1px 0 rgba(255,255,255,.92)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand small{
    color:#33729e!important;
    font-weight:650!important;
    text-shadow:0 1px 0 rgba(255,255,255,.9)!important;
  }

  /* Normal menu rows are intentionally flat: no visible cards/rectangles. */
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link:not(.active){
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    color:#0d3d61!important;
    text-shadow:0 1px 0 rgba(255,255,255,.94)!important;
    font-weight:700!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link:not(.active):hover{
    background:rgba(255,255,255,.34)!important;
    border-color:transparent!important;
    box-shadow:none!important;
    color:#052e52!important;
  }

  /* Only the selected section keeps the blue Executive pill. */
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link.active{
    color:#fff!important;
    text-shadow:none!important;
    background:linear-gradient(135deg,#179ee8 0%,#2472df 100%)!important;
    border-color:#188bd3!important;
    box-shadow:0 8px 18px rgba(22,119,201,.20)!important;
  }

  /* Keep the existing colorful SVG icon set, without icon background tiles. */
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link::before{
    background-color:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* Counters stay compact and float at the right edge, not inside a menu card. */
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link[data-count]:not([data-count="0"])::after{
    margin-left:auto!important;
    box-shadow:0 2px 7px rgba(142,80,0,.16)!important;
  }

  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-complex{
    display:none!important;
  }
}


/* UK VTR24 v0.2.56 — light sidebar readability only.
   No dashboard/card/column geometry is changed. The existing VTR24 photo asset is reused unchanged. */
@media (min-width:1180px){
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar::before{
    /* Same real photo: show it a little smaller instead of zooming it with cover. */
    background-image:url('/assets/vtr24-bg-light.jpg')!important;
    background-size:auto 74%!important;
    background-repeat:no-repeat!important;
    background-position:52% 100%!important;
    background-color:#eaf6ff!important;
    filter:saturate(1.22) contrast(1.04) brightness(1.03)!important;
    opacity:1!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar::after{
    /* Cleaner sky/reading area on top; the real photo remains visible below. */
    background:linear-gradient(180deg,
      rgba(246,252,255,.92) 0%,
      rgba(241,250,255,.78) 20%,
      rgba(239,249,255,.58) 43%,
      rgba(239,249,255,.34) 66%,
      rgba(239,249,255,.18) 100%)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand{
    align-items:center!important;
    gap:12px!important;
    padding-left:8px!important;
    padding-right:4px!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand>div:last-child{
    min-width:0!important;
    width:calc(100% - 54px)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand strong{
    color:#072b4c!important;
    font-weight:850!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand small{
    color:#145d8e!important;
    font-weight:750!important;
    font-size:10px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    max-width:100%!important;
    display:block!important;
    text-shadow:0 1px 0 rgba(255,255,255,.96)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link:not(.active){
    color:#082f50!important;
    font-weight:800!important;
    text-shadow:0 1px 0 rgba(255,255,255,.98),0 0 7px rgba(255,255,255,.72)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link::before{
    filter:saturate(1.18) contrast(1.05)!important;
  }
}


/* UK VTR24 v0.2.57 — Executive light rail + staff cartoon avatars. */
.employee-avatar-field{display:flex!important;flex-direction:column!important;gap:7px!important}
.employee-avatar-field>span{font-size:10px!important;color:var(--app-muted);font-weight:700}
.employee-avatar-field>small{font-size:9px;color:var(--app-muted);line-height:1.35}
.employee-avatar-picker{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-top:2px}
.employee-avatar-picker label{position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;padding:5px!important;border:1px solid transparent;border-radius:12px;cursor:pointer;background:transparent}
.employee-avatar-picker input{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important;min-height:0!important}
.employee-avatar-picker img{width:52px;height:52px;border-radius:12px;display:block;box-shadow:0 4px 12px rgba(26,76,119,.10)}
.employee-avatar-picker b{font-size:8px;color:var(--app-muted)}
.employee-avatar-picker label:has(input:checked){border-color:var(--app-blue);background:color-mix(in srgb,var(--app-blue-soft) 55%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-blue) 12%,transparent)}
.staff-avatar-image{padding:0!important;overflow:hidden!important;background:transparent!important;border:0!important;box-shadow:none!important}
.staff-avatar-image img{width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;border-radius:inherit!important}
.owner-contact-avatar{width:42px;height:42px;border-radius:12px;overflow:hidden;display:block;margin-bottom:7px}
.owner-contact-avatar img{width:100%;height:100%;display:block;object-fit:cover}

@media(max-width:760px){.employee-avatar-picker{grid-template-columns:repeat(4,minmax(0,1fr))}.employee-avatar-picker img{width:48px;height:48px}}

/* Light theme: freeze the sidebar in the clean Executive style from the approved render.
   Dashboard columns and content order are untouched. */
@media (min-width:1180px){
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar{
    background:#eef8ff!important;
    border-right:1px solid #b9d9ef!important;
    box-shadow:7px 0 24px rgba(43,105,149,.07)!important;
    padding:15px 12px 18px!important;
    overflow:hidden!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar::before{
    background-image:url('/assets/vtr24-bg-light.jpg')!important;
    background-size:115% auto!important;
    background-repeat:no-repeat!important;
    background-position:center 100%!important;
    filter:saturate(1.12) contrast(1.02) brightness(1.05)!important;
    opacity:.92!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar::after{
    background:linear-gradient(180deg,#f5fbff 0%,rgba(245,251,255,.98) 30%,rgba(243,250,255,.90) 47%,rgba(241,249,255,.50) 70%,rgba(238,248,255,.24) 100%)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand{
    position:relative!important;z-index:2!important;
    background:rgba(255,255,255,.64)!important;
    border:1px solid rgba(109,174,219,.20)!important;
    border-radius:15px!important;
    padding:13px 11px!important;
    margin:0 0 13px!important;
    box-shadow:0 7px 20px rgba(53,113,155,.06)!important;
    backdrop-filter:blur(8px)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand strong{
    color:#082e52!important;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;font-weight:800!important;letter-spacing:.035em!important;font-size:17px!important;text-shadow:none!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand small{
    color:#41799f!important;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;font-weight:600!important;font-size:9px!important;line-height:1.25!important;white-space:normal!important;text-shadow:none!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav{position:relative!important;z-index:2!important;gap:4px!important;padding:0 2px!important}
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link{
    min-height:43px!important;padding:7px 9px!important;border-radius:11px!important;
    font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;font-size:12px!important;font-weight:700!important;letter-spacing:0!important;text-shadow:none!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link:not(.active){
    color:#113e61!important;background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link:not(.active):hover{
    background:rgba(255,255,255,.58)!important;color:#082f53!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link.active{
    color:#fff!important;background:linear-gradient(135deg,#179ee9,#2375de)!important;border-color:#188bd4!important;box-shadow:0 7px 16px rgba(27,123,204,.20)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link::before{
    width:22px!important;height:22px!important;flex-basis:22px!important;filter:saturate(1.12) contrast(1.06)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-complex{display:none!important}
}

/* UK VTR24 v0.2.58 — repaired light sidebar, staff photos and office contact. */
.employee-photo-field{display:flex!important;flex-direction:column!important;gap:7px!important}
.employee-photo-field>span{font-size:10px!important;color:var(--app-muted);font-weight:800}
.employee-photo-field>small{font-size:9px;color:var(--app-muted);line-height:1.35}
.employee-photo-control{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:3px}
.employee-photo-preview{width:68px;height:68px;border-radius:15px;overflow:hidden;display:grid;place-items:center;background:var(--app-blue-soft);border:1px solid color-mix(in srgb,var(--app-blue) 24%,var(--app-border));color:var(--app-muted);font-size:9px;font-weight:800}
.employee-photo-preview img{width:100%;height:100%;display:block;object-fit:cover}
.pretty-file-button{position:relative;display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:38px;padding:0 14px!important;border-radius:10px!important;background:linear-gradient(145deg,#0f91e8,#45b7ff)!important;color:#fff!important;font-weight:800!important;cursor:pointer!important;box-shadow:0 5px 14px rgba(20,137,220,.20)}
.pretty-file-button input{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none!important}
.office-contact-editor{margin:12px 0 14px;padding:12px;border:1px solid var(--app-border);border-radius:13px;background:color-mix(in srgb,var(--app-surface-strong) 95%,var(--app-blue-soft));display:grid;grid-template-columns:minmax(220px,.7fr) minmax(360px,1.5fr) auto;gap:12px;align-items:center}
.office-contact-editor>div{display:flex;flex-direction:column;gap:3px}.office-contact-editor>div strong{font-size:12px}.office-contact-editor>div small{font-size:9px;color:var(--app-muted)}
.office-contact-editor input{min-height:40px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface);color:var(--app-text);padding:0 12px;font:inherit}
.office-contact-card{position:relative;padding-left:54px!important}.office-contact-pin{position:absolute;left:14px;top:16px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--app-blue-soft);color:var(--app-blue);font-size:20px;font-weight:800}.contact-office-address{font-size:11px;line-height:1.45;color:var(--app-text)}
@media(max-width:900px){.office-contact-editor{grid-template-columns:1fr}.office-contact-editor input{width:100%}.employee-photo-control{align-items:flex-start}}

@media (min-width:1180px){
  /* Keep the exact VTR24 photo asset, but make it a soft architectural backdrop over the whole rail. */
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar{
    background:#eaf6fd!important;
    border-right:1px solid #b7d8ed!important;
    box-shadow:8px 0 24px rgba(29,83,126,.07)!important;
    padding:15px 12px 18px!important;
    overflow:hidden!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar::before{
    background-image:url('/assets/vtr24-bg-light.jpg')!important;
    background-size:auto 92%!important;
    background-repeat:no-repeat!important;
    background-position:49% 100%!important;
    filter:saturate(1.30) contrast(1.04) brightness(1.05)!important;
    opacity:.72!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar::after{
    background:linear-gradient(180deg,
      rgba(246,252,255,.88) 0%,
      rgba(241,250,255,.72) 18%,
      rgba(239,249,255,.58) 43%,
      rgba(237,248,255,.47) 72%,
      rgba(233,246,255,.38) 100%)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand{
    position:relative!important;z-index:2!important;
    background:rgba(255,255,255,.45)!important;
    border:1px solid rgba(89,157,205,.16)!important;
    border-radius:15px!important;
    padding:12px 10px!important;
    margin:0 0 13px!important;
    box-shadow:0 5px 16px rgba(46,105,148,.05)!important;
    backdrop-filter:blur(5px)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand .app-logo-mark{width:39px!important;height:47px!important;filter:drop-shadow(0 3px 8px rgba(14,146,224,.14))!important}
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand strong{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;color:#082f51!important;font-size:17px!important;font-weight:800!important;letter-spacing:.035em!important;text-shadow:none!important}
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-brand small{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;color:#2e6c98!important;font-size:9px!important;font-weight:650!important;line-height:1.25!important;white-space:normal!important;text-shadow:none!important}
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav{position:relative!important;z-index:2!important;gap:5px!important;padding:0 2px!important;margin-top:7px!important}
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link{min-height:45px!important;padding:0 10px!important;border-radius:11px!important;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;font-size:12px!important;font-weight:760!important;letter-spacing:0!important}
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link:not(.active){background:transparent!important;border-color:transparent!important;box-shadow:none!important;color:#0b385a!important;text-shadow:0 1px 0 rgba(255,255,255,.96),0 0 8px rgba(255,255,255,.72)!important}
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link:not(.active):hover{background:rgba(255,255,255,.34)!important;color:#052f52!important}
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link.active{background:linear-gradient(135deg,#159ce7,#2674df)!important;color:#fff!important;border-color:#1689d2!important;box-shadow:0 8px 18px rgba(21,119,200,.20)!important;text-shadow:none!important}
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link::before{width:24px!important;height:24px!important;flex-basis:24px!important;filter:saturate(1.15) contrast(1.05)!important}
  html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-sidebar-complex{display:none!important}
}

/* UK VTR24 v0.2.59 — structured office address + messenger QR management */
.office-contact-editor{grid-template-columns:minmax(240px,.85fr) minmax(360px,1.5fr) auto!important}
.office-address-summary{font-size:13px;line-height:1.45;color:var(--app-text);font-weight:750;min-width:0}
.office-address-modal{max-width:650px}
.office-address-grid{grid-template-columns:1fr 1fr}
.office-address-preview{margin-top:12px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--app-blue) 30%,var(--app-border));border-radius:12px;background:color-mix(in srgb,var(--app-blue-soft) 45%,var(--app-surface));display:flex;flex-direction:column;gap:4px}
.office-address-preview span{font-size:9px;color:var(--app-muted)}
.office-address-preview strong{font-size:12px;line-height:1.4;color:var(--app-text)}
.messenger-qr-settings{margin-top:14px}
.messenger-qr-admin-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.messenger-qr-admin-card{border:1px solid var(--app-border);border-radius:14px;padding:13px;background:var(--app-surface-strong);display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:"qr copy" "qr upload" "qr delete";column-gap:12px;row-gap:8px;align-items:center;min-width:0}
.messenger-qr-admin-preview{grid-area:qr;width:96px;height:96px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--app-blue) 35%,var(--app-border));background:color-mix(in srgb,var(--app-blue-soft) 35%,var(--app-surface));display:grid;place-items:center;overflow:hidden;color:var(--app-muted);font-size:9px;text-align:center;padding:8px}
.messenger-qr-admin-preview img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:8px}
.messenger-qr-admin-card>div:nth-child(2){grid-area:copy;display:flex;flex-direction:column;gap:3px;min-width:0}
.messenger-qr-admin-card>div:nth-child(2)>strong{font-size:14px;color:var(--app-text)}
.messenger-qr-admin-card>div:nth-child(2)>small{font-size:9px;color:var(--app-muted);line-height:1.35}
.file-picker-button{grid-area:upload;justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 13px;border-radius:10px;border:1px solid color-mix(in srgb,var(--app-blue) 45%,var(--app-border));background:var(--app-blue-soft);color:var(--app-blue);font-size:9px;font-weight:800;cursor:pointer;white-space:nowrap}
.file-picker-button:hover{border-color:var(--app-blue);transform:translateY(-1px)}
.file-picker-button input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.messenger-qr-admin-card>[data-messenger-delete]{grid-area:delete;justify-self:start}
.messenger-qr-grid{align-items:stretch}
.owner-messenger-qr{border:1px solid var(--app-border);border-radius:11px;padding:9px 6px;color:var(--app-text);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;font-size:9px;min-width:0;background:var(--app-surface)}
.owner-messenger-qr img{width:min(100%,120px);aspect-ratio:1;object-fit:contain;border-radius:7px;background:#fff}
.owner-messenger-qr strong{font-size:9px}
.owner-messenger-qr small{font-size:7.5px;line-height:1.25;text-align:center;color:var(--app-muted)}
.owner-messenger-qr.qr-not-uploaded{min-height:126px;justify-content:center;border-style:dashed}
.qr-placeholder-mark{width:54px;height:54px;border-radius:12px;display:grid;place-items:center;background:var(--app-blue-soft);color:var(--app-blue);font-size:15px;font-weight:900;letter-spacing:.08em}
.messenger-qr-empty{grid-column:1/-1;padding:16px;border:1px dashed var(--app-border);border-radius:10px;color:var(--app-muted);text-align:center}
@media(max-width:1050px){.messenger-qr-admin-grid{grid-template-columns:1fr}.messenger-qr-admin-card{grid-template-columns:84px minmax(0,1fr)}.messenger-qr-admin-preview{width:84px;height:84px}}
@media(max-width:700px){.office-address-grid{grid-template-columns:1fr}.office-contact-editor{grid-template-columns:1fr!important}.office-address-summary{font-size:12px}.messenger-qr-admin-card{grid-template-columns:76px minmax(0,1fr);padding:10px}.messenger-qr-admin-preview{width:76px;height:76px}.messenger-qr-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.owner-messenger-qr img{width:min(100%,92px)}}


/* UK VTR24 v0.2.60 — QR subviews, compact mobile chat, work list and live news */
.qr-settings-switch,.work-view-switch{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--app-border);border-radius:13px;background:var(--app-surface);margin:0 0 12px}
.qr-settings-switch-button,.work-view-switch-button{border:0;background:transparent;color:var(--app-muted);font-weight:800;font-size:11px;padding:9px 14px;border-radius:9px;cursor:pointer}
.qr-settings-switch-button.active,.work-view-switch-button.active{background:var(--app-blue-soft);color:var(--app-blue)}
.work-list-filters{grid-template-columns:minmax(260px,1fr) auto auto!important;margin-bottom:12px}
.work-list-results{display:grid;gap:8px}
.work-list-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface-strong)}
.work-list-row>img{width:42px;height:42px;object-fit:contain;border:0;background:transparent}
.work-list-row>div{min-width:0}.work-list-row strong{font-size:11px}.work-list-row small{display:block;color:var(--app-muted);font-size:9px;margin-top:3px}.work-list-row p{margin:4px 0 0;color:var(--app-muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-list-edit{min-height:34px!important;padding:0 12px!important}
html[data-theme="light"] body.app-mode .edit-work-card{background:#eef8ff!important;color:#1689d8!important;border:1px solid #c4e4f8!important;box-shadow:0 3px 10px rgba(33,137,216,.08)!important}
html[data-theme="light"] body.app-mode .edit-work-card:hover{background:#dff2ff!important;color:#0875c1!important}
.lively-news-item{position:relative;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.lively-news-item:hover{transform:translateX(2px);background:color-mix(in srgb,var(--app-blue-soft) 35%,transparent)!important}
.news-live-dot{position:absolute;right:8px;top:8px;width:6px;height:6px;border-radius:50%;background:#24b8ff;box-shadow:0 0 0 4px rgba(36,184,255,.10)}
html.mobile-device body.chat-open .emoji-picker-wrap{display:none!important}
html.mobile-device body.chat-open .chat-page{width:100%!important;margin:0!important;padding:0!important;min-height:0!important}
html.mobile-device body.chat-open .community-chat-card{height:calc(100dvh - 148px)!important;min-height:420px!important;border-radius:10px!important;margin:0!important;grid-template-rows:auto minmax(0,1fr) auto!important}
html.mobile-device body.chat-open .chat-compact-head{min-height:34px!important;padding:4px 7px!important}
html.mobile-device body.chat-open .chat-message-list{padding:6px 7px!important;gap:6px!important;min-height:0!important}
html.mobile-device body.chat-open .chat-compose{padding:6px!important;padding-bottom:max(6px,env(safe-area-inset-bottom))!important}
html.mobile-device body.chat-open .chat-compose-row{grid-template-columns:38px minmax(0,1fr) 40px!important;gap:6px!important}
html.mobile-device body.chat-open .chat-attach-button{width:38px!important;height:38px!important;border-radius:9px!important;font-size:16px!important}
html.mobile-device body.chat-open .chat-compose-row>input{height:38px!important;min-height:38px!important;font-size:14px!important;padding:0 10px!important}
html.mobile-device body.chat-open .chat-compose-row>button[type="submit"]{grid-column:auto!important;width:40px!important;min-width:40px!important;height:38px!important;min-height:38px!important;padding:0!important;border-radius:9px!important;font-size:0!important;position:relative!important}
html.mobile-device body.chat-open .chat-compose-row>button[type="submit"]::after{content:"→";font-size:21px;font-weight:800;color:#fff;line-height:1}
html.mobile-device body.chat-open .chat-compose-context{padding:5px 7px!important;margin-bottom:5px!important}
html.mobile-device body.chat-open .chat-image-preview{padding:6px!important;margin-bottom:5px!important}
@media(max-width:700px){.work-list-filters{grid-template-columns:1fr!important}.work-list-row{grid-template-columns:42px minmax(0,1fr);gap:8px}.work-list-row>.status,.work-list-row>.work-list-edit{grid-column:2;justify-self:start}.work-view-switch{width:100%;display:grid;grid-template-columns:1fr 1fr}.work-view-switch-button{width:100%}}


/* UK VTR24 v0.2.61 — taller mobile chat + cleaner desktop sidebar typography */
/* Mobile chat: remove the redundant title/status strip and dedicate the viewport to messages. */
html.mobile-device body.chat-open .chat-compact-head{
  display:none!important;
}
html.mobile-device body.chat-open .community-chat-card{
  height:calc(100dvh - 92px)!important;
  min-height:calc(100dvh - 92px)!important;
  max-height:none!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  margin:0!important;
  border-radius:10px!important;
}
html.mobile-device body.chat-open .chat-page{
  margin-top:0!important;
  padding-top:0!important;
  padding-bottom:0!important;
}
html.mobile-device body.chat-open .chat-message-list{
  padding-top:8px!important;
  padding-bottom:8px!important;
}
html.mobile-device body.chat-open .chat-compose{
  margin:0!important;
  border-top:1px solid var(--app-border)!important;
  box-shadow:0 -5px 16px rgba(0,0,0,.07)!important;
}

/* Sidebar: slightly lighter type, but keep strong readability over the photo. */
html:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link{
  font-weight:650!important;
}
html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link:not(.active){
  color:#103b5d!important;
  text-shadow:0 1px 0 rgba(255,255,255,.95),0 0 7px rgba(255,255,255,.62)!important;
}
html[data-theme="light"]:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link.active{
  font-weight:700!important;
}

/* Count pills beside Announcements / Votes: larger high-contrast digits. */
html:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link[data-count]:not([data-count="0"])::after{
  min-width:27px!important;
  height:22px!important;
  padding:0 7px!important;
  margin-left:auto!important;
  border-radius:999px!important;
  background:#b85d00!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.88)!important;
  box-shadow:0 2px 7px rgba(76,41,0,.16)!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:22px!important;
  text-align:center!important;
  font-variant-numeric:tabular-nums!important;
}
html[data-theme="dark"] body.app-mode .desktop-side-nav .nav-link[data-count]:not([data-count="0"])::after{
  background:#e8872d!important;
  color:#0c2137!important;
  border-color:rgba(255,255,255,.16)!important;
}


/* UK VTR24 v0.2.65 — staff schedule audit, photo centering and compact desktop marketplace */
.employee-photo-position{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px 14px;padding:11px 12px;border:1px solid var(--app-border);border-radius:13px;background:color-mix(in srgb,var(--app-blue-soft) 45%,var(--app-surface));margin-top:2px}
.employee-photo-position>div{grid-column:1/-1;display:flex;flex-direction:column;gap:2px}
.employee-photo-position>div strong{font-size:10px;color:var(--app-text)}
.employee-photo-position>div small{font-size:8.5px;line-height:1.35;color:var(--app-muted)}
.employee-photo-position label{display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center;font-size:9px;color:var(--app-muted)}
.employee-photo-position label span{grid-column:1/-1}
.employee-photo-position input[type="range"]{width:100%;accent-color:var(--app-blue)}
.employee-photo-position output{min-width:34px;text-align:right;font-size:9px;font-weight:800;color:var(--app-blue)}
.employee-photo-position .text-button{justify-self:start}
.employee-photo-preview{width:86px!important;height:86px!important;border-radius:18px!important}
.employee-photo-preview img{object-fit:cover!important}
@media(min-width:1100px) and (max-width:1499px){
  .marketplace-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:11px!important}
}
@media(min-width:1500px){
  .marketplace-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:11px!important}
}
@media(min-width:1100px){
  .market-card{border-radius:13px!important}
  .market-card .market-card-photo,.market-card .market-card-visual{aspect-ratio:4/3!important;min-height:0!important}
  .market-card .market-card-body{min-height:112px!important;padding:10px 11px!important}
  .market-card .market-card-body small{font-size:8px!important}
  .market-card .market-card-body strong{font-size:12px!important;margin-top:5px!important;line-height:1.25!important}
  .market-card .market-card-body>b{font-size:14px!important;margin-top:5px!important}
  .market-card .market-card-body em{font-size:8.5px!important;padding-top:7px!important}
  .market-favorite{width:31px!important;height:31px!important;font-size:17px!important}
}
@media(max-width:720px){.employee-photo-position{grid-template-columns:1fr}.employee-photo-position label{grid-template-columns:1fr auto}}


/* UK VTR24 v0.2.65 — mobile bottom navigation for УК/ТСН/собственник. */
@media(max-width:760px){
  html.mobile-device body.app-mode{padding-bottom:92px!important}
  html.mobile-device .app-header{
    grid-template-columns:minmax(82px,1fr) auto!important;
  }
  html.mobile-device .app-nav{display:none!important}
  html.mobile-device .app-header-actions{gap:4px!important}
  html.mobile-device #headerAnnouncementsButton,
  html.mobile-device #headerChatButton,
  html.mobile-device #settingsGearButton,
  html.mobile-device #logoutButton{display:none!important}
  html.mobile-device .header-role-switch:not(.hidden){order:1!important;margin-right:2px!important}
  html.mobile-device #appThemeToggle:not(.hidden){display:grid!important;order:2!important}
  html.mobile-device #notificationsButton:not(.hidden){display:grid!important;order:3!important}

  html.mobile-device .mobile-bottom-nav{
    position:fixed!important;left:0;right:0;bottom:0;z-index:90;
    display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;
    padding:6px 8px calc(8px + env(safe-area-inset-bottom));
    background:rgba(4,20,40,.97);border-top:1px solid rgba(43,126,202,.30);
    box-shadow:0 -10px 24px rgba(0,0,0,.22);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  }
  html[data-theme="light"].mobile-device .mobile-bottom-nav{background:rgba(248,252,255,.98);box-shadow:0 -10px 24px rgba(16,77,131,.10)}
  html.mobile-device .mobile-bottom-link{
    border:1px solid transparent;background:transparent;color:var(--app-muted);
    min-height:58px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 2px;line-height:1;text-align:center;
  }
  html.mobile-device .mobile-bottom-link > span{font-size:18px;line-height:1}
  html.mobile-device .mobile-bottom-link > small{font-size:9px;line-height:1.15;white-space:normal}
  html.mobile-device .mobile-bottom-link.active{
    color:var(--app-blue-strong);background:rgba(40,142,228,.12);border-color:rgba(72,160,232,.20);
  }

  html.mobile-device .mobile-settings-logout-wrap{display:block!important;margin:0 0 14px}
  html.mobile-device .settings-logout-button{width:100%!important;min-height:46px!important}
  html.mobile-device .mobile-owner-logout-wrap{margin:0 0 14px}
}
@media(min-width:761px){
  .mobile-settings-logout-wrap{display:none!important}
}


/* UK VTR24 v0.2.65 — mobile-only clean header: brand and theme live inside weather card. */
.mobile-weather-toolbar,.owner-linked-objects-card{display:none}
@media(max-width:760px){
  html.mobile-device body.app-mode{padding-top:0!important;padding-bottom:92px!important}
  html.mobile-device .app-header{display:none!important}
  html.mobile-device .role-dashboard{margin-top:max(8px,env(safe-area-inset-top))!important}

  html.mobile-device .mobile-weather-toolbar{
    display:flex!important;position:relative;z-index:3;grid-column:1/-1;
    align-items:center;justify-content:space-between;gap:12px;width:100%;margin-bottom:14px;
  }
  html.mobile-device .mobile-weather-brand{display:flex;align-items:center;gap:9px;min-width:0;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.34)}
  html.mobile-device .mobile-weather-brand .app-logo-mark{width:31px;height:38px;flex:0 0 31px;color:#25c1ff;filter:drop-shadow(0 0 9px rgba(28,183,255,.35))}
  html.mobile-device .mobile-weather-brand>div:last-child{display:flex;flex-direction:column;min-width:0}
  html.mobile-device .mobile-weather-brand strong{font-size:14px;letter-spacing:.10em;line-height:1.1;white-space:nowrap}
  html.mobile-device .mobile-weather-brand small{font-size:8px;color:rgba(232,245,255,.84);margin-top:3px;white-space:nowrap}

  html.mobile-device .mobile-weather-theme-toggle{
    display:flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;
    min-width:74px;height:34px;padding:4px 7px;border-radius:18px;
    border:1px solid rgba(170,221,255,.48);background:rgba(4,23,43,.48);color:#fff;
    box-shadow:0 4px 16px rgba(0,0,0,.15);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  }
  html.mobile-device .mobile-weather-theme-toggle>span{font-size:13px;line-height:1;opacity:.72}
  html.mobile-device .mobile-weather-theme-toggle>i{position:relative;width:28px;height:16px;border-radius:9px;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)}
  html.mobile-device .mobile-weather-theme-toggle>i>b{position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.28);transition:transform .18s ease}
  html.mobile-device .mobile-weather-theme-toggle[data-mode="dark"]>i>b{transform:translateX(12px)}
  html.mobile-device .mobile-weather-theme-toggle[data-mode="dark"] .theme-moon,
  html.mobile-device .mobile-weather-theme-toggle[data-mode="light"] .theme-sun{opacity:1}

  html.mobile-device .dashboard-weather-card,
  html.mobile-device .owner-weather-hero{padding-top:15px!important}
  html.mobile-device body[data-preview-role="uk"] .dashboard-weather-card{min-height:188px!important;grid-template-rows:auto 1fr!important}
  html.mobile-device .owner-weather-hero{min-height:208px!important;grid-template-rows:auto 1fr!important}
  html.mobile-device .owner-weather-copy{align-self:end!important}
  html.mobile-device .owner-weather-copy #ownerWeatherLogin{margin-top:5px!important}

  /* Linked property data moved from weather to owner settings on mobile. */
  html.mobile-device .owner-linked-objects-card{display:block!important;margin-bottom:12px!important}
  html.mobile-device .owner-linked-objects-list{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
  html.mobile-device .owner-linked-objects-list>span{display:inline-flex;align-items:center;min-height:36px;padding:7px 11px;border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface);font-size:12px;color:var(--app-text)}
}
@media(min-width:761px){
  .mobile-weather-toolbar,.owner-linked-objects-card{display:none!important}
}


/* UK VTR24 v0.2.65 — mobile weather cleanup + settings information shortcut + Android status-bar theme. */
.mobile-settings-tools-card{display:none}
@media(max-width:760px){
  html.mobile-device .mobile-weather-login,
  html.mobile-device #ownerWeatherLogin{font-weight:700!important;letter-spacing:.02em!important}
  html.mobile-device .mobile-settings-tools-card{display:block!important;margin:0 0 12px!important;padding:0!important;overflow:hidden}
  html.mobile-device .mobile-settings-info-button{
    width:100%;min-height:68px;border:0;background:transparent;color:var(--app-text);padding:12px 14px;
    display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:11px;text-align:left;
  }
  html.mobile-device .mobile-settings-info-button>span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--app-blue-soft);color:var(--app-blue);font-size:22px}
  html.mobile-device .mobile-settings-info-button>div{display:flex;flex-direction:column;gap:3px;min-width:0}
  html.mobile-device .mobile-settings-info-button strong{font-size:14px}
  html.mobile-device .mobile-settings-info-button small{font-size:10px;color:var(--app-muted);line-height:1.35}
  html.mobile-device .mobile-settings-info-button>b{font-size:26px;color:var(--app-muted);font-weight:400}
}


/* UK VTR24 v0.2.71 — mobile chat viewport, cleaner owner home and polished bottom icons. */
@media(max-width:760px){
  /* Chat occupies the entire useful viewport between the phone top edge and the fixed bottom navigation. */
  html.mobile-device body.chat-open{overflow:hidden!important}
  html.mobile-device body.chat-open .chat-page{
    position:fixed!important;
    z-index:72!important;
    top:max(0px,env(safe-area-inset-top))!important;
    right:0!important;
    bottom:calc(72px + env(safe-area-inset-bottom))!important;
    left:0!important;
    width:100vw!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  html.mobile-device body.chat-open .community-chat-card{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
    grid-template-rows:minmax(0,1fr) auto!important;
  }
  html.mobile-device body.chat-open .chat-message-list{
    min-height:0!important;
    max-height:none!important;
    height:auto!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  html.mobile-device body.chat-open .chat-compose{
    position:relative!important;
    flex:0 0 auto!important;
    padding:6px 8px!important;
    padding-bottom:max(7px,env(safe-area-inset-bottom))!important;
  }

  /* Documents / announcements / contacts / polls already live in the bottom navigation. Keep the owner home focused on actions. */
  html.mobile-device #ownerDashboard .owner-quick-grid .owner-action:nth-child(n+3){display:none!important}
  html.mobile-device #ownerDashboard .owner-quick-grid{grid-template-columns:1fr 1fr!important}

  /* Home and Documents use the same polished vector family as the desktop/mobile sidebar. */
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon{
    width:27px!important;height:27px!important;display:grid!important;place-items:center!important;
    font-size:0!important;line-height:1!important;
  }
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon img{
    display:block!important;width:27px!important;height:27px!important;object-fit:contain!important;
    filter:drop-shadow(0 2px 5px rgba(19,135,226,.16));
  }
  html.mobile-device .mobile-bottom-link[data-key="home"].active .mobile-bottom-icon img,
  html.mobile-device .mobile-bottom-link[data-key="documents"].active .mobile-bottom-icon img{
    filter:drop-shadow(0 3px 7px rgba(30,157,244,.30));
  }
}


/* UK VTR24 v0.2.71 — restore transparent/glass login fields on focus and Android autofill. */
#loginForm .input-wrap{
  background:rgba(255,255,255,.012)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.03);
  backdrop-filter:blur(8px) saturate(1.03);
}
#loginForm .input-wrap:focus-within{
  background:rgba(255,255,255,.030)!important;
  border-color:rgba(84,151,255,.86)!important;
  box-shadow:0 0 0 3px rgba(63,120,240,.11), inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html[data-theme="dark"] #loginForm .input-wrap{
  background:rgba(6,10,22,.075)!important;
}
html[data-theme="dark"] #loginForm .input-wrap:focus-within{
  background:rgba(8,13,28,.105)!important;
}
#loginForm .input-wrap input,
#loginForm .input-wrap input:focus,
#loginForm .input-wrap input:active{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  -webkit-appearance:none;
  appearance:none;
}
/* Chrome/Android can paint autofilled inputs with an opaque background. Keep the glass surface visible. */
#loginForm input:-webkit-autofill,
#loginForm input:-webkit-autofill:hover,
#loginForm input:-webkit-autofill:focus,
#loginForm input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text)!important;
  caret-color:var(--text)!important;
  -webkit-box-shadow:0 0 0 1000px rgba(0,0,0,0) inset!important;
  box-shadow:0 0 0 1000px rgba(0,0,0,0) inset!important;
  transition:background-color 999999s ease-out 0s!important;
  background:transparent!important;
  background-color:transparent!important;
}


/* UK VTR24 v0.2.71 — restore the actual login background image above the body canvas. */
body:not(.app-mode){
  position:relative;
  isolation:isolate;
  background:#10131c;
}
body:not(.app-mode) .background,
body:not(.app-mode) .background-overlay{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  pointer-events:none!important;
}
body:not(.app-mode) .background{
  z-index:0!important;
  opacity:1!important;
  display:block!important;
  background-image:url('/assets/vtr24-bg-light.jpg')!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
}
html[data-theme="dark"] body:not(.app-mode) .background{
  background-image:url('/assets/vtr24-bg-dark.png')!important;
  filter:brightness(.86) saturate(1.04) contrast(1.04)!important;
}
body:not(.app-mode) .background-overlay{
  z-index:1!important;
  display:block!important;
  background:var(--overlay)!important;
}
body:not(.app-mode) .page-shell{
  position:relative!important;
  z-index:2!important;
}
body:not(.app-mode) #loginForm{
  background:color-mix(in srgb,var(--card) 92%,transparent)!important;
  -webkit-backdrop-filter:blur(11px) saturate(1.05)!important;
  backdrop-filter:blur(11px) saturate(1.05)!important;
}
body:not(.app-mode) #loginForm .input-wrap,
body:not(.app-mode) #loginForm .input-wrap:focus-within{
  -webkit-backdrop-filter:blur(4px) saturate(1.04)!important;
  backdrop-filter:blur(4px) saturate(1.04)!important;
}
body:not(.app-mode) #loginForm .input-wrap{
  background:rgba(255,255,255,.018)!important;
}
html[data-theme="dark"] body:not(.app-mode) #loginForm .input-wrap{
  background:rgba(5,10,20,.05)!important;
}
body:not(.app-mode) #loginForm .input-wrap:focus-within{
  background:rgba(255,255,255,.035)!important;
}
html[data-theme="dark"] body:not(.app-mode) #loginForm .input-wrap:focus-within{
  background:rgba(5,10,20,.075)!important;
}


/* UK VTR24 v0.2.71 — seamless mobile chat + user uploaded announcement photos. */
.announcement-photo-field{display:flex;flex-direction:column;gap:8px}
.announcement-photo-help{margin:0;color:var(--app-muted);font-size:10px;line-height:1.45}
.announcement-photo-upload{min-height:82px;border:1px dashed color-mix(in srgb,var(--app-blue) 45%,var(--app-border));border-radius:14px;background:color-mix(in srgb,var(--app-blue-soft) 32%,var(--app-surface-strong));display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 14px;cursor:pointer}
.announcement-photo-upload>span{grid-row:1/3;width:44px;height:44px;border-radius:13px;background:var(--app-blue);color:#fff;display:grid;place-items:center;font-size:27px;line-height:1}
.announcement-photo-upload strong{font-size:13px;color:var(--app-text)}
.announcement-photo-upload small{font-size:9px;color:var(--app-muted)}
.announcement-photo-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.announcement-photo-preview.hidden{display:none}
.announcement-photo-preview figure{margin:0;position:relative;min-width:0}
.announcement-photo-preview img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:11px;border:1px solid var(--app-border)}
.announcement-photo-preview figcaption{position:absolute;left:6px;bottom:6px;padding:3px 6px;border-radius:999px;background:rgba(0,18,38,.72);color:#fff;font-size:8px;backdrop-filter:blur(6px)}
.announcement-detail-media.multi-photo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.announcement-detail-media.multi-photo img{width:100%;height:220px;object-fit:cover}
@media(max-width:760px){
  .announcement-photo-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .announcement-photo-upload{min-height:72px}
  .announcement-detail-media.multi-photo img{height:160px}

  /* One continuous chat surface: no horizontal rails, double borders or visible inner scrollbar. */
  html.mobile-device body.chat-open .chat-page,
  html.mobile-device body.chat-open .community-chat-card,
  html.mobile-device body.chat-open .chat-message-list,
  html.mobile-device body.chat-open .chat-compose{
    border:0!important;box-shadow:none!important;outline:0!important;
  }
  html.mobile-device body.chat-open .chat-page{
    background:var(--app-surface)!important;
  }
  html.mobile-device body.chat-open .community-chat-card{
    background:var(--app-surface)!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  html.mobile-device body.chat-open .community-chat-card::before,
  html.mobile-device body.chat-open .community-chat-card::after,
  html.mobile-device body.chat-open .chat-message-list::before,
  html.mobile-device body.chat-open .chat-message-list::after,
  html.mobile-device body.chat-open .chat-compose::before,
  html.mobile-device body.chat-open .chat-compose::after{display:none!important;content:none!important}
  html.mobile-device body.chat-open .chat-message-list{
    background:var(--app-surface)!important;
    scrollbar-width:none!important;
    border-top:0!important;border-bottom:0!important;
    padding-top:6px!important;padding-bottom:4px!important;
  }
  html.mobile-device body.chat-open .chat-message-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  html.mobile-device body.chat-open .chat-compose{
    background:var(--app-surface)!important;
    border-top:0!important;
    margin:0!important;
    padding-top:5px!important;
    padding-bottom:6px!important;
  }
  html.mobile-device body.chat-open .chat-compose-row{margin:0!important}
  html.mobile-device body.chat-open .mobile-bottom-nav{border-top:0!important;box-shadow:0 -6px 18px rgba(0,0,0,.08)!important}
}

.market-card-photo>img{display:block;width:100%;height:100%;min-height:inherit;aspect-ratio:inherit;object-fit:cover}
.announcement-detail-media img[data-announcement-photo]{display:block;max-width:100%;object-fit:cover}


/* UK VTR24 v0.2.71 — keyboard-aware mobile chat. */
@media(max-width:760px){
  html.mobile-device body.chat-open .chat-page{
    top:var(--chat-visual-top, max(0px,env(safe-area-inset-top)))!important;
    bottom:auto!important;
    height:var(--chat-visual-height, calc(100dvh - 72px - env(safe-area-inset-bottom)))!important;
    min-height:0!important;
  }
  html.mobile-device body.chat-open.chat-input-focused .mobile-bottom-nav,
  html.mobile-device body.chat-open.chat-keyboard-open .mobile-bottom-nav{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
  html.mobile-device body.chat-open.chat-input-focused,
  html.mobile-device body.chat-open.chat-keyboard-open{padding-bottom:0!important}
  html.mobile-device body.chat-open #communityChatInput{
    font-size:16px!important;
    line-height:1.2!important;
    touch-action:manipulation!important;
  }
  html.mobile-device body.chat-open.chat-input-focused .chat-compose,
  html.mobile-device body.chat-open.chat-keyboard-open .chat-compose{
    margin-bottom:0!important;
    padding-bottom:max(6px,env(safe-area-inset-bottom))!important;
  }
  html.mobile-device body.chat-open.chat-input-focused .community-chat-card,
  html.mobile-device body.chat-open.chat-keyboard-open .community-chat-card{
    height:100%!important;
  }
}


/* UK VTR24 v0.2.71 — mobile subpages use bottom navigation; no duplicate Back button. */
@media (max-width:760px){
  html.mobile-device .back-button{display:none!important}
  html.mobile-device .page-heading{grid-template-columns:1fr!important;padding-top:8px!important}
  html.mobile-device .page-heading > div{min-width:0!important}
  html.mobile-device #announcementSubmitButton{position:relative;z-index:3;touch-action:manipulation}
}
#announcementSubmitButton:disabled{opacity:.72;cursor:wait}
#announcementSubmitButton.is-loading{box-shadow:none}
#announcementFormError:not(:empty){display:block;margin-top:10px;color:#d94b4b;font-weight:700;line-height:1.35}

/* v0.2.70a — server announcements, moderation and mobile unread counters */
.announcement-view-tabs{display:flex;gap:8px;align-items:center;padding:8px;margin-bottom:10px;overflow:auto}
.announcement-view-tabs button{border:0;background:transparent;color:var(--app-muted);min-height:34px;padding:0 14px;border-radius:10px;font-weight:700;cursor:pointer;white-space:nowrap}
.announcement-view-tabs button.active{background:var(--app-blue);color:#fff}
.announcement-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(--app-orange);color:#fff;font-size:9px}
.market-card-actions{display:flex;gap:6px;flex-wrap:wrap;padding:0 10px 10px}
.market-card-actions button{border:1px solid var(--app-border);background:var(--app-surface-strong);color:var(--app-text);border-radius:9px;min-height:30px;padding:0 9px;font-size:9px;font-weight:700;cursor:pointer}
.market-card-actions button.primary{background:var(--app-blue);border-color:var(--app-blue);color:#fff}
.market-card-actions button.danger{color:#ef5f73}
.market-card-status{display:inline-flex;align-items:center;gap:5px;width:max-content;margin-top:3px;padding:3px 7px;border-radius:999px;background:var(--app-blue-soft);color:var(--app-blue);font-size:8px;font-style:normal;font-weight:800}
.market-card-status.pending{background:var(--app-orange-soft);color:var(--app-orange)}
.market-card-status.rejected{background:rgba(239,95,115,.12);color:#ef5f73}
.market-card-status.expired{background:color-mix(in srgb,var(--app-muted) 12%,transparent);color:var(--app-muted)}
.market-card-owner{font-size:8px;color:var(--app-muted)!important}
.market-card-expiry{font-size:8px;color:var(--app-muted)!important}
html.mobile-device .mobile-bottom-link{position:relative}
html.mobile-device .mobile-bottom-link[data-count]:not([data-count="0"])::after{content:attr(data-count);position:absolute;top:2px;right:8px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:#ef5f73;color:#fff;font-size:8px;font-weight:900;border:2px solid var(--app-surface)}
@media(max-width:720px){.announcement-view-tabs{margin-left:0;margin-right:0}.market-card-actions button{flex:1;min-width:88px}.market-card-status{font-size:7px}}


/* v0.2.70b — five-button mobile navigation, voting on home, moderation actions in detail. */
.quick-grid .mobile-home-poll-action{display:none!important}
.announcement-detail-status-row{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-top:9px}
.announcement-detail-status-row small{font-size:9px!important;color:var(--app-muted)!important}
.announcement-detail-actions{width:100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:15px;padding-top:13px;border-top:1px solid var(--app-border)}
.announcement-detail-actions button{min-height:38px;padding:0 14px;border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface-strong);color:var(--app-text);font-size:11px;font-weight:800;cursor:pointer}
.announcement-detail-actions button.primary{background:var(--app-blue);border-color:var(--app-blue);color:#fff}
.announcement-detail-actions button.danger,.announcement-detail-actions button.moderation-reject{color:#ef5f73}
@media(max-width:760px){
  html.mobile-device .mobile-bottom-nav{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:2px!important;padding-left:5px!important;padding-right:5px!important}
  html.mobile-device .mobile-bottom-link{min-width:0!important;padding-left:1px!important;padding-right:1px!important}
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon{width:28px!important;height:28px!important}

  html.mobile-device .mobile-bottom-link .mobile-bottom-icon{background:currentColor!important;-webkit-mask-position:center!important;-webkit-mask-repeat:no-repeat!important;-webkit-mask-size:contain!important;mask-position:center!important;mask-repeat:no-repeat!important;mask-size:contain!important}
  html.mobile-device .mobile-bottom-link .mobile-nav-home{-webkit-mask-image:url('/assets/mobile-nav/home.svg')!important;mask-image:url('/assets/mobile-nav/home.svg')!important}
  html.mobile-device .mobile-bottom-link .mobile-nav-documents{-webkit-mask-image:url('/assets/mobile-nav/documents.svg')!important;mask-image:url('/assets/mobile-nav/documents.svg')!important}
  html.mobile-device .mobile-bottom-link .mobile-nav-announcements{-webkit-mask-image:url('/assets/mobile-nav/announcements.svg')!important;mask-image:url('/assets/mobile-nav/announcements.svg')!important}
  html.mobile-device .mobile-bottom-link .mobile-nav-chat{-webkit-mask-image:url('/assets/mobile-nav/chat.svg')!important;mask-image:url('/assets/mobile-nav/chat.svg')!important}
  html.mobile-device .mobile-bottom-link .mobile-nav-settings{-webkit-mask-image:url('/assets/mobile-nav/settings.svg')!important;mask-image:url('/assets/mobile-nav/settings.svg')!important}
  html.mobile-device .mobile-bottom-link > small{font-size:10px!important;white-space:nowrap!important}
  html.mobile-device .mobile-bottom-link[data-count]:not([data-count="0"])::after{right:10px!important;top:1px!important}

  /* Голосования убраны из нижней панели и доступны с главной страницы. */
  html.mobile-device #ukDashboard .mobile-home-poll-action{display:flex!important}
  html.mobile-device #ownerDashboard .owner-quick-grid .owner-action{display:none!important}
  html.mobile-device #ownerDashboard .owner-quick-grid .owner-action:nth-child(1),
  html.mobile-device #ownerDashboard .owner-quick-grid .owner-action:nth-child(2),
  html.mobile-device #ownerDashboard .owner-quick-grid .vote-action{display:grid!important}
  html.mobile-device #ownerDashboard .owner-quick-grid .vote-action{grid-column:1/-1!important;min-height:72px!important;grid-template-columns:44px 1fr!important;grid-template-areas:"icon title" "icon small"!important;align-items:center!important;text-align:left!important}
  html.mobile-device #ownerDashboard .owner-quick-grid .vote-action>span{grid-area:icon!important}
  html.mobile-device #ownerDashboard .owner-quick-grid .vote-action>strong{grid-area:title!important}
  html.mobile-device #ownerDashboard .owner-quick-grid .vote-action>small{grid-area:small!important}

  .announcement-detail-actions{position:sticky;bottom:0;z-index:3;margin-left:-2px;margin-right:-2px;padding:10px 0 2px;background:linear-gradient(180deg,transparent,var(--app-surface) 22%)}
  .announcement-detail-actions button{flex:1;min-width:120px;min-height:44px;font-size:12px}
}


/* v0.2.70c — centered mobile bottom nav, brighter labels, mobile profile label. */
@media(max-width:760px){
  html.mobile-device body.app-mode{padding-bottom:88px!important}
  html.mobile-device .mobile-bottom-nav{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:0!important;
    align-items:stretch!important;
    padding:7px 6px calc(8px + env(safe-area-inset-bottom))!important;
    background:rgba(5,19,38,.98)!important;
    border-top:1px solid rgba(61,125,204,.26)!important;
    box-shadow:0 -10px 28px rgba(2,8,22,.28)!important;
  }
  html[data-theme="light"].mobile-device .mobile-bottom-nav{
    background:rgba(247,250,254,.98)!important;
    border-top:1px solid rgba(124,160,204,.26)!important;
    box-shadow:0 -10px 22px rgba(16,77,131,.10)!important;
  }
  html.mobile-device .mobile-bottom-link{
    min-height:64px!important;
    padding:6px 2px 8px!important;
    border-radius:16px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    text-align:center!important;
    color:rgba(233,240,250,.92)!important;
    overflow:visible!important;
  }
  html[data-theme="light"].mobile-device .mobile-bottom-link{color:#65758e!important}
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon{
    width:24px!important;
    height:24px!important;
    display:block!important;
    margin:0 auto!important;
    opacity:.96!important;
  }
  html.mobile-device .mobile-bottom-link > small{
    display:block!important;
    width:100%!important;
    margin:0!important;
    font-size:10.5px!important;
    line-height:1.12!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    font-weight:600!important;
    text-align:center!important;
    opacity:1!important;
  }
  html.mobile-device .mobile-bottom-link.active{
    color:#4ec0ff!important;
    background:rgba(19,103,192,.18)!important;
    border-color:rgba(76,170,234,.18)!important;
  }
  html[data-theme="light"].mobile-device .mobile-bottom-link.active{
    color:#1680da!important;
    background:rgba(22,128,218,.10)!important;
    border-color:rgba(22,128,218,.12)!important;
  }
  html.mobile-device .mobile-bottom-link[data-key="home"].active{
    background:linear-gradient(180deg,rgba(17,108,205,.23),rgba(11,81,170,.18))!important;
  }
  html.mobile-device .mobile-bottom-link[data-count]:not([data-count="0"])::after{
    top:3px!important;
    right:calc(50% - 20px)!important;
    min-width:18px!important;
    height:18px!important;
    font-size:8px!important;
    border-width:2px!important;
  }
}


/* v0.2.70d — clean unified mobile bottom navigation */
@media(max-width:760px){
  html.mobile-device body.app-mode{padding-bottom:92px!important;}
  html.mobile-device .mobile-bottom-nav{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:0!important;
    padding:8px 6px calc(8px + env(safe-area-inset-bottom))!important;
    background:rgba(6,18,34,.98)!important;
    border-top:1px solid rgba(71,116,176,.24)!important;
    box-shadow:0 -8px 26px rgba(2,8,20,.26)!important;
  }
  html[data-theme="light"].mobile-device .mobile-bottom-nav{
    background:rgba(248,251,255,.98)!important;
    border-top:1px solid rgba(155,181,212,.34)!important;
    box-shadow:0 -8px 20px rgba(18,66,109,.08)!important;
  }
  html.mobile-device .mobile-bottom-link{
    min-height:62px!important;
    padding:7px 2px 7px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    border:none!important;
    border-radius:14px!important;
    background:transparent!important;
    color:#9aa7bb!important;
    text-align:center!important;
    overflow:visible!important;
  }
  html[data-theme="light"].mobile-device .mobile-bottom-link{color:#73839a!important;}
  html.mobile-device .mobile-bottom-link.active{
    color:#2793ff!important;
    background:transparent!important;
  }
  html[data-theme="light"].mobile-device .mobile-bottom-link.active{color:#1878e6!important;}
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon{
    width:23px!important;height:23px!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0 auto!important;
  }
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon img{
    width:23px!important;height:23px!important;display:block!important;object-fit:contain!important;
    filter:invert(74%) sepia(9%) saturate(318%) hue-rotate(177deg) brightness(88%) contrast(88%)!important;
    opacity:.96!important;
  }
  html[data-theme="light"].mobile-device .mobile-bottom-link .mobile-bottom-icon img{
    filter:invert(45%) sepia(13%) saturate(431%) hue-rotate(176deg) brightness(93%) contrast(84%)!important;
  }
  html.mobile-device .mobile-bottom-link.active .mobile-bottom-icon img{
    filter:invert(48%) sepia(96%) saturate(2040%) hue-rotate(191deg) brightness(101%) contrast(101%)!important;
    opacity:1!important;
  }
  html.mobile-device .mobile-bottom-link > small{
    width:100%!important;
    display:block!important;
    margin:0!important;
    font-size:10.5px!important;
    line-height:1.15!important;
    letter-spacing:0!important;
    font-weight:600!important;
    white-space:nowrap!important;
    text-align:center!important;
    color:inherit!important;
  }
  html.mobile-device .mobile-bottom-link[data-count]:not([data-count="0"])::after{
    top:2px!important;
    right:calc(50% - 18px)!important;
    min-width:18px!important;
    height:18px!important;
    padding:0 5px!important;
    font-size:8px!important;
    line-height:14px!important;
    border:2px solid rgba(6,18,34,.98)!important;
  }
  html[data-theme="light"].mobile-device .mobile-bottom-link[data-count]:not([data-count="0"])::after{border-color:rgba(248,251,255,.98)!important;}
  html.mobile-device .mobile-bottom-link::before{display:none!important;}
}


/* v0.2.70e — mobile nav matched to the approved render. */
@media(max-width:760px){
  html.mobile-device body.app-mode{padding-bottom:78px!important}
  html.mobile-device .mobile-bottom-nav{
    position:fixed!important;
    left:0!important;right:0!important;bottom:0!important;
    z-index:90!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:center!important;
    gap:0!important;
    min-height:68px!important;
    padding:5px 8px calc(6px + env(safe-area-inset-bottom))!important;
    border:0!important;
    border-top:1px solid rgba(128,144,166,.14)!important;
    border-radius:0!important;
    background:#071424!important;
    box-shadow:0 -8px 24px rgba(0,0,0,.16)!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  html[data-theme="light"].mobile-device .mobile-bottom-nav{
    background:#fbfcfe!important;
    border-top-color:rgba(103,124,151,.14)!important;
    box-shadow:0 -8px 20px rgba(27,64,101,.06)!important;
  }
  html.mobile-device .mobile-bottom-link{
    position:relative!important;
    min-width:0!important;
    min-height:56px!important;
    margin:0!important;
    padding:5px 1px 3px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    color:#8995a8!important;
    text-align:center!important;
  }
  html[data-theme="light"].mobile-device .mobile-bottom-link{color:#8893a4!important}
  html.mobile-device .mobile-bottom-link:hover,
  html.mobile-device .mobile-bottom-link:focus,
  html.mobile-device .mobile-bottom-link:active{background:transparent!important;box-shadow:none!important}
  html.mobile-device .mobile-bottom-link.active,
  html[data-theme="light"].mobile-device .mobile-bottom-link.active{
    color:#1685f8!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon{
    width:25px!important;height:25px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    margin:0 auto!important;padding:0!important;
    color:inherit!important;
    background:transparent!important;
    border:0!important;border-radius:0!important;
    box-shadow:none!important;
    -webkit-mask:none!important;mask:none!important;
    opacity:1!important;
  }
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon::before,
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon::after{display:none!important;content:none!important}
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon img{display:none!important}
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon svg{
    display:block!important;width:24px!important;height:24px!important;
    fill:none!important;stroke:currentColor!important;stroke-width:1.9!important;
    stroke-linecap:round!important;stroke-linejoin:round!important;
    overflow:visible!important;
  }
  html.mobile-device .mobile-bottom-link .mobile-bottom-icon svg .dot-path{stroke-width:3!important}
  html.mobile-device .mobile-bottom-link[data-key="home"].active .mobile-bottom-icon svg path:first-child{
    fill:currentColor!important;stroke:currentColor!important;
  }
  html.mobile-device .mobile-bottom-link > small{
    display:block!important;width:100%!important;
    margin:0!important;padding:0!important;
    color:inherit!important;opacity:1!important;
    font-size:9.5px!important;font-weight:600!important;line-height:1.15!important;
    letter-spacing:0!important;white-space:nowrap!important;text-align:center!important;
  }
  html.mobile-device .mobile-bottom-link[data-count]:not([data-count="0"])::after{
    content:attr(data-count)!important;
    position:absolute!important;
    top:0!important;right:calc(50% - 20px)!important;
    min-width:16px!important;height:16px!important;padding:0 4px!important;
    border-radius:999px!important;
    display:grid!important;place-items:center!important;
    background:#ef4f62!important;color:#fff!important;
    font-size:7.5px!important;font-weight:800!important;line-height:1!important;
    border:2px solid #071424!important;
  }
  html[data-theme="light"].mobile-device .mobile-bottom-link[data-count]:not([data-count="0"])::after{border-color:#fbfcfe!important}

  /* Pending announcement moderation is deliberately prominent on mobile. */
  html.mobile-device .announcement-detail-actions{
    position:relative!important;bottom:auto!important;
    display:grid!important;grid-template-columns:1fr!important;gap:8px!important;
    margin:12px 0 14px!important;padding:0!important;
    border-top:0!important;background:transparent!important;
  }
  html.mobile-device .announcement-detail-actions button{
    width:100%!important;min-width:0!important;min-height:46px!important;
    border-radius:12px!important;font-size:12px!important;font-weight:800!important;
  }
  html.mobile-device .announcement-detail-actions .moderation-approve{
    background:#167eea!important;border-color:#167eea!important;color:#fff!important;
    box-shadow:0 7px 18px rgba(22,126,234,.20)!important;
  }
}


/* v0.2.70f — keyboard chat, compact contacts, moderation footer, desktop poll visibility */
@media (min-width:761px){
  #ukDashboard .mobile-home-poll-action{display:none!important;visibility:hidden!important;}
}

/* Moderation buttons are a real footer: cancel + approve are always legible. */
.announcement-detail-actions .secondary{background:transparent!important;color:var(--app-text)!important;border-color:var(--app-border)!important;}
.announcement-detail-actions .moderation-approve{background:var(--app-blue)!important;border-color:var(--app-blue)!important;color:#fff!important;}
@media(max-width:760px){
  .announcement-detail-actions{display:grid!important;grid-template-columns:1fr 1.35fr!important;gap:8px!important;position:sticky!important;bottom:0!important;padding:12px 0 4px!important;background:linear-gradient(180deg,transparent,var(--app-surface) 18%)!important;}
  .announcement-detail-actions .moderation-cancel{grid-column:1!important;}
  .announcement-detail-actions .moderation-approve{grid-column:2!important;}
  .announcement-detail-actions .moderation-reject{grid-column:1/-1!important;min-height:36px!important;background:transparent!important;}
}

/* Owner contacts on phones: avatar at left, all text aligned in a compact right column. */
@media(max-width:760px){
  #ownerPublicStaffContacts.contact-cards{gap:10px!important;}
  #ownerPublicStaffContacts.contact-cards article:not(.office-contact-card){
    display:grid!important;
    grid-template-columns:54px minmax(0,1fr)!important;
    grid-auto-rows:min-content!important;
    column-gap:12px!important;
    row-gap:3px!important;
    align-items:start!important;
    min-height:0!important;
    padding:12px!important;
  }
  #ownerPublicStaffContacts .owner-contact-avatar{
    grid-column:1!important;
    grid-row:1 / span 8!important;
    width:54px!important;
    height:54px!important;
    margin:0!important;
    border-radius:13px!important;
  }
  #ownerPublicStaffContacts article:not(.office-contact-card)>:not(.owner-contact-avatar){grid-column:2!important;min-width:0!important;}
  #ownerPublicStaffContacts .contact-role{margin:0!important;font-size:10px!important;line-height:1.2!important;}
  #ownerPublicStaffContacts article strong{margin:1px 0 0!important;font-size:13px!important;line-height:1.25!important;}
  #ownerPublicStaffContacts article a{margin:1px 0 0!important;font-size:11px!important;line-height:1.3!important;overflow-wrap:anywhere!important;}
  #ownerPublicStaffContacts .contact-note-text{margin-top:3px!important;font-size:10px!important;line-height:1.35!important;color:var(--app-muted)!important;}
  #ownerPublicStaffContacts .office-contact-card{
    min-height:0!important;
    padding:12px 12px 12px 58px!important;
  }
  #ownerPublicStaffContacts .office-contact-pin{left:12px!important;top:12px!important;}
}

/* The chat card must fill the visual viewport. This removes the empty strip
   between the composer and the phone keyboard on iOS/Android. */
@media(max-width:760px){
  html.mobile-device body.chat-open .chat-page{
    position:fixed!important;
    top:var(--chat-visual-top,0px)!important;
    left:0!important;right:0!important;
    width:100vw!important;
    height:var(--chat-visual-height,100dvh)!important;
    min-height:0!important;max-height:none!important;
    margin:0!important;padding:0!important;
    overflow:hidden!important;
    background:var(--app-surface)!important;
  }
  html.mobile-device body.chat-open .community-chat-card{
    position:absolute!important;
    inset:0!important;
    width:100%!important;height:100%!important;
    min-height:0!important;max-height:none!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    margin:0!important;padding:0!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  html.mobile-device body.chat-open .chat-message-list{
    min-height:0!important;height:auto!important;max-height:none!important;
    overflow-y:auto!important;
  }
  html.mobile-device body.chat-open .chat-compose{
    position:relative!important;
    align-self:end!important;
    width:100%!important;
    margin:0!important;
    flex:0 0 auto!important;
    background:var(--app-surface)!important;
  }
  html.mobile-device body.chat-open.chat-input-focused .chat-page,
  html.mobile-device body.chat-open.chat-keyboard-open .chat-page{
    bottom:auto!important;
  }
  html.mobile-device body.chat-open.chat-input-focused .community-chat-card,
  html.mobile-device body.chat-open.chat-keyboard-open .community-chat-card{
    height:100%!important;min-height:0!important;max-height:100%!important;
  }
}


/* v0.2.70g — mobile TSN voting text, moderator delete action, clearer errors. */
@media(max-width:760px){
  html.mobile-device #ukDashboard .mobile-home-poll-action{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-areas:"icon title" "icon small"!important;
    column-gap:10px!important;
    row-gap:3px!important;
    align-items:center!important;
    align-content:center!important;
    min-width:0!important;
    overflow:hidden!important;
    text-align:left!important;
  }
  html.mobile-device #ukDashboard .mobile-home-poll-action>span{
    grid-area:icon!important;
    width:42px!important;height:42px!important;
    margin:0!important;align-self:center!important;
  }
  html.mobile-device #ukDashboard .mobile-home-poll-action>strong{
    grid-area:title!important;
    min-width:0!important;width:auto!important;
    margin:0!important;
    font-size:13px!important;line-height:1.18!important;
    white-space:normal!important;overflow-wrap:break-word!important;
  }
  html.mobile-device #ukDashboard .mobile-home-poll-action>small{
    grid-area:small!important;
    min-width:0!important;width:auto!important;
    margin:0!important;
    font-size:9.5px!important;line-height:1.25!important;
    white-space:normal!important;overflow-wrap:break-word!important;
    color:var(--app-muted)!important;
  }
}
.market-card-actions button.danger,
.announcement-detail-actions button.danger{color:#ef5f73!important;border-color:color-mix(in srgb,#ef5f73 35%,var(--app-border))!important;}


/* v0.2.70h — announcement ownership UX, photo editor, address/map and direct listing messages. */
.tab-mobile-label{display:none}
.announcement-view-tabs .tab-desktop-label,.announcement-view-tabs .tab-mobile-label{min-width:0!important;height:auto!important;margin:0!important;padding:0!important;border-radius:0!important;background:transparent!important;color:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important}
.announcement-chat-badge{display:inline-grid!important;place-items:center;min-width:18px;height:18px;margin-left:5px;padding:0 5px;border-radius:999px;background:#ef4f62;color:#fff;font-size:9px;font-weight:800}
.announcement-chat-badge.hidden{display:none!important}
.market-card-address{font-style:normal!important;color:var(--app-text)!important;font-weight:650!important}
.announcement-detail-address{margin-top:12px;padding:11px 12px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface-strong);display:grid;gap:5px}
.announcement-detail-address strong{font-size:10px;color:var(--app-muted);text-transform:uppercase;letter-spacing:.08em}
.announcement-detail-address span{font-size:12px;line-height:1.4}
.announcement-map-button,.announcement-message-button{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border-radius:11px;border:1px solid var(--app-border);background:var(--app-surface-strong);color:var(--app-blue);font-size:11px;font-weight:800;text-decoration:none;cursor:pointer}
.announcement-message-button{background:var(--app-blue)!important;border-color:var(--app-blue)!important;color:#fff!important}
.announcement-contact-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

.announcement-photo-edit-item{position:relative}
.announcement-photo-controls{position:absolute;right:6px;top:6px;display:flex;gap:4px;z-index:2}
.announcement-photo-controls button{width:28px;height:28px;padding:0;border:0;border-radius:8px;background:rgba(8,20,38,.78);color:#fff;font-size:14px;font-weight:800;backdrop-filter:blur(5px);cursor:pointer}
.announcement-photo-controls button:disabled{opacity:.35;cursor:default}
.announcement-photo-controls button.danger{background:rgba(180,44,62,.88)}
.announcement-photo-edit-item[draggable="true"]{cursor:grab}

.announcement-messages-mode{display:block!important}
.announcement-thread-list{display:grid;gap:9px;width:100%}
.announcement-thread-card{width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface);color:var(--app-text);text-align:left;cursor:pointer}
.announcement-thread-avatar{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--app-blue-soft);color:var(--app-blue);font-size:18px;font-weight:800}
.announcement-thread-copy{display:grid;gap:2px;min-width:0}
.announcement-thread-copy strong{font-size:12px}.announcement-thread-copy b{font-size:11px}.announcement-thread-copy small{font-size:10px;color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.announcement-thread-meta{align-self:stretch;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:5px}.announcement-thread-meta time{font-size:8.5px;color:var(--app-muted)}.announcement-thread-meta i{min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:grid;place-items:center;background:#ef4f62;color:#fff;font-size:8px;font-style:normal;font-weight:800}
.announcement-chat-empty{display:grid;gap:6px;text-align:center}.announcement-chat-empty strong{font-size:14px}.announcement-chat-empty span{font-size:10px;color:var(--app-muted)}

.listing-conversation-modal{width:min(620px,calc(100vw - 24px));height:min(720px,82dvh);display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;overflow:hidden}
.listing-conversation-modal .modal-head{margin-bottom:0}
.listing-conversation-modal .modal-head small{display:block;margin-top:4px;color:var(--app-muted);font-size:9px}
.listing-conversation-messages{min-height:0;overflow-y:auto;padding:12px 4px;display:flex;flex-direction:column;gap:8px}
.listing-message{max-width:82%;align-self:flex-start;padding:9px 11px;border:1px solid var(--app-border);border-radius:14px 14px 14px 4px;background:var(--app-surface-strong);display:grid;gap:3px}
.listing-message.mine{align-self:flex-end;border-radius:14px 14px 4px 14px;background:var(--app-blue-soft)}
.listing-message strong{font-size:9px;color:var(--app-blue)}.listing-message p{margin:0;font-size:12px;line-height:1.35}.listing-message small{font-size:8px;color:var(--app-muted);text-align:right}
.listing-conversation-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;padding-top:9px;border-top:1px solid var(--app-border)}
.listing-conversation-form input{min-width:0;height:44px;border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface-strong);color:var(--app-text);padding:0 12px;outline:0}
.listing-conversation-form button{height:44px;border:0;border-radius:11px;background:var(--app-blue);color:#fff;padding:0 16px;font-weight:800;cursor:pointer}

/* iPhone keyboard: anchor the chat page between visualViewport top and keyboard top. */
@media(max-width:760px){
  html.mobile-device body.chat-open .chat-page{
    top:var(--chat-visual-top,0px)!important;
    bottom:var(--chat-visual-bottom,0px)!important;
    height:auto!important;
    min-height:0!important;
  }
  html.mobile-device body.chat-open .community-chat-card{position:absolute!important;inset:0!important;height:auto!important;min-height:0!important;max-height:none!important;grid-template-rows:minmax(0,1fr) auto!important}
  html.mobile-device body.chat-open .chat-compose{position:absolute!important;left:0!important;right:0!important;bottom:0!important;z-index:5!important}
  html.mobile-device body.chat-open .chat-message-list{padding-bottom:62px!important}

  .announcement-view-tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important;padding:5px!important;overflow:visible!important}
  .announcement-view-tabs button{min-width:0!important;min-height:38px!important;padding:0 5px!important;font-size:10px!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .announcement-view-tabs .tab-desktop-label{display:none!important}.announcement-view-tabs .tab-mobile-label{display:inline!important}
  .announcement-view-tabs .moderation-tab:not(.hidden){grid-column:1/-1!important;justify-self:stretch!important;color:var(--app-orange)!important;background:var(--app-orange-soft)!important}
  .announcement-view-tabs .moderation-tab.active{color:#fff!important;background:var(--app-orange)!important}
  .announcement-chat-badge{min-width:16px;height:16px;padding:0 4px;font-size:7px;margin-left:3px}
  .announcement-thread-card{grid-template-columns:42px minmax(0,1fr) auto;padding:9px;gap:8px;border-radius:12px}.announcement-thread-avatar{width:42px;height:42px;border-radius:12px;font-size:16px}
  .listing-conversation-modal{width:calc(100vw - 14px);height:min(78dvh,680px);padding:12px!important}
  .listing-conversation-form button{padding:0 12px;font-size:10px}
  .announcement-contact-actions{display:grid;grid-template-columns:1fr}.announcement-message-button,.announcement-map-button{width:100%}
}


/* v0.2.70i — announcement editor page, safe iPhone chat, compact TSN voting, reusable shift presets. */
.announcement-editor-page{max-width:980px!important;margin:18px auto 70px!important;padding:0 18px!important;}
.announcement-editor-head{margin-bottom:12px!important;}
.announcement-editor-card{padding:22px!important;border-radius:20px!important;}
.announcement-editor-card .employee-form-grid{margin-top:0!important;}
.announcement-editor-actions{position:sticky;bottom:0;z-index:6;margin:18px -22px -22px!important;padding:14px 22px max(14px,env(safe-area-inset-bottom))!important;background:color-mix(in srgb,var(--app-surface-strong) 96%,transparent);border-top:1px solid var(--app-border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}

.shift-preset-manager{display:grid;grid-template-columns:minmax(220px,1fr) auto auto auto;gap:10px;align-items:end;padding:12px 14px;margin:0 0 12px;}
.shift-preset-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.shift-preset-copy strong{font-size:12px}.shift-preset-copy small{font-size:9px;color:var(--app-muted);line-height:1.35}
.shift-preset-manager label{display:flex;flex-direction:column;gap:4px}.shift-preset-manager label>span{font-size:9px;color:var(--app-muted);font-weight:700}.shift-preset-manager input[type="time"]{height:40px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface-strong);color:var(--app-text);padding:0 10px;font:inherit}
.shift-preset-list{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;min-height:28px;align-items:center}.shift-preset-list>small{color:var(--app-muted);font-size:9px}
.shift-preset-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--app-border);border-radius:999px;background:var(--app-surface-strong);padding:5px 7px 5px 10px}.shift-preset-chip b{font-size:10px}.shift-preset-chip button{width:20px;height:20px;border:0;border-radius:50%;background:var(--app-blue-soft);color:var(--app-muted);display:grid;place-items:center;cursor:pointer;line-height:1}
.shift-picker-dialog{width:min(520px,100%)}.shift-picker-dialog .modal-head small{display:block;margin-top:4px;color:var(--app-muted);font-size:9px}.shift-picker-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.shift-picker-option{min-height:62px;border:1px solid var(--app-border);border-radius:13px;background:var(--app-surface-strong);color:var(--app-text);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;padding:10px 12px;text-align:left;cursor:pointer}.shift-picker-option:hover{border-color:var(--app-blue);background:var(--app-blue-soft)}.shift-picker-option strong{font-size:12px}.shift-picker-option small{font-size:9px;color:var(--app-muted)}.shift-picker-option.duty{border-color:color-mix(in srgb,var(--app-orange) 35%,var(--app-border))}.shift-picker-option.off{color:var(--app-muted)}

/* Restore the stable chat layout: never absolutely pin the composer to a synthetic keyboard inset. */
@media(max-width:760px){
  html.mobile-device body.chat-open .chat-page{
    position:fixed!important;
    top:var(--chat-visual-top,0px)!important;
    left:0!important;right:0!important;bottom:auto!important;
    width:100vw!important;
    height:var(--chat-visual-height,100dvh)!important;
    min-height:0!important;max-height:none!important;
    margin:0!important;padding:0!important;
    overflow:hidden!important;background:var(--app-surface)!important;
  }
  html.mobile-device body.chat-open .community-chat-card{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
    min-height:0!important;max-height:none!important;display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;margin:0!important;padding:0!important;border-radius:0!important;overflow:hidden!important;
  }
  html.mobile-device body.chat-open .chat-message-list{min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;padding-bottom:8px!important;}
  html.mobile-device body.chat-open .chat-compose{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;align-self:end!important;width:100%!important;margin:0!important;padding-bottom:max(6px,env(safe-area-inset-bottom))!important;background:var(--app-surface)!important;}
  html.mobile-device body.chat-open.chat-input-focused .mobile-bottom-nav,html.mobile-device body.chat-open.chat-keyboard-open .mobile-bottom-nav{display:none!important;visibility:hidden!important;pointer-events:none!important;}

  .announcement-editor-page{width:calc(100% - 12px)!important;margin:7px auto 88px!important;padding:0!important;}
  .announcement-editor-page .back-button{display:inline-flex!important;}
  .announcement-editor-card{padding:14px!important;border-radius:16px!important;}
  .announcement-editor-actions{margin:16px -14px -14px!important;padding:10px 14px max(10px,env(safe-area-inset-bottom))!important;}

  /* Keep "Голосования" readable inside the 2-column quick-action grid. */
  html.mobile-device #ukDashboard .mobile-home-poll-action{display:grid!important;grid-template-columns:1fr!important;grid-template-areas:"icon" "title" "small"!important;gap:5px!important;align-content:center!important;justify-items:start!important;padding:14px!important;overflow:hidden!important;text-align:left!important;}
  html.mobile-device #ukDashboard .mobile-home-poll-action>span{grid-area:icon!important;width:34px!important;height:34px!important;margin:0!important;}
  html.mobile-device #ukDashboard .mobile-home-poll-action>strong{grid-area:title!important;width:100%!important;min-width:0!important;margin:0!important;font-size:12px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;overflow-wrap:normal!important;word-break:normal!important;}
  html.mobile-device #ukDashboard .mobile-home-poll-action>small{grid-area:small!important;width:100%!important;min-width:0!important;margin:0!important;font-size:9px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}

  .shift-preset-manager{grid-template-columns:1fr 1fr!important;gap:8px!important;padding:10px!important}.shift-preset-copy{grid-column:1/-1}.shift-preset-manager #addShiftPresetButton{grid-column:1/-1;width:100%}.shift-preset-list{grid-column:1/-1}.shift-picker-options{grid-template-columns:1fr!important}
}


/* v0.2.70j — fixed mobile announcement editor, shift presets only in picker, iPhone chat viewport hardening. */
.shift-picker-options{display:flex!important;flex-direction:column!important;gap:8px!important;}
.shift-picker-row{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:7px;align-items:stretch;}
.shift-picker-row.special{grid-template-columns:1fr;}
.shift-picker-row .shift-picker-option{width:100%;min-width:0;}
.shift-picker-delete{width:42px;min-height:58px;border:1px solid color-mix(in srgb,#ef6d73 34%,var(--app-border));border-radius:12px;background:color-mix(in srgb,#ef6d73 7%,var(--app-surface-strong));color:#ef6d73;font-size:22px;line-height:1;cursor:pointer;}
.shift-add-new-button{width:100%;margin-top:10px!important;}
.shift-preset-creator{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;padding:10px;border:1px solid var(--app-border);border-radius:13px;background:var(--app-surface);}
.shift-preset-creator.hidden{display:none!important;}
.shift-preset-creator label{display:flex;flex-direction:column;gap:4px}.shift-preset-creator label span{font-size:9px;color:var(--app-muted);font-weight:700}.shift-preset-creator input[type="time"]{width:100%;height:42px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface-strong);color:var(--app-text);padding:0 10px;font:inherit}.shift-preset-creator .save-modal-button,.shift-preset-creator .secondary-modal-button{min-height:42px;}

@media(max-width:760px){
  /* The announcement form is a real mobile page, not a document section sitting lower in the DOM. */
  html.mobile-device .announcement-editor-page:not(.hidden){
    position:fixed!important;
    z-index:78!important;
    top:0!important;left:0!important;right:0!important;
    bottom:calc(76px + env(safe-area-inset-bottom))!important;
    width:100vw!important;max-width:none!important;
    height:auto!important;min-height:0!important;
    margin:0!important;
    padding:max(10px,env(safe-area-inset-top)) 10px 14px!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    background:var(--app-bg)!important;
  }
  html.mobile-device .announcement-editor-page .subpage-head{margin:0 0 10px!important;padding-top:0!important;}
  html.mobile-device .announcement-editor-page .announcement-editor-card{margin:0!important;}
  html.mobile-device .announcement-editor-page .announcement-editor-actions{position:sticky!important;bottom:0!important;}

  /* iOS: lock the document itself while chatting. visualViewport controls only the chat height. */
  html.mobile-device body.chat-open{
    position:fixed!important;inset:0!important;width:100%!important;height:100%!important;
    overflow:hidden!important;overscroll-behavior:none!important;
  }
  html.mobile-device body.chat-open .chat-page{
    position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:auto!important;
    width:100vw!important;height:var(--chat-visual-height,100dvh)!important;
    min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;
    overflow:hidden!important;background:var(--app-surface)!important;transform:none!important;
  }
  html.mobile-device body.chat-open .community-chat-card{
    position:absolute!important;inset:0!important;height:100%!important;min-height:0!important;
    display:grid!important;grid-template-rows:minmax(0,1fr) auto!important;overflow:hidden!important;
  }
  html.mobile-device body.chat-open .chat-message-list{min-height:0!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;padding-bottom:6px!important;}
  html.mobile-device body.chat-open .chat-compose{position:relative!important;bottom:auto!important;margin:0!important;padding:5px 6px max(5px,env(safe-area-inset-bottom))!important;background:var(--app-surface)!important;}
  html.mobile-device body.chat-open.chat-input-focused .mobile-bottom-nav,
  html.mobile-device body.chat-open.chat-keyboard-open .mobile-bottom-nav{display:none!important;}

  .shift-picker-dialog{max-height:min(82dvh,720px)!important;overflow-y:auto!important;}
  .shift-picker-row{grid-template-columns:minmax(0,1fr) 40px!important;}
  .shift-picker-delete{width:40px!important;min-height:58px!important;}
}


/* v0.2.70k — compact messenger-style chat, long-press actions, jump-to-bottom. */
.community-chat-card{position:relative}
.chat-jump-bottom{
  position:absolute;z-index:34;right:14px;bottom:76px;width:42px;height:42px;border:1px solid var(--app-border);border-radius:50%;
  display:grid;place-items:center;background:color-mix(in srgb,var(--app-surface-strong) 96%,transparent);color:var(--app-text);
  box-shadow:0 7px 24px rgba(0,0,0,.20);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.chat-jump-bottom.hidden{display:none!important}.chat-jump-bottom span{font-size:27px;line-height:.8;transform:translateY(-2px)}
.chat-longpress-menu{position:fixed;z-index:30050;left:50%;transform:translateX(-50%);top:max(8px,env(safe-area-inset-top));width:min(560px,calc(100vw - 16px));min-height:54px;display:flex;align-items:center;gap:4px;padding:6px 8px;border:1px solid var(--app-border);border-radius:15px;background:color-mix(in srgb,var(--app-surface-strong) 98%,transparent);box-shadow:0 18px 55px rgba(0,0,0,.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.chat-longpress-menu.hidden{display:none!important}.chat-longpress-menu button{min-height:40px;border:0;border-radius:10px;background:transparent;color:var(--app-text);padding:0 11px;font:inherit;font-size:10px;font-weight:750;cursor:pointer;display:flex;align-items:center;gap:5px}.chat-longpress-menu button:hover{background:var(--app-blue-soft)}.chat-longpress-menu .chat-longpress-close{font-size:22px;padding:0 12px}.chat-longpress-menu>strong{font-size:11px;margin-right:auto}.chat-longpress-menu .danger{color:#ef6d73}.chat-longpress-menu button.hidden{display:none!important}
.chat-message-selected .community-message{outline:2px solid color-mix(in srgb,var(--app-blue) 60%,transparent);outline-offset:2px}

@media(max-width:760px){
  html.mobile-device body.chat-open .chat-message-list{gap:3px!important;padding:5px 6px 7px!important;}
  html.mobile-device body.chat-open .community-message-row{gap:5px!important;align-items:flex-end!important;}
  html.mobile-device body.chat-open .chat-avatar{width:24px!important;height:24px!important;min-width:24px!important;font-size:7px!important;margin-bottom:1px!important;}
  html.mobile-device body.chat-open .community-message{
    position:relative!important;max-width:84%!important;padding:6px 8px 15px!important;border-radius:11px 11px 11px 4px!important;
    box-shadow:none!important;
  }
  html.mobile-device body.chat-open .community-message.mine{border-radius:11px 11px 4px 11px!important;}
  html.mobile-device body.chat-open .community-message.uk-message{border-left-width:2px!important;}
  html.mobile-device body.chat-open .community-message-head{display:flex!important;align-items:center!important;gap:4px!important;flex-wrap:wrap!important;line-height:1.1!important;}
  html.mobile-device body.chat-open .community-message-head strong{font-size:9.5px!important;line-height:1.15!important;}
  html.mobile-device body.chat-open .community-message-head span{font-size:6px!important;padding:2px 5px!important;}
  html.mobile-device body.chat-open .community-message-head small{width:100%!important;font-size:7px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;opacity:.88!important;}
  html.mobile-device body.chat-open .community-message-head time{position:absolute!important;right:7px!important;bottom:4px!important;margin:0!important;font-size:6.8px!important;line-height:1!important;opacity:.8!important;}
  html.mobile-device body.chat-open .community-message>p{margin:3px 0 0!important;padding-right:30px!important;font-size:10.5px!important;line-height:1.28!important;word-break:break-word!important;}
  html.mobile-device body.chat-open .community-message-actions{display:none!important;}
  html.mobile-device body.chat-open .chat-reply-preview{margin:4px 0 2px!important;padding:5px 6px!important;border-left-width:2px!important;border-radius:6px!important;gap:1px!important;}
  html.mobile-device body.chat-open .chat-reply-preview strong{font-size:7px!important}.chat-reply-preview span{font-size:7px!important;}
  html.mobile-device body.chat-open .chat-mention-chip{margin-top:4px!important;padding:3px 6px!important;font-size:7px!important;}
  html.mobile-device body.chat-open .community-message-media{margin-top:5px!important;border-radius:8px!important;max-width:min(100%,300px)!important;}
  html.mobile-device body.chat-open .community-message-image img{max-height:330px!important;}
  html.mobile-device body.chat-open .chat-day-separator,html.mobile-device body.chat-open .chat-unread-separator{margin:3px 0!important;gap:6px!important;}
  html.mobile-device body.chat-open .chat-day-separator span,html.mobile-device body.chat-open .chat-unread-separator span{font-size:7px!important;padding:3px 7px!important;}
  html.mobile-device body.chat-open .chat-jump-bottom{right:10px!important;bottom:64px!important;width:38px!important;height:38px!important;}
  html.mobile-device body.chat-open.chat-input-focused .chat-jump-bottom,html.mobile-device body.chat-open.chat-keyboard-open .chat-jump-bottom{bottom:58px!important;}
  .chat-longpress-menu{left:0!important;right:0!important;transform:none!important;top:0!important;width:100vw!important;max-width:none!important;border-radius:0 0 13px 13px!important;border-left:0!important;border-right:0!important;padding-top:max(6px,env(safe-area-inset-top))!important;}
  .chat-longpress-menu button{font-size:9px!important;padding:0 8px!important}.chat-longpress-menu button span{display:none!important}.chat-longpress-menu>strong{font-size:10px!important;}
}


/* v0.2.70l — robust mobile chat rules; do not depend on runtime body/html classes. */
@media (max-width:760px){
  .chat-message-list{gap:3px!important;padding:5px 6px 8px!important;}
  .community-message-row{gap:5px!important;align-items:flex-end!important;}
  .chat-avatar{width:24px!important;height:24px!important;min-width:24px!important;font-size:7px!important;margin-bottom:1px!important;}
  .community-message{position:relative!important;max-width:84%!important;padding:6px 8px 15px!important;border-radius:11px 11px 11px 4px!important;box-shadow:none!important;}
  .community-message.mine{border-radius:11px 11px 4px 11px!important;}
  .community-message.uk-message{border-left-width:2px!important;}
  .community-message-head{display:flex!important;align-items:center!important;gap:4px!important;flex-wrap:wrap!important;line-height:1.1!important;}
  .community-message-head strong{font-size:9.5px!important;line-height:1.15!important;}
  .community-message-head span{font-size:6px!important;padding:2px 5px!important;}
  .community-message-head small{width:100%!important;font-size:7px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;opacity:.88!important;}
  .community-message-head time{position:absolute!important;right:7px!important;bottom:4px!important;margin:0!important;font-size:6.8px!important;line-height:1!important;opacity:.8!important;}
  .community-message>p{margin:3px 0 0!important;padding-right:30px!important;font-size:10.5px!important;line-height:1.28!important;word-break:break-word!important;}
  .community-message-actions{display:none!important;}
  .chat-reply-preview{margin:4px 0 2px!important;padding:5px 6px!important;border-left-width:2px!important;border-radius:6px!important;gap:1px!important;}
  .chat-reply-preview strong,.chat-reply-preview span{font-size:7px!important;}
  .chat-mention-chip{margin-top:4px!important;padding:3px 6px!important;font-size:7px!important;}
  .community-message-media{margin-top:5px!important;border-radius:8px!important;max-width:min(100%,300px)!important;}
  .community-message-image img{max-height:330px!important;}
  .chat-day-separator,.chat-unread-separator{margin:3px 0!important;gap:6px!important;}
  .chat-day-separator span,.chat-unread-separator span{font-size:7px!important;padding:3px 7px!important;}
  .chat-jump-bottom{position:fixed!important;z-index:30020!important;right:12px!important;bottom:142px!important;width:42px!important;height:42px!important;border-radius:50%!important;}
  body.chat-input-focused .chat-jump-bottom,body.chat-keyboard-open .chat-jump-bottom{bottom:72px!important;}
  .chat-longpress-menu{left:0!important;right:0!important;transform:none!important;top:0!important;width:100vw!important;max-width:none!important;border-radius:0 0 13px 13px!important;border-left:0!important;border-right:0!important;padding-top:max(6px,env(safe-area-inset-top))!important;}
  .chat-longpress-menu button{font-size:9px!important;padding:0 8px!important;}
  .chat-longpress-menu button span{display:none!important;}
  .chat-longpress-menu>strong{font-size:10px!important;}
}


/* v0.2.70m — mobile editor fixed to the visual top + restored device controls in Profile. */
.mobile-profile-device-card{display:none!important;}
html.mobile-device .mobile-profile-device-card{
  display:block!important;
  margin:0 0 12px!important;
  padding:13px!important;
  border-radius:16px!important;
}
html.mobile-device .mobile-profile-device-card .section-heading{margin-bottom:9px!important;}
html.mobile-device .mobile-profile-device-card h2{font-size:17px!important;margin:2px 0 1px!important;}
html.mobile-device .mobile-profile-device-card .section-subcopy{font-size:9px!important;line-height:1.35!important;}
html.mobile-device .profile-device-list{display:grid!important;gap:8px!important;}
html.mobile-device .profile-device-row{
  display:grid!important;
  grid-template-columns:36px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:9px!important;
  padding:10px!important;
  border:1px solid var(--app-border)!important;
  border-radius:13px!important;
  background:var(--app-surface-strong)!important;
}
html.mobile-device .profile-device-icon{
  width:36px!important;height:36px!important;border-radius:10px!important;
  display:grid!important;place-items:center!important;
  background:var(--app-blue-soft)!important;color:var(--app-blue)!important;font-size:18px!important;
}
html.mobile-device .profile-device-row>div:nth-child(2){display:flex!important;flex-direction:column!important;gap:3px!important;min-width:0!important;}
html.mobile-device .profile-device-row strong{font-size:11px!important;line-height:1.2!important;}
html.mobile-device .profile-device-row small{font-size:8.5px!important;line-height:1.35!important;color:var(--app-muted)!important;}
html.mobile-device .profile-device-row>.ghost-button{min-height:36px!important;padding:0 10px!important;font-size:9px!important;white-space:nowrap!important;}
html.mobile-device .profile-device-actions{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:3px!important;}
html.mobile-device .profile-device-actions .ghost-button{min-height:34px!important;padding:0 9px!important;font-size:9px!important;white-space:nowrap!important;}
html.mobile-device .profile-device-actions .text-button{font-size:8px!important;padding:2px 4px!important;text-align:center!important;}
html.mobile-device .profile-device-actions .hidden{display:none!important;}

/* Do not depend on CSS viewport width: mobile-device is the source of truth on Fold/iPhone. */
html.mobile-device body.announcement-editor-open{overflow:hidden!important;overscroll-behavior:none!important;}
html.mobile-device body.announcement-editor-open #announcementModal.announcement-editor-page:not(.hidden){
  display:block!important;
  position:fixed!important;
  z-index:6000!important;
  top:0!important;left:0!important;right:0!important;
  bottom:calc(76px + env(safe-area-inset-bottom))!important;
  inset:0 0 calc(76px + env(safe-area-inset-bottom)) 0!important;
  width:100%!important;max-width:100%!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  margin:0!important;
  padding:max(8px,env(safe-area-inset-top)) 10px 14px!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  scroll-padding-top:0!important;scroll-margin-top:0!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  transform:none!important;translate:none!important;
  background:var(--app-bg)!important;
}
html.mobile-device body.announcement-editor-open #announcementModal>.subpage-head{
  margin:0 0 10px!important;padding:0!important;transform:none!important;
}
html.mobile-device body.announcement-editor-open #announcementModal>.announcement-editor-card{
  margin:0!important;transform:none!important;
}
@media(max-width:460px){
  html.mobile-device .profile-device-row{grid-template-columns:34px minmax(0,1fr)!important;}
  html.mobile-device .profile-device-row>.ghost-button,
  html.mobile-device .profile-device-actions{grid-column:2!important;width:100%!important;}
  html.mobile-device .profile-device-actions{flex-direction:row!important;align-items:center!important;}
}


/* v0.2.70o — auth switching, mobile status/login viewport, chat geometry, announcement page + gallery. */
html,body{min-height:100%;}
html.mobile-device body:not(.app-mode){min-height:100dvh!important;background:#10131c!important;}
html.mobile-device body:not(.app-mode) .page-shell{min-height:100dvh!important;}
html.mobile-device body:not(.app-mode) .background,
html.mobile-device body:not(.app-mode) .background-overlay{top:0!important;bottom:-2px!important;height:auto!important;min-height:calc(100dvh + 2px)!important;}
html.mobile-device body:not(.app-mode) .page-shell{padding-bottom:max(8px,env(safe-area-inset-bottom))!important;}

/* Chat: the bottom navigation already owns the phone safe area. Do not reserve it a second time below the composer. */
html.mobile-device body.chat-open .chat-compose{padding:5px 6px!important;margin:0!important;}
html.mobile-device body.chat-open .community-chat-card{gap:0!important;}
html.mobile-device body.chat-open .chat-message-list{margin:0!important;}
@media(max-width:760px){
  .chat-jump-bottom{right:12px!important;bottom:182px!important;width:42px!important;height:42px!important;}
  body.chat-input-focused .chat-jump-bottom,body.chat-keyboard-open .chat-jump-bottom{bottom:84px!important;}
}

/* Announcement detail behaves as a dedicated page on phones. */
.announcement-detail-cover{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;color:inherit;}
.announcement-detail-cover img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:1px solid var(--app-border);}
.announcement-detail-cover>span{position:absolute;right:10px;bottom:10px;min-height:28px;padding:0 10px;border-radius:999px;display:flex;align-items:center;background:rgba(7,12,22,.74);color:#fff;font-size:10px;font-weight:800;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.announcement-detail-no-photo{min-height:180px;border:1px dashed var(--app-border);border-radius:14px;display:grid;place-items:center;color:var(--app-muted);font-size:11px;background:var(--app-surface-strong);}

.announcement-gallery{position:fixed;z-index:50000;inset:0;background:#000;color:#fff;overflow:hidden;}
.announcement-gallery.hidden{display:none!important;}
.announcement-gallery-head{position:absolute;z-index:4;left:0;right:0;top:0;min-height:58px;padding:max(8px,env(safe-area-inset-top)) 14px 8px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);}
.announcement-gallery-head button{width:42px;height:42px;border:0;background:transparent;color:#fff;font-size:29px;cursor:pointer;}
.announcement-gallery-head strong{text-align:center;font-size:13px;}
.announcement-gallery-track{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.announcement-gallery-track::-webkit-scrollbar{display:none;}
.announcement-gallery-slide{flex:0 0 100%;width:100%;height:100%;margin:0;display:grid;place-items:center;scroll-snap-align:start;}
.announcement-gallery-slide img{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;}
.announcement-gallery-nav{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:44px;height:62px;border:0;border-radius:12px;background:rgba(0,0,0,.38);color:#fff;font-size:38px;cursor:pointer;}
.announcement-gallery-nav.prev{left:10px}.announcement-gallery-nav.next{right:10px}.announcement-gallery-nav.hidden{display:none!important;}
body.announcement-gallery-open{overflow:hidden!important;}

@media(max-width:760px){
  #announcementDetailModal:not(.hidden){display:block!important;position:fixed!important;z-index:15000!important;inset:0!important;padding:0!important;background:var(--app-bg)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:hidden!important;}
  #announcementDetailModal .announcement-detail-modal{display:block!important;width:100%!important;height:100dvh!important;max-height:none!important;margin:0!important;padding:max(8px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom))!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow-y:auto!important;background:var(--app-bg)!important;}
  #announcementDetailModal .modal-head{position:sticky!important;top:calc(-1 * max(8px,env(safe-area-inset-top)))!important;z-index:7!important;margin:calc(-1 * max(8px,env(safe-area-inset-top))) -12px 10px!important;padding:max(8px,env(safe-area-inset-top)) 12px 8px!important;background:color-mix(in srgb,var(--app-bg) 96%,transparent)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;border-bottom:1px solid var(--app-border)!important;}
  #announcementDetailModal .modal-head .modal-close{order:-1!important;width:42px!important;height:42px!important;border:0!important;background:transparent!important;font-size:27px!important;}
  #announcementDetailModal .announcement-detail-content{display:block!important;margin-top:0!important;}
  #announcementDetailModal .announcement-detail-media{margin:0 0 14px!important;}
  #announcementDetailModal .announcement-detail-cover img{aspect-ratio:4/3!important;border-radius:14px!important;}
  #announcementDetailModal .announcement-detail-copy{display:block!important;padding-bottom:18px!important;}
  #announcementDetailModal .announcement-detail-copy h3{font-size:24px!important;line-height:1.12!important;margin:8px 0 6px!important;}
  #announcementDetailModal .announcement-detail-copy>b{font-size:22px!important;}
  #announcementDetailModal .announcement-detail-copy>p{font-size:12px!important;line-height:1.55!important;margin:16px 0!important;}
  #announcementDetailModal .announcement-detail-actions{position:static!important;background:none!important;padding:10px 0 0!important;}
  .announcement-gallery-nav{display:none!important;}
}


/* v0.2.70p — unread chat start, dark splash, chat scale, jump-button geometry, Android/PWA navigation. */
.auth-boot{
  background:radial-gradient(circle at 50% 38%,#0a2441 0,#07182d 35%,#030a14 72%,#01050b 100%)!important;
  color:#fff!important;
  gap:16px!important;
}
.auth-boot-logo{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;}
.auth-boot-logo>strong{font-size:28px!important;line-height:1!important;letter-spacing:.19em!important;color:#fff!important;text-shadow:0 0 24px rgba(44,155,255,.28);}
.auth-boot-logo>em{font-style:normal;font-size:8px;letter-spacing:.24em;color:#71bdff;text-transform:uppercase;}
.auth-boot>small{font-size:11px!important;letter-spacing:.04em;color:rgba(226,239,255,.72)!important;}
.auth-boot-mark{height:70px!important;gap:6px!important;color:#26a7ff!important;filter:drop-shadow(0 0 14px rgba(37,164,255,.34));}
.auth-boot-mark span{width:6px!important;border-width:3px!important;}
.auth-boot-mark span:nth-child(1){height:34px!important}.auth-boot-mark span:nth-child(2){height:62px!important}.auth-boot-mark span:nth-child(3){height:46px!important}

.community-chat-card{position:relative!important;}
.chat-jump-bottom{
  position:absolute!important;
  right:10px!important;
  bottom:calc(var(--chat-compose-height,58px) + 12px)!important;
  z-index:80!important;
  width:40px!important;height:40px!important;
}
html.mobile-device body.chat-open .chat-jump-bottom,
html.mobile-device body.chat-open.chat-input-focused .chat-jump-bottom,
html.mobile-device body.chat-open.chat-keyboard-open .chat-jump-bottom{
  position:absolute!important;right:10px!important;bottom:calc(var(--chat-compose-height,58px) + 12px)!important;
}

:root{--chat-scale:1;}
.community-message{padding:calc(8px * var(--chat-scale)) calc(9px * var(--chat-scale))!important;border-radius:calc(13px * var(--chat-scale))!important;}
.community-message-head strong{font-size:calc(9.5px * var(--chat-scale))!important;}
.community-message-head small{font-size:calc(7px * var(--chat-scale))!important;}
.community-message-head time{font-size:calc(6.8px * var(--chat-scale))!important;}
.community-message-head span{font-size:calc(6px * var(--chat-scale))!important;padding:calc(2px * var(--chat-scale)) calc(5px * var(--chat-scale))!important;}
.community-message>p{font-size:calc(12px * var(--chat-scale))!important;line-height:1.48!important;margin-top:calc(5px * var(--chat-scale))!important;}
.chat-avatar{width:calc(24px * var(--chat-scale))!important;height:calc(24px * var(--chat-scale))!important;min-width:calc(24px * var(--chat-scale))!important;font-size:calc(7px * var(--chat-scale))!important;}
.chat-reply-preview,.chat-mention-chip{font-size:calc(8px * var(--chat-scale))!important;}
.chat-day-separator span,.chat-unread-separator span{font-size:calc(7px * var(--chat-scale))!important;}

.chat-scale-profile-card{margin-top:12px;}
.chat-scale-control{display:grid;gap:10px;}
.chat-scale-control>label{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--app-muted);font-size:10px;}
.chat-scale-control>label strong{color:var(--app-blue);font-size:12px;}
.chat-scale-range{width:100%;accent-color:var(--app-blue);}
.chat-scale-preview{--chat-scale:1;display:grid;gap:7px;padding:10px;border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface-strong);overflow:hidden;}
.chat-scale-preview-row{display:flex;align-items:flex-end;gap:6px;}
.chat-scale-preview-row.mine{justify-content:flex-end;}
.chat-scale-preview-avatar{width:calc(24px * var(--chat-scale));height:calc(24px * var(--chat-scale));min-width:calc(24px * var(--chat-scale));display:grid;place-items:center;border-radius:50%;background:var(--app-blue-soft);color:var(--app-blue);font-size:calc(7px * var(--chat-scale));font-weight:900;}
.chat-scale-preview-row.uk .chat-scale-preview-avatar{background:var(--app-blue);color:#fff;}
.chat-scale-preview-bubble{max-width:78%;padding:calc(8px * var(--chat-scale)) calc(9px * var(--chat-scale));border:1px solid var(--app-border);border-radius:calc(13px * var(--chat-scale));background:var(--app-surface);}
.chat-scale-preview-row.mine .chat-scale-preview-bubble{background:var(--app-blue-soft);}
.chat-scale-preview-bubble strong{display:block;font-size:calc(9.5px * var(--chat-scale));color:var(--app-text);}
.chat-scale-preview-bubble small{display:block;margin-top:2px;font-size:calc(7px * var(--chat-scale));color:var(--app-muted);}
.chat-scale-preview-bubble p{margin:calc(5px * var(--chat-scale)) 0 0;font-size:calc(12px * var(--chat-scale));line-height:1.45;color:var(--app-text);}
@media(max-width:760px){
  .chat-scale-profile-card{margin:8px 0!important;padding:12px!important;}
  .chat-scale-profile-card h2{font-size:16px!important;}
  .chat-scale-preview{padding:8px!important;}
}


/* v0.2.70q — real chat scaling, dark launch handoff, announcement swipe-back. */
.auth-boot{background:#020914!important;}
.auth-boot-logo{transform:scale(.92);}
.auth-boot>small{margin-top:2px!important;}

:root{
  --chat-msg-pad-y:6px;--chat-msg-pad-x:8px;--chat-msg-pad-bottom:15px;--chat-msg-radius:11px;
  --chat-name-size:9.5px;--chat-meta-size:7px;--chat-time-size:6.8px;--chat-badge-size:6px;
  --chat-body-size:10.5px;--chat-avatar-size:24px;--chat-avatar-font:7px;--chat-context-size:7px;--chat-separator-size:7px;
}
.community-message{
  padding:var(--chat-msg-pad-y) var(--chat-msg-pad-x) var(--chat-msg-pad-bottom)!important;
  border-radius:var(--chat-msg-radius) var(--chat-msg-radius) var(--chat-msg-radius) 4px!important;
}
.community-message.mine{border-radius:var(--chat-msg-radius) var(--chat-msg-radius) 4px var(--chat-msg-radius)!important;}
.community-message-head strong{font-size:var(--chat-name-size)!important;}
.community-message-head small{font-size:var(--chat-meta-size)!important;}
.community-message-head time{font-size:var(--chat-time-size)!important;}
.community-message-head span{font-size:var(--chat-badge-size)!important;}
.community-message>p{font-size:var(--chat-body-size)!important;line-height:1.32!important;}
.chat-avatar{width:var(--chat-avatar-size)!important;height:var(--chat-avatar-size)!important;min-width:var(--chat-avatar-size)!important;font-size:var(--chat-avatar-font)!important;}
.chat-reply-preview strong,.chat-reply-preview span,.chat-mention-chip{font-size:var(--chat-context-size)!important;}
.chat-day-separator span,.chat-unread-separator span{font-size:var(--chat-separator-size)!important;}

.chat-scale-preview-bubble{padding:var(--chat-msg-pad-y) var(--chat-msg-pad-x)!important;border-radius:var(--chat-msg-radius)!important;}
.chat-scale-preview-bubble strong{font-size:var(--chat-name-size)!important;}
.chat-scale-preview-bubble small{font-size:var(--chat-meta-size)!important;}
.chat-scale-preview-bubble p{font-size:var(--chat-body-size)!important;}
.chat-scale-preview-avatar{width:var(--chat-avatar-size)!important;height:var(--chat-avatar-size)!important;min-width:var(--chat-avatar-size)!important;font-size:var(--chat-avatar-font)!important;}

html.mobile-device body.chat-open .chat-jump-bottom{
  right:12px!important;
  bottom:calc(var(--chat-compose-height,58px) + 18px)!important;
}
html.mobile-device body.chat-open.chat-input-focused .chat-jump-bottom,
html.mobile-device body.chat-open.chat-keyboard-open .chat-jump-bottom{
  right:12px!important;bottom:calc(var(--chat-compose-height,58px) + 10px)!important;
}


/* v0.2.70r — synchronized frontend build, reliable live chat scale and launch handoff. */
html.auth-pending,html.auth-pending body{background:#020914!important;}
.auth-boot{background:#020914!important;}
.auth-boot-logo{padding:24px 28px;border-radius:28px;background:radial-gradient(circle at 50% 34%,rgba(21,86,145,.32),rgba(2,9,20,.0) 68%);}
@media(max-width:760px){
  html.mobile-device body.chat-open .chat-jump-bottom{right:14px!important;bottom:calc(var(--chat-compose-height,58px) + 38px)!important;}
  html.mobile-device body.chat-open.chat-input-focused .chat-jump-bottom,
  html.mobile-device body.chat-open.chat-keyboard-open .chat-jump-bottom{right:14px!important;bottom:calc(var(--chat-compose-height,58px) + 30px)!important;}
}


/* v0.2.70s — authoritative live chat scale rules. Match the old mobile selector
   specificity so saved scale affects the real conversation, not only preview. */
@media(max-width:760px){
  html.mobile-device body.chat-open .community-message{
    padding:var(--chat-msg-pad-y) var(--chat-msg-pad-x) var(--chat-msg-pad-bottom)!important;
    border-radius:var(--chat-msg-radius) var(--chat-msg-radius) var(--chat-msg-radius) 4px!important;
  }
  html.mobile-device body.chat-open .community-message.mine{border-radius:var(--chat-msg-radius) var(--chat-msg-radius) 4px var(--chat-msg-radius)!important;}
  html.mobile-device body.chat-open .community-message-head strong{font-size:var(--chat-name-size)!important;}
  html.mobile-device body.chat-open .community-message-head small{font-size:var(--chat-meta-size)!important;}
  html.mobile-device body.chat-open .community-message-head time{font-size:var(--chat-time-size)!important;}
  html.mobile-device body.chat-open .community-message-head span{font-size:var(--chat-badge-size)!important;}
  html.mobile-device body.chat-open .community-message>p{font-size:var(--chat-body-size)!important;line-height:1.32!important;}
  html.mobile-device body.chat-open .chat-avatar{width:var(--chat-avatar-size)!important;height:var(--chat-avatar-size)!important;min-width:var(--chat-avatar-size)!important;font-size:var(--chat-avatar-font)!important;}
  html.mobile-device body.chat-open .chat-reply-preview strong,
  html.mobile-device body.chat-open .chat-reply-preview span,
  html.mobile-device body.chat-open .chat-mention-chip{font-size:var(--chat-context-size)!important;}
  html.mobile-device body.chat-open .chat-day-separator span,
  html.mobile-device body.chat-open .chat-unread-separator span{font-size:var(--chat-separator-size)!important;}
  html.mobile-device body.chat-open .chat-jump-bottom{right:14px!important;bottom:calc(var(--chat-compose-height,58px) + 52px)!important;}
  html.mobile-device body.chat-open.chat-input-focused .chat-jump-bottom,
  html.mobile-device body.chat-open.chat-keyboard-open .chat-jump-bottom{right:14px!important;bottom:calc(var(--chat-compose-height,58px) + 44px)!important;}
}


/* v0.2.70t — deterministic chat scale and jump-button final authority. */
.auth-boot{background:#020914!important;}
html.auth-pending,html.auth-pending body{background:#020914!important;}
html.mobile-device body.chat-open .chat-jump-bottom{right:10px!important;}

html[data-chat-scale="80"] body.chat-open #communityChatPage .community-message{padding:4.80px 6.40px 12.00px!important;border-radius:8.80px 8.80px 8.80px 4px!important;}
html[data-chat-scale="80"] body.chat-open #communityChatPage .community-message.mine{border-radius:8.80px 8.80px 4px 8.80px!important;}
html[data-chat-scale="80"] body.chat-open #communityChatPage .community-message-head strong{font-size:7.60px!important;}
html[data-chat-scale="80"] body.chat-open #communityChatPage .community-message-head small{font-size:5.60px!important;}
html[data-chat-scale="80"] body.chat-open #communityChatPage .community-message-head time{font-size:5.44px!important;}
html[data-chat-scale="80"] body.chat-open #communityChatPage .community-message-head>span{font-size:4.80px!important;}
html[data-chat-scale="80"] body.chat-open #communityChatPage .community-message>p{font-size:8.40px!important;line-height:1.34!important;}
html[data-chat-scale="80"] body.chat-open #communityChatPage .chat-avatar{width:19.20px!important;height:19.20px!important;min-width:19.20px!important;font-size:5.60px!important;}
html[data-chat-scale="80"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="80"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="80"] body.chat-open #communityChatPage .chat-mention-chip{font-size:5.60px!important;}
html[data-chat-scale="80"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="80"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:5.60px!important;}

html[data-chat-scale="85"] body.chat-open #communityChatPage .community-message{padding:5.10px 6.80px 12.75px!important;border-radius:9.35px 9.35px 9.35px 4px!important;}
html[data-chat-scale="85"] body.chat-open #communityChatPage .community-message.mine{border-radius:9.35px 9.35px 4px 9.35px!important;}
html[data-chat-scale="85"] body.chat-open #communityChatPage .community-message-head strong{font-size:8.07px!important;}
html[data-chat-scale="85"] body.chat-open #communityChatPage .community-message-head small{font-size:5.95px!important;}
html[data-chat-scale="85"] body.chat-open #communityChatPage .community-message-head time{font-size:5.78px!important;}
html[data-chat-scale="85"] body.chat-open #communityChatPage .community-message-head>span{font-size:5.10px!important;}
html[data-chat-scale="85"] body.chat-open #communityChatPage .community-message>p{font-size:8.92px!important;line-height:1.34!important;}
html[data-chat-scale="85"] body.chat-open #communityChatPage .chat-avatar{width:20.40px!important;height:20.40px!important;min-width:20.40px!important;font-size:5.95px!important;}
html[data-chat-scale="85"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="85"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="85"] body.chat-open #communityChatPage .chat-mention-chip{font-size:5.95px!important;}
html[data-chat-scale="85"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="85"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:5.95px!important;}

html[data-chat-scale="90"] body.chat-open #communityChatPage .community-message{padding:5.40px 7.20px 13.50px!important;border-radius:9.90px 9.90px 9.90px 4px!important;}
html[data-chat-scale="90"] body.chat-open #communityChatPage .community-message.mine{border-radius:9.90px 9.90px 4px 9.90px!important;}
html[data-chat-scale="90"] body.chat-open #communityChatPage .community-message-head strong{font-size:8.55px!important;}
html[data-chat-scale="90"] body.chat-open #communityChatPage .community-message-head small{font-size:6.30px!important;}
html[data-chat-scale="90"] body.chat-open #communityChatPage .community-message-head time{font-size:6.12px!important;}
html[data-chat-scale="90"] body.chat-open #communityChatPage .community-message-head>span{font-size:5.40px!important;}
html[data-chat-scale="90"] body.chat-open #communityChatPage .community-message>p{font-size:9.45px!important;line-height:1.34!important;}
html[data-chat-scale="90"] body.chat-open #communityChatPage .chat-avatar{width:21.60px!important;height:21.60px!important;min-width:21.60px!important;font-size:6.30px!important;}
html[data-chat-scale="90"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="90"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="90"] body.chat-open #communityChatPage .chat-mention-chip{font-size:6.30px!important;}
html[data-chat-scale="90"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="90"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:6.30px!important;}

html[data-chat-scale="95"] body.chat-open #communityChatPage .community-message{padding:5.70px 7.60px 14.25px!important;border-radius:10.45px 10.45px 10.45px 4px!important;}
html[data-chat-scale="95"] body.chat-open #communityChatPage .community-message.mine{border-radius:10.45px 10.45px 4px 10.45px!important;}
html[data-chat-scale="95"] body.chat-open #communityChatPage .community-message-head strong{font-size:9.03px!important;}
html[data-chat-scale="95"] body.chat-open #communityChatPage .community-message-head small{font-size:6.65px!important;}
html[data-chat-scale="95"] body.chat-open #communityChatPage .community-message-head time{font-size:6.46px!important;}
html[data-chat-scale="95"] body.chat-open #communityChatPage .community-message-head>span{font-size:5.70px!important;}
html[data-chat-scale="95"] body.chat-open #communityChatPage .community-message>p{font-size:9.97px!important;line-height:1.34!important;}
html[data-chat-scale="95"] body.chat-open #communityChatPage .chat-avatar{width:22.80px!important;height:22.80px!important;min-width:22.80px!important;font-size:6.65px!important;}
html[data-chat-scale="95"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="95"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="95"] body.chat-open #communityChatPage .chat-mention-chip{font-size:6.65px!important;}
html[data-chat-scale="95"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="95"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:6.65px!important;}

html[data-chat-scale="100"] body.chat-open #communityChatPage .community-message{padding:6.00px 8.00px 15.00px!important;border-radius:11.00px 11.00px 11.00px 4px!important;}
html[data-chat-scale="100"] body.chat-open #communityChatPage .community-message.mine{border-radius:11.00px 11.00px 4px 11.00px!important;}
html[data-chat-scale="100"] body.chat-open #communityChatPage .community-message-head strong{font-size:9.50px!important;}
html[data-chat-scale="100"] body.chat-open #communityChatPage .community-message-head small{font-size:7.00px!important;}
html[data-chat-scale="100"] body.chat-open #communityChatPage .community-message-head time{font-size:6.80px!important;}
html[data-chat-scale="100"] body.chat-open #communityChatPage .community-message-head>span{font-size:6.00px!important;}
html[data-chat-scale="100"] body.chat-open #communityChatPage .community-message>p{font-size:10.50px!important;line-height:1.34!important;}
html[data-chat-scale="100"] body.chat-open #communityChatPage .chat-avatar{width:24.00px!important;height:24.00px!important;min-width:24.00px!important;font-size:7.00px!important;}
html[data-chat-scale="100"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="100"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="100"] body.chat-open #communityChatPage .chat-mention-chip{font-size:7.00px!important;}
html[data-chat-scale="100"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="100"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:7.00px!important;}

html[data-chat-scale="105"] body.chat-open #communityChatPage .community-message{padding:6.30px 8.40px 15.75px!important;border-radius:11.55px 11.55px 11.55px 4px!important;}
html[data-chat-scale="105"] body.chat-open #communityChatPage .community-message.mine{border-radius:11.55px 11.55px 4px 11.55px!important;}
html[data-chat-scale="105"] body.chat-open #communityChatPage .community-message-head strong{font-size:9.97px!important;}
html[data-chat-scale="105"] body.chat-open #communityChatPage .community-message-head small{font-size:7.35px!important;}
html[data-chat-scale="105"] body.chat-open #communityChatPage .community-message-head time{font-size:7.14px!important;}
html[data-chat-scale="105"] body.chat-open #communityChatPage .community-message-head>span{font-size:6.30px!important;}
html[data-chat-scale="105"] body.chat-open #communityChatPage .community-message>p{font-size:11.03px!important;line-height:1.34!important;}
html[data-chat-scale="105"] body.chat-open #communityChatPage .chat-avatar{width:25.20px!important;height:25.20px!important;min-width:25.20px!important;font-size:7.35px!important;}
html[data-chat-scale="105"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="105"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="105"] body.chat-open #communityChatPage .chat-mention-chip{font-size:7.35px!important;}
html[data-chat-scale="105"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="105"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:7.35px!important;}

html[data-chat-scale="110"] body.chat-open #communityChatPage .community-message{padding:6.60px 8.80px 16.50px!important;border-radius:12.10px 12.10px 12.10px 4px!important;}
html[data-chat-scale="110"] body.chat-open #communityChatPage .community-message.mine{border-radius:12.10px 12.10px 4px 12.10px!important;}
html[data-chat-scale="110"] body.chat-open #communityChatPage .community-message-head strong{font-size:10.45px!important;}
html[data-chat-scale="110"] body.chat-open #communityChatPage .community-message-head small{font-size:7.70px!important;}
html[data-chat-scale="110"] body.chat-open #communityChatPage .community-message-head time{font-size:7.48px!important;}
html[data-chat-scale="110"] body.chat-open #communityChatPage .community-message-head>span{font-size:6.60px!important;}
html[data-chat-scale="110"] body.chat-open #communityChatPage .community-message>p{font-size:11.55px!important;line-height:1.34!important;}
html[data-chat-scale="110"] body.chat-open #communityChatPage .chat-avatar{width:26.40px!important;height:26.40px!important;min-width:26.40px!important;font-size:7.70px!important;}
html[data-chat-scale="110"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="110"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="110"] body.chat-open #communityChatPage .chat-mention-chip{font-size:7.70px!important;}
html[data-chat-scale="110"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="110"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:7.70px!important;}

html[data-chat-scale="115"] body.chat-open #communityChatPage .community-message{padding:6.90px 9.20px 17.25px!important;border-radius:12.65px 12.65px 12.65px 4px!important;}
html[data-chat-scale="115"] body.chat-open #communityChatPage .community-message.mine{border-radius:12.65px 12.65px 4px 12.65px!important;}
html[data-chat-scale="115"] body.chat-open #communityChatPage .community-message-head strong{font-size:10.92px!important;}
html[data-chat-scale="115"] body.chat-open #communityChatPage .community-message-head small{font-size:8.05px!important;}
html[data-chat-scale="115"] body.chat-open #communityChatPage .community-message-head time{font-size:7.82px!important;}
html[data-chat-scale="115"] body.chat-open #communityChatPage .community-message-head>span{font-size:6.90px!important;}
html[data-chat-scale="115"] body.chat-open #communityChatPage .community-message>p{font-size:12.07px!important;line-height:1.34!important;}
html[data-chat-scale="115"] body.chat-open #communityChatPage .chat-avatar{width:27.60px!important;height:27.60px!important;min-width:27.60px!important;font-size:8.05px!important;}
html[data-chat-scale="115"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="115"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="115"] body.chat-open #communityChatPage .chat-mention-chip{font-size:8.05px!important;}
html[data-chat-scale="115"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="115"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:8.05px!important;}

html[data-chat-scale="120"] body.chat-open #communityChatPage .community-message{padding:7.20px 9.60px 18.00px!important;border-radius:13.20px 13.20px 13.20px 4px!important;}
html[data-chat-scale="120"] body.chat-open #communityChatPage .community-message.mine{border-radius:13.20px 13.20px 4px 13.20px!important;}
html[data-chat-scale="120"] body.chat-open #communityChatPage .community-message-head strong{font-size:11.40px!important;}
html[data-chat-scale="120"] body.chat-open #communityChatPage .community-message-head small{font-size:8.40px!important;}
html[data-chat-scale="120"] body.chat-open #communityChatPage .community-message-head time{font-size:8.16px!important;}
html[data-chat-scale="120"] body.chat-open #communityChatPage .community-message-head>span{font-size:7.20px!important;}
html[data-chat-scale="120"] body.chat-open #communityChatPage .community-message>p{font-size:12.60px!important;line-height:1.34!important;}
html[data-chat-scale="120"] body.chat-open #communityChatPage .chat-avatar{width:28.80px!important;height:28.80px!important;min-width:28.80px!important;font-size:8.40px!important;}
html[data-chat-scale="120"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="120"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="120"] body.chat-open #communityChatPage .chat-mention-chip{font-size:8.40px!important;}
html[data-chat-scale="120"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="120"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:8.40px!important;}

html[data-chat-scale="125"] body.chat-open #communityChatPage .community-message{padding:7.50px 10.00px 18.75px!important;border-radius:13.75px 13.75px 13.75px 4px!important;}
html[data-chat-scale="125"] body.chat-open #communityChatPage .community-message.mine{border-radius:13.75px 13.75px 4px 13.75px!important;}
html[data-chat-scale="125"] body.chat-open #communityChatPage .community-message-head strong{font-size:11.88px!important;}
html[data-chat-scale="125"] body.chat-open #communityChatPage .community-message-head small{font-size:8.75px!important;}
html[data-chat-scale="125"] body.chat-open #communityChatPage .community-message-head time{font-size:8.50px!important;}
html[data-chat-scale="125"] body.chat-open #communityChatPage .community-message-head>span{font-size:7.50px!important;}
html[data-chat-scale="125"] body.chat-open #communityChatPage .community-message>p{font-size:13.12px!important;line-height:1.34!important;}
html[data-chat-scale="125"] body.chat-open #communityChatPage .chat-avatar{width:30.00px!important;height:30.00px!important;min-width:30.00px!important;font-size:8.75px!important;}
html[data-chat-scale="125"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="125"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="125"] body.chat-open #communityChatPage .chat-mention-chip{font-size:8.75px!important;}
html[data-chat-scale="125"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="125"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:8.75px!important;}

html[data-chat-scale="130"] body.chat-open #communityChatPage .community-message{padding:7.80px 10.40px 19.50px!important;border-radius:14.30px 14.30px 14.30px 4px!important;}
html[data-chat-scale="130"] body.chat-open #communityChatPage .community-message.mine{border-radius:14.30px 14.30px 4px 14.30px!important;}
html[data-chat-scale="130"] body.chat-open #communityChatPage .community-message-head strong{font-size:12.35px!important;}
html[data-chat-scale="130"] body.chat-open #communityChatPage .community-message-head small{font-size:9.10px!important;}
html[data-chat-scale="130"] body.chat-open #communityChatPage .community-message-head time{font-size:8.84px!important;}
html[data-chat-scale="130"] body.chat-open #communityChatPage .community-message-head>span{font-size:7.80px!important;}
html[data-chat-scale="130"] body.chat-open #communityChatPage .community-message>p{font-size:13.65px!important;line-height:1.34!important;}
html[data-chat-scale="130"] body.chat-open #communityChatPage .chat-avatar{width:31.20px!important;height:31.20px!important;min-width:31.20px!important;font-size:9.10px!important;}
html[data-chat-scale="130"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="130"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="130"] body.chat-open #communityChatPage .chat-mention-chip{font-size:9.10px!important;}
html[data-chat-scale="130"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="130"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:9.10px!important;}

html[data-chat-scale="135"] body.chat-open #communityChatPage .community-message{padding:8.10px 10.80px 20.25px!important;border-radius:14.85px 14.85px 14.85px 4px!important;}
html[data-chat-scale="135"] body.chat-open #communityChatPage .community-message.mine{border-radius:14.85px 14.85px 4px 14.85px!important;}
html[data-chat-scale="135"] body.chat-open #communityChatPage .community-message-head strong{font-size:12.83px!important;}
html[data-chat-scale="135"] body.chat-open #communityChatPage .community-message-head small{font-size:9.45px!important;}
html[data-chat-scale="135"] body.chat-open #communityChatPage .community-message-head time{font-size:9.18px!important;}
html[data-chat-scale="135"] body.chat-open #communityChatPage .community-message-head>span{font-size:8.10px!important;}
html[data-chat-scale="135"] body.chat-open #communityChatPage .community-message>p{font-size:14.18px!important;line-height:1.34!important;}
html[data-chat-scale="135"] body.chat-open #communityChatPage .chat-avatar{width:32.40px!important;height:32.40px!important;min-width:32.40px!important;font-size:9.45px!important;}
html[data-chat-scale="135"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="135"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="135"] body.chat-open #communityChatPage .chat-mention-chip{font-size:9.45px!important;}
html[data-chat-scale="135"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="135"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:9.45px!important;}

html[data-chat-scale="140"] body.chat-open #communityChatPage .community-message{padding:8.40px 11.20px 21.00px!important;border-radius:15.40px 15.40px 15.40px 4px!important;}
html[data-chat-scale="140"] body.chat-open #communityChatPage .community-message.mine{border-radius:15.40px 15.40px 4px 15.40px!important;}
html[data-chat-scale="140"] body.chat-open #communityChatPage .community-message-head strong{font-size:13.30px!important;}
html[data-chat-scale="140"] body.chat-open #communityChatPage .community-message-head small{font-size:9.80px!important;}
html[data-chat-scale="140"] body.chat-open #communityChatPage .community-message-head time{font-size:9.52px!important;}
html[data-chat-scale="140"] body.chat-open #communityChatPage .community-message-head>span{font-size:8.40px!important;}
html[data-chat-scale="140"] body.chat-open #communityChatPage .community-message>p{font-size:14.70px!important;line-height:1.34!important;}
html[data-chat-scale="140"] body.chat-open #communityChatPage .chat-avatar{width:33.60px!important;height:33.60px!important;min-width:33.60px!important;font-size:9.80px!important;}
html[data-chat-scale="140"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="140"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="140"] body.chat-open #communityChatPage .chat-mention-chip{font-size:9.80px!important;}
html[data-chat-scale="140"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="140"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:9.80px!important;}

html[data-chat-scale="145"] body.chat-open #communityChatPage .community-message{padding:8.70px 11.60px 21.75px!important;border-radius:15.95px 15.95px 15.95px 4px!important;}
html[data-chat-scale="145"] body.chat-open #communityChatPage .community-message.mine{border-radius:15.95px 15.95px 4px 15.95px!important;}
html[data-chat-scale="145"] body.chat-open #communityChatPage .community-message-head strong{font-size:13.78px!important;}
html[data-chat-scale="145"] body.chat-open #communityChatPage .community-message-head small{font-size:10.15px!important;}
html[data-chat-scale="145"] body.chat-open #communityChatPage .community-message-head time{font-size:9.86px!important;}
html[data-chat-scale="145"] body.chat-open #communityChatPage .community-message-head>span{font-size:8.70px!important;}
html[data-chat-scale="145"] body.chat-open #communityChatPage .community-message>p{font-size:15.22px!important;line-height:1.34!important;}
html[data-chat-scale="145"] body.chat-open #communityChatPage .chat-avatar{width:34.80px!important;height:34.80px!important;min-width:34.80px!important;font-size:10.15px!important;}
html[data-chat-scale="145"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="145"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="145"] body.chat-open #communityChatPage .chat-mention-chip{font-size:10.15px!important;}
html[data-chat-scale="145"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="145"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:10.15px!important;}

html[data-chat-scale="150"] body.chat-open #communityChatPage .community-message{padding:9.00px 12.00px 22.50px!important;border-radius:16.50px 16.50px 16.50px 4px!important;}
html[data-chat-scale="150"] body.chat-open #communityChatPage .community-message.mine{border-radius:16.50px 16.50px 4px 16.50px!important;}
html[data-chat-scale="150"] body.chat-open #communityChatPage .community-message-head strong{font-size:14.25px!important;}
html[data-chat-scale="150"] body.chat-open #communityChatPage .community-message-head small{font-size:10.50px!important;}
html[data-chat-scale="150"] body.chat-open #communityChatPage .community-message-head time{font-size:10.20px!important;}
html[data-chat-scale="150"] body.chat-open #communityChatPage .community-message-head>span{font-size:9.00px!important;}
html[data-chat-scale="150"] body.chat-open #communityChatPage .community-message>p{font-size:15.75px!important;line-height:1.34!important;}
html[data-chat-scale="150"] body.chat-open #communityChatPage .chat-avatar{width:36.00px!important;height:36.00px!important;min-width:36.00px!important;font-size:10.50px!important;}
html[data-chat-scale="150"] body.chat-open #communityChatPage .chat-reply-preview strong,html[data-chat-scale="150"] body.chat-open #communityChatPage .chat-reply-preview span,html[data-chat-scale="150"] body.chat-open #communityChatPage .chat-mention-chip{font-size:10.50px!important;}
html[data-chat-scale="150"] body.chat-open #communityChatPage .chat-day-separator span,html[data-chat-scale="150"] body.chat-open #communityChatPage .chat-unread-separator span{font-size:10.50px!important;}


/* v0.2.70v — iOS login viewport/root-canvas fix.
   Safari can finish calculating the visual viewport after first paint. If only
   the fixed .background owns the image, the root canvas can briefly show as a
   white strip below it until the page is nudged. Paint the same scene on the
   root canvas and size the login shell from visualViewport as well. */
html.mobile-device.login-active{
  min-height:100%;
  background-color:#10131c!important;
  background-image:url('/assets/vtr24-bg-light.jpg')!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
}
html[data-theme="dark"].mobile-device.login-active{
  background-color:#020914!important;
  background-image:url('/assets/vtr24-bg-dark.png')!important;
}
html.mobile-device.login-active body:not(.app-mode){
  min-height:var(--auth-visual-height,100svh)!important;
  background:transparent!important;
  overscroll-behavior-y:none;
}
html.mobile-device.login-active body:not(.app-mode) .page-shell{
  min-height:var(--auth-visual-height,100svh)!important;
}
html.mobile-device.login-active body:not(.app-mode) .background,
html.mobile-device.login-active body:not(.app-mode) .background-overlay{
  top:0!important;
  right:0!important;
  bottom:auto!important;
  left:0!important;
  width:100%!important;
  height:var(--auth-visual-height,100svh)!important;
  min-height:var(--auth-visual-height,100svh)!important;
}
@supports (-webkit-touch-callout:none){
  html.mobile-device.login-active,
  html.mobile-device.login-active body:not(.app-mode){
    width:100%!important;
    max-width:100%!important;
  }
  html.mobile-device.login-active body:not(.app-mode) .page-shell{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
}

/* v0.2.72-rc2 — persistent light/dark per-UK branding + temporary campaigns */
html[data-theme="light"] body.branding-login-light-custom .background{
  background-image:var(--branding-login-light-image)!important;
  background-position:var(--branding-login-light-x,50%) var(--branding-login-light-y,50%)!important;
  background-size:cover!important;background-repeat:no-repeat!important;
}
html[data-theme="dark"] body.branding-login-dark-custom .background{
  background-image:var(--branding-login-dark-image)!important;
  background-position:var(--branding-login-dark-x,50%) var(--branding-login-dark-y,50%)!important;
  background-size:cover!important;background-repeat:no-repeat!important;
}
html[data-theme="light"] body.branding-home-light-custom .dashboard-weather-card::before,
html[data-theme="light"] body.branding-home-light-custom .owner-weather-hero::before{
  background-image:var(--branding-home-light-image)!important;
  background-position:var(--branding-home-light-x,50%) var(--branding-home-light-y,50%)!important;
  background-size:cover!important;background-repeat:no-repeat!important;
}
html[data-theme="dark"] body.branding-home-dark-custom .dashboard-weather-card::before,
html[data-theme="dark"] body.branding-home-dark-custom .owner-weather-hero::before{
  background-image:var(--branding-home-dark-image)!important;
  background-position:var(--branding-home-dark-x,50%) var(--branding-home-dark-y,50%)!important;
  background-size:cover!important;background-repeat:no-repeat!important;
}
html[data-theme="light"]:not(.mobile-device) body.branding-home-light-custom .desktop-sidebar-photo{
  background-image:linear-gradient(180deg,transparent,color-mix(in srgb,var(--app-surface) 92%,transparent)),var(--branding-home-light-image)!important;
  background-position:var(--branding-home-light-x,50%) var(--branding-home-light-y,50%)!important;background-size:cover!important;
}
html[data-theme="dark"]:not(.mobile-device) body.branding-home-dark-custom .desktop-sidebar-photo{
  background-image:linear-gradient(180deg,transparent,#102948 98%),var(--branding-home-dark-image)!important;
  background-position:var(--branding-home-dark-x,50%) var(--branding-home-dark-y,50%)!important;background-size:cover!important;
}
body.branding-logo-custom .app-logo-mark,
body.branding-logo-custom .brand-mark,
body.branding-logo-custom .auth-boot-mark{
  background-image:var(--branding-logo-image)!important;background-size:contain!important;background-repeat:no-repeat!important;
  background-position:var(--branding-logo-x,50%) var(--branding-logo-y,50%)!important;transform:none!important;
}
body.branding-logo-custom .app-logo-mark>span,
body.branding-logo-custom .brand-mark>span,
body.branding-logo-custom .auth-boot-mark>span{display:none!important}
body.branding-logo-custom .brand-mark{width:104px!important;height:92px!important}
body.branding-logo-custom .app-logo-mark{min-width:34px;min-height:38px}
body.branding-logo-custom .auth-boot-mark{width:74px!important;height:74px!important}

.branding-settings-panel,.branding-campaign-panel{overflow:visible}
.branding-help-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0 18px}
.branding-help-grid article{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface-soft)}
.branding-help-grid b,.branding-group-heading>b{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--app-blue) 14%,transparent);color:var(--app-blue)}
.branding-help-grid strong,.branding-help-grid small{display:block}.branding-help-grid small{margin-top:4px;color:var(--app-muted);line-height:1.35}
.branding-permanent-grid{display:grid;gap:14px}
.branding-position-group{display:grid;gap:10px;padding:13px;border:1px solid var(--app-border);border-radius:17px;background:color-mix(in srgb,var(--app-surface-soft) 84%,transparent)}
.branding-group-heading{display:flex;gap:10px;align-items:flex-start}.branding-group-heading strong,.branding-group-heading small{display:block}.branding-group-heading small{margin-top:3px;color:var(--app-muted);font-size:10px;line-height:1.35}
.branding-logo-group .branding-asset-card{max-width:520px}
.branding-theme-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.branding-theme-label{width:max-content;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--app-blue) 10%,var(--app-surface-strong));color:var(--app-text);font-size:9px;font-weight:800}
.branding-asset-card{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px solid var(--app-border);border-radius:16px;background:var(--app-surface-soft);min-width:0}
.branding-preview{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:12px;border:1px solid var(--app-border);background:linear-gradient(135deg,color-mix(in srgb,var(--app-blue) 7%,var(--app-surface)),var(--app-surface-strong));display:grid;place-items:center;color:var(--app-muted);font-size:10px;text-align:center}
.branding-preview.logo-preview{aspect-ratio:16/9;background:linear-gradient(135deg,#0a2340,#112d51)}
.branding-preview img{width:100%;height:100%;display:block;object-fit:cover}.branding-preview.logo-preview img{object-fit:contain;padding:14px}
.branding-default-logo{display:flex;align-items:center;justify-content:center;gap:12px;color:#fff}.branding-default-mark{height:38px;display:flex;align-items:flex-end;gap:3px}.branding-default-mark span{display:block;width:4px;border:2px solid currentColor;border-bottom:0;transform:skewY(-28deg)}.branding-default-mark span:nth-child(1){height:20px}.branding-default-mark span:nth-child(2){height:34px}.branding-default-mark span:nth-child(3){height:26px}.branding-default-logo>strong{font-size:15px;letter-spacing:.08em}
.branding-asset-copy strong,.branding-asset-copy small{display:block}.branding-asset-copy small{margin-top:3px;color:var(--app-muted);font-size:10px;line-height:1.35}
.branding-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}.branding-card-actions .file-picker-button{margin:0}
.branding-position{display:grid;gap:7px;padding:8px 9px;border-radius:11px;background:var(--app-surface-strong)}
.branding-position label{display:grid;grid-template-columns:88px minmax(0,1fr);gap:8px;align-items:center;font-size:9px;color:var(--app-muted)}
.branding-position input[type="range"]{width:100%;accent-color:var(--app-blue)}.branding-position.compact label{grid-template-columns:16px minmax(0,1fr)}
.branding-campaign-master{display:flex;gap:7px;align-items:center;font-size:10px;font-weight:700;color:var(--app-text)}.branding-campaign-master input,.branding-enabled-create input{accent-color:var(--app-blue)}
.branding-campaign-create{display:grid;grid-template-columns:minmax(180px,1.4fr) minmax(160px,1fr) minmax(160px,1fr) auto auto;gap:10px;align-items:end;margin:12px 0}
.branding-campaign-create>label:not(.branding-enabled-create),.branding-campaign-dates label{display:grid;gap:5px;font-size:9px;color:var(--app-muted)}
.branding-campaign-create input[type="text"],.branding-campaign-create input:not([type]),.branding-campaign-create input[type="datetime-local"],.branding-campaign-dates input,.branding-campaign-title{height:39px;border:1px solid var(--app-border);border-radius:10px;padding:0 10px;background:var(--app-surface-strong);color:var(--app-text);min-width:0}
.branding-enabled-create{display:flex;align-items:center;gap:6px;min-height:39px;font-size:9px;font-weight:700;color:var(--app-text)}
.branding-active-note{padding:10px 12px;border-radius:11px;background:color-mix(in srgb,var(--app-blue) 9%,var(--app-surface));color:var(--app-text);font-size:10px;font-weight:700;margin-bottom:10px}
.branding-campaign-list{display:grid;gap:12px}.branding-campaign-card{border:1px solid var(--app-border);border-radius:16px;padding:13px;background:var(--app-surface-soft)}
.branding-campaign-card.active{border-color:color-mix(in srgb,var(--app-blue) 58%,var(--app-border));box-shadow:0 0 0 1px color-mix(in srgb,var(--app-blue) 12%,transparent)}
.branding-campaign-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.branding-campaign-head>div:first-child{min-width:0;flex:1}.branding-campaign-title{width:min(420px,100%);font-size:14px;font-weight:800}
.branding-campaign-head-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.branding-campaign-head-actions label{font-size:10px;font-weight:700;display:flex;gap:6px;align-items:center}
.branding-campaign-dates{display:grid;grid-template-columns:minmax(170px,1fr) minmax(170px,1fr) auto;gap:10px;align-items:end;margin:12px 0}
.branding-campaign-assets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.branding-campaign-asset{display:flex;flex-direction:column;gap:8px;padding:10px;border:1px solid var(--app-border);border-radius:13px;background:var(--app-surface)}.branding-campaign-asset>strong{font-size:10px}
.branding-campaign-asset:first-child{grid-column:1/-1;max-width:520px}.branding-campaign-fallback-note{margin-top:10px;padding:9px 10px;border-radius:10px;background:var(--app-surface-strong);font-size:9px;line-height:1.4;color:var(--app-muted)}
@media(max-width:900px){.branding-theme-pair,.branding-campaign-assets{grid-template-columns:1fr}.branding-help-grid{grid-template-columns:1fr}.branding-campaign-create{grid-template-columns:1fr 1fr}.branding-campaign-create>:first-child{grid-column:1/-1}.branding-campaign-head{align-items:flex-start;flex-direction:column}.branding-campaign-dates{grid-template-columns:1fr 1fr}.branding-campaign-dates .branding-campaign-save{grid-column:1/-1}.branding-campaign-asset:first-child{grid-column:auto;max-width:none}}
@media(max-width:620px){.branding-campaign-create,.branding-campaign-dates{grid-template-columns:1fr}.branding-campaign-create>:first-child,.branding-campaign-dates .branding-campaign-save{grid-column:auto}.branding-campaign-panel,.branding-settings-panel{padding:12px!important}.branding-campaign-head-actions{width:100%;justify-content:space-between}.branding-preview{aspect-ratio:16/8.5}.branding-position-group{padding:10px}}

/* v0.2.72-rc4 — direct drag positioning + real desktop/mobile previews */
html:not(.mobile-device)[data-theme="light"] body.branding-login-light-custom .background{
  background-position:var(--branding-login-light-desktop-x,50%) var(--branding-login-light-desktop-y,50%)!important;
}
html:not(.mobile-device)[data-theme="dark"] body.branding-login-dark-custom .background{
  background-position:var(--branding-login-dark-desktop-x,50%) var(--branding-login-dark-desktop-y,50%)!important;
}
html.mobile-device[data-theme="light"] body.branding-login-light-custom .background{
  background-position:var(--branding-login-light-mobile-x,50%) var(--branding-login-light-mobile-y,50%)!important;
}
html.mobile-device[data-theme="dark"] body.branding-login-dark-custom .background{
  background-position:var(--branding-login-dark-mobile-x,50%) var(--branding-login-dark-mobile-y,50%)!important;
}
html:not(.mobile-device)[data-theme="light"] body.branding-home-light-custom .dashboard-weather-card::before,
html:not(.mobile-device)[data-theme="light"] body.branding-home-light-custom .owner-weather-hero::before{
  background-position:var(--branding-home-light-desktop-x,50%) var(--branding-home-light-desktop-y,50%)!important;
}
html:not(.mobile-device)[data-theme="dark"] body.branding-home-dark-custom .dashboard-weather-card::before,
html:not(.mobile-device)[data-theme="dark"] body.branding-home-dark-custom .owner-weather-hero::before{
  background-position:var(--branding-home-dark-desktop-x,50%) var(--branding-home-dark-desktop-y,50%)!important;
}
html.mobile-device[data-theme="light"] body.branding-home-light-custom .dashboard-weather-card::before,
html.mobile-device[data-theme="light"] body.branding-home-light-custom .owner-weather-hero::before{
  background-position:var(--branding-home-light-mobile-x,50%) var(--branding-home-light-mobile-y,50%)!important;
}
html.mobile-device[data-theme="dark"] body.branding-home-dark-custom .dashboard-weather-card::before,
html.mobile-device[data-theme="dark"] body.branding-home-dark-custom .owner-weather-hero::before{
  background-position:var(--branding-home-dark-mobile-x,50%) var(--branding-home-dark-mobile-y,50%)!important;
}
html[data-theme="light"]:not(.mobile-device) body.branding-home-light-custom .desktop-sidebar-photo{
  background-position:var(--branding-home-light-desktop-x,50%) var(--branding-home-light-desktop-y,50%)!important;
}
html[data-theme="dark"]:not(.mobile-device) body.branding-home-dark-custom .desktop-sidebar-photo{
  background-position:var(--branding-home-dark-desktop-x,50%) var(--branding-home-dark-desktop-y,50%)!important;
}

.branding-editor-mount{min-width:0}
.branding-crop-editor{display:grid;gap:8px;min-width:0}
.branding-editor-toolbar,.branding-editor-footer{display:flex;align-items:center;justify-content:space-between;gap:9px;flex-wrap:wrap}
.branding-editor-toolbar>span{font-size:9px;color:var(--app-muted);line-height:1.3}
.branding-device-switch{display:inline-flex;padding:2px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface-strong)}
.branding-device-switch button{border:0;background:transparent;color:var(--app-muted);font-size:9px;font-weight:800;padding:6px 10px;border-radius:8px;cursor:pointer}
.branding-device-switch button.active{background:var(--app-blue);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--app-blue) 24%,transparent)}
.branding-editor-stage{position:relative;width:100%;overflow:hidden;border:1px solid var(--app-border);border-radius:13px;background-color:#102235;background-size:cover;background-repeat:no-repeat;cursor:grab;user-select:none;touch-action:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)}
.branding-editor-stage.is-dragging{cursor:grabbing;box-shadow:0 0 0 2px color-mix(in srgb,var(--app-blue) 58%,transparent)}
.branding-editor-stage.is-login{aspect-ratio:16/9;min-height:190px}
.branding-editor-stage.is-home{aspect-ratio:2.78/1;min-height:128px}
.branding-crop-editor.preview-mobile .branding-editor-stage.is-login{width:min(260px,100%);aspect-ratio:9/16;min-height:420px;margin-inline:auto}
.branding-crop-editor.preview-mobile .branding-editor-stage.is-home{aspect-ratio:2.12/1;min-height:150px}
.branding-editor-stage.is-empty{display:grid;place-items:center;cursor:default;background:linear-gradient(135deg,color-mix(in srgb,var(--app-blue) 7%,var(--app-surface)),var(--app-surface-strong))}
.branding-editor-empty{padding:18px;text-align:center;color:var(--app-muted);font-size:10px}
.branding-editor-footer{font-size:9px;color:var(--app-muted)}
.branding-editor-footer>div{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.branding-editor-footer button[disabled]{opacity:.45;pointer-events:none}
.branding-position-readout{font-variant-numeric:tabular-nums;font-weight:700;color:var(--app-text)}

.branding-login-mock{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,18,33,.16),rgba(3,18,33,.05));pointer-events:none}
.branding-login-card{position:absolute;right:7%;top:50%;transform:translateY(-50%);width:31%;min-width:150px;padding:14px;border-radius:14px;background:rgba(250,253,255,.92);box-shadow:0 14px 38px rgba(0,0,0,.24);backdrop-filter:blur(5px);color:#14314d;display:flex;flex-direction:column;align-items:center;gap:5px}
.branding-editor-stage.theme-dark .branding-login-card{background:rgba(8,24,43,.91);color:#eef7ff;border:1px solid rgba(130,202,255,.18)}
.branding-login-mark{height:28px;display:flex;align-items:flex-end;gap:2px;color:#1687e9}.branding-login-mark span{display:block;width:3px;border:1.5px solid currentColor;border-bottom:0;transform:skewY(-27deg)}.branding-login-mark span:nth-child(1){height:14px}.branding-login-mark span:nth-child(2){height:25px}.branding-login-mark span:nth-child(3){height:19px}
.branding-login-card>strong{font-size:12px;letter-spacing:.05em}.branding-login-card>small{font-size:6px;opacity:.65}.branding-login-card>i{display:block;width:88%;height:12px;border:1px solid currentColor;border-radius:5px;opacity:.18}.branding-login-card>button{width:88%;height:16px;border:0;border-radius:5px;background:#1687e9;color:white;font-size:6px}
.branding-crop-editor.preview-mobile .branding-login-card{right:50%;top:auto;bottom:9%;transform:translateX(50%);width:76%;min-width:0;padding:12px}
.branding-crop-editor.preview-mobile .branding-login-card>i,.branding-crop-editor.preview-mobile .branding-login-card>button{width:92%}

.branding-home-mock{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;padding:13px;background:linear-gradient(90deg,rgba(6,33,59,.84),rgba(9,53,88,.42) 60%,rgba(5,22,38,.08));color:#fff;pointer-events:none;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.branding-home-mock>div:first-child{align-self:start;display:flex;flex-direction:column;gap:2px}.branding-home-mock span{font-size:7px;letter-spacing:.12em;color:#9cd7ff;font-weight:800}.branding-home-mock>div:first-child>strong{font-size:20px}.branding-home-mock small{font-size:7px;color:rgba(235,246,255,.8)}
.branding-weather-mock{display:grid;grid-template-columns:auto auto;grid-template-areas:'icon temp' 'icon text';align-items:end;column-gap:6px}.branding-weather-mock>b{grid-area:icon;font-size:24px}.branding-weather-mock>strong{grid-area:temp;font-size:24px;line-height:1}.branding-weather-mock>small{grid-area:text;text-align:right;color:white}
.branding-crop-editor.preview-mobile .branding-home-mock{padding:14px}.branding-crop-editor.preview-mobile .branding-home-mock>div:first-child>strong{font-size:23px}.branding-crop-editor.preview-mobile .branding-weather-mock>strong{font-size:28px}.branding-crop-editor.preview-mobile .branding-weather-mock>b{font-size:27px}

.branding-campaign-asset .branding-crop-editor{margin-top:2px}.branding-campaign-asset .branding-editor-stage.is-login{min-height:165px}.branding-campaign-asset .branding-crop-editor.preview-mobile .branding-editor-stage.is-login{min-height:390px}
@media(max-width:700px){.branding-editor-toolbar,.branding-editor-footer{align-items:flex-start}.branding-editor-stage.is-login{min-height:165px}.branding-crop-editor.preview-mobile .branding-editor-stage.is-login{min-height:390px}.branding-editor-stage.is-home{min-height:132px}.branding-login-card{min-width:125px}}

/* v0.2.72-rc7/rc8 — Android/PWA login canvas uses the same effective branding
   (including temporary campaigns) as the visible login background.  When the
   keyboard reduces visualViewport, the root canvas below it must not reveal the
   old bundled VTR24 image. */
html[data-theme="light"].mobile-device.login-active.branding-login-light-custom{
  background-image:var(--branding-login-light-image)!important;
  background-position:var(--branding-login-light-mobile-x,50%) var(--branding-login-light-mobile-y,50%)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
html[data-theme="dark"].mobile-device.login-active.branding-login-dark-custom{
  background-image:var(--branding-login-dark-image)!important;
  background-position:var(--branding-login-dark-mobile-x,50%) var(--branding-login-dark-mobile-y,50%)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
html[data-theme="light"].mobile-device body.branding-login-light-custom .background{
  background-position:var(--branding-login-light-mobile-x,50%) var(--branding-login-light-mobile-y,50%)!important;
}
html[data-theme="dark"].mobile-device body.branding-login-dark-custom .background{
  background-position:var(--branding-login-dark-mobile-x,50%) var(--branding-login-dark-mobile-y,50%)!important;
}

/* =========================================================
   UK VTR24 v0.2.72-rc8 — compact branding editor, true drag/zoom,
   light-home photo fix and independent desktop sidebar branding.
   ========================================================= */

/* The configured main photo must remain visible in LIGHT mode as well.  The
   legacy light rule replaced this pseudo-element with a plain gradient. */
html:not(.mobile-device)[data-theme="light"] body.branding-home-light-custom .dashboard-quick-actions::before{
  background-image:linear-gradient(90deg,rgba(247,252,255,.96) 0%,rgba(237,249,255,.58) 24%,rgba(237,249,255,.08) 100%),var(--branding-home-light-image)!important;
  background-size:cover!important;
  background-position:var(--branding-home-light-desktop-x,50%) var(--branding-home-light-desktop-y,50%)!important;
  opacity:.42!important;
  filter:saturate(1.14) contrast(1.04) brightness(1.05)!important;
  transform:scale(var(--branding-home-light-desktop-scale,1));
  transform-origin:var(--branding-home-light-desktop-x,50%) var(--branding-home-light-desktop-y,50%);
}
html:not(.mobile-device)[data-theme="dark"] body.branding-home-dark-custom .dashboard-quick-actions::before{
  background-image:linear-gradient(90deg,rgba(5,25,46,.10),rgba(5,25,46,.26)),var(--branding-home-dark-image)!important;
  background-size:cover!important;
  background-position:var(--branding-home-dark-desktop-x,50%) var(--branding-home-dark-desktop-y,50%)!important;
  opacity:.38!important;
  transform:scale(var(--branding-home-dark-desktop-scale,1));
  transform-origin:var(--branding-home-dark-desktop-x,50%) var(--branding-home-dark-desktop-y,50%);
}
html.mobile-device[data-theme="light"] body.branding-home-light-custom .dashboard-quick-actions::before{
  background-image:linear-gradient(90deg,rgba(247,252,255,.92),rgba(237,249,255,.18)),var(--branding-home-light-image)!important;
  background-size:cover!important;
  background-position:var(--branding-home-light-mobile-x,50%) var(--branding-home-light-mobile-y,50%)!important;
  opacity:.36!important;
  transform:scale(var(--branding-home-light-mobile-scale,1));
  transform-origin:var(--branding-home-light-mobile-x,50%) var(--branding-home-light-mobile-y,50%);
}
html.mobile-device[data-theme="dark"] body.branding-home-dark-custom .dashboard-quick-actions::before{
  background-image:linear-gradient(90deg,rgba(5,25,46,.10),rgba(5,25,46,.20)),var(--branding-home-dark-image)!important;
  background-size:cover!important;
  background-position:var(--branding-home-dark-mobile-x,50%) var(--branding-home-dark-mobile-y,50%)!important;
  opacity:.34!important;
  transform:scale(var(--branding-home-dark-mobile-scale,1));
  transform-origin:var(--branding-home-dark-mobile-x,50%) var(--branding-home-dark-mobile-y,50%);
}

/* Zoom is a visual scale on top of background-size:cover, so the image always
   covers the target and can still be enlarged without introducing empty bars. */
html:not(.mobile-device)[data-theme="light"] body.branding-login-light-custom .background{
  transform:scale(var(--branding-login-light-desktop-scale,1))!important;
  transform-origin:var(--branding-login-light-desktop-x,50%) var(--branding-login-light-desktop-y,50%)!important;
}
html:not(.mobile-device)[data-theme="dark"] body.branding-login-dark-custom .background{
  transform:scale(var(--branding-login-dark-desktop-scale,1))!important;
  transform-origin:var(--branding-login-dark-desktop-x,50%) var(--branding-login-dark-desktop-y,50%)!important;
}
html.mobile-device[data-theme="light"] body.branding-login-light-custom .background{
  transform:scale(var(--branding-login-light-mobile-scale,1))!important;
  transform-origin:var(--branding-login-light-mobile-x,50%) var(--branding-login-light-mobile-y,50%)!important;
}
html.mobile-device[data-theme="dark"] body.branding-login-dark-custom .background{
  transform:scale(var(--branding-login-dark-mobile-scale,1))!important;
  transform-origin:var(--branding-login-dark-mobile-x,50%) var(--branding-login-dark-mobile-y,50%)!important;
}
html:not(.mobile-device)[data-theme="light"] body.branding-home-light-custom .dashboard-weather-card::before,
html:not(.mobile-device)[data-theme="light"] body.branding-home-light-custom .owner-weather-hero::before{
  transform:scale(var(--branding-home-light-desktop-scale,1));
  transform-origin:var(--branding-home-light-desktop-x,50%) var(--branding-home-light-desktop-y,50%);
}
html:not(.mobile-device)[data-theme="dark"] body.branding-home-dark-custom .dashboard-weather-card::before,
html:not(.mobile-device)[data-theme="dark"] body.branding-home-dark-custom .owner-weather-hero::before{
  transform:scale(var(--branding-home-dark-desktop-scale,1));
  transform-origin:var(--branding-home-dark-desktop-x,50%) var(--branding-home-dark-desktop-y,50%);
}
html.mobile-device[data-theme="light"] body.branding-home-light-custom .dashboard-weather-card::before,
html.mobile-device[data-theme="light"] body.branding-home-light-custom .owner-weather-hero::before{
  transform:scale(var(--branding-home-light-mobile-scale,1));
  transform-origin:var(--branding-home-light-mobile-x,50%) var(--branding-home-light-mobile-y,50%);
}
html.mobile-device[data-theme="dark"] body.branding-home-dark-custom .dashboard-weather-card::before,
html.mobile-device[data-theme="dark"] body.branding-home-dark-custom .owner-weather-hero::before{
  transform:scale(var(--branding-home-dark-mobile-scale,1));
  transform-origin:var(--branding-home-dark-mobile-x,50%) var(--branding-home-dark-mobile-y,50%);
}

/* Sidebar has its own asset now; it no longer borrows the home photo. */
@media (min-width:1180px){
  html[data-theme="light"] body.app-mode.branding-sidebar-light-custom .desktop-sidebar::before{
    background-image:var(--branding-sidebar-light-image)!important;
    background-size:auto 74%!important;
    background-repeat:no-repeat!important;
    background-position:var(--branding-sidebar-light-desktop-x,50%) var(--branding-sidebar-light-desktop-y,50%)!important;
    filter:saturate(1.18) contrast(1.03) brightness(1.04)!important;
    opacity:1!important;
    transform:scale(var(--branding-sidebar-light-desktop-scale,1));
    transform-origin:var(--branding-sidebar-light-desktop-x,50%) var(--branding-sidebar-light-desktop-y,50%);
  }
  html[data-theme="light"] body.app-mode.branding-sidebar-light-custom .desktop-sidebar::after{
    background:#f2faff!important;
    opacity:var(--branding-sidebar-light-dim,.28)!important;
  }
  html[data-theme="dark"] body.app-mode.branding-sidebar-dark-custom .desktop-sidebar::before{
    background-image:var(--branding-sidebar-dark-image)!important;
    background-size:auto 74%!important;
    background-repeat:no-repeat!important;
    background-position:var(--branding-sidebar-dark-desktop-x,50%) var(--branding-sidebar-dark-desktop-y,50%)!important;
    filter:saturate(1.18) contrast(1.05) brightness(.82)!important;
    opacity:1!important;
    transform:scale(var(--branding-sidebar-dark-desktop-scale,1));
    transform-origin:var(--branding-sidebar-dark-desktop-x,50%) var(--branding-sidebar-dark-desktop-y,50%);
  }
  html[data-theme="dark"] body.app-mode.branding-sidebar-dark-custom .desktop-sidebar::after{
    background:#04182e!important;
    opacity:var(--branding-sidebar-dark-dim,.28)!important;
  }
}

/* Compact settings: one theme is edited at a time instead of rendering four
   enormous previews side by side. */
.branding-help-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.branding-position-group{padding:11px!important;gap:9px!important}
.branding-group-heading-with-tabs{align-items:center!important}
.branding-group-heading-with-tabs>div:nth-child(2){min-width:0;flex:1}
.branding-theme-switch{display:inline-flex;align-items:center;padding:2px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface-strong);margin-left:auto}
.branding-theme-switch button{border:0;background:transparent;color:var(--app-muted);font-size:9px;font-weight:800;padding:6px 10px;border-radius:8px;cursor:pointer}
.branding-theme-switch button.active{background:var(--app-blue);color:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--app-blue) 24%,transparent)}
.branding-theme-single{width:min(860px,100%);min-width:0}
.branding-theme-single>.branding-asset-card{width:100%;padding:10px!important;gap:8px!important}
.branding-logo-group .branding-asset-card{width:min(360px,100%)!important}
.branding-logo-group .branding-preview{aspect-ratio:16/7!important;max-height:170px}
.branding-editor-mount{width:100%;min-width:0}
.branding-crop-editor{width:100%;max-width:820px;gap:7px!important}
.branding-editor-stage{max-width:760px;margin-inline:auto;min-height:0!important;isolation:isolate;touch-action:none!important;overscroll-behavior:contain;cursor:grab;background:#102235!important}
.branding-editor-stage.is-login{aspect-ratio:16/9!important}
.branding-editor-stage.is-home{aspect-ratio:2.75/1!important}
.branding-editor-stage.is-sidebar{width:min(235px,100%);aspect-ratio:9/16!important;max-height:410px}
.branding-crop-editor.preview-mobile .branding-editor-stage.is-login{width:min(215px,100%)!important;aspect-ratio:9/16!important;min-height:0!important;margin-inline:auto}
.branding-crop-editor.preview-mobile .branding-editor-stage.is-home{width:min(390px,100%);aspect-ratio:2.05/1!important;min-height:0!important;margin-inline:auto}
.branding-editor-image{position:absolute;inset:0;z-index:0;background-size:cover;background-repeat:no-repeat;will-change:transform;background-color:#102235}.branding-editor-stage.is-sidebar .branding-editor-image{background-size:auto 74%;background-color:#eaf6ff}.branding-editor-stage.is-sidebar.theme-dark .branding-editor-image{background-color:#071b34}
.branding-editor-stage.is-dragging .branding-editor-image{filter:saturate(1.05)}
.branding-editor-empty{position:relative;z-index:2}
.branding-editor-toolbar,.branding-editor-footer{max-width:760px;margin-inline:auto;width:100%}
.branding-editor-device-note{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:8px;background:var(--app-blue);color:#fff;font-size:9px;font-weight:800}
.branding-zoom-button{min-width:28px!important;padding-inline:8px!important;font-size:15px!important;line-height:1!important}
.branding-zoom-readout{min-width:38px;text-align:center;font-variant-numeric:tabular-nums;font-weight:800;color:var(--app-text)}

/* The editor login form is centered exactly like the requested target.  Moving
   the background never moves this overlay. */
.branding-login-mock,.branding-home-mock,.branding-sidebar-mock{z-index:2}
.branding-login-card{left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(36%,235px)!important}
.branding-crop-editor.preview-mobile .branding-login-card{left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:78%!important}

.branding-sidebar-mock{position:absolute;inset:0;display:flex;flex-direction:column;gap:7px;padding:14px 12px;background:linear-gradient(180deg,rgba(245,251,255,var(--editor-dim,.28)),rgba(237,248,255,var(--editor-dim,.28)));pointer-events:none;color:#0d3554;text-shadow:0 1px rgba(255,255,255,.55)}
.branding-editor-stage.theme-dark .branding-sidebar-mock{background:linear-gradient(180deg,rgba(3,19,36,var(--editor-dim,.28)),rgba(3,25,48,var(--editor-dim,.28)));color:#e9f5ff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.branding-sidebar-brand-mock{display:flex;align-items:center;gap:7px;margin-bottom:8px;font-size:10px;letter-spacing:.05em}.branding-mini-mark{width:20px;height:24px;border-left:3px solid #18a4ef;border-right:2px solid #18a4ef;transform:skewY(-15deg)}
.branding-sidebar-mock>i{font-style:normal;padding:7px 8px;border-radius:7px;background:rgba(255,255,255,.22);font-size:8px;font-weight:750}.branding-sidebar-mock>i:last-child{background:#1687e9;color:#fff;margin-top:2px}
.branding-dim-control{width:min(520px,100%);margin:2px auto 0;display:grid;grid-template-columns:auto minmax(120px,1fr) 42px;gap:8px;align-items:center;font-size:9px;color:var(--app-muted)}
.branding-dim-control input{width:100%;accent-color:var(--app-blue)}.branding-dim-control b{color:var(--app-text);text-align:right;font-variant-numeric:tabular-nums}

.branding-campaign-assets-wrap{margin-top:10px;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface)}
.branding-campaign-assets-wrap>summary{cursor:pointer;padding:10px 12px;font-size:10px;font-weight:800;color:var(--app-text);list-style:none}.branding-campaign-assets-wrap>summary::-webkit-details-marker{display:none}.branding-campaign-assets-wrap>summary::after{content:'▾';float:right;color:var(--app-blue)}.branding-campaign-assets-wrap[open]>summary::after{content:'▴'}
.branding-campaign-assets-wrap .branding-campaign-assets{padding:0 10px 10px}.branding-campaign-asset .branding-editor-stage{max-width:560px}.branding-campaign-asset .branding-editor-stage.is-sidebar{max-width:220px}

@media(max-width:900px){
  .branding-help-grid{grid-template-columns:1fr 1fr!important}
  .branding-group-heading-with-tabs{align-items:flex-start!important;flex-wrap:wrap}.branding-theme-switch{margin-left:38px}
  .branding-theme-single{width:100%}
}
@media(max-width:620px){
  .branding-help-grid{grid-template-columns:1fr!important}
  .branding-theme-switch{margin-left:38px}
  .branding-crop-editor.preview-mobile .branding-editor-stage.is-login{width:min(205px,100%)!important}
  .branding-editor-footer>div{gap:4px!important}
  .branding-editor-footer .ghost-button,.branding-editor-footer .text-button{min-height:32px!important}
}


/* ==========================================================
   UK VTR24 v0.2.73-rc2 — WYSIWYG sidebar + live transparency
   ========================================================== */
/* Logo preview: show transparent files honestly and allow the whole logo to fade. */
.branding-preview.logo-preview{
  background-color:var(--app-surface-strong)!important;
  background-image:linear-gradient(45deg,color-mix(in srgb,var(--app-muted) 10%,transparent) 25%,transparent 25%),linear-gradient(-45deg,color-mix(in srgb,var(--app-muted) 10%,transparent) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,color-mix(in srgb,var(--app-muted) 10%,transparent) 75%),linear-gradient(-45deg,transparent 75%,color-mix(in srgb,var(--app-muted) 10%,transparent) 75%)!important;
  background-size:18px 18px!important;background-position:0 0,0 9px,9px -9px,-9px 0!important;
}
.branding-preview.logo-preview>img,.branding-preview.logo-preview>.branding-default-logo{opacity:var(--branding-logo-preview-opacity,1)}
.branding-logo-opacity,.branding-transparency-control{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:7px 10px;align-items:center;padding:9px 10px;border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface-strong)}
.branding-logo-opacity label,.branding-transparency-control label{display:grid;grid-template-columns:130px minmax(120px,1fr);gap:9px;align-items:center;color:var(--app-muted);font-size:9px}
.branding-logo-opacity input[type="range"],.branding-transparency-control input[type="range"]{width:100%;accent-color:var(--app-blue)}
.branding-logo-opacity small,.branding-transparency-control small{grid-column:1/-1;color:var(--app-muted);font-size:8px;line-height:1.35}
.branding-logo-opacity .ghost-button{grid-column:1/-1;justify-self:start}
.branding-percent-box{display:flex;align-items:center;gap:4px;color:var(--app-muted);font-size:9px}.branding-percent-box input{width:66px;height:32px;border:1px solid var(--app-border);border-radius:8px;background:var(--app-surface);color:var(--app-text);padding:0 7px;text-align:right;font-weight:800}

/* Runtime logo transparency applies to both the built-in mark and a custom logo. */
body .app-logo-mark,body .brand-mark,body .auth-boot-mark{opacity:var(--branding-logo-opacity,1)}

/* The sidebar editor now uses the SAME cover model as the real 212px desktop rail. */
.branding-editor-stage.is-sidebar{width:212px!important;height:520px!important;aspect-ratio:auto!important;max-height:none!important;border-radius:14px!important}
.branding-editor-stage.is-sidebar .branding-editor-image{background-size:cover!important;background-repeat:no-repeat!important;opacity:var(--editor-opacity,1)!important;background-color:transparent!important}
.branding-sidebar-mock{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;gap:6px;padding:18px 12px 14px;background:linear-gradient(180deg,rgba(248,253,255,.72),rgba(242,250,255,.47) 24%,rgba(239,249,255,.28) 55%,rgba(235,247,255,.20));pointer-events:none;color:#0d3d61;text-shadow:0 1px 0 rgba(255,255,255,.94)}
.branding-editor-stage.theme-dark .branding-sidebar-mock{background:linear-gradient(180deg,rgba(3,20,39,.72),rgba(4,29,55,.78) 48%,rgba(5,32,59,.54));color:#dff2ff;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.branding-sidebar-brand-mock{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;border-bottom:1px solid color-mix(in srgb,currentColor 18%,transparent);margin:0 0 12px!important;letter-spacing:.05em}.branding-sidebar-brand-mock>div{display:flex;flex-direction:column;gap:2px}.branding-sidebar-brand-mock strong{font-size:11px}.branding-sidebar-brand-mock small{font-size:6px;opacity:.72;letter-spacing:0}.branding-mini-mark{width:25px;height:31px;border-left:3px solid #18a4ef;border-right:2px solid #18a4ef;transform:skewY(-15deg)}
.branding-sidebar-mock>i{font-style:normal;min-height:35px;padding:0 9px;border:1px solid transparent!important;border-radius:9px;background:transparent!important;box-shadow:none!important;font-size:8px;font-weight:750;display:flex;align-items:center;gap:8px}
.branding-sidebar-mock>i:hover{background:transparent!important}.branding-sidebar-mock>i.active{background:linear-gradient(135deg,#179ee8 0%,#2472df 100%)!important;color:#fff!important;border-color:#188bd3!important;box-shadow:0 6px 14px rgba(22,119,201,.20)!important;text-shadow:none!important;margin-top:0!important}

/* Actual sidebar: no grey rectangles on normal links; only active section is highlighted. */
@media (min-width:1180px){
  html:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link:not(.active),
  html:not(.mobile-device) body.app-mode .desktop-side-nav .nav-link:not(.active):hover{
    background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode.branding-sidebar-light-custom .desktop-sidebar::before{
    background-size:cover!important;opacity:var(--branding-sidebar-light-opacity,1)!important;
  }
  html[data-theme="dark"]:not(.mobile-device) body.app-mode.branding-sidebar-dark-custom .desktop-sidebar::before{
    background-size:cover!important;opacity:var(--branding-sidebar-dark-opacity,1)!important;
  }
  html[data-theme="light"]:not(.mobile-device) body.app-mode.branding-sidebar-light-custom .desktop-sidebar::after{
    background:linear-gradient(180deg,rgba(248,253,255,.72),rgba(242,250,255,.47) 24%,rgba(239,249,255,.28) 55%,rgba(235,247,255,.20))!important;
    opacity:1!important;
  }
  html[data-theme="dark"]:not(.mobile-device) body.app-mode.branding-sidebar-dark-custom .desktop-sidebar::after{
    background:linear-gradient(180deg,rgba(3,20,39,.72),rgba(4,29,55,.78) 48%,rgba(5,32,59,.54))!important;
    opacity:1!important;
  }
}
@media(max-width:700px){.branding-logo-opacity,.branding-transparency-control{grid-template-columns:1fr}.branding-logo-opacity label,.branding-transparency-control label{grid-template-columns:1fr}.branding-percent-box{justify-self:start}}
.branding-editor-stage.is-sidebar.theme-light .branding-editor-image{filter:saturate(1.18) contrast(1.03) brightness(1.04)}
.branding-editor-stage.is-sidebar.theme-dark .branding-editor-image{filter:saturate(1.18) contrast(1.05) brightness(.82)}


/* ==========================================================
   UK VTR24 v0.2.73-rc2 — exact sidebar preview, login glass controls,
   lighter branding payloads
   ========================================================== */
/* Login card/field transparency: only the glass surface fades; text and borders remain. */
html[data-theme="light"] body:not(.app-mode) #loginForm{
  background:rgb(238 242 250 / calc(.12 * var(--branding-login-light-card-visible,1)))!important;
  -webkit-backdrop-filter:blur(calc(11px * var(--branding-login-light-card-visible,1))) saturate(1.05)!important;
  backdrop-filter:blur(calc(11px * var(--branding-login-light-card-visible,1))) saturate(1.05)!important;
}
html[data-theme="dark"] body:not(.app-mode) #loginForm{
  background:rgb(17 22 39 / calc(.15 * var(--branding-login-dark-card-visible,1)))!important;
  -webkit-backdrop-filter:blur(calc(11px * var(--branding-login-dark-card-visible,1))) saturate(1.05)!important;
  backdrop-filter:blur(calc(11px * var(--branding-login-dark-card-visible,1))) saturate(1.05)!important;
}
html[data-theme="light"] body:not(.app-mode) #loginForm::before{opacity:var(--branding-login-light-card-visible,1)!important}
html[data-theme="dark"] body:not(.app-mode) #loginForm::before{opacity:var(--branding-login-dark-card-visible,1)!important}
html[data-theme="light"] body:not(.app-mode) #loginForm .input-wrap{background:rgb(255 255 255 / calc(.018 * var(--branding-login-light-fields-visible,1)))!important}
html[data-theme="light"] body:not(.app-mode) #loginForm .input-wrap:focus-within{background:rgb(255 255 255 / calc(.035 * var(--branding-login-light-fields-visible,1)))!important}
html[data-theme="dark"] body:not(.app-mode) #loginForm .input-wrap{background:rgb(5 10 20 / calc(.05 * var(--branding-login-dark-fields-visible,1)))!important}
html[data-theme="dark"] body:not(.app-mode) #loginForm .input-wrap:focus-within{background:rgb(5 10 20 / calc(.075 * var(--branding-login-dark-fields-visible,1)))!important}

.branding-login-glass-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.branding-editor-stage.theme-light .branding-login-card{
  background:rgb(250 253 255 / calc(.92 * var(--editor-card-visible,1)))!important;
  backdrop-filter:blur(calc(5px * var(--editor-card-visible,1)))!important;
}
.branding-editor-stage.theme-dark .branding-login-card{
  background:rgb(8 24 43 / calc(.91 * var(--editor-card-visible,1)))!important;
  backdrop-filter:blur(calc(5px * var(--editor-card-visible,1)))!important;
}
.branding-login-card>i{background:rgb(255 255 255 / calc(.10 * var(--editor-fields-visible,1)))!important;opacity:1!important}
.branding-editor-stage.theme-dark .branding-login-card>i{background:rgb(3 12 23 / calc(.18 * var(--editor-fields-visible,1)))!important}

/* Sidebar preview uses the real sidebar DOM/classes and the real viewport aspect ratio.
   The full-size 212px rail is scaled as one object, so background-size:cover crops
   exactly like the rail the administrator sees at the left of the current browser. */
.branding-sidebar-preview-shell{position:relative;margin-inline:auto;overflow:visible}
.branding-sidebar-preview-scale{position:absolute;left:0;top:0;transform-origin:0 0}
.branding-editor-stage.is-sidebar{width:var(--sidebar-editor-width,212px)!important;height:var(--sidebar-editor-height,760px)!important;max-height:none!important;aspect-ratio:auto!important;border-radius:14px!important}
.branding-editor-stage.is-sidebar .branding-editor-image{background-size:cover!important;background-repeat:no-repeat!important;opacity:var(--editor-opacity,1)!important;background-color:transparent!important}
.branding-editor-stage.is-sidebar.theme-light .branding-editor-image{filter:saturate(1.48) contrast(1.08) brightness(1.04)!important}
.branding-editor-stage.is-sidebar.theme-dark .branding-editor-image{filter:saturate(1.22) contrast(1.06) brightness(.72)!important}
.branding-sidebar-replica.desktop-sidebar{
  display:flex!important;position:absolute!important;z-index:2!important;left:0!important;top:0!important;bottom:auto!important;
  width:100%!important;height:100%!important;padding:18px 12px 14px!important;flex-direction:column!important;overflow:hidden!important;
  background:linear-gradient(180deg,rgba(248,253,255,.72),rgba(242,250,255,.47) 24%,rgba(239,249,255,.28) 55%,rgba(235,247,255,.20))!important;
  border:0!important;box-shadow:none!important;pointer-events:none!important;color:#0d3d61!important;
}
.branding-editor-stage.theme-dark .branding-sidebar-replica.desktop-sidebar{background:linear-gradient(180deg,rgba(3,20,39,.72),rgba(4,29,55,.78) 48%,rgba(5,32,59,.54))!important;color:#dff2ff!important}
.branding-sidebar-replica.desktop-sidebar::before,.branding-sidebar-replica.desktop-sidebar::after{display:none!important;content:none!important}
.branding-sidebar-replica .desktop-sidebar-brand{position:relative!important;z-index:1!important;background:transparent!important}
.branding-sidebar-replica .desktop-side-nav{position:relative!important;z-index:1!important}
.branding-sidebar-replica .desktop-sidebar-complex{display:flex!important;min-height:104px!important;margin-top:auto!important;padding:14px!important;border:0!important;border-radius:14px!important;background:linear-gradient(180deg,transparent,rgba(4,24,45,.42))!important;box-shadow:none!important;flex-direction:column!important;justify-content:flex-end!important}
.branding-editor-stage.theme-light .branding-sidebar-replica .desktop-sidebar-complex{background:linear-gradient(180deg,transparent,rgba(235,247,255,.42))!important}
.branding-sidebar-replica .desktop-side-nav .nav-link:not(.active),.branding-sidebar-replica .desktop-side-nav .nav-link:not(.active):hover{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.branding-sidebar-replica .desktop-side-nav .nav-link.active{background:linear-gradient(135deg,#179ee8 0%,#2472df 100%)!important;color:#fff!important}

@media(max-width:700px){.branding-login-glass-controls{grid-template-columns:1fr}}

/* =========================================================
   UK VTR24 v0.2.73-rc2 — campaign logo preview + exact sidebar editor
   ========================================================= */
.branding-preview-runtime-logo{
  width:34px;height:38px;flex:0 0 auto;background-size:contain;background-repeat:no-repeat;background-position:center;
}
.branding-preview-runtime-logo.app-logo-mark{background-image:none}
.branding-login-card>.branding-preview-runtime-logo{width:30px;height:30px;min-width:30px;min-height:30px;margin-bottom:1px}
.branding-home-brand{position:absolute;left:12px;top:10px;z-index:3;display:flex;align-items:center;gap:7px;max-width:48%}
.branding-home-brand .branding-preview-runtime-logo{width:23px;height:25px;min-width:23px;min-height:25px}
.branding-home-brand>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.branding-home-brand b{font-size:8px;letter-spacing:.07em;color:#fff;white-space:nowrap}
.branding-home-brand small{font-size:5px!important;color:rgba(255,255,255,.78)!important;white-space:nowrap}
.branding-home-copy{align-self:end!important;display:flex;flex-direction:column;gap:2px;padding-top:22px}
.branding-preview-runtime-logo.sidebar-logo-preview{width:36px;height:43px;min-width:36px;min-height:43px}

/* Campaign logo transparency has the same controls as the permanent logo. */
.campaign-logo-opacity{margin-top:8px}

/* The sidebar preview is built from the real sidebar DOM, and the background is
   rendered through the same pseudo-element layering as the live sidebar. */
.branding-editor-stage.is-sidebar{
  position:relative!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#0b1a31 0%,#0d203b 58%,#102948 100%)!important;
}
.branding-editor-stage.is-sidebar.theme-light{
  background:linear-gradient(180deg,#f9fcff 0%,#eef7ff 58%,#e4f1fc 100%)!important;
}
.branding-sidebar-replica.desktop-sidebar{
  display:flex!important;position:absolute!important;z-index:2!important;inset:0!important;
  width:100%!important;height:100%!important;padding:18px 12px 14px!important;flex-direction:column!important;
  overflow:hidden!important;background:transparent!important;border:0!important;box-shadow:none!important;
  pointer-events:none!important;color:#dff2ff!important;
}
.branding-editor-stage.theme-light .branding-sidebar-replica.desktop-sidebar{color:#10283f!important}
.branding-sidebar-replica.desktop-sidebar::before{
  display:block!important;content:""!important;position:absolute!important;inset:0!important;z-index:0!important;
  background-image:var(--preview-sidebar-image)!important;background-size:cover!important;background-repeat:no-repeat!important;
  background-position:var(--preview-sidebar-x,50%) var(--preview-sidebar-y,50%)!important;
  transform:scale(var(--preview-sidebar-scale,1))!important;
  transform-origin:var(--preview-sidebar-x,50%) var(--preview-sidebar-y,50%)!important;
  opacity:var(--editor-opacity,1)!important;filter:saturate(1.22) contrast(1.06) brightness(.72)!important;
}
.branding-editor-stage.theme-light .branding-sidebar-replica.desktop-sidebar::before{
  filter:saturate(1.48) contrast(1.08) brightness(1.04)!important;
}
.branding-sidebar-replica.desktop-sidebar::after{
  display:block!important;content:""!important;position:absolute!important;inset:0!important;z-index:1!important;
  background:linear-gradient(180deg,rgba(3,20,39,.72),rgba(4,29,55,.78) 48%,rgba(5,32,59,.54))!important;
  opacity:1!important;pointer-events:none!important;
}
.branding-editor-stage.theme-light .branding-sidebar-replica.desktop-sidebar::after{
  background:linear-gradient(180deg,rgba(248,253,255,.72),rgba(242,250,255,.47) 24%,rgba(239,249,255,.28) 55%,rgba(235,247,255,.20))!important;
}
.branding-sidebar-replica.desktop-sidebar>*{position:relative!important;z-index:2!important}
.branding-sidebar-replica .desktop-sidebar-brand{display:flex!important;align-items:center!important;gap:11px!important;padding:4px 8px 20px!important;border-bottom:1px solid rgba(130,202,255,.18)!important;background:transparent!important}
.branding-editor-stage.theme-light .branding-sidebar-replica .desktop-sidebar-brand{border-bottom-color:#c7ddec!important}
.branding-sidebar-replica .desktop-sidebar-brand>div:last-child{display:flex!important;flex-direction:column!important;min-width:0!important}
.branding-sidebar-replica .desktop-sidebar-brand strong{font-size:15px!important;letter-spacing:.08em!important;white-space:nowrap!important}
.branding-sidebar-replica .desktop-sidebar-brand small{font-size:9px!important;margin-top:3px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:rgba(223,242,255,.70)!important}
.branding-editor-stage.theme-light .branding-sidebar-replica .desktop-sidebar-brand small{color:#557087!important}
.branding-sidebar-replica .desktop-side-nav{display:grid!important;gap:6px!important;margin-top:18px!important;position:relative!important;z-index:2!important}
.branding-sidebar-replica .desktop-side-nav .nav-link{
  width:100%!important;min-height:43px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;
  gap:11px!important;border:1px solid transparent!important;border-radius:11px!important;padding:0 12px!important;
  background:transparent!important;box-shadow:none!important;color:#d5e8fb!important;font-size:12px!important;text-align:left!important;
}
.branding-editor-stage.theme-light .branding-sidebar-replica .desktop-side-nav .nav-link{color:#45667f!important}
.branding-sidebar-replica .desktop-side-nav .nav-link.active{
  background:linear-gradient(135deg,#179ee8 0%,#2472df 100%)!important;color:#fff!important;border-color:#188bd3!important;
  box-shadow:0 7px 18px rgba(18,119,198,.22)!important;font-weight:700!important;
}
.branding-sidebar-replica .desktop-sidebar-complex{
  display:block!important;margin-top:auto!important;position:relative!important;overflow:hidden!important;min-height:210px!important;
  border:1px solid rgba(74,161,255,.25)!important;border-radius:15px!important;padding:126px 14px 14px!important;
  background:#0d203b!important;box-shadow:0 10px 25px rgba(0,0,0,.11)!important;
}
.branding-editor-stage.theme-light .branding-sidebar-replica .desktop-sidebar-complex{background:#f9fcff!important;border-color:#aad0ec!important}
.branding-sidebar-replica .desktop-sidebar-photo{position:absolute!important;inset:0 0 auto!important;height:135px!important;background-size:cover!important;background-position:58% 55%!important}
.branding-sidebar-replica .desktop-sidebar-complex strong{position:relative!important;z-index:1!important;font-size:15px!important;line-height:1.3!important}
.branding-sidebar-replica .desktop-sidebar-complex>span{position:relative!important;z-index:1!important;display:block!important;margin-top:8px!important;font-size:9px!important;letter-spacing:.08em!important}

/* The old separate editor image is intentionally unused for sidebar in rc11. */
.branding-editor-stage.is-sidebar>.branding-editor-image{display:none!important}

/* UK VTR24 v0.2.73-rc2 — per-UK identity/PWA icon, animated launch,
   dark mobile login system bar and direct photo zoom control. */
.branding-identity-form{
  display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1.4fr) auto;
  gap:12px;align-items:end;padding:14px;border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface-strong);
}
.branding-identity-form label{display:grid;gap:6px;color:var(--app-muted);font-size:10px}
.branding-identity-form input{width:100%;min-height:40px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface);color:var(--app-text);padding:8px 10px;font:inherit}
.branding-app-icon-card{max-width:420px}
.branding-preview.app-icon-preview{width:150px;height:150px;min-height:0!important;aspect-ratio:1/1;border-radius:30px;padding:14px;background:linear-gradient(145deg,#07182d,#0c3156);display:grid;place-items:center;overflow:hidden}
.branding-preview.app-icon-preview img{width:100%;height:100%;object-fit:contain;border-radius:24px}
.branding-zoom-control{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;max-width:760px;margin:8px auto 2px;padding:9px 10px;border:1px solid var(--app-border);border-radius:11px;background:var(--app-surface-strong)}
.branding-zoom-control label{display:grid;grid-template-columns:auto minmax(140px,1fr);gap:10px;align-items:center;font-size:10px;color:var(--app-muted)}
.branding-zoom-control input[type="range"]{width:100%;accent-color:var(--app-blue)}
.branding-zoom-control>small{grid-column:1/-1;color:var(--app-muted);font-size:9px}

/* The login screen always uses a dark system/status bar on mobile, including
   when the page itself is in light theme. This avoids the bright white strip. */
html.login-active{background:#020914!important}
html.login-active body{background:#020914!important}

/* Smooth launch screen restored. It intentionally stays independent from the
   light/dark content theme so the Android status bar and splash join visually. */
.auth-boot{
  background:linear-gradient(125deg,#01050b 0%,#041425 24%,#0a3158 48%,#06345f 64%,#020914 100%)!important;
  background-size:320% 320%!important;
  animation:ukLaunchGradient 5.6s ease-in-out infinite!important;
}
.auth-boot::before{content:"";position:absolute;inset:-18%;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(52,167,255,.20),transparent 38%);animation:ukLaunchGlow 3.4s ease-in-out infinite alternate}
.auth-boot-logo,.auth-boot>small{position:relative;z-index:1}
@keyframes ukLaunchGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes ukLaunchGlow{from{opacity:.42;transform:scale(.92)}to{opacity:1;transform:scale(1.06)}}
body.branding-app-icon-custom .auth-boot-mark{
  width:112px!important;height:112px!important;border-radius:28px!important;
  background-image:var(--branding-app-icon-image)!important;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;
  filter:drop-shadow(0 16px 34px rgba(0,0,0,.34)) drop-shadow(0 0 25px rgba(37,164,255,.22))!important;
}
body.branding-app-icon-custom .auth-boot-mark>span{display:none!important}

@media(max-width:760px){
  .branding-identity-form{grid-template-columns:1fr}.branding-identity-form button{width:100%}
  .branding-zoom-control{grid-template-columns:1fr auto}.branding-zoom-control label{grid-template-columns:1fr;gap:5px}
  body.branding-app-icon-custom .auth-boot-mark{width:104px!important;height:104px!important}
}

/* UKControl v0.2.73-rc2 — neutral first-run visuals for new instances.
   Existing installations with persistent branding keep their own images. */
html[data-theme="light"] body:not(.branding-login-light-custom) .background,
html[data-theme="light"].mobile-device.login-active body:not(.branding-login-light-custom){
  background-image:
    radial-gradient(circle at 78% 18%,rgba(33,150,243,.22),transparent 34%),
    radial-gradient(circle at 18% 78%,rgba(111,78,255,.18),transparent 38%),
    linear-gradient(145deg,#eaf5ff 0%,#dcecff 48%,#f6f9ff 100%)!important;
}
html[data-theme="dark"] body:not(.branding-login-dark-custom) .background,
html[data-theme="dark"].mobile-device.login-active body:not(.branding-login-dark-custom){
  background-image:
    radial-gradient(circle at 75% 22%,rgba(20,137,224,.28),transparent 36%),
    radial-gradient(circle at 18% 82%,rgba(103,74,230,.20),transparent 40%),
    linear-gradient(145deg,#03101f 0%,#071b34 52%,#0b2441 100%)!important;
}
html[data-theme="light"] body:not(.branding-home-light-custom) .dashboard-quick-actions::before,
html[data-theme="light"] body:not(.branding-home-light-custom) .weather-photo,
html[data-theme="light"] body:not(.branding-home-light-custom) .owner-weather-hero::before{
  background-image:linear-gradient(135deg,rgba(39,138,218,.16),rgba(112,83,235,.10))!important;
}
html[data-theme="dark"] body:not(.branding-home-dark-custom) .dashboard-quick-actions::before,
html[data-theme="dark"] body:not(.branding-home-dark-custom) .weather-photo,
html[data-theme="dark"] body:not(.branding-home-dark-custom) .owner-weather-hero::before{
  background-image:linear-gradient(135deg,rgba(16,109,181,.28),rgba(73,50,161,.16))!important;
}
html[data-theme="light"]:not(.mobile-device) body.app-mode:not(.branding-sidebar-light-custom) .desktop-sidebar::before,
html[data-theme="dark"]:not(.mobile-device) body.app-mode:not(.branding-sidebar-dark-custom) .desktop-sidebar::before{
  background-image:linear-gradient(180deg,rgba(38,139,215,.12),transparent 72%)!important;
}
.instance-setup-modal{width:min(760px,100%);max-height:min(92vh,920px);overflow:auto}
.instance-setup-section{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 0 -8px;padding-top:14px;border-top:1px solid var(--app-border)}
.instance-setup-section:first-of-type{margin-top:14px;border-top:0;padding-top:0}
.instance-setup-section strong{font-size:12px}.instance-setup-section small{font-size:9px;color:var(--app-muted);text-align:right}
#instanceSetupModal{z-index:400}
@media(max-width:620px){.instance-setup-section{align-items:flex-start;flex-direction:column}.instance-setup-section small{text-align:left}.instance-setup-modal{padding:15px!important}}

/* v0.2.73-rc2 — polls deadline, inline announcement gallery, profile avatars,
   WhatsApp-like chat selection bar and iPhone touch-scroll hardening. */
.profile-avatar-card{padding:14px;border:1px solid var(--app-border);border-radius:16px;background:color-mix(in srgb,var(--app-surface-strong) 94%,transparent);margin-bottom:14px}
.profile-avatar-editor{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.profile-avatar-preview{width:74px;height:74px;min-width:74px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,var(--app-blue),#655ee8);color:#fff;font-size:26px;font-weight:850;box-shadow:0 8px 24px rgba(25,111,212,.18);user-select:none}
.profile-avatar-preview img,.profile-chip .avatar img,.chat-avatar img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.profile-avatar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:min(420px,100%)}
.profile-avatar-actions small{width:100%;color:var(--app-muted);font-size:9px}
.profile-chip .avatar{overflow:hidden}
.chat-avatar{overflow:hidden}
.chat-avatar img{border-radius:50%}

/* Inline carousel inside the announcement card: photos can be browsed without
   opening the full-screen viewer. */
.announcement-inline-carousel{position:relative;width:100%;height:100%;min-height:300px;overflow:hidden;border-radius:18px;background:var(--app-surface);touch-action:pan-y}
.announcement-inline-photo-open{display:block;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:zoom-in}
.announcement-inline-photo{display:block;width:100%;height:100%;min-height:300px;max-height:620px;object-fit:cover;background:var(--app-surface)}
.announcement-inline-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);width:46px;height:64px;border:1px solid rgba(255,255,255,.28);border-radius:16px;background:rgba(5,17,30,.62);color:#fff;font-size:38px;line-height:1;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.announcement-inline-arrow.prev{left:12px}.announcement-inline-arrow.next{right:12px}.announcement-inline-arrow:disabled{opacity:.2;cursor:default}
.announcement-inline-counter{position:absolute;z-index:4;right:16px;bottom:14px;padding:8px 13px;border-radius:999px;background:rgba(5,17,30,.78);color:#fff;font-size:12px;font-weight:800;pointer-events:none}

/* WhatsApp-like message-selection bar: large touch targets and icons. */
@media(max-width:760px){
  .chat-longpress-menu{height:64px!important;min-height:64px!important;padding:max(7px,env(safe-area-inset-top)) 10px 7px!important;gap:2px!important;border-radius:0!important;box-shadow:0 7px 24px rgba(0,0,0,.22)!important}
  .chat-longpress-menu button{width:50px!important;height:48px!important;min-height:48px!important;padding:0!important;justify-content:center!important;border-radius:50%!important;font-size:26px!important}
  .chat-longpress-menu .chat-longpress-close{font-size:30px!important;margin-right:2px!important}
  .chat-longpress-menu>strong{font-size:19px!important;line-height:1!important;margin-left:2px!important;margin-right:auto!important}
  .chat-longpress-menu .chat-action-icon{font-size:27px!important;line-height:1!important;display:block!important}
  .chat-longpress-menu .chat-action-label{display:none!important}
  html.mobile-device body.chat-open .chat-message-list{touch-action:pan-y!important;overscroll-behavior-y:contain!important;-webkit-overflow-scrolling:touch!important;scroll-behavior:auto!important}
  html.mobile-device body.chat-open .community-message-row{touch-action:pan-y!important}
  /* Chat always owns the active bottom-nav state while the chat page is open,
     even if iOS restores a stale Home class while resuming the PWA. */
  html.mobile-device body.chat-open .mobile-bottom-link[data-key="home"]{color:var(--app-muted)!important;background:transparent!important;box-shadow:none!important}
  html.mobile-device body.chat-open .mobile-bottom-link[data-key="chat"]{color:var(--app-blue)!important}
  html.mobile-device body.chat-open .mobile-bottom-link[data-key="chat"] .mobile-bottom-icon{color:var(--app-blue)!important}
  .announcement-inline-carousel,.announcement-inline-photo{min-height:250px!important;max-height:58dvh!important}
  .announcement-inline-arrow{width:42px;height:56px;font-size:34px}
}

/* Give the light TSN dashboard quick actions the same visual richness as the
   dark theme.  Existing icon blocks remain readable over the photos. */
html[data-theme="light"] body.app-mode .dashboard-quick-actions .quick-grid button{position:relative;overflow:hidden;isolation:isolate}
html[data-theme="light"] body.app-mode .dashboard-quick-actions .quick-grid button::after{content:"";position:absolute;z-index:-1;inset:0 0 0 48%;background-position:center;background-size:cover;opacity:.20;filter:saturate(.92) contrast(1.03);pointer-events:none;mask-image:linear-gradient(90deg,transparent,#000 35%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 35%)}
html[data-theme="light"] body.app-mode .dashboard-quick-actions .quick-grid button:nth-child(1)::after{background-image:url('/assets/vtr24-bg-light.jpg')}
html[data-theme="light"] body.app-mode .dashboard-quick-actions .quick-grid button:nth-child(2)::after{background-image:url('/assets/work-facade.webp')}
html[data-theme="light"] body.app-mode .dashboard-quick-actions .quick-grid button:nth-child(3)::after{background-image:url('/assets/work-parking.webp')}


/* UKControl v0.2.73-rc4 — clean production bootstrap.
   No bundled VTR24 photograph is shown when the instance has no uploaded branding. */
.dashboard-empty-state{min-height:76px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:16px;border:1px dashed var(--app-border);border-radius:12px;background:color-mix(in srgb,var(--app-surface) 78%,transparent);color:var(--app-muted);text-align:center}
.dashboard-empty-state strong{color:var(--app-text);font-size:12px}.dashboard-empty-state span{font-size:9px}
html[data-theme="light"] body.app-mode:not(.branding-home-light-custom) .dashboard-quick-actions::before,
html[data-theme="light"] body.app-mode:not(.branding-home-light-custom) .dashboard-quick-actions .quick-grid button:nth-child(1)::after{
  background-image:linear-gradient(135deg,rgba(38,151,226,.20),rgba(111,85,238,.12))!important;
}
html[data-theme="dark"] body.app-mode:not(.branding-home-dark-custom) .dashboard-quick-actions::before{
  background-image:linear-gradient(135deg,rgba(16,109,181,.25),rgba(73,50,161,.16))!important;
}
body:not(.branding-home-light-custom) .news-complex-thumb,
body:not(.branding-home-dark-custom) .news-complex-thumb{background-image:linear-gradient(135deg,#d7edff,#edf5ff 50%,#dfe8ff)!important;background-size:cover!important}
html[data-theme="dark"] body:not(.branding-home-dark-custom) .news-complex-thumb{background-image:linear-gradient(135deg,#123b61,#142f4d 50%,#252f57)!important}
.cover-complex-night,.cover-engineering{background-image:linear-gradient(135deg,#d7edff,#eef5ff 52%,#dfe8ff)!important}
html[data-theme="dark"] .cover-complex-night,html[data-theme="dark"] .cover-engineering{background-image:linear-gradient(135deg,#0b2b49,#0f3557 52%,#242f56)!important}

/* UKControl v0.2.73-rc4 — clean-instance, city selector, self-service avatars, iPhone chat hardening. */
.setup-city-field{position:relative;z-index:8}
.city-suggestions{position:absolute;z-index:60;left:0;right:0;top:calc(100% + 6px);max-height:280px;overflow:auto;border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface-strong);box-shadow:0 16px 40px rgba(0,0,0,.18);padding:6px}
.city-suggestions button{display:flex;width:100%;flex-direction:column;align-items:flex-start;gap:2px;border:0;border-radius:10px;background:transparent;color:var(--app-text);padding:10px 12px;text-align:left;cursor:pointer}
.city-suggestions button:hover,.city-suggestions button:focus{background:var(--app-blue-soft);outline:none}
.city-suggestions button strong{font-size:13px}.city-suggestions button small{font-size:10px;color:var(--app-muted)}
.city-suggestion-empty{padding:12px;color:var(--app-muted);font-size:11px}


/* A clean UK must never inherit VTR24 bundled photography. Real installations
   with uploaded branding still receive the custom class and keep their image. */
html[data-theme="light"] body:not(.branding-home-light-custom) .dashboard-weather-card::before,
html[data-theme="light"] body:not(.branding-home-light-custom) .owner-weather-hero::before,
html[data-theme="light"] body:not(.branding-home-light-custom) .dashboard-quick-actions::before,
html[data-theme="light"] body:not(.branding-home-light-custom) .weather-photo{
  background-image:linear-gradient(135deg,#dff3ff 0%,#f7fbff 48%,#e8edff 100%)!important;
  filter:none!important;
}
html[data-theme="dark"] body:not(.branding-home-dark-custom) .dashboard-weather-card::before,
html[data-theme="dark"] body:not(.branding-home-dark-custom) .owner-weather-hero::before,
html[data-theme="dark"] body:not(.branding-home-dark-custom) .dashboard-quick-actions::before,
html[data-theme="dark"] body:not(.branding-home-dark-custom) .weather-photo{
  background-image:linear-gradient(135deg,#09233d 0%,#0b3152 52%,#22294b 100%)!important;
  filter:none!important;
}
html[data-theme="light"] body.app-mode:not(.branding-sidebar-light-custom) .desktop-sidebar::before,
html[data-theme="light"] body.app-mode:not(.branding-sidebar-light-custom) .desktop-sidebar-photo{
  background-image:linear-gradient(180deg,#e9f8ff 0%,#f6fbff 52%,#e8effc 100%)!important;
  filter:none!important;
}
html[data-theme="dark"] body.app-mode:not(.branding-sidebar-dark-custom) .desktop-sidebar::before,
html[data-theme="dark"] body.app-mode:not(.branding-sidebar-dark-custom) .desktop-sidebar-photo{
  background-image:linear-gradient(180deg,#071c31 0%,#092744 52%,#0d2f50 100%)!important;
  filter:none!important;
}
html[data-theme="light"] body.app-mode:not(.branding-home-light-custom) .dashboard-quick-actions .quick-grid button:nth-child(1)::after,
html[data-theme="dark"] body.app-mode:not(.branding-home-dark-custom) .dashboard-quick-actions .quick-grid button:nth-child(1)::after{
  background-image:linear-gradient(135deg,rgba(54,164,233,.22),rgba(103,86,236,.10))!important;
}

/* v0.2.73-rc5: profile/setup visibility and iPhone chat geometry. */
.instance-profile-card{margin-bottom:12px}
.compact-instance-summary{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.compact-instance-summary{grid-template-columns:1fr}.instance-profile-card .section-heading{align-items:flex-start}.instance-profile-card .section-heading>button{width:100%;margin-top:8px}}

/* === CHAT STABLE LAYOUT 20260921 START === */
@media(max-width:760px){
  html.mobile-device body.app-mode.chat-open{
    overflow:hidden!important;
    padding-bottom:0!important;
    overscroll-behavior:none!important;
    background:var(--app-bg)!important;
  }

  html.mobile-device body.app-mode.chat-open #communityChatPage.chat-page{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;
    bottom:var(--chat-nav-height,78px)!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    z-index:55!important;
    background:var(--app-bg)!important;
  }

  html.mobile-device body.app-mode.chat-open #communityChatPage .community-chat-card{
    position:absolute!important;
    inset:0!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
    overflow:hidden!important;
    border-radius:0!important;
    border-left:0!important;
    border-right:0!important;
  }

  html.mobile-device body.app-mode.chat-open #communityChatMessages.chat-message-list{
    position:relative!important;
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:5px 6px 12px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    touch-action:pan-y!important;
    scroll-behavior:auto!important;
    box-sizing:border-box!important;
  }

  html.mobile-device body.app-mode.chat-open #communityChatForm.chat-compose{
    position:relative!important;
    flex:0 0 auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:5px 6px!important;
    transform:none!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    background:var(--app-surface-strong)!important;
    border-top:1px solid var(--app-border)!important;
    z-index:20!important;
  }

  html.mobile-device body.app-mode.chat-open #communityChatForm .chat-compose-row{
    width:100%!important;
    margin:0!important;
    grid-template-columns:auto minmax(0,1fr) auto!important;
    align-items:center!important;
  }

  html.mobile-device body.app-mode.chat-open #communityChatInput{
    min-width:0!important;
    width:100%!important;
    font-size:16px!important;
    line-height:1.2!important;
    touch-action:manipulation!important;
  }

  /* Keep the same bottom navigation size as every other mobile page. */
  html.mobile-device body.app-mode.chat-open #mobileBottomNav.mobile-bottom-nav{
    visibility:visible!important;
    pointer-events:auto!important;
  }
  html.mobile-device body.app-mode.chat-open.chat-input-focused:not(.chat-keyboard-open) #mobileBottomNav.mobile-bottom-nav{
    display:grid!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
  html.mobile-device body.app-mode.chat-open.chat-keyboard-open #mobileBottomNav.mobile-bottom-nav{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  html.mobile-device body.app-mode.chat-open .chat-jump-bottom{
    position:absolute!important;
    right:10px!important;
    bottom:calc(var(--chat-compose-height,58px) + 10px)!important;
    z-index:80!important;
  }
}
/* === CHAT STABLE LAYOUT 20260921 END === */


/* === IOS CHAT SAFE AREA FINAL START === */
@media(max-width:760px){

  /*
   * Нижняя системная зона iPhone должна выглядеть
   * продолжением белой панели, а не голубой полосой.
   * Геометрию и высоту навигации НЕ меняем.
   */
  html.mobile-device body.app-mode.chat-open{
    background:var(--app-surface-strong)!important;
  }

  html.mobile-device body.app-mode.chat-open #mobileBottomNav{
    background:var(--app-surface-strong)!important;
  }
}

/*
 * Высокие iPhone с notch / Dynamic Island.
 * На iPhone 7 это правило не сработает из-за высоты экрана.
 */
@media(max-width:760px) and (min-height:780px){

  html.mobile-device body.app-mode.chat-open:not(.chat-keyboard-open)
  #communityChatPage.chat-page{
    top:env(safe-area-inset-top,0px)!important;
  }
}

/* === IOS CHAT SAFE AREA FINAL END === */

/* === IOS CHAT SAFE AREA FINAL START === */
@media(max-width:760px){

  /*
   * Нижняя системная зона iPhone должна выглядеть
   * продолжением белой панели, а не голубой полосой.
   * Геометрию и высоту навигации НЕ меняем.
   */
  html.mobile-device body.app-mode.chat-open{
    background:var(--app-surface-strong)!important;
  }

  html.mobile-device body.app-mode.chat-open #mobileBottomNav{
    background:var(--app-surface-strong)!important;
  }
}

/*
 * Высокие iPhone с notch / Dynamic Island.
 * На iPhone 7 это правило не сработает из-за высоты экрана.
 */
@media(max-width:760px) and (min-height:780px){

  html.mobile-device body.app-mode.chat-open:not(.chat-keyboard-open)
  #communityChatPage.chat-page{
    top:env(safe-area-inset-top,0px)!important;
  }
}

/* === IOS CHAT SAFE AREA FINAL END === */

/* === ANNOUNCEMENTS FEED CLEANUP RC7 START === */
.market-card-summary{display:none!important}
.market-favorite.active{color:#ff4f6f!important;background:rgba(25,29,38,.84)!important}
.market-favorite.active:hover{color:#ff4f6f!important}
.announcement-my-actions{margin:0 0 10px}
.announcement-my-create{width:100%;min-height:54px;border:0;border-radius:16px;background:var(--app-blue);color:#fff;display:flex;align-items:center;gap:12px;padding:8px 14px;text-align:left;cursor:pointer;box-shadow:0 8px 22px rgba(31,139,231,.18)}
.announcement-my-create-icon{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);font-size:27px;line-height:1;font-weight:400}
.announcement-my-create>span:last-child{display:grid;gap:2px}.announcement-my-create strong{font-size:12px}.announcement-my-create small{font-size:9px;color:rgba(255,255,255,.78)}
.announcement-detail-favorite{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 14px;border-radius:11px;border:1px solid var(--app-border);background:var(--app-surface-strong);color:var(--app-text);font-size:11px;font-weight:800;cursor:pointer}
.announcement-detail-favorite [data-favorite-icon]{font-size:20px;line-height:1}.announcement-detail-favorite.active{color:#ff4f6f;border-color:color-mix(in srgb,#ff4f6f 45%,var(--app-border))}
@media(max-width:760px){
  #announcementsPage>.subpage-head{display:none!important}
  .announcement-view-tabs{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .announcement-view-tabs button{padding:0 2px!important;font-size:9px!important}
  .announcement-view-tabs .moderation-tab:not(.hidden){grid-column:1/-1!important}
  .announcement-my-actions{margin:0 0 8px!important}
  .announcement-my-create{min-height:48px!important;border-radius:13px!important;padding:6px 10px!important;gap:9px!important}
  .announcement-my-create-icon{width:32px;height:32px;font-size:23px}
  .announcement-my-create strong{font-size:11px}.announcement-my-create small{font-size:8px}
  .announcement-contact-actions{grid-template-columns:1fr!important}
  .announcement-detail-favorite{width:100%!important}
}
/* === ANNOUNCEMENTS FEED CLEANUP RC7 END === */

/* === ANNOUNCEMENT MY FLOATING CREATE RC7 V2 START === */
@media(max-width:760px){
  /* Compact floating action above the bottom navigation, only in «Мои». */
  #announcementsPage .announcement-my-actions{
    position:fixed!important;
    z-index:88!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(78px + env(safe-area-inset-bottom,0px))!important;
    width:min(82vw,320px)!important;
    margin:0!important;
    transform:translate(-50%,0)!important;
    opacity:1!important;
    pointer-events:auto!important;
    transition:opacity .18s ease,transform .18s ease!important;
  }

  #announcementsPage .announcement-my-actions.announcement-my-actions-scroll-hidden{
    opacity:0!important;
    transform:translate(-50%,16px)!important;
    pointer-events:none!important;
  }

  #announcementsPage .announcement-my-create{
    min-height:46px!important;
    border-radius:999px!important;
    padding:5px 14px!important;
    justify-content:center!important;
    gap:7px!important;
    box-shadow:0 10px 28px rgba(0,0,0,.28),0 5px 18px rgba(31,139,231,.22)!important;
  }

  #announcementsPage .announcement-my-create-icon{
    width:28px!important;
    height:28px!important;
    font-size:21px!important;
    flex:0 0 28px!important;
  }

  #announcementsPage .announcement-my-create>span:last-child{display:block!important}
  #announcementsPage .announcement-my-create strong{font-size:11px!important;line-height:1!important}
  #announcementsPage .announcement-my-create small{display:none!important}
}
/* === ANNOUNCEMENT MY FLOATING CREATE RC7 V2 END === */

/* === ANNOUNCEMENT MESSAGE AVATAR CLEAN RC7 START === */
.announcement-thread-card{
  overflow:hidden;
}

.announcement-thread-avatar.announcement-thread-listing-avatar{
  position:relative!important;
  display:block!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  max-width:48px!important;
  max-height:48px!important;
  flex:0 0 48px!important;
  overflow:hidden!important;
  border-radius:14px!important;
  background:var(--app-blue-soft)!important;
  isolation:isolate!important;
}

.announcement-thread-listing-avatar .announcement-thread-avatar-fallback{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  z-index:0!important;
  font-size:18px!important;
}

.announcement-thread-listing-avatar .announcement-thread-photo{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  z-index:1!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  pointer-events:none!important;
}

/* Old cached markup with an <img> must never expand the list. */
.announcement-thread-listing-avatar > img{
  display:none!important;
  width:0!important;
  height:0!important;
  min-width:0!important;
  min-height:0!important;
  max-width:0!important;
  max-height:0!important;
}

.announcement-thread-copy{
  min-width:0!important;
  overflow:hidden!important;
}

.announcement-thread-copy strong,
.announcement-thread-copy b,
.announcement-thread-copy small{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  white-space:nowrap!important;
  text-overflow:ellipsis!important;
}

@media(max-width:760px){
  .announcement-thread-card{
    grid-template-columns:56px minmax(0,1fr) auto!important;
    gap:10px!important;
    padding:10px!important;
  }

  .announcement-thread-avatar.announcement-thread-listing-avatar{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
    max-width:56px!important;
    max-height:56px!important;
    flex-basis:56px!important;
  }

  .announcement-thread-listing-avatar .announcement-thread-avatar-fallback{
    font-size:22px!important;
  }

  .announcement-thread-copy strong{font-size:12px!important}
  .announcement-thread-copy b{font-size:10px!important}
  .announcement-thread-copy small{font-size:9px!important}
}
/* === ANNOUNCEMENT MESSAGE AVATAR CLEAN RC7 END === */



/* === CHAT RECOGNITION + FAST MEDIA RC7 === */
.chat-recognition-option{display:flex;align-items:center;gap:10px;width:max-content;max-width:100%;margin:14px 0 16px;padding:2px 0;color:var(--app-text);font-weight:750;cursor:pointer}
.chat-recognition-option input{width:18px;height:18px;margin:0;accent-color:var(--app-blue);cursor:pointer}
.chat-recognition-option input:disabled{cursor:not-allowed;opacity:.55}
.chat-recognition-option.hidden{display:none!important}
.community-message-media[data-media-waiting="1"]{min-height:54px}
.community-message-video video:not([src]){min-height:72px}

/* === CHAT MULTI MEDIA + RESUME SYNC RC7 START === */
.chat-media-preview-grid{
  display:grid;
  grid-template-columns:repeat(5,44px);
  gap:5px;
  flex:0 0 auto;
  max-width:240px;
}
.chat-media-preview-item{
  position:relative;
  width:44px;
  height:44px;
  overflow:hidden;
  border:1px solid var(--app-border);
  border-radius:8px;
  background:#05070b;
}
.chat-media-preview-item img,
.chat-media-preview-item video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}
.chat-media-preview-item>button{
  position:absolute;
  top:2px;
  right:2px;
  width:18px;
  height:18px;
  min-width:18px;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:rgba(0,0,0,.72)!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:18px!important;
  cursor:pointer;
}
.community-message-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:3px;
  width:min(320px,100%);
  max-width:320px!important;
  padding:0;
  overflow:hidden;
  border:0!important;
  background:transparent!important;
}
.community-message-gallery-item{
  display:block;
  min-width:0;
  padding:0!important;
  border:0!important;
  border-radius:8px!important;
  overflow:hidden;
  background:#05070b!important;
  cursor:zoom-in;
}
.community-message-gallery-item img{
  display:block;
  width:100%!important;
  height:auto;
  aspect-ratio:1/1;
  max-height:none!important;
  object-fit:cover!important;
  background:#05070b;
}
.community-message-gallery[data-count="2"] .community-message-gallery-item img{aspect-ratio:4/3}
.community-message-gallery[data-count="3"] .community-message-gallery-item:first-child{grid-row:span 2}
.community-message-gallery[data-count="3"] .community-message-gallery-item:first-child img{height:100%;aspect-ratio:auto}
@media(max-width:760px){
  .chat-media-preview-grid{grid-template-columns:repeat(5,38px);max-width:210px}
  .chat-media-preview-item{width:38px;height:38px}
  html.mobile-device body.chat-open .community-message-gallery{width:min(260px,100%);max-width:260px!important;gap:2px!important}
}
/* === CHAT MULTI MEDIA + RESUME SYNC RC7 END === */


/* === CHAT STABLE MEDIA + OPTIMISTIC UPLOAD RC7 START === */

/* Desktop must not animate programmatic scroll corrections. */
body.chat-open .chat-message-list{
  scroll-behavior:auto!important;
}

/*
 * Reserve media geometry before the network response arrives. The previous
 * 54/72px placeholders expanded to hundreds of pixels as files decoded, which
 * visibly moved the PC chat and forced the bottom observer to chase the layout.
 */
body.chat-open .community-message-image{
  position:relative;
  width:min(360px,100%);
  aspect-ratio:4/3;
  min-height:0!important;
}
body.chat-open .community-message-image img{
  display:block;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:contain!important;
}
body.chat-open .community-message-video{
  position:relative;
  width:min(420px,100%);
  aspect-ratio:16/9;
  min-height:0!important;
}
body.chat-open .community-message-video video{
  display:block;
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:contain!important;
}
body.chat-open .community-message-media[data-media-waiting="1"]{
  min-height:0!important;
}
body.chat-open .community-message-video video:not([src]){
  min-height:0!important;
}

body.chat-open .community-message-gallery-item{
  position:relative;
  aspect-ratio:1/1;
}
body.chat-open .community-message-gallery-item img{
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
}
body.chat-open .community-message-gallery[data-count="2"] .community-message-gallery-item{
  aspect-ratio:4/3;
}
body.chat-open .community-message-gallery[data-count="3"] .community-message-gallery-item:first-child{
  aspect-ratio:auto;
}

.chat-pending-row{
  opacity:.98;
}
.chat-pending-media{
  position:relative;
}
.chat-upload-cover{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(2,8,18,.30);
  pointer-events:none;
}
.chat-upload-ring{
  --upload-progress:0;
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at center,rgba(8,18,34,.94) 0 60%,transparent 62%),
    conic-gradient(var(--app-blue) calc(var(--upload-progress) * 1%),rgba(255,255,255,.20) 0);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  color:#fff;
  font-size:12px;
  font-weight:850;
}
.chat-upload-status{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-top:7px;
  color:var(--app-muted);
  font-size:8px;
  font-weight:700;
}
.chat-upload-progress{
  flex:1 1 110px;
  height:4px;
  min-width:80px;
  overflow:hidden;
  border-radius:999px;
  background:color-mix(in srgb,var(--app-border) 72%,transparent);
}
.chat-upload-progress>i{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:var(--app-blue);
  transition:width .15s linear;
}
.chat-upload-error-actions{
  display:flex;
  gap:8px;
  width:100%;
}
.chat-upload-error-actions.hidden{display:none!important}
.chat-upload-error-actions button{
  border:0;
  padding:3px 0;
  background:transparent;
  color:var(--app-blue);
  font:inherit;
  cursor:pointer;
}
.chat-upload-error-actions button:last-child{
  color:#ff737d;
}
.chat-upload-failed .chat-upload-cover{
  background:rgba(28,5,8,.45);
}
.chat-upload-failed .chat-upload-ring{
  background:rgba(55,11,17,.92);
}
.chat-upload-failed .chat-upload-progress{
  display:none;
}

@media(max-width:760px){
  html.mobile-device body.chat-open .community-message-image{
    width:min(300px,100%);
  }
  html.mobile-device body.chat-open .community-message-video{
    width:min(300px,100%);
  }
  .chat-upload-ring{
    width:50px;
    height:50px;
    font-size:10px;
  }
}

/* === CHAT STABLE MEDIA + OPTIMISTIC UPLOAD RC7 END === */


/* === CHAT PHOTO PICKER + SWIPE GALLERY RC7 START === */

/* Compact, useful attachment picker: large thumbnails, no empty dead area. */
body.chat-open .chat-image-preview{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:8px 10px!important;
  padding:9px 10px!important;
  margin-bottom:6px!important;
}
body.chat-open .chat-image-preview>div:not(.chat-media-preview-grid){
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
}
body.chat-open .chat-image-preview>#removeChatImage{
  grid-column:2!important;
  grid-row:1!important;
  align-self:center!important;
  margin:0!important;
  padding:6px 2px!important;
  font-size:10px!important;
  font-weight:800!important;
}
body.chat-open .chat-media-preview-grid{
  grid-column:1/-1!important;
  grid-row:2!important;
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(72px,1fr))!important;
  gap:7px!important;
  width:100%!important;
  max-width:none!important;
  max-height:230px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:1px 2px 2px!important;
  overscroll-behavior:contain;
}
body.chat-open .chat-media-preview-item{
  width:100%!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  border-radius:11px!important;
  border:1px solid color-mix(in srgb,var(--app-blue) 24%,var(--app-border))!important;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}
body.chat-open .chat-media-preview-item>button{
  top:4px!important;
  right:4px!important;
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  line-height:24px!important;
  font-size:18px!important;
  font-weight:800!important;
  background:rgba(7,12,22,.82)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.35)!important;
}
body.chat-open .chat-image-preview strong{
  font-size:11px!important;
}
body.chat-open .chat-image-preview span{
  font-size:9px!important;
}

@media(max-width:760px){
  html.mobile-device body.chat-open .chat-media-preview-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    max-height:min(31dvh,270px)!important;
  }
  html.mobile-device body.chat-open .chat-media-preview-item{
    min-width:0!important;
  }
}

/* Full-screen chat photo gallery, matching the announcement viewer. */
.chat-media-lightbox{
  position:fixed!important;
  inset:0!important;
  z-index:50010!important;
  display:block!important;
  padding:0!important;
  background:#000!important;
  backdrop-filter:none!important;
  overflow:hidden!important;
  color:#fff!important;
}
.chat-media-lightbox.hidden{display:none!important}
.chat-media-gallery-head{
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  top:0;
  min-height:58px;
  padding:max(8px,env(safe-area-inset-top)) 14px 8px;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  background:linear-gradient(180deg,rgba(0,0,0,.72),transparent);
  pointer-events:none;
}
.chat-media-gallery-head>*{pointer-events:auto}
.chat-media-gallery-head strong{
  text-align:center;
  font-size:14px;
  font-weight:800;
}
.chat-media-lightbox-close{
  position:static!important;
  width:42px!important;
  height:42px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  font-size:30px!important;
  line-height:1!important;
  cursor:pointer;
}
.chat-media-gallery-track{
  position:absolute;
  inset:0;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  scrollbar-width:none;
}
.chat-media-gallery-track::-webkit-scrollbar{display:none}
.chat-media-gallery-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  margin:0;
  display:grid;
  place-items:center;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  background:#000;
}
.chat-media-gallery-slide img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#000;
  user-select:none;
  -webkit-user-drag:none;
}
.chat-media-gallery-slide.chat-media-gallery-error::after{
  content:"Фото недоступно";
  color:rgba(255,255,255,.72);
  font-size:13px;
}
.chat-media-gallery-nav{
  position:absolute;
  z-index:5;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:62px;
  border:0;
  border-radius:12px;
  background:rgba(0,0,0,.38);
  color:#fff;
  font-size:38px;
  cursor:pointer;
}
.chat-media-gallery-nav.prev{left:10px}
.chat-media-gallery-nav.next{right:10px}
.chat-media-gallery-nav.hidden{display:none!important}
body.media-lightbox-open{overflow:hidden!important}

@media(max-width:760px){
  .chat-media-gallery-nav{display:none!important}
  .chat-media-gallery-head strong{font-size:13px}
}

/* === CHAT PHOTO PICKER + SWIPE GALLERY RC7 END === */

/* === CHAT EMPTY FILE PREVIEW FIX RC7 === */
body.chat-open .chat-image-preview.hidden{
  display:none!important;
}
/* === CHAT EMPTY FILE PREVIEW FIX RC7 END === */



/* === ANNOUNCEMENT MESSAGE NOTIFY + PHOTO PLACEHOLDER RC7 START === */
.announcement-thread-photo-placeholder{
  position:absolute;
  inset:0;
  display:block;
  background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(120,150,185,.10));
}
.announcement-thread-photo{
  opacity:1!important;
  transition:none!important;
  backface-visibility:hidden;
  transform:translateZ(0);
  contain:paint;
}
.announcement-thread-photo[data-loaded="1"]{
  opacity:1!important;
}
html[data-theme="light"] .announcement-thread-photo-placeholder{
  background:linear-gradient(135deg,#eef3f8,#e2eaf2);
}
/* === ANNOUNCEMENT MESSAGE NOTIFY + PHOTO PLACEHOLDER RC7 END === */


/* === ANNOUNCEMENT EXTERNAL SHARING SCAFFOLD RC7 START === */
.announcement-external-setting.admin-locked{opacity:.7}
.announcement-external-setting .form-field-hint{display:block;margin-top:6px}
.announcement-external-option{margin-top:2px}
.announcement-external-option.hidden{display:none!important}
/* === ANNOUNCEMENT EXTERNAL SHARING SCAFFOLD RC7 END === */

/* ==========================================================
   Login form presets — Classic / Gradient Glass
   Classic intentionally adds no runtime overrides. The new preset is
   activated only by body.login-form-style-gradient-glass.
   ========================================================== */
.branding-login-style-picker{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:2px;
}
.branding-login-style-option{
  appearance:none;
  border:1px solid var(--app-border);
  border-radius:15px;
  background:var(--app-surface-soft);
  color:var(--app-text);
  min-width:0;
  min-height:98px;
  padding:10px;
  display:grid;
  grid-template-columns:74px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease;
}
.branding-login-style-option:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--app-blue) 48%,var(--app-border))}
.branding-login-style-option.active{
  border-color:color-mix(in srgb,var(--app-blue) 72%,var(--app-border));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--app-blue) 11%,transparent);
  background:color-mix(in srgb,var(--app-blue) 6%,var(--app-surface-soft));
}
.branding-login-style-option>span:nth-child(2){min-width:0}
.branding-login-style-option strong,.branding-login-style-option small{display:block}
.branding-login-style-option strong{font-size:12px;font-weight:850}
.branding-login-style-option small{margin-top:4px;color:var(--app-muted);font-size:9px;line-height:1.35}
.branding-login-style-option>.branding-login-style-badge{
  align-self:start;
  border-radius:999px;
  padding:5px 8px;
  background:color-mix(in srgb,var(--app-blue) 11%,var(--app-surface));
  color:var(--app-blue);
  font-size:8px;
  white-space:nowrap;
}
.branding-login-style-preview{
  width:74px;
  height:76px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.17);
  position:relative;
  overflow:hidden;
  display:grid;
  align-content:center;
  gap:6px;
  padding:11px 9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.branding-login-style-preview::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(145deg,#071321,#1d2732 58%,#5b3b27);
  z-index:0;
}
.branding-login-style-preview>*{position:relative;z-index:1;display:block}
.branding-login-style-preview i{height:9px;border-radius:4px;border:1px solid rgba(255,255,255,.22);background:rgba(9,14,23,.24)}
.branding-login-style-preview em{height:12px;border-radius:5px;background:linear-gradient(90deg,#355bd6,#2a83d5);box-shadow:0 4px 12px rgba(31,93,187,.18)}
.branding-login-style-preview.preview-gradient::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(145deg,rgba(10,13,22,.70),rgba(31,24,30,.58) 56%,rgba(86,49,33,.42));
  backdrop-filter:blur(3px);
}
.branding-login-style-preview.preview-gradient i{background:linear-gradient(135deg,rgba(31,35,47,.72),rgba(73,48,40,.42));border-color:rgba(255,255,255,.28)}
.branding-login-style-preview.preview-gradient em{background:linear-gradient(90deg,#416df6 0%,#6359ec 52%,#8d4fe4 100%);box-shadow:0 4px 16px rgba(91,72,231,.30)}
.branding-login-style-note{margin:0;color:var(--app-muted);font-size:9px;line-height:1.4}
@media(max-width:760px){
  .branding-login-style-picker{grid-template-columns:1fr}
  .branding-login-style-option{grid-template-columns:68px minmax(0,1fr) auto;min-height:90px}
  .branding-login-style-preview{width:68px;height:70px}
}

/* Gradient Glass runtime. The per-UK transparency controls still work because
   their existing --branding-login-*-*-visible variables are reused here. */
body.login-form-style-gradient-glass:not(.app-mode) .login-layout,
body.login-form-style-gradient-glass:not(.app-mode) .brand,
body.login-form-style-gradient-glass:not(.app-mode) #loginForm{
  font-family:"Manrope","SF Pro Display","SF Pro Text","Segoe UI",ui-sans-serif,system-ui,sans-serif;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm{
  border-radius:30px!important;
  border-color:rgba(238,228,218,.28)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm{
  background:linear-gradient(145deg,
    rgb(12 15 24 / calc(.72 * var(--branding-login-light-card-visible,1))),
    rgb(28 23 30 / calc(.61 * var(--branding-login-light-card-visible,1))) 57%,
    rgb(68 42 31 / calc(.46 * var(--branding-login-light-card-visible,1))))!important;
  -webkit-backdrop-filter:blur(calc(18px * var(--branding-login-light-card-visible,1))) saturate(1.12)!important;
  backdrop-filter:blur(calc(18px * var(--branding-login-light-card-visible,1))) saturate(1.12)!important;
}
html[data-theme="dark"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm{
  background:linear-gradient(145deg,
    rgb(10 13 22 / calc(.75 * var(--branding-login-dark-card-visible,1))),
    rgb(27 22 29 / calc(.64 * var(--branding-login-dark-card-visible,1))) 57%,
    rgb(66 40 29 / calc(.48 * var(--branding-login-dark-card-visible,1))))!important;
  -webkit-backdrop-filter:blur(calc(18px * var(--branding-login-dark-card-visible,1))) saturate(1.12)!important;
  backdrop-filter:blur(calc(18px * var(--branding-login-dark-card-visible,1))) saturate(1.12)!important;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm::before{
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.010) 44%,rgba(220,151,92,.035))!important;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading h2{
  color:#f7f8fb!important;
  font-weight:750;
  letter-spacing:-.025em;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading p,
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .form-row,
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .demo-note,
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .eye-button{
  color:rgba(239,241,248,.78)!important;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .link-button{color:rgba(244,239,236,.88)!important}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{
  border-color:rgba(235,236,244,.27)!important;
  border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
  -webkit-backdrop-filter:blur(8px) saturate(1.06)!important;
  backdrop-filter:blur(8px) saturate(1.06)!important;
}
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{
  background:linear-gradient(135deg,
    rgb(27 31 42 / calc(.43 * var(--branding-login-light-fields-visible,1))),
    rgb(67 45 39 / calc(.30 * var(--branding-login-light-fields-visible,1))))!important;
}
html[data-theme="dark"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{
  background:linear-gradient(135deg,
    rgb(24 28 39 / calc(.45 * var(--branding-login-dark-fields-visible,1))),
    rgb(63 42 36 / calc(.31 * var(--branding-login-dark-fields-visible,1))))!important;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap:focus-within{
  border-color:rgba(116,119,244,.72)!important;
  box-shadow:0 0 0 3px rgba(88,94,238,.12),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input{color:#f8f8fb!important;font-weight:500}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input::placeholder{color:rgba(231,233,241,.73)!important;opacity:1!important}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .field-icon{color:rgba(239,240,247,.82)!important}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .remember input{accent-color:#4f79f4}
body.login-form-style-gradient-glass:not(.app-mode) #loginButton{
  border-radius:16px!important;
  background:linear-gradient(90deg,#416df6 0%,#6259ec 52%,#8d4fe4 100%)!important;
  box-shadow:0 15px 34px rgba(74,76,221,.28),inset 0 1px 0 rgba(255,255,255,.17)!important;
  font-weight:750!important;
  letter-spacing:-.01em;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginButton:hover{filter:brightness(1.06) saturate(1.05)!important}
body.login-form-style-gradient-glass:not(.app-mode) .brand h1{font-weight:350;letter-spacing:.115em}
body.login-form-style-gradient-glass:not(.app-mode) .brand p{font-weight:650;letter-spacing:.52em}
@media(max-width:720px){
  html.mobile-device body.login-form-style-gradient-glass:not(.app-mode) #loginForm{border-radius:28px!important;padding:24px 18px 20px}
  html.mobile-device body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{border-radius:15px!important}
  html.mobile-device body.login-form-style-gradient-glass:not(.app-mode) #loginButton{border-radius:15px!important;min-height:54px}
}

/* ==========================================================
   Login Gradient Glass hotfix 2
   - preview mirrors selected preset
   - stronger reference-like glass/gradient treatment
   ========================================================== */
.branding-login-mock{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;padding:12px;
  color:#fff;pointer-events:none;text-shadow:0 1px 10px rgba(0,0,0,.28);
}
.branding-login-brand-preview{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1}
.branding-login-brand-preview .branding-preview-runtime-logo{width:34px;height:34px;margin:0 0 1px}
.branding-login-brand-preview>strong{font-size:10px;font-weight:500;letter-spacing:.14em}
.branding-login-brand-preview>small{font-size:4.5px;font-weight:700;letter-spacing:.34em;opacity:.9}
.branding-login-card{
  position:relative!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;
  width:min(58%,270px)!important;min-width:170px;padding:12px 13px!important;border-radius:14px!important;
  display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:7px!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 12px 32px rgba(0,0,0,.18)!important;
}
.branding-login-card>.branding-preview-runtime-logo,.branding-login-card>strong,.branding-login-card>small{display:none!important}
.branding-login-card h4{margin:0;text-align:center;font-size:10px;line-height:1.2;font-weight:800;color:#fff}
.branding-login-card h4 span{color:#d7b28d}
.branding-login-card p{margin:-2px 0 2px;text-align:center;font-size:5.4px;line-height:1.3;color:rgba(245,246,251,.78)}
.branding-login-card>i{
  display:flex!important;align-items:center!important;width:100%!important;height:24px!important;padding:0 9px!important;
  border-radius:7px!important;border:1px solid rgba(255,255,255,.24)!important;font-style:normal!important;
  opacity:1!important;background:rgba(11,17,28,.34)!important;
}
.branding-login-card>i>b{font-size:5.7px;font-weight:500;color:rgba(246,247,252,.70)}
.branding-login-card>button{
  width:100%!important;height:25px!important;border-radius:7px!important;padding:0 10px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:13px!important;
  color:#fff!important;font-size:6.5px!important;font-weight:800!important;
}
.branding-login-card>button span{font-size:8px}.branding-login-card>button b{font-weight:800}
.branding-login-mock.preview-classic .branding-login-card{background:rgba(8,24,43,.86)!important;backdrop-filter:blur(5px)!important}
.branding-login-mock.preview-classic .branding-login-card>button{background:#1687e9!important}
.branding-login-mock.preview-gradient-glass .branding-login-card{
  background:linear-gradient(145deg,rgb(10 13 22 / calc(.76 * var(--editor-card-visible,1))),rgb(31 24 30 / calc(.65 * var(--editor-card-visible,1))) 57%,rgb(83 48 32 / calc(.52 * var(--editor-card-visible,1))))!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.12)!important;backdrop-filter:blur(12px) saturate(1.12)!important;
  border-color:rgba(239,229,219,.32)!important;box-shadow:0 16px 42px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.branding-login-mock.preview-gradient-glass .branding-login-card>i{background:linear-gradient(135deg,rgb(28 33 46 / calc(.58 * var(--editor-fields-visible,1))),rgb(74 47 38 / calc(.38 * var(--editor-fields-visible,1))))!important}
.branding-login-mock.preview-gradient-glass .branding-login-card>button{
  background:linear-gradient(90deg,#416df6 0%,#6259ec 52%,#8d4fe4 100%)!important;
  box-shadow:0 7px 18px rgba(76,72,221,.28)!important;
}
.branding-crop-editor.preview-mobile .branding-login-mock{justify-content:center;padding:18px 12px}
.branding-crop-editor.preview-mobile .branding-login-card{width:84%!important;min-width:0!important;padding:15px 13px!important;border-radius:17px!important}
.branding-crop-editor.preview-mobile .branding-login-card h4{font-size:13px}.branding-crop-editor.preview-mobile .branding-login-card p{font-size:7px}
.branding-crop-editor.preview-mobile .branding-login-card>i{height:32px!important}.branding-crop-editor.preview-mobile .branding-login-card>i>b{font-size:7.5px}
.branding-crop-editor.preview-mobile .branding-login-card>button{height:34px!important;font-size:8px!important}

body.login-form-style-gradient-glass:not(.app-mode) #loginForm{
  border:1px solid rgba(239,229,219,.31)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.40),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm{
  background:linear-gradient(145deg,
    rgb(10 13 22 / calc(.78 * var(--branding-login-light-card-visible,1))),
    rgb(30 24 31 / calc(.67 * var(--branding-login-light-card-visible,1))) 57%,
    rgb(84 49 33 / calc(.52 * var(--branding-login-light-card-visible,1))))!important;
  -webkit-backdrop-filter:blur(calc(18px * var(--branding-login-light-card-visible,1))) saturate(1.14)!important;
  backdrop-filter:blur(calc(18px * var(--branding-login-light-card-visible,1))) saturate(1.14)!important;
}
html[data-theme="dark"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm{
  background:linear-gradient(145deg,
    rgb(8 11 19 / calc(.80 * var(--branding-login-dark-card-visible,1))),
    rgb(28 22 30 / calc(.69 * var(--branding-login-dark-card-visible,1))) 57%,
    rgb(78 44 30 / calc(.54 * var(--branding-login-dark-card-visible,1))))!important;
  -webkit-backdrop-filter:blur(calc(18px * var(--branding-login-dark-card-visible,1))) saturate(1.14)!important;
  backdrop-filter:blur(calc(18px * var(--branding-login-dark-card-visible,1))) saturate(1.14)!important;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading{margin-bottom:24px}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading h2{
  font-family:"Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif!important;
  font-size:28px!important;font-weight:600!important;letter-spacing:-.025em!important;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .login-heading-accent{color:#d6b089!important;font-weight:600!important}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading p{
  font-family:"Avenir Next","Segoe UI Variable Text","Segoe UI",system-ui,sans-serif!important;
  font-size:13px!important;font-weight:400!important;color:rgba(238,239,245,.73)!important;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{
  height:62px!important;border:1px solid rgba(236,236,243,.29)!important;border-radius:16px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{
  background:linear-gradient(135deg,
    rgb(30 34 47 / calc(.55 * var(--branding-login-light-fields-visible,1))),
    rgb(69 45 38 / calc(.36 * var(--branding-login-light-fields-visible,1))))!important;
}
html[data-theme="dark"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{
  background:linear-gradient(135deg,
    rgb(25 29 42 / calc(.57 * var(--branding-login-dark-fields-visible,1))),
    rgb(64 41 36 / calc(.38 * var(--branding-login-dark-fields-visible,1))))!important;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginButton{
  min-height:58px!important;border-radius:16px!important;
  background:linear-gradient(90deg,#416df6 0%,#6259ec 52%,#8d4fe4 100%)!important;
  box-shadow:0 15px 34px rgba(74,76,221,.31),inset 0 1px 0 rgba(255,255,255,.18)!important;
  font-family:"Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif!important;
  font-size:18px!important;font-weight:700!important;
}
body.login-form-style-gradient-glass:not(.app-mode) .brand h1{
  font-family:"Avenir Next","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif!important;
  font-weight:300!important;letter-spacing:.13em!important;
}
body.login-form-style-gradient-glass:not(.app-mode) .brand p{font-family:"Avenir Next","Segoe UI",system-ui,sans-serif!important;font-weight:650!important}
@media(max-width:720px){
  html.mobile-device body.login-form-style-gradient-glass:not(.app-mode) #loginForm{padding:25px 18px 21px!important;border-radius:29px!important}
  html.mobile-device body.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading h2{font-size:25px!important}
  html.mobile-device body.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading p{font-size:12px!important}
  html.mobile-device body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{height:60px!important}
  html.mobile-device body.login-form-style-gradient-glass:not(.app-mode) #loginButton{min-height:56px!important}
}

/* ==========================================================
   Login Gradient Glass hotfix 3
   - movable login panel per desktop/mobile
   - editable login copy
   - graphite -> warm bronze button matching the reference
   ========================================================== */
body:not(.app-mode) #loginForm{
  transform:translate(var(--login-form-desktop-shift-x,0),var(--login-form-desktop-shift-y,0));
  transition:transform .18s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
  will-change:transform;
}
html.mobile-device body:not(.app-mode) #loginForm{
  transform:translate(var(--login-form-mobile-shift-x,0),var(--login-form-mobile-shift-y,0));
}

body.login-form-style-gradient-glass:not(.app-mode) #loginButton{
  background:
    radial-gradient(ellipse at 88% 10%,rgba(221,181,126,.38) 0%,rgba(221,181,126,.16) 24%,rgba(221,181,126,0) 50%),
    linear-gradient(90deg,#2a2d32 0%,#25282d 42%,#3a3837 61%,#9b7f5f 100%)!important;
  border:1px solid rgba(255,255,255,.055)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 11px 28px rgba(0,0,0,.20)!important;
  color:#f7f5f3!important;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginButton:hover{
  filter:brightness(1.035)!important;
}

.branding-login-card[data-login-panel-preview]{
  position:absolute!important;
  left:var(--preview-login-x,50%)!important;
  top:var(--preview-login-y,50%)!important;
  right:auto!important;bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  pointer-events:auto!important;
  cursor:grab!important;
  touch-action:none!important;
  user-select:none!important;
  z-index:5!important;
}
.branding-login-card[data-login-panel-preview].is-dragging{cursor:grabbing!important;box-shadow:0 18px 48px rgba(0,0,0,.42),0 0 0 2px rgba(99,173,255,.42)!important}
.branding-login-preview-row{display:flex;justify-content:space-between;gap:6px;width:100%;padding:0 2px;color:rgba(245,246,251,.72)}
.branding-login-preview-row small{font-size:4.7px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.branding-login-mock.preview-gradient-glass .branding-login-card>button{
  background:
    radial-gradient(ellipse at 88% 10%,rgba(221,181,126,.38) 0%,rgba(221,181,126,.16) 24%,rgba(221,181,126,0) 50%),
    linear-gradient(90deg,#2a2d32 0%,#25282d 42%,#3a3837 61%,#9b7f5f 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 7px 18px rgba(0,0,0,.24)!important;
}

.branding-login-ui-settings{
  margin:14px 0 16px;padding:16px;border:1px solid rgba(93,157,255,.23);border-radius:18px;
  background:linear-gradient(145deg,rgba(12,27,47,.58),rgba(15,25,41,.42));
}
.branding-login-ui-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px}
.branding-login-ui-head>div:first-child{display:flex;flex-direction:column;gap:4px}
.branding-login-ui-head strong{font-size:15px;color:var(--text)}
.branding-login-ui-head small{font-size:11px;line-height:1.45;color:var(--text-soft)}
.branding-login-position-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:12px;border:1px solid rgba(126,175,255,.16);border-radius:14px;background:rgba(7,18,31,.24)}
.branding-login-position-grid>label{display:grid;grid-template-columns:minmax(145px,.8fr) 1fr auto;align-items:center;gap:10px;font-size:11px;color:var(--text-soft)}
.branding-login-position-grid input[type="range"]{width:100%}
.branding-login-position-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;align-items:center}
.branding-login-copy-form{margin-top:14px}
.branding-login-copy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.branding-login-copy-grid label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--text-soft)}
.branding-login-copy-grid input{
  width:100%;min-height:40px;border:1px solid rgba(126,175,255,.18);border-radius:10px;padding:0 11px;
  background:rgba(6,16,29,.34);color:var(--text);outline:none;
}
.branding-login-copy-grid input:focus{border-color:rgba(74,154,255,.68);box-shadow:0 0 0 3px rgba(37,129,238,.10)}
.branding-login-copy-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.branding-login-copy-form .primary-button.compact{width:auto;min-height:38px;padding:0 16px;border-radius:10px;font-size:12px}
.branding-login-panel-device-switch{flex:0 0 auto}

@media(max-width:760px){
  .branding-login-ui-head{flex-direction:column}
  .branding-login-position-grid,.branding-login-copy-grid{grid-template-columns:1fr}
  .branding-login-position-grid>label{grid-template-columns:1fr;gap:6px}
  .branding-login-position-actions,.branding-login-copy-actions{justify-content:stretch;flex-wrap:wrap}
  .branding-login-position-actions button,.branding-login-copy-actions button{flex:1 1 auto}
}
.branding-crop-editor.preview-mobile .branding-login-card[data-login-panel-preview]{
  left:var(--preview-login-x,50%)!important;
  top:var(--preview-login-y,50%)!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
}
body.login-form-style-gradient-glass:not(.app-mode) #loginButton{position:relative!important;justify-content:center!important;gap:0!important;padding:0 58px 0 24px!important}
body.login-form-style-gradient-glass:not(.app-mode) #loginButton>span:last-child{position:absolute;right:24px;top:50%;transform:translateY(-52%);font-size:27px;line-height:1;font-weight:300;color:rgba(255,255,255,.92)}
body.login-form-style-gradient-glass:not(.app-mode) #loginButtonText{font-weight:500!important;letter-spacing:.01em}
.branding-login-mock.preview-gradient-glass .branding-login-card>button{position:relative!important;justify-content:center!important;padding-right:22px!important}
.branding-login-mock.preview-gradient-glass .branding-login-card>button span{position:absolute;right:8px;font-weight:300!important}
.branding-login-style-preview.preview-gradient em{
  background:radial-gradient(ellipse at 88% 8%,rgba(221,181,126,.40),transparent 45%),linear-gradient(90deg,#2a2d32 0%,#25282d 42%,#3a3837 61%,#9b7f5f 100%)!important;
  box-shadow:0 4px 16px rgba(0,0,0,.28)!important;
}

/* ==========================================================
   LOGIN + OFFICE GOLD HOTFIX 4
   - no theme switch on login
   - fixed mobile viewport / no focus zoom
   - panel scale per desktop/mobile
   - login typography presets
   - Office Gold visual preset for the authenticated app
   ========================================================== */

/* Login theme is chosen after authentication only. */
body:not(.app-mode):not(.visual-preset-gradient-office-gold) .topbar .theme-toggle{display:flex!important}
body:not(.app-mode):not(.visual-preset-gradient-office-gold) .topbar{justify-content:space-between!important}
body:not(.app-mode).visual-preset-gradient-office-gold .topbar .theme-toggle{display:none!important}
body:not(.app-mode).visual-preset-gradient-office-gold .topbar{justify-content:flex-start!important}

/* Keep the login viewport stable. Pinch zoom is already blocked by the boot
   script; 16px fields also prevent iOS focus-zoom. */
body:not(.app-mode){
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body:not(.app-mode) .page-shell{
  min-height:100dvh!important;
  height:100dvh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:none;
}
html.mobile-device body:not(.app-mode) #loginForm input{
  font-size:16px!important;
}
html.mobile-device body:not(.app-mode) #loginView,
html.mobile-device body:not(.app-mode) #loginForm{
  touch-action:pan-y;
}

/* Runtime panel scale + saved position. */
body:not(.app-mode) #loginForm{
  transform:
    translate(var(--login-form-desktop-shift-x,0),var(--login-form-desktop-shift-y,0))
    scale(var(--login-form-desktop-scale,1))!important;
  transform-origin:center center!important;
}
html.mobile-device body:not(.app-mode) #loginForm{
  transform:
    translate(var(--login-form-mobile-shift-x,0),var(--login-form-mobile-shift-y,0))
    scale(var(--login-form-mobile-scale,1))!important;
}
.branding-login-card[data-login-panel-preview]{
  transform:translate(-50%,-50%) scale(var(--preview-login-scale,1))!important;
  transform-origin:center center!important;
}
.branding-crop-editor.preview-mobile .branding-login-card[data-login-panel-preview]{
  transform:translate(-50%,-50%) scale(var(--preview-login-scale,1))!important;
}

/* Login font presets. No external font files are required. */
body[data-login-font-style="elegant"]:not(.app-mode) .brand,
body[data-login-font-style="elegant"]:not(.app-mode) #loginForm,
.branding-login-mock.login-font-elegant{
  font-family:"Avenir Next","SF Pro Display","Segoe UI",ui-sans-serif,system-ui,sans-serif!important;
}
body[data-login-font-style="elegant"]:not(.app-mode) #loginForm .card-heading h2{font-weight:600!important;letter-spacing:-.028em!important}
body[data-login-font-style="elegant"]:not(.app-mode) #loginForm input,
body[data-login-font-style="elegant"]:not(.app-mode) #loginForm button{font-weight:500}

body[data-login-font-style="modern"]:not(.app-mode) .brand,
body[data-login-font-style="modern"]:not(.app-mode) #loginForm,
.branding-login-mock.login-font-modern{
  font-family:Inter,"SF Pro Text","Segoe UI",ui-sans-serif,system-ui,sans-serif!important;
}
body[data-login-font-style="modern"]:not(.app-mode) #loginForm .card-heading h2{font-weight:760!important;letter-spacing:-.02em!important}

body[data-login-font-style="strong"]:not(.app-mode) .brand,
body[data-login-font-style="strong"]:not(.app-mode) #loginForm,
.branding-login-mock.login-font-strong{
  font-family:"Segoe UI Variable","Segoe UI",Arial,ui-sans-serif,system-ui,sans-serif!important;
}
body[data-login-font-style="strong"]:not(.app-mode) #loginForm .card-heading h2{font-weight:850!important;letter-spacing:-.03em!important}
body[data-login-font-style="strong"]:not(.app-mode) #loginForm input,
body[data-login-font-style="strong"]:not(.app-mode) #loginForm button{font-weight:700!important}

body[data-login-font-style="compact"]:not(.app-mode) .brand,
body[data-login-font-style="compact"]:not(.app-mode) #loginForm,
.branding-login-mock.login-font-compact{
  font-family:"Arial Narrow","Aptos Narrow","Segoe UI",Arial,sans-serif!important;
  font-stretch:condensed;
}
body[data-login-font-style="compact"]:not(.app-mode) #loginForm .card-heading h2{font-weight:700!important;letter-spacing:.005em!important}
body[data-login-font-style="compact"]:not(.app-mode) #loginForm{letter-spacing:-.005em}

body[data-login-font-style="classic"]:not(.app-mode) .brand,
body[data-login-font-style="classic"]:not(.app-mode) #loginForm,
.branding-login-mock.login-font-classic{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
}

/* Admin controls: panel scale and typography. */
.branding-login-scale-control{grid-column:1/-1}
.branding-login-font-settings{margin-top:14px;padding:12px;border:1px solid rgba(126,175,255,.16);border-radius:14px;background:rgba(7,18,31,.24)}
.branding-login-font-head{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.branding-login-font-head strong{font-size:13px;color:var(--app-text)}
.branding-login-font-head small{font-size:9px;color:var(--app-muted);line-height:1.4}
.branding-login-font-picker{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.branding-login-font-picker button{min-width:0;border:1px solid var(--app-border);border-radius:12px;background:var(--app-surface-strong);color:var(--app-text);padding:10px 9px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.branding-login-font-picker button.active{border-color:color-mix(in srgb,var(--app-blue) 70%,var(--app-border));background:var(--app-blue-soft);box-shadow:0 0 0 2px color-mix(in srgb,var(--app-blue) 10%,transparent)}
.branding-login-font-picker strong{font-size:10px}
.branding-login-font-picker small{font-size:8px;color:var(--app-muted)}
.branding-login-font-picker em{margin-top:6px;font-size:12px;font-style:normal;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.branding-login-font-picker [data-login-font-style="elegant"] em{font-family:"Avenir Next","Segoe UI",sans-serif;font-weight:500;letter-spacing:-.02em}
.branding-login-font-picker [data-login-font-style="modern"] em{font-family:Inter,"Segoe UI",sans-serif;font-weight:700}
.branding-login-font-picker [data-login-font-style="strong"] em{font-family:"Segoe UI",Arial,sans-serif;font-weight:850}
.branding-login-font-picker [data-login-font-style="compact"] em{font-family:"Arial Narrow","Segoe UI",sans-serif;font-weight:700;letter-spacing:.01em}
.branding-login-font-picker [data-login-font-style="classic"] em{font-family:Inter,"Segoe UI",sans-serif;font-weight:650}
@media(max-width:900px){.branding-login-font-picker{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.branding-login-font-picker{grid-template-columns:1fr}}

/* Application preset picker. */
.branding-app-style-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.branding-app-style-option{appearance:none;border:1px solid var(--app-border);border-radius:15px;background:var(--app-surface-soft,var(--app-surface));color:var(--app-text);padding:10px;display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:11px;align-items:center;text-align:left;cursor:pointer}
.branding-app-style-option.active{border-color:color-mix(in srgb,var(--app-blue) 72%,var(--app-border));box-shadow:0 0 0 2px color-mix(in srgb,var(--app-blue) 11%,transparent)}
.branding-app-style-option span:nth-child(2){min-width:0}.branding-app-style-option strong,.branding-app-style-option small{display:block}.branding-app-style-option strong{font-size:12px}.branding-app-style-option small{font-size:9px;color:var(--app-muted);margin-top:4px;line-height:1.35}.branding-app-style-badge{align-self:start;border-radius:999px;padding:5px 8px;background:var(--app-blue-soft);color:var(--app-blue);font-size:8px;white-space:nowrap}
.branding-app-style-preview{height:72px;border-radius:11px;border:1px solid rgba(255,255,255,.14);overflow:hidden;position:relative;display:grid;grid-template-columns:22px 1fr;grid-template-rows:16px 1fr;gap:5px;padding:8px;background:#eef3f8}
.branding-app-style-preview i{display:block;border-radius:5px;background:#dce5ee}.branding-app-style-preview i:first-child{grid-row:1/3;background:#cfdce8}.branding-app-style-preview i:nth-child(2){background:#e3eaf0}.branding-app-style-preview i:nth-child(3){background:white;border:1px solid #dde5ed}
.branding-app-style-preview.preview-office-gold{background:linear-gradient(135deg,rgba(9,12,16,.96),rgba(28,24,23,.92)),url('/assets/office-gold-bg.webp') center/cover}.branding-app-style-preview.preview-office-gold i:first-child{background:linear-gradient(180deg,rgba(24,23,22,.88),rgba(87,61,41,.60))}.branding-app-style-preview.preview-office-gold i:nth-child(2){background:rgba(31,29,29,.78);border:1px solid rgba(211,172,126,.20)}.branding-app-style-preview.preview-office-gold i:nth-child(3){background:linear-gradient(135deg,rgba(27,29,31,.86),rgba(91,67,49,.66));border:1px solid rgba(211,172,126,.22)}
@media(max-width:760px){.branding-app-style-picker{grid-template-columns:1fr}.branding-app-style-option{grid-template-columns:78px minmax(0,1fr) auto}}

/* === Office Gold authenticated application ================================= */
body.app-mode.app-visual-office-gold{
  --app-bg:#0a0d11;
  --app-surface:rgba(17,19,22,.76);
  --app-surface-strong:rgba(22,24,27,.86);
  --app-border:rgba(211,172,126,.20);
  --app-text:#f4f1ed;
  --app-muted:#b9b0a7;
  --app-blue:#d0aa7f;
  --app-blue-soft:rgba(208,170,127,.13);
  --app-green:#8fc7a7;
  --app-green-soft:rgba(73,139,105,.16);
  --app-orange:#ddb176;
  --app-orange-soft:rgba(170,116,58,.18);
  --app-red:#e38181;
  --app-red-soft:rgba(160,65,65,.18);
  --app-violet:#aa8f86;
  --app-shadow:0 18px 45px rgba(0,0,0,.26);
  background:#090b0e!important;
}
html[data-theme="light"] body.app-mode.app-visual-office-gold{
  --app-surface:rgba(34,31,29,.70);
  --app-surface-strong:rgba(43,39,36,.78);
  --app-border:rgba(228,194,154,.23);
  --app-text:#fffaf5;
  --app-muted:#cfc3b8;
  --app-blue:#e0b98a;
  --app-blue-soft:rgba(224,185,138,.15);
}
html[data-theme="dark"] body.app-mode.app-visual-office-gold{
  --app-surface:rgba(13,15,18,.78);
  --app-surface-strong:rgba(18,20,23,.88);
  --app-border:rgba(203,161,113,.19);
  --app-text:#f5f2ee;
  --app-muted:#aca49c;
  --app-blue:#cba274;
  --app-blue-soft:rgba(203,162,116,.12);
}
body.app-mode.app-visual-office-gold::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,rgba(4,6,8,.82) 0%,rgba(7,9,12,.69) 42%,rgba(42,28,20,.52) 100%),
    url('/assets/office-gold-bg.webp') center center/cover no-repeat;
  filter:saturate(.96) contrast(1.04);
}
body.app-mode.app-visual-office-gold .page-shell{position:relative;z-index:1;background:transparent!important}
body.app-mode.app-visual-office-gold .app-view{background:transparent!important}
body.app-mode.app-visual-office-gold .app-header{
  background:linear-gradient(90deg,rgba(11,14,18,.88),rgba(27,24,23,.76))!important;
  border-color:rgba(211,172,126,.18)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.05)!important;
  backdrop-filter:blur(20px) saturate(1.05)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.18)!important;
}
body.app-mode.app-visual-office-gold .panel-card,
body.app-mode.app-visual-office-gold .content-panel,
body.app-mode.app-visual-office-gold .settings-tabs,
body.app-mode.app-visual-office-gold .requests-toolbar,
body.app-mode.app-visual-office-gold .announcement-view-tabs{
  background:linear-gradient(145deg,rgba(18,20,23,.82),rgba(32,27,25,.70))!important;
  border-color:rgba(211,172,126,.18)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.03)!important;
  backdrop-filter:blur(18px) saturate(1.03)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.app-mode.app-visual-office-gold .dashboard-hero,
body.app-mode.app-visual-office-gold .owner-weather-hero{
  background:
    linear-gradient(120deg,rgba(21,23,25,.78),rgba(54,39,29,.58)),
    url('/assets/office-gold-bg.webp') center 42%/cover no-repeat!important;
  border-color:rgba(220,177,128,.24)!important;
}
body.app-mode.app-visual-office-gold .quick-grid button,
body.app-mode.app-visual-office-gold .owner-action,
body.app-mode.app-visual-office-gold .stat-card,
body.app-mode.app-visual-office-gold .work-grid article,
body.app-mode.app-visual-office-gold .announcement-grid button,
body.app-mode.app-visual-office-gold .registry-row,
body.app-mode.app-visual-office-gold .object-summary-grid article,
body.app-mode.app-visual-office-gold .qr-summary article,
body.app-mode.app-visual-office-gold .request-detail-grid>div,
body.app-mode.app-visual-office-gold .request-detail-description{
  background:linear-gradient(145deg,rgba(21,23,26,.78),rgba(45,34,28,.56))!important;
  border-color:rgba(211,172,126,.16)!important;
}
body.app-mode.app-visual-office-gold .nav-link:hover,
body.app-mode.app-visual-office-gold .nav-link.active,
body.app-mode.app-visual-office-gold .settings-tab.active,
body.app-mode.app-visual-office-gold .role-button.active{
  background:linear-gradient(90deg,rgba(176,127,75,.22),rgba(216,178,132,.16))!important;
  color:#f0c99b!important;
  border-color:rgba(218,178,130,.22)!important;
}
body.app-mode.app-visual-office-gold .primary-button,
body.app-mode.app-visual-office-gold .save-modal-button,
body.app-mode.app-visual-office-gold .role-button.active{
  background:linear-gradient(90deg,#3a3b3d 0%,#302f2f 40%,#67513f 72%,#b08a61 100%)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 26px rgba(0,0,0,.18)!important;
}
body.app-mode.app-visual-office-gold input,
body.app-mode.app-visual-office-gold textarea,
body.app-mode.app-visual-office-gold select,
body.app-mode.app-visual-office-gold .admin-search,
body.app-mode.app-visual-office-gold .chat-compose-row>input{
  background:rgba(11,13,16,.68)!important;
  border-color:rgba(211,172,126,.18)!important;
  color:var(--app-text)!important;
}
body.app-mode.app-visual-office-gold .app-logo-mark{color:#d6ad7c!important;filter:drop-shadow(0 0 10px rgba(214,173,124,.18))!important}
body.app-mode.app-visual-office-gold .eyebrow{color:#d7ad7c!important}
body.app-mode.app-visual-office-gold .desktop-sidebar{
  background:linear-gradient(180deg,rgba(9,12,15,.88),rgba(28,22,20,.80))!important;
  border-color:rgba(211,172,126,.18)!important;
  box-shadow:14px 0 40px rgba(0,0,0,.28)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  backdrop-filter:blur(18px)!important;
}
html:not(.mobile-device) body.app-mode.app-visual-office-gold .desktop-sidebar::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(180deg,rgba(5,8,11,.50),rgba(17,13,12,.74)),
    url('/assets/office-gold-bg.webp') 55% center/cover no-repeat!important;
  opacity:.86!important;
  filter:saturate(.92) contrast(1.04)!important;
  transform:none!important;
}
html:not(.mobile-device) body.app-mode.app-visual-office-gold .desktop-sidebar::after{
  display:block!important;
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:linear-gradient(90deg,rgba(3,5,7,.28),rgba(0,0,0,.08) 55%,rgba(186,132,82,.08))!important;
  pointer-events:none!important;
}
html:not(.mobile-device) body.app-mode.app-visual-office-gold .desktop-sidebar>*{position:relative!important;z-index:2!important}
body.app-mode.app-visual-office-gold .mobile-bottom-nav{
  background:linear-gradient(90deg,rgba(9,12,15,.94),rgba(31,24,21,.92))!important;
  border-color:rgba(211,172,126,.18)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  backdrop-filter:blur(18px)!important;
}
body.app-mode.app-visual-office-gold .mobile-bottom-link.active{color:#e0b786!important}


/* ==========================================================
   HOTFIX 5 — login editor persistence + iPhone readability
   ========================================================== */

/* On wide admin screens put the live login preview directly beside its
   controls. The current DOM order is retained so old installs remain safe. */
@media (min-width:1100px){
  .branding-login-style-group{
    display:grid!important;
    grid-template-columns:minmax(560px,1.25fr) minmax(390px,.75fr)!important;
    column-gap:16px!important;
    align-items:start!important;
  }
  .branding-login-style-group>.branding-group-heading,
  .branding-login-style-group>.branding-login-style-picker,
  .branding-login-style-group>.branding-login-style-note{grid-column:1/-1!important}
  .branding-login-style-group>.branding-theme-single{grid-column:1!important;grid-row:4!important;min-width:0!important}
  .branding-login-style-group>#brandingLoginUiSettings{grid-column:2!important;grid-row:4!important;min-width:0!important;margin-top:0!important;position:sticky!important;top:76px!important;max-height:calc(100vh - 92px);overflow:auto}
  .branding-login-style-group>.branding-app-style-group{grid-column:1/-1!important}
  #brandingLoginUiSettings .branding-login-position-grid>label{grid-template-columns:1fr!important;gap:6px!important}
  #brandingLoginUiSettings .branding-login-position-grid .branding-percent-box{justify-self:start!important}
  #brandingLoginUiSettings .branding-login-copy-grid{grid-template-columns:1fr 1fr!important}
}
.login-ui-autosave-status{margin-right:auto;font-size:9px;color:var(--app-muted);white-space:nowrap}
.login-ui-autosave-status[data-kind="saving"]{color:#d2a873}
.login-ui-autosave-status[data-kind="saved"]{color:#75b995}
.login-ui-autosave-status[data-kind="error"]{color:#df8585}

/* The protected Classic preset must look like the pre-theme login. */
body[data-login-form-style="classic"]:not(.app-mode) #loginForm{
  transform:none!important;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif!important;
}
body[data-login-form-style="classic"]:not(.app-mode) #loginForm .card-heading h2{font-weight:800!important;letter-spacing:normal!important}
body[data-login-form-style="classic"]:not(.app-mode) #loginForm input,
body[data-login-form-style="classic"]:not(.app-mode) #loginForm button{font-weight:inherit}

/* Larger authenticated UI on iPhone Pro / Pro Max class widths. We increase
   typography and touch targets, not the viewport or transform scale, so the
   layout stays stable and Safari cannot pan to an oversized canvas. */
@media (min-width:390px) and (max-width:480px){
  html.mobile-device body.app-mode .section-heading h2{font-size:17px!important;line-height:1.2!important}
  html.mobile-device body.app-mode .section-heading .eyebrow{font-size:10px!important}
  html.mobile-device body.app-mode .section-subcopy,
  html.mobile-device body.app-mode .panel-card p,
  html.mobile-device body.app-mode .content-panel p{font-size:11px!important;line-height:1.45!important}
  html.mobile-device body.app-mode .quick-grid button strong{font-size:13px!important}
  html.mobile-device body.app-mode .quick-grid button small{font-size:10px!important}
  html.mobile-device body.app-mode .stat-card span{font-size:10px!important}
  html.mobile-device body.app-mode .stat-card strong{font-size:26px!important}
  html.mobile-device body.app-mode .stat-card small{font-size:9.5px!important}
  html.mobile-device body.app-mode .text-button,
  html.mobile-device body.app-mode .ghost-button,
  html.mobile-device body.app-mode .primary-button{font-size:12px!important}
  html.mobile-device body.app-mode .settings-tab{font-size:11px!important;min-height:40px!important}
  html.mobile-device body.app-mode input,
  html.mobile-device body.app-mode textarea,
  html.mobile-device body.app-mode select{font-size:16px!important}
  html.mobile-device body.app-mode .mobile-bottom-link small{font-size:11px!important}
  html.mobile-device body.app-mode .app-brand-block strong{font-size:13px!important;max-width:58px!important}
  html.mobile-device body.app-mode .logout-action{font-size:10px!important;min-width:42px!important}
}


/* === THEME PROFILES HOTFIX 7 === */
/* Classic · Default keeps the original theme controls. Premium is one fixed mode. */
body.visual-preset-gradient-office-gold #themeToggle,
body.visual-preset-gradient-office-gold #appThemeToggle,
body.visual-preset-gradient-office-gold .mobile-weather-theme-toggle{display:none!important}
body.visual-preset-gradient-office-gold [data-branding-theme-group] .branding-theme-switch{display:none!important}
body.visual-preset-gradient-office-gold .branding-login-style-group>.branding-group-heading .branding-theme-switch{display:none!important}
.branding-theme-profile-picker .branding-login-style-option{min-height:104px}
.branding-theme-profile-info{opacity:.94}
/* Premium single mode intentionally ignores light/dark skin deltas. */
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold{color-scheme:dark}
/* Password managers need real native inputs; don't visually replace them. */
#loginForm input:-webkit-autofill,
#loginForm input:-webkit-autofill:hover,
#loginForm input:-webkit-autofill:focus{transition:background-color 99999s ease-out 0s;-webkit-text-fill-color:inherit!important}
/* === END THEME PROFILES HOTFIX 7 === */


/* HOTFIX 8: Classic keeps the original login theme switch. Premium remains locked. */
body:not(.app-mode)[data-visual-preset="classic-default"] #themeToggle{display:flex!important;visibility:visible!important;opacity:1!important}
html.mobile-device body:not(.app-mode)[data-visual-preset="classic-default"] .topbar{justify-content:flex-end!important}
body:not(.app-mode)[data-visual-preset="gradient-office-gold"] #themeToggle{display:none!important}

/* ==========================================================
   OFFICE GOLD FINALIZATION HOTFIX 9
   Scoped strictly to Gradient Glass · Office Gold.
   Classic · Default selectors and assets are untouched.
   ========================================================== */

/* The approved Gradient Glass login background is the black-stone / warm-gold
   office render. It intentionally ignores the Classic per-UK login photo while
   this preset is active, so the two theme profiles remain visually independent. */
html:not(.mobile-device) body.visual-preset-gradient-office-gold:not(.app-mode) .background{
  background-image:url('/assets/office-gold-desktop.webp')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  transform-origin:center center!important;
  filter:saturate(.94) contrast(1.05) brightness(.90)!important;
}
html.mobile-device body.visual-preset-gradient-office-gold:not(.app-mode) .background{
  background-image:url('/assets/office-gold-mobile.webp')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  transform-origin:center center!important;
  filter:saturate(.94) contrast(1.05) brightness(.91)!important;
}
body.visual-preset-gradient-office-gold:not(.app-mode) .background-overlay{
  background:linear-gradient(180deg,rgba(2,4,7,.06) 0%,rgba(3,5,8,.04) 38%,rgba(11,8,7,.13) 100%)!important;
}
body.visual-preset-gradient-office-gold:not(.app-mode) .brand-mark{
  color:#dfb57e!important;
  filter:drop-shadow(0 0 12px rgba(221,169,105,.18))!important;
}

/* Login button: keep the bronze glass button visually stable during auth.
   A compact spinner + “Входим” replaces the oversized “Проверяем…”. */
body.visual-preset-gradient-office-gold:not(.app-mode) #loginButton.is-authenticating{
  opacity:.96!important;
  cursor:wait!important;
  filter:none!important;
}
body.visual-preset-gradient-office-gold:not(.app-mode) #loginButton .login-progress{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  position:static!important;
  transform:none!important;
  width:auto!important;
  white-space:nowrap!important;
}
body.visual-preset-gradient-office-gold:not(.app-mode) #loginButton .login-progress b{
  font:inherit!important;
  font-weight:600!important;
  letter-spacing:.01em!important;
}
body.visual-preset-gradient-office-gold:not(.app-mode) #loginButton .login-progress i{
  display:block!important;
  width:16px!important;
  height:16px!important;
  border-radius:50%!important;
  border:2px solid rgba(255,255,255,.32)!important;
  border-top-color:#fff!important;
  animation:officeGoldLoginSpin .72s linear infinite!important;
}
@keyframes officeGoldLoginSpin{to{transform:rotate(360deg)}}

/* Theme-specific launch mark / shortcut visual. */
body.visual-preset-gradient-office-gold .auth-boot-mark{
  width:108px!important;
  height:108px!important;
  border-radius:28px!important;
  background:url('/assets/office-gold-app-icon.png') center/contain no-repeat!important;
  color:transparent!important;
  filter:drop-shadow(0 16px 36px rgba(0,0,0,.42)) drop-shadow(0 0 18px rgba(216,164,101,.17))!important;
}
body.visual-preset-gradient-office-gold .auth-boot-mark>span{display:none!important}

/* Authenticated Office Gold: use the same approved architectural render on
   desktop and phone; cards stay dark enough that content remains readable. */
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold::before{
  background:
    linear-gradient(115deg,rgba(3,5,7,.84) 0%,rgba(5,7,9,.74) 43%,rgba(30,20,15,.58) 100%),
    url('/assets/office-gold-desktop.webp') center center/cover no-repeat!important;
  filter:saturate(.92) contrast(1.05) brightness(.92)!important;
}
html.mobile-device body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold::before{
  background:
    linear-gradient(180deg,rgba(3,5,7,.72) 0%,rgba(5,7,9,.70) 52%,rgba(26,17,13,.60) 100%),
    url('/assets/office-gold-mobile.webp') center center/cover no-repeat!important;
  filter:saturate(.93) contrast(1.04) brightness(.92)!important;
}

body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-hero,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero{
  background:
    linear-gradient(110deg,rgba(9,11,14,.87),rgba(35,25,20,.64)),
    url('/assets/office-gold-desktop.webp') center 48%/cover no-repeat!important;
  border-color:rgba(220,177,128,.28)!important;
}
html.mobile-device body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero{
  background:
    linear-gradient(110deg,rgba(8,10,13,.76),rgba(34,24,18,.56)),
    url('/assets/office-gold-mobile.webp') center 34%/cover no-repeat!important;
}

body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions::before{
  background:
    linear-gradient(90deg,rgba(10,12,15,.97) 0%,rgba(19,17,16,.86) 54%,rgba(35,24,18,.50) 100%),
    url('/assets/office-gold-desktop.webp') 66% 52%/cover no-repeat!important;
  opacity:1!important;
  filter:saturate(.94) contrast(1.05)!important;
}
html.mobile-device body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions::before{
  background:
    linear-gradient(90deg,rgba(10,12,15,.94),rgba(24,19,17,.76),rgba(30,20,15,.48)),
    url('/assets/office-gold-mobile.webp') 55% 42%/cover no-repeat!important;
}

body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero{
  background:#111316!important;
  border-color:rgba(218,174,123,.32)!important;
  box-shadow:0 0 0 1px rgba(218,174,123,.04),0 16px 36px rgba(0,0,0,.28)!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card::before,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero::before{
  background:url('/assets/office-gold-desktop.webp') center 48%/cover no-repeat!important;
  filter:saturate(.94) brightness(.72) contrast(1.08)!important;
}
html.mobile-device body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card::before,
html.mobile-device body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero::before{
  background:url('/assets/office-gold-mobile.webp') center 38%/cover no-repeat!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card::after,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero::after{
  background:linear-gradient(90deg,rgba(7,9,12,.90) 0%,rgba(15,13,13,.62) 56%,rgba(52,34,23,.22) 100%)!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card .weather-now-label,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .eyebrow{color:#ddb37f!important}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card .weather-reading>strong{
  text-shadow:0 0 22px rgba(218,168,105,.26)!important;
}

html:not(.mobile-device) body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .desktop-sidebar::before{
  background:
    linear-gradient(180deg,rgba(5,7,9,.55),rgba(17,13,12,.80)),
    url('/assets/office-gold-desktop.webp') 36% center/cover no-repeat!important;
  opacity:.90!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .desktop-sidebar-photo{
  background-image:
    linear-gradient(180deg,rgba(5,7,9,.04),rgba(11,12,14,.92)),
    url('/assets/office-gold-desktop.webp')!important;
  background-position:34% 50%!important;
  background-size:cover!important;
}

/* The theme card itself must preview the same approved render. */
.branding-app-style-preview.preview-office-gold{
  background:
    linear-gradient(135deg,rgba(7,9,12,.88),rgba(34,25,20,.70)),
    url('/assets/office-gold-desktop.webp') center/cover!important;
}


/* ==========================================================
   OFFICE GOLD EDITOR + FULL-SURFACE HOTFIX 10
   Scoped strictly to Gradient Glass · Office Gold.
   Classic · Default is untouched.
   ========================================================== */

/* Use the approved office render in the theme card too. */
.branding-app-style-preview.preview-office-gold{
  background:
    linear-gradient(135deg,rgba(7,9,12,.78),rgba(32,23,18,.58)),
    url('/assets/office-gold-desktop.webp') center/cover no-repeat!important;
}

/* Office Gold sidebar crop is now editable and persisted independently. */
html:not(.mobile-device) body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .desktop-sidebar::before{
  background:
    linear-gradient(180deg,rgba(5,7,9,.55),rgba(17,13,12,.80)),
    url('/assets/office-gold-desktop.webp') var(--office-gold-sidebar-x,36%) var(--office-gold-sidebar-y,50%)/cover no-repeat!important;
  opacity:var(--office-gold-sidebar-opacity,.90)!important;
  transform:scale(var(--office-gold-sidebar-scale,1))!important;
  transform-origin:var(--office-gold-sidebar-x,36%) var(--office-gold-sidebar-y,50%)!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .desktop-sidebar-photo{
  background-image:
    linear-gradient(180deg,rgba(5,7,9,.04),rgba(11,12,14,.92)),
    url('/assets/office-gold-desktop.webp')!important;
  background-position:var(--office-gold-sidebar-x,36%) var(--office-gold-sidebar-y,50%)!important;
  background-size:cover!important;
  transform:scale(var(--office-gold-sidebar-scale,1))!important;
  transform-origin:var(--office-gold-sidebar-x,36%) var(--office-gold-sidebar-y,50%)!important;
}

/* Make the Office Gold editor itself look like the real premium theme. */
.branding-crop-editor[data-office-gold-preview="1"] .branding-editor-stage{
  background:#090b0e!important;
  border-color:rgba(219,174,122,.35)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.branding-crop-editor[data-office-gold-preview="1"] .branding-editor-stage.is-login::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,4,7,.02),rgba(7,5,4,.13));
}
.branding-crop-editor[data-office-gold-preview="1"] .branding-login-mock{z-index:3!important}
.branding-crop-editor[data-office-gold-layout="1"] .branding-editor-stage.is-sidebar{cursor:grab!important}
.branding-crop-editor[data-office-gold-layout="1"] .branding-editor-stage.is-sidebar.is-dragging{cursor:grabbing!important}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica.desktop-sidebar{
  color:#f6efe8!important;
  background:linear-gradient(180deg,rgba(8,10,13,.86),rgba(28,20,17,.78))!important;
}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica.desktop-sidebar::before{
  filter:saturate(.94) contrast(1.05) brightness(.78)!important;
}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica.desktop-sidebar::after{
  background:linear-gradient(180deg,rgba(5,7,9,.50),rgba(15,12,11,.74) 48%,rgba(35,23,17,.58))!important;
}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica .desktop-sidebar-brand{border-bottom-color:rgba(217,171,118,.24)!important}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica .desktop-side-nav .nav-link{color:#e4ddd6!important}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica .desktop-side-nav .nav-link.active{
  background:linear-gradient(90deg,rgba(151,104,60,.52),rgba(213,166,111,.28))!important;
  color:#f3c997!important;border-color:rgba(219,172,116,.38)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.25)!important;
}

/* The full authenticated UI remains dark glass even though Office Gold is
   internally locked to the light theme slot. This prevents light Classic
   surfaces from leaking into Settings and secondary pages. */
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold{
  --app-bg:#080a0d!important;
  --app-surface:rgba(15,17,20,.82)!important;
  --app-surface-strong:rgba(20,21,24,.91)!important;
  --app-border:rgba(218,173,120,.23)!important;
  --app-text:#f5f1ec!important;
  --app-muted:#b9afa5!important;
  --app-blue:#d8ad79!important;
  --app-blue-soft:rgba(216,173,121,.14)!important;
  color:#f5f1ec!important;
  background:#080a0d!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-page,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-pane,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .subpage,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .role-dashboard{
  background:transparent!important;
  color:#f5f1ec!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-panel,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-asset-card,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-login-ui-settings,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-login-style-option,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-campaign-asset,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-grid>article,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .ui-design-settings{
  background:linear-gradient(145deg,rgba(16,18,21,.90),rgba(35,27,23,.78))!important;
  border-color:rgba(216,171,119,.24)!important;
  color:#f5f1ec!important;
  box-shadow:0 16px 38px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-group-heading,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-editor-toolbar,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-editor-footer,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-zoom-control,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-transparency-control,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-login-position-grid{
  background:rgba(8,10,13,.46)!important;
  border-color:rgba(214,169,116,.18)!important;
  color:#e8dfd6!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-group-heading strong,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-asset-copy strong,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-panel h2,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-panel h3{
  color:#f8f2eb!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-group-heading small,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-file-status,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-editor-toolbar span,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-zoom-control small,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-transparency-control small{
  color:#bcb1a6!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold input,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold textarea,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold select{
  background:rgba(7,9,12,.74)!important;
  border-color:rgba(216,171,119,.22)!important;
  color:#f7f2ed!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold input::placeholder,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold textarea::placeholder{color:#91877e!important}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .ghost-button,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .file-picker-button,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .text-button{
  border-color:rgba(216,171,119,.30)!important;
  color:#e3b982!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-tabs,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-tab-button{
  background:rgba(10,12,15,.74)!important;
  color:#c7bdb4!important;
  border-color:rgba(216,171,119,.15)!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-tab-button.active{
  background:linear-gradient(90deg,rgba(150,104,61,.42),rgba(213,168,114,.22))!important;
  color:#f0c99a!important;
}

/* Stronger glass like the approved desktop render. */
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .panel-card,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .content-panel{
  -webkit-backdrop-filter:blur(24px) saturate(1.08)!important;
  backdrop-filter:blur(24px) saturate(1.08)!important;
}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .quick-grid button,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .stat-card,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .work-grid article{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 10px 28px rgba(0,0,0,.18)!important;
}

/* Keep mobile readable while preserving the premium one-mode palette. */
@media(max-width:760px){
  body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .panel-card,
  body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .content-panel,
  body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-panel{
    background:linear-gradient(145deg,rgba(15,17,20,.90),rgba(34,26,22,.80))!important;
  }
}

/* ==========================================================
   OFFICE GOLD RENDER + EDITOR STABILITY HOTFIX 11
   ========================================================== */

/* Use one explicit class as the source of truth for the premium preset.
   This avoids light Classic selectors leaking into Office Gold. */
body.office-gold-active.app-mode{
  --app-bg:#07090c!important;
  --app-surface:rgba(14,16,19,.80)!important;
  --app-surface-strong:rgba(20,21,24,.90)!important;
  --app-border:rgba(218,174,122,.28)!important;
  --app-text:#f7f2ec!important;
  --app-muted:#b9afa5!important;
  --app-blue:#d9ae7a!important;
  --app-blue-soft:rgba(217,174,122,.14)!important;
  color:#f7f2ec!important;
  background:#07090c!important;
}
body.office-gold-active.app-mode::before{
  content:""!important;position:fixed!important;inset:0!important;z-index:0!important;pointer-events:none!important;
  background:
    linear-gradient(115deg,rgba(3,5,7,.88) 0%,rgba(5,7,9,.76) 45%,rgba(31,20,15,.56) 100%),
    url('/assets/office-gold-desktop.webp?v=officegold11') center center/cover no-repeat!important;
  filter:saturate(.94) contrast(1.06) brightness(.88)!important;
}
html.mobile-device body.office-gold-active.app-mode::before{
  background:
    linear-gradient(180deg,rgba(3,5,7,.78),rgba(5,7,9,.72) 48%,rgba(27,18,14,.62)),
    url('/assets/office-gold-mobile.webp?v=officegold11') center center/cover no-repeat!important;
}
body.office-gold-active.app-mode .page-shell,
body.office-gold-active.app-mode .app-view,
body.office-gold-active.app-mode .role-dashboard,
body.office-gold-active.app-mode .settings-page,
body.office-gold-active.app-mode .settings-pane,
body.office-gold-active.app-mode .subpage{background:transparent!important;color:var(--app-text)!important;position:relative;z-index:1}
body.office-gold-active.app-mode .app-header{
  background:linear-gradient(90deg,rgba(10,12,15,.91),rgba(31,25,22,.82))!important;
  border-color:rgba(220,177,128,.30)!important;
  box-shadow:0 12px 34px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(22px) saturate(1.06)!important;
}
body.office-gold-active.app-mode .desktop-sidebar{
  background:linear-gradient(180deg,rgba(7,9,12,.92),rgba(27,20,17,.86))!important;
  border-color:rgba(220,177,128,.26)!important;
  color:var(--app-text)!important;
}
body.office-gold-active.app-mode .panel-card,
body.office-gold-active.app-mode .content-panel,
body.office-gold-active.app-mode .settings-panel,
body.office-gold-active.app-mode .settings-tabs,
body.office-gold-active.app-mode .branding-asset-card,
body.office-gold-active.app-mode .branding-login-ui-settings,
body.office-gold-active.app-mode .branding-login-style-option,
body.office-gold-active.app-mode .branding-campaign-asset,
body.office-gold-active.app-mode .ui-design-settings{
  background:linear-gradient(145deg,rgba(13,15,18,.84),rgba(35,27,23,.74))!important;
  border-color:rgba(220,176,126,.25)!important;
  color:var(--app-text)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.035)!important;
  backdrop-filter:blur(22px) saturate(1.06)!important;
}
body.office-gold-active.app-mode .quick-grid button,
body.office-gold-active.app-mode .stat-card,
body.office-gold-active.app-mode .owner-action,
body.office-gold-active.app-mode .work-grid article,
body.office-gold-active.app-mode .request-list>* ,
body.office-gold-active.app-mode .team-list>* ,
body.office-gold-active.app-mode .news-list>* ,
body.office-gold-active.app-mode .registry-row,
body.office-gold-active.app-mode .object-summary-grid article{
  background:linear-gradient(145deg,rgba(16,18,21,.82),rgba(42,31,25,.60))!important;
  border-color:rgba(219,173,121,.22)!important;
  color:var(--app-text)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 26px rgba(0,0,0,.20)!important;
}
body.office-gold-active.app-mode .dashboard-quick-actions,
body.office-gold-active.app-mode .dashboard-weather-card,
body.office-gold-active.app-mode .team-panel,
body.office-gold-active.app-mode .news-panel,
body.office-gold-active.app-mode .works-highlight-section{
  overflow:hidden!important;
}
body.office-gold-active.app-mode .dashboard-quick-actions::before{
  background:
    linear-gradient(90deg,rgba(10,12,15,.96),rgba(21,18,17,.82),rgba(38,25,18,.48)),
    url('/assets/office-gold-desktop.webp?v=officegold11') 64% 48%/cover no-repeat!important;
  opacity:1!important;
}
body.office-gold-active.app-mode .dashboard-weather-card::before,
body.office-gold-active.app-mode .owner-weather-hero::before{
  background:url('/assets/office-gold-desktop.webp?v=officegold11') center 46%/cover no-repeat!important;
  filter:saturate(.95) brightness(.70) contrast(1.08)!important;
}
html.mobile-device body.office-gold-active.app-mode .dashboard-weather-card::before,
html.mobile-device body.office-gold-active.app-mode .owner-weather-hero::before{
  background:url('/assets/office-gold-mobile.webp?v=officegold11') center 38%/cover no-repeat!important;
}
body.office-gold-active.app-mode .dashboard-weather-card::after,
body.office-gold-active.app-mode .owner-weather-hero::after{background:linear-gradient(90deg,rgba(7,9,12,.92),rgba(16,13,12,.60) 58%,rgba(53,34,23,.20))!important}
body.office-gold-active.app-mode .nav-link.active,
body.office-gold-active.app-mode .nav-link:hover,
body.office-gold-active.app-mode .settings-tab.active,
body.office-gold-active.app-mode .settings-tab-button.active{
  background:linear-gradient(90deg,rgba(150,103,60,.46),rgba(215,169,113,.22))!important;
  color:#f1ca9a!important;border-color:rgba(220,176,125,.32)!important;
}
body.office-gold-active.app-mode h1,
body.office-gold-active.app-mode h2,
body.office-gold-active.app-mode h3,
body.office-gold-active.app-mode strong{color:#f8f3ed}
body.office-gold-active.app-mode .eyebrow,
body.office-gold-active.app-mode .text-button{color:#ddb37f!important}
body.office-gold-active.app-mode small,
body.office-gold-active.app-mode p{color:var(--app-muted)}
body.office-gold-active.app-mode input,
body.office-gold-active.app-mode textarea,
body.office-gold-active.app-mode select{
  background:rgba(7,9,12,.76)!important;border-color:rgba(219,173,121,.22)!important;color:#f7f2ed!important;
}
body.office-gold-active.app-mode .mobile-bottom-nav{
  background:linear-gradient(90deg,rgba(7,9,12,.96),rgba(30,23,20,.94))!important;border-color:rgba(220,176,125,.24)!important;
}
body.office-gold-active.app-mode .mobile-bottom-link.active{color:#e2b985!important}

/* Editor previews must stay visible for BOTH presets. Classic uses the bundled
   VTR24 light/dark image when no custom file exists; Office Gold uses its own render. */
.branding-crop-editor .branding-editor-stage.is-login,
.branding-crop-editor .branding-editor-stage.is-sidebar{background-color:#0b1016!important}
.branding-crop-editor[data-office-gold-preview="1"] .branding-editor-stage.is-login{
  background-image:linear-gradient(180deg,rgba(3,5,7,.04),rgba(9,6,4,.16))!important;
}

/* Keep the crop under the pointer after release. The JS persists the coordinates
   without rebuilding the whole settings panel. */
.branding-editor-stage.is-sidebar{touch-action:none!important;user-select:none!important}
.branding-editor-stage.is-sidebar.is-dragging{cursor:grabbing!important}
.branding-editor-stage.is-sidebar:not(.is-dragging){cursor:grab!important}


/* ==========================================================
   OFFICE GOLD MOBILE LOGIN CANVAS HOTFIX 12
   - never expose Classic imagery behind the premium login
   - fixed, non-scrolling login canvas on phones
   - compact iPhone 7 / short-screen composition
   ========================================================== */

/* The root canvas is visible whenever Safari/Chrome changes the visual viewport
   (notably while the on-screen keyboard is opening). Office Gold therefore owns
   BOTH html and body backgrounds; Classic assets are never a fallback here. */
html.office-gold-active.login-active{
  background-color:#05070a!important;
  background-image:url('/assets/office-gold-desktop.webp?v=officegold12')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
html.mobile-device.office-gold-active.login-active{
  background-image:url('/assets/office-gold-mobile.webp?v=officegold12')!important;
  background-position:center center!important;
  background-size:cover!important;
}
html.office-gold-active.login-active body:not(.app-mode){
  background:transparent!important;
}

/* Premium mobile login is a fixed screen, not a document that can be dragged
   vertically. The form is positioned inside the viewport, while its existing
   user-configurable X/Y/scale controls continue to work. */
html.mobile-device.office-gold-active.login-active,
html.mobile-device.office-gold-active.login-active body:not(.app-mode){
  width:100%!important;
  height:var(--auth-visual-height,100svh)!important;
  min-height:var(--auth-visual-height,100svh)!important;
  max-height:var(--auth-visual-height,100svh)!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}
html.mobile-device.office-gold-active.login-active body:not(.app-mode) .page-shell{
  width:100%!important;
  height:var(--auth-visual-height,100svh)!important;
  min-height:0!important;
  max-height:var(--auth-visual-height,100svh)!important;
  overflow:hidden!important;
  display:block!important;
  position:relative!important;
  margin:0!important;
  padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;
}
html.mobile-device.office-gold-active.login-active body:not(.app-mode) .topbar{
  display:none!important;
}
html.mobile-device.office-gold-active.login-active body:not(.app-mode) .footer{
  display:none!important;
}
html.mobile-device.office-gold-active.login-active body:not(.app-mode) .login-layout{
  position:relative!important;
  display:block!important;
  width:100%!important;
  max-width:560px!important;
  height:100%!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:0!important;
  overflow:visible!important;
}
html.mobile-device.office-gold-active.login-active body:not(.app-mode) .brand{
  position:absolute!important;
  z-index:3!important;
  top:clamp(42px,8.5svh,82px)!important;
  left:50%!important;
  width:100%!important;
  max-width:520px!important;
  margin:0!important;
  transform:translateX(-50%)!important;
}
html.mobile-device.office-gold-active.login-active body:not(.app-mode) #loginForm{
  position:absolute!important;
  z-index:4!important;
  left:calc(50% + var(--login-form-mobile-shift-x,0vw))!important;
  top:calc(66% + var(--login-form-mobile-shift-y,0vh))!important;
  width:min(100%,540px)!important;
  max-width:540px!important;
  margin:0!important;
  transform:translate(-50%,-50%) scale(var(--login-form-mobile-scale,1))!important;
  transform-origin:center center!important;
}

/* Fixed premium background layer always fills the full visual canvas. */
html.mobile-device.office-gold-active.login-active body:not(.app-mode) .background,
html.mobile-device.office-gold-active.login-active body:not(.app-mode) .background-overlay{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:none!important;
}
html.mobile-device.office-gold-active.login-active body:not(.app-mode) .background{
  background-image:url('/assets/office-gold-mobile.webp?v=officegold12')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  transform:none!important;
  filter:saturate(.94) contrast(1.05) brightness(.91)!important;
}

/* iPhone 7 / SE-class heights need a denser composition. This keeps every
   control visible without introducing page scrolling and without changing the
   user's saved mobile card scale. */
@media (max-width:480px) and (max-height:740px){
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) .brand{
    top:clamp(30px,6svh,48px)!important;
  }
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) .brand-mark{
    width:48px!important;height:50px!important;margin-bottom:3px!important;gap:3px!important;
  }
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) .brand-mark span{width:9px!important;border-width:2px!important}
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) .brand-mark span:nth-child(1){height:25px!important}
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) .brand-mark span:nth-child(2){height:46px!important}
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) .brand-mark span:nth-child(3){height:34px!important}
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) .brand h1{
    font-size:clamp(31px,10.3vw,39px)!important;
    line-height:1.04!important;
  }
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) .brand p{
    margin-top:6px!important;font-size:7px!important;letter-spacing:.34em!important;
  }
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) #loginForm{
    top:calc(65% + var(--login-form-mobile-shift-y,0vh))!important;
    padding:17px 15px 13px!important;
    border-radius:24px!important;
  }
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) #loginForm .card-heading{margin-bottom:14px!important}
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) #loginForm .card-heading h2{font-size:20px!important;line-height:1.1!important}
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) #loginForm .card-heading p{margin-top:6px!important;font-size:11px!important}
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) #loginForm .input-wrap{
    height:49px!important;margin-bottom:9px!important;border-radius:13px!important;
  }
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) #loginForm .form-row{
    margin:2px 0 10px!important;font-size:11px!important;gap:8px!important;
  }
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) #loginForm .remember input{width:16px!important;height:16px!important}
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) #loginButton{
    min-height:48px!important;border-radius:13px!important;font-size:16px!important;
  }
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) #loginForm .demo-note{
    margin-top:10px!important;font-size:9px!important;
  }
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) #loginForm .login-secondary-actions{margin-top:6px!important}
}

/* ==========================================================
   OFFICE GOLD VISUAL ISOLATION + SIDEBAR SCALE HOTFIX 13
   ========================================================== */

/* Office Gold is a self-contained theme. These selectors deliberately include
   html + body + app-mode so they outrank the legacy Classic light/dark rules. */
html.office-gold-active body.office-gold-active.app-mode{
  --app-bg:#070809!important;
  --app-surface:rgba(12,13,15,.86)!important;
  --app-surface-strong:rgba(18,18,20,.92)!important;
  --app-border:rgba(214,169,113,.34)!important;
  --app-text:#f4efe9!important;
  --app-muted:#a99f96!important;
  --app-blue:#d2a46d!important;
  --app-blue-soft:rgba(210,164,109,.14)!important;
  background:#070809!important;
  color:var(--app-text)!important;
}
html.office-gold-active body.office-gold-active.app-mode::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    linear-gradient(105deg,rgba(3,4,5,.68),rgba(6,7,8,.54) 45%,rgba(33,20,13,.30)),
    url('/assets/office-gold-desktop.webp?v=officegold13') center center/cover no-repeat!important;
  filter:none!important;
  opacity:1!important;
}
html.mobile-device.office-gold-active body.office-gold-active.app-mode::before{
  background:
    linear-gradient(180deg,rgba(3,4,5,.62),rgba(7,7,8,.52) 52%,rgba(31,19,13,.34)),
    url('/assets/office-gold-mobile.webp?v=officegold13') center center/cover no-repeat!important;
}
html.office-gold-active body.office-gold-active.app-mode .page-shell,
html.office-gold-active body.office-gold-active.app-mode .app-view,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard,
html.office-gold-active body.office-gold-active.app-mode .request-overview-layout,
html.office-gold-active body.office-gold-active.app-mode .request-overview-main,
html.office-gold-active body.office-gold-active.app-mode .content-columns,
html.office-gold-active body.office-gold-active.app-mode .dashboard-top-row{
  background:transparent!important;
  color:var(--app-text)!important;
}

/* Top bar and main cards: dark transparent glass with warm bronze edges. */
html.office-gold-active body.office-gold-active.app-mode .app-header{
  background:linear-gradient(90deg,rgba(9,10,12,.91),rgba(27,22,19,.84))!important;
  border:1px solid rgba(214,169,113,.26)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.34)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.04)!important;
  backdrop-filter:blur(14px) saturate(1.04)!important;
}
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .panel-card,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .content-panel,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .stat-card,
html.office-gold-active body.office-gold-active.app-mode .settings-panel,
html.office-gold-active body.office-gold-active.app-mode .settings-tabs,
html.office-gold-active body.office-gold-active.app-mode .settings-pane,
html.office-gold-active body.office-gold-active.app-mode .subpage .panel-card{
  background:linear-gradient(145deg,rgba(12,13,15,.88),rgba(29,23,20,.78))!important;
  border-color:rgba(214,169,113,.28)!important;
  color:#f4efe9!important;
  box-shadow:0 14px 34px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.035)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.03)!important;
  backdrop-filter:blur(14px) saturate(1.03)!important;
}
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .quick-grid button,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .request-list > *,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .team-list > *,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .news-list > *,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .work-grid article{
  background:linear-gradient(145deg,rgba(15,16,18,.90),rgba(37,28,23,.72))!important;
  border-color:rgba(214,169,113,.24)!important;
  color:#f4efe9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 8px 22px rgba(0,0,0,.22)!important;
}
/* Classic picture snippets must never leak into Office Gold action cards. */
html.office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button::after{
  background-image:none!important;
  opacity:0!important;
}
html.office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions::before{
  background:
    linear-gradient(90deg,rgba(8,9,11,.96),rgba(19,17,16,.83),rgba(48,30,18,.40)),
    url('/assets/office-gold-desktop.webp?v=officegold13') 64% 48%/cover no-repeat!important;
  opacity:1!important;
  filter:none!important;
}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::before,
html.office-gold-active body.office-gold-active.app-mode .owner-weather-hero::before{
  background:url('/assets/office-gold-desktop.webp?v=officegold13') center 46%/cover no-repeat!important;
  filter:brightness(.58) contrast(1.08) saturate(.92)!important;
  opacity:1!important;
}
html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::before,
html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero::before{
  background:url('/assets/office-gold-mobile.webp?v=officegold13') center 38%/cover no-repeat!important;
}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::after,
html.office-gold-active body.office-gold-active.app-mode .owner-weather-hero::after{
  background:linear-gradient(90deg,rgba(5,7,9,.90),rgba(13,12,12,.52) 60%,rgba(50,31,19,.14))!important;
}

/* Premium typography and nav accents. */
html.office-gold-active body.office-gold-active.app-mode h1,
html.office-gold-active body.office-gold-active.app-mode h2,
html.office-gold-active body.office-gold-active.app-mode h3,
html.office-gold-active body.office-gold-active.app-mode strong{color:#f6f0ea!important}
html.office-gold-active body.office-gold-active.app-mode p,
html.office-gold-active body.office-gold-active.app-mode small{color:#ada39a!important}
html.office-gold-active body.office-gold-active.app-mode .eyebrow,
html.office-gold-active body.office-gold-active.app-mode .text-button{color:#deb47f!important}
html.office-gold-active body.office-gold-active.app-mode .nav-link.active,
html.office-gold-active body.office-gold-active.app-mode .nav-link:hover{
  color:#f2c996!important;
  background:linear-gradient(90deg,rgba(150,102,58,.46),rgba(212,165,108,.18))!important;
  border-color:rgba(216,171,115,.34)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.18)!important;
}

/* Sidebar: use ONLY the Office Gold render. No Classic image, no milky veil,
   no blur. Zoom is expressed as background height, so 50% really zooms OUT
   without shrinking the sidebar element itself. */
@media (min-width:1180px){
  html.office-gold-active[data-theme] body.office-gold-active.app-mode .desktop-sidebar{
    background:linear-gradient(180deg,rgba(7,8,10,.94),rgba(17,14,13,.91))!important;
    border-right:1px solid rgba(214,169,113,.28)!important;
    box-shadow:10px 0 28px rgba(0,0,0,.24)!important;
    overflow:hidden!important;
  }
  html.office-gold-active[data-theme] body.office-gold-active.app-mode .desktop-sidebar::before{
    background-image:url('/assets/office-gold-desktop.webp?v=officegold13')!important;
    background-repeat:no-repeat!important;
    background-size:auto var(--office-gold-sidebar-size,100%)!important;
    background-position:var(--office-gold-sidebar-x,50%) var(--office-gold-sidebar-y,50%)!important;
    opacity:var(--office-gold-sidebar-opacity,.95)!important;
    filter:none!important;
    transform:none!important;
  }
  html.office-gold-active[data-theme] body.office-gold-active.app-mode .desktop-sidebar::after{
    background:linear-gradient(180deg,rgba(5,7,9,.20),rgba(8,8,9,.30) 58%,rgba(22,15,12,.36))!important;
    opacity:1!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html.office-gold-active[data-theme] body.office-gold-active.app-mode .desktop-sidebar-brand{
    position:relative!important;z-index:2!important;
    background:rgba(9,10,12,.63)!important;
    border:1px solid rgba(214,169,113,.24)!important;
    box-shadow:0 8px 22px rgba(0,0,0,.20)!important;
    -webkit-backdrop-filter:blur(7px)!important;
    backdrop-filter:blur(7px)!important;
  }
  html.office-gold-active[data-theme] body.office-gold-active.app-mode .desktop-sidebar-brand strong{color:#f5eee8!important;text-shadow:none!important}
  html.office-gold-active[data-theme] body.office-gold-active.app-mode .desktop-sidebar-brand small{color:#bdafa2!important;text-shadow:none!important}
  html.office-gold-active[data-theme] body.office-gold-active.app-mode .desktop-side-nav{position:relative!important;z-index:2!important}
  html.office-gold-active[data-theme] body.office-gold-active.app-mode .desktop-side-nav .nav-link:not(.active){color:#d8d0c8!important;text-shadow:none!important;background:transparent!important}
  html.office-gold-active[data-theme] body.office-gold-active.app-mode .desktop-sidebar-complex{display:none!important}
}

/* Office Gold editor preview: same sharp sidebar treatment as runtime. */
.branding-crop-editor[data-office-gold-layout="1"] .branding-editor-stage.is-sidebar::before{
  filter:none!important;
  opacity:var(--editor-opacity,1)!important;
}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica{
  background:linear-gradient(180deg,rgba(7,8,10,.82),rgba(19,15,13,.78))!important;
  color:#f3ede7!important;
}

/* ==========================================================
   OFFICE GOLD FULL-SCENE + ISOLATED PREVIEWS HOTFIX 14
   Classic · Default stays unchanged.
   ========================================================== */

/* Settings: when Office Gold is active, bundled Office Gold assets are previewed
   without exposing Classic upload/delete actions that would edit the wrong theme. */
.office-gold-hidden-actions{display:none!important}
.branding-crop-editor[data-office-gold-home-preview="1"] .branding-zoom-control,
.branding-crop-editor[data-office-gold-home-preview="1"] .branding-editor-footer{opacity:.46!important;pointer-events:none!important}
.branding-crop-editor[data-office-gold-home-preview="1"] .branding-editor-stage.is-home{
  background:#08090b!important;
  border-color:rgba(218,171,116,.34)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.branding-crop-editor[data-office-gold-home-preview="1"] .branding-editor-stage.is-home .branding-editor-image{
  filter:none!important;opacity:1!important;
}

/* One continuous approved Office Gold render behind the authenticated UI. */
html.office-gold-active body.office-gold-active.app-mode{
  background:#070809!important;
  color:#f5efe8!important;
}
html.office-gold-active body.office-gold-active.app-mode::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:url('/assets/office-gold-desktop.webp?v=officegold14') center center/cover no-repeat!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
html.office-gold-active body.office-gold-active.app-mode::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:linear-gradient(105deg,rgba(4,5,6,.18) 0%,rgba(6,7,8,.10) 48%,rgba(18,12,9,.12) 100%)!important;
}
html.mobile-device.office-gold-active body.office-gold-active.app-mode::before{
  background:url('/assets/office-gold-mobile.webp?v=officegold14') center center/cover no-repeat!important;
}
html.mobile-device.office-gold-active body.office-gold-active.app-mode::after{
  background:linear-gradient(180deg,rgba(4,5,6,.14),rgba(8,7,7,.11) 55%,rgba(18,12,9,.14))!important;
}
html.office-gold-active body.office-gold-active.app-mode .page-shell,
html.office-gold-active body.office-gold-active.app-mode #dashboardView,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard,
html.office-gold-active body.office-gold-active.app-mode .dashboard-top-row,
html.office-gold-active body.office-gold-active.app-mode .request-overview-layout,
html.office-gold-active body.office-gold-active.app-mode .request-overview-main,
html.office-gold-active body.office-gold-active.app-mode .content-columns{
  background:transparent!important;
}

/* The target render has no large rectangular header tray. Search and account
   controls float independently above the full-scene background. */
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .app-header{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  padding-left:10px!important;
  padding-right:10px!important;
}
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .desktop-global-search{
  background:linear-gradient(145deg,rgba(10,12,14,.76),rgba(29,23,19,.62))!important;
  border:1px solid rgba(222,176,120,.34)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.045)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.04)!important;
  backdrop-filter:blur(14px) saturate(1.04)!important;
}
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .desktop-global-search>span:first-child{color:#e5b879!important}
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .desktop-global-search input{
  background:rgba(5,7,9,.56)!important;
  border-color:rgba(222,176,120,.16)!important;
  color:#f5efe8!important;
}
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .desktop-global-search kbd{
  background:rgba(31,25,21,.82)!important;
  border-color:rgba(222,176,120,.30)!important;
  color:#e7c18f!important;
}
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .app-header-actions{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .app-header-actions .icon-action,
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .profile-chip,
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .logout-action{
  background:linear-gradient(145deg,rgba(10,12,14,.78),rgba(29,23,19,.66))!important;
  border:1px solid rgba(222,176,120,.30)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04)!important;
  color:#f5efe8!important;
  -webkit-backdrop-filter:blur(13px) saturate(1.04)!important;
  backdrop-filter:blur(13px) saturate(1.04)!important;
}
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .profile-chip small{color:#b9aea3!important}
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .profile-chip::after{color:#e1b579!important}
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .logout-action:hover,
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .app-header-actions .icon-action:hover,
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .profile-chip:hover{
  border-color:rgba(236,192,135,.52)!important;
  background:linear-gradient(145deg,rgba(24,20,17,.84),rgba(53,37,27,.70))!important;
}

/* Sidebar: no boxed logo tile and no milky veil. The Office Gold image is
   isolated from Classic and uses an oversized image layer so 50% zoom still
   fills the whole sidebar rather than snapping back to 100%. */
@media (min-width:1180px){
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar{
    background:rgba(7,9,11,.62)!important;
    border:1px solid rgba(222,176,120,.26)!important;
    border-left:0!important;
    box-shadow:12px 0 32px rgba(0,0,0,.28)!important;
    -webkit-backdrop-filter:blur(9px) saturate(1.02)!important;
    backdrop-filter:blur(9px) saturate(1.02)!important;
    overflow:hidden!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar::before{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:-50%!important;
    z-index:0!important;
    pointer-events:none!important;
    background-image:url('/assets/office-gold-desktop.webp?v=officegold14')!important;
    background-size:cover!important;
    background-repeat:no-repeat!important;
    background-position:var(--office-gold-sidebar-x,50%) var(--office-gold-sidebar-y,50%)!important;
    opacity:var(--office-gold-sidebar-opacity,.90)!important;
    filter:none!important;
    transform:scale(var(--office-gold-sidebar-scale,1))!important;
    transform-origin:var(--office-gold-sidebar-x,50%) var(--office-gold-sidebar-y,50%)!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    inset:0!important;
    z-index:1!important;
    pointer-events:none!important;
    background:linear-gradient(180deg,rgba(4,6,8,.28),rgba(6,7,8,.20) 58%,rgba(18,12,9,.30))!important;
    opacity:1!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar>*{position:relative!important;z-index:2!important}
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand{
    background:transparent!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    padding:8px 10px 22px!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand .app-logo-mark{
    color:#dca96b!important;
    filter:drop-shadow(0 0 12px rgba(221,171,109,.22))!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand strong{color:#fff7ee!important}
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand small{color:#c0b3a6!important}
  html.office-gold-active body.office-gold-active.app-mode .desktop-side-nav .nav-link{
    border:1px solid transparent!important;
    color:#ece4dc!important;
    text-shadow:0 1px 3px rgba(0,0,0,.34)!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-side-nav .nav-link.active{
    background:linear-gradient(90deg,rgba(157,104,56,.56),rgba(217,168,105,.22))!important;
    border-color:rgba(224,176,116,.42)!important;
    color:#ffd59f!important;
    box-shadow:0 10px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-complex{display:none!important}
}

/* The editor replica uses the exact same scaling model as the runtime sidebar. */
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica.desktop-sidebar{
  position:relative!important;
  overflow:hidden!important;
  background:rgba(7,9,11,.64)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica.desktop-sidebar::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:-50%!important;
  z-index:0!important;
  background-image:var(--preview-sidebar-image)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  background-position:var(--preview-sidebar-x,50%) var(--preview-sidebar-y,50%)!important;
  opacity:var(--editor-opacity,1)!important;
  filter:none!important;
  transform:scale(var(--preview-sidebar-scale,1))!important;
  transform-origin:var(--preview-sidebar-x,50%) var(--preview-sidebar-y,50%)!important;
}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica.desktop-sidebar::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  background:linear-gradient(180deg,rgba(4,6,8,.24),rgba(8,8,9,.18) 58%,rgba(19,13,10,.28))!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica.desktop-sidebar>*{position:relative!important;z-index:2!important}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica .desktop-sidebar-brand{
  background:transparent!important;border:0!important;box-shadow:none!important;
}

/* Floating cards over the ONE full background. Remove the old snippets of
   Classic/Office photos inside individual widgets. */
html.office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions::before,
html.office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions::after,
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::before,
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::after,
html.office-gold-active body.office-gold-active.app-mode .owner-weather-hero::before,
html.office-gold-active body.office-gold-active.app-mode .owner-weather-hero::after,
html.office-gold-active body.office-gold-active.app-mode .weather-photo,
html.office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button::after{
  background-image:none!important;
  background:none!important;
  opacity:0!important;
  filter:none!important;
}
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .panel-card,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .content-panel,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .stat-card,
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card,
html.office-gold-active body.office-gold-active.app-mode .team-panel,
html.office-gold-active body.office-gold-active.app-mode .news-panel,
html.office-gold-active body.office-gold-active.app-mode .works-highlight-section{
  background:linear-gradient(145deg,rgba(9,11,13,.72),rgba(31,24,20,.58))!important;
  border:1px solid rgba(222,176,120,.30)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.045)!important;
  -webkit-backdrop-filter:blur(13px) saturate(1.04)!important;
  backdrop-filter:blur(13px) saturate(1.04)!important;
}
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .quick-grid button,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .request-list>* ,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .team-list>* ,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .news-list>* ,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .work-grid article{
  background:linear-gradient(145deg,rgba(11,13,15,.78),rgba(34,26,21,.62))!important;
  border:1px solid rgba(222,176,120,.22)!important;
  box-shadow:0 9px 24px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035)!important;
  -webkit-backdrop-filter:blur(9px) saturate(1.03)!important;
  backdrop-filter:blur(9px) saturate(1.03)!important;
}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-copy,
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading,
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .mobile-weather-toolbar{position:relative!important;z-index:2!important}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading strong{color:#fff8ef!important}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading small{color:#d0c4b8!important}

/* Strong warm separators and headings like the approved render. */
html.office-gold-active body.office-gold-active.app-mode .section-heading,
html.office-gold-active body.office-gold-active.app-mode .section-heading h2,
html.office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions h2{color:#f6eee6!important}
html.office-gold-active body.office-gold-active.app-mode .eyebrow,
html.office-gold-active body.office-gold-active.app-mode .quick-slogan,
html.office-gold-active body.office-gold-active.app-mode .section-heading .text-button{color:#dfb477!important}

/* Mobile: same full-scene philosophy, no isolated Classic image tiles. */
@media(max-width:760px){
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .role-dashboard .panel-card,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .role-dashboard .content-panel,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .role-dashboard .stat-card{
    background:linear-gradient(145deg,rgba(10,12,14,.80),rgba(35,26,21,.68))!important;
    border-color:rgba(222,176,120,.28)!important;
    -webkit-backdrop-filter:blur(11px) saturate(1.03)!important;
    backdrop-filter:blur(11px) saturate(1.03)!important;
  }
}


/* ==========================================================
   OFFICE GOLD APPROVED RENDER — HOTFIX 14 FINAL
   One background scene + floating glass cards.
   Classic · Default is intentionally untouched.
   ========================================================== */

/* Settings preview must NEVER show the Classic city photo while Office Gold
   is the active preset. Inline background-image values are deliberately
   overridden here so the preview always matches the real Office Gold scene. */
.branding-crop-editor[data-office-gold-home-preview="1"] .branding-editor-image{
  background-image:url('/assets/office-gold-desktop.webp?v=officegold15')!important;
  background-position:center center!important;
  background-size:cover!important;
  transform:none!important;
  filter:none!important;
  opacity:1!important;
}
.branding-crop-editor[data-office-gold-home-preview="1"].preview-mobile .branding-editor-image{
  background-image:url('/assets/office-gold-mobile.webp?v=officegold15')!important;
}

/* Office Gold no longer has a separate sidebar picture. The preview shows the
   common scene behind a transparent navigation column, exactly like runtime. */
.branding-crop-editor[data-office-gold-layout="1"] .branding-editor-stage.is-sidebar{
  background:url('/assets/office-gold-desktop.webp?v=officegold15') center center/cover no-repeat!important;
  border-color:rgba(226,179,119,.30)!important;
}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica.desktop-sidebar{
  background:rgba(5,7,9,.08)!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica.desktop-sidebar::before,
.branding-crop-editor[data-office-gold-layout="1"] .branding-sidebar-replica.desktop-sidebar::after{
  content:none!important;display:none!important;
}
.branding-crop-editor[data-office-gold-layout="1"] .branding-transparency-control,
.branding-crop-editor[data-office-gold-layout="1"] .branding-zoom-control,
.branding-crop-editor[data-office-gold-layout="1"] .branding-editor-footer{
  display:none!important;
}

/* The approved render uses one continuous image underneath everything. */
html.office-gold-active body.office-gold-active.app-mode{
  background:#060708!important;
}
html.office-gold-active body.office-gold-active.app-mode::before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:url('/assets/office-gold-desktop.webp?v=officegold15') center center/cover no-repeat!important;
  opacity:1!important;
  filter:none!important;
  transform:none!important;
}
html.office-gold-active body.office-gold-active.app-mode::after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 52% 32%,rgba(215,161,101,.06),transparent 36%),
    linear-gradient(90deg,rgba(4,5,6,.12),rgba(4,5,6,.04) 50%,rgba(4,5,6,.10))!important;
}
html.mobile-device.office-gold-active body.office-gold-active.app-mode::before{
  background-image:url('/assets/office-gold-mobile.webp?v=officegold15')!important;
  background-position:center center!important;
}

/* No giant Classic-style rectangle across the top. Search/profile/logout are
   independent floating glass controls. */
html.office-gold-active body.office-gold-active.app-mode .app-header{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html.office-gold-active body.office-gold-active.app-mode .desktop-global-search{
  background:linear-gradient(145deg,rgba(7,9,11,.76),rgba(29,22,18,.58))!important;
  border:1px solid rgba(224,177,118,.34)!important;
  color:#f4eee7!important;
  box-shadow:0 12px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.04)!important;
  -webkit-backdrop-filter:blur(13px) saturate(1.05)!important;
  backdrop-filter:blur(13px) saturate(1.05)!important;
}
html.office-gold-active body.office-gold-active.app-mode .desktop-global-search>span{
  color:#e3b16e!important;
}
html.office-gold-active body.office-gold-active.app-mode .desktop-global-search input{
  color:#f3eee8!important;
}
html.office-gold-active body.office-gold-active.app-mode .desktop-global-search input::placeholder{
  color:#a99e94!important;
}
html.office-gold-active body.office-gold-active.app-mode .desktop-global-search kbd{
  color:#e9c596!important;
  background:rgba(34,28,24,.72)!important;
  border:1px solid rgba(224,177,118,.28)!important;
}
html.office-gold-active body.office-gold-active.app-mode .app-header-actions{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html.office-gold-active body.office-gold-active.app-mode .profile-chip,
html.office-gold-active body.office-gold-active.app-mode .logout-action{
  background:linear-gradient(145deg,rgba(8,10,12,.77),rgba(31,23,19,.62))!important;
  border:1px solid rgba(224,177,118,.33)!important;
  color:#f6efe8!important;
  box-shadow:0 12px 28px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.04)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.04)!important;
  backdrop-filter:blur(12px) saturate(1.04)!important;
}
html.office-gold-active body.office-gold-active.app-mode .profile-chip .profile-copy small{color:#b6aa9f!important}
html.office-gold-active body.office-gold-active.app-mode .profile-chip:hover,
html.office-gold-active body.office-gold-active.app-mode .logout-action:hover{
  background:linear-gradient(145deg,rgba(20,17,15,.88),rgba(56,39,28,.72))!important;
  border-color:rgba(239,193,134,.52)!important;
}
/* Bell is intentionally absent in Office Gold. Notification pages still exist. */
html.office-gold-active body.office-gold-active.app-mode #notificationsButton{display:none!important}

/* Sidebar is a transparent navigation layer over the SAME background scene.
   There is no second image, fog layer or boxed brand header. */
@media(min-width:1180px){
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar{
    background:transparent!important;
    border:0!important;
    border-right:1px solid rgba(225,177,116,.16)!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    overflow:visible!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar::before,
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar::after{
    content:none!important;display:none!important;background:none!important;opacity:0!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand{
    background:transparent!important;
    border:0!important;
    border-bottom:0!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    padding:8px 10px 22px!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand .app-logo-mark{
    color:#dda96b!important;
    filter:drop-shadow(0 2px 10px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(219,164,98,.18))!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand strong{
    color:#fff7ef!important;
    text-shadow:0 2px 8px rgba(0,0,0,.55)!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand small{
    color:#c7bbb0!important;
    text-shadow:0 2px 7px rgba(0,0,0,.62)!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-side-nav .nav-link{
    color:#eee7e0!important;
    text-shadow:0 1px 5px rgba(0,0,0,.68)!important;
    background:rgba(5,7,9,.10)!important;
    border:1px solid transparent!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-side-nav .nav-link.active{
    color:#ffd49c!important;
    background:linear-gradient(90deg,rgba(139,88,46,.58),rgba(214,163,101,.20))!important;
    border-color:rgba(225,176,115,.40)!important;
    box-shadow:0 10px 25px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)!important;
  }
}

/* Floating cards. No Classic photos inside quick-action cards; the scene lives
   only underneath the interface. */
html.office-gold-active body.office-gold-active.app-mode .page-shell,
html.office-gold-active body.office-gold-active.app-mode .app-view,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard,
html.office-gold-active body.office-gold-active.app-mode .dashboard-top-row,
html.office-gold-active body.office-gold-active.app-mode .request-overview-layout,
html.office-gold-active body.office-gold-active.app-mode .request-overview-main,
html.office-gold-active body.office-gold-active.app-mode .content-columns{
  background:transparent!important;
}
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .panel-card,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .content-panel,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .stat-card,
html.office-gold-active body.office-gold-active.app-mode .settings-panel,
html.office-gold-active body.office-gold-active.app-mode .settings-pane,
html.office-gold-active body.office-gold-active.app-mode .settings-tabs{
  background:linear-gradient(145deg,rgba(8,10,12,.74),rgba(31,24,20,.58))!important;
  border:1px solid rgba(224,177,118,.30)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.04)!important;
  -webkit-backdrop-filter:blur(12px) saturate(1.04)!important;
  backdrop-filter:blur(12px) saturate(1.04)!important;
}
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .quick-grid button,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .request-list>* ,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .team-list>* ,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .news-list>* ,
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .work-grid article{
  background:linear-gradient(145deg,rgba(10,12,14,.77),rgba(37,28,22,.59))!important;
  border:1px solid rgba(224,177,118,.23)!important;
  box-shadow:0 9px 26px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035)!important;
  -webkit-backdrop-filter:blur(9px) saturate(1.03)!important;
  backdrop-filter:blur(9px) saturate(1.03)!important;
}
html.office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions::before,
html.office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions::after,
html.office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button::after{
  content:none!important;display:none!important;background:none!important;background-image:none!important;opacity:0!important;
}

/* Weather keeps a deliberate photo tile, as in the approved render. */
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card,
html.office-gold-active body.office-gold-active.app-mode .owner-weather-hero{
  position:relative!important;
  overflow:hidden!important;
  background:rgba(8,10,12,.72)!important;
}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-photo{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  opacity:1!important;
  filter:none!important;
  background-image:
    linear-gradient(90deg,rgba(5,7,9,.92) 0%,rgba(8,9,10,.72) 40%,rgba(11,10,10,.34) 72%,rgba(23,15,10,.16) 100%),
    url('/assets/office-gold-desktop.webp?v=officegold15')!important;
  background-size:cover!important;
  background-position:88% 38%!important;
}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::before,
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::after,
html.office-gold-active body.office-gold-active.app-mode .owner-weather-hero::before,
html.office-gold-active body.office-gold-active.app-mode .owner-weather-hero::after{
  content:none!important;display:none!important;background:none!important;opacity:0!important;
}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-copy,
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading,
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .mobile-weather-toolbar{
  position:relative!important;z-index:2!important;
}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-copy strong,
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading strong{color:#fff8ef!important;text-shadow:0 2px 10px rgba(0,0,0,.52)!important}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-copy small,
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading small{color:#d7ccc2!important;text-shadow:0 1px 7px rgba(0,0,0,.65)!important}

@media(max-width:760px){
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-photo{
    background-image:
      linear-gradient(90deg,rgba(5,7,9,.88),rgba(8,9,10,.58) 55%,rgba(24,15,10,.14)),
      url('/assets/office-gold-mobile.webp?v=officegold15')!important;
    background-position:72% 30%!important;
  }
}

/* ===== Appearance Studio 18 · compact visual editor ===== */
:root{
  --appearance-gold-alpha:.40;
  --appearance-gold-soft:.17;
  --appearance-glass-alpha:.78;
  --appearance-bg-brightness:.72;
  --appearance-bg-blur:0px;
  --appearance-glow-alpha:.22;
  --appearance-card-radius:18px;
}
.appearance-studio{margin:0 0 18px;padding:16px;border:1px solid color-mix(in srgb,var(--app-blue) 18%,transparent);border-radius:20px;background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 16px 44px rgba(0,0,0,.08)}
.appearance-studio-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:12px}.appearance-studio-head h2{margin:3px 0 4px}.appearance-studio-head p{margin:0;max-width:720px;color:var(--muted)}.appearance-studio-actions{display:flex;gap:8px;flex-wrap:wrap}
.appearance-studio-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;align-items:start}.appearance-studio-main{min-width:0}.appearance-block,.appearance-control-panel,.appearance-preview-card,.appearance-custom-icons{border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:16px;background:color-mix(in srgb,var(--panel) 88%,transparent)}.appearance-block{padding:12px}.appearance-block-title,.appearance-control-title{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}.appearance-block-title small,.appearance-control-title small{color:var(--muted)}
/* Compact popup/native theme selector */
.appearance-theme-picker-block{padding:10px 12px}.appearance-theme-select-wrap{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr) 24px;align-items:center;gap:10px;min-height:58px;padding:8px 10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;overflow:hidden}.appearance-theme-select-wrap:focus-within{border-color:#d7a15c;box-shadow:0 0 0 2px rgba(215,161,92,.14)}.appearance-theme-select-wrap select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:4}.appearance-theme-select-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.appearance-theme-select-copy small{color:var(--muted);font-size:10px}.appearance-theme-select-copy strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.appearance-theme-select-arrow{font-size:20px;color:#d7a15c;text-align:center}.appearance-theme-select-preview{height:42px;border-radius:10px;overflow:hidden;display:grid;grid-template-columns:15px 1fr;grid-template-rows:10px 1fr;gap:3px;padding:5px;border:1px solid rgba(255,255,255,.12)}.appearance-theme-select-preview i{display:block;border-radius:4px}.appearance-theme-select-preview i:first-child{grid-row:1/3}.appearance-theme-select-preview.classic{background:#dfe9f2}.appearance-theme-select-preview.classic i{background:#9fb7cb}.appearance-theme-select-preview.classic i:nth-child(2){background:#cfdce7}.appearance-theme-select-preview.classic i:nth-child(3){background:#f5f8fb}.appearance-theme-select-preview.office{background:linear-gradient(135deg,#090b0d,#2d2118)}.appearance-theme-select-preview.office i{background:rgba(225,171,101,.26);box-shadow:inset 0 0 0 1px rgba(229,179,112,.25)}
/* Three compact previews visible together on desktop */
.appearance-preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:9px}.appearance-preview-card{padding:8px;overflow:hidden}.appearance-preview-title{display:flex;flex-direction:column;gap:1px;margin-bottom:6px}.appearance-preview-title strong{font-size:12px}.appearance-preview-title small{color:var(--muted);font-size:9px}.appearance-live-preview{position:relative;isolation:isolate;aspect-ratio:4/3;height:auto;min-height:0;max-height:210px;border-radius:var(--appearance-card-radius);overflow:hidden;border:1px solid rgb(224 177 118 / var(--appearance-gold-soft));background:#122233}.appearance-live-preview::before{content:'';position:absolute;inset:calc(var(--appearance-bg-blur) * -1.25);z-index:-2;background-image:linear-gradient(rgba(0,0,0,.08),rgba(0,0,0,.08)),var(--ap-preview-bg);background-position:center;background-size:cover;background-repeat:no-repeat;filter:brightness(var(--appearance-bg-brightness)) blur(var(--appearance-bg-blur));transform:scale(1.04)}.appearance-live-preview::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 52% 42%,rgb(226 170 94 / var(--appearance-glow-alpha)),transparent 52%),linear-gradient(135deg,rgba(0,0,0,.04),rgba(0,0,0,.18))}.appearance-studio[data-preview-theme="classic-default"] .appearance-live-preview::after{background:rgba(255,255,255,.03)}.appearance-studio[data-preview-theme="classic-default"] .appearance-live-preview{border-color:#b9d3e5}
.preview-login{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:7px}.ap-login-brand{display:flex;align-items:center;gap:6px;color:white;text-shadow:0 2px 7px rgba(0,0,0,.5);font-size:9px}.appearance-studio[data-preview-theme="classic-default"] .ap-login-brand{color:#163957;text-shadow:none}.appearance-preview-logo{width:22px;height:27px;background-size:contain;background-position:center;background-repeat:no-repeat;flex:0 0 auto}.appearance-preview-logo.app-logo-mark{display:inline-flex}.ap-login-brand>div{display:flex;flex-direction:column;gap:0}.ap-login-brand small{font-size:6px;opacity:.82}.ap-login-card{width:72%;padding:8px;border-radius:var(--appearance-card-radius);background:rgb(9 10 12 / var(--appearance-glass-alpha));border:1px solid rgb(224 177 118 / var(--appearance-gold-alpha));box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 24px rgb(215 161 92 / var(--appearance-glow-alpha));display:flex;flex-direction:column;gap:5px;color:#fff}.appearance-studio[data-preview-theme="classic-default"] .ap-login-card{background:rgba(255,255,255,.92);border-color:#a7cde9;color:#183a56;box-shadow:none}.ap-login-card strong{font-size:8px}.ap-login-card i{height:13px;border-radius:calc(var(--appearance-card-radius) * .35);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}.ap-login-card button{height:17px;border:0;border-radius:calc(var(--appearance-card-radius) * .35);background:linear-gradient(90deg,#343940,#c6a06c);color:#fff;font-size:7px}
.preview-main{display:grid;grid-template-columns:27% 1fr;padding:6px;gap:5px}.ap-side,.ap-side-full{background:rgb(8 9 10 / calc(var(--appearance-glass-alpha) * .9));border:1px solid rgb(224 177 118 / var(--appearance-gold-alpha));border-radius:var(--appearance-card-radius);padding:5px;color:#eee;box-shadow:0 0 18px rgb(215 161 92 / calc(var(--appearance-glow-alpha) * .55))}.appearance-studio[data-preview-theme="classic-default"] .ap-side,.appearance-studio[data-preview-theme="classic-default"] .ap-side-full{background:rgba(225,238,248,.92);border-color:#a9cae1;color:#163957;box-shadow:none}.ap-side{display:flex;flex-direction:column;gap:4px}.ap-preview-brand{display:flex;align-items:center;gap:4px;font-size:7px}.ap-preview-brand .appearance-preview-logo{width:14px;height:17px}.ap-side i{height:11px;border-radius:4px;background:rgba(255,255,255,.08)}.ap-main{display:flex;flex-direction:column;gap:4px}.ap-top{height:16px;border-radius:calc(var(--appearance-card-radius) * .45);background:rgb(7 9 11 / calc(var(--appearance-glass-alpha) * .82));border:1px solid rgb(224 177 118 / var(--appearance-gold-soft));display:flex;align-items:center;justify-content:space-between;padding:0 5px;box-shadow:0 0 14px rgb(215 161 92 / calc(var(--appearance-glow-alpha) * .38))}.ap-top span{height:4px;border-radius:999px;background:rgba(255,255,255,.14)}.ap-top span:first-child{width:58%}.ap-top span:last-child{width:22%}.ap-cards{display:grid;grid-template-columns:1fr 1fr;gap:4px}.ap-cards i,.ap-wide{display:block;border-radius:calc(var(--appearance-card-radius) * .5);background:rgb(12 14 16 / calc(var(--appearance-glass-alpha) * .8));border:1px solid rgb(224 177 118 / var(--appearance-gold-soft));min-height:29px;box-shadow:0 0 14px rgb(215 161 92 / calc(var(--appearance-glow-alpha) * .32))}.ap-wide{flex:1}.appearance-studio[data-preview-theme="classic-default"] .ap-top,.appearance-studio[data-preview-theme="classic-default"] .ap-cards i,.appearance-studio[data-preview-theme="classic-default"] .ap-wide{background:rgba(255,255,255,.88);border-color:#b9d3e5;box-shadow:none}
.preview-sidebar{padding:6px;display:flex;justify-content:center}.ap-side-full{width:54%;height:100%;display:flex;flex-direction:column;gap:5px}.ap-side-full>div{display:flex;align-items:center;gap:4px;margin-bottom:2px;font-size:7px}.ap-side-full>span{font-size:7px;padding:3px 4px;border-radius:calc(var(--appearance-card-radius) * .32);background:rgba(255,255,255,.04)}
.appearance-control-panel{padding:12px;display:flex;flex-direction:column;gap:9px;position:sticky;top:76px;align-self:start;max-height:calc(100vh - 92px);overflow:auto}.appearance-control-panel>label{display:flex;flex-direction:column;gap:5px;font-size:11px}.appearance-control-panel>label>span{display:flex;justify-content:space-between;gap:8px}.appearance-control-panel input[type="range"]{width:100%;accent-color:#d99c4d}.appearance-toggle-list{display:grid;gap:6px;padding-top:4px;border-top:1px solid var(--line)}.appearance-toggle-list label{display:flex;align-items:center;gap:7px;font-size:11px}.appearance-icon-packs{padding-top:4px;border-top:1px solid var(--line)}.appearance-icon-pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.appearance-icon-pack-grid button{display:flex;align-items:center;gap:6px;padding:7px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--text)}.appearance-icon-pack-grid button.active{border-color:#d5a05c;background:rgba(170,109,45,.13);box-shadow:0 0 16px rgba(213,160,92,.1)}.appearance-icon-pack-grid i{font-style:normal;color:#e0a65c}
.appearance-custom-icons{margin-top:9px;padding:11px}.appearance-custom-icon-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.appearance-custom-icon-grid label{position:relative;min-height:70px;padding:36px 8px 8px;border:1px dashed var(--line);border-radius:10px;display:flex;align-items:flex-end;background:var(--surface);cursor:pointer;overflow:hidden}.appearance-custom-icon-grid label::before{content:'+';position:absolute;inset:7px auto auto 8px;font-size:18px;color:var(--muted)}.appearance-custom-icon-grid label.has-custom::before{content:'';width:25px;height:25px;background-image:var(--custom-preview);background-size:contain;background-position:center;background-repeat:no-repeat}.appearance-custom-icon-grid label::after{content:'Нажмите, чтобы выбрать файл';position:absolute;left:8px;right:8px;top:27px;font-size:8px;color:var(--muted);opacity:.8}.appearance-custom-icon-grid input{display:none}
.branding-help-grid,.branding-permanent-grid{display:grid!important;visibility:visible!important;opacity:1!important}.appearance-detailed-heading{margin:20px 0 11px;padding:14px 15px;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:16px;background:color-mix(in srgb,var(--panel) 91%,transparent)}.appearance-detailed-heading h3{margin:3px 0 4px}.appearance-detailed-heading p{margin:0;color:var(--muted);max-width:900px}
/* Theme tuning driven by Appearance Studio - affects the live application immediately. */
html.office-gold-active body.office-gold-active.app-mode::before{filter:brightness(var(--appearance-bg-brightness)) saturate(1.08)!important;transform:scale(1.025)!important}
html.office-gold-active body.office-gold-active.app-mode::after{content:''!important;display:block!important;position:fixed!important;inset:0!important;pointer-events:none!important;z-index:0!important;background:radial-gradient(circle at 50% 44%,rgb(226 170 94 / var(--appearance-glow-alpha)),transparent 46%),linear-gradient(90deg,rgba(2,3,4,.08),transparent 50%,rgba(2,3,4,.06))!important;-webkit-backdrop-filter:blur(var(--appearance-bg-blur))!important;backdrop-filter:blur(var(--appearance-bg-blur))!important}
html.office-gold-active body.office-gold-active.app-mode .role-dashboard .panel-card,html.office-gold-active body.office-gold-active.app-mode .role-dashboard .content-panel,html.office-gold-active body.office-gold-active.app-mode .role-dashboard .stat-card,html.office-gold-active body.office-gold-active.app-mode .settings-panel,html.office-gold-active body.office-gold-active.app-mode .settings-tabs{background:rgb(8 10 12 / var(--appearance-glass-alpha))!important;border-color:rgb(224 177 118 / var(--appearance-gold-alpha))!important;border-radius:var(--appearance-card-radius)!important;box-shadow:0 15px 38px rgba(0,0,0,.28),0 0 28px rgb(211 155 83 / calc(var(--appearance-glow-alpha) * .70))!important}
html.office-gold-active body.office-gold-active.app-mode .desktop-global-search,html.office-gold-active body.office-gold-active.app-mode .profile-chip,html.office-gold-active body.office-gold-active.app-mode .logout-action{border-color:rgb(224 177 118 / var(--appearance-gold-alpha))!important;border-radius:var(--appearance-card-radius)!important;box-shadow:0 0 20px rgb(211 155 83 / calc(var(--appearance-glow-alpha) * .48))!important}
.appearance-hide-version [data-app-version],.appearance-hide-version .app-footer-version{display:none!important}.appearance-hide-complex [data-company-subtitle]{display:none!important}.appearance-no-animations *{animation:none!important;transition:none!important}
/* Icon packs. */
body[data-icon-pack="office-gold"] .desktop-side-nav .nav-link::before,body[data-icon-pack="office-gold"] .quick-vector-icon,body[data-icon-pack="office-gold"] .mobile-bottom-icon{filter:sepia(1) saturate(1.4) hue-rotate(346deg) brightness(1.15) drop-shadow(0 0 5px rgba(224,164,85,.28))!important}body[data-icon-pack="neon"] .desktop-side-nav .nav-link::before,body[data-icon-pack="neon"] .quick-vector-icon,body[data-icon-pack="neon"] .mobile-bottom-icon{filter:saturate(1.8) brightness(1.22) drop-shadow(0 0 6px rgba(67,203,255,.38))!important}body[data-icon-pack="classic"] .desktop-side-nav .nav-link::before,body[data-icon-pack="classic"] .quick-vector-icon,body[data-icon-pack="classic"] .mobile-bottom-icon{filter:none!important}body[data-icon-pack="custom"] .desktop-side-nav .nav-link[data-key="home"]::before{background-image:var(--custom-icon-home,url('/assets/nav-home.svg'))!important}body[data-icon-pack="custom"] .desktop-side-nav .nav-link[data-key="requests"]::before{background-image:var(--custom-icon-requests,url('/assets/nav-requests.svg'))!important}body[data-icon-pack="custom"] .desktop-side-nav .nav-link[data-key="documents"]::before{background-image:var(--custom-icon-documents,url('/assets/nav-documents.svg'))!important}body[data-icon-pack="custom"] .desktop-side-nav .nav-link[data-key="announcements"]::before{background-image:var(--custom-icon-announcements,url('/assets/nav-announcements.svg'))!important}body[data-icon-pack="custom"] .desktop-side-nav .nav-link[data-key="votes"]::before{background-image:var(--custom-icon-votes,url('/assets/nav-votes.svg'))!important}body[data-icon-pack="custom"] .desktop-side-nav .nav-link[data-key="chat"]::before{background-image:var(--custom-icon-chat,url('/assets/nav-chat.svg'))!important}body[data-icon-pack="custom"] .desktop-side-nav .nav-link[data-key="staff"]::before{background-image:var(--custom-icon-staff,url('/assets/nav-staff.svg'))!important}body[data-icon-pack="custom"] .desktop-side-nav .nav-link[data-key="info"]::before{background-image:var(--custom-icon-info,url('/assets/nav-info.svg'))!important}body[data-icon-pack="custom"] .desktop-side-nav .nav-link[data-key="settings"]::before{background-image:var(--custom-icon-settings,url('/assets/nav-settings.svg'))!important}
@media(max-width:1380px){.appearance-studio-layout{grid-template-columns:1fr}.appearance-control-panel{position:static;max-height:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.appearance-control-title,.appearance-icon-packs,.appearance-toggle-list{grid-column:1/-1}.appearance-preview-grid{grid-template-columns:repeat(3,minmax(190px,1fr));overflow-x:auto}.appearance-live-preview{max-height:none}}
@media(max-width:820px){.appearance-studio{padding:10px;border-radius:15px}.appearance-studio-head{flex-direction:column}.appearance-studio-layout{display:block}.appearance-preview-grid{grid-template-columns:1fr;overflow:visible}.appearance-live-preview{aspect-ratio:16/10}.appearance-control-panel{display:flex;position:static;margin-top:9px}.appearance-custom-icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.branding-permanent-grid{display:grid!important}}


/* ===== Appearance Studio 19 · detailed previews + rounded Office Gold sidebar ===== */
/* Runtime Office Gold sidebar: one shared scene underneath, with a rounded floating
   glass navigation capsule. The brand itself is intentionally unboxed. */
@media(min-width:1180px){
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar{
    left:14px!important;
    top:14px!important;
    bottom:14px!important;
    height:auto!important;
    border:1px solid rgb(224 177 118 / calc(var(--appearance-gold-alpha) * .70))!important;
    border-radius:max(30px,calc(var(--appearance-card-radius) * 1.75))!important;
    background:linear-gradient(180deg,rgb(6 8 10 / calc(var(--appearance-glass-alpha) * .54)),rgb(18 14 12 / calc(var(--appearance-glass-alpha) * .42)))!important;
    box-shadow:0 18px 48px rgba(0,0,0,.26),0 0 30px rgb(211 155 83 / calc(var(--appearance-glow-alpha) * .34))!important;
    -webkit-backdrop-filter:blur(10px) saturate(1.03)!important;
    backdrop-filter:blur(10px) saturate(1.03)!important;
    overflow:hidden!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand,
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand::before,
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand::after,
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand>div{
    background:none!important;
    background-color:transparent!important;
    border:0!important;
    border-bottom:0!important;
    outline:0!important;
    box-shadow:none!important;
  }
  html.office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand{
    border-radius:0!important;
    padding:12px 12px 24px!important;
  }
}

/* Guaranteed visible live previews in the three full branding sections. */
.branding-section-live-preview{
  --detail-preview-radius:18px;
  position:relative;
  isolation:isolate;
  width:min(760px,100%);
  aspect-ratio:16/9;
  margin:12px auto 14px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--line) 72%,#d9a05d 28%);
  border-radius:var(--detail-preview-radius);
  background:#0a0d11;
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}
.branding-section-live-preview::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.13)),var(--detail-preview-bg);
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.branding-section-live-preview::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(135deg,rgba(0,0,0,.08),rgba(0,0,0,.25));
}
.branding-section-live-preview[data-theme="classic-default"]::after{background:rgba(255,255,255,.035)}
.detail-preview-badge{position:absolute;left:10px;top:9px;z-index:6;padding:5px 8px;border-radius:999px;background:rgba(7,9,11,.70);border:1px solid rgba(224,177,118,.26);color:#e8c18e;font-size:10px;backdrop-filter:blur(8px)}
.detail-login-brand{position:absolute;left:50%;top:19%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.55)}
.detail-login-brand .branding-detail-preview-logo{width:32px;height:40px;background-size:contain;background-repeat:no-repeat;background-position:center}
.detail-login-brand>div{display:flex;flex-direction:column}.detail-login-brand b{font-size:13px}.detail-login-brand small{font-size:8px;opacity:.76}
.detail-login-form{position:absolute;left:50%;top:57%;transform:translate(-50%,-50%);width:min(330px,58%);padding:14px;border-radius:22px;background:rgba(12,13,16,.76);border:1px solid rgba(221,174,116,.34);box-shadow:0 16px 42px rgba(0,0,0,.26);display:flex;flex-direction:column;gap:8px;color:#fff;backdrop-filter:blur(12px)}
.detail-login-form strong{font-size:13px}.detail-login-form i{display:block;height:28px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11)}.detail-login-form button{height:30px;border:0;border-radius:10px;background:linear-gradient(90deg,#333941,#c6a06c);color:#fff}
.branding-section-live-preview[data-theme="classic-default"] .detail-login-form{background:rgba(245,250,254,.92);border-color:#a9cae1;color:#163957;box-shadow:none}.branding-section-live-preview[data-theme="classic-default"] .detail-login-brand{color:#153957;text-shadow:none}
.detail-home-side{position:absolute;left:3%;top:7%;bottom:7%;width:23%;padding:12px;border-radius:26px;background:rgba(7,9,11,.63);border:1px solid rgba(224,177,118,.28);display:flex;flex-direction:column;gap:9px;color:#fff;backdrop-filter:blur(10px)}
.detail-home-side>div{display:flex;align-items:center;gap:7px;font-size:11px}.detail-home-side .branding-detail-preview-logo{width:24px;height:30px;background-size:contain;background-repeat:no-repeat;background-position:center}.detail-home-side span{height:19px;border-radius:8px;background:rgba(255,255,255,.06)}
.detail-home-main{position:absolute;left:28%;right:3%;top:7%;bottom:7%;display:flex;flex-direction:column;gap:8px}.detail-home-top,.detail-home-cards i,.detail-home-wide{background:rgba(8,10,12,.68);border:1px solid rgba(224,177,118,.25);border-radius:15px;backdrop-filter:blur(9px)}.detail-home-top{height:18%}.detail-home-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.detail-home-cards i{height:52px}.detail-home-wide{flex:1}
.branding-section-live-preview[data-theme="classic-default"] .detail-home-side,.branding-section-live-preview[data-theme="classic-default"] .detail-home-top,.branding-section-live-preview[data-theme="classic-default"] .detail-home-cards i,.branding-section-live-preview[data-theme="classic-default"] .detail-home-wide{background:rgba(244,249,253,.90);border-color:#a9cae1;color:#163957;backdrop-filter:none}
.detail-sidebar-shell{position:absolute;left:50%;top:6%;bottom:6%;width:29%;transform:translateX(-50%);padding:14px 12px;border-radius:38px;background:rgba(7,9,11,.66);border:1px solid rgba(224,177,118,.30);display:flex;flex-direction:column;gap:9px;color:#f0e8df;backdrop-filter:blur(10px);box-shadow:0 12px 34px rgba(0,0,0,.25)}
.detail-sidebar-shell>div{display:flex;align-items:center;gap:8px;margin-bottom:4px}.detail-sidebar-shell .branding-detail-preview-logo{width:25px;height:31px;background-size:contain;background-repeat:no-repeat;background-position:center}.detail-sidebar-shell span{padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.045);font-size:9px}.detail-sidebar-shell span:first-of-type{background:rgba(177,117,60,.34);border:1px solid rgba(224,177,118,.32)}
.branding-section-live-preview[data-theme="classic-default"] .detail-sidebar-shell{background:rgba(230,241,249,.92);border-color:#a9cae1;color:#163957;backdrop-filter:none;box-shadow:none}

/* Make sure legacy/full editors are never collapsed by the visual studio. */
.branding-position-group .branding-editor-mount{display:block!important;visibility:visible!important;opacity:1!important;min-height:1px!important}
.branding-position-group .branding-crop-editor{display:block!important;visibility:visible!important;opacity:1!important}

@media(max-width:820px){
  .branding-section-live-preview{aspect-ratio:4/3}.detail-login-form{width:72%}.detail-home-side{width:27%}.detail-home-main{left:32%}.detail-sidebar-shell{width:42%}
}


/* ===== Appearance Studio 20 ===== */
.appearance-preview-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.appearance-preview-title>div{display:flex;flex-direction:column;gap:2px}.appearance-preview-device-switch{display:inline-flex;gap:2px;padding:2px;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);border-radius:999px;background:rgba(0,0,0,.18)}.appearance-preview-device-switch button{border:0;background:transparent;color:var(--muted);font-size:9px;padding:4px 7px;border-radius:999px;cursor:pointer}.appearance-preview-device-switch button.active{background:rgba(211,155,83,.24);color:#efc98f;box-shadow:0 0 12px rgba(211,155,83,.12)}
.preview-login{position:relative;display:block!important;padding:0!important;overflow:hidden;touch-action:none}.preview-login .ap-login-brand{position:absolute;left:50%;top:15%;transform:translateX(-50%);z-index:3}.preview-login .ap-login-card{position:absolute;left:var(--ap-login-x,50%);top:var(--ap-login-y,58%);transform:translate(-50%,-50%) scale(var(--ap-login-scale,1));transform-origin:center;z-index:4;cursor:grab;touch-action:none;user-select:none;transition:box-shadow .15s ease}.preview-login .ap-login-card.is-dragging{cursor:grabbing;box-shadow:0 14px 34px rgba(0,0,0,.35),0 0 30px rgb(215 161 92 / .28)}
.appearance-control-panel input[type="range"]{touch-action:none}.appearance-control-panel input[type="range"]:active{filter:brightness(1.06)}
/* Static detailed preview hosts always remain visible. */
#brandingLoginLivePreview,#brandingHomeLivePreview,#brandingSidebarLivePreview{display:block!important;visibility:visible!important;opacity:1!important;min-height:260px!important}
.detail-login-form{left:var(--detail-login-x,50%)!important;top:var(--detail-login-y,57%)!important;transform:translate(-50%,-50%) scale(var(--detail-login-scale,1))!important;transform-origin:center;cursor:grab;touch-action:none;user-select:none}.detail-login-form.is-dragging{cursor:grabbing;box-shadow:0 18px 48px rgba(0,0,0,.34),0 0 28px rgba(211,155,83,.25)}
.detail-preview-badge{display:flex;align-items:center;justify-content:space-between;gap:10px;max-width:calc(100% - 20px)}.detail-preview-device{color:#fff;opacity:.9}.detail-preview-hint{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:5;padding:4px 8px;border-radius:999px;background:rgba(7,9,11,.60);border:1px solid rgba(224,177,118,.18);font-size:9px;color:#d9c6ae;white-space:nowrap}
/* Detailed photo previews are intentionally larger than the technical controls. */
#brandingHomeLivePreview,#brandingSidebarLivePreview{margin-bottom:16px}
@media(max-width:820px){#brandingLoginLivePreview,#brandingHomeLivePreview,#brandingSidebarLivePreview{min-height:220px!important}.appearance-preview-title{align-items:flex-start}.appearance-preview-device-switch{flex:0 0 auto}}

/* ===== Appearance Studio 21 · weather card editor ===== */
:root{
  --weather-desktop-x:88%;--weather-desktop-y:38%;--weather-desktop-scale:1;
  --weather-mobile-x:72%;--weather-mobile-y:30%;--weather-mobile-scale:1;
  --weather-city-desktop-x:12%;--weather-city-desktop-y:45%;
  --weather-city-mobile-x:16%;--weather-city-mobile-y:48%;
  --weather-reading-desktop-x:88%;--weather-reading-desktop-y:58%;
  --weather-reading-mobile-x:82%;--weather-reading-mobile-y:62%;
}
.appearance-weather-editor{margin-top:9px;padding:10px;border:1px solid color-mix(in srgb,var(--line) 82%,transparent);border-radius:16px;background:color-mix(in srgb,var(--panel) 88%,transparent)}
.appearance-weather-title{margin-bottom:7px}.appearance-weather-stage{--ap-preview-bg:url('/assets/office-gold-desktop.webp');position:relative;isolation:isolate;width:100%;aspect-ratio:16/6;min-height:150px;overflow:hidden;border-radius:var(--appearance-card-radius);border:1px solid rgb(224 177 118 / var(--appearance-gold-soft));background:#0a0c0e;touch-action:none;user-select:none;cursor:grab}.appearance-weather-stage[data-device="mobile"]{aspect-ratio:16/8;max-width:620px}.appearance-weather-stage::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(5,7,9,.88),rgba(9,10,12,.56) 53%,rgba(25,16,10,.16))}.ap-weather-photo{position:absolute;inset:0;z-index:0;background-image:var(--ap-preview-bg);background-size:cover;background-repeat:no-repeat;will-change:transform,background-position}.ap-weather-city,.ap-weather-reading{position:absolute;z-index:3;transform:translate(-50%,-50%);display:flex;flex-direction:column;color:#fff8ef;text-shadow:0 2px 10px rgba(0,0,0,.62);cursor:grab;touch-action:none;user-select:none}.ap-weather-city{align-items:flex-start;gap:2px}.ap-weather-city small{font-size:9px;color:#d9b574;letter-spacing:.08em}.ap-weather-city strong{font-size:25px}.ap-weather-city span{font-size:8px;color:#d8cec4}.ap-weather-reading{align-items:flex-end;gap:1px}.ap-weather-reading b{font-size:27px;line-height:1}.ap-weather-reading strong{font-size:31px;line-height:1}.ap-weather-reading small{font-size:9px}.appearance-weather-controls{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:8px 12px;align-items:end;margin-top:8px}.appearance-weather-controls label{display:flex;flex-direction:column;gap:4px;font-size:10px}.appearance-weather-controls label span{display:flex;justify-content:space-between;gap:8px}.appearance-weather-controls input[type="range"]{width:100%;accent-color:#d99c4d}.appearance-weather-controls>small{grid-column:1/-1;color:var(--muted);font-size:9px}

/* Apply the saved weather crop and text positions to the real Office Gold weather card. */
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-photo{
  background-position:var(--weather-desktop-x) var(--weather-desktop-y)!important;
  transform:scale(var(--weather-desktop-scale))!important;
  transform-origin:var(--weather-desktop-x) var(--weather-desktop-y)!important;
}
html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-photo{
  background-position:var(--weather-mobile-x) var(--weather-mobile-y)!important;
  transform:scale(var(--weather-mobile-scale))!important;
  transform-origin:var(--weather-mobile-x) var(--weather-mobile-y)!important;
}
@media(max-width:820px){.appearance-weather-stage{min-height:180px;aspect-ratio:4/3}.appearance-weather-controls{grid-template-columns:1fr}.appearance-weather-controls>small{grid-column:1}.ap-weather-city strong{font-size:22px}.ap-weather-reading strong{font-size:27px}}

/* ===== Appearance editor restoration / Office Gold independent assets (HF22) ===== */
.branding-office-gold-library{margin-top:18px}
.branding-office-gold-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:14px}
.branding-office-gold-grid .branding-asset-card{min-width:0}
.branding-editor-stage.is-weather{aspect-ratio:16/7;min-height:220px;border-radius:22px;overflow:hidden;position:relative}
.branding-editor-stage.is-weather .branding-editor-image{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat}
.branding-weather-card-mock{position:absolute;inset:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:10% 7%;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.8);pointer-events:none}
.branding-weather-city,.branding-weather-reading{display:flex;flex-direction:column;gap:4px}
.branding-weather-city span{font-size:11px;letter-spacing:.12em;color:#ddb37f}.branding-weather-city strong{font-size:28px}.branding-weather-city small{font-size:11px;color:#c5bbb2}
.branding-weather-reading{align-items:flex-end}.branding-weather-reading b{font-size:26px}.branding-weather-reading strong{font-size:40px}.branding-weather-reading small{font-size:12px;color:#ddd4cc}

/* Uploaded Office Gold main image becomes the real scene; Classic assets remain separate. */
html.office-gold-active body.office-gold-active.app-mode::before{
  background-image:linear-gradient(rgba(7,8,10,.20),rgba(7,8,10,.30)),var(--branding-home-office-gold-image,url('/assets/office-gold-desktop.webp?v=appearance-restored22'))!important;
  background-position:center,var(--branding-home-office-gold-desktop-x,50%) var(--branding-home-office-gold-desktop-y,50%)!important;
  background-size:cover,var(--branding-home-office-gold-desktop-size,cover)!important;
  background-repeat:no-repeat!important;
}
html.mobile-device.office-gold-active body.office-gold-active.app-mode::before{
  background-image:linear-gradient(rgba(7,8,10,.20),rgba(7,8,10,.30)),var(--branding-home-office-gold-image,url('/assets/office-gold-mobile.webp?v=appearance-restored22'))!important;
  background-position:center,var(--branding-home-office-gold-mobile-x,50%) var(--branding-home-office-gold-mobile-y,50%)!important;
  background-size:cover,var(--branding-home-office-gold-mobile-size,cover)!important;
}
html.office-gold-active.login-active{
  background-image:var(--branding-login-office-gold-image,url('/assets/office-gold-desktop.webp?v=appearance-restored22'))!important;
  background-position:var(--branding-login-office-gold-desktop-x,50%) var(--branding-login-office-gold-desktop-y,50%)!important;
  background-size:var(--branding-login-office-gold-desktop-size,cover)!important;
}
html.mobile-device.office-gold-active.login-active{
  background-image:var(--branding-login-office-gold-image,url('/assets/office-gold-mobile.webp?v=appearance-restored22'))!important;
  background-position:var(--branding-login-office-gold-mobile-x,50%) var(--branding-login-office-gold-mobile-y,50%)!important;
}
html.office-gold-active.login-active body:not(.app-mode) .background{
  background-image:var(--branding-login-office-gold-image,url('/assets/office-gold-desktop.webp?v=appearance-restored22'))!important;
  background-position:var(--branding-login-office-gold-desktop-x,50%) var(--branding-login-office-gold-desktop-y,50%)!important;
  background-size:var(--branding-login-office-gold-desktop-size,cover)!important;
}
html.mobile-device.office-gold-active.login-active body:not(.app-mode) .background{
  background-image:var(--branding-login-office-gold-image,url('/assets/office-gold-mobile.webp?v=appearance-restored22'))!important;
  background-position:var(--branding-login-office-gold-mobile-x,50%) var(--branding-login-office-gold-mobile-y,50%)!important;
  background-size:var(--branding-login-office-gold-mobile-size,cover)!important;
}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::before,
html.office-gold-active body.office-gold-active.app-mode .owner-weather-hero::before{
  background-image:var(--branding-weather-office-gold-image,var(--branding-home-office-gold-image,url('/assets/office-gold-desktop.webp?v=appearance-restored22')))!important;
  background-position:var(--branding-weather-office-gold-desktop-x,50%) var(--branding-weather-office-gold-desktop-y,50%)!important;
  background-size:var(--branding-weather-office-gold-desktop-size,cover)!important;
}
html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::before,
html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero::before{
  background-image:var(--branding-weather-office-gold-image,var(--branding-home-office-gold-image,url('/assets/office-gold-mobile.webp?v=appearance-restored22')))!important;
  background-position:var(--branding-weather-office-gold-mobile-x,50%) var(--branding-weather-office-gold-mobile-y,50%)!important;
  background-size:var(--branding-weather-office-gold-mobile-size,cover)!important;
}
@media(min-width:1180px){
  html.office-gold-active body.office-gold-active.app-mode.branding-sidebar-office-gold-custom .desktop-sidebar{position:relative!important;overflow:hidden!important;border-radius:28px!important;margin:10px 0 10px 10px!important;height:calc(100vh - 20px)!important;border:1px solid rgba(224,177,118,.24)!important}
  html.office-gold-active body.office-gold-active.app-mode.branding-sidebar-office-gold-custom .desktop-sidebar::before{
    content:""!important;display:block!important;position:absolute!important;inset:-8%!important;z-index:0!important;opacity:var(--branding-sidebar-office-gold-opacity,1)!important;
    background-image:linear-gradient(rgba(8,10,12,.22),rgba(8,10,12,.40)),var(--branding-sidebar-office-gold-image)!important;
    background-position:center,var(--branding-sidebar-office-gold-desktop-x,50%) var(--branding-sidebar-office-gold-desktop-y,50%)!important;
    background-size:cover,cover!important;background-repeat:no-repeat!important;
    transform:scale(var(--branding-sidebar-office-gold-desktop-scale,1))!important;transform-origin:var(--branding-sidebar-office-gold-desktop-x,50%) var(--branding-sidebar-office-gold-desktop-y,50%)!important;
  }
  html.office-gold-active body.office-gold-active.app-mode.branding-sidebar-office-gold-custom .desktop-sidebar>*{position:relative;z-index:1}
}
@media(max-width:900px){.branding-office-gold-grid{grid-template-columns:1fr}.branding-editor-stage.is-weather{min-height:180px}}

/* ===== HOTFIX 23 · unified theme image editors =====
   One editor per visible section. In Office Gold, Classic day/night cards are
   hidden and the dedicated Office Gold asset is edited in the same place. */
.branding-preset-office-gold [data-branding-theme-card]{display:none!important}
.branding-preset-office-gold [data-branding-preset-card="gradient-office-gold"]{display:block!important}
.branding-preset-office-gold .branding-theme-switch{display:none!important}
.branding-office-gold-grid-weather-only{grid-template-columns:minmax(0,1fr)!important}
.branding-office-gold-grid-weather-only>.branding-asset-card{max-width:1180px;width:100%}

/* The image selected in the unified Office Gold "Главная" editor is the real
   application scene. Keep this at the end of the stylesheet so older bundled
   office-gold rules cannot replace it with a hard-coded asset. */
html.office-gold-active body.office-gold-active.app-mode::before{
  background-image:linear-gradient(rgba(7,8,10,.20),rgba(7,8,10,.30)),var(--office-gold-runtime-main-image,var(--branding-home-office-gold-image,url('/assets/office-gold-desktop.webp?v=appearance-unified23'))) !important;
  background-position:center,var(--branding-home-office-gold-desktop-x,50%) var(--branding-home-office-gold-desktop-y,50%)!important;
  background-size:cover,var(--branding-home-office-gold-desktop-size,cover)!important;
  background-repeat:no-repeat!important;
}
html.mobile-device.office-gold-active body.office-gold-active.app-mode::before{
  background-image:linear-gradient(rgba(7,8,10,.20),rgba(7,8,10,.30)),var(--office-gold-runtime-main-image,var(--branding-home-office-gold-image,url('/assets/office-gold-mobile.webp?v=appearance-unified23'))) !important;
  background-position:center,var(--branding-home-office-gold-mobile-x,50%) var(--branding-home-office-gold-mobile-y,50%)!important;
  background-size:cover,var(--branding-home-office-gold-mobile-size,cover)!important;
}
html.office-gold-active.login-active,
html.office-gold-active.login-active body:not(.app-mode) .background{
  background-image:var(--office-gold-runtime-login-image,var(--branding-login-office-gold-image,url('/assets/office-gold-desktop.webp?v=appearance-unified23'))) !important;
}
html.mobile-device.office-gold-active.login-active,
html.mobile-device.office-gold-active.login-active body:not(.app-mode) .background{
  background-image:var(--office-gold-runtime-login-image,var(--branding-login-office-gold-image,url('/assets/office-gold-mobile.webp?v=appearance-unified23'))) !important;
}
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::before,
html.office-gold-active body.office-gold-active.app-mode .owner-weather-hero::before{
  background-image:var(--office-gold-runtime-weather-image,var(--branding-weather-office-gold-image,var(--office-gold-runtime-main-image,var(--branding-home-office-gold-image,url('/assets/office-gold-desktop.webp?v=appearance-unified23')))))!important;
}
html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::before,
html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero::before{
  background-image:var(--office-gold-runtime-weather-image,var(--branding-weather-office-gold-image,var(--office-gold-runtime-main-image,var(--branding-home-office-gold-image,url('/assets/office-gold-mobile.webp?v=appearance-unified23')))))!important;
}


/* ===== HOTFIX 24 · unified Office Gold weather editor ===== */
:root{--weather-brand-mobile-x:20%;--weather-brand-mobile-y:15%}
.appearance-weather-upload-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:10px 12px;border:1px solid rgba(224,177,118,.22);border-radius:14px;background:rgba(10,11,13,.58)}
.appearance-weather-upload-row>div:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}.appearance-weather-upload-row strong{font-size:12px}.appearance-weather-upload-row small{font-size:10px;color:var(--muted);white-space:normal}.appearance-weather-upload-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}.appearance-weather-upload-actions .file-picker-button{margin:0}
.ap-weather-brand{position:absolute;z-index:4;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;color:#fff8ef;text-shadow:0 2px 10px rgba(0,0,0,.64);cursor:grab;touch-action:none;user-select:none}.ap-weather-brand.hidden{display:none!important}.ap-weather-brand .appearance-preview-logo{width:27px;height:34px;flex:0 0 27px;color:#ddb37f}.ap-weather-brand>div{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.ap-weather-brand strong{font-size:14px;letter-spacing:.08em;white-space:nowrap}.ap-weather-brand small{font-size:8px;color:#d7ccc2;white-space:nowrap}
@media(max-width:820px){.appearance-weather-upload-row{align-items:flex-start;flex-direction:column}.appearance-weather-upload-actions{width:100%;flex-wrap:wrap}}

/* The uploaded weather image is the actual photo layer of the real Office Gold card.
   This final override intentionally wins over older hard-coded office-gold backgrounds. */
html.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-photo,
html.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-photo{
  display:block!important;position:absolute!important;inset:0!important;opacity:1!important;filter:none!important;
  background-image:linear-gradient(90deg,rgba(5,7,9,.90) 0%,rgba(8,9,10,.66) 43%,rgba(12,10,10,.30) 74%,rgba(28,17,10,.12) 100%),var(--office-gold-runtime-weather-image,var(--branding-weather-office-gold-image,var(--office-gold-runtime-main-image,var(--branding-home-office-gold-image,url('/assets/office-gold-desktop.webp?v=appearance-weather24')))))!important;
  background-repeat:no-repeat!important;background-size:cover!important;
}
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-photo,
html:not(.mobile-device).office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-photo{
  background-position:var(--weather-desktop-x) var(--weather-desktop-y)!important;
  transform:scale(var(--weather-desktop-scale))!important;transform-origin:var(--weather-desktop-x) var(--weather-desktop-y)!important;
}
html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-photo,
html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-photo{
  background-image:linear-gradient(90deg,rgba(5,7,9,.88),rgba(8,9,10,.56) 55%,rgba(24,15,10,.12)),var(--office-gold-runtime-weather-image,var(--branding-weather-office-gold-image,var(--office-gold-runtime-main-image,var(--branding-home-office-gold-image,url('/assets/office-gold-mobile.webp?v=appearance-weather24')))))!important;
  background-position:var(--weather-mobile-x) var(--weather-mobile-y)!important;
  transform:scale(var(--weather-mobile-scale))!important;transform-origin:var(--weather-mobile-x) var(--weather-mobile-y)!important;
}


/* ==========================================================
   HF29 · CLEAN FIXED WEATHER LAYOUT
   One layout only. No saved text coordinates are used on the real card.
   The weather photo remains movable/scalable through Appearance settings.
   ========================================================== */

/* Editor preview: overlays are fixed; dragging empty space edits only the photo. */
.ap-weather-city,.ap-weather-reading,.ap-weather-brand{cursor:default!important}
#appearancePreviewWeather[data-device="desktop"] .ap-weather-city{left:12%!important;top:45%!important}
#appearancePreviewWeather[data-device="desktop"] .ap-weather-reading{left:88%!important;top:58%!important}
#appearancePreviewWeather[data-device="desktop"] .ap-weather-brand{display:none!important}
#appearancePreviewWeather[data-device="mobile"] .ap-weather-brand{display:flex!important;left:20%!important;top:16%!important}
#appearancePreviewWeather[data-device="mobile"] .ap-weather-city{left:17%!important;top:58%!important}
#appearancePreviewWeather[data-device="mobile"] .ap-weather-reading{left:82%!important;top:65%!important}

@media(max-width:760px){
  /* Use the original mobile card flow. The photo stays absolutely behind it. */
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    align-items:end!important;
    width:100%!important;
    min-height:208px!important;
    height:auto!important;
    padding:15px 18px 18px!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  /* Brand sits in its own top row, exactly like the pre-editor mobile layout. */
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .mobile-weather-toolbar,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .mobile-weather-toolbar{
    position:relative!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    grid-column:1/-1!important;
    grid-row:1!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    height:auto!important;
    margin:0 0 14px!important;
    padding:0!important;
    z-index:6!important;
    pointer-events:none!important;
  }
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .mobile-weather-theme-toggle,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .mobile-weather-theme-toggle{display:none!important}
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .mobile-weather-brand,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .mobile-weather-brand{
    position:relative!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    display:flex!important;
    align-items:center!important;
    gap:9px!important;
    width:auto!important;
    max-width:82%!important;
    margin:0!important;
    padding:0!important;
    z-index:7!important;
    pointer-events:none!important;
  }

  /* City/info is a normal grid cell: no percentages, no translate, no off-screen clipping. */
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-copy,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-copy{
    position:relative!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    grid-column:1!important;
    grid-row:2!important;
    align-self:end!important;
    justify-self:start!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    width:auto!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    z-index:6!important;
    text-align:left!important;
  }

  /* Weather reading is the right grid cell. */
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-reading{
    position:relative!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    grid-column:2!important;
    grid-row:2!important;
    align-self:end!important;
    justify-self:end!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-end!important;
    justify-content:flex-end!important;
    width:auto!important;
    max-width:none!important;
    min-width:92px!important;
    margin:0!important;
    padding:0!important;
    gap:2px!important;
    overflow:visible!important;
    z-index:6!important;
    text-align:right!important;
  }
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading>span,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-reading>span{
    display:block!important;grid-area:auto!important;margin:0!important;line-height:1!important;
  }
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading>strong,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-reading>strong{
    display:block!important;grid-area:auto!important;margin:2px 0 0!important;line-height:1!important;white-space:nowrap!important;
  }
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading>small,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-reading>small{
    display:block!important;grid-area:auto!important;margin:2px 0 0!important;line-height:1.15!important;white-space:nowrap!important;
  }
}

/* Narrow phones (iPhone 7/SE class): keep both columns inside the card. */
@media(max-width:390px){
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero{
    min-height:200px!important;
    padding:14px 15px 16px!important;
    column-gap:8px!important;
  }
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-reading{min-width:86px!important}
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading>strong,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-reading>strong{font-size:34px!important}
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading>span,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-reading>span{font-size:30px!important}
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-copy>strong,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-copy>h1{font-size:26px!important}
}



/* HF32 APP SCALE PROFILE UI START */
.app-scale-profile-card{margin-top:12px;}
.app-scale-control{display:grid;gap:12px;}
.app-scale-control>label{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--app-muted);font-size:10px;}
.app-scale-control>label strong{color:var(--app-blue);font-size:12px;}
body.office-gold-active .app-scale-control>label strong{color:#e8b76d;}
.app-scale-range{width:100%;accent-color:var(--app-blue);}
body.office-gold-active .app-scale-range{accent-color:#d9a55a;}
.app-scale-presets{display:flex;flex-wrap:wrap;gap:7px;}
.app-scale-presets button{min-height:34px;padding:7px 11px;border:1px solid var(--app-border);border-radius:10px;background:var(--app-surface);color:var(--app-text);font:inherit;font-size:10px;font-weight:800;cursor:pointer;}
.app-scale-presets button.active{border-color:var(--app-blue);background:var(--app-blue-soft);color:var(--app-blue);}
body.office-gold-active .app-scale-presets button.active{border-color:rgba(225,173,94,.75);background:rgba(191,128,48,.20);color:#f1c77f;}
.app-scale-presets .app-scale-reset{margin-left:auto;}
@media(max-width:720px){
  .app-scale-profile-card{margin:8px 0!important;padding:12px!important;}
  .app-scale-profile-card h2{font-size:16px!important;}
  .app-scale-control>label{font-size:12px;}
  .app-scale-control>label strong{font-size:14px;}
  .app-scale-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
  .app-scale-presets button{font-size:12px;min-height:40px;}
  .app-scale-presets .app-scale-reset{margin-left:0;grid-column:span 3;}
}
/* HF32 APP SCALE PROFILE UI END */


/* ========================================================================== */

/* ========================================================================== */

/* ========================================================================== */
/* HF37 · GRADIENT GLASS · OFFICE GOLD — CLEAN LIGHT                          */
/* Dark Office Gold is untouched. Every visual rule below is light-only.       */
/* ========================================================================== */

/* Make Dark/Light controls available for Gradient Glass without moving layout. */
body.visual-preset-gradient-office-gold #themeToggle,
body.visual-preset-gradient-office-gold #appThemeToggle,
body.visual-preset-gradient-office-gold .mobile-weather-theme-toggle,
body.visual-preset-gradient-office-gold [data-branding-theme-group] .branding-theme-switch,
body.visual-preset-gradient-office-gold .branding-login-style-group>.branding-group-heading .branding-theme-switch{
  display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;
}
body:not(.app-mode).visual-preset-gradient-office-gold .topbar{justify-content:space-between!important}

/* On mobile login the old premium theme hid the whole topbar. Bring back only
   the small switch; the approved login composition itself is not moved. */
@media(max-width:760px){
  html.mobile-device.office-gold-active.login-active body.visual-preset-gradient-office-gold:not(.app-mode) .topbar{
    display:flex!important;position:absolute!important;top:max(10px,env(safe-area-inset-top))!important;
    right:max(12px,env(safe-area-inset-right))!important;left:auto!important;width:auto!important;min-width:0!important;
    height:auto!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;
    box-shadow:none!important;z-index:80!important;justify-content:flex-end!important;
  }
  html.mobile-device.office-gold-active.login-active body.visual-preset-gradient-office-gold:not(.app-mode) .topbar>*:not(#themeToggle){display:none!important}
  html.mobile-device.office-gold-active.login-active body.visual-preset-gradient-office-gold:not(.app-mode) #themeToggle{display:flex!important}
}

/* ---------- LIGHT PALETTE ---------- */
html[data-theme="light"] body.visual-preset-gradient-office-gold.app-visual-office-gold.app-mode{
  color-scheme:light!important;
  --app-bg:#e9e4dc;
  --app-surface:rgba(246,242,235,.93);
  --app-surface-strong:rgba(251,248,243,.96);
  --app-border:rgba(143,116,84,.28);
  --app-text:#282723;
  --app-muted:#6d675e;
  --app-blue:#aa7e49;
  --app-blue-soft:rgba(174,132,79,.13);
  --app-green:#557765;
  --app-green-soft:rgba(85,119,101,.12);
  --app-orange:#aa7b44;
  --app-orange-soft:rgba(170,123,68,.12);
  --app-red:#a25e5b;
  --app-red-soft:rgba(162,94,91,.11);
  --app-violet:#7d7482;
  --app-shadow:0 16px 42px rgba(74,59,42,.12);
  background:#e9e4dc!important;color:#282723!important;
}

/* Dedicated light Office Gold photos: no Classic photo is reused. */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode::before{
  background-image:url('/assets/office-gold-light37-desktop.webp?v=37')!important;
  background-position:center center!important;background-size:cover!important;background-repeat:no-repeat!important;
  opacity:1!important;filter:brightness(calc(.78 + var(--appearance-bg-brightness) * .30)) saturate(.84) contrast(1.03) blur(var(--appearance-bg-blur))!important;
  transform:scale(1.035)!important;transform-origin:center!important;
}
html.mobile-device[data-theme="light"].office-gold-active body.office-gold-active.app-mode::before{
  background-image:url('/assets/office-gold-light37-mobile.webp?v=37')!important;background-position:center 46%!important;
}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode::after{
  background:linear-gradient(135deg,rgba(250,247,241,.09),rgba(221,207,188,.05) 58%,rgba(177,137,87,.035))!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
}

/* ---------- CLEAN GLASS: opaque enough to read, translucent enough to feel premium ---------- */
html[data-theme="light"] body.visual-preset-gradient-office-gold.app-visual-office-gold.app-mode .app-header,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .role-dashboard .panel-card,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .role-dashboard .content-panel,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .role-dashboard .stat-card,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .subpage .panel-card,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .subpage .content-panel,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .settings-panel,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .settings-tabs,
html[data-theme="light"] body.visual-preset-gradient-office-gold.app-visual-office-gold.app-mode .requests-toolbar,
html[data-theme="light"] body.visual-preset-gradient-office-gold.app-visual-office-gold.app-mode .announcement-view-tabs{
  background:rgba(249,246,240,.92)!important;
  border-color:rgb(163 126 82 / calc(.22 + var(--appearance-gold-alpha) * .35))!important;
  color:#282723!important;border-radius:var(--appearance-card-radius)!important;
  -webkit-backdrop-filter:blur(7px) saturate(.95)!important;backdrop-filter:blur(7px) saturate(.95)!important;
  box-shadow:0 14px 34px rgba(72,56,39,.11),inset 0 1px 0 rgba(255,255,255,.82),0 0 18px rgb(190 143 86 / calc(var(--appearance-glow-alpha) * .18))!important;
}

/* Sidebar: a soft ivory rail instead of a dark/tinted fog layer. */
@media(min-width:761px){
  html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-sidebar{
    background:linear-gradient(180deg,rgba(246,241,233,.94),rgba(235,226,214,.90))!important;
    border-color:rgba(158,121,77,.26)!important;color:#292722!important;
    box-shadow:12px 0 32px rgba(64,49,32,.12),inset 0 1px 0 rgba(255,255,255,.80)!important;
  }
  html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-sidebar::before{opacity:.10!important;filter:saturate(.55) brightness(1.14)!important}
  html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand{border-color:rgba(156,119,74,.22)!important}
  html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand .app-logo-mark{color:#b48349!important;filter:none!important}
  html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand strong{color:#282723!important}
  html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-sidebar-brand small{color:#746b61!important}
  html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-sidebar-nav button{color:#4d4942!important}
  html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-sidebar-nav button.active{
    color:#3a3025!important;background:linear-gradient(135deg,rgba(217,190,154,.55),rgba(244,235,222,.82))!important;
    border-color:rgba(178,133,78,.38)!important;box-shadow:0 8px 20px rgba(91,66,39,.10)!important;
  }
}

/* Header/search/profile. */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-global-search,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .profile-chip,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .logout-action,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .theme-toggle{
  background:rgba(252,249,244,.88)!important;border-color:rgba(159,120,75,.30)!important;color:#302d28!important;
  box-shadow:0 8px 22px rgba(77,58,38,.09)!important;
}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-global-search input{color:#302d28!important;background:rgba(255,255,255,.44)!important}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-global-search input::placeholder{color:#7c746a!important}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .profile-copy strong{color:#282723!important}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .profile-copy small{color:#756d63!important}

/* Typography: eliminate white-on-ivory leftovers from dark Office Gold. */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode h1,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode h2,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode h3,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .section-heading strong,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .quick-grid button strong,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-action strong,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .stat-card strong,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .profile-device-row strong,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .team-list strong,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .work-grid strong,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .news-list strong{color:#292722!important;text-shadow:none!important}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .section-subcopy,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .quick-grid button small,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-action small,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .stat-card span,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .profile-device-row small,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .team-list small,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .work-grid small{color:#716a61!important;text-shadow:none!important}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .eyebrow,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .quick-slogan{color:#a3733d!important}

/* Quick actions and stat tiles: cream, crisp, not translucent white. */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions{
  background:rgba(247,243,236,.91)!important;border-color:rgba(168,128,78,.32)!important;
}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions::before{
  background:linear-gradient(90deg,rgba(248,244,237,.92),rgba(248,244,237,.72) 58%,rgba(248,244,237,.36)),url('/assets/office-gold-light37-desktop.webp?v=37') 74% 50%/cover no-repeat!important;
  opacity:.44!important;filter:none!important;
}
html.mobile-device[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions::before{
  background:linear-gradient(180deg,rgba(248,244,237,.94),rgba(248,244,237,.64)),url('/assets/office-gold-light37-mobile.webp?v=37') 68% 48%/cover no-repeat!important;
  opacity:.36!important;
}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-action,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .request-stats-inline .stat-card,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .work-grid article{
  background:rgba(252,250,246,.94)!important;border-color:rgba(162,124,78,.24)!important;color:#292722!important;
  box-shadow:0 8px 22px rgba(74,56,36,.08),inset 0 1px 0 rgba(255,255,255,.92)!important;
}

/* Requests/news/team rows get separation without becoming dark bars. */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .request-row,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .team-list>div,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .news-list button,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .document-list button{
  background:rgba(255,253,249,.72)!important;border-color:rgba(142,114,80,.16)!important;color:#302d28!important;
}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .request-row{border-left-color:#b8874f!important}

/* ---------- WEATHER: dedicated LIGHT Office Gold picture ---------- */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-weather-card,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-weather-hero{
  background:#eee8df!important;border-color:rgba(154,115,70,.36)!important;
  box-shadow:0 12px 30px rgba(73,56,37,.12),inset 0 1px 0 rgba(255,255,255,.72)!important;color:#292722!important;
}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-weather-card::before,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-weather-hero::before{
  background-image:url('/assets/office-gold-light37-weather.webp?v=37')!important;
  background-position:68% 50%!important;background-size:cover!important;filter:saturate(.78) brightness(1.02) contrast(1.03)!important;
}
/* HF24 uses a separate .weather-photo layer and wins over ::before; force the light asset there too. */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-photo,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-photo{
  display:block!important;opacity:1!important;filter:none!important;
  background-image:linear-gradient(90deg,rgba(247,242,234,.80),rgba(247,242,234,.46) 48%,rgba(247,242,234,.10) 78%),url('/assets/office-gold-light37-weather.webp?v=37')!important;
  background-position:68% 50%!important;background-size:cover!important;
}
html.mobile-device[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-photo,
html.mobile-device[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-photo{
  background-image:linear-gradient(90deg,rgba(247,242,234,.82),rgba(247,242,234,.42) 56%,rgba(247,242,234,.10)),url('/assets/office-gold-light37-mobile.webp?v=37')!important;
  background-position:68% 36%!important;
}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-copy>strong,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-copy>h1,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading>strong,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-reading>strong{
  color:#292722!important;text-shadow:0 1px 0 rgba(255,255,255,.62)!important;
}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-copy small,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-copy small,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-reading small,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-weather-hero .owner-weather-reading small{color:#655f57!important;text-shadow:none!important}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .weather-now-label,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .owner-weather-hero .weather-now-label{color:#a27440!important;text-shadow:none!important}
html.mobile-device[data-theme="light"].office-gold-active body.office-gold-active.app-mode .mobile-weather-brand{color:#2d2a25!important;text-shadow:none!important}
html.mobile-device[data-theme="light"].office-gold-active body.office-gold-active.app-mode .mobile-weather-brand .app-logo-mark{color:#b58349!important;filter:none!important}
html.mobile-device[data-theme="light"].office-gold-active body.office-gold-active.app-mode .mobile-weather-brand small{color:#726a60!important}

/* ---------- PROFILE / SETTINGS ---------- */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .profile-device-row,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .profile-avatar-editor,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .appearance-block,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .appearance-control-panel,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .appearance-preview-card,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .appearance-custom-icons{
  background:rgba(255,253,249,.78)!important;border-color:rgba(151,116,74,.20)!important;color:#292722!important;
}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .ghost-button,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .file-picker-button,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .save-modal-button,
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .app-scale-presets button{
  background:linear-gradient(135deg,#f8f2e9,#e9dccb)!important;border-color:rgba(161,120,72,.30)!important;color:#4a3b2c!important;
}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .app-scale-presets button.active{
  background:linear-gradient(135deg,#d8bc96,#c79a63)!important;color:#2c241c!important;border-color:#b48349!important;
}

/* ---------- MOBILE NAV ---------- */
html.mobile-device[data-theme="light"].office-gold-active body.office-gold-active.app-mode .mobile-bottom-nav{
  background:rgba(249,246,240,.97)!important;border-top:1px solid rgba(154,118,75,.20)!important;
  box-shadow:0 -12px 28px rgba(68,51,33,.10),inset 0 1px 0 rgba(255,255,255,.80)!important;
  -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;
}
html.mobile-device[data-theme="light"].office-gold-active body.office-gold-active.app-mode .mobile-bottom-nav button{color:#6f685f!important}
html.mobile-device[data-theme="light"].office-gold-active body.office-gold-active.app-mode .mobile-bottom-nav button.active{
  color:#9e6f37!important;background:linear-gradient(180deg,rgba(211,184,148,.35),rgba(241,233,221,.74))!important;
}

/* ---------- LOGIN LIGHT: same geometry, clean ivory glass ---------- */
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) .background{
  background-image:url('/assets/office-gold-light37-desktop.webp?v=37')!important;background-position:center!important;background-size:cover!important;
  filter:saturate(.83) contrast(1.02) brightness(1.02)!important;
}
html.mobile-device[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) .background{
  background-image:url('/assets/office-gold-light37-mobile.webp?v=37')!important;background-position:center 46%!important;
}
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) .background-overlay{
  background:linear-gradient(180deg,rgba(248,244,237,.08),rgba(238,229,216,.06) 58%,rgba(202,174,139,.06))!important;
}
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginForm{
  background:rgba(248,245,240,.91)!important;border-color:rgba(148,112,69,.31)!important;color:#2c2a26!important;
  box-shadow:0 24px 62px rgba(64,48,31,.16),inset 0 1px 0 rgba(255,255,255,.90)!important;
  -webkit-backdrop-filter:blur(8px)!important;backdrop-filter:blur(8px)!important;
}
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading h2,
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input{color:#2c2a26!important}
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading p,
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginForm .form-row,
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginForm .link-button{color:#6d665e!important}
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginForm .login-heading-accent{color:#a6743a!important}
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{
  background:rgba(255,253,249,.78)!important;border-color:rgba(136,106,72,.28)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.90)!important;
}
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginButton{
  background:linear-gradient(100deg,#b78950 0%,#d8bd99 55%,#b27d43 100%)!important;color:#2e281f!important;
  box-shadow:0 12px 30px rgba(101,72,39,.17),inset 0 1px 0 rgba(255,255,255,.52)!important;
}

/* Make Appearance Studio live previews reflect Light when selected. */
.appearance-studio[data-preview-theme="gradient-office-gold"][data-preview-mode="light"] .appearance-live-preview::before{
  background-image:var(--ap-preview-bg-light,url('/assets/office-gold-light37-desktop.webp?v=37'))!important;
  filter:brightness(1) saturate(.82)!important;
}

/* Dark Office Gold intentionally has no unqualified overrides here. */
/* ===== END HF37 GRADIENT GLASS CLEAN LIGHT ===== */


/* ========================================================================== */
/* HF38 · OFFICE GOLD LIGHT — LIVE CONTROLS + THEME SWITCH REPAIR             */
/* Scope: Gradient Glass / Office Gold LIGHT only. Dark theme is untouched.    */
/* ========================================================================== */

/* 1) Theme switch: override the older premium-lock rules with equal-or-higher
      specificity. The mobile toolbar used pointer-events:none, so both display
      and pointer handling must be restored. */
html body.visual-preset-gradient-office-gold #themeToggle,
html body.visual-preset-gradient-office-gold #appThemeToggle{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}
html body.visual-preset-gradient-office-gold #themeToggle{display:flex!important}
html body:not(.app-mode)[data-visual-preset="gradient-office-gold"] #themeToggle{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
html:not(.mobile-device) body.visual-preset-gradient-office-gold.app-mode #appThemeToggle{display:grid!important}

@media(max-width:760px){
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .mobile-weather-toolbar,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .mobile-weather-toolbar{
    pointer-events:auto!important;
    justify-content:space-between!important;
  }
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .dashboard-weather-card .mobile-weather-theme-toggle,
  html.mobile-device.office-gold-active body.office-gold-active.app-mode .owner-weather-hero .mobile-weather-theme-toggle{
    display:flex!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
    flex:0 0 auto!important;
    margin-left:auto!important;
    position:relative!important;
    z-index:12!important;
  }
}

/* 2) Background brightness and blur use the editor variables directly.
      Previous HF37 narrowed brightness to a tiny range, making the slider look dead. */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode::before{
  filter:brightness(var(--appearance-bg-brightness)) saturate(.86) contrast(1.03) blur(var(--appearance-bg-blur))!important;
  transform:scale(1.08)!important;
}

/* 3) Live glass density. In Light mode the previous hard-coded .92/.96 alpha
      overrode --appearance-glass-alpha. All primary surfaces now follow it. */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode :is(
  .app-header,
  .role-dashboard .panel-card,
  .role-dashboard .content-panel,
  .role-dashboard .stat-card,
  .subpage .panel-card,
  .subpage .content-panel,
  .settings-panel,
  .settings-tabs,
  .requests-toolbar,
  .announcement-view-tabs,
  .appearance-studio,
  .appearance-block,
  .appearance-control-panel,
  .appearance-preview-card,
  .appearance-custom-icons,
  .profile-device-row,
  .profile-avatar-editor
){
  background:rgb(249 246 240 / var(--appearance-glass-alpha))!important;
  border-color:rgb(166 126 79 / calc(.10 + var(--appearance-gold-alpha) * .68))!important;
  border-radius:var(--appearance-card-radius)!important;
  box-shadow:
    0 14px 34px rgba(70,54,37,.10),
    inset 0 1px 0 rgba(255,255,255,.76),
    0 0 34px rgb(205 154 92 / calc(var(--appearance-glow-alpha) * .72))!important;
}

/* Child dashboard tiles also follow glass density, but remain slightly clearer
   than the outer panel so text stays readable at low density values. */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode :is(
  .quick-grid button,
  .request-stats-inline .stat-card,
  .work-grid article,
  .news-list button,
  .document-list button,
  .poll-card,
  .profile-summary-card,
  .profile-setting-card,
  .settings-card,
  .info-card
){
  background:rgb(255 253 249 / max(.34,var(--appearance-glass-alpha)))!important;
  border-color:rgb(166 126 79 / calc(.08 + var(--appearance-gold-soft) * .72))!important;
  border-radius:var(--appearance-card-radius)!important;
  box-shadow:0 8px 22px rgba(72,55,37,.08),0 0 24px rgb(205 154 92 / calc(var(--appearance-glow-alpha) * .48))!important;
}

/* 4) The left desktop rail participates in the same controls. */
@media(min-width:761px){
  html[data-theme="light"].office-gold-active body.office-gold-active.app-mode .desktop-sidebar{
    background:linear-gradient(
      180deg,
      rgb(249 246 240 / calc(var(--appearance-glass-alpha) * .96)),
      rgb(235 226 214 / calc(var(--appearance-glass-alpha) * .90))
    )!important;
    border-color:rgb(166 126 79 / calc(.10 + var(--appearance-gold-alpha) * .68))!important;
    border-radius:max(24px,calc(var(--appearance-card-radius) * 1.55))!important;
    box-shadow:0 18px 42px rgba(62,48,32,.10),0 0 30px rgb(205 154 92 / calc(var(--appearance-glow-alpha) * .60))!important;
  }
}

/* 5) Weather keeps its dedicated image, but its glass frame follows the editor. */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode :is(.dashboard-weather-card,.owner-weather-hero){
  background:rgb(244 238 229 / max(.28,var(--appearance-glass-alpha)))!important;
  border-color:rgb(166 126 79 / calc(.12 + var(--appearance-gold-alpha) * .72))!important;
  border-radius:var(--appearance-card-radius)!important;
  box-shadow:0 12px 30px rgba(73,56,37,.10),0 0 30px rgb(205 154 92 / calc(var(--appearance-glow-alpha) * .54))!important;
}

/* 6) Gold intensity now has obvious live targets. */
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode :is(
  .eyebrow,
  .section-heading .eyebrow,
  .appearance-control-title strong,
  .appearance-block-title strong,
  .weather-now-label
){
  color:rgb(154 104 48 / calc(.48 + var(--appearance-gold-alpha)))!important;
}
html[data-theme="light"].office-gold-active body.office-gold-active.app-mode input[type="range"]{
  accent-color:rgb(190 132 65 / calc(.48 + var(--appearance-gold-alpha)))!important;
}

/* 7) Appearance Studio previews must show the same variables as the real page. */
.appearance-studio[data-preview-theme="gradient-office-gold"][data-preview-mode="light"] .appearance-live-preview::before{
  filter:brightness(var(--appearance-bg-brightness)) saturate(.86) contrast(1.03) blur(var(--appearance-bg-blur))!important;
}
.appearance-studio[data-preview-theme="gradient-office-gold"][data-preview-mode="light"] :is(.ap-login-card,.ap-side,.ap-side-full,.ap-top,.ap-cards i,.ap-wide){
  background:rgb(249 246 240 / var(--appearance-glass-alpha))!important;
  border-color:rgb(166 126 79 / calc(.10 + var(--appearance-gold-alpha) * .68))!important;
  box-shadow:0 0 24px rgb(205 154 92 / calc(var(--appearance-glow-alpha) * .70))!important;
  color:#292722!important;
}
.appearance-studio[data-preview-theme="gradient-office-gold"][data-preview-mode="light"] .appearance-live-preview{
  border-radius:var(--appearance-card-radius)!important;
}

/* 8) Keep the mobile bottom bar coherent with glass density and glow. */
html.mobile-device[data-theme="light"].office-gold-active body.office-gold-active.app-mode .mobile-bottom-nav{
  background:rgb(249 246 240 / max(.72,var(--appearance-glass-alpha)))!important;
  border-top-color:rgb(166 126 79 / calc(.08 + var(--appearance-gold-alpha) * .48))!important;
  box-shadow:0 -10px 30px rgba(68,51,33,.08),0 0 24px rgb(205 154 92 / calc(var(--appearance-glow-alpha) * .32))!important;
}

/* Dark Office Gold deliberately receives no HF38 appearance overrides. */
/* ===== END HF38 ===== */

/* ========================================================================== */
/* HF39 · OFFICE GOLD LOGIN POLISH                                             */
/* Scope: login screen only. App dashboard, Dark Office Gold app UI, Classic, */
/* weather, chat and appearance controls are intentionally untouched.          */
/* ========================================================================== */

/* LIGHT LOGIN — make the credentials card genuinely glassy instead of opaque. */
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginForm{
  background:linear-gradient(145deg,rgba(250,247,242,.70),rgba(238,229,217,.60))!important;
  border-color:rgba(151,113,68,.34)!important;
  box-shadow:0 22px 54px rgba(62,47,30,.14),inset 0 1px 0 rgba(255,255,255,.70)!important;
  -webkit-backdrop-filter:blur(4px) saturate(1.04)!important;
  backdrop-filter:blur(4px) saturate(1.04)!important;
}
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{
  background:linear-gradient(135deg,rgba(255,253,249,.46),rgba(246,239,230,.38))!important;
  border-color:rgba(128,98,66,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.56)!important;
  -webkit-backdrop-filter:blur(2px)!important;
  backdrop-filter:blur(2px)!important;
}
html[data-theme="light"] body.visual-preset-gradient-office-gold.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap:focus-within{
  background:linear-gradient(135deg,rgba(255,253,249,.57),rgba(246,239,230,.48))!important;
  border-color:rgba(178,129,71,.58)!important;
}

/* ANDROID / MOBILE DARK LOGIN — remove the full-width blue header strip.
   The Office Gold photo must continue behind the theme switch, exactly as in
   Light mode. Keep only a compact floating switch in the safe area. */
@media(max-width:760px){
  html.mobile-device[data-theme="dark"].office-gold-active.login-active,
  html.mobile-device.office-gold-active.login-active[data-theme="dark"]{
    background-color:#05070a!important;
    background-image:var(--office-gold-runtime-login-image,var(--branding-login-office-gold-image,url('/assets/office-gold-mobile.webp?v=appearance-unified23'))) !important;
    background-position:var(--branding-login-office-gold-mobile-x,50%) var(--branding-login-office-gold-mobile-y,50%)!important;
    background-size:var(--branding-login-office-gold-mobile-size,cover)!important;
    background-repeat:no-repeat!important;
  }

  html.mobile-device[data-theme="dark"].office-gold-active.login-active body.visual-preset-gradient-office-gold:not(.app-mode),
  html.mobile-device[data-theme="dark"].office-gold-active.login-active body.visual-preset-gradient-office-gold:not(.app-mode) .page-shell{
    background:transparent!important;
    background-color:transparent!important;
  }

  html.mobile-device[data-theme="dark"].office-gold-active.login-active body.visual-preset-gradient-office-gold:not(.app-mode) .topbar{
    display:flex!important;
    position:fixed!important;
    top:max(8px,env(safe-area-inset-top))!important;
    right:max(10px,env(safe-area-inset-right))!important;
    left:auto!important;
    width:auto!important;
    min-width:0!important;
    max-width:calc(100vw - 20px)!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    outline:0!important;
    background:transparent!important;
    background-color:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    z-index:120!important;
    justify-content:flex-end!important;
  }
  html.mobile-device[data-theme="dark"].office-gold-active.login-active body.visual-preset-gradient-office-gold:not(.app-mode) .topbar>*:not(#themeToggle){
    display:none!important;
  }
  html.mobile-device[data-theme="dark"].office-gold-active.login-active body.visual-preset-gradient-office-gold:not(.app-mode) #themeToggle{
    display:flex!important;
    width:auto!important;
    min-width:0!important;
    margin:0!important;
    padding:7px 9px!important;
    border:1px solid rgba(224,177,118,.22)!important;
    border-radius:999px!important;
    background:rgba(8,9,12,.26)!important;
    color:#fff!important;
    box-shadow:0 6px 18px rgba(0,0,0,.18)!important;
    -webkit-backdrop-filter:blur(7px)!important;
    backdrop-filter:blur(7px)!important;
  }
}

/* ===== END HF39 ===== */

/* ===== HOTFIX 40 · dark mobile login background truly fills the full screen =====
   Android standalone/PWA can expose the body canvas above and below the fixed
   login background. Paint the dark Office Gold login scene on body pseudo
   layers that intentionally overscan beyond the viewport, then hide the old
   fixed layers only for this exact state. */
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode){
  background:transparent!important;
}
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode)::before,
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode)::after{
  content:""!important;
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:-12svh!important;
  bottom:-12svh!important;
  pointer-events:none!important;
}
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode)::before{
  z-index:0!important;
  background-image:var(--office-gold-runtime-login-image,var(--branding-login-office-gold-image,url('/assets/office-gold-mobile.webp?v=hf40fill')))!important;
  background-position:var(--branding-login-office-gold-mobile-x,50%) var(--branding-login-office-gold-mobile-y,50%)!important;
  background-size:var(--branding-login-office-gold-mobile-size,cover)!important;
  background-repeat:no-repeat!important;
  filter:saturate(.94) contrast(1.05) brightness(.91)!important;
}
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode)::after{
  z-index:1!important;
  background:linear-gradient(180deg, rgba(4,8,26,.18), rgba(3,7,20,.22))!important;
}
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode) .background,
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode) .background-overlay{
  display:none!important;
}
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode) .page-shell{
  position:relative!important;
  z-index:2!important;
  min-height:100svh!important;
  padding-top:max(12px, env(safe-area-inset-top))!important;
  padding-bottom:max(12px, env(safe-area-inset-bottom))!important;
}

/* ===== HOTFIX 41 · Office Gold dark mobile login: real viewport cover =====
   Root cause fixed: the saved mobile zoom (e.g. 118%) was being used directly
   as CSS background-size. On a portrait 900x1600 image, 118% means "118% of
   viewport width", not "cover + 18%", so the rendered image was shorter than
   the tall phone viewport and exposed dark bands above/below.
   For the login background we must always cover the viewport. Position remains
   configurable; zoom no longer shrinks the canvas below cover. */
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode){
  background:#05070a!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  overflow-x:hidden!important;
}
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode)::before,
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode)::after{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  transform:none!important;
}
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode)::before{
  background-color:#05070a!important;
  background-image:var(--office-gold-runtime-login-image,var(--branding-login-office-gold-image,url('/assets/office-gold-mobile.webp?v=hf41cover')))!important;
  background-position:var(--branding-login-office-gold-mobile-x,50%) var(--branding-login-office-gold-mobile-y,50%)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
}
html.mobile-device[data-theme="dark"].office-gold-active.login-active body:not(.app-mode) .page-shell{
  min-height:100vh!important;
  min-height:100dvh!important;
}
/* ===== END HF41 ===== */


/* ==========================================================================
   HF42 · OFFICE GOLD DARK MOBILE LOGIN — ONE FULL-VIEWPORT CANVAS
   Exact runtime fix based on the post-HF41 installation.

   Root cause:
   older login rules size html/body/page-shell/background from
   --auth-visual-height. app.js writes that variable from visualViewport.height.
   On Android/PWA this can be smaller than the layout viewport, so the root
   canvas becomes shorter and the dark body/root color shows as bands above
   and below the Office Gold image.

   HF42 neutralizes that mobile-login-only variable and uses one fixed
   100dvh background layer. No app/dashboard styles are changed.
   ========================================================================== */
@media (max-width:760px) {
  html.mobile-device[data-theme="dark"].office-gold-active.login-active {
    --auth-visual-height: 100dvh !important;
    width:100% !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    max-height:none !important;
    overflow:hidden !important;
    background-color:#05070a !important;
    background-image:var(
      --office-gold-runtime-login-image,
      var(--branding-login-office-gold-image,url('/assets/office-gold-mobile.webp?v=hf42canvas'))
    ) !important;
    background-position:
      var(--branding-login-office-gold-mobile-x,50%)
      var(--branding-login-office-gold-mobile-y,50%) !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
  }

  html.mobile-device[data-theme="dark"].office-gold-active.login-active
  body.visual-preset-gradient-office-gold:not(.app-mode) {
    width:100% !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    max-height:none !important;
    margin:0 !important;
    overflow:hidden !important;
    background:transparent !important;
  }

  /* Retire the HF40/HF41 body pseudo background layers. */
  html.mobile-device[data-theme="dark"].office-gold-active.login-active
  body.visual-preset-gradient-office-gold:not(.app-mode)::before,
  html.mobile-device[data-theme="dark"].office-gold-active.login-active
  body.visual-preset-gradient-office-gold:not(.app-mode)::after {
    content:none !important;
    display:none !important;
  }

  /* One real fixed image layer fills the Android/PWA content viewport. */
  html.mobile-device[data-theme="dark"].office-gold-active.login-active
  body.visual-preset-gradient-office-gold:not(.app-mode) > .background {
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    top:0 !important;
    right:0 !important;
    bottom:0 !important;
    left:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    max-height:none !important;
    z-index:0 !important;
    background-color:#05070a !important;
    background-image:var(
      --office-gold-runtime-login-image,
      var(--branding-login-office-gold-image,url('/assets/office-gold-mobile.webp?v=hf42canvas'))
    ) !important;
    background-position:
      var(--branding-login-office-gold-mobile-x,50%)
      var(--branding-login-office-gold-mobile-y,50%) !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
    transform:none !important;
    filter:saturate(.94) contrast(1.05) brightness(.91) !important;
  }

  html.mobile-device[data-theme="dark"].office-gold-active.login-active
  body.visual-preset-gradient-office-gold:not(.app-mode) > .background-overlay {
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    z-index:1 !important;
    background:linear-gradient(180deg,rgba(4,8,26,.12),rgba(3,7,20,.18)) !important;
  }

  html.mobile-device[data-theme="dark"].office-gold-active.login-active
  body.visual-preset-gradient-office-gold:not(.app-mode) > .page-shell {
    position:relative !important;
    z-index:2 !important;
    width:100% !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    overflow:hidden !important;
  }
}
/* ===== END HF42 ===== */

/* ===== HOTFIX 43A · Office Gold dark mobile app: real viewport cover =====
   Applies AFTER HF42 without replacing the HF42 login changes.
   Scope: mobile + dark + Office Gold + authenticated app only. */
html.mobile-device[data-theme="dark"].office-gold-active body.office-gold-active.app-mode{
  background:#05070a!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  overflow-x:hidden!important;
}
html.mobile-device[data-theme="dark"].office-gold-active body.office-gold-active.app-mode::before,
html.mobile-device[data-theme="dark"].office-gold-active body.office-gold-active.app-mode::after{
  position:fixed!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;
  pointer-events:none!important;
}
html.mobile-device[data-theme="dark"].office-gold-active body.office-gold-active.app-mode::before{
  z-index:0!important;
  background-color:#05070a!important;
  background-image:var(--office-gold-runtime-main-image,var(--branding-home-office-gold-image,url('/assets/office-gold-mobile.webp?v=hf43a-app-cover')))!important;
  background-position:var(--branding-home-office-gold-mobile-x,50%) var(--branding-home-office-gold-mobile-y,50%)!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  filter:brightness(var(--appearance-bg-brightness,.86)) saturate(1.08)!important;
  transform:scale(1.025)!important;
  transform-origin:center center!important;
  opacity:1!important;
}
html.mobile-device[data-theme="dark"].office-gold-active body.office-gold-active.app-mode::after{
  z-index:0!important;
  background:linear-gradient(180deg,rgba(4,5,6,.14),rgba(8,7,7,.11) 55%,rgba(18,12,9,.14))!important;
  transform:none!important;
}
html.mobile-device[data-theme="dark"].office-gold-active body.office-gold-active.app-mode .page-shell,
html.mobile-device[data-theme="dark"].office-gold-active body.office-gold-active.app-mode .app-view{
  min-height:100vh!important;
  min-height:100dvh!important;
}
/* ===== END HF43A ===== */


/* ==========================================================
   HOTFIX 44 · Office Gold LIGHT render
   - light Office Gold follows the approved bright render
   - dark Office Gold is untouched
   - tuned first for mobile / customer demo, but safe for the whole app
   ========================================================== */

html[data-theme="light"] body.office-gold-active.app-mode,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold{
  --app-bg:#efe5d9!important;
  --app-surface:rgba(255,248,241,.76)!important;
  --app-surface-strong:rgba(255,251,246,.88)!important;
  --app-border:rgba(195,165,118,.34)!important;
  --app-text:#231811!important;
  --app-muted:#786958!important;
  --app-blue:#b58a4e!important;
  --app-blue-soft:rgba(181,138,78,.12)!important;
  --app-green:#99804f!important;
  --app-green-soft:rgba(182,161,106,.16)!important;
  --app-orange:#b68a4a!important;
  --app-orange-soft:rgba(230,203,157,.22)!important;
  --app-red:#a55c54!important;
  --app-red-soft:rgba(222,179,174,.20)!important;
  color:#231811!important;
  background:#efe5d9!important;
  color-scheme:light!important;
}

html[data-theme="light"] body.office-gold-active.app-mode::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold::before{
  background:
    linear-gradient(180deg,rgba(255,250,244,.18),rgba(255,247,239,.30) 38%,rgba(241,229,214,.46) 100%),
    url('/assets/office-gold-light37-mobile.webp?v=hf44') center center/cover no-repeat!important;
  filter:saturate(1.03) brightness(1.03) contrast(.98)!important;
}

html[data-theme="light"].mobile-device body.office-gold-active.app-mode::before,
html[data-theme="light"].mobile-device body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold::before{
  background:
    linear-gradient(180deg,rgba(255,250,244,.12),rgba(255,246,238,.28) 34%,rgba(239,227,210,.50) 100%),
    url('/assets/office-gold-light37-mobile.webp?v=hf44') center center/cover no-repeat!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .page-shell,
html[data-theme="light"] body.office-gold-active.app-mode .app-view,
html[data-theme="light"] body.office-gold-active.app-mode .role-dashboard,
html[data-theme="light"] body.office-gold-active.app-mode .settings-page,
html[data-theme="light"] body.office-gold-active.app-mode .settings-pane,
html[data-theme="light"] body.office-gold-active.app-mode .subpage,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .page-shell,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .app-view,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .role-dashboard,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-page,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-pane,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .subpage{
  background:transparent!important;
  color:var(--app-text)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .app-header,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .app-header{
  background:linear-gradient(90deg,rgba(255,250,245,.92),rgba(247,238,227,.82))!important;
  border-color:rgba(198,166,121,.26)!important;
  box-shadow:0 12px 28px rgba(108,81,52,.10)!important;
  backdrop-filter:blur(20px) saturate(1.04)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .panel-card,
html[data-theme="light"] body.office-gold-active.app-mode .content-panel,
html[data-theme="light"] body.office-gold-active.app-mode .settings-panel,
html[data-theme="light"] body.office-gold-active.app-mode .settings-tabs,
html[data-theme="light"] body.office-gold-active.app-mode .branding-asset-card,
html[data-theme="light"] body.office-gold-active.app-mode .branding-login-ui-settings,
html[data-theme="light"] body.office-gold-active.app-mode .branding-login-style-option,
html[data-theme="light"] body.office-gold-active.app-mode .branding-campaign-asset,
html[data-theme="light"] body.office-gold-active.app-mode .ui-design-settings,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .panel-card,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .content-panel,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-panel,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-tabs,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-asset-card,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-login-ui-settings,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-login-style-option,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .branding-campaign-asset,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .ui-design-settings{
  background:linear-gradient(145deg,rgba(255,250,245,.76),rgba(248,239,229,.68))!important;
  border-color:rgba(195,165,118,.30)!important;
  color:var(--app-text)!important;
  box-shadow:0 16px 38px rgba(120,90,58,.10),inset 0 1px 0 rgba(255,255,255,.68)!important;
  backdrop-filter:blur(24px) saturate(1.05)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.05)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card,
html[data-theme="light"] body.office-gold-active.app-mode .owner-weather-hero,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero{
  background:rgba(255,249,243,.72)!important;
  border-color:rgba(196,166,121,.32)!important;
  box-shadow:0 18px 42px rgba(116,86,53,.12),inset 0 1px 0 rgba(255,255,255,.78)!important;
  overflow:hidden!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card::before,
html[data-theme="light"] body.office-gold-active.app-mode .owner-weather-hero::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero::before{
  background:url('/assets/office-gold-light37-weather.webp?v=hf44') center 48%/cover no-repeat!important;
  filter:saturate(1.04) brightness(1.04) contrast(.98)!important;
}

html[data-theme="light"].mobile-device body.office-gold-active.app-mode .dashboard-weather-card::before,
html[data-theme="light"].mobile-device body.office-gold-active.app-mode .owner-weather-hero::before,
html[data-theme="light"].mobile-device body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card::before,
html[data-theme="light"].mobile-device body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero::before{
  background-position:center 46%!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card::after,
html[data-theme="light"] body.office-gold-active.app-mode .owner-weather-hero::after,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card::after,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero::after{
  background:linear-gradient(90deg,rgba(255,249,243,.80) 0%,rgba(255,249,243,.58) 40%,rgba(255,249,243,.12) 100%)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card,
html[data-theme="light"] body.office-gold-active.app-mode .owner-weather-hero,
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card h1,
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card h2,
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card h3,
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card strong,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card h1,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card h2,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card h3,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card strong{
  color:#241912!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card .weather-reading>strong,
html[data-theme="light"] body.office-gold-active.app-mode .owner-weather-hero .weather-reading>strong,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card .weather-reading>strong,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero .weather-reading>strong{
  color:#1d1612!important;
  text-shadow:0 1px 0 rgba(255,255,255,.30)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card .weather-now-label,
html[data-theme="light"] body.office-gold-active.app-mode .eyebrow,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card .weather-now-label,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .eyebrow{
  color:#b58a4e!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions{
  background:linear-gradient(145deg,rgba(255,250,245,.78),rgba(247,238,228,.70))!important;
  border-color:rgba(194,165,118,.30)!important;
  overflow:hidden!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions::before{
  background:
    linear-gradient(90deg,rgba(255,249,243,.86),rgba(255,247,239,.58),rgba(255,247,239,.18)),
    url('/assets/office-gold-light37-weather.webp?v=hf44') 70% 50%/cover no-repeat!important;
  opacity:1!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .quick-grid button,
html[data-theme="light"] body.office-gold-active.app-mode .owner-action,
html[data-theme="light"] body.office-gold-active.app-mode .stat-card,
html[data-theme="light"] body.office-gold-active.app-mode .work-grid article,
html[data-theme="light"] body.office-gold-active.app-mode .announcement-grid button,
html[data-theme="light"] body.office-gold-active.app-mode .request-list>* ,
html[data-theme="light"] body.office-gold-active.app-mode .team-list>* ,
html[data-theme="light"] body.office-gold-active.app-mode .news-list>* ,
html[data-theme="light"] body.office-gold-active.app-mode .document-list>* ,
html[data-theme="light"] body.office-gold-active.app-mode .registry-row,
html[data-theme="light"] body.office-gold-active.app-mode .object-summary-grid article,
html[data-theme="light"] body.office-gold-active.app-mode .request-detail-grid>div,
html[data-theme="light"] body.office-gold-active.app-mode .request-detail-description,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .quick-grid button,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-action,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .stat-card,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .work-grid article,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .announcement-grid button,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-list>* ,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-list>* ,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .news-list>* ,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .document-list>* ,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .registry-row,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .object-summary-grid article,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-detail-grid>div,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-detail-description{
  background:linear-gradient(145deg,rgba(255,252,247,.88),rgba(248,241,232,.72))!important;
  border-color:rgba(197,166,120,.28)!important;
  color:var(--app-text)!important;
  box-shadow:0 10px 24px rgba(121,92,58,.08),inset 0 1px 0 rgba(255,255,255,.76)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .quick-grid button:hover,
html[data-theme="light"] body.office-gold-active.app-mode .owner-action:hover,
html[data-theme="light"] body.office-gold-active.app-mode .stat-card:hover,
html[data-theme="light"] body.office-gold-active.app-mode .work-grid article:hover,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .quick-grid button:hover,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-action:hover,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .stat-card:hover,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .work-grid article:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(121,92,58,.10),inset 0 1px 0 rgba(255,255,255,.82)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .nav-link.active,
html[data-theme="light"] body.office-gold-active.app-mode .nav-link:hover,
html[data-theme="light"] body.office-gold-active.app-mode .settings-tab.active,
html[data-theme="light"] body.office-gold-active.app-mode .settings-tab-button.active,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .nav-link.active,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .nav-link:hover,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-tab.active,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-tab-button.active{
  background:linear-gradient(90deg,rgba(193,160,113,.22),rgba(233,212,180,.52))!important;
  color:#5f431f!important;
  border-color:rgba(191,158,111,.34)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode h1,
html[data-theme="light"] body.office-gold-active.app-mode h2,
html[data-theme="light"] body.office-gold-active.app-mode h3,
html[data-theme="light"] body.office-gold-active.app-mode strong,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold h1,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold h2,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold h3,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold strong{
  color:#241912!important;
}

html[data-theme="light"] body.office-gold-active.app-mode p,
html[data-theme="light"] body.office-gold-active.app-mode small,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold p,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold small{
  color:var(--app-muted)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode input,
html[data-theme="light"] body.office-gold-active.app-mode textarea,
html[data-theme="light"] body.office-gold-active.app-mode select,
html[data-theme="light"] body.office-gold-active.app-mode .admin-search,
html[data-theme="light"] body.office-gold-active.app-mode .chat-compose-row>input,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold input,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold textarea,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold select,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .admin-search,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .chat-compose-row>input{
  background:rgba(255,253,250,.82)!important;
  border-color:rgba(196,166,121,.30)!important;
  color:#241912!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode input::placeholder,
html[data-theme="light"] body.office-gold-active.app-mode textarea::placeholder,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold input::placeholder,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold textarea::placeholder{color:#8f7b66!important}

html[data-theme="light"] body.office-gold-active.app-mode .primary-button,
html[data-theme="light"] body.office-gold-active.app-mode .save-modal-button,
html[data-theme="light"] body.office-gold-active.app-mode .role-button.active,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .primary-button,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .save-modal-button,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .role-button.active{
  background:linear-gradient(90deg,#d8ba8f 0%,#c89d63 100%)!important;
  color:#332113!important;
  border-color:rgba(168,130,78,.34)!important;
  box-shadow:0 12px 24px rgba(130,96,55,.18)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .mobile-bottom-nav,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-bottom-nav{
  background:linear-gradient(90deg,rgba(255,250,246,.96),rgba(247,238,228,.94))!important;
  border-color:rgba(197,166,122,.24)!important;
  box-shadow:0 -12px 28px rgba(116,86,53,.08)!important;
  backdrop-filter:blur(18px) saturate(1.05)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.05)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .mobile-bottom-nav button,
html[data-theme="light"] body.office-gold-active.app-mode .mobile-bottom-link,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-bottom-nav button,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-bottom-link{
  color:#7f6d5b!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .mobile-bottom-nav button.active,
html[data-theme="light"] body.office-gold-active.app-mode .mobile-bottom-link.active,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-bottom-nav button.active,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-bottom-link.active{
  color:#b58a4e!important;
  background:rgba(224,205,176,.30)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .icon-action,
html[data-theme="light"] body.office-gold-active.app-mode .profile-chip,
html[data-theme="light"] body.office-gold-active.app-mode .logout-action,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .icon-action,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .profile-chip,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .logout-action{
  background:rgba(255,250,245,.78)!important;
  border-color:rgba(195,165,118,.28)!important;
  color:#6f5533!important;
  box-shadow:0 8px 18px rgba(116,86,53,.08)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .document-delete-button,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .document-delete-button{
  background:rgba(186,54,54,.08)!important;
  color:#b53939!important;
  border-color:rgba(186,54,54,.24)!important;
}

@media(max-width:760px){
  html[data-theme="light"] body.office-gold-active.app-mode .role-dashboard,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .role-dashboard{
    width:calc(100% - 22px)!important;
    margin:10px 11px 0!important;
    gap:12px!important;
  }
  html[data-theme="light"] body.office-gold-active.app-mode .panel-card,
  html[data-theme="light"] body.office-gold-active.app-mode .content-panel,
  html[data-theme="light"] body.office-gold-active.app-mode .settings-panel,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .panel-card,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .content-panel,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .settings-panel{
    border-radius:22px!important;
  }
  html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card,
  html[data-theme="light"] body.office-gold-active.app-mode .owner-weather-hero,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-weather-hero{
    min-height:204px!important;
  }
  html[data-theme="light"] body.office-gold-active.app-mode .quick-grid button,
  html[data-theme="light"] body.office-gold-active.app-mode .owner-action,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .quick-grid button,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-action{
    min-height:162px!important;
  }
}


/* ==========================================================
   HOTFIX 45 · Office Gold LIGHT polish
   - presentation-grade mobile refinement for customer demo
   - only Office Gold light theme is affected
   - dark theme is untouched
   ========================================================== */

html[data-theme="light"] body.office-gold-active.app-mode,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold{
  --og-text:#251911!important;
  --og-muted:#7b6a58!important;
  --og-gold:#b58a4e!important;
  --og-gold-soft:#ead9bf!important;
  --og-surface:rgba(255,250,245,.80)!important;
  --og-surface-strong:rgba(255,252,248,.92)!important;
  --og-border:rgba(195,165,118,.28)!important;
}

/* Keep the canvas warm and clean. */
html[data-theme="light"] body.office-gold-active.app-mode::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold::before{
  filter:saturate(1.03) brightness(1.04) contrast(.98)!important;
}

/* Weather hero — closer to the render. */
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card{
  min-height:216px!important;
  padding:18px 18px 16px!important;
  border-radius:26px!important;
  background:linear-gradient(145deg,rgba(255,250,245,.72),rgba(250,241,232,.58))!important;
  border:1px solid rgba(199,169,121,.30)!important;
  box-shadow:0 18px 44px rgba(121,92,58,.12),inset 0 1px 0 rgba(255,255,255,.78)!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card::before{
  background:url('/assets/office-gold-light37-weather.webp?v=hf45') center 52%/cover no-repeat!important;
  filter:saturate(1.02) brightness(1.06) contrast(.98)!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card::after,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card::after{
  background:
    linear-gradient(90deg,rgba(255,249,243,.82) 0%,rgba(255,249,243,.52) 38%,rgba(255,249,243,.12) 100%)!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .mobile-weather-toolbar,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-weather-toolbar{
  align-self:start!important;
  margin-bottom:20px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .mobile-weather-brand,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-weather-brand{
  gap:11px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .mobile-weather-brand strong,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-weather-brand strong{
  font-size:17px!important;
  letter-spacing:.06em!important;
  color:var(--og-text)!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .mobile-weather-brand small,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-weather-brand small{
  color:#877664!important;
  font-size:11px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .mobile-weather-theme-toggle,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-weather-theme-toggle{
  background:rgba(116,139,161,.84)!important;
  border:1px solid rgba(255,255,255,.42)!important;
  box-shadow:0 10px 24px rgba(60,74,88,.18)!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .weather-copy,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .weather-copy{
  gap:4px!important;
  align-self:end!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .weather-now-label,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .weather-now-label{
  display:none!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #weatherCity,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #weatherCity{
  font-size:31px!important;
  font-weight:800!important;
  line-height:1!important;
  color:var(--og-text)!important;
  letter-spacing:-.03em!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #mobileDashboardDate,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #mobileDashboardDate,
html[data-theme="light"] body.office-gold-active.app-mode #mobileDashboardLogin,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #mobileDashboardLogin,
html[data-theme="light"] body.office-gold-active.app-mode #weatherUpdated,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #weatherUpdated{
  font-size:10px!important;
  color:#6c5f51!important;
  font-weight:650!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .weather-reading,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .weather-reading{
  gap:3px!important;
  align-self:end!important;
  transform:translateY(2px)!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #weatherIcon,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #weatherIcon{
  font-size:54px!important;
  line-height:1!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #weatherTemp,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #weatherTemp{
  font-size:50px!important;
  line-height:.95!important;
  font-weight:800!important;
  letter-spacing:-.05em!important;
  color:#18110d!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #weatherText,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #weatherText{
  font-size:14px!important;
  color:#706354!important;
  font-weight:700!important;
}

/* Main quick actions panel. */
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions{
  background:linear-gradient(145deg,rgba(255,250,245,.80),rgba(248,239,229,.72))!important;
  border:1px solid rgba(195,165,118,.30)!important;
  border-radius:26px!important;
  box-shadow:0 18px 42px rgba(121,92,58,.10),inset 0 1px 0 rgba(255,255,255,.78)!important;
  padding:18px 16px 18px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions::before{
  background:linear-gradient(90deg,rgba(255,249,243,.90),rgba(255,247,239,.70),rgba(255,247,239,.28))!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .section-heading,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .section-heading{
  margin-bottom:12px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .section-heading .eyebrow,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .section-heading .eyebrow{
  color:var(--og-gold)!important;
  letter-spacing:.12em!important;
  font-size:12px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .section-heading h2,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .section-heading h2{
  color:var(--og-text)!important;
  font-size:28px!important;
  line-height:1.04!important;
  letter-spacing:-.03em!important;
  margin-top:6px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .quick-slogan,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .quick-slogan{
  display:none!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:14px!important;
}

/* Cards in quick actions. */
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button{
  position:relative!important;
  min-height:166px!important;
  padding:18px 16px 16px!important;
  border-radius:22px!important;
  border:1px solid rgba(201,172,129,.22)!important;
  background:linear-gradient(145deg,rgba(255,252,248,.92),rgba(247,239,230,.84))!important;
  box-shadow:0 10px 26px rgba(121,92,58,.08),inset 0 1px 0 rgba(255,255,255,.88)!important;
  grid-template-columns:1fr auto!important;
  grid-template-areas:"icon arrow" "title title" "small small"!important;
  align-content:start!important;
  gap:10px 8px!important;
  text-align:left!important;
  overflow:hidden!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button::after,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button::after{
  content:"›";
  grid-area:arrow;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(241,232,220,.78);
  color:#8e7857;
  font-size:24px;
  line-height:1;
  align-self:start;
  justify-self:end;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button>span,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button>span{
  grid-area:icon!important;
  width:46px!important;
  height:46px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(145deg,rgba(238,222,195,.72),rgba(250,241,231,.98))!important;
  box-shadow:0 6px 16px rgba(159,126,82,.14),inset 0 1px 0 rgba(255,255,255,.95)!important;
  color:var(--og-gold)!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button .quick-vector-icon,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button .quick-vector-icon{
  width:22px!important;
  height:22px!important;
  filter:none!important;
  opacity:.92!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button strong,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button strong{
  grid-area:title!important;
  font-size:15px!important;
  line-height:1.18!important;
  letter-spacing:-.02em!important;
  color:var(--og-text)!important;
  margin-top:2px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button small,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button small{
  grid-area:small!important;
  font-size:11px!important;
  line-height:1.35!important;
  color:var(--og-muted)!important;
  margin-top:2px!important;
}

/* Stat cards with icons and calmer hierarchy. */
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline{
  gap:14px!important;
  grid-template-columns:1fr 1fr!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card{
  position:relative!important;
  min-height:116px!important;
  padding:18px 16px 16px!important;
  border-radius:22px!important;
  border:1px solid rgba(201,172,129,.22)!important;
  background:linear-gradient(145deg,rgba(255,252,248,.86),rgba(247,239,230,.74))!important;
  box-shadow:0 10px 24px rgba(121,92,58,.07),inset 0 1px 0 rgba(255,255,255,.82)!important;
  color:var(--og-text)!important;
  text-align:left!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card::before{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  left:auto!important;
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(145deg,rgba(238,222,195,.66),rgba(250,241,231,.98))!important;
  color:var(--og-gold)!important;
  box-shadow:0 5px 14px rgba(159,126,82,.12),inset 0 1px 0 rgba(255,255,255,.90)!important;
  font-size:18px!important;
  line-height:1!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card:nth-child(1)::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card:nth-child(1)::before{content:"⌂"!important}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card:nth-child(2)::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card:nth-child(2)::before{content:"🔔"!important}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card:nth-child(3)::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card:nth-child(3)::before{content:"◷"!important}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card:nth-child(4)::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card:nth-child(4)::before{content:"⚙"!important}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>span,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>span{
  font-size:11px!important;
  color:#8a7864!important;
  line-height:1.2!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card strong,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card strong{
  font-size:30px!important;
  line-height:1!important;
  letter-spacing:-.04em!important;
  color:#1f1510!important;
  margin:10px 0 6px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card small,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card small{
  font-size:11px!important;
  line-height:1.32!important;
  color:var(--og-muted)!important;
}

/* Bottom nav feels more finished. */
html[data-theme="light"] body.office-gold-active.app-mode .mobile-bottom-nav,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-bottom-nav{
  height:72px!important;
  padding:6px 8px max(7px,env(safe-area-inset-bottom))!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .mobile-bottom-nav button,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-bottom-nav button{
  border-radius:14px!important;
  gap:3px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .mobile-bottom-nav button>small,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-bottom-nav button>small{
  font-size:9.5px!important;
  font-weight:650!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .mobile-bottom-nav button.active,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-bottom-nav button.active{
  background:linear-gradient(180deg,rgba(232,217,193,.52),rgba(232,217,193,.26))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.80)!important;
}

/* The demo screenshot is all mobile-first. Keep desktop safe but untouched enough. */
@media(min-width:761px){
  html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}


/* ==========================================================
   HOTFIX 46 · Office Gold LIGHT premium compact
   - mobile refinement after HF45
   - cards become more compact, lighter and more premium
   - only Office Gold light theme is affected
   ========================================================== */

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold{
  --og46-text:#241812!important;
  --og46-muted:#7c6c5a!important;
  --og46-gold:#b58a4e!important;
}

/* Slightly narrower dashboard composition. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .role-dashboard,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .role-dashboard{
  width:calc(100% - 26px)!important;
  margin:12px 13px 0!important;
  gap:12px!important;
}

/* Weather card: a bit shorter and cleaner. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-weather-card,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-weather-card{
  min-height:192px!important;
  padding:16px 16px 14px!important;
  border-radius:24px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .mobile-weather-toolbar,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-weather-toolbar{
  margin-bottom:14px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #weatherCity,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #weatherCity{
  font-size:30px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #weatherTemp,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #weatherTemp{
  font-size:46px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #weatherText,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #weatherText{
  font-size:13px!important;
}

/* Compact premium quick-actions block. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions{
  padding:15px 14px 15px!important;
  border-radius:24px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .section-heading,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .section-heading{
  margin-bottom:10px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .section-heading .eyebrow,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .section-heading .eyebrow{
  font-size:11px!important;
  letter-spacing:.14em!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .section-heading h2,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .section-heading h2{
  font-size:22px!important;
  line-height:1.02!important;
  margin-top:4px!important;
  max-width:82%!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid{
  gap:12px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button{
  min-height:138px!important;
  padding:15px 14px 14px!important;
  border-radius:20px!important;
  gap:8px 7px!important;
  box-shadow:0 8px 22px rgba(121,92,58,.065),inset 0 1px 0 rgba(255,255,255,.90)!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button::after,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button::after{
  width:26px!important;
  height:26px!important;
  font-size:20px!important;
  color:#9a825f!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button>span,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button>span{
  width:40px!important;
  height:40px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button .quick-vector-icon,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button .quick-vector-icon{
  width:20px!important;
  height:20px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button strong,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button strong{
  font-size:13px!important;
  line-height:1.15!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button small,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button small{
  font-size:10px!important;
  line-height:1.28!important;
}

/* Stats become more premium and less bulky. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline{
  gap:12px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card{
  min-height:98px!important;
  padding:14px 14px 13px!important;
  border-radius:20px!important;
  box-shadow:0 8px 22px rgba(121,92,58,.055),inset 0 1px 0 rgba(255,255,255,.85)!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card::before,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card::before{
  top:12px!important;
  right:12px!important;
  width:30px!important;
  height:30px!important;
  font-size:15px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>span,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>span{
  font-size:10px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card strong,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card strong{
  font-size:25px!important;
  margin:8px 0 5px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card small,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card small{
  font-size:10px!important;
  line-height:1.22!important;
}

/* Secondary panels: more refined, less heavy. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .news-panel,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .works-highlight-section,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #requestsSection,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .news-panel,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .works-highlight-section,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #requestsSection{
  padding:15px 14px!important;
  border-radius:24px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .section-heading,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .news-panel .section-heading,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .works-highlight-section .section-heading,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #requestsSection .section-heading,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .section-heading,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .news-panel .section-heading,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .works-highlight-section .section-heading,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #requestsSection .section-heading{
  margin-bottom:10px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .section-heading h2,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .news-panel .section-heading h2,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .works-highlight-section .section-heading h2,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #requestsSection .section-heading h2,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .section-heading h2,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .news-panel .section-heading h2,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .works-highlight-section .section-heading h2,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #requestsSection .section-heading h2{
  font-size:18px!important;
  line-height:1.08!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .section-heading .text-button,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .news-panel .section-heading .text-button,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .works-highlight-section .section-heading .text-button,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #requestsSection .section-heading .text-button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .section-heading .text-button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .news-panel .section-heading .text-button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .works-highlight-section .section-heading .text-button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #requestsSection .section-heading .text-button{
  font-size:11px!important;
}

/* Request list more elegant and compact. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #requestsSection .request-list,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #requestsSection .request-list{
  gap:10px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #requestsSection .request-row,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #requestsSection .request-row{
  padding:10px 10px!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(253,250,246,.92),rgba(246,240,232,.86))!important;
  border:1px solid rgba(196,166,121,.18)!important;
  box-shadow:0 8px 18px rgba(121,92,58,.045)!important;
  gap:8px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #requestsSection .request-row .request-id,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #requestsSection .request-row .request-id{
  font-size:9px!important;
  line-height:1.15!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #requestsSection .request-row strong,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #requestsSection .request-row strong{
  font-size:12px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #requestsSection .request-row small,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #requestsSection .request-row small{
  font-size:9px!important;
}

/* Team cards. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-list,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-list{
  gap:10px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-list>div,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-list>div{
  padding:0!important;
  border:none!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .staff-row,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .team-row,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .staff-row,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .team-row{
  min-height:72px!important;
  padding:10px 12px!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(253,250,246,.90),rgba(246,240,232,.84))!important;
  border:1px solid rgba(196,166,121,.18)!important;
  box-shadow:0 7px 18px rgba(121,92,58,.04)!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .staff-avatar,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .person-avatar,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .staff-avatar,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .person-avatar{
  width:42px!important;
  height:42px!important;
  border-radius:14px!important;
}

/* News and works compact cards. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .news-list,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .news-list{
  gap:10px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .news-list button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .news-list button{
  padding:10px!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(253,250,246,.90),rgba(246,240,232,.84))!important;
  border:1px solid rgba(196,166,121,.18)!important;
  box-shadow:0 7px 18px rgba(121,92,58,.04)!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .news-list .news-date,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .news-list .news-date{
  width:46px!important;
  height:28px!important;
  border-radius:14px!important;
  font-size:8px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .work-grid,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .work-grid{
  gap:10px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .work-grid article,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .work-grid article{
  min-height:96px!important;
  padding:12px!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,rgba(253,250,246,.90),rgba(246,240,232,.84))!important;
  border:1px solid rgba(196,166,121,.18)!important;
  box-shadow:0 7px 18px rgba(121,92,58,.04)!important;
  gap:8px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .work-grid article strong,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .work-grid article strong{
  font-size:11px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .work-grid article small,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .work-grid article small{
  font-size:8.7px!important;
}

/* Bottom nav slightly slimmer. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .mobile-bottom-nav,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-bottom-nav{
  height:68px!important;
  padding:5px 8px max(6px,env(safe-area-inset-bottom))!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .mobile-bottom-nav button>small,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .mobile-bottom-nav button>small{
  font-size:9px!important;
}


/* ==========================================================
   HOTFIX 47 · Office Gold LIGHT final mobile refine
   - smaller quick-action cards
   - improved Team Today card layout
   - only Office Gold light theme is affected
   ========================================================== */

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold{
  --hf47-text:#241913!important;
  --hf47-muted:#7e6d5d!important;
  --hf47-gold:#b58a4e!important;
}

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .role-dashboard,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .role-dashboard{
  width:calc(100% - 30px)!important;
  margin:12px 15px 0!important;
  gap:12px!important;
}

/* --- Управление комплексом: make the whole block feel smaller and more premium. --- */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions{
  padding:14px 13px 14px!important;
  border-radius:24px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .section-heading,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .section-heading{
  margin-bottom:9px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .section-heading .eyebrow,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .section-heading .eyebrow{
  font-size:10.5px!important;
  letter-spacing:.15em!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .section-heading h2,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .section-heading h2{
  font-size:20px!important;
  line-height:1.02!important;
  margin-top:4px!important;
  max-width:76%!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid{
  gap:10px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button{
  min-height:124px!important;
  padding:13px 12px 12px!important;
  border-radius:18px!important;
  gap:7px 6px!important;
  box-shadow:0 7px 18px rgba(121,92,58,.055),inset 0 1px 0 rgba(255,255,255,.90)!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button>span,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button>span{
  width:36px!important;
  height:36px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button .quick-vector-icon,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button .quick-vector-icon{
  width:18px!important;
  height:18px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button::after,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button::after{
  width:22px!important;
  height:22px!important;
  font-size:17px!important;
  color:#9a835f!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button strong,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button strong{
  font-size:12px!important;
  line-height:1.14!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button small,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button small{
  font-size:9.2px!important;
  line-height:1.24!important;
}

/* --- Команда сегодня: make rows look designed, not stretched. --- */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel{
  padding:14px 13px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .section-heading,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .section-heading{
  margin-bottom:10px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .section-heading h2,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .section-heading h2{
  font-size:19px!important;
  line-height:1.04!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .section-heading .text-button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .section-heading .text-button{
  font-size:11px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-list,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-list{
  gap:8px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-list>div,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-list>div{
  grid-template-columns:auto minmax(0,1fr) auto!important;
  gap:10px!important;
  padding:10px 10px!important;
  min-height:66px!important;
  border-radius:16px!important;
  border:1px solid rgba(195,165,118,.18)!important;
  background:linear-gradient(145deg,rgba(253,250,246,.90),rgba(246,240,232,.84))!important;
  box-shadow:0 6px 16px rgba(121,92,58,.04)!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-list p,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-list p{
  gap:2px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-list p strong,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-list p strong{
  font-size:11.5px!important;
  line-height:1.16!important;
  color:var(--hf47-text)!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-list p small,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-list p small{
  font-size:9.2px!important;
  line-height:1.18!important;
  color:var(--hf47-muted)!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .staff-avatar,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-panel .person-avatar,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .staff-avatar,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-panel .person-avatar{
  width:40px!important;
  height:40px!important;
  border-radius:13px!important;
  box-shadow:0 4px 12px rgba(121,92,58,.08)!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-list .presence,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-list .presence{
  justify-self:end!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:6px 9px!important;
  min-height:30px!important;
  border-radius:999px!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-list .presence.online,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-list .presence.online{
  color:#9f7c49!important;
  background:rgba(238,228,209,.74)!important;
  border:1px solid rgba(199,171,127,.28)!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .team-list .presence.duty,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .team-list .presence.duty{
  color:#b08443!important;
  background:rgba(244,235,214,.88)!important;
  border:1px solid rgba(206,180,140,.30)!important;
}


/* ==========================================================
   HOTFIX 48 · Office Gold LIGHT final touch
   - equal-height quick action cards
   - premium edit buttons for planned works
   - readable login/password input text in light login
   - only light Office Gold / light login are affected
   ========================================================== */

/* 1) QUICK ACTIONS: equal height and a bit more disciplined. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid{
  align-items:stretch!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button{
  height:124px!important;
  min-height:124px!important;
  align-self:stretch!important;
}

/* 2) PLAN WORKS: redesign the edit pencil into a premium pill button. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .real-work-card,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .real-work-card{
  position:relative!important;
  padding-bottom:54px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .real-work-card .edit-work-card,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .real-work-card .edit-work-card{
  position:absolute!important;
  left:14px!important;
  bottom:12px!important;
  width:auto!important;
  min-width:108px!important;
  height:32px!important;
  padding:0 12px 0 10px!important;
  border-radius:999px!important;
  border:1px solid rgba(188,160,116,.28)!important;
  background:linear-gradient(145deg,rgba(252,249,244,.96),rgba(241,232,219,.92))!important;
  box-shadow:0 6px 16px rgba(121,92,58,.08),inset 0 1px 0 rgba(255,255,255,.92)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  color:transparent!important;
  font-size:0!important;
  line-height:1!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .real-work-card .edit-work-card::before,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .real-work-card .edit-work-card::before{
  content:"✎";
  color:#b58a4e;
  font-size:14px;
  line-height:1;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .real-work-card .edit-work-card::after,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .real-work-card .edit-work-card::after{
  content:"Редактировать";
  color:#9d7a49;
  font-size:10px;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .real-work-card .edit-work-card:active,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .real-work-card .edit-work-card:active{
  transform:translateY(1px)!important;
}

/* 3) LIGHT LOGIN: readable login/password values and placeholders. */
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{
  background:linear-gradient(145deg,rgba(255,251,246,.88),rgba(246,239,229,.76))!important;
  border:1px solid rgba(195,164,116,.34)!important;
  box-shadow:0 6px 16px rgba(113,88,57,.08),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input:focus,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input:focus{
  color:#2b2018!important;
  -webkit-text-fill-color:#2b2018!important;
  font-weight:700!important;
  text-shadow:none!important;
  caret-color:#b58a4e!important;
}
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input::placeholder,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input::placeholder{
  color:rgba(110,91,71,.72)!important;
  -webkit-text-fill-color:rgba(110,91,71,.72)!important;
  opacity:1!important;
}
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .field-icon,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .field-icon,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .eye-button,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .eye-button{
  color:rgba(126,101,69,.84)!important;
}
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill:hover,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill:focus,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill:hover,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill:focus{
  -webkit-text-fill-color:#2b2018!important;
  box-shadow:0 0 0 1000px rgba(251,247,241,.96) inset!important;
  transition:background-color 9999s ease-in-out 0s!important;
}


/* ==========================================================
   HOTFIX 49 · Office Gold LIGHT cleanup
   - remove white strips inside light login inputs while typing
   - align quick action icons/text in the Complex Management block
   - move edit pencil to top-right corner of work cards
   - only light Office Gold / light login are affected
   ========================================================== */

/* 1) LIGHT LOGIN: kill inner white strips/bars while typing or autofill. */
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap{
  overflow:hidden!important;
}
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input:focus,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input:focus,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input:active,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap input:active{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border:0!important;
  outline:0!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill:hover,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill:focus,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill:active,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill:hover,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill:focus,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm input:-webkit-autofill:active{
  -webkit-text-fill-color:#2b2018!important;
  box-shadow:0 0 0 1000px transparent inset!important;
  background-color:transparent!important;
  background-image:none!important;
  caret-color:#b58a4e!important;
}
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap::before,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap::before,
html[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap::after,
html.mobile-device[data-theme="light"] body.login-form-style-gradient-glass:not(.app-mode) #loginForm .input-wrap::after{
  display:none!important;
  content:none!important;
}

/* 2) QUICK ACTIONS: align icon circles and text more cleanly. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button{
  display:grid!important;
  grid-template-rows:auto auto 1fr!important;
  align-content:start!important;
  justify-items:start!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button>span,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button>span{
  margin-bottom:8px!important;
  align-self:start!important;
  justify-self:start!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button strong,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button strong{
  display:block!important;
  min-height:2.28em!important;
  margin:0!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button small,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button small{
  display:block!important;
  min-height:2.5em!important;
  margin-top:6px!important;
}

/* 3) WORK CARDS: move edit pencil to the top-right corner and keep it neat. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .real-work-card,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .real-work-card{
  padding-bottom:12px!important;
  padding-right:46px!important;
  overflow:hidden!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .real-work-card .edit-work-card,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .real-work-card .edit-work-card{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  left:auto!important;
  bottom:auto!important;
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  padding:0!important;
  border-radius:10px!important;
  border:1px solid rgba(188,160,116,.28)!important;
  background:linear-gradient(145deg,rgba(252,249,244,.98),rgba(241,232,219,.94))!important;
  box-shadow:0 6px 16px rgba(121,92,58,.08),inset 0 1px 0 rgba(255,255,255,.92)!important;
  display:grid!important;
  place-items:center!important;
  color:transparent!important;
  font-size:0!important;
  line-height:1!important;
  z-index:3!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .real-work-card .edit-work-card::before,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .real-work-card .edit-work-card::before{
  content:"✎";
  color:#b58a4e;
  font-size:15px;
  line-height:1;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .real-work-card .edit-work-card::after,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .real-work-card .edit-work-card::after{
  content:none!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .real-work-card .edit-work-card:active,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .real-work-card .edit-work-card:active{
  transform:translateY(1px)!important;
}


/* ==========================================================
   HOTFIX 50 · Office Gold LIGHT quick-card alignment
   - aligns icons and text inside "Управление комплексом"
   - prevents title/description from overflowing card bounds
   - only light Office Gold app is affected
   ========================================================== */

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid{
  gap:10px!important;
  align-items:stretch!important;
}

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button{
  height:132px!important;
  min-height:132px!important;
  padding:14px 14px 12px!important;
  display:grid!important;
  grid-template-rows:40px 44px 28px!important;
  row-gap:8px!important;
  align-content:start!important;
  justify-items:start!important;
  overflow:hidden!important;
}

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button>span,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button>span{
  width:40px!important;
  height:40px!important;
  margin:0!important;
  align-self:start!important;
  justify-self:start!important;
}

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button strong,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button strong{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  width:100%!important;
  min-height:2.25em!important;
  max-height:2.25em!important;
  margin:0!important;
  font-size:11.8px!important;
  line-height:1.14!important;
  letter-spacing:-.01em!important;
  text-wrap:balance!important;
}

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button small,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button small{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  width:100%!important;
  min-height:2.45em!important;
  max-height:2.45em!important;
  margin:0!important;
  font-size:9px!important;
  line-height:1.22!important;
  color:#867563!important;
  text-wrap:balance!important;
}

/* Slightly tighten the section title area so the cards have more breathing room. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .section-heading,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .section-heading{
  margin-bottom:8px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .section-heading h2,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .section-heading h2{
  max-width:72%!important;
}


/* ==========================================================
   HOTFIX 52 · Office Gold LIGHT quick-card geometry fix
   - built from the actual runtime archive after HF50
   - fixes the real cause: card row heights exceeded card height
   - aligns icon/title/description and keeps all text inside
   - only light Office Gold mobile dashboard is affected
   ========================================================== */

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button{
  height:134px!important;
  min-height:134px!important;
  max-height:134px!important;
  padding:12px 12px 10px!important;
  display:grid!important;
  grid-template-rows:40px 32px 22px!important;
  row-gap:6px!important;
  align-content:start!important;
  justify-items:start!important;
  overflow:hidden!important;
}

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button>span,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button>span{
  width:40px!important;
  height:40px!important;
  margin:0!important;
  align-self:start!important;
  justify-self:start!important;
}

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button strong,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button strong{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  width:100%!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  margin:0!important;
  font-size:11.8px!important;
  line-height:1.14!important;
  letter-spacing:-.01em!important;
}

html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button small,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button small{
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  overflow:hidden!important;
  width:100%!important;
  height:22px!important;
  min-height:22px!important;
  max-height:22px!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  align-self:start!important;
  font-size:9px!important;
  line-height:1.2!important;
  color:#867563!important;
}

/* Keep all four cards on the exact same internal baseline. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid{
  align-items:stretch!important;
}


/* ==========================================================
   HOTFIX 53 · Office Gold login composition polish
   - lowers the UK VTR24 brand block slightly on mobile
   - refines the login heading typography to match the supplied render
   - dark: "Вход в" stays white; "личный кабинет" is gold
   - light: base text stays dark for contrast; "личный кабинет" is gold
   - app after login is untouched
   ========================================================== */

/* Brand/logo block: move it down slightly without moving the login card. */
html.mobile-device.office-gold-active.login-active body:not(.app-mode) .brand{
  top:clamp(62px,10.2svh,102px)!important;
}

/* Refined heading typography: lighter, cleaner, closer to the render. */
html.mobile-device.office-gold-active.login-active body.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading h2{
  font-family:"Avenir Next","SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif!important;
  font-size:23px!important;
  line-height:1.12!important;
  font-weight:500!important;
  letter-spacing:-.018em!important;
  text-wrap:balance!important;
}

html.mobile-device.office-gold-active.login-active body.login-form-style-gradient-glass:not(.app-mode) #loginForm .login-heading-accent{
  color:#d5aa77!important;
  font-weight:500!important;
}

/* Dark Office Gold: the non-accent part remains white. */
html.mobile-device[data-theme="dark"].office-gold-active.login-active body.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading h2{
  color:#f6f3ee!important;
}

/* Light Office Gold: preserve contrast on the ivory glass card. */
html.mobile-device[data-theme="light"].office-gold-active.login-active body.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading h2{
  color:#2b2620!important;
}
html.mobile-device[data-theme="light"].office-gold-active.login-active body.login-form-style-gradient-glass:not(.app-mode) #loginForm .login-heading-accent{
  color:#a87438!important;
}

/* Short screens still move down, but only a little so all controls remain visible. */
@media (max-width:480px) and (max-height:740px){
  html.mobile-device.office-gold-active.login-active body:not(.app-mode) .brand{
    top:clamp(38px,7.2svh,58px)!important;
  }
  html.mobile-device.office-gold-active.login-active body.login-form-style-gradient-glass:not(.app-mode) #loginForm .card-heading h2{
    font-size:19px!important;
    line-height:1.12!important;
  }
}


/* ==========================================================
   HOTFIX 54 · Request first-photo thumbnails
   - removes request ID from request cards
   - shows the first request photo in its place
   - used by Classic and Gradient Glass / Office Gold themes
   - no-photo requests get a neutral photo placeholder
   ========================================================== */

.request-row.request-row-with-thumb{
  grid-template-columns:64px minmax(0,1fr) 100px 92px!important;
}
.request-thumb{
  width:56px;
  height:56px;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  align-self:center;
  background:color-mix(in srgb,var(--app-blue-soft) 62%,var(--app-surface-strong));
  border:1px solid color-mix(in srgb,var(--app-border) 86%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.request-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.request-thumb-empty{
  color:var(--app-muted);
  background:color-mix(in srgb,var(--app-surface-strong) 88%,var(--app-blue-soft));
}
.request-thumb-empty::before{
  content:"";
  width:25px;
  height:25px;
  opacity:.58;
  background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b8175' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 15-5-5L5 20'/%3E%3C/svg%3E");
}
.request-thumb-empty img{display:none!important}

html.mobile-device .request-row.request-row-with-thumb{
  grid-template-columns:62px minmax(0,1fr) auto!important;
  grid-template-areas:
    "thumb main status"
    "thumb assignee status"!important;
  column-gap:10px!important;
  row-gap:4px!important;
  align-items:center!important;
}
html.mobile-device .request-row.request-row-with-thumb .request-thumb{grid-area:thumb;width:58px;height:58px;border-radius:14px}
html.mobile-device .request-row.request-row-with-thumb .request-main{grid-area:main;align-self:end}
html.mobile-device .request-row.request-row-with-thumb .assignee{grid-area:assignee;align-self:start;margin-top:0!important}
html.mobile-device .request-row.request-row-with-thumb .status{grid-area:status;align-self:start;margin-top:2px}

/* Classic: clean neutral thumbnail frame. */
body.design-classic.app-mode .request-row.request-row-with-thumb .request-thumb{
  border-color:var(--app-border);
  box-shadow:none;
}

/* Gradient Glass / Office Gold: warm glass thumbnail frame. */
body.app-mode.app-visual-office-gold .request-row.request-row-with-thumb .request-thumb,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-row.request-row-with-thumb .request-thumb{
  border-color:rgba(190,156,111,.28)!important;
  background:rgba(255,250,244,.72)!important;
  box-shadow:0 6px 16px rgba(97,72,45,.08),inset 0 1px 0 rgba(255,255,255,.58)!important;
}
html[data-theme="dark"] body.app-mode.app-visual-office-gold .request-row.request-row-with-thumb .request-thumb,
html[data-theme="dark"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-row.request-row-with-thumb .request-thumb{
  background:rgba(24,23,27,.68)!important;
  border-color:rgba(222,185,139,.22)!important;
}

/* ==========================================================
   HOTFIX 55 · Owner request first-photo thumbnails
   - owner "Мои заявки / Последние обращения" cards use first photo
   - request ID is removed from owner cards
   - reuses HF54 request thumbnail loader
   - works with Classic and Gradient Glass / Office Gold
   ========================================================== */

.owner-request-cards .owner-real-request.owner-request-with-thumb{
  position:relative;
  display:grid!important;
  grid-template-columns:64px minmax(0,1fr) 18px!important;
  grid-template-areas:"thumb copy arrow"!important;
  gap:12px!important;
  align-items:center!important;
  min-height:112px;
  padding:12px 12px!important;
  overflow:hidden;
}
.owner-request-cards .owner-request-with-thumb .request-thumb{
  grid-area:thumb;
  width:58px;
  height:58px;
  border-radius:14px;
  align-self:center;
}
.owner-request-cards .owner-request-copy{
  grid-area:copy;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.owner-request-cards .owner-request-copy .owner-request-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
}
.owner-request-cards .owner-request-copy strong{
  min-width:0;
  margin:0!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  line-height:1.2;
}
.owner-request-cards .owner-request-copy > small{
  margin:0!important;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1.25;
}
.owner-request-cards .owner-request-assignee{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:3px;
  color:var(--app-muted);
  font-size:9px;
  line-height:1.25;
}
.owner-request-cards .owner-request-assignee small{
  margin:0!important;
  color:var(--app-muted);
  font-size:9px;
}
.owner-request-cards .owner-request-with-thumb .status{
  flex:0 0 auto;
  white-space:nowrap;
}
.owner-request-cards .owner-request-chevron{
  grid-area:arrow;
  justify-self:end;
  color:var(--app-muted);
  font-size:25px;
  line-height:1;
  opacity:.72;
}
html.mobile-device .owner-request-cards .owner-real-request.owner-request-with-thumb{
  grid-template-columns:62px minmax(0,1fr) 16px!important;
  gap:10px!important;
  min-height:106px!important;
  padding:11px 10px!important;
  border-radius:18px!important;
}
html.mobile-device .owner-request-cards .owner-request-with-thumb .request-thumb{
  width:58px!important;
  height:58px!important;
  border-radius:14px!important;
}
html.mobile-device .owner-request-cards .owner-request-copy strong{font-size:11.5px!important}
html.mobile-device .owner-request-cards .owner-request-copy > small,
html.mobile-device .owner-request-cards .owner-request-assignee,
html.mobile-device .owner-request-cards .owner-request-assignee small{font-size:9px!important}
body.design-classic.app-mode .owner-request-cards .owner-request-with-thumb{border-color:var(--app-border)}
body.app-mode.app-visual-office-gold .owner-request-cards .owner-request-with-thumb,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-request-cards .owner-request-with-thumb{border-color:rgba(190,156,111,.24)!important}
body.app-mode.app-visual-office-gold .owner-request-cards .owner-request-chevron,
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-request-cards .owner-request-chevron{color:#a98556!important}
html[data-theme="dark"] body.app-mode.app-visual-office-gold .owner-request-cards .owner-request-chevron,
html[data-theme="dark"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-request-cards .owner-request-chevron{color:#d7b28d!important}


/* ==========================================================
   HOTFIX 56 · request list performance
   - reduce expensive mobile glass repaint only for UK request block
   - keep appearance close to current Office Gold
   ========================================================== */

html.mobile-device body.app-mode.app-visual-office-gold #requestsSection,
html.mobile-device body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold #requestsSection,
html.mobile-device body.office-gold-active.app-mode #requestsSection{
  -webkit-backdrop-filter:blur(8px) saturate(1.02)!important;
  backdrop-filter:blur(8px) saturate(1.02)!important;
}

html.mobile-device body.app-mode #requestsSection .request-list{
  isolation:isolate;
}

html.mobile-device body.app-mode #requestsSection .request-row{
  contain:paint;
}


/* ==========================================================
   WORK ICON LIBRARY 57 · system + persistent custom icons
   ========================================================== */
.work-image-picker{max-height:360px;overflow:auto;padding:2px 4px 6px 2px;align-items:stretch}
.work-image-option{min-height:104px;justify-content:flex-start;position:relative;overflow:hidden}
.work-image-option img{object-fit:contain!important;background:color-mix(in srgb,var(--app-surface-strong) 86%,transparent)!important;padding:7px}
.work-image-option strong{min-height:2.3em;display:flex;align-items:center;justify-content:center}
.custom-work-icon-option img{object-fit:cover!important;padding:0}
.work-custom-icon-delete{position:absolute;right:4px;top:4px;width:22px;height:22px;padding:0;border:1px solid color-mix(in srgb,#ef6d73 40%,var(--app-border));border-radius:999px;background:color-mix(in srgb,#ef6d73 10%,var(--app-surface-strong));color:#e85f67;font-size:16px;line-height:1;display:grid;place-items:center;cursor:pointer;z-index:3}
.work-custom-icon-add{align-self:flex-start;min-height:38px;padding:0 14px;border:1px dashed color-mix(in srgb,var(--app-blue) 48%,var(--app-border));border-radius:12px;background:color-mix(in srgb,var(--app-blue-soft) 44%,transparent);color:var(--app-blue);font-size:9.5px;font-weight:850;cursor:pointer}
.work-custom-icon-add:hover{border-style:solid;transform:translateY(-1px)}
.work-custom-icon-panel{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:2px;padding:12px;border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface)}
.work-custom-icon-panel>label{display:flex;flex-direction:column;gap:6px}.work-custom-icon-panel>label>span{font-size:9px;font-weight:800;color:var(--app-muted)}
.work-custom-icon-panel input[type="text"],.work-custom-icon-panel input:not([type]){min-height:40px}
.work-custom-icon-file input{min-height:40px;padding:8px;background:var(--app-surface-strong);border:1px solid var(--app-border);border-radius:10px;color:var(--app-text)}
.work-custom-icon-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px}.work-custom-icon-actions button{min-height:38px}
.work-custom-icon-error{grid-column:1/-1;color:#e85f67;font-size:9px;min-height:12px}
html.mobile-device .work-image-picker{grid-template-columns:repeat(3,minmax(0,1fr));max-height:315px}
html.mobile-device .work-image-option{min-height:96px;padding:6px!important}.work-image-option img{width:52px!important;height:52px!important}
html.mobile-device .work-custom-icon-panel{grid-template-columns:1fr}.work-custom-icon-actions,.work-custom-icon-error{grid-column:1}
body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .work-custom-icon-panel,body.office-gold-active.app-mode .work-custom-icon-panel{background:color-mix(in srgb,var(--app-surface-strong) 80%,transparent);backdrop-filter:blur(18px)}


/* ==========================================================
   HOTFIX 59A · Custom photo for complex news
   ========================================================== */

.news-photo-field{display:flex;flex-direction:column;gap:9px}
.news-photo-upload-card{
  position:relative;
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:10px;
  border:1px solid var(--app-border);
  border-radius:18px;
  background:color-mix(in srgb,var(--app-card) 90%,transparent);
  cursor:pointer;
  overflow:hidden;
}
.news-photo-upload-card>input{
  position:absolute;
  inline-size:1px;
  block-size:1px;
  opacity:0;
  pointer-events:none;
}
.news-photo-preview{
  width:112px;
  height:76px;
  border-radius:14px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px dashed color-mix(in srgb,var(--app-accent) 44%,var(--app-border));
  background:color-mix(in srgb,var(--app-surface) 88%,transparent);
}
.news-photo-preview img{width:100%;height:100%;object-fit:cover;display:block}
.news-photo-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:var(--app-muted);
}
.news-photo-empty b{font-size:26px;line-height:1;color:var(--app-accent)}
.news-photo-empty small{font-size:9px}
.news-photo-upload-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.news-photo-upload-copy strong{font-size:12px;color:var(--app-text)}
.news-photo-upload-copy small{font-size:9px;color:var(--app-muted);line-height:1.35}
.news-photo-clear{align-self:flex-start;padding:8px 12px!important}

.news-uploaded-thumb{
  overflow:hidden;
  background:none!important;
  filter:none!important;
}
.news-uploaded-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.news-uploaded-thumb.news-photo-error{
  background:linear-gradient(135deg,rgba(205,205,205,.15),rgba(150,150,150,.08))!important;
}

/* News without a user photo do not reserve an empty thumbnail. */
.news-list .real-news-item.news-without-photo{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr)!important;
  grid-template-areas:"date copy"!important;
  gap:10px!important;
  align-items:center!important;
  min-width:0!important;
}
.news-list .real-news-item.news-without-photo .news-date{grid-area:date!important}
.news-list .real-news-item.news-without-photo .news-copy{
  grid-area:copy!important;
  display:flex!important;
  flex-direction:column!important;
  min-width:0!important;
}
.owner-news-grid .owner-real-news-item.news-without-photo{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr)!important;
  grid-template-areas:"date copy"!important;
  gap:10px!important;
  align-items:center!important;
  min-height:72px!important;
}
.owner-news-grid .owner-real-news-item.news-without-photo .news-date{grid-area:date!important}
.owner-news-grid .owner-real-news-item.news-without-photo .news-copy{grid-area:copy!important;min-width:0!important}

html.mobile-device .news-photo-upload-card{
  grid-template-columns:92px minmax(0,1fr);
  gap:10px;
  padding:8px;
}
html.mobile-device .news-photo-preview{
  width:92px;
  height:68px;
  border-radius:12px;
}
html.mobile-device .news-photo-upload-copy strong{font-size:11px}
html.mobile-device .news-photo-upload-copy small{font-size:8.5px}


/* ==========================================================
   HOTFIX 60 · Premium unified News cards
   Same compact render-inspired geometry for УК/ТСН and owners.
   ========================================================== */

/* The render has a clean panel edge; remove the old cyan/violet rail. */
.news-highlight-section::before{display:none!important}
.news-highlight-section .section-heading{padding-left:0!important}
.news-highlight-section .section-heading h2{display:block!important}
.news-highlight-section .new-pill{display:none!important}
.news-all-button{white-space:nowrap!important}

/* Both roles use one list geometry. */
.news-list,
.owner-news-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:12px!important;
}

.news-list .premium-news-card,
.owner-news-grid .premium-news-card{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  min-height:112px!important;
  display:grid!important;
  grid-template-columns:86px minmax(0,1fr)!important;
  grid-template-areas:"media copy"!important;
  gap:14px!important;
  align-items:center!important;
  padding:12px 16px 12px 12px!important;
  margin:0!important;
  border:1px solid color-mix(in srgb,var(--app-border) 84%,#d8b777 16%)!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--app-surface-strong) 96%,#fff8ec 4%),color-mix(in srgb,var(--app-surface-strong) 90%,#ead7bb 10%))!important;
  color:var(--app-text)!important;
  text-align:left!important;
  cursor:pointer!important;
  overflow:hidden!important;
  box-shadow:0 10px 26px color-mix(in srgb,#5b3b18 7%,transparent),inset 0 1px 0 rgba(255,255,255,.55)!important;
}

.news-list .premium-news-card::after,
.owner-news-grid .premium-news-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,.16),transparent 28%,transparent 72%,rgba(255,255,255,.08));
  opacity:.7;
}

.news-list .premium-news-card .news-card-media,
.owner-news-grid .premium-news-card .news-card-media{
  grid-area:media!important;
  width:86px!important;
  height:82px!important;
  min-width:86px!important;
  border-radius:17px!important;
  overflow:hidden!important;
  border:1px solid color-mix(in srgb,var(--app-border) 74%,#d8b777 26%)!important;
  background:var(--app-surface)!important;
  box-shadow:0 7px 17px rgba(68,45,25,.08),inset 0 0 0 1px rgba(255,255,255,.28)!important;
}

.news-list .premium-news-card .news-card-media .news-complex-thumb,
.owner-news-grid .premium-news-card .news-card-media .news-complex-thumb{
  display:block!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  background:none!important;
}

.news-list .premium-news-card .news-card-media img,
.owner-news-grid .premium-news-card .news-card-media img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  filter:saturate(1.06) contrast(1.02)!important;
}

.news-list .premium-news-card .news-copy,
.owner-news-grid .premium-news-card .news-copy{
  grid-area:copy!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-self:stretch!important;
  justify-content:center!important;
  gap:5px!important;
  padding:1px 20px 0 0!important;
  margin:0!important;
  position:relative!important;
  z-index:1!important;
}

.news-list .premium-news-card .news-copy strong,
.owner-news-grid .premium-news-card .news-copy strong{
  margin:0!important;
  color:var(--app-text)!important;
  font-size:15px!important;
  line-height:1.18!important;
  font-weight:800!important;
  letter-spacing:-.012em!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}

.news-list .premium-news-card .news-copy small,
.owner-news-grid .premium-news-card .news-copy small{
  margin:0!important;
  color:var(--app-muted)!important;
  font-size:11px!important;
  line-height:1.34!important;
  font-weight:500!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
}

.news-list .premium-news-card .news-date,
.owner-news-grid .premium-news-card .news-date{
  width:max-content!important;
  height:auto!important;
  min-height:25px!important;
  margin:3px 0 0!important;
  padding:5px 9px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  border-radius:999px!important;
  border:1px solid color-mix(in srgb,#c9913e 20%,transparent)!important;
  background:color-mix(in srgb,#f5dfb8 42%,var(--app-surface-strong))!important;
  color:#ad782f!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  white-space:nowrap!important;
  position:static!important;
}
.news-date-icon{font-size:9px!important;line-height:1!important;color:#bf8434!important}

.news-list .premium-news-card .news-live-dot,
.owner-news-grid .premium-news-card .news-live-dot{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:#26b7eb!important;
  box-shadow:0 0 0 5px rgba(38,183,235,.10)!important;
  z-index:2!important;
}

/* No-photo news: use the whole card width; no empty square. */
.news-list .premium-news-card.news-without-photo,
.owner-news-grid .premium-news-card.news-without-photo{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:"copy"!important;
  min-height:92px!important;
  padding-left:16px!important;
}
.news-list .premium-news-card.news-without-photo .news-copy,
.owner-news-grid .premium-news-card.news-without-photo .news-copy{
  padding-right:24px!important;
}

/* Office Gold / Gradient Glass light: render-like warm premium cards. */
html[data-theme="light"] body.office-gold-active.app-mode .news-list .premium-news-card,
html[data-theme="light"] body.office-gold-active.app-mode .owner-news-grid .premium-news-card,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .news-list .premium-news-card,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .owner-news-grid .premium-news-card{
  background:linear-gradient(145deg,rgba(255,253,249,.96),rgba(248,241,231,.93))!important;
  border-color:rgba(197,158,103,.24)!important;
  box-shadow:0 10px 24px rgba(91,60,25,.07),inset 0 1px 0 rgba(255,255,255,.82)!important;
}

/* Dark themes keep the same geometry but proper contrast. */
html[data-theme="dark"] .news-list .premium-news-card,
html[data-theme="dark"] .owner-news-grid .premium-news-card{
  background:linear-gradient(145deg,color-mix(in srgb,var(--app-surface-strong) 93%,#2b2118 7%),color-mix(in srgb,var(--app-surface-strong) 96%,#000 4%))!important;
  border-color:color-mix(in srgb,#c89652 24%,var(--app-border))!important;
  box-shadow:0 10px 26px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
html[data-theme="dark"] .news-list .premium-news-card .news-date,
html[data-theme="dark"] .owner-news-grid .premium-news-card .news-date{
  background:rgba(151,105,48,.18)!important;
  border-color:rgba(211,163,91,.18)!important;
  color:#ddb67d!important;
}
html[data-theme="dark"] .news-date-icon{color:#d5a666!important}

/* Mobile proportions copied from the approved render: compact, not oversized. */
html.mobile-device .news-highlight-section{
  padding:14px 13px!important;
  border-radius:23px!important;
}
html.mobile-device .news-highlight-section .section-heading{
  margin-bottom:10px!important;
  align-items:flex-start!important;
}
html.mobile-device .news-highlight-section .section-heading .eyebrow{
  font-size:10px!important;
  letter-spacing:.13em!important;
}
html.mobile-device .news-highlight-section .section-heading h2{
  font-size:19px!important;
  line-height:1.08!important;
  margin-top:3px!important;
}
html.mobile-device .news-highlight-section .news-all-button{
  padding:3px 0!important;
  margin-top:18px!important;
  font-size:10px!important;
  font-weight:700!important;
  color:#b9843b!important;
}
html.mobile-device .news-list,
html.mobile-device .owner-news-grid{gap:10px!important}
html.mobile-device .news-list .premium-news-card,
html.mobile-device .owner-news-grid .premium-news-card{
  grid-template-columns:72px minmax(0,1fr)!important;
  min-height:94px!important;
  gap:11px!important;
  padding:10px 12px 10px 10px!important;
  border-radius:19px!important;
}
html.mobile-device .news-list .premium-news-card .news-card-media,
html.mobile-device .owner-news-grid .premium-news-card .news-card-media{
  width:72px!important;
  min-width:72px!important;
  height:72px!important;
  border-radius:14px!important;
}
html.mobile-device .news-list .premium-news-card .news-copy,
html.mobile-device .owner-news-grid .premium-news-card .news-copy{
  gap:4px!important;
  padding-right:14px!important;
}
html.mobile-device .news-list .premium-news-card .news-copy strong,
html.mobile-device .owner-news-grid .premium-news-card .news-copy strong{
  font-size:12px!important;
  line-height:1.18!important;
}
html.mobile-device .news-list .premium-news-card .news-copy small,
html.mobile-device .owner-news-grid .premium-news-card .news-copy small{
  font-size:9.5px!important;
  line-height:1.28!important;
}
html.mobile-device .news-list .premium-news-card .news-date,
html.mobile-device .owner-news-grid .premium-news-card .news-date{
  min-height:22px!important;
  padding:4px 7px!important;
  font-size:8px!important;
  margin-top:2px!important;
}
html.mobile-device .news-list .premium-news-card .news-live-dot,
html.mobile-device .owner-news-grid .premium-news-card .news-live-dot{
  top:10px!important;
  right:10px!important;
  width:7px!important;
  height:7px!important;
  box-shadow:0 0 0 4px rgba(38,183,235,.09)!important;
}
html.mobile-device .news-list .premium-news-card.news-without-photo,
html.mobile-device .owner-news-grid .premium-news-card.news-without-photo{
  grid-template-columns:minmax(0,1fr)!important;
  min-height:76px!important;
  padding-left:13px!important;
}

@media(max-width:390px){
  html.mobile-device .news-list .premium-news-card,
  html.mobile-device .owner-news-grid .premium-news-card{
    grid-template-columns:64px minmax(0,1fr)!important;
    min-height:86px!important;
    gap:9px!important;
  }
  html.mobile-device .news-list .premium-news-card .news-card-media,
  html.mobile-device .owner-news-grid .premium-news-card .news-card-media{
    width:64px!important;
    min-width:64px!important;
    height:64px!important;
  }
  html.mobile-device .news-list .premium-news-card .news-copy strong,
  html.mobile-device .owner-news-grid .premium-news-card .news-copy strong{font-size:11.5px!important}
  html.mobile-device .news-list .premium-news-card .news-copy small,
  html.mobile-device .owner-news-grid .premium-news-card .news-copy small{font-size:9px!important}
}

/* HOTFIX 61: News date pill + mobile layout polish */
.news-list .premium-news-card,
.owner-news-grid .premium-news-card,
.owner-news-grid .premium-news-card.owner-real-news-item{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:14px!important;
  grid-template-columns:none!important;
  grid-template-areas:none!important;
}

.news-list .premium-news-card .news-card-media,
.owner-news-grid .premium-news-card .news-card-media,
.owner-news-grid .premium-news-card.owner-real-news-item .news-card-media{
  order:0!important;
  flex:0 0 86px!important;
  width:86px!important;
  min-width:86px!important;
  height:82px!important;
  align-self:center!important;
}

.news-list .premium-news-card .news-copy,
.owner-news-grid .premium-news-card .news-copy,
.owner-news-grid .premium-news-card.owner-real-news-item .news-copy{
  order:1!important;
  flex:1 1 auto!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  gap:7px!important;
  padding:1px 18px 0 0!important;
}

.news-list .premium-news-card .news-copy-text,
.owner-news-grid .premium-news-card .news-copy-text{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:4px!important;
  width:100%!important;
  min-width:0!important;
}

.news-list .premium-news-card .news-copy strong,
.owner-news-grid .premium-news-card .news-copy strong{
  max-width:100%!important;
}

.news-list .premium-news-card .news-copy small,
.owner-news-grid .premium-news-card .news-copy small{
  max-width:100%!important;
}

.news-list .premium-news-card .news-date,
.owner-news-grid .premium-news-card .news-date,
.owner-news-grid .premium-news-card.owner-real-news-item .news-date{
  order:2!important;
  align-self:flex-start!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  min-height:28px!important;
  padding:6px 11px!important;
  margin:2px 0 0!important;
  border-radius:999px!important;
  border:1px solid rgba(201,145,62,.24)!important;
  background:linear-gradient(180deg,rgba(253,246,233,.98),rgba(247,232,206,.96))!important;
  color:#b17c34!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78)!important;
}

.news-date-icon{
  position:relative!important;
  display:inline-block!important;
  width:11px!important;
  height:11px!important;
  min-width:11px!important;
  border:1.4px solid currentColor!important;
  border-radius:3px!important;
  box-sizing:border-box!important;
  color:#bf8434!important;
  font-size:0!important;
  line-height:0!important;
  background:rgba(255,255,255,.26)!important;
}
.news-date-icon::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:2.2px!important;
  height:1.4px!important;
  background:currentColor!important;
  border-radius:999px!important;
}
.news-date-icon::after{
  content:""!important;
  position:absolute!important;
  top:-1.8px!important;
  left:2px!important;
  width:1.5px!important;
  height:3.1px!important;
  background:currentColor!important;
  border-radius:999px!important;
  box-shadow:4px 0 0 currentColor!important;
}
.news-date-label{
  display:inline-block!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.005em!important;
}

.news-list .premium-news-card.news-without-photo,
.owner-news-grid .premium-news-card.news-without-photo,
.owner-news-grid .premium-news-card.owner-real-news-item.news-without-photo{
  display:block!important;
  min-height:92px!important;
  padding-left:16px!important;
}
.news-list .premium-news-card.news-without-photo .news-copy,
.owner-news-grid .premium-news-card.news-without-photo .news-copy,
.owner-news-grid .premium-news-card.owner-real-news-item.news-without-photo .news-copy{
  padding-right:22px!important;
}

html[data-theme="dark"] .news-list .premium-news-card .news-date,
html[data-theme="dark"] .owner-news-grid .premium-news-card .news-date{
  background:linear-gradient(180deg,rgba(123,86,45,.26),rgba(94,63,33,.20))!important;
  border-color:rgba(214,165,94,.26)!important;
  color:#ddb67d!important;
}
html[data-theme="dark"] .news-date-icon{color:#ddb67d!important;background:rgba(255,255,255,.04)!important}

html.mobile-device .news-list .premium-news-card,
html.mobile-device .owner-news-grid .premium-news-card,
html.mobile-device .owner-news-grid .premium-news-card.owner-real-news-item{
  gap:11px!important;
  min-height:96px!important;
  padding:10px 12px 10px 10px!important;
  border-radius:20px!important;
}
html.mobile-device .news-list .premium-news-card .news-card-media,
html.mobile-device .owner-news-grid .premium-news-card .news-card-media,
html.mobile-device .owner-news-grid .premium-news-card.owner-real-news-item .news-card-media{
  flex-basis:72px!important;
  width:72px!important;
  min-width:72px!important;
  height:72px!important;
  border-radius:14px!important;
}
html.mobile-device .news-list .premium-news-card .news-copy,
html.mobile-device .owner-news-grid .premium-news-card .news-copy,
html.mobile-device .owner-news-grid .premium-news-card.owner-real-news-item .news-copy{
  gap:6px!important;
  padding-right:13px!important;
}
html.mobile-device .news-list .premium-news-card .news-copy strong,
html.mobile-device .owner-news-grid .premium-news-card .news-copy strong{
  font-size:12.2px!important;
  line-height:1.17!important;
}
html.mobile-device .news-list .premium-news-card .news-copy small,
html.mobile-device .owner-news-grid .premium-news-card .news-copy small{
  font-size:9.4px!important;
  line-height:1.28!important;
}
html.mobile-device .news-list .premium-news-card .news-date,
html.mobile-device .owner-news-grid .premium-news-card .news-date,
html.mobile-device .owner-news-grid .premium-news-card.owner-real-news-item .news-date{
  min-height:24px!important;
  padding:5px 10px!important;
  gap:6px!important;
}
html.mobile-device .news-date-icon{
  width:10px!important;
  height:10px!important;
  min-width:10px!important;
}
html.mobile-device .news-date-label{font-size:9px!important}
html.mobile-device .news-list .premium-news-card.news-without-photo,
html.mobile-device .owner-news-grid .premium-news-card.news-without-photo,
html.mobile-device .owner-news-grid .premium-news-card.owner-real-news-item.news-without-photo{
  min-height:78px!important;
  padding-left:13px!important;
}

@media (max-width:390px){
  html.mobile-device .news-list .premium-news-card,
  html.mobile-device .owner-news-grid .premium-news-card,
  html.mobile-device .owner-news-grid .premium-news-card.owner-real-news-item{
    gap:9px!important;
    min-height:90px!important;
  }
  html.mobile-device .news-list .premium-news-card .news-card-media,
  html.mobile-device .owner-news-grid .premium-news-card .news-card-media,
  html.mobile-device .owner-news-grid .premium-news-card.owner-real-news-item .news-card-media{
    flex-basis:64px!important;
    width:64px!important;
    min-width:64px!important;
    height:64px!important;
  }
  html.mobile-device .news-list .premium-news-card .news-copy strong,
  html.mobile-device .owner-news-grid .premium-news-card .news-copy strong{font-size:11.6px!important}
  html.mobile-device .news-list .premium-news-card .news-copy small,
  html.mobile-device .owner-news-grid .premium-news-card .news-copy small{font-size:8.9px!important}
  html.mobile-device .news-list .premium-news-card .news-date,
  html.mobile-device .owner-news-grid .premium-news-card .news-date{
    min-height:23px!important;
    padding:4px 9px!important;
  }
  html.mobile-device .news-date-label{font-size:8.6px!important}
}

/* ==========================================================
   HOTFIX 63 · news date pill size increase
   Important: owner/iPhone .owner-news-grid is intentionally untouched.
   Root cause: older .news-list .real-news-item.news-with-photo !important
   grid rules had higher specificity than HF61 and still won on УК/ТСН.
   ========================================================== */

/* Neutralize the old high-specificity УК/ТСН grid and use one clean row. */
.news-list .real-news-item.premium-news-card.news-with-photo{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  grid-template-columns:none!important;
  grid-template-areas:none!important;
}

.news-list .real-news-item.premium-news-card.news-with-photo .news-card-media{
  position:static!important;
  inset:auto!important;
  order:0!important;
  flex:none!important;
  align-self:center!important;
  margin:0!important;
}

.news-list .real-news-item.premium-news-card.news-with-photo .news-card-media .news-complex-thumb{
  position:static!important;
  inset:auto!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  border:0!important;
  border-radius:inherit!important;
  overflow:hidden!important;
}

.news-list .real-news-item.premium-news-card.news-with-photo .news-copy{
  position:relative!important;
  inset:auto!important;
  order:1!important;
  flex:1 1 auto!important;
  min-width:0!important;
  width:auto!important;
  height:auto!important;
  align-self:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  text-align:left!important;
  margin:0!important;
}

.news-list .real-news-item.premium-news-card.news-with-photo .news-copy-text{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  text-align:left!important;
}

.news-list .real-news-item.premium-news-card.news-with-photo .news-date{
  position:static!important;
  inset:auto!important;
  grid-area:auto!important;
  order:2!important;
  align-self:flex-start!important;
  width:max-content!important;
  max-width:100%!important;
  height:auto!important;
  white-space:nowrap!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* УК/ТСН mobile — same compact composition the owner card already has. */
html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo{
  min-height:96px!important;
  padding:10px 12px 10px 10px!important;
  gap:11px!important;
  border-radius:20px!important;
}

html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-card-media{
  flex:0 0 72px!important;
  width:72px!important;
  min-width:72px!important;
  height:72px!important;
  border-radius:14px!important;
}

html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-copy{
  gap:6px!important;
  padding:0 14px 0 0!important;
}

html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-copy-text{
  gap:4px!important;
}

html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-copy strong{
  font-size:12.2px!important;
  line-height:1.18!important;
  -webkit-line-clamp:2!important;
}

html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-copy small{
  font-size:9.4px!important;
  line-height:1.28!important;
  -webkit-line-clamp:2!important;
}

html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-date{
  min-height:24px!important;
  padding:5px 10px!important;
  margin:1px 0 0!important;
  gap:6px!important;
  border-radius:999px!important;
}

html.mobile-device .news-list .real-news-item.premium-news-card.news-without-photo{
  display:block!important;
  min-height:78px!important;
  padding:11px 13px!important;
}

html.mobile-device .news-list .real-news-item.premium-news-card.news-without-photo .news-copy{
  width:100%!important;
  padding:0 22px 0 0!important;
  gap:6px!important;
}

/* Smaller Android widths: keep the same horizontal geometry, just tighten it. */
@media (max-width:390px){
  html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo{
    min-height:90px!important;
    gap:9px!important;
    padding:9px 11px 9px 9px!important;
  }
  html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-card-media{
    flex-basis:64px!important;
    width:64px!important;
    min-width:64px!important;
    height:64px!important;
    border-radius:13px!important;
  }
  html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-copy{
    gap:5px!important;
    padding-right:13px!important;
  }
  html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-copy strong{
    font-size:11.6px!important;
  }
  html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-copy small{
    font-size:8.9px!important;
  }
  html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-date{
    min-height:23px!important;
    padding:4px 9px!important;
  }
}

/* УК/ТСН desktop — compact row, no large empty card and no bottom-right photo. */
html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-with-photo{
  min-height:74px!important;
  padding:7px 10px!important;
  gap:11px!important;
  border-radius:15px!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-with-photo .news-card-media{
  flex:0 0 64px!important;
  width:64px!important;
  min-width:64px!important;
  height:58px!important;
  border-radius:11px!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-with-photo .news-copy{
  gap:4px!important;
  padding:0 24px 0 0!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-with-photo .news-copy-text{
  gap:2px!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-with-photo .news-copy strong{
  font-size:10.5px!important;
  line-height:1.2!important;
  -webkit-line-clamp:1!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-with-photo .news-copy small{
  font-size:8.4px!important;
  line-height:1.25!important;
  -webkit-line-clamp:2!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-with-photo .news-date{
  min-height:21px!important;
  padding:4px 8px!important;
  margin:1px 0 0!important;
  gap:5px!important;
  border-radius:999px!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-with-photo .news-date-icon{
  width:9px!important;
  height:9px!important;
  min-width:9px!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-with-photo .news-date-label{
  font-size:7.6px!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-without-photo{
  display:block!important;
  min-height:58px!important;
  padding:7px 10px!important;
  border-radius:15px!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-without-photo .news-copy{
  width:100%!important;
  padding:0 24px 0 0!important;
  gap:4px!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-without-photo .news-copy strong{
  font-size:10.5px!important;
  line-height:1.2!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-without-photo .news-copy small{
  font-size:8.4px!important;
  line-height:1.25!important;
}

html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-without-photo .news-date{
  min-height:21px!important;
  padding:4px 8px!important;
  margin-top:1px!important;
}

/* HOTFIX 63 · enlarge news date pill so the calendar icon and text never touch or overflow */
.news-list .premium-news-card .news-date,
.owner-news-grid .premium-news-card .news-date,
.owner-news-grid .premium-news-card.owner-real-news-item .news-date,
.news-list .real-news-item.premium-news-card.news-with-photo .news-date,
.news-list .real-news-item.premium-news-card.news-without-photo .news-date{
  min-height:30px!important;
  min-width:96px!important;
  padding:6px 14px!important;
  gap:8px!important;
  box-sizing:border-box!important;
}

.news-date-icon{
  width:12px!important;
  height:12px!important;
  min-width:12px!important;
}

.news-date-label{
  font-size:10.5px!important;
}

html.mobile-device .news-list .premium-news-card .news-date,
html.mobile-device .owner-news-grid .premium-news-card .news-date,
html.mobile-device .owner-news-grid .premium-news-card.owner-real-news-item .news-date,
html.mobile-device .news-list .real-news-item.premium-news-card.news-with-photo .news-date,
html.mobile-device .news-list .real-news-item.premium-news-card.news-without-photo .news-date{
  min-height:30px!important;
  min-width:98px!important;
  padding:6px 14px!important;
  gap:8px!important;
}

html.mobile-device .news-date-icon{
  width:12px!important;
  height:12px!important;
  min-width:12px!important;
}

html.mobile-device .news-date-label{
  font-size:10px!important;
}

html:not(.mobile-device) .news-list .premium-news-card .news-date,
html:not(.mobile-device) .owner-news-grid .premium-news-card .news-date,
html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-with-photo .news-date,
html:not(.mobile-device) .news-list .real-news-item.premium-news-card.news-without-photo .news-date{
  min-height:30px!important;
  min-width:100px!important;
  padding:6px 15px!important;
  gap:8px!important;
}

/* ==========================================================
   HOTFIX 64 · Owner quick actions + direct request without QR
   - premium line icons matching УК/ТСН quick actions
   - real owner request composer uses existing secure request form
   ========================================================== */
#ownerCreateRequestButton .owner-action-medallion,
#ownerSubmitMeterButton .owner-action-medallion{
  width:46px!important;
  height:46px!important;
  min-width:46px!important;
  flex:0 0 46px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,rgba(255,253,248,.96),rgba(244,229,207,.80))!important;
  border:1px solid rgba(255,255,255,.80)!important;
  box-shadow:0 8px 18px rgba(122,88,48,.10),inset 0 1px 0 rgba(255,255,255,.95)!important;
  font-size:0!important;
}

#ownerCreateRequestButton .owner-action-medallion{color:#2a211b!important}
#ownerSubmitMeterButton .owner-action-medallion{color:#36afe9!important}

.owner-action-vector{
  width:25px!important;
  height:25px!important;
  display:block!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

#ownerCreateRequestButton,
#ownerSubmitMeterButton{
  position:relative!important;
  overflow:hidden!important;
}

#ownerCreateRequestButton::after,
#ownerSubmitMeterButton::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.15),transparent 48%);
  opacity:.7;
}

#ownerCreateRequestButton:active,
#ownerSubmitMeterButton:active{
  transform:translateY(0) scale(.992)!important;
}

html[data-theme="dark"] #ownerCreateRequestButton .owner-action-medallion,
html[data-theme="dark"] #ownerSubmitMeterButton .owner-action-medallion{
  background:linear-gradient(145deg,rgba(69,54,41,.82),rgba(35,29,26,.94))!important;
  border-color:rgba(214,170,108,.24)!important;
  box-shadow:0 8px 18px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
html[data-theme="dark"] #ownerCreateRequestButton .owner-action-medallion{color:#e5c08d!important}
html[data-theme="dark"] #ownerSubmitMeterButton .owner-action-medallion{color:#55c8f4!important}

/* Direct owner request mode uses the same form, but shows the linked object cleanly. */
#ownerRequestObjectField select{
  font-weight:700;
}

html.mobile-device #ownerCreateRequestButton .owner-action-medallion,
html.mobile-device #ownerSubmitMeterButton .owner-action-medallion{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  flex-basis:48px!important;
}
html.mobile-device .owner-action-vector{
  width:26px!important;
  height:26px!important;
}

/* HOTFIX 65 · full news reader, archive and 20-photo gallery */
body.modal-open{overflow:hidden!important}

/* Create news: multi-photo picker */
.news-multi-upload{
  min-height:76px!important;
  grid-template-columns:46px minmax(0,1fr)!important;
  cursor:pointer;
}
.news-photo-add-icon{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;
  border:1px solid rgba(192,139,63,.26);
  background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(245,229,203,.58));
  color:#ba833a;font-size:28px;line-height:1;font-weight:300;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.news-photo-selection-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
  width:100%;min-height:0;
}
.news-photo-selection-empty{
  grid-column:1/-1;min-height:82px;border:1px dashed rgba(183,132,61,.32);border-radius:16px;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:5px;padding:14px 16px;
  color:var(--app-muted);background:rgba(255,255,255,.18);
}
.news-photo-selection-empty strong{font-size:12px;color:var(--app-text)}
.news-photo-selection-empty small{font-size:9.5px;line-height:1.35}
.news-photo-choice{
  position:relative;aspect-ratio:1/1;border:1px solid rgba(182,132,64,.24);border-radius:16px;overflow:hidden;padding:0;
  background:rgba(255,255,255,.35);box-shadow:0 8px 18px rgba(49,33,18,.08);cursor:pointer;
}
.news-photo-choice img{width:100%;height:100%;object-fit:cover;display:block}
.news-photo-choice.selected-cover{border:2px solid #c58a38;box-shadow:0 0 0 3px rgba(218,167,91,.18),0 8px 20px rgba(52,34,18,.12)}
.news-photo-number{position:absolute;top:7px;left:7px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;background:rgba(20,17,14,.7);color:#fff;font-size:9px;font-weight:800;backdrop-filter:blur(8px)}
.news-photo-cover-badge{position:absolute;left:7px;right:7px;bottom:7px;min-height:24px;border-radius:999px;display:grid;place-items:center;padding:4px 7px;background:rgba(20,17,14,.66);color:#fff;font-size:8.5px;font-weight:800;backdrop-filter:blur(10px)}
.news-photo-choice.selected-cover .news-photo-cover-badge{background:linear-gradient(135deg,#b97d2e,#d6a35c);color:#fff}
html[data-theme="dark"] .news-photo-add-icon{background:linear-gradient(145deg,rgba(77,58,38,.44),rgba(31,27,24,.76));color:#e0b77b;border-color:rgba(224,183,123,.26)}
html[data-theme="dark"] .news-photo-selection-empty{background:rgba(0,0,0,.14);border-color:rgba(224,183,123,.24)}

/* Full-screen news archive / reader */
.news-page-backdrop{
  z-index:210!important;padding:0!important;place-items:stretch!important;
  background:rgba(11,12,13,.48)!important;backdrop-filter:blur(16px)!important;-webkit-backdrop-filter:blur(16px)!important;
}
.news-page-shell{
  width:min(980px,100%);height:min(92dvh,920px);margin:auto;align-self:center;
  display:flex;flex-direction:column;overflow:hidden;
  color:var(--app-text);background:var(--app-surface-strong);
  border:1px solid var(--app-border);border-radius:28px;
  box-shadow:0 30px 100px rgba(0,0,0,.34);
}
.news-page-head{
  flex:0 0 auto;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:18px 20px;border-bottom:1px solid var(--app-border);
  background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(202,151,79,.06));
}
.news-page-head h2{margin:2px 0 0;font-size:26px;line-height:1.05;letter-spacing:-.025em}
.news-page-back{width:44px;height:44px;border-radius:14px;border:1px solid var(--app-border);background:var(--app-surface);color:var(--app-text);font-size:30px;line-height:1;display:grid;place-items:center;cursor:pointer}
.news-page-count{min-width:38px;height:32px;padding:0 10px;border-radius:999px;display:grid;place-items:center;background:rgba(196,140,55,.12);border:1px solid rgba(196,140,55,.22);color:#b47d32;font-size:12px;font-weight:800}
.news-archive-list{flex:1 1 auto;overflow:auto;padding:18px 20px 28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:14px;overscroll-behavior:contain}
.news-archive-card{
  min-width:0;min-height:150px;display:grid;grid-template-columns:118px minmax(0,1fr);gap:15px;align-items:stretch;
  padding:13px;border-radius:22px;border:1px solid var(--app-border);background:var(--app-surface);color:var(--app-text);text-align:left;cursor:pointer;
  box-shadow:0 12px 26px rgba(39,27,16,.07);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.news-archive-card:hover{transform:translateY(-2px);border-color:rgba(190,135,58,.42);box-shadow:0 16px 34px rgba(39,27,16,.12)}
.news-archive-cover{display:block;width:118px;height:118px;border-radius:17px;overflow:hidden;background:rgba(184,133,61,.08);align-self:center}
.news-archive-cover .news-complex-thumb,.news-archive-cover img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:inherit!important}
.news-archive-cover-empty{display:grid;place-items:center;font-size:32px;font-weight:800;color:rgba(180,126,48,.5);font-family:Georgia,serif}
.news-archive-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px}
.news-archive-copy strong{font-size:17px;line-height:1.2;color:var(--app-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.news-archive-copy small{font-size:12px;line-height:1.42;color:var(--app-muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.news-archive-date{display:inline-flex;align-items:center;gap:6px;color:#b47d32;font-size:10px;font-weight:800}
.news-archive-more{margin-top:2px;font-size:10px;font-weight:800;color:#b47d32}

.news-detail-shell{width:min(880px,100%)}
.news-detail-body{flex:1 1 auto;overflow:auto;padding:22px 24px 34px;overscroll-behavior:contain}
.news-detail-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.news-detail-date{display:inline-flex!important;align-items:center!important;gap:8px!important;min-width:0!important;width:auto!important;padding:7px 13px!important}
.news-detail-author{font-size:11px;color:var(--app-muted)}
.news-detail-gallery{margin:0 0 22px}
.news-detail-main-wrap{position:relative;width:100%;height:min(52vh,520px);border-radius:24px;overflow:hidden;background:#111;border:1px solid var(--app-border);box-shadow:0 18px 42px rgba(0,0,0,.16)}
.news-detail-main-wrap>img{width:100%;height:100%;object-fit:contain;display:block;background:#0d0d0e}
.news-gallery-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:54px;border:1px solid rgba(255,255,255,.24);border-radius:16px;background:rgba(12,12,13,.56);color:#fff;font-size:30px;display:grid;place-items:center;backdrop-filter:blur(10px);cursor:pointer}
.news-gallery-prev{left:12px}.news-gallery-next{right:12px}
.news-gallery-counter{position:absolute;right:14px;bottom:14px;min-width:52px;height:30px;padding:0 10px;border-radius:999px;display:grid;place-items:center;background:rgba(12,12,13,.64);color:#fff;font-size:11px;font-weight:800;backdrop-filter:blur(10px)}
.news-detail-thumbs{display:flex;gap:9px;overflow-x:auto;padding:10px 2px 2px;scrollbar-width:none}
.news-detail-thumbs::-webkit-scrollbar{display:none}
.news-detail-thumb{flex:0 0 74px;width:74px;height:60px;padding:0;border:1px solid var(--app-border);border-radius:13px;overflow:hidden;background:var(--app-surface);opacity:.72;cursor:pointer}
.news-detail-thumb.active{opacity:1;border:2px solid #c58a38;box-shadow:0 0 0 2px rgba(197,138,56,.14)}
.news-detail-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.news-detail-text{margin:0;white-space:pre-wrap;font-size:16px;line-height:1.65;color:var(--app-text)}

/* Make the dashboard news cards obviously readable/clickable without adding visual noise. */
.premium-news-card[data-news-id]{cursor:pointer}
.premium-news-card[data-news-id]:active{transform:scale(.995)}

html[data-theme="dark"] .news-page-shell{background:linear-gradient(145deg,rgba(13,15,17,.98),rgba(25,20,17,.98));border-color:rgba(214,165,94,.22)}
html[data-theme="dark"] .news-page-head{background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(197,140,57,.055));border-color:rgba(214,165,94,.16)}
html[data-theme="dark"] .news-archive-card{background:linear-gradient(145deg,rgba(20,21,22,.96),rgba(27,23,20,.96));border-color:rgba(214,165,94,.2)}

@media (max-width:760px){
  .news-photo-selection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .news-page-shell{width:100%;height:100dvh;max-height:none;border-radius:0;border-left:0;border-right:0}
  .news-page-head{padding:calc(10px + env(safe-area-inset-top)) 14px 12px;grid-template-columns:42px minmax(0,1fr) auto;gap:10px}
  .news-page-head h2{font-size:21px}
  .news-page-back{width:38px;height:38px;border-radius:12px;font-size:27px}
  .news-archive-list{grid-template-columns:1fr;padding:12px 13px calc(22px + env(safe-area-inset-bottom));gap:10px}
  .news-archive-card{grid-template-columns:94px minmax(0,1fr);min-height:120px;padding:10px;gap:12px;border-radius:20px}
  .news-archive-cover{width:94px;height:94px;border-radius:15px}
  .news-archive-copy{gap:4px}
  .news-archive-copy strong{font-size:14px}
  .news-archive-copy small{font-size:10px;-webkit-line-clamp:2}
  .news-archive-date,.news-archive-more{font-size:9px}
  .news-detail-body{padding:14px 14px calc(30px + env(safe-area-inset-bottom))}
  .news-detail-meta{margin-bottom:13px}
  .news-detail-main-wrap{height:min(43vh,390px);border-radius:19px}
  .news-gallery-nav{width:38px;height:48px;border-radius:14px;font-size:27px}
  .news-detail-thumb{flex-basis:62px;width:62px;height:52px;border-radius:11px}
  .news-detail-text{font-size:15px;line-height:1.58}
}
@media (max-width:390px){
  .news-photo-selection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .news-archive-card{grid-template-columns:82px minmax(0,1fr)}
  .news-archive-cover{width:82px;height:82px}
}

/* HOTFIX 66 · full-screen news viewer, publish progress, delegated news editing */
.news-photo-choice-wrap{position:relative;min-width:0}
.news-photo-choice-wrap .news-photo-choice{width:100%;height:100%}
.news-photo-remove{
  position:absolute;z-index:5;top:5px;right:5px;width:24px;height:24px;border-radius:999px;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.42);background:rgba(28,22,18,.72);color:#fff;
  font-size:16px;line-height:1;cursor:pointer;box-shadow:0 5px 12px rgba(0,0,0,.16);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.news-photo-choice-wrap.selected-cover .news-photo-remove{background:rgba(118,75,26,.82)}

.news-publish-progress{margin:14px 0 2px;padding:13px 14px;border-radius:16px;border:1px solid rgba(194,139,59,.22);background:rgba(194,139,59,.075)}
.news-publish-progress-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.news-publish-progress-head strong{font-size:13px;color:var(--app-text)}
.news-publish-progress-head span{font-size:12px;font-weight:800;color:#b47c31}
.news-publish-progress-track{height:8px;overflow:hidden;border-radius:999px;background:rgba(130,105,79,.15)}
.news-publish-progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#b8792d,#e0b269);transition:width .22s ease}
.news-publish-progress small{display:block;margin-top:7px;color:var(--app-muted);font-size:10px;line-height:1.35}
html[data-theme="dark"] .news-publish-progress{background:rgba(218,166,92,.08);border-color:rgba(218,166,92,.2)}

.news-success-dialog{max-width:420px;text-align:center;padding-top:28px}
.news-success-icon{width:72px;height:72px;margin:0 auto 16px;border-radius:24px;display:grid;place-items:center;background:linear-gradient(145deg,#f5e5c6,#d8a359);color:#6f4517;font-size:36px;font-weight:900;box-shadow:0 16px 34px rgba(154,103,37,.2)}
.news-success-dialog h2{margin:0;font-size:25px;color:var(--app-text)}
.news-success-dialog p{margin:10px auto 0;max-width:320px;color:var(--app-muted);line-height:1.45}
.news-success-actions{justify-content:center}
.news-success-actions .save-modal-button{min-width:150px}

.news-detail-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.news-detail-action{height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(194,139,59,.26);background:rgba(194,139,59,.09);color:#a9702d;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap}
.news-detail-action.danger{border-color:rgba(205,79,68,.24);background:rgba(205,79,68,.07);color:#b94b42}
html[data-theme="dark"] .news-detail-action{color:#e2b777;background:rgba(218,166,92,.09);border-color:rgba(218,166,92,.22)}
html[data-theme="dark"] .news-detail-action.danger{color:#ec918a;background:rgba(204,83,75,.08);border-color:rgba(236,145,138,.22)}

.news-detail-main-wrap>img[role="button"]{cursor:zoom-in;touch-action:pan-y}
.news-gallery-fullscreen-hint{position:absolute;left:14px;bottom:14px;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:rgba(12,12,13,.62);color:#fff;font-size:17px;pointer-events:none;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}

.news-photo-viewer{
  position:fixed;inset:0;z-index:10020;background:rgba(0,0,0,.96);display:grid;place-items:center;
  padding:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  user-select:none;-webkit-user-select:none;touch-action:none
}
.news-photo-viewer.hidden{display:none!important}
.news-photo-viewer-stage{width:100%;height:100%;display:grid;place-items:center;overflow:hidden;touch-action:none}
.news-photo-viewer-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;pointer-events:auto;-webkit-user-drag:none}
.news-photo-viewer-close{position:absolute;z-index:4;top:max(16px,calc(env(safe-area-inset-top) + 8px));right:max(16px,calc(env(safe-area-inset-right) + 8px));width:46px;height:46px;border-radius:16px;border:1px solid rgba(255,255,255,.18);background:rgba(20,20,21,.64);color:#fff;font-size:30px;display:grid;place-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer}
.news-photo-viewer-nav{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:50px;height:70px;border-radius:18px;border:1px solid rgba(255,255,255,.16);background:rgba(20,20,21,.55);color:#fff;font-size:40px;display:grid;place-items:center;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);cursor:pointer}
.news-photo-viewer-nav.prev{left:max(12px,env(safe-area-inset-left))}.news-photo-viewer-nav.next{right:max(12px,env(safe-area-inset-right))}
.news-photo-viewer-counter{position:absolute;z-index:3;right:max(18px,calc(env(safe-area-inset-right) + 8px));bottom:max(22px,calc(env(safe-area-inset-bottom) + 14px));min-width:62px;height:34px;padding:0 12px;border-radius:999px;display:grid;place-items:center;background:rgba(20,20,21,.64);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:12px;font-weight:800;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.news-photo-viewer-tip{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));padding:8px 12px;border-radius:999px;background:rgba(20,20,21,.54);color:rgba(255,255,255,.72);font-size:10px;pointer-events:none}
html.news-photo-viewer-open,html.news-photo-viewer-open body{overflow:hidden!important}

/* iPhone reader header: reserve a dedicated column for Back, even with app scaling. */
@media (max-width:760px){
  html.ios-device .news-page-head{position:relative;display:block!important;min-height:72px;padding:calc(12px + env(safe-area-inset-top)) 14px 12px 64px!important}
  html.ios-device .news-page-back{position:absolute!important;left:14px;top:calc(10px + env(safe-area-inset-top));width:38px!important;height:38px!important;border-radius:12px!important;font-size:25px!important;margin:0!important}
  html.ios-device .news-page-head>div:not(.news-detail-actions){min-width:0;max-width:100%;padding:0!important}
  html.ios-device .news-page-head h2{font-size:20px!important;line-height:1.08!important;overflow-wrap:anywhere;word-break:normal;margin-right:0!important}
  html.ios-device .news-page-head .eyebrow{font-size:9px!important}
  html.ios-device .news-page-count{position:absolute;right:14px;top:calc(13px + env(safe-area-inset-top))}
  html.ios-device .news-detail-head{padding-right:14px!important}
  html.ios-device .news-detail-head .news-detail-actions{margin-top:10px;justify-content:flex-start}

  .news-detail-actions{grid-column:1/-1;justify-content:flex-start}
  .news-detail-action{height:32px;padding:0 10px}
  .news-photo-viewer-nav{width:42px;height:58px;border-radius:15px;font-size:34px}
  .news-photo-viewer-tip{display:none}
  .news-photo-viewer-close{width:42px;height:42px;border-radius:14px;font-size:27px}
}
@media (max-width:390px){
  html.ios-device .news-page-head{padding-left:58px!important}
  html.ios-device .news-page-head h2{font-size:18px!important}
  .news-photo-viewer-nav{width:38px;height:52px}
}
#newsModal{z-index:260!important}
#newsSuccessModal{z-index:330!important}

/* HOTFIX 68 · swipe-only news gallery, iPhone Back header, compact photo delivery */
.news-gallery-nav,
.news-photo-viewer-nav{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

.news-detail-main-wrap{
  touch-action:pan-y!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
.news-detail-main-wrap>img{
  touch-action:pan-y!important;
  -webkit-user-drag:none!important;
}

/* On iPhone the Back button gets its own real grid column instead of floating over the title. */
@media (max-width:760px){
  html.ios-device .news-detail-head{
    position:relative!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    grid-template-areas:
      "back heading"
      "actions actions"!important;
    align-items:start!important;
    column-gap:12px!important;
    row-gap:8px!important;
    min-height:0!important;
    padding:calc(12px + env(safe-area-inset-top)) 14px 12px!important;
  }
  html.ios-device .news-detail-head>.news-page-back{
    grid-area:back!important;
    position:static!important;
    left:auto!important;
    top:auto!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    align-self:start!important;
    justify-self:start!important;
  }
  html.ios-device .news-detail-head>.news-detail-heading{
    grid-area:heading!important;
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin:0!important;
  }
  html.ios-device .news-detail-head>.news-detail-actions{
    grid-area:actions!important;
    margin:2px 0 0!important;
    justify-content:flex-start!important;
    min-width:0!important;
  }
  html.ios-device .news-detail-head .news-detail-heading h2{
    margin:2px 0 0!important;
    max-width:100%!important;
    overflow-wrap:anywhere!important;
  }
}

@media (max-width:390px){
  html.ios-device .news-detail-head{
    grid-template-columns:42px minmax(0,1fr)!important;
    column-gap:10px!important;
    padding:calc(10px + env(safe-area-inset-top)) 12px 11px!important;
  }
  html.ios-device .news-detail-head>.news-page-back{
    width:40px!important;
    height:40px!important;
  }
  html.ios-device .news-detail-head .news-detail-heading h2{
    font-size:18px!important;
    line-height:1.08!important;
  }
}

/* HOTFIX 70 · compact mobile work calendar + selected-day agenda */
.work-selected-day-panel{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--app-border);
}
.work-selected-day-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:10px}
.work-selected-day-head h2{margin:3px 0 2px;font-size:18px;line-height:1.1;color:var(--app-text);text-transform:capitalize}
.work-selected-day-head small{font-size:10px;color:var(--app-muted)}
.work-selected-add{min-height:38px!important;padding:9px 14px!important;font-size:10px!important;white-space:nowrap}
.work-selected-day-list{display:grid;gap:8px}
.work-selected-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface-strong);box-shadow:0 8px 22px rgba(0,0,0,.04);min-width:0}
.work-selected-row>img{width:48px;height:48px;object-fit:contain;border-radius:11px;background:color-mix(in srgb,var(--app-surface) 86%,transparent)}
.work-selected-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.work-selected-copy strong{font-size:12px;line-height:1.25;color:var(--app-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-selected-copy small{font-size:9px;line-height:1.35;color:var(--app-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work-selected-row>.status{font-size:8px;white-space:nowrap}
.work-selected-edit{position:absolute;top:8px;right:8px;width:31px;height:31px;border:1px solid color-mix(in srgb,var(--app-blue) 42%,var(--app-border));border-radius:10px;background:color-mix(in srgb,var(--app-blue) 10%,var(--app-surface-strong));color:var(--app-blue);display:grid;place-items:center;cursor:pointer;font-size:14px}
.work-selected-row>.status{margin-right:34px}
.work-selected-empty{padding:18px;border:1px dashed var(--app-border);border-radius:14px;background:color-mix(in srgb,var(--app-surface-strong) 82%,transparent);display:flex;flex-direction:column;gap:4px;text-align:center}
.work-selected-empty strong{font-size:12px;color:var(--app-text)}
.work-selected-empty span{font-size:9px;color:var(--app-muted)}
.work-calendar-day .calendar-day-works{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:2px;align-items:stretch}
.work-calendar-bar{display:block;height:3px;border-radius:999px;background:color-mix(in srgb,var(--app-blue) 78%,var(--app-blue) 22%);box-shadow:0 0 8px color-mix(in srgb,var(--app-blue) 16%,transparent)}
.work-calendar-bar.important{background:#d59b42}
.work-calendar-more{font-size:7px!important;line-height:1!important;text-align:right;color:var(--app-muted)!important;font-style:normal!important}
.work-calendar-day.selected{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--app-blue) 88%,#fff 12%)!important;background:color-mix(in srgb,var(--app-blue) 8%,var(--app-surface-strong))!important}
.work-calendar-day.today .calendar-day-number{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--app-text);color:var(--app-surface-strong)}
.work-calendar-day.weekend:not(.muted) .calendar-day-number{color:#bd5f58}
.work-calendar-weekdays .weekend{color:#bd5f58}

@media(max-width:700px){
  .work-calendar-page .subpage-head{grid-template-columns:auto minmax(0,1fr)!important;align-items:start!important}
  .work-calendar-page .subpage-head>button#calendarAddWorkButton{display:none!important}
  .work-calendar-panel{padding:13px!important;overflow:hidden!important}
  .work-calendar-toolbar{margin:0 0 10px!important;gap:8px!important;justify-content:space-between!important}
  .work-calendar-toolbar strong{min-width:0!important;flex:1;text-align:center;font-size:17px!important}
  .work-calendar-toolbar .ghost-button{width:42px!important;height:42px!important;min-height:42px!important;padding:0!important;border-radius:13px!important;font-size:15px!important}
  .work-calendar-weekdays,.work-calendar-grid{min-width:0!important;width:100%!important;grid-template-columns:repeat(7,minmax(0,1fr))!important}
  .work-calendar-weekdays{border-radius:12px 12px 0 0!important}
  .work-calendar-weekdays span{padding:8px 2px!important;font-size:9px!important;border-right:0!important;font-weight:800!important}
  .work-calendar-grid{gap:0!important;border-radius:0 0 14px 14px!important;background:transparent!important;border:1px solid var(--app-border)!important;border-top:0!important;overflow:hidden!important}
  .work-calendar-day{position:relative!important;min-height:0!important;height:58px!important;padding:6px 6px 5px!important;gap:2px!important;border-right:1px solid color-mix(in srgb,var(--app-border) 72%,transparent)!important;border-bottom:1px solid color-mix(in srgb,var(--app-border) 72%,transparent)!important;background:color-mix(in srgb,var(--app-surface-strong) 94%,transparent)!important;border-radius:0!important;overflow:hidden!important}
  .work-calendar-day:nth-child(7n){border-right:0!important}
  .calendar-day-number{font-size:12px!important;line-height:1!important;position:relative;z-index:1}
  .work-calendar-day.today .calendar-day-number{width:22px!important;height:22px!important;font-size:11px!important}
  .work-calendar-day .calendar-day-works{gap:2px!important;min-height:9px!important;overflow:visible!important}
  .work-calendar-bar{height:3px!important;min-height:3px!important;padding:0!important;border-radius:99px!important}
  .work-calendar-more{position:absolute;right:3px;bottom:2px;font-size:6px!important}
  .work-calendar-day.muted{opacity:.28!important}
  .work-selected-day-panel{margin-top:12px!important;padding-top:12px!important}
  .work-selected-day-head{align-items:center!important;gap:8px!important}
  .work-selected-day-head h2{font-size:17px!important;margin-top:2px!important}
  .work-selected-add{min-height:38px!important;padding:9px 12px!important;border-radius:12px!important;font-size:9px!important}
  .work-selected-day-list{gap:7px!important}
  .work-selected-row{grid-template-columns:44px minmax(0,1fr) auto!important;gap:9px!important;padding:9px!important;border-radius:13px!important}
  .work-selected-row>img{width:44px!important;height:44px!important;border-radius:10px!important}
  .work-selected-copy strong{font-size:11px!important}
  .work-selected-copy small{font-size:8px!important}
  .work-selected-row>.status{display:none!important}
  .work-selected-edit{position:absolute!important;top:8px!important;right:8px!important;width:31px!important;height:31px!important}
}

@media(max-width:390px){
  .work-calendar-panel{padding:10px!important}
  .work-calendar-day{height:54px!important;padding:5px!important}
  .work-calendar-weekdays span{font-size:8px!important}
  .work-selected-day-head{align-items:flex-start!important}
  .work-selected-day-head h2{font-size:16px!important}
  .work-selected-add{padding:8px 10px!important}
}

/* ==========================================================
   HOTFIX 77 · Gradient Glass / Office Gold card artwork
   - LIGHT Office Gold only
   - replaces small quick-action icon circles with card artwork
   - replaces small stat icon circles with large background artwork
   - Classic and dark themes are intentionally untouched
   ========================================================== */

/* Quick actions: artwork becomes part of the card background. */
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button{
  position:relative!important;
  height:132px!important;
  min-height:132px!important;
  max-height:132px!important;
  padding:72px 42px 12px 14px!important;
  display:block!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    linear-gradient(180deg,rgba(255,252,247,.30),rgba(255,250,244,.88) 58%,rgba(247,237,226,.94) 100%)!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  top:-5px!important;
  right:-2px!important;
  left:auto!important;
  width:78%!important;
  height:88px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-position:right top!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  opacity:.96!important;
  pointer-events:none!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button#quickNewNews::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button#quickNewNews::before{
  background-image:url('/assets/office-gold-card-art-hf77/quick-news.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button#quickPublishDocument::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button#quickPublishDocument::before{
  background-image:url('/assets/office-gold-card-art-hf77/quick-document.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button#quickPlanWork::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button#quickPlanWork::before{
  background-image:url('/assets/office-gold-card-art-hf77/quick-work.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button.mobile-home-poll-action::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button.mobile-home-poll-action::before{
  background-image:url('/assets/office-gold-card-art-hf77/quick-vote.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button>span,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button>span{
  display:none!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button strong,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button strong{
  position:relative!important;
  z-index:2!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  width:calc(100% - 22px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:32px!important;
  margin:0!important;
  overflow:hidden!important;
  font-size:12px!important;
  line-height:1.16!important;
  color:#211711!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button small,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button small{
  position:relative!important;
  z-index:2!important;
  display:-webkit-box!important;
  -webkit-box-orient:vertical!important;
  -webkit-line-clamp:2!important;
  width:calc(100% - 22px)!important;
  height:auto!important;
  min-height:0!important;
  max-height:25px!important;
  margin:4px 0 0!important;
  overflow:hidden!important;
  font-size:9.2px!important;
  line-height:1.22!important;
  color:#806f60!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button::after,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button::after{
  position:absolute!important;
  z-index:3!important;
  right:11px!important;
  bottom:11px!important;
  top:auto!important;
  width:27px!important;
  height:27px!important;
  background:rgba(255,250,243,.78)!important;
  border:1px solid rgba(187,147,94,.20)!important;
  color:#8d6d43!important;
  box-shadow:0 5px 13px rgba(122,90,53,.08),inset 0 1px 0 rgba(255,255,255,.92)!important;
  backdrop-filter:blur(7px)!important;
}

/* Stats: full illustration instead of a tiny round glyph. */
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card{
  position:relative!important;
  min-height:108px!important;
  padding:14px 14px 13px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    linear-gradient(120deg,rgba(255,252,248,.90),rgba(248,239,229,.76))!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  top:-4px!important;
  right:-2px!important;
  left:auto!important;
  width:56%!important;
  height:112%!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-color:transparent!important;
  background-position:right center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  opacity:.88!important;
  pointer-events:none!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card[data-request-stat="open"]::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card[data-request-stat="open"]::before{
  background-image:url('/assets/office-gold-card-art-hf77/stat-open.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card[data-request-stat="today"]::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card[data-request-stat="today"]::before{
  background-image:url('/assets/office-gold-card-art-hf77/stat-today.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card[data-request-stat="overdue"]::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card[data-request-stat="overdue"]::before{
  background-image:url('/assets/office-gold-card-art-hf77/stat-overdue.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card[data-request-stat="work"]::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card[data-request-stat="work"]::before{
  background-image:url('/assets/office-gold-card-art-hf77/stat-work.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>span,
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>strong,
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>small,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>span,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>strong,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>small{
  position:relative!important;
  z-index:2!important;
  max-width:70%!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>span,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>span{
  font-size:10px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>strong,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>strong{
  font-size:27px!important;
  margin:8px 0 5px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>small,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>small{
  font-size:10px!important;
  color:#806f60!important;
}

/* Keep the same idea on desktop without touching Classic or dark Office Gold. */
@media(min-width:761px){
  html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button{
    min-height:150px!important;
    height:150px!important;
    max-height:150px!important;
    padding-top:82px!important;
  }
  html[data-theme="light"] body.office-gold-active.app-mode .dashboard-quick-actions .quick-grid button::before,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .dashboard-quick-actions .quick-grid button::before{
    height:100px!important;
    width:76%!important;
  }
  html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card{
    min-height:118px!important;
  }
}

/* ==========================================================
   HOTFIX 78 · Office Gold request-stat artwork as CARD BACKGROUND
   - LIGHT Gradient Glass / Office Gold only
   - artwork fills the whole stat card instead of looking like a small icon
   - left text remains readable through a soft glass wash
   - Classic and dark themes are untouched
   ========================================================== */
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:linear-gradient(145deg,rgba(255,252,248,.92),rgba(247,239,230,.80))!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:0!important;
  top:0!important;
  right:0!important;
  bottom:0!important;
  left:0!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:inherit!important;
  display:block!important;
  place-items:initial!important;
  color:transparent!important;
  font-size:0!important;
  line-height:0!important;
  box-shadow:none!important;
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:cover!important;
  opacity:1!important;
  pointer-events:none!important;
  transform:none!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card::after,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  background:linear-gradient(90deg,
    rgba(255,252,248,.80) 0%,
    rgba(255,252,248,.58) 37%,
    rgba(255,252,248,.22) 62%,
    rgba(255,252,248,.02) 100%)!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card[data-request-stat="open"]::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card[data-request-stat="open"]::before,
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card:nth-child(1)::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card:nth-child(1)::before{
  background-image:url('/assets/office-gold-card-art-hf78/stat-open-bg.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card[data-request-stat="today"]::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card[data-request-stat="today"]::before,
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card:nth-child(2)::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card:nth-child(2)::before{
  background-image:url('/assets/office-gold-card-art-hf78/stat-today-bg.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card[data-request-stat="overdue"]::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card[data-request-stat="overdue"]::before,
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card:nth-child(3)::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card:nth-child(3)::before{
  background-image:url('/assets/office-gold-card-art-hf78/stat-overdue-bg.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card[data-request-stat="work"]::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card[data-request-stat="work"]::before,
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card:nth-child(4)::before,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card:nth-child(4)::before{
  background-image:url('/assets/office-gold-card-art-hf78/stat-work-bg.webp')!important;
}

html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>span,
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>strong,
html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>small,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>span,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>strong,
html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>small{
  position:relative!important;
  z-index:2!important;
  max-width:62%!important;
  text-shadow:0 1px 0 rgba(255,255,255,.50)!important;
}

/* Mobile: let the illustration read as a background, not a corner icon. */
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card{
  min-height:112px!important;
  padding:15px 14px 14px!important;
}
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>span,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>strong,
html.mobile-device[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card>small,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>span,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>strong,
html.mobile-device[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card>small{
  max-width:64%!important;
}

@media(min-width:761px){
  html[data-theme="light"] body.office-gold-active.app-mode .request-stats-inline .stat-card,
  html[data-theme="light"] body.app-mode.visual-preset-gradient-office-gold.app-visual-office-gold .request-stats-inline .stat-card{
    min-height:124px!important;
  }
}

/* ==========================================================
   HOTFIX 79 · Office Gold real card-fill artwork
   - fixes request-stat cards: artwork is the card background itself
   - adds thematic backgrounds to owner's two primary actions
   - LIGHT Gradient Glass / Office Gold only
   - Classic and dark Office Gold remain unchanged
   ========================================================== */

/* ----- ADMIN / TSN: request statistics ----- */
html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card,
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-height:126px!important;
  padding:16px 15px 15px!important;
  border-color:rgba(188,145,89,.24)!important;
  background-color:#f8efe4!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:100% 100%!important;
  box-shadow:0 12px 30px rgba(83,57,34,.10),inset 0 1px 0 rgba(255,255,255,.92)!important;
}

/* HF77/HF78 used pseudo-elements for the picture. Turn them off so a
   global card ::before rule cannot shrink the art back into a corner icon. */
html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card::before,
html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card::after,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card::before,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card::after,
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card::before,
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card::after{
  content:none!important;
  display:none!important;
}

html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card[data-request-stat="open"],
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card[data-request-stat="open"],
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card[data-request-stat="open"]{
  background-image:
    linear-gradient(90deg,rgba(255,252,248,.97) 0%,rgba(255,252,248,.84) 38%,rgba(255,250,244,.34) 61%,rgba(255,248,238,.03) 100%),
    url('/assets/office-gold-card-art-hf79/stat-open-bg.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card[data-request-stat="today"],
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card[data-request-stat="today"],
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card[data-request-stat="today"]{
  background-image:
    linear-gradient(90deg,rgba(255,252,248,.97) 0%,rgba(255,252,248,.84) 38%,rgba(255,250,244,.31) 61%,rgba(255,248,238,.02) 100%),
    url('/assets/office-gold-card-art-hf79/stat-today-bg.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card[data-request-stat="overdue"],
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card[data-request-stat="overdue"],
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card[data-request-stat="overdue"]{
  background-image:
    linear-gradient(90deg,rgba(255,252,248,.97) 0%,rgba(255,252,248,.84) 38%,rgba(255,250,244,.30) 61%,rgba(255,248,238,.02) 100%),
    url('/assets/office-gold-card-art-hf79/stat-overdue-bg.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card[data-request-stat="work"],
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card[data-request-stat="work"],
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card[data-request-stat="work"]{
  background-image:
    linear-gradient(90deg,rgba(255,252,248,.97) 0%,rgba(255,252,248,.84) 38%,rgba(255,250,244,.30) 61%,rgba(255,248,238,.02) 100%),
    url('/assets/office-gold-card-art-hf79/stat-work-bg.webp')!important;
}

html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card>span,
html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card>strong,
html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card>small,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card>span,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card>strong,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card>small,
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card>span,
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card>strong,
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card>small{
  position:relative!important;
  z-index:2!important;
  max-width:62%!important;
  text-shadow:0 1px 0 rgba(255,255,255,.72)!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card>span,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card>span,
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card>span{
  color:#7f6c5e!important;
  font-size:11px!important;
  line-height:1.15!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card>strong,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card>strong,
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card>strong{
  color:#1f1712!important;
  font-size:30px!important;
  margin:9px 0 4px!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card>small,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card>small,
html[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card>small{
  color:#806e5f!important;
  font-size:9.8px!important;
  line-height:1.25!important;
}

/* ----- OWNER: two primary home actions ----- */
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerCreateRequestButton,
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerSubmitMeterButton,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerCreateRequestButton,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerSubmitMeterButton,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerCreateRequestButton,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerSubmitMeterButton{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  min-height:158px!important;
  padding:18px 43% 18px 17px!important;
  text-align:left!important;
  border-color:rgba(188,145,89,.24)!important;
  background-color:#f8efe4!important;
  background-repeat:no-repeat!important;
  background-position:center center!important;
  background-size:100% 100%!important;
  box-shadow:0 12px 30px rgba(83,57,34,.10),inset 0 1px 0 rgba(255,255,255,.92)!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerCreateRequestButton,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerCreateRequestButton,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerCreateRequestButton{
  background-image:
    linear-gradient(90deg,rgba(255,252,248,.96) 0%,rgba(255,252,248,.74) 41%,rgba(255,250,244,.15) 65%,rgba(255,248,238,.00) 100%),
    url('/assets/office-gold-card-art-hf79/owner-request-bg.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerSubmitMeterButton,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerSubmitMeterButton,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerSubmitMeterButton{
  background-image:
    linear-gradient(90deg,rgba(255,252,248,.96) 0%,rgba(255,252,248,.74) 41%,rgba(255,250,244,.14) 65%,rgba(255,248,238,.00) 100%),
    url('/assets/office-gold-card-art-hf79/owner-meter-bg.webp')!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerCreateRequestButton .owner-action-medallion,
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerSubmitMeterButton .owner-action-medallion,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerCreateRequestButton .owner-action-medallion,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerSubmitMeterButton .owner-action-medallion,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerCreateRequestButton .owner-action-medallion,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerSubmitMeterButton .owner-action-medallion{
  display:none!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerCreateRequestButton strong,
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerSubmitMeterButton strong,
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerCreateRequestButton small,
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerSubmitMeterButton small,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerCreateRequestButton strong,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerSubmitMeterButton strong,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerCreateRequestButton small,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerSubmitMeterButton small,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerCreateRequestButton strong,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerSubmitMeterButton strong,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerCreateRequestButton small,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerSubmitMeterButton small{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  max-width:100%!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerCreateRequestButton strong,
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerSubmitMeterButton strong,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerCreateRequestButton strong,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerSubmitMeterButton strong,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerCreateRequestButton strong,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerSubmitMeterButton strong{
  color:#211711!important;
  font-size:13px!important;
  line-height:1.16!important;
  margin:0!important;
}
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerCreateRequestButton small,
html[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerSubmitMeterButton small,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerCreateRequestButton small,
html[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerSubmitMeterButton small,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerCreateRequestButton small,
html[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerSubmitMeterButton small{
  color:#806f60!important;
  font-size:10px!important;
  line-height:1.25!important;
  margin-top:7px!important;
}

@media(max-width:760px){
  html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #requestStatsGrid .stat-card,
  html.mobile-device[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #requestStatsGrid .stat-card,
  html.mobile-device[data-theme="light"].office-gold-active body.app-mode #requestStatsGrid .stat-card{
    min-height:122px!important;
    padding:15px 14px 14px!important;
  }
  html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerCreateRequestButton,
  html.mobile-device[data-theme="light"] body.office-gold-active.app-mode #ownerDashboard #ownerSubmitMeterButton,
  html.mobile-device[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerCreateRequestButton,
  html.mobile-device[data-theme="light"] body[data-visual-preset="gradient-office-gold"].app-mode #ownerDashboard #ownerSubmitMeterButton,
  html.mobile-device[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerCreateRequestButton,
  html.mobile-device[data-theme="light"].office-gold-active body.app-mode #ownerDashboard #ownerSubmitMeterButton{
    min-height:152px!important;
    padding:17px 42% 16px 15px!important;
  }
}