/* ========================================================================
   HRlume People Workspace

   A deliberate final layer shared by the browser product and the bundled
   Android app. The visual model is an operational workspace: a dark,
   dependable navigation rail; paper-like work surfaces; compact data; and
   one indigo action colour. It intentionally changes no routes or behaviour.
   ======================================================================== */

:root {
  --blue-50: #eef2ff;
  --blue-100: #e0e7ff;
  --blue-400: #818cf8;
  --blue-500: #6366f1;
  --blue-600: #4f46e5;
  --blue-700: #4338ca;
  --blue-800: #3730a3;
  --color-bg: #f5f6f8;
  --color-primary: #4f46e5;
  --color-primary-hover: #4338ca;
  --color-primary-active: #3730a3;
  --color-primary-soft: #eef2ff;
  --color-ring: #4f46e5;
  --content-max: 1400px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .035);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 28px rgba(16, 24, 40, .035);
}

:root[data-theme='dark'] {
  --color-primary: #818cf8;
  --color-primary-hover: #a5b4fc;
  --color-primary-active: #c7d2fe;
  --color-primary-soft: rgba(99, 102, 241, .16);
  --color-ring: #818cf8;
}

body { background: var(--color-bg); }

/* Product navigation. The light appearance comes from polish.css; this final
   layer only deepens the rail when dark mode is active. Keep every override
   theme-scoped so a live theme change cannot leave the sidebar dark. */
:root[data-theme='dark'] .app-sidebar {
  border-right-color: rgba(255, 255, 255, .08);
  color: #d0d5dd;
  background: #101828;
}

:root[data-theme='dark'] .sidebar__brand,
:root[data-theme='dark'] .sidebar__profile,
:root[data-theme='dark'] .sidebar__bottom { border-color: rgba(255, 255, 255, .08); }

:root[data-theme='dark'] .sidebar__brand-full { filter: brightness(0) invert(1); }
:root[data-theme='dark'] .sidebar__brandname,
:root[data-theme='dark'] .sidebar__profile-name { color: #f9fafb; }
:root[data-theme='dark'] .sidebar__powered,
:root[data-theme='dark'] .sidebar__profile-role,
:root[data-theme='dark'] .sidebar__section-label { color: #98a2b3; }

:root[data-theme='dark'] .sidebar__profile:hover,
:root[data-theme='dark'] .sidebar__link:hover,
:root[data-theme='dark'] .sidebar__collapse:hover { background: rgba(255, 255, 255, .06); color: #fff; }

:root[data-theme='dark'] .sidebar__link { color: #cbd5e1; }
:root[data-theme='dark'] .sidebar__link.is-active {
  color: #fff;
  background: rgba(99, 102, 241, .24);
  box-shadow: inset 3px 0 0 #818cf8;
}
:root[data-theme='dark'] .sidebar__link.is-active > .icon:first-child,
:root[data-theme='dark'] .sidebar__link:hover > .icon:first-child { color: #a5b4fc; }

:root[data-theme='dark'] .sidebar__quick-controls,
:root[data-theme='dark'] .sidebar__app-version { border-color: rgba(255, 255, 255, .09); }
:root[data-theme='dark'] .sidebar__quick-btn,
:root[data-theme='dark'] .sidebar__update-summary,
:root[data-theme='dark'] .sidebar__update-channel,
:root[data-theme='dark'] .sidebar__update-check-btn { color: #d0d5dd; }
:root[data-theme='dark'] .sidebar__update-channel.is-active { color: #fff; background: rgba(99, 102, 241, .28); }
:root[data-theme='dark'] .sidebar__update-channel-badge { color: #c7d2fe; background: rgba(99, 102, 241, .2); }
:root[data-theme='dark'] .sidebar__update-details { border-color: rgba(255, 255, 255, .08); }
:root[data-theme='dark'] .sidebar__bottom { box-shadow: 0 -16px 28px rgba(16, 24, 40, .92); }

.app-header {
  border-bottom-color: color-mix(in srgb, var(--color-border) 88%, transparent);
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}

.hdr-search input {
  border-color: var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
}

.app-view { padding-top: clamp(24px, 2.6vw, 36px); }

/* Page hierarchy comes from the left rail and typography, not hero gradients. */
.workspace-hero,
.settings-page-head,
.docs-page-head.workspace-hero,
.assets-page-head.workspace-hero,
.sv-page-head.workspace-hero,
.rp-page-head.workspace-hero,
.kb-page-head.workspace-hero {
  position: relative;
  padding: clamp(22px, 2.3vw, 30px) clamp(22px, 2.5vw, 34px);
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.workspace-hero::before,
.settings-page-head::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--color-primary);
}

.workspace-hero h1,
.settings-page-head h1 { font-family: 'Sora', var(--font-sans); letter-spacing: -.04em; }

.card,
.people-table-wrap,
.table-wrap {
  border-color: color-mix(in srgb, var(--color-border) 92%, transparent);
  box-shadow: var(--shadow-xs);
}

/* Dashboard: a briefing page rather than a wall of floating widgets. */
.dashboard-grid { max-width: 1260px; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
.greeting-block {
  position: relative;
  padding: 6px 0 24px 18px;
  border-bottom-color: var(--color-border);
}
.greeting-block::before {
  content: '';
  position: absolute;
  inset: 4px auto 24px 0;
  width: 3px;
  border-radius: 3px;
  background: var(--color-primary);
}
.greeting-block h1 { font-family: 'Sora', var(--font-sans); font-size: clamp(1.75rem, 2.5vw, 2.3rem); }
.dash-main { gap: 30px; }
.dash-section__eyebrow { color: var(--color-primary); letter-spacing: .12em; }

.dash-surveys {
  padding: 0;
  overflow: hidden;
  border-color: var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 14px;
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}
.dash-surveys .dash-section__head { margin: 0; padding: 18px 20px; border-bottom: 1px solid var(--color-border); }
.dash-survey-grid { gap: 0; }
.dash-survey-card { border: 0; border-radius: 0; box-shadow: none; }
.dash-survey-card + .dash-survey-card { border-top: 1px solid var(--color-border); }

.dash-overview {
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-surface);
}
.dash-overview__head { margin: 0; padding: 16px; border-bottom: 1px solid var(--color-border); }
.dash-overview .stat-chips { gap: 0; }
.dash-overview .stat-chip {
  min-height: 94px;
  padding: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.dash-overview .stat-chip:nth-child(odd) { border-right: 1px solid var(--color-border); }
.dash-overview .stat-chip:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
.dash-overview__signals { margin: 0; padding: 10px; }
.announcement-card { border-radius: 12px; box-shadow: none; }
.announcement-card.is-pinned { border-left-width: 4px; }

/* Authentication is an editorial product entry, not a generated SaaS hero. */
.auth-page {
  background:
    linear-gradient(90deg, rgba(79, 70, 229, .035) 1px, transparent 1px),
    linear-gradient(rgba(79, 70, 229, .035) 1px, transparent 1px),
    #eef0f4;
  background-size: 48px 48px;
}
.auth-page::before { display: none; }
.auth-shell {
  grid-template-columns: minmax(0, 1.12fr) minmax(400px, .88fr);
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-radius: 24px;
  background: var(--color-surface);
  box-shadow: 0 26px 80px rgba(16, 24, 40, .14);
}
.auth-showcase {
  align-items: flex-start;
  padding: clamp(40px, 4.5vw, 64px);
  border: 0;
  border-radius: 0;
  color: #f8fafc;
  background: #101828;
}
.auth-showcase::after {
  display: block;
  background: radial-gradient(520px 360px at 110% -5%, rgba(99, 102, 241, .34), transparent 70%);
}
.auth-showcase__halo { display: none; }
.auth-showcase__brand { flex-direction: row; color: #fff; font-size: 20px; }
.auth-showcase__brand-mark { width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .08); }
.auth-showcase__brand-mark img { width: 38px; height: 38px; }
.auth-showcase__brand--company > span:last-child { text-align: left; }
.auth-showcase__chips { justify-content: flex-start; margin-top: 34px; }
.auth-showcase__chip,
.auth-showcase__chip--1 {
  color: #cbd5e1;
  border-color: rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .045);
}
.auth-showcase__chip--1 i { background: #818cf8; }
.auth-showcase__copy { align-items: flex-start; margin-top: 40px; text-align: left; }
.auth-showcase__copy h2 { color: #fff; font-size: clamp(36px, 3.3vw, 48px); }
.auth-showcase__copy h2 em { color: #a5b4fc; }
.auth-showcase__copy p { color: #98a2b3; }
.auth-showcase__scene {
  padding: 0;
  overflow: hidden;
  border-color: rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
}
.auth-showcase__scene-head { padding: 12px 14px; color: #98a2b3; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.auth-showcase__scene-grid { gap: 0; }
.auth-showcase__module {
  min-height: 66px;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
}
.auth-showcase__module + .auth-showcase__module { border-left: 1px solid rgba(255, 255, 255, .08); }
.auth-showcase__module strong { color: #f2f4f7; }
.auth-showcase__module-line { background: rgba(255, 255, 255, .12); }
.auth-showcase__secure { color: #98a2b3; }
.auth-card { border: 0; border-radius: 0; box-shadow: none; }
.auth-card__overline { color: var(--color-primary); }
.auth-card__overline span { background: var(--color-primary); }
.auth-submit.btn--primary { color: #fff; background: #101828; box-shadow: none; }
.auth-submit.btn--primary:hover:not(:disabled) { background: #1d2939; box-shadow: none; }
.auth-submit.btn--ghost { color: var(--color-fg); background: var(--color-surface); box-shadow: none; }
.auth-submit.btn--ghost:hover:not(:disabled) { color: var(--color-fg); background: var(--color-surface-hover); box-shadow: none; }

:root[data-theme='dark'] .auth-page { background: #0b101a; }
:root[data-theme='dark'] .auth-shell { border-color: #273142; }
:root[data-theme='dark'] .auth-submit.btn--primary { color: #101828; background: #f8fafc; }

@media (max-width: 900px) {
  .dashboard-grid { grid-template-columns: 1fr; gap: 24px; }
  .app-header { padding-top: var(--safe-area-top); }
}

@media (max-width: 560px) {
  .app-view { padding-top: 22px; }
  .workspace-hero,
  .settings-page-head { border-radius: 12px; }
  .dash-search input { border-radius: 12px; }
  .auth-page { background: var(--color-surface); }
  .auth-shell { border-radius: 0; box-shadow: none; }
  .auth-card {
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(88px, calc(var(--safe-area-top) + 76px)) 24px max(28px, env(safe-area-inset-bottom, 0px));
  }
  .auth-brand { margin-bottom: 30px; }
  .auth-title { font-size: 28px; }
  .auth-subtitle { margin-bottom: 26px; }
  .auth-form { gap: 16px; }
  .auth-input,
  .auth-pw-toggle,
  .auth-submit { height: 50px; }
  .auth-controls { box-shadow: none; }

  html.android-keyboard-open,
  html.android-keyboard-open body { scroll-behavior: smooth; }
  html.android-keyboard-open .auth-page,
  html.android-keyboard-open .auth-shell,
  html.android-keyboard-open .auth-card {
    min-height: calc(100dvh + var(--android-keyboard-height));
  }
  html.android-keyboard-open .auth-card {
    justify-content: flex-start;
    padding-top: calc(var(--safe-area-top) + 18px);
    padding-bottom: calc(var(--android-keyboard-height) + 32px);
  }
  html.android-keyboard-open .auth-field:has(input:focus) { scroll-margin-top: calc(var(--safe-area-top) + 16px); }
}

/* Android-only destination sheet. The fifth tab removes the need to learn a
   hidden edge gesture before discovering the product's less-frequent areas. */
.android-more { position: fixed; inset: 0; z-index: var(--z-modal); pointer-events: none; }
.android-more__scrim { position: absolute; inset: 0; border: 0; background: rgba(16, 24, 40, .56); opacity: 0; transition: opacity 220ms var(--ease-out); }
.android-more__sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: min(78vh, 680px); max-height: min(78dvh, 680px);
  padding: 8px 18px max(22px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 24px 24px 0 0; background: var(--color-surface);
  box-shadow: 0 -24px 64px rgba(16, 24, 40, .22);
  transform: translateY(102%); transition: transform 260ms var(--ease-out);
}
.android-more.is-open { pointer-events: auto; }
.android-more.is-open .android-more__scrim { opacity: 1; }
.android-more.is-open .android-more__sheet { transform: translateY(0); }
.android-more__handle { width: 42px; height: 4px; margin: 2px auto 14px; border-radius: 4px; background: var(--color-border-strong); }
.android-more__head { display: flex; align-items: flex-start; gap: 16px; padding: 0 2px 16px; border-bottom: 1px solid var(--color-border); }
.android-more__head > div { flex: 1; min-width: 0; }
.android-more__head h2 { margin: 0; font-family: 'Sora', var(--font-sans); font-size: 21px; }
.android-more__head p { margin: 4px 0 0; color: var(--color-fg-muted); font-size: 13px; }
.android-more__search { position: sticky; top: -8px; z-index: 2; display: flex; align-items: center; gap: 10px; margin: 0 -2px; padding: 12px 2px 10px; background: var(--color-surface); }
.android-more__search > .icon { width: 18px; height: 18px; margin-left: 12px; position: absolute; color: var(--color-fg-subtle); pointer-events: none; }
.android-more__search input { width: 100%; min-height: 46px; padding: 9px 14px 9px 40px; border: 1px solid var(--color-border); border-radius: 14px; outline: none; background: var(--color-surface-2); color: var(--color-fg); font: inherit; font-size: 14px; }
.android-more__search input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft); background: var(--color-surface); }
.android-more__sections { display: flex; flex-direction: column; gap: 17px; padding-top: 3px; }
.android-more__section h3 { margin: 0 0 8px 2px; color: var(--color-fg-subtle); font-size: 10px; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.android-more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.android-more__item { display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 10px; min-height: 58px; padding: 10px; border: 1px solid var(--color-border); border-radius: 12px; color: var(--color-fg); background: var(--color-surface); text-decoration: none; font-size: 13px; font-weight: 600; }
.android-more__item:hover { border-color: var(--color-border-strong); background: var(--color-surface-hover); }
.android-more__item:focus-visible { outline: 3px solid var(--color-primary-soft); outline-offset: 1px; }
.android-more__item.is-active { border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border)); background: var(--color-primary-soft); color: var(--color-primary); }
.android-more__icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: var(--color-primary); background: var(--color-primary-soft); }
.android-more__icon .icon { width: 18px; height: 18px; }
.android-more__section[data-more-section='attention'] .android-more__item { grid-column: 1 / -1; }
.android-more__section[data-more-section='people'] .android-more__icon { color: var(--color-success); background: var(--color-success-soft); }
.android-more__section[data-more-section='talent'] .android-more__icon { color: #7c3aed; background: color-mix(in srgb, #8b5cf6 14%, var(--color-surface)); }
.android-more__section[data-more-section='knowledge'] .android-more__icon { color: #0284c7; background: color-mix(in srgb, #0ea5e9 13%, var(--color-surface)); }
.android-more__section[data-more-section='control'] .android-more__icon { color: var(--color-warning); background: var(--color-warning-soft); }
.android-more__arrow { width: 15px; height: 15px; color: var(--color-fg-subtle); }
.android-more__count { display: grid; min-width: 22px; height: 22px; place-items: center; padding-inline: 6px; border-radius: var(--radius-full); background: var(--color-danger); color: #fff; font-size: 10px; }
.android-more__empty { margin: 18px 0 8px; padding: 24px 16px; border: 1px dashed var(--color-border-strong); border-radius: 14px; color: var(--color-fg-muted); font-size: 13px; text-align: center; }

.android-permission-prompt { display: flex; flex-direction: column; align-items: center; text-align: center; }
.android-permission-prompt__icon { display: grid; width: 58px; height: 58px; margin-bottom: 16px; place-items: center; border-radius: 18px; color: var(--color-primary); background: var(--color-primary-soft); }
.android-permission-prompt__icon .icon { width: 27px; height: 27px; }
.android-permission-prompt p { max-width: 42ch; margin: 0; color: var(--color-fg-muted); line-height: 1.6; }
.android-shared-file { display: flex; width: 100%; margin-top: 18px; padding: 13px 14px; flex-direction: column; gap: 3px; border: 1px solid var(--color-border); border-radius: 12px; text-align: left; background: var(--color-bg-subtle); overflow-wrap: anywhere; }
.android-shared-file span { color: var(--color-fg-muted); font-size: 12px; }
.android-permission-prompt .modal-actions { width: 100%; margin-top: 22px; }
.acc-native-select { width: min(220px, 100%); min-height: 42px; }
@media (max-width: 560px) { .acc-native-select { width: 100%; } }

@media (max-width: 360px) { .android-more__grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html.android-keyboard-open,
  html.android-keyboard-open body { scroll-behavior: auto; }
  .android-more__scrim, .android-more__sheet { transition: none; }
}

/* Android learning coach v3 — a compact field guide, not a generic modal.
   Gesture stages accept real pointer movement before enabling Next. */
.app-tour { align-items: flex-end; padding: 0; background: rgba(7, 12, 24, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.app-tour__card { width: 100%; max-width: 520px; min-height: min(650px, 88dvh); padding: 16px 20px max(22px, calc(env(safe-area-inset-bottom, 0px) + 16px)); align-items: stretch; gap: 18px; border: 0; border-radius: 28px 28px 0 0; background: var(--color-surface); box-shadow: 0 -28px 80px rgba(7, 12, 24, .32); transform: translateY(40px); animation: app-tour-sheet-in 360ms var(--ease-out) forwards; }
@keyframes app-tour-sheet-in { to { transform: none; opacity: 1; } }
.app-tour__head { display: flex; min-height: 36px; align-items: center; justify-content: space-between; color: var(--color-fg-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.app-tour__skip { min-height: 36px; margin-right: -8px; color: var(--color-fg-muted); font-weight: 650; text-transform: none; letter-spacing: 0; }
.app-tour__stage { height: 210px; border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border)); border-radius: 20px; background: linear-gradient(145deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface-2)), var(--color-surface-2)); touch-action: none; user-select: none; }
.app-tour__stage--gesture { --tour-drag: 0px; display: block; position: relative; overflow: hidden; cursor: grab; }
.app-tour__stage--gesture:active { cursor: grabbing; }
.app-tour__device-frame { position: absolute; inset: 22px 30px 46px; border: 1px solid var(--color-border-strong); border-radius: 18px; background: var(--color-surface); box-shadow: inset 0 0 0 5px var(--color-surface-2); }
.app-tour__gesture-origin { position: absolute; left: 31px; top: 38px; bottom: 62px; width: 4px; border-radius: 3px; background: var(--color-primary); opacity: .7; }
.app-tour__stage--drawer .app-tour__gesture-origin { left: 56px; }
.app-tour__gesture-path { position: absolute; left: 44px; top: 85px; display: flex; align-items: center; color: var(--color-primary); transform: translateX(var(--tour-drag)); transition: transform 220ms var(--ease-out); }
.app-tour__stage--drawer .app-tour__gesture-path { left: 68px; }
.app-tour__stage.is-dragging .app-tour__gesture-path { transition: none; }
.app-tour__gesture-hand { width: 42px; height: 42px; border: 8px solid color-mix(in srgb, var(--color-primary) 15%, var(--color-surface)); border-radius: 50%; background: var(--color-primary); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-primary) 32%, transparent); }
.app-tour__gesture-path svg { width: 24px; height: 24px; margin-left: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.app-tour__gesture-result { position: absolute; right: 38px; top: 71px; display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; color: #fff; background: #039855; transform: scale(.5); opacity: 0; transition: 220ms var(--ease-out); }
.app-tour__gesture-result svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.app-tour__stage.is-complete .app-tour__gesture-result { transform: scale(1); opacity: 1; }
.app-tour__stage.is-complete .app-tour__gesture-path { opacity: .18; }
.app-tour__stage > small { position: absolute; left: 0; right: 0; bottom: 17px; color: var(--color-fg-muted); text-align: center; font-size: 12px; font-weight: 600; }
.app-tour__stage.is-complete > small { color: #027A48; }
.app-tour__stage--security { position: relative; display: grid; place-items: center; overflow: hidden; }
.app-tour__security-orbit { position: absolute; width: 126px; height: 126px; border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent); border-radius: 50%; box-shadow: 0 0 0 28px color-mix(in srgb, var(--color-primary) 6%, transparent); animation: app-tour-orbit 2.3s ease-in-out infinite alternate; }
@keyframes app-tour-orbit { to { transform: scale(1.12); opacity: .55; } }
.app-tour__feature-icon { position: relative; width: 45px; height: 45px; padding: 13px; box-sizing: content-box; border-radius: 22px; color: #fff; background: var(--color-primary); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; box-shadow: 0 14px 34px color-mix(in srgb, var(--color-primary) 28%, transparent); }
.app-tour__feature-ping { position: absolute; top: 59px; left: calc(50% + 26px); width: 12px; height: 12px; border: 3px solid var(--color-surface-2); border-radius: 50%; background: #F04438; }
.app-tour__feature-icon--update { animation: app-tour-spin 2.4s ease-in-out infinite; }
.app-tour__release-pill { position: absolute; bottom: 24px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-fg-muted); background: var(--color-surface); font-size: 11px; font-weight: 700; }
.app-tour__dots { justify-content: center; gap: 7px; }
.app-tour__dotnav { width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer; }
.app-tour__dotnav.is-active { width: 28px; }
.app-tour__copy { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.app-tour__title { font-family: 'Sora', var(--font-sans); font-size: 23px; letter-spacing: -.025em; }
.app-tour__text { max-width: 34ch; line-height: 1.55; }
.app-tour__hint { max-width: 38ch; color: var(--color-fg-subtle); text-align: center; line-height: 1.45; }
.app-tour__actions { margin-top: auto; }
.app-tour__actions .btn { min-width: 118px; min-height: 48px; }
.app-tour__actions .btn:disabled { opacity: .42; }
@media (min-width: 560px) { .app-tour { align-items: center; padding: 24px; } .app-tour__card { min-height: 620px; border-radius: 28px; } }
@media (prefers-reduced-motion: reduce) { .app-tour__security-orbit, .app-tour__feature-icon--update { animation: none; } .app-tour__gesture-path { transition: none; } }