@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --bg: #060606;
  --bg-soft: #101010;
  --panel: rgba(255,255,255,0.06);
  --panel-2: rgba(255,255,255,0.10);
  --line: rgba(255,255,255,0.18);
  --line-soft: rgba(255,255,255,0.10);
  --text: #f2f2f2;
  --text-soft: rgba(242,242,242,0.78);
  --text-muted: rgba(242,242,242,0.56);
  --white: #ffffff;
  --black: #000000;
  --radius: 16px;
  --radius-pill: 999px;
}

* { box-sizing: border-box; }

html {
  color-scheme: dark !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0 !important;
  min-height: 100vh !important;
  color: var(--text) !important;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  background:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(180deg, #000 0%, #0a0a0a 100%) !important;
  background-size: 10px 10px, 10px 10px, auto !important;
  overflow-x: hidden !important;
}

/* Force monochrome look even if upstream UI has colors */
#root {
  min-height: 100vh;
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  filter: saturate(0) grayscale(1) contrast(1.06);
}

/* Remove previous fixed logo overlays if any remained */
body::before,
body::after,
#root::before,
.alfred-auth-page::before { content: none !important; }

/* Base typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--white) !important;
  letter-spacing: -0.02em !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 800 !important;
}

p, li, span, label, input, textarea, select, button, a, small, code, pre {
  color: inherit;
  font-family: Inter, system-ui, sans-serif !important;
}

a { color: var(--text) !important; }

/* Cards/panels */
[class*='card'], [class*='Card'],
[class*='panel'], [class*='Panel'],
[class*='modal'], [class*='Modal'],
[class*='dialog'], [class*='Dialog'],
[class*='task'], [class*='Task'],
[class*='session'], [class*='Session'] {
  background: var(--panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  backdrop-filter: blur(10px) !important;
}

/* Header/navigation */
header, nav, [class*='navbar'], [class*='Navbar'], [class*='topbar'], [class*='Topbar'] {
  background: rgba(0,0,0,.62) !important;
  border-color: var(--line-soft) !important;
  color: var(--text) !important;
  backdrop-filter: blur(12px) !important;
}

/* Sidebar/menu */
[class*='sidebar'], [class*='Sidebar'],
[class*='drawer'], [class*='Drawer'],
[class*='menu'], [class*='Menu'] {
  background: rgba(0,0,0,.86) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}

/* Consistent rounded controls */
button, [role='button'], input[type='button'], input[type='submit'],
a[class*='button'], a[class*='Button'],
select {
  min-height: 38px;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--line) !important;
  background: var(--panel-2) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

button:hover, [role='button']:hover, input[type='button']:hover, input[type='submit']:hover,
a[class*='button']:hover, a[class*='Button']:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

button[class*='primary'], button[class*='Primary'],
a[class*='primary'], a[class*='Primary'],
[type='submit'] {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* Inputs */
input[type='text'], input[type='search'], input[type='email'], input[type='number'],
textarea, select {
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-pill) !important;
}

input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: rgba(255,255,255,.68) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.12) !important;
}

/* Proper monochrome toggles/checkboxes */
input[type='checkbox'] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  border-radius: 999px !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,.07) !important;
  display: inline-grid !important;
  place-items: center !important;
  vertical-align: middle;
}

input[type='checkbox']::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  transform: scale(0.5);
  transition: .15s ease;
}

input[type='checkbox']:checked {
  background: #fff !important;
  border-color: #fff !important;
}

input[type='checkbox']:checked::before {
  background: #000;
  transform: scale(1);
}

/* Tables/lists */
table, [class*='table'], [class*='Table'] {
  border-color: var(--line) !important;
  color: var(--text) !important;
}
tr, td, th { border-color: var(--line-soft) !important; }

/* Logout is injected into the existing menu/header; no floating language/logout controls. */
.alfred-menu-logout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  margin: 4px !important;
  padding: 0 12px !important;
  border-radius: var(--radius-pill) !important;
  border: 1px solid var(--line) !important;
  background: rgba(255,255,255,.08) !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.alfred-menu-logout:hover {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
}

/* Auth page */
.alfred-auth-page {
  min-height: 100vh !important;
  padding: calc(18px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom)) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
}

.alfred-auth-card {
  width: min(100%, 430px) !important;
  background: rgba(0,0,0,.72) !important;
  border: 1px solid var(--line) !important;
  border-radius: 24px !important;
  color: var(--text) !important;
  padding: 20px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
}

.alfred-auth-mark {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #000 !important;
  display: grid !important;
  place-items: center !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
}

.alfred-eyebrow { color: var(--text-muted) !important; font-size: 12px !important; }
.alfred-auth-copy { color: var(--text-soft) !important; font-size: 14px !important; }
.alfred-auth-hint {
  color: var(--text-muted) !important;
  border: 1px dashed var(--line) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
}

a.alfred-primary-button {
  width: 100% !important;
  min-height: 48px !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #000 !important;
  border: 1px solid #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Mobile mini app spacing */
@media (max-width: 760px) {
  #root { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  h1 { font-size: clamp(30px, 10vw, 44px) !important; }
  h2 { font-size: clamp(24px, 8vw, 34px) !important; }
  [class*='sidebar'], [class*='Sidebar'], [class*='drawer'], [class*='Drawer'] {
    max-width: min(86vw, 340px) !important;
  }
}