/* === components.css — buttons, forms, cards, badges, modals, table === */

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border:none;border-radius:var(--r);font-size:12px;font-weight:600;cursor:pointer;font-family:var(--fm);transition:.15s;white-space:nowrap;line-height:1.3;}
.btn-sm{padding:4px 9px;font-size:11px;}
.btn-lg{padding:10px 20px;font-size:13px;}
.btn:disabled{opacity:.4;cursor:not-allowed;}
.bp{background:var(--accent);color:var(--bg0);}
.bp:hover{background:var(--neon);box-shadow:0 0 10px rgba(0,212,255,.35);}
.bg{background:transparent;color:var(--muted);border:1px solid var(--border2);}
.bg:hover{border-color:var(--accent);color:var(--accent);}
.bd{background:var(--danger);color:#fff;}
.bd:hover{opacity:.85;}
.bs{background:var(--success);color:var(--bg0);}
.bs:hover{opacity:.85;}
.bw{background:var(--warn);color:#fff;}
.bw:hover{opacity:.85;}
.bgold{background:var(--gold);color:var(--bg0);}
.bpur{background:var(--purple);color:#fff;}

/* FORMS */
.fg{display:flex;flex-direction:column;}
.fg label{font-size:10px;color:var(--muted);margin-bottom:3px;letter-spacing:.5px;text-transform:uppercase;}
.fg input,.fg select,.fg textarea{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:6px 9px;border-radius:var(--r);font-size:12px;transition:.15s;}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,212,255,.08);}
.fg textarea{resize:vertical;min-height:56px;font-family:var(--ff);}
.fg input[type="color"]{padding:2px;height:30px;cursor:pointer;}
.fg input[type="checkbox"]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}

/* SEARCH BAR */
.srch{display:flex;align-items:center;gap:5px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:4px 9px;}
.srch input{background:transparent;border:none;color:var(--text);font-size:12px;width:180px;}
.srch input:focus{outline:none;}
.srch span{color:var(--muted2);font-size:13px;}

/* SELECT standalone */
.sel-inline{background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:var(--r);font-size:11px;cursor:pointer;}
.sel-inline:focus{outline:none;border-color:var(--accent);}

/* CARD */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.ch{padding:9px 13px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px;}
.ct{font-size:12px;font-weight:700;}
.cb{padding:13px;}

/* BADGES */
.bdg{display:inline-flex;align-items:center;font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.5px;font-family:var(--ff);white-space:nowrap;}
.b-ok{background:rgba(0,230,118,.12);color:var(--success);border:1px solid rgba(0,230,118,.25);}
.b-no{background:rgba(255,45,85,.12);color:var(--danger);border:1px solid rgba(255,45,85,.25);}
.b-w{background:rgba(255,107,53,.12);color:var(--warn);border:1px solid rgba(255,107,53,.25);}
.b-a{background:rgba(0,212,255,.1);color:var(--accent);border:1px solid rgba(0,212,255,.2);}
.b-m{background:rgba(107,143,181,.08);color:var(--muted);border:1px solid var(--border);}
.b-g{background:rgba(255,215,0,.12);color:var(--gold);border:1px solid rgba(255,215,0,.25);}
.b-p{background:rgba(168,85,247,.12);color:var(--purple);border:1px solid rgba(168,85,247,.25);}
.b-arc{background:rgba(107,143,181,.06);color:var(--muted2);border:1px solid var(--border);text-decoration:line-through;}

/* TABLE */
.tbl{width:100%;border-collapse:collapse;font-size:12px;}
.tbl th{padding:6px 11px;text-align:left;font-size:10px;font-weight:700;color:var(--muted2);text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border);background:var(--bg2);white-space:nowrap;position:sticky;top:0;z-index:1;}
.tbl td{padding:7px 11px;border-bottom:1px solid var(--border);vertical-align:middle;}
.tbl tr:hover td{background:rgba(0,212,255,.02);}
.tbl tr.arc td{opacity:.5;}

/* MODAL */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:500;justify-content:center;align-items:center;}
.modal.open{display:flex;}
.mbox{background:var(--panel);border:1px solid var(--border2);border-radius:10px;width:560px;max-width:95vw;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.8);animation:fadeIn .15s ease;}
.mbox.mlg{width:820px;}
.mbox.msm{width:380px;}
.mh{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:9px;position:sticky;top:0;background:var(--panel);z-index:2;}
.mh h3{font-size:13px;font-weight:700;color:var(--accent);flex:1;}
.mc{background:transparent;border:none;color:var(--muted);font-size:17px;cursor:pointer;transition:.15s;line-height:1;}
.mc:hover{color:var(--danger);}
.mb{padding:18px;}
.mf{padding:12px 18px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:7px;position:sticky;bottom:0;background:var(--panel);}

/* STAT CARD */
.sc{background:var(--panel);border:1px solid var(--border);border-radius:var(--r);padding:14px;position:relative;overflow:hidden;cursor:default;}
.sc::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,212,255,.025) 0%,transparent 60%);pointer-events:none;}
.sc:hover{border-color:var(--border2);}
.sv{font-size:30px;font-weight:900;color:var(--accent);font-family:var(--ff);line-height:1;}
.sl{font-size:11px;color:var(--muted2);margin-top:3px;}
.si{position:absolute;bottom:10px;right:10px;font-size:26px;opacity:.13;}

/* LOGO ZONE */
.lzone{border:2px dashed var(--border2);border-radius:var(--r);padding:14px;text-align:center;cursor:pointer;transition:.2s;background:var(--bg2);font-size:12px;color:var(--muted);min-height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;}
.lzone:hover,.lzone.has{border-color:var(--accent);background:rgba(0,212,255,.03);}
.lzone img{max-height:50px;max-width:160px;object-fit:contain;}

/* CONSTRUCTOR BLOCK */
.blk{background:var(--bg2);border:1px solid var(--border);border-radius:5px;margin-bottom:5px;}
.bh{display:flex;align-items:center;gap:5px;padding:6px 9px;border-bottom:1px solid var(--border);background:var(--bg3);cursor:default;}
.btb{font-family:var(--ff);font-size:9px;padding:2px 5px;border-radius:2px;background:rgba(0,212,255,.12);color:var(--accent);font-weight:700;letter-spacing:.3px;}
.bb{padding:7px 9px;}
.bact{display:flex;gap:3px;margin-left:auto;}
.bact button{background:transparent;border:1px solid var(--border);color:var(--muted2);width:20px;height:20px;border-radius:2px;cursor:pointer;font-size:9px;transition:.12s;}
.bact button:hover{border-color:var(--accent);color:var(--accent);}
.bact button.del{border-color:transparent;color:var(--muted2);}
.bact button.del:hover{border-color:var(--danger);color:var(--danger);}

/* AI PANEL */
.aip{background:var(--bg1);border:1px solid var(--border2);border-radius:var(--r);}
.aih{padding:9px 13px;background:linear-gradient(90deg,rgba(0,212,255,.07),rgba(0,255,204,.03));border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:7px;}
.ait{font-size:12px;font-weight:700;color:var(--accent);font-family:var(--ff);}
.ach{height:190px;overflow-y:auto;padding:9px 11px;display:flex;flex-direction:column;gap:7px;}
.am{font-size:11px;line-height:1.5;padding:6px 9px;border-radius:4px;max-width:92%;}
.am-u{background:rgba(0,212,255,.08);color:var(--text);align-self:flex-end;border:1px solid rgba(0,212,255,.18);}
.am-b{background:var(--bg3);color:var(--text);align-self:flex-start;border:1px solid var(--border);}
.am-b .ams{font-size:9px;color:var(--accent);margin-bottom:2px;font-family:var(--ff);}
.air{display:flex;gap:5px;padding:7px 11px;border-top:1px solid var(--border);}
.air input{flex:1;background:var(--bg2);border:1px solid var(--border);color:var(--text);padding:6px 9px;border-radius:4px;font-size:12px;}
.air input:focus{outline:none;border-color:var(--accent);}

/* EXPIRY */
.exl{padding:10px;}
.exi{display:flex;align-items:center;gap:9px;padding:7px 9px;border:1px solid var(--border);border-radius:5px;margin-bottom:5px;background:var(--bg2);}
.exd{font-family:var(--ff);font-size:19px;font-weight:700;width:38px;text-align:center;flex-shrink:0;line-height:1;}
.exd.ok{color:var(--success);}
.exd.w{color:var(--warn);}
.exd.cr{color:var(--danger);animation:blink 1s infinite;}

/* TG STATUS */
.tgs{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:4px;background:var(--bg2);border:1px solid var(--border);font-size:11px;font-family:var(--ff);}
.sd{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.s-on{background:var(--success);}
.s-off{background:var(--muted2);}