:root{
  --primary:#1E5A8C;
  --secondary:#288CA0;
  --accent:#6EAA50;
  --text:#0b0f14;
  --subtle:#787878;
  --bg:#f3f7fb;
  --card:#ffffff;
  --border:#e4edf6;
  --shadow:0 18px 45px rgba(2, 16, 32, .10);
  --shadow2:0 10px 25px rgba(2, 16, 32, .08);
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(40,140,160,.18), transparent 60%),
    radial-gradient(900px 420px at 85% 0%, rgba(30,90,140,.20), transparent 60%),
    linear-gradient(180deg, #f7fbff 0%, var(--bg) 55%, #f1f6fb 100%);
  color:var(--text);
}
.container{max-width:980px;margin:26px auto 40px auto;padding:18px;}
.hero{
  border-radius:calc(var(--radius) + 10px);
  padding:22px;
  background:linear-gradient(135deg, rgba(30,90,140,.95) 0%, rgba(40,140,160,.90) 45%, rgba(110,170,80,.25) 100%);
  color:#fff; box-shadow: var(--shadow);
  border:1px solid rgba(255,255,255,.16);
}
.heroTop{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.brand{display:flex;gap:14px;align-items:center;}
.brand img{height:58px;width:auto;border-radius:14px;background:#fff;padding:6px;}
.hero h1{margin:0;font-size:28px;letter-spacing:.2px;line-height:1.15;}
.hero p{margin:8px 0 0 0;font-weight:850;opacity:.95;color:#f3fffb;}
.hero .sub{margin-top:8px;font-size:13px;font-weight:700;opacity:.92;max-width:720px;}
.badge{
  display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.12);color:#fff;padding:8px 12px;border-radius:999px;
  font-weight:950;font-size:12px;backdrop-filter: blur(8px);
}
.shell{margin-top:16px;display:grid;grid-template-columns: 1.25fr .75fr;gap:16px;}
@media(max-width:980px){ .shell{grid-template-columns:1fr;} }
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow: var(--shadow2);padding:20px;}
.side{position:sticky;top:18px;align-self:start;}
@media(max-width:980px){ .side{position:static;} }
.side h3{margin:0;color:var(--primary);font-size:14px;letter-spacing:.2px;}
.benefit{margin-top:12px;padding:12px;border:1px solid var(--border);border-radius:14px;background:linear-gradient(180deg,#ffffff, #fbfdff);}
.benefit .t{font-weight:950;color:var(--secondary);font-size:12px;margin-bottom:6px;}
.benefit .d{font-size:12px;color:var(--subtle);font-weight:750;line-height:1.4;}
.section{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);}
.section h3{margin:0 0 10px 0;font-size:13px;color:var(--primary);letter-spacing:.2px;display:flex;align-items:center;gap:8px;}
label{display:block;margin-top:10px;font-weight:950;font-size:13px;color:#1f2937;}
.req{color:var(--accent);font-weight:950;}
input, select, textarea{
  width:100%;padding:11px 12px;margin-top:6px;border-radius:14px;border:1px solid #cfd9e3;
  background:#fff;font-size:14px;outline:none;transition: box-shadow .15s ease, border-color .15s ease;
}
input:focus, select:focus, textarea:focus{border-color: rgba(40,140,160,.75);box-shadow: 0 0 0 4px rgba(40,140,160,.12);}
textarea{resize:vertical;min-height:95px;}
.help{margin-top:6px;font-size:12px;color:var(--subtle);font-weight:700;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:640px){ .grid2{grid-template-columns:1fr;} .container{padding:12px;} .card{padding:16px;} }
.choiceGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;}
@media(max-width:640px){ .choiceGrid{grid-template-columns:1fr;} }
.choice{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--border);border-radius:14px;background:#fbfdff;}
.choice input{width:auto;margin-top:3px;}
.btn{
  margin-top:18px;width:100%;padding:13px 14px;border:0;border-radius:14px;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:#fff;font-weight:980;cursor:pointer;font-size:14px;letter-spacing:.2px;
}
.btn:hover{filter:brightness(1.04);}
.msg{margin-top:12px;font-size:13px;font-weight:900;}
.msg.ok{color:#1a7f37;}
.msg.err{color:#b42318;}
.footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);color:var(--subtle);font-size:12px;font-weight:700;}
/* Admin */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-top:8px;}
.toolbar .right{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.kpi{display:flex;gap:10px;flex-wrap:wrap;}
.kpi .pill{border:1px solid var(--border);background:#fbfdff;padding:10px 12px;border-radius:14px;min-width:150px;}
.kpi .pill .k{font-size:11px;color:var(--subtle);font-weight:900;}
.kpi .pill .v{font-size:16px;color:var(--primary);font-weight:980;margin-top:4px;}
.tableWrap{overflow:auto;border:1px solid var(--border);border-radius:16px;margin-top:12px;}
table{width:100%;border-collapse:collapse;font-size:12px;}
th, td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;white-space:nowrap;}
th{background:#fbfdff;color:var(--secondary);font-weight:980;}
td.notes{white-space:normal;min-width:320px;}
.delBtn{background:#b42318;color:#fff;border:0;border-radius:12px;padding:8px 10px;font-weight:980;cursor:pointer;}
.delBtn:hover{filter:brightness(1.03);}
.smallBtn{
  border:1px solid rgba(30,90,140,.25);background:rgba(30,90,140,.06);color:var(--primary);
  border-radius:14px;padding:10px 12px;font-weight:980;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;
}
.smallBtn:hover{filter:brightness(1.03);}