/* Skill cards: precise progress, clear sources and quiet diagonal stripes. */
#abao-mgo .mgo-skill-card,
#abao-mgo .mgo-portal-reader { --skill-accent:#6487a5; --skill-soft:rgba(100,135,165,.1); }
#abao-mgo .mgo-skill-tone-green { --skill-accent:#498b83; --skill-soft:rgba(73,139,131,.1); }
#abao-mgo .mgo-skill-tone-purple { --skill-accent:#8575ad; --skill-soft:rgba(133,117,173,.1); }
#abao-mgo .mgo-skill-tone-amber { --skill-accent:#ab824b; --skill-soft:rgba(171,130,75,.1); }
#abao-mgo.myriad-ui .mgo-skill-intro { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:0 0 12px; font-size:14px; color:var(--myriad-muted); }
#abao-mgo.myriad-ui .mgo-skill-manage { display:inline-block; font-size:12px; color:var(--myriad-accent); text-decoration:none; padding:6px 10px; border:1px solid var(--atelier-edge); border-radius:8px; background:var(--myriad-chrome); }
#abao-mgo.myriad-ui .mgo-skill-card { padding:24px 26px; margin:16px 0; border:1px solid var(--atelier-edge); border-radius:18px; background:var(--myriad-chrome); color:var(--myriad-ink); box-shadow:0 5px 18px rgba(29,52,77,.035); }
#abao-mgo.myriad-ui .mgo-skill-card > header { display:flex; align-items:center; gap:14px; }
#abao-mgo.myriad-ui .mgo-skill-mark { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--atelier-edge); border-radius:13px; background:var(--skill-soft); color:var(--skill-accent); font:600 15px/1 "Segoe UI",sans-serif; flex:none; }
#abao-mgo.myriad-ui .mgo-skill-card header > div:last-child { min-width:0; }
#abao-mgo.myriad-ui .mgo-skill-card header h2 { margin:0; font-size:21px; line-height:1.4; font-weight:600; }
#abao-mgo.myriad-ui .mgo-skill-card header h2 a { color:var(--myriad-ink); text-decoration:none; }
#abao-mgo.myriad-ui .mgo-skill-card header h2 a:hover { color:var(--skill-accent); }
#abao-mgo.myriad-ui .mgo-skill-card .mgo-portal-tags { margin:4px 0 0; font-size:12px!important; line-height:1.5; color:var(--myriad-muted); }
#abao-mgo.myriad-ui .mgo-skill-card .mgo-skill-description { margin:16px 0 19px; color:var(--myriad-muted); }
#abao-mgo.myriad-ui .mgo-skill-card .mgo-skill-description :is(p,li) { font-size:14px!important; line-height:1.8; margin:0 0 8px; }
#abao-mgo.myriad-ui .mgo-skill-card .mgo-skill-description:empty { margin:0 0 18px; }
#abao-mgo.myriad-ui .mgo-skill-level { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 10px; font-size:13px; color:var(--myriad-muted); }
#abao-mgo.myriad-ui .mgo-skill-level strong { font-size:25px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; color:var(--skill-accent); }
#abao-mgo.myriad-ui .mgo-skill-level strong small { font-size:12px; font-weight:400; color:var(--myriad-muted); }
#abao-mgo.myriad-ui .mgo-skill-meter { height:12px; overflow:hidden; border-radius:5px; background:var(--myriad-soft); box-shadow:inset 0 1px 3px rgba(29,52,77,.06); }
#abao-mgo.myriad-ui .mgo-skill-stripes { display:block; height:100%; border-radius:5px; background-color:var(--skill-accent); background-image:repeating-linear-gradient(135deg,transparent 0,transparent 7px,rgba(255,255,255,.24) 7px,rgba(255,255,255,.24) 14px); background-size:40px 40px; }
#abao-mgo.myriad-ui .mgo-skill-breakdown { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:13px; font-size:12px; color:var(--myriad-muted); }
#abao-mgo.myriad-ui .mgo-skill-note { font-size:12px!important; line-height:1.7; margin:9px 0 0; color:var(--myriad-muted); }
#abao-mgo.myriad-ui .mgo-skill-related { display:grid; gap:8px; margin:18px 0 0; padding-top:14px; border-top:1px solid var(--atelier-edge); }
#abao-mgo.myriad-ui .mgo-skill-related small { font-size:12px; color:var(--myriad-muted); }
#abao-mgo.myriad-ui .mgo-skill-related a { display:flex; justify-content:space-between; gap:16px; font-size:13px; line-height:1.6; text-decoration:none; color:var(--myriad-accent); }
#abao-mgo.myriad-ui .mgo-skill-related a:hover { text-decoration:underline; }
#abao-mgo.myriad-ui[data-myriad-theme="dark"] :is(.mgo-skill-card,.mgo-skill-detail) { --skill-accent:#9ab9d1; }
#abao-mgo.myriad-ui[data-myriad-theme="dark"] .mgo-skill-tone-green { --skill-accent:#8ac4bc; }
#abao-mgo.myriad-ui[data-myriad-theme="dark"] .mgo-skill-tone-purple { --skill-accent:#b9a5d8; }
#abao-mgo.myriad-ui[data-myriad-theme="dark"] .mgo-skill-tone-amber { --skill-accent:#d9b780; }
#abao-mgo.myriad-ui .mgo-portal-night .mgo-skill-card { --skill-accent:#9ab9d1; --myriad-ink:#deEAF7; --myriad-muted:#afbad0; --myriad-accent:#9ab9d1; --myriad-soft:rgba(255,255,255,.08); --atelier-edge:rgba(150,175,203,.22); background:rgba(255,255,255,.025); }
#abao-mgo.myriad-ui .mgo-portal-night .mgo-skill-detail { --skill-accent:#9ab9d1; --myriad-muted:#afbad0; --myriad-soft:rgba(255,255,255,.08); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  #abao-mgo.myriad-ui:not(.mgo-motion-off) .mgo-skill-card:hover .mgo-skill-stripes { animation:mgo-skill-flow 3s linear infinite; }
}
@keyframes mgo-skill-flow { to { background-position:40px 0; } }
@media (max-width:600px) {
  #abao-mgo.myriad-ui .mgo-skill-card { padding:20px 18px; }
  #abao-mgo.myriad-ui .mgo-skill-card header h2 { font-size:19px; }
  #abao-mgo.myriad-ui .mgo-skill-intro { font-size:13px; }
  #abao-mgo.myriad-ui .mgo-skill-breakdown { gap:6px 12px; }
}
