/* =====================================================================
   EARTH WATCH UI — библиотека стилей (токены + компоненты + состояния)
   Подключается после app.css. Витрина всех компонентов: /styleguide.html
   Состояния для всех интерактивных элементов:
     :hover · :active (нажато) · :focus-visible (клавиатура) · [disabled] / .is-disabled
     .is-loading (идёт загрузка) · .is-success (успех, 1.5 с) · .is-error (ошибка, 1.5 с)
   ===================================================================== */
:root{
  /* цвета */
  --c-bg:#02050a; --c-surface:rgba(8,16,26,.78); --c-surface-2:#06101a; --c-surface-3:#0b1b2a;
  --c-line:rgba(120,170,210,.16); --c-line-2:rgba(120,170,210,.3); --c-line-3:rgba(120,170,210,.5);
  --c-text:#e6f0f7; --c-text-2:#8aa1b3; --c-text-3:#5d7385;
  --c-accent:#5fd3ff; --c-accent-2:#1f86b3; --c-accent-3:#14668c; --c-warm:#ffb35c;
  --c-ok:#39d98a; --c-warn:#ffa53a; --c-err:#ff5a5a; --c-info:#5fd3ff;
  /* размеры, радиусы, движение */
  --r-sm:7px; --r-md:10px; --r-lg:14px; --r-pill:999px;
  --h-btn:34px; --h-btn-sm:28px;
  --ring:0 0 0 2px var(--c-bg),0 0 0 4px var(--c-accent);
  --t-fast:.12s; --t-med:.22s; --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- базовые сбросы для фокуса ---------- */
:focus{outline:none}
:focus-visible{box-shadow:var(--ring);border-radius:var(--r-sm)}

/* ---------- кнопки: .btn (+ совместимость с .primary, .ghost, .icon-btn, .chip, .seg button, .tabs button, .cmp-btn, .actions button) ---------- */
.btn,.primary,.ghost,.icon-btn,.chip,.cmp-btn,.actions button,.actions a,.chaos-pill{
  position:relative;transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--ease),box-shadow var(--t-fast),opacity var(--t-fast)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--h-btn);padding:0 12px;border-radius:var(--r-sm);border:1px solid var(--c-line-2);background:var(--c-surface-2);color:var(--c-text);font-weight:600;font-size:12.5px}
.btn.sm{min-height:var(--h-btn-sm);padding:0 9px;font-size:11.5px}
.btn.primary,.primary{background:linear-gradient(180deg,var(--c-accent-2),var(--c-accent-3));border:1px solid #47c3f0;color:#fff;font-weight:700}
.btn.ghost,.ghost{background:transparent;border:1px solid var(--c-line-2)}
/* hover */
.btn:hover,.ghost:hover,.icon-btn:hover,.chip:hover,.cmp-btn:hover,.actions button:hover,.actions a:hover,.chaos-pill:hover{border-color:var(--c-accent);background-color:rgba(95,211,255,.06)}
.primary:hover{filter:brightness(1.12)}
.seg button:hover:not(.on),.tabs button:hover:not(.on){color:var(--c-text);background:rgba(95,211,255,.06)}
/* нажатие */
.btn:active,.primary:active,.ghost:active,.icon-btn:active,.chip:active,.cmp-btn:active,.actions button:active,.seg button:active,.chaos-pill:active{transform:scale(.97)}
/* фокус с клавиатуры */
.btn:focus-visible,.primary:focus-visible,.ghost:focus-visible,.icon-btn:focus-visible,.chip:focus-visible,.cmp-btn:focus-visible,.seg button:focus-visible,.tabs button:focus-visible,.actions button:focus-visible{box-shadow:var(--ring)}
/* неактивно */
.btn[disabled],.primary[disabled],.ghost[disabled],.icon-btn[disabled],.chip[disabled],.cmp-btn[disabled],.is-disabled{opacity:.42;cursor:not-allowed;transform:none;filter:none;pointer-events:none}
/* загрузка: спиннер, текст приглушён, клики блокируются */
.is-loading{pointer-events:none;color:transparent !important}
.is-loading::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:2px solid rgba(255,255,255,.25);border-top-color:#fff;animation:ui-spin .7s linear infinite}
.icon-btn.is-loading::after,.cmp-btn.is-loading::after{border-top-color:var(--c-accent)}
/* успех / ошибка */
.is-success{border-color:var(--c-ok) !important;box-shadow:0 0 0 3px rgba(57,217,138,.18)}
.is-error{border-color:var(--c-err) !important;box-shadow:0 0 0 3px rgba(255,90,90,.18);animation:ui-shake .35s}
/* выбранное (toggle-кнопки) */
.chip.on,.cmp-btn.on{border-color:var(--c-accent);color:#fff;background:#0f3043;box-shadow:0 0 10px rgba(95,211,255,.25)}

/* ---------- переключатель .sw (чекбокс-тумблер) ---------- */
.sw{position:relative}
.sw input{display:block !important;position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sw span{transition:background var(--t-med),box-shadow var(--t-fast)}
.sw span::after{transition:left var(--t-med) var(--ease),background var(--t-med),transform var(--t-fast)}
.sw:hover span{box-shadow:0 0 0 1px var(--c-line-3)}
.sw:active span::after{transform:scale(.85)}
.sw input:focus-visible+span{box-shadow:var(--ring)}
.sw input:checked+span{background:#1c6f93;box-shadow:inset 0 0 0 1px rgba(95,211,255,.4)}
.sw input:disabled+span{opacity:.4}
.sw.is-disabled{opacity:.45;pointer-events:none}
.sw.is-loading{color:inherit !important}
.sw.is-loading::after{display:none}
.sw.is-loading span::after{animation:ui-pulse .8s ease-in-out infinite}
.sw.is-loading em{color:var(--c-warm) !important}
.sw.is-error span{box-shadow:0 0 0 1px var(--c-err)}
.sw.is-error{animation:ui-shake .35s}
.sw.is-success span{box-shadow:0 0 0 1px var(--c-ok)}

/* ---------- ползунок input[type=range] ---------- */
input[type=range]{-webkit-appearance:none;appearance:none;height:18px;background:transparent;cursor:pointer;accent-color:auto}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--c-accent-2) var(--fill,0%),#1d3245 var(--fill,0%))}
input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#1d3245}
input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--c-accent-2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-5px;border-radius:50%;background:#dff6ff;border:2px solid var(--c-accent-2);transition:transform var(--t-fast),box-shadow var(--t-fast)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#dff6ff;border:2px solid var(--c-accent-2)}
input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.15)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.3);box-shadow:0 0 0 6px rgba(95,211,255,.18)}
input[type=range]:focus-visible{box-shadow:none}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring)}
input[type=range]:disabled{opacity:.4;cursor:not-allowed}

/* ---------- поля и списки ---------- */
select,input[type=search],input[type=text],#evSearch{transition:border-color var(--t-fast),box-shadow var(--t-fast);min-height:30px}
select:hover,input[type=search]:hover,input[type=text]:hover,#evSearch:hover{border-color:var(--c-line-3)}
select:focus-visible,input[type=search]:focus,input[type=text]:focus,#evSearch:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(95,211,255,.15)}
select:disabled,input:disabled{opacity:.45;cursor:not-allowed}
select.is-loading{color:var(--c-text-3) !important;background-image:linear-gradient(90deg,transparent,rgba(95,211,255,.12),transparent);background-size:200% 100%;animation:ui-shimmer 1.1s linear infinite}
select.is-loading::after{display:none}
select.is-error,input.is-error{border-color:var(--c-err)}

/* ---------- сегменты и вкладки ---------- */
.seg button{transition:background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.tabs button{transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}

/* ---------- окна/панели ---------- */
.panel{transition:transform var(--t-med) var(--ease),box-shadow var(--t-med)}
.panel.is-busy::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent,var(--c-accent),transparent);background-size:50% 100%;background-repeat:no-repeat;animation:ui-bar 1.1s linear infinite}
.obj-sec.is-loading{color:inherit !important;opacity:.6}
.obj-sec.is-loading::after{display:none}

/* ---------- уведомления (тосты) ---------- */
.toasts{position:fixed;left:50%;top:62px;transform:translateX(-50%);z-index:80;display:grid;gap:6px;width:min(440px,92vw);pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:9px;align-items:flex-start;padding:9px 12px;border-radius:var(--r-md);font-size:12.5px;line-height:1.35;
  background:rgba(8,20,32,.96);border:1px solid var(--c-line-2);color:var(--c-text);box-shadow:0 8px 24px rgba(0,0,0,.45);animation:ui-in .22s var(--ease)}
.toast::before{content:'ℹ';flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;background:rgba(95,211,255,.15);color:var(--c-info)}
.toast.ok{border-color:rgba(57,217,138,.5)} .toast.ok::before{content:'✓';background:rgba(57,217,138,.15);color:var(--c-ok)}
.toast.warn{border-color:rgba(255,165,58,.5)} .toast.warn::before{content:'!';background:rgba(255,165,58,.15);color:var(--c-warn)}
.toast.err{border-color:rgba(255,90,90,.55);background:rgba(36,12,16,.96)} .toast.err::before{content:'✕';background:rgba(255,90,90,.15);color:var(--c-err)}
.toast.out{opacity:0;transform:translateY(-6px);transition:opacity .25s,transform .25s}

/* ---------- анимации ---------- */
@keyframes ui-spin{to{transform:rotate(360deg)}}
@keyframes ui-pulse{50%{transform:scale(.6);opacity:.6}}
@keyframes ui-shake{20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
@keyframes ui-shimmer{to{background-position:-200% 0}}
@keyframes ui-bar{from{background-position:-50% 0}to{background-position:150% 0}}
@keyframes ui-in{from{opacity:0;transform:translateY(-6px)}}
#btnRefresh.is-loading{color:var(--c-text) !important}
#btnRefresh.is-loading::after{display:none}
#btnRefresh.is-loading{animation:ui-spin 1s linear infinite}
@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} }
input[type=text]{background:#081320;border:1px solid var(--c-line-2);border-radius:8px;padding:6px 8px;min-width:0;color:var(--c-text)}