:root{
  --lf-bg:#070b0e;
  --lf-card:#0d1318;
  --lf-card2:#10181e;
  --lf-line:#1d2a31;
  --lf-text:#f4f8f6;
  --lf-muted:#87969e;
  --lf-green:#35ef9a;
  --lf-green2:#1dcc7d;
  --lf-danger:#ff6675;
  --lf-radius:18px;
}

#lfconAccessPanel{
  display:none!important;
}

#lfFinalAccess{
  width:min(100%,980px);
  margin:30px auto 0;
}

.lf-section-card{
  background:linear-gradient(145deg,#0e1419,#0a1014);
  border:1px solid var(--lf-line);
  border-radius:24px;
  padding:28px;
  box-shadow:0 22px 70px rgba(0,0,0,.22);
}

.lf-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:25px;
  margin-bottom:24px;
}

.lf-head h2{
  margin:0 0 7px;
  font-size:26px;
}

.lf-muted{
  color:var(--lf-muted);
  line-height:1.55;
}

.lf-status{
  flex:0 0 auto;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(53,239,154,.24);
  background:rgba(53,239,154,.08);
  color:var(--lf-green);
  font-size:13px;
  font-weight:800;
}

.lf-status.off{
  color:var(--lf-muted);
  border-color:var(--lf-line);
  background:#0a1014;
}

.lf-trial{
  padding:22px;
  margin:20px 0;
  border-radius:18px;
  border:1px solid rgba(53,239,154,.2);
  background:rgba(53,239,154,.055);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.lf-trial strong{
  display:block;
  font-size:20px;
  margin-bottom:5px;
}

.lf-btn{
  appearance:none;
  border:0;
  outline:0;
  min-height:46px;
  padding:0 18px;
  border-radius:13px;
  cursor:pointer;
  font:inherit;
  font-weight:800;
  transition:.18s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none!important;
}

.lf-btn-primary{
  color:#03110a!important;
  background:var(--lf-green);
}

.lf-btn-primary:hover{
  transform:translateY(-1px);
  background:#5af2ac;
}

.lf-btn-secondary{
  color:var(--lf-text)!important;
  background:#111a20;
  border:1px solid #26353d;
}

.lf-btn-secondary:hover{
  border-color:#3a4c55;
  background:#152027;
}

.lf-btn-danger{
  color:#ff8793!important;
  background:rgba(255,102,117,.07);
  border:1px solid rgba(255,102,117,.2);
}

.lf-btn-small{
  min-height:38px;
  padding:0 13px;
  font-size:13px;
}

.lf-device-create{
  border-top:1px solid var(--lf-line);
  margin-top:25px;
  padding-top:25px;
}

.lf-form-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr auto;
  gap:12px;
  align-items:end;
}

.lf-field label{
  display:block;
  margin:0 0 8px;
  color:#b9c4c9;
  font-size:13px;
  font-weight:700;
}

.lf-input,
.lf-select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  box-sizing:border-box;
  min-height:48px;
  border:1px solid #25333b;
  border-radius:13px;
  background:#080e12;
  color:var(--lf-text);
  padding:0 14px;
  outline:none;
  font:inherit;
  transition:.18s ease;
}

.lf-select{
  cursor:pointer;
  padding-right:42px;
  background-image:
    linear-gradient(45deg,transparent 50%,#82929a 50%),
    linear-gradient(135deg,#82929a 50%,transparent 50%);
  background-position:
    calc(100% - 19px) 21px,
    calc(100% - 14px) 21px;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

.lf-input:focus,
.lf-select:focus{
  border-color:rgba(53,239,154,.65);
  box-shadow:0 0 0 3px rgba(53,239,154,.08);
}

.lf-devices-title{
  margin:32px 0 14px;
  font-size:18px;
}

.lf-device-card{
  border:1px solid var(--lf-line);
  background:#0a1014;
  border-radius:18px;
  padding:20px;
  margin-top:12px;
}

.lf-device-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.lf-device-name{
  font-size:17px;
  font-weight:850;
}

.lf-platform{
  display:inline-block;
  margin-top:5px;
  color:var(--lf-muted);
  font-size:13px;
}

.lf-tabs{
  display:flex;
  gap:6px;
  margin-top:18px;
  padding:5px;
  border-radius:13px;
  background:#070c0f;
  width:max-content;
  max-width:100%;
}

.lf-tab{
  border:0;
  border-radius:9px;
  padding:9px 13px;
  background:transparent;
  color:var(--lf-muted);
  cursor:pointer;
  font-weight:750;
}

.lf-tab.active{
  background:#16231d;
  color:var(--lf-green);
}

.lf-install-panel{
  margin-top:17px;
}

.lf-install-box{
  padding:18px;
  border-radius:15px;
  background:#0e161b;
  border:1px solid #1c2930;
}

.lf-install-box h4{
  margin:0 0 7px;
}

.lf-install-box p{
  margin:0 0 14px;
  color:var(--lf-muted);
  line-height:1.55;
}

.lf-credentials{
  display:grid;
  gap:9px;
  margin-top:14px;
}

.lf-credential{
  display:grid;
  grid-template-columns:125px minmax(0,1fr) 40px;
  align-items:center;
  min-height:48px;
  background:#080e12;
  border:1px solid #1d2b32;
  border-radius:12px;
  overflow:hidden;
}

.lf-credential-label{
  color:var(--lf-muted);
  font-size:12px;
  font-weight:700;
  padding-left:13px;
}

.lf-credential-value{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#edf7f2;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
}

.lf-copy{
  width:40px;
  height:48px;
  border:0;
  border-left:1px solid #1d2b32;
  background:transparent;
  color:#91a2aa;
  cursor:pointer;
  font-size:17px;
}

.lf-copy:hover{
  color:var(--lf-green);
  background:rgba(53,239,154,.05);
}

.lf-manual-steps{
  color:#c3ced3;
  line-height:1.7;
  padding-left:21px;
}

.lf-manual-steps li{
  margin:7px 0;
}

.lf-empty{
  border:1px dashed #27353c;
  padding:25px;
  text-align:center;
  color:var(--lf-muted);
  border-radius:16px;
}

#lfModalLayer{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(1,5,7,.78);
  backdrop-filter:blur(8px);
}

#lfModalLayer.show{
  display:flex;
}

.lf-modal{
  width:min(100%,470px);
  background:#0d1418;
  border:1px solid #26343b;
  border-radius:24px;
  padding:28px;
  box-shadow:0 30px 100px rgba(0,0,0,.55);
}

.lf-modal-icon{
  width:50px;
  height:50px;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  background:rgba(53,239,154,.1);
  color:var(--lf-green);
  font-size:23px;
}

.lf-modal h3{
  margin:0 0 9px;
  font-size:22px;
}

.lf-modal p{
  margin:0;
  color:var(--lf-muted);
  line-height:1.6;
}

.lf-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  margin-top:24px;
}

#lfToastArea{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:1000000;
  display:grid;
  gap:9px;
}

.lf-toast{
  min-width:230px;
  max-width:380px;
  padding:13px 16px;
  border-radius:13px;
  background:#121b20;
  border:1px solid #27363d;
  box-shadow:0 14px 50px rgba(0,0,0,.35);
  color:#edf7f2;
  animation:lfToastIn .2s ease;
}

.lf-toast.good{
  border-color:rgba(53,239,154,.28);
}

.lf-toast.bad{
  border-color:rgba(255,102,117,.3);
}

@keyframes lfToastIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

@media(max-width:760px){
  #lfFinalAccess{
    margin-top:20px;
  }

  .lf-section-card{
    padding:20px;
    border-radius:20px;
  }

  .lf-head,
  .lf-trial{
    display:block;
  }

  .lf-status{
    display:inline-block;
    margin-top:13px;
  }

  .lf-trial .lf-btn{
    margin-top:15px;
    width:100%;
  }

  .lf-form-grid{
    grid-template-columns:1fr;
  }

  .lf-form-grid .lf-btn{
    width:100%;
  }

  .lf-device-top{
    align-items:flex-start;
  }

  .lf-credential{
    grid-template-columns:95px minmax(0,1fr) 40px;
  }

  .lf-tabs{
    width:100%;
  }

  .lf-tab{
    flex:1;
  }

  #lfToastArea{
    left:15px;
    right:15px;
    bottom:15px;
  }

  .lf-toast{
    min-width:0;
    max-width:none;
  }
}

/* LFCON_UI_SYNC_V2 */

.lf-limit-note{
  margin-top:7px;
  color:#a5b3ba;
  font-size:13px;
  line-height:1.5;
}

.lf-device-counter{
  color:var(--lf-green);
  font-weight:800;
}

.lf-trial-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.lf-mini-badge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  background:#101b17;
  border:1px solid rgba(53,239,154,.18);
  color:#b8c8c0;
  font-size:12px;
  font-weight:700;
}

.lf-mini-badge strong{
  display:inline;
  margin:0 4px 0 0;
  font-size:12px;
  color:var(--lf-green);
}

#lfDeviceLimitInfo{
  margin-top:10px;
}

.lf-device-create.is-limit{
  opacity:.65;
}

.lf-device-create.is-limit .lf-form-grid{
  display:none;
}

@media(max-width:760px){
  .lf-trial-meta{
    margin-bottom:4px;
  }
}

/* LFCON_LAYOUT_FIX_V3 */
#lfFinalAccess{
    width: 100%;
    max-width: 850px;
    margin: 30px auto 60px;
    box-sizing: border-box;
}

#lfFinalAccess .lf-section-card{
    width: 100%;
    box-sizing: border-box;
}

@media(max-width:900px){
    #lfFinalAccess{
        width: calc(100% - 32px);
        margin: 24px auto 50px;
    }
}

/* LFCON_CUSTOM_SELECT_V4 */

/* Общая геометрия блока */
#lfFinalAccess .lf-section-card{
    padding: 28px;
}

#lfFinalAccess .lf-head{
    margin-bottom: 26px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--lf-line);
}

#lfFinalAccess .lf-device-create{
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

#lfFinalAccess .lf-form-grid{
    display: grid;
    grid-template-columns: minmax(260px, 1.55fr) minmax(220px, 1fr) 116px;
    gap: 14px;
    align-items: end;
}

#lfFinalAccess .lf-field{
    min-width: 0;
    margin: 0;
}

#lfFinalAccess .lf-field label{
    display: block;
    height: 18px;
    margin: 0 0 8px;
    line-height: 18px;
    color: #c5d0d5;
    font-size: 12px;
    font-weight: 750;
}

#lfFinalAccess .lf-input{
    display: block;
    width: 100%;
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding: 0 15px;
    border: 1px solid #263740;
    border-radius: 13px;
    background: #080e12;
    color: #f4f8f6;
    font-size: 14px;
    line-height: 50px;
    box-sizing: border-box;
}

#lfFinalAccess .lf-input::placeholder{
    color: #697981;
}

#lfFinalAccess .lf-input:hover{
    border-color: #344850;
}

#lfFinalAccess .lf-input:focus{
    border-color: #35ef9a;
    box-shadow: 0 0 0 3px rgba(53,239,154,.08);
}

/* Старый браузерный select оставляем в DOM для JS,
   но пользователь его больше не видит */
#lfPlatform{
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Кастомный LFCON dropdown */
.lf-custom-select{
    position: relative;
    width: 100%;
    height: 50px;
}

.lf-custom-select-button{
    width: 100%;
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding: 0 44px 0 15px;
    border: 1px solid #263740;
    border-radius: 13px;
    background: #080e12;
    color: #f4f8f6;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    box-sizing: border-box;
    position: relative;
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.lf-custom-select-button:hover{
    border-color: #344850;
    background: #0a1115;
}

.lf-custom-select.open .lf-custom-select-button{
    border-color: #35ef9a;
    box-shadow: 0 0 0 3px rgba(53,239,154,.08);
}

.lf-custom-select-arrow{
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid #83939b;
    border-bottom: 2px solid #83939b;
    transform: translateY(-65%) rotate(45deg);
    transition: transform .18s ease;
    pointer-events: none;
}

.lf-custom-select.open .lf-custom-select-arrow{
    transform: translateY(-30%) rotate(225deg);
}

.lf-custom-select-menu{
    position: absolute;
    z-index: 10000;
    left: 0;
    right: 0;
    top: calc(100% + 8px);

    padding: 7px;

    background: #0d1519;
    border: 1px solid #263740;
    border-radius: 14px;

    box-shadow:
        0 18px 55px rgba(0,0,0,.48),
        0 0 0 1px rgba(255,255,255,.015);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity .15s ease,
        transform .15s ease,
        visibility .15s ease;
}

.lf-custom-select.open .lf-custom-select-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lf-custom-select-option{
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    margin: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #c7d2d7;
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition:
        background .14s ease,
        color .14s ease;
}

.lf-custom-select-option:hover{
    background: #14211c;
    color: #f4f8f6;
}

.lf-custom-select-option.selected{
    background: rgba(53,239,154,.10);
    color: #35ef9a;
    font-weight: 750;
}

.lf-custom-select-option.selected::after{
    content: "✓";
    margin-left: auto;
    color: #35ef9a;
    font-weight: 900;
}

/* Кнопка строго той же высоты */
#lfCreateDevice{
    width: 116px;
    height: 50px;
    min-height: 50px;
    margin: 0;
    padding: 0 16px;
    border-radius: 13px;
    box-sizing: border-box;
}

/* Лимит */
#lfDeviceLimitInfo{
    margin: 14px 0 0;
    padding: 0;
    line-height: 1.55;
    color: #819198;
    font-size: 12px;
}

/* Список устройств */
#lfDevicesHeading{
    margin: 30px 0 14px;
}

#lfDevicesList{
    margin-top: 0;
}

#lfDevicesList .lf-empty{
    margin-top: 14px;
    padding: 24px;
}

/* Чтобы dropdown не обрезался карточкой */
#lfFinalAccess,
#lfFinalAccess .lf-section-card,
#lfDeviceCreate,
#lfFinalAccess .lf-form-grid,
#lfFinalAccess .lf-field{
    overflow: visible;
}

/* Мобильная версия */
@media(max-width:760px){

    #lfFinalAccess .lf-section-card{
        padding: 20px;
    }

    #lfFinalAccess .lf-head{
        margin-bottom: 22px;
        padding-bottom: 20px;
    }

    #lfFinalAccess .lf-form-grid{
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #lfCreateDevice{
        width: 100%;
    }

    #lfDeviceLimitInfo{
        margin-top: 14px;
    }

    #lfDevicesHeading{
        margin-top: 26px;
    }
}

/* LFCON_DASHBOARD_COMPACT_V5 */

/* Поднимаем основной ЛК */
#dashboard,
.dashboard,
.dashboard-wrap,
.dashboard-container,
main{
    padding-top: 28px !important;
}

/* Если основной контейнер центрировался по вертикали */
#dashboard{
    align-items: flex-start !important;
    justify-content: flex-start !important;
    min-height: auto !important;
}

/* Убираем огромную пустоту после верхней панели */
#dashboard > div:first-child,
.dashboard > div:first-child{
    margin-top: 0 !important;
}

/* Подключение ближе к верхним карточкам */
#lfFinalAccess{
    margin-top: 18px !important;
    margin-bottom: 60px !important;
}

/* Сам блок чуть компактнее */
#lfFinalAccess .lf-section-card{
    padding: 24px 28px !important;
}

#lfFinalAccess .lf-head{
    margin-bottom: 20px !important;
    padding-bottom: 20px !important;
}

/* Уменьшаем лишнюю вертикальную высоту верхней части ЛК */
#dashboard h1{
    margin-top: 10px !important;
    margin-bottom: 6px !important;
}

/* Верхние карточки делаем компактнее */
#dashboard .card,
#dashboard [class*="card"]{
    min-height: 0;
}

/* Блок подключения не отталкиваем вниз */
#lfFinalAccess{
    clear: both;
}

/* На ноутбуках ещё компактнее */
@media (min-width:761px) and (max-height:900px){
    #dashboard,
    .dashboard,
    .dashboard-wrap,
    .dashboard-container,
    main{
        padding-top: 18px !important;
    }

    #lfFinalAccess{
        margin-top: 14px !important;
    }
}

@media(max-width:760px){
    #dashboard,
    .dashboard,
    .dashboard-wrap,
    .dashboard-container,
    main{
        padding-top: 16px !important;
    }

    #lfFinalAccess{
        margin-top: 16px !important;
        margin-bottom: 40px !important;
    }
}

/* LFCON_CURSOR_FIX_V6 */
#dashboard button,
#dashboard a[href],
#dashboard [role="button"],
#lfFinalAccess button,
#lfFinalAccess a[href],
#lfFinalAccess [role="button"]{
    cursor: pointer !important;
}

#dashboard button:disabled,
#lfFinalAccess button:disabled{
    cursor: not-allowed !important;
}


/* LFCON_DASHBOARD_LAYOUT_FINAL_V7 */

/*
 * Основной main больше НЕ центрирует ЛК по вертикали.
 * Auth-карточка при этом продолжает нормально отображаться.
 */
main{
    align-items:flex-start !important;
    justify-content:center !important;
    padding:28px 20px 50px !important;
}

/* Сам ЛК остаётся той же ширины и по центру */
#dashboard.dashboard{
    width:100% !important;
    max-width:850px !important;
    margin:0 auto !important;
    padding:0 !important;
}

/* Верхняя строка */
#dashboard .topline{
    margin:0 0 22px !important;
    align-items:center !important;
}

#dashboard .badge{
    margin-bottom:12px !important;
}

#dashboard h1{
    margin:0 0 5px !important;
}

#dashboard .subtitle{
    margin:0 !important;
}

/* Сетка карточек */
#dashboard .grid{
    gap:16px !important;
    margin:0 !important;
}

/* Чуть компактнее карточки */
#dashboard .box{
    padding:21px 24px !important;
}

/* Кнопки справа в шапке */
.lf-dashboard-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}

.lf-instructions-nav{
    height:38px;
    padding:0 16px;
    border-radius:10px;
    border:1px solid #24523f;
    background:#10271e;
    color:#35ef9a;
    font-size:13px;
    font-weight:750;
    cursor:pointer;
    transition:
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.lf-instructions-nav:hover{
    background:#153426;
    border-color:#35ef9a;
}

.lf-instructions-nav:active{
    transform:translateY(1px);
}

/*
 * Блок подключения теперь является нормальной частью dashboard.
 * Та же ширина, что и верхняя сетка.
 */
#dashboard #lfFinalAccess{
    width:100% !important;
    max-width:none !important;
    margin:18px 0 42px !important;
    box-sizing:border-box !important;
    clear:both !important;
}

#dashboard #lfFinalAccess .lf-section-card{
    width:100% !important;
    box-sizing:border-box !important;
}

/* Якорь скролла не прячется под верхней частью страницы */
#lfFinalAccess{
    scroll-margin-top:22px;
}

/* Все интерактивные элементы */
#dashboard button,
#dashboard a[href],
#dashboard [role="button"],
#lfFinalAccess button,
#lfFinalAccess a[href],
#lfFinalAccess [role="button"]{
    cursor:pointer !important;
}

/* Но disabled остаётся disabled */
#dashboard button:disabled,
#lfFinalAccess button:disabled{
    cursor:not-allowed !important;
}

/* Но auth-экран визуально держим аккуратно */
#auth.card{
    margin:auto 0;
}

@media(max-width:650px){

    main{
        padding:18px 16px 36px !important;
    }

    #dashboard .topline{
        align-items:flex-start !important;
        gap:14px !important;
    }

    .lf-dashboard-actions{
        gap:7px;
    }

    .lf-instructions-nav,
    #dashboard .logout{
        padding-left:12px;
        padding-right:12px;
    }

    #dashboard #lfFinalAccess{
        margin-top:16px !important;
        margin-bottom:32px !important;
    }
}