:root { color-scheme: dark; --bg: #0a0e17; --panel: #121a2a; --border: #273448; --text: #e8edf5; --muted: #91a0b5; --accent: #67b0ff; --green: #62d6a1; --orange: #ffbe68; --red: #ff868f; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: radial-gradient(ellipse 85% 45% at 85% -15%, #173457, transparent),var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif; line-height: 1.6; }
.wrap { width: min(1050px, 100% - 36px); margin: 0 auto; padding: 42px 0 72px; }
h1,h2,p { margin: 0; } h1 { font-size: clamp(23px,4vw,32px); letter-spacing: -.7px; } h2 { font-size: 18px; margin-bottom: 8px; } .eyebrow { color: var(--accent); direction: ltr; font-size: 11px; font-weight: 800; letter-spacing: 2.2px; text-align: right; margin-bottom: 6px; }
.top { display: flex; gap: 18px; align-items: center; margin-bottom: 26px; } .mark { flex: 0 0 57px; height: 57px; border-radius: 16px; display:flex; align-items:center; justify-content:center; background: linear-gradient(145deg, #3d75dc, #50b5f4); color:white; font-size:32px; font-weight:900; direction:ltr; box-shadow: 0 12px 35px #086bc432; } .mark span { color:#8afbe5; }.identity { flex: 1; }.muted,.subtle { color: var(--muted); font-size: 13px; }.pill { border:1px solid #236f56; background:#102c2c; color:#8ae5bc; padding:7px 11px; font-size:10px; font-weight:800; border-radius:30px; letter-spacing:1px; white-space:nowrap; direction:ltr; }
.panel { border: 1px solid var(--border); border-radius: 17px; background: linear-gradient(145deg, #142034, var(--panel)); box-shadow: 0 16px 35px #00000016; padding: 23px; margin-bottom: 20px; }
.intro { background: linear-gradient(110deg,#14273e,#111b2a); } .intro h2 { font-size:20px; }.login { max-width:550px; margin:26px auto; } .login form { display:flex; flex-direction:column; gap:10px; margin-top:20px; } label { font-size:13px; font-weight:700; } input { padding:12px 14px; border:1px solid #3a4c63; border-radius:10px; font-size:15px; background:#08111d; color:var(--text); direction:ltr; outline:none; } input:focus { border-color:var(--accent); box-shadow:0 0 0 3px #5a9df91e; } button { cursor:pointer; padding:12px 17px; border-radius:10px; border:1px solid #448adc; background:#3487ec; color:white; font-size:13px; font-weight:800; font-family:inherit; } button:hover:not(:disabled) { filter:brightness(1.12); } button:disabled { cursor:wait; opacity:.6; } .secondary,.ghost { background:#1c2c43; border-color:#39506c; }.ghost { background:transparent; }.error { color:var(--red); margin-top:12px; font-size:13px; min-height:18px; }
.actions { display:flex;justify-content:flex-end;align-items:center;gap:13px; margin-bottom:18px; }.stats { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}.stats .panel { margin-bottom:20px; }.stat p { color:var(--muted); font-size:13px; }.stat strong { display:block; font-size:25px; line-height:1.5; direction:ltr; text-align:right;}.stat small { color:var(--muted); font-size:12px; }.stack > * + * { margin-top: 16px; } .section-head { display:flex; align-items:start; justify-content:space-between;gap:20px;}.toolbar { display:flex; gap:10px; flex-wrap:wrap; } .status { font-size:12px; font-weight:800; border:1px solid #45516a; border-radius:99px; padding:5px 11px; white-space:nowrap; }.status.ok { color:var(--green); border-color:#26674d; }.status.fail { color:var(--red); border-color:#643846; }.status.wait { color:var(--orange); border-color:#645134; }.checkgrid { display:grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap:12px; }.check { padding:13px; background:#0a1422; border:1px solid var(--border); border-radius:12px; }.check strong { display:block; font-size:13px; }.check small { display:block; color:var(--muted); font-size:12px; overflow-wrap:anywhere; margin-top:4px; }.check .yes { color:var(--green); }.check .no { color:var(--red); }pre { direction:ltr; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; background:#080e19; border:1px solid #26344a; border-radius:12px; padding:17px; font-size:12px; line-height:1.65; max-height:600px; overflow:auto; }.steps { padding-right:23px; font-size:13px; color:#c0cbd8; }.steps li {margin-bottom:7px;} code { direction:ltr; unicode-bidi: isolate; background:#273347; border-radius:4px; padding:2px 5px; font-size:12px; }.mini {padding:12px; border:1px dashed #385370; border-radius:10px; font-size:13px; color:var(--muted); overflow-wrap:anywhere;} footer {margin-top:24px; color:var(--muted); text-align:center; font-size:11px; letter-spacing:.4px; direction:ltr;}
@media (max-width:700px) { .wrap {padding-top:24px;} .top {flex-wrap:wrap;}.pill {margin-right:auto;}.stats {grid-template-columns:1fr;gap:0;}.section-head {flex-direction:column;gap:7px;} .toolbar button {width:100%;}.panel {padding:18px;} }