:root{
  --bg-900: #0b1e3a;   /* deep navy */
  --bg-800: #0e274b;
  --bg-700: #112f5a;
  --text:   #eaf1ff;
  --muted:  #a8b7d9;
  --accent: #5ba3ff;
  --card:   #0f2649;
  --card-2: #0d2140;
  --border: #213a6a;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
*{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--text);
  /* Calmer, solid-feel background with subtle vertical shading */
  background: linear-gradient(180deg, var(--bg-800) 0%, var(--bg-900) 45%, #091833 100%);
  font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
/* Optional ultra-subtle texture to avoid banding */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.04;
  background-image: url("data:image/svg+xml;utf8,   <svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'>     <rect width='120' height='120' fill='none'/>     <circle cx='10' cy='8' r='1' fill='%23ffffff' opacity='0.8'/>     <circle cx='60' cy='40' r='1' fill='%23ffffff' opacity='0.8'/>     <circle cx='90' cy='90' r='1' fill='%23ffffff' opacity='0.8'/>     <circle cx='30' cy='70' r='1' fill='%23ffffff' opacity='0.8'/>   </svg>");
}
/* Header */
.app-header{
  position: sticky; top:0; z-index:10;
  display:flex; align-items:center; gap:1rem;
  padding: .8rem 1rem;
  background: linear-gradient(180deg, var(--bg-700), var(--bg-800));
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.brand{ display:flex; flex-direction:column }
.brand-title{ font-size:1.2rem; font-weight:700; letter-spacing:.3px }
.brand-subtitle{ font-size:.9rem; color:var(--muted) }
/* Sidebar */
.sidebar{
  position: fixed; inset: 56px auto 0 0; width: 270px;
  background: linear-gradient(180deg, #0f2446, #0b1e3a);
  border-right:1px solid var(--border);
  padding: .75rem;
  overflow:auto;
  transform: translateX(0);
  transition: transform .24s ease;
}
.sidebar.closed{ transform: translateX(-100%) } /* why: mobile slide-in */
.nav{ display:flex; flex-direction:column; gap:.25rem }
.nav-link{
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem .8rem; border-radius:12px;
  color:var(--text); text-decoration:none;
  border:1px solid transparent;
}
.nav-link:hover{ background: #102852; border-color: var(--border) }
.nav-link.active{ background:#14315f; border-color:#2b4e8d; box-shadow: inset 0 0 0 1px #2b4e8d }
/* Content */
.content{
  margin-left:270px; padding: 1.25rem; min-height: calc(100% - 56px);
}
.panel{
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--border);
  border-radius:16px; padding: 1.25rem;
  box-shadow: var(--shadow);
}
/* Cards */
.card-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  margin-top: 1rem;
}
.card{
  display:flex; flex-direction:column;
  border:1px solid var(--border); border-radius:16px;
  background: #0f2243; text-decoration:none; color:var(--text);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.35) }
.card-media{
  width:100%; aspect-ratio: 16 / 9; object-fit: cover; border-top-left-radius:16px; border-top-right-radius:16px;
  border-bottom:1px solid var(--border);
}
.card-body{ padding:.9rem }
.card-title{ margin:.1rem 0 .25rem 0; font-size:1rem }
.card-text{ margin:0; color: var(--muted) }
/* Menu button */
.menu-btn{
  appearance:none; border:1px solid var(--border); background:#0f2243; color:var(--text);
  padding:.4rem .6rem; border-radius:10px; cursor:pointer;
}
.menu-btn:hover{ background:#122a54 }
/* Responsive */
@media (max-width: 960px){
  .sidebar{ transform: translateX(-100%) }
  .sidebar.open{ transform: translateX(0) }
  .content{ margin-left:0 }
}