
/* EDOS 2.0.379 — Premium My Rank Progress
   Visual finishing only. All rank rules, evidence and actions remain governed by existing APIs. */

.edos379-rank-progress{
  width:100%;
  max-width:1500px;
  margin:0 auto;
  gap:18px;
}
.edos379-rank-progress *{box-sizing:border-box}

.edos379-rank-progress>.card{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(184,140,55,.20);
  border-radius:22px;
  background:linear-gradient(145deg,#fff,#fbfaf7);
  box-shadow:0 14px 42px rgba(20,20,20,.055);
}
.edos379-rank-progress>.card:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,157,73,.72),transparent);
}
.edos379-rank-progress .eyebrow{
  letter-spacing:.12em;
  font-weight:900;
}

.edos379-rank-hero{
  min-height:225px;
  padding:30px 32px!important;
  color:#fff;
  border-color:#604920!important;
  background:
    radial-gradient(circle at 88% 5%,rgba(220,182,97,.19),transparent 31%),
    linear-gradient(135deg,#0c0c0d,#1c1c1d 62%,#111)!important;
}
.edos379-rank-hero:after{
  content:"";
  position:absolute;
  right:-95px;
  bottom:-145px;
  width:280px;
  height:280px;
  border:1px solid rgba(221,184,102,.17);
  border-radius:50%;
  box-shadow:
    0 0 0 34px rgba(220,182,98,.035),
    0 0 0 72px rgba(220,182,98,.018);
}
.edos379-rank-hero>*{position:relative;z-index:1}
.edos379-rank-hero .eyebrow{color:#ddb965}
.edos379-rank-hero h2{
  max-width:900px;
  margin:9px 0 12px;
  color:#fff;
  font-size:clamp(29px,3vw,45px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.edos379-rank-hero .muted{
  max-width:800px;
  color:#c8c8c8;
  line-height:1.6;
}
.edos379-rank-hero .status-row{
  margin-top:20px;
  gap:8px;
}
.edos379-rank-hero .pill{
  border-color:rgba(230,199,130,.22);
  background:rgba(255,255,255,.05);
  color:#e2c272;
}

.edos379-completion-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:225px;
  padding:27px!important;
  background:
    radial-gradient(circle at 90% 8%,rgba(219,181,96,.14),transparent 34%),
    linear-gradient(145deg,#fff,#f8f4eb)!important;
}
.edos379-completion-card h3{margin-bottom:8px}
.edos379-completion-card h2{
  margin:0 0 8px;
  font-size:44px;
  line-height:1;
  color:#9b7126;
  letter-spacing:-.05em;
}
.edos379-completion-card .muted{line-height:1.5}

.edos379-top-metrics{
  gap:10px;
  margin-bottom:24px;
}
.edos379-top-metrics .metric{
  min-height:100px;
  border:1px solid #e5dfd4;
  border-radius:15px;
  background:linear-gradient(145deg,#fff,#f7f4ee);
}
.edos379-top-metrics .metric strong{
  margin-top:7px;
  font-size:22px;
  letter-spacing:-.025em;
}
.edos379-top-metrics .metric:first-child strong{color:#2f7547}
.edos379-top-metrics .metric:nth-child(2) strong{color:#8f4b3d}
.edos379-top-metrics .metric:nth-child(3) strong{color:#9a742a}

.edos379-section-title{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  margin:4px 0 12px;
}
.edos379-section-title h3{margin:3px 0 0}

/* Evidence tables remain full-fidelity on desktop and safely scroll on phones. */
.edos379-rank-progress table{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  overflow:hidden;
  border:1px solid #e5dfd4;
  border-radius:13px;
}
.edos379-rank-progress th{
  background:#f3eee4;
  color:#5e4a22;
  font-size:10px;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.edos379-rank-progress th,
.edos379-rank-progress td{
  padding:10px 11px;
  border-color:#ebe5db;
  vertical-align:top;
}
.edos379-rank-progress tbody tr:nth-child(even) td{
  background:#fcfbf8;
}

.edos379-rank-progress .metrics .metric{
  box-shadow:none;
}
.edos379-rank-progress h3{letter-spacing:-.015em}
.edos379-rank-progress h4{
  margin-top:22px;
  padding-top:5px;
  color:#4e401f;
}
.edos379-rank-progress code{
  padding:3px 5px;
  border-radius:6px;
  background:#f3f0e9;
  word-break:break-all;
}
.edos379-rank-progress .success,
.edos379-rank-progress .error{
  border-radius:12px;
}
.edos379-rank-progress .download-rank-certificate,
.edos379-rank-progress #printMyRankProgress,
.edos379-rank-progress #exportMyRankProgress{
  min-height:38px;
  border-radius:10px;
  font-weight:800;
}

/* Premium treatment for unlocked / next-unlock and history cards */
.edos379-rank-progress>.card[style*="span 6"]{
  background:linear-gradient(145deg,#fff,#faf8f3);
}
.edos379-rank-progress>.card:last-of-type{
  background:linear-gradient(145deg,#fff,#faf8f3);
}

@media(max-width:900px){
  .edos379-rank-progress{
    grid-template-columns:1fr!important;
  }
  .edos379-rank-progress>.card{
    grid-column:1/-1!important;
  }
  .edos379-rank-hero,
  .edos379-completion-card{
    min-height:auto;
  }
}

@media(max-width:760px){
  .edos379-rank-progress{
    width:100%;
    max-width:100%;
    gap:12px;
    overflow:hidden;
  }
  .edos379-rank-progress>.card{
    width:100%;
    max-width:100%;
    border-radius:20px;
    padding:17px 15px!important;
  }
  .edos379-rank-hero{
    padding:23px 19px!important;
  }
  .edos379-rank-hero h2{
    font-size:27px;
  }
  .edos379-rank-hero .muted{
    font-size:12px;
  }
  .edos379-rank-hero .status-row{
    display:flex;
    flex-wrap:nowrap;
    width:100%;
    overflow-x:auto;
    padding-bottom:4px;
    scrollbar-width:none;
  }
  .edos379-rank-hero .status-row::-webkit-scrollbar{display:none}
  .edos379-rank-hero .pill{
    flex:0 0 auto;
  }
  .edos379-completion-card h2{
    font-size:38px;
  }
  .edos379-top-metrics{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .edos379-top-metrics .metric{
    min-width:0;
    min-height:88px;
  }

  /* Existing table helper can be wider than viewport; this keeps evidence intact. */
  .edos379-rank-progress table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:12px;
  }
  .edos379-rank-progress th,
  .edos379-rank-progress td{
    min-width:112px;
    padding:9px;
    font-size:10px;
  }
  .edos379-rank-progress .status-row{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .edos379-rank-progress #printMyRankProgress,
  .edos379-rank-progress #exportMyRankProgress{
    flex:1 1 145px;
  }
}

@media(max-width:390px){
  .edos379-rank-hero h2{font-size:24px}
  .edos379-top-metrics{grid-template-columns:1fr 1fr!important}
  .edos379-top-metrics .metric strong{font-size:19px}
  .edos379-section-title{display:block}
}
