:root { --bg:#0d141b; --surface:#14212c; --surface-2:#1a2a37; --line:#263b4b; --text:#f4f8fb; --muted:#9bb2c3; --blue:#36a8ff; --green:#42d19a; --red:#ff6e6a; --shadow:0 18px 50px rgba(0,0,0,.28); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:0; }
button,input { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
.topbar { height:68px; padding:0 max(24px,calc((100vw - 1180px)/2)); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:30px; background:#101a23; }
.brand { display:flex; align-items:center; gap:10px; font-size:18px; white-space:nowrap; }.brand b { color:var(--blue); }.brand-mark { width:28px; height:28px; background:#1c3446; border:1px solid #3b617a; display:grid; place-content:center; gap:3px; padding:5px; border-radius:6px; }.brand-mark i { width:15px; height:3px; background:var(--blue); display:block; }.brand-mark i:nth-child(2){width:11px}.brand-mark i:nth-child(3){width:7px}
.nav { display:flex; gap:24px; color:var(--muted); font-size:14px; }.nav a:hover { color:var(--text); }.account-slot { margin-left:auto; display:flex; gap:10px; align-items:center; }
main { max-width:1180px; margin:auto; padding:0 24px 72px; }.hero { min-height:510px; padding:90px 0 64px; display:grid; grid-template-columns:1.25fr .75fr; gap:54px; align-items:center; border-bottom:1px solid var(--line); }.eyebrow { margin:0 0 9px; color:var(--blue); font-size:12px; font-weight:700; letter-spacing:1.2px; }.hero h1,.section h2 { margin:0; letter-spacing:0; }.hero h1 { font-size:58px; line-height:1.04; max-width:680px; }.lead { color:var(--muted); max-width:610px; font-size:18px; margin:24px 0 30px; }.hero-actions { display:flex; gap:12px; }.button { border:1px solid transparent; min-height:44px; padding:0 18px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; transition:transform .16s ease,background .16s ease,border-color .16s ease; }.button:hover { transform:translateY(-1px); }.primary { background:var(--blue); color:#06131c; }.primary:hover { background:#68bcff; }.ghost { border-color:#456174; color:var(--text); background:transparent; }.wide { width:100%; }
.hero-status { background:var(--surface); border:1px solid var(--line); padding:24px; box-shadow:var(--shadow); }.status-line { padding-bottom:20px; border-bottom:1px solid var(--line); font-weight:700; }.live-dot { display:inline-block; width:9px; height:9px; background:var(--green); border-radius:50%; margin-right:8px; }.metric { display:flex; justify-content:space-between; gap:12px; padding:18px 0 0; }.metric span { color:var(--muted); }.metric b { font-size:14px; }
.section { padding:72px 0; border-bottom:1px solid var(--line); }.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }.section h2 { font-size:32px; }.icon-button,.modal-close { border:0; color:var(--muted); background:transparent; font-size:27px; line-height:1; }.icon-button:hover,.modal-close:hover { color:var(--text); }.notice { padding:14px 16px; margin-bottom:18px; border:1px solid #416177; background:#122330; color:#c2d9e9; }.hidden { display:none!important; }
.projects-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }.project-card { background:var(--surface); border:1px solid var(--line); padding:20px; min-height:205px; display:flex; flex-direction:column; }.project-card:hover { border-color:#4a7792; }.project-meta { color:var(--muted); font-size:13px; display:flex; justify-content:space-between; gap:12px; }.project-card h3 { margin:14px 0 8px; font-size:19px; overflow-wrap:anywhere; }.project-data { margin-top:auto; border-top:1px solid var(--line); padding-top:14px; color:var(--muted); font-size:13px; }.project-data b { color:var(--text); float:right; }.state { font-size:12px; font-weight:700; padding:4px 8px; border-radius:999px; background:#223441; color:#bad2e1; }.state.running { background:#173d35; color:#75e8ba; }.state.error,.state.exited { background:#452a30; color:#ffb5ae; }.empty-state { grid-column:1/-1; text-align:center; padding:48px 20px; border:1px dashed #365268; color:var(--muted); }.empty-icon { color:var(--blue); font-size:35px; }.empty-state h3 { color:var(--text); margin:10px 0 4px; }.text-button { border:0; background:transparent; color:var(--blue); padding:8px; font-weight:700; }
.checkout { display:grid; grid-template-columns:1fr 1.2fr .8fr; gap:14px; align-items:start; }.checkout-panel { background:var(--surface); border:1px solid var(--line); padding:20px; min-height:330px; }.checkout-panel h3 { margin:0 0 16px; font-size:18px; }.choice-grid,.plan-list { display:grid; gap:9px; }.choice,.plan { display:flex; gap:12px; width:100%; text-align:left; border:1px solid var(--line); background:var(--surface-2); color:var(--text); padding:14px; border-radius:5px; }.choice.active,.plan.active { border-color:var(--blue); box-shadow:inset 3px 0 0 var(--blue); }.choice-symbol { color:var(--blue); font-size:21px; }.choice small,.plan small { color:var(--muted); display:block; }.plan { align-items:center; justify-content:space-between; }.plan strong { display:block; }.plan-price { color:var(--blue); white-space:nowrap; font-weight:700; font-size:13px; }.checkout-summary label { display:grid; gap:7px; color:var(--muted); font-size:13px; }.checkout-summary input[type=text],.checkout-summary input:not([type]) { width:100%; }.checkout-summary input { color:var(--text); background:#0f1b24; border:1px solid #334d60; border-radius:5px; padding:11px; outline:none; }.checkout-summary input:focus { border-color:var(--blue); }.periods { display:grid; grid-template-columns:1fr; gap:7px; margin:18px 0; }.periods button { color:var(--text); background:var(--surface-2); border:1px solid var(--line); padding:10px; text-align:left; border-radius:5px; }.periods button.active { background:#16354c; border-color:var(--blue); }.terms { grid-template-columns:auto 1fr; align-items:start; margin:12px 0 18px; }.terms input { margin-top:3px; }.checkout-total { display:flex; justify-content:space-between; padding:16px 0; margin-top:4px; border-top:1px solid var(--line); }.checkout-total span { color:var(--muted); }.checkout-total b { color:var(--blue); font-size:19px; }.small-note { color:var(--muted); font-size:12px; margin:12px 0 0; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }.features span { color:var(--blue); font-size:13px; font-weight:700; }.features h3 { margin:8px 0; }.features p { color:var(--muted); margin:0; }.modal { position:fixed; z-index:20; inset:0; display:grid; place-items:center; background:rgba(3,8,12,.7); padding:20px; }.modal-surface { position:relative; width:min(100%,580px); max-height:min(88vh,750px); overflow:auto; background:#111e28; border:1px solid #365268; box-shadow:var(--shadow); padding:30px; }.project-modal-surface { width:min(100%,860px); }.modal-close { position:absolute; right:16px; top:14px; }.telegram-login { min-height:42px; display:flex; align-items:center; }.or { display:flex; align-items:center; gap:10px; color:var(--muted); margin:18px 0; font-size:12px; }.or:before,.or:after { content:""; height:1px; background:var(--line); flex:1; }.auth-tabs { display:flex; border-bottom:1px solid var(--line); margin-bottom:18px; }.auth-tabs button { border:0; background:none; color:var(--muted); padding:9px 0; margin-right:20px; }.auth-tabs button.active { color:var(--text); box-shadow:inset 0 -2px var(--blue); }.auth-form { display:grid; gap:14px; }.auth-form label { display:grid; gap:6px; color:var(--muted); font-size:13px; }.auth-form input { border:1px solid #365268; background:#0d171f; border-radius:5px; color:var(--text); padding:11px; }.form-message { min-height:20px; color:var(--muted); font-size:13px; }.form-message.error { color:#ffaaa6; }.project-detail-header { padding-right:40px; }.project-detail-header h2 { margin:0 0 6px; overflow-wrap:anywhere; }.runtime-grid { display:grid; grid-template-columns:repeat(4,1fr); margin:22px 0; border:1px solid var(--line); }.runtime-grid div { padding:12px; border-right:1px solid var(--line); }.runtime-grid div:last-child { border:0; }.runtime-grid span { display:block; color:var(--muted); font-size:12px; }.runtime-grid b { font-size:14px; }.actions { display:flex; gap:8px; flex-wrap:wrap; }.actions button { flex:1; min-width:110px; }.logs { background:#081117; border:1px solid #233746; color:#b6d7eb; padding:15px; white-space:pre-wrap; overflow:auto; max-height:310px; font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }.toast { position:fixed; z-index:30; left:50%; bottom:24px; transform:translateX(-50%); background:#eff8ff; color:#0c202e; padding:11px 15px; border-radius:5px; font-weight:700; box-shadow:var(--shadow); max-width:calc(100vw - 32px); }.toast.error { background:#ffddd9; color:#5a1511; }
@media (max-width:820px){.topbar{padding:0 16px}.nav{display:none}.hero{grid-template-columns:1fr;padding:58px 0}.hero h1{font-size:42px}.projects-grid{grid-template-columns:1fr}.checkout{grid-template-columns:1fr}.checkout-panel{min-height:auto}.features{grid-template-columns:1fr}.runtime-grid{grid-template-columns:1fr 1fr}.runtime-grid div:nth-child(2){border-right:0}.runtime-grid div{border-bottom:1px solid var(--line)}main{padding:0 16px 48px}.section{padding:52px 0}.section h2{font-size:28px}}