/* * Promptiv - Production CSS Bundle * Generated:2025-08-06T01:31:05.135Z * Modules:7 */ /* === STYLES/VARIABLES.CSS === */ :root {--brand:#3264ff;--brand-dark:#244186;--brand-light:#f3f6ff;--bg:#f5f7fa;--text:#181d2b;--subtext:#3e4658;--muted:#6b7280;--card-bg:#fff;--error:#dc2626;--concise:#bcc8fa;--creative:#ffe3c0;--analytical:#cbf4e1;--card-shadow:0 2px 24px rgba(40,54,100,.10),0 0.5px 1.5px rgba(0,0,0,.03);--card-shadow-hover:0 8px 40px rgba(50,100,255,0.13),0 0.5px 1.5px rgba(0,0,0,.03);--enhanced-shadow:0 20px 40px rgba(50,100,255,0.08),0 8px 16px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.9);--button-shadow:0 8px 24px rgba(50,100,255,0.25),0 2px 8px rgba(50,100,255,0.15);--button-shadow-hover:0 12px 32px rgba(50,100,255,0.3),0 4px 12px rgba(50,100,255,0.2);--tool-bg-gradient:linear-gradient(135deg,#f8faff 0%,#ffffff 50%,#f3f6ff 100%);--title-gradient:linear-gradient(135deg,var(--text) 0%,var(--brand) 100%);--button-gradient:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);--button-gradient-hover:linear-gradient(135deg,var(--brand-dark) 0%,#1a2c5e 100%);--enhanced-border-gradient:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--brand),var(--brand-dark)) border-box;--container-padding:0 2vw;--section-padding:3rem 0 2rem 0;--card-padding:2.3rem 2.3rem 2rem 2.3rem;--enhanced-card-padding:3rem min(3rem,5vw) 2.8rem min(3rem,5vw);--font-family:'Inter',system-ui,Arial,sans-serif;--line-height-base:1.6;--font-size-base:16px;--fs-hero:2.8rem;--fs-tool-title:2.5rem;--fs-section-title:2rem;--fs-card-title:1.5rem;--fs-body:1rem;--fs-small:0.9rem;--fw-normal:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-extrabold:800;--border-radius-sm:10px;--border-radius:14px;--border-radius-lg:20px;--border-radius-xl:32px;--transition-fast:0.18s ease;--transition-medium:0.3s ease;--transition-slow:0.5s ease;--z-skip-link:1000;--z-navbar:100;--z-overlay:50;--z-card:1;} body.dark {--bg:#191c26;--text:#f7fafc;--subtext:#c1c7d7;--muted:#8892b0;--card-bg:#23273b;--brand-light:#2a3548;--card-shadow:0 2px 24px rgba(0,0,0,.20),0 0.5px 1.5px rgba(0,0,0,.09);--card-shadow-hover:0 8px 40px rgba(50,100,255,0.13),0 0.5px 1.5px rgba(0,0,0,.03);--enhanced-shadow:0 20px 40px rgba(0,0,0,0.25),0 8px 16px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.05);--tool-bg-gradient:linear-gradient(135deg,var(--bg) 0%,#1e2332 50%,var(--card-bg) 100%);--title-gradient:linear-gradient(135deg,var(--text) 0%,#4f7eff 100%);--enhanced-border-gradient:linear-gradient(var(--card-bg),var(--card-bg)) padding-box,linear-gradient(135deg,var(--brand),var(--brand-dark)) border-box;} /* === STYLES/BASE.CSS === */ * {box-sizing:border-box;} html {overflow-x:hidden;} body {background:var(--bg);color:var(--text);margin:0;padding:0;font-family:var(--font-family);min-height:100vh;width:100%;max-width:100vw;overflow-x:hidden;line-height:var(--line-height-base);font-size:var(--font-size-base);} .visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .skip-link {position:absolute;top:-40px;left:6px;background:var(--brand);color:white;padding:8px;text-decoration:none;border-radius:4px;z-index:var(--z-skip-link);} .skip-link:focus {top:6px;} *:focus {outline:2px solid var(--brand);outline-offset:2px;} button:focus,input:focus,textarea:focus,select:focus,a:focus {outline:2px solid var(--brand);outline-offset:2px;} body.dark button:focus,body.dark input:focus,body.dark textarea:focus,body.dark select:focus,body.dark a:focus {outline:2px solid #4f7eff;outline-offset:2px;} h1,h2,h3,h4,h5,h6 {margin:0;font-weight:var(--fw-bold);line-height:1.2;} p {margin:0 0 1rem 0;} .container {max-width:1100px;margin:0 auto;padding:var(--container-padding);width:100%;box-sizing:border-box;} /* === STYLES/COMPONENTS.CSS === */ .navbar {background:var(--card-bg);box-shadow:0 2px 8px rgba(40,54,100,0.04);padding:0;position:sticky;top:0;z-index:var(--z-navbar);min-height:64px;} .nav-row {display:flex;align-items:center;justify-content:space-between;min-height:64px;padding:0.75rem 0;} .branding {display:flex;align-items:center;gap:0.75rem;} .brand-logo {width:32px;height:32px;} .brand-name {font-size:1.5rem;font-weight:var(--fw-extrabold);color:var(--text);text-decoration:none;} .nav-links {display:flex;gap:2rem;align-items:center;} .nav-links a {text-decoration:none;color:var(--subtext);font-weight:var(--fw-medium);transition:color var(--transition-fast);} .nav-links a:hover {color:var(--brand);} .nav-actions {display:flex;gap:1rem;align-items:center;} .dark-mode-btn {background:none;border:none;font-size:1.25rem;cursor:pointer;padding:0.5rem;border-radius:50%;transition:filter var(--transition-fast);} .dark .dark-mode-btn {color:#ffcf32;} .nav-login {color:var(--subtext);text-decoration:none;font-weight:var(--fw-medium);padding:0.5rem 1rem;transition:color var(--transition-fast);} .nav-login:hover {color:var(--brand);} .nav-signup {background:var(--brand);color:white;text-decoration:none;padding:0.75rem 1.25rem;border-radius:var(--border-radius);font-weight:var(--fw-semibold);transition:background var(--transition-fast);} .nav-signup:hover {background:var(--brand-dark);} .hero {text-align:center;padding:var(--section-padding);} .headline {font-size:var(--fs-hero);font-weight:var(--fw-extrabold);color:var(--text);margin-bottom:1.5rem;line-height:1.1;letter-spacing:-0.02em;} .subheadline {font-size:1.25rem;color:var(--subtext);margin-bottom:2rem;max-width:700px;margin-left:auto;margin-right:auto;font-weight:var(--fw-normal);} .hero-features {display:flex;justify-content:center;gap:2rem;margin-bottom:2rem;flex-wrap:wrap;} .feature-badge {display:flex;align-items:center;gap:0.5rem;background:var(--card-bg);padding:0.75rem 1.5rem;border-radius:var(--border-radius-lg);box-shadow:var(--card-shadow);font-weight:var(--fw-semibold);color:var(--text);} .feature-icon {font-size:1.25rem;} .beta-badge {display:inline-block;background:var(--brand-light);color:var(--brand);padding:0.75rem 1.5rem;border-radius:var(--border-radius-lg);font-weight:var(--fw-semibold);margin-top:1rem;font-size:var(--fs-small);} .prompt-section {width:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;padding:var(--section-padding);} .prompt-section.main-tool {background:var(--tool-bg-gradient);padding:4rem 0 4rem 0;margin:0;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;} body.dark .prompt-section.main-tool {background:var(--tool-bg-gradient);} .prompt-section.main-tool::before {content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%,rgba(50,100,255,0.05) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(50,100,255,0.08) 0%,transparent 50%);pointer-events:none;} .tool-header {text-align:center;margin:0 auto 3rem auto;position:relative;z-index:var(--z-card);width:100%;max-width:800px;} .tool-title {font-size:var(--fs-tool-title);font-weight:var(--fw-extrabold);background:var(--title-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 0.8rem 0;letter-spacing:-0.02em;} body.dark .tool-title {background:var(--title-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .tool-subtitle {font-size:1.2rem;color:var(--subtext);margin:0;font-weight:var(--fw-medium);} .prompt-card {background:var(--card-bg);border-radius:var(--border-radius-xl);box-shadow:var(--card-shadow);padding:var(--card-padding);margin-bottom:2.2rem;max-width:500px;width:100%;display:flex;flex-direction:column;align-items:center;} .prompt-card.enhanced {max-width:700px;width:100%;padding:var(--enhanced-card-padding);background:#ffffff;box-shadow:var(--enhanced-shadow);border:1px solid rgba(50,100,255,0.15);position:relative;z-index:var(--z-card);box-sizing:border-box;margin:0 auto;} body.dark .prompt-card.enhanced {background:var(--card-bg);box-shadow:var(--enhanced-shadow);border:1px solid rgba(50,100,255,0.3);} .prompt-card.enhanced::before {content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;background:linear-gradient(135deg,var(--brand),var(--brand-dark),var(--brand));border-radius:var(--border-radius-xl);z-index:-1;opacity:0.1;} #prompt {font-size:1.13rem;width:100%;min-height:90px;border:1.5px solid var(--brand);border-radius:var(--border-radius);padding:1.25em 1em;font-family:inherit;background:var(--brand-light);margin-bottom:1.3em;color:var(--text);resize:vertical;transition:border-color 0.2s;} .prompt-card.enhanced #prompt {min-height:140px;font-size:1.18rem;padding:1.8em 1.5em;border:2px solid transparent;background:var(--enhanced-border-gradient);border-radius:var(--border-radius);font-weight:var(--fw-normal);line-height:1.5;transition:all var(--transition-medium);} body.dark .prompt-card.enhanced #prompt {background:var(--enhanced-border-gradient);color:var(--text);} #prompt:focus {outline:none;border-color:var(--brand-dark);} .main-btn {background:var(--brand);color:#fff;border:none;border-radius:var(--border-radius);font-size:1.19rem;padding:0.9em 0;font-weight:var(--fw-bold);width:100%;max-width:410px;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 8px rgba(44,88,255,0.08);display:block;text-align:center;min-height:44px;line-height:1.4;} .main-btn.enhanced-btn {font-size:1.3rem;padding:1.2em 2em;max-width:500px;background:var(--button-gradient);box-shadow:var(--button-shadow);font-weight:var(--fw-extrabold);border-radius:var(--border-radius-lg);position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,0.1);min-height:52px;} .main-btn.enhanced-btn::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left var(--transition-slow);} .main-btn.enhanced-btn:hover::before {left:100%;} .main-btn:hover {background:var(--brand-dark);} .main-btn.enhanced-btn:hover {background:var(--button-gradient-hover);transform:translateY(-2px);box-shadow:var(--button-shadow-hover);} /* === STYLES/FEATURES.CSS === */ .spinner {margin:2rem auto;padding:0;display:flex;justify-content:center;align-items:center;width:100%;position:relative;} .progress-container {max-width:500px;margin:0 auto;padding:2rem;background:var(--card-bg);border-radius:var(--border-radius-lg);box-shadow:var(--card-shadow);text-align:center;} .overall-progress {margin-bottom:2rem;text-align:center;} .progress-bar {width:100%;height:8px;background:#e0e7ff;border-radius:4px;overflow:hidden;margin-bottom:1rem;} body.dark .progress-bar {background:rgba(255,255,255,0.1);} .progress-fill {height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-dark));border-radius:4px;transition:width var(--transition-medium);width:0%;} .progress-text {font-size:1.1rem;font-weight:var(--fw-semibold);color:var(--text);margin-bottom:0.5rem;} .variant-progress {display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;} .variant-item {display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:1rem;background:var(--bg);border-radius:var(--border-radius-sm);transition:all var(--transition-medium);} .variant-icon {font-size:1.5rem;opacity:0.5;transition:opacity var(--transition-medium);} .variant-label {font-size:var(--fs-small);font-weight:var(--fw-semibold);color:var(--subtext);} .variant-status {font-size:0.8rem;color:var(--muted);text-align:center;min-height:1.2rem;transition:color var(--transition-medium);} .variant-status.active {color:var(--brand);font-weight:var(--fw-semibold);} .variant-item:has(.variant-status.active) .variant-icon {opacity:1;animation:pulse 1.5s ease-in-out infinite;} @keyframes pulse {0%,100% {transform:scale(1);} 50% {transform:scale(1.1);}} .error-message {color:var(--error);font-weight:var(--fw-semibold);margin:1.1em 0 0.4em 0;text-align:center;min-height:22px;} .examples-section {padding:var(--section-padding);background:var(--bg);} .examples-container {max-width:1000px;margin:0 auto;padding:var(--container-padding);} .examples-title {font-size:var(--fs-section-title);font-weight:var(--fw-extrabold);text-align:center;margin-bottom:2rem;color:var(--text);} .example-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin-bottom:2rem;} .example-card {background:var(--card-bg);border-radius:var(--border-radius-lg);padding:1.5rem;box-shadow:var(--card-shadow);transition:transform 0.2s,box-shadow 0.2s;} .example-card:hover {transform:translateY(-2px);box-shadow:var(--card-shadow-hover);} .example-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;} .example-type {font-weight:var(--fw-bold);color:var(--brand);font-size:1.1rem;} .example-badge {font-size:var(--fs-small);padding:0.3rem 0.8rem;border-radius:15px;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:0.05em;} .creative-badge {background:var(--creative);color:#8b5a00;} .analytical-badge {background:var(--analytical);color:#0d5d3a;} .example-before p {background:#f8f9fa;padding:1rem;border-radius:var(--border-radius-sm);margin:0;font-style:italic;color:var(--subtext);} body.dark .example-before p {background:rgba(255,255,255,0.05);} .example-after p {background:var(--brand-light);padding:1rem;border-radius:var(--border-radius-sm);margin:0;color:var(--text);font-weight:var(--fw-medium);} .example-result {display:flex;align-items:center;gap:0.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,0.1);color:var(--text);font-weight:var(--fw-semibold);} .result-icon {color:var(--brand);font-weight:var(--fw-bold);} .examples-cta {text-align:center;color:var(--subtext);font-size:1.1rem;margin-top:2rem;} .results-section {margin:0 auto 2.5rem auto;max-width:900px;display:flex;flex-direction:column;align-items:center;gap:32px;width:100%;padding:0 1rem;} .results-header {text-align:center;margin-bottom:2rem;} .results-header h2 {font-size:var(--fs-section-title);font-weight:var(--fw-extrabold);color:var(--text);margin-bottom:0.5rem;} .results-header p {color:var(--subtext);font-size:1.1rem;} .results-variant-grid {display:flex;flex-direction:column;gap:32px;} .variant-card {background:var(--card-bg);box-shadow:var(--card-shadow);border-radius:22px;padding:1.7rem 2rem;margin:0;display:flex;flex-direction:column;gap:1.1rem;transition:box-shadow var(--transition-fast);} .variant-card:hover {box-shadow:var(--card-shadow-hover);} .featured-variant {border:2px solid var(--creative);transform:scale(1.02);background:linear-gradient(135deg,var(--card-bg) 0%,rgba(255,227,192,0.05) 100%);} .featured-variant:hover {transform:scale(1.03);box-shadow:0 12px 50px rgba(255,180,100,0.2);} body.dark .featured-variant {border:2px solid rgba(255,227,192,0.3);background:linear-gradient(135deg,var(--card-bg) 0%,rgba(255,227,192,0.08) 100%);} body.dark .featured-variant:hover {box-shadow:0 12px 50px rgba(255,180,100,0.15);} .variant-header {display:flex;align-items:center;justify-content:space-between;} .variant-badge {font-size:1.07rem;font-weight:var(--fw-bold);border-radius:18px;padding:6px 18px;letter-spacing:0.03em;margin-right:14px;color:#2e3759;background:#e3e8f5;} body.dark .variant-badge {color:var(--text);background:rgba(50,100,255,0.15);} .concise-badge {background:var(--concise);} .creative-badge {background:var(--creative);} .analytical-badge {background:var(--analytical);} body.dark .concise-badge {background:rgba(188,200,250,0.2);color:#bcc8fa;} body.dark .creative-badge {background:rgba(255,227,192,0.2);color:#ffe3c0;} body.dark .analytical-badge {background:rgba(203,244,225,0.2);color:#cbf4e1;} .variant-actions {display:flex;gap:10px;} .copy-btn,.open-llm-btn {background:var(--brand);color:#fff;border:none;border-radius:var(--border-radius-sm);padding:0.5rem 1rem;font-size:var(--fs-small);font-weight:var(--fw-semibold);cursor:pointer;transition:all var(--transition-fast);} .copy-btn:hover,.open-llm-btn:hover {background:var(--brand-dark);transform:translateY(-1px);} .copy-btn.copied {background:#10b981;} .breakthrough-badge,.enhanced-ai-badge {background:var(--creative);color:#8b5a00;font-size:0.8rem;padding:0.25rem 0.6rem;border-radius:12px;font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:0.05em;} .enhanced-ai-badge {background:var(--brand);color:white;} .variant-meta {display:flex;flex-direction:column;gap:1rem;} .best-for-section {display:flex;flex-direction:column;gap:0.5rem;} .meta-label {font-weight:var(--fw-semibold);color:var(--text);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:0.05em;} .best-for-text {color:var(--subtext);font-size:var(--fs-small);line-height:1.4;} .metrics-section {display:flex;gap:1rem;} .metric-item {display:flex;flex-direction:column;gap:0.25rem;flex:1;} .metric-label {font-size:0.8rem;font-weight:var(--fw-semibold);color:var(--muted);text-transform:uppercase;letter-spacing:0.05em;} .metric-bar {height:4px;background:rgba(0,0,0,0.1);border-radius:2px;overflow:hidden;} body.dark .metric-bar {background:rgba(255,255,255,0.1);} .metric-fill {height:100%;transition:width var(--transition-medium);} .clarity-fill-high {width:90%;background:#10b981;} .clarity-fill-medium {width:70%;background:#f59e0b;} .clarity-fill-low {width:50%;background:#ef4444;} .complexity-fill-high {width:90%;background:#8b5cf6;} .complexity-fill-medium {width:70%;background:#06b6d4;} .complexity-fill-low {width:50%;background:#10b981;} .variant-prompt {background:var(--bg);border:1px solid rgba(0,0,0,0.1);border-radius:var(--border-radius-sm);padding:1.25rem;margin:0;font-family:inherit;font-size:var(--fs-small);line-height:1.6;color:var(--text);white-space:pre-wrap;} body.dark .variant-prompt {border-color:rgba(255,255,255,0.1);} .why-card {background:rgba(50,100,255,0.05);border-left:3px solid var(--brand);padding:1rem;border-radius:var(--border-radius-sm);font-size:var(--fs-small);color:var(--text);font-style:italic;} body.dark .why-card {background:rgba(50,100,255,0.1);} .llm-recommendation {display:flex;align-items:center;gap:0.5rem;font-size:var(--fs-small);color:var(--subtext);} .llm-icon {font-size:1rem;} .results-cta {text-align:center;padding:2rem;background:var(--card-bg);border-radius:var(--border-radius-lg);box-shadow:var(--card-shadow);} .results-cta p {margin-bottom:1rem;color:var(--subtext);} .results-signup-btn {display:inline-block;background:var(--brand);color:white;text-decoration:none;padding:0.75rem 1.5rem;border-radius:var(--border-radius);font-weight:var(--fw-semibold);transition:all var(--transition-fast);} .results-signup-btn:hover {background:var(--brand-dark);transform:translateY(-1px);} /* === STYLES/PAGES.CSS === */ .footer {background:var(--card-bg);border-top:1px solid rgba(0,0,0,0.1);padding:2rem 0;margin-top:3rem;} body.dark .footer {border-top-color:rgba(255,255,255,0.1);} .footer-row {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;max-width:1100px;margin:0 auto;padding:var(--container-padding);} .footer-links a {color:var(--subtext);text-decoration:none;margin:0 0.25rem;transition:color var(--transition-fast);} .footer-links a:hover {color:var(--brand);} .pricing-hero {text-align:center;padding:4rem 0 2rem 0;} .pricing-headline {font-size:var(--fs-hero);font-weight:var(--fw-extrabold);color:var(--text);margin-bottom:1rem;} .pricing-subheadline {font-size:1.25rem;color:var(--subtext);margin-bottom:0;max-width:600px;margin-left:auto;margin-right:auto;} .pricing-boxes {padding:2rem 0 4rem 0;} .pricing-container {max-width:1100px;margin:0 auto;padding:var(--container-padding);} .pricing-container {max-width:1100px;margin:0 auto;padding:var(--container-padding);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;align-items:stretch;} .pricing-box {background:var(--card-bg);border-radius:var(--border-radius-lg);box-shadow:var(--card-shadow);padding:2rem;text-align:center;transition:all var(--transition-medium);position:relative;display:flex;flex-direction:column;height:100%;} .pricing-box.featured {border:2px solid var(--brand);transform:scale(1.05);box-shadow:0 20px 40px rgba(50,100,255,0.15),var(--card-shadow);} .pricing-box.featured::before {content:'';position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;background:linear-gradient(135deg,var(--brand),var(--brand-dark));border-radius:var(--border-radius-lg);z-index:-1;opacity:0.1;} .featured-badge {position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);color:white;padding:0.5rem 1rem;border-radius:var(--border-radius);font-size:var(--fs-small);font-weight:var(--fw-semibold);text-transform:uppercase;letter-spacing:0.05em;} .box-header h3 {font-size:1.5rem;font-weight:var(--fw-extrabold);color:var(--text);margin-bottom:0.5rem;} .price {font-size:2.5rem;font-weight:var(--fw-extrabold);color:var(--brand);margin-bottom:1.5rem;} .price-period {font-size:1rem;font-weight:var(--fw-normal);color:var(--subtext);} .box-features ul {list-style:none;padding:0;margin:0 0 2rem 0;text-align:left;} .box-features li {padding:0.5rem 0;color:var(--text);display:flex;align-items:center;gap:0.5rem;} .box-features li::before {content:'✓';color:#10b981;font-weight:var(--fw-bold);font-size:1.1rem;margin-right:0.5rem;} .box-cta {margin-top:auto;} .cta-btn {display:inline-block;padding:0.75rem 1.5rem;background:var(--brand);color:white;text-decoration:none;border-radius:var(--border-radius);font-weight:var(--fw-semibold);transition:all var(--transition-fast);width:100%;text-align:center;border:none;cursor:pointer;font-size:1rem;} .cta-btn:hover {background:var(--brand-dark);transform:translateY(-1px);} .secondary-btn {background:transparent;border:2px solid var(--brand);color:var(--brand);} .secondary-btn:hover {background:var(--brand);color:white;} .primary-btn {background:var(--brand);} .pro-btn {background:var(--button-gradient);box-shadow:var(--button-shadow);font-weight:var(--fw-bold);} .pro-btn:hover {background:var(--button-gradient-hover);box-shadow:var(--button-shadow-hover);} .pricing-footer {text-align:center;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(0,0,0,0.1);} body.dark .pricing-footer {border-top-color:rgba(255,255,255,0.1);} .credibility {font-size:1.1rem;color:var(--text);font-weight:var(--fw-semibold);margin-bottom:0.5rem;} .guarantee {color:var(--subtext);font-size:var(--fs-small);margin:0;} .pricing-faq {padding:4rem 0;background:var(--bg);} body.dark .pricing-faq {background:var(--bg);} .faq-container {max-width:800px;margin:0 auto;padding:var(--container-padding);} .faq-title {font-size:var(--fs-section-title);font-weight:var(--fw-extrabold);text-align:center;margin-bottom:3rem;color:var(--text);} .faq-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;} .faq-item {background:var(--card-bg);padding:1.5rem;border-radius:var(--border-radius);box-shadow:var(--card-shadow);} .faq-item h3 {font-size:1.1rem;font-weight:var(--fw-bold);color:var(--text);margin-bottom:1rem;} .faq-item p {color:var(--subtext);line-height:1.6;margin:0;} @media (max-width:1200px) {.pricing-container {grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}} @media (max-width:768px) {.pricing-headline {font-size:2rem;} .pricing-subheadline {font-size:1.1rem;} .pricing-container {grid-template-columns:1fr;gap:1.5rem;} .pricing-box {padding:1.5rem;} .pricing-box.featured {transform:none;} .price {font-size:2rem;} .faq-grid {grid-template-columns:1fr;gap:1.5rem;} .faq-item {padding:1.25rem;} .footer-row {flex-direction:column;text-align:center;gap:1rem;} .legal-title {font-size:2rem;} .legal-document {padding:2rem;}} .legal-hero {text-align:center;padding:4rem 0 2rem 0;background:var(--tool-bg-gradient);} body.dark .legal-hero {background:var(--tool-bg-gradient);} .legal-title {font-size:var(--fs-hero);font-weight:var(--fw-extrabold);color:var(--text);margin-bottom:1rem;line-height:1.1;} .legal-subtitle {font-size:1.25rem;color:var(--subtext);margin:0;max-width:600px;margin-left:auto;margin-right:auto;} .legal-document {padding:3rem 0 4rem 0;} .legal-document h2 {font-size:1.5rem;font-weight:var(--fw-bold);color:var(--text);margin:2rem 0 1rem 0;} .legal-document p {color:var(--subtext);line-height:1.6;margin-bottom:1.5rem;} .legal-document ul {margin:1rem 0 1.5rem 0;padding-left:1.5rem;} .legal-document li {color:var(--subtext);line-height:1.6;margin-bottom:0.5rem;} .legal-document a {color:var(--brand);text-decoration:underline;} .legal-document a:hover {color:var(--brand-dark);} .auth-main {min-height:calc(100vh - 64px);} .auth-hero {text-align:center;padding:3rem 0 2rem 0;background:var(--tool-bg-gradient);} body.dark .auth-hero {background:var(--tool-bg-gradient);} .auth-title {font-size:var(--fs-hero);font-weight:var(--fw-extrabold);color:var(--text);margin-bottom:1rem;line-height:1.1;} .auth-subtitle {font-size:1.25rem;color:var(--subtext);margin:0;max-width:600px;margin-left:auto;margin-right:auto;} .auth-form-section {padding:2rem 0 4rem 0;} .auth-form-section .container {display:grid;grid-template-columns:1fr 350px;gap:4rem;align-items:start;max-width:1000px;} .auth-card {background:var(--card-bg);border-radius:var(--border-radius-lg);box-shadow:var(--card-shadow);padding:2.5rem;width:100%;max-width:450px;} .auth-header {text-align:center;margin-bottom:2rem;} .auth-header h2 {font-size:1.75rem;font-weight:var(--fw-extrabold);color:var(--text);margin-bottom:0.5rem;} .auth-header p {color:var(--subtext);margin:0;} .social-auth {margin-bottom:1.5rem;} .social-btn {width:100%;display:flex;align-items:center;justify-content:center;gap:0.75rem;padding:0.75rem 1rem;border:2px solid #e5e7eb;border-radius:var(--border-radius);background:white;color:var(--text);font-weight:var(--fw-semibold);font-size:1rem;cursor:pointer;transition:all var(--transition-fast);} body.dark .social-btn {background:var(--card-bg);border-color:rgba(255,255,255,0.1);color:var(--text);} .social-btn:hover {border-color:var(--brand);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.1);} .social-icon {width:20px;height:20px;} .divider {position:relative;text-align:center;margin:1.5rem 0;} .divider::before {content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:rgba(0,0,0,0.1);} body.dark .divider::before {background:rgba(255,255,255,0.1);} .divider span {background:var(--card-bg);color:var(--muted);padding:0 1rem;font-size:var(--fs-small);} .auth-form {display:flex;flex-direction:column;gap:1.25rem;} .form-group {display:flex;flex-direction:column;gap:0.5rem;} .form-group label {font-weight:var(--fw-semibold);color:var(--text);font-size:var(--fs-small);} .form-group input {padding:0.75rem 1rem;border:2px solid #e5e7eb;border-radius:var(--border-radius);font-size:1rem;background:white;color:var(--text);transition:border-color var(--transition-fast);} body.dark .form-group input {background:var(--bg);border-color:rgba(255,255,255,0.1);color:var(--text);} .form-group input:focus {outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(50,100,255,0.1);} .form-group input::placeholder {color:var(--muted);} .checkbox-group {flex-direction:row;align-items:flex-start;gap:0.75rem;} .checkbox-label {display:flex;align-items:flex-start;gap:0.75rem;cursor:pointer;font-size:var(--fs-small);line-height:1.4;} .checkbox-label input[type="checkbox"] {display:none;} .checkmark {width:18px;height:18px;border:2px solid #e5e7eb;border-radius:4px;background:white;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);flex-shrink:0;margin-top:2px;} body.dark .checkmark {background:var(--bg);border-color:rgba(255,255,255,0.1);} .checkbox-label input[type="checkbox"]:checked + .checkmark {background:var(--brand);border-color:var(--brand);} .checkbox-label input[type="checkbox"]:checked + .checkmark::after {content:'✓';color:white;font-size:12px;font-weight:bold;} .form-options {flex-direction:row;justify-content:space-between;align-items:center;} .forgot-link {color:var(--brand);text-decoration:none;font-size:var(--fs-small);} .forgot-link:hover {text-decoration:underline;} .field-error {color:var(--error);font-size:0.85rem;margin-top:0.25rem;min-height:1rem;} .error-message,.success-message {padding:0.75rem 1rem;border-radius:var(--border-radius);font-size:var(--fs-small);margin-bottom:1rem;display:none;} .error-message {background:#fee2e2;color:#dc2626;border:1px solid #fecaca;} body.dark .error-message {background:rgba(220,38,38,0.1);color:#fca5a5;border-color:rgba(220,38,38,0.2);} .success-message {background:#dcfce7;color:#16a34a;border:1px solid #bbf7d0;} body.dark .success-message {background:rgba(22,163,74,0.1);color:#86efac;border-color:rgba(22,163,74,0.2);} .auth-btn {padding:0.875rem 1.5rem;border:none;border-radius:var(--border-radius);font-size:1rem;font-weight:var(--fw-semibold);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:0.5rem;min-height:48px;} .auth-btn.primary-btn {background:var(--brand);color:white;} .auth-btn.primary-btn:hover {background:var(--brand-dark);transform:translateY(-1px);} .auth-btn:disabled {opacity:0.6;cursor:not-allowed;transform:none !important;} .btn-spinner {display:none;} .spinner-icon {width:20px;height:20px;animation:spin 1s linear infinite;} @keyframes spin {from {transform:rotate(0deg);} to {transform:rotate(360deg);}} .auth-footer {text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid rgba(0,0,0,0.1);} body.dark .auth-footer {border-top-color:rgba(255,255,255,0.1);} .auth-footer p {color:var(--muted);margin:0;} .auth-footer a {color:var(--brand);text-decoration:none;font-weight:var(--fw-semibold);} .auth-footer a:hover {text-decoration:underline;} .auth-benefits {background:var(--card-bg);border-radius:var(--border-radius-lg);padding:2rem;box-shadow:var(--card-shadow);} .auth-benefits h3 {font-size:1.25rem;font-weight:var(--fw-bold);color:var(--text);margin-bottom:1.5rem;} .benefits-list {list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:1.25rem;} .benefits-list li {display:flex;gap:1rem;align-items:flex-start;} .benefit-icon {font-size:1.25rem;flex-shrink:0;margin-top:0.125rem;} .benefits-list strong {display:block;font-weight:var(--fw-semibold);color:var(--text);margin-bottom:0.25rem;} .benefits-list p {color:var(--subtext);font-size:var(--fs-small);margin:0;line-height:1.4;} .stats-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:2rem;} .stat-item {text-align:center;} .stat-number {font-size:2rem;font-weight:var(--fw-extrabold);color:var(--brand);line-height:1;} .stat-label {font-size:var(--fs-small);color:var(--subtext);margin-top:0.25rem;} .testimonial {padding:1.5rem;background:var(--bg);border-radius:var(--border-radius);border-left:3px solid var(--brand);} body.dark .testimonial {background:rgba(255,255,255,0.02);} .testimonial blockquote {font-style:italic;color:var(--text);margin:0 0 0.75rem 0;font-size:var(--fs-small);line-height:1.5;} .testimonial cite {color:var(--subtext);font-size:0.85rem;font-weight:var(--fw-medium);} .nav-logout {background:none;border:none;color:var(--subtext);font-weight:var(--fw-medium);cursor:pointer;transition:color var(--transition-fast);font-size:inherit;font-family:inherit;} .nav-logout:hover {color:var(--brand);} .dashboard-main {min-height:calc(100vh - 64px);} .dashboard-hero {background:var(--tool-bg-gradient);padding:3rem 0 2rem 0;text-align:center;} body.dark .dashboard-hero {background:var(--tool-bg-gradient);} .dashboard-title {font-size:var(--fs-hero);font-weight:var(--fw-extrabold);color:var(--text);margin-bottom:0.5rem;} .dashboard-subtitle {font-size:1.1rem;color:var(--subtext);margin:0;} .usage-section {padding:3rem 0;} .usage-card {background:var(--card-bg);border-radius:var(--border-radius-lg);padding:2rem;box-shadow:var(--card-shadow);max-width:400px;margin:0 auto;} .usage-card h3 {font-size:1.25rem;font-weight:var(--fw-bold);color:var(--text);margin-bottom:1.5rem;} .usage-stats {display:flex;align-items:baseline;gap:0.5rem;margin-bottom:1rem;} .usage-number {font-size:3rem;font-weight:var(--fw-extrabold);color:var(--brand);} .usage-limit {font-size:1.5rem;color:var(--muted);} .usage-label {font-size:1rem;color:var(--text);margin-left:auto;} .usage-bar {height:8px;background:rgba(0,0,0,0.05);border-radius:4px;overflow:hidden;} body.dark .usage-bar {background:rgba(255,255,255,0.1);} .usage-progress {height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-dark));border-radius:4px;transition:width var(--transition-medium);} .nav-active {color:var(--brand) !important;font-weight:var(--fw-semibold) !important;} @media (max-width:768px) {.auth-form-section .container {grid-template-columns:1fr;gap:2rem;} .auth-card {max-width:none;} .stats-grid {grid-template-columns:1fr;gap:1.5rem;}} @media (max-width:480px) {.pricing-hero {padding:2rem 0 1rem 0;} .pricing-headline {font-size:1.5rem;} .pricing-subheadline {font-size:1rem;} .pricing-container {padding:0 1rem;} .pricing-box {padding:1.25rem;} .price {font-size:1.75rem;} .box-features li {font-size:var(--fs-small);} .faq-title {font-size:1.5rem;} .faq-item {padding:1rem;} .faq-item h3 {font-size:1rem;} .legal-hero {padding:2rem 0 1rem 0;} .legal-title {font-size:1.5rem;} .legal-subtitle {font-size:1rem;} .legal-document {padding:1.5rem;} .legal-document h2 {font-size:1.25rem;}} /* === STYLES/DASHBOARD.CSS === */ .admin-nav {background:linear-gradient(135deg,#1e3a8a,#3730a3);border-bottom:1px solid rgba(255,255,255,0.1);box-shadow:0 2px 20px rgba(0,0,0,0.1);} .admin-nav .brand-name {color:white;font-weight:700;letter-spacing:-0.025em;} .admin-nav .nav-links a {color:rgba(255,255,255,0.9);transition:all 0.2s ease;} .admin-nav .nav-links a:hover,.admin-nav .nav-links .nav-active {color:white;background:rgba(255,255,255,0.1);border-radius:6px;} .admin-main {background:#f8fafc;min-height:100vh;} .admin-hero {background:linear-gradient(135deg,#1e3a8a,#3730a3);color:white;padding:2rem 0;margin-bottom:2rem;} .admin-header {display:flex;justify-content:space-between;align-items:center;gap:2rem;} .admin-title {font-size:2.5rem;font-weight:800;margin:0;letter-spacing:-0.025em;} .admin-subtitle {color:rgba(255,255,255,0.8);margin:0.5rem 0 0 0;font-size:1.1rem;} .admin-status {display:flex;gap:1.5rem;} .status-item {display:flex;flex-direction:column;align-items:center;gap:0.25rem;} .status-label {font-size:0.875rem;color:rgba(255,255,255,0.7);text-transform:uppercase;letter-spacing:0.05em;} .status-value {font-weight:700;font-size:1.1rem;} .status-value.online {color:#10b981;} .admin-actions-section {margin-bottom:3rem;} .admin-actions-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-top:1.5rem;} .admin-action-card {background:white;border-radius:12px;padding:2rem;text-align:center;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);transition:all 0.3s ease;border:1px solid #e5e7eb;} .admin-action-card:hover {transform:translateY(-2px);box-shadow:0 10px 25px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05);} .action-icon {font-size:2.5rem;margin-bottom:1rem;} .admin-action-card h3 {color:#1f2937;font-size:1.25rem;font-weight:700;margin:0 0 0.5rem 0;} .admin-action-card p {color:#6b7280;margin:0 0 1.5rem 0;} .action-btn {background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;border:none;padding:0.75rem 1.5rem;border-radius:8px;font-weight:600;cursor:pointer;transition:all 0.2s ease;font-size:0.9rem;} .action-btn:hover {background:linear-gradient(135deg,#1d4ed8,#1e3a8a);transform:translateY(-1px);} .system-overview-section {margin-bottom:3rem;} .overview-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem;margin-top:1.5rem;} .overview-card {background:white;padding:1.5rem;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);display:flex;align-items:center;gap:1rem;border:1px solid #e5e7eb;} .overview-icon {font-size:2rem;width:60px;height:60px;background:linear-gradient(135deg,#eff6ff,#dbeafe);border-radius:12px;display:flex;align-items:center;justify-content:center;border:2px solid #3b82f6;} .overview-content h3 {font-size:1.75rem;font-weight:800;margin:0;color:#1f2937;} .overview-content p {color:#6b7280;margin:0.25rem 0 0 0;font-weight:600;} .overview-content small {color:#10b981;font-size:0.8rem;font-weight:500;} .user-management-section {margin-bottom:3rem;} .section-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:2rem;} .section-header h2 {color:#1f2937;margin:0;font-size:1.875rem;font-weight:700;} .user-controls {display:flex;gap:1rem;align-items:center;} .search-input,.filter-select {padding:0.5rem 0.75rem;border:1px solid #d1d5db;border-radius:6px;background:white;font-size:0.875rem;} .search-input:focus,.filter-select:focus {outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1);} .refresh-btn {background:#10b981;color:white;border:none;padding:0.5rem 1rem;border-radius:6px;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;} .refresh-btn:hover {background:#059669;} .user-stats-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem;} .stat-card {background:white;padding:1.5rem;border-radius:12px;text-align:center;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);border:1px solid #e5e7eb;} .stat-number {font-size:2.5rem;font-weight:800;color:#3b82f6;margin:0;} .stat-label {color:#6b7280;margin-top:0.5rem;font-weight:600;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.05em;} .user-list-container {background:white;border-radius:12px;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);border:1px solid #e5e7eb;overflow:hidden;} .user-list-header {display:grid;grid-template-columns:2fr 1fr 1.5fr 1fr 1.5fr;gap:1rem;padding:1rem 1.5rem;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-weight:700;color:#374151;text-transform:uppercase;font-size:0.75rem;letter-spacing:0.05em;} .user-list {max-height:600px;overflow-y:auto;} .user-row {display:grid;grid-template-columns:2fr 1fr 1.5fr 1fr 1.5fr;gap:1rem;padding:1rem 1.5rem;border-bottom:1px solid #f3f4f6;align-items:center;transition:all 0.2s ease;} .user-row:hover {background:#f9fafb;} .user-email {font-weight:600;color:#1f2937;} .user-status {font-size:0.75rem;color:#6b7280;} .user-status.active {color:#10b981;} .user-status.inactive {color:#ef4444;} .tier-badge {display:inline-block;padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;} .tier-badge.tier-basic {background:#f3f4f6;color:#6b7280;} .tier-badge.tier-pro {background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;} .usage-display {font-weight:600;color:#1f2937;font-size:0.875rem;} .usage-bar {background:#f3f4f6;height:4px;border-radius:2px;margin-top:0.25rem;overflow:hidden;} .usage-progress {background:linear-gradient(135deg,#10b981,#059669);height:100%;border-radius:2px;transition:width 0.3s ease;} .user-col-actions {display:flex;gap:0.5rem;} .edit-btn,.tier-btn {padding:0.25rem 0.75rem;border:none;border-radius:6px;font-size:0.75rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;} .edit-btn {background:#f3f4f6;color:#374151;} .edit-btn:hover {background:#e5e7eb;} .tier-btn.upgrade {background:linear-gradient(135deg,#10b981,#059669);color:white;} .tier-btn.downgrade {background:linear-gradient(135deg,#ef4444,#dc2626);color:white;} .tier-btn:hover {transform:translateY(-1px);} .analytics-section {margin-bottom:3rem;} .analytics-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:2rem;margin-top:2rem;} .analytics-card {background:white;border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);border:1px solid #e5e7eb;} .analytics-card h3 {color:#1f2937;font-size:1.125rem;font-weight:700;margin:0 0 1rem 0;} .chart-card {min-height:300px;} .revenue-display {display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;} .revenue-metric {text-align:center;padding:1rem;background:#f9fafb;border-radius:8px;} .revenue-value {font-size:1.5rem;font-weight:800;color:#10b981;margin-bottom:0.25rem;} .revenue-label {font-size:0.75rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;} .performance-metrics {display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;} .performance-item {text-align:center;padding:1.5rem 1rem;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb;transition:all 0.2s ease;position:relative;} .performance-item:hover {background:#f3f4f6;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1);} .perf-icon {display:block;margin-bottom:0.5rem;} .perf-value {font-size:1.5rem;font-weight:800;margin-bottom:0.5rem;transition:color 0.2s ease;} .perf-label {font-size:0.75rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;margin:0;} .analytics-loading {position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;z-index:10;} .chart-card canvas {max-height:300px;} .analytics-card {position:relative;overflow:hidden;} .trends-grid {display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;} .trend-item {text-align:center;padding:1.5rem 1rem;background:#f9fafb;border-radius:12px;border:1px solid #e5e7eb;} .trend-value {font-size:2rem;font-weight:800;color:#3b82f6;margin-bottom:0.5rem;} .trend-label {font-size:0.875rem;color:#6b7280;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;} .tier-breakdown {display:flex;flex-direction:column;gap:1rem;} .tier-row {display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb;} .tier-info {display:flex;align-items:center;gap:1rem;} .tier-count {color:#6b7280;font-size:0.875rem;} .tier-percentage {font-size:1.25rem;font-weight:700;color:#3b82f6;} .tier-badge.tier-basic {background:#f3f4f6;color:#6b7280;padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-weight:700;text-transform:uppercase;} .tier-badge.tier-pro {background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-weight:700;text-transform:uppercase;} @media (max-width:768px) {.trends-grid {grid-template-columns:1fr;gap:0.75rem;} .trend-item {padding:1rem;} .trend-value {font-size:1.5rem;}} .settings-section {margin-bottom:3rem;} .settings-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:2rem;margin-top:2rem;} .settings-card {background:white;border-radius:12px;padding:1.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06);border:1px solid #e5e7eb;} .settings-card h3 {color:#1f2937;font-size:1.125rem;font-weight:700;margin:0 0 1rem 0;} .setting-item {margin-bottom:1rem;} .setting-item label {display:block;color:#374151;font-weight:600;margin-bottom:0.5rem;font-size:0.875rem;} .setting-item input[type="number"],.setting-item input[type="text"] {width:100%;padding:0.5rem 0.75rem;border:1px solid #d1d5db;border-radius:6px;background:white;font-size:0.875rem;} .setting-item input[type="number"]:focus,.setting-item input[type="text"]:focus {outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1);} .save-btn {background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;border:none;padding:0.5rem 1rem;border-radius:6px;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;} .save-btn:hover {background:linear-gradient(135deg,#1d4ed8,#1e3a8a);transform:translateY(-1px);} .danger-btn {background:linear-gradient(135deg,#ef4444,#dc2626);color:white;border:none;padding:0.5rem 1rem;border-radius:6px;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;} .danger-btn:hover {background:linear-gradient(135deg,#dc2626,#b91c1c);transform:translateY(-1px);} .modal-overlay {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px);} .modal-content {background:white;border-radius:12px;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);max-width:500px;width:90%;max-height:80vh;overflow:auto;} .modal-header {display:flex;justify-content:space-between;align-items:center;padding:1.5rem 1.5rem 0 1.5rem;margin-bottom:1rem;} .modal-header h3 {color:#1f2937;font-size:1.25rem;font-weight:700;margin:0;} .modal-close {background:none;border:none;font-size:1.5rem;color:#6b7280;cursor:pointer;padding:0.25rem;border-radius:4px;transition:all 0.2s ease;} .modal-close:hover {background:#f3f4f6;color:#374151;} .modal-body {padding:0 1.5rem;} .form-group {margin-bottom:1rem;} .form-group label {display:block;color:#374151;font-weight:600;margin-bottom:0.5rem;font-size:0.875rem;} .form-group input[type="email"],.form-group input[type="number"],.form-group select {width:100%;padding:0.5rem 0.75rem;border:1px solid #d1d5db;border-radius:6px;background:white;font-size:0.875rem;} .form-group input[type="email"]:focus,.form-group input[type="number"]:focus,.form-group select:focus {outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1);} .form-group input[readonly] {background:#f9fafb;color:#6b7280;} .modal-footer {display:flex;justify-content:flex-end;gap:1rem;padding:1.5rem;} .primary-btn {background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;border:none;padding:0.5rem 1rem;border-radius:6px;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;} .primary-btn:hover {background:linear-gradient(135deg,#1d4ed8,#1e3a8a);transform:translateY(-1px);} .secondary-btn {background:#f3f4f6;color:#374151;border:none;padding:0.5rem 1rem;border-radius:6px;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.2s ease;} .secondary-btn:hover {background:#e5e7eb;} .loading-overlay {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1001;backdrop-filter:blur(4px);} .loading-spinner {width:40px;height:40px;border:4px solid #e5e7eb;border-top:4px solid #3b82f6;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem;} @keyframes spin {0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);}} @keyframes slideInRight {from {transform:translateX(100%);opacity:0;} to {transform:translateX(0);opacity:1;}} @keyframes slideOutRight {from {transform:translateX(0);opacity:1;} to {transform:translateX(100%);opacity:0;}} .loading-overlay p {color:#6b7280;font-weight:600;} @media (max-width:768px) {.admin-header {flex-direction:column;gap:1rem;text-align:center;} .admin-title {font-size:2rem;} .admin-actions-grid {grid-template-columns:1fr;} .section-header {flex-direction:column;gap:1rem;align-items:stretch;} .user-controls {flex-direction:column;} .user-stats-grid {grid-template-columns:repeat(2,1fr);} .user-list-header,.user-row {grid-template-columns:1fr;gap:0.5rem;padding:1rem;} .user-list-header > *:not(:first-child),.user-row > *:not(:first-child) {display:none;} .analytics-grid {grid-template-columns:1fr;} .settings-grid {grid-template-columns:1fr;}} .dashboard-header {display:flex;justify-content:space-between;align-items:center;gap:2rem;} .tier-badge {background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:white;padding:0.5rem 1rem;border-radius:var(--border-radius);font-weight:var(--fw-bold);font-size:var(--fs-small);text-transform:uppercase;letter-spacing:0.05em;box-shadow:0 4px 12px rgba(50,100,255,0.2);} .quick-actions-section {padding:2rem 0;background:var(--bg);} .quick-actions-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:1.5rem;} .quick-action-card {background:var(--card-bg);border-radius:var(--border-radius-lg);padding:1.5rem;text-align:center;box-shadow:var(--card-shadow);transition:all var(--transition-medium);position:relative;} .quick-action-card:hover {transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.1);} .quick-action-card.locked {opacity:0.6;background:linear-gradient(135deg,var(--card-bg) 0%,rgba(128,128,128,0.1) 100%);} .action-icon {font-size:2.5rem;margin-bottom:1rem;display:block;} .quick-action-card h3 {font-size:1.25rem;font-weight:var(--fw-bold);color:var(--text);margin-bottom:0.5rem;} .quick-action-card p {color:var(--subtext);margin-bottom:1.5rem;font-size:var(--fs-small);} .action-btn {background:var(--brand);color:white;border:none;padding:0.75rem 1.5rem;border-radius:var(--border-radius);font-weight:var(--fw-semibold);cursor:pointer;transition:all var(--transition-fast);width:100%;} .action-btn:hover {background:var(--brand-dark);transform:translateY(-1px);} .action-btn.locked {background:var(--muted);cursor:not-allowed;} .action-btn.locked:hover {background:var(--muted);transform:none;} .usage-stats {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;} .usage-display {display:flex;align-items:baseline;gap:0.5rem;margin-bottom:1rem;} .time-saved {display:flex;align-items:center;gap:0.5rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(0,0,0,0.1);} body.dark .time-saved {border-top-color:rgba(255,255,255,0.1);} .time-value {font-size:1.5rem;font-weight:var(--fw-bold);color:var(--success);} .time-label {color:var(--subtext);font-size:var(--fs-small);} .analytics-section {padding:3rem 0;background:var(--tool-bg-gradient);} body.dark .analytics-section {background:var(--tool-bg-gradient);} .analytics-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin-top:2rem;} .analytics-card {background:var(--card-bg);border-radius:var(--border-radius-lg);padding:2rem;box-shadow:var(--card-shadow);} .analytics-card h3 {font-size:1.25rem;font-weight:var(--fw-bold);color:var(--text);margin-bottom:1.5rem;} .chart-card {grid-column:span 2;} .chart-card canvas {height:300px !important;} .variant-stats {display:flex;flex-direction:column;gap:1rem;} .variant-item {display:flex;align-items:center;gap:1rem;} .variant-name {font-weight:var(--fw-semibold);color:var(--text);min-width:80px;} .variant-bar {flex:1;height:8px;background:rgba(0,0,0,0.05);border-radius:4px;overflow:hidden;} body.dark .variant-bar {background:rgba(255,255,255,0.1);} .variant-progress {height:100%;background:var(--brand);border-radius:4px;transition:width var(--transition-medium);} .variant-percentage {font-weight:var(--fw-semibold);color:var(--text);min-width:40px;text-align:right;} .roi-display {display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;} .roi-metric {text-align:center;padding:1rem;background:rgba(50,100,255,0.05);border-radius:var(--border-radius);border:1px solid rgba(50,100,255,0.1);} body.dark .roi-metric {background:rgba(50,100,255,0.1);border-color:rgba(50,100,255,0.2);} .roi-value {font-size:1.5rem;font-weight:var(--fw-extrabold);color:var(--brand);margin-bottom:0.25rem;} .roi-label {font-size:var(--fs-small);color:var(--subtext);text-transform:uppercase;letter-spacing:0.05em;} .peak-times {display:flex;flex-direction:column;gap:1rem;} .peak-item {display:flex;justify-content:space-between;align-items:center;padding:0.75rem;background:rgba(0,0,0,0.02);border-radius:var(--border-radius);} body.dark .peak-item {background:rgba(255,255,255,0.05);} .peak-label {font-weight:var(--fw-semibold);color:var(--text);} .peak-value {color:var(--brand);font-weight:var(--fw-bold);} .insights-section {padding:3rem 0;} .insights-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem;margin-top:2rem;} .insight-card {background:var(--card-bg);border-radius:var(--border-radius-lg);padding:1.5rem;box-shadow:var(--card-shadow);display:flex;gap:1rem;align-items:flex-start;transition:all var(--transition-medium);} .insight-card:hover {transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,0.1);} .insight-card.locked {opacity:0.7;background:linear-gradient(135deg,var(--card-bg) 0%,rgba(128,128,128,0.05) 100%);} .insight-icon {font-size:2rem;flex-shrink:0;} .insight-content h4 {font-size:1.1rem;font-weight:var(--fw-bold);color:var(--text);margin-bottom:0.5rem;} .insight-content p {color:var(--subtext);line-height:1.5;margin-bottom:1rem;} .upgrade-link {background:none;border:1px solid var(--brand);color:var(--brand);padding:0.5rem 1rem;border-radius:var(--border-radius);font-size:var(--fs-small);font-weight:var(--fw-semibold);cursor:pointer;transition:all var(--transition-fast);} .upgrade-link:hover {background:var(--brand);color:white;} .library-section,.templates-section {padding:3rem 0;background:var(--bg);} .section-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;gap:2rem;} .library-controls {display:flex;gap:1rem;align-items:center;} .search-input,.filter-select {padding:0.75rem 1rem;border:2px solid #e5e7eb;border-radius:var(--border-radius);font-size:1rem;background:white;color:var(--text);} body.dark .search-input,body.dark .filter-select {background:var(--card-bg);border-color:rgba(255,255,255,0.1);color:var(--text);} .search-input:focus,.filter-select:focus {outline:none;border-color:var(--brand);} .export-btn {background:var(--success);color:white;border:none;padding:0.75rem 1rem;border-radius:var(--border-radius);font-weight:var(--fw-semibold);cursor:pointer;transition:all var(--transition-fast);} .export-btn:hover {background:#059669;transform:translateY(-1px);} .library-placeholder,.templates-placeholder {text-align:center;padding:3rem 2rem;color:var(--subtext);} .templates-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;margin-top:2rem;} .template-card {background:var(--card-bg);border-radius:var(--border-radius-lg);padding:1.5rem;box-shadow:var(--card-shadow);transition:all var(--transition-medium);} .template-card:hover {transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.1);} .template-card h4 {font-size:1.25rem;font-weight:var(--fw-bold);color:var(--text);margin-bottom:0.5rem;} .template-card p {color:var(--subtext);margin-bottom:1rem;line-height:1.5;} .template-stats {display:flex;gap:1rem;margin-bottom:1.5rem;font-size:var(--fs-small);color:var(--muted);} .template-actions {display:flex;gap:0.75rem;} .secondary-btn {background:transparent;border:2px solid var(--brand);color:var(--brand);padding:0.5rem 1rem;border-radius:var(--border-radius);font-weight:var(--fw-semibold);cursor:pointer;transition:all var(--transition-fast);} .secondary-btn:hover {background:var(--brand);color:white;} .text-btn {background:none;border:none;color:var(--muted);padding:0.5rem 1rem;font-weight:var(--fw-semibold);cursor:pointer;transition:color var(--transition-fast);} .text-btn:hover {color:var(--brand);} .upgrade-section {padding:4rem 0;background:linear-gradient(135deg,var(--brand) 0%,var(--brand-dark) 100%);color:white;} .upgrade-card {background:rgba(255,255,255,0.1);border-radius:var(--border-radius-lg);padding:3rem 2rem;text-align:center;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);} .upgrade-card h2 {font-size:var(--fs-hero);font-weight:var(--fw-extrabold);margin-bottom:1rem;} .upgrade-card p {font-size:1.25rem;margin-bottom:2rem;opacity:0.9;} .upgrade-benefits {display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-bottom:2rem;text-align:left;} .benefit-item {padding:0.75rem;background:rgba(255,255,255,0.1);border-radius:var(--border-radius);font-weight:var(--fw-semibold);} .upgrade-btn {background:white;color:var(--brand);border:none;padding:1rem 2rem;border-radius:var(--border-radius);font-size:1.1rem;font-weight:var(--fw-bold);cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 15px rgba(0,0,0,0.2);} .upgrade-btn:hover {transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.3);} .locked-preview {position:relative;overflow:hidden;border-radius:var(--border-radius-lg);} .preview-chart {position:relative;background:var(--card-bg);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:var(--card-shadow);} .chart-placeholder {position:relative;height:300px;display:flex;align-items:flex-end;justify-content:center;gap:1rem;padding:2rem;} .placeholder-bars {display:flex;align-items:flex-end;gap:1rem;opacity:0.3;} .bar {width:40px;background:var(--brand);border-radius:4px 4px 0 0;min-height:20px;} .placeholder-overlay {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;background:rgba(255,255,255,0.95);padding:2rem;border-radius:var(--border-radius-lg);box-shadow:0 10px 30px rgba(0,0,0,0.2);backdrop-filter:blur(10px);} body.dark .placeholder-overlay {background:rgba(0,0,0,0.95);} .placeholder-overlay h3 {font-size:1.5rem;font-weight:var(--fw-bold);color:var(--text);margin-bottom:1rem;} .placeholder-overlay p {color:var(--subtext);margin-bottom:1.5rem;} .loading-overlay {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.9);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(5px);} body.dark .loading-overlay {background:rgba(0,0,0,0.9);} .loading-spinner {width:60px;height:60px;border:4px solid rgba(50,100,255,0.1);border-top:4px solid var(--brand);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem;} .loading-overlay p {color:var(--text);font-weight:var(--fw-semibold);} @media (max-width:768px) {.dashboard-header {flex-direction:column;text-align:center;gap:1rem;} .quick-actions-grid {grid-template-columns:1fr;gap:1rem;} .analytics-grid {grid-template-columns:1fr;gap:1.5rem;} .chart-card {grid-column:span 1;} .chart-card canvas {height:250px !important;} .roi-display {grid-template-columns:1fr;gap:0.75rem;} .section-header {flex-direction:column;align-items:stretch;gap:1rem;} .library-controls {flex-direction:column;gap:0.75rem;} .search-input,.filter-select {width:100%;} .templates-grid {grid-template-columns:1fr;gap:1rem;} .upgrade-benefits {grid-template-columns:1fr;gap:0.75rem;}} @media (max-width:480px) {.upgrade-card {padding:2rem 1rem;} .upgrade-card h2 {font-size:1.5rem;} .upgrade-card p {font-size:1rem;} .chart-card canvas {height:200px !important;}} /* === STYLES/RESPONSIVE.CSS === */ @media (max-width:1200px) {.container {padding:0 1.5rem;} .prompt-card.enhanced {max-width:90vw;padding:2.5rem 2rem 2.3rem 2rem;} .headline {font-size:2.5rem;}} @media (max-width:768px) {.container {padding:0 1rem;} .prompt-card.enhanced {max-width:95vw;padding:2rem 1.5rem 1.8rem 1.5rem;margin:0 0.5rem;} .headline {font-size:2rem;margin-bottom:1rem;} .tool-title {font-size:2rem;} .tool-subtitle {font-size:1rem;} .nav-row {flex-wrap:wrap;padding:0.75rem 1rem;gap:0.75rem;} .nav-links {order:3;width:100%;justify-content:center;gap:1.5rem;margin-top:0.5rem;} .nav-actions {gap:0.75rem;} .nav-signup {padding:0.5rem 1rem;font-size:var(--fs-small);} .hero-features {flex-direction:column;align-items:center;gap:1rem;} .feature-badge {width:100%;max-width:300px;justify-content:center;} .subheadline {font-size:1.1rem;} .example-grid {grid-template-columns:1fr;gap:1.5rem;} .example-card {padding:1.25rem;} .results-variant-grid {gap:24px;} .variant-card {padding:1.5rem;} .variant-actions {flex-direction:column;gap:0.5rem;} .copy-btn,.open-llm-btn {width:100%;text-align:center;} .variant-progress {grid-template-columns:1fr;gap:0.75rem;} .variant-item {padding:0.75rem;} .container,.main-content,.results-section {padding:0 1rem;} .examples-section {padding:2rem 1rem;}} @media (max-width:480px) {.container {padding:0 0.75rem;} .prompt-card.enhanced {max-width:calc(100vw - 1.5rem);padding:1.5rem 1rem 1.3rem 1rem;margin:0 0.75rem;} .headline {font-size:1.5rem;line-height:1.2;} .tool-title {font-size:1.8rem;} .subheadline {font-size:1rem;margin-bottom:1.5rem;} .nav-row {padding:0.5rem 0.75rem;min-height:56px;} .branding {gap:0.5rem;} .brand-name {font-size:1.25rem;} .brand-logo {width:28px;height:28px;} .nav-actions {gap:0.5rem;} .dark-mode-btn {padding:0.25rem;font-size:1rem;} .nav-login {display:none;} .nav-signup {padding:0.4rem 0.8rem;font-size:0.85rem;} .hero {padding:2rem 0;} .hero-features {gap:0.75rem;} .feature-badge {padding:0.5rem 1rem;font-size:var(--fs-small);} .feature-icon {font-size:1rem;} .beta-badge {padding:0.5rem 1rem;font-size:0.8rem;} #prompt {font-size:1rem;padding:1rem;min-height:80px;} .prompt-card.enhanced #prompt {min-height:100px;font-size:1rem;padding:1.25rem 1rem;} .main-btn {font-size:1rem;padding:0.8em 0;min-height:44px;} .main-btn.enhanced-btn {font-size:1.1rem;padding:1rem 1.5rem;min-height:48px;} .examples-title {font-size:1.5rem;} .example-card {padding:1rem;} .example-header {flex-direction:column;align-items:flex-start;gap:0.5rem;} .example-badge {align-self:flex-end;font-size:0.7rem;padding:0.2rem 0.6rem;} .results-header h2 {font-size:1.5rem;} .results-header p {font-size:1rem;} .variant-card {padding:1.25rem;gap:1rem;} .variant-header {flex-direction:column;align-items:flex-start;gap:0.75rem;} .variant-badge {font-size:0.95rem;padding:4px 12px;margin-right:0;} .breakthrough-badge,.enhanced-ai-badge {font-size:0.7rem;padding:0.2rem 0.5rem;} .variant-actions {width:100%;} .variant-meta {gap:0.75rem;} .metrics-section {flex-direction:column;gap:0.75rem;} .variant-prompt {padding:1rem;font-size:0.85rem;} .why-card {padding:0.75rem;font-size:0.85rem;} .progress-container {padding:1.5rem;} .variant-item {padding:0.5rem;} .variant-icon {font-size:1.25rem;} .variant-label {font-size:0.8rem;} .variant-status {font-size:0.7rem;} .results-section {padding:0 0.75rem;} .examples-section {padding:1.5rem 0.75rem;} .prompt-section {padding:2rem 0 1.5rem 0;} .prompt-section.main-tool {padding:3rem 0;}} @media (max-width:320px) {.container {padding:0 0.5rem;} .prompt-card.enhanced {max-width:calc(100vw - 1rem);padding:1.25rem 0.75rem 1rem 0.75rem;margin:0 0.5rem;} .headline {font-size:1.25rem;} .tool-title {font-size:1.5rem;} .nav-row {padding:0.5rem;} .brand-name {font-size:1.1rem;} .nav-signup {padding:0.3rem 0.6rem;font-size:0.8rem;} .main-btn.enhanced-btn {font-size:1rem;padding:0.9rem 1.25rem;}} @media (prefers-reduced-motion:reduce) {*,*::before,*::after {animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;} .variant-item:has(.variant-status.active) .variant-icon {animation:none;}} @media (prefers-contrast:high) {:root {--card-shadow:0 2px 8px rgba(0,0,0,0.3);--card-shadow-hover:0 4px 16px rgba(0,0,0,0.4);} .variant-badge,.example-badge {border:1px solid currentColor;} .variant-prompt {border:2px solid currentColor;}}

/* === ENHANCED TEMPLATES STYLES === */
.templates-header-enhanced {
  text-align: center;
  padding: 3rem 0 2rem 0;
  background: linear-gradient(135deg, var(--brand-light) 0%, rgba(255, 255, 255, 0.9) 100%);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--enhanced-shadow);
  margin-bottom: 3rem;
  border: 1px solid rgba(50, 100, 255, 0.08);
  position: relative;
  overflow: hidden;
}

.templates-header-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(50, 100, 255, 0.3), transparent);
}

body.dark .templates-header-enhanced {
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(255, 255, 255, 0.05);
}

.templates-title h2 {
  font-size: 2.5rem;
  font-weight: var(--fw-extrabold);
  background: linear-gradient(135deg, var(--text) 0%, var(--brand) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.template-count {
  display: inline-flex;
  align-items: center;
  font-size: 0.9rem;
  font-weight: var(--fw-bold);
  color: var(--brand);
  background: linear-gradient(135deg, rgba(50, 100, 255, 0.1), rgba(50, 100, 255, 0.05));
  padding: 0.4rem 0.9rem;
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(50, 100, 255, 0.15);
  margin-left: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.templates-title p {
  color: var(--subtext);
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  opacity: 0.9;
}

.templates-controls {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-top: 2rem;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.02);
  backdrop-filter: blur(10px);
  transition: all var(--transition-medium);
}

.templates-controls:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body.dark .templates-controls {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}

.search-box {
  position: relative;
  flex: 1;
  max-width: 400px;
}

.search-box input {
  width: 100%;
  padding: 1rem 1.25rem 1rem 3.5rem;
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--border-radius-lg);
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  transition: all var(--transition-medium);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  font-weight: var(--fw-medium);
}

.search-box input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(50, 100, 255, 0.08), 0 4px 16px rgba(50, 100, 255, 0.12);
  background: white;
  transform: translateY(-1px);
}

.search-box input::placeholder {
  color: var(--muted);
  font-weight: var(--fw-normal);
}

.search-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand);
  pointer-events: none;
  font-size: 1.1rem;
  opacity: 0.7;
}

.templates-controls select {
  padding: 1rem 1.25rem;
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--border-radius-lg);
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  cursor: pointer;
  font-weight: var(--fw-medium);
  transition: all var(--transition-medium);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  min-width: 180px;
}

.templates-controls select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(50, 100, 255, 0.08), 0 4px 16px rgba(50, 100, 255, 0.12);
  background: white;
  transform: translateY(-1px);
}

body.dark .templates-controls input,
body.dark .templates-controls select {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.dark .templates-controls input:focus,
body.dark .templates-controls select:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--brand);
}

.template-category-enhanced {
  margin-bottom: 3rem;
}

.category-header-enhanced {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 2.25rem;
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.8) 100%);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--enhanced-shadow);
  margin-bottom: 1.5rem;
  transition: all var(--transition-medium);
  border: 1px solid rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
}

.category-header-enhanced::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(50, 100, 255, 0.2), transparent);
}

.category-header-enhanced:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(50, 100, 255, 0.12);
  border-color: rgba(50, 100, 255, 0.1);
}

body.dark .category-header-enhanced {
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(255, 255, 255, 0.05);
}

.category-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.category-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.category-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.1;
  border-radius: inherit;
}

.category-text h3 {
  font-size: 1.75rem;
  font-weight: var(--fw-extrabold);
  color: var(--text);
  margin: 0 0 0.4rem 0;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.category-text p {
  color: var(--subtext);
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.9;
}

.category-text .template-count {
  display: inline-flex;
  align-items: center;
  font-size: 0.85rem;
  background: linear-gradient(135deg, rgba(50, 100, 255, 0.12), rgba(50, 100, 255, 0.08));
  color: var(--brand);
  padding: 0.35rem 0.8rem;
  border-radius: var(--border-radius-lg);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid rgba(50, 100, 255, 0.15);
}

.category-toggle {
  background: rgba(50, 100, 255, 0.08);
  border: 1px solid rgba(50, 100, 255, 0.15);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  cursor: pointer;
  padding: 0.75rem;
  border-radius: var(--border-radius-lg);
  transition: all var(--transition-medium);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(50, 100, 255, 0.15);
}

.category-toggle:hover {
  background: rgba(50, 100, 255, 0.12);
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(50, 100, 255, 0.2);
}

.category-templates-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
}

.template-card-enhanced {
  background: var(--card-bg);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--enhanced-shadow);
  padding: 2rem;
  transition: all var(--transition-medium);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.template-card-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 50%, #8B5CF6 100%);
  opacity: 0;
  transition: all var(--transition-medium);
  border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
}

.template-card-enhanced:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(50, 100, 255, 0.15);
  border-color: var(--brand-light);
}

.template-card-enhanced:hover::before {
  opacity: 1;
}

.template-card-enhanced.system-template {
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(50, 100, 255, 0.03) 50%, rgba(139, 92, 246, 0.02) 100%);
}

body.dark .template-card-enhanced {
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 255, 255, 0.02) 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark .template-card-enhanced:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(50, 100, 255, 0.2);
  border-color: var(--brand);
}

.template-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.template-title-section h4 {
  font-size: 1.375rem;
  font-weight: var(--fw-bold);
  color: var(--text);
  margin: 0 0 0.75rem 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.template-title-section .template-description {
  color: var(--subtext);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  font-weight: var(--fw-medium);
}

.template-badges {
  flex-shrink: 0;
}

.badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius-xl);
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
  transition: all var(--transition-fast);
}

.system-badge {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 50%, #8B5CF6 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(50, 100, 255, 0.4);
}

.system-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(50, 100, 255, 0.5);
}

.user-badge {
  background: var(--success);
  color: white;
}

.template-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border-radius: var(--border-radius);
  font-size: var(--fs-small);
}

body.dark .feature-item {
  background: rgba(255, 255, 255, 0.05);
}

.feature-icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.feature-text {
  font-weight: var(--fw-medium);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-preview {
  background: linear-gradient(135deg, var(--brand-light) 0%, rgba(50, 100, 255, 0.06) 100%);
  padding: 1.25rem;
  border-radius: var(--border-radius-lg);
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text);
  border-left: 4px solid var(--brand);
  position: relative;
  overflow: hidden;
}

.template-preview::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(50, 100, 255, 0.1) 100%);
  pointer-events: none;
}

body.dark .template-preview {
  background: linear-gradient(135deg, rgba(50, 100, 255, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
  border-left-color: var(--brand);
}

.template-actions-enhanced {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.template-actions-enhanced .primary-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  font-size: 0.95rem;
  font-weight: var(--fw-bold);
  transition: all var(--transition-fast);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border: none;
  border-radius: var(--border-radius-lg);
  color: white;
  position: relative;
  overflow: hidden;
}

.template-actions-enhanced .primary-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.template-actions-enhanced .primary-btn:hover::before {
  left: 100%;
}

.template-actions-enhanced .primary-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 24px rgba(50, 100, 255, 0.4);
}

.template-actions-enhanced .secondary-btn {
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  font-weight: var(--fw-semibold);
  transition: all var(--transition-fast);
  border-radius: var(--border-radius-lg);
  backdrop-filter: blur(10px);
}

.template-actions-enhanced .secondary-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 16px rgba(50, 100, 255, 0.2);
}

body.dark .template-actions-enhanced .secondary-btn {
  background: var(--card-bg);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text);
}

.template-actions-enhanced .text-btn {
  padding: 0.875rem 1rem;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--muted);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.template-actions-enhanced .text-btn:hover {
  color: var(--brand);
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .templates-controls {
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
  }
  
  .search-box {
    max-width: 100%;
  }
  
  .category-templates-enhanced {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .template-card-enhanced {
    padding: 1.25rem;
  }
  
  .template-features {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  
  .template-actions-enhanced {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .template-actions-enhanced .primary-btn,
  .template-actions-enhanced .secondary-btn {
    width: 100%;
    justify-content: center;
  }
}