:root {
      --bg:#f9fafb;
      --card:#ffffff;
      --text:#111827;
      --muted:#6b7280;
      --accent:#0078d7;
      --border:#e5e7eb;
    }
    *{box-sizing:border-box}
    body {
      margin:0;
      font-family: "Lato", sans-serif;
      background:var(--bg);
      color:var(--text);
      justify-content:center;
      min-height:100vh;
      background: #0769ad;font-weight: 400;
    }
    h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500;}
    .layout .container{
      display:grid;
      grid-template-columns:220px 1fr 220px;
      gap:24px;
      padding:20px;
      max-width:1400px;
      width:100%;
    }
    @media(max-width:1000px){ .layout{grid-template-columns:1fr;gap:16px;} }
    main {
      border-radius:12px;
      box-shadow:0 2px 12px rgba(0,0,0,0.04);
    }
    h1 {
      font-size:28px;
      margin-bottom:6px;
      text-align:center;
      color:var(--accent);
    }
    p.sub {
      text-align:center;
      color:var(--muted);
      margin-bottom:24px;
    }
    label{font-weight:600;font-size:15px;}
    textarea {
      width:100%;
      min-height:160px;
      border-radius:8px;
      border:1px solid var(--border);
      background:var(--card);
      padding:10px;
      font-family:ui-monospace,Menlo,monospace;
      font-size:14px;
      margin-top:6px;
      resize:vertical;
    }
    button {
      background:var(--accent);
      border:none;
      color:white;
      padding:8px 16px;
      border-radius:6px;
      margin-top:12px;
      cursor:pointer;
      font-weight:500;
    }
    button.secondary {
      background:#e5e7eb;
      color:var(--text);
    }
    button:hover { opacity:0.9; }
    .adbox {
      background:rgba(255,255,255,0.2);
      border-radius:8px;
      height:600px;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--muted);
      font-size:13px;
    }
    section { margin-top:36px; }
    h2 { font-size:22px;margin-bottom:6px;color:var(--accent); }
    h3 { font-size:20px; }
    ul { color:var(--bs-dark);margin-left:20px; }
    footer {
      text-align:center;
      font-size:13px;
      color:var(--muted);
    }
    a { color:var(--accent); text-decoration:none; }
    a:hover { text-decoration:underline; }

    nav#main {
    background-color: rgba(0, 0, 0, 0.18);
    border-radius: 8px 8px 0 0;
    border-right: 1px solid rgba(2, 2, 2, 0.28);
    border-left: 1px solid rgba(2, 2, 2, 0.28);
    border-top: 1px solid rgba(250, 250, 250, 0.14);
    box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);
}
nav#main li a{text-decoration:none;}
nav#main li a{border:1px solid transparent;}
nav#main li a:hover, nav#main li.current a {
    background: none;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4), rgba(255, 255, 255, 0.1) 0 1px 0;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.25);
    color: #fff;
    text-shadow: rgba(0, 0, 0, 0.796875) 0 -1px 0, rgba(255, 255, 255, 0.296875) 0 0 10px;
}
.main-content{background:var(--card);    box-shadow: 0 0 5px rgba(1, 1, 1, 0.7);border-radius:0 0 8px 8px;}
.list-style-none{list-style:none;}
.container.footer-container{display:flex;justify-content:center; align-items:center;}
.fs-7{font-size:0.9rem;}
.top-10{top:10px;}
.top-15{top:15px;}
.top-20{top:20px;}