:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07101d;
  color: #edf4ff;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background:
  radial-gradient(circle at 15% -10%, #1e4d75 0, transparent 36rem),
  radial-gradient(circle at 100% 100%, #322065 0, transparent 34rem), #07101d; }
a { color: inherit; }

.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; }
.auth-card { width: min(100%, 27rem); padding: 2.75rem; border: 1px solid #ffffff1c;
  border-radius: 1.5rem; background: #0d1929db; box-shadow: 0 2rem 6rem #0009;
  backdrop-filter: blur(18px); }
.brand-mark { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.5rem;
  border-radius: .9rem; background: linear-gradient(135deg, #65c7ff, #7d61ff);
  font-size: 1.35rem; font-weight: 800; box-shadow: 0 .75rem 2rem #3c75ff55; }
.eyebrow { margin: 0 0 .55rem; color: #7dcaff; font-size: .74rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.05; letter-spacing: -.035em; }
.auth-card h1 { font-size: 2.25rem; }
.subtitle, .hero > p:last-child { color: #9badc3; line-height: 1.6; }
.stack { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
label { display: grid; gap: .5rem; color: #c7d4e4; font-size: .9rem; font-weight: 650; }
input { width: 100%; border: 1px solid #ffffff24; border-radius: .75rem; padding: .85rem 1rem;
  background: #06101d; color: white; font: inherit; outline: none; }
input:focus { border-color: #68bcff; box-shadow: 0 0 0 .2rem #68bcff24; }
button { border: 0; border-radius: .75rem; padding: .9rem 1.1rem; background: #65bfff;
  color: #04101d; font: inherit; font-weight: 800; cursor: pointer; }
button:hover { background: #8ccfff; }
button:disabled { opacity: .45; cursor: not-allowed; }
.secondary { padding: .65rem 1rem; border: 1px solid #ffffff22; background: #ffffff0d; color: #eaf4ff; }
.alert, .notice { margin-top: 1.25rem; padding: .8rem 1rem; border-radius: .7rem; font-size: .9rem; line-height: 1.45; }
.alert { border: 1px solid #ff6b7c55; background: #7a1e2b35; color: #ffbdc5; }
.notice { border: 1px solid #e7bb5555; background: #6a4a1235; color: #f5d996; }
.security-note { margin: 1.5rem 0 0; color: #7f93aa; font-size: .78rem; text-align: center; }
.status-dot { display: inline-block; width: .5rem; height: .5rem; margin-right: .35rem;
  border-radius: 50%; background: #55db8a; box-shadow: 0 0 .7rem #55db8a; }

.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 5vw, 5rem); border-bottom: 1px solid #ffffff14;
  background: #07101de8; backdrop-filter: blur(16px); }
.brand { text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
.brand span { color: #6fbfff; }
.header-actions { display: flex; align-items: center; gap: .8rem; }
.user-chip { padding: .55rem .8rem; border: 1px solid #ffffff18; border-radius: 2rem; color: #aabbd0;
  background: #ffffff08; font-size: .82rem; }
.dashboard { width: min(86rem, calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(3rem, 8vw, 6rem) 0 2rem; }
.hero { max-width: 46rem; }
.hero > p:last-child { max-width: 38rem; font-size: 1.05rem; }
.dashboard-hero { display: flex; align-items: end; justify-content: space-between; max-width: none; gap: 2rem; }
.dashboard-hero > div:first-child { max-width: 49rem; }
.live-badge { flex: none; padding: .65rem 1rem; border: 1px solid #55db8a38; border-radius: 2rem;
  color: #90eeb4; background: #153a283d; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; margin-top: 3rem; }
.stat-card { min-width: 0; padding: 1.2rem; border: 1px solid #ffffff14; border-radius: 1rem;
  background: linear-gradient(145deg, #ffffff0c, #ffffff05); }
.stat-card strong, .stat-card small, .stat-label { display: block; }
.stat-label { margin-bottom: .75rem; color: #70869f; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.stat-card strong { overflow: hidden; color: #eef6ff; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.stat-card small { overflow: hidden; margin-top: .35rem; color: #8194aa; text-overflow: ellipsis; white-space: nowrap; }
.architecture { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: .85rem;
  padding: 1rem; border: 1px solid #ffffff10; border-radius: 1rem; color: #9cafc4; background: #050d18a6; font-size: .82rem; }
.architecture b { color: #44617e; }
.content-section { margin-top: 4.5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.25rem; }
.section-heading h2 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.25rem); letter-spacing: -.025em; }
.section-heading > p { max-width: 34rem; margin: 0; color: #8194aa; line-height: 1.55; text-align: right; }
code { color: #90cbff; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
.table-wrap { overflow-x: auto; border: 1px solid #ffffff14; border-radius: 1rem; background: #081321bf; }
.roadmap-table { width: 100%; min-width: 70rem; border-collapse: collapse; font-size: .84rem; }
.roadmap-table th { padding: .85rem 1rem; color: #71879f; background: #ffffff06; font-size: .68rem;
  letter-spacing: .1em; text-align: left; text-transform: uppercase; }
.roadmap-table td { padding: 1rem; border-top: 1px solid #ffffff0e; color: #9badc0; line-height: 1.45; vertical-align: top; }
.roadmap-table td strong { color: #e6f1ff; }
.roadmap-table tr.planned { background: #6f55ff08; }
.commit { display: inline-block; padding: .3rem .5rem; border-radius: .4rem; background: #4ba9ff18; color: #83c9ff; }
.commit.next { background: #875fff24; color: #bda9ff; font-weight: 800; }
.date-cell { white-space: nowrap; }
.project-section { display: grid; grid-template-columns: minmax(17rem, .7fr) minmax(25rem, 1.3fr); gap: 2rem; align-items: start; }
.project-section .section-heading { display: block; margin: 0; }
.project-section .section-heading > p { margin-top: 1rem; text-align: left; }
.file-tree { overflow: auto; max-height: 36rem; margin: 0; padding: 1.4rem; border: 1px solid #ffffff14;
  border-radius: 1rem; background: #040b14db; color: #a8bdd3; font: .82rem/1.65 "SFMono-Regular", Consolas, monospace; }
.file-tree span { display: block; }
.dashboard-footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid #ffffff10; color: #657b93; font-size: .78rem; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 3rem; }
.panel { min-height: 14rem; padding: 1.5rem; border: 1px solid #ffffff17; border-radius: 1.15rem;
  background: linear-gradient(145deg, #ffffff0e, #ffffff06); box-shadow: 0 1rem 3rem #0003; }
.panel h2 { margin: 1.25rem 0 .6rem; color: #aebed1; font-size: .9rem; }
.panel p { color: #8194aa; }
.panel .metric { margin: 0; color: #f1f7ff; font-size: 1.45rem; font-weight: 800; }
.panel-icon { width: .75rem; height: .75rem; border-radius: 50%; }
.green { background: #4add8a; box-shadow: 0 0 1rem #4add8a; }
.blue { background: #51bfff; box-shadow: 0 0 1rem #51bfff; }
.violet { background: #9c78ff; box-shadow: 0 0 1rem #9c78ff; }

@media (max-width: 760px) {
  .auth-card { padding: 2rem 1.4rem; }
  .grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .dashboard-hero, .section-heading { display: block; }
  .live-badge { display: inline-block; margin-top: 1rem; }
  .section-heading > p { margin-top: .8rem; text-align: left; }
  .architecture { align-items: stretch; flex-direction: column; }
  .architecture b { transform: rotate(90deg); text-align: center; }
  .project-section { display: block; }
  .file-tree { margin-top: 1.5rem; }
  .user-chip { display: none; }
}