:root{
  --bg1:#eef5ff;
  --bg2:#f8fafc;
  --ink:#0f172a;
  --muted:#64748b;
  --line:#e2e8f0;
  --blue:#2563eb;
  --violet:#7c3aed;
  --pink:#db2777;
  --green:#16a34a;
  --orange:#f97316;
  --red:#dc2626;
  --cyan:#0891b2;
  --card:rgba(255,255,255,.92);
  --shadow:0 20px 60px rgba(15,23,42,.10);
  --shadow2:0 10px 28px rgba(15,23,42,.08);
}
*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  font-family:Inter,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 5%, rgba(37,99,235,.16), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(219,39,119,.14), transparent 30%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  padding:14px;
}
.wrap{max-width:1180px;margin:0 auto}
.hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  border-radius:30px;
  padding:28px;
  margin:14px 0 18px;
  background:linear-gradient(135deg,#0f172a 0%,#1d4ed8 42%,#7c3aed 72%,#db2777 100%);
  box-shadow:0 24px 70px rgba(37,99,235,.24);
}
.hero:before{
  content:"";
  position:absolute;
  inset:-120px -80px auto auto;
  width:260px;height:260px;
  background:rgba(255,255,255,.16);
  border-radius:50%;
  filter:blur(2px);
}
.hero:after{
  content:"";
  position:absolute;
  left:-60px;bottom:-80px;
  width:220px;height:220px;
  background:rgba(255,255,255,.10);
  border-radius:50%;
}
.hero > *{position:relative;z-index:1}
.hero h1{margin:0 0 10px;font-size:34px;line-height:1.08;letter-spacing:-.5px}
.hero p{margin:0;color:#e0e7ff;font-size:15px;line-height:1.5}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 11px;border-radius:999px;
  background:rgba(255,255,255,.18);
  color:#fff;font-size:12px;font-weight:800;
  margin-bottom:12px;
  backdrop-filter:blur(12px);
}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.80);
  border-radius:28px;
  padding:22px;
  margin:16px 0;
  box-shadow:var(--shadow2);
  backdrop-filter:blur(12px);
}
.card h2{font-size:22px;letter-spacing:-.2px;margin:0 0 10px}
.card p{color:#475569;line-height:1.55}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.kpi{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fff,#f8fbff);
  border:1px solid #eaf0fb;
  border-radius:24px;
  padding:18px;
  box-shadow:var(--shadow2);
}
.kpi:after{
  content:"";
  position:absolute;right:-26px;top:-26px;
  width:84px;height:84px;border-radius:50%;
  background:rgba(37,99,235,.10);
}
.kpi .num{font-size:34px;line-height:1;color:var(--blue);font-weight:950;letter-spacing:-.8px}
.kpi .label{margin-top:8px;color:#475569;font-weight:800;font-size:13px}
.kpi.hot .num{color:var(--red)} .kpi.hot:after{background:rgba(220,38,38,.10)}
.kpi.pay .num{color:var(--green)} .kpi.pay:after{background:rgba(22,163,74,.12)}
.kpi.warn .num{color:var(--orange)} .kpi.warn:after{background:rgba(249,115,22,.13)}
.kpi.cyan .num{color:var(--cyan)} .kpi.cyan:after{background:rgba(8,145,178,.12)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;
  padding:11px 16px;
  border:0;border-radius:14px;
  background:#0f172a;
  color:#fff!important;
  font-weight:900;
  text-decoration:none;
  margin:5px 4px 5px 0;
  box-shadow:0 10px 24px rgba(15,23,42,.15);
}
.btn2{background:linear-gradient(135deg,var(--blue),var(--violet))}
.btn-green{background:linear-gradient(135deg,#16a34a,#059669)}
.btn-orange{background:linear-gradient(135deg,#f97316,#ea580c)}
.btn-red{background:linear-gradient(135deg,#ef4444,#dc2626)}
.btn-light{background:#eef2ff;color:#1e3a8a!important}
.badge{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  background:#eef2ff;color:#3730a3;
  font-size:12px;font-weight:900;
}
.badge.hot{background:#fee2e2;color:#991b1b}
.badge.pay{background:#dcfce7;color:#166534}
.badge.warn{background:#ffedd5;color:#9a3412}
.badge.ok{background:#dcfce7;color:#166534}
input,textarea,select{
  width:100%;
  background:#fff;
  border:1px solid #dbe4ef;
  border-radius:16px;
  padding:14px;
  font-size:15px;
  outline:none;
  margin:8px 0 14px;
}
input:focus,textarea:focus,select:focus{
  border-color:#7c3aed;
  box-shadow:0 0 0 4px rgba(124,58,237,.10);
}
button{
  border:0;border-radius:16px;
  padding:14px 18px;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  color:#fff;
  font-weight:950;
  min-height:44px;
}
table{width:100%;border-collapse:separate;border-spacing:0 8px}
th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#64748b;text-align:left;padding:8px 10px}
td{
  background:#fff;
  padding:12px 10px;
  border-top:1px solid #eef2f7;
  border-bottom:1px solid #eef2f7;
  vertical-align:middle;
}
td:first-child{border-left:1px solid #eef2f7;border-radius:14px 0 0 14px}
td:last-child{border-right:1px solid #eef2f7;border-radius:0 14px 14px 0}
.copybox{
  background:linear-gradient(180deg,#fff,#f8fafc);
  border:1px solid #dbe4ef;
  border-radius:18px;
  padding:13px;
  word-break:break-all;
  color:#0f172a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.action-strip{display:flex;flex-wrap:wrap;gap:8px}
.small{font-size:13px;color:var(--muted)}
.mobile-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.mobile-scroll table{min-width:720px}
@media(max-width:760px){
  body{padding:10px}
  .hero{border-radius:24px;padding:22px}
  .hero h1{font-size:27px}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .grid2{grid-template-columns:1fr}
  .kpi{padding:15px;border-radius:20px}
  .kpi .num{font-size:28px}
  .card{border-radius:22px;padding:18px}
  .btn{width:auto;min-height:40px;padding:10px 13px;font-size:13px}
  .action-strip .btn{flex:1 1 calc(50% - 8px)}
  th,td{font-size:12px}
}