:root {
  --mmc-cherry:#350914; --mmc-cabernet:#5b1730; --mmc-burgundy:#812638;
  --mmc-rose:#e8b1d9; --mmc-powder:#f1c8e7; --mmc-red:#dd4b2e; --mmc-orchid:#d379cb;
  --mmc-paper:#fff5f3; --mmc-ink:#32101e;
  --site-canvas:var(--mmc-powder); --site-panel:var(--mmc-paper); --site-ink:var(--mmc-ink);
  --site-muted:#6b3347; --site-line:rgba(53,9,20,.2);
  --brand-carmine:var(--mmc-cabernet); --brand-red:var(--mmc-red); --brand-pink:var(--mmc-rose); --brand-cream:var(--mmc-paper);
  --mmc-header-pattern:repeating-linear-gradient(90deg,var(--mmc-cabernet) 0 4.5rem,var(--mmc-red) 4.5rem 9rem,var(--mmc-orchid) 9rem 13.5rem,var(--mmc-burgundy) 13.5rem 18rem);
  --mmc-header-safe-pattern:linear-gradient(to bottom,var(--mmc-cabernet) 0 env(safe-area-inset-top),transparent env(safe-area-inset-top)),var(--mmc-header-pattern);
  --paper:var(--site-canvas); --surface:var(--site-panel); --cream:#f8dce9; --line:var(--site-line);
  --text:var(--site-ink); --muted:var(--site-muted); --ink:var(--mmc-cherry); --ink-soft:var(--mmc-cabernet); --ink-text:var(--mmc-paper);
  --violet:var(--brand-carmine); --violet-deep:var(--mmc-cherry); --violet-soft:#f6dce8; --lavender:var(--mmc-rose);
  --pink:var(--mmc-rose); --pink-soft:#fae4ed; --gold:var(--mmc-red); --gold-deep:#a73526; --gold-soft:#fde5df;
  --night:var(--mmc-burgundy); --night-soft:#f4d8e3; --day:var(--mmc-red); --day-soft:#fde5df;
  --chart-grid:#e0becb; --chart-text:#6b3347; --chart-series-primary:var(--mmc-cabernet); --chart-series-accent:var(--mmc-red);
  --color-primary:var(--brand-carmine); --color-primary-hover:var(--mmc-cherry); --color-primary-soft:#f4d8e3;
  --color-focus:var(--mmc-red); --focus-ring:0 0 0 4px rgba(221,75,46,.22);
  --r-lg:16px; --r-md:12px; --r-sm:9px;
  --shadow-sm:0 5px 16px rgba(53,9,20,.07); --shadow-md:0 12px 30px rgba(53,9,20,.1); --shadow-lg:0 22px 55px rgba(53,9,20,.16);
  --sans:"Avenir Next",Avenir,"Segoe UI",Helvetica,Arial,sans-serif; --serif:var(--sans);
}

html[data-theme="dark"] {
  --site-canvas:#20070e; --site-panel:#350914; --site-ink:#fff5f3; --site-muted:#e4bdcc; --site-line:rgba(255,245,243,.2);
  --brand-carmine:#f09bbb; --brand-pink:#d379cb; --brand-cream:#4b1022;
  --paper:var(--site-canvas); --surface:var(--site-panel); --cream:#4a1021; --line:var(--site-line); --text:var(--site-ink); --muted:var(--site-muted);
  --violet:var(--brand-carmine); --violet-deep:#ffd1e1; --violet-soft:#4a1426; --pink-soft:#4b1327; --gold-soft:#4c1d1b;
  --night:#f09bbb; --night-soft:#4a1426; --day:#ff8d70; --day-soft:#4c1d1b;
  --chart-grid:#6b3a4a; --chart-text:#fff5f3; --chart-series-primary:#f09bbb; --chart-series-accent:#ff8d70;
  --color-primary:var(--brand-carmine); --color-primary-hover:#ffd1e1; --color-primary-soft:#4a1426;
  --color-focus:#ff8d70; --focus-ring:0 0 0 4px rgba(255,141,112,.28);
  --shadow-sm:0 5px 16px rgba(0,0,0,.18); --shadow-md:0 12px 30px rgba(0,0,0,.25); --shadow-lg:0 22px 55px rgba(0,0,0,.34);
}
html{background:var(--site-canvas);scrollbar-color:var(--brand-carmine) var(--site-canvas)}
body.app-body{background:var(--site-canvas);color:var(--site-ink);font-family:var(--sans)}
::selection{background:var(--mmc-rose);color:var(--mmc-cherry)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--color-focus);outline-offset:3px;box-shadow:none}
.mmc-wordmark{display:inline-grid;justify-items:center;align-content:center;gap:0;color:currentColor;line-height:.66;text-align:center;text-decoration:none}
.mmc-wordmark span{font-size:.72rem;font-weight:750;letter-spacing:.11em;text-transform:uppercase}
.mmc-wordmark strong{font-family:"Snell Roundhand","Apple Chancery","URW Chancery L",cursive;font-size:1.72rem;font-weight:500;letter-spacing:-.04em;line-height:.68}
.gate-wordmark{margin:0 auto 25px;color:var(--mmc-cabernet);transform:scale(1.28)}
.app-wordmark{min-width:5.2rem;color:var(--mmc-paper)}
.app-context-label{padding-left:12px;border-left:1px solid rgba(255,245,243,.38);color:var(--mmc-paper);font-size:.72rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.gate{background:var(--site-canvas)!important;overflow-x:hidden}
.gate::before{content:"";position:absolute;inset:0 0 auto;height:12px;background:linear-gradient(90deg,var(--mmc-cabernet) 0 22%,#b1422d 22% 44%,#8a367e 44% 66%,var(--mmc-cherry) 66% 82%,var(--mmc-cabernet) 82%)}
.gate-card{max-width:430px;padding:42px 38px 36px;border:1px solid var(--site-line)!important;border-radius:var(--r-lg)!important;background:var(--site-panel)!important;color:var(--site-ink);box-shadow:var(--shadow-lg)!important;text-align:left}
.gate-card h1{margin-bottom:9px;color:var(--site-ink);font-size:clamp(1.8rem,5vw,2.25rem);font-weight:720;letter-spacing:-.035em}
.gate-card h1,.kind-name,.kunden-name,.detail-name,.h-serif{font-family:var(--sans)!important}
.gate-card h1 em{color:var(--brand-carmine);font-style:normal}.gate-card>p{max-width:34ch;margin-bottom:26px;color:var(--site-muted)}.gate-card label{color:var(--site-muted)}.gate-back{text-align:center}
.app-header{min-height:calc(72px + env(safe-area-inset-top));height:calc(72px + env(safe-area-inset-top));padding:env(safe-area-inset-top) clamp(14px,3vw,28px) 0;background:var(--mmc-header-safe-pattern)!important;border-bottom:1px solid rgba(255,245,243,.28)!important;color:var(--mmc-paper)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.app-logo{color:var(--mmc-paper)!important;gap:14px}.app-logo>.mmc-wordmark{display:inline-grid!important}
.app-header-right .btn{min-height:40px;border-radius:9px}
.app-header .btn-outline,.app-header .theme-toggle,.app-header .child-pill{background:rgba(53,9,20,.62)!important;border-color:rgba(255,245,243,.34)!important;color:var(--mmc-paper)!important}
.app-header .btn-outline:hover,.app-header .theme-toggle:hover{background:var(--mmc-paper)!important;border-color:var(--mmc-paper)!important;color:var(--mmc-cherry)!important}
.app-header .btn-ink{background:var(--mmc-paper)!important;color:var(--mmc-cherry)!important;box-shadow:none!important}
.tab-nav{top:calc(72px + env(safe-area-inset-top));background:var(--site-panel)!important;border-color:var(--site-line)!important}.tab-btn{min-height:48px;color:var(--site-muted);font-weight:680}.tab-btn.active{color:var(--brand-carmine)!important;border-bottom-color:var(--brand-carmine)!important}.tab-nav-divider{background:var(--site-line)}
.app-main,.admin-container{color:var(--site-ink)}
.card,.guide,.detail-head,.settings-dialog,.gate-card{background:var(--site-panel)!important;border-color:var(--site-line)!important;box-shadow:var(--shadow-sm)!important}.card{border-radius:var(--r-lg)}
.card-label,.guide-title,.guide-toggle{color:var(--brand-carmine)}.td-muted,.detail-meta,.admin-count{color:var(--site-muted)!important}.guide{background:color-mix(in srgb,var(--brand-pink) 13%,var(--site-panel))!important;box-shadow:none!important}.guide-hint,.alert-info{background:color-mix(in srgb,var(--brand-pink) 20%,var(--site-panel))!important;color:var(--site-ink)}
input,select,textarea,.code-input{background:color-mix(in srgb,var(--brand-pink) 16%,var(--site-panel))!important;border-color:color-mix(in srgb,var(--brand-carmine) 24%,var(--site-line))!important;border-radius:var(--r-sm);color:var(--site-ink)!important;-webkit-text-fill-color:var(--site-ink)!important}
input::placeholder,textarea::placeholder{color:var(--site-muted);opacity:1}input:focus,select:focus,textarea:focus,.code-input:focus{background:var(--site-panel)!important;border-color:var(--brand-carmine)!important;box-shadow:var(--focus-ring)!important}input[type="checkbox"],input[type="radio"]{accent-color:var(--brand-carmine)!important}
.tl-note-meta,.kind-stat small,.stat small,.kunden-stat small{font-size:.72rem!important}.tl-note{border-left-width:1px!important;border-radius:var(--r-sm)!important}
.btn{border-radius:9px;min-height:44px;font-weight:760;box-shadow:none}.btn-primary{background:var(--brand-carmine)!important;color:var(--mmc-paper)!important;box-shadow:none!important}.btn-primary:hover{background:var(--mmc-cherry)!important}.btn-outline{background:transparent;border-color:var(--site-line);color:var(--site-ink)}.btn-outline:hover{background:var(--site-panel);border-color:var(--brand-carmine);color:var(--brand-carmine)}.btn-danger-soft{background:#fde2dc;color:#852315;border-color:rgba(133,35,21,.25)}
.chat-messages{background:color-mix(in srgb,var(--brand-pink) 16%,var(--site-panel))!important;border-color:var(--site-line)}.chat-message{background:var(--site-panel)!important;border-color:var(--site-line)!important;box-shadow:none}.chat-message.is-own{background:color-mix(in srgb,var(--brand-pink) 32%,var(--site-panel))!important}
html[data-theme="dark"] .app-header{color:var(--mmc-paper)!important}html[data-theme="dark"] .app-header .btn-outline,html[data-theme="dark"] .app-header .theme-toggle{background:rgba(53,9,20,.68)!important;color:var(--mmc-paper)!important}html[data-theme="dark"] .btn-primary{color:var(--mmc-cherry)!important}html[data-theme="dark"] .btn-danger-soft{background:#4c1d1b;color:#ffc7bc}
html[data-theme="dark"] .gate-wordmark{color:var(--mmc-rose)}

/* The final desktop color contract lives in this last-loaded stylesheet.
   Mobile/PWA styling below remains unchanged. */
@media (min-width:641px) {
  html[data-theme="light"] {
    --site-canvas:var(--mmc-powder);
    --site-panel:var(--mmc-paper);
    --site-ink:var(--mmc-ink);
    --site-muted:#6b3347;
    --site-line:rgba(53,9,20,.2);
    --paper:var(--site-canvas);
    --surface:var(--site-panel);
    --text:var(--site-ink);
    --muted:var(--site-muted);
    --line:var(--site-line);
  }
  html[data-theme="light"],
  html[data-theme="light"] body.app-body,
  html[data-theme="light"] #app,
  html[data-theme="light"] .admin-container { background:var(--site-canvas)!important; }
}

/* Final content rhythm: one spacing contract for cards, forms and notices. */
:root {
  --mmc-gap-tight: 8px;
  --mmc-gap-content: 14px;
  --mmc-gap-section: 18px;
}

.admin-container > :where(.card, .guide, .detail-head, .overview-section-picker) {
  margin-top: 0;
  margin-bottom: var(--mmc-gap-section);
}

.admin-container > :where(.card, .guide, .detail-head, .overview-section-picker):last-child {
  margin-bottom: 0;
}

.consultation-data-grid > .card,
[role="tabpanel"] > .card {
  margin-top: 0;
}

.consultation-data-card > .card-label:has(+ .td-muted),
.card > .card-label:has(+ .td-muted),
.consultation-section-head .card-label:has(+ .td-muted),
.document-studio-head .card-label:has(+ .td-muted),
.chat-inbox-head .card-label:has(+ .td-muted) {
  margin-bottom: var(--mmc-gap-tight);
}

.consultation-data-card > .card-label + .td-muted,
.card > .card-label + .td-muted,
.consultation-section-head .card-label + .td-muted,
.document-studio-head .card-label + .td-muted,
.chat-inbox-head .card-label + .td-muted {
  margin-top: 0;
  margin-bottom: var(--mmc-gap-section);
}

.consultation-data-card > :where(.consultation-form-grid, .grid-2, .grid-3, .grid-4) + .btn-row,
.card > :where(.grid-2, .grid-3, .grid-4, .document-form-grid) + .btn-row {
  margin-top: var(--mmc-gap-section);
}

.card > .btn-row + :where(.alert, .td-muted, [role="status"]),
.advisor-note-actions + :where(.alert, .td-muted, [role="status"]) {
  margin-top: var(--mmc-gap-content);
}

.card > :where(.alert, .td-muted, [role="status"]):last-child:empty {
  display: none;
}

.contract-notice {
  margin-bottom: var(--mmc-gap-section);
}

.document-studio-head {
  margin-bottom: var(--mmc-gap-content);
}

@media (max-width: 640px) {
  .admin-container > :where(.card, .guide, .detail-head, .overview-section-picker) {
    margin-bottom: var(--mmc-gap-content);
  }
}

#detail-tab-nav[hidden] { display:none!important; }

/* Admin keeps the same brand with denser working surfaces. */
.admin-container { max-width: 1180px; }
.admin-topbar { border-bottom-color: var(--site-line); }
.kunden-card { background: var(--site-panel) !important; border-color: var(--site-line) !important; box-shadow: var(--shadow-sm) !important; }
.kunden-card:hover { border-color: var(--brand-carmine) !important; box-shadow: var(--shadow-md) !important; }
.kunden-stat { background: color-mix(in srgb, var(--brand-pink) 15%, var(--site-panel)) !important; border-color: var(--site-line) !important; }
.paket-verwaltung { border-color: var(--site-line); }
#detail-tab-nav { background: var(--site-panel) !important; border-color: var(--site-line) !important; }

.overview-section-picker{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:0 0 18px;padding:18px 20px;border:1px solid var(--site-line);border-radius:var(--r-lg);background:color-mix(in srgb,var(--brand-pink) 18%,var(--site-panel));box-shadow:var(--shadow-sm)}
.overview-section-picker p{margin:5px 0 0;color:var(--site-muted);font-size:.84rem}
.overview-section-select-wrap{flex:0 1 360px;min-width:min(100%,280px)}
.overview-section-select-wrap label{display:block;margin-bottom:6px;color:var(--site-muted);font-size:.72rem;font-weight:800;letter-spacing:.045em;text-transform:uppercase}
.overview-section-select-wrap select{width:100%;font-weight:720}
[data-admin-overview-section][hidden]{display:none!important}
.consultation-data-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:18px}
.consultation-data-card{margin:0;min-width:0}
.consultation-data-card>.td-muted{margin:4px 0 18px}
.consultation-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.consultation-form-grid .field-wide{grid-column:1/-1}
.consultation-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}
.consultation-section-head p{margin:5px 0 0}
.session-note-form{display:grid;grid-template-columns:minmax(170px,.35fr) minmax(260px,1fr);gap:14px;margin-bottom:14px}
.note-editor{overflow:hidden;border:1px solid var(--site-line);border-radius:var(--r-md);background:var(--site-panel);transition:border-color .16s,box-shadow .16s}
.note-editor:focus-within{border-color:var(--brand-carmine);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-pink) 38%,transparent)}
.note-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:7px;border-bottom:1px solid var(--site-line);background:color-mix(in srgb,var(--brand-pink) 13%,var(--site-panel))}
.note-tool{min-width:38px;min-height:36px;padding:6px 10px;border:0;border-radius:7px;background:transparent;color:var(--site-ink);font:700 .78rem/1 var(--sans);cursor:pointer}
.note-tool:hover{background:color-mix(in srgb,var(--brand-pink) 30%,var(--site-panel))}
.note-tool:focus-visible{outline:2px solid var(--brand-carmine);outline-offset:1px}
.note-editor textarea{display:block;width:100%;min-height:180px;margin:0;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;resize:vertical}
.session-note-list{display:grid;gap:0;margin-top:24px;border-top:1px solid var(--site-line)}
.session-note-item{padding:20px 0;border-bottom:1px solid var(--site-line)}
.session-note-meta{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:10px}
.session-note-meta time{color:var(--brand-carmine);font-size:.78rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.035em}
.session-note-meta h3{margin:4px 0 0;color:var(--site-ink);font-size:1rem;line-height:1.3}
.note-delete{padding:5px 0;border:0;background:transparent;color:var(--site-muted);font:650 .76rem/1 var(--sans);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.note-delete:hover{color:var(--brand-red)}
.note-delete:focus-visible{outline:2px solid var(--brand-carmine);outline-offset:4px;border-radius:3px}
.session-note-content{max-width:75ch;color:var(--site-ink);line-height:1.6;overflow-wrap:anywhere}
.session-note-content p{margin:0 0 8px}.session-note-content p:last-child{margin-bottom:0}
.session-note-content ul,.session-note-content ol{margin:6px 0 10px;padding-left:22px}
.session-note-content li+li{margin-top:4px}
.session-note-content blockquote{margin:8px 0;padding:8px 14px;border-left:1px solid var(--brand-carmine);color:var(--site-muted)}
#advisor-note-empty[hidden]{display:none!important}

@media(max-width:900px){
  .consultation-data-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .overview-section-picker{align-items:stretch;flex-direction:column;gap:14px;padding:16px}
  .overview-section-select-wrap{flex-basis:auto;min-width:0}
  .session-note-form,.consultation-form-grid{grid-template-columns:1fr}
  .consultation-form-grid .field-wide{grid-column:auto}
  .note-toolbar{overflow-x:auto;flex-wrap:nowrap}
  .note-tool{flex:0 0 auto}
}

@media (max-width: 640px) {
  :root { --admin-mobile-nav-bg: var(--site-panel); }
  .app-header{min-height:calc(68px + env(safe-area-inset-top));height:calc(68px + env(safe-area-inset-top))}.app-context-label{display:none}.app-wordmark strong{font-size:1.5rem}
  .tab-nav{top:auto;background:var(--site-panel)!important;border-top:1px solid var(--site-line)!important;box-shadow:0 -8px 24px rgba(53,9,20,.08);backdrop-filter:none!important}.tab-btn{min-height:var(--app-hit);border-radius:9px}.tab-btn.active{background:var(--brand-carmine)!important;color:var(--mmc-paper)!important}
  #detail-tab-nav { background: var(--admin-mobile-nav-bg) !important; }
  #detail-tab-nav::after { background: var(--admin-mobile-nav-bg) !important; }
}
@media(max-width:430px){.gate{padding:16px}.gate-card{padding:36px 22px 28px}.gate-wordmark{transform:scale(1.14)}.app-header{padding-inline:10px}.app-header-right{gap:6px}.app-header-right .btn{min-width:40px;padding-inline:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.app-update-banner{position:fixed;z-index:2000;inset:max(10px,env(safe-area-inset-top)) 10px auto;display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:520px;margin-inline:auto;padding:10px 12px 10px 14px;border:1px solid var(--site-line);border-radius:var(--r-md);background:var(--site-panel);color:var(--site-ink);box-shadow:var(--shadow-md)}
.app-update-banner[hidden]{display:none!important}
.app-update-banner span{display:grid;gap:1px;min-width:0}
.app-update-banner strong{font-size:.875rem}
.app-update-banner small{color:var(--site-muted);font-size:.75rem}
.app-update-banner .btn{flex:0 0 auto;min-height:38px}
.app-build-badge{position:fixed;z-index:130;top:calc(var(--app-header-height,68px) + env(safe-area-inset-top) + 3px);right:6px;padding:2px 5px;border-radius:var(--r-sm);background:var(--site-panel);color:var(--site-muted);font:600 .7rem/1 var(--sans);letter-spacing:.02em;pointer-events:none}

/* Unified product shell: compact on installed phones, spacious on desktop. */
:root{--app-header-height:68px;--app-nav-controls-height:52px;--app-nav-height:calc(var(--app-nav-controls-height) + env(safe-area-inset-bottom));--app-shell-max:1280px;--app-hit:46px}
.btn,.tab-btn{touch-action:manipulation}
.document-studio{display:grid;gap:18px}
.document-studio-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.document-studio-head p{margin:5px 0 0;max-width:66ch}
.document-review-badge{flex:0 0 auto;padding:7px 10px;border:1px solid color-mix(in srgb,var(--brand-red) 42%,var(--site-line));border-radius:9px;color:var(--brand-red);font-size:.72rem;font-weight:800;letter-spacing:.035em}
.contract-notice{padding:13px 15px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--brand-pink) 22%,var(--site-panel));color:var(--site-ink);font-size:.86rem;line-height:1.55}
.document-form-grid{align-items:start}
.contract-options{display:grid;gap:10px;padding:15px;border-block:1px solid var(--site-line)}
.document-actions{display:flex;gap:10px;flex-wrap:wrap}
@media(min-width:1024px){
  .admin-container{max-width:var(--app-shell-max);padding-inline:clamp(28px,4vw,58px)}
  #tab-rechnungen{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:18px;align-items:start}
  #tab-rechnungen>.document-studio,#tab-rechnungen>.card:first-of-type{grid-column:1/-1}
  #tab-rechnungen>[hidden]{display:none!important}
  .app-header{padding-inline:max(28px,calc((100vw - var(--app-shell-max))/2 + 28px))}
}
@media(min-width:641px){
  #detail-tab-nav{width:100%;margin:0;border-width:0 0 1px;border-radius:0;padding-inline:max(28px,calc((100vw - var(--app-shell-max))/2 + 28px))}
}
/* Mobile app chrome — matches the customer app and behaves like a native iOS shell. */
@media (max-width: 640px) {
  :root {
    --app-header-content-height: 68px;
    --app-nav-controls-height: 62px;
    --app-nav-edge: 10px;
    --app-bottom-gap: max(4px, calc(env(safe-area-inset-bottom) - 28px));
    --app-nav-height: var(--app-nav-controls-height);
  }

  html.standalone-app,
  html.standalone-app body.app-body.app-active,
  body.app-body.app-active {
    background: var(--site-canvas) !important;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  body.app-active::before { content: none; }

  body.app-active #app {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
    background: var(--site-canvas);
  }

  body.app-active .app-header {
    position: relative;
    z-index: 110;
    flex: 0 0 calc(var(--app-header-content-height) + env(safe-area-inset-top));
    min-height: 0;
    height: auto;
    padding: calc(env(safe-area-inset-top) + 8px) 14px 4px;
    background: var(--mmc-cabernet) !important;
    overflow: hidden;
    isolation: isolate;
  }

  body.app-active .app-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc(env(safe-area-inset-top) + 8px) 0 0;
    background: var(--mmc-header-pattern);
    pointer-events: none;
  }

  body.app-active .app-header::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 3px;
    background: linear-gradient(90deg, var(--mmc-red), var(--mmc-orchid), var(--mmc-burgundy));
    pointer-events: none;
  }

  body.app-active .app-header > .app-logo,
  body.app-active .app-header > .app-header-right {
    transform: none;
  }

  body.app-active .app-header-right { gap: 7px; }
  body.app-active .app-header-right .btn {
    min-width: 44px;
    min-height: 44px;
    padding-inline: 10px;
    border-radius: 12px;
  }

  body.app-active .admin-container {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px;
    scroll-padding-bottom: 18px;
  }

  #detail-tab-nav {
    position: relative !important;
    inset: auto !important;
    z-index: 120;
    order: 3;
    flex: 0 0 var(--app-nav-controls-height);
    width: calc(100% - (2 * var(--app-nav-edge)));
    height: var(--app-nav-controls-height);
    margin: 0 var(--app-nav-edge) var(--app-bottom-gap);
    padding: 5px;
    gap: 3px;
    align-items: stretch;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--site-panel) 64%, transparent);
    border-radius: 20px;
    background: color-mix(in srgb, var(--site-panel) 78%, transparent) !important;
    box-shadow: 0 10px 30px rgba(53, 9, 20, .18), 0 1px 0 rgba(255, 255, 255, .5) inset !important;
    backdrop-filter: saturate(160%) blur(18px) !important;
    -webkit-backdrop-filter: saturate(160%) blur(18px) !important;
    transform: none !important;
  }

  #detail-tab-nav::after { display: none !important; content: none !important; }
  #detail-tab-nav[hidden] { display: none !important; }
  #detail-tab-nav .tab-btn[hidden] { display: none !important; }
  #detail-tab-nav .tab-nav-divider { display: none; }
  #detail-tab-nav .tab-btn {
    flex-direction: column;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    height: 52px;
    padding: 4px 2px;
    gap: 2px;
    border-radius: 15px;
  }

  #detail-tab-nav .tab-btn svg { width: 20px; height: 20px; }
  #detail-tab-nav .tab-label { font-size: .72rem; line-height: 1.05; }
  #detail-tab-nav .tab-btn.active { box-shadow: 0 5px 14px rgba(53, 9, 20, .18); }
  .app-build-badge { display: none; }
  #toast { bottom: calc(var(--app-nav-height) + var(--app-bottom-gap) + 12px); }
}

/* Final desktop canvas contract: never fall back to the former purple. */
@media (min-width:641px) {
  html[data-theme="light"],
  html[data-theme="light"] body.app-body,
  html[data-theme="light"] #app,
  html[data-theme="light"] .admin-container {
    background:var(--mmc-powder)!important;
  }
  html[data-theme="dark"],
  html[data-theme="dark"] body.app-body,
  html[data-theme="dark"] #app,
  html[data-theme="dark"] .admin-container {
    background:#20070e!important;
  }
}