/* ---- Base / Brand Tweaks (keeps your CSS vars if already defined) ---- */
:root{
  --primary-color: var(--primary-color, #0b2182);
  --accent-color: var(--accent-color, #940026);
  --text-primary: var(--text-primary, #0b2182);
  --text-secondary: var(--text-secondary, #666);
  --text-light: #fff;
  --background-primary: var(--background-primary, #ffffff);
  --background-secondary: var(--background-secondary, #f5f7fb);
  --background-tertiary: var(--background-tertiary, #e9eef6);
  --gradient-primary: linear-gradient(180deg,#f7f9ff,#eef3ff);
  --gradient-header: linear-gradient(135deg,#0b2182,#3849a3);
  --radius-sm: 8px; --radius-md: 12px; --radius-xl: 18px; --radius-full: 999px;
  --shadow-lg: 0 8px 22px rgba(0,0,0,0.12); --shadow-xl: 0 12px 28px rgba(0,0,0,0.16);
  --success-color:#2e7d32; --success-light:#e7f5e8;
  --error-color:#c62828; --error-light:#fdeaea;
  --info-color:#0b2182; --info-light:#e8ecff;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--gradient-primary);
  min-height: 100vh; padding: 20px;
}
.container {
  max-width: 640px; margin: 0 auto;
  background: var(--background-primary);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow:hidden;
}
.header { background: var(--gradient-header); color: var(--text-light); padding: 28px 24px; text-align:center; }
.brand-header { display:flex; align-items:center; justify-content:center; gap: clamp(6px, 1.8vw, 14px); flex-wrap:nowrap; min-width:0; }
.brand-logo { height: clamp(28px, 6.2vw, 46px); width:auto; flex:0 0 auto; border-radius: var(--radius-sm); }
.brand-text { flex: 1 1 auto; min-width:0; }
.brand-text h1 { font-size: clamp(1.10rem, 4.2vw, 1.60rem); line-height: 1.05; letter-spacing: 0.2px; }
.brand-text p { font-size: clamp(0.78rem, 2.8vw, 1.00rem); line-height: 1.15; opacity: 0.95; margin-top:6px; }

/* Nav */
.navigation { background: var(--background-secondary); border-bottom:1px solid var(--background-tertiary); position:sticky; top:0; z-index:100; overflow:hidden; }
.nav-list { display:flex; list-style:none; flex-wrap:nowrap; }
.nav-item { flex: 1 1 25%; min-width: 0; }
.nav-link {
  display:block; padding:12px 10px; text-decoration:none; text-align:center;
  color: var(--text-secondary); font-weight:600; border-bottom:3px solid transparent; cursor:pointer; min-height:44px;
  white-space: normal; word-wrap: break-word; line-height:1.2; font-size: clamp(.9rem, 3.2vw, 1rem);
}
.nav-link:hover { background:var(--background-tertiary); color: var(--text-primary); }
.nav-link.active { color: var(--primary-color); background:var(--background-primary); border-bottom-color: var(--primary-color); }

/* Content */
.content { padding: 24px; }
.content-section { display:none; animation: fadeIn .25s ease; }
.content-section.active { display:block; }
@keyframes fadeIn { from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.current-status {
  background: var(--background-secondary); padding:18px; border-radius: var(--radius-md);
  margin-bottom:16px; border-left:4px solid var(--primary-color);
}
.current-status h3 { margin-bottom:10px; color: var(--text-primary); }
.current-status p, .current-status li, .current-status small { color: var(--text-secondary); }
.current-status p.disclaimer { color: var(--error-color); }

.inline-actions{ display:flex; gap:10px; }
.checklist li{ margin: 6px 0; }
.small { font-size:.9em; opacity:.9; }

@media (max-width: 390px) { 
  .header { padding: 16px 14px; } 
}