*{margin:0;padding:0;box-sizing:border-box}:root{--bg-gradient-start: #f5f7fa;--bg-gradient-end: #c3cfe2;--text-primary: #333;--text-secondary: #7f8c8d;--text-muted: #95a5a6;--surface-primary: #ffffff;--surface-secondary: #f8f9fa;--card-bg: #ffffff;--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);--shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.15);--shadow-hover: 0 12px 40px rgba(102, 126, 234, 0.4);--header-bg: var(--surface-primary);--header-title-color: #2c3e50;--header-subtitle-color: var(--text-secondary);--card-border-radius: 12px;--card-hover-translate: -5px;--btn-bg: #ff851b;--btn-bg-hover: #ff9d42;--btn-shadow: 0 2px 8px rgba(255, 133, 27, 0.3);--btn-shadow-hover: 0 4px 12px rgba(255, 133, 27, 0.5);--btn-shadow-active: 0 2px 6px rgba(255, 133, 27, 0.3);--footer-bg: var(--surface-primary);--footer-text-color: var(--text-secondary);--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--line-height: 1.6;--main-padding: 2rem 2rem 3rem;--main-max-width: 1200px;--card-padding: 1rem;--grid-gap: 1.5rem;--footer-padding: 1.5rem;--transition-speed: 0.3s;--transition-easing: ease;--logo-url: url("../../assets/web/logo.png")}@media(prefers-color-scheme: dark){:root{--bg-gradient-start: #1a1a2e;--bg-gradient-end: #16213e;--text-primary: #e4e4e7;--text-secondary: #a1a1aa;--text-muted: #71717a;--surface-primary: #27272a;--surface-secondary: #1f1f23;--card-bg: #27272a;--shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);--shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.6);--shadow-hover: 0 12px 40px rgba(255, 133, 27, 0.6);--header-bg: var(--surface-primary);--header-title-color: #f4f4f5;--header-subtitle-color: var(--text-secondary);--footer-bg: var(--surface-primary);--footer-text-color: var(--text-secondary);--logo-url: url("../../assets/web/logo_white.png")}}body{font-family:var(--font-family);line-height:var(--line-height);color:var(--text-primary);background:linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);min-height:100vh;display:flex;flex-direction:column}main{max-width:var(--main-max-width);margin:0 auto;padding:var(--main-padding);flex:1}.intro-section{text-align:center;margin-bottom:2rem;max-width:700px;margin-left:auto;margin-right:auto}.intro-section h2{font-size:1.75rem;color:var(--header-title-color);margin-bottom:.6rem;font-weight:700}.intro-section p{font-size:.95rem;color:var(--text-secondary);line-height:1.5;margin:0}.template-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:var(--grid-gap)}.template-card{background:var(--card-bg);border-radius:var(--card-border-radius);overflow:hidden;box-shadow:var(--shadow-md);transition:transform var(--transition-speed) var(--transition-easing),box-shadow var(--transition-speed) var(--transition-easing)}.template-card:hover{transform:translateY(var(--card-hover-translate));box-shadow:var(--shadow-lg)}.template-card .template-preview{width:100%;height:280px;display:flex;justify-content:center;align-items:center;padding:0;background:var(--surface-secondary);overflow:hidden;position:relative}.template-card .template-preview svg{max-width:100%;height:auto;filter:drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1))}.template-card .template-preview .template-iframe{width:100%;height:100%;border:none;display:block;transform-origin:top left}.template-card h2{font-size:1.2rem;color:var(--header-title-color);padding:.75rem 1rem .4rem}.template-card p.description{color:var(--text-secondary);padding:0 1rem;font-size:.9rem;margin-bottom:.4rem}.template-card .template-link{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:var(--card-padding);padding:.65rem 1.25rem;background:var(--btn-bg);color:#fff;text-align:center;text-decoration:none;border-radius:8px;font-weight:600;font-size:.9rem;letter-spacing:.3px;transition:all var(--transition-speed) var(--transition-easing);box-shadow:var(--btn-shadow)}.template-card .template-link::after{content:"→";font-size:1.2rem;transition:transform var(--transition-speed) var(--transition-easing)}.template-card .template-link:hover{transform:translateY(-2px);background:var(--btn-bg-hover);box-shadow:var(--btn-shadow-hover)}.template-card .template-link:hover::after{transform:translateX(3px)}.template-card .template-link:active{transform:translateY(0);box-shadow:var(--btn-shadow-active)}footer{background:var(--footer-bg);padding:var(--footer-padding);text-align:center;margin-top:auto;box-shadow:var(--shadow-sm)}footer p{color:var(--footer-text-color)}