:root{--bg:#0b0e13;--fg:#e8eef5;--muted:#9fb3c8;--primary:#6ea8fe;--card:#121722;--border:#223048}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;}
a{color:var(--primary);text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.site-header{background:#0f1520;border-bottom:1px solid var(--border)}
.logo{font-weight:700;color:#fff}
nav a{margin:0 8px;color:var(--fg)}
.hero{padding:48px 0}
.search-form{display:flex;gap:8px}
.search-form input{flex:1;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--fg)}
.search-form button{padding:10px 16px;border-radius:8px;border:0;background:var(--primary);color:#000;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin-top:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:block}
.card img{width:100%;display:block;aspect-ratio:3/4;object-fit:cover}
.card-body{padding:10px}
.card-body h3{margin:0 0 6px 0;font-size:16px;color:#fff}
.card-body p{margin:0;color:var(--muted)}
.anime-hero{display:grid;grid-template-columns:160px 1fr;gap:16px;margin:16px 0}
.anime-hero .poster{width:160px;border-radius:10px;border:1px solid var(--border)}
.track-selectors{display:flex;gap:12px;margin:12px 0}
select, input, textarea{background:var(--card);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:8px}
button{background:var(--primary);color:#000;border:0;border-radius:8px;padding:8px 12px;font-weight:700}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:8px}
.auth{max-width:420px}
.alert{background:#3b1f1f;color:#ffb3b3;border:1px solid #6a2a2a;padding:10px;border-radius:8px;margin:8px 0}
.ads{margin:16px 0}
.site-footer{border-top:1px solid var(--border);margin-top:24px}

/* Auth pages */
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-form label{display:flex;flex-direction:column;gap:4px}
.auth-form input{width:100%;padding:12px;border-radius:8px;border:1px solid var(--border);background:var(--card);color:var(--fg)}
.auth-form button{width:100%;padding:12px;border-radius:8px;border:0;background:var(--primary);color:#000;font-weight:600;cursor:pointer}
.auth-form button:hover{opacity:0.9}
.auth-links{text-align:center;margin-top:16px}
.auth-links a{margin:0 8px;color:var(--primary)}
.shiki-btn{background:#ff6b6b;color:#fff;border:0;border-radius:8px;padding:12px;width:100%;font-weight:600;cursor:pointer;margin-top:8px}
.shiki-btn:hover{opacity:0.9}

/* Comments */
.comment{margin-bottom:16px;padding:12px;background:var(--card);border-radius:8px;border:1px solid var(--border)}
.comment .meta{color:var(--muted);font-size:14px;margin-bottom:8px}
.comment .text{margin-bottom:8px;line-height:1.5}
.comment .votes{display:flex;align-items:center;gap:8px}
.vote{background:none;border:1px solid var(--border);border-radius:4px;padding:4px 8px;cursor:pointer;color:var(--fg)}
.vote:hover{background:var(--primary);color:#000}
.score{font-weight:600;min-width:20px;text-align:center}

/* User dropdown */
.user-menu{position:relative;display:inline-block}
.user-menu .dropdown{position:absolute;top:100%;right:0;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:8px;min-width:200px;z-index:1000;display:none}
.user-menu:hover .dropdown{display:block}
.user-menu .dropdown a{display:block;padding:8px;color:var(--fg);text-decoration:none;border-radius:4px}
.user-menu .dropdown a:hover{background:var(--primary);color:#000}

/* Comment form */
#commentForm{margin-top:24px;padding:16px;background:var(--card);border-radius:8px;border:1px solid var(--border)}
#commentForm textarea{width:100%;margin-bottom:12px;padding:12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--fg);resize:vertical}

/* Legal pages */
.legal-page{max-width:800px;margin:0 auto;padding:20px;line-height:1.6}
.legal-page h1{color:var(--primary);margin-bottom:20px}
.legal-page h2{color:var(--fg);margin-top:30px;margin-bottom:15px}
.legal-page h3{color:var(--fg);margin-top:20px;margin-bottom:10px}
.legal-page ul{margin:10px 0;padding-left:20px}
.legal-page li{margin:5px 0}

/* Footer */
.footer-links{display:flex;gap:20px;margin-bottom:10px;flex-wrap:wrap}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--primary)}

/* Anime Page */
.anime-page{max-width:1200px;margin:0 auto}
.anime-info-section{display:grid;grid-template-columns:300px 1fr;gap:30px;margin-bottom:40px;padding:20px;background:var(--card);border-radius:12px;border:1px solid var(--border)}
.anime-poster{position:relative;border-radius:12px;overflow:hidden}
.anime-poster img{width:100%;height:auto;display:block}
.poster-overlay{position:absolute;top:10px;right:10px}
.favorite-btn{background:rgba(0,0,0,0.7);border:none;border-radius:50%;width:40px;height:40px;color:#fff;cursor:pointer;transition:all 0.3s}
.favorite-btn:hover{background:var(--primary);color:#000}
.anime-details{display:flex;flex-direction:column;gap:20px}
.anime-title h1{font-size:2.5rem;margin:0;color:#fff;line-height:1.2}
.alt-names{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.alt-name{background:var(--bg);padding:4px 8px;border-radius:4px;font-size:0.9rem;color:var(--muted)}
.rating-section{display:flex;flex-direction:column;gap:15px}
.site-rating{display:flex;align-items:center;gap:15px}
.rating-stars{display:flex;gap:2px}
.rating-star{color:var(--muted);cursor:pointer;transition:color 0.2s;font-size:1.2rem}
.rating-star.active,.rating-star.user-rated{color:#ffd700}
.rating-star:hover{color:#ffd700}
.rating-info{display:flex;flex-direction:column;gap:2px}
.average-rating{font-size:1.5rem;font-weight:700;color:#fff}
.vote-count{font-size:0.9rem;color:var(--muted)}
.external-ratings{display:flex;gap:15px;flex-wrap:wrap}
.rating-link{display:flex;align-items:center;gap:5px;padding:8px 12px;background:var(--bg);border-radius:6px;text-decoration:none;color:var(--fg);transition:all 0.3s}
.rating-link:hover{background:var(--primary);color:#000}
.rating-link.shikimori:hover{background:#ff6b6b;color:#fff}
.rating-link.mal:hover{background:#2e51a2;color:#fff}
.anime-lists select{width:200px;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--fg)}
.anime-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}
.meta-item{display:flex;flex-direction:column;gap:5px}
.meta-item .label{font-weight:600;color:var(--muted)}
.meta-item .value{color:var(--fg)}
.anime-description h3{margin:0 0 15px 0;color:var(--fg)}
.description-text{line-height:1.6;color:var(--muted)}
.player-section{margin-bottom:40px;padding:20px;background:var(--card);border-radius:12px;border:1px solid var(--border)}
.player-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:15px}
.player-header h2{margin:0;color:var(--fg)}
.player-controls{display:flex;gap:15px;flex-wrap:wrap}
.player-controls select{padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--fg)}
.episode-selector{margin-bottom:20px}
.episode-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:8px}
.episode-btn{padding:10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--fg);text-align:center;cursor:pointer;transition:all 0.3s}
.episode-btn:hover{background:var(--primary);color:#000}
.episode-btn.active{background:var(--primary);color:#000}
.video-container{position:relative;padding-top:56.25%;border-radius:8px;overflow:hidden;background:#000}
.kodik-player{position:absolute;top:0;left:0;width:100%;height:100%}
.kodik-player iframe{width:100%;height:100%;border:none}
.no-player{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--muted)}
.comments-section{padding:20px;background:var(--card);border-radius:12px;border:1px solid var(--border)}
.comments-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:15px}
.comments-header h2{margin:0;color:var(--fg)}
.comment-sort select{padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg);color:var(--fg)}
.comments-list{display:flex;flex-direction:column;gap:15px;margin-bottom:20px}
.comment{padding:15px;background:var(--bg);border-radius:8px;border:1px solid var(--border)}
.comment-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:10px}
.comment-author{font-weight:600;color:var(--fg)}
.comment-date{font-size:0.9rem;color:var(--muted)}
.comment-text{line-height:1.5;color:var(--fg);margin-bottom:10px}
.comment-votes{display:flex;align-items:center;gap:8px}
.vote-btn{background:none;border:1px solid var(--border);border-radius:4px;padding:4px 8px;cursor:pointer;color:var(--fg);transition:all 0.3s}
.vote-btn:hover{background:var(--primary);color:#000}
.vote-score{font-weight:600;min-width:20px;text-align:center}
.comment-form{display:flex;flex-direction:column;gap:15px}
.comment-form textarea{width:100%;padding:12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--fg);resize:vertical;min-height:100px}
.comment-form button{padding:12px 24px;border-radius:8px;border:none;background:var(--primary);color:#000;font-weight:600;cursor:pointer;align-self:flex-start}
.comment-form button:hover{opacity:0.9}
.login-prompt{text-align:center;padding:20px;background:var(--bg);border-radius:8px;border:1px solid var(--border)}
.login-prompt p{margin:0 0 15px 0;color:var(--muted)}
.btn{padding:10px 20px;border-radius:6px;background:var(--primary);color:#000;text-decoration:none;font-weight:600;display:inline-block}
.btn:hover{opacity:0.9}
.error-message{text-align:center;padding:40px;color:var(--muted)}
.error-message h1{color:var(--fg);margin-bottom:15px}

/* Profile Pages */
.profile-page{max-width:1000px;margin:0 auto;padding:20px}
.profile-header{display:flex;gap:30px;margin-bottom:40px;padding:30px;background:var(--card);border-radius:12px;border:1px solid var(--border)}
.profile-avatar{flex-shrink:0}
.avatar-placeholder{width:120px;height:120px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:3rem;color:var(--muted);border:3px solid var(--border)}
.profile-info{flex:1}
.profile-info h1{font-size:2.5rem;margin:0 0 10px 0;color:#fff}
.profile-email{color:var(--muted);margin:0 0 5px 0}
.profile-joined{color:var(--muted);margin:0 0 20px 0;font-size:0.9rem}
.social-links{display:flex;gap:15px;flex-wrap:wrap}
.social-link{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg);border-radius:6px;text-decoration:none;color:var(--fg);transition:all 0.3s}
.social-link:hover{background:var(--primary);color:#000}
.social-link.vk:hover{background:#4c75a3;color:#fff}
.social-link.telegram:hover{background:#0088cc;color:#fff}
.social-link.discord:hover{background:#7289da;color:#fff}
.profile-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;margin-bottom:40px}
.stat-card{text-align:center;padding:20px;background:var(--card);border-radius:12px;border:1px solid var(--border)}
.stat-number{font-size:2.5rem;font-weight:700;color:var(--primary);margin-bottom:5px}
.stat-label{color:var(--muted);font-size:0.9rem}
.profile-content{display:grid;grid-template-columns:2fr 1fr;gap:30px}
.profile-section{margin-bottom:30px}
.profile-section h2{color:var(--fg);margin-bottom:20px}
.comments-list{display:flex;flex-direction:column;gap:15px}
.comment-item{padding:15px;background:var(--bg);border-radius:8px;border:1px solid var(--border)}
.comment-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:10px}
.anime-link{color:var(--primary);text-decoration:none;font-weight:600}
.anime-link:hover{text-decoration:underline}
.comment-date{font-size:0.9rem;color:var(--muted)}
.comment-text{color:var(--fg);line-height:1.5}
.view-all-link{display:inline-block;margin-top:15px;color:var(--primary);text-decoration:none}
.view-all-link:hover{text-decoration:underline}
.empty-state{text-align:center;padding:40px;color:var(--muted)}
.empty-state i{font-size:3rem;margin-bottom:15px;display:block}
.empty-state h3{color:var(--fg);margin-bottom:10px}
.profile-actions{display:flex;flex-direction:column;gap:15px}
.action-btn{display:flex;align-items:center;gap:10px;padding:15px 20px;background:var(--card);border:1px solid var(--border);border-radius:8px;text-decoration:none;color:var(--fg);transition:all 0.3s}
.action-btn:hover{background:var(--primary);color:#000}
.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;flex-wrap:wrap;gap:20px}
.page-header h1{color:var(--fg);margin:0}
.list-filters{display:flex;gap:10px;flex-wrap:wrap}
.filter-btn{padding:8px 16px;background:var(--bg);border:1px solid var(--border);border-radius:6px;text-decoration:none;color:var(--fg);transition:all 0.3s}
.filter-btn:hover{background:var(--primary);color:#000}
.filter-btn.active{background:var(--primary);color:#000}
.anime-lists{margin-bottom:40px}
.anime-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.anime-card{background:var(--card);border-radius:12px;border:1px solid var(--border);overflow:hidden}
.anime-poster{position:relative}
.anime-poster img{width:100%;height:200px;object-fit:cover}
.anime-status-badge{position:absolute;top:10px;right:10px;padding:4px 8px;border-radius:4px;font-size:0.8rem;font-weight:600}
.anime-status-badge.watching{background:#4caf50;color:#fff}
.anime-status-badge.planned{background:#2196f3;color:#fff}
.anime-status-badge.completed{background:#9c27b0;color:#fff}
.anime-status-badge.on_hold{background:#ff9800;color:#fff}
.anime-status-badge.dropped{background:#f44336;color:#fff}
.anime-status-badge.favorites{background:#e91e63;color:#fff}
.anime-info{padding:15px}
.anime-title{margin:0 0 10px 0}
.anime-title a{color:var(--fg);text-decoration:none;font-size:1.1rem;font-weight:600}
.anime-title a:hover{color:var(--primary)}
.anime-meta{display:flex;flex-direction:column;gap:8px;margin-bottom:15px}
.anime-type,.anime-episodes{font-size:0.9rem;color:var(--muted)}
.user-rating{display:flex;align-items:center;gap:10px}
.rating-label{font-size:0.9rem;color:var(--muted)}
.rating-stars{display:flex;gap:2px}
.rating-stars .fa-star{color:var(--muted);font-size:0.8rem}
.rating-stars .fa-star.active{color:#ffd700}
.episodes-watched{font-size:0.9rem;color:var(--muted)}
.anime-actions{margin-top:15px}
.settings-form{max-width:600px}
.form-section{margin-bottom:40px;padding:20px;background:var(--card);border-radius:12px;border:1px solid var(--border)}
.form-section h2{color:var(--fg);margin:0 0 20px 0}
.form-description{color:var(--muted);margin-bottom:20px}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;color:var(--fg);font-weight:600}
.form-group input{width:100%;padding:12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--fg)}
.input-with-icon{position:relative}
.input-with-icon i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.input-with-icon input{padding-left:40px}
.shiki-connected{display:flex;align-items:center;gap:10px;padding:15px;background:var(--bg);border-radius:8px;color:var(--fg)}
.shiki-connected i{color:#4caf50}
.shiki-connect{padding:20px;background:var(--bg);border-radius:8px;text-align:center}
.shiki-connect p{margin:0 0 15px 0;color:var(--muted)}
.shiki-btn{background:#ff6b6b;color:#fff;border:none;border-radius:8px;padding:12px 24px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-weight:600;transition:all 0.3s}
.shiki-btn:hover{background:#ff5252;color:#fff}
.form-actions{display:flex;gap:15px;flex-wrap:wrap}
.btn-primary{background:var(--primary);color:#000;border:none;border-radius:8px;padding:12px 24px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all 0.3s}
.btn-primary:hover{opacity:0.9}
.btn-secondary{background:var(--bg);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:12px 24px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;font-weight:600;transition:all 0.3s}
.btn-secondary:hover{background:var(--primary);color:#000}
.alert{padding:15px;border-radius:8px;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.alert-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}
.alert-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}