/* ── App Shell ── */
    html, body {
      height: 100%;
      overflow: hidden;
    }

    body {
      display: flex;
      flex-direction: column;
      margin: 0;
      overflow: hidden;
      background: #111f26;
    }

    /* ── Top Bar ── */
    .app-header {
      display: flex; align-items: center; gap: .75rem;
      padding: max(env(safe-area-inset-top), 1rem) 1.25rem .75rem;
      flex-shrink: 0;
      background: rgba(10,24,32,.6);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    }
    .app-back-btn {
      width: 32px; height: 32px; flex: none;
      display: flex; align-items: center; justify-content: center;
      background: var(--panel); border: 1px solid var(--line-strong);
      border-radius: 50%; color: var(--text);
      cursor: pointer; padding: 0;
    }
    .app-back-btn:hover { background: rgba(255,255,255,.06); }
    .app-back-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; display: block; flex-shrink: 0; }

    .app-logo {
      display: inline-flex;
      align-items: center;
      gap: 10px;
    }

    .verify-email-banner {
      display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
      padding: .5rem 1.25rem; flex-shrink: 0;
      background: var(--accent-lt); color: var(--text); font-size: .82rem;
    }
    .verify-email-banner button {
      background: none; border: 1px solid var(--line-strong); border-radius: 8px;
      color: var(--text); font-size: .8rem; padding: .25rem .6rem; cursor: pointer; font-family: inherit;
    }
    .verify-email-banner button:hover { background: rgba(255,255,255,.06); }

    .app-logo-text {
      height: 22px;
      width: auto;
      display: block;
      margin-top: 4px;
    }

    .app-header-icons {
      display: flex;
      gap: .6rem;
      align-items: center;
      margin-left: auto;
    }

    /* ── Scrollable content ── */
    .app-content {
      flex: 1;
      overflow-y: auto;
      overflow-x: visible;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      background: url('/assets/img/bg-topo.png') center top / cover no-repeat scroll;
    }

    .app-content::-webkit-scrollbar { display: none; }

    /* ── Screens ── */
    .screen         { display: none !important; }
    .screen.active  { display: block !important; }

    #screen-start.screen.active         { display: flex !important; height: 100%; min-height: unset; }
    #screen-loading.screen.active       { display: flex !important; height: 100%; min-height: unset; }
    #screen-error.screen.active         { display: flex !important; height: 100%; min-height: unset; }
    #screen-no-routes.screen.active     { display: flex !important; height: 100%; min-height: unset; }
    #screen-weather-block.screen.active { display: flex !important; height: 100%; min-height: unset; }
    #screen-skip.screen.active          { display: flex !important; height: 100%; min-height: unset; }
    #screen-donation-thanks.screen.active { display: flex !important; height: 100%; min-height: unset; }
    /* Root-Cause aller bisherigen "Buttons nicht zentriert"-Versuche: die
       generische .screen.active{display:block!important} (oben) gewinnt
       gegen JEDE nicht-!important-Regel, egal wie spezifisch - die weiter
       unten definierten #screen-login/-invite/-guest-profile{display:flex}
       griffen dadurch NIE. Erst hier in die !important-Liste eingetragen
       wird der Flex-Container (und damit jede Zentrierung darin) wirksam. */
    #screen-login.screen.active         { display: flex !important; height: 100%; min-height: unset; }
    /* min-height statt height: anders als die kurzen Screens oben ist das
       Gast-Profil-Formular lang genug, um die Bildschirmhöhe zu sprengen -
       mit fixem height:100% übersteigt der Inhalt die Box, padding-bottom
       greift dann nicht mehr am tatsächlichen Ende (overflow ignoriert die
       Box-Padding), der "Abbrechen"-Button klebt am Viewport-Rand statt am
       Padding. min-height lässt die Box mit dem Inhalt mitwachsen, .app-
       content scrollt dann über die volle Höhe inkl. Padding. */
    #screen-guest-profile.screen.active { display: flex !important; min-height: 100%; }