/*
 * Стили экрана «Информация о подписке».
 * В оригинале — инлайновый <style> внутри config.php; в main.css
 * ни одного .cfg-* класса нет.
 * Часть классов пересекается с devices.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-row{ display:flex; gap:12px; align-items:flex-start; padding:10px 4px; }
    .cfg-ico{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; margin-top:1px; opacity:.9; }
    .cfg-ico i{ font-size:16px; color:var(--accent); }
    .cfg-col{ flex:1 1 auto; min-width:0; }
    .cfg-title{ font-family:Roboto-Medium; font-size:14px; color:var(--muted); margin-bottom:6px; }
    .cfg-val{ font-size:15px; word-break:break-word; }
    .cfg-val .ok{ color:var(--good); } .cfg-val .bad{ color:var(--bad); }
    .cfg-note{ color:var(--muted); font-size:13px; margin-left:6px; }

    /* блок ссылки + маленькая кнопка копирования */
    .cfg-link{
      display:flex; align-items:center; gap:10px; padding:8px 10px;
      border-radius:10px; background:var(--card2); border:1px solid var(--border);
      min-height:44px;
    }
    .cfg-link .text{
      flex:1 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
      cursor:pointer; /* клик = открыть */
    }
    .cfg-actions{ display:flex; gap:8px; flex:0 0 auto; }
    .cfg-btn{
      display:inline-flex; align-items:center; justify-content:center;
      width:38px; height:34px; border-radius:10px;
      border:1px solid var(--border); background:transparent;
      color:var(--text); font-size:16px; cursor:pointer;
    }
    .cfg-btn i{ font-size:16px; color:var(--muted); }
    .cfg-btn:active{ transform:translateY(1px); }

    .cfg-empty{ text-align:center; color:var(--muted); padding:18px 10px; }
    .cfg-cta{ margin-top:12px; }
    .cfg-cta .af-btn{
      width:100%; background:#0085FF; color:#fff; border:0; padding:16px; border-radius:12px;
      box-shadow:0 10px 26px rgba(0,133,255,.25), 0 1px 0 rgba(255,255,255,.08) inset;
      font-size:16px; font-family:Roboto-Medium; cursor:pointer;
    }
    .cfg-skel{ height:16px; width:60%; background:rgba(255,255,255,.06); border-radius:6px; animation:sk 1.2s infinite ease-in-out; }
    @keyframes sk{ 0%,100%{opacity:.45} 50%{opacity:1} }