/* ============================================================
   components.css
   Part of KineticAI Frontend — split from v6_updated.html
   ============================================================ */

/* ---- UNIVERSAL COMPONENTS ---- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--r);border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .18s;white-space:nowrap;font-family:var(--font);}
.btn-neon{background:var(--neon);color:#fff;}
.btn-neon:hover{background:var(--neon2);box-shadow:var(--glow-neon);}
.btn-orange{background:var(--orange);color:#fff;}
.btn-orange:hover{background:var(--orange2);box-shadow:var(--glow-orange);}
.btn-blue{background:var(--blue);color:#fff;}
.btn-blue:hover{background:var(--blue2);box-shadow:var(--glow-blue);}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2);}
.btn-ghost:hover{background:var(--bg0);border-color:var(--border3);color:var(--text);}
.btn-red{background:var(--red);color:#fff;}
.btn-red:hover{background:var(--red2);}
.btn-sm{padding:7px 14px;font-size:12px;}
.btn-lg{padding:14px 32px;font-size:15px;}
.btn-full{width:100%;justify-content:center;}

.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.1px;}
.badge-green{background:var(--neon-bg);color:var(--neon);border:1px solid var(--neon-border);}
.badge-orange{background:var(--orange-bg);color:var(--orange);border:1px solid var(--orange-border);}
.badge-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border);}
.badge-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border);}
.badge-yellow{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-border);}
.badge-purple{background:var(--purple-bg);color:var(--purple);}

.card{background:var(--bg1);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow);}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.card-title{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text3);}
.card-action{font-size:13px;color:var(--neon);background:none;border:none;cursor:pointer;font-family:var(--font);font-weight:600;}
.card-action:hover{opacity:.8;}

.divider{height:1px;background:var(--border);margin:16px 0;}

/* Toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r);padding:11px 20px;font-size:14px;font-weight:500;opacity:0;transition:all .3s;z-index:9999;display:flex;align-items:center;gap:10px;pointer-events:none;min-width:220px;box-shadow:var(--shadow-lg);}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
#toast.t-ok{border-left:3px solid var(--neon);}
#toast.t-err{border-left:3px solid var(--red);}
#toast.t-info{border-left:3px solid var(--blue);}

/* ---- MISC / UTILITY ---- */
.empty-state{text-align:center;padding:48px 24px;color:var(--text2);}
.empty-state-icon{font-size:40px;margin-bottom:14px;opacity:.4;}
.empty-state-text{font-size:15px;}
.empty-state-sub{font-size:13px;color:var(--text3);margin-top:6px;}

.section-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.section-head-title{font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--text2);}

.footer-land{padding:32px 52px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text3);}