/*
 * Стили экрана устройств.
 * В оригинале лежали инлайновым <style> внутри devices.php —
 * в main.css ни одного из этих классов нет.
 */


    :root{
      --card:#171718; --card2:#141418; --text:#E4E8F0; --muted:#AFC1DA;
      --border:rgba(255,255,255,.08); --accent:#0085FF; --good:#50E6A1; --bad:#FF6B6B;
    }
    .cfg-wrap{ padding:10px 14px 40px; }
    .cfg-hero{ margin:10px 14px 14px; margin-top:30px; padding:16px; border-radius:14px;
      color:var(--text); font-size:18px; text-align:center; font-family:Roboto-Medium; }

    .cfg-card{
      background:var(--card); border:1px solid var(--border); border-radius:14px;
      padding:14px; color:var(--text); margin-bottom:12px;
    }
    .cfg-title-sm{ font-size:14px; color:var(--muted); margin-bottom:6px; }

    .summary-row{
      display:flex; align-items:center; justify-content:space-between;
      gap:10px; flex-wrap:wrap; font-size:14px;
    }
    .summary-main{ font-size:15px; }
    .summary-pill{
      padding:6px 10px; border-radius:999px;
      border:1px solid var(--border); background:var(--card2);
      font-size:13px; color:var(--muted);
    }

    .dev-list{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
    .dev-item{
      border-radius:12px; background:var(--card2);
      border:1px solid var(--border);
      padding:10px 12px;
      display:flex; gap:10px; align-items:flex-start;
    }
    .dev-ico{
      width:32px; height:32px; border-radius:10px;
      display:flex; align-items:center; justify-content:center;
      background:rgba(0,133,255,.12); color:var(--accent); flex-shrink:0;
    }
    .dev-body{ flex:1 1 auto; min-width:0; }
    .dev-headline{
      display:flex; align-items:center; gap:6px; flex-wrap:wrap;
      font-size:14px; margin-bottom:3px;
    }
    .dev-app{ font-family:Roboto-Medium; }
    .dev-platform{ color:var(--muted); font-size:13px; }
    .dev-tag{
      padding:2px 8px; border-radius:999px;
      background:rgba(90,236,129,.08); color:var(--good);
      font-size:11px; text-transform:uppercase; letter-spacing:.03em;
    }
    .dev-line{ font-size:13px; color:var(--muted); margin-bottom:2px; margin-top:12px;}
    .dev-label{ opacity:.85; }
    .dev-value{ color:var(--text); }
    .dev-ua{ font-size:12px; color:var(--muted); word-break:break-word; }

    .dev-meta-row{
      display:flex; gap:10px; flex-wrap:wrap;
      font-size:12px; color:var(--muted); margin-top:4px;
      align-items:center;
    }
    .dev-meta-row span{ white-space:nowrap; }

    .dev-empty{
      text-align:center; color:var(--muted);
      padding:14px 6px; font-size:14px;
    }

    .skel{
      border-radius:6px;
      min-height:12px; animation:sk 1.2s infinite ease-in-out;
      background:rgba(255,255,255,.08);
    }
    .skel-line{ width:70%; height:14px; margin-bottom:8px; }
    .skel-small{ width:40%; height:12px; }
    @keyframes sk{ 0%,100%{opacity:.45} 50%{opacity:1} }

    .copy-chip{
      display:inline-flex; align-items:center; gap:6px;
      padding:4px 8px; border-radius:999px;
      border:1px solid var(--border);
      font-size:12px; color:var(--muted); cursor:pointer;
    }
    .copy-chip i{ font-size:12px; }
    .copy-chip:active{ transform:translateY(1px); }

    .dev-actions{
      display:flex;
      align-items:center;
      gap:8px;
      margin-left:auto;
    }

    .dev-del{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:7px;
      min-height:34px;
      padding:0 12px;
      border-radius:10px;
      border:1px solid rgba(255,107,107,.22);
      background:rgba(255,107,107,.08);
      color:var(--bad);
      cursor:pointer;
      flex-shrink:0;
      font-size:12px;
      font-family:Roboto-Medium;
      line-height:1;
    }
    .dev-del i{ font-size:12px; }
    .dev-del:active{ transform:translateY(1px); }
    .dev-del.is-busy{
      opacity:.55;
      pointer-events:none;
    }

    /* popup */
    .rvpn-modal-overlay{
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.62);
      backdrop-filter:blur(4px);
      z-index:99999;
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease;
    }
    .rvpn-modal-overlay.is-open{
      opacity:1;
      pointer-events:auto;
    }

    .rvpn-modal{
      position:fixed;
      left:50%;
      top:50%;
      width:min(420px, calc(100vw - 28px));
      transform:translate(-50%, calc(-50% + 14px)) scale(.98);
      z-index:100000;
      opacity:0;
      pointer-events:none;
      transition:opacity .18s ease, transform .18s ease;
    }
    .rvpn-modal.is-open{
      opacity:1;
      pointer-events:auto;
      transform:translate(-50%, -50%) scale(1);
    }

    .rvpn-modal-card{
      background:radial-gradient(900px 450px at 30% 0%, rgba(0,133,255,.13), transparent 55%), #121213;
      border:1px solid var(--border);
      border-radius:18px;
      overflow:hidden;
      box-shadow:0 24px 80px rgba(0,0,0,.55);
    }

    .rvpn-modal-head{
      display:flex;
      align-items:center;
      gap:10px;
      padding:14px 16px 10px;
    }
    .rvpn-modal-icon{
      width:38px;
      height:38px;
      border-radius:12px;
      background:rgba(255,107,107,.10);
      color:var(--bad);
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
      border:1px solid rgba(255,107,107,.18);
    }
    .rvpn-modal-title{
      color:var(--text);
      font-size:16px;
      font-family:Roboto-Medium;
    }

    .rvpn-modal-body{
      padding:0 16px 14px;
      color:var(--muted);
      font-size:14px;
      line-height:1.45;
    }

    .rvpn-modal-foot{
      display:flex;
      gap:10px;
      padding:0 16px 16px;
    }

    .rvpn-modal-btn{
      flex:1 1 0;
      min-height:44px;
      border-radius:12px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.05);
      color:var(--text);
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      cursor:pointer;
      font-family:Roboto-Medium;
      font-size:14px;
    }
    .rvpn-modal-btn:active{ transform:translateY(1px); }

    .rvpn-modal-btn.cancel{
      color:var(--muted);
    }

    .rvpn-modal-btn.danger{
      background:linear-gradient(180deg, rgba(255,107,107,.95), rgba(255,107,107,.72));
      border-color:rgba(255,107,107,.42);
      color:#fff;
      box-shadow:0 10px 28px rgba(255,107,107,.15);
    }

    .rvpn-modal-btn.is-busy{
      opacity:.6;
      pointer-events:none;
    }

    @media (max-width:480px){
      .dev-item{ padding:10px 10px; }
      .dev-meta-row{ flex-direction:column; align-items:flex-start; }
      .dev-actions{
        width:100%;
        margin-left:0;
        margin-top:8px;
      }
      .dev-del{
        width:100%;
      }
      .rvpn-modal-foot{
        flex-direction:column;
      }
    }