@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family:'Outfit',system-ui,sans-serif}
:root{
--bg:#0f172a;--s1:rgba(30,41,59,0.7);--s2:rgba(51,65,85,0.5);--s3:rgba(71,85,105,0.4);
--border:rgba(255,255,255,0.1);--border2:rgba(255,255,255,0.2);
--accent:#38bdf8;--accent2:#818cf8;--accent3:#c084fc;
--green:#10b981;--red:#ef4444;--yellow:#f59e0b;--cyan:#06b6d4;--pink:#ec4899;
--text:#f8fafc;--dim:#94a3b8;--dim2:#cbd5e1;--r:16px;
}
body{background:var(--bg);color:var(--text);min-height:100vh;font-size:14px;overflow-x:hidden;letter-spacing:0.2px}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}::-webkit-scrollbar-track{background:transparent}

/* ════ BACKGROUND AMBIENT (CYBER MESH) ════ */
.ambient{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.ambient::before,.ambient::after,.ambient-core{display: none !important;}
@keyframes floatMesh{0%{transform:translate(0,0) scale(1) rotate(0deg)}50%{transform:translate(150px,50px) scale(1.1) rotate(180deg)}100%{transform:translate(-50px,150px) scale(0.9) rotate(360deg)}}

/* ════ LAYOUT ════ */
.app{display:none;position:relative;z-index:10}
.sidebar{position:fixed;left:0;top:0;bottom:0;width:64px;background:var(--s1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;overflow:hidden;transition:width 0.35s cubic-bezier(0.4,0,0.2,1),box-shadow 0.35s cubic-bezier(0.4,0,0.2,1);box-shadow:2px 0 12px rgba(0,0,0,0.1)}
.sidebar:hover{width:240px;box-shadow:8px 0 50px rgba(0,0,0,0.4),2px 0 0 rgba(56,189,248,0.06)}
.sidebar .logo{padding:24px 13px;display:flex;align-items:center;gap:12px;justify-content:flex-start;overflow:hidden;border-bottom:1px solid var(--border);margin-bottom:4px;transition:padding 0.35s cubic-bezier(0.4,0,0.2,1)}
.sidebar:hover .logo{padding:24px 20px}
.sidebar .logo-icon{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;box-shadow:0 4px 14px rgba(56,189,248,0.5);flex-shrink:0;transition:transform 0.3s cubic-bezier(0.4,0,0.2,1)}
.sidebar:hover .logo-icon{transform:scale(1.05)}
.sidebar .logo-text{font-size:20px;font-weight:800;color:var(--text);letter-spacing:-0.5px;background:linear-gradient(to right,#fff,var(--dim2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;opacity:0;white-space:nowrap;transition:opacity 0.15s}
.sidebar:hover .logo-text{opacity:1;transition:opacity 0.2s 0.15s}
.sidebar .logo-text span{font-size:10px;font-weight:600;color:var(--accent);display:block;margin-top:2px;letter-spacing:1px;text-transform:uppercase;-webkit-text-fill-color:initial}
.nav{flex:1;padding:8px;overflow-y:auto;overflow-x:hidden}
.nav-sep{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:1.5px;padding:20px 12px 8px;font-weight:700;opacity:0;white-space:nowrap;transition:opacity 0.15s;pointer-events:none}
.sidebar:hover .nav-sep{opacity:1;transition:opacity 0.2s 0.1s}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:10px;cursor:pointer;color:var(--dim2);font-size:14px;font-weight:600;transition:.2s;margin-bottom:4px;justify-content:center;position:relative}
.sidebar:hover .nav-item{justify-content:flex-start;padding:12px 16px}
.nav-item:hover{background:var(--s2);color:#fff;transform:translateX(4px)}
.sidebar:not(:hover) .nav-item:hover{transform:none}
.nav-item.active{background:var(--s2);color:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,0.05)}
.sidebar:hover .nav-item.active{border-left:3px solid var(--accent)}
.nav-item .icon{font-size:18px;width:24px;text-align:center;flex-shrink:0;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2))}
.nav-item>span:not(.icon):not(.badge-n){opacity:0;white-space:nowrap;transition:opacity 0.15s;overflow:hidden}
.sidebar:hover .nav-item>span:not(.icon):not(.badge-n){opacity:1;transition:opacity 0.2s 0.15s}
.nav-item .badge-n{margin-left:auto;background:var(--accent);color:#fff;font-size:11px;font-weight:800;padding:2px 8px;border-radius:12px;box-shadow:0 2px 8px rgba(56,189,248,0.4);opacity:0;transition:opacity 0.15s}
.sidebar:hover .nav-item .badge-n{opacity:1;transition:opacity 0.2s 0.2s}
.sb-footer{padding:20px 0;border-top:1px solid var(--border);display:flex;flex-direction:column;align-items:center;overflow:hidden;transition:padding 0.35s cubic-bezier(0.4,0,0.2,1)}
.sidebar:hover .sb-footer{padding:20px;align-items:stretch}
.sb-footer>div:first-child{opacity:0;transition:opacity 0.15s;white-space:nowrap;display:flex;flex-direction:column;align-items:center;width:100%;margin-bottom:10px}
.sidebar:hover .sb-footer>div:first-child{opacity:1;transition:opacity 0.2s 0.1s;align-items:flex-start}
.sb-footer .btn{opacity:0;transition:opacity 0.15s;white-space:nowrap;width:100%}
.sidebar:hover .sb-footer .btn{opacity:1;transition:opacity 0.2s 0.15s}
.sb-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--dim2);font-weight:600;justify-content:center;margin-bottom:4px}
.sidebar:hover .sb-status{justify-content:flex-start}
.sb-status .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);flex-shrink:0}
.sb-status span{opacity:0;transition:opacity 0.15s;white-space:nowrap}
.sidebar:hover .sb-status span{opacity:1;transition:opacity 0.2s 0.1s}

.main{margin-left:64px;padding:48px;min-height:100vh;position:relative;z-index:10}
.page-hdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:40px}
.page-hdr h1{font-size:28px;font-weight:800;letter-spacing:-0.5px;margin-bottom:8px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,0.3)}
.page-hdr p{color:var(--dim);font-size:15px;font-weight:500}
.page-hdr .actions{display:flex;gap:12px}

/* ════ STAT CARDS (CYBER GLASS) ════ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-bottom:40px}
.stat{background:var(--s1);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.08);border-top:1px solid rgba(255,255,255,0.15);border-radius:20px;padding:24px;position:relative;display:flex;flex-direction:column;box-shadow:0 10px 40px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.1);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);overflow:hidden;z-index:1}
.stat:hover{transform:translateY(-4px);box-shadow:0 25px 60px rgba(0,0,0,0.4),inset 0 1px 1px rgba(255,255,255,0.2)}
.stat:active{transform:scale(0.98);box-shadow:0 6px 20px rgba(0,0,0,0.2)}
.stat::before{content:'';position:absolute;top:0;right:0;width:100px;height:100px;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);opacity:0.5;border-radius:50%}
.stat .label{font-size:12px;color:var(--dim2);font-weight:700;margin-bottom:12px;text-transform:uppercase;letter-spacing:1px}
.stat .val{font-size:36px;font-weight:800;color:#fff;margin-bottom:10px;text-shadow:0 2px 4px rgba(0,0,0,0.2);letter-spacing:-1px}
.stat .sub{font-size:13px;color:var(--dim);display:flex;align-items:center;gap:6px;font-weight:600}
.stat .sub.warn{color:var(--yellow)}

/* ════ CARDS & TABLES (CYBER GLASS) ════ */
.card{background:var(--s1);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,0.08);border-top:1px solid rgba(255,255,255,0.15);border-radius:24px;margin-bottom:32px;box-shadow:0 15px 50px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.1);position:relative;z-index:1;transition:all 0.4s cubic-bezier(0.4,0,0.2,1)}
.card:hover{transform:translateY(-2px);box-shadow:0 25px 60px rgba(0,0,0,0.4),inset 0 1px 1px rgba(255,255,255,0.15)}
.card-hdr{padding:24px 28px;border-bottom:1px solid rgba(255,255,255,0.05);display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,0.01);position:relative;z-index:2;border-top-left-radius:24px;border-top-right-radius:24px}
.card-hdr h2{font-size:18px;font-weight:800;color:#fff;letter-spacing:-0.2px;text-shadow:0 2px 10px rgba(56,189,248,0.3)}
.card-hdr .tools{display:flex;gap:12px}
.search-box{position:relative}
.search-box input{padding:10px 16px 10px 40px;background:var(--s2);border:1px solid var(--border);border-radius:8px;color:#fff;font-family:inherit;font-size:14px;outline:none;width:280px;transition:.2s;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)}
.search-box input:focus{border-color:var(--accent);background:var(--s1);box-shadow:0 0 0 3px rgba(56,189,248,0.2)}
.search-box::before{content:'🔍';position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:14px;opacity:.6}

table{width:100%;border-collapse:separate;border-spacing:0 12px}
thead{display:table-header-group}
thead tr{background:var(--s2)}
th{text-align:left;padding:16px 24px;font-size:13px;font-weight:800;color:var(--text);opacity:0.8;text-transform:uppercase;letter-spacing:1px;border-bottom:none}
th:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
th:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}
tbody tr{background:var(--s1);box-shadow:0 4px 15px rgba(0,0,0,0.1),inset 0 1px 1px rgba(255,255,255,0.05);border-radius:16px;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative}
td{border:none!important;padding:20px 24px;font-size:14px;transition:all 0.4s;font-weight:500;color:var(--text);position:relative;z-index:2}
td:first-child{border-top-left-radius:16px;border-bottom-left-radius:16px}
td:last-child{border-top-right-radius:16px;border-bottom-right-radius:16px}
tbody tr:not(.empty-row):hover{background:rgba(255,255,255,0.06);transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.08);z-index:10;border-radius:16px}
.stk-body tr:not(.empty-row):hover{background:rgba(99,102,241,0.1)!important;box-shadow:0 5px 20px rgba(99,102,241,0.2),0 0 15px rgba(99,102,241,0.3)!important}
tbody tr.highlight{background:rgba(245,158,11,0.08)!important;box-shadow:0 0 0 1px var(--yellow),0 6px 20px rgba(245,158,11,0.2)!important}
tbody tr.highlight td:first-child::before{display:none}
.empty-row{text-align:center;color:var(--dim)}
.empty-row td{padding:100px 20px;}
.empty-row .big{font-size:56px;margin-bottom:20px;opacity:.3;filter:grayscale(1)}
.empty-row p{font-size:16px;font-weight:600}

/* ════ BADGES ════ */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;border:1px solid transparent;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.b-green{background:rgba(16,185,129,0.15);color:#34d399;border-color:rgba(16,185,129,0.3)}
.b-red{background:rgba(239,68,68,0.15);color:#f87171;border-color:rgba(239,68,68,0.3)}
.b-yellow{background:rgba(245,158,11,0.15);color:#fbbf24;border-color:rgba(245,158,11,0.3)}
.b-cyan{background:rgba(6,182,212,0.15);color:#22d3ee;border-color:rgba(6,182,212,0.3)}
.b-gray{background:rgba(255,255,255,0.05);color:var(--dim2);border-color:var(--border)}
.b-purple{background:rgba(236,72,153,0.15);color:#f472b6;border-color:rgba(236,72,153,0.3)}
.b-blue{background:rgba(56,189,248,0.15);color:#38bdf8;border-color:rgba(56,189,248,0.3)}

/* ══ CUSTOM ORDER TIMELINE ══ */
.co-timeline{display:flex;align-items:center;justify-content:center;gap:0;margin:20px 0 8px;padding:16px 0}
.co-step{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:70px}
.co-dot{width:32px;height:32px;border-radius:50%;background:var(--s2);border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:var(--dim);transition:.3s}
.co-step.done .co-dot{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 0 12px rgba(16,185,129,0.4)}
.co-label{font-size:11px;font-weight:700;color:var(--dim);text-align:center}
.co-step.done .co-label{color:var(--green)}
.co-time{font-size:10px;color:var(--dim);text-align:center;max-width:80px;line-height:1.3}
.co-line{flex:1;height:2px;background:var(--border);min-width:20px;margin:0 4px;margin-bottom:40px}
.co-line.done{background:var(--green);box-shadow:0 0 8px rgba(16,185,129,0.3)}

/* ════ BUTTONS ════ */
.btn{padding:12px 24px;border-radius:12px;border:1px solid transparent;cursor:pointer;font-size:14px;font-weight:700;font-family:inherit;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);display:inline-flex;align-items:center;gap:8px;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,0.05);position:relative;overflow:hidden;letter-spacing:0.5px}
.btn::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transform:skewX(-20deg);transition:0s}
.btn:hover::after{left:150%;transition:0.6s ease-in-out}
.btn:active{transform:scale(0.95) !important;box-shadow:0 2px 8px rgba(0,0,0,0.1) !important}
.btn-p{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;box-shadow:0 4px 15px rgba(56,189,248,0.3),inset 0 1px 1px rgba(255,255,255,0.3)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(56,189,248,0.5),inset 0 1px 1px rgba(255,255,255,0.5)}
.btn-g{background:linear-gradient(135deg,var(--green),#059669);color:#fff;border:none;box-shadow:0 4px 15px rgba(16,185,129,0.3),inset 0 1px 1px rgba(255,255,255,0.3)}
.btn-g:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(16,185,129,0.5),inset 0 1px 1px rgba(255,255,255,0.5)}
.btn-r{background:linear-gradient(135deg,#f43f5e,#e11d48);color:#fff;border:none;box-shadow:0 4px 15px rgba(244,63,94,0.3),inset 0 1px 1px rgba(255,255,255,0.3)}
.btn-r:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(244,63,94,0.5),inset 0 1px 1px rgba(255,255,255,0.5)}
.btn-o{background:rgba(255,255,255,0.03);color:var(--text);border:1px solid var(--border);backdrop-filter:blur(8px)}
.btn-o:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.15);background:var(--s3);border-color:var(--accent)}
.btn-sm{padding:8px 16px;font-size:13px;border-radius:10px}

.act-group{display:inline-flex;background:var(--s2);border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:0 2px 4px rgba(0,0,0,0.1)}
.btn-icon{background:transparent;border:none;color:var(--dim2);padding:10px 14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;border-right:1px solid var(--border)}
.btn-icon:last-child{border-right:none}
.btn-icon svg{width:22px;height:22px;stroke-width:2.5}
.btn-icon:hover{background:var(--s3);color:#fff}
.btn-icon.del{color:#ef4444}
.btn-icon.del:hover{background:rgba(239,68,68,0.2);color:#fca5a5}
.btn-icon.ok{color:#10b981}
.btn-icon.ok:hover{background:rgba(16,185,129,0.2);color:#6ee7b7}

/* ════ TABS ════ */
.tabs{display:flex;gap:6px;margin-bottom:32px;background:var(--s1);backdrop-filter:blur(16px);padding:8px;border-radius:14px;border:1px solid var(--border);width:fit-content;box-shadow:0 8px 25px rgba(0,0,0,0.1),inset 0 1px 1px rgba(255,255,255,0.05)}
.tab{padding:10px 24px;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;color:var(--dim);background:transparent;border:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);font-family:inherit;position:relative}
.tab:hover{color:var(--text);background:rgba(255,255,255,0.03)}
.tab.active{background:var(--s3);color:#fff;box-shadow:0 4px 15px rgba(0,0,0,0.15),inset 0 1px 1px rgba(255,255,255,0.1);transform:translateY(-1px)}
.tab.active::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:20px;height:3px;background:var(--accent);border-radius:4px;box-shadow:0 0 10px var(--accent)}

/* ════ MODAL ════ */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:999;justify-content:center;align-items:center;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.modal-bg.open{display:flex;animation:fadeIn .4s ease}
.modal{background:var(--s1);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid var(--border);border-top:1px solid var(--border2);border-radius:24px;padding:40px;width:540px;max-height:90vh;overflow-y:auto;box-shadow:0 30px 80px -10px rgba(0,0,0,0.3),0 0 50px rgba(56,189,248,0.05);animation:mIn .4s cubic-bezier(0.16,1,0.3,1);position:relative}
.modal::after{content:'';position:absolute;inset:0;border-radius:24px;padding:1px;background:linear-gradient(135deg,var(--border2),transparent 30%,var(--accent) 100%);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:0.3}
@keyframes mIn{from{opacity:0;transform:scale(.95) translateY(20px)}to{opacity:1;transform:none}}
.modal h3{font-size:24px;margin-bottom:32px;font-weight:800;letter-spacing:-.5px;color:var(--text);text-align:center;position:relative;z-index:2}
.fg{margin-bottom:24px}
.fg label{display:block;font-size:13px;font-weight:700;color:var(--dim2);margin-bottom:10px;letter-spacing:0.5px;text-transform:uppercase}
.fg input,.fg textarea,.fg select{width:100%;padding:16px 20px;background:var(--s2);backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:14px;color:var(--text);font-family:inherit;font-size:15px;outline:none;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);font-weight:500;box-shadow:inset 0 2px 5px rgba(0,0,0,0.05)}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 4px rgba(56,189,248,0.15),0 8px 20px rgba(0,0,0,0.1)}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.modal .btns{display:flex;gap:16px;justify-content:flex-end;margin-top:36px;position:relative;z-index:2}
.modal table{width:100%;margin-top:16px;border-collapse:collapse;background:var(--s2);border-radius:14px;overflow:hidden;border:1px solid var(--border);box-shadow:inset 0 2px 4px rgba(0,0,0,0.05)}
.modal table td{border-bottom:1px solid var(--border);padding:16px 20px;font-size:15px;font-weight:600;color:var(--text)}
.modal table tr:last-child td{border-bottom:none}

/* ════ TOAST ════ */
.toast{position:fixed;top:32px;right:32px;padding:16px 24px;border-radius:12px;font-size:15px;font-weight:700;z-index:9999;display:none;box-shadow:0 10px 25px -5px rgba(0,0,0,0.3);border:1px solid;backdrop-filter:blur(10px)}
.toast.ok{background:rgba(16,185,129,0.9);color:#fff;border-color:#34d399}
.toast.err{background:rgba(239,68,68,0.9);color:#fff;border-color:#f87171}

.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;position:relative;z-index:10;background:transparent}
.login-box{position:relative;background:var(--s1);backdrop-filter:blur(20px);border:1px solid var(--border2);border-radius:20px;padding:56px 48px;width:440px;text-align:center;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5)}
.login-box h1{font-size:32px;font-weight:900;color:#fff;margin-bottom:16px;letter-spacing:-0.5px}
.login-box p{color:var(--dim2);font-size:15px;margin-bottom:40px;font-weight:500}
.login-box input{width:100%;padding:16px;background:var(--s2);border:1px solid var(--border);border-radius:10px;color:#fff;font-family:inherit;font-size:15px;outline:none;margin-bottom:20px;transition:.2s;box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)}
.login-box input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(56,189,248,0.2)}
.login-box button{width:100%;padding:16px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:800;cursor:pointer;transition:.2s;box-shadow:0 4px 12px rgba(56,189,248,0.3)}
.login-box button:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(56,189,248,0.4)}

.resp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* ════ SECTIONS & UTILS ════ */
.sec{display:none;animation:secIn .4s cubic-bezier(0.16,1,0.3,1)}
.sec.active{display:block}
@keyframes secIn{from{opacity:0;transform:translateY(15px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}

/* ════ LIGHT THEME ════ */
body.light-theme{
--bg:#f1f5f9;--s1:rgba(255,255,255,0.7);--s2:rgba(255,255,255,0.9);--s3:rgba(226,232,240,0.9);
--border:rgba(0,0,0,0.06);--border2:rgba(0,0,0,0.15);
--accent:#0ea5e9;--accent2:#6366f1;--accent3:#d946ef;
--text:#1e293b;--dim:#64748b;--dim2:#475569;
}

/* ════ THEME: CYBER NEON (3D PREMIUM) ════ */
body.cyber-theme{
--bg:#0b0816;--s1:rgba(25, 12, 40, 0.85);--s2:rgba(43, 14, 60, 0.7);--s3:rgba(60, 18, 85, 0.5);
--border:rgba(244,114,182,0.3);--border2:rgba(45,212,191,0.5);
--accent:#f472b6;--accent2:#2dd4bf;--accent3:#818cf8;
--text:#fdf4ff;--dim:#c084fc;--dim2:#e879f9;
}
body.cyber-theme .card, body.cyber-theme .stat, body.cyber-theme .sidebar {
  box-shadow: 0 15px 35px -10px rgba(244,114,182,0.3), inset 0 1px 2px rgba(255,255,255,0.2), inset 0 -2px 10px rgba(0,0,0,0.5);
  background: linear-gradient(150deg, rgba(35,15,50,0.9), rgba(15,5,25,1));
  border-top: 1px solid rgba(244,114,182,0.7);
  border-left: 1px solid rgba(244,114,182,0.2);
}
body.cyber-theme .btn-p {
  box-shadow: 0 6px 20px rgba(244,114,182,0.5), inset 0 2px 4px rgba(255,255,255,0.4);
  background: linear-gradient(135deg, #f472b6, #818cf8);
}
body.cyber-theme .nav-item.active { box-shadow: 0 4px 12px rgba(45,212,191,0.2); border-left: 3px solid #2dd4bf; color:#2dd4bf; background: rgba(45,212,191,0.1); }

/* ════ THEME: LUXURY GOLD (3D PREMIUM) ════ */
body.gold-theme{
--bg:#0a0a0a;--s1:rgba(20,20,20,0.85);--s2:rgba(35,35,35,0.7);--s3:rgba(50,50,50,0.5);
--border:rgba(212,175,55,0.3);--border2:rgba(253,230,138,0.4);
--accent:#fbbf24;--accent2:#f59e0b;--accent3:#fcd34d;
--text:#fffbeb;--dim:#d4af37;--dim2:#fde68a;
}
body.gold-theme .card, body.gold-theme .stat, body.gold-theme .sidebar {
  box-shadow: 0 20px 40px -5px rgba(0,0,0,0.9), inset 0 1px 3px rgba(212,175,55,0.5), inset 0 -3px 15px rgba(0,0,0,0.9);
  background: linear-gradient(160deg, rgba(35,35,35,1) 0%, rgba(10,10,10,1) 100%);
  border-top: 1px solid rgba(212,175,55,0.8);
  border-left: 1px solid rgba(212,175,55,0.2);
}
body.gold-theme .btn-p {
  background: linear-gradient(135deg, #fbbf24, #b45309);
  box-shadow: 0 6px 20px rgba(217,119,6,0.5), inset 0 2px 3px rgba(255,255,255,0.6);
  color: #451a03;
  font-weight: 900;
}
.mobile-cat-toggle { display: none; }
.mobile-cat-list { display: contents; }
body.gold-theme .logo-text { background: linear-gradient(to right, #fde68a, #d4af37); -webkit-background-clip:text;-webkit-text-fill-color:transparent; }

/* ════ THEME: GLASS PREMIUM (Replaces OLED) ════ */
/* ════ THEME: RADICAL GLASS BUBBLES (Replaces OLED) ════ */
body.oled-theme{
--bg: radial-gradient(circle at 10% 20%, #1e1b4b 0%, #000000 60%, #172554 100%);
--s1:rgba(255, 255, 255, 0.03);--s2:rgba(255, 255, 255, 0.05);--s3:rgba(255, 255, 255, 0.1);
--border:rgba(255,255,255,0.05);--border2:rgba(255,255,255,0.1);
--accent:#38bdf8;--accent2:#a855f7;--accent3:#f43f5e;
--text:#ffffff;--dim:#94a3b8;--dim2:#e2e8f0;
--r: 32px; /* Massive border radius for bubble look */
}
body.oled-theme .ambient::before { background: #a855f7; opacity: 0.8; width: 600px; height: 600px; top: -100px; left: -100px; filter: blur(150px); }
body.oled-theme .ambient::after { background: #38bdf8; opacity: 0.8; width: 600px; height: 600px; bottom: -100px; right: -100px; filter: blur(150px); }

/* Remove standard card blocks, make them floaty glass bubbles */
body.oled-theme .card, body.oled-theme .stat, body.oled-theme .sidebar {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  background: rgba(15, 15, 20, 0.4) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r);
}

/* Sidebar & Headers */
body.oled-theme .sidebar { border-right: none; }
body.oled-theme .card-hdr { background: transparent; border-bottom: none; padding-bottom: 0; }
body.oled-theme .card-hdr h2 { font-size: 20px; font-weight: 900; letter-spacing: -0.5px; }

/* Removed custom table logic since it is now global */

/* Buttons & Inputs */
body.oled-theme .btn, body.oled-theme .nav-item { border-radius: 50px; }
body.oled-theme .btn-p {
  background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.3), inset 0 1px 1px rgba(255,255,255,0.8);
}
body.oled-theme .btn-p:hover { background: rgba(255,255,255,0.25); transform: translateY(-3px); }
body.oled-theme .search-box input { border-radius: 50px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15); padding: 12px 20px 12px 45px; }
body.oled-theme .act-group { border-radius: 50px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0,0,0,0.3); }
body.light-theme .stat .val, body.light-theme .page-hdr h1, body.light-theme .card-hdr h2, body.light-theme .modal h3, body.light-theme .login-box h1{color:#000;text-shadow:none}
body.light-theme .search-box input, body.light-theme .fg input, body.light-theme .fg textarea, body.light-theme .fg select, body.light-theme .login-box input{color:#000}
body.light-theme .sidebar .logo-text, body.light-theme .btn-icon, body.light-theme .tab{color:var(--text);-webkit-text-fill-color:initial}
body.light-theme th{background:rgba(0,0,0,0.04)}
body.light-theme tr:hover td{background:rgba(0,0,0,0.02)}
body.light-theme .nav-item:hover{color:#000}
body.light-theme .modal{background:rgba(255,255,255,0.72);border:1px solid rgba(255,255,255,0.6);box-shadow:0 25px 60px -12px rgba(0,0,0,0.15),0 0 40px rgba(56,189,248,0.04)}
body.light-theme .modal-bg{background:rgba(100,116,139,0.3)}
body.light-theme .fg input,body.light-theme .fg textarea,body.light-theme .fg select{background:rgba(241,245,249,0.7);border-color:rgba(0,0,0,0.08)}
body.light-theme .modal table td{border-bottom:1px solid rgba(0,0,0,0.04)}

/* HIDE ON DESKTOP */
.mobile-header { display: none; }
.sidebar-overlay { display: none; }

/* ===== MOBILE OVERRIDES ===== */
/* Logs PC Format */
@media screen and (min-width: 769px) {
    .logs-card-container { padding: 0 !important; background: transparent !important; box-shadow: none !important; border: none !important; }
    .logs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .log-column { display: block !important; background: var(--s1); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid var(--border2); }
    .mobile-only-tabs { display: none !important; }
    
    /* Hiển thị số thông báo dạng chấm tròn đỏ/cam nhỏ trên góc icon khi sidebar thu nhỏ */
    .sidebar:not(:hover) .nav-item .badge-n {
        opacity: 1 !important;
        position: absolute;
        top: 4px;
        right: 12px;
        padding: 1px 4px;
        font-size: 8px;
        min-width: 14px;
        height: 14px;
        border-radius: 50%;
        margin-left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 1px 4px rgba(0,0,0,0.4);
        z-index: 5;
    }
}

/* Visibility Utilities */
.show-mobile, .show-mobile-tr { display: none !important; }

@media screen and (max-width: 768px) {
    body { overflow-x: hidden; }
    * { -webkit-tap-highlight-color: transparent !important; -webkit-tap-highlight-color: rgba(0,0,0,0) !important; outline: none !important; }
    button, a, div, span, input { -webkit-tap-highlight-color: transparent !important; outline: none !important; }
    .main { margin-left: 0; padding: 75px 16px 24px; }
    
    .mobile-header {
        position: fixed; top: 0; left: 0; right: 0; height: 60px;
        background: var(--s1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
        z-index: 900; box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    .mobile-menu-btn {
        background: transparent; border: none; color: var(--text);
        font-size: 24px; cursor: pointer; min-width: 44px; min-height: 44px;
        display: flex; align-items: center; justify-content: center;
    }
    .mobile-logo { font-size: 19px; font-weight: 800; letter-spacing: 2.5px; background: linear-gradient(135deg, var(--text) 30%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0px 5px 15px rgba(0,0,0,0.15); display: inline-block; }
    
    .sidebar { width: 240px; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1000; overflow: visible; }
    .sidebar:hover { width: 240px; box-shadow: none; }
    .sidebar .logo { padding: 20px 20px; }
    .sidebar .logo-text { opacity: 1; }
    .sidebar .nav-sep { opacity: 1; }
    .sidebar .nav-item { justify-content: flex-start; padding: 12px 16px; }
    .sidebar .nav-item>span:not(.icon):not(.badge-n) { opacity: 1; }
    .sidebar .nav-item .badge-n { opacity: 1; }
    .sidebar .sb-footer { padding: 20px; align-items: stretch; }
    .sidebar .sb-footer>div:first-child { opacity: 1; align-items: flex-start; }
    .sidebar .sb-footer .btn { opacity: 1; }
    .sidebar .sb-status { justify-content: flex-start; }
    .sidebar .sb-status span { opacity: 1; }
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 950; backdrop-filter: blur(2px); }
    .sidebar-overlay.active { display: block; }

    .toast { top: 70px; left: 50%; right: auto; transform: translateX(-50%); width: 90%; text-align: center; justify-content: center; z-index: 99999; }

    /* Fix stats */
    .stats { grid-template-columns: 1fr; gap: 12px; }
    div[style*="grid-template-columns: repeat(3, 1fr)"], 
    div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 16px !important; }

    .m-stat { transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
    .m-stat:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important; border-color: var(--border) !important; }
    .m-stat:active { transform: scale(0.96); box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; }

    .page-hdr { flex-direction: column; align-items: flex-start !important; gap: 12px; }
    .page-hdr .actions, .page-hdr .actions button { width: 100%; margin: 0 !important; }
    #sec-dashboard .page-hdr .actions { display: none !important; }
    .hide-mobile { display: none !important; }
    .show-mobile { display: inline-block !important; }
    .show-mobile-tr { display: flex !important; }
    
    .card-hdr { flex-direction: column; align-items: flex-start !important; gap: 12px; }
    .logs-board-hdr { flex-direction: row !important; align-items: center !important; gap: 0 !important; }
    .card-hdr .tools { width: 100%; }
    .card-hdr .search-box input { width: 100%; }
    
    .row { flex-direction: column; gap: 0; }
    .modal { width: 100%; height: 100%; border-radius: 0; display: flex; flex-direction: column; overflow-y: auto; padding: 20px 16px;}
    
    /* Table cards */
    table:not(.modal table) { display: block; width: 100%; min-width: unset; }
    table:not(.modal table) > thead { display: none; }
    table:not(.modal table) > tbody { display: flex; flex-direction: column; gap: 16px; }
    table:not(.modal table) tr { display: flex; flex-direction: column; background: var(--s2); border: 1px solid var(--border2); border-radius: 12px; padding: 12px 16px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
    table:not(.modal table) td { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--border); text-align: right; font-size:14px; }
    table:not(.modal table) td:last-child { border-bottom: none; padding-bottom: 0; padding-top: 12px; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
    table:not(.modal table) td::before { content: attr(data-label); font-weight: 600; color: var(--dim); font-size: 11px; text-transform: uppercase; text-align: left; padding-right: 12px; flex-shrink: 0; }
    table:not(.modal table) td button, table:not(.modal table) td .btn { min-width: 44px; min-height: 44px; margin: 0; flex: 1; }
    
    /* Modals should keep normal form-like layout but upgraded to Premium Grouped List */
    .modal table { width: 100%; border-spacing: 0; background: var(--s2); border-radius: 14px; overflow: hidden; margin-top: 20px !important; box-shadow: 0 4px 25px rgba(0,0,0,0.04); border: 1px solid var(--border2); }
    .modal tr { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid rgba(150, 150, 150, 0.1); background: transparent; box-shadow: none; border-radius: 0; }
    .modal tr:last-child { border-bottom: none; }
    .modal td { display: flex !important; padding: 0 !important; align-items: center; font-size: 14px; border: none !important; }
    .modal td:first-child { color: var(--dim); min-width: 100px; font-weight: 500; letter-spacing: -0.2px; }
    .modal td:last-child { justify-content: flex-end; text-align: right; color: var(--text); flex: 1; margin-left: 10px; font-weight: 600; }
    
    .badge, .badge-n { white-space: nowrap; }

    /* Fix highlight row mobile — chỉ dùng background nhẹ, không border-left (gây artifact) */
    tr.topup-row { background: var(--s2); }
    tr.topup-row.topup-pending { background: rgba(245,158,11,0.07) !important; }

    /* Specific UI for Users Table on Mobile: Premium List with Avatars */
    #tb-users { display: flex; flex-direction: column; border: 1px solid var(--border2); border-radius: 12px; background: var(--s2); overflow: hidden; margin-top: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
    #tb-users tr { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 16px; height: 68px; margin-bottom: 0; box-shadow: none; border: none; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
    #tb-users tr:last-child { border-bottom: none; }
    #tb-users td { border: none !important; padding: 0 !important; display: flex; align-items: center; justify-content: flex-start; text-align: left; background: transparent !important; }
    #tb-users td::before { display: none !important; }
    #tb-users td:last-child { display: none !important; } /* Hide actions column */
    #tb-users td:nth-child(2) { justify-content: flex-end; text-align: right; margin-left: 12px; flex-shrink: 0; } /* Status aligns right */
    
    #tb-users td:first-child { flex: 1; min-width: 0; }
    #tb-users td:first-child a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex !important; align-items: center; color: var(--text); font-size: 15px; font-weight: 700; width: 100%; }
    #tb-users td:first-child a::before {
        content: '👤';
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--s3);
        border: 1px solid var(--border2);
        margin-right: 14px;
        font-size: 18px;
        flex-shrink: 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    /* Specific UI for Stock Grid on Mobile: Premium Card Layout */
    #tb-stock-grid { background: transparent !important; border: none !important; box-shadow: none !important; margin-top: 16px; }
    #tb-stock-grid tbody { gap: 12px; }
    #tb-stock-grid tr {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-areas: 
            "id status"
            "data data"
            "actions actions";
        gap: 12px;
        padding: 16px;
        background: var(--surface) !important;
        border: 1px solid var(--border2) !important;
        border-radius: 14px !important;
        margin-bottom: 0 !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    }
    #tb-stock-grid td { border: none !important; padding: 0 !important; display: flex !important; align-items: center; justify-content: flex-start; text-align: left; background: transparent !important; }
    #tb-stock-grid td::before { display: none !important; }
    #tb-stock-grid td:nth-child(1) { grid-area: id; font-size: 15px; color: var(--text) !important; }
    #tb-stock-grid td:nth-child(1)::before { content: '📦'; margin-right: 8px; font-size: 14px; display: inline-flex !important; } /* Package icon for ID */
    #tb-stock-grid td:nth-child(2) { grid-area: data; background: rgba(0,0,0,0.2) !important; padding: 14px !important; border-radius: 10px; justify-content: center; border: 1px inset rgba(255,255,255,0.05) !important; font-size: 15px; font-weight: 600; letter-spacing: 1px; color: #fff; }
    #tb-stock-grid td:nth-child(3) { grid-area: status; justify-content: flex-end; align-items: flex-start; text-align: right; }
    #tb-stock-grid td:nth-child(4) { grid-area: actions; justify-content: center; padding-top: 8px !important; border-top: 1px solid rgba(255,255,255,0.05) !important; margin-top: 4px; }
    #tb-stock-grid td:nth-child(4) button { width: 100%; min-height: 48px; font-size: 15px; font-weight: 600; border-radius: 10px; }
    
    #tb-users td:first-child span { display: none !important; } /* Hide the ID text */

    /* Logs Mobile Format */
    .logs-card-container { margin: 0; padding: 12px !important; background: var(--s1) !important; border-radius: 16px !important; border: 1px solid var(--border) !important; width: 100%; box-shadow: 0 4px 20px -5px rgba(0,0,0,0.1) !important; }
    .logs-grid { display: block; }
    .mobile-only-tabs { display: flex !important; margin: 0 0 16px 0; width: 100%; border-radius: 12px; padding: 4px; background: rgba(0,0,0,0.05); gap: 4px; position: relative; border-bottom: none; }
    .dark-theme .mobile-only-tabs, .oled-theme .mobile-only-tabs, body:not(.light-theme) .mobile-only-tabs { background: rgba(0,0,0,0.3); }
    .mobile-only-tabs .tab { flex: 1; text-align: center; display: flex; align-items: center; justify-content: center; padding: 10px 4px; font-size: 13px; font-weight: 700; border-radius: 8px; margin: 0; transition: all 0.2s ease; color: var(--dim); background: transparent; border: none; }
    .mobile-only-tabs .tab.active { background: var(--s2); color: var(--text); box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.05); border: 1px solid var(--border2); border-bottom: none !important; }
    .pc-only-hdr { display: none !important; }
    .log-column { background: transparent; border-radius: 0; box-shadow: none; border: none; padding: 0 16px; }

    /* Mobile Folders Collapsible */
    .mobile-cat-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,0.05); color: var(--dim); transition: 0.3s; cursor: pointer; }
    .mobile-cat-toggle.rotated svg { transform: rotate(180deg); }
    .mobile-cat-list { display: none; flex-direction: column; gap: 12px; width: 100%; border-top: 1px dashed var(--border); padding-top: 12px; position:relative; }
    .mobile-cat-list.open { display: flex; margin-top: 12px; }
    .folder-grid { display: flex !important; flex-direction: column; }
    
    /* Order Filters & Topup Filters on Mobile */
    #order-tabs, #topup-tabs, #co-tabs, #warranty-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; border: none; padding: 0; box-shadow: none; background: transparent; margin-bottom: 16px; min-width: 100%; }
    #order-tabs .tab, #topup-tabs .tab, #co-tabs .tab, #warranty-tabs .tab { width: 100%; text-align: center; border: 1px solid rgba(255,255,255,0.05); background: var(--s2); border-radius: 12px; padding: 12px 4px; font-size: 13px; font-weight: 700; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: center; }
    #order-tabs .tab.active, #topup-tabs .tab.active, #co-tabs .tab.active, #warranty-tabs .tab.active { background: var(--s1); color: var(--text); border: 1px solid var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.05); border-bottom: 1px solid var(--accent) !important; }
    
    .resp-grid-2 { grid-template-columns: 1fr !important; }
}

/* ════ WARRANTY STYLES ════ */
.warranty-pending-row { background: rgba(245,158,11,0.04); animation: warrantyPulse 3s infinite; }
@keyframes warrantyPulse { 0%,100%{background:rgba(245,158,11,0.04)} 50%{background:rgba(245,158,11,0.08)} }

.btn-sm { padding: 6px 14px !important; font-size: 12px !important; border-radius: 8px !important; }
.btn-g { background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3); }
.btn-g:hover { background: rgba(16,185,129,0.25); }
.btn-r { background: rgba(239,68,68,0.15); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); }
.btn-r:hover { background: rgba(239,68,68,0.25); }
.btn-p { background: rgba(99,102,241,0.15); color: #818cf8; border: 1px solid rgba(99,102,241,0.3); }
.btn-p:hover { background: rgba(99,102,241,0.25); }

.badge.b-cyan { background: rgba(6,182,212,0.15); color: #06b6d4; }
.badge.b-blue { background: rgba(59,130,246,0.15); color: #3b82f6; }

.empty-row td { text-align: center; padding: 60px 20px !important; color: var(--dim); }
.empty-row .big { font-size: 48px; margin-bottom: 12px; }
.empty-row p { font-size: 14px; }

/* ══════════════════════════════════════ */
/* WARRANTY CARD UI */
/* ══════════════════════════════════════ */

.wr-counter {
    flex: 1;
    background: var(--s2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: 0.2s;
}
.wr-counter:hover { background: var(--s3); }
.wr-counter.has-items { border-color: var(--yellow); background: rgba(234, 179, 8, 0.05); }
.wr-counter.has-items .wr-counter-num { color: var(--yellow); }

.wr-c-bank.has-items { border-color: var(--orange); background: rgba(249, 115, 22, 0.05); }
.wr-c-bank.has-items .wr-counter-num { color: var(--orange); }

.wr-c-done:hover { border-color: var(--green); }

.wr-counter-num { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 4px; }
.wr-counter-label { font-size: 13px; color: var(--dim); font-weight: 500; }

.wr-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--s2);
    border-radius: 12px;
    border: 1px dashed var(--border);
}

.wr-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--s1);
    border: 1.5px solid var(--border2);
    border-radius: 12px;
    cursor: pointer;
    transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.wr-card:hover { 
    border-color: var(--accent); 
    background: var(--s2);
    transform: translateY(-1px); 
    box-shadow: 0 6px 18px rgba(56,189,248,0.15); 
}
.wr-card-pending { border-left: 5px solid var(--yellow); background: rgba(234, 179, 8, 0.04); }
.wr-card-bank { border-left: 5px solid var(--orange); background: rgba(249, 115, 22, 0.04); }

/* Light theme overrides for perfect contrast */
body.light-theme .wr-card {
    background: #ffffff;
    border: 1.5px solid rgba(0, 0, 0, 0.16);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
body.light-theme .wr-card:hover {
    background: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.12);
}
body.light-theme .wr-card-pending {
    background: rgba(234, 179, 8, 0.05);
}
body.light-theme .wr-card-bank {
    background: rgba(249, 115, 22, 0.05);
}

.wr-card-avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--s3);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 700; color: var(--text);
    flex-shrink: 0;
}

.wr-card-body { flex: 1; min-width: 0; }
.wr-card-row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.wr-card-name { font-size: 14px; font-weight: 700; color: var(--text); }
.wr-card-chatid { font-size: 12px; color: var(--dim); background: var(--s2); padding: 2px 6px; border-radius: 4px; }
.wr-card-product { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; }

.wr-card-row2 {
    font-size: 13px; color: var(--dim);
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-bottom: 8px;
}

.wr-card-row3 { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--dim); flex-wrap: wrap; }

.wr-qbtn {
    border: 1px solid var(--border);
    background: var(--s2);
    color: var(--text);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}
.wr-qbtn:hover { background: var(--s3); }
.wr-qbtn-done { border-color: var(--green); color: var(--green); background: rgba(16,185,129,0.1); }
.wr-qbtn-done:hover { background: var(--green); color: #000; }
.wr-qbtn-del { border-color: var(--pink); color: var(--pink); background: rgba(244,63,94,0.1); }
.wr-qbtn-del:hover { background: var(--pink); color: #fff; }

/* ════ CHARTS GRID RESPONSIVE ════ */
@media (max-width: 1024px) {
    .charts-grid {
        grid-template-columns: 1fr !important;
    }
}