* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg: #0f1117; --card: #1a1d28; --card2: #252836; --accent: #6c5ce7; --accent2: #a29bfe;
  --text: #e4e6eb; --text2: #8b8e99; --border: #2d3042; --danger: #e74c3c; --success: #2ecc71;
  --warn: #f39c12; --font: 'Segoe UI', -apple-system, sans-serif;
}
body { font-family: var(--font); background: var(--bg); color: var(--text); }

/* Login */
.login-screen {
  min-height: 100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, #0a0e27, #1a1040, #0d1b2a);
}
.login-card {
  background: var(--card); padding:48px 40px; border-radius:16px; text-align:center;
  box-shadow: 0 20px 60px rgba(0,0,0,.4); min-width:360px;
}
.login-card h1 { font-size:28px; margin-bottom:8px; }
.login-card .subtitle { color:var(--text2); margin-bottom:32px; }
.login-card input {
  width:100%; padding:12px 16px; background:var(--card2); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:14px; margin-bottom:12px; outline:none;
}
.login-card input:focus { border-color:var(--accent); }
.login-card button {
  width:100%; padding:14px; background:var(--accent); color:#fff; border:none;
  border-radius:8px; font-size:16px; font-weight:600; cursor:pointer; margin-top:8px;
}
.login-card button:hover { background:var(--accent2); }
.error { color:var(--danger); font-size:13px; margin-top:12px; }

/* App Layout */
.app { display:flex; min-height:100vh; }
.sidebar {
  width:240px; background:var(--card); border-right:1px solid var(--border);
  display:flex; flex-direction:column; flex-shrink:0;
}
.sidebar-header { padding:24px 20px; border-bottom:1px solid var(--border); }
.sidebar-header h2 { font-size:18px; }
.nav-list { list-style:none; padding:12px 0; flex:1; }
.nav-item {
  padding:12px 20px; cursor:pointer; display:flex; align-items:center; gap:10px;
  color:var(--text2); transition: all .2s;
}
.nav-item:hover { color:var(--text); background:var(--card2); }
.nav-item.active { color:var(--accent2); background:rgba(108,92,231,.1); border-right:3px solid var(--accent); }
.nav-icon { font-size:18px; }
.sidebar-footer { padding:16px 20px; border-top:1px solid var(--border); }
.btn-logout {
  width:100%; padding:10px; background:transparent; border:1px solid var(--border);
  color:var(--text2); border-radius:8px; cursor:pointer;
}
.btn-logout:hover { color:var(--danger); border-color:var(--danger); }
.badge {
  background:var(--accent); color:#fff; font-size:11px; padding:2px 8px;
  border-radius:10px; font-weight:600;
}
.unread-badge { background:var(--danger); margin-left:auto; }

/* Content */
.content { flex:1; padding:32px; overflow-y:auto; }
.page { display:none; }
.page.active { display:block; }
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; flex-wrap:wrap; gap:12px; }
.page-header h2 { flex-shrink:0; }
.header-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.header-actions select, .header-actions input {
  padding:8px 12px; background:var(--card2); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-size:13px; outline:none;
}

/* Stats */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:16px; margin-top:20px; }
.stat-card {
  background:var(--card); border-radius:12px; padding:24px; text-align:center;
  border:1px solid var(--border);
}
.stat-card.accent { border-color:var(--accent); background:rgba(108,92,231,.08); }
.stat-card.warn { border-color:var(--warn); background:rgba(243,156,18,.08); }
.stat-num { font-size:36px; font-weight:700; margin-bottom:4px; }
.stat-label { color:var(--text2); font-size:13px; }

/* Tables */
.data-table { width:100%; border-collapse:collapse; }
.data-table th, .data-table td {
  padding:12px 16px; text-align:left; border-bottom:1px solid var(--border);
}
.data-table th { color:var(--text2); font-weight:600; font-size:13px; background:var(--card); position:sticky; top:0; }
.data-table td { font-size:14px; }
.data-table tr:hover td { background:var(--card2); }
.data-table input[type=checkbox] { accent-color:var(--accent); }

/* Status badges */
.status { padding:4px 10px; border-radius:6px; font-size:12px; font-weight:600; }
.status.unused { background:rgba(139,142,153,.15); color:var(--text2); }
.status.printed { background:rgba(108,92,231,.15); color:var(--accent2); }
.status.shipped { background:rgba(243,156,18,.15); color:var(--warn); }
.status.activated { background:rgba(46,204,113,.15); color:var(--success); }

/* Buttons */
.btn-primary {
  padding:8px 20px; background:var(--accent); color:#fff; border:none;
  border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; white-space:nowrap;
}
.btn-primary:hover { background:var(--accent2); }
.btn-secondary { padding:8px 20px; background:var(--card2); color:var(--text); border:1px solid var(--border); border-radius:8px; cursor:pointer; font-size:13px; }
.btn-sm { padding:4px 12px; font-size:12px; border:1px solid var(--border); background:var(--card2); color:var(--text); border-radius:6px; cursor:pointer; }
.btn-sm:hover { border-color:var(--accent); }
.btn-sm.accent { background:var(--accent); color:#fff; border-color:var(--accent); }
.btn-sm.danger { color:var(--danger); border-color:var(--danger); }
.btn-sm.danger:hover { background:var(--danger); color:#fff; }
.batch-actions { padding:12px 16px; background:var(--card2); border-radius:8px; margin-bottom:16px; display:flex; gap:8px; align-items:center; }

/* Modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-content { background:var(--card); padding:32px; border-radius:12px; min-width:400px; max-width:90vw; }
.modal-content h3 { margin-bottom:20px; }
.modal-content label { display:block; margin-bottom:12px; font-size:14px; }
.modal-content input[type=number] {
  padding:8px 12px; background:var(--card2); border:1px solid var(--border);
  border-radius:8px; color:var(--text); width:100px; margin-left:8px;
}
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
#genCodes { width:100%; height:200px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:12px; margin:12px 0; font-family:monospace; resize:none; }

/* Messages */
.messages-layout { display:flex; gap:0; height:calc(100vh - 140px); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.conv-list { width:280px; border-right:1px solid var(--border); overflow-y:auto; background:var(--card); flex-shrink:0; }
.conv-item { padding:14px 16px; cursor:pointer; border-bottom:1px solid var(--border); }
.conv-item:hover, .conv-item.active { background:var(--card2); }
.conv-item .phone { font-weight:600; font-size:14px; }
.conv-item .preview { color:var(--text2); font-size:12px; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-item .unread-dot { width:8px; height:8px; background:var(--danger); border-radius:50%; display:inline-block; margin-left:4px; }
.chat-panel { flex:1; display:flex; flex-direction:column; }
.chat-header { padding:16px 20px; border-bottom:1px solid var(--border); font-weight:600; background:var(--card); }
.chat-messages { flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:10px; }
.chat-bubble { max-width:70%; padding:10px 14px; border-radius:12px; font-size:14px; line-height:1.5; }
.chat-bubble.user { background:var(--card2); align-self:flex-start; border-bottom-left-radius:4px; }
.chat-bubble.admin { background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
.chat-bubble.ai { background:rgba(46,204,113,.15); align-self:flex-end; border-bottom-right-radius:4px; }
.chat-bubble .meta { font-size:11px; color:var(--text2); margin-top:4px; }
.chat-input { display:flex; gap:8px; padding:12px 16px; border-top:1px solid var(--border); background:var(--card); }
.chat-input input { flex:1; padding:10px 14px; background:var(--card2); border:1px solid var(--border); border-radius:8px; color:var(--text); outline:none; }
.chat-input button { padding:10px 20px; background:var(--accent); color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:600; }
.empty-hint { color:var(--text2); text-align:center; padding:40px; }

/* Pagination */
.pagination { display:flex; gap:4px; margin-top:16px; justify-content:center; }
.pagination button { padding:6px 12px; background:var(--card2); border:1px solid var(--border); border-radius:6px; color:var(--text); cursor:pointer; }
.pagination button.active { background:var(--accent); border-color:var(--accent); }

/* Print */
@media print {
  body * { visibility:hidden; }
  .print-area, .print-area * { visibility:visible; }
  .print-area { position:absolute; left:0; top:0; width:100%; }
  .print-code { display:inline-block; width:45%; margin:8px 2%; padding:12px; border:2px dashed #333; text-align:center; font-family:monospace; font-size:14px; page-break-inside:avoid; }
  .print-code .brand { font-size:11px; color:#666; }
}
.print-area { display:none; }

@media (max-width: 768px) {
  .app { flex-direction:column; }
  .sidebar { width:100%; flex-direction:row; overflow-x:auto; }
  .nav-list { display:flex; padding:0; }
  .nav-item { white-space:nowrap; border-right:none !important; }
  .sidebar-header, .sidebar-footer { display:none; }
  .content { padding:16px; }
  .messages-layout { flex-direction:column; height:auto; }
  .conv-list { width:100%; max-height:200px; }
}