:root{
  --bg:#f3f4f6;
  --surface:#ffffff;
  --surface-soft:#f7f8fb;
  --surface-muted:#eef2f6;
  --text:#122033;
  --muted:#6e7f94;
  --line:#e2e8f0;
  --line-soft:#edf1f5;
  --primary:#2f77aa;
  --primary-dark:#13314e;
  --primary-soft:#ecf5fb;
  --success:#1d8b5f;
  --warning:#c59329;
  --danger:#d85a5a;
  --info:#3b82f6;
  --shadow:0 12px 28px rgba(15,23,42,.06);
  --shadow-soft:0 8px 18px rgba(15,23,42,.04);
  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;
  --container:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit}
code{font-family:Consolas,Monaco,monospace}

.container{width:min(calc(100% - 32px),var(--container));margin:auto}
.section{padding:36px 0}
.section-soft{background:transparent}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.section-head-tight{margin-bottom:18px}
.section-head h1,.section-head h2{margin:0 0 8px;line-height:1.06;letter-spacing:-.03em;color:var(--text)}
.page-title{font-size:clamp(26px,3vw,36px)}
.section-head h2{font-size:clamp(26px,3vw,38px)}
.section-lead{margin:0;max-width:760px;color:var(--muted);line-height:1.72}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;
  background:var(--surface-muted);border:1px solid var(--line-soft);color:#334155;font-size:13px;font-weight:800;
}
.page-header-shell{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.page-header-shell h1{margin:0 0 8px;font-size:clamp(26px,3vw,36px);line-height:1.06;letter-spacing:-.03em}
.page-header-shell p{margin:0;color:var(--muted);line-height:1.7;max-width:760px}
.page-breadcrumb{display:block;font-size:16px;color:#6a7a90;font-weight:600}
.page-actions{display:flex;gap:12px;flex-wrap:wrap}

.btn{
  min-height:48px;padding:0 18px;border-radius:16px;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:800;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#2f77aa;color:#fff;box-shadow:0 10px 20px rgba(47,119,170,.18)}
.btn-primary:hover{background:#266995}
.btn-light{background:#f3f6f9;color:var(--text);border-color:#dde6ef}
.btn-light:hover{background:#edf2f6}
.btn-sm{min-height:42px;padding:0 14px;border-radius:12px}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}

.flash-wrap{margin-bottom:18px}
.flash{padding:14px 16px;border-radius:18px;font-weight:700;box-shadow:var(--shadow-soft)}
.flash-success{background:rgba(29,139,95,.10);border:1px solid rgba(29,139,95,.16);color:#176746}
.flash-error{background:rgba(216,90,90,.10);border:1px solid rgba(216,90,90,.16);color:#9e3434}

.cards-grid{display:grid;gap:18px}
.three-cols{grid-template-columns:repeat(3,1fr)}
.four-cols{grid-template-columns:repeat(4,1fr)}
.dark-card,
.dashboard-card,
.product-card,
.quote-shell-card,
.catalog-filter-card,
.catalog-list-card,
.payment-summary-card,
.payment-history-card{
  background:var(--surface);
  border:1px solid rgba(15,23,42,.06);
  color:var(--text);
  box-shadow:var(--shadow);
}
.dark-card{border-radius:26px}
.badge{
  white-space:nowrap;padding:8px 10px;border-radius:999px;background:var(--primary-soft);
  border:1px solid #d8e9f6;color:#234660;font-size:12px;font-weight:800
}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px}
.card-head small{color:var(--muted)}
.stack-list{display:grid;gap:12px}
.stack-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:16px;border-radius:18px;
  background:var(--surface-soft);border:1px solid var(--line-soft)
}
.stack-row span{color:var(--muted);line-height:1.6}
.status-badge{
  display:inline-flex;align-items:center;justify-content:center;padding:8px 12px;border-radius:999px;
  font-size:12px;font-weight:800;white-space:nowrap;border:1px solid transparent
}
.status-badge.is-warning{background:rgba(197,147,41,.12);border-color:rgba(197,147,41,.18);color:#9b6d12}
.status-badge.is-success{background:rgba(29,139,95,.12);border-color:rgba(29,139,95,.18);color:#176746}
.status-badge.is-danger{background:rgba(216,90,90,.12);border-color:rgba(216,90,90,.18);color:#a73d3d}
.status-badge.is-info{background:rgba(59,130,246,.11);border-color:rgba(59,130,246,.16);color:#225ea9}
.inline-pill{display:inline-flex;padding:8px 12px;border-radius:999px;background:#f2f5f8;color:#405269;font-weight:700;font-size:13px;border:1px solid #e3eaf1}
.inline-pill-strong strong{font-size:16px}

.form-grid{display:grid;gap:16px}
.form-grid.two-cols{grid-template-columns:repeat(2,1fr)}
.form-grid.three-cols{grid-template-columns:repeat(3,1fr)}
.form-grid.four-cols{grid-template-columns:repeat(4,1fr)}
.form-field{display:grid;gap:8px}
.form-field label{font-weight:800;color:#223247}
.form-field input,.form-field textarea,.form-field select{
  width:100%;min-height:50px;padding:12px 14px;border-radius:16px;border:1px solid #dbe4ec;
  background:#fff;color:var(--text)
}
.form-field textarea{resize:vertical;min-height:120px}
.form-field-light label{color:#223247}
.form-field-light input,.form-field-light textarea,.form-field-light select{background:#fff;color:var(--text)}
.empty-state{color:var(--muted);margin:0}
.dashboard-layout{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stats-grid .stat-card{padding:20px;border-radius:24px;text-align:left}
.stat-card strong{display:block;font-size:30px;margin-bottom:6px;color:var(--text)}
.stat-card span{color:var(--muted)}
.inline-form{margin-top:12px}
.inline-form-reset{margin-top:14px}
.checkbox-line{display:inline-flex;align-items:center;gap:10px;color:#475569;font-weight:700}
.checkbox-line input{accent-color:var(--primary)}

.list-check{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.list-check li{position:relative;padding-left:26px;color:var(--muted)}
.list-check li::before{content:'✓';position:absolute;left:0;top:0;color:var(--primary);font-weight:900}

@media (max-width:1180px){
  .four-cols{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1100px){
  .three-cols{grid-template-columns:repeat(2,1fr)}
  .dashboard-layout{grid-template-columns:1fr}
}
@media (max-width:760px){
  .container{width:min(calc(100% - 20px),var(--container))}
  .section{padding:20px 0}
  .section-head,.page-header-shell{display:block}
  .page-actions{margin-top:16px}
  .three-cols,.four-cols,.form-grid.two-cols,.form-grid.three-cols,.form-grid.four-cols{grid-template-columns:1fr}
  .card-head,.stack-row{display:block}
}
