/* ============================================
   KIRIAKTIKGAMES — ГЛАВНЫЙ СТИЛЬ
   ============================================ */

/* ДИЗАЙН-СИСТЕМА */
:root {
    --void: #03010a;
    --deep: #08041a;
    --mid: #100628;
    --panel: #170a35;
    --card: #1e0f45;
    --card-hi: #281659;
    
    --violet: #a855f7;
    --violet-hi: #c084fc;
    --violet-soft: #d8b4fe;
    --violet-deep: #7c3aed;
    --indigo: #6366f1;
    --fuchsia: #e879f9;
    --magenta: #f0abfc;
    --cyan: #22d3ee;
    --lime: #a3e635;
    --amber: #fbbf24;
    --rose: #fb7185;
    
    --text: #f5eeff;
    --text-dim: #b8a9e0;
    --text-faint: #7060a0;
    
    --line: rgba(168, 85, 247, 0.18);
    --line-strong: rgba(168, 85, 247, 0.4);
    
    --glow-violet: 0 0 20px rgba(168, 85, 247, 0.6);
    
    --font-display: 'Chakra Petch', sans-serif;
    --font-main: 'Manrope', sans-serif;
    --font-mono: 'Space Mono', monospace;
    
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    background: var(--void);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* ФОН */
.stars-1 {
    position: fixed; inset: 0; z-index: -5;
    background-image: 
        radial-gradient(1px 1px at 12% 22%, rgba(216, 180, 254, 0.9), transparent),
        radial-gradient(1px 1px at 47% 68%, #fff, transparent),
        radial-gradient(1px 1px at 73% 18%, rgba(168, 85, 247, 0.9), transparent),
        radial-gradient(1px 1px at 28% 92%, #fff, transparent),
        radial-gradient(1px 1px at 88% 55%, rgba(232, 121, 249, 0.8), transparent),
        radial-gradient(1px 1px at 5% 78%, #fff, transparent),
        radial-gradient(1px 1px at 62% 35%, rgba(192, 132, 252, 0.7), transparent);
    background-size: 300px 300px, 280px 280px, 320px 320px, 260px 260px, 340px 340px, 290px 290px, 310px 310px;
    animation: fly 80s linear infinite;
    opacity: 0.7;
}
@keyframes fly {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 300px 600px, -280px 600px, 320px 600px, -260px 600px, 340px 600px, -290px 600px, 310px 600px; }
}

.stars-2 {
    position: fixed; inset: 0; z-index: -4;
    background-image: 
        radial-gradient(2px 2px at 15% 45%, var(--violet-hi), transparent),
        radial-gradient(2px 2px at 82% 72%, var(--fuchsia), transparent),
        radial-gradient(2.5px 2.5px at 55% 25%, var(--violet-soft), transparent),
        radial-gradient(2px 2px at 30% 85%, var(--violet), transparent),
        radial-gradient(2px 2px at 68% 8%, var(--cyan), transparent);
    background-size: 500px 500px, 450px 450px, 550px 550px, 480px 480px, 520px 520px;
    animation: flyFast 120s linear infinite;
    opacity: 0.5;
}
@keyframes flyFast {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: -500px 1000px, 450px 1000px, -550px 1000px, 480px 1000px, -520px 1000px; }
}

.dust {
    position: fixed; inset: 0; z-index: -4;
    background-image: 
        radial-gradient(0.8px 0.8px at 25% 35%, rgba(216, 180, 254, 0.7), transparent),
        radial-gradient(0.8px 0.8px at 65% 15%, rgba(232, 121, 249, 0.6), transparent),
        radial-gradient(0.8px 0.8px at 45% 75%, rgba(168, 85, 247, 0.7), transparent),
        radial-gradient(0.8px 0.8px at 85% 45%, rgba(192, 132, 252, 0.5), transparent);
    background-size: 400px 400px, 380px 380px, 420px 420px, 360px 360px;
    animation: dustDrift 200s linear infinite;
    opacity: 0.6;
}
@keyframes dustDrift {
    from { background-position: 0 0, 0 0, 0 0, 0 0; }
    to { background-position: 400px 400px, -380px 400px, 420px 400px, -360px 400px; }
}

.comet {
    position: fixed; width: 180px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--violet-soft), #fff);
    border-radius: 2px;
    filter: drop-shadow(0 0 10px var(--violet-soft));
    opacity: 0; z-index: -3; pointer-events: none;
}
.comet::after {
    content: ''; position: absolute; right: -2px; top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 15px #fff, 0 0 30px var(--violet-soft);
}
.comet-1 { top: 15%; left: -10%; animation: cometFly 14s linear infinite; animation-delay: 2s; }
.comet-2 { top: 55%; left: -10%; animation: cometFly 20s linear infinite; animation-delay: 9s; }
.comet-3 { top: 80%; left: -10%; animation: cometFly 16s linear infinite; animation-delay: 16s; }
@keyframes cometFly {
    0% { transform: translate(0, 0) rotate(-15deg); opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translate(110vw, 40vh) rotate(-15deg); opacity: 0; }
}

.nebula-1 {
    position: fixed; top: -20%; left: -20%;
    width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.28) 0%, transparent 60%);
    filter: blur(100px); z-index: -3;
    animation: breathe 15s ease-in-out infinite, float1 30s ease-in-out infinite;
    pointer-events: none;
}
.nebula-2 {
    position: fixed; bottom: -20%; right: -20%;
    width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(232, 121, 249, 0.2) 0%, transparent 60%);
    filter: blur(100px); z-index: -3;
    animation: breathe 20s ease-in-out infinite reverse, float2 35s ease-in-out infinite;
    pointer-events: none;
}
.nebula-3 {
    position: fixed; top: 30%; right: 20%;
    width: 50%; height: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, transparent 60%);
    filter: blur(80px); z-index: -3;
    animation: breathe 12s ease-in-out infinite;
    pointer-events: none;
}
@keyframes breathe {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
}
@keyframes float1 {
    0%, 100% { top: -20%; left: -20%; }
    50% { top: -10%; left: -10%; }
}
@keyframes float2 {
    0%, 100% { bottom: -20%; right: -20%; }
    50% { bottom: -10%; right: -10%; }
}

.big-ring {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.06);
    pointer-events: none; z-index: -2;
}
.big-ring-1 { width: 900px; height: 900px; animation: ringRotate 120s linear infinite; }
.big-ring-2 { width: 1200px; height: 1200px; border-style: dashed; border-color: rgba(232, 121, 249, 0.05); animation: ringRotate 180s linear infinite reverse; }
@keyframes ringRotate {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.hud-grid {
    position: fixed; inset: 0; z-index: -2;
    background-image: 
        linear-gradient(rgba(168, 85, 247, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    pointer-events: none;
}

.pulse-dots {
    position: fixed; inset: 0; z-index: -2;
    background-image: radial-gradient(circle, rgba(168, 85, 247, 0.6) 1.5px, transparent 2px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
    animation: pulseDots 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes pulseDots {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}

.noise {
    position: fixed; inset: 0; z-index: 50;
    pointer-events: none; opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.vignette {
    position: fixed; inset: 0; z-index: 49;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(3, 1, 10, 0.85) 100%);
}

.scanlines {
    position: fixed; inset: 0; z-index: 51;
    pointer-events: none; opacity: 0.15;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px, transparent 2px,
        rgba(168, 85, 247, 0.08) 3px,
        transparent 4px
    );
    animation: scanMove 8s linear infinite;
}
@keyframes scanMove {
    from { background-position: 0 0; }
    to { background-position: 0 100px; }
}

/* КОНТЕЙНЕР */
.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
}

/* ============================================
   ШАПКА (NAVBAR)
   ============================================ */
.navbar {
    position: sticky; top: 0; z-index: 1000;
    background: rgba(8, 4, 26, 0.75);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid var(--line);
}
.navbar::after {
    content: ''; position: absolute; bottom: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 3s linear infinite;
    opacity: 0.8;
}
@keyframes borderFlow {
    from { background-position: 0% 0; }
    to { background-position: 200% 0; }
}
.nav-container {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 2rem; max-width: 1280px; margin: 0 auto; gap: 1.5rem;
}
.logo {
    font-family: var(--font-display);
    font-size: 1.3rem; font-weight: 700; letter-spacing: 1px;
    color: var(--text); text-decoration: none;
    display: flex; align-items: center; gap: 0.7rem;
}
.logo-mark {
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: white;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
    animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); }
    50% { box-shadow: 0 0 40px rgba(168, 85, 247, 0.9), 0 0 60px rgba(232, 121, 249, 0.4); }
}
.logo-text .accent { color: var(--violet-soft); text-shadow: 0 0 15px var(--violet); }

.nav-links { display: flex; gap: 0.3rem; align-items: center; }
.nav-links a {
    color: var(--text-dim); text-decoration: none;
    font-weight: 500; font-size: 0.85rem;
    transition: all 0.25s var(--ease);
    padding: 0.5rem 1rem; border-radius: 8px;
    position: relative; text-transform: uppercase;
    letter-spacing: 0.5px; font-family: var(--font-mono);
}
.nav-links a:hover {
    color: var(--violet-soft); background: rgba(168, 85, 247, 0.08);
    text-shadow: 0 0 10px var(--violet);
}
.nav-links a.active { color: var(--violet-soft); text-shadow: 0 0 10px var(--violet); }
.nav-links a.active::after {
    content: ''; position: absolute; bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 30px; height: 2px;
    background: var(--violet); border-radius: 2px;
    box-shadow: 0 0 15px var(--violet), 0 0 30px var(--violet);
    animation: barPulse 2s ease-in-out infinite;
}
@keyframes barPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.nav-actions { display: flex; gap: 0.6rem; align-items: center; }

/* ПОИСК */
.search { position: relative; display: flex; align-items: center; }
.search-input {
    width: 0; padding: 0;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    transition: all 0.4s var(--ease);
    opacity: 0; pointer-events: none;
}
.search.expanded .search-input {
    width: 220px; padding: 0.55rem 1rem;
    margin-right: 0.4rem; opacity: 1; pointer-events: auto;
    border-color: var(--violet);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
.search-input::placeholder { color: var(--text-faint); }
.search-input:focus {
    outline: none; border-color: var(--violet);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
}
.search-btn {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    color: var(--text-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s var(--ease);
    font-size: 0.9rem; flex-shrink: 0;
}
.search-btn:hover {
    color: var(--violet-soft); border-color: var(--violet);
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
.search-results {
    position: absolute; top: 100%; right: 0;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    width: 300px;
    margin-top: 0.5rem;
    display: none;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    overflow: hidden;
}
.search-results.active { display: block; }

/* КНОПКИ */
.btn {
    padding: 0.65rem 1.4rem;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-weight: 700; font-size: 0.75rem;
    cursor: pointer; transition: all 0.25s var(--ease);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.5rem;
    border: none; letter-spacing: 1px; text-transform: uppercase;
    position: relative; overflow: hidden;
}
.btn-ghost {
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line-strong);
    color: var(--text);
}
.btn-ghost:hover {
    border-color: var(--violet);
    background: rgba(168, 85, 247, 0.15);
    color: var(--violet-soft);
    box-shadow: var(--glow-violet);
}
.btn-solid {
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white;
    box-shadow: 0 4px 25px rgba(168, 85, 247, 0.5);
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
}
@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
.btn-solid:hover {
    box-shadow: 0 6px 40px rgba(168, 85, 247, 0.7), 0 0 60px rgba(232, 121, 249, 0.3);
    transform: translateY(-2px);
}
.btn-lg { padding: 1rem 2rem; font-size: 0.8rem; border-radius: 12px; }

/* УВЕДОМЛЕНИЯ */
.notifications-menu { position: relative; }
.notifications-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    color: var(--text-dim); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.25s var(--ease);
    font-size: 0.9rem; position: relative;
}
.notifications-icon:hover {
    color: var(--violet-soft); border-color: var(--violet);
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
.notifications-badge {
    position: absolute; top: -5px; right: -5px;
    background: var(--fuchsia); color: white;
    font-size: 0.65rem; font-weight: bold;
    min-width: 18px; height: 18px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    box-shadow: 0 0 10px var(--fuchsia);
}
.notifications-dropdown {
    position: absolute; top: 100%; right: 0;
    width: 320px;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    margin-top: 0.5rem;
    display: none;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    overflow: hidden;
}
.notifications-dropdown.active { display: block; }
.notification-item {
    padding: 1rem;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    transition: all 0.2s var(--ease);
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: rgba(168, 85, 247, 0.05); }
.notification-title { font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem; }
.notification-message { color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.3rem; }
.notification-time { color: var(--text-faint); font-size: 0.75rem; }

/* USER MINI (в шапке) */
.user-mini {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0.9rem 0.4rem 0.4rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 30px;
    text-decoration: none;
    color: var(--text);
    transition: all 0.3s var(--ease);
    font-size: 0.85rem;
}
.user-mini:hover {
    border-color: var(--violet);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
.user-mini-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem;
    color: white;
}

/* МОБИЛЬНОЕ МЕНЮ */
.mobile-menu-btn {
    display: none;
    position: fixed; top: 15px; right: 15px;
    z-index: 1002;
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    width: 45px; height: 45px;
    cursor: pointer;
    flex-direction: column;
    justify-content: center; align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.mobile-menu-btn span {
    display: block; width: 25px; height: 3px;
    background: var(--violet-soft);
    border-radius: 3px;
    transition: all 0.3s ease;
}
.mobile-menu-btn.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.mobile-menu-btn.active span:nth-child(2) { opacity: 0; }
.mobile-menu-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

.mobile-menu {
    position: fixed; top: 0; right: -100%;
    width: 85%; max-width: 350px;
    height: 100vh;
    background: var(--card);
    backdrop-filter: blur(20px);
    border-left: 1px solid var(--line-strong);
    padding: 80px 20px 30px;
    transition: right 0.3s ease;
    z-index: 1001;
    overflow-y: auto;
    box-shadow: -5px 0 30px rgba(0,0,0,0.5);
}
.mobile-menu.active { right: 0; }
.mobile-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 15px;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    font-size: 1.1rem;
    transition: all 0.2s ease;
}
.mobile-menu a:hover {
    background: rgba(168, 85, 247, 0.08);
    color: var(--violet-soft);
    padding-left: 25px;
}
.mobile-menu a:last-child { border-bottom: none; }

.mobile-overlay {
    display: none;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(3px);
    z-index: 1000;
}
.mobile-overlay.active { display: block; }

/* ============================================
   ФУТЕР
   ============================================ */
.footer {
    border-top: 1px solid var(--line);
    padding: 3rem 0 2rem;
    background: rgba(3, 1, 10, 0.6);
    position: relative;
    margin-top: 3rem;
}
.footer::before {
    content: ''; position: absolute; top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
    opacity: 0.6;
}
.footer-wrap {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}
.footer-brand p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 1rem 0 1.2rem;
    max-width: 320px;
}
.footer-col h4 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px var(--violet);
}
.footer-col a {
    display: block;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 0.875rem;
    padding: 0.35rem 0;
    transition: all 0.25s var(--ease);
}
.footer-col a:hover {
    color: var(--violet-soft);
    padding-left: 0.5rem;
    text-shadow: 0 0 10px var(--violet);
}
.footer-social { display: flex; gap: 0.5rem; }
.footer-social a {
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
    transition: all 0.3s var(--ease);
    text-decoration: none; font-size: 0.9rem;
}
.footer-social a:hover {
    color: var(--violet-soft);
    border-color: var(--violet);
    background: rgba(168, 85, 247, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
}
.footer-bottom {
    padding-top: 2rem;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ============================================
   МОДАЛЬНОЕ ОКНО
   ============================================ */
.modal {
    display: none;
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 2000;
    justify-content: center; align-items: center;
}
.modal.active { display: flex; }
.modal-content {
    background: var(--card);
    padding: 2rem;
    border-radius: 24px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid var(--line-strong);
    position: relative;
}
.close-modal {
    position: absolute; top: 1rem; right: 1rem;
    font-size: 1.5rem; cursor: pointer;
    color: var(--text-dim);
    transition: all 0.3s var(--ease);
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}
.close-modal:hover {
    color: var(--violet-soft);
    background: rgba(168, 85, 247, 0.1);
    transform: rotate(90deg);
}

/* ============================================
   ОБЩИЕ ЭЛЕМЕНТЫ (page-header, кикеры, breadcrumbs)
   ============================================ */
.page-header { padding: 3rem 0 2rem; position: relative; animation: fadeUp 0.8s var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.breadcrumbs {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.breadcrumbs a { color: var(--text-faint); text-decoration: none; transition: all 0.3s var(--ease); }
.breadcrumbs a:hover { color: var(--violet-soft); text-shadow: 0 0 10px var(--violet); }
.breadcrumbs .sep { color: var(--violet); }
.breadcrumbs .current { color: var(--violet-soft); }

.page-kicker {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    padding: 0.4rem 0.9rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    position: relative; overflow: hidden;
}
.page-kicker::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.3), transparent);
    animation: shimmer 3s linear infinite;
}
@keyframes shimmer { to { left: 100%; } }
.page-kicker-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 10px var(--violet), 0 0 20px var(--violet);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.3; transform: scale(0.7); } }

.page-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 700; line-height: 1.05;
    letter-spacing: -0.02em; color: var(--text);
    text-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
    margin-bottom: 1rem;
}
.page-title .em { color: var(--violet-soft); font-style: italic; text-shadow: 0 0 20px var(--violet), 0 0 40px rgba(168, 85, 247, 0.6); }
.page-subtitle { font-size: 1rem; color: var(--text-dim); max-width: 620px; line-height: 1.7; }

/* Общая секция */
.section-head {
    margin-bottom: 3rem;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
    animation: fadeUp 0.8s var(--ease-out) both;
}
.section-head-left { max-width: 600px; }
.section-kicker {
    font-family: var(--font-mono); font-size: 0.7rem;
    color: var(--violet-soft); letter-spacing: 3px;
    text-transform: uppercase; margin-bottom: 0.8rem;
    display: flex; align-items: center; gap: 0.6rem;
}
.section-kicker::before { content: ''; width: 24px; height: 1px; background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700; line-height: 1.1;
    letter-spacing: -0.02em; color: var(--text);
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
}
.section-title .em { color: var(--violet-soft); font-style: italic; text-shadow: 0 0 20px var(--violet), 0 0 40px rgba(168, 85, 247, 0.5); }
.section-desc { color: var(--text-dim); font-size: 0.95rem; margin-top: 0.8rem; max-width: 480px; }
.section-head-link {
    color: var(--violet-soft); text-decoration: none;
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 1.5px; text-transform: uppercase;
    display: inline-flex; align-items: center; gap: 0.5rem;
    transition: all 0.3s var(--ease);
    padding-bottom: 0.5rem; border-bottom: 1px solid transparent;
    text-shadow: 0 0 10px var(--violet);
}
.section-head-link:hover { gap: 0.9rem; border-bottom-color: var(--violet); }

/* АЛЕРТЫ */
.alert-message {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 1rem 1.5rem;
    border-radius: 16px;
    margin-top: 1.5rem; margin-bottom: 1rem;
    font-size: 0.9rem;
    animation: fadeUp 0.5s var(--ease-out);
}
.alert-message.success {
    background: rgba(163, 230, 53, 0.08);
    border: 1px solid rgba(163, 230, 53, 0.4);
    color: var(--lime);
}
.alert-message.error {
    background: rgba(251, 113, 133, 0.08);
    border: 1px solid rgba(251, 113, 133, 0.4);
    color: var(--rose);
}
.alert-message i { font-size: 1.2rem; }

/* ССЫЛКИ И CTA-БЛОК */
.cta-block { padding: 2rem 0 5rem; }
.cta-wrap {
    background: radial-gradient(circle at 20% 20%, rgba(168, 85, 247, 0.15), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(232, 121, 249, 0.1), transparent 50%),
                linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 28px;
    padding: 3rem;
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: 1.3fr 1fr;
    gap: 3rem; align-items: center;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 80px rgba(168, 85, 247, 0.15), inset 0 0 80px rgba(168, 85, 247, 0.05);
}
.cta-wrap::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: 28px; padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    background-size: 300% 300%;
    animation: gradientFlow 8s linear infinite;
    opacity: 0.7;
}
@keyframes gradientFlow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
.cta-left, .cta-right { position: relative; z-index: 1; }
.cta-left h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700; line-height: 1.15;
    margin-bottom: 1rem; letter-spacing: -0.02em;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
}
.cta-left h2 .em { color: var(--violet-soft); font-style: italic; text-shadow: 0 0 20px var(--violet), 0 0 40px rgba(168, 85, 247, 0.6); }
.cta-left p { color: var(--text-dim); font-size: 1rem; line-height: 1.7; margin-bottom: 1.8rem; max-width: 480px; }
.cta-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.cta-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.cta-stat {
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.2rem;
    transition: all 0.3s var(--ease);
}
.cta-stat:hover { border-color: var(--violet); background: rgba(40, 22, 89, 0.6); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(168, 85, 247, 0.2); }
.cta-stat-val {
    font-family: var(--font-display);
    font-size: 1.8rem; font-weight: 700;
    color: var(--violet-soft); line-height: 1;
    margin-bottom: 0.4rem;
    text-shadow: 0 0 20px var(--violet);
}
.cta-stat-label {
    font-family: var(--font-mono);
    font-size: 0.65rem; color: var(--text-faint);
    text-transform: uppercase; letter-spacing: 1.5px;
}

/* ============================================
   HERO (главная)
   ============================================ */
.hero { padding: 5rem 0 4rem; position: relative; }
.hero-wrap { display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: start; }
.hero-left { position: relative; animation: fadeUp 0.8s var(--ease-out) both; padding-top: 1rem; }

.kicker {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-mono); font-size: 0.7rem;
    color: var(--violet-soft); text-transform: uppercase;
    letter-spacing: 2px; margin-bottom: 1.5rem;
    padding: 0.5rem 1rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15), inset 0 0 20px rgba(168, 85, 247, 0.05);
    position: relative; overflow: hidden;
}
.kicker::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.3), transparent);
    animation: shimmer 3s linear infinite;
}
.kicker-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 12px var(--violet), 0 0 24px var(--violet);
    animation: pulse 2s ease-in-out infinite;
}

.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5vw, 4.5rem);
    font-weight: 700; line-height: 1.05;
    letter-spacing: -0.02em; margin-bottom: 1.5rem;
    color: var(--text);
    text-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
}
.hero h1 .wave {
    display: inline-block; color: var(--violet-soft);
    position: relative; font-style: italic;
    text-shadow: 0 0 20px var(--violet), 0 0 40px rgba(168, 85, 247, 0.6);
}
.hero h1 .wave::after {
    content: ''; position: absolute; bottom: -10px; left: 0; right: 0;
    height: 8px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><path d='M0,4 Q25,1 50,4 T100,4 T150,4 T200,4' stroke='%23a855f7' stroke-width='2' fill='none'/></svg>") no-repeat;
    background-size: 100% 100%;
    filter: drop-shadow(0 0 8px var(--violet));
    animation: waveFlow 3s ease-in-out infinite;
}
@keyframes waveFlow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

.hero-sub {
    font-size: 1.1rem; color: var(--text-dim);
    margin-bottom: 2.5rem; max-width: 520px;
    line-height: 1.7;
    border-left: 2px solid var(--violet);
    padding-left: 1.2rem;
}
.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 2rem; }
.hero-meta {
    display: flex; gap: 2rem; flex-wrap: wrap;
    font-size: 0.75rem; color: var(--text-faint);
    font-family: var(--font-mono);
    text-transform: uppercase; letter-spacing: 1px;
}
.hero-meta-item { display: flex; align-items: center; gap: 0.5rem; transition: all 0.3s var(--ease); }
.hero-meta-item:hover { color: var(--violet-soft); }
.hero-meta-item i { color: var(--violet); text-shadow: 0 0 10px var(--violet); }

.hero-right { position: relative; animation: fadeUp 0.8s 0.2s var(--ease-out) both; }
.orbit {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none; z-index: -1;
}
.orbit-1 { width: 550px; height: 550px; border: 1px solid rgba(168, 85, 247, 0.1); animation: spin 60s linear infinite; }
.orbit-1::before {
    content: ''; position: absolute; top: -4px; left: 50%;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 15px var(--violet), 0 0 30px var(--violet);
}
.orbit-2 { width: 450px; height: 450px; border: 1px dashed rgba(232, 121, 249, 0.15); animation: spin 40s linear infinite reverse; }
.orbit-2::after {
    content: ''; position: absolute; bottom: -3px; left: 50%;
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--fuchsia);
    box-shadow: 0 0 15px var(--fuchsia), 0 0 30px var(--fuchsia);
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Карточка проекта на главной */
.project-card-hero {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    padding: 1.8rem;
    position: relative; overflow: hidden;
    transition: all 0.4s var(--ease);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 60px rgba(168, 85, 247, 0.15), inset 0 0 60px rgba(168, 85, 247, 0.05);
}
.project-card-hero::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: 24px; padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    background-size: 300% 300%;
    animation: gradientFlow 6s linear infinite;
    opacity: 0.6;
}
.project-card-hero:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 80px rgba(168, 85, 247, 0.3), 0 0 120px rgba(232, 121, 249, 0.15), inset 0 0 60px rgba(168, 85, 247, 0.08);
}
.project-cover-hero {
    width: 100%; height: 160px;
    border-radius: 16px;
    background: radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.4), transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(232, 121, 249, 0.3), transparent 50%),
                linear-gradient(135deg, #2a1245, #1a0b33);
    margin-bottom: 1.5rem;
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 3.5rem;
    border: 1px solid rgba(168, 85, 247, 0.2);
}
.project-cover-hero::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(216, 180, 254, 0.8) 1px, transparent 1.5px),
                      radial-gradient(circle, rgba(232, 121, 249, 0.6) 1px, transparent 1.5px);
    background-size: 40px 40px, 60px 60px;
    background-position: 0 0, 30px 30px;
    animation: dotFlow 20s linear infinite;
    opacity: 0.6;
    z-index: 0;
}
@keyframes dotFlow { from { background-position: 0 0, 30px 30px; } to { background-position: 40px 40px, 70px 70px; } }
.project-cover-emoji { filter: drop-shadow(0 0 20px var(--violet)); z-index: 2; animation: emojiFloat 3s ease-in-out infinite; }
@keyframes emojiFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.05); } }
.project-cover-tag {
    position: absolute; top: 0.9rem; left: 0.9rem;
    padding: 0.3rem 0.8rem;
    background: rgba(3, 1, 10, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--violet);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.65rem; color: var(--violet-soft);
    letter-spacing: 1.5px; text-transform: uppercase;
    z-index: 2;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}
.project-info-hero h3 {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 700;
    margin-bottom: 0.4rem; color: var(--text);
    letter-spacing: 0.5px;
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}
.project-desc-hero { color: var(--text-dim); font-size: 0.875rem; margin-bottom: 1.5rem; line-height: 1.5; }
.progress-wrap { margin-bottom: 0.5rem; }
.progress-info {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 0.7rem;
    color: var(--text-faint); margin-bottom: 0.6rem;
    letter-spacing: 1px; text-transform: uppercase;
}
.progress-info .val { color: var(--violet-soft); font-weight: 700; text-shadow: 0 0 10px var(--violet); }
.progress-bar {
    height: 5px; background: rgba(168, 85, 247, 0.1);
    border-radius: 3px; overflow: hidden; position: relative;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--violet-deep), var(--violet), var(--fuchsia));
    border-radius: 3px;
    position: relative;
    box-shadow: 0 0 15px var(--violet), 0 0 30px rgba(168, 85, 247, 0.5);
    animation: progressPulse 2s ease-in-out infinite;
}
@keyframes progressPulse { 0%, 100% { box-shadow: 0 0 15px var(--violet), 0 0 30px rgba(168, 85, 247, 0.5); } 50% { box-shadow: 0 0 25px var(--violet), 0 0 50px rgba(168, 85, 247, 0.8); } }

.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin-top: 1rem; position: relative; z-index: 2; }
.mini-stat {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.75), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.9rem 0.5rem;
    text-align: center;
    position: relative; overflow: hidden;
    transition: all 0.35s var(--ease);
    backdrop-filter: blur(15px);
}
.mini-stat:hover { transform: translateY(-4px); border-color: var(--violet); box-shadow: 0 10px 30px rgba(168, 85, 247, 0.25); }
.mini-stat-icon { font-size: 0.8rem; color: var(--violet); margin-bottom: 0.35rem; text-shadow: 0 0 10px var(--violet); display: block; transition: all 0.3s var(--ease); }
.mini-stat:hover .mini-stat-icon { color: var(--violet-soft); text-shadow: 0 0 15px var(--violet), 0 0 25px var(--violet); transform: scale(1.2); }
.mini-stat-value {
    font-family: var(--font-display);
    font-size: 1.3rem; font-weight: 700; line-height: 1;
    margin-bottom: 0.3rem; letter-spacing: 0.5px;
    background: linear-gradient(135deg, #fff, var(--violet-soft));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: valuePulse 3s ease-in-out infinite;
}
@keyframes valuePulse { 0%, 100% { filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.5)); } 50% { filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.9)); } }
.mini-stat-label { font-family: var(--font-mono); font-size: 0.55rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 1px; transition: all 0.3s var(--ease); }
.mini-stat:hover .mini-stat-label { color: var(--violet-soft); }

/* ЛЕНТА СОБЫТИЙ */
.live-bar {
    padding: 1rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(8, 4, 26, 0.6);
    overflow: hidden; position: relative;
    backdrop-filter: blur(10px);
    margin-top: 3rem;
}
.live-bar::before, .live-bar::after {
    content: ''; position: absolute; top: 0; bottom: 0;
    width: 100px; z-index: 2; pointer-events: none;
}
.live-bar::before { left: 0; background: linear-gradient(90deg, var(--void), transparent); }
.live-bar::after { right: 0; background: linear-gradient(270deg, var(--void), transparent); }
.live-track { display: flex; gap: 1.5rem; animation: marquee 50s linear infinite; white-space: nowrap; width: max-content; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.live-item {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-mono); font-size: 0.75rem;
    color: var(--text-dim);
    padding: 0.4rem 1rem;
    background: rgba(168, 85, 247, 0.05);
    border: 1px solid var(--line);
    border-radius: 20px;
    flex-shrink: 0;
    transition: all 0.3s var(--ease);
}
.live-item:hover { background: rgba(168, 85, 247, 0.12); border-color: var(--violet); box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); }
.live-item i { color: var(--violet-soft); font-size: 0.7rem; text-shadow: 0 0 10px var(--violet); }
.live-item .time { color: var(--text-faint); font-size: 0.65rem; }

/* EXPLORE */
.explore { padding: 4rem 0 5rem; }
.explore-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.2rem; }
.explore-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 2rem;
    position: relative; overflow: hidden;
    transition: all 0.4s var(--ease);
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    min-height: 280px;
    backdrop-filter: blur(20px);
    animation: fadeUp 0.8s var(--ease-out) both;
}
.explore-card.big { grid-row: span 2; min-height: 580px; padding: 2.5rem; }
.explore-card::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 24px; padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    background-size: 300% 300%;
    animation: gradientFlow 4s linear infinite;
}
.explore-card:hover::before { opacity: 1; }
.explore-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.25), 0 0 100px rgba(168, 85, 247, 0.1);
}
.explore-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
    border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    color: var(--violet-soft); font-size: 1.3rem;
    margin-bottom: 1.5rem;
    transition: all 0.4s var(--ease);
}
.explore-card:hover .explore-icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(232, 121, 249, 0.2));
    border-color: var(--violet);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5), 0 0 60px rgba(168, 85, 247, 0.3);
    color: white; transform: scale(1.08);
}
.explore-card.big .explore-icon { width: 72px; height: 72px; font-size: 1.8rem; }
.explore-card h3 {
    font-family: var(--font-display);
    font-size: 1.4rem; font-weight: 700;
    margin-bottom: 0.7rem; color: var(--text);
    letter-spacing: 0.3px;
    transition: all 0.3s var(--ease);
}
.explore-card:hover h3 { color: var(--violet-soft); text-shadow: 0 0 20px var(--violet); }
.explore-card.big h3 { font-size: 2rem; margin-bottom: 1rem; }
.explore-card p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.6; margin-bottom: 1.5rem; flex-grow: 1; }
.explore-card.big p { font-size: 1rem; max-width: 90%; }
.explore-link {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--violet-soft);
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 1.5px; text-transform: uppercase;
    margin-top: auto;
    transition: all 0.3s var(--ease);
    text-shadow: 0 0 10px var(--violet);
}
.explore-card:hover .explore-link { gap: 0.9rem; }
.explore-card.big .corner-tag {
    position: absolute; top: 2rem; right: 2rem;
    padding: 0.35rem 0.9rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid var(--violet);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.65rem; color: var(--violet-soft);
    letter-spacing: 1.5px; text-transform: uppercase;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}

/* ============================================
   АДАПТИВ (общий)
   ============================================ */
@media (max-width: 1024px) {
    .hero-wrap { grid-template-columns: 1fr; gap: 3rem; }
    .explore-grid { grid-template-columns: 1fr 1fr; }
    .explore-card.big { grid-column: span 2; grid-row: auto; min-height: 320px; }
    .cta-wrap { grid-template-columns: 1fr; padding: 2.5rem; }
    .orbit-1, .orbit-2 { display: none; }
    .footer-wrap { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .nav-links a { font-size: 0.75rem; padding: 0.4rem 0.7rem; }
    .search.expanded .search-input { width: 150px; }
}
@media (max-width: 768px) {
    .container { padding: 0 1.2rem; }
    .nav-links, .nav-actions .search, .nav-actions .btn { display: none; }
    .nav-container { padding: 0.8rem 1.2rem; }
    .mobile-menu-btn { display: flex; }
    .hero { padding: 2rem 0 3rem; }
    .hero h1 { font-size: 2.2rem; }
    .hero-cta { flex-direction: column; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .mini-stats { grid-template-columns: repeat(2, 1fr); }
    .explore { padding: 3rem 0; }
    .explore-grid { grid-template-columns: 1fr; }
    .explore-card.big { grid-column: auto; }
    .cta-wrap { padding: 1.8rem; }
    .cta-left h2 { font-size: 1.5rem; }
    .cta-actions .btn { width: 100%; justify-content: center; }
    .footer-wrap { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .page-header { padding: 2rem 0 1.5rem; }
    .page-title { font-size: 1.8rem; }
    .section-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .hero h1 { font-size: 1.8rem; }
    .page-title { font-size: 1.5rem; }
    .search { display: none; }
    .mini-stat-value { font-size: 1rem; }
}


/* ============================================================
   СТРАНИЦА: ПРОЕКТЫ (projects.php)
   ============================================================ */

/* Фильтры */
.filters {
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 2.5rem;
    animation: fadeUp 0.8s 0.1s var(--ease-out) both;
    background: rgba(8, 4, 26, 0.4);
    backdrop-filter: blur(10px);
}
.type-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.type-tab {
    padding: 0.65rem 1.4rem;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; transition: all 0.3s var(--ease);
    display: inline-flex; align-items: center; gap: 0.6rem;
}
.type-tab .count {
    padding: 0.1rem 0.5rem;
    background: rgba(168, 85, 247, 0.2);
    border-radius: 10px;
    font-size: 0.65rem;
    color: var(--violet-soft);
}
.type-tab:hover { color: var(--violet-soft); border-color: var(--violet); background: rgba(168, 85, 247, 0.12); }
.type-tab.active {
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white; border-color: transparent;
    box-shadow: 0 4px 25px rgba(168, 85, 247, 0.5);
}
.type-tab.active .count { background: rgba(255, 255, 255, 0.2); color: white; }

.filter-row { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }
.filter-select {
    padding: 0.55rem 2.2rem 0.55rem 1rem;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.75rem; cursor: pointer;
    transition: all 0.3s var(--ease);
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23a855f7' stroke-width='1.5' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    letter-spacing: 0.5px;
}
.filter-select:hover, .filter-select:focus {
    border-color: var(--violet);
    background-color: rgba(40, 22, 89, 0.6);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
    outline: none;
}
.filter-select option { background: var(--panel); color: var(--text); }

.filter-search { flex: 1; min-width: 200px; position: relative; }
.filter-search input {
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 2.5rem;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    transition: all 0.3s var(--ease);
}
.filter-search input::placeholder { color: var(--text-faint); }
.filter-search input:focus {
    outline: none; border-color: var(--violet);
    background: rgba(8, 4, 26, 0.8);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.3);
}
.filter-search i {
    position: absolute; left: 1rem; top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint); font-size: 0.85rem;
    pointer-events: none;
}

.active-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; align-items: center; }
.filter-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.8rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid var(--violet);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 0.5px;
}
.filter-chip button {
    background: none; border: none;
    color: var(--violet-soft);
    cursor: pointer; font-size: 0.9rem;
    line-height: 1; padding: 0;
    transition: all 0.3s var(--ease);
}
.filter-chip button:hover { color: var(--fuchsia); transform: scale(1.3); }

/* Сетка проектов */
.projects-section { padding-bottom: 4rem; animation: fadeUp 0.8s 0.2s var(--ease-out) both; }
.results-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.results-count {
    font-family: var(--font-mono); font-size: 0.75rem;
    color: var(--text-dim); letter-spacing: 1px;
    text-transform: uppercase;
}
.results-count .num { color: var(--violet-soft); font-weight: 700; text-shadow: 0 0 10px var(--violet); }

.projects-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1.2rem; }

.project-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden; position: relative;
    transition: all 0.4s var(--ease);
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    backdrop-filter: blur(20px);
}
.project-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.25), 0 0 100px rgba(168, 85, 247, 0.1);
}
.project-card::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 20px; padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    background-size: 300% 300%;
    animation: gradientFlow 4s linear infinite;
    pointer-events: none;
}
.project-card:hover::before { opacity: 1; }
.project-card.featured { grid-row: span 2; }

.project-cover {
    position: relative; width: 100%;
    aspect-ratio: 16 / 9;
    background: radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.4), transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(232, 121, 249, 0.3), transparent 50%),
                linear-gradient(135deg, #2a1245, #1a0b33);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
    border-bottom: 1px solid var(--line);
}
.project-card.featured .project-cover { aspect-ratio: 16/10; font-size: 5rem; }

.project-cover::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(216, 180, 254, 0.8) 1px, transparent 1.5px),
                      radial-gradient(circle, rgba(232, 121, 249, 0.6) 1px, transparent 1.5px);
    background-size: 40px 40px, 60px 60px;
    background-position: 0 0, 30px 30px;
    animation: dotFlow 20s linear infinite;
    opacity: 0.5;
}
.project-cover-emoji { filter: drop-shadow(0 0 20px var(--violet)); position: relative; z-index: 2; animation: emojiFloat 3s ease-in-out infinite; }

.cover-badges {
    position: absolute; top: 0.9rem; left: 0.9rem;
    display: flex; flex-direction: column; gap: 0.4rem;
    z-index: 3;
}
.badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    background: rgba(3, 1, 10, 0.85);
    backdrop-filter: blur(8px);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: fit-content;
}
.badge-type-game { border: 1px solid var(--violet); color: var(--violet-soft); box-shadow: 0 0 12px rgba(168, 85, 247, 0.4); }
.badge-status-released { border: 1px solid var(--lime); color: var(--lime); box-shadow: 0 0 12px rgba(163, 230, 53, 0.4); }
.badge-status-early { border: 1px solid var(--violet-hi); color: var(--violet-hi); }
.badge-status-dev { border: 1px solid var(--amber); color: var(--amber); box-shadow: 0 0 12px rgba(251, 191, 36, 0.4); }
.badge-status-proto { border: 1px solid var(--text-dim); color: var(--text-dim); }
.badge-hot { border: 1px solid var(--fuchsia); color: var(--fuchsia); box-shadow: 0 0 12px rgba(232, 121, 249, 0.5); animation: tagPulse 2s ease-in-out infinite; }
@keyframes tagPulse { 0%, 100% { box-shadow: 0 0 12px rgba(232, 121, 249, 0.5); } 50% { box-shadow: 0 0 20px rgba(232, 121, 249, 0.9), 0 0 30px rgba(232, 121, 249, 0.4); } }

.cover-download {
    position: absolute; top: 0.9rem; right: 0.9rem;
    width: 40px; height: 40px;
    border-radius: 12px;
    background: rgba(3, 1, 10, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--violet);
    color: var(--violet-soft);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    z-index: 3;
    font-size: 0.9rem;
}
.cover-download:hover {
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white;
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.7);
    transform: scale(1.1);
}

.project-content { padding: 1.3rem; display: flex; flex-direction: column; flex-grow: 1; }
.project-card.featured .project-content { padding: 1.8rem; }

.project-title {
    font-family: var(--font-display);
    font-size: 1.15rem; font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
    letter-spacing: 0.3px;
    transition: all 0.3s var(--ease);
}
.project-card:hover .project-title { color: var(--violet-soft); text-shadow: 0 0 20px var(--violet); }
.project-card.featured .project-title { font-size: 1.6rem; }

.project-desc { color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; margin-bottom: 1rem; flex-grow: 1; }
.project-card.featured .project-desc { font-size: 0.95rem; line-height: 1.6; }

.project-progress { margin-bottom: 1rem; }
.project-progress-info {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: 0.65rem;
    color: var(--text-faint); margin-bottom: 0.4rem;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.project-progress-info .val { color: var(--violet-soft); font-weight: 700; }
.project-progress-bar { height: 4px; background: rgba(168, 85, 247, 0.1); border-radius: 2px; overflow: hidden; }
.project-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--violet-deep), var(--violet), var(--fuchsia));
    border-radius: 2px;
    box-shadow: 0 0 10px var(--violet);
    position: relative;
}

.project-tech { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 1rem; }
.tech-tag {
    padding: 0.15rem 0.5rem;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-dim);
    letter-spacing: 0.3px;
}

.project-meta {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    margin-top: auto;
}
.meta-item {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-family: var(--font-mono); font-size: 0.65rem;
    color: var(--text-faint); letter-spacing: 0.5px;
}
.meta-item i { color: var(--violet); font-size: 0.7rem; text-shadow: 0 0 8px var(--violet); }

/* Пустое состояние */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.5), rgba(23, 10, 53, 0.7));
    border: 1px dashed var(--line-strong);
    border-radius: 20px;
}
.empty-state i, .empty-state-icon {
    font-size: 3rem; color: var(--violet);
    margin-bottom: 1rem;
    text-shadow: 0 0 30px var(--violet);
    opacity: 0.6; display: block;
}
.empty-state h3, .empty-state h4 {
    font-family: var(--font-display);
    font-size: 1.3rem; color: var(--text);
    margin-bottom: 0.5rem;
}
.empty-state p { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1.5rem; }

/* ============================================================
   СТРАНИЦА: БЛОГ (blog.php)
   ============================================================ */

.filters-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.category-tabs { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.category-tab {
    padding: 0.55rem 1.1rem;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; transition: all 0.3s var(--ease);
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.category-tab .count {
    padding: 0.1rem 0.5rem;
    background: rgba(168, 85, 247, 0.2);
    border-radius: 10px;
    font-size: 0.6rem;
    color: var(--violet-soft);
}
.category-tab:hover { color: var(--violet-soft); border-color: var(--violet); background: rgba(168, 85, 247, 0.12); }
.category-tab.active {
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white; border-color: transparent;
    box-shadow: 0 4px 25px rgba(168, 85, 247, 0.5);
}
.category-tab.active .count { background: rgba(255, 255, 255, 0.2); color: white; }

.search-inline { position: relative; min-width: 260px; }
.search-inline input {
    width: 100%;
    padding: 0.55rem 1rem 0.55rem 2.5rem;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    transition: all 0.3s var(--ease);
}
.search-inline input::placeholder { color: var(--text-faint); }
.search-inline input:focus {
    outline: none; border-color: var(--violet);
    background: rgba(8, 4, 26, 0.8);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.3);
}
.search-inline i {
    position: absolute; left: 1rem; top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint); font-size: 0.85rem;
    pointer-events: none;
}

/* Основная сетка блога */
.main-grid-section { padding-bottom: 2rem; }
.main-grid { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; padding-bottom: 4rem; animation: fadeUp 0.8s 0.2s var(--ease-out) both; }
.posts-column { display: flex; flex-direction: column; gap: 1.5rem; }

/* Featured пост */
.featured-post {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden; position: relative;
    transition: all 0.4s var(--ease);
    text-decoration: none; color: inherit;
    display: grid; grid-template-columns: 1fr 1fr;
    backdrop-filter: blur(20px);
    min-height: 320px;
}
.featured-post::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 24px; padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    background-size: 300% 300%;
    animation: gradientFlow 4s linear infinite;
    pointer-events: none; z-index: 10;
}
.featured-post:hover::before { opacity: 1; }
.featured-post:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.25), 0 0 100px rgba(168, 85, 247, 0.1);
}
.featured-cover {
    position: relative;
    background: radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.4), transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(232, 121, 249, 0.3), transparent 50%),
                linear-gradient(135deg, #2a1245, #1a0b33);
    display: flex; align-items: center; justify-content: center;
    font-size: 5rem; overflow: hidden;
}
.featured-cover::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(216, 180, 254, 0.8) 1px, transparent 1.5px),
                      radial-gradient(circle, rgba(232, 121, 249, 0.6) 1px, transparent 1.5px);
    background-size: 40px 40px, 60px 60px;
    animation: dotFlow 20s linear infinite;
    opacity: 0.5;
}
.featured-cover-emoji { filter: drop-shadow(0 0 30px var(--violet)); position: relative; z-index: 2; animation: emojiFloat 3s ease-in-out infinite; }
.featured-badge {
    position: absolute; top: 1rem; left: 1rem;
    padding: 0.35rem 0.9rem;
    background: rgba(3, 1, 10, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid var(--fuchsia);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.65rem; color: var(--fuchsia);
    letter-spacing: 1.5px; text-transform: uppercase;
    z-index: 3;
    box-shadow: 0 0 20px rgba(232, 121, 249, 0.5);
}
.featured-content { padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.featured-meta { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; flex-wrap: wrap; }

.category-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 1px; text-transform: uppercase;
    border: 1px solid;
}
.category-badge.devlog { color: var(--violet-soft); border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.1); }
.category-badge.gamedesign { color: var(--lime); border-color: rgba(163, 230, 53, 0.4); background: rgba(163, 230, 53, 0.08); }
.category-badge.tech { color: var(--cyan); border-color: rgba(34, 211, 238, 0.4); background: rgba(34, 211, 238, 0.08); }
.category-badge.life { color: var(--fuchsia); border-color: rgba(232, 121, 249, 0.4); background: rgba(232, 121, 249, 0.1); }

.read-time {
    font-family: var(--font-mono); font-size: 0.7rem;
    color: var(--text-faint); letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 0.3rem;
}
.read-time i { font-size: 0.7rem; }

.featured-title {
    font-family: var(--font-display);
    font-size: 1.6rem; font-weight: 700;
    line-height: 1.2; color: var(--text);
    margin-bottom: 1rem; letter-spacing: -0.01em;
    transition: all 0.3s var(--ease);
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}
.featured-post:hover .featured-title { color: var(--violet-soft); text-shadow: 0 0 30px var(--violet); }
.featured-excerpt { color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.5rem; }

.featured-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.author { display: flex; align-items: center; gap: 0.6rem; }
.author-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    display: flex; align-items: center; justify-content: center;
    color: white; font-family: var(--font-display);
    font-weight: 700; font-size: 0.8rem;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}
.author-info { display: flex; flex-direction: column; }
.author-name { font-size: 0.8rem; color: var(--text); font-weight: 600; }
.author-date { font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-faint); letter-spacing: 0.5px; }
.post-metrics { display: flex; gap: 1rem; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint); }
.metric { display: flex; align-items: center; gap: 0.3rem; }
.metric i { font-size: 0.7rem; color: var(--violet); text-shadow: 0 0 8px var(--violet); }

/* Сетка обычных постов */
.posts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.post-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden; position: relative;
    transition: all 0.4s var(--ease);
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column;
    backdrop-filter: blur(20px);
}
.post-card::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 20px; padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    background-size: 300% 300%;
    animation: gradientFlow 4s linear infinite;
    pointer-events: none; z-index: 10;
}
.post-card:hover::before { opacity: 1; }
.post-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.25), 0 0 100px rgba(168, 85, 247, 0.1);
}

.post-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    background: radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.3), transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(232, 121, 249, 0.2), transparent 50%),
                linear-gradient(135deg, #2a1245, #1a0b33);
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.post-cover::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(216, 180, 254, 0.6) 1px, transparent 1.5px),
                      radial-gradient(circle, rgba(232, 121, 249, 0.5) 1px, transparent 1.5px);
    background-size: 40px 40px, 60px 60px;
    animation: dotFlow 20s linear infinite;
    opacity: 0.5;
}
.post-cover-emoji { filter: drop-shadow(0 0 20px var(--violet)); position: relative; z-index: 2; animation: emojiFloat 3s ease-in-out infinite; }

.post-content { padding: 1.2rem; display: flex; flex-direction: column; flex-grow: 1; }
.post-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.post-title {
    font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 700;
    line-height: 1.3; color: var(--text);
    margin-bottom: 0.6rem; letter-spacing: 0.2px;
    transition: all 0.3s var(--ease);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.post-card:hover .post-title { color: var(--violet-soft); text-shadow: 0 0 15px var(--violet); }
.post-excerpt {
    color: var(--text-dim); font-size: 0.85rem; line-height: 1.5;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}
.post-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    margin-top: auto;
}
.author-small { display: flex; align-items: center; gap: 0.5rem; }
.author-avatar-small {
    width: 24px; height: 24px; border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    display: flex; align-items: center; justify-content: center;
    color: white; font-family: var(--font-display);
    font-weight: 700; font-size: 0.65rem;
}
.author-name-small { font-size: 0.75rem; color: var(--text-dim); }
.metrics-small { display: flex; gap: 0.7rem; font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-faint); }
.metrics-small .metric i { font-size: 0.65rem; }

/* Сайдбар */
.sidebar { display: flex; flex-direction: column; gap: 1.2rem; position: sticky; top: 90px; height: fit-content; }
.sidebar-block {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.5rem;
    backdrop-filter: blur(20px);
}
.sidebar-title {
    font-family: var(--font-mono); font-size: 0.7rem;
    color: var(--violet-soft); letter-spacing: 2px;
    text-transform: uppercase; margin-bottom: 1.2rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.sidebar-title::before {
    content: ''; width: 3px; height: 12px;
    background: var(--violet); box-shadow: 0 0 10px var(--violet);
    border-radius: 2px;
}

.fresh-posts { display: flex; flex-direction: column; gap: 0.8rem; }
.fresh-post {
    display: flex; gap: 0.8rem;
    padding: 0.7rem;
    background: rgba(8, 4, 26, 0.4);
    border: 1px solid var(--line);
    border-radius: 12px;
    text-decoration: none; color: inherit;
    transition: all 0.3s var(--ease);
    align-items: center;
}
.fresh-post:hover { border-color: var(--violet); background: rgba(40, 22, 89, 0.5); transform: translateX(4px); }
.fresh-post-cover {
    width: 48px; height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--violet-deep), var(--card));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; flex-shrink: 0;
    border: 1px solid var(--line-strong);
}
.fresh-post-info { flex: 1; min-width: 0; }
.fresh-post-title {
    font-family: var(--font-display);
    font-size: 0.85rem; font-weight: 600;
    color: var(--text); line-height: 1.3;
    margin-bottom: 0.3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 0.3s var(--ease);
}
.fresh-post:hover .fresh-post-title { color: var(--violet-soft); }
.fresh-post-date { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-faint); letter-spacing: 0.5px; }

.tags-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-chip {
    padding: 0.3rem 0.7rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 20px;
    font-family: var(--font-mono); font-size: 0.65rem;
    color: var(--text-dim); text-decoration: none;
    transition: all 0.3s var(--ease);
    letter-spacing: 0.5px;
}
.tag-chip:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: var(--violet);
    color: var(--violet-soft);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}

.subscribe-block {
    background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.15), transparent 70%),
                linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
}
.subscribe-text { color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; margin-bottom: 1rem; }
.subscribe-buttons { display: flex; flex-direction: column; gap: 0.5rem; }
.subscribe-btn {
    padding: 0.7rem 1rem;
    border-radius: 10px;
    text-decoration: none;
    font-family: var(--font-mono); font-size: 0.7rem;
    font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase;
    display: flex; align-items: center; gap: 0.6rem;
    transition: all 0.3s var(--ease);
    border: 1px solid;
    justify-content: flex-start;
}
.subscribe-btn.telegram { color: var(--cyan); border-color: rgba(34, 211, 238, 0.4); background: rgba(34, 211, 238, 0.05); }
.subscribe-btn.telegram:hover { background: rgba(34, 211, 238, 0.15); box-shadow: 0 0 25px rgba(34, 211, 238, 0.3); }
.subscribe-btn.discord { color: var(--violet-soft); border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.05); }
.subscribe-btn.discord:hover { background: rgba(168, 85, 247, 0.15); box-shadow: 0 0 25px rgba(168, 85, 247, 0.3); }
.subscribe-btn.rss { color: var(--amber); border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.05); }
.subscribe-btn.rss:hover { background: rgba(251, 191, 36, 0.15); box-shadow: 0 0 25px rgba(251, 191, 36, 0.3); }

/* ============================================================
   СТРАНИЦА: ОТДЕЛЬНЫЙ ПОСТ (post.php)
   ============================================================ */

.post-section { padding-bottom: 4rem; }
.post-layout { display: grid; grid-template-columns: 1fr 320px; gap: 2.5rem; animation: fadeUp 0.8s var(--ease-out) both; }
.post-main { min-width: 0; }

.post-hero {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}
.post-hero::before {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(216, 180, 254, 0.4) 1px, transparent 1.5px);
    background-size: 40px 40px;
    opacity: 0.4;
    pointer-events: none;
}
.post-hero::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
}
.post-hero-badge {
    display: inline-flex; align-items: center;
    padding: 0.35rem 0.9rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}
.post-hero-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--text);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 40px rgba(168, 85, 247, 0.4);
    position: relative;
    z-index: 1;
}
.post-hero-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 1;
}
.post-author { display: flex; align-items: center; gap: 0.8rem; }
.post-author-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.1rem;
    color: white;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}
.post-author-name {
    font-family: var(--font-display);
    font-size: 0.95rem; font-weight: 600;
    color: var(--text);
}
.post-author-role {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 1px;
}
.post-hero-stats {
    display: flex; gap: 1.2rem; flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}
.post-hero-stats i { color: var(--violet); margin-right: 0.3rem; text-shadow: 0 0 8px var(--violet); }

.post-body {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.5), rgba(23, 10, 53, 0.7));
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 2.5rem;
    color: var(--text-dim);
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    position: relative;
    backdrop-filter: blur(10px);
}
.post-body::first-letter {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 700;
    float: left;
    line-height: 0.9;
    margin: 0.1rem 0.6rem 0 0;
    color: var(--violet-soft);
    text-shadow: 0 0 20px var(--violet);
}

.post-footer-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 3rem;
}
.post-share {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.post-share a {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
    transition: all 0.3s var(--ease);
    text-decoration: none; font-size: 0.9rem;
}
.post-share a:hover {
    color: var(--violet-soft);
    border-color: var(--violet);
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}

/* Комментарии */
.comments-section { scroll-margin-top: 100px; }
.comments-header {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}
.comments-header h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    display: flex; align-items: center; gap: 0.8rem;
}
.comments-count {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    padding: 0.2rem 0.7rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 20px;
    color: var(--violet-soft);
    font-weight: 500;
}

.comment-form-wrap {
    display: flex; gap: 1rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(20px);
}
.comment-form-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.1rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}
.comment-form { flex: 1; min-width: 0; }
.comment-form textarea {
    width: 100%;
    padding: 1rem;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 0.95rem;
    resize: vertical;
    min-height: 80px;
    transition: all 0.3s var(--ease);
    margin-bottom: 1rem;
}
.comment-form textarea:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.3);
}
.comment-form textarea::placeholder { color: var(--text-faint); }
.comment-form-actions {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.comment-form-hint {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    display: flex; align-items: center; gap: 0.4rem;
    letter-spacing: 0.5px;
}
.comment-form-hint i { color: var(--violet); }

.comment-login-prompt {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.5rem 2rem;
    text-align: center;
    margin-bottom: 2rem;
    display: flex; align-items: center; justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.comment-login-prompt i {
    font-size: 1.3rem;
    color: var(--violet);
    text-shadow: 0 0 15px var(--violet);
}
.comment-login-prompt p {
    color: var(--text-dim);
    font-size: 0.95rem;
}
.comment-login-prompt a {
    color: var(--violet-soft);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: all 0.3s var(--ease);
    text-shadow: 0 0 10px var(--violet);
}
.comment-login-prompt a:hover { border-bottom-color: var(--violet-soft); }

.comments-list { display: flex; flex-direction: column; gap: 1.2rem; }
.comment {
    display: flex; gap: 1rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.5), rgba(23, 10, 53, 0.7));
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 1.3rem;
    transition: all 0.3s var(--ease);
    backdrop-filter: blur(10px);
}
.comment:hover { border-color: var(--line-strong); }
.comment-avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}
.comment-avatar.small {
    width: 32px; height: 32px;
    font-size: 0.85rem;
}
.comment-body { flex: 1; min-width: 0; }
.comment-head {
    display: flex; align-items: center; gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}
.comment-author {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
}
.comment-role {
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.comment-role.admin {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.4);
    color: var(--amber);
}
.comment-role.team {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: var(--violet-soft);
}
.comment-date {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    margin-left: auto;
}
.comment-text {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.6rem;
}
.comment-reply-btn {
    background: none;
    border: none;
    color: var(--violet-soft);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 0.3rem 0;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.3s var(--ease);
    text-shadow: 0 0 10px var(--violet);
}
.comment-reply-btn:hover { color: var(--fuchsia); text-shadow: 0 0 15px var(--fuchsia); }

.comment-reply-form {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.comment-reply-form textarea {
    width: 100%;
    padding: 0.8rem;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 0.9rem;
    resize: vertical;
    min-height: 60px;
    margin-bottom: 0.8rem;
    transition: all 0.3s var(--ease);
}
.comment-reply-form textarea:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.comment-replies {
    margin-top: 1rem;
    padding-left: 1rem;
    border-left: 2px solid var(--line);
    display: flex; flex-direction: column; gap: 0.8rem;
}
.comment-reply {
    background: rgba(8, 4, 26, 0.4);
    border-radius: 14px;
    padding: 1rem;
    border-color: var(--line);
}

.comments-empty {
    text-align: center;
    padding: 3rem 2rem;
    background: rgba(8, 4, 26, 0.4);
    border: 1px dashed var(--line-strong);
    border-radius: 18px;
}
.comments-empty i {
    font-size: 2rem;
    color: var(--violet);
    margin-bottom: 0.8rem;
    display: block;
    opacity: 0.5;
    text-shadow: 0 0 20px var(--violet);
}
.comments-empty p { color: var(--text-dim); font-size: 0.9rem; }

.post-sidebar {
    display: flex; flex-direction: column; gap: 1.2rem;
    position: sticky; top: 90px;
    height: fit-content;
}
.author-card {
    display: flex; align-items: center; gap: 1rem;
}
.author-card-avatar {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700; font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
}
.author-card-name {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.2rem;
}
.author-card-role {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 1px;
}
.sidebar-link {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.9rem;
    color: var(--text-dim);
    text-decoration: none;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    transition: all 0.3s var(--ease);
    border: 1px solid transparent;
}
.sidebar-link:hover {
    background: rgba(168, 85, 247, 0.08);
    border-color: var(--line);
    color: var(--violet-soft);
    padding-left: 1.2rem;
}
.sidebar-link i { color: var(--violet); text-shadow: 0 0 10px var(--violet); }

/* ============================================================
   СТРАНИЦА: ПРОФИЛЬ (profile.php)
   ============================================================ */

.profile-page { padding-top: 1rem; padding-bottom: 4rem; }

.profile-header {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.85), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 28px;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(20px);
    animation: fadeUp 0.8s var(--ease-out) both;
}
.profile-header::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
}
.profile-header::after {
    content: ''; position: absolute;
    top: -50%; right: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15), transparent 70%);
    pointer-events: none;
    filter: blur(60px);
}

.header-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    margin-bottom: 1.5rem;
    position: relative; z-index: 1;
}
.welcome-tag {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.35rem 0.9rem;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 1.5px; text-transform: uppercase;
}
.welcome-tag .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 10px var(--lime);
    animation: pulse 2s ease-in-out infinite;
}

.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.action-btn {
    padding: 0.5rem 1rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.7rem; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
    cursor: pointer; transition: all 0.3s var(--ease);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 0.5rem;
}
.action-btn:hover {
    color: var(--violet-soft);
    border-color: var(--violet);
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
.action-btn.danger:hover {
    color: var(--rose);
    border-color: var(--rose);
    background: rgba(251, 113, 133, 0.1);
    box-shadow: 0 0 20px rgba(251, 113, 133, 0.3);
}

.header-body {
    display: grid; grid-template-columns: auto 1fr;
    gap: 2rem; align-items: center;
    position: relative; z-index: 1;
}

/* Аватар профиля */
.avatar-wrapper {
    position: relative;
    width: 140px; height: 140px;
    flex-shrink: 0;
}
.avatar {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: var(--void);
    border: 3px solid var(--violet);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative; z-index: 2;
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.5), inset 0 0 30px rgba(168, 85, 247, 0.15);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-letter {
    font-family: var(--font-display);
    font-size: 3.5rem; font-weight: 700;
    background: linear-gradient(135deg, var(--violet-soft), var(--fuchsia));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.avatar-wrapper::before, .avatar-wrapper::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none;
}
.avatar-wrapper::before {
    width: 165px; height: 165px;
    border: 1px dashed rgba(168, 85, 247, 0.3);
    animation: spin 30s linear infinite;
}
.avatar-wrapper::after {
    width: 185px; height: 185px;
    border: 1px solid rgba(232, 121, 249, 0.2);
    animation: spin 45s linear infinite reverse;
}
.avatar-orbit-dot {
    position: absolute; top: 50%; left: 50%;
    width: 165px; height: 165px;
    margin: -82.5px 0 0 -82.5px;
    border-radius: 50%;
    animation: spin 30s linear infinite;
    pointer-events: none;
}
.avatar-orbit-dot::before {
    content: ''; position: absolute;
    top: -4px; left: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fuchsia);
    box-shadow: 0 0 15px var(--fuchsia), 0 0 30px var(--fuchsia);
}

/* Инфо профиля */
.user-info { min-width: 0; }
.user-greeting {
    font-family: var(--font-mono);
    font-size: 0.8rem; color: var(--text-dim);
    letter-spacing: 1px; text-transform: uppercase;
    margin-bottom: 0.3rem;
}
.username {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    background: linear-gradient(135deg, #fff, var(--violet-soft));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.6rem;
    letter-spacing: -0.5px; line-height: 1.1;
}
.user-role {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 1.5px; text-transform: uppercase;
    margin-bottom: 0.8rem;
}
.user-role.founder { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); color: var(--amber); box-shadow: 0 0 20px rgba(251, 191, 36, 0.2); }
.user-role.team { background: rgba(232, 121, 249, 0.1); border: 1px solid rgba(232, 121, 249, 0.4); color: var(--fuchsia); }
.user-role.candidate { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.4); color: var(--amber); }
.user-role.player { background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.4); color: var(--cyan); }
.user-role i { display: none; }

.user-bio {
    color: var(--text-dim);
    font-size: 0.95rem;
    margin-bottom: 1rem;
    font-style: italic;
    padding-left: 1rem;
    border-left: 2px solid var(--line-strong);
    line-height: 1.6;
}
.user-contacts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.contact-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
    transition: all 0.3s var(--ease);
    text-decoration: none;
    font-size: 0.9rem;
}
.contact-btn:hover {
    color: var(--violet-soft);
    border-color: var(--violet);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}

/* XP */
.xp-block {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    position: relative; z-index: 1;
}
.xp-header {
    display: flex; justify-content: space-between;
    margin-bottom: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 1px;
    flex-wrap: wrap; gap: 0.5rem;
}
.xp-level {
    color: var(--violet-soft);
    font-weight: 700;
    display: flex; align-items: center; gap: 0.5rem;
}
.xp-count { color: var(--text-dim); }
.xp-bar {
    height: 8px;
    background: var(--void);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--line);
}
.xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--violet-deep), var(--violet), var(--fuchsia));
    border-radius: 4px;
    position: relative;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
    transition: width 0.5s ease;
}
.xp-fill::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shine 2s linear infinite;
}
@keyframes shine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.xp-hint {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    text-align: right;
    margin-top: 0.4rem;
    letter-spacing: 0.5px;
}

/* Стат-карточки */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.8s 0.1s var(--ease-out) both;
}
.stat-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.2rem 1rem;
    text-align: center;
    transition: all 0.3s var(--ease);
    position: relative; overflow: hidden;
}
.stat-card::before {
    content: ''; position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--violet), transparent);
    transition: width 0.4s var(--ease);
}
.stat-card:hover::before { width: 80%; box-shadow: 0 0 15px var(--violet); }
.stat-card:hover {
    border-color: var(--violet);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.15);
}
.stat-icon {
    font-size: 1.1rem; color: var(--violet-soft);
    margin-bottom: 0.5rem; display: block;
    text-shadow: 0 0 15px var(--violet);
    transition: all 0.3s var(--ease);
}
.stat-card:hover .stat-icon { transform: scale(1.15); text-shadow: 0 0 25px var(--violet), 0 0 40px var(--violet); }
.stat-value {
    font-family: var(--font-display);
    font-size: 1.6rem; font-weight: 700;
    background: linear-gradient(135deg, #fff, var(--violet-soft));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 0.3rem;
}
.stat-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    letter-spacing: 1.5px; text-transform: uppercase;
}

/* Табы */
.tabs {
    display: flex; gap: 0.4rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
    animation: fadeUp 0.8s 0.2s var(--ease-out) both;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: 0.65rem 1.3rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-dim);
    font-family: var(--font-main);
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s var(--ease);
    white-space: nowrap;
    display: flex; align-items: center; gap: 0.5rem;
}
.tab i { font-size: 0.85rem; }
.tab:hover { color: var(--text); background: var(--card); }
.tab.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.15));
    color: var(--violet-soft);
    border-color: var(--line-strong);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

.tab-content { display: none; animation: fadeIn 0.4s var(--ease-out); }
.tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.section-box {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1.2rem;
    backdrop-filter: blur(20px);
}
.section-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--violet-soft);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    display: flex; align-items: center; gap: 0.6rem;
    font-weight: 700;
}
.section-title::before {
    content: ''; width: 3px; height: 14px;
    background: var(--violet);
    box-shadow: 0 0 10px var(--violet);
    border-radius: 2px;
}

/* Быстрые действия */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}
.quick-action {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.2rem 1rem;
    text-decoration: none; color: inherit;
    text-align: center;
    transition: all 0.3s var(--ease);
    display: flex; flex-direction: column;
    align-items: center; gap: 0.5rem;
}
.quick-action:hover {
    transform: translateY(-4px);
    border-color: var(--violet);
    box-shadow: 0 15px 40px rgba(168, 85, 247, 0.2);
}
.quick-action-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--violet-soft);
    font-size: 1.1rem;
    transition: all 0.3s var(--ease);
}
.quick-action:hover .quick-action-icon {
    background: rgba(168, 85, 247, 0.25);
    border-color: var(--violet);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
    color: white;
    transform: scale(1.1);
}
.quick-action-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-dim);
    letter-spacing: 1px; text-transform: uppercase;
}
.quick-action:hover .quick-action-label { color: var(--violet-soft); }

/* Роли */
.roles-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.role-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 0.5px;
    transition: all 0.3s var(--ease);
    text-decoration: none;
}
.role-badge:hover {
    background: rgba(168, 85, 247, 0.2);
    border-color: var(--violet);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}

/* Активность */
.activity-list { display: flex; flex-direction: column; gap: 0.6rem; }
.activity-item {
    display: flex; gap: 1rem;
    padding: 0.9rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: all 0.3s var(--ease);
    align-items: center;
}
.activity-item:hover {
    border-color: var(--violet);
    background: rgba(40, 22, 89, 0.4);
    transform: translateX(4px);
}
.activity-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--violet-soft);
    font-size: 0.85rem;
    flex-shrink: 0;
    text-shadow: 0 0 10px var(--violet);
}
.activity-body { flex: 1; min-width: 0; }
.activity-text { color: var(--text); font-size: 0.85rem; margin-bottom: 0.2rem; }
.activity-time {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}

/* Достижения */
.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.8rem;
}
.achievement {
    background: var(--void);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem 0.8rem;
    text-align: center;
    transition: all 0.3s var(--ease);
    position: relative; overflow: hidden;
}
.achievement.unlocked {
    border-color: rgba(163, 230, 53, 0.3);
    background: linear-gradient(160deg, rgba(163, 230, 53, 0.05), rgba(8, 4, 26, 0.8));
}
.achievement.unlocked::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--lime);
    box-shadow: 0 0 15px var(--lime);
}
.achievement.locked { opacity: 0.45; filter: grayscale(1); }
.achievement:hover { transform: translateY(-3px); }
.achievement.unlocked:hover {
    border-color: var(--lime);
    box-shadow: 0 0 30px rgba(163, 230, 53, 0.2);
}
.achievement-icon {
    font-size: 1.8rem; margin-bottom: 0.5rem;
    display: block; line-height: 1;
    filter: drop-shadow(0 0 10px currentColor);
}
.achievement-name {
    font-size: 0.8rem; font-weight: 700;
    color: var(--text); margin-bottom: 0.2rem;
    line-height: 1.3;
    font-family: var(--font-display);
}
.achievement-desc {
    font-size: 0.65rem;
    color: var(--text-faint);
    font-family: var(--font-mono);
    line-height: 1.3; margin-bottom: 0.4rem;
}
.achievement-reward {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--violet-soft);
    letter-spacing: 0.5px;
}
.achievement.unlocked .achievement-reward {
    background: rgba(163, 230, 53, 0.1);
    color: var(--lime);
}

.progress-box {
    display: flex; align-items: center; gap: 1.5rem;
    padding: 1.2rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-top: 1.2rem;
    flex-wrap: wrap;
}
.progress-circle {
    width: 70px; height: 70px;
    position: relative; flex-shrink: 0;
}
.progress-circle svg {
    transform: rotate(-90deg);
    width: 100%; height: 100%;
}
.progress-circle circle {
    fill: none;
    stroke-width: 6;
}
.progress-circle .bg { stroke: rgba(168, 85, 247, 0.15); }
.progress-circle .fill {
    stroke: var(--violet);
    stroke-linecap: round;
    stroke-dasharray: 188.5;
    transition: stroke-dashoffset 0.5s ease;
    filter: drop-shadow(0 0 5px var(--violet));
}
.progress-circle .value {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: 0.9rem; font-weight: 700;
    color: var(--violet-soft);
    text-shadow: 0 0 10px var(--violet);
}
.progress-info { flex: 1; min-width: 150px; }
.progress-info-title {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 700;
    color: var(--text); margin-bottom: 0.3rem;
}
.progress-info-text { color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; }

/* ============================================
   НАСТРОЙКИ ПРОФИЛЯ — ГРУППЫ И КАРТОЧКИ
   ============================================ */

.settings-group {
    margin-bottom: 1.5rem;
    animation: fadeUp 0.5s var(--ease-out) both;
}

.settings-group:nth-child(1) { animation-delay: 0.05s; }
.settings-group:nth-child(2) { animation-delay: 0.1s; }
.settings-group:nth-child(3) { animation-delay: 0.15s; }
.settings-group:nth-child(4) { animation-delay: 0.2s; }

.settings-group-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 20px 20px 0 0;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}

.settings-group-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
}

.settings-group-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: all 0.3s var(--ease);
}

.settings-group:hover .settings-group-icon {
    transform: scale(1.05) rotate(-5deg);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
}

.settings-group-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
    margin-bottom: 0.2rem;
}

.settings-group-desc {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}

.settings-group-body {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.5), rgba(23, 10, 53, 0.7));
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 20px 20px;
    padding: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    backdrop-filter: blur(10px);
}

/* ============================================
   КАРТОЧКИ НАСТРОЕК
   ============================================ */

.setting-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: all 0.35s var(--ease);
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.setting-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
    transition: left 0.5s var(--ease);
    pointer-events: none;
}

.setting-card:hover::before {
    left: 100%;
}

.setting-card:hover {
    border-color: var(--violet);
    background: rgba(40, 22, 89, 0.6);
    transform: translateX(4px);
    box-shadow: 0 6px 25px rgba(168, 85, 247, 0.2);
}

.setting-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-soft);
    font-size: 1rem;
    flex-shrink: 0;
    transition: all 0.35s var(--ease);
}

.setting-card:hover .setting-card-icon {
    background: rgba(168, 85, 247, 0.25);
    border-color: var(--violet);
    color: white;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    transform: scale(1.08) rotate(-5deg);
}

.setting-card-text {
    flex: 1;
    min-width: 0;
}

.setting-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.2rem;
    transition: all 0.3s var(--ease);
}

.setting-card:hover .setting-card-title {
    color: var(--violet-soft);
}

.setting-card-desc {
    font-size: 0.75rem;
    color: var(--text-faint);
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
    line-height: 1.4;
}

.setting-card-arrow {
    color: var(--text-faint);
    font-size: 0.85rem;
    transition: all 0.35s var(--ease);
    flex-shrink: 0;
}

.setting-card:hover .setting-card-arrow {
    color: var(--violet-soft);
    transform: translateX(4px);
}

/* Заблокированные */
.setting-card.disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.setting-card.disabled:hover {
    border-color: var(--line);
    background: rgba(8, 4, 26, 0.5);
    transform: none;
    box-shadow: none;
}

.setting-card.disabled:hover .setting-card-icon {
    background: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.2);
    color: var(--violet-soft);
    box-shadow: none;
    transform: none;
}

.setting-card.disabled:hover .setting-card-title {
    color: var(--text);
}

.setting-card-soon {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    padding: 0.25rem 0.6rem;
    background: rgba(232, 121, 249, 0.15);
    border: 1px solid rgba(232, 121, 249, 0.4);
    border-radius: 20px;
    color: var(--fuchsia);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    animation: tagPulse 2s ease-in-out infinite;
}

/* Форма-обёртка */
.setting-card-form {
    cursor: default;
}

.setting-card-form:hover {
    transform: none;
}

.setting-card-form button.setting-toggle {
    cursor: pointer;
    border: none;
    padding: 0;
}

/* Опасная зона */
.danger-group .settings-group-header::before {
    background: linear-gradient(90deg, transparent, var(--rose), var(--fuchsia), var(--rose), transparent);
}

.danger-group .settings-group-icon {
    background: linear-gradient(135deg, rgba(251, 113, 133, 0.15), rgba(251, 113, 133, 0.1));
    border-color: rgba(251, 113, 133, 0.4);
}

.setting-card-danger {
    border-color: rgba(251, 113, 133, 0.2);
}

.setting-card-danger:hover {
    border-color: var(--rose);
    background: rgba(251, 113, 133, 0.08);
    box-shadow: 0 6px 25px rgba(251, 113, 133, 0.2);
}

.setting-card-danger:hover .setting-card-icon {
    background: rgba(251, 113, 133, 0.2);
    border-color: var(--rose);
    color: var(--rose);
    box-shadow: 0 0 20px rgba(251, 113, 133, 0.5);
}

.setting-card-danger .setting-card-icon.danger {
    background: rgba(251, 113, 133, 0.08);
    border-color: rgba(251, 113, 133, 0.3);
    color: var(--rose);
}

.setting-card-danger .setting-card-title.danger {
    color: var(--rose);
}

.setting-card-danger .setting-card-arrow.danger {
    color: var(--rose);
}

.setting-card-danger:hover .setting-card-arrow.danger {
    color: var(--rose);
    transform: translateX(6px);
}

/* Адаптив */
@media (max-width: 768px) {
    .settings-group-header {
        padding: 1rem 1.2rem;
    }
    .settings-group-icon {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }
    .settings-group-title {
        font-size: 1rem;
    }
    .setting-card {
        padding: 0.9rem 1rem;
    }
    .setting-card-icon {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }
    .setting-card-title {
        font-size: 0.9rem;
    }
    .setting-card-desc {
        font-size: 0.7rem;
    }
}

/* ============================================================
   АДАПТИВ ДЛЯ ВСЕХ СТРАНИЦ (общий)
   ============================================================ */
@media (max-width: 1024px) {
    .main-grid, .post-layout { grid-template-columns: 1fr; gap: 2rem; }
    .sidebar, .post-sidebar { position: static; }
    .featured-post { grid-template-columns: 1fr; }
    .featured-cover { aspect-ratio: 16/9; font-size: 3.5rem; }
    .posts-grid { grid-template-columns: 1fr 1fr; }
    .projects-grid { grid-template-columns: 1fr 1fr; }
    .project-card.featured { grid-column: span 2; grid-row: auto; }
    .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    /* Блог */
    .filters-row { flex-direction: column; align-items: stretch; }
    .category-tabs { overflow-x: auto; padding-bottom: 0.3rem; scrollbar-width: none; }
    .category-tabs::-webkit-scrollbar { display: none; }
    .category-tab { flex-shrink: 0; font-size: 0.65rem; padding: 0.5rem 0.9rem; }
    .search-inline { min-width: 100%; }
    .featured-content { padding: 1.5rem; }
    .featured-title { font-size: 1.3rem; }
    .featured-excerpt { font-size: 0.85rem; }
    .featured-footer { flex-direction: column; align-items: flex-start; }
    .posts-grid { grid-template-columns: 1fr; gap: 1rem; }

    /* Пост */
    .post-hero { padding: 1.5rem; }
    .post-hero-title { font-size: 1.5rem; }
    .post-hero-meta { flex-direction: column; align-items: flex-start; }
    .post-body { padding: 1.5rem; font-size: 1rem; }
    .post-body::first-letter { font-size: 2.5rem; }
    .comment-form-wrap { flex-direction: column; }
    .comment-form-actions { flex-direction: column; align-items: stretch; }
    .comment-form-actions .btn { width: 100%; justify-content: center; }
    .comment { padding: 1rem; }
    .comment-head { flex-wrap: wrap; }
    .comment-date { margin-left: 0; }
    .comment-replies { padding-left: 0.5rem; }
    .comment-reply-form .comment-form-actions { flex-direction: row; }
    .comment-reply-form .comment-form-actions .btn { width: auto; }

    /* Проекты */
    .type-tabs { overflow-x: auto; padding-bottom: 0.5rem; scrollbar-width: none; }
    .type-tabs::-webkit-scrollbar { display: none; }
    .type-tab { flex-shrink: 0; padding: 0.55rem 1rem; font-size: 0.7rem; }
    .filter-row { gap: 0.5rem; }
    .filter-select { flex: 1; min-width: 0; font-size: 0.7rem; padding: 0.5rem 2rem 0.5rem 0.8rem; }
    .filter-search { min-width: 100%; flex-basis: 100%; }
    .projects-grid { grid-template-columns: 1fr; gap: 1rem; }
    .project-card.featured { grid-column: auto; }
    .project-card.featured .project-title { font-size: 1.3rem; }
    .project-card.featured .project-cover { font-size: 3rem; }

    /* Профиль */
    .profile-header { padding: 1.5rem; }
    .header-body { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
    .avatar-wrapper { margin: 0 auto; }
    .user-bio { text-align: left; }
    .user-contacts { justify-content: center; }
    .stats-row { grid-template-columns: repeat(2, 1fr); }
    .stat-value { font-size: 1.3rem; }
    .tab { padding: 0.55rem 0.9rem; font-size: 0.8rem; }
    .tab i { display: none; }
    .quick-actions { grid-template-columns: repeat(2, 1fr); }
    .achievements-grid { grid-template-columns: repeat(2, 1fr); }
    .header-actions { width: 100%; justify-content: center; }
    .action-btn { flex: 1; justify-content: center; }
}

@media (max-width: 480px) {
    .page-title { font-size: 1.5rem; }
    .project-title { font-size: 1rem; }
    .project-desc { font-size: 0.8rem; }
    .cta-stat-val { font-size: 1.4rem; }
    .username { font-size: 1.5rem; }
    .avatar-wrapper { width: 110px; height: 110px; }
    .avatar-wrapper::before { width: 130px; height: 130px; }
    .avatar-wrapper::after { width: 150px; height: 150px; }
    .avatar-orbit-dot { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
    .avatar-letter { font-size: 2.8rem; }
    .stats-row { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .stat-card { padding: 1rem 0.6rem; }
    .stat-value { font-size: 1.2rem; }
    .section-box { padding: 1.2rem; }
    .setting-item { padding: 0.9rem 1rem; }
    .setting-icon { width: 38px; height: 38px; font-size: 0.85rem; }
}

/* Отключение анимаций для пользователей с ограничениями */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   СТРАНИЦА: О НАС (about.php)
   ============================================ */

/* MISSION */
.mission { padding: 2rem 0 4rem; }
.mission-wrap {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    animation: fadeUp 0.8s 0.2s var(--ease-out) both;
}
.mission-wrap::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: 28px; padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    background-size: 300% 300%;
    animation: gradientFlow 8s linear infinite;
    opacity: 0.5;
}
.mission-wrap::after {
    content: ''; position: absolute;
    top: -50%; right: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15), transparent 70%);
    pointer-events: none;
    filter: blur(60px);
}
.mission-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 3rem; align-items: center;
    position: relative; z-index: 1;
}
.mission-text h2 {
    font-family: var(--font-display);
    font-size: 1.8rem; font-weight: 700;
    margin-bottom: 1.5rem; color: var(--text);
    letter-spacing: -0.01em;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
}
.mission-text h2 .em { color: var(--violet-soft); font-style: italic; text-shadow: 0 0 20px var(--violet); }
.mission-text p {
    color: var(--text-dim); font-size: 1rem;
    line-height: 1.8; margin-bottom: 1.2rem;
}
.mission-quote {
    margin-top: 2rem; padding: 1.5rem;
    background: rgba(8, 4, 26, 0.4);
    border-left: 3px solid var(--violet);
    border-radius: 0 16px 16px 0;
    font-style: italic;
    color: var(--violet-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    position: relative;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.1);
}
.mission-visual {
    position: relative; height: 380px;
    display: flex; align-items: center; justify-content: center;
}
.visual-orbit {
    position: absolute; border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.15);
}
.visual-orbit.o1 {
    width: 340px; height: 340px;
    animation: spin 40s linear infinite;
}
.visual-orbit.o1::before {
    content: ''; position: absolute;
    top: -4px; left: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 15px var(--violet), 0 0 30px var(--violet);
}
.visual-orbit.o2 {
    width: 240px; height: 240px;
    border-style: dashed;
    border-color: rgba(232, 121, 249, 0.2);
    animation: spin 25s linear infinite reverse;
}
.visual-orbit.o2::after {
    content: ''; position: absolute;
    bottom: -3px; left: 50%;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--fuchsia);
    box-shadow: 0 0 15px var(--fuchsia), 0 0 30px var(--fuchsia);
}
.visual-core {
    width: 140px; height: 140px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--violet-hi), var(--violet-deep) 60%, var(--void) 100%);
    box-shadow: 0 0 60px rgba(168, 85, 247, 0.6), 0 0 120px rgba(168, 85, 247, 0.3), inset 0 0 60px rgba(232, 121, 249, 0.3);
    position: relative;
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem;
    animation: corePulse 4s ease-in-out infinite;
    z-index: 1;
}
@keyframes corePulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 60px rgba(168, 85, 247, 0.6), 0 0 120px rgba(168, 85, 247, 0.3); }
    50% { transform: scale(1.05); box-shadow: 0 0 80px rgba(168, 85, 247, 0.9), 0 0 160px rgba(232, 121, 249, 0.5); }
}

/* HISTORY */
.history { padding: 3rem 0 5rem; }
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 0;
    animation: fadeUp 0.8s 0.2s var(--ease-out) both;
}
.timeline::before {
    content: ''; position: absolute;
    left: 50%; top: 0; bottom: 0;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent 0%, var(--violet-deep) 10%, var(--violet) 50%, var(--fuchsia) 90%, transparent 100%);
    border-radius: 3px;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}
.timeline-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 3rem 0;
    width: 100%;
}

.timeline-item:nth-child(even) {
    justify-content: flex-end;
}

.timeline-item .timeline-content {
    width: calc(50% - 60px);
    max-width: 420px;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.5rem;
    transition: all 0.4s var(--ease);
    backdrop-filter: blur(15px);
    position: relative;
    z-index: 2;
}

.timeline-item:nth-child(odd) .timeline-content {
    text-align: right;
}

.timeline-item:nth-child(even) .timeline-content {
    text-align: left;
}
.timeline-item .timeline-content:hover {
    border-color: var(--violet);
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(168, 85, 247, 0.2), 0 0 60px rgba(168, 85, 247, 0.1);
}
.timeline-item:nth-child(odd) .timeline-content { grid-column: 1; text-align: right; }
.timeline-item:nth-child(even) .timeline-content { grid-column: 3; text-align: left; }
.timeline-year {
    font-family: var(--font-display);
    font-size: 0.95rem; font-weight: 700;
    color: var(--violet-soft);
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 15px var(--violet);
}
.timeline-title {
    font-family: var(--font-display);
    font-size: 1.2rem; font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.timeline-desc { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }
.timeline-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--violet);
    border: 3px solid var(--void);
    box-shadow: 0 0 0 3px var(--violet), 0 0 20px var(--violet), 0 0 40px rgba(168, 85, 247, 0.5);
    z-index: 3;
    animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--violet), 0 0 20px var(--violet), 0 0 40px rgba(168, 85, 247, 0.5); }
    50% { box-shadow: 0 0 0 3px var(--fuchsia), 0 0 30px var(--fuchsia), 0 0 60px rgba(232, 121, 249, 0.7); }
}

/* CREW */
.crew { padding: 3rem 0 5rem; }
.crew-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 3rem;
}
.crew-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative; overflow: hidden;
    transition: all 0.4s var(--ease);
    backdrop-filter: blur(20px);
    animation: fadeUp 0.8s var(--ease-out) both;
}
.crew-card::before {
    content: ''; position: absolute; inset: 0;
    border-radius: 24px; padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    background-size: 300% 300%;
    animation: gradientFlow 4s linear infinite;
}
.crew-card:hover::before { opacity: 1; }
.crew-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.25), 0 0 100px rgba(168, 85, 247, 0.1);
}
.crew-avatar-wrap {
    position: relative;
    width: 130px; height: 130px;
    margin: 0 auto 1.2rem;
}
.crew-avatar {
    width: 100%; height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet-deep), var(--fuchsia));
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 2.8rem; font-weight: 700;
    color: white;
    position: relative; z-index: 2;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
    border: 3px solid rgba(168, 85, 247, 0.3);
    overflow: hidden;
}
.crew-avatar-wrap::before, .crew-avatar-wrap::after {
    content: ''; position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none;
}
.crew-avatar-wrap::before {
    width: 145px; height: 145px;
    border: 1px dashed rgba(232, 121, 249, 0.3);
    animation: spin 20s linear infinite;
}
.crew-avatar-wrap::after {
    width: 165px; height: 165px;
    border: 1px solid rgba(168, 85, 247, 0.2);
    animation: spin 30s linear infinite reverse;
}
.crew-name {
    font-family: var(--font-display);
    font-size: 1.3rem; font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
    letter-spacing: 0.3px;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}
.crew-role {
    display: inline-block;
    padding: 0.3rem 1rem;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}
.crew-bio {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 1.2rem;
    min-height: 3rem;
    display: flex; align-items: center; justify-content: center;
}
.crew-links {
    display: flex; gap: 0.5rem; justify-content: center;
}
.crew-links a {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
    transition: all 0.3s var(--ease);
    text-decoration: none; font-size: 0.85rem;
}
.crew-links a:hover {
    color: var(--violet-soft);
    border-color: var(--violet);
    background: rgba(168, 85, 247, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

/* CONTACTS */
.contacts { padding: 3rem 0 5rem; }
.contacts-wrap {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 3rem;
    position: relative; overflow: hidden;
    backdrop-filter: blur(20px);
    animation: fadeUp 0.8s var(--ease-out) both;
}
.contacts-wrap::before {
    content: ''; position: absolute; inset: -1px;
    border-radius: 28px; padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    background-size: 300% 300%;
    animation: gradientFlow 8s linear infinite;
    opacity: 0.5;
}
.contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    position: relative; z-index: 1;
}
.contacts-info h3, .contacts-form h3 {
    font-family: var(--font-display);
    font-size: 1.5rem; font-weight: 700;
    color: var(--text);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
.contacts-info h3 .em, .contacts-form h3 .em {
    color: var(--violet-soft); font-style: italic;
    text-shadow: 0 0 15px var(--violet);
}
.contact-list { display: flex; flex-direction: column; gap: 0.8rem; }
.contact-item {
    display: flex; align-items: center; gap: 1rem;
    padding: 0.9rem 1.2rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: all 0.3s var(--ease);
    text-decoration: none; color: inherit;
}
.contact-item:hover {
    border-color: var(--violet);
    background: rgba(40, 22, 89, 0.6);
    transform: translateX(5px);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
}
.contact-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--violet-soft);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.3s var(--ease);
}
.contact-item:hover .contact-icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(232, 121, 249, 0.2));
    border-color: var(--violet);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    transform: scale(1.05);
}
.contact-body { flex: 1; min-width: 0; }
.contact-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.2rem;
}
.contact-value {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s var(--ease);
}
.contact-item:hover .contact-value { color: var(--violet-soft); text-shadow: 0 0 10px var(--violet); }

.social-block { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.social-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}
.social-links { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.social-link {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-dim);
    transition: all 0.3s var(--ease);
    text-decoration: none; font-size: 1rem;
}
.social-link:hover {
    color: var(--violet-soft);
    border-color: var(--violet);
    background: rgba(168, 85, 247, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
}

.form-group { margin-bottom: 1rem; }
.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
}
.form-input, .form-textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 0.9rem;
    transition: all 0.3s var(--ease);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-faint); }
.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--violet);
    background: rgba(8, 4, 26, 0.8);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.3);
}
.form-textarea { resize: vertical; min-height: 110px; font-family: var(--font-main); }
.form-submit {
    width: 100%;
    padding: 0.9rem 2rem;
    margin-top: 0.5rem;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    border: none;
    border-radius: 12px;
    color: white;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
    box-shadow: 0 4px 25px rgba(168, 85, 247, 0.5);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.form-submit:hover {
    box-shadow: 0 6px 40px rgba(168, 85, 247, 0.7), 0 0 60px rgba(232, 121, 249, 0.3);
    transform: translateY(-2px);
}
.form-hint {
    text-align: center;
    color: var(--text-faint);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    margin-top: 0.8rem;
    letter-spacing: 0.5px;
}

/* АДАПТИВ ДЛЯ ABOUT */
@media (max-width: 1024px) {
    .mission-grid { grid-template-columns: 1fr; gap: 2rem; }
    .contacts-grid { grid-template-columns: 1fr; gap: 2rem; }
    .timeline::before { left: 20px; }
    .timeline-item { grid-template-columns: 1fr; padding-left: 50px; }
    .timeline-item:nth-child(odd) .timeline-content,
    .timeline-item:nth-child(even) .timeline-content { grid-column: 1; text-align: left; }
    .timeline-dot { position: absolute; left: 12px; top: 2.5rem; grid-column: auto; }
}
@media (max-width: 768px) {
    .mission-wrap { padding: 1.8rem; }
    .mission-text h2 { font-size: 1.4rem; }
    .mission-visual { height: 280px; }
    .visual-orbit.o1 { width: 240px; height: 240px; }
    .visual-orbit.o2 { width: 180px; height: 180px; }
    .visual-core { width: 110px; height: 110px; font-size: 2.2rem; }
    .contacts-wrap { padding: 1.8rem; }
    .crew-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .crew-card { padding: 1.5rem 1rem; }
    .crew-avatar-wrap { width: 100px; height: 100px; }
    .crew-avatar { font-size: 2.2rem; }
    .crew-avatar-wrap::before { width: 115px; height: 115px; }
    .crew-avatar-wrap::after { width: 130px; height: 130px; }
}
@media (max-width: 480px) {
    .crew-grid { grid-template-columns: 1fr; }
}

/* ============================================
   АВТОРИЗАЦИЯ / РЕГИСТРАЦИЯ / ВОССТАНОВЛЕНИЕ
   ============================================ */

.auth-section {
    padding: 3rem 0 5rem;
    min-height: calc(100vh - 300px);
    display: flex;
    align-items: center;
}

.auth-wrap {
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 4rem;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

/* ВИЗУАЛЬНАЯ ЧАСТЬ (слева) */
.auth-visual {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeUp 0.8s var(--ease-out) both;
}

.auth-orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 1px solid rgba(168, 85, 247, 0.15);
    transform: translate(-50%, -50%);
}

.auth-orbit.o1 {
    width: 420px;
    height: 420px;
    animation: spin 50s linear infinite;
}
.auth-orbit.o1::before {
    content: '';
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 20px var(--violet), 0 0 40px var(--violet);
}

.auth-orbit.o2 {
    width: 300px;
    height: 300px;
    border-style: dashed;
    border-color: rgba(232, 121, 249, 0.2);
    animation: spin 35s linear infinite reverse;
}
.auth-orbit.o2::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fuchsia);
    box-shadow: 0 0 20px var(--fuchsia), 0 0 40px var(--fuchsia);
}

.auth-core {
    position: relative;
    z-index: 2;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--violet-hi), var(--violet-deep) 60%, var(--void) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: white;
    box-shadow: 
        0 0 60px rgba(168, 85, 247, 0.6),
        0 0 120px rgba(168, 85, 247, 0.3),
        inset 0 0 60px rgba(232, 121, 249, 0.3);
    animation: corePulse 4s ease-in-out infinite;
}

/* КАРТОЧКА ФОРМЫ (справа) */
.auth-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.85), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 28px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: 
        0 0 80px rgba(168, 85, 247, 0.15),
        inset 0 0 80px rgba(168, 85, 247, 0.05);
    animation: fadeUp 0.8s 0.1s var(--ease-out) both;
}

.auth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
}

.auth-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12), transparent 70%);
    pointer-events: none;
    filter: blur(60px);
}

/* ШАПКА КАРТОЧКИ */
.auth-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.auth-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    padding: 0.4rem 0.9rem;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
}

.auth-title {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 0.6rem;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.3);
}

.auth-title .em {
    color: var(--violet-soft);
    font-style: italic;
    text-shadow: 0 0 20px var(--violet), 0 0 40px rgba(168, 85, 247, 0.6);
}

.auth-subtitle {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* АЛЕРТЫ */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    border-radius: 14px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}

.auth-alert i {
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.auth-alert.error {
    background: rgba(251, 113, 133, 0.08);
    border: 1px solid rgba(251, 113, 133, 0.4);
    color: var(--rose);
}

.auth-alert.success {
    background: rgba(163, 230, 53, 0.08);
    border: 1px solid rgba(163, 230, 53, 0.4);
    color: var(--lime);
}

.auth-success-link {
    color: var(--violet-soft);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s var(--ease);
}

.auth-success-link:hover {
    color: var(--fuchsia);
    text-shadow: 0 0 10px var(--fuchsia);
}

/* ФОРМА */
.auth-form {
    position: relative;
    z-index: 1;
}

.auth-field {
    margin-bottom: 1.2rem;
}

.auth-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
}

.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: all 0.3s var(--ease);
}

.auth-input-wrap:focus-within {
    border-color: var(--violet);
    background: rgba(8, 4, 26, 0.85);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.3);
}

.auth-input-wrap i {
    padding: 0 1rem;
    color: var(--violet-soft);
    font-size: 0.9rem;
    text-shadow: 0 0 10px var(--violet);
    flex-shrink: 0;
}

.auth-input-wrap input {
    flex: 1;
    padding: 0.9rem 1rem 0.9rem 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 0.95rem;
}

.auth-input-wrap input::placeholder {
    color: var(--text-faint);
}

/* СТРОКА "ЗАПОМНИТЬ / ЗАБЫЛИ" */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--text-dim);
    transition: all 0.3s var(--ease);
}

.auth-checkbox:hover {
    color: var(--text);
}

.auth-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--violet);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-checkbox-agree {
    align-items: flex-start;
    margin: 1.5rem 0;
    font-size: 0.8rem;
    line-height: 1.5;
}

.auth-checkbox-agree input[type="checkbox"] {
    margin-top: 3px;
}

.auth-checkbox-agree a {
    color: var(--violet-soft);
    text-decoration: none;
    transition: all 0.3s var(--ease);
    text-shadow: 0 0 8px var(--violet);
}

.auth-checkbox-agree a:hover {
    color: var(--fuchsia);
    text-shadow: 0 0 12px var(--fuchsia);
}

.auth-link {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--violet-soft);
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: all 0.3s var(--ease);
    text-shadow: 0 0 8px var(--violet);
}

.auth-link:hover {
    color: var(--fuchsia);
    text-shadow: 0 0 12px var(--fuchsia);
}

/* КНОПКА ОТПРАВКИ */
.auth-submit {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    border: none;
    border-radius: 14px;
    color: white;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
    box-shadow: 0 4px 25px rgba(168, 85, 247, 0.5);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.auth-submit:hover {
    box-shadow: 0 6px 40px rgba(168, 85, 247, 0.7), 0 0 60px rgba(232, 121, 249, 0.3);
    transform: translateY(-2px);
}

.auth-submit:active {
    transform: translateY(0);
}

/* ИНДИКАТОР СИЛЫ ПАРОЛЯ */
.password-strength {
    height: 4px;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 2px;
    margin-top: 0.5rem;
    overflow: hidden;
}

.password-strength-bar {
    height: 100%;
    width: 0;
    background: var(--rose);
    border-radius: 2px;
    transition: all 0.3s var(--ease);
}

.password-strength-text {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    margin-top: 0.3rem;
    letter-spacing: 0.5px;
    min-height: 1em;
}

/* РАЗДЕЛИТЕЛЬ "ИЛИ" */
.auth-divider {
    position: relative;
    text-align: center;
    margin: 1.5rem 0;
    z-index: 1;
}

.auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--line);
}

.auth-divider span {
    position: relative;
    display: inline-block;
    padding: 0 1rem;
    background: var(--card);
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* СОЦ-КНОПКИ */
.auth-social {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.auth-social-btn {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    font-size: 1.2rem;
    text-decoration: none;
    transition: all 0.3s var(--ease);
}

.auth-social-btn:hover {
    transform: translateY(-3px);
    color: white;
}

.auth-social-btn.discord:hover {
    background: rgba(88, 101, 242, 0.2);
    border-color: #5865F2;
    box-shadow: 0 0 25px rgba(88, 101, 242, 0.5);
}

.auth-social-btn.telegram:hover {
    background: rgba(34, 158, 217, 0.2);
    border-color: #229ED9;
    box-shadow: 0 0 25px rgba(34, 158, 217, 0.5);
}

.auth-social-btn.github:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
}

.auth-social-btn.vk:hover {
    background: rgba(0, 119, 255, 0.2);
    border-color: #0077FF;
    box-shadow: 0 0 25px rgba(0, 119, 255, 0.5);
}

/* ФУТЕР КАРТОЧКИ */
.auth-footer {
    text-align: center;
    color: var(--text-dim);
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
    padding-top: 0.5rem;
}

.auth-footer a {
    color: var(--violet-soft);
    text-decoration: none;
    font-weight: 600;
    margin-left: 0.3rem;
    transition: all 0.3s var(--ease);
    text-shadow: 0 0 10px var(--violet);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.auth-footer a:hover {
    color: var(--fuchsia);
    gap: 0.6rem;
    text-shadow: 0 0 15px var(--fuchsia);
}

.auth-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-faint) !important;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 1px;
    transition: all 0.3s var(--ease);
}

.auth-back-link:hover {
    color: var(--violet-soft) !important;
    text-shadow: 0 0 10px var(--violet);
}

/* ПОДСКАЗКА 2FA ВНИЗУ */
.auth-hint {
    max-width: 720px;
    margin: 3rem auto 0;
    padding: 1.2rem 1.5rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    animation: fadeUp 0.8s 0.3s var(--ease-out) both;
}

.auth-hint i {
    font-size: 1.8rem;
    color: var(--violet-soft);
    text-shadow: 0 0 20px var(--violet);
    flex-shrink: 0;
}

.auth-hint strong {
    display: block;
    color: var(--text);
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}

.auth-hint p {
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.5;
}

/* АДАПТИВ */
@media (max-width: 1024px) {
    .auth-wrap {
        grid-template-columns: 1fr;
        gap: 2rem;
        max-width: 520px;
    }
    .auth-visual {
        display: none;
    }
}

@media (max-width: 768px) {
    .auth-section {
        padding: 1.5rem 0 3rem;
    }
    .auth-card {
        padding: 1.8rem;
        border-radius: 22px;
    }
    .auth-title {
        font-size: 1.6rem;
    }
    .auth-hint {
        flex-direction: column;
        text-align: center;
        margin-top: 2rem;
    }
}

@media (max-width: 480px) {
    .auth-card {
        padding: 1.5rem;
    }
    .auth-title {
        font-size: 1.4rem;
    }
    .auth-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    .auth-social {
        gap: 0.4rem;
    }
    .auth-social-btn {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }
}

/* ============================================
   СТРАНИЦА: КАРЬЕРА (career.php)
   ============================================ */

/* REASONS */
.reasons { padding: 2rem 0 4rem; }
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.reason-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.8rem 1.4rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease);
    backdrop-filter: blur(20px);
    animation: fadeUp 0.8s var(--ease-out) both;
}
.reason-card:hover {
    transform: translateY(-4px);
    border-color: var(--violet);
    box-shadow: 0 20px 50px rgba(168, 85, 247, 0.2);
}
.reason-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
    border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    color: var(--violet-soft);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    transition: all 0.4s var(--ease);
}
.reason-card:hover .reason-icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(232, 121, 249, 0.2));
    border-color: var(--violet);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
    color: white;
    transform: scale(1.08);
}
.reason-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.reason-text { color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; }

/* ROYALTY */
.royalty { padding: 2rem 0 4rem; }
.royalty-wrap {
    background: radial-gradient(circle at 20% 20%, rgba(251, 191, 36, 0.08), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.1), transparent 50%),
                linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 28px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
    align-items: start;
    backdrop-filter: blur(20px);
    animation: fadeUp 0.8s 0.1s var(--ease-out) both;
}
.royalty-icon {
    width: 80px; height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(251, 191, 36, 0.4);
    display: flex; align-items: center; justify-content: center;
    color: var(--amber);
    font-size: 2rem;
    flex-shrink: 0;
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.2);
    animation: warningPulse 3s ease-in-out infinite;
}
@keyframes warningPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.2); }
    50% { box-shadow: 0 0 50px rgba(251, 191, 36, 0.4), 0 0 80px rgba(251, 191, 36, 0.2); }
}
.royalty-content h3 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text);
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
}
.royalty-content h3 .badge-warning {
    padding: 0.2rem 0.7rem;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--amber);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.royalty-content > p {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.royalty-scenarios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.scenario {
    padding: 1.2rem;
    border-radius: 16px;
    border: 1px solid;
    transition: all 0.3s var(--ease);
}
.scenario:hover { transform: translateY(-3px); }
.scenario.good {
    background: rgba(163, 230, 53, 0.05);
    border-color: rgba(163, 230, 53, 0.3);
}
.scenario.good:hover {
    box-shadow: 0 10px 30px rgba(163, 230, 53, 0.15);
    border-color: var(--lime);
}
.scenario.bad {
    background: rgba(255, 46, 99, 0.05);
    border-color: rgba(255, 46, 99, 0.3);
}
.scenario.bad:hover {
    box-shadow: 0 10px 30px rgba(255, 46, 99, 0.15);
    border-color: #ff2e63;
}
.scenario-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    display: flex; align-items: center; gap: 0.4rem;
}
.scenario.good .scenario-label { color: var(--lime); }
.scenario.bad .scenario-label { color: #ff2e63; }
.scenario-text { color: var(--text-dim); font-size: 0.85rem; line-height: 1.5; }

/* ROLES */
.roles { padding: 2rem 0 4rem; }
.roles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.2rem;
}
.role-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 1.8rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease);
    backdrop-filter: blur(20px);
    display: flex; flex-direction: column;
    animation: fadeUp 0.6s var(--ease-out) both;
}
.role-card:hover {
    transform: translateY(-6px);
    border-color: var(--violet);
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.25);
}
.role-header {
    display: flex; align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.role-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
    border: 1px solid var(--line-strong);
    display: flex; align-items: center; justify-content: center;
    color: var(--violet-soft);
    font-size: 1.3rem;
    flex-shrink: 0;
    transition: all 0.4s var(--ease);
}
.role-card:hover .role-icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(232, 121, 249, 0.2));
    border-color: var(--violet);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
    color: white;
    transform: scale(1.08);
}
.role-icon.dev { color: var(--violet-soft); }
.role-icon.art { color: var(--fuchsia); }
.role-icon.sound { color: var(--cyan); }
.role-icon.design { color: var(--lime); }
.role-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
}
.role-type {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.role-badges {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.role-badge {
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.role-badge.royalty {
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: var(--violet-soft);
}
.role-badge.remote {
    background: rgba(34, 211, 238, 0.1);
    border: 1px solid rgba(34, 211, 238, 0.3);
    color: var(--cyan);
}
.role-badge.urgent {
    background: rgba(232, 121, 249, 0.12);
    border: 1px solid rgba(232, 121, 249, 0.4);
    color: var(--fuchsia);
    animation: tagPulse 2s ease-in-out infinite;
}
.role-desc {
    color: var(--text-dim);
    font-size: 0.875rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.role-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}
.role-list-title {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--violet-soft);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    display: flex; align-items: center; gap: 0.3rem;
}
.role-list-items {
    display: flex; flex-direction: column; gap: 0.35rem;
}
.role-list-items li {
    color: var(--text-dim);
    font-size: 0.8rem;
    line-height: 1.4;
    list-style: none;
    padding-left: 1rem;
    position: relative;
}
.role-list-items li::before {
    content: '›';
    position: absolute; left: 0;
    color: var(--violet);
    font-weight: 700;
    text-shadow: 0 0 8px var(--violet);
}
.role-tech {
    display: flex; flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 1.2rem;
}
.role-apply {
    margin-top: auto;
    padding: 0.8rem 1.4rem;
    background: transparent;
    border: 1px solid var(--violet);
    border-radius: 12px;
    color: var(--violet-soft);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.5rem;
    width: 100%;
}
.role-apply:hover {
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 30px rgba(168, 85, 247, 0.5);
    transform: translateY(-2px);
}

/* PROCESS */
.process { padding: 2rem 0 4rem; }
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.2rem;
    position: relative;
}
.process-grid::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
    opacity: 0.4;
    z-index: 0;
}
.process-step {
    position: relative; z-index: 1;
    text-align: center;
    animation: fadeUp 0.8s var(--ease-out) both;
}
.process-num {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.2rem;
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.5);
    border: 3px solid var(--void);
}
.process-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.process-text {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
    max-width: 220px;
    margin: 0 auto;
}

/* APPLY */
.apply { padding: 2rem 0 4rem; }
.apply-wrap {
    background: radial-gradient(circle at 20% 20%, rgba(168, 85, 247, 0.15), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(232, 121, 249, 0.1), transparent 50%),
                linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 28px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 80px rgba(168, 85, 247, 0.15), inset 0 0 80px rgba(168, 85, 247, 0.05);
    animation: fadeUp 0.8s var(--ease-out) both;
}
.apply-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.apply-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 0.8rem;
    letter-spacing: -0.02em;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
}
.apply-header h2 .em {
    color: var(--violet-soft);
    font-style: italic;
    text-shadow: 0 0 20px var(--violet), 0 0 40px rgba(168, 85, 247, 0.6);
}
.apply-header p { color: var(--text-dim); font-size: 0.95rem; max-width: 560px; margin: 0 auto; }
.apply-form { max-width: 720px; margin: 0 auto; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
}
.form-label .req { color: var(--fuchsia); }
.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: 0.85rem 1rem;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 0.9rem;
    transition: all 0.3s var(--ease);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-faint); }
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--violet);
    background: rgba(8, 4, 26, 0.8);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.3);
}
.form-textarea { resize: vertical; min-height: 100px; font-family: var(--font-main); }
.form-select { cursor: pointer; appearance: none; padding-right: 2.5rem; }
.form-select option { background: var(--panel); color: var(--text); }
.form-checkbox {
    display: flex; align-items: flex-start; gap: 0.8rem;
    margin-bottom: 1.5rem; cursor: pointer;
}
.form-checkbox input[type="checkbox"] {
    width: 18px; height: 18px;
    margin-top: 2px;
    cursor: pointer;
    accent-color: var(--violet);
    flex-shrink: 0;
}
.form-checkbox span { color: var(--text-dim); font-size: 0.8rem; line-height: 1.5; }
.form-checkbox a { color: var(--violet-soft); text-decoration: none; transition: all 0.3s var(--ease); }
.form-checkbox a:hover { color: var(--fuchsia); text-shadow: 0 0 10px var(--fuchsia); }
.form-submit {
    width: 100%;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    border: none;
    border-radius: 12px;
    color: white;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    background-size: 200% 200%;
    animation: gradientShift 4s ease infinite;
    box-shadow: 0 4px 25px rgba(168, 85, 247, 0.5);
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
}
.form-submit:hover {
    box-shadow: 0 6px 40px rgba(168, 85, 247, 0.7), 0 0 60px rgba(232, 121, 249, 0.3);
    transform: translateY(-2px);
}
.form-hint {
    text-align: center;
    color: var(--text-faint);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    margin-top: 1rem;
    letter-spacing: 0.5px;
}

/* ============================================
   СТРАНИЦА: ПРОЕКТ (project.php)
   ============================================ */
.project-detail { padding-bottom: 4rem; }
.project-detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    animation: fadeUp 0.8s var(--ease-out) both;
}
.project-detail-main { min-width: 0; }
.project-detail-hero {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    margin-bottom: 2rem;
    backdrop-filter: blur(20px);
}
.project-detail-cover {
    width: 100%;
    aspect-ratio: 16/7;
    background: radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.4), transparent 50%),
                radial-gradient(circle at 70% 60%, rgba(232, 121, 249, 0.3), transparent 50%),
                linear-gradient(135deg, #2a1245, #1a0b33);
    display: flex; align-items: center; justify-content: center;
    font-size: 6rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.project-detail-cover::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(216, 180, 254, 0.6) 1px, transparent 1.5px),
                      radial-gradient(circle, rgba(232, 121, 249, 0.5) 1px, transparent 1.5px);
    background-size: 40px 40px, 60px 60px;
    animation: dotFlow 20s linear infinite;
    opacity: 0.5;
}
.project-detail-content { padding: 2rem; }
.project-detail-badges {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.project-detail-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--text);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    text-shadow: 0 0 40px rgba(168, 85, 247, 0.4);
}
.project-detail-desc {
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}
.project-detail-progress { margin-bottom: 1.5rem; }
.project-detail-meta {
    display: flex; gap: 1.2rem; flex-wrap: wrap;
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
    margin-bottom: 1.5rem;
}
.project-detail-actions {
    display: flex; gap: 0.8rem; flex-wrap: wrap;
}
.project-detail-block {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 2rem;
    backdrop-filter: blur(20px);
}
.project-detail-text {
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1.8;
}
.project-detail-sidebar {
    display: flex; flex-direction: column;
    gap: 1.2rem;
    position: sticky; top: 90px;
    height: fit-content;
}
.project-stats {
    display: flex; flex-direction: column;
    gap: 0.8rem;
}
.project-stat {
    display: flex; justify-content: space-between;
    align-items: center;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
}
.project-stat:last-child { border-bottom: none; }
.project-stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.project-stat-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--violet-soft);
    text-shadow: 0 0 10px var(--violet);
}

/* АДАПТИВ КАРЬЕРЫ И ПРОЕКТА */
@media (max-width: 1024px) {
    .reasons-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid::before { display: none; }
    .royalty-wrap { grid-template-columns: 1fr; gap: 1.5rem; padding: 2rem; }
    .royalty-icon { width: 64px; height: 64px; font-size: 1.6rem; }
    .project-detail-layout { grid-template-columns: 1fr; gap: 2rem; }
    .project-detail-sidebar { position: static; }
}
@media (max-width: 768px) {
    .reasons-grid { grid-template-columns: 1fr; gap: 0.8rem; }
    .reason-card { padding: 1.4rem 1.2rem; }
    .royalty-scenarios { grid-template-columns: 1fr; }
    .roles-grid { grid-template-columns: 1fr; }
    .role-card { padding: 1.5rem; }
    .role-lists { grid-template-columns: 1fr; gap: 0.8rem; }
    .process-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .apply-wrap { padding: 1.8rem; }
    .form-row { grid-template-columns: 1fr; }
    .project-detail-content { padding: 1.5rem; }
    .project-detail-title { font-size: 1.5rem; }
}

/* PAGE HEADER — статистика */
.page-title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.page-stats {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}

.page-stat {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    position: relative;
    padding-left: 1rem;
}

.page-stat::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--violet), var(--fuchsia));
    box-shadow: 0 0 10px var(--violet);
}

.page-stat-val {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    background: linear-gradient(135deg, #fff, var(--violet-soft));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.page-stat-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ============================================
   СТРАНИЦА: УЧАСТНИК КОМАНДЫ (team.php)
   ============================================ */

.team-detail { padding-bottom: 4rem; }

.team-detail-header {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2.5rem;
    align-items: center;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.85), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 28px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(20px);
    animation: fadeUp 0.8s var(--ease-out) both;
}

.team-detail-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
}

.team-detail-header::after {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15), transparent 70%);
    pointer-events: none;
    filter: blur(60px);
}

.team-avatar-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.team-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--void);
    border: 3px solid var(--violet);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.5), inset 0 0 30px rgba(168, 85, 247, 0.15);
}

.team-avatar img { width: 100%; height: 100%; object-fit: cover; }

.team-avatar .avatar-letter {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--violet-soft), var(--fuchsia));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.team-detail-info { min-width: 0; position: relative; z-index: 1; }

.team-detail-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.team-xp-block {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(20px);
}

.team-detail-section {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(20px);
}

.team-detail-section .section-title {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--violet-soft);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
}

.team-detail-section .section-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: var(--violet);
    box-shadow: 0 0 10px var(--violet);
    border-radius: 2px;
}

.team-detail-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .team-detail-header {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 1.8rem;
    }
    .team-avatar-wrapper { margin: 0 auto; width: 110px; height: 110px; }
    .team-avatar .avatar-letter { font-size: 2.8rem; }
    .team-detail-info .user-contacts { justify-content: center; }
    .team-detail-info .roles-list { justify-content: center; }
    .team-detail-stats { grid-template-columns: repeat(2, 1fr); }
    .team-detail-section { padding: 1.5rem; }
}

/* ============================================
   СТРАНИЦА: КОНТАКТЫ (contacts.php)
   ============================================ */
.contacts-page { padding-bottom: 4rem; }
.contacts-page .contacts-wrap {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    animation: fadeUp 0.8s var(--ease-out) both;
}
.contacts-page .contacts-wrap::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background-size: 300% 300%;
    animation: gradientFlow 8s linear infinite;
    opacity: 0.5;
}
.contacts-page .contacts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    position: relative;
    z-index: 1;
}
.contacts-page .contacts-info h3,
.contacts-page .contacts-form h3 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
.contacts-page .contacts-info h3 .em,
.contacts-page .contacts-form h3 .em {
    color: var(--violet-soft);
    font-style: italic;
    text-shadow: 0 0 15px var(--violet);
}
.contacts-page .contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.contacts-page .contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.2rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: all 0.3s var(--ease);
    text-decoration: none;
    color: inherit;
}
.contacts-page .contact-item:hover {
    border-color: var(--violet);
    background: rgba(40, 22, 89, 0.6);
    transform: translateX(5px);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
}
.contacts-page .contact-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-soft);
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: all 0.3s var(--ease);
}
.contacts-page .contact-item:hover .contact-icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(232, 121, 249, 0.2));
    border-color: var(--violet);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    transform: scale(1.05);
}
.contacts-page .contact-body {
    flex: 1;
    min-width: 0;
}
.contacts-page .contact-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.2rem;
}
.contacts-page .contact-value {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s var(--ease);
}
.contacts-page .contact-item:hover .contact-value {
    color: var(--violet-soft);
    text-shadow: 0 0 10px var(--violet);
}
.contacts-page .social-block {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}
.contacts-page .social-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}
.contacts-page .social-links {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.contacts-page .social-link {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    transition: all 0.3s var(--ease);
    text-decoration: none;
    font-size: 1rem;
}
.contacts-page .social-link:hover {
    color: var(--violet-soft);
    border-color: var(--violet);
    background: rgba(168, 85, 247, 0.15);
    transform: translateY(-3px);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
}

/* ============================================
   СТРАНИЦА: ПОДДЕРЖКА (support.php)
   ============================================ */
.support-why { padding: 2rem 0 4rem; }
.why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.why-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.8rem 1.4rem;
    transition: all 0.4s var(--ease);
    backdrop-filter: blur(20px);
    animation: fadeUp 0.8s var(--ease-out) both;
}
.why-card:hover {
    transform: translateY(-4px);
    border-color: var(--violet);
    box-shadow: 0 20px 50px rgba(168, 85, 247, 0.2);
}
.why-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-soft);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    transition: all 0.4s var(--ease);
}
.why-card:hover .why-icon {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(232, 121, 249, 0.2));
    border-color: var(--violet);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
    color: white;
    transform: scale(1.08);
}
.why-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.why-text {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
}

.support-tiers { padding: 2rem 0 4rem; }
.tiers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
}
.tier-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 2rem 1.8rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    animation: fadeUp 0.8s var(--ease-out) both;
}
.tier-card.popular {
    border-color: var(--violet);
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.3);
    transform: scale(1.03);
}
.tier-card:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: var(--violet);
    box-shadow: 0 20px 60px rgba(168, 85, 247, 0.35);
}
.tier-card.popular:hover {
    transform: translateY(-6px) scale(1.05);
}
.tier-popular-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.3rem 0.8rem;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    animation: tagPulse 2s ease-in-out infinite;
}
.tier-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 15px var(--violet));
}
.tier-name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
}
.tier-price {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--violet-soft);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px var(--violet);
    line-height: 1;
}
.tier-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 2rem;
    flex-grow: 1;
}
.tier-features li {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.5;
}
.tier-btn {
    padding: 0.9rem 1.5rem;
    background: transparent;
    border: 1px solid var(--violet);
    border-radius: 12px;
    color: var(--violet-soft);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
}
.tier-btn:hover {
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white;
    border-color: transparent;
    box-shadow: 0 6px 30px rgba(168, 85, 247, 0.5);
    transform: translateY(-2px);
}
.tier-card.popular .tier-btn {
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 25px rgba(168, 85, 247, 0.5);
}
.support-note {
    max-width: 700px;
    margin: 2.5rem auto 0;
    padding: 1.2rem 1.5rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 16px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}
.support-note i {
    font-size: 1.3rem;
    color: var(--violet-soft);
    text-shadow: 0 0 15px var(--violet);
    flex-shrink: 0;
    margin-top: 2px;
}
.support-note p {
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}
.support-note a {
    color: var(--violet-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s var(--ease);
}
.support-note a:hover {
    color: var(--fuchsia);
    border-bottom-color: var(--fuchsia);
}

.support-thanks { padding: 2rem 0 4rem; }
.thanks-wrap {
    background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.15), transparent 70%),
                linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 28px;
    padding: 3rem;
    text-align: center;
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
}
.thanks-wrap::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background-size: 300% 300%;
    animation: gradientFlow 8s linear infinite;
    opacity: 0.6;
}
.thanks-content { position: relative; z-index: 1; }
.thanks-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 20px var(--fuchsia));
    animation: emojiFloat 3s ease-in-out infinite;
}
.thanks-content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1rem;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
}
.thanks-content h2 .em {
    color: var(--violet-soft);
    font-style: italic;
    text-shadow: 0 0 20px var(--violet), 0 0 40px rgba(168, 85, 247, 0.6);
}
.thanks-content > p {
    color: var(--text-dim);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 560px;
    margin: 0 auto 2rem;
}
.thanks-list {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.thanks-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: all 0.3s var(--ease);
}
.thanks-item:hover {
    border-color: var(--violet);
    transform: translateY(-3px);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}
.thanks-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
}
.thanks-name {
    color: var(--text-dim);
    font-size: 0.85rem;
    font-style: italic;
}

@media (max-width: 1024px) {
    .contacts-page .contacts-grid { grid-template-columns: 1fr; gap: 2rem; }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .tiers-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
    .tier-card.popular { transform: none; }
    .tier-card.popular:hover { transform: translateY(-6px); }
}
@media (max-width: 768px) {
    .contacts-page .contacts-wrap { padding: 1.8rem; }
    .why-grid { grid-template-columns: 1fr; gap: 0.8rem; }
    .why-card { padding: 1.4rem 1.2rem; }
    .thanks-wrap { padding: 2rem 1.5rem; }
    .thanks-list { flex-direction: column; }
}

/* ============================================
   2FA И СБРОС ПАРОЛЯ
   ============================================ */

.auth-wrap-center {
    grid-template-columns: 1fr;
    max-width: 520px;
}

.auth-card-wide {
    max-width: 100%;
}

.auth-shield {
    width: 80px;
    height: 80px;
    margin: 1rem auto 1.5rem;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--violet-hi), var(--violet-deep) 60%, var(--void) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: white;
    box-shadow: 
        0 0 40px rgba(168, 85, 247, 0.6),
        0 0 80px rgba(168, 85, 247, 0.3),
        inset 0 0 40px rgba(232, 121, 249, 0.3);
    animation: corePulse 4s ease-in-out infinite;
}

.auth-timer {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.auth-timer-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-faint);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.auth-timer-value {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--violet-soft);
    letter-spacing: 3px;
    text-shadow: 0 0 25px var(--violet);
    transition: all 0.3s var(--ease);
}

.auth-timer-value.warning {
    color: var(--amber);
    text-shadow: 0 0 25px var(--amber);
}

.auth-timer-value.danger {
    color: var(--rose);
    text-shadow: 0 0 25px var(--rose);
    animation: pulse 1s ease-in-out infinite;
}

.code-inputs {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.code-input {
    width: 52px;
    height: 64px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    background: rgba(8, 4, 26, 0.6);
    border: 2px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    outline: none;
    transition: all 0.3s var(--ease);
    caret-color: var(--violet);
}

.code-input:focus {
    border-color: var(--violet);
    background: rgba(8, 4, 26, 0.9);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
    transform: scale(1.05);
}

.code-input.filled {
    border-color: var(--violet-soft);
    background: rgba(40, 22, 89, 0.6);
    color: var(--violet-soft);
    text-shadow: 0 0 15px var(--violet);
}

.code-input.error {
    border-color: var(--rose) !important;
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.auth-2fa-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.auth-resend-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-resend-btn:hover:not(:disabled) {
    color: var(--violet-soft);
    border-color: var(--violet);
    background: rgba(168, 85, 247, 0.1);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
}

.auth-resend-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .code-inputs { gap: 0.4rem; }
    .code-input {
        width: 42px;
        height: 54px;
        font-size: 1.5rem;
        border-radius: 10px;
    }
    .auth-timer-value { font-size: 1.8rem; }
    .auth-2fa-footer { flex-direction: column; align-items: stretch; }
    .auth-2fa-footer a,
    .auth-2fa-footer button { width: 100%; justify-content: center; }
}

/* ============================================
   ЮРИДИЧЕСКИЕ СТРАНИЦЫ
   ============================================ */

.legal-page {
    padding-bottom: 5rem;
}

.legal-wrap {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: fadeUp 0.8s var(--ease-out) both;
}

.legal-block {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 2rem;
    backdrop-filter: blur(20px);
    position: relative;
    transition: all 0.3s var(--ease);
}

.legal-block:hover {
    border-color: var(--line-strong);
}

.legal-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--violet), transparent);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.legal-block:hover::before {
    opacity: 1;
    box-shadow: 0 0 15px var(--violet);
}

.legal-block h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--violet-soft);
    margin-bottom: 1.2rem;
    letter-spacing: -0.01em;
    text-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.legal-block h2::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(to bottom, var(--violet), var(--fuchsia));
    border-radius: 2px;
    box-shadow: 0 0 10px var(--violet);
    flex-shrink: 0;
}

.legal-block h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 1.5rem 0 0.8rem;
    letter-spacing: 0.2px;
}

.legal-block p {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.75;
    margin-bottom: 0.9rem;
}

.legal-block p:last-child {
    margin-bottom: 0;
}

.legal-block ul {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legal-block ul li {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    padding-left: 1.5rem;
    position: relative;
}

.legal-block ul li::before {
    content: '›';
    position: absolute;
    left: 0.5rem;
    color: var(--violet);
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.4;
    text-shadow: 0 0 8px var(--violet);
}

.legal-block strong {
    color: var(--text);
    font-weight: 600;
}

.legal-block code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0.2rem 0.5rem;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 6px;
    color: var(--violet-soft);
}

.legal-block a {
    color: var(--violet-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s var(--ease);
}

.legal-block a:hover {
    color: var(--fuchsia);
    border-bottom-color: var(--fuchsia);
    text-shadow: 0 0 10px var(--fuchsia);
}

.legal-table-wrap {
    overflow-x: auto;
    margin: 1rem 0;
    border-radius: 12px;
    border: 1px solid var(--line);
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.legal-table thead {
    background: rgba(168, 85, 247, 0.08);
}

.legal-table th {
    text-align: left;
    padding: 0.9rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-strong);
}

.legal-table td {
    padding: 0.9rem 1rem;
    color: var(--text-dim);
    font-size: 0.9rem;
    border-bottom: 1px solid var(--line);
}

.legal-table tr:last-child td {
    border-bottom: none;
}

.legal-table tr:hover td {
    background: rgba(168, 85, 247, 0.03);
}

.legal-owner {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.9rem;
    line-height: 1.7;
    position: relative;
    overflow: hidden;
}

.legal-owner::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background-size: 300% 300%;
    animation: gradientFlow 8s linear infinite;
    opacity: 0.5;
    pointer-events: none;
}

.legal-owner strong {
    color: var(--violet-soft);
    display: block;
    font-family: var(--font-display);
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 15px var(--violet);
}

.legal-owner a {
    color: var(--violet-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s var(--ease);
}

.legal-owner a:hover {
    color: var(--fuchsia);
    border-bottom-color: var(--fuchsia);
    text-shadow: 0 0 10px var(--fuchsia);
}

@media (max-width: 768px) {
    .legal-block {
        padding: 1.5rem;
    }
    .legal-block h2 {
        font-size: 1.2rem;
    }
    .legal-block h3 {
        font-size: 1rem;
    }
    .legal-owner {
        padding: 1.5rem;
    }
}

/* ============================================
   КАНБАН-ДОСКА ЗАДАЧ (tasks.php)
   ============================================ */

.tasks-page { padding-bottom: 5rem; }

.tasks-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.8s 0.1s var(--ease-out) both;
}

.tasks-progress-block {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(20px);
}

.kanban-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    animation: fadeUp 0.8s 0.2s var(--ease-out) both;
}

.kanban-column {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.5), rgba(23, 10, 53, 0.7));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1rem;
    backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    min-height: 400px;
}

.kanban-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 0.8rem 1rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
    position: relative;
}

.kanban-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    opacity: 0.6;
}

.kanban-header[data-status="todo"]::after {
    background: linear-gradient(90deg, transparent, var(--text-faint), transparent);
}

.kanban-header[data-status="in_progress"]::after {
    background: linear-gradient(90deg, transparent, var(--amber), transparent);
    box-shadow: 0 0 10px var(--amber);
}

.kanban-header[data-status="review"]::after {
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    box-shadow: 0 0 10px var(--cyan);
}

.kanban-header[data-status="done"]::after {
    background: linear-gradient(90deg, transparent, var(--lime), transparent);
    box-shadow: 0 0 10px var(--lime);
}

.kanban-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
}

.kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.kanban-dot.todo {
    background: var(--text-faint);
    box-shadow: 0 0 10px var(--text-faint);
}

.kanban-dot.progress {
    background: var(--amber);
    box-shadow: 0 0 10px var(--amber);
    animation: pulse 2s ease-in-out infinite;
}

.kanban-dot.review {
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
}

.kanban-dot.done {
    background: var(--lime);
    box-shadow: 0 0 10px var(--lime);
}

.kanban-count {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    color: var(--violet-soft);
    letter-spacing: 1px;
}

.kanban-body {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    flex-grow: 1;
}

.kanban-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.kanban-empty i {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 0.6rem;
    opacity: 0.3;
    color: var(--violet);
}

.kanban-empty p {
    margin: 0;
    opacity: 0.6;
}

.task-card {
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    transition: all 0.3s var(--ease);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.task-card:hover {
    transform: translateY(-3px);
    border-color: var(--violet);
    background: rgba(40, 22, 89, 0.5);
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.2);
}

.task-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.task-priority {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.task-card.priority-high .task-priority {
    box-shadow: 0 0 10px var(--amber);
}

.task-card.priority-critical .task-priority {
    box-shadow: 0 0 12px var(--rose);
    animation: pulse 1.5s ease-in-out infinite;
}

.task-subtasks-badge {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 10px;
    color: var(--violet-soft);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.task-card-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin-bottom: 0.5rem;
    transition: all 0.3s var(--ease);
}

.task-card:hover .task-card-title {
    color: var(--violet-soft);
    text-shadow: 0 0 10px var(--violet);
}

.task-card-desc {
    font-size: 0.8rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 0.7rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-card-project {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 0.5px;
    padding: 0.3rem 0.5rem;
    background: rgba(168, 85, 247, 0.08);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}

.task-card-project i {
    font-size: 0.65rem;
    text-shadow: 0 0 8px var(--violet);
}

.task-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.65rem;
    flex-wrap: wrap;
}

.task-deadline {
    color: var(--text-faint);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    letter-spacing: 0.3px;
}

.task-deadline.overdue {
    color: var(--rose);
    font-weight: 600;
    text-shadow: 0 0 8px var(--rose);
}

.task-deadline.overdue i {
    animation: pulse 1.5s ease-in-out infinite;
}

.task-priority-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    opacity: 0.8;
}

@media (max-width: 1024px) {
    .tasks-stats { grid-template-columns: repeat(2, 1fr); }
    .kanban-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .tasks-stats { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .kanban-board { grid-template-columns: 1fr; }
    .kanban-column { min-height: auto; }
}
@media (max-width: 480px) {
    .tasks-stats { grid-template-columns: 1fr; }
}

/* ============================================
   ПРОФИЛЬ — ID-ПАСПОРТ ЭКИПАЖА
   ============================================ */

.profile-page {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

/* ============================================
   PASSPORT (ID-КАРТОЧКА)
   ============================================ */

.passport {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.85), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 28px;
    padding: 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(20px);
    animation: fadeUp 0.8s var(--ease-out) both;
}

.passport::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
}

.passport::after {
    content: '';
    position: absolute;
    top: -50%; right: -10%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15), transparent 70%);
    pointer-events: none;
    filter: blur(60px);
}

/* Верхняя панель */
.passport-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: rgba(8, 4, 26, 0.5);
    border-bottom: 1px solid var(--line);
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.passport-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--lime);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.passport-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 10px var(--lime);
    animation: pulse 2s ease-in-out infinite;
}

.passport-id {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--violet-soft);
    letter-spacing: 2px;
    text-shadow: 0 0 10px var(--violet);
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
}

.passport-actions {
    display: flex;
    gap: 0.4rem;
}

.passport-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--ease);
    text-decoration: none;
    font-size: 0.85rem;
}

.passport-action-btn:hover {
    color: var(--violet-soft);
    border-color: var(--violet);
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}

.passport-action-btn.danger:hover {
    color: var(--rose);
    border-color: var(--rose);
    background: rgba(251, 113, 133, 0.1);
    box-shadow: 0 0 20px rgba(251, 113, 133, 0.3);
}

/* Основное тело */
.passport-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2rem;
    align-items: center;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

/* Аватар */
.passport-avatar-zone {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.passport-avatar-wrapper {
    position: relative;
    width: 140px;
    height: 140px;
}

.passport-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--void);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.passport-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.passport-avatar .avatar-letter {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--violet-soft), var(--fuchsia));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Рамки аватара (пока одна — default) */
.passport-avatar.frame-default {
    border: 3px solid var(--violet);
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.5), inset 0 0 30px rgba(168, 85, 247, 0.15);
}

.passport-avatar-wrapper::before, .passport-avatar-wrapper::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

.passport-avatar-wrapper::before {
    width: 165px;
    height: 165px;
    border: 1px dashed rgba(168, 85, 247, 0.3);
    animation: spin 30s linear infinite;
}

.passport-avatar-wrapper::after {
    width: 185px;
    height: 185px;
    border: 1px solid rgba(232, 121, 249, 0.2);
    animation: spin 45s linear infinite reverse;
}

.avatar-orbit-dot {
    position: absolute;
    top: 50%; left: 50%;
    width: 165px; height: 165px;
    margin: -82.5px 0 0 -82.5px;
    border-radius: 50%;
    animation: spin 30s linear infinite;
    pointer-events: none;
}

.avatar-orbit-dot::before {
    content: '';
    position: absolute;
    top: -4px; left: 50%;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--fuchsia);
    box-shadow: 0 0 15px var(--fuchsia), 0 0 30px var(--fuchsia);
}

/* Нашивка ранга под аватаром */
.passport-rank-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    color: var(--violet-soft);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.3);
    position: relative;
    z-index: 3;
}

.passport-rank-badge.rank-cadet { border-color: rgba(184, 169, 224, 0.4); color: var(--text-dim); }
.passport-rank-badge.rank-intern { border-color: rgba(34, 211, 238, 0.4); color: var(--cyan); background: rgba(34, 211, 238, 0.1); }
.passport-rank-badge.rank-operator { border-color: rgba(168, 85, 247, 0.4); color: var(--violet-soft); }
.passport-rank-badge.rank-senior { border-color: rgba(232, 121, 249, 0.4); color: var(--fuchsia); background: rgba(232, 121, 249, 0.1); }
.passport-rank-badge.rank-captain { border-color: rgba(163, 230, 53, 0.4); color: var(--lime); background: rgba(163, 230, 53, 0.1); }
.passport-rank-badge.rank-commander { border-color: rgba(251, 191, 36, 0.4); color: var(--amber); background: rgba(251, 191, 36, 0.1); }
.passport-rank-badge.rank-admiral { border-color: rgba(251, 191, 36, 0.6); color: var(--amber); background: rgba(251, 191, 36, 0.15); animation: tagPulse 2s ease-in-out infinite; }

.rank-icon { font-size: 0.9rem; }

/* Информация */
.passport-info {
    min-width: 0;
}

.passport-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.3rem;
}

.passport-username {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 700;
    background: linear-gradient(135deg, #fff, var(--violet-soft));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.6rem;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.passport-rank {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--violet-soft);
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.passport-rank-icon { font-size: 1rem; }
.passport-rank-code { color: var(--text-faint); font-size: 0.75rem; }

.passport-bio {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
    padding-left: 1rem;
    border-left: 2px solid var(--line-strong);
    margin-bottom: 1.2rem;
}

.passport-bio-empty {
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.passport-bio-empty i {
    color: var(--violet);
    font-size: 0.8rem;
}

/* Данные */
.passport-data {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-bottom: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.passport-data-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}

.passport-data-item i {
    color: var(--violet);
    font-size: 0.8rem;
    text-shadow: 0 0 8px var(--violet);
}

.passport-data-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.passport-data-value {
    color: var(--text);
    font-weight: 500;
}

/* Контакты */
.passport-contacts {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.passport-contacts .contact-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    transition: all 0.3s var(--ease);
    text-decoration: none;
    font-size: 0.9rem;
}

.passport-contacts .contact-btn:hover {
    color: var(--violet-soft);
    border-color: var(--violet);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}

/* Прогресс до ранга */
.passport-progress {
    padding: 1.5rem 2rem;
    background: rgba(8, 4, 26, 0.5);
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 1;
}

.passport-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.passport-progress-title {
    color: var(--violet-soft);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: 1px;
}

.passport-progress-title i {
    color: var(--violet);
    text-shadow: 0 0 8px var(--violet);
}

.passport-progress-xp { color: var(--text-dim); }

.passport-progress-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}

.passport-progress-next {
    color: var(--violet-soft);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.rank-icon-small { font-size: 0.85rem; }

/* Стат-карточки */
.passport-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    animation: fadeUp 0.8s 0.1s var(--ease-out) both;
}

.passport-stat {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.2rem 1rem;
    text-align: center;
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

.passport-stat::before {
    content: '';
    position: absolute;
    top: 0; left: 50%; transform: translateX(-50%);
    width: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--violet), transparent);
    transition: width 0.4s var(--ease);
}

.passport-stat:hover::before { width: 80%; box-shadow: 0 0 15px var(--violet); }
.passport-stat:hover {
    border-color: var(--violet);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.15);
}

/* Нашивки (медали) */
.badges-info {
    display: flex;
    gap: 0.8rem;
    padding: 1rem 1.2rem;
    background: rgba(168, 85, 247, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 14px;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.badges-info i {
    color: var(--violet-soft);
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
    text-shadow: 0 0 10px var(--violet);
}

.badges-info p {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

.badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.8rem;
    margin-bottom: 1.5rem;
}

.badge-medal {
    background: var(--void);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.2rem 0.9rem;
    text-align: center;
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

.badge-medal.unlocked {
    border-color: rgba(163, 230, 53, 0.3);
    background: linear-gradient(160deg, rgba(163, 230, 53, 0.05), rgba(8, 4, 26, 0.8));
}

.badge-medal.unlocked::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--lime);
    box-shadow: 0 0 15px var(--lime);
}

.badge-medal.locked {
    opacity: 0.4;
    filter: grayscale(1);
}

.badge-medal:hover { transform: translateY(-3px); }
.badge-medal.unlocked:hover {
    border-color: var(--lime);
    box-shadow: 0 0 30px rgba(163, 230, 53, 0.2);
}

.badge-medal-icon {
    font-size: 2rem;
    margin-bottom: 0.6rem;
    display: block;
    line-height: 1;
    filter: drop-shadow(0 0 10px currentColor);
}

.badge-medal-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
    line-height: 1.3;
    font-family: var(--font-display);
}

.badge-medal-desc {
    font-size: 0.7rem;
    color: var(--text-faint);
    font-family: var(--font-mono);
    line-height: 1.4;
    margin-bottom: 0.5rem;
    min-height: 2.4em;
}

.badge-medal-reward {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    background: rgba(168, 85, 247, 0.1);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--violet-soft);
    letter-spacing: 0.5px;
}

.badge-medal.unlocked .badge-medal-reward {
    background: rgba(163, 230, 53, 0.1);
    color: var(--lime);
}

/* Журнал (logbook) */
.logbook {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
    padding-left: 1.5rem;
}

.logbook::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, transparent, var(--violet), var(--fuchsia), transparent);
    opacity: 0.4;
    border-radius: 2px;
}

.logbook-entry {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 1rem;
    align-items: center;
    padding: 0.9rem 1.2rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 12px;
    position: relative;
    transition: all 0.3s var(--ease);
}

.logbook-entry::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--violet);
    border: 2px solid var(--void);
    box-shadow: 0 0 0 2px var(--violet), 0 0 15px var(--violet);
    z-index: 2;
}

.logbook-entry:hover {
    border-color: var(--violet);
    background: rgba(40, 22, 89, 0.4);
    transform: translateX(4px);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}

.logbook-time {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.logbook-time i {
    color: var(--violet);
    font-size: 0.7rem;
}

.logbook-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--violet-soft);
    font-size: 0.8rem;
    text-shadow: 0 0 10px var(--violet);
    flex-shrink: 0;
}

.logbook-text {
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Адаптив */
@media (max-width: 1024px) {
    .passport-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .passport-top {
        padding: 0.8rem 1rem;
        justify-content: center;
        text-align: center;
    }
    .passport-body {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 1.5rem;
        gap: 1.5rem;
    }
    .passport-avatar-zone { margin: 0 auto; }
    .passport-data { justify-content: center; }
    .passport-contacts { justify-content: center; }
    .passport-progress { padding: 1.2rem 1.5rem; }
    .passport-progress-header, .passport-progress-footer { flex-direction: column; align-items: flex-start; }
    .passport-stats { grid-template-columns: repeat(2, 1fr); }
    .logbook-entry { grid-template-columns: auto 1fr; gap: 0.6rem; }
    .logbook-time { grid-column: 1 / -1; }
    .logbook-entry::before { left: -1rem; }
}

@media (max-width: 480px) {
    .passport-avatar-wrapper { width: 110px; height: 110px; }
    .passport-avatar-wrapper::before { width: 130px; height: 130px; }
    .passport-avatar-wrapper::after { width: 150px; height: 150px; }
    .avatar-orbit-dot { width: 130px; height: 130px; margin: -65px 0 0 -65px; }
    .passport-avatar .avatar-letter { font-size: 2.8rem; }
    .passport-username { font-size: 1.5rem; }
    .passport-stats { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .badges-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   РЕДАКТИРОВАНИЕ ПРОФИЛЯ (profile_edit.php)
   ============================================ */

.profile-edit-section {
    padding-bottom: 5rem;
}

.profile-edit-form {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    animation: fadeUp 0.8s var(--ease-out) both;
}

.edit-group {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s var(--ease);
}

.edit-group:hover {
    border-color: var(--line-strong);
}

.edit-group-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    border-bottom: 1px solid var(--line);
    position: relative;
}

.edit-group-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
    opacity: 0.8;
}

.edit-group-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: all 0.3s var(--ease);
}

.edit-group:hover .edit-group-icon {
    transform: scale(1.05) rotate(-5deg);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
}

.edit-group-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
    margin-bottom: 0.2rem;
}

.edit-group-desc {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}

.edit-group-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.form-group {
    margin: 0;
}

.form-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
}

.form-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: all 0.3s var(--ease);
}

.form-input-wrap:focus-within {
    border-color: var(--violet);
    background: rgba(8, 4, 26, 0.85);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.3);
}

.form-input-wrap i {
    padding: 0 1rem;
    color: var(--violet-soft);
    font-size: 0.9rem;
    text-shadow: 0 0 10px var(--violet);
    flex-shrink: 0;
}

.form-input-wrap input {
    flex: 1;
    padding: 0.9rem 1rem 0.9rem 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 0.95rem;
}

.form-input-wrap input::placeholder {
    color: var(--text-faint);
}

.form-textarea {
    width: 100%;
    padding: 1rem;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 0.95rem;
    resize: vertical;
    min-height: 100px;
    transition: all 0.3s var(--ease);
}

.form-textarea:focus {
    outline: none;
    border-color: var(--violet);
    background: rgba(8, 4, 26, 0.85);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.3);
}

.form-textarea::placeholder {
    color: var(--text-faint);
}

/* Аватар */
.avatar-edit-wrap {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.avatar-edit-preview {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--violet-deep), var(--fuchsia));
    border: 3px solid var(--violet);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
    flex-shrink: 0;
}

.avatar-edit-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-edit-input {
    flex: 1;
    min-width: 250px;
}

.file-input {
    display: block;
    width: 100%;
    padding: 0.9rem 1rem;
    background: rgba(8, 4, 26, 0.6);
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    color: var(--text-dim);
    font-family: var(--font-main);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s var(--ease);
}

.file-input:hover {
    border-color: var(--violet);
    background: rgba(40, 22, 89, 0.3);
}

.file-input::file-selector-button {
    padding: 0.5rem 1rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid var(--violet);
    border-radius: 8px;
    color: var(--violet-soft);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    margin-right: 1rem;
    transition: all 0.3s var(--ease);
}

.file-input::file-selector-button:hover {
    background: rgba(168, 85, 247, 0.3);
    color: white;
}

.form-hint-left {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    margin-top: 0.5rem;
    letter-spacing: 0.5px;
}

/* Чекбокс */
.edit-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    cursor: pointer;
    padding: 1rem;
    background: rgba(8, 4, 26, 0.4);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: all 0.3s var(--ease);
}

.edit-checkbox:hover {
    border-color: var(--violet);
    background: rgba(40, 22, 89, 0.3);
}

.edit-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--violet);
    cursor: pointer;
    flex-shrink: 0;
}

.edit-checkbox span {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.edit-checkbox strong {
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
}

.edit-checkbox-hint {
    color: var(--text-faint);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.3px;
}

/* Действия */
.edit-actions {
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .edit-group-header {
        padding: 1rem 1.2rem;
    }
    .edit-group-icon {
        width: 42px;
        height: 42px;
        font-size: 1.2rem;
    }
    .edit-group-body {
        padding: 1.2rem;
    }
    .avatar-edit-wrap {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .edit-actions {
        flex-direction: column-reverse;
    }
    .edit-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* 2FA Настройки */
.twofa-status {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.5rem;
    border-radius: 16px;
    border: 1px solid;
    transition: all 0.3s var(--ease);
}

.twofa-status.enabled {
    background: rgba(163, 230, 53, 0.05);
    border-color: rgba(163, 230, 53, 0.4);
}

.twofa-status.disabled {
    background: rgba(251, 191, 36, 0.05);
    border-color: rgba(251, 191, 36, 0.4);
}

.twofa-status-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.twofa-status.enabled .twofa-status-icon {
    background: rgba(163, 230, 53, 0.15);
    color: var(--lime);
    box-shadow: 0 0 30px rgba(163, 230, 53, 0.3);
}

.twofa-status.disabled .twofa-status-icon {
    background: rgba(251, 191, 36, 0.15);
    color: var(--amber);
    box-shadow: 0 0 30px rgba(251, 191, 36, 0.3);
}

.twofa-status-text {
    flex: 1;
    min-width: 0;
}

.twofa-status-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
}

.twofa-status.enabled .twofa-status-title { color: var(--lime); }
.twofa-status.disabled .twofa-status-title { color: var(--amber); }

.twofa-status-desc {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
}

.twofa-info {
    display: flex;
    gap: 1rem;
    padding: 1.2rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.twofa-info > i {
    font-size: 1.3rem;
    color: var(--violet-soft);
    text-shadow: 0 0 15px var(--violet);
    flex-shrink: 0;
    margin-top: 2px;
}

.twofa-info strong {
    display: block;
    color: var(--text);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.twofa-info ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.twofa-info ul li {
    color: var(--text-dim);
    font-size: 0.85rem;
    line-height: 1.5;
    padding-left: 1.2rem;
    position: relative;
}

.twofa-info ul li::before {
    content: '›';
    position: absolute;
    left: 0.3rem;
    color: var(--violet);
    font-weight: 700;
    font-size: 1.1rem;
    text-shadow: 0 0 8px var(--violet);
}

/* ============================================
   КАСТОМИЗАЦИЯ ПРОФИЛЯ
   ============================================ */

.customize-section { padding-bottom: 5rem; }

.customize-preview {
    max-width: 800px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.customize-preview-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.customize-preview-card {
    padding: 2rem;
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s var(--ease);
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
}

.customize-preview-name {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    margin: 1rem 0 0.4rem;
    letter-spacing: -0.5px;
    transition: all 0.3s var(--ease);
}

.customize-preview-level {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-faint);
    letter-spacing: 1px;
}

.customize-group {
    max-width: 800px;
    margin: 0 auto 2rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    animation: fadeUp 0.5s var(--ease-out) both;
}

.customize-group-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    border-bottom: 1px solid var(--line);
    position: relative;
}

.customize-group-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
}

.customize-group-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.customize-group-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.2rem;
}

.customize-group-desc {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}

.customize-group-body { padding: 1.5rem; }

.customize-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1rem;
}

.customize-grid-colors {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.customize-item {
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    text-align: center;
    font-family: inherit;
    color: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: none;
    outline: none;
}

.customize-item:hover:not(.locked) {
    border-color: var(--violet);
    background: rgba(40, 22, 89, 0.5);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.2);
}

.customize-item.active {
    border-color: var(--violet);
    background: rgba(40, 22, 89, 0.6);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.4);
}

.customize-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.7);
}

.customize-item-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 70px;
}

.customize-item-info { width: 100%; }

.customize-item-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.3rem;
}

.customize-item-req {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--rose);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.customize-item-active {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--lime);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.customize-item-hint {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.customize-color {
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.6rem;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    box-shadow: none;
    outline: none;
}

.customize-color:hover:not(.locked) {
    border-color: var(--violet);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.3);
}

.customize-color.active {
    border-color: var(--violet);
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.5);
}

.customize-color.active::after {
    content: '✓';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: var(--violet);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

.customize-color.locked {
    cursor: not-allowed;
    opacity: 0.5;
}

.customize-color-preview {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.3);
}

.customize-color-lock {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    color: var(--rose);
    font-size: 1rem;
}

.bg-preview {
    width: 100%;
    height: 60px;
    border-radius: 8px;
    border: 1px solid var(--line);
}

.customize-actions {
    max-width: 800px;
    margin: 2rem auto 0;
    display: flex;
    gap: 0.8rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ============================================
   РАМКИ АВАТАРА
   ============================================ */

.passport-avatar.frame-violet {
    border: 3px solid var(--violet);
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.5), inset 0 0 30px rgba(168, 85, 247, 0.15);
}

.passport-avatar.frame-cyan {
    border: 3px solid var(--cyan);
    box-shadow: 0 0 40px rgba(34, 211, 238, 0.5), inset 0 0 30px rgba(34, 211, 238, 0.15);
}

.passport-avatar.frame-magenta {
    border: 3px solid var(--fuchsia);
    box-shadow: 0 0 40px rgba(232, 121, 249, 0.5), inset 0 0 30px rgba(232, 121, 249, 0.15);
}

.passport-avatar.frame-gold {
    border: 3px solid var(--amber);
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.5), inset 0 0 30px rgba(251, 191, 36, 0.15);
}

.passport-avatar.frame-rainbow {
    border: 3px solid transparent;
    background: linear-gradient(var(--void), var(--void)) padding-box,
                linear-gradient(45deg, #a855f7, #e879f9, #22d3ee, #a3e635) border-box;
    box-shadow: 0 0 40px rgba(232, 121, 249, 0.5), 0 0 80px rgba(34, 211, 238, 0.3);
    animation: rainbowRotate 3s linear infinite;
}

@keyframes rainbowRotate {
    to { filter: hue-rotate(360deg); }
}

/* ============================================
   ЦВЕТА НИКА
   ============================================ */

.color-preview-violet {
    background: linear-gradient(135deg, #fff, #d8b4fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.color-preview-cyan {
    background: linear-gradient(135deg, #fff, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.color-preview-magenta {
    background: linear-gradient(135deg, #fff, #e879f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.color-preview-lime {
    background: linear-gradient(135deg, #fff, #a3e635);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.color-preview-rainbow {
    background: linear-gradient(90deg, #a855f7, #e879f9, #22d3ee, #a3e635, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: rainbowFlow 3s linear infinite;
}

@keyframes rainbowFlow {
    to { background-position: 200% 0; }
}

/* ============================================
   ФОНЫ ПРОФИЛЯ
   ============================================ */

.customize-preview-card.bg-cosmos,
.passport.bg-cosmos {
    background: radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.2), transparent 60%),
                linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
}

.customize-preview-card.bg-nebula,
.passport.bg-nebula {
    background: radial-gradient(circle at 20% 20%, rgba(232, 121, 249, 0.3), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(34, 211, 238, 0.2), transparent 50%),
                linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
}

.customize-preview-card.bg-galaxy,
.passport.bg-galaxy {
    background: radial-gradient(circle at 30% 40%, rgba(99, 102, 241, 0.3), transparent 60%),
                radial-gradient(circle at 70% 60%, rgba(232, 121, 249, 0.2), transparent 60%),
                linear-gradient(160deg, #0a0520, #1e0f45);
}

.customize-preview-card.bg-matrix,
.passport.bg-matrix {
    background-image: linear-gradient(rgba(34, 197, 94, 0.08) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(34, 197, 94, 0.08) 1px, transparent 1px),
                      linear-gradient(160deg, #030a05, #000000);
    background-size: 30px 30px, 30px 30px, 100% 100%;
}

.customize-preview-card.bg-aurora,
.passport.bg-aurora {
    background: radial-gradient(circle at 30% 20%, rgba(34, 211, 238, 0.25), transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(163, 230, 53, 0.2), transparent 50%),
                linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
}

.bg-preview.bg-cosmos {
    background: radial-gradient(circle at 30% 40%, rgba(168, 85, 247, 0.4), transparent 60%),
                linear-gradient(160deg, #1e0f45, #0a0520);
}

.bg-preview.bg-nebula {
    background: radial-gradient(circle at 20% 20%, rgba(232, 121, 249, 0.5), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(34, 211, 238, 0.4), transparent 50%),
                linear-gradient(160deg, #1e0f45, #0a0520);
}

.bg-preview.bg-galaxy {
    background: radial-gradient(circle at 30% 40%, rgba(99, 102, 241, 0.5), transparent 60%),
                radial-gradient(circle at 70% 60%, rgba(232, 121, 249, 0.4), transparent 60%),
                linear-gradient(160deg, #0a0520, #1e0f45);
}

.bg-preview.bg-matrix {
    background-image: linear-gradient(rgba(34, 197, 94, 0.3) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(34, 197, 94, 0.3) 1px, transparent 1px),
                      linear-gradient(160deg, #030a05, #000000);
    background-size: 15px 15px, 15px 15px, 100% 100%;
}

.bg-preview.bg-aurora {
    background: radial-gradient(circle at 30% 20%, rgba(34, 211, 238, 0.5), transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(163, 230, 53, 0.4), transparent 50%),
                linear-gradient(160deg, #1e0f45, #0a0520);
}

/* ============================================
   АДАПТИВ
   ============================================ */

@media (max-width: 768px) {
    .customize-group-header { padding: 1rem 1.2rem; }
    .customize-group-icon { width: 42px; height: 42px; font-size: 1.2rem; }
    .customize-group-body { padding: 1.2rem; }
    .customize-grid { grid-template-columns: repeat(2, 1fr); }
    .customize-grid-colors { grid-template-columns: repeat(4, 1fr); }
    .customize-actions { flex-direction: column-reverse; }
    .customize-actions .btn { width: 100%; justify-content: center; }
}

/* ============================================
   КАСТОМИЗАЦИЯ — МАГАЗИН
   ============================================ */

.customize-wallet {
    max-width: 900px;
    margin: 0 auto 2rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.customize-wallet::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--violet), var(--fuchsia), var(--violet), transparent);
    background-size: 200% 100%;
    animation: borderFlow 4s linear infinite;
}

.wallet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.wallet-item i {
    font-size: 1.5rem;
    color: var(--violet-soft);
    text-shadow: 0 0 15px var(--violet);
}

.wallet-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.wallet-value {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, var(--violet-soft));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

/* ФИЛЬТРЫ */
.customize-filters {
    max-width: 900px;
    margin: 0 auto 2rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.filter-btn {
    padding: 0.5rem 1rem;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    border-radius: 20px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s var(--ease);
}

.filter-btn:hover {
    color: var(--violet-soft);
    border-color: var(--violet);
    background: rgba(168, 85, 247, 0.12);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.5);
}

/* КАРТОЧКА КАСТОМИЗАЦИИ */
.shop-item {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 1.2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.3s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.shop-item:hover {
    transform: translateY(-4px);
    border-color: var(--violet);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.2);
}

.shop-item.status-active {
    border-color: var(--lime);
    box-shadow: 0 0 25px rgba(163, 230, 53, 0.3);
}

.shop-item.status-locked-level,
.shop-item.status-locked-xp {
    opacity: 0.6;
}

.shop-item.status-locked-level:hover,
.shop-item.status-locked-xp:hover {
    transform: none;
    box-shadow: none;
}

/* Полоса редкости сверху */
.shop-item-rarity {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 2;
}

/* Редкость — свечение */
.shop-item.rarity-rare { box-shadow: 0 0 20px rgba(59, 130, 246, 0.2); }
.shop-item.rarity-epic { box-shadow: 0 0 20px rgba(168, 85, 247, 0.3); }
.shop-item.rarity-legendary { box-shadow: 0 0 25px rgba(251, 191, 36, 0.3); }
.shop-item.rarity-mythic { box-shadow: 0 0 30px rgba(239, 68, 68, 0.4); animation: mythicPulse 2s ease-in-out infinite; }

@keyframes mythicPulse {
    0%, 100% { box-shadow: 0 0 25px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 40px rgba(239, 68, 68, 0.6), 0 0 60px rgba(239, 68, 68, 0.3); }
}

/* Превью */
.shop-item-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
}

.customize-frame-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--void);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--violet-soft);
    position: relative;
}

.customize-frame-preview img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Рамки */
.customize-frame-preview.frame-violet { border: 3px solid var(--violet); box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }
.customize-frame-preview.frame-cyan { border: 3px solid var(--cyan); box-shadow: 0 0 15px rgba(34, 211, 238, 0.5); }
.customize-frame-preview.frame-magenta { border: 3px solid var(--fuchsia); box-shadow: 0 0 15px rgba(232, 121, 249, 0.5); }
.customize-frame-preview.frame-lime { border: 3px solid var(--lime); box-shadow: 0 0 15px rgba(163, 230, 53, 0.5); }
.customize-frame-preview.frame-gold { border: 3px solid var(--amber); box-shadow: 0 0 15px rgba(251, 191, 36, 0.5); }
.customize-frame-preview.frame-rose { border: 3px solid var(--rose); box-shadow: 0 0 15px rgba(251, 113, 133, 0.5); }
.customize-frame-preview.frame-indigo { border: 3px solid var(--indigo); box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); }
.customize-frame-preview.frame-emerald { border: 3px solid #10b981; box-shadow: 0 0 15px rgba(16, 185, 129, 0.5); }
.customize-frame-preview.frame-amber { border: 3px solid var(--amber); box-shadow: 0 0 15px rgba(251, 191, 36, 0.5); }
.customize-frame-preview.frame-rainbow {
    border: 3px solid transparent;
    background: linear-gradient(var(--void), var(--void)) padding-box,
                linear-gradient(45deg, #a855f7, #e879f9, #22d3ee, #a3e635) border-box;
    box-shadow: 0 0 20px rgba(232, 121, 249, 0.5);
    animation: rainbowRotate 3s linear infinite;
}
.customize-frame-preview.frame-plasma {
    border: 3px solid #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.6);
    animation: plasmaPulse 1.5s ease-in-out infinite;
}
@keyframes plasmaPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 30px rgba(239, 68, 68, 1), 0 0 50px rgba(251, 191, 36, 0.5); }
}
.customize-frame-preview.frame-phantom {
    border: 3px solid rgba(167, 139, 250, 0.6);
    box-shadow: 0 0 25px rgba(167, 139, 250, 0.7);
    animation: phantomFloat 3s ease-in-out infinite;
}
@keyframes phantomFloat {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50% { transform: translateY(-3px); opacity: 0.8; }
}
.customize-frame-preview.frame-halloween {
    border: 3px solid #f97316;
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.6);
    animation: halloweenPulse 2s ease-in-out infinite;
}
@keyframes halloweenPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(249, 115, 22, 0.5); }
    50% { box-shadow: 0 0 30px rgba(249, 115, 22, 0.9), 0 0 50px rgba(139, 69, 19, 0.5); }
}
.customize-frame-preview.frame-winter {
    border: 3px solid #93c5fd;
    box-shadow: 0 0 20px rgba(147, 197, 253, 0.6);
}
.customize-frame-preview.frame-cosmic {
    border: 3px solid #7c3aed;
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.7);
    animation: cosmicPulse 3s ease-in-out infinite;
}
@keyframes cosmicPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.5); }
    50% { box-shadow: 0 0 50px rgba(124, 58, 237, 1), 0 0 80px rgba(232, 121, 249, 0.6); }
}

@keyframes rainbowRotate {
    to { filter: hue-rotate(360deg); }
}

/* Цвет превью (для цветов ника) */
.shop-item-preview-color {
    min-height: 60px;
}

.color-preview-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4), 0 0 15px rgba(168, 85, 247, 0.3);
}

/* Инфо */
.shop-item-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.shop-item-name {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

.shop-item-rarity-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Статусы */
.shop-item-status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 0.4rem 0.6rem;
    border-radius: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.shop-item-status.active {
    background: rgba(163, 230, 53, 0.15);
    color: var(--lime);
    border: 1px solid rgba(163, 230, 53, 0.4);
}

.shop-item-status.locked {
    background: rgba(251, 113, 133, 0.1);
    color: var(--rose);
    border: 1px solid rgba(251, 113, 133, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Кнопки */
.shop-item-action {
    display: block;
}

.btn-buy, .btn-equip {
    width: 100%;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.btn-buy {
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
}

.btn-buy:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(168, 85, 247, 0.7);
}

.btn-equip {
    background: rgba(163, 230, 53, 0.15);
    color: var(--lime);
    border: 1px solid rgba(163, 230, 53, 0.4);
}

.btn-equip:hover {
    background: rgba(163, 230, 53, 0.25);
    box-shadow: 0 0 20px rgba(163, 230, 53, 0.5);
}

/* Титлы */
.shop-item-title .shop-item-info {
    gap: 0.6rem;
}

.shop-item-title .shop-item-name {
    font-size: 1rem;
    padding: 0.5rem;
    background: rgba(8, 4, 26, 0.5);
    border-radius: 10px;
}

/* Адаптив */
@media (max-width: 1024px) {
    .customize-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

@media (max-width: 768px) {
    .customize-wallet { grid-template-columns: 1fr; }
    .customize-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.8rem; }
    .filter-btn { flex-shrink: 0; font-size: 0.65rem; padding: 0.4rem 0.8rem; }
    .customize-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
    .shop-item { padding: 1rem 0.7rem; }
    .shop-item-name { font-size: 0.8rem; }
}

@media (max-width: 480px) {
    .customize-grid { grid-template-columns: 1fr; }
}

/* ============================================
   ТИТУЛЫ В ПРОФИЛЕ
   ============================================ */

.passport-title-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.8rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 1px;
    margin-bottom: 0.6rem;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.15);
}

.passport-title-inline i {
    color: var(--violet-soft);
    font-size: 0.7rem;
    text-shadow: 0 0 10px var(--violet);
}

/* Радужный титул */
.title-rainbow {
    background: linear-gradient(90deg, #a855f7, #e879f9, #22d3ee, #a3e635, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: rainbowFlow 3s linear infinite;
    font-weight: 700;
}

/* Голографический титул */
.title-holo {
    background: linear-gradient(135deg, #c084fc, #22d3ee, #e879f9, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 300% 300%;
    animation: holoFlow 4s ease infinite;
    font-weight: 700;
}

@keyframes holoFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Рамка титула меняется в зависимости от превью-цвета */
.passport-title-inline:has(.title-rainbow) {
    border-color: rgba(232, 121, 249, 0.6);
    animation: rainbowBorder 3s linear infinite;
}
@keyframes rainbowBorder {
    to { filter: hue-rotate(360deg); }
}

.passport-title-inline:has(.title-holo) {
    border-color: rgba(192, 132, 252, 0.6);
    box-shadow: 0 0 25px rgba(192, 132, 252, 0.4);
}

/* ============================================
   ДОПОЛНЕНИЯ: ЦВЕТА НИКА (color-preview-*)
   ============================================ */

.color-preview-gold {
    background: linear-gradient(135deg, #fff, #fbbf24, #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6));
}

.color-preview-silver {
    background: linear-gradient(135deg, #fff, #cbd5e1, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(203, 213, 225, 0.6));
}

.color-preview-sunset {
    background: linear-gradient(90deg, #fbbf24, #fb7185, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: rainbowFlow 4s linear infinite;
    filter: drop-shadow(0 0 10px rgba(251, 113, 133, 0.6));
}

.color-preview-ocean {
    background: linear-gradient(90deg, #22d3ee, #0ea5e9, #0891b2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: rainbowFlow 5s linear infinite;
    filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.6));
}

.color-preview-fire {
    background: linear-gradient(90deg, #fbbf24, #ef4444, #dc2626);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: rainbowFlow 3s linear infinite;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.7));
}

.color-preview-forest {
    background: linear-gradient(90deg, #a3e635, #16a34a, #065f46);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: rainbowFlow 5s linear infinite;
    filter: drop-shadow(0 0 10px rgba(22, 163, 74, 0.6));
}

.color-preview-neon {
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow:
        0 0 5px #fff,
        0 0 10px #e879f9,
        0 0 20px #e879f9,
        0 0 40px #a855f7;
}

.color-preview-pulse {
    color: #a855f7;
    text-shadow:
        0 0 8px #a855f7,
        0 0 16px #a855f7,
        0 0 32px #e879f9;
    animation: colorPulse 1.5s ease-in-out infinite;
}

@keyframes colorPulse {
    0%, 100% {
        text-shadow:
            0 0 8px #a855f7,
            0 0 16px #a855f7,
            0 0 32px #e879f9;
        opacity: 1;
    }
    50% {
        text-shadow:
            0 0 12px #e879f9,
            0 0 24px #e879f9,
            0 0 48px #a855f7;
        opacity: 0.85;
    }
}

.color-preview-glitch {
    color: #22d3ee;
    text-shadow:
        2px 0 #e879f9,
        -2px 0 #a3e635;
    animation: glitchShift 0.4s steps(2) infinite;
}

@keyframes glitchShift {
    0%   { text-shadow: 2px 0 #e879f9, -2px 0 #a3e635; }
    25%  { text-shadow: -2px 0 #22d3ee, 2px 0 #e879f9; }
    50%  { text-shadow: 2px 2px #a3e635, -2px -2px #22d3ee; }
    75%  { text-shadow: -2px 0 #e879f9, 2px 0 #a3e635; }
    100% { text-shadow: 2px 0 #e879f9, -2px 0 #a3e635; }
}

.color-preview-holo {
    background: linear-gradient(135deg, #c084fc, #22d3ee, #e879f9, #a3e635, #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 300% 300%;
    animation: holoFlow 4s ease infinite;
    filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.7));
}

/* ============================================
   ДОПОЛНЕНИЯ: ФОНЫ ПРОФИЛЯ (bg-*)
   ============================================ */

/* 📐 Сетка */
.passport.bg-grid,
.customize-preview-card.bg-grid {
    background-image:
        linear-gradient(rgba(168, 85, 247, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.12) 1px, transparent 1px),
        linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    background-size: 40px 40px, 40px 40px, 100% 100%;
}

.bg-preview.bg-grid {
    background-image:
        linear-gradient(rgba(168, 85, 247, 0.35) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.35) 1px, transparent 1px),
        linear-gradient(160deg, #1e0f45, #0a0520);
    background-size: 20px 20px, 20px 20px, 100% 100%;
}

/* ⚫ Точки */
.passport.bg-dots,
.customize-preview-card.bg-dots {
    background-image:
        radial-gradient(circle, rgba(192, 132, 252, 0.25) 1.5px, transparent 2px),
        linear-gradient(160deg, rgba(30, 15, 69, 0.9), rgba(23, 10, 53, 0.95));
    background-size: 24px 24px, 100% 100%;
}

.bg-preview.bg-dots {
    background-image:
        radial-gradient(circle, rgba(192, 132, 252, 0.7) 1.5px, transparent 2px),
        linear-gradient(160deg, #1e0f45, #0a0520);
    background-size: 14px 14px, 100% 100%;
}

/* ⬡ Гексагоны */
.passport.bg-hexagons,
.customize-preview-card.bg-hexagons {
    background-color: rgba(23, 10, 53, 0.95);
    background-image:
        radial-gradient(circle at 50% 0, rgba(34, 211, 238, 0.15), transparent 60%),
        repeating-linear-gradient(60deg, rgba(34, 211, 238, 0.08) 0, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 30px),
        repeating-linear-gradient(-60deg, rgba(34, 211, 238, 0.08) 0, rgba(34, 211, 238, 0.08) 1px, transparent 1px, transparent 30px);
}

.bg-preview.bg-hexagons {
    background-color: #1e0f45;
    background-image:
        repeating-linear-gradient(60deg, rgba(34, 211, 238, 0.4) 0, rgba(34, 211, 238, 0.4) 1px, transparent 1px, transparent 15px),
        repeating-linear-gradient(-60deg, rgba(34, 211, 238, 0.4) 0, rgba(34, 211, 238, 0.4) 1px, transparent 1px, transparent 15px);
}

/* 🌊 Подводный мир */
.passport.bg-ocean,
.customize-preview-card.bg-ocean {
    background: radial-gradient(circle at 30% 20%, rgba(34, 211, 238, 0.25), transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(8, 145, 178, 0.3), transparent 50%),
                linear-gradient(180deg, #0a2540, #041428);
}

.bg-preview.bg-ocean {
    background: radial-gradient(circle at 30% 20%, rgba(34, 211, 238, 0.5), transparent 50%),
                radial-gradient(circle at 70% 80%, rgba(8, 145, 178, 0.6), transparent 50%),
                linear-gradient(180deg, #0a2540, #041428);
}

/* 🏙️ Город */
.passport.bg-city,
.customize-preview-card.bg-city {
    background:
        linear-gradient(180deg, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
        repeating-linear-gradient(90deg,
            rgba(168, 85, 247, 0.08) 0px, rgba(168, 85, 247, 0.08) 2px,
            transparent 2px, transparent 20px,
            rgba(232, 121, 249, 0.05) 20px, rgba(232, 121, 249, 0.05) 22px,
            transparent 22px, transparent 40px),
        linear-gradient(180deg, #1a0b33, #0a0520);
}

.bg-preview.bg-city {
    background:
        linear-gradient(180deg, rgba(236, 72, 153, 0.4) 0%, transparent 50%),
        repeating-linear-gradient(90deg,
            rgba(168, 85, 247, 0.3) 0px, rgba(168, 85, 247, 0.3) 2px,
            transparent 2px, transparent 10px,
            rgba(232, 121, 249, 0.2) 10px, rgba(232, 121, 249, 0.2) 12px,
            transparent 12px, transparent 20px),
        linear-gradient(180deg, #1a0b33, #0a0520);
}

/* 🌲 Природа */
.passport.bg-forest,
.customize-preview-card.bg-forest {
    background: radial-gradient(circle at 50% 100%, rgba(22, 163, 74, 0.25), transparent 60%),
                radial-gradient(circle at 20% 30%, rgba(163, 230, 53, 0.1), transparent 50%),
                linear-gradient(160deg, #071a0d, #04110a);
}

.bg-preview.bg-forest {
    background: radial-gradient(circle at 50% 100%, rgba(22, 163, 74, 0.6), transparent 60%),
                radial-gradient(circle at 20% 30%, rgba(163, 230, 53, 0.4), transparent 50%),
                linear-gradient(160deg, #071a0d, #04110a);
}

/* ⭐ Звёздное небо */
.passport.bg-stars,
.customize-preview-card.bg-stars {
    background-image:
        radial-gradient(1.5px 1.5px at 15% 25%, #fff, transparent),
        radial-gradient(1px 1px at 45% 65%, #fbbf24, transparent),
        radial-gradient(2px 2px at 75% 15%, #fff, transparent),
        radial-gradient(1px 1px at 30% 85%, #fbbf24, transparent),
        radial-gradient(1.5px 1.5px at 88% 55%, #fff, transparent),
        radial-gradient(1px 1px at 5% 45%, #fff, transparent),
        radial-gradient(160deg, #0a0618, #03010a);
    background-size: 200px 200px, 180px 180px, 220px 220px, 160px 160px, 240px 240px, 200px 200px, 100% 100%;
    animation: starTwinkle 6s ease-in-out infinite;
}

.bg-preview.bg-stars {
    background-image:
        radial-gradient(1.5px 1.5px at 15% 25%, #fff, transparent),
        radial-gradient(1px 1px at 45% 65%, #fbbf24, transparent),
        radial-gradient(2px 2px at 75% 15%, #fff, transparent),
        radial-gradient(1px 1px at 30% 85%, #fbbf24, transparent),
        radial-gradient(1.5px 1.5px at 88% 55%, #fff, transparent),
        radial-gradient(1px 1px at 5% 45%, #fff, transparent),
        radial-gradient(160deg, #0a0618, #03010a);
    background-size: 100px 100px, 90px 90px, 110px 110px, 80px 80px, 120px 120px, 100px 100px, 100% 100%;
}

@keyframes starTwinkle {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.3); }
}

/* ☄️ Кометы */
.passport.bg-comets,
.customize-preview-card.bg-comets {
    background-image:
        linear-gradient(115deg, transparent 40%, rgba(244, 114, 182, 0.6) 48%, rgba(255, 255, 255, 0.9) 50%, transparent 52%),
        linear-gradient(115deg, transparent 30%, rgba(168, 85, 247, 0.4) 38%, transparent 42%),
        radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 70% 60%, #fff, transparent),
        radial-gradient(160deg, #0a0618, #03010a);
    background-size: 400px 400px, 300px 300px, 150px 150px, 200px 200px, 100% 100%;
    background-position: 0 0, 100px 100px, 0 0, 0 0, 0 0;
    animation: cometDrift 12s linear infinite;
}

.bg-preview.bg-comets {
    background-image:
        linear-gradient(115deg, transparent 40%, rgba(244, 114, 182, 0.8) 48%, #fff 50%, transparent 52%),
        radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
        radial-gradient(160deg, #0a0618, #03010a);
    background-size: 150px 150px, 80px 80px, 100% 100%;
    animation: cometDrift 6s linear infinite;
}

@keyframes cometDrift {
    from { background-position: 0 0, 100px 100px, 0 0, 0 0, 0 0; }
    to   { background-position: 400px 400px, 500px 500px, 0 0, 0 0, 0 0; }
}

/* ❄️ Снег */
.passport.bg-snow,
.customize-preview-card.bg-snow {
    background-image:
        radial-gradient(2px 2px at 10% 20%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 40% 60%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(3px 3px at 70% 30%, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(2px 2px at 90% 80%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 25% 90%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(160deg, #0f1a2e, #060a18);
    background-size: 220px 220px, 200px 200px, 260px 260px, 240px 240px, 280px 280px, 100% 100%;
    animation: snowFall 20s linear infinite;
}

.bg-preview.bg-snow {
    background-image:
        radial-gradient(2px 2px at 10% 20%, #fff, transparent),
        radial-gradient(2px 2px at 40% 60%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(3px 3px at 70% 30%, #fff, transparent),
        radial-gradient(2px 2px at 90% 80%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(160deg, #0f1a2e, #060a18);
    background-size: 110px 110px, 100px 100px, 130px 130px, 120px 120px, 100% 100%;
    animation: snowFall 10s linear infinite;
}

@keyframes snowFall {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
    to   { background-position: 0 220px, 0 200px, 0 260px, 0 240px, 0 280px, 0 0; }
}

/* 🕳️ Пустота */
.passport.bg-void,
.customize-preview-card.bg-void {
    background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.08), transparent 40%),
                radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 1), #000000 70%);
    position: relative;
}

.passport.bg-void::before,
.customize-preview-card.bg-void::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(168, 85, 247, 0.15) 70%, transparent 100%);
    animation: voidPulse 6s ease-in-out infinite;
    pointer-events: none;
}

.bg-preview.bg-void {
    background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.2), transparent 40%),
                #000000;
}

@keyframes voidPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 0.8; transform: scale(1.05); }
}

/* ============================================
   КОШЕЛЁК — 4 колонки
   ============================================ */
.customize-wallet-4 {
    grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
    .customize-wallet-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Индикатор "нет средств" — приглушаем */
.shop-item.status-locked-currency .btn-buy,
.shop-item.status-locked-currency .shop-item-status {
    opacity: 0.6;
}

/* ============================================
   ЕЖЕДНЕВНАЯ НАГРАДА — ВИДЖЕТ
   ============================================ */

.daily-reward-section {
    padding: 1.5rem 0;
}

.daily-widget {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 2rem;
    align-items: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.85), rgba(23, 10, 53, 0.95));
    border: 1px solid var(--line-strong);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    transition: all 0.4s var(--ease);
}

.daily-widget.can-claim {
    border-color: var(--violet);
    box-shadow: 0 0 40px rgba(168, 85, 247, 0.3), 0 0 80px rgba(232, 121, 249, 0.15);
    animation: dailyPulse 3s ease-in-out infinite;
}

@keyframes dailyPulse {
    0%, 100% { box-shadow: 0 0 40px rgba(168, 85, 247, 0.3), 0 0 80px rgba(232, 121, 249, 0.15); }
    50%      { box-shadow: 0 0 60px rgba(168, 85, 247, 0.5), 0 0 120px rgba(232, 121, 249, 0.3); }
}

.daily-widget.can-claim::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    padding: 1px;
    background: linear-gradient(135deg, var(--violet), var(--fuchsia), var(--violet));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    background-size: 300% 300%;
    animation: gradientFlow 4s linear infinite;
    opacity: 0.8;
    pointer-events: none;
}

.daily-widget-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.daily-fire {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(239, 68, 68, 0.15));
    border: 1px solid rgba(251, 191, 36, 0.4);
    border-radius: 16px;
    box-shadow: 0 0 25px rgba(251, 191, 36, 0.25);
    animation: fireFlicker 2s ease-in-out infinite;
}

@keyframes fireFlicker {
    0%, 100% { box-shadow: 0 0 25px rgba(251, 191, 36, 0.25); }
    50%      { box-shadow: 0 0 40px rgba(251, 191, 36, 0.5), 0 0 60px rgba(239, 68, 68, 0.3); }
}

.daily-fire-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.8));
}

.daily-streak-num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fbbf24, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.daily-widget-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
    letter-spacing: 0.2px;
}

.daily-widget-sub {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-dim);
    letter-spacing: 0.3px;
}

.daily-timer {
    color: var(--violet-soft);
    font-weight: 700;
    text-shadow: 0 0 10px var(--violet);
}

/* ─── Полоска 7 дней ─── */
.daily-days {
    display: flex;
    gap: 0.4rem;
}

.daily-day {
    width: 48px;
    height: 60px;
    border-radius: 12px;
    background: rgba(8, 4, 26, 0.6);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    transition: all 0.3s var(--ease);
    position: relative;
}

.daily-day-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 0 5px currentColor);
    transition: all 0.3s var(--ease);
}

.daily-day-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}

.daily-day.passed {
    background: linear-gradient(160deg, rgba(163, 230, 53, 0.08), rgba(8, 4, 26, 0.6));
    border-color: rgba(163, 230, 53, 0.4);
}

.daily-day.passed::after {
    content: '✓';
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: var(--lime);
    color: var(--void);
    border-radius: 50%;
    font-size: 0.6rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px var(--lime);
}

.daily-day.passed .daily-day-icon {
    filter: drop-shadow(0 0 8px var(--lime));
}

.daily-day.today {
    background: linear-gradient(160deg, rgba(168, 85, 247, 0.2), rgba(8, 4, 26, 0.6));
    border-color: var(--violet);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
    transform: scale(1.08);
    animation: todayBounce 2s ease-in-out infinite;
}

@keyframes todayBounce {
    0%, 100% { transform: scale(1.08); }
    50%      { transform: scale(1.15); }
}

.daily-day.today .daily-day-icon {
    filter: drop-shadow(0 0 12px var(--violet));
}

.daily-day.today .daily-day-label {
    color: var(--violet-soft);
}

.daily-claim-btn {
    padding: 0.9rem 1.6rem;
    font-size: 0.8rem;
}

/* ─── Адаптив ─── */
@media (max-width: 900px) {
    .daily-widget {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.2rem;
    }
    .daily-days {
        overflow-x: auto;
        padding-bottom: 0.3rem;
        scrollbar-width: none;
    }
    .daily-days::-webkit-scrollbar { display: none; }
    .daily-day { flex-shrink: 0; }
}

@media (max-width: 480px) {
    .daily-widget-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }
    .daily-fire {
        padding: 0.4rem 0.9rem;
    }
    .daily-streak-num { font-size: 1.2rem; }
    .daily-widget-title { font-size: 0.95rem; }
    .daily-day { width: 42px; height: 54px; }
}

/* ============================================
   ПОПАП ВЫДАЧИ НАГРАДЫ
   ============================================ */

.reward-popup {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
}

.reward-popup.active {
    display: flex;
    animation: popupFadeIn 0.3s ease;
}

@keyframes popupFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.reward-popup-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.2), rgba(0, 0, 0, 0.9) 70%);
    backdrop-filter: blur(8px);
}

.reward-popup-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
}

.reward-rays {
    position: absolute;
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(168, 85, 247, 0.3) 20deg, transparent 40deg,
        transparent 60deg, rgba(232, 121, 249, 0.3) 80deg, transparent 100deg,
        transparent 120deg, rgba(251, 191, 36, 0.25) 140deg, transparent 160deg,
        transparent 180deg, rgba(34, 211, 238, 0.25) 200deg, transparent 220deg,
        transparent 240deg, rgba(163, 230, 53, 0.25) 260deg, transparent 280deg,
        transparent 300deg, rgba(232, 121, 249, 0.3) 320deg, transparent 340deg,
        transparent 360deg
    );
    animation: raysRotate 12s linear infinite;
    pointer-events: none;
    opacity: 0.7;
}

@keyframes raysRotate {
    to { transform: rotate(360deg); }
}

.reward-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.reward-particle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: particleFly 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    box-shadow: 0 0 15px currentColor;
}

@keyframes particleFly {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.5);
    }
    100% {
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0);
        opacity: 0;
    }
}

/* ─── Карточка награды ─── */
.reward-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.98), rgba(23, 10, 53, 1));
    border: 2px solid var(--violet);
    border-radius: 32px;
    padding: 3rem 3rem 2.5rem;
    min-width: 380px;
    max-width: 90vw;
    text-align: center;
    position: relative;
    box-shadow:
        0 0 60px rgba(168, 85, 247, 0.6),
        0 0 120px rgba(232, 121, 249, 0.3),
        inset 0 0 60px rgba(168, 85, 247, 0.1);
    animation: cardFlyIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cardFlyIn {
    0% {
        transform: scale(0.3) rotateY(-180deg);
        opacity: 0;
    }
    60% {
        transform: scale(1.08) rotateY(10deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotateY(0);
    }
}

.reward-card.reward-legendary {
    border-color: var(--amber);
    box-shadow:
        0 0 60px rgba(251, 191, 36, 0.6),
        0 0 120px rgba(251, 191, 36, 0.3),
        inset 0 0 60px rgba(251, 191, 36, 0.1);
}

.reward-card.reward-mythic {
    border-color: var(--rose);
    box-shadow:
        0 0 80px rgba(239, 68, 68, 0.7),
        0 0 160px rgba(239, 68, 68, 0.4),
        inset 0 0 80px rgba(239, 68, 68, 0.15);
    animation: cardFlyIn 0.6s cubic-bezier(0.16, 1, 0.3, 1), mythicGlow 2s ease-in-out infinite 0.6s;
}

@keyframes mythicGlow {
    0%, 100% { box-shadow: 0 0 80px rgba(239, 68, 68, 0.7), 0 0 160px rgba(239, 68, 68, 0.4); }
    50%      { box-shadow: 0 0 100px rgba(239, 68, 68, 1), 0 0 200px rgba(251, 191, 36, 0.5); }
}

.reward-glow {
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background: radial-gradient(circle at 50% 30%, rgba(168, 85, 247, 0.3), transparent 70%);
    pointer-events: none;
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

.reward-day {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--violet-soft);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px var(--violet);
}

.reward-icon {
    font-size: 5rem;
    line-height: 1;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 30px currentColor);
    animation: iconBounce 1.5s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-8px) scale(1.05); }
}

.reward-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
    text-shadow: 0 0 30px rgba(168, 85, 247, 0.5);
}

.reward-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 2rem;
    padding: 1.2rem;
    background: rgba(8, 4, 26, 0.6);
    border-radius: 16px;
    border: 1px solid var(--line);
}

.reward-row {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
}

.reward-row i {
    color: var(--violet-soft);
    font-size: 1rem;
    text-shadow: 0 0 15px var(--violet);
}

.reward-row:nth-child(1) i { color: var(--amber); text-shadow: 0 0 15px var(--amber); }
.reward-row:nth-child(2) i { color: var(--violet-soft); text-shadow: 0 0 15px var(--violet); }
.reward-row:nth-child(3) i { color: var(--cyan); text-shadow: 0 0 15px var(--cyan); }

.reward-accept {
    padding: 1rem 2.5rem;
    font-size: 0.85rem;
}

@media (max-width: 600px) {
    .reward-card {
        padding: 2rem 1.5rem;
        min-width: auto;
        width: 92vw;
    }
    .reward-icon { font-size: 3.5rem; }
    .reward-title { font-size: 1.3rem; }
    .reward-row { font-size: 0.95rem; }
    .reward-rays { width: 500px; height: 500px; }
}

/* ============================================
   TOAST-УВЕДОМЛЕНИЯ
   ============================================ */

.toast-container {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 4000;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    pointer-events: none;
    max-width: 380px;
}

.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.98), rgba(23, 10, 53, 1));
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(168, 85, 247, 0.2);
    backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    min-width: 300px;
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast.toast-show {
    transform: translateX(0);
    opacity: 1;
}

.toast.toast-hide {
    transform: translateX(120%);
    opacity: 0;
}

.toast::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px 0 0 4px;
}

.toast-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    border: 1px solid;
}

.toast-body {
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.2rem;
    letter-spacing: 0.2px;
}

.toast-message {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-dim);
    line-height: 1.5;
    letter-spacing: 0.2px;
}

.toast-close {
    background: none;
    border: none;
    color: var(--text-faint);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.2rem;
    line-height: 1;
    transition: all 0.2s var(--ease);
    flex-shrink: 0;
}

.toast-close:hover {
    color: var(--violet-soft);
    transform: scale(1.2);
}

/* Прогресс-полоска снизу */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    animation: toastProgress 5s linear forwards;
}

@keyframes toastProgress {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

/* Типы */
.toast.toast-info::before      { background: var(--cyan); }
.toast.toast-info .toast-icon  { background: rgba(34, 211, 238, 0.1); border-color: rgba(34, 211, 238, 0.4); color: var(--cyan); box-shadow: 0 0 20px rgba(34, 211, 238, 0.3); }
.toast.toast-info .toast-progress { background: var(--cyan); }

.toast.toast-success::before      { background: var(--lime); }
.toast.toast-success .toast-icon  { background: rgba(163, 230, 53, 0.1); border-color: rgba(163, 230, 53, 0.4); color: var(--lime); box-shadow: 0 0 20px rgba(163, 230, 53, 0.3); }
.toast.toast-success .toast-progress { background: var(--lime); }

.toast.toast-warning::before      { background: var(--amber); }
.toast.toast-warning .toast-icon  { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.4); color: var(--amber); box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); }
.toast.toast-warning .toast-progress { background: var(--amber); }

.toast.toast-error::before      { background: var(--rose); }
.toast.toast-error .toast-icon  { background: rgba(251, 113, 133, 0.1); border-color: rgba(251, 113, 133, 0.4); color: var(--rose); box-shadow: 0 0 20px rgba(251, 113, 133, 0.3); }
.toast.toast-error .toast-progress { background: var(--rose); }

@media (max-width: 480px) {
    .toast-container {
        top: 70px;
        right: 10px;
        left: 10px;
        max-width: none;
    }
    .toast {
        min-width: auto;
    }
}

/* ============================================
   МЕТКИ ТИПА ПРОДУКТА
   ============================================ */
.badge-type-app   { border: 1px solid var(--cyan);    color: var(--cyan);    box-shadow: 0 0 12px rgba(34, 211, 238, 0.4); }
.badge-type-tool  { border: 1px solid var(--amber);   color: var(--amber);   box-shadow: 0 0 12px rgba(251, 191, 36, 0.4); }
.badge-type-music { border: 1px solid var(--fuchsia); color: var(--fuchsia); box-shadow: 0 0 12px rgba(232, 121, 249, 0.5); }
.badge-type-other { border: 1px solid var(--text-dim); color: var(--text-dim); }

/* ============================================
   ВИДЖЕТ ТРЕКИНГА ВРЕМЕНИ
   ============================================ */
.project-play-section { margin: 1.5rem 0; }

.play-status {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.5rem;
    background: linear-gradient(160deg, rgba(232, 121, 249, 0.08), rgba(23, 10, 53, 0.9));
    border: 1px solid rgba(232, 121, 249, 0.4);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(232, 121, 249, 0.15);
}

.play-status-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(232, 121, 249, 0.15);
    border: 1px solid rgba(232, 121, 249, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fuchsia);
    font-size: 1.2rem;
    text-shadow: 0 0 15px var(--fuchsia);
    flex-shrink: 0;
}

.play-status-info { flex: 1; min-width: 0; }

.play-status-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.3rem;
}

.play-status-value {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
}

.play-status-value #playTimer {
    color: var(--fuchsia);
    text-shadow: 0 0 10px var(--fuchsia);
}

.play-status-value #playEarned {
    color: var(--amber);
    text-shadow: 0 0 10px var(--amber);
}

.play-status-pulse {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 15px var(--lime);
    animation: playPulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes playPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(1.4); }
}

.play-status-login {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.5rem;
    background: rgba(8, 4, 26, 0.6);
    border: 1px dashed var(--line-strong);
    border-radius: 16px;
    color: var(--text-dim);
    font-size: 0.9rem;
}

.play-status-login i { color: var(--violet); text-shadow: 0 0 10px var(--violet); }

.play-status-login a {
    color: var(--violet-soft);
    text-decoration: none;
    font-weight: 600;
    text-shadow: 0 0 10px var(--violet);
}

.play-status-login a:hover { color: var(--fuchsia); text-shadow: 0 0 12px var(--fuchsia); }

/* ============================================
   СТРАНИЦА ПОДКЛЮЧЕНИЯ ПРИЛОЖЕНИЯ
   ============================================ */
.app-code-display {
    text-align: center;
    padding: 2rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.95), rgba(23, 10, 53, 1));
    border: 1px solid var(--line-strong);
    border-radius: 20px;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
}

.app-code-display::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.15), transparent 70%);
    pointer-events: none;
}

.app-code-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1rem;
    position: relative;
}

.app-code {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 6px;
    background: linear-gradient(135deg, #fff, var(--violet-soft));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(168, 85, 247, 0.6);
    margin-bottom: 1rem;
    position: relative;
    user-select: all;
}

.app-code-timer {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--amber);
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.app-code-timer i {
    margin-right: 0.4rem;
    text-shadow: 0 0 10px var(--amber);
}

@media (max-width: 480px) {
    .app-code { font-size: 1.8rem; letter-spacing: 3px; }
}

/* ============================================
   РАМКИ АВАТАРА — ПОЛНЫЙ НАБОР
   ============================================ */

/* halloween — хэллоуин */
.passport-avatar.frame-halloween {
    border: 3px solid #f97316;
    box-shadow: 0 0 40px rgba(249, 115, 22, 0.6), inset 0 0 30px rgba(249, 115, 22, 0.15);
    animation: halloweenPulse 2s ease-in-out infinite;
}
@keyframes halloweenPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(249, 115, 22, 0.5); }
    50%      { box-shadow: 0 0 50px rgba(249, 115, 22, 0.9), 0 0 80px rgba(139, 69, 19, 0.5); }
}

/* winter — зима */
.passport-avatar.frame-winter {
    border: 3px solid #93c5fd;
    box-shadow: 0 0 40px rgba(147, 197, 253, 0.6), inset 0 0 30px rgba(147, 197, 253, 0.15);
}

/* lime — лайм */
.passport-avatar.frame-lime {
    border: 3px solid var(--lime);
    box-shadow: 0 0 40px rgba(163, 230, 53, 0.5), inset 0 0 30px rgba(163, 230, 53, 0.15);
}

/* rose — роза */
.passport-avatar.frame-rose {
    border: 3px solid var(--rose);
    box-shadow: 0 0 40px rgba(251, 113, 133, 0.5), inset 0 0 30px rgba(251, 113, 133, 0.15);
}

/* indigo — индиго */
.passport-avatar.frame-indigo {
    border: 3px solid var(--indigo);
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.5), inset 0 0 30px rgba(99, 102, 241, 0.15);
}

/* emerald — изумруд */
.passport-avatar.frame-emerald {
    border: 3px solid #10b981;
    box-shadow: 0 0 40px rgba(16, 185, 129, 0.5), inset 0 0 30px rgba(16, 185, 129, 0.15);
}

/* amber — янтарь */
.passport-avatar.frame-amber {
    border: 3px solid var(--amber);
    box-shadow: 0 0 40px rgba(251, 191, 36, 0.5), inset 0 0 30px rgba(251, 191, 36, 0.15);
}

/* plasma — плазма */
.passport-avatar.frame-plasma {
    border: 3px solid #ef4444;
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.6), inset 0 0 30px rgba(239, 68, 68, 0.15);
    animation: plasmaPulse 1.5s ease-in-out infinite;
}
@keyframes plasmaPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.5); }
    50%      { box-shadow: 0 0 50px rgba(239, 68, 68, 1), 0 0 80px rgba(251, 191, 36, 0.5); }
}

/* phantom — призрак */
.passport-avatar.frame-phantom {
    border: 3px solid rgba(167, 139, 250, 0.6);
    box-shadow: 0 0 50px rgba(167, 139, 250, 0.7), inset 0 0 30px rgba(167, 139, 250, 0.2);
    animation: phantomFloat 3s ease-in-out infinite;
}
@keyframes phantomFloat {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(-3px); opacity: 0.85; }
}

/* cosmic — космос */
.passport-avatar.frame-cosmic {
    border: 3px solid #7c3aed;
    box-shadow: 0 0 50px rgba(124, 58, 237, 0.7), inset 0 0 30px rgba(124, 58, 237, 0.2);
    animation: cosmicPulse 3s ease-in-out infinite;
}
@keyframes cosmicPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(124, 58, 237, 0.5); }
    50%      { box-shadow: 0 0 60px rgba(124, 58, 237, 1), 0 0 100px rgba(232, 121, 249, 0.6); }
}

/* ============================================
   АВАТАР В ШАПКЕ — С РАМКОЙ
   ============================================ */

.user-mini-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--void);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: white;
    overflow: hidden;
    flex-shrink: 0;
    transition: all 0.3s var(--ease);
    position: relative;
}

.user-mini-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-mini-avatar span {
    background: linear-gradient(135deg, var(--violet-soft), var(--fuchsia));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Рамки для аватара в шапке */
.user-mini-avatar.frame-violet {
    border: 2px solid var(--violet);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.5);
}
.user-mini-avatar.frame-cyan {
    border: 2px solid var(--cyan);
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.5);
}
.user-mini-avatar.frame-magenta {
    border: 2px solid var(--fuchsia);
    box-shadow: 0 0 12px rgba(232, 121, 249, 0.5);
}
.user-mini-avatar.frame-lime {
    border: 2px solid var(--lime);
    box-shadow: 0 0 12px rgba(163, 230, 53, 0.5);
}
.user-mini-avatar.frame-gold {
    border: 2px solid var(--amber);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
.user-mini-avatar.frame-rose {
    border: 2px solid var(--rose);
    box-shadow: 0 0 12px rgba(251, 113, 133, 0.5);
}
.user-mini-avatar.frame-indigo {
    border: 2px solid var(--indigo);
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
}
.user-mini-avatar.frame-emerald {
    border: 2px solid #10b981;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5);
}
.user-mini-avatar.frame-amber {
    border: 2px solid var(--amber);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.5);
}
.user-mini-avatar.frame-halloween {
    border: 2px solid #f97316;
    box-shadow: 0 0 12px rgba(249, 115, 22, 0.6);
    animation: halloweenPulse 2s ease-in-out infinite;
}
.user-mini-avatar.frame-winter {
    border: 2px solid #93c5fd;
    box-shadow: 0 0 12px rgba(147, 197, 253, 0.6);
}
.user-mini-avatar.frame-rainbow {
    border: 2px solid transparent;
    background: linear-gradient(var(--void), var(--void)) padding-box,
                linear-gradient(45deg, #a855f7, #e879f9, #22d3ee, #a3e635) border-box;
    box-shadow: 0 0 15px rgba(232, 121, 249, 0.5);
    animation: rainbowRotate 3s linear infinite;
}
.user-mini-avatar.frame-plasma {
    border: 2px solid #ef4444;
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.6);
    animation: plasmaPulse 1.5s ease-in-out infinite;
}
.user-mini-avatar.frame-phantom {
    border: 2px solid rgba(167, 139, 250, 0.7);
    box-shadow: 0 0 15px rgba(167, 139, 250, 0.7);
    animation: phantomFloat 3s ease-in-out infinite;
}
.user-mini-avatar.frame-cosmic {
    border: 2px solid #7c3aed;
    box-shadow: 0 0 15px rgba(124, 58, 237, 0.7);
    animation: cosmicPulse 3s ease-in-out infinite;
}

/* ============================================
   АВТОЗАПОЛНЕНИЕ БРАУЗЕРА (fix белого фона)
   ============================================ */

/* Убираем белый фон Chrome при autofill */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(8, 4, 26, 0.85) inset !important;
    -webkit-text-fill-color: var(--text) !important;
    caret-color: var(--violet-soft) !important;
    transition: background-color 5000s ease-in-out 0s;
    border-color: var(--violet) !important;
}

/* Для auth-полей внутри обёртки */
.auth-input-wrap input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(8, 4, 26, 0.85) inset !important;
    -webkit-text-fill-color: var(--text) !important;
}

/* ============================================
   РАМКИ АВАТАРА В КАРТОЧКАХ ЭКИПАЖА
   ============================================ */

.crew-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.crew-avatar span {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--violet-soft), var(--fuchsia));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.crew-avatar.frame-violet  { border: 3px solid var(--violet);  box-shadow: 0 0 30px rgba(168, 85, 247, 0.5); }
.crew-avatar.frame-cyan    { border: 3px solid var(--cyan);    box-shadow: 0 0 30px rgba(34, 211, 238, 0.5); }
.crew-avatar.frame-magenta { border: 3px solid var(--fuchsia); box-shadow: 0 0 30px rgba(232, 121, 249, 0.5); }
.crew-avatar.frame-lime    { border: 3px solid var(--lime);    box-shadow: 0 0 30px rgba(163, 230, 53, 0.5); }
.crew-avatar.frame-gold    { border: 3px solid var(--amber);   box-shadow: 0 0 30px rgba(251, 191, 36, 0.5); }
.crew-avatar.frame-rose    { border: 3px solid var(--rose);    box-shadow: 0 0 30px rgba(251, 113, 133, 0.5); }
.crew-avatar.frame-indigo  { border: 3px solid var(--indigo);  box-shadow: 0 0 30px rgba(99, 102, 241, 0.5); }
.crew-avatar.frame-emerald { border: 3px solid #10b981;        box-shadow: 0 0 30px rgba(16, 185, 129, 0.5); }
.crew-avatar.frame-amber   { border: 3px solid var(--amber);   box-shadow: 0 0 30px rgba(251, 191, 36, 0.5); }

.crew-avatar.frame-halloween {
    border: 3px solid #f97316;
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.6);
}
.crew-avatar.frame-winter {
    border: 3px solid #93c5fd;
    box-shadow: 0 0 30px rgba(147, 197, 253, 0.6);
}
.crew-avatar.frame-rainbow {
    border: 3px solid transparent;
    background: linear-gradient(var(--void), var(--void)) padding-box,
                linear-gradient(45deg, #a855f7, #e879f9, #22d3ee, #a3e635) border-box;
    box-shadow: 0 0 40px rgba(232, 121, 249, 0.6);
    animation: rainbowRotate 3s linear infinite;
}
.crew-avatar.frame-plasma {
    border: 3px solid #ef4444;
    box-shadow: 0 0 40px rgba(239, 68, 68, 0.7);
}
.crew-avatar.frame-phantom {
    border: 3px solid rgba(167, 139, 250, 0.7);
    box-shadow: 0 0 40px rgba(167, 139, 250, 0.8);
}
.crew-avatar.frame-cosmic {
    border: 3px solid #7c3aed;
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.8);
}

/* ============================================
   3D-ПАСПОРТ — TILT + PARALLAX + SHINE
   ============================================ */

.passport {
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
    transition: transform 0.15s ease-out;
    overflow: visible; /* чтобы частицы вылетали за края */
}

/* Внутренние элементы тоже preserve-3d для глубины */
.passport-body,
.passport-top,
.passport-progress,
.passport-avatar-zone,
.passport-info {
    transform-style: preserve-3d;
}

/* Блик от мыши (используем ::before, т.к. ::after занят свечением) */
.passport::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background: radial-gradient(
        circle at var(--shine-x, 50%) var(--shine-y, 50%),
        rgba(255, 255, 255, 0.12),
        rgba(168, 85, 247, 0.06) 25%,
        transparent 50%
    );
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 4;
    mix-blend-mode: screen;
}

.passport:hover::before {
    opacity: 1;
}

/* Глубинные слои двигаются сильнее */
.passport-avatar-zone[data-parallax] {
    transform: translateZ(40px);
}

.passport-info[data-parallax] {
    transform: translateZ(20px);
}

/* ============================================
   КОСМО-ЧАСТИЦЫ ВОКРУГ ПАСПОРТА
   ============================================ */

.passport-particles {
    position: absolute;
    inset: -50px;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.passport-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    filter: blur(0.5px);
    animation: passportParticleFloat 8s linear infinite;
    box-shadow: 0 0 10px currentColor;
}

@keyframes passportParticleFloat {
    0% {
        transform: translate(0, 0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translate(
            calc((var(--dx, 100) * 1px)),
            calc((var(--dy, -200) * 1px))
        ) scale(0);
        opacity: 0;
    }
}

/* Свечение вокруг паспорта в момент наклона */
.passport:hover {
    box-shadow:
        0 0 60px rgba(168, 85, 247, 0.4),
        0 0 120px rgba(232, 121, 249, 0.2),
        inset 0 0 60px rgba(168, 85, 247, 0.1);
}

/* Улучшенный переход для свечения */
.passport {
    transition:
        transform 0.15s ease-out,
        box-shadow 0.4s ease;
}

/* Дополнительная рамка-подсветка сверху в момент hover */
.passport::after {
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.passport:hover::after {
    filter: drop-shadow(0 0 20px var(--violet)) drop-shadow(0 0 40px var(--fuchsia));
    opacity: 1;
}

/* На мобиле — отключаем сложные эффекты для производительности */
@media (max-width: 768px) {
    .passport {
        transform: none !important;
    }
    .passport::before {
        display: none;
    }
    .passport-particles {
        display: none;
    }
}

/* Предпочитает уменьшение движения */
@media (prefers-reduced-motion: reduce) {
    .passport,
    .passport::before,
    .passport-particle {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   КАТЕГОРИИ И РЕДКОСТИ НАШИВОК
   ============================================ */

.badge-category {
    margin-bottom: 2.5rem;
}

.badge-category-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    margin-bottom: 1.2rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.5));
    border: 1px solid var(--line);
    border-left: 3px solid var(--violet);
    border-radius: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
    letter-spacing: 0.3px;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.1);
}

.badge-category-header i {
    color: var(--violet-soft);
    font-size: 1.1rem;
    text-shadow: 0 0 12px var(--violet);
}

.badge-category-count {
    margin-left: auto;
    padding: 0.25rem 0.8rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 1px;
}

.badge-medal.rarity-common    { border-color: rgba(184, 169, 224, 0.3); }
.badge-medal.rarity-uncommon  { border-color: rgba(34, 197, 94, 0.4); }
.badge-medal.rarity-rare      { border-color: rgba(59, 130, 246, 0.4); }
.badge-medal.rarity-epic      { border-color: rgba(168, 85, 247, 0.5); box-shadow: 0 0 15px rgba(168, 85, 247, 0.15); }
.badge-medal.rarity-legendary { 
    border-color: rgba(251, 191, 36, 0.5); 
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}
.badge-medal.rarity-mythic    { 
    border-color: rgba(239, 68, 68, 0.6); 
    animation: mythicBadgePulse 2s ease-in-out infinite;
}

@keyframes mythicBadgePulse {
    0%, 100% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.4); }
    50%      { box-shadow: 0 0 35px rgba(239, 68, 68, 0.8), 0 0 60px rgba(251, 191, 36, 0.4); }
}

.badge-medal.unlocked.rarity-common    { border-color: rgba(184, 169, 224, 0.6); }
.badge-medal.unlocked.rarity-uncommon  { border-color: var(--lime); box-shadow: 0 0 25px rgba(163, 230, 53, 0.25); }
.badge-medal.unlocked.rarity-rare      { border-color: #3b82f6; box-shadow: 0 0 25px rgba(59, 130, 246, 0.3); }
.badge-medal.unlocked.rarity-epic      { border-color: var(--violet); box-shadow: 0 0 30px rgba(168, 85, 247, 0.35); }
.badge-medal.unlocked.rarity-legendary { border-color: var(--amber); box-shadow: 0 0 35px rgba(251, 191, 36, 0.4); }
.badge-medal.unlocked.rarity-mythic    { 
    border-color: var(--rose); 
    animation: mythicBadgePulse 1.5s ease-in-out infinite;
}

.badge-medal.unlocked .badge-medal-icon {
    filter: drop-shadow(0 0 12px currentColor);
    animation: badgeIconGlow 2s ease-in-out infinite;
}

@keyframes badgeIconGlow {
    0%, 100% { filter: drop-shadow(0 0 8px currentColor); }
    50%      { filter: drop-shadow(0 0 18px currentColor); }
}

/* Особый тост для нашивок — крупнее и с золотым отливом */
.toast.toast-achievement {
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 40px rgba(251, 191, 36, 0.4);
    background: linear-gradient(160deg, rgba(40, 22, 89, 0.98), rgba(30, 15, 69, 1));
}

.toast.toast-achievement .toast-title {
    background: linear-gradient(135deg, #fff, var(--amber));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   ОБЗОР — ДАШБОРД
   ============================================ */

.dash-wallet {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.dash-wallet-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: all 0.3s var(--ease);
    position: relative;
    overflow: hidden;
}

.dash-wallet-item::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--violet), transparent);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.dash-wallet-item:hover {
    border-color: var(--violet);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.15);
}

.dash-wallet-item:hover::before {
    opacity: 1;
}

.dash-wallet-item > i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    background: rgba(168, 85, 247, 0.12);
    color: var(--violet-soft);
    text-shadow: 0 0 15px var(--violet);
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.dash-wallet-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, var(--violet-soft));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.1;
    margin-bottom: 0.2rem;
}

.dash-wallet-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Сетка карточек */
.dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.dash-card {
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 1.5rem;
    transition: all 0.3s var(--ease);
    backdrop-filter: blur(20px);
}

.dash-card:hover {
    border-color: var(--line-strong);
}

.dash-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.dash-card-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.dash-card-title i {
    color: var(--violet-soft);
    text-shadow: 0 0 12px var(--violet);
}

.dash-card-link {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.3s var(--ease);
    text-shadow: 0 0 10px var(--violet);
}

.dash-card-link:hover {
    color: var(--fuchsia);
    gap: 0.6rem;
    text-shadow: 0 0 12px var(--fuchsia);
}

/* Нашивки в обзоре */
.dash-ach-progress {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.dash-ach-percent {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #fff, var(--violet-soft));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.dash-ach-text {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}

.dash-ach-text strong {
    color: var(--violet-soft);
    font-weight: 700;
}

.dash-last-ach {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 1.2rem;
    padding: 0.9rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.dash-last-ach-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.dash-last-ach-title {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.2rem;
}

.dash-last-ach-date {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
}

/* Время в продуктах */
.dash-time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.dash-time-item {
    text-align: center;
    padding: 1rem;
    background: rgba(8, 4, 26, 0.5);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: all 0.3s var(--ease);
}

.dash-time-item:hover {
    border-color: var(--violet);
    transform: translateY(-2px);
}

.dash-time-icon {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 10px currentColor);
}

.dash-time-value {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
    line-height: 1;
}

.dash-time-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Заявка */
.dash-application {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dash-app-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

/* Футер журнала */
.logbook-footer {
    margin-top: 1.2rem;
    padding: 0.8rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-faint);
    letter-spacing: 0.5px;
    background: rgba(8, 4, 26, 0.3);
    border-radius: 10px;
}

.logbook-footer i {
    color: var(--violet);
    margin-right: 0.4rem;
}

.logbook-footer strong {
    color: var(--violet-soft);
}

/* Адаптив */
@media (max-width: 900px) {
    .dash-wallet {
        grid-template-columns: repeat(2, 1fr);
    }
    .dash-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dash-wallet {
        grid-template-columns: 1fr;
    }
    .dash-wallet-value {
        font-size: 1.2rem;
    }
    .dash-time-value {
        font-size: 1.1rem;
    }
}

/* ============================================
   СТРАНИЦА: ДРУНЫ
   ============================================ */

.friends-section { padding-bottom: 4rem; }

/* Поиск */
.friends-search-block {
    margin-bottom: 2rem;
}

.friends-search-form {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 16px;
    position: relative;
    transition: all 0.3s var(--ease);
}

.friends-search-form:focus-within {
    border-color: var(--violet);
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.2);
}

.friends-search-form > i {
    color: var(--violet-soft);
    font-size: 1.1rem;
    text-shadow: 0 0 10px var(--violet);
    flex-shrink: 0;
}

.friends-search-form input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--font-main);
    font-size: 1rem;
}

.friends-search-form input::placeholder {
    color: var(--text-faint);
}

.search-results-header {
    margin-top: 1.2rem;
    padding: 0.8rem 1.2rem;
    background: rgba(168, 85, 247, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 12px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-dim);
    letter-spacing: 0.5px;
}

.search-results-header i {
    color: var(--violet-soft);
    margin-right: 0.5rem;
    text-shadow: 0 0 10px var(--violet);
}

.search-results-header strong {
    color: var(--violet-soft);
}

/* Блоки друнов */
.friends-block {
    margin-bottom: 2rem;
}

.friends-block-header {
    margin-bottom: 1rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--line);
}

.friends-block-title {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.3px;
}

.friends-block-title i {
    color: var(--violet-soft);
    text-shadow: 0 0 12px var(--violet);
}

.friends-badge {
    padding: 0.2rem 0.7rem;
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 20px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 1px;
    margin-left: auto;
}

/* Список друнов */
.friends-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.8rem;
}

.friend-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(160deg, rgba(30, 15, 69, 0.7), rgba(23, 10, 53, 0.9));
    border: 1px solid var(--line);
    border-radius: 16px;
    transition: all 0.3s var(--ease);
    position: relative;
}

.friend-card:hover {
    border-color: var(--violet);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.15);
}

/* Аватар */
.friend-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.friend-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--void);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.friend-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.friend-avatar span {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--violet-soft), var(--fuchsia));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Онлайн-индикатор */
.friend-online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--void);
    z-index: 2;
}

.friend-online.online {
    background: var(--lime);
    box-shadow: 0 0 10px var(--lime);
}

.friend-online.offline {
    background: var(--text-faint);
}

/* Инфо */
.friend-info {
    flex: 1;
    min-width: 0;
}

.friend-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-role {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--violet-soft);
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.friend-status {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    letter-spacing: 0.3px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.online {
    background: var(--lime);
    box-shadow: 0 0 8px var(--lime);
    animation: pulse 2s ease-in-out infinite;
}

.status-dot.offline {
    background: var(--text-faint);
}

/* Действия */
.friend-actions {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-shrink: 0;
}

.friend-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s var(--ease);
    white-space: nowrap;
}

.friend-action-btn:hover {
    color: var(--violet-soft);
    border-color: var(--violet);
    background: rgba(168, 85, 247, 0.15);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}

.friend-action-btn.primary {
    background: linear-gradient(135deg, var(--violet), var(--fuchsia));
    color: white;
    border: none;
    box-shadow: 0 4px 20px rgba(168, 85, 247, 0.4);
}

.friend-action-btn.primary:hover {
    box-shadow: 0 6px 30px rgba(168, 85, 247, 0.7);
    color: white;
}

.friend-action-btn.success {
    background: rgba(163, 230, 53, 0.1);
    color: var(--lime);
    border-color: rgba(163, 230, 53, 0.4);
}

.friend-action-btn.success:hover {
    background: rgba(163, 230, 53, 0.2);
    box-shadow: 0 0 15px rgba(163, 230, 53, 0.4);
    color: var(--lime);
}

.friend-action-btn.danger {
    background: rgba(251, 113, 133, 0.06);
    color: var(--rose);
    border-color: rgba(251, 113, 133, 0.3);
}

.friend-action-btn.danger:hover {
    background: rgba(251, 113, 133, 0.15);
    border-color: var(--rose);
    box-shadow: 0 0 15px rgba(251, 113, 133, 0.4);
    color: var(--rose);
}

/* Рамки для аватаров друнов — копируем из общего блока */
.friend-avatar.frame-violet  { border: 2px solid var(--violet);  box-shadow: 0 0 15px rgba(168, 85, 247, 0.5); }
.friend-avatar.frame-cyan    { border: 2px solid var(--cyan);    box-shadow: 0 0 15px rgba(34, 211, 238, 0.5); }
.friend-avatar.frame-magenta { border: 2px solid var(--fuchsia); box-shadow: 0 0 15px rgba(232, 121, 249, 0.5); }
.friend-avatar.frame-lime    { border: 2px solid var(--lime);    box-shadow: 0 0 15px rgba(163, 230, 53, 0.5); }
.friend-avatar.frame-gold    { border: 2px solid var(--amber);   box-shadow: 0 0 15px rgba(251, 191, 36, 0.5); }
.friend-avatar.frame-rose    { border: 2px solid var(--rose);    box-shadow: 0 0 15px rgba(251, 113, 133, 0.5); }
.friend-avatar.frame-indigo  { border: 2px solid var(--indigo);  box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); }
.friend-avatar.frame-emerald { border: 2px solid #10b981;        box-shadow: 0 0 15px rgba(16, 185, 129, 0.5); }
.friend-avatar.frame-amber   { border: 2px solid var(--amber);   box-shadow: 0 0 15px rgba(251, 191, 36, 0.5); }
.friend-avatar.frame-halloween { border: 2px solid #f97316; box-shadow: 0 0 15px rgba(249, 115, 22, 0.6); }
.friend-avatar.frame-winter  { border: 2px solid #93c5fd; box-shadow: 0 0 15px rgba(147, 197, 253, 0.6); }
.friend-avatar.frame-rainbow {
    border: 2px solid transparent;
    background: linear-gradient(var(--void), var(--void)) padding-box,
                linear-gradient(45deg, #a855f7, #e879f9, #22d3ee, #a3e635) border-box;
    box-shadow: 0 0 20px rgba(232, 121, 249, 0.5);
    animation: rainbowRotate 3s linear infinite;
}
.friend-avatar.frame-plasma  { border: 2px solid #ef4444; box-shadow: 0 0 20px rgba(239, 68, 68, 0.6); }
.friend-avatar.frame-phantom { border: 2px solid rgba(167, 139, 250, 0.7); box-shadow: 0 0 20px rgba(167, 139, 250, 0.7); }
.friend-avatar.frame-cosmic  { border: 2px solid #7c3aed; box-shadow: 0 0 20px rgba(124, 58, 237, 0.7); }

/* Адаптив */
@media (max-width: 900px) {
    .friends-list {
        grid-template-columns: 1fr;
    }
    .friends-search-form {
        flex-wrap: wrap;
    }
    .friends-search-form input {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .friend-card {
        flex-wrap: wrap;
    }
    .friend-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .friend-action-btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.65rem;
    }
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--fuchsia);
    color: white;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 10px;
    margin-left: 0.4rem;
    box-shadow: 0 0 10px var(--fuchsia);
}

/* ============================================
   КОСМОДРОП — РУЛЕТКА
   ============================================ */

.roulette-section { padding-bottom: 4rem; position: relative; overflow: hidden; }
.roulette-stars {
    position: absolute; inset: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; opacity: .7;
}
.roulette-section > .container { position: relative; z-index: 1; }

.roulette-wrap {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 3rem; align-items: center; margin-bottom: 3rem;
}

/* КОЛЕСО */
.roulette-wheel-area {
    position: relative; display: flex; align-items: center; justify-content: center;
    padding: 2rem; perspective: 1200px;
}
.roulette-halo {
    position: absolute; width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(168,85,247,.35), transparent 65%);
    filter: blur(40px); animation: haloPulse 4s ease-in-out infinite; pointer-events: none;
}
@keyframes haloPulse {
    0%,100% { transform: scale(1); opacity: .7; }
    50%     { transform: scale(1.08); opacity: 1; }
}
.roulette-pointer {
    position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
    z-index: 20; filter: drop-shadow(0 0 18px #fbbf24) drop-shadow(0 0 40px #f59e0b);
    animation: pointerPulse 1.4s ease-in-out infinite;
}
.roulette-wheel.spinning ~ .roulette-pointer,
.roulette-wheel-area.shake .roulette-pointer { animation: none; }
@keyframes pointerPulse {
    0%,100% { transform: translateX(-50%) translateY(0); }
    50%     { transform: translateX(-50%) translateY(6px); }
}

.roulette-wheel {
    width: 440px; height: 440px; border-radius: 50%; position: relative;
    background: #0a0418;
    border: 8px solid rgba(168,85,247,.55);
    box-shadow:
        0 0 60px rgba(168,85,247,.55),
        0 0 140px rgba(232,121,249,.35),
        inset 0 0 80px rgba(0,0,0,.7);
    transition: transform 5s cubic-bezier(.17,.67,.12,.99);
    transform-style: preserve-3d;
    will-change: transform, filter;
}
.roulette-wheel.spinning { filter: blur(1.5px); }
.roulette-wheel.settle { transition: transform .4s cubic-bezier(.34,1.56,.64,1); }

.roulette-wheel-segments {
    position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
}
.roulette-segment {
    position: absolute; inset: 0;
    clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 100%, 0 100%, 0 0, 50% 0);
    background: conic-gradient(from calc(var(--a) - 25.7deg),
        var(--c1) 0deg, var(--c2) 51.4deg, var(--c1) 51.4deg);
    /* fallback below overrides per-segment using inline gradient if you prefer */
}
/* Проще: единый conic на фоне колеса + маски */
.roulette-wheel-segments {
    background: conic-gradient(
        #a3e635 0deg 51.4deg,
        #22d3ee 51.4deg 102.8deg,
        #a855f7 102.8deg 154.2deg,
        #fbbf24 154.2deg 205.6deg,
        #fb7185 205.6deg 257deg,
        #e879f9 257deg 308.4deg,
        #ef4444 308.4deg 360deg
    );
}
.roulette-wheel-segments::after {
    content:''; position: absolute; inset: 0; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,0,0,.65) 18%, transparent 55%),
                repeating-conic-gradient(from 0deg,
                    rgba(255,255,255,.35) 0deg .4deg, transparent .4deg 51.4deg);
    mask: radial-gradient(circle, transparent 20%, black 22%, black 100%);
    pointer-events: none;
}
.roulette-segment {
    background: none; clip-path: none;
    position: absolute; top: 50%; left: 50%;
    transform-origin: 0 0;
    transform: rotate(var(--a)) translate(60px, 0);
    display: flex; flex-direction: column; align-items: center;
    color: #fff; pointer-events: none;
    text-shadow: 0 0 10px rgba(0,0,0,.8);
}
.roulette-segment .seg-icon { font-size: 1.9rem; filter: drop-shadow(0 0 12px #fff); }
.roulette-segment .seg-label {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: 1px;
    text-transform: uppercase; opacity: .85; margin-top: 2px;
    transform: rotate(90deg); white-space: nowrap;
}
/* Дополнительно разнесём по радиусу */
.roulette-segment { transform: rotate(var(--a)) translate(120px, 0) rotate(90deg); }

.roulette-center {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 110px; height: 110px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #e879f9 30%, #a855f7 70%, #4c1d95);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 50px rgba(232,121,249,.9), inset 0 0 30px rgba(0,0,0,.5);
    z-index: 6; border: 3px solid rgba(255,255,255,.25);
    animation: centerSpin 8s linear infinite;
}
@keyframes centerSpin {
    from { box-shadow: 0 0 50px rgba(232,121,249,.9), inset 0 0 30px rgba(0,0,0,.5), 0 0 0 0 rgba(232,121,249,.6); }
    50%  { box-shadow: 0 0 70px rgba(232,121,249,1), inset 0 0 30px rgba(0,0,0,.5), 0 0 0 20px rgba(232,121,249,0); }
    to   { box-shadow: 0 0 50px rgba(232,121,249,.9), inset 0 0 30px rgba(0,0,0,.5), 0 0 0 0 rgba(232,121,249,0); }
}
.roulette-center-icon { font-size: 2.6rem; filter: drop-shadow(0 0 10px #fff); }

/* ПАНЕЛЬ */
.roulette-info { display: flex; flex-direction: column; gap: 1.5rem; }
.roulette-status {
    padding: 1.5rem; border-radius: 20px; border: 1px solid var(--line);
    background: linear-gradient(160deg, rgba(30,15,69,.7), rgba(23,10,53,.9));
    backdrop-filter: blur(10px);
}
.roulette-ready, .roulette-cooldown { display: flex; align-items: center; gap: 1rem; }
.roulette-ready > i, .roulette-cooldown > i {
    font-size: 2rem; color: var(--lime); text-shadow: 0 0 20px var(--lime);
}
.roulette-cooldown > i { color: var(--text-faint); text-shadow: none; }
.roulette-ready-title {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
    color: var(--text); margin-bottom: .2rem;
}
.roulette-ready-desc { font-family: var(--font-mono); font-size: .8rem; color: var(--text-dim); }
#rouletteCountdown { color: var(--violet-soft); font-weight: 700; }

.roulette-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    gap: .8rem; padding: 1.3rem 2rem; overflow: hidden;
    background: linear-gradient(135deg, #a855f7, #e879f9, #a855f7);
    background-size: 200% 200%; animation: gradientShift 4s ease infinite;
    border: none; border-radius: 16px; color: #fff;
    font-family: var(--font-mono); font-weight: 700; font-size: 1.15rem;
    letter-spacing: 3px; text-transform: uppercase; cursor: pointer;
    transition: transform .25s ease, box-shadow .3s ease;
    box-shadow: 0 0 40px rgba(168,85,247,.6);
}
@keyframes gradientShift {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
}
.roulette-btn:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 60px rgba(168,85,247,.95), 0 0 120px rgba(232,121,249,.5);
}
.roulette-btn:disabled { opacity: .5; cursor: not-allowed; animation: none; }
.roulette-btn .roulette-btn-glow {
    position: absolute; inset: -4px; border-radius: 20px; z-index: -1;
    background: linear-gradient(135deg, #a855f7, #e879f9);
    filter: blur(20px); opacity: .8; animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
    0%,100% { opacity: .5; }
    50%     { opacity: 1; }
}
.roulette-btn:disabled .roulette-btn-glow { display: none; }

/* ШАНСЫ */
.roulette-odds {
    padding: 1.2rem 1.5rem; background: rgba(8,4,26,.6);
    border: 1px solid var(--line); border-radius: 16px;
}
.roulette-odds-title {
    font-family: var(--font-mono); font-size: .75rem; color: var(--violet-soft);
    letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem;
    text-shadow: 0 0 10px var(--violet);
}
.odds-row {
    display: grid; grid-template-columns: 24px 1fr 90px 60px;
    gap: .6rem; align-items: center; padding: .45rem 0;
    border-bottom: 1px solid var(--line);
}
.odds-row:last-child { border-bottom: none; }
.odds-icon { font-size: 1.1rem; text-align: center; }
.odds-name { font-size: .85rem; color: var(--text-dim); }
.odds-bar {
    height: 6px; border-radius: 4px; background: rgba(255,255,255,.06);
    overflow: hidden; position: relative;
}
.odds-fill {
    display: block; height: 100%; border-radius: 4px;
    box-shadow: 0 0 10px currentColor;
    animation: oddsFill 1.2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes oddsFill { from { transform: scaleX(0); transform-origin: left; } }
.odds-chance {
    font-family: var(--font-mono); font-size: .8rem; font-weight: 700;
    text-align: right; font-variant-numeric: tabular-nums;
    text-shadow: 0 0 10px currentColor;
}

/* ИСТОРИЯ */
.roulette-history {
    background: linear-gradient(160deg, rgba(30,15,69,.7), rgba(23,10,53,.9));
    border: 1px solid var(--line); border-radius: 20px; padding: 1.5rem;
}
.roulette-history-list { display: flex; flex-direction: column; gap: .6rem; margin-top: 1rem; }
.roulette-history-item {
    display: flex; align-items: center; gap: 1rem; padding: .9rem;
    background: rgba(8,4,26,.5); border: 1px solid var(--line);
    border-radius: 12px; transition: transform .25s ease, box-shadow .25s ease;
}
.roulette-history-item:hover { transform: translateX(4px); }
.roulette-history-item.rarity-epic { box-shadow: inset 0 0 30px rgba(232,121,249,.15); border-color: rgba(232,121,249,.4); }
.roulette-history-item.rarity-legendary {
    box-shadow: inset 0 0 40px rgba(251,191,36,.2), 0 0 30px rgba(239,68,68,.3);
    border-color: rgba(251,191,36,.5);
    animation: legendaryPulse 3s ease-in-out infinite;
}
@keyframes legendaryPulse {
    0%,100% { box-shadow: inset 0 0 40px rgba(251,191,36,.2), 0 0 30px rgba(239,68,68,.3); }
    50%     { box-shadow: inset 0 0 50px rgba(251,191,36,.35), 0 0 50px rgba(239,68,68,.55); }
}
.history-icon { font-size: 1.5rem; }
.history-info { flex: 1; }
.history-segment {
    font-family: var(--font-display); font-size: .95rem; font-weight: 700;
    color: var(--text); margin-bottom: .2rem;
}
.history-date { font-family: var(--font-mono); font-size: .7rem; color: var(--text-faint); }
.history-reward {
    display: flex; gap: .8rem; font-family: var(--font-mono); font-size: .85rem;
    color: var(--violet-soft); font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ПОПАП */
.roulette-popup {
    position: fixed; inset: 0; z-index: 5000; display: none;
    align-items: center; justify-content: center;
}
.roulette-popup.active { display: flex; }
.roulette-popup-backdrop {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(168,85,247,.35), rgba(0,0,0,.95) 70%);
    backdrop-filter: blur(10px); animation: fadeIn .35s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
.roulette-popup-content { position: relative; display: flex; align-items: center; justify-content: center; }

.roulette-rays {
    position: absolute; width: 900px; height: 900px; border-radius: 50%;
    pointer-events: none; opacity: .6;
}
.rays-a {
    background: conic-gradient(from 0deg,
        transparent 0deg, rgba(168,85,247,.5) 12deg, transparent 24deg,
        transparent 36deg, rgba(232,121,249,.5) 48deg, transparent 60deg,
        transparent 72deg, rgba(251,191,36,.5) 84deg, transparent 96deg,
        transparent 108deg, rgba(34,211,238,.5) 120deg, transparent 132deg,
        transparent 144deg, rgba(163,230,53,.5) 156deg, transparent 168deg,
        transparent 180deg, rgba(232,121,249,.5) 192deg, transparent 204deg,
        transparent 216deg, rgba(168,85,247,.5) 228deg, transparent 240deg,
        transparent 252deg, rgba(251,191,36,.5) 264deg, transparent 276deg,
        transparent 288deg, rgba(34,211,238,.5) 300deg, transparent 312deg,
        transparent 324deg, rgba(163,230,53,.5) 336deg, transparent 348deg,
        transparent 360deg);
    animation: raysRotate 18s linear infinite;
}
.rays-b { animation: raysRotateRev 26s linear infinite; opacity: .35; filter: blur(6px); }
@keyframes raysRotate    { to { transform: rotate(360deg); } }
@keyframes raysRotateRev { to { transform: rotate(-360deg); } }

.roulette-particles { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.roulette-particle {
    position: absolute; top: 50%; left: 50%;
    width: 10px; height: 10px; border-radius: 50%;
    transform: translate(-50%,-50%);
    animation: rouletteParticleFly 2.2s cubic-bezier(.16,1,.3,1) forwards;
    box-shadow: 0 0 15px currentColor;
}
@keyframes rouletteParticleFly {
    0%   { transform: translate(-50%,-50%) scale(0); opacity: 0; }
    20%  { opacity: 1; transform: translate(-50%,-50%) scale(1.6); }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

.roulette-result-card {
    position: relative; z-index: 2;
    background: linear-gradient(160deg, rgba(30,15,69,.98), rgba(23,10,53,1));
    border: 3px solid var(--violet); border-radius: 32px;
    padding: 3rem 3rem 2.5rem; min-width: 420px; max-width: 92vw; text-align: center;
    box-shadow: 0 0 60px rgba(168,85,247,.6), 0 0 120px rgba(232,121,249,.3),
                inset 0 0 60px rgba(168,85,247,.1);
    animation: cardFlyIn .7s cubic-bezier(.16,1,.3,1);
}
.roulette-result-card.epic {
    border-color: #e879f9;
    box-shadow: 0 0 90px rgba(232,121,249,.8), 0 0 180px rgba(232,121,249,.45);
}
.roulette-result-card.jackpot {
    border-color: #ef4444;
    animation: cardFlyIn .7s cubic-bezier(.16,1,.3,1), jackpotGlow 2s ease-in-out infinite .7s;
}
@keyframes jackpotGlow {
    0%,100% { box-shadow: 0 0 100px rgba(239,68,68,.85), 0 0 200px rgba(251,191,36,.5); }
    50%     { box-shadow: 0 0 140px rgba(239,68,68,1),  0 0 280px rgba(251,191,36,.85); }
}
@keyframes cardFlyIn {
    0%   { transform: scale(.3) rotateY(-180deg); opacity: 0; }
    60%  { transform: scale(1.08) rotateY(10deg); opacity: 1; }
    100% { transform: scale(1) rotateY(0); }
}

.roulette-result-icon {
    font-size: 5rem; line-height: 1; margin-bottom: 1rem;
    filter: drop-shadow(0 0 30px currentColor);
    animation: iconBounce 1.6s ease-in-out infinite;
}
@keyframes iconBounce {
    0%,100% { transform: translateY(0) scale(1); }
    50%     { transform: translateY(-10px) scale(1.06); }
}
.roulette-result-label {
    font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
    color: var(--violet-soft); letter-spacing: 3px; text-transform: uppercase;
    margin-bottom: 1.5rem; text-shadow: 0 0 20px var(--violet);
}
.roulette-result-rewards {
    display: flex; flex-direction: column; gap: .6rem; padding: 1.2rem;
    background: rgba(8,4,26,.6); border-radius: 16px;
    border: 1px solid var(--line); margin-bottom: 2rem;
    min-height: 60px;
}
.roulette-result-row {
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
    color: var(--text); display: flex; align-items: center; justify-content: center;
    gap: .6rem; opacity: 0; transform: translateY(8px);
    animation: rowIn .45s cubic-bezier(.16,1,.3,1) forwards;
    font-variant-numeric: tabular-nums;
}
@keyframes rowIn { to { opacity: 1; transform: translateY(0); } }
.roulette-result-row i { color: var(--violet-soft); text-shadow: 0 0 15px var(--violet); }
.roulette-result-row.highlight { color: #fbbf24; text-shadow: 0 0 20px #fbbf24; }
.roulette-result-row.highlight i { color: #fbbf24; text-shadow: 0 0 20px #fbbf24; }

.roulette-wheel-area.shake { animation: areaShake .5s ease-in-out 3; }
@keyframes areaShake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-8px); }
    75%     { transform: translateX(8px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .roulette-wheel, .roulette-halo, .roulette-center,
    .roulette-pointer, .roulette-btn, .roulette-btn-glow,
    .rays-a, .rays-b, .roulette-result-card, .roulette-result-icon { animation: none !important; }
    .roulette-wheel { transition-duration: 1.5s !important; }
}

/* Адаптив */
@media (max-width: 900px) {
    .roulette-wrap { grid-template-columns: 1fr; gap: 2rem; }
    .roulette-wheel { width: 320px; height: 320px; }
    .roulette-segment { transform: rotate(var(--a)) translate(85px, 0) rotate(90deg); }
    .roulette-segment .seg-icon { font-size: 1.4rem; }
    .roulette-segment .seg-label { display: none; }
    .roulette-center { width: 84px; height: 84px; }
    .roulette-center-icon { font-size: 2rem; }
    .roulette-halo { width: 380px; height: 380px; }
    .roulette-result-card { padding: 2rem 1.5rem; min-width: auto; width: 92vw; }
    .roulette-result-icon { font-size: 3.5rem; }
    .roulette-result-label { font-size: 1.25rem; }
    .roulette-result-row { font-size: 1rem; }
    .roulette-rays { width: 600px; height: 600px; }
}

/* ============================================
   ТУМБЛЕР (SWITCH) ДЛЯ НАСТРОЕК
   ============================================ */

.setting-card-form {
    cursor: default;
}

.setting-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s var(--ease);
    flex-shrink: 0;
    padding: 0;
    margin-left: auto;
}

.setting-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--text-faint);
    transition: all 0.3s var(--ease);
}

/* Активное состояние (когда 2FA включена) */
.setting-toggle.active {
    background: var(--violet);
    border-color: var(--violet);
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.5);
}

.setting-toggle.active::after {
    left: 27px;
    background: #fff;
    box-shadow: 0 0 10px #fff;
}

/* При наведении */
.setting-card-form:hover .setting-toggle:not(.active) {
    background: rgba(168, 85, 247, 0.2);
    border-color: var(--violet);
}

/* Основной логотип */
.logo-img {
    height: 36px; /* Высота под шапку */
    width: auto;
    display: block;
    filter: drop-shadow(0 0 15px rgba(168, 85, 247, 0.5)); /* Легкое свечение */
    transition: filter 0.3s ease;
}

.logo:hover .logo-img {
    filter: drop-shadow(0 0 25px rgba(232, 121, 249, 0.8)); /* Свечение при наведении */
}

/* Если логотип квадратный + текст */
.logo-mark-img {
    height: 34px;
    width: 34px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.6);
    transition: all 0.3s ease;
}

.logo:hover .logo-mark-img {
    box-shadow: 0 0 30px rgba(232, 121, 249, 0.9);
    transform: scale(1.05);
}
/* ============================================
   ПУЛЬС БЕЙДЖА НЕПРОЧИТАННЫХ (ШАПКА)
   ============================================ */
@keyframes chatBadgePulse {
    0%   { transform: scale(1);   box-shadow: 0 0 10px var(--fuchsia); }
    40%  { transform: scale(1.35); box-shadow: 0 0 25px var(--fuchsia), 0 0 40px var(--fuchsia); }
    100% { transform: scale(1);   box-shadow: 0 0 10px var(--fuchsia); }
}

.notifications-badge.badge-pulse {
    animation: chatBadgePulse 0.7s ease-out;
}
@keyframes chatBadgePulse {
    0%   { transform: scale(1);   box-shadow: 0 0 10px var(--fuchsia); }
    40%  { transform: scale(1.35); box-shadow: 0 0 25px var(--fuchsia), 0 0 40px var(--fuchsia); }
    100% { transform: scale(1);   box-shadow: 0 0 10px var(--fuchsia); }
}

.notifications-badge.badge-pulse {
    animation: chatBadgePulse 0.7s ease-out;
}