.skills-page{padding:4px 0 12px}
.skills-rank-panel{margin-top:2px;padding-bottom:12px}
.skills-overview{padding:0 7px}
.skills-hero-rank{display:flex;align-items:center;gap:10px;padding:0 4px;color:#e9e2d2;font-size:14px}
.skills-hero-rank-icon{width:54px;height:58px;object-fit:contain}
.skills-hero-rank p{margin:0}.skills-hero-rank strong{color:#85d36b}
.skills-hero-items{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-top:5px}
.skills-hero-item{display:grid;justify-items:center;gap:4px;text-decoration:none;font-size:10px;min-width:0}
.skills-hero-item img{width:32px;height:32px;object-fit:contain;background:#171918;border:1px solid #665c48;border-radius:4px}
.skills-hero-value{color:var(--skill-level-color);white-space:nowrap}
.skills-list{gap:2px;margin-top:2px}
.skill-card{aspect-ratio:auto;height:256px;scroll-margin-top:8px}
.skill-art{height:43%;object-fit:cover}
.skill-card .training-stat{top:43%;font-size:14px;font-weight:400}
.skill-card .training-stat strong{font-size:15px;line-height:18px}
.skill-card .training-value{font-size:12px;line-height:16px}
.skill-description{position:absolute;left:8%;right:8%;top:60%;margin:0;color:#bbb8ad;font-size:11px;line-height:14px}
.skill-card .training-progress{bottom:24%;height:11px}
.skill-card .training-upgrade{bottom:6%;height:14%;min-height:30px;font-size:11px;padding:0 8px}
.skill-card .training-upgrade:disabled{opacity:1;filter:grayscale(.5) brightness(.7)}
.skill-card[data-skill="mechanic"] .training-upgrade{font-size:10px;line-height:12px;white-space:normal}
.skill-feedback{grid-column:1/-1;margin:2px 8px;text-align:center;font-size:12px;line-height:16px;color:#f4d465}
.skill-feedback[hidden]{display:none}
.skills-message{margin:2px 8px;text-align:center;color:#f4d465;font-size:12px}.skills-message:empty{display:none}
.skills-sync{width:100%;margin:2px 0}.skills-sync[hidden]{display:none}
.skills-note{margin-top:2px}
.skills-page .home-bottom-nav{margin-top:2px;gap:2px}
@media(max-width:390px){.skill-card{height:248px}.skill-card .training-stat strong{font-size:14px}.skill-card .training-value{font-size:11px}.skill-description{font-size:10px;line-height:13px}.skills-overview{padding-inline:2px}.skills-hero-items{gap:2px}.skills-hero-item{font-size:9px}.skills-hero-item img{width:29px;height:29px}}

/* Preserve generated corner/rivet proportions at both card widths. */
.skill-card::after{background:none;border:9px solid transparent;border-image:url('assets/skills/redesign-v2/card-frame.png') 90 stretch;box-sizing:border-box}
.skill-art{left:6%;top:5%;width:88%;height:auto;aspect-ratio:1.9;object-fit:cover}
.skill-card .training-upgrade{background:none;border:5px solid transparent;border-image:url('assets/skills/redesign-v2/button.png') 90 fill stretch;box-sizing:border-box;min-height:34px;height:34px;padding:0 2px}
.skill-card .training-upgrade img{width:14px;height:14px;flex-basis:14px}

/* One identical integrated PNG frame and text panel for all skills. */
.skill-card{height:auto;aspect-ratio:1162/1354;background:transparent;clip-path:none;overflow:visible}
.skill-card::after{border:0;background:url('assets/skills/redesign-v2/card-master-v3.png') center/100% 100% no-repeat}
.skill-art{left:3%;top:3%;width:94%;height:46%;aspect-ratio:auto;object-fit:cover;clip-path:polygon(5% 0,95% 0,100% 9%,100% 91%,95% 100%,5% 100%,0 91%,0 9%)}
.skill-card .training-stat{top:54%;left:9%;right:9%}
.skill-description{top:69%;left:9%;right:9%;font-size:10px;line-height:12px}
.skill-card .training-progress{bottom:20%;height:9px}
.skill-card .training-upgrade{bottom:5.5%;height:28px;min-height:28px;font-size:10px}
@media(max-width:390px){.skill-card{height:auto}.skill-card .training-stat strong{font-size:12px;line-height:15px}.skill-card .training-value{font-size:10px;line-height:13px}.skill-description{font-size:9px;line-height:11px}.skill-card .training-upgrade{font-size:9px;height:25px;min-height:25px}}
.skill-card::after{z-index:1}
.skill-card .training-stat,.skill-card .skill-description,.skill-card .training-progress{z-index:2}
.skill-card .training-upgrade{z-index:4}
.skill-description{top:68%}
.skill-card .training-progress{bottom:18%}
/* Visible action feedback without inserting rows into the card grid. */
.skill-feedback:not([hidden]){position:fixed;z-index:50;left:50%;bottom:12px;transform:translateX(-50%);box-sizing:border-box;width:calc(100% - 24px);max-width:424px;margin:0;padding:10px 12px;border:1px solid #88744e;border-radius:4px;background:#202321;color:#f4d465;box-shadow:0 2px 8px #0009;text-align:center;font-size:12px;line-height:16px}

/* Named overview, four skills above three centered skills. */
.skills-rank-panel{background-size:100% 100%;padding-bottom:16px}
.skills-hero-rank{padding:0 7px;gap:12px}
.skills-hero-rank-icon{width:58px;height:62px}
.skills-hero-rank .current-rank-title{display:grid;gap:4px}
.skills-hero-rank .current-rank-title>span{color:#bbb8ad;font-size:11px}
.skills-hero-rank .current-rank-title>strong{font-size:18px;line-height:21px}
.skills-hero-items{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px 4px;margin-top:8px;padding:6px 0 0;border-top:1px solid #665c4866}
.skills-hero-item{grid-column:span 2;gap:3px;font-size:11px;text-align:center;line-height:13px}
.skills-hero-item:nth-child(5){grid-column:2/span 2}
.skills-hero-item img{width:38px;height:34px;object-fit:cover}
.skills-overview-name{color:#ddd7c9;font-size:10px;line-height:12px;min-height:24px;display:flex;align-items:center;justify-content:center}
.skills-hero-value{font-size:12px;line-height:14px}
@media(max-width:390px){.skills-hero-items{gap:7px 2px}.skills-hero-item img{width:34px;height:31px}.skills-overview-name{font-size:9px;line-height:11px;min-height:22px}.skills-hero-value{font-size:11px}.skills-hero-rank .current-rank-title>strong{font-size:17px}}
.skills-rank-panel{background:none;padding:0;margin-top:2px}
.skills-rank-panel .training-title{top:0;height:52px;margin:0 0 2px;background:url('assets/crew/ui/title-v1.png') center/100% 100% no-repeat}
.skills-overview{position:relative;padding:12px 12px 14px;background:#202321;border:9px solid transparent;border-image:url('assets/training/ui/card-frame-v1.png') 85 stretch}
@media(max-width:390px){.skills-rank-panel .training-title{height:46px}.skills-overview{padding:9px 6px 11px}}