/* Shared look for the portal's pre-app pages (login.html, security.html) - plain static HTML served by
   the API project itself, entirely outside the Avalonia/WASM app, so these colors are hand-duplicated
   from (not bound to) VaughanInsurance.Web/Styles/PortalTheme.axaml's palette. Keep the two in sync by
   eye if one changes. Same "glass + clay" direction as the app: a soft pastel-pink backdrop, a frosted
   floating card, layered shadows for real depth, and a little grain texture a browser can render exactly
   (an SVG filter) that the Avalonia side only approximates with gradients. */
:root {
  /* Same four stops as VaughanInsurance.Web/Styles/PortalTheme.axaml's AppMeshBackgroundBrush - eggshell/
     light-gray fading into dusty pink, not near-white, per the "avoid the bright white" note. */
  --bg-1: #EEE9E3;
  --bg-2: #EFDCE5;
  --bg-3: #EBCBDC;
  --bg-4: #E3B9D0;
  --card: rgba(240, 235, 226, .74);
  --card-edge: rgba(240, 235, 226, .65);
  --text: #2E1620;
  --muted: #7A5468;
  --accent: #C2447A;
  --accent-2: #E85D9C;
  --accent-dark: #6B2545;
  --danger: #C23E63;
  --danger-dark: #8C2648;
  --border: #E8B9CE;
  --field-bg: rgba(249, 234, 241, .8);
}
@media (prefers-color-scheme: dark) {
  /* No real dark palette yet (same limitation as the app - see AppStyles.axaml) - a gentler shift of the
     same hues rather than a true dark theme, so the page stays legible either way. */
  :root {
    --bg-1: #241019; --bg-2: #341526; --bg-3: #401A2E; --bg-4: #4A1F36;
    --card: rgba(46, 22, 32, .78); --card-edge: rgba(255, 255, 255, .12);
    --text: #FBEAF1; --muted: #D3A9BE;
    --field-bg: rgba(255, 255, 255, .06); --border: #6B3550;
  }
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 48px 16px;
  color: var(--text);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 35%, var(--bg-3) 70%, var(--bg-4) 100%);
  position: relative;
  overflow-x: hidden;
}

/* Two soft blurred color blooms floating behind the card - the corner "glass" wash from the reference,
   applied to the whole page instead of just one card. Pure CSS, no image assets. */
body::before, body::after {
  content: "";
  position: fixed;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  z-index: 0;
  pointer-events: none;
}
body::before { top: -18vmax; left: -14vmax; background: radial-gradient(circle, #FFE1EE 0%, transparent 70%); }
body::after { bottom: -20vmax; right: -16vmax; background: radial-gradient(circle, #E9AFC8 0%, transparent 70%); }

/* A little authentic film grain - an SVG turbulence filter, very low opacity, blended over everything.
   This is the one place real "texture" is practical; Avalonia's renderer has no equivalent filter. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

main {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg, var(--card) 0%, rgba(235, 203, 220, .55) 100%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1.5px solid var(--card-edge);
  border-radius: 28px;
  padding: 32px 28px;
  box-shadow:
    inset 0 1px 1px rgba(240, 235, 226, .6),
    0 3px 6px rgba(107, 37, 69, .10),
    0 16px 36px rgba(107, 37, 69, .14),
    0 34px 70px rgba(194, 68, 122, .16);
}

h1 {
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.2px;
}
p.sub { margin: 0 0 22px; color: var(--muted); font-size: .92rem; }
p { margin: 8px 0; }

label { display: block; margin: 14px 0 5px; font-size: .82rem; font-weight: 600; color: var(--muted); }

input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--text);
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: inset 0 1px 3px rgba(107, 37, 69, .10);
  transition: box-shadow .15s ease, border-color .15s ease;
}
input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 1px 3px rgba(107, 37, 69, .10), 0 0 0 3px rgba(194, 68, 122, .18);
}

button, a.button {
  display: block;
  width: 100%;
  margin-top: 22px;
  padding: 13px;
  font: inherit;
  font-weight: 700;
  letter-spacing: .1px;
  color: #fff;
  background: linear-gradient(180deg, var(--accent-2) 0%, var(--accent-dark) 100%);
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(240, 235, 226, .35),
    0 6px 16px rgba(194, 68, 122, .32),
    0 2px 5px rgba(107, 37, 69, .22);
  transition: transform .1s ease, box-shadow .1s ease;
}
button:hover, a.button:hover { transform: translateY(-1px); }
button:active, a.button:active { transform: translateY(0); box-shadow: inset 0 1px 3px rgba(107, 37, 69, .3); }
button:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }

button.secondary {
  color: var(--accent-dark);
  background: rgba(240, 235, 226, .55);
  box-shadow: inset 0 1px 0 rgba(240, 235, 226, .6), 0 2px 6px rgba(107, 37, 69, .12);
}

code, pre {
  font: .95rem ui-monospace, 'SF Mono', Menlo, monospace;
  word-break: break-all;
}
pre {
  background: var(--field-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  white-space: pre-wrap;
}

#error {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: var(--danger-dark);
  font-size: .88rem;
  font-weight: 600;
}

[hidden] { display: none !important; }