diff --git a/static/css/style.css b/static/css/style.css
index 9137fdc..f7b1662 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -3,4487 +3,599 @@
 *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
 
 :root {
-    --primary: #f59e0b;
-    --primary-hover: #d97706;
-    --primary-glow: rgba(245,158,11,0.25);
-    --success: #10b981;
-    --danger: #ef4444;
-    --warning: #f59e0b;
-    --bg-deep: #08090d;
-    --bg-dark: #0b0c10;
-    --bg-card: #13141a;
-    --bg-surface: #1a1b23;
-    --bg-elevated: #21222c;
-    --text: #e8e6e3;
-    --text-dim: #8a8a9a;
-    --text-muted: #5a5a6a;
-    --border: rgba(255,255,255,0.06);
-    --border-light: rgba(255,255,255,0.1);
-
-    --rarity-consumer: #b0b0b0;
-    --rarity-industrial: #5e98d9;
-    --rarity-mil-spec: #4b69ff;
-    --rarity-restricted: #8847ff;
-    --rarity-classified: #d32ce6;
-    --rarity-covert: #eb4b4b;
-    --rarity-rare-special: #ffd700;
-    --rarity-extraordinary: #ffd700;
-    --rarity-contraband: #ffaa00;
-
-    /* backwards compat */
-    --primary-color: var(--primary);
-    --primary-hover: #d97706;
-    --success-color: var(--success);
-    --danger-color: var(--danger);
-    --warning-color: var(--warning);
-    --bg-dark: var(--bg-deep);
-    --bg-card: #13141a;
-    --bg-light: var(--bg-surface);
-    --text-primary: var(--text);
-    --text-secondary: var(--text-dim);
-    --border-color: var(--border);
-    
-    --radius-sm: 6px;
-    --radius-md: 10px;
-    --radius-lg: 14px;
-    --radius-xl: 20px;
-    
-    --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
+  --primary: #f59e0b;
+  --primary-hover: #d97706;
+  --primary-glow: rgba(245,158,11,0.35);
+  --primary-subtle: rgba(245,158,11,0.12);
+  --success: #22c55e;
+  --danger: #ef4444;
+  --info: #3b82f6;
+  --warning: #f59e0b;
+  --bg-deep: #07080b;
+  --bg-dark: #0b0d12;
+  --bg-card: #111318;
+  --bg-surface: #181b24;
+  --bg-elevated: #1e2230;
+  --bg-hover: rgba(255,255,255,0.04);
+  --text: #e8e6e3;
+  --text-dim: #9498a8;
+  --text-muted: #5c6070;
+  --border: rgba(255,255,255,0.06);
+  --border-light: rgba(255,255,255,0.10);
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
+  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
+  --shadow-lg: 0 8px 32px rgba(0,0,0,0.5);
+  --shadow-xl: 0 16px 48px rgba(0,0,0,0.6);
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+  --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
+  --transition-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
+  --font-display: 'Russo One', sans-serif;
+  --font-body: 'Rajdhani', sans-serif;
+  --rarity-consumer: #b0b0b0;
+  --rarity-industrial: #5e98d9;
+  --rarity-mil-spec: #4b69ff;
+  --rarity-restricted: #8847ff;
+  --rarity-classified: #d32ce6;
+  --rarity-covert: #eb4b4b;
+  --rarity-rare-special: #ffd700;
+  --rarity-extraordinary: #ffd700;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-overlay: 300;
+  --z-modal: 400;
+  --z-toast: 500;
+  --z-tooltip: 600;
 }
 
 body {
-    font-family: 'Rajdhani', sans-serif;
-    background: var(--bg-deep);
-    color: var(--text);
-    line-height: 1.6;
-    min-height: 100vh;
-    overflow-x: hidden;
-}
-
-h1, h2, h3, h4, h5, h6, .logo, .nav-link, .btn {
-    font-family: 'Russo One', sans-serif;
-    letter-spacing: 0.03em;
-}
-
-::selection { background: var(--primary); color: #000; }
-::-webkit-scrollbar { width: 5px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
-
-.container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 20px;
-    width: 100%;
-}
-
-/* Навигация */
-.navbar {
-    background: rgba(11,12,16,0.85);
-    backdrop-filter: blur(12px);
-    -webkit-backdrop-filter: blur(12px);
-    border-bottom: 1px solid var(--border);
-    padding: 0.7rem 0;
-    position: sticky;
-    top: 0;
-    z-index: 100;
-}
-
-.navbar .container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-}
-
-.logo {
-    font-size: 1.2rem;
-    font-weight: 700;
-    color: var(--text);
-    text-decoration: none;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-}
-
-.logo:hover {
-    color: var(--primary-color);
-}
-
-.nav-links {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    flex-wrap: wrap;
-}
-
-.nav-link {
-    color: var(--text-secondary);
-    text-decoration: none;
-    padding: 0.4rem 0.65rem;
-    border-radius: 6px;
-    transition: all 0.2s;
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    font-weight: 500;
-}
-
-.nav-link:hover {
-    color: var(--text-primary);
-    background: rgba(255,255,255,0.04);
-}
-
-.nav-link.active {
-    color: #000;
-    background: var(--primary);
-    font-weight: 600;
-    box-shadow: 0 0 12px var(--primary-glow);
-}
-
-.user-balance {
-    padding: 0.4rem 0.65rem;
-    background: rgba(0,0,0,0.3);
-    border: 1px solid rgba(245, 158, 11, 0.2);
-    border-radius: 6px;
-    font-weight: 600;
-    color: var(--primary-color);
-    font-size: 0.8rem;
-    font-family: 'Rajdhani', sans-serif;
-}
-
-/* Кнопки */
-.btn {
-    padding: 0.5rem 1.1rem;
-    border: none;
-    border-radius: var(--radius-sm);
-    font-size: 0.78rem;
-    font-weight: 600;
-    cursor: pointer;
-    text-decoration: none;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.35rem;
-    transition: all var(--transition);
-    white-space: nowrap;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    line-height: 1.2;
-}
-
-.btn-primary {
-    background: linear-gradient(135deg, var(--primary), #d97706);
-    color: #000;
-}
-
-.btn-primary:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 20px var(--primary-glow);
-}
-
-.btn-primary:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-    transform: none;
-    box-shadow: none;
-}
-
-.btn-outline {
-    background: transparent;
-    color: var(--text-dim);
-    border: 1px solid var(--border);
-}
-
-.btn-outline:hover {
-    color: var(--text-primary);
-    border-color: rgba(255,255,255,0.12);
-    background: rgba(255,255,255,0.03);
-}
-
-.btn-large {
-    padding: 0.65rem 2rem;
-    font-size: 0.95rem;
-}
-
-.btn-block {
-    width: 100%;
-}
-
-.btn-fast {
-    width: 40px;
-    height: 40px;
-    padding: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.1rem;
-    background: rgba(245,158,11,0.1);
-    border: 1px solid rgba(245,158,11,0.25);
-    color: #f59e0b;
-    border-radius: 8px;
-    cursor: pointer;
-    transition: background 0.2s, border-color 0.2s, transform 0.15s;
-    flex-shrink: 0;
-}
-.btn-fast:hover:not(:disabled) {
-    background: rgba(245,158,11,0.2);
-    border-color: rgba(245,158,11,0.4);
-    transform: scale(1.05);
-}
-.btn-fast:disabled {
-    opacity: 0.3;
-    cursor: not-allowed;
-}
-
-.btn-sm {
-    padding: 0.25rem 0.65rem;
-    font-size: 0.7rem;
-}
-
-.btn-success {
-    background: var(--success-color);
-    color: #0a0b0e;
-    border: none;
-}
-
-.btn-success:hover {
-    background: #059669;
-    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
-}
-
-/* Главная страница */
-.hero {
-    padding: 4rem 0;
-    text-align: center;
-    position: relative;
-}
-
-.hero::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 600px;
-    height: 600px;
-    background: radial-gradient(circle, rgba(245, 158, 11, 0.04) 0%, transparent 70%);
-    pointer-events: none;
-}
-
-.hero h1 {
-    font-size: 3rem;
-    margin-bottom: 1rem;
-    background: linear-gradient(135deg, var(--primary-color), #d97706);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    position: relative;
-}
-
-.hero-subtitle {
-    font-size: 1.25rem;
-    color: var(--text-secondary);
-    margin-bottom: 3rem;
-    position: relative;
-}
-
-.features {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 1.5rem;
-    margin: 3rem 0;
-}
-
-.feature-card {
-    background: var(--bg-card);
-    padding: 1.75rem 1.5rem;
-    border-radius: 10px;
-    text-align: center;
-    border: 1px solid var(--border-color);
-    transition: all 0.25s;
-}
-
-.feature-card:hover {
-    border-color: rgba(245, 158, 11, 0.15);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 30px rgba(0,0,0,0.3);
-}
-
-.feature-icon {
-    font-size: 2.5rem;
-    margin-bottom: 0.75rem;
-}
-
-.feature-card h3 {
-    margin-bottom: 0.5rem;
-    font-size: 0.95rem;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-}
-
-.feature-card p {
-    color: var(--text-secondary);
-    font-size: 0.85rem;
-}
-
-.hero-actions {
-    display: flex;
-    gap: 0.75rem;
-    justify-content: center;
-    margin-top: 2rem;
-}
-
-/* Карточка профиля */
-.profile-card,
-.auth-card,
-.page-card {
-    background: rgba(20, 21, 26, 0.8);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    padding: 1.5rem;
-    backdrop-filter: blur(8px);
-}
-
-.form-input {
-    width: 100%;
-    padding: 0.55rem 0.7rem;
-    background: rgba(0,0,0,0.3);
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    color: var(--text-primary);
-    font-size: 0.9rem;
-    font-family: 'Rajdhani', sans-serif;
-    outline: none;
-    transition: border-color 0.2s;
-    box-sizing: border-box;
-}
-
-.form-input:focus {
-    border-color: rgba(245, 158, 11, 0.3);
-}
-
-.form-label {
-    font-size: 0.8rem;
-    color: var(--text-secondary);
-    margin-bottom: 0.3rem;
-    display: block;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.stat-value {
-    font-family: 'Russo One', sans-serif;
-    color: var(--primary-color);
-}
-
-/* Формы авторизации */
-.auth-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-height: calc(100vh - 73px);
-    padding: 2rem;
-}
-
-.auth-card {
-    background: rgba(20, 21, 26, 0.8);
-    border: 1px solid var(--border-color);
-    padding: 2rem;
-    border-radius: 10px;
-    width: 100%;
-    max-width: 400px;
-    backdrop-filter: blur(8px);
-}
-
-.auth-card h2 {
-    text-align: center;
-    margin-bottom: 1.5rem;
-    font-size: 1.25rem;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-}
-
-.auth-form {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3rem;
-}
-
-.form-group label {
-    font-weight: 600;
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--text-secondary);
-}
-
-.form-group input {
-    padding: 0.55rem 0.7rem;
-    background: rgba(0,0,0,0.3);
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    color: var(--text-primary);
-    font-size: 0.9rem;
-    font-family: 'Rajdhani', sans-serif;
-    outline: none;
-    transition: border-color 0.2s;
-}
-
-.form-group input:focus {
-    border-color: rgba(245, 158, 11, 0.3);
-}
-
-.form-group small {
-    color: var(--text-secondary);
-    font-size: 0.75rem;
-}
-
-.error-message {
-    background: rgba(239, 68, 68, 0.08);
-    border: 1px solid rgba(239, 68, 68, 0.3);
-    color: var(--danger-color);
-    padding: 0.6rem 0.75rem;
-    border-radius: 6px;
-    text-align: center;
-    font-size: 0.85rem;
-}
-
-.auth-footer {
-    text-align: center;
-    margin-top: 1.25rem;
-    color: var(--text-secondary);
-    font-size: 0.85rem;
-}
-
-.auth-footer a {
-    color: var(--primary-color);
-    text-decoration: none;
-    font-weight: 600;
-}
-
-.auth-footer a:hover {
-    text-decoration: underline;
-}
-
-/* Профиль */
-.profile-container {
-    padding: 2rem 0;
-}
-
-.profile-header {
-    margin-bottom: 2rem;
-}
-
-.profile-header h1 {
-    font-size: 2rem;
-    margin-bottom: 0.5rem;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-}
-
-.profile-subtitle {
-    color: var(--text-secondary);
-    font-size: 0.9rem;
-}
-
-.stats-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 1rem;
-    margin-bottom: 2rem;
-}
-
-.stat-card {
-    background: rgba(20, 21, 26, 0.8);
-    border: 1px solid var(--border-color);
-    padding: 1.25rem 1rem;
-    border-radius: 10px;
-    text-align: center;
-    transition: border-color 0.2s;
-}
-
-.stat-card:hover {
-    border-color: rgba(245, 158, 11, 0.12);
-}
-
-.stat-value {
-    font-size: 1.75rem;
-    font-weight: 700;
-    color: var(--primary-color);
-    font-family: 'Russo One', sans-serif;
-}
-
-.stat-label {
-    color: var(--text-secondary);
-    margin-top: 0.35rem;
-    font-size: 0.8rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.profile-sections {
-    display: grid;
-    gap: 2rem;
-}
-
-.section h2 {
-    margin-bottom: 1rem;
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    color: #c8c6d0;
-}
-
-.items-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    gap: 0.75rem;
-}
-
-.item-card {
-    background: rgba(14, 15, 19, 0.9);
-    padding: 0.75rem 0.85rem;
-    border-radius: 8px;
-    border-left: 3px solid;
-    border: 1px solid var(--border-color);
-    border-left-width: 3px;
-    transition: border-color 0.2s;
-}
-
-.item-card:hover {
-    border-color: rgba(255,255,255,0.08);
-    border-left-width: 4px;
-}
-
-.item-name {
-    font-weight: 600;
-    margin-bottom: 0.35rem;
-    word-break: break-word;
-    font-size: 0.8rem;
-}
-
-.item-details {
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.7rem;
-    color: var(--text-secondary);
-}
-
-.history-list {
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-}
-
-.history-item {
-    background: rgba(14, 15, 19, 0.9);
-    border: 1px solid var(--border-color);
-    padding: 0.75rem 0.85rem;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    transition: border-color 0.2s;
-}
-
-.history-item:hover {
-    border-color: rgba(255,255,255,0.08);
-}
-
-.history-icon {
-    font-size: 1.25rem;
-    flex-shrink: 0;
-}
-
-.history-content {
-    flex: 1;
-    min-width: 0;
-}
-
-.history-title {
-    font-weight: 600;
-    margin-bottom: 0.2rem;
-    font-size: 0.85rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.history-meta {
-    display: flex;
-    gap: 0.75rem;
-    font-size: 0.7rem;
-    color: var(--text-secondary);
-    flex-wrap: wrap;
-}
-
-.empty-state {
-    color: var(--text-secondary);
-    text-align: center;
-    padding: 2rem;
-    font-size: 0.85rem;
-}
-
-/* Кейсы */
-.cases-container {
-    padding: 1.5rem 0;
-}
-
-.cases-container h1 {
-    font-size: 1.5rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-bottom: 0.25rem;
-}
-
-.page-subtitle {
-    color: var(--text-secondary);
-    margin-bottom: 1.5rem;
-    font-size: 0.85rem;
-}
-
-.cases-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-    gap: 1rem;
-}
-
-.case-card {
-    background: rgba(20, 21, 26, 0.8);
-    border: 1px solid var(--border-color);
-    padding: 1.25rem 1rem;
-    border-radius: 10px;
-    cursor: pointer;
-    transition: all 0.25s;
-}
-
-.case-card:hover {
-    transform: translateY(-3px);
-    border-color: rgba(245, 158, 11, 0.15);
-    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
-}
-
-.case-icon {
-    font-size: 2.5rem;
-    text-align: center;
-    margin-bottom: 0.75rem;
-}
-
-.case-card h3 {
-    text-align: center;
-    margin-bottom: 0.75rem;
-    font-size: 0.9rem;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-}
-
-.case-stats {
-    text-align: center;
-    color: var(--text-secondary);
-    margin-bottom: 0.5rem;
-    font-size: 0.75rem;
-}
-
-.case-rarities {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.2rem;
-    justify-content: center;
-    margin-bottom: 0.75rem;
-}
-
-.rarity-badge {
-    padding: 0.2rem 0.4rem;
-    border-radius: 3px;
-    font-size: 0.65rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-}
-
-/* Модальные окна */
-.modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.8);
-    backdrop-filter: blur(4px);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-}
-
-.modal-content {
-    background: rgba(20, 21, 26, 0.95);
-    border: 1px solid var(--border-color);
-    padding: 1.5rem;
-    border-radius: 10px;
-    text-align: center;
-    min-width: 300px;
-    max-width: 500px;
-    backdrop-filter: blur(8px);
-}
-
-.case-animation {
-    padding: 1.5rem;
-}
-
-.spinner {
-    width: 40px;
-    height: 40px;
-    border: 3px solid rgba(255,255,255,0.06);
-    border-top-color: var(--primary-color);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin: 0 auto 0.75rem;
-}
-
-@keyframes spin {
-    to { transform: rotate(360deg); }
-}
-
-.case-result, .contract-result {
-    padding: 0.75rem;
-}
-
-.result-icon {
-    font-size: 3rem;
-    margin-bottom: 0.75rem;
-}
-
-.result-title {
-    font-size: 1.1rem;
-    font-weight: 700;
-    margin-bottom: 0.5rem;
-}
-
-.result-item-name {
-    color: var(--text-secondary);
-    font-size: 0.85rem;
-}
-
-/* Контракты */
-.contracts-container {
-    padding: 1.5rem 0;
-}
-
-.contracts-info {
-    margin-bottom: 1.5rem;
-}
-
-.info-card {
-    background: rgba(20, 21, 26, 0.8);
-    border: 1px solid var(--border-color);
-    padding: 1.25rem;
-    border-radius: 10px;
-}
-
-.info-card h3 {
-    margin-bottom: 0.75rem;
-    font-size: 0.95rem;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-}
-
-.info-card ol {
-    padding-left: 1.25rem;
-    color: var(--text-secondary);
-    font-size: 0.85rem;
-}
-
-.info-card li {
-    margin-bottom: 0.4rem;
-}
-
-.contracts-groups {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-}
-
-.contract-group {
-    background: rgba(20, 21, 26, 0.8);
-    border: 1px solid var(--border-color);
-    border-radius: 10px;
-    overflow: hidden;
-}
-
-.group-header {
-    padding: 1rem 1.25rem;
-    border-bottom: 1px solid var(--border-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.group-header h3 {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    font-size: 0.85rem;
-    text-transform: uppercase;
-    letter-spacing: 0.04em;
-}
-
-.group-type {
-    padding: 0.2rem 0.45rem;
-    background: rgba(0,0,0,0.3);
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    font-size: 0.7rem;
-    color: var(--text-secondary);
-}
-
-.group-count {
-    color: var(--text-secondary);
-    font-size: 0.8rem;
-}
-
-.group-items {
-    padding: 0.75rem;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-    gap: 0.4rem;
-    max-height: 400px;
-    overflow-y: auto;
-}
-
-.contract-item {
-    background: rgba(14, 15, 19, 0.9);
-    border: 1px solid var(--border-color);
-    padding: 0.6rem 0.75rem;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    cursor: pointer;
-    transition: all 0.2s;
-    border: 2px solid transparent;
-}
-
-.contract-item:hover {
-    background: var(--bg-light);
-}
-
-.contract-item.selected {
-    border-color: var(--primary-color);
-    background: rgba(79, 70, 229, 0.1);
-}
-
-.item-checkbox {
-    width: 20px;
-    height: 20px;
-    border: 2px solid var(--border-color);
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.contract-item.selected .item-checkbox {
-    background: var(--primary-color);
-    border-color: var(--primary-color);
-}
-
-.contract-item.selected .item-checkbox::after {
-    content: "✓";
-    color: white;
-    font-size: 14px;
-}
-
-.contract-slot {
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid #8b7355;
-    border-radius: 4px;
-    padding: 10px;
-    min-height: 70px;
-}
-
-#contractScribble {
-    width: 100%;
-    padding: 10px;
-    background: transparent;
-    border: 1px dashed #8b7355;
-    color: #d4c5a9;
-    font-family: 'Brush Script MT', cursive;
-    font-size: 18px;
-    text-align: center;
-    margin-bottom: 15px;
-    outline: none;
-}
-
-#contractScribble:focus {
-    border-color: #d4c5a9;
-}
-
-/* Контракт в стиле CS:GO */
-.contract-paper {
-    background: #1a1a1a;
-    background-image: 
-        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
-    background-size: 20px 20px;
-    border: 2px solid #8b7355;
-    border-radius: 4px;
-    padding: 30px;
-    position: relative;
-    box-shadow: 
-        inset 0 0 50px rgba(0, 0, 0, 0.5),
-        0 10px 30px rgba(0, 0, 0, 0.5);
-}
-
-.contract-paper::before {
-    content: '';
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    right: 10px;
-    bottom: 10px;
-    border: 1px solid rgba(139, 115, 85, 0.3);
-    pointer-events: none;
-}
-
-.contract-header {
-    text-align: center;
-    margin-bottom: 30px;
-    border-bottom: 2px solid #8b7355;
-    padding-bottom: 15px;
-}
-
-.contract-header h2 {
-    color: #d4c5a9;
-    text-transform: uppercase;
-    letter-spacing: 3px;
-    font-size: 24px;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.contract-items-grid {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 15px;
-    margin: 30px 0;
-}
-
-.contract-slot.filled {
-    background: rgba(139, 115, 85, 0.2);
-    border-color: #d4c5a9;
-}
-
-.contract-slot-content {
-    font-family: 'Courier New', monospace;
-    color: #d4c5a9;
-    font-size: 11px;
-    line-height: 1.4;
-    word-break: break-word;
-}
-
-.contract-signature-line {
-    margin-top: 30px;
-    border-top: 1px solid #8b7355;
-    padding-top: 20px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.contract-signature {
-    font-family: 'Brush Script MT', cursive;
-    color: #8b7355;
-    font-size: 20px;
-}
-
-.contract-stamp {
-    width: 80px;
-    height: 80px;
-    border: 3px double #8b7355;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: #8b7355;
-    transform: rotate(-15deg);
-    opacity: 0;
-    transition: all 0.5s;
-}
-
-.contract-stamp.active {
-    opacity: 1;
-    transform: rotate(-15deg) scale(1.1);
-}
-
-/* GLOW эффекты для редкостей */
-.glow-consumer-grade { box-shadow: 0 0 40px rgba(176, 176, 176, 0.6); }
-.glow-industrial-grade { box-shadow: 0 0 40px rgba(94, 152, 217, 0.6); }
-.glow-mil-spec, .glow-mil-spec-grade { box-shadow: 0 0 40px rgba(75, 105, 255, 0.6); }
-.glow-restricted { box-shadow: 0 0 40px rgba(136, 71, 255, 0.6); }
-.glow-classified { box-shadow: 0 0 40px rgba(211, 44, 230, 0.6); }
-.glow-covert { box-shadow: 0 0 40px rgba(235, 75, 75, 0.6); }
-.glow-rare-special-item, .glow-extraordinary { box-shadow: 0 0 40px rgba(255, 215, 0, 0.6); }
-
-.item-info {
-    flex: 1;
-    min-width: 0;
-}
-
-.item-info .item-name {
-    font-size: 0.9rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.item-meta {
-    font-size: 0.8rem;
-    color: var(--text-secondary);
-}
-
-.group-footer {
-    padding: 1rem 1.5rem;
-    border-top: 1px solid var(--border-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.selected-count {
-    color: var(--text-secondary);
-}
-
-.empty-state-large {
-    text-align: center;
-    padding: 4rem;
-}
-
-.empty-icon {
-    font-size: 4rem;
-    margin-bottom: 1rem;
-}
-
-.empty-state-large h3 {
-    margin-bottom: 0.5rem;
-}
-
-.empty-state-large p {
-    color: var(--text-secondary);
-    margin-bottom: 2rem;
-}
-
-/* Редкости */
-.rarity-consumer-grade { border-left-color: var(--rarity-consumer); }
-.rarity-industrial-grade { border-left-color: var(--rarity-industrial); }
-.rarity-mil-spec, .rarity-mil-spec-grade { border-left-color: var(--rarity-mil-spec); }
-.rarity-restricted { border-left-color: var(--rarity-restricted); }
-.rarity-classified { border-left-color: var(--rarity-classified); }
-.rarity-covert { border-left-color: var(--rarity-covert); }
-.rarity-rare-special-item, .rarity-extraordinary { border-left-color: var(--rarity-rare-special); }
-.rarity-contraband { border-left-color: var(--rarity-contraband); }
-
-.rarity-consumer-grade { color: var(--rarity-consumer); }
-.rarity-industrial-grade { color: var(--rarity-industrial); }
-.rarity-mil-spec, .rarity-mil-spec-grade { color: var(--rarity-mil-spec); }
-.rarity-restricted { color: var(--rarity-restricted); }
-.rarity-classified { color: var(--rarity-classified); }
-.rarity-covert { color: var(--rarity-covert); }
-.rarity-rare-special-item, .rarity-extraordinary { color: var(--rarity-rare-special); }
-
-.rarity-badge.rarity-consumer-grade { background: var(--rarity-consumer); color: black; }
-.rarity-badge.rarity-industrial-grade { background: var(--rarity-industrial); color: white; }
-.rarity-badge.rarity-mil-spec { background: var(--rarity-mil-spec); color: white; }
-.rarity-badge.rarity-restricted { background: var(--rarity-restricted); color: white; }
-.rarity-badge.rarity-classified { background: var(--rarity-classified); color: white; }
-.rarity-badge.rarity-covert { background: var(--rarity-covert); color: white; }
-.rarity-badge.rarity-rare-special-item { background: var(--rarity-rare-special); color: black; }
-
-/* Инвентарь */
-.inventory-container {
-    padding: 1.5rem 0;
-}
-
-.inventory-filters {
-    display: flex;
-    gap: 0.75rem;
-    margin-bottom: 1rem;
-    flex-wrap: wrap;
-}
-
-.filter-select {
-    padding: 0.4rem 0.7rem;
-    background: rgba(0,0,0,0.3);
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    color: var(--text-primary);
-    cursor: pointer;
-    font-family: 'Rajdhani', sans-serif;
-    font-size: 0.8rem;
-    outline: none;
-}
-
-.filter-select:focus {
-    border-color: rgba(245, 158, 11, 0.3);
-}
-
-.inventory-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 0.85rem;
-}
-
-.inventory-grid-detailed {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
-    gap: 12px;
-}
-
-.inventory-skin-card {
-    background: rgba(20, 21, 26, 0.8);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    padding: 10px;
-    cursor: pointer;
-    transition: all 0.25s;
-    border: 1px solid var(--border-color);
-    position: relative;
-}
-
-.inventory-skin-card:hover {
-    border-color: rgba(245, 158, 11, 0.15);
-}
-
-.inventory-item {
-    background: rgba(20, 21, 26, 0.8);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    overflow: hidden;
-}
-
-.inventory-item-header {
-    padding: 0.65rem 0.75rem;
-    border-bottom: 1px solid var(--border-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.inventory-skin-card.selected {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
-}
-
-.inventory-skin-card .skin-image-container {
-    width: 100%;
-    height: 110px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-bottom: 8px;
-    background: rgba(0,0,0,0.2);
-    border-radius: 4px;
-}
-
-.inventory-skin-card .skin-image {
-    max-width: 100%;
-    max-height: 110px;
-    object-fit: contain;
-}
-
-.inventory-skin-card .item-checkbox {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    width: 20px;
-    height: 20px;
-    border: 2px solid var(--border-color);
-    border-radius: 4px;
-    background: var(--bg-dark);
-}
-
-.inventory-skin-card.selected .item-checkbox {
-    background: var(--primary-color);
-    border-color: var(--primary-color);
-}
-
-.inventory-skin-card.selected .item-checkbox::after {
-    content: "✓";
-    color: white;
-    font-size: 14px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-}
-
-.inventory-item-body {
-    padding: 0.75rem;
-}
-
-.inventory-item-footer {
-    padding: 0.75rem;
-    border-top: 1px solid var(--border-color);
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-}
-
-.item-type-badge {
-    padding: 0.25rem 0.5rem;
-    background: var(--bg-light);
-    border-radius: 4px;
-    font-size: 0.75rem;
-}
-
-.skin-info {
-    font-size: 12px;
-}
-
-.skin-name {
-    font-weight: 500;
-    margin-bottom: 4px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.skin-details {
-    display: flex;
-    justify-content: space-between;
-    color: var(--text-secondary);
-    font-size: 11px;
-}
-
-/* Кейс открытие */
-.case-opening-modal {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: rgba(0, 0, 0, 0.95);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    pointer-events: all;
-}
-
-.case-scroll-container {
-    width: 100%;
-    max-width: 900px;
-    height: 280px;
-    position: relative;
-    overflow: hidden;
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-    border-radius: 12px;
-    border: 2px solid var(--border-color);
-    margin: 0 auto;
-}
-
-.case-scroll-track {
-    display: flex;
-    position: absolute;
-    top: 5%;
-    transform: translateY(50%);
-    will-change: left;
-    transition: none;
-    left: 0;
-}
-
-.scroll-item {
-    width: 200px;
-    height: 240px;
-    margin: 0 10px;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg-card);
-    border-radius: 8px;
-    padding: 15px;
-    border: 2px solid transparent;
-    box-sizing: border-box;
-}
-
-.scroll-item img {
-    width: 140px;
-    height: 110px;
-    object-fit: contain;
-    margin-bottom: 10px;
-    pointer-events: none;
-}
-
-.scroll-item-name {
-    font-size: 11px;
-    text-align: center;
-    word-break: break-word;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    width: 100%;
-}
-
-.scroll-item-rarity {
-    font-size: 10px;
-    margin-top: 5px;
-    text-align: center;
-}
-
-.case-center-indicator {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    bottom: 0;
-    width: 4px;
-    background: linear-gradient(to bottom, transparent, #ffd700, #ffd700, transparent);
-    transform: translateX(-50%);
-    z-index: 10;
-    box-shadow: 0 0 30px #ffd700;
-    pointer-events: none;
-}
-
-.case-center-indicator::before,
-.case-center-indicator::after {
-    content: '';
-    position: absolute;
-    left: -8px;
-    width: 20px;
-    height: 20px;
-    background: #ffd700;
-    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-}
-
-.case-center-indicator::before {
-    top: -2px;
-    transform: rotate(180deg);
-}
-
-.case-center-indicator::after {
-    bottom: -2px;
-}
-
-.case-result-display {
-    margin-top: 20px;
-    text-align: center;
-    animation: fadeInUp 0.5s;
-}
-
-.case-card-link {
-    text-decoration: none;
-    color: inherit;
-    display: block;
-}
-
-.case-card-link:hover .case-card {
-    transform: translateY(-4px);
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-}
-
-/* Карточки предметов */
-.skin-image {
-    width: 100%;
-    height: auto;
-    border-radius: 4px;
-    margin-bottom: 8px;
-}
-
-.skin-card {
-    position: relative;
-    overflow: hidden;
-    transition: all 0.3s;
-}
-
-.skin-card:hover {
-    transform: translateY(-2px);
-}
-
-.skin-card .skin-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
-    opacity: 0;
-    transition: opacity 0.3s;
-    pointer-events: none;
-}
-
-.skin-card:hover .skin-overlay {
-    opacity: 1;
-}
-
-/* Анимации */
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes typewriter {
-    from { width: 0; }
-    to { width: 100%; }
-}
-
-@keyframes blink {
-    0%, 100% { border-color: transparent; }
-    50% { border-color: #d4c5a9; }
-}
-
-.typewriter-text {
-    overflow: hidden;
-    border-right: 2px solid #d4c5a9;
-    white-space: nowrap;
-    animation: 
-        typewriter 1s steps(40) 1,
-        blink 0.75s step-end infinite;
-}
-
-/* Модальные окна с запретом закрытия */
-.modal-locked {
-    pointer-events: all;
-}
-
-.modal-locked .modal-content {
-    pointer-events: auto;
-}
-
-.modal-loading {
-    cursor: wait;
-}
-
-.spinner-large {
-    width: 60px;
-    height: 60px;
-    border: 5px solid var(--border-color);
-    border-top-color: var(--primary-color);
-    border-radius: 50%;
-    animation: spin 1s linear infinite;
-    margin: 20px auto;
-}
-
-/* ===== СТИЛИ ДЛЯ CASE_DETAIL ===== */
-.case-detail-container { 
-    padding: 1rem 0; 
-    width: 100%;
-    overflow-x: hidden;
-}
-
-.back-link { 
-    color: var(--text-secondary); 
-    text-decoration: none; 
-    display: inline-block; 
-    margin-bottom: 0.75rem; 
-    font-size: 0.9rem; 
-}
-
-.back-link:hover { 
-    color: var(--text-primary); 
-}
-
-.case-header { 
-    display: flex; 
-    flex-direction: column; 
-    margin-bottom: 1rem; 
-}
-
-.case-title-row { 
-    display: flex; 
-    align-items: center; 
-    justify-content: space-between; 
-    flex-wrap: wrap; 
-    gap: 0.75rem; 
-    margin-bottom: 0.75rem; 
-}
-
-.case-title-row h1 { 
-    font-size: 1.5rem; 
-    margin: 0; 
-    word-break: break-word;
-}
-
-.case-info-badge { 
-    display: flex; 
-    align-items: center; 
-    gap: 0.75rem; 
-    flex-wrap: wrap;
-}
-
-.case-price-tag { 
-    background: var(--bg-card); 
-    padding: 0.4rem 0.8rem; 
-    border-radius: 8px; 
-    border: 1px solid var(--success-color); 
-    color: var(--success-color); 
-    font-weight: bold; 
-    font-size: 0.9rem;
-}
-
-.case-subtitle { 
-    color: var(--text-secondary); 
-    font-size: 0.85rem; 
-}
-
-.opening-controls { 
-    display: flex; 
-    align-items: center; 
-    gap: 0.75rem; 
-    flex-wrap: wrap; 
-    background: var(--bg-card); 
-    padding: 0.75rem 1rem; 
-    border-radius: 12px; 
-}
-
-.total-price-display { 
-    font-size: 1rem; 
-    font-weight: bold; 
-    color: var(--success-color); 
-    margin-left: auto; 
-}
-
-.total-price-display span { 
-    color: var(--text-secondary); 
-    font-size: 0.8rem; 
-    font-weight: normal; 
-}
-
-.count-selector { 
-    display: flex; 
-    align-items: center; 
-    gap: 0.5rem; 
-    flex-wrap: wrap;
-}
-
-.count-selector label { 
-    color: var(--text-secondary); 
-    font-size: 0.85rem; 
-}
-
-.count-buttons { 
-    display: flex; 
-    gap: 0.3rem; 
-    flex-wrap: wrap;
-}
-
-.count-btn { 
-    padding: 0.3rem 0.7rem; 
-    background: var(--bg-dark); 
-    border: 1px solid var(--border-color); 
-    color: var(--text-primary); 
-    border-radius: 6px; 
-    cursor: pointer; 
-    font-size: 0.8rem; 
-    transition: all 0.2s; 
-    min-width: 40px;
-}
-
-.count-btn.active { 
-    background: var(--primary-color); 
-    border-color: var(--primary-color); 
-}
-
-.case-opening-section { 
-    background: var(--bg-card); 
-    border-radius: 12px; 
-    padding: 1rem; 
-    margin-bottom: 1rem; 
-}
-
-.opening-animation-container { 
-    width: 100%; 
-}
-
-/* Speed lines overlay for scroll */
-.scroll-speed-lines {
-    position: absolute;
-    inset: 0;
-    z-index: 5;
-    pointer-events: none;
-    background: repeating-linear-gradient(
-        90deg,
-        transparent 0px,
-        rgba(255,255,255,0.015) 2px,
-        transparent 4px,
-        transparent 40px
-    );
-    animation: speedLinesMove 0.4s linear infinite;
-}
-
-@keyframes speedLinesMove {
-    from { transform: translateX(0); }
-    to { transform: translateX(40px); }
-}
-
-/* Flash overlay on stop */
-.scroll-flash {
-    position: absolute;
-    inset: 0;
-    z-index: 15;
-    pointer-events: none;
-    opacity: 0;
-    transition: opacity 0.1s;
-    border-radius: 6px;
-}
-
-.scroll-flash.burst {
-    opacity: 1;
-}
-
-.scroll-flash.gold {
-    background: radial-gradient(ellipse at center, rgba(255,215,0,0.4) 0%, transparent 70%);
-}
-
-.scroll-flash.blue {
-    background: radial-gradient(ellipse at center, rgba(75,105,255,0.4) 0%, transparent 70%);
-}
-
-.scroll-flash.purple {
-    background: radial-gradient(ellipse at center, rgba(136,71,255,0.4) 0%, transparent 70%);
-}
-
-.scroll-flash.pink {
-    background: radial-gradient(ellipse at center, rgba(211,44,230,0.4) 0%, transparent 70%);
-}
-
-.scroll-flash.red {
-    background: radial-gradient(ellipse at center, rgba(235,75,75,0.4) 0%, transparent 70%);
-}
-
-/* Particle burst */
-.particle-burst {
-    position: absolute;
-    inset: 0;
-    z-index: 20;
-    pointer-events: none;
-    overflow: hidden;
-}
-
-.particle-burst .pt {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: 50%;
-    animation: ptFly 0.8s ease-out forwards;
-}
-
-@keyframes ptFly {
-    0% {
-        opacity: 1;
-        transform: translate(0, 0) scale(1);
-    }
-    100% {
-        opacity: 0;
-        transform: translate(var(--px), var(--py)) scale(0);
-    }
-}
-
-/* Slot machine (3 vertical reels) */
-.slot-machine {
-    position: relative;
-    width: 100%;
-    max-width: 660px;
-    margin: 0 auto;
-    padding: 20px 10px 10px;
-    background: linear-gradient(135deg, #1a1a2e 0%, #0d0d1a 100%);
-    border-radius: 16px;
-    border: 2px solid rgba(255,255,255,0.06);
-    box-shadow: 0 0 60px rgba(0,0,0,0.5), inset 0 0 40px rgba(0,0,0,0.3);
-}
-
-.slot-reels {
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-    position: relative;
-    z-index: 2;
-}
-
-.slot-reel {
-    width: 160px;
-    height: 240px;
-    overflow: hidden;
-    border-radius: 8px;
-    background: rgba(0,0,0,0.4);
-    border: 2px solid rgba(255,255,255,0.08);
-    position: relative;
-}
-
-.slot-track {
-    display: flex;
-    flex-direction: column;
-    will-change: transform;
-}
-
-.slot-item {
-    width: 100%;
-    height: 80px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    border-bottom: 1px solid rgba(255,255,255,0.04);
-    border-left: 3px solid;
-    box-sizing: border-box;
-    padding: 4px;
-    transition: background 0.3s, box-shadow 0.3s;
-    flex-shrink: 0;
-}
-
-.slot-item img {
-    width: 50px;
-    height: 40px;
-    object-fit: contain;
-    pointer-events: none;
-}
-
-.slot-item-name {
-    font-size: 8px;
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-    margin-top: 2px;
-    color: var(--text-secondary);
-}
-
-.slot-item-hit {
-    background: rgba(255,215,0,0.12);
-    box-shadow: inset 0 0 20px rgba(255,215,0,0.15);
-}
-
-.slot-win-line {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: calc(100% - 40px);
-    height: 80px;
-    border: 2px solid rgba(255,215,0,0.5);
-    border-radius: 6px;
-    z-index: 5;
-    pointer-events: none;
-    box-shadow: 0 0 20px rgba(255,215,0,0.15), inset 0 0 20px rgba(255,215,0,0.05);
-}
-
-.slot-win-line::before,
-.slot-win-line::after {
-    content: '';
-    position: absolute;
-    left: -4px;
-    width: calc(100% + 8px);
-    height: 2px;
-    background: linear-gradient(90deg, transparent, #ffd700, transparent);
-}
-
-.slot-win-line::before { top: -2px; }
-.slot-win-line::after { bottom: -2px; }
-
-.slot-frame-glow {
-    position: absolute;
-    inset: -4px;
-    border-radius: 18px;
-    border: 3px solid transparent;
-    z-index: 1;
-    pointer-events: none;
-    transition: all 0.8s;
-}
-
-.slot-result-display {
-    text-align: center;
-    margin-top: 12px;
-    position: relative;
-    z-index: 10;
-}
-
-.slot-win-banner, .slot-lose-banner {
-    padding: 12px 20px;
-    border-radius: 10px;
-}
-
-.slot-win-banner {
-    background: rgba(255,215,0,0.1);
-    border: 1px solid rgba(255,215,0,0.3);
-    animation: slotBannerIn 0.5s ease-out;
-}
-
-.slot-lose-banner {
-    background: rgba(239,68,68,0.08);
-    border: 1px solid rgba(239,68,68,0.2);
-    animation: slotBannerIn 0.5s ease-out;
-}
-
-.slot-win-title {
-    font-family: 'Russo One', sans-serif;
-    font-size: 1.4rem;
-    color: #ffd700;
-    text-shadow: 0 0 20px rgba(255,215,0,0.4);
-    letter-spacing: 0.06em;
-}
-
-.slot-win-subtitle, .slot-lose-subtitle {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    margin-top: 4px;
-}
-
-.slot-lose-title {
-    font-family: 'Russo One', sans-serif;
-    font-size: 1.1rem;
-    color: var(--danger-color);
-}
-
-@keyframes slotBannerIn {
-    from { opacity: 0; transform: translateY(20px) scale(0.95); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
-}
-
-/* Slot activation badges */
-.slot-badge {
-    position: absolute;
-    top: 2px;
-    right: 2px;
-    font-size: 0.6rem;
-    line-height: 1;
-    z-index: 5;
-    pointer-events: none;
-    filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
-}
-.slot-badge-extra_spin,
-.slot-badge-free_spin,
-.slot-badge-guaranteed,
-.slot-badge-double,
-.slot-badge-quintuple {
-    padding: 1px 3px;
-    border-radius: 3px;
-    font-size: 0.55rem;
-    font-weight: 700;
-}
-.slot-badge-extra_spin { color: #8b5cf6; }
-.slot-badge-free_spin { color: #10b981; }
-.slot-badge-guaranteed { color: #3b82f6; }
-.slot-badge-double { color: #f59e0b; }
-.slot-badge-quintuple { color: #ef4444; }
-
-/* Slot activation legend */
-.slot-legend {
-    margin-top: 14px;
-    padding: 16px;
-    background: linear-gradient(135deg, rgba(30,28,45,0.98) 0%, rgba(25,23,40,0.98) 100%);
-    border: 1px solid rgba(255,255,255,0.12);
-    border-radius: 10px;
-    position: relative;
-    overflow: hidden;
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 4px 24px rgba(0,0,0,0.5);
-}
-.slot-legend::before {
-    content: '';
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.5), transparent);
-}
-.slot-legend::after {
-    content: '';
-    position: absolute;
-    bottom: 0; left: 25%; right: 25%;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.2), transparent);
-}
-.slot-legend-header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    margin-bottom: 14px;
-    position: relative;
-}
-.slot-legend-header::after {
-    content: '';
-    position: absolute;
-    bottom: -6px;
-    left: 30%;
-    right: 30%;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.25), transparent);
-}
-.slot-legend-symbol {
-    font-size: 0.6rem;
-    color: rgba(245,158,11,0.4);
-    letter-spacing: 6px;
-}
-.slot-legend-label {
-    font-family: 'Russo One', sans-serif;
-    font-size: 0.7rem;
-    color: rgba(245,158,11,0.7);
-    text-transform: uppercase;
-    letter-spacing: 0.2em;
-}
-.slot-legend-grid {
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    gap: 8px;
-}
-.slot-legend-card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 5px;
-    padding: 12px 4px 10px;
-    border-radius: 8px;
-    background: rgba(255,255,255,0.06);
-    border: 1px solid rgba(255,255,255,0.08);
-    cursor: default;
-    transition: background 0.25s, border-color 0.25s, transform 0.2s, box-shadow 0.25s;
-    position: relative;
-}
-.slot-legend-card:hover {
-    background: rgba(255,255,255,0.1);
-    border-color: rgba(255,255,255,0.18);
-    transform: translateY(-3px);
-    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
-}
-.slot-legend-card[data-act="extra_spin"] {
-    background: rgba(139,92,246,0.1);
-    border-color: rgba(139,92,246,0.18);
-}
-.slot-legend-card[data-act="extra_spin"]:hover {
-    background: rgba(139,92,246,0.18);
-    border-color: rgba(139,92,246,0.3);
-    box-shadow: 0 4px 20px rgba(139,92,246,0.2);
-}
-.slot-legend-card[data-act="double"] {
-    background: rgba(245,158,11,0.1);
-    border-color: rgba(245,158,11,0.18);
-}
-.slot-legend-card[data-act="double"]:hover {
-    background: rgba(245,158,11,0.18);
-    border-color: rgba(245,158,11,0.3);
-    box-shadow: 0 4px 20px rgba(245,158,11,0.2);
-}
-.slot-legend-card[data-act="quintuple"] {
-    background: rgba(239,68,68,0.1);
-    border-color: rgba(239,68,68,0.18);
-}
-.slot-legend-card[data-act="quintuple"]:hover {
-    background: rgba(239,68,68,0.18);
-    border-color: rgba(239,68,68,0.3);
-    box-shadow: 0 4px 20px rgba(239,68,68,0.2);
-}
-.slot-legend-card[data-act="guaranteed"] {
-    background: rgba(59,130,246,0.1);
-    border-color: rgba(59,130,246,0.18);
-}
-.slot-legend-card[data-act="guaranteed"]:hover {
-    background: rgba(59,130,246,0.18);
-    border-color: rgba(59,130,246,0.3);
-    box-shadow: 0 4px 20px rgba(59,130,246,0.2);
-}
-.slot-legend-card[data-act="free_spin"] {
-    background: rgba(16,185,129,0.1);
-    border-color: rgba(16,185,129,0.18);
-}
-.slot-legend-card[data-act="free_spin"]:hover {
-    background: rgba(16,185,129,0.18);
-    border-color: rgba(16,185,129,0.3);
-    box-shadow: 0 4px 20px rgba(16,185,129,0.2);
-}
-.slc-icon {
-    font-size: 1.1rem;
-    line-height: 1;
-    font-family: 'Russo One', sans-serif;
-    font-weight: 700;
-    filter: drop-shadow(0 0 8px currentColor);
-    transition: transform 0.25s, filter 0.25s;
-}
-.slot-legend-card:hover .slc-icon {
-    transform: scale(1.2);
-    filter: drop-shadow(0 0 14px currentColor);
-}
-.slc-name {
-    font-family: 'Russo One', sans-serif;
-    font-size: 0.6rem;
-    color: #fff;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    white-space: nowrap;
-    transition: color 0.2s;
-}
-.slc-desc {
-    font-family: 'Rajdhani', sans-serif;
-    font-size: 0.6rem;
-    color: rgba(255,255,255,0.5);
-    text-align: center;
-    line-height: 1.2;
-    transition: color 0.25s;
-}
-.slot-legend-card:hover .slc-desc {
-    color: rgba(255,255,255,0.75);
-}
-
-/* Slot machine style frame */
-.scroll-container-full {
-    position: relative;
-    width: 100%;
-    height: 220px;
-    max-height: 220px;
-    overflow: hidden;
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-    border-radius: 8px;
-    border: 2px solid var(--border-color);
-    box-shadow:
-        inset 0 0 60px rgba(0,0,0,0.4),
-        0 0 30px rgba(0,0,0,0.3);
-}
-
-.scroll-container-full::before {
-    content: '';
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    height: 30px;
-    background: linear-gradient(to bottom, rgba(0,0,0,0.7), transparent);
-    z-index: 8;
-    pointer-events: none;
-}
-
-.scroll-container-full::after {
-    content: '';
-    position: absolute;
-    bottom: 0; left: 0; right: 0;
-    height: 30px;
-    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
-    z-index: 8;
-    pointer-events: none;
-}
-
-/* Target highlight ring */
-.target-highlight-ring {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 130px;
-    height: 200px;
-    border: 2px solid transparent;
-    border-radius: 10px;
-    z-index: 9;
-    pointer-events: none;
-    transition: all 0.3s;
-}
-
-.target-highlight-ring.glow {
-    border-color: #ffd700;
-    box-shadow: 0 0 30px rgba(255,215,0,0.3), inset 0 0 30px rgba(255,215,0,0.1);
-}
-
-.scroll-track-full {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    will-change: transform;
-    transform: translateZ(0);
-    backface-visibility: hidden;
-}
-
-.scroll-item-full {
-    width: 120px;
-    height: 190px;
-    margin: 8px 8px;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: var(--bg-card);
-    border-radius: 8px;
-    padding: 8px 4px;
-    border: 2px solid transparent;
-    box-sizing: border-box;
-}
-
-.scroll-item-full img { 
-    width: 80px; 
-    height: 70px; 
-    object-fit: contain; 
-}
-
-.scroll-item-name-full {
-    font-size: 9px;
-    text-align: center;
-    margin-top: 4px;
-    word-break: break-word;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    width: 100%;
-}
-
-.scroll-item-rarity-full { 
-    font-size: 8px; 
-    margin-top: 3px; 
-    font-weight: bold; 
-}
-
-.center-indicator-full {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: linear-gradient(to bottom, transparent, #ffd700, #ffd700, transparent);
-    transform: translateX(-50%);
-    z-index: 10;
-    box-shadow: 0 0 20px #ffd700;
-    pointer-events: none;
-}
-
-/* МНОЖЕСТВЕННЫЕ СКРОЛЛЫ */
-.multi-scroll-grid {
-    display: grid;
-    gap: 0.75rem;
-    width: 100%;
-}
-
-.scroll-wrapper-full {
-    width: 100%;
-    text-align: center;
-}
-
-.scroll-container-mini {
-    width: 100%;
-    height: 150px;
-    max-height: 150px;
-    position: relative;
-    overflow: hidden;
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-    border-radius: 8px;
-    border: 2px solid var(--border-color);
-    box-shadow:
-        inset 0 0 30px rgba(0,0,0,0.3),
-        0 0 15px rgba(0,0,0,0.2);
-}
-
-.scroll-container-mini::before {
-    content: '';
-    position: absolute;
-    top: 0; left: 0; right: 0;
-    height: 20px;
-    background: linear-gradient(to bottom, rgba(0,0,0,0.6), transparent);
-    z-index: 8;
-    pointer-events: none;
-}
-
-.scroll-container-mini::after {
-    content: '';
-    position: absolute;
-    bottom: 0; left: 0; right: 0;
-    height: 20px;
-    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
-    z-index: 8;
-    pointer-events: none;
-}
-
-.mini-target-ring {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 80px;
-    height: 140px;
-    border: 2px solid transparent;
-    border-radius: 6px;
-    z-index: 9;
-    pointer-events: none;
-    transition: all 0.3s;
-}
-
-.mini-target-ring.glow {
-    border-color: #ffd700;
-    box-shadow: 0 0 20px rgba(255,215,0,0.25), inset 0 0 20px rgba(255,215,0,0.08);
-}
-
-.scroll-track-mini {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    will-change: transform;
-    transform: translateZ(0);
-}
-
-.scroll-item-mini {
-    width: 70px;
-    height: 130px;
-    margin: 6px 6px;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: var(--bg-card);
-    border-radius: 6px;
-    padding: 5px 3px;
-    border: 2px solid transparent;
-    box-sizing: border-box;
-}
-
-.scroll-item-mini img { 
-    width: 45px; 
-    height: 45px; 
-    object-fit: contain; 
-}
-
-.scroll-item-name-mini {
-    font-size: 7px;
-    text-align: center;
-    margin-top: 3px;
-    word-break: break-word;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.center-indicator-mini {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    bottom: 0;
-    width: 2px;
-    background: #ffd700;
-    transform: translateX(-50%);
-    z-index: 10;
-    box-shadow: 0 0 15px #ffd700;
-    pointer-events: none;
-}
-
-.scroll-label { 
-    margin-top: 0.3rem; 
-    font-size: 0.7rem; 
-    color: var(--text-secondary); 
-}
-
-/* Результаты */
-.results-grid-compact { 
-    display: flex; 
-    flex-wrap: wrap; 
-    gap: 0.4rem; 
-    margin-top: 0.75rem; 
-}
-
-.result-item-compact { 
-    background: var(--bg-dark); 
-    padding: 0.4rem; 
-    border-radius: 6px; 
-    display: flex; 
-    align-items: center; 
-    gap: 0.4rem; 
-    border-left: 3px solid; 
-    flex: 1 0 auto; 
-    min-width: 160px; 
-}
-
-.result-item-compact img { 
-    width: 35px; 
-    height: 30px; 
-    object-fit: contain; 
-}
-
-/* Enhanced result cards */
-.case-results-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-    margin-bottom: 0.75rem;
-}
-
-.case-results-title {
-    font-family: 'Russo One', sans-serif;
-    font-size: 1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-}
-
-.case-results-actions {
-    display: flex;
-    gap: 0.4rem;
-}
-
-.results-grid-enhanced {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-    gap: 0.5rem;
-}
-
-.result-card-enhanced {
-    background: var(--bg-dark);
-    border-radius: 8px;
-    overflow: hidden;
-    position: relative;
-    border: 1px solid var(--border-color);
-    transition: all 0.25s;
-    opacity: 0;
-    animation: fadeInUp 0.4s ease-out forwards;
-}
-
-.result-card-enhanced:hover {
-    transform: translateY(-2px);
-    border-color: var(--glow, var(--primary-color));
-    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
-}
-
-.result-card-glow {
-    position: absolute;
-    inset: 0;
-    opacity: 0.3;
-    pointer-events: none;
-}
-
-.result-card-enhanced img {
-    width: 100%;
-    height: 70px;
-    object-fit: contain;
-    padding: 0.5rem 0.5rem 0;
-    display: block;
-    position: relative;
-    z-index: 1;
-}
-
-.result-card-body {
-    padding: 0.35rem 0.5rem 0.4rem;
-    position: relative;
-    z-index: 1;
-}
-
-.result-name-enhanced {
-    font-size: 0.65rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: 0.1rem;
-}
-
-.result-meta-enhanced {
-    font-size: 0.55rem;
-    color: var(--text-secondary);
-    margin-bottom: 0.25rem;
-}
-
-.result-footer-enhanced {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.result-price-enhanced {
-    font-size: 0.75rem;
-    color: var(--success-color);
-    font-weight: bold;
-}
-
-.result-count-badge {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    background: var(--primary-color);
-    color: white;
-    border-radius: 50%;
-    width: 18px;
-    height: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 9px;
-    font-weight: bold;
-    z-index: 2;
-}
-
-.result-info-compact { 
-    flex: 1; 
-    min-width: 0; 
-}
-
-.result-name-compact { 
-    font-size: 10px; 
-    font-weight: 500; 
-    white-space: nowrap; 
-    overflow: hidden; 
-    text-overflow: ellipsis; 
-}
-
-.result-meta-compact { 
-    display: flex; 
-    gap: 0.5rem; 
-    font-size: 9px; 
-    color: var(--text-secondary); 
-    flex-wrap: wrap;
-}
-
-.result-count-badge {
-    background: var(--primary-color);
-    color: white;
-    border-radius: 50%;
-    width: 18px;
-    height: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 9px;
-    font-weight: bold;
-    margin-left: 3px;
-}
-
-.btn-sell-result {
-    padding: 2px 6px;
-    background: transparent;
-    border: 1px solid var(--danger-color);
-    color: var(--danger-color);
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 8px;
-}
-
-.btn-sell-result:hover {
-    background: var(--danger-color);
-    color: white;
-}
-
-/* Список предметов в кейсе */
-.case-items-section { 
-    margin-top: 1rem; 
-}
-
-.case-items-section h2 { 
-    font-size: 1.2rem; 
-    margin-bottom: 0.75rem; 
-}
-
-.rarity-filters { 
-    display: flex; 
-    flex-wrap: wrap; 
-    gap: 0.3rem; 
-    margin-bottom: 0.75rem; 
-}
-
-.filter-btn { 
-    padding: 0.25rem 0.6rem; 
-    background: var(--bg-card); 
-    border: 1px solid var(--border-color); 
-    color: var(--text-secondary); 
-    border-radius: 20px; 
-    cursor: pointer; 
-    font-size: 0.7rem; 
-    transition: all 0.2s; 
-}
-
-.filter-btn.active { 
-    background: var(--primary-color); 
-    color: white; 
-    border-color: var(--primary-color); 
-}
-
-.filter-btn:hover { 
-    background: var(--bg-light); 
-}
-
-.rarity-section { 
-    margin-bottom: 0.75rem; 
-}
-
-.rarity-section h3 { 
-    font-size: 0.9rem; 
-    margin-bottom: 0.4rem; 
-    padding-bottom: 0.2rem; 
-    border-bottom: 2px solid; 
-    display: flex; 
-    align-items: center; 
-    gap: 0.4rem; 
-}
-
-.rarity-count { 
-    font-size: 0.7rem; 
-    color: var(--text-secondary); 
-    font-weight: normal; 
-}
-
-.items-grid-compact { 
-    display: grid; 
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 
-    gap: 0.4rem; 
-}
-
-.item-card-compact { 
-    background: var(--bg-card); 
-    border-radius: 6px; 
-    padding: 0.4rem; 
-    border-left: 3px solid; 
-    cursor: pointer; 
-    transition: all 0.2s; 
-}
-
-.item-card-compact:hover { 
-    transform: translateY(-1px); 
-    background: var(--bg-light); 
-}
-
-.item-card-compact img { 
-    width: 100%; 
-    height: 60px; 
-    object-fit: contain; 
-    margin-bottom: 0.2rem; 
-}
-
-.item-name-compact { 
-    font-size: 9px; 
-    font-weight: 500; 
-    white-space: nowrap; 
-    overflow: hidden; 
-    text-overflow: ellipsis; 
-    margin-bottom: 0.2rem; 
-}
-
-.item-meta-compact { 
-    display: flex; 
-    justify-content: space-between; 
-    font-size: 8px; 
-    color: var(--text-secondary); 
-    flex-wrap: wrap;
-}
-
-.item-price-compact { 
-    font-size: 9px; 
-    font-weight: bold; 
-    color: var(--success-color); 
-    margin-top: 0.2rem; 
-}
-
-/* ===== СТИЛИ ДЛЯ UPGRADE ===== */
-.upgrade-container {
-    padding: 0.75rem 0;
-    width: 100%;
-    overflow-x: hidden;
-}
-
-.upgrade-header {
-    text-align: center;
-    margin-bottom: 1rem;
-}
-
-.upgrade-header h1 {
-    font-size: 1.5rem;
-    background: linear-gradient(135deg, #ffd700, #ff6b6b);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-bottom: 0.25rem;
-}
-
-.upgrade-header p {
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-}
-
-.upgrade-layout {
-    display: grid;
-    grid-template-columns: 280px 1fr 280px;
-    gap: 1rem;
-    margin-bottom: 1.5rem;
-}
-
-.inventory-panel, .target-panel {
-    background: var(--bg-card);
-    border-radius: 12px;
-    border: 1px solid var(--border-color);
-    display: flex;
-    flex-direction: column;
-    max-height: 500px;
-}
-
-.panel-header, .target-header {
-    padding: 0.75rem;
-    border-bottom: 1px solid var(--border-color);
-    background: var(--bg-card);
-    border-radius: 12px 12px 0 0;
-}
-
-.panel-title {
-    font-size: 0.95rem;
-    font-weight: 600;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.inventory-list, .target-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.4rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-}
-
-.inventory-item-card, .target-item-card {
-    background: var(--bg-dark);
-    border-radius: 8px;
-    padding: 0.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    cursor: pointer;
-    border: 2px solid transparent;
-    transition: all 0.2s;
-}
-
-.inventory-item-card:hover, .target-item-card:hover {
-    background: var(--bg-light);
-    border-color: var(--primary-color);
-}
-
-.inventory-item-card.selected, .target-item-card.selected {
-    border-color: #ffd700;
-    background: rgba(255, 215, 0, 0.1);
-    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
-}
-
-.inventory-item-card.disabled, .target-item-card.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.inventory-item-card img, .target-item-card img {
-    width: 45px;
-    height: 40px;
-    object-fit: contain;
-    background: var(--bg-card);
-    border-radius: 4px;
-    padding: 3px;
-}
-
-.inventory-item-info, .target-item-info {
-    flex: 1;
-    min-width: 0;
-}
-
-.inventory-item-name, .target-item-name {
-    font-size: 0.75rem;
-    font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-bottom: 0.15rem;
-}
-
-.inventory-item-meta, .target-item-meta {
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.65rem;
-    color: var(--text-secondary);
-}
-
-.inventory-item-price, .target-item-price {
-    color: var(--success-color);
-    font-weight: bold;
-}
-
-.wheel-panel {
-    background: var(--bg-card);
-    border-radius: 12px;
-    padding: 1rem;
-    border: 1px solid var(--border-color);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.selected-items-display {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.5rem;
-    margin-bottom: 0.75rem;
-    width: 100%;
-}
-
-.selected-item-mini {
-    text-align: center;
-    flex: 1;
-    min-width: 0;
-}
-
-.selected-item-mini img {
-    width: 60px;
-    height: 50px;
-    object-fit: contain;
-    background: var(--bg-dark);
-    border-radius: 6px;
-    padding: 5px;
-}
-
-.selected-item-mini-name {
-    font-size: 0.65rem;
-    margin-top: 0.2rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.selected-item-mini-price {
-    font-size: 0.7rem;
-    color: var(--success-color);
-    font-weight: bold;
-}
-
-.arrow-icon {
-    font-size: 1.2rem;
-    color: var(--primary-color);
-}
-
-.wheel-container {
-    position: relative;
-    width: 220px;
-    height: 220px;
-    margin: 0.5rem 0;
-}
-
-.wheel {
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background: conic-gradient(
-        from 0deg,
-        #10b981 0deg,
-        #10b981 calc(var(--probability) * 3.6deg / 2),
-        #2d1b1b calc(var(--probability) * 3.6deg / 2),
-        #2d1b1b calc(360deg - var(--probability) * 3.6deg / 2),
-        #10b981 calc(360deg - var(--probability) * 3.6deg / 2),
-        #10b981 360deg
-    );
-    border: 3px solid var(--border-color);
-    box-shadow: 0 0 30px rgba(0,0,0,0.5);
-}
-
-.wheel-pointer {
-    position: absolute;
-    top: -10px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 0;
-    height: 0;
-    border-left: 12px solid transparent;
-    border-right: 12px solid transparent;
-    border-top: 24px solid #ffd700;
-    filter: drop-shadow(0 0 6px #ffd700);
-    z-index: 10;
-}
-
-.wheel-center {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 40px;
-    height: 40px;
-    background: var(--bg-card);
-    border-radius: 50%;
-    border: 2px solid #ffd700;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: bold;
-    font-size: 0.8rem;
-    color: #ffd700;
-    z-index: 5;
-}
-
-.upgrade-actions {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    margin-top: 0.5rem;
-}
-
-.upgrade-btn {
-    padding: 0.6rem 1.5rem;
-    font-size: 1rem;
-    flex: 1;
-}
-
-.quick-btn {
-    width: 38px;
-    height: 38px;
-    border-radius: 8px;
-    border: 1px solid var(--border-color);
-    background: var(--bg-dark);
-    color: var(--text-secondary);
-    font-size: 1.1rem;
-    cursor: pointer;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-
-.quick-btn:hover {
-    border-color: var(--primary-color);
-    color: var(--primary-color);
-}
-
-.quick-btn.active {
-    background: var(--primary-color);
-    color: #fff;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 12px rgba(245, 158, 11, 0.4);
-}
-
-.inv-filter-bar {
-    display: flex;
-    gap: 0.3rem;
-    align-items: center;
-    margin-top: 0.4rem;
-}
-
-.inv-search-input {
-    flex: 1;
-    padding: 0.35rem 0.5rem;
-    background: var(--bg-dark);
-    border: 1px solid var(--border-color);
-    border-radius: 5px;
-    color: var(--text-primary);
-    font-size: 0.75rem;
-    min-width: 0;
-}
-
-.inv-search-input:focus {
-    outline: none;
-    border-color: var(--primary-color);
-}
-
-.inv-sort-group {
-    display: flex;
-    gap: 2px;
-    flex-shrink: 0;
-}
-
-.inv-sort-btn {
-    padding: 0.3rem 0.4rem;
-    background: var(--bg-dark);
-    border: 1px solid var(--border-color);
-    color: var(--text-secondary);
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.7rem;
-    transition: all 0.15s;
-    line-height: 1;
-}
-
-.inv-sort-btn.active {
-    background: var(--primary-color);
-    color: white;
-    border-color: var(--primary-color);
-}
-
-.inv-sort-btn:hover {
-    border-color: var(--primary-color);
-}
-
-.target-search-input {
-    width: 100%;
-    padding: 0.5rem;
-    background: var(--bg-dark);
-    border: 1px solid var(--border-color);
-    border-radius: 6px;
-    color: var(--text-primary);
-    margin-bottom: 0.4rem;
-    font-size: 0.85rem;
-}
-
-.target-search-input:focus {
-    outline: none;
-    border-color: var(--primary-color);
-}
-
-.sort-controls {
-    display: flex;
-    gap: 0.3rem;
-}
-
-.sort-btn {
-    flex: 1;
-    padding: 0.3rem;
-    background: var(--bg-dark);
-    border: 1px solid var(--border-color);
-    color: var(--text-secondary);
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.65rem;
-}
-
-.sort-btn.active {
-    background: var(--primary-color);
-    color: white;
-    border-color: var(--primary-color);
-}
-
-/* История апгрейдов */
-.history-section {
-    background: var(--bg-card);
-    border-radius: 12px;
-    padding: 1rem;
-    border: 1px solid var(--border-color);
-}
-
-.history-title {
-    font-size: 1rem;
-    margin-bottom: 0.75rem;
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-}
-
-.history-count {
-    font-size: 0.65rem;
-    color: var(--text-secondary);
-    background: var(--bg-dark);
-    padding: 0.1rem 0.45rem;
-    border-radius: 10px;
-    font-weight: normal;
-}
-
-.history-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 0.5rem;
-}
-
-.history-card {
-    background: var(--bg-dark);
-    border-radius: 8px;
-    padding: 0.4rem 0.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.4rem;
-    transition: all 0.2s;
-}
-
-.history-card:hover {
-    background: var(--bg-light);
-}
-
-.history-card.success {
-    border-left: 3px solid #10b981;
-}
-
-.history-card.fail {
-    border-left: 3px solid #ef4444;
-}
-
-.history-card img {
-    width: 36px;
-    height: 30px;
-    object-fit: contain;
-    flex-shrink: 0;
-}
-
-.history-info {
-    flex: 1;
-    min-width: 0;
-}
-
-.history-names {
-    font-size: 0.7rem;
-    margin-bottom: 0.15rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.history-meta {
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.6rem;
-    color: var(--text-secondary);
-}
-
-.history-result {
-    font-weight: bold;
-}
-
-.history-result.success {
-    color: #10b981;
-}
-
-.history-result.fail {
-    color: #ef4444;
-}
-
-/* ===== СТИЛИ ДЛЯ CASES ===== */
-.cases-sections {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-}
-
-.section-tab {
-    font-size: 1.2rem;
-    margin-bottom: 0.75rem;
-    padding-bottom: 0.4rem;
-    border-bottom: 2px solid var(--primary-color);
-    display: inline-block;
-}
-
-.section-cases {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-    gap: 1rem;
-}
-
-.case-card-new {
-    background: var(--bg-card);
-    border-radius: 10px;
-    overflow: hidden;
-    transition: all 0.3s;
-    text-decoration: none;
-    color: inherit;
-    display: block;
-    border: 1px solid var(--border-color);
-}
-
-.case-card-new:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-    border-color: var(--primary-color);
-}
-
-.case-image {
-    width: 100%;
-    height: 120px;
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-}
-
-.case-image img {
-    max-width: 70%;
-    max-height: 90px;
-    object-fit: contain;
-}
-
-.case-price-badge {
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    background: var(--bg-dark);
-    padding: 0.2rem 0.5rem;
-    border-radius: 20px;
-    font-size: 0.75rem;
-    font-weight: bold;
-    color: var(--success-color);
-    border: 1px solid var(--success-color);
-}
-
-.case-info {
-    padding: 0.75rem;
-}
-
-.case-title {
-    font-size: 0.95rem;
-    font-weight: 600;
-    margin-bottom: 0.3rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.case-description {
-    font-size: 0.75rem;
-    color: var(--text-secondary);
-    margin-bottom: 0.5rem;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.case-stats {
-    display: flex;
-    justify-content: space-between;
-    font-size: 0.7rem;
-    color: var(--text-secondary);
-    margin-bottom: 0.5rem;
-}
-
-.case-rarities-mini {
-    display: flex;
-    gap: 0.2rem;
-    flex-wrap: wrap;
-}
-
-.rarity-dot {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-}
-
-.case-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-top: 0.5rem;
-    border-top: 1px solid var(--border-color);
-}
-
-.case-price {
-    font-weight: bold;
-    color: var(--success-color);
-    font-size: 0.85rem;
-}
-
-.btn-open {
-    padding: 0.3rem 0.8rem;
-    background: var(--primary-color);
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 0.75rem;
-}
-
-.btn-open:hover {
-    background: var(--primary-hover);
-}
-
-/* ===== АДАПТИВНОСТЬ ===== */
-@media (max-width: 1000px) {
-    .upgrade-layout {
-        grid-template-columns: 1fr;
-        gap: 0.75rem;
-    }
-    
-    .inventory-panel, .target-panel {
-        max-height: 350px;
-    }
-    
-    .wheel-container {
-        width: 200px;
-        height: 200px;
-    }
-}
-
-@media (max-width: 768px) {
-    .container {
-        padding: 0 12px;
-    }
-    
-    .navbar .container {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .logo {
-        text-align: center;
-    }
-    
-    .nav-links {
-        justify-content: center;
-        gap: 0.25rem;
-    }
-    
-    .nav-link {
-        padding: 0.4rem 0.5rem;
-        font-size: 0.8rem;
-    }
-    
-    .user-balance {
-        font-size: 0.8rem;
-        padding: 0.4rem 0.5rem;
-    }
-    
-    .hero h1 {
-        font-size: 2rem;
-    }
-    
-    .hero-subtitle {
-        font-size: 1rem;
-    }
-    
-    .btn {
-        padding: 0.4rem 0.8rem;
-        font-size: 0.85rem;
-    }
-    
-    .btn-large {
-        padding: 0.6rem 1.2rem;
-    }
-    
-    /* Кейсы */
-    .case-title-row h1 {
-        font-size: 1.2rem;
-    }
-    
-    .opening-controls {
-        flex-direction: column;
-        align-items: stretch;
-    }
-    
-    .total-price-display {
-        margin-left: 0;
-        text-align: center;
-    }
-    
-    .count-selector {
-        justify-content: center;
-    }
-    
-    .count-buttons {
-        justify-content: center;
-    }
-    
-    .scroll-container-full {
-        height: 190px;
-    }
-    
-    .scroll-item-full {
-        width: 100px;
-        height: 165px;
-        margin: 5px 5px;
-    }
-    
-    .scroll-item-full img {
-        width: 65px;
-        height: 55px;
-    }
-    
-    .scroll-container-mini {
-        height: 130px;
-    }
-    
-    .scroll-item-mini {
-        width: 60px;
-        height: 115px;
-        margin: 4px 4px;
-    }
-    
-    .scroll-item-mini img {
-        width: 40px;
-        height: 40px;
-    }
-    
-    .items-grid-compact {
-        grid-template-columns: repeat(3, 1fr);
-    }
-    
-    .multi-scroll-grid {
-        grid-template-columns: repeat(2, 1fr) !important;
-    }
-    
-    /* Контракты */
-    .contract-items-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-    
-    .case-scroll-container {
-        height: 250px;
-    }
-    
-    .scroll-item {
-        width: 150px;
-        height: 200px;
-    }
-    
-    .scroll-item img {
-        width: 100px;
-        height: 80px;
-    }
-    
-    .stats-grid {
-        grid-template-columns: repeat(2, 1fr);
-    }
-    
-    .cases-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .group-items {
-        grid-template-columns: 1fr;
-    }
-    
-    .group-header {
-        flex-direction: column;
-        gap: 0.5rem;
-        text-align: center;
-    }
-    
-    .group-footer {
-        flex-direction: column;
-        gap: 1rem;
-    }
-    
-    .section-cases {
-        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
-        gap: 0.75rem;
-    }
-    
-    .case-image {
-        height: 100px;
-    }
-    
-    .case-title {
-        font-size: 0.85rem;
-    }
-    
-    .case-description {
-        font-size: 0.7rem;
-    }
-}
-
-@media (max-width: 480px) {
-    .nav-links {
-        flex-wrap: wrap;
-        justify-content: center;
-    }
-    
-    .nav-link {
-        font-size: 0.75rem;
-        padding: 0.3rem 0.4rem;
-    }
-    
-    .hero h1 {
-        font-size: 1.5rem;
-    }
-    
-    /* Кейсы */
-    .case-title-row {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-    
-    .scroll-container-full {
-        height: 170px;
-    }
-    
-    .scroll-item-full {
-        width: 90px;
-        height: 150px;
-    }
-    
-    .scroll-item-full img {
-        width: 55px;
-        height: 45px;
-    }
-    
-    .scroll-item-name-full {
-        font-size: 8px;
-    }
-    
-    .scroll-container-mini {
-        height: 115px;
-    }
-    
-    .scroll-item-mini {
-        width: 55px;
-        height: 100px;
-    }
-    
-    .items-grid-compact {
-        grid-template-columns: repeat(2, 1fr);
-    }
-    
-    .result-item-compact {
-        min-width: 130px;
-    }
-    
-    /* Апгрейд */
-    .upgrade-header h1 {
-        font-size: 1.3rem;
-    }
-    
-    .wheel-container {
-        width: 180px;
-        height: 180px;
-    }
-    
-    .wheel-center {
-        width: 35px;
-        height: 35px;
-        font-size: 0.7rem;
-    }
-    
-    .selected-item-mini img {
-        width: 50px;
-        height: 40px;
-    }
-    
-    .history-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    /* Кейсы */
-    .cases-container h1 {
-        font-size: 1.3rem;
-    }
-    
-    .section-cases {
-        grid-template-columns: 1fr 1fr;
-    }
-    
-    .case-image {
-        height: 90px;
-    }
-    
-    .case-info {
-        padding: 0.5rem;
-    }
-}
-
-/* Общие мобильные фиксы */
-@media (max-width: 768px) {
-    body {
-        font-size: 14px;
-    }
-    
-    input, button, select, textarea {
-        font-size: 16px !important;
-    }
-    
-    html, body {
-        max-width: 100%;
-        overflow-x: hidden;
-    }
-    
-    img {
-        max-width: 100%;
-        height: auto;
-    }
-}
-
-/* ===== АПГРЕЙД — РЕДИЗАЙН ===== */
-
-body {
-    font-family: 'Rajdhani', sans-serif;
-}
-
-h1, h2, h3, h4, h5, h6, .logo, .nav-link, .btn {
-    font-family: 'Rajdhani', sans-serif;
-}
-
-.upgrade-page {
-  font-family: 'Rajdhani', sans-serif;
-  background: radial-gradient(ellipse at 50% 0%, #14161f 0%, #0a0b0e 100%);
+  font-family: var(--font-body);
+  background: var(--bg-deep);
+  color: var(--text);
+  line-height: 1.6;
   min-height: 100vh;
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
 }
 
-.upgrade-page .upgrade-header h1 {
-  font-family: 'Russo One', sans-serif;
-  font-size: 1.75rem;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #f59e0b 100%);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  text-shadow: none;
-  filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.3));
-  margin-bottom: 0.25rem;
-}
-
-.upgrade-page .upgrade-header p {
-  color: #8a8a9a;
-  font-size: 0.9rem;
+h1, h2, h3, h4, h5, h6, .logo, .nav-link, .btn, .display-font {
+  font-family: var(--font-display);
   letter-spacing: 0.03em;
 }
 
-.upgrade-page .upgrade-layout {
-  display: grid;
-  grid-template-columns: 280px 1fr 280px;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-}
+::selection { background: var(--primary); color: #000; }
+::-webkit-scrollbar { width: 5px; height: 5px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
 
-.upgrade-page .panel-title {
-  font-family: 'Russo One', sans-serif;
-  font-size: 0.8rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: #c8c6d0;
-}
+.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; }
 
-/* Панели */
-.upgrade-page .inventory-panel,
-.upgrade-page .target-panel {
-  background: rgba(20, 21, 26, 0.8);
-  backdrop-filter: blur(8px);
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  display: flex;
-  flex-direction: column;
-  max-height: 520px;
-  overflow: hidden;
-}
-
-.upgrade-page .panel-header,
-.upgrade-page .target-header {
-  padding: 0.65rem 0.75rem;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  flex-shrink: 0;
-}
-
-.upgrade-page .inventory-list,
-.upgrade-page .target-list {
-  flex: 1;
-  overflow-y: auto;
-  padding: 0.4rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-}
-
-.upgrade-page .inventory-list::-webkit-scrollbar,
-.upgrade-page .target-list::-webkit-scrollbar {
-  width: 4px;
-}
-
-.upgrade-page .inventory-list::-webkit-scrollbar-track,
-.upgrade-page .target-list::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.upgrade-page .inventory-list::-webkit-scrollbar-thumb,
-.upgrade-page .target-list::-webkit-scrollbar-thumb {
-  background: rgba(245, 158, 11, 0.3);
-  border-radius: 2px;
-}
-
-/* Карточки предметов */
-.upgrade-page .inventory-item-card,
-.upgrade-page .target-item-card {
-  background: rgba(14, 15, 19, 0.9);
-  border-radius: 8px;
-  padding: 0.45rem 0.5rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  cursor: pointer;
-  border: 1px solid rgba(255, 255, 255, 0.04);
-  transition: all 0.2s ease;
-  position: relative;
-}
-
-.upgrade-page .inventory-item-card::before,
-.upgrade-page .target-item-card::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 4px;
-  bottom: 4px;
-  width: 2px;
-  border-radius: 1px;
-  background: rgba(255, 255, 255, 0.08);
-  transition: all 0.2s ease;
-}
-
-.upgrade-page .inventory-item-card:hover,
-.upgrade-page .target-item-card:hover {
-  border-color: rgba(245, 158, 11, 0.2);
-  background: rgba(20, 21, 26, 0.9);
-}
-
-.upgrade-page .inventory-item-card:hover::before,
-.upgrade-page .target-item-card:hover::before {
-  background: rgba(245, 158, 11, 0.4);
-  width: 3px;
-}
-
-.upgrade-page .inventory-item-card.selected {
-  border-color: rgba(245, 158, 11, 0.5);
-  background: rgba(245, 158, 11, 0.06);
-  box-shadow: 0 0 20px rgba(245, 158, 11, 0.08), inset 0 0 20px rgba(245, 158, 11, 0.03);
-}
-
-.upgrade-page .inventory-item-card.selected::before {
-  background: #f59e0b;
-  width: 3px;
-  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
-}
-
-.upgrade-page .inventory-item-card.disabled,
-.upgrade-page .target-item-card.disabled {
-  opacity: 0.35;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.upgrade-page .inventory-item-card img,
-.upgrade-page .target-item-card img {
-  width: 42px;
-  height: 36px;
-  object-fit: contain;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  padding: 2px;
-  flex-shrink: 0;
-}
-
-.upgrade-page .inventory-item-name,
-.upgrade-page .target-item-name {
-  font-size: 0.72rem;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #d4d2d8;
-  letter-spacing: 0.01em;
-}
-
-.upgrade-page .inventory-item-meta,
-.upgrade-page .target-item-meta {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.6rem;
-  color: #6b6b7a;
-  margin-top: 0.1rem;
-}
-
-.upgrade-page .inventory-item-price,
-.upgrade-page .target-item-price {
-  color: #f59e0b;
-  font-weight: 700;
-  font-size: 0.65rem;
-}
-
-/* Сортировка и поиск */
-.upgrade-page .target-search-input {
-  width: 100%;
-  padding: 0.45rem 0.6rem;
-  background: rgba(0, 0, 0, 0.4);
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  border-radius: 6px;
-  color: #e0dde8;
-  font-size: 0.8rem;
-  font-family: 'Rajdhani', sans-serif;
-  outline: none;
-  transition: border-color 0.2s;
-  box-sizing: border-box;
-}
-
-.upgrade-page .target-search-input:focus {
-  border-color: rgba(245, 158, 11, 0.4);
-}
-
-.upgrade-page .sort-controls {
-  display: flex;
-  gap: 0.3rem;
-  margin-top: 0.4rem;
-}
-
-.upgrade-page .sort-btn {
-  flex: 1;
-  padding: 0.25rem 0.3rem;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid rgba(255, 255, 255, 0.04);
-  border-radius: 4px;
-  color: #6b6b7a;
-  font-size: 0.6rem;
-  font-family: 'Rajdhani', sans-serif;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all 0.15s;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.upgrade-page .sort-btn:hover {
-  color: #c8c6d0;
-  border-color: rgba(255, 255, 255, 0.1);
-}
-
-.upgrade-page .sort-btn.active {
-  color: #f59e0b;
-  border-color: rgba(245, 158, 11, 0.3);
-  background: rgba(245, 158, 11, 0.08);
-}
-
-/* Центральная панель — Колесо */
-.upgrade-page .wheel-panel {
-  background: rgba(20, 21, 26, 0.8);
-  backdrop-filter: blur(8px);
-  border-radius: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  padding: 1.25rem 1rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.upgrade-page .selected-items-display {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  margin-bottom: 0.75rem;
-  width: 100%;
-}
-
-.upgrade-page .selected-item-mini {
-  text-align: center;
-  flex: 1;
-  min-width: 0;
-}
-
-.upgrade-page .selected-item-mini .item-frame {
-  width: 64px;
-  height: 52px;
-  margin: 0 auto;
-  background: rgba(0, 0, 0, 0.4);
-  border-radius: 6px;
-  border: 1px solid rgba(255, 255, 255, 0.06);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  transition: all 0.3s;
-}
-
-.upgrade-page .selected-item-mini.selected .item-frame {
-  border-color: rgba(245, 158, 11, 0.4);
-  box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
-}
-
-.upgrade-page .selected-item-mini img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.upgrade-page .selected-item-mini-name {
-  font-size: 0.62rem;
-  margin-top: 0.25rem;
-  color: #8a8a9a;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.upgrade-page .selected-item-mini-price {
-  font-size: 0.7rem;
-  color: #f59e0b;
-  font-weight: 700;
-  font-family: 'Rajdhani', sans-serif;
-}
-
-.upgrade-page .arrow-icon {
-  font-size: 1rem;
-  color: #4a4a5a;
-  flex-shrink: 0;
-  opacity: 0.5;
-}
-
-/* Колесо */
-.upgrade-page .wheel-container {
-  position: relative;
-  width: 280px;
-  height: 280px;
-  margin: 0.25rem 0 0.5rem;
-}
-
-.upgrade-page .wheel-outer-ring {
-  position: absolute;
-  inset: -8px;
-  border-radius: 50%;
-  background: conic-gradient(
-    from 0deg,
-    rgba(245, 158, 11, 0.08),
-    rgba(245, 158, 11, 0.02) 25%,
-    rgba(245, 158, 11, 0.08) 50%,
-    rgba(245, 158, 11, 0.02) 75%,
-    rgba(245, 158, 11, 0.08) 100%
-  );
-  border: 1px solid rgba(245, 158, 11, 0.15);
-}
-
-.upgrade-page .wheel {
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background: conic-gradient(
-    from calc(180deg - var(--probability, 0) * 3.6deg / 2),
-    #10b981 0deg,
-    #10b981 calc(var(--probability, 0) * 3.6deg),
-    #2d1b1b calc(var(--probability, 0) * 3.6deg),
-    #2d1b1b 360deg
-  );
-  border: 2px solid rgba(255, 255, 255, 0.08);
-  box-shadow:
-    0 0 40px rgba(0, 0, 0, 0.6),
-    inset 0 0 30px rgba(0, 0, 0, 0.4);
-  position: relative;
-  z-index: 1;
-}
-
-.upgrade-page .wheel::after {
-  content: '';
-  position: absolute;
-  inset: 4px;
-  border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.04);
-}
-
-/* Tick marks */
-.upgrade-page .wheel-ticks {
-  position: absolute;
-  inset: -4px;
-  border-radius: 50%;
-  z-index: 2;
-  pointer-events: none;
-}
-
-.upgrade-page .wheel-ticks::before {
-  content: '';
-  position: absolute;
-  inset: 2px;
-  border-radius: 50%;
-  background: repeating-conic-gradient(
-    from 0deg,
-    transparent 0deg,
-    transparent 2deg,
-    rgba(255, 255, 255, 0.06) 2deg,
-    rgba(255, 255, 255, 0.06) 3deg
-  );
-}
-
-/* Pointer container — вращается вокруг колеса */
-.upgrade-page .wheel-pointer-container {
-  position: absolute;
+/* ── Navbar ── */
+.navbar {
+  background: rgba(7,8,11,0.92);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--border);
+  padding: 0.6rem 0;
+  position: sticky;
   top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 10;
-  pointer-events: none;
-  transform-origin: center center;
+  z-index: var(--z-sticky);
 }
-
-/* Pointer */
-.upgrade-page .wheel-pointer {
-  position: absolute;
-  top: -14px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 0;
-  height: 0;
-  border-left: 10px solid transparent;
-  border-right: 10px solid transparent;
-  border-top: 24px solid #f59e0b;
-  filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.6)) drop-shadow(0 0 20px rgba(245, 158, 11, 0.3));
+.navbar .container { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
+.logo {
+  font-size: 1.15rem; font-weight: 700; color: var(--text);
+  text-decoration: none; text-transform: uppercase; letter-spacing: 0.08em;
+  display: flex; align-items: center; gap: 0.4rem; white-space: nowrap;
 }
-
-.upgrade-page .wheel-pointer::after {
-  content: '';
-  position: absolute;
-  top: -28px;
-  left: -4px;
-  width: 8px;
-  height: 8px;
-  background: #f59e0b;
-  border-radius: 50%;
-  box-shadow: 0 0 12px rgba(245, 158, 11, 0.8);
+.logo span { color: var(--primary); }
+.logo:hover { opacity: 0.85; }
+.nav-links { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; }
+.nav-link {
+  color: var(--text-dim); text-decoration: none;
+  padding: 0.4rem 0.7rem; border-radius: var(--radius-sm);
+  transition: all var(--transition); font-size: 0.78rem;
+  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500;
+  white-space: nowrap; position: relative;
 }
-
-/* Center hub */
-.upgrade-page .wheel-center {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 52px;
-  height: 52px;
-  background: radial-gradient(circle at 40% 35%, #1e1f2a, #0a0b0e);
-  border-radius: 50%;
-  border: 2px solid rgba(245, 158, 11, 0.3);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 700;
-  font-size: 0.85rem;
-  color: #f59e0b;
-  z-index: 5;
-  font-family: 'Russo One', sans-serif;
-  box-shadow:
-    0 0 20px rgba(245, 158, 11, 0.1),
-    inset 0 0 15px rgba(0, 0, 0, 0.5);
-  letter-spacing: 0.02em;
+.nav-link::after {
+  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%) scaleX(0);
+  width: 60%; height: 2px; background: var(--primary); border-radius: 1px;
+  transition: transform var(--transition);
 }
-
-
-
-/* Кнопка апгрейда */
-.upgrade-page .upgrade-btn {
-  padding: 0.65rem 2.5rem;
-  font-family: 'Russo One', sans-serif;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
-  background: linear-gradient(135deg, #f59e0b, #d97706);
-  color: #0a0b0e;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  transition: all 0.25s;
-  position: relative;
-  overflow: hidden;
-  margin-top: 0.25rem;
-}
-
-.upgrade-page .upgrade-btn:hover:not(:disabled) {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
-}
-
-.upgrade-page .upgrade-btn:active:not(:disabled) {
-  transform: translateY(0);
-}
-
-.upgrade-page .upgrade-btn:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.upgrade-page .upgrade-btn::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
-  transition: transform 0.4s;
-  transform: translateX(-100%);
-}
-
-.upgrade-page .upgrade-btn:hover:not(:disabled)::after {
-  transform: translateX(100%);
-}
-
-/* Результат */
-/* Toast */
-.toast-container {
-    position: fixed;
-    top: 70px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 1000;
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-    pointer-events: none;
-}
-
-.toast {
-    padding: 0.5rem 1rem;
-    border-radius: 8px;
-    font-size: 0.8rem;
-    font-weight: 600;
-    white-space: nowrap;
-    opacity: 0;
-    transform: translateY(-10px);
-    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
-    pointer-events: auto;
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    color: var(--text-primary);
-    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
-}
-
-.toast.show {
-    opacity: 1;
-    transform: translateY(0);
-}
-
-.toast.success {
-    border-color: #10b981;
-    box-shadow: 0 4px 20px rgba(16,185,129,0.3);
-}
-
-.toast.fail {
-    border-color: #ef4444;
-    box-shadow: 0 4px 20px rgba(239,68,68,0.2);
-}
-
-.upgrade-page .result-item-display img {
-  width: 72px;
-  height: 60px;
-  object-fit: contain;
-  animation: resultItemSlide 0.5s ease;
-}
-
-.upgrade-page .result-item-display span {
-  font-size: 0.65rem;
-  color: #8a8a9a;
-  text-align: center;
-  max-width: 180px;
-}
-
-@keyframes resultFadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes resultPulse {
-  0% { transform: scale(0.5); opacity: 0; }
-  60% { transform: scale(1.15); }
-  100% { transform: scale(1); opacity: 1; }
-}
-
-@keyframes resultItemSlide {
-  from { transform: translateY(20px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-/* Win sparkles */
-.upgrade-page .sparkle-container {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 25;
-  overflow: hidden;
-  border-radius: 10px;
-}
-
-.upgrade-page .sparkle {
-  position: absolute;
-  width: 4px;
-  height: 4px;
-  background: #f59e0b;
-  border-radius: 50%;
-  animation: sparkleFloat 1.5s ease-out forwards;
-}
-
-@keyframes sparkleFloat {
-  0% {
-    transform: translate(0, 0) scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: translate(var(--dx, 50px), var(--dy, -80px)) scale(0);
-    opacity: 0;
-  }
-}
-
-/* История */
-.upgrade-page .history-section {
-  margin-top: 0.5rem;
-}
-
-.upgrade-page .history-title {
-  font-family: 'Russo One', sans-serif;
-  font-size: 0.85rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: #6b6b7a;
-  margin-bottom: 0.6rem;
-}
-
-.upgrade-page .history-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 0.5rem;
-}
-
-.upgrade-page .history-card {
-  background: rgba(20, 21, 26, 0.6);
-  border-radius: 8px;
-  padding: 0.5rem 0.6rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  border: 1px solid rgba(255, 255, 255, 0.04);
-  transition: border-color 0.2s;
-}
-
-.upgrade-page .history-card:hover {
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
-.upgrade-page .history-card.success {
-  border-left: 3px solid rgba(16, 185, 129, 0.5);
-}
-
-.upgrade-page .history-card.fail {
-  border-left: 3px solid rgba(239, 68, 68, 0.4);
-}
-
-.upgrade-page .history-card img {
-  width: 36px;
-  height: 30px;
-  object-fit: contain;
-  background: rgba(0, 0, 0, 0.3);
-  border-radius: 4px;
-  padding: 2px;
-  flex-shrink: 0;
-}
-
-.upgrade-page .history-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.upgrade-page .history-names {
-  font-size: 0.68rem;
-  color: #b0aeb8;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.upgrade-page .history-meta {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.6rem;
-  color: #6b6b7a;
-  margin-top: 0.1rem;
-}
-
-.upgrade-page .history-result.success {
-  color: #10b981;
-  font-weight: 600;
-}
-
-.upgrade-page .history-result.fail {
-  color: #ef4444;
-  font-weight: 600;
-}
-
-/* Быстрые фильтры цены */
-.upgrade-page .price-filter-bar {
-    display: flex;
-    gap: 0.25rem;
-    margin-top: 0.4rem;
-    flex-wrap: wrap;
-}
-
-.upgrade-page .pf-btn {
-    padding: 0.2rem 0.45rem;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid rgba(255, 255, 255, 0.04);
-    border-radius: 4px;
-    color: #6b6b7a;
-    font-size: 0.6rem;
-    font-family: 'Rajdhani', sans-serif;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.15s;
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-}
-
-.upgrade-page .pf-btn:hover {
-    color: #c8c6d0;
-    border-color: rgba(255, 255, 255, 0.1);
-}
-
-.upgrade-page .pf-btn.active {
-    color: #f59e0b;
-    border-color: rgba(245, 158, 11, 0.3);
-    background: rgba(245, 158, 11, 0.08);
-}
-
-/* Пустое состояние */
-.upgrade-page .empty-state {
-  text-align: center;
-  padding: 1.5rem 0.5rem;
-  color: #4a4a5a;
-  font-size: 0.8rem;
-}
-
-/* Адаптивность */
-@media (max-width: 1000px) {
-  .upgrade-page .upgrade-layout {
-    grid-template-columns: 1fr;
-    gap: 0.75rem;
-  }
-  .upgrade-page .inventory-panel,
-  .upgrade-page .target-panel {
-    max-height: 320px;
-  }
-  .upgrade-page .wheel-container {
-    width: 240px;
-    height: 240px;
-  }
+.nav-link:hover { color: var(--text); background: var(--bg-hover); }
+.nav-link:hover::after { transform: translateX(-50%) scaleX(1); }
+.nav-link.active { color: #000; background: var(--primary); font-weight: 600; }
+.nav-link.active::after { display: none; }
+.user-balance {
+  padding: 0.35rem 0.7rem; background: rgba(0,0,0,0.3);
+  border: 1px solid rgba(245,158,11,0.25); border-radius: var(--radius-sm);
+  font-weight: 600; color: var(--primary); font-size: 0.8rem;
+  font-family: var(--font-body); white-space: nowrap;
+  display: flex; align-items: center; gap: 0.3rem;
 }
+.user-balance::before { content: '⟠'; font-size: 0.7rem; }
+.mobile-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.3rem; cursor: pointer; padding: 0.3rem; }
 
 @media (max-width: 768px) {
-  .upgrade-page .upgrade-header h1 {
-    font-size: 1.3rem;
-  }
-  .upgrade-page .wheel-container {
-    width: 200px;
-    height: 200px;
-  }
-  .upgrade-page .wheel-center {
-    width: 44px;
-    height: 44px;
-    font-size: 0.7rem;
-  }
-  .upgrade-page .selected-item-mini .item-frame {
-    width: 52px;
-    height: 42px;
-  }
-  .upgrade-page .history-grid {
-    grid-template-columns: 1fr;
+  .mobile-toggle { display: block; }
+  .nav-links {
+    display: none; position: absolute; top: 100%; left: 0; right: 0;
+    background: rgba(7,8,11,0.98); backdrop-filter: blur(16px);
+    flex-direction: column; padding: 0.5rem; border-bottom: 1px solid var(--border);
+    gap: 0.15rem; z-index: var(--z-dropdown);
   }
+  .nav-links.open { display: flex; }
+  .nav-link { width: 100%; padding: 0.6rem 0.8rem; }
+  .nav-links .btn, .nav-links .user-balance { width: 100%; justify-content: center; }
+  .navbar .container { position: relative; }
 }
 
-/* ===== Дополнительные стили для скролла ===== */
-.scroll-item-sm.target-item {
-    transition: all 0.3s ease;
-    z-index: 100;
-}
-
-.mini-scroll-item-sm.target-mini-item {
-    transition: all 0.3s ease;
-    z-index: 100;
-}
-
-.scroll-item-sm.target-item[style*="border-color"] {
-    box-shadow: 0 0 30px currentColor;
-}
-
-.mini-scroll-item-sm.target-mini-item[style*="border-color"] {
-    box-shadow: 0 0 20px currentColor;
-}
-
-.multi-scroll-container {
-    display: grid;
-    gap: 1.5rem;
-    margin: 2rem 0;
-    justify-content: center;
-}
-
-.scroll-wrapper {
-    text-align: center;
-}
-
-.mini-scroll-container {
-    width: 100%;
-    min-width: 180px;
-    height: 200px;
-    position: relative;
-    overflow: hidden;
-    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-    border-radius: 8px;
-    border: 2px solid var(--border-color);
-}
-
-.mini-scroll-track {
-    display: flex;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    will-change: transform;
-    transition: filter 0.3s;
-}
-
-.mini-scroll-item {
-    width: 90px;
-    height: 180px;
-    margin: 10px 10px;
-    flex-shrink: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background: var(--bg-card);
-    border-radius: 6px;
-    padding: 8px 4px;
-    border: 2px solid transparent;
-}
-
-.mini-scroll-item img {
-    width: 70px;
-    height: 70px;
-    object-fit: contain;
-}
-
-.mini-item-name {
-    font-size: 9px;
-    text-align: center;
-    margin-top: 5px;
-    word-break: break-word;
-}
-
-.mini-item-rarity {
-    font-size: 8px;
-    margin-top: 3px;
-    font-weight: bold;
-}
-
-.mini-center-indicator {
-    position: absolute;
-    left: 50%;
-    top: 0;
-    bottom: 0;
-    width: 3px;
-    background: linear-gradient(to bottom, transparent, #ffd700, #ffd700, transparent);
-    transform: translateX(-50%);
-    z-index: 10;
-    box-shadow: 0 0 20px #ffd700;
-    pointer-events: none;
-}
-
-.result-count {
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    background: var(--primary-color);
-    color: white;
-    border-radius: 50%;
-    width: 24px;
-    height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 12px;
-    font-weight: bold;
-}
-
-.result-item {
-    position: relative;
-}
-
-.results-actions {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    margin-top: 2rem;
-}
-
-/* ====== Всеобщий UI-полироль ====== */
-
-/* Плавные скроллбары */
-::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }
-
-/* Стеклянные карточки */
-.glass-card, .card, [class*="panel"] {
-    background: rgba(20, 21, 26, 0.7);
-    backdrop-filter: blur(12px);
-    border: 1px solid var(--border-color);
-    border-radius: 12px;
-    transition: border-color 0.2s, box-shadow 0.2s;
-}
-.glass-card:hover, .card:hover, [class*="panel"]:hover {
-    border-color: rgba(255,255,255,0.1);
-}
-
-/* Тени для всех модалок */
-.modal, [class*="modal"], [class*="Modal"] {
-    background: rgba(10, 11, 14, 0.85);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-}
-
-/* Плавные переходы для элементов */
-a, button, .btn, .nav-link, .item-card, [class*="btn"] {
-    transition: all 0.2s ease;
-}
-
-/* Улучшенные кнопки */
+/* ── Buttons ── */
 .btn {
-    position: relative;
-    overflow: hidden;
-    border-radius: 8px;
-    font-weight: 600;
-    letter-spacing: 0.02em;
-    cursor: pointer;
-    border: none;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.4rem;
-}
-.btn:active {
-    transform: scale(0.97);
+  padding: 0.5rem 1.1rem; border: none; border-radius: var(--radius-sm);
+  font-size: 0.78rem; font-weight: 600; cursor: pointer;
+  text-decoration: none; display: inline-flex; align-items: center;
+  gap: 0.4rem; transition: all var(--transition); white-space: nowrap;
+  text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2;
+  position: relative; overflow: hidden;
 }
+.btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0); transition: background var(--transition); }
+.btn:hover::after { background: rgba(255,255,255,0.08); }
+.btn:active::after { background: rgba(255,255,255,0.12); }
 .btn-primary {
-    background: linear-gradient(135deg, var(--primary-color), #f97316);
-    color: white;
+  background: linear-gradient(135deg, var(--primary), #d97706); color: #000;
+  box-shadow: 0 2px 12px var(--primary-glow);
 }
-.btn-primary:hover {
-    filter: brightness(1.1);
-    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(245,158,11,0.4); }
+.btn-primary:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; background: var(--text-muted); color: var(--text-dim); }
+.btn-outline {
+  background: transparent; color: var(--text-dim); border: 1px solid var(--border-light);
+}
+.btn-outline:hover { color: var(--text); border-color: rgba(255,255,255,0.18); background: var(--bg-hover); }
+.btn-ghost { background: transparent; color: var(--text-dim); border: none; }
+.btn-ghost:hover { color: var(--text); background: var(--bg-hover); }
+.btn-success { background: var(--success); color: #000; }
+.btn-success:hover { box-shadow: 0 4px 15px rgba(34,197,94,0.3); transform: translateY(-1px); }
+.btn-danger { background: var(--danger); color: #fff; }
+.btn-danger:hover { box-shadow: 0 4px 15px rgba(239,68,68,0.3); transform: translateY(-1px); }
+.btn-large { padding: 0.65rem 2rem; font-size: 0.9rem; }
+.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.7rem; }
+.btn-block { width: 100%; justify-content: center; }
+.btn-icon {
+  width: 36px; height: 36px; padding: 0; display: flex;
+  align-items: center; justify-content: center; font-size: 1rem;
+  background: var(--primary-subtle); border: 1px solid rgba(245,158,11,0.2);
+  color: var(--primary); border-radius: var(--radius-sm); cursor: pointer;
+  transition: all var(--transition); flex-shrink: 0;
+}
+.btn-icon:hover { background: rgba(245,158,11,0.2); border-color: rgba(245,158,11,0.35); transform: scale(1.05); }
+.btn-icon:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }
+
+/* ── Cards ── */
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 1.25rem;
+  transition: all var(--transition);
+}
+.card:hover { border-color: rgba(255,255,255,0.08); }
+.card-hover:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-md);
+  border-color: rgba(245,158,11,0.15);
+}
+.card-glass {
+  background: rgba(17,19,24,0.7);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255,255,255,0.06);
+}
+.card-glow { position: relative; overflow: hidden; }
+.card-glow::before {
+  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
+  background: conic-gradient(from 0deg, transparent, var(--primary-glow), transparent, transparent);
+  animation: glowRotate 4s linear infinite; opacity: 0; transition: opacity var(--transition-slow);
+}
+.card-glow:hover::before { opacity: 1; }
+.card-glow > * { position: relative; z-index: 1; }
+@keyframes glowRotate { to { transform: rotate(360deg); } }
+
+/* ── Forms ── */
+.form-group { margin-bottom: 1rem; }
+.form-label {
+  display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-dim);
+  margin-bottom: 0.35rem; text-transform: uppercase; letter-spacing: 0.05em;
+}
+.form-input, .form-select, .form-textarea {
+  width: 100%; padding: 0.55rem 0.8rem; font-size: 0.9rem;
+  background: var(--bg-dark); border: 1px solid var(--border-light);
+  border-radius: var(--radius-sm); color: var(--text);
+  font-family: var(--font-body); transition: border-color var(--transition), box-shadow var(--transition);
+  outline: none;
+}
+.form-input:focus, .form-select:focus, .form-textarea:focus {
+  border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-glow);
+}
+.form-input::placeholder { color: var(--text-muted); }
+.form-error { color: var(--danger); font-size: 0.8rem; margin-top: 0.25rem; }
+.form-hint { color: var(--text-muted); font-size: 0.78rem; margin-top: 0.2rem; }
+.form-checkbox {
+  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
+  font-size: 0.9rem;
+}
+.form-checkbox input[type="checkbox"] {
+  width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer;
 }
 
-/* Плавный вход для контента */
-main, .container, .crash-layout, .inventory-container {
-    animation: contentFadeIn 0.3s ease;
-}
-@keyframes contentFadeIn {
-    from { opacity: 0; transform: translateY(8px); }
-    to { opacity: 1; transform: translateY(0); }
+/* ── Grids ── */
+.grid { display: grid; gap: 1rem; }
+.grid-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-4 { grid-template-columns: repeat(4, 1fr); }
+.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
+.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
+@media (max-width: 768px) {
+  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
 }
 
-/* Нормализация отступов */
-main {
-    padding: 1.5rem 1rem;
+/* ── Hero ── */
+.hero {
+  padding: 4rem 0; text-align: center;
+  position: relative; overflow: hidden;
 }
-main.container {
-    padding: 1.5rem 20px;
+.hero::before {
+  content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
+  width: 700px; height: 700px;
+  background: radial-gradient(circle, rgba(245,158,11,0.05) 0%, transparent 65%);
+  pointer-events: none;
+}
+.hero h1 {
+  font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 0.75rem;
+  background: linear-gradient(135deg, var(--primary), #fbbf24);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  background-clip: text; position: relative; text-wrap: balance;
+}
+.hero-subtitle {
+  font-size: clamp(1rem, 2.5vw, 1.3rem); color: var(--text-dim);
+  margin-bottom: 2.5rem; position: relative;
+}
+.hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
+
+/* ── Section ── */
+.section { padding: 2.5rem 0; }
+.section-title {
+  font-size: 1.5rem; margin-bottom: 0.3rem; text-wrap: balance;
+}
+.section-subtitle { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 1.5rem; }
+.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem; }
+.section-tabs {
+  display: flex; gap: 0.25rem; flex-wrap: wrap;
+  padding: 0.25rem; background: var(--bg-dark); border-radius: var(--radius-sm);
+}
+.section-tab {
+  padding: 0.35rem 0.8rem; border: none; background: transparent;
+  color: var(--text-dim); font-size: 0.78rem; font-weight: 500;
+  cursor: pointer; border-radius: 4px; transition: all var(--transition);
+  font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.04em;
+}
+.section-tab:hover { color: var(--text); background: var(--bg-hover); }
+.section-tab.active { background: var(--primary); color: #000; font-weight: 600; }
+
+/* ── Case Card ── */
+.case-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  transition: all var(--transition-slow);
+  cursor: pointer;
+  position: relative;
+}
+.case-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
+  border-color: rgba(245,158,11,0.2);
+}
+.case-card-image {
+  width: 100%; aspect-ratio: 1; object-fit: contain;
+  padding: 1.5rem; background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-card) 100%);
+  display: flex; align-items: center; justify-content: center;
+  position: relative;
+}
+.case-card-image img { max-width: 85%; max-height: 85%; transition: transform var(--transition-slow); filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
+.case-card:hover .case-card-image img { transform: scale(1.08) rotate(-3deg); }
+.case-card-body { padding: 0.85rem 1rem; }
+.case-card-name { font-family: var(--font-display); font-size: 0.9rem; margin-bottom: 0.2rem; }
+.case-card-desc { color: var(--text-dim); font-size: 0.8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.case-card-footer {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0.65rem 1rem; border-top: 1px solid var(--border);
+}
+.case-card-price {
+  font-family: var(--font-display); font-size: 0.95rem; color: var(--primary);
+  display: flex; align-items: center; gap: 0.3rem;
+}
+.case-card-price span { font-size: 0.7rem; color: var(--text-muted); font-family: var(--font-body); }
+.case-card-rarity {
+  display: flex; gap: 3px;
+}
+.case-card-rarity-dot {
+  width: 8px; height: 8px; border-radius: 50%; opacity: 0.6;
 }
 
-/* Улучшенный текст */
-p, span, div, label {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+/* ── Modal ── */
+.modal-overlay {
+  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
+  backdrop-filter: blur(4px); z-index: var(--z-overlay);
+  display: flex; align-items: center; justify-content: center;
+  animation: fadeIn 0.2s ease; padding: 1rem;
+}
+@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+.modal {
+  background: var(--bg-surface); border: 1px solid var(--border-light);
+  border-radius: var(--radius-lg); width: 100%; max-width: 500px;
+  max-height: 90vh; overflow-y: auto;
+  animation: modalSlideIn 0.25s ease; box-shadow: var(--shadow-xl);
+}
+@keyframes modalSlideIn { from { transform: translateY(20px) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
+.modal-header {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
+}
+.modal-title { font-family: var(--font-display); font-size: 1rem; }
+.modal-close {
+  background: none; border: none; color: var(--text-dim); font-size: 1.3rem;
+  cursor: pointer; padding: 0.2rem; line-height: 1; transition: color var(--transition);
+}
+.modal-close:hover { color: var(--text); }
+.modal-body { padding: 1.25rem; }
+.modal-footer {
+  display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
+  padding: 1rem 1.25rem; border-top: 1px solid var(--border);
 }
 
-/* Красивые инпуты */
-input, select, textarea {
-    background: rgba(255,255,255,0.04);
-    border: 1px solid var(--border-color);
-    border-radius: 8px;
-    color: var(--text-primary);
-    padding: 0.6rem 0.8rem;
-    font-family: 'Rajdhani', sans-serif;
-    font-size: 0.95rem;
-    transition: border-color 0.2s, box-shadow 0.2s;
-    outline: none;
+/* ── Table ── */
+.table-wrap { overflow-x: auto; }
+table {
+  width: 100%; border-collapse: collapse; font-size: 0.85rem;
 }
-input:focus, select:focus, textarea:focus {
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.1);
+th, td {
+  padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--border);
+  white-space: nowrap;
 }
-input::placeholder {
-    color: var(--text-secondary);
-    opacity: 0.6;
+th {
+  color: var(--text-dim); font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.05em; font-size: 0.72rem;
+}
+tr:hover td { background: var(--bg-hover); }
+
+/* ── Badge ── */
+.badge {
+  display: inline-flex; align-items: center; gap: 0.25rem;
+  padding: 0.15rem 0.5rem; border-radius: 4px;
+  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.badge-yellow { background: rgba(245,158,11,0.15); color: var(--primary); }
+.badge-green { background: rgba(34,197,94,0.15); color: var(--success); }
+.badge-red { background: rgba(239,68,68,0.15); color: var(--danger); }
+.badge-blue { background: rgba(59,130,246,0.15); color: var(--info); }
+.badge-purple { background: rgba(136,71,255,0.15); color: #a78bfa; }
+
+/* ── Stats ── */
+.stats-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
+.stat-card {
+  background: var(--bg-card); border: 1px solid var(--border);
+  border-radius: var(--radius-md); padding: 1rem 1.15rem;
+}
+.stat-value { font-family: var(--font-display); font-size: 1.4rem; color: var(--primary); }
+.stat-label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.15rem; }
+
+/* ── Filters ── */
+.filter-bar {
+  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
+  padding: 0.75rem; background: var(--bg-dark); border-radius: var(--radius-md);
+  margin-bottom: 1rem;
+}
+.filter-bar .form-input { width: auto; min-width: 160px; flex: 1; }
+.filter-chip {
+  padding: 0.25rem 0.65rem; background: transparent; border: 1px solid var(--border-light);
+  color: var(--text-dim); border-radius: 4px; font-size: 0.75rem; cursor: pointer;
+  transition: all var(--transition); font-family: var(--font-body);
+}
+.filter-chip:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
+.filter-chip.active { background: var(--primary-subtle); border-color: var(--primary); color: var(--primary); }
+
+/* ── Loading ── */
+.spinner {
+  width: 32px; height: 32px; border: 3px solid var(--border);
+  border-top-color: var(--primary); border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.spinner-sm { width: 18px; height: 18px; border-width: 2px; }
+.loading-dots { display: flex; gap: 4px; align-items: center; }
+.loading-dots span {
+  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
+  animation: dotBounce 1.2s ease-in-out infinite;
+}
+.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
+.loading-dots span:nth-child(3) { animation-delay: 0.3s; }
+@keyframes dotBounce { 0%,80%,100% { transform: scale(0.5); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } }
+
+/* ── Toast / Notification ── */
+.toast-container {
+  position: fixed; top: 1rem; right: 1rem; z-index: var(--z-toast);
+  display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none;
+}
+.toast {
+  pointer-events: auto; padding: 0.65rem 1rem; border-radius: var(--radius-sm);
+  background: var(--bg-surface); border: 1px solid var(--border-light);
+  box-shadow: var(--shadow-lg); font-size: 0.85rem;
+  display: flex; align-items: center; gap: 0.5rem;
+  animation: toastIn 0.25s ease; max-width: 360px;
+}
+@keyframes toastIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
+.toast-success { border-left: 3px solid var(--success); }
+.toast-error { border-left: 3px solid var(--danger); }
+.toast-info { border-left: 3px solid var(--info); }
+.toast-warning { border-left: 3px solid var(--warning); }
+
+/* ── Empty state ── */
+.empty-state {
+  text-align: center; padding: 3rem 1rem; color: var(--text-dim);
+}
+.empty-state-icon { font-size: 2.5rem; margin-bottom: 0.75rem; opacity: 0.5; }
+.empty-state-title { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); margin-bottom: 0.3rem; }
+.empty-state-desc { font-size: 0.9rem; margin-bottom: 1rem; }
+
+/* ── Rarity colors ── */
+.rarity-consumer { color: var(--rarity-consumer); }
+.rarity-industrial { color: var(--rarity-industrial); }
+.rarity-mil-spec { color: var(--rarity-mil-spec); }
+.rarity-restricted { color: var(--rarity-restricted); }
+.rarity-classified { color: var(--rarity-classified); }
+.rarity-covert { color: var(--rarity-covert); }
+.rarity-rare-special { color: var(--rarity-rare-special); }
+.bg-rarity-consumer { background: rgba(176,176,176,0.12); }
+.bg-rarity-industrial { background: rgba(94,152,217,0.12); }
+.bg-rarity-mil-spec { background: rgba(75,105,255,0.12); }
+.bg-rarity-restricted { background: rgba(136,71,255,0.12); }
+.bg-rarity-classified { background: rgba(211,44,230,0.12); }
+.bg-rarity-covert { background: rgba(235,75,75,0.12); }
+.bg-rarity-rare-special { background: rgba(255,215,0,0.12); }
+.glow-rarity-covert { box-shadow: 0 0 20px rgba(235,75,75,0.2); }
+.glow-rarity-rare-special { box-shadow: 0 0 20px rgba(255,215,0,0.25); }
+
+/* ── Admin Layout ── */
+.admin-body { display: flex; min-height: 100vh; }
+.admin-sidebar {
+  width: 240px; background: var(--bg-dark); border-right: 1px solid var(--border);
+  display: flex; flex-direction: column; flex-shrink: 0;
+  position: sticky; top: 0; height: 100vh; overflow-y: auto;
+}
+.admin-sidebar-brand {
+  padding: 1rem 1.15rem; border-bottom: 1px solid var(--border);
+  font-family: var(--font-display); font-size: 1rem;
+  display: flex; align-items: center; gap: 0.4rem;
+}
+.admin-sidebar-brand span { color: var(--primary); }
+.admin-sidebar-nav { padding: 0.5rem; flex: 1; }
+.admin-sidebar-link {
+  display: flex; align-items: center; gap: 0.5rem;
+  padding: 0.5rem 0.75rem; color: var(--text-dim); text-decoration: none;
+  border-radius: var(--radius-sm); transition: all var(--transition);
+  font-size: 0.85rem;
+}
+.admin-sidebar-link:hover { color: var(--text); background: var(--bg-hover); }
+.admin-sidebar-link.active { color: var(--primary); background: var(--primary-subtle); }
+.admin-sidebar-footer { padding: 0.75rem; border-top: 1px solid var(--border); }
+.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+.admin-topbar {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0.75rem 1.5rem; border-bottom: 1px solid var(--border);
+  background: var(--bg-dark); flex-wrap: wrap; gap: 0.5rem;
+}
+.admin-topbar-title { font-family: var(--font-display); font-size: 1.1rem; }
+.admin-topbar-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
+.admin-content { padding: 1.5rem; flex: 1; }
+.a-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.15rem; }
+.a-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; }
+.a-stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.9rem 1rem; }
+.a-stat-value { font-family: var(--font-display); font-size: 1.3rem; color: var(--primary); }
+.a-stat-label { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.1rem; }
+.a-table { width: 100%; }
+.a-btn { padding: 0.4rem 0.85rem; border: none; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; cursor: pointer; text-transform: uppercase; letter-spacing: 0.04em; transition: all var(--transition); font-family: var(--font-body); }
+.a-btn-primary { background: var(--primary); color: #000; }
+.a-btn-primary:hover { box-shadow: 0 4px 12px var(--primary-glow); }
+.a-btn-danger { background: var(--danger); color: #fff; }
+.a-btn-success { background: var(--success); color: #000; }
+.a-btn-outline { background: transparent; border: 1px solid var(--border-light); color: var(--text-dim); }
+.a-btn-outline:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
+.a-input {
+  width: 100%; padding: 0.4rem 0.7rem; font-size: 0.85rem;
+  background: var(--bg-dark); border: 1px solid var(--border-light);
+  border-radius: var(--radius-sm); color: var(--text); outline: none;
+  font-family: var(--font-body); transition: border-color var(--transition);
+}
+.a-input:focus { border-color: var(--primary); }
+.a-badge { display: inline-flex; padding: 0.1rem 0.45rem; border-radius: 4px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; }
+.a-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn 0.15s ease; }
+.a-modal { background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; animation: modalSlideIn 0.2s ease; box-shadow: var(--shadow-xl); }
+.a-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--border); }
+.a-modal-title { font-family: var(--font-display); font-size: 0.95rem; }
+.a-modal-close { background: none; border: none; color: var(--text-dim); font-size: 1.2rem; cursor: pointer; padding: 0.1rem; line-height: 1; transition: color var(--transition); }
+.a-modal-close:hover { color: var(--text); }
+.a-modal-body { padding: 1.15rem; }
+.a-modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0.85rem 1.15rem; border-top: 1px solid var(--border); }
+@media (max-width: 768px) {
+  .admin-sidebar { width: 60px; }
+  .admin-sidebar-brand span, .admin-sidebar-link span { display: none; }
+  .admin-sidebar-link { justify-content: center; padding: 0.6rem; }
+  .admin-sidebar-footer { display: none; }
 }
 
-/* Улучшенные ссылки */
-a:not(.btn):not(.nav-link):not(.logo) {
-    color: var(--primary-color);
-    text-decoration: none;
-    border-bottom: 1px solid transparent;
-    transition: border-color 0.2s;
+/* ── Utilities ── */
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.items-center { align-items: center; }
+.justify-between { justify-content: space-between; }
+.justify-center { justify-content: center; }
+.gap-1 { gap: 0.25rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-4 { gap: 1rem; }
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-4 { margin-top: 1rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-4 { margin-bottom: 1rem; }
+.text-center { text-align: center; }
+.text-dim { color: var(--text-dim); }
+.text-primary { color: var(--primary); }
+.text-sm { font-size: 0.78rem; }
+.text-xs { font-size: 0.7rem; }
+.font-display { font-family: var(--font-display); }
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.w-full { width: 100%; }
+
+/* ── Animations ── */
+@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
+@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 8px var(--primary-glow); } 50% { box-shadow: 0 0 25px rgba(245,158,11,0.5); } }
+@keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+@keyframes slideInDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+@keyframes scaleIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
+@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
+@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
+.animate-pulse { animation: pulse 2s ease-in-out infinite; }
+.animate-float { animation: float 3s ease-in-out infinite; }
+.animate-shake { animation: shake 0.4s ease; }
+.animate-slideUp { animation: slideInUp 0.3s ease; }
+.animate-scaleIn { animation: scaleIn 0.25s ease; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+}
+
+/* ── Responsive helpers ── */
+@media (max-width: 1024px) {
+  .container { padding: 0 15px; }
+}
+@media (max-width: 768px) {
+  .hero { padding: 2.5rem 0; }
+  .section { padding: 1.5rem 0; }
+  .stats-grid { grid-template-columns: repeat(2, 1fr); }
+  .admin-content { padding: 1rem; }
+  .admin-topbar { padding: 0.6rem 1rem; }
+}
+@media (max-width: 480px) {
+  .stats-grid { grid-template-columns: 1fr; }
+  .hero-actions { flex-direction: column; align-items: stretch; }
+  .hero-actions .btn { justify-content: center; }
 }
-a:not(.btn):not(.nav-link):not(.logo):hover {
-    border-bottom-color: var(--primary-color);
-}
\ No newline at end of file
diff --git a/static/js/app.js b/static/js/app.js
index e2bc26c..0a8c690 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -1,155 +1,132 @@
-// ─── Shared CS2 Simulator Utilities ─────────────────────────────────────────
-
-// Logout
 async function logout() {
-    try {
-        await fetch('/web/api/auth/logout', { method: 'POST' });
-    } catch (e) {}
-    window.location.href = '/';
+  try { await fetch('/web/api/auth/logout', { method: 'POST' }); } catch (e) {}
+  window.location.href = '/';
 }
 
-// Refresh balance display
 async function refreshBalance() {
-    try {
-        const res = await fetch('/web/api/user/balance');
-        const data = await res.json();
-        if (data.success) {
-            document.querySelectorAll('.user-balance').forEach(el => {
-                el.textContent = `${Math.floor(data.balance)} ₽`;
-            });
-        }
-    } catch (e) {}
-}
-
-// Rarity colors
-function getRarityColor(rarity) {
-    const colors = {
-        'Consumer Grade': '#b0b0b0',
-        'Industrial Grade': '#5e98d9',
-        'Mil-Spec': '#4b69ff',
-        'Mil-Spec Grade': '#4b69ff',
-        'Restricted': '#8847ff',
-        'Classified': '#d32ce6',
-        'Covert': '#eb4b4b',
-        'Rare Special Item': '#ffd700',
-        'Extraordinary': '#ffd700',
-    };
-    return colors[rarity] || '#b0b0b0';
-}
-
-// Format number with spaces
-function formatNumber(n) {
-    return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
-}
-
-// Debounce
-function debounce(fn, ms = 300) {
-    let timer;
-    return function (...args) {
-        clearTimeout(timer);
-        timer = setTimeout(() => fn.apply(this, args), ms);
-    };
-}
-
-// Escape HTML
-function escapeHtml(str) {
-    const div = document.createElement('div');
-    div.textContent = str;
-    return div.innerHTML;
-}
-
-// Show notification
-function showNotification(message, type = 'info', duration = 3000) {
-    const existing = document.querySelector('.notification-toast');
-    if (existing) existing.remove();
-
-    const colors = {
-        success: '#22c55e',
-        error: '#ef4444',
-        info: '#3b82f6',
-        warning: '#f59e0b',
-    };
-
-    const toast = document.createElement('div');
-    toast.className = 'notification-toast';
-    toast.style.cssText = `
-        position: fixed; top: 20px; right: 20px; z-index: 99999;
-        background: #1a1a2e; border: 1px solid ${colors[type] || colors.info};
-        color: white; padding: 12px 20px; border-radius: 8px;
-        font-size: 14px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
-        animation: slideInRight 0.3s ease; max-width: 400px;
-    `;
-    toast.textContent = message;
-    document.body.appendChild(toast);
-
-    setTimeout(() => {
-        toast.style.animation = 'slideOutRight 0.3s ease forwards';
-        setTimeout(() => toast.remove(), 300);
-    }, duration);
-}
-
-// Inject notification styles once
-if (!document.getElementById('notificationStyles')) {
-    const style = document.createElement('style');
-    style.id = 'notificationStyles';
-    style.textContent = `
-        @keyframes slideInRight {
-            from { transform: translateX(120%); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
-        }
-        @keyframes slideOutRight {
-            from { transform: translateX(0); opacity: 1; }
-            to { transform: translateX(120%); opacity: 0; }
-        }
-    `;
-    document.head.appendChild(style);
-}
-
-// Show achievement popup (global function used by templates)
-function showAchievementPopup(title, reward) {
-    let popup = document.getElementById('achievementGlobalPopup');
-    if (!popup) {
-        popup = document.createElement('div');
-        popup.id = 'achievementGlobalPopup';
-        popup.style.cssText = `
-            position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
-            z-index: 99999; background: linear-gradient(135deg, #1a3a1a, #0d260d);
-            border: 1px solid #22c55e; border-radius: 12px; padding: 1rem 1.5rem;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
-            animation: slideInDown 0.5s ease; max-width: 400px; width: 90%;
-            text-align: center;
-        `;
-        popup.innerHTML = `
-            <div style="font-size:0.85rem;color:#94a3b8;margin-bottom:0.25rem;">🏆 Новое достижение!</div>
-            <div style="font-size:1.1rem;font-weight:600;" id="globalPopupTitle"></div>
-            <div style="color:#22c55e;font-size:0.9rem;margin-top:0.25rem;" id="globalPopupReward"></div>
-        `;
-        document.body.appendChild(popup);
-
-        if (!document.getElementById('slideInDownStyle')) {
-            const s = document.createElement('style');
-            s.id = 'slideInDownStyle';
-            s.textContent = `
-                @keyframes slideInDown {
-                    from { transform: translateX(-50%) translateY(-120%); opacity: 0; }
-                    to { transform: translateX(-50%) translateY(0); opacity: 1; }
-                }
-            `;
-            document.head.appendChild(s);
+  try {
+    const res = await fetch('/web/api/user/balance');
+    const data = await res.json();
+    if (data.success) {
+      document.querySelectorAll('.user-balance').forEach(el => {
+        const old = el.textContent;
+        const val = `${Math.floor(data.balance)} ₽`;
+        if (old !== val) {
+          el.textContent = val;
+          el.classList.remove('animate-scaleIn');
+          void el.offsetWidth;
+          el.classList.add('animate-scaleIn');
         }
+      });
     }
-
-    document.getElementById('globalPopupTitle').textContent = title;
-    document.getElementById('globalPopupReward').textContent = reward ? `+${reward} ₽` : '';
-    popup.style.display = 'block';
-
-    if (window.SoundManager) SoundManager.achievement();
-
-    setTimeout(() => {
-        popup.style.animation = 'slideInDown 0.5s ease reverse forwards';
-        setTimeout(() => {
-            popup.style.display = 'none';
-            popup.style.animation = 'slideInDown 0.5s ease';
-        }, 500);
-    }, 4000);
+  } catch (e) {}
 }
+
+function getRarityColor(rarity) {
+  const colors = {
+    'Consumer Grade': '#b0b0b0',
+    'Industrial Grade': '#5e98d9',
+    'Mil-Spec': '#4b69ff',
+    'Mil-Spec Grade': '#4b69ff',
+    'Restricted': '#8847ff',
+    'Classified': '#d32ce6',
+    'Covert': '#eb4b4b',
+    'Rare Special Item': '#ffd700',
+    'Extraordinary': '#ffd700',
+  };
+  return colors[rarity] || '#b0b0b0';
+}
+
+function formatNumber(n) {
+  return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ');
+}
+
+function debounce(fn, ms = 300) {
+  let timer;
+  return function (...args) {
+    clearTimeout(timer);
+    timer = setTimeout(() => fn.apply(this, args), ms);
+  };
+}
+
+function escapeHtml(str) {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+function showNotification(message, type = 'info', duration = 3000) {
+  let container = document.getElementById('toastContainer');
+  if (!container) {
+    container = document.createElement('div');
+    container.id = 'toastContainer';
+    container.className = 'toast-container';
+    document.body.appendChild(container);
+  }
+
+  const icons = { success: '✓', error: '✗', info: 'ℹ', warning: '⚠' };
+  const toast = document.createElement('div');
+  toast.className = `toast toast-${type} animate-slideUp`;
+  toast.innerHTML = `<span>${icons[type] || ''}</span><span>${message}</span>`;
+  container.appendChild(toast);
+
+  setTimeout(() => {
+    toast.style.opacity = '0';
+    toast.style.transform = 'translateX(100%)';
+    toast.style.transition = 'all 0.3s ease';
+    setTimeout(() => toast.remove(), 300);
+  }, duration);
+}
+
+function showAchievementPopup(title, reward) {
+  let popup = document.getElementById('achievementGlobalPopup');
+  if (!popup) {
+    popup = document.createElement('div');
+    popup.id = 'achievementGlobalPopup';
+    popup.className = 'modal-overlay';
+    popup.style.background = 'rgba(0,0,0,0.5)';
+    popup.style.alignItems = 'flex-start';
+    popup.style.paddingTop = '60px';
+    popup.innerHTML = `
+      <div style="background:linear-gradient(135deg,#1a3a1a,#0d260d);border:1px solid #22c55e;border-radius:14px;padding:1.25rem 1.75rem;max-width:400px;width:90%;text-align:center;animation:modalSlideIn 0.3s ease;box-shadow:0 16px 48px rgba(0,0,0,0.6);">
+        <div style="font-size:0.8rem;color:var(--text-dim,#94a3b8);margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.05em;">🏆 Достижение разблокировано!</div>
+        <div style="font-size:1.2rem;font-weight:600;font-family:var(--font-display,'Russo One',sans-serif);" id="globalPopupTitle"></div>
+        <div style="color:#22c55e;font-size:0.95rem;margin-top:0.35rem;font-weight:600;" id="globalPopupReward"></div>
+      </div>
+    `;
+    document.body.appendChild(popup);
+  }
+
+  document.getElementById('globalPopupTitle').textContent = title;
+  document.getElementById('globalPopupReward').textContent = reward ? `+${reward} ₽` : '';
+  popup.style.display = 'flex';
+
+  if (window.SoundManager) SoundManager.achievement();
+
+  setTimeout(() => {
+    popup.style.display = 'none';
+  }, 4000);
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const toggle = document.getElementById('mobileToggle');
+  const nav = document.getElementById('navLinks');
+  if (toggle && nav) {
+    toggle.addEventListener('click', () => {
+      nav.classList.toggle('open');
+    });
+    document.addEventListener('click', (e) => {
+      if (!toggle.contains(e.target) && !nav.contains(e.target)) {
+        nav.classList.remove('open');
+      }
+    });
+  }
+
+  const soundToggle = document.getElementById('soundToggle');
+  if (soundToggle && window.SoundManager) {
+    soundToggle.addEventListener('click', () => {
+      const enabled = SoundManager.toggle();
+      soundToggle.textContent = enabled ? '🔊' : '🔇';
+    });
+  }
+});
diff --git a/static/js/sounds.js b/static/js/sounds.js
index 3035950..921d528 100644
--- a/static/js/sounds.js
+++ b/static/js/sounds.js
@@ -1,185 +1,349 @@
-// Sound effects system using Web Audio API - no external files needed
 const SoundManager = {
-    _ctx: null,
-    _enabled: true,
-    _volume: 0.3,
+  _ctx: null,
+  _master: null,
+  _analyser: null,
+  _enabled: true,
+  _volume: 0.3,
+  _ambient: null,
+  _ambientGain: null,
+  _initCalled: false,
 
-    init() {
-        try {
-            this._ctx = new (window.AudioContext || window.webkitAudioContext)();
-        } catch (e) {
-            console.warn('Web Audio API not supported');
-            this._enabled = false;
-        }
-        const saved = localStorage.getItem('sound_enabled');
-        if (saved !== null) this._enabled = saved === 'true';
-    },
-
-    setEnabled(on) {
-        this._enabled = on;
-        localStorage.setItem('sound_enabled', on);
-    },
-
-    toggle() {
-        this.setEnabled(!this._enabled);
-        return this._enabled;
-    },
-
-    _play(freq, duration, type = 'sine', volume = 1) {
-        if (!this._enabled || !this._ctx) return;
-        if (this._ctx.state === 'suspended') this._ctx.resume();
-
-        const osc = this._ctx.createOscillator();
-        const gain = this._ctx.createGain();
-        osc.type = type;
-        osc.frequency.setValueAtTime(freq, this._ctx.currentTime);
-        gain.gain.setValueAtTime(this._volume * volume, this._ctx.currentTime);
-        gain.gain.exponentialRampToValueAtTime(0.001, this._ctx.currentTime + duration);
-        osc.connect(gain);
-        gain.connect(this._ctx.destination);
-        osc.start();
-        osc.stop(this._ctx.currentTime + duration);
-    },
-
-    _noise(duration, volume = 1) {
-        if (!this._enabled || !this._ctx) return;
-        if (this._ctx.state === 'suspended') this._ctx.resume();
-
-        const bufferSize = this._ctx.sampleRate * duration;
-        const buffer = this._ctx.createBuffer(1, bufferSize, this._ctx.sampleRate);
-        const data = buffer.getChannelData(0);
-        for (let i = 0; i < bufferSize; i++) {
-            data[i] = Math.random() * 2 - 1;
-        }
-        const source = this._ctx.createBufferSource();
-        source.buffer = buffer;
-        const gain = this._ctx.createGain();
-        gain.gain.setValueAtTime(this._volume * volume, this._ctx.currentTime);
-        gain.gain.exponentialRampToValueAtTime(0.001, this._ctx.currentTime + duration);
-        source.connect(gain);
-        gain.connect(this._ctx.destination);
-        source.start();
-    },
-
-    caseOpen() {
-        // Descending sweep with click
-        this._play(800, 0.1, 'square', 0.3);
-        setTimeout(() => this._play(400, 0.15, 'sawtooth', 0.2), 80);
-        setTimeout(() => this._play(200, 0.2, 'sine', 0.15), 180);
-        this._noise(0.05, 0.4);
-    },
-
-    caseRare() {
-        // Ascending bright chime for rare items
-        this._play(523, 0.15, 'sine', 0.3);
-        setTimeout(() => this._play(659, 0.15, 'sine', 0.3), 100);
-        setTimeout(() => this._play(784, 0.15, 'sine', 0.3), 200);
-        setTimeout(() => this._play(1047, 0.3, 'sine', 0.4), 300);
-    },
-
-    caseCovert() {
-        // Epic sound for covert/knife
-        this._play(392, 0.2, 'sawtooth', 0.3);
-        setTimeout(() => this._play(523, 0.2, 'sawtooth', 0.3), 150);
-        setTimeout(() => this._play(659, 0.2, 'sawtooth', 0.3), 300);
-        setTimeout(() => this._play(784, 0.4, 'sine', 0.5), 450);
-        setTimeout(() => this._play(1047, 0.6, 'sine', 0.6), 600);
-    },
-
-    slotSpin() {
-        // Ratcheting sound for slot reels
-        for (let i = 0; i < 8; i++) {
-            setTimeout(() => {
-                this._play(300 + Math.random() * 400, 0.05, 'square', 0.15);
-            }, i * 80);
-        }
-    },
-
-    slotMatch() {
-        // Win jingle
-        this._play(523, 0.1, 'sine', 0.3);
-        setTimeout(() => this._play(659, 0.1, 'sine', 0.3), 100);
-        setTimeout(() => this._play(784, 0.1, 'sine', 0.3), 200);
-        setTimeout(() => this._play(1047, 0.4, 'sine', 0.5), 300);
-    },
-
-    contractSubmit() {
-        // Mechanical sound
-        this._play(150, 0.3, 'sawtooth', 0.2);
-        setTimeout(() => this._play(200, 0.2, 'square', 0.2), 200);
-        setTimeout(() => this._play(250, 0.1, 'square', 0.15), 350);
-    },
-
-    contractResult() {
-        // Rising success
-        this._play(400, 0.15, 'sine', 0.3);
-        setTimeout(() => this._play(600, 0.15, 'sine', 0.3), 120);
-        setTimeout(() => this._play(800, 0.3, 'sine', 0.4), 240);
-    },
-
-    wheelSpin() {
-        // Ticking as wheel rotates
-        this._play(200, 0.03, 'square', 0.1);
-    },
-
-    wheelWin() {
-        // Celebration
-        this._play(523, 0.15, 'sine', 0.3);
-        setTimeout(() => this._play(659, 0.15, 'sine', 0.3), 120);
-        setTimeout(() => this._play(784, 0.2, 'sine', 0.35), 240);
-        setTimeout(() => this._play(1047, 0.5, 'sine', 0.5), 360);
-    },
-
-    wheelLose() {
-        // Sad trombone
-        this._play(400, 0.2, 'sine', 0.2);
-        setTimeout(() => this._play(350, 0.2, 'sine', 0.2), 150);
-        setTimeout(() => this._play(300, 0.3, 'sine', 0.15), 300);
-    },
-
-    achievement() {
-        // Achievement unlock
-        this._play(659, 0.1, 'sine', 0.3);
-        setTimeout(() => this._play(523, 0.1, 'sine', 0.3), 100);
-        setTimeout(() => this._play(784, 0.1, 'sine', 0.3), 200);
-        setTimeout(() => this._play(659, 0.1, 'sine', 0.3), 300);
-        setTimeout(() => this._play(1047, 0.4, 'sine', 0.5), 400);
-    },
-
-    crashBet() {
-        this._play(300, 0.1, 'square', 0.15);
-    },
-
-    crashTick() {
-        this._play(500 + Math.random() * 500, 0.03, 'sine', 0.08);
-    },
-
-    crashCrashed() {
-        // Explosion
-        this._noise(0.3, 0.6);
-        this._play(80, 0.5, 'sawtooth', 0.4);
-        setTimeout(() => this._play(50, 0.8, 'sine', 0.3), 100);
-    },
-
-    crashCashout() {
-        // Cashout success
-        this._play(600, 0.1, 'sine', 0.3);
-        setTimeout(() => this._play(800, 0.1, 'sine', 0.3), 80);
-        setTimeout(() => this._play(1000, 0.2, 'sine', 0.4), 160);
-    },
-
-    click() {
-        this._play(800, 0.03, 'sine', 0.1);
-    },
-
-    error() {
-        this._play(200, 0.15, 'square', 0.2);
-    },
-
-    balanceUpdate() {
-        this._play(1000, 0.05, 'sine', 0.1);
+  init() {
+    if (this._initCalled) return;
+    this._initCalled = true;
+    try {
+      this._ctx = new (window.AudioContext || window.webkitAudioContext)();
+      this._master = this._ctx.createGain();
+      this._master.gain.value = this._volume;
+      this._master.connect(this._ctx.destination);
+    } catch (e) {
+      console.warn('Web Audio API not supported');
+      this._enabled = false;
     }
+    const saved = localStorage.getItem('sound_enabled');
+    if (saved !== null) this._enabled = saved === 'true';
+    const vol = localStorage.getItem('sound_volume');
+    if (vol !== null) this.setVolume(parseFloat(vol));
+
+    document.addEventListener('click', () => {
+      if (this._ctx && this._ctx.state === 'suspended') this._ctx.resume();
+    }, { once: true });
+  },
+
+  setEnabled(on) {
+    this._enabled = on;
+    localStorage.setItem('sound_enabled', on);
+    if (!on && this._ambientGain) {
+      this._ambientGain.gain.setTargetAtTime(0, this._ctx.currentTime, 0.5);
+    }
+  },
+
+  toggle() {
+    this.setEnabled(!this._enabled);
+    return this._enabled;
+  },
+
+  setVolume(v) {
+    this._volume = Math.max(0, Math.min(1, v));
+    if (this._master) this._master.gain.value = this._volume;
+    localStorage.setItem('sound_volume', this._volume);
+  },
+
+  _t() {
+    return this._ctx ? this._ctx.currentTime : 0;
+  },
+
+  _osc(freq, duration, type = 'sine', vol = 1, dest) {
+    if (!this._enabled || !this._ctx) return;
+    if (this._ctx.state === 'suspended') this._ctx.resume();
+    const now = this._t();
+    const o = this._ctx.createOscillator();
+    const g = this._ctx.createGain();
+    o.type = type;
+    o.frequency.setValueAtTime(freq, now);
+    g.gain.setValueAtTime(vol, now);
+    g.gain.exponentialRampToValueAtTime(0.001, now + duration);
+    o.connect(g);
+    g.connect(dest || this._master);
+    o.start(now);
+    o.stop(now + duration);
+  },
+
+  _noise(duration, vol = 1, filterFreq, dest) {
+    if (!this._enabled || !this._ctx) return;
+    if (this._ctx.state === 'suspended') this._ctx.resume();
+    const now = this._t();
+    const sr = this._ctx.sampleRate;
+    const len = sr * duration;
+    const buf = this._ctx.createBuffer(1, len, sr);
+    const data = buf.getChannelData(0);
+    for (let i = 0; i < len; i++) data[i] = Math.random() * 2 - 1;
+    const src = this._ctx.createBufferSource();
+    src.buffer = buf;
+    let node = src;
+    if (filterFreq) {
+      const f = this._ctx.createBiquadFilter();
+      f.type = 'lowpass';
+      f.frequency.value = filterFreq;
+      src.connect(f);
+      node = f;
+    }
+    const g = this._ctx.createGain();
+    g.gain.setValueAtTime(vol, now);
+    g.gain.exponentialRampToValueAtTime(0.001, now + duration);
+    node.connect(g);
+    g.connect(dest || this._master);
+    src.start(now);
+  },
+
+  _chord(freqs, duration, type = 'sine', vol = 0.15) {
+    freqs.forEach(f => this._osc(f, duration, type, vol / freqs.length));
+  },
+
+  // ── Rarity color helpers ──
+  _rarityParams(rarity) {
+    const map = {
+      'Consumer Grade': { baseFreq: 300, arp: [300, 350, 400], noiseVol: 0.2, dur: 0.6 },
+      'Industrial Grade': { baseFreq: 400, arp: [400, 500, 600], noiseVol: 0.2, dur: 0.7 },
+      'Mil-Spec': { baseFreq: 500, arp: [500, 630, 750], noiseVol: 0.25, dur: 0.8 },
+      'Mil-Spec Grade': { baseFreq: 500, arp: [500, 630, 750], noiseVol: 0.25, dur: 0.8 },
+      'Restricted': { baseFreq: 600, arp: [600, 750, 900], noiseVol: 0.3, dur: 1.0 },
+      'Classified': { baseFreq: 700, arp: [700, 880, 1050], noiseVol: 0.35, dur: 1.2 },
+      'Covert': { baseFreq: 800, arp: [800, 1000, 1200], noiseVol: 0.4, dur: 1.5 },
+      'Rare Special Item': { baseFreq: 900, arp: [900, 1100, 1400], noiseVol: 0.45, dur: 1.8 },
+      'Extraordinary': { baseFreq: 900, arp: [900, 1100, 1400], noiseVol: 0.45, dur: 1.8 },
+    };
+    return map[rarity] || map['Consumer Grade'];
+  },
+
+  // ── Ambient ──
+  startAmbient() {
+    if (!this._ctx || this._ambient) return;
+    const now = this._t();
+    this._ambientGain = this._ctx.createGain();
+    this._ambientGain.gain.value = 0;
+
+    const bufLen = this._ctx.sampleRate * 2;
+    const buf = this._ctx.createBuffer(1, bufLen, this._ctx.sampleRate);
+    const data = buf.getChannelData(0);
+    for (let i = 0; i < bufLen; i++) {
+      const t = i / this._ctx.sampleRate;
+      data[i] = (Math.random() - 0.5) * 0.5
+        + Math.sin(2 * Math.PI * 55 * t) * 0.08
+        + Math.sin(2 * Math.PI * 82.5 * t) * 0.05;
+    }
+    const src = this._ctx.createBufferSource();
+    src.buffer = buf;
+    src.loop = true;
+
+    const lp = this._ctx.createBiquadFilter();
+    lp.type = 'lowpass';
+    lp.frequency.value = 300;
+
+    const hp = this._ctx.createBiquadFilter();
+    hp.type = 'highpass';
+    hp.frequency.value = 40;
+
+    src.connect(lp);
+    lp.connect(hp);
+    hp.connect(this._ambientGain);
+    this._ambientGain.connect(this._master);
+    src.start();
+    this._ambient = src;
+    this._ambientGain.gain.setTargetAtTime(0.06, now, 1);
+  },
+
+  stopAmbient() {
+    if (this._ambientGain) {
+      this._ambientGain.gain.setTargetAtTime(0, this._t(), 0.5);
+      setTimeout(() => {
+        if (this._ambient) { try { this._ambient.stop(); } catch (e) {} this._ambient = null; }
+      }, 1500);
+    }
+  },
+
+  // ── Case Opening ──
+  caseOpen() {
+    this._noise(0.15, 0.4, 2000);
+    this._osc(700, 0.06, 'square', 0.25);
+    setTimeout(() => this._osc(500, 0.08, 'square', 0.2), 50);
+    setTimeout(() => this._osc(350, 0.1, 'sawtooth', 0.18), 110);
+    setTimeout(() => this._osc(250, 0.12, 'sine', 0.12), 180);
+    setTimeout(() => this._noise(0.3, 0.15, 4000), 120);
+  },
+
+  caseReveal(rarity) {
+    const p = this._rarityParams(rarity);
+    this._noise(0.08, 0.3, 3000);
+    p.arp.forEach((f, i) => {
+      setTimeout(() => {
+        this._osc(f, 0.15, 'sine', 0.25);
+        this._osc(f * 2, 0.1, 'sine', 0.08);
+      }, i * 100);
+    });
+    setTimeout(() => {
+      this._osc(p.baseFreq * 2, 0.4, 'sine', 0.35);
+      this._noise(0.15, p.noiseVol, 5000);
+      this._osc(p.baseFreq, 0.6, 'sawtooth', 0.15);
+    }, p.arp.length * 100);
+  },
+
+  caseCovert() {
+    this._noise(0.1, 0.5, 4000);
+    [392, 523, 659, 784, 1047].forEach((f, i) => {
+      setTimeout(() => {
+        this._osc(f, 0.2, 'sawtooth', 0.3);
+        this._osc(f * 1.5, 0.15, 'sine', 0.1);
+      }, i * 120);
+    });
+    setTimeout(() => {
+      this._osc(1047, 0.8, 'sine', 0.6);
+      this._osc(784, 0.6, 'triangle', 0.25);
+      this._noise(0.6, 0.4, 6000);
+    }, 600);
+  },
+
+  caseRare() {
+    [523, 659, 784, 1047].forEach((f, i) => {
+      setTimeout(() => {
+        this._osc(f, 0.12, 'sine', 0.3);
+        this._osc(f * 1.5, 0.08, 'sine', 0.06);
+      }, i * 80);
+    });
+    setTimeout(() => this._osc(1319, 0.5, 'sine', 0.5), 320);
+  },
+
+  // ── Slots ──
+  slotSpin() {
+    for (let i = 0; i < 10; i++) {
+      setTimeout(() => {
+        this._osc(200 + Math.random() * 600, 0.04, 'square', 0.12);
+      }, i * 60);
+    }
+  },
+
+  slotMatch() {
+    [523, 659, 784, 1047].forEach((f, i) => {
+      setTimeout(() => this._osc(f, 0.15, 'sine', 0.35), i * 100);
+    });
+    setTimeout(() => this._noise(0.2, 0.3, 8000), 300);
+  },
+
+  // ── Contract ──
+  contractSubmit() {
+    this._osc(150, 0.25, 'sawtooth', 0.2);
+    setTimeout(() => this._osc(200, 0.15, 'square', 0.18), 150);
+    setTimeout(() => {
+      this._osc(250, 0.08, 'square', 0.15);
+      this._noise(0.05, 0.15);
+    }, 280);
+  },
+
+  contractResult() {
+    [400, 600, 800].forEach((f, i) => {
+      setTimeout(() => this._osc(f, 0.15, 'sine', 0.3), i * 100);
+    });
+    setTimeout(() => {
+      this._osc(1200, 0.4, 'sine', 0.45);
+      this._noise(0.2, 0.2, 5000);
+    }, 300);
+  },
+
+  // ── Wheel ──
+  wheelTick() {
+    this._osc(200, 0.03, 'square', 0.08);
+  },
+
+  wheelWin() {
+    [523, 659, 784, 1047].forEach((f, i) => {
+      setTimeout(() => this._osc(f, 0.18, 'sine', 0.35), i * 100);
+    });
+    setTimeout(() => this._noise(0.4, 0.3, 8000), 400);
+  },
+
+  wheelLose() {
+    [400, 350, 300].forEach((f, i) => {
+      setTimeout(() => this._osc(f, 0.25, 'sine', 0.2), i * 150);
+    });
+  },
+
+  // ── Achievements ──
+  achievement() {
+    [659, 523, 784, 659, 1047].forEach((f, i) => {
+      setTimeout(() => this._osc(f, 0.12, 'sine', 0.3), i * 80);
+    });
+    setTimeout(() => this._noise(0.3, 0.25, 6000), 400);
+  },
+
+  // ── Crash ──
+  crashBet() {
+    this._osc(300, 0.08, 'square', 0.15);
+    setTimeout(() => this._osc(350, 0.06, 'square', 0.1), 60);
+  },
+
+  crashTick(multiplier) {
+    const freq = 300 + Math.min(multiplier * 50, 800);
+    this._osc(freq, 0.03, 'sine', 0.05 + Math.min(multiplier * 0.01, 0.15));
+  },
+
+  crashCrashed() {
+    this._noise(0.5, 0.6, 2000);
+    this._osc(80, 0.6, 'sawtooth', 0.4);
+    setTimeout(() => this._osc(50, 1, 'sine', 0.3), 100);
+    setTimeout(() => this._osc(40, 0.8, 'triangle', 0.2), 200);
+  },
+
+  crashCashout(multiplier) {
+    const vol = 0.2 + Math.min(multiplier * 0.02, 0.5);
+    [600, 800, 1000, 1200].forEach((f, i) => {
+      setTimeout(() => this._osc(f, 0.12, 'sine', vol), i * 80);
+    });
+    setTimeout(() => this._noise(0.3, 0.3, 8000), 320);
+  },
+
+  // ── Upgrade ──
+  upgradeSubmit() {
+    this._osc(250, 0.1, 'square', 0.15);
+    this._noise(0.05, 0.2);
+  },
+
+  upgradeResult() {
+    [523, 784, 1047].forEach((f, i) => {
+      setTimeout(() => this._osc(f, 0.2, 'sine', 0.3), i * 120);
+    });
+    setTimeout(() => this._noise(0.25, 0.25, 6000), 360);
+  },
+
+  upgradeFail() {
+    [300, 250, 200].forEach((f, i) => {
+      setTimeout(() => this._osc(f, 0.2, 'sawtooth', 0.2), i * 120);
+    });
+  },
+
+  // ── UI ──
+  click() {
+    this._osc(800, 0.03, 'sine', 0.08);
+  },
+
+  hover() {
+    this._osc(1200, 0.015, 'sine', 0.03);
+  },
+
+  error() {
+    this._osc(200, 0.15, 'square', 0.2);
+    setTimeout(() => this._osc(180, 0.12, 'square', 0.15), 100);
+  },
+
+  success() {
+    [600, 800, 1000].forEach((f, i) => {
+      setTimeout(() => this._osc(f, 0.08, 'sine', 0.2), i * 60);
+    });
+  },
+
+  balanceUpdate() {
+    this._osc(1000, 0.04, 'sine', 0.08);
+    setTimeout(() => this._osc(1200, 0.04, 'sine', 0.06), 50);
+  },
 };
 
-// Auto-init
 document.addEventListener('DOMContentLoaded', () => SoundManager.init());
diff --git a/templates/_activity_sidebar.html b/templates/_activity_sidebar.html
index 484c579..a760827 100644
--- a/templates/_activity_sidebar.html
+++ b/templates/_activity_sidebar.html
@@ -1,203 +1,86 @@
 <style>
 .activity-sidebar {
-    position: fixed;
-    left: 0;
-    top: 0;
-    bottom: 0;
-    width: 260px;
-    background: var(--bg-card);
-    border-right: 1px solid var(--border-color);
-    z-index: 50;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    padding-top: 60px;
-    transform: translateX(0);
-    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-.activity-sidebar.closed {
-    transform: translateX(-100%);
+    position: fixed; left: 0; top: 0; bottom: 0; width: 240px;
+    background: var(--bg-card); border-right: 1px solid var(--border);
+    z-index: 40; display: flex; flex-direction: column; overflow: hidden;
+    padding-top: 56px; transform: translateX(0);
+    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
 }
+.activity-sidebar.closed { transform: translateX(-100%); }
 .activity-sidebar-header {
-    padding: 0.6rem 0.8rem;
-    border-bottom: 1px solid var(--border-color);
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-shrink: 0;
-}
-.activity-sidebar-header h3 {
-    font-size: 0.8rem;
-    margin: 0;
-    font-weight: 600;
-    display: flex;
-    align-items: center;
-    gap: 0.35rem;
-}
-.live-dot {
-    width: 5px; height: 5px;
-    background: #22c55e;
-    border-radius: 50%;
-    display: inline-block;
-    animation: pulse 1.5s ease infinite;
-}
-@keyframes pulse {
-    0%,100%{opacity:1}50%{opacity:0.3}
-}
-.activity-sidebar-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.4rem;
+    padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
+    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
 }
+.activity-sidebar-list { flex: 1; overflow-y: auto; padding: 0.35rem; }
 .activity-sidebar-list::-webkit-scrollbar { width: 3px; }
-.activity-sidebar-list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }
+.activity-sidebar-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
 .activity-sidebar-item {
-    display: flex;
-    gap: 0.5rem;
-    padding: 0.4rem 0.5rem;
-    border-radius: 6px;
-    margin-bottom: 0.15rem;
-    transition: background 0.15s;
+    display: flex; gap: 0.4rem; padding: 0.35rem 0.5rem; border-radius: 6px;
+    margin-bottom: 0.1rem; cursor: pointer; transition: background 0.15s;
     animation: fadeInItem 0.3s ease;
 }
-.activity-sidebar-item:hover { background: var(--bg-dark); }
-.activity-sidebar-item .asi-icon {
-    font-size: 0.85rem;
-    width: 24px; height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--bg-dark);
-    border-radius: 5px;
-    flex-shrink: 0;
-}
-.activity-sidebar-item .asi-content {
-    flex: 1;
-    min-width: 0;
-    font-size: 0.72rem;
-    line-height: 1.25;
-}
-.activity-sidebar-item .asi-content .asi-username {
-    color: var(--primary-color);
-    font-weight: 500;
-}
-.activity-sidebar-item .asi-content .asi-time {
-    font-size: 0.6rem;
-    color: var(--text-secondary);
-    margin-top: 0.1rem;
-}
-.activity-sidebar-item .asi-item-preview {
-    width: 28px; height: 21px;
-    object-fit: contain;
-    border-radius: 3px;
-    flex-shrink: 0;
-}
-.activity-sidebar-close {
-    background: none;
-    border: none;
-    color: var(--text-secondary);
-    cursor: pointer;
-    font-size: 1rem;
-    padding: 0.2rem;
-    line-height: 1;
-    opacity: 0.5;
-    transition: opacity 0.2s;
-}
-.activity-sidebar-close:hover { opacity: 1; }
-
-/* Кнопка открытия ленты (слева, по центру) */
+.activity-sidebar-item:hover { background: var(--bg-hover); }
+.activity-sidebar-item .asi-icon { font-size: 0.8rem; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--bg-dark); border-radius: 4px; flex-shrink: 0; }
+.activity-sidebar-item .asi-content { flex: 1; min-width: 0; font-size: 0.68rem; line-height: 1.25; }
+.activity-sidebar-item .asi-content .asi-username { color: var(--primary); font-weight: 500; }
+.activity-sidebar-item .asi-content .asi-time { font-size: 0.55rem; color: var(--text-dim); margin-top: 0.05rem; }
+.activity-sidebar-item .asi-item-preview { width: 26px; height: 20px; object-fit: contain; border-radius: 3px; flex-shrink: 0; }
 .activity-toggle-btn {
-    position: fixed;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    background: var(--bg-card);
-    border: 1px solid var(--border-color);
-    border-left: none;
-    border-radius: 0 8px 8px 0;
-    padding: 0.6rem 0.3rem;
-    cursor: pointer;
-    z-index: 49;
-    font-size: 0.85rem;
-    color: var(--text-secondary);
-    transition: all 0.2s;
-    writing-mode: vertical-rl;
-    letter-spacing: 0.05em;
-    display: none;
-    user-select: none;
+    position: fixed; left: 0; top: 50%; transform: translateY(-50%);
+    background: var(--bg-card); border: 1px solid var(--border); border-left: none;
+    border-radius: 0 8px 8px 0; padding: 0.5rem 0.2rem; cursor: pointer;
+    z-index: 39; font-size: 0.75rem; color: var(--text-dim);
+    writing-mode: vertical-rl; letter-spacing: 0.04em;
+    display: none; user-select: none;
 }
-.activity-toggle-btn:hover {
-    color: var(--primary-color);
-    border-color: var(--primary-color);
-}
-.activity-toggle-btn.visible {
-    display: flex;
-    align-items: center;
-    gap: 0.3rem;
-}
-
-@keyframes fadeInItem {
-    from { opacity: 0; transform: translateY(-5px); }
-    to { opacity: 1; transform: translateY(0); }
-}
-.has-activity-sidebar {
-    padding-left: 260px;
-    transition: padding-left 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
-}
-.has-activity-sidebar.sidebar-closed {
-    padding-left: 0;
-}
-@media (max-width: 900px) {
-    .activity-sidebar { display: none; }
-    .activity-toggle-btn { display: none !important; }
-    .has-activity-sidebar { padding-left: 0; }
+.activity-toggle-btn:hover { color: var(--primary); border-color: var(--primary); }
+.activity-toggle-btn.visible { display: flex; align-items: center; gap: 0.2rem; }
+@keyframes fadeInItem { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
+.has-activity-sidebar { padding-left: 240px; transition: padding-left 0.3s cubic-bezier(0.4,0,0.2,1); }
+.has-activity-sidebar.sidebar-closed { padding-left: 0; }
+@media (max-width:900px) {
+    .activity-sidebar { display: none; } .activity-toggle-btn { display: none !important; } .has-activity-sidebar { padding-left: 0; }
 }
 </style>
 
 <div class="activity-sidebar" id="activitySidebar">
     <div class="activity-sidebar-header">
-        <h3><span class="live-dot"></span> Лента</h3>
-        <span style="font-size:0.7rem;color:var(--text-secondary);display:flex;align-items:center;gap:0.25rem;">
+        <span class="flex gap-1 items-center" style="font-size:0.75rem;font-weight:600;font-family:var(--font-display);">
+            <span style="width:5px;height:5px;border-radius:50%;background:#22c55e;display:inline-block;animation:pulse 1.5s ease infinite;"></span>
+            Лента
+        </span>
+        <span class="flex gap-1 items-center text-xs text-dim">
             <span id="onlineCount">0</span> 👤
         </span>
-        <button class="activity-sidebar-close" onclick="toggleActivitySidebar()" title="Скрыть">✕</button>
+        <button class="activity-sidebar-close" onclick="toggleActivitySidebar()" style="background:none;border:none;color:var(--text-dim);cursor:pointer;font-size:0.85rem;padding:0.1rem;line-height:1;">✕</button>
     </div>
     <div class="activity-sidebar-list" id="activitySidebarList">
-        <div style="text-align:center;padding:2rem;color:var(--text-secondary);font-size:0.85rem;">Загрузка...</div>
+        <div style="text-align:center;padding:2rem;color:var(--text-dim);font-size:0.78rem;">Загрузка...</div>
     </div>
 </div>
 
-<button class="activity-toggle-btn" id="activityToggleBtn" onclick="toggleActivitySidebar()" title="Показать ленту">
-    📰 Лента
-</button>
+<button class="activity-toggle-btn" id="activityToggleBtn" onclick="toggleActivitySidebar()" title="Показать ленту">📰 Лента</button>
 
 <script>
 document.addEventListener('DOMContentLoaded', async () => {
     const list = document.getElementById('activitySidebarList');
     const sidebar = document.getElementById('activitySidebar');
     document.body.classList.add('has-activity-sidebar');
-
-    // Восстанавливаем состояние из localStorage
     if (localStorage.getItem('sidebar_closed') === 'true') {
         sidebar.classList.add('closed');
         document.body.classList.add('sidebar-closed');
         document.getElementById('activityToggleBtn').classList.add('visible');
     }
-
     WS.on('online_count', (data) => {
         document.getElementById('onlineCount').textContent = data.online || 0;
     });
-
     try {
         const res = await fetch('/web/api/activity?limit=10');
         const data = await res.json();
-        if (data.success && data.activities) {
-            renderActivities(data.activities);
-        }
+        if (data.success && data.activities) renderActivities(data.activities);
     } catch (e) {
-        if (list) list.innerHTML = '<div style="text-align:center;padding:2rem;color:var(--text-secondary);">Не удалось загрузить</div>';
+        if (list) list.innerHTML = '<div style="text-align:center;padding:2rem;color:var(--text-dim);font-size:0.78rem;">Не удалось загрузить</div>';
     }
-
     WS.on('activity', (data) => {
         const act = data.activity;
         if (!act || !list) return;
@@ -206,9 +89,7 @@ document.addEventListener('DOMContentLoaded', async () => {
         const item = createActivityItem(act);
         list.insertBefore(item, list.firstChild);
         if (act.activity_type === 'achievement') SoundManager.achievement();
-        while (list.children.length > 15) {
-            list.removeChild(list.lastChild);
-        }
+        while (list.children.length > 15) list.removeChild(list.lastChild);
     });
 });
 
@@ -217,58 +98,28 @@ const RARITY_COLORS = {
     'mil-spec': '#4b69ff', 'mil-spec-grade': '#4b69ff',
     'restricted': '#8847ff', 'classified': '#d32ce6',
     'covert': '#eb4b4b', 'rare-special-item': '#ffd700',
-    'rare-special': '#ffd700', 'extraordinary': '#ffd700',
-    'contraband': '#ffaa00'
+    'rare-special': '#ffd700', 'extraordinary': '#ffd700', 'contraband': '#ffaa00'
 };
 
 function createActivityItem(act) {
-    const iconMap = {
-        'case_open': '📦', 'contract': '🔄', 'upgrade': '🆙',
-        'achievement': '🏆', 'crash': '💥'
-    };
+    const iconMap = { 'case_open': '📦', 'contract': '🔄', 'upgrade': '🆙', 'achievement': '🏆', 'crash': '💥' };
     const item = document.createElement('div');
     item.className = 'activity-sidebar-item';
-    item.style.cursor = 'pointer';
-
     const raritySlug = (act.data && act.data.rarity || '').toLowerCase().replace(/ /g, '-').replace(/_/g, '-').replace(/™/g, '');
     const rarityColor = RARITY_COLORS[raritySlug] || '';
-    if (rarityColor) {
-        item.style.background = `rgba(${hexToRgb(rarityColor)}, 0.08)`;
-    }
-
+    if (rarityColor) { const v = parseInt(rarityColor.replace('#',''),16); item.style.background = `rgba(${(v>>16)},${(v>>8)&255},${v&255},0.08)`; }
     item.addEventListener('click', () => window.location.href = `/profiles/${act.user_id}`);
-
     const icon = iconMap[act.activity_type] || '📌';
-    const imgHtml = (act.data && act.data.item_image)
-        ? `<img class="asi-item-preview" src="${act.data.item_image}" onerror="this.style.display='none'">`
-        : '';
-    const timeStr = act.created_at
-        ? new Date(act.created_at).toLocaleTimeString('ru-RU', {hour:'2-digit',minute:'2-digit'})
-        : '';
-    item.innerHTML = `
-        <div class="asi-icon">${icon}</div>
-        <div class="asi-content">
-            <span class="asi-username">${escapeHtml(act.username)}</span>
-            <span>${escapeHtml(act.message)}</span>
-            <div class="asi-time">${timeStr}</div>
-        </div>
-        ${imgHtml}
-    `;
+    const imgHtml = (act.data && act.data.item_image) ? `<img class="asi-item-preview" src="${act.data.item_image}" onerror="this.style.display='none'">` : '';
+    const timeStr = act.created_at ? new Date(act.created_at).toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'}) : '';
+    item.innerHTML = `<div class="asi-icon">${icon}</div><div class="asi-content"><span class="asi-username">${escapeHtml(act.username)}</span> ${escapeHtml(act.message)}<div class="asi-time">${timeStr}</div></div>${imgHtml}`;
     return item;
 }
 
-function hexToRgb(hex) {
-    const v = parseInt(hex.replace('#', ''), 16);
-    return (v >> 16) + ',' + ((v >> 8) & 255) + ',' + (v & 255);
-}
-
 function renderActivities(activities) {
     const list = document.getElementById('activitySidebarList');
     if (!list) return;
-    if (!activities || activities.length === 0) {
-        list.innerHTML = '<div style="text-align:center;padding:2rem;color:var(--text-secondary);font-size:0.85rem;">Пока нет активностей</div>';
-        return;
-    }
+    if (!activities || activities.length === 0) { list.innerHTML = '<div style="text-align:center;padding:2rem;color:var(--text-dim);font-size:0.78rem;">Пока нет активностей</div>'; return; }
     list.innerHTML = '';
     activities.forEach(a => list.appendChild(createActivityItem(a)));
 }
@@ -283,10 +134,4 @@ function toggleActivitySidebar() {
     btn.classList.toggle('visible', isOpen);
     localStorage.setItem('sidebar_closed', isOpen ? 'true' : 'false');
 }
-
-function escapeHtml(text) {
-    const d = document.createElement('div');
-    d.textContent = text || '';
-    return d.innerHTML;
-}
 </script>
diff --git a/templates/achievements.html b/templates/achievements.html
index ba1e16a..67fb198 100644
--- a/templates/achievements.html
+++ b/templates/achievements.html
@@ -3,320 +3,107 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Достижения - CS2 Simulator</title>
+    <title>Достижения — CS2 Simulator</title>
     <link rel="stylesheet" href="/static/css/style.css">
-    <style>
-        .achievements-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 2rem;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-        .achievements-stats {
-            display: flex;
-            gap: 1.5rem;
-        }
-        .achievements-stats .stat {
-            text-align: center;
-        }
-        .achievements-stats .stat-value {
-            font-size: 1.5rem;
-            font-weight: 700;
-            color: var(--primary-color);
-        }
-        .achievements-stats .stat-label {
-            font-size: 0.8rem;
-            color: var(--text-secondary);
-        }
-        .achievements-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-            gap: 1rem;
-        }
-        .achievement-card {
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            padding: 1rem;
-            display: flex;
-            gap: 1rem;
-            align-items: flex-start;
-            transition: all 0.3s;
-            position: relative;
-            overflow: hidden;
-        }
-        .achievement-card.unlocked {
-            border-color: var(--success-color);
-            background: linear-gradient(135deg, rgba(34, 197, 94, 0.05), transparent);
-        }
-        .achievement-card.unlocked::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            right: -50%;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(circle, rgba(34, 197, 94, 0.08), transparent 70%);
-            pointer-events: none;
-        }
-        .achievement-card.locked {
-            opacity: 0.7;
-        }
-        .achievement-icon {
-            font-size: 2rem;
-            width: 48px;
-            height: 48px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: var(--bg-dark);
-            border-radius: 10px;
-            flex-shrink: 0;
-        }
-        .achievement-card.unlocked .achievement-icon {
-            background: rgba(34, 197, 94, 0.15);
-        }
-        .achievement-info {
-            flex: 1;
-            min-width: 0;
-        }
-        .achievement-title {
-            font-weight: 600;
-            margin-bottom: 0.25rem;
-        }
-        .achievement-desc {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            margin-bottom: 0.5rem;
-        }
-        .achievement-reward {
-            font-size: 0.8rem;
-            color: var(--success-color);
-        }
-        .achievement-progress {
-            margin-top: 0.5rem;
-        }
-        .progress-bar {
-            height: 6px;
-            background: var(--bg-dark);
-            border-radius: 3px;
-            overflow: hidden;
-        }
-        .progress-fill {
-            height: 100%;
-            background: var(--primary-color);
-            border-radius: 3px;
-            transition: width 0.5s ease;
-        }
-        .progress-fill.complete {
-            background: var(--success-color);
-        }
-        .progress-text {
-            font-size: 0.75rem;
-            color: var(--text-secondary);
-            margin-top: 0.25rem;
-        }
-        .category-filter {
-            display: flex;
-            gap: 0.5rem;
-            flex-wrap: wrap;
-            margin-bottom: 1.5rem;
-        }
-        .category-btn {
-            padding: 0.4rem 1rem;
-            border: 1px solid var(--border-color);
-            background: transparent;
-            color: var(--text-color);
-            border-radius: 20px;
-            cursor: pointer;
-            font-size: 0.85rem;
-            transition: all 0.2s;
-        }
-        .category-btn:hover {
-            border-color: var(--primary-color);
-        }
-        .category-btn.active {
-            background: var(--primary-color);
-            border-color: var(--primary-color);
-            color: white;
-        }
-        .new-achievement-popup {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            background: linear-gradient(135deg, #1a3a1a, #0d260d);
-            border: 1px solid var(--success-color);
-            border-radius: 12px;
-            padding: 1rem 1.5rem;
-            z-index: 9999;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.5);
-            animation: slideInRight 0.5s ease;
-            max-width: 350px;
-        }
-        .new-achievement-popup.hiding {
-            animation: slideOutRight 0.5s ease forwards;
-        }
-        @keyframes slideInRight {
-            from { transform: translateX(120%); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
-        }
-        @keyframes slideOutRight {
-            from { transform: translateX(0); opacity: 1; }
-            to { transform: translateX(120%); opacity: 0; }
-        }
-        .new-achievement-popup .popup-title {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            margin-bottom: 0.25rem;
-        }
-        .new-achievement-popup .popup-achievement {
-            font-size: 1.1rem;
-            font-weight: 600;
-        }
-        .new-achievement-popup .popup-reward {
-            color: var(--success-color);
-            font-size: 0.9rem;
-            margin-top: 0.25rem;
-        }
-    </style>
 </head>
 <body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/crash" class="nav-link">💥 Crash</a>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/crash" class="nav-link">Crash</a>
                 <a href="/inventory" class="nav-link">Инвентарь</a>
-                <a href="/achievements" class="nav-link active">🏆 Достижения</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
+                <a href="/achievements" class="nav-link active">Достижения</a>
+                <a href="/activity" class="nav-link">Лента</a>
                 <a href="/profile" class="nav-link">Профиль</a>
                 <span class="user-balance">{{ "%.0f"|format(user.balance) }} ₽</span>
-                <button onclick="toggleSound()" class="btn btn-outline" id="soundToggle" title="Звук">🔊</button>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
-                <button onclick="logout()" class="btn btn-outline">Выйти</button>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <button onclick="logout()" class="btn btn-ghost">Выйти</button>
             </div>
         </div>
     </nav>
 
-    <main class="container" style="padding: 2rem 1rem;">
-        <div class="achievements-header">
-            <div>
-                <h1>🏆 Достижения</h1>
-                <p class="page-subtitle">Выполняй задания и получай награды</p>
-            </div>
-            <div class="achievements-stats">
-                <div class="stat">
-                    <div class="stat-value">{{ unlocked }}</div>
-                    <div class="stat-label">Открыто</div>
+    <main class="section">
+        <div class="container">
+            <div class="section-header">
+                <div>
+                    <h1 class="section-title">🏆 Достижения</h1>
+                    <p class="section-subtitle">Выполняй задания и получай награды</p>
                 </div>
-                <div class="stat">
-                    <div class="stat-value">{{ total }}</div>
-                    <div class="stat-label">Всего</div>
-                </div>
-                <div class="stat">
-                    <div class="stat-value">{{ "%.0f"|format(unlocked/total*100 if total > 0 else 0) }}%</div>
-                    <div class="stat-label">Прогресс</div>
-                </div>
-            </div>
-        </div>
-
-        <div class="category-filter" id="categoryFilter">
-            <button class="category-btn active" data-cat="all">Все</button>
-            <button class="category-btn" data-cat="cases">📦 Кейсы</button>
-            <button class="category-btn" data-cat="contracts">🔄 Контракты</button>
-            <button class="category-btn" data-cat="upgrade">🆙 Апгрейд</button>
-            <button class="category-btn" data-cat="crash">💥 Crash</button>
-            <button class="category-btn" data-cat="general">🎯 Общие</button>
-        </div>
-
-        <div class="achievements-grid" id="achievementsGrid">
-            {% for ach in achievements %}
-            <div class="achievement-card {{ 'unlocked' if ach.unlocked else 'locked' }}" 
-                 data-category="{{ ach.category }}">
-                <div class="achievement-icon">{{ ach.icon }}</div>
-                <div class="achievement-info">
-                    <div class="achievement-title">{{ ach.title }}</div>
-                    <div class="achievement-desc">{{ ach.description }}</div>
-                    {% if ach.reward_amount > 0 %}
-                    <div class="achievement-reward">+{{ "%.0f"|format(ach.reward_amount) }} ₽</div>
-                    {% endif %}
-                    <div class="achievement-progress">
-                        <div class="progress-bar">
-                            <div class="progress-fill {{ 'complete' if ach.unlocked else '' }}" 
-                                 style="width: {{ (ach.progress / ach.requirement_value * 100)|round }}%"></div>
-                        </div>
-                        <div class="progress-text">
-                            {% if ach.unlocked %}
-                            ✅ Получено
-                            {% else %}
-                            {{ ach.progress }} / {{ ach.requirement_value }}
-                            {% endif %}
-                        </div>
+                <div class="flex gap-3">
+                    <div class="stat-card" style="padding:0.5rem 1rem;">
+                        <div class="stat-value" style="font-size:1.1rem;">{{ unlocked }}/{{ total }}</div>
+                        <div class="stat-label text-xs">Открыто</div>
+                    </div>
+                    <div class="stat-card" style="padding:0.5rem 1rem;">
+                        <div class="stat-value" style="font-size:1.1rem;">{{ "%.0f"|format(unlocked/total*100 if total > 0 else 0) }}%</div>
+                        <div class="stat-label text-xs">Прогресс</div>
                     </div>
                 </div>
             </div>
-            {% endfor %}
+
+            <div class="section-tabs" id="categoryFilter">
+                <button class="section-tab active" data-cat="all">Все</button>
+                <button class="section-tab" data-cat="cases">📦 Кейсы</button>
+                <button class="section-tab" data-cat="contracts">🔄 Контракты</button>
+                <button class="section-tab" data-cat="upgrade">🆙 Апгрейд</button>
+                <button class="section-tab" data-cat="crash">💥 Crash</button>
+                <button class="section-tab" data-cat="general">🎯 Общие</button>
+            </div>
+
+            <div class="grid grid-auto" id="achievementsGrid">
+                {% for ach in achievements %}
+                <div class="card {{ 'card-glow' if ach.unlocked else '' }}" 
+                     data-category="{{ ach.category }}" style="display:flex;gap:0.75rem;align-items:flex-start;">
+                    <div style="font-size:1.8rem;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--bg-dark);border-radius:var(--radius-sm);{{ 'background:rgba(34,197,94,0.12);' if ach.unlocked }}">
+                        {{ ach.icon }}
+                    </div>
+                    <div style="flex:1;min-width:0;">
+                        <div class="display-font" style="font-size:0.85rem;margin-bottom:0.15rem;">{{ ach.title }}</div>
+                        <div class="text-dim text-sm" style="margin-bottom:0.35rem;">{{ ach.description }}</div>
+                        {% if ach.reward_amount > 0 %}
+                        <div class="badge badge-green" style="margin-bottom:0.5rem;">+{{ "%.0f"|format(ach.reward_amount) }} ₽</div>
+                        {% endif %}
+                        <div>
+                            <div style="height:5px;background:var(--bg-dark);border-radius:3px;overflow:hidden;">
+                                <div style="height:100%;width:{{ (ach.progress / ach.requirement_value * 100)|round }}%;background:{{ 'var(--success)' if ach.unlocked else 'var(--primary)' }};border-radius:3px;transition:width 0.5s ease;"></div>
+                            </div>
+                            <div class="text-xs text-dim" style="margin-top:0.15rem;">
+                                {% if ach.unlocked %}✅ Получено{% else %}{{ ach.progress }} / {{ ach.requirement_value }}{% endif %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
         </div>
     </main>
 
-    <div id="achievementPopup" class="new-achievement-popup" style="display:none;">
-        <div class="popup-title">🏆 Новое достижение!</div>
-        <div class="popup-achievement" id="popupTitle"></div>
-        <div class="popup-reward" id="popupReward"></div>
-    </div>
-
     <script src="/static/js/sounds.js"></script>
     <script src="/static/js/websocket.js"></script>
     <script src="/static/js/safemode.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // Категории
-            document.querySelectorAll('.category-btn').forEach(btn => {
+            document.querySelectorAll('#categoryFilter .section-tab').forEach(btn => {
                 btn.addEventListener('click', () => {
-                    document.querySelectorAll('.category-btn').forEach(b => b.classList.remove('active'));
+                    document.querySelectorAll('#categoryFilter .section-tab').forEach(b => b.classList.remove('active'));
                     btn.classList.add('active');
                     const cat = btn.dataset.cat;
-                    document.querySelectorAll('.achievement-card').forEach(card => {
+                    document.querySelectorAll('.achievement-card, .card[data-category]').forEach(card => {
                         card.style.display = (cat === 'all' || card.dataset.category === cat) ? 'flex' : 'none';
                     });
                 });
             });
         });
 
-        function showAchievementPopup(title, reward) {
-            const popup = document.getElementById('achievementPopup');
-            document.getElementById('popupTitle').textContent = title;
-            document.getElementById('popupReward').textContent = reward ? `+${reward} ₽` : '';
-            popup.style.display = 'block';
-            SoundManager.achievement();
-            setTimeout(() => {
-                popup.classList.add('hiding');
-                setTimeout(() => {
-                    popup.style.display = 'none';
-                    popup.classList.remove('hiding');
-                }, 500);
-            }, 4000);
-        }
-
-        async function logout() {
-            await fetch('/web/api/auth/logout', { method: 'POST' });
-            window.location.href = '/';
-        }
-    </script>
-    <script>
         function toggleSound() {
             const enabled = SoundManager.toggle();
             document.getElementById('soundToggle').textContent = enabled ? '🔊' : '🔇';
         }
-        document.addEventListener('DOMContentLoaded', () => {
-            const btn = document.getElementById('soundToggle');
-            if (btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇';
-        });
     </script>
 {% include '_activity_sidebar.html' %}
 </body>
diff --git a/templates/activity.html b/templates/activity.html
index ae15909..4b66039 100644
--- a/templates/activity.html
+++ b/templates/activity.html
@@ -3,123 +3,33 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Лента активностей - CS2 Simulator</title>
+    <title>Лента активностей — CS2 Simulator</title>
     <link rel="stylesheet" href="/static/css/style.css">
-    <style>
-        .activity-feed {
-            max-width: 700px;
-            margin: 0 auto;
-        }
-        .activity-item {
-            display: flex;
-            gap: 1rem;
-            padding: 0.75rem 1rem;
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: 10px;
-            margin-bottom: 0.5rem;
-            align-items: flex-start;
-            transition: all 0.3s;
-            animation: fadeInUp 0.3s ease;
-        }
-        .activity-item:hover {
-            border-color: var(--primary-color);
-        }
-        .activity-icon {
-            font-size: 1.2rem;
-            width: 36px;
-            height: 36px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background: var(--bg-dark);
-            border-radius: 8px;
-            flex-shrink: 0;
-        }
-        .activity-content {
-            flex: 1;
-            min-width: 0;
-        }
-        .activity-message {
-            font-size: 0.9rem;
-            line-height: 1.4;
-        }
-        .activity-meta {
-            font-size: 0.75rem;
-            color: var(--text-secondary);
-            margin-top: 0.25rem;
-        }
-        .activity-username {
-            color: var(--primary-color);
-            font-weight: 500;
-        }
-        .activity-empty {
-            text-align: center;
-            padding: 3rem;
-            color: var(--text-secondary);
-        }
-        .activity-empty .big-icon {
-            font-size: 3rem;
-            margin-bottom: 1rem;
-        }
-        .activity-type-icon {
-            display: inline-block;
-            margin-right: 0.3rem;
-        }
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        .activity-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 1.5rem;
-        }
-        .live-indicator {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-size: 0.85rem;
-            color: var(--success-color);
-        }
-        .live-dot {
-            width: 8px;
-            height: 8px;
-            background: var(--success-color);
-            border-radius: 50%;
-            animation: pulse 1.5s ease infinite;
-        }
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.3; }
-        }
-    </style>
 </head>
 <body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
                 {% if user %}
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/crash" class="nav-link">💥 Crash</a>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/crash" class="nav-link">Crash</a>
                 <a href="/inventory" class="nav-link">Инвентарь</a>
-                <a href="/activity" class="nav-link active">📰 Лента</a>
-                <a href="/achievements" class="nav-link">🏆 Достижения</a>
+                <a href="/activity" class="nav-link active">Лента</a>
+                <a href="/achievements" class="nav-link">Достижения</a>
                 <a href="/profile" class="nav-link">Профиль</a>
                 <span class="user-balance">{{ "%.0f"|format(user.balance) }} ₽</span>
-                <button onclick="toggleSound()" class="btn btn-outline" id="soundToggle" title="Звук">🔊</button>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
-                <button onclick="logout()" class="btn btn-outline">Выйти</button>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <button onclick="logout()" class="btn btn-ghost">Выйти</button>
                 {% else %}
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/activity" class="nav-link active">📰 Лента</a>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/activity" class="nav-link active">Лента</a>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
                 <a href="/login" class="btn btn-outline">Войти</a>
                 <a href="/register" class="btn btn-primary">Регистрация</a>
                 {% endif %}
@@ -127,46 +37,48 @@
         </div>
     </nav>
 
-    <main class="container" style="padding: 2rem 1rem;">
-        <div class="activity-header">
-            <div>
-                <h1>📰 Лента активностей</h1>
-                <p class="page-subtitle">Что происходит на сервере</p>
-            </div>
-            <div class="live-indicator" id="liveIndicator">
-                <span class="live-dot"></span>
-                <span>Live</span>
-            </div>
-        </div>
-
-        <div class="activity-feed" id="activityFeed">
-            {% if activities %}
-            {% for a in activities %}
-            <div class="activity-item" data-activity-id="{{ a.id }}">
-                <div class="activity-icon">
-                    {% if a.activity_type == 'case_open' %}📦
-                    {% elif a.activity_type == 'contract' %}🔄
-                    {% elif a.activity_type == 'upgrade' %}🆙
-                    {% elif a.activity_type == 'achievement' %}🏆
-                    {% elif a.activity_type == 'crash' %}💥
-                    {% else %}📌{% endif %}
+    <main class="section">
+        <div class="container" style="max-width:700px;">
+            <div class="section-header">
+                <div>
+                    <h1 class="section-title">📰 Лента активностей</h1>
+                    <p class="section-subtitle">Что происходит на сервере</p>
                 </div>
-                <div class="activity-content">
-                    <div class="activity-message">{{ a.message }}</div>
-                    <div class="activity-meta">
-                        <a href="/profiles/{{ a.user_id }}" class="activity-username" style="text-decoration:none;">{{ a.username }}</a>
-                        <span>• {{ a.created_at }}</span>
+                <div class="flex gap-2 items-center" style="color:var(--success);font-size:0.85rem;">
+                    <span style="width:8px;height:8px;border-radius:50%;background:var(--success);animation:pulse 1.5s ease infinite;"></span>
+                    Live
+                </div>
+            </div>
+
+            <div style="display:flex;flex-direction:column;gap:0.5rem;" id="activityFeed">
+                {% if activities %}
+                {% for a in activities %}
+                <div class="card" style="display:flex;gap:0.75rem;align-items:flex-start;animation:slideInUp 0.3s ease;" data-activity-id="{{ a.id }}">
+                    <div style="font-size:1.1rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-dark);border-radius:var(--radius-sm);flex-shrink:0;">
+                        {% if a.activity_type == 'case_open' %}📦
+                        {% elif a.activity_type == 'contract' %}🔄
+                        {% elif a.activity_type == 'upgrade' %}🆙
+                        {% elif a.activity_type == 'achievement' %}🏆
+                        {% elif a.activity_type == 'crash' %}💥
+                        {% else %}📌{% endif %}
+                    </div>
+                    <div style="flex:1;min-width:0;">
+                        <div class="text-sm">{{ a.message }}</div>
+                        <div class="text-xs text-dim" style="margin-top:0.2rem;">
+                            <a href="/profiles/{{ a.user_id }}" style="color:var(--primary);text-decoration:none;">{{ a.username }}</a>
+                            <span>• {{ a.created_at }}</span>
+                        </div>
                     </div>
                 </div>
+                {% endfor %}
+                {% else %}
+                <div style="text-align:center;padding:3rem 1rem;color:var(--text-dim);">
+                    <div style="font-size:2.5rem;margin-bottom:0.75rem;opacity:0.5;">📭</div>
+                    <h3 style="font-family:var(--font-display);font-size:1.1rem;color:var(--text);">Пока нет активностей</h3>
+                    <p style="font-size:0.9rem;">Открой кейс или выполни контракт — это появится здесь в реальном времени!</p>
+                </div>
+                {% endif %}
             </div>
-            {% endfor %}
-            {% else %}
-            <div class="activity-empty">
-                <div class="big-icon">📭</div>
-                <h3>Пока нет активностей</h3>
-                <p>Открой кейс или выполни контракт — это появится здесь в реальном времени!</p>
-            </div>
-            {% endif %}
         </div>
     </main>
 
@@ -175,71 +87,37 @@
     <script src="/static/js/safemode.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
-            // Подключаемся к WS и слушаем новые активности
             WS.on('activity', (data) => {
                 const act = data.activity;
                 if (!act) return;
-                
                 const feed = document.getElementById('activityFeed');
-                
-                // Убираем empty state если есть
-                const empty = feed.querySelector('.activity-empty');
+                const empty = feed.querySelector('div[style*="text-align:center"]');
                 if (empty) empty.remove();
-                
-                const iconMap = {
-                    'case_open': '📦',
-                    'contract': '🔄',
-                    'upgrade': '🆙',
-                    'achievement': '🏆',
-                    'crash': '💥'
-                };
-                
+                const iconMap = { 'case_open': '📦', 'contract': '🔄', 'upgrade': '🆙', 'achievement': '🏆', 'crash': '💥' };
                 const item = document.createElement('div');
-                item.className = 'activity-item';
-                item.style.animation = 'none';
-                item.offsetHeight;
-                item.style.animation = 'fadeInUp 0.3s ease';
+                item.className = 'card';
+                item.style.cssText = 'display:flex;gap:0.75rem;align-items:flex-start;animation:slideInUp 0.3s ease;';
                 item.innerHTML = `
-                    <div class="activity-icon">${iconMap[act.activity_type] || '📌'}</div>
-                    <div class="activity-content">
-                        <div class="activity-message">${act.message}</div>
-                        <div class="activity-meta">
-                            <a href="/profiles/${act.user_id || 0}" class="activity-username" style="text-decoration:none;">${escapeHtml(act.username)}</a>
+                    <div style="font-size:1.1rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-dark);border-radius:var(--radius-sm);flex-shrink:0;">${iconMap[act.activity_type] || '📌'}</div>
+                    <div style="flex:1;min-width:0;">
+                        <div class="text-sm">${escapeHtml(act.message)}</div>
+                        <div class="text-xs text-dim" style="margin-top:0.2rem;">
+                            <a href="/profiles/${act.user_id || 0}" style="color:var(--primary);text-decoration:none;">${escapeHtml(act.username)}</a>
                             <span>• только что</span>
                         </div>
                     </div>
                 `;
-                
                 feed.insertBefore(item, feed.firstChild);
-                
-                // Ограничиваем до 100 элементов
-                while (feed.children.length > 100) {
-                    feed.removeChild(feed.lastChild);
-                }
-
-                // Звук для новых активностей
-                if (act.activity_type === 'achievement') {
-                    SoundManager.achievement();
-                } else if (act.activity_type === 'crash') {
-                    SoundManager.crashCashout();
-                }
+                while (feed.children.length > 100) feed.removeChild(feed.lastChild);
+                if (act.activity_type === 'achievement') SoundManager.achievement();
             });
         });
 
-        async function logout() {
-            await fetch('/web/api/auth/logout', { method: 'POST' });
-            window.location.href = '/';
-        }
-    </script>
-    <script>
         function toggleSound() {
             const enabled = SoundManager.toggle();
             document.getElementById('soundToggle').textContent = enabled ? '🔊' : '🔇';
         }
-        document.addEventListener('DOMContentLoaded', () => {
-            const btn = document.getElementById('soundToggle');
-            if (btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇';
-        });
     </script>
+{% include '_activity_sidebar.html' %}
 </body>
 </html>
diff --git a/templates/admin/base.html b/templates/admin/base.html
index 56e09fc..8f34359 100644
--- a/templates/admin/base.html
+++ b/templates/admin/base.html
@@ -6,353 +6,93 @@
     <title>{% block title %}Админ-панель{% endblock %} — CS2 Simulator</title>
     <link rel="stylesheet" href="/static/css/style.css">
     <style>
-        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-        html { font-size: 15px; }
-        body {
-            background: #0b0c10;
-            color: #e8e8e8;
-            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-            min-height: 100vh;
-            display: flex;
-        }
-
-        /* ─── Sidebar ─── */
-        .admin-sidebar {
-            width: 240px;
-            min-height: 100vh;
-            background: linear-gradient(180deg, #111216 0%, #0d0e12 100%);
-            border-right: 1px solid rgba(255,255,255,0.04);
-            display: flex;
-            flex-direction: column;
-            position: sticky; top: 0; height: 100vh;
-            flex-shrink: 0;
-        }
-        .admin-sidebar .sb-brand {
-            padding: 1.25rem 1.25rem 0.75rem;
-            font-size: 1rem;
-            font-weight: 700;
-            letter-spacing: 0.02em;
-            display: flex; align-items: center; gap: 0.5rem;
-            border-bottom: 1px solid rgba(255,255,255,0.04);
-        }
-        .admin-sidebar .sb-brand span { color: #f59e0b; }
-        .admin-sidebar .sb-nav {
-            flex: 1; padding: 0.75rem 0;
-            display: flex; flex-direction: column; gap: 0.15rem;
-        }
-        .admin-sidebar .sb-nav a {
-            display: flex; align-items: center; gap: 0.65rem;
-            padding: 0.65rem 1.25rem;
-            font-size: 0.85rem;
-            color: rgba(255,255,255,0.55);
-            text-decoration: none;
-            transition: all 0.15s;
-            border-left: 2px solid transparent;
-            font-weight: 450;
-        }
-        .admin-sidebar .sb-nav a:hover {
-            color: rgba(255,255,255,0.85);
-            background: rgba(255,255,255,0.03);
-        }
-        .admin-sidebar .sb-nav a.active {
-            color: #f59e0b;
-            background: rgba(245,158,11,0.06);
-            border-left-color: #f59e0b;
-        }
-        .admin-sidebar .sb-nav a .sb-icon { font-size: 1rem; width: 20px; text-align: center; }
-        .admin-sidebar .sb-footer {
-            padding: 0.75rem 1.25rem;
-            border-top: 1px solid rgba(255,255,255,0.04);
-            font-size: 0.75rem;
-            color: rgba(255,255,255,0.3);
-        }
-        .admin-sidebar .sb-footer a {
-            color: rgba(255,255,255,0.5);
-            text-decoration: none;
-            display: flex; align-items: center; gap: 0.4rem;
-        }
-        .admin-sidebar .sb-footer a:hover { color: #f59e0b; }
-
-        /* ─── Main area ─── */
-        .admin-main {
-            flex: 1;
-            min-width: 0;
-            display: flex;
-            flex-direction: column;
-        }
-        .admin-topbar {
-            display: flex; align-items: center; justify-content: space-between;
-            padding: 0.85rem 1.5rem;
-            background: rgba(17,18,22,0.8);
-            backdrop-filter: blur(8px);
-            border-bottom: 1px solid rgba(255,255,255,0.04);
-            position: sticky; top: 0; z-index: 10;
-        }
-        .admin-topbar .at-title {
-            font-size: 1rem; font-weight: 600;
-            display: flex; align-items: center; gap: 0.5rem;
-        }
-        .admin-topbar .at-title .at-sub {
-            font-size: 0.75rem; color: rgba(255,255,255,0.35);
-            font-weight: 400;
-        }
-        .admin-topbar .at-actions { display: flex; align-items: center; gap: 0.75rem; }
-        .admin-topbar .at-actions .at-back {
-            color: rgba(255,255,255,0.5); text-decoration: none;
-            font-size: 0.8rem; display: flex; align-items: center; gap: 0.3rem;
-            transition: color 0.15s;
-        }
-        .admin-topbar .at-actions .at-back:hover { color: #f59e0b; }
-        .admin-topbar .at-actions .at-user {
-            color: rgba(255,255,255,0.5); font-size: 0.8rem;
-            display: flex; align-items: center; gap: 0.3rem;
-        }
-
-        .admin-content {
-            flex: 1;
-            padding: 1.5rem;
-            overflow-y: auto;
-        }
-
-        /* ─── Cards ─── */
-        .a-card {
-            background: rgba(17,18,22,0.6);
-            border: 1px solid rgba(255,255,255,0.05);
-            border-radius: 12px;
-            padding: 1.25rem;
-            margin-bottom: 1.25rem;
-        }
-        .a-card-header {
-            display: flex; align-items: center; justify-content: space-between;
-            margin-bottom: 1rem;
-            font-size: 0.85rem; font-weight: 600;
-            color: rgba(255,255,255,0.7);
-        }
-
-        /* ─── Stats grid ─── */
-        .a-stats {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
-            gap: 1rem;
-            margin-bottom: 1.5rem;
-        }
-        .a-stat {
-            background: rgba(17,18,22,0.6);
-            border: 1px solid rgba(255,255,255,0.05);
-            border-radius: 12px;
-            padding: 1.25rem;
-            display: flex; flex-direction: column; gap: 0.25rem;
-            position: relative; overflow: hidden;
-        }
-        .a-stat .as-label {
-            font-size: 0.7rem; text-transform: uppercase;
-            letter-spacing: 0.06em;
-            color: rgba(255,255,255,0.35);
-        }
-        .a-stat .as-value {
-            font-size: 1.8rem; font-weight: 700;
-            line-height: 1.1;
-        }
-        .a-stat .as-bar {
-            position: absolute; bottom: 0; left: 0; height: 2px;
-            border-radius: 0 2px 0 0;
-            transition: width 0.6s ease;
-        }
-        .a-stat .as-sub {
-            font-size: 0.75rem; color: rgba(255,255,255,0.35);
-        }
-
-        /* ─── Tables ─── */
-        .a-table-wrap {
-            overflow-x: auto;
-            border: 1px solid rgba(255,255,255,0.05);
-            border-radius: 10px;
-        }
-        .a-table {
-            width: 100%;
-            border-collapse: collapse;
-            font-size: 0.82rem;
-        }
-        .a-table th {
-            text-align: left;
-            padding: 0.7rem 0.9rem;
-            font-weight: 600;
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            color: rgba(255,255,255,0.35);
-            background: rgba(0,0,0,0.2);
-            border-bottom: 1px solid rgba(255,255,255,0.04);
-        }
-        .a-table td {
-            padding: 0.65rem 0.9rem;
-            border-bottom: 1px solid rgba(255,255,255,0.03);
-            vertical-align: middle;
-        }
-        .a-table tr:last-child td { border-bottom: none; }
-        .a-table tr:hover td { background: rgba(255,255,255,0.02); }
-        .a-table .td-actions {
-            display: flex; gap: 0.35rem;
-            flex-wrap: wrap;
-        }
-
-        /* ─── Buttons ─── */
-        .a-btn {
-            display: inline-flex; align-items: center; gap: 0.35rem;
-            padding: 0.45rem 0.9rem;
-            border: 1px solid rgba(255,255,255,0.08);
-            border-radius: 7px;
-            font-size: 0.78rem;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.15s;
-            background: rgba(255,255,255,0.04);
-            color: rgba(255,255,255,0.7);
-            text-decoration: none;
-            line-height: 1.3;
-            white-space: nowrap;
-        }
-        .a-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #fff; }
-        .a-btn-primary {
-            background: rgba(245,158,11,0.12);
-            border-color: rgba(245,158,11,0.2);
-            color: #f59e0b;
-        }
-        .a-btn-primary:hover { background: rgba(245,158,11,0.2); border-color: #f59e0b; }
-        .a-btn-danger {
-            background: rgba(239,68,68,0.1);
-            border-color: rgba(239,68,68,0.15);
-            color: #ef4444;
-        }
-        .a-btn-danger:hover { background: rgba(239,68,68,0.2); border-color: #ef4444; }
-        .a-btn-success {
-            background: rgba(34,197,94,0.1);
-            border-color: rgba(34,197,94,0.15);
-            color: #22c55e;
-        }
-        .a-btn-success:hover { background: rgba(34,197,94,0.2); border-color: #22c55e; }
-        .a-btn-sm { padding: 0.3rem 0.55rem; font-size: 0.7rem; }
-        .a-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-
-        /* ─── Form inputs ─── */
-        .a-input {
-            background: rgba(0,0,0,0.3);
-            border: 1px solid rgba(255,255,255,0.08);
-            border-radius: 7px;
-            padding: 0.5rem 0.75rem;
-            color: #e8e8e8;
-            font-size: 0.82rem;
-            outline: none;
-            transition: border-color 0.15s;
-            width: 100%;
-        }
-        .a-input:focus { border-color: rgba(245,158,11,0.4); }
-        .a-input-sm { padding: 0.35rem 0.5rem; font-size: 0.78rem; }
-        .a-label {
-            display: block;
-            font-size: 0.75rem;
-            font-weight: 600;
-            color: rgba(255,255,255,0.5);
-            margin-bottom: 0.35rem;
-        }
-
-        /* ─── Badge ─── */
-        .a-badge {
-            display: inline-flex;
-            padding: 0.15rem 0.45rem;
-            border-radius: 4px;
-            font-size: 0.7rem;
-            font-weight: 600;
-        }
-        .a-badge-admin { background: rgba(245,158,11,0.12); color: #f59e0b; }
-        .a-badge-user { background: rgba(59,130,246,0.12); color: #60a5fa; }
-        .a-badge-banned { background: rgba(239,68,68,0.12); color: #ef4444; }
-
-        /* ─── Modal ─── */
-        .a-overlay {
-            position: fixed; inset: 0;
-            background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
-            z-index: 100; display: none; align-items: center; justify-content: center;
-            padding: 1rem;
-        }
-        .a-overlay.open { display: flex; }
-        .a-modal {
-            background: #16171d;
-            border: 1px solid rgba(255,255,255,0.06);
-            border-radius: 16px;
-            padding: 1.5rem;
-            max-width: 460px; width: 100%;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.5);
-        }
-        .a-modal-title {
-            font-size: 1rem; font-weight: 600; margin-bottom: 1rem;
-        }
-        .a-modal-actions {
-            display: flex; gap: 0.5rem; margin-top: 1rem;
-            justify-content: flex-end;
-        }
-
-        /* ─── Grid helpers ─── */
-        .a-row { display: flex; gap: 1rem; flex-wrap: wrap; }
-        .a-row > * { flex: 1; min-width: 0; }
-        .a-gap-sm { gap: 0.5rem; }
-        .a-mt { margin-top: 1rem; }
-        .a-mb { margin-bottom: 1rem; }
-        .a-flex { display: flex; align-items: center; gap: 0.5rem; }
-
-        /* ─── Empty state ─── */
-        .a-empty {
-            text-align: center; padding: 3rem 1rem;
-            color: rgba(255,255,255,0.3);
-        }
-        .a-empty .a-empty-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
-
-        @media(max-width:768px){
-            .admin-sidebar { width: 56px; }
-            .admin-sidebar .sb-brand span,
-            .admin-sidebar .sb-nav a span:not(.sb-icon),
-            .admin-sidebar .sb-footer span { display: none; }
-            .admin-sidebar .sb-nav a { justify-content: center; padding: 0.65rem; }
-            .admin-sidebar .sb-footer a { justify-content: center; }
-        }
+        .admin-sidebar { width:240px; min-height:100vh; background:linear-gradient(180deg, #111216 0%, #0d0e12 100%); border-right:1px solid rgba(255,255,255,0.04); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; flex-shrink:0; }
+        .admin-sidebar .sb-brand { padding:1.25rem 1.25rem 0.75rem; font-size:1rem; font-weight:700; letter-spacing:0.02em; display:flex; align-items:center; gap:0.5rem; border-bottom:1px solid rgba(255,255,255,0.04); }
+        .admin-sidebar .sb-brand span { color:#f59e0b; }
+        .admin-sidebar .sb-nav { flex:1; padding:0.75rem 0; display:flex; flex-direction:column; gap:0.15rem; }
+        .admin-sidebar .sb-nav a { display:flex; align-items:center; gap:0.65rem; padding:0.65rem 1.25rem; font-size:0.85rem; color:rgba(255,255,255,0.55); text-decoration:none; transition:all 0.15s; border-left:2px solid transparent; font-weight:450; }
+        .admin-sidebar .sb-nav a:hover { color:rgba(255,255,255,0.85); background:rgba(255,255,255,0.03); }
+        .admin-sidebar .sb-nav a.active { color:#f59e0b; background:rgba(245,158,11,0.06); border-left-color:#f59e0b; }
+        .admin-sidebar .sb-nav a .sb-icon { font-size:1rem; width:20px; text-align:center; }
+        .admin-sidebar .sb-footer { padding:0.75rem 1.25rem; border-top:1px solid rgba(255,255,255,0.04); font-size:0.75rem; color:rgba(255,255,255,0.3); }
+        .admin-sidebar .sb-footer a { color:rgba(255,255,255,0.5); text-decoration:none; display:flex; align-items:center; gap:0.4rem; }
+        .admin-sidebar .sb-footer a:hover { color:#f59e0b; }
+        .admin-main { flex:1; min-width:0; display:flex; flex-direction:column; }
+        .admin-topbar { display:flex; align-items:center; justify-content:space-between; padding:0.85rem 1.5rem; background:rgba(17,18,22,0.8); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,0.04); position:sticky; top:0; z-index:10; }
+        .admin-topbar .at-title { font-size:1rem; font-weight:600; display:flex; align-items:center; gap:0.5rem; }
+        .admin-topbar .at-title .at-sub { font-size:0.75rem; color:rgba(255,255,255,0.35); font-weight:400; }
+        .admin-topbar .at-actions { display:flex; align-items:center; gap:0.75rem; }
+        .admin-topbar .at-actions .at-back { color:rgba(255,255,255,0.5); text-decoration:none; font-size:0.8rem; display:flex; align-items:center; gap:0.3rem; transition:color 0.15s; }
+        .admin-topbar .at-actions .at-back:hover { color:#f59e0b; }
+        .admin-content { flex:1; padding:1.5rem; overflow-y:auto; }
+        .a-card { background:rgba(17,18,22,0.6); border:1px solid rgba(255,255,255,0.05); border-radius:12px; padding:1.25rem; margin-bottom:1.25rem; }
+        .a-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem; font-size:0.85rem; font-weight:600; color:rgba(255,255,255,0.7); }
+        .a-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; margin-bottom:1.5rem; }
+        .a-stat { background:rgba(17,18,22,0.6); border:1px solid rgba(255,255,255,0.05); border-radius:12px; padding:1.25rem; display:flex; flex-direction:column; gap:0.25rem; position:relative; overflow:hidden; }
+        .a-stat .as-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255,0.35); }
+        .a-stat .as-value { font-size:1.8rem; font-weight:700; line-height:1.1; }
+        .a-stat .as-bar { position:absolute; bottom:0; left:0; height:2px; border-radius:0 2px 0 0; transition:width 0.6s ease; }
+        .a-stat .as-sub { font-size:0.75rem; color:rgba(255,255,255,0.35); }
+        .a-table-wrap { overflow-x:auto; border:1px solid rgba(255,255,255,0.05); border-radius:10px; }
+        .a-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
+        .a-table th { text-align:left; padding:0.7rem 0.9rem; font-weight:600; font-size:0.7rem; text-transform:uppercase; letter-spacing:0.05em; color:rgba(255,255,255,0.35); background:rgba(0,0,0,0.2); border-bottom:1px solid rgba(255,255,255,0.04); }
+        .a-table td { padding:0.65rem 0.9rem; border-bottom:1px solid rgba(255,255,255,0.03); vertical-align:middle; }
+        .a-table tr:last-child td { border-bottom:none; }
+        .a-table tr:hover td { background:rgba(255,255,255,0.02); }
+        .a-table .td-actions { display:flex; gap:0.35rem; flex-wrap:wrap; }
+        .a-btn { display:inline-flex; align-items:center; gap:0.35rem; padding:0.45rem 0.9rem; border:1px solid rgba(255,255,255,0.08); border-radius:7px; font-size:0.78rem; font-weight:500; cursor:pointer; transition:all 0.15s; background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.7); text-decoration:none; line-height:1.3; white-space:nowrap; }
+        .a-btn:hover { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.15); color:#fff; }
+        .a-btn-primary { background:rgba(245,158,11,0.12); border-color:rgba(245,158,11,0.2); color:#f59e0b; }
+        .a-btn-primary:hover { background:rgba(245,158,11,0.2); border-color:#f59e0b; }
+        .a-btn-danger { background:rgba(239,68,68,0.1); border-color:rgba(239,68,68,0.15); color:#ef4444; }
+        .a-btn-danger:hover { background:rgba(239,68,68,0.2); border-color:#ef4444; }
+        .a-btn-success { background:rgba(34,197,94,0.1); border-color:rgba(34,197,94,0.15); color:#22c55e; }
+        .a-btn-success:hover { background:rgba(34,197,94,0.2); border-color:#22c55e; }
+        .a-btn-sm { padding:0.3rem 0.55rem; font-size:0.7rem; }
+        .a-btn:disabled { opacity:0.4; cursor:not-allowed; }
+        .a-input { background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.08); border-radius:7px; padding:0.5rem 0.75rem; color:#e8e8e8; font-size:0.82rem; outline:none; transition:border-color 0.15s; width:100%; }
+        .a-input:focus { border-color:rgba(245,158,11,0.4); }
+        .a-input-sm { padding:0.35rem 0.5rem; font-size:0.78rem; }
+        .a-label { display:block; font-size:0.75rem; font-weight:600; color:rgba(255,255,255,0.5); margin-bottom:0.35rem; }
+        .a-badge { display:inline-flex; padding:0.15rem 0.45rem; border-radius:4px; font-size:0.7rem; font-weight:600; }
+        .a-badge-admin { background:rgba(245,158,11,0.12); color:#f59e0b; }
+        .a-badge-user { background:rgba(59,130,246,0.12); color:#60a5fa; }
+        .a-badge-banned { background:rgba(239,68,68,0.12); color:#ef4444; }
+        .a-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); z-index:100; display:none; align-items:center; justify-content:center; padding:1rem; }
+        .a-overlay.open { display:flex; }
+        .a-modal { background:#16171d; border:1px solid rgba(255,255,255,0.06); border-radius:16px; padding:1.5rem; max-width:460px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
+        .a-modal-title { font-size:1rem; font-weight:600; margin-bottom:1rem; }
+        .a-modal-actions { display:flex; gap:0.5rem; margin-top:1rem; justify-content:flex-end; }
+        .a-row { display:flex; gap:1rem; flex-wrap:wrap; }
+        .a-row > * { flex:1; min-width:0; }
+        .a-gap-sm { gap:0.5rem; }
+        .a-mt { margin-top:1rem; }
+        .a-mb { margin-bottom:1rem; }
+        .a-flex { display:flex; align-items:center; gap:0.5rem; }
+        .a-empty { text-align:center; padding:3rem 1rem; color:rgba(255,255,255,0.3); }
+        .a-empty .a-empty-icon { font-size:2.5rem; margin-bottom:0.5rem; }
+        @media(max-width:768px){ .admin-sidebar { width:56px; } .admin-sidebar .sb-brand span, .admin-sidebar .sb-nav a span:not(.sb-icon), .admin-sidebar .sb-footer span { display:none; } .admin-sidebar .sb-nav a { justify-content:center; padding:0.65rem; } .admin-sidebar .sb-footer a { justify-content:center; } }
         {% block extra_styles %}{% endblock %}
     </style>
 </head>
-<body>
+<body style="display:flex;background:#0b0c10;color:#e8e8e8;font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;min-height:100vh;">
 
 <div class="admin-sidebar">
-    <div class="sb-brand">
-        <span style="font-size:1.2rem">⚡</span>
-        <span>CS2 <span>Admin</span></span>
-    </div>
+    <div class="sb-brand"><span style="font-size:1.2rem">⚡</span><span>CS2 <span>Admin</span></span></div>
     <nav class="sb-nav">
-        <a href="/admin" class="{% block nav_dashboard %}{% endblock %}">
-            <span class="sb-icon">📊</span> <span>Дашборд</span>
-        </a>
-        <a href="/admin/users" class="{% block nav_users %}{% endblock %}">
-            <span class="sb-icon">👥</span> <span>Пользователи</span>
-        </a>
-        <a href="/admin/cases" class="{% block nav_cases %}{% endblock %}">
-            <span class="sb-icon">📦</span> <span>Кейсы</span>
-        </a>
+        <a href="/admin" class="{% block nav_dashboard %}{% endblock %}"><span class="sb-icon">📊</span> <span>Дашборд</span></a>
+        <a href="/admin/users" class="{% block nav_users %}{% endblock %}"><span class="sb-icon">👥</span> <span>Пользователи</span></a>
+        <a href="/admin/cases" class="{% block nav_cases %}{% endblock %}"><span class="sb-icon">📦</span> <span>Кейсы</span></a>
     </nav>
-    <div class="sb-footer">
-        <a href="/">&larr; <span>На сайт</span></a>
-    </div>
+    <div class="sb-footer"><a href="/">&larr; <span>На сайт</span></a></div>
 </div>
 
 <div class="admin-main">
     <div class="admin-topbar">
-        <div class="at-title">
-            {% block page_title %}Панель управления{% endblock %}
-        </div>
-        <div class="at-actions">
-            {% block top_actions %}{% endblock %}
-        </div>
-    </div>
-    <div class="admin-content">
-        {% block content %}{% endblock %}
+        <div class="at-title">{% block page_title %}Панель управления{% endblock %}</div>
+        <div class="at-actions">{% block top_actions %}{% endblock %}</div>
     </div>
+    <div class="admin-content">{% block content %}{% endblock %}</div>
 </div>
 
 {% block modals %}{% endblock %}
diff --git a/templates/admin/cases.html b/templates/admin/cases.html
index 334aff7..d6871ee 100644
--- a/templates/admin/cases.html
+++ b/templates/admin/cases.html
@@ -2,9 +2,7 @@
 {% block title %}Кейсы — Админ-панель{% endblock %}
 {% block nav_cases %}active{% endblock %}
 {% block page_title %}📦 Управление кейсами{% endblock %}
-{% block top_actions %}
-    <button class="a-btn a-btn-primary" onclick="openCreateCaseModal()">➕ Создать кейс</button>
-{% endblock %}
+{% block top_actions %}<button class="a-btn a-btn-primary" onclick="openCreateCaseModal()">➕ Создать кейс</button>{% endblock %}
 
 {% block content %}
 <div class="a-card">
@@ -64,29 +62,14 @@
         <div class="a-modal-title" id="caseModalTitle">🎲 Создать кейс</div>
         <input type="hidden" id="editCaseName">
         <div class="a-row a-gap-sm">
-            <div class="a-mb" style="flex:1">
-                <label class="a-label">Название кейса (ID)</label>
-                <input type="text" id="caseNameInput" class="a-input" placeholder="my_case">
-            </div>
-            <div class="a-mb" style="flex:1">
-                <label class="a-label">Отображаемое название</label>
-                <input type="text" id="caseDisplayName" class="a-input" placeholder="Мой кейс">
-            </div>
+            <div class="a-mb" style="flex:1"><label class="a-label">Название кейса (ID)</label><input type="text" id="caseNameInput" class="a-input" placeholder="my_case"></div>
+            <div class="a-mb" style="flex:1"><label class="a-label">Отображаемое название</label><input type="text" id="caseDisplayName" class="a-input" placeholder="Мой кейс"></div>
         </div>
         <div class="a-row a-gap-sm">
-            <div class="a-mb" style="flex:1">
-                <label class="a-label">Цена открытия</label>
-                <input type="number" id="casePrice" class="a-input" value="250">
-            </div>
-            <div class="a-mb" style="flex:1">
-                <label class="a-label">Ссылка на изображение</label>
-                <input type="text" id="caseImage" class="a-input" placeholder="/static/cases/default.png">
-            </div>
-        </div>
-        <div class="a-mb">
-            <label class="a-label">Описание (необязательно)</label>
-            <input type="text" id="caseDescription" class="a-input" placeholder="Описание кейса...">
+            <div class="a-mb" style="flex:1"><label class="a-label">Цена открытия</label><input type="number" id="casePrice" class="a-input" value="250"></div>
+            <div class="a-mb" style="flex:1"><label class="a-label">Ссылка на изображение</label><input type="text" id="caseImage" class="a-input" placeholder="/static/cases/default.png"></div>
         </div>
+        <div class="a-mb"><label class="a-label">Описание (необязательно)</label><input type="text" id="caseDescription" class="a-input" placeholder="Описание кейса..."></div>
         <div class="a-card" style="background:rgba(0,0,0,0.2);padding:0.75rem">
             <div class="a-card-header" style="margin-bottom:0.5rem">📋 Предметы кейса</div>
             <div id="caseItemsList"></div>
@@ -116,14 +99,8 @@
     <div class="a-modal" style="max-width:400px">
         <div class="a-modal-title">➕ Добавить кейс в секцию</div>
         <p style="font-size:0.82rem;color:rgba(255,255,255,0.5);margin-bottom:0.75rem">Секция: <strong id="addCaseSectionName"></strong></p>
-        <div class="a-mb">
-            <label class="a-label">Выберите кейс</label>
-            <select id="addCaseSelect" class="a-input"></select>
-        </div>
-        <div class="a-modal-actions">
-            <button class="a-btn" onclick="closeModal('addCaseModal')">Отмена</button>
-            <button class="a-btn a-btn-primary" onclick="confirmAddCase()">Добавить</button>
-        </div>
+        <div class="a-mb"><label class="a-label">Выберите кейс</label><select id="addCaseSelect" class="a-input"></select></div>
+        <div class="a-modal-actions"><button class="a-btn" onclick="closeModal('addCaseModal')">Отмена</button><button class="a-btn a-btn-primary" onclick="confirmAddCase()">Добавить</button></div>
     </div>
 </div>
 
@@ -131,14 +108,8 @@
 <div class="a-overlay" id="addSectionModal">
     <div class="a-modal" style="max-width:400px">
         <div class="a-modal-title">➕ Новая секция</div>
-        <div class="a-mb">
-            <label class="a-label">Название вкладки</label>
-            <input type="text" id="newSectionName" class="a-input" placeholder="Новая коллекция">
-        </div>
-        <div class="a-modal-actions">
-            <button class="a-btn" onclick="closeModal('addSectionModal')">Отмена</button>
-            <button class="a-btn a-btn-primary" onclick="confirmAddSection()">Создать</button>
-        </div>
+        <div class="a-mb"><label class="a-label">Название вкладки</label><input type="text" id="newSectionName" class="a-input" placeholder="Новая коллекция"></div>
+        <div class="a-modal-actions"><button class="a-btn" onclick="closeModal('addSectionModal')">Отмена</button><button class="a-btn a-btn-primary" onclick="confirmAddSection()">Создать</button></div>
     </div>
 </div>
 {% endblock %}
@@ -157,98 +128,44 @@
 
 {% block scripts %}
 <script>
-let currentCaseItems = [];
-let editingCaseName = null;
-
-// ─── Modals ──────────────────────────────────────────────────────────────────
+let currentCaseItems = [], editingCaseName = null;
 function closeModal(id) { document.getElementById(id).classList.remove('open'); }
 function openModal(id) { document.getElementById(id).classList.add('open'); }
 
-// ─── Load page data ──────────────────────────────────────────────────────────
 let allCasesList = [];
-document.addEventListener('DOMContentLoaded', async () => {
-    const r = await fetch('/admin/api/cases/list');
-    const d = await r.json();
-    allCasesList = d.cases || [];
-});
+document.addEventListener('DOMContentLoaded', async () => { const r = await fetch('/admin/api/cases/list'); const d = await r.json(); allCasesList = d.cases||[]; });
 
-// ─── Create / Edit Case ──────────────────────────────────────────────────────
 function openCreateCaseModal() {
-    editingCaseName = null;
-    document.getElementById('caseModalTitle').textContent = '🎲 Создать кейс';
-    document.getElementById('saveCaseBtn').textContent = '💾 Создать';
-    document.getElementById('editCaseName').value = '';
-    document.getElementById('caseNameInput').value = '';
-    document.getElementById('caseDisplayName').value = '';
-    document.getElementById('casePrice').value = '250';
-    document.getElementById('caseImage').value = '';
-    document.getElementById('caseDescription').value = '';
-    currentCaseItems = [];
-    renderCaseItems();
-    openModal('caseModal');
+    editingCaseName = null; document.getElementById('caseModalTitle').textContent = '🎲 Создать кейс'; document.getElementById('saveCaseBtn').textContent = '💾 Создать';
+    document.getElementById('editCaseName').value = ''; document.getElementById('caseNameInput').value = ''; document.getElementById('caseDisplayName').value = '';
+    document.getElementById('casePrice').value = '250'; document.getElementById('caseImage').value = ''; document.getElementById('caseDescription').value = '';
+    currentCaseItems = []; renderCaseItems(); openModal('caseModal');
 }
 
 function openEditCaseModal(caseName) {
-    editingCaseName = caseName;
-    document.getElementById('caseModalTitle').textContent = '✏️ Редактировать кейс';
-    document.getElementById('saveCaseBtn').textContent = '💾 Сохранить';
+    editingCaseName = caseName; document.getElementById('caseModalTitle').textContent = '✏️ Редактировать кейс'; document.getElementById('saveCaseBtn').textContent = '💾 Сохранить';
     document.getElementById('editCaseName').value = caseName;
-    const cfg = {{ cases_config|tojson }};
-    const c = cfg[caseName] || {};
-    document.getElementById('caseNameInput').value = caseName;
-    document.getElementById('caseDisplayName').value = c.display_name || '';
-    document.getElementById('casePrice').value = c.price_open || 250;
-    document.getElementById('caseImage').value = c.image_url || '';
-    document.getElementById('caseDescription').value = c.description || '';
-    currentCaseItems = (c.items || []).filter(i => typeof i === 'object');
-    renderCaseItems();
-    openModal('caseModal');
+    const cfg = {{ cases_config|tojson }}, c = cfg[caseName]||{};
+    document.getElementById('caseNameInput').value = caseName; document.getElementById('caseDisplayName').value = c.display_name||'';
+    document.getElementById('casePrice').value = c.price_open||250; document.getElementById('caseImage').value = c.image_url||''; document.getElementById('caseDescription').value = c.description||'';
+    currentCaseItems = (c.items||[]).filter(i => typeof i === 'object'); renderCaseItems(); openModal('caseModal');
 }
 
-function renderCaseItems() {
-    const div = document.getElementById('caseItemsList');
-    div.innerHTML = currentCaseItems.map((item, i) => `
-        <div class="ci-item">
-            <img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
-            <div class="ci-info">
-                <div>${item.market_hash_name || item.name || '???'}</div>
-                <div class="ci-rarity">${item.rarity || ''} • ${item.weapon || ''}</div>
-            </div>
-            <button class="a-btn a-btn-danger a-btn-sm" onclick="removeCaseItem(${i})">✕</button>
-        </div>
-    `).join('');
-}
+function renderCaseItems() { document.getElementById('caseItemsList').innerHTML = currentCaseItems.map((item,i) => `<div class="ci-item"><img src="${item.image_url||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'"><div class="ci-info"><div>${item.market_hash_name||item.name||'???'}</div><div class="ci-rarity">${item.rarity||''} • ${item.weapon||''}</div></div><button class="a-btn a-btn-danger a-btn-sm" onclick="removeCaseItem(${i})">✕</button></div>`).join(''); }
 
-function removeCaseItem(idx) {
-    currentCaseItems.splice(idx, 1);
-    renderCaseItems();
-}
-
-function addCaseItem(item) {
-    if (currentCaseItems.some(i => (i.market_hash_name || i.name) === (item.market_hash_name || item.name))) return;
-    currentCaseItems.push(item);
-    renderCaseItems();
-}
+function removeCaseItem(idx) { currentCaseItems.splice(idx,1); renderCaseItems(); }
+function addCaseItem(item) { if (currentCaseItems.some(i => (i.market_hash_name||i.name) === (item.market_hash_name||item.name))) return; currentCaseItems.push(item); renderCaseItems(); }
 
 async function searchCaseItems() {
     const q = document.getElementById('caseItemSearch').value;
     if (q.length < 2) return;
     const r = await fetch(`/admin/api/items/search?q=${encodeURIComponent(q)}`);
     const items = await r.json();
-    // show as dropdown
     let html = '<div style="margin-top:0.5rem;max-height:200px;overflow-y:auto">';
-    items.forEach(item => {
-        html += `<div class="ci-item" style="cursor:pointer" onclick="addCaseItem(${JSON.stringify(item).replace(/"/g,'&quot;')})">
-            <img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
-            <div class="ci-info"><div>${item.name}</div><div class="ci-rarity">${item.rarity} • ${item.price_rub||0} ₽</div></div>
-        </div>`;
-    });
+    items.forEach(item => { html += `<div class="ci-item" style="cursor:pointer" onclick="addCaseItem(${JSON.stringify(item).replace(/"/g,'&quot;')})"><img src="${item.image_url||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'"><div class="ci-info"><div>${item.name}</div><div class="ci-rarity">${item.rarity} • ${item.price_rub||0} ₽</div></div></div>`; });
     html += '</div>';
-    const existing = document.getElementById('caseItemSearchResults');
-    if (!existing) {
-        const d = document.createElement('div'); d.id = 'caseItemSearchResults';
-        document.getElementById('caseItemSearch').parentNode.appendChild(d);
-    }
+    let existing = document.getElementById('caseItemSearchResults');
+    if (!existing) { const d = document.createElement('div'); d.id = 'caseItemSearchResults'; document.getElementById('caseItemSearch').parentNode.appendChild(d); }
     document.getElementById('caseItemSearchResults').innerHTML = html;
 }
 
@@ -256,106 +173,27 @@ async function saveCase() {
     const name = document.getElementById('caseNameInput').value.trim();
     if (!name) { alert('Введите название кейса'); return; }
     const fd = new FormData();
-    fd.append('case_name', name);
-    fd.append('display_name', document.getElementById('caseDisplayName').value);
-    fd.append('price_open', document.getElementById('casePrice').value);
-    fd.append('image_url', document.getElementById('caseImage').value);
-    fd.append('description', document.getElementById('caseDescription').value);
-    fd.append('items_json', JSON.stringify(currentCaseItems));
-
+    fd.append('case_name', name); fd.append('display_name', document.getElementById('caseDisplayName').value);
+    fd.append('price_open', document.getElementById('casePrice').value); fd.append('image_url', document.getElementById('caseImage').value);
+    fd.append('description', document.getElementById('caseDescription').value); fd.append('items_json', JSON.stringify(currentCaseItems));
     const isEdit = editingCaseName !== null && editingCaseName !== name;
-    const url = isEdit
-        ? `/admin/api/cases/update/${encodeURIComponent(editingCaseName)}`
-        : '/admin/api/cases/create';
-    
-    const r = await fetch(url, { method:'POST', body:fd });
+    const r = await fetch(isEdit ? `/admin/api/cases/update/${encodeURIComponent(editingCaseName)}` : '/admin/api/cases/create', { method:'POST', body:fd });
     const d = await r.json();
-    if (d.success) { window.location.reload(); }
-    else alert(d.error || 'Ошибка');
+    if (d.success) window.location.reload(); else alert(d.error||'Ошибка');
 }
 
-async function deleteCase(name) {
-    if (!confirm(`Удалить кейс "${name}"?`)) return;
-    const fd = new FormData(); fd.append('case_name', name);
-    const r = await fetch(`/admin/api/cases/delete/${encodeURIComponent(name)}`, { method:'POST', body:fd });
-    const d = await r.json();
-    if (d.success) window.location.reload();
-    else alert(d.error);
-}
+async function deleteCase(name) { if (!confirm(`Удалить кейс "${name}"?`)) return; const fd = new FormData(); fd.append('case_name', name); const r = await fetch(`/admin/api/cases/delete/${encodeURIComponent(name)}`, { method:'POST', body:fd }); const d = await r.json(); if (d.success) window.location.reload(); else alert(d.error); }
 
-// ─── All Items Browser ───────────────────────────────────────────────────────
-async function openAllItemsModal() {
-    openModal('allItemsModal');
-    document.getElementById('allItemsSearch').value = '';
-    await searchAllItems();
-}
-async function searchAllItems() {
-    const q = document.getElementById('allItemsSearch').value;
-    const r = await fetch(`/admin/api/items/search?q=${encodeURIComponent(q)}&limit=200`);
-    const items = await r.json();
-    document.getElementById('allItemsGrid').innerHTML = items.map(item => `
-        <div class="all-item-card" onclick="addCaseItemFromAll(${JSON.stringify(item).replace(/"/g,'&quot;')})">
-            <img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
-            <div style="margin-top:0.2rem;line-height:1.15">${item.name}</div>
-            <div style="font-size:0.6rem;color:rgba(255,255,255,0.35)">${item.rarity}</div>
-        </div>
-    `).join('');
-}
-function addCaseItemFromAll(item) {
-    addCaseItem(item);
-    closeModal('allItemsModal');
-}
+async function openAllItemsModal() { openModal('allItemsModal'); document.getElementById('allItemsSearch').value = ''; await searchAllItems(); }
+async function searchAllItems() { const q = document.getElementById('allItemsSearch').value; const r = await fetch(`/admin/api/items/search?q=${encodeURIComponent(q)}&limit=200`); const items = await r.json(); document.getElementById('allItemsGrid').innerHTML = items.map(item => `<div class="all-item-card" onclick="addCaseItemFromAll(${JSON.stringify(item).replace(/"/g,'&quot;')})"><img src="${item.image_url||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'"><div style="margin-top:0.2rem;line-height:1.15">${item.name}</div><div style="font-size:0.6rem;color:rgba(255,255,255,0.35)">${item.rarity}</div></div>`).join(''); }
+function addCaseItemFromAll(item) { addCaseItem(item); closeModal('allItemsModal'); }
 
-// ─── Mainpage Sections ───────────────────────────────────────────────────────
-function openAddSectionModal() {
-    document.getElementById('newSectionName').value = '';
-    openModal('addSectionModal');
-}
-async function confirmAddSection() {
-    const name = document.getElementById('newSectionName').value.trim();
-    if (!name) return;
-    const fd = new FormData(); fd.append('tab', name);
-    const r = await fetch('/admin/api/mainpage/section/add', { method:'POST', body:fd });
-    const d = await r.json();
-    if (d.success) window.location.reload();
-    else alert(d.error);
-}
-async function deleteSection(tab) {
-    if (!confirm(`Удалить секцию "${tab}"?`)) return;
-    const fd = new FormData(); fd.append('tab', tab);
-    const r = await fetch('/admin/api/mainpage/section/delete', { method:'POST', body:fd });
-    const d = await r.json();
-    if (d.success) window.location.reload();
-    else alert(d.error);
-}
+function openAddSectionModal() { document.getElementById('newSectionName').value = ''; openModal('addSectionModal'); }
+async function confirmAddSection() { const name = document.getElementById('newSectionName').value.trim(); if (!name) return; const fd = new FormData(); fd.append('tab', name); const r = await fetch('/admin/api/mainpage/section/add', { method:'POST', body:fd }); const d = await r.json(); if (d.success) window.location.reload(); else alert(d.error); }
+async function deleteSection(tab) { if (!confirm(`Удалить секцию "${tab}"?`)) return; const fd = new FormData(); fd.append('tab', tab); const r = await fetch('/admin/api/mainpage/section/delete', { method:'POST', body:fd }); const d = await r.json(); if (d.success) window.location.reload(); else alert(d.error); }
 
-function openAddCaseModal(tab) {
-    document.getElementById('addCaseSectionName').textContent = tab;
-    const sel = document.getElementById('addCaseSelect');
-    sel.innerHTML = allCasesList.map(c => `<option value="${c}">${c}</option>`).join('');
-    sel.dataset.tab = tab;
-    openModal('addCaseModal');
-}
-async function confirmAddCase() {
-    const tab = document.getElementById('addCaseSelect').dataset.tab;
-    const caseName = document.getElementById('addCaseSelect').value;
-    const fd = new FormData();
-    fd.append('tab', tab);
-    fd.append('case_name', caseName);
-    const r = await fetch('/admin/api/mainpage/section/add-case', { method:'POST', body:fd });
-    const d = await r.json();
-    if (d.success) window.location.reload();
-    else alert(d.error);
-}
-async function removeCaseFromSection(tab, caseName) {
-    if (!confirm(`Убрать "${caseName}" из "${tab}"?`)) return;
-    const fd = new FormData();
-    fd.append('tab', tab);
-    fd.append('case_name', caseName);
-    const r = await fetch('/admin/api/mainpage/section/remove-case', { method:'POST', body:fd });
-    const d = await r.json();
-    if (d.success) window.location.reload();
-    else alert(d.error);
-}
+function openAddCaseModal(tab) { document.getElementById('addCaseSectionName').textContent = tab; const sel = document.getElementById('addCaseSelect'); sel.innerHTML = allCasesList.map(c => `<option value="${c}">${c}</option>`).join(''); sel.dataset.tab = tab; openModal('addCaseModal'); }
+async function confirmAddCase() { const tab = document.getElementById('addCaseSelect').dataset.tab, caseName = document.getElementById('addCaseSelect').value; const fd = new FormData(); fd.append('tab', tab); fd.append('case_name', caseName); const r = await fetch('/admin/api/mainpage/section/add-case', { method:'POST', body:fd }); const d = await r.json(); if (d.success) window.location.reload(); else alert(d.error); }
+async function removeCaseFromSection(tab, caseName) { if (!confirm(`Убрать "${caseName}" из "${tab}"?`)) return; const fd = new FormData(); fd.append('tab', tab); fd.append('case_name', caseName); const r = await fetch('/admin/api/mainpage/section/remove-case', { method:'POST', body:fd }); const d = await r.json(); if (d.success) window.location.reload(); else alert(d.error); }
 </script>
 {% endblock %}
diff --git a/templates/admin/dashboard.html b/templates/admin/dashboard.html
index 6f87e07..fd48237 100644
--- a/templates/admin/dashboard.html
+++ b/templates/admin/dashboard.html
@@ -44,9 +44,9 @@
         <div class="a-row a-gap-sm a-mb" style="text-align:center;justify-content:space-around">
             <div><div class="as-value" style="font-size:1.2rem">{{ rpu_count }}</div><div class="as-label" style="font-size:0.7rem">Всего записей</div></div>
             <div><div class="as-value" style="font-size:1.2rem">{{ "%.1f"|format(avg_rpu) }}%</div><div class="as-label" style="font-size:0.7rem">Средний уровень</div></div>
-            <div><div class="as-value" style="font-size:1.2rem" style="color:#22c55e">{{ lucky_count }}</div><div class="as-label" style="font-size:0.7rem">🍀 Везучих</div></div>
-            <div><div class="as-value" style="font-size:1.2rem" style="color:#f59e0b">{{ normal_count }}</div><div class="as-label" style="font-size:0.7rem">📊 Обычных</div></div>
-            <div><div class="as-value" style="font-size:1.2rem" style="color:#ef4444">{{ unlucky_count }}</div><div class="as-label" style="font-size:0.7rem">🌧️ Невезучих</div></div>
+            <div><div class="as-value" style="font-size:1.2rem;color:#22c55e">{{ lucky_count }}</div><div class="as-label" style="font-size:0.7rem">🍀 Везучих</div></div>
+            <div><div class="as-value" style="font-size:1.2rem;color:#f59e0b">{{ normal_count }}</div><div class="as-label" style="font-size:0.7rem">📊 Обычных</div></div>
+            <div><div class="as-value" style="font-size:1.2rem;color:#ef4444">{{ unlucky_count }}</div><div class="as-label" style="font-size:0.7rem">🌧️ Невезучих</div></div>
             <div><div class="as-value" style="font-size:1.2rem">{{ "%.0f"|format(total_spent) }} ₽</div><div class="as-label" style="font-size:0.7rem">Потрачено всего</div></div>
         </div>
         {% else %}
diff --git a/templates/admin/user_detail.html b/templates/admin/user_detail.html
index dc898db..3511418 100644
--- a/templates/admin/user_detail.html
+++ b/templates/admin/user_detail.html
@@ -2,7 +2,7 @@
 {% block title %}{{ target_user.username }} — Админ-панель{% endblock %}
 {% block nav_users %}active{% endblock %}
 {% block page_title %}
-    👤 {{ target_user.username }}
+    {{ target_user.username }}
     {% if target_user.is_admin %}<span class="a-badge a-badge-admin" style="margin-left:0.5rem">Админ</span>{% endif %}
     {% if target_user.is_banned %}<span class="a-badge a-badge-banned" style="margin-left:0.5rem">Забанен</span>{% endif %}
 {% endblock %}
@@ -11,62 +11,63 @@
 {% endblock %}
 
 {% block content %}
-<div class="a-stats" style="grid-template-columns:repeat(4,1fr)">
+<div class="a-stats">
     <div class="a-stat">
         <div class="as-label">Баланс</div>
         <div class="as-value">{{ "%.0f"|format(target_user.balance) }} ₽</div>
+        <div class="as-bar" style="width:60%;background:#f59e0b"></div>
     </div>
     <div class="a-stat">
         <div class="as-label">Предметов</div>
         <div class="as-value">{{ inventory|length }}</div>
+        <div class="as-bar" style="width:45%;background:#60a5fa"></div>
     </div>
     <div class="a-stat">
         <div class="as-label">Открытий кейсов</div>
         <div class="as-value">{{ total_openings }}</div>
+        <div class="as-bar" style="width:30%;background:#a78bfa"></div>
     </div>
     <div class="a-stat">
         <div class="as-label">Контрактов</div>
         <div class="as-value">{{ total_contracts }}</div>
+        <div class="as-bar" style="width:20%;background:#f472b6"></div>
     </div>
 </div>
 
-<!-- RPU -->
 <div class="a-card">
-    <div class="a-card-header">🎲 РПУ (Режим Персонального Угнетения)</div>
-    <div class="a-row a-gap-sm a-mb" id="rpuStats" style="justify-content:space-around;text-align:center">
-        <div><div class="as-value" style="font-size:1.4rem" id="rpuLevel">--</div><div class="as-label" style="font-size:0.7rem">Уровень</div></div>
-        <div><div class="as-value" style="font-size:1.4rem" id="rpuLuck">--</div><div class="as-label" style="font-size:0.7rem">Множитель</div></div>
-        <div><div class="as-value" style="font-size:1.4rem" id="rpuSpent">--</div><div class="as-label" style="font-size:0.7rem">Потрачено</div></div>
-        <div><div class="as-value" style="font-size:1.4rem" id="rpuOpened">--</div><div class="as-label" style="font-size:0.7rem">Открыто</div></div>
-        <div><div class="as-value" style="font-size:1.4rem" id="rpuAutoStatus">--</div><div class="as-label" style="font-size:0.7rem">Авто</div></div>
+    <div class="a-card-header">RPU (Режим Персонального Угнетения)</div>
+    <div class="a-row a-gap-sm a-mb" style="text-align:center">
+        <div><div class="as-value" style="font-size:1.2rem" id="rpuLevel">--</div><div class="as-label" style="font-size:0.7rem">Уровень</div></div>
+        <div><div class="as-value" style="font-size:1.2rem" id="rpuLuck">--</div><div class="as-label" style="font-size:0.7rem">Множитель</div></div>
+        <div><div class="as-value" style="font-size:1.2rem" id="rpuSpent">--</div><div class="as-label" style="font-size:0.7rem">Потрачено</div></div>
+        <div><div class="as-value" style="font-size:1.2rem" id="rpuOpened">--</div><div class="as-label" style="font-size:0.7rem">Открыто</div></div>
+        <div><div class="as-value" style="font-size:1.2rem" id="rpuAutoStatus">--</div><div class="as-label" style="font-size:0.7rem">Авто</div></div>
     </div>
-    <div class="a-flex" style="flex-wrap:wrap">
-        <button class="a-btn a-btn-primary" onclick="openRPUModal()">⚙️ Настроить</button>
-        <button class="a-btn" style="border-color:#10b981;color:#10b981" onclick="setRPUPreset('lucky')">🍀 Везучий</button>
-        <button class="a-btn" style="border-color:#f59e0b;color:#f59e0b" onclick="setRPUPreset('normal')">📊 Обычный</button>
-        <button class="a-btn" style="border-color:#ef4444;color:#ef4444" onclick="setRPUPreset('unlucky')">🌧️ Невезучий</button>
-        <button class="a-btn a-btn-danger" onclick="setRPUPreset('very_unlucky')">💀 Проклятый</button>
+    <div class="td-actions" style="flex-wrap:wrap">
+        <button class="a-btn a-btn-primary" onclick="openRPUModal()">Настроить</button>
+        <button class="a-btn" style="border-color:#10b981;color:#10b981" onclick="setRPUPreset('lucky')">Везучий</button>
+        <button class="a-btn" style="border-color:#f59e0b;color:#f59e0b" onclick="setRPUPreset('normal')">Обычный</button>
+        <button class="a-btn" style="border-color:#ef4444;color:#ef4444" onclick="setRPUPreset('unlucky')">Невезучий</button>
+        <button class="a-btn a-btn-danger" onclick="setRPUPreset('very_unlucky')">Проклятый</button>
     </div>
 </div>
 
-<!-- Действия -->
 <div class="a-card">
-    <div class="a-card-header">🔧 Действия</div>
-    <div class="a-flex" style="flex-wrap:wrap">
-        <button class="a-btn a-btn-primary" onclick="openBalanceModal()">💰 Баланс</button>
-        <button class="a-btn" onclick="openGiveItemModal()">🎁 Выдать предмет</button>
+    <div class="a-card-header">Действия</div>
+    <div class="td-actions" style="flex-wrap:wrap">
+        <button class="a-btn a-btn-primary" onclick="openBalanceModal()">Изменить баланс</button>
+        <button class="a-btn" onclick="openGiveItemModal()">Выдать предмет</button>
         {% if target_user.id != user.id %}
-        <button class="a-btn" onclick="toggleAdmin()">{{ "👑 Снять админа" if target_user.is_admin else "👑 Сделать админом" }}</button>
+        <button class="a-btn" onclick="toggleAdmin()">{{ "Снять админа" if target_user.is_admin else "Сделать админом" }}</button>
         {% endif %}
         <button class="a-btn {{ 'a-btn-danger' if not target_user.is_banned else 'a-btn-success' }}" onclick="toggleBan()">
-            {{ "🔨 Забанить" if not target_user.is_banned else "✅ Разбанить" }}
+            {{ "Забанить" if not target_user.is_banned else "Разбанить" }}
         </button>
     </div>
 </div>
 
-<!-- Инвентарь -->
 <div class="a-card">
-    <div class="a-card-header">🎒 Инвентарь (последние 50)</div>
+    <div class="a-card-header">Инвентарь (последние 50)</div>
     <div class="a-table-wrap">
         <table class="a-table">
             <thead><tr><th>ID</th><th>Название</th><th>Редкость</th><th>Float</th><th></th></tr></thead>
@@ -78,7 +79,7 @@
                 <td>{{ item.rarity }}</td>
                 <td>{{ "%.4f"|format(item.float_value) }}</td>
                 <td class="td-actions">
-                    <button class="a-btn a-btn-danger a-btn-sm" onclick="deleteItem({{ item.id }})">🗑️</button>
+                    <button class="a-btn a-btn-danger a-btn-sm" onclick="deleteItem({{ item.id }})">Удалить</button>
                 </td>
             </tr>
             {% endfor %}
@@ -89,11 +90,10 @@
 {% endblock %}
 
 {% block modals %}
-<!-- Баланс -->
 <div class="a-overlay" id="balanceModal">
     <div class="a-modal">
-        <div class="a-modal-title">💰 Изменить баланс</div>
-        <p style="font-size:0.85rem;color:rgba(255,255,255,0.5);margin-bottom:1rem">
+        <div class="a-modal-title">Изменить баланс</div>
+        <p class="a-mb" style="font-size:0.85rem;color:rgba(255,255,255,0.5)">
             Текущий: <strong style="color:#f59e0b">{{ "%.2f"|format(target_user.balance) }} ₽</strong>
         </p>
         <div class="a-mb">
@@ -103,9 +103,9 @@
         <div class="a-mb">
             <label class="a-label">Операция</label>
             <select id="balanceOperation" class="a-input">
-                <option value="add">➕ Добавить</option>
-                <option value="remove">➖ Снять</option>
-                <option value="set">🎯 Установить</option>
+                <option value="add">Добавить</option>
+                <option value="remove">Снять</option>
+                <option value="set">Установить</option>
             </select>
         </div>
         <div class="a-modal-actions">
@@ -115,10 +115,9 @@
     </div>
 </div>
 
-<!-- Выдать предмет -->
 <div class="a-overlay" id="giveItemModal">
     <div class="a-modal" style="max-width:560px">
-        <div class="a-modal-title">🎁 Выдать предмет</div>
+        <div class="a-modal-title">Выдать предмет</div>
         <div class="a-mb">
             <label class="a-label">Поиск</label>
             <input type="text" id="itemSearchInput" class="a-input" placeholder="Введите название..." oninput="searchItems()">
@@ -130,14 +129,13 @@
     </div>
 </div>
 
-<!-- RPU -->
 <div class="a-overlay" id="rpuModal">
     <div class="a-modal" style="max-width:500px">
-        <div class="a-modal-title">⚙️ Настройка РПУ</div>
+        <div class="a-modal-title">Настройка RPU</div>
         <div id="rpuSliders" class="a-mb"></div>
         <div class="a-mb">
             <label class="a-label" style="display:flex;align-items:center;gap:0.5rem;cursor:pointer">
-                <input type="checkbox" id="rpuAutoAdjust"> 🔄 Автоматическая подкрутка
+                <input type="checkbox" id="rpuAutoAdjust"> Автоматическая подкрутка
             </label>
         </div>
         <div class="a-modal-actions">
@@ -150,7 +148,7 @@
 
 {% block extra_styles %}
 <style>
-    .slider-group { margin-bottom: 0.75rem; }
+    .slider-group { margin-bottom:0.75rem; }
     .slider-group label { display:flex; justify-content:space-between; font-size:0.78rem; color:rgba(255,255,255,0.6); margin-bottom:0.2rem; }
     .slider-group input[type=range] { width:100%; accent-color:#f59e0b; }
     #itemSearchResults > div {
@@ -172,7 +170,6 @@ let currentRPU = null;
 function closeModal(id) { document.getElementById(id).classList.remove('open'); }
 function openModal(id) { document.getElementById(id).classList.add('open'); }
 
-// ====== BALANCE ======
 function openBalanceModal() { openModal('balanceModal'); }
 async function updateBalance() {
     const fd = new FormData();
@@ -184,7 +181,6 @@ async function updateBalance() {
     else alert(d.error);
 }
 
-// ====== GIVE ITEM ======
 function openGiveItemModal() { openModal('giveItemModal'); searchItems(); }
 async function searchItems() {
     const q = document.getElementById('itemSearchInput').value;
@@ -195,7 +191,7 @@ async function searchItems() {
             <img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
             <div class="ir-info">
                 <div class="ir-name">${item.name}</div>
-                <div class="ir-meta">${item.rarity} • ${item.price_rub || 0} ₽</div>
+                <div class="ir-meta">${item.rarity} &bull; ${item.price_rub || 0} ₽</div>
             </div>
             <button class="a-btn a-btn-primary a-btn-sm" onclick="giveItem(${item.id})">Выдать</button>
         </div>
@@ -209,7 +205,6 @@ async function giveItem(itemId) {
     else alert(d.error);
 }
 
-// ====== DELETE ITEM ======
 async function deleteItem(invId) {
     if (!confirm('Удалить предмет?')) return;
     const res = await fetch(`/admin/api/user/${userId}/delete-item/${invId}`, { method:'POST' });
@@ -218,7 +213,6 @@ async function deleteItem(invId) {
     else alert(d.error);
 }
 
-// ====== TOGGLE ADMIN / BAN ======
 async function toggleAdmin() {
     if (!confirm('Изменить статус админа?')) return;
     const res = await fetch(`/admin/api/user/${userId}/toggle-admin`, { method:'POST' });
@@ -232,7 +226,6 @@ async function toggleBan() {
     if (d.success) window.location.reload(); else alert(d.error);
 }
 
-// ====== RPU ======
 async function loadRPU() {
     try {
         const res = await fetch(`/admin/api/user/${userId}/rpu`);
@@ -244,7 +237,7 @@ async function loadRPU() {
         document.getElementById('rpuLuck').textContent = d.luck_multiplier.toFixed(2) + 'x';
         document.getElementById('rpuSpent').textContent = Math.round(d.stats.total_spent).toLocaleString() + ' ₽';
         document.getElementById('rpuOpened').textContent = d.stats.total_opened.toLocaleString();
-        document.getElementById('rpuAutoStatus').textContent = d.auto_adjust ? '✅' : '❌';
+        document.getElementById('rpuAutoStatus').textContent = d.auto_adjust ? 'DA' : 'NET';
     } catch(_) {}
 }
 
@@ -263,7 +256,7 @@ function openRPUModal() {
                 oninput="document.getElementById('rp_${k}_v').textContent=this.value+'x'"></div>`;
     });
     const lv = currentRPU?.luck_multiplier || 1.0;
-    html += `<div class="slider-group"><label><span>🍀 Общая удача</span><span id="rp_luck_v">${lv.toFixed(2)}x</span></label>
+    html += `<div class="slider-group"><label><span>Общая удача</span><span id="rp_luck_v">${lv.toFixed(2)}x</span></label>
         <input type="range" id="rp_luck" min="0.1" max="3.0" step="0.05" value="${lv}"
             oninput="document.getElementById('rp_luck_v').textContent=this.value+'x'"></div>`;
     sliders.innerHTML = html;
@@ -281,7 +274,7 @@ async function saveRPU() {
     else alert(d.error);
 }
 async function setRPUPreset(preset) {
-    const names = { lucky:'🍀 Везучий', normal:'📊 Обычный', unlucky:'🌧️ Невезучий', very_unlucky:'💀 Проклятый' };
+    const names = { lucky:'Везучий', normal:'Обычный', unlucky:'Невезучий', very_unlucky:'Проклятый' };
     if (!confirm('Применить "'+names[preset]+'"?')) return;
     const fd = new FormData(); fd.append('preset', preset);
     const res = await fetch(`/admin/api/user/${userId}/rpu/preset`, { method:'POST', body:fd });
diff --git a/templates/admin/users.html b/templates/admin/users.html
index 27e1cab..9192e17 100644
--- a/templates/admin/users.html
+++ b/templates/admin/users.html
@@ -13,27 +13,12 @@
 {% if users %}
 <div class="a-table-wrap">
     <table class="a-table">
-        <thead>
-            <tr>
-                <th>ID</th>
-                <th>Имя</th>
-                <th>Баланс</th>
-                <th>Статус</th>
-                <th>Кейсов</th>
-                <th>Контрактов</th>
-                <th>Достижений</th>
-                <th></th>
-            </tr>
-        </thead>
+        <thead><tr><th>ID</th><th>Имя</th><th>Баланс</th><th>Статус</th><th>Кейсов</th><th>Контрактов</th><th>Достижений</th><th></th></tr></thead>
         <tbody>
             {% for u in users %}
             <tr>
                 <td>{{ u.id }}</td>
-                <td>
-                    <a href="/admin/user/{{ u.id }}" style="color:#f59e0b;text-decoration:none;font-weight:500">
-                        {{ u.username }}
-                    </a>
-                </td>
+                <td><a href="/admin/user/{{ u.id }}" style="color:#f59e0b;text-decoration:none;font-weight:500">{{ u.username }}</a></td>
                 <td>{{ "%.0f"|format(u.balance) }} ₽</td>
                 <td>
                     {% if u.is_admin %}<span class="a-badge a-badge-admin">Админ</span>{% endif %}
@@ -43,30 +28,20 @@
                 <td>{{ u.case_openings|default(0) }}</td>
                 <td>{{ u.contracts|default(0) }}</td>
                 <td>{{ u.achievements|default(0) }}</td>
-                <td class="td-actions">
-                    <a href="/admin/user/{{ u.id }}" class="a-btn a-btn-sm">✏️</a>
-                </td>
+                <td class="td-actions"><a href="/admin/user/{{ u.id }}" class="a-btn a-btn-sm">✏️</a></td>
             </tr>
             {% endfor %}
         </tbody>
     </table>
 </div>
 {% else %}
-<div class="a-empty">
-    <div class="a-empty-icon">📭</div>
-    <h3>Пользователи не найдены</h3>
-</div>
+<div class="a-empty"><div class="a-empty-icon">📭</div><h3>Пользователи не найдены</h3></div>
 {% endif %}
 {% endblock %}
 
 {% block scripts %}
 <script>
-function searchUsers() {
-    const q = document.getElementById('userSearch').value.trim();
-    window.location.href = '/admin/users' + (q ? '?search=' + encodeURIComponent(q) : '');
-}
-document.getElementById('userSearch').addEventListener('keydown', e => {
-    if (e.key === 'Enter') searchUsers();
-});
+function searchUsers() { const q = document.getElementById('userSearch').value.trim(); window.location.href = '/admin/users' + (q ? '?search='+encodeURIComponent(q) : ''); }
+document.getElementById('userSearch').addEventListener('keydown', e => { if (e.key === 'Enter') searchUsers(); });
 </script>
 {% endblock %}
diff --git a/templates/case_detail.html b/templates/case_detail.html
index f73e080..a602f4b 100644
--- a/templates/case_detail.html
+++ b/templates/case_detail.html
@@ -3,10 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes, viewport-fit=cover">
-    <title>{{ case_display_name }} - CS2 Simulator</title>
+    <title>{{ case_display_name }} — CS2 Simulator</title>
     <link rel="stylesheet" href="/static/css/style.css">
     <style>
-        /* Стили для карточек (только для фарм-кейсов) */
         .cards-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
@@ -14,7 +13,6 @@
             padding: 16px;
             perspective: 1000px;
         }
-        
         .card-flip {
             aspect-ratio: 3/4;
             cursor: pointer;
@@ -22,11 +20,9 @@
             transform-style: preserve-3d;
             transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
         }
-        
         .card-flip.flipped {
             transform: rotateY(180deg);
         }
-        
         .card-front, .card-back {
             position: absolute;
             width: 100%;
@@ -40,13 +36,11 @@
             padding: 8px;
             box-sizing: border-box;
         }
-        
         .card-front {
             background: var(--bg-card);
             border: 2px solid var(--border-color);
             transform: rotateY(180deg);
         }
-        
         .card-back {
             background: linear-gradient(135deg, #2a1a4e 0%, #1a0a2e 100%);
             border: 2px solid #8b7355;
@@ -55,7 +49,6 @@
                 repeating-linear-gradient(45deg, rgba(255,215,0,0.1) 0px, rgba(255,215,0,0.1) 2px, 
                                           transparent 2px, transparent 8px);
         }
-        
         .card-back::before {
             content: "?";
             font-size: 48px;
@@ -64,14 +57,12 @@
             text-shadow: 0 0 20px #ffd700;
             opacity: 0.5;
         }
-        
         .card-front img {
             width: 100%;
             height: 100px;
             object-fit: contain;
             margin-bottom: 4px;
         }
-        
         .card-front .card-name {
             font-size: 9px;
             text-align: center;
@@ -83,31 +74,26 @@
             width: 100%;
             margin-top: 4px;
         }
-        
         .card-front .card-rarity {
             font-size: 8px;
             margin-top: 2px;
             font-weight: bold;
         }
-        
         .card-front .card-float {
             font-size: 8px;
-            color: var(--text-secondary);
+            color: var(--text-dim);
             margin-top: 2px;
         }
-        
         .card-front .card-price {
             font-size: 9px;
-            color: var(--success-color);
+            color: var(--success);
             font-weight: bold;
             margin-top: 4px;
         }
-        
         .card-flip.top-drop .card-front {
             border-color: #ffd700;
             box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
         }
-        
         .cards-summary {
             display: flex;
             justify-content: space-between;
@@ -117,17 +103,14 @@
             border-radius: 8px;
             margin: 12px 0;
         }
-        
         .cards-actions {
             display: flex;
             gap: 8px;
         }
-        
         .flip-progress {
-            color: var(--text-secondary);
+            color: var(--text-dim);
             font-size: 14px;
         }
-        
         .no-topdrop-message {
             text-align: center;
             padding: 40px;
@@ -135,108 +118,87 @@
             border-radius: 12px;
             margin: 20px 0;
         }
-        
         .no-topdrop-message h3 {
-            color: #ef4444;
+            color: var(--danger);
             margin-bottom: 12px;
         }
-        
         .no-topdrop-message p {
-            color: var(--text-secondary);
+            color: var(--text-dim);
             margin-bottom: 20px;
         }
-        
-        /* Адаптация для мобильных */
-        @media (max-width: 768px) {
-            .cards-grid {
-                grid-template-columns: repeat(3, 1fr);
-                gap: 8px;
-                padding: 8px;
-            }
-            
-            .card-front img {
-                height: 70px;
-            }
-            
-            .card-back::before {
-                font-size: 32px;
-            }
-        }
-        
-        @media (max-width: 480px) {
-            .cards-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-        }
-        
-        @keyframes cardAppear {
-            from {
-                opacity: 0;
-                transform: scale(0.8) rotateY(180deg);
-            }
-            to {
-                opacity: 1;
-                transform: scale(1) rotateY(180deg);
-            }
-        }
-        
-        .card-flip.appear {
-            animation: cardAppear 0.4s ease-out;
-        }
-        
         .count-buttons {
             display: flex;
             gap: 4px;
             flex-wrap: wrap;
         }
-        
         .count-btn {
             padding: 6px 12px;
             background: var(--bg-dark);
-            border: 1px solid var(--border-color);
-            color: var(--text-primary);
+            border: 1px solid var(--border);
+            color: var(--text);
             border-radius: 6px;
             cursor: pointer;
             font-size: 14px;
             transition: all 0.2s;
             min-width: 40px;
+            font-family: var(--font-body);
         }
-        
         .count-btn.active {
-            background: var(--primary-color);
-            border-color: var(--primary-color);
+            background: var(--primary);
+            border-color: var(--primary);
+            color: #000;
         }
-        
         .count-btn.farm-mode {
             background: linear-gradient(135deg, #2a1a4e, #1a0a2e);
             border-color: #ffd700;
         }
+        .count-btn.farm-mode.active {
+            background: #ffd700;
+            color: #000;
+            border-color: #ffd700;
+        }
+        @keyframes cardAppear {
+            from { opacity: 0; transform: scale(0.8) rotateY(180deg); }
+            to { opacity: 1; transform: scale(1) rotateY(180deg); }
+        }
+        .card-flip.appear {
+            animation: cardAppear 0.4s ease-out;
+        }
+        @media (max-width: 768px) {
+            .cards-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 8px; }
+            .card-front img { height: 70px; }
+            .card-back::before { font-size: 32px; }
+        }
+        @media (max-width: 480px) {
+            .cards-grid { grid-template-columns: repeat(2, 1fr); }
+        }
     </style>
 </head>
 <body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
                 {% if user %}
                 <a href="/cases" class="nav-link active">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/crash" class="nav-link">💥 Crash</a>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/crash" class="nav-link">Crash</a>
                 <a href="/inventory" class="nav-link">Инвентарь</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
-                <a href="/achievements" class="nav-link">🏆 Достижения</a>
+                <a href="/activity" class="nav-link">Лента</a>
+                <a href="/achievements" class="nav-link">Достижения</a>
                 <a href="/profile" class="nav-link">Профиль</a>
                 <span class="user-balance">{{ "%.0f"|format(user.balance) }} ₽</span>
-                <button onclick="toggleSound()" class="btn btn-outline" id="soundToggle" title="Звук">🔊</button>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
-                <button onclick="logout()" class="btn btn-outline">Выйти</button>
+                <button onclick="toggleSound()" class="btn btn-ghost" id="soundToggle" title="Звук">🔊</button>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <button onclick="logout()" class="btn btn-ghost">Выйти</button>
                 {% else %}
                 <a href="/cases" class="nav-link active">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/activity" class="nav-link">Лента</a>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
                 <a href="/login" class="btn btn-outline">Войти</a>
                 <a href="/register" class="btn btn-primary">Регистрация</a>
                 {% endif %}
@@ -244,46 +206,41 @@
         </div>
     </nav>
 
-    <main class="case-detail-container">
+    <main class="section">
         <div class="container">
-            <a href="/cases" class="back-link">← Назад к списку кейсов</a>
-            
-            <div class="case-header">
-                <div class="case-title-row">
-                    <div>
-                        <h1>📦 {{ case_display_name }}</h1>
-                        <p class="case-subtitle">{{ total_items }} предметов в кейсе</p>
-                    </div>
-                    <div class="case-info-badge">
-                        <span class="case-price-tag">🔑 {{ "%.0f"|format(case_price) }} ₽ за шт.</span>
-                    </div>
+            <a href="/cases" class="text-dim text-sm">← Назад к списку кейсов</a>
+
+            <div class="section-header mt-4">
+                <div>
+                    <h1 class="section-title">{{ case_display_name }}</h1>
+                    <p class="section-subtitle">{{ total_items }} предметов в кейсе</p>
                 </div>
-                
-                <div class="opening-controls">
-                    {% if user %}
-                    <div class="count-selector">
-                        <label>Открыть:</label>
-                        <div class="count-buttons" id="countButtons"></div>
-                    </div>
-                    <div class="total-price-display" id="totalPriceDisplay">
-                        <span>Итого:</span> {{ "%.0f"|format(case_price) }} ₽
-                    </div>
+                <span class="badge badge-yellow">🔑 {{ "%.0f"|format(case_price) }} ₽ за шт.</span>
+            </div>
+
+            <div class="card flex items-center justify-between gap-3 flex-wrap">
+                {% if user %}
+                <div class="flex items-center gap-2">
+                    <span class="form-label" style="margin:0;">Открыть:</span>
+                    <div class="count-buttons" id="countButtons"></div>
+                </div>
+                <div class="flex items-center gap-3">
+                    <span class="display-font text-primary" id="totalPriceDisplay">{{ "%.0f"|format(case_price) }} ₽</span>
                     <button class="btn btn-primary btn-large" onclick="startOpening()" id="openButton">
                         🎲 Открыть
                     </button>
-                    <button class="btn btn-fast" onclick="startOpening(true)" id="fastOpenButton" title="Быстрое открытие без анимации">⚡</button>
-                    {% else %}
-                    <div style="display:flex;align-items:center;gap:1rem;width:100%;justify-content:center;">
-                        <span style="color:var(--text-secondary);">🔒 Войдите в аккаунт, чтобы открывать кейсы</span>
-                        <a href="/login" class="btn btn-primary">Войти</a>
-                        <a href="/register" class="btn btn-outline">Регистрация</a>
-                    </div>
-                    {% endif %}
+                    <button class="btn btn-icon" onclick="startOpening(true)" id="fastOpenButton" title="Быстрое открытие без анимации">⚡</button>
                 </div>
+                {% else %}
+                <div class="flex items-center gap-4 w-full justify-center">
+                    <span class="text-dim">🔒 Войдите в аккаунт, чтобы открывать кейсы</span>
+                    <a href="/login" class="btn btn-primary">Войти</a>
+                    <a href="/register" class="btn btn-outline">Регистрация</a>
+                </div>
+                {% endif %}
             </div>
-            
-            <div class="case-opening-section">
-                <!-- Для слот-машины — всегда видна -->
+
+            <div class="mt-4">
                 <div id="slotMachineContainer" style="display: none;">
                     <div class="slot-machine">
                         <div class="slot-reels">
@@ -336,9 +293,8 @@
                         </div>
                     </div>
                 </div>
-                
+
                 <div id="openingAnimation" class="opening-animation-container" style="display: none;">
-                    <!-- Для обычных кейсов - скроллы -->
                     <div id="singleScrollContainer" style="display: none;">
                         <div class="scroll-container-full" id="singleScrollContainerInner">
                             <div class="center-indicator-full"></div>
@@ -346,48 +302,52 @@
                         </div>
                     </div>
                     <div id="multiScrollContainer" class="multi-scroll-grid" style="display: none;"></div>
-                    
-                    <!-- Для фарм-кейсов - карточки -->
                     <div id="farmCardsContainer" style="display: none;"></div>
-                    
                 </div>
                 <div id="openingResults" style="display: none;"></div>
             </div>
-            
-            <div class="case-items-section">
-                <h2>📋 Содержимое кейса ({{ total_items }} предметов)</h2>
-                <div class="rarity-filters">
-                    <button class="filter-btn active" onclick="filterItems('all')">Все</button>
-                    {% for rarity in sorted_rarities %}
-                    <button class="filter-btn" onclick="filterItems('{{ rarity }}')" 
-                            style="color: var(--rarity-{{ rarity|lower|replace(' ', '-')|replace(' grade', '') }});">
-                        {{ rarity }}
-                    </button>
-                    {% endfor %}
-                </div>
+
+            <div class="section-header mt-4">
+                <h2 class="section-title">📋 Содержимое кейса ({{ total_items }} предметов)</h2>
+            </div>
+
+            <div class="filter-bar">
+                <button class="filter-chip active" onclick="filterItems('all')">Все</button>
                 {% for rarity in sorted_rarities %}
-                <div class="rarity-section" data-rarity="{{ rarity }}">
-                    <h3 style="color: var(--rarity-{{ rarity|lower|replace(' ', '-')|replace(' grade', '') }}); border-bottom-color: var(--rarity-{{ rarity|lower|replace(' ', '-')|replace(' grade', '') }});">
-                        {{ rarity }} 
-                        <span class="rarity-count">({{ items_by_rarity[rarity]|length }})</span>
+                <button class="filter-chip" onclick="filterItems('{{ rarity }}')"
+                        style="color: var(--rarity-{{ rarity|lower|replace(' ', '-')|replace(' grade', '') }});">
+                    {{ rarity }}
+                </button>
+                {% endfor %}
+            </div>
+
+            {% for rarity in sorted_rarities %}
+            <div class="rarity-section mb-4" data-rarity="{{ rarity }}">
+                <div class="flex items-center gap-2 mb-2">
+                    <h3 class="display-font" style="color: var(--rarity-{{ rarity|lower|replace(' ', '-')|replace(' grade', '') }}); margin:0;">
+                        {{ rarity }}
                     </h3>
-                    
-                    <div class="items-grid-compact">
-                        {% for item in items_by_rarity[rarity] %}
-                        <div class="item-card-compact" style="border-left-color: var(--rarity-{{ item.rarity|lower|replace(' ', '-')|replace(' grade', '') }});">
-                            <img src="{{ item.image_url or '/static/placeholder.png' }}" 
+                    <span class="badge" style="background:var(--bg-card);color:var(--text-dim);">({{ items_by_rarity[rarity]|length }})</span>
+                </div>
+
+                <div class="grid grid-auto-sm">
+                    {% for item in items_by_rarity[rarity] %}
+                    <div class="card" style="border-left: 3px solid var(--rarity-{{ item.rarity|lower|replace(' ', '-')|replace(' grade', '') }});">
+                        <div class="flex flex-col items-center">
+                            <img src="{{ item.image_url or '/static/placeholder.png' }}"
                                  alt="{{ item.name }}"
-                                 onerror="this.src='/static/placeholder.png'">
-                            <div class="item-name-compact" title="{{ item.name }}">{{ item.name }}</div>
-                            <div class="item-meta-compact">
+                                 onerror="this.src='/static/placeholder.png'"
+                                 style="width:100%;height:100px;object-fit:contain;margin-bottom:6px;">
+                            <div class="truncate text-sm mb-2" title="{{ item.name }}" style="width:100%;">{{ item.name }}</div>
+                            <div class="flex justify-between w-full text-xs text-dim">
                                 <span>{{ item.type }}</span>
                                 <span title="Шанс">{{ "%.2f"|format(item.probability) }}%</span>
                             </div>
-                            <div class="item-meta-compact" style="margin-top: 3px;">
+                            <div class="flex w-full text-xs text-dim mt-1">
                                 <span title="Float диапазон">Float: {{ "%.2f"|format(item.min_float) }} - {{ "%.2f"|format(item.max_float) }}</span>
                             </div>
                             {% if item.min_price and item.max_price %}
-                            <div class="item-price-compact">
+                            <div class="display-font text-primary text-sm mt-2">
                                 {% if item.min_price == item.max_price %}
                                     {{ "%.0f"|format(item.min_price) }} ₽
                                 {% else %}
@@ -396,11 +356,11 @@
                             </div>
                             {% endif %}
                         </div>
-                        {% endfor %}
                     </div>
+                    {% endfor %}
                 </div>
-                {% endfor %}
             </div>
+            {% endfor %}
         </div>
     </main>
 
@@ -534,9 +494,9 @@
             const totalPrice = casePrice * currentOpenCount;
             const priceElement = document.getElementById('totalPriceDisplay');
             const openButton = document.getElementById('openButton');
-            if (priceElement) priceElement.innerHTML = `<span>Итого:</span> ${totalPrice.toLocaleString()} ₽`;
+            if (priceElement) priceElement.textContent = `${totalPrice.toLocaleString()} ₽`;
             if (openButton) {
-                openButton.style.background = userBalance < totalPrice ? 'var(--danger-color)' : 'var(--primary-color)';
+                openButton.style.background = userBalance < totalPrice ? 'var(--danger)' : '';
                 openButton.title = userBalance < totalPrice ? 'Недостаточно средств' : '';
             }
         }
@@ -1144,7 +1104,7 @@
                     <div class="no-topdrop-message">
                         <h3>😕 Увы, топ-дропа не оказалось</h3>
                         <p>Открыто ${currentOpenCount} кейсов, но ничего ценного не выпало.</p>
-                        <p style="color: var(--success-color);">💰 Шлак (${trashItems.length} предметов) автоматически продан.</p>
+                        <p style="color: var(--success);">💰 Шлак (${trashItems.length} предметов) автоматически продан.</p>
                         <button class="btn btn-primary" onclick="tryAgain()">🎲 Попробовать ещё</button>
                         <button class="btn btn-outline" onclick="resetCaseUI()">↻ Вернуться</button>
                     </div>
@@ -1161,7 +1121,7 @@
                         </div>
                     </div>
                     <div class="cards-grid" id="cardsGrid"></div>
-                    <div style="margin-top: 16px; text-align: center; color: var(--text-secondary);">
+                    <div style="margin-top: 16px; text-align: center; color: var(--text-dim);">
                         💰 Шлак (${trashItems.length} предметов) автоматически продан
                     </div>
                 `;
@@ -1458,449 +1418,449 @@
                 }).then(r => r.json()).then(data => {
                     if (!data.success) { resolve(null); return; }
                 
-                    const targetItem = data.results[0];
-                    const items = [];
-                    const totalItems = 32;
-                    const targetPos = 14;
-                
-                    for (let i = 0; i < totalItems; i++) {
-                        if (i === targetPos) items.push(targetItem);
-                        else items.push(caseItems[Math.floor(Math.random() * caseItems.length)]);
-                    }
-                
-                    track.innerHTML = '';
-                    items.forEach((item, idx) => {
-                        const div = document.createElement('div');
-                        div.className = 'scroll-item-full';
-                        if (idx === targetPos) div.classList.add('target-item');
+                        const targetItem = data.results[0];
+                        const items = [];
+                        const totalItems = 32;
+                        const targetPos = 14;
+                    
+                        for (let i = 0; i < totalItems; i++) {
+                            if (i === targetPos) items.push(targetItem);
+                            else items.push(caseItems[Math.floor(Math.random() * caseItems.length)]);
+                        }
+                    
+                        track.innerHTML = '';
+                        items.forEach((item, idx) => {
+                            const div = document.createElement('div');
+                            div.className = 'scroll-item-full';
+                            if (idx === targetPos) div.classList.add('target-item');
+                            
+                            const color = getRarityColor(item.rarity);
+                            div.style.borderColor = color;
+                            div.style.borderWidth = '2px';
+                            div.style.borderStyle = 'solid';
                         
-                        const color = getRarityColor(item.rarity);
-                        div.style.borderColor = color;
-                        div.style.borderWidth = '2px';
-                        div.style.borderStyle = 'solid';
+                            div.innerHTML = `
+                                <img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
+                                <div class="scroll-item-name-full" title="${item.name}">${item.name.substring(0, 25)}</div>
+                                <div class="scroll-item-rarity-full" style="color: ${color};">${item.rarity}</div>
+                            `;
+                            track.appendChild(div);
+                        });
                     
-                        div.innerHTML = `
-                            <img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
-                            <div class="scroll-item-name-full" title="${item.name}">${item.name.substring(0, 25)}</div>
-                            <div class="scroll-item-rarity-full" style="color: ${color};">${item.rarity}</div>
-                        `;
-                        track.appendChild(div);
-                    });
-                
-                    const container = track.parentElement;
-                    const containerWidth = container.offsetWidth;
-                    const dims = getItemDimensions(false);
-                    const itemTotalWidth = dims.itemWidth;
-                    const targetOffset = (containerWidth / 2) - (itemTotalWidth / 2);
-                    const finalPos = -(targetPos * itemTotalWidth) + targetOffset;
-                
-                    let currentPos = containerWidth + 100;
-                    track.style.transform = `translateX(${currentPos}px)`;
-                    track.style.willChange = 'transform';
+                        const container = track.parentElement;
+                        const containerWidth = container.offsetWidth;
+                        const dims = getItemDimensions(false);
+                        const itemTotalWidth = dims.itemWidth;
+                        const targetOffset = (containerWidth / 2) - (itemTotalWidth / 2);
+                        const finalPos = -(targetPos * itemTotalWidth) + targetOffset;
                     
-                    // Speed lines
-                    const speedLines = addSpeedLines(container);
-                    const duration = 7500;
-                    const startTime = performance.now();
-                    
-                    // Звук прокрутки: тик на каждом предмете
-                    let lastTickIndex = -1;
-                    
-                    function animate() {
-                        const now = performance.now();
-                        const elapsed = now - startTime;
-                        const progress = Math.min(elapsed / duration, 1);
-                        const easeOut = 1 - Math.pow(1 - progress, 3);
-                        
-                        const prevPos = currentPos;
-                        currentPos = (containerWidth + 100) - ((containerWidth + 100) - finalPos) * easeOut;
+                        let currentPos = containerWidth + 100;
                         track.style.transform = `translateX(${currentPos}px)`;
+                        track.style.willChange = 'transform';
                         
-                        // Звук: определяем какой предмет сейчас в центре
-                        const centerX = -currentPos + targetOffset + itemTotalWidth / 2;
-                        const tickIndex = Math.floor(centerX / itemTotalWidth);
-                        if (tickIndex >= 0 && tickIndex < totalItems && tickIndex !== lastTickIndex) {
-                            SoundManager.wheelSpin();
-                            lastTickIndex = tickIndex;
-                        }
-                    
-                        if (progress < 1) {
-                            requestAnimationFrame(animate);
-                        } else {
-                            track.style.transform = `translateX(${finalPos}px)`;
-                            track.style.willChange = 'auto';
-                            removeSpeedLines(speedLines);
+                        // Speed lines
+                        const speedLines = addSpeedLines(container);
+                        const duration = 7500;
+                        const startTime = performance.now();
+                        
+                        // Звук прокрутки: тик на каждом предмете
+                        let lastTickIndex = -1;
+                        
+                        function animate() {
+                            const now = performance.now();
+                            const elapsed = now - startTime;
+                            const progress = Math.min(elapsed / duration, 1);
+                            const easeOut = 1 - Math.pow(1 - progress, 3);
                             
-                            // Финальный звук
-                            const hasRare = ['Covert', 'Extraordinary', 'Rare Special Item'].includes(targetItem.rarity);
-                            const hasMid = ['Classified', 'Restricted'].includes(targetItem.rarity);
-                            if (hasRare) SoundManager.caseCovert();
-                            else if (hasMid) SoundManager.caseRare();
+                            const prevPos = currentPos;
+                            currentPos = (containerWidth + 100) - ((containerWidth + 100) - finalPos) * easeOut;
+                            track.style.transform = `translateX(${currentPos}px)`;
                             
-                            // Flash burst
-                            flashBurst(container, targetItem.rarity);
-                            particleBurst(container, targetItem.rarity, 24);
-                            
-                            const targetElement = track.querySelector('.target-item');
-                            if (targetElement) {
-                                targetElement.style.transition = 'all 0.3s ease';
-                                targetElement.style.transform = 'scale(1.08)';
-                                targetElement.style.boxShadow = `0 0 40px ${getRarityColor(targetItem.rarity)}, 0 0 80px ${getRarityColor(targetItem.rarity)}40`;
-                                targetElement.style.zIndex = '100';
-                                targetElement.style.borderWidth = '3px';
+                            // Звук: определяем какой предмет сейчас в центре
+                            const centerX = -currentPos + targetOffset + itemTotalWidth / 2;
+                            const tickIndex = Math.floor(centerX / itemTotalWidth);
+                            if (tickIndex >= 0 && tickIndex < totalItems && tickIndex !== lastTickIndex) {
+                                SoundManager.wheelSpin();
+                                lastTickIndex = tickIndex;
                             }
-                            
-                            setTimeout(() => resolve(data), 800);
-                        }
-                    }
-                    
-                    requestAnimationFrame(animate);
-                }).catch((err) => {
-                    console.error('Single scroll error:', err);
-                    resolve(null);
-                });
-            });
-        }
-        
-        function animateMiniScroll(track, index, preloadedResult) {
-            return new Promise((resolve) => {
-                if (preloadedResult) {
-                    // Используем предзагруженный результат (оптимизация)
-                    doAnimate({ success: true, results: [preloadedResult], new_balance: 0 });
-                    return;
-                }
-                const formData = new FormData();
-                formData.append('case_name', caseName);
-                formData.append('count', '1');
-                fetch('/web/api/cases/open/multiple', {
-                    method: 'POST',
-                    body: formData
-                }).then(r => r.json()).then(data => doAnimate(data)).catch(err => {
-                    console.error('Mini scroll error:', err);
-                    resolve(null);
-                });
-                function doAnimate(data) {
-                    if (!data || !data.success) { resolve(null); return; }
-                
-                    const targetItem = data.results[0];
-                    const items = [];
-                    const totalItems = 28;
-                    const targetPos = 11;
-                
-                    for (let i = 0; i < totalItems; i++) {
-                        if (i === targetPos) items.push(targetItem);
-                        else items.push(caseItems[Math.floor(Math.random() * caseItems.length)]);
-                    }
-                
-                    track.innerHTML = '';
-                    items.forEach((item, idx) => {
-                        const div = document.createElement('div');
-                        div.className = 'scroll-item-mini';
-                        if (idx === targetPos) div.classList.add('target-mini-item');
                         
-                        const color = getRarityColor(item.rarity);
-                        div.style.borderColor = color;
-                        div.style.borderWidth = '2px';
-                        div.style.borderStyle = 'solid';
-                    
-                        div.innerHTML = `
-                            <img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
-                            <div class="scroll-item-name-mini" title="${item.name}">${item.name.substring(0, 12)}</div>
-                        `;
-                        track.appendChild(div);
+                            if (progress < 1) {
+                                requestAnimationFrame(animate);
+                            } else {
+                                track.style.transform = `translateX(${finalPos}px)`;
+                                track.style.willChange = 'auto';
+                                removeSpeedLines(speedLines);
+                                
+                                // Финальный звук
+                                const hasRare = ['Covert', 'Extraordinary', 'Rare Special Item'].includes(targetItem.rarity);
+                                const hasMid = ['Classified', 'Restricted'].includes(targetItem.rarity);
+                                if (hasRare) SoundManager.caseCovert();
+                                else if (hasMid) SoundManager.caseRare();
+                                
+                                // Flash burst
+                                flashBurst(container, targetItem.rarity);
+                                particleBurst(container, targetItem.rarity, 24);
+                                
+                                const targetElement = track.querySelector('.target-item');
+                                if (targetElement) {
+                                    targetElement.style.transition = 'all 0.3s ease';
+                                    targetElement.style.transform = 'scale(1.08)';
+                                    targetElement.style.boxShadow = `0 0 40px ${getRarityColor(targetItem.rarity)}, 0 0 80px ${getRarityColor(targetItem.rarity)}40`;
+                                    targetElement.style.zIndex = '100';
+                                    targetElement.style.borderWidth = '3px';
+                                }
+                                
+                                setTimeout(() => resolve(data), 800);
+                            }
+                        }
+                        
+                        requestAnimationFrame(animate);
+                    }).catch((err) => {
+                        console.error('Single scroll error:', err);
+                        resolve(null);
                     });
-                
-                    const container = track.parentElement;
-                    const containerWidth = container.offsetWidth;
-                    const dims = getItemDimensions(true);
-                    const itemTotalWidth = dims.itemWidth;
-                    const targetOffset = (containerWidth / 2) - (itemTotalWidth / 2);
-                    const finalPos = -(targetPos * itemTotalWidth) + targetOffset;
-                
-                    let currentPos = containerWidth + 50;
-                    track.style.transform = `translateX(${currentPos}px)`;
-                    track.style.willChange = 'transform';
-                    
-                    // Staggered start
-                    const staggerDelay = (index || 0) * 120;
-                    const speedLines = addSpeedLines(container);
-                    const duration = 6000 + Math.random() * 1500;
-                    const startTime = performance.now() + staggerDelay;
-                    let started = false;
-                
-                    function animate() {
-                        const now = performance.now();
-                        const elapsed = now - startTime;
-                        
-                        if (elapsed < 0) {
-                            requestAnimationFrame(animate);
-                            return;
-                        }
-                        
-                        if (!started) {
-                            started = true;
-                        }
-                        
-                        const progress = Math.min(elapsed / duration, 1);
-                        const easeOut = 1 - Math.pow(1 - progress, 3);
-                        
-                        currentPos = (containerWidth + 50) - ((containerWidth + 50) - finalPos) * easeOut;
-                        track.style.transform = `translateX(${currentPos}px)`;
-                    
-                        if (progress < 1) {
-                            requestAnimationFrame(animate);
-                        } else {
-                            track.style.transform = `translateX(${finalPos}px)`;
-                            track.style.willChange = 'auto';
-                            removeSpeedLines(speedLines);
-                            
-                            // Effects (lighter for mini)
-                            flashBurst(container, targetItem.rarity);
-                            particleBurst(container, targetItem.rarity, 10);
-                            
-                            const targetElement = track.querySelector('.target-mini-item');
-                            if (targetElement) {
-                                targetElement.style.transition = 'all 0.3s ease';
-                                targetElement.style.transform = 'scale(1.1)';
-                                targetElement.style.boxShadow = `0 0 25px ${getRarityColor(targetItem.rarity)}`;
-                                targetElement.style.zIndex = '100';
-                            }
-                            
-                            setTimeout(() => resolve(data), 400);
-                        }
-                    }
-                    
-                    requestAnimationFrame(animate);
-                }
-            });
-        }
-        
-        function showResults(results) {
-            const resultsDiv = document.getElementById('openingResults');
-            
-            // Звук в зависимости от редкости
-            const rarities = results.map(r => r.rarity || '');
-            const hasRare = rarities.some(r => r === 'Covert' || r === 'Extraordinary' || r === 'Rare Special Item');
-            const hasRestricted = rarities.some(r => r === 'Classified' || r === 'Restricted');
-            if (hasRare) {
-                SoundManager.caseCovert();
-            } else if (hasRestricted) {
-                SoundManager.caseRare();
+                });
             }
             
-            const grouped = {};
-            results.forEach((item) => {
-                const key = item.name;
-                if (!grouped[key]) {
-                    grouped[key] = { ...item, count: 1 };
-                } else {
-                    grouped[key].count++;
+            function animateMiniScroll(track, index, preloadedResult) {
+                return new Promise((resolve) => {
+                    if (preloadedResult) {
+                        // Используем предзагруженный результат (оптимизация)
+                        doAnimate({ success: true, results: [preloadedResult], new_balance: 0 });
+                        return;
+                    }
+                    const formData = new FormData();
+                    formData.append('case_name', caseName);
+                    formData.append('count', '1');
+                    fetch('/web/api/cases/open/multiple', {
+                        method: 'POST',
+                        body: formData
+                    }).then(r => r.json()).then(data => doAnimate(data)).catch(err => {
+                        console.error('Mini scroll error:', err);
+                        resolve(null);
+                    });
+                    function doAnimate(data) {
+                        if (!data || !data.success) { resolve(null); return; }
+                    
+                        const targetItem = data.results[0];
+                        const items = [];
+                        const totalItems = 28;
+                        const targetPos = 11;
+                    
+                        for (let i = 0; i < totalItems; i++) {
+                            if (i === targetPos) items.push(targetItem);
+                            else items.push(caseItems[Math.floor(Math.random() * caseItems.length)]);
+                        }
+                    
+                        track.innerHTML = '';
+                        items.forEach((item, idx) => {
+                            const div = document.createElement('div');
+                            div.className = 'scroll-item-mini';
+                            if (idx === targetPos) div.classList.add('target-mini-item');
+                            
+                            const color = getRarityColor(item.rarity);
+                            div.style.borderColor = color;
+                            div.style.borderWidth = '2px';
+                            div.style.borderStyle = 'solid';
+                        
+                            div.innerHTML = `
+                                <img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
+                                <div class="scroll-item-name-mini" title="${item.name}">${item.name.substring(0, 12)}</div>
+                            `;
+                            track.appendChild(div);
+                        });
+                    
+                        const container = track.parentElement;
+                        const containerWidth = container.offsetWidth;
+                        const dims = getItemDimensions(true);
+                        const itemTotalWidth = dims.itemWidth;
+                        const targetOffset = (containerWidth / 2) - (itemTotalWidth / 2);
+                        const finalPos = -(targetPos * itemTotalWidth) + targetOffset;
+                    
+                        let currentPos = containerWidth + 50;
+                        track.style.transform = `translateX(${currentPos}px)`;
+                        track.style.willChange = 'transform';
+                        
+                        // Staggered start
+                        const staggerDelay = (index || 0) * 120;
+                        const speedLines = addSpeedLines(container);
+                        const duration = 6000 + Math.random() * 1500;
+                        const startTime = performance.now() + staggerDelay;
+                        let started = false;
+                    
+                        function animate() {
+                            const now = performance.now();
+                            const elapsed = now - startTime;
+                            
+                            if (elapsed < 0) {
+                                requestAnimationFrame(animate);
+                                return;
+                            }
+                            
+                            if (!started) {
+                                started = true;
+                            }
+                            
+                            const progress = Math.min(elapsed / duration, 1);
+                            const easeOut = 1 - Math.pow(1 - progress, 3);
+                            
+                            currentPos = (containerWidth + 50) - ((containerWidth + 50) - finalPos) * easeOut;
+                            track.style.transform = `translateX(${currentPos}px)`;
+                        
+                            if (progress < 1) {
+                                requestAnimationFrame(animate);
+                            } else {
+                                track.style.transform = `translateX(${finalPos}px)`;
+                                track.style.willChange = 'auto';
+                                removeSpeedLines(speedLines);
+                                
+                                // Effects (lighter for mini)
+                                flashBurst(container, targetItem.rarity);
+                                particleBurst(container, targetItem.rarity, 10);
+                                
+                                const targetElement = track.querySelector('.target-mini-item');
+                                if (targetElement) {
+                                    targetElement.style.transition = 'all 0.3s ease';
+                                    targetElement.style.transform = 'scale(1.1)';
+                                    targetElement.style.boxShadow = `0 0 25px ${getRarityColor(targetItem.rarity)}`;
+                                    targetElement.style.zIndex = '100';
+                                }
+                                
+                                setTimeout(() => resolve(data), 400);
+                            }
+                        }
+                        
+                        requestAnimationFrame(animate);
+                    }
+                });
+            }
+            
+            function showResults(results) {
+                const resultsDiv = document.getElementById('openingResults');
+                
+                // Звук в зависимости от редкости
+                const rarities = results.map(r => r.rarity || '');
+                const hasRare = rarities.some(r => r === 'Covert' || r === 'Extraordinary' || r === 'Rare Special Item');
+                const hasRestricted = rarities.some(r => r === 'Classified' || r === 'Restricted');
+                if (hasRare) {
+                    SoundManager.caseCovert();
+                } else if (hasRestricted) {
+                    SoundManager.caseRare();
                 }
-            });
-            
-            let totalValue = results.reduce((sum, item) => sum + (item.price || 100), 0);
-            
-            let html = `
-                <div class="case-results-header">
-                    <div class="case-results-title">🎉 Получено (${results.length})</div>
-                    <div class="case-results-actions">
-                        <button class="btn btn-success btn-sm" onclick="sellAllResults()">
-                            💰 Продать всё (${totalValue.toLocaleString()} ₽)
-                        </button>
-                        <button class="btn btn-outline btn-sm" onclick="resetCaseUI()">↻ Ещё</button>
-                    </div>
-                </div>
-                <div class="results-grid-enhanced" id="resultsGridEnhanced">
-            `;
-            
-            Object.values(grouped).forEach((item, idx) => {
-                const color = getRarityColor(item.rarity);
-                html += `
-                    <div class="result-card-enhanced" style="animation-delay: ${idx * 0.06}s; --glow: ${color};">
-                        <div class="result-card-glow" style="background: radial-gradient(ellipse at center, ${color}20, transparent 70%);"></div>
-                        <img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
-                        <div class="result-card-body">
-                            <div class="result-name-enhanced" title="${item.name}">${item.name}</div>
-                            <div class="result-meta-enhanced">
-                                <span style="color: ${color};">${item.rarity}</span>
-                            </div>
-                            <div class="result-footer-enhanced">
-                                <span class="result-price-enhanced">${(item.price || 100).toLocaleString()} ₽</span>
-                                <button class="btn-sell-result" onclick="sellResultItem(${item.id})">Продать</button>
-                            </div>
+                
+                const grouped = {};
+                results.forEach((item) => {
+                    const key = item.name;
+                    if (!grouped[key]) {
+                        grouped[key] = { ...item, count: 1 };
+                    } else {
+                        grouped[key].count++;
+                    }
+                });
+                
+                let totalValue = results.reduce((sum, item) => sum + (item.price || 100), 0);
+                
+                let html = `
+                    <div class="case-results-header">
+                        <div class="case-results-title">🎉 Получено (${results.length})</div>
+                        <div class="case-results-actions">
+                            <button class="btn btn-success btn-sm" onclick="sellAllResults()">
+                                💰 Продать всё (${totalValue.toLocaleString()} ₽)
+                            </button>
+                            <button class="btn btn-outline btn-sm" onclick="resetCaseUI()">↻ Ещё</button>
                         </div>
-                        ${item.count > 1 ? `<span class="result-count-badge">x${item.count}</span>` : ''}
                     </div>
+                    <div class="results-grid-enhanced" id="resultsGridEnhanced">
                 `;
-            });
-            
-            html += `</div>`;
-            
-            resultsDiv.innerHTML = html;
-            resultsDiv.style.display = 'block';
-            
-            // Stagger appear animation
-            document.querySelectorAll('.result-card-enhanced').forEach((card, i) => {
-                card.style.animation = 'none';
-                card.offsetHeight;
-                card.style.animation = `fadeInUp 0.4s ease-out forwards`;
-                card.style.animationDelay = `${i * 0.06}s`;
-            });
-        }
-        
-        async function sellResultItem(itemId) {
-            if (!confirm('Продать этот предмет?')) return;
-            
-            try {
-                const response = await fetch('/web/api/inventory/items');
-                const items = await response.json();
-                const inventoryItem = items.find(i => i.item_id === itemId);
                 
-                if (!inventoryItem) {
-                    alert('Предмет не найден в инвентаре');
+                Object.values(grouped).forEach((item, idx) => {
+                    const color = getRarityColor(item.rarity);
+                    html += `
+                        <div class="result-card-enhanced" style="animation-delay: ${idx * 0.06}s; --glow: ${color};">
+                            <div class="result-card-glow" style="background: radial-gradient(ellipse at center, ${color}20, transparent 70%);"></div>
+                            <img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
+                            <div class="result-card-body">
+                                <div class="result-name-enhanced" title="${item.name}">${item.name}</div>
+                                <div class="result-meta-enhanced">
+                                    <span style="color: ${color};">${item.rarity}</span>
+                                </div>
+                                <div class="result-footer-enhanced">
+                                    <span class="result-price-enhanced">${(item.price || 100).toLocaleString()} ₽</span>
+                                    <button class="btn-sell-result" onclick="sellResultItem(${item.id})">Продать</button>
+                                </div>
+                            </div>
+                            ${item.count > 1 ? `<span class="result-count-badge">x${item.count}</span>` : ''}
+                        </div>
+                    `;
+                });
+                
+                html += `</div>`;
+                
+                resultsDiv.innerHTML = html;
+                resultsDiv.style.display = 'block';
+                
+                // Stagger appear animation
+                document.querySelectorAll('.result-card-enhanced').forEach((card, i) => {
+                    card.style.animation = 'none';
+                    card.offsetHeight;
+                    card.style.animation = `fadeInUp 0.4s ease-out forwards`;
+                    card.style.animationDelay = `${i * 0.06}s`;
+                });
+            }
+            
+            async function sellResultItem(itemId) {
+                if (!confirm('Продать этот предмет?')) return;
+                
+                try {
+                    const response = await fetch('/web/api/inventory/items');
+                    const items = await response.json();
+                    const inventoryItem = items.find(i => i.item_id === itemId);
+                    
+                    if (!inventoryItem) {
+                        alert('Предмет не найден в инвентаре');
+                        return;
+                    }
+                    
+                    const formData = new FormData();
+                    formData.append('inventory_id', inventoryItem.id);
+                    
+                    const sellResponse = await fetch('/web/api/inventory/sell', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    
+                    const data = await sellResponse.json();
+                    
+                    if (data.success) {
+                        await refreshUserBalance();
+                        await refreshInventoryAjax();
+                        // Remove the sold item card from display
+                        const cards = document.querySelectorAll('.result-card-enhanced');
+                        for (const card of cards) {
+                            const btn = card.querySelector('.btn-sell-result');
+                            if (btn && btn.getAttribute('onclick')?.includes(itemId)) {
+                                card.style.transition = 'all 0.3s ease';
+                                card.style.opacity = '0';
+                                card.style.transform = 'scale(0.8)';
+                                setTimeout(() => card.remove(), 300);
+                                break;
+                            }
+                        }
+                    } else {
+                        alert(data.error || 'Ошибка при продаже');
+                    }
+                } catch (error) {
+                    alert('Ошибка соединения');
+                }
+            }
+
+            async function sellAllResults() {
+                if (!window.lastOpenedItems || window.lastOpenedItems.length === 0) {
+                    alert('Нет предметов для продажи');
                     return;
                 }
                 
-                const formData = new FormData();
-                formData.append('inventory_id', inventoryItem.id);
+                const total = window.lastOpenedItems.reduce((sum, i) => sum + (i.price || 100), 0);
+                if (!confirm(`Продать все выпавшие предметы за ${total.toLocaleString()} ₽?`)) return;
                 
-                const sellResponse = await fetch('/web/api/inventory/sell', {
-                    method: 'POST',
-                    body: formData
-                });
-                
-                const data = await sellResponse.json();
-                
-                if (data.success) {
-                    await refreshUserBalance();
-                    await refreshInventoryAjax();
-                    // Remove the sold item card from display
-                    const cards = document.querySelectorAll('.result-card-enhanced');
-                    for (const card of cards) {
-                        const btn = card.querySelector('.btn-sell-result');
-                        if (btn && btn.getAttribute('onclick')?.includes(itemId)) {
-                            card.style.transition = 'all 0.3s ease';
-                            card.style.opacity = '0';
-                            card.style.transform = 'scale(0.8)';
-                            setTimeout(() => card.remove(), 300);
-                            break;
+                try {
+                    const response = await fetch('/web/api/inventory/items');
+                    const items = await response.json();
+                    
+                    const inventoryIds = [];
+                    for (const resultItem of window.lastOpenedItems) {
+                        const invItem = items.find(i => i.item_id === resultItem.id && 
+                                                       Math.abs(i.float - resultItem.float) < 0.001);
+                        if (invItem) {
+                            inventoryIds.push(invItem.id);
                         }
                     }
-                } else {
-                    alert(data.error || 'Ошибка при продаже');
-                }
-            } catch (error) {
-                alert('Ошибка соединения');
-            }
-        }
-
-        async function sellAllResults() {
-            if (!window.lastOpenedItems || window.lastOpenedItems.length === 0) {
-                alert('Нет предметов для продажи');
-                return;
-            }
-            
-            const total = window.lastOpenedItems.reduce((sum, i) => sum + (i.price || 100), 0);
-            if (!confirm(`Продать все выпавшие предметы за ${total.toLocaleString()} ₽?`)) return;
-            
-            try {
-                const response = await fetch('/web/api/inventory/items');
-                const items = await response.json();
-                
-                const inventoryIds = [];
-                for (const resultItem of window.lastOpenedItems) {
-                    const invItem = items.find(i => i.item_id === resultItem.id && 
-                                                   Math.abs(i.float - resultItem.float) < 0.001);
-                    if (invItem) {
-                        inventoryIds.push(invItem.id);
+                    
+                    if (inventoryIds.length === 0) {
+                        alert('Предметы не найдены в инвентаре');
+                        return;
                     }
-                }
-                
-                if (inventoryIds.length === 0) {
-                    alert('Предметы не найдены в инвентаре');
-                    return;
-                }
-                
-                const formData = new FormData();
-                formData.append('inventory_ids', JSON.stringify(inventoryIds));
-                
-                const sellResponse = await fetch('/web/api/inventory/sell/bulk', {
-                    method: 'POST',
-                    body: formData
-                });
-                
-                const data = await sellResponse.json();
+                    
+                    const formData = new FormData();
+                    formData.append('inventory_ids', JSON.stringify(inventoryIds));
+                    
+                    const sellResponse = await fetch('/web/api/inventory/sell/bulk', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    
+                    const data = await sellResponse.json();
 
-                if (data.success) {
-                    await refreshUserBalance();
-                    await refreshInventoryAjax();
-                    // Clear results and reset UI
-                    const resultsDiv = document.getElementById('openingResults');
-                    resultsDiv.style.display = 'none';
-                    resultsDiv.innerHTML = '';
-                    window.lastOpenedItems = [];
-                } else {
-                    alert(data.error || 'Ошибка при продаже');
+                    if (data.success) {
+                        await refreshUserBalance();
+                        await refreshInventoryAjax();
+                        // Clear results and reset UI
+                        const resultsDiv = document.getElementById('openingResults');
+                        resultsDiv.style.display = 'none';
+                        resultsDiv.innerHTML = '';
+                        window.lastOpenedItems = [];
+                    } else {
+                        alert(data.error || 'Ошибка при продаже');
+                    }
+                } catch (error) {
+                    alert('Ошибка соединения');
                 }
-            } catch (error) {
-                alert('Ошибка соединения');
             }
-        }
-        
-        function filterItems(rarity) {
-            document.querySelectorAll('.filter-btn').forEach(btn => btn.classList.remove('active'));
-            event.target.classList.add('active');
-            document.querySelectorAll('.rarity-section').forEach(section => {
-                section.style.display = (rarity === 'all' || section.dataset.rarity === rarity) ? 'block' : 'none';
-            });
-        }
-        
-        async function logout() {
-            await fetch('/web/api/auth/logout', { method: 'POST' });
-            window.location.href = '/';
-        }
-        
-        window.addEventListener('resize', () => {
-            if (!isOpening) {
-                updatePriceDisplay();
-            }
-        });
-        
-        document.addEventListener('DOMContentLoaded', () => {
-            initCountButtons();
-            updatePriceDisplay();
-            initSlotUI();
-            // Hide fast button for farm cases
-            if (isFarmCase) {
-                const fastBtn = document.getElementById('fastOpenButton');
-                if (fastBtn) fastBtn.style.display = 'none';
-            }
-        });
-    </script>
-    <script src="/static/js/sounds.js"></script>
-    <script src="/static/js/websocket.js"></script>
-    <script src="/static/js/safemode.js"></script>
-    <script>
-        function handleAchievements(data) {
-            if (data && data.achievements_unlocked && Array.isArray(data.achievements_unlocked) && data.achievements_unlocked.length > 0) {
-                data.achievements_unlocked.forEach(ach => {
-                    const title = ach.title || ach.name || 'Достижение';
-                    const reward = ach.reward || '';
-                    showAchievementPopup(title, reward);
+            
+            function filterItems(rarity) {
+                document.querySelectorAll('.filter-chip').forEach(btn => btn.classList.remove('active'));
+                event.target.classList.add('active');
+                document.querySelectorAll('.rarity-section').forEach(section => {
+                    section.style.display = (rarity === 'all' || section.dataset.rarity === rarity) ? 'block' : 'none';
                 });
             }
-        }
-    </script>
-    <script>
-        function toggleSound() {
-            const enabled = SoundManager.toggle();
-            document.getElementById('soundToggle').textContent = enabled ? '🔊' : '🔇';
-        }
-        document.addEventListener('DOMContentLoaded', () => {
-            const btn = document.getElementById('soundToggle');
-            if (btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇';
-        });
-    </script>
-{% if user %}{% include '_activity_sidebar.html' %}{% endif %}
-</body>
-</html>
\ No newline at end of file
+            
+            async function logout() {
+                await fetch('/web/api/auth/logout', { method: 'POST' });
+                window.location.href = '/';
+            }
+            
+            window.addEventListener('resize', () => {
+                if (!isOpening) {
+                    updatePriceDisplay();
+                }
+            });
+            
+            document.addEventListener('DOMContentLoaded', () => {
+                initCountButtons();
+                updatePriceDisplay();
+                initSlotUI();
+                // Hide fast button for farm cases
+                if (isFarmCase) {
+                    const fastBtn = document.getElementById('fastOpenButton');
+                    if (fastBtn) fastBtn.style.display = 'none';
+                }
+            });
+        </script>
+        <script src="/static/js/sounds.js"></script>
+        <script src="/static/js/websocket.js"></script>
+        <script src="/static/js/safemode.js"></script>
+        <script>
+            function handleAchievements(data) {
+                if (data && data.achievements_unlocked && Array.isArray(data.achievements_unlocked) && data.achievements_unlocked.length > 0) {
+                    data.achievements_unlocked.forEach(ach => {
+                        const title = ach.title || ach.name || 'Достижение';
+                        const reward = ach.reward || '';
+                        showAchievementPopup(title, reward);
+                    });
+                }
+            }
+        </script>
+        <script>
+            function toggleSound() {
+                const enabled = SoundManager.toggle();
+                document.getElementById('soundToggle').textContent = enabled ? '🔊' : '🔇';
+            }
+            document.addEventListener('DOMContentLoaded', () => {
+                const btn = document.getElementById('soundToggle');
+                if (btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇';
+            });
+        </script>
+    {% if user %}{% include '_activity_sidebar.html' %}{% endif %}
+    </body>
+    </html>
diff --git a/templates/cases.html b/templates/cases.html
index 68a4bc2..5f4ec81 100644
--- a/templates/cases.html
+++ b/templates/cases.html
@@ -3,181 +3,33 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Кейсы - CS2 Simulator</title>
+    <title>Кейсы — CS2 Simulator</title>
     <link rel="stylesheet" href="/static/css/style.css">
-    <style>
-        .cases-sections {
-            display: flex;
-            flex-direction: column;
-            gap: 2rem;
-        }
-        
-        .cases-container h1 {
-            font-size: 1.5rem;
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-bottom: 0.25rem;
-        }
-        
-        .section-tab {
-            font-size: 1.1rem;
-            margin-bottom: 0.75rem;
-            padding-bottom: 0.4rem;
-            border-bottom: 2px solid var(--primary-color);
-            display: inline-block;
-            font-family: 'Russo One', sans-serif;
-            text-transform: uppercase;
-            letter-spacing: 0.04em;
-        }
-        
-        .section-cases {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-            gap: 1.5rem;
-        }
-        
-        .case-card-new {
-            background: var(--bg-card);
-            border-radius: 12px;
-            overflow: hidden;
-            transition: all 0.3s;
-            text-decoration: none;
-            color: inherit;
-            display: block;
-            border: 1px solid var(--border-color);
-        }
-        
-        .case-card-new:hover {
-            transform: translateY(-4px);
-            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-            border-color: var(--primary-color);
-        }
-        
-        .case-image {
-            width: 100%;
-            height: 150px;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-        }
-        
-        .case-image img {
-            max-width: 80%;
-            max-height: 120px;
-            object-fit: contain;
-        }
-        
-        .case-price-badge {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: var(--bg-dark);
-            padding: 0.25rem 0.75rem;
-            border-radius: 20px;
-            font-size: 0.9rem;
-            font-weight: bold;
-            color: var(--success-color);
-            border: 1px solid var(--success-color);
-        }
-        
-        .case-info {
-            padding: 1rem;
-        }
-        
-        .case-title {
-            font-size: 1.1rem;
-            font-weight: 600;
-            margin-bottom: 0.5rem;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        
-        .case-description {
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            margin-bottom: 0.75rem;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
-            overflow: hidden;
-        }
-        
-        .case-stats {
-            display: flex;
-            justify-content: space-between;
-            font-size: 0.8rem;
-            color: var(--text-secondary);
-            margin-bottom: 0.75rem;
-        }
-        
-        .case-rarities-mini {
-            display: flex;
-            gap: 0.25rem;
-            flex-wrap: wrap;
-        }
-        
-        .rarity-dot {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-        }
-        
-        .case-footer {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding-top: 0.75rem;
-            border-top: 1px solid var(--border-color);
-        }
-        
-        .case-price {
-            font-weight: bold;
-            color: var(--success-color);
-        }
-        
-        .btn-open {
-            padding: 0.4rem 1rem;
-            background: var(--primary-color);
-            color: white;
-            border: none;
-            border-radius: 6px;
-            cursor: pointer;
-            font-size: 0.85rem;
-            transition: all 0.2s;
-        }
-        
-        .btn-open:hover {
-            background: var(--primary-hover);
-        }
-    </style>
 </head>
 <body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
                 {% if user %}
-                <a href="/cases" class="nav-link">Кейсы</a>
+                <a href="/cases" class="nav-link active">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/crash" class="nav-link">💥 Crash</a>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/crash" class="nav-link">Crash</a>
                 <a href="/inventory" class="nav-link">Инвентарь</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
-                <a href="/achievements" class="nav-link">🏆 Достижения</a>
+                <a href="/activity" class="nav-link">Лента</a>
+                <a href="/achievements" class="nav-link">Достижения</a>
                 <a href="/profile" class="nav-link">Профиль</a>
                 <span class="user-balance">{{ "%.2f"|format(user.balance) }} ₽</span>
-                <button onclick="toggleSound()" class="btn btn-outline" id="soundToggle" title="Звук">🔊</button>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
-                <button onclick="logout()" class="btn btn-outline">Выйти</button>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <button onclick="logout()" class="btn btn-ghost">Выйти</button>
                 {% else %}
-                <a href="/cases" class="nav-link">Кейсы</a>
+                <a href="/cases" class="nav-link active">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/activity" class="nav-link">Лента</a>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
                 <a href="/login" class="btn btn-outline">Войти</a>
                 <a href="/register" class="btn btn-primary">Регистрация</a>
                 {% endif %}
@@ -185,62 +37,54 @@
         </div>
     </nav>
 
-    <main class="cases-container">
+    <main class="section">
         <div class="container">
-            <h1>📦 Кейсы</h1>
-            <p class="page-subtitle">Выберите кейс для открытия</p>
-            
-            <div class="cases-sections">
-                {% for section in sections %}
-                <div class="section-block">
-                    <h2 class="section-tab">{{ section.tab }}</h2>
-                    <div class="section-cases">
-                        {% for case in section.cases %}
-                        <a href="/case/{{ case.name|urlencode }}" class="case-card-new">
-                            <div class="case-image">
-                                {% if case.image_url %}
-                                <img src="{{ case.image_url }}" alt="{{ case.display_name }}" onerror="this.src='/static/placeholder.png'">
-                                {% else %}
-                                <span style="font-size: 3rem;">📦</span>
-                                {% endif %}
-                                <span class="case-price-badge">{{ "%.0f"|format(case.price) }} ₽</span>
-                            </div>
-                            <div class="case-info">
-                                <div class="case-title">{{ case.display_name }}</div>
-                                {% if case.description %}
-                                <div class="case-description">{{ case.description }}</div>
-                                {% endif %}
-                                <div class="case-stats">
-                                    <span>{{ case.items_count }} предметов</span>
-                                    <div class="case-rarities-mini">
-                                        {% for rarity in case.rarities[:4] %}
-                                        <span class="rarity-dot" style="background: var(--rarity-{{ rarity|lower|replace(' ', '-')|replace(' grade', '') }});" title="{{ rarity }}"></span>
-                                        {% endfor %}
-                                        {% if case.rarities|length > 4 %}
-                                        <span style="font-size: 0.7rem;">+{{ case.rarities|length - 4 }}</span>
-                                        {% endif %}
-                                    </div>
-                                </div>
-                                <div class="case-footer">
-                                    <span class="case-price">{{ "%.0f"|format(case.price) }} ₽</span>
-                                    <span class="btn-open">Открыть</span>
-                                </div>
-                            </div>
-                        </a>
-                        {% endfor %}
-                    </div>
-                </div>
-                {% endfor %}
+            <div class="section-header">
+                <h1 class="section-title">📦 Кейсы</h1>
+                <p class="section-subtitle">Выберите кейс для открытия</p>
             </div>
+
+            {% for section in sections %}
+            <div style="margin-bottom:2rem;">
+                <div class="display-font" style="font-size:0.9rem;margin-bottom:0.75rem;color:var(--primary);letter-spacing:0.04em;">{{ section.tab }}</div>
+                <div class="grid grid-auto">
+                    {% for case in section.cases %}
+                    <a href="/case/{{ case.name|urlencode }}" class="case-card">
+                        <div class="case-card-image">
+                            {% if case.image_url %}
+                            <img src="{{ case.image_url }}" alt="{{ case.display_name }}" onerror="this.src='/static/placeholder.png'">
+                            {% else %}
+                            <span style="font-size:2.5rem;opacity:0.6;">📦</span>
+                            {% endif %}
+                        </div>
+                        <div class="case-card-body">
+                            <div class="case-card-name">{{ case.display_name }}</div>
+                            {% if case.description %}
+                            <div class="case-card-desc">{{ case.description }}</div>
+                            {% endif %}
+                        </div>
+                        <div class="case-card-footer">
+                            <div class="case-card-price">
+                                {{ "%.0f"|format(case.price) }} ₽
+                                <span>шт.</span>
+                            </div>
+                            <div class="case-card-rarity">
+                                {% for rarity in case.rarities[:4] %}
+                                <span class="case-card-rarity-dot" style="background:var(--rarity-{{ rarity|lower|replace(' ', '-')|replace(' grade', '') }});"></span>
+                                {% endfor %}
+                                {% if case.rarities|length > 4 %}
+                                <span class="text-xs text-dim">+{{ case.rarities|length - 4 }}</span>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </a>
+                    {% endfor %}
+                </div>
+            </div>
+            {% endfor %}
         </div>
     </main>
 
-    <script>
-        async function logout() {
-            await fetch('/web/api/auth/logout', { method: 'POST' });
-            window.location.href = '/';
-        }
-    </script>
     <script src="/static/js/sounds.js"></script>
     <script src="/static/js/websocket.js"></script>
     <script src="/static/js/safemode.js"></script>
@@ -256,4 +100,4 @@
     </script>
 {% if user %}{% include '_activity_sidebar.html' %}{% endif %}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/contracts.html b/templates/contracts.html
index d9ea34e..c94e297 100644
--- a/templates/contracts.html
+++ b/templates/contracts.html
@@ -9,25 +9,25 @@
 <body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
                 {% if user %}
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link active">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/crash" class="nav-link">💥 Crash</a>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/crash" class="nav-link">Crash</a>
                 <a href="/inventory" class="nav-link">Инвентарь</a>
-                <a href="/achievements" class="nav-link">🏆 Достижения</a>
+                <a href="/achievements" class="nav-link">Достижения</a>
                 <a href="/profile" class="nav-link">Профиль</a>
                 <span class="user-balance">{{ "%.0f"|format(user.balance) }} ₽</span>
-                <button onclick="toggleSound()" class="btn btn-outline" id="soundToggle">🔊</button>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle">🎙️</button>
-                <button onclick="logout()" class="btn btn-outline">Выйти</button>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <button onclick="logout()" class="btn btn-ghost">Выйти</button>
                 {% else %}
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link active">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle">🎙️</button>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
                 <a href="/login" class="btn btn-outline">Войти</a>
                 <a href="/register" class="btn btn-primary">Регистрация</a>
                 {% endif %}
@@ -35,445 +35,150 @@
         </div>
     </nav>
 
-    <style>
-        .ct-page { max-width: 1100px; margin: 0 auto; padding: 1rem 1.5rem 3rem; }
-        .ct-header { text-align: center; margin-bottom: 1.5rem; }
-        .ct-header h1 { font-size: 1.6rem; font-family: 'Russo One', sans-serif; letter-spacing: 0.05em; }
-        .ct-header h1 span { color: var(--primary-color); }
-        .ct-header p { color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.2rem; }
-
-        /* ─── Two-panel layout ─── */
-        .ct-layout {
-            display: grid;
-            grid-template-columns: 1fr 280px;
-            gap: 1rem;
-            align-items: start;
-        }
-        @media(max-width:800px){
-            .ct-layout{grid-template-columns:1fr}
-            .ct-sel-panel{order:-1}
-        }
-
-        /* ─── Left: Inventory panel ─── */
-        .ct-inv-panel {
-            background: rgba(20,21,26,0.5);
-            border: 1px solid var(--border-color);
-            border-radius: 14px;
-            overflow: hidden;
-        }
-        .ct-inv-toolbar {
-            display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
-            padding: 0.75rem 1rem;
-            border-bottom: 1px solid var(--border-color);
-            background: rgba(0,0,0,0.15);
-        }
-        .ct-inv-toolbar select, .ct-inv-toolbar input {
-            background: rgba(0,0,0,0.3);
-            border: 1px solid var(--border-color);
-            border-radius: 6px;
-            color: white;
-            padding: 0.35rem 0.6rem;
-            font-size: 0.78rem;
-            outline: none;
-            transition: border-color 0.2s;
-        }
-        .ct-inv-toolbar select:focus, .ct-inv-toolbar input:focus {
-            border-color: var(--primary-color);
-        }
-        .ct-inv-toolbar input {
-            flex: 1; min-width: 100px;
-        }
-
-        .ct-inv-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-            gap: 0.5rem;
-            padding: 0.75rem;
-            max-height: 560px;
-            overflow-y: auto;
-        }
-        .ct-inv-grid::-webkit-scrollbar { width: 4px; }
-        .ct-inv-grid::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }
-
-        .ct-card {
-            position: relative;
-            background: rgba(0,0,0,0.2);
-            border: 2px solid transparent;
-            border-radius: 8px;
-            padding: 0.5rem 0.4rem;
-            cursor: pointer;
-            transition: all 0.2s cubic-bezier(0.34,1.56,0.64,1);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 0.2rem;
-            user-select: none;
-            animation: ctCardIn 0.25s ease both;
-        }
-        @keyframes ctCardIn { from{opacity:0;transform:translateY(8px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
-        .ct-card:hover { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); }
-        .ct-card:active { transform: scale(0.96); }
-        .ct-card img {
-            width: 100%; height: 56px;
-            object-fit: contain; pointer-events: none;
-            transition: transform 0.3s;
-        }
-        .ct-card:hover img { transform: scale(1.06); }
-        .ct-card .ct-name {
-            font-size: 0.6rem; text-align: center; line-height: 1.1;
-            overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
-        }
-        .ct-card .ct-float { font-size: 0.55rem; color: var(--text-secondary); }
-
-        .ct-card.selected {
-            border-color: var(--success-color);
-            background: rgba(16,185,129,0.08);
-        }
-        .ct-card.spent {
-            opacity: 0.2;
-            cursor: not-allowed;
-            filter: grayscale(0.8);
-            pointer-events: none;
-        }
-        .ct-card.spent::after {
-            content: '✔';
-            position: absolute; top: 4px; right: 4px;
-            font-size: 0.65rem; color: var(--success-color);
-            font-weight: 800;
-        }
-        .ct-card.blocked {
-            opacity: 0.25;
-            cursor: not-allowed;
-            filter: grayscale(0.8);
-        }
-        .ct-card.knife-item { border-color: rgba(255,215,0,0.12); }
-        .ct-card .ct-knife-badge {
-            position: absolute; top: 3px; left: 3px;
-            font-size: 0.55rem; padding: 0.05rem 0.25rem;
-            background: rgba(255,215,0,0.15); color: #ffd700;
-            border-radius: 3px; font-weight: 700;
-        }
-
-        /* ─── Right: Selection panel ─── */
-        .ct-sel-panel {
-            background: rgba(20,21,26,0.5);
-            border: 1px solid var(--border-color);
-            border-radius: 14px;
-            padding: 1rem;
-            position: sticky; top: 80px;
-            min-height: 300px;
-        }
-        .ct-sel-header {
-            display: flex; align-items: center; justify-content: space-between;
-            margin-bottom: 1rem;
-        }
-        .ct-sel-header h3 {
-            font-family: 'Russo One', sans-serif;
-            font-size: 0.9rem;
-            letter-spacing: 0.04em;
-        }
-        .ct-sel-header .ct-sel-count {
-            font-size: 1.3rem;
-            font-weight: 800;
-            font-family: 'Russo One', sans-serif;
-            color: var(--primary-color);
-        }
-        .ct-sel-count.full { color: var(--success-color); }
-
-        .ct-sel-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 0.4rem;
-            margin-bottom: 1rem;
-        }
-        .ct-sel-slot {
-            background: rgba(0,0,0,0.15);
-            border: 1px dashed rgba(255,255,255,0.06);
-            border-radius: 8px;
-            padding: 0.35rem;
-            min-height: 52px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 0.1rem;
-            transition: all 0.3s;
-            position: relative;
-        }
-        .ct-sel-slot.fill {
-            border-color: rgba(255,255,255,0.1);
-            border-style: solid;
-            background: rgba(255,255,255,0.02);
-        }
-        .ct-sel-slot img {
-            width: 100%; height: 28px;
-            object-fit: contain;
-        }
-        .ct-sel-slot .s-name {
-            font-size: 0.48rem; text-align: center; line-height: 1.05;
-            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;
-        }
-        .ct-sel-slot .s-remove {
-            position: absolute; top: 1px; right: 1px;
-            width: 16px; height: 16px; border-radius: 50%;
-            background: rgba(239,68,68,0.8); color: white;
-            border: none; font-size: 0.55rem; cursor: pointer;
-            display: none; align-items: center; justify-content: center;
-            line-height: 1;
-        }
-        .ct-sel-slot.fill .s-remove { display: flex; }
-        .ct-sel-slot .s-remove:hover { background: rgba(239,68,68,1); transform: scale(1.15); }
-        .ct-sel-slot .s-num {
-            font-size: 0.5rem; color: var(--text-secondary);
-        }
-
-        .ct-sel-actions {
-            display: flex; flex-direction: column; gap: 0.4rem;
-        }
-        .ct-sel-actions button {
-            width: 100%; padding: 0.5rem;
-            border: none; border-radius: 8px;
-            font-family: 'Russo One', sans-serif;
-            font-size: 0.75rem;
-            letter-spacing: 0.04em;
-            cursor: pointer;
-            transition: all 0.25s;
-        }
-        .ct-sel-btn {
-            background: linear-gradient(135deg, var(--success-color), #059669);
-            color: white;
-        }
-        .ct-sel-btn:hover:not(:disabled) {
-            filter: brightness(1.1);
-            box-shadow: 0 4px 20px rgba(16,185,129,0.3);
-        }
-        .ct-sel-btn:disabled {
-            opacity: 0.3; cursor: not-allowed;
-        }
-        .ct-sel-btn.knife {
-            background: linear-gradient(135deg, #ffd700, #f97316);
-        }
-        .ct-sel-btn.knife:hover:not(:disabled) {
-            box-shadow: 0 4px 20px rgba(255,215,0,0.3);
-        }
-        .ct-sel-clear {
-            background: rgba(255,255,255,0.04);
-            border: 1px solid var(--border-color) !important;
-            color: var(--text-secondary);
-        }
-        .ct-sel-clear:hover { border-color: var(--danger-color) !important; color: var(--danger-color); }
-
-        .ct-sel-hint {
-            text-align: center;
-            font-size: 0.7rem;
-            color: var(--text-secondary);
-            padding: 1.5rem 0;
-        }
-
-        /* ─── Modals (unchanged) ─── */
-        .ct-overlay {
-            position: fixed; inset: 0;
-            background: rgba(0,0,0,0.7); backdrop-filter: blur(8px);
-            z-index: 200; display: none; align-items: center; justify-content: center;
-            padding: 1rem; animation: ctOvlIn 0.25s ease;
-        }
-        .ct-overlay.open { display: flex; }
-        @keyframes ctOvlIn { from{opacity:0} to{opacity:1} }
-
-        .ct-paper {
-            background: linear-gradient(145deg, #1c1d24, #14151a);
-            border: 1px solid rgba(255,255,255,0.08);
-            border-radius: 20px; max-width: 640px; width: 100%; padding: 2rem;
-            position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
-            animation: ctPaperIn 0.4s cubic-bezier(0.34,1.56,0.64,1);
-        }
-        @keyframes ctPaperIn { from{opacity:0;transform:scale(0.92) translateY(20px)} to{opacity:1;transform:scale(1) translateY(0)} }
-
-        .ct-paper-title { text-align: center; font-family:'Russo One',sans-serif; font-size:1.3rem; letter-spacing:0.08em; }
-        .ct-paper-sub { text-align: center; font-size:0.75rem; color:var(--text-secondary); letter-spacing:0.05em; margin-bottom:1.5rem; }
-        .ct-paper-line { height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent); margin-bottom:1.25rem; }
-
-        .ct-paper-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:0.5rem; margin-bottom:1.25rem; }
-        .ct-paper-slot {
-            background:rgba(0,0,0,0.15); border:1px dashed rgba(255,255,255,0.06);
-            border-radius:8px; padding:0.35rem; min-height:60px;
-            display:flex; flex-direction:column; align-items:center; justify-content:center;
-            gap:0.15rem; transition:all 0.3s;
-        }
-        .ct-paper-slot.fill { border-color:rgba(255,255,255,0.12); border-style:solid; background:rgba(255,255,255,0.02); }
-        .ct-paper-slot img { width:100%; height:30px; object-fit:contain; }
-        .ct-paper-slot .s-name { font-size:0.5rem; text-align:center; line-height:1.1; }
-
-        .ct-sign-area { display:flex; align-items:center; gap:0.75rem; margin-bottom:0.75rem; }
-        .ct-sign-canvas { flex:1; border:1px dashed rgba(255,255,255,0.1); border-radius:6px; cursor:crosshair; background:#0d0e12; height:50px; }
-
-        .ct-stamp { text-align:center; font-family:'Russo One',sans-serif; font-size:1.4rem; letter-spacing:0.15em; color:var(--success-color); opacity:0; transition:opacity 0.5s; }
-        .ct-stamp.active { opacity:1; }
-
-        .ct-sign-btn {
-            width:100%; padding:0.7rem; border:none; border-radius:10px;
-            background:linear-gradient(135deg,var(--primary-color),#f97316); color:white;
-            font-family:'Russo One',sans-serif; font-size:0.85rem; letter-spacing:0.06em;
-            cursor:pointer; transition:all 0.25s; margin-top:0.75rem;
-        }
-        .ct-sign-btn:hover{filter:brightness(1.1);box-shadow:0 4px 24px rgba(245,158,11,0.3)}
-        .ct-sign-btn:disabled{opacity:0.5;cursor:not-allowed;filter:none;box-shadow:none}
-
-        .ct-result { text-align:center; }
-        .ct-result-img { width:160px; height:120px; object-fit:contain; margin-bottom:0.75rem; }
-        .ct-result-name { font-size:1.15rem; font-weight:700; margin-bottom:0.3rem; }
-        .ct-result-rarity { font-size:0.85rem; font-weight:600; margin-bottom:0.4rem; }
-        .ct-result-detail { font-size:0.75rem; color:var(--text-secondary); margin-bottom:0.15rem; }
-        .ct-result-btn {
-            margin-top:1.25rem; padding:0.6rem 1.8rem; border:none; border-radius:8px;
-            background:linear-gradient(135deg,var(--primary-color),#f97316); color:white;
-            font-family:'Russo One',sans-serif; font-size:0.85rem; cursor:pointer; transition:all 0.25s;
-        }
-        .ct-result-btn:hover{filter:brightness(1.1);box-shadow:0 4px 24px rgba(245,158,11,0.3)}
-
-        .ct-empty {
-            text-align: center; padding: 3rem 1rem;
-            color: var(--text-secondary);
-        }
-        .ct-empty h3 { margin-bottom: 0.5rem; }
-        .ct-empty p { font-size: 0.85rem; margin-bottom: 1rem; }
-    </style>
-
-    <div class="ct-page">
-        <div class="ct-header">
-            <h1>🔄 <span>Trade Up</span> Контракт</h1>
-            <p>Выберите 10 предметов одинаковой редкости и типа</p>
-        </div>
-
-        {% if inventory_items and inventory_items|length >= 10 %}
-        <div class="ct-layout">
-            <!-- Left: Inventory -->
-            <div class="ct-inv-panel">
-                <div class="ct-inv-toolbar">
-                    <select id="ctRarityFilter" onchange="ctRenderInv()">
-                        <option value="">Все редкости</option>
-                        {% set rarities = inventory_items|map(attribute='rarity')|unique|list %}
-                        {% for r in rarities %}
-                        <option value="{{ r }}">{{ r }}</option>
-                        {% endfor %}
-                    </select>
-                    <select id="ctTypeFilter" onchange="ctRenderInv()">
-                        <option value="">Все типы</option>
-                        {% set types = inventory_items|map(attribute='type')|unique|list %}
-                        {% for t in types %}
-                        <option value="{{ t }}">{{ t }}</option>
-                        {% endfor %}
-                    </select>
-                    <input type="text" id="ctSearch" placeholder="🔍 Поиск..." oninput="ctRenderInv()">
-                    <select id="ctSort" onchange="ctRenderInv()">
-                        <option value="default">По умолчанию</option>
-                        <option value="price_asc">Цена ↑</option>
-                        <option value="price_desc">Цена ↓</option>
-                        <option value="name">По названию</option>
-                        <option value="float">Float</option>
-                    </select>
-                    <span style="font-size:0.7rem;color:var(--text-secondary)" id="ctInvCount"></span>
+    <div class="section">
+        <div class="container" style="max-width:1100px;">
+            <div class="section-header" style="margin-bottom:1rem;">
+                <div>
+                    <h1 class="section-title">🔄 Trade Up Контракт</h1>
+                    <p class="section-subtitle">Выберите 10 предметов одинаковой редкости и типа</p>
                 </div>
-                <div class="ct-inv-grid" id="ctInvGrid"></div>
             </div>
 
-            <!-- Right: Selection -->
-            <div class="ct-sel-panel" id="ctSelPanel">
-                <div class="ct-sel-header">
-                    <h3>📋 Контракт</h3>
-                    <span class="ct-sel-count" id="ctSelCount">0/10</span>
-                </div>
-                <div class="ct-sel-grid" id="ctSelGrid">
-                    {% for i in range(10) %}
-                    <div class="ct-sel-slot" id="ctSlot-{{ i }}" data-idx="{{ i }}">
-                        <span class="s-num">{{ i+1 }}</span>
+            {% if inventory_items and inventory_items|length >= 10 %}
+            <div style="display:grid;grid-template-columns:1fr 260px;gap:0.75rem;align-items:start;">
+                <!-- Inventory -->
+                <div class="card" style="padding:0;overflow:hidden;">
+                    <div style="display:flex;flex-wrap:wrap;gap:0.35rem;align-items:center;padding:0.6rem 0.75rem;border-bottom:1px solid var(--border);background:rgba(0,0,0,0.1);">
+                        <select id="ctRarityFilter" class="form-select" style="width:auto;min-width:120px;font-size:0.78rem;padding:0.3rem 0.5rem;" onchange="ctRenderInv()">
+                            <option value="">Все редкости</option>
+                            {% set rarities = inventory_items|map(attribute='rarity')|unique|list %}
+                            {% for r in rarities %}
+                            <option value="{{ r }}">{{ r }}</option>
+                            {% endfor %}
+                        </select>
+                        <select id="ctTypeFilter" class="form-select" style="width:auto;min-width:100px;font-size:0.78rem;padding:0.3rem 0.5rem;" onchange="ctRenderInv()">
+                            <option value="">Все типы</option>
+                            {% set types = inventory_items|map(attribute='type')|unique|list %}
+                            {% for t in types %}
+                            <option value="{{ t }}">{{ t }}</option>
+                            {% endfor %}
+                        </select>
+                        <input type="text" id="ctSearch" class="form-input" placeholder="🔍 Поиск..." style="flex:1;min-width:100px;font-size:0.78rem;padding:0.3rem 0.5rem;" oninput="ctRenderInv()">
+                        <select id="ctSort" class="form-select" style="width:auto;font-size:0.78rem;padding:0.3rem 0.5rem;" onchange="ctRenderInv()">
+                            <option value="default">По умолч.</option>
+                            <option value="price_asc">Цена ↑</option>
+                            <option value="price_desc">Цена ↓</option>
+                            <option value="name">Имя</option>
+                            <option value="float">Float</option>
+                        </select>
+                        <span class="text-xs text-dim" id="ctInvCount"></span>
                     </div>
-                    {% endfor %}
+                    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:0.4rem;padding:0.6rem;max-height:520px;overflow-y:auto;" id="ctInvGrid"></div>
                 </div>
-                <div class="ct-sel-hint" id="ctSelHint">Выберите предмет из инвентаря</div>
-                <div class="ct-sel-actions">
-                    <button class="ct-sel-clear" onclick="ctClearAll()">✕ Сбросить</button>
-                    <button class="ct-sel-btn" id="ctSubmitBtn" disabled onclick="ctOpenPaper()">🔄 Заключить контракт</button>
-                    {% if knife_count >= 10 %}
-                    <button class="ct-sel-btn knife" id="ctKnifeBtn" onclick="ctOpenKnife()">🔞 Крафт дилдок ×{{ knife_count }}</button>
-                    {% endif %}
+
+                <!-- Selection Panel -->
+                <div class="card" style="position:sticky;top:80px;min-height:300px;" id="ctSelPanel">
+                    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;">
+                        <span class="display-font" style="font-size:0.85rem;">📋 Контракт</span>
+                        <span style="font-size:1.2rem;font-weight:700;font-family:var(--font-display);color:var(--primary);" id="ctSelCount" class="">0/10</span>
+                    </div>
+                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.35rem;margin-bottom:0.75rem;" id="ctSelGrid">
+                        {% for i in range(10) %}
+                        <div style="background:rgba(0,0,0,0.12);border:1px dashed rgba(255,255,255,0.06);border-radius:8px;padding:0.3rem;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.1rem;transition:all 0.3s;" class="ct-sel-slot" id="ctSlot-{{ i }}" data-idx="{{ i }}">
+                            <span style="font-size:0.5rem;color:var(--text-dim);">{{ i+1 }}</span>
+                        </div>
+                        {% endfor %}
+                    </div>
+                    <div class="text-xs text-dim text-center" style="padding:1rem 0;display:block;" id="ctSelHint">Выберите предмет из инвентаря</div>
+                    <div style="display:flex;flex-direction:column;gap:0.35rem;">
+                        <button class="btn btn-ghost btn-sm" onclick="ctClearAll()" style="color:var(--text-dim);border:1px solid var(--border);">✕ Сбросить</button>
+                        <button class="btn btn-success btn-sm" id="ctSubmitBtn" disabled onclick="ctOpenPaper()">🔄 Заключить контракт</button>
+                        {% if knife_count >= 10 %}
+                        <button class="btn btn-sm" id="ctKnifeBtn" onclick="ctOpenKnife()" style="background:linear-gradient(135deg,#ffd700,#f97316);color:#000;">🔞 Крафт дилдок ×{{ knife_count }}</button>
+                        {% endif %}
+                    </div>
                 </div>
             </div>
-        </div>
-        {% else %}
-        <div class="ct-empty">
-            {% if user %}
-            <div style="font-size:2rem;margin-bottom:0.5rem">📭</div>
-            <h3>Недостаточно предметов</h3>
-            <p>Нужно минимум 10 предметов одинаковой редкости и типа</p>
-            <a href="/cases" class="btn btn-primary">Открыть кейсы</a>
+
+            {% if not user %}
+            <div class="empty-state">
+                <div class="empty-state-icon">🔒</div>
+                <div class="empty-state-title">Контракты доступны только авторизованным</div>
+                <div class="empty-state-desc">Войдите в аккаунт, чтобы просматривать инвентарь и заключать контракты</div>
+                <div class="flex gap-2 justify-center">
+                    <a href="/login" class="btn btn-primary">Войти</a>
+                    <a href="/register" class="btn btn-outline">Регистрация</a>
+                </div>
+            </div>
+            {% endif %}
             {% else %}
-            <div style="font-size:2rem;margin-bottom:0.5rem">🔒</div>
-            <h3>Контракты доступны только авторизованным</h3>
-            <p>Войдите в аккаунт, чтобы просматривать инвентарь и заключать контракты</p>
-            <a href="/login" class="btn btn-primary">Войти</a>
-            <a href="/register" class="btn btn-outline">Регистрация</a>
+            <div class="empty-state">
+                {% if user %}
+                <div style="font-size:2rem;margin-bottom:0.5rem;">📭</div>
+                <div class="empty-state-title">Недостаточно предметов</div>
+                <div class="empty-state-desc">Нужно минимум 10 предметов одинаковой редкости и типа</div>
+                <a href="/cases" class="btn btn-primary">Открыть кейсы</a>
+                {% else %}
+                <div style="font-size:2rem;margin-bottom:0.5rem;">🔒</div>
+                <div class="empty-state-title">Контракты доступны только авторизованным</div>
+                <div class="empty-state-desc">Войдите в аккаунт, чтобы просматривать инвентарь и заключать контракты</div>
+                <a href="/login" class="btn btn-primary">Войти</a>
+                <a href="/register" class="btn btn-outline">Регистрация</a>
+                {% endif %}
+            </div>
             {% endif %}
         </div>
-        {% endif %}
     </div>
 
-    <!-- Модалка бумаги -->
-    <div class="ct-overlay" id="ctPaperModal">
-        <div class="ct-paper">
-            <div class="ct-paper-title">📜 TRADE UP CONTRACT</div>
-            <div class="ct-paper-sub">CS2 Weapon Case — проверка подлинности</div>
-            <div class="ct-paper-line"></div>
-            <div class="ct-paper-grid" id="ctPaperSlots"></div>
-            <div class="ct-paper-line"></div>
-            <div class="ct-sign-area">
-                <canvas class="ct-sign-canvas" id="ctSignCanvas" width="400" height="50"></canvas>
-                <button class="ct-sel-clear" onclick="ctClearSign()" style="padding:0.3rem 0.6rem">✕</button>
+    <!-- Paper Modal -->
+    <div class="modal-overlay" id="ctPaperModal" style="display:none;">
+        <div class="modal" style="max-width:500px;">
+            <div class="modal-header">
+                <div class="modal-title">📜 TRADE UP CONTRACT</div>
+                <button class="modal-close" onclick="ctClosePaper()">✕</button>
+            </div>
+            <div class="modal-body">
+                <p class="text-xs text-dim text-center" style="margin-bottom:1rem;">CS2 Weapon Case — проверка подлинности</p>
+                <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:0.35rem;margin-bottom:1rem;" id="ctPaperSlots">
+                    {% for i in range(10) %}
+                    <div style="background:rgba(0,0,0,0.12);border:1px dashed rgba(255,255,255,0.06);border-radius:8px;padding:0.35rem;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.1rem;" class="ct-paper-slot" id="ctSlotPaper{{ i }}"><span style="font-size:0.5rem;color:var(--text-dim)">{{ i+1 }}</span></div>
+                    {% endfor %}
+                </div>
+                <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem;">
+                    <canvas id="ctSignCanvas" width="400" height="50" style="flex:1;border:1px dashed rgba(255,255,255,0.1);border-radius:6px;cursor:crosshair;background:#0d0e12;height:50px;"></canvas>
+                    <button class="btn btn-ghost btn-sm" onclick="ctClearSign()" style="flex-shrink:0;">✕</button>
+                </div>
+                <div class="display-font text-center" style="font-size:1.2rem;color:var(--success);opacity:0;transition:opacity 0.5s;" id="ctStamp">✔ УТВЕРЖДЕНО</div>
+                <button class="btn btn-primary btn-block" id="ctSignBtn" onclick="ctSign()" style="margin-top:0.75rem;">✍ ПОДПИСАТЬ</button>
             </div>
-            <div class="ct-stamp" id="ctStamp">✔ УТВЕРЖДЕНО</div>
-            <button class="ct-sign-btn" id="ctSignBtn" onclick="ctSign()">✍ ПОДПИСАТЬ</button>
         </div>
     </div>
 
-    <!-- Модалка результата -->
-    <div class="ct-overlay" id="ctResultModal">
-        <div class="ct-paper" style="max-width:420px">
-            <div class="ct-result" id="ctResultContent"></div>
+    <!-- Result Modal -->
+    <div class="modal-overlay" id="ctResultModal" style="display:none;">
+        <div class="modal" style="max-width:380px;">
+            <div class="modal-body text-center" id="ctResultContent"></div>
         </div>
     </div>
 
+    <script src="/static/js/sounds.js"></script>
+    <script src="/static/js/websocket.js"></script>
+    <script src="/static/js/safemode.js"></script>
     <script>
-        // ─── Данные ────────────────────────────────────────────────────────────
-        const allItems = [
-            {% for item in inventory_items %}
-            {
-                invId: {{ item.inventory_id }},
-                name: {{ item.name|tojson }},
-                rarity: {{ item.rarity|tojson }},
-                type: {{ item.type|tojson }},
-                float: {{ item.float }},
-                image: {{ item.image_url|tojson }},
-                isKnife: {{ 1 if item.is_knife else 0 }}
-            }{% if not loop.last %},{% endif %}
-            {% endfor %}
-        ];
+        const allItems = [{% for item in inventory_items %}{invId:{{ item.inventory_id }},name:{{ item.name|tojson }},rarity:{{ item.rarity|tojson }},type:{{ item.type|tojson }},float:{{ item.float }},image:{{ item.image_url|tojson }},isKnife:{{ 1 if item.is_knife else 0 }}}{% if not loop.last %},{% endif %}{% endfor %}];
+        const selected = new Map();
+        let ctMode = '';
 
-        const selected = new Map(); // invId -> {data, idx}
-        let ctMode = ''; // '' | 'knife' | 'normal'
-
-        // ─── Render inventory ──────────────────────────────────────────────────
         function ctRenderInv() {
             const rarity = document.getElementById('ctRarityFilter').value;
             const type = document.getElementById('ctTypeFilter').value;
             const q = document.getElementById('ctSearch').value.toLowerCase();
             const sort = document.getElementById('ctSort').value;
-
             let items = allItems.filter(it => {
                 if (selected.has(it.invId)) return false;
                 if (rarity && it.rarity !== rarity) return false;
                 if (type && it.type !== type) return false;
                 if (q && !it.name.toLowerCase().includes(q)) return false;
-                // Если уже есть выбор — показываем только совместимые
                 if (ctMode === 'knife' && !it.isKnife) return false;
                 if (ctMode === 'normal') {
                     const first = selected.values().next().value;
@@ -481,177 +186,111 @@
                 }
                 return true;
             });
-
             switch (sort) {
-                case 'price_asc': items.sort((a,b) => (a.float||0) - (b.float||0)); break;
-                case 'price_desc': items.sort((a,b) => (b.float||0) - (a.float||0)); break;
+                case 'price_asc': items.sort((a,b) => (a.float||0)-(b.float||0)); break;
+                case 'price_desc': items.sort((a,b) => (b.float||0)-(a.float||0)); break;
                 case 'name': items.sort((a,b) => a.name.localeCompare(b.name)); break;
                 case 'float': items.sort((a,b) => a.float - b.float); break;
             }
-
             document.getElementById('ctInvCount').textContent = items.length;
-
             const grid = document.getElementById('ctInvGrid');
-            grid.innerHTML = items.map((it, i) => `
-                <div class="ct-card ${it.isKnife ? 'knife-item' : ''}"
-                     onclick="ctPick(${it.invId})"
-                     style="animation-delay:${(i%30)*0.025}s"
-                     data-inv="${it.invId}">
-                    ${it.isKnife ? '<div class="ct-knife-badge">🔪</div>' : ''}
-                    <img src="${it.image || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" loading="lazy">
-                    <div class="ct-name">${it.name}</div>
-                    <div class="ct-float">★ ${it.float.toFixed(4)}</div>
-                </div>
-            `).join('');
+            grid.innerHTML = items.map((it,i) => `<div style="background:rgba(0,0,0,0.15);border:2px solid transparent;border-radius:8px;padding:0.4rem 0.35rem;cursor:pointer;transition:all 0.2s;display:flex;flex-direction:column;align-items:center;gap:0.15rem;animation:slideInUp 0.25s ease both;animation-delay:${(i%30)*0.02}s;${it.isKnife?'border-color:rgba(255,215,0,0.12);':''}" onclick="ctPick(${it.invId})" onmouseover="this.style.borderColor='rgba(255,255,255,0.1)'" onmouseout="this.style.borderColor='transparent'">
+                ${it.isKnife ? '<span style="position:absolute;top:2px;left:2px;font-size:0.5rem;padding:0.05rem 0.25rem;background:rgba(255,215,0,0.15);color:#ffd700;border-radius:3px;font-weight:700;">🔪</span>' : ''}
+                <img src="${it.image||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" loading="lazy" style="width:100%;height:48px;object-fit:contain;">
+                <div style="font-size:0.55rem;text-align:center;line-height:1.1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;">${it.name}</div>
+                <div style="font-size:0.5rem;color:var(--text-dim);">★ ${it.float.toFixed(4)}</div>
+            </div>`).join('');
         }
 
-        // ─── Pick / Unpick ────────────────────────────────────────────────────
         function ctPick(invId) {
             const data = allItems.find(it => it.invId === invId);
             if (!data) return;
-
-            // Первый выбор — устанавливаем режим
-            if (selected.size === 0) {
-                ctMode = data.isKnife ? 'knife' : 'normal';
-            }
-
-            // Проверка совместимости
+            if (selected.size === 0) ctMode = data.isKnife ? 'knife' : 'normal';
             if (ctMode === 'knife' && !data.isKnife) return;
             if (ctMode === 'normal') {
                 const first = selected.values().next().value;
                 const ref = first ? first.data : data;
                 if (data.isKnife || data.rarity !== ref.rarity || data.type !== ref.type) return;
             }
-
             if (selected.size >= 10) return;
-
             selected.set(invId, { data, idx: selected.size });
-            ctRenderInv();
-            ctRenderSel();
+            ctRenderInv(); ctRenderSel();
         }
 
         function ctUnpick(invId) {
             if (!selected.has(invId)) return;
             selected.delete(invId);
-            // Перенумеровать
-            let i = 0;
-            for (const [id, v] of selected) {
-                v.idx = i++;
-            }
+            let i = 0; for (const [,v] of selected) v.idx = i++;
             if (selected.size === 0) ctMode = '';
-            ctRenderInv();
-            ctRenderSel();
+            ctRenderInv(); ctRenderSel();
         }
 
-        function ctClearAll() {
-            selected.clear();
-            ctMode = '';
-            ctRenderInv();
-            ctRenderSel();
-        }
+        function ctClearAll() { selected.clear(); ctMode = ''; ctRenderInv(); ctRenderSel(); }
 
-        // ─── Render selection panel ───────────────────────────────────────────
         function ctRenderSel() {
             const count = document.getElementById('ctSelCount');
             const hint = document.getElementById('ctSelHint');
             const submitBtn = document.getElementById('ctSubmitBtn');
             const knifeBtn = document.getElementById('ctKnifeBtn');
-
-            count.textContent = selected.size + '/10';
-            count.classList.toggle('full', selected.size === 10);
-
-            if (selected.size === 0) {
-                hint.style.display = 'block';
-                submitBtn.style.display = 'none';
-                if (knifeBtn) knifeBtn.style.display = 'none';
-            } else {
-                hint.style.display = 'none';
-                if (ctMode === 'knife') {
-                    submitBtn.style.display = 'none';
-                    if (knifeBtn) knifeBtn.style.display = selected.size === 10 ? '' : 'none';
-                } else {
-                    if (knifeBtn) knifeBtn.style.display = 'none';
-                    submitBtn.style.display = selected.size === 10 ? '' : 'none';
-                }
+            count.textContent = selected.size+'/10';
+            count.style.color = selected.size === 10 ? 'var(--success)' : 'var(--primary)';
+            if (selected.size === 0) { hint.style.display = 'block'; submitBtn.style.display = 'none'; if (knifeBtn) knifeBtn.style.display = 'none'; }
+            else { hint.style.display = 'none';
+                if (ctMode === 'knife') { submitBtn.style.display = 'none'; if (knifeBtn) knifeBtn.style.display = selected.size === 10 ? '' : 'none'; }
+                else { if (knifeBtn) knifeBtn.style.display = 'none'; submitBtn.style.display = selected.size === 10 ? '' : 'none'; }
             }
             submitBtn.disabled = selected.size !== 10;
-
-            // Fill slots
             const items = [...selected.entries()].sort((a,b) => a[1].idx - b[1].idx);
             for (let i = 0; i < 10; i++) {
-                const slot = document.getElementById('ctSlot-' + i);
+                const slot = document.getElementById('ctSlot-'+i);
                 const entry = items[i];
                 if (entry) {
                     const [id, v] = entry;
-                    slot.className = 'ct-sel-slot fill';
-                    slot.innerHTML = `
-                        <button class="s-remove" onclick="ctUnpick(${id})">✕</button>
-                        <img src="${v.data.image || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
-                        <div class="s-name">${v.data.name}</div>
-                    `;
+                    slot.style.borderStyle = 'solid'; slot.style.borderColor = 'rgba(255,255,255,0.1)'; slot.style.background = 'rgba(255,255,255,0.02)';
+                    slot.innerHTML = `<button style="position:absolute;top:1px;right:1px;width:14px;height:14px;border-radius:50%;background:rgba(239,68,68,0.8);color:white;border:none;font-size:0.45rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;" onclick="ctUnpick(${id})">✕</button>
+                        <img src="${v.data.image||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" style="width:100%;height:24px;object-fit:contain;">
+                        <div style="font-size:0.45rem;text-align:center;line-height:1.05;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;">${v.data.name}</div>`;
                 } else {
-                    slot.className = 'ct-sel-slot';
-                    slot.innerHTML = `<span class="s-num">${i+1}</span>`;
+                    slot.style.borderStyle = 'dashed'; slot.style.borderColor = 'rgba(255,255,255,0.06)'; slot.style.background = '';
+                    slot.innerHTML = `<span style="font-size:0.5rem;color:var(--text-dim);">${i+1}</span>`;
                 }
             }
-
-            document.getElementById('ctSubmitBtn').textContent = ctMode === 'knife' ? '🔞 Крафт дилдок' : '🔄 Заключить контракт';
         }
 
-        // ─── Paper modal ──────────────────────────────────────────────────────
         function ctOpenPaper() {
             if (selected.size !== 10) return;
-            const items = [...selected.entries()].sort((a,b) => a[1].idx - b[1].idx).map(([id, v]) => ({
-                invId: id,
-                name: v.data.name,
-                rarity: v.data.rarity,
-                float: v.data.float,
-                image: v.data.image
-            }));
+            const items = [...selected.entries()].sort((a,b) => a[1].idx - b[1].idx).map(([id,v]) => ({invId:id,name:v.data.name,rarity:v.data.rarity,float:v.data.float,image:v.data.image}));
             window.__ctItems = items;
-
             const slots = document.getElementById('ctPaperSlots');
             slots.innerHTML = '';
             for (let i = 0; i < 10; i++) {
-                const s = document.createElement('div');
-                s.className = 'ct-paper-slot';
-                s.id = 'ctSlotPaper' + i;
-                s.innerHTML = '<span style="font-size:0.5rem;color:var(--text-secondary)">' + (i+1) + '</span>';
-                slots.appendChild(s);
+                const s = document.createElement('div'); s.style.cssText = 'background:rgba(0,0,0,0.12);border:1px dashed rgba(255,255,255,0.06);border-radius:8px;padding:0.35rem;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.1rem;'; s.id = 'ctSlotPaper'+i;
+                s.innerHTML = '<span style="font-size:0.5rem;color:var(--text-dim)">'+(i+1)+'</span>'; slots.appendChild(s);
             }
-
-            document.getElementById('ctPaperModal').classList.add('open');
-            document.getElementById('ctStamp').classList.remove('active');
+            document.getElementById('ctPaperModal').style.display = 'flex';
+            document.getElementById('ctStamp').style.opacity = '0';
             setTimeout(ctInitSign, 100);
             ctAnimateSlots();
         }
 
-        function ctOpenKnife() {
-            if (selected.size !== 10) return;
-            ctOpenPaper();
-        }
+        function ctOpenKnife() { if (selected.size !== 10) return; ctOpenPaper(); }
 
         async function ctAnimateSlots() {
             const items = window.__ctItems || [];
             for (let i = 0; i < 10; i++) {
-                const s = document.getElementById('ctSlotPaper' + i);
-                const item = items[i];
-                s.classList.add('fill');
-                s.innerHTML = `<img src="${item.image}" onerror="this.src='/static/placeholder.png'">
-                    <div class="s-name">${item.name}</div>`;
-                await new Promise(r => setTimeout(r, 50 + Math.random() * 40));
+                const s = document.getElementById('ctSlotPaper'+i);
+                const item = items[i]; s.style.borderStyle = 'solid'; s.style.borderColor = 'rgba(255,255,255,0.1)'; s.style.background = 'rgba(255,255,255,0.02)';
+                s.innerHTML = `<img src="${item.image}" onerror="this.src='/static/placeholder.png'" style="width:100%;height:28px;object-fit:contain;"><div style="font-size:0.48rem;text-align:center;line-height:1.1;">${item.name}</div>`;
+                await new Promise(r => setTimeout(r, 40 + Math.random()*30));
             }
             await new Promise(r => setTimeout(r, 250));
-            document.getElementById('ctStamp').classList.add('active');
+            document.getElementById('ctStamp').style.opacity = '1';
         }
 
         let ctSignCtx = null;
         function ctInitSign() {
-            const c = document.getElementById('ctSignCanvas');
-            const ctx = c.getContext('2d');
-            ctSignCtx = ctx;
-            ctx.fillStyle = '#0d0e12'; ctx.fillRect(0,0,c.width,c.height);
-            ctx.strokeStyle = '#d4c5a9'; ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
+            const c = document.getElementById('ctSignCanvas'); const ctx = c.getContext('2d'); ctSignCtx = ctx;
+            ctx.fillStyle = '#0d0e12'; ctx.fillRect(0,0,c.width,c.height); ctx.strokeStyle = '#d4c5a9'; ctx.lineWidth = 2; ctx.lineCap = 'round'; ctx.lineJoin = 'round';
             let drawing = false;
             const s = e => { const r=c.getBoundingClientRect(); drawing=true; ctx.beginPath(); ctx.moveTo(e.clientX-r.left, e.clientY-r.top); };
             const m = e => { if(!drawing)return; const r=c.getBoundingClientRect(); ctx.lineTo(e.clientX-r.left, e.clientY-r.top); ctx.stroke(); };
@@ -661,78 +300,64 @@
             c.ontouchmove = e=>{e.preventDefault();if(!drawing)return;const t=e.touches[0];const r=c.getBoundingClientRect();ctx.lineTo(t.clientX-r.left,t.clientY-r.top);ctx.stroke();};
             c.ontouchend = ()=>drawing=false;
         }
-        function ctClearSign() {
-            const c = document.getElementById('ctSignCanvas');
-            if(ctSignCtx){ctSignCtx.fillStyle='#0d0e12';ctSignCtx.fillRect(0,0,c.width,c.height);}
-        }
+        function ctClearSign() { const c = document.getElementById('ctSignCanvas'); if(ctSignCtx){ctSignCtx.fillStyle='#0d0e12';ctSignCtx.fillRect(0,0,c.width,c.height);} }
 
         async function ctSign() {
-            const btn = document.getElementById('ctSignBtn');
-            btn.disabled = true; btn.textContent = '⏳ ПОДПИСЫВАЕМ...';
+            const btn = document.getElementById('ctSignBtn'); btn.disabled = true; btn.textContent = '⏳ ПОДПИСЫВАЕМ...';
             SoundManager.contractSubmit();
             const items = window.__ctItems || [];
-            const fd = new FormData();
-            fd.append('inventory_ids', JSON.stringify(items.map(i => i.invId)));
+            const fd = new FormData(); fd.append('inventory_ids', JSON.stringify(items.map(i=>i.invId)));
             try {
-                const res = await fetch('/web/api/contracts/submit', { method: 'POST', body: fd });
+                const res = await fetch('/web/api/contracts/submit', { method:'POST', body:fd });
                 const data = await res.json();
                 if (res.ok && data.success) {
                     if (typeof handleAchievements === 'function') handleAchievements(data);
-                    SoundManager.contractResult();
-                    ctClosePaper();
+                    SoundManager.contractResult(); ctClosePaper();
                     setTimeout(() => ctShowResult(data.received_item, data.is_knife_contract), 200);
-                } else {
-                    SoundManager.error(); alert(data.error || 'Ошибка'); ctClosePaper();
-                }
+                } else { SoundManager.error(); alert(data.error); ctClosePaper(); }
             } catch(_) { SoundManager.error(); alert('Ошибка соединения'); ctClosePaper(); }
             btn.disabled = false; btn.textContent = '✍ ПОДПИСАТЬ';
         }
 
         function ctShowResult(item, isKnife) {
-            const g = getComputedStyle(document.documentElement).getPropertyValue('--rarity-' + (item.rarity||'').toLowerCase().replace(/ /g, '-').split('-')[0]).trim() || '#ffd700';
+            const g = getRarityColor(item.rarity);
             const title = isKnife ? '🔞 КОНТРАКТ ВЫПОЛНЕН' : '🎉 КОНТРАКТ ВЫПОЛНЕН';
             document.getElementById('ctResultContent').innerHTML = `
-                <div style="--g:${g}">
-                    <div style="font-size:2rem;margin-bottom:0.5rem">${isKnife ? '🔞' : '🎉'}</div>
-                    <div style="font-family:'Russo One',sans-serif;font-size:1.1rem;letter-spacing:0.04em;margin-bottom:1rem">${title}</div>
-                    <img class="ct-result-img" src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" style="filter:drop-shadow(0 0 30px var(--g))">
-                    <div class="ct-result-name">${item.name}</div>
-                    <div class="ct-result-rarity" style="color:${g}">${item.rarity}</div>
-                    <div class="ct-result-detail">Float: ${item.float.toFixed(6)}</div>
-                    <div class="ct-result-detail">Шанс: ${(item.probability || 0).toFixed(2)}%</div>
-                    <button class="ct-result-btn" onclick="ctCloseResult()">Продолжить</button>
-                </div>
+                <div style="font-size:2rem;margin-bottom:0.5rem">${isKnife ? '🔞' : '🎉'}</div>
+                <div class="display-font" style="font-size:1rem;letter-spacing:0.04em;margin-bottom:1rem">${title}</div>
+                <img src="${item.image_url||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" style="width:120px;height:90px;object-fit:contain;margin-bottom:0.5rem;filter:drop-shadow(0 0 20px ${g})">
+                <div class="display-font" style="font-size:1rem;">${item.name}</div>
+                <div style="color:${g};font-weight:600;font-size:0.85rem;margin-bottom:0.3rem;">${item.rarity}</div>
+                <div class="text-xs text-dim">Float: ${item.float.toFixed(6)}</div>
+                <div class="text-xs text-dim">Шанс: ${(item.probability||0).toFixed(2)}%</div>
+                <button class="btn btn-primary" onclick="ctCloseResult()" style="margin-top:1rem;">Продолжить</button>
             `;
-            document.getElementById('ctResultModal').classList.add('open');
+            document.getElementById('ctResultModal').style.display = 'flex';
         }
 
-        function ctClosePaper() { document.getElementById('ctPaperModal').classList.remove('open'); }
-        function ctCloseResult() { document.getElementById('ctResultModal').classList.remove('open'); window.location.reload(); }
+        function ctClosePaper() { document.getElementById('ctPaperModal').style.display = 'none'; }
+        function ctCloseResult() { document.getElementById('ctResultModal').style.display = 'none'; window.location.reload(); }
 
         function handleAchievements(d) {
             if(d && d.achievements_unlocked && Array.isArray(d.achievements_unlocked) && d.achievements_unlocked.length)
                 d.achievements_unlocked.forEach(a => showAchievementPopup(a.title || a.name || 'Достижение', a.reward || ''));
         }
+
         function toggleSound() {
-            const e = SoundManager.toggle();
-            document.getElementById('soundToggle').textContent = e ? '🔊' : '🔇';
+            const enabled = SoundManager.toggle();
+            document.getElementById('soundToggle').textContent = enabled ? '🔊' : '🔇';
         }
 
         document.addEventListener('DOMContentLoaded', () => {
             const btn = document.getElementById('soundToggle');
             if(btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇';
-            ctRenderInv();
-            ctRenderSel();
+            ctRenderInv(); ctRenderSel();
         });
 
-        document.querySelectorAll('.ct-overlay').forEach(m => {
-            m.addEventListener('click', e => { if(e.target === m) m.classList.remove('open'); });
+        document.querySelectorAll('.modal-overlay').forEach(m => {
+            m.addEventListener('click', e => { if(e.target === m) m.style.display = 'none'; });
         });
     </script>
-
-    <script src="/static/js/sounds.js"></script>
-    <script src="/static/js/websocket.js"></script>
-    <script src="/static/js/safemode.js"></script>
 {% if user %}{% include '_activity_sidebar.html' %}{% endif %}
 </body>
 </html>
diff --git a/templates/crash.html b/templates/crash.html
index fa13764..b71fae6 100644
--- a/templates/crash.html
+++ b/templates/crash.html
@@ -3,132 +3,76 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Crash - CS2 Simulator</title>
+    <title>Crash — CS2 Simulator</title>
     <link rel="stylesheet" href="/static/css/style.css">
     <style>
-        .crash-layout { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
-        .crash-canvas-container {
-            background: var(--bg-card);
-            border: 1px solid var(--border-color);
-            border-radius: 12px;
-            padding: 1rem;
-            position: relative;
-            overflow: hidden;
-        }
-        #crashCanvas { width: 100%; height: 350px; display: block; border-radius: 8px; }
-        .crash-overlay {
-            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
-            display: flex; flex-direction: column; align-items: center; justify-content: center;
-            pointer-events: none;
-        }
-        .crash-multiplier { font-size: 4rem; font-weight: 800; text-shadow: 0 0 40px rgba(34,197,94,0.5); transition: all 0.1s; }
-        .crash-multiplier.crashed { color: #ef4444; text-shadow: 0 0 40px rgba(239,68,68,0.5); animation: crashShake 0.5s ease; }
-        .crash-multiplier.waiting { font-size: 2rem; color: var(--text-secondary); text-shadow: none; }
-        .crash-multiplier.betting { font-size: 3rem; color: var(--primary-color); text-shadow: 0 0 30px rgba(59,130,246,0.3); }
-        @keyframes crashShake {
-            0%,100%{transform:translateX(0)}10%{transform:translateX(-10px)rotate(-2deg)}30%{transform:translateX(10px)rotate(2deg)}50%{transform:translateX(-8px)rotate(-1deg)}70%{transform:translateX(8px)rotate(1deg)}90%{transform:translateX(-4px)}
-        }
-        .crash-status-text { font-size: 1rem; color: var(--text-secondary); margin-top: 0.5rem; }
-        .crash-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
-        .crash-bet-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; }
-        .crash-players-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; max-height: 300px; overflow-y: auto; }
-        .crash-bet-input { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
-        .crash-bet-input input { flex: 1; padding: 0.75rem; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 8px; color: var(--text-color); font-size: 1.1rem; }
-        .quick-bet-btns { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.5rem; margin-bottom: 1rem; }
-        .quick-bet-btn { padding: 0.5rem; background: var(--bg-dark); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-color); cursor: pointer; font-size: 0.85rem; transition: all 0.2s; }
-        .quick-bet-btn:hover { border-color: var(--primary-color); }
-        .crash-btn { width: 100%; padding: 0.75rem; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
-        .crash-btn.bet { background: var(--primary-color); color: white; }
-        .crash-btn.bet:hover { filter: brightness(1.1); }
-        .crash-btn.bet.placed { background: #6366f1; }
-        .crash-btn.cashout { background: var(--success-color); color: white; }
-        .crash-btn.cashout:hover { filter: brightness(1.1); }
-        .crash-btn:disabled { opacity: 0.5; cursor: not-allowed; }
-        .crash-btn.hidden { display: none; }
-        .player-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--border-color); font-size: 0.85rem; }
-        .player-row:last-child { border-bottom: none; }
-        .player-row .payout { color: var(--success-color); font-weight: 600; }
-        .player-row .bet-amount { color: var(--text-secondary); }
-        .crash-history { display: flex; gap: 0.4rem; flex-wrap: wrap; padding: 0.5rem 0; }
-        .crash-history-item { padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
-        .crash-history-item.win { background: rgba(34,197,94,0.15); color: var(--success-color); }
-        .crash-history-item.loss { background: rgba(239,68,68,0.15); color: #ef4444; }
-        .cashout-progress { margin-top: 0.75rem; display: none; }
-        .cashout-progress.active { display: block; }
-        .cashout-slider { width: 100%; height: 6px; background: var(--bg-dark); border-radius: 3px; position: relative; overflow: hidden; }
-        .cashout-slider-fill { height: 100%; background: linear-gradient(90deg, var(--success-color), #f59e0b, #ef4444); border-radius: 3px; transition: width 0.1s; }
-        .cashout-label { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem; }
-        .crash-my-bet { margin-top: 0.5rem; padding: 0.5rem; background: var(--bg-dark); border-radius: 6px; text-align: center; font-size: 0.85rem; }
-        .crash-my-bet .bet-highlight { color: var(--primary-color); font-weight: 600; }
-        .crash-my-bet .win-highlight { color: var(--success-color); font-weight: 600; }
-        .crash-my-bet .lose-highlight { color: #ef4444; font-weight: 600; }
+        #crashCanvas { width:100%; height:350px; display:block; border-radius:8px; }
+        .crash-multiplier { font-size:4rem; font-weight:800; text-shadow:0 0 40px rgba(34,197,94,0.5); transition:all 0.1s; }
+        .crash-multiplier.crashed { color:#ef4444; text-shadow:0 0 40px rgba(239,68,68,0.5); animation:shake 0.5s ease; }
+        .crash-multiplier.waiting { font-size:2rem; color:var(--text-dim); text-shadow:none; }
+        .crash-multiplier.betting { font-size:3rem; color:var(--primary); text-shadow:0 0 30px rgba(59,130,246,0.3); }
+        .quick-bet-btn { padding:0.4rem; background:var(--bg-dark); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); cursor:pointer; font-size:0.78rem; transition:all 0.2s; }
+        .quick-bet-btn:hover { border-color:var(--primary); }
+        .cashout-slider { width:100%; height:6px; background:var(--bg-dark); border-radius:3px; overflow:hidden; }
+        .cashout-slider-fill { height:100%; background:linear-gradient(90deg,var(--success),#f59e0b,#ef4444); border-radius:3px; transition:width 0.1s; }
     </style>
 </head>
 <body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/crash" class="nav-link active">💥 Crash</a>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/crash" class="nav-link active">Crash</a>
                 <a href="/inventory" class="nav-link">Инвентарь</a>
-                <a href="/achievements" class="nav-link">🏆 Достижения</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
+                <a href="/achievements" class="nav-link">Достижения</a>
+                <a href="/activity" class="nav-link">Лента</a>
                 <a href="/profile" class="nav-link">Профиль</a>
                 <span class="user-balance">{{ "%.0f"|format(user.balance) }} ₽</span>
-                <button onclick="toggleSound()" class="btn btn-outline" id="soundToggle">🔊</button>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle">🎙️</button>
-                <button onclick="logout()" class="btn btn-outline">Выйти</button>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <button onclick="logout()" class="btn btn-ghost">Выйти</button>
             </div>
         </div>
     </nav>
 
-    <main class="container" style="padding: 2rem 1rem;">
-        <div class="crash-layout">
-            <div class="crash-canvas-container">
+    <main class="section">
+        <div class="container" style="max-width:960px;">
+            <div class="card" style="position:relative;overflow:hidden;">
                 <canvas id="crashCanvas"></canvas>
-                <div class="crash-overlay">
+                <div style="position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;">
                     <div class="crash-multiplier waiting" id="crashMultiplier">Ожидание...</div>
-                    <div class="crash-status-text" id="crashStatus">Следующий раунд скоро начнётся</div>
+                    <div class="text-dim text-sm" style="margin-top:0.5rem;" id="crashStatus">Следующий раунд скоро начнётся</div>
                 </div>
             </div>
 
-            <div class="crash-history" id="crashHistory"></div>
+            <div class="flex gap-2" style="flex-wrap:wrap;padding:0.5rem 0;" id="crashHistory"></div>
 
-            <div class="crash-controls">
-                <div class="crash-bet-panel">
-                    <h3>💰 Сделать ставку</h3>
-                    <div class="crash-bet-input">
-                        <input type="number" id="betAmount" value="100" min="1" step="1">
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;">
+                <div class="card">
+                    <h3 class="display-font" style="font-size:0.85rem;margin-bottom:0.75rem;">💰 Сделать ставку</h3>
+                    <div class="flex gap-2" style="margin-bottom:0.75rem;">
+                        <input type="number" id="betAmount" value="100" min="1" step="1" class="form-input" style="flex:1;">
                     </div>
-                    <div class="quick-bet-btns">
+                    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:0.35rem;margin-bottom:0.75rem;">
                         <button class="quick-bet-btn" onclick="setBet(50)">50</button>
                         <button class="quick-bet-btn" onclick="setBet(100)">100</button>
                         <button class="quick-bet-btn" onclick="setBet(500)">500</button>
                         <button class="quick-bet-btn" onclick="setBet(1000)">1K</button>
                     </div>
-                    <button class="crash-btn bet" id="betBtn" onclick="placeBet()">Сделать ставку</button>
-                    <button class="crash-btn cashout hidden" id="cashoutBtn" onclick="cashOut()">💰 Забрать</button>
-                    <div id="myBetDisplay" class="crash-my-bet" style="display:none;"></div>
-                    <div class="cashout-progress" id="cashoutProgress">
-                        <div class="cashout-slider">
-                            <div class="cashout-slider-fill" id="cashoutSliderFill" style="width:0%"></div>
-                        </div>
-                        <div class="cashout-label">
-                            <span>1.00x</span>
-                            <span id="cashoutMultLabel">1.00x</span>
-                        </div>
+                    <button class="btn btn-primary btn-block" id="betBtn" onclick="placeBet()">💰 Сделать ставку</button>
+                    <button class="btn btn-success btn-block" id="cashoutBtn" onclick="cashOut()" style="display:none;">💰 Забрать</button>
+                    <div id="myBetDisplay" style="display:none;margin-top:0.5rem;padding:0.4rem;background:var(--bg-dark);border-radius:var(--radius-sm);text-align:center;font-size:0.85rem;"></div>
+                    <div class="cashout-progress" id="cashoutProgress" style="display:none;margin-top:0.5rem;">
+                        <div class="cashout-slider"><div class="cashout-slider-fill" id="cashoutSliderFill" style="width:0%"></div></div>
+                        <div class="flex justify-between text-xs text-dim" style="margin-top:0.2rem;"><span>1.00x</span><span id="cashoutMultLabel">1.00x</span></div>
                     </div>
                 </div>
-                <div class="crash-players-panel">
-                    <h3>👥 Ставки</h3>
-                    <div id="playersList">
-                        <div style="color: var(--text-secondary); text-align: center; padding: 1rem;">
-                            Ожидание ставок...
-                        </div>
-                    </div>
+                <div class="card">
+                    <h3 class="display-font" style="font-size:0.85rem;margin-bottom:0.75rem;">👥 Ставки</h3>
+                    <div id="playersList"><div class="text-dim text-sm text-center" style="padding:1rem;">Ожидание ставок...</div></div>
                 </div>
             </div>
         </div>
@@ -138,380 +82,118 @@
     <script src="/static/js/websocket.js"></script>
     <script src="/static/js/safemode.js"></script>
     <script>
-        const canvas = document.getElementById('crashCanvas');
-        const ctx = canvas.getContext('2d');
-        const multiplierEl = document.getElementById('crashMultiplier');
-        const statusEl = document.getElementById('crashStatus');
-        const betBtn = document.getElementById('betBtn');
-        const cashoutBtn = document.getElementById('cashoutBtn');
-        const playersList = document.getElementById('playersList');
-        const historyEl = document.getElementById('crashHistory');
-        const betInput = document.getElementById('betAmount');
-        const myBetDisplay = document.getElementById('myBetDisplay');
-        const cashoutProgress = document.getElementById('cashoutProgress');
-        const cashoutSliderFill = document.getElementById('cashoutSliderFill');
-        const cashoutMultLabel = document.getElementById('cashoutMultLabel');
+        const canvas = document.getElementById('crashCanvas'), ctx = canvas.getContext('2d');
+        const multiplierEl = document.getElementById('crashMultiplier'), statusEl = document.getElementById('crashStatus');
+        const betBtn = document.getElementById('betBtn'), cashoutBtn = document.getElementById('cashoutBtn');
+        const playersList = document.getElementById('playersList'), historyEl = document.getElementById('crashHistory');
+        const betInput = document.getElementById('betAmount'), myBetDisplay = document.getElementById('myBetDisplay');
+        const cashoutProgress = document.getElementById('cashoutProgress'), cashoutSliderFill = document.getElementById('cashoutSliderFill'), cashoutMultLabel = document.getElementById('cashoutMultLabel');
+        let gameState = null, myActiveBet = null, myCashoutMult = null, lastPhase = null;
 
-        let gameState = null;
-        let myActiveBet = null;      // текущая ставка в этом раунде
-        let myCashoutMult = null;    // на каком множителе вывел (null = не вывел)
-        let lastPhase = null;
-
-        function resizeCanvas() {
-            const rect = canvas.parentElement.getBoundingClientRect();
-            canvas.width = canvas.clientWidth || rect.width - 32;
-            canvas.height = canvas.clientHeight || 350;
-        }
-        resizeCanvas();
-        window.addEventListener('resize', resizeCanvas);
-
-        function setBet(amount) { betInput.value = amount; SoundManager.click(); }
-
-        function expMult(t) { return Math.exp(t * 0.08); }
-        function timeForMult(m) { return Math.log(m) / 0.08; }
+        function resizeCanvas() { const r = canvas.parentElement.getBoundingClientRect(); canvas.width = canvas.clientWidth || r.width-32; canvas.height = canvas.clientHeight || 350; }
+        resizeCanvas(); window.addEventListener('resize', resizeCanvas);
+        function setBet(a) { betInput.value = a; SoundManager.click(); }
+        function expMult(t) { return Math.exp(t*0.08); }
+        function timeForMult(m) { return Math.log(m)/0.08; }
 
         let graphPoints = [];
-        const GRAPH_WINDOW = 15; // секунд в окне
+        const GRAPH_WINDOW = 15;
 
         function drawGraph() {
-            const w = canvas.width, h = canvas.height, pad = 40;
-            const drawW = w - pad * 2, drawH = h - pad * 2;
-            ctx.clearRect(0, 0, w, h);
-
-            if (!gameState || gameState.phase === 'waiting') {
-                ctx.fillStyle = 'rgba(255,255,255,0.08)';
-                ctx.font = '20px sans-serif';
-                ctx.textAlign = 'center';
-                ctx.fillText('💥 Crash', w/2, h/2);
-                return;
-            }
-
-            const phase = gameState.phase;
-            const curMult = gameState.current_multiplier || 1;
-            const crashPoint = gameState.crash_point || 100;
-            const isCrashed = phase === 'crashed';
-            const isRunning = phase === 'running';
-
-            // Добавляем текущую точку в историю
-            if (isRunning && curMult > 1) {
-                const now = performance.now() / 1000;
-                graphPoints.push({ t: now, m: curMult });
-                // Отсекаем точки за пределами окна
-                const cutoff = now - GRAPH_WINDOW;
-                graphPoints = graphPoints.filter(p => p.t >= cutoff);
-                if (graphPoints.length > 500) graphPoints = graphPoints.slice(-500);
-            } else if (isCrashed) {
-                graphPoints = [];
-            }
-
-            // Определяем диапазон мультипликаторов для оси Y
-            let maxY = 2;
-            if (graphPoints.length > 0) {
-                maxY = Math.max(...graphPoints.map(p => p.m));
-            }
-            maxY = Math.max(maxY, curMult + 1, crashPoint, 3);
-            maxY = Math.min(maxY, 200); // не растягивать до небес
-            maxY = Math.ceil(maxY);
-
-            // Сетка
-            ctx.strokeStyle = 'rgba(255,255,255,0.04)';
-            ctx.lineWidth = 1;
-            const gridLines = 5;
-            ctx.font = '10px sans-serif';
-            ctx.textAlign = 'right';
-            for (let i = 1; i <= gridLines; i++) {
-                const y = h - pad - (i / gridLines) * drawH;
-                ctx.beginPath(); ctx.moveTo(pad, y); ctx.lineTo(w - pad, y); ctx.stroke();
-                const multLabel = 1 + (maxY - 1) * (i / gridLines);
-                ctx.fillStyle = 'rgba(255,255,255,0.12)';
-                ctx.fillText(`x${multLabel.toFixed(1)}`, pad - 6, y + 3);
-            }
-
-            // Рисуем кривую
-            if (graphPoints.length < 2) {
-                if (isCrashed) {
-                    ctx.fillStyle = 'rgba(239,68,68,0.5)';
-                    ctx.font = '36px sans-serif';
-                    ctx.textAlign = 'center';
-                    ctx.fillText(`💥 x${crashPoint.toFixed(2)}`, w/2, h/2);
-                }
-                return;
-            }
-
-            const color = isCrashed ? '#ef4444' : '#22c55e';
-            const now = performance.now() / 1000;
-            const windowStart = now - GRAPH_WINDOW;
-
-            ctx.beginPath();
-            ctx.strokeStyle = color;
-            ctx.lineWidth = 3;
-            ctx.shadowColor = color;
-            ctx.shadowBlur = 10;
-
+            const w = canvas.width, h = canvas.height, pad = 40, drawW = w-pad*2, drawH = h-pad*2;
+            ctx.clearRect(0,0,w,h);
+            if (!gameState || gameState.phase === 'waiting') { ctx.fillStyle = 'rgba(255,255,255,0.08)'; ctx.font = '20px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('💥 Crash', w/2, h/2); return; }
+            const phase = gameState.phase, curMult = gameState.current_multiplier||1, crashPoint = gameState.crash_point||100, isCrashed = phase === 'crashed', isRunning = phase === 'running';
+            if (isRunning && curMult > 1) { const now = performance.now()/1000; graphPoints.push({t:now, m:curMult}); const cutoff = now - GRAPH_WINDOW; graphPoints = graphPoints.filter(p => p.t >= cutoff); if (graphPoints.length > 500) graphPoints = graphPoints.slice(-500); }
+            else if (isCrashed) graphPoints = [];
+            let maxY = 2; if (graphPoints.length > 0) maxY = Math.max(...graphPoints.map(p=>p.m)); maxY = Math.max(maxY, curMult+1, crashPoint, 3); maxY = Math.min(maxY, 200); maxY = Math.ceil(maxY);
+            ctx.strokeStyle = 'rgba(255,255,255,0.04)'; ctx.lineWidth = 1; ctx.font = '10px sans-serif'; ctx.textAlign = 'right';
+            for (let i = 1; i <= 5; i++) { const y = h-pad-(i/5)*drawH; ctx.beginPath(); ctx.moveTo(pad,y); ctx.lineTo(w-pad,y); ctx.stroke(); const multLabel = 1+(maxY-1)*(i/5); ctx.fillStyle = 'rgba(255,255,255,0.12)'; ctx.fillText(`x${multLabel.toFixed(1)}`, pad-6, y+3); }
+            if (graphPoints.length < 2) { if (isCrashed) { ctx.fillStyle = 'rgba(239,68,68,0.5)'; ctx.font = '36px sans-serif'; ctx.textAlign = 'center'; ctx.fillText(`💥 x${crashPoint.toFixed(2)}`, w/2, h/2); } return; }
+            const color = isCrashed ? '#ef4444' : '#22c55e'; const now = performance.now()/1000, windowStart = now - GRAPH_WINDOW;
+            ctx.beginPath(); ctx.strokeStyle = color; ctx.lineWidth = 3; ctx.shadowColor = color; ctx.shadowBlur = 10;
             let first = true;
-            for (const p of graphPoints) {
-                const x = pad + ((p.t - windowStart) / GRAPH_WINDOW) * drawW;
-                const y = h - pad - ((p.m - 1) / (maxY - 1)) * drawH;
-                if (first) { ctx.moveTo(x, y); first = false; }
-                else ctx.lineTo(x, y);
-            }
-
-            ctx.stroke();
-            ctx.shadowBlur = 0;
-
-            // Текущая точка (справа, на последнем значении)
-            if (isRunning && curMult > 1) {
-                const lastPt = graphPoints[graphPoints.length - 1];
-                const x = pad + ((lastPt.t - windowStart) / GRAPH_WINDOW) * drawW;
-                const y = h - pad - ((lastPt.m - 1) / (maxY - 1)) * drawH;
-
-                ctx.beginPath();
-                ctx.arc(x, y, 5, 0, Math.PI * 2);
-                ctx.fillStyle = '#22c55e';
-                ctx.fill();
-                ctx.shadowColor = '#22c55e';
-                ctx.shadowBlur = 20;
-                ctx.beginPath();
-                ctx.arc(x, y, 8, 0, Math.PI * 2);
-                ctx.strokeStyle = 'rgba(34,197,94,0.4)';
-                ctx.lineWidth = 2;
-                ctx.stroke();
-                ctx.shadowBlur = 0;
-            }
-
-            // Беттинг фаза — таймер
-            if (phase === 'betting') {
-                ctx.fillStyle = 'rgba(255,255,255,0.06)';
-                ctx.font = '40px sans-serif';
-                ctx.textAlign = 'center';
-                ctx.fillText(`⏱ ${gameState.timer}`, w/2, h/2 + 10);
-            }
+            for (const p of graphPoints) { const x = pad+((p.t-windowStart)/GRAPH_WINDOW)*drawW, y = h-pad-((p.m-1)/(maxY-1))*drawH; if (first) { ctx.moveTo(x,y); first=false; } else ctx.lineTo(x,y); }
+            ctx.stroke(); ctx.shadowBlur = 0;
+            if (isRunning && curMult > 1) { const lastPt = graphPoints[graphPoints.length-1]; const x = pad+((lastPt.t-windowStart)/GRAPH_WINDOW)*drawW, y = h-pad-((lastPt.m-1)/(maxY-1))*drawH; ctx.beginPath(); ctx.arc(x,y,5,0,Math.PI*2); ctx.fillStyle = '#22c55e'; ctx.fill(); }
+            if (phase === 'betting') { ctx.fillStyle = 'rgba(255,255,255,0.06)'; ctx.font = '40px sans-serif'; ctx.textAlign = 'center'; ctx.fillText(`⏱ ${gameState.timer}`, w/2, h/2+10); }
         }
 
         function updateUI() {
             if (!gameState) return;
             const phase = gameState.phase;
-
-            // Обновляем множитель и статус
-            if (phase === 'waiting') {
-                multiplierEl.className = 'crash-multiplier waiting';
-                multiplierEl.textContent = 'Ожидание...';
-                statusEl.textContent = 'Следующий раунд скоро начнётся';
-            } else if (phase === 'betting') {
-                multiplierEl.className = 'crash-multiplier betting';
-                multiplierEl.textContent = `${gameState.timer}`;
-                statusEl.textContent = 'Делайте ставки!';
-            } else if (phase === 'running') {
-                const mult = gameState.current_multiplier;
-                multiplierEl.className = 'crash-multiplier';
-                multiplierEl.textContent = `x${mult.toFixed(2)}`;
-                statusEl.textContent = '🚀 Взлетаем!';
-                if (myActiveBet && myCashoutMult === null) {
-                    const prog = Math.min(100, ((mult - 1) / 15) * 100);
-                    cashoutSliderFill.style.width = `${prog}%`;
-                    cashoutMultLabel.textContent = `x${mult.toFixed(2)}`;
-                }
-            } else if (phase === 'crashed') {
-                multiplierEl.className = 'crash-multiplier crashed';
-                multiplierEl.textContent = `💥 x${gameState.crash_point.toFixed(2)}`;
-                statusEl.textContent = 'Краш!';
-            }
-
-            // Кнопки
-            const canBet = phase === 'betting';
-            const canCashout = phase === 'running' && myActiveBet !== null && myCashoutMult === null;
-
-            betBtn.classList.toggle('hidden', !canBet && !(phase === 'betting' && myActiveBet));
-            if (canBet) {
-                betBtn.disabled = false;
-                betBtn.textContent = myActiveBet ? `Ставка: ${myActiveBet} ₽` : '💰 Сделать ставку';
-                betBtn.className = 'crash-btn bet' + (myActiveBet ? ' placed' : '');
-            }
-
-            cashoutBtn.classList.toggle('hidden', !canCashout);
-            if (canCashout) {
-                cashoutBtn.disabled = false;
-                cashoutBtn.textContent = `💰 Забрать (x${gameState.current_multiplier.toFixed(2)})`;
-            }
-
-            cashoutProgress.classList.toggle('active', phase === 'running' && myActiveBet !== null && myCashoutMult === null);
-
-            // Статус моей ставки
+            if (phase === 'waiting') { multiplierEl.className = 'crash-multiplier waiting'; multiplierEl.textContent = 'Ожидание...'; statusEl.textContent = 'Следующий раунд скоро начнётся'; }
+            else if (phase === 'betting') { multiplierEl.className = 'crash-multiplier betting'; multiplierEl.textContent = `${gameState.timer}`; statusEl.textContent = 'Делайте ставки!'; }
+            else if (phase === 'running') { const mult = gameState.current_multiplier; multiplierEl.className = 'crash-multiplier'; multiplierEl.textContent = `x${mult.toFixed(2)}`; statusEl.textContent = '🚀 Взлетаем!'; if (myActiveBet && myCashoutMult === null) { cashoutSliderFill.style.width = `${Math.min(100,((mult-1)/15)*100)}%`; cashoutMultLabel.textContent = `x${mult.toFixed(2)}`; } }
+            else if (phase === 'crashed') { multiplierEl.className = 'crash-multiplier crashed'; multiplierEl.textContent = `💥 x${gameState.crash_point.toFixed(2)}`; statusEl.textContent = 'Краш!'; }
+            const canBet = phase === 'betting', canCashout = phase === 'running' && myActiveBet !== null && myCashoutMult === null;
+            if (canBet) { betBtn.style.display = ''; betBtn.disabled = false; betBtn.textContent = myActiveBet ? `Ставка: ${myActiveBet} ₽` : '💰 Сделать ставку'; betBtn.className = 'btn btn-primary btn-block'; if (myActiveBet) betBtn.className = 'btn btn-outline btn-block'; }
+            else betBtn.style.display = canCashout ? 'none' : '';
+            cashoutBtn.style.display = canCashout ? '' : 'none';
+            if (canCashout) cashoutBtn.textContent = `💰 Забрать (x${gameState.current_multiplier.toFixed(2)})`;
+            cashoutProgress.style.display = (phase === 'running' && myActiveBet !== null && myCashoutMult === null) ? 'block' : 'none';
             if (myActiveBet !== null) {
-                if (myCashoutMult !== null) {
-                    const payout = myActiveBet * myCashoutMult;
-                    myBetDisplay.style.display = 'block';
-                    myBetDisplay.innerHTML = `
-                        ✅ Вывел(а) <span class="win-highlight">${payout.toFixed(0)} ₽</span>
-                        на x${myCashoutMult.toFixed(2)}
-                    `;
-                } else if (phase === 'crashed') {
-                    myBetDisplay.style.display = 'block';
-                    myBetDisplay.innerHTML = `
-                        ❌ Проиграно <span class="lose-highlight">${myActiveBet.toFixed(0)} ₽</span>
-                    `;
-                } else if (phase === 'running') {
-                    const potential = myActiveBet * gameState.current_multiplier;
-                    myBetDisplay.style.display = 'block';
-                    myBetDisplay.innerHTML = `
-                        Ставка: <span class="bet-highlight">${myActiveBet.toFixed(0)} ₽</span>
-                        → ${potential.toFixed(0)} ₽
-                    `;
-                } else {
-                    myBetDisplay.style.display = 'block';
-                    myBetDisplay.innerHTML = `
-                        Ставка: <span class="bet-highlight">${myActiveBet.toFixed(0)} ₽</span>
-                    `;
-                }
-            } else {
-                myBetDisplay.style.display = 'none';
-            }
-
-            // Звуки на смену фазы
+                myBetDisplay.style.display = 'block';
+                if (myCashoutMult !== null) myBetDisplay.innerHTML = `✅ Вывел(а) <span style="color:var(--success);font-weight:600;">${(myActiveBet*myCashoutMult).toFixed(0)} ₽</span> на x${myCashoutMult.toFixed(2)}`;
+                else if (phase === 'crashed') myBetDisplay.innerHTML = `❌ Проиграно <span style="color:#ef4444;font-weight:600;">${myActiveBet.toFixed(0)} ₽</span>`;
+                else if (phase === 'running') myBetDisplay.innerHTML = `Ставка: <span style="color:var(--primary);font-weight:600;">${myActiveBet.toFixed(0)} ₽</span> → ${(myActiveBet*gameState.current_multiplier).toFixed(0)} ₽`;
+                else myBetDisplay.innerHTML = `Ставка: <span style="color:var(--primary);font-weight:600;">${myActiveBet.toFixed(0)} ₽</span>`;
+            } else myBetDisplay.style.display = 'none';
             if (lastPhase !== phase) {
                 if (phase === 'running') SoundManager.crashBet();
-                if (phase === 'crashed') SoundManager.crashCrashed();
+                if (phase === 'crashed') { SoundManager.crashCrashed(); myActiveBet = null; myCashoutMult = null; }
+                if (phase === 'betting' && (lastPhase === 'crashed' || lastPhase === 'waiting')) { myActiveBet = null; myCashoutMult = null; }
                 lastPhase = phase;
             }
-
-            updatePlayers();
-            updateHistory();
-            drawGraph();
+            updatePlayers(); updateHistory(); drawGraph();
         }
 
         function updatePlayers() {
             if (!gameState) return;
-            const bc = gameState.bet_count || 0;
-            if (bc === 0) {
-                playersList.innerHTML = '<div style="color:var(--text-secondary);text-align:center;padding:1rem;">Пока нет ставок</div>';
-                return;
-            }
-
-            const cashed = gameState.cashed_out || {};
-            const cashCount = Object.keys(cashed).length;
-
-            let html = `<div class="player-row" style="font-weight:600;border-bottom:2px solid var(--border-color);">
-                <span>Ставок: ${bc}</span>
-                <span>Сумма: ${(gameState.total_bets || 0).toFixed(0)} ₽</span>
-                <span>Вывели: ${cashCount}</span>
-            </div>`;
-
+            const bc = gameState.bet_count||0;
+            if (bc === 0) { playersList.innerHTML = '<div class="text-dim text-sm text-center" style="padding:1rem;">Пока нет ставок</div>'; return; }
+            const cashed = gameState.cashed_out||{};
+            let html = `<div class="flex justify-between text-xs" style="font-weight:600;padding:0.3rem 0;border-bottom:1px solid var(--border);"><span>Ставок: ${bc}</span><span>Сумма: ${(gameState.total_bets||0).toFixed(0)} ₽</span><span>Вывели: ${Object.keys(cashed).length}</span></div>`;
             if (gameState.phase === 'running' || gameState.phase === 'crashed') {
-                const mult = gameState.current_multiplier || gameState.crash_point;
                 for (const [uid, m] of Object.entries(cashed)) {
                     const isMe = myActiveBet !== null && parseInt(uid) === 0;
-                    html += `<div class="player-row" style="${isMe ? 'color:var(--success-color)' : ''}">
-                        <span>${isMe ? 'Вы' : 'Игрок #' + uid.slice(-4)}</span>
-                        <span class="payout">✅ x${m.toFixed(2)}</span>
-                    </div>`;
+                    html += `<div class="flex justify-between text-xs" style="padding:0.25rem 0;${isMe?'color:var(--success)':''}"><span>${isMe?'Вы':'Игрок #'+uid.slice(-4)}</span><span style="color:var(--success);font-weight:600;">✅ x${m.toFixed(2)}</span></div>`;
                 }
             }
-
             playersList.innerHTML = html;
         }
 
         function updateHistory() {
             if (!gameState || !gameState.history) return;
-            historyEl.innerHTML = gameState.history.slice().reverse().map(m => {
-                const isWin = m > 2;
-                return `<span class="crash-history-item ${isWin ? 'win' : 'loss'}">x${m.toFixed(2)}</span>`;
-            }).join('');
+            historyEl.innerHTML = gameState.history.slice().reverse().map(m => `<span style="padding:0.15rem 0.45rem;border-radius:4px;font-size:0.7rem;font-weight:600;${m>2?'background:rgba(34,197,94,0.15);color:var(--success)':'background:rgba(239,68,68,0.15);color:#ef4444'}">x${m.toFixed(2)}</span>`).join('');
         }
 
-        // WebSocket events
-        WS.on('crash_state', (data) => {
-            if (!data.game) return;
-            gameState = data.game;
-            // При краше сбрасываем мою ставку т.к. раунд закончился
-            if (gameState.phase === 'crashed' && lastPhase === 'running') {
-                // Если не вывел и краш — ставка проиграна, но стейт остается
-            }
-            if (gameState.phase === 'waiting' || gameState.phase === 'betting') {
-                // Новый раунд — если у меня была ставка, её уже нет (проиграна/выведена)
-                if (lastPhase === 'crashed' || lastPhase === 'running') {
-                    if (myCashoutMult === null && myActiveBet !== null && gameState.phase === 'betting') {
-                        // Ставка проиграна в прошлом раунде
-                    }
-                }
-                if (gameState.phase === 'betting') {
-                    // Если начался новый раунд betting и мы не обнулились — 
-                    // это новый раунд. Старая ставка аннулируется.
-                    if (lastPhase === 'crashed' || lastPhase === 'waiting') {
-                        myActiveBet = null;
-                        myCashoutMult = null;
-                    }
-                }
-            }
-            updateUI();
-        });
+        WS.on('crash_state', (data) => { if (!data.game) return; gameState = data.game; updateUI(); });
 
         async function placeBet() {
             const amount = parseInt(betInput.value);
-            if (!amount || amount <= 0) {
-                SoundManager.error();
-                return;
-            }
-
-            const formData = new FormData();
-            formData.append('amount', amount);
-
+            if (!amount || amount <= 0) { SoundManager.error(); return; }
+            const fd = new FormData(); fd.append('amount', amount);
             try {
-                const res = await fetch('/web/api/crash/bet', { method: 'POST', body: formData });
+                const res = await fetch('/web/api/crash/bet', { method:'POST', body:fd });
                 const data = await res.json();
-                if (data.success) {
-                    myActiveBet = data.bet;
-                    myCashoutMult = null;
-                    SoundManager.crashBet();
-                    document.querySelectorAll('.user-balance').forEach(el => {
-                        el.textContent = `${Math.floor(data.new_balance)} ₽`;
-                    });
-                    updateUI();
-                } else {
-                    SoundManager.error();
-                    alert(data.error);
-                }
-            } catch (e) {
-                SoundManager.error();
-                alert('Ошибка соединения');
-            }
+                if (data.success) { myActiveBet = data.bet; myCashoutMult = null; SoundManager.crashBet(); document.querySelectorAll('.user-balance').forEach(el => el.textContent = `${Math.floor(data.new_balance)} ₽`); updateUI(); }
+                else { SoundManager.error(); alert(data.error); }
+            } catch(e) { SoundManager.error(); alert('Ошибка соединения'); }
         }
 
         async function cashOut() {
             if (!myActiveBet || myCashoutMult !== null) return;
-
             try {
-                const res = await fetch('/web/api/crash/cashout', { method: 'POST' });
+                const res = await fetch('/web/api/crash/cashout', { method:'POST' });
                 const data = await res.json();
-                if (data.success) {
-                    myCashoutMult = data.multiplier;
-                    SoundManager.crashCashout();
-                    document.querySelectorAll('.user-balance').forEach(el => {
-                        el.textContent = `${Math.floor(data.new_balance)} ₽`;
-                    });
-                    updateUI();
-                } else {
-                    SoundManager.error();
-                    alert(data.error);
-                }
-            } catch (e) {
-                SoundManager.error();
-                alert('Ошибка соединения');
-            }
+                if (data.success) { myCashoutMult = data.multiplier; SoundManager.crashCashout(myCashoutMult); document.querySelectorAll('.user-balance').forEach(el => el.textContent = `${Math.floor(data.new_balance)} ₽`); updateUI(); }
+                else { SoundManager.error(); alert(data.error); }
+            } catch(e) { SoundManager.error(); alert('Ошибка соединения'); }
         }
 
-        async function logout() {
-            await fetch('/web/api/auth/logout', { method: 'POST' });
-            window.location.href = '/';
-        }
-
-        function toggleSound() {
-            const enabled = SoundManager.toggle();
-            document.getElementById('soundToggle').textContent = enabled ? '🔊' : '🔇';
-        }
-        document.addEventListener('DOMContentLoaded', () => {
-            const btn = document.getElementById('soundToggle');
-            if (btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇';
-        });
+        function toggleSound() { const e = SoundManager.toggle(); document.getElementById('soundToggle').textContent = e ? '🔊' : '🔇'; }
+        document.addEventListener('DOMContentLoaded', () => { const btn = document.getElementById('soundToggle'); if(btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇'; });
     </script>
 {% include '_activity_sidebar.html' %}
 </body>
diff --git a/templates/index.html b/templates/index.html
index 6bfc024..578f072 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -9,50 +9,49 @@
 <body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/activity" class="nav-link">Лента</a>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
                 <a href="/login" class="btn btn-outline">Войти</a>
                 <a href="/register" class="btn btn-primary">Регистрация</a>
             </div>
         </div>
     </nav>
 
-    <main class="hero">
+    <section class="hero">
         <div class="container">
             <h1>CS2 Trade-Up Simulator</h1>
             <p class="hero-subtitle">Открывай кейсы, собирай скины и создавай контракты</p>
-            
-            <div class="features">
-                <div class="feature-card">
-                    <div class="feature-icon">📦</div>
-                    <h3>Открывай кейсы</h3>
-                    <p>Испытай удачу и получи редкие скины</p>
+            <div class="grid grid-3" style="max-width:750px;margin:0 auto 2.5rem;">
+                <div class="card card-hover" style="text-align:center;padding:1.5rem 1rem;">
+                    <div style="font-size:2rem;margin-bottom:0.5rem;" class="display-font">📦</div>
+                    <h3 style="font-family:var(--font-display);font-size:0.95rem;margin-bottom:0.3rem;">Открывай кейсы</h3>
+                    <p class="text-dim text-sm">Испытай удачу и получи редкие скины</p>
                 </div>
-                <div class="feature-card">
-                    <div class="feature-icon">🔄</div>
-                    <h3>Создавай контракты</h3>
-                    <p>Обменивай 10 скинов на один более редкий</p>
+                <div class="card card-hover" style="text-align:center;padding:1.5rem 1rem;">
+                    <div style="font-size:2rem;margin-bottom:0.5rem;" class="display-font">🔄</div>
+                    <h3 style="font-family:var(--font-display);font-size:0.95rem;margin-bottom:0.3rem;">Создавай контракты</h3>
+                    <p class="text-dim text-sm">Обменивай 10 скинов на один более редкий</p>
                 </div>
-                <div class="feature-card">
-                    <div class="feature-icon">📊</div>
-                    <h3>Собирай коллекцию</h3>
-                    <p>Отслеживай свой прогресс и статистику</p>
+                <div class="card card-hover" style="text-align:center;padding:1.5rem 1rem;">
+                    <div style="font-size:2rem;margin-bottom:0.5rem;" class="display-font">📊</div>
+                    <h3 style="font-family:var(--font-display);font-size:0.95rem;margin-bottom:0.3rem;">Собирай коллекцию</h3>
+                    <p class="text-dim text-sm">Отслеживай свой прогресс и статистику</p>
                 </div>
             </div>
-            
             <div class="hero-actions">
                 <a href="/register" class="btn btn-primary btn-large">Начать играть</a>
                 <a href="/login" class="btn btn-outline btn-large">Уже есть аккаунт</a>
             </div>
         </div>
-    </main>
+    </section>
 
     <script src="/static/js/app.js"></script>
     <script src="/static/js/safemode.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/inventory.html b/templates/inventory.html
index 423fda6..301e107 100644
--- a/templates/inventory.html
+++ b/templates/inventory.html
@@ -3,276 +3,70 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Инвентарь - CS2 Simulator</title>
+    <title>Инвентарь — CS2 Simulator</title>
     <link rel="stylesheet" href="/static/css/style.css">
-    <style>
-        .inventory-actions {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            margin-bottom: 1rem;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-        
-        .selection-controls {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-        
-        .select-all-checkbox {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            cursor: pointer;
-        }
-        
-        .select-all-checkbox input {
-            width: 18px;
-            height: 18px;
-            cursor: pointer;
-        }
-        
-        .sell-selected-btn {
-            padding: 0.5rem 1.5rem;
-            background: var(--danger-color);
-            color: white;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            font-weight: 500;
-            transition: all 0.2s;
-        }
-        
-        .sell-selected-btn:hover {
-            background: #dc2626;
-            transform: translateY(-1px);
-        }
-        
-        .sell-selected-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-        
-        .sell-all-btn {
-            padding: 0.5rem 1.5rem;
-            background: transparent;
-            color: var(--danger-color);
-            border: 1px solid var(--danger-color);
-            border-radius: 8px;
-            cursor: pointer;
-            font-weight: 500;
-            transition: all 0.2s;
-        }
-        
-        .sell-all-btn:hover {
-            background: rgba(239, 68, 68, 0.1);
-        }
-        
-        .inventory-skin-card {
-            position: relative;
-        }
-        
-        .item-select-checkbox {
-            position: absolute;
-            top: 8px;
-            left: 8px;
-            width: 20px;
-            height: 20px;
-            cursor: pointer;
-            z-index: 10;
-            accent-color: var(--primary-color);
-        }
-        
-        .inventory-skin-card.selected-for-sale {
-            border-color: var(--danger-color);
-            box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
-        }
-        
-        .selected-count-badge {
-            background: var(--danger-color);
-            color: white;
-            padding: 0.25rem 0.75rem;
-            border-radius: 20px;
-            font-size: 0.85rem;
-            font-weight: 500;
-        }
-        
-        .total-price-badge {
-            background: var(--success-color);
-            color: white;
-            padding: 0.25rem 0.75rem;
-            border-radius: 20px;
-            font-size: 0.85rem;
-            font-weight: 500;
-        }
-        
-        .item-actions {
-            display: flex;
-            gap: 0.5rem;
-            margin-top: 8px;
-        }
-        
-        .btn-sell-single {
-            flex: 1;
-            padding: 0.25rem;
-            background: transparent;
-            border: 1px solid var(--danger-color);
-            color: var(--danger-color);
-            border-radius: 4px;
-            cursor: pointer;
-            font-size: 0.75rem;
-            transition: all 0.2s;
-        }
-        
-        .btn-sell-single:hover {
-            background: var(--danger-color);
-            color: white;
-        }
-        
-        .filter-bar {
-            display: flex;
-            gap: 0.5rem;
-            flex-wrap: wrap;
-        }
-        
-        .bulk-sell-modal {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.8);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-        }
-        
-        .bulk-sell-content {
-            background: var(--bg-card);
-            padding: 2rem;
-            border-radius: 12px;
-            max-width: 400px;
-            width: 90%;
-        }
-        
-        .bulk-sell-content h3 {
-            margin-bottom: 1rem;
-        }
-        
-        .bulk-sell-options {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
-            margin: 1.5rem 0;
-        }
-        
-        .bulk-sell-option {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            padding: 0.75rem;
-            background: var(--bg-dark);
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        
-        .bulk-sell-option:hover {
-            background: var(--bg-light);
-        }
-        
-        .bulk-sell-option input {
-            width: 18px;
-            height: 18px;
-        }
-        
-        .bulk-sell-actions {
-            display: flex;
-            gap: 1rem;
-            justify-content: flex-end;
-        }
-    </style>
 </head>
 <body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/crash" class="nav-link">💥 Crash</a>
-                <a href="/inventory" class="nav-link">Инвентарь</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
-                <a href="/achievements" class="nav-link">🏆 Достижения</a>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/crash" class="nav-link">Crash</a>
+                <a href="/inventory" class="nav-link active">Инвентарь</a>
+                <a href="/activity" class="nav-link">Лента</a>
+                <a href="/achievements" class="nav-link">Достижения</a>
                 <a href="/profile" class="nav-link">Профиль</a>
                 <span class="user-balance">{{ "%.2f"|format(user.balance) }} ₽</span>
-                <button onclick="toggleSound()" class="btn btn-outline" id="soundToggle" title="Звук">🔊</button>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
-                <button onclick="logout()" class="btn btn-outline">Выйти</button>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <button onclick="logout()" class="btn btn-ghost">Выйти</button>
             </div>
         </div>
     </nav>
 
-    <main class="inventory-container">
+    <main class="section">
         <div class="container">
-            <div class="inventory-header">
+            <div class="section-header">
                 <div>
-                    <h1>🎒 Инвентарь</h1>
-                    <p class="page-subtitle">Всего предметов: <span id="totalItemsCount">{{ inventory_items|length }}</span></p>
+                    <h1 class="section-title">🎒 Инвентарь</h1>
+                    <p class="section-subtitle">Всего предметов: <span id="totalItemsCount">{{ inventory_items|length }}</span></p>
                 </div>
-                
-                <div class="inventory-actions">
-                    <div class="selection-controls">
-                        <label class="select-all-checkbox">
-                            <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll()">
-                            <span>Выбрать все</span>
-                        </label>
-                        <span class="selected-count-badge" id="selectedCountBadge" style="display: none;">0</span>
-                        <span class="total-price-badge" id="totalPriceBadge" style="display: none;">0 ₽</span>
-                    </div>
-                    
-                    <div style="display: flex; gap: 0.75rem;">
-                        <button class="sell-selected-btn" id="sellSelectedBtn" onclick="sellSelected()" disabled>
-                            💰 Продать выбранные
-                        </button>
-                        <button class="sell-all-btn" onclick="openBulkSellModal()">
-                            📦 Массовая продажа
-                        </button>
-                    </div>
+                <div class="flex gap-2" style="flex-wrap:wrap;">
+                    <label class="form-checkbox">
+                        <input type="checkbox" id="selectAllCheckbox" onchange="toggleSelectAll()">
+                        <span class="text-sm">Все</span>
+                    </label>
+                    <span class="badge badge-red" id="selectedCountBadge" style="display:none;">0</span>
+                    <span class="badge badge-green" id="totalPriceBadge" style="display:none;">0 ₽</span>
+                    <button class="btn btn-danger btn-sm" id="sellSelectedBtn" onclick="sellSelected()" disabled>Продать</button>
+                    <button class="btn btn-outline btn-sm" onclick="openBulkSellModal()">Массовая продажа</button>
                 </div>
             </div>
-            
-            <div class="inventory-filters">
-                <div class="filter-bar">
-                    <select id="rarityFilter" class="filter-select" onchange="filterItems()">
-                        <option value="">Все редкости</option>
-                        {% for rarity in rarities %}
-                        <option value="{{ rarity }}">{{ rarity }}</option>
-                        {% endfor %}
-                    </select>
-                    
-                    <select id="typeFilter" class="filter-select" onchange="filterItems()">
-                        <option value="">Все типы</option>
-                        {% for type in types %}
-                        <option value="{{ type }}">{{ type }}</option>
-                        {% endfor %}
-                    </select>
-                    
-                    <input type="text" id="searchInput" class="filter-select" 
-                           placeholder="Поиск по названию..." oninput="filterItems()">
-                    
-                    <button onclick="resetFilters()" class="btn btn-outline">Сбросить</button>
-                </div>
+
+            <div class="filter-bar">
+                <select id="rarityFilter" class="form-select" style="width:auto;min-width:140px;" onchange="filterItems()">
+                    <option value="">Все редкости</option>
+                    {% for rarity in rarities %}
+                    <option value="{{ rarity }}">{{ rarity }}</option>
+                    {% endfor %}
+                </select>
+                <select id="typeFilter" class="form-select" style="width:auto;min-width:120px;" onchange="filterItems()">
+                    <option value="">Все типы</option>
+                    {% for type in types %}
+                    <option value="{{ type }}">{{ type }}</option>
+                    {% endfor %}
+                </select>
+                <input type="text" id="searchInput" class="form-input" placeholder="Поиск..." oninput="filterItems()" style="min-width:160px;">
+                <button onclick="resetFilters()" class="btn btn-ghost btn-sm">Сбросить</button>
             </div>
-            
+
             {% if inventory_items %}
-            <div class="inventory-grid-detailed" id="inventoryGrid">
+            <div class="grid grid-auto-sm" id="inventoryGrid">
                 {% for item in inventory_items %}
-                <div class="inventory-skin-card rarity-{{ item.rarity|lower|replace(' ', '-') }}"
+                <div class="card" style="position:relative;padding:0.85rem;"
                      data-inventory-id="{{ item.id }}"
                      data-rarity="{{ item.rarity }}"
                      data-type="{{ item.type }}"
@@ -281,67 +75,55 @@
                     <input type="checkbox" class="item-select-checkbox" 
                            onchange="onItemSelect(this)" 
                            data-id="{{ item.id }}"
-                           data-price="{{ item.price_rub or 100 }}">
-                    
-                    <div class="skin-image-container">
-                        <img src="{{ item.image_url or '/static/placeholder.png' }}" 
-                             alt="{{ item.name }}" 
-                             class="skin-image"
+                           data-price="{{ item.price_rub or 100 }}"
+                           style="position:absolute;top:8px;left:8px;width:18px;height:18px;accent-color:var(--primary);z-index:2;cursor:pointer;">
+                    <div style="width:100%;height:90px;display:flex;align-items:center;justify-content:center;background:var(--bg-dark);border-radius:var(--radius-sm);margin-bottom:0.5rem;">
+                        <img src="{{ item.image_url or '/static/placeholder.png' }}" alt="{{ item.name }}" 
+                             style="max-width:85%;max-height:80px;object-fit:contain;"
                              onerror="this.src='/static/placeholder.png'">
                     </div>
-                    <div class="skin-info">
-                        <div class="skin-name" title="{{ item.name }}">{{ item.name }}</div>
-                        <div class="skin-details">
-                            <span class="rarity-{{ item.rarity|lower|replace(' ', '-') }}">{{ item.rarity }}</span>
-                            <span>Float: {{ "%.6f"|format(item.float) }}</span>
-                        </div>
-                        <div class="skin-details" style="margin-top: 5px;">
-                            <span>{{ item.type }}</span>
-                            <span>{{ item.wear }}</span>
-                        </div>
-                        <div class="skin-details" style="margin-top: 5px; color: var(--success-color);">
-                            <span>💰 {{ "%.0f"|format(item.price_rub or 100) }} ₽</span>
-                        </div>
-                        <div class="item-actions">
-                            <button onclick="sellSingleItem({{ item.id }})" class="btn-sell-single">
-                                Продать
-                            </button>
-                        </div>
+                    <div class="text-sm truncate" title="{{ item.name }}">{{ item.name }}</div>
+                    <div class="text-xs text-dim" style="margin-top:0.15rem;">
+                        <span>{{ item.rarity }}</span>
+                        <span>Float: {{ "%.6f"|format(item.float) }}</span>
+                    </div>
+                    <div class="text-xs text-dim">{{ item.type }} / {{ item.wear }}</div>
+                    <div style="display:flex;align-items:center;justify-content:space-between;margin-top:0.5rem;">
+                        <span style="color:var(--primary);font-weight:600;font-size:0.85rem;">💰 {{ "%.0f"|format(item.price_rub or 100) }} ₽</span>
+                        <button onclick="sellSingleItem({{ item.id }})" class="btn btn-ghost btn-sm" style="color:var(--danger);">Продать</button>
                     </div>
                 </div>
                 {% endfor %}
             </div>
             {% else %}
-            <div class="empty-state-large">
-                <div class="empty-icon">📭</div>
-                <h3>Ваш инвентарь пуст</h3>
-                <p>Откройте кейсы, чтобы получить первые предметы!</p>
+            <div class="empty-state">
+                <div class="empty-state-icon">📭</div>
+                <div class="empty-state-title">Ваш инвентарь пуст</div>
+                <div class="empty-state-desc">Откройте кейсы, чтобы получить первые предметы!</div>
                 <a href="/cases" class="btn btn-primary">Открыть кейсы</a>
             </div>
             {% endif %}
         </div>
     </main>
-    
-    <!-- Модальное окно массовой продажи -->
-    <div id="bulkSellModal" class="bulk-sell-modal" style="display: none;">
-        <div class="bulk-sell-content">
-            <h3>📦 Массовая продажа</h3>
-            <p>Выберите редкости предметов для продажи:</p>
-            
-            <div class="bulk-sell-options" id="bulkSellOptions">
-                <!-- Опции будут добавлены через JS -->
+
+    <!-- Bulk Sell Modal -->
+    <div class="modal-overlay" id="bulkSellModal" style="display:none;">
+        <div class="modal" style="max-width:420px;">
+            <div class="modal-header">
+                <div class="modal-title">📦 Массовая продажа</div>
+                <button class="modal-close" onclick="closeBulkSellModal()">✕</button>
             </div>
-            
-            <div style="margin: 1rem 0;">
-                <p>Будет продано: <strong id="bulkSellCount">0</strong> предметов</p>
-                <p>Сумма: <strong id="bulkSellTotal" style="color: var(--success-color);">0 ₽</strong></p>
+            <div class="modal-body">
+                <p class="text-dim text-sm" style="margin-bottom:0.75rem;">Выберите редкости предметов для продажи:</p>
+                <div id="bulkSellOptions" style="display:flex;flex-direction:column;gap:0.35rem;margin-bottom:1rem;"></div>
+                <div class="text-sm" style="margin-bottom:0.5rem;">
+                    <span>Будет продано: <strong id="bulkSellCount">0</strong></span>
+                    <span style="margin-left:1rem;">Сумма: <strong id="bulkSellTotal" style="color:var(--success);">0 ₽</strong></span>
+                </div>
             </div>
-            
-            <div class="bulk-sell-actions">
-                <button class="btn btn-outline" onclick="closeBulkSellModal()">Отмена</button>
-                <button class="btn btn-primary" onclick="executeBulkSell()" style="background: var(--danger-color);">
-                    Продать
-                </button>
+            <div class="modal-footer">
+                <button class="btn btn-ghost" onclick="closeBulkSellModal()">Отмена</button>
+                <button class="btn btn-danger" onclick="executeBulkSell()">Продать</button>
             </div>
         </div>
     </div>
@@ -349,71 +131,62 @@
     <script>
         let selectedItems = new Set();
         let itemPrices = new Map();
-        
-        // Инициализация цен
-        document.querySelectorAll('.inventory-skin-card').forEach(card => {
+
+        document.querySelectorAll('.card[data-inventory-id]').forEach(card => {
             const id = parseInt(card.dataset.inventoryId);
             const price = parseFloat(card.dataset.price);
             itemPrices.set(id, price);
         });
-        
+
         function onItemSelect(checkbox) {
-            const card = checkbox.closest('.inventory-skin-card');
+            const card = checkbox.closest('.card');
             const itemId = parseInt(checkbox.dataset.id);
-            
             if (checkbox.checked) {
                 selectedItems.add(itemId);
-                card.classList.add('selected-for-sale');
+                card.style.borderColor = 'var(--danger)';
+                card.style.boxShadow = '0 0 15px rgba(239,68,68,0.25)';
             } else {
                 selectedItems.delete(itemId);
-                card.classList.remove('selected-for-sale');
+                card.style.borderColor = '';
+                card.style.boxShadow = '';
                 document.getElementById('selectAllCheckbox').checked = false;
             }
-            
             updateSelectionUI();
         }
-        
+
         function toggleSelectAll() {
             const selectAll = document.getElementById('selectAllCheckbox');
-            const checkboxes = document.querySelectorAll('.item-select-checkbox');
-            
-            checkboxes.forEach(cb => {
-                if (cb.closest('.inventory-skin-card').style.display !== 'none') {
+            document.querySelectorAll('.item-select-checkbox').forEach(cb => {
+                const card = cb.closest('.card');
+                if (card && card.style.display !== 'none') {
                     cb.checked = selectAll.checked;
-                    const card = cb.closest('.inventory-skin-card');
                     const itemId = parseInt(cb.dataset.id);
-                    
                     if (selectAll.checked) {
                         selectedItems.add(itemId);
-                        card.classList.add('selected-for-sale');
+                        card.style.borderColor = 'var(--danger)';
+                        card.style.boxShadow = '0 0 15px rgba(239,68,68,0.25)';
                     } else {
                         selectedItems.delete(itemId);
-                        card.classList.remove('selected-for-sale');
+                        card.style.borderColor = '';
+                        card.style.boxShadow = '';
                     }
                 }
             });
-            
             updateSelectionUI();
         }
-        
+
         function updateSelectionUI() {
             const count = selectedItems.size;
             const countBadge = document.getElementById('selectedCountBadge');
             const priceBadge = document.getElementById('totalPriceBadge');
             const sellBtn = document.getElementById('sellSelectedBtn');
-            
             if (count > 0) {
                 countBadge.style.display = 'inline-block';
-                countBadge.textContent = `${count} выбрано`;
-                
+                countBadge.textContent = count;
                 let total = 0;
-                selectedItems.forEach(id => {
-                    total += itemPrices.get(id) || 100;
-                });
-                
+                selectedItems.forEach(id => { total += itemPrices.get(id) || 100; });
                 priceBadge.style.display = 'inline-block';
                 priceBadge.textContent = `${total.toFixed(0)} ₽`;
-                
                 sellBtn.disabled = false;
             } else {
                 countBadge.style.display = 'none';
@@ -424,8 +197,8 @@
 
         async function refreshBalance() {
             try {
-                const response = await fetch('/web/api/user/balance');
-                const data = await response.json();
+                const res = await fetch('/web/api/user/balance');
+                const data = await res.json();
                 if (data.success) {
                     document.querySelectorAll('.user-balance').forEach(el => {
                         el.textContent = `${Math.floor(data.balance)} ₽`;
@@ -433,283 +206,164 @@
                 }
             } catch (e) {}
         }
-        
+
         async function sellSingleItem(inventoryId) {
             if (!confirm('Продать этот предмет?')) return;
-            SoundManager.click();
-            
             const formData = new FormData();
             formData.append('inventory_id', inventoryId);
-            
             try {
-                const response = await fetch('/web/api/inventory/sell', {
-                    method: 'POST',
-                    body: formData
-                });
-                
+                const response = await fetch('/web/api/inventory/sell', { method: 'POST', body: formData });
                 const data = await response.json();
-                
                 if (data.success) {
-                    SoundManager.balanceUpdate();
-                    const card = document.querySelector(`.inventory-skin-card[data-id="${inventoryId}"]`);
-                    if (card) {
-                        card.style.transition = 'all 0.3s';
-                        card.style.opacity = '0';
-                        card.style.transform = 'scale(0.8)';
-                        setTimeout(() => card.remove(), 300);
-                    }
+                    const card = document.querySelector(`.card[data-inventory-id="${inventoryId}"]`);
+                    if (card) { card.style.opacity = '0'; card.style.transform = 'scale(0.8)'; card.style.transition = 'all 0.3s'; setTimeout(() => card.remove(), 300); }
                     await refreshBalance();
-                } else {
-                    SoundManager.error();
-                    alert(data.error || 'Ошибка при продаже');
-                }
-            } catch (error) {
-                SoundManager.error();
-                alert('Ошибка соединения');
-            }
+                } else { alert(data.error || 'Ошибка'); }
+            } catch (e) { alert('Ошибка соединения'); }
         }
-        
+
         async function sellSelected() {
             if (selectedItems.size === 0) return;
-            
             let total = 0;
-            selectedItems.forEach(id => {
-                total += itemPrices.get(id) || 100;
-            });
-            
+            selectedItems.forEach(id => { total += itemPrices.get(id) || 100; });
             if (!confirm(`Продать ${selectedItems.size} предметов за ${total.toFixed(0)} ₽?`)) return;
-            SoundManager.click();
-            
             const ids = Array.from(selectedItems);
-            
             const formData = new FormData();
             formData.append('inventory_ids', JSON.stringify(ids));
-            
             try {
-                const response = await fetch('/web/api/inventory/sell/bulk', {
-                    method: 'POST',
-                    body: formData
-                });
-                
+                const response = await fetch('/web/api/inventory/sell/bulk', { method: 'POST', body: formData });
                 const data = await response.json();
-                
                 if (data.success) {
-                    selectedItems.forEach(id => {
-                        const card = document.querySelector(`.inventory-skin-card[data-id="${id}"]`);
-                        if (card) {
-                            card.style.transition = 'all 0.3s';
-                            card.style.opacity = '0';
-                            card.style.transform = 'scale(0.8)';
-                            setTimeout(() => card.remove(), 300);
-                        }
+                    ids.forEach(id => {
+                        const card = document.querySelector(`.card[data-inventory-id="${id}"]`);
+                        if (card) { card.style.opacity = '0'; card.style.transform = 'scale(0.8)'; card.style.transition = 'all 0.3s'; setTimeout(() => card.remove(), 300); }
                     });
                     selectedItems.clear();
                     await refreshBalance();
-                } else {
-                    alert(data.error || 'Ошибка при продаже');
-                }
-            } catch (error) {
-                alert('Ошибка соединения');
-            }
+                    updateSelectionUI();
+                } else { alert(data.error || 'Ошибка'); }
+            } catch (e) { alert('Ошибка соединения'); }
         }
-        
+
         function openBulkSellModal() {
             const modal = document.getElementById('bulkSellModal');
             const optionsDiv = document.getElementById('bulkSellOptions');
-            
-            // Собираем уникальные редкости из видимых предметов
             const rarities = new Set();
-            document.querySelectorAll('.inventory-skin-card').forEach(card => {
-                if (card.style.display !== 'none') {
-                    rarities.add(card.dataset.rarity);
-                }
+            document.querySelectorAll('.card[data-inventory-id]').forEach(card => {
+                if (card.style.display !== 'none') rarities.add(card.dataset.rarity);
             });
-            
-            // Создаем опции
-            optionsDiv.innerHTML = '';
+            let html = `<label class="bulk-sell-option" style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.6rem;background:var(--bg-dark);border-radius:var(--radius-sm);cursor:pointer;">
+                <input type="checkbox" value="all" onchange="toggleAllRarities(this)" style="width:16px;height:16px;accent-color:var(--primary);">
+                <span style="flex:1;font-weight:500;" class="text-sm">Все предметы</span>
+                <span class="text-xs text-dim" id="totalVisibleCount">0</span>
+            </label>`;
             Array.from(rarities).sort().forEach(rarity => {
-                const count = document.querySelectorAll(`.inventory-skin-card[data-rarity="${rarity}"]`).length;
-                
-                const option = document.createElement('label');
-                option.className = 'bulk-sell-option';
-                option.innerHTML = `
-                    <input type="checkbox" value="${rarity}" onchange="updateBulkSellCount()">
-                    <span style="flex: 1;">
-                        <span class="rarity-${rarity.toLowerCase().replace(/ /g, '-')}">${rarity}</span>
-                    </span>
-                    <span style="color: var(--text-secondary);">${count} шт.</span>
-                `;
-                optionsDiv.appendChild(option);
+                const count = document.querySelectorAll(`.card[data-rarity="${rarity}"]`).length;
+                html += `<label style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.6rem;background:var(--bg-dark);border-radius:var(--radius-sm);cursor:pointer;">
+                    <input type="checkbox" value="${rarity}" onchange="updateBulkSellCount()" style="width:16px;height:16px;accent-color:var(--primary);">
+                    <span style="flex:1;" class="text-sm">${rarity}</span>
+                    <span class="text-xs text-dim">${count} шт.</span>
+                </label>`;
             });
-            
-            // Добавляем опцию "Все"
-            const allOption = document.createElement('label');
-            allOption.className = 'bulk-sell-option';
-            allOption.innerHTML = `
-                <input type="checkbox" value="all" onchange="toggleAllRarities(this)">
-                <span style="flex: 1; font-weight: 500;">Все предметы</span>
-                <span style="color: var(--text-secondary);" id="totalVisibleCount">0</span>
-            `;
-            optionsDiv.insertBefore(allOption, optionsDiv.firstChild);
-            
+            optionsDiv.innerHTML = html;
             updateVisibleCount();
             updateBulkSellCount();
-            
             modal.style.display = 'flex';
         }
-        
-        function closeBulkSellModal() {
-            document.getElementById('bulkSellModal').style.display = 'none';
-        }
-        
+
+        function closeBulkSellModal() { document.getElementById('bulkSellModal').style.display = 'none'; }
+
         function toggleAllRarities(checkbox) {
-            const checkboxes = document.querySelectorAll('#bulkSellOptions input[type="checkbox"]');
-            checkboxes.forEach(cb => {
-                if (cb !== checkbox) {
-                    cb.checked = checkbox.checked;
-                }
-            });
+            document.querySelectorAll('#bulkSellOptions input[type="checkbox"]').forEach(cb => { if (cb !== checkbox) cb.checked = checkbox.checked; });
             updateBulkSellCount();
         }
-        
+
         function updateVisibleCount() {
-            const visibleCards = document.querySelectorAll('.inventory-skin-card:not([style*="display: none"])');
+            const visibleCards = document.querySelectorAll('.card[data-inventory-id]:not([style*="display: none"])');
             document.getElementById('totalVisibleCount').textContent = visibleCards.length;
         }
-        
+
         function updateBulkSellCount() {
             const selectedRarities = [];
             document.querySelectorAll('#bulkSellOptions input[type="checkbox"]:checked').forEach(cb => {
-                if (cb.value && cb.value !== 'all') {
-                    selectedRarities.push(cb.value);
-                }
+                if (cb.value && cb.value !== 'all') selectedRarities.push(cb.value);
             });
-            
             const allChecked = document.querySelector('#bulkSellOptions input[value="all"]')?.checked;
-            
-            let count = 0;
-            let total = 0;
-            
-            document.querySelectorAll('.inventory-skin-card').forEach(card => {
+            let count = 0, total = 0;
+            document.querySelectorAll('.card[data-inventory-id]').forEach(card => {
                 if (card.style.display !== 'none') {
-                    const rarity = card.dataset.rarity;
-                    if (allChecked || selectedRarities.includes(rarity)) {
+                    if (allChecked || selectedRarities.includes(card.dataset.rarity)) {
                         count++;
                         total += parseFloat(card.dataset.price) || 100;
                     }
                 }
             });
-            
             document.getElementById('bulkSellCount').textContent = count;
             document.getElementById('bulkSellTotal').textContent = `${total.toFixed(0)} ₽`;
         }
-        
+
         async function executeBulkSell() {
             const selectedRarities = [];
             document.querySelectorAll('#bulkSellOptions input[type="checkbox"]:checked').forEach(cb => {
-                if (cb.value && cb.value !== 'all') {
-                    selectedRarities.push(cb.value);
-                }
+                if (cb.value && cb.value !== 'all') selectedRarities.push(cb.value);
             });
-            
             const allChecked = document.querySelector('#bulkSellOptions input[value="all"]')?.checked;
-            
             const idsToSell = [];
-            document.querySelectorAll('.inventory-skin-card').forEach(card => {
+            document.querySelectorAll('.card[data-inventory-id]').forEach(card => {
                 if (card.style.display !== 'none') {
-                    const rarity = card.dataset.rarity;
-                    if (allChecked || selectedRarities.includes(rarity)) {
+                    if (allChecked || selectedRarities.includes(card.dataset.rarity)) {
                         idsToSell.push(parseInt(card.dataset.inventoryId));
                     }
                 }
             });
-            
-            if (idsToSell.length === 0) {
-                alert('Выберите хотя бы одну редкость');
-                return;
-            }
-            
+            if (idsToSell.length === 0) { alert('Выберите хотя бы одну редкость'); return; }
             if (!confirm(`Продать ${idsToSell.length} предметов?`)) return;
-            
             const formData = new FormData();
             formData.append('inventory_ids', JSON.stringify(idsToSell));
-            
             try {
-                const response = await fetch('/web/api/inventory/sell/bulk', {
-                    method: 'POST',
-                    body: formData
-                });
-                
+                const response = await fetch('/web/api/inventory/sell/bulk', { method: 'POST', body: formData });
                 const data = await response.json();
-                
                 if (data.success) {
                     await refreshBalance();
-                    // Remove all cards with animation
-                    document.querySelectorAll('.inventory-skin-card').forEach(card => {
-                        card.style.transition = 'all 0.3s';
-                        card.style.opacity = '0';
-                        card.style.transform = 'scale(0.8)';
-                        setTimeout(() => card.remove(), 300);
+                    document.querySelectorAll('.card[data-inventory-id]').forEach(card => {
+                        card.style.opacity = '0'; card.style.transform = 'scale(0.8)'; card.style.transition = 'all 0.3s'; setTimeout(() => card.remove(), 300);
                     });
-                } else {
-                    alert(data.error || 'Ошибка при продаже');
-                }
-            } catch (error) {
-                alert('Ошибка соединения');
-            }
+                } else { alert(data.error || 'Ошибка'); }
+            } catch (e) { alert('Ошибка соединения'); }
         }
-        
+
         function filterItems() {
             const rarityFilter = document.getElementById('rarityFilter').value.toLowerCase();
             const typeFilter = document.getElementById('typeFilter').value.toLowerCase();
             const searchQuery = document.getElementById('searchInput').value.toLowerCase();
-            
-            const items = document.querySelectorAll('.inventory-skin-card');
             let visibleCount = 0;
-            
-            items.forEach(item => {
-                const rarity = item.dataset.rarity.toLowerCase();
-                const type = item.dataset.type.toLowerCase();
-                const name = item.dataset.name;
-                
+            document.querySelectorAll('.card[data-inventory-id]').forEach(item => {
+                const r = item.dataset.rarity.toLowerCase();
+                const t = item.dataset.type.toLowerCase();
+                const n = item.dataset.name;
                 let visible = true;
-                
-                if (rarityFilter && rarity !== rarityFilter) visible = false;
-                if (typeFilter && type !== typeFilter) visible = false;
-                if (searchQuery && !name.includes(searchQuery)) visible = false;
-                
-                item.style.display = visible ? 'block' : 'none';
+                if (rarityFilter && r !== rarityFilter) visible = false;
+                if (typeFilter && t !== typeFilter) visible = false;
+                if (searchQuery && !n.includes(searchQuery)) visible = false;
+                item.style.display = visible ? '' : 'none';
                 if (visible) visibleCount++;
             });
-            
             document.getElementById('totalItemsCount').textContent = visibleCount;
-            
-            // Сбрасываем выбор при фильтрации
             selectedItems.clear();
             document.querySelectorAll('.item-select-checkbox').forEach(cb => cb.checked = false);
-            document.querySelectorAll('.inventory-skin-card').forEach(c => c.classList.remove('selected-for-sale'));
+            document.querySelectorAll('.card[data-inventory-id]').forEach(c => { c.style.borderColor = ''; c.style.boxShadow = ''; });
             document.getElementById('selectAllCheckbox').checked = false;
             updateSelectionUI();
         }
-        
+
         function resetFilters() {
             document.getElementById('rarityFilter').value = '';
             document.getElementById('typeFilter').value = '';
             document.getElementById('searchInput').value = '';
             filterItems();
         }
-        
-        async function logout() {
-            await fetch('/web/api/auth/logout', { method: 'POST' });
-            window.location.href = '/';
-        }
-        
-        // Закрытие модального окна по клику вне
-        document.getElementById('bulkSellModal').addEventListener('click', (e) => {
-            if (e.target.classList.contains('bulk-sell-modal')) {
-                closeBulkSellModal();
-            }
-        });
+
+        document.getElementById('bulkSellModal').addEventListener('click', (e) => { if (e.target === e.currentTarget) closeBulkSellModal(); });
     </script>
     <script src="/static/js/sounds.js"></script>
     <script src="/static/js/websocket.js"></script>
@@ -723,80 +377,49 @@
             const btn = document.getElementById('soundToggle');
             if (btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇';
         });
-    </script>
-    <script>
-    // Живое обновление через WebSocket
-    WS.on('inventory_update', () => refreshInventory());
-    WS.on('item_sold', () => refreshInventory());
-    WS.on('balance_update', () => { if (typeof refreshBalance === 'function') refreshBalance(); });
 
-    let refreshTimeout;
-    function refreshInventory() {
-        clearTimeout(refreshTimeout);
-        refreshTimeout = setTimeout(() => {
-            fetch('/web/api/inventory/items')
-                .then(r => r.json())
-                .then(items => rebuildInventoryGrid(items))
-                .catch(() => {});
-        }, 800);
-    }
+        WS.on('inventory_update', () => refreshInventory());
+        WS.on('item_sold', () => refreshInventory());
+        WS.on('balance_update', () => { if (typeof refreshBalance === 'function') refreshBalance(); });
 
-    function rebuildInventoryGrid(items) {
-        const grid = document.getElementById('inventoryGrid');
-        if (!grid) return;
-        if (!items.length) {
-            grid.innerHTML = '<div class="empty-state-large"><div class="empty-icon">📭</div><h3>Ваш инвентарь пуст</h3><p>Откройте кейсы, чтобы получить первые предметы!</p><a href="/cases" class="btn btn-primary">Открыть кейсы</a></div>';
-            document.getElementById('selectAllCheckbox') && (document.getElementById('selectAllCheckbox').checked = false);
-            selectedItems.clear();
-            updateSelectionUI();
-            return;
+        let refreshTimeout;
+        function refreshInventory() {
+            clearTimeout(refreshTimeout);
+            refreshTimeout = setTimeout(() => {
+                fetch('/web/api/inventory/items').then(r => r.json()).then(items => rebuildInventoryGrid(items)).catch(() => {});
+            }, 800);
         }
-        let html = '';
-        items.forEach(item => {
-            const rarityClass = (item.rarity || 'unknown').toLowerCase().replace(/\s+/g, '-');
-            const image = item.image_url || '/static/placeholder.png';
-            const floatStr = item.float !== null && item.float !== undefined ? 'Float: ' + item.float.toFixed(6) : '';
-            const wearStr = item.wear || '';
-            const typeStr = item.type || '';
-            html += `<div class="inventory-skin-card rarity-${rarityClass}"
-                 data-inventory-id="${item.id}"
-                 data-rarity="${item.rarity || ''}"
-                 data-type="${typeStr}"
-                 data-name="${(item.name || '').toLowerCase()}"
-                 data-price="${item.price_rub || 100}">
-                <input type="checkbox" class="item-select-checkbox"
-                       onchange="onItemSelect(this)"
-                       data-id="${item.id}"
-                       data-price="${item.price_rub || 100}">
-                <div class="skin-image-container">
-                    <img src="${image}" alt="${item.name}" class="skin-image" onerror="this.src='/static/placeholder.png'">
-                </div>
-                <div class="skin-info">
-                    <div class="skin-name" title="${item.name}">${item.name}</div>
-                    <div class="skin-details">
-                        <span class="rarity-${rarityClass}">${item.rarity || ''}</span>
-                        <span>${floatStr}</span>
+
+        function rebuildInventoryGrid(items) {
+            const grid = document.getElementById('inventoryGrid');
+            if (!grid) return;
+            if (!items.length) {
+                grid.innerHTML = '<div class="empty-state"><div class="empty-state-icon">📭</div><div class="empty-state-title">Ваш инвентарь пуст</div><div class="empty-state-desc">Откройте кейсы, чтобы получить первые предметы!</div><a href="/cases" class="btn btn-primary">Открыть кейсы</a></div>';
+                document.getElementById('selectAllCheckbox') && (document.getElementById('selectAllCheckbox').checked = false);
+                selectedItems.clear(); updateSelectionUI(); return;
+            }
+            let html = '';
+            items.forEach(item => {
+                html += `<div class="card" style="position:relative;padding:0.85rem;" data-inventory-id="${item.id}" data-rarity="${item.rarity || ''}" data-type="${item.type || ''}" data-name="${(item.name||'').toLowerCase()}" data-price="${item.price_rub || 100}">
+                    <input type="checkbox" class="item-select-checkbox" onchange="onItemSelect(this)" data-id="${item.id}" data-price="${item.price_rub || 100}" style="position:absolute;top:8px;left:8px;width:18px;height:18px;accent-color:var(--primary);z-index:2;cursor:pointer;">
+                    <div style="width:100%;height:90px;display:flex;align-items:center;justify-content:center;background:var(--bg-dark);border-radius:var(--radius-sm);margin-bottom:0.5rem;">
+                        <img src="${item.image_url || '/static/placeholder.png'}" alt="${item.name}" style="max-width:85%;max-height:80px;object-fit:contain;" onerror="this.src='/static/placeholder.png'">
                     </div>
-                    <div class="skin-details" style="margin-top:5px">
-                        <span>${typeStr}</span>
-                        <span>${wearStr}</span>
+                    <div class="text-sm truncate" title="${item.name}">${item.name}</div>
+                    <div class="text-xs text-dim" style="margin-top:0.15rem;"><span>${item.rarity || ''}</span><span> Float: ${item.float ? item.float.toFixed(6) : ''}</span></div>
+                    <div class="text-xs text-dim">${item.type || ''} / ${item.wear || ''}</div>
+                    <div style="display:flex;align-items:center;justify-content:space-between;margin-top:0.5rem;">
+                        <span style="color:var(--primary);font-weight:600;font-size:0.85rem;">💰 ${(item.price_rub || 100).toLocaleString()} ₽</span>
+                        <button onclick="sellSingleItem(${item.id})" class="btn btn-ghost btn-sm" style="color:var(--danger);">Продать</button>
                     </div>
-                    <div class="skin-details" style="margin-top:5px;color:var(--success-color)">
-                        <span>💰 ${(item.price_rub || 100).toLocaleString()} ₽</span>
-                    </div>
-                    <div class="item-actions">
-                        <button onclick="sellSingleItem(${item.id})" class="btn-sell-single">Продать</button>
-                    </div>
-                </div>
-            </div>`;
-        });
-        grid.innerHTML = html;
-        selectedItems.clear();
-        updateSelectionUI();
-        document.getElementById('selectAllCheckbox') && (document.getElementById('selectAllCheckbox').checked = false);
-        if (typeof filterItems === 'function') filterItems();
-    }
+                </div>`;
+            });
+            grid.innerHTML = html;
+            selectedItems.clear(); updateSelectionUI();
+            document.getElementById('selectAllCheckbox') && (document.getElementById('selectAllCheckbox').checked = false);
+            if (typeof filterItems === 'function') filterItems();
+        }
     </script>
 {% include '_activity_sidebar.html' %}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/login.html b/templates/login.html
index 1512c87..ab5aa6d 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -3,42 +3,41 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Вход - CS2 Simulator</title>
+    <title>Вход — CS2 Simulator</title>
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
                 <a href="/register" class="btn btn-outline">Регистрация</a>
             </div>
         </div>
     </nav>
 
-    <main class="auth-container">
-        <div class="auth-card">
-            <h2>Вход в аккаунт</h2>
-            
-            <form id="loginForm" class="auth-form">
+    <main style="display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 60px);padding:2rem 1rem;">
+        <div class="card" style="max-width:400px;width:100%;padding:2rem;">
+            <h1 class="display-font" style="font-size:1.3rem;margin-bottom:0.25rem;text-align:center;">Вход</h1>
+            <p class="text-dim text-sm text-center" style="margin-bottom:1.5rem;">Войдите в свой аккаунт</p>
+
+            <form id="loginForm">
                 <div class="form-group">
-                    <label for="username">Имя пользователя</label>
-                    <input type="text" id="username" name="username" required minlength="3">
+                    <label class="form-label">Имя пользователя</label>
+                    <input type="text" id="username" name="username" class="form-input" required minlength="3">
                 </div>
-                
                 <div class="form-group">
-                    <label for="password">Пароль</label>
-                    <input type="password" id="password" name="password" required minlength="4">
+                    <label class="form-label">Пароль</label>
+                    <input type="password" id="password" name="password" class="form-input" required minlength="4">
                 </div>
-                
-                <div id="errorMessage" class="error-message" style="display: none;"></div>
-                
-                <button type="submit" class="btn btn-primary btn-block">Войти</button>
+                <div id="errorMessage" class="form-error" style="display:none;margin-bottom:0.75rem;"></div>
+                <button type="submit" class="btn btn-primary btn-block btn-large">Войти</button>
             </form>
-            
-            <p class="auth-footer">
-                Нет аккаунта? <a href="/register">Зарегистрируйтесь</a>
+
+            <p class="text-dim text-sm text-center" style="margin-top:1rem;">
+                Нет аккаунта? <a href="/register" style="color:var(--primary);">Зарегистрируйтесь</a>
             </p>
         </div>
     </main>
@@ -46,18 +45,11 @@
     <script>
         document.getElementById('loginForm').addEventListener('submit', async (e) => {
             e.preventDefault();
-            
             const formData = new FormData(e.target);
             const errorDiv = document.getElementById('errorMessage');
-            
             try {
-                const response = await fetch('/web/api/auth/login', {
-                    method: 'POST',
-                    body: formData
-                });
-                
+                const response = await fetch('/web/api/auth/login', { method: 'POST', body: formData });
                 const data = await response.json();
-                
                 if (response.ok && data.success) {
                     window.location.href = data.redirect;
                 } else {
@@ -72,4 +64,4 @@
     </script>
     <script src="/static/js/safemode.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/profile.html b/templates/profile.html
index 18b789c..ea0233f 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -3,33 +3,33 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% if is_public %}Профиль {{ profile_user.username }}{% else %}Профиль{% endif %} - CS2 Simulator</title>
+    <title>{% if is_public %}Профиль {{ profile_user.username }}{% else %}Профиль{% endif %} — CS2 Simulator</title>
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
                 {% if user %}
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/crash" class="nav-link">💥 Crash</a>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/crash" class="nav-link">Crash</a>
                 <a href="/inventory" class="nav-link">Инвентарь</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
-                <a href="/achievements" class="nav-link">🏆 Достижения</a>
-                <a href="/profile" class="nav-link">Профиль</a>
+                <a href="/activity" class="nav-link">Лента</a>
+                <a href="/achievements" class="nav-link">Достижения</a>
+                <a href="/profile" class="nav-link active">Профиль</a>
                 <span class="user-balance">{{ "%.2f"|format(user.balance) }} ₽</span>
-                <button onclick="toggleSound()" class="btn btn-outline" id="soundToggle" title="Звук">🔊</button>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
-                <button onclick="logout()" class="btn btn-outline">Выйти</button>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <button onclick="logout()" class="btn btn-ghost">Выйти</button>
                 {% else %}
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link">🆙 Апгрейд</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <a href="/upgrade" class="nav-link">Апгрейд</a>
+                <a href="/activity" class="nav-link">Лента</a>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
                 <a href="/login" class="btn btn-outline">Войти</a>
                 <a href="/register" class="btn btn-primary">Регистрация</a>
                 {% endif %}
@@ -37,25 +37,23 @@
         </div>
     </nav>
 
-    <main class="profile-container">
+    <main class="section">
         <div class="container">
-            <div class="profile-header">
-                {% if is_public %}
-                <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:0.5rem;">
-                    <span style="background:var(--bg-card);padding:0.25rem 0.75rem;border-radius:20px;font-size:0.75rem;color:var(--text-secondary);border:1px solid var(--border-color);">👤 Публичный профиль</span>
+            <div class="section-header">
+                <div>
+                    <h1 class="section-title">{% if is_public %}👤 {{ profile_user.username }}{% else %}👤 {{ user.username }}{% endif %}</h1>
+                    {% if is_public %}
+                    <p class="section-subtitle">Зарегистрирован {{ profile_user.created_at.strftime('%d.%m.%Y') }}</p>
+                    {% else %}
+                    <p class="section-subtitle">Добро пожаловать в ваш профиль</p>
+                    {% endif %}
                 </div>
-                <h1>👤 {{ profile_user.username }}</h1>
-                <p class="profile-subtitle">Зарегистрирован {{ profile_user.created_at.strftime('%d.%m.%Y') }}</p>
-                {% else %}
-                <h1>👤 {{ user.username }}</h1>
-                <p class="profile-subtitle">Добро пожаловать в ваш профиль</p>
-                {% endif %}
             </div>
-            
+
             <div class="stats-grid">
                 <div class="stat-card">
                     <div class="stat-value">{{ total_items }}</div>
-                    <div class="stat-label">Предметов в инвентаре</div>
+                    <div class="stat-label">Предметов</div>
                 </div>
                 <div class="stat-card">
                     <div class="stat-value">{{ cases_opened }}</div>
@@ -63,7 +61,7 @@
                 </div>
                 <div class="stat-card">
                     <div class="stat-value">{{ contracts_completed }}</div>
-                    <div class="stat-label">Выполнено контрактов</div>
+                    <div class="stat-label">Контрактов</div>
                 </div>
                 {% if not is_public %}
                 <div class="stat-card">
@@ -72,56 +70,56 @@
                 </div>
                 {% endif %}
             </div>
-            
-            <div class="profile-sections">
+
+            <div style="margin-top:2rem;display:grid;gap:1.5rem;">
                 <div class="section">
-                    <h2>🏆 Ценные предметы</h2>
-                    <div class="items-grid">
+                    <h2 class="display-font" style="font-size:1rem;margin-bottom:0.75rem;">🏆 Ценные предметы</h2>
+                    <div class="grid grid-auto-sm">
                         {% set target_items = valuable_items %}
                         {% for item in target_items %}
-                        <div class="item-card rarity-{{ item.rarity|lower|replace(' ', '-') }}">
-                            <div class="item-name">{{ item.market_hash_name }}</div>
-                            <div class="item-details">
-                                <span class="item-rarity">{{ item.rarity }}</span>
-                                <span class="item-float">Float: {{ "%.4f"|format(item.float_value) }}</span>
+                        <div class="card" style="text-align:center;padding:0.75rem;">
+                            <div class="display-font text-sm">{{ item.market_hash_name }}</div>
+                            <div class="text-xs text-dim">
+                                <span>{{ item.rarity }}</span>
+                                <span>Float: {{ "%.4f"|format(item.float_value) }}</span>
                             </div>
                         </div>
                         {% else %}
-                        <p class="empty-state">У {% if is_public %}этого пользователя{% else %}вас{% endif %} пока нет предметов.</p>
+                        <p class="text-dim text-sm">У {% if is_public %}этого пользователя{% else %}вас{% endif %} пока нет предметов.</p>
                         {% endfor %}
                     </div>
                 </div>
-                
+
                 <div class="section">
-                    <h2>📦 Последние открытия</h2>
-                    <div class="history-list">
+                    <h2 class="display-font" style="font-size:1rem;margin-bottom:0.75rem;">📦 Последние открытия</h2>
+                    <div style="display:flex;flex-direction:column;gap:0.35rem;">
                         {% for opening in recent_openings %}
-                        <div class="history-item">
-                            <div class="history-icon">📦</div>
-                            <div class="history-content">
-                                <div class="history-title">{{ opening.item_name }}</div>
-                                <div class="history-meta">
-                                    <span class="rarity-{{ opening.rarity|lower|replace(' ', '-') }}">{{ opening.rarity }}</span>
+                        <div class="card" style="padding:0.65rem 1rem;display:flex;align-items:center;gap:0.75rem;">
+                            <span style="font-size:1.2rem;">📦</span>
+                            <div style="flex:1;min-width:0;">
+                                <div class="text-sm truncate">{{ opening.item_name }}</div>
+                                <div class="text-xs text-dim">
+                                    <span>{{ opening.rarity }}</span>
                                     <span>Float: {{ "%.4f"|format(opening.float_value) }}</span>
                                     <span>{{ opening.opened_at.strftime('%d.%m.%Y %H:%M') }}</span>
                                 </div>
                             </div>
                         </div>
                         {% else %}
-                        <p class="empty-state">Пока нет открытий</p>
+                        <p class="text-dim text-sm">Пока нет открытий</p>
                         {% endfor %}
                     </div>
                 </div>
-                
+
                 <div class="section">
-                    <h2>🔄 Последние контракты</h2>
-                    <div class="history-list">
+                    <h2 class="display-font" style="font-size:1rem;margin-bottom:0.75rem;">🔄 Последние контракты</h2>
+                    <div style="display:flex;flex-direction:column;gap:0.35rem;">
                         {% for contract in recent_contracts %}
-                        <div class="history-item">
-                            <div class="history-icon">🔄</div>
-                            <div class="history-content">
-                                <div class="history-title">{{ contract.output_item_name }}</div>
-                                <div class="history-meta">
+                        <div class="card" style="padding:0.65rem 1rem;display:flex;align-items:center;gap:0.75rem;">
+                            <span style="font-size:1.2rem;">🔄</span>
+                            <div style="flex:1;min-width:0;">
+                                <div class="text-sm truncate">{{ contract.output_item_name }}</div>
+                                <div class="text-xs text-dim">
                                     <span>Float: {{ "%.4f"|format(contract.output_float) }}</span>
                                     <span>Шанс: {{ "%.2f"|format(contract.probability) }}%</span>
                                     <span>{{ contract.created_at.strftime('%d.%m.%Y %H:%M') }}</span>
@@ -129,7 +127,7 @@
                             </div>
                         </div>
                         {% else %}
-                        <p class="empty-state">Пока нет контрактов</p>
+                        <p class="text-dim text-sm">Пока нет контрактов</p>
                         {% endfor %}
                     </div>
                 </div>
@@ -137,23 +135,7 @@
         </div>
     </main>
 
-    <script>
-        async function logout() {
-            await fetch('/web/api/auth/logout', { method: 'POST' });
-            window.location.href = '/';
-        }
-    </script>
-    <script>
-        function toggleSound() {
-            const enabled = SoundManager.toggle();
-            document.getElementById('soundToggle').textContent = enabled ? '🔊' : '🔇';
-        }
-        document.addEventListener('DOMContentLoaded', () => {
-            const btn = document.getElementById('soundToggle');
-            if (btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇';
-        });
-    </script>
     <script src="/static/js/safemode.js"></script>
 {% if user and not is_public %}{% include '_activity_sidebar.html' %}{% endif %}
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/register.html b/templates/register.html
index 2b3fc3e..3018dd6 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -3,44 +3,43 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Регистрация - CS2 Simulator</title>
+    <title>Регистрация — CS2 Simulator</title>
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
 <body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
                 <a href="/login" class="btn btn-outline">Войти</a>
             </div>
         </div>
     </nav>
 
-    <main class="auth-container">
-        <div class="auth-card">
-            <h2>Регистрация</h2>
-            
-            <form id="registerForm" class="auth-form">
+    <main style="display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 60px);padding:2rem 1rem;">
+        <div class="card" style="max-width:400px;width:100%;padding:2rem;">
+            <h1 class="display-font" style="font-size:1.3rem;margin-bottom:0.25rem;text-align:center;">Регистрация</h1>
+            <p class="text-dim text-sm text-center" style="margin-bottom:1.5rem;">Создайте новый аккаунт</p>
+
+            <form id="registerForm">
                 <div class="form-group">
-                    <label for="username">Имя пользователя</label>
-                    <input type="text" id="username" name="username" required minlength="3">
-                    <small>Минимум 3 символа</small>
+                    <label class="form-label">Имя пользователя</label>
+                    <input type="text" id="username" name="username" class="form-input" required minlength="3">
+                    <div class="form-hint">Минимум 3 символа</div>
                 </div>
-                
                 <div class="form-group">
-                    <label for="password">Пароль</label>
-                    <input type="password" id="password" name="password" required minlength="4">
-                    <small>Минимум 4 символа</small>
+                    <label class="form-label">Пароль</label>
+                    <input type="password" id="password" name="password" class="form-input" required minlength="4">
+                    <div class="form-hint">Минимум 4 символа</div>
                 </div>
-                
-                <div id="errorMessage" class="error-message" style="display: none;"></div>
-                
-                <button type="submit" class="btn btn-primary btn-block">Зарегистрироваться</button>
+                <div id="errorMessage" class="form-error" style="display:none;margin-bottom:0.75rem;"></div>
+                <button type="submit" class="btn btn-primary btn-block btn-large">Зарегистрироваться</button>
             </form>
-            
-            <p class="auth-footer">
-                Уже есть аккаунт? <a href="/login">Войдите</a>
+
+            <p class="text-dim text-sm text-center" style="margin-top:1rem;">
+                Уже есть аккаунт? <a href="/login" style="color:var(--primary);">Войдите</a>
             </p>
         </div>
     </main>
@@ -48,18 +47,11 @@
     <script>
         document.getElementById('registerForm').addEventListener('submit', async (e) => {
             e.preventDefault();
-            
             const formData = new FormData(e.target);
             const errorDiv = document.getElementById('errorMessage');
-            
             try {
-                const response = await fetch('/web/api/auth/register', {
-                    method: 'POST',
-                    body: formData
-                });
-                
+                const response = await fetch('/web/api/auth/register', { method: 'POST', body: formData });
                 const data = await response.json();
-                
                 if (response.ok && data.success) {
                     window.location.href = data.redirect;
                 } else {
@@ -74,4 +66,4 @@
     </script>
     <script src="/static/js/safemode.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/upgrade.html b/templates/upgrade.html
index 8da7814..48ff073 100644
--- a/templates/upgrade.html
+++ b/templates/upgrade.html
@@ -6,30 +6,30 @@
     <title>Апгрейд — CS2 Simulator</title>
     <link rel="stylesheet" href="/static/css/style.css">
 </head>
-<body class="upgrade-page">
+<body>
     <nav class="navbar">
         <div class="container">
-            <a href="/" class="logo">🎮 CS2 Simulator</a>
-            <div class="nav-links">
+            <a href="/" class="logo">CS2 <span>Simulator</span></a>
+            <button class="mobile-toggle" id="mobileToggle">☰</button>
+            <div class="nav-links" id="navLinks">
                 {% if user %}
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link active">🆙 Апгрейд</a>
-                <a href="/crash" class="nav-link">💥 Crash</a>
+                <a href="/upgrade" class="nav-link active">Апгрейд</a>
+                <a href="/crash" class="nav-link">Crash</a>
                 <a href="/inventory" class="nav-link">Инвентарь</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
-                <a href="/achievements" class="nav-link">🏆 Достижения</a>
+                <a href="/activity" class="nav-link">Лента</a>
+                <a href="/achievements" class="nav-link">Достижения</a>
                 <a href="/profile" class="nav-link">Профиль</a>
                 <span class="user-balance">{{ "%.0f"|format(user.balance) }} ₽</span>
-                <button onclick="toggleSound()" class="btn btn-outline" id="soundToggle" title="Звук">🔊</button>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
-                <button onclick="logout()" class="btn btn-outline">Выйти</button>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <button onclick="logout()" class="btn btn-ghost">Выйти</button>
                 {% else %}
                 <a href="/cases" class="nav-link">Кейсы</a>
                 <a href="/contracts" class="nav-link">Контракты</a>
-                <a href="/upgrade" class="nav-link active">🆙 Апгрейд</a>
-                <a href="/activity" class="nav-link">📰 Лента</a>
-                <button onclick="toggleSafeMode()" class="btn btn-outline" id="safeModeToggle" title="Режим записи">🎙️</button>
+                <a href="/upgrade" class="nav-link active">Апгрейд</a>
+                <a href="/activity" class="nav-link">Лента</a>
+                <button onclick="toggleSafeMode()" class="btn btn-ghost" id="safeModeToggle" title="Режим записи">🎙️</button>
                 <a href="/login" class="btn btn-outline">Войти</a>
                 <a href="/register" class="btn btn-primary">Регистрация</a>
                 {% endif %}
@@ -37,700 +37,303 @@
         </div>
     </nav>
 
-    <main class="upgrade-container">
+    <main class="section">
         <div class="container">
-            <div class="upgrade-header">
-                <h1>🆙 Апгрейд</h1>
-                <p>Рискни предметом ради более дорогого</p>
+            <div class="section-header">
+                <h1 class="section-title">🆙 Апгрейд</h1>
+                <p class="section-subtitle">Рискни предметом ради более дорогого</p>
             </div>
 
-            <div class="upgrade-layout">
+            <div style="display:grid;grid-template-columns:1fr 320px 1fr;gap:0.75rem;align-items:start;">
                 <!-- Inventory -->
-                <div class="inventory-panel">
-                    <div class="panel-header">
-                        <div class="panel-title">
-                            <span>📦 Инвентарь</span>
-                            <span style="font-size: 0.65rem; color: #6b6b7a;">{{ inventory_items|length }}</span>
-                        </div>
-                        <div class="inv-filter-bar">
-                            <input type="text" class="inv-search-input" id="invSearch" placeholder="Поиск..." oninput="onInvSearch()">
-                            <div class="inv-sort-group">
-                                <button class="inv-sort-btn" onclick="setInvSort('default', this)">📋</button>
-                                <button class="inv-sort-btn" onclick="setInvSort('price_asc', this)">💰↑</button>
-                                <button class="inv-sort-btn" onclick="setInvSort('price_desc', this)">💰↓</button>
-                            </div>
+                <div class="card" style="padding:0;overflow:hidden;">
+                    <div style="display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0.75rem;border-bottom:1px solid var(--border);background:rgba(0,0,0,0.1);">
+                        <span class="display-font text-sm">📦 Инвентарь <span class="text-xs text-dim">{{ inventory_items|length }}</span></span>
+                        <div class="flex gap-1">
+                            <input type="text" id="invSearch" class="form-input" placeholder="Поиск..." style="width:auto;min-width:100px;font-size:0.75rem;padding:0.25rem 0.5rem;" oninput="onInvSearch()">
+                            <button class="btn-icon btn-sm" onclick="setInvSort('default',this)">📋</button>
+                            <button class="btn-icon btn-sm" onclick="setInvSort('price_asc',this)">💰↑</button>
+                            <button class="btn-icon btn-sm" onclick="setInvSort('price_desc',this)">💰↓</button>
                         </div>
                     </div>
-                    <div class="inventory-list" id="inventoryList"></div>
+                    <div style="max-height:400px;overflow-y:auto;padding:0.5rem;" id="inventoryList"></div>
                 </div>
 
                 <!-- Wheel -->
-                <div class="wheel-panel" style="position: relative;">
-                    <div class="selected-items-display">
-                        <div class="selected-item-mini" id="selectedInputDisplay">
-                            <div class="item-frame">
-                                <img src="/static/placeholder.png" id="displayInputImage">
+                <div class="card" style="text-align:center;">
+                    <div style="display:flex;align-items:center;justify-content:center;gap:0.75rem;margin-bottom:1rem;">
+                        <div style="text-align:center;flex:1;" id="selectedInputDisplay">
+                            <div style="width:60px;height:60px;margin:0 auto 0.25rem;background:var(--bg-dark);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;border:2px solid var(--border);">
+                                <img src="/static/placeholder.png" id="displayInputImage" style="max-width:85%;max-height:50px;object-fit:contain;">
                             </div>
-                            <div class="selected-item-mini-name" id="displayInputName">Не выбрано</div>
-                            <div class="selected-item-mini-price" id="displayInputPrice">—</div>
+                            <div class="text-xs truncate" id="displayInputName">Не выбрано</div>
+                            <div class="text-xs text-primary" id="displayInputPrice">—</div>
                         </div>
-                        <div class="arrow-icon">➡</div>
-                        <div class="selected-item-mini" id="selectedTargetDisplay">
-                            <div class="item-frame">
-                                <img src="/static/placeholder.png" id="displayTargetImage">
+                        <div style="font-size:1.5rem;color:var(--text-dim);">➡</div>
+                        <div style="text-align:center;flex:1;" id="selectedTargetDisplay">
+                            <div style="width:60px;height:60px;margin:0 auto 0.25rem;background:var(--bg-dark);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;border:2px solid var(--border);">
+                                <img src="/static/placeholder.png" id="displayTargetImage" style="max-width:85%;max-height:50px;object-fit:contain;">
                             </div>
-                            <div class="selected-item-mini-name" id="displayTargetName">Не выбрано</div>
-                            <div class="selected-item-mini-price" id="displayTargetPrice">—</div>
+                            <div class="text-xs truncate" id="displayTargetName">Не выбрано</div>
+                            <div class="text-xs text-primary" id="displayTargetPrice">—</div>
                         </div>
                     </div>
 
-                    <div class="wheel-container">
-                        <div class="wheel-outer-ring"></div>
-                        <div class="wheel" id="upgradeWheel" style="--probability: 0;"></div>
-                        <div class="wheel-ticks"></div>
-                        <div class="wheel-pointer-container" id="pointerContainer">
-                            <div class="wheel-pointer"></div>
+                    <div style="position:relative;width:180px;height:180px;margin:0 auto 1rem;">
+                        <div style="position:absolute;inset:0;border-radius:50%;border:3px solid var(--border);" class="wheel" id="upgradeWheel" style="--probability:0;">
+                            <div style="position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:16px solid var(--primary);z-index:2;" id="pointerContainer"></div>
+                            <div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;border-radius:50%;background:var(--bg-dark);display:flex;align-items:center;justify-content:center;border:2px solid var(--border);z-index:1;">
+                                <span class="display-font text-sm" id="wheelProbability">0%</span>
+                            </div>
                         </div>
-                        <div class="wheel-center" id="wheelProbability">0%</div>
                     </div>
 
-                    <div class="upgrade-actions">
+                    <div style="display:flex;gap:0.5rem;justify-content:center;">
                         {% if user %}
-                        <button class="upgrade-btn" onclick="executeUpgrade()" id="upgradeBtn" disabled>
-                            🎲 Апгрейд
-                        </button>
-                        <button class="quick-btn" id="quickModeBtn" onclick="toggleQuickMode()" title="Быстрый режим">⚡</button>
+                        <button class="btn btn-primary btn-large" onclick="executeUpgrade()" id="upgradeBtn" disabled>🎲 Апгрейд</button>
+                        <button class="btn-icon" id="quickModeBtn" onclick="toggleQuickMode()" title="Быстрый режим">⚡</button>
                         {% else %}
-                        <div style="display:flex;align-items:center;gap:1rem;width:100%;justify-content:center;padding:1rem;">
-                            <span style="color:var(--text-secondary);">🔒 Войдите, чтобы совершать апгрейды</span>
-                            <a href="/login" class="btn btn-primary">Войти</a>
-                            <a href="/register" class="btn btn-outline">Регистрация</a>
+                        <div class="flex gap-2" style="align-items:center;">
+                            <span class="text-dim text-sm">🔒 Войдите, чтобы совершать апгрейды</span>
+                            <a href="/login" class="btn btn-primary btn-sm">Войти</a>
+                            <a href="/register" class="btn btn-outline btn-sm">Регистрация</a>
                         </div>
                         {% endif %}
                     </div>
-
-                    <div id="toastContainer" class="toast-container"></div>
                 </div>
 
                 <!-- Target -->
-                <div class="target-panel">
-                    <div class="target-header">
-                        <div class="panel-title" style="margin-bottom: 0.4rem;">
-                            <span>🎯 Цель</span>
+                <div class="card" style="padding:0;overflow:hidden;">
+                    <div style="padding:0.6rem 0.75rem;border-bottom:1px solid var(--border);background:rgba(0,0,0,0.1);">
+                        <span class="display-font text-sm">🎯 Цель</span>
+                        <input type="text" id="targetSearch" class="form-input" placeholder="Поиск..." style="width:100%;margin-top:0.35rem;font-size:0.75rem;padding:0.25rem 0.5rem;" oninput="searchTargetItems()">
+                        <div class="flex gap-1" style="margin-top:0.35rem;flex-wrap:wrap;">
+                            <button class="filter-chip active" onclick="setTargetSort('closest',this)">🎯 Ближ.</button>
+                            <button class="filter-chip" onclick="setTargetSort('price_desc',this)">💎 Дорогие</button>
+                            <button class="filter-chip" onclick="setTargetSort('price_asc',this)">💰 Дешёвые</button>
+                            <button class="filter-chip" onclick="setTargetSort('name',this)">📋 Имя</button>
                         </div>
-                        <input type="text" class="target-search-input" id="targetSearch" placeholder="Поиск..." oninput="searchTargetItems()">
-                        <div class="sort-controls">
-                            <button class="sort-btn" onclick="setTargetSort('closest', this)">🎯 Ближайшие</button>
-                            <button class="sort-btn" onclick="setTargetSort('price_desc', this)">💎 Дорогие</button>
-                            <button class="sort-btn" onclick="setTargetSort('price_asc', this)">💰 Дешёвые</button>
-                            <button class="sort-btn" onclick="setTargetSort('name', this)">📋 Имя</button>
-                        </div>
-                        <div class="price-filter-bar" id="priceFilterBar" style="display: none;">
-                            <span style="font-size:0.55rem;color:#4a4a5a;text-transform:uppercase;letter-spacing:0.04em;padding:0.2rem 0;margin-right:0.15rem;">Шанс</span>
-                            <button class="pf-btn" onclick="setPriceFilter('probhigh', this)">75%</button>
-                            <button class="pf-btn" onclick="setPriceFilter('probmid', this)">50%</button>
-                            <button class="pf-btn" onclick="setPriceFilter('probalow', this)">25%</button>
-                            <button class="pf-btn" onclick="setPriceFilter('proba10', this)">10%</button>
-                            <span style="font-size:0.55rem;color:#4a4a5a;text-transform:uppercase;letter-spacing:0.04em;padding:0.2rem 0;margin:0 0.15rem;">×</span>
-                            <button class="pf-btn" onclick="setPriceFilter('2', this)">2×</button>
-                            <button class="pf-btn" onclick="setPriceFilter('4', this)">4×</button>
-                            <button class="pf-btn" onclick="setPriceFilter('8', this)">8×</button>
-                            <button class="pf-btn" onclick="setPriceFilter('10', this)">10×</button>
+                        <div class="flex gap-1" style="margin-top:0.35rem;flex-wrap:wrap;display:none;" id="priceFilterBar">
+                            <span class="text-xs text-dim" style="padding:0.2rem 0;">Шанс</span>
+                            <button class="filter-chip" onclick="setPriceFilter('probhigh',this)">75%</button>
+                            <button class="filter-chip" onclick="setPriceFilter('probmid',this)">50%</button>
+                            <button class="filter-chip" onclick="setPriceFilter('probalow',this)">25%</button>
+                            <button class="filter-chip" onclick="setPriceFilter('proba10',this)">10%</button>
+                            <span class="text-xs text-dim" style="padding:0.2rem 0;">×</span>
+                            <button class="filter-chip" onclick="setPriceFilter('2',this)">2×</button>
+                            <button class="filter-chip" onclick="setPriceFilter('4',this)">4×</button>
+                            <button class="filter-chip" onclick="setPriceFilter('8',this)">8×</button>
+                            <button class="filter-chip" onclick="setPriceFilter('10',this)">10×</button>
                         </div>
                     </div>
-                    <div class="target-list" id="targetList">
-                        <div class="empty-state">Выберите предмет</div>
+                    <div style="max-height:400px;overflow-y:auto;padding:0.5rem;" id="targetList">
+                        <div class="text-dim text-sm text-center" style="padding:2rem;">Выберите предмет</div>
                     </div>
                 </div>
             </div>
 
             <!-- History -->
-            <div class="history-section">
-                <h3 class="history-title">📜 История <span class="history-count" id="historyCount">{{ recent_upgrades|length }}</span></h3>
-                <div class="history-grid" id="historyGrid"></div>
+            <div class="section">
+                <h3 class="display-font" style="font-size:0.95rem;margin-bottom:0.75rem;">📜 История <span class="text-dim text-xs" id="historyCount">{{ recent_upgrades|length }}</span></h3>
+                <div class="grid grid-auto-sm" id="historyGrid"></div>
             </div>
         </div>
     </main>
 
+    <script src="/static/js/sounds.js"></script>
+    <script src="/static/js/websocket.js"></script>
+    <script src="/static/js/safemode.js"></script>
     <script>
-        // === Фразы для побед/поражений ===
-        const PHRASE_PARTS = {
-            win: {
-                pre: ['🎉','🔥','⭐','🏆','💎','✨','🎯','👑','💫','🌟','🎰','💪','🥇','🎊','🏅'],
-                verb: ['Победа','Джекпот','Успех','Красава','В дамках','Есть контакт','Повезло','Забрал','Выбил','Сорвал куш','Всё пучком','Лут','Топчик','Козырь','Фартануло'],
-                noun: ['! 🔥','! 💎','! 🏆','! 👑','! ✨','! 💪','!','!','!'],
-            },
-            lose: {
-                pre: ['😔','💔','😢','💀','😭','😤','😩','💸','😞','😓','🤡','💀','😅','🙃','🤷'],
-                verb: ['Не повезло','Облом','Мимо','Пролёт','Не выпал','Не срослось','Пусто','Мимо кассы','В следующий раз','Не фортануло','Повезёт потом','Ноль','Минус','Увы','Печаль'],
-                noun: [' 😔',' 💔','...',' 😢',' 😭',' 💸','...'],
-            }
-        };
-        let usedPhraseKeys = new Set();
-        function getRandomPhrase(type) {
-            const parts = PHRASE_PARTS[type];
-            for (let attempt = 0; attempt < 100; attempt++) {
-                const pre = parts.pre[Math.floor(Math.random() * parts.pre.length)];
-                const verb = parts.verb[Math.floor(Math.random() * parts.verb.length)];
-                const noun = parts.noun[Math.floor(Math.random() * parts.noun.length)];
-                const key = pre + '|' + verb + '|' + noun;
-                if (!usedPhraseKeys.has(key)) {
-                    usedPhraseKeys.add(key);
-                    return pre + ' ' + verb + noun;
-                }
-            }
-            usedPhraseKeys.clear();
-            return getRandomPhrase(type);
-        }
+        let selectedInput = null, selectedTarget = null, inventoryItems = {{ inventory_items|tojson }}, allTargetItems = [];
+        let currentSearchQuery = '', currentSort = 'closest', currentPriceFilter = null, isSpinning = false, quickMode = false, invSearchQuery = '', invSort = 'default';
 
-        let selectedInput = null;
-        let selectedTarget = null;
-        let inventoryItems = {{ inventory_items|tojson }};
-        let allTargetItems = [];
-        let currentSearchQuery = '';
-        let currentSort = 'closest';
-        let currentPriceFilter = null;
-        let isSpinning = false;
-        let quickMode = false;
-        let invSearchQuery = '';
-        let invSort = 'default';
-
-        document.addEventListener('DOMContentLoaded', () => {
-            loadInitialTargets();
-            renderHistory({{ recent_upgrades|tojson }});
-            renderInventory();
-        });
+        document.addEventListener('DOMContentLoaded', () => { loadInitialTargets(); renderHistory({{ recent_upgrades|tojson }}); renderInventory(); });
 
         function renderInventory() {
             let items = [...inventoryItems];
-
-            if (invSearchQuery.length >= 1) {
-                const q = invSearchQuery.toLowerCase();
-                items = items.filter(i => i.name.toLowerCase().includes(q));
-            }
-
-            if (invSort === 'price_asc') {
-                items.sort((a, b) => a.price_rub - b.price_rub);
-            } else if (invSort === 'price_desc') {
-                items.sort((a, b) => b.price_rub - a.price_rub);
-            }
-
+            if (invSearchQuery.length >= 1) { const q = invSearchQuery.toLowerCase(); items = items.filter(i => i.name.toLowerCase().includes(q)); }
+            if (invSort === 'price_asc') items.sort((a,b) => a.price_rub - b.price_rub);
+            else if (invSort === 'price_desc') items.sort((a,b) => b.price_rub - a.price_rub);
             const container = document.getElementById('inventoryList');
-            if (items.length === 0) {
-                container.innerHTML = '<div class="empty-state" style="padding:1rem;text-align:center;color:var(--text-secondary)">Ничего не найдено</div>';
-                return;
-            }
-            container.innerHTML = items.map(item => `
-                <div class="inventory-item-card ${selectedInput && selectedInput.inventory_id === item.id ? 'selected' : ''}"
-                     onclick="selectInputItem(${item.id})" data-id="${item.id}" data-price="${item.price_rub}">
-                    <img src="${item.image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'">
-                    <div class="inventory-item-info">
-                        <div class="inventory-item-name" title="${item.name}">${item.name}</div>
-                        <div class="inventory-item-meta">
-                            <span>${item.rarity}</span>
-                            <span class="inventory-item-price">${Math.floor(item.price_rub).toLocaleString()} ₽</span>
-                        </div>
-                    </div>
-                </div>
-            `).join('');
+            if (!items.length) { container.innerHTML = '<div class="text-dim text-sm text-center" style="padding:1rem;">Ничего не найдено</div>'; return; }
+            container.innerHTML = items.map(item => `<div style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.5rem;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s;${selectedInput && selectedInput.inventory_id === item.id ? 'background:var(--primary-subtle);border:1px solid rgba(245,158,11,0.2);' : 'border:1px solid transparent;'}" onclick="selectInputItem(${item.id})" onmouseover="this.style.background='var(--bg-hover)'" onmouseout="this.style.background='${selectedInput && selectedInput.inventory_id === item.id ? 'var(--primary-subtle)' : ''}'">
+                <img src="${item.image_url||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" style="width:40px;height:32px;object-fit:contain;flex-shrink:0;">
+                <div style="flex:1;min-width:0;"><div class="text-xs truncate" title="${item.name}">${item.name}</div><div class="text-xs text-dim">${item.rarity} <span class="text-primary">${Math.floor(item.price_rub).toLocaleString()} ₽</span></div></div>
+            </div>`).join('');
         }
 
         async function loadInitialTargets() {
-            try {
-                const response = await fetch(`/admin/api/items/search?q=&limit=600`);
-                allTargetItems = await response.json();
-                allTargetItems = allTargetItems.filter((item, index, self) =>
-                    index === self.findIndex(t => t.id === item.id)
-                );
-                currentSort = 'closest';
-                document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
-                document.querySelector('.sort-btn[onclick*="closest"]')?.classList.add('active');
-                applySortAndFilter();
-            } catch (e) {}
+            try { const r = await fetch('/admin/api/items/search?q=&limit=600'); allTargetItems = await r.json(); allTargetItems = allTargetItems.filter((item,index,self) => index === self.findIndex(t => t.id === item.id)); applySortAndFilter(); } catch(e) {}
         }
 
         async function loadTargetsForInput(inputPrice) {
-            try {
-                // Поиск только по цене — больше выбора и приколюх
-                const minP = Math.round(inputPrice * 1.05);
-                const maxP = Math.round(inputPrice * 19);
-                const resp = await fetch(`/admin/api/items/search?q=&min_price=${minP}&max_price=${maxP}&limit=600`);
-                const items = await resp.json();
-                allTargetItems = items.filter((item, index, self) =>
-                    index === self.findIndex(t => t.id === item.id)
-                );
-                currentSort = 'closest';
-                document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
-                document.querySelector('.sort-btn[onclick*="closest"]')?.classList.add('active');
-                applySortAndFilter();
-            } catch (e) {
-                console.error('Failed to load targets:', e);
-                applySortAndFilter();
-            }
+            try { const minP = Math.round(inputPrice*1.05), maxP = Math.round(inputPrice*19); const r = await fetch(`/admin/api/items/search?q=&min_price=${minP}&max_price=${maxP}&limit=600`); const items = await r.json(); allTargetItems = items.filter((item,index,self) => index === self.findIndex(t => t.id === item.id)); applySortAndFilter(); } catch(e) { applySortAndFilter(); }
         }
 
         function selectInputItem(itemId) {
             if (isSpinning) return;
-            const item = inventoryItems.find(i => i.id === itemId);
-            if (!item) return;
-
-            selectedInput = {
-                inventory_id: item.id,
-                item_id: item.item_id,
-                name: item.name,
-                price: item.price_rub,
-                image_url: item.image_url,
-                rarity: item.rarity
-            };
-
+            const item = inventoryItems.find(i => i.id === itemId); if (!item) return;
+            selectedInput = { inventory_id: item.id, item_id: item.item_id, name: item.name, price: item.price_rub, image_url: item.image_url, rarity: item.rarity };
             renderInventory();
             document.getElementById('displayInputImage').src = item.image_url || '/static/placeholder.png';
-            document.getElementById('displayInputName').textContent = item.name.substring(0, 25);
+            document.getElementById('displayInputName').textContent = item.name.substring(0,25);
             document.getElementById('displayInputPrice').textContent = `${Math.floor(item.price_rub).toLocaleString()} ₽`;
-            document.getElementById('selectedInputDisplay').classList.add('selected');
-
             document.getElementById('priceFilterBar').style.display = 'flex';
-            currentPriceFilter = null;
-            document.querySelectorAll('.pf-btn').forEach(b => b.classList.remove('active'));
-            currentSort = 'closest';
-            document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
-            document.querySelector('.sort-btn[onclick*="closest"]')?.classList.add('active');
-
+            currentPriceFilter = null; currentSort = 'closest';
+            document.querySelectorAll('.filter-chip').forEach(b => b.classList.remove('active'));
+            document.querySelector('.filter-chip[onclick*="closest"]')?.classList.add('active');
             loadTargetsForInput(item.price_rub);
             updateProbability();
         }
 
         function applySortAndFilter() {
             if (!allTargetItems.length) return;
-
             let filtered = [...allTargetItems];
-
-            if (currentSearchQuery.length >= 2) {
-                filtered = filtered.filter(item =>
-                    item.name.toLowerCase().includes(currentSearchQuery.toLowerCase())
-                );
-            }
-
+            if (currentSearchQuery.length >= 2) filtered = filtered.filter(item => item.name.toLowerCase().includes(currentSearchQuery.toLowerCase()));
             if (selectedInput) {
                 const inputPrice = selectedInput.price;
-                filtered = filtered.filter(item => {
-                    const price = item.price_rub || 100;
-                    if (price <= inputPrice) return false;
-                    const maxPrice = inputPrice * 19;
-                    return price <= maxPrice;
-                });
-
+                filtered = filtered.filter(item => { const p = item.price_rub||100; return p > inputPrice && p <= inputPrice*19; });
                 if (currentPriceFilter) {
                     filtered = filtered.filter(item => {
-                        const price = item.price_rub || 100;
-                        const ratio = price / inputPrice;
-                        const prob = (inputPrice / price) * 100;
-                        switch (currentPriceFilter) {
-                            case '2':    return ratio >= 1.8 && ratio <= 2.5;
-                            case '4':    return ratio >= 3.5 && ratio <= 5;
-                            case '8':    return ratio >= 7 && ratio <= 10;
-                            case '10':   return ratio >= 8.5 && ratio <= 12;
-                            case 'probalow':  return prob >= 20 && prob <= 30;
-                            case 'probmid':   return prob >= 45 && prob <= 55;
-                            case 'probhigh':  return prob >= 70 && prob <= 75;
-                            case 'proba10':   return prob >= 8 && prob <= 12;
+                        const p = item.price_rub||100, ratio = p/inputPrice;
+                        switch(currentPriceFilter) {
+                            case '2': return ratio>=1.8&&ratio<=2.5; case '4': return ratio>=3.5&&ratio<=5; case '8': return ratio>=7&&ratio<=10; case '10': return ratio>=8.5&&ratio<=12;
+                            case 'probalow': {const prob=(inputPrice/p)*100; return prob>=20&&prob<=30;} case 'probmid': {const prob=(inputPrice/p)*100; return prob>=45&&prob<=55;} case 'probhigh': {const prob=(inputPrice/p)*100; return prob>=70&&prob<=75;} case 'proba10': {const prob=(inputPrice/p)*100; return prob>=8&&prob<=12;}
                             default: return true;
                         }
                     });
                 }
             }
-
             if (currentSort === 'closest' && selectedInput) {
-                const inputPrice = selectedInput.price;
-                filtered.sort((a, b) => {
-                    const pa = (inputPrice / (a.price_rub || 100)) * 100;
-                    const pb = (inputPrice / (b.price_rub || 100)) * 100;
-                    const da = Math.abs(Math.min(75, pa) - 75);
-                    const db = Math.abs(Math.min(75, pb) - 75);
-                    if (da !== db) return da - db;
-                    return (a.price_rub || 0) - (b.price_rub || 0);
-                });
-            } else if (currentSort === 'price_asc') {
-                filtered.sort((a, b) => (a.price_rub || 0) - (b.price_rub || 0));
-            } else if (currentSort === 'price_desc') {
-                filtered.sort((a, b) => (b.price_rub || 0) - (a.price_rub || 0));
-            } else {
-                filtered.sort((a, b) => a.name.localeCompare(b.name));
-            }
-
-            displayTargetItems(filtered.slice(0, 120));
+                const ip = selectedInput.price;
+                filtered.sort((a,b) => { const da = Math.abs(Math.min(75,(ip/(a.price_rub||100))*100)-75), db = Math.abs(Math.min(75,(ip/(b.price_rub||100))*100)-75); return da!==db?da-db:(a.price_rub||0)-(b.price_rub||0); });
+            } else if (currentSort === 'price_asc') filtered.sort((a,b) => (a.price_rub||0)-(b.price_rub||0));
+            else if (currentSort === 'price_desc') filtered.sort((a,b) => (b.price_rub||0)-(a.price_rub||0));
+            else filtered.sort((a,b) => a.name.localeCompare(b.name));
+            displayTargetItems(filtered.slice(0,120));
         }
 
-        function setTargetSort(sort, btn) {
-            currentSort = sort;
-            document.querySelectorAll('.sort-btn').forEach(b => b.classList.remove('active'));
-            if (btn) btn.classList.add('active');
-            applySortAndFilter();
-        }
-
-        function setPriceFilter(mult, btn) {
-            currentPriceFilter = mult === currentPriceFilter ? null : mult;
-            document.querySelectorAll('.pf-btn').forEach(b => b.classList.remove('active'));
-            if (currentPriceFilter && btn) btn.classList.add('active');
-            applySortAndFilter();
-        }
-
-        function onInvSearch() {
-            invSearchQuery = document.getElementById('invSearch').value;
-            renderInventory();
-        }
-
-        function setInvSort(sort, btn) {
-            invSort = sort;
-            document.querySelectorAll('.inv-sort-btn').forEach(b => b.classList.remove('active'));
-            if (btn) btn.classList.add('active');
-            renderInventory();
-        }
-
-        function toggleQuickMode() {
-            quickMode = !quickMode;
-            document.getElementById('quickModeBtn').classList.toggle('active', quickMode);
-        }
+        function setTargetSort(sort, btn) { currentSort = sort; document.querySelectorAll('.filter-chip').forEach(b => b.classList.remove('active')); if (btn) btn.classList.add('active'); applySortAndFilter(); }
+        function setPriceFilter(mult, btn) { currentPriceFilter = mult === currentPriceFilter ? null : mult; document.querySelectorAll('.filter-chip').forEach(b => b.classList.remove('active')); if (currentPriceFilter && btn) btn.classList.add('active'); applySortAndFilter(); }
+        function onInvSearch() { invSearchQuery = document.getElementById('invSearch').value; renderInventory(); }
+        function setInvSort(sort, btn) { invSort = sort; document.querySelectorAll('.btn-icon').forEach(b => b.classList.remove('active')); if (btn) btn.classList.add('active'); renderInventory(); }
+        function toggleQuickMode() { quickMode = !quickMode; document.getElementById('quickModeBtn').classList.toggle('active', quickMode); }
 
         async function searchTargetItems() {
-            const query = document.getElementById('targetSearch').value;
-            currentSearchQuery = query;
+            currentSearchQuery = document.getElementById('targetSearch').value;
             const container = document.getElementById('targetList');
-
-            if (query.length < 2) {
-                applySortAndFilter();
-                return;
-            }
-
-            container.innerHTML = '<div class="empty-state">🔍 Поиск…</div>';
-
-            try {
-                const response = await fetch(`/admin/api/items/search?q=${encodeURIComponent(query)}&limit=600`);
-                const items = await response.json();
-                allTargetItems = items.filter((item, index, self) =>
-                    index === self.findIndex(t => t.id === item.id)
-                );
-                applySortAndFilter();
-            } catch (e) {
-                container.innerHTML = '<div class="empty-state">Ошибка</div>';
-            }
+            if (currentSearchQuery.length < 2) { applySortAndFilter(); return; }
+            container.innerHTML = '<div class="text-dim text-sm text-center" style="padding:2rem;">🔍 Поиск…</div>';
+            try { const r = await fetch(`/admin/api/items/search?q=${encodeURIComponent(currentSearchQuery)}&limit=600`); const items = await r.json(); allTargetItems = items.filter((item,index,self) => index === self.findIndex(t => t.id === item.id)); applySortAndFilter(); } catch(e) { container.innerHTML = '<div class="text-dim text-sm text-center">Ошибка</div>'; }
         }
 
         function displayTargetItems(items) {
             const container = document.getElementById('targetList');
-
-            if (items.length === 0) {
-                container.innerHTML = '<div class="empty-state">Ничего не найдено</div>';
-                return;
-            }
-
+            if (!items.length) { container.innerHTML = '<div class="text-dim text-sm text-center" style="padding:2rem;">Ничего не найдено</div>'; return; }
             container.innerHTML = items.map(item => {
-                const price = item.price_rub || 100;
-                const imageUrl = item.image_url || '/static/placeholder.png';
-
-                let isDisabled = false;
-                let disabledReason = '';
-                if (selectedInput) {
-                    const minPrice = selectedInput.price * 0.5;
-                    const maxPrice = selectedInput.price * 19;
-                    if (price < minPrice) {
-                        isDisabled = true;
-                        disabledReason = 'Слишком дешёвый';
-                    } else if (price > maxPrice) {
-                        isDisabled = true;
-                        disabledReason = 'Слишком дорогой';
-                    }
-                }
-
-                const safeName = item.name.replace(/'/g, "\\'");
-                const safeUrl = imageUrl.replace(/'/g, "\\'");
-
-                return `
-                    <div class="target-item-card ${isDisabled ? 'disabled' : ''}"
-                         onclick="selectTargetItem(${item.id}, '${safeName}', ${price}, '${safeUrl}', '${item.rarity || 'Unknown'}')"
-                         data-price="${price}"
-                         title="${isDisabled ? disabledReason : ''}">
-                        <img src="${imageUrl}" onerror="this.src='/static/placeholder.png'">
-                        <div class="target-item-info">
-                            <div class="target-item-name" title="${item.name}">${item.name}</div>
-                            <div class="target-item-meta">
-                                <span>${item.rarity || ''}</span>
-                                <span class="target-item-price">${price.toLocaleString()} ₽</span>
-                            </div>
-                        </div>
-                    </div>
-                `;
+                const price = item.price_rub||100, imageUrl = item.image_url||'/static/placeholder.png';
+                let disabled = false, disabledReason = '';
+                if (selectedInput) { const minP = selectedInput.price*0.5, maxP = selectedInput.price*19; if (price < minP) { disabled = true; disabledReason = 'Слишком дешёвый'; } else if (price > maxP) { disabled = true; disabledReason = 'Слишком дорогой'; } }
+                const safeName = item.name.replace(/'/g,"\\'"); const safeUrl = imageUrl.replace(/'/g,"\\'");
+                return `<div style="display:flex;align-items:center;gap:0.5rem;padding:0.4rem 0.5rem;border-radius:var(--radius-sm);cursor:pointer;transition:all 0.15s;${disabled ? 'opacity:0.35;cursor:not-allowed;' : ''}border:1px solid transparent;" class="target-item-card ${disabled ? 'disabled' : ''}" onclick="${disabled ? `alert('${disabledReason}')` : `selectTargetItem(${item.id},'${safeName}',${price},'${safeUrl}','${item.rarity||'Unknown'}')`}" onmouseover="${disabled ? '' : 'this.style.background=\'var(--bg-hover)\''}" onmouseout="this.style.background=''" title="${disabled ? disabledReason : ''}">
+                    <img src="${imageUrl}" onerror="this.src='/static/placeholder.png'" style="width:36px;height:28px;object-fit:contain;flex-shrink:0;">
+                    <div style="flex:1;min-width:0;"><div class="text-xs truncate" title="${item.name}">${item.name}</div><div class="text-xs text-dim">${item.rarity||''} <span class="text-primary">${price.toLocaleString()} ₽</span></div></div>
+                </div>`;
             }).join('');
-
-            if (selectedTarget) {
-                document.querySelectorAll('.target-item-card').forEach(card => {
-                    if (card.onclick && card.onclick.toString().includes(`selectTargetItem(${selectedTarget.item_id}`)) {
-                        card.classList.add('selected');
-                    }
-                });
-            }
         }
 
         function selectTargetItem(id, name, price, imageUrl, rarity) {
-            if (isSpinning) return;
-            const card = event.target.closest('.target-item-card');
-            if (card.classList.contains('disabled')) {
-                alert('Этот предмет не подходит!');
-                return;
-            }
-
-            document.querySelectorAll('.target-item-card').forEach(c => c.classList.remove('selected'));
-            card.classList.add('selected');
-
-            selectedTarget = {
-                item_id: id,
-                name: name,
-                price: price,
-                image_url: imageUrl,
-                rarity: rarity
-            };
-
-            document.getElementById('displayTargetImage').src = imageUrl || '/static/placeholder.png';
-            document.getElementById('displayTargetName').textContent = name.substring(0, 25);
+            document.querySelectorAll('.target-item-card').forEach(c => c.style.borderColor = 'transparent'); const card = event.target.closest('.target-item-card'); if (card) card.style.borderColor = 'var(--primary)';
+            selectedTarget = { item_id: id, name, price, image_url: imageUrl, rarity };
+            document.getElementById('displayTargetImage').src = imageUrl||'/static/placeholder.png';
+            document.getElementById('displayTargetName').textContent = name.substring(0,25);
             document.getElementById('displayTargetPrice').textContent = `${price.toLocaleString()} ₽`;
-            document.getElementById('selectedTargetDisplay').classList.add('selected');
-
             updateProbability();
         }
 
         async function updateProbability() {
             if (!selectedInput || !selectedTarget) return;
-
-            const formData = new FormData();
-            formData.append('input_inventory_id', selectedInput.inventory_id);
-            formData.append('target_item_id', selectedTarget.item_id);
-
-            try {
-                const response = await fetch('/web/api/upgrade/calculate', {
-                    method: 'POST',
-                    body: formData
-                });
-
-                const data = await response.json();
-
-                if (data.success) {
-                    const prob = data.adjusted_probability.toFixed(1);
-                    document.getElementById('wheelProbability').textContent = `${prob}%`;
-
-                    const wheel = document.getElementById('upgradeWheel');
-                    wheel.style.setProperty('--probability', prob);
-
-                    document.getElementById('upgradeBtn').disabled = false;
-                }
-            } catch (e) {}
+            const fd = new FormData(); fd.append('input_inventory_id', selectedInput.inventory_id); fd.append('target_item_id', selectedTarget.item_id);
+            try { const r = await fetch('/web/api/upgrade/calculate', { method:'POST', body:fd }); const d = await r.json(); if (d.success) { document.getElementById('wheelProbability').textContent = `${d.adjusted_probability.toFixed(1)}%`; document.getElementById('upgradeWheel').style.setProperty('--probability', d.adjusted_probability); document.getElementById('upgradeBtn').disabled = false; } } catch(e) {}
         }
 
         function sparkles(container) {
-            for (let i = 0; i < 24; i++) {
-                const s = document.createElement('div');
-                s.className = 'sparkle';
-                s.style.left = Math.random() * 100 + '%';
-                s.style.top = Math.random() * 100 + '%';
-                s.style.setProperty('--dx', (Math.random() - 0.5) * 140 + 'px');
-                s.style.setProperty('--dy', -(Math.random() * 120 + 50) + 'px');
-                s.style.animationDelay = Math.random() * 0.6 + 's';
-                s.style.width = (2 + Math.random() * 5) + 'px';
-                s.style.height = s.style.width;
-                s.style.background = ['#f59e0b', '#10b981', '#ffd700', '#fff', '#ff6b6b'][Math.floor(Math.random() * 5)];
-                container.appendChild(s);
-            }
+            for (let i = 0; i < 24; i++) { const s = document.createElement('div'); s.className = 'sparkle'; s.style.cssText = `position:absolute;width:${2+Math.random()*5}px;height:${2+Math.random()*5}px;border-radius:50%;background:${['#f59e0b','#10b981','#ffd700','#fff','#ff6b6b'][Math.floor(Math.random()*5)]};left:${Math.random()*100}%;top:${Math.random()*100}%;pointer-events:none;animation:sparkleFloat 0.8s ease forwards;`; s.style.setProperty('--dx', (Math.random()-0.5)*140+'px'); s.style.setProperty('--dy', -(Math.random()*120+50)+'px'); container.style.position = 'relative'; container.appendChild(s); }
         }
 
         async function refreshBalance() {
-            try {
-                const r = await fetch('/web/api/user/balance');
-                const d = await r.json();
-                if (d.success) {
-                    document.querySelectorAll('.user-balance').forEach(el => {
-                        el.textContent = `${Math.floor(d.balance).toLocaleString()} ₽`;
-                    });
-                }
-            } catch (e) {}
+            try { const r = await fetch('/web/api/user/balance'); const d = await r.json(); if (d.success) document.querySelectorAll('.user-balance').forEach(el => el.textContent = `${Math.floor(d.balance).toLocaleString()} ₽`); } catch(e) {}
         }
 
         async function refreshHistory() {
-            try {
-                const r = await fetch('/web/api/upgrade/history');
-                const d = await r.json();
-                if (d.success) renderHistory(d.history);
-            } catch (e) {}
+            try { const r = await fetch('/web/api/upgrade/history'); const d = await r.json(); if (d.success) renderHistory(d.history); } catch(e) {}
         }
 
         function renderHistory(items) {
-            const grid = document.getElementById('historyGrid');
-            const count = document.getElementById('historyCount');
+            const grid = document.getElementById('historyGrid'), count = document.getElementById('historyCount');
             if (count) count.textContent = items.length;
-
-            if (!items.length) {
-                grid.innerHTML = '<div class="empty-state" style="grid-column:1/-1;text-align:center;padding:1rem;color:var(--text-secondary)">История пуста</div>';
-                return;
-            }
-
-            grid.innerHTML = items.map(u => `
-                <div class="history-card ${u.success ? 'success' : 'fail'}">
-                    ${u.success
-                        ? `<img src="${u.input_image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" loading="lazy">
-                           <div class="history-info">
-                               <div class="history-names">${(u.input_item_name || '').substring(0, 12)}… → ${(u.target_item_name || '').substring(0, 12)}…</div>
-                               <div class="history-meta">
-                                   <span>${u.probability}%</span>
-                                   <span class="history-result success">✅</span>
-                               </div>
-                           </div>
-                           <img src="${u.target_image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" loading="lazy" style="width:32px;height:28px;">`
-                        : `<img src="${u.target_image_url || '/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" loading="lazy" style="opacity:0.5;">
-                           <div class="history-info">
-                               <div class="history-names">${(u.input_item_name || '').substring(0, 12)}… → ${(u.target_item_name || '').substring(0, 12)}…</div>
-                               <div class="history-meta">
-                                   <span>${u.probability}%</span>
-                                   <span class="history-result fail">❌</span>
-                               </div>
-                           </div>`
-                    }
-                </div>
-            `).join('');
-        }
-
-        function showToast(message, type) {
-            const container = document.getElementById('toastContainer');
-            const toast = document.createElement('div');
-            toast.className = `toast ${type}`;
-            toast.textContent = message;
-            container.appendChild(toast);
-            requestAnimationFrame(() => toast.classList.add('show'));
-            setTimeout(() => {
-                toast.classList.remove('show');
-                setTimeout(() => toast.remove(), 300);
-            }, 3000);
+            if (!items.length) { grid.innerHTML = '<div class="text-dim text-sm text-center" style="grid-column:1/-1;padding:1rem;">История пуста</div>'; return; }
+            grid.innerHTML = items.map(u => `<div class="card" style="padding:0.5rem 0.75rem;display:flex;align-items:center;gap:0.5rem;${u.success ? 'border-color:rgba(34,197,94,0.2);' : 'opacity:0.6;'}">
+                ${u.success ? `<img src="${u.input_image_url||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" style="width:28px;height:22px;object-fit:contain;"><div style="flex:1;min-width:0;"><div class="text-xs truncate">${(u.input_item_name||'').substring(0,12)}… → ${(u.target_item_name||'').substring(0,12)}…</div><div class="text-xs text-dim">${u.probability}% <span style="color:var(--success)">✅</span></div></div><img src="${u.target_image_url||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" style="width:28px;height:22px;object-fit:contain;">`
+                : `<img src="${u.target_image_url||'/static/placeholder.png'}" onerror="this.src='/static/placeholder.png'" style="width:28px;height:22px;object-fit:contain;opacity:0.5;"><div style="flex:1;min-width:0;"><div class="text-xs truncate">${(u.input_item_name||'').substring(0,12)}… → ${(u.target_item_name||'').substring(0,12)}…</div><div class="text-xs text-dim">${u.probability}% <span style="color:var(--danger)">❌</span></div></div>`}
+            </div>`).join('');
         }
 
         async function executeUpgrade() {
             if (!selectedInput || !selectedTarget || isSpinning) return;
-
-            // Lock the chosen items at spin start
-            const lockedInputId = selectedInput.inventory_id;
-            const lockedTargetId = selectedTarget.item_id;
-            const lockedPrice = selectedInput.price;
-
-            const formData = new FormData();
-            formData.append('input_inventory_id', lockedInputId);
-            formData.append('target_item_id', lockedTargetId);
-            formData.append('quick_mode', quickMode ? 'true' : 'false');
-
+            const lockedInputId = selectedInput.inventory_id, lockedTargetId = selectedTarget.item_id;
+            const fd = new FormData(); fd.append('input_inventory_id', lockedInputId); fd.append('target_item_id', lockedTargetId); fd.append('quick_mode', quickMode ? 'true' : 'false');
             const btn = document.getElementById('upgradeBtn');
-
-            isSpinning = true;
-            btn.disabled = true;
-            btn.textContent = '🎰 Крутим…';
-
+            isSpinning = true; btn.disabled = true; btn.textContent = '🎰 Крутим…';
             const pointer = document.getElementById('pointerContainer');
-            pointer.style.transition = 'none';
-            pointer.style.transform = 'rotate(0deg)';
-            void pointer.offsetHeight;
-
+            pointer.style.transition = 'none'; pointer.style.transform = 'rotate(0deg)'; void pointer.offsetHeight;
             try {
-                const response = await fetch('/web/api/upgrade/execute', {
-                    method: 'POST',
-                    body: formData
-                });
-
-                const data = await response.json();
-
+                const r = await fetch('/web/api/upgrade/execute', { method:'POST', body:fd }); const data = await r.json();
                 if (data.success) {
                     if (typeof handleAchievements === 'function') handleAchievements(data);
                     const spinDuration = quickMode ? 4 : 12;
-                    pointer.style.transition = `transform ${spinDuration}s cubic-bezier(0.4, 0.0, 0.15, 1.0)`;
+                    pointer.style.transition = `transform ${spinDuration}s cubic-bezier(0.4,0,0.15,1.0)`;
                     pointer.style.transform = `rotate(${data.final_angle}deg)`;
-
-                    // Тики колеса: быстрая фаза каждые 15°, медленная (последние 90°) — 30°
-                    let tickLastDeg = 0, tickCumulative = 0, tickNextThreshold = 15;
-                    let tickLastTickCumulative = 0;
-                    let tickControlPlayed = false;
-                    const tickSlowStart = data.final_angle - 90;
-                    const tickStartTime = performance.now();
-                    const tickMaxDuration = spinDuration * 1000 + 500;
+                    
+                    let tickLastDeg = 0, tickCumulative = 0, tickNextThreshold = 15, tickLastTickCumulative = 0, tickControlPlayed = false;
+                    const tickSlowStart = data.final_angle - 90, tickStartTime = performance.now(), tickMaxDuration = spinDuration*1000+500;
                     let tickRAF = null;
                     function tickLoop() {
                         const elapsed = performance.now() - tickStartTime;
                         if (elapsed > tickMaxDuration) return;
                         const style = window.getComputedStyle(pointer);
-                        let deg = 0;
-                        const tf = style.transform;
+                        let deg = 0; const tf = style.transform;
                         if (tf && tf !== 'none') {
-                            const m = tf.match(/matrix\(([^)]+)\)/);
-                            if (m) {
-                                const v = m[1].split(', ').map(Number);
-                                deg = Math.atan2(v[1], v[0]) * (180 / Math.PI);
-                            } else {
-                                const m2 = tf.match(/rotate\(([-\d.]+)deg\)/);
-                                if (m2) deg = parseFloat(m2[1]);
-                            }
-                        }
-                        let delta = deg - tickLastDeg;
-                        if (delta > 180) delta -= 360;
-                        if (delta < -180) delta += 360;
-                        tickCumulative += delta;
-                        tickLastDeg = deg;
-                        if (tickCumulative >= tickNextThreshold) {
-                            SoundManager.wheelSpin();
-                            tickLastTickCumulative = tickCumulative;
-                            tickNextThreshold += tickCumulative < tickSlowStart ? 15 : 30;
-                        }
-                        // Контрольный тик: если до финала <10°, а последний тик был >15° назад
-                        const remaining = data.final_angle - tickCumulative;
-                        const gap = tickCumulative - tickLastTickCumulative;
-                        if (remaining < 10 && remaining > 0 && gap > 15 && !tickControlPlayed) {
-                            SoundManager.wheelSpin();
-                            tickControlPlayed = true;
+                            const m = tf.match(/matrix\(([^)]+)\)/); if (m) { const v = m[1].split(', ').map(Number); deg = Math.atan2(v[1], v[0]) * (180/Math.PI); }
+                            else { const m2 = tf.match(/rotate\(([-\d.]+)deg\)/); if (m2) deg = parseFloat(m2[1]); }
                         }
+                        let delta = deg - tickLastDeg; if (delta > 180) delta -= 360; if (delta < -180) delta += 360;
+                        tickCumulative += delta; tickLastDeg = deg;
+                        if (tickCumulative >= tickNextThreshold) { SoundManager.wheelTick(); tickLastTickCumulative = tickCumulative; tickNextThreshold += tickCumulative < tickSlowStart ? 15 : 30; }
+                        const remaining = data.final_angle - tickCumulative, gap = tickCumulative - tickLastTickCumulative;
+                        if (remaining < 10 && remaining > 0 && gap > 15 && !tickControlPlayed) { SoundManager.wheelTick(); tickControlPlayed = true; }
                         tickRAF = requestAnimationFrame(tickLoop);
                     }
                     tickRAF = requestAnimationFrame(tickLoop);
 
                     let resultShown = false;
-                    const onTransitionEnd = () => {
-                        pointer.removeEventListener('transitionend', onTransitionEnd);
-                        if (tickRAF) cancelAnimationFrame(tickRAF);
-                        showResult();
-                    };
+                    const onTransitionEnd = () => { pointer.removeEventListener('transitionend', onTransitionEnd); if (tickRAF) cancelAnimationFrame(tickRAF); showResult(); };
                     pointer.addEventListener('transitionend', onTransitionEnd);
 
                     const showResult = () => {
-                        if (resultShown) return;
-                        resultShown = true;
+                        if (resultShown) return; resultShown = true;
                         if (data.upgrade_success && data.received_item) {
-                            document.getElementById('displayTargetImage').src = data.received_item.image_url || '/static/placeholder.png';
-                            document.getElementById('displayTargetName').textContent = data.received_item.name.substring(0, 25);
+                            document.getElementById('displayTargetImage').src = data.received_item.image_url||'/static/placeholder.png';
+                            document.getElementById('displayTargetName').textContent = data.received_item.name.substring(0,25);
                             document.getElementById('displayTargetPrice').textContent = `${Math.floor(data.received_item.price).toLocaleString()} ₽`;
-                            document.getElementById('selectedTargetDisplay').style.borderColor = '#10b981';
-                            document.getElementById('selectedTargetDisplay').style.boxShadow = '0 0 20px rgba(16,185,129,0.3)';
-                            showToast(`${getRandomPhrase('win')} ${data.received_item.name}`, 'success');
-                            SoundManager.wheelWin();
+                            SoundManager.wheelWin(); showNotification('🎉 ' + data.received_item.name, 'success');
                         } else {
-                            document.getElementById('selectedInputDisplay').style.borderColor = '#ef4444';
-                            document.getElementById('selectedInputDisplay').style.boxShadow = '0 0 20px rgba(239,68,68,0.3)';
-                            showToast(getRandomPhrase('lose'), 'fail');
-                            SoundManager.wheelLose();
+                            SoundManager.wheelLose(); showNotification('😔 Не повезло', 'error');
                         }
-
                         refreshBalance();
-
                         setTimeout(() => {
-                            document.getElementById('selectedInputDisplay').style.borderColor = '';
-                            document.getElementById('selectedInputDisplay').style.boxShadow = '';
-                            document.getElementById('selectedTargetDisplay').style.borderColor = '';
-                            document.getElementById('selectedTargetDisplay').style.boxShadow = '';
-
                             inventoryItems = inventoryItems.filter(i => i.id !== lockedInputId);
-                            selectedInput = null;
-                            selectedTarget = null;
-                            document.getElementById('selectedInputDisplay').classList.remove('selected');
-                            document.getElementById('selectedTargetDisplay').classList.remove('selected');
+                            selectedInput = null; selectedTarget = null;
                             document.getElementById('displayInputImage').src = '/static/placeholder.png';
                             document.getElementById('displayInputName').textContent = 'Не выбрано';
                             document.getElementById('displayInputPrice').textContent = '—';
@@ -738,87 +341,23 @@
                             document.getElementById('displayTargetName').textContent = 'Не выбрано';
                             document.getElementById('displayTargetPrice').textContent = '—';
                             document.getElementById('wheelProbability').textContent = '0%';
-                            document.getElementById('upgradeWheel').style.setProperty('--probability', '0');
-                            btn.disabled = true;
-                            btn.textContent = '🎲 Апгрейд';
-                            isSpinning = false;
-                            refreshInventoryAjax();
+                            document.getElementById('upgradeWheel').style.setProperty('--probability','0');
+                            btn.disabled = true; btn.textContent = '🎲 Апгрейд'; isSpinning = false;
                             refreshHistory();
-                            pointer.style.transition = 'none';
-                            pointer.style.transform = 'rotate(0deg)';
+                            pointer.style.transition = 'none'; pointer.style.transform = 'rotate(0deg)';
                         }, 2000);
                     };
-
-                    // Запасной таймер на случай если transitionend не сработает
-                    setTimeout(showResult, spinDuration * 1000 + 300);
-                } else {
-                    alert(data.error || 'Ошибка');
-                    isSpinning = false;
-                    btn.disabled = false;
-                    btn.textContent = '🎲 Апгрейд';
-                }
-            } catch (e) {
-                alert('Ошибка соединения');
-                isSpinning = false;
-                btn.disabled = false;
-                btn.textContent = '🎲 Апгрейд';
-            }
+                    setTimeout(showResult, spinDuration*1000+300);
+                } else { alert(data.error||'Ошибка'); isSpinning = false; btn.disabled = false; btn.textContent = '🎲 Апгрейд'; }
+            } catch(e) { alert('Ошибка соединения'); isSpinning = false; btn.disabled = false; btn.textContent = '🎲 Апгрейд'; }
         }
 
-        async function refreshInventoryAjax() {
-            try {
-                const resp = await fetch('/web/api/inventory/items');
-                const serverItems = await resp.json();
-                // Enrich with price/image from server data
-                inventoryItems = serverItems.map(item => {
-                    const img = item.image_url || (item.item_id ? `/static/placeholder.png` : '/static/placeholder.png');
-                    return {
-                        id: item.id,
-                        item_id: item.item_id,
-                        name: item.name,
-                        rarity: item.rarity,
-                        price_rub: item.price || item.price_rub || 100,
-                        image_url: img,
-                        wear: item.wear || '',
-                        float: item.float || item.float_value || 0
-                    };
-                });
-                renderInventory();
-            } catch (e) {
-                console.error('Failed to refresh inventory:', e);
-                renderInventory();
-            }
-        }
-
-        async function logout() {
-            await fetch('/web/api/auth/logout', { method: 'POST' });
-            window.location.href = '/';
-        }
-    </script>
-    <script src="/static/js/sounds.js"></script>
-    <script src="/static/js/websocket.js"></script>
-    <script src="/static/js/safemode.js"></script>
-    <script>
-        function handleAchievements(data) {
-            if (data && data.achievements_unlocked && Array.isArray(data.achievements_unlocked) && data.achievements_unlocked.length > 0) {
-                data.achievements_unlocked.forEach(ach => {
-                    const title = ach.title || ach.name || 'Достижение';
-                    const reward = ach.reward || '';
-                    showAchievementPopup(title, reward);
-                });
-            }
-        }
+        function handleAchievements(data) { if (data && data.achievements_unlocked && Array.isArray(data.achievements_unlocked) && data.achievements_unlocked.length > 0) data.achievements_unlocked.forEach(ach => showAchievementPopup(ach.title||ach.name||'Достижение', ach.reward||'')); }
     </script>
     <script>
-        function toggleSound() {
-            const enabled = SoundManager.toggle();
-            document.getElementById('soundToggle').textContent = enabled ? '🔊' : '🔇';
-        }
-        document.addEventListener('DOMContentLoaded', () => {
-            const btn = document.getElementById('soundToggle');
-            if (btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇';
-        });
+        function toggleSound() { const e = SoundManager.toggle(); document.getElementById('soundToggle').textContent = e ? '🔊' : '🔇'; }
+        document.addEventListener('DOMContentLoaded', () => { const btn = document.getElementById('soundToggle'); if(btn) btn.textContent = localStorage.getItem('sound_enabled') !== 'false' ? '🔊' : '🔇'; });
     </script>
 {% if user %}{% include '_activity_sidebar.html' %}{% endif %}
 </body>
-</html>
\ No newline at end of file
+</html>