.app{position:relative;z-index:1;width:100%;max-width:480px;margin:0 auto;height:100dvh;display:flex;flex-direction:column;overflow:hidden;}


body:not(.pc-layout):not(.is-guest) .screens{
  background-color:var(--bg);
  background-image:repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--accent) 3.5%, transparent) 0,
    color-mix(in srgb, var(--accent) 3.5%, transparent) 1px,
    transparent 1px, transparent 10px);
  background-attachment:fixed;
}


.app-header{
  padding:14px 18px 10px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  flex-shrink:0;z-index:50;
}
.app-header.is-hidden{display:none;}
.logo-wrap{display:flex;flex-direction:column;gap:1px;}
.header-brand-logo{display:flex;align-items:center;justify-content:center;width:auto;max-width:38vw;color:var(--t1);line-height:1;overflow:hidden;flex:0 0 auto;}
.header-brand-logo-img,
.header-brand-logo-svg{display:block;width:auto;height:24px;max-width:112px;max-height:24px;overflow:visible;}
.header-brand-logo-img{object-fit:contain;}

.header-brand-logo-ink{fill:#1F2A24;}
body[data-theme="charcoal"] .header-brand-logo-ink{fill:#FFFFFF;}
.header-brand-logo-accent{fill:#2F6B4F;}
.header-actions{display:flex;align-items:center;gap:8px;}


.screens{flex:1;overflow:hidden;position:relative;}

body:not(.pc-layout) .screens{overflow:clip;}
.screen{
  position:absolute;inset:0;width:100%;max-width:100%;overflow-y:auto;overflow-x:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1), opacity .3s;
}
.screen.hidden-left {transform:translateX(-100%);opacity:0;pointer-events:none;visibility:hidden;}
.screen.hidden-right{transform:translateX(100%); opacity:0;pointer-events:none;visibility:hidden;}
.screen.active     {transform:translateX(0);    opacity:1;visibility:visible;pointer-events:auto;}
.screen.slide-up   {transform:translateY(100%); opacity:0;pointer-events:none;visibility:hidden;}


.btm-nav{
  display:flex;border-top:1px solid var(--border);
  padding:10px 0 max(20px, env(safe-area-inset-bottom)) 0;
  background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;
  flex-shrink:0;z-index:50;
}
.nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;color:var(--t3);transition:color .15s;border:none;background:transparent;
  font-family:var(--font);position:relative;
}
.nav-btn svg{width:20px;height:20px;}
.nav-btn span{font-size:10px;font-weight:500;}

.nav-badge{
  position:absolute;top:-3px;left:calc(50% + 4px);
  min-width:15px;height:15px;padding:0 4px;border-radius:999px;
  background:var(--accent);color:var(--on-accent,#fff);
  font-size:9px;font-weight:800;line-height:1;letter-spacing:0;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--surface);box-sizing:border-box;
  pointer-events:none;white-space:nowrap;
}
.nav-badge[hidden]{display:none;}
.nav-btn.active{color:var(--t1);}
.nav-btn.active svg{
  background:var(--accent);
  border-radius:50%;
  padding:10px;
  width:40px;height:40px;
  min-width:40px;min-height:40px;
  margin-top:-20px;
  box-shadow:0 2px 8px rgba(74,85,104,.18);
  color:var(--on-accent);
  stroke:var(--on-accent);
}



@media (min-width: 768px){
  body{
    background:
      radial-gradient(circle at top left, rgba(255,255,255,.82), transparent 34%),
      linear-gradient(135deg, rgba(226,232,240,.72), rgba(247,248,250,.96));
  }

  .app{
    width:480px;
    max-width:480px;
    height:calc(100dvh - 32px);
    max-height:920px;
    min-height:680px;
    margin:16px auto;
    border:1px solid rgba(74,85,104,.14);
    border-radius:28px;
    box-shadow:0 24px 80px rgba(26,32,44,.18);
    overflow:hidden;
  }

  #screenCreate,
  .preview-sheet,
  .user-sheet,
  .route-timeline-overlay{
    left:50%;
    right:auto;
    width:480px;
    max-width:480px;
    top:16px;
    bottom:16px;
    margin-left:-240px;
    border:1px solid rgba(74,85,104,.14);
    border-radius:28px;
    box-shadow:0 24px 80px rgba(26,32,44,.18);
    overflow:hidden;
  }

  #screenCreate{
    overflow-y:auto;
  }

  .route-timeline-overlay{
    background:transparent;
  }
}

@media (min-width: 768px) and (max-height: 720px){
  .app{
    height:100dvh;
    min-height:0;
    margin:0 auto;
    border-top:0;
    border-bottom:0;
    border-radius:0;
  }

  #screenCreate,
  .preview-sheet,
  .user-sheet,
  .route-timeline-overlay{
    top:0;
    bottom:0;
    border-top:0;
    border-bottom:0;
    border-radius:0;
  }
}


@media (min-width: 768px){
  #createScrollBtns{
    left:50% !important;
    right:auto !important;
    width:480px;
    max-width:480px;
    margin-left:-240px;
    align-items:flex-end;
    padding-right:14px;
    box-sizing:border-box;
  }
  #createScrollBtns.visible{
    transform:translateY(0);
  }

  #imgZoomOverlay,
  .custom-theme-overlay,
  .color-picker-overlay,
  .report-sheet-overlay,
  .block-sheet-overlay,
  .resume-share-overlay,
  .notify-detail-overlay{
    left:50% !important;
    right:auto !important;
    top:16px !important;
    bottom:16px !important;
    width:480px !important;
    max-width:480px !important;
    margin-left:-240px !important;
    border:1px solid rgba(74,85,104,.14);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 24px 80px rgba(26,32,44,.18);
    box-sizing:border-box;
  }

  #imgZoomOverlay{
    box-sizing:border-box;
  }
  #imgZoomTarget{
    max-width:calc(100% - 24px) !important;
    max-height:calc(100% - 24px) !important;
  }

  .custom-theme-overlay,
  .color-picker-overlay{
    position:fixed !important;
    flex-direction:column;
  }

  .report-sheet,
  .block-sheet,
  .resume-share-sheet{
    left:50% !important;
    right:auto !important;
    bottom:16px !important;
    width:480px !important;
    max-width:480px !important;
    margin-left:-240px !important;
    border-left:1px solid rgba(74,85,104,.14);
    border-right:1px solid rgba(74,85,104,.14);
    box-shadow:0 -18px 50px rgba(0,0,0,.22);
  }

  .report-sheet,
  .block-sheet{
    transform:translateY(calc(100% + 18px));
  }
  .report-sheet.open,
  .block-sheet.open{
    transform:translateY(0);
  }
  .resume-share-sheet{
    transform:translateY(calc(100% + 18px)) !important;
  }
  .resume-share-sheet.open{
    transform:translateY(0) !important;
  }

  .notify-detail-overlay{
    align-items:flex-end;
    justify-content:center;
  }
  .notify-detail-modal{
    width:100%;
    max-width:100%;
  }
}

@media (min-width: 768px) and (max-height: 720px){
  #createScrollBtns{
    margin-left:-240px;
    bottom:calc(88px + env(safe-area-inset-bottom));
  }
  #imgZoomOverlay,
  .custom-theme-overlay,
  .color-picker-overlay,
  .report-sheet-overlay,
  .block-sheet-overlay,
  .resume-share-overlay,
  .notify-detail-overlay{
    top:0 !important;
    bottom:0 !important;
    border-top:0;
    border-bottom:0;
    border-radius:0;
  }
  .report-sheet,
  .block-sheet,
  .resume-share-sheet{
    bottom:0 !important;
  }
}


.color-picker-footer{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--border);
  background:var(--bg);
  box-shadow:0 -10px 24px rgba(0,0,0,.10);
  box-sizing:border-box;
}
.color-picker-footer-actions{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}
.color-picker-usage-btn,
.color-picker-reset-btn,
.color-picker-confirm-btn{
  min-height:40px;
  padding:0 13px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--surface);
  color:var(--t2);
  font-family:var(--font);
  font-size:12px;
  font-weight:800;
  line-height:1;
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}
.color-picker-usage-btn{
  width:100%;
  justify-content:center;
  background:var(--bg3);
}
.color-picker-reset-btn{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.color-picker-confirm-btn{
  min-width:78px;
  border-color:transparent;
  background:var(--accent);
  color:var(--on-accent,#fff);
}
.color-picker-usage-btn:active,
.color-picker-reset-btn:active,
.color-picker-confirm-btn:active{
  transform:translateY(1px);
}
.color-picker-usage-btn:focus-visible,
.color-picker-reset-btn:focus-visible,
.color-picker-confirm-btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media (min-width: 768px){
  .app{
    box-shadow:0 14px 34px rgba(26,32,44,.12) !important;
  }
  #screenCreate,
  .preview-sheet,
  .user-sheet,
  .route-timeline-overlay,
  #imgZoomOverlay,
  .custom-theme-overlay,
  .color-picker-overlay,
  .report-sheet-overlay,
  .block-sheet-overlay,
  .resume-share-overlay,
  .notify-detail-overlay{
    box-shadow:0 14px 34px rgba(26,32,44,.12) !important;
  }
  .report-sheet,
  .block-sheet,
  .resume-share-sheet{
    box-shadow:0 -10px 28px rgba(0,0,0,.16) !important;
  }
  .color-picker-footer{
    border-bottom-left-radius:28px;
    border-bottom-right-radius:28px;
  }
}