/* DaNet 5.374 TEST — restore compact Safari top; equal header status gaps. 
   PWA safe-area override below stays in place and only affects standalone. */
@media (max-width:650px) {
  .app > .top {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0,1fr) clamp(126px, 33.1vw, 144px);
    gap: 9px;
    align-items: start;
    padding: 0 16px 14px;
    -webkit-text-size-adjust: 100%;
  }
  .app > .top > div:first-child { width:100%;min-width:0; }
  .app > .top .brand {
    font-size:28px;
    line-height:normal;
    letter-spacing:-1px;
  }
  .app > .top > div:first-child > .small {
    font-size:11px;
    letter-spacing:normal;
    line-height:normal;
    white-space:nowrap;
    overflow:visible;
  }
  .app > .top .liveClock {
    display:flex!important;
    flex-wrap:nowrap!important;
    white-space:nowrap!important;
    gap:7px;
    margin-top:5px;
    font-size:13px;
    line-height:normal;
  }
  .app > .top .liveClock .liveDate {font-size:13px;white-space:nowrap;}
  .app > .top .liveClock strong {font-size:16px;line-height:normal;white-space:nowrap;}
  .app > .top .topActions {
    box-sizing:border-box;
    width:100%!important;
    max-width:none!important;
    min-width:0;
    flex:none!important;
    align-items:stretch!important;
    gap:7px;
  }
  .app > .top .topAccount {
    box-sizing:border-box;
    width:100%!important;
    max-width:100%!important;
    min-width:0;
    height:45px;
    min-height:45px;
    padding:5px 5px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.17;
    white-space:normal!important;
    overflow-wrap:normal;
    overflow:hidden!important;
    text-overflow:clip!important;
  }
  .app > .top .topAccount:not(.signedIn) {
    font-size:11px;
    font-weight:900;
    background:#4c1d95;
  }
  .app > .top .topAccount.signedIn {background:#4c1d95;}
  .app > .top .topAccountGreeting {font-size:12.5px;}
  .app > .top .topAccountName {font-size:13.5px;}
  .app > .top .topStatusLine {
    width:100%!important;
    min-width:0;
    display:flex;
    justify-content:flex-end!important;
    flex-wrap:nowrap!important;
    gap:3px;
  }
  .app > .top .topStatusLine .danetLanguageSwitch {
    flex:0 0 auto;
    gap:3px;
  }
  .app > .top .topStatusLine .danetLanguageSwitch button {
    box-sizing:border-box;
    min-width:30px!important;
    height:21px!important;
    padding:2px 4px!important;
    font-size:9.5px!important;
  }
  .app > .top .topStatusLine #mode {
    flex:0 0 auto;
    font-size:10px!important;
    padding:4px 6px;
    white-space:nowrap;
  }
}
@media (max-width:360px) {
  .app > .top {grid-template-columns:minmax(0,1fr) 120px;gap:5px;padding-inline:10px;}
  .app > .top > div:first-child > .small {font-size:9px;letter-spacing:-.2px;}
  .app > .top .liveClock {gap:3px;}
  .app > .top .liveClock .liveDate {font-size:10px;letter-spacing:-.2px;}
  .app > .top .liveClock strong {font-size:12px;letter-spacing:-.3px;}
  .app > .top .topStatusLine {gap:1px;}
  .app > .top .topStatusLine .danetLanguageSwitch {gap:1px;}
  .app > .top .topStatusLine .danetLanguageSwitch button {min-width:27px!important;font-size:9px!important;padding:2px 3px!important;}
  .app > .top .topStatusLine #mode {font-size:9px!important;padding:4px 4px;}
  .app > .top .topAccount:not(.signedIn) {font-size:10px;}
}

/* Only installed standalone web apps need extra native status-bar clearance.
   Safari browser already positions the page BELOW its native toolbar: no extra
   safe-area padding. The mode class is set in the document head, before this CSS. */
@media (max-width:650px) {
  html.danetInstalledApp5373 .app > .top,
  html.danetInstalledApp5373 body.datingView .app > .top {
    padding-top: max(42px, env(safe-area-inset-top, 0px)) !important;
  }
}