:root{--ow-dark: #0f1923;--ow-darker: #080e14;--ow-card: #1a2634;--ow-card-hover: #213042;--ow-border: #2a3a4a;--ow-text: #e8edf2;--ow-muted: #7a9ab8;--ow-blue: #4fc3f7;--ow-orange: #f57c00;--role-tank: #5eb8ff;--role-damage: #ff6b6b;--role-support: #69e06d}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--ow-dark);color:var(--ow-text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh}a{color:inherit;text-decoration:none}img{display:block}.site-header{background:var(--ow-darker);border-bottom:2px solid var(--ow-blue);padding:0 1.5rem;height:56px;display:flex;align-items:center;gap:1rem}.site-header .logo{font-size:1.4rem;font-weight:700;color:var(--ow-blue);letter-spacing:.04em}.site-header .logo span{color:var(--ow-orange)}.site-nav{margin-left:auto;display:flex;align-items:center;gap:.25rem}.nav-link{padding:.35rem .75rem;border-radius:6px;font-size:.85rem;font-weight:500;color:var(--ow-muted);transition:color .15s,background .15s;white-space:nowrap}.nav-link:hover{color:var(--ow-text);background:#ffffff0f}.nav-link.active{color:var(--ow-blue);background:#4fc3f71a}.site-footer{text-align:center;padding:2rem 1rem;color:var(--ow-muted);font-size:.8rem;border-top:1px solid var(--ow-border);margin-top:3rem}.page-container{max-width:1400px;margin:0 auto;padding:1.5rem}.role-filter{display:flex;gap:.5rem;margin-bottom:1.5rem;flex-wrap:wrap}.role-btn{padding:.4rem 1rem;border-radius:999px;border:1px solid var(--ow-border);background:transparent;color:var(--ow-muted);cursor:pointer;font-size:.85rem;font-weight:600;transition:all .15s}.role-btn:hover{border-color:var(--ow-blue);color:var(--ow-text)}.role-btn.active{background:var(--ow-blue);border-color:var(--ow-blue);color:#000}.role-btn[data-role=tank].active{background:var(--role-tank);border-color:var(--role-tank)}.role-btn[data-role=damage].active{background:var(--role-damage);border-color:var(--role-damage);color:#fff}.role-btn[data-role=support].active{background:var(--role-support);border-color:var(--role-support);color:#000}.search-bar{position:relative;margin-bottom:1.5rem;max-width:400px}.search-bar input{width:100%;padding:.6rem 1rem .6rem 2.5rem;background:var(--ow-card);border:1px solid var(--ow-border);border-radius:8px;color:var(--ow-text);font-size:.9rem;outline:none;transition:border-color .15s}.search-bar input:focus{border-color:var(--ow-blue)}.search-bar input::placeholder{color:var(--ow-muted)}.search-bar .search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--ow-muted);pointer-events:none;font-size:.9rem}.controls-row{display:flex;align-items:flex-start;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}.controls-row .search-bar{margin-bottom:0;flex:1;min-width:200px;max-width:400px}.hero-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:1rem}.hero-card{background:var(--ow-card);border:1px solid var(--ow-border);border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s,box-shadow .15s;text-decoration:none;display:block}.hero-card:hover{transform:translateY(-3px);border-color:var(--ow-blue);box-shadow:0 6px 20px #4fc3f726}.hero-card__portrait{width:100%;aspect-ratio:1;object-fit:cover;background:var(--ow-darker)}.hero-card__portrait-placeholder{width:100%;aspect-ratio:1;background:var(--ow-darker);display:flex;align-items:center;justify-content:center;font-size:2.5rem;color:var(--ow-muted)}.hero-card__info{padding:.6rem .75rem .75rem}.hero-card__name{font-size:.85rem;font-weight:600;line-height:1.3;margin-bottom:.3rem}.hero-card__meta{display:flex;align-items:center;justify-content:space-between;gap:.3rem}.role-chip{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.1rem .4rem;border-radius:999px}.role-chip--tank{background:#5eb8ff26;color:var(--role-tank)}.role-chip--damage{background:#ff6b6b26;color:var(--role-damage)}.role-chip--support{background:#69e06d26;color:var(--role-support)}.video-count-badge{font-size:.72rem;color:var(--ow-muted)}.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.25rem}.video-card{background:var(--ow-card);border:1px solid var(--ow-border);border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .15s,border-color .15s;text-decoration:none;display:block}.video-card:hover{transform:translateY(-2px);border-color:var(--ow-blue)}.video-card__thumb{width:100%;aspect-ratio:16 / 9;object-fit:cover;background:var(--ow-darker)}.video-card__body{padding:.75rem}.video-card__title{font-size:.88rem;font-weight:600;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.5rem}.video-card__meta{display:flex;align-items:center;gap:.6rem;font-size:.75rem;color:var(--ow-muted)}.video-card__duration{background:var(--ow-darker);padding:.1rem .35rem;border-radius:4px;font-size:.72rem;font-weight:600}.page-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.page-header__back{background:transparent;border:1px solid var(--ow-border);color:var(--ow-muted);padding:.4rem .8rem;border-radius:6px;cursor:pointer;font-size:.85rem;transition:border-color .15s,color .15s}.page-header__back:hover{border-color:var(--ow-blue);color:var(--ow-text)}.page-header__portrait{width:64px;height:64px;border-radius:8px;object-fit:cover;border:2px solid var(--ow-border)}.page-header__title{font-size:1.5rem;font-weight:700}.page-header__subtitle{color:var(--ow-muted);font-size:.85rem;margin-top:.2rem}.load-more-btn{display:block;margin:2rem auto 0;padding:.75rem 2rem;background:transparent;border:1px solid var(--ow-blue);color:var(--ow-blue);border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:600;transition:background .15s}.load-more-btn:hover{background:#4fc3f71a}.loading-state,.error-state,.empty-state{text-align:center;padding:4rem 2rem;color:var(--ow-muted)}.error-state{color:var(--role-damage)}.spinner{display:inline-block;width:40px;height:40px;border:3px solid var(--ow-border);border-top-color:var(--ow-blue);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:1rem}@keyframes spin{to{transform:rotate(360deg)}}.page-section-title{font-size:1.5rem;font-weight:700;margin-bottom:1.5rem}.section-label{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--ow-muted);margin-bottom:1rem}