html[data-theme=library] body{background:var(--beige-light)!important;color:var(--ink)}
html[data-theme=library] :is(h1,h2,h3,.sales-kicker,.sidebar-label){font-family:var(--appearance-font),sans-serif!important}
html[data-theme=library] :is(.navbar.unified-navbar,.app-sidebar){background:var(--appearance-nav)!important;color:var(--appearance-navink)!important}
html[data-theme=library] .app-sidebar :is(a,.sidebar-label){color:var(--appearance-navink)}
html[data-theme=library] :is(.sidebar-item.active,.btn-primary){background:var(--appearance-accent)!important;color:var(--appearance-onaccent)!important;border-color:var(--appearance-accent)!important}
html[data-theme=library] :is(.card,.feed-post,.chat-sidebar,.chat-messages,.message-input-area){background:var(--white);color:var(--ink);border-color:var(--border-soft)}
html[data-theme=library] :is(input,textarea,select){color:var(--ink);background-color:var(--white)}
html[data-theme=library] :is(.ms-room-name,.chat-room-name){color:var(--ink)}
.appearance-hero{max-width:1300px;margin:25px auto 55px;padding:60px 5%;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center;background:var(--beige-light);border-radius:var(--radius-lg);overflow:hidden}
.appearance-eyebrow{font-size:.75rem;letter-spacing:.16em;color:var(--ink-soft)}
.appearance-hero h1{font-size:clamp(2.5rem,5.5vw,5.8rem);line-height:1.08;letter-spacing:-.045em;margin:25px 0;color:var(--ink)}
.appearance-hero h1 em{font-style:normal;text-decoration:underline;text-decoration-color:var(--appearance-accent);text-underline-offset:12px;text-decoration-thickness:5px}
.appearance-hero p{font-size:1.1rem;line-height:1.7;color:var(--ink-soft);margin:28px 0}
.appearance-hero-actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center}.appearance-hero-actions>a:not(.btn){color:var(--green)}
.appearance-sculpture{height:340px;position:relative;background:var(--appearance-nav);border-radius:var(--radius-lg);overflow:hidden}
.appearance-sculpture i{position:absolute;width:230px;height:230px;border:45px solid var(--appearance-accent);border-radius:50%;left:-30px;top:90px;transform:rotate(-25deg)}
.appearance-sculpture i+i{left:43%;top:-40px;opacity:.65}
.appearance-sculpture span{position:absolute;right:18px;bottom:20px;padding:18px;background:var(--white);color:var(--ink);border-radius:var(--radius);font-size:.88rem}
.sales>.mund-hero>.mund-intro{display:none}
html[data-motif=bricks] .appearance-sculpture i{border-radius:8px;background:var(--appearance-accent);background-image:radial-gradient(circle,#ffffff77 7px,#00000022 8px 11px,transparent 12px);background-size:38px 38px;transform:rotate(10deg);border-width:12px}
html[data-motif=tactical] .appearance-sculpture i{border-radius:0;border-width:8px;transform:rotate(45deg)}
html[data-motif=neon] .appearance-sculpture i{border-radius:0;transform:skew(-25deg);border-width:15px}
html[data-motif=pixel] .appearance-sculpture i{border-radius:0;transform:none}
html[data-motif=race] .appearance-sculpture{background-image:conic-gradient(#ffffff22 25%,transparent 0 50%,#ffffff22 0 75%,transparent 0);background-size:32px 32px}
html[data-motif=stars] .appearance-sculpture{background-image:radial-gradient(circle,#ffffffaa 1px,transparent 2px);background-size:33px 39px}
html[data-motif=scan] .appearance-sculpture{background-image:repeating-linear-gradient(0deg,transparent 0 6px,#ffffff15 6px 7px)}
@media(max-width:760px){.appearance-hero{grid-template-columns:1fr;padding:30px 20px;margin:10px 12px 30px}.appearance-sculpture{height:180px}.appearance-hero h1{font-size:clamp(2rem,8vw,3.4rem)}}

@font-face{font-family:'rajdhani';src:url('/static/themes/fonts/rajdhani.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'orbitron';src:url('/static/themes/fonts/orbitron.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'audiowide';src:url('/static/themes/fonts/audiowide.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'pressstart2p';src:url('/static/themes/fonts/pressstart2p.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'nunito';src:url('/static/themes/fonts/nunito.ttf') format('truetype');font-display:swap;}
@font-face{font-family:'spacegrotesk';src:url('/static/themes/fonts/spacegrotesk.ttf') format('truetype');font-display:swap;}
html[data-theme=library] .unified-navbar :is(.nav-brand,.nav-tab){color:var(--appearance-navink)!important}
.appearance-hero h1{overflow-wrap:anywhere}

/* Mobile controls stay inside the navigation/viewport instead of a narrow icon. */
@media (max-width: 768px) {
  body .navbar .theme-switcher, body .sales-nav .theme-switcher, body .navbar .account-menu { position: static; }
  body .navbar #theme-popup, body .sales-nav #theme-popup-public, body .navbar .account-dropdown {
    position: absolute !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    top: calc(100% + 8px) !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    max-height: min(70dvh, calc(100dvh - 112px));
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body .navbar .account-dropdown {
    max-height: var(--account-menu-height, min(70dvh, calc(100dvh - 112px)));
    overflow: hidden;
  }
  body .messenger-panel {
    left: 8px !important; right: 8px !important; width: auto !important;
    max-width: 420px !important; margin-left: auto; margin-right: 0;
  }
  body .ms-chat-input textarea { min-width: 0; max-width: 100%; }
  body :is(#theme-popup, #theme-popup-public) :is(a, button, select, input) {
    max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere;
  }
  body :is(#theme-popup, #theme-popup-public) .chromatic-picker { width: 100%; }
  body #preview-content audio { width: min(400px, 85vw) !important; max-width: 100%; }
}

/* Agenda's nested grids must shrink with a phone-sized modal. */
@media (max-width: 768px) {
  body #calendar-popup {
    box-sizing: border-box; width: calc(100% - 16px); max-width: 720px;
    max-height: calc(100dvh - 16px); margin: auto; padding: 8px;
  }
  body #calendar-popup :is(#calendar-popup-body, .event-create) { min-width: 0; max-width: 100%; }
  body .event-create :is(form, .event-fields, .grid, .grid > div, .location-field, .location-search) { min-width: 0; max-width: 100%; }
  body .event-create :is(input, select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; }
  body .event-create .event-form-section { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  body .event-create .visio-choice { position: relative; grid-template-columns: 32px minmax(0, 1fr) 24px; gap: 8px; padding: 9px; }
  body .event-create .visio-choice > input {
    position: absolute; width: 1px !important; height: 1px !important;
    min-width: 0; max-width: 1px; padding: 0; border: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap;
  }
  body .event-create .visio-choice:has(input:focus-visible) { outline: 2px solid currentColor; outline-offset: 3px; }
  body .event-create .visio-choice > span { min-width: 0; overflow-wrap: anywhere; }
  body .event-create .visio-choice-icon { width: 32px; height: 36px; }
  body .event-create .location-search { grid-template-columns: minmax(0, 1fr) 38px; }
  body .event-create .event-create-head > div { min-width: 0; overflow-wrap: anywhere; }
  body .event-create .event-submit { flex-wrap: wrap; }
  body .event-create .event-submit .btn { flex: 1 1 160px; min-width: 0; max-width: 100%; white-space: normal; }
  body #doodle-form :is(input, select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; }
  body #doodle-form #slots-container > div { display: grid !important; grid-template-columns: minmax(0, 1fr) 36px; }
  body #doodle-form #slots-container > div:has(.option-image) { grid-template-columns: minmax(0, 1fr); padding-block: 8px; border-bottom: 1px solid var(--border-soft); }
  body #doodle-form #slots-container > div:has(.option-image) > input { width: 100%; }
  body #doodle-form #slots-container > div:has(.option-image) > button { justify-self: end; }
}
@media (max-width: 480px) {
  body #calendar-popup .event-create-head { padding: 10px 8px; gap: 8px; }
  body #calendar-popup .event-create form { padding: 4px 6px 12px; }
  body .event-create .event-create-head h3 { font-size: 1.2rem; }
  body .event-create .event-form-section { grid-template-columns: 24px minmax(0, 1fr); gap: 6px; padding-block: 16px; }
  body .event-create .event-step { width: 24px; height: 24px; }
  body .event-create .event-options summary { padding: 12px 8px; }
  body .event-create .event-options-body { padding: 4px 8px 12px; }
  body .event-create .event-options .grid { grid-template-columns: minmax(0, 1fr); }
  body .container:has(> .card > #doodle-form) { padding: 12px 0; }
  body .card:has(> #doodle-form) { padding: 12px; }
  body #doodle-form > button[type="submit"] { max-width: 100%; white-space: normal; }
}

/* Keep navigation icons readable on light and dark catalogue themes. */
html[data-theme=library] .unified-navbar :is(.workspace-shortcut, .nav-icon-btn) { color: var(--appearance-navink) !important; }
html[data-theme=library] .unified-navbar :is(.workspace-shortcut, .nav-icon-btn):hover { background: var(--appearance-accent) !important; color: var(--appearance-onaccent) !important; }