/* ========================================================= LinkHive — Modern Themeable Stylesheet Themes driven by CSS custom properties on ========================================================= */ /* ---------- THEMES ---------- */ /* Light (default) */ body[data-theme="light"], :root { --bg: #f5f7fb; --bg-gradient: radial-gradient(circle at 20% 0%, #eef2ff 0%, transparent 50%), radial-gradient(circle at 80% 100%, #fef3c7 0%, transparent 50%); --surface: #ffffff; --surface-2: #f7fafc; --border: #e5e9f0; --text: #1a2332; --text-muted: #5b6b83; --text-faint: #94a3b8; --primary: #4c51bf; --primary-hover: #434190; --primary-soft: #eef0ff; --accent: #f6ad55; --accent-soft: #fff7ed; --success: #38a169; --success-soft: #f0fff4; --danger: #e53e3e; --danger-soft: #fff5f5; --shadow-sm: 0 1px 2px rgba(16,24,40,0.05); --shadow: 0 4px 12px rgba(16,24,40,0.06); --shadow-lg: 0 12px 32px rgba(16,24,40,0.12); --radius: 14px; --radius-sm: 10px; --radius-xs: 6px; } /* Dark */ body[data-theme="dark"] { --bg: #0b1220; --bg-gradient: radial-gradient(circle at 20% 0%, #1e293b 0%, transparent 50%), radial-gradient(circle at 80% 100%, #1e1b4b 0%, transparent 50%); --surface: #131c2e; --surface-2: #1c2740; --border: #2a3a55; --text: #e6edf7; --text-muted: #a3b1c6; --text-faint: #64748b; --primary: #8b93ff; --primary-hover: #6f78ff; --primary-soft: #1e2a4a; --accent: #fbbf24; --accent-soft: #2a2417; --success: #34d399; --success-soft: #0f2a22; --danger: #f87171; --danger-soft: #2a1717; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 12px 32px rgba(0,0,0,0.55); } /* Ocean */ body[data-theme="ocean"] { --bg: #eef8fb; --bg-gradient: radial-gradient(circle at 20% 0%, #cffafe 0%, transparent 50%), radial-gradient(circle at 80% 100%, #cffafe 0%, transparent 50%); --surface: #ffffff; --surface-2: #f0fafd; --border: #c9e5f0; --text: #083344; --text-muted: #3d7089; --text-faint: #7ba7bd; --primary: #0891b2; --primary-hover: #0e7490; --primary-soft: #e0f7fb; --accent: #06b6d4; --accent-soft: #ecfeff; --success: #0d9488; --success-soft: #ccfbf1; --danger: #e11d48; --danger-soft: #ffe4e6; --shadow-sm: 0 1px 2px rgba(8,145,178,0.08); --shadow: 0 4px 12px rgba(8,145,178,0.1); --shadow-lg: 0 12px 32px rgba(8,145,178,0.18); } /* Sunset */ body[data-theme="sunset"] { --bg: #fff8f1; --bg-gradient: radial-gradient(circle at 20% 0%, #ffe4cc 0%, transparent 50%), radial-gradient(circle at 80% 100%, #fde68a 0%, transparent 50%); --surface: #ffffff; --surface-2: #fffaf3; --border: #fbe0c4; --text: #5c1a05; --text-muted: #a1450d; --text-faint: #d97706; --primary: #ea580c; --primary-hover: #c2410c; --primary-soft: #ffedd5; --accent: #f59e0b; --accent-soft: #fef3c7; --success: #16a34a; --success-soft: #dcfce7; --danger: #dc2626; --danger-soft: #fee2e2; --shadow-sm: 0 1px 2px rgba(234,88,12,0.08); --shadow: 0 4px 12px rgba(234,88,12,0.1); --shadow-lg: 0 12px 32px rgba(234,88,12,0.18); } /* Forest */ body[data-theme="forest"] { --bg: #f1f9f2; --bg-gradient: radial-gradient(circle at 20% 0%, #d1fae5 0%, transparent 50%), radial-gradient(circle at 80% 100%, #d9f99d 0%, transparent 50%); --surface: #ffffff; --surface-2: #f4fbf5; --border: #cbe6cf; --text: #0f3d22; --text-muted: #356548; --text-faint: #6f9b7c; --primary: #15803d; --primary-hover: #166534; --primary-soft: #dcfce7; --accent: #84cc16; --accent-soft: #ecfccb; --success: #16a34a; --success-soft: #dcfce7; --danger: #dc2626; --danger-soft: #fee2e2; --shadow-sm: 0 1px 2px rgba(21,128,61,0.08); --shadow: 0 4px 12px rgba(21,128,61,0.1); --shadow-lg: 0 12px 32px rgba(21,128,61,0.18); } /* Mono */ body[data-theme="mono"] { --bg: #fafafa; --bg-gradient: radial-gradient(circle at 20% 0%, #e5e5e5 0%, transparent 50%), radial-gradient(circle at 80% 100%, #e5e5e5 0%, transparent 50%); --surface: #ffffff; --surface-2: #f5f5f5; --border: #e0e0e0; --text: #0a0a0a; --text-muted: #525252; --text-faint: #a3a3a3; --primary: #171717; --primary-hover: #000000; --primary-soft: #f0f0f0; --accent: #737373; --accent-soft: #f5f5f5; --success: #404040; --success-soft: #f5f5f5; --danger: #dc2626; --danger-soft: #fef2f2; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 12px 32px rgba(0,0,0,0.15); } /* ---------- BASE ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); background-image: var(--bg-gradient); background-attachment: fixed; background-repeat: no-repeat; color: var(--text); line-height: 1.65; transition: background-color 0.3s ease, color 0.3s ease; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-hover); } .container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } ::selection { background: var(--primary); color: #fff; } /* Nice scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; } /* ---------- HEADER ---------- */ .site-header { background: color-mix(in srgb, var(--surface) 85%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); transition: background 0.3s ease; } .header-inner { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; flex-wrap: wrap; gap: 16px; } .logo { font-size: 22px; font-weight: 800; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 10px; letter-spacing: -0.6px; transition: transform 0.2s; } .logo:hover { transform: scale(1.02); } .logo i { color: var(--accent); background: linear-gradient(135deg, var(--accent), var(--primary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-size: 24px; } .main-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; } .main-nav a { color: var(--text-muted); text-decoration: none; padding: 9px 15px; border-radius: var(--radius-xs); font-weight: 500; transition: all 0.2s; font-size: 14px; display: inline-flex; align-items: center; gap: 7px; position: relative; } .main-nav a:hover { background: var(--primary-soft); color: var(--primary); } .btn-signup { background: linear-gradient(135deg, var(--primary), var(--primary-hover)) !important; color: #fff !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); } .btn-signup:hover { transform: translateY(-1px); box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 40%, transparent); } .btn-logout { color: var(--danger) !important; } .btn-logout:hover { background: var(--danger-soft) !important; color: var(--danger) !important; } /* ---------- THEME SWITCHER (header) ---------- */ .theme-switcher { position: relative; margin-left: 4px; } .theme-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; transition: all 0.25s; } .theme-btn:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); transform: rotate(20deg) scale(1.05); } .theme-menu { position: absolute; right: 0; top: 50px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; display: none; min-width: 220px; z-index: 100; animation: menuPop 0.15s ease; } @keyframes menuPop { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .theme-menu.open { display: block; } .theme-menu-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-xs); cursor: pointer; font-size: 14px; color: var(--text); text-decoration: none; transition: background 0.15s; font-weight: 500; } .theme-menu-item:hover { background: var(--surface-2); transform: translateX(2px); } .theme-menu-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; } .theme-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,0.08); } /* ---------- MAIN ---------- */ .main-content { padding: 40px 24px 80px; } /* ---------- FLASH ---------- */ .flash { padding: 15px 20px; border-radius: var(--radius-sm); margin-bottom: 24px; font-weight: 500; border-left: 4px solid; animation: slideDown 0.35s ease; display: flex; align-items: center; gap: 10px; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .flash-success { background: var(--success-soft); color: var(--success); border-color: var(--success); } .flash-error { background: var(--danger-soft); color: var(--danger); border-color: var(--danger); } .flash-info { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); } /* ---------- FEED ---------- */ .feed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; flex-wrap: wrap; gap: 15px; } .feed-header h1 { font-size: 28px; font-weight: 800; display: flex; align-items: center; gap: 12px; color: var(--text); letter-spacing: -0.5px; } .tabs { display: flex; gap: 6px; background: var(--surface); padding: 5px; border-radius: var(--radius-sm); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .tabs a { padding: 8px 18px; border-radius: var(--radius-xs); text-decoration: none; color: var(--text-muted); font-weight: 600; font-size: 13px; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; } .tabs a:hover { color: var(--primary); background: var(--surface-2); } .tabs a.active { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); } /* ---------- CATEGORY CHIPS ---------- */ .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: all 0.2s; box-shadow: var(--shadow-sm); } .chip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow); } .chip.active { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; border-color: transparent; box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent); } /* ---------- POSTS TABLE ---------- */ .posts-table { width: 100%; background: var(--surface); border-collapse: separate; border-spacing: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); } .posts-table th, .posts-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); } .posts-table th { background: var(--surface-2); font-weight: 700; color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } .posts-table tr:last-child td { border-bottom: none; } .posts-table tbody tr { transition: background 0.15s, transform 0.15s; } .posts-table tbody tr:hover { background: var(--surface-2); } .posts-table a.title-link { color: var(--text); font-weight: 600; text-decoration: none; transition: color 0.2s; display: inline-flex; align-items: center; gap: 6px; } .posts-table a.title-link:hover { color: var(--primary); } .posts-table a.title-link::after { content: '→'; opacity: 0; transform: translateX(-4px); transition: all 0.2s; font-weight: 400; } .posts-table a.title-link:hover::after { opacity: 1; transform: translateX(0); } .author-link { color: var(--primary); text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .author-link:hover { color: var(--primary-hover); text-decoration: underline; } /* ---------- BADGES ---------- */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; } .badge.video { background: #fee2e2; color: #b91c1c; border-color: #fecaca; } .badge.document { background: #fef3c7; color: #b45309; border-color: #fde68a; } .badge.article { background: #dcfce7; color: #15803d; border-color: #bbf7d0; } .badge.image { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; } .badge.announce { background: var(--accent); color: #fff; border-color: var(--accent); } .badge.private { background: #fee2e2; color: #b91c1c; border-color: #fecaca; } .badge.public { background: #dcfce7; color: #15803d; border-color: #bbf7d0; } /* ---------- FORMS ---------- */ .form-card { background: var(--surface); padding: 36px; border-radius: var(--radius); box-shadow: var(--shadow); max-width: 660px; margin: 0 auto; border: 1px solid var(--border); transition: background 0.3s ease; } .form-card h1 { margin-bottom: 28px; font-size: 24px; font-weight: 800; display: flex; align-items: center; gap: 12px; color: var(--text); letter-spacing: -0.4px; } .form-card h1 i { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .form-group { margin-bottom: 22px; } .form-group label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.7px; } .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; background: var(--surface); color: var(--text); transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); transform: translateY(-1px); } .form-group textarea { resize: vertical; min-height: 110px; } .form-hint { font-size: 12px; color: var(--text-faint); margin-top: 6px; display: flex; align-items: center; gap: 5px; } /* ---------- BUTTONS ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border: none; border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; transition: all 0.2s; font-family: inherit; letter-spacing: 0.2px; } .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-hover)); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 30%, transparent); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 40%, transparent); color: #fff; } .btn-secondary { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--surface); color: var(--text); border-color: var(--primary); transform: translateY(-2px); } .btn-danger { background: linear-gradient(135deg, var(--danger), #c53030); color: #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--danger) 30%, transparent); } .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--danger) 40%, transparent); color: #fff; } .btn-success { background: linear-gradient(135deg, var(--success), #2f855a); color: #fff; } .btn-success:hover { transform: translateY(-2px); color: #fff; } .btn-sm { padding: 8px 14px; font-size: 12px; } /* ---------- AUTH PAGES ---------- */ .auth-wrap { max-width: 460px; margin: 50px auto; } .auth-wrap h1 { text-align: center; margin-bottom: 8px; font-weight: 800; letter-spacing: -0.5px; } .auth-wrap p.subtitle { text-align: center; color: var(--text-muted); margin-bottom: 32px; font-size: 15px; } .auth-footer { text-align: center; margin-top: 24px; color: var(--text-muted); font-size: 14px; } .auth-footer a { color: var(--primary); font-weight: 700; } .auth-footer a:hover { text-decoration: underline; } /* ---------- CONTENT VIEW ---------- */ .content-view { background: var(--surface); padding: 42px; border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--border); } .content-view h1 { font-size: 32px; font-weight: 800; margin-bottom: 20px; line-height: 1.25; color: var(--text); letter-spacing: -0.6px; } .content-meta { display: flex; gap: 22px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .content-meta span { display: inline-flex; align-items: center; gap: 7px; } .content-embed { margin: 28px 0; } .video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } .document-container iframe { border-radius: var(--radius-sm); border: 1px solid var(--border); } .image-container img { max-width: 100%; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); } /* ---------- AUTHOR CARD ---------- */ .author-card { display: flex; gap: 20px; align-items: center; background: linear-gradient(135deg, var(--surface-2), var(--surface)); padding: 24px; border-radius: var(--radius); margin-top: 36px; border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s; } .author-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .author-avatar { width: 68px; height: 68px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; flex-shrink: 0; overflow: hidden; border: 3px solid var(--surface); box-shadow: var(--shadow); } .author-avatar img { width: 100%; height: 100%; object-fit: cover; } .author-info h3 { margin-bottom: 3px; font-size: 18px; font-weight: 700; color: var(--text); } .author-info p { color: var(--text-muted); font-size: 14px; margin-bottom: 8px; } .author-info .btn { margin-top: 6px; } /* ---------- PROFILE ---------- */ .profile-header { background: var(--surface); padding: 42px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 30px; display: flex; gap: 30px; align-items: center; flex-wrap: wrap; border: 1px solid var(--border); position: relative; overflow: hidden; } .profile-header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 90px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 15%, transparent), color-mix(in srgb, var(--accent) 15%, transparent)); z-index: 0; } .profile-header > * { position: relative; z-index: 1; } .profile-avatar { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 800; overflow: hidden; flex-shrink: 0; border: 5px solid var(--surface); box-shadow: var(--shadow-lg); } .profile-avatar img { width: 100%; height: 100%; object-fit: cover; } .profile-info h1 { font-size: 30px; font-weight: 800; margin-bottom: 6px; color: var(--text); letter-spacing: -0.6px; } .profile-info .username { color: var(--text-muted); margin-bottom: 12px; font-size: 15px; font-weight: 500; } .profile-info .bio { color: var(--text); max-width: 620px; margin-top: 10px; line-height: 1.7; } /* ---------- CARD GRID ---------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; } .card { background: var(--surface); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); transition: transform 0.25s, box-shadow 0.25s; display: flex; flex-direction: column; border: 1px solid var(--border); position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent)); transform: scaleX(0); transform-origin: left; transition: transform 0.3s; } .card:hover::before { transform: scaleX(1); } .card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); } .card h3 { font-size: 17px; margin: 12px 0; line-height: 1.4; font-weight: 700; } .card h3 a { color: var(--text); text-decoration: none; } .card h3 a:hover { color: var(--primary); } .card p.desc { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; flex-grow: 1; line-height: 1.6; } .card .meta { font-size: 12px; color: var(--text-faint); display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--border); } /* ---------- EMPTY ---------- */ .empty-state { text-align: center; padding: 80px 20px; color: var(--text-faint); } .empty-state i { font-size: 60px; margin-bottom: 20px; display: block; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0.4; } .empty-state h2 { color: var(--text); margin-bottom: 10px; font-weight: 700; } .empty-state p { margin-bottom: 8px; } /* ---------- ANNOUNCEMENTS ---------- */ .announcement { background: linear-gradient(135deg, var(--accent-soft), var(--surface)); border-left: 4px solid var(--accent); padding: 18px 22px; border-radius: var(--radius-sm); margin-bottom: 14px; transition: transform 0.2s, box-shadow 0.2s; box-shadow: var(--shadow-sm); } .announcement:hover { transform: translateX(6px); box-shadow: var(--shadow); } .announcement a { color: var(--text); font-weight: 700; text-decoration: none; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; } .announcement a:hover { color: var(--primary); } .announcement p { color: var(--text-muted); font-size: 13px; margin-top: 6px; } /* ---------- THEME PICKER (profile) ---------- */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin-top: 12px; } .theme-option { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 14px; cursor: pointer; text-align: center; transition: all 0.22s; background: var(--surface); user-select: none; outline: none; position: relative; } .theme-option:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); } .theme-option:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } .theme-option.selected { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } .theme-option.selected::after { content: '✓'; position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .theme-option .preview { width: 100%; height: 52px; border-radius: 8px; margin-bottom: 10px; display: flex; overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .theme-option .preview .dot { flex: 1; height: 100%; } .theme-option .name { font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: 0.4px; text-transform: uppercase; } /* ---------- STAT BOXES ---------- */ .stat-box { background: var(--surface); padding: 22px; border-radius: var(--radius); text-align: center; box-shadow: var(--shadow); border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s; } .stat-box:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .stat-box .num { font-size: 32px; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: -1px; } .stat-box .lbl { color: var(--text-muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; margin-top: 4px; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 700px) { .posts-table th:nth-child(2), .posts-table td:nth-child(2) { display: none; } .profile-header { flex-direction: column; text-align: center; padding: 30px 22px; } .feed-header { flex-direction: column; align-items: flex-start; } .content-view { padding: 26px; } .content-view h1 { font-size: 24px; } .form-card { padding: 26px; } .theme-grid { grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)); } .main-content { padding: 28px 16px 60px; } .header-inner { padding: 12px 16px; } }