:root{
      --pattern-url: url("https://ff.uptoo.top/wp-content/uploads/2025/08/patern.png");
      --pattern-size: 75px 75px;
      --pattern-opacity: 1; /* прозрачнее, чтобы был виден градиент */
      --acc:#798e98;
      --error:#ff5555;
      --ok:#20c997;
    }

    *{box-sizing:border-box}
    body{
      margin:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
      font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#c9d4e3;
      background: linear-gradient(to bottom, rgba(49,68,78,1) 0%, rgba(8,19,29,1) 100%);
      background-size:cover;overflow:hidden;position:relative;
    }
    body::before{
      content:"";position:fixed;inset:0;z-index:0;
      background-image:var(--pattern-url);background-position:center;background-repeat:repeat;background-size:var(--pattern-size);
      opacity:var(--pattern-opacity);pointer-events:none;
    }

    /* Input */
    .wrap{display:grid;gap:14px;z-index:10;width:min(760px,92%)}
    .input{position:relative;display:grid;grid-template-columns:1fr auto;gap:10px;width:100%;}
    ::placeholder {
        opacity: 0.5;
        color: #FFF;
    }
    .field,.btn{height:46px;border-radius:8px;background:transparent;border:1px solid #fff;color:#fff;font-size:14px}
    .field{padding:0 14px;transition: border-color .25s ease, box-shadow .25s ease}
    .field:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(77,163,255,.18)}
    .field.error{border-color:var(--error);box-shadow:0 0 0 3px rgba(255,85,85,.18)}
    .field.ok{border-color:var(--ok);box-shadow:0 0 0 3px rgba(32,201,151,.18)}
    

    .btn {
      padding: 0 16px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: 
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease;
    }

    .btn:hover {
      background: var(--acc);
      border-color: var(--acc);
      color: #fff;
      box-shadow: 0 0 12px rgba(77,163,255,.6);
    }

    /* Простой текст статуса без обёрток и украшений */
    .status-line{margin-top:4px;
      color:#fff;font-size:clamp(20px,3.2vw,28px);line-height:1.25;min-height:1.25em}

    /* Logo */
    .logo{position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none}
    .logo img{opacity:.1;max-height:calc(100vh - 180px);max-width:calc(100vh - 180px);}

    /* Footer metrics */
    .footer{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;
      padding:10px 20px;color:#6a86a6;font-size:14px;font-weight:700;border-top:1px solid rgba(255,255,255,.9);background:transparent;z-index:10}
    .footer .center{flex:1;display:flex;justify-content:center;gap:44px}

    /* мягкая красная подсветка при обновлении */
    @keyframes metricFlash{0%{color:#6a86a6;text-shadow:none}40%{color:#ff9aa5;text-shadow:0 0 6px rgba(255,0,0,.15)}100%{color:#6a86a6;text-shadow:none}}
    .metric-flash{animation:metricFlash .5s ease}

    @media (max-width:520px){.footer{font-size:12px}.footer .center{gap:24px}}

    .page-title {
      margin: 0 0 12px;
      font-size: clamp(20px, 3.4vw, 28px);
      font-weight: 700;
      text-align: center;
      color: #fff;
    }