/* Mastery lives above the original Legacy tree in Growth. */
#masteryPanel { margin-bottom: 14px; color: #dce7f5; font: 12px/1.5 'Courier New', monospace; }
#masteryPanel[hidden] { display: none; }
#masteryPanel .mastery-card { min-width: 0; padding: 14px; border: 1px solid #7a6740; border-radius: 12px; background: linear-gradient(145deg, #242238, #141a2c 65%); box-shadow: inset 0 1px rgba(255, 230, 164, .07); }
#masteryPanel .mastery-heading, #masteryPanel .mastery-toolbar, #masteryPanel .mastery-source, #masteryPanel .mastery-error { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#masteryPanel .mastery-eyebrow { color: #b6a57d; font-size: 9px; letter-spacing: 1.4px; }
#masteryPanel h3 { color: #ffe3a4; font-size: 21px; line-height: 1.3; margin: 3px 0 0; }
#masteryPanel .mastery-points { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; max-width: 48%; }
#masteryPanel .mastery-points strong { color: #ffe3a4; font-size: 25px; line-height: 1.1; overflow-wrap: anywhere; max-width: 100%; }
#masteryPanel .mastery-points span { color: #bbcae0; font-size: 10px; text-align: right; }
#masteryPanel .mastery-note { color: #aabbcf; font-size: 11px; margin: 10px 0; }
#masteryPanel .mastery-notice { color: #ead39f; background: #302b27; border-left: 2px solid #a98a50; padding: 7px 9px; margin: 10px 0; font-size: 11px; }
#masteryPanel button { min-height: 36px; padding: 7px 10px; border: 1px solid #a88b51; border-radius: 6px; background: #493b26; color: #ffebbc; font: inherit; cursor: pointer; }
#masteryPanel button:disabled { opacity: .48; cursor: default; }
#masteryPanel button:focus-visible, #masteryPanel summary:focus-visible { outline: 2px solid #92cbff; outline-offset: 3px; }
#masteryPanel .mastery-toolbar { color: #aabbcf; font-size: 10px; margin-bottom: 10px; }
#masteryPanel .mastery-refresh { min-height: 32px; background: transparent; border-color: #4b526a; color: #bbcae0; padding: 5px 8px; }
#masteryPanel .mastery-branches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
#masteryPanel .mastery-branches button { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; padding: 6px 3px; background: #182033; border-color: #39455c; color: #b9c7da; }
#masteryPanel .mastery-branches button span { font-size: 9px; opacity: .8; }
#masteryPanel .mastery-branches button[aria-pressed="true"] { border-color: #c5a163; color: #ffe3a4; background: #343027; }
#masteryPanel .mastery-nodes { list-style: none; margin: 11px 0; padding: 0; }
#masteryPanel .mastery-node { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 0; min-width: 0; border-top: 1px solid #30364a; }
#masteryPanel .mastery-node:first-child { border-top: 0; }
#masteryPanel .mastery-step { flex: 0 0 23px; height: 23px; display: grid; place-items: center; color: #9cafc7; background: #242d41; border: 1px solid #4b5871; border-radius: 5px; font-size: 10px; }
#masteryPanel .mastery-node-copy { display: flex; flex: 1; flex-direction: column; min-width: 0; gap: 3px; overflow-wrap: anywhere; }
#masteryPanel .mastery-node-copy strong { color: #d9e4f3; font-size: 12px; }
#masteryPanel .mastery-node-copy > span { color: #aabbcf; font-size: 10px; }
#masteryPanel .mastery-node-status { flex-shrink: 0; font-size: 9px; color: #9cafc7; }
#masteryPanel .mastery-node > button { flex-shrink: 0; font-size: 10px; }
#masteryPanel .is-owned .mastery-step { border-color: #678e75; background: #294033; color: #b0e3bd; }
#masteryPanel .is-owned .mastery-node-status { color: #a6dcb6; }
#masteryPanel .is-next .mastery-step { border-color: #c5a163; color: #ffe3a4; }
#masteryPanel .is-locked .mastery-node-copy strong { color: #99a8bf; }
#masteryPanel .mastery-sources { border-top: 1px solid #454255; padding-top: 8px; }
#masteryPanel .mastery-sources summary { color: #e7d1a5; cursor: pointer; padding: 5px 0; }
#masteryPanel .mastery-sources summary > span { float: right; font-size: 10px; color: #aabbcf; }
#masteryPanel .mastery-source { border-top: 1px solid #30364a; padding: 7px 0; font-size: 10px; color: #acbdd3; }
#masteryPanel .mastery-source > span:last-child { flex-shrink: 0; color: #e7d1a5; }
#masteryPanel .mastery-source.is-earned > span:last-child { color: #a6dcb6; }
#masteryPanel .mastery-error { padding: 9px; margin-bottom: 10px; color: #ffcfb6; background: #342623; border: 1px solid #8b5d47; border-radius: 8px; font-size: 11px; }
@media (min-width: 760px) {
  #masteryPanel .mastery-nodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; gap: 8px; }
  #masteryPanel .mastery-node,
  #masteryPanel .mastery-node:first-child { padding: 9px 10px; border: 1px solid #30364a; border-radius: 8px; background: rgba(12, 18, 32, .35); }
  #masteryPanel .mastery-node.is-owned { border-color: #425c4e; }
  #masteryPanel .mastery-node.is-next { border-color: #8a7145; }
}
@media (max-width: 380px) {
  #masteryPanel .mastery-card { padding: 10px; }
  #masteryPanel .mastery-node { gap: 6px; }
  #masteryPanel .mastery-node > button { padding: 6px; }
  #masteryPanel h3 { font-size: 19px; }
}