:root{ --bg:#060812; --bg-soft:#0a0f1f; --panel:rgba(255,255,255,.055); --panel-2:rgba(255,255,255,.075); --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16); --text:#f6f8ff; --muted:#9fa8be; --muted-2:#75809a; --blue:#4f7cff; --violet:#7c3aed; --violet-2:#a855f7; --cyan:#22d3ee; --green:#22c55e; --amber:#f59e0b; --pink:#ec4899; --radius:24px; --radius-sm:18px; --shadow:0 24px 80px rgba(0,0,0,.35); --max:1200px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--text); background: radial-gradient(1000px 600px at 5% -10%, rgba(79,124,255,.12), transparent 55%), radial-gradient(900px 550px at 100% 10%, rgba(168,85,247,.12), transparent 55%), radial-gradient(700px 400px at 50% 100%, rgba(34,211,238,.08), transparent 65%), var(--bg); line-height:1.6; overflow-x:hidden; } a{text-decoration:none;color:inherit} button,input{font:inherit} .container{width:min(var(--max), calc(100% - 40px));margin:auto} @media (max-width:640px){ .container{width:min(var(--max), calc(100% - 24px));} } .noise{ position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.025; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.7'/%3E%3C/svg%3E"); } .bg-orbs{position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none;} .orb{ position:absolute; border-radius:50%; filter:blur(24px); opacity:.26; animation: floatOrb 16s ease-in-out infinite; } .orb.one{width:300px;height:300px;background:rgba(79,124,255,.28);left:-60px;top:120px} .orb.two{width:340px;height:340px;background:rgba(168,85,247,.26);right:-80px;top:180px;animation-delay:-3s} .orb.three{width:260px;height:260px;background:rgba(34,211,238,.18);left:40%;bottom:80px;animation-delay:-6s} @keyframes floatOrb{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(0,-18px,0) scale(1.05)} } .grid-overlay{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.055; background-image: linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px); background-size:42px 42px; mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,1), rgba(0,0,0,.2) 60%, transparent 100%); } .spotlight{ position:fixed; inset:0; z-index:2; pointer-events:none; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.06), transparent 60%); } .scroll-progress{ position:fixed; top:0; left:0; width:0%; height:3px; z-index:120; background: linear-gradient(90deg, var(--blue), var(--violet-2), var(--cyan)); box-shadow: 0 0 20px rgba(124,58,237,.7); } .nav{ position:sticky; top:0; z-index:100; backdrop-filter: blur(16px); background: linear-gradient(to bottom, rgba(6,8,18,.9), rgba(6,8,18,.62)); border-bottom:1px solid rgba(255,255,255,.05); } .nav-inner{ height:78px; display:flex; align-items:center; justify-content:space-between; gap:18px; } .nav-premium{gap:16px} .header-search-wrap{position:relative;flex:1;max-width:520px;margin-left:20px} .header-search{ height:46px;display:flex;align-items:center;gap:10px;padding:0 12px 0 15px; border-radius:15px;border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.035);transition:.25s } .header-search:focus-within{ border-color:rgba(124,58,237,.45); background:rgba(255,255,255,.05); box-shadow:0 0 0 4px rgba(124,58,237,.07) } .header-search svg{width:18px;height:18px;color:#8c97ad} .header-search input{ flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff;font-size:14px } .header-search input::placeholder{color:#78839a} .header-search-results{ position:absolute;left:0;right:0;top:54px;padding:8px;border-radius:18px; border:1px solid rgba(255,255,255,.11);background:rgba(8,12,22,.97); box-shadow:0 22px 60px rgba(0,0,0,.42);backdrop-filter:blur(20px); opacity:0;visibility:hidden;transform:translateY(-6px);transition:.2s;z-index:120 } .header-search-wrap.open .header-search-results{opacity:1;visibility:visible;transform:none} .header-result{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 12px;border-radius:12px;cursor:pointer;color:#dbe0ec;transition:.2s } .header-result:hover{background:rgba(255,255,255,.055)} .header-result-left{display:flex;align-items:center;gap:10px} .header-result small{display:block;color:#748099;font-size:11px;margin-top:1px} .header-result > svg{width:15px;height:15px;color:#758099} .nav-links-compact{gap:8px} .nav-links-compact>a,.nav-drop-btn{ display:flex;align-items:center;gap:7px;padding:9px 10px;border-radius:11px; color:#b7bfd2;font-size:13px;background:transparent;border:0;cursor:pointer;transition:.2s } .nav-links-compact>a:hover,.nav-drop-btn:hover{background:rgba(255,255,255,.045);color:#fff} .nav-links-compact>a svg,.nav-drop-btn svg{width:15px;height:15px} .nav-dropdown{position:relative} .mega-menu{ position:absolute;top:46px;right:0;width:520px;padding:12px;border-radius:20px; display:grid;grid-template-columns:1fr 1fr;gap:8px; border:1px solid rgba(255,255,255,.11);background:rgba(8,12,22,.98); box-shadow:0 24px 70px rgba(0,0,0,.46);backdrop-filter:blur(22px); opacity:0;visibility:hidden;transform:translateY(-8px);transition:.22s;z-index:130 } .nav-dropdown:hover .mega-menu{opacity:1;visibility:visible;transform:none} .mega-menu a{ display:flex;align-items:center;gap:11px;padding:11px;border-radius:13px;transition:.2s } .mega-menu a:hover{background:rgba(255,255,255,.05)} .mega-menu strong{display:block;font-size:12px} .mega-menu small{display:block;color:#748099;font-size:10px} .mega-menu .tiny-icon{width:34px;height:34px;border-radius:11px} .nav-actions-premium{margin-left:auto} .nav.compact .nav-inner{height:64px} .nav.compact{background:rgba(6,8,18,.88);box-shadow:0 12px 30px rgba(0,0,0,.18)} .brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-.03em; } .brand-mark{ width:38px;height:38px;border-radius:14px;display:grid;place-items:center; background:linear-gradient(135deg, var(--blue), var(--violet-2)); box-shadow:0 10px 28px rgba(124,58,237,.34), inset 0 1px 0 rgba(255,255,255,.24); } .brand-mark svg{width:20px;height:20px} .nav-links{display:flex; gap:24px; color:#b7bfd2; font-size:14px} .nav-links a{position:relative; transition:.25s} .nav-links a:hover{color:#fff} .nav-links a:after{ content:""; position:absolute; left:0; bottom:-8px; width:0; height:2px; background:linear-gradient(90deg, var(--blue), var(--violet-2)); transition:.25s; } .nav-links a:hover:after{width:100%} .nav-actions{display:flex; align-items:center; gap:10px} .icon-btn,.btn{ border:1px solid var(--line); color:#fff; cursor:pointer; transition:.25s ease; background:rgba(255,255,255,.04); } .icon-btn{ width:42px;height:42px;border-radius:14px;display:grid;place-items:center; } .icon-btn:hover,.btn:hover{transform:translateY(-2px)} .btn{ display:inline-flex; align-items:center; gap:9px; padding:12px 18px; border-radius:14px; font-weight:700; } .btn svg{width:16px;height:16px} .btn-primary{ border-color:transparent; background:linear-gradient(135deg, var(--blue), var(--violet-2)); box-shadow:0 14px 36px rgba(124,58,237,.3); } .btn-ghost:hover,.icon-btn:hover{background:rgba(255,255,255,.08);border-color:var(--line-2)} .btn-primary:hover{box-shadow:0 16px 42px rgba(124,58,237,.38)} .mobile-toggle{display:none} @media (max-width:1040px){ .nav-links{display:none} .mobile-toggle{display:grid} .header-search-wrap{max-width:none} } @media (max-width:700px){ .header-search-wrap{margin-left:0} .header-search .search-shortcut{display:none} .brand span:last-child{display:none} .nav-inner{gap:10px} } section{position:relative; z-index:3; padding:92px 0} .section-kicker{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#dacbff; background:rgba(124,58,237,.11); border:1px solid rgba(168,85,247,.22); } .section-head{text-align:center; max-width:760px; margin:0 auto 42px} .section-head .section-kicker{margin-bottom:16px} .section-title{ margin:0 0 12px; font-size:clamp(34px, 5vw, 58px); line-height:1.04; letter-spacing:-.05em; } .section-sub{ margin:0 auto; color:var(--muted); font-size:17px; max-width:700px; } .gradient-text{ background: linear-gradient(90deg, #fff 0%, #b8c9ff 24%, #9b6bff 58%, #dc86ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; } /* HERO */ .hero{padding-top:84px; padding-bottom:74px;} .hero-grid{ display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center; } .hero h1{ margin:18px 0 16px; font-size:clamp(48px, 7vw, 84px); line-height:.96; letter-spacing:-.065em; max-width:700px; } .hero p{margin:0 0 28px; color:var(--muted); max-width:620px; font-size:18px} .hero-actions{display:flex; gap:12px; flex-wrap:wrap} .hero-search-wrap{position:relative;max-width:650px;margin:0 0 18px} .hero-search{ position:relative;display:flex;align-items:center;gap:12px; min-height:66px;padding:0 14px 0 18px;border-radius:20px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035)); box-shadow:0 18px 50px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(18px);transition:.28s ease } .hero-search:focus-within{ border-color:rgba(139,92,246,.58); box-shadow:0 20px 60px rgba(44,32,90,.32),0 0 0 4px rgba(124,58,237,.08) } .hero-search svg{width:21px;height:21px;color:#aab4c9;flex:0 0 auto} .hero-search input{ flex:1;min-width:0;border:0;outline:0;background:transparent;color:#fff; font-size:16px;font-weight:600 } .hero-search input::placeholder{color:#7f899f;font-weight:500} .search-shortcut{ display:flex;align-items:center;gap:5px;padding:7px 9px;border-radius:10px; border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.045); color:#949db2;font-size:11px;font-weight:700;white-space:nowrap } .search-go{ width:40px;height:40px;border-radius:12px;border:0;display:grid;place-items:center;cursor:pointer; color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet-2)); box-shadow:0 10px 24px rgba(124,58,237,.28);transition:.25s } .search-go:hover{transform:translateY(-2px) scale(1.02)} .hero-search-results{ position:absolute;left:0;right:0;top:76px;z-index:30; border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:8px; background:rgba(9,13,24,.96);backdrop-filter:blur(22px);box-shadow:0 24px 70px rgba(0,0,0,.42); opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s } .hero-search-wrap.open .hero-search-results{opacity:1;visibility:visible;transform:none} .search-result{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 12px;border-radius:12px;color:#d8ddeb;cursor:pointer;transition:.2s } .search-result:hover{background:rgba(255,255,255,.055)} .search-result-left{display:flex;align-items:center;gap:10px} .search-result .tiny-icon{width:32px;height:32px;border-radius:10px} .search-result small{display:block;color:#738098;margin-top:1px} .hero-quick{ display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 20px; color:#7f899f;font-size:12px } .quick-chip{ padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035);color:#b6bfd0;cursor:pointer;transition:.2s } .quick-chip:hover{color:#fff;border-color:rgba(124,58,237,.34);background:rgba(124,58,237,.10)} .hero-trust{display:flex; gap:20px; flex-wrap:wrap; margin-top:28px} .trust-item{display:flex; align-items:center; gap:10px; color:#c5cbda; font-size:13px} .trust-dot{ width:30px;height:30px;border-radius:10px; display:grid;place-items:center; border:1px solid var(--line); background:rgba(255,255,255,.045); } .hero-card{ position:relative; border:1px solid rgba(255,255,255,.09); border-radius:28px; overflow:hidden; box-shadow:var(--shadow); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), rgba(10,13,24,.86); transform: perspective(1200px) rotateY(-4deg) rotateX(2deg); transform-style:preserve-3d; transition: transform .3s ease; } .hero-card:hover{transform: perspective(1200px) rotateY(-2deg) rotateX(1deg) translateY(-4px)} .hero-card::before{ content:""; position:absolute; inset:-1px; pointer-events:none; background:linear-gradient(120deg, rgba(79,124,255,.35), transparent 28%, transparent 72%, rgba(168,85,247,.35)); opacity:.28; } .window-bar{ height:54px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; padding:0 18px; } .dots{display:flex; gap:8px} .dots span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)} .dashboard{ display:grid; grid-template-columns:168px 1fr; min-height:420px; } .sidebar{ padding:16px; border-right:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.015); } .side-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; color:#8d96ab; font-size:12px; margin-bottom:5px; } .side-item.active{background:linear-gradient(135deg, rgba(124,58,237,.30), rgba(79,124,255,.14));color:#fff} .dash-main{padding:18px} .searchbox{ height:42px; display:flex; align-items:center; gap:10px; padding:0 13px; border-radius:13px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:#727c91; font-size:12px; } .dash-top{ display:flex; justify-content:space-between; gap:14px; align-items:flex-end; margin:18px 0 14px; } .dash-top h3{margin:0; font-size:18px} .dash-top small{color:#737e95} .mini-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .mini-stat,.tool-mini{ border:1px solid rgba(255,255,255,.08); border-radius:15px; background:rgba(255,255,255,.04); } .mini-stat{padding:12px} .mini-stat b{display:block;font-size:15px} .mini-stat span{font-size:10px;color:#768097} .tool-mini-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:12px; } .tool-mini{padding:12px; transition:.25s} .tool-mini:hover{background:rgba(255,255,255,.06); transform:translateY(-2px)} .tool-mini-head{display:flex; align-items:center; gap:10px} .tiny-icon{ width:32px;height:32px;border-radius:11px;display:grid;place-items:center; background:linear-gradient(135deg, rgba(124,58,237,.34), rgba(79,124,255,.16)); border:1px solid rgba(255,255,255,.10); } .tool-mini b{font-size:11px} .tool-mini p{margin:5px 0 0; font-size:9px; color:#768196} .hero-floating-badge{ position:absolute; right:18px; bottom:18px; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; border:1px solid rgba(255,255,255,.12); background:rgba(10,13,24,.85); box-shadow:0 14px 30px rgba(0,0,0,.25); animation: pulseFloat 3s ease-in-out infinite; } .hero-floating-badge i{color:var(--cyan)} @keyframes pulseFloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } @media (max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:42px} .hero-card{transform:none} } @media (max-width:640px){ .hero{padding-top:58px} .hero p{font-size:16px} .dashboard{grid-template-columns:1fr} .sidebar{display:none} .mini-stats{grid-template-columns:repeat(2,1fr)} .hero-floating-badge{display:none} } /* marquee */ .marquee-wrap{ position:relative; overflow:hidden; border-top:1px solid rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.05); background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); } .marquee{ display:flex; width:max-content; gap:14px; padding:16px 0; animation: marquee 34s linear infinite; } .marquee-wrap:hover .marquee{animation-play-state:paused} .marquee-item{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:#d6d9e4; white-space:nowrap; font-size:14px; } .marquee-item svg{width:16px;height:16px;color:#92a6ff} @keyframes marquee{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} } /* categories */ .categories-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .category-card{ position:relative; overflow:hidden; padding:24px; min-height:190px; border-radius:22px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); transition:.28s ease; } .category-card:hover{transform:translateY(-6px); border-color:var(--line-2)} .category-card::after{ content:""; position:absolute; right:-40px; bottom:-40px; width:150px;height:150px;border-radius:50%; background: radial-gradient(circle, rgba(124,58,237,.18), transparent 70%); } .category-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start} .category-icon{ width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); } .category-icon svg{width:22px;height:22px} .category-card h3{margin:22px 0 8px; font-size:20px; letter-spacing:-.03em} .category-card p{margin:0 0 16px; color:var(--muted); font-size:14px} .mini-pill-row{display:flex; flex-wrap:wrap; gap:8px} .mini-pill{ padding:6px 10px; border-radius:999px; font-size:11px; color:#c4cbdc; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); } @media (max-width:980px){ .categories-grid{grid-template-columns:1fr 1fr;} } @media (max-width:640px){ .categories-grid{grid-template-columns:1fr;} } /* tools */ .tabs{ display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-bottom:30px; } .tab{ border:1px solid var(--line); background:rgba(255,255,255,.035); color:#a9b0c3; border-radius:999px; padding:10px 15px; cursor:pointer; font-size:12px; font-weight:800; transition:.25s; } .tab.active,.tab:hover{background:rgba(124,58,237,.17); color:#fff; border-color:rgba(124,58,237,.45)} .tools-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .tool-card{ position:relative; overflow:hidden; min-height:190px; padding:20px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); transition:.3s ease; } .tool-card:hover{transform:translateY(-6px); border-color:var(--line-2)} .tool-card .tiny-icon{width:44px;height:44px;border-radius:14px} .tool-card .tiny-icon svg{width:20px;height:20px} .tool-card h3{font-size:16px; margin:18px 0 6px} .tool-card p{font-size:13px; color:var(--muted); margin:0 0 18px} .tool-card .tool-meta{display:flex; align-items:center; justify-content:space-between; color:#8c96ab; font-size:12px} .tool-card .arrow-box{ position:absolute; right:16px; top:16px; width:34px;height:34px;border-radius:11px; display:grid;place-items:center;border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); } @media (max-width:980px){ .tools-grid{grid-template-columns:1fr 1fr;} } @media (max-width:640px){ .tools-grid{grid-template-columns:1fr;} } /* interactive demo */ .demo-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:22px; } .panel{ border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.028)); border-radius:24px; padding:24px; box-shadow:var(--shadow); } .panel h3{margin:0 0 10px; font-size:22px; letter-spacing:-.03em} .panel p{margin:0 0 22px; color:var(--muted)} .upload-zone{ border:1.5px dashed rgba(255,255,255,.18); border-radius:20px; padding:26px; text-align:center; background:rgba(255,255,255,.03); } .upload-icon{ width:58px; height:58px; border-radius:18px; margin:0 auto 12px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(79,124,255,.28), rgba(168,85,247,.24)); border:1px solid rgba(255,255,255,.10); } .range-row{margin-top:18px} .range-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13px; color:#cfd5e3} .fake-range{ position:relative; height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; } .fake-range-fill{ position:absolute; inset:0 auto 0 0; width:72%; background:linear-gradient(90deg, var(--blue), var(--violet-2)); border-radius:999px; } .demo-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px} .demo-stat{padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:16px; background:rgba(255,255,255,.03)} .demo-stat b{display:block} .demo-stat span{color:#7f8aa1; font-size:11px} .typing-box{ padding:20px; min-height:280px; border-radius:18px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03) } .type-area{ min-height:120px; padding:16px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); color:#dae0ec; font-size:15px; } .word-metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px} .word-metrics .demo-stat{min-height:88px} @media (max-width:980px){ .demo-grid{grid-template-columns:1fr} .word-metrics{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .demo-stats{grid-template-columns:1fr} .word-metrics{grid-template-columns:1fr} } /* How it works */ .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .step{ padding:24px; border-radius:22px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); position:relative; } .step-num{ width:42px;height:42px;border-radius:14px; display:grid; place-items:center; font-weight:800; background:linear-gradient(135deg, var(--blue), var(--violet-2)); margin-bottom:18px; } .step h3{margin:0 0 8px; font-size:18px} .step p{margin:0; color:var(--muted); font-size:14px} @media (max-width:980px){ .steps{grid-template-columns:1fr;} } /* new tools + popular search */ .two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px; } .new-tools-list{display:grid; gap:12px} .new-tool{ display:flex; justify-content:space-between; gap:16px; align-items:center; padding:16px 18px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.035); transition:.25s; } .new-tool:hover{transform:translateX(6px); border-color:var(--line-2)} .new-tool-left{display:flex; align-items:center; gap:12px} .new-tool h4{margin:0; font-size:15px} .new-tool p{margin:2px 0 0; color:var(--muted); font-size:12px} .new-badge{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-size:11px; font-weight:800; color:#ffe8b5; border:1px solid rgba(245,158,11,.25); background:rgba(245,158,11,.10); } .popular-tags{ display:flex; flex-wrap:wrap; gap:10px; } .tag{ padding:10px 14px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.035); color:#c8d0df; font-size:13px; transition:.25s; cursor:pointer; } .tag:hover{background:rgba(124,58,237,.14); border-color:rgba(124,58,237,.35); color:#fff; transform:translateY(-2px)} @media (max-width:980px){ .two-col{grid-template-columns:1fr;} } /* comparison */ .compare{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .compare-card{ border:1px solid var(--line); border-radius:24px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); } .compare-head{ padding:20px 22px; display:flex; align-items:center; gap:10px; border-bottom:1px solid rgba(255,255,255,.06); } .compare-body{padding:8px 22px 22px} .compare-row{ display:flex; justify-content:space-between; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.06) } .compare-row:last-child{border-bottom:0} .good{color:#95f1bb} .bad{color:#ffb3c2} @media (max-width:980px){ .compare{grid-template-columns:1fr;} } /* stats */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:26px; overflow:hidden; box-shadow:var(--shadow) } .stat{ padding:28px 24px; background:#0b0f19; display:flex; align-items:center; gap:14px; } .stat strong{display:block; font-size:28px; letter-spacing:-.03em} .stat span{font-size:12px; color:#7e899f} @media (max-width:980px){ .stats{grid-template-columns:1fr 1fr;} } @media (max-width:640px){ .stats{grid-template-columns:1fr;} } /* testimonials */ .testi-wrap{overflow:hidden} .testi-track{ display:flex; width:max-content; gap:16px; animation: marquee 38s linear infinite; } .testi-wrap:hover .testi-track{animation-play-state:paused} .testi{ width:360px; padding:22px; border-radius:22px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)); } .testi-top{display:flex; align-items:center; gap:12px; margin-bottom:14px} .avatar{ width:44px;height:44px;border-radius:50%; background:linear-gradient(135deg, var(--blue), var(--violet-2)); display:grid;place-items:center; font-weight:800; } .stars{display:flex; gap:4px; color:#ffca63} .testi p{margin:0; color:#d8dce8} .testi small{color:#8792a8} @media (max-width:640px){ .testi{width:290px} } /* command palette */ .palette{ border:1px solid rgba(255,255,255,.10); border-radius:28px; padding:30px; background: radial-gradient(450px 220px at 15% 15%, rgba(79,124,255,.20), transparent 65%), radial-gradient(460px 240px at 85% 85%, rgba(168,85,247,.18), transparent 65%), linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); box-shadow:var(--shadow) } .palette-box{ margin-top:22px; border:1px solid rgba(255,255,255,.10); border-radius:22px; overflow:hidden; background:#0d1322; } .palette-input{ height:62px; display:flex; align-items:center; gap:12px; padding:0 18px; color:#7d879d; border-bottom:1px solid rgba(255,255,255,.06); } .palette-suggestions{padding:12px} .suggestion{ display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 12px; border-radius:14px; color:#cfd5e4; transition:.2s; } .suggestion:hover{background:rgba(255,255,255,.04)} .kbd{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#9da6ba; padding:4px 8px; border-radius:10px; font-size:12px; } /* faq */ .faq-list{max-width:860px;margin:auto; display:grid; gap:12px} .faq{ border:1px solid var(--line); border-radius:18px; overflow:hidden; background:rgba(255,255,255,.035); } .faq-btn{ width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:14px; background:transparent; border:0; color:#fff; padding:18px 20px; cursor:pointer; } .faq-btn span{font-weight:700} .faq-content{ max-height:0; overflow:hidden; transition:max-height .3s ease; padding:0 20px; color:var(--muted); } .faq.open .faq-content{padding:0 20px 18px; max-height:220px} /* CTA */ .cta{ position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.13); border-radius:32px;padding:52px 54px;min-height:320px; background: radial-gradient(520px 280px at 8% 110%, rgba(79,124,255,.30), transparent 68%), radial-gradient(560px 300px at 100% 0%, rgba(168,85,247,.28), transparent 68%), linear-gradient(135deg,#101628 0%,#0a0e19 50%,#0d1020 100%); box-shadow:0 30px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.06); display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:38px } .cta::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.34; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:34px 34px;mask-image:linear-gradient(to right,#000,transparent 72%) } .cta-copy,.cta-side{position:relative;z-index:2} .cta h2{margin:14px 0 12px;font-size:clamp(34px,4.6vw,56px);line-height:1.02;letter-spacing:-.055em;max-width:760px} .cta p{margin:0;color:#9fa9bd;font-size:16px;max-width:700px} .cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} .cta-side{ justify-self:end;width:min(100%,320px);padding:20px;border-radius:24px; border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);backdrop-filter:blur(14px) } .cta-mini{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)} .cta-mini:last-child{border-bottom:0} .cta-mini-icon{ width:38px;height:38px;border-radius:12px;display:grid;place-items:center; background:linear-gradient(135deg,rgba(79,124,255,.24),rgba(168,85,247,.20)); border:1px solid rgba(255,255,255,.09) } .cta-mini strong{display:block;font-size:13px} .cta-mini span{color:#7f8aa1;font-size:11px} @media (max-width:820px){ .cta{grid-template-columns:1fr;padding:34px;min-height:0} .cta-side{justify-self:stretch;width:100%} } .premium-footer{ position:relative;z-index:3;overflow:hidden;padding:34px 0 24px; border-top:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,rgba(8,12,22,.64),rgba(5,8,15,.96)) } .footer-glow{ position:absolute;border-radius:50%;filter:blur(50px);opacity:.18;pointer-events:none } .footer-glow-one{width:420px;height:420px;background:rgba(79,124,255,.24);left:8%;bottom:-250px} .footer-glow-two{width:380px;height:380px;background:rgba(168,85,247,.22);right:4%;top:-250px} .footer-top-card{ position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:28px; padding:28px 30px;margin-bottom:38px;border-radius:24px; border:1px solid rgba(255,255,255,.10); background:linear-gradient(135deg,rgba(79,124,255,.10),rgba(168,85,247,.08),rgba(255,255,255,.035)); box-shadow:0 18px 50px rgba(0,0,0,.24) } .footer-kicker{ display:inline-flex;align-items:center;gap:7px;color:#cdbdff;font-size:11px; font-weight:800;text-transform:uppercase;letter-spacing:.08em } .footer-kicker svg{width:14px;height:14px} .footer-top-card h3{margin:8px 0 4px;font-size:24px;letter-spacing:-.035em} .footer-top-card p{margin:0;color:#8e99ae;font-size:13px} .premium-footer-grid{ position:relative;z-index:2; display:grid;grid-template-columns:1.65fr repeat(4,1fr);gap:34px } .footer-brand-col{padding-right:20px} .footer-col h4{ margin:0 0 15px;color:#748099;font-size:11px;text-transform:uppercase;letter-spacing:.10em } .footer-col a{display:block;margin:9px 0;color:#aab3c5;font-size:13px;transition:.2s} .footer-col a:hover{color:#fff;transform:translateX(3px)} .footer-note{max-width:350px;color:#8994a9;font-size:13px;margin:14px 0 0} .footer-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .footer-trust span{ display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px; border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035); color:#9ca7bb;font-size:11px } .footer-trust svg{width:13px;height:13px} .premium-socials{display:flex;gap:9px;margin-top:17px} .premium-socials a{ width:40px;height:40px;border-radius:13px;display:grid;place-items:center; border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035); color:#b8c0d1;transition:.24s } .premium-socials a svg{width:17px;height:17px} .premium-socials a:hover{ color:#fff;transform:translateY(-3px); border-color:rgba(124,58,237,.38); background:linear-gradient(135deg,rgba(79,124,255,.18),rgba(168,85,247,.16)) } .premium-footer-bottom{ position:relative;z-index:2;margin-top:34px;padding-top:18px; border-top:1px solid rgba(255,255,255,.06); display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px; color:#6f7b92;font-size:11px } .footer-mini-links{display:flex;align-items:center;gap:9px} .footer-mini-links a{color:#7f8a9f} .footer-mini-links a:hover{color:#fff} .footer-status{justify-self:end;display:flex;align-items:center;gap:8px} .footer-status span{ width:7px;height:7px;border-radius:50%;background:#38d989; box-shadow:0 0 12px rgba(56,217,137,.7) } @media (max-width:980px){ .premium-footer-grid{grid-template-columns:1fr 1fr 1fr} .footer-brand-col{grid-column:1/-1} .footer-top-card{align-items:flex-start;flex-direction:column} .premium-footer-bottom{grid-template-columns:1fr;justify-items:start} .footer-status{justify-self:start} } @media (max-width:640px){ .premium-footer-grid{grid-template-columns:1fr 1fr} .footer-brand-col{grid-column:1/-1} .footer-top-card{padding:22px} } .reveal{opacity:0; transform:translateY(18px); transition:.65s ease} .reveal.show{opacity:1; transform:none} .magnetic{position:relative; will-change:transform;} /* Toolnexa PHP dynamic additions */ body{min-height:100vh} main{position:relative;z-index:3} .flash{margin:18px auto;width:min(var(--max),calc(100% - 40px));padding:12px 16px;border:1px solid rgba(34,197,94,.25);background:rgba(34,197,94,.09);border-radius:14px;color:#c8f7d7} .empty-state{padding:28px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:18px;background:rgba(255,255,255,.025)} .search-result-link{display:block} .tool-card a.stretch-link{position:absolute;inset:0;z-index:3} .tool-card .tiny-icon,.tool-card h3,.tool-card p,.tool-card .tool-meta,.tool-card .arrow-box{position:relative;z-index:4;pointer-events:none} .category-card a.stretch-link{position:absolute;inset:0;z-index:3} .category-card>*{position:relative;z-index:4;pointer-events:none} .tool-page{padding:90px 0} .tool-shell{display:grid;grid-template-columns:1fr 340px;gap:22px;align-items:start} .tool-workspace,.tool-info-card{border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));box-shadow:var(--shadow)} .tool-workspace{padding:28px;min-height:440px}.tool-info-card{padding:22px;position:sticky;top:92px}.tool-page h1{font-size:clamp(38px,5vw,64px);letter-spacing:-.05em;margin:14px 0 10px}.tool-page p{color:var(--muted)} .tool-placeholder{margin-top:24px;padding:34px;border:1.5px dashed rgba(255,255,255,.14);border-radius:20px;text-align:center;background:rgba(255,255,255,.025)} @media(max-width:900px){.tool-shell{grid-template-columns:1fr}.tool-info-card{position:static}} /* ===== Toolnexa V2 premium library & content pages ===== */ .featured-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.all-tools-section{background:radial-gradient(800px 420px at 50% 40%,rgba(42,113,134,.08),transparent 64%)} .all-tools-premium-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.premium-tool-card{position:relative;min-height:270px;padding:22px;border-radius:24px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(155deg,rgba(255,255,255,.062),rgba(255,255,255,.022));overflow:hidden;transition:.32s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.premium-tool-card:before{content:"";position:absolute;inset:0;opacity:0;transition:.32s;background:radial-gradient(320px circle at var(--card-x,50%) var(--card-y,40%),rgba(124,58,237,.13),transparent 62%);pointer-events:none}.premium-tool-card:after{content:"";position:absolute;width:150px;height:150px;right:-70px;bottom:-85px;border-radius:50%;background:radial-gradient(circle,rgba(79,124,255,.17),transparent 70%);pointer-events:none}.premium-tool-card:hover{transform:translateY(-7px);border-color:rgba(161,124,255,.26);box-shadow:0 24px 60px rgba(0,0,0,.28)}.premium-tool-card:hover:before{opacity:1}.premium-tool-card>*{position:relative;z-index:2}.tool-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:30px}.tool-icon-media{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(79,124,255,.20),rgba(168,85,247,.18));border:1px solid rgba(150,125,255,.20);box-shadow:0 12px 28px rgba(80,55,170,.12)}.tool-icon-media svg{width:24px;height:24px}.tool-icon-media.has-image{background:rgba(255,255,255,.045);padding:9px}.tool-icon-media img{max-width:100%;max-height:100%;object-fit:contain;display:block}.tool-open{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#8390a6;transition:.25s}.premium-tool-card:hover .tool-open{color:#fff;background:rgba(124,58,237,.13);transform:translate(2px,-2px)}.premium-tool-card h3{margin:0 0 9px;font-size:18px;letter-spacing:-.025em}.premium-tool-card p{margin:0;color:#9ba5b9;font-size:13px;line-height:1.65;min-height:44px}.tool-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.tool-badges{display:flex;gap:7px;position:absolute;top:24px;left:86px}.tool-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;font-size:9px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;border:1px solid rgba(255,255,255,.08)}.tool-badge.popular{color:#e6dbff;background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.22)}.tool-badge.new{color:#bfeff8;background:rgba(34,211,238,.09);border-color:rgba(34,211,238,.20)}.premium-tool-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.055);font-size:11px;color:#7f8ba1}.premium-tool-meta span{display:flex;align-items:center;gap:6px}.premium-tool-meta svg{width:13px;height:13px}.free-label{color:#9dd9bb!important}.library-toolbar{display:flex;flex-direction:column;gap:14px;margin-bottom:24px}.library-search{height:54px;display:flex;align-items:center;gap:10px;padding:0 16px;border:1px solid rgba(255,255,255,.09);border-radius:17px;background:rgba(255,255,255,.035)}.library-search input{flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:14px}.library-search svg{width:18px;height:18px;color:#7f8ba1}.library-filters{display:flex;gap:8px;flex-wrap:wrap}.library-filter{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025);color:#97a2b7;padding:8px 11px;border-radius:999px;font-size:11px;cursor:pointer;transition:.2s}.library-filter:hover,.library-filter.active{color:#fff;border-color:rgba(124,58,237,.35);background:rgba(124,58,237,.12)}.home-tool-hidden{display:none}.library-actions{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap}.empty-state{text-align:center;padding:48px;border:1px dashed rgba(255,255,255,.09);border-radius:22px;color:#8390a6}.empty-state svg{width:30px;height:30px}.empty-state h3{color:#fff;margin:10px 0 5px}.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.testimonial-card{padding:22px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02))}.testimonial-user{display:flex;align-items:center;gap:11px}.testimonial-user>div:nth-child(2){min-width:0}.testimonial-user strong{display:block;font-size:13px}.testimonial-user span{display:block;color:#7f8ba1;font-size:11px}.testimonial-headshot,.testimonial-avatar{width:46px;height:46px;border-radius:14px;object-fit:cover;border:1px solid rgba(255,255,255,.10)}.testimonial-avatar{display:grid;place-items:center;background:linear-gradient(135deg,#4f7cff,#a855f7);font-weight:800}.testimonial-rating{margin-left:auto;display:flex!important;flex-direction:row;gap:2px;color:#f8c96d}.testimonial-rating svg{width:12px;height:12px;fill:currentColor}.testimonial-card>p{margin:18px 0 0;color:#c4cada;font-size:14px;line-height:1.7}.content-page{padding-top:78px}.content-hero{max-width:860px;margin:0 auto 36px;text-align:center}.content-hero h1{font-size:clamp(42px,7vw,74px);line-height:1;letter-spacing:-.055em;margin:14px 0}.content-hero p{color:#9ca6ba;font-size:17px}.content-layout{display:grid;grid-template-columns:1fr .75fr;gap:18px;align-items:start}.content-card,.content-form-card{border:1px solid rgba(255,255,255,.09);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));padding:28px}.prose p{color:#b7c0d0;font-size:15px;line-height:1.9;margin:0 0 18px}.field-light{display:grid;gap:7px;margin-bottom:13px}.field-light label{font-size:11px;color:#8b96aa}.field-light input,.field-light textarea{border:1px solid rgba(255,255,255,.09);border-radius:13px;background:rgba(255,255,255,.035);color:#fff;padding:11px 12px;outline:0}.field-light textarea{min-height:130px;resize:vertical}.form-success,.form-error{padding:11px 12px;border-radius:12px;margin-bottom:14px;font-size:12px}.form-success{background:rgba(34,197,94,.09);color:#baf0ce;border:1px solid rgba(34,197,94,.2)}.form-error{background:rgba(239,68,68,.09);color:#fecaca;border:1px solid rgba(239,68,68,.2)} .premium-socials a svg{width:17px;height:17px;display:block}.premium-socials a{color:#aab4c7}.premium-socials a:hover{color:#fff} @media(max-width:980px){.featured-grid,.all-tools-premium-grid{grid-template-columns:repeat(2,1fr)}.testimonials-grid{grid-template-columns:1fr 1fr}.content-layout{grid-template-columns:1fr}}@media(max-width:640px){.featured-grid,.all-tools-premium-grid,.testimonials-grid{grid-template-columns:1fr}.premium-tool-card{min-height:245px}.library-actions{flex-direction:column}.library-actions .btn{justify-content:center}.content-card,.content-form-card{padding:20px}} /* ===== V3 polish, cache-safe content pages & premium interactions ===== */ .premium-tool-card{transform-style:preserve-3d;isolation:isolate;cursor:pointer} .premium-tool-card::before{background:radial-gradient(380px circle at var(--card-x,50%) var(--card-y,35%),rgba(137,92,246,.20),transparent 58%)} .premium-tool-card::after{width:220px;height:220px;right:-120px;bottom:-145px;background:radial-gradient(circle,rgba(79,124,255,.22),transparent 68%);transition:.45s ease} .premium-tool-card:hover{transform:translateY(-9px) perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));border-color:rgba(151,112,255,.35);box-shadow:0 28px 80px rgba(0,0,0,.34),0 0 0 1px rgba(124,58,237,.08),inset 0 1px 0 rgba(255,255,255,.075)} .premium-tool-card:hover::after{transform:scale(1.25);opacity:.95}.premium-tool-card .tool-icon-media{transition:.32s cubic-bezier(.2,.8,.2,1)}.premium-tool-card:hover .tool-icon-media{transform:translateY(-3px) scale(1.06) rotate(-2deg);box-shadow:0 18px 38px rgba(91,63,200,.23),inset 0 1px 0 rgba(255,255,255,.13)} .premium-tool-card h3{transition:.25s}.premium-tool-card:hover h3{color:#fff;text-shadow:0 0 24px rgba(178,155,255,.12)} .premium-tool-meta{transition:.25s}.premium-tool-card:hover .premium-tool-meta{border-color:rgba(151,112,255,.14);color:#9ba7be} .tool-open{overflow:hidden}.tool-open svg{transition:.3s cubic-bezier(.2,.8,.2,1)}.premium-tool-card:hover .tool-open svg{transform:translate(2px,-2px) rotate(3deg)} .featured-grid .premium-tool-card{min-height:292px;background:radial-gradient(260px 160px at 90% 0%,rgba(124,58,237,.10),transparent 70%),linear-gradient(155deg,rgba(255,255,255,.067),rgba(255,255,255,.023))} .tool-badges{position:static;margin:-16px 0 15px 68px;min-height:22px}.tool-card-top{margin-bottom:8px}.tool-title-row{margin-top:8px}.premium-tool-card.featured h3{font-size:19px} .library-search{transition:.25s}.library-search:focus-within{border-color:rgba(124,58,237,.38);box-shadow:0 0 0 4px rgba(124,58,237,.06),0 16px 40px rgba(0,0,0,.16);background:rgba(255,255,255,.045)} .library-filter{position:relative;overflow:hidden}.library-filter::before{content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.06),transparent);transition:.45s}.library-filter:hover::before{transform:translateX(110%)} .testimonial-card{position:relative;overflow:hidden;min-height:240px;padding:26px;transition:.34s cubic-bezier(.2,.8,.2,1);background:radial-gradient(240px 160px at 100% 0%,rgba(124,58,237,.08),transparent 68%),linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018))} .testimonial-card::before{content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(320px circle at var(--card-x,50%) var(--card-y,30%),rgba(124,58,237,.14),transparent 62%);transition:.3s;pointer-events:none}.testimonial-card:hover{transform:translateY(-7px);border-color:rgba(151,112,255,.28);box-shadow:0 24px 60px rgba(0,0,0,.27)}.testimonial-card:hover::before{opacity:1}.testimonial-card>*{position:relative;z-index:2}.testimonial-quote{position:absolute!important;right:20px;bottom:18px;z-index:1!important;color:rgba(181,155,255,.12)}.testimonial-quote svg{width:58px;height:58px;fill:currentColor}.testimonial-headshot,.testimonial-avatar{width:54px;height:54px;border-radius:16px}.testimonial-card>p{font-size:14px;line-height:1.8;margin-top:24px;max-width:90%} .content-page{padding:92px 0 108px}.content-hero{max-width:860px;margin-bottom:46px}.content-hero .section-kicker{gap:7px}.content-hero h1{font-size:clamp(44px,6vw,72px)} .support-layout{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:stretch}.support-info,.premium-form-card,.legal-card,.mini-nav-card{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:26px;background:radial-gradient(360px 220px at 0% 100%,rgba(79,124,255,.09),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.021));box-shadow:0 22px 70px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)} .support-info{padding:34px;overflow:hidden}.support-info::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;right:-160px;bottom:-140px;background:radial-gradient(circle,rgba(168,85,247,.16),transparent 70%)}.support-info-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(79,124,255,.23),rgba(168,85,247,.20));border:1px solid rgba(255,255,255,.10);box-shadow:0 15px 34px rgba(93,62,196,.15)}.support-info-icon svg{width:25px;height:25px}.support-label{display:block;margin-top:26px;color:#8f9bb1;font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}.support-info h2{margin:7px 0 13px;font-size:30px;letter-spacing:-.04em}.support-info .prose p{font-size:14px;line-height:1.8}.support-points{display:grid;gap:11px;margin-top:26px}.support-points>div{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.065);background:rgba(255,255,255,.026)}.support-points>div>span{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(124,58,237,.09);color:#c8b8ff}.support-points svg{width:16px;height:16px}.support-points strong{display:block;font-size:12px}.support-points small{display:block;color:#748097;font-size:10px;margin-top:2px} .premium-form-card{padding:30px}.form-card-heading{display:flex;gap:12px;align-items:center;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.065)}.form-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(79,124,255,.22),rgba(168,85,247,.18));border:1px solid rgba(255,255,255,.09)}.form-card-heading strong{display:block;font-size:15px}.form-card-heading small{display:block;color:#77839a;font-size:10px;margin-top:3px}.form-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-light{gap:8px;margin-bottom:14px}.field-light label{font-size:11px;color:#929db2;font-weight:700}.field-light label b{color:#bd9dff}.field-light input,.field-light textarea{width:100%;border-radius:14px;min-height:47px;padding:12px 13px;background:rgba(255,255,255,.035);transition:.25s}.field-light input:focus,.field-light textarea:focus{border-color:rgba(124,58,237,.42);box-shadow:0 0 0 4px rgba(124,58,237,.065),0 12px 30px rgba(0,0,0,.12);background:rgba(255,255,255,.045)}.field-light textarea{min-height:150px}.form-submit{width:100%;justify-content:center;margin-top:2px;min-height:48px} .legal-layout{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start}.legal-card{padding:34px}.legal-card-top{display:flex;gap:12px;align-items:center;padding-bottom:18px;margin-bottom:24px;border-bottom:1px solid rgba(255,255,255,.06)}.legal-card-top>span{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:rgba(124,58,237,.09);color:#c6b6ff}.legal-card-top strong{display:block;font-size:13px}.legal-card-top small{display:block;color:#718099;font-size:10px;margin-top:2px}.premium-prose p{font-size:15px;line-height:1.95;color:#b7c0d0}.legal-aside{position:sticky;top:96px}.mini-nav-card{padding:18px}.mini-nav-card>strong{display:block;margin-bottom:10px;font-size:12px}.mini-nav-card a{display:flex;align-items:center;justify-content:space-between;padding:10px 9px;border-radius:11px;color:#8f9bb1;font-size:11px;transition:.2s}.mini-nav-card a:hover{color:#fff;background:rgba(255,255,255,.04)}.mini-nav-card svg{width:13px;height:13px} @media(max-width:900px){.support-layout,.legal-layout{grid-template-columns:1fr}.legal-aside{position:static}.form-two{grid-template-columns:1fr}} @media(max-width:640px){.support-info,.premium-form-card,.legal-card{padding:22px}.content-page{padding-top:68px}.testimonial-card{min-height:0}.tool-badges{margin-left:68px}} /* ===== V4 accounts, fixed routing, static hero mock & richer interaction ===== */ .nav-signin{padding:10px 13px;border-radius:12px;color:#d1d7e5;font-size:13px;font-weight:750}.nav-signin:hover{background:rgba(255,255,255,.05);color:#fff}.nav-signup{padding:10px 14px;font-size:12px}.user-nav-dropdown{position:relative}.user-nav-button{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:14px;padding:6px 10px;color:#fff;cursor:pointer}.user-nav-button>svg{width:14px}.nav-user-avatar{width:31px;height:31px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--violet-2));font-size:11px;font-weight:800;overflow:hidden}.nav-user-avatar img{width:100%;height:100%;object-fit:cover}.user-menu{position:absolute;right:0;top:48px;width:190px;padding:8px;background:rgba(8,12,22,.98);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-7px);transition:.2s}.user-nav-dropdown:hover .user-menu{opacity:1;visibility:visible;transform:none}.user-menu a{display:flex;align-items:center;gap:9px;padding:10px;border-radius:10px;color:#b7bfd0;font-size:12px}.user-menu a:hover{background:rgba(255,255,255,.05);color:#fff}.user-menu svg{width:15px} .hero-workspace-mock{isolation:isolate}.hero-workspace-mock .mock-card{position:relative;overflow:hidden}.hero-workspace-mock .mock-card:after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.08),transparent 58%);transform:translateX(-60%);animation:mockShimmer 5s linear infinite}.mock-cursor{display:inline-block;width:1px;height:13px;background:#7e8da7;margin-left:2px;animation:blink 1s steps(1) infinite}.mock-orbit{position:absolute;border:1px solid rgba(124,58,237,.16);border-radius:50%;pointer-events:none}.mock-orbit.one{width:190px;height:190px;right:-90px;bottom:-80px;animation:orbitPulse 7s ease-in-out infinite}.mock-orbit.two{width:90px;height:90px;right:60px;top:100px;animation:orbitPulse 5s ease-in-out infinite reverse}@keyframes mockShimmer{to{transform:translateX(120%)}}@keyframes blink{50%{opacity:0}}@keyframes orbitPulse{50%{transform:scale(1.12);opacity:.35}} .search-loading{display:flex;align-items:center;gap:9px;padding:14px;color:#808ba2;font-size:12px}.header-result .tiny-icon img{width:100%;height:100%;object-fit:contain} .premium-tool-card{cursor:pointer}.premium-tool-card:before{transition:opacity .3s,transform .45s}.premium-tool-card:hover:before{opacity:.8;transform:scale(1.08)}.premium-tool-card:hover .tool-icon-media{transform:translateY(-3px) scale(1.06);box-shadow:0 13px 30px rgba(124,58,237,.22)}.premium-tool-card:hover .tool-open{transform:translate(2px,-2px) rotate(4deg);background:rgba(124,58,237,.16);border-color:rgba(168,85,247,.35)}.premium-tool-card:hover h3{letter-spacing:-.025em;color:#fff}.premium-tool-card .tool-icon-media,.premium-tool-card .tool-open,.premium-tool-card h3{transition:.28s cubic-bezier(.2,.7,.2,1)} .panel-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.panel-link{display:inline-flex;align-items:center;gap:6px;color:#9fa8bd;font-size:12px}.panel-link svg{width:14px}.panel-link:hover{color:#fff} .auth-page{position:relative;z-index:3;padding:86px 20px 110px}.auth-shell{max-width:1050px;margin:auto;display:grid;grid-template-columns:1fr .82fr;gap:26px;align-items:stretch}.auth-visual,.auth-card{border:1px solid var(--line);border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));box-shadow:var(--shadow)}.auth-visual{padding:44px;background:radial-gradient(420px 280px at 10% 100%,rgba(79,124,255,.18),transparent 70%),radial-gradient(380px 240px at 100% 0,rgba(168,85,247,.18),transparent 70%),rgba(255,255,255,.025)}.auth-visual h1{font-size:54px;line-height:1;letter-spacing:-.055em;margin:18px 0 15px}.auth-visual>p{color:var(--muted);font-size:16px;max-width:530px}.auth-benefits{display:grid;gap:10px;margin-top:32px}.auth-benefits>div{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid rgba(255,255,255,.07);border-radius:16px;background:rgba(255,255,255,.03)}.auth-benefits>div>svg{width:20px;color:#b9a7ff}.auth-benefits strong,.auth-benefits small{display:block}.auth-benefits small{color:#7e899f}.auth-card{padding:30px}.auth-card-head{display:flex;gap:13px;align-items:center;margin-bottom:22px}.auth-icon{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(79,124,255,.23),rgba(168,85,247,.23));border:1px solid rgba(255,255,255,.1)}.auth-card h2{margin:0}.auth-card-head p{margin:2px 0 0;color:#7f8a9f;font-size:12px}.auth-switch{text-align:center;color:#7f8a9f;font-size:12px}.auth-switch a{color:#cbbcff} .user-dashboard-body{background:#060812;color:var(--text);min-height:100vh}.user-dashboard-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.user-sidebar{position:sticky;top:0;height:100vh;padding:24px 18px;border-right:1px solid rgba(255,255,255,.07);background:rgba(8,11,20,.92);display:flex;flex-direction:column}.user-profile-mini{display:flex;gap:10px;align-items:center;padding:16px 8px;margin:18px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06)}.user-avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--violet-2));font-weight:800;overflow:hidden}.user-avatar img{width:100%;height:100%;object-fit:cover}.user-profile-mini strong,.user-profile-mini small{display:block}.user-profile-mini small{color:#738099;font-size:10px}.user-sidebar nav{display:grid;gap:5px}.user-sidebar nav a,.user-sidebar-bottom a{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;color:#8d98ad;font-size:12px}.user-sidebar nav a:hover,.user-sidebar nav a.active,.user-sidebar-bottom a:hover{background:rgba(124,58,237,.12);color:#fff}.user-sidebar nav svg,.user-sidebar-bottom svg{width:16px}.user-sidebar-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.06);padding-top:12px}.user-main{min-width:0}.user-topbar{padding:28px 34px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;gap:20px;align-items:center}.user-topbar h1{margin:7px 0 2px;font-size:30px}.user-topbar p{margin:0;color:#7f8aa0;font-size:12px}.user-content{padding:30px 34px}.user-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.user-metrics>div{padding:20px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));position:relative}.user-metrics>div>span{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:rgba(124,58,237,.12);margin-bottom:16px}.user-metrics strong{display:block;font-size:28px}.user-metrics small{color:#768198}.user-card{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));padding:20px}.user-card-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.06)}.user-card-head h2{margin:3px 0 0}.user-card-head a{color:#9ba6ba;font-size:12px;display:flex;gap:6px}.submission-list>a,.submission-row{display:flex;align-items:center;gap:12px;padding:14px 3px;border-bottom:1px solid rgba(255,255,255,.06)}.submission-list>a:last-child,.submission-row:last-child{border-bottom:0}.submission-list>a>div,.submission-info{flex:1}.submission-list strong,.submission-list small,.submission-info strong,.submission-info small{display:block}.submission-list small,.submission-info small{color:#748099;font-size:10px}.status{font-style:normal;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.06em;padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.09);color:#a5afc0}.status.pending{background:rgba(245,158,11,.1);color:#ffc866;border-color:rgba(245,158,11,.2)}.status.approved{background:rgba(34,197,94,.1);color:#8ff0b2;border-color:rgba(34,197,94,.2)}.status.rejected{background:rgba(244,63,94,.1);color:#ff9aaa;border-color:rgba(244,63,94,.2)}.status.needs_changes{background:rgba(79,124,255,.1);color:#a8bcff;border-color:rgba(79,124,255,.2)}.submission-info p{display:flex;gap:7px;align-items:flex-start;color:#a5afc0;background:rgba(255,255,255,.03);padding:9px;border-radius:10px;margin:8px 0 0;font-size:11px}.submission-info p svg{width:13px}.tool-submit-card{max-width:900px}.submission-note{display:flex;gap:10px;padding:13px;border-radius:15px;border:1px solid rgba(124,58,237,.16);background:rgba(124,58,237,.06);margin:15px 0}.submission-note strong,.submission-note small{display:block}.submission-note small{color:#7f899e}.profile-editor{display:flex;gap:14px;align-items:center;margin-bottom:20px}.profile-editor-avatar{width:74px;height:74px;border-radius:22px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--violet-2));font-size:22px;font-weight:850;overflow:hidden}.profile-editor-avatar img{width:100%;height:100%;object-fit:cover} .messenger-shell{display:grid;grid-template-columns:360px 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:rgba(255,255,255,.025);min-height:650px}.messenger-list{border-right:1px solid rgba(255,255,255,.07);background:rgba(9,13,23,.82)}.messenger-list-head{padding:20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.06)}.messenger-list-head h2{margin:3px 0 0}.conversation-item{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.05);position:relative}.conversation-item:hover,.conversation-item.active{background:linear-gradient(90deg,rgba(124,58,237,.11),rgba(79,124,255,.04))}.conversation-icon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}.conversation-icon svg{width:18px}.conversation-item>div{flex:1}.conversation-item strong,.conversation-item small{display:block}.conversation-item small{color:#748099;font-size:10px}.conversation-item em{width:7px;height:7px;border-radius:50%;background:#8b5cf6}.messenger-thread{display:flex;flex-direction:column;min-width:0;background:radial-gradient(600px 400px at 100% 0,rgba(124,58,237,.07),transparent 70%)}.thread-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.06)}.thread-messages{padding:24px;flex:1;overflow:auto;display:flex;flex-direction:column;gap:12px}.chat-row{display:flex}.chat-row.outgoing{justify-content:flex-end}.chat-bubble{max-width:min(72%,620px);padding:12px 14px;border-radius:17px 17px 17px 5px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.07)}.chat-row.outgoing .chat-bubble{border-radius:17px 17px 5px 17px;background:linear-gradient(135deg,rgba(79,124,255,.28),rgba(124,58,237,.24));border-color:rgba(124,58,237,.23)}.chat-bubble p{margin:0 0 5px}.chat-bubble small{color:#718098;font-size:9px}.chat-composer{display:flex;align-items:flex-end;gap:8px;padding:14px;border-top:1px solid rgba(255,255,255,.06)}.chat-composer textarea{flex:1;min-height:46px;max-height:120px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);border-radius:14px;color:#fff;padding:12px;resize:vertical}.chat-composer button{width:44px;height:44px;border:0;border-radius:13px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--blue),var(--violet-2));cursor:pointer}.thread-empty{margin:auto;text-align:center;color:#78839a}.thread-empty svg{width:36px} .about-premium,.legal-premium{padding:86px 0 110px}.about-hero{max-width:900px}.about-hero h1{max-width:850px}.about-mission-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.about-mission-card,.creator-card,.value-card{border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));padding:26px}.about-mission-card{display:flex;gap:24px;min-height:280px}.about-number{font-size:12px;color:#9276ff}.about-mission-card h2,.creator-card h2{font-size:30px;letter-spacing:-.04em;margin:8px 0}.about-mission-card p,.creator-card p,.value-card p{color:#8f99ae}.creator-avatar{width:54px;height:54px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(79,124,255,.2),rgba(168,85,247,.2));border:1px solid rgba(255,255,255,.09)}.creator-card h3{color:#b5a6ff;font-size:13px;margin:-2px 0 13px}.about-values-head{margin-top:80px}.about-values{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.value-card>span{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(124,58,237,.1);border:1px solid rgba(124,58,237,.16)}.value-card h3{font-size:19px}.legal-updated{display:inline-flex;margin-top:14px;color:#758199;font-size:11px}.legal-premium-grid{display:grid;grid-template-columns:1fr 280px;gap:22px;align-items:start}.legal-document{border:1px solid var(--line);border-radius:25px;padding:34px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02))}.legal-section{padding:6px 0 22px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:18px}.legal-section:last-child{border:0;margin:0}.legal-section h2{font-size:20px;letter-spacing:-.025em}.legal-section p{color:#9aa4b9}.legal-sticky{position:sticky;top:100px} @media(max-width:900px){.auth-shell,.about-mission-grid,.legal-premium-grid{grid-template-columns:1fr}.user-dashboard-shell{grid-template-columns:1fr}.user-sidebar{position:relative;height:auto}.user-metrics{grid-template-columns:1fr 1fr}.messenger-shell{grid-template-columns:1fr}.messenger-list{border-right:0;border-bottom:1px solid rgba(255,255,255,.07);max-height:340px;overflow:auto}.about-values{grid-template-columns:1fr}.legal-sticky{position:static}.nav-signin{display:none}} @media(max-width:600px){.auth-visual{padding:28px}.auth-visual h1{font-size:40px}.auth-card{padding:22px}.user-topbar{padding:22px;align-items:flex-start;flex-direction:column}.user-content{padding:20px}.user-metrics{grid-template-columns:1fr}.messenger-shell{border-radius:18px}.chat-bubble{max-width:88%}} .premium-tool-card>.stretch-link{position:absolute;inset:0;z-index:20;display:block}.premium-tool-card>.stretch-link~*{pointer-events:none}.premium-tool-card:hover{cursor:pointer} .field-light select{border:1px solid rgba(255,255,255,.09);border-radius:13px;background:#0d1220;color:#fff;padding:11px 12px;outline:0}.premium-socials .fa-brands{font-size:16px;line-height:1}.admin-breadcrumb{display:flex;align-items:center;gap:6px;color:#6f7b92;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.admin-breadcrumb svg{width:12px} /* ===== V5 ToolNexa brand + About + account security + fixed Messenger ===== */ .brand-wordmark{display:inline-flex;align-items:baseline;letter-spacing:-.045em;white-space:nowrap;font-size:inherit}.brand-wordmark strong{font-weight:850;color:var(--text)}.brand-wordmark span{font-weight:430;color:#e1e6f1}.brand .brand-wordmark{font-size:18px}.profile-settings-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}.security-card{position:relative;overflow:hidden}.security-card:after{content:"";position:absolute;right:-80px;top:-80px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(124,58,237,.14),transparent 70%);pointer-events:none}.security-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.09);background:rgba(124,58,237,.10)} .about-v5{padding:95px 0 110px}.about-v5-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:60px;align-items:center;min-height:600px}.about-v5-hero h1{font-size:clamp(50px,7vw,88px);line-height:.96;letter-spacing:-.065em;margin:20px 0}.about-v5-hero>div:first-child>p{font-size:18px;color:var(--muted);max-width:650px}.about-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.about-orbit-card{position:relative;min-height:460px;border:1px solid rgba(255,255,255,.09);border-radius:32px;background:radial-gradient(circle at 50% 50%,rgba(124,58,237,.13),transparent 42%),rgba(255,255,255,.025);overflow:hidden;box-shadow:var(--shadow)}.about-orbit-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(79,124,255,.30),rgba(168,85,247,.28));border:1px solid rgba(255,255,255,.13);box-shadow:0 20px 60px rgba(124,58,237,.22)}.about-orbit-icon svg{width:39px}.orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.08);border-radius:50%;transform:translate(-50%,-50%);animation:orbitSpin 20s linear infinite}.orbit-a{width:280px;height:280px}.orbit-b{width:400px;height:400px;animation-direction:reverse;animation-duration:28s}@keyframes orbitSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}.orbit-chip{position:absolute;display:flex;align-items:center;gap:8px;padding:11px 13px;border-radius:14px;border:1px solid rgba(255,255,255,.09);background:rgba(9,13,24,.86);backdrop-filter:blur(14px);font-size:12px;color:#d8deeb}.orbit-chip svg{width:15px}.orbit-chip.one{left:9%;top:18%}.orbit-chip.two{right:7%;top:34%}.orbit-chip.three{left:18%;bottom:15%}.about-mission-v5{display:grid;grid-template-columns:80px 1fr 120px;gap:26px;align-items:center;padding:42px;border-radius:30px;border:1px solid rgba(255,255,255,.09);background:radial-gradient(440px 240px at 100% 0,rgba(79,124,255,.11),transparent 70%),rgba(255,255,255,.025);margin:20px 0 90px}.about-index{font-size:56px;font-weight:850;letter-spacing:-.06em;color:rgba(255,255,255,.12)}.about-mission-v5 h2{font-size:clamp(30px,4vw,48px);letter-spacing:-.045em;line-height:1.05;margin:8px 0 12px}.about-mission-v5 p{margin:0;color:var(--muted);max-width:780px}.mission-symbol{width:96px;height:96px;border-radius:28px;display:grid;place-items:center;background:rgba(124,58,237,.09);border:1px solid rgba(124,58,237,.18)}.mission-symbol svg{width:38px}.creator-v5{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:center;margin-bottom:100px}.creator-photo-wrap{position:relative;min-height:570px;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.10);background:#0b0f18;box-shadow:var(--shadow)}.creator-photo-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.creator-photo-glow{position:absolute;inset:0;background:linear-gradient(to top,rgba(6,8,18,.58),transparent 45%);z-index:1}.creator-status{position:absolute;left:22px;bottom:22px;z-index:2;display:flex;align-items:center;gap:8px;padding:11px 13px;border-radius:14px;background:rgba(7,10,18,.84);border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(14px);font-size:12px}.creator-status svg{width:15px}.creator-copy h2{font-size:clamp(38px,5vw,64px);letter-spacing:-.055em;margin:18px 0 0}.creator-copy h3{font-size:18px;color:#b9a2ff;margin:6px 0 22px}.creator-copy p{color:var(--muted);font-size:16px;max-width:700px}.creator-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}.about-values-v5{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.value-card-v5{position:relative;min-height:290px;padding:26px;border-radius:24px;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));overflow:hidden;transition:.28s}.value-card-v5:hover{transform:translateY(-6px);border-color:rgba(124,58,237,.25)}.value-num{position:absolute;right:18px;top:15px;font-size:46px;font-weight:850;color:rgba(255,255,255,.045)}.value-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:rgba(124,58,237,.10);border:1px solid rgba(124,58,237,.17);margin-bottom:30px}.value-card-v5 h3{font-size:20px;margin:0 0 8px}.value-card-v5 p{color:var(--muted);font-size:14px}.messenger-fixed{height:calc(100vh - 190px);min-height:570px;max-height:860px}.messenger-fixed .messenger-list,.messenger-fixed .messenger-thread{min-height:0;overflow:hidden}.messenger-fixed .messenger-list{display:flex;flex-direction:column}.messenger-fixed .conversation-scroll{flex:1;overflow:auto}.messenger-fixed .thread-messages{min-height:0;overflow:auto}.composer-icon{position:relative;overflow:hidden}.composer-icon input{position:absolute;inset:0;opacity:0;cursor:pointer}.composer-main{flex:1}.attachment-name{font-size:11px;color:#9aa5b8;padding:0 4px 5px}.chat-bubble{max-width:min(68%,620px);overflow-wrap:anywhere;word-break:break-word}.chat-attachment.image{display:block;margin-top:8px;max-width:300px}.chat-attachment.image img{max-width:100%;max-height:260px;border-radius:12px}.chat-attachment.image span{display:block;font-size:10px;color:#8e99ae;margin-top:5px}.chat-attachment.file{display:flex;align-items:center;gap:9px;padding:9px;margin-top:8px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}.chat-attachment.file svg{width:18px}.chat-attachment.file strong,.chat-attachment.file small{display:block}.chat-attachment.file small{color:#77839a} @media(max-width:980px){.about-v5-hero,.creator-v5{grid-template-columns:1fr}.about-v5-hero{min-height:0}.about-orbit-card{min-height:400px}.about-mission-v5{grid-template-columns:60px 1fr}.mission-symbol{display:none}.about-values-v5{grid-template-columns:1fr 1fr}.profile-settings-grid{grid-template-columns:1fr}} @media(max-width:650px){.about-v5{padding-top:60px}.about-v5-hero h1{font-size:50px}.about-orbit-card{min-height:330px}.orbit-b{width:320px;height:320px}.orbit-a{width:220px;height:220px}.orbit-chip.two{right:4%}.about-mission-v5{grid-template-columns:1fr;padding:25px}.about-index{font-size:38px}.creator-photo-wrap{min-height:470px}.about-values-v5{grid-template-columns:1fr}.messenger-fixed{height:auto;max-height:none}.messenger-fixed .messenger-list{max-height:350px}.messenger-fixed .messenger-thread{min-height:560px}} .user-flash{margin-bottom:16px} /* V6 branded tool workspace */ .branded-tool-page{padding-top:52px}.tool-page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}.tool-page-title-row{display:flex;align-items:flex-start;gap:16px}.tool-page-brand-icon{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;overflow:hidden;background:linear-gradient(135deg,rgba(79,124,255,.18),rgba(168,85,247,.18));border:1px solid rgba(255,255,255,.10);box-shadow:inset 0 1px rgba(255,255,255,.07)}.tool-page-brand-icon svg{width:27px}.tool-page-brand-icon img{width:100%;height:100%;object-fit:contain;padding:8px}.tool-breadcrumb{display:flex;align-items:center;gap:6px;color:#77839a;font-size:11px;margin-bottom:5px}.tool-breadcrumb svg{width:12px}.tool-page-heading h1{font-size:clamp(34px,5vw,52px);line-height:1;margin:0 0 8px;letter-spacing:-.045em}.tool-page-heading p{margin:0;color:var(--muted);max-width:680px}.tool-page-badges{display:flex;flex-wrap:wrap;gap:8px}.tool-page-badges span{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.035);font-size:11px;color:#aab3c6}.tool-page-badges svg{width:13px}.branded-tool-shell{border:1px solid rgba(255,255,255,.11);border-radius:26px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:0 26px 80px rgba(0,0,0,.34)}.branded-tool-toolbar{height:56px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.025)}.branded-tool-toolbar>div{display:flex;align-items:center;gap:10px}.branded-tool-toolbar strong{font-size:13px}.branded-tool-toolbar a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.025);color:#8d98ad}.branded-tool-toolbar a:hover{color:#fff;background:rgba(255,255,255,.06)}.branded-tool-toolbar svg{width:14px}.live-dot{width:8px;height:8px;border-radius:50%;background:#37dc96;box-shadow:0 0 12px rgba(55,220,150,.65)}.branded-tool-canvas{min-height:620px;background:#fff}.tool-app-frame{display:block;width:100%;height:clamp(640px,78vh,1000px);border:0;background:#fff}.native-tool-include{min-height:620px;background:#fff;color:#111}.branded-tool-canvas .tool-placeholder{min-height:620px;background:linear-gradient(180deg,#0c101c,#090d17);display:grid;place-content:center;text-align:center;padding:40px}.tool-after-grid{display:grid;grid-template-columns:1fr 330px;gap:18px;margin-top:20px}.tool-after-grid article,.tool-after-grid aside{border:1px solid var(--line);border-radius:20px;padding:22px;background:rgba(255,255,255,.028)}.tool-after-grid h2{margin:12px 0 8px}.tool-after-grid p{color:var(--muted);line-height:1.75}.tool-after-grid aside>strong{display:block;margin-bottom:10px}.tool-after-grid aside>div{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid rgba(255,255,255,.06);font-size:12px}.tool-after-grid aside span{color:#768197}@media(max-width:800px){.tool-page-heading{align-items:flex-start;flex-direction:column}.tool-after-grid{grid-template-columns:1fr}.branded-tool-canvas,.native-tool-include{min-height:500px}.tool-app-frame{height:720px}} /* ToolNexa V7 automatic internal-tool shell */ .auto-tool-canvas{padding:0;overflow:hidden;min-height:680px;background:transparent} .auto-tool-frame{display:block;width:100%;height:78vh;min-height:680px;border:0;background:transparent} .auto-tool-page .branded-tool-shell{overflow:hidden} @media(max-width:780px){.auto-tool-frame{height:76vh;min-height:620px}.auto-tool-canvas{min-height:620px}} /* ToolNexa V8 — SEO, accessibility, mobile responsiveness & performance */ :focus-visible{outline:3px solid rgba(124,58,237,.55);outline-offset:3px} img{max-width:100%;height:auto} .tool-seo-content,.related-tools{margin-top:28px}.tool-seo-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.tool-seo-grid article{border:1px solid var(--line);border-radius:22px;padding:24px;background:rgba(255,255,255,.028)}.tool-seo-grid h2{font-size:24px;letter-spacing:-.03em;margin:12px 0 12px}.tool-seo-grid p,.tool-seo-grid li{color:var(--muted);line-height:1.75}.tool-seo-grid ol{padding-left:22px;margin:0}.related-tools .section-head.compact{margin:0 0 22px;text-align:left;max-width:none}.related-tools .section-title{font-size:32px;text-align:left;margin-top:10px} @media(max-width:1100px){.header-search-wrap{max-width:420px}.nav-premium{gap:10px}} @media(max-width:900px){section{padding:72px 0}.header-search-wrap{order:3;flex-basis:100%;max-width:none;margin:0}.nav-inner.nav-premium{height:auto;min-height:70px;flex-wrap:wrap;padding:12px 0}.nav-actions-premium{margin-left:auto}.nav.compact .nav-inner{height:auto}.hero{padding-top:54px}.hero-grid{gap:34px}.tool-seo-grid{grid-template-columns:1fr}.premium-footer-grid{gap:26px}.tool-page-heading{margin-bottom:18px}} @media(max-width:640px){ body{font-size:15px}.container{width:calc(100% - 24px)}section{padding:58px 0}.section-head{margin-bottom:28px}.section-title{font-size:clamp(32px,10vw,44px)}.section-sub{font-size:15px}.hero h1{font-size:clamp(44px,13vw,60px)}.hero-search{min-height:58px;padding-left:14px}.hero-search .search-shortcut{display:none}.hero-actions,.cta-actions,.about-hero-actions,.creator-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn,.cta-actions .btn,.about-hero-actions .btn,.creator-actions .btn{justify-content:center;min-height:48px}.hero-trust{gap:10px}.trust-item{font-size:12px}.hero-card{border-radius:20px}.dash-main{padding:14px}.tool-mini-grid{grid-template-columns:1fr}.mini-stats{grid-template-columns:1fr 1fr}.marquee-item{padding:10px 13px}.category-card,.tool-card,.premium-tool-card{border-radius:18px}.tool-card,.premium-tool-card{min-height:0}.library-toolbar{padding:12px}.library-filters{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;scrollbar-width:none}.library-filter{white-space:nowrap;flex:0 0 auto}.library-search input{font-size:16px}.tool-page-title-row{gap:12px}.tool-page-brand-icon{width:54px;height:54px;border-radius:16px}.tool-page-heading h1{font-size:36px}.tool-page-badges{width:100%}.branded-tool-shell{border-radius:18px}.branded-tool-toolbar{padding:0 12px}.branded-tool-canvas,.native-tool-include{min-height:420px}.tool-app-frame,.auto-tool-frame{min-height:560px;height:74vh}.tool-after-grid article,.tool-after-grid aside,.tool-seo-grid article{padding:18px}.tool-seo-grid h2{font-size:22px}.premium-footer{padding-top:24px}.footer-top-card{padding:20px}.footer-top-card .btn{width:100%;justify-content:center}.premium-footer-grid{grid-template-columns:1fr 1fr;gap:24px 16px}.footer-brand-col{grid-column:1/-1}.premium-footer-bottom{gap:10px}.socials{flex-wrap:wrap}.auth-shell{margin-top:20px}.support-info,.premium-form-card,.legal-card{padding:20px}.content-hero h1{font-size:clamp(38px,11vw,52px)} } @media(max-width:420px){.premium-footer-grid{grid-template-columns:1fr}.footer-brand-col{grid-column:auto}.mini-stats{grid-template-columns:1fr}.word-metrics{grid-template-columns:1fr}.demo-stats{grid-template-columns:1fr}.header-search{height:44px}.nav-signup{padding:9px 11px;font-size:12px}.tool-page-heading h1{font-size:32px}.tool-page-title-row{align-items:center}.tool-page-badges span{font-size:10px}.about-v5-hero h1{font-size:43px}.creator-photo-wrap{min-height:380px}} @media(hover:none){.premium-tool-card:hover,.category-card:hover,.feature:hover,.tool-card:hover,.value-card-v5:hover{transform:none}.spotlight{display:none}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.marquee,.testi-track{animation:none!important}.bg-orbs,.spotlight{display:none!important}} @media(max-width:1040px){.nav-links.mobile-open{display:flex!important;position:absolute;left:20px;right:20px;top:calc(100% + 8px);padding:12px;flex-direction:column;align-items:stretch;border:1px solid rgba(255,255,255,.10);border-radius:18px;background:rgba(7,10,18,.98);box-shadow:0 24px 60px rgba(0,0,0,.42);backdrop-filter:blur(18px)}.nav-links.mobile-open>a,.nav-links.mobile-open .nav-drop-btn{width:100%;justify-content:flex-start}.nav-links.mobile-open .nav-dropdown{width:100%}.nav-links.mobile-open .mega-menu{position:static;width:100%;grid-template-columns:1fr;opacity:1;visibility:visible;transform:none;display:none;margin-top:8px;box-shadow:none}.nav-links.mobile-open .nav-dropdown:focus-within .mega-menu,.nav-links.mobile-open .nav-dropdown:hover .mega-menu{display:grid}} /* ========================= ToolNexa V12: library, history & publications ========================= */ .tool-hub-page{padding-bottom:80px}.tool-hub-hero{padding:92px 0 50px}.hub-search{max-width:820px;margin:28px auto 0;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border:1px solid rgba(255,255,255,.12);border-radius:20px;background:rgba(255,255,255,.045);box-shadow:0 20px 60px rgba(0,0,0,.24);position:relative}.hub-search>svg{width:21px;color:#8f9ab1}.hub-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size:16px}.hub-search-results{max-width:820px;margin:8px auto 0;padding:8px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0b101d;box-shadow:0 24px 60px rgba(0,0,0,.34);display:none}.hub-search-results.open{display:block}.hub-search-results a{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-radius:12px}.hub-search-results a:hover{background:rgba(255,255,255,.05)}.hub-search-results strong,.hub-search-results small{display:block}.hub-search-results small{color:var(--muted);font-size:11px}.hub-no-result{padding:14px;color:var(--muted)}.tool-hub-categories,.tool-hub-popular{padding:55px 0}.hub-section-head,.blog-section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}.hub-section-head h2,.blog-section-head h2{font-size:32px;letter-spacing:-.035em;margin:10px 0 0}.hub-section-head>a,.blog-section-head>a{display:inline-flex;align-items:center;gap:7px;color:#bac4d8;font-weight:700}.hub-category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.hub-category-card{position:relative;padding:24px;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));overflow:hidden;transition:.3s}.hub-category-card:after{content:"";position:absolute;width:180px;height:180px;right:-80px;bottom:-100px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.24),transparent 68%);transition:.35s}.hub-category-card:hover{transform:translateY(-6px);border-color:rgba(124,92,255,.36);box-shadow:0 20px 50px rgba(0,0,0,.22)}.hub-category-card:hover:after{transform:scale(1.3)}.hub-category-top{display:flex;align-items:center;justify-content:space-between;color:#8995ab;font-size:12px}.hub-category-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(135deg,rgba(88,116,255,.20),rgba(168,85,247,.18));border:1px solid rgba(255,255,255,.1);color:#d9d2ff}.hub-category-card h3{font-size:20px;margin:22px 0 7px}.hub-category-card p{color:var(--muted);font-size:13px;min-height:42px}.hub-card-link{display:flex;align-items:center;gap:7px;color:#c7d0df;font-size:12px;font-weight:700;margin-top:20px}.hub-card-link svg{width:14px;transition:.2s}.hub-category-card:hover .hub-card-link svg{transform:translateX(4px)} .recent-history-section{padding:70px 0}.recent-history-shell{padding:26px;border:1px solid rgba(124,92,255,.16);border-radius:28px;background:linear-gradient(135deg,rgba(124,92,255,.055),rgba(255,255,255,.025));box-shadow:0 18px 55px rgba(0,0,0,.18)}.recent-history-head{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-bottom:24px}.recent-history-title{display:flex;gap:14px;align-items:center}.recent-history-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#5571ff,#8c49f3);box-shadow:0 11px 30px rgba(92,79,255,.28)}.recent-history-title h2{margin:0;font-size:25px;letter-spacing:-.03em}.recent-history-title p{margin:3px 0 0;color:var(--muted);font-size:13px}.recent-history-heading-row{display:flex;align-items:center;gap:10px}.history-count{min-width:28px;height:24px;padding:0 8px;border-radius:999px;display:grid;place-items:center;background:rgba(124,92,255,.16);color:#cfc7ff;font-size:11px;font-weight:800}.history-clear{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:#8490a6;cursor:pointer;font-weight:700}.recent-history-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.history-tool-card{position:relative;display:flex;flex-direction:column;min-height:205px;padding:18px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:rgba(255,255,255,.035);transition:.28s}.history-tool-card:hover{transform:translateY(-5px);border-color:rgba(124,92,255,.4);background:rgba(124,92,255,.055)}.history-tool-top{display:flex;align-items:center;justify-content:space-between}.history-tool-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.2)}.history-tool-icon img{max-width:28px;max-height:28px;border-radius:7px}.history-recent-badge{padding:5px 8px;border-radius:8px;background:rgba(124,92,255,.09);color:#9f91ff;font-size:10px;font-weight:800;text-transform:uppercase}.history-tool-card h3{font-size:16px;margin:17px 0 6px}.history-tool-card p{color:var(--muted);font-size:12px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.history-tool-open{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:15px;border-top:1px solid rgba(255,255,255,.065);color:#bcb4ff;font-weight:750;font-size:12px}.history-empty{text-align:center;padding:24px;color:#7e8aa0;display:grid;place-items:center;gap:5px}.history-empty svg{width:28px}.history-empty strong{color:#c7cedc} .home-blog-section{padding:90px 0}.blog-section-head p{margin:5px 0 0;color:var(--muted)}.home-blog-grid,.blog-library-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.blog-card{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.025));overflow:hidden;transition:.3s}.blog-card:hover{transform:translateY(-6px);border-color:rgba(124,92,255,.32);box-shadow:0 22px 55px rgba(0,0,0,.24)}.blog-cover{height:220px;background:#0d1422;overflow:hidden}.blog-cover img{width:100%;height:100%;object-fit:cover;transition:.45s}.blog-card:hover .blog-cover img{transform:scale(1.035)}.blog-card-body{padding:20px}.blog-category{display:inline-flex;color:#9b8aff;font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}.blog-card h3,.blog-card h2{font-size:20px;line-height:1.25;margin:9px 0 8px;letter-spacing:-.025em}.blog-card p{color:var(--muted);font-size:13px;line-height:1.65;margin:0 0 18px}.blog-meta{display:flex;justify-content:space-between;gap:12px;padding-top:15px;border-top:1px solid rgba(255,255,255,.06);color:#8491a8;font-size:11px}.blog-meta span{display:flex;align-items:center;gap:6px}.blog-meta svg{width:13px}.blog-index-hero{padding:90px 0 30px}.blog-filter-bar{display:flex;max-width:900px;margin:28px auto 0;gap:10px}.blog-filter-bar>div{flex:1;display:flex;align-items:center;gap:9px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035)}.blog-filter-bar input{background:none!important;border:0!important;box-shadow:none!important}.blog-filter-bar select{width:190px}.blog-library{padding:40px 0 90px}.single-blog{padding:65px 0 100px}.blog-reading-container{max-width:900px}.blog-breadcrumb{display:flex;align-items:center;gap:7px;color:#8591a7;font-size:12px}.blog-breadcrumb svg{width:14px}.single-blog-header{text-align:center;padding:44px 0 32px}.single-blog-header h1{font-size:clamp(38px,6vw,68px);line-height:1.03;letter-spacing:-.055em;margin:14px auto;max-width:900px}.single-blog-header>p{color:var(--muted);font-size:17px;max-width:700px;margin:auto}.single-blog-meta{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-top:22px;color:#8793a8;font-size:12px}.single-blog-meta span{display:flex;align-items:center;gap:6px}.single-blog-cover{height:470px;border-radius:24px;overflow:hidden;border:1px solid var(--line);margin-bottom:42px}.single-blog-cover img{width:100%;height:100%;object-fit:cover}.single-blog-content{font-size:17px;line-height:1.9;color:#c9d0df;max-width:760px;margin:auto}.single-blog-content h2{font-size:30px;color:#fff;letter-spacing:-.035em;margin:42px 0 12px}.single-blog-content h3{font-size:22px;color:#fff;margin:30px 0 10px}.single-blog-content blockquote{margin:25px 0;padding:18px 20px;border-left:3px solid #765dff;background:rgba(124,92,255,.06);border-radius:0 14px 14px 0}.single-blog-content a{color:#a99bff;text-decoration:underline}.related-blog{max-width:760px;margin:60px auto 0;padding-top:32px;border-top:1px solid var(--line)}.related-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.related-blog-grid a{display:flex;flex-direction:column;gap:6px;padding:16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}.related-blog-grid span,.related-blog-grid small{color:#8d99ae;font-size:10px}.related-blog-grid strong{font-size:13px} .editor-toolbar{display:flex;gap:6px;flex-wrap:wrap;padding:8px;border:1px solid var(--line);border-bottom:0;border-radius:13px 13px 0 0;background:rgba(255,255,255,.035)}.editor-toolbar button{border:1px solid var(--line);background:#111725;color:#dce2ed;border-radius:8px;padding:6px 9px;cursor:pointer}.rich-editor{min-height:300px;padding:16px;border:1px solid var(--line);border-radius:0 0 13px 13px;background:#0c121e;color:#eef2f8;outline:none;line-height:1.7}.blog-admin-cover{max-width:220px;max-height:140px;object-fit:cover;border-radius:14px;border:1px solid var(--line);margin:10px 0} @media(max-width:1000px){.hub-category-grid,.home-blog-grid,.blog-library-grid{grid-template-columns:repeat(2,1fr)}.recent-history-grid{grid-template-columns:repeat(2,1fr)}.related-blog-grid{grid-template-columns:1fr}.single-blog-cover{height:360px}} @media(max-width:680px){.tool-hub-hero{padding-top:60px}.hub-search{flex-wrap:wrap}.hub-search .btn{width:100%;justify-content:center}.hub-category-grid,.home-blog-grid,.blog-library-grid,.recent-history-grid{grid-template-columns:1fr}.recent-history-head,.hub-section-head,.blog-section-head{align-items:flex-start;flex-direction:column}.history-clear{align-self:flex-end}.blog-filter-bar{flex-direction:column}.blog-filter-bar select{width:100%}.blog-cover{height:190px}.single-blog-cover{height:240px}.single-blog-header h1{font-size:40px}.single-blog-content{font-size:16px}} /* ========================= ToolNexa V14: Native tools + premium publications ========================= */ .native-tool-shell{position:relative;background:linear-gradient(180deg,rgba(15,20,34,.96),rgba(8,12,22,.98));border-color:rgba(133,107,255,.22);box-shadow:0 28px 90px rgba(0,0,0,.40),0 0 0 1px rgba(255,255,255,.02) inset} .native-tool-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(520px 240px at 100% 0%,rgba(124,92,255,.12),transparent 65%),radial-gradient(460px 260px at 0% 100%,rgba(52,211,153,.05),transparent 70%)} .native-tool-shell>*{position:relative;z-index:1}.native-badge{display:inline-flex;align-items:center;padding:5px 8px;border-radius:999px;background:rgba(124,92,255,.11);border:1px solid rgba(124,92,255,.20);color:#b9adff;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em} .native-tool-canvas{padding:24px;min-height:0!important;background:transparent!important;overflow:visible!important}.native-tool-canvas .tool-engine-app>.top{display:none}.native-tool-canvas .tool-engine-app{max-width:1080px}.native-tool-canvas .tool-engine-app>.panel{position:relative}.native-tool-canvas .tool-engine-app>.panel:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 35%,transparent 65%,rgba(124,92,255,.025))} .native-tool-canvas .tool-engine-app input,.native-tool-canvas .tool-engine-app textarea,.native-tool-canvas .tool-engine-app select{transition:border-color .2s,box-shadow .2s,background .2s}.native-tool-canvas .tool-engine-app input:hover,.native-tool-canvas .tool-engine-app textarea:hover,.native-tool-canvas .tool-engine-app select:hover{border-color:#3c4963}.native-tool-canvas .tool-engine-app .result{background:rgba(6,10,18,.72)} .native-tool-canvas>.tool-placeholder{min-height:460px;border-radius:20px;background:radial-gradient(520px 240px at 50% 20%,rgba(124,92,255,.12),transparent 68%),rgba(6,10,18,.65)!important} .auto-tool-page .tool-after-grid{margin-top:24px}.auto-tool-page .tool-after-grid article,.auto-tool-page .tool-after-grid aside{background:linear-gradient(180deg,rgba(255,255,255,.038),rgba(255,255,255,.018))} /* Homepage publications */ .home-blog-section{padding:96px 0}.blog-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.blog-section-head h2{font-size:clamp(30px,4vw,46px);letter-spacing:-.045em;margin:12px 0 6px}.blog-section-head p{font-size:15px}.blog-view-all{display:inline-flex;align-items:center;gap:8px;color:#c7cfdf;font-weight:750;font-size:13px}.blog-view-all svg{width:16px;transition:.2s}.blog-view-all:hover{color:#fff}.blog-view-all:hover svg{transform:translate(3px,-3px)} .home-publications-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:18px}.blog-support-stack{display:grid;grid-template-rows:1fr 1fr;gap:18px}.blog-feature-card,.blog-support-card,.blog-card,.blog-featured-wide{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.09);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));box-shadow:0 22px 55px rgba(0,0,0,.18);transition:transform .28s,border-color .28s,box-shadow .28s}.blog-feature-card{border-radius:26px}.blog-support-card,.blog-card{border-radius:22px}.blog-card-link{display:block;height:100%;color:inherit;text-decoration:none;position:relative;z-index:2}.blog-feature-card:hover,.blog-support-card:hover,.blog-card:hover,.blog-featured-wide:hover{transform:translateY(-6px);border-color:rgba(128,103,255,.34);box-shadow:0 28px 70px rgba(0,0,0,.28)} .blog-feature-cover{height:330px;overflow:hidden;background:#0e1422}.blog-feature-cover img,.blog-support-cover img,.blog-cover img,.blog-featured-image img{width:100%;height:100%;object-fit:cover;transition:transform .55s}.blog-feature-card:hover img,.blog-support-card:hover img,.blog-card:hover img,.blog-featured-wide:hover img{transform:scale(1.035)}.blog-feature-body{padding:26px}.blog-feature-body h3{font-size:30px;line-height:1.12;letter-spacing:-.04em;margin:13px 0 10px}.blog-feature-body>p{color:var(--muted);line-height:1.7;margin:0 0 22px}.blog-card-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}.blog-read-pill{display:inline-flex;align-items:center;gap:5px;color:#8d99ae;font-size:10px}.blog-read-pill svg{width:12px}.blog-author-line{display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.07);padding-top:18px}.blog-author-line>i,.blog-author-line>svg{margin-left:auto;width:18px;color:#8e9ab0}.blog-author-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(79,124,255,.22),rgba(168,85,247,.22));border:1px solid rgba(255,255,255,.08)}.blog-author-avatar svg{width:17px}.blog-author-line strong{display:block;font-size:12px}.blog-author-line small{display:block;color:#77839a;font-size:10px;margin-top:2px} .blog-support-card .blog-card-link{display:grid;grid-template-columns:190px 1fr}.blog-support-cover{min-height:220px;overflow:hidden;background:#0d1422}.blog-support-body{padding:20px}.blog-support-body h3{font-size:19px;line-height:1.22;margin:8px 0}.blog-support-body p{font-size:12px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* Blog index */ .premium-blog-index .blog-index-hero{padding:92px 0 38px}.premium-blog-index .blog-filter-bar{background:rgba(255,255,255,.025);padding:8px;border:1px solid rgba(255,255,255,.08);border-radius:18px}.blog-featured-hero{padding:20px 0 24px}.blog-featured-wide{border-radius:28px}.blog-featured-wide .blog-card-link{display:grid;grid-template-columns:1.12fr .88fr;min-height:440px}.blog-featured-image{overflow:hidden;background:#0d1422}.blog-featured-copy{padding:42px;display:flex;flex-direction:column;justify-content:center}.blog-featured-copy .blog-category{margin-top:18px}.blog-featured-copy h2{font-size:clamp(30px,4vw,48px);line-height:1.06;letter-spacing:-.045em;margin:11px 0 13px}.blog-featured-copy>p{color:var(--muted);font-size:15px;line-height:1.7}.blog-read-cta{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:13px;font-weight:800;color:#d9d4ff}.blog-read-cta svg{width:16px}.blog-library-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px}.blog-library-head h2{font-size:32px;margin:10px 0 0;letter-spacing:-.035em}.blog-library-head>span{color:#7f8aa0;font-size:12px}.blog-library-grid .blog-card{min-height:460px}.blog-card .blog-cover{height:220px}.blog-card .blog-card-body{padding:20px}.blog-card .blog-card-body h2{font-size:20px;margin:10px 0 9px}.blog-card .blog-card-body>p{min-height:62px}.blog-card .blog-meta{position:absolute;left:20px;right:20px;bottom:18px} /* Single article */ .reading-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;background:transparent}.reading-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#5d74ff,#a14cf5,#22d3ee);box-shadow:0 0 18px rgba(124,92,255,.65)}.premium-single-blog .blog-reading-container{max-width:1120px}.premium-single-blog .single-blog-header{max-width:920px;margin:auto}.premium-single-blog .single-blog-cover{max-width:1040px;margin:0 auto 48px}.article-layout{display:grid;grid-template-columns:150px minmax(0,760px);justify-content:center;gap:34px;align-items:start}.article-rail{position:sticky;top:105px;display:grid;gap:12px}.article-author-card,.article-share{border:1px solid var(--line);border-radius:18px;padding:14px;background:rgba(255,255,255,.026)}.article-author-avatar{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(79,124,255,.22),rgba(168,85,247,.22));margin-bottom:10px}.article-author-card small,.article-share small{display:block;color:#768198;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.article-author-card strong{display:block;font-size:12px;margin-top:3px}.article-share{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.article-share small{width:100%;margin-bottom:3px}.article-share button,.article-share a{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#9ba6ba;cursor:pointer}.article-share button:hover,.article-share a:hover,.article-share button.copied{color:#fff;border-color:rgba(124,92,255,.4);background:rgba(124,92,255,.11)}.article-share svg{width:14px}.premium-single-blog .single-blog-content{margin:0;max-width:none}.premium-single-blog .single-blog-content>p:first-child{font-size:20px;color:#e0e5f0;line-height:1.8}.related-blog{max-width:944px}.related-blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}.related-blog-head h2{margin:8px 0 0}.related-blog-head>a{display:inline-flex;gap:7px;align-items:center;color:#aab4c8;font-size:12px}.related-blog-head svg{width:14px} @media(max-width:980px){.home-publications-grid{grid-template-columns:1fr}.blog-support-stack{grid-template-columns:1fr 1fr;grid-template-rows:auto}.blog-support-card .blog-card-link{display:block}.blog-support-cover{height:200px;min-height:0}.blog-featured-wide .blog-card-link{grid-template-columns:1fr}.blog-featured-image{height:360px}.article-layout{grid-template-columns:1fr}.article-rail{position:static;grid-template-columns:1fr 1fr;max-width:760px;margin:auto;width:100%}} @media(max-width:680px){.native-tool-canvas{padding:12px}.native-badge{display:none}.blog-section-head,.blog-library-head,.related-blog-head{align-items:flex-start;flex-direction:column}.blog-support-stack{grid-template-columns:1fr}.blog-feature-cover{height:230px}.blog-feature-body{padding:20px}.blog-feature-body h3{font-size:24px}.blog-featured-image{height:240px}.blog-featured-copy{padding:24px}.blog-featured-copy h2{font-size:30px}.article-rail{grid-template-columns:1fr}.premium-single-blog .single-blog-cover{margin-bottom:30px}.premium-single-blog .single-blog-header{padding-top:36px}.blog-library-grid .blog-card{min-height:430px}} /* ========================================================= ToolNexa V15 — dual theme, Pinterest publications, premium tools ========================================================= */ .theme-toggle-btn{flex:0 0 auto} html[data-theme="light"]{ --bg:#f5f7fb;--bg-soft:#eef2f8;--panel:rgba(255,255,255,.82);--panel-2:#fff; --line:rgba(30,46,76,.10);--line-2:rgba(30,46,76,.17);--text:#121a2a;--muted:#66748b;--muted-2:#8290a6; --shadow:0 24px 70px rgba(38,52,84,.10) } html[data-theme="light"] body{background:radial-gradient(900px 560px at 0 -10%,rgba(79,124,255,.08),transparent 58%),radial-gradient(800px 520px at 100% 10%,rgba(168,85,247,.07),transparent 58%),#f5f7fb;color:var(--text)} html[data-theme="light"] .nav{background:linear-gradient(to bottom,rgba(250,252,255,.94),rgba(248,250,254,.86));border-color:rgba(23,38,66,.08)} html[data-theme="light"] .grid-overlay{background-image:linear-gradient(rgba(43,60,89,.32) 1px,transparent 1px),linear-gradient(90deg,rgba(43,60,89,.32) 1px,transparent 1px);opacity:.055} html[data-theme="light"] .noise{opacity:.012} html[data-theme="light"] .header-search,html[data-theme="light"] .hero-search,html[data-theme="light"] .library-toolbar,html[data-theme="light"] .category-card,html[data-theme="light"] .premium-tool-card,html[data-theme="light"] .tool-card,html[data-theme="light"] .recent-history-shell,html[data-theme="light"] .history-tool-card,html[data-theme="light"] .content-card,html[data-theme="light"] .panel,html[data-theme="light"] .footer-top-card,html[data-theme="light"] .premium-footer,html[data-theme="light"] .branded-tool-shell,html[data-theme="light"] .tool-after-grid article,html[data-theme="light"] .tool-after-grid aside{background:rgba(255,255,255,.88);border-color:rgba(30,46,76,.10);box-shadow:0 18px 55px rgba(38,52,84,.07)} html[data-theme="light"] .header-search input,html[data-theme="light"] input,html[data-theme="light"] textarea,html[data-theme="light"] select{color:#172033} html[data-theme="light"] .mega-menu,html[data-theme="light"] .header-search-results,html[data-theme="light"] .user-menu{background:rgba(255,255,255,.97);border-color:rgba(30,46,76,.10);box-shadow:0 24px 65px rgba(38,52,84,.13)} html[data-theme="light"] .nav-links-compact>a,html[data-theme="light"] .nav-drop-btn,html[data-theme="light"] .nav-signin{color:#48566c} html[data-theme="light"] .nav-links-compact>a:hover,html[data-theme="light"] .nav-drop-btn:hover,html[data-theme="light"] .nav-signin:hover{color:#121a2a;background:rgba(43,60,89,.05)} html[data-theme="light"] .premium-footer{background:linear-gradient(180deg,#f7f9fc,#edf1f7)} html[data-theme="light"] .footer-col a,html[data-theme="light"] .footer-note,html[data-theme="light"] .premium-footer-bottom{color:#6d7a90} html[data-theme="light"] .branded-tool-toolbar{background:#f8f9fc;border-color:rgba(30,46,76,.08)} html[data-theme="light"] .branded-tool-toolbar strong,html[data-theme="light"] .tool-after-grid h2,html[data-theme="light"] .tool-after-grid b{color:#172033} html[data-theme="light"] .native-tool-canvas{background:#f8f9fd} /* Hide Continue your work until history exists */ .recent-history-section.history-hidden{display:none} .recent-history-section.history-visible{display:block;animation:historyReveal .42s ease both} @keyframes historyReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* Pinterest-style blog */ .pin-blog-hero{padding:86px 0 36px;text-align:center}.pin-blog-hero h1{font-size:clamp(46px,7vw,82px);line-height:.98;letter-spacing:-.065em;margin:16px auto 14px;max-width:980px}.pin-blog-hero>div>p{max-width:700px;margin:0 auto;color:var(--muted);font-size:16px} .pin-blog-search{display:grid;grid-template-columns:minmax(0,1fr) 220px auto;gap:8px;max-width:860px;margin:30px auto 15px;padding:8px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.032);box-shadow:0 18px 46px rgba(0,0,0,.12)}.pin-blog-search>div{position:relative}.pin-blog-search>div svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;color:#758198}.pin-blog-search input,.pin-blog-search select{width:100%;height:46px;border:0;background:transparent;color:var(--text);outline:0}.pin-blog-search input{padding-left:44px}.pin-blog-search select{border-left:1px solid var(--line);padding:0 13px}.pin-blog-search .btn{height:46px} .pin-category-row{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;max-width:980px;margin:auto}.pin-category-row a{padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:11px}.pin-category-row a.active,.pin-category-row a:hover{color:#fff;background:rgba(124,92,255,.15);border-color:rgba(124,92,255,.32)} .pin-publications{padding:40px 0 100px}.pin-section-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.pin-section-head>div{display:flex;align-items:center;gap:10px;flex:1}.pin-section-head>div>i{height:1px;background:var(--line);flex:1}.pin-section-head>span{font-size:11px;color:var(--muted)}.pin-spark{color:#a970ff}.pin-spark svg{width:15px} .pin-masonry,.pin-home-masonry{column-count:4;column-gap:18px}.pin-home-masonry{column-count:3} .pin-card{break-inside:avoid;margin:0 0 18px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.046),rgba(255,255,255,.018));box-shadow:0 20px 48px rgba(0,0,0,.17);transition:.28s}.pin-card:hover{transform:translateY(-5px);border-color:rgba(137,104,255,.36);box-shadow:0 26px 65px rgba(0,0,0,.26)}.pin-card>a{display:block}.pin-image{position:relative;overflow:hidden;background:#0d1320}.pin-image img{display:block;width:100%;height:auto;min-height:190px;object-fit:cover;transition:.45s}.pin-size-1 .pin-image img{aspect-ratio:4/5}.pin-size-2 .pin-image img{aspect-ratio:1/1}.pin-size-3 .pin-image img{aspect-ratio:4/6}.pin-size-4 .pin-image img{aspect-ratio:16/11}.pin-size-5 .pin-image img{aspect-ratio:3/4}.pin-card:hover .pin-image img{transform:scale(1.035)}.pin-badge{position:absolute;left:12px;top:12px;padding:6px 8px;border:1px solid rgba(255,255,255,.13);border-radius:8px;background:rgba(5,8,16,.78);backdrop-filter:blur(12px);color:#dfd7ff;font-size:8px;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.pin-hover{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:5px;padding:7px 10px;border-radius:9px;background:rgba(9,12,20,.78);backdrop-filter:blur(12px);font-size:9px;font-weight:800;opacity:0;transform:translateY(6px);transition:.2s}.pin-hover svg{width:12px}.pin-card:hover .pin-hover{opacity:1;transform:none}.pin-body{padding:16px}.pin-body h2,.pin-body h3{margin:0;font-size:18px;line-height:1.28;letter-spacing:-.025em}.pin-body p{font-size:11px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0 13px}.pin-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:12px;border-top:1px solid var(--line);color:#77849a;font-size:9px}.pin-meta span{display:flex;align-items:center;gap:5px;min-width:0}.pin-meta svg{width:11px} .pin-home-blog .blog-section-head{margin-bottom:24px}.pin-home-blog .pin-body p{display:none} html[data-theme="light"] .pin-card{background:#fff;box-shadow:0 18px 48px rgba(35,49,77,.08)}html[data-theme="light"] .pin-badge,html[data-theme="light"] .pin-hover{color:#fff} html[data-theme="light"] .pin-blog-search{background:#fff;box-shadow:0 16px 44px rgba(35,49,77,.08)}html[data-theme="light"] .pin-category-row a.active{color:#5b3fd7} /* Article refinements */ .article-toc-card{padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025)}.article-toc-card>small{display:block;color:#7f8aa0;font-size:9px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}.article-toc-card nav{display:grid;gap:5px}.article-toc-card a{color:#aeb8ca;font-size:10px;line-height:1.4}.article-toc-card a.sub{padding-left:10px;color:#7f8aa0}.article-toc-card a:hover{color:#fff}.article-author-card .article-author-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.article-author-card>span:last-child{color:#758198;font-size:9px;margin-top:3px}.article-related-tools{margin-top:34px}.related-tools-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.related-tools-row>a{display:flex;align-items:center;gap:11px;padding:14px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);transition:.2s}.related-tools-row>a:hover{transform:translateY(-3px);border-color:rgba(124,92,255,.35)}.related-tools-row>a>div{min-width:0;flex:1}.related-tools-row strong,.related-tools-row small{display:block}.related-tools-row small{font-size:9px;color:#758198;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.related-tools-row>a>svg{width:14px;color:#8792a6} /* Tool page polish */ .auto-tool-page .branded-tool-shell{box-shadow:0 28px 90px rgba(0,0,0,.30),inset 0 1px rgba(255,255,255,.04)}.native-tool-canvas{padding:18px;background:radial-gradient(800px 360px at 90% -10%,rgba(124,92,255,.08),transparent 55%),#090e18}.native-tool-canvas .tool-engine-app{max-width:1180px;margin:auto}.tool-page-badges span{backdrop-filter:blur(12px)}.tool-after-grid{margin-top:24px}.tool-after-grid article,.tool-after-grid aside{box-shadow:0 16px 42px rgba(0,0,0,.13)} html[data-theme="light"] .pin-card .pin-body,html[data-theme="light"] .article-toc-card,html[data-theme="light"] .related-tools-row>a{background:#fff;color:#172033} html[data-theme="light"] .article-toc-card a{color:#526079}html[data-theme="light"] .article-toc-card a:hover{color:#4b35bc} @media(max-width:1050px){.pin-masonry{column-count:3}.pin-home-masonry{column-count:2}.related-tools-row{grid-template-columns:1fr 1fr}} @media(max-width:760px){.pin-blog-search{grid-template-columns:1fr}.pin-blog-search select{border-left:0;border-top:1px solid var(--line)}.pin-masonry,.pin-home-masonry{column-count:2}.pin-blog-hero{padding-top:58px}.pin-blog-hero h1{font-size:48px}.related-tools-row{grid-template-columns:1fr}.theme-toggle-btn{width:42px;height:42px}} @media(max-width:520px){.pin-masonry,.pin-home-masonry{column-count:1}.pin-blog-hero h1{font-size:40px}.pin-card{border-radius:17px}.pin-image img{min-height:220px}} /* V15 final production polish */ .user-top-actions{display:flex;align-items:center;gap:10px}.user-top-actions .theme-toggle-btn{width:42px;height:42px} html[data-theme="light"] .user-dashboard-body{background:#f5f7fb;color:#172033} html[data-theme="light"] .user-sidebar{background:rgba(250,252,255,.94);border-color:rgba(30,46,76,.09);box-shadow:18px 0 55px rgba(36,50,80,.06)} html[data-theme="light"] .user-profile-mini,html[data-theme="light"] .user-sidebar-bottom{border-color:rgba(30,46,76,.08)} html[data-theme="light"] .user-sidebar nav a,html[data-theme="light"] .user-sidebar-bottom a{color:#647188} html[data-theme="light"] .user-sidebar nav a:hover,html[data-theme="light"] .user-sidebar nav a.active,html[data-theme="light"] .user-sidebar-bottom a:hover{color:#34265f;background:rgba(124,58,237,.08)} html[data-theme="light"] .user-topbar{background:rgba(250,252,255,.76);border-color:rgba(30,46,76,.08);backdrop-filter:blur(18px)} html[data-theme="light"] .user-card,html[data-theme="light"] .user-metrics>div{background:#fff;border-color:rgba(30,46,76,.09);box-shadow:0 18px 50px rgba(36,50,80,.06)} html[data-theme="light"] .submission-list>a,html[data-theme="light"] .submission-row,html[data-theme="light"] .user-card-head{border-color:rgba(30,46,76,.08)} html[data-theme="light"] .submission-info p{background:#f6f8fc;color:#5f6d84} html[data-theme="light"] .field-light input,html[data-theme="light"] .field-light textarea,html[data-theme="light"] .field-light select{background:#fff;color:#172033;border-color:#d8dfeb} html[data-theme="light"] .profile-editor strong,html[data-theme="light"] .user-card h2{color:#172033} .article-author-site{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;margin-top:11px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;color:#aab4c8!important;font-size:10px!important}.article-author-site svg{width:12px}.article-author-site:hover{color:#fff!important;border-color:rgba(124,92,255,.35)} html[data-theme="light"] .article-author-site{color:#59677d!important;background:#f6f8fb}.pin-load-more{display:flex;flex-direction:column;align-items:center;gap:9px;margin:38px auto 0}.pin-load-more small{color:var(--muted);font-size:11px} @media(max-width:700px){.user-top-actions .btn{display:none}.user-top-actions{margin-left:auto}.user-topbar{padding:20px}.user-content{padding:20px}.pin-load-more{margin-top:26px}} /* ========================================================= ToolNexa V16 — true masonry images + refined light theme Dark theme intentionally remains unchanged. ========================================================= */ /* True Pinterest-style masonry: never crop publication artwork. */ .pin-image{background:transparent} .pin-image img, .pin-size-1 .pin-image img, .pin-size-2 .pin-image img, .pin-size-3 .pin-image img, .pin-size-4 .pin-image img, .pin-size-5 .pin-image img{ width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; aspect-ratio:auto!important; object-fit:contain!important; object-position:center!important; } .pin-card{display:inline-block;width:100%;vertical-align:top} .pin-card .pin-body{padding:15px 16px 16px} .pin-card .pin-body p{display:none} .pin-card .pin-body h2,.pin-card .pin-body h3{font-size:16px;line-height:1.35} .pin-card .pin-meta{margin-top:12px} .pin-card:hover .pin-image img{transform:none} .pin-hover{background:rgba(8,10,17,.86);color:#fff} /* Professional light mode — scoped only to light theme. */ html[data-theme="light"]{ --bg:#f7f8fc; --bg-soft:#eff3f9; --panel:rgba(255,255,255,.92); --panel-2:#ffffff; --line:rgba(28,42,68,.105); --line-2:rgba(28,42,68,.18); --text:#101828; --muted:#5f6f86; --muted-2:#7b899d; --shadow:0 24px 70px rgba(38,52,84,.09); } html[data-theme="light"] body{ background: radial-gradient(900px 560px at -5% -10%,rgba(75,102,255,.085),transparent 58%), radial-gradient(850px 560px at 105% 7%,rgba(171,71,255,.075),transparent 58%), linear-gradient(180deg,#fafbfe 0%,#f4f6fa 55%,#eef2f7 100%); } html[data-theme="light"] .spotlight{opacity:.18} html[data-theme="light"] .bg-orbs{opacity:.20} html[data-theme="light"] .brand-wordmark strong{color:#111827!important} html[data-theme="light"] .brand-wordmark span{color:#536176!important} html[data-theme="light"] .gradient-text{ background:linear-gradient(90deg,#2b3953 0%,#5266dc 27%,#7958e8 60%,#b14ed4 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } html[data-theme="light"] .section-kicker{ color:#6542b9; background:linear-gradient(180deg,rgba(118,75,225,.085),rgba(118,75,225,.055)); border-color:rgba(118,75,225,.20); box-shadow:inset 0 1px rgba(255,255,255,.85); } html[data-theme="light"] .icon-btn, html[data-theme="light"] .btn-ghost{ color:#344157; background:rgba(255,255,255,.92); border-color:rgba(28,42,68,.12); box-shadow:0 8px 24px rgba(38,52,84,.06); } html[data-theme="light"] .icon-btn:hover, html[data-theme="light"] .btn-ghost:hover{ color:#4f36b5; background:#fff; border-color:rgba(104,76,210,.24); box-shadow:0 12px 32px rgba(78,57,153,.11); } html[data-theme="light"] .theme-toggle-btn{color:#5f43c5} html[data-theme="light"] .btn-primary{color:#fff!important} html[data-theme="light"] .nav{ background:rgba(251,252,255,.88); backdrop-filter:blur(22px) saturate(145%); box-shadow:0 1px 0 rgba(24,37,61,.06),0 14px 40px rgba(37,49,77,.045); } html[data-theme="light"] .header-search{ background:rgba(255,255,255,.92); border-color:rgba(28,42,68,.11); box-shadow:0 10px 32px rgba(37,49,77,.055); } html[data-theme="light"] .header-search input::placeholder, html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder{color:#8b98aa} html[data-theme="light"] .nav-links-compact>a, html[data-theme="light"] .nav-drop-btn, html[data-theme="light"] .nav-signin{color:#3f4d62} html[data-theme="light"] .nav-signin{font-weight:800} html[data-theme="light"] .pin-blog-hero h1{color:#101828} html[data-theme="light"] .pin-blog-search{ background:rgba(255,255,255,.96); border-color:rgba(28,42,68,.10); box-shadow:0 18px 55px rgba(35,49,77,.075); } html[data-theme="light"] .pin-blog-search input, html[data-theme="light"] .pin-blog-search select{background:transparent!important} html[data-theme="light"] .pin-category-row a{ color:#65748a; background:rgba(255,255,255,.68); border-color:rgba(28,42,68,.10); } html[data-theme="light"] .pin-category-row a:hover, html[data-theme="light"] .pin-category-row a.active{ color:#5739b4; background:rgba(116,83,218,.085); border-color:rgba(116,83,218,.22); } html[data-theme="light"] .pin-card{ background:#fff; border-color:rgba(27,41,67,.09); box-shadow:0 14px 38px rgba(35,49,77,.065); } html[data-theme="light"] .pin-card:hover{ border-color:rgba(116,83,218,.22); box-shadow:0 22px 56px rgba(46,54,90,.105); } html[data-theme="light"] .pin-card .pin-body{background:#fff} html[data-theme="light"] .pin-meta{color:#708097;border-color:rgba(27,41,67,.08)} html[data-theme="light"] .blog-section-head h2, html[data-theme="light"] .pin-section-head strong{color:#111827} html[data-theme="light"] .blog-view-all{color:#56657a} html[data-theme="light"] .blog-view-all:hover{color:#5d3fc1} html[data-theme="light"] .premium-footer{border-color:rgba(27,41,67,.08)} html[data-theme="light"] .footer-top-card{ background:linear-gradient(135deg,rgba(83,104,255,.07),rgba(166,75,232,.055),rgba(255,255,255,.92)); border-color:rgba(27,41,67,.09); } html[data-theme="light"] .footer-top-card h3, html[data-theme="light"] .footer-brand-col .brand-wordmark strong{color:#111827} html[data-theme="light"] .footer-kicker{color:#6948bd} html[data-theme="light"] .footer-trust span, html[data-theme="light"] .premium-socials a{ background:#fff;color:#627087;border-color:rgba(27,41,67,.09); } html[data-theme="light"] .premium-socials a:hover{color:#5f42c1} /* Keep masonry natural on phones too. */ @media(max-width:520px){ .pin-image img{min-height:0!important;height:auto!important;object-fit:contain!important} } /* ========================================================= ToolNexa V17 — full light-theme QA + professional dialogs Dark mode rules above remain unchanged. ========================================================= */ html[data-theme="light"] .noise{opacity:.012} html[data-theme="light"] .grid-overlay{ opacity:.035; background-image:linear-gradient(rgba(50,67,95,.42) 1px,transparent 1px),linear-gradient(90deg,rgba(50,67,95,.42) 1px,transparent 1px) } html[data-theme="light"] .orb{opacity:.15} /* Header/search/dropdowns */ html[data-theme="light"] .header-search input, html[data-theme="light"] .hero-search input, html[data-theme="light"] .library-search input{color:#172033} html[data-theme="light"] .header-search-results, html[data-theme="light"] .hero-search-results, html[data-theme="light"] .mega-menu{ background:rgba(255,255,255,.98);border-color:rgba(28,42,68,.10); box-shadow:0 22px 60px rgba(36,50,80,.13) } html[data-theme="light"] .header-result, html[data-theme="light"] .search-result, html[data-theme="light"] .mega-menu a{color:#253148} html[data-theme="light"] .header-result:hover, html[data-theme="light"] .search-result:hover, html[data-theme="light"] .mega-menu a:hover{background:#f4f1ff} html[data-theme="light"] .header-result small, html[data-theme="light"] .search-result small, html[data-theme="light"] .mega-menu small{color:#738198} html[data-theme="light"] .search-shortcut, html[data-theme="light"] .quick-chip, html[data-theme="light"] .trust-dot{ background:#fff;border-color:rgba(28,42,68,.10);color:#5e6d83 } html[data-theme="light"] .quick-chip:hover{color:#5538b0;background:#f5f1ff;border-color:#cdbfff} html[data-theme="light"] .hero-quick{color:#718096} html[data-theme="light"] .trust-item{color:#4f5f75} /* Keep the product mockup intentionally dark, but fully readable. */ html[data-theme="light"] .hero-card{ color:#f6f8ff; background:linear-gradient(180deg,rgba(25,31,49,.96),rgba(13,18,31,.98)),#0c111d; border-color:rgba(45,58,86,.30); box-shadow:0 30px 75px rgba(32,42,65,.20) } html[data-theme="light"] .hero-card .window-bar, html[data-theme="light"] .hero-card .sidebar{border-color:rgba(255,255,255,.09)} html[data-theme="light"] .hero-card .sidebar{background:rgba(255,255,255,.018)} html[data-theme="light"] .hero-card .side-item{color:#909ab0} html[data-theme="light"] .hero-card .side-item.active{color:#fff} html[data-theme="light"] .hero-card .searchbox, html[data-theme="light"] .hero-card .mini-stat, html[data-theme="light"] .hero-card .tool-mini{ color:#f4f7ff;background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.09) } html[data-theme="light"] .hero-card .dash-top h3, html[data-theme="light"] .hero-card .mini-stat b, html[data-theme="light"] .hero-card .tool-mini b{color:#f6f8ff} html[data-theme="light"] .hero-card .dash-top small, html[data-theme="light"] .hero-card .mini-stat span, html[data-theme="light"] .hero-card .tool-mini p, html[data-theme="light"] .hero-card .searchbox{color:#8995aa} /* Marquee + library surfaces */ html[data-theme="light"] .marquee-wrap{background:rgba(255,255,255,.62);border-color:rgba(28,42,68,.075)} html[data-theme="light"] .marquee-item, html[data-theme="light"] .mini-pill, html[data-theme="light"] .tag, html[data-theme="light"] .library-filter{ background:#fff;border-color:rgba(28,42,68,.10);color:#536277; } html[data-theme="light"] .tag:hover, html[data-theme="light"] .library-filter:hover, html[data-theme="light"] .library-filter.active{ color:#5538b0;background:#f5f1ff;border-color:#cdbfff } html[data-theme="light"] .category-card, html[data-theme="light"] .premium-tool-card, html[data-theme="light"] .tool-card, html[data-theme="light"] .step, html[data-theme="light"] .compare-card, html[data-theme="light"] .testimonial-card, html[data-theme="light"] .faq, html[data-theme="light"] .new-tool{ background:linear-gradient(180deg,#fff,#fbfcff); border-color:rgba(28,42,68,.095); box-shadow:0 14px 38px rgba(35,49,77,.055) } html[data-theme="light"] .category-icon, html[data-theme="light"] .tool-open, html[data-theme="light"] .tool-card .arrow-box, html[data-theme="light"] .tiny-icon{ background:#f5f3ff;border-color:rgba(100,76,195,.14);color:#5e44c1 } html[data-theme="light"] .premium-tool-card p, html[data-theme="light"] .premium-tool-meta, html[data-theme="light"] .tool-card p, html[data-theme="light"] .tool-card .tool-meta{color:#66758b} html[data-theme="light"] .premium-tool-meta, html[data-theme="light"] .tool-meta{border-color:rgba(28,42,68,.075)} html[data-theme="light"] .tool-badge.popular{color:#6844c2;background:#f4efff;border-color:#d9c9ff} html[data-theme="light"] .tool-badge.new{color:#1c7180;background:#edfafd;border-color:#bde9ef} /* Interactive demo */ html[data-theme="light"] .panel{ background:linear-gradient(180deg,#fff,#fbfcff); border-color:rgba(28,42,68,.095);box-shadow:0 18px 48px rgba(35,49,77,.07) } html[data-theme="light"] .panel h3{color:#111827} html[data-theme="light"] .upload-zone, html[data-theme="light"] .typing-box, html[data-theme="light"] .type-area, html[data-theme="light"] .demo-stat{ background:#f8f9fd;border-color:rgba(28,42,68,.105) } html[data-theme="light"] .upload-zone{border-style:dashed} html[data-theme="light"] .upload-zone strong, html[data-theme="light"] .type-area, html[data-theme="light"] .demo-stat b{color:#172033} html[data-theme="light"] .type-area{background:#fff} html[data-theme="light"] .demo-stat span{color:#718096} html[data-theme="light"] .range-head{color:#46546a} html[data-theme="light"] .fake-range{background:#e8ecf4} /* Comparison */ html[data-theme="light"] .compare-head, html[data-theme="light"] .compare-row{border-color:rgba(28,42,68,.08)} html[data-theme="light"] .compare-row{color:#253148} html[data-theme="light"] .good{color:#15945e} html[data-theme="light"] .bad{color:#d94768} /* Stats: pure light cards instead of unreadable dark blocks. */ html[data-theme="light"] .stats{ background:rgba(28,42,68,.08);border-color:rgba(28,42,68,.08); box-shadow:0 18px 55px rgba(35,49,77,.07) } html[data-theme="light"] .stat{background:#fff;color:#172033} html[data-theme="light"] .stat svg{color:#6548c4} html[data-theme="light"] .stat span{color:#6d7c91} /* Testimonials */ html[data-theme="light"] .testimonial-user strong{color:#172033} html[data-theme="light"] .testimonial-user span{color:#68778d} html[data-theme="light"] .testimonial-card>p{color:#4f5f75!important} html[data-theme="light"] .testimonial-quote{color:rgba(102,74,198,.10)} html[data-theme="light"] .testimonial-avatar{color:#fff} /* FAQ */ html[data-theme="light"] .faq-btn{color:#172033} html[data-theme="light"] .faq-content{color:#5d6d83} html[data-theme="light"] .faq.open{border-color:rgba(103,76,205,.20);box-shadow:0 14px 38px rgba(35,49,77,.055)} /* CTA deliberately stays dark as a high-contrast premium block. */ html[data-theme="light"] .cta{ color:#f6f8ff; border-color:rgba(82,99,138,.20); box-shadow:0 28px 78px rgba(28,37,57,.20) } html[data-theme="light"] .cta h2, html[data-theme="light"] .cta-mini strong{color:#f6f8ff} html[data-theme="light"] .cta p{color:#aeb8ca} html[data-theme="light"] .cta-side{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10)} html[data-theme="light"] .cta-mini{border-color:rgba(255,255,255,.08)} html[data-theme="light"] .cta-mini span{color:#9aa6bb} html[data-theme="light"] .cta .btn-ghost{background:#fff;color:#344157;border-color:transparent} /* Content/auth/tool pages */ html[data-theme="light"] .content-card, html[data-theme="light"] .content-form-card, html[data-theme="light"] .legal-card, html[data-theme="light"] .support-info, html[data-theme="light"] .premium-form-card, html[data-theme="light"] .tool-after-grid article, html[data-theme="light"] .tool-after-grid aside{ background:#fff;border-color:rgba(28,42,68,.095);box-shadow:0 16px 48px rgba(35,49,77,.06) } html[data-theme="light"] .prose p, html[data-theme="light"] .content-hero p{color:#58687e} html[data-theme="light"] .empty-state{color:#6c7b90;border-color:rgba(28,42,68,.12)} html[data-theme="light"] .empty-state h3{color:#172033} html[data-theme="light"] .recent-history-shell{background:linear-gradient(135deg,#fff,#faf9ff)} html[data-theme="light"] .history-tool-card{background:#fff} html[data-theme="light"] .history-tool-open{border-color:rgba(28,42,68,.08);color:#5e44c1} /* Footer completion */ html[data-theme="light"] .premium-footer{background:linear-gradient(180deg,#f8f9fc,#eef2f7)} html[data-theme="light"] .footer-col h4{color:#627188} html[data-theme="light"] .footer-col a{color:#536277} html[data-theme="light"] .footer-col a:hover{color:#5137ad} html[data-theme="light"] .footer-note, html[data-theme="light"] .premium-footer-bottom, html[data-theme="light"] .footer-mini-links a{color:#6b798e} html[data-theme="light"] .footer-status{color:#516178} /* Global ToolNexa modal */ body.tnx-dialog-open{overflow:hidden} .tnx-dialog-root{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:22px;opacity:0;visibility:hidden;transition:.2s} .tnx-dialog-root.open{opacity:1;visibility:visible} .tnx-dialog-backdrop{position:absolute;inset:0;background:rgba(3,6,14,.72);backdrop-filter:blur(10px)} .tnx-dialog-card{ position:relative;z-index:2;width:min(470px,100%);padding:26px;border-radius:24px; border:1px solid rgba(255,255,255,.12); background:radial-gradient(360px 190px at 100% 0%,rgba(145,78,255,.16),transparent 68%),linear-gradient(180deg,#111725,#0b101c); color:#f7f9ff;box-shadow:0 36px 110px rgba(0,0,0,.55); transform:translateY(12px) scale(.985);transition:.22s cubic-bezier(.2,.8,.2,1) } .tnx-dialog-root.open .tnx-dialog-card{transform:none} .tnx-dialog-x{position:absolute;right:14px;top:14px;width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#aeb7c8;display:grid;place-items:center;cursor:pointer} .tnx-dialog-x svg{width:16px} .tnx-dialog-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(79,124,255,.28),rgba(168,85,247,.25));border:1px solid rgba(155,116,255,.24);color:#d8caff} .tnx-dialog-icon svg{width:21px} .tnx-dialog-card.danger .tnx-dialog-icon{background:rgba(255,95,120,.10);border-color:rgba(255,95,120,.22);color:#ff8fa1} .tnx-dialog-copy{margin-top:18px}.tnx-dialog-kicker{font-size:9px;font-weight:850;letter-spacing:.13em;color:#9d8fe0} .tnx-dialog-copy h2{margin:5px 0 8px;font-size:23px;letter-spacing:-.035em}.tnx-dialog-copy p{margin:0;color:#9aa6bb;font-size:13px;line-height:1.65} .tnx-dialog-input-wrap{display:grid;gap:7px;margin-top:18px}.tnx-dialog-input-wrap label{font-size:10px;color:#8996aa}.tnx-dialog-input-wrap input{width:100%;padding:12px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:#fff;outline:0}.tnx-dialog-input-wrap input:focus{border-color:#7961ef;box-shadow:0 0 0 4px rgba(121,97,239,.10)} .tnx-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.tnx-dialog-btn{min-width:105px;border-radius:12px;padding:10px 14px;border:1px solid rgba(255,255,255,.09);cursor:pointer;font-weight:800}.tnx-dialog-btn.ghost{background:rgba(255,255,255,.04);color:#c3cbda}.tnx-dialog-btn.primary{color:white;border-color:transparent;background:linear-gradient(135deg,#5579ff,#9b57f5);box-shadow:0 10px 26px rgba(105,78,220,.25)}.tnx-dialog-btn.danger{background:linear-gradient(135deg,#e34d65,#ff7188)} html[data-theme="light"] .tnx-dialog-backdrop{background:rgba(30,38,56,.42)} html[data-theme="light"] .tnx-dialog-card{background:radial-gradient(360px 190px at 100% 0%,rgba(145,78,255,.10),transparent 68%),#fff;color:#172033;border-color:rgba(28,42,68,.12);box-shadow:0 32px 100px rgba(31,42,68,.22)} html[data-theme="light"] .tnx-dialog-copy p{color:#637188} html[data-theme="light"] .tnx-dialog-x{background:#f6f8fb;border-color:rgba(28,42,68,.08);color:#627188} html[data-theme="light"] .tnx-dialog-input-wrap input{background:#f8f9fc;color:#172033;border-color:#d8dfeb} html[data-theme="light"] .tnx-dialog-btn.ghost{background:#f6f8fb;color:#405067;border-color:rgba(28,42,68,.09)} /* V18 — full-page publication studio */ .article-submit-card{max-width:none!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important} .article-submit-card .user-form{display:grid!important;grid-template-columns:minmax(0,1fr) 330px!important;gap:22px!important;align-items:start!important;max-width:1500px;margin:0 auto} .article-submit-card .editor-mode-note{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:13px 16px;border:1px solid rgba(124,92,255,.18);background:rgba(124,92,255,.06);border-radius:15px;color:#aeb8ca;font-size:12px} .article-submit-card .article-studio-main{min-width:0;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018));overflow:hidden;box-shadow:0 28px 70px rgba(0,0,0,.18)} .article-submit-card .article-title-input{width:100%;border:0!important;background:transparent!important;color:#f6f8fc!important;font-size:38px!important;font-weight:800!important;letter-spacing:-.035em;padding:30px 32px 12px!important;box-shadow:none!important;outline:none} .article-submit-card .article-title-input::placeholder{color:#4e596d} .article-submit-card .article-deck-input{width:calc(100% - 64px)!important;margin:0 32px 22px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;border-radius:0!important;background:transparent!important;color:#9aa6bb!important;padding:0 0 20px!important;resize:none;box-shadow:none!important;font-size:15px;line-height:1.6} .article-submit-card .article-side{position:sticky;top:24px;display:grid;gap:14px} .article-submit-card .article-side-card{border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));padding:18px} .article-submit-card .article-side-card h3{margin:0 0 14px;font-size:14px}.article-submit-card .article-side-card label{display:grid;gap:7px;margin:0 0 13px;color:#8996ac;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800} .article-submit-card .article-side-card input,.article-submit-card .article-side-card textarea{width:100%;border:1px solid #293247;border-radius:11px;background:#0d1320;color:#eef2f8;padding:10px 11px;outline:none;text-transform:none;letter-spacing:0;font-weight:500;font-size:12px} .article-submit-card .article-side-card textarea{resize:vertical;min-height:88px}.article-submit-card .article-cover-preview{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;border:1px solid var(--line);margin-bottom:13px} .article-submit-card .article-actions{display:grid;grid-template-columns:1fr auto;gap:9px}.article-submit-card .article-actions .btn{justify-content:center} .article-submit-card .tnx-editor{border:0!important;border-radius:0!important;background:transparent!important}.article-submit-card .tnx-editor-top{padding:10px 20px!important}.article-submit-card .tnx-editor-toolbar{padding:10px 20px!important;position:sticky;top:0;z-index:4}.article-submit-card .tnx-editor-visual{min-height:650px!important;max-height:none!important;padding:38px clamp(28px,6vw,90px)!important;font-size:17px;line-height:1.85}.article-submit-card .tnx-editor-html{min-height:650px!important;max-height:none!important;padding:30px!important} .article-submit-card .tnx-editor-toolbar button,.article-submit-card .tnx-editor-tabs button{min-height:34px;min-width:34px;font-size:11px!important;display:inline-flex;align-items:center;justify-content:center;gap:6px} .article-submit-card .tnx-editor-toolbar svg,.article-submit-card .tnx-editor-tabs svg{width:15px;height:15px} .article-submit-card .studio-status{display:flex;align-items:center;gap:7px;color:#76839a;font-size:11px}.article-submit-card .studio-status:before{content:"";width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.08)} html[data-theme="light"] .article-submit-card .article-studio-main,html[data-theme="light"] .article-submit-card .article-side-card{background:#fff;border-color:#dfe5ef;box-shadow:0 24px 65px rgba(38,54,86,.08)} html[data-theme="light"] .article-submit-card .article-title-input{color:#121a2a!important}html[data-theme="light"] .article-submit-card .article-title-input::placeholder{color:#a6afbd}html[data-theme="light"] .article-submit-card .article-deck-input{color:#5e6b80!important;border-color:#e5e9f0!important}html[data-theme="light"] .article-submit-card .article-side-card input,html[data-theme="light"] .article-submit-card .article-side-card textarea{background:#f8fafc;color:#182237;border-color:#dbe2ed} @media(max-width:1050px){.article-submit-card .user-form{grid-template-columns:1fr!important}.article-submit-card .article-side{position:static;grid-template-columns:1fr 1fr}.article-submit-card .article-actions{grid-column:1/-1}} @media(max-width:700px){.article-submit-card .article-side{grid-template-columns:1fr}.article-submit-card .article-title-input{font-size:30px!important;padding:24px 20px 10px!important}.article-submit-card .article-deck-input{width:calc(100% - 40px)!important;margin:0 20px 16px!important}.article-submit-card .tnx-editor-visual{padding:28px 20px!important;min-height:520px!important}.article-submit-card .tnx-editor-toolbar{flex-wrap:nowrap!important;overflow-x:auto}.article-submit-card .editor-mode-note{align-items:flex-start}} /* ========================================================= ToolNexa V19 — Production Publication Studio Shared editor styles + natural publication media + light QA ========================================================= */ /* Full-page user writing mode */ .writing-studio-page .user-dashboard-shell{grid-template-columns:1fr;min-height:100vh} .writing-studio-page .user-main{width:100%;min-width:0} .writing-studio-page .user-topbar.writing-topbar{position:sticky;top:0;z-index:80;padding:15px clamp(18px,3vw,42px);background:rgba(7,10,18,.88);backdrop-filter:blur(22px);border-bottom:1px solid rgba(255,255,255,.07)} .writing-topbar-left{display:flex;align-items:center;gap:15px;min-width:0}.writing-topbar-left>div{min-width:0}.writing-topbar-left h1{font-size:20px;margin:2px 0 0}.writing-topbar-left p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:780px} .writing-back{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.035);color:#cdd5e3;flex:0 0 auto}.writing-back:hover{background:rgba(124,92,255,.12);color:#fff;border-color:rgba(124,92,255,.28)}.writing-back svg{width:17px} .writing-private{display:flex;align-items:center;gap:7px;color:#8f9aaf;font-size:11px}.writing-private svg{width:15px;color:#7c6cf0} .writing-studio-page .user-content{padding:26px clamp(18px,3vw,42px) 70px} /* Studio shell */ .article-submit-card .user-form{grid-template-columns:minmax(0,1fr) 350px!important;gap:24px!important;max-width:1640px} .article-submit-card .editor-mode-note{padding:12px 15px;justify-content:space-between;flex-wrap:wrap}.article-submit-card .editor-mode-note>div:first-of-type{display:grid;gap:2px}.article-submit-card .editor-mode-note strong{color:#e9edf6}.article-submit-card .editor-mode-note span{color:#8591a6} .studio-mini-badges{display:flex!important;gap:8px!important;flex-direction:row!important}.studio-mini-badges span{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);font-size:9px;color:#8f9ab0!important}.studio-mini-badges svg{width:12px} .article-document-head{padding-top:10px} .article-submit-card .article-title-input{font-size:clamp(34px,4vw,58px)!important;line-height:1.06!important;padding:42px clamp(28px,5vw,74px) 14px!important} .article-submit-card .article-deck-input{width:calc(100% - clamp(56px,10vw,148px))!important;margin:0 clamp(28px,5vw,74px) 26px!important;font-size:17px!important;min-height:72px} .article-submit-card .article-side{top:92px}.article-submit-card .article-side-card{padding:17px 18px}.side-card-title{display:flex;gap:10px;align-items:flex-start;margin-bottom:16px}.side-card-title>i,.side-card-title>svg{width:17px;color:#9a83ff;margin-top:1px}.side-card-title h3{margin:0!important;font-size:13px!important}.side-card-title p{margin:3px 0 0;color:#748198;font-size:10px;line-height:1.5}.article-submit-card .article-side-card label:last-child{margin-bottom:0} .article-submit-card .article-cover-preview{display:block;width:100%;height:auto!important;max-height:360px;object-fit:contain!important;aspect-ratio:auto!important;background:#090f1b;border-radius:14px;padding:7px} .article-submit-actions{display:grid;gap:9px}.article-submit-actions .btn{width:100%;justify-content:center}.article-cancel-link{text-align:center;color:#77849a;font-size:10px;padding:5px}.feedback-card p{margin:0;color:#f0c77b;font-size:11px;line-height:1.65} /* Shared rich editor — public user pages previously missed these base rules. */ .tnx-editor{border-top:1px solid rgba(255,255,255,.07);background:#0b101b;overflow:hidden} .tnx-editor-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;background:#0e1522;border-bottom:1px solid rgba(255,255,255,.07)} .tnx-editor-tabs,.tnx-editor-top-actions,.toolbar-group{display:flex;align-items:center;gap:5px}.tnx-editor-tabs button,.tnx-editor-top-actions button,.tnx-editor-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:rgba(255,255,255,.035);color:#aeb8c9;padding:7px 9px;cursor:pointer;font:inherit;font-size:10px;transition:.18s}.tnx-editor-tabs button:hover,.tnx-editor-top-actions button:hover,.tnx-editor-toolbar button:hover{color:#fff;background:rgba(124,92,255,.10);border-color:rgba(124,92,255,.22)}.tnx-editor-tabs button.active{color:#fff;background:rgba(124,92,255,.17);border-color:rgba(124,92,255,.32)}.tnx-editor-top-actions svg,.tnx-editor-toolbar svg,.tnx-editor-tabs svg{width:14px;height:14px} .tnx-editor-state{display:flex;align-items:center;gap:7px;color:#748198;font-size:10px;white-space:nowrap}.tnx-editor-state span{width:7px;height:7px;border-radius:50%;background:#64748b}.tnx-editor-state.saved span{background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.08)}.tnx-editor-state.dirty span{background:#fbbf24}.tnx-editor-state.error span{background:#fb7185} .tnx-editor-toolbar{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:10px 16px;background:#0c1320;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;z-index:8}.toolbar-group{padding-right:7px;border-right:1px solid rgba(255,255,255,.08)}.toolbar-group:last-child{border-right:0;padding-right:0}.tnx-editor-toolbar button{min-width:34px} .tnx-editor-canvas{background:#0b101b}.tnx-editor-visual{display:block;min-height:720px;padding:52px clamp(28px,7vw,112px);outline:none;color:#d6ddea;font-size:18px;line-height:1.86;caret-color:#9b7cff;overflow-wrap:anywhere}.tnx-editor-visual:empty:before,.tnx-editor-visual[data-empty="true"]:before{content:attr(data-placeholder);color:#536077;pointer-events:none}.tnx-editor-visual p{margin:0 0 1.3em}.tnx-editor-visual h2,.tnx-editor-visual h3,.tnx-editor-visual h4{color:#f7f9fd;line-height:1.18;letter-spacing:-.03em}.tnx-editor-visual h2{font-size:34px;margin:2em 0 .65em}.tnx-editor-visual h3{font-size:27px;margin:1.7em 0 .6em}.tnx-editor-visual h4{font-size:21px;margin:1.5em 0 .55em}.tnx-editor-visual blockquote{margin:28px 0;padding:18px 20px;border-left:3px solid #8167ff;border-radius:0 14px 14px 0;background:rgba(124,92,255,.07);color:#c4cde0}.tnx-editor-visual pre{margin:28px 0;padding:18px;border-radius:15px;background:#050912;color:#dbe5ff;overflow:auto;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.tnx-editor-visual a{color:#a999ff;text-decoration:underline}.tnx-editor-visual img{display:block;max-width:100%;height:auto;margin:25px auto;border-radius:16px}.tnx-editor-visual figure{margin:30px 0}.tnx-editor-visual figcaption{text-align:center;color:#77849a;font-size:11px;margin-top:9px}.tnx-editor-visual hr{border:0;border-top:1px solid rgba(255,255,255,.10);margin:38px 0}.tnx-editor-visual ul,.tnx-editor-visual ol{padding-left:1.5em}.tnx-editor-visual table{width:100%;border-collapse:collapse;margin:28px 0}.tnx-editor-visual td,.tnx-editor-visual th{border:1px solid rgba(255,255,255,.10);padding:10px;text-align:left} .tnx-editor-html{display:none;width:100%;min-height:720px;resize:vertical;border:0;outline:0;background:#070c15;color:#d6dff1;padding:34px;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.tnx-editor.html-mode .tnx-editor-visual{display:none}.tnx-editor.html-mode .tnx-editor-html{display:block} .tnx-editor-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.07);background:#0c1320;color:#718096;font-size:9px}.tnx-editor-footer>div{display:flex;gap:13px}.tnx-editor.fullscreen{position:fixed!important;inset:16px!important;z-index:10050!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:20px!important;box-shadow:0 40px 120px rgba(0,0,0,.68)!important;background:#0b101b!important}.tnx-editor.fullscreen .tnx-editor-canvas{height:calc(100vh - 170px);overflow:auto}.tnx-editor.fullscreen .tnx-editor-visual,.tnx-editor.fullscreen .tnx-editor-html{min-height:calc(100vh - 180px)}body.editor-focus-open{overflow:hidden} /* Natural blog media — never crop authored cover artwork. */ .single-blog-cover{height:auto!important;max-height:none!important;display:flex;align-items:center;justify-content:center;background:transparent!important;overflow:visible!important;border:0!important} .single-blog-cover img{display:block;width:100%;height:auto!important;max-height:78vh;object-fit:contain!important;object-position:center;border-radius:24px;border:1px solid var(--line);background:#0b101a} .pin-image img,.blog-cover img{height:auto!important;min-height:0!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important} /* Light publication/editor mode: high-contrast paper rather than washed-out dark tokens. */ html[data-theme="light"] .writing-studio-page .user-topbar.writing-topbar{background:rgba(248,250,253,.88);border-color:rgba(28,42,68,.08)} html[data-theme="light"] .writing-back{background:#fff;color:#506077;border-color:#dbe2ed}html[data-theme="light"] .writing-back:hover{color:#563bb7;background:#f3efff;border-color:#d4c8ff} html[data-theme="light"] .writing-private{color:#68778d} html[data-theme="light"] .article-submit-card .editor-mode-note{background:#f6f3ff;border-color:#ded3ff;color:#5e6c82}html[data-theme="light"] .article-submit-card .editor-mode-note strong{color:#253149}html[data-theme="light"] .studio-mini-badges span{background:#fff;border-color:#e2e7f0;color:#617087!important} html[data-theme="light"] .article-submit-card .article-studio-main,html[data-theme="light"] .article-submit-card .article-side-card{background:#fff;border-color:#dfe5ef;box-shadow:0 24px 65px rgba(38,54,86,.08)} html[data-theme="light"] .tnx-editor{border-color:#e2e7ef;background:#fff}html[data-theme="light"] .tnx-editor-top,html[data-theme="light"] .tnx-editor-toolbar,html[data-theme="light"] .tnx-editor-footer{background:#f8fafc;border-color:#e5e9f1}html[data-theme="light"] .tnx-editor-canvas{background:#fff} html[data-theme="light"] .tnx-editor-tabs button,html[data-theme="light"] .tnx-editor-top-actions button,html[data-theme="light"] .tnx-editor-toolbar button{background:#fff;color:#536278;border-color:#dfe5ee}html[data-theme="light"] .tnx-editor-tabs button:hover,html[data-theme="light"] .tnx-editor-top-actions button:hover,html[data-theme="light"] .tnx-editor-toolbar button:hover,html[data-theme="light"] .tnx-editor-tabs button.active{background:#f1edff;color:#5537b0;border-color:#d7caff}.tnx-editor-top-actions button:focus-visible,.tnx-editor-toolbar button:focus-visible{outline:3px solid rgba(124,92,255,.16);outline-offset:1px} html[data-theme="light"] .toolbar-group{border-color:#e3e8f0}html[data-theme="light"] .tnx-editor-visual{background:#fff;color:#26334a;caret-color:#6348c8}html[data-theme="light"] .tnx-editor-visual h2,html[data-theme="light"] .tnx-editor-visual h3,html[data-theme="light"] .tnx-editor-visual h4{color:#111a2b}html[data-theme="light"] .tnx-editor-visual blockquote{background:#f6f3ff;color:#4c5b71;border-color:#765dff}html[data-theme="light"] .tnx-editor-visual pre{background:#121827;color:#e8eefc}html[data-theme="light"] .tnx-editor-visual hr{border-color:#e1e7f0}html[data-theme="light"] .tnx-editor-visual td,html[data-theme="light"] .tnx-editor-visual th{border-color:#dfe5ef}html[data-theme="light"] .tnx-editor-html{background:#f7f9fc;color:#1b2940}html[data-theme="light"] .tnx-editor-footer{color:#65748a} html[data-theme="light"] .article-submit-card .article-cover-preview{background:#f7f9fc} html[data-theme="light"] .single-blog-content{color:#43536a!important}html[data-theme="light"] .single-blog-content h2,html[data-theme="light"] .single-blog-content h3,html[data-theme="light"] .single-blog-content h4{color:#111a2b!important}html[data-theme="light"] .single-blog-content blockquote{background:#f6f3ff;color:#46556b}html[data-theme="light"] .single-blog-cover img{background:#fff;border-color:#dfe5ee;box-shadow:0 22px 58px rgba(35,49,77,.10)} html[data-theme="light"] .premium-single-blog .single-blog-header>p{color:#56667c}html[data-theme="light"] .single-blog-meta{color:#6b7a90} @media(max-width:1120px){.article-submit-card .user-form{grid-template-columns:1fr!important}.article-submit-card .article-side{position:static;grid-template-columns:repeat(2,minmax(0,1fr))}.article-submit-actions{grid-column:1/-1}} @media(max-width:720px){.writing-private{display:none}.writing-topbar-left p{display:none}.article-submit-card .article-side{grid-template-columns:1fr}.article-submit-card .editor-mode-note{align-items:flex-start}.studio-mini-badges{width:100%}.tnx-editor-top{align-items:flex-start;flex-wrap:wrap}.tnx-editor-top-actions{margin-left:auto}.tnx-editor-top-actions button span{display:none}.tnx-editor-toolbar{flex-wrap:nowrap;overflow-x:auto}.toolbar-group{flex:0 0 auto}.tnx-editor-visual{min-height:560px;padding:34px 22px;font-size:16px}.tnx-editor-html{min-height:560px;padding:22px}.tnx-editor-footer{align-items:flex-start;flex-direction:column}.single-blog-cover img{border-radius:16px;max-height:none}} .cover-live-preview{margin-top:10px;padding:7px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.cover-live-preview img{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;border-radius:10px}.cover-live-preview[hidden]{display:none!important}html[data-theme="light"] .cover-live-preview{background:#f8fafc;border-color:#dfe5ee} /* ========================================================= ToolNexa V20 — independent Writing Studio panes ========================================================= */ @media(min-width:1121px){ body.writing-studio-page{overflow:hidden} .writing-studio-page .user-dashboard-shell{height:100vh;min-height:0;overflow:hidden} .writing-studio-page .user-main{height:100vh;min-height:0;display:flex;flex-direction:column;overflow:hidden} .writing-studio-page .user-topbar.writing-topbar{flex:0 0 auto} .writing-studio-page .user-content{flex:1;min-height:0;overflow:hidden;padding-bottom:26px} .writing-studio-page .article-submit-card{height:100%;min-height:0} .writing-studio-page .article-submit-card .user-form{height:100%;min-height:0;grid-template-rows:auto minmax(0,1fr);align-items:stretch!important} .writing-studio-page .article-submit-card .editor-mode-note{grid-row:1} .writing-studio-page .article-submit-card .article-studio-main{grid-row:2;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden} .writing-studio-page .article-document-head{flex:0 0 auto} .writing-studio-page .article-studio-main>.tnx-editor{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden} .writing-studio-page .article-studio-main>.tnx-editor>.tnx-editor-top,.writing-studio-page .article-studio-main>.tnx-editor>.tnx-editor-toolbar,.writing-studio-page .article-studio-main>.tnx-editor>.tnx-editor-footer{flex:0 0 auto} .writing-studio-page .article-studio-main>.tnx-editor>.tnx-editor-canvas{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin} .writing-studio-page .article-studio-main .tnx-editor-visual,.writing-studio-page .article-studio-main .tnx-editor-html{min-height:100%!important;max-height:none!important} .writing-studio-page .article-submit-card .article-side{grid-row:2;position:static!important;height:100%;min-height:0;display:block;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin} .writing-studio-page .article-submit-card .article-side-card{margin-bottom:14px} } /* ========================================================= ToolNexa V21 — production editorial/light-mode QA pass ========================================================= */ /* Editorial scale: compact, readable, professional. */ .article-submit-card .article-title-input{ font-size:clamp(30px,3.2vw,48px)!important; line-height:1.08!important; letter-spacing:-.035em!important; padding:28px 32px 10px!important; min-width:0; } .article-submit-card .article-deck-input{ font-size:15px!important; line-height:1.65!important; min-height:64px; } .article-submit-card .editor-mode-note{ font-size:11px!important; min-height:48px; } .article-submit-card .editor-mode-note strong{font-size:11px!important} .article-submit-card .editor-mode-note span{font-size:10px!important} /* Editor utility row and toolbar use one disciplined 40px rhythm. */ .article-submit-card .tnx-editor-top{min-height:54px!important;padding:8px 14px!important} .article-submit-card .tnx-editor-toolbar{padding:8px 14px!important;gap:6px!important} .article-submit-card .tnx-editor-tabs button, .article-submit-card .tnx-editor-top-actions button, .article-submit-card .tnx-editor-toolbar button{ min-width:38px!important; min-height:38px!important; height:38px!important; padding:0 11px!important; border-radius:10px!important; font-size:11px!important; font-weight:720!important; line-height:1!important; box-shadow:none!important; } .article-submit-card .tnx-editor-toolbar button{padding:0 10px!important} .article-submit-card .tnx-editor-toolbar svg, .article-submit-card .tnx-editor-top-actions svg, .article-submit-card .tnx-editor-tabs svg{width:16px!important;height:16px!important;stroke-width:1.9} .article-submit-card .toolbar-group{gap:5px!important;padding-right:7px!important;margin-right:1px} .article-submit-card .tnx-editor-state{font-size:10px!important;color:#7e8aa0!important} .article-submit-card .tnx-editor-footer{ min-height:42px; padding:9px 16px!important; font-size:10px!important; letter-spacing:0; } .article-submit-card .tnx-editor-footer>div{display:flex!important;gap:0!important;align-items:center;flex-wrap:wrap} .article-submit-card .tnx-editor-footer>div span{display:inline-flex;align-items:center;white-space:nowrap} .article-submit-card .tnx-editor-footer>div span:not(:last-child):after{content:"·";margin:0 9px;color:#4e596c} .article-submit-card .tnx-editor-footer small{display:inline-flex;align-items:center;gap:7px;font-size:10px} .editor-footer-dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.08)} .article-submit-card .tnx-editor-visual{ font-size:17px!important; line-height:1.82!important; max-width:none; } .article-submit-card .tnx-editor-visual p{margin-bottom:1.2em} .article-submit-card .tnx-editor-visual h2{font-size:clamp(27px,2.6vw,34px)!important} .article-submit-card .tnx-editor-visual h3{font-size:clamp(22px,2vw,27px)!important} .article-submit-card .tnx-editor-visual h4{font-size:20px!important} /* Side inspector form polish. */ .article-submit-card .article-side-card{padding:18px!important} .article-submit-card .side-card-title h3{font-size:14px!important;letter-spacing:-.015em} .article-submit-card .side-card-title p{font-size:10px!important;line-height:1.5} .article-submit-card .article-side-card label{font-size:9px!important;letter-spacing:.085em!important} .article-submit-card .article-side-card input, .article-submit-card .article-side-card textarea{ min-height:42px!important; font-size:12px!important; border-radius:11px!important; } .article-submit-card .article-side-card input[type=file]{padding:7px!important} .article-submit-card .article-actions .btn, .article-submit-card .article-submit-actions .btn{min-height:42px!important;padding:10px 13px!important;font-size:11px!important;border-radius:11px!important} .article-submit-card .article-cancel-link{font-size:10px;color:#758197;text-align:center;padding:6px} .article-submit-card .article-cancel-link:hover{color:#a899ff} /* Light editorial mode: no black blocks, no washed-out labels. */ html[data-theme="light"] .article-submit-card .article-studio-main, html[data-theme="light"] .article-submit-card .article-side-card{background:#fff!important;border-color:#dfe5ee!important;box-shadow:0 18px 50px rgba(31,46,75,.07)!important} html[data-theme="light"] .article-submit-card .article-title-input{color:#111827!important} html[data-theme="light"] .article-submit-card .article-title-input::placeholder{color:#9aa6b7!important} html[data-theme="light"] .article-submit-card .article-deck-input{color:#536176!important;border-color:#e5eaf1!important} html[data-theme="light"] .article-submit-card .editor-mode-note{background:#f8f6ff!important;border-color:#e1d9ff!important;color:#596980!important} html[data-theme="light"] .article-submit-card .editor-mode-note strong{color:#27324a!important} html[data-theme="light"] .article-submit-card .studio-mini-badges span{background:#fff!important;color:#5e6c81!important;border-color:#e2e7ef!important} html[data-theme="light"] .article-submit-card .tnx-editor, html[data-theme="light"] .article-submit-card .tnx-editor-canvas{background:#fff!important;border-color:#dde4ed!important} html[data-theme="light"] .article-submit-card .tnx-editor-top, html[data-theme="light"] .article-submit-card .tnx-editor-toolbar, html[data-theme="light"] .article-submit-card .tnx-editor-footer{background:#f7f9fc!important;border-color:#e2e7ef!important} html[data-theme="light"] .article-submit-card .tnx-editor-tabs button, html[data-theme="light"] .article-submit-card .tnx-editor-top-actions button, html[data-theme="light"] .article-submit-card .tnx-editor-toolbar button{ background:#fff!important; color:#425169!important; border-color:#dce3ec!important; box-shadow:0 1px 2px rgba(26,39,65,.035)!important; } html[data-theme="light"] .article-submit-card .tnx-editor-tabs button:hover, html[data-theme="light"] .article-submit-card .tnx-editor-top-actions button:hover, html[data-theme="light"] .article-submit-card .tnx-editor-toolbar button:hover{ background:#f3f0ff!important; color:#5237b8!important; border-color:#d5c9ff!important; } html[data-theme="light"] .article-submit-card .tnx-editor-tabs button.active{ background:#eee9ff!important; color:#4f35b3!important; border-color:#cfc0ff!important; box-shadow:inset 0 0 0 1px rgba(106,76,214,.05)!important; } html[data-theme="light"] .article-submit-card .toolbar-group{border-color:#e3e8ef!important} html[data-theme="light"] .article-submit-card .tnx-editor-state{color:#68768b!important} html[data-theme="light"] .article-submit-card .tnx-editor-visual{background:#fff!important;color:#26354b!important;caret-color:#6347c5!important} html[data-theme="light"] .article-submit-card .tnx-editor-visual h2, html[data-theme="light"] .article-submit-card .tnx-editor-visual h3, html[data-theme="light"] .article-submit-card .tnx-editor-visual h4{color:#101828!important} html[data-theme="light"] .article-submit-card .tnx-editor-visual a{color:#5b42be!important} html[data-theme="light"] .article-submit-card .tnx-editor-visual blockquote{background:#f6f3ff!important;color:#45556c!important;border-color:#7256e8!important} html[data-theme="light"] .article-submit-card .tnx-editor-html{background:#f8fafc!important;color:#1e2c43!important} html[data-theme="light"] .article-submit-card .tnx-editor-footer{color:#66758b!important} html[data-theme="light"] .article-submit-card .tnx-editor-footer>div span:not(:last-child):after{color:#a7b1c0!important} html[data-theme="light"] .article-submit-card .article-side-card input, html[data-theme="light"] .article-submit-card .article-side-card textarea{background:#f8fafc!important;color:#1b2940!important;border-color:#dce3ec!important} html[data-theme="light"] .article-submit-card .article-side-card input:focus, html[data-theme="light"] .article-submit-card .article-side-card textarea:focus{background:#fff!important;border-color:#a996ef!important;box-shadow:0 0 0 4px rgba(104,78,207,.08)!important} html[data-theme="light"] .article-submit-card .article-cancel-link{color:#718096!important} /* Public light-mode systematic contrast QA. */ html[data-theme="light"] body{color:#172033!important} html[data-theme="light"] .section-title, html[data-theme="light"] .content-hero h1, html[data-theme="light"] .tool-page-heading h1, html[data-theme="light"] .single-blog-header h1, html[data-theme="light"] .empty-state h3, html[data-theme="light"] .testimonial-user strong, html[data-theme="light"] .premium-tool-card h3, html[data-theme="light"] .category-card h3{color:#101828!important} html[data-theme="light"] .section-sub, html[data-theme="light"] .content-hero p, html[data-theme="light"] .tool-page-heading p, html[data-theme="light"] .premium-tool-card p, html[data-theme="light"] .testimonial-card>p, html[data-theme="light"] .prose p{color:#58677d!important} html[data-theme="light"] .category-card, html[data-theme="light"] .premium-tool-card, html[data-theme="light"] .testimonial-card, html[data-theme="light"] .panel, html[data-theme="light"] .content-card, html[data-theme="light"] .content-form-card, html[data-theme="light"] .tool-after-grid article, html[data-theme="light"] .tool-after-grid aside{background:#fff!important;border-color:#dfe5ee!important;box-shadow:0 15px 44px rgba(31,46,75,.06)!important} html[data-theme="light"] .premium-tool-meta, html[data-theme="light"] .testimonial-user span, html[data-theme="light"] .tool-breadcrumb{color:#718096!important} html[data-theme="light"] .btn-ghost, html[data-theme="light"] .icon-btn{background:#fff!important;color:#485970!important;border-color:#dce3ec!important;box-shadow:0 2px 8px rgba(31,46,75,.04)} html[data-theme="light"] .btn-ghost:hover, html[data-theme="light"] .icon-btn:hover{background:#f4f1ff!important;color:#563bb6!important;border-color:#d5c9ff!important} html[data-theme="light"] .btn-primary{color:#fff!important} html[data-theme="light"] .field-light label{color:#65748a!important} html[data-theme="light"] .field-light input, html[data-theme="light"] .field-light textarea, html[data-theme="light"] .field-light select{background:#fff!important;color:#172033!important;border-color:#d9e1ec!important} html[data-theme="light"] .form-success{background:#eefbf4!important;color:#176c43!important;border-color:#bcebd2!important} html[data-theme="light"] .form-error{background:#fff2f4!important;color:#a52d45!important;border-color:#f4c4cd!important} /* Natural authored media everywhere: never crop editorial artwork by default. */ .single-blog-cover img, .pin-image img, .blog-cover img, .admin-cover-stage img, .article-cover-preview{width:100%;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important} /* Responsive writing controls. */ @media(max-width:760px){ .article-submit-card .article-title-input{font-size:30px!important;padding:22px 20px 8px!important} .article-submit-card .tnx-editor-top-actions button span{display:none} .article-submit-card .tnx-editor-top-actions button{width:38px!important;padding:0!important} .article-submit-card .tnx-editor-footer{align-items:flex-start!important} } /* Native file inputs: consistent with the product design system. */ html[data-theme="light"] input[type="file"]::file-selector-button, input[type="file"]::file-selector-button{ border:1px solid currentColor;border-radius:9px;padding:7px 10px;margin-right:9px;font:inherit;font-weight:750;cursor:pointer } input[type="file"]::file-selector-button{background:#171e2d;color:#dbe2ee;border-color:#303a50} html[data-theme="light"] input[type="file"]::file-selector-button{background:#fff;color:#485970;border-color:#d8e0ea} html[data-theme="light"] input[type="file"]::file-selector-button:hover{background:#f3efff;color:#563bb7;border-color:#d4c8ff}