:root{
    --navy:#0b3d5c; --navy-2:#094874; --navy-deep:#082d44;
    --paper:#f5f7f9; --paper-2:#eaeef2;
    --red:#bc1e2c; --red-dim:#f5dcdf; --red-deep:#8f1620;
    --green:#2f8f4e; --green-dim:#dcefdf;
    --amber:#c47a00; --amber-dim:#f6e4c2;
    --ink:#182634; --ink-soft:#5d6b78; --border:#dbe2e8; --radius:10px;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;}
  .app{max-width:1040px;margin:0 auto;padding-bottom:60px;}
  header.top{background:linear-gradient(155deg, var(--navy-2), var(--navy-deep));color:#fff;padding:18px 22px 0 22px;border-radius:0 0 var(--radius) var(--radius);}
  .headtop{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand img.logo{height:44px;width:auto;display:block;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.25));}
  .brand .brandtext{display:flex;flex-direction:column;justify-content:center;line-height:1.15;}
  .brand h1{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;margin:0;letter-spacing:-0.2px;}
  .brand .tagline{font-size:10.5px;color:#a9c2d4;letter-spacing:0.4px;text-transform:uppercase;margin-top:2px;}
  .userbox{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#cfe0ec;}
  .userbox b{color:#fff;font-weight:600;}
  .userbox button{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:6px;padding:5px 10px;cursor:pointer;font-size:12px;}
  .userbox button:hover{background:rgba(255,255,255,.2);}
  nav.tabs{display:flex;gap:2px;overflow-x:auto;}
  nav.tabs a{flex:1;text-align:center;text-decoration:none;display:block;min-width:104px;background:transparent;border:none;color:#9fb9cc;font-family:'Inter',sans-serif;font-size:13px;font-weight:500;padding:11px 4px 13px 4px;cursor:pointer;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s;}
  nav.tabs a:hover{color:#fff;}
  nav.tabs a.active{color:#fff;border-bottom-color:var(--red);}
  main{padding:20px 18px 0 18px;}
  .card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:18px 18px 20px 18px;margin-bottom:16px;box-shadow:0 1px 2px rgba(11,61,92,0.04), 0 2px 10px rgba(11,61,92,0.04);}
  .card h2{font-family:'Space Grotesk',sans-serif;font-size:16px;margin:0 0 4px 0;display:flex;align-items:center;gap:8px;}
  .card .sub{font-size:12.5px;color:var(--ink-soft);margin:0 0 14px 0;}
  .card h2 .n{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-soft);background:var(--paper-2);padding:2px 6px;border-radius:4px;}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
  .grid4{display:grid;grid-template-columns:1.4fr 1fr .8fr .8fr;gap:8px;}
  @media (max-width:680px){.grid2,.grid3,.grid4{grid-template-columns:1fr;}}
  label{display:block;font-size:11.5px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.3px;}
  input, select{width:100%;font-family:'Inter',sans-serif;font-size:14.5px;padding:9px 10px;border:1px solid var(--border);border-radius:7px;background:var(--paper);color:var(--ink);margin-bottom:10px;}
  input:focus, select:focus{outline:2px solid var(--red);outline-offset:1px;}
  input[type="number"]{font-family:'IBM Plex Mono',monospace;}
  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  input[type=number]{-moz-appearance:textfield;}