/* AppLayout / Sidebar / TopActions / AuthLayout. Shared by every customer route. */
.app-shell {
  padding:18px 22px 20px 204px;
  min-height:100dvh;
  width:100%;
  max-width:none;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:16px
}

/* One centered content rail for account pages and the model plaza. */
.app-content {
  width:calc(100% - 48px);
  max-width:1440px;
  min-width:0;
  margin:12px auto 0
}

.app-sidebar {
  position:fixed;
  left:18px;
  top:18px;
  bottom:20px;
  width:166px;
  z-index:110;
  display:flex;
  flex-direction:column;
  padding:14px 8px;
  overflow:auto
}

.sidebar-brand {
  display:flex;
  align-items:center;
  gap:9px;
  text-decoration:none;
  padding:9px 6px 25px;
  white-space:nowrap
}

.sidebar-brand strong {
  font-size:14px;
  font-weight:650
}

.brand-symbol svg {
  width:27px;
  height:27px;
  fill:var(--accent);
  color:var(--accent)
}

.app-section-nav {
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0
}

.app-section-nav a {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:48px;
  padding:11px 10px;
  font-size:13px;
  font-weight:550;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--text);
  white-space:nowrap
}

.app-section-nav a svg {
  width:21px;
  height:21px;
  color:var(--muted)
}

.app-section-nav a:hover {
  background:var(--hover-bg)
}

.app-section-nav a.active {
  background:var(--accent-soft);
  border-color:rgba(139,92,246,.30);
  color:var(--accent-text)
}

.app-section-nav a.active svg {
  color:var(--accent-text)
}

.sidebar-foot {
  margin-top:auto;
  padding:24px 4px 5px
}

.sidebar-caption {
  padding:16px 4px 0;
  font-size:9px;
  letter-spacing:.16em;
  color:var(--muted);
  opacity:.65
}

.topbar {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  min-height:48px;
  flex:none;
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
  position:relative;
  z-index:120
}

.top-actions {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap
}

.top-actions>button,.username-status,.license-card,#logoutBtn {
  background:var(--surface);
  backdrop-filter:blur(16px);
  border:1px solid var(--border);
  box-shadow:var(--ui-shadow);
  border-radius:11px;
  min-height:42px
}

.announcement-bell,.theme-toggle {
  position:relative;
  width:42px;
  height:42px;
  padding:9px;
  font-size:22px
}

.announcement-bell.has-new::after {
  content:"";
  position:absolute;
  top:7px;
  right:8px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ef7c84;
  border:1px solid var(--solid-surface)
}

.session-user-menu {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:8px
}

.username-status {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px;
  font-size:12px;
  width:100%;
  min-width:0
}

.username-value {
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.username-mark {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  flex:none;
  background:var(--hover-bg);
  border:1px solid var(--control-border);
  border-radius:8px;
  font-weight:700;
  font-size:16px
}

.username-mark::before {
  content:attr(data-initial)
}

#logoutBtn {
  width:100%;
  min-height:38px;
  font-size:12px;
  padding:9px 13px;
  white-space:nowrap
}

.license-card {
  display:grid;
  grid-template-columns:auto auto;
  align-content:center;
  align-items:center;
  column-gap:8px;
  padding:5px 12px;
  min-width:153px;
  max-width:245px;
  background:color-mix(in srgb,var(--surface) 85%,rgba(78,156,112,.3));
  font-size:11px
}

.license-card strong {
  font-size:14px;
  font-weight:650;
  color:var(--success-text);
  font-variant-numeric:tabular-nums
}

.license-card span {
  color:var(--muted)
}

.license-card em {
  font-style:normal;
  color:var(--muted);
  grid-column:1/-1;
  font-size:10px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.license-card em:empty {
  display:none
}

.topbar-marquee {
  min-width:0;
  max-width:360px;
  margin-right:auto;
  padding:8px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  backdrop-filter:blur(12px);
  font-size:11px;
  color:var(--muted)
}

.topbar-marquee-viewport {
  overflow:hidden;
  max-width:100%
}

.topbar-marquee-text {
  display:inline-block;
  white-space:nowrap
}

.topbar-marquee.is-overflowing .topbar-marquee-text {
  animation:marquee var(--scrolling-ad-duration,24s) linear infinite
}

.topbar-marquee:hover .topbar-marquee-text,
.topbar-marquee:focus-within .topbar-marquee-text {
  animation-play-state:paused
}

@keyframes marquee {
  0%,15% {
    transform:translateX(0)
  }
  85%,100% {
    transform:translateX(var(--scrolling-ad-distance,0px))
  }
}

@media(prefers-reduced-motion:reduce) {
  .topbar-marquee-viewport {
    overflow-x:auto
  }
}

.sidebar-toggle {
  display:none
}

.skip-link {
  position:fixed;
  z-index:500;
  left:210px;
  top:-100px;
  background:var(--solid-surface);
  padding:8px 14px;
  border-radius:8px
}

.skip-link:focus {
  top:10px
}

html[data-auth="guest"] .app-shell {
  padding:0;
  display:block
}

html[data-auth="guest"] :is(.app-sidebar,.topbar,.announcement-modal,.skip-link) {
  display:none!important
}

/* Unknown session is a neutral shell, never a prematurely visible login form. */
html:not([data-auth="checking"]) :is(.session-loading,.session-nav-placeholder) {
  display:none
}

html[data-auth="checking"] :is(.topbar,.sidebar-foot,.skip-link) {
  visibility:hidden
}

html[data-auth="checking"] .app-sidebar {
  pointer-events:none
}

.session-nav-placeholder {
  display:grid;
  gap:18px;
  padding:14px 8px
}

.session-nav-placeholder span,.session-skeleton span {
  display:block;
  height:18px;
  border-radius:6px;
  background:var(--surface-soft)
}

.session-loading {
  display:grid;
  grid-template-columns:minmax(0,1.75fr) minmax(300px,1fr);
  gap:18px;
  min-height:min(680px,calc(100dvh - 108px))
}

.session-loading-panel {
  padding:24px
}

#sessionLoadingText {
  margin:0 0 16px;
  font-size:14px;
  color:var(--muted)
}

.session-skeleton {
  display:grid;
  gap:20px;
  margin-top:24px
}

.session-skeleton span:first-child {
  width:38%
}

.session-skeleton span:nth-child(3) {
  width:75%
}

.session-skeleton div {
  height:180px;
  border-radius:12px;
  background:var(--field-bg)
}

@media(max-width:760px) {
  .session-loading {
    grid-template-columns:1fr
  }
  .session-loading-queue {
    display:none
  }
}

.auth-gate {
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(360px,.85fr);
  align-items:center;
  gap:clamp(40px,8vw,160px);
  width:min(1450px,84%);
  min-height:100dvh;
  margin:auto;
  padding:64px 0;
  background:transparent;
  border:0;
  box-shadow:none
}

.auth-intro {
  padding:0;
  margin:0;
  max-width:720px;
  background:none;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  color:#fff;
  text-shadow:0 3px 20px rgba(0,0,0,.28)
}

.auth-intro .eyebrow {
  font-size:20px;
  letter-spacing:.14em;
  color:#c4a4ff;
  font-weight:600
}

.auth-intro h2 {
  font-size:clamp(36px,3.6vw,64px);
  letter-spacing:.02em;
  line-height:1.35;
  margin:13px 0
}

.auth-intro p {
  font-size:clamp(23px,2.2vw,35px);
  font-weight:350;
  margin:0;
  line-height:1.7
}

.auth-card {
  width:100%;
  max-width:480px;
  justify-self:end;
  padding:32px;
  border-radius:20px;
  background:rgba(29,30,35,.79);
  border:1px solid rgba(235,231,245,.3);
  color:#f5f4f7;
  --text:#f5f4f7;
  --muted:#c1bfc8;
  --field-bg:rgba(48,49,56,.48);
  --control-border:rgba(231,227,242,.3);
  --surface-soft:rgba(255,255,255,.045);
  --hover-bg:rgba(255,255,255,.1);
  --accent:#8b5cf6;
  color-scheme:dark
}

.auth-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
  padding:4px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--control-border);
  border-radius:11px;
  margin-bottom:27px
}

.auth-tabs button {
  border:0;
  background:transparent;
  min-height:43px;
  font-weight:650
}

.auth-tabs button.active {
  background:var(--accent);
  color:white
}

.auth-form {
  display:flex;
  flex-direction:column;
  gap:18px
}

.form-heading h2 {
  font-size:25px;
  margin:0 0 4px
}

.form-heading p {
  font-size:13px;
  color:var(--muted);
  margin:0 0 6px
}

.auth-form label {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  font-weight:500;
  color:var(--text)
}

.auth-form input {
  width:100%;
  height:48px;
  font-weight:400
}

.auth-submit {
  height:48px;
  font-size:15px;
  margin-top:2px
}

.auth-message {
  min-height:18px;
  margin:0;
  font-size:12px;
  line-height:1.6;
  color:var(--success-text)
}

.auth-message.error {
  color:var(--error-text)
}

@media(max-width:1450px) {
  .app-shell {
    padding-left:198px;
    padding-right:18px
  }
  .app-sidebar {
    left:14px;
    width:166px
  }
  .topbar-marquee {
    max-width:220px
  }
  .auth-gate {
    width:84%;
    gap:6vw
  }
  .auth-card {
    padding:28px
  }
  .auth-intro h2 {
    font-size:clamp(35px,3.6vw,54px)
  }
}

@media(max-width:1200px) {
  .app-shell {
    padding-left:189px
  }
  .app-sidebar {
    width:158px;
    left:14px
  }
  .app-section-nav a {
    padding:10px 8px;
    gap:10px
  }
  .sidebar-brand {
    gap:6px;
    padding-left:4px
  }
  .sidebar-brand strong {
    font-size:13px
  }
  .topbar-marquee {
    max-width:180px
  }
  .topbar {
    gap:8px
  }
  .top-actions {
    gap:6px
  }
  .auth-gate {
    width:88%;
    grid-template-columns:1.1fr 1fr;
    gap:5vw
  }
  .auth-intro .eyebrow {
    font-size:16px
  }
}

@media(max-width:950px) {
  .topbar-marquee {
    order:3;
    max-width:none;
    width:100%
  }
  .topbar {
    min-height:48px;
    flex-wrap:wrap
  }
  .auth-gate {
    width:90%;
    gap:5vw
  }
  .auth-intro h2 {
    font-size:35px
  }
  .auth-intro p {
    font-size:24px
  }
  .auth-card {
    padding:24px
  }
}

@media(max-width:760px) {
  .app-content {
    width:100%;
    margin-top:0
  }
  .app-shell {
    padding:12px;
    gap:14px
  }
  .app-sidebar {
    transform:translateX(-190px);
    visibility:hidden;
    transition:transform .18s,visibility .18s;
    left:10px;
    top:68px;
    bottom:12px;
    width:166px;
    background:var(--solid-surface);
    z-index:150
  }
  .sidebar-open .app-sidebar {
    transform:translateX(0);
    visibility:visible;
    box-shadow:0 10px 40px rgba(0,0,0,.4)
  }
  .sidebar-open body::after {
    content:"";
    position:fixed;
    inset:64px 0 0;
    z-index:140;
    background:rgba(0,0,0,.28)
  }
  .sidebar-toggle {
    display:inline-flex;
    flex:none;
    align-self:flex-start;
    background:var(--surface);
    backdrop-filter:blur(14px);
    margin-top:1px
  }
  .topbar {
    justify-content:space-between;
    align-items:flex-start;
    gap:8px
  }
  .top-actions {
    gap:6px;
    max-width:calc(100% - 48px)
  }
  .top-actions>button,.username-status,.license-card,#logoutBtn {
    min-height:36px;
    border-radius:9px
  }
  .announcement-bell,.theme-toggle {
    width:36px;
    height:36px;
    padding:7px;
    font-size:19px
  }
  .username-status {
    height:36px;
    font-size:11px;
    padding:3px 7px
  }
  .username-mark {
    height:25px;
    width:25px;
    font-size:13px
  }
  .license-card {
    padding:4px 9px;
    min-width:132px;
    max-width:190px;
    grid-template-columns:auto auto
  }
  .license-card strong {
    font-size:12px
  }
  .license-card em {
    font-size:9px
  }
  .session-user-menu {
    gap:6px
  }
  #logoutBtn {
    font-size:11px;
    padding:7px 9px
  }
  .skip-link {
    left:60px
  }
  .auth-gate {
    width:100%;
    min-height:100dvh;
    padding:50px 24px;
    grid-template-columns:1fr;
    gap:32px;
    align-content:center
  }
  .auth-intro {
    max-width:480px;
    width:100%;
    justify-self:center
  }
  .auth-intro h2 {
    font-size:36px;
    margin:10px 0 7px
  }
  .auth-intro p {
    font-size:23px
  }
  .auth-intro .eyebrow {
    font-size:14px
  }
  .auth-card {
    justify-self:center;
    width:100%;
    max-width:480px;
    padding:24px
  }
  .auth-tabs {
    margin-bottom:24px
  }
}

@media(max-width:400px) {
  .app-shell {
    padding:10px
  }
  .top-actions {
    gap:5px
  }
  .session-user-menu {
    gap:5px
  }
  .auth-gate {
    padding:34px 18px;
    gap:26px
  }
  .auth-intro h2 {
    font-size:31px
  }
  .auth-card {
    padding:21px
  }
  .auth-form {
    gap:16px
  }
}