:root { color-scheme: light; --bg:#f6f7f9; --card:#fff; --text:#171717; --muted:#626b78; --border:#d8dde5; --primary:#155dfc; --ok:#157f3b; --warn:#b45309; }
* { box-sizing: border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--bg); color:var(--text); }
header { position:sticky; top:0; z-index:10; border-bottom:1px solid var(--border); background:rgba(255,255,255,.92); backdrop-filter: blur(12px); }
.bar { max-width:1440px; margin:auto; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 24px; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; }
.mark { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#111827; color:white; font-size:14px; }
main { max-width:1440px; margin:auto; padding:24px; display:grid; gap:18px; }
.summary { display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:stretch; }
.panel { background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.panel-head { padding:16px 18px; border-bottom:1px solid var(--border); }
h1,h2,h3,p { margin:0; }
h1 { font-size:24px; letter-spacing:0; }
h2 { font-size:15px; }
p { color:var(--muted); line-height:1.5; }
.metrics { display:grid; grid-template-columns: repeat(3, 1fr); gap:12px; padding:14px; }
.metric { border:1px solid var(--border); border-radius:8px; padding:12px; background:#fafafa; }
.metric span { display:block; color:var(--muted); font-size:12px; }
.metric strong { display:block; margin-top:4px; font-size:20px; }
.layout { display:grid; grid-template-columns:minmax(0,1fr) 430px; gap:18px; }
.component-list { display:grid; gap:10px; padding:14px; }
.component { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:start; border:1px solid var(--border); border-radius:9px; padding:12px; background:#fff; }
.component input { margin-top:3px; width:18px; height:18px; accent-color:var(--primary); }
.component h3 { font-size:15px; }
.meta { margin-top:8px; display:flex; gap:6px; flex-wrap:wrap; }
.badge { border:1px solid var(--border); border-radius:999px; padding:3px 8px; font-size:12px; color:#3f4856; background:#f8fafc; }
.badge.required { color:var(--ok); border-color:#bbf7d0; background:#f0fdf4; }
.badge.warn { color:var(--warn); border-color:#fed7aa; background:#fff7ed; }
button, .link-button { cursor:pointer; border:1px solid var(--border); background:#fff; border-radius:7px; padding:8px 10px; font-weight:600; color:#1f2937; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
button:hover, .link-button:hover { border-color:#9aa7b7; background:#f8fafc; }
.primary { background:var(--primary); color:#fff; border-color:var(--primary); }
.side { display:grid; gap:18px; align-content:start; }
.selection { padding:14px; display:grid; gap:10px; }
.selection-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:14px; border-bottom:1px solid #eef1f5; padding-bottom:8px; }
.selection-row:last-child { border-bottom:0; padding-bottom:0; }
.license-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; padding:14px; }
.license-grid label { display:grid; gap:6px; color:var(--muted); font-size:12px; font-weight:700; }
.license-grid input { width:100%; border:1px solid var(--border); border-radius:8px; padding:9px 10px; color:var(--text); font:inherit; background:#fff; }
.license-grid input:focus { outline:2px solid rgba(21,93,252,.18); border-color:var(--primary); }
.downloads { display:grid; gap:10px; padding:14px; }
.download-row { display:grid; gap:4px; border:1px solid #eef1f5; border-radius:8px; padding:10px; background:#fbfcfd; }
.download-row strong { font-size:13px; }
.download-row span { color:var(--muted); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; overflow-wrap:anywhere; }
pre { margin:0; white-space:pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; line-height:1.5; color:#384252; padding:14px; max-height:460px; overflow:auto; }
.actions { display:flex; gap:8px; flex-wrap:wrap; padding:14px; border-top:1px solid var(--border); }
@media (max-width: 980px) { .summary,.layout,.license-grid { grid-template-columns:1fr; } .bar,main { padding-left:14px; padding-right:14px; } }