/* Colors */
--c-primary: #1877f2;
    --c-primary-hover: #1565d8;
    --c-primary-light: #e7f0ff;
    --c-primary-soft: #d0e2ff;
    --c-primary-text: #1877f2;
    --c-accent: #00b894;
    --c-danger: #e41e3f;
    --c-danger-light: #fee2e2;
    --c-success: #42b72a;
    --c-warning: #ffc107;
    --c-warning-light: #fff3cd; {

}

/* Backgrounds */
--bg-primary: #f0f2f5;
    --bg-card: #fff;
    --bg-secondary: #f0f2f5;
    --bg-tertiary: #e4e6eb;
    --bg-elevated: #fff;
    --bg-hover: #f0f2f5;
    --bg-active: #e4e6eb; {

}

/* Text */
--text-primary: #1c1e21;
    --text-secondary: #65676b;
    --text-tertiary: #8e8e8e; {

}

/* Borders */
--border-default: #e4e6eb;
    --border-light: #e4e6eb;
    --border-color: #e4e6eb; {

}

/* Radii */
--r-sm: 6px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-full: 9999px; {

}

/* Shadows */
--shadow-xs: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-md: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 4px 20px rgba(0,0,0,0.12);
    --shadow-xl: 0 8px 40px rgba(0,0,0,0.15); {

}

/* Transitions */
--t-fast: 0.15s ease;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
} {

}

/* === DESIGN TOKENS (CSS Custom Properties) === */
:root {

  --c-primary: #2563eb;
  --c-primary-hover: #1d4ed8;
  --c-primary-light: #eff6ff;
  --c-primary-soft: #dbeafe;
  --c-primary-text: #1e40af;

  --c-accent: #8b5cf6;
  --c-accent-light: #f5f3ff;

  --c-success: #059669;
  --c-success-light: #ecfdf5;
  --c-danger: #dc2626;
  --c-danger-light: #fef2f2;
  --c-warning: #d97706;
  --c-warning-light: #fffbeb;

  --bg-body: #f8fafc;
  --bg-card: #ffffff;
  --bg-elevated: #ffffff;
  --bg-secondary: #f1f5f9;
  --bg-tertiary: #e2e8f0;
  --bg-nav: rgba(255,255,255,0.82);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-inverse: #f8fafc;

  --border-default: #e2e8f0;
  --border-light: #f1f5f9;
  --border-focus: var(--c-primary);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-full: 9999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 150ms var(--ease-out);
  --t-normal: 250ms var(--ease-out);
  --t-slow: 400ms var(--ease-out);

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;

  --max-width: 680px;
  --nav-height: 60px;

}

/* ═══════════════════════════════════════
   DARK MODE — Deep, Rich, Comfortable
   ═══════════════════════════════════════ */
body.dark {

  --c-primary: #3b82f6;
  --c-primary-hover: #60a5fa;
  --c-primary-light: #172554;
  --c-primary-soft: #1e3a5f;
  --c-primary-text: #93c5fd;

  --bg-body: #0c0f14;
  --bg-card: #151921;
  --bg-elevated: #1a1f2b;
  --bg-secondary: #1e2433;
  --bg-tertiary: #2a3040;
  --bg-nav: rgba(12,15,20,0.85);

  --text-primary: #e8ecf4;
  --text-secondary: #94a3b8;
  --text-tertiary: #5a6577;

  --border-default: #1e2433;
  --border-light: #1a1f2b;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.35);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.4);

}

body.dark .top-nav {
background:var(--bg-nav);border-bottom-color:var(--border-default);backdrop-filter:blur(20px) saturate(1.2);
}

body.dark .composer,body.dark .post,body.dark .profile-header,
body.dark .about-card {
background:var(--bg-card);box-shadow:var(--shadow-sm);
}

body.dark .modal-card {
background:var(--bg-card);
}

body.dark .dashboard-section {
background:var(--bg-card);
}

body.dark .dash-stat-card {
background:var(--bg-secondary);
}

body.dark .nav-brand {
color:var(--c-primary);
}

body.dark .nav-link {
color:var(--text-secondary);
}

body.dark .nav-badge {
background:var(--c-primary-light);color:var(--c-primary);
}

body.dark .composer-input,body.dark .comment-input {
background:var(--bg-secondary);border-color:var(--border-default);color:var(--text-primary);
}

body.dark .link-card {
background:var(--bg-secondary);
}

body.dark .tab-btn {
color:var(--text-secondary);
}

body.dark .tab-btn.active {
color:var(--c-primary);border-color:var(--c-primary);
}

body.dark .profile-tabs {
border-color:var(--border-default);
}

body.dark .btn-edit-bio {
background:var(--bg-secondary);color:var(--c-primary);
}

body.dark .visitor-row {
background:var(--bg-secondary);border-color:var(--border-default);
}

body.dark .visitor-row.banned {
background:#2a1a1a;
}

body.dark .post-stats-bar {
border-color:var(--border-default);color:var(--text-secondary);
}

body.dark .post-actions {
border-color:var(--border-default);
}

body.dark .post-action {
color:var(--text-secondary);
}

body.dark .post-action:hover {
background:var(--bg-secondary);
}

body.dark .comments-section {
border-color:var(--border-default);
}

body.dark .comment-bubble {
background:var(--bg-secondary);
}

body.dark .composer-divider {
background:var(--border-default);
}

body.dark .terms-box {
background:var(--bg-secondary);border-color:var(--border-default);
}

body.dark .about-section {
border-color:var(--border-default);
}

body.dark .reactions-popup {
background:var(--bg-elevated);border-color:var(--border-default);
}

body.dark .nav-icon-btn:hover,body.dark .theme-toggle:hover {
background:var(--bg-secondary);
}

body.dark .credentials-card {
background:var(--bg-secondary);border-color:var(--border-default);
}

body.dark .cred-field input {
background:var(--bg-secondary);border-color:#303f66;color:var(--text-primary);
}

body.dark .post-filter-bar {
background:var(--bg-card);border-color:var(--border-default);
}

body.dark .filter-btn {
color:var(--text-secondary);
}

body.dark .filter-btn.active {
background:var(--bg-secondary);color:var(--c-primary);
}

body.dark .pin-badge {
background:var(--bg-secondary);color:var(--c-warning);
}

body.dark .post-pinned {
border-color:rgba(217,119,6,0.3);
}

body.dark .profile-meta-line span {
color:var(--text-secondary);
}

body.dark .post-author {
color:var(--text-primary);
}

body.dark .post-time {
color:var(--text-tertiary);
}

body.dark .post-menu-btn {
color:var(--text-tertiary);
}

body.dark .post-menu-btn:hover {
color:var(--text-primary);background:var(--bg-secondary);
}

body.dark .post-body {
color:var(--text-primary);
}

body.dark .post-attachment-card {
background:var(--bg-secondary);border-color:var(--border-default);color:var(--text-secondary);
}

body.dark .post-attachment-card:hover {
background:var(--bg-tertiary);
}

body.dark .composer-opt:hover {
background:var(--bg-secondary);
}

body.dark .image-preview img {
border-color:var(--border-default);
}

body.dark .reply-form {
background:var(--bg-secondary);border-color:var(--border-default);border-radius:var(--r-md);
}

body.dark .comment-reply>.comment-bubble {
background:var(--bg-tertiary);
}

body.dark .edit-modal-close:hover {
background:var(--bg-secondary);
}

body.dark .edit-modal-text {
color:var(--text-primary);
}

body.dark .edit-media-item {
border-color:var(--border-default);background:var(--bg-secondary);
}

body.dark .edit-file-info {
color:var(--text-secondary);
}

body.dark .edit-modal-toolbar {
border-color:var(--border-default);
}

body.dark .edit-tool-btn:hover {
background:var(--bg-secondary);
}

body.dark .edit-modal-link {
border-color:var(--border-default);
}

body.dark .edit-modal-link:focus {
border-color:var(--c-primary);
}

body.dark .media-picker-dropdown {
background:var(--bg-elevated);border-color:var(--border-default);
}

body.dark .media-picker-item {
color:var(--text-primary);
}

body.dark .media-picker-item:hover {
background:var(--bg-secondary);
}

body.dark .attachment-preview-bar {
background:var(--c-primary-light);border-color:rgba(59,130,246,0.3);color:var(--c-primary-text);
}

body.dark .upload-progress-wrap {
background:var(--c-primary-light);border-color:rgba(59,130,246,0.3);
}

body.dark .upload-progress-label {
color:var(--c-primary-text);
}

body.dark .upload-progress-track {
background:var(--bg-tertiary);
}

body.dark .post-popup-body .comment-bubble {
background:var(--bg-secondary);color:var(--text-primary);
}

body.dark .post-popup-body .replies-list {
border-left-color:var(--border-default);
}

body.dark .post-popup-body .comment-time,
body.dark .post-popup-body .cmt-reply-count,
body.dark .post-popup-body .btn-reply-toggle,
body.dark .post-popup-body .btn-comment-action {
color:var(--text-tertiary);
}

body.dark .post-popup-body .comment-input {
background:var(--bg-secondary);border-color:var(--border-default);color:var(--text-primary);
}

body.dark .post-popup-body .comment-login-prompt {
background:var(--bg-secondary);border-color:var(--border-default);color:var(--text-tertiary);
}

body.dark .post-popup-body .post-action:hover {
background:var(--bg-secondary);color:var(--text-primary);
}

body.dark .post-popup-body .reactions-popup {
background:var(--bg-secondary);border-color:var(--border-default);
}

body.dark .btn-secondary {
background:var(--bg-secondary);color:var(--text-primary);
}

body.dark .modal-card input,.modal-card textarea {
background:var(--bg-secondary);border-color:var(--border-default);color:var(--text-primary);
}

body.dark .modal-close {
background:var(--bg-secondary);
}

body.dark .modal-close:hover {
background:var(--c-danger-light);
}

body.dark .lang-switcher {
background:var(--bg-secondary);
}

body.dark .lang-btn {
color:var(--text-secondary);
}

body.dark .lang-btn:hover {
background:var(--bg-tertiary);color:var(--text-primary);
}

body.dark .lang-btn.active {
background:var(--c-primary);color:#fff;
}

body.dark .vl-sort-btn {
background:var(--bg-secondary);border-color:var(--border-default);color:var(--text-secondary);
}

body.dark .vl-sort-btn:hover {
border-color:var(--c-primary);color:var(--c-primary);
}

body.dark .vl-sort-btn.active {
background:var(--c-primary);border-color:var(--c-primary);color:#fff;
}

body.dark .vl-title {
color:var(--text-primary);
}

body.dark .vl-meta {
color:var(--text-tertiary);
}

body.dark .vl-views {
color:var(--text-tertiary);
}

body.dark .vl-menu-btn {
color:var(--text-tertiary);
}

body.dark .vl-menu-btn:hover {
background:var(--bg-secondary);
}

body.dark .video-view-count {
color:var(--text-secondary);
}

body.dark .video-view-count i {
color:var(--text-tertiary);
}

body.dark .dash-sidebar {
background:var(--bg-card);border-color:var(--border-default);
}

body.dark .dash-nav-btn {
color:var(--text-secondary);
}

body.dark .dash-nav-btn:hover {
background:rgba(59,130,246,0.08);color:var(--c-primary);
}

body.dark .dash-nav-btn.active {
background:var(--c-primary-light);color:var(--c-primary);
}

body.dark .dash-content {
background:var(--bg-card);border-color:var(--border-default);
}

body.dark .oauth-card {
border-color:var(--border-default);
}

body.dark .oauth-card-active {
border-color:var(--c-primary);
}

body.dark .oauth-card-header {
background:var(--bg-secondary);
}

body.dark .oauth-help {
background:var(--bg-secondary);
}

body.dark .oauth-help code {
background:rgba(255,255,255,0.06);
}

body.dark .toggle-slider {
background:var(--bg-tertiary);
}

body.dark .sort-btn {
border-color:var(--border-default);color:var(--text-secondary);
}

body.dark .sort-btn.active {
background:var(--c-primary);color:#fff;
}

body.dark .dash-comment-likes {
background:rgba(220,38,38,0.15);
}

body.dark .btn-goto-post {
background:var(--c-primary-light);
}

body.dark .btn-goto-post:hover {
background:var(--c-primary);color:#fff;
}

body.dark .dash-comment-row {
background:var(--bg-card);border-color:var(--border-default);
}

body.dark .dash-comment-row.selected {
border-color:var(--c-primary);background:rgba(59,130,246,0.05);
}

body.dark .dash-tools-area {
background:var(--bg-secondary);
}

body.dark .dash-search-input {
background:var(--bg-secondary);border-color:var(--border-default);color:var(--text-primary);
}

body.dark .dash-filter-select {
background:var(--bg-secondary);border-color:var(--border-default);color:var(--text-primary);
}

body.dark .activity-row:hover {
background:rgba(255,255,255,0.02);
}

body.dark .act-filter-btn {
background:var(--bg-secondary);border-color:var(--border-default);color:var(--text-secondary);
}

body.dark .act-filter-btn.active {
background:var(--c-primary);color:#fff;border-color:var(--c-primary);
}

body.dark .dcr-author {
color:var(--text-primary);
}

body.dark .dcr-body {
color:var(--text-primary);
}

body.dark .dcr-post {
background:var(--bg-secondary);
}

body.dark .dcr-btn-view {
background:var(--c-primary-light);
}

body.dark .dcr-btn-user {
background:rgba(5,150,105,0.15);
}

body.dark .dcr-btn-delete {
background:rgba(220,38,38,0.15);
}

body.dark .post-tag {
background:var(--c-primary-light);color:var(--c-primary);
}

body.dark .post-tag:hover {
background:var(--c-primary-soft);
}

body.dark .privacy-badge {
background:rgba(220,38,38,0.15);color:#f87171;
}

body.dark .comments-disabled-msg {
background:var(--c-warning-light);color:var(--c-warning);
}

body.dark .site-status-card {
background:var(--bg-secondary);border-color:var(--border-default);
}

body.dark .report-status.pending {
background:var(--c-warning-light);color:var(--c-warning);
}

body.dark .report-status.resolved {
background:rgba(5,150,105,0.15);color:#34d399;
}

body.dark .comment-status-badge.pending {
background:var(--c-warning-light);color:var(--c-warning);
}

body.dark .comment-status-badge.rejected {
background:rgba(220,38,38,0.15);color:#f87171;
}

body.dark .post-privacy-badge.private {
background:rgba(217,119,6,0.12);color:var(--c-warning);border-color:rgba(217,119,6,0.3);
}

body.dark .tags-grid a {
background:var(--bg-secondary);color:var(--text-secondary);
}

body.dark .tags-grid a:hover {
background:var(--c-primary-light);color:var(--c-primary);
}

body.dark .tags-grid a.active {
background:var(--c-primary);color:#fff;
}

body.dark .replies-list {
border-left-color:var(--border-default);
}

body.dark .product-card {
background:var(--bg-card);border-color:var(--border-default);
}

body.dark .current-price {
color:var(--text-primary);
}

body.dark .comment-pinned>.comment-bubble {
background:#2d2610;border-color:rgba(240,180,41,0.25);
}