1 line
No EOL
38 KiB
CSS
1 line
No EOL
38 KiB
CSS
:root{--primary:#6366f1;--primary-hover:#4f46e5;--primary-light:#a5b4fc;--primary-dark:#3730a3;--secondary:#64748b;--secondary-hover:#475569;--success:#10b981;--success-light:#a7f3d0;--warning:#f59e0b;--warning-light:#fef3c7;--error:#ef4444;--error-light:#fecaca;--info:#3b82f6;--info-light:#bfdbfe;--gray-50:#f8fafc;--gray-100:#f1f5f9;--gray-200:#e2e8f0;--gray-300:#cbd5e1;--gray-400:#94a3b8;--gray-500:#64748b;--gray-600:#475569;--gray-700:#334155;--gray-800:#1e293b;--gray-900:#0f172a;--text-primary:var(--gray-900);--text-secondary:var(--gray-600);--text-tertiary:var(--gray-500);--text-muted:var(--gray-400);--bg-primary:#fff;--bg-secondary:var(--gray-50);--bg-tertiary:var(--gray-100);--bg-elevated:#fff;--border-primary:var(--gray-200);--border-secondary:var(--gray-300);--border-focus:var(--primary);--space-px:1px;--space-0-5:0.125rem;--space-1:0.25rem;--space-1-5:0.375rem;--space-2:0.5rem;--space-2-5:0.625rem;--space-3:0.75rem;--space-3-5:0.875rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-9:2.25rem;--space-10:2.5rem;--space-11:2.75rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem;--space-24:6rem;--space-28:7rem;--space-32:8rem;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--text-5xl:3rem;--text-6xl:3.75rem;--text-7xl:4.5rem;--text-8xl:6rem;--text-9xl:8rem;--font-thin:100;--font-extralight:200;--font-light:300;--font-normal:400;--font-medium:500;--font-semibold:600;--font-bold:700;--font-extrabold:800;--font-black:900;--radius-none:0;--radius-sm:0.125rem;--radius-base:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--shadow-xs:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-sm:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.1),0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.1),0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.1),0 8px 10px -6px rgb(0 0 0 / 0.1);--shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.25);--shadow-inner:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--shadow-focus:0 0 0 3px rgb(99 102 241 / 0.1);--transition-all:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);--transition-fast:0.15s cubic-bezier(0.4, 0, 0.2, 1);--transition-normal:0.2s cubic-bezier(0.4, 0, 0.2, 1);--transition-slow:0.3s cubic-bezier(0.4, 0, 0.2, 1);--transition-bounce:0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);--container-max-width:1280px;--header-height:4.5rem;--content-max-width:65ch;--z-hide:-1;--z-auto:auto;--z-base:0;--z-docked:10;--z-dropdown:1000;--z-sticky:1020;--z-banner:1030;--z-overlay:1040;--z-modal:1050;--z-popover:1060;--z-skiplink:1070;--z-toast:1080;--z-tooltip:1090}[data-theme=dark]{--text-primary:var(--gray-50);--text-secondary:var(--gray-300);--text-tertiary:var(--gray-400);--text-muted:var(--gray-500);--bg-primary:var(--gray-900);--bg-secondary:var(--gray-800);--bg-tertiary:var(--gray-700);--bg-elevated:var(--gray-800);--border-primary:var(--gray-700);--border-secondary:var(--gray-600);--border-focus:var(--primary-light);--primary:#818cf8;--primary-hover:#a5b4fc;--primary-light:#c7d2fe;--primary-dark:#6366f1;--shadow-xs:0 1px 2px 0 rgb(0 0 0 / 0.3);--shadow-sm:0 1px 3px 0 rgb(0 0 0 / 0.4),0 1px 2px -1px rgb(0 0 0 / 0.4);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.4),0 2px 4px -2px rgb(0 0 0 / 0.4);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.4),0 4px 6px -4px rgb(0 0 0 / 0.4);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.4),0 8px 10px -6px rgb(0 0 0 / 0.4);--shadow-2xl:0 25px 50px -12px rgb(0 0 0 / 0.6);--shadow-focus:0 0 0 3px rgb(129 140 248 / 0.2)}*,::after,::before{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px;line-height:1.6;-webkit-text-size-adjust:100%}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-feature-settings:'cv01','cv03','cv04','cv11';font-variation-settings:'opsz' 32;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color var(--transition-normal),color var(--transition-normal);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;min-height:100vh;overflow-x:hidden}:focus{outline:2px solid var(--border-focus);outline-offset:2px}:focus:not(:focus-visible){outline:0}:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}h1,h2,h3,h4,h5,h6{font-weight:var(--font-bold);line-height:1.25;letter-spacing:-.025em;color:var(--text-primary)}h1{font-size:var(--text-4xl);font-weight:var(--font-extrabold)}h2{font-size:var(--text-3xl);font-weight:var(--font-bold)}h3{font-size:var(--text-2xl);font-weight:var(--font-semibold)}p{line-height:1.75;margin-bottom:var(--space-4)}a{color:var(--primary);text-decoration:none;transition:var(--transition-all)}a:hover{color:var(--primary-hover);text-decoration:none}.page-wrapper{min-height:100vh;display:flex;flex-direction:column;position:relative}.container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--space-6);width:100%}.main-content{flex:1;position:relative}.site-header{position:sticky;top:0;z-index:var(--z-sticky);background:rgb(255 255 255 / .8);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--border-primary);height:var(--header-height);transition:var(--transition-all)}[data-theme=dark] .site-header{background:rgb(15 23 42 / .8)}.header-content{display:flex;align-items:center;justify-content:space-between;height:var(--header-height);gap:var(--space-8)}.site-title{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary);text-decoration:none;transition:var(--transition-all);position:relative}.site-title:hover{color:var(--primary);transform:translateY(-1px)}.site-title:focus-visible{border-radius:var(--radius-md);padding:var(--space-1) var(--space-2);margin:calc(-1 * var(--space-1)) calc(-1 * var(--space-2))}.logo-icon{font-size:var(--text-2xl);filter:drop-shadow(0 2px 4px rgb(99 102 241 / .2));transition:var(--transition-all)}.site-title:hover .logo-icon{transform:rotate(-5deg) scale(1.1)}.header-nav{display:flex;align-items:center;gap:var(--space-6)}.nav-link{position:relative;display:inline-flex;align-items:center;padding:var(--space-2) var(--space-3);font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-lg);transition:var(--transition-all);white-space:nowrap}.nav-link::before{content:'';position:absolute;bottom:-2px;left:50%;width:0;height:2px;background:var(--primary);border-radius:var(--radius-full);transition:var(--transition-all);transform:translateX(-50%)}.nav-link:hover{color:var(--primary);background:var(--bg-secondary);transform:translateY(-1px)}.nav-link:hover::before{width:70%}.nav-link:focus-visible{box-shadow:var(--shadow-focus)}.dark-mode-toggle{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:2px solid var(--border-primary);border-radius:var(--radius-full);background:var(--bg-primary);color:var(--text-primary);cursor:pointer;transition:var(--transition-all);position:relative;overflow:hidden}.dark-mode-toggle:hover{background:var(--bg-secondary);border-color:var(--primary);transform:scale(1.05);box-shadow:var(--shadow-md)}.dark-mode-toggle:focus-visible{box-shadow:var(--shadow-focus)}.moon-icon,.sun-icon{transition:var(--transition-all);position:absolute}.moon-icon{display:none;transform:rotate(180deg)}[data-theme=dark] .sun-icon{display:none}[data-theme=dark] .moon-icon{display:block;transform:rotate(0)}.hero-section{position:relative;padding:var(--space-24) 0 var(--space-20);background:linear-gradient(135deg,var(--bg-primary) 0,var(--bg-secondary) 100%);overflow:hidden}.hero-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgb(99 102 241 / .1) 0,transparent 50%),radial-gradient(circle at 70% 80%,rgb(99 102 241 / .05) 0,transparent 50%);pointer-events:none}[data-theme=dark] .hero-section{background:linear-gradient(135deg,var(--bg-primary) 0,var(--bg-secondary) 100%)}[data-theme=dark] .hero-section::before{background:radial-gradient(circle at 30% 20%,rgb(129 140 248 / .15) 0,transparent 50%),radial-gradient(circle at 70% 80%,rgb(129 140 248 / .08) 0,transparent 50%)}.hero-content{text-align:center;max-width:900px;margin:0 auto;position:relative;z-index:1;animation:fadeInUp .8s ease-out}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.hero-title{font-size:clamp(var(--text-3xl), 8vw, var(--text-6xl));font-weight:var(--font-extrabold);line-height:1.1;margin:0 0 var(--space-6);color:var(--text-primary);letter-spacing:-.02em}.gradient-text{background:linear-gradient(135deg,var(--primary) 0,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}[data-theme=dark] .gradient-text{background:linear-gradient(135deg,var(--primary-light) 0,#c4b5fd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-description{font-size:clamp(var(--text-lg), 4vw, var(--text-xl));color:var(--text-secondary);margin:0 0 var(--space-10);max-width:650px;margin-left:auto;margin-right:auto;line-height:1.6}.hero-actions{display:flex;gap:var(--space-4);justify-content:center;margin-bottom:var(--space-16);flex-wrap:wrap}.hero-stats{display:flex;gap:var(--space-12);justify-content:center;flex-wrap:wrap}.stat-item{text-align:center;position:relative}.stat-item:not(:last-child)::after{content:'';position:absolute;right:calc(-1 * var(--space-6));top:50%;transform:translateY(-50%);width:1px;height:40px;background:var(--border-primary)}.stat-number{display:block;font-size:clamp(var(--text-2xl), 6vw, var(--text-4xl));font-weight:var(--font-extrabold);color:var(--primary);margin-bottom:var(--space-1);background:linear-gradient(135deg,var(--primary) 0,#8b5cf6 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:var(--text-sm);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em;font-weight:var(--font-medium)}.btn{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-8);border:2px solid transparent;border-radius:var(--radius-xl);font-size:var(--text-base);font-weight:var(--font-semibold);text-decoration:none;cursor:pointer;transition:var(--transition-all);white-space:nowrap;position:relative;overflow:hidden;text-align:center;min-width:140px;justify-content:center}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left .5s}.btn:hover::before{left:100%}.btn-primary{background:linear-gradient(135deg,var(--primary) 0,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{background:linear-gradient(135deg,var(--primary-hover) 0,var(--primary) 100%);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.btn-primary:focus-visible{box-shadow:var(--shadow-focus),var(--shadow-lg)}.btn-secondary{background:0 0;color:var(--text-primary);border:2px solid var(--border-primary)}.btn-secondary:hover{border-color:var(--primary);color:var(--primary);background:var(--bg-secondary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary:focus-visible{box-shadow:var(--shadow-focus)}.quick-nav{padding:var(--space-20) 0;background:var(--bg-primary);position:relative}.quick-nav-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-8)}.quick-nav-card{display:block;padding:var(--space-8);background:var(--bg-elevated);border:2px solid var(--border-primary);border-radius:var(--radius-2xl);text-decoration:none;transition:var(--transition-all);position:relative;overflow:hidden;box-shadow:var(--shadow-sm);backdrop-filter:blur(10px)}.quick-nav-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--primary) 0,transparent 100%);opacity:0;transition:var(--transition-all);z-index:0}.quick-nav-card:hover::before{opacity:.08}.quick-nav-card:hover{border-color:var(--primary);transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-xl)}.quick-nav-card:focus-visible{box-shadow:var(--shadow-focus),var(--shadow-lg)}.quick-nav-card>*{position:relative;z-index:1}.quick-nav-icon{font-size:var(--text-4xl);margin-bottom:var(--space-4);display:block;filter:drop-shadow(0 2px 4px rgb(0 0 0 / .1));transition:var(--transition-all)}.quick-nav-card:hover .quick-nav-icon{transform:scale(1.1) rotate(-5deg)}.quick-nav-card h3{margin:0 0 var(--space-3);font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--text-primary)}.quick-nav-card p{margin:0;color:var(--text-secondary);font-size:var(--text-base);line-height:1.6}.quick-nav-card a:hover{text-decoration:none}.section{padding:var(--space-24) 0;position:relative}.section:nth-child(2n){background:var(--bg-secondary)}.section-header{text-align:center;margin-bottom:var(--space-20);animation:fadeInUp .6s ease-out}.section-title{font-size:clamp(var(--text-3xl), 6vw, var(--text-5xl));font-weight:var(--font-extrabold);margin:0 0 var(--space-6);color:var(--text-primary);letter-spacing:-.02em}.section-description{font-size:clamp(var(--text-base), 3vw, var(--text-xl));color:var(--text-secondary);margin:0;max-width:700px;margin-inline:auto;line-height:1.7}.data-table-container{background:var(--bg-elevated);border-radius:var(--radius-2xl);box-shadow:var(--shadow-xl);border:1px solid var(--border-primary);margin:var(--space-8) 0;position:relative;overflow:hidden;backdrop-filter:blur(10px)}.table-wrapper{overflow-x:auto;overflow-y:visible;border-radius:var(--radius-2xl);-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--primary) var(--bg-secondary);scroll-behavior:smooth;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}.table-wrapper::-webkit-scrollbar{height:10px}.table-wrapper::-webkit-scrollbar-track{background:var(--bg-secondary);border-radius:var(--radius-md)}.table-wrapper::-webkit-scrollbar-thumb{background:var(--primary);border-radius:var(--radius-md);border:2px solid var(--bg-secondary)}.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--primary-hover)}table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:600px}td,th{padding:var(--space-4) var(--space-6);text-align:left;border-bottom:1px solid var(--border-primary);white-space:nowrap;transition:all var(--transition-normal);min-height:44px}@media (width <= 768px){td,th{padding:var(--space-3) var(--space-4);font-size:var(--text-xs);min-height:48px}td,th{scroll-snap-align:start}td:first-child,th:first-child{box-shadow:2px 0 4px rgb(0 0 0 / .1);border-right:1px solid var(--border-primary)}}th{background:var(--primary);color:#fff;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-xs);position:sticky;top:0;z-index:var(--z-sticky)}th:first-child{position:sticky;left:0;z-index:calc(var(--z-sticky) + 1);background:var(--primary)}tr:hover{background:var(--bg-secondary)}td{transition:all var(--transition-fast)}td:first-child{font-weight:var(--font-medium);position:sticky;left:0;background:var(--bg-primary);z-index:1}tr:hover td:first-child{background:var(--bg-secondary)}.status-cell{text-align:center!important}.status-indicator{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-full);transition:all var(--transition-fast)}.status-indicator.supported{background:rgb(14 236 162 / .1);color:var(--success)}.status-indicator.not-supported{background:rgb(211 29 29 / .1);color:var(--error)}.status-indicator svg{width:16px;height:16px}.search-section{margin-bottom:var(--space-8)}.search-container.enhanced{position:relative;max-width:500px;margin:0 auto}.search-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--text-tertiary);z-index:1}.search-input{width:100%;padding:var(--space-4) var(--space-12) var(--space-4) var(--space-12);border:2px solid var(--border-primary);border-radius:var(--radius-full);font-size:var(--text-base);background:var(--bg-primary);color:var(--text-primary);transition:all var(--transition-fast);outline:0}.search-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgb(99 102 241 / .1)}.clear-icon{position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);background:0 0;border:none;color:var(--text-tertiary);cursor:pointer;padding:var(--space-1);border-radius:var(--radius-md);transition:all var(--transition-fast);opacity:0;visibility:hidden}.search-input:focus+.clear-icon,.search-input:not(:placeholder-shown)+.clear-icon{opacity:1;visibility:visible}.clear-icon:hover{background:var(--bg-secondary);color:var(--text-primary)}.search-results{text-align:center;padding:var(--space-2) 0;color:var(--text-secondary);font-size:var(--text-sm);margin-bottom:var(--space-4)}.compare-controls{display:flex;align-items:end;gap:var(--space-6);margin-bottom:var(--space-12);flex-wrap:wrap}.compare-select-group{flex:1;min-width:200px}.compare-select-group label{display:block;margin-bottom:var(--space-2);font-weight:var(--font-medium);color:var(--text-primary)}.select-wrapper{position:relative}.select-wrapper::after{content:'';position:absolute;right:var(--space-4);top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid var(--text-tertiary);pointer-events:none}select{width:100%;padding:var(--space-3) var(--space-8) var(--space-3) var(--space-4);border:2px solid var(--border-primary);border-radius:var(--radius-lg);background:var(--bg-primary);color:var(--text-primary);font-size:var(--text-base);cursor:pointer;appearance:none;transition:all var(--transition-fast)}select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px rgb(99 102 241 / .1)}.compare-vs{flex-shrink:0;font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--primary);background:var(--bg-secondary);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:2px solid var(--border-primary);margin-bottom:var(--space-2)}#compare-table-container{position:relative;background:var(--bg-primary);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);border:1px solid var(--border-primary);margin-top:var(--space-6);display:none}.comparison-visible{display:block!important;animation:slideIn .3s ease-out}.comparison-hiding{animation:slideOut .3s ease-in}@keyframes slideIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}.comparison-header{padding:var(--space-6);border-bottom:1px solid var(--border-primary);background:var(--bg-secondary);border-radius:var(--radius-xl) var(--radius-xl) 0 0}.comparison-header h3{margin:0 0 var(--space-4);font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);text-align:center}.comparison-stats{display:flex;gap:var(--space-6);justify-content:center;margin-bottom:var(--space-6);flex-wrap:wrap}.comparison-stats .stat{text-align:center;background:var(--bg-primary);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--border-primary);min-width:100px}.stat-label{display:block;font-size:var(--text-xs);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-1)}.stat-value{display:block;font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--primary)}.comparison-actions{display:flex;justify-content:center;gap:var(--space-3)}.comparison-filters{padding:var(--space-4) var(--space-6);background:var(--bg-tertiary);border-bottom:1px solid var(--border-primary);display:flex;gap:var(--space-6);justify-content:center;flex-wrap:wrap}.filter-option{display:flex;align-items:center;gap:var(--space-2);cursor:pointer;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary)}.filter-option input[type=radio]{margin:0}.filter-results{text-align:center;padding:var(--space-2) 0;color:var(--text-secondary);font-size:var(--text-sm);background:var(--bg-secondary);border-bottom:1px solid var(--border-primary)}.comparison-table{width:100%;border-collapse:collapse;font-size:var(--text-sm);min-width:700px}.comparison-table td,.comparison-table th{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--border-primary);text-align:center}.comparison-table td:first-child,.comparison-table th:first-child{text-align:left;font-weight:var(--font-medium)}.comparison-table th{background:var(--primary);color:#fff;font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:.05em;font-size:var(--text-xs);position:sticky;top:0;z-index:var(--z-sticky)}.provider-header{position:relative}.comparison-row.both-supported{background:rgb(16 185 129 / .05)}.comparison-row.provider1-only{background:rgb(59 130 246 / .05)}.comparison-row.provider2-only{background:rgb(168 85 247 / .05)}.comparison-row.neither-supported{background:rgb(239 68 68 / .05)}.status-badge{display:inline-block;padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-medium);text-transform:uppercase;letter-spacing:.05em}.status-badge.both-supported{background:rgb(16 185 129 / .1);color:var(--success)}.status-badge.provider1-only{background:rgb(59 130 246 / .1);color:var(--info)}.status-badge.provider2-only{background:rgb(168 85 247 / .1);color:#8b5cf6}.status-badge.neither-supported{background:rgb(239 68 68 / .1);color:var(--error)}#close-compare{background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-2) var(--space-4);display:flex;align-items:center;gap:var(--space-2);cursor:pointer;transition:all var(--transition-fast);font-size:var(--text-sm);color:var(--text-primary);font-weight:var(--font-medium)}#close-compare:hover{background:var(--error);color:#fff;border-color:var(--error);transform:translateY(-1px)}.empty-state{text-align:center;padding:var(--space-16)}.empty-state-icon{font-size:var(--text-5xl);margin-bottom:var(--space-4)}.empty-state h3{margin:0 0 var(--space-2);font-size:var(--text-xl);color:var(--text-primary)}.empty-state p{margin:0;color:var(--text-secondary)}.warning-state{text-align:center;padding:var(--space-12);background:rgb(245 158 11 / .05);border-radius:var(--radius-lg);border:1px solid rgb(245 158 11 / .2)}.warning-icon{font-size:var(--text-4xl);margin-bottom:var(--space-3)}.warning-state h3{margin:0 0 var(--space-2);color:var(--warning)}.warning-state p{margin:0;color:var(--text-secondary)}.alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);margin:var(--space-4) 0}.alert-info{background:rgb(59 130 246 / .1);border:1px solid rgb(59 130 246 / .2);color:var(--info)}.alert-icon{flex-shrink:0;margin-top:2px}.referral-section{margin-block:var(--space-16);padding:var(--space-8);background:var(--bg-secondary);border-radius:var(--radius-xl);border:1px solid var(--border-primary);text-align:center}.referral-header h3{margin:0 0 var(--space-2);color:var(--text-primary);font-size:var(--text-2xl);font-weight:var(--font-bold)}.referral-header p{margin:0 auto var(--space-6);color:var(--text-secondary);max-width:var(--content-max-width)}.referral-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4);justify-items:center}.referral-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4) var(--space-3);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);text-decoration:none;transition:var(--transition-all);width:100%;max-width:200px;box-shadow:var(--shadow-sm)}.referral-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-md)}.service-name{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--text-base)}.referral-badge{font-size:var(--text-xs);color:var(--primary);background:rgb(99 102 241 / .1);padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);font-weight:var(--font-medium)}.service-name{font-weight:var(--font-medium);color:var(--text-primary)}.status-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}.status-card{display:block;padding:var(--space-6);background:var(--bg-primary);border:1px solid var(--border-primary);border-radius:var(--radius-xl);text-decoration:none;transition:all var(--transition-normal)}.status-card:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--shadow-lg)}.status-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}.service-status-indicator{width:12px;height:12px;border-radius:var(--radius-full);background:var(--success);box-shadow:0 0 0 2px rgb(16 185 129 / .2)}.status-indicator.online{background:var(--success);box-shadow:0 0 0 2px rgb(16 185 129 / .2)}.status-card p{margin:0;color:var(--text-secondary);font-size:var(--text-sm)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-12);color:var(--text-secondary);min-height:200px}.loading-spinner{width:32px;height:32px;border:3px solid var(--border-primary);border-top:3px solid var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin-bottom:var(--space-4)}.skeleton{background:linear-gradient(90deg,var(--bg-secondary) 0,var(--bg-tertiary) 50%,var(--bg-secondary) 100%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--radius-md)}.skeleton-text{height:1em;margin-bottom:var(--space-2)}.skeleton-text:last-child{width:70%}.skeleton-avatar{width:40px;height:40px;border-radius:var(--radius-full)}.skeleton-card{height:120px;border-radius:var(--radius-lg);margin-bottom:var(--space-4)}@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.site-footer{background:var(--bg-secondary);border-top:1px solid var(--border-primary);padding:var(--space-16) 0 var(--space-8);margin-top:auto}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-8);margin-bottom:var(--space-8)}.footer-section h4{margin:0 0 var(--space-4);font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary)}.footer-section p{margin:0;color:var(--text-secondary)}.footer-section ul{list-style:none;padding:0;margin:0}.footer-section li{margin-bottom:var(--space-2)}.footer-section a{color:var(--text-secondary);text-decoration:none;transition:color var(--transition-fast)}.footer-section a:hover{color:var(--primary)}.footer-bottom{text-align:center;padding-top:var(--space-8);border-top:1px solid var(--border-primary)}.footer-bottom p{margin:0;color:var(--text-tertiary);font-size:var(--text-sm)}.footer-bottom a{color:var(--primary);text-decoration:none}.back-to-top{position:fixed;bottom:var(--space-6);right:var(--space-6);width:48px;height:48px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-lg);transition:all var(--transition-normal);opacity:0;visibility:hidden;transform:translateY(20px);z-index:var(--z-docked)}.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}.back-to-top:hover{background:var(--primary-hover);transform:translateY(-2px);box-shadow:var(--shadow-xl)}.loading-overlay{position:absolute;inset:0;background:rgb(255 255 255 / .9);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:var(--z-modal);opacity:0;visibility:hidden;transition:all var(--transition-normal)}[data-theme=dark] .loading-overlay{background:rgb(15 23 42 / .9)}.loading-overlay--visible{opacity:1;visibility:visible}.loading-overlay--hiding{opacity:0}.loading-content{text-align:center;color:var(--text-primary)}.spinner-ring{width:40px;height:40px;border:4px solid var(--border-primary);border-top:4px solid var(--primary);border-radius:var(--radius-full);animation:spin 1s linear infinite;margin:0 auto var(--space-3)}.loading-text{margin:0;font-size:var(--text-sm);color:var(--text-secondary)}@media (width <= 1024px){.container{padding:0 var(--space-4)}.comparison-stats{gap:var(--space-4)}.comparison-stats .stat{min-width:80px;padding:var(--space-2) var(--space-3)}}@media (width <= 768px){.header-nav{display:none}.hero-title{font-size:var(--text-3xl)}.hero-description{font-size:var(--text-lg)}.hero-actions{flex-direction:column;align-items:center}.hero-stats{gap:var(--space-6)}.section-title{font-size:var(--text-3xl)}.compare-controls{flex-direction:column}.compare-vs{align-self:center;margin:var(--space-2) 0}.quick-nav-grid{grid-template-columns:1fr}.footer-content{grid-template-columns:1fr;text-align:center}.data-table-container{margin:var(--space-2) calc(-1 * var(--space-4));border-radius:0;border-left:none;border-right:none;box-shadow:0 -1px 0 var(--border-primary),0 1px 0 var(--border-primary)}.table-wrapper{border-radius:0;background:linear-gradient(90deg,var(--bg-primary) 70%,transparent),linear-gradient(90deg,transparent,var(--bg-primary) 70%),linear-gradient(90deg,var(--border-primary),transparent 16px),linear-gradient(270deg,var(--border-primary),transparent 16px);background-position:left center,right center,left center,right center;background-repeat:no-repeat;background-size:20px 100%,20px 100%,10px 100%,10px 100%;background-attachment:local,local,scroll,scroll}table{font-size:var(--text-xs);min-width:500px}td,th{padding:var(--space-2) var(--space-3)}td:first-child,th:first-child{min-width:120px;max-width:150px;white-space:normal;word-break:break-word}.comparison-header{padding:var(--space-4)}.comparison-header h3{font-size:var(--text-lg)}.comparison-stats{flex-direction:column;gap:var(--space-3)}.comparison-stats .stat{margin:0 auto;max-width:200px}.comparison-filters{flex-direction:column;align-items:center;gap:var(--space-3)}.comparison-table{min-width:500px}.comparison-table td,.comparison-table th{padding:var(--space-2) var(--space-3);font-size:var(--text-xs)}td,th{padding:var(--space-3) var(--space-4)}.header-content{gap:var(--space-4)}.nav-link{padding:var(--space-1-5) var(--space-2);font-size:var(--text-xs)}}@media (width <= 480px){.hero-section{padding:var(--space-16) 0 var(--space-12)}.section{padding:var(--space-12) 0}.btn{width:100%;justify-content:center}.hero-stats{flex-direction:column;gap:var(--space-4)}.comparison-stats{gap:var(--space-2)}.comparison-stats .stat{min-width:60px;padding:var(--space-1) var(--space-2)}.stat-value{font-size:var(--text-lg)}.stat-label{font-size:10px}table{min-width:400px}td:first-child,th:first-child{min-width:100px;max-width:120px}.stat-item:not(:last-child)::after{display:none}}@media (width <= 640px){.container{padding:0 var(--space-4)}.hero-actions{flex-direction:column;align-items:center;gap:var(--space-3)}.hero-stats{gap:var(--space-8)}.nav-link{padding:var(--space-1-5) var(--space-2);font-size:var(--text-xs)}.btn{width:100%;max-width:280px;padding:var(--space-4) var(--space-6)}}@media print{#close-compare,.back-to-top,.comparison-actions,.comparison-filters,.dark-mode-toggle,.hero-section,.quick-nav,.referral-section,.site-footer,.site-header{display:none!important}.section{page-break-inside:avoid}.data-table-container{box-shadow:none;border:1px solid #000}.table-wrapper{overflow:visible}table{min-width:auto}td,th{border:1px solid #000}}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}html{scroll-behavior:auto}}@media (prefers-contrast:high){:root{--border-primary:#000;--text-secondary:#000}[data-theme=dark]{--border-primary:#fff;--text-secondary:#fff}}@media (hover:none) and (pointer:coarse){.btn,[role=button],button{min-height:48px;min-width:48px;padding:var(--space-3) var(--space-5)}.comparison-service:hover,.status-card:hover,tr:hover{background:initial;transform:none}.btn:active,[role=button]:active,button:active{transform:scale(.98);transition:transform .1s ease}}@media (width <= 768px){.mobile-card-view .table-wrapper{display:none}.mobile-card-view .cards-container{display:grid;gap:var(--space-4);padding:var(--space-4)}.service-card{background:var(--bg-elevated);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-md);border:1px solid var(--border-primary);transition:all var(--transition-normal)}.service-card:active{transform:scale(.98);box-shadow:var(--shadow-sm)}.service-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);padding-bottom:var(--space-3);border-bottom:1px solid var(--border-primary)}.service-card-title{font-weight:var(--font-semibold);color:var(--text-primary);font-size:var(--text-lg)}.service-card-providers{display:grid;grid-template-columns:repeat(auto-fit,minmax(80px,1fr));gap:var(--space-3)}.provider-status{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-2);border-radius:var(--radius-md);background:var(--bg-secondary)}.provider-name{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:var(--space-1)}.provider-support{width:20px;height:20px}}@media (width <= 768px){.pull-to-refresh{position:relative;overflow-y:auto;-webkit-overflow-scrolling:touch}.pull-to-refresh-indicator{position:absolute;top:-60px;left:50%;transform:translateX(-50%);padding:var(--space-4);background:var(--bg-elevated);border-radius:var(--radius-full);box-shadow:var(--shadow-lg);opacity:0;transition:all var(--transition-normal)}.pull-to-refresh.pulling .pull-to-refresh-indicator{opacity:1;top:var(--space-4)}}.search-container{position:relative}.search-suggestions{position:absolute;top:100%;left:0;right:0;background:var(--bg-elevated);border:1px solid var(--border-primary);border-top:none;border-radius:0 0 var(--radius-lg) var(--radius-lg);box-shadow:var(--shadow-lg);max-height:200px;overflow-y:auto;z-index:var(--z-dropdown);display:none}.search-suggestions.visible{display:block;animation:slideInDown .2s ease}.search-suggestion{padding:var(--space-3) var(--space-4);cursor:pointer;border-bottom:1px solid var(--border-primary);transition:background-color var(--transition-fast)}.search-suggestion.highlighted,.search-suggestion:hover{background:var(--bg-secondary)}.search-suggestion:last-child{border-bottom:none}@keyframes slideInDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.btn.loading{position:relative;color:transparent;pointer-events:none}.btn.loading::after{content:'';position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:var(--radius-full);animation:spin 1s linear infinite}.focus-trap{outline:0}.focus-visible{outline:2px solid var(--primary);outline-offset:2px}.toast-container{position:fixed;top:var(--space-4);right:var(--space-4);z-index:var(--z-modal);pointer-events:none}.toast{background:var(--bg-elevated);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:var(--space-4) var(--space-5);margin-bottom:var(--space-3);box-shadow:var(--shadow-xl);max-width:300px;pointer-events:auto;animation:slideInRight .3s ease}.toast.success{border-left:4px solid var(--success)}.toast.error{border-left:4px solid var(--error)}.toast.warning{border-left:4px solid var(--warning)}.toast.info{border-left:4px solid var(--info)}@keyframes slideInRight{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}.virtual-scroll-container{position:relative;overflow-y:auto;will-change:scroll-position}.virtual-scroll-content{position:relative}.virtual-scroll-item{position:absolute;left:0;right:0;will-change:transform}.gpu-accelerated{transform:translateZ(0);will-change:transform}.contain-layout{contain:layout}.contain-style{contain:style}.contain-size{contain:size}@media (width <= 768px){.mobile-nav-toggle{display:block;position:fixed;bottom:var(--space-6);right:var(--space-6);width:56px;height:56px;border-radius:var(--radius-full);background:var(--primary);color:#fff;border:none;box-shadow:var(--shadow-xl);z-index:var(--z-floating);transition:all var(--transition-normal)}.mobile-nav-toggle:active{transform:scale(.9)}.mobile-nav-menu{position:fixed;bottom:80px;right:var(--space-6);background:var(--bg-elevated);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);border:1px solid var(--border-primary);opacity:0;transform:scale(.8) translateY(20px);transition:all var(--transition-normal);pointer-events:none;z-index:var(--z-floating)}.mobile-nav-menu.visible{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}.mobile-nav-item{display:block;padding:var(--space-4) var(--space-5);color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--border-primary);transition:background-color var(--transition-fast)}.mobile-nav-item:hover{background:var(--bg-secondary)}.mobile-nav-item:last-child{border-bottom:none}}@supports (container-type:inline-size){.comparison-container{container-type:inline-size}@container (width < 500px){.comparison-selectors{flex-direction:column}.compare-vs{order:-1;align-self:center}}}.scroll-indicator{position:fixed;top:0;left:0;width:100%;height:3px;background:var(--bg-secondary);z-index:var(--z-sticky)}.scroll-indicator-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));transition:width var(--transition-fast)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-16) var(--space-8);text-align:center;color:var(--text-secondary)}.empty-state-icon{width:64px;height:64px;margin-bottom:var(--space-6);opacity:.5}.empty-state-title{font-size:var(--text-xl);font-weight:var(--font-semibold);color:var(--text-primary);margin-bottom:var(--space-3)}.empty-state-description{font-size:var(--text-base);line-height:1.6;max-width:400px} |