:root{
  --skill-bg:#071019;
  --skill-panel:#0b1822;
  --skill-panel-strong:#102431;
  --skill-line:#203b4c;
  --skill-line-soft:rgba(125,185,211,.16);
  --skill-text:#e9f2f7;
  --skill-muted:#91a8b6;
  --skill-accent:#71dcf2;
  --skill-accent-soft:rgba(113,220,242,.13);
  --skill-gold:#f1c95d;
  --skill-green:#83e5b3;
  --skill-purple:#c5a3ff;
  --skill-red:#ff929b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--skill-bg)}
body.skillLibraryPage{
  min-width:0;
  margin:0;
  background:
    radial-gradient(circle at 12% 5%,rgba(38,112,142,.19),transparent 32rem),
    linear-gradient(180deg,#08131d 0,#071019 42rem,#070e16 100%);
  color:var(--skill-text);
}
button,input{font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;font-size:inherit;line-height:inherit}
button{cursor:pointer}

.skillArchive{width:min(1480px,calc(100% - 24px));margin:0 auto;padding:0 0 10px}
.skillNotice{
  margin:0 0 14px;
  padding:14px 16px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  border:1px solid var(--skill-line-soft);
  border-radius:16px;
  background:rgba(8,22,31,.86);
}
.skillNotice>div{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px}
.skillNotice>div:last-child:nth-child(odd){grid-column:1/-1}
.skillNotice strong{padding:3px 7px;border-radius:7px;background:var(--skill-accent-soft);color:var(--skill-accent);font-size:12px;white-space:nowrap}
.skillNotice span{color:#94aab6;font-size:12px;line-height:1.55;word-break:keep-all}

.skillSetupStep{
  margin:14px 0 0;
  padding:20px;
  border:1px solid var(--skill-line);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(12,28,39,.96),rgba(8,21,30,.96));
  box-shadow:0 14px 34px rgba(0,0,0,.13);
}
.skillSetupStep__heading{margin-bottom:16px;display:flex;align-items:flex-start;gap:12px}
.skillSetupStep__heading>span{
  flex:0 0 auto;
  padding:5px 8px;
  border:1px solid rgba(113,220,242,.35);
  border-radius:8px;
  background:var(--skill-accent-soft);
  color:var(--skill-accent);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
}
.skillSetupStep__heading h2{margin:1px 0 0;color:#fff}
.skillSetupStep__heading p{margin:5px 0 0;color:#829aa8;font-size:12px;line-height:1.45;word-break:keep-all}

.jobCardGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.jobCard{
  min-width:0;
  min-height:96px;
  padding:9px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  align-items:center;
  gap:9px;
  border:1px solid #203847;
  border-radius:14px;
  background:#0b1822;
  color:#c8d6dd;
  text-align:left;
  transition:border-color .16s ease,background .16s ease,transform .16s ease;
}
.jobCard:hover{border-color:#3c7188;background:#102431;transform:translateY(-1px)}
.jobCard[aria-pressed="true"]{border-color:var(--skill-accent);background:linear-gradient(145deg,rgba(27,72,89,.62),rgba(11,31,43,.94));box-shadow:inset 0 0 0 1px rgba(113,220,242,.22),0 0 22px rgba(45,161,190,.12);color:#fff}
.jobCard img{display:block;width:54px;height:70px;border-radius:10px;object-fit:cover;object-position:50% 18%;background:#07131b}
.jobCard span{min-width:0;font-size:13px;font-weight:700;line-height:1.28;word-break:keep-all}
.jobCard small{display:block;margin-top:5px;color:#6f8c9b;font-size:12px;font-weight:800;letter-spacing:.04em}
.jobCard[aria-pressed="true"] small{color:#81cfe1}

.skillSetupStep--combined .skillSetupStep__heading{margin-bottom:12px}
.characterLevelControl{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);align-items:stretch;gap:12px}
.characterLevelControl label,.skillBonusField{display:grid;gap:7px}
.characterLevelControl label>span,.skillBonusField>span{color:#c5d4dc;font-size:12px;font-weight:800}
.characterLevelField{min-width:0;padding:10px;border:1px solid rgba(113,220,242,.24);border-radius:12px;background:rgba(22,58,72,.22)}
.numberField{height:48px;display:grid;grid-template-columns:38px minmax(0,1fr);align-items:center;border:1px solid #2b4657;border-radius:10px;background:#07141d;overflow:hidden}
.numberField:focus-within{border-color:var(--skill-accent);box-shadow:0 0 0 3px rgba(113,220,242,.09)}
.numberField b{height:100%;display:grid;place-items:center;border-right:1px solid #203847;color:var(--skill-accent);font-size:16px}
.numberField input{width:100%;height:100%;min-width:0;padding:0 13px;border:0;outline:0;background:transparent;color:#fff;font-size:20px;font-weight:800}
.numberField input::-webkit-inner-spin-button{opacity:.45}
.numberField--level{grid-template-columns:58px minmax(0,1fr)}
.skillBonusGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.skillBonusField{min-width:0;padding:10px;border:1px solid var(--skill-line-soft);border-radius:12px;background:rgba(6,19,27,.55)}
.skillBonusField--all{border-color:rgba(113,220,242,.29);background:rgba(22,58,72,.3)}
.skillLevelFormulaGrid{margin-top:10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.skillLevelFormula{
  min-width:0;
  padding:8px 10px;
  display:grid;
  gap:5px;
  border:1px solid var(--skill-line-soft);
  border-radius:11px;
  background:#091720;
}
.skillLevelFormula strong{color:#dcebf1;font-size:12px}
.skillLevelFormula span{color:#829ba8;font-size:12px;line-height:1.45;word-break:keep-all}
.skillLevelFormula em{color:var(--skill-accent);font-size:13px;font-style:normal;font-weight:900}
.skillLevelFormula--locked{opacity:.55}

.skillResults{margin-top:14px;min-height:140px}
.skillResultsLoading,.skillNoScript{padding:36px;border:1px solid var(--skill-line);border-radius:18px;background:#0b1822;color:#91a8b6;text-align:center}
.skillResultHeader{
  padding:11px 14px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  border:1px solid #2b5267;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(19,55,70,.92),rgba(8,25,35,.96));
}
.skillResultTitle{display:flex;align-items:center;gap:9px;white-space:nowrap}
.skillResultTitle img{display:block;width:42px;height:50px;border-radius:9px;object-fit:cover;object-position:50% 18%;background:#07131b}
.skillResultTitle h2{margin:0;color:#fff}
.skillResetButton{align-self:center;padding:8px 11px;border:1px solid #365569;border-radius:9px;background:#0a1b26;color:#acc3cf;font-size:12px;font-weight:800;white-space:nowrap}
.skillResetButton:hover{border-color:var(--skill-accent);color:#fff}
.skillResultFacts{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.skillResultFact,.skillResultPassive{min-height:30px;padding:6px 8px;display:inline-flex;align-items:center;gap:4px;border:1px solid rgba(122,196,224,.17);border-radius:9px;background:rgba(3,15,22,.42);color:#7895a4;font-size:12px;font-weight:800}
.skillResultFact strong{color:#eaf6fa;font-size:12px}
.skillResultFact small{max-width:150px;color:#7895a4;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skillResultPassive{flex-wrap:wrap;border-color:rgba(131,229,179,.2);background:rgba(22,67,49,.2)}
.skillResultPassive>b{color:var(--skill-green);font-size:12px}
.skillResultPassive span{padding:2px 4px;border-radius:5px;background:rgba(131,229,179,.08);color:#bdebd3;font-size:12px}
.skillResultPassive em{color:#7f998d;font-size:12px;font-style:normal}

.skillFinalBoard{
  margin-top:14px;
  padding:18px;
  border:1px solid #31566b;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(12,31,43,.98),rgba(7,20,29,.98));
  box-shadow:0 16px 38px rgba(0,0,0,.16);
  scroll-margin-top:196px;
}
.skillFinalBoard__heading{margin-bottom:14px;display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.skillFinalBoard__heading span{display:block;color:var(--skill-accent);font-size:12px;font-weight:900;letter-spacing:.13em}
.skillFinalBoard__heading h2{margin:5px 0 0;color:#fff}
.skillFinalBoard__heading p{max-width:850px;margin:7px 0 0;color:#8fa8b5;font-size:12px;line-height:1.55;word-break:keep-all}
.skillFinalBoard__heading>strong{flex:0 0 auto;padding:7px 10px;border:1px solid rgba(113,220,242,.28);border-radius:9px;background:rgba(113,220,242,.08);color:#bfeefa;font-size:12px}
.finalSkillColumns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:12px}
.finalSkillColumn{min-width:0;padding:12px;border:1px solid #294656;border-radius:15px;background:rgba(5,17,25,.7)}
.finalSkillColumn--active{--column-accent:var(--skill-red);--column-soft:rgba(255,146,155,.1)}
.finalSkillColumn--buff{--column-accent:var(--skill-accent);--column-soft:rgba(113,220,242,.1)}
.finalSkillColumn--passive{--column-accent:var(--skill-purple);--column-soft:rgba(197,163,255,.1)}
.finalSkillColumn__head{min-height:67px;padding:10px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;border-radius:11px;background:var(--column-soft)}
.finalSkillColumn__head>div>span{display:block;color:var(--column-accent);font-size:12px;font-weight:900;letter-spacing:.1em}
.finalSkillColumn__head h3{margin:4px 0 0;color:#fff}
.finalSkillColumn__head p{margin:4px 0 0;color:#8199a5;font-size:12px;line-height:1.4}
.finalSkillColumn__head>strong{align-self:start;padding:4px 6px;border-radius:6px;background:rgba(0,0,0,.2);color:var(--column-accent);font-size:12px;white-space:nowrap}
.finalSkillColumn__list{margin-top:9px;display:grid;gap:9px}
.finalCompactAttacks{margin-top:8px;display:grid;gap:6px}
.finalCompactAttack{min-width:0;padding:7px;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:7px;border:1px solid rgba(255,146,155,.13);border-radius:9px;background:rgba(42,16,21,.18)}
.finalCompactAttack--base{border-color:rgba(241,201,93,.38);background:linear-gradient(135deg,rgba(80,62,15,.18),rgba(42,16,21,.16))}
.finalCompactAttack img{display:block;width:34px;height:34px;border-radius:7px;object-fit:contain;background:#06121a}
.finalCompactAttack>div{min-width:0}
.finalCompactAttack__name{display:flex;align-items:center;flex-wrap:wrap;gap:5px;color:#eaf5f8}
.finalCompactAttack__name em{padding:2px 4px;border-radius:4px;background:rgba(241,201,93,.11);color:#f0d27d;font-size:12px;font-style:normal}
.finalCompactDamageLines{margin-top:3px;display:grid;gap:3px}
.finalCompactDamageLine{min-width:0;padding-top:3px;border-top:1px solid rgba(255,255,255,.045)}
.finalCompactDamageLine:first-child{padding-top:0;border-top:0}
.finalCompactDamageLine>span{display:block;color:#b08e93;font-size:12px;font-weight:900}
.finalCompactDamageLine p{margin:2px 0 0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;color:#9eb2bb;font-size:12px}
.finalCompactDamageLine p span{color:#d9e9ee}
.finalCompactDamageLine p i{color:#718b96;font-style:normal}
.finalCompactDamageLine p b{color:#ffb5ba;font-size:12px}
.finalCompactDamageLine>small,.finalCompactAttack__extras{display:block;margin-top:2px;color:#738d99;font-size:12px;line-height:1.3}
.finalCompactDamageSum{margin-top:4px;padding-top:4px;display:flex;align-items:baseline;justify-content:space-between;gap:7px;border-top:1px solid rgba(255,146,155,.15)}
.finalCompactDamageSum span{color:#9d7d82;font-size:12px;font-weight:800}
.finalCompactDamageSum b{color:#ffc4c8;font-size:12px}
.finalCompactDamageEmpty{color:#738d99;font-size:12px}
.finalCompactDamageSplit{display:block;margin-top:4px;color:#8f777c;font-size:12px;line-height:1.3}
.finalSkillDetails{margin-top:8px;border:1px solid rgba(125,185,211,.14);border-radius:9px;background:rgba(5,16,23,.42)}
.finalSkillDetails>summary{min-height:34px;padding:8px 9px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#8ca6b2;font-size:12px;font-weight:900;list-style:none;cursor:pointer}
.finalSkillDetails>summary::-webkit-details-marker{display:none}
.finalSkillDetails>summary span::before{content:"＋";margin-right:5px;color:var(--column-accent)}
.finalSkillDetails[open]>summary span::before{content:"－"}
.finalSkillDetails>summary strong{color:var(--column-accent);font-size:12px}
.finalSkillDetails>.finalSkillColumn__list{margin-top:0;padding:0 8px 8px}
.finalAggregate{margin-top:8px;padding:9px;border:1px solid rgba(125,185,211,.14);border-radius:10px;background:#071720}
.finalAggregate>strong{display:block;margin-bottom:6px;color:#7f9baa;font-size:12px}
.finalAggregate>div{display:flex;flex-wrap:wrap;gap:5px}
.finalAggregate span{padding:4px 6px;border-radius:6px;background:rgba(113,220,242,.08);color:#9eb8c3;font-size:12px}
.finalAggregate span b{color:#dff8ff}
.finalAggregate em{color:#6f8996;font-size:12px;font-style:normal}
.finalAggregate--damage{border-color:rgba(255,146,155,.16)}
.finalAggregate--damage span{background:rgba(255,146,155,.08)}
.finalAggregate--mastery{border-color:rgba(241,201,93,.18)}
.finalAggregate--mastery span{background:rgba(241,201,93,.08)}
.finalSkillCard{min-width:0;padding:11px;border:1px solid #294756;border-radius:12px;background:linear-gradient(145deg,#0c1e29,#081720)}
.finalSkillCard--base{border-color:rgba(241,201,93,.38);box-shadow:inset 0 0 22px rgba(241,201,93,.035)}
.finalSkillCard--pending{border-style:dashed;opacity:.8}
.finalSkillCard__head{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:9px}
.finalSkillCard__head img{display:block;width:44px;height:44px;border-radius:9px;object-fit:contain;background:#06121a}
.finalSkillCard__head span{display:block;color:#6f93a4;font-size:12px;font-weight:900}
.finalSkillCard__head h4{margin:3px 0 0;color:#fff;word-break:keep-all}
.finalSkillCard__head small{display:block;margin-top:3px;color:#7d96a2;font-size:12px}
.damageEquation{margin-top:9px;display:grid;gap:6px}
.damageEquation__row{padding:9px;border:1px solid rgba(255,146,155,.16);border-radius:9px;background:rgba(42,16,21,.23)}
.damageEquation__row>span{display:block;margin-bottom:5px;color:#8eabb7;font-size:12px;font-weight:800}
.damageEquation__row>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:5px}
.damageEquation__row b{color:#fff;font-size:13px}
.damageEquation__row i{color:#6d8792;font-size:12px;font-style:normal}
.damageEquation__row em{color:#ffb5ba;font-size:16px;font-style:normal;font-weight:900}
.damageEquation__row small{display:block;margin-top:5px;color:#8f777c;font-size:12px;line-height:1.4}
.damageFinalDamage{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px}
.damageFinalDamage span{padding:3px 5px;border:1px solid rgba(241,201,93,.14);border-radius:5px;background:rgba(241,201,93,.075);color:#a99d78;font-size:12px;line-height:1.3}
.damageFinalDamage span b,.damageEquation__row .damageFinalDamage span b{color:#ddca8e;font-size:12px}
.damageFinalDamage span strong,.damageEquation__row .damageFinalDamage span strong{color:#f4d96f;font-size:12px}
.damageFinalDamage--compact{margin-top:3px}
.damageFinalDamage--compact span{padding:2px 4px;font-size:12px}
.damageFinalDamage--compact span b,.damageFinalDamage--compact span strong{font-size:12px}
.damageEquation__sum{padding:8px 9px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:8px;background:rgba(255,146,155,.1)}
.damageEquation__sum span{color:#b38d92;font-size:12px;font-weight:800}
.damageEquation__sum strong{color:#ffd2d5;font-size:15px}
.damageEquation__split{padding:7px 9px;border-radius:8px;background:rgba(255,146,155,.055);color:#9b7e82;font-size:12px;line-height:1.4}
.damageEquation--empty{padding:9px;color:#78919d;font-size:12px}
.skillLevelGain{margin-top:7px;padding:7px 8px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:8px;background:rgba(113,220,242,.055);font-size:12px}
.skillLevelGain strong{color:#7595a5}
.skillLevelGain span{color:#a9bec7;text-align:right}
.skillLevelGain b{color:var(--skill-green)}
.skillLevelGain--branches{align-items:flex-start}
.skillLevelGain--branches>div{display:grid;gap:3px;text-align:right}
.skillLevelGain--branches>div>span{display:block}
.skillLevelGain--branches i{margin-right:5px;color:#7294a3;font-style:normal;font-weight:800}
.localBonusLine{margin-top:6px;display:flex;flex-wrap:wrap;gap:5px}
.localBonusLine span{padding:4px 6px;border-radius:6px;background:rgba(241,201,93,.09);color:#b8aa7d;font-size:12px}
.localBonusLine b{color:#f1d778}
.finalAttackExtras{margin-top:8px}
.finalAttackExtras>strong{color:#789aa9;font-size:12px}
.masteryImpact{margin-top:8px;padding:8px;border-left:2px solid var(--skill-gold);border-radius:0 8px 8px 0;background:rgba(75,59,18,.16)}
.masteryImpact>strong{display:block;color:#e4c970;font-size:12px}
.masteryImpact>div{margin-top:5px;display:grid;gap:3px}
.masteryImpact span{color:#a99e7d;font-size:12px;line-height:1.4}
.masteryImpact span b{color:#f2dda0}
.masteryImpact--none{border-left-color:#38515e;background:rgba(31,55,66,.14)}
.masteryImpact--none>strong,.masteryImpact--none span{color:#758d98}
.finalEffectList{margin:8px 0 0;padding:0;display:grid;gap:5px;list-style:none}
.finalEffectList li{padding:7px 8px;border-radius:8px;background:rgba(5,16,23,.62);color:#9eb2bb;font-size:12px;line-height:1.48;overflow-wrap:anywhere}
.finalEffectList strong{color:#dcecf1}
.finalEffectList em{color:var(--skill-green);font-style:normal;font-weight:800}
.pendingMissionNote{margin:8px 0 0;padding:8px;border-radius:8px;background:rgba(241,201,93,.08);color:#b5a46d;font-size:12px;line-height:1.5}

.skillTreeNav{
  position:sticky;
  top:122px;
  z-index:20;
  margin:12px 0;
  padding:8px;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  border:1px solid #274354;
  border-radius:14px;
  background:rgba(7,19,28,.94);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  backdrop-filter:blur(12px);
}
.skillTreeNav a{padding:9px 6px;border:1px solid transparent;border-radius:8px;color:#8da5b1;font-size:12px;font-weight:900;text-align:center;text-decoration:none}
.skillTreeNav a:hover,.skillTreeNav a:focus-visible{border-color:#3d6579;background:#102633;color:#fff}

.skillTreeSection{margin-top:14px;scroll-margin-top:196px}
.skillTreeSection__heading{
  padding:15px 17px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid #29495c;
  border-radius:15px;
  background:#0d202c;
}
.skillTreeSection__heading h3{margin:0;color:#fff}
.skillTreeSection__heading p{margin:5px 0 0;color:#7f98a6;font-size:12px}
.skillTreeSection__heading span{flex:0 0 auto;padding:6px 9px;border-radius:8px;background:rgba(113,220,242,.1);color:var(--skill-accent);font-size:12px;font-weight:900}
.skillCategoryGrid{margin-top:10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:12px}
.skillTreeColumn{min-width:0;padding:10px;border:1px solid #243f4f;border-radius:14px;background:rgba(6,18,26,.62)}
.skillTreeColumn--active{--tree-accent:var(--skill-red);--tree-soft:rgba(255,146,155,.09)}
.skillTreeColumn--buff{--tree-accent:var(--skill-accent);--tree-soft:rgba(113,220,242,.09)}
.skillTreeColumn--passive{--tree-accent:var(--skill-purple);--tree-soft:rgba(197,163,255,.09)}
.skillTreeColumn__head{padding:9px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:8px;border-radius:10px;background:var(--tree-soft)}
.skillTreeColumn__head>span{padding:3px 5px;border-radius:5px;background:rgba(0,0,0,.18);color:var(--tree-accent);font-size:12px;font-weight:900;letter-spacing:.06em}
.skillTreeColumn__head h4{margin:0;color:#fff}
.skillTreeColumn__head p{margin:3px 0 0;color:#728b97;font-size:12px;line-height:1.4}
.skillTreeColumn__head>strong{color:var(--tree-accent);font-size:12px}
.skillTreeColumn__rail{position:relative;margin-top:9px;padding-left:13px;display:grid;gap:12px}
.skillTreeColumn__rail::before{content:"";position:absolute;top:0;bottom:0;left:3px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--tree-accent),rgba(71,105,120,.15))}
.skillTreeRoot{position:relative;min-width:0}
.skillTreeRoot::before{content:"";position:absolute;z-index:2;top:20px;left:-13px;width:9px;height:9px;border:2px solid var(--tree-accent);border-radius:50%;background:#071019;box-shadow:0 0 0 3px #071019}
.skillTreeRoot--future{opacity:.58;filter:saturate(.66)}
.skillTreeRoot--common::before{border-color:var(--skill-gold)}
.skillSubtree{position:relative;margin:8px 0 0 20px;padding-left:15px;display:grid;gap:7px;border-left:2px solid rgba(113,220,242,.2)}
.skillSubtree>*{position:relative}
.skillSubtree>*::before{content:"";position:absolute;top:18px;left:-15px;width:13px;height:1px;background:rgba(113,220,242,.3)}
.enhancementBranch{min-width:0;padding:9px;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:8px;border:1px solid rgba(113,220,242,.2);border-radius:10px;background:rgba(11,34,45,.84)}
.enhancementBranch>span{padding:3px 5px;border-radius:5px;background:rgba(113,220,242,.1);color:var(--skill-accent);font-size:12px;font-weight:900}
.enhancementBranch strong{color:#dcecf1;font-size:12px}
.enhancementBranch p{margin:4px 0 0;color:#8fa6b1;font-size:12px;line-height:1.42}
.enhancementBranch p b{color:#bfeefa}
.enhancementBranch small{display:block;margin-top:4px;color:#627f8d;font-size:12px;line-height:1.35}
.enhancementBranch--fixed{border-color:rgba(241,201,93,.2);background:rgba(48,39,15,.2)}
.enhancementBranch--fixed>span{background:rgba(241,201,93,.1);color:var(--skill-gold)}
.masteryBranchNode{position:relative;min-width:0}
.masteryBranchNode__children{margin:6px 0 0 18px;padding-left:12px;display:grid;gap:6px;border-left:1px solid rgba(197,163,255,.25)}
.masteryBranchNode__children>.masteryBranchNode::before{content:"";position:absolute;top:17px;left:-12px;width:10px;height:1px;background:rgba(197,163,255,.32)}
.commonMasteryRoot{padding:11px;border:1px solid rgba(241,201,93,.25);border-radius:11px;background:rgba(50,41,16,.22)}
.commonMasteryRoot strong{color:#e8d28d;font-size:12px}
.commonMasteryRoot p{margin:4px 0 0;color:#918663;font-size:12px;line-height:1.4}
.skillTimeline{position:relative;margin-top:10px}
.skillTimeline::before{content:"";position:absolute;top:0;bottom:0;left:55px;width:2px;background:linear-gradient(180deg,#5abed6,#294b5d 75%,rgba(41,75,93,.2))}
.timelineNode{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;padding:0 0 12px}
.timelineLevel{position:relative;z-index:1;padding-top:12px;text-align:center}
.timelineLevel span{display:inline-flex;min-width:64px;min-height:28px;align-items:center;justify-content:center;padding:5px 8px;border:2px solid #3f7d93;border-radius:999px;background:#0a1d28;color:#bde7f2;font-size:12px;font-weight:900;box-shadow:0 0 0 5px #071019}
.timelineNode--future .timelineLevel span{border-color:#304754;color:#708995}
.timelineCards{min-width:0;display:grid;gap:8px}
.currentLevelMarker{position:relative;margin:2px 0 12px 112px;padding:7px 12px;border:1px solid rgba(241,201,93,.42);border-radius:9px;background:rgba(83,63,15,.34);color:#f6d97f;font-size:12px;font-weight:900}
.currentLevelMarker::before{content:"";position:absolute;left:-56px;top:50%;width:48px;height:1px;background:rgba(241,201,93,.7)}

.skillCard{
  min-width:0;
  padding:15px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:13px;
  border:1px solid #284859;
  border-radius:15px;
  background:linear-gradient(145deg,#0d202b,#091821);
  box-shadow:0 8px 20px rgba(0,0,0,.1);
}
.timelineNode--future .skillCard,.timelineNode--future .masteryCard{opacity:.58;filter:saturate(.66)}
.skillCard__icon{position:relative}
.skillCard__icon img{display:block;width:54px;height:54px;border-radius:11px;object-fit:contain;background:#06121a;image-rendering:auto}
.skillCard__step{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);min-width:38px;padding:3px 5px;border:1px solid #31556a;border-radius:999px;background:#081923;color:#8fc9d9;font-size:12px;font-weight:900;text-align:center;white-space:nowrap}
.skillCard__body{min-width:0}
.skillCard__titleRow{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.skillCard__titleRow h4{margin:0;color:#fff;word-break:keep-all}
.skillCard__id{color:#587586;font-size:12px;font-weight:700}
.skillBadges{margin-top:6px;display:flex;flex-wrap:wrap;gap:5px}
.skillBadge{padding:3px 6px;border-radius:6px;background:#17303e;color:#91c5d5;font-size:12px;font-weight:900}
.skillBadge--active{background:rgba(113,220,242,.13);color:#86dff1}
.skillBadge--passive{background:rgba(197,163,255,.13);color:#d1b8ff}
.skillBadge--attack{background:rgba(255,146,155,.12);color:#ffadb4}
.skillBadge--base{background:rgba(241,201,93,.12);color:#f4d57d}
.skillBadge--mission{background:rgba(131,229,179,.12);color:#9feac2}
.skillCard__levelLine{margin-top:10px;padding:9px 10px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;border:1px solid var(--skill-line-soft);border-radius:9px;background:rgba(4,14,20,.5);color:#8ca4b0;font-size:12px}
.skillCard__levelLine strong{color:#ecf7fa;font-size:12px}
.skillCard__levelLine b{color:var(--skill-accent)}
.skillCard__levelLine em{font-style:normal;color:#647f8d}
.skillCard__fixedNote{color:#f1c95d!important}
.actualEffectBlock{margin-top:10px}
.actualEffectBlock>h5{margin:0 0 7px;color:#7fa3b5;font-size:12px;letter-spacing:.02em}
.coefficientFlow{display:grid;gap:7px}
.coefficientFlow__branch{min-width:0;padding:10px;border:1px solid rgba(113,220,242,.16);border-radius:10px;background:rgba(7,24,33,.78)}
.coefficientFlow__head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.coefficientFlow__head strong{color:#dcebf0;font-size:12px}
.coefficientFlow__head span{color:#678594;font-size:12px;font-weight:800;white-space:nowrap}
.coefficientFlow__formula{margin-top:7px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.25fr) auto minmax(0,1fr);align-items:stretch;gap:5px}
.coefficientFlow__formula>span{min-width:0;padding:7px 8px;display:grid;align-content:center;gap:2px;border-radius:7px;background:rgba(3,14,20,.5)}
.coefficientFlow__formula small{color:#718d9a;font-size:12px;font-weight:800;line-height:1.3}
.coefficientFlow__formula b{color:#eafaff;font-size:12px;overflow-wrap:anywhere}
.coefficientFlow__formula em{color:#80a1ae;font-size:12px;font-style:normal;line-height:1.3}
.coefficientFlow__formula>i{align-self:center;color:#527181;font-size:12px;font-style:normal}
.coefficientFlow__applied{margin-top:6px;padding:6px 7px;display:flex;align-items:flex-start;flex-wrap:wrap;gap:5px;border-radius:7px;background:rgba(241,201,93,.075);font-size:12px}
.coefficientFlow__applied strong{color:#d9c078}
.coefficientFlow__applied span{color:#a99c77}
.coefficientFlow__applied b{color:#f1d99b}
.coefficientFlow__result{margin-top:6px;padding:7px 8px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;border-left:2px solid var(--skill-red);border-radius:0 7px 7px 0;background:rgba(42,16,21,.2)}
.coefficientFlow__result>span{color:#997d82;font-size:12px;font-weight:800}
.coefficientFlow__result>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px}
.coefficientFlow__result b{color:#fff;font-size:12px}
.coefficientFlow__result i{color:#725d62;font-size:12px;font-style:normal}
.coefficientFlow__result em{color:#ffb5ba;font-size:14px;font-style:normal;font-weight:900}
.coefficientFlow__facts{display:block;margin-top:5px;color:#7f969f;font-size:12px;line-height:1.4}
.coefficientFlow__sum{padding:7px 9px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:8px;background:rgba(255,146,155,.1)}
.coefficientFlow__sum span{color:#b38d92;font-size:12px;font-weight:800}
.coefficientFlow__sum strong{color:#ffd2d5;font-size:13px}
.coefficientFlow__split,.coefficientFlow--empty,.coefficientFlow__unresolved{padding:7px 9px;border-radius:8px;background:rgba(255,146,155,.055);color:#9b7e82;font-size:12px;line-height:1.4}
.effectList,.operationList{margin:7px 0 0;padding:0;display:grid;gap:5px;list-style:none}
.effectList li,.operationList li{min-width:0;padding:8px 9px;border-left:2px solid #31596b;border-radius:0 8px 8px 0;background:rgba(5,17,24,.55);color:#9eb1ba;font-size:12px;line-height:1.5;word-break:break-word}
.effectList strong,.operationList strong{color:#dcebf0}
.effectList em,.operationList em{color:var(--skill-green);font-style:normal;font-weight:800}
.effectList .effectWarning,.operationList .effectWarning{color:#e5c983}
.skillClientNote{margin:8px 0 0;padding:8px 9px;border-radius:8px;background:rgba(94,75,28,.18);color:#b9aa7b;font-size:12px;line-height:1.45}

.masteryCard{
  min-width:0;
  padding:11px 13px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:start;
  gap:10px;
  border:1px solid #2a3f50;
  border-radius:12px;
  background:rgba(12,25,35,.86);
}
.masteryCard--main{border-color:rgba(241,201,93,.34);background:linear-gradient(135deg,rgba(53,43,16,.28),rgba(12,25,35,.9))}
.masteryCard img{display:block;width:40px;height:40px;border-radius:8px;object-fit:contain;background:#07131b}
.masteryCard__body{min-width:0}
.masteryCard h4{margin:1px 0 0;color:#dfeaf0;word-break:keep-all}
.masteryCard h4 span{color:#607f8f;font-size:12px}
.masteryCard__meta{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px;color:#718b98;font-size:12px}
.masteryCard__meta b{color:var(--skill-gold)}
.masteryCard .operationList{grid-column:2/-1;margin-top:0}
.masteryCard__state{padding:4px 6px;border-radius:6px;background:rgba(113,220,242,.08);color:#7fc6d8;font-size:12px;font-weight:900;white-space:nowrap}
.masteryCard--future .masteryCard__state{color:#768994}
.skillEmptyState{padding:28px;border:1px dashed #294657;border-radius:14px;color:#7f98a5;text-align:center}

.skillUpdateBox,.qnaContactBar{width:min(1480px,calc(100% - 24px));margin-left:auto!important;margin-right:auto!important}
.skillUpdateBox{margin-top:26px!important;border:1px solid var(--skill-line);border-radius:16px;background:var(--skill-panel);overflow:hidden}
.skillUpdateBox .updateTitle{padding:13px 16px;border-bottom:1px solid var(--skill-line);background:var(--skill-panel-strong);color:#edf6fb;font-size:13px;font-weight:800}
.skillUpdateBox .updateRow{min-width:0;padding:10px 16px;display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px;border-bottom:1px solid rgba(125,185,211,.1);font-size:12px;line-height:1.55}
.skillUpdateBox .updateRow:last-child{border-bottom:0}
.skillUpdateBox .updateTime{color:#7f97a7;font-size:12px;white-space:nowrap}
.skillUpdateBox .updateText{min-width:0;color:#aec2cf;overflow-wrap:anywhere;word-break:keep-all}
.skillNoScript{width:min(1480px,calc(100% - 24px));margin:14px auto}

@media(max-width:1199px){
  .skillTreeNav{top:78px}
  .skillTreeSection{scroll-margin-top:152px}
  .jobCardGrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(max-width:820px){
  .skillNotice{grid-template-columns:1fr}
  .characterLevelControl{grid-template-columns:1fr}
  .skillBonusGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skillBonusField--all{grid-column:1/-1}
  .skillLevelFormulaGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .skillTreeNav{grid-template-columns:repeat(3,minmax(72px,1fr));position:static}
  .finalSkillColumns,.skillCategoryGrid{grid-template-columns:1fr}
  .skillFinalBoard__heading{display:block}
  .skillFinalBoard__heading>strong{display:inline-block;margin-top:9px}
}

@media(max-width:600px){
  .skillArchive,.skillUpdateBox,.qnaContactBar{width:calc(100% - 14px)}
  .skillSetupStep{padding:15px;border-radius:16px}
  .jobCardGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .jobCard{min-height:82px;grid-template-columns:44px minmax(0,1fr);padding:7px;gap:7px}
  .jobCard img{width:44px;height:60px}
  .jobCard span{font-size:12px}
  .skillBonusGrid{gap:7px}
  .skillBonusField{padding:9px}
  .skillLevelFormulaGrid{grid-template-columns:1fr}
  .skillResultHeader{grid-template-columns:minmax(0,1fr) auto;padding:10px;gap:8px}
  .skillResetButton{position:static;grid-column:2;grid-row:1}
  .skillResultTitle{padding-right:0}
  .skillResultTitle img{width:38px;height:46px}
  .skillResultFacts{grid-column:1/-1;gap:5px}
  .skillTreeNav{display:flex;flex-wrap:wrap}
  .skillTreeNav a{flex:1 1 76px}
  .skillFinalBoard{padding:12px;border-radius:15px;scroll-margin-top:90px}
  .skillTreeColumn{padding:8px}
  .skillSubtree{margin-left:10px;padding-left:11px}
  .skillSubtree>*::before{left:-11px;width:9px}
  .skillTimeline::before{left:15px}
  .timelineNode{grid-template-columns:1fr;padding-left:30px;gap:6px}
  .timelineLevel{padding-top:0;text-align:left}
  .timelineLevel span{min-width:58px;min-height:25px;box-shadow:0 0 0 4px #071019}
  .currentLevelMarker{margin-left:30px}
  .currentLevelMarker::before{left:-16px;width:10px}
  .skillCard{grid-template-columns:44px minmax(0,1fr);padding:12px;gap:10px}
  .skillCard__icon img{width:44px;height:44px}
  .skillCard__step{font-size:12px}
  .skillCard__titleRow{display:block}
  .skillCard__id{display:block;margin-top:3px}
  .coefficientFlow__formula{grid-template-columns:1fr}
  .coefficientFlow__formula>i{display:none}
  .masteryCard{grid-template-columns:36px minmax(0,1fr);padding:10px}
  .masteryCard img{width:36px;height:36px}
  .masteryCard__state{grid-column:2;justify-self:start}
  .masteryCard .operationList{grid-column:1/-1}
  .skillUpdateBox .updateRow{grid-template-columns:1fr;gap:2px;padding:9px 12px}
  .skillUpdateBox .updateTime{white-space:normal}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.jobCard{transition:none}}