/* WEB PANEL PROXY public CSS */
*,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0;min-height:100%}
  body{
    font-family:'Oswald','Segoe UI',system-ui,-apple-system,sans-serif;
    background:#07070a;color:#fff;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  ::selection{background:#fbbf24;color:#000}

  .app{position:relative;min-height:100vh;display:flex;flex-direction:column;
       overflow:hidden;z-index:1}

  /* фон */
  .bg-radial{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at 50% 35%,#191920 0%,#0a0a0d 55%,#000 100%)}
  .bg-lines{position:absolute;inset:0;pointer-events:none;opacity:.04;
    background-image:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 14px)}
  .bg-glow{position:absolute;left:50%;top:50%;width:900px;height:900px;
    transform:translate(-50%,-50%);border-radius:50%;
    background:rgba(251,191,36,.10);filter:blur(160px);pointer-events:none}
  .bg-vignette{position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.85) 100%)}

  /* шапка */
  header{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:20px;position:relative;z-index:10}
  @media(min-width:768px){header{padding:28px 40px}}

  .brand{display:flex;align-items:center;gap:12px}
  .brand-mark{position:relative;width:40px;height:40px;display:grid;place-items:center}
  .brand-mark::before{content:"";position:absolute;inset:0;transform:rotate(45deg);
    border:2px solid rgba(251,191,36,.8)}
  .brand-mark span{position:relative;font-family:'Impact','Arial Black',sans-serif;
    font-size:18px;line-height:1;color:#fbbf24}

  .brand-text{line-height:1.1}
  .brand-title{font-family:'Impact','Arial Black',sans-serif;font-size:14px;
    letter-spacing:.2em}
  @media(min-width:768px){.brand-title{font-size:16px}}
  .brand-sub{font-size:10px;letter-spacing:.35em;color:rgba(255,255,255,.4)}

  .clock-wrap{text-align:right;display:none}
  @media(min-width:640px){.clock-wrap{display:block}}
  .clock{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;
    color:#fbbf24;font-variant-numeric:tabular-nums}
  .server-status{display:flex;align-items:center;justify-content:flex-end;gap:8px;
    font-size:10px;letter-spacing:.3em;color:rgba(255,255,255,.4);margin-top:2px}
  .dot-red{width:6px;height:6px;border-radius:50%;background:#ef4444;
    animation:pulse 1.8s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

  /* центр */
  main{flex:1;display:flex;flex-direction:column;align-items:center;
    justify-content:center;padding:32px 20px;text-align:center;
    position:relative;z-index:10}

  .loader-line{display:flex;align-items:center;gap:12px;font-size:11px;
    letter-spacing:.4em;color:#fbbf24;margin-bottom:20px}
  @media(min-width:768px){.loader-line{font-size:12px}}

  .spinner{display:inline-block;width:14px;height:14px;border-radius:50%;
    border:2px solid rgba(251,191,36,.25);border-top-color:#fbbf24;
    animation:spin .7s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  .blink{animation:blink 1.6s ease-in-out infinite}
  @keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}

  /* GTA-заголовок */
  .gta-title{
    font-family:'Impact','Arial Black',sans-serif;
    font-weight:400;
    font-size:clamp(36px,10vw,128px);
    line-height:.95;letter-spacing:.02em;margin:0;
    transform:skewX(-6deg);
    text-shadow:
      -4px -4px 0 #000, 0 -4px 0 #000, 4px -4px 0 #000,
      -4px 0 0 #000, 4px 0 0 #000,
      -4px 4px 0 #000, 0 4px 0 #000, 4px 4px 0 #000,
      16px 16px 0 rgba(0,0,0,.55);
  }
  .gta-title .line{display:block}
  .gta-title .gold{color:#fbbf24}

  .desc{margin:24px auto 0;max-width:640px;font-size:14px;line-height:1.65;
    color:rgba(255,255,255,.55)}
  @media(min-width:768px){.desc{font-size:16px}}

  /* прогресс */
  .progress-wrap{margin-top:40px;width:100%;max-width:576px}
  .progress-labels{display:flex;align-items:flex-end;justify-content:space-between;
    font-size:10px;letter-spacing:.3em;margin-bottom:8px}
  @media(min-width:768px){.progress-labels{font-size:12px}}
  .progress-labels .label{color:rgba(255,255,255,.45)}
  .progress-value{font-family:'Impact','Arial Black',sans-serif;font-size:16px;
    color:#fbbf24;font-variant-numeric:tabular-nums}
  @media(min-width:768px){.progress-value{font-size:18px}}

  .progress-track{height:12px;width:100%;border:2px solid rgba(255,255,255,.15);
    background:rgba(0,0,0,.6);padding:2px}
  @media(min-width:768px){.progress-track{height:16px}}
  .progress-fill{position:relative;height:100%;width:0;
    background:linear-gradient(90deg,#d97706,#fbbf24,#fcd34d);
    transition:width .7s cubic-bezier(.2,.8,.2,1)}
  .stripes{position:absolute;inset:0;
    background-image:repeating-linear-gradient(90deg,
      rgba(255,255,255,.5) 0 7px,transparent 7px 14px);
    opacity:.5;animation:stripe-move .55s linear infinite}
  @keyframes stripe-move{from{background-position:0 0}to{background-position:14px 0}}

  .status-msg{margin-top:12px;text-align:left;font-size:10px;letter-spacing:.25em;
    color:rgba(255,255,255,.35)}
  @media(min-width:768px){.status-msg{font-size:12px}}

  /* чек-лист */
  .checklist{list-style:none;padding:0;margin:32px 0 0;width:100%;max-width:576px;
    display:grid;gap:8px;grid-template-columns:1fr}
  @media(min-width:640px){.checklist{grid-template-columns:1fr 1fr}}
  .checklist li{display:flex;align-items:center;gap:12px;
    border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.02);
    padding:8px 12px;font-size:11px;letter-spacing:.05em}
  @media(min-width:768px){.checklist li{font-size:12px}}
  .check-box{display:grid;place-items:center;width:16px;height:16px;flex:0 0 16px;
    border:1px solid rgba(255,255,255,.2);color:transparent;font-size:10px;
    line-height:1;transition:all .3s}
  .checklist li.done .check-box{border-color:#fbbf24;background:#fbbf24;color:#000}
  .checklist li .item-text{color:rgba(255,255,255,.4);transition:color .3s}
  .checklist li.done .item-text{color:rgba(255,255,255,.8)}

  /* подвал */
  footer{padding:0 20px 24px;position:relative;z-index:10}
  @media(min-width:768px){footer{padding:0 40px 28px}}
  .tip-box{margin:0 auto;max-width:576px;border-left:2px solid #fbbf24;
    background:rgba(255,255,255,.03);padding:12px 16px}
  .tip-text{font-size:12px;line-height:1.6;color:rgba(255,255,255,.7);margin:0;
    transition:opacity .35s ease,transform .35s ease}
  @media(min-width:768px){.tip-text{font-size:14px}}
  .tip-text.fade{opacity:0;transform:translateY(-6px)}
  .tip-text .strong{font-weight:600;color:#fbbf24}

  .footer-meta{margin:16px auto 0;max-width:576px;display:flex;
    flex-direction:column;gap:8px;font-size:10px;letter-spacing:.2em;
    color:rgba(255,255,255,.3)}
  @media(min-width:640px){.footer-meta{flex-direction:row;align-items:center;
    justify-content:space-between}}
  .footer-meta a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s}
  .footer-meta a:hover{color:#fbbf24}

  @media(prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms!important;
      animation-iteration-count:1!important;transition-duration:.01ms!important}
  }