:root {
  --bg: #07111f;
  --bg-2: #0b1728;
  --card: rgba(255,255,255,0.96);
  --glass: rgba(255,255,255,0.08);
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15,23,42,0.08);
  --accent: #22c55e;
  --accent-2: #2563eb;
  --danger: #ef4444;
  --warning: #f59e0b;
  --purple: #7c3aed;
  --shadow: 0 18px 50px rgba(2,8,23,0.22);
  --radius: 22px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, Arial, sans-serif; background: radial-gradient(circle at top, #1a3351 0%, #0f172a 48%, #020617 100%); color: white; }
.hidden { display: none !important; }
button { border: none; cursor: pointer; border-radius: 14px; padding: 11px 14px; font-weight: 700; }
button.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; }
button.secondary { background: #e2e8f0; color: #0f172a; }
button.danger { background: var(--danger); color: white; }
button.full { width: 100%; }
input, select, textarea { width: 100%; border: 1px solid var(--line); padding: 12px 14px; border-radius: 14px; outline: none; font-size: 14px; font-family: inherit; }
textarea { min-height: 92px; resize: vertical; }
label { display:block; font-size:13px; color: var(--muted); margin-bottom: 6px; }

.login-shell { min-height: 100vh; display:grid; place-items:center; padding: 20px; }
.login-card { width: 100%; max-width: 430px; background: rgba(255,255,255,0.95); color: var(--text); border-radius: 30px; padding: 30px; box-shadow: var(--shadow); }
.login-card h1 { margin: 12px 0 8px; }
.login-card p { color: var(--muted); margin-bottom: 18px; }
.login-card input { margin-bottom: 12px; }
.demo-list { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); display:grid; gap: 8px; color: var(--muted); font-size: 13px; }
.brand-mark { width: 58px; height: 58px; border-radius: 18px; display:grid; place-items:center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:white; font-weight: 800; font-size: 22px; box-shadow: var(--shadow); }
.brand-mark.small { width: 44px; height: 44px; font-size: 16px; border-radius: 14px; }

.admin-shell { display:grid; grid-template-columns: 300px 1fr; min-height: 100vh; }
.sidebar { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); backdrop-filter: blur(18px); border-right: 1px solid rgba(255,255,255,0.08); padding: 22px 18px; display:flex; flex-direction:column; justify-content:space-between; gap: 24px; }
.logo-block { display:flex; align-items:center; gap: 14px; margin-bottom: 22px; }
.logo-block h2 { margin: 0; font-size: 20px; }
.muted { color: rgba(255,255,255,0.65); font-size: 13px; }
.menu { display:grid; gap: 10px; }
.menu-btn { width:100%; text-align:left; background: transparent; color: white; padding: 14px 16px; border:1px solid rgba(255,255,255,0.08); }
.menu-btn.active { background: linear-gradient(135deg, rgba(34,197,94,0.24), rgba(37,99,235,0.22)); border-color: rgba(255,255,255,0.16); }
.sidebar-footer { border-top:1px solid rgba(255,255,255,0.08); padding-top: 16px; }
.user-name { font-weight: 700; margin-bottom: 4px; }

.main-panel { padding: 22px; }
.glass { background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)); border: 1px solid rgba(255,255,255,0.1); border-radius: 28px; box-shadow: var(--shadow); }
.topbar { display:flex; justify-content:space-between; gap:18px; align-items:center; padding: 22px 24px; }
.topbar h1 { margin: 0 0 8px; font-size: 30px; }
.topbar p { margin: 0; color: rgba(255,255,255,0.72); }

.kpi-grid-admin { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 18px 0 20px; }
.kpi-card { background: rgba(255,255,255,0.96); color: var(--text); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); }
.kpi-card strong { display:block; margin-top: 10px; font-size: 30px; }
.view-root { display:grid; gap: 18px; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-2-form { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.full-span { grid-column: 1 / -1; }
.panel-card { background: rgba(255,255,255,0.96); color: var(--text); border-radius: 24px; padding: 20px; box-shadow: var(--shadow); }
.card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom: 14px; }
.card-head h3 { margin: 0; }
.top-space { margin-top: 18px; }
.stack-list { display:grid; gap: 12px; }
.row-line, .order-card, .customer-card, .alert-row, .staff-row { border: 1px solid var(--line); border-radius: 18px; padding: 14px; }
.alert-row { background: #fff7ed; }
.staff-row { display:flex; align-items:center; justify-content:space-between; gap: 14px; }
.order-card { display:grid; gap: 12px; }
.row-between { display:flex; justify-content:space-between; gap: 14px; align-items:flex-start; }
.wrap { flex-wrap: wrap; }
.align-right { text-align:right; }
.title-row { display:flex; gap: 10px; align-items:center; font-weight: 700; margin-bottom: 6px; }
.item-tags { display:flex; gap: 8px; flex-wrap: wrap; }
.item-tags span { background: #f1f5f9; color: #334155; padding: 7px 10px; border-radius: 999px; font-size: 12px; }
.action-row { display:flex; gap: 8px; flex-wrap: wrap; }
.small-space { margin-top: 4px; }

.chip { display:inline-flex; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #e2e8f0; color: #0f172a; }
.chip.warn, .chip.orange { background: #ffedd5; color: #9a3412; }
.chip.info, .chip.blue { background: #dbeafe; color: #1d4ed8; }
.chip.green { background: #dcfce7; color: #166534; }
.chip.red { background: #fee2e2; color: #991b1b; }
.chip.purple { background: #ede9fe; color: #6d28d9; }
.chip.soft { background: #f1f5f9; color: #475569; }

.stats-compare { display:grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stats-compare div { border:1px solid var(--line); border-radius: 18px; padding: 14px; }
.stats-compare span { display:block; color: var(--muted); font-size: 13px; }
.stats-compare strong { display:block; margin-top: 8px; font-size: 24px; }
.stats-compare small { color: var(--muted); }
.chart-bars { display:flex; gap: 10px; align-items:flex-end; min-height: 240px; padding-top: 18px; }
.bar-col { flex:1; text-align:center; }
.bar { background: linear-gradient(180deg, var(--accent-2), var(--accent)); border-radius: 18px 18px 6px 6px; width: 100%; }
.bar-label { margin-top: 8px; color: var(--muted); font-size: 12px; }
.bar-val { font-size: 12px; color: #334155; margin-top: 4px; }
.products-mini-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.mini-product { border:1px solid var(--line); border-radius: 18px; padding: 12px; display:grid; gap: 8px; }
.critical-row { background: #fff7ed; }
.empty-state { padding: 28px; text-align:center; color: var(--muted); border: 1px dashed var(--line); border-radius: 20px; }

/* catalog compatibility */
.app-shell { max-width: 1220px; margin: 0 auto; padding: 24px; }
.app-shell.wide { max-width: 1400px; }
.hero { background: linear-gradient(135deg, rgba(34,197,94,0.20), rgba(37,99,235,0.22)); border: 1px solid rgba(255,255,255,0.12); border-radius: 32px; padding: 28px; box-shadow: var(--shadow); backdrop-filter: blur(14px); display:flex; justify-content:space-between; align-items:center; gap:18px; }
.hero h1 { margin: 0 0 10px; font-size: 34px; }
.hero p { margin: 0; color: rgba(255,255,255,0.82); font-size: 15px; }
.hero-pill { background: rgba(255,255,255,0.16); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.grid { display: grid; gap: 22px; margin-top: 22px; }
.catalog-grid { grid-template-columns: 1.6fr 0.95fr; }
.admin-grid-2 { grid-template-columns: 1fr 1fr; }
.card { background: var(--card); color: var(--text); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.toolbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.product-card { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: white; }
.product-card img { width: 100%; height: 170px; object-fit: cover; display: block; }
.product-body { padding: 14px; }
.product-body h3 { margin: 0 0 8px; font-size: 18px; }
.product-body p { margin: 0 0 12px; color: var(--muted); min-height: 38px; font-size: 13px; }
.row { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.price { font-size: 18px; font-weight: 700; }
.stock { color: var(--muted); font-size: 13px; }
.cart-list, .table-list { display: grid; gap: 12px; }
.cart-item, .table-item, .soft-box { padding: 12px; border: 1px solid var(--line); border-radius: 16px; }
.badge { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: #dcfce7; color: #166534; font-size: 12px; font-weight: 700; }
.auth-box { max-width: 420px; margin: 50px auto; }
.tabs { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button.active { background: linear-gradient(135deg,#3b82f6,#22c55e); color: white; }
.small { font-size: 13px; color: var(--muted); }
.mini-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
ul { padding-left: 18px; }

@media (max-width: 1200px) {
  .admin-shell { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
}
@media (max-width: 920px) {
  .grid-2, .grid-2-form, .kpi-grid-admin, .stats-compare, .catalog-grid, .admin-grid-2 { grid-template-columns: 1fr; }
}

/* ================= ADMIN DARK FIX ================= */

/* faqat admin ichida ishlaydi */
.admin-shell,
.main-panel {
  background: #020617 !important;
}

/* barcha kartalar */
.admin-shell .kpi-card,
.admin-shell .panel-card,
.admin-shell .order-card,
.admin-shell .row-line,
.admin-shell .customer-card,
.admin-shell .staff-row,
.admin-shell .stats-compare div,
.admin-shell .mini-product,
.admin-shell .cart-item,
.admin-shell .table-item {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* textlar */
.admin-shell h1,
.admin-shell h2,
.admin-shell h3,
.admin-shell strong,
.admin-shell span,
.admin-shell div {
  color: #f1f5f9 !important;
}

/* muted */
.admin-shell .muted,
.admin-shell .small {
  color: #94a3b8 !important;
}

/* taglar */
.admin-shell .item-tags span {
  background: #334155 !important;
  color: #e2e8f0 !important;
}

/* chip */
.admin-shell .chip {
  background: #334155 !important;
  color: #e2e8f0 !important;
}

/* button */
.admin-shell button.secondary {
  background: #334155 !important;
  color: white !important;
}

/* hover */
.admin-shell .order-card:hover,
.admin-shell .panel-card:hover,
.admin-shell .kpi-card:hover {
  transform: translateY(-2px);
  transition: 0.2s;
}

/* alert */
.admin-shell .alert-row {
  background: rgba(245,158,11,0.15) !important;
  color: #fbbf24 !important;
}
/* Lidlar varonkasi: admin panelning to‘q rangli dizayniga mos. */
.lead-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:24px 0 14px; }
.lead-heading h3 { margin:0 0 4px; }
.admin-shell .lead-total { background:#25344d; color:#e2e8f0 !important; border:1px solid #40516a; padding:8px 14px; border-radius:999px; font-weight:700; }
.lead-board { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); gap:14px; overflow-x:auto; align-items:start; padding-bottom:16px; }
.lead-column { background:#111d30; border:1px solid #34435a; border-top:3px solid #60a5fa; border-radius:16px; padding:14px; min-height:190px; }
.lead-column:nth-child(2) { border-top-color:#a78bfa; }
.lead-column:nth-child(3) { border-top-color:#fbbf24; }
.lead-column:nth-child(4) { border-top-color:#34d399; }
.lead-column:nth-child(5) { border-top-color:#fb7185; }
.lead-column-head { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:2px 0 14px; }
.admin-shell .lead-column-head strong { color:#f8fafc !important; font-size:15px; }
.admin-shell .lead-column-head span { background:#334155; color:#f8fafc !important; padding:4px 10px; border-radius:99px; font-size:12px; font-weight:700; }
.lead-cards { display:grid; gap:10px; }
.lead-card { background:#223148; border:1px solid #40516a; border-radius:12px; padding:14px; display:grid; gap:10px; min-width:0; }
.lead-card-top { display:flex; justify-content:space-between; gap:8px; }
.admin-shell .lead-id, .admin-shell .lead-date { color:#b6c6da !important; font-size:12px; }
.admin-shell .lead-contact, .admin-shell .lead-message, .lead-stage-label { color:#cbd5e1 !important; font-size:13px; }
.lead-contact a, .lead-card a { color:#93c5fd; }
.lead-message { white-space:pre-wrap; overflow-wrap:anywhere; max-height:90px; overflow:auto; }
.lead-stage-label { display:grid; gap:5px; }
.lead-stage-label select { width:100%; background:#111d30; color:#f8fafc; border:1px solid #53657e; }
.admin-shell .lead-empty { color:#b6c6da !important; font-size:13px; padding:26px 8px; text-align:center; border:1px dashed #465871; border-radius:10px; }

.lead-tools { display:grid; gap:10px; margin-top:18px; }
.lead-tool { padding:14px 18px; }
.lead-tool summary { color:#f8fafc; cursor:pointer; font-weight:700; }
.lead-form { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px; }
.lead-form input { flex:1 1 180px; min-width:0; }
.lead-form .muted { flex-basis:100%; font-size:12px; }

.lead-column-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.admin-shell .lead-edit { background:#334155; color:#f8fafc; border:1px solid #53657e; border-radius:8px; padding:3px 8px; cursor:pointer; font-size:16px; line-height:1.2; }
.admin-shell .lead-edit:hover { background:#475d79; }

.lead-scroll-label { color:#a8bad1; font-size:12px; margin:0 0 4px; }
.lead-scroll-top { overflow-x:auto; overflow-y:hidden; height:18px; margin:0 0 8px; scrollbar-color:#8193ab #1e293b; }
.lead-scroll-top > div { height:1px; }
.lead-board { scrollbar-width:none; }
.lead-board::-webkit-scrollbar { display:none; }
.lead-card { cursor:grab; }
.lead-card:active { cursor:grabbing; }
.lead-card.dragging { opacity:.45; }
.lead-column.drag-over { outline:2px solid #60a5fa; background:#223858; }
.lead-modal-backdrop { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.72); display:flex; justify-content:center; align-items:center; padding:20px; }
.lead-modal { width:min(820px,100%); max-height:90vh; overflow:auto; background:#111e32; color:#f1f5f9; border:1px solid #43546f; border-radius:18px; box-shadow:0 20px 70px #0009; }
.lead-modal-head { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; align-items:center; background:#1b2940; padding:20px 24px; border-bottom:1px solid #394a63; }
.lead-modal-head h2 { margin:0 0 5px; }
.lead-modal-body { display:grid; gap:20px; padding:22px 24px; }
.lead-modal-body section { border:1px solid #394a63; border-radius:13px; padding:16px; background:#1b2940; }
.lead-modal-body h3 { margin:0 0 12px; }
.lead-details-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; align-items:end; }
.lead-details-form label { display:grid; gap:6px; font-size:13px; color:#cbd5e1; }
.lead-entry { display:flex; flex-wrap:wrap; gap:8px; align-items:start; }
.lead-entry input:not([type=checkbox]), .lead-entry textarea { flex:1 1 220px; min-width:0; }
.lead-entry textarea { min-height:75px; resize:vertical; }
.lead-modal-list { display:grid; gap:8px; margin-top:12px; }
.lead-task,.lead-note { background:#26374f; border:1px solid #465a76; border-radius:10px; padding:10px 12px; }
.lead-task { display:flex; gap:10px; align-items:flex-start; cursor:pointer; }
.lead-task input { width:auto; margin-top:3px; }
.lead-task span { display:grid; gap:4px; }
.lead-task.is-done strong { text-decoration:line-through; opacity:.65; }
.lead-task small,.lead-note small { display:block; color:#b5c5da; margin-top:4px; }
.admin-shell .lead-note div,.admin-shell .lead-history { color:#e5edf8 !important; white-space:pre-wrap; overflow-wrap:anywhere; }
.lead-modal-empty { color:#b5c5da; font-size:13px; }

/* Varonkada barcha ustunlar to‘liq tashlash maydoni bo‘ladi. */
.lead-board { align-items:stretch; }
.lead-column { box-sizing:border-box; height:min(70vh, 720px); min-height:340px; overflow-y:auto; overscroll-behavior:contain; }
.lead-card, .lead-card-top, .lead-card strong, .lead-card a, .lead-message { min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:break-word; }
.lead-stage-label select { box-sizing:border-box; min-width:0; max-width:100%; }

[data-search][hidden] { display:none !important; }
.crm-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border:1px solid #35465e; border-radius:14px; background:#16243a; margin-bottom:12px; }
#telegramLink { flex-basis:100%; font-size:13px; }
.telegram-connect { color:#7dd3fc; font-weight:700; }
.instagram-settings { color:#cbd5e1; margin-bottom:10px; }
.instagram-settings summary { cursor:pointer; padding:8px 2px; }
.instagram-settings .panel-card { margin-top:8px; }
.lead-heading-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.lead-heading-actions input,.contacts-head input { width:min(340px,100%); }
.contacts-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.contacts-head h3 { margin:0 0 5px; }
.contact-list { display:grid; gap:8px; }
.admin-shell .contact-row { width:100%; display:grid; grid-template-columns:minmax(150px,2fr) minmax(120px,1fr) minmax(120px,1fr); gap:12px; align-items:center; text-align:left; background:#25354c; border:1px solid #415470; color:#f8fafc; border-radius:10px; padding:12px; cursor:pointer; }
.contact-row strong,.contact-row span { overflow-wrap:anywhere; min-width:0; }
.contact-row small { display:block; color:#bdcce0; margin-top:4px; }
.admin-shell .contact-row:hover { background:#30445f; }
.admin-shell .contact-stage { color:#a5d8ff !important; }
@media(max-width:700px) { .lead-heading { align-items:flex-start; flex-direction:column; } .lead-heading-actions { width:100%; } .lead-heading-actions input { flex:1; } .admin-shell .contact-row { grid-template-columns:1fr; gap:5px; } }

/* Ixcham varonka va mijoz kartasi */
.lead-board { grid-auto-columns:250px; gap:10px; }
.lead-column { background:#0f2133; border:0; border-top:3px solid #60a5fa; border-radius:8px; padding:10px; }
.lead-column-head { min-height:42px; padding:0 2px 10px; }
.admin-shell .lead-column-head strong { font-size:13px; text-transform:uppercase; letter-spacing:.02em; }
.admin-shell .lead-column-head span { padding:3px 8px; }
.lead-cards { gap:7px; }
.lead-card { gap:5px; padding:10px; border-radius:7px; background:#1a344c; border-color:#304c68; }
.lead-card:hover { border-color:#68aaf8; background:#203e59; }
.lead-card-top strong { font-size:14px; }
.lead-card-info { font-size:11px; color:#aec1d5; display:flex; align-items:center; gap:5px; }
.lead-source-dot { width:7px; height:7px; display:inline-block; background:#c084fc; border-radius:50%; }
.admin-shell .lead-card-phone { color:#b8d8f3 !important; font-size:13px; }
.admin-shell .lead-card-preview { color:#9eb4cc !important; font-size:12px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.lead-card-footer { display:flex; gap:8px; justify-content:space-between; font-size:10px; overflow:hidden; }
.admin-shell .lead-card-footer span { color:#9fb4cb !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-shell .lead-card-footer span:first-child { max-width:100px; }
.admin-shell .lead-empty { min-height:85px; display:flex; align-items:center; justify-content:center; }
.lead-detail-layout { width:min(1180px,100%); max-height:92vh; overflow:hidden; display:flex; flex-direction:column; background:#102235; }
.lead-detail-top { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 20px; background:#112d42; border-bottom:1px solid #31506a; }
.lead-detail-top h2 { font-size:19px; margin:3px 0 0; }
.detail-eyebrow,.profile-label { color:#91a9c1; font-size:11px; font-weight:700; letter-spacing:.06em; }
.lead-detail-grid { display:grid; grid-template-columns:minmax(250px,330px) minmax(0,1fr); min-height:0; overflow:hidden; }
.lead-profile { overflow:auto; background:#142d40; border-right:1px solid #31506a; padding:20px; }
.lead-profile select { margin-top:8px; width:100%; }
.profile-divider { border-top:1px solid #35516b; margin-top:20px; padding-top:18px; }
.lead-profile-form { display:grid; gap:12px; margin-top:12px; }
.lead-profile-form label { display:grid; gap:5px; color:#b3c5d8; font-size:12px; }
.lead-profile-form input,.lead-profile select { min-width:0; width:100%; box-sizing:border-box; }
.profile-source { color:#aabed1; font-size:12px; }
.lead-activity { overflow:auto; padding:20px; background:#102235; display:grid; align-content:start; gap:14px; }
.activity-intro h3 { margin:0 0 4px; }
.activity-intro p { margin:0; color:#9eb4cb; font-size:12px; }
.activity-box { background:#163146; border:1px solid #31506a; border-radius:9px; padding:15px; min-width:0; }
.activity-box-title { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.activity-dot { width:8px; height:8px; border-radius:50%; background:#60a5fa; }
.activity-dot.ig { background:#c084fc; }.activity-dot.task { background:#fbbf24; }.activity-dot.note { background:#5eead4; }
.admin-shell .activity-count { color:#adc2d8 !important; font-size:12px; }
.lead-history { padding:12px; background:#10283c; border-radius:7px; font-size:13px; }
.lead-modal-list { margin:0 0 12px; }
.lead-task,.lead-note { background:#203f58; border-color:#385c77; }
.lead-modal-empty { color:#9eb4cb; font-size:12px; }
.note-entry textarea { min-height:68px; }
@media(max-width:720px) { .lead-detail-layout { overflow:auto; }.lead-detail-grid { display:block; overflow:visible; }.lead-profile { border-right:0; border-bottom:1px solid #31506a; }.lead-activity { overflow:visible; } }

.lead-profile-form .profile-divider { margin-top:8px; padding-top:14px; }
.profile-balance { color:#a5d8ff; font-weight:700; font-size:12px; }
.profile-summary { display:flex; flex-wrap:wrap; gap:8px; }
.admin-shell .profile-summary span { color:#c8ddf2 !important; background:#203d56; border:1px solid #365773; border-radius:99px; padding:5px 10px; font-size:12px; }
.activity-dot.history { background:#9ca3ff; }
.stage-history-item { border-left:2px solid #6888b2; padding:5px 0 5px 10px; display:grid; gap:3px; font-size:13px; }
.stage-history-item small { color:#a7bad0; }

/* Varonka tepada; qo‘shish va integratsiyalar alohida bo‘limlarda. */
.main-panel, .view-root { min-width:0; }
.kpi-grid-admin:empty { display:none; }
.main-panel.view-leads .topbar { padding:13px 18px; border-radius:17px; }
.main-panel.view-leads .topbar h1 { font-size:22px; margin:0 0 4px; }
.main-panel.view-leads .topbar p { font-size:12px; }
.main-panel.view-leads .view-root { gap:6px; margin-top:12px; }
.main-panel.view-leads .lead-heading { margin:0 0 5px; }
.main-panel.view-leads .lead-heading h3 { font-size:16px; }
.main-panel.view-leads .lead-scroll-label { margin-top:3px; }
.board-add { white-space:nowrap; }
.settings-card { max-width:850px; }
.settings-card h3 { margin:0 0 7px; }
.settings-card > p { margin:0 0 18px; }
.new-lead-form { display:grid; gap:14px; max-width:580px; }
.new-lead-form label { display:grid; gap:6px; color:#c5d4e5; margin:0; }
.new-lead-form button { justify-self:start; }
.settings-stage-form { display:flex; gap:10px; flex-wrap:wrap; }
.settings-stage-form input { flex:1 1 220px; }
.settings-stage-list { display:grid; gap:8px; margin-top:18px; }
.settings-stage-row { display:flex; align-items:center; gap:12px; padding:10px; background:#26374f; border:1px solid #405570; border-radius:10px; }
.settings-stage-row strong { flex:1; }
.admin-shell .settings-stage-number { color:#b9cce0 !important; font-size:12px; }
.integration-instagram { max-width:850px; }

/* Mijoz kartasi sarlavhasida saqlash tugmasi doim ko‘rinadi. */
.lead-detail-top { position:sticky; top:0; z-index:3; }
.lead-detail-title { min-width:0; }
.lead-detail-title h2 { overflow-wrap:anywhere; }
.lead-detail-actions { display:flex; flex-shrink:0; align-items:center; gap:8px; }
.profile-save { white-space:nowrap; }
@media(max-width:480px) { .lead-detail-top { padding:10px 12px; }.lead-detail-title h2 { font-size:15px; }.profile-save { padding:9px 11px; } }

/* Telefon va Telegram Mini App uchun */
.mobile-menu-toggle,.menu-backdrop { display:none; }
.login-hint { color:#8b1e1e !important; font-size:13px; }
.profile-link { display:inline-flex; color:#8bd0ff; font-size:13px; font-weight:700; text-decoration:none; margin-top:2px; }
.profile-link:hover { text-decoration:underline; }
@media(max-width:900px) {
  .admin-shell { display:block; min-height:100dvh; }
  .sidebar { position:fixed; z-index:1200; inset:0 auto 0 0; width:min(300px,85vw); height:100dvh; overflow-y:auto; background:#102036; border-right:1px solid #3a4d66; transform:translateX(-105%); transition:transform .2s ease; padding-top:max(18px,var(--app-safe-top,0px)); }
  .admin-shell.menu-open .sidebar { transform:translateX(0); }
  .admin-shell.menu-open .menu-backdrop { display:block; position:fixed; inset:0; z-index:1190; background:rgba(0,0,0,.6); }
  .mobile-menu-toggle { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; padding:0; flex-shrink:0; color:white; background:#334155; font-size:21px; border-radius:11px; }
  .main-panel { padding:12px; }
  .topbar { gap:8px; padding:12px !important; border-radius:14px; }
  .topbar-title { flex:1; min-width:0; }
  .topbar h1,.main-panel.view-leads .topbar h1 { font-size:18px; }
  .topbar p { display:none; }
  .topbar-actions { display:flex; gap:6px; }
  .topbar-actions button { padding:9px; font-size:12px; }
  .lead-heading { margin:0 0 5px; }
  .lead-board { grid-auto-columns:min(78vw,250px); }
  .lead-column { height:min(65dvh,700px); min-height:300px; }
  .lead-modal-backdrop { padding:0; align-items:stretch; }
  .lead-detail-layout { width:100%; max-height:none; height:100dvh; border-radius:0; border:0; }
  .lead-detail-top { padding-top:max(10px,var(--app-safe-top,0px)); }
  .lead-profile { padding:16px; }
  .lead-activity { padding:16px; }
  .login-shell { padding:16px; min-height:100dvh; }
}
body.telegram-miniapp .main-panel { padding-top:max(12px,var(--app-safe-top,0px)); padding-bottom:max(12px,var(--app-safe-bottom,0px)); }
body.telegram-miniapp .lead-detail-top { padding-top:max(10px,var(--app-safe-top,0px)); }

/* Status nomlari ustun kengligidan chiqmaydi. */
.lead-column-head { min-width:0; }
.admin-shell .lead-column-head strong { flex:1 1 auto; min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; word-break:break-word; line-height:1.25; }
.lead-column-actions { flex:0 0 auto; }

/* Vazifa va shaxsiy bildirishnomalar */
.notification-shell { position:relative; }
.notification-button { position:relative; min-width:42px; }
.admin-shell .notification-count { position:absolute; right:-4px; top:-5px; min-width:19px; height:19px; display:grid; place-items:center; padding:0 4px; border-radius:20px; background:#ef4444; color:white !important; font-size:10px; }
.notifications-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:1100; width:min(390px,calc(100vw - 24px)); max-height:min(70vh,560px); overflow:auto; background:#14283e; border:1px solid #49627c; border-radius:14px; box-shadow:0 15px 45px #0009; }
.notifications-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px; border-bottom:1px solid #3c5068; }
.notifications-head button { font-size:11px; padding:8px; }
.notifications-list { display:grid; gap:5px; padding:8px; }
.admin-shell .notification-item { width:100%; display:grid; gap:5px; text-align:left; background:#203a52; color:#f8fafc; border:1px solid #385670; padding:11px; border-radius:9px; }
.admin-shell .notification-item.unread { border-left:3px solid #60a5fa; background:#294964; }
.admin-shell .notification-item span { color:#d2deeb !important; white-space:pre-wrap; font-size:12px; overflow-wrap:anywhere; }
.notification-item small,.notifications-empty { color:#aec2d8; font-size:11px; }
.notifications-empty { padding:15px; }
.lead-task-content { flex:1; min-width:0; }
.lead-task-content strong { overflow-wrap:anywhere; }
.task-edit { margin-top:8px; color:#a7cef2; font-size:12px; }
.task-edit summary { cursor:pointer; }
.task-edit-form { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.task-edit-form input { flex:1 1 170px; min-width:0; }
.task-time-hint { flex-basis:100%; color:#afc3d8; font-size:11px; }
@media(max-width:900px) { .notifications-panel { position:fixed; top:calc(max(12px,var(--app-safe-top,0px)) + 58px); right:12px; } }

/* Mini-ilovada kontent chetiga yetganda pastga tortish yopishga o‘tmasin. */
body.telegram-miniapp { overscroll-behavior-y: none; }
body.telegram-miniapp .lead-modal, body.telegram-miniapp .lead-profile, body.telegram-miniapp .lead-activity { overscroll-behavior-y: contain; }