/* Original controls/handlers, displayed in the existing desktop sidebar. */
.generator-page-tabs[hidden] { display: none !important; }
#generator-minimal-page, #generator-medium-page { min-width:0; }
.generator-page-loading { padding:24px; border:1px solid #d9e2ec; border-radius:8px; background:white; color:#64748b; }
.generator-page-tabs,
.generator-side-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
  margin: 0 0 20px;
}
.generator-page-tabs > button,
.generator-page-tabs > a,
.generator-side-nav > a,
.generator-side-nav > span {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: #334155;
  font: 600 14px/1.45 Inter, "Segoe UI", Arial, sans-serif;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.generator-page-tabs > button.active,
.generator-side-nav > [aria-current="page"] {
  background: #5146db;
  border-color: #5146db;
  color: #fff;
}
.generator-page-tabs > :focus-visible,
.generator-side-nav > :focus-visible {
  outline: 2px solid #796cff;
  outline-offset: 2px;
}
@media (min-width: 1181px) {
  .generator-page-tabs,
  .generator-side-nav {
    position: fixed;
    z-index: 28;
    top: var(--generator-navigation-top, 198px);
    bottom: 20px;
    left: 16px;
    width: calc(var(--cc-sidebar-width, 292px) - 32px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
  }
  .generator-page-tabs::before,
  .generator-side-nav::before {
    content: "Фото и видео";
    flex: none;
    padding: 8px 12px 10px;
    color: #a8b8d0;
    font: 800 11px/1.4 Inter, "Segoe UI", Arial, sans-serif;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .generator-page-tabs > button,
  .generator-page-tabs > a,
  .generator-side-nav > a,
  .generator-side-nav > span {
    flex: none;
    width: 100%;
    padding: 11px 12px;
    border-color: transparent;
    background: transparent;
    color: #cbd7e8;
    box-shadow: none;
  }
  .generator-page-tabs > :hover,
  .generator-side-nav > a:hover {
    background: #121a2f;
    color: #fff;
  }
  .generator-page-tabs > button.active,
  .generator-side-nav > [aria-current="page"] {
    background: #121a2f;
    border-color: #ffffff1a;
    box-shadow: inset 4px 0 0 #0e9384;
    color: #fff;
  }
  .generator-standalone {
    --cc-sidebar-width: 292px;
    padding-left: var(--cc-sidebar-width);
  }
  .generator-standalone::before {
    content: "";
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--cc-sidebar-width);
    background: linear-gradient(180deg, #1967d22e, transparent 18rem), #0a1020;
    pointer-events: none;
  }
  .generator-standalone > header {
    min-height: 70px;
    padding: 20px 24px;
    align-items: center;
    background: #f8fafc;
    border-bottom: 1px solid #d9e2ec;
    color: #657087;
  }
  .generator-standalone > header > a {
    position: fixed;
    z-index: 29;
    top: 24px;
    left: 28px;
    width: 236px;
    color: #fff;
    line-height: 1.5;
  }
  .generator-standalone > header > span { margin-left: auto; }
  .generator-standalone > main { max-width: none; margin: 28px 0 0; }
  .generator-standalone .generator-side-nav { top: 96px; }
}