/* One quiet journal for permanent class progress. All phone targets remain 44px. */
.class-panel-overlay .class-panel { width: min(780px, 100%); max-width: 780px; padding: 20px; }
.class-panel h3 { margin: 0 0 8px; color: #e1d7b3; font-size: 16px; }
.class-panel h4 { margin: 0 0 7px; font: 700 14px/1.35 system-ui, sans-serif; color: #dce5d9; }
.class-panel p { margin: 6px 0 10px; color: #bdcbbd; font-size: 12px; line-height: 1.5; }
.class-hero-tabs { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; margin: 15px 0; }
.class-hero-tab { position: relative; min-width: 0; min-height: 58px; padding: 8px 5px; display: flex; flex-direction: column; gap: 4px; justify-content: center; align-items: center; background: #19382d; border: 1px solid #718a7250; color: #c6d3c5; border-radius: 10px; }
.class-hero-tab.selected { background: #314934; border-color: #b7b780; color: #f2e7c3; }
.class-hero-tab small { font-size: 10px; }
.class-points-badge { position: absolute; right: 4px; top: 3px; font-size: 9px; color: #e6d28a; }
.class-panel-status { padding: 10px; border: 1px solid #d0c18450; border-radius: 8px; }
.class-panel .class-progress { padding: 13px; background: #102b21; border: 1px solid #849c7940; border-radius: 12px; }
.class-panel .class-points { display: block; color: #e6d695; font-size: 14px; margin: 7px 0; }
.class-panel .class-note { color: #a5b7a4; font-size: 11px; }
.class-panel .class-apply-note { margin-top: 12px; color: #ded3a5; }
.class-specializations, .class-talent-tree { margin-top: 22px; }
.class-spec-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.class-spec-card { min-width: 0; border: 1px solid #708a704d; padding: 12px; border-radius: 12px; display: flex; flex-direction: column; background: #193329; }
.class-spec-card.selected { border-color: #b5b079; background: #223c2c; }
.class-unlock-list { padding: 0; margin: 9px 0 15px; list-style: none; flex: 1; }
.class-unlock-list li { padding: 9px 0; border-top: 1px solid #bed0ad20; display: grid; gap: 4px; }
.class-unlock-list strong { font-size: 12px; line-height: 1.4; color: #b7c5b6; }
.class-unlock-list .unlocked strong { color: #ede1b0; }
.class-unlock-level { color: #a5b9a0; font-size: 10px; }
.class-unlock-list small { color: #adbdac; font-size: 10px; line-height: 1.5; }
.class-choose { min-height: 44px; min-width: 0; padding: 8px; border: 1px solid #b2b08370; border-radius: 8px; background: #425739; color: #f1e7c0; font-size: 12px; }
.class-panel button:disabled { cursor: default; color: #92a48f; background: #1d3026; border-color: #77896e33; opacity: 1; }
.class-talent-branches { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.class-talent-branch { min-width: 0; padding-top: 12px; border-top: 2px solid #8d9c684a; }
.class-talent-path { list-style: none; margin: 0; padding: 0; }
.class-talent { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 8px; margin: 0 0 16px; border: 1px solid #718c7140; border-radius: 9px; background: #152e24; }
.class-talent + .class-talent::before { content: ''; position: absolute; width: 1px; height: 17px; top: -18px; left: 20px; background: #97a77870; }
.class-talent.learned { border-color: #a6af765e; }
.class-talent-copy { min-width: 0; flex: 1; }
.class-talent-copy strong { display: block; color: #d3dfc9; font-size: 12px; }
.class-talent-rank { font-size: 11px; color: #d8cb91; }
.class-panel .class-talent-copy p { font-size: 10px; margin: 4px 0; }
.class-talent-requires { display: block; color: #aab4a0; font-size: 10px; line-height: 1.4; }
.class-talent-add { flex: 0 0 44px; min-height: 44px; width: 44px; border: 1px solid #b4b17b70; border-radius: 9px; color: #ede1aa; font-size: 23px; background: #354e33; }
.class-panel-footer { display: flex; gap: 8px; margin-top: 16px; }.class-panel-footer button { flex: 1; min-height: 44px; }
.class-level-link { display: block; pointer-events: auto; touch-action: manipulation; min-height: 44px; padding: 3px 0; color: #c6d3b5; background: transparent; border: 0; box-shadow: none; font: 600 10px/1.3 system-ui,sans-serif; text-align: left; text-decoration: underline; text-decoration-color: #9aaa7960; text-underline-offset: 3px; }
#realmClassLevel { margin-left: auto; padding-left: 8px; text-align: right; }
.class-panel-entry { min-height: 44px; }
.class-skills.subclass-skills { bottom: calc(128px + var(--safe-bottom,0px)); }
.class-skills .spec-skill { flex: 0 1 94px; width: 94px; min-height: 44px; }
.class-skills .spec-skill .class-skill-name { white-space: normal; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.forest-rpg.rpg-shared #app > #subclassSkills { display: none; }
.forest-rpg #app.spec-skills-visible > .rpg-notices,
.forest-rpg #sharedScreen.spec-skills-visible > .rpg-shared-notices { bottom: calc(182px + var(--safe-bottom,0px)); }
#app.spec-skills-visible > #interact, #app.spec-skills-visible > #lootNotice,
#sharedScreen.spec-skills-visible > #realmNotice { bottom: calc(182px + var(--safe-bottom,0px)); }
@media (max-width: 620px) {
 .class-panel-overlay .class-panel { padding: 16px; }
 .class-spec-list, .class-talent-branches { grid-template-columns: minmax(0,1fr); }
 .class-spec-card { padding: 12px; }
 .class-unlock-list li { grid-template-columns: 44px minmax(0,1fr); gap: 4px 8px; }
 .class-unlock-list small { grid-column: 2; }
 .class-talent-copy strong { font-size: 13px; }
 .class-panel .class-talent-copy p { font-size: 11px; }
 .class-talent { padding: 10px 12px; }
}
@media (orientation: landscape) and (max-height: 540px) {
 .class-skills.subclass-skills { bottom: calc(116px + var(--safe-bottom,0px)); }
 .forest-rpg #app.spec-skills-visible > .rpg-notices,
 .forest-rpg #sharedScreen.spec-skills-visible > .rpg-shared-notices { bottom: calc(166px + var(--safe-bottom,0px)); }
}