/* WEB PANEL PROXY public CSS */
:root {
      --bg: #08090d;
      --panel: rgba(13, 15, 22, .94);
      --gold: #c79a52;
      --gold-light: #e4bd78;
      --text: #eee7d9;
      --muted: #99958c;
      --red: #7c2424;
      --border: rgba(199,154,82,.35);
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; }
    body {
      font-family: Georgia, "Times New Roman", serif;
      color: var(--text);
      background:
        radial-gradient(circle at 50% 25%, rgba(101,47,28,.20), transparent 34%),
        linear-gradient(180deg, #11131a 0%, var(--bg) 62%);
    }
    body::before {
      content: "";
      position: fixed; inset: 0; pointer-events: none;
      opacity: .13;
      background-image:
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 5px 5px, 7px 7px;
      mix-blend-mode: screen;
    }
    .hero {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 32px 20px;
      position: relative;
      overflow: hidden;
    }
    .hero::after {
      content: "";
      position: absolute;
      width: 700px; height: 700px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(151,61,25,.22), transparent 65%);
      filter: blur(12px);
      pointer-events: none;
    }
    .content {
      position: relative; z-index: 1;
      width: min(1080px, 100%);
      text-align: center;
    }
    .eyebrow {
      letter-spacing: .45em;
      text-transform: uppercase;
      color: var(--gold);
      font-size: 12px;
      margin-bottom: 20px;
    }
    h1 {
      margin: 0;
      font-size: clamp(64px, 13vw, 148px);
      line-height: .78;
      letter-spacing: .07em;
      text-transform: uppercase;
      color: #e9dfca;
      text-shadow: 0 3px 0 #31261a, 0 10px 35px #000, 0 0 28px rgba(199,154,82,.12);
    }
    .subtitle {
      max-width: 720px;
      margin: 35px auto 42px;
      color: #b9b2a6;
      font-size: clamp(16px, 2vw, 21px);
      line-height: 1.65;
    }
    .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
    button {
      font: inherit;
      cursor: pointer;
      color: var(--text);
      border: 1px solid var(--border);
      background: linear-gradient(#24211b, #12110f);
      padding: 15px 28px;
      min-width: 190px;
      letter-spacing: .1em;
      text-transform: uppercase;
      transition: .2s ease;
    }
    button:hover {
      transform: translateY(-2px);
      border-color: var(--gold);
      box-shadow: 0 8px 30px rgba(0,0,0,.45), 0 0 18px rgba(199,154,82,.12);
    }
    .primary { background: linear-gradient(#6e3a24, #321812); border-color: #a9673f; }
    .partners { background: linear-gradient(#302a20, #15130f); }
    .features {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1px; margin: 80px auto 0;
      background: rgba(199,154,82,.16);
      border: 1px solid rgba(199,154,82,.16);
    }
    .feature { padding: 25px; background: rgba(9,10,14,.8); }
    .feature b { display:block; color: var(--gold-light); margin-bottom: 8px; }
    .feature span { color: var(--muted); font-size: 14px; line-height: 1.5; }
    footer { margin-top: 34px; color: #66635d; font-size: 12px; letter-spacing: .08em; }

    .modal {
      position: fixed; inset: 0; z-index: 10;
      display: none; place-items: center;
      padding: 20px;
      background: rgba(0,0,0,.78);
      backdrop-filter: blur(5px);
    }
    .modal.open { display: grid; }
    .login {
      width: min(430px, 100%);
      position: relative;
      padding: 38px;
      background:
        linear-gradient(rgba(20,19,18,.96), rgba(8,9,12,.98));
      border: 1px solid var(--border);
      box-shadow: 0 30px 100px #000;
    }
    .login h2 { margin: 0 0 8px; color: var(--gold-light); font-size: 30px; }
    .login p { color: var(--muted); margin: 0 0 25px; line-height: 1.5; }
    label { display:block; color:#bcb5a8; font-size:13px; margin: 16px 0 7px; }
    input {
      width: 100%; padding: 13px 14px;
      color: var(--text);
      background: #08090d;
      border: 1px solid #3b372f;
      outline: none;
      font: inherit;
    }
    input:focus { border-color: var(--gold); }
    .login button { width: 100%; margin-top: 23px; }
    .close {
      position: absolute; top: 8px; right: 10px;
      min-width: 0; width: 40px; height: 40px; padding: 0;
      border: 0; background: transparent;
      font-size: 25px; color: #8d877c;
    }
    .demo {
      margin-top: 14px; min-height: 20px;
      text-align:center; color: #b9935b; font-size: 13px;
    }
    @media (max-width: 700px) {
      .features { grid-template-columns: 1fr; margin-top: 55px; }
      .login { padding: 30px 24px; }
    }