@font-face {
    font-family: "Golos";
    src: url("fonts/GolosText-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Golos";
    src: url("fonts/GolosText-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: "Golos";
    src: url("fonts/GolosText-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

:root{
    --bg:#1E1E1E;
    --panel:#2A2A2A;
    --text:#eaeaea;
    --muted:#737373;
    --primary:#3B99FF;      
    --danger:#FF4F4F;       
    --primary-hover:#2f6fe0;
    --danger-hover:#dc3b3b;
  }
  
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family:"Golos", sans-serif;
    color:var(--text);
    background:var(--bg);
  }
  
  
  .page{
    min-height:100dvh;
    display:grid;
    place-items:center;
    padding:24px;
  }
  
   
  .card{
    width: 360px;
    display:flex;
    flex-direction:column;
    gap: 32px;
  }
  
  
  .title{
    font-weight:600;
    font-size: 24px;
    line-height: 18px;
    margin: 0;
  }
  
  .input_container {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  
 
  .label{
    margin-left: 11px;
    text-transform:uppercase;
    font-size:12px;
    font-weight: 500;
    color:var(--muted);
  }
  
  
  .input{
    width:100%;
    border:none;
    outline:none;
    background:var(--panel);
    color:var(--text);
    font-size:16px;
    font-weight: 400;
    padding:12px;
    border-radius: 12px;
    transition: box-shadow .15s ease;
    height: 44px;
  }
  .input::placeholder{ color:var(--muted); }

  
  .actions{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
  }
  
  .btn{
    border:none;
    outline:none;
    cursor:pointer;
    font-size:16px;
    font-weight:500;
    padding:0 16px;
    border-radius:16px;            
    transition: transform .06s ease, filter .15s ease, background .15s ease;
    color:#fff;
    height: 44px;
  }
  .btn:active{ transform:translateY(1px); }
  
  .btn-primary{ background:var(--primary); }
  .btn-primary:hover{ background:var(--primary-hover); filter:saturate(1.05); }
  
  .btn-danger{ background:var(--danger); }
  .btn-danger:hover{ background:var(--danger-hover); filter:saturate(1.05); }

  /* Device actions – helpers moved from index.html */
  .help { margin: 4px 12px 0; font-size: 12px; color: var(--muted); }
  .help.error { color: var(--danger); }

  .status {
    background: var(--panel);
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--text);
  }
  .status.ok { outline: 1px solid rgba(59,153,255,.35); }
  .status.err { outline: 1px solid rgba(255,79,79,.35); }

  .btn[disabled] { opacity: .6; cursor: not-allowed; filter: saturate(1) !important; }
  .btn .spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 8px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    animation: spin .8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }