/* LGE Showroom V2. Presentation layer shared by the public site, customer portal
   and administration. Existing state classes and JS hooks remain in main.css. */
:root {
  color-scheme: light;
  --bg: #f3f3f8;
  --bg-2: #eeebf6;
  --panel: #fff;
  --panel-strong: #fff;
  --panel-soft: #f8f6fc;
  --text: #191720;
  --muted: #686373;
  --muted-2: #7c748b;
  --brand: #7a63fe;
  --brand-2: #9780fa;
  --brand-ink: #6951c7;
  --brand-soft: #f0ecfc;
  --brand-soft-2: #eae3fc;
  --brand-line: #dcd2f6;
  --line: #e4dfec;
  --line-2: #eeebf3;
  --shadow-1: 0 8px 26px rgb(43 29 69 / 4%);
  --shadow-2: 0 18px 48px rgb(43 29 69 / 8%);
  --radius-large: 18px;
  --radius-medium: 12px;
  --radius-button: 11px;
  --focus: 0 0 0 3px rgb(122 99 254 / 18%);
  --layout-width: 1180px;
  --grid-size: 32px;
  --grid-line: rgb(121 95 224 / 3.5%);
  --contrast: #272434;
  --success-bg: #eff8f1;
  --success-ink: #21613a;
  --error-bg: #fff2f2;
  --error-ink: #9b3038;
  --warning-bg: #fff7e8;
  --warning-ink: #805d17;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  background: radial-gradient(ellipse at 94% 14%, #e8e3f7, transparent 65%), var(--bg);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

body::before {
  opacity: 1;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: linear-gradient(#000, rgb(0 0 0 / 15%));
}

.pageShell { flex: 1; min-height: 0; padding: 32px 0 44px; }
.pageContainer { width: min(var(--layout-width), calc(100% - 64px)); }
.pageShell :is(section, article, aside, form, label),
.dashboardContent, .dashboardSidebar, .customerInboxMain,
.demoLibraryCardText, .adminWorkspaceContent { min-width: 0; }

h1 { font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.23; letter-spacing: -.035em; font-weight: 600; }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.35; letter-spacing: -.025em; font-weight: 600; }
h3 { font-weight: 600; line-height: 1.4; }
p { line-height: 1.8; }
h1, h2, h3, p, code, .admin-detail-value, .customer-detail-value { overflow-wrap: anywhere; }
.sectionEyebrow { color: var(--brand-ink); font-size: .68rem; letter-spacing: .095em; line-height: 1.6; }
.textBrand { color: var(--brand-ink); }
:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 3px; box-shadow: var(--focus); }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }

/* Header: retain every existing destination, safe-back hook and logout form. */
.topbar {
  background: rgb(251 250 254 / 97%);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.topbarInner {
  width: min(var(--layout-width), calc(100% - 64px));
  min-height: 90px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
}
.topbarCenter { flex: 0 0 auto; gap: 14px; justify-content: flex-start; }
.topbarLogo { padding: 0; border: 0; border-radius: 12px; box-shadow: none; background: none; }
.topbarLogo:hover { transform: none; background: none; box-shadow: none; }
.topbarLogoImage { width: 66px; height: 52px; border-radius: 12px; }
.topbarBrand { padding-left: 14px; border-left: 1px solid var(--line); }
.topbarBrand > span { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.03em; }
.topbarBrand small { display: block; color: var(--muted-2); font-size: .54rem; text-transform: uppercase; letter-spacing: .12em; }
.topbarNavigation { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.topbarLink, .topbarBack { padding: 9px 11px; min-height: 40px; border: 1px solid transparent; border-radius: 9px; font-size: .8rem; font-weight: 500; }
.topbarLink.isActive { background: var(--brand-soft-2); color: var(--brand-ink); border-color: var(--brand-line); box-shadow: none; }
.topbarLink:hover, .topbarBack:hover { background: var(--brand-soft); box-shadow: none; color: var(--brand-ink); }
.topbarLegal { font-size: .7rem; color: var(--muted-2); }
.topbarLeft { flex: 0 1 auto; }
.topbarLeft:empty { display: none; }
.topbarRight { flex: 0 0 auto; }
.topbarRight > a, .topbarLogoutButton {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--brand-line); background: var(--brand-soft-2); color: var(--text);
  padding: 10px 15px; min-height: 42px; border-radius: var(--radius-button);
  font-size: .8rem; font-weight: 600; box-shadow: none;
}

/* Identical controls across public pages, authentication and workspaces. */
.buttonPrimary, .buttonGhost, .buttonSecondary, .loginButton {
  border-radius: var(--radius-button);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.5;
  gap: 10px;
  min-height: 44px;
  padding: 11px 16px;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  white-space: normal;
}
.buttonPrimary, .loginButton {
  background: linear-gradient(105deg, var(--brand), var(--brand-2));
  border: 1px solid transparent;
  box-shadow: 0 5px 15px rgb(122 99 254 / 13%);
}
.buttonGhost, .buttonSecondary { background: #fff; border-color: var(--line); box-shadow: 0 3px 10px rgb(43 29 69 / 2%); backdrop-filter: none; }
.buttonPrimary:hover, .loginButton:hover { box-shadow: 0 7px 18px rgb(122 99 254 / 19%); filter: brightness(1.02); }
.buttonGhost:hover, .buttonSecondary:hover { background: var(--panel-soft); border-color: var(--brand-line); box-shadow: var(--shadow-1); }
.buttonPrimary.danger { background: linear-gradient(105deg, #a93240, #bd4752); box-shadow: 0 5px 15px rgb(169 50 64 / 12%); }
.buttonSecondary.danger { color: var(--error-ink); border-color: #edcbd0; background: var(--error-bg); }
.buttonSecondary.danger:hover { background: #fce8eb; border-color: #dfacb3; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; }
.buttonPrimary:disabled, .buttonGhost:disabled, .buttonSecondary:disabled { opacity: .5; transform: none; box-shadow: none; }

:is(.fieldGroup, .authForm, .customerAccountForm) input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]),
.admin-select, .admin-textarea, .admin-search-input,
.demoLibraryControls input, .demoLibraryControls select,
.admin-table input[type="text"], .admin-table input[type="number"], .admin-table textarea {
  min-width: 0; max-width: 100%; min-height: 46px; padding: 11px 14px;
  color: var(--text); background: #fcfbfe; border: 1px solid var(--line);
  border-radius: var(--radius-medium); font: inherit; box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
:is(.fieldGroup, .authForm, .customerAccountForm) input:focus,
.admin-select:focus, .admin-textarea:focus, .admin-search-input:focus,
.demoLibraryControls :is(input, select):focus, .admin-table :is(input, textarea):focus {
  border-color: var(--brand); outline: none; box-shadow: var(--focus); background: #fff;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); flex-shrink: 0; }
.fieldGroup { gap: 7px; }
.fieldGroup > span { font-size: .85rem; font-weight: 600; }
.fieldGroup input:disabled { color: var(--muted); background: var(--line-2); }
.authForm, .customerAccountForm { gap: 18px; }
.authCheckboxLine { border-radius: var(--radius-medium); background: var(--panel-soft); }
.fileUploadWrapper { flex-wrap: wrap; }
.fileUploadName { overflow-wrap: anywhere; min-width: 0; }

/* Shared card language. No state-dependent display rules are replaced. */
.heroCard, .infoCard, .legalCard, .authCard, .dashboardSidebarCard,
.dashboardPanel, .dashboardStatCard, .customerStatCard, .customerProjectCard,
.demoLibraryCard, .demoAdminCard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-large); box-shadow: var(--shadow-1);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.infoCard:hover, .dashboardStatCard:hover, .customerStatCard:hover,
.customerProjectCard:hover, .demoLibraryCard:hover, .demoAdminCard:hover {
  border-color: var(--brand-line); box-shadow: 0 12px 30px rgb(43 29 69 / 7%); transform: translateY(-2px);
}
.customerDocumentCard, .customerInboxCard, .customerRoadmapCard,
.customerMessageCard, .customerSecurityCard, .authHint, .customerInfoHint,
.adminInfoCard, .customerInfoCard, .projectOverview > div,
.admin-empty-state, .customerEmptyState {
  border-color: var(--line); border-radius: 14px; background: var(--panel-soft);
  box-shadow: none; backdrop-filter: none;
}
.adminInfoCard code, .customerInfoCard code { font-size: .85rem; }
.customerInboxCard.isUnread { background: var(--brand-soft); border-color: var(--brand-line); }
.customerInfoHintWarning { background: var(--brand-soft); border-color: var(--brand-line); }
.customerStatValue, .statValue { font-weight: 600; font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.demoMetaTags { gap: 6px; }
.demoMetaTags span { background: var(--brand-soft); border: 1px solid transparent; color: var(--brand-ink); border-radius: 6px; font-size: .7rem; font-weight: 500; }

/* Public showroom: the only large dark presentation surface. */
.heroSection { padding-top: 6px; }
.showroomHero {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 42px; align-items: center;
  padding: clamp(28px, 4.5vw, 52px); background: var(--contrast); border-color: #373244;
}
.showroomHero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: linear-gradient(rgb(191 169 255 / 3%) 1px, transparent 1px), linear-gradient(90deg, rgb(191 169 255 / 3%) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size); mask-image: linear-gradient(90deg, transparent, #000);
}
.showroomHero .sectionEyebrow { color: #baa9ff; }
.showroomHero .heroTitle { color: #f5f3fa; font-size: clamp(2rem, 3.7vw, 3rem); line-height: 1.25; }
.showroomHero .heroTitle span { color: #ad98ff; }
.showroomHero .heroText { color: #c5bfce; font-size: .9rem; max-width: 46ch; }
.showroomHero .buttonGhost { background: rgb(255 255 255 / 7%); color: #efebfa; border-color: #5c526c; box-shadow: none; }
.showroomHero .buttonGhost:hover { background: rgb(255 255 255 / 12%); border-color: #9c8bb5; }
.showroomHeroNote { margin: 0; padding: 22px 0 26px; border-bottom: 1px solid var(--line); font-size: .76rem; }
.showroomStage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: center; min-width: 0; }
.showroomStageTile { overflow: hidden; border: 3px solid #eeebf5; border-radius: 12px; background: #f2eefb; box-shadow: 0 10px 20px rgb(16 10 28 / 15%); }
.showroomStageTile:first-child { grid-column: 1 / -1; }
.showroomWindowBar { display: flex; gap: 3px; align-items: center; padding: 6px 7px; background: #fff; }
.showroomWindowBar > span { width: 3px; height: 3px; background: #d9d2e8; border-radius: 50%; }
.showroomStageImage { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: top; }
.showroomStageTile:not(:first-child) .showroomStageImage { aspect-ratio: 16 / 9; }
.showroomStageFallback { min-height: 105px; padding: 16px; background-image: linear-gradient(rgb(122 99 254 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(122 99 254 / 4%) 1px, transparent 1px); background-size: 24px 24px; color: var(--brand-ink); }
.showroomStageFallback > span { display: block; font-size: .6rem; letter-spacing: .08em; margin-bottom: 12px; }
.showroomStageFallback strong { display: block; font-family: var(--font-heading); font-size: clamp(.75rem, 1.6vw, 1.15rem); line-height: 1.4; }
.showroomStagePlaceholder { grid-column: 1 / -1; border: 3px solid #e8e1f6; border-radius: 12px; overflow: hidden; background: #f1edfc; padding-bottom: 25px; }
.showroomPlaceholderHeading, .showroomPlaceholderLine { display: block; height: 9px; margin: 14px 24px; border-radius: 3px; background: #dcd3f7; }
.showroomPlaceholderHeading { width: 54%; height: 22px; margin-top: 30px; background: #b5a3e6; }
.showroomPlaceholderLine { width: 70%; }
.showroomPlaceholderCards { display: flex; gap: 14px; padding: 14px 24px 0; }
.showroomPlaceholderCards span { height: 62px; flex: 1; border: 1px solid #e0d7f1; background: #fff; border-radius: 8px; }
.sectionBlock { padding-top: 36px; }
.sectionIntro { margin-bottom: 24px; }
.demoLibrarySection { padding-top: 6px; }
.demoLibraryIntro { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: center; padding: 14px 0 34px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.demoLibraryIntro h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.demoLibraryLead { max-width: 64ch; margin-bottom: 0; }
.showroomLibraryHint {
  padding: 24px; border: 1px solid var(--brand-line); border-radius: var(--radius-large);
  background-color: #f1edfc;
  background-image: linear-gradient(rgb(122 99 254 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(122 99 254 / 4%) 1px, transparent 1px);
  background-size: 24px 24px; box-shadow: var(--shadow-1);
}
.showroomLibraryHint .sectionEyebrow { font-size: .6rem; color: var(--muted-2); }
.showroomLibraryHint h2 { font-size: 1.1rem; color: var(--brand-ink); }
.showroomLibraryHint p:last-child { margin-bottom: 0; font-size: .8rem; }
.demoLibraryControls { padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1); margin: 0 0 28px; }
.demoLibraryControls label { min-width: 0; }
.demoLibraryControls select { font-size: .84rem; }
.demoLibraryGrid { gap: 24px; }
.demoLibraryCardPreview, .demoAdminCardMedia {
  background-color: #efecf8;
  background-image: linear-gradient(rgb(122 99 254 / 4%) 1px, transparent 1px), linear-gradient(90deg, rgb(122 99 254 / 4%) 1px, transparent 1px);
  background-size: 24px 24px;
  padding: 14px 14px 0;
  border-bottom: 1px solid var(--line);
}
.demoLibraryCardPreview { aspect-ratio: 16 / 10; }
.demoLibraryCardPreviewImage, .demoAdminCardMedia img { object-position: top; border-radius: 8px 8px 0 0; box-shadow: 0 0 0 1px rgb(122 99 254 / 7%); }
.demoLibraryCardPreviewFallback { color: var(--brand-ink); font-size: .9rem; font-weight: 500; }
.demoLibraryCardBody { padding: 23px; gap: 23px; }
.demoLibraryCardTitle { font-family: var(--font-heading); font-weight: 600; line-height: 1.45; font-size: 1.08rem; letter-spacing: -.025em; }
.demoLibraryCardDescription { font-size: .85rem; line-height: 1.8; }
.demoLibraryCardActions { gap: 10px; }
.demoLibraryCardSecondaryActions > * { flex: 1 1 100px; }
.demoLibraryActionSmall { font-size: .78rem; min-height: 40px; padding: 9px 12px; }
.demoLibraryCardText > .sectionEyebrow { margin: 0; font-size: .65rem; }
.demoLibraryEmpty { background: #fff; border-radius: var(--radius-large); backdrop-filter: none; }
.demoLibraryEmpty h2 { font-size: 1.4rem; }
.demoViewerPage { flex: 1; padding: 20px 24px; min-width: 0; }
.demoViewerShell, .demoFrameShell, .demo-frame-shell { border-color: var(--line); border-radius: var(--radius-large); box-shadow: var(--shadow-1); }
.demoViewerFrame { height: calc(100svh - 142px); min-height: 520px; }
.demoDetailContext { background: #fff; border-radius: 12px; }
.demoDetailContext summary { font-size: .85rem; color: var(--brand-ink); padding: 12px 16px; }
.demoDetailContextBody { padding: 0 16px 16px; }

/* Portal/admin use the same materials with a smaller, functional hierarchy. */
.dashboardSection { grid-template-columns: 238px minmax(0, 1fr); gap: 24px; padding-top: 6px; }
.adminWorkspaceSection { width: min(1480px, calc(100% - 64px)); grid-template-columns: 230px minmax(0, 1fr); }
.dashboardContent { gap: 22px; }
.adminWorkspaceContent { gap: 18px; }
.dashboardSidebarCard { padding: 20px 15px; top: 112px; }
.dashboardSidebarCard > h2 { padding: 0 10px; font-size: 1.2rem; margin-bottom: 22px; }
.dashboardSidebarCard > .sectionEyebrow { padding: 0 10px; }
.dashboardNav { gap: 5px; }
.dashboardNav a { min-height: 42px; padding: 9px 12px; border-radius: 9px; font-size: .85rem; font-weight: 500; }
.dashboardNav a:hover { transform: none; background: var(--panel-soft); }
.dashboardNav a.isActive, .dashboardNav .navItem.active { color: var(--brand-ink); background: var(--brand-soft-2); border: 1px solid var(--brand-line); box-shadow: inset 2px 0 var(--brand); font-weight: 600; }
.dashboardPanel { padding: 26px; }
.dashboardPanel h1, .customerPageTitle { font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.3; }
.dashboardPanel h2 { font-size: 1.3rem; }
.dashboardPanel h3 { font-size: 1rem; }
.dashboardPanelHeader { gap: 20px; flex-wrap: wrap; }
.dashboardPanelHeader > div { min-width: 0; }
.dashboardPanelHeader p, .customerPageLead { font-size: .87rem; }
.dashboardPanelHeader p:last-child { margin-bottom: 0; }
.adminWorkspaceHeader, .adminWorkspacePanel { padding: 22px; }
.dashboardStatCard, .customerStatCard { padding: 22px; }
.dashboardStatsGrid, .customerStatsGrid { gap: 18px; }
.customerStatLabel, .statLabel { font-size: .82rem; }
.customerStatLink, .customerStatMeta { font-size: .8rem; }
.customerProjectTitle { font-size: 1.2rem; }
.customerStatusBadge { font-size: .75rem; color: var(--brand-ink); background: var(--brand-soft); border-radius: 7px; min-height: 29px; padding: 5px 9px; white-space: normal; text-align: center; }
.customerProjectCard { padding: 24px; }
.admin-detail-label, .customer-detail-label { color: var(--muted); opacity: 1; font-size: .78rem; }
.admin-detail-value, .customer-detail-value { font-size: .9rem; }
.admin-detail-grid, .customer-detail-grid { gap: 20px; }
.admin-page-actions, .adminListControls, .admin-toolbar, .admin-status-action,
.customerProjectCardTop, .roadmapEntryTop, .customerRoadmapTop,
.customerRoadmapMeta, .adminInfoCardFooter { min-width: 0; }
.admin-page-actions, .adminListControls, .admin-toolbar, .admin-status-action { flex-wrap: wrap; }
.demoAdminCardBody { padding: 22px; }
.demoAdminCardTop { flex-wrap: wrap; gap: 12px; }
.demoAdminCardTop h3 { font-size: 1.18rem; line-height: 1.4; }
.demoAdminCardBody p { color: var(--muted); font-size: .85rem; }
.demoAdminStatus { border-radius: 7px; font-size: .73rem; min-height: 28px; padding: 4px 8px; }
.demoAdminCardActionRow { flex-wrap: wrap; }
.demoAdminCardActionRow > * { flex: 1 1 120px; }
.admin-table-wrap, .customer-table-wrap { overflow-x: auto; max-width: 100%; border-color: var(--line); border-radius: 12px; background: #fff; overscroll-behavior-x: contain; }
.admin-table:not(.projectTable) { min-width: 680px; table-layout: auto; }
.admin-table-options { min-width: 920px !important; }
.customer-table { min-width: 580px; table-layout: auto; }
.admin-table th, .customer-table th { background: var(--panel-soft); color: var(--muted); font-size: .67rem; letter-spacing: .06em; }
.admin-table td, .customer-table td { font-size: .82rem; line-height: 1.65; }
.admin-table :is(th, td), .customer-table :is(th, td) { padding: 14px; border-color: var(--line-2); }
.admin-table tbody tr:hover, .customer-table tbody tr:hover { background: #fbf9ff; }
.admin-table .buttonSecondary, .customer-table .buttonSecondary { font-size: .77rem; padding: 8px 11px; min-height: 38px; }
.adminHistoryScroll { border-radius: 12px; background: #fff; max-width: 100%; }
.adminHistoryScroll table th { background: var(--panel-soft); z-index: 1; }
.status-pill { font-size: .72rem; line-height: 1.45; padding: 5px 9px; border-radius: 7px; white-space: normal; }
.status-pill--active, .status-pill--done { background: var(--success-bg); color: var(--success-ink); }
.status-pill--inactive, .status-pill--paused { background: var(--error-bg); color: var(--error-ink); }
.status-pill--progress { background: var(--brand-soft); color: var(--brand-ink); }
.status-pill--waiting { background: var(--warning-bg); color: var(--warning-ink); }
.status-pill--neutral { background: #efedf2; color: var(--muted); }
.roadmapProgressBar { height: 8px; background: #e8e2f3; }
.roadmapProgressFill { background: linear-gradient(105deg, var(--brand), var(--brand-2)); }
.roadmapEntryEta { font-size: .8rem; }
.roadmapEntryTitle { line-height: 1.5; }
.roadmapSummary { flex-wrap: wrap; }
.roadmapDetailsText { font-size: .86rem; }

/* Forms and feedback retain their current semantics and all safety states. */
.authSection { padding: 24px 0; }
.authCard { padding: clamp(24px, 4vw, 40px); width: min(100%, 540px); }
.authCard h1 { font-size: 2.1rem; }
.authCard > p:not(.sectionEyebrow) { font-size: .86rem; }
.authFooter a { color: var(--brand-ink); font-size: .85rem; text-decoration: underline; text-underline-offset: 3px; }
.authError, .authHint, .customerNotice, .adminNotice { border-radius: 12px; font-size: .86rem; }
.authError, .adminNoticeError, .customerNoticeError { color: var(--error-ink); border: 1px solid #edd0d4; background: var(--error-bg); }
.adminNoticeSuccess, .customerNoticeSuccess { color: var(--success-ink); border: 1px solid #cfe5d6; background: var(--success-bg); }
.adminNoticeError p, .customerNoticeError p { color: var(--error-ink); }
.adminNoticeSuccess p, .customerNoticeSuccess p { color: var(--success-ink); }
.adminDangerPanel, .adminModalDangerZone { border-color: #edd0d4; background: var(--error-bg); border-radius: 12px; }
.legalCard { padding: clamp(24px, 4vw, 44px); }
.legalContent { max-width: 84ch; }
.legalContent h2 { font-size: 1.35rem; }
.legalBg .tri { background: rgb(122 99 254 / 1.5%); }
.legalBg .tri.purple { background: rgb(122 99 254 / 2.5%); }

/* Existing modals, configurator, inquiry and account dialogs. */
.adminModalDialog, .detailsModalDialog, .configModalDialog, .customerModalDialog {
  border: 1px solid var(--line); background: #fff; border-radius: 20px;
  box-shadow: 0 24px 80px rgb(28 20 48 / 20%); padding: 26px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  max-height: calc(100svh - 40px);
}
.adminModalBackdrop, .detailsModalBackdrop, .configModalBackdrop, .customerModalBackdrop { background: rgb(31 25 44 / 46%); backdrop-filter: blur(5px); }
.adminModalHeader h2, .detailsModalHeader h2, .configModalHeader h2, .customerModalHeader h2 { font-size: 1.45rem; line-height: 1.4; }
.adminModalHeader > div, .configModalHeader > div { min-width: 0; }
.adminModalClose, .detailsModalClose, .configModalClose, .customerModalClose { flex: 0 0 40px; width: 40px; height: 40px; background: var(--panel-soft); border-color: var(--line); border-radius: 10px; }
.adminModalFooter, .detailsModalFooter, .configModalFooter { padding-top: 18px; flex-wrap: wrap; }
.adminModalActions, .detailsModalActions, .configModalActions { flex-wrap: wrap; }
.adminModal .adminModalSection > p, .customerModal .customerModalSection > p { font-size: .87rem; }
.configModal .demoConfiguratorOption, .configModal .demoInquirySummary, .detailsModal .demoOptionRow { background: var(--panel-soft); border-color: var(--line); border-radius: 12px; }
.configModal .demoConfiguratorSummary { background: var(--brand-soft); border-color: var(--brand-line); border-radius: 14px; }
.configModal .demoConfiguratorOptionText { min-width: 0; }
.configModal .demoConfiguratorOption p, .configModal .demoConfiguratorHint { font-size: .83rem; }
.configModal .demoConfiguratorSummaryTotal { color: var(--brand-ink); }
.configModal .demoConfiguratorSummaryRow, .configModal .demoConfiguratorSummaryTotal { flex-wrap: wrap; }
.detailsModal .adminSectionHeading p, .configModal .adminSectionHeading p { color: var(--muted); font-size: .85rem; }
.customerModal .customerAccountForm { padding: 3px; }

.pageCopyright { margin-top: auto; padding: 0 0 24px; }
.pageCopyrightInner { width: min(var(--layout-width), calc(100% - 64px)); padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 18px; text-align: left; }
.pageCopyrightInner p { font-size: .72rem; }
.footerNavigation { display: flex; flex-wrap: wrap; gap: 18px; font-size: .72rem; color: var(--muted); }
.footerNavigation a:hover { color: var(--brand-ink); }

@media (min-width: 761px) and (max-width: 1040px) {
  .dashboardSection, .adminWorkspaceSection { grid-template-columns: 1fr; }
  .dashboardSidebarCard { position: static; padding: 18px; }
  .dashboardSidebarCard > h2 { margin-bottom: 12px; }
  .dashboardNav { flex-direction: row; flex-wrap: wrap; }
  .dashboardStatsGrid, .customerStatsGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
  .topbarInner { flex-wrap: wrap; column-gap: 8px; }
  .topbarCenter, .topbarLeft, .topbarRight { width: auto; }
  .topbarCenter { order: 0; }
  .topbarRight { order: 1; margin-left: auto; }
  .topbarNavigation { order: 3; width: 100%; margin-left: 0; padding-top: 8px; border-top: 1px solid var(--line-2); }
  .topbarLeft { order: 2; }
  .topbarInner:has(.topbarNavigation) { padding-top: 12px; padding-bottom: 10px; }
  .dashboardSidebarCard { top: 154px; }
  .showroomHero { gap: 28px; }
  .demoLibraryIntro { grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; }
  .demoLibraryGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pageContainer, .adminWorkspaceSection, .topbarInner, .pageCopyrightInner { width: calc(100% - 40px); }
  .pageShell { padding: 22px 0 32px; }
  .topbar { position: static; }
  .topbarInner { justify-content: flex-start; }
  .topbarCenter { justify-content: flex-start; gap: 10px; }
  .topbarBrand { padding-left: 10px; }
  .topbarBrand > span { font-size: .92rem; }
  .topbarBrand small { font-size: .48rem; }
  .topbarLogoImage { width: 55px; height: 44px; border-radius: 10px; }
  .topbarBack, .topbarLink { padding: 8px 9px; min-height: 38px; font-size: .75rem; }
  .topbarNavigation { gap: 2px; justify-content: flex-start; }
  .topbarNavigation .topbarLegal { font-size: .66rem; }
  .topbarRight > a, .topbarLogoutButton { padding: 8px 12px; font-size: .76rem; min-height: 38px; }
  .heroSection { padding-top: 0; }
  .showroomHero { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
  .showroomHero .heroTitle { font-size: clamp(1.85rem, 6.5vw, 2.65rem); }
  .showroomHero .heroText { max-width: none; }
  .heroActions { margin-top: 22px; }
  .showroomStage { width: 100%; max-width: 460px; margin: 0 auto; }
  .showroomHeroNote { font-size: .74rem; padding: 20px 0; }
  .demoLibraryIntro { grid-template-columns: 1fr; gap: 22px; padding-top: 0; }
  .demoLibraryIntro h1 { font-size: clamp(1.85rem, 6.5vw, 2.5rem); }
  .showroomLibraryHint { padding: 20px; }
  .showroomLibraryHint h2 { margin-bottom: 8px; }
  .demoLibraryControls { grid-template-columns: 1fr; padding: 12px; }
  .demoLibraryCardBody { padding: 20px; }
  .demoLibraryGrid { grid-template-columns: 1fr; gap: 22px; }
  .demoLibraryCardPreview { aspect-ratio: 16 / 9; }
  .demoLibraryCardSecondaryActions { flex-direction: row; }
  .demoLibraryCardSecondaryActions > * { width: auto; }
  .demoViewerPage { padding: 14px; }
  .demoViewerFrame { height: calc(100svh - 170px); min-height: 460px; }
  .dashboardSection, .adminWorkspaceSection { grid-template-columns: 1fr; gap: 18px; }
  .dashboardSidebarCard { position: static; padding: 17px; }
  .dashboardSidebarCard > h2 { margin-bottom: 14px; }
  .dashboardNav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .dashboardNav a { min-width: 0; font-size: .8rem; padding: 9px 10px; }
  .dashboardPanel, .adminWorkspaceHeader, .adminWorkspacePanel { padding: 21px; }
  .dashboardPanel h1, .customerPageTitle { font-size: clamp(1.6rem, 6vw, 2rem); }
  .dashboardPanel h2 { font-size: 1.25rem; }
  .customerStatsGrid, .dashboardStatsGrid, .customerProjectGrid { grid-template-columns: 1fr; }
  .customerProjectCard { padding: 21px; }
  .projectTable { min-width: 0; }
  .projectTable td { grid-template-columns: minmax(74px, .35fr) minmax(0, .65fr); padding: 10px; gap: 12px; }
  .adminInfoGrid, .customerInfoGrid, .admin-form-grid,
  .admin-detail-grid, .customer-detail-grid, .customerAccountGrid { grid-template-columns: 1fr; }
  .authSection { padding: 6px 0; }
  .authCard { padding: 26px; }
  .authCard h1 { font-size: 1.9rem; }
  .adminModalDialog, .detailsModalDialog, .configModalDialog, .customerModalDialog { padding: 22px; max-height: calc(100svh - 28px); border-radius: 18px; }
  .configModal .demoConfiguratorOption { flex-wrap: wrap; gap: 12px; }
  .configModal .demoConfiguratorOptionText { flex: 1 1 140px; }
  .adminModalHeader h2, .customerModalHeader h2, .detailsModalHeader h2, .configModalHeader h2 { font-size: 1.25rem; }
  .pageCopyrightInner { align-items: flex-start; flex-direction: column; gap: 12px; padding-top: 20px; }
  .footerNavigation { gap: 16px; }
}
@media (max-width: 380px) {
  .pageContainer, .adminWorkspaceSection, .topbarInner, .pageCopyrightInner { width: calc(100% - 28px); }
  .topbarLeft { width: 100%; }
  .topbarBrand small { letter-spacing: .05em; }
  .showroomHero { padding: 22px; }
  .showroomHero .heroTitle { font-size: 1.8rem; }
  .dashboardPanel { padding: 18px; }
  .adminModalDialog, .detailsModalDialog, .configModalDialog, .customerModalDialog { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}