:root{
  --ci-blue:#0a3d62; --ci-accent:#00a6d6; --bg:#F5F7FB; --text:#1d2640; --muted:#607089; --surface:#fff; --border:#e3e8ef;
}
*{box-sizing:border-box}
body.ci{background:var(--bg); color:var(--text); font: 16px/1.5 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
a{color:var(--ci-blue); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:24px auto; padding:0 16px}
.topbar{position:sticky; top:0; background:linear-gradient(90deg,#0a3d62 0%, #00a6d6 100%); color:#fff; padding:10px 16px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 10px rgba(0,0,0,.1)}
.topbar .brand{display:flex; gap:10px; align-items:center; font-weight:700; letter-spacing:.2px}
.logo{height:32px}
.nav a{color:#fff; margin-left:12px; padding:6px 10px; border-radius:10px}
.nav a:hover{background:rgba(255,255,255,.15); text-decoration:none}
.card{background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:18px; box-shadow:0 1px 4px rgba(10,61,98,.06); margin-bottom:18px}
.grid{display:grid; gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.form-row{display:grid; grid-template-columns:160px 1fr; gap:10px; margin-bottom:12px; align-items:center}
input[type=text], input[type=email], input[type=url], input[type=datetime-local], select, textarea{width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:#fff; outline:none}
textarea{min-height:120px; resize:vertical}
input[type=file]{padding:8px 0}
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); padding:10px 14px; border-radius:999px; background:#fff; color:#1d2640; cursor:pointer}
.btn.primary{background:var(--ci-blue); color:#fff; border-color:transparent}
.btn.accent{background:var(--ci-accent); color:#00344b; border-color:transparent}
.btn.danger{background:#b00020; color:#fff; border-color:transparent}
.table{width:100%; border-collapse:separate; border-spacing:0 10px}
.table th{color:var(--muted); font-weight:600; text-align:left; padding:0 10px}
.table td{background:#fff; border:1px solid var(--border); padding:10px; border-radius:12px}
.table tr td:first-child{border-top-left-radius:12px; border-bottom-left-radius:12px}
.table tr td:last-child{border-top-right-radius:12px; border-bottom-right-radius:12px}
.alert{padding:12px 14px; border-radius:12px; margin-bottom:12px}
.alert.success{background:#e9f8ef; color:#175e37}
.alert.error{background:#fdecec; color:#7c1f1f}
.footer{padding:18px; text-align:center; color:#607089}
.badge{display:inline-block; padding:4px 8px; border-radius:999px; background:#eef6ff; color:#0a3d62; font-size:12px; margin-right:6px}
.img-preview{max-width:220px; border-radius:12px; border:1px solid var(--border)}
.checkbox-group{display:flex; flex-wrap:wrap; gap:8px}
.checkbox-group label{display:flex; align-items:center; gap:6px; background:#fff; border:1px solid var(--border); padding:6px 10px; border-radius:999px}