.team-page { --team-surface: #fff8fc; --team-muted: #664d60; --team-overlay: linear-gradient(110deg, #fff8fcf0, #ffe1f7dc); }
[data-theme="dark"] .team-page { --team-surface: #282332; --team-muted: #e7d4e0; --team-overlay: linear-gradient(110deg, #282332f0, #382637df); }
.team-page main { width: min(1200px, 100%); margin: 24px auto; box-sizing: border-box; padding: 0 12px; }
.team-page a:focus-visible { outline: 3px solid #a33173; outline-offset: 5px; }
.team-page { flex-wrap: wrap; }
.team-page { margin: 8px; }
.teams-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.team-card, .team-hero { display: flex; align-items: center; gap: 24px; padding: 28px; border-radius: 25px; background: var(--team-surface); color: var(--text-color); box-shadow: 0 4px 14px #64364915; }
.team-card { text-decoration: none; transition: transform .2s, box-shadow .2s; }
@media (hover: hover) { .team-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px #64364930; } }
.team-avatar { width: 128px; height: 128px; flex: 0 0 auto; border-radius: 22px; object-fit: cover; background: var(--team-surface); }
.team-copy { min-width: 0; overflow-wrap: anywhere; }
.team-copy h1, .team-copy h2 { margin: 12px 0; }
.team-copy p { color: var(--team-muted); line-height: 1.5; margin: 8px 0; }
.team-badge { display: inline-block; background: #f8d9eb; color: #713451; border-radius: 20px; padding: 5px 12px; font-size: 14px; font-weight: 600; }
.team-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.team-breadcrumb a, .team-state a { color: inherit; }
.team-hero { position: relative; isolation: isolate; overflow: hidden; margin-bottom: 32px; min-height: 180px; }
.team-hero-background { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(14px); transform: scale(1.08); opacity: .3; z-index: -2; }
.team-hero::after { content: ''; position: absolute; inset: 0; background: var(--team-overlay); z-index: -1; }
.team-hero .team-avatar { width: 170px; height: 170px; }
.team-state { padding: 32px; border-radius: 25px; background: var(--team-surface); }
.team-page .comic-name, .team-page .comic-chapter { color: var(--text-color); overflow-wrap: anywhere; }
@media (max-width: 900px) { .teams-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .team-card, .team-hero { padding: 20px; gap: 16px; } .team-avatar { width: 86px; height: 86px; } .team-hero { flex-direction: column; align-items: flex-start; } .team-copy h2 { font-size: 20px; } }
@media (max-width: 1100px) { .team-page main { margin-left: 0; margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { .team-card { transition: none; } }