:root{
  --bg1:#f7fbff;
  --bg2:#eef3ff;
  --card: rgba(255,255,255,.78);
  --border: rgba(40,60,120,.12);
  --text:#18223a;
  --muted:#5c6b8a;
  --accent:#4c7dff;
  --accent2:#7c5cff;
  --danger:#e04b4b;
  --ok:#1f9d64;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: linear-gradient(120deg, var(--bg1), var(--bg2));
  color:var(--text);
}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

.container{
  max-width: 980px;
  margin: 28px auto;
  padding: 0 16px;
}

.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 18px 38px rgba(20,40,100,.10);
  backdrop-filter: blur(10px);
}

.row{display:flex; gap:14px; flex-wrap:wrap;}
.row > .col{flex:1 1 320px;}

h1,h2,h3{margin:8px 0 12px}
.muted{color:var(--muted)}

.badge{
  display:inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(76,125,255,.10);
  border: 1px solid rgba(76,125,255,.18);
  color: #2140a8;
  font-size: 12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.85);
  color: var(--text);
  cursor:pointer;
  font-weight: 700;
  transition: transform .05s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{filter:brightness(1.02); box-shadow: 0 10px 24px rgba(40,80,160,.12);}
.btn:active{transform: translateY(1px);}

.btn.primary{
  background: linear-gradient(135deg, rgba(76,125,255,.92), rgba(124,92,255,.88));
  border-color: rgba(76,125,255,.28);
  color:#fff;
}
.btn.danger{
  background: rgba(224,75,75,.12);
  border-color: rgba(224,75,75,.28);
  color: var(--danger);
}

.input, textarea, select{
  width: 100%;
  padding: 11px 12px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  color: var(--text);
  outline:none;
}
textarea{min-height: 110px; resize: vertical;}

.q{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.70);
  margin: 12px 0;
}

.opts{margin-top:10px; display:grid; gap:10px}
.opt{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(40,60,120,.14);
  background: rgba(255,255,255,.84);
  cursor:pointer;
  transition: box-shadow .15s ease, transform .05s ease, border-color .15s ease;
}
.opt:hover{
  border-color: rgba(76,125,255,.35);
  box-shadow: 0 10px 22px rgba(40,80,160,.10);
}
.opt:active{transform: translateY(1px);}
.opt input{transform: scale(1.15)}

hr{
  border:0;
  height:1px;
  background: rgba(40,60,120,.12);
  margin: 14px 0;
}

.table{width:100%; border-collapse: collapse;}
.table th, .table td{
  padding: 10px 10px;
  border-bottom: 1px solid rgba(40,60,120,.12);
  text-align:left;
  vertical-align: top;
}

.kpi{display:flex; gap:12px; flex-wrap:wrap;}
.kpi .box{
  flex: 1 1 180px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.70);
}

.good{color: var(--ok); font-weight: 800;}
.bad{color: var(--danger); font-weight: 800;}