html body :is(#tg-header-root,.tg-burger-menu,.site-header,.landing-main) [data-video-montage-nav][hidden]{display:none!important}
/* Shared clapperboard silhouette for desktop header, Telegram and gallery actions.
   Use the same SVG asset in all three surfaces; the mask inherits currentColor. */
.nav-link[data-video-montage-nav] .video-montage-nav-icon{
  display:inline-flex;
  width:16px;
  height:16px;
  flex:0 0 16px;
  background-color:currentColor;
  -webkit-mask:url('/tg/icons/video-edit.svg') center / contain no-repeat;
  mask:url('/tg/icons/video-edit.svg') center / contain no-repeat;
}



/* Notification panel, toast and list item visual contract.
   notifications.js owns DOM, behavior and runtime visibility only. */

#aidc-toast-host{
  position:fixed;
  right:16px;
  top:80px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:99999;
  pointer-events:none
}

.aidc-notification-toast{
  pointer-events:auto;
  max-width:400px;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid color-mix(in srgb,var(--aidc-green-500) 22%,transparent);
  background:var(--aidc-bg-popover);
  color:var(--aidc-text-primary);
  box-shadow:var(--aidc-shadow-popover);
  font-size:13px;
  line-height:1.45;
  backdrop-filter:blur(8px);
  transition:opacity 320ms ease,transform 320ms ease
}

.aidc-notification-toast.is-leaving{
  opacity:0;
  transform:translateY(-8px)
}

#aidc-notify-panel{
  position:fixed;
  top:74px;
  right:14px;
  width:360px;
  max-width:92vw;
  max-height:70vh;
  overflow-y:auto;
  border-radius:var(--aidc-radius-dialog);
  border:1px solid var(--aidc-border-default);
  background:var(--aidc-bg-popover);
  backdrop-filter:blur(10px);
  color:var(--aidc-text-primary);
  box-shadow:var(--aidc-shadow-modal);
  z-index:99999;
  display:none
}

.aidc-notify-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px 10px;
  border-bottom:1px solid var(--aidc-border-subtle)
}

.aidc-notify-panel__title{
  font-weight:800;
  font-size:13px
}

.aidc-notify-panel__clear,
.aidc-notify-item__action{
  border:1px solid var(--aidc-border-default);
  background:var(--aidc-btn-secondary-bg);
  color:var(--aidc-text-secondary);
  border-radius:var(--aidc-radius-button);
  padding:6px 10px;
  font-size:12px;
  cursor:pointer
}

.aidc-notify-panel__clear:hover,
.aidc-notify-item__action:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

.aidc-notify-panel__list{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px
}

.aidc-notify-panel__empty{
  color:var(--aidc-text-muted);
  padding:8px 4px;
  font-size:12px
}

.aidc-notify-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  justify-content:space-between;
  padding:10px;
  border-radius:14px;
  border:1px solid var(--aidc-border-subtle);
  background:var(--aidc-bg-card);
  color:var(--aidc-text-primary)
}

.aidc-notify-item.is-unread{
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 34%,transparent);
  background:color-mix(in srgb,var(--aidc-action-primary-from) 6%,var(--aidc-bg-card) 94%)
}

.aidc-notify-item__content{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0
}

.aidc-notify-item__title{
  font-weight:750;
  font-size:12px;
  word-break:break-word;
  display:flex;
  align-items:center;
  flex-wrap:wrap
}

.aidc-notify-item__icon{
  display:inline-flex;
  vertical-align:middle;
  margin-right:4px
}

.aidc-notify-item__meta{
  font-size:11px;
  color:var(--aidc-text-muted)
}

.aidc-notify-item__description{
  font-size:11px;
  color:var(--aidc-text-secondary);
  margin-top:2px;
  opacity:.78
}

.aidc-notify-item__actions{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end
}

#aidc-notify-panel svg[stroke="#FF4444"]{stroke:var(--aidc-red-500)!important}
#aidc-notify-panel svg[stroke="#FFD700"]{stroke:var(--aidc-amber-500)!important}
#aidc-notify-panel svg[stroke="#53ff99"]{stroke:var(--aidc-green-500)!important}
#aidc-notify-panel svg[stroke="#818cf8"],
#aidc-notify-panel svg[stroke="#a78bfa"]{stroke:var(--aidc-violet-500)!important}
#aidc-notify-panel svg[stroke="#f472b6"]{stroke:var(--aidc-pink-500)!important}



/* Canonical site-header geometry contract.
   Every desktop/site page that renders components/header.html gets this file
   through header-runtime-theme.css. Page styles must not own header spacing,
   logo clipping or top/nav row geometry. */

header.site-header[data-aidc-header]{
  --aidc-header-logo-size:48px;
  --aidc-header-brand-gap:16px;
  --aidc-header-row-gap:16px;
  --aidc-header-nav-gap:10px;
  --aidc-header-topbar-bottom:12px;
  --aidc-header-nav-top:10px;
  --aidc-header-nav-bottom:16px;
  width:100%;
  min-width:0;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box;
  overflow:visible!important
}

header.site-header[data-aidc-header] .top-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--aidc-header-row-gap);
  margin:0 0 var(--aidc-header-topbar-bottom)!important;
  padding:0!important;
  flex-wrap:wrap;
  min-width:0;
  overflow:visible!important
}

header.site-header[data-aidc-header] .brand-title{
  display:inline-flex;
  align-items:center;
  gap:var(--aidc-header-brand-gap)!important;
  min-width:0;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  font-size:var(--brand-size,24px)
}

/* Brand logo and wordmark are one accessible home link on every site page.
   Keep the tagline outside the link and preserve the previous logo/text gap. */
header.site-header[data-aidc-header] .brand-home-link{
  display:inline-flex;
  align-items:center;
  gap:var(--aidc-header-brand-gap);
  min-width:0;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
  flex:0 1 auto;
}
header.site-header[data-aidc-header] .brand-home-link:focus-visible{
  outline:2px solid var(--aidc-action-focus);
  outline-offset:4px;
  border-radius:6px;
}
header.site-header[data-aidc-header] .brand-home-link:hover .mark{
  color:var(--aidc-brand-wordmark);
}

/* Canonical logo appearance. Page layouts must provide a non-clipping paint
   context for the shared header instead of altering the artwork. */
#app header.site-header[data-aidc-header] .brand-title span.logo{
  position:relative;
  isolation:isolate;
  width:var(--aidc-header-logo-size)!important;
  height:var(--aidc-header-logo-size)!important;
  min-width:var(--aidc-header-logo-size)!important;
  min-height:var(--aidc-header-logo-size)!important;
  flex:0 0 var(--aidc-header-logo-size)!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0!important;
  padding:0!important;
  border-radius:999px!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important
}

#app header.site-header[data-aidc-header] .brand-title span.logo::before{
  content:"";
  position:absolute;
  inset:-13px;
  z-index:0;
  pointer-events:none;
  border-radius:999px;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--aidc-action-primary-from) 30%,transparent) 0%,
    color-mix(in srgb,var(--aidc-action-primary-from) 18%,transparent) 42%,
    transparent 72%);
  filter:blur(5px)
}

#app header.site-header[data-aidc-header] .brand-title span.logo img{
  position:relative;
  z-index:1;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  border-radius:999px!important;
  clip-path:circle(50% at 50% 50%);
  filter:none!important
}

header.site-header[data-aidc-header] .top-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  min-width:0;
  margin:0!important;
  padding:0!important
}

header.site-header[data-aidc-header] .nav-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--aidc-header-nav-gap);
  margin:var(--aidc-header-nav-top) 0 var(--aidc-header-nav-bottom)!important;
  padding:0!important;
  min-width:0;
  box-sizing:border-box
}

header.site-header[data-aidc-header] .nav-links,
header.site-header[data-aidc-header] .nav-secondary{
  min-width:0
}

@media(max-width:1024px){
  header.site-header[data-aidc-header]{
    --aidc-header-logo-size:36px;
    --aidc-header-brand-gap:10px
  }
}

#app > .shell > [data-include*="header"],
#app > .shell > header.site-header[data-aidc-header]{
  overflow:visible!important
}

/* Dense mobile workspace header; the shared navigation still expands normally. */
@media(max-width:1000px){
  body[data-page="autoposting"] header.site-header[data-aidc-header]{
    --aidc-header-logo-size:30px;
    --aidc-header-brand-gap:8px;
    --aidc-header-row-gap:4px;
    --aidc-header-topbar-bottom:0px;
    --aidc-header-nav-top:0px;
    --aidc-header-nav-bottom:0px;
  }
  body[data-page="autoposting"] header.site-header[data-aidc-header] .brand-title{
    flex:0 0 40px;
    min-height:44px;
    justify-content:center;
  }
  body[data-page="autoposting"] header.site-header[data-aidc-header] .top-bar{
    flex-wrap:nowrap;
    gap:2px;
    min-height:56px;
    padding:0 6px!important;
    box-sizing:border-box;
  }
  body[data-page="autoposting"] header.site-header[data-aidc-header] .mark{display:none!important}
  body[data-page="autoposting"] header.site-header[data-aidc-header] .brand-sub{display:none!important}
  body[data-page="autoposting"] header.site-header[data-aidc-header] .top-right{
    width:auto;
    flex:1 1 auto;
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:2px;
    min-height:44px;
  }
  body[data-page="autoposting"] header.site-header[data-aidc-header] .aidc-burger{
    width:40px;min-width:40px;height:44px;margin:0;padding:10px;
  }
  body[data-page="autoposting"] header.site-header[data-aidc-header] .top-right-tools{
    gap:0;
    margin:0;
  }
  body[data-page="autoposting"] header.site-header[data-aidc-header] .header-icon-btn{
    width:40px;min-width:40px;height:44px;flex:0 0 40px;
  }
  body[data-page="autoposting"] header.site-header[data-aidc-header] .lang-switch{
    width:40px;min-width:40px;height:44px;padding:0;border:0;
  }
  body[data-page="autoposting"] header.site-header[data-aidc-header] .lang-btn{
    width:40px;min-width:40px;height:44px;padding:0;
  }
  body[data-page="autoposting"] header.site-header[data-aidc-header] .lang-btn--active{
    display:none;
  }
  body[data-page="autoposting"] header.site-header[data-aidc-header]:not(.is-burger-open) .nav-bar{
    visibility:hidden;
    min-height:0;
    height:0;
  }
}



/* Desktop/site navigation and legacy global action compatibility layer.
   TG navigation remains owned by tg-* adapters. */

body:not(.aidc-tg) .brand-sub,
body:not(.aidc-tg) .top-right-text{
  color:var(--aidc-text-muted)
}

body:not(.aidc-tg) .brand-title span.mark{
  color:var(--aidc-brand-wordmark)
}

body:not(.aidc-tg) .lang-switch{
  background:var(--aidc-bg-popover);
  border-color:var(--aidc-border-default)
}

body:not(.aidc-tg) .lang-btn{
  color:var(--aidc-text-secondary)
}

body:not(.aidc-tg) .lang-btn:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-primary)
}

body:not(.aidc-tg) .lang-btn--active{
  background:linear-gradient(120deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to));
  color:var(--aidc-text-inverse)
}

body:not(.aidc-tg) .nav-link,
body:not(.aidc-tg) .btn-outline{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary)
}

body:not(.aidc-tg) .nav-link:hover,
body:not(.aidc-tg) .btn-outline:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary);
  box-shadow:none
}

body:not(.aidc-tg) .nav-link--active,
body:not(.aidc-tg) .btn-outline--active,
body:not(.aidc-tg) .user-pill--active{
  background:color-mix(in srgb,var(--aidc-action-primary-from) 10%,transparent);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 38%,transparent);
  color:var(--aidc-text-primary);
  box-shadow:none
}

body:not(.aidc-tg) .nav-link span.dot{
  background:var(--aidc-action-primary-from)
}

body:not(.aidc-tg) .nav-link--ghost span.dot{
  background:var(--aidc-cyan-500)
}

body:not(.aidc-tg) .btn-primary{
  background:linear-gradient(135deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to));
  color:var(--aidc-text-inverse);
  border-color:transparent;
  box-shadow:0 0 18px var(--aidc-action-primary-glow)
}

body:not(.aidc-tg) .btn-primary:hover{
  filter:brightness(1.08);
  box-shadow:0 0 24px var(--aidc-action-primary-glow)
}

/* Light application navigation uses pink as a selection accent, not a solid
   campaign-style fill. This also prevents this late-loaded adapter from
   overriding the canonical light primary-button contract. */
html[data-aidc-color-mode="light"] body:not(.aidc-tg) .lang-btn--active{
  background:var(--aidc-workspace-selection-bg)!important;
  border-color:var(--aidc-workspace-selection-border)!important;
  color:var(--aidc-action-primary-to)!important;
  box-shadow:none!important
}

html[data-aidc-color-mode="light"] body:not(.aidc-tg) .btn-primary{
  background:var(--aidc-btn-primary-bg)!important;
  border-color:var(--aidc-btn-primary-border)!important;
  color:var(--aidc-btn-primary-text)!important;
  box-shadow:var(--aidc-btn-primary-shadow)!important;
  filter:none!important
}

html[data-aidc-color-mode="light"] body:not(.aidc-tg) .btn-primary:hover:not(:disabled){
  background:var(--aidc-btn-primary-bg-hover)!important;
  border-color:var(--aidc-btn-primary-border-hover)!important;
  color:var(--aidc-btn-primary-text)!important;
  box-shadow:none!important;
  filter:none!important
}



/* Marketing homepage only: darken the canvas behind its near-black showcase visuals.
   Do not change shared semantic tokens, other routes or the light color mode. */
html[data-aidc-color-mode="dark"]:has(body.landing-page){
  background-color:var(--aidc-landing-showcase-bg)!important
}

html[data-aidc-color-mode="dark"] body.landing-page{
  --l-bg:var(--aidc-landing-showcase-bg);
  background-color:var(--aidc-landing-showcase-bg)!important
}

/* Public landing visual adapter.
   landing.css keeps layout, motion and marketing composition ownership;
   shared surfaces, text, borders and interactive chrome route through canonical tokens. */

body.landing-page,
body.ai-services-page{
  --l-bg:var(--aidc-bg-page);
  --l-surface:var(--aidc-bg-card);
  --l-surface-hover:var(--aidc-bg-elevated);
  --l-border:var(--aidc-border-subtle);
  --l-border-hover:var(--aidc-border-strong);
  --l-text:var(--aidc-text-primary);
  --l-text-muted:var(--aidc-text-secondary);
  --l-text-dim:var(--aidc-text-muted);
  --l-pink:var(--aidc-action-primary-from);
  --l-pink-glow:var(--aidc-action-primary-glow);
  --l-blue:var(--aidc-cyan-500);
  --l-blue-glow:color-mix(in srgb,var(--aidc-cyan-500) 25%,transparent);
  --l-gradient:linear-gradient(120deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to));
  --l-gradient-text:linear-gradient(120deg,var(--aidc-action-primary-from),var(--aidc-amber-500))
}

/* Homepage-only dark card palette.
   The shared --aidc-bg-card is intentionally lighter and is correct for app
   routes. Landing cards need their own low-glare surfaces against #0b0c12.
   Keep the AI Services page and the landing light theme unchanged. */
html[data-aidc-color-mode="dark"] body.landing-page{
  --l-landing-card-bg:var(--aidc-landing-showcase-card-bg);
  --l-landing-card-bg-hover:var(--aidc-landing-showcase-card-hover-bg);
  --l-landing-card-border:var(--aidc-landing-showcase-card-border);
  --l-landing-card-border-hover:var(--aidc-landing-showcase-card-hover-border);
  --l-surface:var(--l-landing-card-bg);
  --l-surface-hover:var(--l-landing-card-bg-hover)
}

/* All five card families share the same surface and interactive treatment.
   Keep any image background on the AI Services cards intact. */
html[data-aidc-color-mode="dark"] body.landing-page :is(
  .metric-card,.f-card,.pain-card,.s-mega-card,.access-card
){
  border-color:var(--l-landing-card-border);
  transition:background-color 180ms ease,border-color var(--l-transition),transform var(--l-transition)
}

html[data-aidc-color-mode="dark"] body.landing-page :is(
  .metric-card,.f-card,.pain-card,.s-mega-card,.access-card
):hover{
  background-color:var(--l-landing-card-bg-hover);
  border-color:var(--l-landing-card-border-hover)
}

/* Small statistic labels need sufficient separation from darkened tiles. */
html[data-aidc-color-mode="dark"] body.landing-page .metric-card__label{
  color:var(--l-text-muted)
}

/* The referral banner is a card-like surface with its own pink/cyan tint.
   Preserve the tint and accent border over the same dark card base. */
html[data-aidc-color-mode="dark"] body.landing-page .referral-banner{
  background:var(--aidc-landing-showcase-referral-tint),
    var(--l-landing-card-bg)
}

html:has(body.landing-page),
html:has(body.ai-services-page){
  scrollbar-color:var(--aidc-border-default) transparent
}

html:has(body.landing-page)::-webkit-scrollbar-thumb,
html:has(body.ai-services-page)::-webkit-scrollbar-thumb{
  background:var(--aidc-border-default)!important
}

html:has(body.landing-page)::-webkit-scrollbar-thumb:hover,
html:has(body.ai-services-page)::-webkit-scrollbar-thumb:hover{
  background:var(--aidc-border-strong)!important
}

body.landing-page .l-btn--primary,
body.ai-services-page .l-btn--primary{
  color:var(--aidc-text-inverse);
  box-shadow:0 0 40px var(--aidc-action-primary-glow),0 0 0 1px var(--aidc-border-subtle)
}

body.landing-page .l-btn--primary:hover,
body.ai-services-page .l-btn--primary:hover{
  box-shadow:0 0 60px var(--aidc-action-primary-glow),var(--aidc-shadow-popover)
}

body.landing-page .l-btn--outline,
body.landing-page .l-badge,
body.ai-services-page .l-btn--outline,
body.ai-services-page .l-badge{
  border-color:var(--aidc-border-default);
  color:var(--aidc-text-secondary)
}

body.landing-page .l-btn--outline:hover,
body.ai-services-page .l-btn--outline:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:var(--aidc-border-strong);
  color:var(--aidc-text-primary)
}

body.landing-page .l-section + .l-section,
body.ai-services-page .l-section + .l-section{
  border-top-color:var(--aidc-border-subtle)
}

body.landing-page .landing-tool-card-link{
  color:var(--aidc-action-primary-from)
}



/* Header runtime visual adapter.
   Responsive layout, geometry and burger state mechanics remain in header-runtime-theme.css. */

.user-pill{
  background:var(--aidc-btn-secondary-bg);
  border-color:color-mix(in srgb,var(--aidc-status-success) 30%,transparent);
  color:color-mix(in srgb,var(--aidc-status-success) 38%,white 62%);
  box-shadow:var(--aidc-shadow-popover)
}

.user-pill__dot{
  background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--aidc-status-success) 28%,white 72%),var(--aidc-status-success) 70%);
  box-shadow:0 0 12px color-mix(in srgb,var(--aidc-status-success) 80%,transparent)
}

.user-pill__badge{
  border-color:var(--aidc-border-default);
  background:var(--aidc-btn-secondary-bg-hover);
  color:var(--aidc-text-secondary)
}

.top-right-tools{color:var(--aidc-text-secondary)}
/* Header icon visuals are part of the shared header contract and must win over
   page-scoped generic button themes (for example admin pages). */
header.site-header[data-aidc-header] .header-icon-btn{background:transparent;color:var(--aidc-text-secondary)}
header.site-header[data-aidc-header] .header-icon-btn:hover{background:transparent;color:var(--aidc-text-primary)}

.header-icon-badge{
  background:linear-gradient(120deg,var(--aidc-action-primary-from),var(--aidc-action-primary-to));
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 35%,transparent);
  color:var(--aidc-text-inverse);
  box-shadow:0 10px 20px var(--aidc-action-primary-glow)
}

.aidc-token-badge{
  background:var(--aidc-btn-secondary-bg);
  border-color:color-mix(in srgb,var(--aidc-status-warning) 25%,transparent);
  color:color-mix(in srgb,var(--aidc-status-warning) 60%,white 40%)
}

.aidc-token-badge:hover{
  background:color-mix(in srgb,var(--aidc-status-warning) 10%,transparent);
  border-color:color-mix(in srgb,var(--aidc-status-warning) 50%,transparent)
}

.aidc-token-badge__val{color:color-mix(in srgb,var(--aidc-status-warning) 60%,white 40%)}
.aidc-token-badge__sep,.aidc-token-badge__max{color:var(--aidc-text-muted)}
.aidc-token-badge.is-low{border-color:color-mix(in srgb,var(--aidc-status-warning) 55%,transparent);color:color-mix(in srgb,var(--aidc-status-warning) 58%,white 42%)}
.aidc-token-badge.is-low .aidc-token-badge__val{color:var(--aidc-status-warning)}
.aidc-token-badge.is-empty{border-color:color-mix(in srgb,var(--aidc-red-500) 50%,transparent);color:color-mix(in srgb,var(--aidc-red-500) 55%,white 45%)}
.aidc-token-badge.is-empty .aidc-token-badge__val{color:var(--aidc-red-500)}

.aidc-burger{
  background:var(--aidc-btn-secondary-bg);
  border-color:var(--aidc-border-default)
}

.aidc-burger:hover{
  background:var(--aidc-btn-secondary-bg-hover);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 45%,transparent)
}

.aidc-burger span{background:var(--aidc-text-primary)}

/* Status text was historically mixed toward white for the dark header.
   In light mode use the deeper semantic status colors directly so compact
   account/token labels remain readable on the light-grey surfaces. */
html[data-aidc-color-mode="light"] .user-pill{
  color:var(--aidc-status-success)
}
html[data-aidc-color-mode="light"] .aidc-token-badge,
html[data-aidc-color-mode="light"] .aidc-token-badge__val,
html[data-aidc-color-mode="light"] .aidc-token-badge.is-low{
  color:var(--aidc-status-warning)
}
html[data-aidc-color-mode="light"] .aidc-token-badge.is-empty{
  color:var(--aidc-red-500)
}

/* Route visuals migrated from assets/css/header-runtime-theme.css; geometry remains in that stylesheet. */
/* Current section marker: Canvas dashboard and opened Canvas boards share data-page="canvas". */
html[data-page="canvas"] .nav-secondary [data-nav-item="canvas"] {
  color:var(--aidc-text-inverse);
  border-color:var(--aidc-workspace-selection-border);
  background:var(--aidc-workspace-selection-bg);
  box-shadow:var(--aidc-btn-primary-shadow);
}

html[data-page="canvas"] .nav-secondary [data-nav-item="canvas"]:hover {
  border-color:var(--aidc-btn-primary-border-hover);
  background:var(--aidc-btn-primary-bg-hover);
}

html[data-aidc-color-mode="light"][data-page="canvas"] .nav-secondary [data-nav-item="canvas"] {
  color:var(--aidc-text-primary);
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 48%,transparent);
  background:color-mix(in srgb,var(--aidc-action-primary-from) 10%,var(--aidc-bg-card) 90%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--aidc-action-primary-from) 14%,transparent) inset;
}

html[data-aidc-color-mode="light"][data-page="canvas"] .nav-secondary [data-nav-item="canvas"]:hover {
  border-color:color-mix(in srgb,var(--aidc-action-primary-from) 64%,transparent);
  background:color-mix(in srgb,var(--aidc-action-primary-from) 14%,var(--aidc-bg-card) 86%);
}




/* Screenshot regression follow-up — shared semantic fixes only.
   Loaded from final route adapters so these rules do not become a new global
   theme owner. */

/* AI Fashion / Restyle: the selected source/result is the stage, not a fixed
   480px card. Keep the CTA in its own row and let portrait media consume all
   remaining stage height. */
.fashion-hub .fh-preview:has(.fh-rs-single){
  overflow:hidden!important;
}
.fashion-hub .fh-preview:has(.fh-rs-single) .fh-rs-single{
  flex:1 1 0!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
}
.fashion-hub .fh-preview:has(.fh-rs-single) .fh-rs-single img{
  display:block!important;
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  min-height:0!important;
  object-fit:contain!important;
}
.fashion-hub .fh-preview:has(.fh-rs-single) .fh-generate-btn{
  flex:0 0 auto!important;
}

/* AI Interior: heading + operation rail are fixed chrome; only the three-column
   workspace may consume/shrink inside the remaining viewport height. */
body.ai-interior-page .interior-hub{
  height:max(var(--aidc-workspace-content-min-height),var(--aidc-workspace-available-height))!important;
  max-height:none!important;
}
body.ai-interior-page .interior-heading,
body.ai-interior-page .interior-operation-nav,
body.ai-interior-page .interior-view-sheets-panel{
  flex:0 0 auto!important;
}
body.ai-interior-page .interior-operation-nav{
  min-height:calc(var(--aidc-control-height-md) + 22px)!important;
  height:auto!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  align-items:flex-start!important;
}
body.ai-interior-page .interior-layout{
  flex:1 1 0!important;
  min-height:0!important;
  height:auto!important;
}

/* Desktop lightbox bottom mode actions were still painted by legacy dark CSS.
   Bind the real runtime .aidc-lb__mode-btn class to the Lightbox tokens. */
.aidc-lb__mode-btn{
  background:var(--aidc-lightbox-action-bg)!important;
  border-color:var(--aidc-lightbox-action-border)!important;
  color:var(--aidc-lightbox-action-text)!important;
  -webkit-text-fill-color:var(--aidc-lightbox-action-text)!important;
  opacity:1!important;
}
.aidc-lb__mode-btn .aidc-lb__btn-icon{
  color:currentColor!important;
  background-color:currentColor!important;
  opacity:1!important;
}
.aidc-lb__mode-btn:hover,
.aidc-lb__mode-btn:focus-visible{
  background:var(--aidc-lightbox-action-bg-hover)!important;
  border-color:var(--aidc-border-strong)!important;
  color:var(--aidc-lightbox-action-text-hover)!important;
  -webkit-text-fill-color:var(--aidc-lightbox-action-text-hover)!important;
  outline:none!important;
}
.aidc-lb__mode-btn.is-on,
.aidc-lb__mode-btn[aria-pressed="true"]{
  background:var(--aidc-lightbox-action-active-bg)!important;
  border-color:var(--aidc-lightbox-action-active-border)!important;
  color:var(--aidc-lightbox-action-active-text)!important;
  -webkit-text-fill-color:var(--aidc-lightbox-action-active-text)!important;
}

/* Project Timeline media-type chips consume the readability contract instead of
   hard-coded dark-theme text. */
[data-project-timeline] .type-badge{
  background:var(--aidc-timeline-type-surface)!important;
  border-color:var(--aidc-timeline-type-border)!important;
  color:var(--aidc-timeline-type-text)!important;
  -webkit-text-fill-color:var(--aidc-timeline-type-text)!important;
  opacity:1!important;
  font-weight:700!important;
}
[data-project-timeline] .type-badge.type-image{
  background:var(--aidc-timeline-type-image-bg)!important;
  border-color:var(--aidc-timeline-type-image-border)!important;
  color:var(--aidc-timeline-type-image-text)!important;
  -webkit-text-fill-color:var(--aidc-timeline-type-image-text)!important;
}
[data-project-timeline] .type-badge.type-video{
  background:var(--aidc-timeline-type-video-bg)!important;
  border-color:var(--aidc-timeline-type-video-border)!important;
  color:var(--aidc-timeline-type-text)!important;
  -webkit-text-fill-color:var(--aidc-timeline-type-text)!important;
}
[data-project-timeline] .type-badge.type-audio{
  background:var(--aidc-timeline-type-audio-bg)!important;
  border-color:var(--aidc-timeline-type-audio-border)!important;
  color:var(--aidc-timeline-type-text)!important;
  -webkit-text-fill-color:var(--aidc-timeline-type-text)!important;
}
[data-project-timeline] .type-badge.type-text{
  background:var(--aidc-timeline-type-text-bg)!important;
  border-color:var(--aidc-timeline-type-text-border)!important;
  color:var(--aidc-timeline-type-text)!important;
  -webkit-text-fill-color:var(--aidc-timeline-type-text)!important;
}
[data-project-timeline] .type-badge.type-3d{
  background:var(--aidc-timeline-type-3d-bg)!important;
  border-color:var(--aidc-timeline-type-3d-border)!important;
  color:var(--aidc-timeline-type-text)!important;
  -webkit-text-fill-color:var(--aidc-timeline-type-text)!important;
}

/* Create Project: when the shared hierarchy opens, the folder field alone owns
   the remaining vertical space. The tree scrolls inside that space, the + button
   stays level with the folder trigger, and type/actions never get pushed below
   the modal viewport. */
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__form{
  overflow:hidden!important;
}
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__field[data-aidc-folder-picker="1"]{
  flex:1 1 auto!important;
  min-height:0!important;
}
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__field[data-aidc-folder-picker="1"] .tree-modal__row{
  flex:1 1 auto!important;
  min-height:0!important;
  align-items:flex-start!important;
}
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__field[data-aidc-folder-picker="1"] .tree-modal__select-wrap[data-aidc-hierarchy="1"]{
  flex:1 1 auto!important;
  min-height:0!important;
  height:100%!important;
}
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__field[data-aidc-folder-picker="1"] .aidc-project-create-ref-tree{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
}
.tree-modal .tree-modal__field[data-aidc-folder-picker="1"] .tree-modal__row>.btn{
  width:42px!important;
  min-width:42px!important;
  height:42px!important;
  min-height:42px!important;
  flex:0 0 42px!important;
  margin:0!important;
}
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__actions{
  position:relative!important;
  z-index:3!important;
  flex:0 0 auto!important;
  background:var(--aidc-project-create-surface)!important;
}

/* Lightbox boot placeholder is static markup shown before the media lifecycle
   has mounted its real loader/error layers. Keep it out of first paint; genuine
   missing-preview errors are rendered by the dedicated runtime error element. */
.aidc-lb__media>.aidc-lb__placeholder[data-i18n="ui.no_preview"]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

@media(max-width:900px){
  .fashion-hub .fh-preview:has(.fh-rs-single) .fh-rs-single img{
    width:100%!important;
    height:auto!important;
    max-height:50dvh!important;
  }
}
@media(max-width:980px){
  body.ai-interior-page .interior-hub{height:auto!important}
  body.ai-interior-page .interior-operation-nav{min-height:calc(var(--aidc-control-height-md) + 18px)!important}
  body.ai-interior-page .interior-layout{flex:0 0 auto!important;height:auto!important;min-height:var(--aidc-workspace-content-min-height)!important}
}

/* Create Project modal geometry: the previous open-tree rule made the form
   100% tall inside a modal that also contains the title. That necessarily pushed
   the action row below the card. Make the modal itself the height owner, then let
   the form consume only the space left after the title. */
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])){
  display:flex!important;
  flex-direction:column!important;
}
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden]))>.tree-modal__title{
  flex:0 0 auto!important;
}
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__form{
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 0!important;
  height:auto!important;
  min-height:0!important;
  overflow:hidden!important;
}
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__field[data-aidc-folder-picker="1"]{
  flex:1 1 0!important;
  overflow:hidden!important;
}
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__field[data-aidc-folder-picker="1"] .tree-modal__row,
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__field[data-aidc-folder-picker="1"] .tree-modal__select-wrap[data-aidc-hierarchy="1"]{
  flex:1 1 0!important;
  min-height:0!important;
}
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__field[data-aidc-folder-picker="1"] .aidc-project-create-ref-tree{
  flex:1 1 0!important;
  min-height:0!important;
  max-height:none!important;
}
.tree-modal:has(.aidc-project-create-ref-tree:not([hidden])) .tree-modal__actions{
  flex:0 0 auto!important;
  margin-top:4px!important;
  padding-bottom:2px!important;
}


/* Header runtime responsive interaction geometry.
   Canonical top/nav row and logo geometry: site-header-layout-contract.css.
   Navigation visual ownership: design-system/adapters/site-navigation-theme.css.
   Remaining visual ownership: design-system/adapters/header-runtime-theme.css. */

.nav-secondary{display:flex;flex-wrap:wrap;gap:6px}
[data-aidc-mobile-return],
[data-aidc-mobile-support]{display:none!important}
.nav-secondary .btn-outline.btn-compact,.nav-secondary .btn-outline.auth-btn{padding:6px 10px;font-size:12px;line-height:1.2}
.nav-links{gap:6px;display:flex;flex-wrap:wrap}
.nav-link.nav-link--compact{padding:8px 10px;font-size:13px;line-height:1.1}

/* Requested 20% reduction of the FIRST desktop navigation row only.
   Secondary utility links and <=1200px burger-menu touch targets are unchanged.
   Layout dimensions are reduced directly (never transform:scale), so the
   header reflows to the actual smaller button widths. */
@media (min-width:1201px){
  header.site-header[data-aidc-header] .nav-links{gap:4.8px}
  header.site-header[data-aidc-header] .nav-links .nav-link.nav-link--compact{
    padding:6.4px 8px;
    font-size:10.4px;
    line-height:1.1;
    gap:6.4px;
  }
  header.site-header[data-aidc-header] .nav-links .nav-link span.dot{
    width:6.4px;
    height:6.4px;
    flex:0 0 6.4px;
  }
  header.site-header[data-aidc-header] .nav-links .video-montage-nav-icon{
    width:12.8px;
    height:12.8px;
    flex:0 0 12.8px;
  }
}

/* Current section marker: Canvas dashboard and opened Canvas boards share data-page="canvas". */
html[data-page="canvas"] .nav-secondary [data-nav-item="canvas"]{
}
html[data-page="canvas"] .nav-secondary [data-nav-item="canvas"]:hover{
}
html[data-aidc-color-mode="light"][data-page="canvas"] .nav-secondary [data-nav-item="canvas"]{
}
html[data-aidc-color-mode="light"][data-page="canvas"] .nav-secondary [data-nav-item="canvas"]:hover{
}

.user-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid transparent;border-radius:14px;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}
.user-pill.is-auth .user-pill__dot{opacity:1}
.user-pill__dot{width:10px;height:10px;border-radius:50%;opacity:0;transition:opacity .12s ease}
.user-pill__name{white-space:nowrap}
.user-pill__badge{font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:999px;border:1px solid transparent}

.top-right{display:flex;align-items:center;gap:12px}
.top-right-tools{display:flex;align-items:center;gap:10px}
/* Shared header controls own their geometry. Keep page-level generic button rules
   from inflating notification/theme icons on admin and other feature pages. */
header.site-header[data-aidc-header] .header-icon-btn{position:relative;display:inline-grid;place-items:center;box-sizing:border-box;width:26px;min-width:26px;height:26px;padding:0;margin:0;flex:0 0 26px;border-radius:10px;border:none;line-height:1;cursor:pointer;transition:120ms ease}
.header-icon{width:18px;height:18px;display:block}
.header-icon-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;border:1px solid transparent;font-weight:800;font-size:11px;line-height:18px;text-align:center}

.aidc-token-badge{display:none;align-items:center;gap:4px;padding:4px 10px;border:1px solid transparent;border-radius:14px;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer;transition:border-color .15s,background .15s}
.aidc-token-badge__icon{font-size:14px;line-height:1}
.aidc-token-badge__sep{margin:0 1px}
.aidc-token-badge__max{font-weight:500}

.aidc-burger{display:none;width:36px;height:36px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;margin-right:6px;border:1px solid transparent;border-radius:10px;cursor:pointer;transition:background .15s,border-color .15s}
.aidc-burger span{display:block;width:18px;height:2px;border-radius:2px;transition:transform .2s,opacity .2s}
.aidc-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.aidc-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.aidc-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1200px){
  .aidc-burger{display:flex;order:-1}
  .top-right-text{display:none!important}

  /* The collapsed burger is a true zero-height state. Core/tablet rules also
     style .nav-bar and can leave its children paintable outside max-height:0;
     keep closed navigation fully clipped, non-interactive and out of layout. */
  header.site-header[data-aidc-header]:not(.is-burger-open) .nav-bar{
    max-height:0!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    visibility:hidden!important;
    pointer-events:none!important;
    gap:0!important;
  }

  header.site-header[data-aidc-header].is-burger-open .nav-bar{
    max-height:1200px!important;
    height:auto!important;
    min-height:0!important;
    margin:var(--aidc-header-nav-top,10px) 0 var(--aidc-header-nav-bottom,16px)!important;
    padding-top:8px!important;
    overflow:hidden!important;
    visibility:visible!important;
    pointer-events:auto!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:8px!important;
  }

  .nav-links,.nav-secondary{flex-direction:column!important;align-items:stretch!important;gap:4px!important;width:100%}
  [data-aidc-mobile-return]:not([hidden]),
  [data-aidc-mobile-support]:not([hidden]){display:flex!important;align-items:center}
  .nav-link.nav-link--compact,.nav-secondary .btn-outline.btn-compact{width:100%;justify-content:flex-start;padding:10px 14px!important;font-size:14px!important}
}