/* Color system (light and dark) */
:root{
  --bg: #ffffff;
  --panel: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --accent: #0b74de;
  --header-height: 64px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --panel: #071028;
    --text: #e6eef8;
    --muted: #9aa6b2;
    --accent: #4aa3ff;
  }
}

html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: var(--text);
	background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 90%, black 5%));
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
}

/* header */
.site-header{
  height: var(--header-height);
  display:flex;
  align-items:center;
  gap:1rem;
  padding: 0 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
@media (prefers-color-scheme: dark){
  .site-header{ border-bottom-color: rgba(255,255,255,0.04); }
}

.header-inner{
  max-width: none;
  margin: 0;
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:0.75rem;
  text-decoration:none;
  color: var(--text);
}

.logo{
  height:40px;
  width:auto;
  display:block;
}

.site-title{
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:0.2px;
}

.nav {
  display:flex;
  gap:0.5rem;
  align-items:center;
}

.nav a{ color:var(--muted); padding:0.35rem 0.6rem; border-radius:6px; text-decoration:none }
.nav a.active { color:var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

main{
  padding: 1.5rem;
  max-width: 900px;
  margin: calc(var(--header-height) + 1rem) auto 3rem;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* form tweaks */
label { display:block }
input, button, select, textarea {
	font-family: inherit;
	font-size: 0.95rem;
	padding: 0.5rem;
	margin: 0 0 0.75rem 0;
	box-sizing: border-box;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 6px;
}

input:disabled{ color: var(--muted) }

button{ color: #fff; background: var(--accent); border:none; padding:0.6rem 0.9rem; border-radius:6px; cursor:pointer }
button:hover{ filter:brightness(0.98) }

/* small helpers */
.small { font-size:0.85rem; color:var(--muted) }

/* Preserve some original rules that improve accessibility */
input, button, select, textarea { -webkit-padding: 0.4em 0; }

/* Modern UI tweaks: subtle transitions and improved focus */
* { transition: color 140ms ease, background 140ms ease, border-color 140ms ease }

button:focus { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset:2px }

/* Page-level modern background */
@media (prefers-color-scheme: light){
  body{ background: linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%); }
}
@media (prefers-color-scheme: dark){
  body{ background: linear-gradient(180deg, #071021, #04101a); }
}

/* Design system - unified classes */
.container-tight { max-width:520px; margin:0 auto }
.container { max-width:1100px; margin:0 auto; padding:0 1rem }
.card { background: var(--panel); border-radius:12px; padding:1rem; box-shadow: 0 8px 30px rgba(2,6,23,0.06) }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.6rem 0.9rem; border-radius:10px; border:none; cursor:pointer; font-weight:600 }
.btn-primary { background: linear-gradient(90deg,var(--accent), color-mix(in srgb, var(--accent) 70%, black 10%)); color:#fff; box-shadow:0 8px 24px rgba(11,116,222,0.12) }
.btn-ghost { background: transparent; border:1px solid rgba(0,0,0,0.06); color:var(--text) }
.btn-icon { width:40px; height:40px; padding:0; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; cursor:pointer }
.btn-icon svg { width:20px; height:20px }

/* Navigation */
.nav-link { color:var(--text); text-decoration:none; padding:0.5rem 0.75rem; display:inline-block; border-radius:8px }
.nav-link:hover { background: color-mix(in srgb, var(--panel) 85%, transparent) }
.nav-link.active { color:var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent) }

/* Header brand logo helper */
.brand .logo { height:36px; width:auto }

/* Small utilities */
.text-muted { color:var(--muted) }