/* Shared deep red dashboard skin drawn from the public index page. */
:root {
  --accent: #7f1d1d;
  --accent-hover: #6b1a20;
  --accent-press: #5b1420;
  --accent-ink: #681920;
  --accent-soft: #fff0ed;
  --accent-line: #dfb7b3;
  --accent-grad: linear-gradient(135deg, #7f1d1d, #5b1420);
  --bg: #fff8f5;
  --surface: #fff;
  --surface-2: #fffaf8;
  --surface-3: #fbf1ee;
  --dark: #251316;
  --border: #ead8d5;
  --border-strong: #dec9c7;
  --text: #251316;
  --text-soft: #584347;
  --muted: #765e61;
  --muted-2: #9b8183;
  --ring: 0 0 0 1px var(--accent), 0 0 0 4px rgba(127, 29, 29, .16);
  --shadow-card: 0 2px 8px rgba(91, 20, 32, .05), 0 12px 32px rgba(91, 20, 32, .06);
  --shadow-pop: 0 20px 45px rgba(37, 19, 22, .16);
  --radius: 14px;
  --radius-lg: 20px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body { background: var(--bg); }
::selection { background: var(--accent); color: #fff; }

.sidebar {
  width: 260px;
  background: #fffaf8;
  border-right-color: var(--border);
  padding: 18px 12px 28px;
  gap: 14px;
}
.sidebar-brand { padding: 6px 12px 18px; border-bottom: 1px solid var(--border); }
.brand-logo { height: 36px; max-width: 190px; filter: none; opacity: 1; }
.topbar-logo {
  background: url("../wordflow-logo-red.svg") center / contain no-repeat;
}
.topbar-logo img { visibility: hidden; }
.sidebar-nav { gap: 4px; padding: 0 2px; }
.sidebar-nav > .nav-group,
.sidebar-nav > .nav-item { margin-bottom: 2px; }
.sidebar-nav > .nav-group > summary,
.sidebar-nav > .nav-item {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.sidebar .sidebar-nav > .nav-group.has-active > summary {
  background: var(--accent-soft);
  border-color: #f0d6d2;
  color: var(--accent);
}
.sidebar .sidebar-nav > .nav-group.has-active > summary .lead,
.sidebar .sidebar-nav > .nav-group.has-active > summary .caret { color: var(--accent); }
.sidebar-nav > .nav-group > summary:hover,
.sidebar-nav > .nav-item:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.sidebar-nav > .nav-group > summary:hover i,
.sidebar-nav > .nav-item:hover i { color: var(--accent); }
.sidebar .nav-sub {
  margin-top: 6px;
  margin-bottom: 8px;
  border-left-color: #e9d4d0;
}
.sidebar .nav-group.has-active > .nav-sub { border-left-color: var(--accent-line); }
.sidebar .nav-sub .nav-sub { margin-top: 2px; margin-bottom: 4px; }
.sidebar .nav-sub .nav-group > summary,
.sidebar .nav-sub .nav-item {
  min-height: 34px;
  color: var(--text-soft);
  border-radius: 8px;
}
.sidebar .nav-sub .nav-group[open] > summary { color: var(--accent-ink); background: #fff4f0; }
.sidebar .nav-sub .nav-group[open] > summary .caret { color: var(--accent); }
.sidebar .nav-sub .nav-group > summary:hover,
.sidebar .nav-sub .nav-item:hover { background: #fff1ed; color: var(--accent); }
.sidebar .nav-item.active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.sidebar .nav-item:hover { padding-left: 11px; }
.sidebar .nav-sub .nav-item:hover { padding-left: 10px; }
.sidebar .sidebar-nav > .nav-item[href$="missions.html"] {
  position: relative;
  margin-top: 18px;
}
.sidebar .sidebar-nav > .nav-item[href$="missions.html"]::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}
.sidebar :is(a, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Generate: compact three-level path from the current tool to its parent. */
.sidebar .generate-nav > summary {
  min-height: 46px;
  background: var(--accent-soft);
  border: 1px solid #f0d6d2;
  color: var(--accent);
}
.sidebar .generate-nav > summary .lead {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -3px;
  border-radius: 8px;
  background: #f7ded8;
  color: var(--accent);
}
.sidebar .generate-nav > .nav-sub {
  margin: 8px 0 10px 24px;
  padding-left: 12px;
  border-left: 2px solid var(--accent-line);
}
.sidebar .generate-nav > .nav-sub > .nav-group > summary,
.sidebar .generate-nav > .nav-sub > .nav-item {
  min-height: 36px;
  padding: 7px 10px;
  font-size: 13.5px;
  font-weight: 600;
}
.sidebar .generate-nav > .nav-sub > .nav-group.has-active > summary {
  background: #fff3ef;
  color: var(--accent);
}
.sidebar .generate-nav > .nav-sub > .nav-group.has-active > summary .caret {
  color: var(--accent);
}
.sidebar .generate-nav .nav-group > .nav-sub {
  margin: 3px 0 7px 8px;
  padding-left: 9px;
  border-left: 1px solid var(--border);
}
.sidebar .generate-nav .nav-group.has-active > .nav-sub {
  border-left-color: var(--accent-line);
}
.sidebar .generate-nav .nav-group > .nav-sub > .nav-item {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.35;
}
.sidebar .generate-nav .nav-group > .nav-sub > .nav-item:hover { padding-left: 10px; }
.sidebar .generate-nav .nav-item.active {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  color: var(--accent);
}
.sidebar .generate-nav > .nav-sub > a[href$="godlike.html"] { margin-top: 7px; }
.sidebar .generate-nav > summary .caret,
.sidebar .generate-nav .nav-group > summary .caret { transform: rotate(-90deg); }
.sidebar .generate-nav[open] > summary .caret,
.sidebar .generate-nav .nav-group[open] > summary .caret { transform: rotate(0); }

.topbar {
  background: rgba(255, 250, 248, .94) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 5px 22px rgba(91, 20, 32, .045);
}
.topbar-title h1 { color: var(--text); letter-spacing: -.035em; }
.topbar-credits, .profile-menu > summary, .nav-burger, .side-collapse-btn {
  background: #fff;
  border-color: var(--border);
}
.nav-burger:hover, .side-collapse-btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.nav-burger:hover i, .side-collapse-btn:hover i { color: var(--accent); }
.topbar-credits { background: #fff7f3; }
.topbar-credits i, .topbar-credits b { color: var(--accent); }
.profile-menu[open] > summary, .profile-menu > summary:hover { border-color: var(--accent-line); }
.menu-panel { border-color: var(--border); background: #fffdfb; }
.menu-panel .menu-head { border-bottom-color: var(--border); }
.menu-panel a:hover { background: var(--accent-soft); color: var(--accent); }
.menu-panel a:hover i { color: var(--accent); }
.menu-panel a.upgrade { background: var(--accent); color: #fff; }
.menu-panel a.upgrade i { color: #fff; }
.menu-panel a.upgrade:hover { background: var(--accent-press); }
.menu-panel a.danger:hover, .menu-panel a.danger:hover i { color: var(--neg); }
@media (max-width: 960px) {
  .sidebar { width: min(300px, 85vw); }
  #nav-toggle:checked ~ .app-shell .nav-scrim { background: rgba(37, 19, 22, .46); }
}

.app-content { max-width: 1440px; }
.card, .analyzer_form, .mode-overview-box {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card:hover, .mode-overview-box:hover {
  box-shadow: 0 10px 32px rgba(91, 20, 32, .10) !important;
}
.card-header { background: #fffaf8 !important; border-bottom-color: var(--border) !important; }
.card-title { color: var(--text); font-size: 17px; }
.card-header:has(.card-title) { border-left: 4px solid var(--accent); }
.card-body { color: var(--text-soft); }
.mode-overview-box { padding: 0 !important; }
.mode-overview-box::before { display: none; }
.mode-overview-header {
  margin: 0;
  padding: 20px 24px;
  background: linear-gradient(135deg, #7f1d1d 0%, #5b1420 100%);
  color: #fff;
}
.mode-overview-icon {
  background: rgba(255, 255, 255, .15);
  border: 1px solid rgba(255, 255, 255, .25);
}
.mode-overview-title { color: #fff; font-size: 20px; letter-spacing: -.025em; }
.mode-overview-content { padding: 20px 24px 24px; }
.mode-overview-section { background: #fff9f6; border-color: var(--border); }
.mode-overview-section-title.what-it-does i { color: var(--accent); }
.mode-overview-section-title.when-to-use i { color: #9f4b36; }
.mode-overview-section-title.why-use-it i { color: #aa6940; }

.opt-section { background: #fffaf8; border-color: var(--border); }
.opt-section:hover { border-color: var(--accent-line); }
.opt-section-title { color: var(--text); }
.opt-section-title i { color: var(--accent); background: var(--accent-soft); }
.learn-ptr { border-color: var(--border); border-left-color: var(--accent); background: #fff7f3; }
.learn-ptr:hover { border-color: var(--accent-line); border-left-color: var(--accent); box-shadow: 0 6px 20px rgba(127, 29, 29, .1); }
.learn-ptr-ic { background: var(--accent-grad); }
.field-tooltip > i { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.field-tooltip .tooltip-text { background: var(--dark) !important; color: #fff8f5 !important; }
.credit-pill { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
.credit-pill-hp { color: #9b5228; background: #fff2e8; border-color: #ebcdb4; }
.app-content label[style*="color:#404040"] { color: var(--text-soft) !important; }
#infographic-style-wrap { background: #fff8f5 !important; border-color: var(--border) !important; }
#infographic-style-wrap label { color: var(--text-soft) !important; }
#infographic_brand_color_picker { border-color: var(--border-strong) !important; }

.form-control, .input-default, .default-select, input[type="text"], input[type="number"], select, textarea {
  border-color: var(--border-strong);
}
input.form-control, select.form-control, textarea.form-control, .form-control {
  background: #fffaf8 !important;
  border-color: var(--border-strong) !important;
}
input.form-control:focus, select.form-control:focus, textarea.form-control:focus, .form-control:focus {
  background: #fff !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.btn:not(.btn-primary):not(.btn-danger) { border-color: var(--border-strong); }
.btn:not(.btn-primary):not(.btn-danger):hover { border-color: var(--accent-line); color: var(--accent); }
.btn:focus-visible, .btn-outline-primary:focus-visible, .menu-panel a:focus-visible,
.tb-notif > summary:focus-visible, .profile-menu > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.btn-primary {
  background: var(--accent-grad) !important;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(127, 29, 29, .22) !important;
}
.btn-primary:hover { color: #fff; box-shadow: 0 10px 23px rgba(127, 29, 29, .3) !important; }
.btn-outline-primary { background: #fff; color: var(--accent); border-color: var(--accent-line); }
.btn-outline-primary:hover { background: var(--accent-soft); color: var(--accent-press); }

.credit-estimate-bar {
  background: #fff7f3;
  border-color: var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
}
.credit-estimate-icon { background: var(--accent-soft); color: var(--accent); }
.credit-estimate-item { border-color: var(--border); color: var(--text-soft); }
.credit-estimate-item strong { color: var(--accent); }
.credit-estimate-total { color: var(--text); }
.credit-estimate-label { color: var(--muted); }
.credit-estimate-human { color: #9b5228; }

.tb-notif > summary { color: var(--text-soft) !important; }
.tb-notif > summary:hover, .tb-notif[open] > summary { background: var(--accent-soft) !important; color: var(--accent) !important; }
.tb-notif-panel { border-color: var(--border) !important; box-shadow: var(--shadow-pop) !important; }
.tb-notif-head, .tb-notif-item { border-bottom-color: var(--border) !important; }
.tb-notif-item.unread { background: #fff7f3 !important; }
.tb-notif-ic { background: var(--accent-soft) !important; color: var(--accent) !important; }
.tb-notif-allread, .tb-notif-link { color: var(--accent) !important; }
.tb-notif-allread:hover, .tb-notif-link:hover { color: var(--accent-press) !important; }
.tb-notif-badge { background: var(--accent) !important; }
.tb-notif-head strong, .tb-notif-title { color: var(--text) !important; }
.tb-notif-text { color: var(--text-soft) !important; }
.tb-notif-when, .tb-notif-empty { color: var(--muted) !important; }
.tb-notif-x:hover { color: var(--accent) !important; }

.notification.info { background: #fff0ed; border-left-color: var(--accent); color: var(--accent-ink); }
.notification.warning { background: #fff5e9; }
body > [role="status"][style*="backdrop-filter"] {
  background: #fffaf8 !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-pop) !important;
  color: var(--text) !important;
}

/* The live-jobs control is rendered by an existing script after page load. */
.job-center-trigger { border-color: var(--border); color: var(--text); box-shadow: var(--shadow-card); }
.job-center-trigger:hover, .job-center-trigger:focus { border-color: var(--accent); }
.job-center-trigger.has-active { background: var(--accent); border-color: var(--accent); }
.job-center-count { background: var(--accent-soft); color: var(--accent); }
.job-center-trigger.has-active .job-center-count { color: var(--accent); }
.job-center-drawer { border-color: var(--border); box-shadow: var(--shadow-pop); }
.job-center-header { border-bottom-color: var(--border); }
.job-center-header h3, .job-center-title { color: var(--text) !important; }
.job-center-refresh, .job-center-close { color: var(--text-soft); background: var(--surface-3); }
.job-center-refresh:hover, .job-center-close:hover { color: var(--accent); background: var(--accent-soft); }
.job-center-item { border-color: var(--border); }
.job-center-item.processing, .job-center-item.pending, .job-center-item.scheduled { border-color: var(--accent-line); background: #fff9f6; }
.job-center-kind { color: var(--accent); }
.job-center-status.processing, .job-center-status.pending, .job-center-status.scheduled { color: var(--accent); background: var(--accent-soft); }
.job-center-action { border-color: var(--border-strong); color: var(--text-soft); }
.job-center-action:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }
.job-center-action.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.job-center-action.primary:hover { background: var(--accent-press); }

/* Only the first DataTables column has a sort control. */
.app-content table.dataTable thead th:first-child:is(.sorting, .sorting_asc, .sorting_desc) {
  position: relative;
  padding-right: 42px !important;
  background-image: none !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}
.app-content table.dataTable thead th:first-child:is(.sorting, .sorting_asc, .sorting_desc)::before {
  display: none !important;
}
.app-content table.dataTable thead th:first-child:is(.sorting, .sorting_asc, .sorting_desc)::after {
  content: "\2195" !important;
  position: absolute;
  top: 50%;
  right: 10px;
  width: 23px;
  height: 23px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 1px solid var(--accent-line);
  border-radius: 7px;
  background: #fff;
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  opacity: 1 !important;
  pointer-events: none;
}
.app-content table.dataTable thead th:first-child.sorting_asc::after { content: "\2191" !important; }
.app-content table.dataTable thead th:first-child.sorting_desc::after { content: "\2193" !important; }
.app-content table.dataTable thead th:first-child:is(.sorting, .sorting_asc, .sorting_desc):hover::after,
.app-content table.dataTable thead th:first-child:is(.sorting, .sorting_asc, .sorting_desc):focus-visible::after {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.app-content table.dataTable thead th:not(:first-child) {
  background-image: none !important;
  cursor: default;
}
.app-content table.dataTable thead th:not(:first-child)::before,
.app-content table.dataTable thead th:not(:first-child)::after {
  display: none !important;
}

.app-content a[style*="color:blue"],
.app-content a[style*="color: blue"],
.app-content a[style*="color:#0d6efd"],
.app-content small[style*="color:#0d6efd"] { color: var(--accent) !important; }
.app-content i[style*="color: #007bff"] { color: var(--accent) !important; }

@media (max-width: 768px) {
  .mode-overview-header { padding: 17px 16px; }
  .mode-overview-content { padding: 16px; }
  .mode-overview-title { font-size: 17px; }
}