/* Grand Mumtoz — kirish moduli / модуль входа для телефонных приложений (maid · laundry · reception · cook)
   Zarhal — the director's design language, self-contained: tokens are inlined and scoped to #gm-auth / #gm-splash /
   #gm-toast, so the host's own variables never leak in and the module never leaks out. Dark by default, light via
   prefers-color-scheme or html/body[data-theme="light"] (data-theme="dark" wins over the OS setting).
   Motion: transform / opacity / stroke-dashoffset only; prefers-reduced-motion and html[data-motion="reduced"] honoured.
   Fonts: ./fonts/*.woff2 relative to this file (each app folder carries the 4 files; system fallbacks otherwise).
   DOM the JS relies on (unchanged ids): #gm-splash #gm-splash-sub #gm-splash-motiv · #gm-auth(.on) #gm-card
   #gm-digits(i.on/.cur, .err) #gm-kb #gm-toReg #gm-regStep #gm-rName #gm-rPhone #gm-seg[data-d] #gm-rBack #gm-rNext #gm-rCancel */

/* ============================================================ 0. fonts */
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("./fonts/manrope-400.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("./fonts/manrope-500.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("./fonts/manrope-700.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("./fonts/cormorant-600.woff2") format("woff2"); }
@font-face { font-family: "Manrope Fallback"; src: local("Roboto"), local("Segoe UI"), local("Helvetica Neue"); size-adjust: 97%; ascent-override: 96%; descent-override: 26%; }
@font-face { font-family: "Cormorant Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 92%; }

/* ============================================================ 1. tokens (copied from pwa-director/css/tokens.css) — dark */
#gm-auth, #gm-splash, #gm-toast {
  color-scheme: dark;
  --bg-0: #0E0C0A; --bg-1: #17130F; --bg-2: #1F1A15; --bg-3: #282219; --bg-4: #31291F;
  --line: rgba(255, 232, 196, .10); --line-strong: rgba(255, 232, 196, .18); --line-gold: rgba(201, 164, 92, .45);
  --text-1: #F5EBDD; --text-2: #B9AB93; --text-3: #948672; --text-inverse: #1A1409;
  --accent: #C9A45C; --accent-strong: #E4C68A; --accent-fill: #C9A45C; --accent-fill-hover: #D6B26A; --accent-fill-active: #B08F4E;
  --accent-ink: #1A1409; --accent-soft: rgba(201, 164, 92, .14); --accent-line: rgba(201, 164, 92, .45);
  --success: #6FBF9E; --success-soft: rgba(111, 191, 158, .14); --warning: #E0A33F; --warning-soft: rgba(224, 163, 63, .14);
  --danger: #E4645E; --danger-soft: rgba(228, 100, 94, .14); --info: #6E9BE0; --info-soft: rgba(110, 155, 224, .14);
  --dept-reception: #6E9BE0; --dept-maid: #B592E0; --dept-laundry: #5EC2CF; --dept-cook: #E39A4E;
  --shadow-1: 0 1px 0 rgba(255, 232, 196, .06) inset;
  --shadow-2: 0 10px 30px -12px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 232, 196, .08) inset;
  --shadow-3: 0 24px 60px -20px rgba(0, 0, 0, .80), 0 1px 0 rgba(255, 232, 196, .12) inset;
  --focus-ring: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--accent);
  --lamp-warm: #F3D9A4; --bead-glow: rgba(201, 164, 92, .35);
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px;
  --font-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, "Times New Roman", serif;
  --font-ui: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --t-micro: 100ms; --t-short: 160ms; --t-med: 240ms; --t-long: 320ms; --t-grand: 560ms;
  --e-velvet: cubic-bezier(.22, .61, .21, 1); --e-enter: cubic-bezier(0, .55, .2, 1); --e-exit: cubic-bezier(.4, 0, 1, 1);
  --e-inout: cubic-bezier(.65, 0, .35, 1); --e-spring: cubic-bezier(.34, 1.3, .64, 1);
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --glow-op: .22;
}
/* light (the director's light tokens): OS preference unless the host pinned dark; or an explicit data-theme="light" */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:not([data-theme="dark"]) #gm-auth,
  :root:not([data-theme="dark"]) body:not([data-theme="dark"]) #gm-splash,
  :root:not([data-theme="dark"]) body:not([data-theme="dark"]) #gm-toast {
    color-scheme: light;
    --bg-0: #F1EBE0; --bg-1: #FAF6EF; --bg-2: #FFFFFF; --bg-3: #F3EDE2; --bg-4: #EAE2D4;
    --line: rgba(58, 40, 18, .11); --line-strong: rgba(58, 40, 18, .20); --line-gold: rgba(168, 132, 60, .55);
    --text-1: #1F1810; --text-2: #5C5041; --text-3: #77695A; --text-inverse: #F5EBDD;
    --accent: #7C6128; --accent-strong: #A8843C; --accent-fill: #A8843C; --accent-fill-hover: #96752F; --accent-fill-active: #7C6128;
    --accent-ink: #1A1409; --accent-soft: rgba(168, 132, 60, .12); --accent-line: rgba(168, 132, 60, .55);
    --success: #237A5B; --success-soft: rgba(35, 122, 91, .12); --warning: #9A5A0A; --warning-soft: rgba(178, 106, 14, .12);
    --danger: #B8332E; --danger-soft: rgba(184, 51, 46, .12); --info: #2C5FB0; --info-soft: rgba(44, 95, 176, .10);
    --dept-reception: #2C5FB0; --dept-maid: #6A46A8; --dept-laundry: #1A6F7C; --dept-cook: #A0560F;
    --shadow-1: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(58, 40, 18, .06);
    --shadow-2: 0 8px 24px -10px rgba(58, 40, 18, .18), 0 1px 0 rgba(255, 255, 255, .9) inset;
    --shadow-3: 0 24px 60px -20px rgba(58, 40, 18, .30);
    --lamp-warm: #FFEFD0; --bead-glow: rgba(168, 132, 60, .30); --glow-op: .45;
  }
}
[data-theme="light"] #gm-auth, [data-theme="light"] #gm-splash, [data-theme="light"] #gm-toast {
  color-scheme: light;
  --bg-0: #F1EBE0; --bg-1: #FAF6EF; --bg-2: #FFFFFF; --bg-3: #F3EDE2; --bg-4: #EAE2D4;
  --line: rgba(58, 40, 18, .11); --line-strong: rgba(58, 40, 18, .20); --line-gold: rgba(168, 132, 60, .55);
  --text-1: #1F1810; --text-2: #5C5041; --text-3: #77695A; --text-inverse: #F5EBDD;
  --accent: #7C6128; --accent-strong: #A8843C; --accent-fill: #A8843C; --accent-fill-hover: #96752F; --accent-fill-active: #7C6128;
  --accent-ink: #1A1409; --accent-soft: rgba(168, 132, 60, .12); --accent-line: rgba(168, 132, 60, .55);
  --success: #237A5B; --success-soft: rgba(35, 122, 91, .12); --warning: #9A5A0A; --warning-soft: rgba(178, 106, 14, .12);
  --danger: #B8332E; --danger-soft: rgba(184, 51, 46, .12); --info: #2C5FB0; --info-soft: rgba(44, 95, 176, .10);
  --dept-reception: #2C5FB0; --dept-maid: #6A46A8; --dept-laundry: #1A6F7C; --dept-cook: #A0560F;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 1px 2px rgba(58, 40, 18, .06);
  --shadow-2: 0 8px 24px -10px rgba(58, 40, 18, .18), 0 1px 0 rgba(255, 255, 255, .9) inset;
  --shadow-3: 0 24px 60px -20px rgba(58, 40, 18, .30);
  --lamp-warm: #FFEFD0; --bead-glow: rgba(168, 132, 60, .30); --glow-op: .45;
}
@media (prefers-reduced-motion: reduce) { #gm-auth, #gm-splash, #gm-toast { --t-micro: 1ms; --t-short: 120ms; --t-med: 1ms; --t-long: 120ms; --t-grand: 1ms; } }
html[data-motion="reduced"] #gm-auth, html[data-motion="reduced"] #gm-splash, html[data-motion="reduced"] #gm-toast { --t-micro: 1ms; --t-short: 120ms; --t-med: 1ms; --t-long: 120ms; --t-grand: 1ms; }

/* ============================================================ 2. base inside the module (reset that does not depend on the host) */
#gm-auth, #gm-splash, #gm-toast { font: 400 14px/20px var(--font-ui); color: var(--text-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
#gm-auth *, #gm-auth *::before, #gm-auth *::after, #gm-splash *, #gm-splash *::before, #gm-splash *::after { box-sizing: border-box; }
#gm-auth h1, #gm-auth h2, #gm-auth p, #gm-splash h1, #gm-splash p { margin: 0; }
:where(#gm-auth) button, :where(#gm-auth) input { font: inherit; color: inherit; }
:where(#gm-auth) button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: var(--r-sm); box-shadow: none; }
:where(#gm-auth) button:disabled { cursor: default; }
#gm-auth a { color: var(--accent); text-decoration: none; }
#gm-auth :focus { outline: none; }
#gm-auth :focus-visible { box-shadow: var(--focus-ring); }
#gm-auth [hidden] { display: none !important; }
#gm-auth ::selection { background: var(--accent-soft); }
#gm-auth svg { max-width: 100%; }
/* module controls own every box property — a host's generic button/label/input rules cannot leak in */
.gm-key, .gm-btn, .gm-link, .gm-toggle, .gm-dept, .gm-seg__opt, .gm-login__lamp { flex: 0 1 auto; width: auto; min-height: 0; padding: 0; margin: 0; border: 0; background: none; box-shadow: none; font-weight: 500; line-height: normal; letter-spacing: normal; text-transform: none; box-sizing: border-box; }
.gm-field label, .gm-toggle-row { display: block; margin: 0; padding: 0; font-size: 13px; }
.gm-i { display: inline-block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex-shrink: 0; }
.gm-i--16 { width: 16px; height: 16px; } .gm-i--24 { width: 24px; height: 24px; } .gm-i--32 { width: 32px; height: 32px; }

/* typography (director §1.3) */
.gm-wordmark { font: 600 32px/36px var(--font-display); color: var(--text-1); letter-spacing: .01em; text-wrap: balance; }
.gm-overline { font: 700 11px/14px var(--font-ui); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); text-align: center; }
.gm-title { font: 700 16px/22px var(--font-ui); color: var(--text-1); text-wrap: balance; }
.gm-caption { font: 500 12px/16px var(--font-ui); color: var(--text-2); }
.gm-text-2 { color: var(--text-2); } .gm-text-3 { color: var(--text-3); }
.gm-muted { color: var(--text-3); font: 500 12px/16px var(--font-ui); font-variant-numeric: tabular-nums; margin-left: 6px; }

/* ============================================================ 3. splash (3 s, spinning icon + motivational phrase) */
#gm-splash { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: 24px; background: var(--bg-0); transition: opacity 420ms var(--e-exit), transform 420ms var(--e-exit); }
#gm-splash::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--glow-op);
  background: radial-gradient(ellipse 50% 40% at 50% 28%, var(--lamp-warm), transparent 70%); }
#gm-splash.out { opacity: 0; transform: scale(1.04); pointer-events: none; }
#gm-splash > * { position: relative; }
#gm-splash .logo { width: 104px; height: 104px; border-radius: var(--r-xl); display: grid; place-items: center; font-size: 50px; line-height: 1; margin-bottom: 20px;
  background: var(--bg-2); border: 1px solid var(--line-gold); box-shadow: var(--shadow-2), 0 0 28px 4px var(--bead-glow);
  animation: gmPop 700ms cubic-bezier(.2, .9, .3, 1.2) both, gmSpinY 3s 700ms linear infinite; }
#gm-splash h1 { font: 600 36px/40px var(--font-display); letter-spacing: .01em; animation: gmUp 600ms 250ms var(--e-enter) both; }
#gm-splash .hello { font: 700 20px/26px var(--font-ui); color: var(--accent-strong); margin-top: 8px; animation: gmUp 500ms var(--e-enter) both; }
#gm-splash p { margin-top: 6px; font: 700 11px/14px var(--font-ui); text-transform: uppercase; letter-spacing: .12em; color: var(--accent); animation: gmUp 600ms 450ms var(--e-enter) both; }
#gm-splash .motiv { margin: 22px 0 0; max-width: 340px; font: 400 17px/1.4 var(--font-ui); color: var(--text-1); animation: gmUp 600ms 900ms var(--e-enter) both; }
#gm-splash .motiv:empty { display: none; }
#gm-splash .line { width: 72px; height: 2px; border-radius: 1px; margin-top: 28px; background: var(--line-strong); overflow: hidden; animation: gmUp 500ms 600ms var(--e-enter) both; }
#gm-splash .line i { display: block; height: 100%; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; animation: gmLoad 2.4s 600ms ease-out forwards; }
@keyframes gmLoad { to { transform: scaleX(1); } }
@keyframes gmSpinY { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
@keyframes gmPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.06); } 100% { transform: scale(1); opacity: 1; } }
@keyframes gmUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================ 4. login shell (director login.css, phone layout) */
#gm-auth { display: none; position: fixed; inset: 0; z-index: 99; overflow: hidden auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  flex-direction: column; align-items: center; padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b)); background: var(--bg-0); }
#gm-auth.on { display: flex; }
body.gm-authing { overflow: hidden; }
.gm-login__ornament { position: absolute; top: 4px; left: 50%; width: 260px; height: 260px; transform: translateX(-50%); fill: none; stroke: var(--accent); stroke-width: .8; opacity: .07; pointer-events: none; }
.gm-login__ornament g path, .gm-login__ornament g circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: gmDraw 1.2s var(--e-velvet) forwards; }
.gm-login__glow { position: absolute; top: 60px; left: 50%; width: 520px; height: 420px; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 420ms ease-out;
  background: radial-gradient(ellipse 50% 45% at 50% 22%, var(--lamp-warm), transparent 70%); }
#gm-auth.is-lit .gm-login__glow { opacity: var(--glow-op); }
#gm-auth.is-instant .gm-login__glow, #gm-auth.is-instant .gm-login__card { transition: none; }

/* hero: lamp + brand */
.gm-login__hero { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 420px; flex-shrink: 0; }
.gm-login__lamp { position: relative; display: block; background: none; border: 0; padding: 0; box-shadow: none; width: 88px; height: 110px; border-radius: var(--r-md); -webkit-tap-highlight-color: transparent; }
.gm-lamp { display: block; width: 100%; height: 100%; overflow: visible; }
.gm-lamp__base, .gm-lamp__stem { fill: var(--accent); }
.gm-lamp__base { opacity: .9; }
.gm-lamp__shade { fill: var(--bg-3); stroke: var(--accent); stroke-width: 1.5; stroke-linejoin: round; transition: fill 420ms ease-out; }
.gm-lamp__rim { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.gm-lamp__bulb { fill: var(--lamp-warm); opacity: 0; transition: opacity 420ms ease-out; }
.gm-lamp__cord { transform-origin: 128px 90px; animation: gmCordSwing 6s ease-in-out infinite; transition: transform 180ms var(--e-velvet); cursor: grab; }
.gm-lamp__cord line { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
.gm-lamp__cordbead { fill: var(--accent-strong); }
.gm-lamp__cord.is-pull { animation: gmCordPull 180ms var(--e-velvet); }
.gm-lamp__cord.is-dragging { animation: none; transition: none; cursor: grabbing; }
#gm-auth.is-lit .gm-lamp__shade { fill: var(--lamp-warm); }
#gm-auth.is-lit .gm-lamp__bulb { opacity: 1; }
#gm-auth.is-lit .gm-lamp__cord { animation: none; }
@keyframes gmCordSwing { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(2.5deg); } }
@keyframes gmCordPull { 0% { transform: translateY(0); } 55% { transform: translateY(14px); } 100% { transform: translateY(0); } }
@keyframes gmDraw { to { stroke-dashoffset: 0; } }
.gm-login__brand { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }

/* card */
.gm-login__side { position: relative; z-index: 1; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 10px; }
.gm-card { position: relative; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-1); padding: 12px 14px; }
.gm-login__card { padding: 16px 16px 12px; border-radius: var(--r-lg); border-top-color: var(--line-gold); opacity: .6; transition: opacity 420ms ease-out, transform 160ms var(--e-exit); }
#gm-auth.is-lit .gm-login__card { opacity: 1; }
.gm-login__card.is-leaving { opacity: 0 !important; transform: scale(.98); }
.gm-login__card h2 { font: 700 16px/22px var(--font-ui); color: var(--text-1); display: flex; align-items: baseline; }
.gm-login__card .sub { margin: 4px 0 10px; font: 400 13px/18px var(--font-ui); color: var(--text-2); }
.gm-login__msg { min-height: 20px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; font: 500 13px/18px var(--font-ui); color: var(--text-2); margin: 0 0 8px; }
.gm-login__msg.tone--danger { color: var(--danger); }
.gm-login__msg.tone--success { color: var(--success); }

/* 6 code cells (director .code-input + login__boxes) — #gm-digits keeps the <i> children with .on / .cur / .err */
.gm-code { position: relative; display: flex; gap: 8px; justify-content: center; padding: 4px 0 8px; }
.gm-code i { width: 44px; height: 52px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg-2); display: grid; place-items: center; position: relative;
  font: 700 24px/1 var(--font-ui); font-style: normal; font-variant-numeric: tabular-nums; color: var(--text-1);
  transition: border-color var(--t-short), box-shadow var(--t-short), transform 240ms var(--e-velvet), opacity 200ms; }
.gm-code i.on { color: var(--text-1); border-color: var(--line-strong); }
.gm-code i.cur { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 14px var(--bead-glow); }
.gm-code i.cur:empty::after { content: ''; width: 2px; height: 26px; background: var(--accent); animation: gmCaret 1s steps(2, start) infinite; }
.gm-code.err i { border-bottom: 2px solid var(--danger); }
.gm-code.err { animation: gmShake 240ms var(--e-velvet); }
.gm-code.is-verifying i { transform: scale(.92); }
.gm-code.is-verifying .gm-login__line path { opacity: .9; animation: gmLine 500ms var(--e-velvet) forwards; }
.gm-code.is-locked { pointer-events: none; }
.gm-code__real { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; font-size: 16px; caret-color: transparent; color: transparent; background: transparent; border: 0; }
.gm-login__line { position: absolute; left: 6px; right: 6px; top: 50%; height: 4px; width: calc(100% - 12px); transform: translateY(-4px); pointer-events: none; }
.gm-login__line path { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; }
@keyframes gmLine { to { stroke-dashoffset: 0; } }
@keyframes gmShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes gmCaret { 50% { opacity: 0; } }
@media (max-width: 359px) { .gm-code { flex-wrap: wrap; max-width: 160px; margin: 0 auto; } .gm-login__line { display: none; } }

/* other code: one masked field instead of the cells */
.gm-login__other { display: flex; flex-direction: column; gap: 6px; padding: 6px 0 10px; }
.gm-input { width: 100%; height: 44px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-1); font: 400 16px/22px var(--font-ui); transition: border-color var(--t-short); -webkit-appearance: none; appearance: none; }
.gm-input::placeholder { color: var(--text-3); }
.gm-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gm-input--code { text-align: center; letter-spacing: .3em; font-weight: 700; height: 52px; }

/* keypad (#gm-kb): 1-9 · ⌫ · 0 · OK */
.gm-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 260px; margin: 2px auto 0; }
.gm-key { height: 46px; width: auto; padding: 0; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-3); color: var(--text-1); font: 700 20px/46px var(--font-ui); font-variant-numeric: tabular-nums; text-align: center; display: inline-grid; place-items: center; transition: transform var(--t-micro), background-color var(--t-micro); user-select: none; -webkit-user-select: none; }
.gm-key:active { transform: scale(.96); background: var(--bg-4); }
.gm-key--back { color: var(--text-2); }
.gm-key--ok { color: var(--accent); font-size: 14px; letter-spacing: .08em; }
.gm-keypad.is-disabled { opacity: .5; pointer-events: none; }

/* buttons (director .btn) */
.gm-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--r-sm); border: 1px solid transparent; font: 700 14px/20px var(--font-ui); white-space: nowrap; user-select: none; -webkit-user-select: none;
  transition: transform var(--t-micro), background-color var(--t-short), border-color var(--t-short), color var(--t-short); }
.gm-btn:active:not(:disabled) { transform: scale(.97); }
.gm-btn:disabled { opacity: .5; }
.gm-btn--primary { background: var(--accent-fill); color: var(--accent-ink); }
.gm-btn--primary:active:not(:disabled) { background: var(--accent-fill-active); }
.gm-btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--text-1); }
.gm-btn--52 { height: 52px; font-size: 15px; }
.gm-btn--block { display: flex; width: 100%; }
.gm-btn.is-loading { pointer-events: none; }
.gm-btn.is-loading .gm-btn__label { visibility: hidden; }
.gm-btn.is-loading .gm-spinner { position: absolute; }
.gm-spinner, #gm-auth .spin { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: currentColor; animation: gmSpin 800ms linear infinite; }
.gm-btn--primary .gm-spinner, .gm-btn--primary .spin { border-color: var(--accent-soft); border-top-color: var(--accent-ink); }
@keyframes gmSpin { to { transform: rotate(360deg); } }
.gm-link { font: 500 13px/18px var(--font-ui); color: var(--accent); min-height: 32px; padding: 0 8px; display: inline-flex; align-items: center; cursor: pointer; background: none; border: 0; }
.gm-login__links { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.gm-login__links .gm-link { padding: 0 4px; }
.gm-login__links--center { justify-content: center; margin-top: 0; }
.gm-login__actions { display: flex; gap: 8px; margin-top: 16px; }
.gm-login__actions .gm-btn { flex: 1 1 0; }
.gm-login__actions .gm-btn--primary { flex: 1.4 1 0; }

/* remember toggle (director .toggle + .toggle-row) */
.gm-toggle-row { display: flex !important; align-items: center; gap: 12px; min-height: 40px; margin-top: 2px; cursor: pointer; user-select: none; -webkit-user-select: none; }
.gm-toggle-row__label { flex: 1; min-width: 0; font: 500 13px/18px var(--font-ui); color: var(--text-2); }
.gm-toggle { position: relative; width: 44px; height: 26px; flex: 0 0 44px; padding: 0; border-radius: 13px; background: var(--bg-4); border: 1px solid var(--line-strong); transition: background-color var(--t-micro), border-color var(--t-micro); }
.gm-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--text-2); transition: transform var(--t-micro), background-color var(--t-micro); }
.gm-toggle[aria-checked="true"] { background: var(--accent-fill); border-color: var(--accent-fill); }
.gm-toggle[aria-checked="true"]::after { transform: translateX(18px); background: var(--accent-ink); }

/* success (code accepted) */
.gm-login__success { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; }
.gm-login__check { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--text-inverse); background: var(--success); transform: scale(0); animation: gmCheck 320ms cubic-bezier(.2, .9, .2, 1.2) forwards; }
.gm-login__check .gm-i { width: 32px; height: 32px; stroke-width: 2; }
.gm-login__success h2 { justify-content: center; }
.gm-login__success .sub { margin: 0; }
@keyframes gmCheck { to { transform: scale(1); } }

/* registration: fields + department picker (#gm-seg buttons keep data-d + .on) */
.gm-field { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.gm-field label { font: 500 12px/16px var(--font-ui); color: var(--text-2); }
.gm-field input { width: 100%; height: 48px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-1); font: 400 16px/22px var(--font-ui); transition: border-color var(--t-short); -webkit-appearance: none; appearance: none; }
.gm-field input::placeholder { color: var(--text-3); }
.gm-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.gm-depts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gm-dept { --dept: var(--text-3); position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--text-1); font: 500 13px/18px var(--font-ui); text-align: left;
  transition: transform var(--t-micro), border-color var(--t-short), background-color var(--t-short); }
.gm-dept::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 2px 2px 0; background: var(--dept); opacity: .9; }
.gm-dept:active { transform: scale(.97); }
.gm-dept__well { width: 32px; height: 32px; border-radius: var(--r-xs); display: grid; place-items: center; background: var(--bg-3); color: var(--text-2); flex-shrink: 0; transition: color var(--t-short), background-color var(--t-short); }
.gm-dept.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text-1); box-shadow: 0 0 0 2px var(--accent-soft); }
.gm-dept.on .gm-dept__well { color: var(--accent); background: var(--bg-2); }
.gm-dept.on span { font-weight: 700; }
.gm-dept[data-d="maid"] { --dept: var(--dept-maid); } .gm-dept[data-d="laundry"] { --dept: var(--dept-laundry); }
.gm-dept[data-d="reception"] { --dept: var(--dept-reception); } .gm-dept[data-d="cook"] { --dept: var(--dept-cook); }
.gm-regstep { animation: gmStepIn 240ms var(--e-enter) both; }
.gm-regstep.back { animation-name: gmStepBack; }
@keyframes gmStepIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes gmStepBack { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }

/* waiting for the director's approval: brass pulse rings around the envelope */
.gm-wait { text-align: center; padding: 12px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gm-wait h2 { justify-content: center; }
.gm-wait .sub { margin: 0 0 6px; }
.gm-pulse { position: relative; width: 72px; height: 72px; margin: 6px auto 10px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--bg-3); border: 1px solid var(--line-gold); }
.gm-pulse span { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--accent); animation: gmPulseRing 2400ms var(--e-velvet) infinite; }
.gm-pulse span:nth-child(2) { animation-delay: 800ms; } .gm-pulse span:nth-child(3) { animation-delay: 1600ms; }
@keyframes gmPulseRing { from { transform: scale(1); opacity: .6; } to { transform: scale(2.2); opacity: 0; } }

/* callout (403 / notes) */
.gm-callout { padding: 10px 12px; border-radius: var(--r-sm); font: 500 13px/18px var(--font-ui); margin-bottom: 12px; }
.gm-callout--danger { background: var(--danger-soft); color: var(--danger); }
.gm-callout--warning { background: var(--warning-soft); color: var(--warning); }

/* foot: RU | UZ segmented pill (director .seg--sm with the springy thumb) + version line */
.gm-login__foot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gm-seg { position: relative; display: inline-flex; align-items: stretch; padding: 3px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-2); user-select: none; -webkit-user-select: none; max-width: 100%; }
.gm-seg__thumb { position: absolute; top: 3px; left: 3px; height: calc(100% - 6px); border-radius: 6px; background: var(--bg-3); border: 1px solid var(--line-strong); opacity: 0;
  transition: transform 320ms cubic-bezier(.34, 1.2, .64, 1), width 320ms cubic-bezier(.34, 1.2, .64, 1), opacity var(--t-short); will-change: transform; }
.gm-seg__opt { position: relative; z-index: 1; flex: 1 1 auto; height: 28px; padding: 0 12px; border-radius: 6px; font: 500 12px/28px var(--font-ui); color: var(--text-2); white-space: nowrap; text-align: center; transition: color var(--t-short); display: inline-flex; align-items: center; justify-content: center; }
.gm-seg__opt.is-active { color: var(--accent); font-weight: 700; }

/* built-in toast (used only when the host passes no `toast` option) */
#gm-toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); z-index: 120; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; max-width: min(92vw, 420px);
  padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: var(--shadow-3); font: 500 13px/18px var(--font-ui); color: var(--text-1); text-align: center;
  transition: transform 200ms var(--e-enter), opacity 200ms var(--e-enter); }
#gm-toast.on { transform: translate(-50%, 0); opacity: 1; }

/* short phones: tighten the hero so the keypad stays on screen */
@media (max-height: 760px) {
  #gm-auth { padding-top: calc(8px + var(--safe-t)); }
  .gm-login__lamp { width: 76px; height: 95px; }
  .gm-wordmark { font-size: 28px; line-height: 32px; }
  .gm-login__side { margin-top: 6px; gap: 8px; }
  .gm-login__card { padding: 12px 14px 10px; }
  .gm-login__card .sub { margin-bottom: 6px; }
  .gm-key { height: 42px; line-height: 42px; }
}
@media (max-height: 640px) { .gm-login__ornament { display: none; } .gm-login__card .sub { display: none; } .gm-toggle-row { min-height: 40px; } }

/* ============================================================ 5. reduced motion: lamp starts lit, no swing / glow transition / shake / draw-in */
@media (prefers-reduced-motion: reduce) {
  .gm-lamp__cord, .gm-login__ornament g * { animation: none; }
  .gm-login__ornament g path, .gm-login__ornament g circle { stroke-dashoffset: 0; }
  .gm-login__glow, .gm-login__card, .gm-lamp__shade, .gm-lamp__bulb, .gm-code i { transition: none; }
  .gm-code.is-verifying i { transform: none; }
  .gm-code.is-verifying .gm-login__line path { animation: none; stroke-dashoffset: 0; }
  .gm-code.err { animation: none; }
  .gm-login__check { animation: none; transform: scale(1); }
  .gm-regstep { animation: none; }
  .gm-pulse span { animation: none; transform: scale(1.6); opacity: .4; }
  .gm-seg__thumb { transition: opacity var(--t-short); }
  #gm-splash .logo { animation: gmPop 1ms both; }
  #gm-splash h1, #gm-splash p, #gm-splash .hello, #gm-splash .motiv, #gm-splash .line { animation: none; }
  #gm-splash { transition: opacity 120ms; }
  #gm-splash.out { transform: none; }
  #gm-toast { transition: opacity 120ms; }
}
html[data-motion="reduced"] .gm-lamp__cord, html[data-motion="reduced"] .gm-login__ornament g * { animation: none; }
html[data-motion="reduced"] .gm-login__ornament g path, html[data-motion="reduced"] .gm-login__ornament g circle { stroke-dashoffset: 0; }
html[data-motion="reduced"] .gm-login__glow, html[data-motion="reduced"] .gm-login__card, html[data-motion="reduced"] .gm-lamp__shade, html[data-motion="reduced"] .gm-lamp__bulb, html[data-motion="reduced"] .gm-code i { transition: none; }
html[data-motion="reduced"] .gm-code.is-verifying i { transform: none; }
html[data-motion="reduced"] .gm-code.is-verifying .gm-login__line path { animation: none; stroke-dashoffset: 0; }
html[data-motion="reduced"] .gm-code.err, html[data-motion="reduced"] .gm-regstep { animation: none; }
html[data-motion="reduced"] .gm-login__check { animation: none; transform: scale(1); }
html[data-motion="reduced"] .gm-pulse span { animation: none; transform: scale(1.6); opacity: .4; }
html[data-motion="reduced"] .gm-seg__thumb { transition: opacity var(--t-short); }
html[data-motion="reduced"] #gm-splash .logo { animation: gmPop 1ms both; }
html[data-motion="reduced"] #gm-splash h1, html[data-motion="reduced"] #gm-splash p, html[data-motion="reduced"] #gm-splash .hello, html[data-motion="reduced"] #gm-splash .motiv, html[data-motion="reduced"] #gm-splash .line { animation: none; }