/* DougHub shared visual system — October 2026
   Visual-only layer: keeps each page's existing markup and behavior intact. */
:root {
  --dh-bg: #050611;
  --dh-panel: rgba(14, 18, 41, .78);
  --dh-panel-solid: #10142b;
  --dh-border: rgba(177, 184, 255, .14);
  --dh-border-hot: rgba(139, 126, 255, .42);
  --dh-text: #f5f6ff;
  --dh-muted: #a4abc7;
  --dh-purple: #a855f7;
  --dh-indigo: #6366f1;
  --dh-cyan: #67e8f9;
  --dh-shadow: 0 18px 55px rgba(0, 0, 0, .22);
}
html { scroll-behavior: smooth; }
body {
  /* Deliberately do not set any body background here.
     Each page owns its own background and it must remain unchanged. */
  color: var(--dh-text);
  accent-color: var(--dh-indigo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { color: #fff; background: rgba(124, 92, 255, .48); }
:focus-visible { outline: 2px solid #a5b4fc !important; outline-offset: 3px; }
a { text-underline-offset: 4px; transition: color .18s ease, opacity .18s ease; }
button, input, textarea, select { transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
button { -webkit-tap-highlight-color: transparent; }
button:hover:not(:disabled) { filter: brightness(1.09); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { cursor: not-allowed; opacity: .55; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea, select {
  border-color: var(--dh-border);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):focus,
textarea:focus, select:focus {
  border-color: rgba(129,140,248,.8) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.13);
  outline: none;
}
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid var(--dh-border); }
header, .top, .topbar, .top-bar, .topbar, .topbar-wrap, .navbar, .app-header {
  border-color: var(--dh-border);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
header a, .nav a, .top a, .topbar a, .navbar a { text-decoration: none; }
header a:hover, .nav a:hover, .top a:hover, .topbar a:hover, .navbar a:hover { color: #c4b5fd; }
.logo-mark, .logo-icon, .brand-icon, .brand-i, .mark, .icon, .brand-mark, .brand-logo {
  box-shadow: 0 8px 28px rgba(99,102,241,.23);
}
.card, .panel, .tool-card, .game-card, .feature-card, .stat-card, .settings-card,
.section-card, .content-card, .auth-card, .modal-content, .dialog, .empty-state,
.project, .file-card, .video-card, .post-card, .message-card, .setting-card,
.dashboard-card, .workspace-card, .editor-panel, .sidebar-card {
  border-color: var(--dh-border);
}
.card, .panel, .tool-card, .feature-card, .stat-card, .settings-card,
.section-card, .content-card, .auth-card, .modal-content, .dialog,
.project, .file-card, .video-card, .post-card, .setting-card,
.dashboard-card, .workspace-card, .sidebar-card {
  box-shadow: var(--dh-shadow);
}
h1, h2, h3 { letter-spacing: -.035em; text-wrap: balance; }
p, .subtitle, .description, .muted, small { text-wrap: pretty; }
.badge, .pill, .tag, .status, .chip {
  border-color: var(--dh-border);
}
table { border-color: var(--dh-border); }
th { color: #c5c9e8; }
td, th { border-color: var(--dh-border); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(4,5,16,.55); }
::-webkit-scrollbar-thumb { background: rgba(129,140,248,.28); border: 2px solid rgba(4,5,16,.55); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,.52); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 700px) {
  header, .top, .topbar, .top-bar, .navbar, .app-header { max-width: 100%; }
  button, input, textarea, select { max-width: 100%; }
}


/* === Shared DougHub component styling ===
   Preserve each page's own background and layout. Only polish controls,
   cards, dialogs, popups and navigation to match the homepage UI. */
:root {
  color-scheme: dark;
  --dh-radius: 18px;
  --dh-glass: rgba(13, 17, 39, .94);
}
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--dh-text);
}
button, input, textarea, select {
  font-family: inherit;
}
button {
  border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled):not(.danger):not(.delete):not(.btn-danger):not([class*="danger"]):not([class*="delete"]):hover {
  filter: brightness(1.08);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
textarea, select {
  border-color: var(--dh-border);
  border-radius: 12px;
}
::placeholder { color: #8289a9; opacity: 1; }
header, .top, .topbar, .top-bar, .navbar, .app-header, .topbar-wrap {
  border-color: var(--dh-border);
}
.card, .panel, .tool-card, .game-card, .feature-card, .stat-card,
.settings-card, .section-card, .content-card, .auth-card, .modal-content,
.dialog, .project, .file-card, .video-card, .post-card, .message-card,
.setting-card, .dashboard-card, .workspace-card, .editor-panel,
.sidebar-card, .tool-panel, .content-panel, .main-card, .app-panel {
  border-color: var(--dh-border);
  border-radius: var(--dh-radius);
}
/* Common modal/pop-up shells get the homepage's dark glass treatment.
   The backdrop itself stays untouched so it cannot blur the whole page. */
.modal-content, .dialog, .popup, .popup-content, .modal-card, .confirm-modal,
.dropdown-menu, .context-menu, .popover, [role="dialog"] {
  color: var(--dh-text);
  border-color: var(--dh-border);
  box-shadow: 0 24px 70px rgba(0,0,0,.38);
}
.modal-content, .dialog, .popup-content, .modal-card, .confirm-modal, [role="dialog"] {
  background-color: rgba(13,17,39,.97);
}
.dropdown-menu, .context-menu, .popover {
  background-color: rgba(13,17,39,.98);
}
a { text-underline-offset: 4px; }
:focus-visible { outline-color: #a5b4fc; }
@media (max-width: 700px) {
  img, video, canvas, iframe { max-width: 100%; }
}


/* Homepage-inspired controls: polish without replacing page-specific colors. */
button, input, textarea, select, .btn, .button, .action-button, .primary-button {
  border-radius: 12px;
}
button:not(:disabled), .btn, .button, .action-button, .primary-button, a.button, a.btn {
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
button:not(:disabled):hover, .btn:hover, .button:hover, .action-button:hover, .primary-button:hover, a.button:hover, a.btn:hover {
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
button:not(:disabled):active, .btn:active, .button:active, .action-button:active, .primary-button:active {
  transform: translateY(1px);
}
/* Use the homepage indigo-to-purple gradient only on clearly primary actions. */
button.primary, button.btn-primary, button.primary-button, button.cta,
a.primary, a.btn-primary, a.primary-button, a.cta,
input[type="submit"], input[type="button"].primary {
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: 1px solid rgba(196,181,253,.28);
  box-shadow: 0 10px 30px rgba(99,102,241,.22);
  font-weight: 800;
}
button.primary:hover:not(:disabled), button.btn-primary:hover:not(:disabled),
button.primary-button:hover:not(:disabled), button.cta:hover:not(:disabled),
a.primary:hover, a.btn-primary:hover, a.primary-button:hover, a.cta:hover,
input[type="submit"]:hover {
  filter: brightness(1.08);
  box-shadow: 0 14px 35px rgba(99,102,241,.3);
}
/* Account menus and common popup shells match the homepage's dark glass UI. */
.account-menu, .dropdown-menu, .context-menu, .popover, .popup, .popup-content,
.modal-box, .modal-content, .modal-card, .confirm-modal, .dialog, [role="dialog"] {
  border: 1px solid var(--dh-border);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,.38);
}
.account-menu, .dropdown-menu, .context-menu, .popover {
  background-color: rgba(12,13,28,.97);
}
.popup-content, .modal-box, .modal-content, .modal-card, .confirm-modal, .dialog, [role="dialog"] {
  background-color: rgba(13,17,39,.97);
}
.modal, .modal-backdrop, .popup-backdrop {
  /* Keep the page's own overlay color; do not apply backdrop filters globally. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* === Visible cross-page polish (higher priority than page-local defaults) ===
   Keep body backgrounds untouched. Preserve danger, account, icon and nav controls. */
body button:not(:disabled):not(.danger):not(.delete):not(.btn-danger):not([class*="danger"]):not([class*="delete"]):not(.logout):not(.logout-button):not(.account-btn):not(.account-menu button):not(.close):not(.close-button):not(.icon-button):not(.nav-link):not(.slider-arrow):not(.community-slider-arrow),
body .button:not(.danger):not(.delete):not([class*="danger"]):not([class*="delete"]),
body a.button:not(.danger):not(.delete) {
  border-radius: 12px;
  border-color: rgba(129,140,248,.38);
}
body button:not(:disabled):not(.danger):not(.delete):not(.btn-danger):not([class*="danger"]):not([class*="delete"]):not(.logout):not(.logout-button):not(.account-btn):not(.account-menu button):not(.close):not(.close-button):not(.icon-button):not(.nav-link):not(.slider-arrow):not(.community-slider-arrow):not(.secondary):not(.ghost):not(.subtle),
body .button:not(.danger):not(.delete):not([class*="danger"]):not([class*="delete"]):not(.secondary):not(.ghost):not(.subtle) {
  box-shadow: 0 5px 18px rgba(0,0,0,.12);
}
body button:not(:disabled):not(.danger):not(.delete):not(.btn-danger):not([class*="danger"]):not([class*="delete"]):not(.logout):not(.logout-button):not(.account-btn):not(.account-menu button):not(.close):not(.close-button):not(.icon-button):not(.nav-link):hover {
  border-color: rgba(167,139,250,.68);
}
body .modal-box, body .modal-content, body .modal-card, body .popup,
body .popup-content, body .confirm-modal, body .dialog, body [role="dialog"],
body dialog[open] {
  color: #f5f6ff;
  border: 1px solid rgba(177,184,255,.2);
  border-radius: 20px;
  box-shadow: 0 28px 85px rgba(0,0,0,.48), inset 0 1px rgba(255,255,255,.035);
}
body .modal-box, body .modal-content, body .modal-card, body .popup-content,
body .confirm-modal, body .dialog, body [role="dialog"], body dialog[open] {
  background-color: #0d1127;
}
body .account-menu, body .dropdown-menu, body .context-menu, body .popover {
  border: 1px solid rgba(177,184,255,.18);
  border-radius: 15px;
  box-shadow: 0 22px 65px rgba(0,0,0,.42);
}


/* === DougHub full-page formatting pass: consistent components, original layouts/backgrounds preserved === */
/* This layer intentionally styles components, not body/page backgrounds or layout grids. */
:root {
  --dh-line-soft: rgba(180, 187, 255, .11);
  --dh-line: rgba(165, 171, 255, .20);
  --dh-surface: rgba(15, 19, 43, .74);
  --dh-surface-raised: rgba(20, 25, 55, .86);
  --dh-primary: #6366f1;
  --dh-primary-hover: #7779ff;
  --dh-radius-card: 18px;
}

/* Shared content surfaces: retain each page's geometry while giving components a coherent finish. */
.card, .panel, .tool-card, .game-card, .feature-card, .stat-card,
.settings-card, .settings-section, .section-card, .content-card, .auth-card,
.project, .file-card, .video-card, .post-card, .message-card, .setting-card,
.dashboard-card, .workspace-card, .editor-panel, .sidebar-card, .tool-panel,
.content-panel, .main-card, .app-panel, .hero-card, .admin-event-card,
.admin-schedule-card, .audit-card, .moderation-card, .feedback-section,
.chat-container, .chat-top, .composer, .tool-output, .output-panel {
  border-color: var(--dh-line-soft);
  border-radius: var(--dh-radius-card);
}
.card, .panel, .tool-card, .feature-card, .stat-card, .settings-card,
.settings-section, .section-card, .content-card, .auth-card, .project,
.file-card, .video-card, .post-card, .setting-card, .dashboard-card,
.workspace-card, .editor-panel, .sidebar-card, .tool-panel, .content-panel,
.main-card, .app-panel, .hero-card, .admin-event-card, .admin-schedule-card,
.audit-card, .moderation-card, .feedback-section {
  box-shadow: 0 14px 42px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.025);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover, .tool-card:hover, .feature-card:hover, .game-card:hover,
.project:hover, .file-card:hover, .video-card:hover, .post-card:hover {
  border-color: rgba(139, 132, 255, .38);
}

/* Page headings, labels, descriptions and section dividers. */
.page-title, .section-title, .section-heading, .admin-section-heading,
.tool-heading, .settings-section-title, .hero h1, .hero-title {
  letter-spacing: -.035em;
}
.subtitle, .section-subtitle, .section-description, .description,
.setting-help, .admin-card-help, .muted, .empty, .empty-state {
  color: var(--dh-muted);
}
.section-header, .page-header, .admin-section-heading, .tool-heading {
  border-color: var(--dh-line-soft);
}
.badge, .pill, .tag, .chip, .status, .status-pill, .schedule-state-pill,
.hero-badge, .dmail-badge {
  border: 1px solid var(--dh-line-soft);
  border-radius: 999px;
}

/* Primary and secondary actions. Specific danger/destructive and navigation controls keep their meaning. */
button, input[type="button"], input[type="submit"], input[type="reset"],
.button, .btn, a.button, a.btn, .back-button, .save-button, .update-button,
.upload-button, .hero-create-button, .warning-send-button, .primary-button {
  font-family: inherit;
  border-radius: 12px;
  font-weight: 650;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, filter .18s ease;
}
button:not(:disabled):not(.danger):not(.delete):not([class*="danger"]):not([class*="delete"]):not(.logout):not(.logout-button):not(.icon-button):not(.nav-link):not(.slider-arrow):not(.community-slider-arrow):hover,
input[type="button"]:not(:disabled):hover, input[type="submit"]:not(:disabled):hover,
.button:hover, .btn:hover, a.button:hover, a.btn:hover {
  border-color: rgba(167, 139, 250, .65);
  box-shadow: 0 8px 24px rgba(99,102,241,.15);
}
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.button:focus-visible, .btn:focus-visible, a.button:focus-visible, a.btn:focus-visible {
  outline: 2px solid rgba(167,139,250,.95);
  outline-offset: 3px;
}
button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: .58;
}
button.primary, button.btn-primary, button.primary-button, button.cta,
a.primary, a.btn-primary, a.primary-button, a.cta, .save-button,
.update-button, .upload-button, .hero-create-button, input[type="submit"] {
  border: 1px solid rgba(196,181,253,.28);
  background-image: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  box-shadow: 0 8px 24px rgba(99,102,241,.19);
}
button.primary:hover:not(:disabled), button.btn-primary:hover:not(:disabled),
button.primary-button:hover:not(:disabled), button.cta:hover:not(:disabled),
a.primary:hover, a.btn-primary:hover, a.primary-button:hover, a.cta:hover,
.save-button:hover:not(:disabled), .update-button:hover:not(:disabled),
.upload-button:hover:not(:disabled), .hero-create-button:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 12px 30px rgba(99,102,241,.27);
}

/* Inputs are visually consistent without changing their dimensions or autocomplete behavior. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea, select, .setting-input, .search-box, .search-input, .tool-search,
.warning-form input, .warning-form textarea, .field input, .field textarea, .field select {
  border: 1px solid var(--dh-line);
  border-radius: 12px;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):focus,
textarea:focus, select:focus, .setting-input:focus, .search-box:focus,
.search-input:focus, .tool-search:focus {
  border-color: rgba(129,140,248,.86) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}
input[type="checkbox"], input[type="radio"] { accent-color: #818cf8; }
::placeholder { color: #8188a7; opacity: 1; }

/* Popups, dropdowns and overlays — only the popup surface is styled, not the page behind it. */
.modal-box, .modal-content, .modal-card, .popup, .popup-content,
.confirm-modal, .dialog, .account-menu, .dropdown-menu, .context-menu,
.popover, [role="dialog"], dialog[open], .toast, .notification,
.confirmation-popup, .settings-popup {
  border: 1px solid rgba(177,184,255,.19);
  border-radius: 18px;
  box-shadow: 0 24px 75px rgba(0,0,0,.40), inset 0 1px rgba(255,255,255,.035);
}
.modal-box, .modal-content, .modal-card, .popup-content, .confirm-modal,
.dialog, [role="dialog"], dialog[open], .confirmation-popup, .settings-popup {
  background-color: #0d1127;
  color: #f5f6ff;
}
.dropdown-menu, .context-menu, .popover, .account-menu {
  background-color: rgba(12,13,28,.98);
}
.account-menu a, .account-menu button, .dropdown-menu a, .context-menu button {
  border-radius: 9px;
}
.modal-backdrop, .popup-backdrop, .modal-overlay {
  /* Preserve each page's existing overlay tint and blur. */
  color: inherit;
}

/* Tables, code fields and media controls get cleaner edges without changing functionality. */
table { border-collapse: separate; border-spacing: 0; }
thead th, th { color: #c9cdf0; }
td, th { border-color: var(--dh-line-soft); }
pre, code, .output, .tool-output, .code-editor, .editor {
  border-color: var(--dh-line-soft);
  border-radius: 12px;
}
video, iframe { border-radius: 12px; }
a { text-underline-offset: 4px; }
a:hover { text-decoration-color: rgba(196,181,253,.75); }
hr { border-color: var(--dh-line-soft); }

/* Keep every page's own background, spacing, responsive grids and sticky/fixed positioning. */
@media (max-width: 700px) {
  .card, .panel, .tool-card, .feature-card, .settings-card, .settings-section,
  .content-card, .auth-card, .project, .file-card, .video-card, .post-card,
  .dashboard-card, .workspace-card, .editor-panel, .hero-card {
    border-radius: 15px;
  }
}



/* === DougHub homepage visual language: final cross-page polish ===
   Shared by every non-homepage page. Keeps page-specific backgrounds, layouts,
   game mechanics and existing JavaScript intact while unifying the glass UI. */
:root {
  color-scheme: dark;
  --dh-bg-deep: #02040a;
  --dh-glass-1: rgba(13, 17, 39, .82);
  --dh-glass-2: rgba(17, 21, 48, .92);
  --dh-glass-border: rgba(177, 184, 255, .14);
  --dh-glass-highlight: rgba(255,255,255,.045);
  --dh-glow-indigo: rgba(99,102,241,.18);
  --dh-glow-purple: rgba(168,85,247,.16);
  --dh-round-xl: 26px;
  --dh-round-lg: 20px;
  --dh-round-md: 13px;
}

/* Consistent type and readable text contrast. Do not replace individual page backgrounds. */
body {
  color: #f5f6ff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .page-title, .section-title, .content-title {
  color: #f5f6ff;
  letter-spacing: -.035em;
}
p, .subtitle, .description, .muted, .help-text, .section-subtitle, small {
  text-wrap: pretty;
}
::selection { background: rgba(129,140,248,.38); color: #fff; }

/* Header bars and navigation use the same subtle blurred glass as the homepage. */
header, .topbar, .top-bar, .navbar, .app-header, .site-header, .main-header,
nav[aria-label], .toolbar, .page-toolbar {
  border-color: rgba(177,184,255,.12);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
.nav a, .nav-link, nav a, .sidebar a, .side-nav a {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.nav a:hover, .nav-link:hover, nav a:hover, .sidebar a:hover, .side-nav a:hover {
  color: #e3ddff;
}

/* Glass surfaces: rich navy layers, fine borders, restrained inner highlights. */
.card, .panel, .tool-card, .game-card, .feature-card, .stat-card,
.settings-card, .settings-section, .section-card, .content-card, .auth-card,
.project, .file-card, .video-card, .post-card, .message-card, .setting-card,
.dashboard-card, .workspace-card, .editor-panel, .sidebar-card, .tool-panel,
.content-panel, .main-card, .app-panel, .hero-card, .admin-event-card,
.admin-schedule-card, .audit-card, .moderation-card, .feedback-section,
.tool-output, .output-panel, .result-card, .profile-card, .user-card,
.mail-card, .conversation-card, .empty-state, .feature-panel, .workspace,
.settings-panel, .auth-panel, .form-card {
  color: #f5f6ff;
  border-color: rgba(177,184,255,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.025);
}
.card, .panel, .tool-card, .feature-card, .stat-card, .settings-card,
.settings-section, .section-card, .content-card, .auth-card, .project,
.file-card, .video-card, .post-card, .message-card, .setting-card,
.dashboard-card, .workspace-card, .editor-panel, .sidebar-card, .tool-panel,
.content-panel, .main-card, .app-panel, .hero-card, .admin-event-card,
.admin-schedule-card, .audit-card, .moderation-card, .feedback-section,
.result-card, .profile-card, .user-card, .mail-card, .conversation-card,
.feature-panel, .settings-panel, .auth-panel, .form-card {
  background-color: rgba(13,17,39,.78);
  border-radius: var(--dh-round-lg);
}
.card:hover, .tool-card:hover, .feature-card:hover, .project:hover,
.file-card:hover, .video-card:hover, .post-card:hover, .game-card:hover {
  border-color: rgba(139,132,255,.36);
  box-shadow: 0 20px 55px rgba(0,0,0,.24), 0 0 24px rgba(99,102,241,.055);
}

/* Buttons: quiet glass by default, strong indigo-violet gradient for primary actions.
   Preserve danger, success, close, icon, nav and game-specific button states. */
button:not(:disabled):not(.primary):not(.btn-primary):not(.primary-button):not(.cta):not(.save-button):not(.update-button):not(.upload-button):not(.hero-create-button):not(.compose-button):not(.danger):not(.delete):not(.delete-button):not(.ban-button):not(.logout):not(.logout-button):not(.close):not(.close-button):not(.icon-button):not(.nav-link):not(.nav-button):not(.slider-arrow):not(.community-slider-arrow):not(.success):not(.success-button):not(.green):not(.buy-button):not(.upgrade-button):not(.game-control):not([class*="danger"]):not([class*="delete"]),
input[type="button"]:not(.primary):not(.btn-primary):not([class*="danger"]),
input[type="reset"],
.button:not(.primary):not(.btn-primary):not(.primary-button):not(.danger):not(.delete):not([class*="danger"]),
.btn:not(.primary):not(.btn-primary):not(.danger):not(.delete):not([class*="danger"]),
a.button:not(.primary):not(.btn-primary):not(.danger):not(.delete) {
  color: #f3f2ff;
  background: linear-gradient(135deg, rgba(99,102,241,.18), rgba(168,85,247,.10));
  border: 1px solid rgba(129,140,248,.27);
  border-radius: 12px;
}
button:not(:disabled):not(.danger):not(.delete):not([class*="danger"]):not([class*="delete"]):hover,
input[type="button"]:not(:disabled):hover,
input[type="reset"]:not(:disabled):hover,
.button:hover, .btn:hover, a.button:hover, a.btn:hover {
  border-color: rgba(167,139,250,.62);
  box-shadow: 0 9px 25px rgba(99,102,241,.13);
}
button.primary, button.btn-primary, button.primary-button, button.cta,
a.primary, a.btn-primary, a.primary-button, a.cta,
input[type="submit"], .save-button, .update-button, .upload-button,
.hero-create-button, .compose-button {
  color: #fff;
  background: linear-gradient(135deg,#6366f1,#8b5cf6);
  border: 1px solid rgba(196,181,253,.3);
  box-shadow: 0 10px 30px rgba(99,102,241,.22);
}
button:disabled, input:disabled, select:disabled, textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Search, form controls, text areas and selects should never fall back to glaring white. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
textarea, select, .search-box, .search-input, .tool-search,
.setting-input, .field input, .field textarea, .field select {
  color: #f5f6ff;
  background-color: rgba(5,7,19,.78);
  border: 1px solid rgba(151,160,230,.2);
  border-radius: 12px;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(129,140,248,.82);
  box-shadow: 0 0 0 3px rgba(99,102,241,.14);
  outline: none;
}
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: #818cf8; }
input[type="file"] { color: #c8cbe0; }
::placeholder { color: #858cab; opacity: 1; }

/* Dialogs, dropdowns and menus match the dark glass surfaces. */
.modal-box, .modal-content, .modal-card, .popup, .popup-content,
.confirm-modal, .dialog, .account-menu, .dropdown-menu, .context-menu,
.popover, [role="dialog"], dialog[open], .toast, .notification,
.confirmation-popup, .settings-popup, .menu-dropdown {
  color: #f5f6ff;
  background: rgba(13,17,39,.97);
  border: 1px solid rgba(177,184,255,.19);
  border-radius: 18px;
  box-shadow: 0 24px 75px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.035);
}
.account-menu a, .account-menu button, .dropdown-menu a,
.context-menu button, .menu-dropdown a, .menu-dropdown button {
  color: #e6e7ff;
  border-radius: 10px;
}
.account-menu a:hover, .account-menu button:hover,
.dropdown-menu a:hover, .context-menu button:hover,
.menu-dropdown a:hover, .menu-dropdown button:hover {
  background: rgba(99,102,241,.16);
}

/* Tables, editors, outputs, media and dividers stay inside the shared design. */
table { border-color: rgba(177,184,255,.12); }
th { color: #c9cdf0; }
td, th { border-color: rgba(177,184,255,.12); }
pre, code, .output, .tool-output, .code-editor, .editor, .editor-panel {
  border-color: rgba(177,184,255,.13);
}
video, iframe { border-radius: 14px; }
hr { border-color: rgba(177,184,255,.12); }
:focus-visible { outline: 2px solid rgba(165,180,252,.95); outline-offset: 3px; }

/* Keep touch targets and panels comfortable on smaller screens without changing layout logic. */
@media (max-width: 700px) {
  .card, .panel, .tool-card, .feature-card, .settings-card, .settings-section,
  .content-card, .auth-card, .project, .file-card, .video-card, .post-card,
  .dashboard-card, .workspace-card, .editor-panel, .hero-card, .form-card {
    border-radius: 16px;
  }
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  textarea, select { max-width: 100%; }
}


/* DougHub shared theme tokens and consistent controls.
   Page layouts remain owned by each page; colors and common surfaces are centralized here. */
html[data-dh-theme] {
  --dh-bg: var(--bg, var(--season-bg, #050611));
  --dh-panel: var(--panel, var(--season-panel, rgba(14,18,41,.82)));
  --dh-panel-raised: var(--panel2, var(--season-panel, #11152b));
  --dh-accent: var(--indigo, var(--season-accent, #6366f1));
  --dh-accent-2: var(--purple, var(--season-accent2, #a855f7));
  --dh-line: var(--line, var(--season-line, rgba(177,184,255,.14)));
  --dh-muted-text: var(--muted, var(--season-muted, #a4abc7));
}
html[data-dh-theme="custom"] body {
  background-color: var(--dh-bg) !important;
  background-image: radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--dh-accent) 18%, transparent), transparent 39%),
                    radial-gradient(ellipse at 94% 14%, color-mix(in srgb, var(--dh-accent-2) 14%, transparent), transparent 34%) !important;
}
html[data-dh-theme="custom"] :is(header,.top,.topbar,.top-bar,.navbar,.app-header) {
  border-color: var(--dh-line) !important;
  background-color: color-mix(in srgb, var(--dh-bg) 88%, transparent) !important;
}
html[data-dh-theme="custom"] :is(button,.btn,.button,[role="button"],.primary,.primary-button,.update-button,.send-button) {
  border-color: color-mix(in srgb, var(--dh-accent) 38%, var(--dh-line));
}
html[data-dh-theme="custom"] :is(.card,.panel,.tool-card,.game-card,.feature-card,.stat-card,.settings-card,.section-card,.content-card,.post-card,.message-card,.workspace-card,.editor-panel,[class*="modal"],[class*="popup"],[class*="drawer"]) {
  border-color: var(--dh-line);
}
html[data-dh-theme="custom"] :is(a:hover,button:hover:not(:disabled),.nav a:hover) { color: var(--dh-accent) !important; }
html[data-dh-theme="custom"] :is(input,textarea,select) { accent-color: var(--dh-accent); }