/* ===== ئامبار باشقۇرۇش سىستېمىسى - Multi-Page Pro UI v4.0 ===== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;}
:root{
  --primary:#3b82f6;--primary-light:#60a5fa;--primary-dark:#2563eb;--primary-darker:#1d4ed8;
  --accent:#f59e0b;--danger:#ef4444;--success:#22c55e;--info:#06b6d4;--warning:#f59e0b;
  --sidebar-width:210px;--header-height:54px;
  --card-bg:#fff;--body-bg:#f0f5ff;--text:#1e293b;--text-muted:#64748b;--text-light:#94a3b8;
  --border:#e5e7eb;--border-light:#f1f5f9;--font-size:14px;
  --transition:all 0.25s ease;
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:18px;--radius-full:50px;
  --shadow-sm:0 1px 2px rgba(0,0,0,0.05);--shadow-md:0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:0 8px 24px rgba(0,0,0,0.1);--shadow-xl:0 16px 40px rgba(0,0,0,0.12);
  --gradient-start:#1d4ed8;--gradient-end:#3b82f6;--secondary:#60a5fa;--secondary-light:#eff6ff;
}
body{font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:var(--body-bg);min-height:100vh;font-size:var(--font-size);color:var(--text);overflow-x:hidden;}
body.dark{--card-bg:#1e293b;--body-bg:#0f172a;--text:#f1f5f9;--text-muted:#94a3b8;--border:#334155;--border-light:#1e293b;--secondary-light:#1e293b;}
.hidden{display:none!important;}

/* ===== Login ===== */
.login-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#1d4ed8,#3b82f6,#60a5fa);z-index:2000;display:flex;justify-content:center;align-items:center;}
.login-box{background:#fff;border-radius:18px;padding:40px 34px;width:90%;max-width:390px;text-align:center;box-shadow:0 20px 50px rgba(29,78,216,0.25);animation:fadeUp .5s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.3)}50%{box-shadow:0 0 0 8px rgba(59,130,246,0)}}
@keyframes toastAnim{0%{opacity:0;transform:translateY(16px)}15%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.login-box h2{color:var(--primary-dark);margin:0 0 6px;font-size:22px;font-weight:800;}
.login-box p{color:var(--text-muted);font-size:12px;margin:0 0 22px;}
.login-input{width:100%;padding:12px 15px;margin:6px 0;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:13px;background:#f8fafc;outline:none;transition:var(--transition);color:var(--text);}
.login-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.1);background:#fff;}
.login-btn{width:100%;padding:12px;background:var(--primary-dark);color:#fff;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:700;cursor:pointer;margin-top:12px;transition:var(--transition);box-shadow:0 4px 12px rgba(29,78,216,.3);}
.login-btn:hover{background:#1e40af;transform:translateY(-1px);}
.login-error{color:var(--danger);font-size:11px;margin-top:6px;min-height:16px;}

/* ===== Layout ===== */
.container{display:flex;min-height:100vh;background:var(--body-bg);max-width:100%;padding:0;}

/* ===== Sidebar ===== */
.sidebar{
  width:var(--sidebar-width);background:linear-gradient(180deg,#1d4ed8 0%,#2563eb 50%,#3b82f6 100%);
  position:fixed;left:0;top:0;bottom:0;z-index:100;display:flex;flex-direction:column;
  transition:var(--transition);box-shadow:2px 0 12px rgba(29,78,216,.12);overflow-y:auto;overflow-x:hidden;
}
.sidebar::-webkit-scrollbar{width:0;}
.sidebar-logo{padding:14px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0;}
.sidebar-logo img{width:30px;height:30px;border-radius:8px;object-fit:contain;background:rgba(255,255,255,.12);padding:2px;}
.sidebar-logo span{color:#fff;font-size:13px;font-weight:800;white-space:nowrap;}
.sidebar-nav{flex:1;padding:6px 0;display:flex;flex-direction:column;gap:1px;}
.sidebar-section{padding:10px 16px 3px;font-size:9px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1px;font-weight:700;}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 16px;color:rgba(255,255,255,.6);
  font-size:12.5px;font-weight:500;cursor:pointer;transition:var(--transition);
  border-left:3px solid transparent;text-decoration:none;position:relative;white-space:nowrap;
}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav-item.active{background:rgba(255,255,255,.12);color:#fff;font-weight:700;border-left-color:#fff;}
.nav-item .nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.nav-item .nav-badge{position:absolute;right:10px;background:#ef4444;color:#fff;font-size:9px;padding:1px 5px;border-radius:8px;font-weight:700;}
/* Sidebar sub-items */
.nav-sub{display:none;flex-direction:column;background:rgba(0,0,0,.08);}
.nav-sub.open{display:flex;}
.nav-sub .nav-item{padding-left:42px;font-size:11.5px;border-left:none;}
.nav-item .nav-arrow{margin-left:auto;font-size:10px;transition:transform .2s;color:rgba(255,255,255,.4);}
.nav-item.expanded .nav-arrow{transform:rotate(90deg);}
.sidebar-footer{padding:10px 16px;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0;}
.sidebar-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:6px;border-radius:var(--radius-md);transition:var(--transition);}
.sidebar-user:hover{background:rgba(255,255,255,.07);}
.sidebar-user-avatar{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;overflow:hidden;border:2px solid rgba(255,255,255,.2);flex-shrink:0;}
.sidebar-user-avatar img{width:100%;height:100%;object-fit:cover;}
.sidebar-user-info{flex:1;min-width:0;}
.sidebar-user-info .name{color:#fff;font-size:11px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-user-info .role{color:rgba(255,255,255,.4);font-size:9px;}

/* ===== Main ===== */
.main-content{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column;min-height:100vh;transition:var(--transition);}

/* ===== Header ===== */
.top-header{
  height:var(--header-height);background:#fff;display:flex;align-items:center;
  justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.header-left{display:flex;align-items:center;gap:10px;}
.sidebar-toggle{width:32px;height:32px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition);font-size:17px;color:var(--text-muted);}
.sidebar-toggle:hover{background:var(--secondary-light);color:var(--primary);}
.header-search{display:flex;align-items:center;background:var(--secondary-light);border-radius:var(--radius-full);padding:0 12px;width:260px;border:1.5px solid transparent;transition:var(--transition);}
.header-search:focus-within{border-color:var(--primary);background:#fff;box-shadow:0 0 0 2px rgba(59,130,246,.08);}
.header-search input{border:none;background:transparent;padding:7px 0;font-size:12px;outline:none;flex:1;color:var(--text);}
.header-search input::placeholder{color:var(--text-light);}
.header-search .search-icon{color:var(--text-light);font-size:13px;margin-right:6px;}
.header-right{display:flex;align-items:center;gap:4px;}
.header-btn{width:32px;height:32px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--transition);font-size:15px;color:var(--text-muted);position:relative;}
.header-btn:hover{background:var(--secondary-light);color:var(--primary);}
.header-btn .badge-dot{position:absolute;top:4px;right:4px;width:7px;height:7px;background:var(--danger);border-radius:50%;border:1.5px solid #fff;}
.header-user{display:flex;align-items:center;gap:7px;cursor:pointer;padding:3px 10px 3px 3px;border-radius:var(--radius-full);transition:var(--transition);}
.header-user:hover{background:var(--secondary-light);}
.header-user-avatar{width:30px;height:30px;border-radius:50%;overflow:hidden;border:2px solid var(--border);}
.header-user-avatar img{width:100%;height:100%;object-fit:cover;}
.header-user-name{font-size:12px;font-weight:600;color:var(--text);}
.header-user-arrow{font-size:10px;color:var(--text-light);}

/* ===== Page Content ===== */
.page-content{flex:1;padding:18px;}

/* ===== Breadcrumb ===== */
.breadcrumb{font-size:11px;color:var(--text-light);margin-bottom:14px;}
.breadcrumb a{color:var(--primary);text-decoration:none;}

/* ===== Page Views (ھەر بىر ئىقتىدار ئايرىم كۆرۈنۈش) ===== */
.page-view{display:none;animation:fadeUp .3s ease;}
.page-view.active{display:block;}

/* ===== Dashboard Cards ===== */
.dashboard-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px;}
.dash-card{border-radius:var(--radius-lg);padding:18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:var(--transition);color:#fff;position:relative;overflow:hidden;}
.dash-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12);}
.dash-card:nth-child(1){background:linear-gradient(135deg,#3b82f6,#60a5fa);}
.dash-card:nth-child(2){background:linear-gradient(135deg,#06b6d4,#22d3ee);}
.dash-card:nth-child(3){background:linear-gradient(135deg,#22c55e,#4ade80);}
.dash-card:nth-child(4){background:linear-gradient(135deg,#f59e0b,#fbbf24);}
.dash-card::before{content:'';position:absolute;top:-14px;right:-14px;width:50px;height:50px;background:rgba(255,255,255,.1);border-radius:50%;}
.dash-card-icon{font-size:26px;flex-shrink:0;opacity:.9;}
.dash-card-info{flex:1;}
.dash-card-label{font-size:11px;opacity:.85;margin-bottom:2px;}
.dash-card-value{font-size:24px;font-weight:800;line-height:1.1;}
.dash-card-sub{font-size:10px;opacity:.7;margin-top:1px;}

/* ===== Module Grid (ئىقتىدار مودۇل كارتىلىرى) ===== */
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;margin-bottom:20px;}
.module-card{
  background:#fff;border-radius:var(--radius-lg);padding:24px 16px;text-align:center;
  cursor:pointer;transition:var(--transition);border:1.5px solid var(--border-light);
  box-shadow:var(--shadow-sm);
}
.module-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:var(--shadow-md);}
.module-card-icon{
  width:52px;height:52px;border-radius:var(--radius-md);margin:0 auto 10px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  background:var(--secondary-light);color:var(--primary);transition:var(--transition);
}
.module-card:hover .module-card-icon{background:var(--primary);color:#fff;}
.module-card-name{font-size:12px;font-weight:600;color:var(--text);}

/* ===== Content Card ===== */
.content-card{background:#fff;border-radius:var(--radius-lg);padding:18px;margin-bottom:16px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);}
.content-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--border-light);}
.content-card-title{font-size:15px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px;}

/* ===== Quick Actions ===== */
.quick-actions{display:flex;gap:8px;flex-wrap:wrap;padding:12px 16px;background:#fff;border-radius:var(--radius-lg);margin-bottom:16px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);align-items:center;}
.quick-actions .btn{font-size:11px;padding:7px 12px;border-radius:var(--radius-sm);}

/* ===== Search ===== */
.search-bar{display:none;}
.search-count{font-size:11px;color:var(--text-muted);}

/* ===== Lock ===== */
.lock-panel{background:#fff;border-radius:var(--radius-lg);padding:10px 16px;margin-bottom:14px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);}
.lock-status{padding:5px 12px;border-radius:var(--radius-full);color:#fff;font-weight:600;font-size:12px;}
.lock-status.locked{background:var(--danger);}
.lock-status.unlocked{background:var(--success);}
.lock-input{display:flex;gap:6px;}
.lock-input input{padding:7px 12px;border:1.5px solid var(--border);border-radius:var(--radius-full);font-size:12px;letter-spacing:3px;text-align:center;background:#f8fafc;width:100px;outline:none;}
.lock-input input:focus{border-color:var(--primary);}

/* ===== Stats ===== */
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:14px;}
.stat-card{border-radius:var(--radius-lg);padding:12px;color:#fff;text-align:center;cursor:pointer;transition:var(--transition);position:relative;overflow:hidden;}
.stat-card:nth-child(1){background:linear-gradient(135deg,#3b82f6,#60a5fa);}
.stat-card:nth-child(2){background:linear-gradient(135deg,#06b6d4,#22d3ee);}
.stat-card:nth-child(3){background:linear-gradient(135deg,#22c55e,#4ade80);}
.stat-card:nth-child(4){background:linear-gradient(135deg,#f59e0b,#fbbf24);}
.stat-card:nth-child(5){background:linear-gradient(135deg,#ef4444,#f87171);}
.stat-card::before{content:'';position:absolute;top:-14px;right:-14px;width:44px;height:44px;background:rgba(255,255,255,.08);border-radius:50%;}
.stat-card:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.1);}
.stat-card .val{font-size:18px;font-weight:800;margin:2px 0;}
.stat-card .lbl{font-size:10px;opacity:.85;}

/* ===== Table ===== */
.toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px;background:#fff;border-radius:var(--radius-lg);padding:10px 16px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);}
.table-wrapper{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border-light);box-shadow:var(--shadow-sm);background:#fff;}
table{width:100%;border-collapse:collapse;font-size:12px;table-layout:auto;}
th{background:var(--primary);color:#fff;padding:10px 7px;font-weight:600;font-size:11px;position:sticky;top:0;text-align:center;white-space:nowrap;vertical-align:middle;}
td{text-align:center;border-bottom:1px solid var(--border-light);color:var(--text);white-space:nowrap;vertical-align:middle;padding:0 5px;height:44px;}
tr:hover td{background:#f0f7ff;}
tr:nth-child(even) td{background:#fafbff;}
.product-img{width:32px;height:32px;object-fit:cover;border-radius:6px;cursor:pointer;vertical-align:middle;display:block;margin:0 auto;}

/* ===== Buttons ===== */
.btn{padding:7px 14px;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer;transition:var(--transition);display:inline-flex;align-items:center;gap:4px;}
.btn:hover{transform:translateY(-1px);filter:brightness(1.05);}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{background:var(--primary-dark);}
.btn-secondary{background:var(--secondary-light);color:var(--primary);border:1px solid var(--border);}
.btn-secondary:hover{background:#dbeafe;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-info{background:var(--info);color:#fff;}
.btn-success{background:var(--success);color:#fff;}
.action-btns{display:flex;gap:3px;justify-content:center;align-items:center;}
.edit-btn{padding:4px 9px;border-radius:var(--radius-sm);font-size:10px;font-weight:600;cursor:pointer;border:none;background:var(--primary);color:#fff;white-space:nowrap;transition:var(--transition);}
.del-btn{padding:4px 9px;border-radius:var(--radius-sm);font-size:10px;font-weight:600;cursor:pointer;border:none;background:var(--danger);color:#fff;white-space:nowrap;transition:var(--transition);}
.print-btn{padding:4px 9px;border-radius:var(--radius-sm);font-size:10px;font-weight:600;cursor:pointer;border:none;background:var(--info);color:#fff;white-space:nowrap;transition:var(--transition);}
.badge{padding:2px 7px;border-radius:var(--radius-full);font-size:10px;display:inline-block;line-height:1.5;vertical-align:middle;font-weight:600;}
.badge-v{background:#ede9fe;color:#7c3aed;}
.badge-b{background:#fff7ed;color:#ea580c;}
.badge-n{background:#f0fdf4;color:#16a34a;}

/* ===== Modal ===== */
.modal{display:none;position:fixed;inset:0;background:rgba(15,23,42,.4);z-index:1000;justify-content:center;align-items:center;backdrop-filter:blur(3px);opacity:0;transition:opacity .25s ease;}
.modal.show{opacity:1;}
.modal-content{background:var(--card-bg);border-radius:var(--radius-xl);padding:20px;width:92%;max-width:580px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-xl);transform:scale(.88) translateY(14px);opacity:0;transition:all .3s cubic-bezier(.34,1.56,.64,1);}
.modal.show .modal-content{transform:scale(1) translateY(0);opacity:1;}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;padding-bottom:10px;border-bottom:1.5px solid var(--border);}
.modal-header h3{margin:0;color:var(--text);flex:1;text-align:center;font-size:15px;}
.close-btn{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-muted);line-height:1;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:var(--transition);}
.close-btn:hover{color:var(--danger);background:#fef2f2;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.form-field{display:flex;flex-direction:column;gap:3px;}
.form-field label{font-size:11px;font-weight:600;color:var(--primary);}
.form-field input,.form-field select,.form-field textarea{padding:8px 11px;border:1.5px solid var(--border);border-radius:var(--radius-md);font-size:12px;background:#fff;outline:none;transition:var(--transition);color:var(--text);}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,.08);}
.full-width{grid-column:span 2;}
.modal-footer{display:flex;gap:10px;margin-top:14px;}
.modal-footer .btn{flex:1;padding:10px;font-size:13px;font-weight:700;border-radius:var(--radius-md);}

/* ===== Gallery ===== */
.gallery-upload-btn{background:var(--primary);color:#fff;padding:10px;border-radius:var(--radius-md);text-align:center;cursor:pointer;margin:0 0 10px;font-weight:600;}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:340px;overflow-y:auto;padding:3px;}
.gallery-item{position:relative;background:var(--secondary-light);border-radius:var(--radius-md);padding:4px;cursor:pointer;border:2px solid transparent;transition:var(--transition);}
.gallery-item:hover{border-color:var(--primary);}
.gallery-item img{width:100%;height:76px;object-fit:cover;border-radius:5px;display:block;}
.gallery-del{position:absolute;top:3px;right:3px;background:var(--danger);color:#fff;border:none;border-radius:50%;width:18px;height:18px;font-size:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;}

/* ===== AI Panel ===== */
.ai-panel{background:#fff;border-radius:var(--radius-lg);padding:14px;margin-top:14px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);}
.ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:8px;}
.ai-card{background:var(--secondary-light);border-radius:var(--radius-md);padding:10px;text-align:center;border:1px solid #dbeafe;}
.ai-card .val{font-size:16px;font-weight:800;color:var(--primary);}
.ai-card .lbl{font-size:10px;color:var(--text-muted);margin-top:1px;}

/* ===== Toast ===== */
.toast{position:fixed;bottom:20px;right:20px;color:#fff;padding:10px 16px;border-radius:var(--radius-md);font-size:12px;z-index:9999;pointer-events:none;animation:toastAnim 2.5s ease forwards;box-shadow:var(--shadow-lg);font-weight:600;}
.toast.ok{background:var(--success);}
.toast.err{background:var(--danger);}

/* ===== Footer ===== */
.contact-bar{background:#fff;border-radius:var(--radius-lg);padding:10px 16px;margin-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;color:var(--text-muted);font-size:11px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);}
.server-status{background:#fff;border-radius:var(--radius-lg);padding:8px 16px;margin-top:8px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;color:var(--text-muted);font-size:10px;border:1px solid var(--border-light);box-shadow:var(--shadow-sm);}
.status-dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px;}
.status-dot.online{background:var(--success);box-shadow:0 0 4px var(--success);}
.status-dot.offline{background:var(--danger);box-shadow:0 0 4px var(--danger);}

/* ===== Color Panel ===== */
.color-panel{position:absolute;top:100%;right:0;background:rgba(255,255,255,.98);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:var(--radius-xl);padding:12px;box-shadow:var(--shadow-xl);z-index:200;width:250px;transform:translateY(-8px) scale(.96);transform-origin:top right;opacity:0;transition:all .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none;}
.color-panel.open{transform:translateY(0) scale(1);opacity:1;pointer-events:all;}
.color-panel-title{font-size:11px;font-weight:700;color:var(--primary);margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;gap:3px;}
.color-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:6px;}
.color-item{display:flex;align-items:center;gap:4px;background:#f8fafc;border:1px solid var(--border);padding:4px 7px;border-radius:var(--radius-sm);font-size:10px;font-weight:600;color:var(--text);}
.color-item input[type=color]{width:22px;height:18px;border:none;border-radius:3px;cursor:pointer;padding:0;background:none;}
.reset-btn{background:var(--primary);border:none;color:#fff!important;-webkit-text-fill-color:#fff!important;padding:4px 10px;border-radius:var(--radius-full);cursor:pointer;font-size:10px;font-weight:600;}
.color-float-btn{display:none;}

/* ===== Pagination ===== */
.pagination{display:flex;justify-content:center;align-items:center;gap:4px;padding:12px 0;}
.pagination .page-btn{width:30px;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;color:var(--text);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition);}
.pagination .page-btn:hover{border-color:var(--primary);color:var(--primary);}
.pagination .page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary);}

/* ===== Overlay & Responsive ===== */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:999;}
.top-bar{display:none!important;}
@media(max-width:768px){
  .sidebar-overlay.show{display:block;}
  .sidebar{transform:translateX(-100%);position:fixed;z-index:1000;}
  .sidebar.open{transform:translateX(0);}
  .main-content{margin-left:0;}
  .dashboard-cards{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .module-grid{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;}
  .full-width{grid-column:span 1;}
  .header-search{display:none;}
  .page-content{padding:12px;}
}
@media(max-width:480px){
  .dashboard-cards,.stats-grid{grid-template-columns:1fr;}
  .module-grid{grid-template-columns:repeat(2,1fr);}
}
@media print{
  .sidebar,.top-header,.quick-actions,.lock-panel,.ai-panel,.contact-bar,.server-status,.action-btns{display:none!important;}
  .main-content{margin-left:0!important;}
  .page-content{padding:0!important;}
  .table-wrapper{border:none!important;box-shadow:none!important;}
}