/* ============================================================
   SHINOBI PROFILE — LIGHT COLORIDO
   Apenas visual do /profile no modo claro.
   Não altera HTML, JS, dados ou modo escuro.
   ============================================================ */

html.sp-light #app {
  color: #172533 !important;
}

/* Hero principal */
html.sp-light #app .hero-main,
html.sp-light #app .hero > .card {
  background:
    radial-gradient(circle at 8% 50%, rgba(255,122,24,.07), transparent 28%),
    linear-gradient(135deg, #ffffff 0%, #f7fbff 100%) !important;
  border-color: #bfd3e5 !important;
  box-shadow: 0 8px 24px rgba(30,70,105,.08) !important;
}

html.sp-light #app .hero-main .eyebrow {
  color: #f06400 !important;
}

html.sp-light #app h1 {
  color: #132b42 !important;
}

html.sp-light #app .subtitle {
  color: #48657d !important;
}

/* Tags */
html.sp-light #app .tag {
  background: #f5faff !important;
  border-color: #bdd4e8 !important;
  color: #29455d !important;
}

html.sp-light #app .tag.blue {
  background: #eef8ff !important;
  border-color: #8bc9f7 !important;
  color: #087bc1 !important;
}

html.sp-light #app .tag.green {
  background: #effcf5 !important;
  border-color: #8adcb0 !important;
  color: #168653 !important;
}

html.sp-light #app .tag.purple {
  background: #f6f0ff !important;
  border-color: #c6a7f4 !important;
  color: #7a45b8 !important;
}

/* Avatar */
html.sp-light #app .avatar {
  border-color: #a9c8df !important;
  background: #eaf4fb !important;
  box-shadow: 0 5px 15px rgba(40,90,130,.12) !important;
}

/* Painel de combate */
html.sp-light #app .combat {
  background:
    linear-gradient(135deg, #ffffff 0%, #f5faff 100%) !important;
  border-color: #bfd3e5 !important;
}

html.sp-light #app .combat-item {
  border-right-color: #cbdbe8 !important;
}

html.sp-light #app .combat-item .label {
  color: #637d93 !important;
}

html.sp-light #app .combat-item .value {
  color: #18334b !important;
}

html.sp-light #app .combat-item .value.hp {
  color: #18bd72 !important;
}

html.sp-light #app .combat-item .value.chakra {
  color: #4b91f7 !important;
}

html.sp-light #app .combat-item .value.attack {
  color: #ff7a18 !important;
}

html.sp-light #app .combat-foot {
  color: #668096 !important;
  border-top-color: #cbdbe8 !important;
}

/* Se houver o quinto valor Senbon no HTML atual */
html.sp-light #app .combat-item:nth-child(5) .value {
  color: #e94f88 !important;
}

/* Títulos das seções */
html.sp-light #app .section-title {
  color: #162e44 !important;
}

html.sp-light #app .section-note {
  color: #648099 !important;
}

/* Atributos — cada atributo com sua identidade */
html.sp-light #app .stats .stat {
  background: linear-gradient(135deg, #ffffff, #f7fbff) !important;
  border-color: #c2d6e7 !important;
  box-shadow: 0 5px 15px rgba(35,75,110,.055) !important;
}

html.sp-light #app .stats .stat:nth-child(1) {
  border-top: 3px solid #ff7a18 !important;
  background: linear-gradient(135deg, #fffaf5, #ffffff) !important;
}

html.sp-light #app .stats .stat:nth-child(2) {
  border-top: 3px solid #4b91f7 !important;
  background: linear-gradient(135deg, #f5faff, #ffffff) !important;
}

html.sp-light #app .stats .stat:nth-child(3) {
  border-top: 3px solid #9b67e8 !important;
  background: linear-gradient(135deg, #faf7ff, #ffffff) !important;
}

html.sp-light #app .stats .stat:nth-child(4) {
  border-top: 3px solid #20c77a !important;
  background: linear-gradient(135deg, #f4fff9, #ffffff) !important;
}

html.sp-light #app .stats .stat:nth-child(5) {
  border-top: 3px solid #28a9e8 !important;
  background: linear-gradient(135deg, #f3fbff, #ffffff) !important;
}

html.sp-light #app .stats .stat .label {
  color: #60798e !important;
}

html.sp-light #app .stats .stat .value {
  color: #24415a !important;
}

html.sp-light #app .stats .stat:nth-child(1) .value {
  color: #ff7a18 !important;
}

html.sp-light #app .stats .stat:nth-child(2) .value {
  color: #4b91f7 !important;
}

html.sp-light #app .stats .stat:nth-child(3) .value {
  color: #8b5ed6 !important;
}

html.sp-light #app .stats .stat:nth-child(4) .value {
  color: #20b970 !important;
}

html.sp-light #app .stats .stat:nth-child(5) .value {
  color: #249ed8 !important;
}

/* Maestrias / equipamento */
html.sp-light #app .panel {
  background: linear-gradient(135deg, #ffffff, #f7fbff) !important;
  border-color: #c2d6e7 !important;
}

html.sp-light #app .row {
  background: #f7fbfe !important;
  border-color: #c4d7e7 !important;
  color: #243d54 !important;
}

html.sp-light #app .row strong {
  color: #28445b !important;
}

html.sp-light #app .row span:not(.ring) {
  color: #1c3951 !important;
}

html.sp-light #app .mastery1 {
  color: #16b96c !important;
}

html.sp-light #app .mastery2 {
  color: #3f8ff1 !important;
}

/* Anéis */
html.sp-light #app .ring {
  background: #f2f7fb !important;
  border-color: #aac3d6 !important;
  color: #536d82 !important;
}

html.sp-light #app .ring.active {
  background: #edfff5 !important;
  border-color: #45c884 !important;
  color: #159b59 !important;
}

html.sp-light #app .ring.active.beta {
  background: #fff6e9 !important;
  border-color: #e5a04a !important;
  color: #c66a00 !important;
}

html.sp-light #app .ring.lock {
  background: #f3f6f8 !important;
  color: #8294a3 !important;
}

/* Buffs */
html.sp-light #app .buff {
  background: #f5f9fc !important;
  border-color: #c5d8e7 !important;
}

html.sp-light #app .buff-name {
  color: #29445b !important;
}

html.sp-light #app .buff-state {
  color: #72889a !important;
}

html.sp-light #app .buff.active {
  background: #effcf5 !important;
  border-color: #67d39a !important;
}

html.sp-light #app .buff.active .buff-name {
  color: #16794d !important;
}

html.sp-light #app .buff.active .buff-state {
  color: #22955d !important;
}

/* Técnicas */
html.sp-light #app .tech-panel {
  background: linear-gradient(135deg, #ffffff, #f7fbff) !important;
  border-color: #c2d6e7 !important;
}

html.sp-light #app .tech {
  background: #f4f8fb !important;
  border-color: #c5d8e7 !important;
}

html.sp-light #app .tech-name {
  color: #29445b !important;
}

html.sp-light #app .tech-level {
  color: #71879a !important;
}

html.sp-light #app .tech.learned {
  background: #effcf4 !important;
  border-color: #62cf94 !important;
}

html.sp-light #app .tech.learned .tech-name {
  color: #176f49 !important;
}

html.sp-light #app .tech.learned .tech-level,
html.sp-light #app .check {
  color: #1da761 !important;
}

/* Estado vazio */
html.sp-light #app .empty {
  background: #ffffff !important;
  color: #4e697f !important;
  border-color: #c2d6e7 !important;
}
/* ============================================================
   MAESTRIAS — SOMENTE O VALOR RECEBE A COR DO ELEMENTO
   ============================================================ */

/* Texto "Maestria 1 / Maestria 2" permanece normal */
html.sp-light #app .row.mastery1,
html.sp-light #app .row.mastery2 {
    color: #243d54 !important;
    -webkit-text-fill-color: #243d54 !important;
}

/* MEDICAL */
html.sp-light #app .row.mastery1 strong.medical,
html.sp-light #app .row.mastery2 strong.medical {
    color: #20d68a !important;
    -webkit-text-fill-color: #20d68a !important;
}

/* WATER */
html.sp-light #app .row.mastery1 strong.water,
html.sp-light #app .row.mastery2 strong.water {
    color: #4b91f7 !important;
    -webkit-text-fill-color: #4b91f7 !important;
}

/* FIRE */
html.sp-light #app .row.mastery1 strong.fire,
html.sp-light #app .row.mastery2 strong.fire {
    color: #ff7a18 !important;
    -webkit-text-fill-color: #ff7a18 !important;
}

/* EARTH */
html.sp-light #app .row.mastery1 strong.earth,
html.sp-light #app .row.mastery2 strong.earth {
    color: #b87932 !important;
    -webkit-text-fill-color: #b87932 !important;
}

/* WIND */
html.sp-light #app .row.mastery1 strong.wind,
html.sp-light #app .row.mastery2 strong.wind {
    color: #7c6ee6 !important;
    -webkit-text-fill-color: #7c6ee6 !important;
}

/* LIGHTNING */
html.sp-light #app .row.mastery1 strong.lightning,
html.sp-light #app .row.mastery2 strong.lightning {
    color: #e7b923 !important;
    -webkit-text-fill-color: #e7b923 !important;
}

/* WEAPON MASTER */
html.sp-light #app .row.mastery1 strong.weapon-master,
html.sp-light #app .row.mastery2 strong.weapon-master {
    color: #e85d75 !important;
    -webkit-text-fill-color: #e85d75 !important;
}