*{box-sizing:border-box}
:root{--bg:#06090e;--side:#080c12;--panel:#0b121b;--panel2:#0e1722;--line:#26394e;--cyan:#36d9ff;--text:#edf5ff;--muted:#7e91a7;--green:#58dda0;--amber:#f0bf62}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 72% 0,#17284d,transparent 32%),var(--bg);color:var(--text);font:14px "Segoe UI",Arial,sans-serif}
a{color:inherit;text-decoration:none}.app{display:grid;grid-template-columns:225px minmax(0,1fr);min-height:100vh}
aside{padding:24px 16px;background:#080c12e8;border-right:1px solid #26364b}.brand{display:block;font-size:19px;font-weight:900;letter-spacing:2px}.brand b,h1 b{color:var(--cyan)}
.sub{font-size:10px;color:#7b8aa0;letter-spacing:2px;margin:4px 0 27px}.nav{display:block;padding:11px;color:#a8b6c9;border-radius:8px;margin:2px 0}.nav:hover{background:#0e1723;color:#fff}.nav.on{background:#142033;color:#fff}
main{padding:25px 28px;width:100%;max-width:1500px}.top{display:flex;justify-content:space-between;align-items:center;gap:16px}.top h1{margin:0;font-size:30px}.eyebrow{color:#7d91a8;font-size:10px;letter-spacing:1.6px;margin-top:6px}
.system{border:1px solid #293d56;border-radius:20px;padding:8px 12px;font-size:10px;white-space:nowrap}.system i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#4eea87;margin-right:6px;box-shadow:0 0 8px #4eea8777}
.intro{margin:20px 0 25px;padding:18px 20px;border:1px solid #293e57;border-radius:15px;background:linear-gradient(145deg,#111a27,#090e16)}.intro b{font-size:15px}.intro p{color:#8599ae;margin:7px 0 0;line-height:1.5}
.group{margin:27px 0}.grouphead{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px}.grouphead h2{margin:0;font-size:11px;letter-spacing:1.6px;color:#dcecff}.grouphead small{color:#63778d;font-size:9px}
.grid{display:grid;grid-template-columns:repeat(4,minmax(180px,1fr));gap:10px}.tool{position:relative;min-height:150px;padding:17px;border:1px solid var(--line);border-radius:11px;background:linear-gradient(145deg,#0e1722,#090f17);transition:.15s;overflow:hidden}
.tool[href]:hover{transform:translateY(-2px);border-color:#3c708b;box-shadow:0 10px 30px #0005}.tool.ready{border-color:#31546a}.tool.build{border-style:dashed}.tool.planned{opacity:.7}
.icon{font-size:29px;margin-bottom:16px}.tool h3{font-size:13px;margin:0 0 6px}.tool p{margin:0;color:#71869c;font-size:10px;line-height:1.45;max-width:95%}.state{position:absolute;right:10px;top:10px;border:1px solid #31465b;border-radius:20px;padding:4px 7px;font-size:7px;font-weight:800;letter-spacing:.8px;color:#8094a8}.ready .state{color:var(--green);border-color:#285943}.build .state{color:var(--amber);border-color:#67522c}.tool .arrow{position:absolute;right:14px;bottom:12px;color:#47677d}.foot{margin:30px 0 8px;padding-top:14px;border-top:1px solid #1d2c3b;color:#607489;font-size:9px}
@media(max-width:1200px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.app{display:block}aside{display:none}main{padding:14px}.top{align-items:flex-start}.top h1{font-size:24px}.grid{grid-template-columns:1fr}.system{font-size:8px}}