@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{
  --bg0:#0a0f14;
  --bg1:#0b1218;
  --card:#0f1820;
  --card2:#101c24;
  --stroke:rgba(255,255,255,.08);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.60);
  --green:#46c46f;
  --green2:rgba(70,196,111,.22);
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --radius:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
  background: linear-gradient(180deg, var(--bg1), var(--bg0));
  background-attachment: fixed;
}

/* prevent any accidental horizontal scroll artifacts */
body{ overflow-x: hidden; }

/* Topbar */
.topbar{
  position: sticky;
  top:0;
  z-index: 10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 16px;
  background: rgba(9,14,18,.55);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.topbar__left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width: 0;
}

.logo{
  height: 32px;
  width:auto;
  display:block;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.35));
}

.brand__title{
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.1;
}
.brand__sub{
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.nav{ display:flex; gap:10px; align-items:center; }

.nav__link{
  text-decoration:none;
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 800;
}

.nav__link:hover{
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
}

.nav__link--active{
  color: var(--text);
  border-color: rgba(70,196,111,.28);
  background: rgba(70,196,111,.10);
}

.nav__link--ghost{
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}
.nav__link--ghost:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

.nav__link--danger{
  border-color: rgba(255,107,107,.20);
}
.nav__link--danger:hover{
  border-color: rgba(255,107,107,.32);
  background: rgba(255,107,107,.08);
}

/* Layout */
.container{
  max-width: 1180px;
  margin: 18px auto 40px;
  padding: 0 16px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.panel{
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.panel__title{
  font-weight: 900;
  font-size: 18px;
}

.panel__meta{
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.row{
  display:flex;
  gap: 12px;
  align-items:flex-end;
  flex-wrap: wrap;
}
.row--tight{ align-items:center; }

.field{
  display:flex;
  flex-direction:column;
  gap: 8px;
  min-width: 180px;
}
.field--grow{ flex: 1 1 360px; }

.label{
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
}

.control{
  width: 100%;
  height: 44px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline: none;
}

.control:focus{
  border-color: rgba(70,196,111,.35);
  box-shadow: 0 0 0 3px rgba(70,196,111,.10);
}

/* SELECT (улучшаем насколько позволяет браузер) */
.control--select{ appearance: none; background: rgba(0,0,0,.28); }
select.control,
select.control option{
  background-color: #0b1218;
  color: rgba(255,255,255,.92);
}
select.control option:checked{
  background-color: rgba(70,196,111,.18);
  color: rgba(255,255,255,.92);
}

/* Textarea */
.textarea{
  width: 100%;
  min-height: 220px;
  resize: vertical;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline:none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.textarea:focus{
  border-color: rgba(70,196,111,.35);
  box-shadow: 0 0 0 3px rgba(70,196,111,.10);
}

/* Actions */
.actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.btn{
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor:pointer;
  font-weight: 900;
}
.btn-save { margin-top: 14px; }

.btn:hover{ background: rgba(255,255,255,.07); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.btn--primary{
  border-color: rgba(70,196,111,.45);
  background: var(--green2);
}
.btn--primary:hover{ background: rgba(70,196,111,.26); }

.btn--ghost{ background: transparent; }
.btn--ghost:hover{ background: rgba(255,255,255,.05); }

.check{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

/* Switch */
.switch{
  position: relative;
  width: 56px;
  height: 32px;
  display:inline-block;
}
.switch input{ display:none; }
.switch__track{
  position:absolute;
  inset:0;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.10);
  transition: .15s ease;
}
.switch__thumb{
  position:absolute;
  width: 24px;
  height: 24px;
  left: 4px;
  top: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  transition: .15s ease;
}
.switch input:checked ~ .switch__track{
  background: rgba(70,196,111,.22);
  border-color: rgba(70,196,111,.35);
}
.switch input:checked ~ .switch__thumb{
  transform: translateX(24px);
  background: rgba(70,196,111,.95);
}

/* Status */
.status{
  display:none;
  margin-top: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
  padding: 10px 12px;
  color: var(--muted);
}
.status.isVisible{ display:block; }
.status.ok{ border-color: rgba(70,196,111,.30); color: rgba(70,196,111,.95); }
.status.warn{ border-color: rgba(255,204,102,.30); color: rgba(255,204,102,.95); }
.status.bad{ border-color: rgba(255,107,107,.30); color: rgba(255,107,107,.95); }
.status.info{ border-color: rgba(70,196,111,.22); color: rgba(255,255,255,.86); }

/* Table */
.tableWrap{ overflow:auto; }
.table{
  width:100%;
  border-collapse: collapse;
  min-width: 780px;
}
.table th, .table td{
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 10px 10px;
  text-align:left;
  vertical-align: top;
}
.table th{
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.table td code{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  padding: 2px 6px;
  border-radius: 10px;
}

.badge{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.10);
}
.badge.ok{
  border-color: rgba(70,196,111,.35);
  background: rgba(70,196,111,.10);
  color: rgba(70,196,111,.95);
}
.badge.bad{
  border-color: rgba(255,107,107,.35);
  background: rgba(255,107,107,.10);
  color: rgba(255,107,107,.95);
}

.pill{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(70,196,111,.30);
  background: rgba(70,196,111,.10);
  color: rgba(255,255,255,.86);
  font-size: 12px;
  font-weight: 900;
}

.muted{ color: var(--muted); }
.err{ color: rgba(255,107,107,.95); }

/* Auth page */
.authWrap{
  min-height: calc(100vh - 72px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px 16px;
}
.authCard{
  width: min(520px, 100%);
}


.authBody{ background: radial-gradient(1200px 600px at 30% 10%, rgba(70,196,111,.12), transparent 60%), radial-gradient(1200px 700px at 80% 0%, rgba(70,196,111,.10), transparent 55%), var(--bg0); }


/* ===== ASTRUM-like unified typography & layout (override) ===== */
html,body{ background: radial-gradient(1200px 600px at 30% 10%, rgba(70,196,111,.12), transparent 60%),
                     radial-gradient(1000px 600px at 80% 0%, rgba(70,196,111,.10), transparent 55%),
                     #060a0d; }

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: .1px;
}

.container{ padding-top: 22px; }

/* Header: compact, logo + Uptime Adder */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  padding: 0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: rgba(6,10,13,.78);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.topbar__left{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 240px;
}

.brandLogo{ width:auto; height:auto; display:flex; align-items:center; }
.brandLogo__img{ height: 44px; width:auto; display:block; object-fit:contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.45)); }

.brandTitle{
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  color: rgba(255,255,255,.92);
}
.brandTitle .brandAccent{ color: var(--green); text-shadow: 0 0 18px rgba(70,196,111,.22); }

.brandSub{ display:none !important; }

.nav{ display:flex; align-items:center; gap: 10px; }
.nav__link, .nav button.nav__link{
  height: 38px;
  padding: 0 16px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.82);
  text-decoration:none;
  cursor:pointer;
}

.nav__link:hover, .nav button.nav__link:hover{
  border-color: rgba(70,196,111,.28);
  background: rgba(70,196,111,.10);
  color: rgba(255,255,255,.94);
}

.nav__link--active{
  border-color: rgba(70,196,111,.38) !important;
  background: rgba(70,196,111,.14) !important;
  color: rgba(255,255,255,.96) !important;
}

.nav__link--ghost{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.02);
}

.nav__link--ghost:hover{
  border-color: rgba(255,107,107,.30);
  background: rgba(255,107,107,.10);
}

/* Panels: slightly tighter typography */
.panel__title{ font-size: 22px; font-weight: 900; }
.panel__hint{ font-size: 13px; color: rgba(255,255,255,.62); }

/* Inputs/select: unify + darker dropdown */
.control, select.control, textarea.control{
  font-family: inherit;
  font-size: 14px;
}
select.control{
  background-color: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
}
select.control option{
  background: #0b1218;
  color: rgba(255,255,255,.92);
}

/* Auth: centered UPTIME ADDER with green accent */
.authWrap{ min-height: 100vh; padding-top: 0; }
.authCard{ width: min(520px, 100%); }

.authTitle.authTitle--big{
  font-size: 34px;
  font-weight: 1000;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.authTitle .brandAccent{ color: var(--green); }
.authSubtitle.authSubtitle--green{
  color: rgba(70,196,111,.95);
  font-weight: 900;
  margin-top: 6px;
}
/* ===== HARD header align fix (force) ===== */

/* 1) сам контейнер шапки (ловим разные варианты) */
header,
.topbar,
.appHeader,
.header,
#header,
.site-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 72px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) левая часть (лого + Uptime Adder) */
header .left,
.topbar .left,
.appHeader .left,
.header .left,
#header .left,
.site-header .left,
header .brandWrap,
.topbar .brandWrap,
.appHeader .brandWrap {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

/* 3) лого */
header img,
.topbar img,
.appHeader img,
.header img,
#header img,
.site-header img {
  display: block !important;
  height: 28px !important;
  width: auto !important;
}

/* 4) текст "Uptime Adder" — убираем базовую линию/смещения */
header .brand,
.topbar .brand,
.appHeader .brand,
.header .brand,
#header .brand,
.site-header .brand {
  display: inline-flex !important;
  align-items: center !important;   /* ВАЖНО: center, не baseline */
  gap: 6px !important;
  line-height: 1 !important;
}

/* 5) правая часть (кнопки) */
header nav,
.topbar nav,
.appHeader nav,
.header nav,
#header nav,
.site-header nav,
header .right,
.topbar .right,
.appHeader .right,
.header .right,
#header .right,
.site-header .right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* 6) все кликабельные элементы шапки приводим к одной высоте */
header a,
header button,
.topbar a,
.topbar button,
.appHeader a,
.appHeader button,
.header a,
.header button,
#header a,
#header button,
.site-header a,
.site-header button {
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* 7) если внутри кнопок есть svg/иконки — тоже выравниваем */
header svg,
topbar svg,
.appHeader svg,
.header svg,
#header svg,
.site-header svg {
  display: block !important;
}
/* ===== Fix: двойной градиент при скролле ===== */

/* 1) Градиент только на body/html */
html, body {
  min-height: 100%;
  background-color: #05090c !important;
  background-image: radial-gradient(1200px 700px at 50% 0%, rgba(70,196,111,.18), rgba(0,0,0,0) 60%),
                    radial-gradient(900px 500px at 50% 100%, rgba(70,196,111,.10), rgba(0,0,0,0) 65%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important; /* важно */
}

/* 2) Все обёртки/контейнеры обязаны быть прозрачными,
      иначе они рисуют второй градиент поверх body */
#app, .app, .wrap, .wrapper, .page, .main, main, .content, .container, .layout {
  background: transparent !important;
  background-image: none !important;
}

/* 3) Если где-то используется псевдо-слой для "свечения" — отключаем его */
.wrap::before, .wrapper::before, .page::before, .main::before, .content::before, .container::before, .layout::before,
.wrap::after,  .wrapper::after,  .page::after,  .main::after,  .content::after,  .container::after,  .layout::after {
  background: transparent !important;
  background-image: none !important;
  content: none !important;
}
#presetSaveBtn{
  margin-top: 14px !important;
  display: inline-block;
}