/* Mobile First Layout Constraints */
body{
  background-color:var(--bg-base);
  color:var(--text-primary);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(60px + var(--safe-area-bottom)); /* For bottom nav */
}

/* App Wrapper */
.app-wrapper{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

/* Container */
.container{
  width:100%;
  padding:0 var(--space-2);
  margin:auto;
}

/* Tablet / Desktop Constraints (Centralized Mobile View) */
@media(min-width:768px){
  .container{
    max-width:768px;
  }
}

@media(min-width:1200px){
  .container{
    max-width:var(--container);
  }
}

/* Header Layout */
.header{
  position:sticky;
  top:0;
  z-index:100;
  background-color:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:60px;
  padding:0 var(--space-2);
  border-bottom:1px solid var(--bg-overlay);
}

/* Bottom Nav Layout */
.bottom-nav{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  z-index:100;
  background-color:rgba(255,255,255,0.95);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--bg-overlay);
  display:flex;
  justify-content:space-around;
  align-items:center;
  height:60px;
  padding-bottom:env(safe-area-inset-bottom);
}

.bottom-nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  color:var(--text-muted);
  font-size:10px;
  height:100%;
}
.bottom-nav-item.active{
  color:var(--text-primary);
}
.bottom-nav-item svg{
  width:24px;
  height:24px;
  fill:currentColor;
}

/* Main Content Area */
.main-content{
  flex:1;
  padding-top:var(--space-2);
  padding-bottom:var(--space-4);
}

/* PC Web View Adjustments (min-width: 1441px) */
@media(min-width: 1441px) {
  body {
    padding-bottom:calc(78px + var(--safe-area-bottom)); /* 30% larger bottom nav */
  }
  
  .header {
    height: 78px;
  }
  
  .bottom-nav {
    height: 78px;
  }
  
  .bottom-nav-item {
    font-size: 13px; /* 30% larger font */
  }
  
  .bottom-nav-item svg {
    width: 31px; /* 30% larger icon */
    height: 31px;
  }
}