:root {
      --bg:#031119;
      --card:#1b262c;
      --muted:#9fb0d9;
      --text:rgba(255,255,255,0.85);
      --ok:#4ade80;
      --warn:#facc15;
      --bad:#ef4444;
      --primary:#e3a127;
      --primary-dark:#c38f1c;
      --bg-dark: #031119;
      --bg-surface: #1b262c;
      --accent: #e3a127;
      --text-light: rgba(255, 255, 255, 0.8);
      --text-heading: #e0e9f2;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    body {
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      background: var(--bg);
      color: var(--text);
    }
    header {
      background: var(--card);
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:15px 30px;
    }
    header h1 {
      margin:0;
      color: var(--primary);
    }
    nav a {
      margin-left:20px;
      color: var(--text);
      text-decoration:none;
      font-weight:500;
    }
    nav a:hover {color: var(--primary);}
    main {
      max-width:900px;
      margin:30px auto;
      background: var(--card);
      padding:25px;
      border-radius:12px;
      box-shadow:0 4px 10px rgba(0,0,0,0.4);
    }
    h2 {color: var(--primary);}
    label {display:block;margin-top:15px;margin-bottom:6px;}
    textarea,input[type=text] {
      width:100%;
      padding:10px;
      border-radius:8px;
      border:1px solid var(--muted);
      background:#0f1a20;
      color: var(--text);
    }
    button {
      margin-top:15px;
      padding:12px 25px;
      border:none;
      border-radius:8px;
      background: var(--primary);
      color:#000000;
      font-size:16px;
      cursor:pointer;
    }
    button:hover {background: var(--primary-dark);}
    .result-card {
      margin-top:20px;
      padding:20px;
      border-radius:10px;
      background:#0f1a20;
    }
    /* Footer */
    .footer {
      background: var(--bg-dark);
      padding: 40px 20px 20px;
      color: #bfc7db;
      margin-top: 40px;
      font-size: 12px;
      margin-bottom: 5px;
    }
    .footer h4 {
      color: var(--text-heading);
      margin-bottom: 15px;
    }
    .footer a {
      color: #c7c7c7;
      text-decoration: none;
      transition: 0.3s;
    }
    .footer a:hover {
      color: var(--accent);
    }
    .social-links {
      display: flex;
      gap: 10px;
      margin-top: 15px;
    }
    .social-links a {
      width: 35px;
      height: 35px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      border: 1px solid #444;
      color: #afafaf;
      transition: 0.3s;
    }
    .social-links a:hover {
      color: var(--accent);
      border-color: var(--accent);
    }
    .footer .copyright {
      margin-top: 20px;
      text-align: center;
      border-top: 1px solid #333;
      padding-top: 10px;
      color: var(--accent);
    }
 /* Responsive Navbar */
    .menu-toggle {
      display: none;
      font-size: 24px;
      color: #fff;
      cursor: pointer;
    }
    @media (max-width: 768px) {
      nav {
        display: none;
        flex-direction: column;
        background: #111;
        position: absolute;
        top: 60px; right: 0;
        width: 200px;
        padding: 10px;
        border: 1px solid #333;
      }
      nav.active {
        display: flex;
      }
      .menu-toggle {
        display: block;
      }
    }