:root{--bg:#08090c;--side:#0b0c10;--panel:#101218;--panel2:#141720;--line:#222631;--text:#f4f5f7;--muted:#8a93a3;--violet:#7b61ff;--violet2:#a99cff;--green:#39d69d;--amber:#f1b958;--red:#ff6578;--blue:#53b4ff}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14px}button,input,textarea,select{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:var(--side);border-right:1px solid var(--line);padding:18px 13px;display:flex;flex-direction:column;z-index:30}.brand{display:flex;align-items:center;gap:10px;padding:5px 7px 16px}.mark{width:39px;height:39px;border-radius:11px;background:linear-gradient(135deg,var(--violet),#4032af);display:grid;place-items:center;font-weight:950;font-size:19px}.brand strong,.brand small{display:block}.brand strong{font-size:13px;letter-spacing:.12em}.brand small{font-size:7px;color:var(--muted);letter-spacing:.15em;margin-top:3px}.workspace{border:1px solid var(--line);border-radius:12px;padding:11px;margin-bottom:12px}.workspace>span{font-size:7px;color:var(--muted);font-weight:900;letter-spacing:.12em}.workspace select{margin-top:7px;width:100%;background:#0d0f14;border:0;color:#fff;font-size:10px;outline:none}.sidebar nav{display:grid;gap:3px}.nav{border:0;background:transparent;color:#8f98a8;border-radius:9px;text-align:left;padding:10px 11px;display:flex;gap:11px;font-size:10px;font-weight:750}.nav:hover{background:#12151c;color:#fff}.nav.active{background:#181b24;color:#fff;box-shadow:inset 3px 0 var(--violet)}.nav span{flex:1}.side-foot{margin-top:auto;padding:10px 8px}.engine{display:flex;align-items:center;gap:8px;color:#aab1bd;font-size:9px;font-weight:800}.engine i{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px var(--amber)}.engine.online i{background:var(--green);box-shadow:0 0 10px var(--green)}.engine.offline i{background:var(--red);box-shadow:0 0 10px var(--red)}.engine.large{margin-top:20px;padding:14px;border:1px solid var(--line);border-radius:12px}.side-foot small{display:block;font-size:7px;color:#626b7a;margin-top:7px}.main{margin-left:250px;min-height:100vh}.topbar{height:68px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:0 28px;position:sticky;top:0;background:rgba(8,9,12,.94);backdrop-filter:blur(10px);z-index:20}.topbar span{font-size:8px;color:var(--muted);letter-spacing:.1em}.topbar b{color:#fff}.menu{display:none}.primary,.secondary,.link-btn{border:0;border-radius:9px;font-weight:850}.primary{background:var(--violet);color:#fff;padding:11px 15px}.primary:hover{background:#8972ff}.primary.small{padding:9px 13px;font-size:9px}.secondary{background:#171a22;color:#d2d6de;border:1px solid var(--line);padding:10px 13px}.secondary:hover{border-color:#3b4250;color:#fff}.secondary.danger{color:#ff8c99}.link-btn{background:transparent;color:var(--violet2);padding:7px}.wide{width:100%;padding:14px}.page{display:none;max-width:1500px;margin:auto;padding:30px 31px 70px}.page.active{display:block}.hero{border:1px solid var(--line);border-radius:21px;background:radial-gradient(circle at 88% 15%,rgba(123,97,255,.19),transparent 32%),linear-gradient(135deg,#12141a,#0c0e13);min-height:390px;padding:38px;display:grid;grid-template-columns:1.25fr .75fr;align-items:center;gap:35px}.badge,.page-title>span,.panel-head span,.kicker{font-size:7px;font-weight:900;letter-spacing:.14em;color:var(--violet2)}.hero h1{font-size:clamp(46px,5.3vw,76px);line-height:.9;letter-spacing:-.065em;margin:14px 0}.hero h1 em{font-style:normal;color:var(--violet2)}.hero p{max-width:680px;color:var(--muted);line-height:1.6}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.hero-score{justify-self:end;width:230px;height:230px;border-radius:50%;border:14px solid #262a36;border-top-color:var(--violet);display:grid;place-content:center;text-align:center}.hero-score small{font-size:7px;color:var(--muted);letter-spacing:.1em}.hero-score strong{font-size:62px;line-height:1;margin:7px 0}.hero-score span{font-size:8px;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:11px 0}.metrics article,.result-summary article,.compare-metrics article{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:18px}.metrics small,.result-summary small,.compare-metrics small{font-size:7px;color:var(--muted);letter-spacing:.1em}.metrics strong,.result-summary strong,.compare-metrics strong{display:block;font-size:28px;margin-top:8px}.metrics span{font-size:7px;color:#687180}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.panel{border:1px solid var(--line);background:var(--panel);border-radius:15px;padding:19px}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}.panel-head h2{font-size:17px;margin:5px 0 0}.empty{color:var(--muted);padding:24px;text-align:center}.page-title{padding:16px 0 21px}.page-title h1{font-size:40px;letter-spacing:-.05em;margin:6px 0}.page-title p,.muted{color:var(--muted);line-height:1.55}.page-title.inline{display:flex;justify-content:space-between;align-items:end}.project-layout .panel:first-child{align-self:start}.panel label{display:block;font-size:8px;color:#aab1bd;font-weight:800;margin-top:11px}.panel input,.panel textarea,.panel select{width:100%;margin-top:6px;background:#0c0e13;border:1px solid var(--line);color:#fff;padding:11px;border-radius:9px;outline:none}.panel input:focus,.panel textarea:focus,.panel select:focus{border-color:var(--violet)}.panel textarea{min-height:90px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.form-grid.two{max-width:760px}.list{display:grid;gap:8px}.list-item{border:1px solid var(--line);border-radius:11px;padding:13px;background:#0d0f14;display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center}.list-item strong,.list-item small{display:block}.list-item strong{font-size:11px}.list-item small{font-size:8px;color:var(--muted);margin-top:4px}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.row-actions button{font-size:8px}.scan-layout{grid-template-columns:minmax(0,1fr) 330px}.target{border:1px solid var(--line);border-radius:11px;background:#0c0e13;padding:13px}.target small,.target strong,.target span{display:block}.target small{font-size:7px;color:var(--violet2);font-weight:900}.target strong{font-size:18px;margin-top:6px}.target span{font-size:8px;color:var(--muted);margin-top:4px}.scan-modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0}.scan-mode{border:1px solid var(--line);background:#0d0f14;color:#fff;border-radius:11px;padding:13px;text-align:left}.scan-mode.active{border-color:var(--violet);box-shadow:inset 0 0 0 1px var(--violet)}.scan-mode b,.scan-mode span{display:block}.scan-mode b{font-size:11px}.scan-mode span{font-size:8px;color:var(--muted);margin-top:4px}.checks{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.checks span{border:1px solid var(--line);border-radius:999px;padding:7px 9px;font-size:8px;color:#9da5b3}.confirm{display:flex!important;align-items:center;gap:7px;border-top:1px solid var(--line);padding-top:13px!important;margin-top:10px!important}.confirm input{width:auto!important;margin:0!important}.status{min-height:18px;text-align:center;font-size:8px;color:var(--muted);margin-top:9px}.scan-layout aside{align-self:start}.scan-layout aside h3{font-size:13px}.scan-layout aside p{font-size:9px;color:var(--muted);line-height:1.55}.scan-layout aside hr{border:0;border-top:1px solid var(--line);margin:17px 0}.result-summary{display:grid;grid-template-columns:180px repeat(4,1fr);gap:9px;margin-bottom:10px}.result-summary .score strong{font-size:50px}.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:13px}.filters{display:flex;gap:5px;flex-wrap:wrap}.filter,.device{border:1px solid var(--line);background:#0d0f14;color:#919aa9;border-radius:999px;padding:7px 10px;font-size:8px;font-weight:800}.filter.active,.device.active{background:var(--violet);border-color:var(--violet);color:#fff}.toolbar select{background:#0d0f14;border:1px solid var(--line);color:#fff;border-radius:8px;padding:8px;font-size:8px}.findings{display:grid;gap:7px}.finding{border:1px solid var(--line);border-radius:11px;background:#0c0e13;padding:14px}.finding.known{opacity:.62;border-style:dashed}.finding-top{display:flex;gap:6px;align-items:center}.sev{border-radius:999px;padding:4px 6px;font-size:7px;font-weight:950;text-transform:uppercase}.sev.alta{color:var(--red);background:rgba(255,101,120,.1)}.sev.media{color:var(--amber);background:rgba(241,185,88,.1)}.sev.bassa{color:var(--violet2);background:rgba(123,97,255,.1)}.cat,.page-pill,.known-pill{font-size:7px;color:var(--muted);text-transform:uppercase}.page-pill{margin-left:auto;max-width:43%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.known-pill{color:var(--green)}.finding h3{font-size:11px;margin:8px 0 5px}.finding p{font-size:8px;color:var(--muted);line-height:1.5;margin:4px 0}.fix{margin-top:9px;padding:9px;border-left:2px solid var(--green);background:#0b1210;color:#a7c9ba;font-size:8px}.finding .actions{margin-top:8px}.finding .actions button{font-size:7px;padding:7px 9px}.page-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.page-card{border:1px solid var(--line);background:#0d0f14;border-radius:10px;padding:12px}.page-card strong,.page-card small{display:block}.page-card strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.page-card small{font-size:7px;color:var(--muted);margin-top:4px}.compare-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:10px 0}.compare-metrics .new strong{color:var(--red)}.compare-metrics .persistent strong{color:var(--amber)}.compare-metrics .resolved strong{color:var(--green)}.mini-finding{border-top:1px solid var(--line);padding:9px 0}.mini-finding strong,.mini-finding small{display:block}.mini-finding strong{font-size:9px}.mini-finding small{font-size:7px;color:var(--muted);margin-top:3px}.gate-shell{display:grid;grid-template-columns:300px 1fr;gap:10px}.gate-result{border:1px solid var(--line);border-radius:16px;padding:27px;text-align:center;background:var(--panel)}.gate-result.pass{border-color:rgba(57,214,157,.35)}.gate-result.block{border-color:rgba(255,101,120,.35)}.gate-result strong{font-size:42px;display:block;margin:12px 0}.gate-result.pass strong{color:var(--green)}.gate-result.block strong{color:var(--red)}.gate-checks{display:grid;gap:7px}.gate-check{border:1px solid var(--line);border-radius:10px;padding:13px;background:var(--panel);display:flex;justify-content:space-between;gap:12px}.gate-check b{font-size:9px}.gate-check span{font-size:8px}.pass-text{color:var(--green)}.fail-text{color:var(--red)}.preview-stage{min-height:650px;border:1px solid var(--line);border-radius:15px;padding:20px;background:#060709;overflow:auto}.preview{margin:auto;background:#fff;border-radius:10px;overflow:hidden;transition:.2s}.preview.desktop{width:100%;max-width:1180px}.preview.tablet{width:768px;max-width:100%}.preview.mobile{width:390px;max-width:100%}.browser{height:32px;background:#1a1d24;color:#777f8d;display:flex;align-items:center;gap:5px;padding:0 9px;font-size:7px}.browser i{width:6px;height:6px;border-radius:50%;background:#505868}.browser span{margin-left:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview iframe{width:100%;height:680px;border:0;display:block}.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.report-grid article{border:1px solid var(--line);background:var(--panel);border-radius:15px;padding:23px}.report-grid article>span{font-size:8px;color:var(--violet2);font-weight:900}.report-grid h3{font-size:20px;margin:11px 0 6px}.report-grid p{font-size:9px;color:var(--muted);min-height:35px}.file-btn{display:inline-block;position:relative;overflow:hidden}.file-btn input{position:absolute;inset:0;opacity:0;cursor:pointer}.toast{position:fixed;z-index:100;left:50%;bottom:24px;transform:translate(-50%,15px);background:#fff;color:#111318;border-radius:999px;padding:10px 15px;font-size:8px;font-weight:850;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1080px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:none}.main{margin-left:0}.menu{display:block;border:0;background:#171a22;color:#fff;border-radius:8px;padding:8px 10px}.grid2,.scan-layout,.gate-shell{grid-template-columns:1fr}.hero{grid-template-columns:1fr}.hero-score{justify-self:start}.metrics{grid-template-columns:1fr 1fr}.result-summary{grid-template-columns:1fr 1fr}.result-summary .score{grid-column:1/-1}.page-cards,.report-grid,.grid3{grid-template-columns:1fr 1fr}.topbar{padding:0 15px}}
@media(max-width:700px){.page{padding:20px 13px 65px}.topbar{height:62px}.topbar .primary{font-size:8px}.hero{padding:24px 19px}.hero h1{font-size:44px}.hero-score{width:170px;height:170px}.hero-score strong{font-size:48px}.metrics,.form-grid,.scan-modes,.result-summary,.compare-metrics,.page-cards,.report-grid,.grid3{grid-template-columns:1fr}.page-title.inline,.toolbar{align-items:flex-start;flex-direction:column}.page-title h1{font-size:34px}.project-layout{grid-template-columns:1fr}.row-actions{margin-top:8px}.list-item{grid-template-columns:1fr}.preview-stage{padding:9px}}


/* NEXELYT 2.1 — Fix & Design */
.nav-label{
  margin:12px 11px 5px;
  font-size:6px;
  font-weight:950;
  color:#515a69;
  letter-spacing:.17em;
}
.nav b{
  margin-left:auto;
  font-size:6px;
  color:var(--violet2);
  letter-spacing:.08em;
}
.sidebar nav{
  overflow-y:auto;
  min-height:0;
  scrollbar-width:thin;
}
.side-foot{flex:none}

/* Fix Center */
.fix-layout{
  display:grid;
  grid-template-columns:340px minmax(0,1fr);
  gap:10px;
  align-items:start;
}
.fix-index{
  position:sticky;
  top:80px;
  max-height:calc(100vh - 105px);
  overflow:auto;
}
.fix-index-list{display:grid;gap:6px}
.fix-index-item{
  width:100%;
  border:1px solid var(--line);
  background:#0d0f14;
  color:#fff;
  border-radius:10px;
  padding:11px;
  text-align:left;
}
.fix-index-item.active{
  border-color:var(--violet);
  background:#161526;
}
.fix-index-item small,.fix-index-item strong{display:block}
.fix-index-item small{
  color:var(--muted);
  font-size:7px;
  text-transform:uppercase;
  margin-bottom:4px;
}
.fix-index-item strong{font-size:9px;line-height:1.35}
.fix-detail>h2{
  font-size:31px;
  letter-spacing:-.04em;
  margin:12px 0 8px;
}
.fix-explanation{
  margin:20px 0 12px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#0c0e13;
}
.fix-explanation small,.code-head small{
  color:var(--violet2);
  font-size:7px;
  font-weight:950;
  letter-spacing:.12em;
}
.fix-explanation p{margin:6px 0 0;line-height:1.55}
.code-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:15px;
  margin:18px 0 8px;
}
.code-head strong,.code-head small{display:block}
.code-head strong{font-size:12px;margin-top:4px}
pre{
  margin:0;
  padding:18px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#07080b;
  color:#d9dcff;
  font:12px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre-wrap;
  word-break:break-word;
  overflow:auto;
  min-height:145px;
}
.fix-note{
  font-size:8px;
  color:var(--muted);
  line-height:1.5;
  margin-top:11px;
  padding-left:10px;
  border-left:2px solid var(--amber);
}

/* Design Review */
.design-metrics{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:9px;
  margin-bottom:10px;
}
.design-metrics article{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:14px;
  padding:17px;
}
.design-metrics small{
  color:var(--muted);
  font-size:7px;
  letter-spacing:.1em;
}
.design-metrics strong{
  display:block;
  font-size:28px;
  margin-top:8px;
}
.token-section{margin-top:20px}
.token-section>small{
  color:var(--muted);
  font-size:7px;
  font-weight:900;
  letter-spacing:.12em;
}
.color-tokens{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.color-token{
  display:flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:6px 9px;
  background:#0d0f14;
  font:7px ui-monospace,monospace;
}
.color-dot{
  width:14px;height:14px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
}
.token-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:9px;
}
.token-list span{
  border:1px solid var(--line);
  background:#0d0f14;
  padding:6px 8px;
  border-radius:8px;
  color:#b4bac6;
  font-size:7px;
}
.design-suggestions{display:grid;gap:8px}
.design-card{
  border:1px solid var(--line);
  border-radius:11px;
  padding:14px;
  background:#0d0f14;
}
.design-card-head{
  display:flex;
  gap:7px;
  align-items:center;
  margin-bottom:8px;
}
.design-card h3{
  font-size:11px;
  margin:0;
}
.design-card p{
  color:var(--muted);
  font-size:8px;
  line-height:1.55;
  margin:5px 0;
}
.design-card .design-action{
  color:#d9dcec;
}
.design-card pre{
  min-height:0;
  margin-top:10px;
  font-size:10px;
  max-height:220px;
}
.copy-mini{
  border:0;
  background:transparent;
  color:var(--violet2);
  font-size:7px;
  font-weight:850;
  padding:4px;
  margin-left:auto;
}

@media(max-width:1100px){
  .fix-layout{grid-template-columns:1fr}
  .fix-index{position:relative;top:auto;max-height:none}
  .design-metrics{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:700px){
  .design-metrics{grid-template-columns:1fr 1fr}
  .design-layout{grid-template-columns:1fr}
  .fix-detail>h2{font-size:25px}
}
\n\n/* NEXELYT 2.2 — simplified scan, project context, PDF + AI prompt */
.advanced-toggle{margin:12px 5px 5px;border:1px solid var(--line);background:#0d0f14;color:#8f98a8;border-radius:9px;padding:10px;font-size:8px;font-weight:850;text-align:left}.advanced-toggle:hover{color:#fff;border-color:#363c49}.advanced-nav{display:grid;gap:3px}.scan-source-switch{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:10px}.source-btn{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:#fff;text-align:left;padding:17px}.source-btn b,.source-btn span{display:block}.source-btn b{font-size:12px}.source-btn span{font-size:8px;color:var(--muted);margin-top:5px}.source-btn.active{border-color:var(--violet);box-shadow:inset 0 0 0 1px var(--violet);background:#151427}.source-box{margin-bottom:12px}.source-box>small{display:block;color:var(--muted);font-size:8px;margin-top:7px}.scan-section-title{font-size:8px;font-weight:900;letter-spacing:.1em;color:var(--muted);margin-top:15px}.simple-help h3{margin-bottom:5px}.analysis-context{border:1px solid rgba(123,97,255,.35);background:linear-gradient(135deg,rgba(123,97,255,.11),rgba(83,180,255,.04));border-radius:14px;padding:14px 16px;margin-bottom:11px;display:flex;justify-content:space-between;align-items:center;gap:15px}.analysis-context small,.analysis-context strong,.analysis-context span{display:block}.analysis-context small{font-size:7px;color:var(--violet2);font-weight:900;letter-spacing:.12em}.analysis-context strong{font-size:15px;margin-top:5px}.analysis-context div>span{font-size:8px;color:var(--muted);margin-top:4px;word-break:break-all}.context-pill{border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:7px 10px;font-size:7px!important;color:#d7d9e0!important;white-space:nowrap}.graphic-idea-panel{margin-top:10px}.graphic-idea-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;align-items:stretch}.graphic-mock{min-height:390px;border-radius:19px;background:#090a0d;border:1px solid var(--line);padding:18px;overflow:hidden}.mock-nav{display:flex;gap:8px;align-items:center}.mock-nav i{width:28px;height:28px;border-radius:8px;background:var(--mock-accent,var(--violet))}.mock-nav span{height:7px;width:58px;border-radius:99px;background:#343844}.mock-nav span:last-child{width:40px}.mock-hero{padding:55px 6px 35px}.mock-hero small{display:block;color:var(--mock-accent,var(--violet2));font-size:7px;font-weight:900;letter-spacing:.15em}.mock-hero strong{display:block;font-size:33px;line-height:.92;letter-spacing:-.05em;margin-top:10px}.mock-hero>span{display:block;width:110px;height:35px;border-radius:999px;background:var(--mock-accent,var(--violet));margin-top:20px}.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.mock-cards i{height:92px;border-radius:11px;background:#151821;border:1px solid #252a36}.mock-cards i:nth-child(2){background:color-mix(in srgb,var(--mock-accent,var(--violet)) 22%,#151821)}.prompt-box{margin-top:20px;border:1px solid var(--line);border-radius:13px;background:#0b0d12;padding:13px}.prompt-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.prompt-head small,.prompt-head strong{display:block}.prompt-head small{font-size:7px;color:var(--violet2);font-weight:900}.prompt-head strong{font-size:11px;margin-top:3px}.prompt-box textarea{min-height:210px;font-size:9px;line-height:1.55;font-family:ui-monospace,monospace}.ai-actions{display:flex;gap:8px;margin-top:9px;flex-wrap:wrap}.report-grid-v22{grid-template-columns:repeat(2,1fr)}.report-grid-v22 .report-feature{background:linear-gradient(135deg,#161527,#101218);border-color:#343055}.report-grid-v22 .report-feature.complete{background:linear-gradient(135deg,#201137,#11141c);border-color:#5c397b}.report-grid-v22 article .primary{margin-top:7px}.source-btn,.advanced-toggle,.report-grid article{transition:.18s ease}.source-btn:hover,.report-grid article:hover{transform:translateY(-2px)}
@media(max-width:850px){.scan-source-switch,.graphic-idea-grid,.report-grid-v22{grid-template-columns:1fr}.analysis-context{align-items:flex-start;flex-direction:column}.context-pill{align-self:flex-start}.graphic-mock{min-height:320px}}


/* ======================================================================
   NEXELYT WEB 2.3 — MOTION UI REFRESH
   MODIFICHE UI / VISUAL + MOTION
   - palette più profonda e coerente
   - tipografia e spaziatura migliorate
   - gerarchia di card/pannelli più leggibile
   - hover e micro-interazioni solo con transform/opacity
   - ingressi staggered GPU-friendly
   - prefers-reduced-motion completo
   ====================================================================== */

/* [MODIFICA] Design tokens / palette */
:root{
  --bg:#07080c;
  --side:#0a0c11;
  --panel:#10131a;
  --panel2:#151923;
  --panel3:#0c0f15;
  --line:#242a37;
  --line-strong:#343b4c;
  --text:#f7f8fb;
  --muted:#98a1b1;
  --muted-soft:#6f7888;
  --violet:#8268ff;
  --violet-hover:#927cff;
  --violet2:#b3a5ff;
  --cyan:#58d5df;
  --green:#42dba5;
  --amber:#f4bc61;
  --red:#ff6d80;
  --blue:#62b8ff;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-standard:cubic-bezier(.22,.61,.36,1);
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-panel:0 18px 55px rgba(0,0,0,.18);
  --shadow-hover:0 20px 52px rgba(0,0,0,.25);
}

/* [MODIFICA] Tipografia e leggibilità */
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.5;
  letter-spacing:-.006em;
  background:
    radial-gradient(circle at 72% -20%,rgba(130,104,255,.08),transparent 31%),
    var(--bg);
}
.page-title h1{
  font-size:clamp(36px,4vw,52px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:840;
}
.page-title p,.muted{line-height:1.68}
.panel-head h2{font-size:18px;line-height:1.1;letter-spacing:-.025em}
.finding h3,.list-item strong,.page-card strong{line-height:1.35}

/* [MODIFICA] Sidebar / topbar */
.sidebar{
  width:264px;
  padding:20px 14px;
  background:
    radial-gradient(circle at 50% -5%,rgba(130,104,255,.09),transparent 24%),
    var(--side);
  border-right-color:rgba(255,255,255,.07);
}
.main{margin-left:264px}
.brand{padding:6px 8px 19px}
.mark{
  position:relative;
  isolation:isolate;
  width:42px;height:42px;
  border-radius:13px;
  background:linear-gradient(145deg,#9a86ff 0%,var(--violet) 44%,#4d3ac8 100%);
  box-shadow:0 10px 28px rgba(91,69,220,.28),inset 0 1px rgba(255,255,255,.22);
}
.mark::after{
  content:"";
  position:absolute;
  inset:-5px;
  z-index:-1;
  border-radius:17px;
  background:radial-gradient(circle,rgba(130,104,255,.28),transparent 64%);
  opacity:.55;
  animation:brand-breathe 4.8s var(--ease-standard) infinite alternate;
}
.workspace{
  border-color:rgba(255,255,255,.08);
  background:rgba(255,255,255,.018);
  border-radius:var(--radius-md);
  padding:13px;
}
.nav{
  position:relative;
  border-radius:11px;
  padding:10px 12px;
  transition:transform .3s var(--ease-out),background-color .3s var(--ease-out),color .3s var(--ease-out);
  will-change:transform;
}
.nav::before{
  content:"";
  position:absolute;
  left:2px;top:50%;
  width:3px;height:18px;
  border-radius:999px;
  background:linear-gradient(var(--violet2),var(--violet));
  opacity:0;
  transform:translateY(-50%) scaleY(.35);
  transition:transform .3s var(--ease-out),opacity .25s ease;
}
.nav:hover{background:#131722;color:#fff;transform:translate3d(3px,0,0)}
.nav.active{background:linear-gradient(90deg,rgba(130,104,255,.13),#171b25 64%);box-shadow:none}
.nav.active::before{opacity:1;transform:translateY(-50%) scaleY(1)}
.nav-label{margin-top:15px;color:#596374}
.topbar{
  height:72px;
  padding:0 31px;
  border-bottom-color:rgba(255,255,255,.07);
  background:rgba(7,8,12,.82);
  backdrop-filter:blur(14px) saturate(125%);
  -webkit-backdrop-filter:blur(14px) saturate(125%);
}

/* [MODIFICA] Bottoni / micro-interazioni */
.primary,.secondary,.link-btn,.filter,.device,.source-btn,.scan-mode,.fix-index-item,.advanced-toggle{
  transition:
    transform .3s var(--ease-out),
    opacity .3s var(--ease-out),
    background-color .3s var(--ease-out),
    border-color .3s var(--ease-out),
    color .3s var(--ease-out),
    box-shadow .3s var(--ease-out);
}
.primary{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#9079ff 0%,var(--violet) 52%,#694fe7 100%);
  box-shadow:0 9px 24px rgba(100,77,230,.18),inset 0 1px rgba(255,255,255,.16);
}
.primary:hover{
  background:linear-gradient(135deg,#9e8aff 0%,var(--violet-hover) 52%,#745aeb 100%);
  transform:translate3d(0,-2px,0);
  box-shadow:0 14px 30px rgba(100,77,230,.27),inset 0 1px rgba(255,255,255,.2);
}
.secondary:hover,.filter:hover,.device:hover{
  transform:translate3d(0,-1px,0);
  border-color:var(--line-strong);
  background:#1b202b;
}
.primary:active,.secondary:active,.filter:active,.device:active,.source-btn:active,.scan-mode:active{
  transform:translate3d(0,0,0) scale(.975);
  transition-duration:90ms;
}
.primary:focus-visible,.secondary:focus-visible,.nav:focus-visible,.filter:focus-visible,.device:focus-visible,.source-btn:focus-visible,.scan-mode:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid rgba(130,104,255,.42);
  outline-offset:3px;
}
.primary.is-loading{pointer-events:none;padding-right:38px}
.primary.is-loading::after{
  content:"";
  position:absolute;
  right:14px;top:50%;
  width:12px;height:12px;
  margin-top:-6px;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin .75s linear infinite;
}

/* [MODIFICA] Layout / pannelli */
.page{padding:36px 36px 82px}
.panel,.metrics article,.result-summary article,.compare-metrics article,.report-feature{
  border-color:rgba(255,255,255,.075);
  background:
    linear-gradient(180deg,rgba(255,255,255,.018),transparent 46%),
    var(--panel);
  border-radius:var(--radius-md);
  box-shadow:0 1px rgba(255,255,255,.025) inset;
}
.panel{
  padding:22px;
  transition:transform .34s var(--ease-out),border-color .34s var(--ease-out),box-shadow .34s var(--ease-out),background-color .34s var(--ease-out);
}
.panel:hover{border-color:rgba(255,255,255,.105)}
.metrics{gap:12px;margin:13px 0}
.metrics article{
  min-height:118px;
  padding:20px;
  position:relative;
  overflow:hidden;
  transition:transform .34s var(--ease-out),border-color .34s var(--ease-out),box-shadow .34s var(--ease-out);
}
.metrics article::after{
  content:"";
  position:absolute;
  width:80px;height:80px;
  border-radius:50%;
  right:-35px;bottom:-38px;
  background:radial-gradient(circle,rgba(130,104,255,.16),transparent 68%);
  opacity:0;
  transform:scale(.6);
  transition:transform .35s var(--ease-out),opacity .35s ease;
}
.metrics article:hover{transform:translate3d(0,-4px,0);border-color:rgba(130,104,255,.22);box-shadow:var(--shadow-hover)}
.metrics article:hover::after{opacity:1;transform:scale(1)}
.grid2,.grid3{gap:12px}
.list{gap:9px}.findings{gap:9px}.page-cards{gap:10px}
.list-item,.finding,.page-card,.design-card,.report-feature{
  transition:transform .32s var(--ease-out),border-color .32s var(--ease-out),background-color .32s var(--ease-out),box-shadow .32s var(--ease-out);
}
.list-item:hover,.finding:hover,.page-card:hover,.design-card:hover,.report-feature:hover{
  transform:translate3d(0,-3px,0);
  border-color:rgba(130,104,255,.21);
  box-shadow:0 15px 36px rgba(0,0,0,.15);
}

/* [MODIFICA] Hero / score */
.hero{
  position:relative;
  overflow:hidden;
  min-height:410px;
  padding:42px;
  border-radius:var(--radius-lg);
  border-color:rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 87% 13%,rgba(130,104,255,.22),transparent 28%),
    radial-gradient(circle at 68% 105%,rgba(88,213,223,.07),transparent 34%),
    linear-gradient(145deg,#121620,#0b0e14);
  box-shadow:var(--shadow-panel);
}
.hero::after{
  content:"";
  position:absolute;
  width:320px;height:320px;
  right:-120px;top:-170px;
  border-radius:50%;
  border:1px solid rgba(179,165,255,.2);
  opacity:.55;
  transform:translate3d(0,0,0) scale(1);
  animation:hero-orbit 10s var(--ease-standard) infinite alternate;
  pointer-events:none;
}
.hero h1{font-size:clamp(50px,5.3vw,78px);line-height:.89;letter-spacing:-.067em}
.hero h1 em{background:linear-gradient(90deg,var(--violet2),#ddd7ff 52%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-score{
  position:relative;
  border-color:#292e3b;
  border-top-color:var(--violet);
  box-shadow:0 0 0 1px rgba(255,255,255,.03),0 18px 55px rgba(0,0,0,.16);
}
.hero-score::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:50%;
  border:1px solid transparent;
  border-top-color:rgba(88,213,223,.48);
  border-right-color:rgba(130,104,255,.25);
  animation:spin 11s linear infinite;
}

/* [MODIFICA] Form / scan controls */
.panel input,.panel textarea,.panel select,.source-box input,.source-box select{
  background:#0a0d13;
  border-color:#262c39;
  border-radius:11px;
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
.panel input:focus,.panel textarea:focus,.panel select:focus,.source-box input:focus,.source-box select:focus{
  border-color:rgba(130,104,255,.7);
  box-shadow:0 0 0 3px rgba(130,104,255,.09);
  background:#0c1017;
}
.source-btn,.scan-mode{border-radius:14px;min-height:76px}
.source-btn:hover,.scan-mode:hover{transform:translate3d(0,-3px,0);border-color:#41495d;background:#121722}
.source-btn.active,.scan-mode.active{
  border-color:rgba(130,104,255,.75);
  background:linear-gradient(145deg,rgba(130,104,255,.12),#10131a);
  box-shadow:0 0 0 1px rgba(130,104,255,.22),0 13px 30px rgba(0,0,0,.13);
}
.target,.analysis-context{
  border-color:rgba(130,104,255,.18);
  background:linear-gradient(135deg,rgba(130,104,255,.07),#0b0e14 58%);
}

/* [MODIFICA] Analisi grafica / mock */
.graphic-mock{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.2);
}
.graphic-mock::before{
  content:"";
  position:absolute;
  inset:auto -90px -120px auto;
  width:250px;height:250px;
  border-radius:50%;
  background:radial-gradient(circle,var(--mock-accent,var(--violet)) 0%,transparent 68%);
  opacity:.19;
  animation:mock-drift 7s var(--ease-standard) infinite alternate;
  pointer-events:none;
}
.mock-cards i{transition:transform .34s var(--ease-out),opacity .34s ease}
.graphic-mock:hover .mock-cards i:nth-child(1){transform:translate3d(0,-4px,0)}
.graphic-mock:hover .mock-cards i:nth-child(2){transform:translate3d(0,-7px,0)}
.graphic-mock:hover .mock-cards i:nth-child(3){transform:translate3d(0,-3px,0)}
.prompt-box{border-radius:16px;border-color:rgba(130,104,255,.17)}
#designPrompt{line-height:1.62}

/* [MODIFICA] Motion system — ingressi staggered */
.page.motion-enter .motion-item{opacity:0;transform:translate3d(0,16px,0) scale(.992)}
.page.motion-enter.motion-show .motion-item{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transition:transform .48s var(--ease-out),opacity .38s ease;
  transition-delay:calc(var(--motion-index,0) * 42ms);
}
.motion-pop{opacity:0;transform:translate3d(0,10px,0) scale(.985)}
.motion-pop.motion-pop-in{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transition:transform .38s var(--ease-out),opacity .3s ease;
}

/* [MODIFICA] Toast */
.toast{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(247,248,251,.96);
  box-shadow:0 16px 38px rgba(0,0,0,.24);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

/* Animazioni continue decorative — solo transform / opacity */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes brand-breathe{0%{transform:scale(.9);opacity:.28}100%{transform:scale(1.12);opacity:.62}}
@keyframes hero-orbit{0%{transform:translate3d(0,0,0) scale(.95);opacity:.32}100%{transform:translate3d(-26px,30px,0) scale(1.08);opacity:.62}}
@keyframes mock-drift{0%{transform:translate3d(0,0,0) scale(.92);opacity:.12}100%{transform:translate3d(-28px,-18px,0) scale(1.08);opacity:.24}}

/* Responsive */
@media(max-width:1080px){.main{margin-left:0}.sidebar{width:264px}.page{padding:30px 20px 72px}}
@media(max-width:700px){
  .page{padding:22px 14px 70px}
  .topbar{height:64px;padding:0 14px}
  .hero{padding:27px 20px;min-height:auto;border-radius:19px}
  .hero h1{font-size:clamp(42px,13vw,58px)}
  .metrics article{min-height:102px}
  .panel{padding:17px}
  .primary,.secondary{min-height:42px}
}

/* Accessibilità motion */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0ms!important;
  }
  .page.motion-enter .motion-item,.page.motion-enter.motion-show .motion-item,.motion-pop,.motion-pop.motion-pop-in{
    opacity:1!important;
    transform:none!important;
  }
}