*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,Segoe UI,Roboto,sans-serif;background:#0b0d10;color:#e8ecf1}
a{color:#5aa9ff;text-decoration:none}
a:hover{text-decoration:underline}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:14px 28px;background:#111418;border-bottom:1px solid #1d2128;position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:20px;color:#fff}
.topbar nav a{margin-left:18px;color:#cfd6df}
.btn-primary,.btn{display:inline-block;padding:10px 18px;background:linear-gradient(135deg,#3b82f6,#6366f1);color:#fff!important;border-radius:8px;border:0;cursor:pointer;font-weight:600}
.btn-primary:hover,.btn:hover{text-decoration:none;opacity:.92}
.btn-ghost{display:inline-block;padding:8px 14px;border:1px solid #2a2f38;border-radius:8px;color:#cfd6df}
.btn-danger{background:#ef4444}
.container{max-width:1100px;margin:0 auto;padding:28px}
.hero{text-align:center;padding:80px 20px}
.hero h1{font-size:54px;line-height:1.1;margin:0 0 18px;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:#9aa3ae;font-size:18px;max-width:640px;margin:0 auto 28px}
.grid{display:grid;gap:20px}
.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{background:#141820;border:1px solid #1d2128;border-radius:12px;padding:18px;transition:.2s}
.card:hover{border-color:#2b3240;transform:translateY(-2px)}
.card h3{margin:0 0 8px}
.thumb{width:100%;aspect-ratio:16/10;background:#0d1015 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%235aa9ff" stroke-width="1"><path d="M12 2l9 5v10l-9 5-9-5V7z"/><path d="M12 12L3 7"/><path d="M12 12l9-5"/><path d="M12 12v10"/></svg>') center/60px no-repeat;border-radius:8px;margin-bottom:12px}
.thumb img{width:100%;height:100%;object-fit:cover;border-radius:8px}
.form{max-width:420px;margin:40px auto;background:#141820;padding:28px;border-radius:12px;border:1px solid #1d2128}
.form h2{margin-top:0}
.form label{display:block;margin:10px 0 4px;color:#9aa3ae;font-size:13px}
.form input,.form textarea,.form select{width:100%;padding:10px 12px;background:#0b0d10;border:1px solid #2a2f38;border-radius:8px;color:#e8ecf1;font-size:14px}
.form button{width:100%;margin-top:18px}
.flash{padding:12px 16px;border-radius:8px;margin-bottom:16px}
.flash.ok{background:#0d3b22;color:#86efac;border:1px solid #16543a}
.flash.err{background:#3b0d12;color:#fecaca;border:1px solid #5a1a22}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:28px}
.plan{background:#141820;border:1px solid #1d2128;border-radius:14px;padding:24px;text-align:center}
.plan.featured{border-color:#6366f1;box-shadow:0 0 24px rgba(99,102,241,.2)}
.plan .price{font-size:36px;font-weight:700;margin:10px 0}
.plan ul{list-style:none;padding:0;color:#9aa3ae;margin:14px 0}
.plan ul li{padding:6px 0;border-bottom:1px solid #1d2128}
.viewer-wrap{position:relative;width:100%;height:72vh;background:#07090c;border-radius:12px;overflow:hidden;border:1px solid #1d2128}
.viewer-wrap canvas{display:block;width:100%;height:100%}
.viewer-hud{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.55);padding:8px 12px;border-radius:8px;font-size:13px}
.progress{height:8px;background:#1d2128;border-radius:6px;overflow:hidden;margin-top:8px}
.progress>div{height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);width:0%;transition:width .2s}
.foot{text-align:center;padding:28px;color:#556070;border-top:1px solid #1d2128;margin-top:40px}
table{width:100%;border-collapse:collapse;margin-top:16px}
th,td{padding:10px;text-align:left;border-bottom:1px solid #1d2128;font-size:14px}
th{color:#9aa3ae;font-weight:600}
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;background:#1d2128;color:#9aa3ae}
.badge.active{background:#0d3b22;color:#86efac}
.quota{background:#1d2128;border-radius:8px;padding:14px;margin-bottom:20px}
.quota .bar{height:10px;background:#0b0d10;border-radius:5px;overflow:hidden;margin-top:6px}
.quota .bar>div{height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6)}