:root{
  --navy:#0b2a4a;
  --blue:#1576d6;
  --cyan:#19a7ce;
  --red:#e01e37;
  --bg:#f6fafc;
  --text:#1a202c;
  --muted:#6b7280;
  --card:#ffffff;
  --shadow: 0 8px 24px rgba(13,38,76,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji','Segoe UI Emoji';
  color:var(--text);
  background:linear-gradient(180deg,#f8fbff 0%, #f2f7fb 100%);
  display:flex;
}
/* Sidebar */
.sidebar{
  width:280px;
  background:linear-gradient(180deg, var(--navy) 0%, #093457 100%);
  color:#fff;
  position:fixed;
  inset:0 auto 0 0;
  padding:28px 20px;
  box-shadow: 6px 0 24px rgba(3,16,28,.18);
}
.brand{
  display:flex; align-items:center; gap:12px;
  padding:6px 10px 22px 6px; border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:18px;
}
.brand img{width:44px; height:44px; border-radius:10px; background:#fff; padding:6px}
.brand .title{line-height:1.1}
.brand .name{font-weight:700; letter-spacing:2px;}
.brand .sub{font-size:12px; opacity:.8}
.nav{
  margin-top:14px;
  display:flex; flex-direction:column; gap:6px;
}
.nav a{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  color:#e8f1ff; text-decoration:none; border-radius:10px;
  transition:.2s ease;
}
.nav a:hover{ background:rgba(255,255,255,.09); transform:translateX(2px)}
.nav a.active{ background:linear-gradient(90deg, rgba(21,118,214,.35), rgba(25,167,206,.25)); color:#fff; border:1px solid rgba(255,255,255,.15)}
.nav small{opacity:.65}

/* Main */
.main{
  margin-left:280px;
  padding:36px 36px 24px;
  width:100%;
}
.header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:18px;
}
.badge{
  font-size:12px; font-weight:600; letter-spacing:.3px; color:var(--blue);
  background:#e8f1ff; padding:6px 10px; border:1px solid #d6e6ff; border-radius:999px;
}
.card{
  background:var(--card);
  border:1px solid #e6edf5;
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:26px 28px;
}
h1{ margin:10px 0 14px; font-size:34px; color:var(--navy)}
p{ line-height:1.7; color:#263445; margin:12px 0}
b,strong{color:#0e335a}
a{ color:var(--blue) }
.lead{ font-size:18px; color:#22324a}
.footer{
  text-align:center; margin-top:26px; padding:16px; color:var(--muted); font-size:13px
}
.footer a{ color:var(--blue); text-decoration:none }

/* Buttons for DoP */
.btn{
  display:inline-block; padding:14px 18px; border-radius:12px; text-decoration:none;
  border:1px solid #d6e6ff; background:#fff; color:#0b2a4a; box-shadow:var(--shadow);
  transition:.2s ease; margin:10px 12px;
}
.btn:hover{ transform:translateY(-2px); border-color:#bcd0f2 }
.btn .tag{ font-size:11px; font-weight:700; color:#fff; background:var(--blue); padding:2px 8px; border-radius:999px; margin-left:10px }

/* Content container width */
.container{ max-width:1100px; margin:0 auto }
hr{ border:none; border-top:1px solid #e6edf5; margin:24px 0 }