:root{
    --bg: #0b1220;
    --panel: #111a2b;
    --muted: #7d8aa6;
    --text: #e6eefc;
    --primary: #4f7cff;
    --primary-2: #355ee6;
    --accent: #1dd1a1;
    --danger: #ff6b6b;
    --card: #0e1726;
    --border: #1f2a44;
    --shadow: 0 10px 30px rgba(0,0,0,.35);
    --radius: 14px;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; background: radial-gradient(1200px 600px at 15% -10%, #1a2340 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, #0f1a33 0%, transparent 60%), var(--bg);
    color:var(--text); font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  }
  a{color:var(--primary); text-decoration:none}
  a:hover{color:#a7b8ff}
  .container{max-width: 960px; margin: 48px auto; padding: 0 20px}
  header.nav{
    position: sticky; top:0; backdrop-filter: blur(8px);
    background: rgba(10,16,28,.65); border-bottom:1px solid var(--border);
  }
  .nav-inner{display:flex; align-items:center; gap:16px; padding:14px 20px; max-width: 980px; margin:0 auto}
  .brand{font-weight:700; letter-spacing:.4px}
  .spacer{flex:1}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border-radius:10px; border:1px solid var(--border); background: linear-gradient(180deg, #17223a, #0e1728); color:var(--text); box-shadow: var(--shadow); cursor:pointer}
  .btn:hover{background: linear-gradient(180deg, #1b2a49, #13203a)}
  .btn.primary{border-color:transparent; background: linear-gradient(180deg, var(--primary), var(--primary-2)); color:white}
  .btn.primary:hover{filter:brightness(1.05)}
  .grid{display:grid; gap:18px}
  .grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr))}
  @media (max-width: 800px){ .grid.cols-2{grid-template-columns: 1fr} }
  .card{background: linear-gradient(180deg, #142039, #0f1a30); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow)}
  .card > .card-body{padding: 20px 22px}
  h1{margin: 8px 0 16px; font-size: 28px}
  h2{margin: 8px 0 12px; font-size: 20px; color:#c8d6ff}
  p.muted{color:var(--muted); margin-top:6px}
  form{display:grid; gap:12px}
  label{display:block; color:#cfd9ff; font-size:14px}
  input[type="file"], input[type="text"], input[type="number"], input[type="date"], input[type="search"]{
    width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0a1427; color:var(--text);
  }
  table{width:100%; border-collapse: collapse; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden}
  th, td{border-bottom:1px solid var(--border); padding:10px 12px; text-align:left}
  tr:hover td{background:#0f1a2e}
  .actions{display:flex; gap:10px; flex-wrap:wrap}
  .pill{display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius: 999px; background:#0b162b; border:1px solid var(--border); color:#cfe1ff}


  .wrap { max-width: 800px; }
#preview {
  width: 100%;
  aspect-ratio: 16 / 9;                  /* auto-calc height from width */
  height: auto;                          /* (optional) */
  display: block;
  border: 0;
}