/* ══════════════════════════════════════════════
   ZITLAS — Login Page
   Matches dashboard.css design system exactly.
   Mobile-first. Orange accent. No green.
   ══════════════════════════════════════════════ */

/* ── Design tokens — identical to dashboard ── */
:root {
  --accent:        var(--primary);
  --accent-light:  var(--primary-hover);
  --accent-glow:   rgba(var(--primary-rgb),0.18);
  --accent-glow-s: rgba(var(--primary-rgb),0.08);

  --radius:    18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-xs:  8px;

  --transition:      0.22s ease;
  --transition-slow: 0.36s cubic-bezier(0.34, 1.56, 0.64, 1);
}

[data-theme="dark"] {
  --bg:          var(--bg-primary);
  --bg-alt:      var(--bg-card);
  --card:        var(--bg-card);
  --card-hover:  var(--bg-card-light);
  --border:      var(--border);
  --border-sub:  var(--bg-card-light);
  --text:        var(--text-primary);
  --text-sec:    var(--text-secondary);
  --text-muted:  var(--text-muted);
  --shadow:      0 4px 28px rgba(var(--black-rgb),0.55);
  --glow:        0 0 20px rgba(var(--primary-rgb),0.22);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; outline: none; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input  { font-family: inherit; border: none; outline: none; background: none; color: inherit; }
a      { text-decoration: none; color: inherit; }
img    { display: block; max-width: 100%; }

/* ══════════════════════════════════════════════
   BACKGROUND
   ══════════════════════════════════════════════ */

.bg-glow {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(360px, 80vw, 900px);
  height: clamp(260px, 40vw, 560px);
  background: radial-gradient(ellipse at 50% 0%, rgba(var(--primary-rgb),0.09) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════════════════════════════════
   HERO SECTION
   ══════════════════════════════════════════════ */

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 52px 20px 28px;
  gap: 0;
}

/* ── Logo ── */
.login-logo-block {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  animation: slideUp 0.45s ease both;
  position: relative;
}

.login-logo-text {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--accent);
  text-shadow:
    0 0 18px rgba(var(--primary-rgb),0.45),
    0 0 40px rgba(var(--primary-rgb),0.15);
  animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoPulse {
  0%, 100% { text-shadow: 0 0 18px rgba(var(--primary-rgb),0.45), 0 0 40px rgba(var(--primary-rgb),0.15); }
  50%       { text-shadow: 0 0 28px rgba(var(--primary-rgb),0.65), 0 0 60px rgba(var(--primary-rgb),0.25); }
}

/* ── Tagline ── */
.login-tagline {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 14px;
  animation: slideUp 0.45s ease 0.08s both;
}

/* ── Headline ── */
.login-headline {
  font-size: clamp(26px, 7vw, 38px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-bottom: 12px;
  animation: slideUp 0.45s ease 0.14s both;
}

.login-headline-accent {
  color: var(--accent);
}

/* ── Subtitle ── */
.login-subtitle {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sec);
  line-height: 1.6;
  margin-bottom: 28px;
  animation: slideUp 0.45s ease 0.20s both;
}

/* ══════════════════════════════════════════════
   ECOSYSTEM SVG
   ══════════════════════════════════════════════ */

.ecosystem-wrap {
  width: 100%;
  max-width: 280px;
  margin-bottom: 24px;
  animation: slideUp 0.45s ease 0.26s both;
}

.ecosystem-svg { width: 100%; height: auto; }

/* Line draw-in animation */
.eco-line {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
}

.eco-l1 { animation: drawLine 0.8s ease 0.7s forwards; }
.eco-l2 { animation: drawLine 0.8s ease 0.9s forwards; }
.eco-l3 { animation: drawLine 0.8s ease 1.1s forwards; }
.eco-l4 { animation: drawLine 0.8s ease 1.3s forwards; }

@keyframes drawLine { to { stroke-dashoffset: 0; } }

/* Center node ring pulse */
.eco-center-ring { animation: centerPulse 2.5s ease-in-out infinite; }

@keyframes centerPulse {
  0%, 100% { stroke-opacity: 1;   filter: drop-shadow(0 0 4px rgba(var(--primary-rgb),0.5)); }
  50%       { stroke-opacity: 0.6; filter: drop-shadow(0 0 10px rgba(var(--primary-rgb),0.8)); }
}

/* Pulse dots along lines */
.pdot { opacity: 0; }

.pdot-1 { animation: dot1 2.2s ease-in-out 1.0s infinite; }
.pdot-2 { animation: dot2 2.2s ease-in-out 1.5s infinite; }
.pdot-3 { animation: dot3 2.2s ease-in-out 2.0s infinite; }
.pdot-4 { animation: dot4 2.2s ease-in-out 2.5s infinite; }

@keyframes dot1 {
  0%   { cx: 140; cy: 100; opacity: 0; }
  15%  { opacity: 1; }
  50%  { cx: 70;  cy: 45;  opacity: 1; }
  85%  { opacity: 1; }
  100% { cx: 140; cy: 100; opacity: 0; }
}
@keyframes dot2 {
  0%   { cx: 140; cy: 100; opacity: 0; }
  15%  { opacity: 1; }
  50%  { cx: 210; cy: 45;  opacity: 1; }
  85%  { opacity: 1; }
  100% { cx: 140; cy: 100; opacity: 0; }
}
@keyframes dot3 {
  0%   { cx: 140; cy: 100; opacity: 0; }
  15%  { opacity: 1; }
  50%  { cx: 210; cy: 155; opacity: 1; }
  85%  { opacity: 1; }
  100% { cx: 140; cy: 100; opacity: 0; }
}
@keyframes dot4 {
  0%   { cx: 140; cy: 100; opacity: 0; }
  15%  { opacity: 1; }
  50%  { cx: 70;  cy: 155; opacity: 1; }
  85%  { opacity: 1; }
  100% { cx: 140; cy: 100; opacity: 0; }
}

/* ══════════════════════════════════════════════
   STATS ROW — same visual as dashboard .qs-card
   ══════════════════════════════════════════════ */

.login-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 440px;
  animation: slideUp 0.45s ease 0.32s both;
}

.lstat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 11px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: border-color var(--transition), transform var(--transition);
}

.lstat-card:hover { border-color: rgba(var(--primary-rgb),0.25); transform: translateY(-2px); }

.lstat-num {
  font-size: 15px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.3px;
}

.lstat-label {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.2px;
  text-align: center;
}

/* ══════════════════════════════════════════════
   LOGIN CARD — matches dashboard modal/card style
   ══════════════════════════════════════════════ */

.login-card-section {
  position: relative;
  z-index: 1;
  padding: 20px 16px 48px;
  display: flex;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 480px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 20px 24px;
  position: relative;
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(var(--primary-rgb),0.06),
    inset 0 1px 0 rgba(var(--white-rgb),0.03);
  animation: slideUp 0.45s ease 0.42s both;
}

/* Orange top line — same pattern as goal-card glow */
.card-accent-line {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px;
}

.login-card-header {
  text-align: center;
  margin-bottom: 22px;
}

.login-card-title {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.2px;
  margin-bottom: 5px;
}

.login-card-sub {
  font-size: 13px;
  color: var(--text-sec);
  font-weight: 400;
}

/* ── Input groups — matches dashboard .form-input ── */

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.lf-input-group {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.lf-input-group:focus-within {
  border-color: rgba(var(--primary-rgb),0.5);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.10);
}

.lf-input-group.input-error {
  border-color: rgba(255, 59, 48, 0.5);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.08);
  animation: inputShake 0.4s ease;
}

.lf-input-icon {
  padding: 0 10px 0 14px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color var(--transition);
}

.lf-input-group:focus-within .lf-input-icon { color: var(--accent); }

.lf-input {
  flex: 1;
  height: 50px;
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
  padding: 0 10px 0 0;
  caret-color: var(--accent);
}

.lf-input::placeholder {
  color: var(--text-muted);
  font-size: 13.5px;
}

.lf-input:-webkit-autofill,
.lf-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px var(--bg-primary) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}

.lf-pw-toggle {
  padding: 0 14px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color var(--transition);
}

.lf-pw-toggle:hover { color: var(--text-sec); }

.lf-row-between {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: -2px;
}

.lf-forgot {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sec);
  transition: color var(--transition);
}

.lf-forgot:hover { color: var(--accent); }

/* ── Sign In Button — exact match of .save-goal-btn ── */

.btn-login {
  width: 100%;
  padding: 15px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--text-primary);
  font-size: 14.5px;
  font-weight: 800;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(var(--primary-rgb),0.40);
  letter-spacing: 0.2px;
  margin-top: 6px;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}

.btn-login:hover  { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(var(--primary-rgb),0.55); }
.btn-login:active { transform: scale(0.98); }
.btn-login:disabled { opacity: 0.7; transform: none; cursor: wait; }

.btn-spinner { display: none; align-items: center; }
.btn-spinner.active { display: flex; }

.spin {
  animation: spinAnim 0.75s linear infinite;
}

@keyframes spinAnim { to { transform: rotate(360deg); } }

/* ── Divider ── */

.lf-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
}

.lf-divider::before,
.lf-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.lf-divider-text {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* ── Google Button ── */

.btn-google {
  width: 100%;
  height: 50px;
  background: var(--bg-alt);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  margin-bottom: 18px;
}

.btn-google:hover  { background: var(--card-hover); border-color: rgba(var(--white-rgb),0.15); transform: translateY(-1px); }
.btn-google:active { transform: scale(0.98); }

/* ── Role Selector ── */

.role-selector {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
}

.role-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 12px;
  border-radius: calc(var(--radius-sm) - 3px);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.role-tab:hover { color: var(--text-sec); }

.role-tab.active {
  background: var(--card);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(var(--black-rgb),0.4);
}

.role-tab-icon { font-size: 16px; line-height: 1; }
.role-tab-label { letter-spacing: 0.1px; }

/* ── Expert Hint Text ── */

.lf-expert-hint {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
  font-weight: 400;
}

.lf-expert-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--transition);
}

.lf-expert-link:hover { opacity: 0.75; }

/* ── Card Footer ── */

.login-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.lf-create-link {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  transition: opacity var(--transition);
}

.lf-create-link:hover { opacity: 0.72; }

.lf-sep { color: var(--text-muted); font-size: 14px; }

.lf-skip-btn {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-sec);
  transition: color var(--transition);
}

.lf-skip-btn:hover { color: var(--text); }

/* ══════════════════════════════════════════════
   POST-LOGIN OVERLAY
   Same feel as dashboard success states, but full-screen
   ══════════════════════════════════════════════ */

.login-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.login-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.overlay-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.overlay-logo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--accent);
}

.overlay-ring-a {
  inset: -24px;
  animation: ringExpand 1.5s ease-out 0.2s infinite;
}

.overlay-ring-b {
  inset: -44px;
  animation: ringExpand 1.5s ease-out 0.5s infinite;
}

@keyframes ringExpand {
  0%   { opacity: 0.7; transform: scale(0.7); }
  100% { opacity: 0;   transform: scale(1.3); }
}

.overlay-logo-text {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--text);
  text-shadow:
    0 0 24px rgba(var(--primary-rgb),0.55),
    0 0 50px rgba(var(--primary-rgb),0.2);
  animation: overlayLogoIn 0.6s var(--transition-slow) 0.1s both;
}

@keyframes overlayLogoIn {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

.overlay-bars {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 28px;
}

.overlay-bar {
  width: 4px;
  border-radius: 4px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(var(--primary-rgb),0.5);
}

.overlay-bar:nth-child(1) { animation: barBounce 0.9s ease-in-out 0.00s infinite; }
.overlay-bar:nth-child(2) { animation: barBounce 0.9s ease-in-out 0.15s infinite; }
.overlay-bar:nth-child(3) { animation: barBounce 0.9s ease-in-out 0.30s infinite; }
.overlay-bar:nth-child(4) { animation: barBounce 0.9s ease-in-out 0.45s infinite; }
.overlay-bar:nth-child(5) { animation: barBounce 0.9s ease-in-out 0.60s infinite; }

@keyframes barBounce {
  0%, 100% { height: 8px;  opacity: 0.4; }
  50%       { height: 28px; opacity: 1;   }
}

.overlay-msg {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-sec);
  letter-spacing: 0.3px;
}

/* ══════════════════════════════════════════════
   UTILITY ANIMATIONS
   ══════════════════════════════════════════════ */

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes inputShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

/* 360px — smallest Android */
@media (max-width: 360px) {
  .login-headline    { font-size: 24px; }
  .login-logo-text   { font-size: 24px; letter-spacing: 5px; }
  .lstat-num         { font-size: 13px; }
  .login-card        { padding: 24px 16px 20px; }
  .btn-login         { padding: 13px; font-size: 14px; }
}

/* 390–430px — iPhone base */
@media (min-width: 390px) {
  .login-card-section { padding: 20px 18px 52px; }
  .login-stats        { gap: 10px; }
  .lstat-num          { font-size: 16px; }
}

/* 480px+ small tablet */
@media (min-width: 480px) {
  .hero               { padding: 60px 24px 28px; }
  .login-headline     { font-size: 36px; }
  .ecosystem-wrap     { max-width: 300px; }
  .login-card         { padding: 32px 28px 26px; }
}

/* 768px+ tablet/desktop — wider but still centered */
@media (min-width: 768px) {
  .hero { padding: 72px 32px 32px; }
  .ecosystem-wrap { max-width: 320px; }
  .login-stats { max-width: 400px; gap: 12px; }
  .login-card-section { padding: 24px 24px 64px; }
  .lstat-card { padding: 14px 10px; }
  .lstat-num { font-size: 18px; }
  .lstat-label { font-size: 10px; }
}

/* 1024px+ laptop/desktop — two-column layout */
@media (min-width: 1024px) {
  body {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .hero {
    flex: 1;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 48px;
    justify-content: center;
    position: sticky;
    top: 0;
  }

  .login-card-section {
    flex: 0 0 480px;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--border);
  }

  .login-card {
    width: 100%;
    max-width: 400px;
  }

  .login-logo-text  { font-size: 32px; letter-spacing: 7px; }
  .login-headline   { font-size: clamp(32px, 3.5vw, 44px); }
  .login-subtitle   { font-size: 14px; }
  .ecosystem-wrap   { max-width: 340px; }
  .login-stats      { max-width: 360px; gap: 10px; }
}

/* 1200px+ desktop — more breathing room */
@media (min-width: 1200px) {
  .hero              { padding: 0 64px; }
  .login-card-section { flex-basis: 520px; padding: 0 56px; }
  .login-card        { max-width: 420px; }
  .ecosystem-wrap    { max-width: 360px; }
}

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

/* ══════════════════════════════════════════════
   GOOGLE ROLE-SELECT MODAL
   Appears for new Google users to pick account type
   ══════════════════════════════════════════════ */

.grm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(var(--black-rgb),0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.grm-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

.grm-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 20px 22px;
  position: relative;
  box-shadow: 0 24px 64px rgba(var(--black-rgb),0.7);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.grm-backdrop.active .grm-card {
  transform: translateY(0) scale(1);
}

/* Top accent line */
.grm-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 2px;
}

/* Google user identity strip */
.grm-user-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(var(--white-rgb),0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 20px;
}

.grm-photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
}

.grm-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
}

.grm-user-name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grm-user-email {
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grm-google-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-alt, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 8px;
  flex-shrink: 0;
}

/* Modal title */
.grm-title {
  font-size: 19px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.3px;
  margin-bottom: 4px;
  text-align: center;
}

.grm-sub {
  font-size: 13px;
  color: var(--text-sec);
  text-align: center;
  margin-bottom: 18px;
}

/* Option buttons */
.grm-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.grm-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  position: relative;
}

.grm-option:hover { border-color: rgba(var(--primary-rgb),0.3); background: rgba(var(--primary-rgb),0.04); }

.grm-option.active {
  border-color: var(--accent);
  background: rgba(var(--primary-rgb),0.07);
}

.grm-option:active { transform: scale(0.98); }

.grm-option-icon { font-size: 26px; flex-shrink: 0; }

.grm-option-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.grm-option-name {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.1px;
}

.grm-option-desc {
  font-size: 11.5px;
  color: var(--text-sec);
  font-weight: 400;
  line-height: 1.4;
}

/* Check mark — visible only when active */
.grm-option-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.grm-option.active .grm-option-check {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-primary);
}

/* Confirm button */
.grm-confirm-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: var(--text-primary);
  font-size: 14.5px;
  font-weight: 800;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 18px rgba(var(--primary-rgb),0.40);
  letter-spacing: 0.2px;
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  cursor: pointer;
}

.grm-confirm-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(var(--primary-rgb),0.55);
}

.grm-confirm-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.grm-confirm-spinner { display: none; align-items: center; }

/* ── Application Under Review panel ──────────────────────────────────────── */
.grm-under-review {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 4px;
  gap: 10px;
}

.grm-review-icon {
  font-size: 48px;
  animation: grm-pulse 2s ease-in-out infinite;
}

@keyframes grm-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.08); opacity: 0.8; }
}

.grm-review-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.grm-review-sub {
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  margin: 0;
}

.grm-review-note {
  font-size: 12px;
  color: rgba(var(--white-rgb),0.55);
  line-height: 1.5;
  margin: 0;
}

.grm-review-home-btn {
  margin-top: 8px;
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: var(--bg-primary);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .18s, transform .18s;
}

.grm-review-home-btn:hover  { opacity: .88; transform: translateY(-1px); }
.grm-review-home-btn:active { transform: scale(.97); }