.app{display:flex;flex-direction:column;min-height:100vh}.app-header{background:linear-gradient(135deg,#7c3aed,#059669);color:#fff;padding:1rem 2rem;box-shadow:0 2px 4px #0000001a}.header-content{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.app-header h1{font-size:1.5rem;margin:0}.app-header nav{display:flex;gap:1.5rem}.app-header nav a{color:#fff;text-decoration:none;padding:.5rem 1rem;border-radius:4px;transition:background-color .2s}.app-header nav a:hover{background-color:#ffffff1a}.install-button{background-color:#059669;color:#fff;border:none;margin-top:1rem;padding:.75rem 1.5rem;font-size:1rem;cursor:pointer;border-radius:8px}.install-button:hover{background-color:#047857}.app-main{flex:1;padding:2rem;max-width:1200px;margin:0 auto;width:100%}.app-footer{background-color:#f5f5f5;padding:1rem;text-align:center;color:#666;font-size:.875rem}.offline-indicator{background-color:#ff9800;color:#fff;padding:.5rem 1rem;border-radius:4px;margin-top:.5rem;display:inline-block}@media(max-width:768px){.app-header{padding:1rem}.header-content{flex-direction:column;align-items:flex-start;gap:1rem}.app-header h1{font-size:1.25rem}.app-main{padding:1rem}}.offline-indicator-banner{position:fixed;left:0;right:0;z-index:1000;padding:.75rem 1rem;box-shadow:0 2px 8px #00000026;animation:slideIn .3s ease-out}.offline-indicator-top{top:0}.offline-indicator-bottom{bottom:0}@keyframes slideIn{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.offline-indicator-bottom.offline-indicator-banner{animation-name:slideInBottom}@keyframes slideInBottom{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.offline-indicator-offline{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff}.offline-indicator-reconnecting{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}.offline-indicator-syncing{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff}.offline-indicator-stale{background:linear-gradient(135deg,#6b7280,#4b5563);color:#fff}.offline-indicator-content{display:flex;align-items:center;justify-content:center;gap:.75rem;max-width:1200px;margin:0 auto}.offline-indicator-icon{font-size:1.25rem;flex-shrink:0}.offline-indicator-reconnecting .offline-indicator-icon,.offline-indicator-syncing .offline-indicator-icon{animation:spin 1.5s linear infinite}.offline-indicator-text{display:flex;flex-direction:column;align-items:flex-start;gap:.125rem}.offline-indicator-status{font-weight:600;font-size:.875rem}.offline-indicator-freshness{font-size:.75rem;opacity:.9}.offline-indicator-dismiss{background:#fff3;border:none;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s;flex-shrink:0}.offline-indicator-dismiss:hover{background:#ffffff4d}.offline-indicator-dismiss .material-icons{font-size:1rem}@media(max-width:768px){.offline-indicator-banner{padding:.5rem .75rem}.offline-indicator-content{gap:.5rem}.offline-indicator-icon{font-size:1.125rem}.offline-indicator-status{font-size:.8125rem}.offline-indicator-freshness{font-size:.6875rem}}.sync-status{background:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;overflow:hidden}.sync-status-summary{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;cursor:pointer;transition:background-color .2s}.sync-status-summary:hover{background-color:#f9fafb}.sync-status-info{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#374151}.sync-status-icon{font-size:1.25rem;color:#6b7280}.sync-status-icon.success{color:#059669}.sync-status-icon.spinning{animation:spin 1.5s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sync-status-actions{display:flex;align-items:center;gap:.5rem}.sync-status-btn{display:flex;align-items:center;justify-content:center;gap:.25rem;padding:.375rem .5rem;border:none;border-radius:4px;background:transparent;color:#6b7280;cursor:pointer;font-size:.75rem;transition:all .2s}.sync-status-btn:hover:not(:disabled){background:#f3f4f6;color:#374151}.sync-status-btn:disabled{opacity:.5;cursor:not-allowed}.sync-status-btn .material-icons{font-size:1rem}.sync-status-btn.sync-now{background:#eff6ff;color:#2563eb}.sync-status-btn.sync-now:hover{background:#dbeafe}.sync-status-expand{color:#9ca3af;transition:transform .2s}.sync-status-expand.expanded{transform:rotate(180deg)}.sync-status-details{border-top:1px solid #e5e7eb;padding:.75rem 1rem}.sync-status-section{margin-bottom:1rem}.sync-status-section:last-child{margin-bottom:0}.sync-status-section h4{margin:0 0 .5rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#6b7280}.sync-status-section.failed h4{color:#dc2626}.sync-action-list{list-style:none;margin:0;padding:0}.sync-action-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #f3f4f6;font-size:.8125rem}.sync-action-item:last-child{border-bottom:none}.sync-action-item.pending .sync-action-type{color:#374151}.sync-action-item.failed{flex-direction:column;align-items:flex-start;gap:.25rem}.sync-action-info{display:flex;flex-direction:column;gap:.125rem}.sync-action-item.failed .sync-action-type{color:#dc2626}.sync-action-error,.sync-action-time,.sync-action-retries{font-size:.75rem;color:#9ca3af}.sync-status-failed-actions{display:flex;gap:.5rem;margin-top:.75rem;padding-top:.75rem;border-top:1px solid #f3f4f6}.sync-status-btn.retry{background:#fef3c7;color:#d97706}.sync-status-btn.retry:hover:not(:disabled){background:#fde68a}.sync-status-btn.clear{color:#dc2626}.sync-status-btn.clear:hover{background:#fef2f2}.sync-result-stats{display:flex;gap:1rem;flex-wrap:wrap}.sync-stat{display:flex;align-items:center;gap:.25rem;font-size:.8125rem}.sync-stat .material-icons{font-size:1rem}.sync-stat.success{color:#059669}.sync-stat.failed{color:#dc2626}.sync-stat.conflict{color:#d97706}@media(max-width:768px){.sync-status-summary{padding:.625rem .75rem}.sync-status-info{font-size:.8125rem}.sync-status-details{padding:.625rem .75rem}}.btn{min-height:44px;min-width:44px;font-family:inherit;font-size:1rem;font-weight:600;line-height:1.5;text-align:center;display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border-radius:8px;border:none;cursor:pointer;user-select:none;transition:all .2s ease-in-out;-webkit-tap-highlight-color:transparent}.btn--primary{background-color:#000;color:#fff}.btn--primary:hover:not(:disabled){background-color:#333;transform:translateY(-1px);box-shadow:0 4px 8px #0003}.btn--primary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #0003}.btn--secondary{background-color:#fff;color:#000;border:2px solid #000}.btn--secondary:hover:not(:disabled){background-color:#f5f5f5;transform:translateY(-1px);box-shadow:0 4px 8px #0000001a}.btn--secondary:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #0000001a}.btn--danger{background-color:#dc3545;color:#fff}.btn--danger:hover:not(:disabled){background-color:#c82333;transform:translateY(-1px);box-shadow:0 4px 8px #dc35454d}.btn--danger:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #dc35454d}.btn--small{min-height:44px;padding:.5rem 1rem;font-size:.875rem}.btn--medium{min-height:44px;padding:.75rem 1.5rem;font-size:1rem}.btn--large{min-height:48px;padding:1rem 2rem;font-size:1.125rem}.btn:disabled,.btn--loading{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn--loading{position:relative}.btn--full-width{width:100%}.btn:focus-visible{outline:2px solid #000;outline-offset:2px}.btn--secondary:focus-visible{outline-color:#000}.btn--danger:focus-visible{outline-color:#dc3545}@media(min-width:768px){.btn{min-height:40px}.btn--large{min-height:44px}}@media(min-width:1024px){.btn:hover:not(:disabled){transition:all .15s ease-in-out}}@media(prefers-color-scheme:dark){.btn--primary{background-color:#fff;color:#000}.btn--primary:hover:not(:disabled){background-color:#e0e0e0}.btn--secondary{background-color:transparent;color:#fff;border-color:#fff}.btn--secondary:hover:not(:disabled){background-color:#ffffff1a}}.input{display:flex;flex-direction:column;gap:.5rem;width:100%}.input__label{display:block;font-size:.875rem;font-weight:500;color:#333;line-height:1.5}.input__required{color:#dc3545;margin-left:.25rem}.input__field{min-height:44px;width:100%;font-family:inherit;font-size:1rem;line-height:1.5;color:#000;padding:.75rem 1rem;border:1px solid #ddd;border-radius:8px;background-color:#fff;transition:all .2s ease-in-out;-webkit-text-size-adjust:100%}.input__field::placeholder{color:#999;opacity:1}.input__field:focus{outline:none;border-color:#000;box-shadow:0 0 0 3px #0000001a}.input__field--error{border-color:#dc3545;background-color:#fff5f5}.input__field--error:focus{border-color:#dc3545;box-shadow:0 0 0 3px #dc354526}.input__field--disabled,.input__field:disabled{background-color:#f5f5f5;color:#999;cursor:not-allowed;opacity:.6}.input__error{font-size:.875rem;color:#dc3545;line-height:1.4;display:flex;align-items:flex-start;gap:.25rem;margin-top:-.25rem}.input__field[type=number]::-webkit-inner-spin-button,.input__field[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input__field[type=number]{-moz-appearance:textfield}.input__field[type=search]{-webkit-appearance:none;appearance:none}.input__field[type=search]::-webkit-search-decoration,.input__field[type=search]::-webkit-search-cancel-button,.input__field[type=search]::-webkit-search-results-button,.input__field[type=search]::-webkit-search-results-decoration{display:none}.input__field[type=password]{font-family:Courier New,monospace;letter-spacing:.1em}@media(pointer:coarse){.input__field{min-height:48px;padding:.875rem 1rem}}@media(min-width:768px){.input__label{font-size:.9375rem}.input__field{min-height:40px;padding:.625rem .875rem}}@media(min-width:1024px){.input__field:hover:not(:disabled):not(:focus){border-color:#999}.input__field[type=number]::-webkit-inner-spin-button,.input__field[type=number]::-webkit-outer-spin-button{-webkit-appearance:auto}.input__field[type=number]{-moz-appearance:number-input}}@media(prefers-color-scheme:dark){.input__label{color:#e0e0e0}.input__field{background-color:#2a2a2a;border-color:#555;color:#fff}.input__field::placeholder{color:#888}.input__field:focus{border-color:#fff;box-shadow:0 0 0 3px #ffffff1a}.input__field--error{background-color:#dc35451a}.input__field--disabled,.input__field:disabled{background-color:#1a1a1a;color:#666}}@media(prefers-reduced-motion:reduce){.input__field{transition:none}}.card{display:flex;flex-direction:column;width:100%;background-color:#fff;border-radius:12px;transition:all .2s ease-in-out;-webkit-tap-highlight-color:transparent}.card--default{background-color:#fff;border:1px solid #e0e0e0;box-shadow:0 1px 3px #0000000f}.card--outlined{background-color:#fff;border:2px solid #e0e0e0;box-shadow:none}.card--elevated{background-color:#fff;border:none;box-shadow:0 4px 12px #00000014}.card--padding-none,.card--padding-none .card__header,.card--padding-none .card__content,.card--padding-none .card__footer,.card--padding-small{padding:0}.card--padding-small .card__header,.card--padding-small .card__content,.card--padding-small .card__footer{padding:.75rem}.card--padding-medium{padding:0}.card--padding-medium .card__header,.card--padding-medium .card__content,.card--padding-medium .card__footer{padding:1rem}.card--padding-large{padding:0}.card--padding-large .card__header,.card--padding-large .card__content,.card--padding-large .card__footer{padding:1.5rem}.card__header{border-bottom:1px solid #f0f0f0}.card__title{font-size:1.125rem;font-weight:600;color:#000;margin:0;line-height:1.4}.card__content{flex:1;color:#333;font-size:.9375rem;line-height:1.6}.card__footer{border-top:1px solid #f0f0f0;margin-top:auto}.card--interactive{cursor:pointer;user-select:none}.card--interactive:not(.card--no-hover):hover{transform:translateY(-2px)}.card--default.card--interactive:not(.card--no-hover):hover{box-shadow:0 4px 12px #0000001f}.card--outlined.card--interactive:not(.card--no-hover):hover{border-color:#999;box-shadow:0 2px 8px #00000014}.card--elevated.card--interactive:not(.card--no-hover):hover{box-shadow:0 8px 24px #0000001f}.card--interactive:active{transform:translateY(0)}.card--interactive:focus{outline:2px solid #000;outline-offset:2px}.card--interactive:focus:not(:focus-visible){outline:none}.card--interactive{min-height:44px}@media(min-width:768px){.card{border-radius:16px}.card__title{font-size:1.25rem}.card--padding-medium .card__header,.card--padding-medium .card__content,.card--padding-medium .card__footer{padding:1.25rem}.card--padding-large .card__header,.card--padding-large .card__content,.card--padding-large .card__footer{padding:2rem}}@media(min-width:1024px){.card--interactive:not(.card--no-hover):hover{transform:translateY(-4px)}.card__content{font-size:1rem}}@media(prefers-color-scheme:dark){.card--default,.card--outlined,.card--elevated{background-color:#2a2a2a}.card--default{border-color:#444;box-shadow:0 1px 3px #0000004d}.card--outlined{border-color:#444}.card--elevated{box-shadow:0 4px 12px #0006}.card__header{border-bottom-color:#444}.card__title{color:#fff}.card__content{color:#e0e0e0}.card__footer{border-top-color:#444}.card--default.card--interactive:not(.card--no-hover):hover{box-shadow:0 4px 12px #00000080}.card--outlined.card--interactive:not(.card--no-hover):hover{border-color:#666}.card--elevated.card--interactive:not(.card--no-hover):hover{box-shadow:0 8px 24px #0009}.card--interactive:focus{outline-color:#fff}}@media(prefers-reduced-motion:reduce){.card,.card--interactive:hover,.card--interactive:active{transform:none;transition:none}}.card-grid{display:grid;gap:1rem;grid-template-columns:1fr}@media(min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.card-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}}.navigation{position:fixed;top:0;left:0;right:0;height:56px;background-color:#fff;border-bottom:1px solid #e0e0e0;z-index:1000;box-shadow:0 2px 4px #0000000d}.navigation__container{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 1rem;max-width:1200px;margin:0 auto}.navigation__logo{flex-shrink:0;font-size:1.25rem;font-weight:700;color:#000}.navigation__menu--desktop{display:none;list-style:none;margin:0;padding:0;gap:.5rem}.navigation__menu-item{display:inline-block}.navigation__link{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:none;border:none;font-family:inherit;font-size:.9375rem;font-weight:500;color:#333;cursor:pointer;border-radius:6px;transition:all .2s ease-in-out;position:relative;white-space:nowrap}.navigation__link:hover{background-color:#f5f5f5;color:#000}.navigation__link--active{color:#000;background-color:#f0f0f0;font-weight:600}.navigation__icon{font-size:1.125rem;display:flex;align-items:center}.navigation__badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background-color:#dc3545;color:#fff;font-size:.75rem;font-weight:600;border-radius:10px;line-height:1}.navigation__actions{display:flex;align-items:center;gap:.5rem}.navigation__hamburger{display:flex;flex-direction:column;justify-content:space-around;width:44px;height:44px;background:transparent;border:none;cursor:pointer;padding:12px;z-index:1002;-webkit-tap-highlight-color:transparent}.navigation__hamburger-line{width:100%;height:2px;background-color:#000;border-radius:2px;transition:all .3s ease-in-out;transform-origin:center}.navigation__hamburger--open .navigation__hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}.navigation__hamburger--open .navigation__hamburger-line:nth-child(2){opacity:0}.navigation__hamburger--open .navigation__hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.navigation__drawer{position:fixed;top:56px;right:0;bottom:0;width:280px;max-width:85vw;background-color:#fff;transform:translate(100%);transition:transform .3s ease-in-out;z-index:1001;overflow-y:auto;box-shadow:-2px 0 8px #0000001a}.navigation__drawer--open{transform:translate(0)}.navigation__drawer-content{padding:1rem 0}.navigation__menu--mobile{list-style:none;margin:0;padding:0}.navigation__menu--mobile .navigation__menu-item{display:block}.navigation__menu--mobile .navigation__link{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;min-height:44px;width:100%;text-align:left;border-radius:0;font-size:1rem}.navigation__menu--mobile .navigation__link:hover{background-color:#f5f5f5}.navigation__menu--mobile .navigation__link--active{background-color:#f0f0f0;border-left:3px solid #000}.navigation__overlay{position:fixed;inset:56px 0 0;background-color:#00000080;z-index:999;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.navigation-bottom{position:fixed;bottom:0;left:0;right:0;height:56px;background-color:#fff;border-top:1px solid #e0e0e0;z-index:1000;box-shadow:0 -2px 4px #0000000d}.navigation-bottom__menu{display:flex;list-style:none;margin:0;padding:0;height:100%}.navigation-bottom__item{flex:1;display:flex}.navigation-bottom__link{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:44px;padding:.375rem .5rem;background:none;border:none;font-family:inherit;cursor:pointer;transition:all .2s ease-in-out;position:relative;-webkit-tap-highlight-color:transparent}.navigation-bottom__icon{font-size:1.5rem;line-height:1}.navigation-bottom__label{font-size:.6875rem;font-weight:500;color:#666;line-height:1}.navigation-bottom__link--active .navigation-bottom__icon,.navigation-bottom__link--active .navigation-bottom__label{color:#000;font-weight:600}.navigation-bottom__link:active{background-color:#f5f5f5}.navigation-bottom__badge{position:absolute;top:4px;right:50%;transform:translate(8px);display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background-color:#dc3545;color:#fff;font-size:.625rem;font-weight:600;border-radius:9px;line-height:1}@media(min-width:768px){.navigation__hamburger{display:none}.navigation__menu--desktop{display:flex}.navigation__drawer,.navigation-bottom{display:none}}@media(min-width:1024px){.navigation{height:64px}.navigation__container{padding:0 2rem}.navigation__logo{font-size:1.5rem}.navigation__link{font-size:1rem;padding:.625rem 1.25rem}}@media(prefers-color-scheme:dark){.navigation,.navigation__drawer,.navigation-bottom{background-color:#1a1a1a;border-color:#333}.navigation__logo{color:#fff}.navigation__link{color:#e0e0e0}.navigation__link:hover{background-color:#2a2a2a;color:#fff}.navigation__link--active{background-color:#333;color:#fff}.navigation__hamburger-line{background-color:#fff}.navigation-bottom__label{color:#999}.navigation-bottom__link--active .navigation-bottom__icon,.navigation-bottom__link--active .navigation-bottom__label{color:#fff}.navigation-bottom__link:active,.navigation__menu--mobile .navigation__link:active{background-color:#2a2a2a}.navigation__menu--mobile .navigation__link--active{border-left-color:#fff}}@media(prefers-reduced-motion:reduce){.navigation__drawer,.navigation__hamburger-line,.navigation__link,.navigation-bottom__link,.navigation__overlay{transition:none;animation:none}}.loading-spinner{display:inline-flex;flex-direction:column;align-items:center;gap:var(--spacing-3)}.loading-spinner--centered{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}.loading-spinner--fullscreen,.loading-spinner__overlay{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background-color:#00000080;z-index:var(--z-index-modal);backdrop-filter:blur(4px)}.loading-spinner__circle{position:relative;display:inline-block}.loading-spinner__circle-inner{border-radius:50%;border-style:solid;animation:spinner-rotate .8s linear infinite}.loading-spinner--small .loading-spinner__circle-inner{width:24px;height:24px;border-width:3px}.loading-spinner--medium .loading-spinner__circle-inner{width:40px;height:40px;border-width:4px}.loading-spinner--large .loading-spinner__circle-inner{width:56px;height:56px;border-width:5px}.loading-spinner--primary .loading-spinner__circle-inner{border-color:var(--color-primary);border-top-color:transparent}.loading-spinner--secondary .loading-spinner__circle-inner{border-color:var(--color-text-tertiary);border-top-color:transparent}.loading-spinner--white .loading-spinner__circle-inner{border-color:#fff;border-top-color:transparent}.loading-spinner__message{margin:0;font-size:var(--font-size-sm);color:var(--color-text-secondary);text-align:center;line-height:var(--line-height-base)}.loading-spinner--fullscreen .loading-spinner__message,.loading-spinner__overlay .loading-spinner__message{color:#fff;font-weight:var(--font-weight-medium)}@keyframes spinner-rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(min-width:768px){.loading-spinner--medium .loading-spinner__circle-inner{width:48px;height:48px}.loading-spinner--large .loading-spinner__circle-inner{width:64px;height:64px;border-width:6px}.loading-spinner__message{font-size:var(--font-size-base)}}@media(prefers-color-scheme:dark){.loading-spinner--primary .loading-spinner__circle-inner{border-color:var(--color-primary);border-top-color:transparent}.loading-spinner__message{color:var(--color-text-primary)}}@media(prefers-reduced-motion:reduce){.loading-spinner__circle-inner{animation:none;border-top-color:var(--color-primary)}.loading-spinner--primary .loading-spinner__circle-inner,.loading-spinner--secondary .loading-spinner__circle-inner,.loading-spinner--white .loading-spinner__circle-inner{opacity:.6}}*{margin:0;padding:0;box-sizing:border-box}:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#000000de;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}body{margin:0;display:flex;min-width:320px;min-height:100vh}#root{width:100%;min-height:100vh}button{font-family:inherit;font-size:1em;font-weight:500;cursor:pointer;transition:background-color .25s;padding:.6em 1.2em;border-radius:8px;border:1px solid transparent}button:hover{opacity:.9}button:active{transform:scale(.98)}@media(prefers-color-scheme:dark){:root{color:#ffffffde;background-color:#242424}}