*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#06110f;color:#ecfff9}
a{text-decoration:none;color:inherit}.app{display:grid;grid-template-columns:270px 1fr;min-height:100vh}.sidebar{background:#071a16;border-right:1px solid #1d4138;padding:22px;position:sticky;top:0;height:100vh}
.brand{font-size:25px;font-weight:900;letter-spacing:.2px}.sub,.muted{color:#9fc7bd;font-size:13px;line-height:1.65}.nav a{display:block;padding:12px 14px;background:#0d211c;border:1px solid #1d4138;border-radius:14px;margin:8px 0}.nav a:hover{border-color:#38e0b0;background:#12382f}
.main{padding:26px}.hero,.card{background:linear-gradient(180deg,#0d211c,#0a1c18);border:1px solid #1d4138;border-radius:24px;padding:20px;box-shadow:0 18px 45px rgba(0,0,0,.20);margin-bottom:16px}
.hero{background:radial-gradient(circle at top right,rgba(56,224,176,.16),transparent 35%),linear-gradient(180deg,#0d211c,#0a1c18)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.metric{font-size:34px;font-weight:900}
label{display:block;color:#9fc7bd;font-size:12px;margin-top:10px}input,select,textarea{width:100%;padding:12px;border-radius:14px;border:1px solid #1d4138;background:#071a16;color:#ecfff9;margin-top:5px}textarea{min-height:120px}
.btn{display:inline-block;background:#38e0b0;color:#032019;font-weight:900;border:0;border-radius:14px;padding:12px 16px;margin-top:12px;cursor:pointer}.btn.secondary{background:#193b34;color:#ecfff9;border:1px solid #1d4138}.btn.warn{background:#ffd166;color:#221800}.btn.danger{background:#ff6b6b;color:white}
table{width:100%;border-collapse:collapse;margin-top:12px}td,th{padding:10px;border-bottom:1px solid #1d4138;text-align:left;vertical-align:top}th{color:#9fc7bd}
.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.auth-card{width:min(560px,100%);background:#0d211c;border:1px solid #1d4138;border-radius:26px;padding:24px}.danger{background:#3a1515;border:1px solid #ff6b6b;color:#ffd7d7;padding:10px;border-radius:12px;margin:10px 0}.success{background:#12382f;border:1px solid #38e0b0;color:#d9fff5;padding:10px;border-radius:12px;margin:10px 0}
.badge{display:inline-block;border:1px solid #1d4138;color:#9fc7bd;border-radius:999px;padding:5px 8px;margin:2px;font-size:12px}.package{border:1px solid #38e0b0;background:#0b2a23}.codebox{white-space:pre-wrap;background:#071a16;border:1px solid #1d4138;border-radius:16px;padding:14px;color:#d7fff5}audio,video{width:100%;margin:10px 0;border-radius:12px}
.wizard-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.step{padding:14px;border-radius:16px;border:1px solid #1d4138;background:#071a16;color:#9fc7bd}.step.active{border-color:#38e0b0;color:#ecfff9;background:#0b2a23}.preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.preview-box{background:#071a16;border:1px solid #1d4138;border-radius:16px;padding:14px}
@media(max-width:850px){.app{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.grid,.two,.three,.preview-grid,.wizard-steps{grid-template-columns:1fr}.main{padding:16px}}