:root {
      --bg: #07111f;
      --panel: #0d1b2f;
      --text: #e8eef7;
      --muted: #9eb0c7;
      --line: rgba(115, 209, 255, 0.2);
      --accent: #73d1ff;
      --warn: #ffb454;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background: radial-gradient(circle at top, #10284a 0%, var(--bg) 45%);
      color: var(--text);
      line-height: 1.6;
    }

    .wrap {
      width: min(920px, calc(100% - 32px));
      margin: 0 auto;
      padding: 32px 0 60px;
    }

    .hero, .card {
      background: rgba(13, 27, 47, 0.92);
      border: 1px solid var(--line);
      border-radius: 18px;
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    }

    .hero {
      padding: 28px;
      margin-bottom: 18px;
    }

    .nav {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .nav a {
      color: var(--accent);
      text-decoration: none;
      font-weight: 600;
    }

    h1, h2 { margin: 0 0 12px; }
    h1 { font-size: clamp(2rem, 4vw, 2.8rem); }
    h2 { font-size: 1.2rem; color: var(--accent); }
    p, li { color: var(--text); }
    .muted { color: var(--muted); }

    .notice {
      margin-top: 16px;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(255, 180, 84, 0.35);
      background: rgba(255, 180, 84, 0.08);
      color: #ffd8a2;
      font-weight: 600;
    }

    .card {
      padding: 22px;
      margin-bottom: 14px;
    }

    ul {
      margin: 10px 0 0 18px;
      padding: 0;
    }

    a { color: var(--accent); }