:root {
  --bg1: #0a1828;
  --bg2: #14324d;
  --aero: #a5d9ff;
  --cyan: #65d8ff;
  --cyan2: #42a9d6;
  --panel: #d7e9f8;
  --panel2: #eff8ff;
  --chrome: #c7d8e7;
  --dark: #0f1924;
  --text: #102030;
  --muted: #4b6172;
  --link: #0059b2;
  --good: #0a7f3b;
  --warn: #a36700;
  --bad: #9e2424;
  --line: #9fb7c9;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  color: var(--text);
  font-family: "Segoe UI", Tahoma, Verdana, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  background:
    radial-gradient(circle at 20% 0%, rgba(101,216,255,.28), transparent 35%),
    linear-gradient(180deg, var(--bg2), var(--bg1));
}
a { color: var(--link); }
a:hover { text-decoration: none; }
.desktop-bg { padding: 10px; }
.page-shell {
  width: min(1260px, calc(100vw - 20px));
  margin: 0 auto;
  background: rgba(236,247,255,.85);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 8px;
  box-shadow: 0 18px 55px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.75);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.title-bar {
  background: linear-gradient(180deg, #244d72, #10273b 55%, #0b1b28);
  color: #fff;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #00101e;
}
.title-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.title-left img { width: 22px; height: 22px; }
.title-left strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .2px; }
.window-controls { display:flex; gap:5px; }
.window-controls span { width: 36px; height: 18px; display:block; border:1px solid rgba(255,255,255,.45); background: linear-gradient(#d9efff,#245d86); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.window-controls span:nth-child(3) { background: linear-gradient(#ffd4c8,#b22d1c); }
.top-strip { padding: 8px 10px; display:flex; flex-wrap:wrap; gap:8px; background: linear-gradient(180deg,#f7fbff,#c3d9ec); border-bottom:1px solid var(--line); }
.pill, .win-btn, button.fake {
  display:inline-flex; align-items:center; gap:7px; padding:7px 11px;
  background: linear-gradient(180deg,#fff,#d9edff 48%,#bfd9ef 52%,#e8f6ff);
  border:1px solid #7198b8; border-radius:6px; color:#102030; text-decoration:none;
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0,.15); font-weight:600;
}
.pill img, .win-btn img { width:16px; height:16px; }
.pill:hover, .win-btn:hover { filter: brightness(1.06); }
.marquee-strip { background: linear-gradient(180deg,#fff7cf,#ffe89b); border-top:1px solid #fff; border-bottom:1px solid #caa947; padding:4px 8px; color:#4d3600; font-size:13px; }
.layout { display:grid; grid-template-columns: 260px minmax(0,1fr); gap: 12px; padding: 12px; }
.sidebar .menu-box, .content .box, .hero {
  background: rgba(250,253,255,.92); border:1px solid var(--line); border-radius:8px; margin-bottom:12px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgba(0,0,0,.08);
  overflow: hidden;
}
.box-title { background: linear-gradient(180deg,#e9f7ff,#c4e0f7); border-bottom:1px solid var(--line); padding:8px 10px; font-weight:700; color:#12344f; }
.box-body { padding: 11px; }
.box-body.alt { background: rgba(255,255,255,.5); }
.nav-links, .quick-list, .stat-list, .link-list { list-style:none; padding:0; margin:0; }
.nav-links li + li, .quick-list li + li, .stat-list li + li, .link-list li + li { margin-top:6px; }
.nav-links a, .quick-list a, .link-list a { display:flex; align-items:center; gap:8px; padding:7px 8px; border:1px solid transparent; border-radius:5px; color:#102030; text-decoration:none; }
.nav-links a:hover, .quick-list a:hover, .link-list a:hover { background:#fff; border-color:#a5c2da; }
.nav-links img, .quick-list img, .link-list img, .icon-inline { width:16px; height:16px; flex:0 0 16px; }
.hero { padding:18px; background: linear-gradient(180deg,rgba(255,255,255,.96),rgba(216,238,255,.92)); }
.hero h1 { margin:0 0 7px; font-size:32px; color:#0a3c5c; text-shadow:0 1px 0 #fff; }
.hero .subtitle { color:var(--muted); font-size:16px; max-width:900px; }
.badge-row { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }
.badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; background:#e6f6ff; border:1px solid #9bc8e6; font-size:12px; font-weight:700; color:#17435f; }
.button-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.content-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:12px; }
.content-grid.single { grid-template-columns:1fr; }
.feature-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.feature-card, .info-card, .callout, .screenshot-slot {
  background:#fff; border:1px solid #b5cbdc; border-radius:7px; padding:11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.feature-card h3, .info-card h3, .section-title { margin:0 0 7px; color:#113a57; }
.feature-card img, .info-card img { width:20px; height:20px; vertical-align:middle; margin-right:6px; }
.callout { margin: 10px 0; }
.callout.good { border-color:#86c99f; background:#effff4; }
.callout.warn { border-color:#e0bf78; background:#fff8e7; }
.callout.info { border-color:#91c7e8; background:#f1faff; }
.callout.bad { border-color:#df9b9b; background:#fff1f1; }
.table-wrap { overflow-x:auto; }
table.retro { width:100%; border-collapse:collapse; background:#fff; }
table.retro th { text-align:left; background:linear-gradient(#e8f5ff,#c5def2); color:#12344f; }
table.retro th, table.retro td { border:1px solid #b8cedf; padding:8px; vertical-align:top; }
.kv { display:grid; grid-template-columns: 170px minmax(0,1fr); gap:0; border:1px solid #b8cedf; background:#fff; }
.kv div { padding:7px 8px; border-bottom:1px solid #d6e5ef; }
.kv div:nth-child(odd) { font-weight:700; background:#f0f8ff; border-right:1px solid #d6e5ef; }
.kv div:nth-last-child(-n+2) { border-bottom:0; }
.code, code { font-family: Consolas, "Courier New", monospace; background:#eef6fb; border:1px solid #bdd5e6; padding:1px 4px; border-radius:4px; }
pre { overflow:auto; background:#07131f; color:#d8f4ff; padding:12px; border-radius:7px; border:1px solid #225b83; }
.list-tight { margin-top:0; }
.list-tight li { margin-bottom:5px; }
.small { font-size:12px; }
.muted { color:var(--muted); }
.footer { width:min(1260px, calc(100vw - 20px)); margin:8px auto 0; color:#d9edff; text-align:center; font-size:12px; }
.screenshot-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:10px; }
.screenshot-slot { min-height:145px; display:flex; align-items:center; justify-content:center; text-align:center; color:#4b6172; background:repeating-linear-gradient(45deg,#ffffff,#ffffff 12px,#f2f8fc 12px,#f2f8fc 24px); }
@media (max-width: 860px) { .layout { grid-template-columns: 1fr; } .content-grid { grid-template-columns: 1fr; } .sidebar { order:2; } .hero h1 { font-size:26px; } }