/**
 * Подробный режим index: фон, карточки, поля и кнопки в духе профиля / ui-forms.css.
 * Только body[data-view-mode="full"]; simpleShell и simple не затрагиваются.
 *
 * Модалка авторизации (#authBack) вне .wrap — селекторы без .wrap .modalBack.
 */

body[data-view-mode="full"]{
  background:
    radial-gradient(700px 320px at 50% 42%, rgba(255,190,120,.14), transparent 38%),
    radial-gradient(540px 240px at 58% 40%, rgba(115,170,255,.18), transparent 40%),
    radial-gradient(1100px 760px at 50% 0%, rgba(50,80,190,.14), transparent 58%),
    radial-gradient(900px 900px at 50% 100%, rgba(20,30,70,.40), transparent 65%),
    linear-gradient(180deg, #040814 0%, #050b1a 45%, #040814 100%);
  color:#eef4ff;
}

body[data-view-mode="full"] .wrap{
  max-width:1100px;
  margin:0 auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + 18px)
    16px
    calc(var(--nav-h, 78px) + var(--nav-offset, calc(env(safe-area-inset-bottom, 0px) + 10px)) + 20px)
    16px;
  position:relative;
  isolation:isolate;
}

body[data-view-mode="full"] .wrap::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.06), transparent 20%),
    linear-gradient(90deg, transparent 0%, rgba(255,255,255,.025) 50%, transparent 100%);
  z-index:0;
}

body[data-view-mode="full"] .top,
body[data-view-mode="full"] .grid{
  position:relative;
  z-index:1;
}

body[data-view-mode="full"] .grid{
  gap:12px;
}

body[data-view-mode="full"] .brand h1{
  color:#eef4ff;
}

body[data-view-mode="full"] .brand .sub{
  color:rgba(214,225,255,.52);
}

body[data-view-mode="full"] .viewSwitch button,
body[data-view-mode="full"] #btnViewToggle{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:12px 16px;
  border-radius:18px;
  border:1px solid rgba(120,180,255,.22);
  background:rgba(10,18,36,.55);
  color:#eef4ff;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:none;
  cursor:pointer;
  transition:transform .12s ease, border-color .18s ease, background .18s ease;
}

body[data-view-mode="full"] .viewSwitch button:active,
body[data-view-mode="full"] #btnViewToggle:active{
  transform:translateY(1px);
}

body[data-view-mode="full"] .viewSwitch button.active,
body[data-view-mode="full"] #btnViewToggle.active{
  border-color:rgba(95,210,255,.40);
  background:
    radial-gradient(120px 120px at 30% 30%, rgba(110,230,255,.35), transparent 55%),
    linear-gradient(135deg, rgba(70,220,255,.26), rgba(30,140,255,.18));
  box-shadow:
    0 10px 28px rgba(0,0,0,.20),
    0 0 22px rgba(110,230,255,.14);
}

body[data-view-mode="full"] .status{
  border:1px solid rgba(120,180,255,.14);
  border-radius:16px;
  background:rgba(3,10,20,.45);
  backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

body[data-view-mode="full"] .status .muted{
  color:rgba(214,225,255,.55);
}

body[data-view-mode="full"] .status #stMain{
  color:#eef4ff;
}

body[data-view-mode="full"] .grid > .card{
  border:none;
  border-radius:20px;
  background:
    radial-gradient(280px 160px at 18% 20%, rgba(120,220,255,.10), transparent 60%),
    linear-gradient(180deg, rgba(5,12,24,.70), rgba(3,10,20,.78));
  box-shadow:
    0 12px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.03);
  backdrop-filter:none;
  transition:transform .12s ease, box-shadow .18s ease, filter .18s ease;
}

body[data-view-mode="full"] .grid > .card .titleRow h2{
  margin:0;
  color:#eef4ff;
  font-weight:900;
  font-size:16px;
}

body[data-view-mode="full"] .wrap .grid .muted{
  color:rgba(214,225,255,.52);
}

body[data-view-mode="full"] .wrap .grid input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
body[data-view-mode="full"] .wrap .grid select{
  max-width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(120,180,255,.18);
  background:rgba(3,10,20,.55);
  color:#eef4ff;
  outline:none;
}

body[data-view-mode="full"] .wrap .grid input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
body[data-view-mode="full"] .wrap .grid select:focus{
  border-color:rgba(120,220,255,.45);
  box-shadow:0 0 0 3px rgba(120,220,255,.10);
}

body[data-view-mode="full"] .wrap .grid input::placeholder{
  color:rgba(214,225,255,.42);
}

body[data-view-mode="full"] .wrap .grid input[type="range"]{
  height:10px;
  border-radius:99px;
  padding:0;
  background:rgba(120,180,255,.12);
  border:1px solid rgba(120,180,255,.15);
  accent-color:rgba(110,230,255,.95);
}

body[data-view-mode="full"] .wrap .grid button:not(.accountMiniBtn){
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:12px 16px;
  border-radius:18px;
  border:1px solid rgba(120,180,255,.22);
  background:rgba(10,18,36,.55);
  color:#eef4ff;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:none;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

body[data-view-mode="full"] .wrap .grid button:not(.accountMiniBtn):active{
  transform:translateY(1px);
}

body[data-view-mode="full"] .wrap .grid button:not(.accountMiniBtn).secondary{
  min-height:38px;
  padding:10px 12px;
  border-radius:14px;
  border:none;
  background:rgba(255,255,255,.07);
  color:rgba(231,238,252,.92);
  font-size:12px;
  font-weight:900;
  letter-spacing:.01em;
  box-shadow:
    0 10px 22px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .12s ease, filter .18s ease, box-shadow .18s ease;
}

body[data-view-mode="full"] .wrap .grid button:not(.accountMiniBtn).danger{
  border:1px solid rgba(255,120,120,.35);
  background:rgba(40,12,16,.45);
  color:#ffe8e8;
  box-shadow:none;
}

body[data-view-mode="full"] .wrap .grid button:not(.accountMiniBtn):not(.secondary):not(.danger){
  border-color:rgba(95,210,255,.40);
  background:
    radial-gradient(120px 120px at 30% 30%, rgba(110,230,255,.35), transparent 55%),
    linear-gradient(135deg, rgba(70,220,255,.26), rgba(30,140,255,.18));
  color:#eef4ff;
  box-shadow:
    0 10px 28px rgba(0,0,0,.20),
    0 0 22px rgba(110,230,255,.14);
}

body[data-view-mode="full"] .miniCard{
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,.07);
  box-shadow:
    0 10px 22px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.03);
}

body[data-view-mode="full"] .miniCard .kv span:first-child{
  color:rgba(214,225,255,.45);
}

body[data-view-mode="full"] .miniCard .kv span:last-child{
  color:rgba(214,225,255,.78);
}

body[data-view-mode="full"] .device-widget{
  border:none;
  border-radius:14px;
  background:rgba(255,255,255,.07);
  color:rgba(214,225,255,.70);
  box-shadow:
    0 10px 22px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.03);
}

body[data-view-mode="full"] .uptime-box b{
  color:#eef4ff;
}

body[data-view-mode="full"] .kpi .label{
  color:rgba(214,225,255,.70);
  font-size:13px;
  line-height:1.45;
}

body[data-view-mode="full"] .kpi .value{
  color:#eef4ff;
}

body[data-view-mode="full"] .kpi .unit{
  color:rgba(214,225,255,.55);
}

/* Модалки сразу после </div> .wrap — без предка .wrap */
body[data-view-mode="full"] .modalBack{
  background:rgba(2,6,14,.72);
  backdrop-filter:blur(6px);
}

body[data-view-mode="full"] .modalBack .modal{
  border:1px solid rgba(120,180,255,.14);
  border-radius:22px;
  background:
    linear-gradient(180deg, rgba(5,12,24,.96), rgba(3,10,20,.98));
  box-shadow:
    0 18px 50px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.03);
}

body[data-view-mode="full"] .modalBack .modal h3{
  color:#eef4ff;
}

@media (max-width:768px){
  /* overrides.css: .wrap { padding:14px !important } — компенсируем низ под навбар */
  body[data-view-mode="full"] .wrap{
    padding:
      calc(env(safe-area-inset-top, 0px) + 14px)
      14px
      calc(var(--nav-h, 78px) + var(--nav-offset, calc(env(safe-area-inset-bottom, 0px) + 10px)) + 14px)
      14px !important;
  }

  body:has(.demoBanner)[data-view-mode="full"] .wrap{
    padding-top:calc(var(--demo-banner-total) + 14px) !important;
  }

  body[data-view-mode="full"] #btnViewToggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto !important;
    min-height:36px;
    padding:6px 12px;
    font-size:12px;
    font-weight:600;
    border-radius:12px;
    border:1px solid rgba(120,180,255,.22);
    background:rgba(10,18,36,.55);
    color:#eef4ff;
  }
}