:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --sidebar-size: 226px;
  --sidebar-gutter: 20px;
}
.sidebar {
  width: calc(var(--sidebar-size) + var(--safe-left));
  padding-top: calc(33px + var(--safe-top));
  padding-left: calc(var(--sidebar-gutter) + var(--safe-left));
  padding-bottom: var(--safe-bottom);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.page-shell {
  margin-left: calc(var(--sidebar-size) + var(--safe-left));
  width: calc(100% - var(--sidebar-size) - var(--safe-left));
  padding-right: var(--safe-right);
}
.topbar { height: calc(78px + var(--safe-top)); padding-top: var(--safe-top); }
.page-footer { padding-bottom: calc(25px + var(--safe-bottom)); }
.login-header {
  padding-top: calc(35px + var(--safe-top));
  padding-left: max(6.5%, calc(20px + var(--safe-left)));
  padding-right: max(6.5%, calc(20px + var(--safe-right)));
}
.login-header-actions { display: flex; align-items: center; gap: 20px; }
.login-footer {
  padding-bottom: calc(25px + var(--safe-bottom));
  padding-left: max(6.5%, calc(20px + var(--safe-left)));
  padding-right: max(6.5%, calc(20px + var(--safe-right)));
}
dialog {
  max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom) - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pwa-install-trigger:hover { background: var(--red-soft); }
.pwa-instructions { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.pwa-instructions li { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #fcf8fa; }
.pwa-instructions strong { display: block; font-size: 12px; color: #6c475c; }
.pwa-instructions span { display: block; margin-top: 6px; color: #796571; font-size: 12px; line-height: 1.9; }
#pwa-dialog { max-width: 470px; }
#pwa-dialog > p { color: #796571; }
#pwa-dialog .pwa-cache-status { font-size: 11px; padding: 12px 14px; background: #f5f1f4; border-radius: 8px; margin: 15px 0; }
#pwa-dialog .pwa-cache-status:empty { display: none; }
.pwa-dialog-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pwa-dialog-actions .button { flex: 1; }
#pwa-dialog .pwa-boundary { font-size: 10px; margin: 16px 0 0; line-height: 1.8; }
.pwa-notices {
  position: fixed; z-index: 24;
  right: calc(20px + var(--safe-right)); bottom: calc(18px + var(--safe-bottom));
  width: min(410px, calc(100% - 40px - var(--safe-left) - var(--safe-right)));
  display: grid; gap: 10px;
}
.pwa-notice { border: 1px solid #e7bdc8; border-radius: 14px; background: #fffcfd; padding: 18px; box-shadow: 0 10px 35px #60304720; }
.pwa-notice > strong { display: block; color: #994458; font-size: 13px; }
.pwa-notice p { color: #796571; font-size: 11px; line-height: 1.8; margin-top: 6px; }
.pwa-notice > div { display: flex; align-items: center; gap: 18px; margin-top: 12px; }
.pwa-notice .button { min-height: 38px; padding: 8px 12px; font-size: 11px; }
.pwa-offline { border-color: #dfcdbb; background: #fffcf8; }
.pwa-offline > strong { color: #805a35; }
body.pwa-has-notice { padding-bottom: 230px; }
@media (max-width: 1200px) { :root { --sidebar-size: 202px; --sidebar-gutter: 16px; } }
@media (max-width: 1023px) {
  :root { --sidebar-size: 190px; }
  input:not([type=range]), select { font-size: 16px; }
}
@media (max-width: 767px) {
  :root { --sidebar-size: 232px; }
  .page-shell { margin-left: 0; width: 100%; padding-left: var(--safe-left); }
  .topbar { height: calc(65px + var(--safe-top)); }
  .topbar-actions { gap: 4px; }
  .breadcrumb { gap: 8px; }
  .topbar .icon-button, .topbar .search-button, .topbar-avatar { width: 44px; height: 44px; }
  .topbar-avatar { margin-left: 0; width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
  .topbar-avatar::before { content: ''; position: absolute; width: 44px; height: 44px; }
  .button, .module-open, .sidebar-help, .text-link { min-height: 44px; }
  .scenario-select select { font-size: 16px; }
  .password-field > button { min-height: 44px; top: 0; }
  .login-header { padding-top: calc(25px + var(--safe-top)); }
  .login-header-actions { gap: 10px; }
  .login-layout { padding-left: max(24px, var(--safe-left)); padding-right: max(24px, var(--safe-right)); }
  .login-card { min-width: 0; }
  .pwa-dialog-actions { flex-direction: column; }
  .pwa-notices { right: calc(14px + var(--safe-right)); width: calc(100% - 28px - var(--safe-left) - var(--safe-right)); bottom: calc(12px + var(--safe-bottom)); }
  .pwa-notice { padding: 14px; }
}
@media (pointer: coarse) {
  .icon-button { min-width: 44px; min-height: 44px; }
  .segmented button { min-height: 44px; }
  .survivor-card, .map-place { touch-action: manipulation; }
}
@media (display-mode: standalone) {
  .topbar { position: sticky; top: 0; z-index: 20; background: #fbf8fbe8; backdrop-filter: blur(22px); }
  .module-detail { scroll-margin-top: calc(100px + var(--safe-top)); }
}
@media print { .pwa-notices, .pwa-install-trigger { display: none; } }