*{box-sizing:border-box}html{scroll-behavior:smooth}:root{--bg:#070b16;--panel:#0d1425;--panel2:#111a2e;--line:#ffffff16;--text:#f8fafc;--muted:#91a0b7;--accent:#7c3aed;--accent2:#06b6d4;--green:#22c55e;--red:#ef4444;--amber:#f59e0b}body{margin:0;background:radial-gradient(circle at 10% 0,#7c3aed1d,transparent 28%),radial-gradient(circle at 90% 10%,#06b6d41a,transparent 24%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}.wrap{width:min(1180px,calc(100% - 36px));margin:auto}.nav{height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:20px;font-weight:850;display:flex;align-items:center;gap:11px}.brandmark{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center}.links{display:flex;align-items:center;gap:12px}.links a{font-size:14px;color:#c5cfdd}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#ffffff08;color:#fff;border-radius:12px;padding:11px 15px;font-weight:750;font-size:14px;cursor:pointer}.btn:hover{border-color:#ffffff2f}.btn.primary{background:linear-gradient(135deg,var(--accent),#2563eb);border:0}.btn.danger{background:#ef444414;border-color:#ef44443b;color:#fecaca}.hero{padding:88px 0 64px;display:grid;grid-template-columns:1.04fr .96fr;gap:62px;align-items:center}.eyebrow{color:#b9a7ff;font-weight:800;text-transform:uppercase;letter-spacing:1.6px;font-size:12px}.hero h1{font-size:clamp(48px,7vw,84px);line-height:.98;letter-spacing:-4px;margin:15px 0 22px}.grad{background:linear-gradient(90deg,#fff,#a995ff 50%,#67e8f9);-webkit-background-clip:text;background-clip:text;color:transparent}.hero p{color:var(--muted);font-size:18px;line-height:1.8}.hero-card{border:1px solid var(--line);background:#0e1729cc;backdrop-filter:blur(18px);border-radius:28px;padding:22px;box-shadow:0 28px 90px #0008}.mock{border:1px solid var(--line);background:#08101f;border-radius:20px;padding:22px;min-height:340px}.mock .dots{display:flex;gap:6px}.mock .dots i{width:8px;height:8px;border-radius:50%;background:#334155}.mock .dots i:first-child{background:#8b5cf6}.chart{height:150px;margin-top:55px;position:relative;overflow:hidden}.chart:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,#7c3aed2d 31%,#06b6d42a 60%,transparent 61%);clip-path:polygon(0 80%,15% 55%,30% 68%,46% 30%,60% 53%,77% 20%,100% 35%,100% 100%,0 100%)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.stat{padding:13px;border:1px solid var(--line);background:#ffffff05;border-radius:13px}.stat small{color:#718096}.stat b{display:block;margin-top:4px}.section{padding:62px 0}.section h2{font-size:38px;letter-spacing:-1.7px;margin:0 0 8px}.section .lead{color:var(--muted);line-height:1.7}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}.card{border:1px solid var(--line);background:#ffffff05;border-radius:19px;padding:23px}.card h3{margin:0 0 8px}.card p{color:var(--muted);line-height:1.7;font-size:14px}.authshell{min-height:calc(100vh - 74px);display:grid;place-items:center;padding:42px 0}.authbox{width:min(500px,100%);border:1px solid var(--line);background:#0d1425e8;border-radius:24px;padding:28px;box-shadow:0 28px 90px #0006}.authbox h1{margin:0 0 8px;letter-spacing:-1.2px}.muted{color:var(--muted)}form{margin:0}.field{margin:16px 0}.field label{display:block;font-size:13px;font-weight:750;margin-bottom:7px;color:#d8e0eb}.input,.select,.textarea{width:100%;border:1px solid var(--line);background:#080f1e;color:#fff;border-radius:12px;padding:12px 13px;outline:none}.textarea{min-height:100px;resize:vertical}.input:focus,.select:focus,.textarea:focus{border-color:#7c3aed88}.flash{padding:12px 14px;border-radius:12px;margin:14px 0;border:1px solid}.flash.success{background:#22c55e10;border-color:#22c55e3b;color:#bbf7d0}.flash.error{background:#ef444410;border-color:#ef44443b;color:#fecaca}.dash{padding:36px 0 70px}.dashhead{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:26px}.dashhead h1{margin:0;letter-spacing:-1.5px}.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}.panel{border:1px solid var(--line);background:#0d1425bf;border-radius:18px;padding:20px}.panel h2,.panel h3{margin-top:0}.site{border:1px solid var(--line);background:#ffffff04;border-radius:15px;padding:16px;margin:12px 0;display:flex;justify-content:space-between;align-items:center;gap:15px}.site strong{display:block;margin-bottom:4px}.site small{color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:8px}.status{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:11px;font-weight:800}.status.green{background:#22c55e16;color:#86efac}.status.amber{background:#f59e0b16;color:#fcd34d}.status.gray{background:#94a3b816;color:#cbd5e1}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#030712;border:1px solid var(--line);padding:11px 12px;border-radius:10px;word-break:break-all;font-size:12px;color:#c4b5fd}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px 9px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}.table th{color:#8290a7;font-size:11px;text-transform:uppercase;letter-spacing:.8px}.help{padding:14px;border:1px dashed #7c3aed55;border-radius:13px;background:#7c3aed0c;color:#aab5c6;font-size:13px;line-height:1.7}.footer{border-top:1px solid var(--line);padding:24px 0;color:#64748b;font-size:13px;margin-top:45px}@media(max-width:900px){.hero,.grid2{grid-template-columns:1fr}.hero{padding-top:50px}.hero h1{letter-spacing:-2.7px}.cards{grid-template-columns:1fr}.links .hide-sm{display:none}.dashhead{align-items:flex-start;flex-direction:column}.site{align-items:flex-start;flex-direction:column}}@media(max-width:520px){.wrap{width:min(100% - 26px,1180px)}.nav{height:66px}.hero{padding:42px 0}.hero p{font-size:16px}.stats{grid-template-columns:1fr}.authbox{padding:21px}.actions .btn{flex:1}.table{display:block;overflow:auto}}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px}.kpi{border:1px solid var(--line);background:#ffffff05;border-radius:17px;padding:18px}.kpi small{color:#8290a7;letter-spacing:1px;font-size:11px}.kpi b{display:block;font-size:28px;margin-top:6px;letter-spacing:-1px}
.topbar{position:sticky;top:0;z-index:100;background:#070b16f2;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.topbar .nav{height:68px;border:0;display:flex;align-items:center;justify-content:space-between;gap:24px}.public-nav{display:flex;align-items:center;gap:10px}.public-nav>a:not(.btn){font-size:13px;font-weight:700;color:#aab6c8;padding:9px 10px;border-radius:10px}.public-nav>a:not(.btn):hover{background:#ffffff08;color:#fff}
.navicon{width:20px;height:20px;display:block}.bellicon{width:40px;height:40px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;position:relative;color:#cbd5e1;background:#ffffff05}.bellicon:hover,.bellicon.active{background:#ffffff0b;color:#fff}.badge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;border:2px solid #070b16;display:grid;place-items:center;font-size:9px;font-weight:900}
.navmore{position:relative}.navmore summary{list-style:none;cursor:pointer}.navmore summary::-webkit-details-marker{display:none}.avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#7c3aed,#2563eb);font-weight:900;color:#fff}.navmenu{position:absolute;top:48px;right:0;width:250px;padding:8px;border:1px solid var(--line);border-radius:14px;background:#0b1221;box-shadow:0 22px 70px #000a;display:grid;gap:3px;z-index:140}.navmenu a{padding:11px 12px;border-radius:9px;color:#cbd5e1;font-size:13px}.navmenu a:hover{background:#ffffff09;color:#fff}.navmenu strong,.navmenu small{padding:5px 12px;overflow:hidden;text-overflow:ellipsis}.navmenu small{color:var(--muted);padding-top:0;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:4px}
.app-auth{padding-left:248px}.app-sidebar{position:fixed;left:0;top:0;bottom:0;width:248px;background:#09111f;border-right:1px solid var(--line);z-index:120;display:flex;flex-direction:column}.sidebar-brand{height:72px;display:flex;align-items:center;padding:0 20px;border-bottom:1px solid var(--line)}.sidebar-brand .brand{font-size:19px}.sidebar-nav{padding:18px 14px;overflow:auto;flex:1}.side-group{display:grid;gap:4px;margin-bottom:22px}.side-label{padding:0 10px 7px;color:#59677c;font-size:10px;font-weight:900;letter-spacing:1.4px}.side-link{display:flex;align-items:center;gap:11px;min-height:42px;padding:0 12px;border-radius:11px;color:#99a7bb;font-size:13px;font-weight:750}.side-link:hover{background:#ffffff07;color:#eef2ff}.side-link.active{background:linear-gradient(90deg,#7c3aed20,#2563eb0d);color:#fff;box-shadow:inset 3px 0 #8b5cf6}.side-dot{width:7px;height:7px;border-radius:50%;background:#3a475b;flex:0 0 auto}.side-link.active .side-dot{background:#a78bfa;box-shadow:0 0 0 4px #7c3aed20}.sidebar-bottom{padding:14px;border-top:1px solid var(--line);display:grid;gap:6px}.side-language,.side-logout{min-height:40px;display:flex;align-items:center;gap:10px;padding:0 10px;border-radius:10px;color:#8f9db2;font-size:12px;font-weight:750}.side-language:hover,.side-logout:hover{background:#ffffff07;color:#fff}.side-language span{width:29px;height:25px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;color:#d7deea;font-size:10px;font-weight:900}
.app-topbar{position:sticky;top:0;z-index:100;height:64px;background:#070b16ec;backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 24px}.app-topbar .topbar-spacer{flex:1}.app-topbar .nav-tools{display:flex;align-items:center;gap:9px;margin-left:auto}.app-topbar .mobile-brand{display:none}.app-auth .mobile-nav{display:none}.app-auth .dash{padding-top:28px}.app-auth .footer{margin-top:30px}.app-auth .wrap{width:min(1120px,calc(100% - 48px))}
.mobile-nav{display:none;position:relative}.mobile-nav>summary{list-style:none;width:40px;height:40px;border:1px solid var(--line);border-radius:11px;display:grid;place-items:center;cursor:pointer;font-size:20px}.mobile-nav>summary::-webkit-details-marker{display:none}.mobile-menu{position:absolute;right:0;top:48px;width:min(310px,calc(100vw - 28px));padding:10px;border:1px solid var(--line);border-radius:16px;background:#0b1221;box-shadow:0 24px 80px #000c;display:grid;z-index:140}.mobile-menu a{padding:12px;border-radius:10px;color:#d5deea;font-weight:700;font-size:14px;display:flex;align-items:center;gap:10px}.mobile-menu a:hover{background:#ffffff08}.badge-inline{margin-left:auto;background:#ef4444;color:#fff;border-radius:999px;padding:2px 7px;font-size:10px}
.notification-head-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.unread-summary{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:#ffffff05;color:#cbd5e1;font-size:13px}.notification-list{display:grid;gap:10px}.notification-card{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid var(--line);background:#0d1425a8;border-radius:17px;padding:16px 18px}.notification-card.unread{background:linear-gradient(90deg,#7c3aed12,#0d1425d9 35%);border-color:#7c3aed45;box-shadow:inset 3px 0 #8b5cf6}.notification-icon{width:44px;height:44px;border-radius:13px;background:#ffffff08;border:1px solid var(--line);display:grid;place-items:center}.notice-svg{width:21px;height:21px;color:#c4b5fd}.notification-body{min-width:0}.notification-title-row{display:flex;align-items:center;gap:8px}.notification-body p{margin:5px 0;color:#aab6c8;line-height:1.5;font-size:13px}.notification-body time{font-size:11px;color:#68758a}.new-pill{padding:3px 6px;border-radius:999px;background:#7c3aed26;color:#c4b5fd;font-size:9px;font-weight:900}.notification-actions{display:flex;align-items:center;gap:7px}
@media(max-width:900px){.app-auth{padding-left:0}.app-sidebar{display:none}.app-topbar{height:64px;padding:0 14px}.app-topbar .mobile-brand{display:block}.app-topbar .mobile-brand .brand{font-size:17px}.app-topbar .mobile-brand .brandmark{width:32px;height:32px}.app-topbar .nav-tools>.bellicon,.app-topbar .nav-tools>.account{display:none}.app-auth .mobile-nav{display:block;margin-left:0}.app-auth .wrap{width:min(100% - 28px,1180px)}.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.notification-card{grid-template-columns:42px 1fr;padding:14px}.notification-actions{grid-column:2}.notification-head-actions{width:100%;justify-content:space-between}}
@media(max-width:520px){.kpis{grid-template-columns:1fr}.public-nav>a:first-child,.public-nav>a:nth-child(2){display:none}}
/* Documentation centre */
.docs-page{max-width:1180px}.docs-hero{border:1px solid var(--line);background:linear-gradient(135deg,#111a2eea,#0b1324d9);border-radius:24px;padding:30px;margin-bottom:18px;box-shadow:0 22px 70px #0004}.docs-hero h1{font-size:clamp(34px,5vw,56px);letter-spacing:-2.4px;margin:8px 0 12px}.docs-hero>p{color:#aab6c8;line-height:1.8;max-width:880px;margin:0 0 18px}.doc-section{margin-bottom:18px}.doc-section>h2,.faq-group>h2,.legal-section>h2{letter-spacing:-.7px}.doc-section p,.legal-section p{line-height:1.8}
.doc-flow{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding:12px 2px 4px;scrollbar-width:thin}.flow-node{min-width:145px;flex:1;border:1px solid #7c3aed35;background:#7c3aed0c;border-radius:14px;padding:14px;display:flex;align-items:center;gap:9px}.flow-node span{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;background:#7c3aed2b;color:#c4b5fd;font-size:11px;font-weight:900;flex:0 0 auto}.flow-node strong{font-size:12px;line-height:1.35}.flow-arrow{display:grid;place-items:center;color:#58657a;font-size:20px;flex:0 0 18px}
.doc-status{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding:13px 0}.doc-status:last-child{border-bottom:0}.doc-status strong{display:block;font-size:14px}.doc-status small{display:block;color:#7f8da2;margin-top:4px;line-height:1.5;max-width:760px}
.doc-steps{margin:0;padding-left:24px;counter-reset:item}.doc-steps li{padding:8px 0 8px 5px;color:#c4cedc;line-height:1.72}.doc-steps li::marker{color:#a78bfa;font-weight:900}.doc-steps a{color:#c4b5fd;text-decoration:underline;text-decoration-color:#7c3aed70;text-underline-offset:3px}.doc-steps code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#d8b4fe;background:#030712;border:1px solid var(--line);border-radius:7px;padding:2px 6px}
.doc-ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.doc-ref{display:flex;align-items:center;justify-content:space-between;min-height:46px;padding:0 13px;border:1px solid var(--line);border-radius:11px;background:#ffffff04;color:#cbd5e1;font-size:13px;font-weight:750}.doc-ref:hover{background:#7c3aed10;border-color:#7c3aed45;color:#fff}
.doc-callout{margin-top:16px;padding:15px 16px;border-radius:13px;border:1px solid #2563eb38;background:#2563eb0d}.doc-callout.warn{border-color:#f59e0b3d;background:#f59e0b0b}.doc-callout strong{display:block;margin-bottom:5px}.doc-callout p{margin:0;color:#aeb9c8;line-height:1.65;font-size:13px}
.faq-group{margin-bottom:18px}.faq-item{border-top:1px solid var(--line)}.faq-item:first-of-type{border-top:0}.faq-item summary{list-style:none;cursor:pointer;padding:15px 2px;font-weight:800;color:#e6ebf3;display:flex;justify-content:space-between;gap:14px}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";color:#8b9ab1;font-size:18px;font-weight:500}.faq-item[open] summary:after{content:"−"}.faq-answer{padding:0 2px 16px;color:#99a7ba;line-height:1.75;font-size:14px}
.legal-doc{display:grid;gap:12px}.legal-section{padding:22px}.legal-section h2{font-size:19px;margin-bottom:8px}.legal-section p{margin:0;color:#aeb8c7}
@media(max-width:800px){.doc-ref-grid{grid-template-columns:1fr 1fr}.docs-hero{padding:22px}.doc-status{align-items:flex-start;flex-direction:column}.doc-status .status{align-self:flex-start}}
@media(max-width:540px){.doc-ref-grid{grid-template-columns:1fr}.docs-hero{padding:18px;border-radius:18px}.docs-hero h1{letter-spacing:-1.5px}.flow-node{min-width:160px}.legal-section{padding:18px}}
.flow-stack{display:grid;gap:18px;margin-top:12px}.flow-block{border:1px solid var(--line);background:#ffffff03;border-radius:16px;padding:16px}.flow-block h3{margin:0 0 8px;font-size:15px}.flow-note{margin:10px 0 0!important;color:#8f9bb0!important;font-size:12px!important;line-height:1.6!important}
/* Tutorial flow layout fix: 2026-09-18 */
.docs-page,.doc-section,.flow-stack,.flow-block{min-width:0}
.docs-page{overflow-x:clip}
.doc-section,.flow-block{overflow:hidden}
.doc-flow{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
align-items:stretch;
gap:10px;
overflow:visible;
padding:12px 0 4px;
min-width:0;
}
.flow-node{
min-width:0;
width:100%;
height:100%;
padding:14px;
}
.flow-node strong{
min-width:0;
overflow-wrap:anywhere;
word-break:normal;
}
.flow-arrow{display:none}
/* Master Vidora workflow: keep every step visible without horizontal scrolling. */
.docs-page > .doc-section:first-of-type .doc-flow{
grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:700px){
.docs-page > .doc-section:first-of-type .doc-flow,
.flow-block .doc-flow{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:460px){
.docs-page > .doc-section:first-of-type .doc-flow,
.flow-block .doc-flow{
grid-template-columns:1fr;
}
}
.flow-node{position:relative}
.flow-node:not(:last-child)::after{
content:"›";
position:absolute;
right:9px;
top:7px;
color:#58657a;
font-size:18px;
line-height:1;
}
@media(max-width:460px){
.flow-node:not(:last-child)::after{content:"↓"}
}
/* Guest mobile navigation refinement: 2026-09-18 */
.guest-desktop-nav{display:flex;align-items:center;gap:10px}
.guest-desktop-nav>a:not(.btn){font-size:13px;font-weight:700;color:#aab6c8;padding:9px 10px;border-radius:10px}
.guest-desktop-nav>a:not(.btn):hover{background:#ffffff08;color:#fff}
.guest-mobile-actions{display:none}
.public-mobile-nav{position:relative}
.public-mobile-nav>summary{list-style:none}
.public-mobile-nav>summary::-webkit-details-marker{display:none}
.hamburger-bars{width:18px;height:14px;display:flex;flex-direction:column;justify-content:space-between}
.hamburger-bars i{display:block;width:100%;height:2px;border-radius:999px;background:currentColor}
@media(max-width:760px){
.guest-topbar .wrap{width:min(100% - 24px,1180px)}
.guest-nav{height:68px;gap:10px;min-width:0}
.guest-brand{font-size:18px;gap:9px;min-width:0;flex:0 1 auto}
.guest-brand .brandmark{width:36px;height:36px;border-radius:11px;flex:0 0 auto}
.guest-brand>span:last-child{font-size:18px;letter-spacing:.2px;white-space:nowrap}
.public-nav{margin-left:auto;min-width:0;gap:0}
.guest-desktop-nav{display:none}
.guest-mobile-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.guest-mobile-cta{min-height:40px;padding:9px 12px;font-size:12px;line-height:1.1;border-radius:11px;white-space:nowrap;flex:0 0 auto}
.public-mobile-nav{display:block;flex:0 0 auto}
.public-mobile-nav>summary{
width:40px;height:40px;display:grid;place-items:center;
border:1px solid var(--line);border-radius:11px;
background:#ffffff06;color:#e5e7eb;cursor:pointer
}
.public-mobile-nav[open]>summary{background:#ffffff0d;border-color:#ffffff28;color:#fff}
.public-mobile-menu{
position:absolute;right:0;top:48px;
width:min(280px,calc(100vw - 24px));
padding:8px;border:1px solid var(--line);border-radius:15px;
background:#0b1221;box-shadow:0 24px 80px #000c;
display:grid;gap:3px;z-index:220
}
.public-mobile-menu a{
min-height:46px;padding:0 12px;border-radius:10px;
display:flex;align-items:center;justify-content:space-between;gap:12px;
color:#d7deea;font-size:14px;font-weight:750
}
.public-mobile-menu a:hover{background:#ffffff08;color:#fff}
.public-mobile-menu small{
display:grid;place-items:center;min-width:34px;height:27px;padding:0 8px;
border:1px solid var(--line);border-radius:8px;color:#c4b5fd;
font-size:10px;font-weight:900
}
}
@media(max-width:380px){
.guest-topbar .wrap{width:min(100% - 18px,1180px)}
.guest-nav{gap:7px}
.guest-brand{gap:7px}
.guest-brand .brandmark{width:34px;height:34px}
.guest-brand>span:last-child{font-size:16px}
.guest-mobile-actions{gap:6px}
.guest-mobile-cta{padding:9px 10px;font-size:11px}
.public-mobile-nav>summary{width:38px;height:38px}
}
/* Vidora AIDA sales homepage: 2026-09-18 */
.sales-home{overflow:hidden}
.sales-home .sales-hero{padding:92px 0 66px;grid-template-columns:1.08fr .92fr;gap:54px}
.sales-home .sales-hero h1{font-size:clamp(46px,6.6vw,78px);line-height:1;letter-spacing:-3.7px;margin:14px 0 20px}
.sales-home .sales-hero p{max-width:720px}
.hero-proof{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0 0}
.hero-proof span{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#ffffff06;border-radius:999px;padding:8px 11px;color:#b9c4d3;font-size:12px;font-weight:750}
.hero-proof span:before{content:"✓";display:grid;place-items:center;width:18px;height:18px;border-radius:999px;background:#22c55e18;color:#86efac;font-size:10px;font-weight:900}
.sales-demo{border:1px solid #7c3aed35;background:linear-gradient(180deg,#111a2ef2,#091120e8);border-radius:24px;padding:20px;box-shadow:0 28px 90px #0007}
.sales-demo-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.sales-demo-top strong{font-size:14px}
.live-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border-radius:999px;background:#22c55e14;color:#86efac;font-size:10px;font-weight:900}
.live-pill:before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e}
.demo-chat{display:grid;gap:10px}
.demo-msg{max-width:88%;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.55}
.demo-msg.user{justify-self:end;background:linear-gradient(135deg,#7c3aed,#2563eb);color:white;border-bottom-right-radius:5px}
.demo-msg.ai{justify-self:start;background:#ffffff07;border:1px solid var(--line);color:#d7deea;border-bottom-left-radius:5px}
.demo-result{margin-top:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.demo-result div{border:1px solid var(--line);background:#ffffff04;border-radius:12px;padding:11px}
.demo-result small{display:block;color:#7d8ba0;font-size:9px;letter-spacing:.8px;font-weight:900}
.demo-result b{display:block;margin-top:5px;font-size:13px}
.sales-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#ffffff02}
.sales-strip-inner{padding:18px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.sales-strip-item{padding:10px 12px;text-align:center;color:#aeb8c7;font-size:12px;font-weight:800}
.sales-strip-item b{color:#fff}
.sales-section{padding:76px 0}
.sales-section.compact{padding:58px 0}
.sales-heading{max-width:760px;margin-bottom:28px}
.sales-heading.center{text-align:center;margin-left:auto;margin-right:auto}
.sales-heading h2{font-size:clamp(32px,4.5vw,52px);line-height:1.05;letter-spacing:-2.2px;margin:9px 0 12px}
.sales-heading p{color:var(--muted);font-size:16px;line-height:1.75;margin:0}
.problem-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}
.problem-card,.benefit-card,.feature-card,.use-card,.security-card{border:1px solid var(--line);background:#ffffff04;border-radius:18px;padding:26px}
.problem-card h3,.benefit-card h3,.feature-card h3,.use-card h3,.security-card h3{margin:0 0 9px}
.problem-card p,.benefit-card p,.feature-card p,.use-card p,.security-card p{margin:0;color:#9dabbf;line-height:1.7;font-size:14px}
.problem-list{display:grid;gap:10px;margin-top:16px}
.problem-list div{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);color:#c8d1dd;font-size:14px}
.problem-list div:last-child{border-bottom:0}
.problem-list span{width:24px;height:24px;flex:0 0 24px;border-radius:8px;background:#ef444412;color:#fca5a5;display:grid;place-items:center;font-size:12px;font-weight:900}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feature-card{position:relative;overflow:hidden}
.feature-card:before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;right:-50px;top:-55px;background:#7c3aed10}
.feature-icon{width:40px;height:40px;border:1px solid #7c3aed35;border-radius:12px;background:#7c3aed12;display:grid;place-items:center;margin-bottom:15px;color:#c4b5fd;font-weight:900}
.feature-card .mini{display:inline-flex;margin-top:14px;color:#b9a7ff;font-size:11px;font-weight:850}
.workflow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;counter-reset:workflow}
.workflow-step{position:relative;border:1px solid var(--line);background:#0d1425c7;border-radius:17px;padding:24px;min-height:170px}
.workflow-step:before{counter-increment:workflow;content:counter(workflow);width:30px;height:30px;border-radius:10px;background:#7c3aed20;color:#c4b5fd;display:grid;place-items:center;font-size:11px;font-weight:900;margin-bottom:18px}
.workflow-step h3{font-size:15px;margin:0 0 7px}
.workflow-step p{font-size:13px;line-height:1.65;color:#92a0b5;margin:0}
.workflow-step:not(:last-child):after{content:"→";position:absolute;right:-24px;top:50%;transform:translateY(-50%);z-index:3;color:#57657a;font-size:18px}
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.benefit-card{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start}
.benefit-mark{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#7c3aed22,#06b6d417);border:1px solid #7c3aed2f;display:grid;place-items:center;color:#d8b4fe;font-weight:900}
.benefit-card h3{font-size:16px}
.use-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.use-card{min-height:190px}
.use-card .tag{display:inline-flex;padding:5px 8px;border-radius:999px;background:#ffffff07;color:#c4b5fd;font-size:10px;font-weight:900;margin-bottom:16px}
.use-card ul{padding-left:17px;margin:13px 0 0;color:#9daabe;font-size:13px;line-height:1.8}
.security-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.security-card{background:linear-gradient(145deg,#10182ad9,#0b1220d9)}
.security-points{display:grid;gap:10px;margin-top:15px}
.security-points div{padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:#ffffff03;color:#b7c2d0;font-size:13px}
.security-points strong{color:#fff}
.usecase-showcase{position:relative}
.usecase-live-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.usecase-live-card{position:relative;min-height:360px;padding:0;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#10182ad9,#0b1220d9);text-decoration:none;overflow:hidden;transition:transform .2s ease,border-color .2s ease}
.usecase-live-card:before{content:"";position:absolute;width:130px;height:130px;border-radius:50%;right:-52px;top:-58px;background:#7c3aed14;pointer-events:none;z-index:2}
.usecase-live-card:hover{transform:translateY(-5px);border-color:#7c3aed66}
.usecase-live-shot{aspect-ratio:1200/760;overflow:hidden;background:#050914;border-bottom:1px solid var(--line)}
.usecase-live-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .3s ease}
.usecase-live-card:hover .usecase-live-shot img{transform:scale(1.02)}
.usecase-live-copy{padding:24px;display:flex;flex-direction:column;min-height:175px}
.usecase-live-card .usecase-type{display:inline-flex;font-size:10px;letter-spacing:1.3px;font-weight:900;color:#c4b5fd;margin-bottom:16px}
.usecase-live-card h3{font-size:20px;margin:0 0 10px}
.usecase-live-card p{margin:0;color:#98a6ba;line-height:1.7;font-size:13px}
.usecase-live-card strong{display:block;margin-top:auto;padding-top:20px;font-size:12px}
.usecase-live-card.uc-health:before{background:#06b6d422}.usecase-live-card.uc-health .usecase-type{color:#67e8f9}
.usecase-live-card.uc-property:before{background:#eab3081c}.usecase-live-card.uc-property .usecase-type{color:#facc15}
.usecase-live-card.uc-education:before{background:#a855f71d}.usecase-live-card.uc-education .usecase-type{color:#d8b4fe}
.usecase-live-card.uc-event:before{background:#f9731620}.usecase-live-card.uc-event .usecase-type{color:#fdba74}
.usecase-live-card.uc-agency:before{background:#f43f5e1f}.usecase-live-card.uc-agency .usecase-type{color:#fda4af}
.usecase-live-card.uc-commerce:before{background:#22c55e1c}.usecase-live-card.uc-commerce .usecase-type{color:#86efac}
.usecase-live-card.uc-reservation:before{background:#d9a34322}.usecase-live-card.uc-reservation .usecase-type{color:#e9c46a}
.usecase-live-card.uc-waba{background:linear-gradient(135deg,#0d2119,#0d1729)}
.usecase-live-card.uc-waba:before{background:#25d36622}.usecase-live-card.uc-waba .usecase-type{color:#6ee7a0}
.usecase-all{display:flex;justify-content:center;margin-top:28px}
.sales-cta{padding:0 0 80px}
.sales-cta-box{border:1px solid #7c3aed45;background:radial-gradient(circle at 15% 0,#7c3aed29,transparent 38%),linear-gradient(135deg,#111a2e,#0a1221);border-radius:28px;padding:44px;text-align:center;box-shadow:0 24px 80px #0005}
.sales-cta-box h2{font-size:clamp(34px,5vw,56px);letter-spacing:-2.5px;line-height:1.04;margin:10px auto 13px;max-width:800px}
.sales-cta-box p{color:#aab6c8;max-width:720px;margin:0 auto 22px;line-height:1.7}
.sales-cta-box .actions{justify-content:center}
.sales-note{margin-top:12px;color:#718096;font-size:11px}
@media(max-width:900px){
.sales-home .sales-hero,.problem-grid,.security-wrap{grid-template-columns:1fr}
.feature-grid,.use-grid,.usecase-live-grid{grid-template-columns:repeat(2,1fr)}
.workflow{grid-template-columns:repeat(2,1fr)}
.workflow-step:nth-child(2):after{display:none}
.sales-strip-inner{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
.sales-home .sales-hero{padding:56px 0 46px}
.sales-home .sales-hero h1{font-size:clamp(40px,12vw,58px);letter-spacing:-2.5px}
.sales-home .sales-hero .actions{display:grid;grid-template-columns:1fr}
.sales-home .sales-hero .actions .btn{width:100%}
.hero-proof{gap:7px}
.hero-proof span{font-size:11px}
.feature-grid,.use-grid,.benefit-grid,.workflow,.usecase-live-grid{grid-template-columns:1fr}
.workflow-step:after{display:none!important}
.sales-section{padding:56px 0}
.sales-heading h2{letter-spacing:-1.6px}
.demo-result{grid-template-columns:1fr}
.sales-strip-inner{grid-template-columns:1fr 1fr}
.sales-cta-box{padding:30px 20px;border-radius:22px}
}
/* Logged-in mobile topbar: show notification bell beside hamburger */
@media(max-width:900px){
.app-topbar .nav-tools{
gap:8px;
}
.app-topbar .nav-tools>.bellicon{
display:grid;
width:40px;
height:40px;
flex:0 0 40px;
}
.app-topbar .nav-tools>.account{
display:none;
}
.app-auth .mobile-nav{
display:block;
margin-left:0;
flex:0 0 auto;
}
.app-topbar .mobile-brand{
min-width:0;
}
}
@media(max-width:380px){
.app-topbar{
padding:0 10px;
}
.app-topbar .nav-tools{
gap:6px;
}
.app-topbar .nav-tools>.bellicon,
.mobile-nav>summary{
width:38px;
height:38px;
}
}
/* Animated ChatGPT conversation demo: 2026-09-18 */
.sales-demo{
position:relative;
overflow:hidden;
animation:vidoraDemoFloat 5.5s ease-in-out infinite;
}
.sales-demo::before{
content:"";
position:absolute;
inset:-25%;
pointer-events:none;
background:
radial-gradient(circle at 18% 18%,rgba(124,58,237,.13),transparent 24%),
radial-gradient(circle at 82% 26%,rgba(37,99,235,.11),transparent 25%),
radial-gradient(circle at 50% 85%,rgba(6,182,212,.08),transparent 27%);
animation:vidoraDemoGlow 8s ease-in-out infinite;
}
.sales-demo-top,.demo-chat,.demo-result{position:relative;z-index:2}
.sales-demo .live-pill{animation:vidoraConnectedPulse 1.8s ease-in-out infinite}
.demo-chat{min-height:210px}
.demo-msg{
min-height:72px;
transition:opacity .28s ease,transform .28s ease;
}
.demo-msg.demo-hidden{
opacity:0;
transform:translateY(12px) scale(.985);
}
.demo-msg.demo-visible{
opacity:1;
transform:translateY(0) scale(1);
}
.demo-copy{white-space:pre-wrap}
.demo-caret{
display:inline-block;
width:8px;
height:1.05em;
margin-left:3px;
vertical-align:-2px;
border-radius:2px;
background:currentColor;
animation:vidoraCaretBlink .78s steps(1) infinite;
}
.demo-msg.done .demo-caret{display:none}
.demo-typing{
display:none;
align-items:center;
gap:5px;
width:max-content;
min-height:42px;
margin-top:10px;
padding:0 14px;
border:1px solid var(--line);
border-radius:14px;
background:#ffffff06;
}
.demo-typing.show{display:flex}
.demo-typing i{
width:7px;
height:7px;
border-radius:50%;
background:#9aa7bb;
animation:vidoraTypingDots 1.1s infinite ease-in-out;
}
.demo-typing i:nth-child(2){animation-delay:.16s}
.demo-typing i:nth-child(3){animation-delay:.32s}
.demo-result .demo-card{
opacity:0;
transform:translateY(14px) scale(.975);
}
.demo-result .demo-card.show{
animation:vidoraCardReveal .46s ease forwards;
}
.demo-result .demo-card:nth-child(2).show{animation-delay:.12s}
.demo-result .demo-card:nth-child(3).show{animation-delay:.24s}
@keyframes vidoraDemoFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-5px)}
}
@keyframes vidoraDemoGlow{
0%,100%{transform:translate3d(-1%,0,0)}
50%{transform:translate3d(2%,1.5%,0)}
}
@keyframes vidoraConnectedPulse{
0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.18)}
50%{box-shadow:0 0 0 10px rgba(34,197,94,0)}
}
@keyframes vidoraCaretBlink{
0%,48%{opacity:1}
49%,100%{opacity:0}
}
@keyframes vidoraTypingDots{
0%,60%,100%{transform:translateY(0);opacity:.4}
30%{transform:translateY(-4px);opacity:1}
}
@keyframes vidoraCardReveal{
to{opacity:1;transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
.sales-demo,.sales-demo::before,.sales-demo .live-pill,.demo-caret,.demo-typing i{animation:none!important}
.demo-result .demo-card{opacity:1;transform:none}
}
/* ChatGPT-style MCP demo + balanced desktop hero: 2026-09-18 */
.sales-home .sales-hero{
align-items:stretch;
}
.sales-home .sales-hero>div:first-child{
display:flex;
flex-direction:column;
justify-content:center;
}
.sales-demo{
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
min-height:500px;
padding:18px;
border-radius:24px;
background:linear-gradient(180deg,#101827f5,#0a1322f4);
border:1px solid #7c3aed38;
box-shadow:0 28px 90px rgba(0,0,0,.38);
}
.sales-demo-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:12px;
}
.demo-window-meta{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.demo-window-meta>div{
display:grid;
gap:2px;
}
.demo-window-meta strong{
font-size:14px;
line-height:1.2;
}
.demo-window-meta small{
color:#7f8da2;
font-size:10px;
font-weight:800;
letter-spacing:.5px;
}
.demo-chatgpt-mark{
width:34px;
height:34px;
border-radius:11px;
display:grid;
place-items:center;
flex:0 0 34px;
background:linear-gradient(135deg,#ffffff14,#7c3aed24);
border:1px solid var(--line);
color:#fff;
font-size:16px;
}
.demo-chat-header{
position:relative;
z-index:2;
margin-bottom:12px;
}
.demo-chat-badge{
display:inline-flex;
align-items:center;
min-height:31px;
padding:0 11px;
border-radius:999px;
border:1px solid #7c3aed33;
background:#7c3aed0d;
color:#c4b5fd;
font-size:11px;
font-weight:850;
}
.demo-chat{
display:grid;
align-content:start;
gap:11px;
min-height:275px;
}
.demo-message-row{
display:flex;
align-items:flex-start;
gap:10px;
}
.demo-message-row.user-row{
flex-direction:row-reverse;
}
.demo-message-body{
min-width:0;
flex:1;
}
.demo-msg.user .demo-message-body{
display:flex;
flex-direction:column;
align-items:flex-end;
}
.demo-avatar{
width:30px;
height:30px;
flex:0 0 30px;
border-radius:9px;
display:grid;
place-items:center;
border:1px solid var(--line);
font-size:11px;
font-weight:900;
}
.user-avatar{
background:linear-gradient(135deg,#7c3aed,#2563eb);
color:#fff;
}
.ai-avatar{
background:#ffffff0a;
color:#f8fafc;
}
.demo-role{
display:block;
margin:0 0 5px;
color:#8693a7;
font-size:9px;
font-weight:900;
letter-spacing:.8px;
text-transform:uppercase;
}
.demo-bubble{
max-width:100%;
padding:12px 14px;
border-radius:15px;
font-size:12px;
line-height:1.58;
}
.user-bubble{
width:max-content;
max-width:92%;
background:linear-gradient(135deg,#7c3aed,#2563eb);
color:#fff;
border-bottom-right-radius:6px;
}
.ai-bubble{
width:100%;
background:#0e1727;
border:1px solid var(--line);
color:#e5edf8;
border-bottom-left-radius:6px;
}
.demo-tool-chip{
display:inline-flex;
align-items:center;
min-height:22px;
margin:0 0 6px;
padding:0 8px;
border-radius:7px;
background:#22c55e10;
border:1px solid #22c55e25;
color:#86efac;
font-size:8px;
font-weight:900;
letter-spacing:.7px;
}
.demo-typing{
margin:0 0 0 40px;
min-height:34px;
padding:0 12px;
border-radius:11px;
}
.demo-typing .demo-avatar{
width:24px;
height:24px;
flex-basis:24px;
border-radius:7px;
}
.typing-label{
color:#94a3b8;
font-size:10px;
font-weight:800;
margin-right:2px;
}
.demo-result{
margin-top:12px;
}
.demo-result .demo-card{
min-height:78px;
}
.demo-result .demo-card small{
font-size:9px;
}
.demo-result .demo-card b{
font-size:13px;
line-height:1.35;
}
@media(min-width:901px){
.sales-home .sales-hero{
min-height:560px;
}
.sales-home .sales-hero>div:first-child,
.sales-home .sales-demo{
min-height:560px;
}
}
@media(max-width:900px){
.sales-home .sales-hero{
align-items:start;
}
.sales-demo{
min-height:0;
}
.demo-chat{
min-height:255px;
}
}
@media(max-width:620px){
.sales-demo{
padding:15px;
}
.demo-chat{
min-height:290px;
}
.user-bubble{
max-width:100%;
}
.demo-result{
grid-template-columns:1fr;
}
.demo-result .demo-card{
min-height:0;
}
}
/* ChatGPT-like MCP conversation preview: 2026-09-18 */
.sales-home .sales-hero{
align-items:stretch;
}
.sales-home .sales-hero>div:first-child{
display:flex;
flex-direction:column;
justify-content:center;
}
.gpt-demo.sales-demo{
animation:none!important;
position:relative;
display:flex;
flex-direction:column;
min-height:560px;
height:100%;
padding:0;
overflow:hidden;
border:1px solid #ffffff14;
border-radius:22px;
background:#212121;
box-shadow:0 24px 80px rgba(0,0,0,.42);
}
.gpt-demo.sales-demo::before{
display:none!important;
}
.gpt-demo-top{
height:52px;
flex:0 0 52px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px 0 16px;
border-bottom:1px solid #ffffff0d;
background:#212121;
position:relative;
z-index:4;
}
.gpt-model{
display:flex;
align-items:center;
gap:5px;
color:#f4f4f4;
font-size:14px;
font-weight:700;
}
.gpt-chevron{
color:#a8a8a8;
font-size:15px;
transform:translateY(-1px);
}
.gpt-top-actions{
display:flex;
align-items:center;
gap:10px;
}
.gpt-mcp-status{
display:inline-flex;
align-items:center;
gap:6px;
min-height:27px;
padding:0 9px;
border:1px solid #ffffff14;
border-radius:999px;
background:#2f2f2f;
color:#c8c8c8;
font-size:10px;
font-weight:650;
white-space:nowrap;
}
.gpt-mcp-status i{
width:7px;
height:7px;
border-radius:50%;
background:#19c37d;
box-shadow:0 0 0 3px rgba(25,195,125,.12);
}
.gpt-more{
color:#b8b8b8;
font-size:14px;
letter-spacing:1px;
}
.gpt-thread{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
padding:22px 18px 18px;
scroll-behavior:smooth;
scrollbar-width:thin;
scrollbar-color:#4b4b4b transparent;
transition:opacity .35s ease,transform .35s ease;
}
.gpt-thread::-webkit-scrollbar{
width:6px;
}
.gpt-thread::-webkit-scrollbar-thumb{
background:#4b4b4b;
border-radius:999px;
}
.gpt-thread.gpt-resetting{
opacity:0;
transform:translateY(5px);
}
.gpt-message{
width:min(100%,470px);
margin-left:auto;
margin-right:auto;
}
.gpt-message + .gpt-message{
margin-top:18px;
}
.gpt-enter{
animation:gptMessageIn .3s ease both;
}
.gpt-message-user{
display:flex;
justify-content:flex-end;
}
.gpt-user-bubble{
max-width:82%;
padding:10px 14px;
border-radius:18px;
border-bottom-right-radius:5px;
background:#303030;
color:#f4f4f4;
font-size:12px;
line-height:1.55;
word-break:break-word;
}
.gpt-message-assistant{
display:grid;
grid-template-columns:27px minmax(0,1fr);
align-items:flex-start;
gap:10px;
}
.gpt-assistant-mark{
width:27px;
height:27px;
display:grid;
place-items:center;
border-radius:8px;
background:#f4f4f4;
color:#171717;
font-size:13px;
font-weight:900;
}
.gpt-assistant-content{
min-width:0;
padding-top:2px;
}
.gpt-tool-call{
width:min(100%,360px);
min-height:45px;
display:grid;
grid-template-columns:30px minmax(0,1fr) 18px;
align-items:center;
gap:9px;
margin-bottom:10px;
padding:7px 9px;
border:1px solid #ffffff12;
border-radius:11px;
background:#2a2a2a;
}
.gpt-tool-icon{
width:29px;
height:29px;
display:grid;
place-items:center;
border-radius:8px;
background:#19c37d;
color:#082b20;
font-size:11px;
font-weight:950;
}
.gpt-tool-copy{
display:grid;
gap:1px;
min-width:0;
}
.gpt-tool-copy strong{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#e8e8e8;
font-size:10px;
font-weight:700;
}
.gpt-tool-copy small{
color:#8f8f8f;
font-size:9px;
}
.gpt-tool-check{
color:#19c37d;
font-size:12px;
font-weight:900;
}
.gpt-assistant-text{
color:#ececec;
font-size:12px;
line-height:1.68;
white-space:pre-wrap;
}
.gpt-response-actions{
display:flex;
align-items:center;
gap:10px;
margin-top:8px;
color:#858585;
font-size:10px;
opacity:.85;
}
.gpt-thinking-row{
margin-top:14px!important;
}
.gpt-thinking{
display:flex;
align-items:center;
gap:4px;
min-height:27px;
}
.gpt-thinking i{
width:5px;
height:5px;
border-radius:50%;
background:#a9a9a9;
animation:gptThinking 1.1s ease-in-out infinite;
}
.gpt-thinking i:nth-child(2){animation-delay:.16s}
.gpt-thinking i:nth-child(3){animation-delay:.32s}
.gpt-composer-wrap{
flex:0 0 auto;
padding:10px 12px 10px;
background:linear-gradient(to top,#212121 72%,rgba(33,33,33,.88));
position:relative;
z-index:5;
}
.gpt-composer{
min-height:72px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:10px;
padding:11px 11px 9px;
border:1px solid #ffffff1a;
border-radius:23px;
background:#303030;
box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.gpt-composer-input{
padding:0 3px;
color:#a9a9a9;
font-size:12px;
line-height:1.4;
}
.gpt-composer-actions{
display:flex;
align-items:center;
gap:8px;
}
.gpt-plus,.gpt-mic,.gpt-send{
width:27px;
height:27px;
display:grid;
place-items:center;
border-radius:50%;
color:#d6d6d6;
font-size:13px;
}
.gpt-plus,.gpt-mic{
background:#3b3b3b;
}
.gpt-tools{
display:inline-flex;
align-items:center;
min-height:27px;
padding:0 9px;
border:1px solid #ffffff12;
border-radius:999px;
color:#d5d5d5;
background:#3a3a3a;
font-size:10px;
font-weight:650;
}
.gpt-send{
margin-left:auto;
background:#f4f4f4;
color:#171717;
font-size:16px;
font-weight:900;
}
.gpt-footnote{
padding-top:6px;
color:#777;
text-align:center;
font-size:8px;
line-height:1.35;
}
@keyframes gptMessageIn{
from{opacity:0;transform:translateY(7px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes gptThinking{
0%,60%,100%{opacity:.35;transform:translateY(0)}
30%{opacity:1;transform:translateY(-3px)}
}
@media(min-width:901px){
.sales-home .sales-hero{
min-height:560px;
}
.sales-home .sales-hero>div:first-child,
.gpt-demo.sales-demo{
min-height:560px;
height:560px;
}
}
@media(max-width:900px){
.gpt-demo.sales-demo{
min-height:540px;
height:540px;
}
}
@media(max-width:620px){
.gpt-demo.sales-demo{
min-height:520px;
height:520px;
border-radius:18px;
}
.gpt-demo-top{
padding:0 11px 0 13px;
}
.gpt-mcp-status{
max-width:160px;
overflow:hidden;
text-overflow:ellipsis;
}
.gpt-thread{
padding:18px 12px 14px;
}
.gpt-user-bubble{
max-width:88%;
}
.gpt-composer-wrap{
padding:8px 8px 9px;
}
}
@media(prefers-reduced-motion:reduce){
.gpt-enter,.gpt-thinking i{
animation:none!important;
}
}
/* Full rebuild: ChatGPT-style MCP preview */
.sales-home .sales-hero{
align-items:stretch;
}
.sales-home .sales-hero>div:first-child{
display:flex;
flex-direction:column;
justify-content:center;
}
.cgpt-shell.sales-demo{
position:relative;
display:flex;
flex-direction:column;
height:560px;
min-height:560px;
padding:0!important;
overflow:hidden;
border:1px solid #2f2f2f!important;
border-radius:20px!important;
background:#212121!important;
box-shadow:0 24px 80px rgba(0,0,0,.38)!important;
animation:none!important;
transform:none!important;
}
.cgpt-shell.sales-demo::before{
display:none!important;
content:none!important;
}
.cgpt-topbar{
height:54px;
flex:0 0 54px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:0 14px 0 16px;
border-bottom:1px solid #2d2d2d;
background:#212121;
position:relative;
z-index:5;
}
.cgpt-model,
.cgpt-more,
.cgpt-round,
.cgpt-toolbtn,
.cgpt-send{
appearance:none;
border:0;
font:inherit;
cursor:default;
}
.cgpt-model{
display:inline-flex;
align-items:center;
gap:5px;
padding:0;
background:transparent;
color:#ececec;
font-size:14px;
line-height:1;
font-weight:700;
white-space:nowrap;
}
.cgpt-model span{
color:#aaa;
font-size:13px;
}
.cgpt-topright{
display:flex;
align-items:center;
gap:8px;
min-width:0;
}
.cgpt-connector{
display:inline-flex;
align-items:center;
gap:6px;
min-height:28px;
padding:0 9px;
border:1px solid #393939;
border-radius:999px;
background:#2b2b2b;
color:#cfcfcf;
font-size:10px;
font-weight:650;
white-space:nowrap;
}
.cgpt-connector i{
width:7px;
height:7px;
border-radius:50%;
background:#19c37d;
box-shadow:0 0 0 3px rgba(25,195,125,.11);
}
.cgpt-more{
width:28px;
height:28px;
display:grid;
place-items:center;
padding:0;
background:transparent;
color:#b8b8b8;
font-size:13px;
letter-spacing:1px;
}
.cgpt-thread{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
padding:20px 16px 18px;
background:#212121;
scroll-behavior:smooth;
scrollbar-width:thin;
scrollbar-color:#4d4d4d transparent;
transition:opacity .3s ease,transform .3s ease;
}
.cgpt-thread::-webkit-scrollbar{width:6px}
.cgpt-thread::-webkit-scrollbar-thumb{
background:#4d4d4d;
border-radius:999px;
}
.cgpt-thread.cgpt-reset{
opacity:0;
transform:translateY(4px);
}
.cgpt-turn{
width:min(100%,470px);
margin:0 auto;
}
.cgpt-turn+.cgpt-turn{
margin-top:20px;
}
.cgpt-user-row{
display:flex;
justify-content:flex-end;
width:100%;
margin-bottom:14px;
}
.cgpt-user-bubble{
max-width:80%;
padding:10px 14px;
border-radius:18px;
border-bottom-right-radius:5px;
background:#303030;
color:#f4f4f4;
font-size:12px;
line-height:1.58;
word-break:break-word;
}
.cgpt-assistant-row{
display:grid;
grid-template-columns:28px minmax(0,1fr);
align-items:flex-start;
gap:10px;
width:100%;
}
.cgpt-ai-mark{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:8px;
background:#f4f4f4;
color:#171717;
font-size:13px;
font-weight:900;
}
.cgpt-assistant-body{
min-width:0;
padding-top:1px;
}
.cgpt-toolcall{
width:min(100%,345px);
min-height:46px;
display:grid;
grid-template-columns:30px minmax(0,1fr) 18px;
align-items:center;
gap:9px;
padding:8px 9px;
margin-bottom:10px;
border:1px solid #353535;
border-radius:11px;
background:#2a2a2a;
}
.cgpt-tool-logo{
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:8px;
background:#19c37d;
color:#072d21;
font-size:11px;
font-weight:950;
}
.cgpt-tool-main{
min-width:0;
display:grid;
gap:1px;
}
.cgpt-tool-main strong{
color:#ededed;
font-size:10px;
line-height:1.2;
font-weight:700;
}
.cgpt-tool-main small{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#969696;
font-size:9px;
line-height:1.2;
}
.cgpt-tool-ok{
color:#19c37d;
font-size:12px;
font-weight:900;
}
.cgpt-answer{
color:#ececec;
font-size:12px;
line-height:1.68;
white-space:pre-wrap;
}
.cgpt-actions{
display:flex;
align-items:center;
gap:10px;
margin-top:8px;
color:#8d8d8d;
font-size:10px;
user-select:none;
}
.cgpt-thinking-row{
margin-bottom:8px;
}
.cgpt-thinking{
min-height:28px;
display:flex;
align-items:center;
gap:4px;
}
.cgpt-thinking i{
width:5px;
height:5px;
border-radius:50%;
background:#a9a9a9;
animation:cgptThinking 1.05s ease-in-out infinite;
}
.cgpt-thinking i:nth-child(2){animation-delay:.14s}
.cgpt-thinking i:nth-child(3){animation-delay:.28s}
.cgpt-bottom{
flex:0 0 auto;
padding:9px 10px 8px;
border-top:1px solid #2d2d2d;
background:#212121;
position:relative;
z-index:5;
}
.cgpt-composer{
min-height:82px;
display:flex;
flex-direction:column;
justify-content:space-between;
gap:10px;
padding:12px 11px 10px;
border:1px solid #3a3a3a;
border-radius:24px;
background:#303030;
box-shadow:0 2px 12px rgba(0,0,0,.16);
}
.cgpt-input{
padding:0 3px;
color:#a9a9a9;
font-size:12px;
line-height:1.35;
}
.cgpt-compose-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.cgpt-compose-left,
.cgpt-compose-right{
display:flex;
align-items:center;
gap:7px;
}
.cgpt-round{
width:28px;
height:28px;
display:grid;
place-items:center;
padding:0;
border-radius:50%;
background:#3b3b3b;
color:#e2e2e2;
font-size:13px;
}
.cgpt-toolbtn{
min-height:28px;
display:inline-flex;
align-items:center;
gap:5px;
padding:0 9px;
border:1px solid #414141;
border-radius:999px;
background:#383838;
color:#e0e0e0;
font-size:10px;
font-weight:650;
}
.cgpt-send{
width:29px;
height:29px;
display:grid;
place-items:center;
padding:0;
border-radius:50%;
background:#f4f4f4;
color:#171717;
font-size:15px;
font-weight:900;
}
.cgpt-note{
padding-top:6px;
color:#777;
text-align:center;
font-size:8px;
line-height:1.35;
}
.cgpt-enter{
animation:cgptEnter .24s ease both;
}
@keyframes cgptEnter{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes cgptThinking{
0%,60%,100%{opacity:.35;transform:translateY(0)}
30%{opacity:1;transform:translateY(-3px)}
}
@media(min-width:901px){
.sales-home .sales-hero{
min-height:560px;
}
.sales-home .sales-hero>div:first-child,
.cgpt-shell.sales-demo{
min-height:560px;
height:560px;
}
}
@media(max-width:900px){
.cgpt-shell.sales-demo{
min-height:540px;
height:540px;
}
}
@media(max-width:620px){
.cgpt-shell.sales-demo{
min-height:520px;
height:520px;
border-radius:18px!important;
}
.cgpt-topbar{
padding:0 10px 0 12px;
}
.cgpt-connector{
max-width:145px;
overflow:hidden;
text-overflow:ellipsis;
}
.cgpt-thread{
padding:16px 11px 14px;
}
.cgpt-user-bubble{
max-width:88%;
}
.cgpt-bottom{
padding:8px;
}
}
@media(prefers-reduced-motion:reduce){
.cgpt-enter,.cgpt-thinking i{
animation:none!important;
}
}
/* Custom domain DNS copy controls */
.copy-box{
display:flex;
align-items:center;
gap:12px;
width:100%;
min-width:0;
min-height:58px;
padding:8px 8px 8px 16px;
border:1px solid rgba(148,163,184,.20);
border-radius:15px;
background:rgba(3,8,20,.88);
box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.copy-box:hover{
border-color:rgba(139,92,246,.38);
background:rgba(4,9,23,.98);
box-shadow:0 0 0 3px rgba(124,58,237,.055),inset 0 1px 0 rgba(255,255,255,.02);
}
.copy-value{
flex:1 1 auto;
min-width:0;
overflow-wrap:anywhere;
word-break:break-word;
font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
font-size:15px;
line-height:1.45;
color:#d8ccff;
}
.copy-btn{
position:relative;
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
min-width:76px;
min-height:38px;
padding:0 13px 0 34px;
border:1px solid rgba(167,139,250,.22);
border-radius:10px;
background:linear-gradient(180deg,rgba(124,58,237,.14),rgba(76,29,149,.10));
color:#ddd6fe;
font:inherit;
font-size:12px;
font-weight:750;
letter-spacing:.01em;
line-height:1;
cursor:pointer;
white-space:nowrap;
box-shadow:none;
-webkit-appearance:none;
appearance:none;
transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
}
.copy-btn::before,
.copy-btn::after{
content:"";
position:absolute;
width:10px;
height:10px;
border:1.5px solid currentColor;
border-radius:2px;
}
.copy-btn::before{
left:14px;
top:11px;
opacity:.58;
}
.copy-btn::after{
left:17px;
top:14px;
background:rgba(20,12,46,.88);
}
.copy-btn:hover{
border-color:rgba(167,139,250,.48);
background:linear-gradient(180deg,rgba(124,58,237,.24),rgba(76,29,149,.17));
color:#f5f3ff;
box-shadow:0 5px 18px rgba(76,29,149,.16);
}
.copy-btn:active{
transform:translateY(1px);
}
.copy-btn.copied{
border-color:rgba(52,211,153,.38);
background:rgba(6,78,59,.24);
color:#a7f3d0;
box-shadow:none;
}
.copy-btn.copied::before,
.copy-btn.copied::after{
border-color:#a7f3d0;
}
@media(max-width:620px){
.copy-box{
gap:9px;
min-height:54px;
padding:7px 7px 7px 12px;
border-radius:13px;
}
.copy-value{
font-size:13px;
}
.copy-btn{
min-width:68px;
min-height:36px;
padding:0 10px 0 31px;
font-size:11px;
}
.copy-btn::before{
left:11px;
top:10px;
}
.copy-btn::after{
left:14px;
top:13px;
}
}
/* Custom-domain quick guide */
.domain-quick-guide{
margin:0 0 18px;
padding:18px;
border:1px solid rgba(139,92,246,.20);
border-radius:18px;
background:linear-gradient(180deg,rgba(124,58,237,.08),rgba(15,23,42,.32));
box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.domain-guide-title{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:14px;
margin-bottom:14px;
}
.domain-guide-title span{
color:#9f8cff;
font-size:11px;
font-weight:800;
letter-spacing:.11em;
}
.domain-guide-title strong{
color:#f8fafc;
font-size:16px;
}
.domain-guide-steps{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:10px;
}
.domain-guide-steps>div{
display:flex;
align-items:flex-start;
gap:9px;
min-width:0;
padding:12px;
border:1px solid rgba(148,163,184,.12);
border-radius:13px;
background:rgba(3,8,20,.52);
}
.domain-guide-steps b{
flex:0 0 auto;
width:24px;
height:24px;
display:grid;
place-items:center;
border-radius:999px;
background:rgba(124,58,237,.18);
color:#ddd6fe;
font-size:12px;
}
.domain-guide-steps span{
color:#cbd5e1;
font-size:12px;
line-height:1.55;
}
.domain-guide-steps code,
.domain-guide-note code{
color:#ddd6fe;
font-size:.96em;
}
.domain-guide-note{
margin:12px 0 0;
padding:11px 12px;
border-left:3px solid rgba(167,139,250,.65);
border-radius:0 10px 10px 0;
background:rgba(124,58,237,.07);
color:#aeb9cb;
font-size:12px;
line-height:1.6;
}
@media(max-width:900px){
.domain-guide-steps{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.domain-quick-guide{padding:14px}
.domain-guide-title{align-items:flex-start;flex-direction:column}
.domain-guide-steps{grid-template-columns:1fr}
}
/* Business OS expansion — 2026-09-20 */
.business-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 20px}
.business-hub-card{display:flex;flex-direction:column;gap:8px;min-height:150px;padding:20px;border:1px solid #ffffff13;border-radius:18px;background:linear-gradient(180deg,#ffffff09,#ffffff04);text-decoration:none;color:inherit;transition:.18s ease}
.business-hub-card:hover{transform:translateY(-2px);border-color:#8b5cf650;background:#ffffff0d}
.business-hub-card span{font-size:11px;letter-spacing:1.2px;font-weight:800;color:#8fa0bb}
.business-hub-card strong{font-size:18px;letter-spacing:-.3px}
.business-hub-card small{color:#8f9db2;line-height:1.55}
.mcp-connect-panel{overflow:hidden}
.mcp-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}
.mcp-step{display:flex;gap:14px;align-items:flex-start;padding:16px;border-radius:16px;background:#ffffff06;border:1px solid #ffffff10}
.mcp-step>b{width:30px;height:30px;flex:0 0 30px;border-radius:10px;display:grid;place-items:center;background:#7c3aed;color:#fff}
.mcp-step strong{display:block;margin-bottom:5px}.mcp-step small{display:block;color:#91a0b5;line-height:1.55}
.integration-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.integration-card{margin:0!important;min-height:150px}
.integration-card h3{margin-top:0}
.analytics-filter form{display:grid;grid-template-columns:1fr 220px auto;gap:12px;align-items:end}
.analytics-filter label{display:block;font-size:12px;font-weight:800;margin:0 0 6px}
.analytics-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
.analytics-chart{margin-top:18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bar-chart{height:260px;display:flex;align-items:flex-end;gap:8px;padding:22px 6px 0;overflow-x:auto}
.bar-col{min-width:24px;height:210px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}
.bar-col i{width:100%;min-height:4px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,#8b5cf6,#22d3ee);display:block}
.bar-col small{font-size:9px;color:#7f8ca0;transform:rotate(-45deg);transform-origin:center;white-space:nowrap;margin-bottom:-9px}
.analytics-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px}
.analytics-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.table-scroll{width:100%;overflow:auto}
.automation-row{display:grid;grid-template-columns:minmax(150px,.9fr) 1fr 1.25fr 130px auto auto;gap:9px;align-items:center;padding:12px 0;border-top:1px solid #ffffff0d}
.automation-row:first-of-type{border-top:0}.automation-row small{display:block;color:#7f8ca0;margin-top:4px}
.automation-row .select,.automation-row .input{min-width:0}
@media(max-width:1100px){.business-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.analytics-grid.three{grid-template-columns:1fr}.automation-row{grid-template-columns:1fr 1fr}.automation-row>div{grid-column:1/-1}}
@media(max-width:760px){.business-hub-grid,.integration-grid,.analytics-grid,.mcp-steps{grid-template-columns:1fr}.analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-filter form{grid-template-columns:1fr}.automation-row{grid-template-columns:1fr}.automation-row>div{grid-column:auto}.bar-chart{height:230px}.bar-col{height:180px}}
/* Business UX refinement — 2026-09-20 */
@media(min-width:901px){
.sidebar-nav{
overflow:hidden!important;
padding:14px 14px 8px!important;
display:flex;
flex-direction:column;
gap:10px;
}
.side-group{gap:2px!important;margin:0!important}
.side-label{padding:0 10px 5px!important;font-size:9px!important;line-height:1.2}
.side-link{min-height:36px!important;padding:0 12px!important}
.sidebar-bottom{padding:10px 14px!important;gap:4px!important}
.side-language,.side-logout{min-height:36px!important}
}
@media(min-width:901px) and (max-height:760px){
.sidebar-brand{height:62px!important}
.sidebar-nav{padding-top:9px!important;gap:6px!important}
.side-link{min-height:32px!important;font-size:12px!important}
.side-label{padding-bottom:3px!important}
.sidebar-bottom{padding-top:7px!important;padding-bottom:7px!important}
.side-language,.side-logout{min-height:32px!important}
}
.analytics-filter{padding:20px 22px!important}
.analytics-filter form{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:16px!important;
align-items:end!important;
}
.analytics-filter .filter-site{grid-column:span 2}
.analytics-filter .input,.analytics-filter .select{min-height:48px}
.analytics-filter-actions{display:flex;gap:10px;align-items:center}
.analytics-filter-actions .btn{min-height:48px;flex:1}
.analytics-kpis{
gap:20px!important;
margin-top:20px!important;
margin-bottom:24px!important;
}
.analytics-kpis .kpi{
min-height:132px;
padding:24px 22px!important;
display:flex;
flex-direction:column;
justify-content:center;
}
.analytics-kpis .kpi b{margin-top:12px!important}
@media(max-width:1100px){
.analytics-filter form{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.analytics-filter .filter-site{grid-column:span 2}
}
@media(max-width:760px){
.analytics-filter form{grid-template-columns:1fr!important}
.analytics-filter .filter-site{grid-column:auto}
.analytics-filter-actions{display:grid;grid-template-columns:1fr 1fr}
.analytics-kpis{gap:14px!important}
.analytics-kpis .kpi{min-height:110px;padding:18px!important}
}
.waba-link-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 18px}
.waba-link-card{position:relative;display:flex;flex-direction:column;gap:7px;min-height:128px;padding:18px 18px 18px 58px;border:1px solid var(--line);border-radius:17px;background:linear-gradient(180deg,#ffffff07,#ffffff035)}
.waba-link-card>span{position:absolute;left:17px;top:18px;width:29px;height:29px;border-radius:9px;display:grid;place-items:center;background:#7c3aed22;color:#c4b5fd;font-size:10px;font-weight:900}
.waba-link-card strong{font-size:15px}
.waba-link-card small{color:#8f9db2;line-height:1.55}
.knowledge-panel{overflow:hidden}
.knowledge-form{display:grid;grid-template-columns:180px 1fr 1.2fr;gap:12px;align-items:start;padding:16px;border:1px solid #ffffff0d;border-radius:15px;background:#ffffff03}
.knowledge-form .field{margin:0}
.knowledge-form .knowledge-text{grid-column:1/-1}
.knowledge-form .knowledge-text textarea{min-height:130px}
.knowledge-form>button{justify-self:start}
.knowledge-list{display:grid;gap:10px;margin-top:14px}
.knowledge-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid #ffffff0d;border-radius:14px;background:#ffffff03}
.knowledge-item>div:first-child{min-width:0;display:grid;gap:4px}
.knowledge-item strong{overflow-wrap:anywhere}
.knowledge-item small{color:#7f8ca0}
.knowledge-type{width:max-content;padding:4px 7px;border-radius:999px;background:#7c3aed18;color:#c4b5fd;font-size:9px;font-weight:900;letter-spacing:.8px}
@media(max-width:900px){.waba-link-grid{grid-template-columns:1fr}.knowledge-form{grid-template-columns:1fr}.knowledge-form .knowledge-text{grid-column:auto}}
@media(max-width:620px){.knowledge-item{align-items:flex-start;flex-direction:column}.knowledge-item .actions{width:100%}.knowledge-item .actions form{flex:1}.knowledge-item .actions .btn{width:100%}}
.analytics-filter-note{margin:14px 2px 0;color:#718096;font-size:11px;line-height:1.55}
/* Layout consistency audit — 2026-09-20 */
.app-auth,.app-auth main,.app-auth .wrap,.app-auth .dash,.app-auth .panel,.app-auth section,.app-auth aside,.app-auth form,.app-auth .field,.app-auth .dashhead>div,.app-auth .site>div,.app-auth .grid2>*,.app-auth .analytics-grid>*,.app-auth .integration-grid>*,.app-auth .business-hub-grid>*,.app-auth .waba-link-grid>*,.app-auth .mcp-step>div{min-width:0}
.app-auth .dashhead{flex-wrap:wrap;align-items:flex-start}
.app-auth .dashhead h1,.app-auth .panel h1,.app-auth .panel h2,.app-auth .panel h3,.app-auth .site strong,.app-auth .site small,.app-auth .muted,.app-auth .help{overflow-wrap:anywhere;word-break:normal}
.app-auth .actions{max-width:100%;align-items:center}
.app-auth .actions form{display:inline-flex;max-width:100%}
.app-auth .input,.app-auth .select,.app-auth .textarea,.app-auth input[type="file"]{min-width:0;max-width:100%}
.app-auth .panel{max-width:100%}
.app-auth .site{min-width:0}
.app-auth .site>div{flex:1 1 auto}
.app-auth .table{max-width:100%}
.app-auth .table th,.app-auth .table td{vertical-align:top;overflow-wrap:anywhere}
.app-auth code,.app-auth .code{max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.dashboard-page>.kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dashboard-page>.kpis .kpi{min-height:116px}
@media(max-width:1100px){
.dashboard-page>.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
.app-auth .grid2{grid-template-columns:1fr!important}
.app-auth .dashhead>.actions{width:100%}
.app-auth .dashhead>.actions>.btn,.app-auth .dashhead>.actions>form{flex:1 1 auto}
.app-auth .dashhead>.actions>form>.btn{width:100%}
.app-auth .site{align-items:flex-start;flex-wrap:wrap}
.app-auth .site>.actions{width:100%}
.dashboard-page>.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
.app-auth .panel{padding:17px}
.app-auth .dash{padding-top:22px}
.app-auth .dashhead{gap:14px;margin-bottom:20px}
.app-auth .dashhead h1{font-size:clamp(28px,9vw,40px);line-height:1.08}
.app-auth .dashhead>.actions{display:grid;grid-template-columns:1fr 1fr}
.app-auth .dashhead>.actions>.btn,.app-auth .dashhead>.actions>form{width:100%}
.app-auth .site{padding:14px}
.dashboard-page>.kpis{grid-template-columns:1fr 1fr;gap:12px}
.dashboard-page>.kpis .kpi{min-height:102px;padding:16px}
.dashboard-page>.kpis .kpi b{font-size:24px}
.table-scroll{margin-left:-2px;margin-right:-2px}
}
@media(max-width:420px){
.app-auth .dashhead>.actions{grid-template-columns:1fr}
.dashboard-page>.kpis{grid-template-columns:1fr}
}
/* WABA responsive refinement */
@media(max-width:1100px){
.waba-link-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.knowledge-form{grid-template-columns:1fr 1fr}
.knowledge-form .knowledge-file,.knowledge-form .knowledge-text{grid-column:1/-1}
}
@media(max-width:760px){
.waba-link-grid{grid-template-columns:1fr}
.knowledge-form{grid-template-columns:1fr}
.knowledge-form .knowledge-file,.knowledge-form .knowledge-text{grid-column:auto}
}
/* Homepage hero overlap hotfix — 2026-09-20 */
.sales-home .sales-hero{
position:relative;
z-index:1;
min-height:0!important;
height:auto!important;
align-items:center!important;
padding-bottom:82px!important;
}
.sales-home .sales-hero>div:first-child,
.cgpt-shell.sales-demo{
min-width:0;
}
.hero-proof{
display:flex!important;
flex-wrap:wrap!important;
align-items:center;
column-gap:9px!important;
row-gap:10px!important;
max-width:100%;
}
.hero-proof span{
flex:0 0 auto;
max-width:100%;
white-space:normal;
}
.cgpt-shell.sales-demo{
height:600px!important;
min-height:600px!important;
max-height:600px!important;
align-self:center;
margin:0!important;
}
.sales-strip{
position:relative;
z-index:3;
clear:both;
margin-top:0!important;
}
.sales-strip-inner{
position:relative;
z-index:1;
}
.sales-strip-item{
min-width:0;
overflow-wrap:anywhere;
}
@media(max-width:1100px) and (min-width:901px){
.sales-home .sales-hero{
grid-template-columns:minmax(0,1fr) minmax(420px,.9fr)!important;
gap:38px!important;
padding-top:72px!important;
padding-bottom:72px!important;
}
.sales-home .sales-hero h1{
font-size:clamp(44px,5.4vw,66px)!important;
}
.cgpt-shell.sales-demo{
height:580px!important;
min-height:580px!important;
max-height:580px!important;
}
}
@media(max-width:900px){
.sales-home .sales-hero{
grid-template-columns:1fr!important;
gap:34px!important;
padding-bottom:58px!important;
}
.cgpt-shell.sales-demo{
width:100%;
height:540px!important;
min-height:540px!important;
max-height:540px!important;
}
}
@media(max-width:620px){
.sales-home .sales-hero{
gap:28px!important;
padding-bottom:48px!important;
}
.hero-proof{
display:grid!important;
grid-template-columns:1fr!important;
}
.hero-proof span{
width:100%;
justify-content:flex-start;
}
.cgpt-shell.sales-demo{
height:510px!important;
min-height:510px!important;
max-height:510px!important;
}
.sales-strip-inner{
grid-template-columns:1fr!important;
gap:0!important;
padding:12px 0!important;
}
.sales-strip-item{
padding:12px 8px!important;
border-bottom:1px solid var(--line);
}
.sales-strip-item:last-child{border-bottom:0}
}
/* Unified WhatsApp Inbox — 2026-09-20 */
.inbox-page{max-width:1500px}
.inbox-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.inbox-filter{display:grid;grid-template-columns:minmax(220px,1.6fr) 180px 220px auto auto;gap:12px;align-items:end;margin-bottom:16px}
.inbox-filter .field{margin:0}
.inbox-filter>.btn{min-height:44px}
.inbox-shell{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(430px,1.35fr) minmax(280px,.8fr);gap:14px;align-items:stretch;min-height:680px}
.inbox-list,.inbox-chat,.inbox-context{padding:0!important;overflow:hidden;min-width:0}
.inbox-list-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--line)}
.inbox-list-head span{min-width:28px;height:24px;display:grid;place-items:center;border-radius:999px;background:#ffffff08;color:#9dacbf;font-size:10px;font-weight:900}
.inbox-conversations{max-height:720px;overflow:auto;padding:8px}
.inbox-conversation{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px;border:1px solid transparent;border-radius:13px;color:inherit}
.inbox-conversation:hover{background:#ffffff05}
.inbox-conversation.active{background:linear-gradient(90deg,#7c3aed18,#2563eb09);border-color:#7c3aed32}
.inbox-avatar{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#7c3aed35,#2563eb27);border:1px solid #7c3aed35;color:#ddd6fe;font-weight:900}
.inbox-conversation-main{min-width:0}
.inbox-conversation-main>div:first-child{display:flex;justify-content:space-between;gap:8px;align-items:center}
.inbox-conversation-main strong{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-conversation-main time{font-size:9px;color:#66758b;white-space:nowrap}
.inbox-conversation-main p{margin:4px 0;color:#9ca9ba;font-size:11px;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-conversation-main small{color:#66758b;font-size:9px}
.inbox-link-tags{display:flex;gap:4px;margin-top:5px}
.inbox-link-tags span{padding:2px 5px;border-radius:999px;background:#22c55e12;color:#86efac;font-size:8px;font-weight:900}
.inbox-unread{min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:999px;background:#7c3aed;color:white;font-size:9px}
.inbox-empty{padding:22px;color:#718096;font-size:12px;text-align:center}
.inbox-chat{display:flex;flex-direction:column;background:#0a1120bf!important}
.inbox-chat-head{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)}
.inbox-chat-head>div:first-child{display:grid;gap:3px;min-width:0}
.inbox-chat-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-chat-head small{color:#75839a;font-size:10px}
.inbox-messages{flex:1;min-height:380px;max-height:590px;overflow:auto;padding:20px 16px;display:flex;flex-direction:column;gap:10px}
.inbox-message-row{display:flex}
.inbox-message-row.in{justify-content:flex-start}.inbox-message-row.out{justify-content:flex-end}
.inbox-message{max-width:min(78%,560px);padding:10px 12px;border-radius:15px;background:#ffffff08;border:1px solid var(--line)}
.inbox-message-row.out .inbox-message{background:linear-gradient(135deg,#6d28d93b,#2563eb25);border-color:#7c3aed35;border-bottom-right-radius:5px}
.inbox-message-row.in .inbox-message{border-bottom-left-radius:5px}
.inbox-message p{margin:0;color:#e2e8f0;font-size:12px;line-height:1.55;overflow-wrap:anywhere}
.inbox-message small{display:block;margin-top:6px;color:#6f7d91;font-size:9px;text-align:right}
.inbox-composer{padding:12px;border-top:1px solid var(--line);background:#09111f}
.inbox-composer textarea{min-height:78px;max-height:180px}
.inbox-composer>div{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.inbox-composer small{color:#66758b;font-size:9px;line-height:1.45}
.inbox-empty-center{margin:auto;padding:30px;text-align:center;max-width:420px}
.inbox-empty-center strong{font-size:18px}.inbox-empty-center p{color:#7f8ca0;line-height:1.7}
.inbox-context{padding:14px!important;display:flex;flex-direction:column;gap:10px}
.context-card{border:1px solid var(--line);background:#ffffff03;border-radius:14px;padding:13px;min-width:0}
.context-card>small{display:block;color:#6f7c90;font-size:9px;font-weight:900;letter-spacing:1px;margin-bottom:7px}
.context-card>strong{display:block;font-size:13px;overflow-wrap:anywhere}
.context-card p{color:#98a6b8;font-size:11px;line-height:1.55;margin:7px 0}
.context-card>a:not(.btn){font-size:10px;color:#c4b5fd}
.context-card .btn{margin-top:9px;width:100%}
.context-meta{display:grid;gap:4px;margin:8px 0}
.context-meta span{font-size:9px;color:#718096;overflow-wrap:anywhere}
.whatsapp-analytics-panel{margin:0 0 20px}
.whatsapp-analytics-panel .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.whatsapp-analytics-panel h2{margin:5px 0 0}
.wa-analytics-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:16px 0}
.wa-analytics-grid>div{padding:13px;border:1px solid var(--line);background:#ffffff03;border-radius:13px}
.wa-analytics-grid small{display:block;color:#718096;font-size:9px;letter-spacing:.8px}
.wa-analytics-grid b{display:block;margin-top:5px;font-size:22px}
@media(max-width:1280px){
.inbox-shell{grid-template-columns:280px minmax(0,1fr)}
.inbox-context{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.inbox-context>.eyebrow{grid-column:1/-1}
.wa-analytics-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:980px){
.inbox-filter{grid-template-columns:1fr 1fr}
.inbox-filter .field:first-child{grid-column:1/-1}
.inbox-shell{grid-template-columns:1fr;min-height:0}
.inbox-conversations{max-height:360px}
.inbox-chat{min-height:620px}
.inbox-context{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
.inbox-kpis{grid-template-columns:1fr 1fr}
.inbox-filter{grid-template-columns:1fr}
.inbox-filter .field:first-child{grid-column:auto}
.inbox-chat{min-height:560px}
.inbox-chat-head{align-items:flex-start;flex-direction:column}
.inbox-chat-head .actions{width:100%}
.inbox-message{max-width:88%}
.inbox-composer>div{align-items:stretch;flex-direction:column}
.inbox-context{grid-template-columns:1fr}
.wa-analytics-grid{grid-template-columns:1fr 1fr}
}
.side-count{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#7c3aed;color:#fff;display:grid;place-items:center;font-size:9px;font-weight:900}
/* Hero containment + documentation ordering refinement — 2026-09-20 */
@media(min-width:1181px){
.sales-home .sales-hero{
width:min(1320px,calc(100% - 72px))!important;
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
gap:44px!important;
padding-top:76px!important;
padding-bottom:76px!important;
align-items:center!important;
}
.sales-home .sales-hero h1{
font-size:clamp(52px,4.6vw,68px)!important;
line-height:1.01!important;
letter-spacing:-3px!important;
max-width:100%;
overflow-wrap:normal;
}
.cgpt-shell.sales-demo{
width:100%!important;
max-width:100%!important;
min-width:0!important;
height:570px!important;
min-height:570px!important;
max-height:570px!important;
}
}
@media(min-width:901px) and (max-width:1180px){
.sales-home .sales-hero{
width:min(920px,calc(100% - 48px))!important;
grid-template-columns:1fr!important;
gap:34px!important;
padding-top:62px!important;
padding-bottom:62px!important;
}
.sales-home .sales-hero h1{
font-size:clamp(48px,6vw,64px)!important;
line-height:1.02!important;
letter-spacing:-2.8px!important;
max-width:820px;
}
.sales-home .sales-hero>div:first-child{
height:auto!important;
min-height:0!important;
}
.cgpt-shell.sales-demo{
width:100%!important;
max-width:920px!important;
min-width:0!important;
justify-self:stretch!important;
height:540px!important;
min-height:540px!important;
max-height:540px!important;
}
}
@media(max-width:900px){
.sales-home .sales-hero{
width:min(100% - 30px,760px)!important;
}
.sales-home .sales-hero h1{
overflow-wrap:normal;
word-break:normal;
}
}
@media(max-width:620px){
.sales-home .sales-hero{
width:min(100% - 24px,760px)!important;
}
}
.doc-section-advanced{
padding:26px!important;
}
.doc-section-advanced>h2{
margin:0 0 20px!important;
}
.doc-section-advanced>h3{
margin:24px 0 8px!important;
padding-top:20px;
border-top:1px solid var(--line);
font-size:17px;
letter-spacing:-.25px;
}
.doc-section-advanced>h3:first-of-type{
border-top:0;
padding-top:0;
margin-top:0!important;
}
.doc-section-advanced .doc-steps{
margin:0 0 6px;
}
.docs-page .doc-section>h2{
line-height:1.25;
}
@media(max-width:620px){
.doc-section-advanced{padding:18px!important}
.doc-section-advanced>h3{font-size:16px}
}
/* Sidebar visual rebalance — 2026-09-20 */
@media(min-width:901px){
.app-sidebar{
width:290px!important;
}
.app-auth{
padding-left:290px!important;
}
.sidebar-brand{
height:82px!important;
padding:0 24px!important;
}
.sidebar-brand .brand{
font-size:22px!important;
gap:14px!important;
}
.sidebar-brand .brandmark{
width:46px!important;
height:46px!important;
border-radius:14px!important;
font-size:22px!important;
flex:0 0 46px!important;
}
.sidebar-nav{
padding:20px 16px 24px!important;
overflow:auto!important;
display:block!important;
}
.side-group{
display:grid!important;
gap:7px!important;
margin:0 0 26px!important;
}
.side-label{
padding:0 12px 8px!important;
font-size:12px!important;
line-height:1.2!important;
letter-spacing:1.9px!important;
color:#7f8da3!important;
font-weight:900!important;
}
.side-link{
min-height:50px!important;
padding:0 16px!important;
border-radius:15px!important;
font-size:16px!important;
line-height:1.2!important;
font-weight:800!important;
gap:14px!important;
}
.side-dot{
width:11px!important;
height:11px!important;
flex:0 0 11px!important;
}
.side-link.active{
background:linear-gradient(90deg,#7c3aed2b,#2563eb12)!important;
box-shadow:inset 4px 0 #8b5cf6!important;
}
.side-link.active .side-dot{
background:#a78bfa!important;
box-shadow:0 0 0 5px #7c3aed22!important;
}
.sidebar-bottom{
padding:14px 16px!important;
gap:7px!important;
}
.side-language,.side-logout{
min-height:44px!important;
padding:0 12px!important;
border-radius:11px!important;
font-size:13px!important;
}
.app-auth .wrap{
width:min(1180px,calc(100% - 56px))!important;
}
}
@media(min-width:901px) and (max-height:760px){
.sidebar-brand{
height:72px!important;
}
.sidebar-brand .brandmark{
width:42px!important;
height:42px!important;
flex-basis:42px!important;
}
.sidebar-brand .brand{
font-size:20px!important;
}
.sidebar-nav{
padding-top:14px!important;
}
.side-group{
gap:5px!important;
margin-bottom:18px!important;
}
.side-label{
font-size:11px!important;
padding-bottom:6px!important;
}
.side-link{
min-height:44px!important;
font-size:15px!important;
}
}
@media(max-width:900px){
.app-auth{
padding-left:0!important;
}
.app-sidebar{
display:none!important;
}
}
/* Hide sidebar scrollbar but keep wheel/touch scrolling — 2026-09-20 */
@media(min-width:901px){
.sidebar-nav{
overflow-y:auto!important;
overflow-x:hidden!important;
scrollbar-width:none!important;
-ms-overflow-style:none!important;
}
.sidebar-nav::-webkit-scrollbar{
width:0!important;
height:0!important;
display:none!important;
}
}
/* Detailed ChatGPT connector setup guide — 2026-09-20 */
.mcp-connect-panel{
overflow:hidden;
}
.mcp-guide-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:18px;
margin-bottom:18px;
}
.mcp-guide-head>div{
min-width:0;
}
.mcp-guide-head h2{
margin:7px 0 8px!important;
}
.mcp-guide-head p{
margin:0;
max-width:860px;
}
.mcp-guide-count{
flex:0 0 auto;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:36px;
padding:0 12px;
border:1px solid #7c3aed45;
border-radius:999px;
background:#7c3aed12;
color:#c4b5fd;
font-size:11px;
font-weight:900;
letter-spacing:.5px;
white-space:nowrap;
}
.mcp-endpoint-card{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:15px 16px;
margin-bottom:18px;
border:1px solid #7c3aed3d;
border-radius:15px;
background:linear-gradient(135deg,#7c3aed10,#2563eb08);
}
.mcp-endpoint-card>div{
min-width:0;
display:grid;
gap:4px;
}
.mcp-endpoint-card small{
color:#7f8da2;
font-size:9px;
letter-spacing:1.2px;
font-weight:900;
}
.mcp-endpoint-card strong{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
font-size:13px;
color:#ddd6fe;
overflow-wrap:anywhere;
}
.mcp-guide-list{
display:grid;
grid-template-columns:1fr;
gap:10px;
margin:0 0 18px;
}
.mcp-guide-step{
display:grid;
grid-template-columns:42px minmax(0,1fr);
gap:14px;
align-items:start;
padding:16px;
border:1px solid var(--line);
border-radius:15px;
background:#ffffff035;
}
.mcp-guide-step>b{
width:42px;
height:42px;
display:grid;
place-items:center;
border-radius:12px;
background:linear-gradient(135deg,#7c3aed,#6d28d9);
color:#fff;
font-size:14px;
font-weight:900;
box-shadow:0 8px 24px #7c3aed25;
}
.mcp-guide-step>div{
min-width:0;
}
.mcp-guide-step strong{
display:block;
margin:1px 0 5px;
color:#f8fafc;
font-size:14px;
line-height:1.4;
}
.mcp-guide-step p{
margin:0!important;
color:#9eacc0;
font-size:13px;
line-height:1.7!important;
}
.mcp-guide-step code{
font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
color:#d8b4fe;
background:#030712;
border:1px solid var(--line);
border-radius:6px;
padding:2px 5px;
overflow-wrap:anywhere;
}
.mcp-inline-endpoint{
margin-top:10px;
width:max-content;
max-width:100%!important;
}
.mcp-guide-help{
margin-top:0!important;
}
@media(min-width:1200px){
.mcp-guide-list{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.mcp-guide-step{
min-height:122px;
}
}
@media(max-width:720px){
.mcp-guide-head{
flex-direction:column;
gap:10px;
}
.mcp-endpoint-card{
align-items:stretch;
flex-direction:column;
}
.mcp-endpoint-card .copy-btn{
width:100%;
}
.mcp-guide-step{
grid-template-columns:36px minmax(0,1fr);
gap:11px;
padding:14px;
}
.mcp-guide-step>b{
width:36px;
height:36px;
border-radius:10px;
}
}
/* ChatGPT guide horizontal slider — 2026-09-20 */
.mcp-guide-list{
display:flex!important;
grid-template-columns:none!important;
gap:12px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
padding:2px 2px 10px!important;
margin:0 0 14px!important;
scroll-snap-type:x proximity;
scroll-behavior:smooth;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
scrollbar-width:none!important;
-ms-overflow-style:none!important;
}
.mcp-guide-list::-webkit-scrollbar{
display:none!important;
width:0!important;
height:0!important;
}
.mcp-guide-step{
flex:0 0 clamp(300px,38vw,430px)!important;
min-width:300px!important;
min-height:154px!important;
scroll-snap-align:start;
}
@media(max-width:720px){
.mcp-guide-list{
margin-right:-2px!important;
padding-bottom:8px!important;
}
.mcp-guide-step{
flex-basis:min(84vw,360px)!important;
min-width:min(84vw,360px)!important;
min-height:165px!important;
}
}
/* Compact MCP dashboard slider + desktop arrows — 2026-09-20 */
.mcp-slider-shell{
position:relative;
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.mcp-guide-list{
flex:1 1 auto!important;
min-width:0!important;
gap:10px!important;
padding:2px 2px 8px!important;
margin:0 0 10px!important;
}
.mcp-guide-step{
flex:0 0 260px!important;
min-width:260px!important;
max-width:260px!important;
min-height:108px!important;
height:auto!important;
padding:12px 13px!important;
gap:10px!important;
align-items:start!important;
}
.mcp-guide-step>b{
width:30px!important;
height:30px!important;
flex:0 0 30px!important;
border-radius:9px!important;
font-size:11px!important;
}
.mcp-guide-step strong{
margin:0 0 3px!important;
font-size:12.5px!important;
line-height:1.3!important;
}
.mcp-guide-step p{
margin:0!important;
font-size:11.5px!important;
line-height:1.48!important;
}
.mcp-inline-endpoint{
margin-top:7px!important;
padding:7px 8px!important;
font-size:10.5px!important;
}
.mcp-slider-arrow{
width:36px;
height:36px;
flex:0 0 36px;
display:grid;
place-items:center;
border:1px solid #ffffff1f;
border-radius:999px;
background:#101827;
color:#f8fafc;
font:inherit;
font-size:24px;
line-height:1;
cursor:pointer;
transition:background .18s ease,border-color .18s ease,opacity .18s ease,transform .18s ease;
z-index:2;
}
.mcp-slider-arrow:hover:not(:disabled){
background:#182236;
border-color:#7c3aed66;
transform:translateY(-1px);
}
.mcp-slider-arrow:disabled{
opacity:.28;
cursor:default;
}
@media(max-width:900px){
.mcp-slider-shell{
display:block;
}
.mcp-slider-arrow{
display:none!important;
}
.mcp-guide-step{
flex:0 0 min(78vw,280px)!important;
min-width:min(78vw,280px)!important;
max-width:min(78vw,280px)!important;
min-height:112px!important;
}
}
/* MCP card typography + remove excess vertical space — 2026-09-20 */
.mcp-guide-list{
align-items:flex-start!important;
padding-top:0!important;
padding-bottom:4px!important;
margin-bottom:8px!important;
}
.mcp-guide-step{
flex:0 0 248px!important;
min-width:248px!important;
max-width:248px!important;
min-height:0!important;
height:auto!important;
align-self:flex-start!important;
grid-template-columns:30px minmax(0,1fr)!important;
gap:10px!important;
padding:11px 12px!important;
border-radius:13px!important;
}
.mcp-guide-step>b{
width:30px!important;
height:30px!important;
margin-top:1px!important;
flex:0 0 30px!important;
}
.mcp-guide-step>div{
min-width:0!important;
}
.mcp-guide-step strong{
display:block!important;
margin:0 0 4px!important;
font-size:12.5px!important;
line-height:1.28!important;
letter-spacing:-.12px!important;
overflow-wrap:break-word!important;
word-break:normal!important;
}
.mcp-guide-step p{
margin:0!important;
font-size:11.5px!important;
line-height:1.42!important;
color:#9eacc0!important;
overflow-wrap:break-word!important;
word-break:normal!important;
}
.mcp-guide-step p strong{
display:inline!important;
margin:0!important;
font-size:inherit!important;
line-height:inherit!important;
letter-spacing:0!important;
}
.mcp-guide-step code{
font-size:10.75px!important;
line-height:1.35!important;
padding:1px 4px!important;
}
.mcp-inline-endpoint{
display:block!important;
width:100%!important;
max-width:100%!important;
margin:7px 0 0!important;
padding:7px 8px!important;
white-space:normal!important;
overflow-wrap:anywhere!important;
}
.mcp-slider-shell{
align-items:center!important;
}
.mcp-guide-help{
margin-top:8px!important;
}
@media(max-width:900px){
.mcp-guide-step{
flex:0 0 min(76vw,268px)!important;
min-width:min(76vw,268px)!important;
max-width:min(76vw,268px)!important;
min-height:0!important;
}
}
/* MCP balanced card system — 2026-09-20 */
.mcp-slider-shell{
gap:8px!important;
align-items:stretch!important;
}
.mcp-guide-list{
align-items:stretch!important;
gap:10px!important;
padding:0 1px 6px!important;
margin:0 0 8px!important;
}
.mcp-guide-step{
flex:0 0 236px!important;
min-width:236px!important;
max-width:236px!important;
height:118px!important;
min-height:118px!important;
max-height:118px!important;
align-self:stretch!important;
grid-template-columns:28px minmax(0,1fr)!important;
gap:9px!important;
padding:11px!important;
border-radius:13px!important;
}
.mcp-guide-step>b{
width:28px!important;
height:28px!important;
flex:0 0 28px!important;
margin-top:0!important;
border-radius:9px!important;
font-size:10.5px!important;
}
.mcp-guide-step strong{
margin:0 0 4px!important;
font-size:12px!important;
line-height:1.25!important;
letter-spacing:-.08px!important;
}
.mcp-guide-step p{
margin:0!important;
font-size:11.25px!important;
line-height:1.38!important;
}
.mcp-guide-step p strong{
display:inline!important;
font-size:inherit!important;
line-height:inherit!important;
}
.mcp-guide-step code{
font-size:10.5px!important;
line-height:1.25!important;
}
.mcp-inline-endpoint{
margin-top:5px!important;
padding:5px 7px!important;
font-size:9.75px!important;
line-height:1.25!important;
}
.mcp-slider-arrow{
align-self:center!important;
width:34px!important;
height:34px!important;
flex-basis:34px!important;
}
@media(max-width:900px){
.mcp-guide-step{
flex:0 0 min(74vw,252px)!important;
min-width:min(74vw,252px)!important;
max-width:min(74vw,252px)!important;
height:122px!important;
min-height:122px!important;
max-height:122px!important;
}
}
/* Vertically center MCP card content — 2026-09-20 */
.mcp-guide-step{
align-items:center!important;
}
.mcp-guide-step>b{
align-self:center!important;
margin-top:0!important;
}
.mcp-guide-step>div{
height:100%!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
min-width:0!important;
}
/* Production account security + social sign-in · 2026-09-20 */
.social-auth-block{margin:20px 0}.social-divider{display:flex;align-items:center;gap:12px;margin:16px 0;color:#718096;font-size:11px;text-transform:uppercase;letter-spacing:1px}.social-divider:before,.social-divider:after{content:"";height:1px;background:var(--line);flex:1}.social-auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.social-auth-grid.is-single{display:flex;align-items:center;justify-content:flex-start}.social-auth-grid.is-single .social-auth-btn{width:auto;min-width:0;max-width:100%;padding-left:16px;padding-right:18px}.social-auth-btn{min-height:48px;border:1px solid var(--line);border-radius:13px;background:#ffffff05;color:#eef2ff;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;font-weight:800;padding:10px 12px;white-space:nowrap}.social-auth-btn:hover{background:#ffffff0a;border-color:#ffffff2b}.social-brand-icon-shell{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 26px;background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 2px #00000018}.social-brand-icon-shell-threads,.social-brand-icon-shell-x{background:#050505;border-color:#2a2a2a}.social-brand-icon{display:block;width:18px;height:18px;object-fit:contain;flex:0 0 18px}.social-brand-icon-google,.social-brand-icon-facebook,.social-brand-icon-instagram,.social-brand-icon-threads,.social-brand-icon-x{width:18px;height:18px}.social-mark{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;border:1px solid #ffffff18;background:#ffffff08;color:#fff;font-weight:900;flex:0 0 26px}.auth-terms{display:block;color:#8f9bb0;font-size:12px;line-height:1.6;margin-top:8px}.auth-terms a{color:#c4b5fd;text-decoration:underline;text-underline-offset:2px}
.social-provider-admin{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.social-provider-card{min-width:0}.provider-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:18px}.provider-head h2{margin:0}.provider-head small{display:block;margin-top:3px}.toggle-row{display:flex;align-items:flex-start;gap:8px;color:#cbd5e1;font-size:13px;line-height:1.5}.linked-providers{display:grid;gap:9px}.linked-provider{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:13px;background:#ffffff04}.linked-provider strong,.linked-provider small{display:block}.linked-provider small{color:#7f8da2;margin-top:3px;overflow-wrap:anywhere}.danger-zone{border-color:#ef44443d}
@media(max-width:800px){.social-provider-admin{grid-template-columns:1fr}}@media(max-width:520px){.social-auth-grid,.social-auth-grid.is-single{display:grid;grid-template-columns:1fr}.social-auth-grid.is-single .social-auth-btn{width:100%;justify-content:center}.linked-provider{grid-template-columns:auto 1fr}.linked-provider>:last-child{grid-column:2}}
/* Vidora SaaS plans & billing — 2026-09-20 */
.plan-card{position:relative;overflow:hidden}
.plan-card h2{font-size:34px;margin:10px 0 8px;letter-spacing:-1.2px}
.plan-card h2 small{font-size:13px;color:#8f9db2;font-weight:750;letter-spacing:0}
.plan-card ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.sales-section .plan-card .actions{margin-top:28px}
.sales-section .plan-card .actions .btn{margin-top:0}
.plan-card li{position:relative;padding-left:22px;color:#c4cfdf;font-size:13px;line-height:1.5}
.plan-card li:before{content:"✓";position:absolute;left:0;top:0;color:#a78bfa;font-weight:900}
.plan-card.featured{border-color:#7c3aed55;background:linear-gradient(145deg,#7c3aed10,#2563eb08)}
.billing-provider-block{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:14px;background:#ffffff035}
.billing-provider-block h3{margin:0 0 12px}
button[disabled],.btn[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.5)}
/* Profile name links directly to Account & Security — 2026-09-20 */
.navmenu .nav-profile-name{
display:block;
padding:8px 12px 10px;
margin-bottom:4px;
border-bottom:1px solid var(--line);
border-radius:9px;
}
.navmenu .nav-profile-name:hover{
background:#ffffff08;
}
.navmenu .nav-profile-name strong,
.navmenu .nav-profile-name small{
display:block;
padding:0!important;
border:0!important;
margin:0!important;
}
.navmenu .nav-profile-name small{
margin-top:3px!important;
color:var(--muted);
font-weight:500;
}
/* Production security, team and workspace controls — 2026-09-21 */
.recovery-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin-top:12px;
}
.recovery-grid code{
display:block;
padding:9px 10px;
border:1px solid var(--line);
border-radius:9px;
background:#050a14;
color:#d8b4fe;
text-align:center;
font:700 11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.35px;
}
.mfa-disable-form{margin-top:16px}
.mfa-code{font:800 20px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:3px}
.mfa-setup-box{display:grid;gap:14px}
.mfa-qr-wrap{display:flex;justify-content:center;align-items:center;padding:16px;border-radius:16px;background:#fff;width:max-content;max-width:100%;margin:4px auto}
.mfa-qr{display:block;width:min(220px,70vw);height:auto;image-rendering:pixelated}
.mfa-manual{margin-top:4px}
.mfa-manual summary{cursor:pointer;font-weight:800}
.mfa-manual code{word-break:break-all}
.team-invite-form{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.compact-select{width:auto!important;min-width:118px;padding:9px 10px!important}
.workspace-switcher{
padding:8px 10px 10px;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
margin:4px 0;
}
.workspace-switcher label{
display:block;
margin:0 0 6px;
color:#708096;
font-size:9px;
font-weight:900;
letter-spacing:1.2px;
text-transform:uppercase;
}
.workspace-switcher .select{
min-height:36px;
padding:7px 9px;
font-size:11px;
border-radius:9px;
}
@media(max-width:560px){
.recovery-grid{grid-template-columns:1fr}
}
/* Auth provider buttons — one consistent Vidora component */
.social-auth-block{margin:24px 0 6px}
.social-auth-grid,
.social-auth-grid.is-multi{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
width:100%;
}
.social-auth-grid.is-single{
display:grid;
grid-template-columns:1fr;
width:100%;
}
.social-auth-grid .social-auth-btn,
.social-auth-grid.is-single .social-auth-btn{
width:100%;
min-width:0;
max-width:none;
min-height:62px;
height:62px;
box-sizing:border-box;
display:grid;
grid-template-columns:40px minmax(0,1fr) 40px;
align-items:center;
gap:12px;
padding:0 14px;
border:1px solid #ffffff24;
border-radius:16px;
background:#ffffff05;
color:#f6f8ff;
box-shadow:none;
font-family:inherit;
font-size:15px;
font-weight:700;
line-height:1.2;
letter-spacing:0;
text-decoration:none;
white-space:nowrap;
overflow:hidden;
transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.social-auth-grid .social-auth-btn::after{content:"";display:block;width:40px;height:1px}
.social-auth-grid .social-auth-btn:hover{
background:#ffffff0b;
border-color:#ffffff3d;
transform:translateY(-1px);
}
.social-auth-grid .social-auth-btn:focus-visible{
outline:2px solid #8b5cf6;
outline-offset:3px;
}
.social-auth-grid .social-auth-btn>span:last-child{
min-width:0;
width:100%;
padding:0;
text-align:center;
overflow:hidden;
text-overflow:ellipsis;
}
.social-auth-grid .social-brand-icon-shell,
.social-auth-grid .social-mark{
position:static;
left:auto;
width:40px;
height:40px;
min-width:40px;
flex:0 0 40px;
box-sizing:border-box;
border-radius:12px;
display:grid;
place-items:center;
margin:0;
padding:0;
background:#fff;
border:1px solid #e6e9ef;
box-shadow:0 1px 3px #00000020;
}
.social-auth-grid .social-brand-icon-shell-threads,
.social-auth-grid .social-brand-icon-shell-x{
background:#050505;
border-color:#303030;
}
.social-auth-grid .social-brand-icon,
.social-auth-grid .social-brand-icon-google,
.social-auth-grid .social-brand-icon-facebook,
.social-auth-grid .social-brand-icon-instagram,
.social-auth-grid .social-brand-icon-threads,
.social-auth-grid .social-brand-icon-x{
position:static;
left:auto;
display:block;
width:24px;
height:24px;
flex:0 0 24px;
object-fit:contain;
}
.social-divider{
display:flex;
align-items:center;
gap:18px;
margin:28px 0 8px;
text-transform:none;
letter-spacing:0;
font-size:13px;
color:#8ea0be;
}
.social-divider:before,.social-divider:after{content:"";height:1px;background:#ffffff18;flex:1}
@media(max-width:720px){
.social-auth-grid,.social-auth-grid.is-multi{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.social-auth-grid.is-single{grid-template-columns:1fr}
.social-auth-grid .social-auth-btn,.social-auth-grid.is-single .social-auth-btn{
grid-template-columns:34px minmax(0,1fr);
gap:9px;
height:56px;
min-height:56px;
padding:0 10px;
border-radius:14px;
font-size:13px
}
.social-auth-grid .social-auth-btn::after{display:none}
.social-auth-grid .social-auth-btn>span:last-child{text-align:left}
.social-auth-grid .social-brand-icon-shell,.social-auth-grid .social-mark{width:34px;height:34px;min-width:34px;border-radius:10px}
.social-auth-grid .social-brand-icon,.social-auth-grid .social-brand-icon-google,.social-auth-grid .social-brand-icon-facebook,.social-auth-grid .social-brand-icon-instagram,.social-auth-grid .social-brand-icon-threads,.social-auth-grid .social-brand-icon-x{width:21px;height:21px}
}
@media(max-width:360px){
.social-auth-grid,.social-auth-grid.is-multi{gap:8px}
.social-auth-grid .social-auth-btn,.social-auth-grid.is-single .social-auth-btn{
grid-template-columns:30px minmax(0,1fr);
gap:7px;
padding:0 8px;
font-size:12px
}
.social-auth-grid .social-brand-icon-shell,.social-auth-grid .social-mark{width:30px;height:30px;min-width:30px}
.social-auth-grid .social-brand-icon,.social-auth-grid .social-brand-icon-google,.social-auth-grid .social-brand-icon-facebook,.social-auth-grid .social-brand-icon-instagram,.social-auth-grid .social-brand-icon-threads,.social-auth-grid .social-brand-icon-x{width:19px;height:19px}
}
/* Unified Inbox lead pipeline + WhatsApp-native polish — 2026-09-21 */
.inbox-stage-tabs{
display:grid;
grid-template-columns:repeat(6,minmax(118px,1fr));
gap:8px;
margin:14px 0 12px;
}
.lead-stage-tab{
min-height:52px;
border:1px solid var(--line);
background:#0b1322;
border-radius:13px;
padding:9px 11px;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
color:#9cabbd;
font-size:11px;
font-weight:800;
}
.lead-stage-tab b{
min-width:25px;
height:25px;
display:grid;
place-items:center;
padding:0 6px;
border-radius:999px;
background:#ffffff08;
color:#d8e1ee;
font-size:10px;
}
.lead-stage-tab:hover,.lead-stage-tab.active{background:#ffffff08;border-color:#ffffff2a;color:#fff}
.lead-stage-tab.stage-new.active{border-color:#3b82f666;box-shadow:inset 0 0 0 1px #3b82f622}
.lead-stage-tab.stage-followup.active{border-color:#f59e0b66;box-shadow:inset 0 0 0 1px #f59e0b22}
.lead-stage-tab.stage-order.active{border-color:#8b5cf666;box-shadow:inset 0 0 0 1px #8b5cf622}
.lead-stage-tab.stage-hot.active{border-color:#f9731666;box-shadow:inset 0 0 0 1px #f9731622}
.lead-stage-tab.stage-converted.active{border-color:#22c55e66;box-shadow:inset 0 0 0 1px #22c55e22}
.lead-stage{
display:inline-flex!important;
align-items:center;
width:auto!important;
min-height:20px;
padding:3px 7px!important;
border-radius:999px!important;
font-size:8px!important;
line-height:1.2;
font-weight:900!important;
letter-spacing:.25px;
white-space:nowrap;
border:1px solid transparent;
}
.lead-stage.stage-new{background:#3b82f617!important;color:#93c5fd!important;border-color:#3b82f633!important}
.lead-stage.stage-followup{background:#f59e0b17!important;color:#fcd34d!important;border-color:#f59e0b33!important}
.lead-stage.stage-order{background:#8b5cf617!important;color:#c4b5fd!important;border-color:#8b5cf633!important}
.lead-stage.stage-hot{background:#f9731617!important;color:#fdba74!important;border-color:#f9731633!important}
.lead-stage.stage-converted{background:#22c55e17!important;color:#86efac!important;border-color:#22c55e33!important}
.inbox-filter{
grid-template-columns:minmax(210px,1.5fr) 150px 170px 190px auto auto;
}
.inbox-list{
background:#08151a!important;
}
.inbox-list-head{
background:#0b1f20;
}
.inbox-conversation.active{
background:linear-gradient(90deg,#00a8841d,#0b2d2710);
border-color:#00a88442;
}
.inbox-avatar{
background:linear-gradient(135deg,#00a88438,#22c55e20);
border-color:#00a8843d;
color:#9fffc9;
border-radius:50%;
}
.inbox-unread{background:#00a884}
.inbox-chat{
background:
radial-gradient(circle at 20% 0,#00a8840d,transparent 30%),
#081511!important;
}
.inbox-chat-head{background:#0b1f1a}
.inbox-message-row.in .inbox-message{
background:#162821;
border-color:#ffffff13;
}
.inbox-message-row.out .inbox-message{
background:#075e54;
border-color:#0d806f;
border-bottom-right-radius:5px;
}
.inbox-composer{background:#0b1f1a}
.inbox-composer .textarea{background:#101f1b;border-color:#ffffff16}
.lead-stage-card{background:linear-gradient(135deg,#ffffff04,#00a88408)}
.lead-stage-form{display:grid;gap:9px}
.lead-stage-form .select{min-height:40px}
.lead-stage-filter{margin-bottom:14px}
.lead-stage-filter form{display:flex;align-items:center;gap:10px}
.lead-stage-filter label{font-size:11px;color:#8391a5;font-weight:800;white-space:nowrap}
.lead-stage-filter .select{width:min(260px,100%)}
.lead-inline-stage{display:grid;gap:5px;min-width:130px}
.lead-inline-stage .select{min-width:130px;padding:8px 9px;font-size:11px}
@media(max-width:1180px){
.inbox-filter{grid-template-columns:1fr 1fr 1fr}
.inbox-filter .field:first-child{grid-column:1/-1}
}
@media(max-width:760px){
.inbox-stage-tabs{
display:flex;
overflow-x:auto;
scroll-snap-type:x proximity;
padding-bottom:3px;
}
.lead-stage-tab{min-width:132px;scroll-snap-align:start}
.inbox-filter{grid-template-columns:1fr 1fr}
.inbox-filter .field:first-child{grid-column:1/-1}
}
@media(max-width:520px){
.inbox-filter{grid-template-columns:1fr}
.inbox-filter .field:first-child{grid-column:auto}
.lead-stage-filter form{align-items:stretch;flex-direction:column}
.lead-stage-filter .select{width:100%}
}
/* Data tables: search, filters, bulk actions, pagination and quick-view dialogs */
.data-page{max-width:1440px}
.table-filter-panel{margin-bottom:18px}
.table-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-items:end}
.table-filter-grid .field{margin:0}
.table-filter-grid .filter-search{grid-column:span 2}
.filter-actions{display:flex;gap:8px;align-items:center;min-height:43px}
.data-table-panel{padding:0;overflow:hidden}
.table-toolbar{min-height:64px;padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px;background:#ffffff02}
.bulk-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bulk-form .select{width:auto;min-width:220px;min-height:40px}
.selected-count{font-size:11px;color:#8190a5;white-space:nowrap}
.data-table{min-width:1040px}
.data-table th{white-space:nowrap}
.data-table td{vertical-align:middle}
.select-col{width:44px;text-align:center!important}
.select-col input{width:16px;height:16px;accent-color:#7c3aed}
.table-link-btn,.table-date-btn{appearance:none;border:0;background:transparent;color:inherit;padding:0;cursor:pointer;text-align:left;display:block}
.table-link-btn{color:#ddd6fe;font-weight:850}
.table-link-btn:hover,.table-date-btn:hover{text-decoration:underline;text-underline-offset:3px}
.table-date-btn{margin-top:4px;color:#7f8da2;font-size:11px}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.row-actions .btn{padding:8px 10px;font-size:11px}
.empty-table{text-align:center!important;padding:34px!important}
.data-pagination{min-height:62px;padding:12px 16px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:14px}
.data-pagination>span{font-size:12px;color:#8190a5}
.data-pagination>div{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.data-pagination .btn{padding:8px 11px;font-size:11px}
.page-chip{min-width:34px;height:34px;padding:0 9px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;color:#aab6c8;font-size:11px;font-weight:800}
.page-chip:hover,.page-chip.active{background:#7c3aed17;border-color:#7c3aed55;color:#fff}
.page-chip.active{box-shadow:inset 0 0 0 1px #7c3aed22}
.page-gap{color:#5c687a;padding:0 2px}
dialog.data-modal{width:min(820px,calc(100% - 28px));max-height:86vh;padding:0;border:1px solid #ffffff20;border-radius:20px;background:#0b1221;color:#f8fafc;box-shadow:0 34px 120px #000c;overflow:hidden}
dialog.data-modal::backdrop{background:#020617b8;backdrop-filter:blur(5px)}
.data-modal-card{max-height:86vh;overflow:auto}
.data-modal-card>header{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line);background:#0b1221f5;backdrop-filter:blur(15px)}
.data-modal-card>header h2{margin:6px 0 0;font-size:24px;letter-spacing:-.7px}
.modal-close{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:#ffffff06;color:#cbd5e1;font-size:24px;line-height:1;cursor:pointer}
.modal-close:hover{background:#ffffff0c;color:#fff}
.data-modal-card>section{padding:20px 22px;border-bottom:1px solid var(--line)}
.data-modal-card>section h3{margin:0 0 13px;font-size:14px;color:#e5e7eb}
.data-detail-list{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);border-radius:13px;overflow:hidden}
.data-detail-list>div{padding:12px 13px;border-bottom:1px solid var(--line);min-width:0}
.data-detail-list>div:nth-child(odd){border-right:1px solid var(--line)}
.data-detail-list>div:nth-last-child(-n+2){border-bottom:0}
.data-detail-list dt{font-size:10px;letter-spacing:.7px;text-transform:uppercase;color:#6f7e93;font-weight:850}
.data-detail-list dd{margin:5px 0 0;color:#dbe3ef;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.data-modal-card>footer{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:18px 22px;background:#09101d}
@media(max-width:1100px){.table-filter-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.table-filter-grid .filter-search{grid-column:span 2}}
@media(max-width:760px){
.table-filter-grid{grid-template-columns:1fr 1fr}
.table-filter-grid .filter-search{grid-column:1/-1}
.table-toolbar,.data-pagination{align-items:flex-start;flex-direction:column}
.bulk-form{width:100%}.bulk-form .select{flex:1;min-width:0}
.data-pagination>div{width:100%}
.data-detail-list{grid-template-columns:1fr}
.data-detail-list>div,.data-detail-list>div:nth-child(odd){border-right:0;border-bottom:1px solid var(--line)}
.data-detail-list>div:last-child{border-bottom:0}
}
@media(max-width:520px){
.table-filter-grid{grid-template-columns:1fr}
.table-filter-grid .filter-search{grid-column:auto}
.filter-actions{align-items:stretch;flex-direction:column}
.filter-actions .btn{width:100%}
.bulk-form{align-items:stretch;flex-direction:column}
.bulk-form .select,.bulk-form .btn{width:100%}
.selected-count{align-self:flex-start}
dialog.data-modal{width:calc(100% - 18px);max-height:92vh;border-radius:16px}
.data-modal-card{max-height:92vh}
.data-modal-card>header,.data-modal-card>section,.data-modal-card>footer{padding-left:16px;padding-right:16px}
}
/* New website domain selector */
.authbox.new-site-box{width:min(760px,100%)}
.new-site-box .plan-access-note{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:#ffffff04}
.new-site-box .plan-access-note strong{font-size:12px}
.new-site-box .plan-access-note span{color:#c4b5fd;font-size:12px;font-weight:800;text-align:right}
.domain-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.domain-option{display:flex!important;align-items:flex-start;gap:11px;margin:0!important;padding:14px;border:1px solid var(--line);border-radius:13px;background:#080f1e;cursor:pointer}
.domain-option.active{border-color:#7c3aed88;background:#7c3aed10;box-shadow:inset 0 0 0 1px #7c3aed22}
.domain-option.disabled{opacity:.5;cursor:not-allowed}
.domain-option input{margin-top:3px;accent-color:#7c3aed}
.domain-option span{display:block;min-width:0}
.domain-option strong{display:block;font-size:13px;color:#edf2f7}
.domain-option small{display:block;margin-top:4px;color:var(--muted);font-size:11px;line-height:1.45}
.subdomain-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.subdomain-suffix{display:flex;align-items:center;min-height:43px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#ffffff04;color:#aebbd0;font-size:14px;white-space:nowrap}
.field-note{display:block;margin-top:7px;color:#76859b;font-size:11px;line-height:1.55}
.new-site-actions{display:flex;align-items:center;gap:9px;margin-top:20px}
@media(max-width:620px){
.domain-choice{grid-template-columns:1fr}
.subdomain-row{grid-template-columns:minmax(0,1fr) auto;gap:7px}
.subdomain-suffix{padding:0 10px;font-size:12px}
.new-site-box .plan-access-note{align-items:flex-start;flex-direction:column;gap:5px}
.new-site-box .plan-access-note span{text-align:left}
.new-site-actions{align-items:stretch;flex-direction:column}
.new-site-actions .btn{width:100%}
}
/* Dashboard website rows: fixed, consistent action alignment */
.dashboard-sites-panel .dashboard-site-row{
display:grid;
grid-template-columns:minmax(0,1fr) 330px;
align-items:center;
gap:22px;
min-height:112px;
}
.dashboard-sites-panel .dashboard-site-info{
min-width:0;
}
.dashboard-sites-panel .dashboard-site-info>strong{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-bottom:10px;
}
.dashboard-sites-panel .dashboard-site-info>small{
display:block;
max-width:100%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.dashboard-sites-panel .dashboard-site-actions{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
width:100%;
min-width:0;
}
.dashboard-sites-panel .dashboard-site-actions .btn{
width:100%;
min-width:0;
min-height:48px;
padding:11px 12px;
white-space:nowrap;
}
.dashboard-site-action-placeholder{
visibility:hidden;
pointer-events:none;
}
@media(max-width:1180px){
.dashboard-sites-panel .dashboard-site-row{
grid-template-columns:minmax(0,1fr) 300px;
gap:16px;
}
}
@media(max-width:720px){
.dashboard-sites-panel .dashboard-site-row{
grid-template-columns:1fr;
gap:14px;
}
.dashboard-sites-panel .dashboard-site-actions{
width:100%;
}
}
@media(max-width:460px){
.dashboard-sites-panel .dashboard-site-actions{
grid-template-columns:1fr;
}
.dashboard-site-action-placeholder{
display:none;
}
}
/* 2026-09-21 · hidden scrollbars, lead/order notes and order detail refinement */
html,body{max-width:100%;overflow-x:hidden}
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important}
.table-scroll,.data-modal-card{scrollbar-width:none;-ms-overflow-style:none}
.table-scroll::-webkit-scrollbar,.data-modal-card::-webkit-scrollbar{width:0;height:0;display:none}
.section-title-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:13px}
.section-title-row h3{margin:0!important}
.section-title-row .muted{font-size:11px}
.modal-manage-section{background:linear-gradient(180deg,#7c3aed0c,#ffffff01)}
.modal-manage-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:end}
.modal-manage-form .field{margin:0}
.modal-manage-form .btn{min-height:43px}
.entity-note-list{display:grid;gap:10px}
.entity-note{padding:14px 15px;border:1px solid var(--line);border-radius:14px;background:#ffffff045}
.entity-note-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.entity-note-head strong{font-size:12px;color:#f1f5f9}
.entity-note-head time{margin-left:auto;color:#728196;font-size:10px;white-space:nowrap}
.role-badge{display:inline-flex;align-items:center;min-height:22px;padding:3px 8px;border:1px solid #7c3aed42;border-radius:999px;background:#7c3aed13;color:#c4b5fd;font-size:9px;font-weight:900;letter-spacing:.55px;text-transform:uppercase}
.entity-note p{margin:9px 0 0;color:#cbd5e1;font-size:12px;line-height:1.65;overflow-wrap:anywhere}
.entity-note-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.entity-note-form .field{margin-bottom:10px}
.entity-note-form textarea.input{min-height:90px;resize:vertical;line-height:1.55}
.order-detail-page{padding-bottom:64px}
.order-detail-head{align-items:center}
.order-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.order-title-row h1{margin-right:2px}
.order-summary-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}
.order-summary-strip article{min-width:0;padding:17px 18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#ffffff08,#ffffff035)}
.order-summary-strip small{display:block;color:#748399;font-size:9px;font-weight:900;letter-spacing:1.15px}
.order-summary-strip strong{display:block;margin-top:7px;color:#f8fafc;font-size:18px;line-height:1.2;overflow-wrap:anywhere}
.order-summary-strip span{display:block;margin-top:5px;color:#8795a9;font-size:10px;overflow-wrap:anywhere}
.order-detail-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);gap:18px;align-items:start}
.order-main-stack,.order-side-stack{display:grid;gap:18px;min-width:0}
.order-card{overflow:hidden}
.order-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:18px}
.order-card-head h2{margin:6px 0 0;font-size:20px;letter-spacing:-.45px}
.order-count-pill{display:inline-grid;place-items:center;min-height:28px;padding:4px 9px;border:1px solid var(--line);border-radius:999px;background:#ffffff05;color:#aebbd0;font-size:10px;font-weight:800}
.order-customer-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.order-customer-grid>div{min-width:0;padding:14px;border:1px solid var(--line);border-radius:13px;background:#ffffff035}
.order-customer-grid>div.wide{grid-column:1/-1}
.order-customer-grid small{display:block;color:#728196;font-size:10px;text-transform:uppercase;letter-spacing:.65px}
.order-customer-grid strong{display:block;margin-top:6px;color:#e8eef7;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.order-items-list{display:grid;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.order-item-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 15px;border-bottom:1px solid var(--line)}
.order-item-row:last-child{border-bottom:0}
.order-item-row>div{min-width:0}
.order-item-row strong{display:block;font-size:13px}
.order-item-row small{display:block;margin-top:4px;color:#728196;font-size:10px}
.order-item-row>span{flex:0 0 auto;color:#cbd5e1;font-size:12px;font-weight:800}
.order-total-box{width:min(380px,100%);margin:16px 0 0 auto;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:#ffffff035}
.order-total-box>div{display:flex;justify-content:space-between;gap:20px;padding:7px 0;color:#8998ad;font-size:12px}
.order-total-box>div strong{color:#dce5f2}
.order-total-box .grand{margin-top:5px;padding-top:12px;border-top:1px solid var(--line);font-size:14px}
.order-total-box .grand strong{font-size:17px;color:#fff}
.order-keyvals{display:grid;gap:8px}
.order-keyvals>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line)}
.order-keyvals>div:last-child{border-bottom:0}
.order-keyvals span{color:#7f8da2;font-size:11px}
.order-keyvals strong{max-width:62%;font-size:12px;text-align:right;overflow-wrap:anywhere}
.receipt-stack{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.receipt-stack h3{margin:0 0 10px;font-size:13px}
.receipt-row{display:grid;gap:10px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#ffffff035}
.receipt-row+ .receipt-row{margin-top:9px}
.receipt-row>div:first-child strong,.receipt-row>div:first-child small{display:block;overflow-wrap:anywhere}
.receipt-row>div:first-child small{margin-top:4px;color:#718096;font-size:10px}
.receipt-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.receipt-actions form{margin:0}
.receipt-actions .btn{padding:8px 10px;font-size:10px}
.order-status-form .field{margin-bottom:13px}
.order-notes-card .entity-note-list{max-height:380px;overflow:auto}
.order-audit-card{margin-top:18px}
.order-audit-list{display:grid}
.order-audit-list article{display:grid;grid-template-columns:190px minmax(220px,.75fr) minmax(0,1fr);gap:20px;padding:15px 0;border-top:1px solid var(--line)}
.order-audit-list article:first-child{border-top:0}
.audit-time strong,.audit-time span,.audit-actor strong,.audit-actor span{display:block}
.audit-time strong{font-size:11px;color:#dce5f2}
.audit-time span{margin-top:4px;color:#738198;font-size:10px}
.audit-change{display:grid;gap:5px;color:#8795a9;font-size:11px}
.audit-change strong{color:#e8eef7}
.audit-actor strong{font-size:11px}
.audit-actor span{margin-top:5px;color:#7d8ba0;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
@media(max-width:980px){
.order-summary-strip{grid-template-columns:1fr 1fr}
.order-detail-layout{grid-template-columns:1fr}
.order-side-stack{grid-template-columns:1fr 1fr;align-items:start}
.order-side-stack>.order-card{min-width:0}
.order-audit-list article{grid-template-columns:150px minmax(0,.8fr) minmax(0,1fr)}
}
@media(max-width:720px){
.modal-manage-form{grid-template-columns:1fr}
.modal-manage-form .btn{width:100%}
.entity-note-head time{width:100%;margin-left:0}
.order-summary-strip{grid-template-columns:1fr 1fr}
.order-side-stack{grid-template-columns:1fr}
.order-customer-grid{grid-template-columns:1fr}
.order-customer-grid>div.wide{grid-column:auto}
.order-item-row{align-items:flex-start;flex-direction:column;gap:7px}
.order-item-row>span{white-space:normal}
.order-audit-list article{grid-template-columns:1fr;gap:8px}
}
@media(max-width:460px){
.order-summary-strip{grid-template-columns:1fr}
.order-detail-head .actions{width:100%}
.order-detail-head .actions .btn{flex:1}
}
.status.red{background:#ef444416;color:#fecaca}
.order-awb-link{color:#c4b5fd;text-decoration:underline;text-underline-offset:3px;font-weight:850}
.order-awb-link:hover{color:#fff}
.shipping-action-links{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 4px}
.shipping-action-links .btn{font-size:11px;padding:9px 11px}
.easyparcel-awb-pending{margin:14px 0 4px}
.easyparcel-sync-form{margin:10px 0 2px}
.easyparcel-sync-form .btn{width:100%}
.fulfilment-keyvals{margin-bottom:12px}
/* Analytics professional chart + in-card pagination — 2026-09-21 */
.analytics-area-panel{
margin-top:18px;
padding:26px 28px 24px!important;
overflow:hidden;
background:
radial-gradient(circle at 88% 10%,rgba(124,58,237,.11),transparent 32%),
linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.012));
}
.analytics-chart-head{align-items:flex-start!important}
.analytics-chart-head h2{margin:5px 0 0}
.analytics-range-badge{
display:inline-flex;
align-items:center;
min-height:34px;
padding:0 12px;
border:1px solid rgba(148,163,184,.16);
border-radius:999px;
background:rgba(15,23,42,.52);
color:#dbe4f3;
font-size:12px;
font-weight:800;
white-space:nowrap;
}
.traffic-chart-meta{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin:22px 0 12px;
}
.traffic-chart-meta>div{
min-width:0;
padding:13px 15px;
border:1px solid rgba(148,163,184,.11);
border-radius:14px;
background:rgba(255,255,255,.025);
}
.traffic-chart-meta small{
display:block;
margin-bottom:7px;
color:#718096;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
}
.traffic-chart-meta strong{
display:inline-block;
color:#f8fafc;
font-size:21px;
line-height:1.05;
}
.traffic-chart-meta span{
margin-left:7px;
color:#8492a6;
font-size:11px;
}
.traffic-area-shell{
display:flex;
gap:10px;
min-width:0;
padding:16px 12px 8px 4px;
border:1px solid rgba(148,163,184,.09);
border-radius:18px;
background:
linear-gradient(180deg,rgba(15,23,42,.42),rgba(15,23,42,.12)),
rgba(2,6,23,.16);
}
.traffic-y-axis{
flex:0 0 38px;
height:244px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:flex-end;
padding:0 2px 18px 0;
color:#64748b;
font-size:10px;
font-variant-numeric:tabular-nums;
}
.traffic-plot{min-width:0;flex:1}
.traffic-area-svg{
display:block;
width:100%;
height:244px;
overflow:visible;
}
.traffic-grid-line{
stroke:rgba(148,163,184,.13);
stroke-width:1;
vector-effect:non-scaling-stroke;
}
.traffic-area-fill{fill:url(#vidoraTrafficFill)}
.traffic-area-line{
fill:none;
stroke:url(#vidoraTrafficStroke);
stroke-width:3.25;
stroke-linecap:round;
stroke-linejoin:round;
vector-effect:non-scaling-stroke;
filter:drop-shadow(0 4px 9px rgba(56,189,248,.13));
}
.traffic-point{
fill:#0f172a;
stroke:#67e8f9;
stroke-width:2;
vector-effect:non-scaling-stroke;
}
.traffic-point.is-latest{
fill:#8b5cf6;
stroke:#ddd6fe;
stroke-width:3;
filter:drop-shadow(0 0 6px rgba(139,92,246,.65));
}
.traffic-x-labels{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:8px 3px 0;
color:#6f7f96;
font-size:10px;
font-variant-numeric:tabular-nums;
}
.analytics-empty-chart{
min-height:220px;
display:grid;
place-items:center;
align-content:center;
gap:7px;
margin-top:18px;
border:1px dashed rgba(148,163,184,.15);
border-radius:18px;
background:rgba(255,255,255,.02);
text-align:center;
}
.analytics-empty-chart strong{font-size:15px}
.analytics-empty-chart span{color:#718096;font-size:12px}
.analytics-table-card{
padding:0!important;
overflow:hidden;
display:flex;
flex-direction:column;
}
.analytics-card-head{
min-height:78px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:19px 20px 15px;
border-bottom:1px solid rgba(148,163,184,.10);
}
.analytics-card-head h2{
margin:0 0 5px;
font-size:18px;
line-height:1.2;
}
.analytics-card-count{
display:block;
color:#718096;
font-size:10px;
font-weight:800;
letter-spacing:.04em;
}
.analytics-page-top{
flex:0 0 auto;
display:inline-flex;
align-items:center;
min-height:28px;
padding:0 9px;
border:1px solid rgba(148,163,184,.12);
border-radius:999px;
background:rgba(255,255,255,.025);
color:#8492a6;
font-size:10px;
font-weight:800;
font-variant-numeric:tabular-nums;
}
.analytics-table-wrap{
width:100%;
overflow:hidden!important;
flex:1 1 auto;
}
.analytics-table-card .table{
width:100%;
table-layout:fixed;
border-collapse:collapse;
}
.analytics-table-card .table th,
.analytics-table-card .table td{
padding:14px 18px!important;
vertical-align:middle;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.analytics-table-card .table th{
color:#8492a6;
font-size:10px;
font-weight:900;
letter-spacing:.065em;
}
.analytics-table-card .table td{
height:52px;
color:#e7edf7;
font-size:13px;
}
.analytics-table-card .table tbody tr{
transition:background-color .16s ease;
}
.analytics-table-card .table tbody tr:hover{
background:rgba(255,255,255,.022);
}
.analytics-empty-row{
text-align:center;
height:112px!important;
white-space:normal!important;
}
.analytics-pagination{
min-height:58px;
margin-top:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:11px 16px 11px 20px;
border-top:1px solid rgba(148,163,184,.10);
background:rgba(2,6,23,.16);
color:#718096;
font-size:10px;
font-weight:700;
}
.analytics-pagination-controls{
display:flex;
align-items:center;
gap:8px;
}
.analytics-pagination-controls>span{
min-width:44px;
text-align:center;
color:#a7b3c5;
font-size:10px;
font-variant-numeric:tabular-nums;
}
.analytics-page-btn{
width:34px;
height:34px;
display:grid;
place-items:center;
padding:0;
border:1px solid rgba(148,163,184,.14);
border-radius:10px;
background:rgba(255,255,255,.035);
color:#dbe4f3;
font:700 20px/1 system-ui,sans-serif;
cursor:pointer;
transition:border-color .16s ease,background-color .16s ease,transform .16s ease,opacity .16s ease;
}
.analytics-page-btn:hover:not(:disabled){
border-color:rgba(139,92,246,.50);
background:rgba(124,58,237,.14);
transform:translateY(-1px);
}
.analytics-page-btn:disabled{
cursor:default;
opacity:.28;
}
@media(max-width:760px){
.analytics-area-panel{padding:20px 16px 18px!important}
.traffic-chart-meta{grid-template-columns:1fr 1fr}
.traffic-chart-meta>div:last-child{grid-column:1/-1}
.traffic-area-shell{gap:6px;padding-left:0;padding-right:7px}
.traffic-y-axis{flex-basis:32px;height:205px;font-size:9px}
.traffic-area-svg{height:205px}
.traffic-x-labels{font-size:9px}
.analytics-card-head{min-height:70px;padding:16px}
.analytics-card-head h2{font-size:16px}
.analytics-table-card .table th,
.analytics-table-card .table td{padding:12px 11px!important}
.analytics-table-card .table td{font-size:12px}
.analytics-pagination{padding-left:14px;padding-right:12px}
}
@media(max-width:480px){
.traffic-chart-meta{grid-template-columns:1fr}
.traffic-chart-meta>div:last-child{grid-column:auto}
.analytics-range-badge{font-size:10px}
.analytics-card-count{font-size:9px}
.analytics-page-top{display:none}
.analytics-table-card .table th{font-size:9px;letter-spacing:.03em}
.analytics-table-card .table td{font-size:11px}
}
.analytics-table-card .table{display:table!important;overflow:visible!important;min-width:0!important}
/* Analytics date range controls — 2026-09-21 */
.analytics-range-field{min-width:0}
.analytics-custom-dates{
display:none;
grid-column:span 2;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
min-width:0;
}
.analytics-custom-dates.is-visible{display:grid}
.analytics-custom-dates>div{min-width:0}
.analytics-range-quick{
appearance:auto;
-webkit-appearance:auto;
min-width:132px;
max-width:210px;
padding:0 34px 0 13px;
outline:none;
cursor:pointer;
}
.analytics-range-quick:focus{
border-color:rgba(139,92,246,.55);
box-shadow:0 0 0 3px rgba(124,58,237,.12);
}
.analytics-range-quick option{
background:#0d1425;
color:#f8fafc;
}
@media(max-width:1100px){
.analytics-custom-dates{grid-column:span 2}
}
@media(max-width:760px){
.analytics-custom-dates{
grid-column:auto;
grid-template-columns:1fr 1fr;
}
.analytics-range-quick{
min-width:122px;
max-width:160px;
}
}
@media(max-width:420px){
.analytics-custom-dates{grid-template-columns:1fr}
.analytics-chart-head{
width:100%;
align-items:stretch!important;
}
.analytics-chart-head>div{min-width:0}
.analytics-range-quick{
width:100%;
max-width:none;
}
}
.analytics-range-quick{display:block;color:#dbe4f3;color-scheme:dark}
/* Scripted Support Chatbot — 2026-09-21 */
.support-chatbot-card{
min-width:0;
display:flex;
flex-direction:column;
gap:14px;
align-self:start;
}
.support-chatbot-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
}
.support-chatbot-head h3{margin:4px 0 6px}
.support-chatbot-head p{margin:0;max-width:540px}
.support-bot-status{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:7px;
padding:7px 10px;
border:1px solid var(--line);
border-radius:999px;
font-size:11px;
font-weight:800;
color:#b8c3d3;
background:#ffffff05;
}
.support-bot-status i{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 4px rgba(34,197,94,.10);
}
.support-chat-log{
height:390px;
overflow:auto;
overscroll-behavior:contain;
padding:14px;
border:1px solid var(--line);
border-radius:16px;
background:rgba(3,7,18,.42);
display:flex;
flex-direction:column;
gap:12px;
scrollbar-width:thin;
}
.support-chat-row{
display:flex;
align-items:flex-end;
gap:9px;
min-width:0;
}
.support-chat-row.user{justify-content:flex-end}
.support-chat-avatar{
flex:0 0 28px;
width:28px;
height:28px;
border-radius:9px;
display:grid;
place-items:center;
font-size:11px;
font-weight:900;
background:linear-gradient(135deg,#7c3aed,#2563eb);
color:#fff;
box-shadow:0 6px 18px rgba(37,99,235,.16);
}
.support-chat-bubble{
max-width:min(84%,560px);
padding:10px 12px;
border-radius:15px;
font-size:12px;
line-height:1.55;
overflow-wrap:anywhere;
}
.support-chat-row.bot .support-chat-bubble{
background:#101827;
border:1px solid var(--line);
border-bottom-left-radius:5px;
color:#d9e2ef;
}
.support-chat-row.user .support-chat-bubble{
background:linear-gradient(135deg,#7c3aed,#2563eb);
color:#fff;
border-bottom-right-radius:5px;
}
.support-chat-bubble a{
color:#b9c9ff;
text-decoration:underline;
text-underline-offset:2px;
}
.support-chat-row.user .support-chat-bubble a{color:#fff}
.support-chat-suggestions{
display:flex;
flex-wrap:wrap;
gap:8px;
}
.support-chat-suggestions button{
border:1px solid var(--line);
background:#ffffff05;
color:#c7d2e2;
border-radius:999px;
padding:8px 11px;
font:inherit;
font-size:11px;
cursor:pointer;
}
.support-chat-suggestions button:hover{
border-color:rgba(124,58,237,.45);
background:rgba(124,58,237,.10);
color:#fff;
}
.support-chat-form{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:9px;
align-items:center;
}
.support-chat-form .input{margin:0;min-width:0}
.support-chat-form .btn{min-height:44px}
.support-chat-note{
margin:0;
color:#78869a;
font-size:10px;
line-height:1.5;
}
@media(max-width:760px){
.support-chatbot-head{gap:10px}
.support-chat-log{height:360px;padding:11px}
.support-chat-bubble{max-width:88%}
.support-chat-suggestions{
flex-wrap:nowrap;
overflow-x:auto;
padding-bottom:2px;
scrollbar-width:none;
}
.support-chat-suggestions::-webkit-scrollbar{display:none}
.support-chat-suggestions button{white-space:nowrap;flex:0 0 auto}
.support-chat-form{grid-template-columns:minmax(0,1fr) auto}
}
@media(max-width:430px){
.support-chatbot-head{display:block}
.support-bot-status{margin-top:9px}
.support-chat-log{height:330px}
.support-chat-form .btn{padding-inline:13px}
}
/* =========================================================
VIDORA PRODUCTION UI SYSTEM v1 · 2026-09-21
Foundation: accessibility, responsive density, custom
scrollbars, role-aware layouts, mobile data cards and inbox.
========================================================= */
:root{
--ui-radius-sm:10px;
--ui-radius-md:14px;
--ui-radius-lg:18px;
--ui-control:44px;
--ui-focus:#a78bfa;
--ui-scroll-track:#070d18;
--ui-scroll-thumb:#2f3c52;
--ui-scroll-thumb-hover:#596b88;
}
/* Restore discoverable scrolling and keep it visually native to Vidora. */
*{scrollbar-width:thin;scrollbar-color:var(--ui-scroll-thumb) var(--ui-scroll-track)}
*::-webkit-scrollbar{width:10px!important;height:10px!important;display:block!important}
*::-webkit-scrollbar-track{background:var(--ui-scroll-track);border-radius:999px}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#38465d,#253247);border:2px solid var(--ui-scroll-track);border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#65758e,#3f5069)}
.table-scroll,.data-modal-card,.sidebar-nav,.inbox-conversations,.inbox-messages,.support-chat-log,.inbox-stage-tabs,.mcp-guide-list{
scrollbar-width:thin;
scrollbar-color:var(--ui-scroll-thumb) transparent;
}
/* Keyboard and accessibility focus. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible{
outline:2px solid var(--ui-focus)!important;
outline-offset:3px;
box-shadow:0 0 0 4px rgba(124,58,237,.16)!important;
}
.btn,.input,.select,.textarea,.copy-btn,.modal-close{transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease}
.btn{min-height:42px;border-radius:var(--ui-radius-sm)}
.input,.select{min-height:44px}
.textarea{min-height:110px}
button:disabled,.btn[aria-disabled="true"]{opacity:.48;cursor:not-allowed;transform:none!important}
/* Keep micro-copy legible in production. */
.field label{font-size:13px}
.field-note,.muted small,.site small,.notification-body time,.context-meta span,
.inbox-conversation-main time,.inbox-conversation-main small,.inbox-message small,
.context-card>small,.wa-analytics-grid small,.analytics-card-count,.analytics-page-top{font-size:11px}
.kpi small{font-size:11px}
.new-pill,.role-badge{font-size:10px}
.lead-stage{font-size:10px!important;min-height:24px;padding:4px 8px!important}
.inbox-link-tags span{font-size:9px}
/* Page widths: content pages stay readable; data-heavy pages gain space. */
.app-auth .wrap{width:min(1180px,calc(100% - 48px))}
.app-auth .data-page,
.app-auth .analytics-pro{width:min(1440px,calc(100% - 48px));max-width:1440px}
.app-auth .inbox-page{width:min(1500px,calc(100% - 48px));max-width:1500px}
.app-auth .order-detail-page{width:min(1360px,calc(100% - 48px));max-width:1360px}
.route-account-security .dash,.route-commerce .dash,.route-platform-auth .dash{max-width:1120px}
.route-site .dash,.route-platform-ops .dash,.route-platform-billing .dash{max-width:1320px}
/* Header/action consistency. */
.dashhead{align-items:flex-start}
.dashhead>.actions{justify-content:flex-end}
.panel{border-radius:var(--ui-radius-lg)}
.site{border-radius:var(--ui-radius-md)}
.status{min-height:26px;padding:5px 9px}
.row-actions .btn,.receipt-actions .btn,.shipping-action-links .btn{min-height:38px}
/* Dashboard hierarchy. */
.dashboard-primary-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.dashboard-secondary-metrics{margin:-4px 0 20px}
.dashboard-secondary-metrics>summary{
width:max-content;
max-width:100%;
cursor:pointer;
list-style:none;
padding:8px 12px;
border:1px solid var(--line);
border-radius:999px;
background:#ffffff04;
color:#9cacbf;
font-size:12px;
font-weight:800;
}
.dashboard-secondary-metrics>summary::-webkit-details-marker{display:none}
.dashboard-secondary-metrics>summary:after{content:" +";color:#a78bfa}
.dashboard-secondary-metrics[open]>summary:after{content:" −"}
.dashboard-secondary-metrics .kpis{margin:12px 0 0;grid-template-columns:repeat(3,minmax(0,1fr))}
.dashboard-sites-panel .dashboard-site-actions{grid-template-columns:repeat(auto-fit,minmax(92px,1fr))}
/* Mobile navigation: one consistent touch size. */
.mobile-menu a,.public-mobile-menu a{min-height:46px}
.mobile-nav>summary,.public-mobile-nav>summary{min-width:44px;min-height:44px}
/* Data tables become true mobile cards instead of a clipped desktop table. */
@media(max-width:760px){
.data-table-panel{padding:12px;background:transparent;border:0}
.data-table-panel .table-scroll{overflow:visible;margin:0}
.data-table{
display:block!important;
min-width:0!important;
width:100%!important;
border-collapse:separate;
}
.data-table thead{display:none}
.data-table tbody{display:grid;gap:12px}
.data-table tr{
position:relative;
display:grid;
width:100%;
overflow:hidden;
border:1px solid var(--line);
border-radius:16px;
background:linear-gradient(180deg,#0d1425e8,#0a1120d6);
box-shadow:0 12px 34px rgba(0,0,0,.16);
}
.data-table td{
display:grid;
grid-template-columns:minmax(108px,.72fr) minmax(0,1.28fr);
align-items:start;
gap:12px;
width:100%;
min-width:0;
padding:11px 13px!important;
border-bottom:1px solid var(--line)!important;
white-space:normal!important;
overflow:visible!important;
text-overflow:clip!important;
}
.data-table td[data-label]:before{
content:attr(data-label);
color:#718096;
font-size:10px;
font-weight:900;
letter-spacing:.05em;
text-transform:uppercase;
line-height:1.4;
}
.data-table td:last-child{border-bottom:0!important}
.data-table .select-col{
display:flex;
justify-content:flex-end;
position:absolute;
top:10px;
right:10px;
z-index:2;
width:auto!important;
padding:0!important;
border:0!important;
background:transparent;
}
.data-table tr:has(.select-col) td[data-label]:first-of-type{padding-right:48px!important}
.data-table .table-link-btn,.data-table .table-date-btn{max-width:100%}
.data-table .lead-inline-stage,.data-table .lead-inline-stage .select{width:100%;min-width:0}
.data-table .mobile-card-actions{grid-template-columns:1fr}
.data-table .mobile-card-actions:before{display:none}
.data-table .row-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.data-table .row-actions .btn{width:100%;min-height:44px}
.data-pagination{margin-top:10px;border:1px solid var(--line);border-radius:14px;background:#0d1425}
}
@media(max-width:430px){
.data-table td{grid-template-columns:94px minmax(0,1fr);gap:9px;padding:10px 11px!important}
.data-table .row-actions{grid-template-columns:1fr}
}
/* Filters: compact defaults, advanced data remains readable. */
@media(max-width:760px){
.table-filter-panel{padding:16px}
.table-filter-grid{gap:10px}
.table-toolbar{border:1px solid var(--line);border-radius:14px;background:#0d1425;margin-bottom:10px}
.filter-actions .btn,.bulk-form .btn,.bulk-form .select{min-height:44px}
}
/* Unified Inbox: desktop three-pane; mobile master/detail navigation. */
.inbox-mobile-back{display:none}
@media(max-width:980px){
.inbox-page:not(.mobile-chat-selected) .inbox-chat,
.inbox-page:not(.mobile-chat-selected) .inbox-context{display:none!important}
.inbox-page:not(.mobile-chat-selected) .inbox-shell{display:block}
.inbox-page:not(.mobile-chat-selected) .inbox-list{display:block;min-height:520px}
.inbox-page.mobile-chat-selected .inbox-kpis,
.inbox-page.mobile-chat-selected .inbox-stage-tabs,
.inbox-page.mobile-chat-selected .inbox-filter,
.inbox-page.mobile-chat-selected .inbox-list{display:none!important}
.inbox-page.mobile-chat-selected .inbox-shell{display:grid;grid-template-columns:1fr;min-height:0}
.inbox-page.mobile-chat-selected .inbox-chat{display:flex;min-height:calc(100vh - 170px)}
.inbox-page.mobile-chat-selected .inbox-context{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:14px}
.inbox-mobile-back{
display:inline-flex;
align-items:center;
min-height:38px;
width:max-content;
padding:0 10px;
border:1px solid var(--line);
border-radius:10px;
color:#cbd5e1;
font-size:12px;
font-weight:800;
}
.inbox-chat-head{display:grid;grid-template-columns:1fr auto}
.inbox-chat-head>.inbox-mobile-back{grid-column:1/-1}
}
@media(max-width:620px){
.inbox-page{padding-top:16px}
.inbox-page.mobile-chat-selected .dashhead{display:none}
.inbox-page.mobile-chat-selected .inbox-context{grid-template-columns:1fr}
.inbox-conversation{min-height:72px;padding:12px}
.inbox-chat-head{grid-template-columns:1fr}
.inbox-chat-head>.actions{display:grid;grid-template-columns:1fr 1fr}
.inbox-chat-head>.actions form{grid-column:1/-1}
.inbox-chat-head>.actions .btn{width:100%;min-height:44px}
.inbox-messages{max-height:none;min-height:360px}
.inbox-composer .btn{width:100%;min-height:46px}
}
/* Analytics: strong hierarchy and mobile-safe cards/tables. */
.analytics-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.analytics-kpis .kpi{min-height:116px}
@media(max-width:1100px){.analytics-kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){
.analytics-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.analytics-table-card .analytics-table-wrap{overflow-x:auto!important}
.analytics-table-card .table{
min-width:560px!important;
table-layout:auto!important;
}
}
@media(max-width:430px){.analytics-kpis{grid-template-columns:1fr 1fr!important}.analytics-kpis .kpi{min-height:96px;padding:15px!important}}
/* Long configuration pages get stable section rhythm and sticky save affordance. */
.route-site .panel,.route-commerce .panel,.route-whatsapp .panel,
.route-account-security .panel,.route-platform-auth .panel,
.route-platform-ops .panel,.route-platform-billing .panel{scroll-margin-top:84px}
.route-site form>button.btn.primary:last-child,
.route-commerce form>div:last-child>.btn.primary{
min-width:180px;
}
@media(max-width:760px){
.route-site .grid2,.route-commerce .grid2,.route-platform-ops .grid2{grid-template-columns:1fr!important}
.route-site form>button.btn.primary:last-child{
position:sticky;
bottom:10px;
z-index:35;
width:100%;
min-height:50px;
box-shadow:0 14px 38px rgba(0,0,0,.45);
}
}
/* Team/member rows remain operable on phones. */
@media(max-width:620px){
#team .site>.actions{display:grid;grid-template-columns:1fr;width:100%}
#team .site>.actions form{display:grid;grid-template-columns:1fr auto;gap:8px;width:100%}
#team .compact-select{width:100%!important;min-width:0}
#team .team-invite-form .grid2{grid-template-columns:1fr}
}
/* Modal and destructive action polish. */
dialog.data-modal{overscroll-behavior:contain}
.modal-close{min-width:44px;min-height:44px}
.btn.danger{border-color:rgba(239,68,68,.36)}
@media(max-width:520px){
.data-modal-card>footer{position:sticky;bottom:0;z-index:2}
.data-modal-card>footer .btn{flex:1 1 calc(50% - 8px);min-height:44px}
}
/* Notification cards: touch-friendly mobile actions. */
@media(max-width:700px){
.notification-card{grid-template-columns:44px minmax(0,1fr)}
.notification-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.notification-actions .btn{width:100%;min-height:44px}
}
/* Media library and dense admin grids. */
.route-media .dash{max-width:1360px}
.route-media article .btn{min-height:42px}
@media(max-width:620px){
.route-media article{border-radius:15px!important}
.route-platform-ops .table-scroll,.route-platform-billing .table-scroll{overflow-x:auto}
.route-platform-ops .table,.route-platform-billing .table{min-width:760px}
}
/* Platform context is intentionally visually distinct. */
.role-platform-admin .app-topbar{box-shadow:inset 0 -2px rgba(245,158,11,.22)}
.role-platform-admin .sidebar-brand:after{
content:"PLATFORM";
margin-left:auto;
padding:4px 7px;
border:1px solid rgba(245,158,11,.28);
border-radius:999px;
color:#fcd34d;
font-size:9px;
font-weight:900;
letter-spacing:.08em;
}
/* Mobile layout safety. */
@media(max-width:900px){
.app-auth .wrap,.app-auth .data-page,.app-auth .analytics-pro,.app-auth .inbox-page,.app-auth .order-detail-page{
width:min(100% - 28px,1180px);
}
}
@media(max-width:520px){
.btn{min-height:44px}
.app-auth .panel{border-radius:16px}
.dashboard-primary-kpis{grid-template-columns:1fr 1fr!important}
.dashboard-secondary-metrics .kpis{grid-template-columns:1fr 1fr}
.business-hub-card{min-height:132px;padding:17px}
.copy-btn{min-height:40px}
}
@media(max-width:380px){
.dashboard-primary-kpis,.dashboard-secondary-metrics .kpis{grid-template-columns:1fr!important}
}
/* Reduce motion when requested. */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
/* Section navigation for long production settings pages. */
.section-nav{
position:sticky;
top:72px;
z-index:70;
display:flex;
align-items:center;
gap:7px;
width:100%;
overflow-x:auto;
margin:0 0 18px;
padding:8px;
border:1px solid rgba(148,163,184,.13);
border-radius:14px;
background:rgba(7,11,22,.92);
backdrop-filter:blur(16px);
box-shadow:0 10px 30px rgba(0,0,0,.16);
}
.section-nav a{
flex:0 0 auto;
display:inline-flex;
align-items:center;
min-height:38px;
padding:0 12px;
border:1px solid transparent;
border-radius:10px;
color:#9eacc0;
font-size:12px;
font-weight:800;
white-space:nowrap;
}
.section-nav a:hover{
color:#fff;
background:#ffffff07;
border-color:var(--line);
}
.account-security-page #sign-in,
.account-security-page #mfa,
.account-security-page #team,
.account-security-page #connected-apps,
.account-security-page #account-data,
.site-editor-page #site-content,
.site-editor-page #site-form,
.site-editor-page #site-gatekeeper,
.site-editor-page #site-domains,
.site-editor-page #site-versions{scroll-margin-top:132px}
@media(max-width:900px){
.section-nav{top:72px;margin-bottom:14px}
}
@media(max-width:620px){
.section-nav{
top:70px;
margin-left:-1px;
margin-right:-1px;
padding:6px;
border-radius:12px;
}
.section-nav a{min-height:40px;padding:0 11px}
}
/* Long-page navigation targets. */
.waba-settings-page #waba-account,
.waba-settings-page #knowledge,
.waba-settings-page #waba-sync,
.waba-settings-page #waba-webhook,
.waba-settings-page #waba-automation,
.waba-settings-page #waba-activity,
.platform-ops-page #production-readiness,
.platform-ops-page #site-security,
.platform-ops-page #gatekeeper-platform,
.platform-ops-page #production-health,
.platform-ops-page #backup,
.platform-ops-page #tenant-media,
.platform-ops-page #support-queue,
.platform-ops-page #platform-audit{scroll-margin-top:132px}
/* Support: assistant first on small screens, ticket form remains the fallback. */
@media(max-width:760px){
.route-support .grid2{display:flex!important;flex-direction:column;gap:14px}
.route-support .support-chatbot-card{order:-1}
.route-support .support-chat-log{height:min(46vh,390px)}
}
/* WhatsApp settings: keep connection save visible while editing on mobile. */
@media(max-width:760px){
.waba-settings-page #waba-account{grid-template-columns:1fr!important}
.waba-settings-page #waba-account>aside form>.btn.primary{
position:sticky;
bottom:10px;
z-index:35;
width:100%;
min-height:50px;
box-shadow:0 14px 38px rgba(0,0,0,.45);
}
.automation-row{padding:14px;border:1px solid var(--line);border-radius:14px;margin-top:10px;background:#ffffff025}
}
/* Platform admin tables use the Vidora scrollbar instead of clipping data. */
.platform-ops-page .table-scroll{overscroll-behavior-x:contain}
.platform-section-nav{border-color:rgba(245,158,11,.16)}
/* Commerce provider disclosure cards. */
.commerce-page #commerce-payment,
.commerce-page #commerce-shipping{scroll-margin-top:132px}
.integration-disclosure{padding:0!important;overflow:hidden}
.integration-disclosure>summary{
list-style:none;
cursor:pointer;
min-height:72px;
display:grid;
grid-template-columns:minmax(0,1fr) auto 24px;
align-items:center;
column-gap:10px;
padding:14px 18px;
}
.integration-disclosure>summary::-webkit-details-marker{display:none}
.integration-disclosure>summary>div{display:grid;gap:4px;min-width:0}
.integration-disclosure>summary .eyebrow{line-height:1.2}
.integration-disclosure>summary strong{font-size:17px;line-height:1.25;overflow-wrap:anywhere}
.integration-disclosure>summary>.status{
justify-self:end;
margin:0;
white-space:nowrap;
}
.integration-disclosure>summary:after{
content:"";
justify-self:center;
align-self:center;
width:8px;
height:8px;
border-right:2px solid #8190a5;
border-bottom:2px solid #8190a5;
margin:0;
transform:rotate(45deg);
transform-origin:center;
transition:transform .16s ease,border-color .16s ease;
}
.integration-disclosure>summary:hover:after{border-color:#c4b5fd}
.integration-disclosure[open]>summary{border-bottom:1px solid var(--line);background:#ffffff025}
.integration-disclosure[open]>summary:after{transform:rotate(225deg)}
.integration-disclosure-body{padding:4px 18px 18px}
@media(max-width:620px){
.integration-disclosure>summary{
min-height:66px;
grid-template-columns:minmax(0,1fr) auto 22px;
column-gap:8px;
padding:12px 14px;
}
.integration-disclosure>summary strong{font-size:16px}
.integration-disclosure>summary>.status{font-size:10px;padding:5px 8px}
.integration-disclosure>summary:after{width:8px;height:8px}
.integration-disclosure-body{padding:2px 14px 14px}
.commerce-page form>div:last-child>.btn.primary{
position:sticky;
bottom:10px;
z-index:35;
width:100%;
min-height:50px;
box-shadow:0 14px 38px rgba(0,0,0,.45);
}
}
/* Media upload mode tabs: image is the simple default, audio reveals licensing fields. */
.media-mode-tabs{
display:inline-grid;
grid-template-columns:1fr 1fr;
gap:4px;
padding:4px;
border:1px solid var(--line);
border-radius:12px;
background:#070d18;
margin:6px 0 4px;
}
.media-mode-tab{
min-width:110px;
min-height:38px;
border:0;
border-radius:9px;
background:transparent;
color:#8796aa;
font:inherit;
font-size:12px;
font-weight:850;
cursor:pointer;
}
.media-mode-tab.active{background:linear-gradient(135deg,#7c3aed24,#2563eb18);color:#fff;box-shadow:inset 0 0 0 1px #7c3aed35}
#mediaAudioFields{margin-top:6px;padding:15px;border:1px solid var(--line);border-radius:14px;background:#ffffff025}
@media(max-width:520px){
.media-mode-tabs{display:grid;width:100%}
.media-mode-tab{min-width:0;min-height:44px}
}
/* Analytics summary hierarchy. */
.analytics-primary-kpis{margin-bottom:10px!important}
.analytics-more-metrics{margin:0 0 20px}
.analytics-more-metrics>summary{
width:max-content;
max-width:100%;
cursor:pointer;
list-style:none;
padding:8px 12px;
border:1px solid var(--line);
border-radius:999px;
background:#ffffff04;
color:#9eacc0;
font-size:12px;
font-weight:850;
}
.analytics-more-metrics>summary::-webkit-details-marker{display:none}
.analytics-more-metrics>summary:after{content:" +";color:#a78bfa}
.analytics-more-metrics[open]>summary:after{content:" −"}
.analytics-more-metrics .analytics-kpis{margin-top:12px!important}
.inbox-readonly-note{
padding:12px 14px;
border-top:1px solid var(--line);
background:#ffffff025;
color:#8e9caf;
font-size:12px;
line-height:1.55;
}
.platform-auth-page #social-providers,
.platform-auth-page #admin-password,
.platform-auth-page #mfa,
.platform-auth-page #email{scroll-margin-top:132px}
.integration-status-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.integration-status-head h3{margin:0}
@media(max-width:620px){
.tracking-page form>section:last-child .btn.primary{
position:sticky;
bottom:10px;
z-index:35;
width:100%;
min-height:50px;
box-shadow:0 14px 38px rgba(0,0,0,.45);
}
}
.platform-billing-page #plan-policy,
.platform-billing-page #system-gateway,
.platform-billing-page #payment-history{scroll-margin-top:132px}
.platform-billing-page .billing-provider-block{margin-top:12px;border:1px solid var(--line);border-radius:14px;background:#ffffff025}
@media(max-width:620px){
.platform-billing-page #system-gateway>.btn.primary{
position:sticky;
bottom:10px;
z-index:35;
width:100%;
min-height:50px;
box-shadow:0 14px 38px rgba(0,0,0,.45);
}
}
/* Global Vidora select-chevron standard — 2026-09-21
Removes browser-native arrows and uses one precisely centred SVG chevron. */
select:not([multiple]):not([size]){
appearance:none!important;
-webkit-appearance:none!important;
-moz-appearance:none!important;
padding-right:44px!important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238FA0B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
background-repeat:no-repeat!important;
background-position:right 14px center!important;
background-size:16px 16px!important;
}
select:not([multiple]):not([size]):focus{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23C4B5FD' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
select:not([multiple]):not([size]):disabled{
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235B6678' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;
}
select::-ms-expand{display:none}
/* Compact selects keep the same visual centre without wasting horizontal space. */
.analytics-range-quick,
.compact-select,
.lead-inline-stage .select,
.lead-stage-form .select{
background-position:right 12px center!important;
padding-right:38px!important;
}
@media(max-width:620px){
select:not([multiple]):not([size]){
background-position:right 13px center!important;
padding-right:42px!important;
}
.analytics-range-quick,
.compact-select,
.lead-inline-stage .select,
.lead-stage-form .select{
background-position:right 11px center!important;
padding-right:36px!important;
}
}
/* Vidora table action icon system — 2026-09-21 */
.action-cell{white-space:nowrap}
.icon-actions{
display:flex!important;
align-items:center;
justify-content:flex-start;
gap:7px;
flex-wrap:nowrap!important;
}
.icon-action-form{display:inline-flex;margin:0}
.icon-action{
position:relative;
display:inline-grid;
place-items:center;
flex:0 0 38px;
width:38px;
height:38px;
min-width:38px;
min-height:38px;
padding:0;
border:1px solid rgba(148,163,184,.18);
border-radius:11px;
background:
linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),
#0b1322;
color:#aebbd0;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.045),
0 7px 16px rgba(0,0,0,.16);
cursor:pointer;
text-decoration:none;
vertical-align:middle;
transition:
transform .15s ease,
border-color .15s ease,
background-color .15s ease,
color .15s ease,
box-shadow .15s ease;
}
.icon-action:hover{
color:#eef2ff;
border-color:rgba(167,139,250,.36);
background:
linear-gradient(180deg,rgba(124,58,237,.14),rgba(37,99,235,.055)),
#0c1526;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.06),
0 9px 20px rgba(0,0,0,.22),
0 0 0 1px rgba(124,58,237,.06);
transform:translateY(-1px);
}
.icon-action:active{transform:translateY(0)}
.action-icon-svg{
width:18px;
height:18px;
display:block;
pointer-events:none;
}
.icon-action.tone-primary{color:#b9c6ff;border-color:rgba(99,102,241,.28);background:linear-gradient(180deg,rgba(99,102,241,.13),rgba(37,99,235,.055)),#0b1322}
.icon-action.tone-document{color:#c4b5fd;border-color:rgba(139,92,246,.24)}
.icon-action.tone-shipping{color:#8bd7ff;border-color:rgba(6,182,212,.24)}
.icon-action.tone-chat{color:#83e7c0;border-color:rgba(34,197,94,.23)}
.icon-action.tone-danger{color:#fca5a5;border-color:rgba(239,68,68,.30);background:linear-gradient(180deg,rgba(239,68,68,.09),rgba(239,68,68,.025)),#0b1322}
.icon-action.tone-success{color:#86efac;border-color:rgba(34,197,94,.28);background:linear-gradient(180deg,rgba(34,197,94,.09),rgba(34,197,94,.025)),#0b1322}
.icon-action[data-tooltip]:before{
content:attr(data-tooltip);
position:absolute;
left:50%;
bottom:calc(100% + 8px);
z-index:300;
transform:translate(-50%,4px);
width:max-content;
max-width:190px;
padding:6px 8px;
border:1px solid rgba(148,163,184,.18);
border-radius:8px;
background:#050a13f2;
color:#e5e7eb;
box-shadow:0 10px 24px rgba(0,0,0,.34);
font-size:10px;
font-weight:750;
line-height:1.2;
white-space:nowrap;
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
}
.icon-action[data-tooltip]:hover:before,
.icon-action[data-tooltip]:focus-visible:before{
opacity:1;
visibility:visible;
transform:translate(-50%,0);
}
.data-table th:last-child{text-align:center}
.data-table td.action-cell{text-align:center}
.data-table td.action-cell .icon-actions{justify-content:center}
@media(max-width:760px){
.data-table .mobile-card-actions.icon-action-cell,
.data-table td.action-cell{grid-template-columns:108px minmax(0,1fr)!important}
.data-table td.action-cell:before{display:block!important}
.data-table td.action-cell .icon-actions{
display:flex!important;
width:100%;
justify-content:flex-end;
gap:8px;
}
.data-table .row-actions.icon-actions{display:flex!important;grid-template-columns:none!important}
.icon-action{
flex-basis:44px;
width:44px;
height:44px;
min-width:44px;
min-height:44px;
border-radius:12px;
}
.action-icon-svg{width:19px;height:19px}
.icon-action[data-tooltip]:before{display:none}
}
@media(max-width:430px){
.data-table td.action-cell{grid-template-columns:94px minmax(0,1fr)!important}
.data-table td.action-cell .icon-actions{justify-content:flex-start;flex-wrap:wrap!important}
}
/* Desktop sidebar collapse — 2026-09-21 */
@media(min-width:901px){
.app-auth{
transition:padding-left .2s ease;
}
.app-sidebar{
transition:transform .2s ease,opacity .16s ease;
will-change:transform;
}
.sidebar-brand{
justify-content:space-between;
gap:10px;
}
.sidebar-brand .brand{
min-width:0;
}
.sidebar-collapse-toggle,
.sidebar-expand-toggle{
display:grid;
place-items:center;
width:40px;
height:40px;
min-width:40px;
padding:0;
border:1px solid rgba(148,163,184,.18);
border-radius:11px;
background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018)),#0b1322;
color:#aebbd0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 7px 16px rgba(0,0,0,.14);
cursor:pointer;
transition:border-color .15s ease,color .15s ease,background-color .15s ease,transform .15s ease;
}
.sidebar-collapse-toggle:hover,
.sidebar-expand-toggle:hover{
color:#fff;
border-color:rgba(167,139,250,.38);
background:linear-gradient(180deg,rgba(124,58,237,.14),rgba(37,99,235,.055)),#0c1526;
}
.sidebar-collapse-toggle svg,
.sidebar-expand-toggle svg{
width:18px;
height:18px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
}
.sidebar-expand-toggle{
display:none;
margin-right:12px;
}
.app-auth.sidebar-collapsed{
padding-left:0!important;
}
.app-auth.sidebar-collapsed .app-sidebar{
transform:translateX(-102%);
opacity:0;
pointer-events:none;
}
.app-auth.sidebar-collapsed .sidebar-expand-toggle{
display:grid;
}
.app-auth.sidebar-collapsed .app-topbar{
box-shadow:0 1px 0 var(--line),0 8px 28px rgba(0,0,0,.10);
}
}
@media(max-width:900px){
.sidebar-collapse-toggle,
.sidebar-expand-toggle{display:none!important}
}
/* Notification action forms remain visually aligned as buttons. */
.notification-actions form{display:inline-flex;margin:0}
/* Notification anchor targets */
.route-billing #billing-entitlement,
.route-billing #payment-history{scroll-margin-top:92px}
/* Mobile MCP token layout + persistent app header — 2026-09-21 */
.mcp-token-status{
display:grid;
gap:9px;
margin:18px 0 14px;
min-width:0;
}
.mcp-token-label{
color:#91a0b7;
font-size:13px;
font-weight:800;
}
.mcp-token-row{
display:flex;
align-items:center;
gap:10px;
min-width:0;
}
.mcp-token-code{
flex:0 1 auto;
min-width:0;
max-width:100%;
display:inline-flex;
align-items:center;
min-height:42px;
padding:10px 13px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.mcp-token-expiry{
color:#91a0b7;
font-size:12px;
line-height:1.4;
white-space:nowrap;
}
.mcp-token-expiry strong{
color:#cbd5e1;
font-weight:800;
}
@media(max-width:900px){
.app-auth{
padding-top:64px!important;
}
.app-topbar{
position:fixed!important;
top:0;
left:0;
right:0;
width:100%;
z-index:220!important;
}
}
@media(max-width:620px){
.mcp-token-status{
gap:8px;
margin:16px 0 14px;
}
.mcp-token-row{
display:grid;
grid-template-columns:minmax(0,1fr);
gap:8px;
}
.mcp-token-code{
width:100%;
max-width:100%;
min-height:44px;
overflow:hidden;
text-overflow:ellipsis;
}
.mcp-token-expiry{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
white-space:normal;
}
.mcp-token-expiry strong{
white-space:nowrap;
}
.mcp-connect-panel>form .btn{
min-height:46px;
}
}
/* Tracking page balance refinement — 2026-09-21 */
.tracking-page .tracking-site-selector{
padding:18px 20px;
margin-bottom:16px;
}
.tracking-page .tracking-site-selector .field{
margin:0;
}
.tracking-page .tracking-site-selector label{
margin-bottom:8px;
}
.tracking-page .tracking-site-selector .select{
min-height:48px;
font-size:15px;
}
.tracking-page .integration-grid{
gap:16px;
align-items:stretch;
}
.tracking-page .integration-card{
display:grid;
grid-template-rows:auto minmax(42px,auto) 48px;
gap:14px;
min-height:0!important;
padding:18px 20px!important;
}
.tracking-page .integration-status-head{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:12px;
min-height:30px;
}
.tracking-page .integration-status-head h3{
margin:0!important;
min-width:0;
font-size:18px;
line-height:1.25;
letter-spacing:-.25px;
}
.tracking-page .integration-status-head .status{
justify-self:end;
align-self:center;
margin:0;
min-height:28px;
padding:5px 10px;
white-space:nowrap;
}
.tracking-page .integration-description{
margin:0!important;
align-self:start;
font-size:13px;
line-height:1.55;
color:#91a0b7;
}
.tracking-page .integration-input{
align-self:end;
min-height:48px;
margin:0;
}
@media(max-width:980px){
.tracking-page .integration-grid{
grid-template-columns:1fr;
}
}
@media(max-width:620px){
.tracking-page .tracking-site-selector{
padding:15px;
margin-bottom:14px;
}
.tracking-page .integration-card{
grid-template-rows:auto auto 46px;
gap:11px;
padding:15px!important;
}
.tracking-page .integration-status-head{
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
}
.tracking-page .integration-status-head h3{
font-size:16px;
}
.tracking-page .integration-status-head .status{
font-size:10px!important;
min-height:26px;
padding:4px 8px;
}
.tracking-page .integration-description{
font-size:12px;
}
.tracking-page .integration-input{
min-height:46px;
}
}
@media(max-width:390px){
.tracking-page .integration-status-head{
grid-template-columns:1fr;
align-items:start;
}
.tracking-page .integration-status-head .status{
justify-self:start;
}
}
/* Platform Ops + billing field visibility fixes — 2026-09-22 */
@media(min-width:901px){
.production-readiness .site{
display:grid;
grid-template-columns:minmax(0,1fr) 252px;
align-items:center;
column-gap:18px;
}
.production-readiness .site>div:first-child{min-width:0}
.production-readiness .site>.actions{
width:252px;
display:grid;
grid-template-columns:152px 88px;
align-items:center;
justify-content:end;
gap:12px;
flex-wrap:nowrap;
}
.production-readiness .site>.actions>.status{
width:152px;
min-width:152px;
justify-content:center;
text-align:center;
}
.production-readiness .site>.actions>.btn{
width:88px;
min-width:88px;
}
.role-platform-admin .sidebar-brand{
padding:0 16px!important;
gap:8px!important;
}
.role-platform-admin .sidebar-brand .brand{
order:1;
flex:0 1 auto;
min-width:0;
gap:10px!important;
font-size:20px!important;
}
.role-platform-admin .sidebar-brand .brandmark{
width:40px!important;
height:40px!important;
flex:0 0 40px!important;
border-radius:12px!important;
font-size:20px!important;
}
.role-platform-admin .sidebar-brand .brand>span:last-child{
white-space:nowrap;
}
.role-platform-admin .sidebar-brand:after{
order:2;
flex:0 0 auto;
margin-left:0;
padding:3px 6px;
font-size:8px;
}
.role-platform-admin .sidebar-collapse-toggle{
order:3;
width:36px;
height:36px;
min-width:36px;
flex:0 0 36px;
margin-left:auto;
}
}
#backup .backup-last-run{
max-width:100%;
overflow:hidden;
}
#backup .backup-last-detail{
display:block;
max-width:100%;
overflow-wrap:anywhere;
word-break:break-word;
white-space:normal;
}
.integration-disclosure-body,
.integration-disclosure-body .field,
.integration-disclosure-body .input{
min-width:0;
}
@media(max-width:900px){
.production-readiness .site>.actions{
width:100%;
}
}
/* Social Publishing */
.social-publishing-page{max-width:1180px}
.social-publishing-hero{position:relative;overflow:hidden}
.social-publishing-hero:after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,#7c3aed33,transparent 68%);pointer-events:none}
.social-channel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.social-channel-card{min-width:0;display:flex;gap:14px;align-items:flex-start}
.social-channel-copy{min-width:0}
.social-channel-copy h3{margin:2px 0 2px}
.social-channel-card p{color:var(--muted);line-height:1.6;font-size:13px;margin:10px 0 0}
.social-publishing-logo{width:46px;height:46px;min-width:46px;border:1px solid var(--line);background:#fff;border-radius:13px;display:grid;place-items:center;overflow:hidden}
.social-publishing-logo img{width:28px;height:28px;object-fit:contain;display:block}
.social-publishing-logo-facebook{background:#fff}
.social-publishing-logo-instagram{background:#fff}
.social-publishing-logo-threads,.social-publishing-logo-x,.social-publishing-logo-tiktok{background:#000}
.social-publishing-logo-google-business{background:#fff}
.social-publishing-logo-pinterest{background:#fff}
.social-publishing-logo-linkedin{background:#fff}
.social-publishing-logo-youtube{background:#fff}
.social-publishing-workspace{margin-top:24px}
.social-platform-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0 20px}
.social-platform-choice{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;border:1px solid var(--line);background:#ffffff04;border-radius:15px;padding:14px;min-width:0;min-height:86px}
.social-platform-choice .social-publishing-logo{width:34px;height:34px;min-width:34px;border-radius:10px}
.social-platform-choice .social-publishing-logo img{width:21px;height:21px}
.social-platform-choice small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d9e2ef;font-weight:700}
.social-user-note{font-size:12px}
.social-publishing-workspace .dashhead{margin-bottom:18px}
.social-publishing-workspace textarea[disabled],
.social-publishing-workspace button[disabled]{opacity:.6;cursor:not-allowed}
.social-publishing-benefits .feature-card{min-height:220px}
@media(max-width:1050px){
.social-channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.social-platform-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
.social-channel-grid{grid-template-columns:1fr}
.social-publishing-page .docs-hero{padding:20px}
}
@media(max-width:430px){
.social-platform-picker{grid-template-columns:1fr}
}
/* Social Publishing Manager */
.social-manager-page{max-width:1180px}
.social-manager-kpis{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}
.section-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.social-connections-panel{margin-bottom:18px}
.social-manager-connections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.social-connection-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:11px;border:1px solid var(--line);background:#ffffff04;border-radius:14px;padding:12px}
.social-connection-card .social-publishing-logo{width:38px;height:38px;min-width:38px;border-radius:11px}
.social-connection-card .social-publishing-logo img{width:23px;height:23px}
.social-connection-copy{min-width:0}
.social-connection-copy strong,.social-connection-copy small{display:block}
.social-connection-copy small{color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.social-connection-card .btn{padding:8px 10px;font-size:12px}
.social-manager-layout{grid-template-columns:1.25fr .75fr;margin-bottom:18px}
.manager-picker .social-platform-choice{cursor:pointer;position:relative;display:flex;align-items:center;gap:11px;min-height:74px;padding:12px 48px 12px 12px}
.manager-picker .social-platform-choice:has(input:checked){border-color:#7c3aed88;background:#7c3aed12;box-shadow:inset 0 0 0 1px #7c3aed22}
.manager-picker .social-platform-choice input{position:absolute;top:13px;right:13px;width:18px;height:18px;margin:0;accent-color:#7c3aed}
.manager-picker .social-platform-choice .social-publishing-logo{width:42px;height:42px;min-width:42px}
.manager-picker .social-platform-choice .social-publishing-logo img{width:25px;height:25px}
.manager-picker .social-platform-choice small{font-size:14px;white-space:normal;line-height:1.3}
.manager-picker .social-platform-choice input{accent-color:#7c3aed;flex:0 0 auto}
.social-caption{min-height:170px}
.social-dynamic-fields[hidden],.social-dynamic-field[hidden],.social-platform-override[hidden],.social-platform-overrides[hidden]{display:none!important}
.social-dynamic-fields{margin-top:4px}
.social-platform-overrides{margin:20px 0 4px;padding:16px;border:1px solid var(--line);border-radius:14px;background:#ffffff03}
.social-platform-overrides h3{margin:0 0 4px}
.social-platform-overrides>.muted{margin:0 0 12px}
.social-platform-override .textarea{min-height:96px}
.social-dynamic-field .field-note[data-support-label]{display:block;margin-top:4px;color:#a78bfa}
.social-composer-actions{display:flex;gap:9px;flex-wrap:wrap}
.social-calendar-panel{min-width:0}
.social-upcoming-item{display:block;border:1px solid var(--line);background:#ffffff04;border-radius:13px;padding:13px;margin-top:10px}
.social-upcoming-item strong,.social-upcoming-item small{display:block}
.social-upcoming-item small{color:var(--muted);margin-top:5px}
.social-post-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.social-post-tabs a{display:inline-flex;align-items:center;gap:7px}
.social-post-tabs a span{font-size:10px;padding:2px 6px;border-radius:999px;background:#ffffff0a}
.social-post-tabs a.active{border-color:#7c3aed66;background:#7c3aed12;color:#fff}
.social-post-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;border-top:1px solid var(--line);padding:15px 0}
.social-post-main{display:flex;gap:12px;min-width:0;align-items:center}
.social-post-channel-icons{display:flex;align-items:center;min-width:46px}
.social-post-channel-icons .social-publishing-logo{width:28px;height:28px;min-width:28px;border-radius:8px;margin-left:-7px}
.social-post-channel-icons .social-publishing-logo:first-child{margin-left:0}
.social-post-channel-icons .social-publishing-logo img{width:17px;height:17px}
.social-post-copy{min-width:0}
.social-post-copy strong,.social-post-copy small{display:block}
.social-post-copy strong{white-space:normal;line-height:1.45}
.social-post-copy small{color:var(--muted);margin-top:5px}
.social-post-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.social-post-actions form{margin:0}
.empty-state{padding:34px 10px;text-align:center}
.empty-state h3{margin-bottom:6px}
@media(max-width:980px){
.social-manager-connections{grid-template-columns:1fr}
.social-manager-layout{grid-template-columns:1fr}
.social-manager-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
.social-connection-card{grid-template-columns:auto minmax(0,1fr) auto}
.social-connection-card .btn{grid-column:2 / -1;width:100%}
.social-post-row{grid-template-columns:1fr}
.social-post-actions{justify-content:flex-start}
.section-title-row{flex-direction:column}
}
@media(max-width:480px){
.social-manager-kpis{grid-template-columns:1fr 1fr}
.manager-picker{grid-template-columns:1fr}
.social-composer-actions{display:grid;grid-template-columns:1fr}
.social-composer-actions .btn{width:100%}
}
/* Dashboard new-user quick start */
.dashboard-quickstart{margin:0 0 18px}
.dashboard-quickstart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.dashboard-quickstart-head h2{margin:5px 0 4px}
.dashboard-quickstart-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dashboard-quickstart-step{min-width:0;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:15px;background:#ffffff03;text-decoration:none;color:inherit}
.dashboard-quickstart-step:hover{border-color:#ffffff2b;background:#ffffff06}
.dashboard-quickstart-step>b,.dashboard-quickstart-step button>b{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#ffffff0d;font-size:12px}
.dashboard-quickstart-step span{min-width:0;display:grid;gap:3px}
.dashboard-quickstart-step strong{font-size:13px}
.dashboard-quickstart-step small{color:#7f8ca5;line-height:1.45}
.dashboard-quickstart-step em{font-style:normal;font-size:18px;opacity:.55}
.dashboard-quickstart-step.primary-step{border-color:#7c3aed55;background:#7c3aed0d}
.dashboard-quickstart-step.publish-step{padding:0}
.dashboard-quickstart-step.publish-step button{appearance:none;border:0;background:transparent;color:inherit;width:100%;min-height:100%;padding:14px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;text-align:left;cursor:pointer;font:inherit}
@media(max-width:780px){
.dashboard-quickstart-head{align-items:center}
.dashboard-quickstart-steps{grid-template-columns:1fr}
}
/* Global beta status */
.vidora-beta-banner{display:flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding:8px 18px;text-align:center;background:#f59e0b14;border-bottom:1px solid #f59e0b35;color:#e8edf7;font-size:12px;line-height:1.45}
.vidora-beta-pill{display:inline-flex;align-items:center;justify-content:center;min-height:21px;padding:3px 8px;border-radius:999px;background:#f59e0b;color:#171009;font-size:9px;font-weight:950;letter-spacing:1.2px;flex:0 0 auto}
@media(max-width:680px){.vidora-beta-banner{align-items:flex-start;text-align:left;padding:8px 12px;font-size:10.5px}.vidora-beta-pill{margin-top:1px}}
/* Social login single-row carousel — 2026-09-28 */
.social-auth-carousel{
display:grid;
grid-template-columns:42px minmax(0,1fr) 42px;
align-items:center;
gap:10px;
width:100%;
}
.social-auth-carousel.is-single{display:block}
.social-auth-carousel .social-auth-grid,
.social-auth-carousel .social-auth-grid.is-multi,
.social-auth-carousel .social-auth-grid.is-single{
display:flex !important;
grid-template-columns:none;
gap:12px;
width:100%;
max-width:100%;
overflow-x:auto;
overflow-y:hidden;
overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
-ms-overflow-style:none;
padding:2px 0;
}
.social-auth-carousel .social-auth-grid::-webkit-scrollbar{display:none}
.social-auth-carousel .social-auth-btn,
.social-auth-carousel .social-auth-grid.is-single .social-auth-btn{
flex:0 0 clamp(170px,24vw,210px);
width:auto;
max-width:none;
scroll-snap-align:start;
scroll-snap-stop:always;
}
.social-auth-carousel.is-single .social-auth-btn{
flex:1 1 auto;
width:100%;
max-width:320px;
}
.social-auth-arrow{
width:42px;
height:62px;
min-width:42px;
padding:0;
border:1px solid #ffffff24;
border-radius:14px;
background:#ffffff06;
color:#f8fafc;
display:grid;
place-items:center;
font:500 32px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
cursor:pointer;
transition:background .18s ease,border-color .18s ease,opacity .18s ease,transform .18s ease;
}
.social-auth-arrow:hover:not(:disabled){
background:#ffffff0f;
border-color:#ffffff40;
transform:translateY(-1px);
}
.social-auth-arrow:focus-visible{
outline:2px solid #8b5cf6;
outline-offset:3px;
}
.social-auth-arrow:disabled{
opacity:.28;
cursor:default;
transform:none;
}
@media(max-width:720px){
.social-auth-carousel{grid-template-columns:36px minmax(0,1fr) 36px;gap:8px}
.social-auth-arrow{width:36px;height:56px;min-width:36px;border-radius:12px;font-size:28px}
.social-auth-carousel .social-auth-grid,
.social-auth-carousel .social-auth-grid.is-multi{gap:9px}
.social-auth-carousel .social-auth-btn,
.social-auth-carousel .social-auth-grid.is-single .social-auth-btn{flex-basis:clamp(152px,56vw,190px)}
}
@media(max-width:360px){
.social-auth-carousel{grid-template-columns:32px minmax(0,1fr) 32px;gap:6px}
.social-auth-arrow{width:32px;min-width:32px;font-size:25px}
.social-auth-carousel .social-auth-btn,
.social-auth-carousel .social-auth-grid.is-single .social-auth-btn{flex-basis:148px}
}
/* Social login carousel: exactly 2 provider buttons per slide — 2026-09-28 */
.social-auth-carousel .social-auth-grid.is-multi .social-auth-btn{
flex:0 0 calc((100% - 12px)/2);
min-width:calc((100% - 12px)/2);
}
@media(max-width:720px){
.social-auth-carousel .social-auth-grid.is-multi .social-auth-btn{
flex-basis:calc((100% - 9px)/2);
min-width:calc((100% - 9px)/2);
grid-template-columns:28px minmax(0,1fr);
gap:6px;
padding:0 8px;
font-size:12px;
}
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-shell,
.social-auth-carousel .social-auth-grid.is-multi .social-mark{
width:28px;
height:28px;
min-width:28px;
border-radius:9px;
}
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon,
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-google,
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-facebook,
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-instagram,
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-threads,
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-x{
width:18px;
height:18px;
}
}
@media(max-width:420px){
.social-auth-carousel{grid-template-columns:30px minmax(0,1fr) 30px;gap:6px}
.social-auth-arrow{width:30px;min-width:30px;height:54px;font-size:24px}
.social-auth-carousel .social-auth-grid.is-multi{gap:7px}
.social-auth-carousel .social-auth-grid.is-multi .social-auth-btn{
flex-basis:calc((100% - 7px)/2);
min-width:calc((100% - 7px)/2);
height:54px;
min-height:54px;
grid-template-columns:24px minmax(0,1fr);
gap:5px;
padding:0 6px;
font-size:11px;
}
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-shell,
.social-auth-carousel .social-auth-grid.is-multi .social-mark{
width:24px;
height:24px;
min-width:24px;
border-radius:8px;
}
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon,
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-google,
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-facebook,
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-instagram,
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-threads,
.social-auth-carousel .social-auth-grid.is-multi .social-brand-icon-x{
width:16px;
height:16px;
}
}
/* Social login carousel: always show full provider labels — 2026-09-28 */
.social-auth-carousel .social-auth-grid.is-multi .social-auth-btn{
grid-template-columns:40px minmax(0,1fr);
justify-content:start;
gap:10px;
padding-left:12px;
padding-right:12px;
}
.social-auth-carousel .social-auth-grid.is-multi .social-auth-btn::after{
display:none !important;
}
.social-auth-carousel .social-auth-grid.is-multi .social-auth-btn>span:last-child{
width:auto;
min-width:0;
text-align:left;
overflow:visible;
text-overflow:clip;
white-space:nowrap;
}
@media(max-width:720px){
.social-auth-carousel .social-auth-grid.is-multi .social-auth-btn{
grid-template-columns:28px minmax(0,1fr);
gap:6px;
padding-left:7px;
padding-right:7px;
font-size:12px;
}
}
@media(max-width:420px){
.social-auth-carousel .social-auth-grid.is-multi .social-auth-btn{
grid-template-columns:24px minmax(0,1fr);
gap:4px;
padding-left:5px;
padding-right:5px;
font-size:10.5px;
}
}
/* Uniform connection cards using the original Google Business layout */
.social-connection-card-google-business{
grid-template-columns:auto minmax(120px,1fr) minmax(0,286px);
gap:10px;
}
.social-connection-card-google-business .social-connection-copy{
min-width:0;
}
.social-connection-card-google-business .social-connection-copy strong{
line-height:1.25;
}
.google-business-connected-controls{
width:min(100%,286px);
min-width:0;
display:grid;
justify-items:end;
align-items:center;
gap:7px;
}
.google-business-connected-controls .status{
justify-self:end;
white-space:nowrap;
}
.google-business-connected-controls .actions{
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:flex-end;
gap:6px;
flex-wrap:nowrap;
}
.google-business-connected-controls .actions>a,
.google-business-connected-controls .actions form{
min-width:0;
margin:0;
}
.google-business-connected-controls .actions .btn{
min-width:0;
padding:7px 8px;
font-size:11px;
white-space:nowrap;
}
@media(max-width:980px){
.social-connection-card-google-business{
grid-template-columns:auto minmax(160px,1fr) minmax(0,320px);
}
.google-business-connected-controls{
width:min(100%,320px);
}
}
@media(max-width:700px){
.social-connection-card-google-business{
grid-template-columns:auto minmax(0,1fr);
}
.google-business-connected-controls{
grid-column:2 / -1;
width:100%;
justify-items:stretch;
}
.google-business-connected-controls .status{
justify-self:start;
}
.google-business-connected-controls .actions{
display:grid;
grid-template-columns:1fr 1fr;
width:100%;
}
.google-business-connected-controls .actions>a,
.google-business-connected-controls .actions form,
.google-business-connected-controls .actions .btn{
width:100%;
}
.google-business-connected-controls .actions form:last-child{
grid-column:1 / -1;
}
}
/* Keep dashboard quick-start Publish card aligned */
.dashboard-quickstart-step.publish-step{display:block;min-width:0;overflow:hidden}
.dashboard-quickstart-step.publish-step button{grid-column:1/-1;min-width:0;width:100%}
.dashboard-quickstart-step.publish-step button span,.dashboard-quickstart-step.publish-step button strong,.dashboard-quickstart-step.publish-step button small{min-width:0;white-space:normal;word-break:normal;overflow-wrap:break-word}
/* Social Publishing status modal — 2026-10-01 */
.status.red{background:#ef444416;color:#fca5a5}
.social-status-trigger{border:0;cursor:pointer;font:inherit}
.social-status-trigger:hover{filter:brightness(1.08)}
.social-status-dialog{width:min(620px,calc(100vw - 28px));max-height:min(78vh,760px);padding:0;border:1px solid var(--line);border-radius:18px;background:#0b1221;color:var(--text);box-shadow:0 30px 90px #000b;overflow:hidden}
.social-status-dialog::backdrop{background:#020617b8;backdrop-filter:blur(4px)}
.social-status-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--line)}
.social-status-dialog-head h3{margin:5px 0 5px;font-size:20px}
.social-status-dialog-head p{margin:0;line-height:1.5}
.social-status-dialog-close{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border:1px solid var(--line);border-radius:10px;background:#ffffff08;color:#fff;font-size:22px;line-height:1;cursor:pointer}
.social-status-provider-list{display:grid;gap:10px;padding:16px;max-height:58vh;overflow:auto}
.social-status-provider-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#ffffff04;min-width:0}
.social-status-provider-row.ok{border-color:#22c55e38;background:#22c55e08}
.social-status-provider-row.fail{border-color:#ef444447;background:#ef44440a}
.social-status-provider-row.pending{border-color:#f59e0b33;background:#f59e0b08}
.social-status-provider-row .social-publishing-logo{width:38px;height:38px;min-width:38px;border-radius:10px}
.social-status-provider-row .social-publishing-logo img{width:23px;height:23px}
.social-status-provider-copy{min-width:0}
.social-status-provider-copy strong,.social-status-provider-copy small{display:block}
.social-status-provider-copy small{margin-top:4px;color:var(--muted);line-height:1.45;white-space:normal;overflow-wrap:anywhere}
.social-status-provider-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.social-status-provider-actions form{margin:0}
.social-status-provider-actions .btn{padding:8px 10px;font-size:12px;white-space:nowrap}
@media(max-width:560px){.social-status-dialog-head{padding:16px}.social-status-provider-list{padding:12px}.social-status-provider-row{grid-template-columns:auto minmax(0,1fr)}.social-status-provider-actions{grid-column:2 / -1;justify-content:flex-start}.social-status-provider-actions .btn{width:100%}}
/* Preserve useful position after Social Publishing actions */
#connected-channels,#social-composer,#content-queue,.social-post-row[id]{scroll-margin-top:88px}
/* Social Publishing production UX wave · 2026-10-01 */
.social-autosave-indicator{display:flex;justify-content:flex-end;margin:-4px 0 8px}
.social-platform-choice{position:relative;min-width:0}
.social-platform-readiness{display:block;margin-top:5px;font-size:10px;font-weight:800;line-height:1.2;color:#94a3b8}
.social-platform-readiness.ready{color:#86efac}
.social-platform-readiness.blocked{color:#fbbf24}
.social-media-library-tools{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:#ffffff03}
.social-media-source-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.social-media-source{display:grid;grid-template-columns:1fr auto auto;gap:7px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:13px;background:#07101f}
.social-media-source strong{grid-column:1/-1}
.social-media-source span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-media-source .btn{padding:7px 9px;font-size:11px}
.social-resumable-note{display:flex;gap:9px;align-items:center;margin-top:12px;color:var(--muted)}
.social-resumable-note small{line-height:1.5}
.social-upload-progress{margin-top:12px;padding:12px;border:1px solid #2563eb45;background:#2563eb0b;border-radius:12px}
.social-upload-progress>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}
.social-upload-progress progress{width:100%;height:9px}
.social-media-library-dialog,.social-publish-confirm-dialog{width:min(820px,calc(100vw - 28px));max-height:84vh;border:1px solid var(--line);border-radius:20px;background:#0b1221;color:var(--text);padding:20px;box-shadow:0 28px 90px #000c}
.social-media-library-dialog::backdrop,.social-publish-confirm-dialog::backdrop{background:#020617bf;backdrop-filter:blur(4px)}
.social-media-library-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;overflow:auto;max-height:58vh;padding:4px}
.social-media-library-item{appearance:none;border:1px solid var(--line);border-radius:14px;background:#ffffff04;color:var(--text);padding:10px;text-align:left;cursor:pointer;display:grid;gap:8px;min-width:0}
.social-media-library-item:hover{border-color:#7c3aed66;background:#7c3aed0b}
.social-media-library-item img,.social-media-video-icon{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:10px;background:#030712}
.social-media-video-icon{display:grid;place-items:center;font-size:28px;color:#c4b5fd}
.social-media-library-item span{min-width:0}.social-media-library-item strong,.social-media-library-item small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.social-media-library-item small{margin-top:4px;color:var(--muted);font-size:10px}
.social-platform-media-override{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.social-live-preview{margin:18px 0;padding:16px;border:1px solid var(--line);border-radius:16px;background:#ffffff03}
.social-preview-tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:8px}
.social-preview-tabs button{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid var(--line);border-radius:999px;background:#ffffff04;color:#cbd5e1;padding:7px 10px;cursor:pointer}
.social-preview-tabs button.active{border-color:#7c3aed88;background:#7c3aed1a;color:#fff}
.social-preview-tabs .social-logo{width:18px;height:18px}
.social-preview-card{margin-top:8px;border:1px solid var(--line);border-radius:16px;background:#07101f;padding:16px;min-height:170px}
.social-preview-head{display:flex;align-items:center;gap:10px}.social-preview-head .social-logo{width:34px;height:34px}.social-preview-head strong,.social-preview-head small{display:block}.social-preview-head small{color:var(--muted);margin-top:3px}
.social-preview-card h4{font-size:16px;margin:16px 0 8px}.social-preview-caption{white-space:pre-wrap;line-height:1.65;color:#d7deea}.social-preview-media{margin-top:12px;border:1px dashed #7c3aed55;border-radius:12px;padding:14px;color:#c4b5fd;background:#7c3aed09}.social-preview-link{display:block;margin-top:10px;color:#93c5fd;overflow-wrap:anywhere;font-size:12px}
.social-publish-confirm-summary{display:grid;gap:8px;margin-top:10px}.social-confirm-row{display:grid;grid-template-columns:150px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#ffffff04}.social-confirm-row span,.social-confirm-row small{color:var(--muted)}.social-confirm-row small{text-align:right}.social-confirm-when{margin-top:6px;padding:12px;border:1px solid #7c3aed3d;border-radius:12px;background:#7c3aed0b;display:flex;justify-content:space-between;gap:12px}.social-publish-confirm-actions,.social-status-dialog-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.social-stage-pill{display:inline-flex;vertical-align:middle;margin-left:6px;padding:3px 6px;border-radius:999px;background:#ffffff0b;color:#94a3b8;font-size:9px;font-weight:800}
.social-status-provider-row.ok .social-stage-pill{background:#22c55e15;color:#86efac}.social-status-provider-row.fail .social-stage-pill{background:#ef444415;color:#fca5a5}
.diagnostics-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.diagnostic-check-list{display:grid;gap:8px}.diagnostic-check-list>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}.diagnostic-check-list>div:last-child{border-bottom:0}.diag-ok{color:#86efac}.diag-fail{color:#fca5a5}.diag-warn{color:#fcd34d}.diagnostic-queue{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px}.diagnostic-queue>div{padding:12px;border:1px solid var(--line);border-radius:12px;background:#ffffff04}.diagnostic-queue span,.diagnostic-queue strong{display:block}.diagnostic-queue span{font-size:10px;color:var(--muted);letter-spacing:.8px}.diagnostic-queue strong{font-size:23px;margin-top:4px}.diagnostic-provider-list{display:grid;gap:8px}.diagnostic-provider{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:11px;border:1px solid var(--line);border-radius:12px}.diagnostic-provider small{grid-column:1/-1;color:#fca5a5}
@media(max-width:700px){
.social-media-source-grid,.diagnostics-grid{grid-template-columns:1fr}
.social-media-source{grid-template-columns:1fr 1fr}.social-media-source span{grid-column:1/-1}
.social-media-library-grid{grid-template-columns:1fr 1fr}
.social-confirm-row{grid-template-columns:1fr}.social-confirm-row small{text-align:left}
.social-composer-actions{position:sticky;bottom:10px;z-index:30;padding:10px;border:1px solid var(--line);border-radius:14px;background:#07101ff2;backdrop-filter:blur(16px);box-shadow:0 16px 50px #0008}
.social-composer-actions .btn{flex:1}
}
@media(max-width:480px){.social-media-library-grid{grid-template-columns:1fr}}
.social-preview-media img,.social-preview-media video{display:block;width:100%;max-height:360px;object-fit:contain;border-radius:10px;background:#020617;margin-bottom:10px}.social-preview-media>span{display:block;font-size:12px;color:#c4b5fd;overflow-wrap:anywhere}
.social-row-progress{margin-top:9px;max-width:420px}
.social-row-progress>div{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:5px}
.social-row-progress span,.social-row-progress small{font-size:10px;color:var(--muted)}
.social-row-progress progress{display:block;width:100%;height:7px}
/* Social Publishing platform selectors: icon-only compact UI */
.social-platform-picker.manager-picker{
grid-template-columns:repeat(auto-fit,minmax(64px,72px));
justify-content:flex-start;
align-items:start;
gap:10px;
}
.manager-picker .social-platform-choice{
width:68px;
height:68px;
min-height:68px;
padding:8px;
display:grid;
place-items:center;
gap:0;
border-radius:16px;
}
.manager-picker .social-platform-choice input{
top:6px;
right:6px;
width:15px;
height:15px;
}
.manager-picker .social-platform-choice .social-publishing-logo{
width:46px;
height:46px;
min-width:46px;
border-radius:13px;
}
.manager-picker .social-platform-choice .social-publishing-logo img{
width:29px;
height:29px;
}
.manager-picker .social-platform-choice small,
.manager-picker .social-platform-readiness{display:none!important}
.manager-picker .social-platform-choice:hover{
border-color:#ffffff35;
background:#ffffff08;
}
.social-preview-tabs{
display:flex;
flex-wrap:wrap;
gap:9px;
overflow:visible;
padding-bottom:0;
}
.social-preview-tabs button{
width:58px;
height:58px;
min-width:58px;
padding:7px;
justify-content:center;
gap:0;
border-radius:15px;
}
.social-preview-tabs button span:not(.social-publishing-logo){display:none!important}
.social-preview-tabs .social-publishing-logo{
width:42px;
height:42px;
min-width:42px;
border-radius:12px;
}
.social-preview-tabs .social-publishing-logo img{
width:27px;
height:27px;
}
.social-preview-head .social-publishing-logo{
width:34px;
height:34px;
min-width:34px;
border-radius:10px;
}
.social-preview-head .social-publishing-logo img{width:21px;height:21px}
@media(max-width:480px){
.social-platform-picker.manager-picker{
grid-template-columns:repeat(auto-fit,minmax(58px,64px));
gap:8px;
}
.manager-picker .social-platform-choice{
width:62px;
height:62px;
min-height:62px;
padding:7px;
}
.manager-picker .social-platform-choice .social-publishing-logo{
width:42px;
height:42px;
min-width:42px;
}
.social-preview-tabs button{
width:54px;
height:54px;
min-width:54px;
}
.social-preview-tabs .social-publishing-logo{
width:39px;
height:39px;
min-width:39px;
}
}
/* Compact horizontal platform icons + stacked media source cards */
.social-platform-picker.manager-picker{
display:flex;
flex-wrap:nowrap;
align-items:center;
gap:8px;
overflow-x:auto;
overflow-y:hidden;
padding:2px 2px 8px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.social-platform-picker.manager-picker::-webkit-scrollbar{display:none}
.manager-picker .social-platform-choice{
flex:0 0 54px;
width:54px;
height:54px;
min-height:54px;
padding:6px;
border-radius:14px;
scroll-snap-align:start;
}
.manager-picker .social-platform-choice input{
top:4px;
right:4px;
width:13px;
height:13px;
}
.manager-picker .social-platform-choice .social-publishing-logo{
width:38px;
height:38px;
min-width:38px;
border-radius:11px;
}
.manager-picker .social-platform-choice .social-publishing-logo img{
width:24px;
height:24px;
}
.social-preview-tabs{
flex-wrap:nowrap;
overflow-x:auto;
overflow-y:hidden;
gap:8px;
padding:2px 2px 8px;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.social-preview-tabs::-webkit-scrollbar{display:none}
.social-preview-tabs button{
flex:0 0 50px;
width:50px;
height:50px;
min-width:50px;
padding:6px;
border-radius:14px;
scroll-snap-align:start;
}
.social-preview-tabs .social-publishing-logo{
width:36px;
height:36px;
min-width:36px;
border-radius:10px;
}
.social-preview-tabs .social-publishing-logo img{
width:23px;
height:23px;
}
.social-media-source-grid{
grid-template-columns:1fr!important;
gap:10px;
}
.social-media-source{
width:100%;
}
@media(max-width:480px){
.manager-picker .social-platform-choice{
flex-basis:50px;
width:50px;
height:50px;
min-height:50px;
}
.manager-picker .social-platform-choice .social-publishing-logo{
width:35px;
height:35px;
min-width:35px;
}
.manager-picker .social-platform-choice .social-publishing-logo img{
width:22px;
height:22px;
}
.social-preview-tabs button{
flex-basis:46px;
width:46px;
height:46px;
min-width:46px;
}
.social-preview-tabs .social-publishing-logo{
width:33px;
height:33px;
min-width:33px;
}
}
.social-media-library-upload{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
align-items:center;
margin:14px 0 12px;
padding:12px;
border:1px solid var(--line);
border-radius:14px;
background:#07101f;
}
.social-media-library-upload small{
grid-column:1/-1;
color:var(--muted);
font-size:11px;
}
.social-media-library-upload progress{
grid-column:1/-1;
width:100%;
height:8px;
}
@media(max-width:560px){
.social-media-library-upload{grid-template-columns:1fr}
.social-media-library-upload .btn{width:100%}
}
/* Social Publishing split-page navigation */
.side-social-menu{display:grid;gap:2px;min-width:0}
.side-social-menu>.side-link{width:100%}
.side-menu-caret{margin-left:auto;color:#64748b;font-size:13px;line-height:1}
.side-submenu{display:grid;gap:2px;margin:1px 0 5px 28px;padding-left:10px;border-left:1px solid #ffffff12}
.side-sublink{min-height:31px;display:flex;align-items:center;padding:0 10px;border-radius:8px;color:#728198;font-size:11px;font-weight:750}
.side-sublink:hover{background:#ffffff06;color:#dbe4f2}
.side-sublink.active{background:#7c3aed14;color:#c4b5fd}
.mobile-social-submenu{display:grid;gap:2px;padding:8px 0 6px;border-top:1px solid #ffffff10;border-bottom:1px solid #ffffff10}
.mobile-social-submenu>strong{padding:5px 12px;color:#64748b;font-size:10px;letter-spacing:1.1px;text-transform:uppercase}
.mobile-social-submenu>a{padding-left:24px!important}
.social-manager-view-new .social-composer-panel{width:100%;max-width:none}
.social-upcoming-page{display:grid;gap:0}
.social-upcoming-row{display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.social-upcoming-row:first-of-type{border-top:0}
.social-upcoming-time,.social-upcoming-copy{min-width:0}
.social-upcoming-time strong,.social-upcoming-time small,.social-upcoming-copy>strong{display:block}
.social-upcoming-time small{margin-top:4px;color:var(--muted)}
.social-upcoming-copy>strong{overflow-wrap:anywhere}
.social-upcoming-copy .social-post-channel-icons{margin-top:8px}
.social-manager-view-queue .social-manager-kpis{margin-bottom:18px}
@media(max-width:700px){
.social-upcoming-row{grid-template-columns:1fr;gap:9px}
.social-upcoming-row .actions{justify-content:flex-start}
}
/* Social Publishing split-page navigation */
.side-social-menu{display:grid;gap:2px;min-width:0}
.side-social-menu>.side-link{width:100%}
.side-menu-caret{margin-left:auto;color:#64748b;font-size:13px;line-height:1}
.side-submenu{display:grid;gap:2px;margin:1px 0 5px 28px;padding-left:10px;border-left:1px solid #ffffff12}
.side-sublink{min-height:31px;display:flex;align-items:center;padding:0 10px;border-radius:8px;color:#728198;font-size:11px;font-weight:750}
.side-sublink:hover{background:#ffffff06;color:#dbe4f2}
.side-sublink.active{background:#7c3aed14;color:#c4b5fd}
.mobile-social-submenu{display:grid;gap:2px;padding:8px 0 6px;border-top:1px solid #ffffff10;border-bottom:1px solid #ffffff10}
.mobile-social-submenu>strong{padding:5px 12px;color:#64748b;font-size:10px;letter-spacing:1.1px;text-transform:uppercase}
.mobile-social-submenu>a{padding-left:24px!important}
.social-manager-view-new .social-composer-panel{width:100%;max-width:none}
.social-upcoming-page{display:grid;gap:0}
.social-upcoming-row{display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.social-upcoming-row:first-of-type{border-top:0}
.social-upcoming-time,.social-upcoming-copy{min-width:0}
.social-upcoming-time strong,.social-upcoming-time small,.social-upcoming-copy>strong{display:block}
.social-upcoming-time small{margin-top:4px;color:var(--muted)}
.social-upcoming-copy>strong{overflow-wrap:anywhere}
.social-upcoming-copy .social-post-channel-icons{margin-top:8px}
.social-manager-view-queue .social-manager-kpis{margin-bottom:18px}
@media(max-width:700px){
.social-upcoming-row{grid-template-columns:1fr;gap:9px}
.social-upcoming-row .actions{justify-content:flex-start}
}
/* Contextual Social Publishing help pages */
.social-publishing-help-page{max-width:1180px}
.social-help-nav{margin-bottom:18px}
.social-help-intro{margin-bottom:18px}
.social-help-platform-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.social-help-platform-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.social-help-platform-card h3{margin:0 0 5px}
.social-help-platform-card strong{display:block;margin-bottom:6px}
.social-help-platform-card p{margin:0;line-height:1.65}
.social-help-steps,.social-help-requirements,.social-help-status-grid{display:grid;gap:10px}
.social-help-steps>div,.social-help-requirements>div,.social-help-status-grid>div{
padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:#ffffff04
}
.social-help-steps p,.social-help-requirements p,.social-help-status-grid p{margin:5px 0 0}
.social-help-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.social-help-status-grid .status{margin-bottom:4px}
@media(max-width:760px){
.social-help-platform-grid,.social-help-status-grid{grid-template-columns:1fr}
.social-help-nav{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.social-help-nav::-webkit-scrollbar{display:none}
.social-help-nav a{white-space:nowrap}
}
/* New Post: Global fallback + per-platform composers */
.social-new-post-grid{
display:grid;
grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
gap:18px;
align-items:start;
margin-bottom:18px;
}
.social-global-composer,
.social-platform-composer-panel{min-width:0}
.social-platform-composer-list{display:grid;gap:14px}
.social-platform-composer-empty{
padding:34px 18px;
border:1px dashed var(--line);
border-radius:14px;
color:var(--muted);
text-align:center;
background:#ffffff03;
}
.social-platform-composer{
padding:16px;
border:1px solid var(--line);
border-radius:16px;
background:#07101f;
min-width:0;
}
.social-platform-composer[hidden]{display:none!important}
.social-platform-composer-head{
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
gap:11px;
align-items:center;
margin-bottom:14px;
}
.social-platform-composer-head h3{margin:0}
.social-platform-composer-head small{display:block;margin-top:3px;color:var(--muted);line-height:1.45}
.social-platform-composer-head .status{white-space:nowrap}
.social-platform-composer .field{margin-top:12px}
.social-platform-media-field{
padding:12px;
border:1px solid #ffffff0e;
border-radius:13px;
background:#050b16;
}
.social-platform-media-field>.select{margin-top:8px}
.social-global-media-source{margin-top:14px}
.social-live-preview,
.social-schedule-panel{margin-top:18px}
.social-live-preview .section-title-row,
.social-schedule-panel .section-title-row{margin-bottom:12px}
.social-composer-actions{margin-top:18px}
@media(max-width:980px){
.social-new-post-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
.social-platform-composer-head{grid-template-columns:auto minmax(0,1fr)}
.social-platform-composer-head .status{grid-column:2;justify-self:start}
}
/* Social Publishing UI polish · 2026-10-01 23:28 MYT */
.social-new-post-heading{
align-items:flex-start;
margin-bottom:4px;
}
.social-new-post-head-actions{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:8px;
flex:0 0 auto;
}
.social-publish-to-field{
margin-top:8px!important;
}
.social-platform-picker.manager-picker{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:8px;
width:min(100%,302px);
max-width:302px;
overflow:visible;
padding:2px 0 4px;
scroll-snap-type:none;
}
.social-platform-picker.manager-picker .social-platform-choice{
flex:0 0 54px;
}
.social-media-source{
grid-template-columns:minmax(0,1fr) auto;
column-gap:10px;
row-gap:2px;
align-items:center;
}
.social-media-source strong{
grid-column:1;
grid-row:1;
margin:0;
line-height:1.25;
}
.social-media-source span{
grid-column:1;
grid-row:2;
line-height:1.25;
}
.social-media-source .btn{
grid-column:2;
grid-row:1 / span 2;
align-self:center;
}
.social-platform-composer-panel .section-title-row{
align-items:flex-start;
}
.social-platform-composer-nav{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex:0 0 auto;
}
.social-platform-composer-nav[hidden]{display:none!important}
.social-platform-composer-nav .btn{
min-width:40px;
padding:8px 11px;
}
.social-platform-composer-nav span{
min-width:46px;
text-align:center;
color:var(--muted);
font-size:12px;
font-weight:800;
}
.social-platform-composer-list{
display:flex;
gap:14px;
overflow-x:auto;
overflow-y:hidden;
align-items:flex-start;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.social-platform-composer-list::-webkit-scrollbar{display:none}
.social-platform-composer-list .social-platform-composer{
flex:0 0 100%;
width:100%;
scroll-snap-align:start;
scroll-snap-stop:always;
}
.social-platform-composer-panel .help{
margin-top:16px;
margin-bottom:4px;
}
.social-review-guide{
margin-top:20px!important;
padding:15px 16px;
line-height:1.7;
}
.tiktok-review-panel>.help:last-child{
margin-top:20px;
}
.social-schedule-fields{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:12px;
}
.social-schedule-fields .field{margin:0}
.social-schedule-note{
display:block;
margin-top:10px;
}
.social-status-trigger.btn{
white-space:nowrap;
}
@media(max-width:620px){
.social-new-post-heading{
flex-direction:row;
align-items:flex-start;
}
.social-new-post-heading>div:first-child{min-width:0}
.social-new-post-head-actions{margin-left:auto}
.social-platform-composer-panel .section-title-row{
flex-direction:row;
align-items:flex-start;
}
.social-platform-composer-panel .section-title-row>div:first-child{min-width:0}
.social-platform-composer-nav{
margin-left:auto;
}
}
@media(max-width:480px){
.social-platform-picker.manager-picker{
width:min(100%,282px);
max-width:282px;
}
.social-platform-picker.manager-picker .social-platform-choice{
flex-basis:50px;
}
.social-new-post-head-actions .status{white-space:nowrap}
}
/* Social Publishing spacing refinement · 2026-10-01 23:40 MYT */
.social-new-post-heading{
margin-bottom:0!important;
}
.social-new-post-heading p.muted{
margin-bottom:0;
}
.social-publish-to-field{
margin-top:0!important;
}
.social-publish-to-field>label{
margin-bottom:6px;
}
.social-platform-picker.manager-picker{
row-gap:6px;
column-gap:8px;
margin-top:6px!important;
margin-bottom:10px!important;
}
/* Social Publishing platform icon arrangement · balanced 5 + 4 */
.social-platform-picker.manager-picker{
display:grid!important;
grid-template-columns:repeat(10,minmax(0,1fr));
width:100%!important;
max-width:none!important;
gap:8px 0!important;
overflow:visible!important;
margin-top:6px!important;
margin-bottom:10px!important;
padding:2px 0 4px!important;
}
.social-platform-picker.manager-picker .social-platform-choice{
justify-self:center;
margin:0!important;
}
.social-platform-picker.manager-picker .social-platform-choice:nth-child(1){grid-column:1 / span 2}
.social-platform-picker.manager-picker .social-platform-choice:nth-child(2){grid-column:3 / span 2}
.social-platform-picker.manager-picker .social-platform-choice:nth-child(3){grid-column:5 / span 2}
.social-platform-picker.manager-picker .social-platform-choice:nth-child(4){grid-column:7 / span 2}
.social-platform-picker.manager-picker .social-platform-choice:nth-child(5){grid-column:9 / span 2}
.social-platform-picker.manager-picker .social-platform-choice:nth-child(6){grid-column:2 / span 2}
.social-platform-picker.manager-picker .social-platform-choice:nth-child(7){grid-column:4 / span 2}
.social-platform-picker.manager-picker .social-platform-choice:nth-child(8){grid-column:6 / span 2}
.social-platform-picker.manager-picker .social-platform-choice:nth-child(9){grid-column:8 / span 2}
@media(max-width:480px){
.social-platform-picker.manager-picker{
grid-template-columns:repeat(10,minmax(0,1fr));
width:100%!important;
max-width:none!important;
}
}
/* Publish-to platform carousel · single row with arrow navigation */
.social-platform-picker-shell{
display:grid;
grid-template-columns:38px minmax(0,1fr) 38px;
gap:8px;
align-items:center;
width:100%;
}
.social-platform-picker.manager-picker{
display:flex!important;
flex-wrap:nowrap!important;
justify-content:flex-start!important;
align-items:center!important;
width:100%!important;
max-width:none!important;
gap:8px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
margin:6px 0 10px!important;
padding:2px 1px 5px!important;
scroll-snap-type:x proximity!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch;
}
.social-platform-picker.manager-picker::-webkit-scrollbar{display:none!important}
.social-platform-picker.manager-picker .social-platform-choice,
.social-platform-picker.manager-picker .social-platform-choice:nth-child(n){
flex:0 0 54px!important;
width:54px!important;
grid-column:auto!important;
justify-self:auto!important;
margin:0!important;
scroll-snap-align:start;
}
.social-platform-picker-arrow{
width:38px;
height:38px;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:12px;
background:#ffffff08;
color:#e5e7eb;
font-size:24px;
line-height:1;
cursor:pointer;
padding:0;
}
.social-platform-picker-arrow:hover:not(:disabled){
border-color:#7c3aed75;
background:#7c3aed16;
color:#fff;
}
.social-platform-picker-arrow:disabled{
opacity:.28;
cursor:default;
}
@media(max-width:480px){
.social-platform-picker-shell{
grid-template-columns:34px minmax(0,1fr) 34px;
gap:6px;
}
.social-platform-picker-arrow{
width:34px;
height:34px;
border-radius:10px;
font-size:21px;
}
.social-platform-picker.manager-picker .social-platform-choice,
.social-platform-picker.manager-picker .social-platform-choice:nth-child(n){
flex-basis:50px!important;
width:50px!important;
}
}
/* Restore breathing room before Publish to */
.social-publish-to-field{
margin-top:18px!important;
}
/* Media Library modal empty state alignment */
.social-media-library-grid>.empty-state{
grid-column:1 / -1;
width:100%;
min-height:220px;
display:grid;
place-items:center;
text-align:center;
padding:36px 20px;
}
.social-media-library-grid>.empty-state p{
margin:0;
max-width:560px;
}
/* Create Website · template wizard */
.site-template-step{
margin:30px 0 8px;
padding-top:28px;
border-top:1px solid var(--line);
}
.site-wizard-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:28px;
margin-bottom:28px;
}
.site-wizard-head>div:first-child{max-width:720px}
.site-wizard-head h2{
margin:8px 0 9px;
font-size:28px;
letter-spacing:-.6px;
}
.site-wizard-head p{margin:0}
.wizard-progress{
display:flex;
justify-content:flex-end;
gap:7px;
flex-wrap:wrap;
max-width:390px;
}
.wizard-progress span{
min-height:34px;
display:inline-flex;
align-items:center;
padding:0 10px;
border:1px solid var(--line);
border-radius:999px;
color:#8190a7;
background:#ffffff04;
font-size:10px;
font-weight:850;
white-space:nowrap;
}
.wizard-progress span.done{
color:#9ee6bd;
border-color:#22c55e3e;
background:#22c55e0c;
}
.wizard-progress span.active{
color:#ded8ff;
border-color:#7c3aed75;
background:#7c3aed18;
}
.template-group{margin:28px 0}
.template-group>h3{
margin:0 0 12px;
color:#c7d2e3;
font-size:12px;
font-weight:900;
letter-spacing:.06em;
text-transform:uppercase;
}
.template-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}
.template-choice{
position:relative;
display:grid;
grid-template-columns:150px minmax(0,1fr);
gap:16px;
min-width:0;
padding:12px;
border:1px solid var(--line);
border-radius:18px;
background:#ffffff03;
cursor:pointer;
transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.template-choice:hover{
transform:translateY(-2px);
border-color:#7c3aed55;
background:#ffffff06;
}
.template-choice:has(>input:checked){
border-color:#8b5cf6;
background:#7c3aed0c;
box-shadow:0 0 0 2px #7c3aed18,0 14px 34px #00000022;
}
.template-choice>input{
position:absolute;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
}
.template-preview{
position:relative;
display:block;
min-width:0;
height:118px;
overflow:hidden;
border:1px solid #ffffff12;
border-radius:13px;
background:linear-gradient(145deg,#11192a,#08101d);
}
.template-preview-live_tiktok,
.template-preview-live_instagram,
.template-preview-live_facebook{
width:72px;
height:126px;
justify-self:center;
border-radius:16px;
background:radial-gradient(circle at 50% 34%,#3c4658,#151820 45%,#050506 82%);
}
.template-preview-live_tiktok{box-shadow:inset -3px 0 #25f4ee44,inset 3px 0 #fe2c5544}
.template-preview-live_instagram{box-shadow:inset 0 0 28px #c1358448}
.template-preview-live_facebook{box-shadow:inset 0 0 28px #1877f23d}
.tp-live{
position:absolute;
top:8px;
left:8px;
padding:3px 5px;
border-radius:4px;
background:#ff2d55;
color:#fff;
font-size:6px;
font-style:normal;
font-weight:950;
}
.tp-user{
position:absolute;
top:28px;
left:50%;
width:30px;
height:43px;
transform:translateX(-50%);
border-radius:15px 15px 9px 9px;
background:#ffffff22;
}
.tp-chat{
position:absolute;
left:7px;
height:5px;
border-radius:5px;
background:#ffffff64;
}
.tp-chat.c1{width:38px;bottom:29px}
.tp-chat.c2{width:29px;bottom:20px}
.tp-bag{
position:absolute;
right:7px;
bottom:18px;
width:18px;
height:16px;
border:1.5px solid #171717;
border-radius:3px 3px 5px 5px;
background:#ffd91a;
color:#171717;
}
.tp-bag:before{
content:"";
position:absolute;
left:4px;
top:-6px;
width:7px;
height:7px;
border:1.5px solid currentColor;
border-bottom:0;
border-radius:5px 5px 0 0;
}
.template-preview-live_instagram .tp-bag{background:#ff2d75;color:#fff;border-color:#fff}
.template-preview-live_facebook .tp-bag{background:#1877f2;color:#fff;border-color:#fff}
.template-preview-sales_aida{
background:linear-gradient(135deg,#f1efff,#fff);
}
.template-preview-sales_aida .tp-kicker{
position:absolute;
left:12px;
top:14px;
width:34px;
height:5px;
border-radius:4px;
background:#6d5dfc;
}
.tp-headline{
position:absolute;
left:12px;
top:29px;
width:54%;
height:22px;
border-radius:6px;
background:repeating-linear-gradient(180deg,#e2e7ef 0 5px,transparent 5px 9px);
}
.template-preview-sales_aida .tp-product{
position:absolute;
right:12px;
top:15px;
width:45px;
height:58px;
border-radius:12px;
background:linear-gradient(145deg,#b8aefc,#6d5dfc);
box-shadow:0 10px 20px #6d5dfc33;
}
.tp-button{
position:absolute;
left:12px;
bottom:14px;
width:45px;
height:12px;
border-radius:5px;
background:#6d5dfc;
}
.template-preview-company{
background:linear-gradient(145deg,#eef6ff,#ffffff);
}
.tp-nav{
position:absolute;
left:10px;
right:10px;
top:10px;
height:8px;
border-radius:5px;
background:#dbe4f0;
}
.template-preview-company .tp-headline{
top:30px;
width:45%;
background:repeating-linear-gradient(180deg,#94a3b8 0 5px,transparent 5px 9px);
}
.tp-company-grid,
.tp-blocks{
position:absolute;
left:10px;
right:10px;
bottom:12px;
height:38px;
background:linear-gradient(90deg,#dbeafe 0 31%,transparent 31% 34%,#e0f2fe 34% 65%,transparent 65% 68%,#dbeafe 68% 100%);
border-radius:7px;
}
.template-preview:not(.template-preview-live_tiktok):not(.template-preview-live_instagram):not(.template-preview-live_facebook):not(.template-preview-sales_aida):not(.template-preview-company) .tp-headline{
top:30px;
width:48%;
background:repeating-linear-gradient(180deg,#62718b 0 5px,transparent 5px 9px);
}
.template-meta{
align-self:center;
min-width:0;
padding-right:48px;
}
.template-badges{
display:flex;
align-items:center;
gap:6px;
flex-wrap:wrap;
margin-bottom:8px;
}
.template-badges b,
.template-badges em{
display:inline-flex;
align-items:center;
min-height:21px;
padding:0 7px;
border-radius:999px;
border:1px solid #ffffff14;
font-size:8px;
font-style:normal;
font-weight:900;
letter-spacing:.04em;
}
.template-badges b{color:#c4b5fd;background:#7c3aed13;border-color:#7c3aed30}
.template-badges em{color:#91a1b9;background:#ffffff04}
.template-meta>strong{
display:block;
margin-bottom:6px;
color:#f5f7fb;
font-size:15px;
line-height:1.25;
}
.template-meta>small{
display:block;
color:#91a1b9;
font-size:11px;
line-height:1.55;
}
.template-selected{
position:absolute;
top:10px;
right:10px;
opacity:0;
transform:translateY(-3px);
padding:5px 7px;
border-radius:999px;
background:#7c3aed;
color:#fff;
font-size:8px;
font-weight:950;
transition:opacity .18s ease,transform .18s ease;
}
.template-choice:has(>input:checked) .template-selected{
opacity:1;
transform:translateY(0);
}
.template-next-note{
display:flex;
align-items:flex-start;
gap:12px;
margin:28px 0 4px;
padding:14px 16px;
border:1px solid #7c3aed35;
border-radius:14px;
background:#7c3aed0a;
}
.template-next-note strong{
flex:0 0 auto;
color:#d8d2ff;
font-size:11px;
}
.template-next-note span{
color:#91a1b9;
font-size:11px;
line-height:1.5;
}
@media(max-width:760px){
.site-wizard-head{display:block}
.wizard-progress{
justify-content:flex-start;
max-width:none;
margin-top:18px;
}
.template-grid{grid-template-columns:1fr}
.template-choice{grid-template-columns:120px minmax(0,1fr)}
.template-preview{height:104px}
.template-preview-live_tiktok,
.template-preview-live_instagram,
.template-preview-live_facebook{
width:63px;
height:108px;
}
.template-next-note{display:block}
.template-next-note strong{display:block;margin-bottom:5px}
}
.template-card-actions{
display:flex;
gap:8px;
margin-top:12px;
}
.template-preview-button{
appearance:none;
min-height:34px;
padding:0 11px;
border:1px solid #ffffff1a;
border-radius:9px;
background:#ffffff06;
color:#dbe4f3;
font:800 10px/1 Inter,system-ui,sans-serif;
cursor:pointer;
}
.template-preview-button:hover{
border-color:#8b5cf666;
background:#7c3aed14;
color:#fff;
}
.template-preview-dialog{
width:min(96vw,1240px);
height:min(92vh,920px);
max-width:none;
max-height:none;
padding:0;
border:1px solid #ffffff1a;
border-radius:20px;
background:#070b16;
color:#fff;
box-shadow:0 35px 100px #000a;
}
.template-preview-dialog::backdrop{
background:#000b;
backdrop-filter:blur(7px);
}
.template-preview-dialog-shell{
display:grid;
grid-template-rows:auto minmax(0,1fr) auto;
height:100%;
}
.template-preview-dialog-shell>header{
min-height:70px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:12px 16px;
border-bottom:1px solid #ffffff12;
background:#0a1020;
}
.template-preview-dialog-shell>header>div:first-child{
min-width:0;
display:flex;
flex-direction:column;
gap:4px;
}
.template-preview-dialog-shell>header strong{
max-width:520px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:16px;
}
.template-preview-dialog-actions{
display:flex;
align-items:center;
gap:8px;
}
.template-preview-dialog-actions .btn{
min-height:38px;
padding:0 12px;
}
#templatePreviewClose{
width:38px;
padding:0;
font-size:22px;
}
.template-preview-frame-wrap{
min-height:0;
background:#111827;
}
.template-preview-frame-wrap iframe{
display:block;
width:100%;
height:100%;
border:0;
background:#fff;
}
.template-preview-dialog-shell>footer{
min-height:62px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
padding:10px 16px;
border-top:1px solid #ffffff12;
background:#0a1020;
}
.template-preview-dialog-shell>footer span{
color:#91a1b9;
font-size:11px;
line-height:1.4;
}
@media(max-width:760px){
.site-wizard-head{display:block}
.wizard-progress{
justify-content:flex-start;
max-width:none;
margin-top:18px;
}
.template-grid{grid-template-columns:1fr}
.template-choice{grid-template-columns:120px minmax(0,1fr)}
.template-preview{height:104px}
.template-preview-live_tiktok,
.template-preview-live_instagram,
.template-preview-live_facebook{
width:63px;
height:108px;
}
.template-next-note{display:block}
.template-next-note strong{display:block;margin-bottom:5px}
.template-preview-dialog{
width:100vw;
height:100dvh;
border:0;
border-radius:0;
}
.template-preview-dialog-shell>header{
min-height:62px;
padding:10px 12px;
}
.template-preview-dialog-actions #templatePreviewOpenNew{display:none}
.template-preview-dialog-shell>footer{
min-height:70px;
padding:10px 12px;
}
.template-preview-dialog-shell>footer span{display:none}
.template-preview-dialog-shell>footer .btn{width:100%}
}
@media(max-width:460px){
.template-choice{grid-template-columns:1fr}
.template-preview{height:150px;width:100%}
.template-preview-live_tiktok,
.template-preview-live_instagram,
.template-preview-live_facebook{
width:84px;
height:150px;
}
.template-meta{padding-right:0}
.template-selected{top:9px;right:9px}
}
/* Site editor · simplified branding assets */
.brand-asset-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin:4px 0 22px;
}
.brand-asset-card{
min-width:0;
padding:16px;
border:1px solid var(--line);
border-radius:16px;
background:#ffffff03;
}
.brand-asset-preview{
display:grid;
place-items:center;
width:100%;
min-height:132px;
margin-bottom:14px;
border:1px dashed #ffffff20;
border-radius:14px;
background:#070b16;
overflow:hidden;
}
.brand-asset-preview img{
display:block;
max-width:88%;
max-height:104px;
width:auto;
height:auto;
object-fit:contain;
}
.brand-logo-preview span,
.brand-favicon-preview span{
color:#7f8da3;
font-size:11px;
font-weight:800;
}
.brand-favicon-preview{
min-height:132px;
}
.brand-favicon-preview img{
width:64px;
height:64px;
max-width:64px;
max-height:64px;
border-radius:14px;
}
.brand-asset-copy>label{
display:block;
margin-bottom:7px;
color:#f5f7fb;
font-size:13px;
font-weight:900;
}
.brand-asset-copy>p{
margin:0 0 12px;
color:#91a1b9;
font-size:11px;
line-height:1.55;
}
.brand-file-input{
min-height:46px;
padding:10px 12px!important;
}
.site-editor-subhead{
margin:28px 0 14px;
padding-top:24px;
border-top:1px solid var(--line);
}
.site-editor-subhead p{
margin:6px 0 0;
}
@media(max-width:720px){
.brand-asset-grid{grid-template-columns:1fr}
}
/* Site Editor · Mobile Live templates */
.mobile-live-editor{
margin:24px 0 18px;
padding:18px;
}
.mobile-live-editor-head{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
margin-bottom:18px;
}
.mobile-live-editor-head h3{
margin:7px 0 5px;
font-size:20px;
}
.mobile-live-editor-head p{margin:0}
.mobile-live-toggle{
margin:4px 0 20px;
}
.mobile-live-compact-grid{
gap:0 14px;
}
.mobile-live-product-editor{
margin:22px 0;
padding:16px;
border:1px solid var(--line);
border-radius:14px;
background:#ffffff03;
}
.mobile-live-product-editor>.eyebrow{
display:block;
margin-bottom:14px;
}
@media(max-width:720px){
.mobile-live-editor-head{display:block}
.mobile-live-editor-head .status{
display:inline-flex;
margin-top:12px;
}
.mobile-live-compact-grid{grid-template-columns:1fr}
}
/* Mobile Live · preview activity editor */
.mobile-live-brand-note{margin:14px 0 18px}
.mobile-live-simulation{
margin:18px 0 22px;
padding:16px;
border:1px solid #7c3aed33;
border-radius:14px;
background:#7c3aed08;
}
.mobile-live-simulation>p{margin:7px 0 14px}
.mobile-live-comments-editor{
margin-top:22px;
padding:16px;
border:1px solid var(--line);
border-radius:14px;
background:#ffffff03;
}
.mobile-live-comments-head{
display:flex;
justify-content:space-between;
gap:18px;
align-items:flex-start;
margin-bottom:14px;
}
.mobile-live-comments-head p{margin:6px 0 0}
.mobile-live-comment-count{
width:150px;
margin:0;
flex:0 0 auto;
}
.live-comment-editor-list{
display:grid;
gap:10px;
}
.live-comment-editor-row{
display:grid;
grid-template-columns:58px minmax(0,1fr);
gap:12px;
padding:12px;
border:1px solid #ffffff12;
border-radius:13px;
background:#090f1b;
}
.live-comment-avatar-preview{
width:52px;
height:52px;
border-radius:50%;
display:grid;
place-items:center;
overflow:hidden;
background:linear-gradient(145deg,#1e293b,#0f172a);
border:1px solid #ffffff18;
color:#94a3b8;
font-size:10px;
font-weight:900;
}
.live-comment-avatar-preview img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.live-comment-editor-fields .field{margin-bottom:9px}
@media(max-width:720px){
.mobile-live-comments-head{display:block}
.mobile-live-comment-count{width:100%;margin-top:12px}
.live-comment-editor-row{grid-template-columns:46px minmax(0,1fr)}
.live-comment-avatar-preview{width:42px;height:42px}
}
/* Mobile Live · compact comment rows */
.mobile-live-comments-head{
align-items:center;
}
.live-comment-add{
flex:0 0 auto;
min-height:36px;
padding:0 12px;
}
.live-comment-editor-list{
gap:8px;
margin-bottom:10px;
}
.live-comment-editor-row{
display:block;
padding:0;
overflow:hidden;
}
.live-comment-editor-row>summary{
display:grid;
grid-template-columns:40px minmax(0,1fr) 24px;
gap:10px;
align-items:center;
min-height:58px;
padding:8px 10px;
cursor:pointer;
list-style:none;
}
.live-comment-editor-row>summary::-webkit-details-marker{display:none}
.live-comment-editor-row>summary:hover{background:#ffffff04}
.live-comment-editor-row[open]>summary{
border-bottom:1px solid #ffffff10;
background:#ffffff03;
}
.live-comment-avatar-preview{
width:38px;
height:38px;
font-size:9px;
}
.live-comment-summary-copy{
min-width:0;
display:grid;
gap:3px;
}
.live-comment-summary-copy strong,
.live-comment-summary-copy small{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.live-comment-summary-copy strong{
color:#f4f7fb;
font-size:11px;
}
.live-comment-summary-copy small{
color:#8795aa;
font-size:10px;
}
.live-comment-chevron{
color:#748198;
font-size:18px;
text-align:center;
transition:transform .18s ease;
}
.live-comment-editor-row[open] .live-comment-chevron{transform:rotate(180deg)}
.live-comment-editor-fields{
padding:12px;
}
.live-comment-row-actions{
display:flex;
justify-content:flex-end;
}
.live-comment-row-actions .btn{
min-height:32px;
padding:0 10px;
font-size:10px;
}
@media(max-width:720px){
.mobile-live-comments-head{
display:flex;
align-items:center;
}
.mobile-live-comments-head>div{min-width:0}
.live-comment-add{
white-space:nowrap;
}
}
/* Create Website · true 3-slide wizard */
.new-site-wizard-slide{
margin-top:24px;
animation:newSiteWizardIn .22s ease;
}
.new-site-wizard-slide[hidden]{display:none!important}
.new-site-wizard-slide.active{display:block}
@keyframes newSiteWizardIn{
from{opacity:0;transform:translateX(14px)}
to{opacity:1;transform:translateX(0)}
}
.new-site-wizard-slide.site-template-step{
margin:24px 0 0;
padding-top:0;
border-top:0;
}
.wizard-slide-actions{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
margin-top:24px;
padding-top:18px;
border-top:1px solid var(--line);
}
.wizard-inline-error{
margin-top:16px;
padding:10px 12px;
border:1px solid #ef444455;
border-radius:10px;
background:#ef444410;
color:#ff9ca6;
font-size:11px;
}
.template-tabs{
display:flex;
gap:8px;
overflow-x:auto;
margin:0 0 18px;
padding:3px;
border:1px solid var(--line);
border-radius:13px;
background:#ffffff03;
scrollbar-width:none;
}
.template-tabs::-webkit-scrollbar{display:none}
.template-tab{
appearance:none;
flex:0 0 auto;
min-height:38px;
padding:0 14px;
border:0;
border-radius:10px;
background:transparent;
color:#8e9cb0;
font:850 11px/1 Inter,system-ui,sans-serif;
cursor:pointer;
white-space:nowrap;
}
.template-tab.active{
background:#7c3aed1b;
color:#e7e1ff;
box-shadow:inset 0 0 0 1px #8b5cf655;
}
.template-tab-panel{
margin:0;
}
.template-tab-panel[hidden]{display:none!important}
.wizard-form-template-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.wizard-form-choice{
position:relative;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
min-height:70px;
padding:14px 15px;
border:1px solid var(--line);
border-radius:14px;
background:#ffffff03;
cursor:pointer;
}
.wizard-form-choice:hover{
border-color:#7c3aed55;
background:#ffffff06;
}
.wizard-form-choice:has(input:checked){
border-color:#8b5cf6;
background:#7c3aed0d;
box-shadow:0 0 0 2px #7c3aed16;
}
.wizard-form-choice[hidden]{display:none!important}
.wizard-form-choice>input{
position:absolute;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
}
.wizard-form-choice span{
min-width:0;
display:grid;
gap:5px;
}
.wizard-form-choice b{
color:#eef2f7;
font-size:12px;
}
.wizard-form-choice small{
color:#8190a7;
font-size:9px;
letter-spacing:.06em;
}
.wizard-form-choice i{
width:24px;
height:24px;
flex:0 0 auto;
display:grid;
place-items:center;
border:1px solid #ffffff18;
border-radius:50%;
color:transparent;
font-style:normal;
font-size:10px;
}
.wizard-form-choice:has(input:checked) i{
border-color:#8b5cf6;
background:#8b5cf6;
color:#fff;
}
@media(max-width:760px){
.wizard-slide-actions{align-items:stretch}
.wizard-slide-actions .btn{flex:1}
.wizard-form-template-grid{grid-template-columns:1fr}
.template-tabs{margin-left:-2px;margin-right:-2px}
}
/* =========================================================
Vidora Website Builder · Pages + Sections + Forms
2026-10-03
========================================================= */
.builder-new-site.authbox.new-site-box{
width:min(1180px,100%);
padding:30px;
}
.new-site-intro{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:28px;
margin-bottom:18px;
}
.new-site-intro h1{margin:7px 0 8px;font-size:38px;letter-spacing:-1.5px}
.new-site-intro p{margin:0;max-width:720px;line-height:1.65}
.new-site-step-dots{display:flex;align-items:center;gap:8px;padding-top:4px}
.new-site-step-dots span{
width:34px;height:34px;border:1px solid var(--line);border-radius:50%;
display:grid;place-items:center;color:#66758b;background:#ffffff04;
font-size:11px;font-weight:900;transition:.18s ease;
}
.new-site-step-dots span.active{
color:#fff;border-color:#8b5cf6;background:#7c3aed;
box-shadow:0 0 0 5px #7c3aed1d;
}
.new-site-plan-note{margin-bottom:14px}
.builder-new-site .site-wizard-head{margin-bottom:22px}
.builder-new-site .site-wizard-head h2{font-size:30px;margin:7px 0 8px}
.builder-new-site .new-site-wizard-slide{min-height:430px}
.builder-start-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin:6px 0 24px;
}
.builder-start-choice{
position:relative;min-width:0;min-height:205px;padding:20px;
display:flex;flex-direction:column;align-items:flex-start;gap:15px;
border:1px solid var(--line);border-radius:19px;background:#ffffff03;
cursor:pointer;transition:.18s ease;
}
.builder-start-choice:hover{transform:translateY(-2px);border-color:#7c3aed55;background:#ffffff06}
.builder-start-choice:has(input:checked){
border-color:#8b5cf6;background:linear-gradient(145deg,#7c3aed12,#ffffff03);
box-shadow:0 0 0 2px #7c3aed16,0 16px 40px #0003;
}
.builder-start-choice>input,.builder-form-start-choice>input,.form-preset-choice>input,.starter-card input{
position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
}
.builder-start-icon{
width:46px;height:46px;border-radius:14px;background:#ffffff08;border:1px solid #ffffff12;
display:grid;place-items:center;color:#c4b5fd;font-size:21px;font-weight:900;
}
.builder-start-copy{display:grid;gap:8px}
.builder-start-copy em{
width:max-content;padding:4px 7px;border-radius:999px;background:#7c3aed16;
color:#bca9ff;font-size:8px;font-weight:950;font-style:normal;letter-spacing:.08em;text-transform:uppercase;
}
.builder-start-copy strong{font-size:16px;color:#f5f7fb}
.builder-start-copy small{font-size:11px;line-height:1.65;color:#8e9bb0}
.builder-start-choice>i,.builder-form-start-choice>i,.form-preset-choice>i{
position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;
border:1px solid #ffffff18;display:grid;place-items:center;color:transparent;
font-size:10px;font-style:normal;
}
.builder-start-choice:has(input:checked)>i,
.builder-form-start-choice:has(input:checked)>i,
.form-preset-choice:has(input:checked)>i{
background:#8b5cf6;border-color:#8b5cf6;color:#fff;
}
.starter-template-area{
border:1px solid var(--line);border-radius:20px;background:#080f1eb0;padding:19px;
}
.starter-template-heading{
display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:14px;
}
.starter-template-heading h3{margin:6px 0 5px;font-size:19px}
.starter-template-heading p{margin:0;color:#8897ab;font-size:11px;line-height:1.6;max-width:720px}
.starter-filter-row{
display:flex;gap:7px;overflow:auto;padding:1px 0 12px;scrollbar-width:none;
}
.starter-filter-row::-webkit-scrollbar{display:none}
.starter-filter-row button{
flex:0 0 auto;min-height:34px;padding:0 11px;border:1px solid var(--line);
border-radius:999px;background:#ffffff03;color:#8492a6;font-size:10px;font-weight:850;cursor:pointer;
}
.starter-filter-row button.active{background:#7c3aed18;border-color:#8b5cf65d;color:#ddd6fe}
.starter-gallery{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
}
.starter-card{
position:relative;min-width:0;border:1px solid var(--line);border-radius:17px;
background:#ffffff03;overflow:hidden;transition:.18s ease;
}
.starter-card:hover{border-color:#7c3aed4d;transform:translateY(-2px)}
.starter-card:has(input:checked){border-color:#8b5cf6;box-shadow:0 0 0 2px #7c3aed15}
.starter-card>label{display:block;cursor:pointer;padding:10px}
.starter-card-visual.template-preview{
width:100%;height:145px;display:block;margin:0 0 12px;
}
.starter-card-visual.template-preview-live_tiktok,
.starter-card-visual.template-preview-live_instagram,
.starter-card-visual.template-preview-live_facebook{
width:82px;height:145px;margin:0 auto 12px;
}
.starter-card-copy{display:grid;gap:6px;min-height:118px}
.starter-card-copy strong{font-size:13px;color:#eef2f7}
.starter-card-copy small{color:#8492a6;font-size:10px;line-height:1.55}
.starter-card .template-badges{margin:0}
.starter-card .template-selected{top:10px;right:10px}
.starter-preview-button{
margin:0 10px 10px;width:calc(100% - 20px);justify-content:center;
}
.start-mode-note{
display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid #ffffff13;
border-radius:16px;background:#ffffff04;
}
.start-mode-note[hidden]{display:none!important}
.start-mode-note>span{
width:42px;height:42px;flex:0 0 auto;display:grid;place-items:center;border-radius:12px;
background:#7c3aed18;color:#c4b5fd;font-size:19px;
}
.start-mode-note.chatgpt>span{background:#2563eb18;color:#93c5fd}
.start-mode-note strong{display:block;margin-bottom:5px}
.start-mode-note p{margin:0;color:#8998ad;font-size:11px;line-height:1.65}
.builder-form-start-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:20px;
}
.builder-form-start-choice{
position:relative;min-height:150px;padding:18px;border:1px solid var(--line);border-radius:17px;
background:#ffffff03;display:grid;align-content:start;gap:9px;cursor:pointer;
}
.builder-form-start-choice:hover{border-color:#7c3aed50;background:#ffffff06}
.builder-form-start-choice:has(input:checked){border-color:#8b5cf6;background:#7c3aed0d}
.builder-form-start-choice>span{
width:38px;height:38px;border-radius:11px;background:#ffffff08;display:grid;place-items:center;
color:#c4b5fd;font-weight:900;
}
.builder-form-start-choice strong{font-size:13px}
.builder-form-start-choice small{font-size:10px;color:#8795a9;line-height:1.55}
.form-preset-area{
margin:18px 0 4px;padding:17px;border:1px solid var(--line);border-radius:18px;background:#080f1e9c;
}
.form-preset-area[hidden]{display:none!important}
.form-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.form-preset-choice{
position:relative;min-height:65px;padding:13px 48px 13px 14px;border:1px solid var(--line);
border-radius:13px;background:#ffffff03;display:flex;align-items:center;cursor:pointer;
}
.form-preset-choice:has(input:checked){border-color:#8b5cf6;background:#7c3aed0c}
.form-preset-choice span{display:grid;gap:4px}
.form-preset-choice strong{font-size:11px}
.form-preset-choice small{font-size:9px;color:#7d8ba0}
.mobile-live-form-note{margin-top:16px}
.wizard-slide-actions{position:relative}
.builder-new-site .wizard-slide-actions{margin-top:24px}
/* Builder shell */
.builder-page{
width:calc(100vw - 248px);
min-height:calc(100vh - 64px);
margin-left:0;
padding:0;
background:#070b16;
transition:width .18s ease;
}
@media(min-width:901px){
.app-auth.sidebar-collapsed .builder-page{
width:100vw;
}
}
.builder-top{
min-height:84px;padding:13px 20px;border-bottom:1px solid var(--line);
background:#09111fe8;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.builder-top-copy{display:flex;align-items:center;gap:18px;min-width:0}
.builder-top-copy>div{min-width:0}
.builder-top-copy h1{margin:2px 0 2px;font-size:20px;letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.builder-top-copy p{margin:0;color:#68778c;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.builder-back{
width:96px;min-height:38px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--line);border-radius:10px;color:#9aa8bb;font-size:10px;font-weight:800;flex:0 0 auto;
}
.builder-back:hover{color:#fff;background:#ffffff06}
.builder-origin{
display:inline-flex;margin-left:7px;padding:2px 6px;border:1px solid #7c3aed38;border-radius:999px;
color:#a995ff;font-size:8px;font-weight:900;letter-spacing:.06em;
}
.builder-top-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.builder-top-actions form{display:inline-flex}
.builder-top-actions .btn{min-height:38px;padding:0 12px;font-size:11px}
.builder-tabs{
height:50px;padding:0 20px;border-bottom:1px solid var(--line);background:#080f1e;
display:flex;align-items:flex-end;gap:2px;overflow:auto;scrollbar-width:none;
}
.builder-tabs::-webkit-scrollbar{display:none}
.builder-tabs a{
height:49px;padding:0 15px;display:flex;align-items:center;border-bottom:2px solid transparent;
color:#78869a;font-size:11px;font-weight:850;white-space:nowrap;
}
.builder-tabs a:hover{color:#d7deea}
.builder-tabs a.active{color:#fff;border-bottom-color:#8b5cf6;background:linear-gradient(180deg,transparent,#7c3aed0b)}
.builder-workspace{
height:calc(100vh - 198px);min-height:620px;
display:grid;grid-template-columns:278px minmax(420px,1fr) 356px;
overflow:hidden;
}
.builder-left,.builder-right{
min-width:0;height:100%;overflow:auto;background:#09111f;
scrollbar-width:thin;scrollbar-color:#29364b transparent;
}
.builder-left{border-right:1px solid var(--line);padding:14px}
.builder-right{border-left:1px solid var(--line);padding:16px}
.builder-canvas{min-width:0;height:100%;background:#050a13;display:grid;grid-template-rows:48px minmax(0,1fr)}
.builder-canvas-toolbar{
min-height:48px;padding:7px 12px;border-bottom:1px solid var(--line);background:#080f1e;
display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.builder-device-toggle{
display:flex;padding:3px;border:1px solid var(--line);border-radius:10px;background:#050b16;
}
.builder-device-toggle button,.builder-refresh{
min-height:30px;padding:0 10px;border:0;border-radius:7px;background:transparent;color:#748298;
font:800 9px/1 Inter,system-ui,sans-serif;cursor:pointer;
}
.builder-device-toggle button.active{background:#ffffff0c;color:#fff}
.builder-refresh{border:1px solid var(--line);color:#9aa8bb}
.builder-preview-shell{
min-width:0;min-height:0;height:100%;padding:16px;display:flex;justify-content:center;overflow:auto;
transition:.2s ease;
}
.builder-preview-shell iframe{
display:block;width:100%;height:100%;min-height:520px;border:1px solid #ffffff18;border-radius:11px;
background:#fff;box-shadow:0 18px 55px #0008;transition:width .2s ease;
}
.builder-preview-shell[data-builder-shell="tablet"] iframe{width:768px;max-width:100%}
.builder-preview-shell[data-builder-shell="mobile"] iframe{width:390px;max-width:100%}
.builder-panel-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;
}
.builder-panel-head .eyebrow{font-size:8px}
.builder-panel-head strong{display:block;margin-top:2px;font-size:11px}
.builder-icon-button{
width:31px;height:31px;padding:0;border:1px solid var(--line);border-radius:9px;background:#ffffff05;
color:#c5cfdd;display:grid;place-items:center;cursor:pointer;font-size:17px;font-weight:600;list-style:none;
}
.builder-icon-button::-webkit-details-marker{display:none}
.builder-icon-button:hover{background:#7c3aed16;border-color:#8b5cf64f;color:#fff}
.builder-page-list,.builder-section-list{display:grid;gap:5px}
.builder-page-item{
min-width:0;min-height:54px;padding:7px 8px;border:1px solid transparent;border-radius:11px;
display:grid;grid-template-columns:33px minmax(0,1fr) auto;gap:9px;align-items:center;color:#8f9db0;
}
.builder-page-item:hover{background:#ffffff05;color:#dbe4ef}
.builder-page-item.active{background:#7c3aed11;border-color:#7c3aed35;color:#fff}
.builder-page-icon,.builder-section-icon,.builder-field-type{
width:32px;height:32px;border:1px solid #ffffff12;border-radius:9px;background:#ffffff05;
display:grid;place-items:center;color:#b7c1d1;font-size:11px;font-weight:900;
}
.builder-page-item span:nth-child(2),.builder-section-row a span:nth-child(2),.builder-field-row a span:nth-child(2){min-width:0}
.builder-page-item strong,.builder-section-row strong,.builder-field-row strong{
display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.builder-page-item small,.builder-section-row small,.builder-field-row small{
display:block;margin-top:2px;color:#647389;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.builder-page-item em{font-style:normal;color:#fbbf24;font-size:7px;font-weight:900;text-transform:uppercase}
.builder-divider{height:1px;background:var(--line);margin:15px -2px}
.builder-section-row,.builder-field-row{
min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;align-items:center;
border:1px solid transparent;border-radius:11px;
}
.builder-section-row>a,.builder-field-row>a{
min-width:0;min-height:48px;padding:6px 5px 6px 7px;display:grid;
grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:center;color:#8e9caf;
}
.builder-section-row:hover,.builder-field-row:hover{background:#ffffff04}
.builder-section-row.active,.builder-field-row.active{background:#7c3aed10;border-color:#7c3aed35}
.builder-section-row.active>a,.builder-field-row.active>a{color:#fff}
.builder-section-row.muted-row{opacity:.55}
.builder-order-actions{display:flex;gap:2px;padding-right:4px}
.builder-order-actions form{display:block}
.builder-order-actions button{
width:25px;height:25px;padding:0;border:0;border-radius:7px;background:transparent;color:#5f6d81;
cursor:pointer;font-size:10px;
}
.builder-order-actions button:hover:not(:disabled){background:#ffffff09;color:#fff}
.builder-order-actions button:disabled{opacity:.22;cursor:default}
.builder-add-section{width:100%;margin-top:10px;min-height:37px;font-size:10px}
.builder-empty-small{
padding:18px 11px;border:1px dashed #ffffff14;border-radius:11px;color:#6f7d90;
font-size:9px;line-height:1.6;text-align:center;
}
.builder-mini-pop{position:relative}
.builder-mini-pop>summary{list-style:none}
.builder-mini-pop>summary::-webkit-details-marker{display:none}
.builder-pop-form{
position:absolute;right:0;top:38px;z-index:40;width:270px;padding:14px;border:1px solid #ffffff18;
border-radius:14px;background:#0d1627;box-shadow:0 20px 60px #000b;display:grid;gap:10px;
}
.builder-pop-form label{display:grid;gap:5px;color:#aeb9c8;font-size:9px;font-weight:800}
.builder-pop-form .input,.builder-pop-form .select{font-size:11px}
.builder-inspector-form{display:block}
.builder-inspector-head{
min-height:48px;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line);
}
.builder-inspector-head h3{margin:4px 0 0;font-size:15px}
.builder-inspector-form .field{margin:12px 0}
.builder-inspector-form .field label{font-size:10px;margin-bottom:6px}
.builder-inspector-form .input,.builder-inspector-form .select,.builder-inspector-form .textarea{font-size:11px;padding:10px 11px}
.builder-inspector-form .textarea{min-height:95px}
.builder-inspector-form .grid2{grid-template-columns:1fr 1fr;gap:0 8px}
.builder-visible{
display:flex;align-items:center;gap:6px;color:#8492a6;font-size:9px;font-weight:800;white-space:nowrap;
}
.builder-visible input{width:auto}
.builder-inspector-actions{margin-top:16px}
.builder-inspector-actions .btn,.builder-inspector-form>.btn{width:100%;font-size:10px}
.builder-inspector-separator{height:1px;background:var(--line);margin:18px 0}
.builder-danger-zone{margin-top:20px;padding-top:15px;border-top:1px solid #ef444424}
.builder-danger-zone .btn{width:100%;font-size:10px}
.builder-empty-inspector{
min-height:260px;display:grid;place-content:center;text-align:center;padding:30px;color:#728096;
}
.builder-empty-inspector strong{color:#d4dbe6;font-size:13px}.builder-empty-inspector p{font-size:10px;line-height:1.6}
.builder-library{
width:min(920px,94vw);max-width:none;padding:0;border:1px solid #ffffff1c;border-radius:20px;
background:#09111f;color:#fff;box-shadow:0 30px 100px #000c;
}
.builder-library::backdrop{background:#000b;backdrop-filter:blur(6px)}
.builder-library-shell{max-height:min(82vh,800px);display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
.builder-library-shell>header{
padding:18px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;
}
.builder-library-shell h2{margin:5px 0 4px;font-size:24px}.builder-library-shell header p{margin:0;color:#8290a4;font-size:10px}
.builder-library-close{
width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:#ffffff05;color:#fff;
font-size:22px;cursor:pointer;
}
.builder-library-grid{overflow:auto;padding:18px 20px;display:grid;gap:22px}
.builder-library-grid section h3{margin:0 0 9px;font-size:10px;color:#8190a5;text-transform:uppercase;letter-spacing:.1em}
.builder-library-grid section>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.builder-library-card button{
width:100%;min-height:112px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#ffffff03;
color:#fff;text-align:left;cursor:pointer;display:grid;align-content:start;gap:7px;
}
.builder-library-card button:hover{border-color:#8b5cf65a;background:#7c3aed0b}
.builder-library-card button>span{
width:30px;height:30px;border-radius:9px;background:#7c3aed17;color:#c4b5fd;display:grid;place-items:center;font-weight:900;
}
.builder-library-card strong{font-size:11px}.builder-library-card small{color:#77869a;font-size:9px;line-height:1.45}
/* Forms workspace */
.builder-forms-workspace{grid-template-columns:278px minmax(420px,1fr) 356px}
.builder-form-canvas{min-width:0;height:100%;overflow:auto;padding:22px;background:#070d18}
.builder-form-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:18px}
.builder-form-head h2{margin:5px 0 5px;font-size:25px}.builder-form-head p{margin:0;color:#8492a7;font-size:10px}
.builder-field-list{display:grid;gap:7px;max-width:860px;margin:auto}
.builder-field-row{
min-height:61px;border:1px solid var(--line);background:#0c1424;border-radius:13px;padding:3px;
}
.builder-field-row>a{min-height:52px;padding:7px 9px}
.builder-field-type{font-size:8px;color:#c4b5fd;background:#7c3aed10}
.builder-form-empty,.builder-empty-center{
min-height:250px;border:1px dashed #ffffff18;border-radius:16px;display:grid;place-content:center;
gap:5px;text-align:center;color:#78869a;
}
.builder-form-empty strong,.builder-empty-center strong{color:#d9e1ec;font-size:14px}.builder-form-empty span,.builder-empty-center p{font-size:10px}
.builder-form-preview{
max-width:720px;margin:28px auto 0;padding:20px;border:1px solid var(--line);border-radius:17px;background:#0c1424;
}
.builder-form-preview>.eyebrow{display:block;margin-bottom:12px}
.builder-form-preview .vb-form{display:grid;gap:11px}
.builder-form-preview .vb-field{display:grid;gap:5px;color:#cdd5df;font-size:10px;font-weight:800}
.builder-form-preview .vb-field input,.builder-form-preview .vb-field select,.builder-form-preview .vb-field textarea{
width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:#070d18;color:#fff;
}
.builder-form-preview .vb-field textarea{min-height:90px}
.builder-form-preview .vb-btn{min-height:39px;border:0;border-radius:10px;background:#7c3aed;color:#fff;font-weight:850}
.builder-field-library-grid{
overflow:auto;padding:20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;
}
.builder-field-library-grid button{
width:100%;min-height:75px;border:1px solid var(--line);border-radius:13px;background:#ffffff03;color:#fff;
display:flex;align-items:center;gap:11px;padding:12px;cursor:pointer;text-align:left;
}
.builder-field-library-grid button:hover{border-color:#7c3aed55;background:#7c3aed0c}
.builder-field-library-grid button span{
width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#7c3aed16;color:#c4b5fd;
font-size:8px;font-weight:900;
}
.builder-field-library-grid button strong{font-size:10px}
/* Design */
.builder-design-layout{
min-height:calc(100vh - 198px);display:grid;grid-template-columns:390px minmax(0,1fr);background:#070d18;
}
.builder-design-panel{padding:25px;border-right:1px solid var(--line);background:#09111f;overflow:auto}
.builder-design-panel h2{margin:6px 0 6px;font-size:26px}.builder-design-panel>p{font-size:11px;line-height:1.6}
.builder-color-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:22px 0}
.builder-color-field{
min-height:72px;padding:11px;border:1px solid var(--line);border-radius:12px;background:#ffffff03;
}
.builder-color-field>span{display:block;margin-bottom:8px;color:#aeb9c8;font-size:9px;font-weight:800}
.builder-color-field>div{display:flex;align-items:center;gap:8px}
.builder-color-field input[type=color]{width:31px;height:31px;padding:0;border:0;border-radius:8px;background:transparent;cursor:pointer}
.builder-color-field code{color:#758398;font-size:9px}
.builder-range{width:100%}
.builder-design-panel .btn{width:100%;margin-top:10px}
.builder-design-preview{min-width:0;display:grid;grid-template-rows:48px minmax(0,1fr)}
/* ChatGPT tab */
.builder-chatgpt-layout{min-height:calc(100vh - 198px);padding:34px;overflow:auto;background:#070d18}
.builder-chatgpt-hero{
max-width:980px;margin:auto;padding:34px;border:1px solid var(--line);border-radius:22px;
background:radial-gradient(circle at 90% 10%,#2563eb1d,transparent 28%),radial-gradient(circle at 10% 0,#7c3aed24,transparent 30%),#0a1221;
}
.builder-chatgpt-hero h2{margin:8px 0 11px;font-size:36px;letter-spacing:-1.4px}
.builder-chatgpt-hero p{max-width:760px;color:#95a3b6;line-height:1.7}
.builder-chatgpt-actions{display:flex;gap:9px;margin-top:20px}
.builder-prompt-grid{
max-width:980px;margin:16px auto;display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
.builder-prompt-grid article{padding:19px;border:1px solid var(--line);border-radius:16px;background:#0a1221}
.builder-prompt-grid article>span{
width:30px;height:30px;border-radius:9px;background:#7c3aed17;color:#c4b5fd;display:grid;place-items:center;font-size:9px;font-weight:900;
}
.builder-prompt-grid strong{display:block;margin:14px 0 7px}.builder-prompt-grid p{margin:0;color:#8391a5;font-size:10px;line-height:1.65}
.builder-chatgpt-note{max-width:980px;margin:0 auto}
/* Builder responsive */
@media(max-width:1280px){
.builder-workspace,.builder-forms-workspace{grid-template-columns:240px minmax(360px,1fr) 320px}
.builder-right{padding:13px}
.starter-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1050px){
.builder-workspace,.builder-forms-workspace{grid-template-columns:220px minmax(340px,1fr)}
.builder-right{position:fixed;right:0;top:114px;bottom:0;width:min(360px,92vw);z-index:115;box-shadow:-18px 0 60px #000a;display:none}
.builder-section-row.active~.builder-right{display:block}
}
@media(max-width:900px){
.builder-page{width:100vw}
.builder-top{padding:10px 14px}.builder-back{width:auto;padding:0 10px}
.builder-workspace,.builder-forms-workspace{height:auto;min-height:calc(100vh - 178px);grid-template-columns:1fr}
.builder-left{height:auto;max-height:none;border-right:0;border-bottom:1px solid var(--line)}
.builder-canvas,.builder-form-canvas{min-height:680px;height:72vh}
.builder-right{position:static;width:auto;display:block;height:auto;border-left:0;border-top:1px solid var(--line);box-shadow:none}
.builder-page-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.builder-section-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.builder-design-layout{grid-template-columns:1fr}.builder-design-panel{border-right:0;border-bottom:1px solid var(--line)}
.builder-design-preview{min-height:650px}
.builder-start-grid,.builder-form-start-grid{grid-template-columns:1fr}
.starter-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
.builder-new-site.authbox.new-site-box{padding:20px}
.new-site-intro{display:block}.new-site-step-dots{margin-top:16px}
.builder-new-site .site-wizard-head h2{font-size:25px}
.starter-gallery,.form-preset-grid{grid-template-columns:1fr}
.starter-template-area{padding:13px}
.starter-card-visual.template-preview{height:126px}
.builder-top{align-items:flex-start;flex-direction:column}
.builder-top-copy{width:100%}.builder-top-actions{width:100%;justify-content:flex-start}
.builder-top-actions .btn{flex:1}
.builder-tabs{padding:0 10px}
.builder-page-list,.builder-section-list{grid-template-columns:1fr}
.builder-canvas,.builder-form-canvas{min-height:600px}
.builder-preview-shell{padding:9px}
.builder-preview-shell iframe{min-height:560px}
.builder-library-grid section>div,.builder-field-library-grid{grid-template-columns:1fr 1fr}
.builder-prompt-grid{grid-template-columns:1fr}
.builder-chatgpt-layout{padding:18px}
.builder-chatgpt-hero{padding:24px}.builder-chatgpt-hero h2{font-size:29px}
}
@media(max-width:460px){
.builder-library-grid section>div,.builder-field-library-grid{grid-template-columns:1fr}
.builder-device-toggle button{padding:0 7px}
.wizard-slide-actions{flex-direction:column-reverse}
.wizard-slide-actions .btn{width:100%}
}
/* Builder interaction hardening · 2026-10-03 */
.builder-page-row{
min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px;align-items:center;
}
.builder-page-row .builder-page-item{width:100%}
.builder-page-row>.builder-order-actions{padding-right:0}
.builder-section-row[draggable=true],.builder-field-row[draggable=true]{cursor:grab}
.builder-section-row.dragging,.builder-field-row.dragging{
opacity:.48;border-color:#8b5cf6;background:#7c3aed14;cursor:grabbing;
}
.builder-drag-note{
display:block;margin:7px 2px 0;color:#5f6e83;font-size:8px;line-height:1.5;
}
.builder-field-drag-note{max-width:860px;margin:8px auto 0}
.builder-responsive-options{
display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px;
}
.builder-responsive-options .toggle-row{
min-height:42px;padding:8px 9px;border:1px solid var(--line);border-radius:10px;
background:#ffffff03;font-size:9px;color:#9aa8bb;
}
.builder-secondary-actions{margin-top:16px}
.builder-secondary-actions .btn{width:100%;font-size:10px}
@media(max-width:1050px) and (min-width:901px){
.builder-workspace,.builder-forms-workspace{
height:auto;min-height:calc(100vh - 198px);
grid-template-columns:230px minmax(420px,1fr);
overflow:visible;
}
.builder-left{height:auto;max-height:calc(100vh - 198px)}
.builder-canvas,.builder-form-canvas{min-height:720px;height:calc(100vh - 198px)}
.builder-right{
position:static;display:block;width:auto;height:auto;grid-column:1/-1;
border-left:0;border-top:1px solid var(--line);box-shadow:none;
}
}
@media(max-width:680px){
.builder-responsive-options{grid-template-columns:1fr}
}
.builder-history-layout{
min-height:calc(100vh - 198px);padding:28px;overflow:auto;background:#070d18;
}
.builder-history-head{
max-width:980px;margin:0 auto 16px;padding:23px 24px;border:1px solid var(--line);border-radius:18px;
background:linear-gradient(145deg,#0b1425,#09111f);display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
}
.builder-history-head h2{margin:6px 0 7px;font-size:27px;letter-spacing:-.7px}
.builder-history-head p{margin:0;max-width:700px;color:#8492a6;font-size:10px;line-height:1.65}
.builder-history-count{
min-width:105px;padding:13px;border:1px solid #7c3aed32;border-radius:14px;background:#7c3aed0b;text-align:center;
}
.builder-history-count strong{display:block;font-size:27px;color:#ddd6fe}
.builder-history-count span{display:block;color:#81739f;font-size:8px;text-transform:uppercase;letter-spacing:.08em}
.builder-history-list{max-width:980px;margin:auto;display:grid;gap:8px}
.builder-history-row{
min-height:70px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#0a1221;
display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;
}
.builder-history-index{
width:36px;height:36px;border-radius:10px;background:#ffffff05;border:1px solid #ffffff10;
display:grid;place-items:center;color:#8492a7;font-size:9px;font-weight:900;
}
.builder-history-row strong{display:block;font-size:11px;color:#e7ecf3}
.builder-history-row small{display:block;margin-top:3px;color:#69788d;font-size:8px}
.builder-history-row .btn{min-width:110px;font-size:9px}
@media(max-width:680px){
.builder-history-layout{padding:16px}
.builder-history-head{display:block}.builder-history-count{margin-top:15px;width:110px}
.builder-history-row{grid-template-columns:34px minmax(0,1fr)}
.builder-history-row form{grid-column:1/-1}.builder-history-row .btn{width:100%}
}
/* Builder media controls · gallery + video upload */
.builder-media-block{
margin:12px 0 4px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#ffffff025;
}
.builder-media-block-head{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px;
}
.builder-media-block-head strong{display:block;font-size:10px;color:#e5eaf1}
.builder-media-block-head small{display:block;margin-top:3px;color:#6f7d91;font-size:8px}
.builder-media-empty{
min-height:70px;margin-bottom:12px;border:1px dashed #ffffff16;border-radius:11px;
display:grid;place-items:center;color:#68778c;font-size:9px;text-align:center;padding:10px;
}
.builder-gallery-editor-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:12px}
.builder-gallery-editor-item{
display:grid;grid-template-columns:72px minmax(0,1fr);gap:9px;align-items:center;
padding:8px;border:1px solid #ffffff10;border-radius:11px;background:#070d18;
}
.builder-gallery-editor-item img{
width:72px;height:58px;display:block;object-fit:cover;border-radius:8px;background:#050a13;
}
.builder-gallery-editor-item>div{min-width:0;display:grid;gap:6px}
.builder-gallery-editor-item label{display:grid;gap:4px;color:#8997aa;font-size:8px;font-weight:800}
.builder-gallery-editor-item .input{min-height:34px!important;padding:7px 8px!important;font-size:9px!important}
.builder-gallery-remove{display:flex!important;grid-template-columns:auto 1fr!important;align-items:center;gap:6px!important;color:#d9959b!important}
.builder-gallery-remove input{width:auto!important;margin:0}
.builder-media-advanced{
margin-top:11px;border-top:1px solid #ffffff0c;padding-top:10px;
}
.builder-media-advanced>summary{
cursor:pointer;color:#8e9caf;font-size:9px;font-weight:850;list-style:none;
}
.builder-media-advanced>summary::-webkit-details-marker{display:none}
.builder-media-advanced>summary:after{content:" +";color:#a78bfa}
.builder-media-advanced[open]>summary:after{content:" −"}
.builder-video-current{margin-bottom:12px}
.builder-video-current video{
display:block;width:100%;max-height:210px;border-radius:10px;background:#000;object-fit:contain;
}
.builder-video-current small{display:block;margin-top:6px;color:#738197;font-size:8px}
.builder-media-or{
display:flex;align-items:center;gap:8px;margin:11px 0;color:#657389;font-size:7px;font-weight:900;letter-spacing:.12em;
}
.builder-media-or:before,.builder-media-or:after{content:"";height:1px;background:#ffffff0d;flex:1}