.result-shell{padding:18px 0 36px}
.result-page{padding:22px}
.search-top{margin-bottom:18px}
.result-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:18px;
  align-items:start;
}
.left-stack,.right-stack{display:grid;gap:18px}

.hero-note{
  border:1px solid var(--line-strong);
  border-radius:24px;
  background:linear-gradient(180deg,#f7fffd,#f4fcfb);
  padding:18px;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:14px;
}
.hero-avatar{
  width:64px;height:64px;border-radius:20px;
  background:linear-gradient(135deg,#d9f6f1,#f4fffd);
  border:1px solid var(--line-strong);
  display:grid;place-items:center;font-size:30px
}
.hero-title{font-size:24px;font-weight:900;letter-spacing:-.04em;line-height:1.2}
.hero-sub{margin-top:5px;font-size:13px;color:var(--text-3);font-weight:700}
.hero-copy{margin-top:10px;font-size:15px;color:#5e7378;line-height:1.72}
.hero-copy b{color:var(--navy)}

.score-summary{
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--panel-soft);
  padding:18px;
}
.score-top{
  display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:center
}
.score-ring{
  width:104px;height:104px;border-radius:50%;
  background:conic-gradient(var(--navy) 0 278deg, #e7efed 278deg 360deg);
  display:grid;place-items:center
}
.score-ring-inner{
  width:78px;height:78px;border-radius:50%;background:#fff;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--line)
}
.score-ring-number{font-size:32px;font-weight:900;color:var(--navy);line-height:1;text-align:center}
.score-ring-number span{display:block;margin-top:4px;font-size:11px;color:var(--text-3);font-weight:800}
.score-copy h3{margin:0;font-size:24px;font-weight:900;letter-spacing:-.04em}
.score-copy p{margin:8px 0 0;font-size:14px;color:#62777c;line-height:1.7}

.hbar-list{display:grid;gap:10px;margin-top:14px}
.hbar-row{display:grid;grid-template-columns:64px 1fr 34px;gap:10px;align-items:center}
.hbar-row label{font-size:12px;font-weight:900;color:#5e7377}
.hbar{height:8px;border-radius:999px;background:#e7efed;overflow:hidden}
.hbar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--mint),var(--navy))}
.hbar-row span{text-align:right;font-size:11px;font-weight:900;color:#60767a}

.top3-grid{display:grid;gap:12px}
.top3-item{
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--panel-soft);
  padding:16px;
}
.top3-head{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 84px;
  gap:12px;
  align-items:start;
}
.rank-badge{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--mint-soft);border:1px solid var(--line-strong);color:var(--navy);
  font-size:15px;font-weight:900
}
.top3-title{font-size:18px;font-weight:900;letter-spacing:-.03em;line-height:1.3}
.top3-slot{margin-top:5px;font-size:12px;color:#6e8287;font-weight:800}
.top3-gain{text-align:right;font-size:18px;font-weight:900;color:var(--navy)}
.top3-cost{text-align:right;margin-top:6px;font-size:12px;color:#6e8287}
.top3-summary{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.info-box{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:12px;
}
.info-k{font-size:12px;color:#71848a;font-weight:900}
.info-v{margin-top:6px;font-size:13px;color:#334a50;line-height:1.6}
.reason-box{
  margin-top:12px;border:1px solid var(--line-strong);border-radius:14px;background:#f7fffd;padding:12px
}
.reason-k{font-size:12px;color:var(--navy);font-weight:900}
.reason-v{margin-top:6px;font-size:13px;color:#587074;line-height:1.65}

.summary-grid{display:grid;gap:10px}
.summary-block{
  border:1px solid var(--line);border-radius:16px;background:var(--panel-soft);padding:12px
}
.summary-block .title{font-size:13px;font-weight:900;color:var(--text);margin-bottom:8px}
.bar-row{display:grid;grid-template-columns:76px 1fr 34px;gap:8px;align-items:center;margin:8px 0}
.bar-label{font-size:12px;color:#60757a;font-weight:800}
.bar{height:8px;border-radius:999px;background:#e7efed;overflow:hidden}
.bar>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--mint),var(--navy))}
.bar-val{text-align:right;font-size:11px;font-weight:800;color:#60757a}

.side-card .card-body{padding-top:16px}
.summary-box,.score-box,.step,.mini-card{
  border:1px solid var(--line);border-radius:16px;background:var(--panel-soft)
}
.summary-box,.score-box{padding:14px}
.summary-k,.score-k{font-size:12px;color:#71848a;font-weight:900}
.summary-v,.score-v{margin-top:7px;font-size:18px;font-weight:900;color:var(--text)}
.summary-sub,.score-mini{margin-top:6px;font-size:12px;color:#64797e;line-height:1.55}

.side-grid{display:grid;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;height:32px;padding:0 11px;border-radius:999px;
  background:var(--mint-soft);border:1px solid var(--line-strong);color:var(--navy);font-size:12px;font-weight:900
}
.step{padding:14px}
.step-hd{font-size:12px;color:#71848a;font-weight:900}
.step-title{margin-top:6px;font-size:15px;font-weight:900;color:var(--text);line-height:1.45}
.step-sub{margin-top:6px;font-size:12px;color:#657a7f;line-height:1.6}

.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.mini-title{font-size:18px;font-weight:900;letter-spacing:-.03em;margin-bottom:10px}
.mini-card{padding:14px;min-height:180px;font-size:13px;color:#5f757a;line-height:1.72;white-space:pre-line}

.top10-card{margin-top:18px}
.top10-table{
  width:100%;
  border-collapse:collapse;
  min-width:1080px;
}
.top10-table th,.top10-table td{
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-size:12px;
  vertical-align:top;
  line-height:1.6;
}
.top10-table th{background:#f3faf8;color:#51666b;font-weight:900}
.top10-table tr:last-child td{border-bottom:0}
.top10-slot{font-weight:900;color:var(--text)}
.top10-arrow{margin-top:4px;color:var(--navy);font-weight:900}
.state-cell .line{margin:2px 0}
.state-cell b{font-weight:900;color:var(--text)}
.num{text-align:right;font-weight:900;color:var(--text)}

.debug{padding:12px 20px 18px;font-size:11px;color:#788b8f}

.loading{position:fixed;inset:0;background:rgba(17,35,42,.28);display:flex;align-items:center;justify-content:center;z-index:50}
.loading.hidden{display:none}
.loading-box{
  min-width:260px;padding:20px 24px;border-radius:24px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);text-align:center
}
.loading-title{font-size:18px;font-weight:900;color:var(--navy)}
.loading-sub{margin-top:8px;color:#6a7f84;font-size:13px}

@media (max-width:1100px){
  .result-grid,.bottom-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .result-page{padding:16px}
  .search-top .search-pill{grid-template-columns:1fr}
  .hero-note,.score-top,.top3-summary{grid-template-columns:1fr}
  .top3-head{grid-template-columns:40px 1fr}
  .top3-gain,.top3-cost{text-align:left}
}


/* v8 denser result layout */
.result-grid{
  grid-template-columns:minmax(0,1fr) 340px !important;
}
.left-stack,
.right-stack{
  align-content:start;
}
.left-stack .card,
.right-stack .card{
  min-height:unset;
}
.right-stack{
  grid-auto-rows:min-content;
}
.side-card .card-body{
  padding-top:14px !important;
}
#top3List{
  grid-template-columns:1fr !important;
}
.top3-item{
  padding:14px !important;
}
.top3-head{
  grid-template-columns:36px minmax(0,1fr) 76px !important;
  gap:10px !important;
}
.top3-title{
  font-size:16px !important;
}
.top3-summary{
  grid-template-columns:1fr 1fr !important;
}
.hero-note{
  padding:16px !important;
}
.hero-copy{
  font-size:14px !important;
}
.bottom-grid{
  grid-template-columns:1fr 1fr !important;
  align-items:stretch !important;
}
.bottom-grid > .card{
  height:100%;
}
#levelCard .card-body,
.bottom-grid .card .card-body{
  display:flex;
  flex-direction:column;
}
#levelTop3{
  grid-template-columns:1fr !important;
}
#levelTop3 .summary-box{
  padding:12px !important;
}
#levelSummary,
#levelChips{
  margin-top:10px !important;
}
.mini-card{
  min-height:220px !important;
}
#top10Card{
  margin-top:16px !important;
}
.top10-table th,
.top10-table td{
  font-size:11px !important;
  padding:10px 10px !important;
}
@media (max-width:1100px){
  .result-grid,
  .bottom-grid{
    grid-template-columns:1fr !important;
  }
}
@media (max-width:760px){
  .top3-summary{
    grid-template-columns:1fr !important;
  }
}


/* v9 result reflow: fill right-side blank area */
.right-stack{
  align-content:start;
}
.right-stack > .card{
  min-height:auto;
}
#levelCard .card-body{
  display:flex;
  flex-direction:column;
}
#levelTop3{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:10px !important;
}
#levelTop3 .summary-box{
  padding:12px !important;
}
.right-stack .mini-card{
  min-height:170px !important;
}
.bottom-grid{
  display:none !important;
}


/* v10 fill left blank with moved cards */
.left-fill-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.left-fill-grid > .card{
  min-width:0;
}
.left-fill-grid .card .card-body{
  height:100%;
}
.left-fill-grid .mini-card{
  min-height:210px;
}
.bottom-grid{
  display:none !important;
}
@media (max-width:1100px){
  .left-fill-grid{
    grid-template-columns:1fr;
  }
}


/* v11 swap summary + level */
.left-fill-grid{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
}
.left-summary-card .card-body{
  display:block !important;
}
.left-summary-card .side-grid{
  display:grid !important;
  gap:10px !important;
}

.info-v div{margin:2px 0;line-height:1.55}.state-cell .line{margin:2px 0}.hero-copy b{font-weight:900}


/* v50 tidy result layout */
.result-grid{
  grid-template-columns:minmax(0,1fr) 320px !important;
  gap:20px !important;
}
.left-stack,.right-stack{gap:16px !important}
.hero-note{padding:16px 18px !important}
.hero-title{font-size:22px !important}
.hero-copy{font-size:14px !important;line-height:1.68 !important}
.top3-item{padding:14px !important}
.top3-title{font-size:16px !important}
.top3-summary{grid-template-columns:1fr 1fr !important}
.info-box,.reason-box,.score-box,.summary-box,.step,.mini-card{border-radius:14px !important}
.left-fill-grid{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:16px !important;
}
.left-fill-grid > .card:last-child{grid-column:1 / -1}
.left-fill-grid .mini-card{min-height:168px !important}
.right-stack > .card:nth-child(2){order:3}
.right-stack > .card:nth-child(3){order:2}
.right-stack .card-body{padding:14px 16px 16px !important}
#levelTop3 .summary-box{padding:12px !important}
#levelSummary .chip,#levelChips .chip,#nextStepSummary .chip{height:28px !important;padding:0 10px !important;font-size:11px !important}
.step{padding:12px !important}
.step-title{font-size:14px !important;line-height:1.45 !important}
.mini-title{font-size:16px !important;margin-bottom:8px !important}
.top10-card{margin-top:20px !important}
.top10-table th,.top10-table td{font-size:11px !important;padding:10px 10px !important}
@media (max-width:1100px){
  .result-grid{grid-template-columns:1fr !important}
  .left-fill-grid{grid-template-columns:1fr !important}
  .left-fill-grid > .card:last-child{grid-column:auto}
  .right-stack > .card:nth-child(2),.right-stack > .card:nth-child(3){order:initial}
}
@media (max-width:760px){
  .hero-note{grid-template-columns:52px 1fr !important;gap:12px !important}
  .hero-avatar{width:52px !important;height:52px !important;border-radius:16px !important;font-size:24px !important}
  .top3-head{grid-template-columns:34px minmax(0,1fr) !important}
  .top3-gain,.top3-cost{text-align:left !important}
  .top3-summary{grid-template-columns:1fr !important}
  .left-fill-grid{grid-template-columns:1fr !important}
  .grid-2{grid-template-columns:1fr !important}
  .mini-card{min-height:auto !important}
}