@font-face { font-family:"BolBol New Yorker"; src:local("NewYorker"), local("New Yorker"), local("NY Irvin"), local("New York"), local("New York Small"), local("Iowan Old Style"); font-style:normal; font-weight:100 900; font-display:swap; unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family:"BolBol English Serif"; src:local("Georgia"), local("Times New Roman"), local("Liberation Serif"); font-style:normal; font-weight:100 900; font-display:swap; unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family:"BolBol English System"; src:local("Arial"), local("Helvetica Neue"), local("Liberation Sans"), local("DejaVu Sans"); font-style:normal; font-weight:100 900; font-display:swap; unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family:"BolBol Noto Sans Arabic"; src:url("/assets/fonts/noto-sans-arabic.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family:"BolBol Noto Kufi Arabic"; src:url("/assets/fonts/noto-kufi-arabic.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family:"BolBol Noto Naskh Arabic"; src:url("/assets/fonts/noto-naskh-arabic.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family:"BolBol Noto Sans Arabic UI"; src:url("/assets/fonts/noto-sans-arabic-ui.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family:"BolBol Noto Naskh Arabic UI"; src:url("/assets/fonts/noto-naskh-arabic-ui.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family:"BolBol Amiri"; src:url("/assets/fonts/amiri.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family:"BolBol DejaVu Sans"; src:url("/assets/fonts/dejavu-sans.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family:"BolBol Lato"; src:url("/assets/fonts/lato.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family:"BolBol Open Sans"; src:url("/assets/fonts/open-sans.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family:"BolBol Cabin"; src:url("/assets/fonts/cabin.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family:"BolBol Clear Sans"; src:url("/assets/fonts/clear-sans.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family:"BolBol Arimo"; src:url("/assets/fonts/arimo.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family:"BolBol Carlito"; src:url("/assets/fonts/carlito.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family:"BolBol Go"; src:url("/assets/fonts/go.woff2") format("woff2"); font-style:normal; font-weight:400; font-display:swap;  unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family: "BolBol Vazirmatn"; src:url("/assets/fonts/vazirmatn.woff2") format("woff2"); font-style:normal; font-weight:400 700; font-display:swap;  unicode-range:U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "BolBol Sahel"; src:url("/assets/fonts/sahel.woff2") format("woff2"); font-style:normal; font-weight:400 700; font-display:swap;  unicode-range:U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "BolBol Shabnam"; src:url("/assets/fonts/shabnam.woff2") format("woff2"); font-style:normal; font-weight:400 700; font-display:swap;  unicode-range:U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+200C-200D, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "BolBol Inter"; src:url("/assets/fonts/inter.woff2") format("woff2"); font-style:normal; font-weight:400 700; font-display:swap;  unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family: "BolBol Roboto"; src:url("/assets/fonts/roboto.woff2") format("woff2"); font-style:normal; font-weight:400 700; font-display:swap;  unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
@font-face { font-family: "BolBol Nunito"; src:url("/assets/fonts/nunito.woff2") format("woff2"); font-style:normal; font-weight:400 700; font-display:swap;  unicode-range:U+0000-024F, U+1E00-1EFF, U+2000-200B, U+200E-206F, U+20A0-20CF, U+2100-214F; }
:root {
  color-scheme: light dark;
  --accent: #0F5B4F;
  --accent-rgb: 15, 91, 79;
  --navy: #0D2238;
  --gold: #94A3B8;
  --bg: #F5F5F7;
  --bg-secondary: #ECEEF1;
  --surface: rgba(255,255,255,.82);
  --surface-solid: #FFFFFF;
  --glass: rgba(248,249,251,.68);
  --glass-strong: rgba(255,255,255,.82);
  --glass-edge: rgba(255,255,255,.74);
  --control: rgba(118,118,128,.10);
  --control-hover: rgba(118,118,128,.16);
  --text: #15171A;
  --text-secondary: #6E737A;
  --text-tertiary: #92979E;
  --separator: rgba(60,60,67,.12);
  --shadow-float: 0 14px 42px rgba(23,28,34,.10), 0 2px 8px rgba(23,28,34,.05);
  --shadow-card: 0 10px 30px rgba(23,28,34,.055);
  --shadow-control: 0 4px 14px rgba(23,28,34,.07);
  --radius: 28px;
  --radius-card: 30px;
  --radius-control: 18px;
  --radius-pill: 999px;
  --safe-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  --safe-left: calc(max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px)) + var(--tg-content-safe-area-inset-left, 0px));
  --safe-right: calc(max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px)) + var(--tg-content-safe-area-inset-right, 0px));
  --tg-vh: 100vh;
  --body-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --display-font: "New York", "New York Small", "Iowan Old Style", "Palatino Linotype", ui-serif, Georgia, serif;
  /* BOLBOL SHOP v15.336: canonical typography, spacing, interaction tokens. */
  --bb-space-xs: 6px;
  --bb-space-sm: 10px;
  --bb-space-md: 14px;
  --bb-space-lg: 18px;
  --bb-space-xl: 22px;
  --bb-control-min-height: 44px;
  --bb-focus-ring: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
  --bb-motion-ease: cubic-bezier(.22,.8,.2,1);
  --bb-text-line-height: 1.55;
  --bb-ios-surface: color-mix(in srgb, var(--surface-solid) 88%, transparent);
  --bb-ios-tint: color-mix(in srgb, var(--accent) 9%, var(--glass-strong));
  --bb-ios-rim: color-mix(in srgb, var(--glass-edge) 85%, var(--separator));
  --bb-ios-shadow: 0 16px 38px rgba(13,34,56,.13), 0 2px 9px rgba(13,34,56,.065), inset 0 1px 0 rgba(255,255,255,.45);
  --bb-ios-control-shadow: 0 5px 14px rgba(13,34,56,.09), inset 0 1px 0 rgba(255,255,255,.38);
  --bb-ios-ease: cubic-bezier(.22,.8,.2,1);
  --bb-dock-rim: color-mix(in srgb, var(--glass-edge) 82%, var(--separator) 18%);
  --bb-dock-highlight: color-mix(in srgb, var(--glass-edge) 58%, transparent);
  --bb-dock-float-shadow: 0 22px 54px rgba(9,27,39,.18), 0 5px 18px rgba(9,27,39,.11), inset 0 1px 0 var(--bb-dock-highlight);
  --bb-dock-selection: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 23%, var(--glass-strong) 77%),
    color-mix(in srgb, var(--accent) 13%, var(--glass) 87%));
  --bb-dock-selection-rim: color-mix(in srgb, var(--accent) 25%, var(--glass-edge) 75%);
  --bb-dock-press-ease: cubic-bezier(.2,.78,.2,1);
  --bb3-card-top: color-mix(in srgb, var(--surface-solid) 94%, var(--glass) 6%);
  --bb3-card-bottom: color-mix(in srgb, var(--surface-solid) 86%, var(--glass) 14%);
  --bb3-card-edge: color-mix(in srgb, var(--separator) 76%, var(--glass-edge) 24%);
  --bb3-card-glint: color-mix(in srgb, var(--glass-edge) 36%, transparent);
  --bb3-card-shadow: 0 12px 30px rgba(12,28,39,.075), inset 0 1px 0 var(--bb3-card-glint);
  --bb3-dialog-top: color-mix(in srgb, var(--glass-strong) 90%, var(--surface-solid) 10%);
  --bb3-dialog-bottom: color-mix(in srgb, var(--surface-solid) 89%, var(--glass) 11%);
  /* Unified Mini App liquid material: owner Theme drives all color values. */
  --bb-liquid-card-bg: linear-gradient(153deg,
    color-mix(in srgb, var(--glass-strong) 78%, transparent) 0%,
    color-mix(in srgb, var(--glass) 75%, transparent) 100%);
  --bb-liquid-card-edge: color-mix(in srgb, var(--glass-edge) 67%, var(--separator) 33%);
  --bb-liquid-card-glint: color-mix(in srgb, var(--glass-edge) 55%, transparent);
  --bb-liquid-card-blur: 18px;
  --bb-liquid-card-shadow: 0 15px 36px rgba(13,34,56,.075),
    inset 0 1px 0 var(--bb-liquid-card-glint);
  --bb-liquid-dock-bg: linear-gradient(170deg,
    color-mix(in srgb, var(--glass-edge) 48%, transparent), transparent 35%),
    linear-gradient(148deg,
      color-mix(in srgb, var(--glass-strong) 84%, transparent) 0%,
      color-mix(in srgb, var(--glass) 86%, var(--accent) 14%) 100%);
  --bb-liquid-control-bg: linear-gradient(154deg,
    color-mix(in srgb, var(--glass-strong) 84%, var(--control) 16%),
    color-mix(in srgb, var(--glass) 79%, var(--control) 21%));
  --bb-liquid-control-rim: color-mix(in srgb, var(--glass-edge) 64%, var(--separator) 36%);
  --bb-liquid-press-scale: .97;
}

html[data-appearance="dark"],
html[data-appearance="system"][data-resolved-appearance="dark"] {
  color-scheme: dark;
  --bg: #080A0D;
  --bg-secondary: #111419;
  --surface: rgba(25,29,35,.86);
  --surface-solid: #181C22;
  --glass: rgba(28,32,39,.64);
  --glass-strong: rgba(35,40,48,.80);
  --glass-edge: rgba(255,255,255,.11);
  --control: rgba(255,255,255,.075);
  --control-hover: rgba(255,255,255,.12);
  --text: #F5F7F9;
  --text-secondary: #A3AAB3;
  --text-tertiary: #737C87;
  --separator: rgba(255,255,255,.085);
  --shadow-float: 0 18px 48px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.20);
  --shadow-card: 0 12px 32px rgba(0,0,0,.18);
  --shadow-control: 0 5px 18px rgba(0,0,0,.16);
  --bb-liquid-card-shadow: 0 16px 38px rgba(0,0,0,.22), inset 0 1px 0 var(--bb-liquid-card-glint);
}
html[data-appearance="light"] { color-scheme: light; }
html[data-appearance="system"] { color-scheme: light dark; }


/* Language-specific font stack. Local Arabic fonts are served by the existing bundle. */
html[lang="fa"], html[dir="rtl"] {
  --body-font: "BolBol Vazirmatn", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --display-font: "BolBol Vazirmatn", "New York", "Iowan Old Style", Georgia, serif;
}

* { box-sizing: border-box; }
/* Attribute visibility wins over mobile sheet/dock display declarations. */
[hidden] { display: none !important; }
html { min-width: 0; background: var(--bg); scroll-behavior: smooth; }
body, #app { margin: 0; min-width: 0; min-height: 100%; color: var(--text); font-family: var(--body-font); }
body {
  min-height: var(--tg-vh);
  background:
    radial-gradient(820px 570px at 9% 0%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 72%),
    radial-gradient(750px 560px at 92% 47%, color-mix(in srgb, var(--navy) 13%, transparent), transparent 75%),
    radial-gradient(610px 440px at 35% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 75%),
    linear-gradient(160deg, var(--bg), var(--bg-secondary));
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: var(--bb-text-line-height);
}
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
html.modal-open, html.modal-open body { overflow: hidden; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3, .metric-card strong, .wallet-hero strong { font-family: var(--display-font); letter-spacing: -.026em; }
html[data-font="system"] h1,
html[data-font="system"] h2,
html[data-font="system"] h3,
html[data-font="system"] .metric-card strong,
html[data-font="system"] .wallet-hero strong { font-family: var(--body-font); }
.section-heading h2, .subsection-title h3, .profile-card h3, .search-panel-heading strong, .settings-row-title strong, .sheet-heading strong, .admin-sidebar-title h2 { font-family:var(--display-font); letter-spacing:-.02em; }
html[data-font="system"] .section-heading h2, html[data-font="system"] .subsection-title h3, html[data-font="system"] .profile-card h3, html[data-font="system"] .search-panel-heading strong, html[data-font="system"] .settings-row-title strong, html[data-font="system"] .sheet-heading strong, html[data-font="system"] .admin-sidebar-title h2 { font-family:var(--body-font); }

.app-shell { width: min(1540px, 100%); margin: 0 auto; padding: 14px clamp(12px, 2.2vw, 32px) 46px; }
.surface { margin-top: 18px; }
.content-stack { min-width: 0; display: grid; gap: var(--bb-space-md); width: 100%; }

/* Functional Liquid Glass: navigation and controls, not every content block. */
.liquid-surface {
  background: linear-gradient(145deg, color-mix(in srgb, var(--glass-strong) 78%, transparent), var(--glass));
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(var(--glass-blur,30px)) saturate(175%);
  -webkit-backdrop-filter: blur(var(--glass-blur,30px)) saturate(175%);
}
.content-card {
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-card);
}
@supports not (backdrop-filter: blur(1px)) {
  .liquid-surface { background: var(--surface-solid); }
}

.app-bar {
  position: sticky;
  top: 10px;
  z-index: 80;
  min-height: 64px;
  border-radius: var(--radius-pill);
  padding: 8px 9px 8px 12px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  direction: ltr;
}
.brand-wordmark {
  appearance: none;
  border: 0;
  background: transparent;
  min-height: 44px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--text);
  font-weight: 790;
  letter-spacing: .115em;
}
.brand-wordmark:hover { background: var(--control); }
.brand-wordmark small { font-size: 10px; letter-spacing: 0; color: var(--text-secondary); font-weight: 680; }
.brand-mark {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--navy), color-mix(in srgb, var(--accent) 86%, #173d45));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 5px 16px color-mix(in srgb, var(--accent) 20%, transparent);
  font-family: var(--display-font);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.04em;
}
.surface-switch {
  justify-self: center;
  display: flex;
  max-width: 100%;
  gap: 3px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--radius-pill);
  background: var(--control);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--separator) 66%, transparent);
}
.surface-switch::-webkit-scrollbar { display: none; }
.app-bar.single-surface { grid-template-columns: auto minmax(0,1fr); }
.app-bar.single-surface .app-controls { grid-column: 2; }
.app-controls { display: flex; flex-direction: row-reverse; align-items: center; gap: 6px; justify-self: end; }
html[dir="rtl"] .app-bar .surface-switch { direction: rtl; }
.segmented-button,
.nav-pill,
.admin-nav-item,
.circle-button,
.pill-button,
.primary-button,
.secondary-button,
.danger-button,
.settings-row {
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.segmented-button {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  background: transparent;
  color: var(--text-secondary);
  white-space: nowrap;
  font-weight: 620;
}
.segmented-button.active {
  color: var(--text);
  background: var(--glass-strong);
  box-shadow: var(--shadow-control), inset 0 1px 0 rgba(255,255,255,.46);
}
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.segmented-button .icon { width: 16px; height: 16px; }
.circle-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--control);
}
.circle-button:hover, .secondary-button:hover, .pill-button.quiet:hover { background: var(--control-hover); }
.text-button { font-size: 12px; font-weight: 800; }
.pill-button, .primary-button, .secondary-button, .danger-button {
  min-height: var(--bb-control-min-height);
  border-radius: var(--radius-pill);
  padding: 10px 17px;
  font-weight: 690;
  line-height: 1.35;
}
.pill-button.quiet, .secondary-button { background: var(--control); }
html[data-appearance="dark"] .primary-button,
html[data-appearance="system"][data-resolved-appearance="dark"] .primary-button,
html[data-experience="cinematic"] .primary-button {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 45%, #d7fff3 55%),
    color-mix(in srgb, var(--accent) 65%, #85eace 35%));
  color: #092a31;
  border-color: rgba(212,255,246,.56);
  text-shadow: none;
}

html .primary-button {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 84%, white 16%),
    color-mix(in srgb, var(--accent) 96%, var(--navy) 4%));
  color: #fff;
  border: 1px solid color-mix(in srgb, var(--accent) 69%, white 31%);
  box-shadow: 0 9px 25px color-mix(in srgb, var(--accent) 32%, transparent), inset 0 1px 0 rgba(255,255,255,.36);
}
.danger-button { background: #C9343D; color: #fff; box-shadow: 0 7px 20px rgba(201,52,61,.18); }
.primary-button:hover, .danger-button:hover, .segmented-button:hover { transform: translateY(-1px); }
.primary-button:active, .danger-button:active, .segmented-button:active, .nav-pill:active, .settings-row:active { transform: scale(.985); }
button:disabled { opacity: .35; cursor: not-allowed; transform: none !important; }
/* Shared focus: one visible ring for keyboard users across all workspaces. */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--bb-focus-ring) !important;
}

/* Customer navigation: iPad/macOS-style sidebar on wide screens. */
.customer-layout { display: grid; grid-template-columns: 238px minmax(0,1fr); gap: 18px; align-items: start; }
.customer-nav {
  position: sticky;
  top: 92px;
  max-height: calc(100dvh - 112px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 9px;
  border-radius: 30px;
  display: grid;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text-secondary) 34%, transparent) transparent;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}
.customer-nav::-webkit-scrollbar { width: 7px; }
.customer-nav::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-secondary) 28%, transparent); border-radius: 99px; }
.nav-pill {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: var(--radius-pill);
  background: transparent;
  text-align: start;
  color: var(--text-secondary);
  font-weight: 620;
}
.nav-pill:hover { background: var(--control); color: var(--text); }
.nav-pill.active {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 13%, var(--glass-strong));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent), 0 5px 18px rgba(20,27,33,.06);
}
.nav-pill.active .icon { color: var(--accent); stroke-width: 2; }

.content-card {
  padding: clamp(14px, 2.2vw, 22px);
  border-radius: var(--radius-card);
}
.section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--bb-space-lg); margin-bottom: var(--bb-space-lg); }
.section-heading h2 { margin-bottom: 4px; font-size: clamp(21px, 2vw, 28px); font-weight: 650; }
.section-heading p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.55; }

.hero-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 230px;
  padding: clamp(26px, 4vw, 48px);
  border-radius: calc(var(--radius-card) + 8px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  background:
    radial-gradient(500px 300px at 94% 4%, rgba(148,163,184,.24), transparent 60%),
    radial-gradient(420px 260px at 12% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(142deg, #0B1E32 0%, color-mix(in srgb, var(--accent) 88%, #18354A) 100%);
  box-shadow: 0 24px 70px rgba(13,34,56,.20), inset 0 1px 0 rgba(255,255,255,.13);
}
.hero-card:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.06) 46%, transparent 66%);
}
.hero-card h1 { position: relative; margin-bottom: 8px; font-size: clamp(34px, 5vw, 58px); font-weight: 620; }
.hero-card p { position: relative; margin: 0; max-width: 640px; opacity: .74; line-height: 1.6; }
.hero-actions { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.hero-actions button { min-height:44px; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-pill); padding:8px 13px; display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.10); color:#fff; backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); cursor:pointer; transition:background .18s ease,transform .18s ease; }
.hero-actions button:hover { background:rgba(255,255,255,.16); }
.hero-actions button:active { transform:scale(.98); }
.hero-actions .icon { width:16px; height:16px; }
.hero-actions span { font-size:12px; font-weight:680; }
.eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); }
.hero-card .eyebrow { color: rgba(255,255,255,.64); }

.metrics-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.metric-card {
  min-height: 124px;
  border-radius: calc(var(--radius-card) - 4px);
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.metric-card span, .metric-card small { color: var(--text-secondary); font-size: 12px; }
.metric-card strong { font-size: clamp(25px,3vw,35px); font-weight: 620; letter-spacing: -.035em; }

.service-grid, .product-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,270px),1fr)); gap: 14px; }
.service-card, .product-card {
  border-radius: var(--radius-card);
  padding: clamp(14px, 2.2vw, 20px);
  background: var(--surface);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-card);
}
.service-card h3, .product-card h3 { margin: 4px 0 16px; font-size: 22px; font-weight: 640; }
.record-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.status-chip { display: inline-flex; align-items: center; border-radius: var(--radius-pill); padding: 6px 10px; font-size: 11px; font-weight: 720; white-space: nowrap; }
.status-chip.success { background: rgba(38,164,96,.12); color: #167344; }
.status-chip.danger { background: rgba(201,52,61,.12); color: #B72933; }
.status-chip.warning { background: rgba(208,151,22,.14); color: #95650D; }
.status-chip.muted { background: var(--control); color: var(--text-secondary); }
html[data-appearance="dark"] .status-chip.success { color: #65D78F; }
html[data-appearance="dark"] .status-chip.danger { color: #FF7A82; }
html[data-appearance="dark"] .status-chip.warning { color: #EEC05B; }
.service-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.service-meta span { display: grid; gap: 4px; }
.service-meta small { color: var(--text-secondary); font-size: 11px; }
.service-meta strong { font-size: 13px; }
.usage > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.usage > div:first-child span { color: var(--text-secondary); }
.progress { height: 8px; border-radius: var(--radius-pill); background: var(--control); overflow: hidden; margin-top: 9px; }
.progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 62%,var(--gold))); transition: width .3s ease; }
.soft-note { margin: 14px 0 0; color: var(--text-secondary); font-size: 12px; line-height: 1.7; }

.record-list { display: grid; gap: 8px; }
.record-cell {
  width: 100%;
  min-height: 68px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--control) 66%, transparent);
  border-radius: max(18px, calc(var(--radius-card) - 8px));
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: start;
  color: inherit;
  cursor: pointer;
}
.record-cell.static { cursor: default; }
.record-cell:not(.static):hover { background: var(--control); }
.record-cell.selected { background: color-mix(in srgb,var(--accent) 11%,var(--control)); border-color: color-mix(in srgb,var(--accent) 24%,transparent); }
.record-main { min-width: 0; flex: 1; display: grid; gap: 5px; }
.record-main strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.record-main > span { color: var(--text-secondary); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chevron { font-size: 24px; color: var(--text-tertiary); line-height: 1; }

.wallet-hero {
  border-radius: calc(var(--radius-card) + 4px);
  padding: 30px;
  background: linear-gradient(145deg,#122A40,var(--accent));
  color: #fff;
  display: grid;
  gap: 7px;
  box-shadow: 0 20px 55px rgba(13,34,56,.17), inset 0 1px 0 rgba(255,255,255,.12);
}
.wallet-hero > span, .wallet-hero small { opacity: .67; }
.wallet-hero strong { font-size: clamp(35px,6vw,60px); font-weight: 590; letter-spacing: -.045em; }
.subsection { margin-top: 20px; }
.subsection-title h3 { font-size: 17px; margin-bottom: 10px; }
.plan-list { display: grid; gap: 8px; }
.plan-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--separator); }

.profile-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 2px 22px;
}
.avatar {
  width: 66px;
  height: 66px;
  flex: 0 0 66px;
  border-radius: 50%;
  background: linear-gradient(145deg,var(--navy),var(--accent));
  color: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  font-family: var(--display-font);
  font-size: 28px;
  box-shadow: 0 12px 30px color-mix(in srgb,var(--accent) 22%,transparent), inset 0 1px 0 rgba(255,255,255,.22);
}
.avatar-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:var(--surface-solid); }
.avatar-photo span { position:relative; z-index:0; }
.profile-info-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; overflow:hidden; border:1px solid var(--separator); border-radius:24px; background:var(--separator); }
.profile-info-grid > div { min-width:0; padding:14px 16px; background:var(--surface-solid); }
.profile-info-grid dt { margin:0 0 5px; color:var(--text-secondary); font-size:11px; }
.profile-info-grid dd { margin:0; overflow-wrap:anywhere; font-size:14px; font-weight:650; }
.profile-card h3 { margin-bottom: 4px; font-size: 25px; }
.profile-card p { margin: 0; color: var(--text-secondary); }
.settings-group {
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid var(--separator);
  background: color-mix(in srgb,var(--surface) 90%,transparent);
  margin-top: 14px;
}
.settings-row {
  width: 100%;
  min-height: 58px;
  padding: 10px 15px;
  background: transparent;
  color: var(--text);
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto 18px;
  align-items: center;
  gap: 10px;
  text-align: start;
  border-bottom: 1px solid var(--separator);
}
.settings-row:last-child { border-bottom: 0; }
.settings-row:hover { background: var(--control); }
.settings-inline-picker { padding: 11px 14px 14px; border-bottom: 1px solid var(--separator); background: color-mix(in srgb,var(--control) 58%,transparent); }
.settings-inline-picker[hidden] { display: none; }
.settings-inline-picker > span { display:block; margin:0 0 9px 2px; color:var(--text-secondary); font-size:11px; }
.profile-appearance-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:4px; border-radius:var(--radius-pill); background:var(--control); }
.profile-appearance-choice { min-height:42px; border:0; border-radius:var(--radius-pill); background:transparent; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; font-weight:650; }
.profile-appearance-choice .icon { width:17px; height:17px; }
.profile-appearance-choice:hover { background:var(--control-hover); color:var(--text); }
.profile-appearance-choice.active { background:var(--surface-solid); color:var(--text); box-shadow:var(--shadow-control), inset 0 1px 0 rgba(255,255,255,.35); }
.profile-language-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:8px; }
.profile-language-choice { min-height:52px; border:1px solid var(--separator); border-radius:20px; background:var(--surface-solid); color:var(--text); display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; box-shadow:var(--shadow-control); }
.profile-language-choice > span { min-width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--control); color:var(--text-secondary); font-size:11px; font-weight:800; }
.profile-language-choice > strong { font-family:var(--display-font); font-size:15px; }
.profile-language-choice:hover { background:var(--control-hover); }
.profile-language-choice.active { border-color:color-mix(in srgb,var(--accent) 34%,var(--separator)); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent),var(--shadow-control); }
.settings-row-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--accent); }
.settings-row-icon.language { background: #5B5BD6; }
.settings-row-icon.logout { background: #C9343D; }
.settings-row-title { display: grid; gap: 2px; }
.settings-row-title strong { font-size: 14px; }
.settings-row-title small { font-size: 11px; color: var(--text-secondary); }
.settings-row-value { color: var(--text-secondary); font-size: 12px; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 12px; margin-bottom: 14px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field[hidden] { display: none; }
.field.wide { grid-column: 1/-1; }
.field span { font-size: 13px; line-height: 1.55; font-weight: 600; color: var(--text-secondary); }
.field input, .field select, .field textarea, .search-bar input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  border: 1px solid var(--separator);
  outline: 0;
  background: color-mix(in srgb, var(--control) 74%, var(--glass-strong) 26%);
  border-radius: var(--radius-control);
  padding: 12px 14px;
  line-height: 1.5;
  transition: border-color min(var(--motion-duration,220ms),200ms) ease, background-color min(var(--motion-duration,220ms),200ms) ease;
}
.field textarea { min-height: 112px; resize: vertical; }
.field :is(input,select,textarea)::placeholder, .search-bar input::placeholder { color: var(--text-tertiary); opacity: 1; }
.field :is(input,select,textarea):focus, .search-bar input:focus { border-color: color-mix(in srgb,var(--accent) 60%,var(--separator)); }
.field:focus-within > span { color: var(--text); }
.field :is(input,select,textarea)[aria-invalid="true"] { border-color: #C9343D; }
.field :is(input,select,textarea):disabled { opacity: .6; cursor: not-allowed; }
.field :is(input:not([type="checkbox"]):not([type="radio"]),textarea):read-only { border-style: dashed; }
.field input[type="color"] { height: 48px; padding: 5px; }
.field input[type="range"] { padding: 0; border: 0; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 15px; background: var(--control); border-radius: 20px; }
.toggle-row input { appearance: none; width: 48px; height: 28px; border-radius: var(--radius-pill); background: rgba(118,118,128,.25); position: relative; cursor: pointer; transition: .2s; }
.toggle-row input:after { content:""; position:absolute; width:22px; height:22px; border-radius:50%; background:#fff; top:3px; left:3px; box-shadow:0 2px 6px rgba(0,0,0,.18); transition:.2s; }
.toggle-row input:checked { background: var(--accent); }
.toggle-row input:checked:after { transform: translateX(20px); }
html[dir="rtl"] .toggle-row input:after { left:auto; right:3px; }
html[dir="rtl"] .toggle-row input:checked:after { transform: translateX(-20px); }
/* Shared feedback uses one layout in customer, agent, and admin views. */
.button-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.button-row > :is(button,a) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.form-help { color: var(--text-secondary); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.action-result { margin-top: 12px; min-width: 0; }
.notice {
  padding: 13px 15px;
  border: 1px solid var(--separator);
  border-inline-start: 3px solid var(--accent);
  border-radius: max(16px, calc(var(--radius-control) + 2px));
  background: var(--control);
  color: var(--text);
  font-size: 13px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.notice-success { background: rgba(38,164,96,.11); border-inline-start-color: #26A460; color: #176E45; }
.notice-error, .notice-danger { background: rgba(201,52,61,.11); border-inline-start-color: #C9343D; color: #A82932; }
.notice-warn, .notice-warning { background: rgba(208,151,22,.12); border-inline-start-color: #D09716; color: #8A610F; }
html[data-appearance="dark"] .notice-success,
html[data-appearance="system"][data-resolved-appearance="dark"] .notice-success,
html[data-experience="cinematic"] .notice-success { color:#65D78F; }
html[data-appearance="dark"] :is(.notice-error,.notice-danger),
html[data-appearance="system"][data-resolved-appearance="dark"] :is(.notice-error,.notice-danger),
html[data-experience="cinematic"] :is(.notice-error,.notice-danger) { color:#FF858C; }
html[data-appearance="dark"] :is(.notice-warn,.notice-warning),
html[data-appearance="system"][data-resolved-appearance="dark"] :is(.notice-warn,.notice-warning),
html[data-experience="cinematic"] :is(.notice-warn,.notice-warning) { color:#EEC05B; }
.empty-state { min-height: 160px; padding: 20px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-secondary); text-align: center; overflow-wrap: anywhere; }
.empty-orb { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,transparent),rgba(148,163,184,.14)); box-shadow: inset 0 0 0 1px var(--separator); }
.empty-state p { margin: 12px 0 0; line-height: 1.7; max-width: 40ch; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 8px; margin: 0; }
.detail-grid > div { padding: 13px; border-radius: 19px; background: var(--control); }
.detail-grid dt { font-size: 11px; color: var(--text-secondary); margin-bottom: 5px; }
.detail-grid dd { margin: 0; font-size: 13px; font-weight: 650; overflow-wrap: anywhere; }
.selection-summary { grid-column: 1/-1; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg,var(--navy),var(--accent)); color:#fff; border-radius:24px; padding:16px; }
.selection-summary span { opacity:.7; }
.selection-summary strong { font-size:22px; }

/* Admin: macOS/iPadOS-inspired professional sidebar. */
.admin-layout { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 18px; align-items: start; }
.admin-sidebar {
  position: sticky;
  top: 92px;
  border-radius: var(--radius-card);
  padding: 12px;
  max-height: calc(100dvh - 112px);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  scrollbar-color: color-mix(in srgb,var(--text-secondary) 26%,transparent) transparent;
  overscroll-behavior: contain;
}
.admin-sidebar::-webkit-scrollbar { width: 5px; }
.admin-sidebar::-webkit-scrollbar-thumb { background: color-mix(in srgb,var(--text-secondary) 28%,transparent); border-radius: 99px; }
.admin-sidebar-title { padding: 10px 10px 16px; }
.admin-sidebar-title h2 { font-size: 23px; margin: 4px 0 0; }
.admin-nav-group { display: grid; gap: 3px; margin-bottom: 14px; }
.admin-nav-group > span { font-size: 10px; color: var(--text-secondary); font-weight: 790; letter-spacing: .08em; padding: 4px 10px 6px; }
.admin-nav-item { display:flex; align-items:center; gap:9px; min-height: 44px; background: transparent; border-radius: var(--radius-pill); padding: 9px 11px; text-align: start; color: var(--text-secondary); }
.admin-nav-item:hover { background: var(--control); color: var(--text); }
.admin-nav-item.active { color: var(--text); background: color-mix(in srgb,var(--accent) 12%,var(--glass-strong)); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 15%,transparent); }
.admin-nav-item .icon { width:18px; height:18px; flex:0 0 18px; }
.admin-more-toggle, .admin-more-sheet, .admin-more-backdrop { display:none; }
.admin-more-backdrop { position:fixed; inset:0; z-index:108; background:rgba(0,0,0,.22); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.admin-more-backdrop[hidden], .admin-more-sheet[hidden] { display:none !important; }
.search-panel { border-radius: 28px; padding: 11px; }
.search-panel-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:4px 7px 10px; }
.search-panel-heading strong { font-family:var(--display-font); font-size:18px; letter-spacing:-.02em; }
.search-panel-heading span { color:var(--text-secondary); font-size:11px; text-align:end; }
.search-bar { display: flex; align-items: center; gap: 8px; }
.search-bar > .icon { color: var(--text-secondary); margin-inline-start: 5px; flex: 0 0 auto; }
.search-bar input { border: 0; background: transparent; padding: 10px 6px; }
.search-field { padding: 6px; border: 1px solid color-mix(in srgb,var(--text-secondary) 18%,transparent); border-radius: 20px; background: color-mix(in srgb,var(--control) 88%,transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.search-field:focus-within { border-color: color-mix(in srgb,var(--accent) 48%,transparent); box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent); }
.search-panel #admin-search-result:not(:empty) { margin-top: 10px; }

/* Motion */
.fade { animation: fade .22s ease; }
.slide { animation: slide .24s ease; }
.scale { animation: scale .20s ease; }
.spring { animation: spring .36s cubic-bezier(.2,1.35,.4,1); }
.blur-reveal { animation: blurReveal .28s ease; }
.card-reveal { animation: cardReveal .30s ease; }
.page-transition { animation: pageTransition .24s ease; }
.scroll-reveal { animation: scrollReveal .30s ease; }
.skeleton { background: linear-gradient(90deg,var(--control),color-mix(in srgb,var(--control) 50%,var(--text-tertiary) 10%),var(--control)); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.shimmer { position:relative; overflow:hidden; }
@keyframes fade { from{opacity:0} to{opacity:1} }
@keyframes slide { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes scale { from{opacity:0;transform:scale(.985)} to{opacity:1;transform:scale(1)} }
@keyframes spring { from{opacity:0;transform:scale(.965)} to{opacity:1;transform:scale(1)} }
@keyframes blurReveal { from{opacity:0;filter:blur(7px)} to{opacity:1;filter:none} }
@keyframes cardReveal { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes pageTransition { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }
@keyframes scrollReveal { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
@keyframes shimmer { to{background-position:-200% 0} }

html[data-density="compact"] .content-card { padding: 17px; }
html[data-surface="solid"] .liquid-surface { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface-solid); }
html[data-motion="none"] *, html[data-motion="reduced"] * { animation:none !important; transition:none !important; }
html[data-motion="slide"] .content-card { animation:slide .24s ease; }
html[data-motion="scale"] .content-card { animation:scale .2s ease; }
html[data-motion="spring"] .content-card { animation:spring .36s cubic-bezier(.2,1.35,.4,1); }
html[data-motion="fade"] .content-card { animation:fade .22s ease; }

.mobile-more-toggle, .mobile-more-sheet, .mobile-more-backdrop { display: none; }
/* The fallback More link must work on wide Classic screens as well. */
/* Use the existing sheet on desktop when Overview is not available. */
.customer-nav .required-customer-more { display: grid; }
@media (min-width: 1161px) {
  .mobile-more-backdrop.required-customer-more-backdrop { display: block; }
  .mobile-more-sheet.required-customer-more-sheet {
    display: block;
    position: fixed;
    z-index: 109;
    right: max(16px, var(--safe-right));
    bottom: 24px;
    width: min(390px, calc(100vw - 32px));
    max-height: 72dvh;
    overflow-y: auto;
    padding: 16px;
    border-radius: 25px;
  }
}
.mobile-more-backdrop { position:fixed; inset:0; z-index:108; background:rgba(0,0,0,.22); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.mobile-more-backdrop[hidden], .mobile-more-sheet[hidden] { display:none !important; }
.sheet-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 12px; }
.sheet-heading strong { font-family:var(--display-font); font-size:21px; }
.sheet-handle { width:38px; height:5px; border-radius:99px; background:var(--text-tertiary); opacity:.38; margin:0 auto 12px; }
.sheet-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.sheet-item { min-height:66px; border:1px solid var(--separator); border-radius:22px; background:color-mix(in srgb,var(--surface-solid) 72%,transparent); color:var(--text); display:flex; align-items:center; gap:10px; padding:12px 14px; text-align:start; cursor:pointer; }
.sheet-item:hover, .sheet-item.active { background:var(--control-hover); border-color:color-mix(in srgb,var(--accent) 28%,var(--separator)); }
.sheet-item.active { color:var(--accent); }
.sheet-item .icon { width:20px; height:20px; }
.sheet-item span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:680; }

/* Tablet customer navigation. Admin keeps its pinned sidebar on Mac/iPad widths. */
@media (max-width: 1160px) {
  .app-bar { grid-template-columns: auto 1fr auto; }
  .app-bar.single-surface { grid-template-columns:auto minmax(0,1fr); }
  .customer-layout { grid-template-columns: minmax(0,1fr); }
  .customer-nav {
    position: sticky;
    top: 88px;
    z-index: 55;
    max-height: none;
    display: flex;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius-pill);
    padding: 7px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .customer-nav::-webkit-scrollbar { height:4px; }
  .customer-nav::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--text-secondary) 24%,transparent); border-radius:99px; }
  .nav-pill { width:auto; flex:0 0 auto; min-width:max-content; border-radius:var(--radius-pill); padding:10px 13px; scroll-snap-align:center; }
}

@media (max-width: 900px) and (min-width: 761px) {
  .admin-layout { grid-template-columns: 214px minmax(0,1fr); gap:12px; }
  .admin-sidebar { top:88px; padding:9px; }
  .admin-nav-item { padding:8px 9px; font-size:12px; }
  .admin-sidebar-title h2 { font-size:20px; }
}

@media (max-width: 820px) {
  .app-bar { grid-template-columns: auto 1fr; border-radius: 30px; }
  .app-bar.single-surface { grid-template-columns:auto minmax(0,1fr); }
  .surface-switch { grid-column: 1/-1; grid-row: 2; width: 100%; justify-content: flex-start; }
  .app-controls { justify-self: end; }
  .metrics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* iPhone-style bottom dock. */
@media (max-width: 700px) {
  .app-shell { padding: 7px 7px calc(102px + var(--safe-bottom)); }
  .app-bar { top: 5px; padding: 7px; }
  .brand-wordmark { font-size: 12px; padding-inline: 8px; }
  .brand-wordmark small { display:none; }
  .app-controls { gap:4px; }
  .circle-button { width:39px; height:39px; }
  .app-controls .pill-button { display:none; }
  .segmented-button { min-height:38px; padding:7px 11px; }
  .segmented-button span { font-size:12px; }
  .surface { margin-top: 12px; }
  .customer-nav {
    position: fixed;
    z-index: 95;
    left: 8px;
    right: 8px;
    bottom: calc(8px + var(--safe-bottom));
    top: auto;
    width: auto;
    padding: 6px;
    border-radius: 30px;
    display: grid;
    grid-template-columns: repeat(var(--mobile-nav-count,5),minmax(0,1fr));
    gap: 3px;
    overflow: visible;
    box-shadow: 0 18px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .nav-pill {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 6px 4px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    border-radius: 22px;
    font-size: 10px;
  }
  .nav-pill.mobile-secondary { display:none; }
  .nav-pill.mobile-more-toggle { display:grid; }
  .nav-pill .icon { width:20px; height:20px; }
  .nav-pill span { width:100%; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
  .mobile-more-backdrop { display:block; }
  .mobile-more-sheet { display:block; position:fixed; z-index:109; left:8px; right:8px; bottom:calc(8px + var(--safe-bottom)); max-height:min(72dvh,560px); overflow-y:auto; padding:11px 12px 14px; border-radius:32px; overscroll-behavior:contain; }
  .content-card { padding: 17px; border-radius: 27px; }
  .hero-card { min-height: 190px; border-radius: 30px; padding: 25px 21px; }
  .hero-card h1 { font-size: clamp(31px,10vw,43px); }
  .metric-card { min-height: 108px; border-radius: 22px; padding:15px; }
  .service-grid, .product-grid { grid-template-columns:1fr; }
  .wallet-hero { border-radius:28px; padding:24px 20px; }
  .record-cell { border-radius:19px; }
  .form-grid { grid-template-columns:1fr; }
  .search-bar { flex-wrap:wrap; }
  .search-bar .primary-button { width:100%; }
  .admin-sidebar { border-radius:var(--radius-pill); }
  .section-heading h2 { font-size:22px; }
}

@media (max-width: 820px) {
  .admin-layout { grid-template-columns:minmax(0,1fr); }
  .admin-layout > .content-stack { min-width:0; }
  .admin-sidebar {
    position:fixed; z-index:95; left:8px; right:8px; bottom:calc(8px + var(--safe-bottom)); top:auto; width:auto;
    max-height:none; overflow:visible; padding:6px; border-radius:30px; display:grid; grid-template-columns:repeat(var(--mobile-nav-count,5),minmax(0,1fr)); gap:3px;
    box-shadow:0 18px 50px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .admin-sidebar-title { display:none; }
  .admin-nav-group { display:contents; margin:0; }
  .admin-nav-group > span { display:none; }
  .admin-nav-item { width:100%; min-width:0; min-height:52px; padding:6px 4px; display:grid; justify-items:center; align-content:center; gap:3px; border-radius:22px; font-size:10px; text-align:center; white-space:normal; }
  .admin-nav-item .icon { width:20px; height:20px; }
  .admin-nav-item > span { width:100%; max-width:74px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; }
  .admin-nav-item.admin-mobile-secondary { display:none; }
  .admin-more-toggle { display:grid; }
  .admin-more-backdrop { display:block; }
  .admin-more-sheet { display:block; position:fixed; z-index:109; left:8px; right:8px; bottom:calc(8px + var(--safe-bottom)); max-height:min(72dvh,560px); overflow-y:auto; padding:11px 12px 14px; border-radius:32px; overscroll-behavior:contain; }
  .app-shell { padding-bottom:calc(102px + var(--safe-bottom)); }
}

@media (max-width: 430px) {
  .profile-info-grid { grid-template-columns:1fr; }
  .profile-appearance-choice { min-height:40px; gap:4px; font-size:11px; }
  .profile-appearance-choice .icon { width:15px; height:15px; }
  .metrics-grid { gap:8px; }
  .metric-card strong { font-size:27px; }
  .app-controls #refresh { display:none; }
  .settings-row { grid-template-columns:34px minmax(0,1fr) auto 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition:none !important; }
}
@media (prefers-contrast: more) {
  :root { --separator: rgba(0,0,0,.32); }
  html[data-appearance="dark"] { --separator: rgba(255,255,255,.28); }
  .liquid-surface, .content-card, .record-cell { border-width:2px; }
}
@media (prefers-reduced-transparency: reduce) {
  .liquid-surface { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface-solid); }
}

html[dir="rtl"] .chevron { transform:scaleX(-1); }

/* Data inspection and paging share the same accessible light/dark surfaces. */
.record-details { padding: .75rem; margin-block: .35rem; border: 1px solid var(--border,rgba(128,128,128,.2)); border-radius: 14px; overflow-wrap: anywhere; min-width: 0; }
.record-details summary { cursor: pointer; font-weight: 600; }
.record-details .detail-grid { margin-block: .75rem; }
.pagination { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; align-items: center; margin-block: 1rem; }
.detail-grid dd { overflow-wrap: anywhere; min-width: 0; }

/* Purpose-built CRM and Asset Management surfaces. */
.portfolio-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-block:16px}
.portfolio-toolbar .field{flex:1 1 170px;min-width:0}
.portfolio-toolbar button{flex:0 0 auto;min-height:44px}
.portfolio-table-wrap{max-width:100%;overflow:auto;border:1px solid var(--separator);border-radius:18px;scrollbar-width:thin}
.portfolio-table{width:100%;border-collapse:collapse;text-align:start;font-size:14px;font-variant-numeric:tabular-nums}
.portfolio-table th{font-size:12px;color:var(--text-secondary);font-weight:600;background:var(--control);white-space:nowrap}
.portfolio-table th,.portfolio-table td{padding:14px 12px;text-align:start;border-bottom:1px solid var(--separator);vertical-align:middle}
.portfolio-table tr:last-child td{border-bottom:0}
.portfolio-table td{min-width:90px;white-space:nowrap}
.portfolio-table td:first-child{min-width:44px}
.table-link{border:0;background:none;color:var(--accent);cursor:pointer;padding:8px 0;font:inherit;font-weight:650;text-align:start;min-height:44px}
.table-meta{display:block;color:var(--text-secondary);font-size:12px}
.portfolio-table input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.comparison-grid>div{padding:18px;border:1px solid var(--separator);border-radius:22px}
.comparison-grid h3{font-size:14px;margin-block:0 16px;font-variant-numeric:tabular-nums}
.crm-chart{display:flex;gap:8px;overflow:auto;padding:16px 4px 8px;align-items:end;min-height:175px}
.crm-day{border:0;border-radius:12px;background:none;color:var(--text);min-width:35px;flex:1;display:grid;gap:6px;text-align:center;padding:8px 4px;cursor:pointer}
.crm-day.selected{background:color-mix(in srgb,var(--accent) 16%,transparent);outline:2px solid var(--accent)}
.crm-bar-track{height:95px;display:flex;align-items:end;background:var(--control);border-radius:7px;overflow:hidden}
.crm-bar-track>span{display:block;width:100%;background:var(--accent);border-radius:7px;min-height:2px}
.crm-day small{color:var(--text-secondary)}
.workspace-tabs{display:flex;gap:8px;overflow:auto;margin-block:16px 24px;padding:6px;background:var(--control);border-radius:18px}
.workspace-tabs button{white-space:nowrap;background:none;border:0;border-radius:13px;padding:12px 16px;color:var(--text-secondary);font:inherit;cursor:pointer;min-height:44px}
.workspace-tabs button.active{background:var(--surface);color:var(--text);box-shadow:0 3px 14px #0000000b}
.portfolio-units{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px;margin-block:20px}
.portfolio-unit{padding:20px;border-radius:24px}.portfolio-unit h3{margin-block:0 16px}
.workspace-tool{padding:16px 0;border-bottom:1px solid var(--separator)}
.workspace-tool>summary{cursor:pointer;font-weight:650;padding-block:10px;min-height:44px}
.workspace-tool>.form-grid,.workspace-tool>.field{margin-block:14px}
.customer-360-heading{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-block:12px 20px}
.crm-timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.crm-timeline li{display:grid;grid-template-columns:minmax(120px,.4fr) 1fr;gap:8px 20px;border-inline-start:2px solid color-mix(in srgb,var(--accent) 16%,transparent);padding:16px}
.crm-timeline time,.crm-timeline small{color:var(--text-secondary);font-size:12px}.crm-timeline small{grid-column:2}
.crm-note{border-radius:15px;background:var(--control);padding:14px;margin-block:10px}.crm-note p{white-space:pre-wrap}.crm-note small{color:var(--text-secondary)}
.allocation-row{min-width:0;padding:16px;border:1px solid var(--separator);border-radius:20px;margin-block:14px}.allocation-row legend{font-size:13px;color:var(--text-secondary);padding-inline:6px}
.text-button{background:none;border:0;color:var(--accent);font:inherit;min-height:44px;cursor:pointer}
@media(max-width:600px){.comparison-grid{grid-template-columns:1fr}.portfolio-toolbar .field{flex-basis:130px}.portfolio-table th,.portfolio-table td{padding:12px 10px}.workspace-tabs button{font-size:13px;padding:10px 12px}.crm-timeline li{grid-template-columns:1fr}.crm-timeline small{grid-column:1}.customer-360-heading{flex-wrap:wrap}}

/* Mobile viewport containment: wide CRM/finance data must not expand the app. */
html, body, #app { width:100%; max-width:100%; }
.app-shell, .surface, .admin-layout, .customer-layout,
.content-stack, .content-card, .search-panel, .search-bar,
#admin-view, #admin-detail, #admin-search-result,
#asset-content, .workspace-tool, .record-list,
.comparison-grid, .metrics-grid, .portfolio-units,
.form-grid, .detail-grid, .portfolio-table-wrap {
  min-width:0;
  max-width:100%;
}
.admin-layout, .customer-layout { width:100%; }
.admin-layout > .content-stack, .customer-layout > .content-stack,
.content-stack > *, .content-card > *, .comparison-grid > *,
.metrics-grid > *, .portfolio-units > *, .form-grid > *,
.detail-grid > *, .section-heading > * { min-width:0; }
.content-card, .search-panel, .workspace-tool { overflow-wrap:anywhere; }
.search-panel-heading { min-width:0; flex-wrap:wrap; }
.search-panel-heading > span { min-width:0; max-width:100%; overflow-wrap:anywhere; }
.search-field { min-width:0; width:100%; flex-wrap:wrap; }
.search-field input {
  flex:1 1 150px;
  width:0;
  min-width:0;
  max-width:100%;
}
.search-field > button { flex:0 0 auto; max-width:100%; }
.portfolio-table-wrap {
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.portfolio-table { min-width:max-content; }
.workspace-tabs, .crm-chart { min-width:0; max-width:100%; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.section-heading h2, .section-heading p { overflow-wrap:anywhere; }
@media (max-width:820px) {
  .admin-layout, .customer-layout { grid-template-columns:minmax(0,1fr); }
  .admin-sidebar, .customer-nav { max-width:calc(100% - 16px); }
  .content-card { width:100%; }
}
@media (max-width:700px) {
  .search-field > button { flex-basis:100%; width:100%; }
  .search-field input { flex-basis:calc(100% - 40px); }
  .form-grid { grid-template-columns:minmax(0,1fr); }
  .field :is(input,select,textarea), .search-bar input { font-size: 16px; }
}

/* My Account: transient source warnings and inline payment disclosures. */
.transient-warning {transition:opacity .3s ease,transform .3s ease;}
.transient-warning.notice-fading {opacity:0;transform:translateY(-8px);}
.payment-item {padding:0;overflow:hidden;}
.payment-item > summary {display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;gap:14px;}
.payment-item > summary::-webkit-details-marker {display:none;}
.payment-item .detail-grid {padding:12px 18px 18px;}
.payment-item[open] > summary .chevron {transform:rotate(90deg);}
.referral-link {display:flex;align-items:center;gap:10px;flex-wrap:wrap;overflow-wrap:anywhere;margin:12px 0;}
.referral-link a {min-width:0;flex:1 1 200px;overflow-wrap:anywhere;}
.referral-link button {border:1px solid var(--separator);border-radius:12px;padding:10px;background:var(--control);color:var(--text);cursor:pointer;}

/* v14.74 Admin layout: keep long Telegram identities inside the card. */
.admin-layout,.admin-layout .content-stack,.admin-layout .content-card,.admin-layout .record-list,
.admin-layout .record-details,.crm-inline-detail,.inline-admin-details {min-width:0;max-width:100%;}
.admin-layout .record-cell,.admin-layout .detail-grid dd,.admin-layout .table-meta {overflow-wrap:anywhere;word-break:break-word;}
.admin-layout .table-wrap {max-width:100%;overflow-x:auto;}
.inline-admin-record {margin-bottom:8px;overflow:hidden;}
.inline-admin-record>summary {list-style:none;cursor:pointer;}
.inline-admin-record>summary::-webkit-details-marker {display:none;}
.inline-admin-details {padding:12px 16px 16px;}
.workspace-switch {display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 12px;}
.workspace-tab {border:1px solid var(--line, #59656b);border-radius:12px;padding:8px 11px;background:transparent;color:inherit;cursor:pointer;}
.workspace-tab.active {border-color:var(--accent, #0f5b4f);font-weight:700;}
.crm-inline-detail>summary {cursor:pointer;overflow-wrap:anywhere;}
.crm-inline-body {padding:10px 0;max-width:min(100%,620px);}

.asset-pie-wrap {display:flex;gap:22px;align-items:center;flex-wrap:wrap;max-width:100%;padding:10px 0;}
.asset-pie {width:min(200px,65vw);aspect-ratio:1;flex-shrink:0;border-radius:50%;border:5px solid rgba(255,255,255,.12);}
.asset-pie-label {display:flex;gap:8px;align-items:center;overflow-wrap:anywhere;}
.pie-dot {width:9px;height:9px;border-radius:50%;flex-shrink:0;}

/* Admin in-row panels use the existing light and dark glass surfaces. */
.admin-layout .crm-inline-detail,
.admin-layout .inline-admin-record {
  border: 1px solid var(--separator);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--glass-strong) 75%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}
.admin-layout .crm-inline-detail > summary,
.admin-layout .inline-admin-record > summary {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: inherit;
  list-style: none;
}
.admin-layout .crm-inline-detail > summary::-webkit-details-marker { display:none; }
.admin-layout .crm-inline-detail[open],
.admin-layout .inline-admin-record[open] {
  background: color-mix(in srgb, var(--glass-strong) 92%, transparent);
  border-color: color-mix(in srgb, var(--accent) 24%, var(--separator));
}
.admin-layout .crm-inline-body,
.admin-layout .inline-admin-details {
  min-width:0;
  max-width:100%;
  padding:12px;
  overflow-x:auto;
}
.admin-layout .workspace-tab {
  min-height:38px;
  border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--glass-strong) 65%, transparent);
  box-shadow:inset 0 1px 0 var(--glass-edge);
  transition:background 160ms ease, border-color 160ms ease;
}
.admin-layout .workspace-tab.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--glass-strong));
}
@media (prefers-reduced-motion:reduce) {
  .admin-layout .workspace-tab {transition:none;}
}

/* BOLBOL FINANCE UX v4 — uses the existing Mini App Liquid Glass tokens. */
.finance-v4 {display:grid;gap:10px;min-width:0;font-family:var(--body-font);font-variant-numeric:tabular-nums;}
.finance-v4 h2,.finance-v4 h3,.finance-v4 strong,.finance-v4 b{font-family:var(--body-font);letter-spacing:normal}
.fv4-title,.fv4-heading,.fv4-row-money,.fv4-asset-row,.fv4-movement,.fv4-detail-head,.fv4-month,.fv4-dialog-title{display:flex;align-items:center;gap:12px}
.fv4-title{justify-content:space-between;padding:2px 3px 4px;flex-wrap:wrap}
.fv4-title h2{font-size:clamp(20px,2.1vw,27px);line-height:1.5;margin:0;font-weight:820}
.fv4-title span,.fv4-eyebrow,.fv4-detail-head small{font-size:12px;color:var(--text-secondary)}
.fv4-eyebrow{letter-spacing:.11em;font-weight:800;margin-bottom:2px;direction:ltr}
.fv4-button{min-height:40px;border-radius:14px;background:var(--control);border:1px solid var(--separator);padding:9px 16px;font-weight:750;cursor:pointer}
.fv4-button.primary{background:var(--accent);color:white;border-color:transparent;box-shadow:var(--shadow-control)}
.fv4-button:hover,.fv4-asset-row:hover,.fv4-legend:hover{background:var(--control-hover)}
.fv4-button.primary:hover{filter:brightness(1.08);background:var(--accent)}
.fv4-month{justify-content:space-between;gap:12px;background:var(--glass);padding:10px 12px;border:1px solid var(--glass-edge);border-radius:20px}
.fv4-month label{display:flex;align-items:center;gap:9px;color:var(--text-secondary);font-size:12px}
.fv4-month input{min-width:135px;max-width:165px;padding:7px 9px;border-radius:11px;border:1px solid var(--separator);background:var(--surface-solid);color:var(--text)}
.fv4-card{padding:16px;border-radius:25px;border:1px solid var(--glass-edge);background:linear-gradient(145deg,var(--glass-strong),var(--glass));box-shadow:var(--shadow-card);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%)}
.fv4-heading{min-height:32px;justify-content:space-between;gap:7px;margin-bottom:10px}
.fv4-heading h3{font-size:15px;font-weight:790;line-height:1.5;margin:0;flex:1}
.fv4-fold{cursor:pointer;border:1px solid var(--separator);color:var(--text);width:30px;height:30px;border-radius:11px;background:var(--control);font-size:20px}
.fv4-switch{display:flex;border-radius:11px;background:var(--control);padding:3px;white-space:nowrap}
.fv4-switch button{cursor:pointer;border:0;background:none;color:var(--text-secondary);padding:7px 10px;border-radius:9px;font-size:11px;font-weight:780}
.fv4-switch button.active{color:var(--text);background:var(--surface-solid);box-shadow:var(--shadow-control)}
.fv4-chart-body{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 1px 5px}
.fv4-donut{position:relative;width:176px;height:176px;flex:none}
.fv4-donut svg{width:100%;height:100%}
.fv4-segment{cursor:pointer;transition:stroke-width .15s}
.fv4-segment:hover,.fv4-segment:focus{stroke-width:24;outline:0;filter:brightness(1.1)}
.fv4-segment:focus-visible{outline:2px solid var(--accent)}
.fv4-center{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;flex-direction:column;pointer-events:none;gap:2px;text-align:center;direction:ltr}
.fv4-center strong{font-size:18px;color:var(--text);max-width:112px;overflow-wrap:anywhere}
.fv4-center small{font-size:11px;color:var(--text-secondary)}
.fv4-donut-items{display:grid;gap:4px;min-width:180px;max-width:100%;flex:1}
.fv4-legend{cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 7px;border:0;border-radius:12px;background:transparent;text-align:start;font-size:12px;min-width:0}
.fv4-legend span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv4-legend b{direction:ltr;font-weight:780}
.fv4-dot{width:10px;height:10px;border-radius:50%;flex:none}
.fv4-note,.fv4-footnote,.fv4-legal{font-size:12px;color:var(--text-secondary);line-height:1.85}
.fv4-note{padding:12px;background:var(--control);border-radius:13px;margin:7px 0}
.fv4-footnote{margin:10px 3px 0}
.fv4-legal{padding:0 7px}
.fv4-filters{display:flex;flex-wrap:wrap;gap:7px;max-width:100%;padding:0 1px 5px}
.fv4-filters button{cursor:pointer;flex:none;min-height:35px;padding:7px 13px;border:1px solid var(--separator);border-radius:100px;background:var(--glass);font-size:12px;font-weight:760}
.fv4-filters button.active{background:var(--accent);color:#fff;border-color:transparent}
.fv4-count{font-size:12px;color:var(--text-secondary)}
.fv4-list{display:grid;gap:1px}
.fv4-asset-row,.fv4-movement{width:100%;min-width:0;padding:12px 4px;border:0;border-bottom:1px solid var(--separator);background:transparent;text-align:start;color:var(--text)}
.fv4-asset-row{cursor:pointer}
.fv4-asset-row:last-child,.fv4-movement:last-child{border-bottom:0}
.fv4-row-main{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.fv4-row-main strong{font-size:13px;font-weight:790;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv4-row-main small,.fv4-row-money small{font-size:11px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fv4-row-money{flex-direction:column;align-items:flex-end;gap:4px;min-width:0;white-space:nowrap;direction:ltr}
.fv4-row-money b{font-size:13px}
.fv4-arrow{color:var(--text-tertiary);font-size:22px}
.fv4-coin{width:37px;height:37px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--navy);color:white;font-size:12px;font-weight:900;letter-spacing:-.04em}
.fv4-coin-usdt{background:#26a17b;font-size:22px}.fv4-coin-ton{background:#0088cc}.fv4-coin-bnb{background:#f3ba2f;color:#1d1e1f}.fv4-coin-gold{background:#af842a}.fv4-coin-nft{background:#7458a0}.fv4-coin-other{background:var(--control);color:var(--text)}
.fv4-back{margin-bottom:-4px}.fv4-detail-head h3{font-size:19px;margin:0}.fv4-detail-head{margin-bottom:12px}
.fv4-detail-head>div{display:grid;gap:2px}
.fv4-balance{display:grid;gap:6px;background:var(--control);padding:16px;border-radius:18px}
.fv4-balance small,.fv4-balance span{font-size:12px;color:var(--text-secondary)}
.fv4-balance strong{font-size:26px;line-height:1.5;overflow-wrap:anywhere}
.fv4-nft-meta{display:grid;gap:10px;padding:14px 4px 0;font-size:12px}
.fv4-nft-meta a{color:var(--accent);font-weight:760}
.fv4-flow{display:flex;align-items:center;justify-content:center;flex:none;width:29px;height:29px;border-radius:10px;background:#26a17b25;color:#14856f;font-size:17px;font-weight:900}
.fv4-flow.out{background:#c7777220;color:#b65d55}
.fv4-action-bar{display:flex;justify-content:flex-start}
.fv4-overlay{position:fixed;inset:0;z-index:1100;background:rgba(5,13,22,.44);display:grid;place-items:center;padding:16px;backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px)}
.fv4-dialog-title{justify-content:space-between;font-size:16px;margin-bottom:16px}
.fv4-dialog-title .fv4-button{font-size:20px;line-height:1}
.fv4-op-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.fv4-op-grid .fv4-button{padding:19px 8px;min-height:74px;background:var(--control);border-radius:18px}
.finance-advanced{border:1px solid var(--separator);border-radius:20px;background:var(--glass);padding:10px 14px}
.finance-advanced>summary{cursor:pointer;font-size:12px;color:var(--text-secondary);font-weight:750;padding:6px 0}
.finance-advanced .surface{margin-top:10px}
@media(max-width:480px){.fv4-card{padding:13px}.fv4-month{flex-wrap:wrap}.fv4-chart-body{gap:4px}.fv4-donut{width:155px;height:155px}.fv4-donut-items{min-width:140px}.fv4-title h2{font-size:20px}.fv4-coin{width:33px;height:33px}.fv4-heading h3{font-size:13px}.fv4-switch button{padding:6px 8px}.fv4-asset-row{gap:8px}.fv4-row-money b{font-size:12px}}

.finance-v4 .fv4-coin svg{width:100%;height:100%;display:block;border-radius:50%}
/* Finance Phase 4: centered, scroll-safe operation editor. */
.fv4-operation-form{display:grid;gap:11px}
.fv4-field{display:grid;gap:5px;font-size:12px;color:var(--text-secondary);font-weight:720}
.fv4-field input,.fv4-field select,.fv4-field textarea{width:100%;min-width:0;border:1px solid var(--separator);border-radius:13px;padding:11px;background:var(--control);color:var(--text);font:inherit;font-weight:590}
.fv4-confirm-row{display:flex;align-items:center;gap:8px;font-size:12px}
.fv4-nft-fields{padding:9px 12px;border:1px solid var(--separator);border-radius:14px}
.fv4-nft-fields summary{font-size:12px;cursor:pointer;font-weight:760}
.fv4-nft-fields .fv4-field{margin-top:9px}
.fv4-review{display:grid;gap:12px;overflow-wrap:anywhere;font-size:12px}
.fv4-review h3{font-size:15px}
.fv4-review p{margin:0}
/* Telegram collectible metadata. Use the current glass UI tokens. */
.fv4-nft-info{display:grid;gap:12px;padding-top:10px}
.fv4-nft-image{display:block;width:min(210px,100%);aspect-ratio:1;border-radius:20px;object-fit:cover;margin-inline:auto;background:var(--control)}
.fv4-nft-image[hidden],.fv4-nft-fields[hidden]{display:none!important}
.fv4-nft-traits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fv4-nft-traits>div{border-radius:12px;background:var(--control);padding:9px 5px;display:flex;flex-direction:column;gap:3px;text-align:center;min-width:0}
.fv4-nft-traits small{font-size:10px;color:var(--text-secondary)}
.fv4-nft-traits b{font-size:12px;overflow-wrap:anywhere}
.fv4-nft-history{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid var(--separator);padding:9px 3px;font-size:12px}
.fv4-nft-history small{color:var(--text-secondary)}

.fv4-asset-row>.fv4-nft-image{width:39px;height:39px;flex:none;border-radius:12px;margin:0}

/* Finance phase 6: separate, read-only Core customer wallet portfolio. */
.core-wallet-panel{margin-bottom:14px}
.core-wallet-ring{width:174px;height:174px;flex:none;border-radius:50%;background:var(--core-wallet-pie);display:flex;align-items:center;justify-content:center;padding:19px;box-sizing:border-box}
.core-wallet-ring>span{width:100%;height:100%;border-radius:50%;background:var(--surface,white);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;font-size:12px;color:var(--text-secondary);gap:3px}
.core-wallet-ring strong{font-size:20px;color:var(--text);font-weight:800;direction:ltr}
.core-wallet-ring small{font-size:11px}
.core-wallet-search{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.core-wallet-search input{min-width:150px;flex:1;border:1px solid var(--separator);border-radius:12px;padding:10px;background:var(--control);color:var(--text)}
.core-wallet-search select{border:1px solid var(--separator);border-radius:12px;background:var(--control);color:var(--text);padding:9px}
.core-wallet-page{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:12px 0}
.core-wallet-page span{font-size:12px;color:var(--text-secondary)}
.core-wallet-chart .fv4-donut-items{min-width:220px}
@media(max-width:480px){.core-wallet-ring{width:148px;height:148px}.core-wallet-chart .fv4-donut-items{min-width:150px}}

/* Finance v15.08: one clean mobile workspace and legible wallet rows. */
.finance-v4-root{min-width:0;width:100%;max-width:100%;}
.core-wallet-panel .fv4-asset-row{gap:9px;flex-wrap:wrap;}
.core-wallet-panel .fv4-row-money{flex:0 1 auto;min-width:110px;text-align:end;white-space:normal;overflow-wrap:anywhere;}
.core-wallet-panel .fv4-row-money small{white-space:normal;text-overflow:clip;overflow-wrap:anywhere;}
.core-wallet-panel .fv4-row-main{flex:1 1 125px;}
.core-wallet-panel .core-wallet-search input{min-width:0;max-width:100%;}
.core-wallet-panel .core-wallet-page{flex-wrap:wrap;}
@media(max-width:390px){
  .core-wallet-panel .fv4-row-money{min-width:100px;}
  .core-wallet-panel .fv4-row-money b{font-size:12px;}
}

/* Finance charts v15.08: touch targets and localized, accessible wallet segments. */
.core-wallet-donut{width:174px;height:174px}
.core-wallet-chart .fv4-legend{width:100%;text-align:start;border:0;background:transparent;color:var(--text);cursor:pointer;border-radius:9px}
.core-wallet-chart .fv4-legend:focus-visible{outline:2px solid var(--accent)}
.core-wallet-chart .fv4-legend:hover{background:var(--control-hover)}
@media(max-width:480px){.core-wallet-donut{width:148px;height:148px}}

@media(max-width:480px){
  .core-wallet-panel .core-wallet-search{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .core-wallet-panel .core-wallet-search input#core-wallet-search{grid-column:1/-1;width:100%;min-width:0;box-sizing:border-box}
  .core-wallet-panel .core-wallet-search button{min-width:0}
  .core-wallet-panel #core-wallet-network{width:100%;max-width:none!important;box-sizing:border-box}
}

/* Finance UX v4 alignment: approved hero, select-to-reveal charts, and Persian type. */
.finance-v4,.finance-v4 h2,.finance-v4 h3,.finance-v4 strong,.finance-v4 b {font-family:var(--body-font);}
.fv4-sales-hero{padding:20px;border-radius:23px;background:linear-gradient(135deg,#175c50,#0d2d3d);border:1px solid var(--glass-edge);box-shadow:var(--shadow-card);display:grid;gap:8px;color:#f3fff9}
.fv4-sales-hero>span{font-size:12px;opacity:.85;font-weight:730}
.fv4-sales-hero>strong{font-size:clamp(24px,5.5vw,32px);line-height:1.5;overflow-wrap:anywhere}
.fv4-sales-hero>strong small{font-size:13px;font-weight:650;white-space:nowrap}
.fv4-sales-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;opacity:.85;font-size:12px}
.fv4-other-currency{font-size:11px;opacity:.86;border-top:1px solid #ffffff30;padding-top:7px}
.fv4-chart-content{display:grid;gap:8px;justify-items:center;min-width:0}
.fv4-unit-chart{width:100%;display:grid;justify-items:center;gap:8px}
.fv4-unit-title{font-size:12px;color:var(--text-secondary);font-weight:750}
.fv4-chart-single{display:grid;justify-items:center;gap:8px;width:100%;position:relative}
.fv4-chart-single .fv4-donut{width:175px;height:175px}
.fv4-selection-tip{font-size:12px;line-height:1.7;padding:8px 14px;max-width:100%;background:var(--control);border:1px solid var(--separator);border-radius:12px;font-weight:760;text-align:center;overflow-wrap:anywhere}
.fv4-selection-tip[hidden]{display:none!important}
.fv4-segment.active{stroke-width:24;filter:brightness(1.12)}
.fv4-gold-estimate[hidden]{display:none!important}
@media(max-width:380px){.fv4-sales-hero{padding:15px}.fv4-chart-single .fv4-donut{width:155px;height:155px}}

/* Finance document controls: compact Liquid Glass detail rows. */
.finance-v4 .fv4-title{padding:0 2px}
.finance-v4 .fv4-title h2{font-size:19px;line-height:1.35}
.finance-v4 .fv4-month{padding:8px 10px;border-radius:16px;gap:8px}
.finance-v4 .fv4-month label{flex:1;justify-content:space-between;min-width:0}
.finance-v4 .fv4-month input{max-width:132px;min-width:0;font-size:12px}
.finance-v4 .fv4-month .fv4-button{min-height:34px;padding:6px 11px}
.finance-v4 .fv4-card{border-radius:20px;padding:13px}
.finance-v4 .fv4-documents{display:grid;gap:8px}
.finance-v4 .fv4-document{background:var(--control);border:1px solid var(--separator);border-radius:16px;padding:12px;min-width:0;display:grid;gap:7px}
.finance-v4 .fv4-document-child{margin-inline-start:17px;border-inline-start:3px solid var(--accent)}
.finance-v4 .fv4-document-head{display:flex;gap:9px;justify-content:space-between;align-items:center;flex-wrap:wrap;font-size:13px}
.finance-v4 .fv4-document-head span{font-weight:700;font-variant-numeric:tabular-nums}
.finance-v4 .fv4-document-note,.finance-v4 .fv4-document>small{font-size:11px;color:var(--text-secondary);overflow-wrap:anywhere}
.finance-v4 .fv4-document-actions{display:flex;gap:8px;flex-wrap:wrap}
.finance-v4 .fv4-document-actions button{border:1px solid var(--separator);border-radius:10px;background:var(--glass-strong);color:var(--text);min-height:34px;padding:7px 12px;font-size:12px;cursor:pointer}
.finance-v4 .fv4-document-actions button.danger{color:#b34b48}
.finance-v4 .fv4-button.danger{background:#a63636;color:white;border:0}
.finance-v4 .fv4-document-voided{font-size:12px;color:var(--text-secondary)}
.finance-v4 .fv4-void-dialog{display:grid;gap:12px}
@media(max-width:390px){.finance-v4 .fv4-month{flex-wrap:wrap}.finance-v4 .fv4-month label{flex:1 1 100%}.finance-v4 .fv4-title h2{font-size:17px}}

/* Finance controls use the same surface tokens as the rest of the Mini App. */
.finance-v4 .fv4-section-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:15px}
.finance-v4 .fv4-section-tabs button{min-height:43px;border:1px solid var(--separator);border-radius:14px;background:var(--glass);color:var(--text);font:inherit;font-weight:750}
.finance-v4 .fv4-section-tabs button.active{background:var(--control-hover);border-color:var(--accent)}
.finance-v4 .fv4-period-row{display:flex;gap:10px;margin:9px 0 13px;flex-wrap:wrap}
.finance-v4 .fv4-period-row>.fv4-field{flex:1 1 140px}
.finance-v4 .fv4-legacy-sales .fv4-document-head{padding:8px 0;border-bottom:1px solid var(--separator)}
.finance-v4 .fv4-legacy-sales .fv4-document-head:last-of-type{border-bottom:0}

/* Financial filters fit mobile and desktop without nested navigation. */
.fv4-period-controls{padding:12px;border:1px solid var(--separator);border-radius:18px;background:var(--glass);margin-bottom:18px}
.fv4-period-controls .fv4-field{min-width:0}
.fv4-period-controls input,.fv4-period-controls select{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
.fv4-section-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:15px}
.fv4-section-tabs button{min-width:0;overflow-wrap:anywhere;font:inherit;min-height:43px;border:1px solid var(--separator);border-radius:14px;background:var(--glass);color:var(--text)}
.fv4-section-tabs button.active{border-color:var(--accent);background:var(--control-hover)}
@media(max-width:360px){.finance-v4 .fv4-section-tabs button{font-size:12px;padding:7px 3px}.fv4-period-controls .fv4-period-row>.fv4-field{flex-basis:100%}}

/* Telegram fullscreen: device and Telegram controls occupy separate safe regions. */
.app-shell {padding-top:calc(14px + var(--safe-top));padding-left:calc(clamp(12px,2.2vw,32px) + var(--safe-left));padding-right:calc(clamp(12px,2.2vw,32px) + var(--safe-right));padding-bottom:calc(46px + var(--safe-bottom));}
.app-bar {top:calc(10px + var(--safe-top));}
.fv4-overlay {padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));}
/* Finance modal: one safe-area and scroll definition replaces three layers. */
.fv4-dialog {
  width: min(420px,100%);
  max-height: calc(var(--tg-vh) - var(--safe-top) - var(--safe-bottom) - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--glass-edge);
  background: var(--surface-solid);
  color: var(--text);
  border-radius: 28px;
  padding: 18px;
  box-shadow: var(--shadow-float);
}
@supports(height:100dvh){:root{--tg-vh:100dvh;}}
@media(max-width:820px){
  .app-shell {padding-bottom:calc(102px + var(--safe-bottom));}
  /* Fixed docks follow the visual viewport directly. Do not add the
     100vh/stable-height difference: that value changes as Telegram scrolls. */
  .admin-sidebar,.admin-more-sheet {left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));bottom:calc(8px + var(--safe-bottom));}
  .admin-more-sheet {max-height:min(560px,calc(var(--tg-vh) - var(--safe-top) - var(--safe-bottom) - 32px));}
}
@media(max-width:700px){
  .app-shell {padding-top:calc(8px + var(--safe-top));padding-left:calc(10px + var(--safe-left));padding-right:calc(10px + var(--safe-right));}
  .app-bar {top:calc(8px + var(--safe-top));}
  .customer-nav,.mobile-more-sheet {left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));bottom:calc(8px + var(--safe-bottom));}
  .mobile-more-sheet {max-height:min(560px,calc(var(--tg-vh) - var(--safe-top) - var(--safe-bottom) - 32px));}
}

/* One edit command and an inline review for financial records. */
.fv4-pencil { margin-inline-start:auto; width:38px; min-height:38px; display:inline-flex; align-items:center; justify-content:center; gap:4px; border:1px solid var(--separator); border-radius:50%; background:var(--control); color:var(--text); cursor:pointer; }
.fv4-pencil svg { width:20px; height:20px; }
.fv4-review-grid > div { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--separator); }
.fv4-review-grid dt { color:var(--text-secondary); }.fv4-review-grid dd { margin:0; overflow-wrap:anywhere; text-align:end; }
.fv4-field[hidden],.fv4-nft-fields[hidden],.core-wallet-inline[hidden],.field[hidden] { display:none!important; }
.core-wallet-entry { border-bottom:1px solid var(--separator); }.core-wallet-inline { padding:8px; background:var(--control); border-radius:var(--radius-control); }
.core-wallet-entry .fv4-asset-row { width:100%; }.core-wallet-entry .chevron { display:inline-flex; transition:transform var(--motion-duration,220ms); }.core-wallet-entry [aria-expanded="true"] .chevron { transform:rotate(90deg); }
.theme-preview { padding:20px; border-radius:var(--radius-card); background:#edf0f2; color:#16202a; overflow:hidden; margin:14px 0; }
.theme-preview[data-scheme="dark"] { background:#080a0d; color:#f5f7f9; }
.theme-preview-card { padding:20px; border:1px solid #8884; border-radius:var(--preview-radius,28px); background:#fff9; }
.theme-preview[data-scheme="dark"] .theme-preview-card { background:#181c22; }
.theme-preview button { background:var(--preview-accent); color:white; border:0; padding:10px 18px; border-radius:14px; }
@keyframes bb-blur { from { filter:blur(6px); opacity:.25; } to { filter:blur(0); opacity:1; } }
@keyframes bb-pulse { 0% { opacity:.5; } 50% { opacity:.8; } 100% { opacity:1; } }
@keyframes bb-shimmer { from { filter:brightness(1.3); opacity:.65; } to { filter:brightness(1); opacity:1; } }
@keyframes bb-card { from { transform:translateY(12px) scale(.97); opacity:0; } to { transform:none; opacity:1; } }
@keyframes bb-page { from { transform:translateY(8px); opacity:0; } to { transform:none; opacity:1; } }
html[data-motion="fade"] :is(.content-card,.fv4-card,.fv4-dialog,.profile-card,.core-wallet-inline), .theme-preview[data-preview-motion="fade"] .theme-preview-card { animation:fade var(--motion-duration,220ms) ease both; }
html[data-motion="slide"] :is(.content-card,.fv4-card,.fv4-dialog,.profile-card,.core-wallet-inline), .theme-preview[data-preview-motion="slide"] .theme-preview-card { animation:slide var(--motion-duration,220ms) ease both; }
html[data-motion="scale"] :is(.content-card,.fv4-card,.fv4-dialog,.profile-card,.core-wallet-inline), .theme-preview[data-preview-motion="scale"] .theme-preview-card { animation:scale var(--motion-duration,220ms) ease both; }
html[data-motion="spring"] :is(.content-card,.fv4-card,.fv4-dialog,.profile-card,.core-wallet-inline), .theme-preview[data-preview-motion="spring"] .theme-preview-card { animation:spring var(--motion-duration,220ms) ease both; }
html[data-motion="blur-reveal"] :is(.content-card,.fv4-card,.fv4-dialog,.profile-card,.core-wallet-inline), .theme-preview[data-preview-motion="blur-reveal"] .theme-preview-card { animation:bb-blur var(--motion-duration,220ms) ease both; }
html[data-motion="skeleton"] :is(.content-card,.fv4-card,.fv4-dialog,.profile-card,.core-wallet-inline), .theme-preview[data-preview-motion="skeleton"] .theme-preview-card { animation:bb-pulse var(--motion-duration,220ms) ease both; }
html[data-motion="shimmer"] :is(.content-card,.fv4-card,.fv4-dialog,.profile-card,.core-wallet-inline), .theme-preview[data-preview-motion="shimmer"] .theme-preview-card { animation:bb-shimmer var(--motion-duration,220ms) ease both; }
html[data-motion="card-reveal"] :is(.content-card,.fv4-card,.fv4-dialog,.profile-card,.core-wallet-inline), .theme-preview[data-preview-motion="card-reveal"] .theme-preview-card { animation:bb-card var(--motion-duration,220ms) ease both; }
html[data-motion="page-transition"] :is(.surface,.fv4-dialog), .theme-preview[data-preview-motion="page-transition"] .theme-preview-card { animation:bb-page var(--motion-duration,220ms) ease both; }
html[data-motion="scroll-reveal"] :is(.content-card,.metric-card,.service-card,.product-card,.profile-card,.fv4-card,.fv4-document)[data-revealed="true"],
.theme-preview[data-preview-motion="scroll-reveal"] .theme-preview-card {
  animation:bb-phase4-reentry var(--motion-duration,220ms) cubic-bezier(.22,.75,.29,1) both;
}
@keyframes bb-phase4-reentry {
  from { opacity:.18; transform:translate3d(0,10px,0); }
  to { opacity:1; transform:translate3d(0,0,0); }
}
@media (prefers-reduced-motion:reduce) {
  html[data-motion="scroll-reveal"] [data-revealed="true"] {animation:none!important;transform:none!important;}
}
@media (prefers-reduced-motion:reduce) { .theme-preview-card,.fv4-card,.fv4-dialog,.core-wallet-inline,.surface { animation:none!important; transition:none!important; } }

.step-up-overlay{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:max(18px,var(--tg-content-safe-area-inset-top,0px)) 18px max(18px,var(--tg-safe-area-inset-bottom,0px));overflow:auto;}.step-up-dialog{width:min(100%,420px);padding:24px;background:var(--surface);border-radius:var(--radius-card);}.step-up-dialog input{direction:ltr;text-align:center;font-size:24px;letter-spacing:.18em;}

/* Operations ledger: approved v4 record cards and explicit posting result. */
.fv4-document-badge { padding:4px 9px; border:1px solid var(--separator); border-radius:999px; color:var(--text); font-size:11px; white-space:nowrap; }
.fv4-result-notice { padding:14px; border:1px solid var(--separator); border-radius:16px; background:var(--control); color:var(--text); font-size:13px; line-height:1.8; }
.fv4-form-step { margin:0 0 12px; color:var(--text-secondary); font-size:12px; }
.fv4-document-actions button { border:1px solid var(--separator); border-radius:12px; background:var(--control); color:var(--text); padding:8px 12px; cursor:pointer; }
.fv4-document-actions button.danger { color:var(--danger,#c77772); }

.fv4-history-action { margin:12px 0; }.fv4-history-action .fv4-button { width:100%; }
.fv4-document-quantity { margin:6px 0; font-weight:700; font-size:13px; }

/* Native Telegram viewport mode is authoritative; CSS works for compact,
   expanded and fullscreen without forcing any launch mode. */
@media (max-width:820px) {
  .customer-nav,.admin-sidebar { max-height: min(105px, 30dvh); }
  .mobile-more-sheet,.admin-more-sheet { max-height: min(560px, calc(var(--tg-vh) - var(--safe-top) - var(--safe-bottom) - 24px)); }
}
@media (max-width:700px) {
  .customer-nav { grid-auto-flow: row; }
  .app-shell { min-height: 100%; }
}
@media (hover:none) and (pointer:coarse) {
  /* Fixed page backgrounds on iOS WKWebView can repaint during sheet drags. */
  body { background-attachment: scroll; }
}

/* BolBol phase 2: financial status is readable and never determined by color alone. */
:root{--wallet-flow-credit:#168359;--wallet-flow-debit:#c24848;--wallet-flow-purchase:#795ac8;--wallet-flow-refund:#b67b24;--wallet-flow-neutral:var(--text-secondary)}
.wallet-flow-label.flow-credit{color:var(--wallet-flow-credit)}
.wallet-flow-label.flow-debit{color:var(--wallet-flow-debit)}
.wallet-flow-label.flow-purchase{color:var(--wallet-flow-purchase)}
.wallet-flow-label.flow-refund{color:var(--wallet-flow-refund)}
.wallet-flow-label.flow-neutral{color:var(--wallet-flow-neutral)}
.fv4-commerce{min-width:0}.fv4-commerce-tools{display:flex;align-items:end;flex-wrap:wrap;gap:9px;margin:12px 0}
.fv4-commerce-tools label{flex:1 1 160px;min-width:0;display:grid;gap:5px;font-size:12px;color:var(--text-secondary)}
.fv4-commerce-tools input,.fv4-commerce-tools select{box-sizing:border-box;width:100%;min-width:0;border-radius:12px;border:1px solid var(--separator);background:var(--control);color:var(--text);padding:10px}
.fv4-commerce-tabs,.fv4-commerce-kpis,.fv4-commerce-page{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fv4-commerce-kpis{margin:15px 0}.fv4-commerce-kpi{padding:10px;min-width:110px;flex:1 1 100px;border:1px solid var(--separator);border-radius:13px;display:grid;gap:4px}
.fv4-commerce-kpi span{font-size:12px;color:var(--text-secondary)}.fv4-commerce-kpi strong{font-size:19px}
.fv4-commerce-row{border-block-end:1px solid var(--separator);min-width:0}.fv4-commerce-row summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer;padding:14px 5px}
.fv4-commerce-row summary small{margin-inline-start:auto;color:var(--text-secondary)}
.fv4-commerce-state{border:1px solid var(--separator);padding:4px 9px;border-radius:20px;font-size:12px}
.fv4-commerce-state.state-received,.fv4-commerce-state.state-completed{color:var(--wallet-flow-credit)}
.fv4-commerce-state.state-failed{color:var(--wallet-flow-debit)}
.fv4-commerce-state.state-refunded,.fv4-commerce-state.state-refund_pending{color:var(--wallet-flow-refund)}
.fv4-commerce-state.state-pending,.fv4-commerce-state.state-review{color:var(--wallet-flow-neutral)}
.fv4-commerce-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));gap:8px;margin:0;padding:7px 4px 15px;overflow-wrap:anywhere}
.fv4-commerce-meta>div{min-width:0}.fv4-commerce-meta dt{font-size:11px;color:var(--text-secondary)}.fv4-commerce-meta dd{margin:3px 0;font-size:12px;overflow-wrap:anywhere}
.fv4-commerce-page{justify-content:space-between;margin-top:13px;font-size:12px}
@media(max-width:430px){.fv4-commerce-row summary{gap:7px}.fv4-commerce-tools label{flex-basis:100%}.fv4-commerce-page .fv4-button{min-width:65px}}

.wallet-color-preview{display:flex;flex-wrap:wrap;gap:9px}
.wallet-color-preview .flow-credit{color:var(--wallet-flow-credit)}
.wallet-color-preview .flow-debit{color:var(--wallet-flow-debit)}
.wallet-color-preview .flow-purchase{color:var(--wallet-flow-purchase)}
.wallet-color-preview .flow-refund{color:var(--wallet-flow-refund)}

/* Scale the content with zoom. Scale fixed chrome with bounded dimensions.
   Never zoom a fixed navigation dock: that changes its viewport position. */
html { --ui-scale:1; font-size:100%; }
#view, #customer-actions, #admin-view, #agent-view {zoom:var(--ui-scale);}
@supports not (zoom: 1.1) {
  #view, #customer-actions, #admin-view, #agent-view {font-size:calc(16px * var(--ui-scale));}
}
/* Phase 3: keep compact controls within mobile safe areas. */
.app-shell { padding-inline-start: max(12px, var(--safe-left)); padding-inline-end: max(12px, var(--safe-right)); }
.admin-layout > *, .customer-layout > *, .content-stack > * { min-width: 0; }
.market-quote-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); gap:12px; margin:12px 0; }
.market-quote { min-width:0; border:1px solid var(--separator); background:var(--surface); border-radius:var(--radius-control); padding:15px; display:grid; gap:10px; }
.market-quote strong { overflow-wrap:anywhere; font-variant-numeric: tabular-nums; }
.market-quote small { color:var(--text-secondary); }
.market-sparkline { display:block; width:100%; max-height:64px; color:var(--accent); }
@media(max-width:520px){
 .admin-layout, .customer-layout { max-width:100%; overflow-x:clip; }
 .admin-layout .content-stack,.customer-layout .content-stack { width:100%; max-width:100%; min-width:0; }
 .admin-layout .form-grid,.customer-layout .form-grid { grid-template-columns:minmax(0,1fr); }
 .admin-layout select,.admin-layout input,.admin-layout textarea,.customer-layout select,.customer-layout input,.customer-layout textarea { max-width:100%; min-width:0; }
 .admin-layout .button-row,.customer-layout .button-row { flex-wrap:wrap; }
 .market-quote-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); }
}

/* Agent orders: count only confirmed rows present on the current page. */
.agent-orders-chart { display:flex; align-items:flex-end; gap:clamp(4px,1.5vw,12px); height:154px; overflow-x:auto; padding:8px 6px 4px; }
.agent-orders-bar { min-width:46px; flex:1 0 46px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; gap:3px; font-variant-numeric:tabular-nums; }
.agent-orders-bar > span { background:var(--accent); min-height:8px; width:min(100%,22px); border-radius:8px 8px 3px 3px; }
.agent-orders-bar > small { font-size:10px; color:var(--text-secondary); }
.agent-orders-bar > b { font-size:11px; }

/* Keep the size control small on phones. It works in every workspace. */


.theme-font-samples { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:12px; padding:10px 0; }
.theme-font-sample { display:grid; gap:5px; border:1px solid var(--separator); background:var(--surface); border-radius:14px; padding:14px; overflow-wrap:anywhere; }
.theme-font-sample small { font-family:var(--body-font); font-size:11px; color:var(--text-secondary); }
.theme-font-sample strong { font-size:19px; font-weight:650; }

/* Phase 1: mobile type stability and safe interaction targets. */
.metric-card { min-width:0; gap:12px; }
.metric-card > span, .metric-card > small { min-width:0; overflow-wrap:break-word; line-height:1.55; }
.metric-card > strong {
  display:block; min-width:0; max-width:100%;
  overflow-wrap:normal; word-break:normal; hyphens:none;
  line-height:1.35; unicode-bidi:plaintext;
}
.metric-card--textual > strong { font-family:var(--body-font); letter-spacing:normal; font-size:clamp(18px,2.3vw,27px); }
.metric-card--long > strong { font-size:clamp(17px,2.1vw,25px); }
.app-bar, .app-controls, .brand-wordmark, .surface-switch { min-width:0; }
.app-controls { max-width:100%; }
.header-scale-label, .header-scale { min-width:0; }
.content-stack, .hero-card, .service-card, .product-card, .record-cell, .wallet-hero { min-width:0; }
@media(max-width:700px){
  .metric-card > strong {font-size:clamp(21px,5.7vw,29px);}
  .metric-card--textual > strong {font-size:clamp(17px,4.7vw,23px);}
  .metric-card--long > strong {font-size:clamp(16px,4.4vw,22px);}
  .metrics-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:360px){
  .app-bar {grid-template-columns:minmax(0,1fr) auto;row-gap:5px;column-gap:2px;}
  .brand-wordmark {grid-column:2;grid-row:1;justify-self:end;gap:4px;padding:5px 3px;font-size:11px;letter-spacing:.06em;}
  .brand-wordmark small {display:none;}
  .brand-mark {width:24px;height:24px;flex-basis:24px;}
  .app-controls, .app-bar.single-surface .app-controls {grid-column:1;grid-row:1;justify-self:start;justify-content:flex-start;gap:2px;}
  .app-controls .circle-button {width:33px;height:33px;min-width:33px;}
  .experience-switch {min-width:33px;padding:0 8px;}
  .experience-switch span:last-child {display:none;}
  .surface-switch {grid-column:1/-1;grid-row:2;justify-self:stretch;}
  .metric-card {padding:12px;}
  .metric-card--textual > strong {font-size:16px;}
}


/* Phase 2 Studio: accordions with local previews, keyboard and touch support. */
.studio-intro{margin-bottom:12px;border-radius:var(--radius-control);padding:14px 16px;background:var(--control)}
.studio-intro p{margin:5px 0 0;color:var(--text-secondary);font-size:12px;line-height:1.6}
.studio-section{margin:9px 0;border:1px solid var(--separator);border-radius:var(--radius-control);background:var(--surface);min-width:0;overflow:hidden}
.studio-section summary{padding:17px 19px;cursor:pointer;font-weight:700;font-size:14px;list-style:none;outline-offset:-4px;position:relative}
.studio-section summary::-webkit-details-marker{display:none}
.studio-section summary:after{content:'⌄';float:inline-end;transition:transform .16s ease}
.studio-section[open] summary:after{transform:rotate(180deg)}
.studio-section-content{padding:4px 15px 18px;min-width:0}
.studio-sample-language{min-width:0;margin-bottom:16px}
.studio-sample-language h4{margin:12px 4px;font-size:13px;color:var(--text-secondary)}
.studio-font-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr));gap:9px}
.studio-font-choice{display:flex;flex-direction:column;align-items:stretch;gap:7px;text-align:start;min-width:0;min-height:81px;padding:11px 13px;border:1px solid var(--separator);border-radius:13px;background:var(--surface-solid);color:var(--text);cursor:pointer}
.studio-font-choice strong{font-size:17px;font-weight:600;line-height:1.35;overflow-wrap:break-word}
.studio-font-choice span{font-size:13px;color:var(--text-secondary);line-height:1.5;overflow-wrap:break-word}
.studio-font-choice[aria-pressed="true"],.studio-motion-choice[aria-pressed="true"]{border:2px solid var(--accent);background:var(--control);padding:10px 12px}
.studio-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}
.studio-presets button{display:inline-flex;gap:7px;align-items:center;min-height:40px;border:1px solid var(--separator);color:var(--text);background:var(--surface-solid);border-radius:13px;padding:9px 11px;cursor:pointer}
.studio-presets i{width:16px;height:16px;border-radius:50%;display:inline-block}
.studio-motions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr));gap:8px;margin-bottom:15px}
.studio-motion-choice{border:1px solid var(--separator);background:var(--surface-solid);border-radius:13px;color:var(--text);min-height:70px;display:grid;place-content:center;gap:5px;justify-items:center;cursor:pointer}
.studio-motion-symbol{display:inline-block;color:var(--accent);font-size:21px}
.studio-motion-choice:focus-visible,.studio-font-choice:focus-visible,.studio-presets button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.studio-preview-sticky{position:relative;margin-top:12px;border:1px solid var(--separator);border-radius:var(--radius-card);padding:14px;background:var(--surface-solid);min-width:0}
.studio-preview-title{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font-size:13px}
#theme-dirty{color:var(--accent);font-size:12px}
.studio-preview-sticky .theme-preview{margin:10px 0 13px}
.studio-publish-row{display:flex;justify-content:flex-end;gap:12px}
.studio-publish-row .primary-button{min-height:46px;min-width:160px}
.theme-preview[data-density="compact"] .theme-preview-card{padding:11px;gap:6px}
.theme-preview[data-surface="solid"] .theme-preview-card{background:#fff}
.theme-preview[data-surface="solid"][data-scheme="dark"] .theme-preview-card{background:#181c22}
@media (prefers-reduced-motion:reduce){.studio-motion-symbol,.studio-section summary:after{animation:none!important;transition:none!important}}
@media(max-width:410px){.studio-section-content{padding:4px 10px 14px}.studio-font-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.studio-font-choice{padding:10px 8px}}

/* Agent ranking uses one scale per verified currency and network. */
.agent-ranking-list{display:grid;gap:12px;min-width:0}
.agent-ranking-entry{min-width:0;display:grid;gap:7px;padding:12px;border:1px solid var(--border-color,#dce3e4);border-radius:16px}
.agent-ranking-label{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:6px;min-width:0}
.agent-ranking-label strong,.agent-ranking-label span{overflow-wrap:anywhere;min-width:0}
.agent-ranking-label span{font-size:.85em;opacity:.82}
.agent-ranking-track{height:8px;border-radius:99px;background:rgba(15,91,79,.12);overflow:hidden}
.agent-ranking-track>span{display:block;height:100%;border-radius:inherit;background:var(--accent,#0F5B4F)}

/* Market Watch: compact, accessible chart intervals and source details. */
.market-period-controls { display:flex; flex-wrap:wrap; gap:8px; margin-block:12px; }
.market-period-controls .is-active { border-color:var(--accent); color:var(--accent); }
.market-chart-empty { min-height:32px; display:flex; align-items:center; color:var(--text-tertiary); font-size:.8rem; }
.market-quote-unit { font-size:.72em; color:var(--text-secondary); font-weight:500; }

/* v15.86: Native-feeling compact customer dashboard and stable mobile geometry. */
.customer-layout .hero-card { min-height:0; padding:18px 20px; border-radius:28px; box-shadow:0 12px 32px rgba(13,34,56,.13); gap:10px; }
.customer-layout .hero-card h1 { font-size:clamp(23px,5vw,30px); margin:0; letter-spacing:0; font-weight:750; }
.customer-layout .hero-actions { margin-top:3px; gap:7px; }
.customer-layout .hero-actions button { min-height:38px; }
.customer-layout .hero-card .eyebrow { font-size:10px; }
/* One compact trigger; the slider occupies space only while open. */
.header-scale-control { position:relative; flex:0 0 auto; }
.header-scale-popover { position:absolute; inset-block-start:calc(100% + 12px); inset-inline-end:0; width:210px; max-width:calc(var(--ui-viewport-width,100vw) - 28px); padding:14px; z-index:110; border:1px solid var(--separator); border-radius:20px; background:var(--surface-solid); box-shadow:var(--shadow-float); }
.header-scale-label { display:grid; flex:none; min-width:0; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13px; }
.header-scale-label input { grid-column:1 / -1; grid-row:2; }
.header-scale-label output { font-size:12px; color:var(--text); text-align:center; font-variant-numeric:tabular-nums; direction:ltr; }
.header-scale { appearance:auto; box-sizing:border-box; width:100%; min-width:0; max-width:100%; accent-color:var(--accent); border:0; border-radius:13px; padding:0; background:transparent; color:var(--text); font-size:12px; font-variant-numeric:tabular-nums; height:28px; cursor:pointer; }
.header-scale:focus-visible, #customer-ui-scale:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
#customer-ui-scale { width:100%; accent-color:var(--accent); }
.customer-layout .content-card, .admin-layout .content-card, .admin-layout .inline-admin-details,
.admin-layout .record-cell, .admin-layout .record-details, .admin-layout .action-panel,
.admin-layout .form-grid > *, .customer-layout .service-card { border-radius:var(--radius-card); }
.admin-layout .inline-admin-details, .admin-layout .record-details > .detail-grid { overflow:hidden; }
.compact-checkout-notice { display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.compact-checkout-notice .notice { width:100%; }
/* Keep editing controls reachable while scrolling through long appearance sections. */
.studio-toolbar svg { width:15px; height:15px; }
.studio-inline-preview { --preview-accent:var(--accent); --preview-radius:20px; --preview-blur:24px; margin:13px 0 4px; background:color-mix(in srgb,var(--surface-solid) 75%,transparent); border:1px solid var(--separator); border-radius:20px; padding:9px; }
.studio-inline-preview .theme-preview-card { border-radius:var(--preview-radius); display:grid; gap:7px; padding:13px; background:color-mix(in srgb,var(--surface-solid) 78%,transparent); backdrop-filter:blur(var(--preview-blur)); -webkit-backdrop-filter:blur(var(--preview-blur)); }
.studio-inline-preview[data-surface="solid"] .theme-preview-card { backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--surface-solid); }
.studio-inline-preview .theme-preview-card button { background:var(--preview-accent); color:#fff; border:0; border-radius:12px; width:max-content; min-height:31px; padding:4px 12px; }
.studio-inline-preview .mini-preview-line { display:flex; justify-content:space-between; gap:8px; font-size:12px; }
.theme-preview[data-surface="glass"] .theme-preview-card {backdrop-filter:blur(var(--preview-blur,24px));-webkit-backdrop-filter:blur(var(--preview-blur,24px));}
@media(max-width:540px){
 .customer-layout .hero-card { padding:18px 17px; border-radius:24px; }
 .customer-layout .hero-actions { flex-wrap:wrap; }
 .app-bar { gap:6px; }
 .app-controls { gap:4px; }
 .header-scale-label { padding:3px 5px; }
 .header-scale { width:100%; max-width:none; }
}

/* Local motion previews replay independently inside each editor section. */
.studio-inline-preview[data-preview-motion="fade"] .theme-preview-card{animation:bb-page var(--motion-duration,220ms) ease both}
.studio-inline-preview[data-preview-motion="scale"] .theme-preview-card{animation:bb-scale var(--motion-duration,220ms) ease both}
.studio-inline-preview[data-preview-motion="slide"] .theme-preview-card{animation:bb-slide var(--motion-duration,220ms) ease both}
@media(prefers-reduced-motion:reduce){.studio-inline-preview .theme-preview-card{animation:none!important}}

/* Appearance editor controls: one fixed, accessible bar for all breakpoints.
   Replaces obsolete in-flow/sticky/fixed definitions; all button IDs remain. */
.studio-toolbar {
  position: fixed;
  top: auto;
  bottom: calc(91px + var(--safe-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(var(--ui-viewport-width,100vw) - 24px), 540px);
  z-index: 94;
  margin: 0;
  padding: 7px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid var(--separator);
  border-radius: 23px;
  background: var(--surface-solid);
  box-shadow: 0 12px 38px rgba(0,0,0,.18);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.studio-toolbar button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 1 1 90px;
  padding: 6px 8px;
  justify-content: center;
}
@media(max-width:540px){.studio-toolbar{top:auto;bottom:calc(91px + var(--safe-bottom, 0px));width:calc(var(--ui-viewport-width,100vw) - 22px)}.studio-toolbar button{flex:1 1 68px;min-width:0;font-size:11px}}
@media(min-width:800px){.studio-toolbar{left:calc(50% + 65px)}}

/* Reflow by available layout width even when interface zoom reaches 150%. */
html[data-ui-compact="true"] .app-bar,html[data-ui-compact="true"] .app-bar.single-surface { grid-template-columns:minmax(0,1fr); border-radius:24px; }
html[data-ui-compact="true"] .app-bar .brand-wordmark { grid-column:1; grid-row:1; justify-self:center; }
html[data-ui-compact="true"] .app-bar .app-controls,html[data-ui-compact="true"] .app-bar.single-surface .app-controls { grid-column:1; grid-row:2; justify-self:center; flex-wrap:wrap; justify-content:center; }
html[data-ui-compact="true"] .app-bar .surface-switch { grid-column:1; grid-row:3; max-width:100%; }
html[data-ui-compact="true"] .studio-font-grid { grid-template-columns:minmax(0,1fr); }
.studio-font-choice { min-width:0; overflow-wrap:anywhere; }
.studio-section-content,.studio-inline-preview { min-width:0; }

/* AI Workspace — restricted admin surface */
.ai-console{display:grid;gap:1rem;max-width:920px;margin:auto;min-width:0}
.ai-status-row,.ai-record,.ai-chat-bubble{border:1px solid var(--hairline,rgba(180,180,180,.25));border-radius:18px;padding:1rem;background:var(--surface,rgba(255,255,255,.05));min-width:0}
.ai-status-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem}
.ai-workspace-tabs{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;scrollbar-width:thin}
.ai-workspace-tabs button{white-space:nowrap;border:1px solid #94A3B855;border-radius:999px;padding:.55rem .85rem;background:transparent;color:inherit}
.ai-workspace-tabs button.active{background:#0F5B4F;color:#fff}
.ai-chat-history,.ai-record-list{display:grid;gap:.75rem;max-height:58vh;overflow:auto}
.ai-chat-bubble.user{margin-inline-start:12%;background:rgba(15,91,79,.12)}
.ai-chat-bubble.assistant{margin-inline-end:12%}
.ai-chat-bubble p,.ai-record p{white-space:pre-wrap;overflow-wrap:anywhere}
.ai-report{white-space:pre-wrap;overflow-wrap:anywhere;font-size:.8rem;max-height:55vh;overflow:auto}
.ai-console form{display:grid;gap:.9rem}
.ai-record{display:grid;gap:.5rem}
.ai-record small{overflow-wrap:anywhere}

/* BOLBOL Cinematic experience — all selectors are mode-scoped.
   Classic does not inherit any of these overrides. */
html[data-experience="cinematic"] {
  color-scheme: dark;
  --navy:#0D2238;
  --accent:#0F5B4F;
  --accent-rgb:15,91,79;
  --gold:#94A3B8;
  --bg:#091827;
  --bg-secondary:#0e2535;
  --surface:rgba(18,42,55,.82);
  --surface-solid:#142a38;
  --glass:rgba(16,41,57,.63);
  --glass-strong:rgba(25,55,67,.74);
  --glass-edge:rgba(217,201,155,.19);
  --control:rgba(242,235,210,.065);
  --control-hover:rgba(242,235,210,.12);
  --text:#f4f0e6;
  --text-secondary:#bbc7c8;
  --text-tertiary:#889fa6;
  --separator:rgba(216,202,159,.15);
  --shadow-float:0 20px 70px rgba(1,8,17,.34),inset 0 1px 0 rgba(255,255,255,.09);
  --shadow-card:0 14px 45px rgba(0,8,17,.21);
  --shadow-control:0 8px 25px rgba(0,8,17,.23);
  --radius:24px;
  --radius-card:28px;
  --radius-control:16px;
}
html[data-experience="cinematic"] body {
  background:
    radial-gradient(ellipse 90% 38% at 85% -9%,rgba(24,104,81,.34),transparent 79%),
    radial-gradient(ellipse 64% 42% at -14% 31%,rgba(148,163,184,.08),transparent 70%),
    repeating-linear-gradient(102deg,transparent 0 5px,rgba(211,190,145,.008) 6px 7px),
    linear-gradient(152deg,#081521 0%,#0c2234 47%,#091926 100%);
  background-attachment:fixed;
  overflow-x:clip;
}
html[data-experience="cinematic"] .app-shell {max-width:1480px;padding-top:max(12px,var(--safe-top));padding-bottom:calc(88px + var(--safe-bottom));}
html[data-experience="cinematic"] .app-bar {
  border-radius:22px;padding:10px 16px;
  background:linear-gradient(110deg,rgba(29,58,70,.83),rgba(12,30,45,.75));
  border-color:rgba(215,199,155,.2);
  box-shadow:0 1px rgba(255,255,255,.08) inset,0 15px 48px rgba(0,9,18,.25);
}
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"]) .brand-wordmark {color:var(--text);letter-spacing:.14em;font-weight:650;}
html[data-experience="cinematic"] .brand-mark {
  background:radial-gradient(circle at 27% 24%,#e4cb84,#ad8332 68%,#836523);
  color:#0c2434;box-shadow:0 0 28px rgba(148,163,184,.19);
}
.experience-switch {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:38px;padding:0 13px;border:1px solid var(--separator);
  border-radius:100px;background:var(--control);color:var(--text);
  font-size:11px;letter-spacing:.04em;white-space:nowrap;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.experience-switch:hover {background:var(--control-hover)}
.experience-switch span:first-child {font-size:17px;color:var(--gold)}
html[data-experience="cinematic"] .experience-switch {background:rgba(148,163,184,.10);border-color:rgba(148,163,184,.3)}
html[data-experience="cinematic"] .surface-switch,
html[data-experience="cinematic"] .liquid-surface {
  border-color:rgba(218,199,147,.15);
  box-shadow:0 14px 44px rgba(1,10,18,.22),inset 0 1px rgba(250,239,210,.065);
}
html[data-experience="cinematic"] .content-card,
html[data-experience="cinematic"] .metric-card,
html[data-experience="cinematic"] .profile-card,
html[data-experience="cinematic"] .record-cell,
html[data-experience="cinematic"] .fv4-card,
html[data-experience="cinematic"] .hero-card {
  border-color:rgba(216,202,159,.14);
  background:linear-gradient(153deg,rgba(27,54,66,.89),rgba(15,38,53,.9));
  box-shadow:0 14px 36px rgba(0,10,22,.21),inset 0 1px rgba(255,247,220,.06);
}
html[data-experience="cinematic"] .nav-pill.active,
html[data-experience="cinematic"] .admin-nav-item.active {
  border-color:rgba(148,163,184,.36);
  background:linear-gradient(120deg,rgba(148,163,184,.18),rgba(23,84,70,.26));
  color:#f8edcf;
}
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"]) .primary-button {
  background: linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 45%,#d7fff3 55%),
    color-mix(in srgb,var(--accent) 65%,#85eace 35%));
  color:#092a31;
  font-weight:700;
  border:1px solid color-mix(in srgb,var(--accent) 30%,white 70%);
  box-shadow:0 8px 23px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.25);
}
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"]) .secondary-button {
  border: 1px solid var(--bb-liquid-control-rim);
  background: var(--bb-liquid-control-bg);
  color: var(--text);
  backdrop-filter:blur(14px);
}
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"]) :is(input,select,textarea) {background:rgba(7,23,35,.54);color:#f4f0e6;border-color:rgba(218,201,160,.23)}
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"]) :is(input,select,textarea)::placeholder {color:#94a8ac}
html[data-experience="cinematic"] .content-stack {gap:20px;}
html[data-experience="cinematic"] .section-heading {margin-bottom:18px;}
html[data-experience="cinematic"] .section-heading h2 {font-weight:610;letter-spacing:-.015em;}
html[data-experience="cinematic"] .customer-layout {gap:24px;}
html[data-experience="cinematic"] .customer-nav {
  border-radius:22px;
  background:linear-gradient(165deg,rgba(23,49,63,.85),rgba(12,32,46,.9));
  backdrop-filter:blur(24px) saturate(126%);
}
html[data-experience="cinematic"] .surface {margin-top:22px;}
.cine-kicker {display:block;color:#d3bc79;letter-spacing:.22em;font-size:10px;font-weight:700;line-height:1.5;text-transform:uppercase;}
.cine-page-heading {display:flex;align-items:center;justify-content:space-between;gap:14px;padding:5px 4px 1px;}
.cine-page-heading h1 {font-size:clamp(24px,3.7vw,39px);font-weight:500;line-height:1.38;letter-spacing:-.035em;margin:7px 0 0;color:#f5f1e6;}
.cine-heading-glyph {font-size:35px;color:#94a3b8;opacity:.5;line-height:1;}
.cine-account-hero,.cine-service-cta {position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:232px;border:1px solid rgba(216,199,145,.21);border-radius:32px;background:radial-gradient(ellipse 63% 120% at 92% 50%,rgba(25,116,91,.45),transparent 80%),linear-gradient(120deg,#102a3e,#0d2238 74%);box-shadow:0 18px 50px rgba(1,8,19,.25),inset 0 1px rgba(255,250,218,.08);padding:clamp(22px,4vw,42px);}
.cine-account-hero::after {content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:repeating-linear-gradient(105deg,transparent,transparent 6px,rgba(240,224,168,.016) 7px);mix-blend-mode:screen;z-index:-1;}
.cine-account-copy {position:relative;z-index:2;max-width:570px;min-width:0;}
.cine-account-copy>p:first-of-type {font-size:14px;color:#c7d0cc;margin:22px 0 0;}
.cine-account-copy h2 {font-size:clamp(29px,6vw,52px);font-weight:520;margin:4px 0 10px;color:#faf1dc;letter-spacing:-.045em;overflow-wrap:anywhere;}
.cine-hero-subtitle {color:#bbcac8;font-size:13px;line-height:1.9;max-width:390px;}
.cine-hero-actions {display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:23px;}
.cine-hero-actions button {min-height:44px;}
.cine-hero-emblem {position:relative;flex:none;display:grid;place-items:center;aspect-ratio:1;width:clamp(130px,24vw,255px);border-radius:50%;border:1px solid rgba(148,163,184,.12);background:radial-gradient(circle at 42% 35%,rgba(228,211,141,.19),rgba(15,91,79,.18) 40%,transparent 69%);box-shadow:0 0 70px rgba(132,187,153,.06),inset 0 0 40px rgba(148,163,184,.11);}
.cine-hero-emblem>span:first-child {font-size:clamp(55px,9vw,92px);color:#e9d18c;text-shadow:0 0 45px rgba(244,211,115,.37);transform:translateY(-3px);}
.cine-orbit-ring {position:absolute;inset:16px;border:1px solid rgba(148,163,184,.27);border-radius:49% 51% 48% 52%;transform:rotate(31deg) scaleX(.7);}
.cine-account-highlights {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px;}
.cine-account-highlights article {min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:clamp(17px,2vw,24px);border:1px solid rgba(218,199,147,.14);border-radius:24px;background:linear-gradient(145deg,rgba(34,63,76,.80),rgba(13,38,54,.85));box-shadow:inset 0 1px rgba(255,255,255,.055);}
.cine-account-highlights article>span {color:#a9bdba;font-size:12px;}
.cine-account-highlights article strong {font-size:clamp(18px,2vw,27px);font-weight:540;overflow-wrap:anywhere;line-height:1.7;}
.cine-account-highlights article button {margin-top:auto;background:transparent;border:0;padding:5px 0;color:#ddca90;cursor:pointer;font-size:12px;text-align:start;}
.cine-account-highlights article button:focus-visible {outline:2px solid #e7cb78;outline-offset:3px;}
.cine-secondary-intro {display:flex;align-items:center;gap:15px;margin:32px 2px 0;}
.cine-secondary-intro strong {font-size:17px;font-weight:500;}
.cine-service-cta {min-height:188px;padding:clamp(19px,4vw,35px);margin-bottom:16px;}
.cine-service-cta>div {max-width:650px;}
.cine-service-cta h2 {font-size:clamp(21px,3vw,31px);margin:13px 0 11px;line-height:1.52;color:#f2ecd8;}
.cine-service-cta p,.cine-catalog-intro p {color:#b7c7c7;line-height:1.8;font-size:13px;margin-bottom:0;}
.cine-service-cta>.primary-button {min-width:125px;min-height:48px;flex:none;}
.cine-catalog-intro {border-bottom:1px solid rgba(148,163,184,.22);padding:6px 8px 22px;margin-bottom:18px;}
html[data-experience="cinematic"] .record-list {gap:13px;}
html[data-experience="cinematic"] .record-cell {border-radius:19px;transition:transform .22s ease,border-color .22s ease;}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  html[data-experience="cinematic"] .record-cell:hover {transform:translateY(-2px);border-color:rgba(148,163,184,.35);}
  html[data-experience="cinematic"] .content-card {transition:border-color .25s ease,box-shadow .25s ease;}
  html[data-experience="cinematic"] .content-card:hover {border-color:rgba(148,163,184,.23);}
}
/* Existing admin tools stay intact. Cinematic changes only their spatial arrangement. */
html[data-experience="cinematic"][data-active-surface="admin"] .admin-sidebar {background:linear-gradient(170deg,rgba(23,52,66,.95),rgba(10,29,45,.94));border-radius:22px;}
html[data-experience="cinematic"][data-active-surface="admin"] .search-panel {border-radius:24px;}
html[data-experience="cinematic"][data-active-surface="agent"] .customer-nav {border-color:rgba(148,163,184,.23);}
/* Living Intelligence: depth-projected Canvas particles, no external rendering service. */
.ai-living-hero {position:relative;isolation:isolate;overflow:hidden;min-height:225px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(148,163,184,.24);border-radius:30px;background:radial-gradient(ellipse at 47% 53%,rgba(30,108,91,.29),transparent 55%),linear-gradient(120deg,#071826,#0c2a3b 65%,#0b1f31);margin-bottom:16px;}
.ai-living-canvas {display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:auto;opacity:.94;}
.ai-living-copy {position:relative;pointer-events:none;z-index:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:190px;margin-left:44%;width:53%;text-align:start;text-shadow:0 2px 18px #091827;}
.ai-living-copy .eyebrow {color:#d4bf84;font-size:9px;letter-spacing:.22em;}
.ai-living-copy h2 {font-family:var(--display-font);color:#f0e5c7;font-size:clamp(23px,5vw,34px);margin:7px 0 2px;letter-spacing:.08em;}
.ai-living-copy #ai-living-state {font-size:11px;color:#bdcfc6;}
html[data-experience="cinematic"] .ai-workspace-tabs {display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:5px;}
html[data-experience="cinematic"] .ai-workspace-tabs>button {border:1px solid rgba(148,163,184,.13);background:rgba(250,241,214,.07);border-radius:999px;white-space:nowrap;min-height:40px;}
html[data-experience="cinematic"] .ai-workspace-tabs>button.active {background:rgba(148,163,184,.19);color:#efdbad;border-color:rgba(148,163,184,.35);}
html[data-experience="cinematic"] .ai-chat-history {display:grid;gap:12px;}
html[data-experience="cinematic"] .ai-chat-bubble {border-radius:21px;padding:13px 18px;max-width:88%;}
html[data-experience="cinematic"] .ai-chat-bubble.user {background:rgba(30,98,81,.35);margin-inline-start:auto;}
html[data-experience="cinematic"] .ai-chat-bubble.assistant {background:rgba(227,211,159,.09);margin-inline-end:auto;}
.cine-studio-preview {display:flex;align-items:center;flex-direction:column;justify-content:center;gap:7px;min-height:190px;background:radial-gradient(circle at center,rgba(46,112,90,.3),transparent 55%),linear-gradient(130deg,#061625,#103447);border-radius:25px;border:1px solid rgba(148,163,184,.25);color:#f2e8d1;}
.cine-studio-preview[data-mode="classic"] {background:#e5e7e9;color:#1d2732;}
.cine-studio-preview strong {font-size:26px;letter-spacing:.10em;z-index:1;}
.cine-studio-preview small {font-size:10px;letter-spacing:.12em;z-index:1;}
.cine-preview-orb {display:block;position:absolute;width:125px;height:125px;border-radius:50%;background:radial-gradient(circle,rgba(195,218,179,.31),rgba(15,91,79,.10) 55%,transparent 73%);filter:blur(12px);opacity:var(--cine-glow-strength,.65);transform:scale(calc(.85 + var(--cine-preview-depth,.4)*.4));transition:opacity .16s ease,transform .16s ease;pointer-events:none;}
.cine-studio-preview[data-mode="classic"] .cine-preview-orb {display:none;}
.cine-studio-preview {position:relative;overflow:hidden;}
html[data-experience="cinematic"] :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet) {backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);}
@media(max-width:760px){
  html[data-experience="cinematic"] .app-shell {padding-inline:max(12px,var(--safe-left)) max(12px,var(--safe-right));}
  html[data-experience="cinematic"] .app-bar {padding-inline:10px;gap:5px;}
  .experience-switch {min-height:34px;padding:0 9px;font-size:10px;}
  html[data-experience="cinematic"] .customer-layout {display:block;}
  html[data-experience="cinematic"] .customer-nav {padding-bottom:max(6px,var(--safe-bottom));border-radius:24px 24px 0 0;}
  .cine-account-hero {min-height:228px;padding:24px;gap:0;}
  .cine-hero-emblem {width:clamp(110px,30vw,170px);position:absolute;inset-inline-end:-36px;top:22px;opacity:.33;z-index:0;}
  .cine-account-copy {z-index:1;}
  .cine-account-highlights {gap:8px;}
  .cine-account-highlights article {padding:14px 11px;border-radius:20px;}
  .cine-account-highlights article strong {font-size:clamp(15px,4vw,20px);}
  .cine-account-highlights article button {font-size:11px;}
  .cine-service-cta {align-items:flex-start;flex-direction:column;}
  .cine-service-cta>.primary-button {align-self:stretch;}
}
@media(max-width:420px){
  .experience-switch {font-size:0;gap:0;padding:0 11px;min-width:34px;}
  .experience-switch span:first-child {font-size:16px;}
  .cine-account-highlights {grid-template-columns:repeat(2,minmax(0,1fr));}
  .cine-account-highlights article:first-child {grid-column:span 2;}
  .cine-account-highlights article:first-child strong {font-size:23px;}
}
@media(prefers-reduced-motion:reduce){
  html[data-experience="cinematic"] *,html[data-experience="cinematic"] *::before,html[data-experience="cinematic"] *::after {animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
}
@media(prefers-reduced-transparency:reduce){
  html[data-experience="cinematic"] .liquid-surface {backdrop-filter:none;-webkit-backdrop-filter:none;background:#142b3b;}
}

/* AI is a distinct management workspace. All actions use existing API routes. */
.admin-intelligence-nav {border:1px solid rgba(148,163,184,.25);border-radius:20px;padding:8px;margin-bottom:10px;background:linear-gradient(140deg,rgba(148,163,184,.08),rgba(15,91,79,.10));}
.admin-intelligence-nav>.admin-nav-item {border-radius:13px;min-height:44px;}
.ai-admin-workspace,.ai-console {min-width:0;width:100%;}
.ai-cross-links {display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;}
.ai-cross-links button {border:1px solid rgba(148,163,184,.22);border-radius:999px;background:rgba(148,163,184,.06);padding:9px 14px;min-height:40px;color:inherit;cursor:pointer;}
.ai-availability-note {font-size:12px;line-height:1.8;opacity:.72;margin:7px 0 14px;}
.ai-ready {color:#9fd7bd;}.ai-offline {color:#d6c2a5;}
.ai-post-preview {border:1px solid rgba(148,163,184,.26);border-radius:19px;background:linear-gradient(145deg,rgba(12,35,50,.85),rgba(15,91,79,.12));padding:19px;margin:12px 0;max-width:600px;}
.ai-post-preview p {white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.9;}
.ai-preview-label {font-size:11px;color:#94a3b8;letter-spacing:.06em;}
.ai-post-preview a {display:inline-flex;margin-top:8px;align-items:center;justify-content:center;min-height:42px;min-width:110px;padding:9px 17px;border:1px solid rgba(148,163,184,.45);border-radius:12px;color:#e6d5a8;text-decoration:none;}
.ai-post-preview a[hidden] {display:none;}
.cine-legacy-overview {margin-top:14px;}
html[data-active-surface="ai"] .ai-admin-workspace {margin-inline:auto;max-width:1100px;}
@media(max-width:760px){.admin-intelligence-nav {margin:5px 3px;padding:3px;border:0;background:transparent;}.ai-cross-links button {flex:1 1 auto;}.ai-post-preview {padding:14px;}}

/* Mobile AI tools must remain visible without horizontal clipping. */
@media(max-width:760px){
  .ai-workspace-tabs,html[data-experience="cinematic"] .ai-workspace-tabs {
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
    overflow:visible;max-width:100%;
  }
  .ai-workspace-tabs>button,html[data-experience="cinematic"] .ai-workspace-tabs>button {
    white-space:normal;overflow-wrap:anywhere;min-width:0;min-height:44px;
    padding:8px 5px;font-size:12px;line-height:1.45;
  }
  .ai-living-hero {min-height:170px;border-radius:24px;}
  .ai-living-copy {min-height:145px;}
  .ai-living-copy h2 {font-size:24px;}
}

/* Cinematic re-review: show distinct account data once, keep all original actions. */
.cine-account-highlights {grid-template-columns:repeat(4,minmax(0,1fr));}
.ai-related-workspaces {margin-top:16px;padding:12px 14px;border:1px solid rgba(148,163,184,.16);border-radius:16px;background:rgba(11,33,47,.45);}
.ai-related-workspaces summary {cursor:pointer;color:#d4c28f;font-size:13px;min-height:26px;}
.ai-related-workspaces:not([open]) .ai-cross-links {display:none;}
@media(max-width:760px) {
  .cine-account-highlights {grid-template-columns:repeat(2,minmax(0,1fr));}
  .ai-living-hero {min-height:120px;max-height:130px;margin-bottom:12px;}
  .ai-living-copy {min-height:115px;}
  .ai-status-row {padding:11px 13px;gap:5px;margin-top:9px;margin-bottom:12px;}
  .ai-status-row strong {font-size:12px;overflow-wrap:anywhere;}
  .ai-status-row span,.ai-status-row small {font-size:11px;}
}
@media(max-width:420px){
  .cine-account-highlights article:first-child {grid-column:auto;}
  .cine-account-highlights article:first-child strong {font-size:clamp(15px,4vw,20px);}
}

/* Phase 4: one marketing workspace with existing permissions and APIs. */
.marketing-workspace-switch { padding: 6px; border: 1px solid var(--separator); border-radius: 17px; background: color-mix(in srgb,var(--surface-solid) 80%,transparent); }
.marketing-workspace-switch .workspace-tab { min-height: 43px; }
.marketing-hub-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.marketing-hub-links button { min-height: 44px; max-width: 100%; }
@media (max-width: 700px) {
  .marketing-workspace-switch { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .marketing-workspace-switch .workspace-tab { white-space: nowrap; flex: 1 0 auto; }
}
/* In Cinematic, show at most three customer destinations and one More control. 
   Keep Classic navigation unchanged, including existing administrative menu settings. */
html[data-experience="cinematic"][data-active-surface="customer"] .customer-nav .mobile-secondary { display: none; }
@media (min-width: 701px) {
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-nav .mobile-more-toggle { display: flex; }
  html[data-experience="cinematic"][data-active-surface="customer"] .mobile-more-sheet {
    display: block; position: fixed; top: 96px; right: max(16px, var(--safe-right)); left: auto; bottom: auto;
    z-index: 109; width: min(390px, calc(100vw - 32px)); max-height: min(72dvh, 540px);
    overflow-y: auto; padding: 16px; border-radius: 25px; overscroll-behavior: contain;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .mobile-more-backdrop { display: block; }
}

/* Win-back draft status is visible without revealing customer identifiers. */
.growth-draft-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin:10px 0; padding:12px 16px; border-radius:16px; }
.growth-draft-row strong { overflow-wrap:anywhere; }
.growth-draft-row .soft-note { margin:4px 0; overflow-wrap:anywhere; }
@media (max-width:520px) { .growth-draft-row { align-items:stretch; } .growth-draft-row .button-row { width:100%; } }

/* Keep compact Telegram headers within two rows on narrow screens. */
@media (max-width: 360px) {
  html[data-ui-compact="true"] .app-bar,
  html[data-ui-compact="true"] .app-bar.single-surface {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 5px;
    row-gap: 6px;
  }
  html[data-ui-compact="true"] .app-bar .brand-wordmark {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-width: 0;
  }
  html[data-ui-compact="true"] .app-bar .app-controls,
  html[data-ui-compact="true"] .app-bar.single-surface .app-controls {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    justify-self: start;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  html[data-ui-compact="true"] .app-bar .surface-switch {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }
}

/* Release status. The API check never replaces the version of the shipped UI. */
.brand-wordmark .release-version {white-space:nowrap;}
.brand-wordmark .release-version-mismatch {color:#b37b12;font-weight:700;}
.release-version-alert {max-width:1160px;margin:8px auto 0;padding:9px 14px;border:1px solid color-mix(in srgb,#b37b12 48%,transparent);border-radius:12px;background:color-mix(in srgb,#b37b12 9%,var(--surface-solid));color:var(--text);font-size:12px;line-height:1.65;text-align:start;}
@media (max-width:360px){.release-version-alert {margin-inline:9px;padding:7px 9px;font-size:11px;}}

/* V15.161: stable native controls and an adaptive cinematic customer dock. */
html[data-experience="cinematic"] { --cine-navy:var(--navy);--cine-emerald:var(--accent);--cine-metal:var(--gold); }
html[data-experience="cinematic"] .cine-account-hero,
html[data-experience="cinematic"] .cine-service-cta {
  background:radial-gradient(ellipse at 85% 25%,color-mix(in srgb,var(--cine-emerald) 45%,transparent),transparent 66%),
    linear-gradient(128deg,color-mix(in srgb,var(--cine-navy) 91%,black),var(--cine-navy));
}
html[data-experience="cinematic"] .cine-account-highlights article {
  background:linear-gradient(150deg,color-mix(in srgb,var(--cine-emerald) 18%,#172a39),rgba(12,27,41,.88));
  border-color:color-mix(in srgb,var(--cine-metal) 18%,transparent);
}
html[data-experience="cinematic"] .cine-kicker,
html[data-experience="cinematic"] .cine-heading-glyph,
html[data-experience="cinematic"] .cine-account-highlights article button{color:var(--cine-metal);}
html[data-experience="cinematic"] .cine-hero-emblem {
  background:radial-gradient(circle at 32% 27%,color-mix(in srgb,var(--cine-metal) 29%,transparent),
  color-mix(in srgb,var(--cine-emerald) 20%,transparent) 48%,transparent 70%);
}
html[data-experience="cinematic"] .customer-layout{min-width:0;}
html[data-experience="cinematic"] .nav-pill.mobile-secondary{display:none;}
html[data-experience="cinematic"] .mobile-more-toggle{display:flex;}
html[data-experience="cinematic"] .mobile-more-sheet{display:block;position:fixed;z-index:109;
  inset:auto max(12px,var(--safe-right)) max(12px,var(--safe-bottom)) max(12px,var(--safe-left));
  max-height:min(72dvh,560px);overflow:auto;overscroll-behavior:contain;padding:16px;border-radius:26px;}
html[data-experience="cinematic"] .mobile-more-backdrop{display:block;}
html[data-experience="cinematic"] .customer-nav{overflow:visible;scroll-snap-type:none;}
html[data-experience="cinematic"] .customer-nav .nav-pill{min-height:52px;}
.header-scale-control, .header-scale-popover, #ui-scale-toggle{zoom:1;}
.header-scale-popover{max-width:min(330px,calc(100vw - 24px));}
html[data-experience="cinematic"] .app-bar,html[data-experience="classic"] .app-bar{transform:none;}
@media(max-width:700px){
  html[data-experience="cinematic"] .customer-nav,html[data-experience="classic"] .customer-nav{
    left:max(8px,var(--safe-left));right:max(8px,var(--safe-right));
    bottom:max(8px,var(--safe-bottom));width:auto;max-height:none;overflow:visible;
  }
  html[data-experience="cinematic"] .customer-nav .nav-pill{min-width:0;min-height:52px;padding:6px 2px;}
  html[data-experience="cinematic"] .customer-nav .nav-pill span{font-size:10px;}
  html[data-experience="cinematic"] .mobile-more-toggle{display:grid;}
  html[data-experience="cinematic"] .mobile-more-sheet{bottom:calc(80px + var(--safe-bottom));}
  .app-shell{padding-bottom:calc(112px + var(--safe-bottom));}
  .customer-ai-chat{max-height:calc(100dvh - 230px);}
}
@media(max-width:370px){
  .customer-nav .nav-pill span{font-size:9px;}
  .customer-nav .nav-pill .icon{width:18px;height:18px;}
  .header-scale-popover{max-width:calc(100vw - 18px);}
}
/* AI uses verified FAQ answers only. The orb is visual, not an API status claim. */
.customer-ai-workspace{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0;}
.customer-ai-hero{min-height:clamp(190px,27vw,280px);position:relative;overflow:hidden;border-radius:28px;
  border:1px solid color-mix(in srgb,var(--gold) 29%,var(--separator));
  background:radial-gradient(ellipse at 50% 48%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 64%),
    linear-gradient(135deg,#102b3b,#081726);box-shadow:0 18px 65px rgba(0,0,0,.17);}
.customer-ai-orb{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab;}
.customer-ai-orb:active{cursor:grabbing;}
.customer-ai-hero-title{position:absolute;inset:17px auto auto 22px;pointer-events:none;z-index:1;}
.customer-ai-hero-title strong{display:block;font:600 clamp(22px,4vw,34px)/1.3 var(--display-font);letter-spacing:.08em;color:#f6eddf;}
.customer-ai-hero-title small{color:#b5c9c1;font-size:11px;}
.customer-ai-modes{position:absolute;bottom:13px;left:0;right:0;display:flex;gap:6px;align-items:center;
  justify-content:center;flex-wrap:wrap;z-index:2;padding:0 12px;}
.customer-ai-modes button{border:1px solid rgba(221,204,160,.35);border-radius:999px;
  color:#e4dfcf;background:rgba(7,25,36,.74);padding:8px 15px;min-height:38px;font-size:11px;}
.customer-ai-modes button[aria-pressed="true"]{background:color-mix(in srgb,var(--gold) 78%,white);color:#101b22;border-color:transparent;}
.customer-ai-chat{min-width:0;display:flex;flex-direction:column;gap:12px;padding:clamp(14px,2.5vw,24px);
  border:1px solid var(--separator);border-radius:25px;background:var(--surface-solid);}
.customer-ai-chat>p{font-size:12px;color:var(--text-secondary);line-height:1.8;margin:0;}
.customer-ai-messages{min-height:125px;max-height:min(46dvh,430px);overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:4px 1px;}
.customer-ai-message{width:fit-content;max-width:min(90%,650px);padding:12px 15px;
  border:1px solid var(--separator);border-radius:17px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;font-size:13px;}
.customer-ai-message.user{align-self:flex-end;background:color-mix(in srgb,var(--accent) 16%,var(--surface-solid));}
.customer-ai-message.assistant{align-self:flex-start;background:var(--control);}
.customer-ai-form{display:flex;align-items:end;gap:9px;min-width:0;}
.customer-ai-form textarea{flex:1;min-width:0;resize:vertical;max-height:150px;min-height:50px;
  padding:12px 15px;border-radius:17px;border:1px solid var(--separator);background:var(--control);}
.customer-ai-form button{flex:none;min-height:48px;padding:0 18px;}
.customer-ai-result{display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:12px;}
.customer-ai-result button{min-height:42px;}
@media(max-width:700px){
  .customer-ai-hero{min-height:205px;}
  .customer-ai-hero-title{top:12px;left:15px;}
  .customer-ai-chat{padding:13px;border-radius:20px;}
  .customer-ai-messages{min-height:105px;max-height:32dvh;}
  .customer-ai-form button{padding:0 13px;}
}
@media(prefers-reduced-motion:reduce){.customer-ai-workspace *, .customer-ai-workspace *::before{animation:none!important;transition:none!important}}

.cine-studio-preview[data-mode="cinematic"]{background:radial-gradient(circle at 76% 35%,color-mix(in srgb,var(--cine-preview-emerald,#0F5B4F) 60%,transparent),transparent 58%),linear-gradient(130deg,var(--cine-preview-navy,#0D2238),#091824);border-color:color-mix(in srgb,var(--cine-preview-gold,#94A3B8) 35%,transparent);}
.cine-studio-preview[data-mode="cinematic"] strong{color:var(--cine-preview-gold,#94A3B8)}
/* The navigation must not live in an animated fixed-position containing block. */
.surface.page-transition,
html[data-motion="page-transition"] .surface {animation:none!important;transform:none!important;filter:none!important;}
html[data-experience="cinematic"] .content-stack>#view,
html[data-experience="cinematic"] .content-stack>#admin-view,
html[data-experience="cinematic"] .content-stack>#agent-view {
  animation:bb-page clamp(160ms, var(--motion-duration,340ms), 650ms) cubic-bezier(.22,1,.36,1) both;
}

html[data-experience="cinematic"] .cine-hero-emblem canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab;}
html[data-experience="cinematic"] .cine-hero-emblem .cine-orbit-ring{pointer-events:none;}
html[data-experience="cinematic"] .nav-pill.active .icon{color:var(--cine-metal);stroke-width:2;}
html[data-experience="cinematic"] .customer-ai-form .primary-button{background:linear-gradient(115deg,color-mix(in srgb,var(--cine-metal) 80%,white),var(--cine-metal));color:#111f25;}

@media(min-width:701px){
 html[data-experience="cinematic"] .mobile-more-sheet{left:auto;right:max(18px,var(--safe-right));width:min(440px,calc(100vw - 36px));bottom:24px;}
}
html[data-experience="classic"] .customer-ai-modes{display:none;}
html[data-experience="classic"] .customer-ai-hero{min-height:112px;background:var(--surface-solid);border-color:var(--separator);box-shadow:var(--shadow-card);}
html[data-experience="classic"] .customer-ai-hero-title strong{color:var(--text);}
html[data-experience="classic"] .customer-ai-hero-title small{color:var(--text-secondary);}

/* Final mobile UI controls: the chat composer stays available without horizontal clipping. */
@media(max-width:700px){
  html[data-experience="cinematic"] .customer-ai-hero{min-height:145px;height:145px;}
  html[data-experience="cinematic"] .customer-ai-hero-title strong{font-size:22px;}
  html[data-experience="cinematic"] .customer-ai-hero-title small{font-size:10px;}
  html[data-experience="cinematic"] .customer-ai-modes{bottom:8px;}
  html[data-experience="cinematic"] .customer-ai-chat{
    height:clamp(260px,calc(var(--tg-vh,100dvh) - 365px),510px);
    max-height:none;overflow:hidden;gap:8px;
  }
  html[data-experience="cinematic"] .customer-ai-messages{flex:1;min-height:70px;max-height:none;}
  html[data-experience="cinematic"] .customer-ai-form{flex-shrink:0;}
  html[data-experience="cinematic"] .customer-ai-form textarea{min-height:44px;max-height:92px;resize:none;}
  html[data-experience="cinematic"] .customer-ai-form button{min-height:44px;}
}
@media (max-width:360px){
  html[data-experience="cinematic"] .customer-ai-hero{min-height:130px;height:130px;}
  html[data-experience="cinematic"] .customer-ai-chat{height:clamp(245px,calc(var(--tg-vh,100dvh) - 345px),470px);}
  html[data-experience="cinematic"] .customer-nav .nav-pill{min-height:48px;}
}
/* Allow users who prefer reduced motion to read and navigate without animation. */
@media (prefers-reduced-motion:reduce){
  html[data-experience="cinematic"] .content-stack>#view,
  html[data-experience="cinematic"] .content-stack>#admin-view,
  html[data-experience="cinematic"] .content-stack>#agent-view{animation:none!important;}
}
/* v15.162 — Cinematic art direction. The Classic design stays unchanged. */
.cine-atmosphere{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.82;contain:strict;}
html:not([data-experience="cinematic"]) .cine-atmosphere{display:none;}
html[data-experience="cinematic"] #app{position:relative;z-index:1;}
html[data-experience="cinematic"]{
  --cine-ease:cubic-bezier(.22,1,.36,1);
  --cine-ink:#f2ead9;
  --cine-soft-ink:#aec4bf;
}
html[data-experience="cinematic"] body{
  background:
    radial-gradient(ellipse 92% 58% at 82% -18%,color-mix(in srgb,var(--cine-emerald) 30%,transparent),transparent 73%),
    radial-gradient(ellipse 67% 47% at -18% 65%,color-mix(in srgb,var(--cine-metal) 6%,transparent),transparent 77%),
    linear-gradient(152deg,color-mix(in srgb,var(--cine-navy) 68%,#030b12),color-mix(in srgb,var(--cine-navy) 81%,#051520) 52%,#07131e);
  background-attachment:fixed;
  font-family:"BolBol Vazirmatn","BolBol Inter",Tahoma,sans-serif;
  color:var(--cine-ink);
  text-rendering:optimizeLegibility;
}
html[data-experience="cinematic"] .app-bar{
  border:1px solid color-mix(in srgb,var(--cine-metal) 24%,transparent);
  background:linear-gradient(125deg,color-mix(in srgb,var(--cine-navy) 86%,transparent),rgba(9,24,32,.90));
  box-shadow:0 12px 38px rgba(1,8,18,.24),inset 0 1px rgba(255,255,255,.07);
  backdrop-filter:blur(21px) saturate(120%);
  -webkit-backdrop-filter:blur(21px) saturate(120%);
}
html[data-experience="cinematic"] :is(.cine-page-heading h1,.cine-account-copy h2,.cine-service-cta h2,.section-heading h2){
  font-family:"BolBol Vazirmatn","BolBol Inter",Tahoma,sans-serif;
  letter-spacing:-.025em;
  text-wrap:balance;
}
html[data-experience="cinematic"] .brand-wordmark{
  font-family:"BolBol Inter",Arial,sans-serif;
  font-weight:650;
  letter-spacing:.085em;
}
html[data-experience="cinematic"] .cine-page-heading{
  padding-block:clamp(7px,1.4vw,19px) 12px;
  border-bottom:1px solid color-mix(in srgb,var(--cine-metal) 16%,transparent);
}
html[data-experience="cinematic"] .cine-kicker{
  color:color-mix(in srgb,var(--cine-metal) 79%,#e9e4d2);
  font-size:10px;
  letter-spacing:.17em;
}
html[data-experience="cinematic"] .cine-account-hero{
  min-height:clamp(260px,31vw,385px);
  border-radius:clamp(22px,3vw,34px);
  background:linear-gradient(125deg,color-mix(in srgb,var(--cine-navy) 88%,#09111b),color-mix(in srgb,var(--cine-navy) 62%,var(--cine-emerald)));
  border:1px solid color-mix(in srgb,var(--cine-metal) 21%,transparent);
  box-shadow:inset 0 1px rgba(246,235,194,.09),0 28px 72px rgba(1,9,19,.22);
}
html[data-experience="cinematic"] .cine-account-hero::before{
  content:"";position:absolute;pointer-events:none;z-index:0;inset:-45% -8% auto auto;
  width:65%;height:170%;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb,var(--cine-emerald) 40%,transparent),transparent 70%);
  opacity:.4;
  transform:translate3d(0,0,0);
  animation:cine-drift 20s ease-in-out infinite alternate;
}
html[data-experience="cinematic"] .cine-account-copy{max-width:620px;}
html[data-experience="cinematic"] .cine-account-copy>p:first-of-type{margin-top:22px;color:#c1d3cd;font-size:13px;}
html[data-experience="cinematic"] .cine-account-copy h2{font-weight:560;line-height:1.4;margin-block:2px 4px;}
html[data-experience="cinematic"] .cine-hero-subtitle{color:var(--cine-soft-ink);line-height:1.95;}
html[data-experience="cinematic"] .cine-hero-actions{gap:9px;}
html[data-experience="cinematic"] .cine-hero-actions button{min-height:44px;}
html[data-experience="cinematic"] .cine-hero-emblem{
  background:radial-gradient(circle at 46% 37%,color-mix(in srgb,var(--cine-emerald) 23%,transparent),transparent 68%);
  border-color:color-mix(in srgb,var(--cine-metal) 18%,transparent);
  box-shadow:0 0 70px color-mix(in srgb,var(--cine-emerald) 13%,transparent),inset 0 0 52px rgba(1,8,18,.16);
}
html[data-experience="cinematic"] .cine-orbit-ring{border-color:color-mix(in srgb,var(--cine-metal) 20%,transparent);}
/* A single ledger replaces four repeated floating cards. */
html[data-experience="cinematic"] .cine-account-highlights{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  overflow:hidden;margin-top:14px;border-radius:24px;
  background:linear-gradient(115deg,rgba(12,34,48,.89),rgba(11,31,42,.77));
  border:1px solid color-mix(in srgb,var(--cine-metal) 19%,transparent);
  box-shadow:inset 0 1px rgba(255,255,255,.045);
}
html[data-experience="cinematic"] .cine-account-highlights article{
  border:0;border-radius:0;box-shadow:none;background:transparent;
  min-height:140px;position:relative;gap:7px;padding:clamp(16px,2.1vw,25px);
  border-inline-end:1px solid rgba(225,210,171,.105);
  transition:background .3s var(--cine-ease);
}
html[data-experience="cinematic"] .cine-account-highlights article:last-child{border-inline-end:0;}
html[data-experience="cinematic"] .cine-account-highlights article:hover{background:rgba(239,226,187,.035);}
html[data-experience="cinematic"] .cine-account-highlights article>span{
  font-size:11px;font-weight:500;color:#a9c1ba;
}
html[data-experience="cinematic"] .cine-account-highlights article strong{
  font-family:"BolBol Inter","BolBol Vazirmatn",Tahoma,sans-serif;
  color:#f1e8d4;letter-spacing:-.025em;font-variant-numeric:tabular-nums;
}
html[data-experience="cinematic"] .cine-account-highlights article button{
  min-height:38px;display:inline-flex;align-items:center;
  color:color-mix(in srgb,var(--cine-metal) 89%,#f3eddd);
  font-size:11px;line-height:1.5;text-align:start;
}
html[data-experience="cinematic"] .cine-account-highlights article button:hover{text-decoration:underline;text-underline-offset:4px;}
/* Quiet, precise micro-interactions instead of repeated glow and scale. */
html[data-experience="cinematic"] :is(.primary-button,.secondary-button,.nav-pill,.circle-button,.sheet-item){
  transition:background-color .28s var(--cine-ease),color .28s var(--cine-ease),
    border-color .28s var(--cine-ease),box-shadow .35s var(--cine-ease),transform .35s var(--cine-ease);
}
@media(hover:hover) and (pointer:fine){
  html[data-experience="cinematic"] :is(.primary-button,.secondary-button):not(:disabled):hover{transform:translateY(-2px);}
  html[data-experience="cinematic"] .nav-pill:not(.active):hover{transform:translateX(2px);}
  html[dir="rtl"][data-experience="cinematic"] .nav-pill:not(.active):hover{transform:translateX(-2px);}
}
html[data-experience="cinematic"] :is(.primary-button,.secondary-button,.nav-pill,.sheet-item):not(:disabled):active{transform:translateY(1px) scale(.99);}
html[data-experience="cinematic"] .customer-nav{
  background:linear-gradient(140deg,rgba(13,34,49,.94),rgba(12,31,43,.91));
  border:1px solid color-mix(in srgb,var(--cine-metal) 17%,transparent);
  box-shadow:0 20px 55px rgba(0,8,17,.26),inset 0 1px rgba(242,231,194,.08);
}
html[data-experience="cinematic"] .customer-nav .nav-pill{
  min-height:48px;position:relative;
}
html[data-experience="cinematic"] .customer-nav .nav-pill.active{
  background:linear-gradient(115deg,color-mix(in srgb,var(--cine-metal) 10%,transparent),color-mix(in srgb,var(--cine-emerald) 27%,transparent));
  border-color:color-mix(in srgb,var(--cine-metal) 33%,transparent);
}
html[data-experience="cinematic"] :is(.service-card,.product-card,.record-cell,.content-card){
  border-color:color-mix(in srgb,var(--cine-metal) 14%,transparent);
  transition:border-color .3s var(--cine-ease),box-shadow .3s var(--cine-ease),transform .4s var(--cine-ease);
}
html[data-experience="cinematic"] :is(.service-card,.product-card,.record-cell,.content-card):focus-within{
  border-color:color-mix(in srgb,var(--cine-metal) 45%,transparent);
}
html[data-experience="cinematic"] .customer-ai-hero{
  background:radial-gradient(ellipse at 49% 51%,color-mix(in srgb,var(--cine-emerald) 22%,transparent),transparent 72%),
    linear-gradient(140deg,color-mix(in srgb,var(--cine-navy) 94%,#030812),color-mix(in srgb,var(--cine-navy) 69%,var(--cine-emerald)));
}
html[data-experience="cinematic"] .customer-ai-chat{
  background:linear-gradient(150deg,rgba(17,40,52,.92),rgba(10,30,42,.91));
  border:1px solid color-mix(in srgb,var(--cine-metal) 18%,transparent);
}
html[data-experience="cinematic"] .customer-ai-messages{
  scrollbar-width:thin;scrollbar-color:rgba(217,195,144,.32) transparent;
}
html[data-experience="cinematic"] .customer-ai-message{
  animation:cine-bubble .36s var(--cine-ease) both;
  border-color:rgba(230,212,171,.15);
}
html[data-experience="cinematic"] .customer-ai-message.user{
  background:linear-gradient(130deg,color-mix(in srgb,var(--cine-emerald) 34%,#122c39),rgba(26,68,69,.78));
}
html[data-experience="cinematic"] .customer-ai-message.assistant{background:rgba(232,226,204,.07);}
html[data-experience="cinematic"] :is(.customer-ai-form textarea,.customer-ai-form button){min-height:44px;}
@keyframes cine-drift{to{transform:translate3d(-5%,4%,0) rotate(6deg);}}
@keyframes cine-bubble{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}
@media(max-width:940px){
  html[data-experience="cinematic"] .cine-account-highlights{grid-template-columns:repeat(2,minmax(0,1fr));}
  html[data-experience="cinematic"] .cine-account-highlights article:nth-child(2){border-inline-end:0;}
  html[data-experience="cinematic"] .cine-account-highlights article:nth-child(-n+2){border-bottom:1px solid rgba(225,210,171,.1);}
}
@media(max-width:700px){
  html[data-experience="cinematic"] .app-shell{padding-bottom:calc(120px + var(--safe-bottom));}
  html[data-experience="cinematic"] .app-bar{top:calc(5px + var(--safe-top));padding:6px 8px;border-radius:20px;}
  html[data-experience="cinematic"] .cine-page-heading{padding-block:3px 9px;}
  html[data-experience="cinematic"] .cine-page-heading h1{font-size:clamp(21px,5.2vw,29px);line-height:1.6;}
  html[data-experience="cinematic"] .cine-account-hero{min-height:268px;padding:23px 20px;}
  html[data-experience="cinematic"] .cine-hero-emblem{
    width:clamp(115px,32vw,155px);inset-inline-end:10px;top:20px;
    opacity:.34;border-radius:50%;
  }
  html[data-experience="cinematic"] .cine-account-copy h2{font-size:clamp(26px,7.2vw,37px);}
  html[data-experience="cinematic"] .cine-account-copy>p:first-of-type{margin-top:14px;}
  html[data-experience="cinematic"] .cine-hero-actions{margin-top:14px;}
  html[data-experience="cinematic"] .cine-hero-actions button{min-height:44px;font-size:11px;padding-inline:14px;}
  html[data-experience="cinematic"] .cine-account-highlights{border-radius:20px;}
  html[data-experience="cinematic"] .cine-account-highlights article{min-height:130px;padding:15px 13px;}
  html[data-experience="cinematic"] .cine-account-highlights article strong{font-size:clamp(15px,4vw,20px);}
  html[data-experience="cinematic"] .customer-nav{bottom:calc(8px + var(--safe-bottom));border-radius:24px;}
  html[data-experience="cinematic"] .customer-nav .nav-pill{min-height:52px;border-radius:16px;}
  html[data-experience="cinematic"] .customer-ai-modes button{min-height:44px;padding:7px 14px;}
  html[data-experience="cinematic"] .customer-ai-workspace.cine-composing .customer-ai-hero{
    height:0!important;min-height:0!important;opacity:0;border-width:0;overflow:hidden;transition:height .28s ease,opacity .2s ease;
  }
  html[data-experience="cinematic"] .customer-ai-workspace.cine-composing .customer-ai-chat{
    height:clamp(260px,calc(var(--tg-live-height,100dvh) - 185px),560px);
  }
  html[data-experience="cinematic"] .customer-ai-messages{overscroll-behavior-y:contain;}
}
@media(max-width:355px){
  html[data-experience="cinematic"] .cine-account-hero{padding:19px 15px;}
  html[data-experience="cinematic"] .cine-hero-actions button{padding-inline:10px;font-size:10px;}
  html[data-experience="cinematic"] .cine-account-highlights article{min-height:115px;}
  html[data-experience="cinematic"] .cine-account-highlights article button{font-size:10px;}
}
@media(prefers-reduced-motion:reduce){
  html[data-experience="cinematic"] .cine-account-hero::before,
  html[data-experience="cinematic"] .customer-ai-message{animation:none!important;}
  html[data-experience="cinematic"] :is(.primary-button,.secondary-button,.nav-pill,.circle-button,.sheet-item){transition:none!important;}
}

/* v15.163: keep the chat composer visible above the mobile keyboard. */
@media(max-width:700px){
  html[data-experience="cinematic"].cine-keyboard-focus .customer-nav{
    opacity:0;visibility:hidden;pointer-events:none;
  }
  html[data-experience="cinematic"].cine-keyboard-focus .customer-ai-workspace{
    gap:9px;
  }
  html[data-experience="cinematic"].cine-keyboard-focus .customer-ai-chat{
    min-height:210px;
    height:clamp(210px,calc(var(--tg-live-height,100dvh) - 150px - var(--safe-top)),540px);
  }
  html[data-experience="cinematic"].cine-keyboard-focus .app-shell{
    padding-bottom:calc(10px + var(--safe-bottom));
  }
}

/* Private customer AI shortcuts are content, not fixed controls. */
.customer-ai-shortcuts{display:flex;gap:8px;flex-wrap:wrap;min-width:0;}
.customer-ai-shortcuts button{min-height:44px;padding:8px 15px;border:1px solid var(--separator);background:var(--control);color:var(--text);border-radius:999px;font:inherit;font-size:12px;}
.customer-ai-shortcuts button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.customer-ai-shortcuts button:disabled{opacity:.5;cursor:wait;}

/* Customer AI conversations remain inside the existing native Mini App surface. */
.customer-ai-thread-controls select{flex:1;min-width:125px;max-width:100%;border-radius:13px;min-height:44px;padding:8px;
  border:1px solid var(--separator);background:var(--surface-solid);color:var(--text);font:inherit;font-size:12px;}
.customer-ai-thread-controls button{min-height:44px;padding:8px 12px;flex:none;font-size:12px;}
.customer-ai-thread-controls :focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media(max-width:360px){.customer-ai-thread-controls select{width:100%;flex-basis:100%;}}

/* 15.184: Telegram Mini App viewport and keyboard safety. */
:root{--tg-live-top:0px;--tg-live-height:100dvh;--tg-keyboard-cover:0px;}
@media(max-width:700px){
  /* Keep the fixed dock above Telegram's bottom gesture area. */
  html[data-experience="cinematic"] .customer-nav,
  html[data-experience="classic"] .customer-nav{
    bottom:calc(8px + var(--safe-bottom));
  }
  /* The keyboard must not cover an active input or a finance dialog. */
  html.tg-editing .customer-nav,
  html.tg-editing .admin-sidebar{
    opacity:0;visibility:hidden;pointer-events:none;
  }
  html.tg-editing .app-shell{padding-bottom:calc(12px + var(--safe-bottom));}
  html.tg-editing .fv4-overlay,
  html.tg-editing .step-up-overlay{
    top:var(--tg-live-top);bottom:auto;height:var(--tg-live-height);
    max-height:var(--tg-live-height);align-items:center;
    padding-top:calc(8px + var(--safe-top));padding-bottom:calc(8px + var(--safe-bottom));
  }
  html.tg-editing .fv4-dialog,
  html.tg-editing .step-up-dialog{
    max-height:calc(var(--tg-live-height) - var(--safe-top) - var(--safe-bottom) - 16px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  html.tg-editing .mobile-more-sheet,
  html.tg-editing .admin-more-sheet{
    bottom:calc(8px + var(--safe-bottom) + var(--tg-keyboard-cover));
    max-height:calc(var(--tg-live-height) - var(--safe-top) - var(--safe-bottom) - 20px);
  }
  /* iOS zooms the entire Mini App when a focused field is under 16 CSS px. */
}
@media(max-width:700px) and (pointer:coarse){
  .app-shell input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  .app-shell select,.app-shell textarea{
    font-size:max(16px,var(--tg-input-min-size,16px))!important;
  }
}

/* 15.185: Telegram native Close/More clearance and strict content bounds. */
:root{
  --tg-header-chrome-fallback:0px;
  --safe-top:calc(max(env(safe-area-inset-top,0px),var(--tg-safe-area-inset-top,0px)) + var(--tg-content-safe-area-inset-top,0px) + var(--tg-header-chrome-fallback));
}
.app-shell,.surface,.content-stack,.customer-layout,.admin-layout,
.content-card,.fv4-card,.record-main,.record-cell,.detail-grid,
.cine-account-copy,.cine-page-heading{min-width:0;max-width:100%;}
:is(.content-card,.record-main,.detail-grid,.cine-account-copy,.status-chip,.notice,
    .profile-card,.section-heading,.ai-chat-bubble,.customer-ai-message) {
  overflow-wrap:anywhere;
}
.app-bar .brand-wordmark,.app-bar .app-controls,.app-bar .surface-switch{
  min-width:0;max-width:100%;
}
@media(max-width:820px){
  .app-shell{padding-top:calc(10px + var(--safe-top));}
  .app-bar{top:calc(8px + var(--safe-top));}
  /* UI action bars must not cover the system header in fullscreen mode. */
  .studio-toolbar{max-width:calc(100vw - var(--safe-left) - var(--safe-right) - 18px);}
}
@media(max-width:700px){
  .app-bar .surface-switch{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;}
  .app-bar .segmented-button{flex:0 0 auto;max-width:100%;}
  .app-bar .segmented-button span{min-width:0;overflow:hidden;text-overflow:ellipsis;}
  .app-bar .brand-wordmark{overflow:hidden;}
  .customer-nav,.admin-sidebar{max-width:calc(100% - var(--safe-left) - var(--safe-right) - 16px);}
  .mobile-more-sheet,.admin-more-sheet{
    max-width:calc(100% - var(--safe-left) - var(--safe-right) - 16px);
    max-height:min(560px,calc(var(--tg-live-height,100dvh) - var(--safe-top) - var(--safe-bottom) - 24px));
  }
  .fv4-overlay,.step-up-overlay{max-width:100vw;overflow-x:hidden;}
  .fv4-dialog,.step-up-dialog{width:min(100%,100vw);max-width:100%;overflow-wrap:anywhere;}
}
@media(max-width:360px){
  html[data-ui-compact="true"] .app-bar .app-controls{
    max-width:100%;width:100%;min-width:0;justify-content:center;
  }
  html[data-ui-compact="true"] .app-bar .surface-switch{
    width:100%;max-width:100%;
  }
}

/* AI voice controls: keyboard and small-screen accessible; no separate layout shell. */
.ai-voice-controls{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem}
.ai-voice-controls .primary-button{margin-inline-start:auto}
.ai-voice-toggle{display:flex;align-items:center;gap:.35rem;font-size:.87rem}
.ai-voice-toggle input{width:18px;height:18px;accent-color:#0F5B4F}
.ai-readiness-reasons{width:100%;overflow-wrap:anywhere}
@media(max-width:420px){.ai-voice-controls .primary-button{margin-inline-start:0;flex:1 0 100%}}

/* v15.199 — Customer Cinematic follows the selected Interactive Concept.
   Classic, agent and admin navigation and all business actions are unchanged. */
html[data-experience="cinematic"][data-active-surface="customer"] .customer-layout{
  display:flex;flex-direction:column;align-items:stretch;gap:clamp(15px,2.2vw,25px);
}
html[data-experience="cinematic"][data-active-surface="customer"] .customer-nav{
  position:sticky;top:calc(86px + var(--safe-top));z-index:55;
  width:100%;max-width:100%;max-height:none;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(5px,.9vw,13px);padding:8px 14px;
  overflow:visible;border-radius:var(--radius-pill);
  background:linear-gradient(105deg,rgba(11,25,31,.94),rgba(15,36,42,.90));
  border:1px solid color-mix(in srgb,var(--cine-metal) 16%,transparent);
}
html[data-experience="cinematic"][data-active-surface="customer"] .customer-nav .nav-pill{
  width:auto;min-width:0;min-height:44px;flex:0 1 auto;
  padding:8px clamp(12px,1.8vw,24px);gap:9px;
  justify-content:center;border-radius:var(--radius-pill);
  letter-spacing:.02em;font-weight:560;
}
html[data-experience="cinematic"][data-active-surface="customer"] .customer-nav .nav-pill.active{
  border:1px solid color-mix(in srgb,var(--cine-metal) 28%,transparent);
  background:linear-gradient(100deg,rgba(148,163,184,.11),rgba(24,90,71,.20));
}
html[data-experience="cinematic"][data-active-surface="customer"] .customer-nav .mobile-secondary{display:none;}
html[data-experience="cinematic"][data-active-surface="customer"] .customer-nav .mobile-more-toggle{display:flex;}
html[data-experience="cinematic"][data-active-surface="customer"] .content-stack{width:100%;min-width:0;}
html[data-experience="cinematic"][data-active-surface="customer"] .cine-account-hero{
  min-height:clamp(230px,28vw,360px);padding:clamp(20px,4vw,42px);
  background:radial-gradient(ellipse 47% 77% at 76% 46%,color-mix(in srgb,var(--cine-emerald) 38%,transparent),transparent 80%),
    linear-gradient(145deg,#0b1721,color-mix(in srgb,var(--cine-navy) 87%,#08121b));
}
html[data-experience="cinematic"][data-active-surface="customer"] .cine-account-copy h2{
  font-size:clamp(37px,5.8vw,78px);line-height:1.2;
  letter-spacing:-.05em;
}
html[data-experience="cinematic"][data-active-surface="customer"] .cine-hero-emblem{
  width:clamp(100px,18vw,195px);max-width:34%;aspect-ratio:1;
  border-color:rgba(214,189,115,.14);background:radial-gradient(circle at 48% 42%,rgba(40,114,89,.17),transparent 70%);
}
html[data-experience="cinematic"][data-active-surface="customer"] .cine-hero-meta{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:clamp(18px,3vw,36px);
  font-size:10px;letter-spacing:.07em;color:#abbcb4;
}
html[data-experience="cinematic"][data-active-surface="customer"] .cine-hero-meta .cine-meta-line{
  display:block;width:30px;height:1px;background:var(--cine-metal);
}
html[data-experience="cinematic"][data-active-surface="customer"] .cine-hero-meta button{
  color:#e5cc8b;text-underline-offset:5px;background:none;padding:6px 3px;
  text-decoration:underline;border:0;min-height:40px;cursor:pointer;
}
html[data-experience="cinematic"][data-active-surface="customer"] .cine-editorial-divider{
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,35px);
  min-height:63px;max-width:100%;overflow:hidden;
  white-space:nowrap;border-block:1px solid rgba(211,188,127,.14);
  font:500 10px/1.5 "BolBol Inter",sans-serif;
  letter-spacing:.15em;color:#b9c4b2;direction:ltr;
}
html[data-experience="cinematic"][data-active-surface="customer"] .cine-editorial-divider i{
  width:4px;height:4px;flex:none;transform:rotate(45deg);background:var(--cine-metal);
}
html[data-experience="cinematic"][data-active-surface="customer"] .cine-account-highlights{
  margin-top:0;grid-template-columns:repeat(4,minmax(0,1fr));
}
html[data-experience="cinematic"][data-active-surface="customer"] .mobile-more-sheet{
  background:linear-gradient(150deg,rgba(15,35,46,.98),rgba(8,20,29,.97));
  border:1px solid rgba(223,204,151,.24);color:#f2ecd9;
}
html[data-experience="cinematic"][data-active-surface="customer"] .mobile-more-sheet .sheet-item{
  background:rgba(231,215,172,.05);border-color:rgba(223,204,151,.16);color:#f2ecd9;
}
@media(min-width:701px){
  html[data-experience="cinematic"][data-active-surface="customer"] .mobile-more-sheet{
    top:calc(169px + var(--safe-top));right:max(16px,var(--safe-right));
  }
}
@media(max-width:760px){
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-account-hero{
    min-height:clamp(215px,44vw,310px);padding:clamp(18px,4vw,26px);
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-hero-emblem{
    width:clamp(88px,25vw,135px);max-width:34%;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-account-copy h2{
    font-size:clamp(30px,7vw,46px);
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-editorial-divider{
    gap:10px;font-size:8px;letter-spacing:.09em;min-height:52px;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-account-highlights{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:700px){
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-nav{
    position:fixed;top:auto;bottom:calc(8px + var(--safe-bottom));
    left:calc(8px + var(--safe-left));right:calc(8px + var(--safe-right));
    width:auto;max-width:calc(100% - var(--safe-left) - var(--safe-right) - 16px);
    border-radius:24px;padding:6px;
    display:grid;grid-template-columns:repeat(var(--mobile-nav-count,4),minmax(0,1fr));
    gap:3px;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-nav .nav-pill{
    width:100%;min-width:0;min-height:53px;flex-direction:column;gap:4px;
    padding:6px 2px;font-size:10px;border-radius:15px;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-account-hero{
    min-height:308px;padding:22px 18px;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-account-copy{max-width:100%;}
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-hero-emblem{
    width:clamp(112px,32vw,145px);max-width:none;position:absolute;inset-inline-end:8px;top:22px;
    opacity:.36;pointer-events:none;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-hero-meta{
    gap:7px;margin-top:12px;letter-spacing:0;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-editorial-divider span:last-child{
    display:none;
  }
}
@media(max-width:360px){
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-editorial-divider span:nth-of-type(2){display:none;}
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-hero-meta{font-size:9px;}
}
@media(prefers-reduced-motion:reduce){
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-editorial-divider,
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-account-hero{animation:none!important;}
}

/* Keep the AI composer above the fixed Telegram navigation on compact screens. */
@media(max-width:700px){
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-ai-hero{
    min-height:108px;height:108px;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-ai-chat{
    height:clamp(270px,calc(var(--tg-live-height,100dvh) - 420px - var(--safe-bottom)),480px);
    min-height:0;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-ai-messages{
    min-height:48px;flex:1 1 auto;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-ai-form{
    position:relative;z-index:2;flex-shrink:0;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .cine-hero-emblem{opacity:.63;}
  html[data-experience="cinematic"][data-active-surface="customer"].cine-keyboard-focus .customer-ai-chat{
    height:clamp(225px,calc(var(--tg-live-height,100dvh) - 152px - var(--safe-top) - var(--safe-bottom)),540px);
  }
}
/* Disclose capability limits without occupying the entire AI conversation view. */
.customer-ai-disclosure{border:1px solid var(--separator);border-radius:14px;padding:0 12px;color:var(--text-secondary);}
.customer-ai-disclosure summary{display:list-item;cursor:pointer;min-height:40px;line-height:40px;font-size:12px;list-style-position:inside;}
.customer-ai-disclosure summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
.customer-ai-disclosure p{font-size:12px;line-height:1.9;margin:0 0 12px;overflow-wrap:anywhere;}
@media(max-width:700px){
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-ai-shortcuts{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;
    padding:2px 0 5px;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-ai-shortcuts button{
    flex:0 0 auto;white-space:nowrap;
  }
}
@media(max-width:360px){
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-ai-shortcuts{
    overflow:visible;gap:4px;
  }
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-ai-shortcuts button{
    flex:1 1 0;min-width:0;white-space:normal;
    padding:6px 3px;font-size:10px;line-height:1.3;
  }
}

/* v15.199 — Cinematic keyboard and compact-screen accessibility. */
html[data-experience="cinematic"] :is(button,input,textarea,select,summary,[tabindex]):focus-visible{
  outline:2px solid #E6CB82!important;
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(9,28,35,.88)!important;
}
html[data-experience="cinematic"] .customer-ai-thread-controls select{
  font-size:clamp(13px,1.2vw,15px);
}
@media(max-width:700px){
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-nav .nav-pill{
    font-size:12px;line-height:1.25;min-height:56px;
  }
  html[data-experience="cinematic"] .customer-ai-disclosure summary{font-size:13px;min-height:44px;line-height:44px;}
}
@media(prefers-reduced-motion:reduce){
  html[data-experience="cinematic"] .customer-ai-workspace.cine-composing .customer-ai-hero{
    transition:none!important;
  }
}

/* v15.215 UI review: quiet, consistent Cinematic presentation in both schemes. */
html[data-experience="cinematic"] .cine-account-highlights{grid-template-columns:repeat(3,minmax(0,1fr));}
html[data-experience="cinematic"] .cine-account-copy>p:first-of-type{margin-top:0;}
html[data-experience="cinematic"] .cine-account-copy h2{margin-block:8px 18px;}
html[data-experience="cinematic"] .cine-account-highlights article{min-width:0;}
html[data-experience="cinematic"] .cine-account-highlights article strong{overflow-wrap:anywhere;unicode-bidi:plaintext;}
html[data-experience="cinematic"] .customer-nav .nav-pill span{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-experience="cinematic"] .customer-nav .nav-pill:focus-visible,
html[data-experience="cinematic"] :is(.primary-button,.secondary-button,.circle-button):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}
@media(max-width:760px){html[data-experience="cinematic"] .cine-account-highlights{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:380px){
 html[data-experience="cinematic"] .customer-nav .nav-pill{gap:3px;padding-inline:1px;}
 html[data-experience="cinematic"] .customer-nav .nav-pill span{font-size:9px;letter-spacing:0;}
 html[data-experience="cinematic"] .cine-account-highlights article{padding:14px 11px;min-height:112px;}
}
/* Light Cinematic must not inherit the dark-only navigation, hero and typography. */
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"]{
 --cine-ink:#1d3031;--cine-soft-ink:#5b706d;--cine-metal:#657b88;
}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] body{
 background:radial-gradient(ellipse 92% 60% at 80% -20%,rgba(15,91,79,.10),transparent 74%),linear-gradient(150deg,#f8faf9,#eef4f1);
 color:var(--cine-ink);
}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .app-bar{
 background:rgba(255,255,255,.89);border-color:rgba(29,77,68,.14);
 box-shadow:0 10px 26px rgba(18,53,46,.07);
}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .customer-nav{
 background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(238,246,242,.96));
 border-color:rgba(31,88,74,.15);box-shadow:0 12px 32px rgba(20,66,51,.10);
}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .customer-nav .nav-pill.active{
 background:rgba(15,91,79,.11);border-color:rgba(15,91,79,.22);color:#164b40;
}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .customer-nav .nav-pill.active .icon{color:#116252;}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] :is(.cine-account-hero,.cine-service-cta){
 background:radial-gradient(ellipse at 84% 30%,rgba(29,125,105,.12),transparent 69%),linear-gradient(125deg,#ffffff,#e8f3ee);
 border-color:rgba(28,94,75,.17);box-shadow:0 17px 43px rgba(20,76,52,.09),inset 0 1px #fff;
}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .cine-account-hero::before{opacity:.18;}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] :is(.cine-account-copy h2,.cine-page-heading h1,.cine-service-cta h2){color:#182d2a;}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] :is(.cine-account-copy>p:first-of-type,.cine-service-cta p,.cine-catalog-intro p){color:#526d67;}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .cine-account-highlights{
 background:rgba(255,255,255,.88);border-color:rgba(26,88,68,.14);box-shadow:0 12px 32px rgba(16,79,61,.06);
}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .cine-account-highlights article{
 border-inline-end-color:rgba(28,81,63,.11);background:transparent;
}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .cine-account-highlights article>span{color:#647c74;}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .cine-account-highlights article strong{color:#1f3631;}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .cine-account-highlights article button{color:#176653;}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .cine-account-highlights article:hover{background:rgba(29,97,72,.04);}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .mobile-more-sheet{
 background:linear-gradient(150deg,#fff,#ecf4f0);color:#1f3831;border-color:rgba(20,84,65,.17);
}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .mobile-more-sheet .sheet-item{
 background:rgba(26,100,73,.04);border-color:rgba(25,92,69,.12);color:#22483d;
}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .customer-ai-hero{
 background:radial-gradient(ellipse at 50% 48%,rgba(22,124,92,.12),transparent 70%),linear-gradient(135deg,#f9fcfa,#e7f2ed);
 border-color:rgba(24,103,72,.17);box-shadow:0 12px 30px rgba(20,70,50,.06);
}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .customer-ai-hero-title strong{color:#193a33;}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .customer-ai-hero-title small{color:#517069;}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .customer-ai-modes button{background:rgba(255,255,255,.86);border-color:rgba(24,100,69,.22);color:#255846;}
:is(html[data-appearance="light"],html[data-appearance="system"][data-resolved-appearance="light"])[data-experience="cinematic"] .customer-ai-modes button[aria-pressed="true"]{background:#145d4e;color:white;}
@media(prefers-reduced-motion:reduce){
 html[data-experience="cinematic"] .cine-atmosphere{display:none!important;}
 html[data-experience="cinematic"] :is(.customer-nav,.app-bar,.cine-account-hero,.cine-hero-emblem){animation:none!important;transition:none!important;}
}

/* v15.216: accessible customer avatar, unified settings, readable AI reports. */
.customer-profile-shortcut{overflow:hidden;display:grid;place-items:center;border-radius:50%;padding:0;flex-shrink:0;}
.customer-profile-shortcut .customer-header-avatar{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;}
.customer-header-initial{display:grid;place-items:center;width:100%;height:100%;font-weight:750;font-size:15px;}
.menu-editor-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--bb-liquid-card-bg);border:1px solid var(--bb-liquid-card-edge);border-radius:24px;min-width:0;}
.menu-editor-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.menu-editor-name input{min-width:0;width:100%;}
.menu-editor-switch{display:flex;align-items:center;gap:9px;flex-shrink:0;white-space:nowrap;}
/* Only the Theme editor toggle changes presentation; the input remains a native checkbox. */
.menu-editor-switch input[type="checkbox"]{appearance:none;-webkit-appearance:none;position:relative;width:48px;height:30px;flex:0 0 48px;margin:0;border:1px solid var(--separator);border-radius:var(--radius-pill);background:var(--control);box-shadow:inset 0 1px 2px rgba(0,0,0,.07);cursor:pointer;transition:background .18s ease,border-color .18s ease;}
.menu-editor-switch input[type="checkbox"]::before{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:var(--surface-solid);box-shadow:0 2px 5px rgba(0,0,0,.18);transition:transform .18s ease;}
.menu-editor-switch input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent);}
.menu-editor-switch input[type="checkbox"]:checked::before{transform:translateX(18px);}
.menu-editor-switch input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.menu-editor-switch input[type="checkbox"]:disabled{opacity:.4;cursor:not-allowed;}
@media(prefers-reduced-motion:reduce){.menu-editor-switch input[type="checkbox"],.menu-editor-switch input[type="checkbox"]::before{transition:none;}}
.customer-ai-history-drawer{min-width:0;flex:1;}
.customer-ai-history-drawer summary{cursor:pointer;min-height:43px;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;border:1px solid var(--separator);}
.customer-ai-history-drawer label{display:grid;gap:7px;margin-top:8px;}
.customer-ai-history-drawer select{width:100%;min-width:0;}
.customer-ai-history-drawer #customer-ai-delete{margin-top:9px;color:var(--text-secondary);font-size:12px;}
.customer-ai-thread-controls{display:flex;align-items:start;gap:10px;flex-wrap:wrap;min-width:0;}
.customer-ai-thread-controls #customer-ai-new{min-height:43px;}
.ai-report-cards{display:block;min-width:0;line-height:1.65;}
.ai-report-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:12px;margin-block:14px;}
.ai-report-card{min-width:0;max-width:100%;border:1px solid var(--separator);border-radius:18px;padding:16px;background:var(--surface);overflow-wrap:anywhere;}
.ai-report-card strong{display:block;font-size:17px;}
.ai-report-card dl{margin:10px 0 0;display:grid;gap:7px;}
.ai-report-card dl div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.ai-report-card dt,.ai-report-card small{color:var(--text-secondary);font-size:12px;}
.ai-report-card dd{margin:0;max-width:67%;text-align:end;overflow-wrap:anywhere;}
.ai-readiness-reason{flex-basis:100%;display:block;line-height:1.7;overflow-wrap:anywhere;}
.ai-content-suggestion{border:1px solid var(--separator);border-radius:18px;background:var(--surface);padding:16px;margin-bottom:16px;}
.ai-content-feedback{display:block;font-size:12px;line-height:1.8;margin-top:8px;}
.ai-tools-collapse>summary{cursor:pointer;margin:3px 0;padding:9px 12px;border-radius:12px;background:var(--control);}
/* Light mode must replace every core dark theme token in Cinematic. */
html[data-experience="cinematic"]:is([data-appearance="light"],[data-appearance="system"][data-resolved-appearance="light"]){
 color-scheme:light;
 --bg:#f3f7f5;--bg-secondary:#eaf1ed;--surface:rgba(255,255,255,.91);
 --surface-solid:#fff;--glass:rgba(255,255,255,.82);--glass-strong:rgba(255,255,255,.94);
 --glass-edge:rgba(25,81,65,.17);--control:rgba(20,80,60,.065);--control-hover:rgba(20,80,60,.12);
 --text:#1a3630;--text-secondary:#536d64;--text-tertiary:#667d74;
 --separator:rgba(24,82,64,.14);--cine-ink:#1b3b33;--cine-soft-ink:#55756a;
 --shadow-float:0 16px 44px rgba(15,72,52,.10);--shadow-card:0 12px 36px rgba(15,72,52,.07);
}
html[data-experience="cinematic"]:is([data-appearance="light"],[data-appearance="system"][data-resolved-appearance="light"]) .cine-account-highlights article{
 background:linear-gradient(145deg,#fff,#ecf5f0);border-color:rgba(25,88,69,.14);color:#1c3a31;
}
html[data-experience="cinematic"]:is([data-appearance="light"],[data-appearance="system"][data-resolved-appearance="light"]) :is(.cine-account-highlights article strong,.cine-account-highlights article span,.cine-account-copy>p:first-of-type){color:#25473b;}
html[data-experience="cinematic"]:is([data-appearance="light"],[data-appearance="system"][data-resolved-appearance="light"]) :is(.cine-account-hero,.cine-service-cta){background:radial-gradient(ellipse at 80% 30%,rgba(23,103,80,.08),transparent 70%),linear-gradient(130deg,#ffffff,#e9f3ed);border-color:rgba(27,91,72,.16);}
html[data-experience="cinematic"]:is([data-appearance="light"],[data-appearance="system"][data-resolved-appearance="light"]) :is(.app-bar,.customer-nav,.ai-console,.customer-ai-chat){color:var(--text);}
html[data-experience="cinematic"]:is([data-appearance="light"],[data-appearance="system"][data-resolved-appearance="light"]) .customer-ai-message.assistant{background:#eaf5f0;color:#1b4034;}
@media(max-width:390px){.ai-report-grid{grid-template-columns:minmax(0,1fr)}.menu-editor-row{gap:7px;padding:10px}.menu-editor-switch{font-size:11px}.customer-ai-thread-controls{flex-wrap:wrap;}}

/* v15.345: Keep the customer tab renderer. Use one dock geometry below.
   The retired raised-circle material must not set tab position or colors. */
.customer-nav.bolbol-glass-dock .dock-symbol {
  display: inline-grid;
  place-items: center;
  flex: none;
}
.customer-nav.bolbol-glass-dock .dock-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* v15.239: Three stable destinations; other permitted actions live in Overview. */
.customer-return{display:flex;align-items:center;margin:0 0 6px}
.customer-return .secondary-button{display:inline-flex;align-items:center;gap:7px;min-height:40px;font-size:12px}
.customer-return .icon{width:16px;height:16px}
.cine-account-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cine-account-links:empty{display:none}
.cine-account-links button{min-height:44px;border-radius:var(--radius-pill);border:1px solid var(--separator);background:var(--control);color:var(--text);padding:8px 12px;display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:12px}
.cine-account-links button .icon{width:17px;height:17px;flex:0 0 17px}
.cine-account-links button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:390px){.brand-wordmark span{font-size:11px;letter-spacing:0}.cine-account-links button{flex:1 1 calc(50% - 4px);justify-content:center}}

/* BOLBOL v15.239: keep management data readable on dark Cinematic cards.
   Scoped to admin and agent content. The Classic palette is unchanged. */
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"]) :is(#admin-view,#agent-view){
  --text:#f3f1e8;
  --text-secondary:#becfcd;
  --text-tertiary:#a5bdb8;
  --separator:rgba(220,240,232,.20);
  --control:rgba(228,247,238,.10);
  --control-hover:rgba(228,247,238,.16);
  --surface:rgba(24,55,65,.92);
  --surface-solid:#183542;
  --glass:rgba(26,55,66,.77);
  --glass-strong:rgba(31,62,72,.87);
  --glass-edge:rgba(220,240,232,.19);
  color:var(--text);
}
html[data-experience="cinematic"] :is(#admin-view,#agent-view) :is(h1,h2,h3,h4,p,dt,dd,legend,label,summary,strong){color:inherit;}
/* Section headings live on the card, outside #admin-view. */
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"])[data-active-surface="admin"] .admin-layout .content-card{
  --text:#f3f1e8;--text-secondary:#becfcd;--text-tertiary:#a5bdb8;
  --separator:rgba(220,240,232,.20);--control:rgba(228,247,238,.10);
  --control-hover:rgba(228,247,238,.16);--surface-solid:#183542;
  color:var(--text);
}

/* Phase 9: only show verified AI support actions when the server permits them. */
.customer-ai-support-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.customer-ai-support-controls [hidden]{display:none!important;}
.customer-ai-support-controls #customer-ai-nps{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.customer-ai-support-controls #customer-ai-nps label{display:flex;align-items:center;gap:8px;}
.customer-ai-support-controls #customer-ai-nps-score{min-width:58px;}

/* BOLBOL AI Content Studio — phase 10. */
.ai-content-studio .ai-post-preview,.ai-telegram-message,.ai-post-record-text{white-space:pre-wrap;overflow-wrap:anywhere}
.ai-telegram-message{padding:12px 0;line-height:1.65}
.ai-telegram-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}
.ai-telegram-button{padding:7px 12px;border:1px solid currentColor;border-radius:12px;font-size:.85em}
.ai-content-studio .button-row{flex-wrap:wrap}

/* Phase 14: accessible voice input/output without overriding other Mini App panels. */
.ai-voice-upload{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:40px}
.ai-voice-controls input[type="file"]{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.ai-voice-controls input[type="file"]:focus-visible+.ai-voice-upload{outline:2px solid currentColor}
.ai-voice-select{display:flex;flex-direction:column;gap:4px;font-size:.83rem;min-width:0;max-width:100%}
.ai-voice-select select{min-width:0;max-width:100%;border-radius:12px;padding:7px 10px}
.ai-voice-hint{font-size:.8rem;line-height:1.6;opacity:.8;margin:7px 0}
@media(max-width:420px){.ai-voice-select{flex:1 1 135px}.ai-voice-controls button{min-height:42px}}

/* Phase 15: Keep the active AI tool visible in Classic and Cinematic. */
.ai-tools-collapse{border:1px solid var(--separator,rgba(148,163,184,.22));border-radius:17px;padding:7px 12px;min-width:0;}
.ai-tools-collapse>summary{cursor:pointer;min-height:40px;display:list-item;align-content:center;font-size:.88rem;overflow-wrap:anywhere;}
.ai-tools-collapse[open] .ai-workspace-tabs{margin-block:7px;}
.ai-console button:focus-visible,.ai-tools-collapse>summary:focus-visible{outline:2px solid var(--accent,#0f5b4f);outline-offset:3px;}
.ai-chat-history{overscroll-behavior:contain;min-height:96px;}
@media(max-width:760px){
  .ai-console{gap:.65rem;}
  .ai-status-row{justify-content:flex-start;}
  .ai-chat-history{max-height:min(50dvh,480px);}
  .ai-tools-collapse>summary{min-height:44px;}
}

/* BOLBOL v15.322 / Visual phase 1 of 4.
   iOS-inspired liquid material foundation. Visual-only: no new controls,
   no navigation behavior, no API changes. All owner theme settings remain active. */
html[data-appearance="dark"],
html[data-appearance="system"][data-resolved-appearance="dark"] {
  --bb-ios-shadow: 0 16px 38px rgba(0,0,0,.31), 0 3px 12px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.11);
  --bb-ios-control-shadow: 0 5px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
}

/* Standard materials form the content layer; floating functional controls get
   deeper optical blur. Keep card typography and all owner-defined radii. */
/* Retired v15.322 card override: the canonical card material is defined below. */
html:not([data-surface="solid"]) :is(.app-bar,.customer-nav,.admin-sidebar,.surface-switch,.mobile-more-sheet,.admin-more-sheet) {
  background: var(--bb-liquid-dock-bg);
  border: 1px solid var(--bb-ios-rim);
  box-shadow: var(--bb-ios-shadow), inset 0 1px 0 var(--bb-dock-highlight);
  -webkit-backdrop-filter: blur(var(--glass-blur,30px)) saturate(180%);
  backdrop-filter: blur(var(--glass-blur,30px)) saturate(180%);
}
html:not([data-surface="solid"]) :is(.app-bar,.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet) {
  /* Use a soft mirrored edge without creating an overlay above tap targets. */
  outline: 1px solid color-mix(in srgb, var(--glass-edge) 12%, transparent);
  outline-offset: -2px;
}
html:not([data-surface="solid"]) :is(.segmented-button.active,.nav-pill.active,.admin-nav-item.active,.sheet-item.active) {
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--accent) 11%, var(--glass-strong) 89%),
    color-mix(in srgb, var(--accent) 6%, var(--glass) 94%));
  border-color: color-mix(in srgb, var(--accent) 19%, var(--glass-edge));
  box-shadow: var(--bb-ios-control-shadow);
}
html:not([data-surface="solid"]) :is(.circle-button,.secondary-button,.pill-button.quiet,.sheet-item,.experience-switch) {
  background: var(--bb-liquid-control-bg);
  border: 1px solid var(--bb-liquid-control-rim);
  box-shadow: inset 0 1px 0 var(--bb-liquid-card-glint), 0 4px 14px rgba(10,27,37,.065);
  -webkit-backdrop-filter: blur(min(var(--glass-blur,30px),20px)) saturate(165%);
  backdrop-filter: blur(min(var(--glass-blur,30px),20px)) saturate(165%);
}
html :is(.circle-button,.segmented-button,.pill-button,.primary-button,.secondary-button,.danger-button,.nav-pill,.admin-nav-item,.sheet-item) {
  min-height: 44px;
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  transition-duration: min(var(--motion-duration,220ms),260ms);
  transition-timing-function: var(--bb-ios-ease);
  -webkit-tap-highlight-color: transparent;
}
html :is(.primary-button,.secondary-button,.pill-button,.danger-button) {
  border-radius: var(--radius-pill);
}
html :is(.section-heading p,.search-panel-heading span,.settings-row-description,.profile-card p) {
  font-size: max(12px, .8rem);
  line-height: 1.65;
}
html :is(.content-card,.metric-card) {
  border-radius: var(--radius-card);
}

/* Customer dock appearance is set once with the admin dock in v15.345.
   The old circular button is retired. Keep the existing tab routes. */
/* Solid appearance and accessibility modes must not leave translucent or
   expensive backdrops behind. This also protects low-end Telegram WebViews. */
html[data-surface="solid"] :is(.content-card,.metric-card,.record-cell,.app-bar,.customer-nav,.admin-sidebar,.surface-switch,.mobile-more-sheet,.admin-more-sheet,.secondary-button,.circle-button,.sheet-item) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html :is(.app-bar,.customer-nav,.admin-sidebar,.surface-switch,.mobile-more-sheet,.admin-more-sheet,.sheet-item) {
    background: var(--surface-solid);
  }
}
@media (prefers-reduced-transparency: reduce) {
  html :is(.content-card,.metric-card,.record-cell,.app-bar,.customer-nav,.admin-sidebar,.surface-switch,.mobile-more-sheet,.admin-more-sheet,.sheet-item,.circle-button,.secondary-button) {
    background: var(--surface-solid) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html :is(.circle-button,.segmented-button,.pill-button,.primary-button,.secondary-button,.danger-button,.nav-pill,.admin-nav-item,.sheet-item) {
    animation: none !important;
    transition: none !important;
  }
}

/* BOLBOL SHOP v15.323 — iOS-style navigation and controls, visual phase 2/4.
   Keep existing buttons, destinations, admin flags, and theme preferences.
   Put the optically rich material on navigation and floating controls only. */
html[data-appearance="dark"],
html[data-appearance="system"][data-resolved-appearance="dark"] {
  --bb-dock-float-shadow: 0 19px 43px rgba(0,0,0,.39), 0 4px 14px rgba(0,0,0,.22), inset 0 1px 0 var(--bb-dock-highlight);
  --bb-dock-selection: linear-gradient(150deg,
    color-mix(in srgb, var(--accent) 39%, var(--glass-strong) 61%),
    color-mix(in srgb, var(--accent) 23%, var(--glass) 77%));
}

/* Wide-screen navigation follows the same glass family as the mobile dock. */
@media (min-width: 821px) {
  html:not([data-surface="solid"]) :is(.customer-nav,.admin-sidebar) {
    border: 1px solid var(--bb-dock-rim);
    box-shadow: var(--bb-dock-float-shadow);
  }
  html :is(.customer-nav .nav-pill,.admin-sidebar .admin-nav-item) {
    min-height: 44px;
    border-radius: max(16px, var(--radius-control));
  }
  html :is(.customer-nav .nav-pill.active,.admin-sidebar .admin-nav-item.active) {
    color: var(--text);
    background: var(--bb-dock-selection);
    box-shadow: inset 0 1px 0 var(--bb-dock-highlight), 0 4px 12px rgba(10,29,38,.07);
  }
}

/* Header surface chooser: one optical tray with a clear selected segment. */
html:not([data-surface="solid"]) .surface-switch {
  background: color-mix(in srgb, var(--glass-strong) 72%, var(--control) 28%);
  border: 1px solid var(--bb-dock-rim);
  box-shadow: inset 0 1px 0 var(--bb-dock-highlight), 0 4px 15px rgba(12,33,43,.07);
  -webkit-backdrop-filter: blur(var(--glass-blur,30px)) saturate(165%);
  backdrop-filter: blur(var(--glass-blur,30px)) saturate(165%);
}
html:not([data-surface="solid"]) .surface-switch .segmented-button.active {
  color: var(--text);
  background: var(--bb-dock-selection);
  border: 1px solid var(--bb-dock-selection-rim);
  box-shadow: var(--bb-ios-control-shadow);
}
html .surface-switch .segmented-button:not(.active) { border: 1px solid transparent; }

/* BOLBOL v15.345: Canonical customer Liquid Glass dock.
   Keep all button identifiers, selected tabs and permission checks.
   The middle button is a capsule, not a floating circular action. */
@media (max-width: 700px) {
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock,
  html[data-experience="cinematic"][data-active-surface="customer"] .customer-nav.bolbol-glass-dock {
    --dock-muted: var(--text-secondary);
    --dock-strong: var(--text);
    position: fixed;
    inset: auto calc(10px + var(--safe-right)) calc(9px + var(--safe-bottom)) calc(10px + var(--safe-left));
    z-index: 95;
    display: grid;
    width: auto;
    grid-template-columns: repeat(var(--mobile-nav-count, 3), minmax(0, 1fr));
    padding: 7px;
    gap: 5px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--bb-dock-rim);
    background: var(--bb-liquid-dock-bg);
    box-shadow: var(--bb-dock-float-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur,30px)) saturate(195%);
    backdrop-filter: blur(var(--glass-blur,30px)) saturate(195%);
    overflow: visible;
    isolation: isolate;
    max-height: none;
  }
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock::before {
    content: none;
  }
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock::after {
    content: "";
    position: absolute;
    inset: 2px 13px auto;
    height: 23px;
    border-radius: 999px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--glass-edge) 45%, transparent), transparent);
    pointer-events: none;
    z-index: 0;
  }
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock .nav-pill,
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock .nav-pill--raised {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-width: 0;
    min-height: clamp(48px, calc(56px * var(--ui-scale,1)), 70px);
    height: auto;
    margin: 0;
    padding: 7px 3px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    box-shadow: none;
    color: var(--text-secondary);
    transform: none;
    text-align: center;
  }
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock .nav-pill.active {
    border-color: var(--bb-dock-selection-rim);
    background: var(--bb-dock-selection);
    box-shadow: inset 0 1px 0 var(--bb-dock-highlight), 0 5px 16px rgba(8,30,39,.13);
    color: var(--text);
  }
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock .nav-pill--raised .dock-symbol,
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock .nav-pill .dock-symbol {
    position: static;
    inset: auto;
    transform: none;
    display: grid;
    place-items: center;
    width: clamp(23px, calc(26px * var(--ui-scale,1)), 33px);
    height: clamp(23px, calc(26px * var(--ui-scale,1)), 33px);
    border: 0;
    border-radius: 11px;
    background: transparent;
    box-shadow: none;
    color: inherit;
  }
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock .nav-pill .dock-symbol .icon {
    width: clamp(20px, calc(23px * var(--ui-scale,1)), 28px);
    height: clamp(20px, calc(23px * var(--ui-scale,1)), 28px);
    color: inherit;
    stroke-width: 1.9;
  }
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock .nav-pill .dock-label {
    margin: 0;
    padding: 0 1px;
    width: 100%;
    max-width: none;
    font-size: clamp(10px, calc(11px * var(--ui-scale,1)), 13px);
    line-height: 1.28;
    font-weight: 680;
    color: inherit;
  }
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock .nav-pill--raised:active .dock-symbol {
    transform: none;
  }
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock .nav-pill:focus-visible {
    outline: 2px solid var(--accent) !important;
    outline-offset: 2px;
  }
}
@media (max-width: 365px) {
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock {
    gap: 3px;
    padding: 5px;
  }
  html[data-active-surface="customer"] .customer-nav.bolbol-glass-dock .nav-pill {
    padding: 6px 1px;
  }
}
/* Admin and agent docks share the optical language, not each other's routes. */
@media (max-width: 820px) {
  html:not([data-surface="solid"]) .admin-sidebar,
  html:not([data-surface="solid"])[data-active-surface="agent"] .customer-nav:not(.bolbol-glass-dock) {
    border: 1px solid var(--bb-dock-rim);
    border-radius: var(--radius-pill);
    background: var(--bb-liquid-dock-bg);
    box-shadow: var(--bb-dock-float-shadow);
    -webkit-backdrop-filter: blur(var(--glass-blur,30px)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur,30px)) saturate(180%);
  }
  html .admin-sidebar .admin-nav-item,
  html[data-active-surface="agent"] .customer-nav .nav-pill {
    min-height: 52px;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
  }
  html .admin-sidebar .admin-nav-item.active,
  html[data-active-surface="agent"] .customer-nav .nav-pill.active {
    color: var(--text);
    background: var(--bb-dock-selection);
    border: 1px solid var(--bb-dock-selection-rim);
    box-shadow: inset 0 1px 0 var(--bb-dock-highlight), 0 4px 12px rgba(9,32,41,.075);
  }
  html .admin-sidebar .admin-nav-item > span,
  html[data-active-surface="agent"] .customer-nav .nav-pill > span {
    font-size: clamp(10.5px, 2.8vw, 11.5px);
    line-height: 1.25;
    font-weight: 620;
  }
}

/* BOLBOL v15.345: Match display scale in the header and role navigation.
   Keep every touch target at least 44 px on small screens. */
html :is(.app-bar,.customer-nav,.admin-sidebar,.surface-switch) {
  font-size: clamp(11px, calc(13px * var(--ui-scale,1)), 18px);
}
html .app-bar .segmented-button {
  min-height: clamp(44px, calc(44px * var(--ui-scale,1)), 58px);
  font-size: clamp(11px, calc(12px * var(--ui-scale,1)), 17px);
  padding-inline: clamp(9px, calc(11px * var(--ui-scale,1)), 16px);
}
html .app-bar .brand-wordmark {
  font-size: clamp(11px, calc(13px * var(--ui-scale,1)), 18px);
}
html :is(.mobile-more-sheet,.admin-more-sheet) .sheet-item {
  font-size: clamp(12px, calc(13px * var(--ui-scale,1)), 18px);
  min-height: clamp(48px, calc(48px * var(--ui-scale,1)), 72px);
  overflow-wrap: anywhere;
  white-space: normal;
  line-height: 1.4;
}
html .studio-toolbar button {
  font-size: clamp(11px, calc(12px * var(--ui-scale,1)), 16px);
}

html :is(.app-bar .circle-button,.app-bar .experience-switch) {
  min-height: clamp(44px, calc(44px * var(--ui-scale,1)), 56px);
}
html .app-bar .circle-button {
  width: clamp(44px, calc(44px * var(--ui-scale,1)), 56px);
  height: clamp(44px, calc(44px * var(--ui-scale,1)), 56px);
  border-radius: 50%;
}
html .app-bar .circle-button .icon {
  width: clamp(18px, calc(19px * var(--ui-scale,1)), 23px);
  height: clamp(18px, calc(19px * var(--ui-scale,1)), 23px);
}
html :is(.customer-nav,.admin-sidebar) :is(.nav-pill,.admin-nav-item) {
  font-size: inherit;
}
html :is(.customer-nav,.admin-sidebar) :is(.nav-pill,.admin-nav-item) .icon {
  width: clamp(19px, calc(21px * var(--ui-scale,1)), 27px);
  height: clamp(19px, calc(21px * var(--ui-scale,1)), 27px);
}
html :is(.customer-nav,.admin-sidebar) :is(.nav-pill,.admin-nav-item) > span:not(.dock-symbol) {
  font-size: clamp(11px, calc(12px * var(--ui-scale,1)), 16px);
  overflow-wrap: anywhere;
}
@media (max-width: 430px) {
  html .app-bar .app-controls { gap: 3px; }
  html .app-bar .circle-button {
    width: clamp(44px, calc(44px * var(--ui-scale,1)), 56px);
    height: clamp(44px, calc(44px * var(--ui-scale,1)), 56px);
    min-width: 44px;
  }
}

/* Every More sheet is a floating material, with a clear action hierarchy. */
html:not([data-surface="solid"]) :is(.mobile-more-sheet,.admin-more-sheet) {
  background: var(--bb-liquid-dock-bg);
  border: 1px solid var(--bb-dock-rim);
  box-shadow: 0 20px 58px rgba(8,28,37,.20), inset 0 1px 0 var(--bb-dock-highlight);
  -webkit-backdrop-filter: blur(var(--glass-blur,30px)) saturate(185%);
  backdrop-filter: blur(var(--glass-blur,30px)) saturate(185%);
}
html :is(.mobile-more-sheet,.admin-more-sheet) .sheet-item {
  min-height: 48px;
  color: var(--text);
  border-radius: var(--radius-pill);
}
html:not([data-surface="solid"]) :is(.mobile-more-sheet,.admin-more-sheet) .sheet-item.active {
  background: var(--bb-dock-selection);
  border-color: var(--bb-dock-selection-rim);
  box-shadow: inset 0 1px 0 var(--bb-dock-highlight);
}
html :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet,.surface-switch) button:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
}
@media (hover:hover) and (pointer:fine) {
  html :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet) button:not(:disabled):hover {
    background-color: color-mix(in srgb, var(--accent) 7%, var(--control));
  }
}
@media (hover:none) and (pointer:coarse) {
  html :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet) button:not(:disabled):active {
    transform: scale(var(--bb-liquid-press-scale));
  }
}

/* Accessibility and unsupported WebView materials use solid, legible controls. */
html[data-surface="solid"] :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet,.surface-switch),
html[data-surface="solid"] :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet) .active {
  background: var(--surface-solid) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
@media (prefers-reduced-transparency: reduce) {
  html :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet,.surface-switch) {
    background: var(--surface-solid) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet,.surface-switch) {
    background: var(--surface-solid) !important;
  }
}
@media (prefers-contrast: more) {
  html :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet,.surface-switch) {
    border-color: var(--text-secondary) !important;
  }
  html :is(.customer-nav,.admin-sidebar) .active {
    border: 2px solid var(--accent) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet,.surface-switch) *,
  html :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet,.surface-switch) *::before,
  html :is(.customer-nav,.admin-sidebar,.mobile-more-sheet,.admin-more-sheet,.surface-switch) *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* BOLBOL SHOP v15.336 — canonical Mini App cards and floating material.
   CSS only. Respect stored Theme, accessibility, routes, and action semantics.
   Earlier optical card backgrounds are superseded here at one maintained site. */
html[data-appearance="dark"],
html[data-appearance="system"][data-resolved-appearance="dark"] {
  --bb3-card-shadow: 0 13px 31px rgba(0,0,0,.24), inset 0 1px 0 var(--bb3-card-glint);
}
/* Cinematic dark materials are active only in dark mode.
   Light Cinematic must use the same legible light material tokens as Classic. */
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"]) {
  --bb3-card-top: color-mix(in srgb, #1a3946 88%, var(--accent) 12%);
  --bb3-card-bottom: color-mix(in srgb, #102735 92%, var(--accent) 8%);
  --bb3-card-edge: rgba(213,239,233,.21);
  --bb3-card-glint: rgba(241,255,250,.095);
  --bb3-card-shadow: 0 14px 34px rgba(0,12,24,.25), inset 0 1px 0 var(--bb3-card-glint);
  --bb3-dialog-top: color-mix(in srgb, #244652 92%, var(--accent) 8%);
  --bb3-dialog-bottom: #112c39;
}
/* The same card geometry applies in customer, admin and agent workspaces. */
html:not([data-surface="solid"]) :is(.content-card,.metric-card,.service-card,.product-card,.profile-card,.search-panel,.action-panel) {
  background: var(--bb-liquid-card-bg);
  border: 1px solid var(--bb-liquid-card-edge);
  box-shadow: var(--bb-liquid-card-shadow);
  border-radius: var(--radius-card);
  background-clip: padding-box;
  outline: 1px solid color-mix(in srgb, var(--glass-edge) 22%, transparent);
  outline-offset: -2px;
  -webkit-backdrop-filter: blur(var(--bb-liquid-card-blur)) saturate(155%);
  backdrop-filter: blur(var(--bb-liquid-card-blur)) saturate(155%);
}
html:not([data-surface="solid"]) :is(.record-cell,.inline-admin-details,.record-details) {
  border-color: var(--bb-liquid-card-edge);
  background: var(--bb-liquid-card-bg);
  box-shadow: inset 0 1px 0 var(--bb-liquid-card-glint);
}
html :is(.content-card,.metric-card,.service-card,.product-card,.profile-card,.search-panel,.action-panel,.record-cell) {
  min-width: 0;
  max-width: 100%;
}
html :is(.content-card,.metric-card,.service-card,.product-card,.profile-card,.search-panel,.action-panel) :is(h1,h2,h3,strong,p,small) {
  overflow-wrap: anywhere;
}
/* Selected records must remain distinct from passive cards. */
html:not([data-surface="solid"]) .record-cell.selected {
  background: color-mix(in srgb, var(--accent) 14%, var(--bb3-card-top) 86%);
  border-color: color-mix(in srgb, var(--accent) 37%, var(--bb3-card-edge) 63%);
}
/* Finance headings, figures and document rows share the content material.
   No glass blur on chart surfaces: keep labels readable and scrolling cheap. */
html:not([data-surface="solid"]) .finance-v4 :is(.fv4-card,.fv4-document,.fv4-balance,.finance-advanced) {
  border: 1px solid var(--bb-liquid-card-edge);
  border-radius: max(18px, calc(var(--radius-card) - 7px));
  background: var(--bb-liquid-card-bg);
  box-shadow: var(--bb-liquid-card-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html .finance-v4 :is(.fv4-card,.fv4-chart-body,.fv4-chart-content,.fv4-document,.fv4-title,.fv4-heading,.fv4-row-main,.fv4-row-money) {
  min-width: 0;
  max-width: 100%;
}
html .finance-v4 :is(.fv4-heading h3,.fv4-title h2,.fv4-balance strong,.fv4-sales-hero strong) {
  overflow-wrap: anywhere;
  line-height: 1.45;
}
html:not([data-surface="solid"]) .finance-v4 .fv4-sales-hero {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--navy) 81%, var(--accent) 19%),
    color-mix(in srgb, var(--accent) 75%, var(--navy) 25%));
  border: 1px solid color-mix(in srgb, var(--glass-edge) 25%, transparent);
  border-radius: max(20px, var(--radius-card));
  box-shadow: 0 12px 32px rgba(11,31,42,.16), inset 0 1px 0 rgba(255,255,255,.13);
  color: #fff;
}
/* Finance filters and document controls get the same optical feedback as tabs. */
html:not([data-surface="solid"]) .finance-v4 :is(.fv4-month,.fv4-switch,.fv4-filters button:not(.active),.fv4-section-tabs button:not(.active)) {
  border-color: var(--bb3-card-edge);
  background: color-mix(in srgb, var(--glass-strong) 78%, var(--control) 22%);
  box-shadow: inset 0 1px 0 var(--bb3-card-glint);
}
html:not([data-surface="solid"]) .finance-v4 :is(.fv4-switch button.active,.fv4-section-tabs button.active) {
  border-color: color-mix(in srgb, var(--accent) 26%, var(--bb3-card-edge));
  background: color-mix(in srgb, var(--accent) 13%, var(--glass-strong) 87%);
  box-shadow: var(--bb-ios-control-shadow);
}
/* A dialog is a floating control layer; it may blur the content underneath. */
html .fv4-overlay, html .step-up-overlay {
  background: rgba(6,16,25,.53);
  -webkit-backdrop-filter: blur(10px) saturate(112%);
  backdrop-filter: blur(10px) saturate(112%);
}
html:not([data-surface="solid"]) :is(.fv4-dialog,.step-up-dialog) {
  border: 1px solid color-mix(in srgb, var(--glass-edge) 72%, var(--separator) 28%);
  border-radius: max(24px, var(--radius-card));
  background: linear-gradient(149deg, var(--bb3-dialog-top), var(--bb3-dialog-bottom));
  box-shadow: 0 26px 68px rgba(7,22,32,.26), inset 0 1px 0 var(--bb3-card-glint);
  -webkit-backdrop-filter: blur(var(--glass-blur,30px)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur,30px)) saturate(160%);
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"]) :is(.fv4-dialog,.step-up-dialog) {
  color: #f3f6f5;
  --text: #f3f6f5;
  --text-secondary: #c2d1d2;
  --separator: rgba(236,252,246,.19);
  --control: rgba(224,246,240,.12);
}
html :is(.fv4-dialog,.step-up-dialog) :is(input,select,textarea) {
  min-width: 0;
  max-width: 100%;
}
html :is(.fv4-dialog,.step-up-dialog) :is(button,[role="button"]):focus-visible,
html .finance-v4 :is(.fv4-button,.fv4-filters button,.fv4-section-tabs button,.fv4-document-actions button):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* Dialog lightness and legibility must honor owner Solid and OS accessibility. */
html[data-surface="solid"] :is(.fv4-dialog,.step-up-dialog),
html[data-surface="solid"] .finance-v4 :is(.fv4-card,.fv4-document,.fv4-balance,.finance-advanced),
html[data-surface="solid"] :is(.content-card,.metric-card,.service-card,.product-card,.profile-card,.search-panel,.action-panel) {
  background: var(--surface-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (prefers-reduced-transparency: reduce) {
  html :is(.fv4-dialog,.step-up-dialog,.fv4-card,.fv4-document,.fv4-balance,.finance-advanced,.content-card,.metric-card,.service-card,.product-card,.profile-card,.search-panel,.action-panel) {
    background: var(--surface-solid) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html :is(.fv4-overlay,.step-up-overlay) { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html :is(.fv4-dialog,.step-up-dialog,.content-card,.metric-card,.service-card,.product-card,.profile-card,.search-panel,.action-panel) {
    background: var(--surface-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-contrast: more) {
  html :is(.fv4-dialog,.step-up-dialog,.content-card,.metric-card,.fv4-card,.fv4-document) {
    border-color: var(--text-secondary) !important;
  }
}
@media (max-width: 420px) {
  html :is(.fv4-dialog,.step-up-dialog) { padding: 16px; }
  html .finance-v4 .fv4-title { gap: 8px; }
  html .finance-v4 .fv4-row-money b { font-size: max(12px, .82rem); }
}


/* BOLBOL SHOP v15.325 — responsive visual phase 4.2.
   Keep all routes, visible tabs, admin controls, and finance data unchanged. */
@media (max-width: 700px) {
  /* Use the available width for both languages and long admin labels. */
  :is(.mobile-more-sheet,.admin-more-sheet) .sheet-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  }
  :is(.mobile-more-sheet,.admin-more-sheet) .sheet-item {
    min-width: 0;
    min-height: 56px;
  }
  :is(.mobile-more-sheet,.admin-more-sheet) .sheet-item span {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
    overflow-wrap: anywhere;
    line-height: 1.45;
  }
  .finance-v4 :is(.fv4-document-head,.fv4-document-actions,.fv4-title) {
    min-width: 0;
    max-width: 100%;
  }
  .finance-v4 .fv4-document-actions button {
    min-width: 0;
    flex: 1 1 128px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
@media (max-width: 360px) {
  /* Preserve usable touch controls without hiding any existing action. */
  .app-bar .app-controls .circle-button {
    width: 42px;
    height: 42px;
    min-width: 42px;
  }
  .app-bar .app-controls { gap: 2px; }
  .finance-v4 .fv4-document-head > :is(span,strong) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .finance-v4 .fv4-row-money {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
/* At 701–820px the admin nav is a fixed dock, not a desktop sidebar.
   Hide it while Telegram shows the keyboard, as on narrow phones. */
@media (min-width: 701px) and (max-width: 820px) {
  html.tg-editing[data-active-surface="admin"] .admin-sidebar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  html.tg-editing[data-active-surface="admin"] .app-shell {
    padding-bottom: calc(18px + var(--safe-bottom));
  }
  html.tg-editing[data-active-surface="admin"] :is(.fv4-overlay,.step-up-overlay) {
    top: var(--tg-live-top, 0px);
    bottom: auto;
    height: var(--tg-live-height, 100dvh);
    max-height: var(--tg-live-height, 100dvh);
    align-items: center;
    padding-top: calc(8px + var(--safe-top));
    padding-bottom: calc(8px + var(--safe-bottom));
  }
  html.tg-editing[data-active-surface="admin"] :is(.fv4-dialog,.step-up-dialog) {
    max-height: calc(var(--tg-live-height, 100dvh) - var(--safe-top) - var(--safe-bottom) - 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}


/* BOLBOL SHOP v15.327 — final visual consistency and focus review.
   Scope: status legibility, accessible motion settings and visible focus.
   Do not change admin theme tokens, navigation layout or business logic. */

/* System Dark and the always-dark Cinematic workspace need light status text,
   just like explicitly selected Dark. These are semantic status labels. */
html[data-appearance="system"][data-resolved-appearance="dark"] .status-chip.success,
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"]) .status-chip.success { color: #65D78F; }
html[data-appearance="system"][data-resolved-appearance="dark"] .status-chip.danger,
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"]) .status-chip.danger { color: #FF7A82; }
html[data-appearance="system"][data-resolved-appearance="dark"] .status-chip.warning,
html[data-experience="cinematic"]:is([data-appearance="dark"],[data-appearance="system"][data-resolved-appearance="dark"]) .status-chip.warning { color: #EEC05B; }

/* The owner-selected None/Reduced motion modes must also disable automatic
   smooth scrolling, not only element keyframe and transition effects. */
html[data-motion="none"], html[data-motion="reduced"] { scroll-behavior: auto; }

/* Sheets and modal actions use a consistent visible keyboard ring in both
   Classic and Cinematic. Keep the existing owner accent and control radii. */
html :is(.mobile-more-sheet,.admin-more-sheet,.fv4-dialog,.step-up-dialog) :is(button,a[href],input,select,textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Physically bind Telegram safe areas to device sides, including RTL.
   Earlier logical padding-start/end can reverse left/right in Persian mode.
   Keep the same responsive content gaps and never change dock positions. */
html .app-shell {
  padding-left: calc(clamp(12px, 2.2vw, 32px) + var(--safe-left));
  padding-right: calc(clamp(12px, 2.2vw, 32px) + var(--safe-right));
}
@media (max-width: 820px) {
  html .app-shell, html[data-experience="cinematic"] .app-shell {
    padding-left: calc(12px + var(--safe-left));
    padding-right: calc(12px + var(--safe-right));
  }
}
@media (max-width: 700px) {
  html .app-shell, html[data-experience="cinematic"] .app-shell {
    padding-left: calc(10px + var(--safe-left));
    padding-right: calc(10px + var(--safe-right));
  }
}

/* v15.328: Show keyboard focus when a Finance dialog has no active controls. */
html .fv4-dialog:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}