:root{
--bg:#141b2f;
--panel:#1a2239;
--text:#eef3ff;
--muted:#aab3cc;
--cyan:#22d3ee;
--violet:#7c3aed;
--blue:#3b82f6;
--line:rgba(255,255,255,.08);
}
*{box-sizing:border-box}
body{
margin:0;
font-family:Inter,"Microsoft YaHei",sans-serif;
background:
radial-gradient(circle at 12% 8%,rgba(0,196,204,.2),transparent 28%),
radial-gradient(circle at 84% 4%,rgba(139,61,255,.24),transparent 30%),
radial-gradient(circle at 72% 82%,rgba(255,93,184,.12),transparent 28%),
linear-gradient(135deg,#080b18 0%,#11172b 48%,#070a13 100%);
background-attachment:fixed;
color:var(--text);
min-height:100vh;
}
.wrap{width:min(1320px,calc(100% - 32px));margin:auto}
.topbar{
position:sticky;top:0;background:rgba(20,27,47,.58);
backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.05);
z-index:20;
}
.topbar-inner{
display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
align-items:center;
gap:14px;
min-height:80px;
padding:16px 0;
position:relative;
}
.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;cursor:pointer;justify-self:start;color:inherit;text-decoration:none}
.brand-mark{
width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:22px;color:#fff;flex-shrink:0;
background:linear-gradient(135deg,var(--cyan),var(--violet));
}
.actions{display:flex;gap:10px}
.actions{
justify-self:end;
margin-left:auto;
position:relative;
z-index:2;
}
.btn{
border:none;cursor:pointer;padding:8px 14px;border-radius:999px;font-weight:700;
}
.btn-secondary{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1);
color:#e9efff;
}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff}
.ai-assistant-nav{
background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(124,58,237,.28));
border-color:rgba(125,211,252,.38);
box-shadow:0 8px 24px rgba(59,130,246,.16);
color:#fff;
white-space:nowrap;
}
.ai-assistant-nav::before{
content:"AI";
display:inline-grid;
place-items:center;
width:22px;
height:22px;
margin-right:7px;
border-radius:999px;
background:linear-gradient(135deg,var(--cyan),var(--violet));
font-size:11px;
font-weight:900;
letter-spacing:.02em;
}
.ai-assistant-nav:hover{
transform:translateY(-1px);
box-shadow:0 12px 28px rgba(59,130,246,.24);
}
.hero{
padding:24px 0 6px;
}
.hero h1{
text-align:center;font-size:34px;line-height:1.05;margin:0 0 8px;
background:linear-gradient(90deg,var(--cyan),#60a5fa,var(--violet));
-webkit-background-clip:text;color:transparent;
}
.search-shell{
  max-width:1080px;margin:auto;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);border-radius:999px;
  padding:6px 10px;display:flex;align-items:center;gap:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.18);
  position:relative;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
.search-shell.has-warning{
  border-color:rgba(255,214,102,.78);
  box-shadow:0 0 0 3px rgba(255,210,74,.14), 0 12px 34px rgba(0,0,0,.22);
  transform:translateY(-1px);
  }
.search-plus{
width:42px;height:42px;border-radius:50%;
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);
display:grid;place-items:center;color:#fff;font-size:28px;line-height:1;
cursor:pointer;flex:0 0 auto;
}
.search-plus.is-disabled,
.icon-btn.is-disabled{
opacity:.42;
cursor:not-allowed;
filter:saturate(.55);
}
.search-input{
flex:1;min-width:0;background:none;border:none;color:white;font-size:17px;outline:none;
}
.search-input::placeholder{color:rgba(255,255,255,.52)}
.search-actions{display:flex;align-items:center;gap:10px}
.icon-btn{
  width:42px;height:42px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);
  display:grid;place-items:center;color:#fff;font-size:20px;cursor:pointer;
  }
.icon-btn.is-armed{
  background:rgba(255,214,102,.18);
  border-color:rgba(255,220,132,.68);
  box-shadow:0 0 0 3px rgba(255,210,74,.12);
  color:#ffe8a3;
  }
.icon-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  }
.upload-inline-tip{
  max-width:1080px;
  margin:4px auto 0;
  min-height:16px;
  padding:0 18px;
  color:#ffd86b;
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  opacity:0;
  transform:translateY(-4px);
  transition:opacity .18s ease, transform .18s ease;
  pointer-events:none;
  }
.upload-inline-tip.is-visible{
  opacity:1;
  transform:translateY(0);
  }
.category-carousel{
position:relative;
margin-top:8px;
padding:0 56px;
}
.arrow-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:38px;
height:38px;
border-radius:50%;
border:1px solid rgba(255,255,255,.12);
background:rgba(11,16,32,.85);
color:#fff;
font-size:20px;
display:grid;
place-items:center;
cursor:pointer;
box-shadow:0 10px 24px rgba(0,0,0,.28);
z-index:2;
}
.arrow-btn:hover{background:rgba(59,130,246,.3)}
.arrow-btn.left{left:0}
.arrow-btn.right{right:0}
.icon-grid{
display:grid;
grid-template-columns:repeat(10,minmax(0,1fr));
gap:10px;
text-align:center;
}
.icon-item{
cursor:pointer;
transition:transform .18s ease, opacity .18s ease;
background:none;
border:none;
padding:0;
}
.icon-item:hover{
transform:translateY(-3px);
}
.icon-circle{
width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
font-size:22px;line-height:1;margin:0 auto;
border:2px solid transparent;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.c1{background:#ff4d5e}.c2{background:#38c900}.c3{background:#ff71a6}.c4{background:#d946ef}
.c5{background:#ff2f92}.c6{background:#7c3aed}.c7{background:#14b8a6}.c8{background:#db2777}
.c9{background:#f97316}.c10{background:#6366f1}
.icon-item-label{
display:block;
margin-top:6px;
font-weight:700;
font-size:12px;
line-height:1.35;
color:rgba(255,255,255,.92);
transition:color .18s ease;
}
.icon-item.selected .icon-circle{
transform:scale(1.06);
border-color:rgba(255,255,255,.92);
box-shadow:0 0 0 6px rgba(59,130,246,.14),0 14px 30px rgba(0,0,0,.35);
}
.icon-item.selected span{
color:#7dd3fc;
}
.icon-item.is-recommended .icon-circle{
border-color:rgba(250,204,21,.92);
box-shadow:0 0 0 4px rgba(250,204,21,.12),0 14px 30px rgba(0,0,0,.28);
}
.icon-item.is-recommended .icon-item-label{
color:#fef08a;
}
.category-chip-row{
display:flex;
justify-content:center;
gap:6px;
margin-top:4px;
flex-wrap:wrap;
}
.category-chip{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:32px;
padding:2px 8px;
border-radius:999px;
font-size:10px;
font-weight:800;
letter-spacing:.02em;
background:rgba(15,23,42,.72);
border:1px solid rgba(250,204,21,.28);
color:#f8fafc;
}
.category-chip.is-top1{
background:linear-gradient(135deg,#facc15,#fb923c);
color:#3b2200;
border-color:rgba(255,255,255,.22);
}
.category-reco-note{
margin-top:8px;
min-height:18px;
text-align:center;
font-size:12px;
font-weight:600;
color:#cbd5e1;
}
.category-reco-note strong{
color:#fde68a;
}
.carousel-dots{
display:flex;
justify-content:center;
gap:8px;
margin-top:4px;
}
.dot{
width:9px;
height:9px;
border-radius:50%;
background:rgba(255,255,255,.2);
}
.dot.active{
width:28px;
border-radius:999px;
background:linear-gradient(90deg,var(--cyan),var(--violet));
}
.section.showcase-section{
display:grid;
gap:6px;
padding:0 0 12px;
margin-top:6px;
position:relative;
}
.showcase-nav-btn{
position:absolute;
top:50%;
transform:translateY(-62%);
width:40px;
height:40px;
border:none;
border-radius:50%;
background:rgba(11,16,32,.88);
color:#fff;
font-size:22px;
display:grid;
place-items:center;
cursor:pointer;
box-shadow:0 10px 24px rgba(0,0,0,.22);
z-index:5;
}
.showcase-nav-btn:hover{
background:rgba(59,130,246,.22);
}
.showcase-nav-btn.left{
left:0;
}
.showcase-nav-btn.right{
right:0;
}
.showcase-viewport{
overflow:hidden;
padding:0 48px;
}
.showcase-track{
display:flex;
gap:12px;
overflow-x:auto;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
padding:0 0 2px;
scrollbar-width:none;
}
.showcase-track::-webkit-scrollbar{
display:none;
}
.showcase-card{
flex:0 0 var(--showcase-card-size,250px);
scroll-snap-align:start;
background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.08);
border-radius:16px;
padding:4px;
box-shadow:0 8px 16px rgba(0,0,0,.13);
cursor:pointer;
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.showcase-card:hover{
transform:translateY(-2px);
}
.showcase-card.active{
border-color:rgba(125,211,252,.55);
box-shadow:0 0 0 1px rgba(125,211,252,.28), 0 12px 22px rgba(0,0,0,.16);
}
.showcase-frame{
position:relative;
border-radius:12px;
padding:0;
overflow:hidden;
background:none;
box-shadow:none;
}
.showcase-frame.has-photo{
display:flex;
align-items:center;
justify-content:center;
aspect-ratio:.92/1;
padding:15px 12px 12px;
background:linear-gradient(135deg,var(--showcase-accent-a),var(--showcase-accent-b));
}
.showcase-image{
display:block;
width:100%;
aspect-ratio:.92/1;
object-fit:cover;
border-radius:12px;
background:transparent;
}
.showcase-image.is-photo{
height:100%;
object-fit:contain;
object-position:center;
border-radius:12px;
background:rgba(255,255,255,.06);
}
.showcase-score-pill{
position:absolute;
top:8px;
left:8px;
z-index:2;
display:inline-flex;
align-items:center;
padding:6px 12px;
border-radius:999px;
background:linear-gradient(135deg, #fff7ad 0%, #ffd54a 42%, #facc15 100%);
border:1px solid rgba(255,245,181,.72);
box-shadow:0 0 18px rgba(250,204,21,.28);
color:#5f3200;
font-size:11px;
font-weight:900;
line-height:1;
}
.showcase-progress{
position:relative;
height:6px;
border-radius:999px;
background:rgba(255,255,255,.08);
overflow:hidden;
margin-top:-6px;
cursor:pointer;
}
.showcase-progress-bar{
width:22%;
height:100%;
border-radius:999px;
background:linear-gradient(90deg,var(--cyan),var(--violet));
box-shadow:0 0 14px rgba(34,211,238,.22);
cursor:grab;
touch-action:none;
}
.section{padding:10px 0}
#analysisSection{
padding-top:clamp(88px,14vh,168px);
}
.upload{
background:var(--panel);border:1px solid var(--line);border-radius:25px;padding:30px;
}
.upload h2{margin-top:0;text-align:center}
.result-tabs{
display:flex;
gap:10px;
overflow-x:auto;
padding-bottom:8px;
margin-bottom:18px;
scrollbar-width:none;
}
.result-tabs::-webkit-scrollbar{
display:none;
}
.result-tab{
border:none;
border-radius:999px;
padding:10px 16px;
background:rgba(255,255,255,.06);
color:rgba(255,255,255,.76);
font-weight:700;
white-space:nowrap;
cursor:pointer;
transition:background .18s ease,color .18s ease,transform .18s ease;
}
.result-tab:hover{
transform:translateY(-1px);
background:rgba(255,255,255,.1);
}
.result-tab.active{
background:linear-gradient(135deg,rgba(34,211,238,.28),rgba(124,58,237,.34));
color:#fff;
box-shadow:0 10px 22px rgba(0,0,0,.18);
}
.result-empty{
padding:10px 14px;
border-radius:14px;
background:rgba(255,255,255,.04);
color:rgba(255,255,255,.62);
font-size:14px;
}
.preview{margin-top:25px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.preview-box{
background:#0d1326;border-radius:20px;padding:20px;border:1px solid rgba(255,255,255,.06);
}
.preview-image{
width:100%;aspect-ratio:1/1;border-radius:15px;background:#0a0f1e;
display:grid;align-items:start;overflow:hidden;
position:relative;
}
.preview-image img{max-width:100%;max-height:100%;display:none}
.preview-image.has-image{
align-items:center;
justify-items:center;
padding:24px;
background:linear-gradient(180deg,#ffffff,#edf2ff);
cursor:zoom-in;
}
.preview-image.has-image img{
display:block;
width:auto;
height:auto;
max-width:100%;
max-height:100%;
object-fit:contain;
}
.preview-zoom-hint{
position:absolute;
right:14px;
bottom:14px;
border:none;
border-radius:999px;
padding:8px 12px;
background:rgba(15,23,42,.72);
color:#fff;
font-size:12px;
font-weight:700;
letter-spacing:.02em;
backdrop-filter:blur(10px);
display:none;
cursor:pointer;
box-shadow:0 10px 24px rgba(15,23,42,.22);
}
.preview-image.has-image .preview-zoom-hint{
display:inline-flex;
align-items:center;
gap:6px;
}
.preview-guide{
padding:28px;
display:grid;
gap:16px;
color:rgba(255,255,255,.92);
}
.preview-guide-title{
display:flex;
align-items:center;
gap:10px;
font-size:24px;
font-weight:800;
}
.guide-star{
color:#facc15;
text-shadow:0 0 14px rgba(250,204,21,.35);
}
.preview-guide-text{
color:rgba(255,255,255,.72);
line-height:1.7;
font-size:15px;
}
.preview-guide-list{
margin:0;
padding-left:22px;
display:grid;
gap:10px;
color:rgba(255,255,255,.82);
line-height:1.65;
}
.preview-guide-note{
padding:14px 16px;
border-radius:14px;
background:rgba(250,204,21,.08);
border:1px solid rgba(250,204,21,.18);
color:#fde68a;
font-size:14px;
line-height:1.6;
}
.preview-insights{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:10px;
margin-top:14px;
}
.preview-insights:empty{
display:none;
}
.preview-insight{
padding:12px 14px;
border-radius:14px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
}
.preview-insight-label{
display:block;
font-size:12px;
color:rgba(255,255,255,.54);
margin-bottom:6px;
}
.preview-insight-value{
display:block;
font-size:16px;
font-weight:800;
color:#fff;
}
.image-lightbox{
position:fixed;
inset:0;
z-index:40;
display:grid;
place-items:center;
padding:24px;
}
.image-lightbox[hidden]{
display:none;
}
.image-lightbox-backdrop{
position:absolute;
inset:0;
border:none;
background:rgba(3,6,18,.82);
backdrop-filter:blur(10px);
cursor:pointer;
}
.image-lightbox-dialog{
position:relative;
z-index:1;
width:min(1080px,100%);
max-height:calc(100vh - 48px);
display:grid;
grid-template-rows:auto minmax(0,1fr);
background:rgba(9,14,30,.96);
border:1px solid rgba(255,255,255,.12);
border-radius:24px;
box-shadow:0 28px 80px rgba(0,0,0,.45);
overflow:hidden;
}
.image-lightbox-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:18px 22px;
border-bottom:1px solid rgba(255,255,255,.08);
color:#fff;
}
.image-lightbox-close{
width:40px;
height:40px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.08);
color:#fff;
font-size:24px;
line-height:1;
cursor:pointer;
}
.image-lightbox-body{
padding:20px;
display:grid;
place-items:center;
overflow:auto;
background:radial-gradient(circle at top,rgba(34,211,238,.12),transparent 36%),rgba(9,14,30,.96);
}
.image-lightbox-body img{
display:block;
max-width:100%;
max-height:calc(100vh - 160px);
width:auto;
height:auto;
object-fit:contain;
border-radius:18px;
background:#fff;
box-shadow:0 20px 40px rgba(0,0,0,.28);
}
.score{display:grid;gap:12px}
.score-title{
display:flex;
align-items:center;
gap:10px;
margin:0 0 14px;
}
.score-status-pill{
margin-left:auto;
padding:6px 12px;
border-radius:999px;
background:rgba(255,255,255,.08);
color:rgba(255,255,255,.76);
font-size:13px;
font-weight:700;
}
.score-status-pill.is-loading{
background:rgba(34,211,238,.12);
color:#9be9ff;
}
.score-status-pill.is-done{
background:rgba(74,222,128,.12);
color:#b9ffd4;
}
.score-status-pill.is-error{
background:rgba(248,113,113,.12);
color:#ffc5c5;
}
.score-loading{
display:grid;
grid-template-columns:58px 1fr;
gap:16px;
padding:18px;
border-radius:16px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
margin-bottom:12px;
}
.score-loading-orb{
width:58px;
height:58px;
border-radius:50%;
background:conic-gradient(from 0deg,rgba(34,211,238,.1),rgba(34,211,238,.95),rgba(124,58,237,.85),rgba(34,211,238,.1));
position:relative;
animation:spin 1.25s linear infinite;
}
.score-loading-orb::after{
content:"";
position:absolute;
inset:8px;
border-radius:50%;
background:#0d1326;
}
.score-loading-copy strong{
display:block;
margin-bottom:8px;
font-size:18px;
}
.score-loading-copy p{
margin:0;
color:rgba(255,255,255,.7);
line-height:1.6;
}
.score-star{
color:#facc15;
font-size:20px;
text-shadow:0 0 14px rgba(250,204,21,.35);
}
.score-row{
display:grid;
gap:10px;
background:rgba(255,255,255,.05);
padding:12px 14px;border-radius:12px;
}
.score-row-top{
display:flex;
justify-content:space-between;
align-items:center;
}
.score-value{
display:flex;
align-items:center;
gap:8px;
font-weight:800;
}
.score-medal{
font-size:16px;
filter:drop-shadow(0 0 10px rgba(250,204,21,.28));
}
.score-number{
font-size:17px;
letter-spacing:.2px;
}
.score-label{
display:flex;
align-items:center;
gap:10px;
}
.score-label::before{
content:"★";
color:#facc15;
font-size:14px;
text-shadow:0 0 10px rgba(250,204,21,.3);
}
.score-bar{
height:8px;
border-radius:999px;
background:rgba(255,255,255,.08);
overflow:hidden;
}
.score-bar-fill{
height:100%;
border-radius:999px;
background:linear-gradient(90deg,#facc15,#f59e0b);
box-shadow:0 0 14px rgba(250,204,21,.28);
}
.score-comment{
font-size:13px;
color:rgba(255,255,255,.62);
line-height:1.55;
}
.score-row.total-score-row{
background:
radial-gradient(circle at 0% 50%, rgba(34,211,238,.18), transparent 36%),
linear-gradient(90deg, rgba(15,23,42,.96), rgba(37,99,235,.22) 48%, rgba(124,58,237,.24));
border:1px solid rgba(96,165,250,.26);
box-shadow:0 14px 30px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.06);
padding:14px 16px 16px;
}
.score-row.total-score-row .score-label{
font-size:18px;
font-weight:800;
}
.score-row.total-score-row .score-value{
gap:10px;
padding:6px 12px;
border-radius:999px;
background:rgba(15,23,42,.42);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.score-row.total-score-row .score-medal{
font-size:18px;
}
.score-row.total-score-row .score-number{
  font-size:20px;
  font-weight:900;
  letter-spacing:.3px;
  }
.score-grade-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
  padding:5px 10px;
  border-radius:999px;
  background:linear-gradient(135deg, #fff7ad 0%, #ffd54a 42%, #facc15 100%);
  color:#5f3200;
  font-size:12px;
  font-weight:900;
  line-height:1;
  box-shadow:0 0 18px rgba(250,204,21,.32);
  border:1px solid rgba(255,245,181,.72);
  text-transform:uppercase;
  }
.score-row.total-score-row .score-bar{
  height:12px;
  background:rgba(255,255,255,.09);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.score-row.total-score-row .score-bar-fill{
background:linear-gradient(90deg,#facc15 0%, #f59e0b 45%, #fb7185 100%);
box-shadow:0 0 20px rgba(250,204,21,.36);
}
.report-section{
margin-top:24px;
display:grid;
gap:18px;
}
.report-header{
display:flex;
align-items:center;
gap:10px;
margin:0;
font-size:28px;
font-weight:800;
}
.report-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px;
}
.report-card{
background:#0d1326;
border:1px solid rgba(255,255,255,.06);
border-radius:20px;
padding:22px 22px 44px;
position:relative;
overflow:hidden;
}
.report-card-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:0 0 14px;
}
.report-card h4{
margin:0;
display:flex;
align-items:center;
gap:10px;
font-size:20px;
}
.report-badge{
display:inline-grid;
place-items:center;
width:28px;
height:28px;
border-radius:50%;
background:rgba(250,204,21,.12);
color:#facc15;
font-size:14px;
}
.report-list{
margin:0;
padding-left:20px;
display:grid;
gap:10px;
color:rgba(255,255,255,.8);
line-height:1.7;
min-height:170px;
}
.report-page-arrow{
position:absolute;
top:50%;
transform:translateY(-8%);
border:none;
background:none;
color:rgba(255,255,255,.92);
font-size:24px;
line-height:1;
padding:0;
cursor:pointer;
text-shadow:0 0 14px rgba(255,255,255,.25);
transition:opacity .18s ease, transform .18s ease, color .18s ease;
}
.report-page-arrow:hover:not(:disabled){
color:#fff;
transform:translateY(-8%) scale(1.08);
}
.report-page-arrow:disabled{
opacity:.22;
cursor:default;
}
.report-page-arrow.left{
left:12px;
}
.report-page-arrow.right{
right:12px;
}
.report-page-indicator{
position:absolute;
left:50%;
bottom:12px;
transform:translateX(-50%);
border:none;
background:none;
color:rgba(255,255,255,.72);
font-size:13px;
font-weight:700;
letter-spacing:.2px;
cursor:pointer;
padding:0;
}
.report-page-indicator:disabled{
opacity:.35;
cursor:default;
}
.copy-btn{
border:none;
border-radius:999px;
padding:8px 14px;
background:rgba(59,130,246,.14);
color:#cfe4ff;
font-weight:700;
cursor:pointer;
transition:background .18s ease, transform .18s ease;
}
.copy-btn:hover{
background:rgba(59,130,246,.24);
transform:translateY(-1px);
}
.ai-assistant-trigger{
margin-left:auto;
border:1px solid rgba(34,211,238,.36);
border-radius:999px;
padding:9px 15px;
background:linear-gradient(135deg,rgba(34,211,238,.18),rgba(99,102,241,.24));
color:#c8f7ff;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
box-shadow:0 12px 28px rgba(34,211,238,.12);
cursor:pointer;
transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.ai-assistant-trigger:hover{
transform:translateY(-1px);
border-color:rgba(34,211,238,.62);
background:linear-gradient(135deg,rgba(34,211,238,.26),rgba(99,102,241,.34));
}
.ai-assistant-drawer[hidden]{
display:none;
}
.ai-assistant-drawer{
position:fixed;
inset:0;
z-index:80;
display:grid;
justify-items:end;
pointer-events:none;
}
.ai-assistant-backdrop{
position:absolute;
inset:0;
background:rgba(3,7,18,.48);
backdrop-filter:blur(8px);
pointer-events:auto;
}
.ai-assistant-panel{
position:relative;
width:min(460px,calc(100vw - 24px));
height:calc(100vh - 24px);
margin:12px;
border:1px solid rgba(255,255,255,.12);
border-radius:28px;
background:
  radial-gradient(circle at 18% 0%,rgba(34,211,238,.16),transparent 28%),
  linear-gradient(180deg,rgba(15,23,42,.98),rgba(7,11,22,.98));
box-shadow:0 30px 90px rgba(0,0,0,.44);
display:grid;
grid-template-rows:auto auto auto minmax(0,1fr) auto auto;
gap:14px;
padding:20px;
pointer-events:auto;
overflow:hidden;
animation:assistantSlideIn .22s ease both;
}
@keyframes assistantSlideIn{
from{transform:translateX(28px);opacity:.4}
to{transform:translateX(0);opacity:1}
}
.ai-assistant-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:14px;
}
.ai-assistant-heading{
display:grid;
gap:10px;
}
.ai-assistant-kicker{
display:inline-flex;
width:max-content;
padding:6px 10px;
border-radius:999px;
background:rgba(34,211,238,.12);
color:#8befff;
font-size:12px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
}
.ai-assistant-title-row{
display:flex;
align-items:center;
gap:12px;
flex-wrap:wrap;
}
.ai-assistant-logo{
display:grid;
place-items:center;
width:42px;
height:42px;
border-radius:14px;
background:linear-gradient(135deg,var(--cyan),var(--violet));
box-shadow:0 10px 24px rgba(59,130,246,.22);
color:#fff;
font-size:18px;
font-weight:900;
letter-spacing:.04em;
flex:0 0 auto;
}
.ai-assistant-head h2{
margin:2px 0 0;
font-size:28px;
line-height:1.05;
}
.ai-assistant-head p{
margin:0;
color:rgba(255,255,255,.66);
font-size:13px;
line-height:1.6;
}
.ai-assistant-close{
width:38px;
height:38px;
border:1px solid rgba(255,255,255,.12);
border-radius:999px;
background:rgba(255,255,255,.06);
color:#fff;
font-size:24px;
line-height:1;
cursor:pointer;
}
.ai-assistant-summary{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.ai-assistant-summary-item{
border:1px solid rgba(255,255,255,.09);
border-radius:16px;
padding:11px;
background:rgba(255,255,255,.05);
}
.ai-assistant-summary-item span{
display:block;
margin-bottom:6px;
color:rgba(255,255,255,.52);
font-size:11px;
font-weight:800;
text-transform:uppercase;
letter-spacing:.06em;
}
.ai-assistant-summary-item strong{
display:block;
color:#fff;
font-size:14px;
line-height:1.35;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.ai-assistant-quick{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.ai-assistant-quick button{
border:1px solid rgba(34,211,238,.2);
border-radius:14px;
padding:10px 12px;
background:rgba(34,211,238,.08);
color:#d7fbff;
font-size:13px;
font-weight:800;
cursor:pointer;
}
.ai-assistant-chat{
display:grid;
align-content:start;
gap:12px;
overflow:auto;
padding-right:4px;
}
.ai-assistant-message{
max-width:92%;
border-radius:18px;
padding:12px 14px;
font-size:13px;
line-height:1.72;
}
.ai-assistant-message.ai{
justify-self:start;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.09);
color:rgba(255,255,255,.84);
}
.ai-assistant-message.user{
justify-self:end;
background:linear-gradient(135deg,#22d3ee,#6366f1);
color:#fff;
font-weight:700;
}
.ai-assistant-feedback{
display:flex;
align-items:center;
gap:8px;
padding:10px 12px;
border-radius:16px;
background:rgba(255,255,255,.05);
color:rgba(255,255,255,.66);
font-size:12px;
}
.ai-assistant-feedback button{
border:none;
border-radius:999px;
padding:7px 10px;
background:rgba(255,255,255,.09);
color:#fff;
font-size:12px;
font-weight:800;
cursor:pointer;
}
.ai-assistant-form{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
}
.ai-assistant-form input{
height:44px;
border:1px solid rgba(255,255,255,.12);
border-radius:16px;
background:rgba(255,255,255,.08);
color:#fff;
padding:0 14px;
outline:none;
}
.ai-assistant-form input::placeholder{
color:rgba(255,255,255,.42);
}
.ai-assistant-form button{
border:none;
border-radius:16px;
padding:0 16px;
background:linear-gradient(135deg,#22d3ee,#6366f1);
color:#fff;
font-weight:900;
cursor:pointer;
}
#aiLabSection{
display:none !important;
}
.ai-lab-section{
display:grid;
gap:18px;
}
.ai-lab-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:14px;
flex-wrap:wrap;
}
.ai-lab-toolbar{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
}
.ai-version-pill{
display:inline-flex;
align-items:center;
gap:8px;
padding:9px 14px;
border-radius:999px;
background:rgba(34,211,238,.12);
border:1px solid rgba(34,211,238,.28);
color:#9ce8ff;
font-size:13px;
font-weight:800;
letter-spacing:.2px;
}
.ai-toolbar-btn{
padding:9px 14px;
}
.ai-lab-grid{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:16px;
align-items:start;
}
.ai-card{
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:24px;
padding:20px;
box-shadow:0 12px 28px rgba(0,0,0,.14);
display:grid;
gap:16px;
}
.ai-card-wide{
grid-column:1 / -1;
}
.ai-card-title{
margin:0;
font-size:18px;
}
.ai-overview{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.ai-overview-item{
padding:14px 16px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.06);
display:grid;
gap:6px;
}
.ai-overview-label{
font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:rgba(255,255,255,.58);
}
.ai-overview-value{
font-size:20px;
font-weight:800;
color:#fff;
}
.ai-overview-sub{
font-size:12px;
line-height:1.55;
color:rgba(255,255,255,.66);
}
.ai-feedback-actions{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
}
.ai-feedback-btn{
border:none;
border-radius:16px;
padding:12px 14px;
font-weight:800;
color:#fff;
cursor:pointer;
transition:transform .18s ease, opacity .18s ease, box-shadow .18s ease;
box-shadow:0 10px 24px rgba(0,0,0,.18);
}
.ai-feedback-btn:hover:not(:disabled){
transform:translateY(-1px);
}
.ai-feedback-btn:disabled{
opacity:.4;
cursor:not-allowed;
box-shadow:none;
}
.ai-feedback-btn.positive{
background:linear-gradient(135deg,#16a34a,#22c55e);
}
.ai-feedback-btn.neutral{
background:linear-gradient(135deg,#0284c7,#3b82f6);
}
.ai-feedback-btn.negative{
background:linear-gradient(135deg,#ea580c,#f97316);
}
.ai-feedback-note{
min-height:24px;
padding:12px 14px;
border-radius:16px;
background:rgba(15,23,42,.42);
color:rgba(255,255,255,.76);
line-height:1.6;
}
.ai-feedback-note.is-positive{
background:rgba(22,163,74,.14);
color:#c8ffd7;
}
.ai-feedback-note.is-warning{
background:rgba(249,115,22,.16);
color:#ffd5b0;
}
.ai-breakdown{
display:grid;
gap:10px;
}
.ai-category-profiles,
.ai-training-status{
display:grid;
gap:12px;
}
.ai-category-item,
.ai-training-stat{
padding:14px 16px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.06);
display:grid;
gap:8px;
}
.ai-category-top{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.ai-category-name{
font-size:16px;
color:#fff;
}
.ai-category-strength{
padding:6px 10px;
border-radius:999px;
background:rgba(34,211,238,.12);
color:#9be9ff;
font-size:12px;
font-weight:800;
}
.ai-category-meta{
display:flex;
flex-wrap:wrap;
gap:10px;
font-size:12px;
color:rgba(255,255,255,.62);
}
.ai-category-signals{
font-size:13px;
line-height:1.6;
color:rgba(255,255,255,.78);
}
.ai-training-label{
font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:rgba(255,255,255,.58);
}
.ai-training-value{
font-size:15px;
font-weight:700;
color:#fff;
word-break:break-word;
}
.ai-training-actions{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.ai-breakdown-group{
display:grid;
gap:10px;
}
.ai-breakdown-group-title{
font-size:12px;
text-transform:uppercase;
letter-spacing:.08em;
color:rgba(255,255,255,.56);
}
.ai-breakdown-row{
display:grid;
grid-template-columns:minmax(0,1fr) 110px 86px;
gap:12px;
align-items:center;
padding:10px 12px;
border-radius:16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.06);
}
.ai-breakdown-name{
font-weight:700;
}
.ai-breakdown-meta{
font-size:12px;
color:rgba(255,255,255,.6);
}
.ai-breakdown-value,
.ai-breakdown-contribution{
font-size:13px;
font-weight:700;
color:#d9e7ff;
text-align:right;
}
.ai-version-list{
display:grid;
gap:12px;
}
.ai-version-item{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:12px;
padding:14px 16px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.07);
}
.ai-version-item.is-active{
border-color:rgba(34,211,238,.36);
box-shadow:0 0 0 1px rgba(34,211,238,.2);
}
.ai-version-main{
display:grid;
gap:7px;
}
.ai-version-top{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
}
.ai-version-name{
font-weight:800;
}
.ai-version-badge{
display:inline-flex;
align-items:center;
padding:4px 8px;
border-radius:999px;
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
background:rgba(59,130,246,.14);
color:#bcd8ff;
}
.ai-version-badge.is-active{
background:rgba(34,211,238,.14);
color:#9ce8ff;
}
.ai-version-meta{
font-size:13px;
line-height:1.6;
color:rgba(255,255,255,.68);
}
.ai-version-stats{
display:grid;
gap:6px;
min-width:160px;
font-size:13px;
color:rgba(255,255,255,.78);
text-align:right;
}
.mode-tabs{
display:flex;
flex-wrap:wrap;
gap:12px;
justify-content:center;
margin:4px 0 10px;
}
.topbar-inner > .mode-tabs{
margin:0;
flex-wrap:nowrap;
}
.topbar-inner > .mode-tabs .mode-tab{
padding:0 24px;
font-size:16px;
white-space:nowrap;
}
.topbar .btn,
.topbar .mode-tab{
height:48px;
display:inline-flex;
align-items:center;
justify-content:center;
line-height:1;
}
.upload > .mode-tabs{
margin:0 0 20px;
}
.mode-tab{
border:none;
border-radius:999px;
padding:12px 24px;
background:rgba(255,255,255,.1);
color:#eef3ff;
font-size:16px;
font-weight:800;
cursor:pointer;
transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.mode-tab.is-active{
background:linear-gradient(135deg,rgba(59,130,246,.92),rgba(124,58,237,.96));
box-shadow:0 18px 34px rgba(59,130,246,.26);
color:#fff;
}
.mode-tab.is-disabled{
opacity:.64;
cursor:not-allowed;
}
.ctr-game-tab:disabled{cursor:default}
@media(min-width:901px) and (max-width:1200px){
  .topbar-inner > .mode-tabs{gap:8px}
  .topbar-inner > .mode-tabs .mode-tab{padding:0 14px;font-size:14px}
  html[lang="en"] .topbar-inner > .mode-tabs .mode-tab{padding:0 8px;font-size:12px}
  .actions .btn{padding:0 10px;font-size:13px}
}
.mode-subtitle{
margin:0 auto 18px;
max-width:760px;
text-align:center;
color:rgba(238,243,255,.74);
line-height:1.75;
font-size:15px;
}
.hero #heroTitle[hidden],
.hero #modeSubtitle[hidden],
.hero #modeToolbar[hidden]{
display:none;
}
.mode-toolbar{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:12px;
margin:0 auto 10px;
}
.mode-toolbar .btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
}
.compare-view{
display:grid;
gap:20px;
}
.compare-view[hidden]{
display:none;
}
.compare-card{
background:#0d1326;
border-radius:24px;
border:1px solid rgba(255,255,255,.06);
box-shadow:none;
padding:24px;
color:var(--text);
}
.compare-card h3,
.compare-card h4{
margin:0;
color:var(--text);
}
.compare-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:16px;
margin-bottom:18px;
}
.compare-header-copy{
display:grid;
gap:8px;
}
.compare-header-copy p{
margin:0;
color:rgba(255,255,255,.68);
line-height:1.7;
}
.compare-title-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:999px;
background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(124,58,237,.16));
color:#cfe4ff;
font-weight:800;
font-size:13px;
}
.compare-category-bar{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:end;
}
.compare-field{
display:grid;
gap:8px;
min-width:280px;
flex:1 1 280px;
}
.compare-field label{
font-size:13px;
font-weight:800;
color:rgba(255,255,255,.78);
}
.compare-select,
.compare-link-btn{
min-height:46px;
border-radius:14px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.06);
padding:0 14px;
font:inherit;
color:var(--text);
}
.compare-select{
appearance:none;
-webkit-appearance:none;
-moz-appearance:none;
color:#eef3ff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.compare-select:focus{
outline:none;
border-color:rgba(96,165,250,.5);
box-shadow:0 0 0 3px rgba(59,130,246,.16);
}
.compare-select option{
background:#11192d;
color:#eef3ff;
}
.compare-link-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:auto;
background:rgba(59,130,246,.16);
color:#cfe4ff;
font-weight:700;
cursor:pointer;
}
.compare-upload-grid{
display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
gap:18px;
align-items:center;
}
.compare-image-card{
background:#11192d;
border:1px solid rgba(255,255,255,.06);
border-radius:22px;
padding:20px;
display:grid;
gap:16px;
min-width:0;
}
.compare-image-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
}
.compare-image-tag{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:36px;
height:36px;
border-radius:999px;
background:linear-gradient(135deg,var(--blue),var(--violet));
color:#fff;
font-weight:900;
}
.compare-image-preview{
aspect-ratio:1 / 1;
border-radius:18px;
background:#0a0f1e;
border:1px dashed rgba(125,211,252,.22);
display:grid;
place-items:center;
overflow:hidden;
position:relative;
}
.compare-image-preview.has-image{
padding:18px;
background:linear-gradient(180deg,#ffffff,#edf2ff);
}
.compare-image-preview img{
max-width:100%;
max-height:100%;
object-fit:contain;
}
.compare-upload-placeholder{
display:grid;
gap:10px;
justify-items:center;
text-align:center;
padding:24px;
color:rgba(255,255,255,.68);
}
.compare-upload-icon{
width:58px;
height:58px;
border-radius:18px;
display:grid;
place-items:center;
background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(124,58,237,.18));
font-size:24px;
color:#4f46e5;
}
.compare-upload-trigger{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 16px;
border-radius:999px;
border:none;
background:linear-gradient(135deg,var(--blue),var(--violet));
color:#fff;
font-weight:800;
cursor:pointer;
}
.compare-file-meta{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.compare-meta-item{
padding:12px 14px;
border-radius:16px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
}
.compare-meta-label{
display:block;
font-size:12px;
font-weight:700;
color:rgba(255,255,255,.54);
margin-bottom:6px;
}
.compare-meta-value{
display:block;
font-size:14px;
font-weight:700;
color:#fff;
word-break:break-word;
}
.compare-image-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
}
.compare-outline-btn,
.compare-danger-btn{
border:none;
border-radius:999px;
padding:10px 16px;
font-weight:800;
cursor:pointer;
}
.compare-outline-btn{
background:rgba(59,130,246,.1);
color:#2563eb;
}
.compare-danger-btn{
background:rgba(239,68,68,.1);
color:#dc2626;
}
.compare-swap-wrap{
display:grid;
justify-items:center;
gap:10px;
}
.compare-swap-btn{
width:64px;
height:64px;
border-radius:20px;
border:none;
background:linear-gradient(135deg,var(--blue),var(--violet));
box-shadow:0 20px 34px rgba(79,70,229,.22);
color:#fff;
font-size:24px;
font-weight:900;
cursor:pointer;
}
.compare-swap-wrap span{
font-size:13px;
font-weight:700;
color:rgba(255,255,255,.7);
}
.compare-action-bar{
display:grid;
grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
justify-items:center;
align-items:center;
gap:12px;
}
.compare-action-bar > .compare-primary-btn{grid-column:2;grid-row:1}
.compare-action-bar > .compare-status{grid-column:1/-1;grid-row:2;text-align:center}
.compare-share-button{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;align-items:center;justify-content:center;height:34px;min-height:34px;padding:0 13px;font-size:13px}
.compare-primary-btn{
border:none;
border-radius:999px;
padding:16px 30px;
min-width:260px;
background:linear-gradient(135deg,var(--blue),var(--violet));
color:#fff;
font-size:16px;
font-weight:900;
cursor:pointer;
box-shadow:0 20px 38px rgba(79,70,229,.2);
}
.compare-primary-btn:disabled{
cursor:not-allowed;
opacity:.58;
box-shadow:none;
}
.compare-status{
min-height:22px;
font-size:14px;
font-weight:700;
color:rgba(255,255,255,.72);
}
.compare-status.is-error{color:#dc2626}
.compare-status.is-success{color:#0f766e}
.compare-summary-grid{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(280px,.9fr) minmax(0,1fr);
gap:18px;
}
.compare-score-card{
display:grid;
gap:16px;
padding:22px;
border-radius:22px;
background:#11192d;
border:1px solid rgba(255,255,255,.06);
}
.compare-score-top{
display:flex;
gap:14px;
align-items:center;
}
.compare-score-top > div:last-child{min-width:0}
.compare-score-thumb{
width:84px;
height:84px;
border-radius:18px;
background:#0a0f1e;
display:grid;
place-items:center;
overflow:hidden;
border:1px solid rgba(255,255,255,.06);
}
.compare-score-thumb img{
max-width:100%;
max-height:100%;
object-fit:contain;
}
.compare-score-name{
font-size:15px;
font-weight:800;
color:#fff;
overflow-wrap:anywhere;
}
.compare-score-main{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:12px;
}
.compare-score-value{
font-size:42px;
line-height:1;
font-weight:900;
background:linear-gradient(135deg,#2563eb,#7c3aed);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
}
.compare-score-grade{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:rgba(14,165,233,.12);
color:#0f766e;
font-weight:800;
}
.compare-stars{
color:#f59e0b;
letter-spacing:2px;
font-size:16px;
}
.compare-tag-list{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.compare-tag{
display:inline-flex;
align-items:center;
padding:8px 12px;
border-radius:999px;
background:#eef2ff;
color:#4338ca;
font-size:13px;
font-weight:700;
}
.compare-winner-card{
display:grid;
gap:14px;
align-content:start;
padding:24px;
border-radius:24px;
border:1px solid rgba(245,158,11,.3);
background:linear-gradient(180deg,rgba(255,251,235,.96),rgba(255,244,214,.98));
box-shadow:0 20px 48px rgba(245,158,11,.14);
}
.compare-winner-title{
display:flex;
align-items:center;
gap:10px;
font-size:20px;
font-weight:900;
color:#9a3412;
}
.compare-winner-highlight{
font-size:36px;
font-weight:900;
color:#5b21b6;
}
.compare-winner-images{display:grid;gap:10px;min-width:0}
.compare-winner-images.is-tie{grid-template-columns:repeat(2,minmax(0,1fr))}
.compare-winner-preview{margin:0;min-width:0;padding:10px;display:grid;gap:8px;background:#fff;border:1px solid rgba(124,58,237,.12);border-radius:16px}
.compare-winner-preview img{display:block;width:100%;height:160px;object-fit:contain}
.compare-winner-preview figcaption{display:flex;align-items:center;gap:8px;min-width:0;color:#35225a;font-size:12px;line-height:1.5}
.compare-winner-preview figcaption strong{flex-shrink:0}
.compare-winner-preview figcaption span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compare-winner-list{
display:grid;
gap:10px;
color:#7c2d12;
line-height:1.65;
}
.compare-detail-grid{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
gap:18px;
}
.compare-panel{
display:grid;
gap:16px;
padding:22px;
border-radius:22px;
background:#11192d;
border:1px solid rgba(255,255,255,.06);
box-shadow:none;
}
.compare-panel-title{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}
.compare-radar-wrap{
display:grid;
grid-template-columns:minmax(280px,360px) minmax(0,1fr);
gap:18px;
align-items:center;
}
.compare-radar-legend{
display:flex;
gap:12px;
flex-wrap:wrap;
}
.compare-radar-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,.06);
font-size:13px;
font-weight:700;
color:#dbeafe;
}
.compare-radar-dot{
width:10px;
height:10px;
border-radius:999px;
display:inline-block;
}
.compare-table{
width:100%;
border-collapse:collapse;
font-size:14px;
}
.compare-table th,
.compare-table td{
padding:12px 10px;
border-bottom:1px solid rgba(255,255,255,.08);
text-align:left;
color:#dbe7ff;
}
.compare-table th{
font-size:12px;
letter-spacing:.04em;
text-transform:uppercase;
color:rgba(255,255,255,.56);
}
.compare-win-pill{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
font-size:12px;
font-weight:800;
}
.compare-win-pill.a{background:rgba(37,99,235,.12);color:#1d4ed8}
.compare-win-pill.b{background:rgba(124,58,237,.12);color:#6d28d9}
.compare-win-pill.tie{background:rgba(148,163,184,.16);color:#475569}
.compare-diagnosis-grid,
.compare-three-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
}
.compare-three-grid{
grid-template-columns:repeat(3,minmax(0,1fr));
}
.compare-note-card{
display:grid;
gap:12px;
padding:18px;
border-radius:20px;
}
.compare-note-card.good{
background:linear-gradient(180deg,rgba(236,253,245,.96),rgba(220,252,231,.96));
border:1px solid rgba(34,197,94,.16);
color:#14532d;
}
.compare-note-card.warn{
background:linear-gradient(180deg,rgba(255,247,237,.98),rgba(255,237,213,.98));
border:1px solid rgba(249,115,22,.18);
color:#7c2d12;
}
.compare-note-card.neutral{
background:#11192d;
border:1px solid rgba(255,255,255,.06);
}
.compare-note-list{
display:grid;
gap:10px;
margin:0;
padding:0;
list-style:none;
color:#dbe7ff;
line-height:1.7;
}
.compare-note-card:is(.good,.warn) .compare-note-list{color:inherit}
.compare-note-list li{
display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:10px;
align-items:start;
}
.compare-prompt-box{
padding:16px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:#dbe7ff;
line-height:1.75;
white-space:pre-wrap;
}
.compare-prompt-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
}
footer{
margin-top:50px;padding:20px 0;border-top:1px solid rgba(255,255,255,.08);
color:var(--muted);font-size:13px;
}
@keyframes spin{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
@media(max-width:1200px){
.icon-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:1000px){
.showcase-card{flex-basis:calc((100% - 28px) / 3)}
.preview{grid-template-columns:1fr}
.report-grid{grid-template-columns:1fr}
.ai-lab-grid{grid-template-columns:1fr}
.preview-insights{grid-template-columns:1fr}
.compare-upload-grid,
.compare-summary-grid,
.compare-detail-grid,
.compare-diagnosis-grid,
.compare-three-grid,
.compare-radar-wrap{grid-template-columns:1fr}
.image-lightbox{padding:14px}
.image-lightbox-head{padding:14px 16px}
.image-lightbox-body{padding:14px}
}
@media(max-width:900px){
  .topbar-inner{
    grid-template-columns:minmax(0,1fr) auto;
    gap:10px;
  }
  .brand{grid-column:1;grid-row:1}
  .actions{grid-column:2;grid-row:1}
  .topbar-inner > .mode-tabs{
    grid-column:1 / -1;
    grid-row:2;
    justify-self:center;
  }
}
@media(max-width:700px){
  .topbar-inner{
    grid-template-columns:1fr auto;
  }
  .brand{gap:8px;font-size:14px}
  .actions{gap:6px}
  .actions .btn{padding:0 10px;font-size:13px;white-space:nowrap}
  .hero h1{font-size:30px;margin-bottom:10px}
  .search-shell{padding:8px 10px}
  .search-plus,.icon-btn{width:40px;height:40px;font-size:20px}
  .search-input{font-size:15px}
  .upload-inline-tip{padding:0 8px;font-size:13px}
  .ai-overview{grid-template-columns:1fr}
  .ai-feedback-actions{grid-template-columns:1fr}
  .ai-version-item{grid-template-columns:1fr}
  .ai-version-stats{text-align:left;min-width:0}
  .ai-breakdown-row{grid-template-columns:minmax(0,1fr)}
  .mode-toolbar{justify-content:stretch}
  .mode-toolbar .btn,
  .compare-primary-btn,
  .compare-link-btn{width:100%}
  .compare-file-meta{grid-template-columns:1fr}
  .category-carousel{padding:0 36px}
.arrow-btn{width:36px;height:36px}
.icon-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.icon-circle{width:40px;height:40px;font-size:20px}
.icon-item-label{font-size:11px}
.showcase-card{flex-basis:calc((100% - 14px) / 2)}
.showcase-nav-btn{
width:36px;
height:36px;
font-size:20px;
}
.showcase-nav-btn.left{left:-8px}
.showcase-nav-btn.right{right:-8px}
}
[hidden]{display:none!important}
.theme-toggle{white-space:nowrap}
.ai-assistant-launcher{
position:fixed;right:24px;bottom:24px;z-index:81;height:56px;
padding:0 22px;display:flex;align-items:center;font-size:16px;
border:1px solid rgba(125,211,252,.4);border-radius:999px;cursor:pointer;
box-shadow:0 12px 36px rgba(0,0,0,.28);
}
.ai-assistant-launcher::before{width:30px;height:30px;font-size:14px;margin-right:9px}
.ai-assistant-drawer{inset:auto 24px 94px auto;display:block;width:min(400px,calc(100vw - 32px))}
.ai-assistant-backdrop{display:none}
.ai-assistant-panel{
width:100%;height:min(600px,calc(100dvh - 112px));margin:0;
border-radius:24px;padding:18px;gap:12px;
background:radial-gradient(circle at 18% 0%,rgba(34,211,238,.12),transparent 30%),#101627;
}
.ai-assistant-head h2{font-size:23px}
.ai-assistant-heading{gap:6px}
.ai-assistant-logo{width:32px;height:32px;font-size:15px;border-radius:10px}
.ai-assistant-chat{overscroll-behavior:contain}
.ai-assistant-form{min-width:0}
.ai-assistant-form input{min-width:0}
html[data-theme="light"]{
--bg:#fff;--panel:#fff;--text:#181621;--muted:#736b80;--line:#e5dcf1;
color-scheme:light;
}
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"] body{
background:
linear-gradient(to bottom,#fff 0%,#fff calc(100% - 150px),rgba(255,255,255,0) 100%),
linear-gradient(100deg,#d9f4f7 0%,#f5f1ff 52%,#e9d9fc 100%);
background-attachment:fixed;
}
html[data-theme="light"] .topbar{background:rgba(255,255,255,.88);border-color:var(--line)}
html[data-theme="light"] :is(.btn-secondary,.mode-tab,.search-shell,.search-plus,.icon-btn,.result-tab,.score-row,.preview-box,.preview-image,.preview-insight,.score-loading,.score-status-pill,.report-card,.compare-card,.compare-score-card,.compare-panel,.compare-image-card,.compare-file-meta,.compare-note-card.neutral,.compare-upload-box,.compare-thumb-placeholder,.ai-assistant-panel,.ai-assistant-summary-item,.ai-assistant-message,.ai-assistant-form input,.ai-assistant-quick button,.ai-assistant-feedback button,.ai-assistant-close){
background:#fff;border-color:var(--line);color:var(--text);
}
html[data-theme="light"] :is(.search-shell,.upload,.report-card,.compare-card,.ai-assistant-panel){box-shadow:0 8px 28px rgba(75,46,112,.07)}
html[data-theme="light"] :is(.search-input,.icon-item-label,.preview-insight-value,.preview-guide-title,.score-label,.score-value,.score-number,.compare-header h2,.compare-file-name,.compare-score-value,.compare-score-name,.compare-field label,.compare-panel-title,.compare-panel-title h3,.ai-assistant-head h2,.ai-assistant-summary-item strong,.compare-table th,.compare-table td,.image-lightbox-head){color:var(--text)}
html[data-theme="light"] :is(.search-input::placeholder,.preview-guide-text,.preview-guide-list,.preview-insight-label,.score-comment,.score-loading-copy p,.ai-assistant-head p,.ai-assistant-summary-item span,.ai-assistant-feedback span,.compare-header p,.compare-file-meta span,.compare-score-top,.compare-status,.report-list,.report-page-indicator,.report-page-arrow,footer){color:var(--muted)}
html[data-theme="light"] .mode-tab.is-active{background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff}
html[data-theme="light"] .search-shell{border-color:#e0d0ff}
html[data-theme="light"] .score-bar{background:#eee8f5}
html[data-theme="light"] :is(.score-complete-banner,.copy-btn,.ai-assistant-kicker,.ai-assistant-trigger,.compare-title-badge,.compare-tag){background:#f3efff;color:#6335ad;border-color:#e5dcf1}
html[data-theme="light"] .ai-assistant-launcher{background:linear-gradient(135deg,#e8faff,#eee6ff);color:#35225a;border-color:#bfccf5}
html[data-theme="light"] .ai-assistant-message.user{background:#f1ebff}
html[data-theme="light"] .preview-guide-note{background:#fffbeb;color:#854d0e}
html[data-theme="light"] .compare-select{background:#fff;color:var(--text);border-color:var(--line)}
html[data-theme="light"] .compare-select option{background:#fff;color:var(--text)}
html[data-theme="light"] .compare-winner-card{background:linear-gradient(135deg,#f2edff,#eafaff);color:#35225a;border-color:#d8cbff}
html[data-theme="light"] :is(.compare-winner-title,.compare-winner-highlight,.compare-winner-list){color:#35225a}
html[data-theme="light"] .showcase-card{border-color:#e5dcf1;background:rgba(118,94,164,.05)}
html[data-theme="light"] .showcase-progress{background:#e9e3f1}
html[data-theme="light"] .dot:not(.active){background:#d2c8e3}
html[data-theme="light"] .search-input::placeholder,
html[data-theme="light"] .ai-assistant-form input::placeholder{color:var(--muted);opacity:1}
html[data-theme="light"] :is(.compare-note-list,.compare-prompt-box,.compare-radar-chip){color:var(--text)}
.showcase-card{flex-basis:var(--showcase-card-size,250px)}
@media(max-width:700px){
  .brand{font-size:16px;gap:8px}
  .brand-mark{width:36px;height:36px;font-size:20px}
  .actions{gap:5px}
  .actions .btn{padding:0 9px;font-size:12px}
  .ai-assistant-launcher{right:16px;bottom:16px;height:52px;padding:0 16px;font-size:14px}
  .ai-assistant-drawer{right:16px;bottom:82px}
  .ai-assistant-panel{height:min(560px,calc(100dvh - 98px));padding:14px;gap:9px}
  .showcase-viewport{padding:0 24px}
  .showcase-card{flex-basis:var(--showcase-card-size,168px)}
}
@media(min-width:701px) and (max-height:650px){
  .hero{padding-top:14px}
  .hero h1{font-size:28px}
  .icon-circle{width:40px;height:40px;font-size:20px}
  .category-carousel{margin-top:4px}
  .icon-item-label{font-size:12px}
}
main[data-mode="compare"] #analysisSection{padding-top:16px}
.compare-view{gap:14px}
.compare-card{padding:18px;border-radius:20px}
.compare-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);gap:20px;align-items:center}
.compare-intro .compare-header{margin:0}
.compare-header-copy{gap:6px}
.compare-header-copy h2{margin:0;font-size:24px;line-height:1.2}
.compare-header-copy p{font-size:14px;line-height:1.5}
.compare-category-bar{gap:10px}
.compare-field{min-width:0;flex:1 1 200px;gap:6px}
.compare-select,.compare-link-btn{min-height:40px}
.compare-image-card{padding:16px;gap:12px;border-radius:18px}
.compare-image-head{margin-bottom:0}
.compare-primary-btn{padding:12px 24px;font-size:15px}
.compare-action-bar{gap:8px;padding:14px 18px}
@media(max-width:900px){.compare-intro{grid-template-columns:1fr;gap:12px}}
@media(max-width:700px){
  .compare-card{padding:16px}
  .compare-header-copy h2{font-size:22px}
  .compare-category-bar{align-items:center}
  .compare-field{flex-basis:100%}
}
@media(max-width:400px){
  .actions{gap:4px}
  .actions .btn{padding:0 6px}
  html[lang="en"] .topbar-inner > .mode-tabs .mode-tab{padding:0 18px;font-size:14px}
}
@media(max-width:700px){
  .topbar-inner > .mode-tabs{gap:8px}
  .topbar-inner > .mode-tabs .mode-tab{padding:0 14px;font-size:14px}
}
@media(max-width:400px){
  html[lang="en"] .topbar-inner > .mode-tabs .mode-tab{padding:0 10px;font-size:13px}
}

/* Keep the analysis controls and core scores readable within a desktop viewport. */
:root{--navigation-height:81px}
#singleAnalysisView,.compare-view{scroll-margin-top:calc(var(--navigation-height) + 16px)}
main[data-mode="single"] #analysisSection{padding-top:40px}
#singleAnalysisView{padding:12px;border-radius:20px}
.analysis-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.analysis-heading h2{font-size:19px;line-height:1.2;margin:0;min-width:0}
.analysis-heading .share-button{display:inline-flex;align-items:center;justify-content:center;height:34px;min-height:34px;padding:0 13px;font-size:13px;flex-shrink:0}
#singleAnalysisView .result-tabs{gap:6px;margin-bottom:4px;padding-bottom:0}
#singleAnalysisView .result-empty{padding:4px 9px;font-size:12px;line-height:16px}
#singleAnalysisView .result-tab{padding:5px 10px;font-size:12px;line-height:16px}
#singleAnalysisView .preview{
margin-top:4px;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));
min-height:clamp(310px,calc(100dvh - var(--navigation-height) - 180px),430px);
}
#singleAnalysisView .preview-box{padding:10px;border-radius:15px;min-width:0}
#singleAnalysisView .preview-box > h3{font-size:15px;line-height:20px;margin:0 0 5px}
#singleAnalysisView .preview-box:first-child{display:flex;flex-direction:column;min-height:0}
#singleAnalysisView .preview-image{flex:1;aspect-ratio:auto;min-height:220px;align-items:start;border-radius:12px}
#singleAnalysisView .preview-image.has-image{padding:12px;align-items:center}
#singleAnalysisView .preview-image.has-image img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);min-height:0;object-fit:contain}
#singleAnalysisView .preview-guide{padding:14px;gap:10px;font-size:13px}
#singleAnalysisView .preview-guide-title{font-size:17px;line-height:1.3;gap:6px}
#singleAnalysisView .preview-guide-text{font-size:13px;line-height:1.5}
#singleAnalysisView .preview-guide-list{font-size:13px;line-height:1.45;gap:5px;padding-left:19px}
#singleAnalysisView .preview-guide-note{padding:8px 10px;font-size:12px;line-height:1.4}
#singleAnalysisView .preview-insights{grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:6px}
#singleAnalysisView .preview-insight{padding:5px 8px;border-radius:10px;min-width:0}
#singleAnalysisView .preview-insight-label{font-size:11px;margin-bottom:2px}
#singleAnalysisView .preview-insight-value{font-size:12px;overflow-wrap:anywhere}
#singleAnalysisView .score{gap:4px}
#singleAnalysisView .score-complete-banner{font-size:12px;line-height:16px}
#singleAnalysisView .score-row{padding:5px 8px;gap:3px;border-radius:10px}
#singleAnalysisView .score-row-top{font-size:13px;line-height:18px;gap:5px}
#singleAnalysisView .score-label{font-size:13px;gap:5px}
#singleAnalysisView .score-number{font-size:14px;white-space:nowrap}
#singleAnalysisView .score-bar{height:4px}
#singleAnalysisView .score-comment{font-size:12px;line-height:1.3}
#singleAnalysisView .score-title{gap:6px}
#singleAnalysisView .score-star{font-size:16px}
#singleAnalysisView .score-status-pill{font-size:11px;padding:3px 7px;white-space:nowrap}
#singleAnalysisView .total-score-row .score-label{font-size:14px}
#singleAnalysisView .total-score-row .score-value{padding:2px 6px;gap:4px}
#singleAnalysisView .total-score-row .score-number{font-size:16px}
#singleAnalysisView .total-score-row .score-bar{height:6px}
#singleAnalysisView .score-grade-badge{font-size:10px;padding:3px 6px;margin-left:2px}
#singleAnalysisView .score-loading{padding:12px;grid-template-columns:40px minmax(0,1fr);gap:10px}
#singleAnalysisView .score-loading-orb{width:40px;height:40px}
#singleAnalysisView .score-loading-orb::after{inset:6px}
#singleAnalysisView .score-loading-copy strong{font-size:15px;margin-bottom:4px}
#singleAnalysisView .score-loading-copy p{font-size:12px;line-height:1.4}

.compare-view{gap:10px}
.compare-card{padding:12px;border-radius:16px}
.compare-intro{gap:14px;grid-template-columns:minmax(0,1fr) minmax(320px,.8fr)}
.compare-header-copy h2{font-size:21px}
.compare-header-copy p{font-size:12px;line-height:1.4}
.compare-field label{font-size:12px}
.compare-select,.compare-link-btn{font-size:13px;min-height:36px;border-radius:10px;padding:0 10px}
.compare-upload-grid{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:12px;align-items:stretch}
.compare-image-card{padding:10px;gap:8px;border-radius:14px}
.compare-image-head{font-size:13px;gap:8px}
.compare-image-tag{min-width:28px;height:28px;font-size:13px}
.compare-image-preview{aspect-ratio:auto;height:clamp(130px,calc(100dvh - var(--navigation-height) - 350px),300px);border-radius:12px}
.compare-image-preview.has-image{padding:10px}
.compare-image-preview img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;display:block}
.compare-upload-placeholder{padding:12px;gap:6px;font-size:12px}
.compare-upload-placeholder > span{font-size:11px}
.compare-upload-icon{width:34px;height:34px;border-radius:10px;font-size:20px}
.compare-upload-trigger{padding:6px 12px;font-size:12px}
.compare-file-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.compare-meta-item{padding:4px 6px;border-radius:9px;display:flex;gap:5px;align-items:baseline;min-width:0}
.compare-meta-label{font-size:10px;margin:0;white-space:nowrap}
.compare-meta-value{font-size:11px;line-height:1.3;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.compare-image-actions{gap:6px}
.compare-outline-btn,.compare-danger-btn{padding:6px 10px;font-size:12px}
.compare-swap-wrap{align-self:center;gap:6px}
.compare-swap-btn{width:40px;height:40px;border-radius:12px;font-size:20px;box-shadow:0 6px 18px rgba(79,70,229,.18)}
.compare-swap-wrap span{font-size:10px;text-align:center}
.compare-action-bar{padding:10px 12px;gap:5px}
.compare-primary-btn{min-width:210px;padding:10px 18px;font-size:14px}
.compare-status{font-size:12px;min-height:0;line-height:1.4}
.compare-status:empty{display:none}
@media(min-width:701px){
  #singleAnalysisView{display:flex;flex-direction:column;min-height:calc(100dvh - var(--navigation-height) - 32px)}
  #singleAnalysisView > .analysis-heading,#singleAnalysisView > .result-tabs{flex-shrink:0}
  #singleAnalysisView > .preview{flex:1}
  .compare-view:not(.has-result){min-height:calc(100dvh - var(--navigation-height) - 32px);grid-template-rows:minmax(0,1fr) auto}
  .compare-view:not(.has-result) > .compare-card:first-child{min-height:0}
  .compare-view:not(.has-result) .compare-upload-grid{height:100%}
  .compare-view:not(.has-result) .compare-image-card{grid-template-rows:auto minmax(130px,1fr) auto auto}
  .compare-view:not(.has-result) .compare-image-preview{height:100%}
}
@media(max-width:900px){
  :root{--navigation-height:139px}
  .compare-intro{grid-template-columns:1fr;gap:8px}
}
@media(min-width:701px) and (max-height:650px){
  #singleAnalysisView .score-row{padding:4px 8px}
  #singleAnalysisView .score-comment{line-height:1.25}
  #singleAnalysisView .score-row .score-comment{display:none}
  #singleAnalysisView .preview-guide{padding:10px;gap:7px}
}
@media(max-width:700px){
  #singleAnalysisView{padding:10px}
  .analysis-heading h2{font-size:17px}
  #singleAnalysisView .preview{grid-template-columns:1fr;min-height:0;gap:10px}
  #singleAnalysisView .preview-box:first-child{min-height:0}
  #singleAnalysisView .preview-image{flex:none;min-height:0;aspect-ratio:auto}
  #singleAnalysisView .preview-image.has-image{height:180px}
  #singleAnalysisView .preview-guide{padding:10px;gap:7px}
  #singleAnalysisView .preview-guide-title{font-size:15px}
  #singleAnalysisView .preview-guide-text{display:none}
  #singleAnalysisView .preview-guide-list{font-size:12px;gap:2px;line-height:1.4}
  #singleAnalysisView .preview-guide-note{padding:6px 8px;font-size:11px}
  #singleAnalysisView .score{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
  #singleAnalysisView .score-complete-banner,#singleAnalysisView .total-score-row{grid-column:1/-1}
  #singleAnalysisView .score-row{padding:6px}
  #singleAnalysisView .score-label{font-size:12px;gap:3px}
  #singleAnalysisView .score-label::before{font-size:11px}
  #singleAnalysisView .score-row-top{align-items:flex-start;line-height:16px}
  #singleAnalysisView .score-number{font-size:12px}
  #singleAnalysisView .score-comment{font-size:11px;line-height:1.3}
  #singleAnalysisView .score-row .score-comment{display:none}
  .compare-card{padding:10px}
  .compare-upload-grid{grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:6px}
  .compare-image-card{padding:7px;gap:6px}
  .compare-image-head{font-size:12px;gap:5px}
  .compare-image-head > div:last-child{display:none}
  .compare-image-tag{height:24px;min-width:24px;font-size:12px}
  .compare-image-preview{height:150px}
  .compare-upload-placeholder{padding:5px;gap:5px;font-size:11px}
  .compare-upload-placeholder > span{font-size:10px}
  .compare-upload-icon{width:28px;height:28px;font-size:17px}
  .compare-upload-trigger{padding:5px 8px;font-size:11px}
  .compare-file-meta{grid-template-columns:1fr;gap:4px}
  .compare-meta-item{padding:3px 4px;display:flex;flex-wrap:wrap;gap:3px;align-items:baseline}
  .compare-meta-label{font-size:10px;margin:0}
  .compare-meta-value{font-size:10px}
  .compare-image-actions{gap:4px}
  .compare-outline-btn,.compare-danger-btn{font-size:11px;padding:5px 6px}
  .compare-swap-btn{width:28px;height:32px;font-size:17px;border-radius:9px}
  .compare-swap-wrap span{font-size:9px}
  .compare-category-bar{gap:6px}
  .compare-field{flex-basis:100%;gap:4px}
  .compare-link-btn{width:auto;min-height:30px;font-size:12px}
  .compare-primary-btn{min-width:0}
}
.analysis-heading h2{text-align:left}
@media(max-width:700px) and (max-height:700px){
  .analysis-heading h2{font-size:15px}
  #singleAnalysisView .preview-box{padding:7px}
  #singleAnalysisView .preview-box:first-child > h3{display:none}
  #singleAnalysisView .preview-image.has-image{height:90px}
  #singleAnalysisView .preview-guide{padding:8px;gap:5px}
  #singleAnalysisView .preview-guide-title{font-size:13px}
  #singleAnalysisView .preview-guide-list{font-size:10px;line-height:1.3;gap:1px}
  #singleAnalysisView .preview-guide-note{font-size:10px;padding:5px 7px}
  #singleAnalysisView .preview-guide-note{display:none}
  #singleAnalysisView .preview-insights{display:none}
  #singleAnalysisView .preview-insights{margin-top:4px;gap:4px}
  #singleAnalysisView .preview-insight{padding:3px 5px}
  #singleAnalysisView .preview-insight-label{font-size:9px}
  #singleAnalysisView .preview-insight-value{font-size:10px}
  #singleAnalysisView .total-score-row .score-comment{display:none}
  #singleAnalysisView .score-label,#singleAnalysisView .score-number{font-size:11px}
  #singleAnalysisView .preview-box > h3.score-title{font-size:13px;line-height:18px}
  #singleAnalysisView .score-status-pill{font-size:9px;padding:2px 5px;line-height:12px}
  #singleAnalysisView .result-tab{padding:3px 9px;font-size:11px;line-height:14px}
  .compare-image-preview{height:125px}
  .compare-meta-item:nth-child(n+5){display:none}
}
.share-button{gap:6px;white-space:nowrap}
.share-button svg{display:block;flex-shrink:0}
.share-button:disabled{cursor:wait;opacity:.65}
@media(min-width:701px){
  body:has(main[data-mode="compare"] .compare-view:not(.has-result) .compare-share-button) .ai-assistant-launcher{bottom:100px}
}
.share-status{
position:fixed;top:calc(var(--navigation-height) + 12px);right:24px;z-index:90;
max-width:min(340px,calc(100vw - 32px));padding:12px 16px;border:1px solid var(--line);
border-radius:14px;background:var(--panel);color:var(--text);font-size:13px;line-height:1.4;
box-shadow:0 8px 28px rgba(0,0,0,.15);
}
@media(max-width:700px){
  .compare-action-bar{grid-template-columns:minmax(0,1fr) auto}
  .compare-action-bar > .compare-primary-btn{grid-column:1;min-width:0;width:min(210px,100%)}
  .compare-share-button{grid-column:2;height:32px;min-height:32px;padding:0 10px;font-size:12px}
  .analysis-heading .share-button{height:32px;min-height:32px;padding:0 10px;font-size:12px}
  #themeToggle{font-size:0}
  #themeToggle::before{content:'☀';font-size:16px}
  html[data-theme="light"] #themeToggle::before{content:'☾'}
}
@media(max-width:400px){
  #themeToggle::before{font-size:14px}
  #shareBtn svg{width:14px;height:14px}
}
.analysis-send{
display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;
min-height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.15);border-radius:999px;
background:linear-gradient(135deg,var(--blue),var(--violet));color:#fff;
font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer;
}
.analysis-send svg{flex-shrink:0}
.dual-send{background:linear-gradient(135deg,#087e8b,#2563eb);color:#fff}
.analysis-send:disabled,.compare-primary-btn:disabled{opacity:.6;cursor:not-allowed}
.analysis-send:not(:disabled):hover,.compare-primary-btn.dual-send:not(:disabled):hover{filter:brightness(1.12)}
.analysis-send:focus-visible{outline:3px solid #67e8f9;outline-offset:3px}
@media(max-width:700px){
  .search-shell{display:grid;grid-template-columns:40px minmax(0,1fr);gap:8px}
  .search-actions{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .analysis-send{min-height:38px;padding:0 9px;font-size:12px;gap:5px}
  .analysis-send svg{width:16px;height:16px}
}