/* ============ TROPHIC — modale (cont + profil) ============ */

.overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(4,4,5,.78);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.overlay.open{display:flex;animation:fadeUp .3s ease}

.modal{
  background:var(--surface);border:1px solid var(--line);
  width:min(440px,100%);padding:40px;position:relative;
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  max-height:90svh;overflow-y:auto;
}
.modal .close{
  position:absolute;top:14px;right:16px;background:none;border:none;
  color:var(--muted);font-size:20px;line-height:1;transition:.2s;
}
.modal .close:hover{color:var(--orange)}
.modal h3{font-family:var(--disp);font-weight:700;font-size:22px;margin-bottom:6px}
.modal .hint-txt{color:var(--muted);font-size:13.5px;margin-bottom:26px;line-height:1.6}

/* tabs */
.tabs{display:flex;border:1px solid var(--line);margin-bottom:26px}
.tabs button{
  flex:1;background:none;border:none;color:var(--muted);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;padding:12px 6px;transition:.2s;
}
.tabs button.active{background:var(--orange);color:#000;font-weight:600}

/* form */
.field{margin-bottom:18px}
.field label{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}
.field input{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--text);
  font-family:var(--body);font-size:15px;padding:13px 15px;outline:none;transition:.2s;
}
.field input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,106,0,.15)}
.field input.key-input{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase}
.form-err{color:var(--danger);font-size:13px;min-height:18px;margin-bottom:12px;font-family:var(--mono)}
.modal .btn.full{width:100%;justify-content:center;margin-top:4px}

/* ---------- profil ---------- */
.modal.profile{width:min(540px,100%)}
.pf-top{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.avatar{
  width:52px;height:52px;background:var(--orange-dim);border:1px solid rgba(255,106,0,.4);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:800;color:var(--orange);font-size:20px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.pf-top .u{font-family:var(--disp);font-weight:700;font-size:19px}
.pf-top .r{font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;margin-top:4px}

/* inelul licenței */
.lic-box{
  border:1px solid var(--line);background:var(--bg);padding:28px;
  display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:center;
}
.ring-wrap{position:relative;width:150px;height:150px;flex-shrink:0}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-wrap .track{stroke:var(--line)}
.ring-wrap .prog{
  stroke:var(--orange);stroke-linecap:round;
  filter:drop-shadow(0 0 8px rgba(255,106,0,.6));
  transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1);
}
.ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.ring-label .big{font-family:var(--disp);font-weight:800;font-size:30px;line-height:1}
.ring-label .sm{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;margin-top:6px}
.lic-expired .prog{stroke:var(--danger)}
.lic-expired .ring-label .big{color:var(--danger)}

.lic-meta{flex:1;min-width:200px;display:grid;gap:14px}
.lic-meta .row .k{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.lic-meta .row .v{font-size:15px;margin-top:4px;font-weight:500}

.countline{font-family:var(--mono);font-size:12px;letter-spacing:.15em;color:var(--muted);text-align:center;margin-top:16px}
.countline b{color:var(--text)}

.no-lic{
  border:1px dashed var(--line);padding:36px;text-align:center;
  color:var(--muted);font-size:14.5px;line-height:1.8;
}
.no-lic b{color:var(--text)}

/* tab activare cheie */
.redeem-info{
  border:1px solid var(--line);background:var(--bg);
  padding:18px 20px;margin-bottom:22px;
  font-size:13.5px;color:var(--muted);line-height:1.7;
}
.redeem-info b{color:var(--orange)}

.pf-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.pf-actions .btn{flex:1;justify-content:center;width:auto}