/* Landing page: cinematic hero (dark, own radar artwork, italic accent word, glass buttons).
   Visual only, no content change. Colour variables are redefined inside the hero so it works in both light and dark themes. */
.hero.hero-apple{
  --text:#f5f5f7;--muted:#a1a1a6;--bg:#0a0a0b;--bg-soft:rgba(22,22,24,.72);--border:rgba(255,255,255,.1);--accent:#8B5CF6;
  position:relative;isolation:isolate;background:#0a0a0b !important;color:var(--text);
  padding-top:clamp(64px,9vw,120px);
}
.hero.hero-apple::after{
  display:block !important;content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 0%,rgba(139,92,246,.20),transparent 70%),linear-gradient(180deg,transparent 65%,#0a0a0b);
}

.hero-apple h1{color:var(--text);}
.hero-apple h1 span{
  font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.06em;letter-spacing:-.01em;
  background:none !important;-webkit-text-fill-color:var(--accent) !important;color:var(--accent) !important;padding-right:.05em;
}
.hero-apple .lead-a{color:#d2d2d7;}
.hero-apple .eyebrow-a{color:var(--text);}
.hero-apple .btn-primary{padding:16px 30px;font-size:16px;box-shadow:0 10px 40px rgba(139,92,246,.28);}
.hero-apple .more-a{
  background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);
  color:var(--text);padding:15px 26px;border-radius:999px;font-size:16px;font-weight:600;
}
.hero-apple .more-a:hover{background:rgba(255,255,255,.14);}
.hero-apple .stage-a{background:rgba(20,20,22,.7);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08);}


/* ===== Cinematic feel for the rest of the site (dark theme only): deeper blacks, dark cards, thin teal ring on hover ===== */
:root[data-theme="dark"]{--bg:#0a0a0b;--bg-soft:#151517;--card:#141416;--border:#27272b;--header-bg:rgba(10,10,11,.72);}
:root[data-theme="dark"] .step-card,:root[data-theme="dark"] .step-card:nth-child(2),:root[data-theme="dark"] .price-card{background:#141416;}
:root[data-theme="dark"] .stat-num{color:var(--accent);font-size:clamp(42px,6vw,68px);letter-spacing:-.045em;}
:root[data-theme="dark"] .stats{border-top:1px solid #1c1c1f;border-bottom:1px solid #1c1c1f;}
:root[data-theme="dark"] .section-head h2,:root[data-theme="dark"] .insight h2{letter-spacing:-.045em;}
:root[data-theme="dark"] .step-card,:root[data-theme="dark"] .feature-card,:root[data-theme="dark"] .price-card,:root[data-theme="dark"] .teaser-row{transition:box-shadow .25s ease,transform .25s ease;}
:root[data-theme="dark"] .step-card:hover,:root[data-theme="dark"] .feature-card:hover,:root[data-theme="dark"] .price-card:hover{box-shadow:inset 0 0 0 1px rgba(139,92,246,.4),0 18px 50px rgba(0,0,0,.45);transform:translateY(-2px);}
:root[data-theme="dark"] .btn-primary,:root[data-theme="dark"] .nav-cta{box-shadow:0 8px 30px rgba(139,92,246,.2);}
@media(prefers-reduced-motion:reduce){:root[data-theme="dark"] .step-card:hover,:root[data-theme="dark"] .feature-card:hover,:root[data-theme="dark"] .price-card:hover{transform:none;}}

/* ===== APP: pill top navigation replaces the sidebar + prompt-bar search card (wide screens only) ===== */
@media(min-width:901px){
  .app-shell{flex-direction:column;}
  .app-sidebar{
    position:sticky;top:0;z-index:60;width:100% !important;height:auto !important;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;
    padding:14px clamp(16px,3vw,32px) !important;background:rgba(10,10,11,.72) !important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:visible !important;border:none !important;
  }
  .sidebar-logo{padding:0 !important;flex-shrink:0;min-width:150px;}
  .sidebar-logo small{display:none;}
  .sidebar-scroll{
    flex:0 1 auto;flex-direction:row;align-items:center;gap:4px;padding:5px;overflow:visible;
    border:1px solid #2c2c30;border-radius:999px;background:rgba(23,23,25,.7);
  }
  .sidebar-nav{flex-direction:row;gap:4px;}
  .sidebar-group-label{display:none;}
  .sidebar-nav-explore .sidebar-link:nth-child(2),.sidebar-nav-explore .sidebar-link:nth-child(4){display:none;} /* Home (the logo links there) and Blog */
  .sidebar-link{width:auto !important;padding:9px 18px !important;border-radius:999px !important;font-size:14px;font-weight:600;margin:0 !important;gap:0;justify-content:center !important;}
  .sidebar-link i{display:none;}
  .sidebar-link:hover{background:rgba(255,255,255,.07);}
  .sidebar-link.active{background:#26262a;color:#fff;box-shadow:inset 0 0 0 1px #34343a;}
  .sidebar-link[data-section="workspace"]{background:rgba(139,92,246,.14) !important;color:var(--accent) !important;box-shadow:none !important;}
  .sidebar-link[data-section="workspace"].active{background:linear-gradient(180deg,#8B5CF6,#F5F3FF) !important;color:#0a0a0b !important;box-shadow:0 6px 22px rgba(139,92,246,.35) !important;}
  .sidebar-footer{flex-direction:row !important;border:none !important;padding:0 !important;min-width:150px;justify-content:flex-end;}
  .sidebar-footer .auth-widget{width:auto !important;flex-direction:row !important;align-items:center;}
  .acct-card{width:auto !important;padding:5px 14px 5px 6px !important;border-radius:999px !important;}
  .acct-info small,.acct-chev{display:none;}
  .acct-menu{bottom:auto !important;top:calc(100% + 10px);left:auto !important;right:0;min-width:210px;}
  .app-main{width:100%;}

  /* Radar header centered; chips + search form one large rounded card */
  #niche-scan .page-head{text-align:center;margin-bottom:26px;}
  #niche-scan .page-kicker{justify-content:center;}
  #niche-scan .page-head h1{font-size:clamp(34px,4.6vw,54px);letter-spacing:-.045em;text-align:center;margin-inline:auto;}
  #niche-scan .page-head p{margin-inline:auto;}
  .prompt-bar{max-width:980px;margin:0 auto 26px;background:#171719;border:1px solid #2c2c30;border-radius:28px;padding:18px 18px 16px;box-shadow:0 30px 80px rgba(0,0,0,.45);}
  .prompt-bar .quick-filter-row{display:flex !important;flex-wrap:wrap;gap:8px !important;margin:0 0 6px !important;max-width:none !important;}
  .prompt-bar .quick-filter-tile{display:inline-flex !important;grid-template-columns:none !important;align-items:center;gap:6px;padding:8px 14px !important;border-radius:999px !important;background:#1f1f22 !important;border:1px solid #2a2a2e !important;box-shadow:none !important;width:auto;}
  .prompt-bar .quick-filter-desc{display:none !important;}
  .prompt-bar .quick-filter-icon{width:auto;height:auto;background:none !important;margin:0 !important;font-size:15px;}
  .prompt-bar .quick-filter-name{font-size:13px !important;font-weight:600;}
  .prompt-bar .quick-filter-tile.active{background:rgba(139,92,246,.14) !important;border-color:rgba(139,92,246,.45) !important;color:var(--accent);}
  .prompt-bar .browse-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;max-width:none !important;}
  .prompt-bar .search-field{order:1;flex:1 1 100%;}
  .prompt-bar .search-field input{background:transparent !important;border:none !important;box-shadow:none !important;font-size:17px;min-height:56px;padding-left:44px;}
  .prompt-bar .search-field input:focus{outline:none;}
  .prompt-bar #unifiedFiltersToggle{order:2;border-radius:999px;background:#1f1f22;border:1px solid #2a2a2e;}
  .prompt-bar #unifiedSearchBtn{order:3;margin-left:auto;border-radius:999px;padding:13px 24px !important;font-weight:600;background:linear-gradient(180deg,#8B5CF6,#F5F3FF) !important;color:#0a0a0b !important;border:none;box-shadow:0 8px 30px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.4);}
  .prompt-bar #unifiedFilterPanel{margin-top:14px;}
}

/* Hero: channels with the most views on the left, radar on the right. Rings stay still, only the sweep beam rotates. */
.hero-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,48px);align-items:end;max-width:1100px;margin:clamp(40px,7vw,72px) auto 0;text-align:left;}
.hero-row .stage-a{margin:0;max-width:none;}
.radar-a{position:relative;width:min(100%,440px);aspect-ratio:1;justify-self:center;align-self:center;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 68%);}
.radar-svg{position:absolute;inset:0;width:100%;height:100%;}
.radar-svg circle{fill:none;stroke:rgba(139,92,246,.32);stroke-width:.8;}
.radar-svg path{stroke:rgba(139,92,246,.2);stroke-width:.6;fill:none;}
.radar-sweep{
  position:absolute;inset:1%;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(139,92,246,0) 0deg,rgba(139,92,246,0) 285deg,rgba(139,92,246,.22) 340deg,rgba(139,92,246,.75) 359deg,rgba(139,92,246,0) 360deg);
  animation:radarSweep 5s linear infinite;
}
.blip{position:absolute;left:var(--x);top:var(--y);width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#8B5CF6;box-shadow:0 0 12px 3px rgba(139,92,246,.7);animation:blipPulse 5s ease-out infinite;animation-delay:var(--d);opacity:.25;}
@keyframes radarSweep{to{transform:rotate(360deg);}}
@keyframes blipPulse{0%{opacity:1;transform:scale(1.5);}40%{opacity:.25;transform:scale(1);}100%{opacity:.25;}}
@media(max-width:900px){.hero-row{grid-template-columns:minmax(0,1fr);}.radar-a{width:min(78%,340px);}}
@media(prefers-reduced-motion:reduce){.radar-sweep{animation:none;}.blip{animation:none;opacity:.8;}}

/* ===== Glossy pill buttons: top sheen + darker bottom edge + inner rim light + soft coloured glow ===== */
:root{
  --gloss-teal:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.06) 48%,rgba(255,255,255,0) 54%),linear-gradient(135deg,#8B5CF6 0%,#F5F3FF 100%);
  --gloss-glass:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.02) 100%);
  --gloss-dark:linear-gradient(180deg,#48484e 0%,#2b2b30 55%,#222226 100%);
}
.btn-primary,.nav-cta,.niche-pick-btn,.paywall-cta,.hero-apple .btn-primary,.prompt-bar #unifiedSearchBtn,
.app-sidebar .sidebar-link[data-section="workspace"].active{
  background:var(--gloss-teal) !important;color:#14122b !important;font-weight:500;text-shadow:none;
  border:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -2px 4px rgba(40,40,120,.28),0 0 0 1px rgba(255,255,255,.16),0 10px 28px rgba(139,92,246,.32) !important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.btn-primary:hover,.nav-cta:hover,.niche-pick-btn:hover,.paywall-cta:hover,.hero-apple .btn-primary:hover,.prompt-bar #unifiedSearchBtn:hover{
  filter:brightness(1.12);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 4px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.14),0 10px 26px rgba(0,0,0,.45),0 0 30px rgba(139,92,246,.2) !important;
}
.btn-primary:active,.nav-cta:active,.niche-pick-btn:active{transform:translateY(0);filter:brightness(.97);}
.niche-pick-btn{color:#14122b !important;}
.niche-pick-btn i,.btn-primary i{color:inherit;}

/* Secondary pills: glass with a bright top edge */
.hero-apple .more-a,.btn-ghost,.settings-btn,.prompt-bar #unifiedFiltersToggle{
  background:var(--gloss-glass) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.35);
}
.hero-apple .more-a:hover,.btn-ghost:hover,.settings-btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08)) !important;}

/* App top navigation: glass container, glossy dark active pill */
@media(min-width:901px){
  .app-sidebar .sidebar-scroll{
    background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.02)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08),0 10px 30px rgba(0,0,0,.35);border:none !important;
  }
  .app-sidebar .sidebar-link.active:not([data-section="workspace"]){
    background:var(--gloss-dark) !important;color:#fff;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 0 0 1px rgba(255,255,255,.16),0 4px 12px rgba(0,0,0,.4) !important;
  }
  .app-sidebar .sidebar-link[data-section="workspace"]:not(.active){
    background:linear-gradient(180deg,rgba(139,92,246,.28),rgba(139,92,246,.10)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(139,92,246,.35) !important;
  }
}
@media(prefers-reduced-motion:reduce){.btn-primary,.nav-cta,.niche-pick-btn{transition:none;}}

/* ===== Premium black (dark only): near-black canvas, surfaces lit from the top with a hairline rim, restrained ===== */
:root,:root[data-theme="dark"]{color-scheme:dark;--bg:#0a0a0b;--bg-soft:#141416;--card:#131315;--border:rgba(255,255,255,.08);}
body{background:radial-gradient(1100px 420px at 50% -6%,rgba(139,92,246,.06),transparent 62%),#0a0a0b;}
.niche-row,.saved-card,.teaser-row,.step-card,.step-card:nth-child(2),.feature-card,.price-card,.ns-card,.auth-modal,.demo-box{
  background:linear-gradient(180deg,#171719 0%,#0f0f11 100%) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 60px rgba(0,0,0,.45) !important;
}
.demo-box{box-shadow:none !important;background:transparent !important;border:none !important;}
input,select,textarea{background:#101012;border-color:rgba(255,255,255,.10);}
input:focus,select:focus,textarea:focus{border-color:rgba(139,92,246,.55);box-shadow:0 0 0 3px rgba(139,92,246,.14);outline:none;}
header{border-bottom:1px solid rgba(255,255,255,.06);}
hr{border-color:rgba(255,255,255,.06);}

/* ===== Artlist-style frames: hairline light border, big radius, top-lit near-black fill, deep soft shadow ===== */
:root,:root[data-theme="dark"]{--border:rgba(255,255,255,.13);}
.niche-row,.saved-card,.teaser-row,.step-card,.step-card:nth-child(2),.feature-card,.price-card,.ns-card,.auth-modal,
.ws-col,.ws-card,.ws-tool,.ws-goalbar,.ws-onboard,.compare-stat,.callout-box,.faq-item,.testimonial-card,.blog-card,.guide-card,.stage-a,.filter-panel-grid{
  background:linear-gradient(180deg,#19191c 0%,#0e0e10 100%) !important;
  border:1px solid rgba(255,255,255,.13) !important;
  border-radius:28px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 70px rgba(0,0,0,.5) !important;
}
.ws-tool,.ws-card,.compare-stat,.ws-goalbar{border-radius:20px !important;}
.stage-a{border-bottom:none !important;border-radius:28px 28px 0 0 !important;}
.prompt-bar{background:linear-gradient(180deg,#19191c 0%,#0e0e10 100%) !important;border:1px solid rgba(255,255,255,.14) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 80px rgba(0,0,0,.55) !important;}
.step-card .step-num,.step-card:nth-child(2) .step-num{color:var(--accent) !important;background:none !important;}

/* ===== Brand: black and white with a lime accent. White fills and buttons with black text; lime for highlights, numbers, radar, badges ===== */
:root,:root[data-theme="dark"]{--accent:#8B5CF6;--accent2:#8B5CF6;--accent-fill:#F5F5F7;--accent-grad:linear-gradient(180deg,#ffffff,#e6e6ea);--purple-bg:rgba(139,92,246,.10);}
.step-num,.feature-icon-tile{color:#0a0a0b !important;}

/* ===== Typography: lighter, more refined. Inter, regular body, medium headings, gentle tracking ===== */
html,body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.005em;}
h1,h2,h3,h4,.hero h1,.hero.hero-apple h1,.page-head h1,.section-head h2,.insight h2,.step-card h3,.feature-card h3,.price-card h3,.final-cta h2{font-weight:500 !important;letter-spacing:-.035em !important;}
.hero.hero-apple h1{letter-spacing:-.045em !important;}
b,strong,.niche-row-name .name,.acct-info strong{font-weight:600;}
.btn,.btn-primary,.nav-cta,.niche-pick-btn,.paywall-cta,.hero-apple .btn-primary,.prompt-bar #unifiedSearchBtn,.hero-apple .more-a,button{font-weight:500 !important;}
.stat-num,.opportunity-score,.wr-a .x,.ws-big{font-weight:500 !important;}
.hero-apple .lead-a,.section-head p,.page-head p{font-weight:400;}
.nav-links a,.sidebar-link{font-weight:500 !important;}

/* White accent fills need dark text */
.plan-chip.pro,.acct-plan.pro,.plan-badge.plan-pro,.auth-avatar,.lyn-msg.me>span,.group-tab.active,.row-btn.save,.teaser-reveal-btn:hover,.ws-goal-opt.active,.ws-goal-opt.active b,.ws-goal-opt.active small{color:#0a0a0b !important;}
.plan-chip.pro i,.acct-plan.pro i{color:inherit;}

/* ===== Mist violet: soft violet to periwinkle gradient accent (used sparingly on key words, numbers and the radar) ===== */
:root,:root[data-theme="dark"]{--dusk:linear-gradient(90deg,#8B5CF6,#F5F3FF);}
.hero.hero-apple h1 span,:root[data-theme="dark"] .stat-num,.wr-a .x,.ws-big{
  background-image:var(--dusk) !important;-webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
.wr-a .x small{-webkit-text-fill-color:var(--muted) !important;color:var(--muted) !important;}
.radar-svg circle{stroke:url(#duskGrad);stroke-opacity:.6;}
.radar-svg path{stroke:rgba(139,92,246,.22);}
.blip{background:#D6C9FA;box-shadow:0 0 12px 3px rgba(205,189,247,.6);}
.radar-sweep{background:conic-gradient(from 0deg,rgba(205,189,247,0) 0deg,rgba(205,189,247,0) 285deg,rgba(245,243,255,.24) 340deg,rgba(214,201,250,.8) 359deg,rgba(214,201,250,0) 360deg);}

/* ===== Pro identity: Mist violet gradient on every Pro marker (chip, badges, featured pricing card) ===== */
:root,:root[data-theme="dark"]{--pro-grad:linear-gradient(135deg,#8B5CF6 0%,#F5F3FF 100%);}
.price-badge,.plan-chip.pro,.acct-plan.pro,.plan-badge.plan-pro{background:var(--pro-grad) !important;color:#14122b !important;border:none !important;}
.plan-chip.pro,.acct-plan.pro{box-shadow:0 0 16px rgba(245,243,255,.5) !important;}
.price-card.featured{
  background:linear-gradient(180deg,#1c1b2e 0%,#0f0f17 100%) !important;
  border:1px solid rgba(139,92,246,.55) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(245,243,255,.16),0 30px 80px rgba(139,92,246,.30) !important;
}
.price-card.featured:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(245,243,255,.3),0 34px 90px rgba(139,92,246,.42) !important;}
.price-card.featured .price-amount{background-image:var(--dusk);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.price-card.featured .price-amount small{-webkit-text-fill-color:#a8a8ba;color:#a8a8ba;}
.price-card.featured .price-features li i{color:#8B5CF6;}

/* ===== One consistent look: every accent fill is the Mist violet gradient (buttons, dots, avatars, active chips) ===== */
:root,:root[data-theme="dark"]{--accent-fill:#8B5CF6;--accent-grad:linear-gradient(135deg,#8B5CF6 0%,#F5F3FF 100%);}
.page-kicker .dot{background:var(--pro-grad) !important;box-shadow:0 0 0 3px rgba(245,243,255,.25) !important;}
.auth-avatar,.acct-card .auth-avatar{background:var(--pro-grad) !important;color:#14122b !important;}
.step-num,.feature-icon-tile{color:#14122b !important;}
.plan-chip.pro,.acct-plan.pro,.plan-badge.plan-pro,.price-badge,.group-tab.active,.row-btn.save,.teaser-reveal-btn:hover,.ws-goal-opt.active,.ws-goal-opt.active b,.ws-goal-opt.active small,.lyn-msg.me>span{color:#14122b !important;}
/* Huy hiệu gói Basic: cùng hình dạng với Pro nhưng nền xám, để phân biệt rõ hai gói */
.plan-chip.basic-tier{background:var(--bg-soft) !important;color:var(--text) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14) !important;}

.app-sidebar .sidebar-link[data-section="workspace"].active{color:#14122b !important;box-shadow:0 6px 22px rgba(139,92,246,.4) !important;}

/* Fewer competing colours: the "above usual views" highlight is a positive signal, so it uses the brand violet instead of red */
.niche-spike-highlight{background:rgba(245,243,255,.14) !important;color:#B9BDF7 !important;border:none !important;}
:root[data-theme="dark"] .niche-spike-highlight{color:#B9BDF7 !important;}

/* ===== Eye comfort: soften the white-on-black contrast, and calm down the glow/brightness of the accent ===== */
:root,:root[data-theme="dark"]{
  --text:#d9d9dd;--bg:#0d0d0e;--bg-soft:#161618;--card:#151517;
}
body{background:radial-gradient(1100px 420px at 50% -6%,rgba(139,92,246,.045),transparent 62%),#0d0d0e;}
h1,h2,h3,h4,strong,b{color:#eaeaee;}
.hero-apple h1{color:#eaeaee;}
/* Less blinding accent: darken the bright stop, drop the glow radius/opacity everywhere */
.btn-primary,.nav-cta,.niche-pick-btn,.paywall-cta,.hero-apple .btn-primary,.prompt-bar #unifiedSearchBtn,.app-sidebar .sidebar-link[data-section="workspace"].active{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 4px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.4) !important;
}
.btn-primary:hover,.nav-cta:hover,.niche-pick-btn:hover,.paywall-cta:hover,.hero-apple .btn-primary:hover,.prompt-bar #unifiedSearchBtn:hover{
  filter:brightness(1.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 4px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.1),0 8px 20px rgba(0,0,0,.45) !important;
}
.plan-chip.pro,.acct-plan.pro{box-shadow:0 0 8px rgba(245,243,255,.25) !important;}
.page-kicker .dot{box-shadow:0 0 0 3px rgba(245,243,255,.14) !important;}
.hero.hero-apple::before{opacity:.55;}
.radar-sweep{filter:brightness(.8);}
.blip{box-shadow:0 0 8px 2px rgba(245,243,255,.4) !important;opacity:.7 !important;}
.step-card,.feature-card,.price-card{transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;}
/* !important vì có 1 rule cũ hơn (dòng ~36, ":root[data-theme=dark] .price-card:hover") tính điểm ưu
   tiên cao hơn (thêm :root + [data-theme]) nên luôn thắng bất kể thứ tự khai báo — chặn hẳn bằng !important
   cho chắc thay vì phải viết lại selector dài dòng để đua độ ưu tiên. */
.step-card:hover,.feature-card:hover,.price-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:inset 0 0 0 1px rgba(245,243,255,.25),0 14px 36px rgba(0,0,0,.4) !important;
}

/* Nút bấm phản hồi khi bấm + nảy nhẹ kiểu lò xo khi thả ra (trước đây apple.css tắt hẳn transform).
   2 tốc độ khác nhau: bấm xuống nhanh/gọn (.08s ease), thả ra chậm hơn + có "overshoot" (cubic-bezier
   nảy quá đà rồi mới về đúng vị trí) — đây là quy tắc CSS transition đổi theo từng trạng thái. */
.btn{transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .15s ease;position:relative;overflow:hidden;}
.btn:active{transform:scale(.96) !important;transition:transform .08s ease !important;}

/* Gợn sóng lan ra từ đúng điểm vừa bấm (xem interact.js) — .ripple do JS tự tạo rồi tự xoá sau khi chạy xong. */
.ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%);
  transform:scale(0);animation:rippleExpand .6s ease-out forwards;
}
@keyframes rippleExpand{to{transform:scale(2.6);opacity:0;}}
@media(prefers-reduced-motion:reduce){.ripple{display:none;}}

/* Ánh sáng nhẹ theo con trỏ chuột trên mặt kính của card (xem interact.js cập nhật --mx/--my) — mô
   phỏng phản chiếu ánh sáng thật trên kính, chỉ hiện khi hover, tắt hẳn nếu khách bật giảm chuyển động. */
.price-card,.feature-card,.step-card{position:relative;isolation:isolate;}
.price-card::after,.feature-card::after,.step-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:2;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 62%);
  transition:opacity .35s ease;
}
.price-card:hover::after,.feature-card:hover::after,.step-card:hover::after{opacity:1;}
@media(prefers-reduced-motion:reduce){.price-card::after,.feature-card::after,.step-card::after{display:none;}}

/* Card/section hiện dần khi cuộn tới (xem reveal.js) — im lặng trên trình duyệt không hỗ trợ IntersectionObserver
   hoặc khách bật "giảm chuyển động", reveal.js sẽ tự thêm .in-view ngay lập tức trong 2 trường hợp đó.
   .in-view CỐ Ý chỉ 1 class (độ ưu tiên thấp hơn hẳn ".price-card:hover" 2 lớp) để hover vẫn luôn nhấc
   card lên được kể cả sau khi đã hiện — dùng ".reveal.in-view" (2 lớp) trước đây vô tình ngang độ ưu
   tiên với hover rồi thắng do khai báo sau, làm mất hẳn hiệu ứng nhấc card. */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.in-view{opacity:1;transform:translateY(0);}
.steps-grid .reveal:nth-child(2),.g-steps .reveal:nth-child(2),.bento .reveal:nth-child(2),.faq-list .reveal:nth-child(2),.pricing-grid .reveal:nth-child(2){transition-delay:.08s;}
.steps-grid .reveal:nth-child(3),.g-steps .reveal:nth-child(3),.bento .reveal:nth-child(3),.faq-list .reveal:nth-child(3),.pricing-grid .reveal:nth-child(3){transition-delay:.16s;}
.steps-grid .reveal:nth-child(4),.g-steps .reveal:nth-child(4),.bento .reveal:nth-child(4),.faq-list .reveal:nth-child(4){transition-delay:.24s;}
@media(prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ===== Liquid Glass (kiểu iOS đời mới nhất): thanh nav nổi lên khỏi mép trên, kính mờ đậm, có ánh sáng
   viền trên mô phỏng ánh phản chiếu trên mặt kính thật; nút bấm ghost/pill cũng chuyển sang chất liệu kính.
   Chỉ áp dụng cho header/nav công khai (index/features/guide/faq) — app.html dùng thanh bên riêng. ===== */
header{
  top:12px !important;
  margin:0 auto !important;
  max-width:1120px;
  border-radius:22px !important;
  border:1px solid rgba(255,255,255,.14) !important;
  background:rgba(24,24,28,.5) !important;
  -webkit-backdrop-filter:blur(28px) saturate(200%) !important;
  backdrop-filter:blur(28px) saturate(200%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.04),0 20px 50px -22px rgba(0,0,0,.6) !important;
}
@media(max-width:900px){header{margin:0 12px !important;top:8px !important;}}
nav{padding:14px 22px;}

/* Nav co nhỏ lại khi cuộn xuống khỏi đầu trang (xem interact.js toggle .nav-compact trên header) —
   giống thanh công cụ Safari/macOS tự thu gọn, cảm giác "thông minh" hơn hẳn 1 thanh đứng yên cố định. */
header.nav-compact{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.04),0 12px 30px -16px rgba(0,0,0,.6) !important;}
header.nav-compact nav{padding:9px 22px;}
header.nav-compact .logo{font-size:17px;gap:7px;}
header.nav-compact .logo-icon{width:21px;height:21px;}

.btn-ghost,.hero-apple .more-a,.quick-filter-tile{
  background:rgba(255,255,255,.07) !important;
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 10px 26px -14px rgba(0,0,0,.5);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn-ghost:hover,.quick-filter-tile:hover{background:rgba(255,255,255,.12) !important;}
.btn-primary,.nav-cta{
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
}

/* ===== Liquid Glass, tiếp tục: mọi khối bề mặt (card, popup đăng nhập, khu Lynx Radar trong app) đổi
   từ nền đặc sang kính mờ thật — đè lên đúng danh sách selector "Artlist-style frames" ở trên (khai báo
   sau + cùng !important nên thắng). Giữ nguyên bo góc/đổ bóng, chỉ đổi chất liệu nền. ===== */
.niche-row,.saved-card,.teaser-row,.step-card,.step-card:nth-child(2),.feature-card,.price-card,.ns-card,.auth-modal,
.ws-col,.ws-card,.ws-tool,.ws-goalbar,.ws-onboard,.compare-stat,.callout-box,.faq-item,.testimonial-card,.guide-card,.stage-a,.filter-panel-grid{
  background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 100%) !important;
  -webkit-backdrop-filter:blur(30px) saturate(220%) brightness(1.12);
  backdrop-filter:blur(30px) saturate(220%) brightness(1.12);
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.22),inset 0 0 40px rgba(255,255,255,.02),0 24px 60px -18px rgba(0,0,0,.55) !important;
}
.prompt-bar{
  background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.015) 100%) !important;
  -webkit-backdrop-filter:blur(30px) saturate(220%) brightness(1.12);
  backdrop-filter:blur(30px) saturate(220%) brightness(1.12);
  border:1px solid rgba(255,255,255,.16) !important;
}

/* Quầng sáng màu cố định theo màn hình (không cuộn theo trang) để kính mờ THẬT SỰ có gì đó rực rỡ để
   khúc xạ — trước đó nền gần như đen phẳng nên dù có backdrop-filter cũng không thấy hiệu ứng gì rõ.
   3 quầng xanh lá/cyan/tím thương hiệu, trôi nhẹ nhàng chậm rãi, không gây chóng mặt hay phân tâm. */
body::before,body::after{
  content:'';position:fixed;z-index:-1;inset:0;pointer-events:none;filter:blur(90px);
}
body::before{
  background:radial-gradient(600px 600px at -5% -8%,rgba(139,92,246,.4),transparent 68%);
  animation:orbFloatA 24s ease-in-out infinite;
}
body::after{
  background:radial-gradient(560px 560px at 104% 102%,rgba(245,243,255,.35),transparent 68%);
  animation:orbFloatB 28s ease-in-out infinite;
}
@keyframes orbFloatA{0%,100%{transform:translate(0,0);}50%{transform:translate(3vw,3vh);}}
@keyframes orbFloatB{0%,100%{transform:translate(0,0);}50%{transform:translate(-3vw,-3vh);}}
@media(prefers-reduced-motion:reduce){body::before,body::after{animation:none;}}
.prompt-bar .quick-filter-tile{background:rgba(255,255,255,.05) !important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
@media(min-width:901px){
  .app-sidebar{
    background:rgba(20,20,24,.5) !important;
    -webkit-backdrop-filter:blur(28px) saturate(200%);
    backdrop-filter:blur(28px) saturate(200%);
    border-bottom:1px solid rgba(255,255,255,.1) !important;
  }
  .sidebar-scroll{background:rgba(255,255,255,.05) !important;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);}
}

/* ===== THỬ MÀU: "Violet to white" thay cho xanh lá-cyan hiện tại — đè lên đúng các biến màu thương
   hiệu (accent, accent-grad, pro-grad, dusk, gloss-teal) để đổi toàn site chỉ bằng 1 khối này. Không ưng
   thì xoá cả khối là về lại xanh lá-cyan ngay, không phải sửa rải rác nhiều chỗ. ===== */
:root,:root[data-theme="dark"]{
  --accent:#8B5CF6;--accent2:#8B5CF6;--accent-fill:#8B5CF6;
  --accent-grad:linear-gradient(135deg,#8B5CF6 0%,#F5F3FF 100%);
  --pro-grad:linear-gradient(135deg,#8B5CF6 0%,#F5F3FF 100%);
  --dusk:linear-gradient(90deg,#8B5CF6,#F5F3FF);
  --gloss-teal:linear-gradient(180deg,rgba(255,255,255,.38) 0%,rgba(255,255,255,.06) 48%,rgba(255,255,255,0) 54%),linear-gradient(135deg,#8B5CF6 0%,#F5F3FF 100%);
  --purple-bg:rgba(139,92,246,.12);
}

/* ===== iOS 26 style motion pass #2: sliding segmented tab indicator, sheet-style auth modal, section crossfade ===== */

/* Auth modal as a spring-loaded sheet instead of a centered fade-in */
.auth-modal-overlay{opacity:0;transition:opacity .3s ease;}
.auth-modal-overlay.show{opacity:1;}
.auth-modal{
  transform:translateY(50px) scale(.96);opacity:0;
  transition:transform .45s cubic-bezier(.32,.94,.36,1.15), opacity .3s ease;
}
.auth-modal-overlay.show .auth-modal{transform:translateY(0) scale(1);opacity:1;}
@media(max-width:600px){
  .auth-modal-overlay{align-items:flex-end !important;padding:0 !important;}
  .auth-modal{
    max-width:100% !important;border-radius:24px 24px 0 0 !important;
    padding-bottom:calc(32px + env(safe-area-inset-bottom,0px));
    transform:translateY(100%) scale(1);
  }
  .auth-modal-overlay.show .auth-modal{transform:translateY(0) scale(1);}
}
@media(prefers-reduced-motion:reduce){
  .auth-modal-overlay,.auth-modal{transition:none !important;}
}

/* App: sliding pill indicator behind the active top-nav tab (wide screens) */
@media(min-width:901px){
  #sidebarNav{position:relative;}
  .sidebar-nav-indicator{
    position:absolute;top:0;left:0;height:100%;border-radius:999px;z-index:0;pointer-events:none;
    background:#26262a;box-shadow:inset 0 0 0 1px #34343a;
    transition:transform .38s cubic-bezier(.32,.94,.36,1.15), width .38s cubic-bezier(.32,.94,.36,1.15);
  }
  .sidebar-nav-indicator.hide{opacity:0;}
  #sidebarNav .sidebar-link{position:relative;z-index:1;}
  #sidebarNav .sidebar-link.active{background:transparent !important;box-shadow:none !important;}
  #sidebarNav .sidebar-link[data-section="workspace"].active{background:linear-gradient(180deg,#8B5CF6,#F5F3FF) !important;color:#0a0a0b !important;box-shadow:0 6px 22px rgba(139,92,246,.35) !important;}
  @media(prefers-reduced-motion:reduce){.sidebar-nav-indicator{transition:none !important;}}
}

/* App: crossfade + scale-in when switching between sections (Scan/Workspace/Community/...) */
.app-section{transition:opacity .32s cubic-bezier(.22,1,.36,1), transform .32s cubic-bezier(.22,1,.36,1);}
.app-section.section-enter{opacity:0;transform:scale(.98);}
@media(prefers-reduced-motion:reduce){.app-section{transition:none !important;}}

/* Skeleton shimmer while a scan is loading, instead of a bare spinner */
.lynx-state-compact{gap:10px !important;margin-bottom:16px;opacity:.85;}
.lynx-state-compact .lynx-state-title{font-size:14px;}
.skel-list{display:flex;flex-direction:column;gap:14px;}
.skel-row{background:linear-gradient(180deg,rgba(255,255,255,.09) 0%,rgba(255,255,255,.02) 100%);border:1px solid var(--border);border-radius:22px;padding:18px 20px;}
.skel-identity{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.skel-lines{flex:1;display:flex;flex-direction:column;gap:8px;}
.skel-stats{display:flex;gap:10px;margin-bottom:16px;}
.skel-stat{flex:1;height:52px;border-radius:12px;}
.skel-videos{display:flex;gap:8px;}
.skel-thumb{flex:1;aspect-ratio:16/9;border-radius:10px;}
.shimmer{position:relative;overflow:hidden;background:rgba(255,255,255,.06);border-radius:8px;}
.skel-avatar.shimmer{width:52px;height:52px;border-radius:50%;flex:none;}
.skel-line.shimmer{height:12px;}
.shimmer::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  animation:shimmerSweep 1.4s ease-in-out infinite;
}
@keyframes shimmerSweep{100%{transform:translateX(100%);}}
@media(prefers-reduced-motion:reduce){.shimmer::after{animation:none;}}

/* Toast morphs from a small "Dynamic Island" pill instead of sliding in from the corner */
.toast-container{
  bottom:auto !important;top:calc(12px + env(safe-area-inset-top,0px));left:50% !important;right:auto !important;
  transform:translateX(-50%);align-items:center;
}
.toast{
  border-radius:999px !important;padding:10px 20px !important;max-width:min(90vw,420px);
  background:rgba(20,20,24,.85) !important;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12);
  opacity:0;transform:translateY(-8px) scale(.5);transform-origin:top center;
  transition:opacity .28s cubic-bezier(.32,.94,.36,1.15), transform .38s cubic-bezier(.32,.94,.36,1.15);
}
.toast.show{opacity:1;transform:translateY(0) scale(1);}
@media(prefers-reduced-motion:reduce){.toast{transition:none !important;}}

/* Result cards bung ra nối tiếp nhau thay vì hiện cả loạt cùng lúc */
.niche-row.stagger-in{
  animation:staggerRowIn .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i,0) * 55ms);
}
@keyframes staggerRowIn{
  from{opacity:0;transform:translateY(18px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@media(prefers-reduced-motion:reduce){.niche-row.stagger-in{animation:none;}}

/* Giữ nút bấm lâu hơn ~180ms -> lõm sâu thêm dần như nút vật lý, thả ra bật lại ngay (interact.js) */
.btn.btn-held{
  transform:scale(.90) !important;
  box-shadow:inset 0 4px 12px rgba(0,0,0,.4), inset 0 1px 3px rgba(0,0,0,.3) !important;
  filter:brightness(.92);
  transition:transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, filter .3s ease !important;
}
@media(prefers-reduced-motion:reduce){.btn.btn-held{transition:none !important;}}

/* Rubber-band overscroll feel on the results list (mirrors iOS bounce) */
.demo-box,#resultBox,#externalScanResult{overscroll-behavior-y:contain;}
@supports (-webkit-touch-callout:none){
  .demo-box,#resultBox,#externalScanResult{-webkit-overflow-scrolling:touch;}
}