/* Оболочка-зонтик: шапка 52px + постоянные iframe-разделы. Требует tokens.css. */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--fs-body)/1.5 var(--font);
  display: flex; flex-direction: column;
}

.topbar {
  height: var(--topbar-h); flex: none;
  background: var(--panel); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--s-3);
  padding: 0 var(--s-4);
}
.mark {
  width: 22px; height: 22px; border-radius: 6px; flex: none;
  background: var(--mark); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}

.tabs { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 0; background: none; cursor: pointer; white-space: nowrap;
  height: 36px; padding: 0 var(--s-3); border-radius: var(--radius-sm);
  font: 600 var(--fs-sm)/1 var(--font); color: var(--text-2);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab:hover { background: var(--panel-2); color: var(--text); }
.tab:focus-visible { outline: none; box-shadow: var(--focus); }
.tab.active { background: var(--accent-bg); color: var(--accent); }

.right { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.crm { font: 600 var(--fs-sm)/1 var(--font); color: var(--accent); text-decoration: none;
       padding: 0 var(--s-2); white-space: nowrap; }
.user { font: var(--fs-sm)/1.2 var(--font); color: var(--muted); white-space: nowrap;
        max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.iconbtn {
  width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:hover { background: var(--panel-2); color: var(--text); }
.iconbtn:focus-visible { outline: none; box-shadow: var(--focus); }

.frames { flex: 1; position: relative; min-height: 0; }
.frames iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: var(--bg);
}
.frames iframe[hidden] { display: none; }

@media (max-width: 720px) {
  .user { display: none; }
  .crm { display: none; }
}