*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #fff;
  --text: #222222;
  --muted: #5b6470;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-contrast: #ffffff;
  --danger: #dc2626;
  --success: #059669;
  --surface: rgba(255, 255, 255, 0.918);
  --surface-strong: #ffffff;
  --border: rgba(15, 23, 42, 0.18);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.3);
  --shadow-sm:
    0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow:
    0 4px 14px -2px rgba(15, 23, 42, 0.1), 0 2px 6px -1px rgba(15, 23, 42, 0.05);
  --radius: 8px;
  --radius-large: 12px;
  --transition: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 70ms linear;
  --font-sans:
    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  /* Breakpoints */
  --bp-xs: 420px;
  --bp-sm: 560px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  /* Safe area paddings for iOS/Android cutouts */
  --safe-top: max(env(safe-area-inset-top, 0px), 0px);
  --safe-right: max(env(safe-area-inset-right, 0px), 0px);
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), 0px);
  --safe-left: max(env(safe-area-inset-left, 0px), 0px);
}

::selection {
  background: var(--accent);
  color: var(--accent-contrast);
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  margin: 0;
  line-height: 1.55;
  background: var(--bg);
  background-attachment: fixed;
  font-size: 1rem;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings:
    'liga' 1,
    'kern' 1;
  padding: 0;
  /* Provide safe-area padding on very small viewports when content is at edges */
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* Basic element margin/padding reset for newly semantic tags introduced */
p,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

/* Provide a default vertical rhythm helper class if spacing is desired */
.flow > * + * {
  margin-top: 0.75rem;
}

/* Utility stacks (optional) */
.stack-sm > * + * {
  margin-top: 0.25rem;
}
.stack-md > * + * {
  margin-top: 0.5rem;
}
.stack-lg > * + * {
  margin-top: 1rem;
}

.error {
  color: var(--danger);
  font-size: 0.85rem;
  font-weight: 500;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  padding: 6px 10px;
  border-radius: var(--radius);
}

button {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  color: var(--accent-contrast);
  background: linear-gradient(
    145deg,
    var(--accent) 0%,
    var(--accent-strong) 120%
  );
  border: 1px solid rgba(37, 99, 235, 0.55);
  border-radius: var(--radius);
  padding: 10px 18px; /* Larger touch target */
  cursor: pointer;
  font: inherit;
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.35px;
  width: fit-content;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    var(--shadow-sm);
  transition:
    background var(--transition),
    box-shadow var(--transition),
    transform var(--transition),
    border-color var(--transition),
    filter var(--transition-fast);
  min-height: 40px; /* Ensure minimum hit area */
}
button:hover {
  background: linear-gradient(
    145deg,
    var(--accent-strong) -10%,
    var(--accent) 110%
  );
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    var(--shadow);
  filter: brightness(1.02);
}
button:focus-visible {
  outline: none;
  box-shadow:
    var(--focus-ring),
    0 1px 0 rgba(255, 255, 255, 0.25) inset,
    var(--shadow);
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}
button:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.97);
}

/* Icon-only transparent button */
.btn-icon {
  background: transparent;
  color: var(--text);
  border: 1px solid transparent;
  padding: 6px;
  border-radius: var(--radius);
  box-shadow: none;
  line-height: 0;
  cursor: pointer;
}
.btn-icon:hover {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}
.btn-icon:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.btn-icon svg {
  width: 24px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Danger variant for destructive actions */
.btn-danger {
  background: linear-gradient(145deg, var(--danger) 0%, #b91c1c 120%);
  border-color: rgba(220, 38, 38, 0.55);
  color: #fff;
}
.btn-danger:hover {
  background: linear-gradient(145deg, #b91c1c -10%, var(--danger) 110%);
}

.btn-secondary {
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  filter: none;
  transition: all var(--transition);
}
.btn-secondary:hover {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}
.btn-secondary:focus-visible {
  border-color: var(--accent-strong);
  box-shadow:
    var(--focus-ring),
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    var(--shadow-sm);
}

input {
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background var(--transition);
  min-height: 40px; /* touch-friendly */
}
input:focus {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
  background: var(--surface-strong);
}

/* Utility & structural classes */
.card {
  background: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.65),
    rgba(255, 255, 255, 0.52)
  );
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 14px;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--transition),
    border-color var(--transition),
    transform var(--transition),
    background var(--transition);
}

.text-muted {
  color: var(--muted);
}
.accent {
  color: var(--accent);
}
.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

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

/* --------------------------------------------------
   Auth (signed-out) full-screen mode adjustments
   The client adds body.auth-mode while the user is signed out.
   We remove default page margins that caused vertical overflow,
   lock the viewport, and ensure the auth panel is centered while
   still scrollable internally if its content exceeds the height.
--------------------------------------------------- */
body.auth-mode {
  overflow: hidden; /* prevent body scroll bar */
  height: 100vh;
}

body.auth-mode c-app {
  margin: 0 auto; /* override 32/64px margins */
  min-height: 100vh;
  justify-content: center; /* flex centering (already with :has but explicit) */
  gap: 1.75rem;
}

/* Ensure auth panel never exceeds viewport; allow internal scroll if needed */
body.auth-mode c-auth-panel {
  max-height: min(640px, 100vh - 48px);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Narrower devices: reduce side padding to keep panel fully visible */
@media (max-width: 480px) {
  body.auth-mode c-auth-panel {
    width: 100%;
    padding: 20px 18px;
  }
}