*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; scroll-behavior: smooth; }
body { font-family: var(--font-family); font-size: var(--font-size-base); color: var(--color-text); background: var(--color-bg); line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, svg { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; font-size: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font-family: inherit; font-size: inherit; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }
::-webkit-scrollbar { width: 0; background: transparent; }

.app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; position: fixed; inset: 0; background: var(--color-bg); }
.hidden { display: none !important; }
.app.hidden { display: none; }

.app-header { flex-shrink: 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); z-index: 100; padding-top: var(--safe-area-top); }
.app-header:empty { display: none; }
.app-header-inner { display: flex; align-items: center; height: var(--header-height); padding: 0 var(--spacing-md); gap: var(--spacing-sm); }
.app-header-back { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 20px; flex-shrink: 0; transition: background var(--transition-fast), transform var(--transition-fast); }
.app-header-back:active { background: var(--color-surface-alt); transform: scale(0.9); }
.app-header-title { flex: 1; font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-header-action { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); font-size: 18px; flex-shrink: 0; }

.app-content { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.app-content-inner { max-width: var(--content-max-width); margin: 0 auto; width: 100%; padding: var(--spacing-md); padding-bottom: calc(var(--spacing-lg) + var(--safe-area-bottom)); min-height: 100%; }

.app-navbar { flex-shrink: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); display: flex; padding-bottom: var(--safe-area-bottom); z-index: 100; box-shadow: 0 -1px 4px rgba(0,0,0,0.04); }
.app-navbar.hidden-nav { display: none; }

.nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 4px 6px; color: var(--color-text-hint); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); transition: color var(--transition-fast); position: relative; -webkit-tap-highlight-color: transparent; }
.nav-item.active { color: var(--color-primary); }
.nav-item.active .nav-icon { transform: scale(1.15); }
.nav-item.active::after { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 3px; background: var(--color-primary); border-radius: 0 0 4px 4px; }
.nav-icon { font-size: 22px; line-height: 1; transition: transform var(--transition-spring); }
.nav-label { letter-spacing: -0.2px; }

.screen-fade-enter { animation: screen-fade-in 0.25s ease both; }
@keyframes screen-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 768px) {
    .app-content-inner { padding: var(--spacing-lg) var(--spacing-xl); }
    .app-navbar { max-width: 500px; margin: 0 auto; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border: 1px solid var(--color-border); border-bottom: none; }
}