:root {
  color-scheme: light;
  --page:#edf0f3;
  --surface:#ffffff;
  --surface-soft:#f5f6f8;
  --text:#16191d;
  --muted:#707984;
  --line:#dde1e6;
  --green:#538d4e;
  --green-bright:#63aa5d;
  --green-soft:#e8f2e7;
  --gold:#b59f3b;
  --gold-soft:#f6f0d9;
  --blue:#477a96;
  --blue-soft:#e6f0f4;
  --shadow:0 18px 48px rgba(24,31,38,.10);
}

body.dark {
  color-scheme: dark;
  --page:#090b0d;
  --surface:#14171a;
  --surface-soft:#1b1f23;
  --text:#f6f7f8;
  --muted:#919aa4;
  --line:#2a2f34;
  --green-soft:#1e3021;
  --gold-soft:#332f1d;
  --blue-soft:#1b2d35;
  --shadow:0 22px 58px rgba(0,0,0,.42);
}

* { box-sizing:border-box; }
html { min-height:100%; background:var(--page); }
body {
  margin:0;
  min-height:100vh;
  background:var(--page);
  color:var(--text);
  font-family:'Almarai',sans-serif;
  letter-spacing:0;
  transition:background-color .2s,color .2s;
}
button,a { font:inherit; -webkit-tap-highlight-color:transparent; }
button { color:inherit; }

[hidden] { display:none !important; }

.gate {
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}
.gate-panel {
  width:min(100%,390px);
  background:#050608;
  color:#f6f7f8;
  border:1px solid #24282c;
  border-radius:8px;
  box-shadow:var(--shadow);
  padding:30px 24px;
  text-align:center;
}
.gate-logo {
  display:block;
  width:min(270px,78vw);
  height:84px;
  object-fit:contain;
  margin:0 auto 22px;
}
.gate-status { display:flex;align-items:center;justify-content:center;gap:10px;color:#919aa4;font-size:.86rem;font-weight:700; }
.spinner { width:18px;height:18px;border:2px solid #2a2f34;border-top-color:var(--green);border-radius:50%;animation:spin .75s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.gate-state { display:flex;flex-direction:column;align-items:center; }
.gate-icon { width:46px;height:46px;display:grid;place-items:center;background:var(--green-soft);color:var(--green);border-radius:8px;margin-bottom:14px; }
.gate-icon.denied { background:#3a2022;color:#e06c75; }
.gate-state h1 { margin:0 0 8px;font-size:1.2rem; }
.gate-state p { margin:0 0 20px;color:#919aa4;font-size:.82rem;line-height:1.7; }
.primary-button,.secondary-button { width:100%;min-height:48px;border-radius:8px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px; }
.primary-button { color:#fff;background:var(--green);border:1px solid var(--green); }
.secondary-button { color:#f6f7f8;background:#1b1f23;border:1px solid #2a2f34; }
.gate-error { color:#e06c75;font-size:.78rem;font-weight:700;margin:16px 0 0;line-height:1.6; }

.app-shell {
  width:min(100%,980px);
  min-height:100vh;
  margin:0 auto;
  padding:22px clamp(16px,4vw,34px) 24px;
}
.topbar { min-height:62px;display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding-bottom:16px; }
.brand { display:flex;align-items:center;gap:9px;pointer-events:none;min-width:0;text-decoration:none;color:var(--text); }
.brand-word { font-size:clamp(1.45rem,3.2vw,1.85rem);font-weight:800;line-height:1;white-space:nowrap; }
.brand-grid { width:31px;height:31px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;flex:0 0 auto; }
.brand-grid i { display:block;border-radius:2px;background:#3a3d40;border:1px solid #505458; }
.brand-grid i.green { background:#53ba67;border-color:#53ba67; }
.brand-grid i.gold { background:#cbb03f;border-color:#cbb03f; }
.header-actions { display:flex;align-items:center;gap:8px; }
.private-badge { height:38px;display:flex;align-items:center;gap:7px;padding:0 12px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:.72rem;font-weight:800;background:var(--surface); }
.private-badge i { color:var(--green);font-size:.68rem; }
.icon-button { width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer; }
.icon-button:hover { border-color:var(--green); }

.welcome { padding:38px 0 26px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px; }
.welcome-copy { min-width:0; }
.welcome .eyebrow { margin:0 0 8px;color:var(--green-bright);font-weight:800;font-size:.76rem; }
.welcome h1 { margin:0;font-size:clamp(1.75rem,4vw,2.6rem);line-height:1.25;font-weight:800; }
.welcome-copy > p:last-child { margin:10px 0 0;color:var(--muted);font-size:.88rem;line-height:1.7;font-weight:700; }
.tile-preview { direction:rtl;display:grid;grid-template-columns:repeat(5,36px);gap:5px;flex:0 0 auto; }
.tile-preview span { width:36px;height:36px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);border-radius:5px;color:var(--muted);font-size:.86rem;font-weight:800;box-shadow:0 3px 9px rgba(0,0,0,.05); }
.tile-preview .correct { color:#fff;background:var(--green);border-color:var(--green); }
.tile-preview .present { color:#fff;background:var(--gold);border-color:var(--gold); }

.mode-picker { background:transparent; }
.mode-tabs { width:min(100%,420px);display:grid;grid-template-columns:1fr 1fr;background:var(--surface-soft);border:1px solid var(--line);border-radius:8px;padding:5px;gap:5px; }
.mode-tab { min-height:48px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:9px;font-size:.87rem;font-weight:800;cursor:pointer; }
.mode-tab.active { background:var(--surface);color:var(--text);border-color:var(--line);box-shadow:0 2px 8px rgba(0,0,0,.06); }
.mode-tab.active i { color:var(--green); }
.mode-panel { padding:22px 0 0; }
.mode-panel.active { animation:panel-in .18s ease; }
@keyframes panel-in { from { opacity:.3;transform:translateY(4px); } }
.section-heading { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px; }
.section-heading h2 { margin:0;font-size:1rem;font-weight:800; }
.section-heading p { margin:5px 0 0;color:var(--muted);font-size:.72rem;font-weight:700; }
.live-label { color:var(--green-bright);font-size:.7rem;font-weight:800;white-space:nowrap; }
.live-label span { display:inline-block;width:7px;height:7px;background:var(--green-bright);border-radius:50%;margin-left:4px;box-shadow:0 0 0 4px rgba(99,170,93,.13); }
.mode-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.mode-item { position:relative;min-height:94px;display:grid;grid-template-columns:48px minmax(0,1fr) auto 12px;align-items:center;gap:12px;padding:14px 16px;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 22px rgba(24,31,38,.055);overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s; }
.mode-item[type="button"] { width:100%;text-align:right;cursor:pointer;font-family:inherit; }
.mode-item::before { content:"";position:absolute;inset:0 0 0 auto;width:3px;background:var(--green); }
.mode-item:hover { transform:translateY(-2px);border-color:var(--green);box-shadow:0 12px 28px rgba(24,31,38,.10); }
.mode-item.numbers-mode::before { background:var(--gold); }
.mode-item.word500-mode::before { background:var(--blue); }
.mode-item.word500-mode:hover { border-color:var(--blue); }
.mode-icon { width:46px;height:46px;border-radius:7px;display:grid;place-items:center;font-size:1rem;font-weight:800; }
.mode-icon.green { color:#fff;background:var(--green); }
.mode-icon.soft-green { color:var(--green-bright);background:var(--green-soft);font-size:1.15rem; }
.mode-icon.gold { color:var(--gold);background:var(--gold-soft); }
.mode-icon.blue { color:var(--blue);background:var(--blue-soft); }
.mode-icon.slate { color:var(--muted);background:var(--surface);border:1px solid var(--line); }
.mode-icon.letter-tiles { display:grid;grid-template-columns:repeat(3,8px);grid-template-rows:repeat(3,8px);gap:2px;align-content:center;justify-content:center;background:var(--surface);border:1px solid var(--line); }
.letter-tiles i { width:8px;height:8px;border-radius:2px;background:var(--muted);opacity:.45; }
.letter-tiles i.correct { background:var(--green);opacity:1; }
.letter-tiles i.present { background:var(--gold);opacity:1; }
.mode-copy { min-width:0; }
.mode-copy strong,.mode-copy small { display:block; }
.mode-copy strong { font-size:.88rem;font-weight:800;line-height:1.45; }
.mode-copy small { margin-top:5px;color:var(--muted);font-size:.66rem;font-weight:700;line-height:1.5; }
.mode-meta { min-width:42px;text-align:center;color:var(--muted); }
.mode-meta b,.mode-meta small { display:block; }
.mode-meta b { color:var(--text);font-size:.82rem; }
.mode-meta small { margin-top:2px;font-size:.56rem;font-weight:700; }
.item-arrow { color:var(--muted);font-size:.64rem; }
.online-grid .mode-item { grid-template-columns:48px minmax(0,1fr) 12px; }

.preview-footer { display:flex;align-items:center;justify-content:center;gap:10px;padding-top:22px;color:var(--muted);font-size:.62rem;font-weight:800; }
.footer-separator { width:3px;height:3px;border-radius:50%;background:var(--green); }

.choice-overlay { position:fixed;inset:0;z-index:900;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); }
.choice-dialog { position:relative;width:min(100%,380px);padding:32px 24px 24px;background:linear-gradient(145deg,#1e1e20,#0f0f10);color:#f8fafc;border:1px solid rgba(255,255,255,.09);border-top-color:rgba(255,255,255,.15);border-radius:28px;box-shadow:0 30px 70px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.06);text-align:center;animation:choice-in .18s ease; }
@keyframes choice-in { from { opacity:0;transform:translateY(10px) scale(.98); } }
.choice-close { position:absolute;top:14px;right:14px;width:32px;height:32px;display:grid;place-items:center;border-radius:9px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.06);color:rgba(255,255,255,.55);cursor:pointer; }
.choice-close:hover { color:#fff;background:rgba(255,255,255,.11); }
.choice-close:focus { outline:none; }
.choice-close:focus-visible { outline:2px solid var(--green);outline-offset:2px; }
.choice-symbol { width:56px;height:56px;margin:0 auto 14px;border-radius:14px;background:linear-gradient(135deg,#1e1e20,#0a0a0b);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 25px rgba(0,0,0,.45); }
.choice-symbol.letter-tiles { display:grid;grid-template-columns:repeat(3,8px);grid-template-rows:repeat(3,8px);gap:2px;align-content:center;justify-content:center; }
.choice-symbol.letter-tiles i { width:8px;height:8px;border-radius:2px;background:#56595d;opacity:.75; }
.choice-symbol.letter-tiles i.correct { background:var(--green-bright);opacity:1; }
.choice-symbol.letter-tiles i.present { background:#cbb03f;opacity:1; }
.choice-dialog h2 { margin:0;font-size:1.15rem;font-weight:800; }
.choice-dialog > p { margin:7px 0 18px;color:rgba(255,255,255,.48);font-size:.74rem;font-weight:700; }
.letter-options { display:flex;flex-direction:column;gap:9px; }
.letter-option { min-height:70px;display:grid;grid-template-columns:46px minmax(0,1fr) 12px;align-items:center;gap:12px;padding:11px 13px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.045);color:#f8fafc;text-decoration:none;text-align:right;transition:background-color .15s,border-color .15s,transform .15s; }
.letter-option:hover { border-color:var(--green);background:rgba(255,255,255,.075);transform:translateY(-1px); }
.letter-number { width:46px;height:46px;display:grid;place-items:center;border-radius:11px;background:rgba(83,141,78,.2);color:#8bc985;border:1px solid rgba(83,141,78,.28);font-size:1rem;font-weight:800; }
.letter-option.three .letter-number { color:#a1cf9d;background:rgba(83,141,78,.12);border-color:rgba(83,141,78,.18); }
.letter-option strong,.letter-option small { display:block; }
.letter-option strong { font-size:.88rem;font-weight:800; }
.letter-option small { margin-top:4px;color:rgba(255,255,255,.46);font-size:.63rem;font-weight:700;line-height:1.5; }
.letter-option > i { color:rgba(255,255,255,.3);font-size:.62rem; }

body:not(.dark) .choice-overlay { background:rgba(15,23,42,.46); }
body:not(.dark) .choice-dialog { background:linear-gradient(145deg,#fff,#f1f4f7);color:#111827;border-color:rgba(15,23,42,.11);border-top-color:rgba(15,23,42,.16);box-shadow:0 24px 55px rgba(15,23,42,.24),inset 0 1px 0 rgba(255,255,255,.9); }
body:not(.dark) .choice-close { background:rgba(15,23,42,.04);border-color:rgba(15,23,42,.1);color:#64748b; }
body:not(.dark) .choice-close:hover { background:rgba(15,23,42,.09);color:#111827; }
body:not(.dark) .choice-symbol { background:rgba(15,23,42,.045);border-color:rgba(15,23,42,.1);box-shadow:inset 0 2px 8px rgba(15,23,42,.06); }
body:not(.dark) .choice-dialog > p { color:#64748b; }
body:not(.dark) .letter-option { background:rgba(15,23,42,.035);border-color:rgba(15,23,42,.1);color:#111827; }
body:not(.dark) .letter-option:hover { background:rgba(15,23,42,.065);border-color:var(--green); }
body:not(.dark) .letter-option small,body:not(.dark) .letter-option > i { color:#64748b; }

@media (max-width:680px) {
  .app-shell { padding:14px 12px 18px; }
  .topbar { min-height:54px;padding-bottom:12px; }
  .brand-word { font-size:1.48rem; }
  .brand-grid { width:29px;height:29px; }
  .private-badge span { display:none; }
  .private-badge { width:38px;padding:0;justify-content:center; }
  .welcome { padding:26px 4px 20px;display:block; }
  .welcome h1 { font-size:1.6rem; }
  .welcome-copy > p:last-child { font-size:.76rem; }
  .tile-preview { display:none; }
  .mode-tabs { width:100%; }
  .mode-panel { padding:16px 0 0; }
  .mode-grid { grid-template-columns:1fr;gap:8px; }
  .mode-item { min-height:80px;padding:11px 13px;grid-template-columns:44px minmax(0,1fr) auto 10px;gap:10px; }
  .mode-icon { width:42px;height:42px; }
  .online-grid .mode-item { grid-template-columns:44px minmax(0,1fr) 10px; }
}

@media (max-width:350px) {
  .brand { gap:6px; }
  .brand-word { font-size:1.28rem; }
  .brand-grid { width:26px;height:26px; }
  .header-actions { gap:5px; }
  .icon-button,.private-badge { width:35px;height:35px; }
  .welcome h1 { font-size:1.42rem; }
  .mode-copy small { font-size:.61rem; }
  .mode-meta { min-width:34px; }
  .mode-panel { padding-top:13px; }
}

@media (min-width:681px) {
  .app-shell { display:flex;flex-direction:column;justify-content:center; }
  .topbar { margin-top:auto; }
  .preview-footer { margin-bottom:auto; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important;transition:none !important; }
}

/* Keep the preview aligned with the compact card language of the live home page. */
body:has(.app-shell:not([hidden])) {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.app-shell {
  width:min(100%,440px);
  min-height:0;
  margin:auto;
  padding:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:28px;
  box-shadow:var(--shadow);
}
.topbar { min-height:54px;padding-bottom:14px; }
.brand-word { font-size:1.48rem; }
.brand-grid { width:29px;height:29px; }
.private-badge { display:none; }
.welcome { display:block;padding:26px 4px 20px;text-align:center; }
.welcome h1 { font-size:1.55rem; }
.welcome-copy > p:last-child { margin-top:7px;font-size:.75rem; }
.tile-preview { display:none; }
.mode-tabs { width:100%; }
.mode-panel { padding:17px 0 0; }
.section-heading { margin-bottom:13px;padding:0 3px; }
.section-heading h2 { font-size:.94rem; }
.section-heading p { font-size:.67rem; }
.mode-grid { grid-template-columns:1fr;gap:10px; }
.mode-item {
  min-height:82px;
  grid-template-columns:46px minmax(0,1fr) 12px;
  gap:12px;
  padding:12px 14px;
  background:var(--surface-soft);
  border-radius:18px;
  box-shadow:0 2px 10px rgba(0,0,0,.045);
}
.mode-item::before { display:none; }
.mode-item.letters-mode { border-color:color-mix(in srgb,var(--green) 38%,var(--line)); }
.mode-item.numbers-mode { border-color:color-mix(in srgb,var(--gold) 38%,var(--line)); }
.mode-item.word500-mode { border-color:color-mix(in srgb,var(--blue) 38%,var(--line)); }
.mode-icon { width:46px;height:46px;border-radius:14px; }
.mode-copy strong { font-size:.89rem; }
.mode-copy small { font-size:.65rem;line-height:1.65;margin-top:3px; }
.mode-meta { display:none; }
.online-grid .mode-item { grid-template-columns:46px minmax(0,1fr) 12px; }
.preview-footer { padding-top:17px; }

@media (max-width:480px) {
  body:has(.app-shell:not([hidden])) { display:block;padding:0;background:var(--surface); }
  .app-shell { width:100%;min-height:100vh;border:0;border-radius:0;box-shadow:none;padding:14px 16px 18px; }
  .mode-item { min-height:80px;padding:11px 13px; }
}

@media (max-width:350px) {
  .app-shell { padding-inline:12px; }
  .mode-item { grid-template-columns:42px minmax(0,1fr) 10px;gap:9px; }
  .mode-icon { width:42px;height:42px;border-radius:12px; }
  .mode-copy small { font-size:.6rem; }
}

.home-loader {
  position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;
  z-index:2147483000;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#000;isolation:isolate;
}
.home-loader img { width:min(300px,74vw);height:auto;display:block; }
.home-auth-overlay {
  position:fixed;inset:0;z-index:1800;align-items:center;justify-content:center;
  padding:18px;background:rgba(0,0,0,.76);backdrop-filter:blur(12px);
}
.home-auth-dialog {
  width:min(360px,100%);padding:28px 22px 22px;border:1px solid var(--line);
  border-radius:8px;background:#17191e;color:#f8fafc;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.56);
}
.home-auth-dialog h2 { margin:12px 0 6px;font-size:1.15rem;font-weight:900; }
.home-auth-dialog > p:not(.auth-error) { margin:0 0 20px;color:#8d96a3;font-size:.76rem;font-weight:700;line-height:1.7; }
.auth-symbol {
  width:48px;height:48px;margin:auto;display:grid;place-items:center;border-radius:8px;
  color:var(--green);background:var(--green-soft);border:1px solid rgba(83,141,78,.22);
}
.auth-button {
  width:100%;min-height:48px;border-radius:8px;border:1px solid transparent;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font:800 .84rem 'Almarai',sans-serif;cursor:pointer;
}
.auth-button.google { background:#fff;color:#111827; }
.auth-button.guest { background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#f8fafc; }
.auth-button.confirm { margin-top:8px;background:var(--green);color:#fff; }
.auth-divider { display:flex;align-items:center;gap:10px;margin:11px 0;color:#69717c;font-size:.68rem;font-weight:800; }
.auth-divider::before,.auth-divider::after { content:"";height:1px;flex:1;background:rgba(255,255,255,.1); }
.auth-loading {
  width:28px;height:28px;margin:16px auto 0;display:none;border-radius:50%;
  border:3px solid rgba(255,255,255,.12);border-top-color:var(--green);animation:homeSpin .75s linear infinite;
}
@keyframes homeSpin { to { transform:rotate(360deg); } }
.auth-error { display:none;margin:12px 0 0!important;color:#ef6b70!important;font-size:.72rem!important;font-weight:800!important;line-height:1.6!important; }
.username-avatar { width:64px;height:64px;margin:auto;border-radius:50%;object-fit:cover;border:2px solid var(--green); }
.username-input {
  width:100%;height:48px;margin:2px 0 4px;padding:0 13px;border-radius:8px;
  border:1px solid rgba(255,255,255,.12);outline:none;background:rgba(255,255,255,.05);
  color:#fff;text-align:center;font:800 .9rem 'Almarai',sans-serif;user-select:text;
}
.username-input:focus { border-color:var(--green);box-shadow:0 0 0 3px rgba(83,141,78,.16); }
.home-user {
  position:relative;min-width:38px;height:38px;align-items:center;gap:7px;padding:3px 9px 3px 3px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;
}
.home-user > img { width:30px;height:30px;border-radius:6px;object-fit:cover; }
.home-user > span { max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.72rem;font-weight:800; }
.home-user > i { color:var(--muted);font-size:.55rem; }
.home-user-menu {
  position:absolute;top:calc(100% + 8px);left:0;z-index:500;width:210px;display:none;
  overflow:hidden;border:1px solid var(--line);border-radius:8px;background:#191c21;
  box-shadow:0 18px 44px rgba(0,0,0,.46);color:#f8fafc;
}
.home-user-menu.open { display:block; }
.home-user-summary { padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.08);text-align:right; }
.home-user-summary strong,.home-user-summary small { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.home-user-summary strong { font-size:.8rem; }
.home-user-summary small { margin-top:3px;color:#8d96a3;font-size:.62rem; }
.home-user-menu button {
  width:100%;min-height:42px;padding:0 14px;border:0;background:transparent;color:#d8dde5;
  display:flex;align-items:center;gap:10px;text-align:right;font:700 .75rem 'Almarai',sans-serif;cursor:pointer;
}
.home-user-menu button:hover { background:rgba(255,255,255,.06); }
.home-user-menu button.danger { color:#ef6b70; }
.preview-footer a { color:inherit;text-decoration:none; }
body:not(.dark) .home-auth-dialog { background:#fff;color:#111827; }
body:not(.dark) .auth-button.guest { background:#f3f5f7;border-color:#dfe3e8;color:#111827; }
body:not(.dark) .auth-divider::before,body:not(.dark) .auth-divider::after { background:#dfe3e8; }
body:not(.dark) .username-input { background:#f5f7f9;border-color:#d8dde3;color:#111827; }
body:not(.dark) .home-user-menu { background:#fff;color:#111827;box-shadow:0 18px 44px rgba(15,23,42,.18); }
body:not(.dark) .home-user-summary { border-bottom-color:#e6e9ed; }
body:not(.dark) .home-user-menu button { color:#334155; }
body:not(.dark) .home-user-menu button.danger { color:#d9474c; }
@media (max-width:420px) {
  .home-user > span,.home-user > i { display:none; }
  .home-user { width:38px;padding:3px;justify-content:center; }
  .home-auth-dialog { padding:24px 18px 18px; }
}