/* ==== RESET & BASE ==== */
*,*::before,*::after { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body { font-family:'Inter',-apple-system,sans-serif; background:#f8fafc; color:#0f172a; line-height:1.6; min-height:100vh; display:flex; flex-direction:column; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; }
button { font-family:inherit; cursor:pointer; border:none; }
input,textarea,select,button { font-family:inherit; font-size:inherit; }
.container { max-width:1280px; margin:0 auto; padding:0 20px; width:100%; }

/* ==== HEADER ==== */
.site-header { background:#fff; border-bottom:1px solid #e2e8f0; position:sticky; top:0; z-index:100; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.header-inner { display:grid; grid-template-columns:auto 1fr auto; align-items:center; height:72px; gap:20px; }
.logo { display:flex; align-items:center; gap:10px; font-family:'Poppins',sans-serif; font-weight:700; font-size:20px; color:#1e3a8a; }
.logo-icon { width:40px; height:40px; background:linear-gradient(135deg,#1e3a8a,#3730a3); color:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.nav-links { display:flex; align-items:center; gap:8px; justify-content:center; }
.header-actions { display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.nav-links > a, .dd-btn { padding:9px 14px; border-radius:8px; font-size:14px; color:#475569; font-weight:500; transition:.2s; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.nav-links > a:hover, .dd-btn:hover { background:#f1f5f9; color:#1e293b; }
.nav-dropdown { position:relative; }
.dd-menu { position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1px solid #e2e8f0; border-radius:10px; padding:6px; min-width:180px; box-shadow:0 10px 30px rgba(0,0,0,0.1); opacity:0; visibility:hidden; transform:translateY(8px); transition:.18s; }
.nav-dropdown:hover .dd-menu { opacity:1; visibility:visible; transform:translateY(0); }
.dd-menu a { display:block; padding:10px 12px; border-radius:6px; font-size:14px; color:#334155; }
.dd-menu a:hover { background:#f1f5f9; color:#1e3a8a; }
.nav-bell { position:relative; width:38px; height:38px; border-radius:10px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; color:#475569; }
.nav-bell span { position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px; background:#ef4444; color:#fff; border-radius:99px; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.hamburger { display:none; background:none; font-size:22px; color:#334155; padding:8px; }
.btn { padding:9px 16px; border-radius:8px; font-weight:600; font-size:14px; transition:.2s; display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.btn-primary { background:linear-gradient(135deg,#0062ff,#60a5fa); color:#fff; }
.btn-primary:hover { transform:translateY(-1px); box-shadow:0 8px 24px rgba(59,130,246,0.4); }
.btn-outline { border:2px solid #0044ff; color:#0044ff; }
.btn-outline:hover { background:#1e3a8a; color:#fff; }
.btn-accent { background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; }
.btn-accent:hover { box-shadow:0 8px 20px rgba(249,115,22,0.3); }
.btn-success { background:#16a34a; color:#fff; }
.btn-danger { background:#dc2626; color:#fff; }
.btn-gray { background:#e2e8f0; color:#334155; }
.btn-gray:hover { background:#cbd5e1; }
.btn-sm { padding:6px 12px; font-size:13px; }
.btn-lg { padding:13px 24px; font-size:15px; }
.dd-btn.admin { color:#f97316; }
.dd-btn.admin:hover { background:#fff7ed; }

/* ==== HERO ==== */
.hero { padding:60px 0 50px; background:linear-gradient(135deg,#1e3a8a 0%, #4338ca 45%, #f97316 130%); color:#fff; position:relative; overflow:hidden; }
main.site-main > section.hero:first-child,
main.site-main > .hero:first-child { margin-top:-44px; }
main.site-main > section.hero:first-child,
main.site-main > .hero:first-child { padding-top:104px; border-top:0; }
.hero::before { content:''; position:absolute; top:-200px; right:-150px; width:500px; height:500px; background:radial-gradient(circle,rgba(255,255,255,0.12),transparent 70%); border-radius:50%; }
.hero::after { content:''; position:absolute; bottom:-250px; left:-100px; width:500px; height:500px; background:radial-gradient(circle,rgba(249,115,22,0.18),transparent 70%); border-radius:50%; }
.site-header + .hero, .site-header + main + .hero, header.site-header + section.hero { /* no extra spacing */ }
.site-header { z-index:101; }
.hero-inner { position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:48px; align-items:center; }
.hero h1 { font-family:'Poppins',sans-serif; font-size:48px; font-weight:800; line-height:1.15; margin-bottom:18px; }
.hero h1 span { background:linear-gradient(135deg,#fdba74,#f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero p { font-size:18px; opacity:0.92; margin-bottom:30px; max-width:550px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.hero-img { display:flex; justify-content:center; align-items:center; }
.hero-img-box { width:100%; max-width:420px; aspect-ratio:1; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.15); backdrop-filter:blur(4px); border-radius:24px; padding:40px; display:flex; align-items:center; justify-content:center; position:relative; transform:rotate(-2deg); }
.hero-img-box::after { content:''; position:absolute; inset:-10px; background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent 50%); border-radius:24px; z-index:-1; }
.hero-img-box i { font-size:160px; opacity:0.9; }
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
.feature { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:12px; padding:16px; display:flex; align-items:flex-start; gap:12px; backdrop-filter:blur(4px); }
.feature i { color:#fdba74; font-size:20px; margin-top:2px; width:24px; text-align:center; }
.feature strong { display:block; font-size:14px; margin-bottom:2px; }
.feature span { font-size:13px; opacity:0.88; }

/* ==== MAIN ==== */
.site-main { flex:1; padding:40px 0; }
.page-wrap { background:#fff; border-radius:14px; padding:28px; box-shadow:0 1px 3px rgba(0,0,0,0.04); border:1px solid #e2e8f0; }
.page-title { font-family:'Poppins',sans-serif; font-size:24px; font-weight:700; color:#0f172a; margin-bottom:4px; }
.page-sub { color:#64748b; margin-bottom:24px; font-size:14px; }

/* ==== FORMS ==== */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full { grid-column:1/-1; }
.form-group label { display:block; font-size:13px; font-weight:600; color:#334155; margin-bottom:6px; }
.form-group label .req { color:#dc2626; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:11px 13px; border:2px solid #e2e8f0; border-radius:9px; font-size:14px; outline:none; transition:.18s; background:#fff; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:#1e3a8a; box-shadow:0 0 0 3px rgba(30,58,138,0.1); }
.form-group textarea { resize:vertical; min-height:120px; }
.form-actions { display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }

/* ==== AUTH ==== */
.auth-wrap { max-width:480px; margin:40px auto; }
.auth-card { background:#fff; border-radius:18px; padding:40px; box-shadow:0 10px 40px rgba(15,23,42,0.08); border:1px solid #e2e8f0; }
.auth-head { text-align:center; margin-bottom:28px; }
.auth-icon { width:64px; height:64px; margin:0 auto 14px; border-radius:16px; background:linear-gradient(135deg,#1e3a8a,#4338ca); display:flex; align-items:center; justify-content:center; color:#fff; font-size:24px; }
.auth-head h2 { font-family:'Poppins',sans-serif; font-size:26px; font-weight:700; color:#0f172a; margin-bottom:4px; }
.auth-head p { color:#64748b; font-size:14px; }
.auth-card .form-grid { grid-template-columns:1fr; }
.auth-bottom { text-align:center; margin-top:22px; font-size:14px; color:#64748b; }
.auth-bottom a { color:#1e3a8a; font-weight:600; }
.auth-bottom a:hover { text-decoration:underline; }
.auth-switch { display:flex; background:#f1f5f9; border-radius:10px; padding:4px; margin-bottom:24px; }
.auth-switch button { flex:1; padding:10px; border-radius:8px; font-weight:600; font-size:13px; color:#475569; background:none; transition:.15s; }
.auth-switch button.active { background:#fff; color:#1e3a8a; box-shadow:0 1px 3px rgba(0,0,0,0.08); }

/* ==== DASHBOARD LAYOUT ==== */
.dashboard { display:grid; grid-template-columns:260px 1fr; gap:24px; min-height:calc(100vh - 152px); }
.sidebar { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:18px 12px; height:fit-content; position:sticky; top:92px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.sidebar-head { padding:10px 12px 16px; border-bottom:1px solid #f1f5f9; margin-bottom:10px; }
.sidebar-head .name { font-weight:700; color:#0f172a; font-size:15px; }
.sidebar-head .email { font-size:12px; color:#64748b; margin-top:2px; }
.sidebar-menu { display:flex; flex-direction:column; gap:2px; }
.sidebar-menu a { padding:10px 12px; border-radius:8px; font-size:14px; color:#475569; font-weight:500; display:flex; align-items:center; gap:10px; transition:.15s; }
.sidebar-menu a:hover { background:#f1f5f9; color:#0f172a; }
.sidebar-menu a.active { background:linear-gradient(135deg,#1e3a8a,#3730a3); color:#fff; box-shadow:0 4px 12px rgba(30,58,138,0.25); }
.sidebar-menu a i { width:20px; text-align:center; font-size:14px; }
.sidebar-section { font-size:11px; color:#94a3b8; text-transform:uppercase; letter-spacing:0.5px; font-weight:700; padding:14px 12px 6px; }
.sidebar-foot { border-top:1px solid #f1f5f9; margin-top:14px; padding-top:14px; }
.sidebar-foot a { color:#dc2626; }
.sidebar-foot a:hover { background:#fef2f2; color:#dc2626; }

.dash-content { min-width:0; }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
.stat-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:20px; box-shadow:0 1px 3px rgba(0,0,0,0.04); position:relative; overflow:hidden; }
.stat-card::after { content:''; position:absolute; top:0; right:0; width:60px; height:60px; border-radius:0 14px 0 100%; opacity:0.1; }
.stat-card .num { font-family:'Poppins',sans-serif; font-size:30px; font-weight:800; color:#0f172a; }
.stat-card .lbl { font-size:13px; color:#64748b; margin-top:4px; font-weight:500; }
.stat-card .icon { position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; }
.stat-card.blue .icon { background:linear-gradient(135deg,#1e3a8a,#3730a3); }
.stat-card.orange .icon { background:linear-gradient(135deg,#f97316,#ea580c); }
.stat-card.green .icon { background:linear-gradient(135deg,#16a34a,#15803d); }
.stat-card.gray .icon { background:linear-gradient(135deg,#475569,#334155); }

.panel-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.panel-head { padding:18px 22px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.panel-head h3 { font-family:'Poppins',sans-serif; font-size:16px; font-weight:700; color:#0f172a; }
.panel-body { padding:20px 22px; }

/* ==== TABLES ==== */
table.tbl { width:100%; border-collapse:collapse; font-size:14px; }
.tbl th { text-align:left; padding:12px; background:#f8fafc; color:#64748b; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:0.3px; border-bottom:1px solid #e2e8f0; }
.tbl td { padding:14px 12px; border-bottom:1px solid #f1f5f9; color:#334155; vertical-align:middle; }
.tbl tr:hover td { background:#fafafa; }
.badge { display:inline-block; padding:4px 10px; border-radius:99px; font-size:12px; font-weight:600; }
.badge.bg-blue-100 { background:#dbeafe; color:#1e40af; }
.badge.bg-yellow-100 { background:#fef3c7; color:#92400e; }
.badge.bg-purple-100 { background:#ede9fe; color:#6d28d9; }
.badge.bg-green-100 { background:#dcfce7; color:#15803d; }
.badge.bg-gray-100 { background:#f1f5f9; color:#475569; }
.badge.bg-red-100 { background:#fee2e2; color:#991b1b; }
.badge.bg-orange-100 { background:#ffedd5; color:#9a3412; }
.badge.bg-pink-100 { background:#fce7f3; color:#9f1239; }
.badge.bg-slate-100 { background:#e2e8f0; color:#334155; }
.tbl-actions { display:flex; gap:6px; flex-wrap:wrap; }

/* ==== TOOLBAR ==== */
.toolbar { display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:18px; }
.toolbar .filters { display:flex; gap:8px; flex-wrap:wrap; }
.toolbar .search { padding:10px 14px; border:2px solid #e2e8f0; border-radius:9px; font-size:14px; min-width:240px; outline:none; transition:.15s; }
.toolbar .search:focus { border-color:#1e3a8a; box-shadow:0 0 0 3px rgba(30,58,138,0.1); }
.toolbar select, .toolbar input[type="date"] { padding:9px 12px; border:2px solid #e2e8f0; border-radius:8px; font-size:13px; background:#fff; outline:none; }
.chip-filter { padding:7px 13px; border-radius:99px; font-size:13px; font-weight:600; border:2px solid #e2e8f0; background:#fff; color:#475569; transition:.15s; }
.chip-filter.active, .chip-filter:hover { background:linear-gradient(135deg,#1e3a8a,#3730a3); color:#fff; border-color:transparent; }

/* ==== TICKET DETAIL ==== */
.ticket-header { background:linear-gradient(135deg,#1e3a8a,#3730a3); color:#fff; border-radius:14px; padding:24px 28px; margin-bottom:20px; }
.ticket-header h2 { font-family:'Poppins',sans-serif; font-size:22px; font-weight:700; margin-bottom:8px; }
.ticket-meta { display:flex; gap:16px; flex-wrap:wrap; font-size:13px; opacity:0.9; }
.ticket-meta span { display:inline-flex; align-items:center; gap:5px; }
.ticket-meta .badge { color:#0f172a !important; }
.chat-area { display:flex; flex-direction:column; gap:16px; max-height:560px; overflow-y:auto; padding:6px 4px 10px; }
.chat-msg { display:flex; gap:10px; align-items:flex-start; width:100%; }
.chat-msg.me { flex-direction:row-reverse; }
.chat-avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:#fff; }
.chat-avatar.customer { background:linear-gradient(135deg,#f97316,#ea580c); }
.chat-avatar.admin { background:linear-gradient(135deg,#1e3a8a,#3730a3); }
.chat-bubble { max-width:72%; background:#f1f5f9; border-radius:14px; padding:12px 16px; }
.chat-msg.me .chat-bubble { border-bottom-right-radius:4px; }
.chat-msg:not(.me) .chat-bubble { border-bottom-left-radius:4px; }
.chat-msg.from-admin.me .chat-bubble { background:linear-gradient(135deg,#1e3a8a,#3730a3); color:#fff; }
.chat-msg.from-customer.me .chat-bubble { background:linear-gradient(135deg,#f97316,#ea580c); color:#fff; }
.chat-msg.me .chat-bubble .sender { color:rgba(255,255,255,0.9); }
.chat-msg.me .chat-bubble .meta { color:rgba(255,255,255,0.75); }
.chat-bubble .meta { font-size:11px; opacity:0.7; margin-top:6px; display:flex; justify-content:space-between; gap:10px; }
.chat-bubble .sender { font-weight:700; font-size:12px; margin-bottom:4px; opacity:0.85; }
.chat-bubble .msg { white-space:pre-wrap; word-break:break-word; font-size:14px; line-height:1.6; }
.chat-attachments { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:8px; margin-top:10px; }
.att-item { background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); border-radius:10px; padding:10px; text-align:center; color:#fff; }
.chat-msg:not(.me) .chat-bubble .att-item { background:#fff; color:#0f172a; border-color:#e2e8f0; }
.att-item i { font-size:26px; margin-bottom:4px; display:block; }
.att-item span { font-size:11px; display:block; opacity:0.9; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-item a { color:inherit; }
.reply-box { margin-top:20px; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; background:#fff; }
.reply-toolbar { display:flex; gap:8px; padding:10px 14px; border-bottom:1px solid #f1f5f9; background:#fafafa; align-items:center; flex-wrap:wrap; }
.reply-toolbar label { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:#fff; border:1px solid #e2e8f0; border-radius:8px; font-size:13px; color:#475569; cursor:pointer; font-weight:500; transition:.15s; }
.reply-toolbar label:hover { background:#f1f5f9; color:#0f172a; }
.reply-toolbar select { padding:7px 10px; border:1px solid #e2e8f0; border-radius:8px; background:#fff; font-size:13px; outline:none; }
.reply-box textarea { width:100%; min-height:120px; padding:16px; border:none; outline:none; font-size:14px; resize:vertical; }
.reply-foot { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:#fafafa; border-top:1px solid #f1f5f9; gap:12px; flex-wrap:wrap; }
.upload-preview { display:flex; gap:8px; flex-wrap:wrap; padding:0 14px 10px; }
.upload-preview .file { display:inline-flex; align-items:center; gap:6px; background:#eef2ff; color:#3730a3; padding:5px 10px; border-radius:6px; font-size:12px; font-weight:600; }
.upload-preview .file button { background:none; color:#991b1b; font-size:14px; padding:0 0 0 4px; }

/* ==== FAQ ==== */
.faq-wrap { max-width:860px; margin:0 auto; }
.faq-item { border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; margin-bottom:10px; background:#fff; transition:.2s; }
.faq-item.open { border-color:#1e3a8a; box-shadow:0 6px 20px rgba(30,58,138,0.08); }
.faq-q { padding:18px 22px; font-weight:600; color:#0f172a; display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:16px; }
.faq-q i { transition:.25s; color:#64748b; flex-shrink:0; }
.faq-item.open .faq-q i { transform:rotate(180deg); color:#1e3a8a; }
.faq-a { padding:0 22px; max-height:0; overflow:hidden; transition:max-height .25s ease; color:#475569; font-size:14px; }
.faq-item.open .faq-a { max-height:600px; padding:0 22px 20px; }

/* ==== MODAL ==== */
.modal-backdrop { position:fixed; inset:0; background:rgba(15,23,42,0.6); z-index:999; display:flex; align-items:center; justify-content:center; padding:20px; display:none; }
.modal-backdrop.show { display:flex; }
.modal { background:#fff; border-radius:14px; max-width:520px; width:100%; max-height:90vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.modal-head { padding:18px 22px; border-bottom:1px solid #f1f5f9; display:flex; align-items:center; justify-content:space-between; }
.modal-head h3 { font-family:'Poppins',sans-serif; font-size:18px; font-weight:700; color:#0f172a; }
.modal-head .close { background:none; font-size:22px; color:#64748b; padding:4px 8px; border-radius:6px; }
.modal-head .close:hover { background:#f1f5f9; }
.modal-body { padding:22px; }

/* ==== TOAST ==== */
#toast-container { position:fixed; top:90px; right:20px; z-index:1000; display:flex; flex-direction:column; gap:10px; }
.toast { padding:14px 18px; border-radius:10px; color:#fff; font-size:14px; font-weight:500; min-width:260px; box-shadow:0 10px 30px rgba(0,0,0,0.2); animation:toastIn .25s ease; display:flex; align-items:center; gap:10px; }
.toast.success { background:#16a34a; }
.toast.error { background:#dc2626; }
.toast.info { background:#1e3a8a; }
.toast.warn { background:#f97316; }
@keyframes toastIn { from { transform:translateX(40px); opacity:0; } to { transform:translateX(0); opacity:1; } }

/* ==== FOOTER ==== */
.site-footer { background:#0f172a; color:#cbd5e1; margin-top:60px; }
.footer-inner { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; padding:50px 0 40px; }
.foot-col h4 { font-family:'Poppins',sans-serif; font-size:15px; font-weight:700; color:#fff; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.foot-col p { font-size:14px; margin-bottom:10px; color:#94a3b8; display:flex; align-items:center; gap:8px; }
.foot-col a { display:block; font-size:14px; color:#94a3b8; padding:4px 0; transition:.15s; }
.foot-col a:hover { color:#f97316; }
.copy { text-align:center; padding:18px; border-top:1px solid #1e293b; font-size:13px; color:#64748b; }

/* ==== MISC ==== */
.empty { padding:60px 20px; text-align:center; color:#64748b; }
.empty i { font-size:48px; color:#cbd5e1; margin-bottom:14px; display:block; }
.empty h3 { font-family:'Poppins',sans-serif; color:#334155; font-size:18px; margin-bottom:6px; }
.empty p { font-size:14px; }
.pagination { display:flex; gap:4px; justify-content:center; margin-top:20px; flex-wrap:wrap; }
.pagination a { padding:8px 13px; border:1px solid #e2e8f0; border-radius:8px; font-size:13px; color:#475569; background:#fff; }
.pagination a.active { background:linear-gradient(135deg,#1e3a8a,#3730a3); color:#fff; border-color:transparent; }
.alert { padding:14px 16px; border-radius:10px; font-size:14px; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.alert.success { background:#dcfce7; color:#15803d; }
.alert.error { background:#fee2e2; color:#991b1b; }
.alert.info { background:#dbeafe; color:#1e40af; }
.alert.warn { background:#ffedd5; color:#9a3412; }

/* ==== RESPONSIVE ==== */
@media (max-width: 1024px) {
    .hero-inner { grid-template-columns:1fr; gap:36px; text-align:center; }
    .hero h1 { font-size:36px; }
    .hero p { margin-left:auto; margin-right:auto; }
    .features { grid-template-columns:1fr 1fr; }
    .hero-actions { justify-content:center; }
    .stat-grid { grid-template-columns:1fr 1fr; }
    .dashboard { grid-template-columns:1fr; }
    .sidebar { position:static; display:none; }
    .sidebar.open { display:block; }
    .hamburger { display:block; }
    .footer-inner { grid-template-columns:1fr 1fr; }
}
@media (max-width: 768px) {
    .header-inner { display:flex; justify-content:space-between; gap:12px; }
    .header-actions .hamburger { display:block; }
    .nav-links { display:none; position:absolute; top:72px; left:0; right:0; background:#fff; padding:14px; flex-direction:column; align-items:stretch; gap:4px; border-bottom:1px solid #e2e8f0; box-shadow:0 6px 12px rgba(0,0,0,0.06); }
    .nav-links.open { display:flex; }
    .hero { padding:50px 0 40px; }
    .hero h1 { font-size:28px; }
    .hero p { font-size:15px; }
    .features { grid-template-columns:1fr; }
    .stat-grid { grid-template-columns:1fr 1fr; gap:10px; }
    .stat-card { padding:14px; }
    .stat-card .num { font-size:22px; }
    .page-wrap { padding:18px; }
    .form-grid { grid-template-columns:1fr; }
    .footer-inner { grid-template-columns:1fr; gap:24px; padding:30px 0; }
    .tbl-wrap { overflow-x:auto; }
    .tbl-wrap table { min-width:700px; }
    .chat-bubble { max-width:88%; }
    .panel-card { overflow-x:auto; }
    .panel-card .tbl { min-width:680px; }
}

/* ==== THEME TOGGLE ==== */
.theme-toggle {
    width:40px; height:40px; border-radius:10px;
    background:#f1f5f9; color:#475569;
    display:inline-flex; align-items:center; justify-content:center;
    transition:.2s;
}
.theme-toggle:hover { background:#e2e8f0; color:#1e3a8a; transform:rotate(15deg); }
html.dark .theme-toggle { background:#1e293b; color:#fbbf24; }
html.dark .theme-toggle:hover { background:#334155; }

/* ==== DARK MODE ==== */
html.dark { color-scheme:dark; }
html.dark body { background:#0f172a; color:#e2e8f0; }
html.dark .site-header { background:#1e293b; border-color:#334155; }
html.dark .logo { color:#93c5fd; }
html.dark .logo-icon { background:linear-gradient(135deg,#3b82f6,#6366f1); }
html.dark .nav-links > a, html.dark .dd-btn { color:#cbd5e1; }
html.dark .nav-links > a:hover, html.dark .dd-btn:hover { background:#334155; color:#f1f5f9; }
html.dark .dd-btn.admin { color:#fb923c; }
html.dark .dd-btn.admin:hover { background:#431407; }
html.dark .dd-menu { background:#1e293b; border-color:#334155; box-shadow:0 10px 30px rgba(0,0,0,0.5); }
html.dark .dd-menu a { color:#cbd5e1; }
html.dark .dd-menu a:hover { background:#334155; color:#93c5fd; }
html.dark .nav-bell { background:#334155; color:#cbd5e1; }
html.dark .hamburger { color:#cbd5e1; }

html.dark .page-wrap { background:#1e293b; border-color:#334155; }
html.dark .page-title { color:#f1f5f9; }
html.dark .page-sub { color:#94a3b8; }
html.dark .form-group label { color:#cbd5e1; }
html.dark .form-group input, html.dark .form-group select, html.dark .form-group textarea {
    background:#0f172a; border-color:#334155; color:#e2e8f0;
}
html.dark .form-group input:focus, html.dark .form-group select:focus, html.dark .form-group textarea:focus {
    border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.15);
}
html.dark .btn-gray { background:#334155; color:#cbd5e1; }
html.dark .btn-gray:hover { background:#475569; }

html.dark .panel-card { background:#1e293b; border-color:#334155; }
html.dark .panel-head { border-color:#334155; }
html.dark .panel-head h3 { color:#f1f5f9; }
html.dark .sidebar { background:#1e293b; border-color:#334155; }
html.dark .sidebar-section { color:#64748b; }
html.dark .sidebar-menu a { color:#cbd5e1; }
html.dark .sidebar-menu a:hover { background:#334155; color:#fff; }
html.dark .sidebar-menu a.active { background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; }
html.dark .sidebar-head .name { color:#fb923c; }
html.dark .sidebar-head .email { color:#94a3b8; }
html.dark .sidebar-foot { border-color:#334155; }
html.dark .sidebar-foot a { color:#cbd5e1; }
html.dark .sidebar-foot a:hover { background:#334155; }

html.dark .tbl { background:#1e293b; }
html.dark .tbl thead { background:#0f172a; }
html.dark .tbl th { color:#94a3b8; border-color:#334155; }
html.dark .tbl td { border-color:#334155; color:#e2e8f0; }
html.dark .tbl tbody tr:hover { background:#334155; }
html.dark .badge.bg-green-100 { background:#064e3b; color:#6ee7b7; }
html.dark .badge.bg-red-100 { background:#450a0a; color:#fca5a5; }
html.dark .badge.bg-yellow-100 { background:#422006; color:#fde047; }
html.dark .badge.bg-orange-100 { background:#431407; color:#fdba74; }
html.dark .badge.bg-gray-100, html.dark .badge.bg-slate-100 { background:#334155; color:#cbd5e1; }
html.dark .badge.bg-blue-100 { background:#1e3a8a; color:#bfdbfe; }
html.dark .badge.bg-purple-100 { background:#581c87; color:#d8b4fe; }

html.dark .empty { color:#94a3b8; }
html.dark .empty i { color:#475569; }
html.dark .empty h3 { color:#cbd5e1; }

html.dark .auth-card { background:#1e293b; border-color:#334155; box-shadow:0 10px 40px rgba(0,0,0,0.4); }
html.dark .auth-head h2 { color:#f1f5f9; }
html.dark .auth-head p { color:#94a3b8; }
html.dark .auth-switch { background:#334155; }
html.dark .auth-switch button { color:#94a3b8; }
html.dark .auth-switch button.active { background:#1e293b; color:#93c5fd; }
html.dark .auth-bottom { color:#94a3b8; }
html.dark .auth-bottom a { color:#93c5fd; }

html.dark .modal { background:#1e293b; }
html.dark .modal-head { border-color:#334155; }
html.dark .modal-head h3 { color:#f1f5f9; }
html.dark .modal-head .close { color:#94a3b8; }
html.dark .modal-head .close:hover { background:#334155; }

html.dark .faq-item { background:#1e293b; border-color:#334155; }
html.dark .faq-item.open { border-color:#3b82f6; }
html.dark .faq-q { color:#f1f5f9; }
html.dark .faq-item.open .faq-q i { color:#93c5fd; }
html.dark .faq-a { color:#cbd5e1; }

html.dark .site-footer { background:#020617; border-top:1px solid #1e293b; }
html.dark .foot-col h4 { color:#f1f5f9; }
html.dark .foot-col p, html.dark .foot-col a { color:#94a3b8; }
html.dark .copy { border-color:#1e293b; }

html.dark .hero { background:linear-gradient(135deg,#1e3a8a 0%, #4c1d95 45%, #7c2d12 130%); }
html.dark .home-section { background:#1e293b; }
html.dark .home-section.alt { background:#0f172a; }
html.dark .stat-card { background:#0f172a; border-color:#334155; }
html.dark .stat-card .num { color:#fff; }
html.dark .stat-card .label { color:#94a3b8; }
html.dark .chat-wrap { background:#0f172a; border-color:#334155; }
html.dark .chat-sidebar { border-color:#334155; background:#1e293b; }
html.dark .chat-main { background:#0f172a; }
html.dark .chat-item { border-color:#334155; }
html.dark .chat-item:hover { background:#1e293b; }
html.dark .chat-item.active { background:#1e3a8a; }
html.dark .bubble-cust { background:#334155; color:#e2e8f0; }
html.dark .bubble-admin { background:#1e3a8a; }
html.dark .chat-input-area { background:#1e293b; border-color:#334155; }
html.dark .chat-input-area textarea { background:#0f172a; border-color:#334155; color:#e2e8f0; }
html.dark .alert.success { background:#064e3b; color:#6ee7b7; }
html.dark .alert.error { background:#450a0a; color:#fca5a5; }
html.dark .alert.info { background:#1e3a8a; color:#bfdbfe; }
html.dark .alert.warn { background:#431407; color:#fdba74; }
html.dark .toolbar { background:#1e293b; border-color:#334155; }
html.dark .search { background:#0f172a; border-color:#334155; color:#e2e8f0; }
html.dark .filters select { background:#0f172a; border-color:#334155; color:#e2e8f0; }
html.dark .note-item { background:#0f172a; border-color:#334155; }