/* Tokens mirror lib/config/theme.dart + dripr_colors.dart (DriprColors.dark / .light). */
:root {
  --bg: #121214;            /* AppTheme.backgroundDark */
  --surface: #1C1C22;       /* surfaceSubtle */
  --control: #282830;       /* controlSurface */
  --border: #3A3A45;        /* borderColor */
  --text: #F4F4F6;          /* textPrimary */
  --text-2: #A1A1AA;        /* textSecondary */
  --hint: #8A8A94;          /* textHint */
  --cta-bg: #FFFFFF;        /* ctaBackground (dark) */
  --cta-fg: #121214;        /* ctaForeground (dark) */
  --cta-disabled-bg: #26262E;
  --cta-disabled-fg: #7D7D87;
  --accent: #FFFFFF;        /* selectionActive (dark) */
  --error: #F44336;
  --success: #4CAF50;
  --shadow: 0 0 20px rgba(255,255,255,.12);
  --card-shadow: none;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F8F8FA; --surface: #FFFFFF; --control: #FFFFFF;
    --border: #D4D4D8; --text: #18181B; --text-2: #52525B; --hint: #71717A;
    --cta-bg: #3A79A7; --cta-fg: #FFFFFF;           /* AppTheme.aegeanBlue */
    --cta-disabled-bg: #E4E4E7; --cta-disabled-fg: #71717A;
    --accent: #3A79A7; --error: #B91C1C; --success: #15803D;
    --shadow: 0 2px 10px rgba(58,121,167,.22);
    --card-shadow: 0 2px 10px rgba(0,0,0,.04);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font: 16px/1.5 Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.shell {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { border-radius: 10px; }
.wordmark { font-size: 30px; font-weight: 900; letter-spacing: -1px; line-height: 1; }
.card {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 32px 24px; box-shadow: var(--card-shadow);
}
.view { display: flex; flex-direction: column; gap: 12px; }
.view[hidden] { display: none; }
#view-loading, #view-result { align-items: center; text-align: center; }
#view-reset .badge, #view-reset h1, #view-reset > .muted { align-self: center; text-align: center; }
h1 { font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px; margin: 8px 0 0; }
.muted { color: var(--text-2); margin: 0; overflow-wrap: anywhere; }
.muted strong { color: var(--text); font-weight: 600; }
label { font-size: 14px; font-weight: 500; color: var(--text-2); margin-top: 12px; }
.pw-wrap { position: relative; }
input {
  width: 100%; height: 56px; font: inherit; color: var(--text);
  background: var(--control); border: 1px solid var(--border); border-radius: 12px;
  padding: 0 72px 0 16px; outline: none;
}
input:focus { border-color: var(--accent); }
.toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--text-2); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1;
  padding: 8px; cursor: pointer;
}
.hint { font-size: 13px; color: var(--hint); margin: 0; }
.error { color: var(--error); font-size: 14px; margin: 0; }
.cta, .outline {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50px; border-radius: 25px;
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
}
.cta { background: var(--cta-bg); color: var(--cta-fg); border: 0; box-shadow: var(--shadow); margin-top: 12px; }
.cta:disabled { background: var(--cta-disabled-bg); color: var(--cta-disabled-fg); box-shadow: none; cursor: default; }
.outline { background: transparent; color: var(--text); border: 1px solid var(--border); margin-top: 8px; }
.badge {
  width: 72px; height: 72px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.badge.ok { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }
.badge.bad { color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); }
.spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.foot { font-size: 13px; color: var(--hint); text-align: center; }
.foot a { color: var(--text-2); }