:root{
  --bg:#f6f7f9; --paper:#ffffff; --ink:#222; --muted:#5b6573; --accent:#2c6fb7; --accent-2:#4e89c4; --line:#e6e9ee;
  --sidebar:#0f1b2d; --sidebar-ink:#e9f2ff; --chip-bg:#eef5ff;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: radial-gradient(1200px 600px at 15% -10%, #e9f2ff 0%, transparent 60%),
              radial-gradient(1000px 500px at 110% 10%, #ffeede 0%, transparent 60%),
              var(--bg) url('/bg.svg');
  color:var(--ink); line-height:1.5; padding:16px;}
.container{max-width:960px;margin:0 auto;}
.card{background:var(--paper); border-radius:16px; box-shadow:0 10px 30px rgba(15, 27, 45, .08);
  overflow:hidden; border:1px solid var(--line)}

/* Utilities */
.badge{display:inline-block; padding:.25rem .5rem; border-radius:999px; background:var(--chip-bg); color:#254165; font-weight:600; font-size:.8rem; margin:2px}
.sec h2{font-size:1.05rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 0 10px 0}
.role{font-weight:700}
.meta{color:var(--muted); font-size:.95rem}
.list{padding-left:20px; margin:8px 0}
.list li{margin:6px 0}

/* Buttons */
.actions{display:flex; gap:10px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid var(--line);
 background:#fff; text-decoration:none; color:#18314f; font-weight:600}
.btn:hover{box-shadow:0 6px 20px rgba(0,0,0,.08)}
.btn.primary{background:var(--accent); color:#fff; border-color:transparent}

/* Sidebar Layout */
.grid{display:grid; grid-template-columns: 280px 1fr}
.sidebar{background:var(--sidebar); color:var(--sidebar-ink); padding:28px}
.sidebar a{color:#cfe1ff}
.main{padding:24px}
.header h1{font-size:2rem; margin:0}
.header .title{color:#9ab6d9; margin-top:6px}
.contact{display:grid; gap:6px; font-size:.95rem; margin-top:14px}

/* Timeline Layout */
.timeline{position:relative; margin-left:8px}
.timeline::before{content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background:var(--line)}
.item{position:relative; padding-left:28px; margin:20px 0}
.item::before{content:""; position:absolute; left:0; top:.4rem; width:10px; height:10px; border-radius:50%; background:var(--accent)}

/* Classic Layout */
.classic .header h1{font-size:2.2rem}
.classic .sheet{padding:24px}

/* Responsive */
@media(max-width: 768px){
  .grid{grid-template-columns:1fr}
  .sidebar{padding:20px}
  .main{padding:20px}
  .actions{flex-direction:column; align-items:flex-start}
  body{padding:8px}
}

@media print{
  body{background:#fff; padding:0}
  .container{max-width:100%; margin:0}
  .card, .sidebar{box-shadow:none}
}