*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--color-bg);color:var(--color-text)}body.modal-open{overflow:hidden}html{-webkit-tap-highlight-color:transparent}:root{--color-bg: #fafafa;--color-surface: #ffffff;--color-primary: #111827;--color-accent: #2563eb;--color-muted: #6b7280;--color-border: #e5e7eb;--font-xs: .75rem;--font-sm: .875rem;--font-md: 1rem;--font-lg: 1.125rem;--font-xl: 1.375rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--footer-nav-height: 64px;--max-content-width: 720px}app-root{display:flex;flex-direction:column;height:100vh;overflow:hidden}.app-content,.page{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-4);padding-bottom:calc(var(--footer-nav-height) + var(--space-4));max-width:var(--max-content-width);margin:0 auto;width:100%}h1,h2,h3{margin:0 0 var(--space-3);font-weight:600;letter-spacing:-.02em}h1{font-size:var(--font-xl)}h2{font-size:var(--font-lg)}p{margin:0 0 var(--space-3);color:var(--color-muted);line-height:1.5}button{appearance:none;border:none;border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--font-md);font-weight:500;background:var(--color-primary);color:#fff;cursor:pointer;transition:transform .1s ease,opacity .1s ease}button:active{transform:scale(.97)}button.secondary{background:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-border)}input,select,textarea{width:100%;padding:var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);font-size:var(--font-md)}.footer-nav{position:fixed;bottom:0;left:0;right:0;height:var(--footer-nav-height);background:var(--color-surface);border-top:1px solid var(--color-border);display:flex;justify-content:space-around;align-items:center;z-index:100}.footer-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;font-size:var(--font-xs);color:var(--color-muted);gap:2px}.footer-nav a.active{color:var(--color-primary);font-weight:600}.menu{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border-bottom:1px solid var(--color-border);animation:slideDown .22s cubic-bezier(.4,0,.2,1)}.menu a,.menu button{text-decoration:none;color:var(--color-primary);font-size:var(--font-md);font-weight:500;padding:var(--space-2) 0;background:none;border:none}.menu a:hover{color:var(--color-accent)}.center{display:flex;justify-content:center;align-items:center}.spacer{height:var(--space-5)}@media (min-width: 768px){.page{padding:var(--space-5);padding-bottom:var(--space-5)}.footer-nav{position:fixed;bottom:0;justify-content:center;gap:var(--space-5);background:var(--color-surface)}}@media (min-width: 1024px){:root{--max-content-width: 960px}}.sheet{position:fixed;left:0;right:0;bottom:0;max-height:calc(100vh - var(--footer-nav-height));background:var(--color-surface);display:flex;flex-direction:column;border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);z-index:201;animation:slideUp .2s ease-out}.sheetBody{flex:1;overflow-y:auto;padding:var(--space-4);-webkit-overflow-scrolling:touch}.sheetHeader{padding:var(--space-4);border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center}.sheetFooter{padding:var(--space-4);border-top:1px solid var(--color-border);display:flex;gap:var(--space-3);justify-content:flex-end}.sheetOverlay{position:fixed;inset:0;background:#00000073;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:200}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (min-width: 768px){.sheet{left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:100%;max-width:640px;max-height:80vh;border-radius:var(--radius-lg)}}