@charset "UTF-8";
:root{--navy:#111e34;--ink:#17243b;--muted:#748095;--blue:#255cf5;--line:#e5e9ef;--paper:#f6f7f9;--green:#23866a;--amber:#916014;--radius:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px;line-height:1.5}button,input{font:inherit}button,a,input{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.6}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,.table-scroll:focus-visible{outline:3px solid #7ba5ff;outline-offset:4px}button{transition:background .16s,transform .16s}button:active{transform:translateY(1px)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:-60px;left:20px;background:white;padding:12px;z-index:100}.skip-link:focus{top:10px}.sidebar{position:fixed;inset:0 auto 0 0;width:242px;background:var(--navy);color:#c1cbdb;padding:40px 22px 24px;display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:12px;padding:0 8px;color:#fff;font-size:27px;font-weight:700;letter-spacing:-1px;text-decoration:none;user-select:none}.brand small{display:block;color:#93a1ba;font-size:11px;letter-spacing:.7px;font-weight:400;margin-top:1px}.brand-mark{display:grid;grid-template-columns:12px 12px;gap:4px;transform:rotate(-8deg)}.brand-mark i{width:12px;height:12px;border:2px solid #91aaff;border-radius:3px}.brand-mark i:last-child{background:#6d91ff;border-color:#6d91ff}.brand-mark.statscan-mark{width:36px;height:36px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(0.34,1.56,0.64,1);transform:none}.brand:hover .brand-mark.statscan-mark{transform:scale(1.06)}.brand-mark.statscan-mark svg{width:100%;height:100%;display:block}.brand-text{display:flex;flex-direction:column;line-height:1.15}.brand-name{font-size:21px;font-weight:750;letter-spacing:-.6px;color:#fff;display:inline-flex;align-items:center;line-height:1}.brand-scan{background:linear-gradient(135deg,#38bdf8 0%,#3b82f6 50%,#818cf8 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:800}.brand-badge-pro{display:inline-block;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;font-size:8px;font-weight:800;padding:1px 5px;border-radius:4px;margin-left:6px;letter-spacing:.8px;text-transform:uppercase;line-height:1.2;box-shadow:0 2px 6px rgba(37,99,235,.35);vertical-align:middle}.brand-sub{display:block;color:#94a3b8;font-size:10px;letter-spacing:.3px;font-weight:400;margin-top:3px}.sidebar-section{font-size:9px;letter-spacing:1.6px;color:#8190aa;margin:56px 12px 18px}.nav-item{display:flex;gap:12px;align-items:center;padding:13px 14px;border-radius:9px;margin:5px 0;font-size:13px}.nav-item>span:first-child{font-size:21px;line-height:1;color:#92a4c2}.nav-item:hover{background:#1b2b45;color:#fff}.nav-item.active{background:#263b60;color:#fff}.nav-item.active>span:first-child{color:#a9bdff}.nav-arrow{margin-left:auto;font-size:16px}.nav-count{font-size:10px;margin-left:auto;background:#23334e;padding:1px 7px;border-radius:4px}.sidebar-note{margin-top:auto;padding:24px 10px 0;border-top:1px solid #2a374d;font-size:12px;color:#d7dfeb}.status-dot{display:inline-block;width:6px;height:6px;background:#6ac6a5;border-radius:50%;margin-right:7px}.sidebar-note p{font-size:11px;line-height:1.8;color:#8595b0;margin:12px 0 28px}.sidebar-bottom{font-size:8px;letter-spacing:1.1px;color:#8190aa}.sidebar-bottom span{display:block;letter-spacing:.3px;margin-top:6px}.workspace{margin-left:242px;min-width:0}.topbar{height:78px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;padding:0 46px;background:#fafbfc}.breadcrumb{font-size:12px;color:var(--muted)}.breadcrumb span{margin:0 16px;color:#c3c9d2}.breadcrumb strong{color:var(--ink);font-weight:500}.workspace-badge{border:1px solid #e0e5ec;background:white;border-radius:6px;padding:6px 11px;font-size:10px;letter-spacing:.2px}.workspace-badge .status-dot{background:var(--blue);width:5px;height:5px}main{max-width:1400px;padding:0 46px;margin:auto;min-width:0}.hero{display:flex;justify-content:space-between;align-items:center;min-height:298px;padding:38px 0 34px;gap:25px}.eyebrow{font-size:9px;letter-spacing:1.65px;font-weight:700;color:var(--muted);margin:0 0 12px}h1{font-size:clamp(37px,3.9vw,58px);line-height:1.07;letter-spacing:-2.8px;margin:0;font-weight:750}h1 span{color:var(--blue)}.hero-copy{color:#717e91;font-size:13px;line-height:1.8;margin:18px 0 0}.hero-art{position:relative;flex:0 1 330px;height:222px;overflow:hidden}.art-grid{position:absolute;inset:20px 0 0;background-image:linear-gradient(#e4e8ef 1px,transparent 1px),linear-gradient(90deg,#e4e8ef 1px,transparent 1px);background-size:30px 30px;opacity:.8}.art-label{position:absolute;top:0;left:0;font-size:8px;letter-spacing:1.45px;color:#8591a4}.art-frame{position:absolute;border:1.5px solid #94a9e9;border-radius:18px;width:122px;height:122px;transform:rotate(-18deg);background:#f6f7f9}.frame-one{left:55px;top:72px}.frame-two{left:94px;top:53px;border-color:#5980eb;background:#edf1fd}.frame-three{left:135px;top:33px;background:#265cf5;border-color:#265cf5;box-shadow:0 18px 30px #255cf519}.frame-three:after{content:"↗";position:absolute;inset:10px;color:white;text-align:center;line-height:90px;font-size:63px;font-weight:300}.art-axis{position:absolute;right:0;bottom:1px;font-size:9px;letter-spacing:2px;color:#8491a5}.art-plus{position:absolute;left:20px;top:39px;font-size:23px;color:#8c9abb}.staging-banner{display:flex;align-items:center;gap:13px;border:1px solid #e8dec9;background:#fcf9f1;padding:17px 20px;border-radius:11px;margin:0 0 32px}.banner-icon{border:1px solid #bba06f;color:var(--amber);border-radius:50%;font-size:12px;line-height:19px;width:21px;flex-shrink:0;text-align:center}.staging-banner strong{font-size:12px;font-weight:650;color:#79602f}.staging-banner p{margin:3px 0 0;color:#8b7958;font-size:11px}.small-tag{margin-left:auto;white-space:nowrap;letter-spacing:1px;font-size:8px;color:#9f8d6c}.section{scroll-margin-top:22px;margin-bottom:32px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:23px}.section-heading .eyebrow{font-size:8px;margin-bottom:7px}h2{font-size:23px;letter-spacing:-.75px;line-height:1.25;margin:0;font-weight:650}h3{font-size:16px;margin:0;letter-spacing:-.3px}.section-hint{font-size:10px;color:#9aa3b1}.mode-options{padding:0;border:0;margin:0 0 25px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.mode-card{border:1px solid #e2e7ee;background:#fcfcfd;border-radius:10px;padding:20px 16px;display:flex;align-items:center;gap:12px;position:relative;cursor:pointer;min-width:0}.mode-card.selected{border-color:var(--blue);background:#f4f7ff;box-shadow:0 0 0 1px #255cf50d}.mode-card input{position:absolute;opacity:0;width:1px;height:1px}.mode-card:focus-within{outline:3px solid #aac1ff;outline-offset:3px}.period-options{padding:0;border:0;margin:0 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}.period-card{border:1px solid #e2e7ee;background:#fcfcfd;border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:12px;position:relative;cursor:pointer;min-width:0}.period-card.selected{border-color:var(--blue);background:#f4f7ff;box-shadow:0 0 0 1px #255cf50d}.period-card input{position:absolute;opacity:0;width:1px;height:1px}.period-card:focus-within{outline:3px solid #aac1ff;outline-offset:3px}.period-content{display:flex;flex-direction:column;gap:2px;min-width:0}.period-content strong{font-size:12px;font-weight:650}.period-content small{font-size:10px;color:#8690a1}.badge-period{display:inline-block;padding:2px 8px;border-radius:4px;background:#eef3fe;color:var(--blue);font-weight:600;font-size:11px}.mode-icon{color:#7e8ba2;background:#eef1f6;width:35px;height:38px;display:grid;place-items:center;border-radius:7px;font-size:24px;flex-shrink:0}.selected .mode-icon{background:#e4ecff;color:var(--blue)}.mode-content{display:flex;flex-direction:column;gap:6px;min-width:0}.mode-content strong{font-size:12px;font-weight:650}.mode-content>span{font-size:10px;color:#8690a1;max-width:175px}.mode-price{margin-left:auto;text-align:right;white-space:nowrap;align-self:center}.mode-price strong{font-size:19px;letter-spacing:-.8px;font-weight:650}.mode-price small{display:block;color:#8c95a5;font-size:9px}.radio-visual{position:absolute;top:10px;right:10px;width:8px;height:8px;border:1px solid #c5cddc;border-radius:50%}.selected .radio-visual{background:var(--blue);border-color:var(--blue)}.input-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field label{display:block;font-size:11px;font-weight:600;margin-bottom:8px}.input-wrap{display:flex;align-items:center;border:1px solid #dce2eb;background:#fff;border-radius:7px;min-height:46px;overflow:hidden}.input-wrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px #255cf512}.input-wrap>span{font-size:9px;letter-spacing:1px;color:#9ba5b6;border-right:1px solid var(--line);padding:0 13px}.input-wrap input{width:100%;min-width:0;border:0;outline:none!important;padding:12px;color:var(--ink);font-size:12px}.input-wrap input::placeholder{color:#a4acba}.catalog-row{display:flex;gap:12px;align-items:flex-start;margin:14px 0 25px}.catalog-label{white-space:nowrap;font-size:10px;color:#8b96a7;padding-top:5px}.catalog-pills{display:flex;flex-wrap:wrap;gap:6px;min-width:0}.catalog-pill{border:1px solid #e5e9f0;border-radius:5px;background:#f9fafc;padding:4px 8px;font-size:10px;color:#6b7b94;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.catalog-pill:hover{color:var(--blue);border-color:#a6bcf8;background:#f0f4ff}.catalog-pills .muted{font-size:11px;padding-top:3px}.builder-bottom{display:flex;align-items:flex-start;justify-content:space-between;border-top:1px solid #edf0f4;padding-top:21px;gap:20px}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:28px;border:0;border-radius:7px;background:var(--blue);padding:13px 18px;color:white;font-size:12px;font-weight:550;min-height:46px}.primary-button:hover{background:#174add}.primary-button span{font-size:18px;line-height:1}.button-note{font-size:9px;color:#8994a5;margin:10px 0 0}.privacy-note{display:flex;gap:9px;color:#93a0b3;font-size:10px;line-height:1.8;padding-top:3px}.privacy-note>span:first-child{font-size:22px;color:#96a3bb}.message{padding:15px 18px;margin-bottom:20px;background:#fff0ee;border:1px solid #efd1cd;border-radius:9px;color:#984c40;overflow-wrap:anywhere}.report-meta{color:var(--muted);font-size:11px;margin:-9px 0 20px;display:flex;flex-wrap:wrap;gap:8px 20px}.snapshot-tag{font-size:10px;padding:6px 9px;background:#eaf6f1;color:#317b65;border-radius:5px}.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr));gap:18px}.product-card{border:1px solid var(--line);border-radius:12px;overflow:hidden}.product-identity{display:flex;gap:15px;padding:20px;align-items:center;background:#fafbfc;min-height:110px}.product-image{width:60px;height:70px;object-fit:contain;background:white;border-radius:7px;flex-shrink:0}.product-placeholder{width:52px;height:60px;display:grid;place-items:center;flex-shrink:0;background:#eef2f8;color:#91a0b8;border-radius:8px;font-size:25px}.product-identity h3{font-size:13px;line-height:1.5;margin:4px 0;overflow-wrap:anywhere}.product-sku{font-size:10px;color:#8290a5}.product-link{font-size:10px;color:var(--blue)}.product-dates{padding:15px 20px 0;font-size:10px;color:#8490a3;line-height:1.9}.metric-grid{padding:18px 20px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}.metric-label{font-size:9px;color:#7d899b;display:block;min-height:27px}.metric-value{font-size:23px;letter-spacing:-.9px;line-height:1.3;font-weight:650;display:block;overflow-wrap:anywhere}.metric-secondary .metric-value{font-size:17px;letter-spacing:-.4px}.metric-primary:first-child .metric-value{color:var(--blue)}.warning{background:#fcf8ef;border:1px solid #eee3ce;border-radius:7px;color:#8b7243;padding:11px 14px;font-size:11px;line-height:1.6;margin-bottom:12px;overflow-wrap:anywhere}.product-card>.warning{margin:0 15px 15px}.insights{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:20px 0}.insight{border-left:3px solid #5b82e6;background:#f5f7fd;padding:15px 17px;border-radius:0 7px 7px 0}.insight strong{display:block;color:#5372b6;font-size:9px;text-transform:uppercase;letter-spacing:.9px}.insight p{font-size:12px;line-height:1.7;margin:7px 0;overflow-wrap:anywhere}.insight small{display:block;color:#7c89a0;font-size:10px;overflow-wrap:anywhere}.query-panel{margin-top:26px}.query-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.muted{color:var(--muted)}.query-heading p{font-size:10px;margin:4px 0 0}.search-field{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:6px;padding:7px 10px;color:#8996ab}.search-field>span[aria-hidden]{font-size:21px;line-height:1}.search-field input{border:none;outline:none;width:160px;min-width:0;font-size:11px;color:var(--ink);background:transparent}.table-scroll{max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:9px}table{border-collapse:collapse;width:100%;font-size:11px;text-align:right;white-space:nowrap}thead{background:#f7f9fc}th{font-size:10px;font-weight:500;color:#77869b}th,td{padding:13px 15px;border-bottom:1px solid #edf0f5}th:first-child,td:first-child{text-align:left}td:first-child{white-space:normal;min-width:180px;max-width:310px;font-weight:500}tr:last-child td{border-bottom:0}tbody tr:hover{background:#fafbff}th button{background:none;border:0;padding:0;font-size:inherit;color:inherit;white-space:nowrap}th[aria-sort="ascending"] button,th[aria-sort="descending"] button{color:var(--blue)}.table-footnote{font-size:9px;color:#919bac;margin:12px 0 0}.history-section{padding-bottom:10px}.text-button{border:0;background:none;color:#7888a0;font-size:11px;padding:7px}.text-button:hover{color:var(--blue)}.text-button span{margin-left:7px;font-size:16px}.empty-state{display:flex;align-items:center;gap:18px;border-top:1px solid #eef0f5;padding:25px 0 28px}.empty-state>span{font-size:29px;color:#b1bccd}.empty-state strong{font-size:12px;font-weight:500;color:#738098}.empty-state p{font-size:11px;color:#9aa4b3;margin:5px 0 0}.history-item{width:100%;text-align:left;border:0;border-top:1px solid #edf0f4;background:white;padding:17px 2px;display:flex;align-items:center;gap:14px;min-width:0;color:var(--ink)}.history-item:hover{background:#f8faff}.history-item.current{color:var(--blue)}.history-icon{background:#f0f4fa;color:#7288af;border-radius:7px;padding:8px 11px;font-size:18px}.history-info{display:flex;flex-direction:column;gap:4px;min-width:0}.history-info strong{font-size:12px;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-info small{font-size:10px;color:#96a0b0}.history-status{margin-left:auto;font-size:9px;color:var(--green);white-space:nowrap}.history-arrow{color:#98a6bc;font-size:18px}.page-footer{display:flex;justify-content:space-between;gap:20px;padding:0 0 30px;font-size:9px;color:#98a2b2}.page-footer strong{color:#7c899e;font-weight:550}body.is-busy #report-form{opacity:.75}section{min-width:0}@media(min-width:1550px){main{padding:0 65px}.hero{min-height:340px}.hero-art{margin-right:50px}.section{padding:30px 34px}}@media(max-width:1150px){.sidebar{width:205px;padding-left:15px;padding-right:15px}.workspace{margin-left:205px}main{padding:0 28px}.topbar{padding:0 28px}.mode-card{flex-wrap:wrap;padding:18px 13px}.mode-content{flex:1}.mode-price{width:100%;display:flex;align-items:baseline;gap:6px;text-align:left;margin-left:47px}.mode-content>span{max-width:none}.hero-art{flex-basis:260px}.frame-one{left:20px}.frame-two{left:59px}.frame-three{left:100px}.privacy-note{display:none}.small-tag{display:none}}@media(max-width:800px){.sidebar{position:relative;width:100%;padding:18px 22px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:20px}.brand{padding:0;font-size:23px;gap:10px}.brand small{font-size:9px}.sidebar-section,.sidebar-note,.nav-arrow,.nav-count{display:none}.sidebar nav{display:flex;gap:4px}.nav-item{font-size:11px;padding:9px 10px;gap:6px;margin:0}.nav-item>span:first-child{font-size:16px}.workspace{margin-left:0}.topbar{height:58px;padding:0 24px}main{padding:0 24px}.hero{min-height:280px}.hero-art{flex-basis:250px}.section{padding:23px}.page-footer{font-size:8px}}@media(max-width:560px){.sidebar{padding:17px 18px;flex-wrap:wrap;gap:17px}.brand{font-size:25px}.brand small{font-size:9px}.sidebar nav{width:100%;justify-content:space-between;gap:5px}.nav-item{flex:1;justify-content:center;padding:9px 6px;font-size:10px;white-space:nowrap}.topbar{padding:0 19px;height:54px}.breadcrumb{font-size:10px}.breadcrumb span{margin:0 8px}.workspace-badge{font-size:8px;padding:4px 6px}main{padding:0 17px}.hero{min-height:0;padding:30px 0 26px;position:relative}.hero .eyebrow{font-size:7px;letter-spacing:1.1px}h1{font-size:43px;letter-spacing:-2.2px}.hero-copy{font-size:11px;margin-top:14px}.hero-art{display:none}.staging-banner{padding:13px;gap:10px;margin-bottom:23px}.staging-banner strong{font-size:10px}.staging-banner p{font-size:10px;line-height:1.6}.section{padding:19px 16px;border-radius:12px;margin-bottom:23px}.section-heading{margin-bottom:18px}h2{font-size:20px}.section-hint{display:none}.mode-options{gap:10px;grid-template-columns:1fr;margin-bottom:20px}.mode-card{flex-wrap:nowrap;gap:10px;padding:18px 12px}.mode-content strong{font-size:11px}.mode-content>span{font-size:9px;max-width:175px}.mode-price{display:block;width:auto;margin-left:auto;align-self:center}.mode-price strong{font-size:17px}.mode-price small{font-size:8px}.mode-icon{width:30px;height:34px;font-size:21px}.input-grid{grid-template-columns:1fr}.catalog-row{gap:8px;margin-bottom:20px}.catalog-pill{max-width:180px;font-size:9px}.catalog-label{font-size:9px}.primary-button{width:100%;font-size:11px}.builder-bottom>div:first-child{width:100%}.button-note{font-size:8px;line-height:1.7}.query-heading{align-items:stretch;flex-direction:column}.search-field input{width:100%}.metric-grid{padding:17px 14px;gap:17px 9px}.metric-value{font-size:21px}.metric-label{font-size:8px}.product-identity{padding:15px}.snapshot-tag{font-size:8px}.report-meta{font-size:9px}.history-item{gap:9px}.history-info strong{font-size:10px}.history-info small{font-size:9px}.history-icon{padding:7px 9px}.history-status{font-size:8px}.page-footer{flex-direction:column;gap:6px;padding-bottom:22px}.empty-state p{font-size:10px}.empty-state strong{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Rich analytics report */
.products{display:grid;grid-template-columns:1fr;gap:22px}.product-card{overflow:hidden;border:1px solid #dfe5ee;box-shadow:0 14px 35px rgba(17,30,52,.055)}.product-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 24px 18px}.product-top .product-identity{padding:0;min-width:260px;flex:1}.product-name{min-width:0}.identity-facts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:7px;max-width:52%}.identity-fact{display:flex;flex-direction:column;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fafbfc;max-width:220px}.identity-fact small{font-size:8px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted)}.identity-fact b{font-size:10px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.snapshot-strip{display:flex;flex-wrap:wrap;gap:7px 18px;padding:10px 24px;background:#f7f9fc;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:9px;color:#637087}.snapshot-strip span:before{content:"•";color:#7899f6;margin-right:7px}.commercial-kpis{padding:21px 24px}.kpi-heading,.metric-section-heading,.position-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:13px}.kpi-heading h4,.metric-section-heading h4,.position-heading h4{font-size:11px;margin:0;color:var(--ink)}.kpi-heading p,.metric-section-heading p,.position-heading p{font-size:9px;color:var(--muted);margin:2px 0 0}.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:11px;overflow:hidden}.kpi{padding:16px 18px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start}.kpi:last-child{border-right:0}.kpi-value{font-size:25px;letter-spacing:-.8px;margin:4px 0 7px;line-height:1.15}.kpi-delta{font-size:9px;padding:3px 6px;border-radius:5px;background:#eef9f4;color:var(--green)}.kpi-delta.negative{color:#b0444f;background:#fff0f1}.kpi-delta.neutral{color:#788397;background:#f0f2f5}.analytics-sections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}.metric-section{padding:20px 19px;border-right:1px solid var(--line);min-width:0}.metric-section:last-child{border-right:0}.metric-section-heading{display:block;min-height:43px}.data-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}.datum{display:flex;flex-direction:column;gap:3px;padding:9px 5px 9px 0;border-bottom:1px solid #edf0f4;min-width:0}.datum:nth-child(odd){padding-right:8px}.datum-label{font-size:8px;color:var(--muted);line-height:1.3}.datum-value{font-size:11px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.datum-text{white-space:normal}.position-section{border-top:1px solid var(--line);padding:21px 24px;background:#fbfcfe}.position-heading{align-items:center}.position-summary{display:flex;gap:20px}.position-summary .datum{padding:0;border:0}.position-summary .datum-label{font-size:7px}.position-summary .datum-value{font-size:13px}.position-empty{margin:0;padding:17px;border:1px dashed #d5dce7;border-radius:9px;color:var(--muted);font-size:10px;text-align:center}.chart-legend{display:flex;flex-wrap:wrap;gap:7px 15px;margin:0 0 9px;font-size:8px;color:#5f6c81}.chart-legend span{display:flex;align-items:center;gap:5px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chart-legend i{width:16px;height:3px;border-radius:2px;background:#255cf5;flex:none}.chart-legend .series-1 i{background:#20a881}.chart-legend .series-2 i{background:#e89836}.chart-legend .series-3 i{background:#985ee5}.chart-legend .series-4 i{background:#df5b78}.position-chart{display:block;width:100%;height:auto;max-height:285px;overflow:visible}.position-chart .chart-grid{stroke:#e5eaf1;stroke-width:1}.position-chart .chart-axis-label{fill:#8a95a7;font-size:10px;font-family:inherit}.position-chart path{vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}.position-chart .series-average{stroke:#255cf5;stroke-width:3}.position-chart .series-1{stroke:#20a881;stroke-width:1.5}.position-chart .series-2{stroke:#e89836;stroke-width:1.5}.position-chart .series-3{stroke:#985ee5;stroke-width:1.5}.position-chart .series-4{stroke:#df5b78;stroke-width:1.5}.chart-note{font-size:8px;color:var(--muted);margin:5px 0 0}.query-summary{display:flex;flex-wrap:wrap;gap:9px;margin:2px 0 12px}.summary-chip{display:flex;align-items:baseline;gap:6px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:#fff}.summary-chip strong{font-size:16px}.summary-chip span{font-size:8px;color:var(--muted)}.summary-chip.market strong{color:#285fcf}.summary-chip.position strong{color:#23866a}.query-context-note{padding:10px 12px;margin-bottom:12px;border-left:3px solid #7196fb;background:#f3f6ff;font-size:9px;color:#647086}.query-context-note strong{color:#263853}.table-groups th{padding:7px 10px!important;background:#eef2f8!important;color:#69778d!important;font-size:7px!important;letter-spacing:.8px;text-align:center!important;text-transform:uppercase;border-right:1px solid #dfe5ee}.table-groups th:first-child{text-align:left!important}.query-row:hover td{background:#f8faff}.query-text{min-width:190px;max-width:310px;font-weight:600;color:#24344d}.detail-button{border:1px solid #ced8ea;border-radius:6px;background:white;color:#2954b7;font-size:8px;padding:5px 8px;white-space:nowrap}.detail-button:hover{background:#edf3ff}.query-detail-row>td{padding:0!important;background:#f6f8fb!important;border-bottom:1px solid #dce3ed}.query-detail{padding:17px 20px}.detail-heading{display:flex;justify-content:space-between;gap:14px;margin-bottom:12px;font-size:10px;font-weight:650}.detail-heading span{font-size:8px;color:var(--muted);font-weight:400}.ranking-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.ranking-card{padding:13px;border:1px solid #dde3ec;border-radius:9px;background:white}.ranking-card h5{font-size:9px;margin:0 0 9px;color:#263650}.ranking-card.leader-card{border-color:#d7c894;background:#fffdf6}.ranking-card.market-card{border-color:#cbd9f6;background:#f8faff}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}.detail-datum{display:flex;flex-direction:column;padding:6px 0;border-top:1px solid #edf0f4;min-width:0}.detail-datum span{font-size:7px;color:var(--muted)}.detail-datum strong{font-size:9px;overflow-wrap:anywhere}#queries-table td{white-space:nowrap}#queries-table .query-detail-row td{white-space:normal}
.source-limitations{margin:14px 24px 22px;border:1px solid #ead8ad;background:#fffaf0;border-radius:12px;overflow:hidden}.source-limitations summary{cursor:pointer;padding:12px 14px;color:#725018;font-size:10px;font-weight:700;list-style-position:inside}.source-limitations summary:hover{background:#fff6df}.source-limitations-list{display:grid;gap:7px;padding:0 12px 12px}.source-limitations-list .warning{background:#fff;border-color:#f0e3c5}
@media(max-width:1100px){.analytics-sections{grid-template-columns:1fr}.metric-section{border-right:0;border-bottom:1px solid var(--line)}.metric-section:last-child{border-bottom:0}.data-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.product-top{flex-direction:column}.identity-facts{justify-content:flex-start;max-width:100%}}
/* Competitor Analysis & Monetization Styles */
.competitor-panel{margin:24px 0;display:grid;gap:22px}
.battle-section{border:1px solid var(--line);border-radius:14px;background:#fff;padding:24px;box-shadow:0 6px 20px rgba(17,30,52,.04)}
.battle-section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.battle-section-heading h3{font-size:16px;font-weight:700;color:var(--ink);margin:0}
.battle-badge{font-size:10px;font-weight:600;padding:4px 10px;border-radius:6px;letter-spacing:.3px}
.badge-danger{background:#fff0f1;color:#b0444f}
.badge-warning{background:#fff9eb;color:#b7791f}
.badge-success{background:#eef9f4;color:#20a881}
.badge-info{background:#edf3ff;color:#255cf5}
.battle-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.battle-kpi-card{border:1px solid var(--line);border-radius:10px;padding:16px;background:#fbfcfe}
.battle-kpi-card span{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.battle-kpi-card strong{display:block;font-size:18px;margin:5px 0 2px;color:var(--ink)}
.battle-kpi-card small{font-size:10px;color:#606f85}
.seo-chips-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0}
.seo-chip{padding:14px 16px;border-radius:10px;border:1px solid var(--line);background:#fff}
.seo-chip strong{font-size:20px;display:block;margin-bottom:2px;letter-spacing:-.5px}
.seo-chip span{font-size:10px;color:var(--muted)}
.seo-chip.gap{border-color:#f8d7da;background:#fff9f9}
.seo-chip.gap strong{color:#dc3545}
.seo-chip.lead{border-color:#c3e6cb;background:#f8fff9}
.seo-chip.lead strong{color:#28a745}
.rec-list{display:grid;gap:12px;margin-top:14px}
.rec-item{border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:9px;background:#fff;padding:16px}
.rec-item.danger{border-left-color:#dc3545;background:#fffafa}
.rec-item.warning{border-left-color:#ffc107;background:#fffdf7}
.rec-item.success{border-left-color:#28a745;background:#f8fff9}
.rec-item.info{border-left-color:#17a2b8;background:#f7fcff}
.rec-header{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.rec-header strong{font-size:12px;color:var(--ink)}
.rec-category{font-size:8px;font-weight:700;text-transform:uppercase;padding:2px 6px;border-radius:4px;letter-spacing:.6px}
.rec-category.seo{background:#e8f0fe;color:#1a73e8}
.rec-category.pricing{background:#feefe3;color:#d93025}
.rec-category.content{background:#e6f4ea;color:#137333}
.rec-category.promotion{background:#fef7e0;color:#b06000}
.rec-body{font-size:11px;line-height:1.6;color:#4a5568}
.growth-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:11px}
.growth-table th{background:#f4f6fa;padding:10px 12px;font-size:9px;color:var(--muted);text-align:left;border-bottom:1px solid var(--line)}
.growth-table td{padding:11px 12px;border-bottom:1px solid #edf0f5;vertical-align:middle}
.growth-table tr:hover td{background:#fafbff}
.paywall-card{margin-top:16px;padding:24px 28px;border-radius:14px;background:linear-gradient(135deg,#111d33 0%,#182d52 100%);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;box-shadow:0 12px 32px rgba(17,29,51,.15)}
.paywall-content h4{margin:0 0 6px 0;font-size:16px;font-weight:700;color:#fff}
.paywall-content p{margin:0;font-size:11px;color:#abb8cc;line-height:1.6}
.paywall-action{display:flex;align-items:center;gap:14px}
.paywall-price{font-size:22px;font-weight:750;letter-spacing:-.5px;color:#fff}
.paywall-button{background:#255cf5;color:#fff;border:0;padding:12px 22px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.paywall-button:hover{background:#184cd7}
.query-tag-gap{display:inline-block;padding:2px 6px;border-radius:4px;font-size:8px;font-weight:600;background:#ffebee;color:#c62828;margin-left:8px}
.query-tag-lead{display:inline-block;padding:2px 6px;border-radius:4px;font-size:8px;font-weight:600;background:#e8f5e9;color:#2e7d32;margin-left:8px}
.query-tag-lag{display:inline-block;padding:2px 6px;border-radius:4px;font-size:8px;font-weight:600;background:#fff8e1;color:#f57f17;margin-left:8px}
.report-actions{display:flex;gap:8px;margin-left:auto;align-items:center}
.export-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #ced8ea;border-radius:7px;background:#fff;color:#24344d;font-size:11px;font-weight:600;padding:7px 12px;cursor:pointer;transition:all .15s}
.export-btn:hover{background:#f0f4fa;border-color:var(--blue);color:var(--blue)}
.print-header{display:none}

@media print{
  @page{size:A4 portrait;margin:12mm 10mm 15mm 10mm}
  body{background:#fff!important;color:#000!important;font-size:10pt!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .sidebar,.topbar,.staging-banner,.hero,.report-builder,.history-section,.page-footer,.report-actions,.search-field,.detail-button,#global-message,.sidebar-note,.skip-link,.paywall-button{display:none!important}
  .workspace{margin:0!important;padding:0!important}
  main{max-width:100%!important;padding:0!important;margin:0!important}
  .section{border:none!important;padding:0!important;margin-bottom:20px!important;box-shadow:none!important}
  .battle-section,.product-card,.rec-item,.growth-table,.paywall-card{page-break-inside:avoid!important;break-inside:avoid!important}
  .table-scroll{overflow:visible!important;border:none!important}
  table{page-break-inside:auto!important}
  tr{page-break-inside:avoid!important;break-inside:avoid!important}
  .print-header{display:block!important;border-bottom:2px solid #255cf5;padding-bottom:12px;margin-bottom:20px}
  .print-header h1{font-size:18pt!important;margin:0 0 4px 0!important;color:#111d33!important}
  .print-header p{font-size:9pt!important;color:#666!important;margin:0!important}
}

.badge-live {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  vertical-align: middle;
}

.cell-gmv-lead {
  font-weight: 700 !important;
  color: #10b981 !important;
}

/* Sales Funnel Section */
.sales-funnel-section {
  background: #ffffff;
  border: 1px solid #ced8ea;
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 22px;
  box-shadow: 0 1px 4px rgba(17, 29, 51, 0.04);
}

.funnel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.funnel-heading h4 {
  margin: 0 0 3px 0;
  font-size: 15px;
  font-weight: 700;
  color: #111d33;
}

.funnel-heading p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
}

.funnel-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.funnel-summary-chip strong {
  font-weight: 750;
  color: #047857;
}

.funnel-diagram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  overflow-x: auto;
  padding: 4px 2px 8px 2px;
}

.funnel-step {
  flex: 1;
  min-width: 120px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 10px;
  text-align: center;
  transition: transform 0.18s cubic-bezier(0.2, 0, 0, 1), border-color 0.18s, box-shadow 0.18s;
  cursor: default;
}

.funnel-step:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: #255cf5;
  box-shadow: 0 6px 16px rgba(37, 92, 245, 0.08);
}

.funnel-step-gmv {
  background: linear-gradient(180deg, #f0fdf4 0%, #ecfdf5 100%);
  border-color: #86efac;
}

.funnel-step-gmv:hover {
  border-color: #10b981;
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.12);
}

.funnel-step-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
  margin-bottom: 6px;
  font-weight: 600;
}

.funnel-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 9px;
  font-weight: 700;
}

.funnel-step-gmv .funnel-step-num {
  background: #bbf7d0;
  color: #166534;
}

.funnel-step-icon {
  font-size: 13px;
  line-height: 1;
}

.funnel-step-label {
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 10px;
  font-weight: 700;
}

.funnel-step-val {
  display: block;
  font-size: 16px;
  font-weight: 750;
  color: #0f172a;
  margin-bottom: 8px;
  line-height: 1.2;
}

.funnel-step-gmv .funnel-step-val {
  color: #047857;
  font-size: 17px;
}

.funnel-bar-wrap {
  width: 100%;
  height: 5px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}

.funnel-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  border-radius: 999px;
  transition: width 0.3s ease;
}

.funnel-step-gmv .funnel-bar {
  background: linear-gradient(90deg, #10b981, #059669);
}

.funnel-step-note {
  display: block;
  font-size: 10px;
  color: #64748b;
  font-weight: 500;
}

.funnel-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  flex-shrink: 0;
  padding: 0 2px;
}

.funnel-arrow-badge {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 10px;
  font-weight: 750;
  padding: 3px 6px;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1;
}

.funnel-arrow-label {
  font-size: 9px;
  color: #64748b;
  margin-top: 3px;
  white-space: nowrap;
  text-align: center;
}

.funnel-arrow-line {
  width: 100%;
  height: 2px;
  background: #cbd5e1;
  margin-top: 4px;
  position: relative;
}

.funnel-arrow-line::after {
  content: '';
  position: absolute;
  right: 0;
  top: -3px;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid #94a3b8;
}

@media print {
  .sales-funnel-section {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}

/* Battle Scoreboard Styles */
.battle-scoreboard {
  background: #ffffff;
  border: 1px solid #ced8ea;
  border-radius: 16px;
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 24px rgba(17, 29, 51, 0.05);
}

.scoreboard-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  border-bottom: 1px solid #edf0f5;
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.scoreboard-tabs-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f1f5f9;
}

.scoreboard-tabs {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}

.scoreboard-tab-btn {
  border: 0;
  background: transparent;
  padding: 7px 15px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.scoreboard-tab-btn:hover {
  color: #0f172a;
}

.scoreboard-tab-btn.active {
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.scoreboard-view {
  animation: fadeInScoreboard 0.2s ease-out;
}

@keyframes fadeInScoreboard {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Visual Two-Tone Funnel Component ── */
.scoreboard-funnel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.funnel-step-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 12px 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.funnel-step-card:hover {
  border-color: #cbd5e1;
  background: #fbfcfe;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.funnel-step-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}

.funnel-step-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.funnel-step-num {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.funnel-step-title {
  font-size: 12px;
  font-weight: 650;
  color: #0f172a;
}

.funnel-step-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #dbeafe;
}

.funnel-step-values {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.funnel-val-a {
  color: #2563eb;
  font-weight: 700;
}

.funnel-val-b {
  color: #d97706;
  font-weight: 700;
}

.funnel-track {
  height: 9px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  gap: 2px;
}

.funnel-bar-a {
  height: 100%;
  background: #3b82f6;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.funnel-bar-b {
  height: 100%;
  background: #f59e0b;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.funnel-step-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  font-size: 10px;
  color: #64748b;
  flex-wrap: wrap;
  gap: 6px;
}

.funnel-lead-a {
  color: #1d4ed8;
  font-weight: 600;
}

.funnel-lead-b {
  color: #b45309;
  font-weight: 600;
}

/* ── Dynamic AI Insights Component ── */
.scoreboard-insights {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.insight-card {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}

.insight-card:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.insight-card.is-blue {
  background: #f8faff;
  border-color: #bfdbfe;
}

.insight-card.is-amber {
  background: #fffdfa;
  border-color: #fed7aa;
}

.insight-card.is-emerald {
  background: #f6fdf9;
  border-color: #bbf7d0;
}

.insight-card.is-danger {
  background: #fef8f8;
  border-color: #fecaca;
}

.insight-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 750;
}

.insight-card.is-blue .insight-icon { background: #2563eb; color: #fff; }
.insight-card.is-amber .insight-icon { background: #d97706; color: #fff; }
.insight-card.is-emerald .insight-icon { background: #059669; color: #fff; }
.insight-card.is-danger .insight-icon { background: #dc2626; color: #fff; }

.insight-body {
  flex: 1;
  min-width: 0;
}

.insight-body h4 {
  margin: 0 0 4px 0;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
}

.insight-body p {
  margin: 0;
  font-size: 11px;
  line-height: 1.6;
  color: #475569;
}

.insight-body p strong {
  color: #0f172a;
}

.scoreboard-badge-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.scoreboard-heading {
  font-size: 18px;
  font-weight: 750;
  color: var(--ink);
  margin: 0 0 3px 0;
  letter-spacing: -0.4px;
}

.scoreboard-subheading {
  font-size: 11px;
  color: var(--muted);
  margin: 0;
}

.scoreboard-score-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #052e16 0%, #064e3b 100%);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 12px;
  border: 1px solid #10b981;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18);
  text-align: center;
  min-width: 140px;
}


.scoreboard-score-title {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #a7f3d0;
}

.scoreboard-score-val {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 1.15;
  margin: 2px 0;
  color: #ffffff;
}

.scoreboard-score-lead {
  font-size: 10px;
  font-weight: 600;
  color: #6ee7b7;
}

.scoreboard-skus-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.scoreboard-sku-mini-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  min-width: 0;
}

.scoreboard-sku-thumb {
  width: 44px;
  height: 52px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  overflow: hidden;
}

.scoreboard-sku-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scoreboard-sku-meta {
  min-width: 0;
  flex: 1;
}

.scoreboard-sku-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}

.sku-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.sku-tag-a {
  background: #eff6ff;
  color: #1d4ed8;
}

.sku-tag-b {
  background: #fffbeb;
  color: #b45309;
}

.sku-id {
  font-size: 11px;
  color: var(--muted);
  font-family: monospace;
}

.scoreboard-sku-title {
  font-size: 12px;
  font-weight: 650;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.scoreboard-sku-sub {
  font-size: 10px;
  color: var(--muted);
}

.scoreboard-vs-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.scoreboard-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.scoreboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.scoreboard-table th {
  padding: 10px 14px;
  background: #f8fafc;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  border-bottom: 1px solid #e2e8f0;
}

.scoreboard-table th.col-sku-a {
  text-align: right;
  width: 38%;
}

.scoreboard-table th.col-metric {
  text-align: center;
  width: 24%;
  background: #f1f5f9;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
}

.scoreboard-table th.col-sku-b {
  text-align: left;
  width: 38%;
}

.scoreboard-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #edf0f5;
  vertical-align: middle;
}

.scoreboard-table tr:last-child td {
  border-bottom: 0;
}

.scoreboard-table tr:hover td {
  background: #fafbff;
}

.scoreboard-table td.col-val-a {
  text-align: right;
}

.scoreboard-table td.col-val-b {
  text-align: left;
}

.scoreboard-table td.col-metric {
  text-align: center;
  background: #fafbfc;
  border-left: 1px solid #edf0f5;
  border-right: 1px solid #edf0f5;
}

.scoreboard-table tr:hover td.col-metric {
  background: #f4f6fa;
}

.scoreboard-metric-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.scoreboard-metric-name {
  font-weight: 600;
  color: #334155;
  font-size: 11px;
}

.scoreboard-funnel-tag {
  display: inline-block;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.scoreboard-winner-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  font-weight: 750;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.08);
}

.scoreboard-delta-tag {
  font-size: 9px;
  font-weight: 600;
  color: #047857;
}

.scoreboard-val-text {
  font-weight: 500;
  color: #475569;
}

.scoreboard-warning-note {
  font-size: 9px;
  color: #b45309;
  font-weight: 600;
}

.scoreboard-danger-note {
  font-size: 9px;
  color: #dc2626;
  font-weight: 600;
}

.scoreboard-note-blue {
  font-size: 9px;
  color: #2563eb;
  font-weight: 600;
}

.scoreboard-note-purple {
  font-size: 9px;
  color: #7c3aed;
  font-weight: 600;
}

.scoreboard-integrity-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scoreboard-clean-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1.3;
}

.scoreboard-risk-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  font-weight: 700;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  line-height: 1.3;
}

.scoreboard-risk-flags-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
}

.scoreboard-risk-flag-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1.3;
  cursor: help;
}

.scoreboard-risk-flag-item:hover {
  background: #ffedd5;
  border-color: #fdba74;
}

.scoreboard-risk-flag-item .risk-flag-icon {
  font-size: 10px;
}

.scoreboard-risk-flag-item .risk-flag-text {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .scoreboard-skus-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .scoreboard-vs-circle {
    display: none;
  }
  .scoreboard-table th.col-sku-a,
  .scoreboard-table td.col-val-a {
    min-width: 140px;
  }
  .scoreboard-table th.col-metric,
  .scoreboard-table td.col-metric {
    min-width: 140px;
  }
  .scoreboard-table th.col-sku-b,
  .scoreboard-table td.col-val-b {
    min-width: 140px;
  }
}

@media print {
  .battle-scoreboard {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    box-shadow: none !important;
  }
}

/* Autonomous Task Execution & Progress Banner */
.message.is-task {
  background: #f0f6ff;
  border: 1px solid #bfdbfe;
  color: #1e3a8a;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(37, 92, 245, 0.08);
}
.message.is-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 14px 18px;
  border-radius: 10px;
}
.message.is-error {
  background: #fff0ee;
  border: 1px solid #efd1cd;
  color: #984c40;
  padding: 14px 18px;
  border-radius: 10px;
}
.task-banner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.task-spinner {
  width: 26px;
  height: 26px;
  border: 3px solid #bfdbfe;
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: task-spin 0.85s linear infinite;
  flex-shrink: 0;
  margin-top: 2px;
}
@keyframes task-spin {
  to { transform: rotate(360deg); }
}
.task-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.task-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.task-title {
  font-size: 13px;
  font-weight: 700;
  color: #1e3a8a;
}
.task-badge-timer {
  background: #dbeafe;
  color: #1d4ed8;
  font-weight: 600;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.task-step-text {
  margin: 3px 0 6px;
  font-size: 12px;
  color: #334155;
  font-weight: 500;
}
.task-progress-track {
  width: 100%;
  height: 6px;
  background: #cbd5e1;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 4px;
}
.task-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #255cf5);
  border-radius: 999px;
  transition: width 0.5s ease;
}
.task-hint-text {
  font-size: 10px;
  color: #64748b;
  line-height: 1.4;
}

/* ── Table product mini-cards (Queries header) ── */
.query-group-header { padding: 0 !important; vertical-align: top; }
.group-product-a { background: #f0f6ff !important; border-right: 1px solid #bfdbfe !important; }
.group-product-b { background: #fff8f0 !important; border-right: 1px solid #fed7aa !important; }
.group-query-title { background: #f7f9fc !important; }
.table-product-mini { display: flex; gap: 10px; align-items: center; padding: 10px 14px; min-height: 58px; }
.table-product-thumb {
  width: 40px; height: 46px; flex-shrink: 0;
  border-radius: 6px; overflow: hidden;
  background: #eef2f8; display: grid; place-items: center; font-size: 20px;
}
.table-product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.table-product-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.table-product-top-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.table-product-tag {
  font-size: 8px; font-weight: 700; letter-spacing: .4px;
  padding: 2px 6px; border-radius: 4px;
}
.table-tag-a { background: #dbeafe; color: #1d4ed8; }
.table-tag-b { background: #ffedd5; color: #c2410c; }
.table-product-sku { font-size: 9px; color: #374151; font-weight: 600; }
.table-product-title {
  font-size: 9px; color: #6b7280;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}
.th-product-a { background: #f0f6ff !important; }
.th-product-b { background: #fff8f0 !important; }
.td-product-a { background: #fafcff; }
.td-product-b { background: #fffaf5; }
.table-subheaders th { padding-top: 6px !important; padding-bottom: 6px !important; }

/* ── Foolproof Task Execution Card (Replaces form during load) ── */
.task-execution-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: linear-gradient(135deg, #f8faff 0%, #edf4ff 100%);
  border: 2px solid #bfdbfe;
  border-radius: 14px;
  padding: 24px 28px;
  box-shadow: 0 8px 30px rgba(37, 99, 235, 0.09);
  animation: fadeInTaskCard 0.25s ease-out;
  margin-top: 6px;
}

@keyframes fadeInTaskCard {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.task-card-spinner {
  width: 36px;
  height: 36px;
  border: 4px solid #dbeafe;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: task-spin 0.8s linear infinite;
  flex-shrink: 0;
  margin-top: 4px;
}

.task-card-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.task-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-card-badge {
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.8px;
  color: #1d4ed8;
  background: #dbeafe;
  padding: 3px 8px;
  border-radius: 6px;
}

.task-card-timer {
  font-size: 12px;
  font-weight: 750;
  color: #1e40af;
  font-variant-numeric: tabular-nums;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  padding: 2px 10px;
  border-radius: 6px;
}

.task-card-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 2px 0 0;
}

.task-card-step {
  font-size: 13px;
  color: #334155;
  font-weight: 500;
  margin: 2px 0 6px;
}

.task-card-track {
  width: 100%;
  height: 8px;
  background: #cbd5e1;
  border-radius: 999px;
  overflow: hidden;
  margin: 4px 0 6px;
}

.task-card-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #255cf5);
  border-radius: 999px;
  transition: width 0.5s ease;
}

.task-card-hint {
  font-size: 11px;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

/* ── Compact & Scalable History Table (100+ reports) ── */
.history-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.history-search-field {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 11px;
  color: #64748b;
  transition: border-color 0.15s;
}

.history-search-field:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

.history-search-field input {
  border: 0;
  outline: none;
  font-size: 11px;
  color: #0f172a;
  width: 180px;
  background: transparent;
}

.history-table-wrap {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #ffffff;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  text-align: left;
}

.history-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fafc;
}

.history-table th {
  padding: 9px 14px;
  font-size: 10px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.history-table td {
  padding: 8px 14px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  white-space: nowrap;
}

.history-table tr:hover td {
  background: #f8faff;
}

.history-table tr.current td {
  background: #eff6ff;
}

.history-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}

.history-mode-single {
  background: #f1f5f9;
  color: #475569;
}

.history-mode-compare {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.history-sku-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #1e293b;
}

.history-sku-badge {
  font-size: 10px;
  font-weight: 600;
  color: #2563eb;
  background: #f0f4ff;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #dbeafe;
}

.history-open-btn {
  border: 1px solid #ced8ea;
  background: #ffffff;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  transition: all 0.15s;
}

.history-open-btn:hover {
  background: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}

/* ==========================================================================
   PUBLIC LANDING VIEW (BETA 1.0)
   ========================================================================== */

.landing-view {
  background: #090d16;
  color: #e2e8f0;
  min-height: 100vh;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  position: relative;
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(9, 13, 22, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  height: 72px;
  display: flex;
  align-items: center;
}

.landing-nav-inner {
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-links {
  display: flex;
  gap: 28px;
}

.landing-link {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.15s;
}

.landing-link:hover {
  color: #ffffff;
}

.landing-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-login-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
}

.landing-login-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.landing-register-btn {
  background: #2563eb;
  border: 0;
  color: #ffffff;
  border-radius: 8px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
  transition: all 0.15s;
}

.landing-register-btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

/* HERO */
.landing-hero {
  padding: 84px 24px 70px;
  text-align: center;
  max-width: 1020px;
  margin: 0 auto;
}

.landing-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(37, 99, 235, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.32);
  border-radius: 24px;
  padding: 6px 16px;
  color: #93c5fd;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  margin-bottom: 24px;
}

.status-dot.online {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.landing-title {
  font-size: clamp(34px, 4.8vw, 58px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -1.6px;
  color: #ffffff;
  margin: 0 0 22px;
}

.landing-subtitle {
  font-size: clamp(15px, 1.8vw, 19px);
  line-height: 1.6;
  color: #94a3b8;
  max-width: 780px;
  margin: 0 auto 38px;
}

.landing-hero-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-cta-btn {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  padding: 15px 32px;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
}

.hero-cta-btn:hover {
  background: linear-gradient(135deg, #1d4ed8, #1e40af);
  transform: translateY(-2px);
}

.hero-demo-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-size: 15px;
  font-weight: 500;
  padding: 15px 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}

.hero-demo-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.landing-trust-bar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.trust-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 7px 15px;
  font-size: 12px;
  color: #cbd5e1;
}

.trust-chip.highlight {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
  font-weight: 600;
}

/* LANDING SECTIONS */
.landing-section {
  max-width: 1200px;
  margin: 0 auto 96px;
  padding: 0 24px;
}

.landing-section-header {
  text-align: center;
  margin-bottom: 48px;
}

.landing-section-header .eyebrow {
  color: #60a5fa;
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}

.landing-section-header h2 {
  font-size: 34px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: -0.6px;
}

.section-desc {
  color: #94a3b8;
  font-size: 15px;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

/* HERO MOCKUP TEASER */
.hero-mockup-wrapper {
  margin-top: 48px;
  position: relative;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.hero-mockup-window {
  background: #0b1329;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7), 0 0 50px rgba(56, 189, 248, 0.12);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.hero-mockup-window:hover {
  border-color: rgba(56, 189, 248, 0.45);
  transform: translateY(-2px);
}

.mockup-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: #0f172a;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 12px;
  color: #94a3b8;
  gap: 12px;
}

.window-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}

.dot-red { background: #ef4444; }
.dot-yellow { background: #f59e0b; }
.dot-green { background: #10b981; }

.window-title-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #e2e8f0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.window-title-icon {
  font-size: 14px;
}

.window-badge-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #34d399;
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.pulse-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.hero-mockup-screen {
  position: relative;
  max-height: 480px;
  overflow: hidden;
  cursor: pointer;
  background: #ffffff;
}

.mockup-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: top;
  transition: transform 0.3s ease;
}

.hero-mockup-screen:hover .mockup-img {
  transform: scale(1.01);
}

.mockup-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 19, 41, 0.95) 0%, rgba(11, 19, 41, 0.4) 50%, transparent 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 24px;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.hero-mockup-screen:hover .mockup-hover-overlay {
  opacity: 1;
}

.mockup-explore-btn {
  background: #2563eb;
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
  transition: all 0.2s;
}

.mockup-explore-btn:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
}

/* APP WINDOW MOCKUP IN SHOWCASE SECTION */
.app-window-mockup {
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(56, 189, 248, 0.1);
}

.window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #0a0f1d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 16px;
  flex-wrap: wrap;
}

.window-controls {
  display: flex;
  gap: 7px;
}

.window-address-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 4px 14px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #94a3b8;
  flex: 1;
  max-width: 520px;
}

.window-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.1);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* DEMO TABS BAR */
.demo-tabs-bar {
  display: flex;
  align-items: center;
  background: #0c1427;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0 16px;
  overflow-x: auto;
  gap: 4px;
}

.demo-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: transparent;
  color: #94a3b8;
  border: 0;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.demo-tab-btn:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.03);
}

.demo-tab-btn.active {
  color: #38bdf8;
  border-bottom-color: #38bdf8;
  background: rgba(56, 189, 248, 0.08);
}

/* DEMO VIEWPORT & SCREENSHOT */
.demo-viewport {
  padding: 24px;
  background: #090e1a;
}

.demo-screenshot-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.demo-screen-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.25s ease;
}

.demo-screenshot-frame:hover .demo-screen-img {
  transform: scale(1.008);
}

.demo-zoom-overlay {
  position: absolute;
  inset: 0;
  background: rgba(11, 19, 41, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.demo-screenshot-frame:hover .demo-zoom-overlay {
  opacity: 1;
}

.demo-zoom-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(15, 23, 42, 0.92);
  border: 1px solid #38bdf8;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transform: translateY(4px);
  transition: transform 0.2s ease;
}

.demo-screenshot-frame:hover .demo-zoom-btn {
  transform: translateY(0);
}

/* DYNAMIC SUMMARY BOX */
.demo-summary-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 4px solid #10b981;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 0 24px 20px;
}

.summary-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.summary-badge.win-badge {
  color: #34d399;
}

.demo-summary-box p {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.demo-summary-box p strong {
  color: #ffffff;
}

/* DEMO WINDOW FOOTER */
.demo-window-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: #0a0f1d;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
  gap: 16px;
}

.demo-footer-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #94a3b8;
  font-size: 13px;
}

.info-icon {
  font-size: 16px;
}

.demo-action-btn {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* 3 STEPS WORKFLOW SECTION */
.steps-section {
  margin-bottom: 96px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.step-card {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s;
  position: relative;
}

.step-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.35);
}

.step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.step-number {
  font-size: 32px;
  font-weight: 800;
  color: rgba(56, 189, 248, 0.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.step-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
}

.step-card p {
  font-size: 13px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0 0 18px;
  flex: 1;
}

.step-micro-preview {
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
}

.step-micro-preview code {
  color: #38bdf8;
  font-family: ui-monospace, monospace;
}

.step-progress-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #60a5fa;
  font-weight: 600;
}

.step-dot-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  animation: pulse-ring 1.5s infinite;
}

.step-success-pill {
  color: #34d399;
  font-weight: 600;
}

/* 5 FEATURES GRID UPGRADED */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.feature-card {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(56, 189, 248, 0.35);
}

.feature-card.highlight-feature {
  border-color: rgba(56, 189, 248, 0.3);
  background: linear-gradient(135deg, #0f172a 0%, #132238 100%);
}

.feature-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(56, 189, 248, 0.1);
  border: 1px solid rgba(56, 189, 248, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.feature-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #38bdf8;
  display: block;
  margin-bottom: 8px;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
}

.feature-card p {
  font-size: 13px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0 0 18px;
  flex: 1;
}

/* FEATURE MICRO WIDGETS */
.feature-micro-widget {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}

.micro-query-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
}

.query-text {
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}

.query-gmv {
  font-size: 11px;
  font-weight: 700;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
}

.micro-query-meta {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
}

.micro-battle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.battle-sku-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.15);
  color: #93c5fd;
}

.battle-sku-badge.comp {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
}

.battle-score-pill {
  font-size: 14px;
  font-weight: 800;
  color: #34d399;
  background: rgba(16, 185, 129, 0.15);
  padding: 2px 10px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.micro-risk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.risk-clean-status {
  font-size: 12px;
  font-weight: 600;
  color: #34d399;
}

.risk-safe-tag {
  font-size: 11px;
  color: #60a5fa;
  background: rgba(59, 130, 246, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
}

.micro-funnel-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 52px;
  padding-top: 4px;
}

.mf-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  gap: 4px;
}

.mf-bar {
  width: 100%;
  background: rgba(56, 189, 248, 0.35);
  border-radius: 4px 4px 0 0;
  transition: height 0.3s;
}

.mf-bar.win {
  background: #10b981;
}

.mf-col span {
  font-size: 10px;
  color: #94a3b8;
}

.micro-security-row {
  margin-bottom: 6px;
}

.sec-badge {
  font-size: 11px;
  font-weight: 700;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.25);
  padding: 3px 8px;
  border-radius: 6px;
  display: inline-block;
}

/* DEMO LIGHTBOX MODAL */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(5, 8, 16, 0.92);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fadeIn 0.15s ease-out;
}

.lightbox-container {
  max-width: 1200px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.9), 0 0 50px rgba(56, 189, 248, 0.15);
}

.lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #0b1329;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  gap: 16px;
  flex-wrap: wrap;
}

.lightbox-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #38bdf8;
  display: block;
  margin-bottom: 4px;
}

.lightbox-title-box h3 {
  font-size: 17px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.lightbox-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lightbox-cta-btn {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 700;
}

.lightbox-close {
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: #ffffff;
  font-size: 24px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.lightbox-close:hover {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.lightbox-body {
  overflow: auto;
  flex: 1;
  padding: 20px;
  background: #080d1a;
  display: flex;
  justify-content: center;
}

.lightbox-full-img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  background: #ffffff;
}

.feature-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: #60a5fa;
  display: block;
  margin-bottom: 8px;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 10px;
}

.feature-card p {
  font-size: 13px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 0;
}

/* TARIFF PRICING (100 RUB & 200 RUB) */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: 880px;
  margin: 0 auto;
}

.pricing-card {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 36px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s;
}

.pricing-card:hover {
  transform: translateY(-3px);
  border-color: rgba(59, 130, 246, 0.4);
}

.pricing-card.featured {
  border: 2px solid #2563eb;
  background: linear-gradient(135deg, #0f172a 0%, #17243c 100%);
  box-shadow: 0 20px 50px rgba(37, 99, 235, 0.25);
}

.pricing-badge {
  display: inline-block;
  align-self: center;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.35);
  color: #93c5fd;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 16px;
}

.pricing-badge-neutral {
  display: inline-block;
  align-self: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 16px;
}

.pricing-title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
}

.pricing-desc {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 22px;
  line-height: 1.5;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

.price-val {
  font-size: 44px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -1.5px;
}

.price-period {
  color: #94a3b8;
  font-size: 13px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.pricing-features li {
  font-size: 13px;
  color: #cbd5e1;
  line-height: 1.5;
}

.pricing-features strong {
  color: #ffffff;
}

.pricing-card-btn {
  width: 100%;
  padding: 13px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  justify-content: center;
  margin-top: auto;
}


/* FEEDBACK CTA SECTION */
.feedback-cta-card {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  padding: 48px 32px;
  text-align: center;
}

.feedback-cta-content {
  max-width: 620px;
  margin: 0 auto;
}

.feedback-cta-content h2 {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 8px 0 14px;
}

.feedback-cta-content p {
  color: #94a3b8;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 28px;
}

.landing-feedback-open-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 26px;
  border-radius: 8px;
  transition: all 0.15s;
}

.landing-feedback-open-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

/* LANDING FOOTER */
.landing-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 40px 24px;
  background: #070a12;
}

.landing-footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-note {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

/* ==========================================================================
   MODALS (AUTH & FEEDBACK)
   ========================================================================== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 8, 15, 0.82);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-card {
  background: #0f172a;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
  position: relative;
  color: #f8fafc;
  animation: modalFadeIn 0.2s ease-out;
}

@keyframes modalFadeIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: 0;
  font-size: 26px;
  color: #94a3b8;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s;
}

.modal-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

/* AUTH TABS & FORM */
.auth-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 24px;
}

.auth-tab {
  flex: 1;
  padding: 12px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #94a3b8;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.auth-tab.active {
  color: #60a5fa;
  border-bottom-color: #3b82f6;
}

.auth-header {
  margin-bottom: 20px;
}

.auth-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
}

.auth-header p {
  font-size: 12px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
}

.auth-error {
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: #f87171;
  font-size: 12px;
  margin-bottom: 16px;
}

.auth-card .field, .feedback-card .field {
  margin-bottom: 16px;
}

.auth-card .field label, .feedback-card .field label {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

.auth-card .input-wrap, .feedback-card .input-wrap {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.12);
  min-height: 44px;
}

.auth-card .input-wrap>span, .feedback-card .input-wrap>span {
  border-right-color: rgba(255, 255, 255, 0.12);
  color: #64748b;
}

.auth-card .input-wrap input, .feedback-card .input-wrap input {
  color: #ffffff;
  background: transparent;
}

.auth-card .input-wrap input::placeholder, .feedback-card .input-wrap input::placeholder {
  color: #64748b;
}

.auth-submit-btn, .feedback-submit-btn {
  width: 100%;
  margin-top: 8px;
  background: #2563eb;
  color: #ffffff;
  font-weight: 600;
  justify-content: center;
  border-radius: 8px;
}

.auth-submit-btn:hover, .feedback-submit-btn:hover {
  background: #1d4ed8;
}

.auth-footer-note {
  text-align: center;
  margin-top: 18px;
  font-size: 12px;
  color: #94a3b8;
}

.auth-footer-note .text-button {
  color: #60a5fa;
  font-weight: 600;
  padding: 0;
  margin-left: 4px;
}

/* FEEDBACK MODAL */
.feedback-card {
  max-width: 480px;
}

.feedback-badge {
  display: inline-block;
  background: rgba(37, 99, 235, 0.15);
  border: 1px solid rgba(37, 99, 235, 0.35);
  color: #93c5fd;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

.feedback-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
}

.feedback-header p {
  font-size: 12px;
  color: #94a3b8;
  margin: 0 0 20px;
  line-height: 1.5;
}

.star-rating {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.star-btn {
  background: none;
  border: 0;
  font-size: 32px;
  color: #475569;
  cursor: pointer;
  transition: color 0.15s, transform 0.15s;
  padding: 0;
  line-height: 1;
}

.star-btn:hover {
  transform: scale(1.15);
}

.star-btn.active {
  color: #f59e0b;
}

.feedback-card textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #1e293b;
  padding: 12px;
  font-family: inherit;
  font-size: 13px;
  color: #f8fafc;
  resize: vertical;
  box-sizing: border-box;
}

.feedback-card textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.feedback-success {
  text-align: center;
  padding: 24px 0 10px;
}

.feedback-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  font-size: 28px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}

.feedback-success h4 {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
}

.feedback-success p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 20px;
  line-height: 1.5;
}

.feedback-success .secondary-button {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 8px;
}

/* ==========================================================================
   APP WORKSPACE BETA TWEAKS
   ========================================================================== */

.sidebar-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  margin: 10px 0 8px;
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.user-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.user-email {
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-role {
  font-size: 10px;
  color: #94a3b8;
}

.sidebar-user-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 24px;
}

.sidebar-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.sidebar-action-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
}

.sidebar-action-btn.logout-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.3);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.workspace-badge.beta-badge {
  border-color: #93c5fd;
  color: #1d4ed8;
  font-weight: 600;
}

.topbar-feedback-btn, .banner-feedback-btn {
  border: 1px solid #2563eb;
  background: #ffffff;
  color: #2563eb;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.topbar-feedback-btn:hover, .banner-feedback-btn:hover {
  background: #2563eb;
  color: #ffffff;
}

.beta-welcome-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #bfdbfe;
  background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 100%);
  padding: 16px 20px;
  border-radius: 11px;
  margin-bottom: 30px;
}

.beta-welcome-banner strong {
  font-size: 13px;
  font-weight: 650;
  color: #1e3a8a;
  display: block;
}

.beta-welcome-banner p {
  margin: 3px 0 0;
  color: #3b5998;
  font-size: 12px;
}

.beta-welcome-banner .banner-icon {
  font-size: 18px;
  color: #2563eb;
}

@media (max-width: 860px) {
  .landing-links {
    display: none;
  }
  .landing-hero {
    padding: 60px 16px 40px;
  }
  .showcase-battle-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PAYPALYCH PAYMENT MODAL & BADGES
   ========================================================================== */

.payment-card {
  max-width: 520px;
  background: #0f172a;
  border: 1px solid rgba(59, 130, 246, 0.3);
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.7), 0 0 40px rgba(37, 99, 235, 0.15);
  border-radius: 16px;
  padding: 32px 28px;
  color: #f1f5f9;
}

.payment-header {
  margin-bottom: 20px;
}

.payment-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #60a5fa;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(96, 165, 250, 0.3);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.payment-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
}

.payment-header p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
}

.payment-status-box {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.payment-status-box.success {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

.payment-summary-box {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 20px;
}

.payment-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
}

.payment-summary-label {
  color: #94a3b8;
}

.payment-summary-val {
  color: #ffffff;
}

.payment-skus-badge {
  background: #334155;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.payment-features-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  color: #cbd5e1;
}

.payment-features-list li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.payment-total-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 12px 0 14px;
}

.payment-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  color: #cbd5e1;
}

.payment-total-row strong {
  font-size: 24px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: -0.02em;
}

.payment-methods-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.payment-method-chip {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 5px;
}

.payment-submit-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: 1px solid #3b82f6;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.payment-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6);
  transform: translateY(-1px);
}

.payment-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.payment-guarantee-note {
  text-align: center;
  margin: 14px 0 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.4;
}

.badge-paid {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-unpaid {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

/* ==========================================================================
   200 RUB WELCOME BONUS & LANDING PROMO
   ========================================================================== */

.landing-bonus-banner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.12) 0%, rgba(99, 102, 241, 0.18) 100%);
  border: 1px solid rgba(56, 189, 248, 0.38);
  border-radius: 12px;
  padding: 10px 18px;
  margin-bottom: 22px;
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.14);
}

.bonus-badge-glow {
  background: linear-gradient(135deg, #0284c7, #4f46e5);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bonus-banner-text {
  font-size: 13.5px;
  color: #e2e8f0;
  line-height: 1.4;
}

.bonus-banner-text strong {
  color: #38bdf8;
  font-weight: 700;
}

.pricing-bonus-tag {
  display: block;
  background: rgba(56, 189, 248, 0.12);
  border: 1px dashed rgba(56, 189, 248, 0.45);
  color: #38bdf8;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  margin: 10px 0 14px;
  text-align: center;
}

.pricing-bonus-tag.featured-bonus {
  background: rgba(129, 140, 248, 0.16);
  border-color: rgba(129, 140, 248, 0.5);
  color: #a5b4fc;
}

/* User balance badges in workspace */
.user-balance-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: #34d399;
  margin-top: 4px;
}

.user-balance-badge .balance-val {
  font-weight: 700;
  color: #10b981;
}

.user-verify-status {
  font-size: 11px;
  margin-top: 4px;
}

.user-verify-status .verified-badge {
  color: #10b981;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.user-verify-status .unverified-action-btn {
  color: #38bdf8;
  background: none;
  border: none;
  padding: 0;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}

.topbar-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  color: #065f46;
  font-weight: 600;
}

.topbar-balance-pill strong {
  color: #047857;
  font-size: 13px;
}

/* ==========================================================================
   EMAIL VERIFICATION MODAL
   ========================================================================== */

.verify-card {
  max-width: 480px;
  background: #0f172a;
  border: 1px solid rgba(56, 189, 248, 0.3);
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.7), 0 0 40px rgba(56, 189, 248, 0.15);
  border-radius: 16px;
  padding: 32px 28px;
  color: #f1f5f9;
}

.verify-header {
  margin-bottom: 20px;
}

.verify-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.15);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.verify-header h3 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px;
}

.verify-header p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0;
  line-height: 1.5;
}

.verify-demo-box {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.demo-box-icon {
  font-size: 20px;
}

.demo-box-content {
  flex: 1;
}

.demo-box-title {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: #f59e0b;
}

.demo-box-content p {
  margin: 2px 0 0;
  font-size: 12px;
  color: #fef08a;
}

.demo-code-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 15px;
  letter-spacing: 1px;
  color: #ffffff;
  background: #78350f;
  padding: 1px 6px;
  border-radius: 4px;
}

.demo-fill-btn {
  padding: 6px 12px;
  font-size: 11px;
  background: #f59e0b;
  color: #0f172a;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.demo-fill-btn:hover {
  background: #fbbf24;
}

.verify-status-box {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.verify-status-box.success {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}

.code-input-wrap {
  margin-top: 6px;
}

.code-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: 6px !important;
  text-align: center;
  color: #38bdf8 !important;
  background: #1e293b !important;
  border: 1px solid #334155 !important;
}

.code-input:focus {
  border-color: #38bdf8 !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25) !important;
}

.verify-submit-btn {
  width: 100%;
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
  border: 1px solid #38bdf8;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  margin-top: 14px;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(2, 132, 199, 0.4);
}

.verify-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
  box-shadow: 0 6px 20px rgba(2, 132, 199, 0.6);
  transform: translateY(-1px);
}

.verify-footer-actions {
  text-align: center;
  margin-top: 14px;
}

/* Balance checkout button and divider */
.payment-balance-section {
  margin-bottom: 16px;
}

.payment-balance-btn {
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border: 1px solid #34d399;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.payment-balance-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.payment-balance-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.payment-balance-hint {
  display: block;
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
}

.payment-balance-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 12px;
  color: #94a3b8;
}

.payment-balance-info strong {
  color: #34d399;
  font-size: 13px;
  font-weight: 700;
}

.payment-divider-or {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 18px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748b;
}

.payment-divider-or::before,
.payment-divider-or::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.payment-divider-or span {
  padding: 0 10px;
}