:root{
  --primary:#2a7ae4;
  --primary-dark:#1d5fb4;
  --bg:#f7f9fc;
  --surface:#ffffff;
  --line:#e6ecf3;
  --text:#1f2937;
  --text-soft:#6b7280;
  --ok:#0f766e;
  --warn:#b45309;
  --danger:#b42318;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:var(--surface);
}
a{text-decoration:none;color:inherit}
img{max-width:100%}
button,input,select,textarea{font:inherit}
.container{max-width:1180px;margin:0 auto;padding:0 16px}
.row{display:flex}
.between{justify-content:space-between}
.center{align-items:center}
.hidden{display:none!important}

.topbar{
  min-height:66px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
  position:sticky;
  top:0;
  z-index:30;
}
.brand{gap:10px}
.logo{
  width:32px;
  height:32px;
  border-radius:8px;
  background:#e9f2ff;
  object-fit:cover;
}
.brand-title{font-weight:700}
.nav{
  gap:16px;
  color:#4b5563;
  flex-wrap:wrap;
}
.nav a{
  padding:8px 0;
  border-bottom:2px solid transparent;
}
.nav a.active,.nav a:hover{
  color:var(--primary);
  border-color:var(--primary);
}

.hero{
  min-height:360px;
  background-size:cover;
  background-position:center;
}
.hero-overlay{
  min-height:360px;
  background:linear-gradient(90deg,rgba(8,24,44,.78),rgba(8,24,44,.2));
  display:flex;
  align-items:center;
  color:#fff;
}
.hero h1{font-size:42px;line-height:1.15;margin:0 0 12px}
.hero p{font-size:18px;max-width:560px;opacity:.95;margin:0 0 22px}
.hero-actions{gap:12px;flex-wrap:wrap}

.section{padding:54px 0}
.section.light{background:var(--bg)}
.section h1,.section h2{margin:0 0 18px}
.section h1{font-size:30px}
.section h2{font-size:26px}
.sub{margin:0 0 18px;color:var(--text-soft)}
.muted{color:var(--text-soft)}

.grid{display:grid;gap:16px}
.categories{grid-template-columns:repeat(4,minmax(0,1fr))}
.products{grid-template-columns:repeat(3,minmax(0,1fr))}
.capabilities{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  padding:18px;
}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--text-soft);line-height:1.65}
.category{text-align:center;font-weight:600;color:#374151}
.product .price{color:var(--ok);font-weight:700}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px 16px;
  cursor:pointer;
}
.btn:hover{background:var(--primary-dark)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.btn-sm{padding:7px 12px;font-size:14px}
.btn.btn-ghost{
  background:#fff;
  color:var(--primary);
  border:1px solid rgba(255,255,255,.7);
}
.btn.btn-secondary{
  background:#f3f6fb;
  color:#334155;
  border:1px solid var(--line);
}

.about p{color:#4b5563;line-height:1.85}
.footer{
  border-top:1px solid var(--line);
  padding:20px 0;
  color:var(--text-soft);
  background:#fff;
}
.footer-links{display:flex;gap:12px;flex-wrap:wrap}

.notice{
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
}
.notice.info{background:#eef4ff;color:#1d4ed8}
.notice.success{background:#ecfdf3;color:#027a48}
.notice.warn{background:#fff7ed;color:var(--warn)}
.notice.error{background:#fef3f2;color:var(--danger)}

.auth-page,.dashboard-page{
  min-height:calc(100vh - 66px);
  background:var(--bg);
  padding:34px 0;
}
.panel{
  max-width:460px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
}
.panel h1{margin:0 0 8px;font-size:24px}
.panel p{margin:0 0 16px;color:var(--text-soft)}
.field{margin-bottom:12px}
.field label{
  display:block;
  margin-bottom:6px;
  color:#334155;
  font-size:14px;
}
.field input,.field select,.field textarea{
  width:100%;
  border:1px solid #dbe3ef;
  border-radius:10px;
  padding:10px 12px;
  outline:none;
  background:#fff;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--primary)}
.field textarea{min-height:90px;resize:vertical}

.split{
  display:grid;
  grid-template-columns:2fr 1.2fr;
  gap:18px;
}

.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
table{width:100%;border-collapse:collapse}
th,td{
  padding:12px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:14px;
}
thead th{
  background:#f9fbff;
  color:#334155;
  font-weight:600;
}
tbody tr:last-child td{border-bottom:none}

.kpis{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.kpi{
  border:1px solid var(--line);
  background:#fff;
  border-radius:12px;
  padding:14px;
}
.kpi strong{display:block;font-size:22px}
.kpi span{font-size:12px;color:var(--text-soft)}

.status{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:4px 10px;
  font-size:12px;
}
.status.paid{background:#ecfdf3;color:#027a48}
.status.processing{background:#eef4ff;color:#1d4ed8}
.status.open{background:#fff7ed;color:#b45309}

@media (max-width:960px){
  .products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .categories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .capabilities{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}
@media (max-width:680px){
  .hero h1{font-size:32px}
  .hero p{font-size:16px}
  .products,.categories{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
}