:root{
  --navy:#1c2536; --navy-2:#242f45;
  --page-bg:#e4e6eb;
  --card-bg-a:#f8f9fb; --card-bg-b:#f1f2f5;
  --ink:#1c2536; --muted:#6b7280;
  --line:#dcdfe4;
  --tag-blue-bg:#dbe8fb; --tag-blue-ink:#1c4d8a;
  --tag-yellow-bg:#fdf1c7; --tag-yellow-ink:#8a6a12;
  --tag-green-bg:#d9f0e0; --tag-green-ink:#1f6b45;
  --tag-red-bg:#fbdde6; --tag-red-ink:#8a2f45;
  --tag-slate-bg:#e7e9f2; --tag-slate-ink:#3a4266;
  --shadow-card:0 1px 2px rgba(20,20,10,0.05), 0 1px 3px rgba(20,20,10,0.04);
}
*{box-sizing:border-box; font-family:inherit;}
html{font-family:'Inter','Segoe UI',-apple-system,Helvetica,Arial,sans-serif;}
button, input, select, textarea, a{font-family:inherit;}
body{
  margin:0; background:var(--page-bg); color:var(--ink);
  font-family:'Inter','Segoe UI',-apple-system,Helvetica,Arial,sans-serif;
  font-weight:400;
}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);}

.header{
  background:linear-gradient(180deg,#1d4fa5,#173f87);
  border-top:4px solid #0c2a63;
  color:#fff; padding:0; position:relative;
}
.header-inner{
  width:100%; padding:16px 40px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:nowrap;
}
.brand-left{display:flex; align-items:center; gap:14px; min-width:0; flex:1 1 auto;}
.logo-box{
  width:52px; height:52px;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.logo-box img{width:100%; height:100%; object-fit:contain; display:block;}
.brand-text{min-width:0;}
.brand-text .brand-title{
  color:#fff; font-weight:700; font-size:19px; letter-spacing:.01em;
  line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand-text .brand-sub{
  color:#8fd0f7; font-weight:700; font-size:12.5px; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.header-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.user-pill{
  background:rgba(255,255,255,0.16); color:#eef2fa; padding:9px 18px;
  border-radius:20px; font-size:13px; white-space:nowrap;
}
.logout-btn{
  background:rgba(255,255,255,0.22); color:#fff; border:none; cursor:pointer; font-weight:700;
  font-size:13px; padding:10px 20px; border-radius:8px; white-space:nowrap;
}
.logout-btn:hover{background:rgba(255,255,255,0.32);}
.wrap{max-width:1180px; margin:0 auto; padding:26px 30px 60px;}

.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:22px;}
@media(max-width:980px){.cards{grid-template-columns:repeat(2,1fr);}}
.card{
  background:linear-gradient(160deg,var(--card-bg-a),var(--card-bg-b));
  border:1px solid var(--line); border-radius:14px; padding:18px 18px 16px;
  box-shadow:var(--shadow-card);
}
.card .card-top{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.card .avatar{
  width:30px; height:30px; border-radius:50%; background:#e7e2d3;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:12.5px; color:var(--navy);
}
.card .card-title{font-weight:700; font-size:15px; flex:1;}
.conv-pct-badge{
  font-size:11px; font-weight:700; color:var(--tag-green-ink); background:var(--tag-green-bg);
  border-radius:20px; padding:3px 10px; white-space:nowrap; flex-shrink:0;
}
.card .lead-count{font-size:24px; font-weight:900; letter-spacing:-0.02em; margin:2px 0 10px;}
.card .lead-count span{font-size:12px; font-weight:500; color:var(--muted); margin-left:4px; letter-spacing:normal;}
.tag{
  display:inline-block; padding:4px 10px; border-radius:20px;
  font-size:11.5px; font-weight:600; margin:0 5px 5px 0;
}
.tag-new{background:var(--tag-blue-bg); color:var(--tag-blue-ink);}
.tag-disc{background:var(--tag-yellow-bg); color:var(--tag-yellow-ink);}
.tag-conv{background:var(--tag-green-bg); color:var(--tag-green-ink);}
.tag-notc{background:var(--tag-red-bg); color:var(--tag-red-ink);}
.tag-tile, .tag-grout, .tag-bond, .tag-epoxy{background:var(--tag-slate-bg); color:var(--tag-slate-ink);}
.tag-row{margin-top:6px;}

.analytics{
  background:linear-gradient(160deg,var(--card-bg-a),var(--card-bg-b)); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px; margin-bottom:22px;
  box-shadow:var(--shadow-card);
}
.analytics h3{margin:0 0 14px; font-weight:700; font-size:17px; color:var(--navy);}
.analytics-grid{display:grid; grid-template-columns:repeat(9,1fr); gap:12px;}
@media(max-width:980px){.analytics-grid{grid-template-columns:repeat(3,1fr);}}
.stat-box{background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 8px; text-align:center;}
.stat-box .num{font-size:20px; font-weight:900; letter-spacing:-0.02em; color:var(--navy);}
.stat-box .lbl{font-size:10.5px; color:var(--muted); margin-top:2px; text-transform:uppercase; letter-spacing:.03em; font-weight:500;}

.toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; margin-bottom:16px;
}
.toolbar .tabs{display:flex; gap:16px; margin-right:auto;}
.toolbar .tabs a{
  text-decoration:none; color:var(--muted); font-size:13.5px; padding:4px 2px;
  border-bottom:2px solid transparent; cursor:pointer;
}
.toolbar .tabs a.active{color:var(--ink); font-weight:700; border-color:var(--navy);}
.toolbar select, .toolbar input[type=text], .toolbar input[type=date]{
  border:1px solid var(--line); border-radius:8px; padding:7px 10px; font-size:13px; color:var(--ink); background:#fdfdfb;
}
.stats-filter-bar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-bottom:14px;
}
.stats-filter-bar .label{font-size:12.5px; font-weight:600; color:var(--muted);}
.stats-filter-bar .tabs{display:flex; gap:6px;}
.stats-filter-bar .tabs a{
  text-decoration:none; color:var(--muted); font-size:12.5px; font-weight:600; padding:6px 14px;
  border-radius:20px; background:#fff; border:1px solid var(--line); cursor:pointer;
}
.stats-filter-bar .tabs a.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.custom-range{display:flex; align-items:center; gap:12px;}
.custom-range label{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--muted);}
.custom-range input[type=date]{
  border:1px solid var(--line); border-radius:8px; padding:6px 9px; font-size:13px; color:var(--ink); background:#fdfdfb;
}
.pagination{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:16px; font-size:13px; color:var(--muted);
}
.pagination button:disabled{opacity:.45; cursor:not-allowed;}
.spinner{
  width:22px; height:22px; margin:0 auto 10px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--navy);
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}
.leads-panel.is-loading{opacity:.7;}

.btn{
  border:none; border-radius:8px; padding:9px 16px; font-size:13px; font-weight:700;
  cursor:pointer; display:inline-block; text-decoration:none; line-height:1.4;
}
.btn-primary{background:var(--navy); color:#fff;}
.btn-primary:hover{background:#0f1626;}
.btn-outline{background:#fff; border:1px solid var(--line); color:var(--ink);}

.leads-panel{
  background:linear-gradient(160deg,var(--card-bg-a),var(--card-bg-b)); border:1px solid var(--line); border-radius:14px; min-height:220px; padding:8px;
  box-shadow:var(--shadow-card);
}
.leads-empty{text-align:center; padding:60px 20px; color:var(--muted);}
.leads-empty .t1{font-weight:700; font-size:16px; color:var(--ink); margin-bottom:4px;}
.lead-row{
  display:grid; grid-template-columns:1.3fr 1.1fr 1.3fr 1.2fr 1fr auto; gap:10px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:8px;
  cursor:pointer;
}
.lead-row.region-row{
  grid-template-columns:1.15fr 1fr 1.15fr 1fr 1fr 0.9fr auto;
}
.lead-row:hover{border-color:#c9c4b3;}
.lead-row .lname{font-weight:600; font-size:13.5px;}
.lead-row .lsub{font-size:11.5px; color:var(--muted);}

.modal-bg{
  display:none; position:fixed; inset:0; background:rgba(20,20,20,0.42);
  align-items:center; justify-content:center; z-index:50;
}
.modal-bg.open{display:flex;}
.modal{
  background:#fdfcf8; width:92%; max-width:480px; border-radius:14px; padding:26px 26px 22px;
  max-height:88vh; overflow-y:auto;
}
.modal h3{margin:0 0 16px; font-weight:700; color:var(--navy);}
.field{margin-bottom:13px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:5px;}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font-size:13.5px; font-family:inherit; font-weight:400; background:#fff;
}
.field textarea{resize:vertical; min-height:64px;}
.password-input-wrap{position:relative;}
.password-input-wrap input{padding-right:38px;}
.password-toggle-btn{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; border:none; background:transparent;
  color:var(--muted); cursor:pointer; border-radius:6px;
}
.password-toggle-btn:hover{color:var(--navy); background:var(--panel-2, #f1f3f8);}
.modal-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:18px;}
.modal-close{background:none; border:none; font-size:20px; float:right; cursor:pointer; color:var(--muted); line-height:1;}
.detail-row{display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-bottom:1px dashed var(--line); gap:14px;}
.detail-row .k{color:var(--muted); flex-shrink:0;}
.detail-row span:last-child{text-align:right;}
.products-label{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:8px;}
.product-row{display:flex; gap:8px; align-items:center; margin-bottom:8px;}
.product-row select{flex:1.3;}
.product-row input{flex:1;}
.product-row .prod-unit{font-size:11.5px; color:var(--muted); min-width:38px;}
.product-row .btn-remove{background:#fbdde6; color:#8a2f52; border:none; border-radius:8px; padding:8px 11px; cursor:pointer; font-size:12px; flex-shrink:0;}
.add-product-btn{margin-top:2px; margin-bottom:14px;}
.input-invalid{border-color:var(--tag-red-ink) !important; background:var(--tag-red-bg) !important;}
.product-row-error{color:var(--tag-red-ink); font-size:11.5px; margin:-4px 0 8px;}

.form-error{color:#8a2f45; font-size:12.5px; margin:4px 0 0;}
.field-error{display:block; color:var(--tag-red-ink); font-size:11.5px; margin-top:4px;}
.modal-subtitle{font-size:13px; color:var(--muted); margin:-6px 0 16px; line-height:1.5;}
.section-hint{font-size:12px; color:var(--muted); margin:-6px 0 14px;}
.forward-btn{width:100%; margin-bottom:13px;}

.history-section{margin-top:18px; padding-top:14px; border-top:1px solid var(--line);}
.history-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:180px; overflow-y:auto;}
.history-list li{
  display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline;
  font-size:12px; padding:8px 10px; background:#fff; border:1px solid var(--line); border-radius:8px;
}
.history-time{color:var(--muted); font-variant-numeric:tabular-nums; flex-shrink:0;}
.history-actor{font-weight:700; color:var(--navy); flex-shrink:0;}
.history-desc{color:var(--ink);}

.login-page{
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:24px;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(143,208,247,0.16), transparent 65%),
    linear-gradient(150deg,var(--navy),var(--navy-2) 65%, #1b2a4d);
}
.loginbox{
  background:#fff; border:1px solid var(--line); border-top:4px solid var(--navy);
  border-radius:16px; padding:44px 40px 38px; width:360px;
  box-shadow:0 20px 50px rgba(10,14,28,0.35);
}
.login-brand{display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:26px;}
.login-brand img{height:60px; width:auto;}
.login-brand .brand-name{font-size:15.5px; letter-spacing:.03em; color:var(--muted); font-weight:600; text-transform:uppercase;}
.loginbox h1{font-weight:700; color:var(--navy); margin:0 0 6px; font-size:23px; text-align:center; letter-spacing:-0.01em;}
.loginbox p{color:var(--muted); font-size:13px; margin:0 0 26px; text-align:center;}
.loginbox form .field{margin-bottom:16px;}
.login-submit{width:100%; margin-top:10px; padding:11px;}
.login-error{background:var(--tag-red-bg); color:var(--tag-red-ink); border-radius:8px; padding:10px 12px; font-size:12.5px; margin-bottom:18px; text-align:center;}