/* Obsidian Athlete: matte black stone, anthracite metal, soft gold; crimson is a rare signal of the important state.
   POVTOR PREP v2 — design tokens. Source of truth: docs/DESIGN_CONTRACT_v2.md (§2, §3, §6).
   Screens and components use ONLY these variables — no hex values elsewhere. No !important. */

/* Antique digits (owner 2026-11-13): Georgia draws old-style figures (3 4 5 7 9 hang below the line), which look uneven in numbers.
   This face covers only 0–9 and takes the phone's plain sans font, so in Antique the letters stay Georgia and the numbers are even;
   the rest-timer dial keeps Georgia's own figures (shared/ui/ui.css). */
@font-face { font-family: "Antique Digits"; font-weight: 100 549; unicode-range: U+0030-0039; src: local("Helvetica Neue"), local("HelveticaNeue"), local("Roboto"), local("Roboto-Regular"), local("Segoe UI"), local("Arial"); }
@font-face { font-family: "Antique Digits"; font-weight: 550 900; unicode-range: U+0030-0039; src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Roboto Bold"), local("Roboto-Bold"), local("Segoe UI Bold"), local("Arial Bold"), local("Arial-BoldMT"); }
:root {
  color-scheme: dark;
  /* a picture per theme and gender: data-theme picks the --photo-*, data-gender picks which of them is the --hero-* */
  --photo-workout-male: url("/app/assets/atlas_workout_male_stage.webp"); /* Atlas: the athlete on stage under the spotlights (owner 2026-11-11) */
  --photo-workout-female: url("/app/assets/atlas_workout_female_stage.webp");
  --photo-profile-male: url("/app/assets/atlas_profile_male_stage.webp"); /* the athlete's back on a foggy stage (owner 2026-11-11) */
  --photo-profile-female: url("/app/assets/atlas_profile_female_stage2.webp");
  --hero-workout: var(--photo-workout-male);
  --hero-workout-pos: center 0%;
  --hero-profile: var(--photo-profile-male);
  --hero-profile-pos: center center;

  /* §2.1 base colours (brief) — truth */
  --color-bg: #0B0B0A;
  --color-surface: #1B1B1C;
  --color-gold: #D4AF37;
  --color-text: #F2EFE9;
  --color-crimson: #8F1D2C;

  /* §2.2 derived (measured on v0-gold / v1-crimson) */
  --color-surface-top: #232324;
  --color-surface-bottom: #111214;
  --color-surface-gradient: linear-gradient(145deg, rgba(41, 43, 47, 0.98) 0%, rgba(25, 27, 30, 0.98) 45%, rgba(15, 16, 18, 0.99) 100%);
  --color-crimson-card: linear-gradient(145deg, #541B28 0%, #32141D 52%, #1A0E12 100%);
  --color-crimson-deep: #7A2437;
  /* the accent of the important state (the current set, «Старт», a chosen option). Atlas has no crimson accent since 2026-11-10:
     black with gold; crimson stays for warnings and risks. Other themes point these at their crimson. */
  --color-accent-card: linear-gradient(145deg, #1F1C16 0%, #13120F 55%, #0B0B0A 100%);
  --color-accent-deep: #9C7C37;
  --color-header-accent: #2E2614;
  --color-header-accent-deep: #15120A;
  --color-gold-light: #EDC770;
  --color-gold-gradient: linear-gradient(180deg, #E6CB83 0%, #CDA955 52%, #B8933F 100%);
  --color-gold-pressed: linear-gradient(180deg, #C9AB5E 0%, #AE8C3F 100%);
  --color-gold-edge: #7A6432;
  --color-gold-soft: #D6B35A;
  --color-text-secondary: #9BA3AD;
  --color-text-on-gold: #15110A;
  --color-text-on-gold-soft: var(--color-text-on-gold); /* text on a flat --color-gold-soft fill */
  --color-text-on-danger: #F2EFE9;
  --color-divider: #2E2E2E;
  --color-nav-bg: linear-gradient(180deg, #1B1D21 0%, #0B0C0E 100%);
  --color-nav-border: #262626;
  --color-segment-bg: #111112;
  --color-success: #B4C27E; /* warm olive: sits with gold and crimson (was a cool mint #8FBC88) */
  --color-telegram: #2AABEE;
  --color-yandex: #FC3F1D;
  --color-success-bg: #232716;
  --color-danger: #EB6878; /* 4.6:1 on the rows (was #EA6474, 4.4) */
  --color-danger-fill: linear-gradient(180deg, #A32A3B 0%, #7C1C2A 100%);
  --color-neutral: var(--color-text-secondary);
  --color-scrim: rgba(5, 5, 4, 0.74);
  --hero-fade-top: rgba(11, 11, 10, 0.04);
  --hero-fade-soft: rgba(11, 11, 10, 0.04);
  --hero-fade-strong: rgba(11, 11, 10, 0.10);
  --hero-fade-profile: var(--color-scrim);
  --hero-fade-profile-from: 45%;

  /* the air of the dark profile: a soft haze around the far lights and a rare glint. The light themes switch it off below */
  --profile-air: none;
  --profile-haze: url("/app/assets/profile_fog.webp");
  --profile-glint: radial-gradient(ellipse 17% 24% at 37.5% 37%, rgba(255, 252, 245, 0.95) 0%, rgba(255, 252, 245, 0.52) 20%, rgba(255, 252, 245, 0.2) 52%, transparent 100%);

  /* what the previews of the themes show: the same in every theme, so all three can stand side by side */
  --preview-dark-male: url("/app/assets/atlas_workout_male_stage.webp");
  --preview-dark-female: url("/app/assets/atlas_workout_female_stage.webp");
  --preview-dark-bg: #0B0B0A;
  --preview-dark-slab: #232324;
  --preview-dark-line: #9BA3AD;
  --preview-dark-accent: #D8B994;
  --preview-dark-ink: #F2EFE9;
  --preview-dark-veil: rgba(11, 11, 10, 0.94);
  --preview-atelier-male: url("/app/assets/antique_workout_male_v3.webp");
  --preview-atelier-female: url("/app/assets/antique_workout_female_v3.webp");
  --preview-atelier-bg: #E6DAC7;
  --preview-atelier-slab: #F2EADD;
  --preview-atelier-line: #5C5045;
  --preview-atelier-accent: #A9844F;
  --preview-atelier-ink: #2A2019;
  --preview-atelier-veil: rgba(230, 218, 199, 0.95);
  --preview-ivory-male: url("/app/assets/darkside_profile_yujiro_clean.webp");
  --preview-ivory-female: url("/app/assets/darkside_workout_yujiro_clean.webp");
  --preview-ivory-bg: #080607;
  --preview-ivory-slab: #1A1013;
  --preview-ivory-line: #E07A70;
  --preview-ivory-accent: #B6253C;
  --preview-ivory-ink: #F4E7DE;
  --preview-ivory-veil: rgba(8, 6, 7, 0.94);
  --preview-cyberpunk-male: url("/app/assets/cyberpunk_workout_male_v3.webp");
  --preview-cyberpunk-female: url("/app/assets/cyberpunk_workout_female_v3.webp");
  --preview-cyberpunk-bg: #07090D;
  --preview-cyberpunk-slab: #151A22;
  --preview-cyberpunk-line: #7ED7FF;
  --preview-cyberpunk-accent: #B146FF;
  --preview-cyberpunk-ink: #E9F2FF;
  --preview-cyberpunk-veil: rgba(7, 9, 13, 0.92);
  --preview-oldschool-male: url("/app/assets/oldschool_workout_male_v4.webp");
  --preview-oldschool-female: url("/app/assets/oldschool_workout_female_v4.webp");
  --preview-oldschool-bg: #161312;
  --preview-oldschool-slab: #292221;
  --preview-oldschool-line: #B77A45;
  --preview-oldschool-accent: #8F2A26;
  --preview-oldschool-ink: #F3E5CF;
  --preview-oldschool-veil: rgba(22, 19, 18, 0.94);

  /* Obsidian: levels of surface */
  --color-field: linear-gradient(180deg, #0C0C0C 0%, #111112 100%); /* a recess: fields, keypad keys are one step down or up from the card */
  --color-field-border: #2F2F30;
  --color-floating: linear-gradient(180deg, #252526 0%, #19191A 100%); /* sheets, dialogs, drawer: above the cards */
  --color-key: linear-gradient(180deg, #2B2B2C 0%, #1F1F20 100%);
  --color-key-pressed: linear-gradient(180deg, #171718 0%, #1E1E1F 100%);
  --color-raised: linear-gradient(180deg, #2A2A2B 0%, #1F1F20 100%); /* a quiet control on a card: selected segment, rest buttons */
  --color-ring-core: radial-gradient(circle at 50% 38%, rgba(38, 40, 44, 0.72) 0%, rgba(10, 11, 13, 0.58) 72%);
  --ring-glass-border: rgba(255, 255, 255, 0.18);
  --color-pressed: rgba(242, 239, 233, 0.08);
  --app-bg-texture: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(214, 179, 90, 0.07), transparent 58%); /* Atlas: a soft gold light from above, no painted marble (owner 2026-11-10) */

  /* Obsidian: light and shadow */
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 24px -14px rgba(0, 0, 0, 0.9);
  --shadow-floating: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 -18px 50px rgba(0, 0, 0, 0.6);
  --shadow-dialog: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 60px rgba(0, 0, 0, 0.7);
  --shadow-drawer: inset -1px 0 0 rgba(255, 255, 255, 0.06), 18px 0 50px rgba(0, 0, 0, 0.6);
  --shadow-nav: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 -10px 28px rgba(0, 0, 0, 0.55);
  --shadow-field: inset 0 1px 2px rgba(0, 0, 0, 0.55);
  --shadow-key: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-gold: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(70, 50, 10, 0.35), 0 8px 18px -8px rgba(205, 169, 85, 0.5);
  --shadow-gold-pressed: inset 0 1px 2px rgba(70, 50, 10, 0.45);
  --shadow-danger: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px -8px rgba(163, 42, 59, 0.55);
  --shadow-accent: inset 0 1px 0 rgba(237, 199, 112, 0.16), 0 14px 30px -18px rgba(0, 0, 0, 0.95);
  --gold-glow: 0 0 18px rgba(214, 179, 90, 0.28);
  --gold-glow-strong: 0 0 22px 4px rgba(214, 179, 90, 0.42);
  --gold-glow-arc: drop-shadow(0 0 5px rgba(214, 179, 90, 0.4));
  --crimson-glow: 0 0 18px rgba(214, 179, 90, 0.32); /* Atlas: a gold glow */
  --text-shadow-photo: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.65);
  --focus-ring-color: #F0DCA0;

  /* §3 typography */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-timer: 700 60px/1 var(--font-family);
  --font-title: 700 28px/1.1 var(--font-family);
  --font-card-title: 700 26px/1.1 var(--font-family);
  --font-value: 700 24px/1.15 var(--font-family);
  --font-section: 600 18px/1.2 var(--font-family);
  --font-body: 400 17px/1.35 var(--font-family);
  --font-label: 500 16px/1.2 var(--font-family);
  --font-subtitle: 500 14px/1.25 var(--font-family);
  --font-caption: 500 12px/1.2 var(--font-family);
  --font-tab: 600 10px/1.1 var(--font-family);
  --font-hero: 700 56px/1 var(--font-family);
  --tracking-title: 0.04em;
  --tracking-caps: 0.06em;

  /* §6 spacing / radii / sizes */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 48px;
  --radius-bar: 4px;
  --radius-chip: 8px;
  --radius-row: 10px;
  --radius-card: 16px;
  --radius-sheet: 24px;
  --accent-bar-w: 4px;
  --accent-bar-h: 32px;
  --touch: 44px;
  --button-h: 48px;
  --nav-h: 68px;
  --header-h: 96px;
  --screen-pad: var(--space-5);
  --title-inset: var(--space-7);

  --duration-fast: 120ms;
  --duration: 220ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* the look of the profile's gender (lib/gender.js, set on <html> by main.js) */
:root[data-gender="female"] {
  --hero-workout: var(--photo-workout-female);
  --hero-profile: var(--photo-profile-female);
  --hero-profile-pos: 75% center;
  --hero-workout-pos: center 0%;
}

/* Antique (id atelier): columns and warm light. Limestone, matt leather, antique bronze, a dusty terracotta corner. Warm mineral slabs with a soft
   lift; fields are pressed into the stone. Crimson only for danger. */
:root[data-theme="atelier"] {
  --color-accent-card: var(--color-crimson-card); /* the accent of the important state */
  --color-accent-deep: var(--color-crimson-deep);
  color-scheme: light;
  --photo-workout-male: url("/app/assets/antique_workout_male_v3.webp");
  --photo-workout-female: url("/app/assets/antique_workout_female_v3.webp");
  --photo-profile-male: url("/app/assets/antique_profile_male_v3.webp");
  --photo-profile-female: url("/app/assets/antique_profile_female_v3.webp");
  --profile-air: none;
  --app-bg-texture: radial-gradient(ellipse 110% 48% at 50% -12%, rgba(148, 112, 63, 0.13), transparent 66%), repeating-linear-gradient(135deg, rgba(88, 67, 44, 0.028) 0 1px, transparent 1px 22px), #E6DAC7;
  --hero-workout-pos: center 0%;
  --hero-profile-pos: center 0%; /* v3 portraits (2026-11-13): empty wall over the head, the face in the upper right */
  --character-tile-zoom: 300%; --character-tile-y: 46%; /* the «Он / Она» tiles: v3 heads sit lower, under the empty wall */
  /* v3 (owner 2026-11-13): he holds a bronze shield and the shield is the timer, laid out like Old School (shared/ui/ui.css):
     the rim (r 184 px around 753,793 of 1536×1024) on the timer's edge; the top of the head, the hands cut from the photo */
  /* the rest «солнечные часы и лавровый венок» (owner 2026-11-13, ChatGPT layers) — shared/ui/ui.css */
  --an-shadows: url("/app/assets/antique_column_shadows.webp");
  --an-rays: url("/app/assets/antique_sunrays.webp");
  --an-pollen: url("/app/assets/antique_pollen_gold.webp"); /* gold specks with real transparency: light-on-black vanished on the light scene */
  --an-leaves: url("/app/assets/antique_olive_leaves.webp");
  --an-meander: url("/app/assets/antique_meander_ring.webp");
  --an-gold: url("/app/assets/antique_gold_leaf.webp");
  --an-halo: url("/app/assets/antique_sun_halo.webp");
  --an-sunset: url("/app/assets/antique_sunset_a.webp");
  --os-photo-w: 4.0571;
  --os-photo-h: 2.5911;
  --os-photo-x: 0.0185;
  --os-photo-y: -1.5157;
  --cyber-head: 1.14;
  --os-hands: url("/app/assets/antique_hands_male_v5.webp");
  --os-hands-x: -0.052;
  --os-hands-y: 0.3618;
  --os-hands-w: 1.1067;
  --os-hands-h: 0.2682;

  --color-bg: #E6DAC7;
  --color-surface: #EEE5D6;
  --color-gold: #94703F;
  --color-text: #2A2019;
  --color-crimson: #9A3324;
  --color-surface-top: #F2EADD;
  --color-surface-bottom: #E8DDCB;
  --color-surface-gradient: linear-gradient(145deg, #F2EADD 0%, #E8DDCB 100%);
  --color-crimson-card: linear-gradient(160deg, #F0E2CD 0%, #E8D5BB 55%, #E2CCAF 100%);
  --color-crimson-deep: #B98B6A;
  --color-header-accent: #D9A88E;
  --color-header-accent-deep: #BE7F63;
  --color-gold-light: #6E4C20;
  --color-gold-gradient: linear-gradient(180deg, #CFAB78 0%, #B48C58 52%, #9E7A49 100%);
  --color-gold-pressed: linear-gradient(180deg, #A9844F 0%, #8F6D3E 100%);
  --color-gold-edge: #A68B63;
  --color-gold-soft: #6A4718;
  --color-text-secondary: #5C5045;
  --color-text-on-gold: #1E150C;
  --color-text-on-gold-soft: #FBF6EE; /* the soft gold here is dark brown */
  --color-text-on-danger: #FFF6EE;
  --color-divider: #CFC1AC;
  --color-nav-bg: linear-gradient(180deg, #F1E9DC 0%, #E3D7C4 100%);
  --color-nav-border: #CDBFA9;
  --color-segment-bg: #D8CBB6;
  --color-success: #3C5620;
  --color-success-bg: #DCE2C5;
  --color-danger: #93281C;
  --color-danger-fill: linear-gradient(180deg, #A93A2A 0%, #84281C 100%);
  --color-scrim: rgba(42, 30, 20, 0.5);
  --hero-fade-top: rgba(230, 218, 199, 0.55);
  --hero-fade-soft: rgba(230, 218, 199, 0.35);
  --hero-fade-strong: rgba(230, 218, 199, 0.82);
  --hero-fade-profile: rgba(230, 218, 199, 0.72);
  --hero-fade-profile-from: 64%;

  --color-field: linear-gradient(180deg, #D5C7B1 0%, #DDD0BB 100%);
  --color-field-border: #BBAA91;
  --color-floating: linear-gradient(180deg, #F4ECE0 0%, #EADFCE 100%);
  --color-key: linear-gradient(180deg, #F6EFE4 0%, #E7DCCA 100%);
  --color-key-pressed: linear-gradient(180deg, #D5C7B1 0%, #DDD0BB 100%);
  --color-raised: linear-gradient(180deg, #F8F2E8 0%, #EADFCE 100%);
  --color-ring-core: radial-gradient(circle at 50% 38%, rgba(255, 250, 240, 0.68) 0%, rgba(218, 205, 184, 0.54) 72%);
  --ring-glass-border: rgba(255, 255, 255, 0.62);
  --color-pressed: rgba(42, 32, 25, 0.08);

  --surface-highlight: inset 0 1px 0 rgba(255, 252, 245, 0.75);
  --shadow-card: inset 0 1px 0 rgba(255, 252, 245, 0.75), 0 10px 22px -14px rgba(84, 58, 32, 0.5);
  --shadow-floating: inset 0 1px 0 rgba(255, 252, 245, 0.8), 0 -18px 44px rgba(66, 45, 25, 0.28);
  --shadow-dialog: inset 0 1px 0 rgba(255, 252, 245, 0.8), 0 24px 56px rgba(66, 45, 25, 0.36);
  --shadow-drawer: inset -1px 0 0 rgba(255, 252, 245, 0.5), 18px 0 44px rgba(66, 45, 25, 0.3);
  --shadow-nav: inset 0 1px 0 rgba(255, 252, 245, 0.7), 0 -8px 22px rgba(84, 58, 32, 0.16);
  --shadow-field: inset 0 1px 3px rgba(84, 58, 32, 0.28);
  --shadow-key: inset 0 1px 0 rgba(255, 252, 245, 0.8), 0 1px 2px rgba(84, 58, 32, 0.3);
  --shadow-gold: inset 0 1px 0 rgba(255, 244, 222, 0.5), inset 0 -1px 0 rgba(70, 48, 20, 0.28), 0 8px 16px -8px rgba(112, 80, 38, 0.55);
  --shadow-gold-pressed: inset 0 1px 2px rgba(70, 48, 20, 0.4);
  --shadow-danger: inset 0 1px 0 rgba(255, 228, 216, 0.25), 0 8px 16px -8px rgba(132, 40, 28, 0.5);
  --shadow-accent: inset 0 1px 0 rgba(255, 250, 240, 0.7), 0 14px 28px -16px rgba(110, 55, 36, 0.5);
  --gold-glow: 0 0 14px rgba(148, 112, 63, 0.3);
  --gold-glow-strong: 0 0 18px 3px rgba(148, 112, 63, 0.4);
  --gold-glow-arc: drop-shadow(0 0 3px rgba(148, 112, 63, 0.35));
  --crimson-glow: 0 0 14px rgba(154, 51, 36, 0.3);
  --text-shadow-photo: 0 1px 2px rgba(255, 248, 236, 0.9), 0 0 14px rgba(255, 248, 236, 0.75);
  --focus-ring-color: #6E4C20;
  --font-family: "Antique Digits", "Georgia", "Times New Roman", serif; /* even digits, Georgia letters (the @font-face at the top) */
  --font-dial: "Georgia", "Times New Roman", serif; /* the rest-timer numbers keep Georgia's own figures */
  --font-title: 700 28px/1.08 var(--font-family);
  --font-card-title: 700 24px/1.08 var(--font-family);
  --font-section: 600 18px/1.2 var(--font-family);
  --tracking-title: 0.025em;
  --tracking-caps: 0.075em;
  --radius-card: 10px;
  --radius-row: 7px;
  --radius-chip: 6px;
}
:root[data-theme="atelier"][data-gender="female"] { /* her shield: r 165 px around 761,815 */
  --hero-workout-pos: center 0%; --hero-profile-pos: center 0%;
  --os-photo-w: 4.4781; --os-photo-h: 2.9527; --os-photo-x: 0.005; --os-photo-y: -1.8564; --cyber-head: 1.33;
  --os-hands: url("/app/assets/antique_hands_female_v5.webp"); --os-hands-x: -0.049; --os-hands-y: 0.4187; --os-hands-w: 1.0991; --os-hands-h: 0.1788;
}

/* The dark side: a bright architectural performance club. Porcelain, pale concrete, pearl gray, smoked champagne, a graphite-blue corner.
   Surfaces part by tone and a fine line, not by heavy shadows; corners are tighter than in Ателье. Burgundy only for what matters. */
:root[data-theme="ivory"] {
  --color-accent-card: var(--color-crimson-card); /* the accent of the important state */
  --color-accent-deep: var(--color-crimson-deep);
  color-scheme: dark;
  --photo-workout-male: url("/app/assets/darkside_workout_yujiro_clean.webp");
  --photo-workout-female: url("/app/assets/darkside_workout_yujiro_clean.webp");
  --photo-profile-male: url("/app/assets/darkside_profile_yujiro_clean.webp");
  --photo-profile-female: url("/app/assets/darkside_profile_yujiro_clean.webp");
  --profile-air: none;
  --app-bg-texture: radial-gradient(ellipse 95% 50% at 50% -10%, rgba(182, 37, 60, 0.18), transparent 68%), repeating-linear-gradient(135deg, rgba(255, 212, 194, 0.025) 0 1px, transparent 1px 24px), #080607;
  --hero-workout-pos: center top;
  --hero-profile-pos: 68% center;
  --radius-card: 12px;
  --radius-row: 8px;
  --radius-sheet: 18px;

  --color-bg: #080607;
  --color-surface: #1A1013;
  --color-gold: #B6253C;
  --color-text: #F4E7DE;
  --color-crimson: #B6253C;
  --color-surface-top: #2A171C;
  --color-surface-bottom: #120B0D;
  --color-surface-gradient: linear-gradient(145deg, #2A171C 0%, #1B1013 55%, #10090B 100%), repeating-linear-gradient(135deg, rgba(255, 220, 210, 0.035) 0 1px, transparent 1px 18px);
  --color-crimson-card: linear-gradient(160deg, #5F121F 0%, #341018 58%, #1B090E 100%);
  --color-crimson-deep: #8C1E31;
  --color-header-accent: #641523;
  --color-header-accent-deep: #250A10;
  --color-gold-light: #E7A08F;
  --color-gold-gradient: linear-gradient(180deg, #B6253C 0%, #8B1E30 54%, #5A0F1D 100%);
  --color-gold-pressed: linear-gradient(180deg, #B43749 0%, #60121F 100%);
  --color-gold-edge: #8C1E31;
  --color-gold-soft: #E07A70;
  --color-text-secondary: #B89A99;
  --color-text-on-gold: #FFF2ED;
  --color-text-on-gold-soft: #1A0709; /* light text on the coral fill read 2.7:1 */
  --color-text-on-danger: #FFF2ED;
  --color-divider: #48222A;
  --color-nav-bg: linear-gradient(180deg, #241419 0%, #0D0709 100%);
  --color-nav-border: #48222A;
  --color-segment-bg: #160B0E;
  --color-success: #B9BC86; /* warm olive on crimson (was #9CB57F) */
  --color-success-bg: #2A2918;
  --color-danger: #FF9B8F;
  --color-danger-fill: linear-gradient(180deg, #A52D3C 0%, #67131F 100%);
  --color-scrim: rgba(8, 4, 6, 0.8);
  --hero-fade-top: rgba(8, 6, 7, 0.05);
  --hero-fade-soft: rgba(8, 6, 7, 0.24);
  --hero-fade-strong: rgba(8, 6, 7, 0.8);
  --hero-fade-profile: rgba(8, 6, 7, 0.86);
  --hero-fade-profile-from: 48%;

  --color-field: linear-gradient(180deg, #12090C 0%, #211116 100%);
  --color-field-border: #5B2934;
  --color-floating: linear-gradient(180deg, #32191F 0%, #180C10 100%), repeating-linear-gradient(135deg, rgba(255, 220, 210, 0.025) 0 1px, transparent 1px 16px);
  --color-key: linear-gradient(180deg, #331A20 0%, #1B0D11 100%);
  --color-key-pressed: linear-gradient(180deg, #12090C 0%, #241117 100%);
  --color-raised: linear-gradient(180deg, #3C1E25 0%, #251219 100%);
  --color-ring-core: radial-gradient(circle at 50% 38%, rgba(90, 24, 34, 0.88) 0%, rgba(11, 5, 8, 0.78) 72%);
  --ring-glass-border: rgba(224, 122, 112, 0.42);
  --color-pressed: rgba(224, 122, 112, 0.1);

  --surface-highlight: inset 0 1px 0 rgba(255, 220, 210, 0.12);
  --shadow-card: inset 0 1px 0 rgba(255, 220, 210, 0.08), 0 12px 26px -16px rgba(0, 0, 0, 0.92);
  --shadow-floating: inset 0 1px 0 rgba(255, 220, 210, 0.12), 0 -18px 48px rgba(0, 0, 0, 0.72);
  --shadow-dialog: inset 0 1px 0 rgba(255, 220, 210, 0.12), 0 24px 56px rgba(0, 0, 0, 0.76);
  --shadow-drawer: inset -1px 0 0 rgba(255, 220, 210, 0.08), 18px 0 44px rgba(0, 0, 0, 0.68);
  --shadow-nav: inset 0 1px 0 rgba(255, 220, 210, 0.08), 0 -10px 28px rgba(0, 0, 0, 0.68);
  --shadow-field: inset 0 1px 3px rgba(0, 0, 0, 0.62);
  --shadow-key: inset 0 1px 0 rgba(255, 220, 210, 0.1), 0 2px 3px rgba(0, 0, 0, 0.58);
  --shadow-gold: inset 0 1px 0 rgba(255, 240, 230, 0.22), 0 0 16px -5px rgba(224, 122, 112, 0.55), 0 8px 18px -8px rgba(182, 37, 60, 0.58);
  --shadow-gold-pressed: inset 0 1px 2px rgba(64, 10, 18, 0.48);
  --shadow-danger: inset 0 1px 0 rgba(255, 225, 210, 0.14), 0 0 18px -8px rgba(240, 107, 102, 0.6);
  --shadow-accent: inset 0 1px 0 rgba(255, 225, 210, 0.1), 0 0 20px -8px rgba(182, 37, 60, 0.68);
  --gold-glow: 0 0 14px rgba(224, 122, 112, 0.42);
  --gold-glow-strong: 0 0 20px 3px rgba(182, 37, 60, 0.58);
  --gold-glow-arc: drop-shadow(0 0 5px rgba(224, 122, 112, 0.64));
  --crimson-glow: 0 0 18px rgba(182, 37, 60, 0.52);
  --text-shadow-photo: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 14px rgba(0, 0, 0, 0.75);
  --focus-ring-color: #E07A70;
  --font-family: "Arial Narrow", "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-title: 700 28px/1.05 var(--font-family);
  --font-card-title: 700 24px/1.05 var(--font-family);
  --tracking-title: 0.07em;
  --tracking-caps: 0.1em;
  --radius-chip: 2px;
  --radius-card: 3px;
  --radius-row: 3px;
  --radius-sheet: 4px;
}
:root[data-theme="ivory"][data-gender="female"] { --hero-workout-pos: center top; --hero-profile-pos: 68% center; }
/* Cyberpunk: the neon ring in the photo is the rest timer. Every number is a share of --ring-size, measured on the photo:
   the photo's width and height (the ring is a slight ellipse in the photo, so it is made round), its centre offset and top
   (from the timer centre), the top of the head (the timer shrinks rather than cut it, workout/model fitHeadroom) and the hands layer. */
:root[data-theme="cyberpunk"][data-gender="female"] { --cyber-photo-w: 4.6464; --cyber-photo-h: 3.1945; --cyber-photo-x: 0.0272; --cyber-photo-y: -1.8535; --cyber-head: 1.71; --cyber-hands: url("/app/assets/cyberpunk_hands_female_v5.webp"); --cyber-hands-x: 0.2115; --cyber-hands-y: 0.0165; --cyber-hands-w: 0.5994; --cyber-hands-h: 0.1184; }

/* Cyberpunk 2077: black chrome, electric cyan and violet light. The existing screen layout stays intact while every surface
   becomes a dark glass slab with a restrained neon signal. */
:root[data-theme="cyberpunk"] {
  --color-accent-card: var(--color-crimson-card); /* the accent of the important state */
  --color-accent-deep: var(--color-crimson-deep);
  color-scheme: dark;
  /* the photo holds the timer: geometry as shares of --ring-size, the female values in the gender block above */
  --cyber-hero-light: /* the city light over the workout photo, then a fade into the page */
    linear-gradient(180deg, rgba(5, 9, 18, 0.06) 0%, rgba(5, 9, 18, 0.08) 50%, rgba(5, 7, 13, 0.62) 84%, var(--color-bg) 100%),
    radial-gradient(ellipse 72% 42% at 76% 28%, rgba(193, 62, 255, 0.2), transparent 62%),
    radial-gradient(ellipse 55% 52% at 12% 76%, rgba(52, 218, 255, 0.22), transparent 62%);
  /* v3 (owner 2026-11-13): 1536×1024, the ring's tube (r 172 px around 763,754) lies on the centre line of the timer's arc;
     the photo runs past both edges on every phone */
  --cyber-photo-w: 4.4657;
  --cyber-photo-h: 3.0576;
  --cyber-photo-x: 0.0166;
  --cyber-photo-y: -1.7188;
  --cyber-head: 1.63;
  --cyber-hands: url("/app/assets/cyberpunk_hands_male_v5.webp"); /* V's hands cut from the photo, over the timer */
  --cyber-hands-x: 0.2192;
  --cyber-hands-y: 0.0104;
  --cyber-hands-w: 0.5788;
  --cyber-hands-h: 0.1327;
  --photo-workout-male: url("/app/assets/cyberpunk_workout_male_v3.webp");
  --photo-workout-female: url("/app/assets/cyberpunk_workout_female_v3.webp");
  --photo-profile-male: url("/app/assets/cyberpunk_profile_male_v3.webp");
  --photo-profile-female: url("/app/assets/cyberpunk_profile_female_v3.webp");
  --hero-workout-pos: center top;
  --hero-profile-pos: center 0%;
  --color-bg: #07090D;
  --character-tile-zoom: 300%; --character-tile-y: 24%; /* the «Он / Она» tiles: the head of the v3 photos */
  --color-surface: #151A22;
  --color-gold: #7ED7FF;
  --color-text: #E9F2FF;
  --color-crimson: #B146FF;
  --color-surface-top: #202A38;
  --color-surface-bottom: #0E1219;
  --color-surface-gradient: linear-gradient(145deg, rgba(32, 42, 56, 0.96) 0%, rgba(18, 24, 34, 0.98) 52%, rgba(10, 13, 19, 0.99) 100%);
  --color-crimson-card: linear-gradient(145deg, rgba(40, 20, 68, 0.98) 0%, rgba(22, 14, 38, 0.98) 100%);
  --color-crimson-deep: #6C63FF;
  --color-header-accent: #164C68;
  --color-header-accent-deep: #24144A;
  --color-gold-light: #B7F0FF;
  --color-gold-gradient: linear-gradient(105deg, #7ED7FF 0%, #6E66FF 52%, #B146FF 100%); /* the violet a touch lighter: dark text 4.6:1 (was 4.4) */
  --color-text-on-danger: #E9F2FF; /* on --color-danger-fill */
  --shadow-dialog: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 60px rgba(0, 0, 0, 0.7);
  --shadow-drawer: inset -1px 0 0 rgba(255, 255, 255, 0.06), 18px 0 50px rgba(0, 0, 0, 0.6);
  --text-shadow-photo: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.65);
  --color-gold-pressed: linear-gradient(105deg, #5BBFE8 0%, #5148D0 52%, #8B2ED0 100%);
  --color-gold-edge: #3BA9D8;
  --color-gold-soft: #8BDFFF;
  --color-text-secondary: #8D9CAF;
  --color-text-on-gold: #071018;
  --color-divider: #273548;
  --color-nav-bg: linear-gradient(180deg, #151B25 0%, #080A0F 100%);
  --color-nav-border: #24364A;
  --color-segment-bg: #0E141D;
  --color-success: #62E6B5;
  --color-success-bg: #12352F;
  --color-danger: #FF6B9B;
  --color-danger-fill: linear-gradient(105deg, #9C245F 0%, #5E1C74 100%);
  --color-scrim: rgba(3, 5, 9, 0.78);
  --hero-fade-top: rgba(7, 9, 13, 0.04);
  --hero-fade-soft: rgba(7, 9, 13, 0.25);
  --hero-fade-strong: rgba(7, 9, 13, 0.76);
  --hero-fade-profile: rgba(7, 9, 13, 0.84);
  --hero-fade-profile-from: 48%;
  --color-field: linear-gradient(180deg, #0A111A 0%, #111A26 100%);
  --color-field-border: #294258;
  --color-floating: linear-gradient(180deg, #1C2635 0%, #0D131C 100%);
  --color-key: linear-gradient(180deg, #1C2A3A 0%, #101923 100%);
  --color-key-pressed: linear-gradient(180deg, #0A111A 0%, #121D29 100%);
  --color-raised: linear-gradient(180deg, #243448 0%, #162231 100%);
  --color-ring-core: radial-gradient(circle at 50% 38%, rgba(25, 48, 72, 0.9) 0%, rgba(5, 11, 18, 0.72) 72%);
  --ring-glass-border: rgba(126, 215, 255, 0.38);
  --color-pressed: rgba(126, 215, 255, 0.1);
  --app-bg-texture: radial-gradient(ellipse 72% 48% at 6% -8%, rgba(73, 219, 255, 0.19), transparent 68%), radial-gradient(ellipse 66% 52% at 106% 12%, rgba(188, 67, 255, 0.18), transparent 66%), linear-gradient(180deg, rgba(7, 9, 13, 0.2), rgba(7, 9, 13, 0.88)), repeating-linear-gradient(115deg, rgba(126, 215, 255, 0.042) 0 1px, transparent 1px 30px), #07090D;
  --surface-highlight: inset 0 1px 0 rgba(196, 241, 255, 0.14);
  --shadow-card: inset 0 1px 0 rgba(196, 241, 255, 0.1), 0 12px 30px -16px rgba(0, 0, 0, 0.95), 0 0 22px -18px rgba(126, 215, 255, 0.8);
  --shadow-floating: inset 0 1px 0 rgba(196, 241, 255, 0.16), 0 -18px 50px rgba(0, 0, 0, 0.75), 0 0 28px -20px rgba(177, 70, 255, 0.8);
  --shadow-nav: inset 0 1px 0 rgba(126, 215, 255, 0.12), 0 -10px 30px rgba(0, 0, 0, 0.65), 0 0 24px -20px rgba(177, 70, 255, 0.8);
  --shadow-field: inset 0 1px 3px rgba(0, 0, 0, 0.65);
  --shadow-key: inset 0 1px 0 rgba(196, 241, 255, 0.1), 0 2px 5px rgba(0, 0, 0, 0.55);
  --shadow-gold: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 18px -4px rgba(126, 215, 255, 0.85), 0 10px 22px -10px rgba(177, 70, 255, 0.75);
  --shadow-gold-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.42);
  --shadow-danger: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 18px -6px rgba(255, 107, 155, 0.7);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 22px -6px rgba(177, 70, 255, 0.8);
  --gold-glow: 0 0 18px rgba(126, 215, 255, 0.52);
  --gold-glow-strong: 0 0 24px 4px rgba(177, 70, 255, 0.62);
  --gold-glow-arc: drop-shadow(0 0 6px rgba(126, 215, 255, 0.9)) drop-shadow(0 0 12px rgba(177, 70, 255, 0.55));
  --crimson-glow: 0 0 20px rgba(177, 70, 255, 0.55);
  --focus-ring-color: #7ED7FF;
  --font-family: "Arial Narrow", "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-title: 700 28px/1.05 var(--font-family);
  --font-card-title: 700 24px/1.05 var(--font-family);
  --font-hero: 700 56px/0.94 var(--font-family);
  --tracking-title: 0.08em;
  --tracking-caps: 0.12em;
  --radius-card: 12px;
  --radius-row: 8px;
}

/* Old School 90s: iron, burgundy, bronze and warm film grain. */
:root[data-theme="oldschool"] {
  --color-accent-card: var(--color-crimson-card); /* the accent of the important state */
  --color-accent-deep: var(--color-crimson-deep);
  color-scheme: dark;
  /* «Железный блин» (owner 2026-11-11): the athlete holds a plate and the plate is the timer (shared/ui/ui.css); his values here, hers below */
  --photo-workout-male: url("/app/assets/oldschool_workout_male_v4.webp");
  --photo-workout-female: url("/app/assets/oldschool_workout_female_v4.webp");
  --photo-profile-male: url("/app/assets/oldschool_profile_male_v3.webp");
  --photo-profile-female: url("/app/assets/oldschool_profile_female_v3.webp");
  --os-photo-w: 4.1402; /* v4 (owner 2026-11-13): w and h separately, so the rim (ellipse 179×176 px around 764,759 of 1536×1024) is a circle on the timer's edge */
  --os-photo-h: 2.807;
  --os-photo-x: 0.0137;
  --os-photo-y: -1.5946;
  --cyber-head: 1.37; /* the top of the head above the timer's centre: workout/model fitHeadroom keeps it in view */
  --os-hands: url("/app/assets/oldschool_hands_male_v5.webp");
  --os-hands-x: -0.0388;
  --os-hands-y: 0.4751;
  --os-hands-w: 1.0782;
  --os-hands-h: 0.3125;
  --os-profile-top: 0px; /* v3 portraits have the empty wall over the head in the picture itself (shared/ui/ui.css) */
  --character-tile-zoom: 300%; --character-tile-y: 42%; /* the «Он / Она» tiles: v3 heads sit lower, under the empty wall */
  --os-plate-veil: radial-gradient(circle, rgba(22, 19, 18, 0.42) 0 52%, rgba(22, 19, 18, 0.12) 72%, transparent 88%); /* the numbers stay readable on the iron */
  --os-plate-veil-pressed: radial-gradient(circle, rgba(22, 19, 18, 0.6) 0 52%, rgba(22, 19, 18, 0.2) 72%, transparent 88%);
  --os-plate-groove: rgba(10, 8, 7, 0.45); /* the lip, where the copper runs */
  --os-struck: 0 2px 0 rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(255, 227, 194, 0.16), 0 0 14px rgba(0, 0, 0, 0.55); /* struck in the metal */
  /* the rest (owner 2026-11-11): chalk from the hands and dust in the window light (shared/ui/ui.css) */
  /* the rest after a set (owner 2026-11-13, ChatGPT layers): light on black blended as «screen» behind the timer; the chalk and the glint
     are transparent (they lie over the timer); the grain is grey, blended as «overlay» — shared/ui/ui.css */
  --os-rays: url("/app/assets/oldschool_rays.webp");
  --os-motes: url("/app/assets/oldschool_motes.webp");
  --os-lamp: url("/app/assets/oldschool_lamp_glow.webp");
  --os-leak: url("/app/assets/oldschool_light_leak.webp");
  --os-haze: url("/app/assets/oldschool_chalk_haze.webp");
  --os-grain: url("/app/assets/oldschool_grain.webp");
  --os-chalk: url("/app/assets/oldschool_chalk_burst.webp");
  --os-glint: url("/app/assets/oldschool_glint.webp");
  --os-rays-flip: 1; /* his window is on the right; hers on the left: the rays and the leak are mirrored */
  --os-window-x: 82%; /* where the window light comes from in his photo; hers is on the other side */
  --os-dust-mask: radial-gradient(ellipse 80% 95% at var(--os-window-x) 0%, black 0, rgba(0, 0, 0, 0.55) 45%, transparent 80%); /* the motes live in the window light */
  --hero-workout-pos: center top;
  --hero-profile-pos: center 0%;
  --color-bg: #161312;
  --color-surface: #292221;
  --color-gold: #B77A45;
  --color-text: #F3E5CF;
  --color-crimson: #8F2A26;
  --color-surface-top: #3A2B25;
  --color-surface-bottom: #1D1715;
  --color-surface-gradient: linear-gradient(145deg, #3A2B25 0%, #29201D 55%, #1B1514 100%);
  --color-crimson-card: linear-gradient(145deg, #54231F 0%, #321817 58%, #201212 100%);
  --color-crimson-deep: #7D211F;
  --color-header-accent: #6C2A22;
  --color-header-accent-deep: #321716;
  --color-gold-light: #E2B17A;
  --color-gold-gradient: linear-gradient(180deg, #D09A5E 0%, #B77A45 54%, #B96F3E 100%); /* copper to the bottom: dark text 4.6:1 (was 2.8 on #87512D) */
  --color-text-on-danger: #F3E5CF; /* on --color-danger-fill */
  --shadow-dialog: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 60px rgba(0, 0, 0, 0.7);
  --shadow-drawer: inset -1px 0 0 rgba(255, 255, 255, 0.06), 18px 0 50px rgba(0, 0, 0, 0.6);
  --text-shadow-photo: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.65);
  --color-gold-pressed: linear-gradient(180deg, #A96838 0%, #7A4326 100%);
  --color-gold-edge: #8B5A35;
  --color-gold-soft: #D5A16A;
  --color-text-secondary: #BDAA96;
  --color-text-on-gold: #21140E;
  --color-divider: #4A3730;
  --color-nav-bg: linear-gradient(180deg, #2D2420 0%, #171211 100%);
  --color-nav-border: #4A3730;
  --color-segment-bg: #211917;
  --color-success: #B3B676; /* brass olive with copper (was #9DB781) */
  --color-success-bg: #2B2A19;
  --color-danger: #FA7B4B; /* poster vermilion of the 70s, readable on every brown surface: 4.6:1 and up (#D85E45 was 3.2) */
  --color-danger-fill: linear-gradient(180deg, #A73B2E 0%, #72241F 100%);
  --color-scrim: rgba(20, 12, 10, 0.76);
  --hero-fade-top: rgba(22, 19, 18, 0.03);
  --hero-fade-soft: rgba(22, 19, 18, 0.2);
  --hero-fade-strong: rgba(22, 19, 18, 0.76);
  --hero-fade-profile: rgba(22, 19, 18, 0.82);
  --hero-fade-profile-from: 50%;
  --color-field: linear-gradient(180deg, #201817 0%, #2A1F1C 100%);
  --color-field-border: #5A4134;
  --color-floating: linear-gradient(180deg, #3A2B25 0%, #241A18 100%);
  --color-key: linear-gradient(180deg, #3D2D26 0%, #281D1A 100%);
  --color-key-pressed: linear-gradient(180deg, #201715 0%, #30211D 100%);
  --color-raised: linear-gradient(180deg, #463229 0%, #30221E 100%);
  --color-ring-core: radial-gradient(circle at 50% 38%, rgba(77, 48, 36, 0.82) 0%, rgba(25, 16, 14, 0.74) 72%);
  --ring-glass-border: rgba(213, 161, 106, 0.38);
  --color-pressed: rgba(213, 161, 106, 0.1);
  --app-bg-texture: radial-gradient(ellipse 100% 52% at 50% -10%, rgba(143, 42, 38, 0.14), transparent 65%), repeating-radial-gradient(circle at 20% 10%, rgba(255, 226, 195, 0.035) 0 1px, transparent 1px 4px), linear-gradient(115deg, rgba(255, 225, 190, 0.02) 0 1px, transparent 1px 20px), #161312;
  --surface-highlight: inset 0 1px 0 rgba(255, 227, 194, 0.12);
  --shadow-card: inset 0 1px 0 rgba(255, 227, 194, 0.1), 0 10px 24px -14px rgba(0, 0, 0, 0.9);
  --shadow-floating: inset 0 1px 0 rgba(255, 227, 194, 0.14), 0 -18px 50px rgba(0, 0, 0, 0.62);
  --shadow-nav: inset 0 1px 0 rgba(255, 227, 194, 0.1), 0 -10px 28px rgba(0, 0, 0, 0.58);
  --shadow-field: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  --shadow-key: inset 0 1px 0 rgba(255, 227, 194, 0.1), 0 2px 3px rgba(0, 0, 0, 0.5);
  --shadow-gold: inset 0 1px 0 rgba(255, 240, 215, 0.25), 0 8px 18px -8px rgba(183, 122, 69, 0.6);
  --shadow-gold-pressed: inset 0 1px 2px rgba(65, 32, 18, 0.42);
  --shadow-danger: inset 0 1px 0 rgba(255, 225, 210, 0.14), 0 8px 18px -8px rgba(167, 59, 46, 0.6);
  --shadow-accent: inset 0 1px 0 rgba(255, 225, 210, 0.12), 0 12px 26px -14px rgba(143, 42, 38, 0.72);
  --gold-glow: 0 0 14px rgba(213, 161, 106, 0.3);
  --gold-glow-strong: 0 0 18px 3px rgba(183, 122, 69, 0.42);
  --gold-glow-arc: drop-shadow(0 0 4px rgba(213, 161, 106, 0.52));
  --crimson-glow: 0 0 16px rgba(143, 42, 38, 0.45);
  --focus-ring-color: #D5A16A;
  --font-family: "Arial Narrow", "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-title: 700 28px/1.05 var(--font-family);
  --font-card-title: 700 24px/1.05 var(--font-family);
  --tracking-title: 0.06em;
  --tracking-caps: 0.1em;
  --radius-card: 12px;
  --radius-row: 8px;
}

/* the words over the photo of a hero */
:root { --hero-ink: var(--color-text); }

/* Atlas «Сцена» (owner 2026-11-11): the palette is taken from the stage photos — black, smoke, and the warm cream light of the
   spotlights on the skin, instead of bright jewellery gold. Here, not in :root, so no other theme inherits it. */
:root[data-theme="dark"] {
  --profile-air: none; /* the profile is still (owner 2026-11-13: no fog, no flashes) */
  /* the stage while resting (owner 2026-11-13, «кинематографично»): light layers painted on black (ChatGPT), blended as «screen», and
     the hall's silhouettes (transparent) — shared/ui/ui.css */
  --atlas-fog-far: url("/app/assets/atlas_fog_far.webp");
  --atlas-fog-near: url("/app/assets/atlas_fog_near.webp");
  --atlas-dust: url("/app/assets/atlas_dust.webp");
  --atlas-backlight: url("/app/assets/atlas_backlight.webp");
  --atlas-flash: url("/app/assets/atlas_flash.webp");
  --atlas-flare: url("/app/assets/atlas_flare_streak.webp");
  --atlas-crowd: url("/app/assets/atlas_crowd.webp");
  /* the workout photo, in timer sizes: the shorts (625..880 × 393..598 px) under the dial, their centre on the timer's centre */
  --atlas-photo-w: 4.5068;
  --atlas-photo-h: 3.0045;
  --atlas-photo-x: 0.0455;
  --atlas-photo-y: -0.9332;
  --cyber-head: 1.3; /* the top of the head above the timer's centre: workout/model fitHeadroom keeps it in view */
  --color-gold: #C9A27A;
  --color-gold-light: #F2DCC2; /* the spotlight itself: accents and numbers on black */
  --color-gold-soft: #D8B994;
  --color-gold-edge: #6E5A48;
  --color-gold-gradient: linear-gradient(180deg, #F1DCC1 0%, #D6B590 52%, #B38F6A 100%);
  --color-gold-pressed: linear-gradient(180deg, #CDAA84 0%, #9E7C5B 100%);
  --color-accent-card: linear-gradient(145deg, #1E1A16 0%, #13110F 55%, #0B0B0A 100%);
  --color-accent-deep: #8A6F55;
  --color-header-accent: #2B2219;
  --color-header-accent-deep: #14100C;
  --color-text-secondary: #A69C93; /* warm smoke grey */
  --shadow-gold: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(60, 42, 25, 0.35), 0 8px 18px -8px rgba(216, 185, 148, 0.45);
  --shadow-gold-pressed: inset 0 1px 2px rgba(60, 42, 25, 0.45);
  --shadow-accent: inset 0 1px 0 rgba(242, 220, 194, 0.16), 0 14px 30px -18px rgba(0, 0, 0, 0.95);
  --gold-glow: 0 0 18px rgba(216, 185, 148, 0.26);
  --gold-glow-strong: 0 0 22px 4px rgba(216, 185, 148, 0.4);
  --gold-glow-arc: drop-shadow(0 0 5px rgba(216, 185, 148, 0.4));
  --crimson-glow: 0 0 18px rgba(216, 185, 148, 0.3);
  --focus-ring-color: #F2DCC2;
  --app-bg-texture: radial-gradient(ellipse 120% 60% at 50% -10%, rgba(242, 220, 194, 0.06), transparent 58%); /* the light from the stage */
}
:root[data-theme="oldschool"][data-gender="female"] { /* her plate photo and her portrait (owner 2026-11-11) */
  --hero-profile-pos: center 0%;
  --os-window-x: 18%; /* her window light is on the left */
  --os-rays-flip: -1;
  --os-photo-w: 4.3243; /* her plate: rim ellipse 179×176 px around 767,762 */
  --os-photo-h: 2.8603;
  --os-photo-x: -0.0008;
  --os-photo-y: -1.6313;
  --cyber-head: 1.42;
  --os-hands: url("/app/assets/oldschool_hands_female_v5.webp");
  --os-hands-x: -0.0442;
  --os-hands-y: 0.3911;
  --os-hands-w: 1.0923;
  --os-hands-h: 0.2765;
}
:root[data-theme="dark"][data-gender="female"] { /* her black-and-white portrait stands in the middle; her shorts (640..878 × 393..572) under the dial */
  --hero-profile-pos: center center;
  --atlas-photo-w: 4.9515;
  --atlas-photo-h: 3.301;
  --atlas-photo-x: 0.029;
  --atlas-photo-y: -1.0348;
  --cyber-head: 1.42;
}

/* Palettes of the theme skins in shared/ui/ui.css (moved there from direct colours, 2026-11-10). They sit on :root, so a rule,
   a keyframe or a theme preview finds them in any theme; each is named by theme, hue, lightness and alpha (-a22 = 22 % opaque).
   The Dark Side keeps its colours in ui.css. */
:root {
  /* Atlas (data-theme="dark") */
  --atlas-gold-34: #6E5A48;
  --atlas-gold-60: #D8B994;
  --atlas-gold-60-a8: rgba(216, 185, 148, 0.08);
  --atlas-gold-60-a14: rgba(216, 185, 148, 0.14);
  --atlas-gold-60-a32: rgba(216, 185, 148, 0.32);
  --atlas-gold-60-a52: rgba(216, 185, 148, 0.52);
  --atlas-gold-60-a68: rgba(216, 185, 148, 0.68);
  --atlas-gold-68-a35: rgba(242, 220, 194, 0.35);
  --atlas-gold-93: #F2EFE9;
  --atlas-grey-16-a34: rgba(38, 40, 44, 0.34);
  --atlas-ink-0-a94: rgba(0, 0, 0, 0.94);
  --atlas-white-100-a7: rgba(255, 255, 255, 0.07);
  --atlas-flash-core: rgba(255, 255, 255, 0.95); /* a camera in the hall: a hot white point */
  --atlas-flash-halo: rgba(235, 240, 255, 0.35);
  --atlas-flash-wash: rgba(255, 255, 255, 0.07); /* and the whole stage lit for a moment */
  /* Antique (data-theme="atelier") */
  --antique-gold-98-a58: rgba(255, 252, 245, 0.58);
  --antique-gold-98-a82: rgba(255, 252, 245, 0.82);
  --antique-gold-98-a90: rgba(255, 252, 245, 0.9);
  --antique-orange-23-a16: rgba(84, 58, 32, 0.16);
  --antique-orange-23-a18: rgba(84, 58, 32, 0.18);
  --antique-orange-23-a48: rgba(84, 58, 32, 0.48);
  --antique-orange-25: #6A4718;
  --antique-orange-29-a60: rgba(112, 80, 38, 0.6);
  --antique-orange-40: #8F6D3E;
  --antique-orange-45: #A17B46; /* the bottom of the primary button: its dark label 4.7:1 (was #8F6D3E, 3.8) */
  --antique-orange-41: #94703F;
  --antique-orange-41-a12: rgba(148, 112, 63, 0.12);
  --antique-orange-41-a13: rgba(148, 112, 63, 0.13);
  --antique-orange-41-a22: rgba(148, 112, 63, 0.22);
  --antique-orange-41-a26: rgba(148, 112, 63, 0.26);
  --antique-orange-41-a36: rgba(148, 112, 63, 0.36);
  --antique-orange-41-a45: rgba(148, 112, 63, 0.45);
  --antique-orange-49: #A9844F;
  --antique-orange-53: #B48C58;
  --antique-orange-64: #CFAB78;
  --antique-orange-65: #BBAA91;
  --antique-orange-67: #C0B198;
  --antique-orange-70: #D9A88E;
  --antique-orange-73: #CDBFA9;
  --antique-orange-78: #D8CBB6;
  --antique-orange-78-a34: rgba(216, 203, 182, 0.34);
  --antique-orange-84: #E5D8C5;
  --antique-orange-94: #F8F2E8;
  /* Cyberpunk */
  --cyber-blue-4-a72: rgba(5, 7, 13, 0.72);
  --cyber-blue-4-a90: rgba(5, 7, 13, 0.9);
  --cyber-blue-5-a6: rgba(5, 9, 18, 0.06);
  --cyber-blue-5-a8: rgba(5, 9, 18, 0.08);
  --cyber-blue-5-a12: rgba(5, 9, 18, 0.12);
  --cyber-blue-5-a20: rgba(5, 12, 21, 0.2);
  --cyber-blue-57-a8: rgba(37, 147, 255, 0.08);
  --cyber-blue-67: #746BED; /* the primary button's middle, lighter for the dark label: 4.6:1 (was #655BEB, 3.9) */
  --cyber-cyan-56: #35BEEB;
  --cyber-cyan-60-a22: rgba(52, 218, 255, 0.22);
  --cyber-cyan-64-a70: rgba(73, 219, 255, 0.7);
  --cyber-cyan-67-a38: rgba(89, 226, 255, 0.38);
  --cyber-cyan-68-a11: rgba(90, 225, 255, 0.11);
  --cyber-cyan-75: #7ED7FF;
  --cyber-spark: #F2FDFF; /* the current running round the ring while resting (owner 2026-11-12) */
  --cyber-spark-glow: rgba(126, 215, 255, 0.95);
  /* the rest (owner 2026-11-13, ChatGPT layers): light on black blended as «screen» behind the timer; the sparks lie over it (transparent) */
  --cyber-rain-far: url("/app/assets/cyber_rain_far.webp");
  --cyber-rain-near: url("/app/assets/cyber_rain_near.webp");
  --cyber-bokeh: url("/app/assets/cyber_bokeh.webp");
  --cyber-smog: url("/app/assets/cyber_smog.webp");
  --cyber-reflect: url("/app/assets/cyber_reflections.webp");
  --cyber-trail: url("/app/assets/cyber_light_trail.webp");
  --cyber-hud: url("/app/assets/cyber_hud_ring.webp");
  --cyber-shock: url("/app/assets/cyber_shockwave.webp");
  --cyber-sparks: url("/app/assets/cyber_sparks.webp");
  --cyber-cyan-75-a8: rgba(126, 215, 255, 0.08);
  --cyber-cyan-75-a16: rgba(126, 215, 255, 0.16);
  --cyber-cyan-75-a18: rgba(126, 215, 255, 0.18);
  --cyber-cyan-75-a22: rgba(126, 215, 255, 0.22);
  --cyber-cyan-75-a50: rgba(126, 215, 255, 0.5);
  --cyber-cyan-75-a55: rgba(126, 215, 255, 0.55);
  --cyber-cyan-75-a62: rgba(126, 215, 255, 0.62);
  --cyber-cyan-75-a65: rgba(126, 215, 255, 0.65);
  --cyber-cyan-75-a72: rgba(126, 215, 255, 0.72);
  --cyber-cyan-75-a80: rgba(126, 215, 255, 0.8);
  --cyber-cyan-75-a90: rgba(126, 215, 255, 0.9);
  --cyber-cyan-88-a14: rgba(196, 241, 255, 0.14);
  --cyber-cyan-93-a8: rgba(220, 245, 255, 0.08);
  --cyber-ink-0-a98: rgba(0, 0, 0, 0.98);
  --cyber-teal-54-a22: rgba(20, 234, 255, 0.22);
  --cyber-teal-96-a50: rgba(236, 252, 255, 0.5);
  --cyber-violet-62-a20: rgba(193, 62, 255, 0.2);
  --cyber-violet-64: #B146FF;
  --cyber-violet-64-a8: rgba(177, 70, 255, 0.08);
  --cyber-violet-64-a10: rgba(177, 70, 255, 0.1);
  --cyber-violet-64-a12: rgba(177, 70, 255, 0.12);
  --cyber-violet-64-a28: rgba(210, 73, 255, 0.28);
  --cyber-violet-64-a85: rgba(177, 70, 255, 0.85);
  --cyber-violet-65-a10: rgba(206, 74, 255, 0.1);
  /* Old School */
  --oldschool-ink-0-a52: rgba(0, 0, 0, 0.52);
  --oldschool-ink-0-a90: rgba(0, 0, 0, 0.9);
  --oldschool-orange-24: #4A3730;
  --oldschool-orange-24-a28: rgba(74, 55, 48, 0.28);
  --oldschool-orange-30: #6A4431;
  --oldschool-orange-38: #8B5A35;
  --oldschool-orange-49: #B77A45;
  --oldschool-orange-49-a18: rgba(183, 122, 69, 0.18);
  --oldschool-orange-49-a24: rgba(183, 122, 69, 0.24);
  --oldschool-orange-49-a64: rgba(183, 122, 69, 0.64);
  --oldschool-orange-49-a78: rgba(183, 122, 69, 0.78);
  --oldschool-orange-63: #D5A16A;
  --oldschool-orange-63-a45: rgba(213, 161, 106, 0.45);
  --oldschool-orange-88: #F3E5CF;
  --oldschool-orange-88-a10: rgba(255, 227, 194, 0.1);
  --oldschool-orange-88-a14: rgba(255, 227, 194, 0.14);
  --oldschool-orange-91-a18: rgba(255, 225, 210, 0.18);
  --oldschool-red-11: #211917;
  --oldschool-red-28: #72241F;
  --oldschool-red-28-2: #6A2A24;
  --oldschool-red-35: #8F2A26;
  --oldschool-red-35-a76: rgba(143, 42, 38, 0.76);
  --oldschool-red-42: #A73B2E;
  --oldschool-red-42-a72: rgba(167, 59, 46, 0.72);
}

/* Lumen (owner 2026-11-13): a light gym with Valkyrie Voss — cream stone, matte metal, soft daylight and champagne gold. One character:
   both genders show her, so there is no «Он / Она» choice (lib/theme.js). The workout photo is laid out from the timer like Old School
   (the plate under the dial), the profile is the «Lumen Crest» medallion (shared/ui/ui.css). The owner's palette, with the text colours
   taken a step darker where 4.5:1 asked for it: gold-soft #A9794C → #7E5631, secondary #66706A → #5E6862, success, danger. */
:root[data-theme="lumen"] {
  color-scheme: light;
  --photo-workout-male: url("/app/assets/lumen_workout_valkyrie_v3.webp");
  --photo-workout-female: url("/app/assets/lumen_workout_valkyrie_v3.webp");
  --photo-profile-male: url("/app/assets/lumen_profile_valkyrie_v3.webp");
  --photo-profile-female: url("/app/assets/lumen_profile_valkyrie_v3.webp");
  --hero-workout: var(--photo-workout-female);
  --hero-profile: var(--photo-profile-female);
  --hero-workout-pos: center top;
  --hero-profile-pos: 62% 0%;
  --os-photo-w: 3.9284; /* v3: her plate, rim r 185 px around 778,768 of 1536×1024, on the timer's edge */
  --os-photo-h: 2.627;
  --os-photo-x: -0.0207;
  --os-photo-y: -1.4938;
  --os-profile-top: 40px;
  --cyber-head: 1.34; /* the top of the head above the timer's centre: workout fitHeadroom keeps it in view */
  /* her hands, cut from the photo, lie over the timer's rim, so she holds it as in Old School */
  --os-hands: url("/app/assets/lumen_hands_valkyrie_v5.webp");
  --os-hands-x: -0.0399;
  --os-hands-y: 0.3892;
  --os-hands-w: 1.0818;
  --os-hands-h: 0.2822;
  --profile-air: none;
  --app-bg-texture: radial-gradient(ellipse 110% 50% at 50% -12%, rgba(255, 246, 228, 0.9), transparent 64%), radial-gradient(ellipse 80% 40% at 50% 0%, rgba(216, 181, 121, 0.12), transparent 70%), #F4F0E8;
  --color-bg: #F4F0E8;
  --color-surface: #FFFDF8;
  --color-text: #26312F;
  --color-gold: #B98A55;
  --color-crimson: #A84E3B;
  --color-surface-top: #FFFDF8;
  --color-surface-bottom: #F3EEE5;
  --color-surface-gradient: linear-gradient(145deg, #FFFDF8 0%, #F6F1E8 100%);
  --color-crimson-card: linear-gradient(145deg, #FBEDE6 0%, #F6E5DC 100%);
  --color-crimson-deep: #94412F;
  --color-accent-card: linear-gradient(145deg, #FFF7EA 0%, #F2E4D0 100%);
  --color-accent-deep: #7E5631;
  --color-header-accent: #E9DFD0;
  --color-header-accent-deep: #D7C5AC;
  --color-gold-light: #D8B579;
  --color-gold-gradient: linear-gradient(180deg, #E4C892 0%, #D8B579 52%, #C99D63 100%); /* champagne: graphite text 5.4:1 and up */
  --color-gold-pressed: linear-gradient(180deg, #D3B47B 0%, #BF925A 100%);
  --color-gold-edge: #B98A55;
  --color-gold-soft: #7E5631; /* champagne bronze for text and values: 5:1 and up (the owner's #A9794C is 3.3:1) */
  --color-text-secondary: #5E6862; /* grey-green */
  --color-text-on-gold: #26312F;
  --color-text-on-gold-soft: #FFFDF8;
  --color-text-on-danger: #FFFDF8;
  --color-divider: #D9D1C3;
  --color-nav-bg: linear-gradient(180deg, #FFFDF8 0%, #EFE9DE 100%);
  --color-nav-border: #D9D1C3;
  --color-segment-bg: #EAE4D9;
  --color-success: #4A6656;
  --color-success-bg: #E2ECE3;
  --color-danger: #94412F;
  --color-danger-fill: linear-gradient(180deg, #A84E3B 0%, #8E3E2D 100%);
  --color-neutral: #5E6862;
  --color-scrim: rgba(38, 49, 47, 0.22);
  --hero-fade-top: rgba(244, 240, 232, 0.05);
  --hero-fade-soft: rgba(244, 240, 232, 0.14);
  --hero-fade-strong: rgba(244, 240, 232, 0.76);
  --hero-fade-profile: rgba(244, 240, 232, 0.76);
  --hero-fade-profile-from: 64%;
  --color-field: linear-gradient(180deg, #EAE4D9 0%, #F0EBE2 100%);
  --color-field-border: #D2C4AD;
  --color-floating: linear-gradient(180deg, #FFFDF8 0%, #F3EEE5 100%);
  --color-key: linear-gradient(180deg, #FFFDF8 0%, #F0EBE2 100%);
  --color-key-pressed: linear-gradient(180deg, #E6DDCD 0%, #EFE8DC 100%);
  --color-raised: linear-gradient(180deg, #FFFDF8 0%, #F3EEE5 100%);
  --color-ring-core: radial-gradient(circle at 50% 36%, rgba(255, 253, 248, 0.78) 0%, rgba(244, 238, 228, 0.62) 72%);
  --ring-glass-border: rgba(216, 181, 121, 0.85);
  --color-pressed: rgba(185, 138, 85, 0.1);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px -14px rgba(110, 92, 68, 0.32);
  --shadow-floating: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 -16px 40px rgba(110, 92, 68, 0.16);
  --shadow-dialog: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 22px 50px rgba(110, 92, 68, 0.22);
  --shadow-drawer: inset -1px 0 0 rgba(255, 255, 255, 0.6), 18px 0 40px rgba(110, 92, 68, 0.2);
  --shadow-nav: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 -8px 22px rgba(110, 92, 68, 0.12);
  --shadow-field: inset 0 2px 3px rgba(110, 92, 68, 0.14);
  --shadow-key: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 2px rgba(110, 92, 68, 0.18);
  --shadow-gold: inset 0 1px 0 rgba(255, 250, 238, 0.75), 0 8px 16px -8px rgba(169, 121, 76, 0.42);
  --shadow-gold-pressed: inset 0 1px 2px rgba(126, 86, 49, 0.3);
  --shadow-danger: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 8px 16px -8px rgba(168, 78, 59, 0.4);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 14px 26px -16px rgba(169, 121, 76, 0.38);
  --gold-glow: 0 0 16px rgba(216, 181, 121, 0.32);
  --gold-glow-strong: 0 0 22px 4px rgba(216, 181, 121, 0.38);
  --gold-glow-arc: drop-shadow(0 0 4px rgba(216, 181, 121, 0.55));
  --crimson-glow: 0 0 14px rgba(168, 78, 59, 0.22);
  --text-shadow-photo: 0 1px 2px rgba(255, 253, 248, 0.7), 0 0 14px rgba(255, 253, 248, 0.55);
  --hero-ink: var(--color-text);
  --focus-ring-color: #A9794C;
  --radius-card: 16px;
  --radius-row: 10px;
  --radius-chip: 8px;
  /* Lumen's own (shared/ui/ui.css skin): the frosted info card of the profile, the champagne halo, the haze of the windows */
  --lumen-glass: rgba(255, 253, 248, 0.84);
  --lumen-glass-border: rgba(185, 138, 85, 0.35);
  --lumen-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 34px -18px rgba(110, 92, 68, 0.38);
  --lumen-hairline: rgba(185, 138, 85, 0.55);
  --lumen-rim: #D8B579;
  --lumen-rim-deep: #B98A55;
  --lumen-track: rgba(185, 138, 85, 0.24);
  --lumen-ring-glow: 0 0 0 1px rgba(255, 253, 248, 0.7), 0 10px 26px -12px rgba(110, 92, 68, 0.4), 0 0 26px -6px rgba(216, 181, 121, 0.55);
  --lumen-halo: radial-gradient(circle, transparent 54%, rgba(216, 181, 121, 0.0) 56%, rgba(216, 181, 121, 0.42) 61%, rgba(232, 208, 160, 0.16) 66%, transparent 72%);
  --lumen-haze: radial-gradient(ellipse 46% 34% at 12% 8%, rgba(255, 251, 240, 0.55), transparent 70%), radial-gradient(ellipse 40% 30% at 88% 6%, rgba(255, 249, 236, 0.4), transparent 72%);
  --lumen-crest-edge: rgba(185, 138, 85, 0.45);
  --lumen-crest-bg: linear-gradient(180deg, #EFE6D7 0%, #E6DAC6 100%);
}
:root {
  --preview-lumen-male: url("/app/assets/lumen_workout_valkyrie_v3.webp");
  --preview-lumen-female: url("/app/assets/lumen_workout_valkyrie_v3.webp");
  --preview-lumen-bg: #F4F0E8;
  --preview-lumen-slab: #FFFDF8;
  --preview-lumen-line: #B98A55;
  --preview-lumen-accent: #B98A55;
  --preview-lumen-ink: #26312F;
  --preview-lumen-veil: rgba(244, 240, 232, 0.94);
}

/* «Моя тема» styles — generated by tools/my-theme-styles.py (owner 2026-11-13); edit the palettes there, not here. */
:root[data-theme="lumen"][data-style="beige"] { /* «Бежевая» */
  color-scheme: light;
  --app-bg-texture: radial-gradient(ellipse 110% 50% at 50% -12%, rgba(250, 242, 230, 0.55), transparent 64%), radial-gradient(ellipse 80% 40% at 50% 0%, rgba(168, 110, 62, 0.1), transparent 70%), #E8D9C3;
  --color-bg: #E8D9C3;
  --color-surface: #FAF2E6;
  --color-text: #33261C;
  --color-gold: #A86E3E;
  --color-crimson: #943B28;
  --color-surface-top: #FAF2E6;
  --color-surface-bottom: #EEE1CD;
  --color-surface-gradient: linear-gradient(145deg, #FAF2E6 0%, #EEE1CD 100%);
  --color-crimson-card: linear-gradient(145deg, #F6E3D9 0%, #EED6CA 100%);
  --color-crimson-deep: #943B28;
  --color-accent-card: linear-gradient(145deg, #FFF0DC 0%, #ECD5B5 100%);
  --color-accent-deep: #74471F;
  --color-header-accent: #E1CDB0;
  --color-header-accent-deep: #CBAF8A;
  --color-gold-light: #D3A57A;
  --color-gold-gradient: linear-gradient(180deg, #E4C29A 0%, #D6AC7C 52%, #C8955F 100%);
  --color-gold-pressed: linear-gradient(180deg, #D3A777 0%, #B88957 100%);
  --color-gold-edge: #A86E3E;
  --color-gold-soft: #74471F;
  --color-text-secondary: #634F3E;
  --color-text-on-gold: #2A1D13;
  --color-text-on-gold-soft: #FAF2E6;
  --color-text-on-danger: #FAF2E6;
  --color-divider: #D6C3A8;
  --color-nav-bg: linear-gradient(180deg, #FAF2E6 0%, #EBDDC8 100%);
  --color-nav-border: #D6C3A8;
  --color-segment-bg: #E0CFB6;
  --color-success: #4A6545;
  --color-success-bg: #E1E8D6;
  --color-danger: #943B28;
  --color-danger-fill: linear-gradient(180deg, #943B28 0%, #7E3222 100%);
  --color-neutral: #634F3E;
  --color-scrim: rgba(51, 38, 28, 0.22);
  --hero-fade-top: rgba(232, 217, 195, 0.05);
  --hero-fade-soft: rgba(232, 217, 195, 0.16);
  --hero-fade-strong: rgba(232, 217, 195, 0.8);
  --hero-fade-profile: rgba(232, 217, 195, 0.78);
  --hero-fade-profile-from: 64%;
  --color-field: linear-gradient(180deg, #E2D1B9 0%, #ECE0CE 100%);
  --color-field-border: #C6AA86;
  --color-floating: linear-gradient(180deg, #FAF2E6 0%, #EEE1CD 100%);
  --color-key: linear-gradient(180deg, #FAF2E6 0%, #ECE0CE 100%);
  --color-key-pressed: linear-gradient(180deg, #E2D1B9 0%, #ECE0CE 100%);
  --color-raised: linear-gradient(180deg, #FAF2E6 0%, #EEE1CD 100%);
  --color-ring-core: radial-gradient(circle at 50% 36%, rgba(250, 242, 230, 0.8) 0%, rgba(238, 225, 205, 0.64) 72%);
  --ring-glass-border: rgba(211, 165, 122, 0.85);
  --color-pressed: rgba(168, 110, 62, 0.12);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px -14px rgba(96, 66, 38, 0.32);
  --shadow-floating: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 -16px 40px rgba(96, 66, 38, 0.16);
  --shadow-dialog: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 22px 50px rgba(96, 66, 38, 0.22);
  --shadow-drawer: 18px 0 40px rgba(96, 66, 38, 0.2);
  --shadow-nav: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 -8px 22px rgba(96, 66, 38, 0.12);
  --shadow-field: inset 0 2px 3px rgba(96, 66, 38, 0.14);
  --shadow-key: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 2px rgba(96, 66, 38, 0.18);
  --shadow-gold: inset 0 1px 0 rgba(228, 194, 154, 0.6), 0 8px 16px -8px rgba(168, 110, 62, 0.42);
  --shadow-gold-pressed: inset 0 1px 2px rgba(116, 71, 31, 0.3);
  --shadow-danger: 0 8px 16px -8px rgba(148, 59, 40, 0.4);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 14px 26px -16px rgba(168, 110, 62, 0.38);
  --gold-glow: 0 0 16px rgba(211, 165, 122, 0.32);
  --gold-glow-strong: 0 0 22px 4px rgba(211, 165, 122, 0.38);
  --gold-glow-arc: drop-shadow(0 0 4px rgba(211, 165, 122, 0.55));
  --crimson-glow: 0 0 14px rgba(148, 59, 40, 0.22);
  --text-shadow-photo: 0 1px 2px rgba(250, 242, 230, 0.7), 0 0 14px rgba(250, 242, 230, 0.55);
  --hero-ink: var(--color-text);
  --focus-ring-color: #74471F;
  --radius-card: 20px;
  --radius-row: 12px;
  --radius-chip: 10px;
  --lumen-glass: rgba(250, 242, 230, 0.86);
  --lumen-glass-border: rgba(168, 110, 62, 0.35);
  --lumen-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 34px -18px rgba(96, 66, 38, 0.38);
  --lumen-hairline: rgba(168, 110, 62, 0.55);
  --lumen-rim: #D3A57A;
  --lumen-rim-deep: #A86E3E;
  --lumen-track: rgba(168, 110, 62, 0.24);
  --lumen-ring-glow: 0 0 0 1px rgba(250, 242, 230, 0.6), 0 10px 26px -12px rgba(96, 66, 38, 0.4), 0 0 26px -6px rgba(211, 165, 122, 0.55);
  --lumen-halo: radial-gradient(circle, transparent 54%, rgba(211, 165, 122, 0) 56%, rgba(211, 165, 122, 0.42) 61%, rgba(211, 165, 122, 0.16) 66%, transparent 72%);
  --lumen-haze: radial-gradient(ellipse 46% 34% at 12% 8%, rgba(250, 242, 230, 0.45), transparent 70%), radial-gradient(ellipse 40% 30% at 88% 6%, rgba(250, 242, 230, 0.35), transparent 70%);
  --lumen-crest-edge: rgba(168, 110, 62, 0.45);
  --lumen-crest-bg: linear-gradient(180deg, #E4D1B5 0%, #D6BE9C 100%);
}
:root[data-style="beige"] { --preview-lumen-bg: #E8D9C3; --preview-lumen-slab: #FAF2E6; --preview-lumen-line: #A86E3E; --preview-lumen-accent: #A86E3E; --preview-lumen-ink: #33261C; --preview-lumen-veil: rgba(232, 217, 195, 0.94); }
:root[data-theme="lumen"][data-style="classic"] { /* «Классика» */
  color-scheme: light;
  --app-bg-texture: radial-gradient(ellipse 110% 50% at 50% -12%, rgba(255, 255, 255, 0.55), transparent 64%), radial-gradient(ellipse 80% 40% at 50% 0%, rgba(31, 58, 95, 0.1), transparent 70%), #F5F4F0;
  --color-bg: #F5F4F0;
  --color-surface: #FFFFFF;
  --color-text: #1B2230;
  --color-gold: #1F3A5F;
  --color-crimson: #9B2C2C;
  --color-surface-top: #FFFFFF;
  --color-surface-bottom: #F8F7F3;
  --color-surface-gradient: linear-gradient(145deg, #FFFFFF 0%, #F8F7F3 100%);
  --color-crimson-card: linear-gradient(145deg, #F9EAEA 0%, #F2DEDE 100%);
  --color-crimson-deep: #9B2C2C;
  --color-accent-card: linear-gradient(145deg, #F3F6FA 0%, #E6ECF4 100%);
  --color-accent-deep: #1F3A5F;
  --color-header-accent: #EAE7DF;
  --color-header-accent-deep: #D8D4C9;
  --color-gold-light: #8FA3C0;
  --color-gold-gradient: linear-gradient(180deg, #2C4B78 0%, #243F66 52%, #1C3354 100%);
  --color-gold-pressed: linear-gradient(180deg, #223D62 0%, #1A2F4D 100%);
  --color-gold-edge: #1F3A5F;
  --color-gold-soft: #1F3A5F;
  --color-text-secondary: #525A66;
  --color-text-on-gold: #FFFFFF;
  --color-text-on-gold-soft: #FFFFFF;
  --color-text-on-danger: #FFFFFF;
  --color-divider: #DEDCD5;
  --color-nav-bg: linear-gradient(180deg, #FFFFFF 0%, #F6F6F2 100%);
  --color-nav-border: #DEDCD5;
  --color-segment-bg: #ECEAE4;
  --color-success: #2F5D46;
  --color-success-bg: #E4EEE8;
  --color-danger: #9B2C2C;
  --color-danger-fill: linear-gradient(180deg, #9B2C2C 0%, #842525 100%);
  --color-neutral: #525A66;
  --color-scrim: rgba(27, 34, 48, 0.22);
  --hero-fade-top: rgba(245, 244, 240, 0.05);
  --hero-fade-soft: rgba(245, 244, 240, 0.16);
  --hero-fade-strong: rgba(245, 244, 240, 0.8);
  --hero-fade-profile: rgba(245, 244, 240, 0.78);
  --hero-fade-profile-from: 64%;
  --color-field: linear-gradient(180deg, #F0EEE9 0%, #F6F5F1 100%);
  --color-field-border: #CBC7BC;
  --color-floating: linear-gradient(180deg, #FFFFFF 0%, #F8F7F3 100%);
  --color-key: linear-gradient(180deg, #FFFFFF 0%, #F6F5F1 100%);
  --color-key-pressed: linear-gradient(180deg, #F0EEE9 0%, #F6F5F1 100%);
  --color-raised: linear-gradient(180deg, #FFFFFF 0%, #F8F7F3 100%);
  --color-ring-core: radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.8) 0%, rgba(248, 247, 243, 0.64) 72%);
  --ring-glass-border: rgba(143, 163, 192, 0.85);
  --color-pressed: rgba(31, 58, 95, 0.12);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px -14px rgba(27, 34, 48, 0.32);
  --shadow-floating: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 -16px 40px rgba(27, 34, 48, 0.16);
  --shadow-dialog: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 22px 50px rgba(27, 34, 48, 0.22);
  --shadow-drawer: 18px 0 40px rgba(27, 34, 48, 0.2);
  --shadow-nav: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 -8px 22px rgba(27, 34, 48, 0.12);
  --shadow-field: inset 0 2px 3px rgba(27, 34, 48, 0.14);
  --shadow-key: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 2px rgba(27, 34, 48, 0.18);
  --shadow-gold: inset 0 1px 0 rgba(44, 75, 120, 0.6), 0 8px 16px -8px rgba(31, 58, 95, 0.42);
  --shadow-gold-pressed: inset 0 1px 2px rgba(31, 58, 95, 0.3);
  --shadow-danger: 0 8px 16px -8px rgba(155, 44, 44, 0.4);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 14px 26px -16px rgba(31, 58, 95, 0.38);
  --gold-glow: 0 0 16px rgba(143, 163, 192, 0.32);
  --gold-glow-strong: 0 0 22px 4px rgba(143, 163, 192, 0.38);
  --gold-glow-arc: drop-shadow(0 0 4px rgba(143, 163, 192, 0.55));
  --crimson-glow: 0 0 14px rgba(155, 44, 44, 0.22);
  --text-shadow-photo: 0 1px 2px rgba(255, 255, 255, 0.7), 0 0 14px rgba(255, 255, 255, 0.55);
  --hero-ink: var(--color-text);
  --focus-ring-color: #1F3A5F;
  --radius-card: 8px;
  --radius-row: 6px;
  --radius-chip: 4px;
  --lumen-glass: rgba(255, 255, 255, 0.86);
  --lumen-glass-border: rgba(31, 58, 95, 0.35);
  --lumen-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 34px -18px rgba(27, 34, 48, 0.38);
  --lumen-hairline: rgba(31, 58, 95, 0.55);
  --lumen-rim: #8FA3C0;
  --lumen-rim-deep: #1F3A5F;
  --lumen-track: rgba(31, 58, 95, 0.24);
  --lumen-ring-glow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 10px 26px -12px rgba(27, 34, 48, 0.4), 0 0 26px -6px rgba(143, 163, 192, 0.55);
  --lumen-halo: radial-gradient(circle, transparent 54%, rgba(143, 163, 192, 0) 56%, rgba(143, 163, 192, 0.42) 61%, rgba(143, 163, 192, 0.16) 66%, transparent 72%);
  --lumen-haze: radial-gradient(ellipse 46% 34% at 12% 8%, rgba(255, 255, 255, 0.45), transparent 70%), radial-gradient(ellipse 40% 30% at 88% 6%, rgba(255, 255, 255, 0.35), transparent 70%);
  --lumen-crest-edge: rgba(31, 58, 95, 0.45);
  --lumen-crest-bg: linear-gradient(180deg, #ECEAE3 0%, #E1DED5 100%);
  --font-title: 700 28px/1.1 "Antique Digits", "Georgia", "Times New Roman", serif; /* «Классика»: headings with serifs, even digits (the Antique Digits face) */
  --font-card-title: 700 24px/1.1 "Antique Digits", "Georgia", "Times New Roman", serif;
  --font-section: 600 18px/1.2 "Antique Digits", "Georgia", "Times New Roman", serif;
  --font-hero: 700 52px/1 "Antique Digits", "Georgia", "Times New Roman", serif;
  --tracking-title: 0.01em;
}
:root[data-style="classic"] { --preview-lumen-bg: #F5F4F0; --preview-lumen-slab: #FFFFFF; --preview-lumen-line: #1F3A5F; --preview-lumen-accent: #1F3A5F; --preview-lumen-ink: #1B2230; --preview-lumen-veil: rgba(245, 244, 240, 0.94); }
:root[data-theme="lumen"][data-style="dark"] { /* «Тёмная» */
  color-scheme: dark;
  --app-bg-texture: radial-gradient(ellipse 110% 50% at 50% -12%, rgba(30, 32, 36, 0.06), transparent 64%), radial-gradient(ellipse 80% 40% at 50% 0%, rgba(207, 174, 130, 0.1), transparent 70%), #141518;
  --color-bg: #141518;
  --color-surface: #1E2024;
  --color-text: #EEE9E1;
  --color-gold: #CFAE82;
  --color-crimson: #E07A6A;
  --color-surface-top: #1E2024;
  --color-surface-bottom: #18191D;
  --color-surface-gradient: linear-gradient(145deg, #1E2024 0%, #18191D 100%);
  --color-crimson-card: linear-gradient(145deg, #2D1E1C 0%, #221716 100%);
  --color-crimson-deep: #E07A6A;
  --color-accent-card: linear-gradient(145deg, #2B251D 0%, #1F1C17 100%);
  --color-accent-deep: #D9BC93;
  --color-header-accent: #24262B;
  --color-header-accent-deep: #191B1E;
  --color-gold-light: #E6CDA6;
  --color-gold-gradient: linear-gradient(180deg, #EBD3AE 0%, #DABC92 52%, #C9A577 100%);
  --color-gold-pressed: linear-gradient(180deg, #D7B78D 0%, #B9986D 100%);
  --color-gold-edge: #CFAE82;
  --color-gold-soft: #D9BC93;
  --color-text-secondary: #A8A299;
  --color-text-on-gold: #1A1714;
  --color-text-on-gold-soft: #141518;
  --color-text-on-danger: #FFFFFF;
  --color-divider: #2F3237;
  --color-nav-bg: linear-gradient(180deg, #1E2024 0%, #16171A 100%);
  --color-nav-border: #2F3237;
  --color-segment-bg: #25272C;
  --color-success: #8FBF9A;
  --color-success-bg: #1D2A22;
  --color-danger: #E07A6A;
  --color-danger-fill: linear-gradient(180deg, #B4493A 0%, #953A2E 100%);
  --color-neutral: #A8A299;
  --color-scrim: rgba(0, 0, 0, 0.5);
  --hero-fade-top: rgba(20, 21, 24, 0.05);
  --hero-fade-soft: rgba(20, 21, 24, 0.16);
  --hero-fade-strong: rgba(20, 21, 24, 0.8);
  --hero-fade-profile: rgba(20, 21, 24, 0.78);
  --hero-fade-profile-from: 64%;
  --color-field: linear-gradient(180deg, #17181B 0%, #202226 100%);
  --color-field-border: #3B3E44;
  --color-floating: linear-gradient(180deg, #1E2024 0%, #18191D 100%);
  --color-key: linear-gradient(180deg, #1E2024 0%, #202226 100%);
  --color-key-pressed: linear-gradient(180deg, #17181B 0%, #202226 100%);
  --color-raised: linear-gradient(180deg, #1E2024 0%, #18191D 100%);
  --color-ring-core: radial-gradient(circle at 50% 36%, rgba(30, 32, 36, 0.74) 0%, rgba(24, 25, 29, 0.6) 72%);
  --ring-glass-border: rgba(230, 205, 166, 0.85);
  --color-pressed: rgba(207, 174, 130, 0.12);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 22px -14px rgba(0, 0, 0, 0.7040000000000001);
  --shadow-floating: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 -16px 40px rgba(0, 0, 0, 0.35200000000000004);
  --shadow-dialog: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 22px 50px rgba(0, 0, 0, 0.48400000000000004);
  --shadow-drawer: 18px 0 40px rgba(0, 0, 0, 0.44000000000000006);
  --shadow-nav: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 -8px 22px rgba(0, 0, 0, 0.264);
  --shadow-field: inset 0 2px 3px rgba(0, 0, 0, 0.30800000000000005);
  --shadow-key: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.396);
  --shadow-gold: inset 0 1px 0 rgba(235, 211, 174, 0.6), 0 8px 16px -8px rgba(207, 174, 130, 0.42);
  --shadow-gold-pressed: inset 0 1px 2px rgba(217, 188, 147, 0.3);
  --shadow-danger: 0 8px 16px -8px rgba(224, 122, 106, 0.4);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 26px -16px rgba(207, 174, 130, 0.38);
  --gold-glow: 0 0 16px rgba(230, 205, 166, 0.32);
  --gold-glow-strong: 0 0 22px 4px rgba(230, 205, 166, 0.38);
  --gold-glow-arc: drop-shadow(0 0 4px rgba(230, 205, 166, 0.55));
  --crimson-glow: 0 0 14px rgba(224, 122, 106, 0.22);
  --text-shadow-photo: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 14px rgba(0, 0, 0, 0.55);
  --hero-ink: var(--color-text);
  --focus-ring-color: #D9BC93;
  --radius-card: 16px;
  --radius-row: 10px;
  --radius-chip: 8px;
  --lumen-glass: rgba(30, 32, 36, 0.82);
  --lumen-glass-border: rgba(207, 174, 130, 0.35);
  --lumen-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 34px -18px rgba(0, 0, 0, 0.8360000000000001);
  --lumen-hairline: rgba(207, 174, 130, 0.55);
  --lumen-rim: #E6CDA6;
  --lumen-rim-deep: #CFAE82;
  --lumen-track: rgba(207, 174, 130, 0.24);
  --lumen-ring-glow: 0 0 0 1px rgba(30, 32, 36, 0.6), 0 10px 26px -12px rgba(0, 0, 0, 0.8800000000000001), 0 0 26px -6px rgba(230, 205, 166, 0.55);
  --lumen-halo: radial-gradient(circle, transparent 54%, rgba(230, 205, 166, 0) 56%, rgba(230, 205, 166, 0.42) 61%, rgba(230, 205, 166, 0.16) 66%, transparent 72%);
  --lumen-haze: radial-gradient(ellipse 46% 34% at 12% 8%, rgba(30, 32, 36, 0.05), transparent 70%), radial-gradient(ellipse 40% 30% at 88% 6%, rgba(30, 32, 36, 0.04), transparent 70%);
  --lumen-crest-edge: rgba(207, 174, 130, 0.45);
  --lumen-crest-bg: linear-gradient(180deg, #25272B 0%, #1A1C1F 100%);
}
:root[data-style="dark"] { --preview-lumen-bg: #141518; --preview-lumen-slab: #1E2024; --preview-lumen-line: #CFAE82; --preview-lumen-accent: #CFAE82; --preview-lumen-ink: #EEE9E1; --preview-lumen-veil: rgba(20, 21, 24, 0.94); }
:root[data-theme="lumen"][data-style="midnight"] { /* «Полночь» */
  color-scheme: dark;
  --app-bg-texture: radial-gradient(ellipse 110% 50% at 50% -12%, rgba(22, 30, 49, 0.06), transparent 64%), radial-gradient(ellipse 80% 40% at 50% 0%, rgba(127, 168, 240, 0.1), transparent 70%), #0D1322;
  --color-bg: #0D1322;
  --color-surface: #161E31;
  --color-text: #E8EDF7;
  --color-gold: #7FA8F0;
  --color-crimson: #F08A80;
  --color-surface-top: #161E31;
  --color-surface-bottom: #11182A;
  --color-surface-gradient: linear-gradient(145deg, #161E31 0%, #11182A 100%);
  --color-crimson-card: linear-gradient(145deg, #2F1C26 0%, #22151D 100%);
  --color-crimson-deep: #F08A80;
  --color-accent-card: linear-gradient(145deg, #1D2B4B 0%, #141E36 100%);
  --color-accent-deep: #A3C0F7;
  --color-header-accent: #1A2440;
  --color-header-accent-deep: #121A2E;
  --color-gold-light: #A9C6FF;
  --color-gold-gradient: linear-gradient(180deg, #BCD2FF 0%, #9EBAF4 52%, #7FA3EA 100%);
  --color-gold-pressed: linear-gradient(180deg, #97B6F2 0%, #7596D7 100%);
  --color-gold-edge: #7FA8F0;
  --color-gold-soft: #A3C0F7;
  --color-text-secondary: #9AA6BD;
  --color-text-on-gold: #0D1322;
  --color-text-on-gold-soft: #0D1322;
  --color-text-on-danger: #FFFFFF;
  --color-divider: #25314A;
  --color-nav-bg: linear-gradient(180deg, #161E31 0%, #0F1626 100%);
  --color-nav-border: #25314A;
  --color-segment-bg: #1B2540;
  --color-success: #86C9A6;
  --color-success-bg: #13281F;
  --color-danger: #F08A80;
  --color-danger-fill: linear-gradient(180deg, #B54A42 0%, #963B35 100%);
  --color-neutral: #9AA6BD;
  --color-scrim: rgba(0, 0, 0, 0.5);
  --hero-fade-top: rgba(13, 19, 34, 0.05);
  --hero-fade-soft: rgba(13, 19, 34, 0.16);
  --hero-fade-strong: rgba(13, 19, 34, 0.8);
  --hero-fade-profile: rgba(13, 19, 34, 0.78);
  --hero-fade-profile-from: 64%;
  --color-field: linear-gradient(180deg, #10172A 0%, #18213A 100%);
  --color-field-border: #2E3C5A;
  --color-floating: linear-gradient(180deg, #161E31 0%, #11182A 100%);
  --color-key: linear-gradient(180deg, #161E31 0%, #18213A 100%);
  --color-key-pressed: linear-gradient(180deg, #10172A 0%, #18213A 100%);
  --color-raised: linear-gradient(180deg, #161E31 0%, #11182A 100%);
  --color-ring-core: radial-gradient(circle at 50% 36%, rgba(22, 30, 49, 0.74) 0%, rgba(17, 24, 42, 0.6) 72%);
  --ring-glass-border: rgba(169, 198, 255, 0.85);
  --color-pressed: rgba(127, 168, 240, 0.12);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 22px -14px rgba(0, 0, 0, 0.7040000000000001);
  --shadow-floating: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 -16px 40px rgba(0, 0, 0, 0.35200000000000004);
  --shadow-dialog: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 22px 50px rgba(0, 0, 0, 0.48400000000000004);
  --shadow-drawer: 18px 0 40px rgba(0, 0, 0, 0.44000000000000006);
  --shadow-nav: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 -8px 22px rgba(0, 0, 0, 0.264);
  --shadow-field: inset 0 2px 3px rgba(0, 0, 0, 0.30800000000000005);
  --shadow-key: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.396);
  --shadow-gold: inset 0 1px 0 rgba(188, 210, 255, 0.6), 0 8px 16px -8px rgba(127, 168, 240, 0.42);
  --shadow-gold-pressed: inset 0 1px 2px rgba(163, 192, 247, 0.3);
  --shadow-danger: 0 8px 16px -8px rgba(240, 138, 128, 0.4);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 14px 26px -16px rgba(127, 168, 240, 0.38);
  --gold-glow: 0 0 16px rgba(169, 198, 255, 0.32);
  --gold-glow-strong: 0 0 22px 4px rgba(169, 198, 255, 0.38);
  --gold-glow-arc: drop-shadow(0 0 4px rgba(169, 198, 255, 0.55));
  --crimson-glow: 0 0 14px rgba(240, 138, 128, 0.22);
  --text-shadow-photo: 0 1px 3px rgba(0, 0, 0, 0.8), 0 2px 14px rgba(0, 0, 0, 0.55);
  --hero-ink: var(--color-text);
  --focus-ring-color: #A3C0F7;
  --radius-card: 18px;
  --radius-row: 12px;
  --radius-chip: 10px;
  --lumen-glass: rgba(22, 30, 49, 0.82);
  --lumen-glass-border: rgba(127, 168, 240, 0.35);
  --lumen-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 34px -18px rgba(0, 0, 0, 0.8360000000000001);
  --lumen-hairline: rgba(127, 168, 240, 0.55);
  --lumen-rim: #A9C6FF;
  --lumen-rim-deep: #7FA8F0;
  --lumen-track: rgba(127, 168, 240, 0.24);
  --lumen-ring-glow: 0 0 0 1px rgba(22, 30, 49, 0.6), 0 10px 26px -12px rgba(0, 0, 0, 0.8800000000000001), 0 0 26px -6px rgba(169, 198, 255, 0.55);
  --lumen-halo: radial-gradient(circle, transparent 54%, rgba(169, 198, 255, 0) 56%, rgba(169, 198, 255, 0.42) 61%, rgba(169, 198, 255, 0.16) 66%, transparent 72%);
  --lumen-haze: radial-gradient(ellipse 46% 34% at 12% 8%, rgba(22, 30, 49, 0.05), transparent 70%), radial-gradient(ellipse 40% 30% at 88% 6%, rgba(22, 30, 49, 0.04), transparent 70%);
  --lumen-crest-edge: rgba(127, 168, 240, 0.45);
  --lumen-crest-bg: linear-gradient(180deg, #1B2541 0%, #121A2E 100%);
}
:root[data-style="midnight"] { --preview-lumen-bg: #0D1322; --preview-lumen-slab: #161E31; --preview-lumen-line: #7FA8F0; --preview-lumen-accent: #7FA8F0; --preview-lumen-ink: #E8EDF7; --preview-lumen-veil: rgba(13, 19, 34, 0.94); }
:root[data-theme="lumen"][data-style="rose"] { /* «Пудровая» */
  color-scheme: light;
  --app-bg-texture: radial-gradient(ellipse 110% 50% at 50% -12%, rgba(255, 250, 250, 0.55), transparent 64%), radial-gradient(ellipse 80% 40% at 50% 0%, rgba(181, 106, 128, 0.1), transparent 70%), #F5ECEC;
  --color-bg: #F5ECEC;
  --color-surface: #FFFAFA;
  --color-text: #3A262D;
  --color-gold: #B56A80;
  --color-crimson: #9C3B33;
  --color-surface-top: #FFFAFA;
  --color-surface-bottom: #F6EBEC;
  --color-surface-gradient: linear-gradient(145deg, #FFFAFA 0%, #F6EBEC 100%);
  --color-crimson-card: linear-gradient(145deg, #FBE9E6 0%, #F4DCD7 100%);
  --color-crimson-deep: #9C3B33;
  --color-accent-card: linear-gradient(145deg, #FFF1F4 0%, #F5DDE4 100%);
  --color-accent-deep: #8A475B;
  --color-header-accent: #EEDDE1;
  --color-header-accent-deep: #DEC4CA;
  --color-gold-light: #E2AEBD;
  --color-gold-gradient: linear-gradient(180deg, #F0C9D4 0%, #E4AEBE 52%, #D894A8 100%);
  --color-gold-pressed: linear-gradient(180deg, #E2A9BA 0%, #C7889B 100%);
  --color-gold-edge: #B56A80;
  --color-gold-soft: #8A475B;
  --color-text-secondary: #6B555D;
  --color-text-on-gold: #3A262D;
  --color-text-on-gold-soft: #FFFAFA;
  --color-text-on-danger: #FFFAFA;
  --color-divider: #E5D3D6;
  --color-nav-bg: linear-gradient(180deg, #FFFAFA 0%, #F6ECEC 100%);
  --color-nav-border: #E5D3D6;
  --color-segment-bg: #EEDFE2;
  --color-success: #4A6855;
  --color-success-bg: #E5EEE7;
  --color-danger: #9C3B33;
  --color-danger-fill: linear-gradient(180deg, #9C3B33 0%, #85322B 100%);
  --color-neutral: #6B555D;
  --color-scrim: rgba(58, 38, 45, 0.22);
  --hero-fade-top: rgba(245, 236, 236, 0.05);
  --hero-fade-soft: rgba(245, 236, 236, 0.16);
  --hero-fade-strong: rgba(245, 236, 236, 0.8);
  --hero-fade-profile: rgba(245, 236, 236, 0.78);
  --hero-fade-profile-from: 64%;
  --color-field: linear-gradient(180deg, #EFE2E4 0%, #F6EDEE 100%);
  --color-field-border: #D9BEC4;
  --color-floating: linear-gradient(180deg, #FFFAFA 0%, #F6EBEC 100%);
  --color-key: linear-gradient(180deg, #FFFAFA 0%, #F6EDEE 100%);
  --color-key-pressed: linear-gradient(180deg, #EFE2E4 0%, #F6EDEE 100%);
  --color-raised: linear-gradient(180deg, #FFFAFA 0%, #F6EBEC 100%);
  --color-ring-core: radial-gradient(circle at 50% 36%, rgba(255, 250, 250, 0.8) 0%, rgba(246, 235, 236, 0.64) 72%);
  --ring-glass-border: rgba(226, 174, 189, 0.85);
  --color-pressed: rgba(181, 106, 128, 0.12);
  --surface-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px -14px rgba(110, 64, 78, 0.32);
  --shadow-floating: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 -16px 40px rgba(110, 64, 78, 0.16);
  --shadow-dialog: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 22px 50px rgba(110, 64, 78, 0.22);
  --shadow-drawer: 18px 0 40px rgba(110, 64, 78, 0.2);
  --shadow-nav: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 -8px 22px rgba(110, 64, 78, 0.12);
  --shadow-field: inset 0 2px 3px rgba(110, 64, 78, 0.14);
  --shadow-key: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 2px rgba(110, 64, 78, 0.18);
  --shadow-gold: inset 0 1px 0 rgba(240, 201, 212, 0.6), 0 8px 16px -8px rgba(181, 106, 128, 0.42);
  --shadow-gold-pressed: inset 0 1px 2px rgba(138, 71, 91, 0.3);
  --shadow-danger: 0 8px 16px -8px rgba(156, 59, 51, 0.4);
  --shadow-accent: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 14px 26px -16px rgba(181, 106, 128, 0.38);
  --gold-glow: 0 0 16px rgba(226, 174, 189, 0.32);
  --gold-glow-strong: 0 0 22px 4px rgba(226, 174, 189, 0.38);
  --gold-glow-arc: drop-shadow(0 0 4px rgba(226, 174, 189, 0.55));
  --crimson-glow: 0 0 14px rgba(156, 59, 51, 0.22);
  --text-shadow-photo: 0 1px 2px rgba(255, 250, 250, 0.7), 0 0 14px rgba(255, 250, 250, 0.55);
  --hero-ink: var(--color-text);
  --focus-ring-color: #8A475B;
  --radius-card: 20px;
  --radius-row: 12px;
  --radius-chip: 10px;
  --lumen-glass: rgba(255, 250, 250, 0.86);
  --lumen-glass-border: rgba(181, 106, 128, 0.35);
  --lumen-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 34px -18px rgba(110, 64, 78, 0.38);
  --lumen-hairline: rgba(181, 106, 128, 0.55);
  --lumen-rim: #E2AEBD;
  --lumen-rim-deep: #B56A80;
  --lumen-track: rgba(181, 106, 128, 0.24);
  --lumen-ring-glow: 0 0 0 1px rgba(255, 250, 250, 0.6), 0 10px 26px -12px rgba(110, 64, 78, 0.4), 0 0 26px -6px rgba(226, 174, 189, 0.55);
  --lumen-halo: radial-gradient(circle, transparent 54%, rgba(226, 174, 189, 0) 56%, rgba(226, 174, 189, 0.42) 61%, rgba(226, 174, 189, 0.16) 66%, transparent 72%);
  --lumen-haze: radial-gradient(ellipse 46% 34% at 12% 8%, rgba(255, 250, 250, 0.45), transparent 70%), radial-gradient(ellipse 40% 30% at 88% 6%, rgba(255, 250, 250, 0.35), transparent 70%);
  --lumen-crest-edge: rgba(181, 106, 128, 0.45);
  --lumen-crest-bg: linear-gradient(180deg, #F0DFE3 0%, #E6CDD3 100%);
}
:root[data-style="rose"] { --preview-lumen-bg: #F5ECEC; --preview-lumen-slab: #FFFAFA; --preview-lumen-line: #B56A80; --preview-lumen-accent: #B56A80; --preview-lumen-ink: #3A262D; --preview-lumen-veil: rgba(245, 236, 236, 0.94); }
/* the little cards of the choice (shared/ui/theme-picker.js): each in its style's colours */
.ui-my-theme__style[data-style-option="light"] { --st-bg: #F4F0E8; --st-surface: #FFFDF8; --st-accent: #B98A55; --st-text: #26312F; }
.ui-my-theme__style[data-style-option="beige"] { --st-bg: #E8D9C3; --st-surface: #FAF2E6; --st-accent: #A86E3E; --st-text: #33261C; }
.ui-my-theme__style[data-style-option="classic"] { --st-bg: #F5F4F0; --st-surface: #FFFFFF; --st-accent: #1F3A5F; --st-text: #1B2230; }
.ui-my-theme__style[data-style-option="dark"] { --st-bg: #141518; --st-surface: #1E2024; --st-accent: #CFAE82; --st-text: #EEE9E1; }
.ui-my-theme__style[data-style-option="midnight"] { --st-bg: #0D1322; --st-surface: #161E31; --st-accent: #7FA8F0; --st-text: #E8EDF7; }
.ui-my-theme__style[data-style-option="rose"] { --st-bg: #F5ECEC; --st-surface: #FFFAFA; --st-accent: #B56A80; --st-text: #3A262D; }
/* end of «Моя тема» styles */