/* Certa Admin: reuses the Meralis case layout with the Certa palette. */
body.certa { --brand:#3f6e2e; --accent:#fb923c; --soft:#eaf2e4; --line:#e4e8e0; }
.certa .certa-brand { gap:6px; }
.certa .certa-brand b { width:auto; height:auto; background:none; color:var(--ink); font-size:26px; font-weight:800; position:relative; }
.certa .certa-brand b::before { content:""; position:absolute; left:58%; right:-90%; top:-6px; height:3px; border-radius:3px; background:linear-gradient(90deg,#6d9957,#a7a83a); }
.certa .certa-brand span { font-weight:400; color:var(--body); }
.certa .primary-link { background:var(--accent); }
.certa .screen-stage { background:#f4f7f1; }
.certa .stage-soft { background:linear-gradient(135deg,#eef4ea,#f8f5ee); }
.certa .model-after { background:var(--soft); }
.certa .model-arrow { color:#9fb98c; }
.certa .delivery { background:#f5f9f2; border-color:#e5eee0; }
.certa .delivery .device-figure { background:#e5efdd; }
.certa .type-sample { border-color:#dbe5d4; }

.roles-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:-20px auto 40px; }
.roles-grid article { padding:22px; border:1px solid var(--line); border-radius:16px; background:#fff; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; }
.roles-grid article:hover { transform:translateY(-4px); box-shadow:0 20px 40px #2f55230f; }
.roles-grid .r-ic { display:grid; place-items:center; width:38px; height:38px; margin-bottom:18px; border-radius:11px; background:var(--soft); color:var(--brand); font-style:normal; font-size:16px; }
.roles-grid article:nth-child(4) .r-ic { background:#fff0e2; color:#ea7a1f; }
.roles-grid span { display:block; color:var(--muted); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.roles-grid h3 { margin:6px 0 8px; font-size:17px; letter-spacing:-.02em; }
.roles-grid p { margin:0; color:var(--body); font-size:13px; line-height:1.6; }

.status-row { display:flex; flex-wrap:wrap; gap:10px; padding:0 0 40px; }
.c-chip { display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:20px; font-size:12px; font-weight:600; }
.c-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.c-chip.new { background:#e9f0fd; color:#2f6fde; } .c-chip.rev { background:#fbf3d9; color:#b98a07; } .c-chip.ok { background:#eaf2e4; color:#3f6e2e; } .c-chip.exp { background:#fff0e2; color:#ea7a1f; } .c-chip.no { background:#fbe9e7; color:#d4443b; }
.duo { display:grid; grid-template-columns:1fr 1fr; gap:24px; }

@media (max-width: 900px) {
  .roles-grid { grid-template-columns:1fr 1fr; margin-top:0; }
  .duo { grid-template-columns:1fr; }
}
@media (max-width: 560px) { .roles-grid { grid-template-columns:1fr; } }
.certa .hero-showcase { background:radial-gradient(ellipse at 75% 0,#cfe3bf,transparent 64%),#eef5e8; }
.certa .device-figure { background:#e5efdd; }
.certa .hero-showcase .device-figure { background:transparent; }