/* Ease Fire — каркас (app, sidebar, main) */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:13.5px;
  line-height:1.5;
  position:relative;
  overflow:hidden;
}
body::before{
  content:'';
  position:fixed;
  top:-40%;left:-10%;
  width:90vw;height:90vh;
  background:radial-gradient(circle, var(--accent-from) 0%, transparent 55%);
  opacity:.28;
  pointer-events:none;
  filter:blur(90px);
  z-index:0;
}
body::after{
  content:'';
  position:fixed;
  bottom:-30%;right:-20%;
  width:80vw;height:80vh;
  background:radial-gradient(circle, #0088ff 0%, transparent 55%);
  opacity:.22;
  pointer-events:none;
  filter:blur(90px);
  z-index:0;
}
.app{
  display:grid;
  grid-template-columns:250px 1fr;
  height:100vh;
  position:relative;
  z-index:1;
}

/* --- Sidebar --- */
.sb{
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-right:1px solid var(--border);
  padding:24px 14px;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.logo{
  padding:8px 14px 28px;
  font-size:17px;
  font-weight:600;
  letter-spacing:-.02em;
}
.logo em{font-style:normal;color:var(--accent)}
nav{flex:1;display:flex;flex-direction:column;gap:2px}
nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  color:var(--text-dim);
  text-decoration:none;
  font-size:13.5px;
  border-radius:11px;
  transition:.15s;
  cursor:pointer;
  position:relative;
}
nav a .ic{width:16px;text-align:center;font-size:14px}
nav a.on{
  background:linear-gradient(135deg,rgba(255,85,0,.2),rgba(255,0,90,.12));
  color:#fff;
  border:1px solid rgba(255,120,60,.25);
  box-shadow:0 8px 20px -8px rgba(255,85,0,.4);
}
nav a:hover{background:rgba(255,255,255,.05);color:#fff}
nav a .badge{
  margin-left:auto;
  background:rgba(255,85,85,.9);
  color:#fff;
  font-size:10px;
  font-weight:600;
  padding:2px 7px;
  border-radius:99px;
}
.sb-foot{
  border-top:1px solid var(--border);
  padding-top:14px;
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:12px;
  padding-left:14px;
  padding-right:14px;
}
.avatar{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--accent-grad);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:13px;
  flex-shrink:0;
}
.u-info{font-size:12px}
.u-info b{display:block;color:#fff;font-size:13px;font-weight:600}
.u-info span{color:var(--text-muted)}

/* --- Main --- */
.main{overflow-y:auto;padding:28px 36px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
h1{font-size:24px;font-weight:600;letter-spacing:-.02em}
.sub{color:var(--text-muted);font-size:13px;margin-top:2px}

/* --- Секции (router) --- */
.section{display:none}
.section.on{display:block}

/* --- Scroll --- */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.15)}
/* ============ Custom Elements ============ */
/* По умолчанию HTMLElement = display:inline. Все наши компоненты — блочные. */
ef-kpi, ef-table, ef-search, ef-dust, ef-field, ef-check,
ef-empty, ef-health, ef-toast-host,
ef-page-dashboard, ef-page-tickets, ef-page-objects, ef-page-equipment,
ef-page-map, ef-page-monters, ef-page-kpi, ef-page-settings { display: block; }
ef-btn { display: inline-block; }

/* Модификатор на ef-btn не работает по умолчанию, стиль применяется к внутреннему button — это ок */

/* Модалки и sidebar уже имеют явный display через класс */