:root { --accent: #bdfd00; --accent-dark: #9dd400; --accent-darker: #7db000; --accent-alpha-05: rgba(189, 253, 0, 0.05); --accent-alpha-08: rgba(189, 253, 0, 0.08); --accent-alpha-10: rgba(189, 253, 0, 0.1); --accent-alpha-12: rgba(189, 253, 0, 0.12); --accent-alpha-15: rgba(189, 253, 0, 0.15); --accent-alpha-20: rgba(189, 253, 0, 0.2); --accent-alpha-30: rgba(189, 253, 0, 0.3); --accent-alpha-50: rgba(189, 253, 0, 0.5); --bg-primary: #0a0f1a; --bg-secondary: #111827; --bg-card: #1a2332; --bg-card-hover: #1f2937; --bg-primary-alpha-70: rgba(10, 15, 26, 0.7); --bg-primary-alpha-90: rgba(10, 15, 26, 0.9); --bg-black-alpha-10: rgba(0, 0, 0, 0.1); --bg-black-alpha-20: rgba(0, 0, 0, 0.2); --bg-black-alpha-50: rgba(0, 0, 0, 0.5); --bg-black-alpha-80: rgba(0, 0, 0, 0.8); --bg-black-alpha-90: rgba(0, 0, 0, 0.9); --text-primary: #f0f4f8; --text-secondary: #d1d5db; --text-dim: #d1d5db; --text-on-accent: var(--bg-primary); --border: #2d3748; --shadow: rgba(189, 253, 0, 0.15); --success: #10b981; --success-dark: #0a7350; --warning: #f59e0b; --warning-dark: #ac6f07; --error: #ef4444; --error-dark: #d41212; --success-alpha-10: rgba(16, 185, 129, 0.1); --success-alpha-30: rgba(16, 185, 129, 0.3); --warning-alpha-10: rgba(245, 158, 11, 0.1); --warning-alpha-30: rgba(245, 158, 11, 0.3); --error-alpha-10: rgba(239, 68, 68, 0.1); --error-alpha-30: rgba(239, 68, 68, 0.3); --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; --font-display: 'Inter', sans-serif; --font-2xs: 0.563rem; --font-xs: 0.75rem; --font-sm: 0.875rem; --font-base: 1rem; --font-lg: 1.125rem; --font-xl: 1.25rem; --font-2xl: 1.5rem; --font-3xl: 2rem; --font-4xl: 2.5rem; --font-5xl: 3rem; --leading-tight: 1.2; --leading-normal: 1.6; --leading-relaxed: 1.8; --spacing-4xs: 0.2rem; --spacing-3xs: 0.375rem; --spacing-2xs: 0.5rem; --spacing-xs: 0.75rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --spacing-2xl: 4rem; --spacing-3xl: 6rem; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; --transition-fast: 0.2s ease; --transition-base: 0.3s ease; --transition-slow: 0.4s ease; --transition-transform: transform var(--transition-base); --transition-opacity: opacity var(--transition-base); --transition-colors: color var(--transition-base), background-color var(--transition-base), border-color var(--transition-base); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.2); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3); --shadow-accent: 0 10px 30px var(--shadow); --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1); --z-base: 1; --z-dropdown: 10; --z-sticky: 100; --z-overlay: 1000; --z-modal: 1100; --z-tooltip: 1200; --breakpoint-xs: 480px; --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; --animation-duration-fast: 0.2s; --animation-duration-base: 0.3s; --animation-duration-slow: 0.6s; --container-max-width: 1400px; --container-padding: var(--spacing-lg); --gap-xs: var(--spacing-2xs); --gap-sm: 1rem; --gap-md: 1.5rem; --gap-lg: 2rem; --gap-xl: 3rem; --snowflake-max-size: -10px; --leaf-max-size: -30px;}[data-theme="light"] { --accent: #a8e000; --accent-dark: #8bc000; --accent-darker: #6fa000; --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-card: #ffffff; --bg-card-hover: #f1f5f9; --text-primary: #0f172a; --text-secondary: #475569; --text-dim: #64748b; --border: #e2e8f0; --shadow: rgba(168, 224, 0, 0.15); --success: #059669; --warning: #d97706; --error: #dc2626; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12); --shadow-accent: 0 10px 30px var(--shadow);}@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --accent: #a8e000; --accent-dark: #8bc000; --accent-darker: #6fa000; --bg-primary: #ffffff; --bg-secondary: #f8fafc; --bg-card: #ffffff; --bg-card-hover: #f1f5f9; --text-primary: #0f172a; --text-secondary: #475569; --text-dim: #64748b; --border: #e2e8f0; --shadow: rgba(168, 224, 0, 0.15); --success: #059669; --warning: #d97706; --error: #dc2626; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08); --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.12); --shadow-accent: 0 10px 30px var(--shadow); }}* { margin: 0; padding: 0; box-sizing: border-box;}body { font-family: var(--font-primary); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; overflow-x: hidden;}body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 20% 30%, rgba(189, 253, 0, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(189, 253, 0, 0.02) 0%, transparent 50%); pointer-events: none; z-index: 0;}.grain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.03; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); z-index: var(--z-base);}h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.2;}a { color: inherit; text-decoration: none;}ul, ol { list-style: none;}img { max-width: 100%; display: block;}::-webkit-scrollbar { width: 10px; height: 10px;}::-webkit-scrollbar-track { background: var(--bg-primary);}::-webkit-scrollbar-thumb { background: var(--accent-darker); border-radius: 5px;}::-webkit-scrollbar-thumb:hover { background: var(--accent);}::selection { background: var(--accent); color: var(--bg-primary);}::-moz-selection { background: var(--accent); color: var(--bg-primary);}:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px;}:target { scroll-margin-top: 30px;}[id] { scroll-margin-top: 30px;}section[id],div[id],h1[id],h2[id],h3[id] { scroll-margin-top: 30px;}.btn { padding: 1rem; border: none; border-radius: var(--radius-md); cursor: pointer; font-weight: 700; font-size: var(--font-base); text-transform: uppercase; letter-spacing: 0.05em; transition: all var(--transition-base); font-family: 'Orbitron', sans-serif;}.btn--primary { background: var(--accent); color: var(--bg-primary);}.btn--primary:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: var(--shadow-accent);}.btn--primary:active { transform: translateY(0);}.btn--outline { background: transparent; border: 2px solid var(--accent); color: var(--accent);}.btn--outline:hover { background: var(--accent); color: var(--bg-primary);}.btn--secondary { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);}.btn--secondary:hover { border-color: var(--accent); color: var(--accent);}.btn--danger { background: var(--error); color: white; border: none; padding: var(--spacing-sm) var(--spacing-lg); border-radius: var(--radius-md); cursor: pointer; font-weight: 600; transition: var(--transition-base);}.btn--danger:hover { background: #dc2626; transform: translateY(-2px); box-shadow: 0 4px 12px var(--error-alpha-03);}.btn--remove { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.9rem; padding: var(--spacing-4xs) var(--spacing-3xs); border-radius: 2px; line-height: 1; transition: color 0.15s; opacity: 0;}.btn--remove:hover { color: var(--error);}tr:hover .btn--remove { opacity: 1;}.btn:disabled { opacity: 0.3; cursor: not-allowed;}.btn--secondary:hover:disabled { border: 1px solid var(--border); color: var(--text-primary);}.btn--full { width: 100%;}.btn--lg { padding: 1rem 2rem; font-size: 1rem;}.btn--sm { padding: var(--spacing-2xs) 1rem; font-size: 0.85rem; text-transform: capitalize;}.btn--sm:hover { transform: scale(1.05);}.action-icon-btns { display: flex; gap: 5px;}.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--spacing-lg); transition: all var(--transition-slow);}.card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 20px 60px var(--accent-alpha-20);}.card-header { margin-bottom: var(--spacing-md);}.card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--spacing-2xs);}.card-body { color: var(--text-secondary); line-height: 1.7;}.form-group { margin-bottom: var(--spacing-md);}.form-group label,.form-label { display: block; margin-bottom: var(--spacing-2xs); font-weight: 600; color: var(--text-secondary); font-size: 0.9rem;}.form-group .required { color: var(--error);}.form-input { width: 100%; padding: 0.8rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--font-base); font-family: var(--font-primary); transition: all var(--transition-base);}.form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-alpha-10);}.form-input::placeholder { color: var(--text-dim);}textarea.form-input { min-height: 120px; resize: vertical;}.form-input--sm { width: 62px; padding: var(--spacing-2xs);}.toggle-group { display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); background: var(--bg-secondary); border-radius: var(--radius-md); margin-bottom: var(--spacing-md);}.toggle-label { display: flex; flex-direction: column; gap: 0.3rem;}.toggle-label-title { font-weight: 600; color: var(--text-primary);}.toggle-label-description { font-size: 0.85rem; color: var(--text-dim);}.toggle-switch { position: relative; width: 52px; height: 28px;}.toggle-switch input { opacity: 0; width: 0; height: 0;}.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: var(--border); transition: 0.3s; border-radius: 34px;}.toggle-slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background: white; transition: 0.3s; border-radius: 50%;}.toggle-switch input:checked + .toggle-slider { background: var(--accent);}.toggle-switch input:checked + .toggle-slider::before { transform: translateX(24px);}.radio-group { display: flex; flex-direction: column; gap: var(--spacing-sm);}.radio-option { display: flex; align-items: center; padding: var(--spacing-md); background: var(--bg-secondary); border: 2px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-base);}.radio-option input[type="radio"] { margin-right: var(--spacing-md); width: 20px; height: 20px; cursor: pointer;}.radio-option:hover,.radio-option.active { border-color: var(--accent); background: rgba(189, 253, 0, 0.05);}.radio-option input[type="radio"]:checked ~ .radio-option-content { color: var(--accent);}.radio-option-title { font-weight: 600; color: var(--text-primary); margin-bottom: var(--spacing-4xs);}.radio-option-description { font-size: 0.85rem; color: var(--text-dim);}.tag { padding: 0.3rem var(--spacing-xs); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--spacing-xs); color: var(--text-secondary); transition: all var(--transition-base); cursor: pointer; display: inline-block;}.tag:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px);}.badge { display: inline-flex; align-items: center; padding: 0.3rem var(--spacing-xs); background: var(--accent-alpha-10); border: 1px solid var(--accent-alpha-30); border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 700; color: var(--accent);}.badge-count { background: var(--bg-primary); padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 700; color: var(--text-dim);}.avatar { width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--bg-primary);}.avatar--lg { width: 80px; height: 80px; font-size: var(--font-3xl); }.avatar--md { width: 50px; height: 50px; font-size: 1.1rem; }.avatar--sm { width: 35px; height: 35px; font-size: 0.9rem; }.avatar--xs { width: 24px; height: 24px; font-size: 0.7rem; }.divider { display: flex; align-items: center; text-align: center; margin: var(--spacing-lg) 0; color: var(--text-dim); font-size: 0.9rem;}.divider::before,.divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border);}.divider span { padding: 0 var(--spacing-sm);}.section-header { display: flex; justify-content: space-between; align-items: center; margin: var(--spacing-2xl) 0 var(--spacing-lg); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--border);}.section-title { font-family: var(--font-display); font-size: var(--font-4xl); font-weight: 700; letter-spacing: -0.02em;}.accent-line { color: var(--accent);}.breadcrumb { display: flex; gap: var(--spacing-2xs); margin-bottom: var(--spacing-lg); font-size: 0.9rem; color: var(--text-dim); flex-wrap: wrap;}.breadcrumb a { color: var(--text-secondary); transition: color var(--transition-base);}.breadcrumb a:hover { color: var(--accent);}.pagination { display: flex; justify-content: center; align-items: center; gap: var(--spacing-2xs); margin: var(--spacing-2xl) 0;}.pagination-btn { padding: 0.8rem 1.2rem; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius-md); cursor: pointer; font-weight: 600; transition: all var(--transition-base); min-width: 45px; text-align: center;}.pagination-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); transform: translateY(-2px);}.pagination-btn.active { background: var(--accent); color: var(--bg-primary); border-color: var(--accent);}.pagination-btn:disabled { opacity: 0.3; cursor: not-allowed;}.search-container { position: relative;}.search-input { width: 100%; padding: 1rem 3rem 1rem 1.5rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); color: var(--text-primary); font-size: var(--font-base); transition: all var(--transition-base);}.search-input:focus { border-color: var(--accent); box-shadow: 0 0 20px var(--shadow);}.search-icon { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); font-size: 1.3rem; color: var(--text-dim); pointer-events: none;}.help-toggle { margin-left: var(--spacing-sm);}.formatting-help { margin-top: 15px; padding: 15px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; display: none;}.formatting-help.active { display: block;}.help-section { margin-bottom: 20px;}.help-section:last-child { margin-bottom: 0;}.help-section h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: var(--spacing-md); color: var(--accent); padding-bottom: 5px; border-bottom: 2px solid var(--border);}.help-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 15px; align-items: center;}.code-example { font-family: 'Courier New', monospace; background: var(--bg-secondary); padding: 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 13px; white-space: nowrap; color: var(--text-primary);}.result-example { font-size: 14px;}.smiley { font-size: 20px;}.divider { grid-column: 1 / -1; height: 1px; background: #e0e0e0; margin: 5px 0;}.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin: 2rem 0;}.stat-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: var(--transition-base);}.stat-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 30px var(--shadow);}.stat-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;}.stat-icon { font-size: var(--font-3xl);}.stat-label { color: var(--text-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;}.stat-value { font-family: 'Orbitron', sans-serif; font-size: var(--font-4xl); font-weight: 700; color: var(--accent); line-height: 1; margin-top: var(--spacing-2xs);}.stat-change { display: flex; align-items: center; gap: 0.3rem; margin-top: var(--spacing-2xs); font-size: 0.85rem;}.stat-change.positive { color: var(--success);}.stat-change.negative { color: var(--error);}.chat-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin: 2rem 0; height: 600px; display: flex; flex-direction: column;}.chat-messages { flex: 1; padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem;}.chat-message { display: flex; gap: 1rem; align-items: flex-start;}.chat-message.own { flex-direction: row-reverse;}.chat-avatar { width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--bg-primary); flex-shrink: 0;}.chat-content { flex: 1; max-width: 70%;}.chat-author { font-weight: 600; margin-bottom: 0.3rem; font-size: 0.9rem;}.chat-text { background: var(--bg-secondary); padding: 0.8rem 1rem; border-radius: 12px; line-height: 1.5;}.chat-message.own .chat-text { background: var(--accent-alpha-15); border: 1px solid var(--accent-alpha-30);}.chat-time { font-size: var(--font-xs); color: var(--text-dim); margin-top: 0.3rem;}.chat-input-container { padding: 1.5rem; border-top: 1px solid var(--border); background: var(--bg-secondary); display: flex; gap: 1rem;}.chat-input { flex: 1; padding: 0.8rem 1rem; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 8px; color: var(--text-primary); font-size: 0.95rem;}.chat-input:focus { outline: none; border-color: var(--accent);}.chat-send-btn { padding: 0.8rem 2rem; background: var(--accent); color: var(--bg-primary); border: none; border-radius: 8px; cursor: pointer; font-weight: 700; transition: var(--transition-base);}.chat-send-btn:hover { background: var(--accent-dark); transform: scale(1.05);}.rules-container h3 { font-family: 'Orbitron', sans-serif; font-size: var(--font-2xl); color: var(--accent); margin-bottom: 1.5rem;}.rule-item { padding: 1rem 0; border-bottom: 1px solid var(--border);}.rule-item:last-child { border-bottom: none;}.rule-item h4 { color: var(--text-primary); margin-bottom: var(--spacing-2xs);}.rule-item p { color: var(--text-secondary); line-height: 1.7;}img[src*="smilies"] { display: inline; margin: 0 0.1em;}.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: var(--spacing-xl); margin: var(--spacing-xl) 0;}.chart-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--spacing-xl); transition: all var(--transition-base);}.chart-container:hover { border-color: var(--accent); box-shadow: var(--shadow-lg);}.chart-container canvas { width: 100% !important; height: 100% !important;}.chart-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); margin-bottom: var(--spacing-md); font-weight: 700;}.chart-grid-2 { grid-template-columns: repeat(2, 1fr);}.chart-grid-3 { grid-template-columns: repeat(3, 1fr);}.chart-grid-full { grid-template-columns: 1fr;}.chart-container-sm { height: 300px; padding: var(--spacing-md);}.chart-container-lg { height: 500px;}.chart-loading { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-dim); font-size: 1.1rem;}.chart-loading::after { content: '...'; animation: loadingDots 1.5s infinite;}@keyframes loadingDots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60%, 100% { content: '...'; }}.chart-error { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--error); text-align: center; gap: var(--spacing-sm);}.chart-error-icon { font-size: 3rem;}@media (max-width: 1024px) { .chart-grid { grid-template-columns: 1fr; } .chart-grid-2, .chart-grid-3 { grid-template-columns: 1fr; }}@media (max-width: 768px) { .chart-container { height: 500px; padding: var(--spacing-md); } .chart-container-lg { height: 350px; } .chart-grid { gap: var(--spacing-md); } .chart-grid-full .chart-container { height: auto; }}header { padding: 2rem 0; border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); position: relative; top: 0; z-index: var(--z-sticky); background: var(--bg-primary-alpha-90); animation: slideDown 0.6s ease-out;}.header-content { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-lg);}.logo { font-family: var(--font-display); font-size: 1.8rem; font-weight: 900; letter-spacing: -0.02em; background: linear-gradient(135deg, var(--accent) 0%, #7db000 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-transform: uppercase; position: relative;}.logo::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 40px; height: 3px; background: var(--accent); box-shadow: 0 0 10px var(--accent);}nav { display: flex; gap: 2.5rem; align-items: center;}nav a { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.95rem; letter-spacing: 0.03em; transition: all var(--transition-base); position: relative; padding: var(--spacing-2xs) 0;}nav a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--accent); transition: all var(--transition-base); transform: translateX(-50%);}nav a:hover,nav a.active { color: var(--accent);}nav a:hover::after,nav a.active::after { width: 100%;}.nav-tabs { display: flex; gap: var(--spacing-2xs); padding: 2rem 0 1rem; overflow-x: auto; border-bottom: 2px solid var(--border);}.nav-tab { padding: 0.8rem 1.5rem; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-weight: 600; font-size: 0.95rem; transition: var(--transition-base); border-radius: 8px 8px 0 0; white-space: nowrap; position: relative;}.nav-tab::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform 0.3s ease;}.nav-tab:hover { color: var(--accent); background: var(--accent-alpha-05);}.nav-tab.active { color: var(--accent); background: var(--accent-alpha-08);}.nav-tab.active::after { transform: scaleX(1);}.tab-content { display: none; animation: fadeIn 0.4s ease;}.tab-content.active { display: block; margin: 2rem auto;}.sub-nav { background: var(--bg-card); border-bottom: 2px solid var(--border); padding: 0; margin-top: -1px; position: relative; top: auto; z-index: 90; backdrop-filter: blur(10px);}.sub-nav-container { max-width: 1600px; margin: 0 auto; padding: 0 2rem; display: flex; gap: 0; overflow-x: auto; scrollbar-width: thin;}.sub-nav-container::-webkit-scrollbar { height: 4px;}.sub-nav-container::-webkit-scrollbar-track { background: var(--bg-secondary);}.sub-nav-container::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 4px;}.sub-nav-link { display: flex; align-items: center; gap: var(--spacing-2xs); padding: 1rem 1.5rem; color: var(--text-secondary); text-decoration: none; font-weight: 600; font-size: 0.95rem; border-bottom: 3px solid transparent; transition: all 0.3s ease; white-space: nowrap;}.sub-nav-link:hover { color: var(--accent); background: rgba(189, 253, 0, 0.05);}.sub-nav-link.active { color: var(--accent); border-bottom-color: var(--accent);}.login-btn { padding: 0.7rem 1.8rem; background: transparent; border: 2px solid var(--accent); color: var(--accent); border-radius: var(--radius-md); cursor: pointer; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.05em; transition: all var(--transition-base); text-transform: uppercase; font-family: var(--font-display);}.login-btn:hover { background: var(--accent); color: var(--bg-primary); box-shadow: 0 0 20px var(--shadow); transform: translateY(-2px);}.user-section { display: flex; align-items: center; gap: var(--spacing-md);}.notifications { position: relative; cursor: pointer; font-size: 1.3rem; padding: var(--spacing-2xs); transition: all var(--transition-base);}.notifications:hover { color: var(--accent); transform: scale(1.1);}.notification-badge { position: absolute; top: 0; right: 0; background: var(--error); color: white; font-size: 0.7rem; padding: var(--spacing-4xs) var(--spacing-3xs); border-radius: 10px; font-weight: 700;}.user-info { display: flex; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-2xs) 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);}.logout-btn { padding: var(--spacing-2xs) 1rem; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition-base);}.logout-btn:hover { border-color: var(--error); color: var(--error);}@media (max-width: 768px) { .header-content { flex-direction: column; align-items: flex-start; } nav { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); width: 100%; }}@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); }}@keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); }}@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; }}@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); }}@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); }}@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); }}@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); }}@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; }}@keyframes glow { 0%, 100% { box-shadow: 0 0 10px var(--accent); } 50% { box-shadow: 0 0 20px var(--accent), 0 0 30px var(--accent); }}.animate-fade-in { animation: fadeIn 0.5s ease;}.animate-fade-in-up { animation: fadeInUp 0.6s ease;}.animate-fade-in-down { animation: fadeInDown 0.6s ease;}.animate-slide-up { animation: slideUp 0.4s ease;}.animate-scale-in { animation: scaleIn 0.3s ease;}.animate-pulse { animation: pulse 2s ease-in-out infinite;}.animate-bounce { animation: bounce 1s ease-in-out infinite;}.animate-rotate { animation: rotate 1s linear infinite;}.animate-shimmer { background: linear-gradient( 90deg, var(--bg-card) 0%, var(--bg-card-hover) 50%, var(--bg-card) 100% ); background-size: 1000px 100%; animation: shimmer 2s infinite;}.delay-1 { animation-delay: 0.1s; }.delay-2 { animation-delay: 0.2s; }.delay-3 { animation-delay: 0.3s; }.delay-4 { animation-delay: 0.4s; }.delay-5 { animation-delay: 0.5s; }.hover-lift { transition: transform var(--transition-base);}.hover-lift:hover { transform: translateY(-5px);}.hover-glow { transition: box-shadow var(--transition-base);}.hover-glow:hover { box-shadow: 0 0 20px var(--accent);}.hover-scale { transition: transform var(--transition-base);}.hover-scale:hover { transform: scale(1.05);}.hover-rotate { transition: transform var(--transition-base);}.hover-rotate:hover { transform: rotate(5deg);}.transition-fast { transition: all var(--transition-fast);}.transition-base { transition: all var(--transition-base);}.transition-slow { transition: all var(--transition-slow);}.loading { position: relative; pointer-events: none; opacity: 0.6;}.loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 2px solid var(--accent); border-radius: 50%; border-top-color: transparent; animation: rotate 0.8s linear infinite;}.skeleton { background: linear-gradient( 90deg, var(--bg-card) 0%, var(--bg-card-hover) 50%, var(--bg-card) 100% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-md);}.skeleton-text { height: 1em; margin-bottom: 0.5em;}.skeleton-title { height: 2em; width: 70%; margin-bottom: 1em;}.skeleton-avatar { width: 50px; height: 50px; border-radius: 50%;}.page-enter { animation: fadeInUp 0.6s ease;}.page-exit { animation: fadeIn 0.3s ease reverse;}html { scroll-behavior: smooth;}@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; }}.particle { position: absolute; pointer-events: none; z-index: 101;}.particle--snowflake { top: var(--snowflake-max-size);}.particle--leaf { top: var(--leaf-max-size);}.container { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); position: relative; z-index: 2;}.grid { display: grid; gap: var(--spacing-lg);}.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-fit { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}.grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));}.flex { display: flex;}.flex-center { display: flex; align-items: center; justify-content: center;}.flex-between { display: flex; align-items: center; justify-content: space-between;}.flex-column { display: flex; flex-direction: column;}.flex-wrap { flex-wrap: wrap;}.gap-sm { gap: var(--spacing-sm);}.gap-md { gap: var(--spacing-md);}.gap-lg { gap: var(--spacing-lg);}.mt-1 { margin-top: var(--spacing-sm); }.mt-2 { margin-top: var(--spacing-md); }.mt-3 { margin-top: var(--spacing-lg); }.mt-4 { margin-top: var(--spacing-xl); }.mb-1 { margin-bottom: var(--spacing-sm); }.mb-2 { margin-bottom: var(--spacing-md); }.mb-3 { margin-bottom: var(--spacing-lg); }.mb-4 { margin-bottom: var(--spacing-xl); }.p-1 { padding: var(--spacing-sm); }.p-2 { padding: var(--spacing-md); }.p-3 { padding: var(--spacing-lg); }.p-4 { padding: var(--spacing-xl); }@media (max-width: 1024px) { .container { padding: 0 var(--spacing-md); } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }}@media (max-width: 768px) { .container { padding: 0 var(--spacing-sm); }}.burger-menu { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 24px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 110; position: relative;}.burger-menu span { width: 100%; height: 3px; background: var(--accent); border-radius: 2px; transition: var(--transition-base);}.burger-menu:hover span { background: var(--accent-dark);}.burger-menu.active span:nth-child(1) { transform: rotate(45deg) translateY(10px);}.burger-menu.active span:nth-child(2) { opacity: 0; transform: translateX(-20px);}.burger-menu.active span:nth-child(3) { transform: rotate(-45deg) translateY(-10px);}.nav-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px); z-index: 99; opacity: 0; transition: opacity 0.3s ease;}.nav-overlay.active { display: block; opacity: 1;}.sub-nav-toggle { display: none; align-items: center; justify-content: space-between; padding: 1rem 2rem; background: var(--bg-card); border: none; color: var(--text-primary); font-weight: 600; font-size: 1rem; cursor: pointer; width: 100%; text-align: left;}.sub-nav-toggle-icon { font-size: 1.2rem; transition: transform 0.3s ease;}.sub-nav-toggle.active .sub-nav-toggle-icon { transform: rotate(180deg);}@media (max-width: 768px) { .burger-menu { display: flex; } nav { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: var(--bg-secondary); border-left: 1px solid var(--border); flex-direction: column; align-items: stretch; gap: 0; padding: 7rem 0 2rem; z-index: 100; transition: right 0.3s ease; overflow-y: auto; } nav#mainNav { display: none; } nav#mainNav.active { display: flex; } nav.active { right: 0; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5); } nav a { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); font-size: var(--font-base); } nav a::after { display: none; } nav a:hover, nav a.active { background: var(--accent-alpha-10); } nav .login-btn { margin: 1.5rem 1.5rem; width: calc(100% - 3rem); } header nav .user-section { flex-direction: column; padding: 1.5rem; gap: 1rem; border-top: 1px solid var(--border); margin-top: auto; } .header-content { flex-direction: row; justify-content: space-between; align-items: center; } .user-section .user-info span { display: none; } .user-section { gap: var(--spacing-2xs); } .sub-nav { top: auto; position: relative; left: 0; width: auto; height: auto; } .sub-nav-toggle { display: flex; } .sub-nav-container { display: none; flex-direction: column; padding: 0; overflow-x: visible; max-height: 0; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; } .sub-nav-container.active { display: flex; max-height: 500px; opacity: 1; } .sub-nav-link { padding: 1rem 2rem; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; } .sub-nav-link.active { border-bottom-color: var(--border); border-left-color: var(--accent); background: rgba(189, 253, 0, 0.05); } .sub-nav-link:last-child { border-bottom: none; }}body.menu-open { overflow: hidden;}footer { border-top: 1px solid var(--border); padding: var(--spacing-xl) 0; margin-top: 6rem; background: var(--bg-secondary);}.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-xl);}.footer-section h4 { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: var(--spacing-sm); color: var(--accent);}.footer-section ul { list-style: none;}.footer-section li { margin-bottom: 0.6rem;}.footer-section a { color: var(--text-secondary); text-decoration: none; transition: color var(--transition-base);}.footer-section a:hover { color: var(--accent);}.footer-bottom { text-align: center; margin-top: var(--spacing-xl); padding-top: var(--spacing-lg); border-top: 1px solid var(--border); color: var(--text-dim); font-size: 0.9rem;}.container-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: var(--spacing-lg); margin: var(--spacing-lg) 0;}.accent-text { color: var(--accent); text-shadow: 0 0 30px var(--shadow);}.hero { padding: 6rem 0; text-align: center; position: relative; animation: fadeInUp 0.8s ease-out 0.2s both;}.hero h1 { font-family: var(--font-display); font-size: 4.5rem; font-weight: 900; line-height: 1.1; margin-bottom: var(--spacing-md); letter-spacing: -0.03em;}.hero p { font-size: 1.3rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto var(--spacing-xl); font-weight: 300;}.modules-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: var(--spacing-lg); margin: var(--spacing-2xl) 0;}.module { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem; transition: all var(--transition-slow); position: relative; overflow: hidden; cursor: pointer; animation: fadeInUp 0.6s ease-out both;}.module:nth-child(1) { animation-delay: 0.1s; }.module:nth-child(2) { animation-delay: 0.2s; }.module:nth-child(3) { animation-delay: 0.3s; }.module:nth-child(4) { animation-delay: 0.4s; }.module::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent) 0%, transparent 100%); opacity: 0; transition: opacity var(--transition-slow); pointer-events: none;}.module:hover { transform: translateY(-8px); border-color: var(--accent); box-shadow: 0 20px 60px var(--accent-alpha-20); background: var(--bg-card-hover);}.module:hover::before { opacity: 0.03;}.module-icon { width: 60px; height: 60px; background: var(--accent-alpha-10); border: 2px solid var(--accent); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-md); font-size: 1.8rem; transition: all var(--transition-slow);}.module:hover .module-icon { background: var(--accent); transform: rotate(5deg) scale(1.1); box-shadow: var(--shadow-accent);}.module h3 { font-family: var(--font-display); font-size: var(--font-2xl); font-weight: 700; margin-bottom: var(--spacing-sm); letter-spacing: -0.01em;}.module p { color: var(--text-secondary); margin-bottom: var(--spacing-md); line-height: 1.7;}.module-link { display: inline-flex; align-items: center; gap: var(--spacing-2xs); color: var(--accent); font-weight: 600; text-decoration: none; font-size: 0.9rem; letter-spacing: 0.05em; text-transform: uppercase; transition: all var(--transition-base);}.module-link:hover { gap: 1rem;}.page-header { padding: 4rem 0 3rem; text-align: center; animation: fadeInUp 0.8s ease-out;}.page-header h1 { font-family: var(--font-display); font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin-bottom: var(--spacing-sm); letter-spacing: -0.03em; color: var(--accent);}.page-header p { font-size: 1.2rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto;}.section-header { display: flex; justify-content: space-between; align-items: center; margin: 5rem 0 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border);}.section-header h2 { font-family: 'Orbitron', sans-serif; font-size: var(--font-4xl); font-weight: 700; letter-spacing: -0.02em;}.section-header .accent-line { color: var(--accent);}.view-all-btn { padding: 0.6rem 1.5rem; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: 8px; cursor: pointer; font-weight: 500; transition: var(--transition-base); text-decoration: none; display: inline-block;}.view-all-btn:hover { border-color: var(--accent); color: var(--accent); transform: translateX(5px);}.blog-preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; margin-top: 2rem;}.blog-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; transition: var(--transition-slow); cursor: pointer;}.blog-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 15px 40px var(--accent-alpha-15);}.blog-image { width: 100%; height: 200px; background: linear-gradient(135deg, #1a2332 0%, #0a0f1a 100%); position: relative; overflow: hidden;}.blog-image::after { content: '📝'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; opacity: 0.2;}.blog-content { padding: 1.5rem;}.blog-meta { display: flex; gap: 1rem; margin-bottom: 1rem; font-size: 0.85rem; color: var(--text-dim);}.blog-category { color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;}.blog-card h3 { font-size: 1.3rem; margin-bottom: var(--spacing-xs); font-weight: 600;}.blog-card p { color: var(--text-secondary); line-height: 1.6; font-size: 0.95rem;}.protected-section { background: var(--bg-secondary); border: 2px solid var(--accent); border-radius: var(--radius-xl); padding: var(--spacing-xl); margin: var(--spacing-2xl) 0; text-align: center; position: relative; overflow: hidden;}.protected-section::before { content: '🔒'; position: absolute; top: -20px; right: -20px; font-size: 10rem; opacity: 0.03; transform: rotate(-15deg);}.protected-section h2 { font-family: var(--font-display); font-size: var(--font-3xl); margin-bottom: var(--spacing-sm); color: var(--accent);}.protected-section p { color: var(--text-secondary); margin-bottom: var(--spacing-lg); max-width: 600px; margin-left: auto; margin-right: auto;}.protected-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-lg);}.protected-feature { padding: var(--spacing-sm); background: var(--accent-alpha-05); border: 1px solid var(--accent-alpha-20); border-radius: var(--radius-md); font-size: 0.9rem; color: var(--text-secondary);}.table-container { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin: var(--spacing-lg) 0;}.table-header { padding: var(--spacing-md); background: var(--bg-secondary); border-bottom: 1px solid var(--border);}.table-header h3 { font-family: var(--font-display); font-size: 1.3rem; color: var(--accent);}table { width: 100%; border-collapse: collapse;}th, td { padding: var(--spacing-sm) var(--spacing-md); text-align: left;}th { background: var(--bg-secondary); color: var(--text-dim); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;}tr { border-bottom: 1px solid var(--border); transition: background var(--transition-base);}.sticky-col { position: sticky; left: 0; z-index: 5; min-width: 30px;}.sticky-row { position: sticky; top: 0; z-index: 6;}th.sticky-col { background: var(--bg-secondary);}tbody tr.sticky-row,tbody td.sticky-col { background: var(--bg-card);}tbody tr:hover,tbody tr:hover .sticky-col,tbody tr:hover .sticky-row { background: var(--bg-card-hover);}.rank { font-weight: 700; color: var(--text-dim); width: 50px;}.rank-1 { color: #ffd700; }.rank-2 { color: #c0c0c0; }.rank-3 { color: #cd7f32; }.rank-number { display: inline-block; width: 24px; height: 24px; background: var(--bg-secondary); border-radius: 50%; text-align: center; line-height: 24px; font-size: 0.85rem; font-weight: 700;}.points { font-family: var(--font-display); font-weight: 700; color: var(--accent); font-size: 1.1rem;}.hidden { display: none;}@media (max-width: 768px) { .hero h1 { font-size: var(--font-4xl); } .modules-grid { grid-template-columns: 1fr; } .protected-features { grid-template-columns: 1fr; } .table-container { max-height: 525px; overflow:auto; } th, td { padding: var(--spacing-2xs) var(--spacing-sm); } .view-all-btn .text { display: none; }}.message-box { padding: 1rem 1.5rem; border-radius: var(--radius-md); margin-bottom: var(--spacing-md); display: flex; align-items: flex-start; gap: var(--spacing-sm); border-left: 4px solid; animation: slideInRight 0.4s ease-out; position: relative;}@keyframes slideInRight { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); }}.message-box-icon { font-size: var(--font-2xl); flex-shrink: 0; line-height: 1;}.message-box-content { flex: 1;}.message-box-title { font-weight: 700; font-size: var(--font-base); margin-bottom: 0.3rem; font-family: var(--font-display);}.message-box-text { font-size: 0.95rem; line-height: 1.6;}.message-box-close { background: none; border: none; cursor: pointer; font-size: 1.3rem; line-height: 1; padding: 0; opacity: 0.6; transition: opacity var(--transition-base); color: var(--text-primary);}.message-box-close:hover { opacity: 1;}.message-box-success { background: var(--success-alpha-10); border-color: var(--success); color: var(--text-primary);}.message-box-success .message-box-icon { color: var(--success);}.message-box-success .message-box-title { color: var(--success);}.message-box-error { background: var(--error-alpha-10); border-color: var(--error); color: var(--text-primary);}.message-box-error .message-box-icon { color: var(--error);}.message-box-error .message-box-title { color: var(--error);}.message-box-warning { background: var(--warning-alpha-10); border-color: var(--warning); color: var(--text-primary);}.message-box-warning .message-box-icon { color: var(--warning);}.message-box-warning .message-box-title { color: var(--warning);}.message-box-info { background: var(--accent-alpha-10); border-color: var(--accent); color: var(--text-primary);}.message-box-info .message-box-icon { color: var(--accent);}.message-box-info .message-box-title { color: var(--accent);}.toast-container { position: fixed; top: 100px; right: 2rem; z-index: 1000; display: flex; flex-direction: column; gap: var(--spacing-sm); max-width: 400px;}.toast { padding: 1rem 1.5rem; border-radius: var(--radius-lg); display: flex; align-items: flex-start; gap: var(--spacing-sm); border-left: 4px solid; animation: toastSlideIn 0.4s ease-out; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); backdrop-filter: blur(10px); position: relative;}@keyframes toastSlideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); }}.toast.removing { animation: toastSlideOut 0.3s ease-out forwards;}@keyframes toastSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); }}.toast-success { background: rgba(16, 185, 129, 0.95); border-color: #059669; color: white;}.toast-error { background: rgba(239, 68, 68, 0.95); border-color: var(--error-dark); color: white;}.toast-warning { background: rgba(245, 158, 11, 0.95); border-color: #d97706; color: white;}.toast-info { background: rgba(189, 253, 0, 0.95); border-color: #9dd400; color: var(--bg-primary);}.toast .message-box-close { color: inherit;}.toast-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: rgba(255, 255, 255, 0.3); animation: progress 3s linear;}@keyframes progress { from { width: 100%; } to { width: 0%; }}.validation-message { font-size: 0.85rem; margin-top: 0.3rem; display: flex; align-items: center; gap: 0.3rem;}.validation-message-error { color: var(--error);}.validation-message-success { color: var(--success);}.validation-message-warning { color: var(--warning);}.form-input.error { border-color: var(--error);}.form-input.error:focus { box-shadow: 0 0 0 3px var(--error-alpha-10);}.form-input.success { border-color: var(--success);}.form-input.success:focus { box-shadow: 0 0 0 3px var(--success-alpha-10);}@media (max-width: 768px) { .toast-container { left: 1rem; right: 1rem; top: 80px; max-width: none; } .message-box, .toast { font-size: 0.9rem; }}.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--bg-black-alpha-80); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; z-index: var(--z-overlay); animation: fadeIn 0.3s ease;}.modal-overlay.active { display: flex;}.login-modal { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--spacing-xl); max-width: 450px; width: 90%; position: relative; animation: slideUp 0.4s ease; box-shadow: var(--shadow-xl);}.modal-close { position: absolute; top: var(--spacing-md); right: var(--spacing-md); background: none; border: none; color: var(--text-dim); font-size: 1.8rem; cursor: pointer; transition: all var(--transition-base); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md);}.modal-close:hover { background: var(--accent-alpha-10); color: var(--accent); transform: rotate(90deg);}.modal-header { text-align: center; margin-bottom: var(--spacing-lg);}.modal-icon { font-size: var(--font-5xl); margin-bottom: var(--spacing-sm);}.modal-header h2 { font-family: var(--font-display); font-size: var(--font-3xl); margin-bottom: var(--spacing-2xs); color: var(--accent);}.modal-header p { color: var(--text-secondary); font-size: 0.95rem;}.password-wrapper { position: relative;}.password-toggle { position: absolute; right: var(--spacing-sm); top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1.2rem; transition: color var(--transition-base);}.password-toggle:hover { color: var(--accent);}.form-options { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-md); font-size: 0.9rem;}.checkbox-wrapper { display: flex; align-items: center; gap: var(--spacing-2xs);}.checkbox-wrapper input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent);}.forgot-password { color: var(--accent); text-decoration: none; transition: color var(--transition-base);}.forgot-password:hover { color: var(--accent-dark); text-decoration: underline;}.social-login { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm); margin-bottom: var(--spacing-md);}.social-btn { padding: var(--spacing-xs); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; font-weight: 600; font-size: 0.9rem; transition: all var(--transition-base); color: var(--text-primary); display: flex; align-items: center; justify-content: center; gap: var(--spacing-2xs);}.social-btn:hover { border-color: var(--accent); background: var(--accent-alpha-05); transform: translateY(-2px);}.modal-footer { text-align: center; margin-top: var(--spacing-lg); color: var(--text-secondary); font-size: 0.9rem;}.modal-footer a { color: var(--accent); text-decoration: none; font-weight: 600; transition: color var(--transition-base);}.modal-footer a:hover { color: var(--accent-dark); text-decoration: underline;}.register-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--spacing-2xl) var(--spacing-lg);}.register-container { max-width: 600px; width: 100%; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: var(--spacing-xl); animation: fadeInUp 0.6s ease;}.register-header { text-align: center; margin-bottom: var(--spacing-xl);}.register-header h1 { font-family: var(--font-display); font-size: var(--font-4xl); margin-bottom: var(--spacing-2xs); color: var(--accent);}.register-header p { color: var(--text-secondary);}.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-sm);}.strength-meter { margin-top: var(--spacing-2xs); height: 4px; background: var(--bg-secondary); border-radius: 2px; overflow: hidden;}.strength-bar { height: 100%; width: 0%; transition: all var(--transition-base); background: var(--error);}.strength-bar.weak { width: 33%; background: var(--error);}.strength-bar.medium { width: 66%; background: var(--warning);}.strength-bar.strong { width: 100%; background: var(--success);}.strength-text { font-size: var(--spacing-xs); margin-top: 0.3rem; color: var(--text-dim);}.terms-checkbox { margin: var(--spacing-md) 0; padding: var(--spacing-sm); background: var(--accent-alpha-05); border: 1px solid var(--accent-alpha-20); border-radius: var(--radius-md);}.terms-checkbox label { display: flex; align-items: flex-start; gap: var(--spacing-xs); font-size: 0.9rem; color: var(--text-secondary); cursor: pointer;}.terms-checkbox input[type="checkbox"] { margin-top: var(--spacing-4xs); cursor: pointer; accent-color: var(--accent);}.terms-checkbox a { color: var(--accent); text-decoration: none;}.terms-checkbox a:hover { text-decoration: underline;}.back-to-login { text-align: center; margin-top: var(--spacing-lg); color: var(--text-secondary);}.back-to-login a { color: var(--accent); text-decoration: none; font-weight: 600;}.back-to-login a:hover { text-decoration: underline;}@media (max-width: 768px) { .login-modal { padding: var(--spacing-lg); } .social-login { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .register-container { padding: var(--spacing-lg); }}.blog-layout { display: grid; grid-template-columns: 1fr 350px; gap: var(--spacing-xl); margin: var(--spacing-xl) 0;}.blog-posts { display: grid; gap: var(--spacing-lg);}.post-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; transition: all var(--transition-slow); animation: fadeInUp 0.6s ease-out both;}.post-card:nth-child(1) { animation-delay: 0.1s; }.post-card:nth-child(2) { animation-delay: 0.2s; }.post-card:nth-child(3) { animation-delay: 0.3s; }.post-card:nth-child(4) { animation-delay: 0.4s; }.post-card:nth-child(5) { animation-delay: 0.5s; }.post-card:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 20px 60px var(--accent-alpha-20);}.post-image { width: 300px; height: 250px; background: linear-gradient(135deg, #1a2332 0%, #0a0f1a 100%); position: relative; overflow: hidden;}.post-image::after { content: '📝'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; opacity: 0.2;}.post-image.tech::after { content: '💻'; }.post-image.sport::after { content: '⚽'; }.post-image.lifestyle::after { content: '✨'; }.post-image.travel::after { content: '🌍'; }.post-image.food::after { content: '🍴'; }.post-content { padding: var(--spacing-lg); display: flex; flex-direction: column;}.post-meta { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-sm); font-size: 0.85rem; color: var(--text-dim); flex-wrap: wrap;}.post-category { color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.3rem var(--spacing-xs); background: var(--accent-alpha-10); border: 1px solid var(--accent-alpha-30); border-radius: var(--radius-sm);}.post-date,.post-author,.post-reading-time { display: flex; align-items: center; gap: 0.3rem;}.post-card h2 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: var(--spacing-sm); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3;}.post-excerpt { color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--spacing-md); flex: 1;}.post-tags { display: flex; gap: var(--spacing-2xs); flex-wrap: wrap; margin-bottom: var(--spacing-sm);}.read-more { display: inline-flex; align-items: center; gap: var(--spacing-2xs); color: var(--accent); font-weight: 600; text-decoration: none; font-size: 0.95rem; letter-spacing: 0.05em; text-transform: uppercase; transition: all var(--transition-base); margin-top: auto;}.read-more:hover { gap: 1rem;}.sidebar { position: sticky; top: 100px; height: fit-content;}.sidebar-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); animation: fadeInUp 0.6s ease-out 0.3s both;}.sidebar-section h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: var(--spacing-md); color: var(--accent); display: flex; align-items: center; gap: var(--spacing-2xs);}.category-list { display: flex; flex-direction: column; gap: var(--spacing-xs);}.category-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-base); text-decoration: none; color: var(--text-primary);}.category-item:hover,.category-item.active { background: var(--accent-alpha-08); border-color: var(--accent); color: var(--accent); transform: translateX(5px);}.category-count { background: var(--bg-primary); padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 700; color: var(--text-dim);}.category-item:hover .category-count,.category-item.active .category-count { background: var(--accent); color: var(--bg-primary);}.popular-post,.related-post { display: flex; gap: var(--spacing-sm); padding: var(--spacing-sm) 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: all var(--transition-base); text-decoration: none; color: var(--text-primary);}.popular-post:last-child,.related-post:last-child { border-bottom: none; padding-bottom: 0;}.popular-post:hover,.related-post:hover { transform: translateX(5px);}.popular-post-number { font-family: var(--font-display); font-size: var(--font-2xl); font-weight: 700; color: var(--accent); min-width: 30px;}.popular-post-content h4,.related-post-content h4 { font-size: 0.95rem; margin-bottom: 0.3rem; line-height: 1.4;}.popular-post-meta,.related-post-meta { font-size: var(--spacing-xs); color: var(--text-dim);}.related-post-image { width: 80px; height: 80px; background: linear-gradient(135deg, #1a2332 0%, #0a0f1a 100%); border-radius: var(--radius-md); flex-shrink: 0; position: relative; overflow: hidden;}.related-post-image::after { content: '📝'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--font-3xl); opacity: 0.3;}.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.6rem;}.newsletter-form { display: flex; flex-direction: column; gap: var(--spacing-sm);}.newsletter-input { padding: 0.8rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.95rem;}.newsletter-input:focus { outline: none; border-color: var(--accent);}.newsletter-btn { padding: var(--spacing-xs); background: var(--accent); color: var(--bg-primary); border: none; border-radius: var(--radius-md); cursor: pointer; font-weight: 700; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; transition: all var(--transition-base);}.newsletter-btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: var(--shadow-accent);}.post-title { font-weight: 600;}.post-status { display: inline-block; padding: 0.3rem var(--spacing-xs); border-radius: 12px; font-size: 0.85rem; font-weight: 600;}.post-status--published { background: var(--success-alpha-10); color: var(--success);}.post-status--draft { background: var(--warning-alpha-10); color: var(--warning);}@media (max-width: 1024px) { .blog-layout { grid-template-columns: 1fr; } .sidebar { position: static; } .post-card { grid-template-columns: 1fr; } .post-image { width: 100%; height: 250px; }}@media (max-width: 768px) { .blog-header h1 { font-size: var(--font-4xl); } .post-content { padding: var(--spacing-md); }}.article-layout { display: grid; grid-template-columns: 1fr 350px; gap: 3rem; margin: 3rem 0;}.article-main { animation: fadeInUp 0.6s ease-out;}.breadcrumb { display: flex; gap: var(--spacing-2xs); margin-bottom: 2rem; font-size: 0.9rem; color: var(--text-dim); flex-wrap: wrap;}.breadcrumb a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease;}.breadcrumb a:hover { color: var(--accent);}.article-header { margin-bottom: 3rem;}.article-category { display: inline-block; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: var(--spacing-2xs) 1rem; background: var(--accent-alpha-10); border: 1px solid var(--accent-alpha-30); border-radius: 8px; margin-bottom: 1.5rem; font-size: 0.9rem;}.article-title { font-family: 'Orbitron', sans-serif; font-size: var(--font-5xl); font-weight: 900; line-height: 1.2; margin-bottom: 1.5rem; letter-spacing: -0.02em;}.article-meta { display: flex; gap: 2rem; flex-wrap: wrap; padding: 1.5rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: 0.95rem;}.meta-item { display: flex; align-items: center; gap: var(--spacing-2xs);}.featured-image { width: 100%; height: 450px; background: linear-gradient(135deg, #1a2332 0%, #0a0f1a 100%); border-radius: 16px; margin: 2rem 0 3rem; position: relative; overflow: hidden; border: 1px solid var(--border);}.featured-image::after { content: '💻'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 8rem; opacity: 0.15;}article ul,article ol { margin: var(--spacing-md) 0 var(--spacing-md) var(--spacing-lg); padding-left: var(--spacing-lg);}article ul { list-style: none;}article ul li { position: relative; padding-left: 1.5rem; margin-bottom: var(--spacing-xs);}article ul li::before { content: '▸'; position: absolute; left: 0; color: var(--accent); font-weight: 700; font-size: 1.2rem;}article ol { list-style: none; counter-reset: list-counter;}article ol li { position: relative; padding-left: 2rem; margin-bottom: var(--spacing-xs); counter-increment: list-counter;}article ol li::before { content: counter(list-counter) "."; position: absolute; left: 0; color: var(--accent); font-weight: 700; font-family: var(--font-display);}article ul ul,article ol ol,article ul ol,article ol ul { margin: var(--spacing-2xs) 0 var(--spacing-2xs) 1.5rem;}article ul ul li::before { content: '•'; font-size: 1rem;}.article-content { font-size: 1.1rem; line-height: 1.9; color: var(--text-primary);}.article-content h2 { font-family: 'Orbitron', sans-serif; font-size: var(--font-3xl); margin: 3rem 0 1.5rem; color: var(--accent); letter-spacing: -0.01em;}.article-content h3 { font-family: 'Orbitron', sans-serif; font-size: var(--font-2xl); margin: 2.5rem 0 1rem; color: var(--text-primary);}.article-content p { margin-bottom: 1.5rem;}.article-content ul, .article-content ol { margin: 1.5rem 0 1.5rem 2rem;}.article-content li { margin-bottom: var(--spacing-xs);}.article-content blockquote { border-left: 4px solid var(--accent); padding: 1.5rem 2rem; margin: 2rem 0; background: var(--accent-alpha-05); border-radius: 8px; font-style: italic; color: var(--text-secondary);}.article-content code,.article-content .code { background: var(--bg-card); padding: var(--spacing-4xs) var(--spacing-2xs); border-radius: 4px; font-family: monospace; color: var(--accent); font-size: 0.95em;}.article-content pre { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; overflow-x: auto; margin: 2rem 0;}.article-content pre code { background: none; padding: 0;}.post-content a,.article-content a,.container-content a { color: var(--accent); text-decoration: none; font-weight: 600; position: relative; transition: all var(--transition-base); border-bottom: 2px solid transparent;}.post-content a:hover,.article-content a:hover,.container-content a:hover { color: var(--accent-dark); border-bottom-color: var(--accent);}.post-content a[href^="http"]::after,.post-content a[href^="https://"]::after,.article-content a[href^="http"]::after,.article-content a[href^="https://"]::after,.container-content a[href^="http"]::after,.container-content a[href^="https://"]::after { content: ' ↗'; font-size: 0.85em; opacity: 0.7;}.post-content a[href^="#"]::after,.article-content a[href^="#"]::after,.container-content a[href^="#"]::after { content: ' #'; font-size: 0.85em; opacity: 0.5;}.post-content a:visited,.article-content a:visited,.container-content a:visited { color: var(--accent-darker);}.post-content a:focus,.article-content a:focus,.container-content a:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;}.article-footer { margin-top: 4rem; padding-top: 2rem; border-top: 2px solid var(--border);}.article-tags { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; margin-bottom: 2rem;}.article-tags h4 { width: 100%; font-size: var(--font-base); color: var(--text-dim); margin-bottom: var(--spacing-2xs);}.tag { padding: var(--spacing-2xs) 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; font-size: 0.9rem; color: var(--text-secondary); transition: var(--transition-base); cursor: pointer;}.tag:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px);}.share-buttons { display: flex; gap: 1rem; align-items: center; padding: 2rem 0;}.share-buttons h4 { font-size: var(--font-base); color: var(--text-dim); margin-right: 1rem;}.share-btn { width: 45px; height: 45px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-base); font-size: 1.3rem;}.share-btn:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 10px 30px var(--shadow);}.author-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; margin: 3rem 0; display: flex; gap: 2rem; align-items: center;}.author-box-content h4 { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; margin-bottom: var(--spacing-2xs);}.author-box-content p { color: var(--text-secondary); line-height: 1.6;}.comments-section { margin: 4rem 0;}.comments-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border);}.comments-header h2 { font-family: 'Orbitron', sans-serif; font-size: var(--font-3xl); color: var(--accent);}.comments-count { color: var(--text-dim); font-size: 1.1rem;}.comment-form { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 2rem; margin-bottom: 3rem;}.comment-form a { color: var(--accent);}.comment-form a:hover { color: var(--accent-dark); text-decoration: underline;}.comment-form h3 { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; margin-bottom: 1.5rem;}.submit-comment-btn { padding: 0.8rem 2rem; background: var(--accent); color: var(--bg-primary); border: none; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: var(--font-base); text-transform: uppercase; letter-spacing: 0.05em; transition: var(--transition-base);}.submit-comment-btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 10px 30px var(--shadow);}.comments-list { display: flex; flex-direction: column; gap: 2rem;}.comment { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 1.5rem; transition: var(--transition-base);}.comment:hover { border-color: var(--accent-alpha-30);}.comment-header { display: flex; gap: 1rem; margin-bottom: 1rem;}.comment-info h4 { font-size: var(--font-base); margin-bottom: 0.3rem;}.comment-meta { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--text-dim);}.comment-body { margin-left: 66px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 1rem;}.comment-actions { margin-left: 66px; display: flex; gap: 1rem;}.comment-action { background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 0.9rem; padding: 0.3rem var(--spacing-xs); border-radius: 6px; transition: var(--transition-base);}.comment-action:hover { color: var(--accent); background: var(--accent-alpha-08);}.comment-reply { margin-left: 4rem; margin-top: 1.5rem;}.category-list { display: flex; flex-direction: column; gap: var(--spacing-xs);}.category-item { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: var(--transition-base); text-decoration: none; color: var(--text-primary);}.category-item:hover,.category-item.active { background: var(--accent-alpha-08); border-color: var(--accent); color: var(--accent); transform: translateX(5px);}.category-count { background: var(--bg-primary); padding: 0.3rem 0.6rem; border-radius: 6px; font-size: 0.85rem; font-weight: 700; color: var(--text-dim);}.category-item:hover .category-count,.category-item.active .category-count { background: var(--accent); color: var(--bg-primary);}.related-post { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: var(--transition-base); text-decoration: none; color: var(--text-primary);}.related-post:last-child { border-bottom: none; padding-bottom: 0;}.related-post:hover { transform: translateX(5px);}.related-post-image { width: 80px; height: 80px; background: linear-gradient(135deg, #1a2332 0%, #0a0f1a 100%); border-radius: 8px; flex-shrink: 0; position: relative; overflow: hidden;}.related-post-image::after { content: '📝'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--font-3xl); opacity: 0.3;}.related-post-content h4 { font-size: 0.95rem; margin-bottom: 0.3rem; line-height: 1.4;}.related-post-meta { font-size: var(--spacing-xs); color: var(--text-dim);}@media (max-width: 1024px) { .article-layout { grid-template-columns: 1fr; }}@media (max-width: 768px) { .article-title { font-size: var(--font-3xl); } .comment-body, .comment-actions { margin-left: 0; } .comment-reply { margin-left: 1rem; } .author-box { flex-direction: column; text-align: center; }}::-webkit-scrollbar { width: 10px;}::-webkit-scrollbar-track { background: var(--bg-primary);}::-webkit-scrollbar-thumb { background: var(--accent-darker); border-radius: 5px;}::-webkit-scrollbar-thumb:hover { background: var(--accent);}.guestbook-header { text-align: center; padding: 4rem 0 3rem; animation: fadeInUp 0.8s ease-out;}.guestbook-header h1 { font-family: var(--font-display); font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin-bottom: var(--spacing-sm); letter-spacing: -0.03em;}.guestbook-header .accent-text { color: var(--accent); text-shadow: 0 0 30px var(--shadow);}.guestbook-header p { font-size: 1.2rem; color: var(--text-secondary); max-width: 700px; margin: 0 auto;}.guestbook-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); margin: var(--spacing-xl) 0; animation: fadeInUp 0.8s ease-out 0.2s both;}.stat-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--spacing-md); text-align: center; transition: all var(--transition-base);}.stat-box:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow-accent);}.stat-box .icon { font-size: var(--font-3xl); margin-bottom: var(--spacing-2xs);}.stat-box .value { font-family: var(--font-display); font-size: var(--font-3xl); font-weight: 700; color: var(--accent); margin-bottom: 0.3rem;}.stat-box .label { color: var(--text-dim); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em;}.guestbook-layout { display: grid; grid-template-columns: 1fr 400px; gap: var(--spacing-xl); margin: var(--spacing-xl) 0;}.entry-form-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--spacing-xl); height: fit-content; animation: fadeInUp 0.8s ease-out 0.3s both;}.entry-form-section h2 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: var(--spacing-md); color: var(--accent); display: flex; align-items: center; gap: var(--spacing-2xs);}.form-hint { color: var(--text-dim); font-size: 0.9rem; margin-bottom: var(--spacing-lg); padding: var(--spacing-sm); background: var(--accent-alpha-05); border-left: 3px solid var(--accent); border-radius: 4px;}.char-counter { text-align: right; font-size: 0.85rem; color: var(--text-dim); margin-top: 0.3rem;}.char-counter.warning { color: var(--warning);}.char-counter.error { color: var(--error);}.entries-section { animation: fadeInUp 0.8s ease-out 0.4s both;}.entries-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-lg);}.entries-header h2 { font-family: var(--font-display); font-size: var(--font-3xl); color: var(--accent);}.filter-buttons { display: flex; gap: var(--spacing-2xs);}.filter-btn { padding: var(--spacing-2xs) 1rem; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-md); cursor: pointer; font-size: 0.9rem; transition: all var(--transition-base);}.filter-btn:hover,.filter-btn.active { background: var(--accent-alpha-10); border-color: var(--accent); color: var(--accent);}.entries-list { display: flex; flex-direction: column; gap: var(--spacing-lg);}.entry { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--spacing-lg); transition: all var(--transition-base); animation: fadeInUp 0.6s ease-out both;}.entry:nth-child(1) { animation-delay: 0.1s; }.entry:nth-child(2) { animation-delay: 0.2s; }.entry:nth-child(3) { animation-delay: 0.3s; }.entry:nth-child(4) { animation-delay: 0.4s; }.entry:nth-child(5) { animation-delay: 0.5s; }.entry:hover { border-color: var(--accent-alpha-50); transform: translateX(5px); box-shadow: -5px 0 20px var(--accent-alpha-10);}.entry-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-md); gap: var(--spacing-md);}.entry-author { display: flex; align-items: center; gap: var(--spacing-sm);}.author-info h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--spacing-4xs);}.author-location { color: var(--text-dim); font-size: 0.85rem; display: flex; align-items: center; gap: 0.3rem;}.entry-meta { text-align: right; color: var(--text-dim); font-size: 0.85rem;}.entry-date { display: block; margin-bottom: 0.3rem;}.entry-number { color: var(--accent); font-weight: 700;}.entry-body { color: var(--text-secondary); line-height: 1.8; margin-bottom: var(--spacing-md); white-space: normal;}.entry-footer { display: flex; gap: var(--spacing-sm); padding-top: var(--spacing-sm); border-top: 1px solid var(--border);}.entry-action { background: transparent; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.9rem; padding: 0.3rem var(--spacing-xs); border-radius: var(--radius-sm); transition: all var(--transition-base); display: flex; align-items: center; gap: 0.3rem;}.entry-action:hover { background: var(--accent-alpha-10); color: var(--accent);}.entry-action.liked { color: var(--accent);}.entry-quote { background: var(--bg-secondary); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: var(--spacing-sm) var(--spacing-md); margin-bottom: var(--spacing-sm); font-size: 0.9rem;}.entry-quote-header { display: flex; align-items: center; gap: var(--spacing-2xs); margin-bottom: var(--spacing-2xs); color: var(--text-dim); font-size: 0.85rem;}.entry-quote-author { font-weight: 600; color: var(--accent);}.entry-quote-text { color: var(--text-dim); font-style: italic; line-height: 1.6;}.entry-replies { margin-top: var(--spacing-md); padding-left: var(--spacing-lg); border-left: 2px solid var(--border);}.entry-reply { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--spacing-md); margin-bottom: var(--spacing-sm);}.entry-reply:last-child { margin-bottom: 0;}.reply-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--spacing-sm);}.reply-author { display: flex; align-items: center; gap: var(--spacing-2xs);}.reply-author-name { font-weight: 600; font-size: 0.95rem;}.reply-time { font-size: var(--spacing-xs); color: var(--text-dim);}.reply-body { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.6;}.empty-state { text-align: center; padding: var(--spacing-2xl); background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl);}.empty-state-icon { font-size: 5rem; margin-bottom: var(--spacing-md); opacity: 0.3;}.empty-state h3 { font-size: var(--font-2xl); margin-bottom: var(--spacing-2xs); color: var(--text-secondary);}@media (max-width: 1024px) { .guestbook-layout { grid-template-columns: 1fr; } .entry-form-section { order: -1; }}@media (max-width: 768px) { .guestbook-header h1 { font-size: var(--font-4xl); } .entry-header { flex-direction: column; align-items: flex-start; } .entry-meta { text-align: left; } .filter-buttons { flex-wrap: wrap; } .pagination-btn .text { display: none; }}.matchday h2 { font-family: var(--font-display); color: var(--accent); margin: 0 0 var(--spacing-2xs) 0;}.matchday-selector { display: flex; justify-content: space-between; align-items: center; margin: 3rem 0 1.5rem; flex-wrap: wrap; gap: 1rem;}.matchday-status,.tip-result { font-size: 0.85rem; }.matchday-status--current { background: var(--accent-alpha-10); border-color: var(--accent-alpha-30); color: var(--accent);}.matchday-status--success { background: var(--success-alpha-10); border-color: var(--success-alpha-30); color: var(--success);}.matchday-status--warning { background: var(--warning-alpha-10); border-color: var(--warning-alpha-30); color: var(--warning);}.matches-container { display: grid; gap: var(--spacing-sm); margin: var(--spacing-lg) 0; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));}.match-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--spacing-md); display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--spacing-lg); row-gap: 10px; align-items: center; transition: all var(--transition-base);}.match-card:hover { border-color: var(--accent); background: var(--bg-card-hover);}.team { display: flex; align-items: center; gap: var(--spacing-sm);}.team.home { justify-content: flex-end;}.team-logo { width: 50px; height: 50px; background: var(--accent-alpha-10); border: 2px solid var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-2xl);}.team-name { font-weight: 600; font-size: 1.1rem;}#team-table .team-name { font-weight: normal;}.match-center { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); min-width: 150px;}.match-time { grid-column: 1/-1; display: grid; place-items: center; color: var(--text-dim); font-size: 0.85rem; font-weight: 600;}.match-score { font-family: var(--font-display); font-size: var(--font-3xl); font-weight: 700; color: var(--accent); display: flex; flex-direction: column; align-items: center;}.match-card .user { grid-column: 1/-1; display: grid; place-items: center;}.compare-teams-btn { display: inline-flex; align-items: center; gap: var(--spacing-2xs); padding: var(--spacing-2xs) 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: var(--spacing-2xs);}.compare-teams-btn:hover { background: rgba(189, 253, 0, 0.1); border-color: var(--accent); color: var(--accent);}.user-tip { margin-top: var(--spacing-xs); padding: 0.6rem 1rem; background: var(--accent-alpha-10); border: 1px solid var(--accent); border-radius: 8px; font-size: 0.9rem; color: var(--text-secondary); text-align: center;}.user-tip-score { color: var(--accent); font-weight: 700; font-size: 1.1rem; font-family: var(--font-display);}.tip-result { margin-top: 0.6rem; font-weight: 600;}.tip-result--correct { color: var(--accent);}.tip-result--exact { color: var(--success);}.tip-result--partial { color: var(--warning);}.tip-result--wrong { color: var(--error);}.tips-table-header { display: flex; justify-content: space-between; margin-bottom: var(--spacing-lg); flex-wrap: wrap;}.tips-table-container { overflow: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card);}.tips-comparison-table { width: 100%; border-collapse: collapse; border-spacing: 0; min-width: 1000px;}.tips-comparison-table th { padding: 1rem; text-align: center; font-weight: 700; color: var(--text-primary); border-bottom: 2px solid var(--border); white-space: nowrap; vertical-align: bottom;}.match-header { background: var(--accent-alpha-05); border-left: 1px solid var(--border); font-size: 0.9rem;}.match-header span { display: grid;}.total-col { border-left: 2px solid var(--border); font-weight: 700; min-width: 80px;}table tbody tr.current-user { border: 2px solid;}.tips-comparison-table td { padding: var(--spacing-xs); text-align: center; border-right: 1px solid rgba(45, 55, 72, 0.3);}.tips-comparison-table .sticky-col { border-right: 2px solid var(--border); background: var(--bg-card);}.tips-comparison-table .sticky-row { background: var(--bg-card);}.tip-cell { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text-primary); position: relative;}.tip-result--correct { color: var(--accent);}.tip-result--exact { color: var(--success);}.tip-cell--exact { background: var(--success-alpha-10);}.tip-cell--correct { background: var(--accent-alpha-10);}.tip-cell--partial { background: var(--warning-alpha-10);}.tip-cell--wrong { color: var(--text-dim);}.tip-cell-points { font-size: var(--font-2xs);}.tip-cell--correct .tip-cell-points { color: var(--accent);}.tip-cell--exact .tip-cell-points { color: var(--success);}.tip-cell--partial .tip-cell-points { color: var(--warning);}.player-name { font-weight: 600; display: flex; align-items: center; gap: var(--spacing-2xs);}.player-name.sticky-col { display: table-cell; text-align: left; left: 0;}.points-cell { font-family: var(--font-display); color: var(--text-primary); font-size: 1.1rem;}.points-cell--highlight { color: var(--accent);}.total-points { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--accent);}.season-selector { display: flex; justify-content: center; gap: var(--spacing-sm); margin: 2rem 0; flex-wrap: wrap;}.season-btn { padding: var(--spacing-2xs) var(--spacing-md); background: var(--bg-card); border: 2px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-lg); cursor: pointer; font-weight: 600; font-family: var(--font-display); transition: var(--transition-base);}.season-btn:hover { border-color: var(--accent); color: var(--accent);}.season-btn.active { background: var(--accent); border-color: var(--accent); color: var(--bg-primary);}@media (max-width: 768px) { .match-card { grid-template-columns: 1fr; gap: var(--spacing-sm); } .team { justify-content: center !important; } .team-name img { width: 60px; } #team-table th:nth-child(4),	#team-table th:nth-child(5),	#team-table th:nth-child(6),	#team-table td:nth-child(4),	#team-table td:nth-child(5),	#team-table td:nth-child(6), #team-table .team-name {		display: none;	} .tips-table-container { border-radius: 8px; max-height: 824px; } .tips-comparison-table td { padding: var(--spacing-2xs); } .player-col { min-width: 140px; } .tippspiel-nav { flex-direction: row; overflow-x: auto; position: unset; height: auto; width: 465px; } .tippspiel-nav a { flex-direction: column; gap: 0.3rem; } .btn .text { display: none; }}.settings-header { padding-top: var(--spacing-lg); margin-bottom: var(--spacing-2xl);}.settings-title { font-family: var(--font-display); font-size: 3rem; color: var(--accent); margin-bottom: var(--spacing-sm);}.settings-subtitle { color: var(--text-secondary); font-size: 1.2rem;}.settings-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--spacing-2xl);}.settings-sidebar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--spacing-lg); height: fit-content; position: sticky; top: 2rem;}.settings-content { display: flex; flex-direction: column; gap: var(--spacing-xl);}.settings-nav { display: flex; flex-direction: column; gap: var(--spacing-2xs);}.settings-nav-item { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: transparent; border: none; border-left-width: medium; border-left-style: none; border-left-color: currentcolor; color: var(--text-secondary); border-radius: var(--radius-md); cursor: pointer; text-align: left; font-size: 0.95rem; font-weight: 600; transition: var(--transition-base);}.settings-nav-item.active { background: var(--accent-alpha-10); color: var(--accent); border-left: 3px solid var(--accent);}.settings-nav-icon { font-size: 1.3rem; width: 24px; text-align: center;}.settings-nav-item:hover { background: var(--accent-alpha-05); color: var(--accent);}.settings-section { display: none; animation: fadeIn 0.4s ease;}.settings-section.active { display: block;}.settings-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--spacing-xl); margin-bottom: var(--spacing-lg);}.settings-card-header { margin-bottom: var(--spacing-lg); padding-bottom: var(--spacing-md); border-bottom: 1px solid var(--border);}.settings-card-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-primary); margin-bottom: 0.3rem;}.settings-card-description { color: var(--text-dim); font-size: 0.9rem;}@media (max-width: 1024px) { .settings-layout { grid-template-columns: 1fr; } .settings-sidebar { position: static; } .settings-nav { flex-direction: row; overflow-x: auto; position: unset; height: auto; width: 400px; } .settings-nav-item { flex-direction: column; gap: 0.3rem; } .settings-nav-icon { font-size: 1.5rem; } .settings-nav-text { display: none; }}.mail-layout { display: grid; grid-template-columns: 300px 1fr; gap: var(--spacing-lg); margin: var(--spacing-lg) 0; min-height: calc(100vh - 300px);}.mail-sidebar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--spacing-lg); height: fit-content; position: sticky; top: 100px;}.compose-btn { width: 100%; padding: var(--spacing-sm) var(--spacing-md); background: var(--accent); color: var(--bg-primary); border: none; border-radius: var(--radius-md); cursor: pointer; font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: var(--spacing-2xs); transition: all var(--transition-base); margin-bottom: var(--spacing-lg);}.compose-btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: var(--shadow-accent);}.mail-folders { display: flex; flex-direction: column; gap: 0.3rem;}.mail-folder { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-sm); background: transparent; border: none; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-md); transition: all var(--transition-base); text-align: left; font-size: 0.95rem;}.mail-folder:hover { background: rgba(189, 253, 0, 0.08); color: var(--accent);}.mail-folder.active { background: rgba(189, 253, 0, 0.15); color: var(--accent); font-weight: 600;}.folder-info { display: flex; align-items: center; gap: var(--spacing-xs);}.folder-icon { font-size: 1.2rem;}.unread-count { background: var(--error); color: white; font-size: 0.75rem; padding: var(--spacing-4xs) var(--spacing-2xs); border-radius: 10px; font-weight: 700; min-width: 20px; text-align: center;}.mail-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden;}.mail-header { padding: var(--spacing-lg); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; background: var(--bg-secondary);}.mail-header h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent);}.mail-actions { display: flex; gap: var(--spacing-2xs);}.action-btn { padding: var(--spacing-2xs) 1rem; background: transparent; border: 1px solid var(--border); color: var(--text-secondary); border-radius: var(--radius-md); cursor: pointer; font-size: 0.9rem; transition: all var(--transition-base);}.action-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(189, 253, 0, 0.05);}.mail-search { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border);}.mail-search input { width: 100%; padding: 0.7rem 1rem 0.7rem 2.5rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.95rem; transition: all var(--transition-base);}.mail-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(189, 253, 0, 0.1);}.search-wrapper { position: relative;}.search-wrapper::before { content: '🔍'; position: absolute; left: var(--spacing-xs); top: 50%; transform: translateY(-50%); font-size: 1rem;}.mail-list { max-height: 600px; overflow-y: auto;}.mail-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--spacing-md); padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border); cursor: pointer; transition: all var(--transition-base); align-items: center;}.mail-item:hover { background: var(--bg-card-hover);}.mail-item.unread { background: rgba(189, 253, 0, 0.03); border-left: 3px solid var(--accent);}.mail-item.selected { background: rgba(189, 253, 0, 0.1);}.mail-checkbox { display: flex; align-items: center;}.mail-checkbox input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent);}.mail-info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0;}.mail-sender { display: flex; align-items: center; gap: var(--spacing-xs);}.mail-sender .avatar-sm { flex-shrink: 0;}.sender-name { font-weight: 600; color: var(--text-primary);}.mail-item.unread .sender-name { font-weight: 700;}.mail-subject { font-size: 0.95rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.mail-item.unread .mail-subject { color: var(--text-primary); font-weight: 600;}.mail-preview { font-size: 0.85rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.mail-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--spacing-2xs);}.mail-time { font-size: 0.85rem; color: var(--text-dim); white-space: nowrap;}.mail-item.unread .mail-time { color: var(--accent); font-weight: 600;}.mail-tags { display: flex; gap: 0.3rem;}.mail-tag { font-size: 0.75rem; padding: var(--spacing-4xs) var(--spacing-2xs); background: rgba(189, 253, 0, 0.1); border: 1px solid rgba(189, 253, 0, 0.3); border-radius: 4px; color: var(--accent);}.mail-tag.important { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.3); color: var(--error);}.mail-tag.attachment { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.3); color: var(--warning);}.mail-detail { display: none; padding: var(--spacing-lg); animation: fadeIn 0.3s ease;}.mail-detail.active { display: block;}.detail-header { border-bottom: 1px solid var(--border); padding-bottom: var(--spacing-lg); margin-bottom: var(--spacing-lg);}.detail-header h3 { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: var(--spacing-sm); color: var(--text-primary);}.detail-sender { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm);}.detail-sender .avatar { flex-shrink: 0;}.sender-details { flex: 1;}.sender-details strong { display: block; margin-bottom: var(--spacing-4xs);}.sender-details small { color: var(--text-dim);}.detail-actions { display: flex; gap: var(--spacing-2xs); margin-top: var(--spacing-sm);}.detail-body { line-height: 1.8; color: var(--text-secondary);}.detail-body p { margin-bottom: var(--spacing-sm);}.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-2xl); text-align: center;}.empty-state-icon { font-size: 4rem; margin-bottom: var(--spacing-md); opacity: 0.3;}.empty-state h3 { font-size: 1.3rem; margin-bottom: var(--spacing-2xs); color: var(--text-secondary);}.empty-state p { color: var(--text-dim);} .mail-modal-content { background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius-xl); max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; animation: slideUp 0.4s ease;}.mail-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; border-bottom: 2px solid var(--border); background: linear-gradient(135deg, rgba(189, 253, 0, 0.05) 0%, transparent 100%); }.mail-modal-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); font-weight: 700; display: flex; align-items: center; gap: var(--spacing-2xs);}.mail-modal-body { padding: var(--spacing-lg);}.recipient-selector { display: flex; gap: var(--spacing-2xs); flex-wrap: wrap;}.recipient-search { width: 100%; padding: 0.8rem 1rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary);}.recipient-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md); max-height: 200px; overflow-y: auto; margin-top: var(--spacing-2xs); display: none; z-index: 10; box-shadow: var(--shadow-lg);}.recipient-list.active { display: block;}.recipient-dropdown { position: relative; margin-bottom: 1rem;}.recipient-item { padding: 0.8rem 1rem; cursor: pointer; display: flex; align-items: center; gap: var(--spacing-xs); transition: background 0.2s ease;}.recipient-item-avatar { width: 32px; height: 32px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--spacing-xs); color: var(--bg-primary);}.recipient-item-name { flex: 1; font-weight: 600; color: var(--text-primary);}.recipient-tag { display: inline-flex; align-items: center; gap: var(--spacing-2xs); padding: var(--spacing-3xs) var(--spacing-xs); background: rgba(189, 253, 0, 0.1); border: 1px solid var(--accent); border-radius: var(--radius-md); color: var(--text-primary); font-size: 0.85rem;}.recipient-tag .remove-recipient { cursor: pointer; color: var(--error); font-weight: 700; transition: transform 0.2s ease;}.recipient-tag .remove-recipient:hover { transform: scale(1.2);}.mail-modal-actions { display: flex; gap: 1rem; padding: 1.5rem var(--spacing-lg); border-top: 2px solid var(--border); background: var(--bg-secondary);}.mail-modal-actions .btn { flex: 1;}@media (max-width: 1024px) { .mail-layout { grid-template-columns: 1fr; } .mail-sidebar { position: static; margin-bottom: var(--spacing-lg); } .mail-folders { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }}@media (max-width: 768px) { .mail-item { grid-template-columns: 1fr; } .mail-checkbox { display: none; } .mail-meta { flex-direction: row; justify-content: space-between; align-items: center; } .mail-actions { flex-wrap: wrap; }}