/* Studio: Minister's design. Dark, calm, one color per section, frosted panels over a gradient.
   A stylesheet over index.css and the modules' (crm/, channels/, events/, lab/05-hr/ui.css): it changes no
   markup and no behavior, so turning it off (Profile → Design → Classic, or ?design=classic) is the look
   before it. Everything is scoped to html[data-design="studio"], set by index.js. See design/README.md.

   1. Tokens: the palette, per-section colors, type, radii
   2. The window: gradient background, the master pane, the header
   3. Shell views: Rooms today, the rack, room and rate management, Profile
   4. The tape and the stay panel
   5. Modules: the shared look's tokens (.hr), cards, lists, sheets
   6. Phone, motion
   7. Material: the skeuomorphic layer (raised surfaces, inset wells, physical buttons, grain) */

/* ------------------------------------------------------------ 1. tokens */

/* The section's colors are registered, so a change of section cross-fades the background. */
@property --s1 { syntax: '<color>'; inherits: true; initial-value: #4f7cff; }
@property --s2 { syntax: '<color>'; inherits: true; initial-value: #8a4dff; }
@property --s3 { syntax: '<color>'; inherits: true; initial-value: #120f3a; }

html[data-design="studio"] {
  /* Surfaces: white at low opacity over the gradient, so every panel takes the section's tint. */
  --ds-glass: rgba(255, 255, 255, 0.055);
  --ds-glass-2: rgba(255, 255, 255, 0.09);
  --ds-glass-hover: rgba(255, 255, 255, 0.12);
  --ds-panel: rgba(16, 14, 34, 0.62);
  --ds-sheet: rgba(26, 23, 48, 0.94);
  --ds-line: rgba(255, 255, 255, 0.08);
  --ds-line-2: rgba(255, 255, 255, 0.14);
  --ds-text: #f3f1fb;
  --ds-text-2: rgba(255, 255, 255, 0.62);
  --ds-text-3: rgba(255, 255, 255, 0.4);
  /* State colors: the same in every section. */
  --ds-accent: #8b97ff;
  --ds-green: #3ddc84;
  --ds-blue: #5ab0ff;
  --ds-orange: #ffad42;
  --ds-red: #ff6b6b;
  --ds-gray: #9aa3b5;
  --ds-radius: 18px;
  --ds-radius-sm: 12px;
  --ds-blur: blur(28px) saturate(150%);
  --ds-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --ds-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Ionic, on the same palette. Primary stays one calm periwinkle: Ionic needs it as rgb. */
  --ion-font-family: var(--ds-font);
  --ion-background-color: #0e0c1f;
  --ion-background-color-rgb: 14, 12, 31;
  --ion-text-color: var(--ds-text);
  --ion-item-background: transparent;
  --ion-toolbar-background: transparent;
  --ion-tab-bar-background: rgba(16, 14, 34, 0.72);
  --ion-border-color: var(--ds-line);
  --ion-color-primary: #8b97ff;
  --ion-color-primary-rgb: 139, 151, 255;
  --ion-color-primary-contrast: #0e0c1f;
  --ion-color-primary-contrast-rgb: 14, 12, 31;
  --ion-color-primary-shade: #7a85e0;
  --ion-color-primary-tint: #97a1ff;
  --ion-color-success: #3ddc84;
  --ion-color-success-rgb: 61, 220, 132;
  --ion-color-warning: #ffad42;
  --ion-color-warning-rgb: 255, 173, 66;
  --ion-color-danger: #ff6b6b;
  --ion-color-danger-rgb: 255, 107, 107;
  --ion-color-medium: rgba(255, 255, 255, 0.55);
  --ion-color-step-50: rgba(255, 255, 255, 0.05);
  --ion-color-step-100: rgba(255, 255, 255, 0.08);
  --ion-color-step-150: rgba(255, 255, 255, 0.1);
  --ion-color-step-250: rgba(255, 255, 255, 0.16);
  --brand-mark: #fff;
  --menu-width: 17rem;

  color-scheme: dark;
  /* The page's colors follow the section in view. */
  --s1: var(--g1); --s2: var(--g2); --s3: var(--g3);
  transition: --s1 0.8s var(--ds-ease), --s2 0.8s var(--ds-ease), --s3 0.8s var(--ds-ease);
}

/* Section colors: on <html> for the page, and on each glyph for its own section. g1 leads, g2 follows, g3 is the night.
   Related apps share a band of hue, each at its own place in it (g1 at least ~25° from its neighbors); g1 and g2 stay
   in the band, g3 is g1 at ~9% lightness. Indigo (250–285°) is wellness's (the Gym), and chartreuse (55–80°) is kept free for a new family.
   Neutral slate (the default) is the system's: Profile, settings. The splash (index.html) picks one of these at random
   and keeps its own copy, since it paints before this sheet loads: change both together. */
html[data-design="studio"], html[data-design="studio"] [data-section] { --g1: #8e9bb5; --g2: #5b6b8c; --g3: #121826; }
/* Hospitality, blue 190–265°: Housekeeping ~205°, Front desk ~240° to come. */
html[data-design="studio"][data-section="rooms"], html[data-design="studio"] [data-section="rooms"] { --g1: #4f8bff; --g2: #8a4dff; --g3: #110f3b; }
html[data-design="studio"][data-section="channels"], html[data-design="studio"] [data-section="channels"] { --g1: #2ec5f0; --g2: #2f6bff; --g3: #05263a; }
/* Guest and commercial, magenta 285–345°: Store ~320°; Loyalty ~305°, Reputation ~345° to come. */
html[data-design="studio"][data-section="guests"], html[data-design="studio"] [data-section="guests"] { --g1: #ff5aa8; --g2: #c04dff; --g3: #2a0b33; }
html[data-design="studio"][data-section="marketing"], html[data-design="studio"] [data-section="marketing"] { --g1: #d86bff; --g2: #ff4d8a; --g3: #260a30; }
html[data-design="studio"][data-section="store"], html[data-design="studio"] [data-section="store"] { --g1: #ff4fc3; --g2: #ff7a7a; --g3: #2b0820; }
/* Food, beverage and events, warm 350–35°: Bars or Room service ~15°. */
html[data-design="studio"][data-section="fnb"], html[data-design="studio"] [data-section="fnb"] { --g1: #ff9a3d; --g2: #ff5a3d; --g3: #2c1206; }
html[data-design="studio"][data-section="events"], html[data-design="studio"] [data-section="events"] { --g1: #ff4d6d; --g2: #ff7a45; --g3: #2c0710; }
/* Finance, gold 40–55°: Revenue or Treasury ~52°. */
html[data-design="studio"][data-section="accounting"], html[data-design="studio"] [data-section="accounting"] { --g1: #f5c84b; --g2: #d9a520; --g3: #261b06; }
/* People and operations, green 80–175°: Maintenance ~125°. */
html[data-design="studio"][data-section="staff"], html[data-design="studio"] [data-section="staff"] { --g1: #34d67f; --g2: #1fc7b0; --g3: #052a22; }
html[data-design="studio"][data-section="inventory"], html[data-design="studio"] [data-section="inventory"] { --g1: #a8d84a; --g2: #5fc24a; --g3: #172606; }
/* Wellness, indigo 250–285°: Spa ~280°. */
html[data-design="studio"][data-section="gym"], html[data-design="studio"] [data-section="gym"] { --g1: #855cff; --g2: #b247ff; --g3: #100925; }
html[data-design="studio"][data-section="spa"], html[data-design="studio"] [data-section="spa"] { --g1: #c45cff; --g2: #7f5cff; --g3: #1c0727; }

/* Shown only by a design (index.css hides them). */
html[data-design="studio"] .ds-only { display: revert; }
html[data-design="studio"] .glyph.ds-only { display: inline-block; }
html[data-design="studio"] .today.ds-only { display: block; }
html[data-design="studio"] .stay-summary.ds-only { display: grid; }
html[data-design="studio"] .room-guest.ds-only { display: flex; }

/* ------------------------------------------------------------ 2. the window */

html[data-design="studio"] body,
html[data-design="studio"] ion-app {
  background:
    radial-gradient(70rem 48rem at 92% -12%, color-mix(in oklab, var(--s1) 46%, transparent), transparent 62%),
    radial-gradient(56rem 44rem at -8% 108%, color-mix(in oklab, var(--s2) 40%, transparent), transparent 60%),
    linear-gradient(165deg, var(--s3) 0%, #07060f 100%);
  background-attachment: fixed;
  color: var(--ds-text);
  font-family: var(--ds-font);
  -webkit-font-smoothing: antialiased;
}
html[data-design="studio"] ion-split-pane { --border: 1px solid var(--ds-line); background: transparent; }
html[data-design="studio"] #main,
html[data-design="studio"] #main > ion-content,
html[data-design="studio"] ion-header,
html[data-design="studio"] ion-footer { background: transparent; }
html[data-design="studio"] #main > ion-content { --background: transparent; }
html[data-design="studio"] ion-header ion-toolbar { --background: transparent; --border-color: transparent; }

/* The master pane: frosted, with the sections as headings and their pages under the open one. */
html[data-design="studio"] #menu { --background: rgba(10, 9, 24, 0.42); }
html[data-design="studio"] #menu::part(container) { -webkit-backdrop-filter: var(--ds-blur); backdrop-filter: var(--ds-blur); }
html[data-design="studio"] #menu ion-header,
html[data-design="studio"] #menu ion-content,
html[data-design="studio"] #menu ion-footer { --background: transparent; background: transparent; box-shadow: none; }
html[data-design="studio"] #menu ion-header ion-toolbar { --min-height: 64px; padding-top: 6px; }
html[data-design="studio"] #menu ion-title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
html[data-design="studio"] .tenant-mark { opacity: 0.85; }

html[data-design="studio"] #nav { padding: 4px 10px 12px; }
html[data-design="studio"] .nav-section { margin: 2px 0 4px; }
html[data-design="studio"] #nav .nav-section > ion-item {
  --min-height: 44px; --padding-start: 8px; --inner-padding-end: 8px; --border-radius: 12px; --color: var(--ds-text);
  --background-hover: rgba(255, 255, 255, 0.06); --background-hover-opacity: 1;
  margin: 0; font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em;
}
html[data-design="studio"] #nav .nav-section > ion-item > ion-icon,
html[data-design="studio"] #more-list ion-item > ion-icon { display: none; }
html[data-design="studio"] #nav .nav-section > ion-item.selected { --background: rgba(255, 255, 255, 0.08); --color: var(--ds-text); }
html[data-design="studio"] #nav .nav-section:not(.open) > ion-item { --color: var(--ds-text-2); }
html[data-design="studio"] #nav .nav-section:not(.open) > ion-item:hover { --color: var(--ds-text); }

/* The glyph: a small glossy tile in its section's gradient, the icon cut out in white. */
html[data-design="studio"] .glyph {
  position: relative; flex: none;
  width: 28px; height: 28px; margin-inline-end: 12px; border-radius: 8px;
  background: linear-gradient(145deg, var(--g1), var(--g2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 4px rgba(0, 0, 0, 0.18), 0 4px 14px -4px color-mix(in srgb, var(--g1) 70%, transparent);
}
html[data-design="studio"] .glyph::after {
  content: ''; position: absolute; inset: 6px; background: #fff;
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat;
}
html[data-design="studio"] .nav-section:not(.open) .glyph { filter: saturate(0.75) brightness(0.9); }

html[data-design="studio"] #nav .nav-section.open .nav-pages { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 6px 18px; position: relative; }
/* A thread from the heading down its pages. */
html[data-design="studio"] #nav .nav-section.open .nav-pages::before {
  content: ''; position: absolute; left: 21px; top: 2px; bottom: 10px; width: 1.5px; border-radius: 1px;
  background: linear-gradient(var(--g1), color-mix(in srgb, var(--g2) 30%, transparent));
  opacity: 0.55;
}
html[data-design="studio"] .nav-page {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 34px; padding: 0 10px 0 22px; border: 0; border-radius: 10px;
  background: none; color: var(--ds-text-2); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
html[data-design="studio"] .nav-page ion-icon { flex: none; font-size: 16px; opacity: 0.8; }
html[data-design="studio"] .nav-page:hover { background: rgba(255, 255, 255, 0.06); color: var(--ds-text); }
html[data-design="studio"] .nav-page.selected {
  color: #fff; font-weight: 600;
  background: linear-gradient(90deg, color-mix(in srgb, var(--g1) 34%, transparent), color-mix(in srgb, var(--g2) 18%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g1) 30%, transparent);
}
html[data-design="studio"] .nav-page.selected ion-icon { opacity: 1; }
html[data-design="studio"] .nav-page:focus-visible,
html[data-design="studio"] button:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

html[data-design="studio"] #user-foot { border-top: 1px solid var(--ds-line); }
html[data-design="studio"] #user-nav { padding: 6px 2px; }
html[data-design="studio"] #user-nav ion-item { --background-hover: rgba(255, 255, 255, 0.06); --background-hover-opacity: 1; }
html[data-design="studio"] #user-nav ion-item.selected { --background: rgba(255, 255, 255, 0.08); }
html[data-design="studio"] .avatar { background: linear-gradient(145deg, #8b97ff, #c06bff); color: #fff; }

/* Beside the master pane the header has nothing left to do: its segments are the pages in the pane. */
html[data-design="studio"][data-layout="menu"] #main > ion-header { display: none; }

/* The overflow popover. */
html[data-design="studio"] ion-popover { --background: var(--ds-sheet); --box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
html[data-design="studio"] ion-popover::part(content) { border: 1px solid var(--ds-line-2); border-radius: 14px; -webkit-backdrop-filter: var(--ds-blur); backdrop-filter: var(--ds-blur); }
html[data-design="studio"] ion-select-popover ion-list,
html[data-design="studio"] ion-popover ion-list { background: transparent; }

/* An empty pane: the mark, softly lit. */
html[data-design="studio"] .empty { border-color: var(--ds-line-2); border-radius: var(--ds-radius); color: var(--ds-text-2); background: rgba(255, 255, 255, 0.02); }
html[data-design="studio"] .empty.brand { background: none; }
html[data-design="studio"] .empty.brand .brand-mark { opacity: 0.22; }

/* ------------------------------------------------------------ 3. shell views */

html[data-design="studio"] #root:not(:has(.view-hr, .view-crm, .view-channels, .view-events, .view-fnb, .view-inventory, .view-accounting, .view-payroll, .view-gym, .view-spa, .view-store)) { --padding-top: 28px; --padding-start: 32px; --padding-end: 32px; --padding-bottom: 48px; }
html[data-design="studio"] .detail h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; }
html[data-design="studio"] .detail h1 ion-icon { color: var(--g1); }
html[data-design="studio"] .detail .desc { color: var(--ds-text-2); }
html[data-design="studio"] .detail .path { color: var(--ds-text-3); }
html[data-design="studio"] .field-label,
html[data-design="studio"] .floor h2 { color: var(--ds-text-3); letter-spacing: 0.08em; }

/* Rooms today: the hero (the night's occupancy around the section's glyph), the day's numbers, the way in. */
html[data-design="studio"] .detail.view-rack > h1,
html[data-design="studio"] .detail.view-rack > .desc,
html[data-design="studio"] .rack-summary { display: none; }
html[data-design="studio"] .today { margin: 0 0 1.75rem; }
html[data-design="studio"] .today .hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.75rem;
  padding: 1.25rem 1.75rem 1.25rem 1.25rem; margin-bottom: 1rem;
  border-radius: 26px; border: 1px solid var(--ds-line);
  background:
    radial-gradient(28rem 14rem at 0% 50%, color-mix(in srgb, var(--g1) 22%, transparent), transparent 70%),
    var(--ds-glass);
}
html[data-design="studio"] .hero-art { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
html[data-design="studio"] .hero-art svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
html[data-design="studio"] .hero-art circle { fill: none; stroke-width: 7; stroke-linecap: round; }
html[data-design="studio"] .hero-art .track { stroke: rgba(255, 255, 255, 0.08); }
html[data-design="studio"] .hero-art .fill {
  stroke: var(--g1); stroke-dasharray: var(--pct) 100;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--g1) 80%, transparent));
  animation: ds-ring 1.2s var(--ds-ease) both;
}
@keyframes ds-ring { from { stroke-dasharray: 0 100; } }
/* The glyph, large and glossy: a lit squircle with the section's icon cut out. */
html[data-design="studio"] .hero-glyph, html[data-design="studio"] .hr-root[data-page] .page-head > div:first-child::before {
  width: 78px; height: 78px; border-radius: 24px; position: relative;
  background:
    radial-gradient(120% 90% at 28% 12%, rgba(255, 255, 255, 0.55), transparent 42%),
    linear-gradient(150deg, var(--g1), var(--g2));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -6px 14px rgba(0, 0, 0, 0.22),
    0 18px 40px -12px color-mix(in srgb, var(--g1) 85%, transparent), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html[data-design="studio"] .hero-glyph::after {
  content: ''; position: absolute; inset: 20px; background: #fff;
  -webkit-mask: var(--section-glyph) center / contain no-repeat; mask: var(--section-glyph) center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}
html[data-design="studio"] .today .eyebrow { margin: 0 0 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-3); }
html[data-design="studio"] .today h2 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
html[data-design="studio"] .today .hero-text p:last-child { margin: 6px 0 0; color: var(--ds-text-2); font-size: 1rem; }

/* The orb: the one primary action, round, lit, breathing. */
html[data-design="studio"] .orb {
  position: relative; display: grid; place-items: center; align-content: center; gap: 2px;
  width: 92px; height: 92px; border-radius: 50%; border: 0; cursor: pointer;
  color: #fff; font: 600 0.8rem var(--ds-font); letter-spacing: 0.02em;
  background:
    radial-gradient(90% 70% at 30% 18%, rgba(255, 255, 255, 0.45), transparent 50%),
    linear-gradient(150deg, var(--g1), var(--g2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 14px 34px -8px color-mix(in srgb, var(--g1) 90%, transparent);
  transition: transform 0.2s var(--ds-ease), filter 0.2s;
}
html[data-design="studio"] .orb ion-icon { font-size: 26px; }
html[data-design="studio"] .orb::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--g1) 55%, transparent);
  animation: ds-pulse 2.6s ease-out infinite;
}
html[data-design="studio"] .orb:hover { transform: scale(1.04); filter: brightness(1.08); }
html[data-design="studio"] .orb:active { transform: scale(0.97); }
@keyframes ds-pulse { 0% { transform: scale(0.95); opacity: 0.9; } 100% { transform: scale(1.22); opacity: 0; } }

/* Numbers: a card each, a tone each; a card is a way in. */
html[data-design="studio"] .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.75rem; }
html[data-design="studio"] .kpi {
  --k: var(--ds-gray);
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon icon" "value value" "label label"; justify-items: start;
  gap: 2px; padding: 14px 16px 14px; border-radius: var(--ds-radius); text-align: left; cursor: pointer;
  border: 1px solid var(--ds-line); background: var(--ds-glass); color: var(--ds-text); font: inherit;
  transition: background 0.15s, transform 0.15s var(--ds-ease), border-color 0.15s;
}
html[data-design="studio"] .kpi:hover { background: var(--ds-glass-2); border-color: color-mix(in srgb, var(--k) 40%, transparent); transform: translateY(-1px); }
html[data-design="studio"] .kpi ion-icon {
  grid-area: icon; margin-bottom: 8px; padding: 7px; font-size: 18px; border-radius: 10px;
  color: var(--k); background: color-mix(in srgb, var(--k) 18%, transparent);
}
html[data-design="studio"] .kpi b { grid-area: value; font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
html[data-design="studio"] .kpi span { grid-area: label; font-size: 0.82rem; color: var(--ds-text-2); }
html[data-design="studio"] .kpi.accent { --k: var(--g1); }
html[data-design="studio"] .kpi.green { --k: var(--ds-green); }
html[data-design="studio"] .kpi.blue { --k: var(--ds-blue); }
html[data-design="studio"] .kpi.orange { --k: var(--ds-orange); }
html[data-design="studio"] .kpi.red { --k: var(--ds-red); }

/* The rack: rate as a colored rule, who sleeps there tonight, housekeeping as a quiet dot. */
html[data-design="studio"] .rates .rate { border-color: color-mix(in srgb, var(--rate) 55%, transparent); background: color-mix(in srgb, var(--rate) 10%, transparent); }
html[data-design="studio"] .floor h2 { margin: 1.5rem 0 0.7rem; }
html[data-design="studio"] .rooms { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.7rem; }
html[data-design="studio"] .room {
  position: relative; overflow: hidden;
  padding: 0.85rem 0.9rem 0.75rem; border: 1px solid var(--ds-line); border-radius: 16px;
  background: var(--ds-glass); transition: background 0.15s, transform 0.15s var(--ds-ease), border-color 0.15s;
}
html[data-design="studio"] .room::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rate); opacity: 0.85;
}
html[data-design="studio"] .room:hover { filter: none; background: var(--ds-glass-2); transform: translateY(-1px); border-color: var(--ds-line-2); }
html[data-design="studio"] .room.occupied { background: linear-gradient(160deg, color-mix(in srgb, var(--rate) 14%, transparent), var(--ds-glass) 60%); }
html[data-design="studio"] .room.oos { border-style: dashed; opacity: 0.6; }
html[data-design="studio"] .room-no { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
html[data-design="studio"] .room-rate { font-size: 0.7rem; letter-spacing: 0.02em; }
html[data-design="studio"] .room-guest { align-items: center; gap: 5px; margin-top: 2px; font-size: 0.82rem; font-weight: 600; color: #fff; min-width: 0; }
html[data-design="studio"] .room-guest span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-design="studio"] .room-guest ion-icon { flex: none; font-size: 12px; color: var(--rate); }
html[data-design="studio"] .room-beds { color: var(--ds-text-2); }
html[data-design="studio"] .room-meta { color: var(--ds-text-3); font-size: 0.75rem; }
/* Housekeeping badges: a tinted pill with a dot, not a block of color. */
html[data-design="studio"] ion-badge.hk {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 7px; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--ion-color-base) 16%, transparent); color: var(--ion-color-base);
}
html[data-design="studio"] ion-badge.hk::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Room and rate management: the list and the editor as two frosted panels. */
html[data-design="studio"] .manage { gap: 1rem; }
html[data-design="studio"] .manage .master,
html[data-design="studio"] .editor {
  padding: 1rem; border-radius: 22px; border: 1px solid var(--ds-line); background: var(--ds-glass);
}
html[data-design="studio"] .editor { padding: 1.25rem 1.4rem; }
html[data-design="studio"] .master-bar ion-searchbar { --background: rgba(255, 255, 255, 0.07); --border-radius: 12px; --box-shadow: none; --color: var(--ds-text); --placeholder-color: var(--ds-text-3); }
html[data-design="studio"] .filters ion-select { border-color: var(--ds-line-2); background: rgba(255, 255, 255, 0.03); }
html[data-design="studio"] .count { color: var(--ds-text-3); }
html[data-design="studio"] .pod-list { background: transparent; }
html[data-design="studio"] .pod-list ion-item {
  --background: transparent; --background-hover: rgba(255, 255, 255, 0.06); --background-hover-opacity: 1; --border-color: var(--ds-line);
  --border-radius: 12px; border-left: 0; position: relative;
}
html[data-design="studio"] .pod-list ion-item::before {
  content: ''; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--rate, transparent); z-index: 1;
}
html[data-design="studio"] .pod-list ion-item.selected { --background: color-mix(in srgb, var(--g1) 22%, transparent); }
html[data-design="studio"] .editor-title h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.03em; }
html[data-design="studio"] .form ion-item,
html[data-design="studio"] .profile .form ion-item { --background: rgba(255, 255, 255, 0.05); --border-radius: 12px; border: 1px solid var(--ds-line); border-radius: 12px; }
html[data-design="studio"] ion-segment { --background: rgba(255, 255, 255, 0.07); border-radius: 10px; }
html[data-design="studio"] ion-segment-button { --indicator-color: rgba(255, 255, 255, 0.16); --color: var(--ds-text-2); --color-checked: #fff; --border-radius: 8px; --indicator-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); }
html[data-design="studio"] .features ion-chip { --background: rgba(255, 255, 255, 0.06); --color: var(--ds-text-2); border-color: var(--ds-line-2); }
html[data-design="studio"] .features ion-chip.ion-color-primary { --background: color-mix(in srgb, var(--g1) 28%, transparent); --color: #fff; border-color: transparent; }
html[data-design="studio"] .confirm { border: 1px solid rgba(255, 107, 107, 0.3); }

/* Profile: one frosted card. */
html[data-design="studio"] .detail.view-profile { max-width: 38rem; }
html[data-design="studio"] .profile { max-width: none; padding: 1.5rem; border-radius: 24px; border: 1px solid var(--ds-line); background: var(--ds-glass); }
html[data-design="studio"] .profile > ion-segment { margin-bottom: 1.25rem; }

/* ------------------------------------------------------------ 4. the tape and the stay panel */

html[data-design="studio"] .tape-bar { padding: 0.6rem 1rem; border-bottom: 1px solid var(--ds-line); background: rgba(10, 9, 24, 0.35); -webkit-backdrop-filter: var(--ds-blur); backdrop-filter: var(--ds-blur); }
html[data-design="studio"] .stat { padding: 0.25rem 0.7rem; background: rgba(255, 255, 255, 0.07); color: var(--ds-text-2); border: 1px solid var(--ds-line); }
html[data-design="studio"] .stat b { color: #fff; }
html[data-design="studio"] .stat.warn { background: rgba(255, 173, 66, 0.16); border-color: rgba(255, 173, 66, 0.35); }
html[data-design="studio"] .stat.bad { background: rgba(255, 107, 107, 0.18); border-color: rgba(255, 107, 107, 0.4); }
html[data-design="studio"] .tape-tools ion-button { --border-radius: 10px; }
html[data-design="studio"] .tape-hint { color: var(--ds-text-3); }
html[data-design="studio"] #tape { background: rgba(6, 5, 16, 0.38); }
html[data-design="studio"] #tape .vis-timeline { font-size: 0.8rem; }
html[data-design="studio"] #tape .vis-panel.vis-top, html[data-design="studio"] #tape .vis-panel.vis-left,
html[data-design="studio"] #tape .vis-panel.vis-center, html[data-design="studio"] #tape .vis-panel.vis-bottom,
html[data-design="studio"] #tape .vis-labelset .vis-label, html[data-design="studio"] #tape .vis-foreground .vis-group { border-color: rgba(255, 255, 255, 0.06); }
html[data-design="studio"] #tape .vis-time-axis .vis-grid.vis-minor { border-color: rgba(255, 255, 255, 0.05); }
html[data-design="studio"] #tape .vis-time-axis .vis-grid.vis-saturday, html[data-design="studio"] #tape .vis-time-axis .vis-grid.vis-sunday { background: rgba(255, 255, 255, 0.025); }
html[data-design="studio"] #tape .vis-time-axis .vis-grid.vis-today { background: color-mix(in srgb, var(--g1) 12%, transparent); }
html[data-design="studio"] #tape .vis-current-time { background: var(--ds-red); box-shadow: 0 0 8px var(--ds-red); }
html[data-design="studio"] #tape .vis-label.lane-floor { background: rgba(255, 255, 255, 0.04); }
html[data-design="studio"] #tape .vis-label.lane-floor .vis-inner { color: var(--ds-text-3); }
html[data-design="studio"] #tape .vis-label.lane-unassigned { background: rgba(255, 173, 66, 0.1); }
/* Bars: filled by status, lit when in focus. */
html[data-design="studio"] #tape .vis-item.bar {
  border-radius: 8px; color: #fff;
  background: linear-gradient(180deg, rgba(90, 150, 255, 0.5), rgba(70, 120, 240, 0.38)); border-color: rgba(120, 170, 255, 0.75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
html[data-design="studio"] #tape .vis-item.bar.st-in_house { background: linear-gradient(180deg, rgba(61, 220, 132, 0.48), rgba(40, 180, 110, 0.36)); border-color: rgba(61, 220, 132, 0.8); }
html[data-design="studio"] #tape .vis-item.bar.st-hold { background: rgba(255, 255, 255, 0.06); border-style: dashed; border-color: rgba(255, 255, 255, 0.45); color: var(--ds-text-2); }
html[data-design="studio"] #tape .vis-item.bar.st-checked_out { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.16); color: var(--ds-text-3); }
html[data-design="studio"] #tape .vis-item.bar.in-group { border-left: 4px solid #c48bff; }
html[data-design="studio"] #tape .vis-item.bar.conflict { border-color: var(--ds-red); }
html[data-design="studio"] #tape .vis-item.bar.focused { box-shadow: 0 0 0 2px #fff, 0 0 18px color-mix(in srgb, var(--g1) 80%, transparent); }
html[data-design="studio"] #tape .vis-tooltip { color: #fff; background: var(--ds-sheet); border: 1px solid var(--ds-line-2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
html[data-design="studio"] .bar-tag { background: rgba(196, 139, 255, 0.3); }

/* The stay panel: frosted, its head a card, the rest in parts that open on demand. */
html[data-design="studio"] .stay-panel {
  padding: 1rem 1.15rem 2rem; border-left: 1px solid var(--ds-line);
  background: var(--ds-panel); -webkit-backdrop-filter: var(--ds-blur); backdrop-filter: var(--ds-blur);
}
html[data-design="studio"] .stay-panel h2 { font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; }
html[data-design="studio"] .stay-panel .code { color: var(--ds-text-3); display: flex; align-items: center; gap: 6px; }
html[data-design="studio"] .stay-panel .code ion-badge { border-radius: 999px; padding: 3px 8px; font-size: 0.7rem; }
html[data-design="studio"] .stay-summary { grid-template-columns: 1fr 1.3fr 1.3fr; gap: 6px; margin: 0.85rem 0 0.25rem; }
html[data-design="studio"] .stay-summary > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ds-line); min-width: 0; }
html[data-design="studio"] .stay-summary span { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ds-text-3); }
html[data-design="studio"] .stay-summary b { font-size: 1.05rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
html[data-design="studio"] .stay-summary .due { background: rgba(255, 173, 66, 0.12); border-color: rgba(255, 173, 66, 0.3); }
html[data-design="studio"] .stay-summary .due b { color: var(--ds-orange); }
html[data-design="studio"] .stay-panel .actions { margin-top: 0.75rem; }
html[data-design="studio"] .stay-panel .actions ion-button { --border-radius: 999px; }
html[data-design="studio"] .stay-panel h3 { margin: 1.35rem 0 0.45rem; color: var(--ds-text-3); letter-spacing: 0.08em; }
html[data-design="studio"] .stay-panel ion-select, html[data-design="studio"] .stay-panel ion-input,
html[data-design="studio"] .stay-panel select, html[data-design="studio"] .stay-panel input,
html[data-design="studio"] .stay-panel ion-textarea {
  border-color: var(--ds-line-2); border-radius: 10px; background: rgba(255, 255, 255, 0.05);
}
html[data-design="studio"] .stay-panel input:focus, html[data-design="studio"] .stay-panel select:focus { outline: 0; border-color: var(--ds-accent); box-shadow: 0 0 0 3px rgba(139, 151, 255, 0.2); }
html[data-design="studio"] .stay-panel select option { background: #1a1730; }
html[data-design="studio"] .stay-panel .muted { color: var(--ds-text-2); }
html[data-design="studio"] .stay-panel .path { opacity: 0.6; }

/* A part: its heading and what it holds on one line; open, its fields below. */
html[data-design="studio"] .fold { margin-top: 0.6rem; border-radius: 14px; border: 1px solid var(--ds-line); background: rgba(255, 255, 255, 0.035); }
html[data-design="studio"] .fold > summary {
  display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; cursor: pointer; list-style: none; border-radius: 14px;
}
html[data-design="studio"] .fold > summary::-webkit-details-marker { display: none; }
html[data-design="studio"] .fold > summary:hover { background: rgba(255, 255, 255, 0.04); }
html[data-design="studio"] .fold > summary::after {
  content: ''; margin-left: auto; align-self: center; flex: none; width: 7px; height: 7px;
  border-right: 1.5px solid var(--ds-text-3); border-bottom: 1.5px solid var(--ds-text-3); transform: rotate(-45deg); transition: transform 0.2s var(--ds-ease);
}
html[data-design="studio"] .fold[open] > summary::after { transform: rotate(45deg); }
html[data-design="studio"] .stay-panel .fold > summary h3 { margin: 0; flex: none; }
html[data-design="studio"] .fold-value { min-width: 0; font-size: 0.88rem; color: var(--ds-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-design="studio"] .fold[open] .fold-value { display: none; }
/* Padding on the card, not margins on its contents: full-width fields (a textarea) then fit inside it. */
html[data-design="studio"] .fold:not(.reveal) { padding: 0 12px; }
html[data-design="studio"] .fold:not(.reveal) > summary { margin: 0 -12px; }
html[data-design="studio"] .fold:not(.reveal)[open] { padding-bottom: 12px; }
html[data-design="studio"] .fold > :not(summary) { box-sizing: border-box; max-width: 100%; }
html[data-design="studio"] .fold ion-textarea { width: 100%; }
/* A form behind a link. */
html[data-design="studio"] .fold.reveal { border: 0; background: none; margin-top: 0.25rem; }
html[data-design="studio"] .fold.reveal > summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; margin-left: -8px; color: var(--ds-accent); font-size: 0.88rem; font-weight: 500; }
html[data-design="studio"] .fold.reveal > summary::after { display: none; }
html[data-design="studio"] .fold.reveal > :not(summary) { margin-top: 4px; }
html[data-design="studio"] .ledger td { border-color: var(--ds-line); }
html[data-design="studio"] .ledger tr.total td { color: #fff; }

/* ------------------------------------------------------------ 5. modules */

/* The modules share one look (lab/05-hr/ui.css, .hr): its tokens, set to the glass. */
html[data-design="studio"] .hr {
  --bg: transparent;
  --surface: var(--ds-glass);
  --surface-2: rgba(255, 255, 255, 0.03);
  --sidebar: rgba(10, 9, 24, 0.42);
  --fill: rgba(255, 255, 255, 0.08);
  --fill-2: rgba(255, 255, 255, 0.05);
  --hairline: var(--ds-line);
  --label: var(--ds-text);
  --secondary: var(--ds-text-2);
  --tertiary: var(--ds-text-3);
  --accent: var(--ds-accent);
  --accent-soft: rgba(139, 151, 255, 0.18);
  --green: var(--ds-green); --orange: var(--ds-orange); --red: var(--ds-red); --yellow: #ffd65a; --indigo: #a08bff; --gray: var(--ds-gray);
  --shadow: none;
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.6);
  --radius: var(--ds-radius);
  --font: var(--ds-font);
  color-scheme: dark;
}
/* Sheets float over the page: nearly opaque, frosted. */
html[data-design="studio"] .hr.sheet { --surface: #1c1934; --surface-2: #221f3c; background: var(--ds-sheet); border: 1px solid var(--ds-line-2); -webkit-backdrop-filter: var(--ds-blur); backdrop-filter: var(--ds-blur); }
html[data-design="studio"] .hr.sheet::backdrop { background: rgba(4, 3, 12, 0.55); }

html[data-design="studio"] .hr .card { border: 1px solid var(--ds-line); }
html[data-design="studio"] .hr .page { padding-top: 32px; }
html[data-design="studio"] .hr h1 { font-weight: 700; letter-spacing: -0.03em; }
html[data-design="studio"] .hr .eyebrow { color: var(--ds-text-3); letter-spacing: 0.08em; font-size: 12px; }

/* A section's front page (Today, Overview): the glossy glyph before its title, like Rooms today. */
html[data-design="studio"] .hr-root:is([data-page="overview"], [data-page="today"]) .page-head > div:first-child { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 18px; align-items: end; }
html[data-design="studio"] .hr-root:is([data-page="overview"], [data-page="today"]) .page-head > div:first-child::before {
  content: ''; grid-row: 1 / span 2; width: 64px; height: 64px; border-radius: 20px; align-self: center;
}
html[data-design="studio"] .hr-root:is([data-page="overview"], [data-page="today"]) .page-head > div:first-child::after {
  content: ''; position: absolute; width: 34px; height: 34px; margin: 15px; background: #fff; pointer-events: none;
  -webkit-mask: var(--section-glyph) center / contain no-repeat; mask: var(--section-glyph) center / contain no-repeat;
}
html[data-design="studio"] .hr-root:is([data-page="overview"], [data-page="today"]) .page-head > div:first-child { position: relative; }
html[data-design="studio"] .hr-root:is([data-page="overview"], [data-page="today"]) .page-head > div:first-child > * { grid-column: 2; }

/* Primary buttons: the section's gradient, lit. */
html[data-design="studio"] .hr .btn { background: rgba(255, 255, 255, 0.09); }
html[data-design="studio"] .hr .btn:hover { background: rgba(255, 255, 255, 0.14); filter: none; }
html[data-design="studio"] .hr .btn.primary {
  background: linear-gradient(150deg, var(--g1), var(--g2)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 22px -8px color-mix(in srgb, var(--g1) 90%, transparent);
}
html[data-design="studio"] .hr .btn.primary:hover { filter: brightness(1.08); }
html[data-design="studio"] .hr .btn.destructive { background: rgba(255, 107, 107, 0.14); }

/* Number tiles: a lit edge in the section's colors. */
html[data-design="studio"] .hr .stats .tile { position: relative; overflow: hidden; padding: 16px 18px; }
html[data-design="studio"] .hr .stats .tile::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--g1), var(--g2)); opacity: 0.85;
}
html[data-design="studio"] .hr .stats .tile::after {
  content: ''; position: absolute; right: -30px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--g1) 22%, transparent), transparent 70%); pointer-events: none;
}
html[data-design="studio"] .hr .tile b { font-size: 30px; }
html[data-design="studio"] .hr .task-icon { border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* Lists: a darker frosted pane; the selected row in the section's color. */
html[data-design="studio"] .hr .list-pane { background: rgba(8, 7, 20, 0.28); }
html[data-design="studio"] .hr .list h3 { background: rgba(14, 12, 30, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-design="studio"] .hr .row-btn.on { background: linear-gradient(90deg, color-mix(in srgb, var(--g1) 42%, transparent), color-mix(in srgb, var(--g2) 26%, transparent)); color: #fff; }
html[data-design="studio"] .hr .search { background: rgba(255, 255, 255, 0.07); }
html[data-design="studio"] .hr .chip.on { background: #fff; color: #15132b; }
html[data-design="studio"] .hr .seg button.on { background: rgba(255, 255, 255, 0.16); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }
html[data-design="studio"] .hr .blank { color: var(--ds-text-3); }
html[data-design="studio"] .hr .field input, html[data-design="studio"] .hr .field select, html[data-design="studio"] .hr .field textarea { background: rgba(255, 255, 255, 0.05); }
html[data-design="studio"] .hr select option { background: #1a1730; color: #fff; }
html[data-design="studio"] .hr .org-canvas { background-color: transparent; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px); }
html[data-design="studio"] .hr .org-body { fill: #1b1834; }
html[data-design="studio"] .hr .org-body.open { fill: #15132b; }
html[data-design="studio"] .hr .org-inspector, html[data-design="studio"] .crm .board-page.inspecting > :last-child { background: var(--ds-panel); }
html[data-design="studio"] .hr .toast { background: rgba(28, 25, 52, 0.92); border: 1px solid var(--ds-line-2); }
/* Paper stays paper. */
html[data-design="studio"] .hr .viewer .stage { background: rgba(0, 0, 0, 0.25); }

/* ------------------------------------------------------------ 6. phone, motion */

html[data-design="studio"][data-layout="tabs"] #root:not(:has(.view-hr, .view-crm, .view-channels, .view-events, .view-fnb, .view-inventory, .view-accounting, .view-payroll, .view-gym, .view-spa)) { --padding-top: 16px; --padding-start: 16px; --padding-end: 16px; }
html[data-design="studio"][data-layout="tabs"] #main > ion-header { background: rgba(10, 9, 24, 0.45); -webkit-backdrop-filter: var(--ds-blur); backdrop-filter: var(--ds-blur); border-bottom: 1px solid var(--ds-line); }
html[data-design="studio"][data-layout="tabs"] #segments ion-segment-button { --indicator-color: var(--g1); --color-checked: #fff; }
html[data-design="studio"] ion-tab-bar { --border: 1px solid var(--ds-line); -webkit-backdrop-filter: var(--ds-blur); backdrop-filter: var(--ds-blur); }
html[data-design="studio"] ion-tab-button { --color: var(--ds-text-3); --color-selected: #fff; }
html[data-design="studio"][data-layout="tabs"] .manage .master,
html[data-design="studio"][data-layout="tabs"] .editor { padding: 0.75rem; }
html[data-design="studio"][data-layout="tabs"] .stay-panel { background: rgba(14, 12, 30, 0.96); }

@media (max-width: 720px) {
  html[data-design="studio"] .today .hero { grid-template-columns: auto minmax(0, 1fr); padding: 1rem; gap: 1rem; }
  html[data-design="studio"] .hero-art { width: 96px; height: 96px; }
  html[data-design="studio"] .hero-glyph { width: 56px; height: 56px; border-radius: 18px; }
  html[data-design="studio"] .hero-glyph::after { inset: 14px; }
  html[data-design="studio"] .today h2 { font-size: 1.3rem; }
  html[data-design="studio"] .orb { grid-column: 1 / -1; display: flex; justify-content: center; width: 100%; height: 48px; border-radius: 999px; gap: 8px; }
  html[data-design="studio"] .orb ion-icon { font-size: 20px; }
  html[data-design="studio"] .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-design="studio"] .rooms { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-design="studio"] { transition: none; }
  html[data-design="studio"] .orb::before, html[data-design="studio"] .hero-art .fill { animation: none; }
  html[data-design="studio"] .kpi, html[data-design="studio"] .room, html[data-design="studio"] .orb { transition: none; }
}

/* ------------------------------------------------------------ 7. material

   Skeuomorphism, kept soft: things you can press are raised (a lit top edge, a shadow under), places you type
   into are wells (shaded from above), and the glass has a faint grain so large areas don't glare. Every surface
   takes these four tokens; set them to `none` for a flat Studio. */

html[data-design="studio"] {
  --ds-face: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.03));
  --ds-face-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
  --ds-raised:
    inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px -14px rgba(0, 0, 0, 0.7);
  --ds-raised-hi:
    inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.35), 0 18px 36px -14px rgba(0, 0, 0, 0.75);
  --ds-pressed: inset 0 2px 5px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.2);
  --ds-well: inset 0 2px 4px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.22), 0 1px 0 rgba(255, 255, 255, 0.06);
  --ds-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Grain over the whole window, under nothing you touch. */
html[data-design="studio"] ion-app::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: var(--ds-grain); opacity: 0.035; mix-blend-mode: overlay;
}

/* Raised: cards, tiles, panels. */
html[data-design="studio"] :is(.kpi, .room, .manage .master, .editor, .profile, .today .hero, .stay-summary > div, .fold:not(.reveal), .hr .card) {
  background-image: var(--ds-face); box-shadow: var(--ds-raised); border-color: rgba(255, 255, 255, 0.07);
}
html[data-design="studio"] .today .hero {
  background-image: radial-gradient(28rem 14rem at 0% 50%, color-mix(in srgb, var(--g1) 22%, transparent), transparent 70%), var(--ds-face);
}
html[data-design="studio"] .room.occupied { background-image: linear-gradient(160deg, color-mix(in srgb, var(--rate) 16%, transparent), transparent 60%), var(--ds-face); }
html[data-design="studio"] :is(.kpi, .room):hover { background-image: var(--ds-face-hover); box-shadow: var(--ds-raised-hi); }
html[data-design="studio"] .room.occupied:hover { background-image: linear-gradient(160deg, color-mix(in srgb, var(--rate) 20%, transparent), transparent 60%), var(--ds-face-hover); }
html[data-design="studio"] :is(.kpi, .room):active { transform: translateY(0); box-shadow: var(--ds-pressed); }
html[data-design="studio"] .stay-summary .due { background-image: linear-gradient(180deg, rgba(255, 173, 66, 0.16), rgba(255, 173, 66, 0.07)); }
html[data-design="studio"] .kpi ion-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.3); }

/* The master pane is a shelf: lit at its edge, the content set back beside it. */
html[data-design="studio"] #menu { box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06), 6px 0 24px -12px rgba(0, 0, 0, 0.6); }
html[data-design="studio"] #nav .nav-section > ion-item.selected { --background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.04)); box-shadow: var(--ds-raised); border-radius: 12px; }
html[data-design="studio"] .nav-page.selected { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px color-mix(in srgb, var(--g1) 30%, transparent), 0 4px 12px -6px color-mix(in srgb, var(--g1) 80%, transparent); }

/* Buttons are physical: a face, a lit edge, and they go in when pressed. */
html[data-design="studio"] ion-button:not([fill="clear"]) { --box-shadow: var(--ds-raised); }
html[data-design="studio"] ion-button:not([fill="clear"]):active { --box-shadow: var(--ds-pressed); }
html[data-design="studio"] ion-button[fill="solid"], html[data-design="studio"] ion-button:not([fill]) {
  --background: linear-gradient(180deg, #a3adff, #7884f0); --background-hover: linear-gradient(180deg, #adb6ff, #8390f5); --color: #11102a;
}
html[data-design="studio"] .hr .btn { background-image: var(--ds-face); box-shadow: var(--ds-raised); }
html[data-design="studio"] .hr .btn:active { box-shadow: var(--ds-pressed); transform: none; }
html[data-design="studio"] .hr .btn.plain, html[data-design="studio"] .hr .link { background: none; box-shadow: none; }
html[data-design="studio"] .hr .btn.primary { background-image: radial-gradient(90% 80% at 30% 0%, rgba(255, 255, 255, 0.3), transparent 60%), linear-gradient(150deg, var(--g1), var(--g2)); }
html[data-design="studio"] .orb:active { box-shadow: var(--ds-pressed); }
html[data-design="studio"] .hr .chip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.3); }
html[data-design="studio"] .hr .chip.on { background: linear-gradient(180deg, #ffffff, #e4e2f0); }

/* Wells: where you type, choose, or read a level. */
html[data-design="studio"] :is(.stay-panel input, .stay-panel select, .stay-panel ion-select, .stay-panel ion-input, .stay-panel ion-textarea,
  .hr .search, .hr .field input, .hr .field select, .hr .field textarea, .crm .field input, .crm .field select, .crm .field textarea) {
  background: rgba(0, 0, 0, 0.22); box-shadow: var(--ds-well); border-color: rgba(0, 0, 0, 0.25);
}
html[data-design="studio"] .master-bar ion-searchbar { --background: rgba(0, 0, 0, 0.22); --box-shadow: var(--ds-well); }
html[data-design="studio"] :is(.form ion-item, .profile .form ion-item) { --background: rgba(0, 0, 0, 0.18); box-shadow: var(--ds-well); border-color: rgba(0, 0, 0, 0.2); }
html[data-design="studio"] .filters ion-select { background: rgba(0, 0, 0, 0.18); box-shadow: var(--ds-well); }
/* Segments: a groove with a raised key. */
html[data-design="studio"] ion-segment { --background: rgba(0, 0, 0, 0.25); box-shadow: var(--ds-well); }
html[data-design="studio"] ion-segment-button { --indicator-color: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); --indicator-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.45); }
html[data-design="studio"] .hr .seg { background: rgba(0, 0, 0, 0.25); box-shadow: var(--ds-well); }
html[data-design="studio"] .hr .seg button.on { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.45); }
/* Levels: a groove, filled with something lit. */
html[data-design="studio"] :is(.hr .progress, .events .bar, .channels .mix-row .bar) { background: rgba(0, 0, 0, 0.3); box-shadow: var(--ds-well); }
html[data-design="studio"] :is(.events .bar > span, .channels .mix-row .bar span) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
html[data-design="studio"] .hero-art .track { stroke: rgba(0, 0, 0, 0.35); }
html[data-design="studio"] .hero-art::before {
  content: ''; position: absolute; inset: 9px; border-radius: 50%;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* The tape's bars: lozenges with a lit top. */
html[data-design="studio"] #tape .vis-item.bar { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.35); }
html[data-design="studio"] #tape .vis-item.bar.focused { box-shadow: 0 0 0 2px #fff, 0 0 18px color-mix(in srgb, var(--g1) 80%, transparent); }
html[data-design="studio"] .stat { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.3); }

/* ------------------------------------------------------------ 8. the master pane's switch, the rail, the Assistant, New reservation */

html[data-design="studio"] #master-mode { margin: 2px 12px 10px; background: rgba(0, 0, 0, 0.25); box-shadow: var(--ds-well); }
html[data-design="studio"] #master-mode button { color: var(--ds-text-2); }
html[data-design="studio"] #master-mode button.on { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.45); }
html[data-design="studio"] #master-mode button[data-mode="assistant"] ion-icon { color: #c9a8ff; }
html[data-design="studio"] #rail-toggle { color: var(--ds-text-3); }
html[data-design="studio"][data-rail="on"] .glyph { width: 34px; height: 34px; border-radius: 10px; }
html[data-design="studio"][data-rail="on"] .glyph::after { inset: 8px; }
html[data-design="studio"][data-rail="on"] #nav .nav-section > ion-item { --min-height: 48px; }
html[data-design="studio"][data-rail="on"] #nav .nav-section.open .glyph { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 6px 18px -4px color-mix(in srgb, var(--g1) 90%, transparent); }
html[data-design="studio"] .panel-toggle { --color: var(--ds-text-3); }
html[data-design="studio"][data-panel="collapsed"] .panel-toggle { --color: var(--ds-accent); }

/* The Assistant: the pane's glass, a violet accent of its own. */
html[data-design="studio"] #assistant { --as-accent: #a98bff; }
html[data-design="studio"] .as-head, html[data-design="studio"] .as-compose { background: linear-gradient(rgba(14, 12, 30, 0.85), rgba(14, 12, 30, 0.85)); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-design="studio"] .as-status { color: var(--ds-text-2); }
html[data-design="studio"] .as-icon { color: var(--ds-text-3) !important; }
html[data-design="studio"] .as-icon.on { color: #c9b6ff !important; background: rgba(169, 139, 255, 0.16); }
html[data-design="studio"] .as-settings { background-image: var(--ds-face); box-shadow: var(--ds-raised); border: 1px solid var(--ds-line); background-color: transparent; }
html[data-design="studio"] .as-seg { background: rgba(0, 0, 0, 0.25); box-shadow: var(--ds-well); }
html[data-design="studio"] .as-seg button { color: var(--ds-text-2); }
html[data-design="studio"] .as-seg button.on { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.45); }
html[data-design="studio"] .as-settings select, html[data-design="studio"] .as-settings textarea { background: rgba(0, 0, 0, 0.22); box-shadow: var(--ds-well); border-color: rgba(0, 0, 0, 0.25); }
html[data-design="studio"] .as-settings select option { background: #1a1730; }
html[data-design="studio"] .as-try { background-image: var(--ds-face); box-shadow: var(--ds-raised); }
html[data-design="studio"] .as-msg.user { color: #fff; background: linear-gradient(160deg, #8f74ff, #6a55e0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 12px -6px rgba(120, 90, 255, 0.8); }
html[data-design="studio"] .as-msg.assistant { background-image: var(--ds-face); box-shadow: var(--ds-raised); border: 1px solid var(--ds-line); background-color: transparent; }
html[data-design="studio"] .as-tool { background: rgba(255, 255, 255, 0.05); color: var(--ds-text-2); border: 1px solid var(--ds-line); }
html[data-design="studio"] .as-tool ion-icon { color: var(--ds-green); }
html[data-design="studio"] .as-tool.bad { color: #ffb3b3; }
html[data-design="studio"] .as-tool.bad ion-icon { color: var(--ds-red); }
html[data-design="studio"] .as-tool button { background: rgba(169, 139, 255, 0.2); color: #d9ccff !important; }
html[data-design="studio"] .as-warn { background: rgba(255, 173, 66, 0.1); border: 1px solid rgba(255, 173, 66, 0.25); color: var(--ds-text); }
html[data-design="studio"] .as-hello p { color: var(--ds-text-2); }
/* The orb: lit glass, like Rooms', breathing while it speaks. */
html[data-design="studio"] .as-orb {
  width: 92px; height: 92px;
  background: radial-gradient(90% 70% at 30% 18%, rgba(255, 255, 255, 0.5), transparent 50%), linear-gradient(150deg, #b48bff, #5b6cff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 16px 40px -10px rgba(140, 110, 255, 0.95), 0 0 0 calc(var(--level) * 18px) rgba(169, 139, 255, 0.18);
}
html[data-design="studio"] .as-orb::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(169, 139, 255, 0.5); animation: ds-pulse 2.6s ease-out infinite; }
html[data-design="studio"] #assistant:is([data-status="listening"], [data-status="hearing"]) .as-orb { background: radial-gradient(90% 70% at 30% 18%, rgba(255, 255, 255, 0.5), transparent 50%), linear-gradient(150deg, #ff7a8a, #e0457b); }
html[data-design="studio"] .as-chips button { background-image: var(--ds-face); box-shadow: var(--ds-raised); border-color: rgba(255, 255, 255, 0.07); color: var(--ds-text); }
html[data-design="studio"] .as-chips button:hover { background-image: var(--ds-face-hover); }
html[data-design="studio"] .as-compose textarea { background: rgba(0, 0, 0, 0.25); box-shadow: var(--ds-well); border-color: rgba(0, 0, 0, 0.25); }
html[data-design="studio"] .as-mic { background-image: var(--ds-face); box-shadow: var(--ds-raised); background-color: transparent; }
html[data-design="studio"] .as-send { background: linear-gradient(150deg, #a98bff, #6a55e0); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px -4px rgba(120, 90, 255, 0.9); color: #fff !important; }

/* New reservation: rooms as small keys in their rate's color, the total on a lit shelf. */
html[data-design="studio"] .rz-dates label { color: var(--ds-text-3); letter-spacing: 0.04em; }
html[data-design="studio"] .rz-step { border-color: var(--ds-line); background: rgba(0, 0, 0, 0.22); box-shadow: var(--ds-well); }
html[data-design="studio"] .rz-step button { background-image: var(--ds-face); box-shadow: var(--ds-raised); background-color: transparent; }
html[data-design="studio"] .rz-step button:active { box-shadow: var(--ds-pressed); }
html[data-design="studio"] .rz-count { color: var(--ds-text-2); }
html[data-design="studio"] :is(.rz-room, .rz-later) { border: 1px solid rgba(255, 255, 255, 0.07); background-image: var(--ds-face); box-shadow: var(--ds-raised); }
html[data-design="studio"] .rz-room { border-top: 3px solid var(--rate); }
html[data-design="studio"] :is(.rz-room, .rz-later):hover { background-image: var(--ds-face-hover); }
html[data-design="studio"] :is(.rz-room, .rz-later).on {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--rate, var(--g1)) 40%, transparent), color-mix(in srgb, var(--rate, var(--g1)) 18%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 2px color-mix(in srgb, var(--rate, var(--g1)) 80%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--rate, var(--g1)) 90%, transparent);
}
html[data-design="studio"] .rz-room small, html[data-design="studio"] .rz-rate span { color: var(--ds-text-3); }
html[data-design="studio"] .rz-matches button:hover { background: rgba(255, 255, 255, 0.06); }
html[data-design="studio"] .rz-guest { background-image: var(--ds-face); box-shadow: var(--ds-raised); border: 1px solid var(--ds-line); }
html[data-design="studio"] .rz-new { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.03); }
html[data-design="studio"] .rz textarea, html[data-design="studio"] .rz-search { background: rgba(0, 0, 0, 0.22); box-shadow: var(--ds-well); border-color: rgba(0, 0, 0, 0.25); border-radius: 10px; }
html[data-design="studio"] .rz-foot {
  border-top: 1px solid var(--ds-line-2); background: rgba(22, 19, 44, 0.92); -webkit-backdrop-filter: var(--ds-blur); backdrop-filter: var(--ds-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 -12px 30px -12px rgba(0, 0, 0, 0.7);
}
html[data-design="studio"] .rz-total b { color: #fff; }
html[data-design="studio"] .rz-total small { color: var(--ds-text-2); }

/* ------------------------------------------------------------ 9. the phone's tab bar: a floating, frosted shelf */

html[data-design="studio"] #footer { padding: 0 10px calc(8px + env(safe-area-inset-bottom)); background: transparent; box-shadow: none; }
html[data-design="studio"] #footer::before { display: none; }
html[data-design="studio"] ion-tab-bar {
  --background: rgba(20, 17, 40, 0.72); --border: 0; height: 62px; padding: 0 4px; border-radius: 22px;
  -webkit-backdrop-filter: var(--ds-blur); backdrop-filter: var(--ds-blur);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 14px 34px -10px rgba(0, 0, 0, 0.8);
  padding-bottom: 0;
}
html[data-design="studio"] ion-tab-button { --color: var(--ds-text-3); --color-selected: #fff; --background: transparent; --ripple-color: transparent; font-size: 10.5px; letter-spacing: 0.01em; border-radius: 16px; }
html[data-design="studio"] ion-tab-button > ion-icon { display: none; }
html[data-design="studio"] ion-tab-button[tab="more"] > ion-icon { display: block; font-size: 22px; }
html[data-design="studio"] ion-tab-button .glyph { display: inline-block; width: 26px; height: 26px; margin: 0 0 3px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); box-shadow: none; transition: background 0.2s, box-shadow 0.2s; }
html[data-design="studio"] ion-tab-button .glyph::after { inset: 5px; background: rgba(255, 255, 255, 0.6); }
/* The selected tab lights its section's glyph. */
html[data-design="studio"] ion-tab-button.tab-selected .glyph {
  background: linear-gradient(145deg, var(--g1), var(--g2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 12px -2px color-mix(in srgb, var(--g1) 80%, transparent);
}
html[data-design="studio"] ion-tab-button.tab-selected .glyph::after { background: #fff; }
html[data-design="studio"] ion-tab-button.tab-selected { --color-selected: #fff; font-weight: 600; }
html[data-design="studio"] .user-tab .avatar { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.2); }
html[data-design="studio"] .user-tab.tab-selected .avatar { box-shadow: 0 0 0 2px #fff; }
html[data-design="studio"][data-rail="on"] #nav .nav-section.open .nav-pages { display: none; }
html[data-design="studio"] .user-tab ion-label { font-size: 10.5px; }
html[data-design="studio"] .user-tab .avatar { width: 26px; height: 26px; margin-bottom: 3px; font-size: 10px; }
@media (max-width: 720px) { html[data-design="studio"] .orb::before { display: none; } }

/* ------------------------------------------------------------ 10. segments, discounts, fit */

html[data-design="studio"] :is(.seg-days, .rz-nights) { background: rgba(0, 0, 0, 0.25); box-shadow: var(--ds-well); }
html[data-design="studio"] :is(.seg-days, .rz-nights) button { color: var(--ds-text-2); }
html[data-design="studio"] :is(.seg-days, .rz-nights) button.on { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.09)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 3px rgba(0, 0, 0, 0.45); }
html[data-design="studio"] .rz-nights span, html[data-design="studio"] .rz-selects label { color: var(--ds-text-3); }
html[data-design="studio"] .rz-selects select { background: rgba(0, 0, 0, 0.22); box-shadow: var(--ds-well); border-color: rgba(0, 0, 0, 0.25); border-radius: 10px; min-height: 36px; padding: 0 0.6rem; color: inherit; }
html[data-design="studio"] .disc { color: #7ff0b0; background: rgba(61, 220, 132, 0.14); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.25); }
html[data-design="studio"] .disc-pct { color: #7ff0b0; }
html[data-design="studio"] .manage-note { color: var(--ds-text-2); }
html[data-design="studio"] .stay-panel ion-input { --placeholder-color: var(--ds-text-3); }

/* Marks in the modules (an audience, a campaign) take the section's colors, lit like the glyphs. */
html[data-design="studio"] .crm .campaign-mark {
  background: radial-gradient(120% 90% at 28% 12%, rgba(255, 255, 255, 0.4), transparent 45%), linear-gradient(150deg, var(--g1), var(--g2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 28px -12px color-mix(in srgb, var(--g1) 85%, transparent);
}

/* Numbers fit their tiles at any width and text size: as many columns as fit, and they wrap rather than clip. */
html[data-design="studio"] .hr .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
/* A number scales to its tile (container units) instead of breaking or clipping; the label under it wraps. */
html[data-design="studio"] .hr .stats .tile { container-type: inline-size; }
html[data-design="studio"] .hr .stats .tile b,
html[data-design="studio"] .crm .stats .tile b { font-size: clamp(1rem, 15cqi, 1.75rem); white-space: nowrap; overflow: visible; text-overflow: clip; line-height: 1.15; }
html[data-design="studio"] .hr .hero { grid-template-columns: auto minmax(0, 1fr) auto; }
html[data-design="studio"] .hr .hero h1 { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  html[data-design="studio"] .hr .hero { grid-template-columns: auto minmax(0, 1fr); }
  html[data-design="studio"] .hr .hero > :last-child:not(:first-child) { grid-column: 1 / -1; justify-self: start; }
  html[data-design="studio"] .hr .avatar.xl { width: 56px; height: 56px; font-size: 20px; }
}

/* The Events calendar: the tape's lines and lit bars. */
html[data-design="studio"] .events .vis-foreground .vis-group,
html[data-design="studio"] .events .vis-time-axis .vis-grid.vis-major,
html[data-design="studio"] .events .vis-panel.vis-center, html[data-design="studio"] .events .vis-panel.vis-left,
html[data-design="studio"] .events .vis-panel.vis-top { border-color: rgba(255, 255, 255, 0.06); }
html[data-design="studio"] .events .vis-time-axis .vis-grid.vis-minor { border-color: rgba(255, 255, 255, 0.045); }
html[data-design="studio"] .events .vis-time-axis .vis-grid.vis-today { background: color-mix(in srgb, var(--g1) 10%, transparent); }
html[data-design="studio"] .events .vis-current-time { background: var(--ds-red); box-shadow: 0 0 8px var(--ds-red); }
html[data-design="studio"] .events .cal-body { background: rgba(6, 5, 16, 0.3); }
html[data-design="studio"] .events .vis-item.evbar {
  color: #fff; border-color: color-mix(in srgb, var(--c) 80%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, transparent), color-mix(in srgb, var(--c) 38%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 2px 4px rgba(0, 0, 0, 0.35);
}
html[data-design="studio"] .events .vis-item.evbar.st-inquiry, html[data-design="studio"] .events .vis-item.evbar.st-tentative { background: color-mix(in srgb, var(--c) 18%, transparent); }
html[data-design="studio"] .events .vis-item.evbar.clash { box-shadow: inset 0 0 0 2px var(--ds-red), 0 0 12px rgba(255, 107, 107, 0.5); }
html[data-design="studio"] .events .cal-panel { background: var(--ds-panel); }
/* A color field is a swatch, not a line. */
html[data-design="studio"] .hr .field input[type="color"] { height: 40px; padding: 4px; cursor: pointer; }

/* The open section's thread runs in its own gutter, left of its pages: never through an item or the selection. */
html[data-design="studio"] #nav .nav-section.open .nav-pages { padding-left: 32px; }
html[data-design="studio"] #nav .nav-section.open .nav-pages::before { left: 21px; top: 4px; bottom: 8px; }
html[data-design="studio"] .nav-page { padding-left: 12px; }