:root {
  color-scheme: light;
  --ink:#132231; --text:#26394a; --muted:#53677a; --surface:#fff; --bg:#f1f4f7;
  --line:#dbe3e9; --sidebar:#101a25; --nav:#b7c4d0; --amber:#ffbe54;
  --accent:#8a4b00; --green:#1e684e; --shadow:0 2px 4px #13223108,0 10px 25px #13223105;
  font:15px/1.5 "Segoe UI",system-ui,sans-serif;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:var(--bg); }
a { color:inherit; text-decoration:none; }
button,input,select,textarea { font:inherit; }
button,summary,select { cursor:pointer; }
:focus-visible { outline:3px solid #2265a2; outline-offset:3px; }
svg { width:1.25rem; height:1.25rem; flex:none; }
h1,h2,h3,p { margin:0; }
h1,h2,h3,strong { color:var(--ink); }
h1 { font-size:clamp(1.85rem,4vw,2.75rem); line-height:1.1; letter-spacing:-.045em; }
h2 { font-size:1.16rem; letter-spacing:-.025em; }
h3 { font-size:1.02rem; }
p,small,dd,pre { overflow-wrap:anywhere; }
p + p { margin-top:.6rem; }
small { color:var(--muted); }
.skip,.visually-hidden { position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden; }
.skip:focus { position:fixed; top:1rem; left:1rem; z-index:20; clip-path:none; width:auto; height:auto; background:white; padding:1rem; }
.application { min-height:100vh; }
.sidebar { position:fixed; z-index:4; inset:0 auto 0 0; width:248px; display:flex; flex-direction:column; background:var(--sidebar); color:var(--nav); }
.brand { display:flex; align-items:center; gap:12px; color:white; font-weight:750; letter-spacing:-.025em; font-size:1.13rem; line-height:1.1; }
.sidebar .brand { padding:25px 21px 28px; }
.brand small { display:block; color:#9eacba; margin-top:5px; font-size:.58rem; font-weight:700; letter-spacing:.13em; }
.brand-mark { display:grid; grid-auto-flow:column; align-items:center; justify-content:center; width:42px; height:42px; border-radius:10px; background:var(--amber); color:#101a25; font-size:.87rem; font-weight:900; letter-spacing:-.12em; padding-right:2px; flex:none; }
.brand-mark span { font-size:.74rem; margin:0 1px; }
.sidebar nav { overflow:auto; flex:1; padding:0 12px 12px; scrollbar-width:thin; }
.nav-label { padding:9px 11px 6px; color:#95a5b4; font-size:.68rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.project-label { margin-top:18px; border-top:1px solid #293744; padding-top:16px; }
.nav-item { min-height:42px; display:flex; align-items:center; gap:11px; border-radius:8px; padding:8px 11px; margin:3px 0; font-size:.92rem; }
.nav-item:hover { background:#233342; color:white; }
.nav-item.selected { background:#304252; color:#fff; box-shadow:inset 3px 0 var(--amber); }
.nav-item.selected svg { color:var(--amber); }
.sidebar-footer { border-top:1px solid #2a3947; display:flex; align-items:center; padding:15px; gap:10px; }
.sidebar-footer strong { color:#fff; display:block; font-size:.86rem; }
.sidebar-footer small { color:#a9b8c7; display:block; }
.sidebar-footer form { margin-left:auto; }
.avatar { width:37px; height:37px; flex:none; border-radius:50%; background:#2c4253; display:grid; place-items:center; color:#fff; font-weight:700; }
.frame { margin-left:248px; min-width:0; }
.topbar { min-height:67px; position:sticky; top:0; z-index:3; background:#fff; border-bottom:1px solid var(--line); padding:10px 30px; display:flex; align-items:center; gap:1rem; }
.breadcrumbs { display:flex; align-items:center; gap:.55rem; color:var(--muted); font-size:.87rem; min-width:0; }
.breadcrumbs span { color:var(--ink); font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.breadcrumbs svg { width:.85rem; }
.switcher { margin-left:auto; max-width:240px; min-width:0; }
.switcher select { padding:.45rem .7rem; min-height:38px; }
.connection { display:flex; align-items:center; gap:.4rem; color:#365545; font-weight:650; font-size:.82rem; }
.connection i,.eyebrow i { width:7px; height:7px; border-radius:50%; background:#3fa77a; display:inline-block; }
.connection.offline { color:#8a4b00; }
.connection.offline i { background:#be7c30; }
.icon-button { border:0; border-radius:8px; display:grid; place-items:center; min-width:40px; min-height:40px; color:inherit; background:transparent; }
.icon-button:hover { background:#8095a42b; }
.mobile-menu { display:none; }
main { max-width:1540px; margin:0 auto; padding:24px 30px 48px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; margin:8px 0 22px; }
.page-heading p { color:var(--muted); margin-top:.55rem; }
.actions { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; }
.actions:empty { display:none; }
.button { min-height:41px; display:inline-flex; align-items:center; justify-content:center; gap:.48rem; padding:.5rem .9rem; border:1px solid transparent; border-radius:8px; font-weight:700; line-height:1.3; font-size:.88rem; text-align:center; }
.primary { background:var(--amber); color:#19212a; border-color:#e7a642; }
.primary:hover { background:#ffd18b; }
.secondary { background:#fff; color:var(--ink); border-color:#c6d1db; }
.secondary:hover,.subtle:hover { background:#eaf0f5; }
.subtle { color:#245981; background:transparent; padding:.35rem .55rem; }
.hero { position:relative; isolation:isolate; overflow:hidden; display:flex; min-height:252px; align-items:center; padding:30px 36px; border-radius:15px; background:#192c3b; color:#d6e0e9; box-shadow:var(--shadow); }
.hero-copy { position:relative; z-index:1; max-width:68%; }
.hero h2 { color:#fff; font-size:clamp(1.85rem,4.2vw,3.2rem); line-height:1.08; letter-spacing:-.055em; margin:.55rem 0; }
.hero p { display:flex; align-items:center; gap:.45rem; }
.hero .button,.hero .pill { margin-top:1.15rem; }
.eyebrow { color:#a16914; font-size:.72rem; font-weight:800; letter-spacing:.15em; }
.hero .eyebrow { color:var(--amber); }
.eyebrow i { background:var(--amber); margin-right:.2rem; }
.blueprint { position:absolute; inset:0 0 0 35%; opacity:.8; background:url('/blueprint.svg') right center/auto 100% no-repeat; pointer-events:none; mask-image:linear-gradient(to right,transparent 4%,black 50%); }
.demo-note { display:inline-flex; align-items:center; flex-wrap:wrap; gap:.55rem; padding:.28rem .65rem; border-radius:7px; background:#fff4dc; border:1px solid #f2d7a3; color:#7d4b09; font-size:.68rem; font-weight:850; letter-spacing:.075em; }
.demo-note span { font-size:.76rem; font-weight:600; letter-spacing:0; }
.stat-grid,.project-grid,.module-grid,.photo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,195px),1fr)); gap:14px; margin:16px 0; }
.stat { background:white; border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:var(--shadow); min-width:0; }
.stat-top { display:flex; gap:.65rem; align-items:center; color:var(--muted); font-size:.86rem; font-weight:650; }
.stat-top svg,.module-icon { display:grid; place-items:center; box-sizing:content-box; width:20px; height:20px; padding:7px; border-radius:8px; background:#fff2dc; color:#85500a; }
.stat strong { display:block; font-size:1.65rem; letter-spacing:-.05em; margin-top:.35rem; }
.stat small { display:block; }
.project-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr)); }
.project-card,.module-tile { display:block; background:#fff; border:1px solid var(--line); border-radius:11px; padding:15px; }
.project-card:hover,.module-tile:hover { border-color:#7094ad; background:#fbfdff; }
.project-card-top,.project-card-bottom { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.project-card-top { margin-bottom:13px; }
.project-card small { font-weight:750; font-size:.74rem; letter-spacing:.08em; }
.project-card h3 { font-size:1.25rem; }
.project-card p,.project-card-bottom { display:flex; align-items:center; gap:.35rem; color:var(--muted); font-size:.84rem; margin-top:9px; }
.project-card p svg,.project-card-bottom svg { width:.96rem; }
.project-card-bottom { justify-content:flex-start; border-top:1px solid var(--line); padding-top:10px; }
.project-card-bottom svg:last-child { margin-left:auto; }
.pill { display:inline-block; vertical-align:middle; width:fit-content; padding:.23rem .62rem; margin:1px; border-radius:100px; background:#e8eef4; color:#35516a; font-size:.77rem; line-height:1.3; font-weight:750; }
.pill.green { background:#dff3e7; color:#166045; }
.pill.red { background:#fbe4e3; color:#852e29; }
.pill.amber { background:#fff1d4; color:#7a4507; }
.panel { padding:17px 19px; min-width:0; margin:15px 0; background:var(--surface); border:1px solid var(--line); border-radius:13px; box-shadow:var(--shadow); }
.panel-header { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:.75rem; }
.panel .project-grid { margin:0; }
.panel > p { margin-bottom:12px; }
.module-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); }
.module-tile { display:flex; align-items:center; gap:10px; }
.module-tile div { flex:1; }
.module-tile strong,.module-tile small { display:block; }
.module-tile > svg { width:.9rem; color:#627b90; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr)); gap:.8rem 1.2rem; }
.facts dt { font-size:.77rem; font-weight:750; color:var(--muted); }
.facts dd { margin:0; }
.split { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:14px; }
.split>.panel { margin:0; }
.form { display:grid; gap:13px; justify-items:start; margin-top:10px; }
.form > label,.fields { width:100%; }
.fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr)); gap:12px; }
label { display:grid; gap:5px; color:var(--ink); font-size:.86rem; font-weight:680; min-width:0; }
input,textarea,select { width:100%; min-width:0; min-height:42px; border:1px solid #b9c8d4; border-radius:7px; background:white; padding:.5rem .65rem; color:var(--ink); }
input[type=file] { padding:.55rem; }
input[type=checkbox] { width:20px; height:20px; min-height:0; accent-color:#8a4b00; }
textarea { resize:vertical; }
.checkbox { display:flex; align-items:flex-start; gap:.5rem; }
.inline-form,.filter { display:flex; flex-wrap:wrap; align-items:end; gap:8px; margin:.3rem 0; }
.filter { margin-bottom:14px; }
.filter label { min-width:min(100%,135px); max-width:220px; }
.table-wrap { overflow:auto; }
table { border-collapse:collapse; width:100%; font-size:.89rem; text-align:left; }
th,td { padding:.66rem .55rem; border-bottom:1px solid var(--line); vertical-align:top; min-width:75px; }
th { background:#f4f7fa; color:#486175; font-size:.77rem; font-weight:750; }
tr:last-child td { border-bottom:0; }
.text-link { color:#145984; text-decoration:underline; text-underline-offset:3px; font-weight:700; }
.empty { border:1px dashed #bdcbd6; border-radius:9px; color:var(--muted); padding:18px 14px; background:#f9fbfd; }
details { margin:.45rem 0; }
summary { font-weight:700; color:#245981; padding:.35rem 0; }
.detail-body { padding:.45rem 0; min-width:min(100%,220px); }
.entry,.message { border-top:1px solid var(--line); padding:.85rem 0; }
.entry:first-of-type,.message:first-of-type { border-top:0; }
.pre { white-space:pre-wrap; overflow-wrap:anywhere; }
pre { white-space:pre-wrap; max-width:56ch; overflow-wrap:anywhere; }
.muted { color:var(--muted); }
.timer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1rem; }
.timer strong { display:block; color:#173d52; font-size:2rem; font-variant-numeric:tabular-nums; }
.live { border-color:#ecb858; }
.photo-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr)); }
.photo-card { border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.photo-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#dde8ef; }
.photo-card>div { padding:12px; }
.photo-card h3 { margin:.4rem 0; }
.photo-card .actions { margin-top:.5rem; }
.messages { max-height:57vh; overflow:auto; padding:0 .5rem; }
.message header { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:space-between; }
.checksum { font: .78rem/1.4 ui-monospace,monospace; overflow-wrap:anywhere; background:#eef2f6; padding:.55rem; border-radius:5px; }
.notice { background:#e0f3e8; color:#1d523d; border:1px solid #b6ddc7; border-radius:8px; margin:12px 0; padding:12px; }
.notice.error { background:#ffebe8; color:#852e29; border-color:#edbab5; }
.auth { min-height:100vh; background:linear-gradient(155deg,#132536 0,#1c3244 42%,#f0f4f8 42%,#f0f4f8 100%); }
.auth .frame { margin:0; }
.auth main { max-width:540px; padding-top:clamp(26px,7vh,75px); }
.auth .brand { margin-bottom:32px; }
.auth-heading h1,.auth .page-heading h1 { color:white; }
.auth-heading p,.auth .page-heading p { color:#d3deea; margin-top:12px; }
.auth-heading .eyebrow { color:var(--amber); margin-bottom:10px; }
.auth .panel { margin-top:25px; }
@media(max-width:950px) {
  .sidebar { width:213px; }
  .frame { margin-left:213px; }
  main,.topbar { padding-left:20px; padding-right:20px; }
  .hero { padding:24px; }
}
@media(max-width:720px) {
  .frame { margin:0; }
  .sidebar { visibility:hidden; transform:translateX(-100%); width:min(85vw,275px); box-shadow:12px 0 28px #0f1d3360; transition:transform .16s ease; }
  .sidebar.open { visibility:visible; transform:translateX(0); top:57px; }
  .topbar { min-height:57px; gap:.45rem; padding:7px 12px; }
  .mobile-menu { display:grid; }
  .breadcrumbs { flex:1; }
  .breadcrumbs a,.breadcrumbs svg { display:none; }
  .switcher { max-width:126px; }
  .connection { font-size:.73rem; }
  main { padding:14px 13px 35px; }
  .hero { min-height:204px; padding:20px; }
  .hero-copy { max-width:100%; }
  .blueprint { inset:0 0 0 10%; opacity:.36; }
  .page-heading { gap:10px; margin-bottom:16px; }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .stat { padding:11px; }
  .stat-top { gap:.4rem; font-size:.78rem; }
  .stat-top svg { width:15px; height:15px; padding:5px; }
  .stat strong { font-size:1.38rem; }
  .panel { padding:14px; }
  .button,.nav-item { min-height:44px; }
  input,select,textarea { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }

.sources { width:100%; border:1px solid var(--line); border-radius:7px; padding:12px; }
.sources legend { font-weight:700; }
.sources label + label { margin-top:8px; }