:root{ --radius:22px; --radius-sm:15px; --shadow:0 20px 60px rgba(0,0,0,.08); --font:'Noto Sans Thai','Inter',system-ui,-apple-system,Segoe UI,sans-serif; } :root{ --content-btn-1: var(--accent2); --content-btn-2: var(--accent); --content-btn-text: #ffffff; --content-btn-shadow: color-mix(in srgb,var(--accent) 26%,transparent); --content-btn-outline-bg: color-mix(in srgb,var(--panel-solid) 58%, transparent); --content-btn-outline-border: color-mix(in srgb,var(--accent) 42%, var(--line)); --content-btn-outline-text: var(--heroText); } html[data-theme="caramel"], html[data-theme="mocha"], html[data-theme="classic"], html[data-theme="shadow-gold"], html[data-theme="volt-yellow"], html[data-theme="reactor-gold"]{ --content-btn-1: color-mix(in srgb,var(--accent2) 92%, white 8%); --content-btn-2: color-mix(in srgb,var(--accent) 88%, #7b3a16 12%); --content-btn-text: #1b120d; } html[data-theme="rose-blush"], html[data-theme="royal-violet"], html[data-theme="crimson-web"], html[data-theme="panther-violet"], html[data-theme="ocean"], html[data-theme="emerald"], html[data-theme="emerald-core"], html[data-theme="arctic-blue"], html[data-theme="csa"]{ --content-btn-1: color-mix(in srgb,var(--accent2) 88%, white 12%); --content-btn-2: color-mix(in srgb,var(--accent) 92%, #0c2342 8%); --content-btn-text: #ffffff; } html[data-theme="caramel"]{ --bg:#f7efe4; --bg2:#fff9f0; --panel:#fffaf3cc; --panel-solid:#fffaf4; --panel2:#f9ecd8; --text:#4b2f1b; --muted:#8a705a; --line:#e8d4b7; --accent:#c57a1f; --accent2:#f1bf73; --accent3:#fff0ce; --nav:#fff9ef; --hero1:#fff9f1; --hero2:#f9e5c2; --glow:rgba(214,152,60,.26); --heroText:#4b2f1b; } html[data-theme="mocha"]{ --bg:#19130d; --bg2:#241a10; --panel:#2b2117cc; --panel-solid:#2b2117; --panel2:#33271c; --text:#f7ead9; --muted:#bca68f; --line:#55422f; --accent:#d1a06b; --accent2:#f0c88c; --accent3:#4b3521; --nav:#1d160f; --hero1:#24180d; --hero2:#46301b; --glow:rgba(211,155,84,.22); --heroText:#fff5e8; } html[data-theme="ocean"]{ --bg:#031223; --bg2:#061a33; --panel:#08223dcc; --panel-solid:#08223d; --panel2:#0c2c4f; --text:#eff6ff; --muted:#9fb6cf; --line:#17466f; --accent:#3d7cff; --accent2:#7a5cff; --accent3:#0e2f57; --nav:#06172a; --hero1:#06213c; --hero2:#0d3c68; --glow:rgba(54,126,255,.25); --heroText:#f3f7ff; } html[data-theme="emerald"]{ --bg:#031c17; --bg2:#062821; --panel:#0a3028cc; --panel-solid:#0a3028; --panel2:#0d3b31; --text:#e9fff8; --muted:#93c0b3; --line:#1d5b4b; --accent:#19c99a; --accent2:#54e1bc; --accent3:#0f4639; --nav:#05251e; --hero1:#082e27; --hero2:#0c4f42; --glow:rgba(31,211,163,.22); --heroText:#f2fff9; } html[data-theme="classic"]{ --bg:#090909; --bg2:#12110f; --panel:#181715d8; --panel-solid:#191815; --panel2:#211f1a; --text:#f7f1e7; --muted:#b6aa97; --line:#4f4637; --accent:#d9b56f; --accent2:#f6d893; --accent3:#3a3020; --nav:#0d0d0c; --hero1:#f5ead7; --hero2:#dcc39c; --glow:rgba(231,192,112,.20); --heroText:#2b2014; } html[data-theme="csa"]{ --bg:#f3f9ff; --bg2:#e7f4ff; --panel:#ffffffdc; --panel-solid:#ffffff; --panel2:#e6f4ff; --text:#092748; --muted:#55738f; --line:#bcdcf2; --accent:#087cff; --accent2:#27c7ff; --accent3:#d8f2ff; --nav:#f9fcff; --hero1:#edf9ff; --hero2:#a9dcff; --glow:rgba(0,139,255,.24); --heroText:#082847; } html[data-theme="rose-blush"]{ --bg:#fff5f8; --bg2:#ffedf4; --panel:#fffdfedc; --panel-solid:#fffdfd; --panel2:#fff1f6; --text:#8b2f53; --muted:#b47893; --line:#f3c7d7; --accent:#f06aa7; --accent2:#ffb6d3; --accent3:#ffe3ee; --nav:#fff9fb; --hero1:#ffeaf2; --hero2:#ffd4e5; --glow:rgba(240,106,167,.24); --heroText:#872d50; } html[data-theme="volt-yellow"]{ --bg:#080a0e; --bg2:#10151e; --panel:#151a24dc; --panel-solid:#151a24; --panel2:#202837; --text:#f8fbff; --muted:#aab5c6; --line:#354257; --accent:#ffd400; --accent2:#4b8dff; --accent3:#253355; --nav:#0c1017; --hero1:#151b26; --hero2:#263d68; --glow:rgba(255,212,0,.22); --heroText:#ffffff; } html[data-theme="royal-violet"]{ --bg:#0b0713; --bg2:#160d25; --panel:#1b112bdc; --panel-solid:#1b112b; --panel2:#291842; --text:#fbf7ff; --muted:#bba9cf; --line:#493166; --accent:#965cff; --accent2:#d4afff; --accent3:#382054; --nav:#10091b; --hero1:#1b102b; --hero2:#4b2672; --glow:rgba(155,92,255,.26); --heroText:#ffffff; } html[data-theme="arctic-blue"]{ --bg:#04111c; --bg2:#082238; --panel:#0c2940dc; --panel-solid:#0c2940; --panel2:#123952; --text:#f4fbff; --muted:#a6c7d9; --line:#28617e; --accent:#4bc5ff; --accent2:#e0f7ff; --accent3:#154863; --nav:#061926; --hero1:#0a2d44; --hero2:#237ba3; --glow:rgba(75,197,255,.25); --heroText:#f8fdff; } html[data-theme="shadow-gold"]{ --bg:#07090c; --bg2:#11151a; --panel:#171b20dc; --panel-solid:#171b20; --panel2:#23282f; --text:#f6f7f9; --muted:#a8adb5; --line:#444b54; --accent:#f1c232; --accent2:#ffe58a; --accent3:#3d3518; --nav:#0c0f13; --hero1:#171b20; --hero2:#3a3f46; --glow:rgba(241,194,50,.22); --heroText:#ffffff; } html[data-theme="crimson-web"]{ --bg:#07111f; --bg2:#0a1930; --panel:#0d203adc; --panel-solid:#0d203a; --panel2:#122d50; --text:#f7fbff; --muted:#a9bed6; --line:#274b73; --accent:#e32636; --accent2:#3485ff; --accent3:#351627; --nav:#081728; --hero1:#b51226; --hero2:#1769d2; --glow:rgba(227,38,54,.30); --heroText:#ffffff; } html[data-theme="reactor-gold"]{ --bg:#100607; --bg2:#210b0d; --panel:#291012dc; --panel-solid:#291012; --panel2:#3b1718; --text:#fff8ef; --muted:#d0aaa0; --line:#653332; --accent:#e83d2f; --accent2:#ffd05a; --accent3:#512119; --nav:#18090a; --hero1:#301011; --hero2:#7b2b20; --glow:rgba(255,191,49,.24); --heroText:#fffaf1; } html[data-theme="panther-violet"]{ --bg:#08070d; --bg2:#12101c; --panel:#191623dc; --panel-solid:#191623; --panel2:#252131; --text:#f8f7fb; --muted:#b2afbd; --line:#454052; --accent:#7952e8; --accent2:#cdd1dd; --accent3:#302843; --nav:#0d0b13; --hero1:#181520; --hero2:#41365c; --glow:rgba(121,82,232,.24); --heroText:#ffffff; } html[data-theme="emerald-core"]{ --bg:#030e09; --bg2:#061c12; --panel:#0a281bdc; --panel-solid:#0a281b; --panel2:#103b28; --text:#effff6; --muted:#9bc7ad; --line:#246344; --accent:#10cc69; --accent2:#e8fff2; --accent3:#145333; --nav:#05160e; --hero1:#092719; --hero2:#14643c; --glow:rgba(16,204,105,.24); --heroText:#f4fff8; } /* Loader N follows the active website theme */ html{ --loader-n-highlight:color-mix(in srgb,var(--accent2) 55%,white); --loader-n-mid:color-mix(in srgb,var(--accent) 72%,var(--text)); --loader-n-deep:color-mix(in srgb,var(--accent) 66%,#07101c); --loader-n-shadow:color-mix(in srgb,var(--accent) 25%,#03060a); } .loader-brand-svg{transition:filter .35s ease} /* ===== NEXTONTECH compact logo + theme symbol upgrade ===== */ .brand-logo{width:46px;height:46px;display:grid;place-items:center;border-radius:15px;overflow:hidden; border:1px solid color-mix(in srgb,var(--accent) 65%,var(--line)); background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--accent2) 28%,transparent),transparent 48%),var(--panel-solid); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent),0 12px 30px var(--glow)} .brand-logo img{width:122%;height:122%;object-fit:cover;display:block;border-radius:12px} .brand-logo.brand-logo-n{padding:2px;background:radial-gradient(circle at 36% 28%,color-mix(in srgb,var(--accent2) 22%,transparent),transparent 48%),var(--panel-solid);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),0 12px 28px color-mix(in srgb,var(--accent) 16%,transparent)} .brand-n-svg{width:116%;height:116%;display:block;transform:translate(-6.5%,-4%);transform-origin:center;filter:drop-shadow(0 1px 5px color-mix(in srgb,var(--accent) 18%,transparent))} .brand .mark{display:none} .theme-button{min-width:230px;justify-content:flex-start;padding:7px 10px 7px 8px;min-height:48px} .theme-button .chev{margin-left:auto;color:var(--muted);font-size:13px} .theme-button #themeLabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .theme-emblem{--badge:#d9b56f;--badge2:#f6d893;--badgeLight:color-mix(in srgb,var(--badge2) 58%,white);--badgeMid:color-mix(in srgb,var(--badge) 74%,var(--badge2));--badgeDeep:color-mix(in srgb,var(--badge) 68%,#06101d);--badgeShadow:color-mix(in srgb,var(--badge) 22%,#03060a);width:34px;height:34px;flex:0 0 34px;border-radius:999px;position:relative;display:grid;place-items:center; border:1px solid color-mix(in srgb,var(--badge) 85%,#fff 10%);overflow:hidden; background:radial-gradient(circle at 30% 26%,color-mix(in srgb,var(--badge2) 45%,rgba(255,255,255,.28)),transparent 42%),linear-gradient(180deg,color-mix(in srgb,var(--badge) 12%,#20160f),#0b0d12 72%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 8px 18px color-mix(in srgb,var(--badge) 11%,transparent),0 0 0 2px color-mix(in srgb,var(--badge) 12%,transparent),0 10px 18px rgba(0,0,0,.22),0 0 18px color-mix(in srgb,var(--badge) 22%,transparent)} .theme-emblem::before{content:"";position:absolute;inset:2px;border-radius:inherit;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.18),transparent 34%);pointer-events:none} .theme-n-logo{width:80%;height:80%;display:block;transform:translate(-1.5%,.5%);transform-origin:center;filter:drop-shadow(0 1px 4px color-mix(in srgb,var(--badge) 34%,transparent))} .theme-menu{width:264px;padding:8px;max-height:min(72vh,680px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--accent) transparent} .theme-option{gap:10px;padding:8px 10px;min-height:50px;justify-content:flex-start} .theme-copy{display:flex;flex-direction:column;min-width:0;flex:1} .theme-option .theme-name{font-weight:700;font-size:13px;line-height:1.2} .theme-option .theme-sub{display:none;font-size:10px;color:var(--muted);font-weight:500;margin-top:2px} .theme-option.active{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,var(--line))} .theme-option .theme-emblem{margin-left:0} .theme-option .check{margin-left:auto;color:var(--accent2);font-weight:900;font-size:18px;line-height:1} .theme-option .menu-n{width:32px;height:32px;flex:0 0 32px} .current-theme-n{width:34px;height:34px;flex:0 0 34px} @media(max-width:900px){.theme-button{min-width:0}.theme-button #themeLabel{display:none}.theme-button{width:52px}.theme-menu{right:0;width:252px;max-height:68vh}} *{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:var(--font);background:radial-gradient(circle at 15% 0%,var(--glow),transparent 28%),linear-gradient(135deg,var(--bg),var(--bg2));color:var(--text)} body{transition:background .35s ease,color .25s ease} html[data-theme="crimson-web"] body{ background: radial-gradient(circle at 7% 4%,rgba(227,38,54,.30),transparent 24%), radial-gradient(circle at 93% 2%,rgba(52,133,255,.26),transparent 29%), linear-gradient(135deg,var(--bg),var(--bg2)); } html[data-theme="crimson-web"] .hero{ background:linear-gradient(122deg,#9e1221 0%,#d72435 38%,#153f91 70%,#1769d2 100%); } html[data-theme="crimson-web"] .hero::after{ background-image: linear-gradient(rgba(247,251,255,.12) 1px,transparent 1px), linear-gradient(90deg,rgba(16,24,32,.22) 1px,transparent 1px); background-size:32px 32px; opacity:.48; } html[data-theme="crimson-web"] .card, html[data-theme="crimson-web"] .search, html[data-theme="crimson-web"] .theme-button{ box-shadow:inset 0 1px 0 rgba(52,133,255,.12),0 18px 48px rgba(0,0,0,.18); } button,input{font:inherit} button{cursor:pointer} .app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh} .sidebar{position:sticky;top:0;height:100vh;padding:18px 16px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--nav) 93%,transparent);backdrop-filter:blur(18px);z-index:8;display:flex;flex-direction:column;gap:18px} .brand{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;padding:10px 8px}.mark{width:38px;height:38px;border:2px solid var(--accent);border-radius:11px;display:grid;place-items:center;font-weight:800;color:var(--accent);box-shadow:0 0 25px var(--glow);transform:rotate(45deg)}.mark span{transform:rotate(-45deg)} .brand-title{font-weight:800;letter-spacing:.015em;font-size:12px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-sub{font-size:10px;line-height:1.18;color:var(--muted);margin-top:2px;white-space:normal;word-break:break-word} .nav{display:flex;flex-direction:column;gap:5px}.nav a{color:var(--text);text-decoration:none;padding:10px 12px;border-radius:12px;display:flex;align-items:center;gap:11px;font-size:14px}.nav a.active{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--accent2) 10%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,var(--line));font-weight:700}.nav a:hover{background:color-mix(in srgb,var(--panel2) 80%,transparent)} .nav .ico{width:18px;text-align:center;color:var(--accent)}.sidebar-bottom{margin-top:auto}.upgrade{padding:14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--accent3) 60%,transparent));box-shadow:var(--shadow)}.upgrade b{display:block;margin-bottom:4px}.upgrade p{font-size:12px;line-height:1.5;color:var(--muted);margin:0 0 10px}.upgrade button{border:0;color:#1c160f;background:linear-gradient(135deg,var(--accent2),var(--accent));padding:9px 12px;border-radius:11px;font-weight:800;width:100%} .sidebar{transition:width .28s ease,padding .28s ease,transform .3s ease} .brand{justify-content:initial}.brand-copy{min-width:0;overflow:hidden}.brand-left{display:flex;align-items:center;gap:10px;min-width:0;flex:1} .sidebar-toggle,.mobile-sidebar-toggle{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--text);display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.06);flex:0 0 auto} .sidebar-toggle:hover,.mobile-sidebar-toggle:hover{background:var(--panel2)} .sidebar-toggle .toggle-bars,.mobile-sidebar-toggle .toggle-bars{display:flex;flex-direction:column;gap:4px} .sidebar-toggle .toggle-bars i,.mobile-sidebar-toggle .toggle-bars i{display:block;width:14px;height:2px;border-radius:99px;background:var(--accent)} .nav-label{white-space:nowrap} .app.sidebar-collapsed{grid-template-columns:72px minmax(0,1fr)} .app.sidebar-collapsed .sidebar{padding-left:10px;padding-right:10px} .app.sidebar-collapsed .brand{grid-template-columns:1fr;justify-content:center;position:relative;padding-inline:0;padding-top:4px;padding-bottom:4px} .app.sidebar-collapsed .brand-left{justify-content:center} .app.sidebar-collapsed .brand-left{display:none} .app.sidebar-collapsed .brand-copy,.app.sidebar-collapsed .nav-label,.app.sidebar-collapsed .upgrade b,.app.sidebar-collapsed .upgrade p,.app.sidebar-collapsed .upgrade button{display:none} .app.sidebar-collapsed .brand-logo{display:none} .app.sidebar-collapsed .sidebar-toggle{position:static;transform:none;width:40px;height:40px;border-radius:12px;margin:0 auto} .app.sidebar-collapsed .nav a{justify-content:center;padding:12px 10px} .app.sidebar-collapsed .nav .ico{width:auto;font-size:17px} .app.sidebar-collapsed .sidebar-bottom .upgrade{padding:10px;display:grid;place-items:center;min-height:64px} .app.sidebar-collapsed .sidebar-bottom .upgrade::before{content:"👑";font-size:22px;filter:drop-shadow(0 0 10px var(--glow))} .mobile-sidebar-toggle{display:none} .sidebar-overlay{display:none} .main{padding:18px 20px 28px;min-width:0}.topbar{display:flex;gap:12px;align-items:center;position:sticky;top:0;z-index:7;padding-bottom:14px;background:linear-gradient(to bottom,var(--bg) 62%,transparent)} .search{flex:1;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:11px 14px;backdrop-filter:blur(18px);box-shadow:0 12px 28px rgba(0,0,0,.05)}.search input{flex:1;background:transparent;border:0;outline:none;color:var(--text)}.search input::placeholder{color:var(--muted)} .theme-switcher{position:relative}.theme-button{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px 12px;border-radius:14px;display:flex;align-items:center;gap:9px;backdrop-filter:blur(18px)}.theme-dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--glow)} .theme-menu{position:absolute;right:0;top:48px;width:230px;padding:9px;background:var(--panel-solid);border:1px solid var(--line);border-radius:16px;box-shadow:0 25px 70px rgba(0,0,0,.22);display:none}.theme-menu.open{display:block}.theme-option{display:flex;align-items:center;gap:10px;padding:10px;border-radius:11px;border:0;background:transparent;color:var(--text);width:100%;text-align:left}.theme-option:hover{background:var(--panel2)}.swatches{margin-left:auto;display:flex;gap:3px}.swatches i{width:11px;height:11px;border-radius:50%;display:block} .profile{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:14px;border:1px solid var(--line);background:var(--panel)}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent2),var(--accent3));color:#24180d;font-weight:800}.profile small{display:block;color:var(--accent);font-size:10px} .dashboard{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.65fr);gap:14px}.leftcol,.rightcol{display:flex;flex-direction:column;gap:14px}.card{border:1px solid var(--line);background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel2) 28%,transparent));border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(18px);overflow:hidden}.card-pad{padding:16px} .hero{min-height:255px;position:relative;padding:28px 28px;background:linear-gradient(120deg,var(--hero1),var(--hero2));color:var(--heroText);overflow:hidden}.hero::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-90px;top:-160px;background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 32%,transparent),transparent 62%);filter:blur(10px)}.hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb,var(--accent) 10%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to left,#000,transparent 60%);opacity:.35} .hero-copy{max-width:62%;position:relative;z-index:2}.hello{font-weight:700;font-size:14px;margin-bottom:8px}.hero h1{font-size:34px;line-height:1.15;margin:0 0 12px;letter-spacing:-.02em}.hero p{color:color-mix(in srgb,var(--heroText) 72%,transparent);line-height:1.7;font-size:14px;margin:0 0 17px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.primary{border:0;padding:11px 16px;border-radius:12px;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#16120d;font-weight:800;box-shadow:0 8px 24px var(--glow)}.secondary{border:1px solid color-mix(in srgb,var(--heroText) 30%,transparent);padding:10px 15px;border-radius:12px;background:color-mix(in srgb,var(--hero1) 30%,transparent);color:var(--heroText);font-weight:700} .robot{position:absolute;right:4.5%;bottom:-18px;width:235px;height:235px;z-index:3;filter:drop-shadow(0 24px 25px rgba(0,0,0,.18))}.robot .head{position:absolute;left:63px;top:18px;width:112px;height:87px;border-radius:40px;background:linear-gradient(145deg,#fbfbfb,#cfcfcf 70%);border:4px solid color-mix(in srgb,var(--accent) 58%,#fff);box-shadow:inset -8px -8px 18px rgba(0,0,0,.12)}.robot .face{position:absolute;left:78px;top:35px;width:82px;height:53px;border-radius:24px;background:#111820;box-shadow:inset 0 0 20px color-mix(in srgb,var(--accent) 55%,transparent)}.eye{position:absolute;top:17px;width:12px;height:17px;border-radius:50%;background:#bfeaff;box-shadow:0 0 15px #66d9ff}.eye.e1{left:20px}.eye.e2{right:20px}.smile{position:absolute;left:31px;bottom:9px;width:22px;height:10px;border-bottom:3px solid #d9f5ff;border-radius:0 0 20px 20px}.robot .body{position:absolute;left:76px;top:96px;width:92px;height:102px;border-radius:36px 36px 28px 28px;background:linear-gradient(145deg,#f7f7f7,#c9c9c9);border:3px solid color-mix(in srgb,var(--accent) 45%,#fff)}.robot .core{position:absolute;left:108px;top:128px;width:28px;height:28px;border-radius:50%;background:radial-gradient(circle,#fff 10%,var(--accent2) 38%,var(--accent) 72%);box-shadow:0 0 20px var(--accent)}.arm{position:absolute;width:25px;height:83px;border-radius:18px;background:linear-gradient(#efefef,#c8c8c8);border:2px solid color-mix(in srgb,var(--accent) 35%,#fff)}.arm.a1{left:54px;top:100px;transform:rotate(40deg);transform-origin:top}.arm.a2{right:49px;top:104px;transform:rotate(-20deg)}.hand{position:absolute;width:34px;height:34px;border-radius:50%;background:#ededed;border:2px solid color-mix(in srgb,var(--accent) 35%,#fff)}.hand.h1{left:28px;top:66px}.hand.h2{right:34px;top:174px}.halo{position:absolute;border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:50%;right:15px;bottom:45px;width:235px;height:90px;transform:rotate(-12deg);box-shadow:0 0 20px var(--glow)} .section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.section-title h3{font-size:16px;margin:0}.section-title a{font-size:12px;color:var(--accent);text-decoration:none;font-weight:700}.tool-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.tool{padding:12px 8px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel-solid) 78%,transparent);text-align:center;min-width:0}.tool-icon{width:38px;height:38px;margin:0 auto 7px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--accent2) 28%,transparent),color-mix(in srgb,var(--accent) 22%,transparent));color:var(--accent2);font-size:18px;font-weight:800;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}.tool b{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tool small{color:var(--muted);font-size:9px} .split{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.feed-item{padding:11px 0;border-bottom:1px solid var(--line)}.feed-item:last-child{border-bottom:0}.feed-head{display:flex;gap:9px;align-items:center}.feed-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(145deg,var(--accent2),var(--accent));display:grid;place-items:center;color:#20170e;font-weight:800}.feed-item p{margin:8px 0 4px;font-size:12px;line-height:1.6}.meta{font-size:10px;color:var(--muted)}.quick{display:flex;flex-direction:column;gap:8px}.quick button{border:1px solid var(--line);background:color-mix(in srgb,var(--panel-solid) 75%,transparent);color:var(--text);padding:10px 11px;border-radius:11px;text-align:left;display:flex;justify-content:space-between;align-items:center}.quick button span{color:var(--accent)} .solutions{display:grid;grid-template-columns:repeat(6,1fr);gap:9px}.solution{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--panel-solid) 76%,transparent)}.solution-photo{height:116px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 55%,#111),color-mix(in srgb,var(--accent2) 20%,#0d1520));position:relative;overflow:hidden}.solution-photo img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 38%;transform:scale(1.01);transition:transform .32s cubic-bezier(.2,.8,.2,1),filter .32s ease;filter:saturate(.98) contrast(1.035)}.solution:hover .solution-photo img{transform:scale(1.045);filter:saturate(1.05) contrast(1.05)}.solution-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 42%,rgba(10,6,8,.16));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}.solution-copy{padding:10px 9px 11px}.solution-copy b{font-size:11px}.solution-copy p{font-size:9px;color:var(--muted);line-height:1.55;margin:4px 0 0} .news-item{display:grid;grid-template-columns:68px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);align-items:center}.news-item:last-child{border-bottom:0}.thumb{height:55px;border-radius:12px;background:radial-gradient(circle at 30% 25%,var(--accent2),transparent 24%),linear-gradient(135deg,#0b1220,color-mix(in srgb,var(--accent) 52%,#112));box-shadow:inset 0 0 20px rgba(255,255,255,.08),0 8px 18px color-mix(in srgb,var(--accent) 14%,transparent);overflow:hidden;position:relative;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line))}.thumb img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;transform:scale(1.02);transition:transform .32s ease,filter .32s ease;filter:saturate(1.02) contrast(1.02)}.news-item:hover .thumb img{transform:scale(1.06);filter:saturate(1.08) contrast(1.04)}.thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 38%,rgba(6,10,20,.10));pointer-events:none}.news-item b{font-size:12px}.news-item p{font-size:10px;color:var(--muted);margin:4px 0 0;line-height:1.45}.premium{background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,transparent),color-mix(in srgb,var(--accent3) 74%,transparent));position:relative}.premium::after{content:"✦";position:absolute;right:18px;top:15px;font-size:55px;color:var(--accent);opacity:.35;filter:drop-shadow(0 0 10px var(--glow))}.premium ul{padding-left:18px;margin:10px 0;color:var(--muted);font-size:11px;line-height:1.8}.premium button{border:0;border-radius:10px;background:linear-gradient(135deg,var(--accent2),var(--accent));padding:9px 13px;font-weight:800;color:#17120d} .activity{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.mini{border:1px solid var(--line);border-radius:12px;padding:12px;background:color-mix(in srgb,var(--panel-solid) 70%,transparent)}.mini b{font-size:12px}.mini p{font-size:10px;color:var(--muted);margin:3px 0 0} .footer-banner{margin-top:14px;padding:18px 22px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(100deg,color-mix(in srgb,var(--accent3) 60%,var(--panel)),var(--panel));display:flex;justify-content:space-between;align-items:center;gap:16px}.footer-banner h3{margin:0 0 4px}.footer-banner p{margin:0;color:var(--muted);font-size:12px} .theme-strip{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.chip{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:999px;padding:7px 10px;font-size:11px}.chip strong{color:var(--accent)} @media(max-width:1180px){.dashboard{grid-template-columns:1fr}.rightcol{display:grid;grid-template-columns:repeat(2,1fr)}.solutions{grid-template-columns:repeat(3,1fr)}.tool-grid{grid-template-columns:repeat(5,1fr)}} /* AI core theme tuning: follows the active website theme automatically */ html{--ai-core-white:rgba(255,255,255,.92);--ai-core-glass:rgba(255,255,255,.34);--ai-core-depth:#1a1733} html[data-theme="mocha"],html[data-theme="classic"],html[data-theme="shadow-gold"],html[data-theme="reactor-gold"],html[data-theme="caramel"]{--ai-core-depth:#3a2413} html[data-theme="emerald"],html[data-theme="emerald-core"]{--ai-core-depth:#08392c} html[data-theme="crimson-web"]{--ai-core-depth:#381526} html[data-theme="volt-yellow"]{--ai-core-depth:#29324b} /* ========================================================= Hero AI Core Visual Override ========================================================= */ .hero{isolation:isolate} .hero-copy{max-width:58%} .halo{ position:absolute;right:58px;top:26px;width:330px;height:230px;border-radius:50%; background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent2) 18%,transparent),transparent 62%); filter:blur(10px);opacity:.9;box-shadow:none;border:0;transform:none;z-index:1; } .robot.ai-core-visual{ position:absolute;right:26px;top:8px;width:390px;height:255px;z-index:3; filter:drop-shadow(0 26px 42px rgba(42,102,176,.18)); animation:robotFloat calc(5.2s / var(--motion-speed)) ease-in-out infinite; transform-origin:54% 55%; } .robot.ai-core-visual *{box-sizing:border-box} .robot.ai-core-visual .ambient{ position:absolute;border-radius:50%;filter:blur(18px);opacity:.92;mix-blend-mode:screen; } .robot.ai-core-visual .ambient-a{width:220px;height:220px;right:82px;top:20px;background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 42%,transparent),transparent 67%);animation:breatheGlow calc(6.2s / var(--motion-speed)) ease-in-out infinite} .robot.ai-core-visual .ambient-b{width:155px;height:155px;right:130px;top:58px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 34%,transparent),transparent 69%);animation:breatheGlow calc(7.6s / var(--motion-speed)) ease-in-out infinite reverse} .robot.ai-core-visual .ambient-c{width:120px;height:120px;right:34px;bottom:22px;background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 24%,transparent),transparent 74%);animation:breatheGlow calc(8.5s / var(--motion-speed)) ease-in-out infinite} .robot.ai-core-visual .core-shadow{ position:absolute;left:218px;top:182px;width:162px;height:32px;transform:translateX(-50%); background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 24%,rgba(0,0,0,.12)),transparent 68%);filter:blur(7px); } .robot.ai-core-visual .core-wrap{ position:absolute;left:220px;top:122px;width:180px;height:180px;transform:translate(-50%,-50%); } .robot.ai-core-visual .glass-shell{ position:absolute;border-radius:50%;inset:0; } .robot.ai-core-visual .glass-shell-outer{ inset:-17px; background:linear-gradient(145deg,rgba(255,255,255,.64),rgba(255,255,255,.08) 32%,color-mix(in srgb,var(--accent2) 22%,transparent) 68%,rgba(255,255,255,.42)); box-shadow:inset 0 3px 10px rgba(255,255,255,.66), inset 0 -18px 26px color-mix(in srgb,var(--accent) 12%,transparent), 0 18px 34px color-mix(in srgb,var(--accent) 13%,transparent); backdrop-filter:blur(9px); } .robot.ai-core-visual .glass-shell-mid{ inset:-6px;border:1px solid rgba(255,255,255,.42); background:conic-gradient(from 220deg,rgba(255,255,255,.15),color-mix(in srgb,var(--accent2) 28%,transparent),color-mix(in srgb,var(--accent) 28%,transparent),rgba(255,255,255,.10),rgba(255,255,255,.15)); filter:blur(.4px);opacity:.95;animation:spinCore calc(18s / var(--motion-speed)) linear infinite; } .robot.ai-core-visual .glass-shell-inner{ inset:0;border:1px solid rgba(255,255,255,.28); background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.14),rgba(255,255,255,.02) 58%,color-mix(in srgb,var(--accent) 14%,transparent) 100%); backdrop-filter:blur(11px); } .robot.ai-core-visual .inner-core{ position:absolute;inset:14px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column; background: radial-gradient(circle at 36% 24%,rgba(255,255,255,.86),rgba(255,255,255,.20) 14%,transparent 32%), radial-gradient(circle at 50% 38%, color-mix(in srgb,var(--accent2) 58%,#fff) 0%, var(--accent2) 30%, color-mix(in srgb,var(--accent) 72%,var(--accent2)) 62%, color-mix(in srgb,var(--accent) 82%,#39246f) 82%, color-mix(in srgb,var(--accent) 72%,var(--ai-core-depth)) 100%); box-shadow:inset 0 0 26px rgba(255,255,255,.32), inset 0 -24px 44px color-mix(in srgb,var(--accent) 32%,rgba(20,20,40,.25)), 0 0 34px color-mix(in srgb,var(--accent2) 38%,transparent); } .robot.ai-core-visual .inner-core::before{ content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid rgba(255,255,255,.24); } .robot.ai-core-visual .shine{ position:absolute;left:24px;top:18px;width:102px;height:44px;border-radius:50%;transform:rotate(-17deg); background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,0));filter:blur(2px); } .robot.ai-core-visual .core-text{ font-size:54px;font-weight:900;line-height:1;color:#fff;letter-spacing:-.04em;text-shadow:0 10px 28px rgba(54,53,166,.28); } .robot.ai-core-visual .core-sub{ margin-top:6px;font-size:10px;font-weight:800;letter-spacing:.22em;color:rgba(255,255,255,.86); } .robot.ai-core-visual .energy-ring{ position:absolute;left:220px;top:122px;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; } .robot.ai-core-visual .energy-ring::before{ content:"";position:absolute;inset:0;border-radius:50%; background:conic-gradient(from var(--ringStart,210deg), color-mix(in srgb,var(--accent2) 0%,transparent) 0deg, color-mix(in srgb,var(--accent2) 14%,transparent) 24deg, color-mix(in srgb,var(--accent2) 72%,#fff) 54deg, color-mix(in srgb,var(--accent2) 60%,var(--accent)) 112deg, color-mix(in srgb,var(--accent) 74%,var(--accent2)) 168deg, color-mix(in srgb,var(--accent2) 22%,transparent) 215deg, color-mix(in srgb,var(--accent2) 0%,transparent) 300deg, color-mix(in srgb,var(--accent2) 0%,transparent) 360deg); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--thick,2px) - 1px),#000 calc(100% - var(--thick,2px)) calc(100% - 1px),transparent 100%); mask:radial-gradient(farthest-side,transparent calc(100% - var(--thick,2px) - 1px),#000 calc(100% - var(--thick,2px)) calc(100% - 1px),transparent 100%); filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent2) 38%,transparent)); } .robot.ai-core-visual .energy-ring::after{ content:"";position:absolute;inset:0;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent2) 22%,transparent);opacity:.75; } .robot.ai-core-visual .energy-ring-back{opacity:.64;filter:blur(.1px)} .robot.ai-core-visual .energy-ring-front{opacity:.95} .robot.ai-core-visual .ring-a{width:286px;height:122px;--thick:2.6px;--ringStart:185deg;transform:translate(-50%,-50%) rotate(-12deg);animation:orbitTiltA calc(16s / var(--motion-speed)) linear infinite} .robot.ai-core-visual .ring-b{width:210px;height:250px;--thick:2.2px;--ringStart:244deg;transform:translate(-50%,-50%) rotate(32deg);animation:orbitTiltB calc(19s / var(--motion-speed)) linear infinite reverse} .robot.ai-core-visual .ring-c{width:298px;height:134px;--thick:2.7px;--ringStart:194deg;transform:translate(-50%,-50%) rotate(14deg);animation:orbitTiltC calc(17s / var(--motion-speed)) linear infinite} .robot.ai-core-visual .ring-d{width:184px;height:272px;--thick:2px;--ringStart:284deg;transform:translate(-50%,-50%) rotate(-28deg);opacity:.7;animation:orbitTiltD calc(21s / var(--motion-speed)) linear infinite reverse} .robot.ai-core-visual .float-chip{ position:absolute;display:flex;align-items:center;justify-content:center; min-width:36px;height:28px;padding:0 10px;border-radius:12px; background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(255,255,255,.28)); border:1px solid rgba(255,255,255,.78); box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 10px 22px color-mix(in srgb,var(--accent) 16%,transparent); backdrop-filter:blur(10px);color:color-mix(in srgb,var(--accent2) 78%,#fff);font-size:12px;font-weight:800;letter-spacing:.1em; } .robot.ai-core-visual .chip-chat{left:122px;top:88px;animation:floatChipA calc(5.8s / var(--motion-speed)) ease-in-out infinite} .robot.ai-core-visual .chip-play{right:42px;top:118px;animation:floatChipB calc(6.5s / var(--motion-speed)) ease-in-out infinite} .robot.ai-core-visual .chip-image{right:72px;bottom:78px;animation:floatChipC calc(5.3s / var(--motion-speed)) ease-in-out infinite} .robot.ai-core-visual .node{ position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.98); box-shadow:0 0 10px color-mix(in srgb,var(--accent2) 82%,#fff),0 0 18px color-mix(in srgb,var(--accent) 48%,transparent); } .robot.ai-core-visual .n1{left:36px;top:26px}.robot.ai-core-visual .n2{right:36px;bottom:16px}.robot.ai-core-visual .n3{left:18px;bottom:84px}.robot.ai-core-visual .n4{right:38px;top:18px}.robot.ai-core-visual .n5{left:74px;bottom:12px} .robot.ai-core-visual .spark{ position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.98);box-shadow:0 0 12px color-mix(in srgb,var(--accent2) 86%,#fff); animation:sparkleUp calc(5.8s / var(--motion-speed)) ease-in-out infinite; } .robot.ai-core-visual .s1{left:140px;top:40px;animation-delay:-1.2s}.robot.ai-core-visual .s2{right:52px;top:48px;animation-delay:-2.8s}.robot.ai-core-visual .s3{left:98px;bottom:32px;animation-delay:-3.4s}.robot.ai-core-visual .s4{right:102px;bottom:24px;animation-delay:-.6s} @keyframes breatheGlow{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.08);opacity:1}} @keyframes spinCore{to{transform:rotate(360deg)}} @keyframes orbitTiltA{to{transform:translate(-50%,-50%) rotate(348deg)}} @keyframes orbitTiltB{to{transform:translate(-50%,-50%) rotate(-328deg)}} @keyframes orbitTiltC{to{transform:translate(-50%,-50%) rotate(374deg)}} @keyframes orbitTiltD{to{transform:translate(-50%,-50%) rotate(-388deg)}} @keyframes floatChipA{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes floatChipB{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-6px) translateX(2px)}} @keyframes floatChipC{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-7px) translateX(-2px)}} @keyframes sparkleUp{0%,100%{transform:translateY(0) scale(.8);opacity:.2}50%{transform:translateY(-8px) scale(1.2);opacity:1}} @media(max-width:820px){.app{grid-template-columns:1fr}.sidebar{position:fixed;left:0;top:0;bottom:0;width:270px;height:100vh;border-right:1px solid var(--line);border-bottom:0;transform:translateX(-105%);z-index:40}.app.sidebar-open .sidebar{transform:translateX(0)}.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);z-index:35;display:none}.app.sidebar-open .sidebar-overlay{display:block}.nav{display:flex;grid-template-columns:none}.sidebar-bottom{display:none}.main{padding:12px}.topbar{position:static;flex-wrap:wrap}.mobile-sidebar-toggle{display:grid}.profile{display:none}.hero-copy{max-width:100%}.robot.ai-core-visual{opacity:.42;right:-62px;top:18px;transform:scale(.94)}.tool-grid{grid-template-columns:repeat(2,1fr)}.split{grid-template-columns:1fr}.solutions{grid-template-columns:repeat(2,1fr)}.rightcol{display:flex}.footer-banner{align-items:flex-start;flex-direction:column}} /* Show the intro only once per browser tab/session. Internal page changes skip it. */ html.skip-preloader html.skip-preloader body.loading{overflow:auto!important} /* ===== Preloader / Intro Splash — Theme Adaptive ===== */ body.loading{overflow:hidden} .preloader{ position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden; background: radial-gradient(circle at 18% 88%,color-mix(in srgb,var(--accent) 17%,transparent),transparent 25%), radial-gradient(circle at 88% 12%,color-mix(in srgb,var(--accent2) 15%,transparent),transparent 20%), linear-gradient(180deg,color-mix(in srgb,var(--bg2) 96%,var(--panel-solid) 4%),var(--bg)); transition:opacity .8s ease,visibility .8s ease; } .preloader::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,transparent) 1.1px,transparent 1.6px) 0 0/11px 11px;mask-image:linear-gradient(90deg,#000 0 11%,transparent 19% 81%,#000 89% 100%)} .preloader::after{content:"";position:absolute;width:130vw;height:58vh;left:-15vw;bottom:-19vh;border-radius:50%;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--panel-solid) 88%,transparent) 0 47%,color-mix(in srgb,var(--accent) 12%,transparent) 77%,transparent 100%);filter:blur(6px)} .preloader.hide{opacity:0;visibility:hidden;pointer-events:none} .loader-center{position:relative;z-index:4;width:min(980px,82vw);text-align:center;display:flex;flex-direction:column;align-items:center} .loader-glow{position:absolute;z-index:1;left:50%;top:50%;width:min(430px,36vw);height:min(430px,36vw);transform:translate(-50%,-58%);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--panel-solid) 92%,transparent) 0 34%,color-mix(in srgb,var(--accent2) 14%,transparent) 64%,transparent 100%)} .loader-ring,.loader-orbit{position:absolute;z-index:2;left:50%;top:50%;pointer-events:none;border-radius:50%} .lr1{width:min(520px,46vw);height:min(520px,46vw);border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);transform:translate(-50%,-58%);animation:loaderRingPulse 5.4s ease-in-out infinite} .lr2{width:min(470px,42vw);height:min(470px,42vw);border:1px dashed color-mix(in srgb,var(--accent2) 25%,transparent);transform:translate(-50%,-59%);animation:loaderRingSpin 20s linear infinite} .lo1{width:min(830px,66vw);height:min(300px,23vw);border:1.4px solid color-mix(in srgb,var(--accent) 28%,transparent);transform:translate(-50%,-61%) rotate(-3deg);animation:loaderOrbitA 10s ease-in-out infinite} .lo2{width:min(770px,61vw);height:min(250px,20vw);border:1px dashed color-mix(in srgb,var(--accent2) 26%,transparent);transform:translate(-50%,-62%) rotate(8deg);animation:loaderOrbitB 12s ease-in-out infinite} .loader-logo{position:relative;z-index:5;width:min(300px,27vw);margin:0 auto 8px;animation:loaderFloat 5.2s ease-in-out infinite} .loader-logo svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 28px color-mix(in srgb,var(--accent) 26%,transparent));animation:loaderLogoGlow 4s ease-in-out infinite} .loader-kicker{font-size:13px;font-weight:800;letter-spacing:.24em;color:var(--accent);margin-top:4px} .loader-word{margin:10px 0 8px;font-size:clamp(48px,5.8vw,76px);line-height:1;font-weight:950;letter-spacing:-.05em;color:var(--text)} .loader-word b{font-weight:950;background:linear-gradient(180deg,var(--accent2),var(--accent) 62%,color-mix(in srgb,var(--accent) 72%,#000));-webkit-background-clip:text;background-clip:text;color:transparent} .loader-title{margin:3px 0 10px;font-size:clamp(26px,2.7vw,42px);font-weight:850;color:color-mix(in srgb,var(--text) 78%,var(--accent) 22%)} .loader-title em{font-style:normal;color:var(--accent)} .loader-sub{margin:0;max-width:760px;font-size:15px;line-height:1.7;color:var(--muted)} .loader-dots{display:flex;gap:18px;justify-content:center;margin-top:42px} .loader-dots span{width:14px;height:14px;border-radius:50%;background:color-mix(in srgb,var(--accent) 26%,var(--panel-solid));box-shadow:0 0 14px color-mix(in srgb,var(--accent) 12%,transparent);animation:loaderDot 1.8s ease-in-out infinite} .loader-dots span:nth-child(2){background:linear-gradient(180deg,var(--accent2),var(--accent));box-shadow:0 0 20px var(--glow);animation-delay:.22s}.loader-dots span:nth-child(3){animation-delay:.44s} .loader-pill{position:absolute;z-index:5;display:flex;align-items:center;gap:13px;min-width:168px;padding:15px 20px;border-radius:999px;background:color-mix(in srgb,var(--panel-solid) 78%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));backdrop-filter:blur(18px);box-shadow:0 24px 58px color-mix(in srgb,var(--accent) 16%,rgba(0,0,0,.22)),0 8px 22px rgba(0,0,0,.10),inset 0 1px 0 color-mix(in srgb,var(--panel-solid) 70%,#fff);color:var(--accent);font-size:14px;font-weight:750;will-change:transform} .lp-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--panel-solid) 92%,var(--accent3) 8%);border:1px solid color-mix(in srgb,var(--accent) 13%,transparent);box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 13%,transparent);font-size:13px} .lp1{left:8vw;top:23vh;animation:loaderPillBounce 6.2s cubic-bezier(.42,0,.22,1) infinite}.lp2{left:7vw;top:52vh;animation:loaderPillBounce 6.8s cubic-bezier(.42,0,.22,1) infinite .45s}.lp3{right:8vw;top:22vh;animation:loaderPillBounce 6.4s cubic-bezier(.42,0,.22,1) infinite .2s}.lp4{right:6vw;top:55vh;animation:loaderPillBounce 7s cubic-bezier(.42,0,.22,1) infinite .7s} .loader-stars{position:absolute;inset:0;z-index:2;pointer-events:none}.loader-stars i{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--panel-solid) 70%,#fff) 0 12%,var(--accent2) 36%,var(--accent) 100%);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 36%,transparent)} .ls1{width:8px;height:8px;left:14%;top:33%;animation:loaderStarA 9s ease-in-out infinite}.ls2{width:11px;height:11px;left:81%;top:38%;animation:loaderStarB 11s ease-in-out infinite -2s}.ls3{width:6px;height:6px;left:24%;top:74%;animation:loaderStarC 10s ease-in-out infinite -1s}.ls4{width:9px;height:9px;left:73%;top:70%;animation:loaderStarD 12s ease-in-out infinite -3s}.ls5{width:5px;height:5px;left:38%;top:17%;animation:loaderStarE 9.5s ease-in-out infinite -4s}.ls6{width:7px;height:7px;left:62%;top:25%;animation:loaderStarF 13s ease-in-out infinite -1.5s} .loader-light-sweep{position:absolute;z-index:3;inset:-20% -35%;pointer-events:none;overflow:hidden}.loader-light-sweep::before{content:"";position:absolute;top:-15%;left:-28%;width:22%;height:135%;background:linear-gradient(105deg,transparent 0 20%,color-mix(in srgb,var(--panel-solid) 10%,transparent) 32%,color-mix(in srgb,var(--panel-solid) 78%,#fff) 48%,color-mix(in srgb,var(--accent2) 28%,transparent) 58%,transparent 76%);filter:blur(11px);transform:skewX(-18deg);animation:loaderLightPass 6.4s cubic-bezier(.4,0,.2,1) infinite;mix-blend-mode:screen} @keyframes loaderFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes loaderLogoGlow{0%,100%{filter:drop-shadow(0 18px 28px color-mix(in srgb,var(--accent) 22%,transparent))}50%{filter:drop-shadow(0 20px 34px color-mix(in srgb,var(--accent) 35%,transparent))}} @keyframes loaderRingPulse{0%,100%{transform:translate(-50%,-58%) scale(1);opacity:.65}50%{transform:translate(-50%,-58%) scale(1.035);opacity:1}} @keyframes loaderRingSpin{from{transform:translate(-50%,-59%) rotate(0)}to{transform:translate(-50%,-59%) rotate(360deg)}} @keyframes loaderOrbitA{0%,100%{transform:translate(-50%,-61%) rotate(-3deg)}50%{transform:translate(-50%,-61%) rotate(2deg)}} @keyframes loaderOrbitB{0%,100%{transform:translate(-50%,-62%) rotate(8deg)}50%{transform:translate(-50%,-62%) rotate(13deg)}} @keyframes loaderDot{0%,100%{transform:scale(.82);opacity:.45}50%{transform:scale(1.15);opacity:1}} @keyframes loaderPillBounce{0%,100%{transform:translateY(0) scale(1)}20%{transform:translateY(-3px) scale(1.02)}46%{transform:translateY(-10px) scale(1.10)}68%{transform:translateY(-4px) scale(1.03)}84%{transform:translateY(-1px) scale(1.01)}} @keyframes loaderLightPass{0%,15%{left:-32%;opacity:0}28%{opacity:.9}52%{left:118%;opacity:.4}64%,100%{left:135%;opacity:0}} @keyframes loaderStarA{0%,100%{transform:translate(0,0)}50%{transform:translate(28px,-18px)}}@keyframes loaderStarB{0%,100%{transform:translate(0,0)}50%{transform:translate(-34px,20px)}}@keyframes loaderStarC{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-25px)}}@keyframes loaderStarD{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,-28px)}}@keyframes loaderStarE{0%,100%{transform:translate(0,0)}50%{transform:translate(18px,26px)}}@keyframes loaderStarF{0%,100%{transform:translate(0,0)}50%{transform:translate(-24px,16px)}} @media(max-width:1100px){.lp1,.lp2{left:3vw}.lp3,.lp4{right:3vw}.loader-pill{min-width:152px;padding:13px 16px}} @media(max-width:820px){.loader-center{width:94vw}.loader-glow{width:330px;height:330px}.loader-logo{width:min(235px,58vw)}.loader-ring,.loader-orbit{display:none}.loader-pill{position:relative;left:auto!important;right:auto!important;top:auto!important;display:inline-flex;margin:7px 5px;animation:none!important}.preloader{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px 16px}.loader-center{order:1}.lp1,.lp2,.lp3,.lp4{display:none}.loader-word{font-size:42px}.loader-title{font-size:23px}.loader-sub{font-size:13px;max-width:92vw}.loader-dots{margin-top:30px}} @media(prefers-reduced-motion:reduce){.preloader *{animation:none!important}} /* ===== Minimal AI Chat Page ===== */ .page-view.is-hidden{display:none !important} .chat-view{display:none} .chat-view.active{display:flex;flex-direction:column;gap:16px;min-height:calc(100vh - 120px)} .chat-hero{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:4px 2px 2px} .chat-hero h2{margin:0;font-size:28px;letter-spacing:-.02em}.chat-hero p{margin:6px 0 0;color:var(--muted)} .chat-head-actions{display:flex;gap:10px;align-items:center} .chat-head-actions button{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px 14px;border-radius:14px;font-weight:700} .chat-surface{display:flex;flex-direction:column;min-height:72vh;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 80%,transparent),color-mix(in srgb,var(--panel-solid) 92%,transparent));border-radius:28px;box-shadow:var(--shadow);overflow:hidden} .chat-status{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 86%,transparent)} .chat-status .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 0 14px var(--glow);display:inline-block;margin-right:8px} .chat-status b{font-size:14px}.chat-status small{color:var(--muted)} .chat-status .mini-pills{display:flex;gap:8px;flex-wrap:wrap}.chat-status .mini-pills span{font-size:12px;color:var(--muted);padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel2) 62%,transparent)} .chat-body{flex:1;overflow:auto;padding:26px 22px 14px;display:flex;flex-direction:column;gap:18px;scroll-behavior:smooth} .chat-empty{margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:760px;padding:16px} .chat-empty-logo{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--accent2) 34%,transparent),transparent 55%),var(--panel-solid);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 12px 34px var(--glow)} .chat-empty-logo img{width:84%;height:84%;object-fit:contain} .chat-empty h3{margin:0;font-size:38px;line-height:1.08;letter-spacing:-.03em}.chat-empty p{margin:0;color:var(--muted);font-size:15px;line-height:1.75} .chat-suggestion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin-top:6px} .chat-suggestion{border:1px solid var(--line);background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 90%,transparent),color-mix(in srgb,var(--panel2) 45%,transparent));color:var(--text);padding:16px 16px;border-radius:18px;text-align:left;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .chat-suggestion:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 16px 30px rgba(0,0,0,.08)} .chat-suggestion b{display:block;font-size:15px;margin-bottom:5px}.chat-suggestion span{display:block;color:var(--muted);font-size:13px;line-height:1.55} .chat-messages{display:flex;flex-direction:column;gap:18px} .msg-row{display:flex;gap:12px;align-items:flex-start}.msg-row.user{justify-content:flex-end}.msg-avatar{width:38px;height:38px;border-radius:14px;flex:0 0 38px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--panel2) 86%,transparent),color-mix(in srgb,var(--panel-solid) 96%,transparent));border:1px solid var(--line);font-weight:800;color:var(--accent)} .msg-avatar img{width:80%;height:80%;object-fit:contain}.msg-bubble{max-width:min(820px,78%);padding:15px 16px;border-radius:18px;border:1px solid var(--line);line-height:1.75;font-size:14px;white-space:pre-line} .msg-row.assistant .msg-bubble{background:color-mix(in srgb,var(--panel-solid) 92%,transparent)} .msg-row.user .msg-bubble{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent2) 14%,transparent));border-color:color-mix(in srgb,var(--accent) 34%,var(--line))} .chat-composer{padding:16px 18px 18px;border-top:1px solid var(--line);background:linear-gradient(to top,color-mix(in srgb,var(--panel-solid) 96%,transparent),color-mix(in srgb,var(--panel) 85%,transparent))} .chat-compose-box{display:flex;gap:12px;align-items:flex-end;padding:12px;border:1px solid var(--line);border-radius:22px;background:color-mix(in srgb,var(--panel-solid) 92%,transparent);box-shadow:0 10px 28px rgba(0,0,0,.05)} .chat-compose-box textarea{flex:1;min-height:28px;max-height:160px;resize:none;border:0;outline:none;background:transparent;color:var(--text);font:inherit;line-height:1.65;padding:6px 4px} .chat-compose-box textarea::placeholder{color:var(--muted)} .chat-tools{display:flex;align-items:center;gap:8px}.chat-icon-btn,.chat-send-btn{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:14px;height:42px;min-width:42px;padding:0 12px;display:grid;place-items:center} .chat-send-btn{min-width:92px;background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:#1c160f;font-weight:800;box-shadow:0 10px 24px var(--glow)} .chat-help{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 6px 0;color:var(--muted);font-size:12px} .chat-help strong{color:var(--text)} .chat-trigger{cursor:pointer} @media(max-width:980px){.chat-suggestion-grid{grid-template-columns:1fr}.msg-bubble{max-width:100%}} @media(max-width:820px){.chat-view.active{min-height:calc(100vh - 100px)}.chat-hero{flex-direction:column;align-items:flex-start}.chat-empty h3{font-size:30px}.chat-status{flex-direction:column;align-items:flex-start}.chat-status .mini-pills{width:100%}} /* ===== Chat refinement: cleaner, fixed, ChatGPT-like ===== */ .chat-view.active{height:calc(100vh - 108px);min-height:calc(100vh - 108px);gap:0} .chat-hero{display:none} .chat-surface{height:100%;min-height:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible} .chat-status{display:none} .chat-body{flex:1;overflow:auto;padding:28px 18px 180px;max-width:940px;width:100%;margin:0 auto} .chat-empty{max-width:900px;gap:18px;padding:6vh 8px 0} .chat-empty-logo{display:none} .chat-empty h3{font-size:56px;line-height:1.04;font-weight:800;letter-spacing:-.04em} .chat-empty p{font-size:15px;line-height:1.8;max-width:880px} .chat-suggestion-grid{max-width:920px;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .chat-suggestion{min-height:100px;padding:18px 20px;border-radius:20px;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 72%,transparent),color-mix(in srgb,var(--panel2) 34%,transparent));box-shadow:none} .chat-suggestion b{font-size:15px;margin-bottom:6px} .chat-suggestion span{font-size:13px} .chat-messages{gap:18px;padding-top:10px} .msg-row{max-width:900px;margin:0 auto;width:100%} .msg-row.assistant{justify-content:flex-start} .msg-row.user{justify-content:flex-end} .msg-avatar{display:none} .msg-bubble{max-width:min(860px,84%);padding:16px 18px;border-radius:22px;font-size:14px;line-height:1.78} .msg-row.assistant .msg-bubble{background:color-mix(in srgb,var(--panel-solid) 82%,transparent)} .msg-row.user .msg-bubble{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent2) 10%,transparent));} .chat-composer{position:sticky;bottom:0;z-index:3;padding:18px 18px 16px;border-top:0;background:linear-gradient(to top,color-mix(in srgb,var(--bg) 98%,transparent) 62%,transparent)} .chat-compose-box,.chat-help{max-width:920px;margin:0 auto} .chat-compose-box{padding:12px 12px 12px 10px;border-radius:28px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));background:color-mix(in srgb,var(--panel-solid) 88%,transparent);box-shadow:0 8px 28px rgba(0,0,0,.05)} .chat-compose-box textarea{padding:10px 8px;min-height:30px} .chat-tools{gap:10px} .chat-icon-btn{border-radius:16px} .chat-send-btn{border-radius:18px;min-width:120px;height:48px} .chat-help{padding:10px 6px 0;font-size:12px} @media(max-width:980px){.chat-empty h3{font-size:42px}.chat-suggestion-grid{grid-template-columns:1fr}.msg-bubble{max-width:100%}} @media(max-width:820px){.chat-view.active{height:calc(100vh - 90px);min-height:calc(100vh - 90px)}.chat-body{padding:20px 14px 176px}.chat-empty{padding-top:4vh}.chat-empty h3{font-size:34px}.chat-compose-box{border-radius:22px}.chat-send-btn{min-width:94px;height:44px}} /* ========================================================= NEXTONTECH MOTION SYSTEM — theme adaptive ========================================================= */ :root{ --motion-speed: 1; --fx-alpha:.52; --fx-blur:54px; --fx-tilt:5deg; } html[data-theme="csa"]{--motion-speed:.92;--fx-alpha:.48} html[data-theme="volt-yellow"]{--motion-speed:1.18;--fx-alpha:.62} html[data-theme="royal-violet"]{--motion-speed:.78;--fx-alpha:.66} html[data-theme="arctic-blue"]{--motion-speed:.72;--fx-alpha:.46} html[data-theme="shadow-gold"]{--motion-speed:.84;--fx-alpha:.44} html[data-theme="crimson-web"]{--motion-speed:1.08;--fx-alpha:.66} html[data-theme="reactor-gold"]{--motion-speed:1.12;--fx-alpha:.58} html[data-theme="panther-violet"]{--motion-speed:.70;--fx-alpha:.42} html[data-theme="emerald-core"]{--motion-speed:.88;--fx-alpha:.55} html[data-theme="caramel"]{--motion-speed:.62;--fx-alpha:.32} html[data-theme="mocha"]{--motion-speed:.66;--fx-alpha:.34} html[data-theme="ocean"]{--motion-speed:.75;--fx-alpha:.59} html[data-theme="emerald"]{--motion-speed:.80;--fx-alpha:.55} html[data-theme="classic"]{--motion-speed:.58;--fx-alpha:.34} body{overflow-x:hidden} .main,.sidebar{position:relative;z-index:2} .motion-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0;isolation:isolate} .motion-orb{position:absolute;width:46vw;height:46vw;min-width:460px;min-height:460px;border-radius:50%;filter:blur(var(--fx-blur));opacity:var(--fx-alpha);mix-blend-mode:screen;will-change:transform} .orb-a{left:-14vw;top:-17vw;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 60%,transparent),transparent 67%);animation:orbDrift calc(16s / var(--motion-speed)) ease-in-out infinite alternate} .orb-b{right:-17vw;bottom:-22vw;background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 48%,transparent),transparent 68%);animation:orbDriftB calc(20s / var(--motion-speed)) ease-in-out infinite alternate} .motion-grid{position:absolute;inset:-20%;opacity:.18;background-image:linear-gradient(color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at center,#000 10%,transparent 72%);animation:gridFlow calc(24s / var(--motion-speed)) linear infinite} @keyframes orbDrift{to{transform:translate3d(16vw,12vh,0) scale(1.13) rotate(15deg)}} @keyframes orbDriftB{to{transform:translate3d(-15vw,-14vh,0) scale(.92) rotate(-18deg)}} @keyframes gridFlow{to{transform:translate3d(42px,42px,0)}} .fx-particle{position:absolute;width:var(--s);height:var(--s);left:var(--x);top:110%;border-radius:50%;background:var(--accent2);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 75%,transparent);opacity:0;animation:particleUp var(--d) linear var(--delay) infinite} @keyframes particleUp{0%{transform:translate3d(0,0,0) scale(.4);opacity:0}10%{opacity:.45}70%{opacity:.16}100%{transform:translate3d(var(--drift),-125vh,0) scale(1.25);opacity:0}} /* reveal */ .reveal-motion{opacity:0;transform:translateY(18px) scale(.985);filter:blur(4px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .7s ease;transition-delay:var(--reveal-delay,0ms)} .reveal-motion.in-view{opacity:1;transform:none;filter:none} /* cards: depth, glow and shine */ .card,.tool,.solution,.mini,.quick button,.theme-button,.search{transition:transform .28s cubic-bezier(.2,.8,.2,1),border-color .28s ease,box-shadow .28s ease,background .28s ease;will-change:transform} .card.motion-hover,.tool.motion-hover,.solution.motion-hover,.mini.motion-hover{transform:perspective(900px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-3px);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));box-shadow:0 22px 54px rgba(0,0,0,.13),0 0 30px color-mix(in srgb,var(--accent) 12%,transparent)} .tool,.solution,.quick button{position:relative;overflow:hidden} .tool::after,.solution::after,.quick button::after,.theme-button::after{content:"";position:absolute;inset:-140% auto -140% -50%;width:38%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);opacity:0;transition:opacity .2s;pointer-events:none} .tool:hover::after,.solution:hover::after,.quick button:hover::after,.theme-button:hover::after{opacity:1;animation:shineSweep .75s ease forwards} @keyframes shineSweep{to{left:125%}} .tool:hover{transform:translateY(-5px) scale(1.018);box-shadow:0 18px 36px color-mix(in srgb,var(--accent) 14%,transparent)} .tool:hover .tool-icon{animation:iconPop .62s cubic-bezier(.2,.9,.2,1)} @keyframes iconPop{0%{transform:scale(1)}45%{transform:scale(1.16) rotate(-5deg)}100%{transform:scale(1) rotate(0)}} /* hero animation */ .hero{overflow:hidden;transform-style:preserve-3d} .hero::before{content:"";position:absolute;inset:-45%;z-index:0;background:conic-gradient(from 120deg,transparent 0 34%,color-mix(in srgb,var(--accent2) 15%,transparent) 41%,transparent 49% 100%);animation:heroSweep calc(13s / var(--motion-speed)) linear infinite;pointer-events:none} @keyframes heroSweep{to{transform:rotate(360deg)}} .hero-copy{position:relative;z-index:2} .hero h1{background:linear-gradient(90deg,var(--heroText),color-mix(in srgb,var(--heroText) 75%,var(--accent2)),var(--heroText));background-size:220% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleFlow calc(7s / var(--motion-speed)) ease-in-out infinite} @keyframes titleFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}} .robot{animation:robotFloat calc(4.6s / var(--motion-speed)) ease-in-out infinite;transform-origin:50% 70%} .robot .core{animation:corePulse calc(2s / var(--motion-speed)) ease-in-out infinite} .robot .halo{animation:haloSpin calc(12s / var(--motion-speed)) linear infinite} .eye{animation:blink calc(5.5s / var(--motion-speed)) infinite} .eye.e2{animation-delay:.1s} @keyframes robotFloat{0%,100%{transform:translateY(0) rotate(-.5deg)}50%{transform:translateY(-11px) rotate(.8deg)}} @keyframes corePulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.16);filter:brightness(1.3)}} @keyframes haloSpin{to{transform:rotate(348deg)}} @keyframes blink{0%,44%,48%,100%{transform:scaleY(1)}46%{transform:scaleY(.08)}} /* nav and buttons */ .nav a{position:relative;overflow:hidden;transition:transform .2s ease,background .25s ease,color .25s ease} .nav a:hover{transform:translateX(4px)} .nav a.active::after{content:"";position:absolute;right:8px;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:activeDot 1.5s ease-in-out infinite} @keyframes activeDot{50%{transform:scale(1.6);opacity:.45}} .primary,.secondary,.upgrade button,.chat-send-btn{position:relative;overflow:hidden;transition:transform .2s ease,filter .2s ease,box-shadow .2s ease} .primary:hover,.upgrade button:hover,.chat-send-btn:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 12px 30px color-mix(in srgb,var(--accent) 28%,transparent)} .primary:active,.secondary:active,.upgrade button:active,.chat-send-btn:active{transform:translateY(0) scale(.98)} /* click ripple */ .motion-ripple{position:absolute;border-radius:50%;pointer-events:none;background:color-mix(in srgb,var(--accent2) 40%,white 18%);transform:translate(-50%,-50%) scale(0);animation:ripple .62s ease-out forwards} @keyframes ripple{to{transform:translate(-50%,-50%) scale(1);opacity:0}} /* Per-theme motion personality */ html[data-theme="volt-yellow"] .motion-grid,html[data-theme="reactor-gold"] .motion-grid{background-size:30px 30px;opacity:.24} html[data-theme="royal-violet"] .motion-orb,html[data-theme="ocean"] .motion-orb{filter:blur(70px)} html[data-theme="caramel"] .motion-grid,html[data-theme="classic"] .motion-grid{opacity:.09} html[data-theme="crimson-web"] .motion-grid{transform:skewY(-3deg);animation-name:gridFlowRed} @keyframes gridFlowRed{to{transform:translate3d(42px,42px,0) skewY(-3deg)}} html[data-theme="emerald-core"] .fx-particle,html[data-theme="emerald"] .fx-particle{border-radius:2px;transform:rotate(45deg)} @media(max-width:820px){ .motion-orb{min-width:340px;min-height:340px;opacity:calc(var(--fx-alpha) * .72)} .motion-grid{opacity:.08} .card.motion-hover,.tool.motion-hover,.solution.motion-hover,.mini.motion-hover{transform:none} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important} .motion-particles{display:none} .reveal-motion{opacity:1;transform:none;filter:none} } /* ========================================================= Premium adaptive AI tool icons — 100% HTML/CSS/SVG code ========================================================= */ .tool-sprite{position:absolute;pointer-events:none} .ai-tools-card{overflow:visible} .premium-tool-grid{gap:12px} .premium-tool{ --tool-hue-a:var(--accent); --tool-hue-b:var(--accent2); min-height:148px; padding:13px 8px 12px; border-color:color-mix(in srgb,var(--accent) 22%,var(--line)); background:linear-gradient(155deg,color-mix(in srgb,var(--panel-solid) 92%,transparent),color-mix(in srgb,var(--accent3) 14%,var(--panel-solid))); isolation:isolate; } .premium-tool[data-tool="write"],.premium-tool[data-tool="doc"]{--tool-warm:#ff9e3d} .premium-tool[data-tool="image"]{--tool-warm:#ff66c8} .premium-tool[data-tool="video"]{--tool-warm:#8c6cff} .premium-tool[data-tool="translate"]{--tool-warm:#24d6ca} .premium-tool[data-tool="data"]{--tool-warm:#ffd25a} .premium-tool[data-tool="work"],.premium-tool[data-tool="study"]{--tool-warm:#ffc55f} .premium-tool[data-tool="more"]{--tool-warm:var(--accent2)} .tool-icon-pro{ --mx:50%;--my:36%; position:relative;width:82px;height:82px;margin:0 auto 10px;border-radius:25px; display:grid;place-items:center;overflow:visible;isolation:isolate; color:#eff9ff; background: radial-gradient(circle at var(--mx) var(--my),color-mix(in srgb,var(--tool-warm,var(--accent2)) 30%,transparent),transparent 30%), radial-gradient(circle at 24% 18%,color-mix(in srgb,var(--accent2) 28%,transparent),transparent 34%), linear-gradient(145deg,color-mix(in srgb,var(--accent) 74%,#071329),color-mix(in srgb,var(--accent3) 28%,#09102d 72%) 58%,color-mix(in srgb,var(--tool-warm,var(--accent2)) 36%,#1a1040)); border:1px solid color-mix(in srgb,var(--accent2) 68%,white 20%); box-shadow: inset 0 1px 0 rgba(255,255,255,.62), inset 0 -12px 25px rgba(0,0,0,.28), 0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent), 0 8px 20px color-mix(in srgb,var(--accent) 26%,transparent), 0 0 24px color-mix(in srgb,var(--accent2) 18%,transparent); transform:translateZ(0); } .tool-icon-pro::before{ content:"";position:absolute;inset:3px;border-radius:22px;z-index:-1;pointer-events:none; background:linear-gradient(125deg,rgba(255,255,255,.22),transparent 23% 70%,color-mix(in srgb,var(--tool-warm,var(--accent2)) 18%,transparent)); border:1px solid rgba(255,255,255,.12) } .tool-icon-pro::after{ content:"";position:absolute;left:14%;top:7%;width:49%;height:14%;border-radius:50%;z-index:4;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0));filter:blur(.2px);transform:rotate(-7deg) } .tool-icon-pro svg{width:59px;height:59px;overflow:visible;position:relative;z-index:3;filter:drop-shadow(0 4px 4px rgba(0,0,0,.32)) drop-shadow(0 0 8px color-mix(in srgb,var(--accent2) 54%,transparent))} .tool-icon-pro svg *{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round} .tool-icon-pro svg use{overflow:visible} .tool-icon-pro svg .shadow-shape{fill:#031126;opacity:.72;transform:translate(1.6px,2px);filter:url(#softGlow)} .tool-icon-pro svg .glass-main{fill:url(#gCool);stroke:color-mix(in srgb,var(--accent2) 72%,#eaffff);stroke-width:1.45;filter:url(#innerShadow)} .tool-icon-pro svg .screen{fill:url(#gDeep);stroke:color-mix(in srgb,var(--accent2) 72%,#7cecff);stroke-width:1.3} .tool-icon-pro svg .cool-main{fill:url(#gCool);stroke:color-mix(in srgb,var(--accent2) 68%,#f5ffff);stroke-width:1.25;filter:url(#softGlow)} .tool-icon-pro svg .violet-main{fill:url(#gViolet);stroke:color-mix(in srgb,var(--accent2) 56%,#f5eaff);stroke-width:1.2;filter:url(#softGlow)} .tool-icon-pro svg .warm-main{fill:url(#gWarm);stroke:#fff0c8;stroke-width:1.15;filter:url(#softGlow)} .tool-icon-pro svg .eye-glow{fill:#dffcff;stroke:color-mix(in srgb,var(--accent2) 75%,#9ffcff);stroke-width:1.2;filter:url(#softGlow)} .tool-icon-pro svg .dot-light{fill:#fff8de;stroke:none;filter:url(#softGlow)} .tool-icon-pro svg .fine-stroke{fill:none;stroke:color-mix(in srgb,var(--accent2) 36%,white 64%);stroke-width:2.15;filter:url(#softGlow)} .tool-icon-pro svg .shine-stroke{fill:none;stroke:rgba(255,255,255,.78);stroke-width:1.35;opacity:.72} .tool-icon-pro svg .plus-stroke{fill:none;stroke:url(#gCool);stroke-width:5.5;filter:url(#softGlow)} .tool-icon-pro svg .trend{stroke-width:2.8}.tool-icon-pro svg .film-line{opacity:.55;stroke-width:1.15} .tool-icon-pro .orbit{position:absolute;left:50%;top:50%;width:102px;height:34px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--accent2) 68%,transparent);z-index:2;pointer-events:none;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent2) 65%,transparent))} .tool-icon-pro .orbit-1{transform:translate(-50%,-50%) rotate(-13deg);border-right-color:color-mix(in srgb,var(--tool-warm,var(--accent2)) 80%,white 10%);animation:toolOrbit 7.5s linear infinite} .tool-icon-pro .orbit-2{width:92px;height:27px;transform:translate(-50%,-50%) rotate(31deg);border-left-color:transparent;border-bottom-color:color-mix(in srgb,var(--tool-warm,var(--accent2)) 72%,transparent);opacity:.72;animation:toolOrbit2 9s linear infinite reverse} .tool-icon-pro .spark{position:absolute;width:5px;height:5px;border-radius:50%;z-index:5;background:#fff;box-shadow:0 0 5px #fff,0 0 10px var(--accent2)} .tool-icon-pro .s1{left:8px;top:22px;animation:toolSpark 2.2s ease-in-out infinite} .tool-icon-pro .s2{right:10px;bottom:18px;background:color-mix(in srgb,var(--tool-warm,var(--accent2)) 75%,white 25%);box-shadow:0 0 7px var(--tool-warm,var(--accent2));animation:toolSpark 2.6s .5s ease-in-out infinite} .premium-tool b{font-size:12px;margin-top:1px} .premium-tool small{font-size:9.5px;margin-top:2px;display:block} .premium-tool:hover .tool-icon-pro{transform:translateY(-5px) scale(1.08) rotateX(4deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -12px 25px rgba(0,0,0,.25),0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent),0 15px 26px color-mix(in srgb,var(--accent) 32%,transparent),0 0 34px color-mix(in srgb,var(--tool-warm,var(--accent2)) 22%,transparent)} .premium-tool:hover .tool-icon-pro svg{transform:scale(1.05);filter:drop-shadow(0 4px 4px rgba(0,0,0,.24)) drop-shadow(0 0 10px color-mix(in srgb,var(--accent2) 72%,transparent))} .tool-icon-pro,.tool-icon-pro svg{transition:transform .35s cubic-bezier(.2,.85,.2,1),box-shadow .35s ease,filter .35s ease} @keyframes toolOrbit{0%{transform:translate(-50%,-50%) rotate(-13deg)}50%{transform:translate(-50%,-50%) rotate(167deg)}100%{transform:translate(-50%,-50%) rotate(347deg)}} @keyframes toolOrbit2{0%{transform:translate(-50%,-50%) rotate(31deg) scaleX(1)}50%{transform:translate(-50%,-50%) rotate(211deg) scaleX(.94)}100%{transform:translate(-50%,-50%) rotate(391deg) scaleX(1)}} @keyframes toolSpark{0%,100%{transform:scale(.7);opacity:.45}50%{transform:scale(1.35);opacity:1}} /* Light themes keep the cards light while the icon itself remains premium/neon. */ html[data-theme="csa"] .tool-icon-pro, html[data-theme="caramel"] .tool-icon-pro{box-shadow:inset 0 1px 0 rgba(255,255,255,.68),inset 0 -12px 25px rgba(0,0,0,.28),0 8px 21px color-mix(in srgb,var(--accent) 24%,transparent),0 0 26px color-mix(in srgb,var(--accent2) 20%,transparent)} @media (max-width:1180px){.premium-tool-grid{grid-template-columns:repeat(5,1fr)}.premium-tool{min-height:140px}.tool-icon-pro{width:74px;height:74px;border-radius:22px}.tool-icon-pro svg{width:51px;height:51px}.tool-icon-pro .orbit{width:92px}} @media (max-width:760px){.premium-tool-grid{grid-template-columns:repeat(2,1fr)}.premium-tool{min-height:136px}.tool-icon-pro{width:72px;height:72px}} @media (prefers-reduced-motion:reduce){.tool-icon-pro .orbit,.tool-icon-pro .spark{animation:none}.premium-tool:hover .tool-icon-pro{transform:none}} /* Offline-safe inline SVG paint-server overrides */ .tool-icon-pro svg .pseudo3d-inline{transform-box:fill-box;transform-origin:center} .tool-icon-pro svg .pseudo3d-inline .shadow-shape{opacity:.62} /* ========================================================= Hero AI Core — keep orbit utility chips clear of the core ========================================================= */ .robot.ai-core-visual .energy-ring-back{z-index:1} .robot.ai-core-visual .core-shadow{z-index:2} .robot.ai-core-visual .core-wrap{z-index:3} .robot.ai-core-visual .energy-ring-front{z-index:4} .robot.ai-core-visual .float-chip{ z-index:6; pointer-events:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px color-mix(in srgb,var(--accent) 15%,transparent), 0 0 14px color-mix(in srgb,var(--accent2) 14%,transparent); } /* Pull all three mini controls outside the glass sphere so none are covered. */ .robot.ai-core-visual .chip-chat{ left:58px; top:92px; } .robot.ai-core-visual .chip-play{ right:4px; top:104px; } .robot.ai-core-visual .chip-image{ right:18px; bottom:48px; } @media(max-width:820px){ .robot.ai-core-visual .chip-chat{left:50px;top:94px} .robot.ai-core-visual .chip-play{right:2px;top:106px} .robot.ai-core-visual .chip-image{right:14px;bottom:45px} } /* Theme selector refinement: N icon in front and follows each theme */ .theme-switcher{position:relative} .theme-button{box-shadow:0 12px 24px rgba(0,0,0,.08)} .theme-menu{position:absolute;right:0;top:52px;width:264px;padding:8px;background:color-mix(in srgb,var(--panel-solid) 92%,#05070a 8%);border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.26);display:none} .theme-menu.open{display:block} .theme-option{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:0;background:transparent;color:var(--text);width:100%;text-align:left} .theme-option:hover{background:color-mix(in srgb,var(--panel2) 80%,transparent)} .theme-option .theme-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .theme-option .theme-sub,.theme-option .swatches{display:none!important} .theme-option .check{margin-left:auto} /* Theme menu: lock each item to its own theme color */ .theme-option{ position:relative; border:1px solid color-mix(in srgb,var(--item-accent, var(--accent)) 28%, transparent); background: radial-gradient(circle at 14% 18%, color-mix(in srgb,var(--item-accent2, var(--accent2)) 20%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb,var(--item-bg, var(--panel-solid)) 96%, white 0%), color-mix(in srgb,var(--item-bg2, var(--panel2)) 94%, black 0%)); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.10); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease; } .theme-option:hover{ background: radial-gradient(circle at 14% 18%, color-mix(in srgb,var(--item-accent2, var(--accent2)) 30%, transparent), transparent 38%), linear-gradient(135deg, color-mix(in srgb,var(--item-bg, var(--panel-solid)) 88%, var(--item-accent) 12%), color-mix(in srgb,var(--item-bg2, var(--panel2)) 86%, var(--item-accent2) 14%)); border-color:color-mix(in srgb,var(--item-accent, var(--accent)) 62%, white 10%); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 22px color-mix(in srgb,var(--item-accent, var(--accent)) 16%, transparent); transform:translateY(-1px); } .theme-option.active{ background: radial-gradient(circle at 14% 18%, color-mix(in srgb,var(--item-accent2, var(--accent2)) 34%, transparent), transparent 38%), linear-gradient(135deg, color-mix(in srgb,var(--item-bg, var(--panel-solid)) 82%, var(--item-accent) 18%), color-mix(in srgb,var(--item-bg2, var(--panel2)) 80%, var(--item-accent2) 20%)); border-color:color-mix(in srgb,var(--item-accent, var(--accent)) 78%, white 10%); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--item-accent2, var(--accent2)) 35%, rgba(255,255,255,.16)), 0 12px 24px color-mix(in srgb,var(--item-accent, var(--accent)) 18%, transparent); } .theme-option .theme-name{color:var(--item-text, var(--text));font-weight:800} .theme-option .theme-sub{display:block!important;color:var(--item-muted, var(--muted));font-size:10px;margin-top:2px} .theme-option .check{color:var(--item-accent2, var(--accent2));filter:drop-shadow(0 0 8px color-mix(in srgb,var(--item-accent) 35%, transparent))} .theme-option .theme-emblem{box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 0 0 2px color-mix(in srgb,var(--item-accent) 15%, transparent),0 8px 16px rgba(0,0,0,.22),0 0 14px color-mix(in srgb,var(--item-accent) 22%, transparent)} .theme-menu{ background:linear-gradient(180deg, color-mix(in srgb,var(--panel-solid) 96%, white 0%), color-mix(in srgb,var(--panel-solid) 94%, black 0%)); border:1px solid color-mix(in srgb,var(--accent) 26%, var(--line)); box-shadow:0 24px 60px rgba(0,0,0,.26), 0 0 0 1px color-mix(in srgb,var(--accent2) 12%, transparent); } /* Theme badge optical alignment — keep the N visually centered in every round badge */ .theme-emblem{place-items:center;isolation:isolate} .theme-emblem::before{z-index:0} .theme-n-logo{position:relative;z-index:1;overflow:visible} .theme-option .menu-n{display:grid;place-items:center} .current-theme-n{display:grid;place-items:center} .theme-option .menu-n .theme-n-logo{width:80%;height:80%;transform:translate(-1.5%,.5%)} .current-theme-n .theme-n-logo{width:80%;height:80%;transform:translate(-1.5%,.5%)} /* Context icons for dashboard information zone */ .section-title h3{display:flex;align-items:center;gap:8px} .topic-icon,.item-icon{display:inline-grid;place-items:center;flex:0 0 auto;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,var(--panel-solid)),color-mix(in srgb,var(--accent2) 8%,var(--panel-solid)));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 10px color-mix(in srgb,var(--accent) 8%,transparent)} .topic-icon{width:27px;height:27px;border-radius:9px}.item-icon{width:25px;height:25px;border-radius:8px} .topic-icon svg,.item-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .quick-label{display:flex;align-items:center;gap:9px;min-width:0}.quick-label>span:last-child{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick button>.quick-label+.quick-label{display:none} .quick button>.quick-label~span:last-child{color:var(--accent);font-weight:800} .mini b{display:flex;align-items:center;gap:8px;line-height:1.25}.mini-topic-icon{width:24px;height:24px;border-radius:7px}.mini-topic-icon svg{width:14px;height:14px} .account-activity .mini b{font-size:13px}.account-activity .mini p{padding-left:32px} @media(max-width:520px){.topic-icon{width:25px;height:25px}.quick-label{gap:7px}.item-icon{width:23px;height:23px}.account-activity .mini p{padding-left:30px}} /* ===== Sidebar semantic gradient icons ===== */ .nav{gap:3px} .nav a{position:relative;min-height:46px;border-radius:14px;transition:background .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease} .nav a:hover{background:color-mix(in srgb,var(--accent) 7%,var(--panel2));transform:translateX(2px)} .nav .ico{ width:29px;height:29px;flex:0 0 29px;border-radius:10px;display:grid;place-items:center; color:#fff;border:1px solid rgba(255,255,255,.12); background:linear-gradient(145deg,var(--nav-icon-a,var(--accent2)),var(--nav-icon-b,var(--accent))); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 7px 16px color-mix(in srgb,var(--nav-icon-b,var(--accent)) 20%,transparent); position:relative;overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease; } .nav .ico::before{content:"";position:absolute;inset:-45% 30% 42% -25%;background:linear-gradient(120deg,rgba(255,255,255,.42),rgba(255,255,255,0));transform:rotate(-12deg);pointer-events:none} .nav .ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))} .nav a:hover .ico{transform:translateY(-1px) scale(1.05);filter:saturate(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 9px 20px color-mix(in srgb,var(--nav-icon-b,var(--accent)) 30%,transparent)} .nav a.active .ico{transform:scale(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent),0 9px 24px var(--glow)} .nav a.active::after{content:"";position:absolute;right:10px;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));box-shadow:0 0 12px var(--accent)} .nav-label{font-weight:620;letter-spacing:-.01em} /* each menu keeps its own visual identity while still harmonizing with the active theme */ .nav-ico-home{--nav-icon-a:color-mix(in srgb,var(--accent2) 84%,#78e4ff);--nav-icon-b:color-mix(in srgb,var(--accent) 84%,#1678ff)} .nav-ico-news{--nav-icon-a:#70dcff;--nav-icon-b:#2788ff} .nav-ico-tools{--nav-icon-a:#74f1ff;--nav-icon-b:#2d75ff} .nav-ico-chat{--nav-icon-a:#8ddfff;--nav-icon-b:#4b73ff} .nav-ico-social{--nav-icon-a:#b89aff;--nav-icon-b:#6b63ff} .nav-ico-write{--nav-icon-a:#ffb7d1;--nav-icon-b:#9869ff} .nav-ico-video{--nav-icon-a:#7bd8ff;--nav-icon-b:#226cff} .nav-ico-job{--nav-icon-a:#79e8d7;--nav-icon-b:#3188ff} .nav-ico-study{--nav-icon-a:#86e7ff;--nav-icon-b:#7c68ff} .nav-ico-pay{--nav-icon-a:#8bf0d2;--nav-icon-b:#2aa2c8} .nav-ico-member{--nav-icon-a:#ffd878;--nav-icon-b:#ff8f56} .nav-ico-settings{--nav-icon-a:#9ad8ff;--nav-icon-b:#6678ff} /* theme tint overlay: makes the icon set feel native in every theme */ .nav .ico::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,color-mix(in srgb,var(--accent2) 18%,transparent),color-mix(in srgb,var(--accent) 14%,transparent));mix-blend-mode:screen;pointer-events:none} .app.sidebar-collapsed .nav a{padding:9px 7px} .app.sidebar-collapsed .nav .ico{width:30px;height:30px;flex-basis:30px;font-size:inherit} .app.sidebar-collapsed .nav a.active::after{right:4px;width:5px;height:5px} /* ===== Smooth interaction upgrade ===== */ :root{--smooth-ease:cubic-bezier(.22,.82,.22,1)} .sidebar-toggle,.mobile-sidebar-toggle,.theme-button,.theme-option,.upgrade button,.nav a,.nav .ico,.theme-menu,.sidebar,.sidebar-overlay{ will-change:transform,opacity; } .sidebar-toggle,.mobile-sidebar-toggle,.theme-button,.theme-option,.upgrade button,.nav a{ transition:transform .24s var(--smooth-ease),box-shadow .24s var(--smooth-ease),background .24s ease,border-color .24s ease,color .24s ease,filter .24s ease; } .sidebar-toggle:active,.mobile-sidebar-toggle:active,.theme-button:active,.theme-option:active,.upgrade button:active,.nav a:active{ transform:scale(.975); } .sidebar-toggle .toggle-bars i,.mobile-sidebar-toggle .toggle-bars i{ transition:transform .28s var(--smooth-ease),opacity .22s ease,background .22s ease; transform-origin:center; } .mobile-sidebar-toggle.is-active .toggle-bars i:nth-child(1){transform:translateY(6px) rotate(45deg)} .mobile-sidebar-toggle.is-active .toggle-bars i:nth-child(2){opacity:0} .mobile-sidebar-toggle.is-active .toggle-bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .theme-button{box-shadow:0 12px 24px rgba(0,0,0,.08)} .theme-button:hover{transform:translateY(-1px);box-shadow:0 15px 28px rgba(0,0,0,.12)} .theme-menu{ display:block !important; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(10px) scale(.985); transition:opacity .2s var(--smooth-ease),transform .2s var(--smooth-ease),visibility 0s linear .2s; } .theme-menu.open{ opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0) scale(1); transition-delay:0s; } .theme-option:hover{transform:translateY(-1px)} .nav a{overflow:hidden} .nav a::before{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent2) 12%,transparent),transparent); transform:translateX(-115%); transition:transform .48s var(--smooth-ease); pointer-events:none; } .nav a:hover::before{transform:translateX(115%)} @media(max-width:820px){ body.sidebar-open-lock{overflow:hidden;touch-action:none} .sidebar{ transform:translateX(-24px); opacity:0; visibility:hidden; pointer-events:none; transition:transform .38s var(--smooth-ease),opacity .28s ease,visibility 0s linear .38s,box-shadow .38s var(--smooth-ease); box-shadow:none; } .app.sidebar-open .sidebar{ transform:translateX(0); opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; box-shadow:0 18px 48px rgba(0,0,0,.34); } .sidebar-overlay{ display:block; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .28s ease,visibility 0s linear .28s; } .app.sidebar-open .sidebar-overlay{ opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; } } @media(min-width:821px){ .brand-left,.brand-copy,.nav-label,.upgrade b,.upgrade p,.upgrade button{ transition:opacity .2s ease,transform .26s var(--smooth-ease),max-width .26s var(--smooth-ease),margin .26s var(--smooth-ease),padding .26s var(--smooth-ease); } .app.sidebar-collapsed .brand-left{ display:flex !important; width:0; min-width:0; opacity:0; overflow:hidden; transform:translateX(-8px); pointer-events:none; gap:0; } .app.sidebar-collapsed .brand-copy, .app.sidebar-collapsed .nav-label, .app.sidebar-collapsed .upgrade b, .app.sidebar-collapsed .upgrade p, .app.sidebar-collapsed .upgrade button{ display:block !important; max-width:0; opacity:0; overflow:hidden; margin:0 !important; padding-left:0 !important; padding-right:0 !important; transform:translateX(-10px); pointer-events:none; white-space:nowrap; } .app.sidebar-collapsed .nav a{gap:0} } /* ===== Sidebar v2: smoother desktop collapse + top aligned toggle ===== */ @media(min-width:821px){ .app{ transition:grid-template-columns .48s cubic-bezier(.22,.85,.24,1); } .sidebar{ overflow:hidden; transition:padding .48s cubic-bezier(.22,.85,.24,1),background .3s ease,border-color .3s ease; } /* keep the control at the top in both states */ .brand{ min-height:58px; align-items:center; } .app.sidebar-collapsed .brand{ display:flex; justify-content:center; align-items:flex-start; min-height:48px; padding:0; } .app.sidebar-collapsed .sidebar-toggle{ margin:0 auto; position:relative; top:0; } /* do not let hidden brand content take vertical / horizontal space */ .app.sidebar-collapsed .brand-left{ position:absolute; width:0; height:0; opacity:0; overflow:hidden; pointer-events:none; transform:translateX(-10px) scale(.96); } /* smoother label reveal/hide */ .nav a{ transition:padding .42s cubic-bezier(.22,.85,.24,1),gap .42s cubic-bezier(.22,.85,.24,1),background .22s ease,transform .22s ease,box-shadow .22s ease; } .nav-label{ display:inline-block !important; max-width:170px; opacity:1; transform:translateX(0); overflow:hidden; transition:max-width .38s cubic-bezier(.22,.85,.24,1),opacity .22s ease .06s,transform .38s cubic-bezier(.22,.85,.24,1); } .app.sidebar-collapsed .nav-label{ max-width:0; opacity:0; transform:translateX(-8px); transition:max-width .34s cubic-bezier(.22,.85,.24,1),opacity .14s ease,transform .34s cubic-bezier(.22,.85,.24,1); } .sidebar-bottom .upgrade{ transition:padding .42s cubic-bezier(.22,.85,.24,1),min-height .42s cubic-bezier(.22,.85,.24,1),border-radius .32s ease; } /* remove the old display based snap for desktop */ .app.sidebar-collapsed .brand-copy, .app.sidebar-collapsed .upgrade b, .app.sidebar-collapsed .upgrade p, .app.sidebar-collapsed .upgrade button{ display:block !important; } } /* ========================================================= Responsive QA v3 — desktop / laptop / tablet / mobile ========================================================= */ html,body{max-width:100%;overflow-x:hidden} img,svg,video,canvas{max-width:100%} .main,.dashboard,.leftcol,.rightcol,.card,.topbar,.search{min-width:0} /* Laptop + landscape tablet */ @media(max-width:1280px){ .main{padding:14px 14px 24px} .topbar{gap:9px} .dashboard{gap:12px} .hero{padding:24px;min-height:238px} .hero h1{font-size:clamp(27px,2.55vw,34px)} .robot.ai-core-visual{right:8px;transform:scale(.92);transform-origin:right center} .theme-button{min-width:178px} } /* Tablet landscape / compact laptop */ @media(max-width:1100px){ .dashboard{grid-template-columns:1fr} .rightcol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} .rightcol>.card{height:100%} .hero-copy{max-width:62%} .robot.ai-core-visual{right:0;transform:scale(.84)} .topbar .search{order:1} .theme-button{min-width:150px} .profile{max-width:170px} .tool-grid{grid-template-columns:repeat(5,minmax(0,1fr))} } /* Tablet portrait */ @media(max-width:900px){ .main{padding:12px 12px 22px} .topbar{position:sticky;top:0;gap:8px;padding:8px 0 12px;flex-wrap:nowrap} .mobile-sidebar-toggle{display:grid;flex:0 0 42px;width:42px;height:42px} .search{padding:10px 12px;min-height:44px} .theme-button{width:48px;min-width:48px;min-height:44px;padding:5px;justify-content:center} .theme-button .chev,.theme-button #themeLabel{display:none} .theme-menu{position:fixed;top:66px;right:12px;width:min(310px,calc(100vw - 24px));max-height:calc(100dvh - 82px);z-index:80} .profile{display:none} .hero{min-height:226px;padding:22px} .hero-copy{max-width:66%} .hero h1{font-size:clamp(25px,4vw,31px)} .hero p{font-size:13px;line-height:1.55} .robot.ai-core-visual{right:-28px;top:4px;transform:scale(.76);opacity:.68} .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .solutions{grid-template-columns:repeat(2,minmax(0,1fr))} .rightcol{grid-template-columns:1fr 1fr} .activity{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Mobile + small tablet */ @media(max-width:820px){ .app{display:block;min-height:100dvh} .main{width:100%;padding:10px 10px 18px} .topbar{position:sticky;top:0;z-index:30;background:linear-gradient(to bottom,var(--bg) 82%,transparent);backdrop-filter:blur(10px)} .sidebar{width:min(86vw,300px);padding:12px 12px 18px;overflow-y:auto;overscroll-behavior:contain} .sidebar .brand{position:sticky;top:-12px;z-index:3;background:color-mix(in srgb,var(--nav) 96%,transparent);backdrop-filter:blur(12px);padding-top:12px} .sidebar-bottom{display:block} .sidebar-bottom .upgrade{margin-top:10px} .search input{font-size:14px;min-width:0} .hero{min-height:auto;padding:20px 18px 22px} .hero-copy{max-width:100%;padding-right:0} .hero h1{font-size:clamp(24px,7vw,30px);line-height:1.14} .hero p{max-width:92%;font-size:12px} .hero-actions{gap:8px} .hero-actions button{min-height:42px;padding:10px 13px} .robot.ai-core-visual{display:none} .halo{display:none} .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .tool{padding:10px 6px} .split{grid-template-columns:1fr} .rightcol{display:flex;flex-direction:column} .solutions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .solution-photo{height:102px} .activity{grid-template-columns:repeat(2,minmax(0,1fr))} .footer-banner{padding:16px;gap:10px} .card-pad{padding:13px} .section-title{gap:8px;align-items:flex-start} .section-title h3{font-size:15px;line-height:1.25} .premium-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Mobile phones */ @media(max-width:560px){ .main{padding:8px 8px 16px} .topbar{gap:6px;padding-top:6px;padding-bottom:9px} .mobile-sidebar-toggle{width:40px;height:40px;flex-basis:40px} .search{min-height:40px;padding:8px 10px;border-radius:13px} .search span{font-size:13px} .search input{font-size:12px} .theme-button{width:42px;min-width:42px;min-height:40px;height:40px;border-radius:13px} .theme-emblem,.current-theme-n{width:29px;height:29px;flex-basis:29px} .theme-menu{top:58px;right:8px;width:calc(100vw - 16px);max-height:calc(100dvh - 70px);border-radius:15px} .theme-option{min-height:48px;padding:7px 9px} .theme-option .theme-name{font-size:12px} .theme-option .theme-sub{font-size:9px} .hero{padding:18px 15px 19px;border-radius:18px} .hero h1{font-size:clamp(22px,7.3vw,28px)} .hello{font-size:12px} .hero p{max-width:100%;font-size:11px;margin-bottom:14px} .hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%} .hero-actions button{width:100%;font-size:12px;padding:9px 8px} .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px} .tool b{font-size:10px} .tool small{font-size:8px} .solutions{grid-template-columns:1fr 1fr} .solution-photo{height:92px} .solution-copy{padding:8px} .activity{grid-template-columns:1fr} .mini{padding:10px} .account-activity .mini p{padding-left:0} .quick button{padding:10px;font-size:12px} .feed-item p{font-size:11px} .news-item{grid-template-columns:58px 1fr;gap:8px} .thumb{height:50px} .footer-banner{border-radius:16px} .chat-empty h3{font-size:clamp(26px,9vw,34px)} .chat-compose{left:8px;right:8px;bottom:8px} .chat-body{padding-left:10px;padding-right:10px} } /* Very narrow phones */ @media(max-width:390px){ .main{padding-left:6px;padding-right:6px} .search input::placeholder{font-size:11px} .hero-actions{grid-template-columns:1fr} .tool-grid{grid-template-columns:1fr 1fr} .tool{min-height:116px} .solutions{grid-template-columns:1fr} .solution{display:grid;grid-template-columns:110px 1fr;min-height:94px} .solution-photo{height:100%;min-height:94px} .solution-copy{display:flex;flex-direction:column;justify-content:center} .premium-tool-grid{grid-template-columns:1fr 1fr} .sidebar{width:90vw} } /* Touch targets + safe areas */ @media(hover:none) and (pointer:coarse){ button,.nav a,.theme-option{min-height:42px} .nav a:hover,.theme-option:hover,.tool:hover,.solution:hover{transform:none} } @supports(padding:max(0px)){ @media(max-width:820px){ .main{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(18px,env(safe-area-inset-bottom))} .sidebar{padding-left:max(12px,env(safe-area-inset-left));padding-bottom:max(18px,env(safe-area-inset-bottom))} } } /* ===== Lock left sidebar to viewport while main content scrolls ===== */ @media (min-width:821px){ .sidebar{ position:sticky !important; top:0 !important; align-self:start; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; overflow:hidden; } .sidebar .nav{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:none; } .sidebar .nav::-webkit-scrollbar{width:0;height:0} .sidebar-bottom{flex:0 0 auto;margin-top:auto} } @media (max-width:820px){ .sidebar{ position:fixed !important; top:0 !important; bottom:0 !important; height:100vh; height:100dvh; max-height:100dvh; } .sidebar .nav{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } } /* ===== HARD LOCK SIDEBAR v2 ===== Desktop: lock the entire left rail to the viewport. The page scrolls only in the main content area, not inside the sidebar. */ @media (min-width:821px){ .app{ display:block !important; padding-left:252px !important; transition:padding-left .34s cubic-bezier(.22,.82,.22,1); } .app.sidebar-collapsed{ padding-left:72px !important; } .sidebar{ position:fixed !important; left:0 !important; top:0 !important; bottom:0 !important; width:252px !important; height:100vh !important; height:100dvh !important; max-height:none !important; align-self:auto !important; z-index:60 !important; overflow:hidden !important; transform:none !important; transition:width .34s cubic-bezier(.22,.82,.22,1),padding .34s cubic-bezier(.22,.82,.22,1) !important; } .app.sidebar-collapsed .sidebar{ width:72px !important; } .sidebar .nav{ flex:0 0 auto !important; min-height:0 !important; overflow:visible !important; overscroll-behavior:none !important; } .sidebar-bottom{ margin-top:auto !important; flex:0 0 auto !important; } .main{ width:100% !important; min-width:0 !important; position:relative !important; } } @media (min-width:821px) and (max-height:760px){ .sidebar{padding-top:10px !important;padding-bottom:10px !important;gap:9px !important} .brand{padding-top:5px !important;padding-bottom:5px !important} .nav{gap:1px !important} .nav a{min-height:38px !important;padding-top:6px !important;padding-bottom:6px !important} .sidebar-bottom .upgrade{padding:9px !important} .sidebar-bottom .upgrade p{display:none !important} } @media (max-width:820px){ .app,.app.sidebar-collapsed{padding-left:0 !important} .sidebar{position:fixed !important;left:0 !important;top:0 !important;bottom:0 !important} } /* ===== Image protection / casual-download deterrence ===== */ img,.solution-photo,.thumb{ -webkit-user-drag:none; user-drag:none; -webkit-user-select:none; user-select:none; } img{pointer-events:none} .solution-photo,.thumb{position:relative} .solution-photo::before,.thumb::before{ content:""; position:absolute; inset:0; z-index:5; background:transparent; pointer-events:auto; } /* ========================================================= COMMUNITY & ACTIVITIES PAGE — dedicated view ========================================================= */ .community-view{display:none;min-width:0} .community-view.active{display:block} .community-shell{display:grid;gap:16px;min-width:0} .community-card{background:color-mix(in srgb,var(--card) 94%,transparent);border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));border-radius:20px;box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 7%,transparent);min-width:0;overflow:hidden} .community-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 20px 12px} .community-section-head h2{margin:0;color:var(--text);font-size:16px;line-height:1.25;display:flex;align-items:center;gap:8px} .community-head-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:13px} .community-link-btn{border:0;background:transparent;color:var(--accent);font:inherit;font-size:12px;font-weight:800;cursor:pointer;padding:5px 0} .community-top-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(280px,.74fr);gap:16px;align-items:start;min-width:0;max-width:100%} .community-events-card{padding-bottom:12px} .event-carousel-wrap{position:relative;padding:0 20px 2px;overflow:hidden;max-width:100%} .event-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc((100% - 48px)/5));gap:12px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;scroll-snap-type:x mandatory;padding:2px 2px 6px;max-width:100%;min-width:0;align-items:stretch} .event-track::-webkit-scrollbar{display:none} .event-card{position:relative;min-width:0;height:210px;border-radius:15px;overflow:hidden;scroll-snap-align:start;color:white;background-image:var(--event-img);background-size:cover;background-position:center center;background-repeat:no-repeat;background-color:transparent;box-shadow:0 8px 20px rgba(11,80,162,.14);isolation:isolate} .event-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,12,30,.015) 0%,rgba(2,12,30,.01) 28%,rgba(3,16,39,.035) 58%,rgba(3,16,39,.12) 100%);pointer-events:none} .event-purple{background-image:var(--event-img)} .event-teal{background-image:var(--event-img)} .event-indigo{background-image:var(--event-img)} .event-sky{background-image:var(--event-img)} .event-shade{position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(180deg,rgba(4,17,42,0),rgba(4,17,42,.04) 42%,rgba(4,17,42,.32) 100%);z-index:1} .event-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;padding:15px} .event-kicker{font-size:10px;font-weight:800;letter-spacing:.5px;opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.85),0 3px 8px rgba(0,0,0,.60)} .event-card h3{margin:8px 0 0;font-size:19px;line-height:1.26;text-shadow:0 1px 2px rgba(0,0,0,.90),0 4px 12px rgba(0,0,0,.68)} .event-tags{margin-top:auto;font-size:10px;font-weight:700;opacity:1;text-shadow:0 1px 2px rgba(0,0,0,.88),0 3px 8px rgba(0,0,0,.58)} .event-bottom{margin-top:9px;display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700} .event-bottom span{background:rgba(255,255,255,.9);color:#15324e;padding:6px 7px;border-radius:6px;white-space:nowrap} .event-bottom b{margin-left:auto;background:rgba(9,167,255,.94);padding:6px 7px;border-radius:6px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.38)} .event-purple .event-bottom b{background:#6b35cf}.event-teal .event-bottom b{background:#0ca6a8}.event-indigo .event-bottom b{background:#5055e6}.event-sky .event-bottom b{background:#318ddb} .event-arrow{position:absolute;top:50%;translate:0 -50%;z-index:8;width:40px;height:40px;border:1px solid color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.28));border-radius:50%;background:linear-gradient(145deg,color-mix(in srgb,var(--card) 82%,var(--accent) 18%),color-mix(in srgb,var(--panel2) 84%,var(--accent2) 16%));color:var(--accent);font-size:29px;font-weight:800;line-height:1;display:grid;place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.18),0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),0 0 18px color-mix(in srgb,var(--accent) 18%,transparent);cursor:pointer;backdrop-filter:blur(8px);transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease;user-select:none} .event-arrow:hover{transform:scale(1.08);background:linear-gradient(145deg,color-mix(in srgb,var(--accent2) 28%,var(--card)),color-mix(in srgb,var(--accent) 20%,var(--panel2)));border-color:color-mix(in srgb,var(--accent) 70%,rgba(255,255,255,.32));box-shadow:0 10px 26px rgba(0,0,0,.2),0 0 0 2px color-mix(in srgb,var(--accent) 20%,transparent),0 0 26px color-mix(in srgb,var(--accent) 30%,transparent)} .event-arrow:active{transform:scale(.94)} .event-arrow:focus-visible{outline:3px solid color-mix(in srgb,var(--accent2) 70%,white);outline-offset:3px} .event-prev{left:6px}.event-next{right:6px} .event-dots{display:flex;justify-content:center;gap:10px;padding-top:7px}.event-dots i{width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--text-muted) 25%,transparent)}.event-dots i.active{background:var(--accent)} .community-main-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(350px,1.02fr);gap:16px;align-items:start} .feed-title-row{border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)} .feed-sort{border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:999px;background:var(--card);color:var(--text);font:inherit;font-size:11px;font-weight:700;padding:7px 13px} .social-post{padding:15px 18px;border-bottom:1px solid color-mix(in srgb,var(--line) 80%,transparent)}.social-post:last-child{border-bottom:0} .post-head{display:flex;align-items:center;gap:9px;position:relative}.post-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;overflow:hidden;background:linear-gradient(135deg,var(--accent2),var(--accent));color:white;font-size:12px;font-weight:800}.post-avatar img{width:100%;height:100%;object-fit:cover}.brand-avatar{background:white;border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line))}.brand-avatar img{object-fit:contain;padding:4px}.avatar-letter{background:linear-gradient(135deg,#18b8f2,#047dcd)}.purple-avatar{background:linear-gradient(135deg,#8b5af4,#4d2a9d)} .post-owner{display:flex;flex-direction:column;line-height:1.25}.post-owner b{font-size:12px;color:var(--text)}.post-owner small{font-size:9px;color:var(--text-muted);margin-top:2px}.verified{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:50%;background:var(--accent);color:white;font-size:8px}.creator-mark{color:#8f5cf5} .post-badge{font-size:9px;font-weight:800;padding:4px 7px;border-radius:6px}.announce{background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent)}.question-badge{background:#e8fbef;color:#28a765}.post-menu{margin-left:auto;border:0;background:transparent;color:var(--text-muted);font-weight:800;letter-spacing:1px;cursor:pointer} .social-post>p,.post-with-media>p{font-size:11.5px;line-height:1.62;color:var(--text);margin:12px 0}.social-post p span{color:color-mix(in srgb,var(--text) 72%,var(--text-muted))}.social-post a{color:var(--accent);font-weight:700}.post-actions{display:flex;gap:22px;color:var(--text-muted);font-size:10px;align-items:center}.post-actions .bookmark{margin-left:auto}.post-with-media{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:13px;align-items:center}.post-gallery{display:grid;grid-template-columns:1fr 1fr;gap:4px;position:relative}.post-gallery img{width:100%;height:50px;object-fit:cover;border-radius:6px}.post-gallery span{position:absolute;right:4px;bottom:4px;width:38px;height:38px;border-radius:6px;background:rgba(7,19,38,.72);display:grid;place-items:center;color:white;font-size:11px;font-weight:800}.video-thumb{height:77px;border-radius:9px;overflow:hidden;position:relative}.video-thumb img{width:100%;height:100%;object-fit:cover}.video-thumb span{position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(3,22,48,.68);color:white;border:2px solid white;font-size:12px} .community-qa-card{padding-bottom:0}.question-feature{margin:0 14px 10px;padding:13px;border:1px solid color-mix(in srgb,var(--accent) 17%,var(--line));border-radius:13px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 5%,var(--card)),var(--card))}.question-title{display:flex;align-items:flex-start;gap:9px}.q-icon{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent2) 75%,var(--accent)));color:white;font-size:19px;font-weight:800;box-shadow:0 5px 12px color-mix(in srgb,var(--accent) 23%,transparent)}.question-title div{min-width:0;flex:1}.question-title h3{font-size:12.5px;line-height:1.35;margin:1px 0 2px;color:var(--text)}.question-title small{font-size:9px;color:var(--text-muted)}.question-title button{border:0;background:transparent;color:var(--accent)}.question-feature>p{font-size:10.5px;line-height:1.55;margin:9px 0;color:var(--text)}.answer-summary{display:flex;align-items:center;border-top:1px solid var(--line);padding-top:9px;font-size:9px;gap:8px}.answer-summary b{font-size:10px}.answer-summary .mini-faces{color:var(--accent);letter-spacing:-1px}.answer-summary a{margin-left:auto;color:var(--accent);font-weight:800} .qa-reply{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;padding:11px 16px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent);align-items:start}.reply-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#dff4ff;color:#1785c6;font-size:10px;font-weight:800}.blue-r{background:#dceaff;color:#4776d8}.pink-r{background:#f9e5ef;color:#d2649a}.qa-reply b{font-size:10px;color:var(--text)}.qa-reply b small{font-weight:500;color:var(--text-muted);margin-left:4px}.qa-reply p{font-size:10px;line-height:1.5;color:var(--text);margin:3px 0 0}.qa-reply>span:last-child{font-size:9px;color:var(--text-muted);margin-top:3px}.qa-all-btn,.calendar-all-btn{width:100%;border:0;border-top:1px solid var(--line);background:transparent;color:var(--accent);font:inherit;font-size:10.5px;font-weight:800;padding:12px;cursor:pointer} .community-side-stack{display:grid;gap:14px;min-width:0;max-width:100%}.side-community-card{border-radius:18px}.side-community-card .community-section-head{padding:15px 15px 10px}.side-community-card .community-section-head h2{font-size:13px}.trend-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:start;gap:8px;padding:9px 14px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent);font-size:9.5px;color:var(--text)}.trend-row span,.upcoming-row div{min-width:0}.trend-row i{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#ecf1f8;color:#5f7189;font-style:normal;font-weight:800}.trend-row .rank-hot{background:#ffe9e6;color:#ff4f35}.trend-row .rank-gold{background:#fff3d1;color:#e3a41f}.trend-row b{font-size:9px;color:var(--accent);white-space:nowrap} .upcoming-row{display:grid;grid-template-columns:49px minmax(0,1fr) 24px;gap:8px;align-items:center;padding:9px 13px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent)}.upcoming-row img{width:49px;height:43px;object-fit:cover;border-radius:7px}.upcoming-row b{display:block;font-size:9.5px;line-height:1.35;color:var(--text)}.upcoming-row small{display:block;margin-top:3px;font-size:8.5px;line-height:1.45;color:var(--text-muted)}.upcoming-row>span{width:23px;height:23px;border-radius:7px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));display:grid;place-items:center;color:var(--accent);font-size:9px}.active-faces{display:flex;align-items:center;padding:4px 14px 7px}.active-faces img,.active-faces span{width:34px;height:34px;border-radius:50%;border:2px solid var(--card);margin-right:-5px;object-fit:cover}.active-faces span{display:grid;place-items:center;background:linear-gradient(135deg,var(--accent2),var(--accent));color:white;font-size:9px;font-weight:800}.active-card>p{margin:0;padding:0 15px 14px;font-size:9.5px;color:var(--text)}.active-card>p i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#32c876;box-shadow:0 0 0 4px #e8fbf0;margin-right:7px} .community-view,.community-shell,.community-main-grid,.community-card,.community-feed-card,.community-qa-card{max-width:100%;min-width:0} @media (max-width:1480px){.event-track{grid-auto-columns:minmax(0,calc((100% - 36px)/4))}} @media (max-width:1240px){.community-top-grid{grid-template-columns:1fr}.community-main-grid{grid-template-columns:minmax(0,1.45fr) minmax(320px,1fr)}.community-side-stack{grid-template-columns:repeat(3,1fr)}.event-track{grid-auto-columns:minmax(0,calc((100% - 24px)/3))}} @media (max-width:930px){.community-top-grid,.community-main-grid{grid-template-columns:1fr}.community-side-stack{grid-template-columns:1fr 1fr}.active-card{grid-column:1/-1}.event-carousel-wrap{padding:0 16px}.event-track{grid-auto-columns:minmax(0,calc((100% - 12px)/2))}} @media (max-width:620px){.community-side-stack{grid-template-columns:1fr}.active-card{grid-column:auto}.event-card{height:205px}.community-section-head{padding-left:14px;padding-right:14px}.post-with-media{grid-template-columns:1fr}.post-gallery,.video-thumb{max-width:220px}.community-top-grid,.community-main-grid{gap:12px}.event-carousel-wrap{padding:0 10px}.event-track{grid-auto-columns:calc(100% - 2px);gap:10px}.event-prev{left:2px}.event-next{right:2px}} /* Community page: left content column + fixed right sidebar */ .community-page-grid{display:grid;grid-template-columns:minmax(0,2.72fr) minmax(280px,.74fr);gap:16px;align-items:start;min-width:0;max-width:100%} .community-left-column{display:grid;gap:16px;min-width:0;max-width:100%} .community-left-column .community-main-grid{display:grid;grid-template-columns:minmax(0,1.68fr) minmax(300px,1fr);gap:16px;align-items:start;min-width:0} .community-page-grid>.community-side-stack{grid-column:2;grid-row:1;align-self:start} @media (max-width:1240px){.community-page-grid{grid-template-columns:1fr}.community-page-grid>.community-side-stack{grid-column:1;grid-row:auto;grid-template-columns:repeat(3,1fr)}.community-left-column .community-main-grid{grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr)}} @media (max-width:930px){.community-left-column .community-main-grid{grid-template-columns:1fr}.community-page-grid>.community-side-stack{grid-template-columns:1fr 1fr}.community-page-grid>.community-side-stack .active-card{grid-column:1/-1}} @media (max-width:620px){.community-page-grid>.community-side-stack{grid-template-columns:1fr}.community-page-grid>.community-side-stack .active-card{grid-column:auto}.community-left-column,.community-page-grid{gap:12px}} /* ===== Community fill-height refinement ===== Keep the lower Q&A panel as tall as the feed, and let the right rail occupy the full height of the community content instead of ending early. */ @media (min-width:931px){ .community-left-column .community-main-grid{ align-items:stretch; } .community-left-column .community-feed-card, .community-left-column .community-qa-card{ height:100%; } .community-left-column .community-qa-card{ display:flex; flex-direction:column; } .community-left-column .community-qa-card .qa-all-btn{ margin-top:auto; } .community-page-grid{ align-items:stretch; } .community-page-grid>.community-side-stack{ align-self:stretch; height:100%; display:flex; flex-direction:column; } .community-page-grid>.community-side-stack .active-card{ flex:1 1 auto; min-height:170px; } } /* ===== Community content fill v2 ===== */ .qa-extra-zone{margin-top:4px;border-top:1px solid color-mix(in srgb,var(--line) 78%,transparent);padding:12px 14px 4px} .qa-extra-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}.qa-extra-head b{font-size:10.5px;color:var(--text)}.qa-extra-head span{font-size:8.5px;color:var(--text-muted)} .qa-topic-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 68%,transparent)}.qa-topic-row:last-of-type{border-bottom:0}.qa-topic-icon{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-size:11px;font-weight:800}.qa-topic-row b{display:block;font-size:9.5px;line-height:1.35;color:var(--text)}.qa-topic-row small{display:block;margin-top:2px;font-size:8px;color:var(--text-muted)}.qa-topic-row strong{color:var(--accent);font-size:16px;font-weight:700} .qa-tags-block{padding:10px 0 4px}.qa-tags-block>b{display:block;font-size:9.5px;color:var(--text);margin-bottom:7px}.qa-tags-block>div{display:flex;flex-wrap:wrap;gap:6px}.qa-tags-block span{padding:5px 8px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 17%,var(--line));background:color-mix(in srgb,var(--accent) 6%,var(--card));font-size:8.5px;color:var(--accent);font-weight:700} .online-list{display:grid;padding:2px 13px 8px}.online-member{display:grid;grid-template-columns:34px minmax(0,1fr) 8px;gap:8px;align-items:center;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}.online-member img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line))}.online-member b{display:block;font-size:9.5px;line-height:1.25;color:var(--text)}.online-member small{display:block;margin-top:2px;font-size:8px;line-height:1.25;color:var(--text-muted)}.online-member>i{width:7px;height:7px;border-radius:50%;background:#34cc78;box-shadow:0 0 0 3px #e8fbf0} .community-stats-mini{margin:2px 13px 13px;padding:10px;border-radius:12px;border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 5%,var(--card)),var(--card))}.community-stats-mini>b{display:block;font-size:9.5px;color:var(--text);margin-bottom:8px}.stats-mini-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.stats-mini-grid span{display:flex;flex-direction:column;padding:8px;border-radius:9px;background:color-mix(in srgb,var(--panel2) 76%,transparent);border:1px solid color-mix(in srgb,var(--line) 75%,transparent)}.stats-mini-grid strong{font-size:14px;color:var(--accent);line-height:1}.stats-mini-grid small{font-size:8px;color:var(--text-muted);margin-top:4px} @media (max-width:930px){.online-list{grid-template-columns:1fr 1fr;gap:0 12px}.community-stats-mini{margin-top:8px}} @media (max-width:620px){.online-list{grid-template-columns:1fr}.qa-topic-row{grid-template-columns:24px minmax(0,1fr) auto}.stats-mini-grid{grid-template-columns:repeat(2,1fr)}} /* ========================================================= Professional content entrance motion — no full-page fade Keeps the sidebar/background stable and animates only cards. ========================================================= */ .main{position:relative} .page-enter-item{ opacity:1; transform:translate3d(0,14px,0) scale(.985); filter:none; will-change:transform; } .page-enter-item.page-enter-active{ animation:ntPanelEnter .56s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--page-delay,0ms); } @keyframes ntPanelEnter{ 0%{transform:translate3d(0,14px,0) scale(.985)} 68%{transform:translate3d(0,-2px,0) scale(1.003)} 100%{transform:translate3d(0,0,0) scale(1)} } /* Event cards get a subtle sequential pop without hiding first. */ .event-card.page-enter-item{ transform:translate3d(0,12px,0) scale(.97); transform-origin:50% 70%; } .event-card.page-enter-item.page-enter-active{ animation-name:ntEventCardEnter; animation-duration:.62s; } @keyframes ntEventCardEnter{ 0%{transform:translate3d(0,12px,0) scale(.97)} 62%{transform:translate3d(0,-3px,0) scale(1.009)} 82%{transform:translate3d(0,1px,0) scale(.998)} 100%{transform:none} } @media(max-width:820px){ .page-enter-item{transform:translate3d(0,10px,0) scale(.99)} } @media(prefers-reduced-motion:reduce){ .page-enter-item,.page-enter-item.page-enter-active{opacity:1!important;transform:none!important;filter:none!important;animation:none!important} } /* ========================================================= Flicker-free cross-page navigation v3 Select the correct view before first paint and animate cards in CSS. ========================================================= */ html.page-home #dashboardView{display:grid!important} html.page-home #communityView{display:none!important} html.page-activities #dashboardView{display:none!important} html.page-activities #communityView{display:block!important} /* Keep the shell/sidebar/background stable. Only content cards animate. */ @keyframes ntFirstPaintPanel{ 0%{transform:translate3d(0,10px,0) scale(.992)} 70%{transform:translate3d(0,-1px,0) scale(1.001)} 100%{transform:none} } @keyframes ntFirstPaintEvent{ 0%{transform:translate3d(0,9px,0) scale(.976)} 64%{transform:translate3d(0,-2px,0) scale(1.006)} 100%{transform:none} } html.page-home #dashboardView .leftcol>.card, html.page-home #dashboardView .rightcol>.card{ animation:ntFirstPaintPanel .46s cubic-bezier(.16,1,.3,1) both; } html.page-home #dashboardView .leftcol>.card:nth-child(2), html.page-home #dashboardView .rightcol>.card:nth-child(2){animation-delay:45ms} html.page-home #dashboardView .leftcol>.card:nth-child(3), html.page-home #dashboardView .rightcol>.card:nth-child(3){animation-delay:80ms} html.page-home #dashboardView .leftcol>.card:nth-child(n+4), html.page-home #dashboardView .rightcol>.card:nth-child(n+4){animation-delay:110ms} html.page-activities #communityView .community-events-card, html.page-activities #communityView .community-main-grid>.community-card, html.page-activities #communityView .community-side-stack>.community-card{ animation:ntFirstPaintPanel .48s cubic-bezier(.16,1,.3,1) both; } html.page-activities #communityView .community-main-grid>.community-card:nth-child(2){animation-delay:55ms} html.page-activities #communityView .community-side-stack>.community-card:nth-child(2){animation-delay:70ms} html.page-activities #communityView .community-side-stack>.community-card:nth-child(3){animation-delay:100ms} html.page-activities #communityView .event-card{ animation:ntFirstPaintEvent .52s cubic-bezier(.16,1,.3,1) both; } html.page-activities #communityView .event-card:nth-child(1){animation-delay:35ms} html.page-activities #communityView .event-card:nth-child(2){animation-delay:70ms} html.page-activities #communityView .event-card:nth-child(3){animation-delay:105ms} html.page-activities #communityView .event-card:nth-child(4){animation-delay:140ms} html.page-activities #communityView .event-card:nth-child(5){animation-delay:175ms} /* Neutralize the old JS entrance helper if stale classes ever remain. */ .page-enter-item,.page-enter-item.page-enter-active{ opacity:1!important; filter:none!important; } @media(prefers-reduced-motion:reduce){ html.page-home #dashboardView .leftcol>.card, html.page-home #dashboardView .rightcol>.card, html.page-activities #communityView .community-events-card, html.page-activities #communityView .community-main-grid>.community-card, html.page-activities #communityView .community-side-stack>.community-card, html.page-activities #communityView .event-card{animation:none!important;transform:none!important} } /* ===== Same-page activity detail routing ===== */ .event-card[data-event-id],.upcoming-row[data-event-id]{cursor:pointer} .event-card[data-event-id]{ border:1px solid color-mix(in srgb,var(--accent) 14%,rgba(255,255,255,.14)); transition:transform .30s cubic-bezier(.2,.8,.2,1),box-shadow .32s cubic-bezier(.2,.8,.2,1),filter .30s ease,border-color .30s ease; } .event-card[data-event-id]::before{transition:background .28s ease,opacity .28s ease} .event-card[data-event-id] .event-shade{transition:height .28s ease,background .28s ease,opacity .28s ease} .event-card[data-event-id] .event-kicker, .event-card[data-event-id] h3, .event-card[data-event-id] .event-tags, .event-card[data-event-id] .event-bottom{transition:transform .28s ease,opacity .28s ease} .event-card[data-event-id] .event-content::after{ content:""; position:absolute; top:14px; right:14px; width:0; height:0; padding:0; border:0; opacity:0; pointer-events:none; } .event-card[data-event-id]:hover, .event-card[data-event-id]:focus-visible{ transform:translateY(-10px) scale(1.02); box-shadow:0 20px 34px rgba(8,69,145,.20),0 0 0 1px color-mix(in srgb,var(--accent) 46%,rgba(255,255,255,.18)),0 0 24px color-mix(in srgb,var(--accent) 26%,transparent),0 0 60px color-mix(in srgb,var(--accent) 18%,transparent); filter:saturate(1.08) brightness(1.03); border-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.20)); } .event-card[data-event-id]:hover::before, .event-card[data-event-id]:focus-visible::before{background:linear-gradient(180deg,rgba(2,12,30,.04) 0%,rgba(2,12,30,.02) 24%,rgba(3,16,39,.08) 56%,rgba(3,16,39,.20) 100%)} .event-card[data-event-id]:hover .event-shade, .event-card[data-event-id]:focus-visible .event-shade{height:48%;background:linear-gradient(180deg,rgba(4,17,42,0),rgba(4,17,42,.08) 22%,rgba(4,17,42,.54) 100%)} .event-card[data-event-id]:hover .event-kicker, .event-card[data-event-id]:focus-visible .event-kicker, .event-card[data-event-id]:hover h3, .event-card[data-event-id]:focus-visible h3{transform:translateY(-2px)} .event-card[data-event-id]:hover .event-tags, .event-card[data-event-id]:focus-visible .event-tags, .event-card[data-event-id]:hover .event-bottom, .event-card[data-event-id]:focus-visible .event-bottom{transform:translateY(-3px)} .event-card[data-event-id]:focus-visible,.upcoming-row[data-event-id]:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 65%,white);outline-offset:3px} .upcoming-row[data-event-id]{transition:background .18s ease,transform .18s ease} .upcoming-row[data-event-id]:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);transform:translateX(2px)} .event-detail-view{display:none;min-width:0;animation:eventDetailIn .32s cubic-bezier(.2,.8,.2,1) both} .event-detail-view.active{display:block} @keyframes eventDetailIn{from{opacity:.01;transform:translateY(10px)}to{opacity:1;transform:none}} .event-detail-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px} .event-back-btn{border:1px solid var(--line);background:var(--card);color:var(--text);height:40px;padding:0 15px;border-radius:12px;font:inherit;font-weight:800;cursor:pointer;box-shadow:0 5px 14px rgba(30,95,158,.08);transition:.18s ease} .event-back-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateX(-2px)} .event-detail-breadcrumb{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;min-width:0}.event-detail-breadcrumb b{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}.event-detail-breadcrumb i{font-style:normal;opacity:.55} .event-detail-card{overflow:hidden;border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:0 10px 30px rgba(28,93,160,.09)} .event-detail-hero{position:relative;min-height:330px;background-image:var(--detail-img);background-size:cover;background-position:center;display:flex;align-items:flex-end;isolation:isolate;overflow:hidden} .event-detail-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,14,34,.86) 0%,rgba(3,14,34,.64) 48%,rgba(3,14,34,.2) 100%),linear-gradient(0deg,rgba(2,13,31,.55),transparent 58%)} .event-detail-hero-copy{padding:38px 42px;color:#fff;max-width:770px}.event-detail-kicker{font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;opacity:.92}.event-detail-hero h1{font-size:clamp(30px,3.6vw,48px);line-height:1.12;margin:9px 0 12px;text-shadow:0 3px 18px rgba(0,0,0,.35)}.event-detail-hero-copy>p{font-size:15px;line-height:1.7;margin:0;color:rgba(255,255,255,.9);max-width:680px}.event-detail-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}.event-detail-pills span{padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(7px);font-size:12px;font-weight:800} .event-detail-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding:30px 34px 36px}.event-detail-main{min-width:0}.event-info-section+.event-info-section{border-top:1px solid var(--line);margin-top:25px;padding-top:25px}.event-info-section h2{font-size:18px;margin:0 0 12px}.event-info-section>p{font-size:13px;line-height:1.85;color:var(--muted);margin:0} .event-learn-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.event-learn-item{display:flex;gap:10px;align-items:flex-start;padding:13px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--card) 92%,var(--accent) 8%)}.event-learn-item i{display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:8px;background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);font-style:normal;font-weight:900}.event-learn-item span{font-size:12px;line-height:1.55;font-weight:700} .event-agenda{display:grid;gap:0}.event-agenda-row{display:grid;grid-template-columns:90px 16px 1fr;gap:12px;align-items:start;padding:0 0 16px}.event-agenda-row time{font-size:11px;font-weight:900;color:var(--accent);padding-top:2px}.event-agenda-dot{position:relative;width:10px;height:10px;border-radius:50%;background:var(--accent);margin-top:4px;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent)}.event-agenda-dot:after{content:"";position:absolute;width:1px;height:42px;top:12px;left:4px;background:var(--line)}.event-agenda-row:last-child .event-agenda-dot:after{display:none}.event-agenda-row b{display:block;font-size:12px;margin-bottom:3px}.event-agenda-row p{font-size:11px;line-height:1.55;margin:0;color:var(--muted)} .event-register-card{position:sticky;top:92px;padding:21px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--card) 92%,var(--accent) 8%),var(--card));box-shadow:0 10px 25px rgba(26,89,150,.08)}.event-register-label{font-size:10px;font-weight:900;color:var(--accent);letter-spacing:.06em}.event-register-card h3{font-size:18px;margin:6px 0 18px}.event-register-meta{display:grid;gap:12px;margin-bottom:18px}.event-register-meta>div{display:flex;gap:10px;align-items:center}.event-register-meta>div>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent);font-size:15px}.event-register-meta p{margin:0;display:grid;gap:2px}.event-register-meta small{color:var(--muted);font-size:10px}.event-register-meta b{font-size:11px}.event-register-btn,.event-share-btn{width:100%;height:42px;border-radius:11px;font:inherit;font-weight:900;cursor:pointer}.event-register-btn{border:0;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 24%,transparent)}.event-share-btn{border:1px solid var(--line);background:var(--card);color:var(--text);margin-top:9px}.event-register-note{font-size:9.5px;line-height:1.5;color:var(--muted);margin:12px 0 0;text-align:center} @media(max-width:980px){.event-detail-body{grid-template-columns:1fr}.event-detail-side{order:-1}.event-register-card{position:static}.event-detail-hero{min-height:290px}.event-detail-hero-copy{padding:30px}} @media(max-width:620px){.event-detail-topbar{align-items:flex-start;flex-direction:column}.event-detail-breadcrumb{display:none}.event-detail-hero{min-height:300px}.event-detail-hero-copy{padding:25px 20px}.event-detail-body{padding:20px 16px 25px;gap:18px}.event-learn-grid{grid-template-columns:1fr}.event-agenda-row{grid-template-columns:72px 14px 1fr}.event-back-btn{height:38px}.event-detail-hero h1{font-size:29px}} /* ===== Premium Event Detail Refresh 2026-09 ===== */ .event-detail-view{padding-top:2px} .event-detail-topbar{margin:0 0 12px} .event-back-btn{border:1px solid color-mix(in srgb,var(--line) 82%,var(--accent) 18%);background:color-mix(in srgb,var(--card) 95%,var(--accent) 5%);box-shadow:0 8px 22px rgba(34,106,180,.06)} .event-back-btn:hover{transform:translateX(-2px);border-color:color-mix(in srgb,var(--accent) 38%,var(--line));background:color-mix(in srgb,var(--card) 90%,var(--accent) 10%)} .event-detail-card{overflow:visible;border:0;background:transparent;box-shadow:none} .event-detail-hero{min-height:320px;border-radius:20px;box-shadow:0 18px 44px rgba(3,38,83,.18);border:1px solid rgba(255,255,255,.12);background-position:center} .event-detail-hero:after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 73% 48%,rgba(18,137,255,.14),transparent 31%),linear-gradient(180deg,transparent 65%,rgba(0,0,0,.12));pointer-events:none} .event-detail-overlay{background:linear-gradient(90deg,rgba(2,14,36,.92) 0%,rgba(2,14,36,.78) 39%,rgba(2,14,36,.36) 72%,rgba(2,14,36,.18) 100%),linear-gradient(0deg,rgba(0,14,35,.52),transparent 64%)} .event-detail-hero-copy{padding:36px 40px;max-width:760px} .event-detail-kicker{display:inline-flex;align-items:center;width:max-content;padding:7px 12px;border-radius:999px;background:rgba(16,113,255,.15);border:1px solid rgba(69,160,255,.22);color:#58b5ff;letter-spacing:.07em;box-shadow:inset 0 0 18px rgba(44,138,255,.08)} .event-detail-hero h1{font-size:clamp(31px,3.3vw,46px);margin:12px 0 10px;max-width:720px;letter-spacing:-.02em} .event-detail-hero-copy>p{font-size:14px;line-height:1.75;max-width:650px} .event-detail-pills{gap:9px;margin-top:18px}.event-detail-pills span{padding:8px 12px;background:rgba(6,27,54,.54);border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)} .event-detail-body{grid-template-columns:minmax(0,1fr) 300px;gap:24px;padding:18px 0 34px;align-items:start} .event-detail-main{display:grid;gap:12px} .event-info-section{position:relative;padding:20px 22px;border:1px solid color-mix(in srgb,var(--line) 84%,var(--accent) 16%);border-radius:17px;background:linear-gradient(145deg,color-mix(in srgb,var(--card) 97%,var(--accent) 3%),var(--card));box-shadow:0 9px 24px rgba(35,95,155,.055)} .event-info-section+.event-info-section{border-top:1px solid color-mix(in srgb,var(--line) 84%,var(--accent) 16%);margin-top:0;padding-top:20px} .event-info-section h2{position:relative;font-size:17px;margin:0 0 12px;padding-left:38px;min-height:28px;display:flex;align-items:center} .event-info-section h2:before{position:absolute;left:0;top:0;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(145deg,var(--accent),var(--accent2));color:#fff;font-size:13px;box-shadow:0 6px 15px color-mix(in srgb,var(--accent) 24%,transparent)} .event-info-section:nth-child(1) h2:before{content:"▤"}.event-info-section:nth-child(2) h2:before{content:"✦"}.event-info-section:nth-child(3) h2:before{content:"▣"} .event-info-section>p{font-size:12.5px;line-height:1.85} .event-learn-grid{gap:9px}.event-learn-item{align-items:center;padding:11px 12px;border-radius:12px;background:color-mix(in srgb,var(--card) 95%,var(--accent) 5%);transition:.18s ease}.event-learn-item:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 32%,var(--line));box-shadow:0 7px 16px rgba(31,99,164,.06)} .event-learn-item i{flex-basis:22px;height:22px;border-radius:50%;font-size:11px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 85%,#fff),var(--accent));color:#fff} .event-agenda-row{grid-template-columns:76px 18px 1fr;gap:10px;padding:0 0 15px}.event-agenda-row time{font-size:11px}.event-agenda-dot{width:9px;height:9px;margin-top:5px}.event-agenda-dot:after{left:4px;height:40px;background:color-mix(in srgb,var(--accent) 35%,var(--line))}.event-agenda-row b{font-size:12px}.event-agenda-row p{font-size:10.5px} .event-detail-side{display:grid;gap:12px} .event-register-card,.event-speaker-card{border:1px solid color-mix(in srgb,var(--line) 82%,var(--accent) 18%);background:linear-gradient(150deg,color-mix(in srgb,var(--card) 96%,var(--accent) 4%),var(--card));box-shadow:0 11px 28px rgba(28,91,151,.07)} .event-register-card{top:88px;padding:20px;border-radius:18px}.event-register-label{letter-spacing:.07em}.event-register-card h3{font-size:20px;margin:7px 0 17px}.event-register-meta{gap:11px}.event-register-meta>div>span{width:36px;height:36px;border-radius:11px;background:color-mix(in srgb,var(--accent) 11%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 11%,transparent)} .event-register-btn,.event-share-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:44px}.event-register-btn{background:linear-gradient(90deg,#0b77ff,#1abef0);box-shadow:0 9px 20px rgba(16,138,238,.22)}.event-register-btn:hover{filter:brightness(1.03);transform:translateY(-1px)}.event-share-btn:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--card) 94%,var(--accent) 6%)} .event-speaker-card{padding:18px;border-radius:18px}.event-side-heading{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:14px}.event-side-heading>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)} .event-speaker-profile{display:flex;align-items:center;gap:12px}.event-speaker-avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;flex:0 0 58px;background:linear-gradient(145deg,var(--accent),var(--accent2));color:#fff;font-weight:950;font-size:17px;letter-spacing:.03em;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 22%,transparent);border:3px solid color-mix(in srgb,var(--card) 78%,white 22%)}.event-speaker-profile h4{margin:0 0 3px;font-size:13px}.event-speaker-profile p{margin:0;color:var(--accent);font-size:10.5px;font-weight:800}.event-speaker-bio{font-size:10.5px;line-height:1.65;color:var(--muted);margin:13px 0 0} @media(max-width:980px){.event-detail-body{grid-template-columns:1fr}.event-detail-side{order:0;grid-template-columns:repeat(2,minmax(0,1fr))}.event-register-card{position:static}.event-speaker-card{align-self:stretch}} @media(max-width:700px){.event-detail-side{grid-template-columns:1fr}.event-detail-hero{border-radius:16px;min-height:305px}.event-detail-hero-copy{padding:26px 21px}.event-info-section{padding:17px}.event-detail-body{padding-top:14px}.event-detail-main{gap:10px}} /* Event registration CTA follows the active theme */ .event-register-btn{ background:linear-gradient(90deg,var(--accent),var(--accent2)) !important; box-shadow:0 9px 20px color-mix(in srgb,var(--accent) 25%,transparent) !important; transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; } .event-register-btn:hover{ filter:brightness(1.06); transform:translateY(-1px); box-shadow:0 11px 24px color-mix(in srgb,var(--accent) 32%,transparent) !important; } /* Theme-aware Upcoming Events heading + View All control */ .community-events-card .community-section-head h2{ color:var(--text); } .community-events-card .community-head-icon{ color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); border:1px solid color-mix(in srgb,var(--accent) 24%,transparent); box-shadow:0 5px 16px color-mix(in srgb,var(--accent) 12%,transparent); } .community-events-card .community-link-btn{ color:var(--accent); border:1px solid transparent; border-radius:9px; padding:6px 9px; transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease; } .community-events-card .community-link-btn:hover{ color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,transparent); border-color:color-mix(in srgb,var(--accent) 22%,transparent); box-shadow:0 5px 16px color-mix(in srgb,var(--accent) 10%,transparent); transform:translateY(-1px); } .community-events-card .community-link-btn:active{ transform:translateY(0); } /* ===== All upcoming activities view (same Activities.html route) ===== */ .all-activities-view{display:none;min-width:0;padding-top:2px;animation:eventDetailIn .28s cubic-bezier(.2,.8,.2,1) both} .all-activities-view.active{display:block} .all-activities-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 14px} .all-activities-shell{border:1px solid color-mix(in srgb,var(--line) 82%,var(--accent) 18%);border-radius:24px;background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 86%,var(--accent) 14%),var(--panel));box-shadow:0 18px 42px rgba(14,33,64,.10);overflow:hidden} .all-activities-head{padding:24px 26px 20px;border-bottom:1px solid color-mix(in srgb,var(--line) 88%,var(--accent) 12%);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%,color-mix(in srgb,var(--accent2) 8%,transparent))} .all-activities-title-wrap{display:grid;gap:7px} .all-activities-eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:11px;font-weight:950;letter-spacing:.16em;text-transform:uppercase} .all-activities-title-wrap h1{margin:0;color:var(--text);font-size:22px;line-height:1.18;display:flex;flex-wrap:wrap;align-items:center;gap:10px} .all-activities-title-wrap h1 small{font-size:12px;font-weight:800;color:var(--muted);padding:5px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--card))} .all-activities-title-wrap p{margin:0;color:var(--muted);font-size:12px;line-height:1.7;max-width:900px} .all-activities-actions{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-top:16px} .all-activities-filters{display:flex;flex-wrap:wrap;gap:8px} .activity-chip,.activity-sort-btn{height:34px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));background:color-mix(in srgb,var(--card) 95%,var(--accent) 5%);color:var(--text);font:inherit;font-size:11px;font-weight:800;padding:0 14px;cursor:default;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} .activity-chip.active{border-color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 22%,transparent)} .activity-sort-btn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;color:var(--muted)} .all-activities-list{padding:14px;display:grid;gap:12px} .all-event-row{display:grid;grid-template-columns:92px 74px minmax(0,1fr) 158px;gap:14px;align-items:center;padding:12px 14px;border:1px solid color-mix(in srgb,var(--line) 84%,var(--accent) 16%);border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--card) 97%,var(--accent) 3%),color-mix(in srgb,var(--panel) 88%,var(--accent) 12%));box-shadow:0 10px 24px rgba(10,26,52,.08);cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease} .all-event-row:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 48%,var(--line));box-shadow:0 16px 30px color-mix(in srgb,var(--accent) 10%,transparent)} .all-event-row:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 30%,transparent);outline-offset:2px} .all-event-thumb{width:92px;height:92px;border-radius:18px;overflow:hidden;background-image:linear-gradient(180deg,rgba(5,16,38,.08),rgba(5,16,38,.42)),var(--event-img);background-size:cover;background-position:center;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));box-shadow:inset 0 1px 0 rgba(255,255,255,.08)} .all-event-datebox{width:74px;height:92px;border-radius:18px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 84%,white 16%),var(--accent2));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 24px color-mix(in srgb,var(--accent) 24%,transparent);text-align:center} .all-event-datebox strong{display:block;font-size:32px;line-height:1;font-weight:950;letter-spacing:-.02em} .all-event-datebox span{display:block;margin-top:6px;font-size:12px;font-weight:900;letter-spacing:.04em} .all-event-content{min-width:0;display:grid;gap:7px} .all-event-tags{display:flex;flex-wrap:wrap;gap:6px} .all-event-tag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));background:color-mix(in srgb,var(--card) 95%,var(--accent) 5%);font-size:10px;font-weight:900;color:var(--muted);letter-spacing:.04em;text-transform:uppercase} .all-event-tag.active{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 28%,var(--line))} .all-event-content h3{margin:0;font-size:24px;line-height:1.16;color:var(--text)} .all-event-content p{margin:0;color:var(--muted);font-size:12px;line-height:1.65} .all-event-meta{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:2px} .all-event-meta span{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--muted);padding:7px 10px;border-radius:999px;background:color-mix(in srgb,var(--accent) 7%,transparent);border:1px solid color-mix(in srgb,var(--accent) 12%,transparent)} .all-event-side{display:flex;align-items:center;justify-content:flex-end} .all-event-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:132px;height:42px;padding:0 16px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;font-size:12px;font-weight:900;box-shadow:0 10px 22px color-mix(in srgb,var(--accent) 24%,transparent)} .all-event-cta i{font-style:normal;font-size:14px;line-height:1} @media(max-width:1180px){.all-event-row{grid-template-columns:84px 68px minmax(0,1fr)}.all-event-side{grid-column:1/-1;justify-content:flex-start;padding-left:166px}.all-event-content h3{font-size:21px}} @media(max-width:860px){.all-activities-topbar{align-items:flex-start;flex-direction:column}.all-activities-head{padding:22px 20px 18px}.all-activities-actions{align-items:flex-start}.activity-sort-btn{margin-left:0}.all-event-row{grid-template-columns:76px 62px minmax(0,1fr);gap:12px;padding:12px}.all-event-thumb{width:76px;height:76px;border-radius:15px}.all-event-datebox{width:62px;height:76px;border-radius:15px}.all-event-datebox strong{font-size:26px}.all-event-datebox span{font-size:11px;margin-top:4px}.all-event-content h3{font-size:18px}.all-event-side{padding-left:150px}} @media(max-width:640px){.all-activities-title-wrap h1{font-size:19px}.all-activities-list{padding:10px}.all-event-row{grid-template-columns:1fr;gap:12px}.all-event-thumb{width:100%;height:170px}.all-event-datebox{width:100%;height:auto;flex-direction:row;gap:8px;padding:10px 14px;justify-content:flex-start}.all-event-datebox strong{font-size:28px}.all-event-datebox span{margin-top:0}.all-event-side,.activity-sort-btn{width:100%}.all-event-side{padding-left:0}.all-event-cta{width:100%}} /* ===== Global link reset: remove underline + prevent visited color shifts ===== */ a, a:link, a:visited, a:hover, a:active{ text-decoration:none; } /* Keep navigation colors stable after clicking */ .nav a, .nav a:link, .nav a:visited, .nav a:hover, .nav a:active{ color:var(--text); } /* Section links keep the active theme color */ .section-title a, .section-title a:link, .section-title a:visited, .section-title a:hover, .section-title a:active, .news-trending-head a, .news-trending-head a:link, .news-trending-head a:visited, .news-trending-head a:hover, .news-trending-head a:active{ color:var(--accent); } /* Clickable news rows never turn browser-blue/purple */ .news-item, .news-item:link, .news-item:visited, .news-item:hover, .news-item:active{ color:var(--text); text-decoration:none; } /* Tool cards (including AI Chat) keep their normal card text color */ a.tool, a.tool:link, a.tool:visited, a.tool:hover, a.tool:active{ color:var(--text); text-decoration:none; } /* Hero CTA is still fully clickable, but its text never changes after visit */ .hero-actions a.primary, .hero-actions a.primary:link, .hero-actions a.primary:visited, .hero-actions a.primary:hover, .hero-actions a.primary:active{ color:#16120d; text-decoration:none; } /* Related-news links keep the designed text color */ .news-side-card a, .news-side-card a:link, .news-side-card a:visited, .news-side-card a:hover, .news-side-card a:active{ color:var(--text); text-decoration:none; } /* === AI Tools Hub page === */ .tools-page{padding-bottom:22px}.tools-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:14px;align-items:start}.tools-primary{min-width:0;display:flex;flex-direction:column;gap:14px}.tools-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:82px}.tools-hero{min-height:274px;position:relative;overflow:hidden;background:linear-gradient(118deg,#0475ee 0%,#123abf 34%,#211b88 62%,#071c42 100%);border-color:rgba(74,176,255,.55)}.tools-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 9% 10%,rgba(45,248,255,.30),transparent 21%),radial-gradient(circle at 83% 20%,rgba(90,51,255,.4),transparent 35%),linear-gradient(135deg,transparent 35%,rgba(255,255,255,.05));pointer-events:none}.tools-hero-copy{position:relative;z-index:3;width:61%;padding:24px 28px;color:#f8fbff}.tools-kicker{display:inline-flex;padding:5px 10px;border-radius:999px;background:rgba(3,24,82,.45);border:1px solid rgba(95,222,255,.55);font-size:11px;font-weight:800}.tools-hero h1{font-size:34px;line-height:1.15;margin:10px 0 8px;letter-spacing:-.5px}.tools-hero h1 em{font-style:normal;color:#3ff0ff}.tools-hero p{margin:0;max-width:700px;font-size:13px;line-height:1.65;color:rgba(245,250,255,.9)}.tools-hero-actions{display:flex;gap:10px;margin-top:17px}.tools-hero-actions a{text-decoration:none;font-size:12px;font-weight:800;padding:10px 16px;border-radius:10px}.tools-btn-primary{color:#061326;background:linear-gradient(135deg,#58f6ff,#59a8ff)}.tools-btn-secondary{color:#fff;border:1px solid rgba(101,219,255,.75);background:rgba(2,21,65,.28)}.tools-benefits{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;font-size:10px;color:#cbe8ff}.tools-benefits span:first-child{color:#72efff}.tools-hero-art{position:absolute;right:0;top:0;width:41%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.tools-hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1633a8 0%,transparent 22%,transparent 76%,rgba(1,13,44,.55) 100%);z-index:2}.tools-hero-art img{width:178px;height:222px;object-fit:cover;object-position:center;border-radius:28px;z-index:3;box-shadow:0 0 0 2px rgba(95,230,255,.4),0 26px 70px rgba(0,0,0,.45);transform:none}.art-orbit{position:absolute;border:1px solid rgba(101,235,255,.46);border-radius:50%;z-index:1}.orbit-one{width:300px;height:130px;transform:rotate(24deg)}.orbit-two{width:230px;height:250px;transform:rotate(-27deg)}.art-card{position:absolute;z-index:4;width:52px;height:52px;border:1px solid rgba(115,226,255,.65);border-radius:13px;background:linear-gradient(145deg,rgba(14,81,183,.85),rgba(20,16,100,.8));display:grid;place-items:center;font-weight:900;color:#a5f4ff;box-shadow:0 14px 30px rgba(0,0,0,.3)}.art-code{left:6%;top:24%;transform:rotate(-8deg)}.art-image{right:6%;top:18%;color:#ff89f7}.art-play{right:4%;bottom:23%;color:#7cf2ff}.art-caption{position:absolute;right:10px;bottom:8px;z-index:5;font-size:10px;color:#e8f3ff;text-align:right;transform:none}.art-caption b{color:#6cf2ff}.tools-tabs{padding:8px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.tools-tabs::-webkit-scrollbar{display:none}.tools-tabs a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;white-space:nowrap;padding:9px 13px;border-radius:10px;font-size:11px;font-weight:700}.tools-tabs .tab-ico{width:16px;height:16px;flex:0 0 16px;display:grid;place-items:center;color:currentColor}.tools-tabs .tab-ico svg{width:16px;height:16px;display:block}.tools-tabs a:hover,.tools-tabs a.active{color:var(--text);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,transparent),color-mix(in srgb,var(--accent2) 12%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 50%,var(--line))}.tools-section{scroll-margin-top:86px}.tools-section-head{display:flex;align-items:center;justify-content:space-between;margin:0 4px 9px}.tools-section-head h2{font-size:15px;margin:0}.tools-section-head a{font-size:11px;color:var(--accent);text-decoration:none}.tools-card-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.ai-tool-card{position:relative;min-height:170px;padding:14px;border:1px solid var(--line);border-radius:13px;background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel2) 36%,transparent));text-decoration:none;color:var(--text);box-shadow:0 12px 24px rgba(0,0,0,.08);transition:.2s ease;overflow:hidden}.ai-tool-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 65%,var(--line));box-shadow:0 18px 34px rgba(0,0,0,.16)}.ai-tool-card h3{font-size:13px;margin:10px 0 5px}.ai-tool-card p{font-size:10px;line-height:1.45;color:var(--muted);min-height:44px;margin:0 0 8px}.ai-tool-card b{display:block;border:1px solid var(--line);border-radius:8px;padding:7px 8px;font-size:9px;text-align:center;color:var(--text);font-weight:700}.ai-ticon,.new-icon,.rec-ico{display:grid;place-items:center;color:#fff;font-weight:900;box-shadow:inset 0 0 18px rgba(255,255,255,.22),0 7px 18px rgba(0,0,0,.22)}.ai-ticon{width:40px;height:40px;border-radius:11px;font-size:18px}.blue{background:linear-gradient(135deg,#2aa8ff,#1260ff)}.purple{background:linear-gradient(135deg,#e248ff,#7a32ff)}.orange{background:linear-gradient(135deg,#ff9347,#ff514c)}.green{background:linear-gradient(135deg,#28ddb0,#00a878)}.violet{background:linear-gradient(135deg,#786dff,#5932d8)}.pink{background:linear-gradient(135deg,#ff5ec3,#be32c8)}.tool-badge{position:absolute;right:10px;top:10px;padding:3px 6px;border-radius:6px;color:#fff;font-size:8px;font-weight:900}.tool-badge.hot{background:#ff3159}.tool-badge.new{background:#8347ff}.tools-new-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.tools-new-grid article{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.new-icon{width:38px;height:38px;border-radius:10px;flex:0 0 38px}.new-icon svg,.rec-ico svg{width:20px;height:20px;display:block;color:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.26))}.tools-new-grid h3{font-size:11px;margin:0 0 3px}.tools-new-grid h3 small{font-size:7px;background:#8244ff;color:#fff;border-radius:4px;padding:2px 4px}.tools-new-grid p{font-size:9px;margin:0;color:var(--muted)}.side-panel{padding:13px}.side-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.side-title h3{font-size:13px;margin:0}.side-title a{font-size:9px;text-decoration:none;color:var(--accent)}.recommend-panel>a,.guide-panel>a{display:flex;align-items:center;gap:9px;padding:9px 2px;border-top:1px solid var(--line);text-decoration:none;color:var(--text)}.recommend-panel>a:first-of-type{border-top:0}.rec-ico{width:34px;height:34px;border-radius:9px;flex:0 0 34px}.recommend-panel>a div{min-width:0;flex:1}.recommend-panel b{font-size:10px;display:block}.recommend-panel small{font-size:8px;line-height:1.35;color:var(--muted);display:block;margin-top:2px}.recommend-panel i,.guide-panel i{font-style:normal;margin-left:auto;color:var(--muted)}.premium-side{position:relative;overflow:hidden;padding:16px 18px;background:linear-gradient(135deg,#164fe5 0%,#232ab4 46%,#7229ce 100%);border-color:rgba(93,196,255,.45);color:white}.premium-side::before{content:"";position:absolute;right:-34px;top:-26px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(121,243,255,.14),rgba(121,243,255,0) 72%);pointer-events:none}.premium-side h3{font-size:17px;line-height:1.3;margin:2px 0 10px;padding-left:40px;max-width:220px}.premium-bolt{position:absolute;left:14px;top:18px;width:28px;height:28px;display:grid;place-items:center;color:#a8f7ff;filter:drop-shadow(0 0 12px rgba(83,201,255,.78))}.premium-bolt svg{width:28px;height:28px;display:block}.premium-side ul{list-style:none;padding:0;margin:0 0 12px}.premium-side li{font-size:9px;margin:5px 0;color:#e5efff}.premium-side button{border:0;border-radius:9px;padding:9px 13px;font-size:10px;font-weight:900;background:linear-gradient(135deg,#73e9ff,#d06cff);color:#0e1535;position:relative;z-index:2}.guide-panel>a span{width:24px;height:24px;border-radius:7px;border:1px solid var(--line);display:grid;place-items:center;font-size:10px;color:var(--accent);background:color-mix(in srgb,var(--panel) 82%,transparent)}.guide-panel>a span svg{width:14px;height:14px;display:block}.guide-panel>a b{font-size:9px;line-height:1.35;flex:1}.guide-panel>a:first-of-type{border-top:0}.nav a[title="เครื่องมือ AI"].active .ico{filter:drop-shadow(0 0 7px var(--accent))} @media(max-width:1250px){.tools-layout{grid-template-columns:minmax(0,1fr) 280px}.tools-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tools-hero-copy{width:65%}.tools-hero-art{width:38%}} @media(max-width:1000px){.tools-layout{grid-template-columns:1fr}.tools-side{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.guide-panel{grid-column:1/-1}.tools-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:760px){.tools-hero{min-height:410px}.tools-hero-copy{width:100%;padding:20px;z-index:5}.tools-hero h1{font-size:26px}.tools-hero-art{width:100%;height:180px;top:auto;bottom:0;opacity:.55}.tools-hero-art img{width:120px;height:150px}.tools-benefits{gap:10px}.tools-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tools-new-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tools-side{grid-template-columns:1fr}.guide-panel{grid-column:auto}} @media(max-width:480px){.tools-card-grid,.tools-new-grid{grid-template-columns:1fr}.tools-hero-actions{flex-direction:column;align-items:stretch}.tools-hero-actions a{text-align:center}.tools-benefits{font-size:9px}.ai-tool-card{min-height:150px}.ai-tool-card p{min-height:0}} /* === Premium coded AI tool icons === */ .ai-ticon{ position:relative; overflow:hidden; isolation:isolate; width:48px;height:48px;border-radius:15px;font-size:0; border:1px solid rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -10px 22px rgba(2,9,35,.24),0 10px 22px rgba(0,0,0,.28),0 0 18px color-mix(in srgb,var(--accent) 18%,transparent); } .ai-ticon::before{ content:"";position:absolute;inset:-36% -30%;z-index:-1; background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.38),transparent 20%), conic-gradient(from 210deg,transparent 0 18%,rgba(255,255,255,.14) 25%,transparent 37% 70%,rgba(255,255,255,.13) 78%,transparent 86%); transform:rotate(-13deg); } .ai-ticon::after{ content:"";position:absolute;inset:7px;border-radius:11px; border:1px solid rgba(255,255,255,.10);pointer-events:none; } .ai-ticon svg{width:31px;height:31px;display:block;color:#fff;filter:drop-shadow(0 0 5px rgba(255,255,255,.34));} .ai-ticon.blue{background:radial-gradient(circle at 27% 18%,#69e7ff 0 4%,transparent 28%),linear-gradient(145deg,#1179ff 0%,#1558e7 48%,#3422a8 100%)} .ai-ticon.purple{background:radial-gradient(circle at 25% 18%,#ff91ff 0 3%,transparent 27%),linear-gradient(145deg,#ba40ff 0%,#7e37e7 46%,#3b2da9 100%)} .ai-ticon.orange{background:radial-gradient(circle at 26% 20%,#ffd1a1 0 3%,transparent 28%),linear-gradient(145deg,#ff9a49 0%,#ff6258 48%,#c63881 100%)} .ai-ticon.green{background:radial-gradient(circle at 25% 20%,#9fffe4 0 3%,transparent 28%),linear-gradient(145deg,#25dfbd 0%,#00b99a 48%,#087aa7 100%)} .ai-ticon.violet{background:radial-gradient(circle at 26% 18%,#c9c2ff 0 3%,transparent 27%),linear-gradient(145deg,#8f7cff 0%,#6951ef 48%,#4c2cc5 100%)} .ai-ticon.pink{background:radial-gradient(circle at 25% 18%,#ffc4ef 0 3%,transparent 27%),linear-gradient(145deg,#ff67cc 0%,#d942b8 50%,#8434bf 100%)} .ai-tool-card:hover .ai-ticon{transform:translateY(-2px) scale(1.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 26px rgba(0,0,0,.3),0 0 24px color-mix(in srgb,var(--accent) 28%,transparent)} .ai-ticon{transition:transform .2s ease,box-shadow .2s ease} @media(max-width:700px){.ai-ticon{width:44px;height:44px;border-radius:14px}.ai-ticon svg{width:28px;height:28px}} /* === Direct Chat page paint: prevent Dashboard flash before app.js runs === */ html.page-chat #dashboardView, html.page-chat #homeFooter, html.page-chat #homeThemeStrip{display:none!important} html.page-chat #chatView{display:flex!important;flex-direction:column;gap:0;min-height:calc(100vh - 108px)} html.page-chat .nav a[data-nav="dashboard"]{background:transparent!important;box-shadow:none!important} /* === UI interaction lock: prevent accidental drag / text selection === */ body, .app, .sidebar, .main, .tools-page, .tools-page *{ -webkit-user-select:none; user-select:none; } input, textarea, [contenteditable="true"], .chat-input, .chat-input *{ -webkit-user-select:text!important; user-select:text!important; } img, a, svg, button, .card, .ai-tool-card, .tools-tabs a{ -webkit-user-drag:none; user-drag:none; } /* ========================================================= NEXTONTECH Professional Motion Pass Adds motion only to elements that previously had no dedicated animation. ========================================================= */ :root{--nt-motion-ease:cubic-bezier(.16,1,.3,1)} /* Lightweight entrance motion for unanimated content only. */ .nt-pro-reveal{ opacity:1; transform:translate3d(0,12px,0) scale(.992); transform-origin:50% 70%; will-change:transform; } .nt-pro-reveal.nt-pro-in{ animation:ntProRise .58s var(--nt-motion-ease) both; animation-delay:var(--nt-pro-delay,0ms); } @keyframes ntProRise{ 0%{transform:translate3d(0,12px,0) scale(.992)} 68%{transform:translate3d(0,-1.5px,0) scale(1.002)} 100%{transform:none} } /* AI tools cards: refined lift and icon response. */ .ai-tool-card{ transition:transform .28s var(--nt-motion-ease),border-color .28s ease,box-shadow .28s ease,background .28s ease; } .ai-tool-card::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background:linear-gradient(125deg,rgba(255,255,255,.10),transparent 24%,transparent 72%,color-mix(in srgb,var(--accent) 8%,transparent)); opacity:0;transition:opacity .28s ease; } .ai-tool-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent) 48%,var(--line));box-shadow:0 18px 34px rgba(0,0,0,.12),0 0 26px color-mix(in srgb,var(--accent) 10%,transparent)} .ai-tool-card:hover::after{opacity:1} .ai-tool-card:hover .ai-ticon{transform:translateY(-2px) scale(1.045)} .ai-tool-card:active{transform:translateY(-1px) scale(.995)} /* Small cards and side rows. */ .tools-new-grid article,.recommend-panel>a,.guide-panel>a,.news-item,.qa-topic-row,.online-member,.stats-mini-grid span{ transition:transform .24s var(--nt-motion-ease),background .24s ease,border-color .24s ease,box-shadow .24s ease; } .tools-new-grid article:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 38%,var(--line));box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 8%,transparent)} .tools-new-grid article:hover .new-icon{transform:scale(1.06) rotate(-2deg)} .new-icon,.rec-ico{transition:transform .24s var(--nt-motion-ease),filter .24s ease,box-shadow .24s ease} .recommend-panel>a:hover,.guide-panel>a:hover,.news-item:hover,.qa-topic-row:hover,.online-member:hover{transform:translateX(3px)} .recommend-panel>a:hover .rec-ico,.guide-panel>a:hover>span{transform:scale(1.06)} .recommend-panel>a:hover i,.guide-panel>a:hover i{transform:translateX(3px);color:var(--accent)} .recommend-panel i,.guide-panel i{transition:transform .22s var(--nt-motion-ease),color .22s ease} /* Category tabs get a precise tactile response. */ .tools-tabs a{position:relative;transition:transform .22s var(--nt-motion-ease),background .22s ease,color .22s ease,box-shadow .22s ease} .tools-tabs a:hover{transform:translateY(-2px)} .tools-tabs a:active{transform:translateY(0) scale(.98)} .tools-tabs .tab-ico{transition:transform .24s var(--nt-motion-ease)} .tools-tabs a:hover .tab-ico{transform:scale(1.08)} /* Global row and button polish without changing layout. */ button,a,.nav .ico,.profile,.theme-button,.sidebar-toggle,.mobile-sidebar-toggle{ -webkit-tap-highlight-color:transparent; } .nav a:hover .ico{transform:scale(1.06)} .nav .ico{transition:transform .22s var(--nt-motion-ease),filter .22s ease} .profile{transition:transform .22s var(--nt-motion-ease),box-shadow .22s ease,border-color .22s ease} .profile:hover{transform:translateY(-1px);box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 8%,transparent)} .search:focus-within{transform:translateY(-1px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 46%,var(--line))} /* Premium block receives only a calm ambient motion. */ .premium-side{background-size:160% 160%;animation:ntPremiumAmbient 10s ease-in-out infinite alternate} @keyframes ntPremiumAmbient{from{background-position:0% 50%}to{background-position:100% 50%}} .premium-bolt{animation:ntBoltPulse 3.8s ease-in-out infinite} @keyframes ntBoltPulse{0%,100%{filter:drop-shadow(0 0 9px rgba(83,201,255,.58));transform:scale(1)}50%{filter:drop-shadow(0 0 14px rgba(127,239,255,.82));transform:scale(1.06)}} /* Avoid adding movement to touch devices where hover has no meaning. */ @media (hover:none){ .ai-tool-card:hover,.tools-new-grid article:hover,.recommend-panel>a:hover,.guide-panel>a:hover,.news-item:hover,.qa-topic-row:hover,.online-member:hover,.tools-tabs a:hover,.profile:hover{transform:none} } @media(max-width:820px){ .nt-pro-reveal{transform:translate3d(0,8px,0) scale(.996)} } @media(prefers-reduced-motion:reduce){ .nt-pro-reveal,.nt-pro-reveal.nt-pro-in{animation:none!important;transform:none!important} .premium-side,.premium-bolt{animation:none!important} } /* === Chat page: single live layer, no compositing flicker === */ html.page-chat,html.page-chat body{view-transition-name:none!important} html.page-chat #chatView, html.page-chat #chatView *{backface-visibility:hidden} html.page-chat #chatView{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;filter:none!important} html.page-chat #chatView .reveal-motion, html.page-chat #chatView .page-enter-item, html.page-chat #chatView .nt-pro-reveal, html.page-chat #chatView .nt-pro-in{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;filter:none!important} html.page-chat .chat-suggestion, html.page-chat .chat-compose-box, html.page-chat .chat-send-btn{will-change:auto} /* === Chat hard isolation: prevent any previous/hidden view from visually compositing underneath === */ html.page-chat,html.page-chat body{background:var(--bg)!important;overflow-x:hidden} html.page-chat *{view-transition-name:none!important} html.page-chat .motion-bg{display:none!important} html.page-chat .main{ position:relative!important; z-index:1!important; isolation:isolate!important; min-height:100vh!important; background:linear-gradient(135deg,var(--bg),var(--bg2))!important; } html.page-chat #chatView{ position:relative!important; z-index:2!important; isolation:isolate!important; contain:paint!important; display:flex!important; flex-direction:column!important; background:linear-gradient(135deg,var(--bg),var(--bg2))!important; } html.page-chat #chatView::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg,var(--bg),var(--bg2)); pointer-events:none; } html.page-chat .chat-surface{position:relative!important;z-index:1!important} html.page-chat .reveal-motion,html.page-chat .motion-hover{transform:none!important;filter:none!important;opacity:1!important} /* === Sidebar hover-state fix: inactive items must never look selected === */ .nav a:not(.active):hover{ background:color-mix(in srgb,var(--accent) 4%,transparent) !important; box-shadow:none !important; font-weight:inherit !important; } .nav a:not(.active):hover::after{content:none !important;display:none !important} .nav a:not(.active):focus:not(:focus-visible){ background:transparent !important; box-shadow:none !important; outline:none !important; } .nav a:not(.active):active{ background:color-mix(in srgb,var(--accent) 6%,transparent) !important; box-shadow:none !important; } /* Keep only the current page visibly selected. */ .nav a.active{ background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--accent2) 10%,transparent)) !important; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,var(--line)) !important; } /* === Stable cross-page first paint === */ html,body,.app{visibility:visible!important;opacity:1!important} /* === Performance smoothing pass === Keep the visual style, but avoid expensive continuous repaints. */ .motion-orb{ filter:none!important; mix-blend-mode:normal!important; opacity:calc(var(--fx-alpha) * .62)!important; will-change:transform; } .motion-grid{opacity:.11!important;animation-duration:34s!important} .fx-particle{ box-shadow:0 0 7px color-mix(in srgb,var(--accent) 48%,transparent)!important; animation-timing-function:linear; } .reveal-motion{ filter:none!important; transform:translate3d(0,10px,0) scale(.995)!important; transition:opacity .46s cubic-bezier(.2,.75,.25,1),transform .46s cubic-bezier(.2,.75,.25,1)!important; } .reveal-motion.in-view{transform:translate3d(0,0,0) scale(1)!important} .card,.tool,.solution,.mini,.quick button,.theme-button,.search{will-change:auto!important} .card.motion-hover,.tool.motion-hover,.solution.motion-hover,.mini.motion-hover{transform:none!important} .ai-tool-card,.tools-new-grid article,.recommend-panel>a,.guide-panel>a,.news-item,.qa-topic-row,.online-member,.tools-tabs a,.nav a,.profile{ backface-visibility:hidden; transform:translateZ(0); } .ai-tool-card:hover{transform:translate3d(0,-2px,0)!important;box-shadow:0 12px 24px rgba(0,0,0,.10)!important} .tools-new-grid article:hover{transform:translate3d(0,-1px,0)!important;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 6%,transparent)!important} .recommend-panel>a:hover,.guide-panel>a:hover,.news-item:hover,.qa-topic-row:hover,.online-member:hover{transform:translate3d(2px,0,0)!important} .tools-tabs a:hover{transform:translate3d(0,-1px,0)!important} .profile:hover{transform:none!important} .search:focus-within{transform:none!important} .nt-pro-reveal{transform:translate3d(0,8px,0) scale(.997)!important;will-change:auto!important} .nt-pro-reveal.nt-pro-in{animation-duration:.42s!important} .premium-side{animation-duration:16s!important} .premium-bolt{animation-duration:5.2s!important} .nav a.active::after{animation-duration:2.4s!important} /* Reduce continuous decorative motion when the tab/window is not actively interacted with. */ @media (max-width:1000px){ .motion-grid{display:none!important} .motion-orb{opacity:calc(var(--fx-alpha) * .42)!important} } @media (hover:none),(pointer:coarse){ .motion-ripple{display:none!important} .ai-tool-card,.tools-new-grid article,.recommend-panel>a,.guide-panel>a,.tools-tabs a,.nav a,.profile{transform:none!important} } /* === Smooth standalone-page navigation === Keep the shared shell visually stable and animate only page content. This avoids the "hard cut" between News / Tools / Chat / Activities. */ :root{ --nt-page-out-ms: 85ms; --nt-page-in-ms: 160ms; } .main > :not(.topbar){ transform:translate3d(0,0,0); backface-visibility:hidden; } html.nt-page-leave .main > :not(.topbar){ opacity:.68; transform:translate3d(0,4px,0) scale(.9985); transition: opacity var(--nt-page-out-ms) ease, transform var(--nt-page-out-ms) cubic-bezier(.4,0,1,1); pointer-events:none; } html.nt-page-enter .main > :not(.topbar){ animation:ntPageContentIn var(--nt-page-in-ms) cubic-bezier(.2,.75,.25,1) both; } @keyframes ntPageContentIn{ from{ opacity:.72; transform:translate3d(0,4px,0) scale(.9985); } to{ opacity:1; transform:translate3d(0,0,0) scale(1); } } @media (prefers-reduced-motion: reduce){ html.nt-page-leave .main > :not(.topbar), html.nt-page-enter .main > :not(.topbar){ animation:none!important; transition:none!important; opacity:1!important; transform:none!important; } } /* === Solutions Hub page === */ .nav-ico-solutions svg{width:22px;height:22px}.solutions-page{display:flex;flex-direction:column;gap:14px;padding-bottom:24px}.solutions-hero{min-height:235px;position:relative;overflow:hidden;background:linear-gradient(118deg,#0e77e8 0%,#2445c6 42%,#5529c7 100%);border-color:rgba(78,188,255,.42)}.solutions-hero-copy{position:relative;z-index:2;width:67%;padding:28px}.solutions-kicker{display:inline-flex;padding:5px 10px;border-radius:999px;border:1px solid rgba(126,231,255,.45);background:rgba(3,24,82,.28);font-size:10px;font-weight:800;color:#dffaff}.solutions-hero h1{font-size:32px;line-height:1.15;margin:10px 0 8px;color:white}.solutions-hero p{font-size:13px;line-height:1.7;color:rgba(246,250,255,.88);margin:0;max-width:760px}.solutions-hero-actions{display:flex;gap:10px;margin-top:18px}.solutions-hero-visual{position:absolute;right:0;top:0;width:33%;height:100%;display:grid;place-items:center}.solution-orb{position:absolute;border:1px solid rgba(128,238,255,.32);border-radius:50%}.solution-orb.one{width:230px;height:135px;transform:rotate(28deg)}.solution-orb.two{width:170px;height:210px;transform:rotate(-24deg)}.solution-people-icon{width:108px;height:108px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(70,229,255,.2),rgba(131,77,255,.2));border:1px solid rgba(163,235,255,.4);box-shadow:0 24px 60px rgba(0,0,0,.22)}.solution-people-icon svg{width:74px;height:74px;color:#b7f7ff}.solution-groups-wrap{scroll-margin-top:86px}.solutions-page-head{display:flex;justify-content:space-between;align-items:end;margin:2px 4px 10px}.solutions-page-head h2{font-size:18px;margin:3px 0 0}.solutions-page-head p{font-size:10px;color:var(--muted);margin:0}.mini-label{font-size:9px;color:var(--accent);font-weight:800}.solution-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.solution-page-card{display:grid;grid-template-columns:112px 1fr;align-items:stretch;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--panel);color:var(--text);text-align:left;cursor:pointer;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}.solution-page-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}.solution-page-card.active{border-color:color-mix(in srgb,var(--accent2) 68%,var(--accent));box-shadow:0 0 0 1px rgba(255,255,255,.05),0 18px 38px rgba(0,0,0,.14)}.solution-page-card img{width:112px;height:104px;object-fit:cover}.solution-page-card span{display:flex;flex-direction:column;justify-content:center;padding:13px}.solution-page-card b{font-size:12px;margin-bottom:5px}.solution-page-card small{font-size:9px;line-height:1.45;color:var(--muted)}.solution-detail{padding:18px;scroll-margin-top:88px}.solution-detail-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.solution-detail-head h2{font-size:22px;margin:8px 0 6px}.solution-detail-head p{font-size:11px;line-height:1.6;color:var(--muted);margin:0;max-width:680px}.solution-detail-actions{display:flex;gap:9px;flex-wrap:wrap}.solution-detail-actions a{text-decoration:none;font-size:10px;font-weight:800;padding:9px 13px;border-radius:10px}.solution-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-top:15px}.solution-detail-grid article{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(255,255,255,.025)}.detail-icon{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 45%,transparent),color-mix(in srgb,var(--accent2) 32%,transparent));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));font-size:9px;font-weight:900;margin-bottom:9px}.solution-detail-grid h3{font-size:12px;margin:0 0 8px}.solution-detail-grid ul{margin:0;padding-left:17px;color:var(--muted);font-size:10px;line-height:1.75}@media(max-width:1100px){.solution-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.solutions-hero-copy{width:72%}.solutions-hero-visual{width:30%}}@media(max-width:760px){.solutions-hero{min-height:330px}.solutions-hero-copy{width:100%;padding:20px}.solutions-hero h1{font-size:26px}.solutions-hero-visual{opacity:.24;width:55%;right:-40px}.solution-page-grid{grid-template-columns:1fr}.solution-detail-head{flex-direction:column}.solution-detail-grid{grid-template-columns:1fr}.solution-page-card{grid-template-columns:96px 1fr}.solution-page-card img{width:96px;height:96px}} /* === Solutions page redesign: clean professional hub === */ .solutions-page{display:flex;flex-direction:column;gap:14px;padding-bottom:26px} .solutions-hero{min-height:240px;position:relative;overflow:hidden;background:linear-gradient(120deg,#0a74e8 0%,#173dbb 42%,#5226cc 100%);border-color:rgba(93,190,255,.45);box-shadow:0 20px 60px rgba(5,20,70,.16)} .solutions-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 10%,rgba(82,235,255,.22),transparent 24%),radial-gradient(circle at 90% 30%,rgba(169,82,255,.24),transparent 34%);pointer-events:none} .solutions-hero-copy{position:relative;z-index:3;width:65%;padding:30px 32px;color:#fff} .solutions-kicker{display:inline-flex;padding:5px 10px;border-radius:999px;border:1px solid rgba(135,237,255,.5);background:rgba(4,28,85,.34);font-size:10px;font-weight:800;color:#e6fbff} .solutions-hero h1{font-size:36px;line-height:1.08;margin:12px 0 8px;color:#fff;letter-spacing:-.5px} .solutions-hero p{font-size:13px;line-height:1.7;color:rgba(246,250,255,.9);margin:0;max-width:720px} .solutions-hero-actions{display:flex;gap:10px;margin-top:18px} .solutions-hero-visual{position:absolute;right:0;top:0;width:37%;height:100%;display:grid;place-items:center;z-index:2} .solution-orb{position:absolute;border:1px solid rgba(136,239,255,.32);border-radius:50%}.solution-orb.one{width:280px;height:150px;transform:rotate(23deg)}.solution-orb.two{width:190px;height:230px;transform:rotate(-21deg)} .solution-people-icon{width:122px;height:122px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 32% 25%,#5ccaff,transparent 40%),linear-gradient(145deg,#285df3,#6430d4);border:1px solid rgba(183,239,255,.44);box-shadow:0 22px 60px rgba(22,23,100,.34),inset 0 0 30px rgba(255,255,255,.08)} .solution-people-icon svg{width:78px;height:78px;color:#e4fbff} .hero-float{position:absolute;padding:8px 11px;border-radius:12px;border:1px solid rgba(148,234,255,.28);background:rgba(3,20,68,.28);backdrop-filter:blur(6px);font-size:10px;color:#dff8ff;line-height:1.3}.float-a{left:0;top:42px;transform:rotate(-4deg)}.float-b{right:18px;bottom:28px;max-width:110px} .solution-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;padding:0;overflow:hidden;scroll-margin-top:86px} .solution-tab{display:flex;align-items:center;gap:10px;min-width:0;padding:15px 14px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer;text-align:left;transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease}.solution-tab:last-child{border-right:0}.solution-tab:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--text)}.solution-tab.active{color:var(--text);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent),color-mix(in srgb,var(--accent2) 11%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--accent2) 65%,var(--accent))} .solution-tab-icon{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;font-size:18px;color:#dff9ff;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 42%,transparent),color-mix(in srgb,var(--accent2) 28%,transparent));border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line))}.solution-tab span:last-child{min-width:0;display:flex;flex-direction:column}.solution-tab b{font-size:11px;color:currentColor;white-space:nowrap}.solution-tab small{font-size:8px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px} .solution-tab-icon,.value-icon,.example-thumb{position:relative;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px rgba(5,18,42,.24)} .solution-tab-icon::after,.value-icon::after,.example-thumb::after{content:"";position:absolute;inset:auto auto 65% 58%;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),transparent 72%);pointer-events:none} .solution-tab-icon svg,.value-icon svg,.example-thumb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .solution-tab-icon.is-business{color:#7bd7ff;background:linear-gradient(145deg,rgba(52,182,255,.24),rgba(115,104,255,.14));border-color:rgba(98,195,255,.32)} .solution-tab-icon.is-student{color:#9de1ff;background:linear-gradient(145deg,rgba(88,205,255,.22),rgba(87,112,255,.12));border-color:rgba(133,212,255,.3)} .solution-tab-icon.is-university{color:#bb9dff;background:linear-gradient(145deg,rgba(162,108,255,.22),rgba(79,128,255,.12));border-color:rgba(177,128,255,.3)} .solution-tab-icon.is-creator{color:#ff8fd4;background:linear-gradient(145deg,rgba(255,94,181,.24),rgba(123,94,255,.12));border-color:rgba(255,141,211,.32)} .solution-tab-icon.is-freelance{color:#86eff5;background:linear-gradient(145deg,rgba(71,237,211,.18),rgba(84,132,255,.12));border-color:rgba(128,240,239,.3)} .solution-tab-icon.is-employee{color:#8ee6bf;background:linear-gradient(145deg,rgba(49,226,156,.2),rgba(84,132,255,.12));border-color:rgba(126,232,191,.3)} .value-icon{display:grid;place-items:center} .value-icon svg{width:20px;height:20px} .tasks-icon{color:#59e2ff;background:linear-gradient(145deg,rgba(53,210,255,.18),rgba(35,117,184,.12));border-color:rgba(89,226,255,.45)} .tools-icon{color:#cb8bff;background:linear-gradient(145deg,rgba(186,103,255,.18),rgba(83,49,176,.12));border-color:rgba(203,139,255,.45)} .results-icon{color:#58efba;background:linear-gradient(145deg,rgba(56,214,150,.18),rgba(18,110,82,.12));border-color:rgba(88,239,186,.45)} .example-thumb{position:relative} .example-thumb svg{width:26px;height:26px} .example-thumb.icon-chart,.example-thumb.icon-research{color:#6fd7ff} .example-thumb.icon-megaphone,.example-thumb.icon-proposal,.example-thumb.icon-email{color:#ff9acb} .example-thumb.icon-document,.example-thumb.icon-sop{color:#a4b8ff} .example-thumb.icon-chatbot,.example-thumb.icon-meeting,.example-thumb.icon-workflow{color:#73f0c8} .example-thumb.icon-book,.example-thumb.icon-translate,.example-thumb.icon-slides,.example-thumb.icon-portfolio{color:#b996ff} .example-thumb.icon-quiz,.example-thumb.icon-target,.example-thumb.icon-idea{color:#ffd47b} .example-thumb.icon-image,.example-thumb.icon-video,.example-thumb.icon-calendar{color:#7fe0ff} .solution-showcase{display:grid;grid-template-columns:1.55fr .82fr .82fr .82fr;gap:12px;align-items:stretch} .solution-profile{position:relative;display:grid;grid-template-columns:1fr 42%;min-height:244px;overflow:hidden;border-color:color-mix(in srgb,var(--accent) 20%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--panel-solid) 88%,transparent),color-mix(in srgb,var(--panel) 96%,var(--accent) 4%))} .solution-profile::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 54%,rgba(3,13,40,.02) 70%,rgba(3,13,40,.2) 100%);pointer-events:none} .solution-profile-copy{position:relative;z-index:2;padding:23px 22px}.solution-profile-copy h2{font-size:31px;line-height:1;margin:8px 0 8px}.solution-profile-copy p{margin:0;font-size:12px;line-height:1.65;color:var(--muted);max-width:440px}.solution-quote{margin-top:20px;padding-left:16px;border-left:3px solid var(--accent);font-size:10px;line-height:1.55;color:color-mix(in srgb,var(--text) 72%,var(--muted))} .solution-profile-photo{position:relative;overflow:hidden;min-height:244px}.solution-profile-photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:opacity .2s ease,transform .4s ease}.solution-profile:hover .solution-profile-photo img{transform:scale(1.025)} .solution-value{padding:18px 16px;min-height:244px;position:relative;overflow:hidden}.solution-value::before{content:"";position:absolute;inset:auto -30px -55px auto;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,currentColor 0%,transparent 68%);opacity:.08}.solution-value h3{font-size:14px;margin:10px 0 12px}.solution-value ul{margin:0;padding:0;list-style:none;color:var(--muted);font-size:10px;line-height:1.55}.solution-value li{position:relative;padding-left:17px;margin:8px 0}.solution-value li::before{content:"✓";position:absolute;left:0;top:0;color:currentColor;font-weight:900}.value-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:18px;border:1px solid currentColor;background:rgba(255,255,255,.04)} .blue-panel{color:#3bdcf8;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 88%,#07436c 12%),color-mix(in srgb,var(--panel-solid) 92%,transparent))}.purple-panel{color:#bd70ff;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 88%,#38207a 12%),color-mix(in srgb,var(--panel-solid) 92%,transparent))}.green-panel{color:#4ce0ae;background:linear-gradient(145deg,color-mix(in srgb,var(--panel) 88%,#07533e 12%),color-mix(in srgb,var(--panel-solid) 92%,transparent))}.solution-value h3{color:var(--text)}.solution-value ul{color:var(--muted)} .solution-examples{display:flex;flex-direction:column;gap:10px}.solutions-page-head{display:flex;justify-content:space-between;align-items:end;margin:0 4px}.solutions-page-head h2{font-size:17px;margin:3px 0 0}.solutions-page-head a{text-decoration:none;font-size:10px;color:var(--accent)} .example-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.example-card{display:flex;align-items:stretch;min-height:112px;overflow:hidden}.example-thumb{width:86px;flex:0 0 86px;display:grid;place-items:center;font-size:27px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 22%,var(--panel)),color-mix(in srgb,var(--accent2) 18%,var(--panel)));color:color-mix(in srgb,var(--accent2) 72%,white)}.example-card div{padding:13px 12px}.example-card b{font-size:11px}.example-card p{font-size:9px;line-height:1.5;color:var(--muted);margin:5px 0 8px}.example-card small{display:inline-flex;padding:3px 7px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);font-size:8px} .solution-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 22px;overflow:hidden;position:relative;background:linear-gradient(110deg,color-mix(in srgb,var(--panel) 88%,#0a2b70 12%),color-mix(in srgb,var(--panel) 72%,#4a22ad 28%));border-color:color-mix(in srgb,var(--accent) 28%,var(--line))}.solution-cta::after{content:"";position:absolute;right:-30px;bottom:-90px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(90,187,255,.22),transparent 68%)}.solution-cta span{font-size:9px;color:var(--accent2);font-weight:800}.solution-cta h3{font-size:17px;margin:4px 0}.solution-cta p{font-size:10px;color:var(--muted);margin:0}.solution-cta-actions{display:flex;gap:10px;position:relative;z-index:2}.solution-cta-actions a{text-decoration:none;padding:10px 14px;border-radius:10px;font-size:10px;font-weight:800} @media(max-width:1320px){.solution-showcase{grid-template-columns:1.3fr 1fr 1fr}.green-panel{grid-column:2/4}.solution-profile{grid-row:span 2}.solution-tabs{grid-template-columns:repeat(3,1fr)}.solution-tab:nth-child(3){border-right:0}.solution-tab:nth-child(-n+3){border-bottom:1px solid var(--line)}} @media(max-width:980px){.solutions-hero-copy{width:72%}.solutions-hero-visual{width:34%;opacity:.65}.solution-showcase{grid-template-columns:1fr 1fr}.solution-profile{grid-column:1/-1;grid-row:auto}.green-panel{grid-column:auto}.example-grid{grid-template-columns:repeat(2,1fr)}.solution-cta{align-items:flex-start;flex-direction:column}} @media(max-width:720px){.solutions-hero{min-height:330px}.solutions-hero-copy{width:100%;padding:22px}.solutions-hero h1{font-size:28px}.solutions-hero-visual{width:100%;height:145px;top:auto;bottom:0;opacity:.3}.hero-float{display:none}.solution-tabs{display:flex;overflow-x:auto;scrollbar-width:none}.solution-tabs::-webkit-scrollbar{display:none}.solution-tab{min-width:180px;border-bottom:0!important}.solution-showcase{grid-template-columns:1fr}.solution-profile{grid-template-columns:1fr;min-height:auto}.solution-profile-photo{height:190px;min-height:0}.solution-value{min-height:auto}.example-grid{grid-template-columns:1fr}.solution-cta-actions{width:100%}.solution-cta-actions a{flex:1;text-align:center}} /* === Solutions readability + refined motion === */ .solutions-page .tools-btn-primary, .solutions-page .tools-btn-secondary, .solutions-page .solution-tab, .solutions-page .solution-cta-actions a{ -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; } .solutions-page .solutions-hero-actions a{ position:relative; display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:10px 18px; border-radius:12px; font-size:12px; font-weight:900; line-height:1.15; letter-spacing:.01em; text-decoration:none; overflow:hidden; isolation:isolate; transform:translateZ(0); transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease,background .22s ease,color .22s ease; } .solutions-page .solutions-hero-actions .tools-btn-primary{ color:#041329!important; background:linear-gradient(135deg,#7ff7ff 0%,#55cfff 46%,#6c8cff 100%)!important; border:1px solid rgba(191,250,255,.78); box-shadow:0 10px 28px rgba(27,162,255,.30),inset 0 1px 0 rgba(255,255,255,.72); text-shadow:none; } .solutions-page .solutions-hero-actions .tools-btn-secondary{ color:#ffffff!important; background:rgba(5,31,91,.64)!important; border:1px solid rgba(149,227,255,.64)!important; box-shadow:0 10px 28px rgba(5,16,58,.22),inset 0 1px 0 rgba(255,255,255,.10); text-shadow:0 1px 2px rgba(0,0,0,.28); } .solutions-page .solutions-hero-actions a::before{ content:""; position:absolute; inset:-35% auto -35% -45%; width:34%; z-index:-1; transform:skewX(-18deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent); opacity:0; pointer-events:none; } .solutions-page .solutions-hero-actions a:hover{ transform:translateY(-2px); } .solutions-page .solutions-hero-actions .tools-btn-primary:hover{ box-shadow:0 15px 34px rgba(27,162,255,.40),0 0 0 1px rgba(255,255,255,.22) inset; } .solutions-page .solutions-hero-actions .tools-btn-secondary:hover{ background:rgba(8,43,118,.78)!important; border-color:rgba(176,239,255,.84)!important; box-shadow:0 14px 32px rgba(5,16,58,.30),0 0 18px rgba(90,206,255,.12); } .solutions-page .solutions-hero-actions a:hover::before{opacity:1;animation:solutionButtonSheen .68s ease forwards} .solutions-page .solutions-hero-actions a:active{transform:translateY(0) scale(.985)} .solutions-page .solutions-hero-copy{ animation:solutionHeroIn .52s cubic-bezier(.2,.8,.2,1) both; } .solutions-page .solutions-hero-visual{ animation:solutionVisualIn .65s cubic-bezier(.2,.8,.2,1) .06s both; } .solutions-page .solution-people-icon{ animation:solutionPeopleFloat 5.6s ease-in-out infinite; will-change:transform; } .solutions-page .solution-orb.one{animation:solutionOrbitOne 11s linear infinite} .solutions-page .solution-orb.two{animation:solutionOrbitTwo 14s linear infinite reverse} .solutions-page .hero-float{animation:solutionBadgeFloat 4.8s ease-in-out infinite} .solutions-page .hero-float.float-b{animation-delay:-2.2s} .solutions-page .solution-tab{ transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s cubic-bezier(.2,.8,.2,1); } .solutions-page .solution-tab:hover{transform:translateY(-1px)} .solutions-page .solution-tab-icon{ transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,filter .26s ease; } .solutions-page .solution-tab:hover .solution-tab-icon, .solutions-page .solution-tab.active .solution-tab-icon{ transform:translateY(-1px) scale(1.06); filter:saturate(1.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 26px rgba(21,112,255,.24),0 0 18px currentColor; } .solutions-page .solution-value, .solutions-page .example-card, .solutions-page .solution-profile{ transition:transform .26s cubic-bezier(.2,.8,.2,1),border-color .26s ease,box-shadow .26s ease; } .solutions-page .solution-value:hover, .solutions-page .example-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--accent) 42%,var(--line)); box-shadow:0 18px 40px rgba(0,0,0,.14); } .solutions-page .value-icon, .solutions-page .example-thumb svg{ transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease; } .solutions-page .solution-value:hover .value-icon{transform:translateY(-2px) scale(1.06)} .solutions-page .example-card:hover .example-thumb svg{transform:scale(1.10);filter:drop-shadow(0 0 8px currentColor)} .solutions-page .solution-cta{ animation:solutionCtaGlow 5.5s ease-in-out infinite; } @keyframes solutionButtonSheen{from{left:-45%}to{left:125%}} @keyframes solutionHeroIn{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}} @keyframes solutionVisualIn{from{opacity:0;transform:translate3d(14px,0,0) scale(.98)}to{opacity:1;transform:none}} @keyframes solutionPeopleFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}} @keyframes solutionOrbitOne{from{transform:rotate(28deg)}to{transform:rotate(388deg)}} @keyframes solutionOrbitTwo{from{transform:rotate(-24deg)}to{transform:rotate(336deg)}} @keyframes solutionBadgeFloat{0%,100%{translate:0 0}50%{translate:0 -4px}} @keyframes solutionCtaGlow{0%,100%{box-shadow:0 0 0 rgba(70,120,255,0)}50%{box-shadow:0 16px 42px rgba(70,120,255,.12)}} @media (prefers-reduced-motion:reduce){ .solutions-page .solutions-hero-copy, .solutions-page .solutions-hero-visual, .solutions-page .solution-people-icon, .solutions-page .solution-orb.one, .solutions-page .solution-orb.two, .solutions-page .hero-float, .solutions-page .solution-cta{ animation:none!important; } .solutions-page .solutions-hero-actions a, .solutions-page .solution-tab, .solutions-page .solution-tab-icon, .solutions-page .solution-value, .solutions-page .example-card, .solutions-page .value-icon, .solutions-page .example-thumb svg{ transition:none!important; } } /* ===== Sidebar overflow fix + theme-aware hover scrollbar ===== Header stays fixed, center navigation scrolls, Premium stays pinned at bottom. Scrollbar is visually hidden until the pointer enters the navigation area. */ @media (min-width:821px){ .sidebar{ display:flex !important; flex-direction:column !important; overflow:hidden !important; } .sidebar > .brand{ flex:0 0 auto !important; } .sidebar .nav{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain !important; scrollbar-gutter:stable; padding-right:4px; margin-right:-4px; /* Firefox: invisible normally, theme color on hover */ scrollbar-width:thin; scrollbar-color:transparent transparent; } .sidebar .nav:hover{ scrollbar-color:color-mix(in srgb,var(--accent) 82%,var(--accent2)) transparent; } /* Chromium / Edge / Safari */ .sidebar .nav::-webkit-scrollbar{ width:6px !important; height:6px !important; } .sidebar .nav::-webkit-scrollbar-track{ background:transparent; border-radius:999px; } .sidebar .nav::-webkit-scrollbar-thumb{ background:transparent; border-radius:999px; border:1px solid transparent; background-clip:padding-box; min-height:34px; } .sidebar .nav:hover::-webkit-scrollbar-thumb{ background:linear-gradient(180deg, color-mix(in srgb,var(--accent2) 92%,white 8%), color-mix(in srgb,var(--accent) 92%,var(--accent2) 8%) ); border-color:color-mix(in srgb,var(--nav) 56%,transparent); box-shadow:0 0 10px color-mix(in srgb,var(--accent) 42%,transparent); } .sidebar .nav:hover::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, color-mix(in srgb,var(--accent2) 78%,white 22%), color-mix(in srgb,var(--accent) 78%,white 22%) ); } .sidebar-bottom{ flex:0 0 auto !important; margin-top:10px !important; position:relative; z-index:2; } /* When collapsed, don't waste room on a scrollbar. */ .app.sidebar-collapsed .sidebar .nav{ scrollbar-width:none; padding-right:0; margin-right:0; } .app.sidebar-collapsed .sidebar .nav::-webkit-scrollbar{ width:0 !important; height:0 !important; } } /* Short desktop screens: keep the menu usable without crushing the UI. */ @media (min-width:821px) and (max-height:820px){ .sidebar{ gap:10px !important; padding-top:10px !important; padding-bottom:10px !important; } .sidebar .nav{ gap:1px !important; } .sidebar .nav a{ min-height:39px !important; padding-top:6px !important; padding-bottom:6px !important; } .sidebar-bottom .upgrade{ padding:10px !important; } .sidebar-bottom .upgrade p{ display:none !important; } } /* Mobile drawer: same behavior, with touch-friendly scrolling. */ @media (max-width:820px){ .sidebar{ display:flex !important; flex-direction:column !important; overflow:hidden !important; } .sidebar .nav{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:transparent transparent; } .sidebar .nav:hover{ scrollbar-color:color-mix(in srgb,var(--accent) 82%,var(--accent2)) transparent; } .sidebar .nav::-webkit-scrollbar{width:5px !important} .sidebar .nav::-webkit-scrollbar-track{background:transparent} .sidebar .nav::-webkit-scrollbar-thumb{background:transparent;border-radius:999px} .sidebar .nav:hover::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--accent2),var(--accent)); } .sidebar-bottom{ display:block !important; flex:0 0 auto !important; margin-top:8px !important; } } /* remove sticky glow/shadow from theme selector button */ .theme-button, .theme-button:hover, .theme-button:focus, .theme-button:active{ box-shadow:none !important; filter:none !important; } .theme-button::after{display:none !important;opacity:0 !important;animation:none !important} .theme-emblem, .theme-option .theme-emblem, .current-theme-n{ box-shadow:none !important; } .theme-n-logo, .theme-option .check, .theme-dot{ filter:none !important; } /* Remove the glowing active-dot at the end of sidebar menu buttons */ .nav a.active::after{ display:none !important; content:none !important; animation:none !important; box-shadow:none !important; } /* ===== Social Media Studio ===== */ .social-page{display:flex;flex-direction:column;gap:12px;padding-bottom:26px}.social-hero{min-height:190px;position:relative;overflow:hidden;padding:24px 28px;background:linear-gradient(110deg,color-mix(in srgb,var(--hero1) 86%,#051942 14%),color-mix(in srgb,var(--hero2) 78%,#120c56 22%));color:var(--heroText)}.social-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 65% 15%,color-mix(in srgb,var(--accent2) 28%,transparent),transparent 30%),linear-gradient(90deg,transparent 55%,rgba(255,255,255,.03));pointer-events:none}.social-hero-copy{position:relative;z-index:2;max-width:58%}.social-kicker{display:inline-flex;border:1px solid color-mix(in srgb,var(--accent2) 56%,rgba(255,255,255,.3));background:rgba(5,36,87,.35);padding:5px 10px;border-radius:999px;font-size:10px;font-weight:800;margin-bottom:10px}.social-hero h1{font-size:34px;line-height:1;margin:0 0 7px}.social-hero h2{font-size:17px;margin:0 0 7px}.social-hero p{font-size:11px;line-height:1.55;margin:0;color:color-mix(in srgb,var(--heroText) 75%,transparent)}.social-hero-art{position:absolute;right:0;top:0;width:46%;height:100%}.social-bot{position:absolute;left:34%;top:5%;width:210px;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25));animation:socialBotFloat 4.2s ease-in-out infinite}.social-bot svg{width:100%;height:auto}.orbit-ring{position:absolute;left:44%;top:43%;border:1px solid color-mix(in srgb,var(--accent2) 52%,transparent);border-radius:50%;transform:translate(-50%,-50%) rotate(-14deg)}.orbit-ring.r1{width:300px;height:95px}.orbit-ring.r2{width:220px;height:150px;transform:translate(-50%,-50%) rotate(28deg)}.social-float{position:absolute;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:#fff;border:1px solid rgba(255,255,255,.28);box-shadow:0 10px 26px rgba(0,0,0,.18),0 0 24px color-mix(in srgb,var(--accent2) 18%,transparent);backdrop-filter:blur(8px);animation:socialFloat 4.8s ease-in-out infinite}.social-float.fb{left:17%;top:32%;background:#1877f2}.social-float.ig{right:18%;top:11%;background:linear-gradient(135deg,#ffb82e,#d6249f,#6a3cff);animation-delay:-1s}.social-float.tt{left:24%;top:9%;background:#101014;animation-delay:-2s}.social-float.yt{right:25%;bottom:14%;background:#ff1836;animation-delay:-3s}.social-float.in{right:9%;top:34%;background:#0a7bbf;animation-delay:-1.8s}.social-float.xx{right:30%;top:41%;background:#111;animation-delay:-.6s}.social-hand-note{position:absolute;left:2%;top:31%;font-size:14px;line-height:1.25;color:color-mix(in srgb,var(--heroText) 80%,transparent);transform:rotate(-8deg);font-style:italic}.social-network-bar{display:flex;align-items:center;gap:7px;padding:7px;overflow-x:auto;scrollbar-width:none}.social-network-bar::-webkit-scrollbar{display:none}.network-pill,.manage-social-btn{height:34px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel) 90%,transparent);color:var(--text);padding:0 11px;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:700;white-space:nowrap;cursor:pointer;transition:.22s ease}.network-pill:hover,.network-pill.active{border-color:color-mix(in srgb,var(--accent) 56%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--accent2) 18%,transparent));box-shadow:0 10px 20px color-mix(in srgb,var(--accent) 12%,transparent)}.net-icon{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;font-weight:900}.net-icon.fb{background:#1877f2}.net-icon.ig{background:linear-gradient(135deg,#ff9a2e,#dd2a7b,#5f4cff)}.net-icon.tt{background:#111}.net-icon.xx{background:#111}.net-icon.yt{background:#ff1637}.net-icon.in{background:#0a7bbf}.net-icon.all{background:linear-gradient(135deg,var(--accent2),var(--accent))}.manage-social-btn{margin-left:auto;padding:0 14px}.social-workspace{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,.9fr) minmax(280px,.78fr);gap:12px}.social-composer,.social-preview,.recommend-card,.best-time,.scheduled-posts,.social-stats{padding:13px}.social-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.social-section-title>div{display:flex;align-items:center;gap:8px}.social-section-title h2{font-size:14px;margin:0}.social-section-title a{font-size:9px;color:var(--accent);text-decoration:none}.social-section-title.compact{margin-bottom:7px}.section-spark{color:var(--accent2);font-size:16px}.draft-state{font-size:9px;color:var(--muted)}.composer-tabs,.preview-platforms,.recommend-tabs,.schedule-filters{display:flex;gap:6px;flex-wrap:wrap}.composer-tabs button,.preview-platforms button,.recommend-tabs button,.schedule-filters button{border:1px solid var(--line);background:color-mix(in srgb,var(--panel2) 70%,transparent);color:var(--muted);border-radius:8px;padding:7px 9px;font-size:9px;cursor:pointer}.composer-tabs button.active,.preview-platforms button.active,.recommend-tabs button.active,.schedule-filters button.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07101c;border-color:transparent;font-weight:800}.composer-box{position:relative;margin-top:9px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--panel2) 56%,transparent);overflow:hidden}.composer-box textarea{width:100%;height:112px;resize:none;border:0;background:transparent;color:var(--text);outline:none;padding:13px 14px 24px;font:inherit;font-size:11px;line-height:1.6}.char-count{position:absolute;right:10px;bottom:7px;font-size:8px;color:var(--muted)}.ai-writing-title{font-size:10px;font-weight:800;margin:10px 0 7px}.ai-writing-tools{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:7px}.ai-tool-btn{border:1px solid var(--line);background:color-mix(in srgb,var(--panel2) 70%,transparent);color:var(--text);padding:8px;border-radius:9px;font-size:9px;font-weight:700;cursor:pointer}.ai-tool-btn.primary-ai{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 75%,#7c44ff),color-mix(in srgb,var(--accent2) 70%,#3a75ff));color:#fff}.media-dropzone{display:grid;grid-template-columns:1.55fr .75fr .75fr .6fr;gap:8px;margin-top:10px}.drop-copy,.media-thumb,.add-media{height:85px;border:1px dashed color-mix(in srgb,var(--accent) 48%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--panel2) 50%,transparent);display:flex;align-items:center;justify-content:center}.drop-copy{flex-direction:column;gap:3px;color:var(--muted);text-align:center}.drop-copy span{font-size:20px}.drop-copy b{font-size:9px;color:var(--text)}.drop-copy small{font-size:7px}.media-thumb{border-style:solid;position:relative;overflow:hidden}.social-thumb-city{background:linear-gradient(160deg,#173d68,#6b1f72 58%,#0b86b4);color:#fff;font-size:25px;font-weight:900}.social-thumb-brand img{width:62%;height:62%;object-fit:contain}.add-media{border-style:solid;font-size:25px;color:var(--muted);cursor:pointer}.composer-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}.composer-options,.composer-actions{display:flex;gap:8px}.composer-options button,.save-draft,.publish-btn{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:10px;padding:9px 11px;font-size:9px;font-weight:700;cursor:pointer}.publish-btn{border:0;background:linear-gradient(135deg,#ff3e9e,var(--accent2));color:#fff;min-width:135px}.publish-btn.published{background:linear-gradient(135deg,#15c58d,#4ce0ae)}.social-preview{min-width:0}.preview-platforms{margin-bottom:8px}.preview-platforms button{padding:6px 8px}.post-preview-card{border:1px solid var(--line);border-radius:12px;background:#fff;color:#0b1830;overflow:hidden}.post-preview-head{display:flex;align-items:center;gap:8px;padding:10px}.post-preview-head>span{margin-left:auto}.preview-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));display:grid;place-items:center;font-weight:900;color:#0c1830}.post-preview-head b{font-size:10px}.post-preview-head small{display:block;font-size:7px;color:#667}.preview-copy{padding:0 10px 9px;font-size:9px;line-height:1.45}.preview-copy em{color:#1664ff;font-style:normal}.preview-art{height:225px;margin:0 8px;background:radial-gradient(circle at 32% 42%,rgba(62,170,255,.35),transparent 18%),linear-gradient(135deg,#020a21,#06214c 56%,#020916);display:flex;align-items:center;justify-content:space-around;color:#fff;overflow:hidden;position:relative}.preview-art::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 48%,rgba(83,70,255,.18),transparent 66%)}.preview-logo-wrap{position:relative;z-index:2;text-align:center}.preview-logo-wrap img{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 0 15px rgba(60,147,255,.35))}.preview-logo-wrap b,.preview-logo-wrap small{display:block}.preview-logo-wrap b{font-size:13px}.preview-logo-wrap small{font-size:7px}.preview-words{position:relative;z-index:2;font-size:12px;line-height:1.45;color:#58d7ff}.post-preview-actions{display:flex;justify-content:space-around;padding:9px;font-size:8px;color:#667}.preview-device{display:flex;justify-content:center;gap:8px;margin-top:8px}.preview-device button{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:9px;padding:7px 16px}.preview-device button.active{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}.social-side{display:flex;flex-direction:column;gap:12px}.recommend-tabs{flex-wrap:nowrap}.recommend-tabs button{flex:1;padding:6px 5px}.recommend-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}.recommend-list button{display:grid;grid-template-columns:26px 1fr auto;align-items:center;text-align:left;gap:7px;width:100%;border:1px solid var(--line);background:color-mix(in srgb,var(--panel2) 55%,transparent);color:var(--text);border-radius:9px;padding:7px;font-size:10px}.recommend-list span{min-width:0}.recommend-list b,.recommend-list small{display:block}.recommend-list b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.recommend-list small{font-size:7px;color:var(--muted);margin-top:2px}.best-time>small{font-size:8px;color:var(--muted)}.weekday-row{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:8px 0}.weekday-row span{padding:5px 0;border-radius:7px;text-align:center;font-size:8px;background:color-mix(in srgb,var(--panel2) 60%,transparent)}.weekday-row span.active{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07101c;font-weight:900}.time-chart{height:90px;display:flex;align-items:end;gap:4px;padding:4px 2px;border-bottom:1px solid var(--line)}.time-chart i{height:var(--h);flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--accent2),var(--accent));box-shadow:0 -5px 12px color-mix(in srgb,var(--accent2) 14%,transparent)}.time-axis{display:flex;justify-content:space-between;font-size:6px;color:var(--muted);margin-top:4px}.social-bottom-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(330px,.8fr);gap:12px}.schedule-filters{margin-bottom:8px}.schedule-table{overflow-x:auto}.schedule-row{display:grid;grid-template-columns:22px minmax(200px,1.5fr) 90px 105px 92px 85px 120px 70px;align-items:center;gap:8px;border-top:1px solid var(--line);padding:8px 4px;font-size:8px;color:var(--muted);min-width:830px}.schedule-row.head{border-top:0;color:var(--muted);font-size:7px}.schedule-row b,.schedule-row small{display:block}.schedule-row b{color:var(--text);font-size:9px}.schedule-row small{font-size:7px;margin-top:2px}.channels{font-size:13px;color:var(--accent2)}.status{display:inline-flex;padding:4px 8px;border-radius:999px;font-style:normal;font-size:7px;font-weight:800}.status.waiting{background:color-mix(in srgb,#16b9ff 20%,transparent);color:#57d5ff}.status.draft{background:color-mix(in srgb,#808aa2 18%,transparent);color:#aab3c6}.status.published{background:color-mix(in srgb,#17d89b 18%,transparent);color:#51e8b6}.period-btn{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:8px;padding:6px 8px;font-size:8px}.stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.stat-cards div{border:1px solid var(--line);background:color-mix(in srgb,var(--panel2) 58%,transparent);border-radius:10px;padding:9px}.stat-cards small,.stat-cards b,.stat-cards em{display:block}.stat-cards small{font-size:7px;color:var(--muted)}.stat-cards b{font-size:16px;margin:3px 0}.stat-cards em{font-size:8px;color:#34dd98;font-style:normal}.line-chart{height:130px;margin-top:12px}.line-chart svg{width:100%;height:100%;overflow:visible} @keyframes socialBotFloat{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1deg)}}@keyframes socialFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(4deg)}} @media(max-width:1280px){.social-workspace{grid-template-columns:1.35fr .9fr}.social-side{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.social-bottom-grid{grid-template-columns:1fr}.social-hero-copy{max-width:66%}.social-hero-art{width:40%}.social-hand-note{display:none}.ai-writing-tools{grid-template-columns:repeat(2,1fr)}} @media(max-width:900px){.social-hero-copy{max-width:100%}.social-hero-art{opacity:.28;width:55%}.social-workspace{grid-template-columns:1fr}.social-side{grid-column:auto;grid-template-columns:1fr}.media-dropzone{grid-template-columns:1fr 1fr}.drop-copy{grid-column:1/-1}.social-bottom-grid{grid-template-columns:1fr}.stat-cards{grid-template-columns:1fr 1fr}.composer-footer{align-items:flex-start;flex-direction:column}.composer-actions{width:100%}.composer-actions button{flex:1}.social-network-bar{padding-right:8px}.manage-social-btn{margin-left:0}.social-hero{min-height:230px}.social-hero h1{font-size:30px}}@media(max-width:600px){.social-hero{padding:20px}.social-hero h1{font-size:27px}.social-hero h2{font-size:14px}.social-hero-art{display:none}.composer-tabs{overflow-x:auto;flex-wrap:nowrap}.ai-writing-tools{grid-template-columns:1fr 1fr}.media-dropzone{grid-template-columns:1fr 1fr}.social-stats{overflow:hidden}.stat-cards{grid-template-columns:1fr 1fr}.preview-art{height:190px}} /* ===== Social page clean relayout: composer + preview, no analytics side panels ===== */ .page-social .social-workspace{ display:grid; grid-template-columns:minmax(0,1.45fr) minmax(360px,.85fr); gap:14px; align-items:start; } .page-social .social-composer, .page-social .social-preview{ min-width:0; } .page-social .social-preview{ position:sticky; top:88px; } .page-social .social-bottom-grid.social-bottom-clean{ display:block; } .page-social .social-bottom-clean .scheduled-posts{ width:100%; } .page-social .scheduled-posts{ padding:15px; } .page-social .schedule-table{ overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; } .page-social .schedule-table::-webkit-scrollbar{height:7px} .page-social .schedule-table::-webkit-scrollbar-track{background:transparent} .page-social .schedule-table::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px} .page-social .social-network-bar{ margin-bottom:14px; } .page-social .social-composer, .page-social .social-preview, .page-social .scheduled-posts{ box-shadow:0 16px 42px rgba(0,0,0,.10); } @media(max-width:1180px){ .page-social .social-workspace{grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr)} } @media(max-width:980px){ .page-social .social-workspace{grid-template-columns:1fr} .page-social .social-preview{position:relative;top:auto} } /* Social hero: content hub visual replacing generic robot */ .social-bot{display:none!important} .social-hub-visual{position:absolute;left:34%;top:50%;width:250px;height:176px;transform:translate(-12%,-50%);display:grid;place-items:center;filter:drop-shadow(0 20px 34px rgba(0,0,0,.2));animation:socialHubFloat 5.2s ease-in-out infinite;z-index:2} .social-hub-visual::before{content:"";position:absolute;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 22%,transparent),transparent 68%);filter:blur(5px);opacity:.9} .hub-card{position:relative;width:142px;height:142px;border-radius:30px;display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--panel-solid) 55%,rgba(255,255,255,.12)),color-mix(in srgb,var(--accent) 12%,transparent));border:1px solid rgba(255,255,255,.26);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 42px rgba(0,0,0,.22),0 0 32px color-mix(in srgb,var(--accent2) 16%,transparent);backdrop-filter:blur(12px);overflow:hidden} .hub-card::after{content:"";position:absolute;inset:-70% auto -70% -35%;width:34%;transform:rotate(19deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);animation:hubShine 4.8s ease-in-out infinite} .hub-card svg{width:112px;height:112px;position:relative;z-index:2;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent2) 22%,transparent))} .hub-card>span{position:absolute;bottom:10px;font-size:8px;letter-spacing:.16em;font-weight:900;color:rgba(255,255,255,.78)} .hub-mini-card{position:absolute;min-width:76px;height:34px;padding:0 10px;border-radius:10px;display:flex;align-items:center;gap:7px;color:#fff;background:rgba(6,22,54,.42);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(10px);box-shadow:0 12px 26px rgba(0,0,0,.18);font-size:8px;letter-spacing:.06em;font-weight:900} .hub-mini-card span{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;font-size:10px} .hub-left{left:-2px;top:28px;transform:rotate(-6deg)} .hub-right{right:-6px;bottom:26px;transform:rotate(5deg)} .hub-pulse{position:absolute;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent2) 46%,transparent)} .hp1{width:215px;height:105px;transform:rotate(-10deg);animation:hubOrbit1 7s linear infinite} .hp2{width:178px;height:138px;transform:rotate(30deg);animation:hubOrbit2 9s linear infinite reverse} @keyframes socialHubFloat{0%,100%{transform:translate(-12%,-50%) translateY(0)}50%{transform:translate(-12%,-50%) translateY(-7px)}} @keyframes hubShine{0%,65%{left:-45%;opacity:0}72%{opacity:.85}88%{left:120%;opacity:0}100%{left:120%;opacity:0}} @keyframes hubOrbit1{to{transform:rotate(350deg)}} @keyframes hubOrbit2{to{transform:rotate(390deg)}} @media(max-width:1280px){.social-hub-visual{left:30%;transform:translate(-18%,-50%) scale(.92)}} @media(max-width:900px){.social-hub-visual{left:28%;opacity:.85;transform:translate(-18%,-50%) scale(.86)}} @media(max-width:600px){.social-hub-visual{display:none}} @media(prefers-reduced-motion:reduce){.social-hub-visual,.hp1,.hp2,.hub-card::after{animation:none!important}} /* ===== AI Content Studio ===== */ .content-page{display:flex;flex-direction:column;gap:12px;padding-bottom:28px}.content-page .card h2,.content-page .card h3{letter-spacing:-.02em}.content-hero{min-height:238px;position:relative;overflow:hidden;padding:28px;background:linear-gradient(110deg,color-mix(in srgb,var(--hero1) 88%,#061a47 12%),color-mix(in srgb,var(--hero2) 78%,#1e115d 22%));color:var(--heroText)}.content-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 12%,color-mix(in srgb,var(--accent2) 28%,transparent),transparent 34%),linear-gradient(90deg,transparent 52%,rgba(255,255,255,.03));pointer-events:none}.content-hero-copy{position:relative;z-index:3;max-width:58%}.content-kicker{display:inline-flex;border:1px solid color-mix(in srgb,var(--accent2) 55%,rgba(255,255,255,.28));background:rgba(4,29,82,.34);padding:7px 12px;border-radius:999px;font-size:11px;font-weight:800;margin-bottom:12px}.content-hero h1{font-size:42px;line-height:1.02;margin:0 0 10px}.content-hero h1 em{font-style:normal;background:linear-gradient(135deg,#b083ff,#50d5ff);-webkit-background-clip:text;background-clip:text;color:transparent}.content-hero h2{font-size:20px;margin:0 0 8px}.content-hero p{font-size:12px;line-height:1.7;margin:0;color:color-mix(in srgb,var(--heroText) 82%,transparent);max-width:700px}.content-hero-actions{display:flex;gap:10px;margin-top:18px}.content-primary,.content-secondary{height:46px;border-radius:14px;padding:0 20px;font-size:12px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .22s ease,box-shadow .24s ease,border-color .24s ease,background .24s ease,color .24s ease}.content-primary:hover,.generate-content-btn:hover{transform:translateY(-1px);box-shadow:0 16px 34px color-mix(in srgb,var(--content-btn-shadow) 100%,transparent)}.content-primary{border:1px solid color-mix(in srgb,var(--content-btn-2) 45%,rgba(255,255,255,.12));color:var(--content-btn-text);background:linear-gradient(135deg,var(--content-btn-1),var(--content-btn-2));box-shadow:0 12px 28px var(--content-btn-shadow),inset 0 1px 0 rgba(255,255,255,.18)}.content-secondary{border:1px solid var(--content-btn-outline-border);background:linear-gradient(135deg,color-mix(in srgb,var(--content-btn-outline-bg) 82%,transparent),color-mix(in srgb,var(--content-btn-1) 12%,transparent));color:var(--content-btn-outline-text);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}.content-secondary:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--content-btn-1) 55%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--content-btn-1) 18%,transparent),color-mix(in srgb,var(--content-btn-2) 8%,transparent));box-shadow:0 10px 24px color-mix(in srgb,var(--content-btn-1) 14%,transparent)}.content-hero-art{position:absolute;right:0;top:0;width:45%;height:100%;pointer-events:none}.content-doc{position:absolute;left:44%;top:50%;width:175px;height:190px;transform:translate(-50%,-50%) rotate(4deg);border-radius:22px;background:linear-gradient(155deg,rgba(226,240,255,.93),rgba(93,105,255,.76));box-shadow:0 22px 50px rgba(0,0,0,.24),0 0 42px color-mix(in srgb,var(--accent2) 25%,transparent);border:1px solid rgba(255,255,255,.55);padding:22px;color:#08265a}.content-doc::before{content:"";position:absolute;inset:10px;border-radius:16px;border:1px solid rgba(255,255,255,.4)}.doc-dot{position:absolute;top:18px;width:6px;height:6px;border-radius:50%;background:#6d8fff}.d1{left:24px}.d2{left:36px}.doc-line{position:absolute;left:24px;height:7px;border-radius:6px;background:rgba(16,55,139,.24)}.l1{top:54px;width:68%}.l2{top:70px;width:54%}.l3{top:86px;width:62%}.doc-ai{position:absolute;right:-18px;top:8px;width:68px;height:68px;border-radius:16px;display:grid;place-items:center;font-size:30px;font-weight:900;color:#fff;background:linear-gradient(145deg,#5cc8ff,#5e3dff);box-shadow:0 12px 30px rgba(41,72,255,.32);animation:contentFloat 4s ease-in-out infinite}.content-doc b,.content-doc small{position:relative;z-index:2;display:block;margin-top:98px}.content-doc b{font-size:14px}.content-doc small{margin-top:2px;font-size:9px}.content-orbit{position:absolute;left:45%;top:50%;border:1px solid color-mix(in srgb,var(--accent2) 60%,transparent);border-radius:50%;transform:translate(-50%,-50%) rotate(-14deg)}.ring-one{width:330px;height:100px}.ring-two{width:230px;height:180px;transform:translate(-50%,-50%) rotate(30deg)}.content-float{position:absolute;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-weight:900;color:#fff;border:1px solid rgba(255,255,255,.25);box-shadow:0 10px 24px rgba(0,0,0,.2),0 0 22px color-mix(in srgb,var(--accent2) 20%,transparent);animation:contentFloat 4.8s ease-in-out infinite}.cf-instagram{left:15%;top:18%;background:linear-gradient(135deg,#ff9d28,#dc2e92,#6554ff)}.cf-video{left:18%;bottom:16%;background:#ff2446;animation-delay:-1.2s}.cf-image{right:15%;top:16%;background:#7758ff;animation-delay:-2s}.cf-chat{right:10%;bottom:18%;background:#26a7ff;animation-delay:-.8s}.cf-pencil{right:32%;top:6%;background:#59d1ff;animation-delay:-2.8s}.content-hand-note{position:absolute;right:4%;top:40%;font-size:17px;line-height:1.12;font-style:italic;color:color-mix(in srgb,var(--heroText) 78%,transparent);transform:rotate(-8deg)} .content-type-tabs{display:grid;grid-template-columns:repeat(6,1fr);padding:0;overflow:hidden}.content-type-tabs button{height:48px;border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);font-size:11px;font-weight:800;cursor:pointer;transition:.2s ease}.content-type-tabs button:last-child{border-right:0}.content-type-tabs button.active,.content-type-tabs button:hover{color:var(--text);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent2) 13%,transparent));box-shadow:inset 0 -2px 0 var(--accent)} .content-workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(360px,.85fr);gap:12px}.content-builder,.content-preview,.content-templates,.content-recent{padding:16px}.content-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.content-section-head>div{display:flex;align-items:flex-start;gap:12px}.content-section-head h2{font-size:19px;line-height:1.15;margin:0;font-weight:800}.content-section-head p{font-size:11px;color:var(--muted);margin:4px 0 0;line-height:1.55;max-width:520px}.content-section-head a{font-size:11px;color:var(--accent);text-decoration:none;font-weight:700}.section-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;position:relative;overflow:hidden;font-size:18px;font-weight:900;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--accent2) 78%,rgba(255,255,255,.16)),color-mix(in srgb,var(--accent) 62%,rgba(10,18,36,.5)));border:1px solid color-mix(in srgb,var(--accent2) 42%,rgba(255,255,255,.18));box-shadow:0 12px 24px color-mix(in srgb,var(--accent) 14%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}.section-icon::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 24%,rgba(255,255,255,.28),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.08),transparent 60%)}.section-icon::after{content:"";position:absolute;inset:6px;border-radius:10px;border:1px solid rgba(255,255,255,.10)}.section-icon>*,.section-icon{isolation:isolate}.icon-builder{background:linear-gradient(145deg,#54c8ff,#5570ff 55%,#7b4dff)}.icon-preview{background:linear-gradient(145deg,#7a67ff,#c051ff 54%,#ff5da8)}.icon-templates{background:linear-gradient(145deg,#53d2ff,#2f95ff 48%,#48c0b3)}.icon-recent{background:linear-gradient(145deg,#7ec5ff,#4d84ff 52%,#8b63ff)}.example-fill{border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text);border-radius:11px;padding:9px 12px;font-size:10px;font-weight:800;cursor:pointer}.content-form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.content-form-grid label{display:flex;flex-direction:column;gap:7px}.content-form-grid label.wide{grid-column:span 1}.content-form-grid label.full{grid-column:1/-1}.content-form-grid span{font-size:11px;font-weight:800}.content-form-grid span b{color:#ff536f}.content-form-grid input,.content-form-grid select,.content-form-grid textarea{width:100%;border:1px solid var(--line);background:color-mix(in srgb,var(--panel2) 58%,transparent);color:var(--text);border-radius:12px;padding:11px 12px;outline:none;font:inherit;font-size:11px}.content-form-grid textarea{min-height:106px;resize:vertical;line-height:1.6}.content-form-grid input:focus,.content-form-grid select:focus,.content-form-grid textarea:focus{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}.content-helper-row{display:flex;align-items:center;gap:12px;margin-top:14px}.content-helper-row>span{font-size:10px;font-weight:800;white-space:nowrap}.content-helper-row>div{display:flex;flex-wrap:wrap;gap:8px}.content-helper-row button,.preview-action-row button{border:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--panel2) 70%,transparent),color-mix(in srgb,var(--accent) 3%,transparent));color:var(--text);border-radius:999px;padding:8px 11px;font-size:10px;font-weight:700;cursor:pointer;transition:transform .18s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}.content-helper-row button:hover,.preview-action-row button:hover{transform:translateY(-1px);background:linear-gradient(135deg,color-mix(in srgb,var(--content-btn-1) 16%,transparent),color-mix(in srgb,var(--content-btn-2) 9%,transparent));border-color:color-mix(in srgb,var(--content-btn-1) 48%,var(--line));box-shadow:0 10px 18px color-mix(in srgb,var(--content-btn-shadow) 28%,transparent)}.generate-content-btn{margin:16px 0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:232px;border:1px solid color-mix(in srgb,var(--content-btn-2) 46%,rgba(255,255,255,.12));border-radius:14px;padding:12px 20px;color:var(--content-btn-text);font-size:12px;font-weight:800;background:linear-gradient(135deg,var(--content-btn-1),var(--content-btn-2));cursor:pointer;box-shadow:0 14px 28px var(--content-btn-shadow),inset 0 1px 0 rgba(255,255,255,.18)} .content-preview{min-width:0}.preview-platform-chip{font-size:10px;font-weight:800;padding:7px 11px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent2);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))}.generated-post{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;color:#0c1930}.generated-head{display:flex;align-items:center;gap:8px;padding:11px}.generated-head>span{margin-left:auto}.generated-avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:linear-gradient(135deg,var(--accent2),var(--accent));color:#0b1730}.generated-head b{font-size:11px}.generated-head small{display:block;font-size:8px;color:#667}.generated-copy{padding:0 12px 12px;font-size:10px;line-height:1.55}.generated-copy p{margin:6px 0}.generated-copy ul{margin:7px 0;padding-left:18px}.generated-copy em{color:#1d6eff;font-style:normal}.generated-art{height:205px;margin:0 8px;display:flex;align-items:center;justify-content:space-around;position:relative;overflow:hidden;background:radial-gradient(circle at 25% 40%,rgba(43,154,255,.3),transparent 18%),linear-gradient(135deg,#03102c,#092a5f 55%,#08142a);color:#fff}.generated-art::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 48%,rgba(119,67,255,.22),transparent 67%)}.art-brand,.art-copy{position:relative;z-index:2;text-align:center}.art-brand span{display:grid;place-items:center;width:70px;height:70px;margin:auto;border-radius:18px;background:linear-gradient(145deg,#0e2d6d,#3597ff);font-size:38px;font-weight:900;box-shadow:0 0 24px rgba(64,162,255,.34)}.art-brand b,.art-brand small{display:block}.art-brand b{font-size:12px;margin-top:6px}.art-brand small{font-size:7px}.art-copy{font-size:20px;line-height:1.05}.art-copy strong{color:#7fdfff}.art-copy small{display:block;margin-top:9px;font-size:8px;font-weight:400}.generated-actions{display:flex;justify-content:space-around;padding:10px;color:#667;font-size:8px}.preview-action-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.preview-action-row button{border:1px solid var(--line);background:transparent;color:var(--text);padding:9px;border-radius:10px;font-size:9px;font-weight:700;cursor:pointer}.preview-action-row button:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)} .content-bottom-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.8fr);gap:12px}.template-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.template-grid button{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;min-height:90px;border:1px solid var(--line);background:color-mix(in srgb,var(--panel2) 55%,transparent);color:var(--text);border-radius:14px;padding:11px;text-align:left;cursor:pointer}.template-grid button:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--panel2))}.template-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;color:#fff;background:linear-gradient(145deg,color-mix(in srgb,var(--accent2) 80%,rgba(255,255,255,.14)),color-mix(in srgb,var(--accent) 58%,rgba(10,18,36,.45)));box-shadow:0 10px 20px color-mix(in srgb,var(--accent) 12%,transparent)}.template-grid b,.template-grid small{display:block}.template-grid b{font-size:11px}.template-grid small{font-size:9px;color:var(--muted);margin-top:4px;line-height:1.45}.template-grid i{font-style:normal;color:var(--accent);font-weight:800}.recent-list{display:flex;flex-direction:column}.recent-list button{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;text-align:left;border:0;border-top:1px solid var(--line);background:transparent;color:var(--text);padding:10px 3px}.recent-list button:first-child{border-top:0}.recent-list b,.recent-list small{display:block}.recent-list b{font-size:10px}.recent-list small{font-size:8px;color:var(--muted);margin-top:3px}.recent-list i{font-style:normal;color:var(--muted)}.recent-ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;box-shadow:0 8px 18px rgba(0,0,0,.08)}.recent-ico.blue{background:linear-gradient(145deg,#2d8dff,#4969ff);color:#fff}.recent-ico.violet{background:linear-gradient(145deg,#a061ff,#7c59ff);color:#fff}.recent-ico.cyan{background:linear-gradient(145deg,#2ccbe7,#269cff);color:#fff} @keyframes contentFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(3deg)}} @media(max-width:1180px){.content-workspace{grid-template-columns:1fr}.content-bottom-grid{grid-template-columns:1fr}.content-hero-copy{max-width:64%}.content-hero-art{width:42%}.template-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:860px){.content-hero-copy{max-width:100%}.content-hero-art{opacity:.26;width:58%}.content-type-tabs{display:flex;overflow-x:auto}.content-type-tabs button{min-width:150px}.content-form-grid{grid-template-columns:1fr 1fr}.content-form-grid label.full{grid-column:1/-1}.preview-action-row{grid-template-columns:1fr 1fr}} @media(max-width:600px){.content-hero{padding:22px;min-height:250px}.content-hero h1{font-size:32px}.content-hero h2{font-size:14px}.content-hero-art{display:none}.content-form-grid{grid-template-columns:1fr}.content-form-grid label.full{grid-column:auto}.content-helper-row{align-items:flex-start;flex-direction:column}.generate-content-btn{width:100%;min-width:0}.template-grid{grid-template-columns:1fr}.content-hero-actions{flex-direction:column}.content-hero-actions button{width:100%}} /* ===== Content type tabs: richer icons + stronger labels ===== */ .content-type-tabs{ display:grid;grid-template-columns:repeat(6,1fr);padding:6px;gap:6px;overflow:hidden; background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,transparent),color-mix(in srgb,var(--panel2) 80%,transparent)); } .content-type-tabs button{ min-height:62px;height:auto;border:1px solid transparent!important;border-radius:12px;background:transparent;color:var(--muted); display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 10px;font-size:11px;font-weight:800;cursor:pointer; transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease,color .22s ease;box-shadow:none!important; } .content-type-tabs button:last-child{border-right:1px solid transparent!important} .content-type-tabs .type-icon{ width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;position:relative;overflow:hidden; border:1px solid color-mix(in srgb,currentColor 32%,transparent);background:color-mix(in srgb,currentColor 12%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.10); } .content-type-tabs .type-icon::after{content:"";position:absolute;inset:-45% auto auto -25%;width:60%;height:140%;transform:rotate(28deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);opacity:.55} .content-type-tabs .type-icon svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2} .content-type-tabs .type-copy{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;min-width:0} .content-type-tabs .type-copy b{font-size:12px;color:var(--text);white-space:nowrap} .content-type-tabs .type-copy small{font-size:8px;color:var(--muted);margin-top:3px;letter-spacing:.02em} .content-type-tabs .social-icon{color:#57d7ff}.content-type-tabs .article-icon{color:#7da7ff}.content-type-tabs .caption-icon{color:#ff77c7}.content-type-tabs .script-icon{color:#ff8c64}.content-type-tabs .email-icon{color:#63e1b4}.content-type-tabs .ads-icon{color:#ffd45b} .content-type-tabs button:hover{ transform:translateY(-2px);color:var(--text);background:color-mix(in srgb,var(--accent) 9%,var(--panel2)); border-color:color-mix(in srgb,var(--accent) 28%,var(--line))!important; } .content-type-tabs button.active{ color:var(--text);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent2) 14%,transparent)); border-color:color-mix(in srgb,var(--accent) 48%,var(--line))!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent2) 18%,transparent),0 10px 24px color-mix(in srgb,var(--accent) 12%,transparent)!important; } .content-type-tabs button.active .type-icon{transform:scale(1.05);box-shadow:0 0 18px color-mix(in srgb,currentColor 28%,transparent),inset 0 1px 0 rgba(255,255,255,.16)} .content-type-tabs button.active .type-copy b{font-size:12.5px} @media(max-width:1100px){.content-type-tabs button{min-width:160px}.content-type-tabs{display:flex;overflow-x:auto;scrollbar-width:none}.content-type-tabs::-webkit-scrollbar{display:none}} /* ===== Theme-aware custom dropdowns for Content Studio ===== */ .content-form-grid .nt-select-wrap{position:relative;width:100%;min-width:0} .content-form-grid .nt-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important} .content-form-grid .nt-select-button{width:100%;min-height:44px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--panel2) 72%,transparent),color-mix(in srgb,var(--panel-solid) 92%,transparent));color:var(--text);border-radius:12px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;font:inherit;font-size:11px;font-weight:700;text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .18s ease} .content-form-grid .nt-select-button:hover{border-color:color-mix(in srgb,var(--accent) 46%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--panel2)),color-mix(in srgb,var(--panel-solid) 96%,transparent))} .content-form-grid .nt-select-wrap.open .nt-select-button{border-color:color-mix(in srgb,var(--accent) 72%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent),0 10px 28px color-mix(in srgb,var(--accent) 14%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 11%,var(--panel2)),color-mix(in srgb,var(--panel-solid) 94%,transparent))} .nt-select-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nt-select-chevron{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center;border-radius:7px;background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent);transition:transform .2s ease,background .2s ease} .nt-select-chevron svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .nt-select-wrap.open .nt-select-chevron{transform:rotate(180deg);background:color-mix(in srgb,var(--accent) 16%,transparent)} .nt-select-menu{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:120;padding:6px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));background:color-mix(in srgb,var(--panel-solid) 96%,#000 4%);box-shadow:0 22px 50px rgba(0,0,0,.24),0 0 0 1px color-mix(in srgb,var(--accent) 5%,transparent);backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985);transform-origin:top center;transition:opacity .16s ease,transform .16s ease,visibility .16s ease;max-height:260px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--accent) transparent} .nt-select-menu::-webkit-scrollbar{width:6px} .nt-select-menu::-webkit-scrollbar-track{background:transparent} .nt-select-menu::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent2),var(--accent));border-radius:999px} .nt-select-wrap.open .nt-select-menu{opacity:1;visibility:visible;transform:translateY(0) scale(1)} .nt-select-option{width:100%;border:0;background:transparent;color:var(--text);border-radius:10px;padding:9px 10px;display:flex;align-items:center;gap:9px;font:inherit;font-size:11px;font-weight:700;text-align:left;cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease} .nt-select-option:hover,.nt-select-option:focus-visible{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 15%,transparent),color-mix(in srgb,var(--accent2) 9%,transparent));transform:translateX(2px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)} .nt-option-check{width:22px;height:22px;flex:0 0 22px;border-radius:7px;display:grid;place-items:center;color:transparent;background:color-mix(in srgb,var(--panel2) 84%,transparent);border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));font-size:11px;font-weight:900;transition:.16s ease} .nt-select-option.selected{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 20%,transparent),color-mix(in srgb,var(--accent2) 11%,transparent));color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)} .nt-select-option.selected .nt-option-check{color:var(--content-btn-text);background:linear-gradient(135deg,var(--content-btn-1),var(--content-btn-2));border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 20%,transparent)} .nt-option-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:600px){.nt-select-menu{max-height:220px}.nt-select-option{padding:10px;font-size:12px}.content-form-grid .nt-select-button{font-size:12px;min-height:46px}} @media(prefers-reduced-motion:reduce){ .event-card[data-event-id], .event-card[data-event-id] .event-shade, .event-card[data-event-id] .event-kicker, .event-card[data-event-id] h3, .event-card[data-event-id] .event-tags, .event-card[data-event-id] .event-bottom, .event-card[data-event-id] .event-content::after{transition:none!important} } /* ===== Premium hover bounce without covering text ===== */ .event-card[data-event-id]{ background-size:cover; background-position:center center; will-change:transform,box-shadow,filter,background-size; } .event-card[data-event-id]:hover, .event-card[data-event-id]:focus-visible{ background-size:112%; } .event-card[data-event-id].event-hover-bounce{ animation:eventHoverBounce .34s cubic-bezier(.22,.78,.2,1) both; } @keyframes eventHoverBounce{ 0%{transform:translateY(0) scale(1)} 46%{transform:translateY(-12px) scale(1.024)} 72%{transform:translateY(-8px) scale(1.016)} 100%{transform:translateY(-10px) scale(1.02)} } @media(prefers-reduced-motion:reduce){ .event-card[data-event-id].event-hover-bounce{animation:none!important} .event-card[data-event-id]:hover,.event-card[data-event-id]:focus-visible{transform:none!important;background-size:cover!important} } /* Corner cleanup: prevent dark wedges around rounded event cards */ .event-card[data-event-id]{background-clip:padding-box;outline:0;box-shadow:0 8px 20px rgba(11,80,162,.14)} .event-card[data-event-id]:hover,.event-card[data-event-id]:focus-visible{box-shadow:0 20px 34px rgba(8,69,145,.20),0 0 0 1px color-mix(in srgb,var(--accent) 42%,transparent),0 0 24px color-mix(in srgb,var(--accent) 26%,transparent),0 0 60px color-mix(in srgb,var(--accent) 18%,transparent)} .event-arrow.is-edge{opacity:.55;filter:saturate(.72);box-shadow:0 5px 14px rgba(0,0,0,.12)} /* Infinite event carousel controls */ .event-carousel-wrap{overflow:hidden} .event-track{overflow:visible!important;scroll-snap-type:none!important;scroll-behavior:auto!important;will-change:transform} .event-track.carousel-moving{pointer-events:none} .event-card-ghost{pointer-events:none!important} .event-arrow{ width:40px!important;height:40px!important; background:color-mix(in srgb,var(--card) 82%,var(--accent) 18%)!important; border:1px solid color-mix(in srgb,var(--accent) 58%,var(--line))!important; color:var(--accent)!important; font-size:30px!important;font-weight:900!important; box-shadow:0 8px 22px rgba(0,0,0,.16),0 0 20px color-mix(in srgb,var(--accent) 22%,transparent)!important; opacity:1!important; transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important; } .event-arrow:hover{transform:translateY(-50%) scale(1.08);background:color-mix(in srgb,var(--card) 68%,var(--accent) 32%)!important;box-shadow:0 10px 26px rgba(0,0,0,.18),0 0 28px color-mix(in srgb,var(--accent) 36%,transparent)!important} .event-arrow:active{transform:translateY(-50%) scale(.94)} .event-arrow.is-edge{opacity:1!important;pointer-events:auto!important} /* ===== Activities carousel nav refresh: bottom-center controls ===== */ .community-events-card{padding-bottom:16px} .event-carousel-wrap{padding:0 8px 0!important;overflow:hidden} .event-carousel-nav{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 14px 2px} .event-carousel-nav .event-arrow{ position:relative!important; top:auto!important;left:auto!important;right:auto!important; translate:none!important; flex:0 0 auto; width:42px!important;height:42px!important; border-radius:999px!important; background:linear-gradient(145deg,color-mix(in srgb,var(--card) 72%,var(--accent) 28%),color-mix(in srgb,var(--panel2) 78%,var(--accent2) 22%))!important; border:1px solid color-mix(in srgb,var(--accent) 68%,var(--line))!important; color:var(--accent)!important; box-shadow:0 10px 26px rgba(0,0,0,.18),0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent),0 0 22px color-mix(in srgb,var(--accent) 26%,transparent)!important; } .event-carousel-nav .event-arrow:hover{ transform:translateY(-2px) scale(1.08)!important; box-shadow:0 12px 28px rgba(0,0,0,.18),0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent),0 0 30px color-mix(in srgb,var(--accent) 40%,transparent)!important; } .event-carousel-nav .event-arrow:active{transform:translateY(0) scale(.95)!important} .event-carousel-nav .event-arrow:focus-visible{outline:3px solid color-mix(in srgb,var(--accent2) 80%,white);outline-offset:3px} .event-dots{align-items:center;padding-top:0!important;gap:11px} .event-dots i{ width:10px;height:10px;border-radius:999px; background:color-mix(in srgb,var(--text-muted) 24%,transparent); box-shadow:inset 0 1px 1px rgba(255,255,255,.18); transition:width .28s ease,transform .28s ease,background .28s ease,box-shadow .28s ease,opacity .28s ease; opacity:.8; } .event-dots i:hover{transform:scale(1.08);opacity:1} .event-dots i.active{ width:26px; background:linear-gradient(90deg,var(--accent),var(--accent2)); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 0 14px color-mix(in srgb,var(--accent) 30%,transparent); opacity:1; } @media (max-width:620px){ .event-carousel-wrap{padding:0 2px 0!important} .event-carousel-nav{gap:10px;padding-top:8px} .event-carousel-nav .event-arrow{width:38px!important;height:38px!important;font-size:27px!important} .event-dots i.active{width:22px} } /* ===== Carousel stability fix ===== */ .event-track{transform:none} .event-card-ghost{visibility:visible!important;opacity:1!important;display:block!important} .event-track.carousel-moving{contain:layout paint style} /* ===== Ultra-smooth carousel movement ===== */ .event-track{ backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translate3d(0,0,0); will-change:transform; } .event-track.carousel-moving{ contain:none!important; } .event-track.carousel-moving .event-card{ animation:none!important; } .event-arrow.carousel-btn-busy{ cursor:default; } @media(prefers-reduced-motion:reduce){ .event-track{transition:none!important} } /* ========================================================================== NEXTONTECH — Cross-device responsive hardening Desktop design remains unchanged; these rules only activate on smaller UI. ========================================================================== */ html,body{max-width:100%;overflow-x:hidden} *,*::before,*::after{box-sizing:border-box} img,video,canvas,svg{max-width:100%} .main,.dashboard,.community-shell,.community-page-grid,.community-left-column,.community-main-grid,.tools-page,.social-page,.content-page,.media-page,.solutions-page,.card{min-width:0;max-width:100%} input,select,textarea,button{max-width:100%} @media (max-width:1280px){ .main{padding-left:14px;padding-right:14px} .dashboard{gap:12px} .community-page-grid{gap:12px} .community-left-column{gap:12px} .content-workspace,.media-workspace{gap:10px} } @media (max-width:1024px){ .topbar{gap:8px} .search{min-width:0} .dashboard,.split,.community-top-grid,.community-page-grid,.community-main-grid,.community-left-column .community-main-grid,.content-workspace,.content-bottom-grid,.media-workspace,.media-bottom-grid,.social-workspace,.social-bottom-grid{grid-template-columns:1fr!important} .rightcol{min-width:0} .community-page-grid>.community-side-stack{grid-column:auto!important;grid-row:auto!important} .community-side-stack{grid-template-columns:repeat(2,minmax(0,1fr))!important} .event-track{grid-auto-columns:minmax(0,calc((100% - 24px)/3))} .tools-page .tool-grid,.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .solutions{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:820px){ .app,.app.sidebar-collapsed{grid-template-columns:1fr!important;padding-left:0!important} .main{width:100%;max-width:100vw;padding:10px 10px 18px} .topbar{width:100%;max-width:100%;position:sticky;top:0;z-index:30;flex-wrap:nowrap;overflow:visible} .topbar .search{flex:1 1 auto;width:auto;min-width:0} .sidebar{width:min(86vw,300px)!important;max-width:300px;height:100dvh!important;overflow:hidden!important} .sidebar .nav{min-height:0;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain} .sidebar-bottom{flex:0 0 auto} .card{border-radius:16px} .community-side-stack{grid-template-columns:1fr 1fr!important} .event-track{grid-auto-columns:minmax(0,calc((100% - 12px)/2))} .social-hero-copy,.content-hero-copy{max-width:100%!important} .social-hero-art,.content-hero-art{opacity:.18} .tools-page .tool-grid,.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .solutions{grid-template-columns:repeat(2,minmax(0,1fr))} .template-grid,.media-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:640px){ body{font-size:14px} .main{padding:8px 8px 16px} .topbar{gap:6px;padding-top:6px;padding-bottom:9px} .theme-button{min-width:0} .profile{display:none!important} .card{border-radius:14px} .community-side-stack{grid-template-columns:1fr!important} .event-track{grid-auto-columns:calc(100% - 2px);gap:10px} .event-card{height:205px} .tools-page .tool-grid,.tool-grid,.solutions,.template-grid,.content-form-grid,.stat-cards{grid-template-columns:1fr!important} .media-template-grid{grid-template-columns:1fr!important} .content-type-tabs,.media-type-tabs{overflow-x:auto;scrollbar-width:none} .content-type-tabs::-webkit-scrollbar,.media-type-tabs::-webkit-scrollbar{display:none} .content-hero,.social-hero{padding:20px!important} .content-hero-art,.social-hero-art{display:none!important} .content-hero h1,.social-hero h1{font-size:28px!important} .content-workspace,.content-bottom-grid,.social-workspace,.social-bottom-grid{grid-template-columns:1fr!important} .composer-footer,.content-helper-row{align-items:stretch;flex-direction:column} .composer-actions,.composer-options,.content-helper-row>div{width:100%} .preview-action-row,.preview-actions{grid-template-columns:1fr 1fr!important} .schedule-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .schedule-row{min-width:780px} .post-with-media{grid-template-columns:1fr!important} .footer-banner{align-items:stretch;flex-direction:column} } @media (max-width:480px){ .main{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));padding-bottom:max(16px,env(safe-area-inset-bottom))} .sidebar{width:min(92vw,300px)!important} .topbar .search input{font-size:13px} .mobile-sidebar-toggle,.sidebar-toggle{width:38px;height:38px} .card{border-radius:13px} .content-hero h1,.social-hero h1{font-size:25px!important} .preview-action-row,.preview-actions{grid-template-columns:1fr!important} .stat-cards{grid-template-columns:1fr 1fr!important} .event-carousel-nav{gap:8px} } @media (orientation:landscape) and (max-height:520px) and (max-width:980px){ .sidebar{height:100dvh!important} .sidebar .nav{max-height:calc(100dvh - 150px)} .sidebar-bottom .upgrade p{display:none!important} } /* ===== Global Nextontech custom dropdown system — all pages ===== */ .nt-select-wrap{position:relative;width:100%;min-width:0;z-index:1} .nt-select-wrap.open{z-index:160} .nt-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important} .nt-select-button{width:100%;min-height:44px;border:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--panel2) 78%,transparent),color-mix(in srgb,var(--panel-solid) 94%,transparent));color:var(--text);border-radius:12px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;gap:12px;font:inherit;font-size:12px;font-weight:700;text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease,transform .18s ease,color .18s ease} .nt-select-button:hover{border-color:color-mix(in srgb,var(--accent) 52%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 9%,var(--panel2)),color-mix(in srgb,var(--panel-solid) 97%,transparent));box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 7%,transparent)} .nt-select-wrap.open .nt-select-button{border-color:color-mix(in srgb,var(--accent) 75%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 11%,transparent),0 12px 30px color-mix(in srgb,var(--accent) 14%,transparent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--panel2)),color-mix(in srgb,var(--panel-solid) 96%,transparent))} .nt-select-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nt-select-chevron{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;border-radius:8px;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--accent);transition:transform .22s ease,background .22s ease,box-shadow .22s ease} .nt-select-chevron svg{width:14px!important;height:14px!important;fill:none!important;stroke:currentColor!important;stroke-width:2.3!important;stroke-linecap:round!important;stroke-linejoin:round!important} .nt-select-wrap.open .nt-select-chevron{transform:rotate(180deg);background:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 16%,transparent)} .nt-select-menu{position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:180;padding:7px;border-radius:14px;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));background:linear-gradient(155deg,color-mix(in srgb,var(--panel-solid) 97%,#000 3%),color-mix(in srgb,var(--panel2) 94%,#000 6%));box-shadow:0 24px 55px rgba(0,0,0,.25),0 0 0 1px color-mix(in srgb,var(--accent) 6%,transparent),0 0 24px color-mix(in srgb,var(--accent) 8%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-7px) scale(.982);transform-origin:top center;transition:opacity .17s ease,transform .19s cubic-bezier(.2,.78,.2,1),visibility .17s ease;max-height:min(280px,45vh);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--accent) transparent} .nt-select-wrap.open-up .nt-select-menu{top:auto;bottom:calc(100% + 7px);transform-origin:bottom center;transform:translateY(7px) scale(.982)} .nt-select-wrap.open .nt-select-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)} .nt-select-menu::-webkit-scrollbar{width:6px}.nt-select-menu::-webkit-scrollbar-track{background:transparent}.nt-select-menu::-webkit-scrollbar-thumb{background:linear-gradient(var(--accent2),var(--accent));border-radius:999px} .nt-select-option{width:100%;min-height:40px;border:0;background:transparent;color:var(--text);border-radius:10px;padding:8px 10px;display:flex;align-items:center;gap:10px;font:inherit;font-size:12px;font-weight:700;text-align:left;cursor:pointer;transition:background .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease} .nt-select-option:hover,.nt-select-option:focus-visible{outline:none;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 17%,transparent),color-mix(in srgb,var(--accent2) 10%,transparent));transform:translateX(2px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent)} .nt-option-check{width:23px;height:23px;flex:0 0 23px;border-radius:8px;display:grid;place-items:center;color:transparent;background:color-mix(in srgb,var(--panel2) 84%,transparent);border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));font-size:11px;font-weight:900;transition:.16s ease} .nt-select-option.selected{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 21%,transparent),color-mix(in srgb,var(--accent2) 12%,transparent));color:var(--text);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent)} .nt-select-option.selected .nt-option-check{color:#fff;background:linear-gradient(135deg,var(--accent2),var(--accent));border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 23%,transparent)} .nt-option-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(max-width:600px){.nt-select-button{font-size:13px;min-height:46px}.nt-select-option{padding:10px;font-size:13px;min-height:42px}.nt-select-menu{max-height:min(250px,42vh)}} @media(prefers-reduced-motion:reduce){.nt-select-button,.nt-select-chevron,.nt-select-menu,.nt-select-option{transition:none!important}} /* === Theme follow-up fix: Solutions page must adapt to active theme === */ .solutions-page{ --solution-hero-1: color-mix(in srgb,var(--accent) 74%, #2448a5 26%); --solution-hero-2: color-mix(in srgb,var(--accent) 42%, var(--accent2) 58%); --solution-hero-3: color-mix(in srgb,var(--accent2) 70%, #3a82eb 30%); --solution-hero-text: #ffffff; } .solutions-page .solutions-hero{ background:linear-gradient(120deg,var(--solution-hero-1) 0%,var(--solution-hero-2) 48%,var(--solution-hero-3) 100%) !important; border-color:color-mix(in srgb,var(--accent) 28%, var(--line)) !important; box-shadow:0 20px 60px color-mix(in srgb,var(--accent) 16%, transparent) !important; } .solutions-page .solutions-hero::before{ background: radial-gradient(circle at 15% 10%, color-mix(in srgb,var(--accent2) 26%, transparent), transparent 24%), radial-gradient(circle at 90% 30%, color-mix(in srgb,var(--accent) 18%, white), transparent 34%) !important; } .solutions-page .solutions-hero-copy{color:var(--solution-hero-text) !important} .solutions-page .solutions-kicker{ color:var(--solution-hero-text) !important; border-color:color-mix(in srgb,var(--solution-hero-text) 24%, transparent) !important; background:color-mix(in srgb,var(--panel-solid) 18%, transparent) !important; } .solutions-page .solutions-hero h1, .solutions-page .solutions-hero p{color:var(--solution-hero-text) !important} .solutions-page .solutions-hero p{opacity:.92} .solutions-page .solution-orb{ border-color:color-mix(in srgb,var(--accent2) 30%, rgba(255,255,255,.18)) !important; } .solutions-page .solution-people-icon{ background: radial-gradient(circle at 32% 25%, color-mix(in srgb,var(--accent2) 42%, white), transparent 40%), linear-gradient(145deg, color-mix(in srgb,var(--accent2) 72%, #285df3 28%), color-mix(in srgb,var(--accent) 78%, #6430d4 22%)) !important; border-color:color-mix(in srgb,var(--accent2) 28%, rgba(255,255,255,.44)) !important; box-shadow:0 22px 60px color-mix(in srgb,var(--accent) 22%, rgba(22,23,100,.34)), inset 0 0 30px rgba(255,255,255,.08) !important; } .solutions-page .solution-people-icon svg{color:#ffffff !important} .solutions-page .hero-float{ color:var(--solution-hero-text) !important; border-color:color-mix(in srgb,var(--solution-hero-text) 18%, transparent) !important; background:color-mix(in srgb,var(--panel-solid) 16%, transparent) !important; } .solutions-page .solutions-hero-actions .tools-btn-primary, .solutions-page .solution-cta-actions .tools-btn-primary{ color:var(--content-btn-text) !important; background:linear-gradient(135deg,var(--content-btn-1),var(--content-btn-2)) !important; border:1px solid color-mix(in srgb,var(--accent2) 34%, var(--line)) !important; box-shadow:0 12px 28px var(--content-btn-shadow), inset 0 1px 0 rgba(255,255,255,.18) !important; } .solutions-page .solutions-hero-actions .tools-btn-secondary, .solutions-page .solution-cta-actions .tools-btn-secondary{ color:var(--solution-hero-text) !important; background:color-mix(in srgb,var(--panel-solid) 15%, transparent) !important; border:1px solid color-mix(in srgb,var(--solution-hero-text) 24%, transparent) !important; box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.08) !important; text-shadow:none !important; } .solutions-page .solutions-hero-actions .tools-btn-secondary:hover, .solutions-page .solution-cta-actions .tools-btn-secondary:hover{ background:color-mix(in srgb,var(--panel-solid) 24%, transparent) !important; border-color:color-mix(in srgb,var(--solution-hero-text) 32%, transparent) !important; } .solutions-page .solution-profile, .solutions-page .solution-value, .solutions-page .example-card, .solutions-page .solution-tabs, .solutions-page .solution-cta{ border-color:color-mix(in srgb,var(--accent) 16%, var(--line)); } .solutions-page .solution-quote{ border-left-color:var(--accent) !important; color:color-mix(in srgb,var(--text) 78%, var(--muted)) !important; } .solutions-page .solution-cta{ background:linear-gradient(110deg, color-mix(in srgb,var(--panel) 92%, var(--accent2) 8%), color-mix(in srgb,var(--panel) 78%, var(--accent) 22%)) !important; border-color:color-mix(in srgb,var(--accent) 28%,var(--line)) !important; box-shadow:0 18px 40px color-mix(in srgb,var(--accent) 10%, transparent) !important; } .solutions-page .solution-cta::after{ background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 24%, transparent),transparent 68%) !important; } .solutions-page .solution-cta span{color:var(--accent) !important} .solutions-page .solution-tab.active{ box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 32%,transparent), inset 0 -2px 0 color-mix(in srgb,var(--accent2) 72%,var(--accent)) !important; } .solutions-page .solution-tab-icon{ color:color-mix(in srgb,var(--accent2) 72%, white); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--accent2) 24%,transparent)) !important; border-color:color-mix(in srgb,var(--accent) 24%,var(--line)) !important; } .solutions-page .value-icon{ color:var(--accent) !important; background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,transparent),color-mix(in srgb,var(--accent2) 10%,transparent)) !important; border-color:color-mix(in srgb,var(--accent) 30%,var(--line)) !important; } .solutions-page .example-thumb{ background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,var(--panel)),color-mix(in srgb,var(--accent2) 16%,var(--panel))) !important; color:color-mix(in srgb,var(--accent2) 58%, var(--accent)) !important; } /* === Theme follow-up fix: Tools page must adapt to active theme === */ .tools-page{ --tools-hero-1: color-mix(in srgb,var(--accent) 78%, #07131f 22%); --tools-hero-2: color-mix(in srgb,var(--accent) 42%, var(--accent2) 58%); --tools-hero-3: color-mix(in srgb,var(--accent2) 36%, #07131f 64%); --tools-hero-text:#ffffff; } .tools-page .tools-hero{ background:linear-gradient(118deg,var(--tools-hero-1) 0%,var(--tools-hero-2) 46%,var(--tools-hero-3) 100%) !important; border-color:color-mix(in srgb,var(--accent) 28%,var(--line)) !important; box-shadow:0 20px 60px color-mix(in srgb,var(--accent) 16%, transparent) !important; } .tools-page .tools-hero-bg{ background: radial-gradient(circle at 9% 10%, color-mix(in srgb,var(--accent2) 28%, transparent), transparent 21%), radial-gradient(circle at 83% 20%, color-mix(in srgb,var(--accent) 18%, rgba(255,255,255,.22)), transparent 35%), linear-gradient(135deg,transparent 35%,rgba(255,255,255,.05)) !important; } .tools-page .tools-hero-copy{color:var(--tools-hero-text) !important} .tools-page .tools-kicker{ color:var(--tools-hero-text) !important; background:color-mix(in srgb,var(--panel-solid) 18%, transparent) !important; border-color:color-mix(in srgb,var(--tools-hero-text) 22%, transparent) !important; } .tools-page .tools-hero h1, .tools-page .tools-hero p, .tools-page .art-caption, .tools-page .art-caption b, .tools-page .tools-benefits{color:var(--tools-hero-text) !important} .tools-page .tools-hero h1 em, .tools-page .tools-benefits span:first-child, .tools-page .art-caption b{color:color-mix(in srgb,var(--accent2) 80%, white) !important} .tools-page .tools-hero p{opacity:.92} .tools-page .tools-hero-actions .tools-btn-primary, .tools-page .premium-side button{ color:var(--content-btn-text) !important; background:linear-gradient(135deg,var(--content-btn-1),var(--content-btn-2)) !important; border:1px solid color-mix(in srgb,var(--accent2) 30%, var(--line)) !important; box-shadow:0 12px 28px var(--content-btn-shadow), inset 0 1px 0 rgba(255,255,255,.18) !important; } .tools-page .tools-hero-actions .tools-btn-secondary{ color:var(--tools-hero-text) !important; background:color-mix(in srgb,var(--panel-solid) 15%, transparent) !important; border:1px solid color-mix(in srgb,var(--tools-hero-text) 24%, transparent) !important; box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 10%, transparent), inset 0 1px 0 rgba(255,255,255,.08) !important; } .tools-page .tools-hero-actions .tools-btn-secondary:hover{ background:color-mix(in srgb,var(--panel-solid) 24%, transparent) !important; border-color:color-mix(in srgb,var(--tools-hero-text) 32%, transparent) !important; } .tools-page .tools-hero-art::after{ background:linear-gradient(90deg, color-mix(in srgb,var(--accent) 36%, #04101a) 0%, transparent 22%, transparent 76%, color-mix(in srgb,var(--accent2) 18%, #04101a) 100%) !important; } .tools-page .tools-hero-art img{ box-shadow:0 0 0 2px color-mix(in srgb,var(--accent2) 34%, rgba(255,255,255,.2)),0 26px 70px rgba(0,0,0,.45) !important; } .tools-page .art-orbit{ border-color:color-mix(in srgb,var(--accent2) 30%, rgba(255,255,255,.2)) !important; } .tools-page .art-card{ border-color:color-mix(in srgb,var(--accent2) 28%, rgba(255,255,255,.25)) !important; background:linear-gradient(145deg,color-mix(in srgb,var(--accent2) 34%, rgba(255,255,255,.12)),color-mix(in srgb,var(--accent) 46%, rgba(3,10,26,.62))) !important; color:#ffffff !important; box-shadow:0 14px 30px rgba(0,0,0,.3),0 0 0 1px color-mix(in srgb,var(--accent) 10%, transparent) inset !important; } .tools-page .art-image{color:color-mix(in srgb,var(--accent) 35%, white) !important} .tools-page .art-play{color:color-mix(in srgb,var(--accent2) 62%, white) !important} .tools-page .premium-side{ background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 74%, #07131f 26%) 0%, color-mix(in srgb,var(--accent2) 24%, var(--accent) 76%) 48%, color-mix(in srgb,var(--accent2) 34%, #07131f 66%) 100%) !important; border-color:color-mix(in srgb,var(--accent) 30%,var(--line)) !important; color:#ffffff !important; box-shadow:0 18px 40px color-mix(in srgb,var(--accent) 14%, transparent) !important; } .tools-page .premium-side::before{ background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 26%, transparent),rgba(121,243,255,0) 72%) !important; } .tools-page .premium-bolt{ color:color-mix(in srgb,var(--accent2) 78%, white) !important; filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent2) 30%, transparent)) !important; } .tools-page .premium-side li{color:rgba(255,255,255,.9) !important} .tools-page .new-icon, .tools-page .rec-ico, .tools-page .ai-ticon{ box-shadow:inset 0 0 18px rgba(255,255,255,.22),0 7px 18px rgba(0,0,0,.22),0 0 0 1px color-mix(in srgb,var(--accent) 6%, transparent); } .tools-page .tools-new-grid h3 small{ background:linear-gradient(135deg,var(--content-btn-1),var(--content-btn-2)) !important; color:var(--content-btn-text) !important; } .tools-page .side-panel, .tools-page .ai-tool-card, .tools-page .tools-new-grid article, .tools-page .recommend-panel>a, .tools-page .guide-panel>a, .tools-page .tools-tabs, .tools-page .tools-tabs a{ border-color:color-mix(in srgb,var(--accent) 16%, var(--line)); } .tools-page .guide-panel>a span{ color:var(--accent) !important; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--panel)),color-mix(in srgb,var(--accent2) 8%,var(--panel))) !important; border-color:color-mix(in srgb,var(--accent) 24%,var(--line)) !important; } /* === Solutions page typography + icon enhancement === */ .solutions-page{ --sol-title-max: 52px; --sol-card-heading: 20px; --sol-body: 15px; } .solutions-page .solutions-kicker{ padding:7px 13px; font-size:12px; letter-spacing:.02em; } .solutions-page .solutions-hero h1{ font-size:clamp(42px,3vw,52px); line-height:1.04; margin:12px 0 10px; letter-spacing:-.03em; text-shadow:0 3px 16px rgba(0,0,0,.14); } .solutions-page .solutions-hero p{ font-size:15px; line-height:1.75; max-width:760px; } .solutions-page .solutions-hero-actions{gap:12px;margin-top:22px} .solutions-page .solutions-hero-actions a{ min-height:46px; padding:12px 20px; font-size:13px; border-radius:14px; } .solutions-page .hero-float{ padding:9px 12px; font-size:11px; border-radius:14px; } .solutions-page .solution-people-icon{ width:132px; height:132px; border-radius:38px; } .solutions-page .solution-people-icon svg{width:82px;height:82px} .solutions-page .solution-tabs{ border-radius:20px; overflow:hidden; } .solutions-page .solution-tab{ gap:12px; padding:16px 16px; } .solutions-page .solution-tab-icon{ width:42px; height:42px; flex:0 0 42px; border-radius:13px; } .solutions-page .solution-tab-icon svg{width:21px;height:21px;stroke-width:2.05} .solutions-page .solution-tab b{ font-size:13px; font-weight:800; } .solutions-page .solution-tab small{ font-size:10px; line-height:1.35; } .solutions-page .solution-profile{ border-radius:22px; box-shadow:0 18px 42px rgba(0,0,0,.10); } .solutions-page .solution-profile-copy{ padding:26px 24px; } .solutions-page .mini-label{ display:inline-flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.02em; text-transform:none; } .solutions-page .mini-label::before{ content:""; width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--accent2),var(--accent)); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 12%, transparent); } .solutions-page .solution-profile-copy h2{ font-size:clamp(38px,2.6vw,48px); line-height:1.02; margin:10px 0 10px; letter-spacing:-.03em; } .solutions-page .solution-profile-copy p{ font-size:14px; line-height:1.72; max-width:500px; } .solutions-page .solution-quote{ margin-top:22px; font-size:12px; line-height:1.72; border-left-width:4px; } .solutions-page .solution-value{ min-height:272px; padding:20px 18px; border-radius:20px; } .solutions-page .value-icon{ width:48px; height:48px; border-radius:15px; box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 28px rgba(0,0,0,.18),0 0 0 1px color-mix(in srgb,currentColor 12%, transparent); } .solutions-page .value-icon svg{width:24px;height:24px;stroke-width:2.05} .solutions-page .tasks-icon{ background:linear-gradient(145deg,color-mix(in srgb,#27d8ff 22%, var(--panel)),color-mix(in srgb,#1f83ff 12%, var(--panel))); } .solutions-page .tools-icon{ background:linear-gradient(145deg,color-mix(in srgb,#d07dff 22%, var(--panel)),color-mix(in srgb,#6b67ff 12%, var(--panel))); } .solutions-page .results-icon{ background:linear-gradient(145deg,color-mix(in srgb,#47e7ae 22%, var(--panel)),color-mix(in srgb,#1fa46f 12%, var(--panel))); } .solutions-page .solution-value h3{ font-size:19px; margin:12px 0 13px; letter-spacing:-.01em; } .solutions-page .solution-value ul{ font-size:12px; line-height:1.7; } .solutions-page .solution-value li{ padding-left:18px; margin:10px 0; } .solutions-page .solutions-page-head{ margin:2px 4px 2px; } .solutions-page .solutions-page-head h2{ font-size:28px; letter-spacing:-.02em; } .solutions-page .solutions-page-head a{ font-size:12px; font-weight:800; } .solutions-page .example-grid{ gap:12px; } .solutions-page .example-card{ min-height:128px; border-radius:18px; box-shadow:0 12px 30px rgba(0,0,0,.08); } .solutions-page .example-thumb{ width:96px; flex:0 0 96px; border-right:1px solid color-mix(in srgb,var(--accent) 12%,var(--line)); } .solutions-page .example-thumb svg{width:28px;height:28px;stroke-width:2.05} .solutions-page .example-card div{padding:15px 14px} .solutions-page .example-card b{ display:block; font-size:14px; line-height:1.35; margin-bottom:4px; } .solutions-page .example-card p{ font-size:11px; line-height:1.55; margin:6px 0 9px; } .solutions-page .example-card small{ padding:4px 9px; font-size:9px; font-weight:800; } .solutions-page .icon-chart{background:linear-gradient(145deg,rgba(62,196,255,.18),rgba(84,121,255,.18));color:#7bdcff} .solutions-page .icon-megaphone{background:linear-gradient(145deg,rgba(255,130,176,.18),rgba(120,101,255,.18));color:#ff94c5} .solutions-page .icon-document{background:linear-gradient(145deg,rgba(101,148,255,.18),rgba(85,213,255,.18));color:#9cc8ff} .solutions-page .icon-chatbot{background:linear-gradient(145deg,rgba(78,229,201,.18),rgba(81,137,255,.18));color:#7ff0de} .solutions-page .icon-book{background:linear-gradient(145deg,rgba(88,205,255,.18),rgba(100,121,255,.18));color:#9be6ff} .solutions-page .icon-quiz{background:linear-gradient(145deg,rgba(255,188,96,.18),rgba(255,103,135,.16));color:#ffc774} .solutions-page .icon-translate{background:linear-gradient(145deg,rgba(93,232,255,.16),rgba(124,146,255,.16));color:#86f1ff} .solutions-page .icon-target{background:linear-gradient(145deg,rgba(255,143,201,.18),rgba(128,100,255,.16));color:#ff9fd4} .solutions-page .icon-research{background:linear-gradient(145deg,rgba(85,209,255,.18),rgba(97,123,255,.16));color:#91e7ff} .solutions-page .icon-slides{background:linear-gradient(145deg,rgba(160,137,255,.18),rgba(104,119,255,.16));color:#c8b1ff} .solutions-page .icon-portfolio{background:linear-gradient(145deg,rgba(78,231,191,.18),rgba(79,140,255,.16));color:#8bf0d0} .solutions-page .icon-idea{background:linear-gradient(145deg,rgba(255,199,99,.18),rgba(255,117,102,.16));color:#ffd37e} .solutions-page .icon-image{background:linear-gradient(145deg,rgba(255,126,207,.18),rgba(118,115,255,.16));color:#ff9de2} .solutions-page .icon-video{background:linear-gradient(145deg,rgba(107,223,255,.18),rgba(106,112,255,.16));color:#8be7ff} .solutions-page .icon-calendar{background:linear-gradient(145deg,rgba(83,235,181,.18),rgba(93,147,255,.16));color:#89f0c2} .solutions-page .icon-proposal{background:linear-gradient(145deg,rgba(255,147,116,.18),rgba(255,92,147,.16));color:#ffab8d} .solutions-page .icon-workflow{background:linear-gradient(145deg,rgba(115,175,255,.18),rgba(119,110,255,.16));color:#a1c0ff} .solutions-page .icon-meeting{background:linear-gradient(145deg,rgba(92,238,255,.18),rgba(93,123,255,.16));color:#94ecff} .solutions-page .icon-email{background:linear-gradient(145deg,rgba(114,184,255,.18),rgba(104,117,255,.16));color:#abcfff} .solutions-page .icon-sop{background:linear-gradient(145deg,rgba(255,174,110,.18),rgba(255,109,161,.16));color:#ffc188} .solutions-page .solution-cta{ padding:22px 24px; border-radius:22px; } .solutions-page .solution-cta span{ font-size:11px; letter-spacing:.02em; } .solutions-page .solution-cta h3{ font-size:28px; line-height:1.12; margin:6px 0; letter-spacing:-.02em; } .solutions-page .solution-cta p{ font-size:13px; line-height:1.65; } .solutions-page .solution-cta-actions a{ min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:11px 18px; border-radius:14px; font-size:13px; font-weight:900; } @media(max-width:980px){ .solutions-page .solutions-hero h1{font-size:40px} .solutions-page .solution-profile-copy h2{font-size:36px} .solutions-page .solutions-page-head h2{font-size:24px} } @media(max-width:720px){ .solutions-page .solutions-kicker{font-size:11px} .solutions-page .solutions-hero h1{font-size:32px} .solutions-page .solutions-hero p{font-size:13px} .solutions-page .solution-tab{min-width:220px} .solutions-page .solution-tab b{font-size:12px} .solutions-page .solution-tab small{font-size:9px} .solutions-page .solution-profile-copy h2{font-size:30px} .solutions-page .solution-profile-copy p{font-size:13px} .solutions-page .solution-value{min-height:auto} .solutions-page .solution-value h3{font-size:17px} .solutions-page .solution-value ul{font-size:11px} .solutions-page .solutions-page-head h2{font-size:22px} .solutions-page .example-thumb{width:84px;flex-basis:84px} .solutions-page .example-card b{font-size:13px} .solutions-page .solution-cta h3{font-size:24px} } /* === Solutions icon clarity fix === */ .solutions-page .solution-tab-icon::after, .solutions-page .value-icon::after, .solutions-page .example-thumb::after{ display:none; } .solutions-page .solution-tab-icon, .solutions-page .value-icon, .solutions-page .example-thumb{ box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 10px 22px rgba(3,16,38,.18) !important; } .solutions-page .solution-tab-icon svg, .solutions-page .value-icon svg, .solutions-page .example-thumb svg{ stroke-width:2.15 !important; filter:drop-shadow(0 0 6px currentColor); } .solutions-page .solution-tab.active .solution-tab-icon{ box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 12px 26px rgba(21,112,255,.24),0 0 0 1px color-mix(in srgb,currentColor 30%, transparent) !important; } .solutions-page .example-thumb{ background-size:100% 100%; } .solutions-page .example-thumb svg{ width:30px; height:30px; } /* translate example icon switched to letter A */ .solutions-page .icon-translate{display:grid;place-items:center} .solutions-page .icon-translate svg text{font-size:15px;font-weight:900;letter-spacing:.02em;filter:drop-shadow(0 0 6px currentColor)} /* === Settings nav active state: make current page unmistakable === */ .page-settings .nav a[href="Settings.html"]{ position:relative; color:var(--text)!important; font-weight:800!important; background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 30%,transparent), color-mix(in srgb,var(--accent2) 14%,transparent))!important; box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--accent) 54%,var(--line)), 0 10px 26px color-mix(in srgb,var(--accent) 12%,transparent)!important; } .page-settings .nav a[href="Settings.html"]::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:4px; border-radius:0 999px 999px 0; background:linear-gradient(180deg,var(--accent2),var(--accent)); box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent); } .page-settings .nav a[href="Settings.html"]::after{ content:""!important; position:absolute!important; right:10px!important; width:7px!important; height:7px!important; border-radius:50%!important; background:linear-gradient(135deg,var(--accent2),var(--accent))!important; box-shadow:0 0 14px var(--accent)!important; } .page-settings .nav a[href="Settings.html"] .ico{ transform:scale(1.08); color:#fff!important; border-color:color-mix(in srgb,var(--accent2) 48%,var(--line))!important; background:linear-gradient(145deg,var(--accent2),var(--accent))!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 3px color-mix(in srgb,var(--accent) 13%,transparent), 0 10px 26px color-mix(in srgb,var(--accent) 22%,transparent)!important; } .page-settings .nav a[href="Settings.html"] .nav-label{ color:var(--text)!important; }