/* MOBILE-FIRST CSS FRAMEWORK */
:root{--bg:#0a0a0a;--card:#1e1e2e;--accent:#8b5cf6;--success:#22c55e;--danger:#ef4444;--text:#fff;--muted:#888}
*{margin:0;padding:0;box-sizing:border-box}

/* Grid */
.row{display:flex;flex-wrap:wrap;margin:0 -10px}
.col{padding:10px;flex:1}
.col-12{width:100%}.col-6{width:50%}.col-4{width:33.33%}.col-3{width:25%}
@media(max-width:768px){.col-6,.col-4,.col-3{width:100%}}

/* Cards */
.card{background:var(--card);border-radius:12px;padding:20px;margin-bottom:15px}
.card-title{font-size:16px;font-weight:600;margin-bottom:10px;color:var(--accent)}

/* Buttons */
.btn{padding:12px 24px;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500}
.btn-primary{background:var(--accent);color:#fff}
.btn-secondary{background:#333;color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-block{width:100%}

/* Inputs */
input,textarea,select{width:100%;padding:12px 15px;background:#252540;border:1px solid #333;border-radius:8px;color:#fff}
input:focus{outline:none;border-color:var(--accent)}

/* Spacing */
.m-1{margin:5px}.m-2{margin:10px}.m-3{margin:15px}.m-4{margin:20px}
.p-1{padding:5px}.p-2{padding:10px}.p-3{padding:15px}.p-4{padding:20px}
.mt-2{margin-top:10px}.mt-3{margin-top:15px}.mb-2{margin-bottom:10px}.mb-3{margin-bottom:15px}

/* Text */
.text-center{text-align:center}.text-muted{color:var(--muted)}.text-accent{color:var(--accent)}
.font-bold{font-weight:bold}.font-sm{font-size:12px}

/* Flex */
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}
.justify-between{justify-content:space-between}.gap-2{gap:10px}.gap-3{gap:15px}

/* Responsive */
@media(max-width:768px){.hide-mobile{display:none}}