:root{
  --paper:#F6F4EF;
  --ink:#1F1B16;
  --muted:#6B6459;
  --line:#E3DFD5;
  --accent:#C88A2E;
  --accent-deep:#8C5F1E;
  --success:#3E6B3A;
  --error:#A3352B;
  --card:#FFFFFF;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system, "Segoe UI", Roboto, sans-serif;
  line-height:1.6;
}
a{ color:var(--accent-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px; background:var(--card); border-bottom:1px solid var(--line);
}
.topbar .brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:16px; }
.brand-logo{ height:38px; width:auto; display:block; }
.topbar nav a{ margin-left:20px; font-weight:600; font-size:14px; }

.page{ max-width:960px; margin:0 auto; padding:32px 24px 80px; }

.alert{ padding:12px 16px; border-radius:8px; margin-bottom:20px; font-size:14px; }
.alert-error{ background:#FBEAE7; color:var(--error); border:1px solid #F0C6BE; }
.alert-success{ background:#EAF2E8; color:var(--success); border:1px solid #C9DFC4; }

.auth-card{
  max-width:380px; margin:60px auto; background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:32px; text-align:center;
}
.auth-logo{ width:96px; height:auto; margin-bottom:16px; }
.auth-card h1{ font-size:20px; margin-bottom:2px; }
.auth-card .sub{ color:var(--muted); font-size:13px; margin-bottom:24px; }
.auth-card .form{ text-align:left; }

.form label{ display:block; font-size:13px; font-weight:600; margin:14px 0 6px; }
.form input, .form select, .form textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:14px;
  font-family:inherit;
}
.form input:focus, .form select:focus, .form textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.form-row{ display:flex; gap:14px; }
.form-row > div{ flex:1; }
.form textarea{ resize:vertical; min-height:70px; }

.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:8px 10px; border-bottom:2px solid var(--line); }
.table td{ padding:10px; border-bottom:1px solid var(--line); vertical-align:middle; }
.badge{ display:inline-block; padding:3px 9px; border-radius:12px; font-size:11.5px; font-weight:600; }
.badge-active{ background:#EAF2E8; color:var(--success); }
.badge-inactive{ background:#F1EEE7; color:var(--muted); }
.link-btn{ background:none; border:none; color:var(--accent-deep); font-weight:600; font-size:13px; cursor:pointer; padding:0; }

.btn-primary{
  display:inline-block; margin-top:20px; background:var(--accent); color:#fff; border:none;
  padding:11px 20px; border-radius:8px; font-weight:600; font-size:14px; cursor:pointer;
}
.btn-primary:hover{ background:var(--accent-deep); text-decoration:none; }

.grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:18px; margin-top:24px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:12px; padding:20px; }
.card h3{ margin:0 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.big-number{ font-size:32px; font-weight:700; margin:0; }
.muted{ color:var(--muted); font-size:14px; }
.cycle-title{ font-weight:700; margin-bottom:6px; }
.tip{ background:#FBF3E4; border:1px dashed var(--accent); padding:8px 12px; border-radius:8px; font-size:13px; }

.footer{ text-align:center; color:var(--muted); font-size:12.5px; padding:20px; }

.cert-teaser{
  display:flex; align-items:center; gap:20px; margin-top:24px; padding:22px 26px;
  background:linear-gradient(135deg, #FBF3E4 0%, #FFF9EE 100%);
  border:1.5px dashed var(--accent); border-radius:14px;
}
.cert-teaser-medal{
  font-size:44px; flex-shrink:0; filter:grayscale(55%) opacity(0.75);
  animation:cert-teaser-pulse 2.6s ease-in-out infinite;
}
@keyframes cert-teaser-pulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
}
.cert-teaser-body{ flex:1; min-width:0; }
.cert-teaser-headline{ margin:0; font-weight:700; font-size:16px; color:var(--accent-deep); }
.cert-teaser-bar{ width:100%; height:8px; background:#EFE2C8; border-radius:20px; overflow:hidden; }
.cert-teaser-bar-fill{
  height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-deep));
  border-radius:20px; transition:width .4s ease;
}

@media (max-width:640px){
  .topbar{ flex-direction:column; align-items:flex-start; gap:10px; }
  .page{ padding:20px 16px 60px; }
  .cert-teaser{ flex-direction:column; text-align:center; }
}