:root{--md-sys-color-primary: #3B82F6;--md-sys-color-on-primary: #FFFFFF;--md-sys-color-primary-container: #DBEAFE;--md-sys-color-on-primary-container: #1E40AF;--md-sys-color-secondary: #10B981;--md-sys-color-on-secondary: #FFFFFF;--md-sys-color-secondary-container: #D1FAE5;--md-sys-color-on-secondary-container: #065F46;--md-sys-color-tertiary: #F59E0B;--md-sys-color-on-tertiary: #FFFFFF;--md-sys-color-tertiary-container: #FEF3C7;--md-sys-color-on-tertiary-container: #92400E;--md-sys-color-error: #EF4444;--md-sys-color-on-error: #FFFFFF;--md-sys-color-error-container: #FEE2E2;--md-sys-color-on-error-container: #991B1B;--md-sys-color-surface: #FFFFFF;--md-sys-color-surface-dim: #F9FAFB;--md-sys-color-surface-bright: #FFFFFF;--md-sys-color-surface-container-lowest: #FFFFFF;--md-sys-color-surface-container-low: #F3F4F6;--md-sys-color-surface-container: #E5E7EB;--md-sys-color-surface-container-high: #D1D5DB;--md-sys-color-surface-container-highest: #9CA3AF;--md-sys-color-on-surface: #1F2937;--md-sys-color-on-surface-variant: #6B7280;--md-sys-color-outline: #9CA3AF;--md-sys-color-outline-variant: #E5E7EB;--md-sys-color-background: #F9FAFB;--md-sys-color-on-background: #1F2937;--md-sys-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, .05);--md-sys-elevation-2: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--md-sys-elevation-3: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--md-sys-shape-corner-none: 0;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-full: 9999px;--md-sys-typescale-display-large: 600 3.5rem/1.2 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-display-medium: 600 2.75rem/1.2 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-display-small: 600 2.25rem/1.3 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-headline-large: 600 2rem/1.3 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-headline-medium: 600 1.75rem/1.3 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-headline-small: 600 1.5rem/1.4 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-title-large: 500 1.375rem/1.4 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-title-medium: 500 1rem/1.5 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-title-small: 500 .875rem/1.5 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-body-large: 400 1rem/1.5 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-body-medium: 400 .875rem/1.5 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-body-small: 400 .75rem/1.5 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-label-large: 500 .875rem/1.5 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-label-medium: 500 .75rem/1.5 "Inter", "Noto Sans JP", sans-serif;--md-sys-typescale-label-small: 500 .6875rem/1.5 "Inter", "Noto Sans JP", sans-serif;--md-sys-motion-duration-short: .15s;--md-sys-motion-duration-medium: .3s;--md-sys-motion-duration-long: .5s;--md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);--md-sys-motion-easing-emphasized: cubic-bezier(.2, 0, 0, 1);--md-sys-motion-easing-decelerated: cubic-bezier(0, 0, 0, 1);--md-sys-motion-easing-accelerated: cubic-bezier(.3, 0, 1, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font:var(--md-sys-typescale-body-large);background-color:var(--md-sys-color-background);color:var(--md-sys-color-on-background);min-height:100vh}.app{display:flex;flex-direction:column;min-height:100vh}.app-content{flex:1;padding:1rem 1rem 5rem;max-width:1200px;margin:0 auto;width:100%}.header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background-color:var(--md-sys-color-surface);box-shadow:var(--md-sys-elevation-1);position:sticky;top:0;z-index:100}.header-logo{display:flex;align-items:center;gap:.5rem}.header-logo h1{font:var(--md-sys-typescale-title-large);color:var(--md-sys-color-primary)}.header-user{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--md-sys-shape-corner-full);background-color:var(--md-sys-color-surface-container-low);cursor:pointer;transition:background-color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard)}.header-user:hover{background-color:var(--md-sys-color-surface-container)}.bottom-nav{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;align-items:center;height:4rem;background-color:var(--md-sys-color-surface);box-shadow:0 -2px 10px #0000001a;z-index:1000}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.5rem 1rem;border-radius:var(--md-sys-shape-corner-large);text-decoration:none;color:var(--md-sys-color-on-surface-variant);transition:all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);cursor:pointer;background:none;border:none;font:var(--md-sys-typescale-label-medium)}.nav-item:hover{background-color:var(--md-sys-color-surface-container-low)}.nav-item.active{color:var(--md-sys-color-primary);background-color:var(--md-sys-color-primary-container)}.nav-item.active .nav-icon{transform:scale(1.1)}.nav-icon{width:1.5rem;height:1.5rem;transition:transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-emphasized)}.nav-label{font:var(--md-sys-typescale-label-small)}.card{background-color:var(--md-sys-color-surface);border-radius:var(--md-sys-shape-corner-large);box-shadow:var(--md-sys-elevation-1);padding:1rem;transition:box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard)}.card:hover,.card-elevated{box-shadow:var(--md-sys-elevation-2)}.card-filled{background-color:var(--md-sys-color-surface-container-low);box-shadow:none}.card-outlined{background-color:var(--md-sys-color-surface);box-shadow:none;border:1px solid var(--md-sys-color-outline-variant)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.5rem;border-radius:var(--md-sys-shape-corner-full);font:var(--md-sys-typescale-label-large);cursor:pointer;border:none;transition:all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);text-decoration:none}.btn-filled{background-color:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary)}.btn-filled:hover{box-shadow:var(--md-sys-elevation-2);transform:translateY(-1px)}.btn-filled:active{transform:translateY(0)}.btn-tonal{background-color:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.btn-tonal:hover{box-shadow:var(--md-sys-elevation-1)}.btn-outlined{background-color:transparent;color:var(--md-sys-color-primary);border:1px solid var(--md-sys-color-outline)}.btn-outlined:hover{background-color:var(--md-sys-color-primary-container)}.btn-text{background-color:transparent;color:var(--md-sys-color-primary)}.btn-text:hover{background-color:var(--md-sys-color-primary-container)}.btn-icon{padding:.5rem;border-radius:var(--md-sys-shape-corner-full)}.btn:disabled{opacity:.38;cursor:not-allowed;transform:none!important}.input-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.input-label{font:var(--md-sys-typescale-label-large);color:var(--md-sys-color-on-surface-variant)}.input-field{padding:1rem;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--md-sys-shape-corner-small);font:var(--md-sys-typescale-body-large);background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);transition:all var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard)}.input-field:focus{outline:none;border-color:var(--md-sys-color-primary);box-shadow:0 0 0 2px var(--md-sys-color-primary-container)}.input-field::placeholder{color:var(--md-sys-color-on-surface-variant)}.display-large{font:var(--md-sys-typescale-display-large)}.display-medium{font:var(--md-sys-typescale-display-medium)}.display-small{font:var(--md-sys-typescale-display-small)}.headline-large{font:var(--md-sys-typescale-headline-large)}.headline-medium{font:var(--md-sys-typescale-headline-medium)}.headline-small{font:var(--md-sys-typescale-headline-small)}.title-large{font:var(--md-sys-typescale-title-large)}.title-medium{font:var(--md-sys-typescale-title-medium)}.title-small{font:var(--md-sys-typescale-title-small)}.body-large{font:var(--md-sys-typescale-body-large)}.body-medium{font:var(--md-sys-typescale-body-medium)}.body-small{font:var(--md-sys-typescale-body-small)}.label-large{font:var(--md-sys-typescale-label-large)}.label-medium{font:var(--md-sys-typescale-label-medium)}.label-small{font:var(--md-sys-typescale-label-small)}.text-primary{color:var(--md-sys-color-primary)}.text-secondary{color:var(--md-sys-color-secondary)}.text-error{color:var(--md-sys-color-error)}.text-muted{color:var(--md-sys-color-on-surface-variant)}.bg-primary{background-color:var(--md-sys-color-primary)}.bg-primary-container{background-color:var(--md-sys-color-primary-container)}.bg-surface{background-color:var(--md-sys-color-surface)}.bg-surface-container{background-color:var(--md-sys-color-surface-container-low)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.m-auto{margin:auto}.text-center{text-align:center}.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.animate-fade-in{animation:fadeIn var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-decelerated)}.animate-slide-up{animation:slideUp var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-decelerated)}@media(min-width:768px){.app-content{padding:1.5rem 1.5rem 5.5rem}.bottom-nav{max-width:600px;left:50%;transform:translate(-50%);border-radius:var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0}}@media(min-width:1024px){.app-content{padding:2rem}}