/* The supplied mockup's navigation and two editorial banner placements. */
.header .header-actions > .header-mobile-menu { display: none; }
.header .header-actions > .header-notifications { display: inline-flex; }
.feed-layout .dam-left { overflow-y: auto; scrollbar-width: thin; max-height: calc(100dvh - 90px); }
.feed-layout .dam-left nav { flex-shrink: 0; }
.feed-layout .dam-left nav > a { min-height: 40px; padding-block: 9px; }
.feed-layout .dam-left nav > a[href="#/compose"] { margin: 15px 0 13px; }
.feed-layout .feed-nav-label { padding-top: 7px; }
.feed-layout .feed-left-bottom { margin-top: auto; padding-top: 24px; flex-shrink: 0; }
.home-banner {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #161629;
  aspect-ratio: 2.9;
  min-height: 208px;
  max-height: 290px;
  margin-bottom: 18px;
  isolation: isolate;
  color: #fff;
}
.home-banner-link { display: flex; align-items: center; height: 100%; min-height: inherit; padding: 22px 33px; }
.home-banner-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
.home-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #080b2261, #11122c0a 60%, transparent); z-index: -1; pointer-events: none; }
.home-banner-copy { max-width: 66%; }
.home-banner-copy h2 { color: #fff; font-family: var(--sans); font-size: 28px; line-height: 1.38; font-weight: 600; letter-spacing: -.9px; }
.home-banner-copy p { margin-top: 12px; color: #eeebf5; font-size: 12px; line-height: 1.75; font-weight: 400; }
.home-banner-copy > span { display: flex; align-items: center; gap: 5px; margin-top: 11px; color: #d3ccef; font-size: 10px; }
.home-banner-controls { position: absolute; right: 16px; bottom: 13px; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 11px; }
.home-banner-controls button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #171a3699; color: #fff; }
.home-banner-controls button:hover { background: #504479; }
.sidebar-banner { padding: 23px 20px 18px; margin-bottom: 15px; border-radius: 8px; background: linear-gradient(140deg, #21233f, #383052); color: #fff; box-shadow: 0 4px 12px #2920470a; }
.sidebar-banner-mark { display: block; color: #f6ca72; margin-bottom: 12px; }
.sidebar-banner h2 { font-family: var(--sans); color: #fff; font-size: 18px; line-height: 1.5; font-weight: 600; letter-spacing: -.65px; }
.sidebar-banner p { margin-top: 12px; color: #d8d2ee; font-size: 11px; line-height: 1.8; word-break: keep-all; }
.sidebar-banner > a { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 19px; padding: 11px 10px; border-radius: 6px; background: #eee9ff; color: #6c50dd; font-size: 12px; font-weight: 600; }
.sidebar-banner > a:hover { background: #fff; }
/* Useful sidebar content remains available when the public catalog is small. */
.feed-side-section.reader-shelf { padding: 19px 17px 17px; background: linear-gradient(145deg, #f9f7ff, #fff 65%); }
.reader-shelf-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.reader-shelf-avatar { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid #e4dcfb; border-radius: 12px; background: #f0eaff; color: #795ad3; font-size: 16px; }
.reader-shelf-head > div { flex: 1; min-width: 0; }
.reader-shelf-head h2 { margin: 0; line-height: 1.5; }
.reader-shelf-head p { margin-top: 3px; color: #9890a9; font-size: 10px; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-shelf-head > a { display: grid; place-items: center; min-width: 24px; min-height: 36px; color: #9a8db3; }
.reader-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 18px; }
.reader-shortcuts > a, .reader-shortcuts > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 69px; border: 1px solid #eeebf5; border-radius: 7px; background: #fff; color: #9884b8; }
.reader-shortcuts span { font-size: 10px; color: #756b86; white-space: nowrap; }
.reader-shortcuts > a:hover, .reader-shortcuts > button:hover { border-color: #d5c7f3; background: #f8f5ff; }
.reader-shelf-login { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 37px; margin-top: 12px; border-radius: 6px; background: #eee8fb; color: #7856ca; font-size: 11px; font-weight: 600; }
.reader-shelf-login:hover { background: #e5dcf8; }
.reader-resume { margin-top: 17px; border-top: 1px solid #efebf6; padding-top: 14px; }
.reader-resume > span { display: flex; align-items: center; gap: 5px; color: #9d8db4; font-size: 10px; margin-bottom: 10px; }
.reader-resume > a { display: flex; align-items: center; gap: 9px; min-height: 47px; min-width: 0; }
.reader-resume-icon { display: grid; place-items: center; width: 35px; height: 43px; flex-shrink: 0; border-radius: 5px; background: #f0eafa; color: #977db6; }
.reader-resume > a > div { flex: 1; min-width: 0; }
.reader-resume strong, .reader-resume small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.8; }
.reader-resume strong { font-size: 12px; font-weight: 600; color: #655775; }
.reader-resume small { font-size: 10px; color: #a195b0; }
.reader-resume > a > svg { flex-shrink: 0; color: #b4a5c5; }
.reader-resume > a:hover strong { color: #7651c7; }
.reader-discovery .feed-side-tags { gap: 7px 6px; }
.reader-discovery .feed-side-tags > a { display: inline-flex; align-items: center; min-height: 28px; padding: 5px 9px; font-size: 11px; line-height: 1.5; background: #f6f3fc; color: #8b70af; }
.reader-discovery .feed-side-tags > a:hover { background: #ece5fa; color: #7250b7; }
.reader-ai-setting { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 37px; margin-top: 15px; padding-top: 12px; border-top: 1px solid #f0edf5; color: #91869f; font-size: 10px; cursor: pointer; }
.reader-ai-setting input { appearance: none; position: relative; width: 29px; height: 17px; flex-shrink: 0; margin: 0; border: 1px solid #ded9e8; border-radius: 20px; background: #e8e3ee; cursor: pointer; }
.reader-ai-setting input::before { content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px #38284615; }
.reader-ai-setting input:checked { background: #9b7cda; border-color: #9b7cda; }
.reader-ai-setting input:checked::before { left: 14px; }
.reader-shelf :focus-visible, .reader-discovery :focus-visible { outline: 2px solid #8964dc; outline-offset: 3px; }
@media (pointer: coarse) {
  .reader-shelf-login, .reader-shelf-head > a, .reader-ai-setting, .reader-discovery .feed-side-tags > a { min-height: 44px; }
}
.secondary-layout .dam-main { padding-top: 30px; }
.secondary-layout .page-title-row { margin-bottom: 27px; }
.secondary-layout .page-title-row h1 { font-size: 26px; font-family: var(--sans); color: #252540; }
.secondary-layout .page-title-row p { font-size: 13px; line-height: 1.8; color: #8d879b; }
.secondary-layout .filter-line { color: #8b8399; font-size: 12px; }
.platform-status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 310px; padding: 35px 24px; text-align: center; background: #fff; border: 1px solid #ece9f5; border-radius: 10px; }
.platform-status > span { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; background: #f3efff; color: #8a71c5; }
.platform-status h2 { font-family: var(--sans); font-size: 19px; font-weight: 600; color: #5c5071; }
.platform-status p { font-size: 13px; line-height: 1.9; color: #9b8da9; word-break: keep-all; }
.platform-status.compact { min-height: 245px; }
.platform-status .btn { margin-top: 5px; }
.platform-notices { margin-top: 28px; padding: 24px; background: #fff; border: 1px solid #ece9f5; border-radius: 9px; }
.platform-notices h2 { font-size: 16px; margin-bottom: 17px; }
.platform-notices > button { display: flex; align-items: center; gap: 15px; width: 100%; text-align: left; min-height: 48px; padding: 12px 0; border-top: 1px solid #f0edf6; }
.platform-notices strong { flex: 1; font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }
.platform-notices time { font-size: 10px; color: #a18eaf; white-space: nowrap; }
.creator-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.creator-directory > .empty { grid-column: 1/-1; background: #fff; border: 1px solid #ece9f5; border-radius: 10px; }
.creator-directory-card { background: #fff; border: 1px solid #ece9f5; border-radius: 9px; padding: 22px; min-width: 0; }
.creator-directory-head { display: flex; align-items: center; gap: 12px; }
.creator-directory-head > .avatar { width: 42px; height: 42px; background: #f0e9fc !important; color: #9476bb; font-size: 18px; }
.creator-directory-head > div { flex: 1; min-width: 0; }
.creator-directory-head h2 { font-family: var(--sans); font-size: 17px; margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.creator-directory-head span:not(.avatar) { font-size: 10px; color: #a590b1; }
.creator-directory-head > svg { color: #b8acc5; }
.creator-directory-card > p { margin-top: 18px; color: #97849e; font-size: 12px; line-height: 1.85; white-space: pre-line; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.creator-directory-card .feed-tags { margin-top: 15px; }
.creator-latest { display: flex; align-items: center; gap: 9px; border-top: 1px solid #f0ebf5; margin-top: 18px; padding-top: 14px; min-width: 0; }
.creator-latest > span { font-size: 10px; color: #a294b0; white-space: nowrap; }
.creator-latest > strong { flex: 1; font-size: 12px; color: #80718d; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creator-latest > svg { color: #b9abc5; }
.navigation-panel .dam-left { display: block; position: static; height: auto; max-height: none; padding: 0; border: 0; }
.navigation-panel .dam-left nav { display: grid; position: static; gap: 4px; }
.navigation-panel .dam-left nav > a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; min-height: 44px; color: #575071; border-radius: 8px; font-size: 14px; }
.navigation-panel .dam-left nav > a.active { color: #7052dc; background: #f0eaff; font-weight: 600; }
.navigation-panel .dam-left nav > a[href="#/compose"] { justify-content: center; margin: 12px 0; background: #7355e1; color: #fff; }
.navigation-panel .feed-nav-label { margin-top: 3px; }
.navigation-panel .feed-left-bottom { padding: 24px 16px 5px; }
.navigation-panel[open] { display: flex; flex-direction: column; overflow: hidden; }
.navigation-panel .modal-header { flex-shrink: 0; }
.navigation-panel .modal-body { min-height: 0; max-height: none; overflow-y: auto; }
@media (min-width: 981px) and (max-width: 1100px) {
  .feed-layout { grid-template-columns: 140px minmax(0, 1fr) 230px; gap: 19px; }
  .feed-layout.without-aside { grid-template-columns: 140px minmax(0, 1fr); }
  .feed-layout .dam-right { display: block; }
  .dam-home-page .header-inner { grid-template-columns: 140px minmax(0, 1fr) 230px; gap: 19px; }
  .home-banner-link { padding-inline: 24px; }
  .home-banner-copy h2 { font-size: 24px; }
  .home-banner-copy p { font-size: 11px; }
  .sidebar-banner { padding: 20px 17px; }
  .sidebar-banner h2 { font-size: 17px; }
}
@media (max-width: 760px) {
  .header .header-actions > .header-mobile-menu,
  .header .header-actions > .header-notifications { display: inline-flex; min-width: 36px; min-height: 40px; padding: 8px; }
  .header .header-actions > .header-settings,
  .header .nav { display: none; }
  .header .header-inner { gap: 10px; }
  .header .header-actions { gap: 3px; margin-left: auto; }
  .home-banner { margin: 9px 0 12px; min-height: 177px; aspect-ratio: 2; max-height: 235px; border-radius: 7px; }
  .home-banner-link { padding: 20px 19px; }
  .home-banner-copy { max-width: 72%; }
  .home-banner-copy h2 { font-size: 21px; line-height: 1.4; letter-spacing: -.8px; }
  .home-banner-copy p { margin-top: 9px; font-size: 10px; line-height: 1.8; }
  .home-banner-copy > span { font-size: 9px; margin-top: 9px; }
  .home-banner-art { object-position: 60% center; }
  .home-banner::after { background: linear-gradient(90deg, #080b2266, #11122c12 73%, transparent); }
  .home-banner-controls { gap: 7px; right: 11px; bottom: 10px; font-size: 9px; }
  .home-banner-controls button { width: 27px; height: 27px; }
  .secondary-layout .dam-main { padding-top: 20px; }
  .secondary-layout .page-title-row h1 { font-size: 23px; }
  .secondary-layout .page-title-row p { font-size: 12px; }
  .creator-directory { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .creator-directory-card { padding: 20px; }
  .platform-status { min-height: 285px; padding: 27px 18px; }
  .platform-status h2 { font-size: 17px; }
  .platform-status p { font-size: 12px; }
  .platform-notices { padding: 20px 17px; }
  .navigation-panel { position: fixed; right: auto; top: 0; bottom: 0; left: 0; margin: 0; width: min(280px, 80vw); max-width: 80vw; height: 100dvh; max-height: 100dvh; border-radius: 0 14px 14px 0; animation: navigation-in-left .18s ease-out; }
  .navigation-panel .modal-header { padding: calc(14px + env(safe-area-inset-top)) 16px 10px; }
  .navigation-panel .modal-body { padding: 6px 12px calc(24px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) {
  .header .brand img { width: 94px; }
  .header .header-actions > .header-mobile-search { padding: 8px; min-width: 36px; }
  .home-banner-copy h2 { font-size: 19px; }
  .home-banner-link { padding: 18px 16px; }
  .home-banner-copy p { font-size: 9px; }
}

@keyframes navigation-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .navigation-panel { animation: none; } }