/* Screen-only presentation. No business logic or document-template rules. */
@media screen {
  :root {
    --ui-accent:#0066d6;
    --ui-accent-soft:#eaf3ff;
    --ui-border:rgba(28,39,60,.12);
    --ui-glass:rgba(255,255,255,.82);
    --ui-shadow:0 1px 2px rgba(28,39,60,.035),0 8px 24px rgba(28,39,60,.045);
    --ui-font:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',sans-serif;
  }
  /* Tokens stay on the interface, not on document/export roots. */
  :is(.mm-sidebar,.mm-top,.mm-tabbar,.mm-sheet,.business-scope-mobile,.view,
      #authOverlay,.modal-overlay,.pwd-overlay,.mm-offer-modal,.mm-invoice-modal,
      .mm-ops-modal,.commercial-modal-overlay) {
    --bg:#f3f5f8; --card:#fff; --panel:#fff; --panel-2:#f7f8fa; --surface:#fff;
    --ink:#1d2430; --ink2:#505b6c; --ink-soft:#505b6c; --ink-mute:#647082;
    --muted:#647082; --grey:#647082; --grey-light:#cdd3dc;
    --line:#e0e4eb; --line-soft:#edf0f4; --field:#f0f3f7;
    --lime:#e6f0ff; --lime-ink:#075bb5; --sage:#edf0f5; --sage-ink:#596579;
    --font:var(--ui-font); --font-display:var(--ui-font);
    --grad-blue:var(--ui-accent); --grad-violet:#7065b2; --grad-graphite:#56647a;
    --green-tint:#e8f5ed; --green-ink:#256445;
    --radius:18px; --radius-sm:10px; --radius-lg:22px; --r:18px;
    --sh:var(--ui-shadow); --sh-sm:0 1px 3px rgba(28,39,60,.04);
    --sh-md:var(--ui-shadow); --sh-color:0 3px 8px rgba(0,102,214,.12);
    font-family:var(--ui-font);
  }
  html { background:#f3f5f8; }
  body { background:radial-gradient(ellipse at 5% 0%,#e7edf7 0,transparent 48%),#f3f5f8; color:#1d2430; }
  .view { color:var(--ink); }
  .view.active { animation:none; }
  ::selection { background:#cde2ff; color:#12375f; }
  :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
    outline:3px solid #5a9aef; outline-offset:3px;
  }
  :is(.view,.modal-overlay,#authOverlay) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]) {
    border-radius:10px; border-color:#ccd3df; color:#1d2430;
    box-shadow:0 1px 2px rgba(28,39,60,.025); transition:border-color .15s,box-shadow .15s;
  }
  :is(.view,.modal-overlay,#authOverlay) :is(input,select,textarea):focus {
    border-color:var(--ui-accent); box-shadow:0 0 0 3px rgba(0,102,214,.14);
  }
  :is(.view,.modal-overlay) input:is([type=checkbox],[type=radio]) { accent-color:var(--ui-accent); }
  :is(.toolbar-btn,.btn,.mini-btn,.hero-btn,.nav-cta,.btn-lime,.document-preview-action) {
    border-radius:11px; transition:background .15s,box-shadow .15s; font-weight:600;
  }
  :is(.toolbar-btn,.btn,.mini-btn,.hero-btn,.nav-cta,.btn-lime):hover { transform:none; }
  :is(.toolbar-btn,.nav-cta,.btn-save,.btn-pdf,.hero-btn.solid,.auth-btn.primary) {
    background:var(--ui-accent); color:#fff; box-shadow:0 2px 5px rgba(0,102,214,.12);
  }
  :is(.toolbar-btn,.nav-cta,.btn-save,.btn-pdf,.hero-btn.solid,.auth-btn.primary):hover { background:#005bbb; }
  .nav-cta .plus { color:#fff; }
  .mini-btn { min-height:32px; padding:7px 11px; }
  .mini-btn:not(.warn):not(.danger) { background:#f1f4f8; color:#3a4d69; border-color:#e0e5ec; }
  :is(button,input,select,textarea):disabled { cursor:not-allowed; }

  /* macOS-like sidebar and toolbar: translucent chrome, solid content. */
  .mm-sidebar {
    left:12px; top:12px; bottom:12px; width:224px; padding:20px 12px 12px;
    border:1px solid rgba(255,255,255,.92); border-radius:22px;
    background:rgba(251,253,255,.76); box-shadow:0 8px 30px rgba(35,52,80,.07),inset 0 0 0 1px rgba(53,75,110,.03);
    backdrop-filter:blur(24px) saturate(145%); -webkit-backdrop-filter:blur(24px) saturate(145%);
  }
  .mm-sidebar .brand { padding:0 10px 24px; gap:10px; }
  .mm-sidebar .brand b { font-size:16px; font-weight:650; letter-spacing:-.035em; }
  .mm-sidebar .brand .logo-mark { border-radius:10px; background:#222a38; }
  .mm-sidebar .navtab { min-height:42px; padding:10px 12px; border-radius:11px; font-size:13px; gap:11px; }
  .mm-sidebar .navtab svg { width:18px; height:18px; opacity:1; color:#65728a; }
  .mm-sidebar .navtab:hover { background:rgba(223,232,245,.62); }
  .mm-sidebar .navtab.active { color:#075bb5; background:#e1ecfc; font-weight:650; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); }
  .mm-sidebar .navtab.active svg { color:#0066d6; }
  .mm-sidebar .navtab .badge { color:#626f83; background:rgba(109,132,167,.09); font-size:11px; padding:2px 7px; }
  .mm-sidebar .navtab.active .badge { color:#075bb5; background:rgba(0,102,214,.08); }
  .mm-top {
    gap:12px; padding:12px 16px; margin:12px 24px 16px; max-width:none;
    position:sticky; top:12px; z-index:65; border:1px solid rgba(255,255,255,.9);
    border-radius:18px; background:var(--ui-glass); box-shadow:var(--ui-shadow);
    backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%);
  }
  .mm-top .greet { font-size:13px; font-weight:600; }
  .mm-search { max-width:none; min-width:110px; }
  .mm-search input { height:38px; border-color:transparent; background:rgba(223,229,239,.5); border-radius:10px; box-shadow:none; font-size:13px; }
  .mm-top .business-scope-control select { min-width:132px; height:38px; border-radius:10px; box-shadow:none; font-size:12px; }
  .mm-bell { width:36px; height:36px; background:transparent; box-shadow:none; }
  .nav-cta { padding:10px 13px; font-size:12px; min-height:38px; }
  .mm-search-results { border:1px solid var(--ui-border); border-radius:14px; padding:6px; background:#fff; }

  /* Consistent type hierarchy and quieter cards. */
  :is(.ck-wrap,.dash-wrap,.list-wrap) { max-width:1260px; }
  .ck-wrap { padding:12px 28px 48px; }
  .list-wrap { padding-top:22px; }
  :is(.ck-title,.list-head h1,.dash-hero h1) { font-weight:700; font-size:29px; letter-spacing:-.035em; }
  :is(.ck-sub,.list-head .sub,.dash-hero .hero-sub) { color:#647082; font-size:13px; line-height:1.5; }
  .list-head { margin-bottom:20px; align-items:center; }
  :is(.ck-card,.ck-kpi,.kpi,.card,.dash-panel,.aus-panel,.aus-stat,.settings-card,.svc-card,.detail-head,.kmu-strip) {
    border:1px solid var(--ui-border); border-radius:18px; background:#fff; box-shadow:var(--ui-shadow);
  }
  :is(.card,.kpi,.ck-kpi,.svc-card,.kmu-strip):hover { transform:none; border-color:#cdd8e7; box-shadow:0 3px 13px rgba(28,39,60,.06); }
  .ck-card { padding:22px; }
  .ck-kpis { gap:14px; margin-bottom:20px; }
  .ck-kpi { padding:20px; }
  .ck-kpi.hero { background:linear-gradient(135deg,#f4f8ff,#eaf2ff); border-color:#d0e0f7; }
  .ck-kpi.hero .kv { color:#164d8d; }
  .ck-kpi.hero .kl { color:#4d6380; opacity:1; }
  :is(.ck-kpi .kv,.kpi .kpi-val,.aus-stat .v) { font-size:29px; font-weight:650; letter-spacing:-.04em; }
  :is(.ck-big,.ck-count) { font-weight:600; letter-spacing:-.04em; }
  .ck-kpi .kl { font-size:12px; line-height:1.4; margin-top:8px; }
  .ck-card .ck-eyebrow { letter-spacing:.04em; color:#647082; font-size:11px; }
  .ck-card h3 { font-size:16px; font-weight:650; }
  .ck-pills { gap:7px; }
  .ck-pill { padding:7px 12px; box-shadow:none; border:1px solid var(--ui-border); font-size:12px; }
  .ck-pill.lime { border-color:#d0e0f7; background:#edf4ff; }
  .hot-row { border-radius:12px; background:#edf4ff; color:#204c82; }
  .hot-row .hr-sub { opacity:1; color:#576d89; }
  .hot-row .hr-badge { background:#dceafd; color:#175397; }
  .ticks .tick.open,.ck-legend .dot.open { background:#b7c7de; }
  .ticks .tick.done { background:#72a8e4; }
  .ck-card .ck-x { background:#f1f4f8; color:#59677c; }
  .card { padding:18px 20px; margin-bottom:10px; }
  .card-title { font-size:15px; }
  .card-meta { font-size:12px; gap:8px; line-height:1.5; }
  .card-amount { font-size:18px; font-weight:650; }
  .card-avatar { width:40px; height:40px; font-size:15px; }
  .card-actions { gap:7px; }
  .payment-source-row {
    width:100%; min-width:0; padding:14px 0; gap:10px;
    border:0; border-top:1px solid var(--line); background:transparent;
    text-align:left; font-family:var(--ui-font); cursor:pointer;
  }
  .payment-source-row:hover { background:#f5f8fc; }
  .payment-source-row .payment-source-meta { overflow-wrap:anywhere; line-height:1.5; }
  .payment-source-row .payment-source-amount { font-size:16px; font-weight:600; }
  .status { letter-spacing:0; }
  .filter-bar { gap:6px; }
  .empty { padding:54px 18px; }
  .empty .big { background:#edf3fa; width:62px; height:62px; font-size:27px; }
  .web-cheat { background:#fff; border-color:var(--ui-border); border-radius:18px; box-shadow:none; }
  .web-cheat-rule { background:#eef4fc; color:#3b5376; }
  .web-cheat-rule b { color:#075bb5; }

  /* Editor chrome only. #page and .pdf-export-page deliberately excluded. */
  .create-wrap { gap:20px; padding:8px 24px 32px; }
  .form-pane { border:1px solid var(--ui-border); border-radius:18px; box-shadow:var(--ui-shadow); }
  .form-scroll { padding:24px; }
  .form-header { margin-bottom:24px; }
  .form-header h2 { font-size:20px; letter-spacing:-.03em; }
  .form-header .fh-back { border-radius:50%; background:#eef2f7; }
  .form-pane .section-label { color:#354258; font-size:12px; margin-top:24px; }
  .form-pane .field label { font-size:12px; color:#536076; }
  .form-pane .field :is(input,select,textarea) { min-height:42px; font-size:14px; }
  .type-toggle { background:#edf0f5; border-radius:11px; padding:3px; }
  .type-toggle button { padding:9px; font-size:13px; }
  .type-toggle button.active,#btn-rechnung.active { color:#1d2430; box-shadow:0 1px 4px rgba(25,39,66,.12); }
  .commercial-core-card { background:#f6f8fb; border-color:#e3e8ef; border-radius:13px; padding:16px 16px 2px; }
  .commercial-core-heading small { color:#5b6a80; font-size:11px; }
  .form-pane :is(.commercial-panel,.document-check-shell,.doc-extra) { border-radius:13px; }
  .form-pane :is(.commercial-panel,.document-check-shell,.doc-extra)>summary { min-height:48px; font-size:13px; }
  .commercial-workflow-banner { background:#f6f8fb; border-color:#e3e8ef; }
  .form-pane .commercial-help,.form-pane .commercial-checkbox { font-size:12px; line-height:1.55; }
  .form-pane .commercial-hint-card { font-size:12px; }
  .form-pane .commercial-finalize-btn { background:var(--ui-accent)!important; border-color:var(--ui-accent)!important; }
  .form-pane .actions { padding:15px 20px; background:rgba(255,255,255,.94); border-radius:0 0 18px 18px; }
  .preview-pane { min-width:0; padding:8px 0 20px; background:transparent; }
  .preview-toolbar { padding:8px; gap:8px; }
  .preview-toolbar .fname { font-family:var(--ui-font); font-size:12px; color:#647082; }
  .document-read-mode .preview-pane { padding:12px 8px 36px; }
  .document-read-mode .preview-toolbar { top:86px; }
  .document-preview-primary { background:var(--ui-accent); border-color:var(--ui-accent); color:#fff; }

  /* Finance, workflows and settings share neutral surfaces. Status colors remain semantic. */
  :is(.mm-finance-panel,.mm-ops-panel,.mm-ops-card,.mm-finance-table-wrap) { background:#fff; border-color:var(--ui-border); border-radius:18px; box-shadow:var(--ui-shadow); }
  .mm-ops-panel { padding:22px; }
  .mm-ops-eyebrow,.mm-ops-kicker { color:#647082; letter-spacing:.06em; }
  .mm-ops-primary { background:var(--ui-accent)!important; border-color:var(--ui-accent)!important; }
  .mm-ops-facts>span { background:#f4f6f9; }
  .mm-ops-summary span { background:#eef2f7; color:#536076; }
  .mm-finance-tabs { padding:4px; border-radius:13px; background:#e9eef5; border:1px solid var(--ui-border); }
  .mm-finance-tab { border-radius:10px; }
  .mm-finance-tab.active { background:#fff; color:#075bb5; box-shadow:0 1px 4px rgba(25,39,66,.1); }
  .mm-money-card:not(.hero) :is(.mm-card-label,.mm-card-meta) { color:#56667d; }
  .mm-money-card.hero :is(.mm-card-label,.mm-card-meta) { color:#c6cfdb; }
  .settings-card { padding:22px; }
  .sc-icon { background:#eef4fc!important; color:#075bb5; }
  .sc-head h3 { letter-spacing:-.02em; }
  :is(.modal-overlay,.pwd-overlay,.commercial-modal-overlay) { background:rgba(25,35,52,.28); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  :is(.modal,.pwd-card,.commercial-modal) { border:1px solid rgba(255,255,255,.9); border-radius:22px; box-shadow:0 24px 80px rgba(26,39,65,.2); }
  #authOverlay { background:radial-gradient(ellipse at 25% 10%,#e0eafb,transparent 60%),#f3f5f8; }
  .auth-card { border:1px solid rgba(255,255,255,.96); border-radius:26px; background:rgba(255,255,255,.92); box-shadow:0 18px 60px rgba(30,48,80,.1); }
  .auth-card h1 { font-size:25px; font-weight:700; letter-spacing:-.04em; }
  .auth-card input { background:#f4f6f9; }
  .auth-logo { background:#222a38; border-radius:18px; }
  .auth-btn { border-radius:12px; }

  @media (min-width:1024px) { body { padding-left:248px; } }
  @media (min-width:1024px) and (max-width:1279px) {
    .mm-top .greet { display:none; }
    .ck-wrap,.list-wrap { padding-left:22px; padding-right:22px; }
    .ck-grid { grid-template-columns:1.25fr 1fr; }
    .ck-card { padding:18px; }
  }
  @media (max-width:1439px) { .mm-top .business-scope-control>span { display:none; } }
  @media (max-width:1023px) {
    body { padding-bottom:calc(108px + env(safe-area-inset-bottom)); background:#f3f5f8; }
    .business-scope-mobile { padding:8px 12px; background:rgba(243,245,248,.88); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
    .business-scope-mobile .business-scope-control { width:min(100%,600px); padding:4px 10px 4px 14px; border-radius:15px; background:rgba(255,255,255,.85); box-shadow:none; }
    .business-scope-mobile .business-scope-control>span { color:#5f6c80; font-size:10px; letter-spacing:.03em; white-space:normal; flex:0 0 100px; line-height:1.35; }
    .business-scope-mobile .business-scope-control select { border:0; background-color:transparent; height:40px; }
    .ck-wrap,.list-wrap { max-width:800px; }
    .mm-tabbar { left:12px; right:12px; bottom:10px; width:auto; max-width:580px; margin-inline:auto; padding:6px 7px calc(6px + env(safe-area-inset-bottom)); border:1px solid rgba(255,255,255,.92); border-radius:25px; background:rgba(251,253,255,.9); box-shadow:0 10px 35px rgba(25,42,72,.13); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); }
    .mm-tab { min-height:51px; justify-content:center; border-radius:17px; color:#606e83; }
    .mm-tab.active { background:#e5eefb; color:#0066d6; }
    .mm-tab.active::after { display:none; }
    .mm-tab-plus { width:46px; height:46px; transform:none; background:#0066d6; color:#fff; box-shadow:0 3px 10px rgba(0,102,214,.2); }
    .mm-sheet { background:rgba(255,255,255,.97); border:1px solid #fff; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
    .create-wrap { padding:12px; gap:18px; }
    .form-pane { width:100%; }
    .form-scroll { padding:22px; }
    .document-read-mode .preview-toolbar { top:72px; }
    .preview-toolbar { flex-wrap:wrap; }
    :is(.view,.modal-overlay,#authOverlay) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]) { font-size:16px; min-height:44px; }
  }
  @media (max-width:767px) {
    .ck-wrap { padding:16px 16px 26px; }
    .list-wrap { padding:18px 16px 32px!important; }
    .ck-wrap>.mobile-only { padding:8px 2px 18px; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; color:#1d2430; }
    .ck-wrap>.mobile-only::after { content:none; }
    .ck-wrap>.mobile-only .ck-title { color:#1d2430; font-size:30px; font-weight:700; }
    .ck-wrap>.mobile-only #heroGreeting { color:#617087; font-size:13px; font-weight:500; }
    .ck-wrap>.mobile-only .ck-sub { color:#647082; }
    .ck-wrap>.mobile-only .ck-pills { display:flex; gap:7px; margin:14px 0 0; }
    .ck-wrap>.mobile-only .ck-pill { min-height:36px; padding:7px 10px; border-radius:10px; background:#e8edf4; color:#536076; font-size:11px; }
    .ck-wrap>.mobile-only .ck-pill b { color:#354865; font-size:13px; }
    .ck-wrap>.mobile-only .ck-pill.lime { background:#e5eefb; color:#075bb5; }
    .ck-wrap>.mobile-only .ck-pill.lime b { color:#075bb5; }
    .ck-kpis { gap:10px; margin-bottom:14px; }
    .ck-kpi { min-height:102px; padding:17px 14px; border-radius:17px; }
    .ck-kpi .kv { font-size:26px; }
    .ck-kpi .kl { margin-top:9px; font-size:12px; }
    .ck-grid,.ck-col { gap:14px; }
    .ck-card { padding:20px; border-radius:19px; }
    .list-head { align-items:flex-start; flex-wrap:wrap; gap:14px; }
    .list-head h1 { font-size:28px; }
    .list-head .sub { font-size:13px; }
    .list-head>.toolbar-btn { min-height:44px; }
    .card { padding:16px; }
    :is(.toolbar-btn,.mini-btn,.btn,.btn-lime,.icon-btn,.document-preview-action) { min-height:44px; }
    .card-main { gap:10px; }
    .card-actions { gap:7px; }
    .form-scroll { padding:18px; }
    .form-header { flex-wrap:wrap; gap:9px; }
    .form-header .fh-note { margin-left:0; font-size:12px; }
    .form-pane .actions { padding:14px; gap:8px; }
    .form-pane .actions .btn { white-space:normal; }
    .preview-toolbar-right { flex-wrap:wrap; width:100%; justify-content:flex-start; }
    .preview-toolbar-main { flex-basis:100%; }
    .mm-ops-panel,.settings-card { padding:18px; }
  }
  @media (max-width:360px) {
    .ck-wrap { padding-inline:12px; }
    .list-wrap { padding-inline:12px!important; }
    .ck-kpi .kv { font-size:23px; }
    .ck-card { padding:17px; }
    .mm-tabbar { left:8px; right:8px; padding-inline:5px; }
    .mm-tab { font-size:9px; }
    .mm-tab-plus { width:42px; height:42px; }
    .commercial-grid,.row2 { grid-template-columns:1fr; }
    .commercial-grid .span-2 { grid-column:auto; }
  }
  @media (prefers-reduced-motion:reduce) {
    .view.active,.mm-sheet.open { animation:none; }
    :is(.toolbar-btn,.btn,.mini-btn,.card,.kpi,.ck-kpi,.navtab,.mm-tab,.mm-search input) { transition:none; }
    .preview-toolbar .live::before { animation:none; }
  }
  @media (prefers-reduced-transparency:reduce),(prefers-contrast:more) {
    .mm-sidebar,.mm-top,.mm-tabbar,.mm-sheet,.business-scope-mobile,.auth-card { background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; border-color:#a9b4c5; }
    .view { --muted:#46546b; --grey:#46546b; --line:#a9b4c5; }
  }
  @supports not (backdrop-filter:blur(1px)) {
    .mm-sidebar,.mm-top,.mm-tabbar,.mm-sheet { background:#fafcff; }
  }
}