:root{--color-primary: #0077b6;--color-primary-dark: #023e8a;--color-secondary: #90e0ef;--color-background: #f8f9fa;--color-surface: #ffffff;--color-text: #1a1a2e;--color-text-secondary: #6c757d;--color-border: #dee2e6;--color-error: #dc3545;--color-warning: #ffc107;--color-success: #28a745;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--radius: 8px;--radius-lg: 12px;--transition: .2s ease-in-out}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background-color:var(--color-background);color:var(--color-text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;display:flex;flex-direction:column}*:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.skip-link{position:absolute;top:-100%;left:50%;transform:translate(-50%);background:var(--color-primary-dark);color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius);z-index:1000;text-decoration:none;font-weight:600;transition:top .2s ease}.skip-link:focus{top:.5rem}.offline-banner{background-color:var(--color-warning);color:var(--color-text);text-align:center;padding:.5rem 1rem;font-size:.875rem;font-weight:500;position:sticky;top:0;z-index:100;animation:slideDown .3s ease-out}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.header{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;padding:1.5rem 2rem;text-align:center;box-shadow:var(--shadow-md);position:relative}.header h1{font-size:1.75rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.25rem}.header-subtitle{font-size:.875rem;opacity:.85;font-weight:400}.main{flex:1;max-width:640px;margin:2rem auto;padding:0 1.5rem;text-align:center}.main h2{font-size:1.5rem;margin-bottom:.5rem;color:var(--color-primary-dark)}.main p{color:var(--color-text-secondary);margin-bottom:1.5rem}.btn-primary,.main button{background-color:var(--color-primary);color:#fff;border:none;padding:.625rem 1.5rem;font-size:1rem;font-weight:500;border-radius:var(--radius);cursor:pointer;transition:background-color var(--transition),transform var(--transition),box-shadow var(--transition);box-shadow:var(--shadow-sm)}.btn-primary:hover,.main button:hover{background-color:var(--color-primary-dark);box-shadow:var(--shadow-md)}.btn-primary:active,.main button:active{transform:scale(.98)}.click-feedback{margin-top:1rem;color:var(--color-success);font-weight:500;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.loading-skeleton{display:flex;flex-direction:column;gap:1rem;padding:2rem 0}.skeleton{background:linear-gradient(90deg,var(--color-border) 25%,var(--color-secondary) 50%,var(--color-border) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius)}.skeleton-title{height:2rem;width:60%;margin:0 auto}.skeleton-text{height:1rem;width:80%;margin:0 auto}.skeleton-button{height:2.5rem;width:120px;margin:0 auto}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.footer{text-align:center;padding:1rem;color:var(--color-text-secondary);font-size:.875rem;border-top:1px solid var(--color-border);background-color:var(--color-surface)}@media (max-width: 480px){.header{padding:1rem}.header h1{font-size:1.5rem}.main{padding:0 1rem}}@media (forced-colors: active){.skeleton{border:2px solid CanvasText;background:transparent}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#1a1a2e;background-color:#f8f9fa;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%}a{text-decoration:none;color:#0077b6;transition:color .2s ease}a:hover{color:#005f8f}a:focus-visible{outline:2px solid #0077b6;outline-offset:2px;border-radius:2px}button{font-family:inherit;cursor:pointer;border:none;background:none;transition:opacity .2s ease,transform .1s ease}button:hover{opacity:.85}button:active{transform:scale(.98)}button:focus-visible{outline:2px solid #0077b6;outline-offset:2px;border-radius:2px}.skip-link{position:absolute;top:-100%;left:50%;transform:translate(-50%);padding:8px 16px;background:#0077b6;color:#fff;border-radius:0 0 4px 4px;z-index:9999;font-size:14px;transition:top .2s ease}.skip-link:focus{top:0}img{max-width:100%;height:auto;display:block}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (prefers-color-scheme: dark){:root{color:#f8f9fa;background-color:#121212}a{color:#4db6e0}a:hover{color:#7dd3f0}a:focus-visible,button:focus-visible{outline-color:#4db6e0}}