/* ═════════════════════════════════════════════════════════════════════════
 * RONBUN Journal Intelligence — Backend Theme
 * Comprehensive Critical Classicism override for OJS 3.5 Vue-based backend.
 *
 * Covers every major class from /var/www/ojs/styles/build.css:
 *   • App chrome   (.app__header / .app__body / .app__main / .app__page*)
 *   • Section headers (.pkpHeader*)
 *   • Navigation (.pkp_navigation_sidebar, legacy sidebar, .app__contexts)
 *   • Buttons (.pkpButton and modifiers)
 *   • Forms (.pkpForm, .pkpFormField and all variants incl. richTextarea,
 *           select, options, color, pubid, metadata, etc.)
 *   • Tables (.pkpTable and related)
 *   • Dropdowns (.pkpDropdown and sections)
 *   • Modals / dialogs (.pkpModal, .modal, .pkpActions, .pkp_modal)
 *   • Tabs (.pkpTabs / .pkpTab)
 *   • Steps (.pkpSteps — submission wizard)
 *   • Workflow (.pkpWorkflow)
 *   • Dashboard stats (.pkpStats and variants)
 *   • Badges (.pkpBadge and variants)
 *   • Notifications (.pkpNotification)
 *   • Filters (.pkpFilter)
 *   • Autosuggest (.pkpAutosuggest)
 *   • Date ranges (.pkpDateRange)
 *   • Pagination (.pkpPagination)
 *   • Icons + spinners (.pkpIcon / .pkpSpinner)
 *   • Legacy pkp_* classes
 *
 * Design tokens: v2.1 §3 colors, §4 typography, §5 spacing.
 *
 * Load order: AFTER core/layout/components so this file wins specificity.
 * ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* v2.1 §3 background */
  --fe-void: #0C0B0F;
  --fe-void-warm: #100F13;
  --fe-surface: #141218;
  --fe-surface-2: #1A1820;
  --fe-surface-3: #201E28;
  --fe-surface-elev: #252230;

  /* Text */
  --fe-primary: #DDD9D1;
  --fe-secondary: #B8B4AC;
  --fe-tertiary: #8A877F;
  --fe-ghost: #4A4843;

  /* Accents */
  --fe-burgundy: #7A2D3A;
  --fe-burgundy-lt: #A04050;
  --fe-burgundy-dim: #4E1D26;
  --fe-gold: #C8A96E;
  --fe-gold-dim: #8A7448;

  /* Semantic */
  --fe-success: #6B9F7A;
  --fe-info: #6B8AA8;
  --fe-warning: #C8A96E;
  --fe-error: #A04050;

  /* Rules */
  --fe-rule: rgba(221, 217, 209, 0.06);
  --fe-rule-md: rgba(221, 217, 209, 0.12);
  --fe-rule-strong: rgba(221, 217, 209, 0.22);
  --fe-rule-accent: rgba(122, 45, 58, 0.30);

  /* Typography */
  --font-display: "Cinzel", "Times New Roman", serif;
  --font-subtitle: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-ui: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-body-ja: "Noto Sans JP", "游ゴシック", "Yu Gothic", sans-serif;
  --font-body-zh: "Noto Sans SC", "PingFang SC", sans-serif;
  --font-body-ko: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-normal: 300ms;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 1. ROOT RESET — Apply dark aesthetic to every backend page body
 * ═════════════════════════════════════════════════════════════════════════ */

body.pkp_page_dashboard,
body.pkp_page_workflow,
body.pkp_page_submissions,
body.pkp_page_submission,
body.pkp_page_management,
body.pkp_page_stats,
body.pkp_page_tools,
body.pkp_page_admin,
body.pkp_page_manageIssues,
body.pkp_page_settings,
body.pkp_page_reviewer,
body.pkp_page_user,
body.pkp_page_payments,
body.pkp_page_invitation,
body.pkp_page_invitations {
  background: var(--fe-void) !important;
  color: var(--fe-primary) !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Main scroll container */
.pkp_structure_page,
body.pkp_page_dashboard .app,
body.pkp_page_workflow .app,
body.pkp_page_submissions .app,
body.pkp_page_management .app {
  background: var(--fe-void) !important;
  color: var(--fe-primary);
}

/* ═════════════════════════════════════════════════════════════════════════
 * 2. APP CHROME — Header / Body / Main / Sidebar
 * ═════════════════════════════════════════════════════════════════════════ */

/* Top header bar (journal brand + actions) */
.app__header,
.pkp_head_wrapper {
  background: linear-gradient(180deg, var(--fe-void) 0%, var(--fe-surface) 100%) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  backdrop-filter: blur(12px);
  padding: 16px 32px !important;
  min-height: 72px;
  box-shadow: 0 1px 0 rgba(200,169,110,0.08);
}

.app__contextTitle,
.pkp_site_name__title,
.pkp_site_name a {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fe-primary) !important;
  text-decoration: none !important;
}

.app__contextTitle::before {
  content: "RONBUN ◆ ";
  font-family: var(--font-display);
  font-size: 0.72em;
  color: var(--fe-gold);
  letter-spacing: 0.24em;
  margin-right: 4px;
}

.app__contexts {
  background: transparent;
}

.app__headerActions,
.app__headerAction {
  color: var(--fe-secondary) !important;
}

.app__headerAction {
  padding: 8px 12px !important;
  border-radius: 0 !important;
  transition: all var(--dur-fast) var(--ease-out);
}

.app__headerAction:hover {
  background: rgba(122, 45, 58, 0.12) !important;
  color: var(--fe-primary) !important;
}

.app__headerAction svg,
.app__headerAction .fa {
  color: currentColor !important;
}

/* Tasks dropdown (bell icon) */
.app__tasksDropdown {
  background: var(--fe-surface);
  border: 1px solid var(--fe-rule-md);
  color: var(--fe-primary);
}

/* Main body wrapper */
.app__body,
.pkp_structure_main {
  background: var(--fe-void) !important;
  color: var(--fe-primary);
}

/* Main content area */
.app__main,
.pkp_content_main,
#pkp_content_main {
  background: var(--fe-void) !important;
  color: var(--fe-primary);
  padding: 32px !important;
}

/* Individual content panel */
.app__contentPanel,
.app__page {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md) !important;
  border-radius: 0 !important;
  padding: 32px !important;
  box-shadow: none !important;
  color: var(--fe-primary);
}

/* Page heading (H1) */
.app__pageHeading,
.pkp_page_title h1,
.pkp_page_content h1 {
  font-family: var(--font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: var(--fe-primary) !important;
  margin: 0 0 8px !important;
  text-transform: uppercase;
}

.app__pageDescription {
  font-family: var(--font-subtitle) !important;
  font-style: italic;
  font-size: 1rem;
  color: var(--fe-tertiary) !important;
  margin-bottom: 24px !important;
}

/* Breadcrumbs */
.app__breadcrumbs {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--fe-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.app__breadcrumbs li {
  display: flex;
  align-items: center;
}
.app__breadcrumbs a {
  color: var(--fe-secondary) !important;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.app__breadcrumbs a:hover {
  color: var(--fe-burgundy-lt) !important;
}
.app__breadcrumbsSeparator {
  margin: 0 6px;
  color: var(--fe-ghost);
  font-weight: 100;
}

/* Return header (back button) */
.app__returnHeader,
.app__returnHeaderLink {
  color: var(--fe-secondary) !important;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 0 !important;
}
.app__returnHeader:hover,
.app__returnHeaderLink:hover {
  color: var(--fe-burgundy-lt) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 3. NAVIGATION SIDEBAR
 * ═════════════════════════════════════════════════════════════════════════ */

.pkp_navigation_sidebar,
.app__sidebar,
#navigationUserWrapper,
.app__nav {
  background: var(--fe-void-warm) !important;
  border-right: 1px solid var(--fe-rule-md) !important;
  padding: 20px 0 !important;
  min-width: 240px;
}

.pkp_navigation_sidebar ul,
.app__sidebar ul,
.pkp_nav_list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pkp_navigation_sidebar li,
.app__sidebar li {
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_navigation_sidebar a,
.app__sidebar a,
.app__nav a,
.pkp_nav_list a {
  display: block !important;
  padding: 12px 24px !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  color: var(--fe-secondary) !important;
  text-decoration: none !important;
  border-left: 2px solid transparent !important;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pkp_navigation_sidebar a:hover,
.app__sidebar a:hover,
.app__nav a:hover {
  background: rgba(122, 45, 58, 0.1) !important;
  color: var(--fe-primary) !important;
  border-left-color: var(--fe-burgundy-lt) !important;
}

.pkp_navigation_sidebar .current a,
.pkp_navigation_sidebar li.current a,
.app__sidebar .active a,
.app__nav a.router-link-active {
  background: rgba(122, 45, 58, 0.18) !important;
  color: var(--fe-primary) !important;
  border-left-color: var(--fe-burgundy) !important;
  font-weight: 500 !important;
}

/* Badges next to nav items (e.g. 0 Action Required) */
.pkp_navigation_sidebar .badge,
.app__sidebar .badge,
.app__sidebar .pkpBadge {
  background: var(--fe-surface-3) !important;
  color: var(--fe-secondary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-size: 10px !important;
  margin-right: 8px;
}
.pkp_navigation_sidebar .badge--isHighlighted,
.app__sidebar .pkpBadge--isWarnable {
  background: var(--fe-burgundy) !important;
  color: #FFFFFF !important;
  border-color: var(--fe-burgundy) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 4. TYPOGRAPHY (in-content)
 * ═════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  color: var(--fe-primary);
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.app__contentPanel h1,
.app__page h1,
.pkpHeader__title {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  color: var(--fe-primary) !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--fe-rule-md);
}

.app__contentPanel h2,
.pkpHeader h2 {
  font-family: var(--font-subtitle) !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--fe-primary) !important;
  margin: 24px 0 12px !important;
}

.app__contentPanel h3 {
  font-family: var(--font-subtitle) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  color: var(--fe-gold) !important;
  margin: 20px 0 10px !important;
}

p, .app__contentPanel p {
  color: var(--fe-secondary);
  line-height: 1.7;
  font-family: var(--font-subtitle), var(--font-body-ja);
  font-size: 14.5px;
}

a, .app__contentPanel a {
  color: var(--fe-burgundy-lt);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--fe-gold);
  text-decoration: none;
}

em, i {
  font-family: var(--font-subtitle);
  font-style: italic;
}

strong, b {
  color: var(--fe-primary);
  font-weight: 600;
}

code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  background: var(--fe-surface-2);
  padding: 2px 6px;
  border: 1px solid var(--fe-rule-md);
  font-size: 0.92em;
}

hr {
  border: 0;
  border-top: 1px solid var(--fe-rule-md);
  margin: 24px 0;
}

/* pkpHeader component */
.pkpHeader {
  border-bottom: 1px solid var(--fe-rule-md) !important;
  padding-bottom: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.pkpHeader__title {
  color: var(--fe-primary) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.04em !important;
}

.pkpHeader__actions {
  display: flex;
  gap: 8px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 5. BUTTONS (.pkpButton and variants)
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpButton,
button.pkpButton,
.pkp_button,
.cmp_button,
button[type="button"].pkpButton,
button[type="submit"].pkpButton {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  min-height: 36px;
  line-height: 1.2 !important;
  border: 1px solid var(--fe-rule-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fe-primary) !important;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out) !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

.pkpButton:hover,
button.pkpButton:hover,
.pkp_button:hover,
.cmp_button:hover {
  background: rgba(122, 45, 58, 0.12) !important;
  border-color: var(--fe-burgundy) !important;
  color: var(--fe-primary) !important;
  transform: none;
}

.pkpButton:focus,
.pkpButton:focus-visible {
  outline: 2px solid rgba(200, 169, 110, 0.4) !important;
  outline-offset: 2px !important;
}

.pkpButton:active {
  background: rgba(122, 45, 58, 0.18) !important;
}

.pkpButton:disabled,
.pkpButton.isDisabled,
.pkpButton--disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* Primary buttons — Burgundy fill */
.pkpButton.isPrimary,
.pkpButton--primary,
.pkpButton[class*="primary"],
button[type="submit"].pkpButton:not(.isSecondary):not(.isWarnable):not(.isIcon) {
  background: var(--fe-burgundy) !important;
  color: #FFFFFF !important;
  border-color: var(--fe-burgundy) !important;
}

.pkpButton.isPrimary:hover,
.pkpButton--primary:hover,
button[type="submit"].pkpButton:not(.isSecondary):not(.isWarnable):not(.isIcon):hover {
  background: var(--fe-burgundy-lt) !important;
  border-color: var(--fe-burgundy-lt) !important;
}

/* Warnable / destructive (delete, reject) */
.pkpButton.isWarnable,
.pkpButton--warnable,
.pkpButton[class*="warn"] {
  background: transparent !important;
  color: var(--fe-error) !important;
  border-color: var(--fe-error) !important;
}
.pkpButton.isWarnable:hover {
  background: rgba(160, 64, 80, 0.15) !important;
}

/* Link buttons / text-only */
.pkpButton.isLink,
.pkpButton--link,
.pkpButton[class*="link"] {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--fe-burgundy-lt) !important;
  padding: 4px 8px !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
}
.pkpButton.isLink:hover {
  background: transparent !important;
  color: var(--fe-gold) !important;
  text-decoration: underline;
}

/* Icon-only buttons */
.pkpButton.isIcon,
.pkpButton--icon {
  padding: 8px !important;
  min-height: 36px;
  min-width: 36px;
  border-color: var(--fe-rule-md) !important;
}

/* Button group */
.pkpButton__group,
.pkpActions,
.pkp_actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Legacy anchor buttons */
a.pkp_button,
a[class*="pkp_button"],
a.ui-button {
  display: inline-block;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  border: 1px solid var(--fe-rule-strong) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--fe-primary) !important;
  text-decoration: none !important;
  transition: all var(--dur-fast) var(--ease-out);
}
a.pkp_button:hover {
  border-color: var(--fe-burgundy) !important;
  background: rgba(122, 45, 58, 0.12) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 6. FORMS — .pkpForm, .pkpFormField and all variants
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpForm,
.pkp_form,
form {
  background: transparent !important;
  color: var(--fe-primary);
}

.pkpFormPages,
.pkpFormPage {
  background: transparent !important;
  padding: 0;
}

.pkpFormGroup,
fieldset {
  border: 1px solid var(--fe-rule-md) !important;
  border-radius: 0 !important;
  padding: 20px 24px !important;
  margin: 0 0 24px !important;
  background: var(--fe-void-warm) !important;
}

.pkpFormGroup > legend,
legend {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold) !important;
  padding: 0 10px !important;
  margin-left: -10px;
}

/* Every form field */
.pkpFormField,
.pkpFormField--text,
.pkpFormField--richTextarea,
.pkpFormField--select,
.pkpFormField--options,
.pkpFormField--color,
.pkpFormField--metadata {
  margin: 0 0 22px !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Field label */
.pkpFormField__label,
.pkpFormFieldLabel,
label {
  display: block;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--fe-tertiary) !important;
  margin-bottom: 8px !important;
}

.pkpFormField__description,
.pkpFormField__helpButton {
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-style: italic;
  font-size: 0.88rem;
  color: var(--fe-tertiary) !important;
  margin: 4px 0 8px !important;
  line-height: 1.5;
}

/* Text inputs */
.pkpFormField__input,
.pkpFormField--text__input,
.pkpFormField input[type="text"],
.pkpFormField input[type="email"],
.pkpFormField input[type="url"],
.pkpFormField input[type="number"],
.pkpFormField input[type="password"],
.pkpFormField input[type="search"],
.pkpFormField input[type="tel"],
.pkpFormField input[type="date"],
.pkpFormField textarea,
input.pkp_form_text,
textarea.pkp_form_textarea,
input[type="text"].pkpInput {
  background: var(--fe-surface-2) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  border-radius: 0 !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 14px !important;
  padding: 10px 14px !important;
  line-height: 1.5 !important;
  width: 100%;
  box-sizing: border-box;
  box-shadow: none !important;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.pkpFormField__input:focus,
.pkpFormField input:focus,
.pkpFormField textarea:focus,
.pkpFormField select:focus {
  outline: none !important;
  border-color: var(--fe-burgundy) !important;
  background: var(--fe-surface-3) !important;
  box-shadow: 0 0 0 2px rgba(122, 45, 58, 0.15) !important;
}

.pkpFormField__input::placeholder,
.pkpFormField input::placeholder,
.pkpFormField textarea::placeholder {
  color: var(--fe-ghost);
  font-style: italic;
}

/* Select fields */
.pkpFormField--select__input,
.pkpFormField select,
select {
  background: var(--fe-surface-2) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6' fill='%238A877F'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  border-radius: 0 !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 14px !important;
  padding: 10px 38px 10px 14px !important;
  -webkit-appearance: none;
  appearance: none;
}

.pkpFormField--select__input--sizelarge {
  padding: 12px 42px 12px 16px !important;
  font-size: 15px !important;
}

select option {
  background: var(--fe-surface-2) !important;
  color: var(--fe-primary) !important;
}

/* Textarea */
.pkpFormField--richTextarea__control,
.pkpFormField--richTextarea__input,
.tox-edit-area,
.tox-tinymce {
  background: var(--fe-surface-2) !important;
  border: 1px solid var(--fe-rule-md) !important;
  border-radius: 0 !important;
  color: var(--fe-primary) !important;
  min-height: 120px;
  padding: 12px 16px;
}

.pkpFormField--richTextarea__controlFooter,
.pkpFormField--richTextarea__wordLimit {
  background: var(--fe-void-warm);
  border-top: 1px solid var(--fe-rule);
  padding: 6px 12px;
  font-size: 11px;
  color: var(--fe-tertiary);
}

/* Options (radio/checkbox groups) */
.pkpFormField--options__option,
.pkpFormField--options__input,
.pkpFormField--options__legend {
  color: var(--fe-primary);
  font-family: var(--font-ui), var(--font-body-ja);
}

.pkpFormField--options__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--fe-secondary);
  cursor: pointer;
  border-bottom: 1px solid var(--fe-rule);
}
.pkpFormField--options__option:last-child { border-bottom: none; }
.pkpFormField--options__option:hover { color: var(--fe-primary); }

.pkpFormField--options__input input[type="checkbox"],
.pkpFormField--options__input input[type="radio"],
input[type="checkbox"],
input[type="radio"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--fe-rule-strong);
  background: var(--fe-surface-2);
  border-radius: 0;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
input[type="radio"] { border-radius: 50%; }

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--fe-burgundy);
  border-color: var(--fe-burgundy);
}
input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 700;
}
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
}

/* Form errors */
.pkpFormErrors,
.pkpFieldError,
.pkp_form_error {
  color: var(--fe-error) !important;
  font-family: var(--font-subtitle), var(--font-body-ja);
  font-style: italic;
  font-size: 0.9rem;
  margin-top: 6px;
  border-left: 3px solid var(--fe-error);
  padding-left: 10px;
}
.pkpFormErrors__goTo {
  color: var(--fe-burgundy-lt) !important;
  text-decoration: underline;
}

/* Form locales (multilingual toggle) */
.pkpFormLocales,
.pkpForm--hasManyVisibleLocales {
  border-left: 2px solid var(--fe-burgundy);
  padding-left: 12px;
  background: var(--fe-void-warm);
}

.pkpFormLocales__item,
.pkpFormLocales__button {
  background: var(--fe-surface-2) !important;
  color: var(--fe-secondary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-family: var(--font-ui) !important;
  margin-right: 4px;
  cursor: pointer;
}
.pkpFormLocales__button--current,
.pkpFormLocales__item--current {
  background: var(--fe-burgundy) !important;
  color: #FFFFFF !important;
  border-color: var(--fe-burgundy) !important;
}

/* Form page navigation (multi-step form) */
.pkpFormPages__page {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 24px !important;
  margin-bottom: 20px;
}

/* Submit button container */
.pkpFormSubmit,
.pkpForm__footer,
.pkpForm__submit {
  padding-top: 20px;
  border-top: 1px solid var(--fe-rule);
  margin-top: 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 7. TABLES — .pkpTable and legacy tables
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpTable,
table.pkp_listing,
table.listing,
table.pkp_helpers_table,
table {
  background: transparent !important;
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 24px;
  font-family: var(--font-ui), var(--font-body-ja);
  color: var(--fe-primary);
}

.pkpTable th,
table th,
table.pkp_listing thead th {
  background: var(--fe-void-warm) !important;
  color: var(--fe-tertiary) !important;
  font-family: var(--font-ui) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 2px solid var(--fe-rule-strong) !important;
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
}

.pkpTable td,
table td,
table.pkp_listing tbody td {
  color: var(--fe-primary) !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 13.5px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--fe-rule) !important;
  vertical-align: top;
}

.pkpTable tbody tr:hover,
table.pkp_listing tbody tr:hover {
  background: rgba(122, 45, 58, 0.06) !important;
}

.pkpTable tbody tr:last-child td {
  border-bottom: none !important;
}

.pkpTable caption {
  text-align: left;
  padding: 12px 0;
  font-family: var(--font-subtitle);
  font-style: italic;
  color: var(--fe-tertiary);
  font-size: 12px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 8. LISTS — .pkpList, submissionsList
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpList,
.listPanel,
.pkpListPanel {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md);
  color: var(--fe-primary);
}

.pkpList__header,
.listPanel__header {
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule-md);
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fe-tertiary);
}

.pkpList__item,
.listPanel__item,
.pkp_list_item {
  background: transparent !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--fe-rule) !important;
  color: var(--fe-primary) !important;
  transition: background var(--dur-fast) var(--ease-out);
}

.pkpList__item:hover,
.listPanel__item:hover {
  background: rgba(122, 45, 58, 0.05) !important;
}

.pkpList__item:last-child {
  border-bottom: none !important;
}

.pkpList__itemActions,
.pkpList__actions {
  display: flex;
  gap: 8px;
}

/* Submissions list */
.submissionsList,
.submissionsListItem {
  background: var(--fe-surface) !important;
  color: var(--fe-primary);
}

/* ═════════════════════════════════════════════════════════════════════════
 * 9. BADGES — .pkpBadge
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpBadge {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 3px 10px !important;
  background: var(--fe-surface-3) !important;
  color: var(--fe-secondary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  font-family: var(--font-ui) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  white-space: nowrap;
}

.pkpBadge--dot {
  width: 8px;
  height: 8px;
  padding: 0 !important;
  border-radius: 50% !important;
}

.pkpBadge--isPrimary,
.pkpBadge--button {
  background: rgba(122, 45, 58, 0.18) !important;
  border-color: var(--fe-burgundy) !important;
  color: var(--fe-burgundy-lt) !important;
}

.pkpBadge--isSuccess {
  background: rgba(107, 159, 122, 0.15) !important;
  border-color: var(--fe-success) !important;
  color: var(--fe-success) !important;
}

.pkpBadge--isWarnable {
  background: rgba(200, 169, 110, 0.15) !important;
  border-color: var(--fe-gold) !important;
  color: var(--fe-gold) !important;
}

.pkpBadge--submission { color: var(--fe-info) !important; border-color: var(--fe-info) !important; }
.pkpBadge--review { color: var(--fe-gold) !important; border-color: var(--fe-gold) !important; }
.pkpBadge--copyediting { color: var(--fe-burgundy-lt) !important; border-color: var(--fe-burgundy-lt) !important; }
.pkpBadge--production { color: var(--fe-success) !important; border-color: var(--fe-success) !important; }

/* ═════════════════════════════════════════════════════════════════════════
 * 10. DROPDOWNS — .pkpDropdown
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpDropdown {
  position: relative;
}

.pkpDropdown__action {
  background: transparent !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.pkpDropdown__action:hover {
  background: rgba(122, 45, 58, 0.1) !important;
  border-color: var(--fe-burgundy) !important;
}

.pkpDropdown__caret {
  margin-left: 8px;
  color: var(--fe-tertiary);
  transition: transform var(--dur-fast) var(--ease-out);
}
.pkpDropdown--isOpen .pkpDropdown__caret {
  transform: rotate(180deg);
}

.pkpDropdown__content {
  background: var(--fe-surface-2) !important;
  border: 1px solid var(--fe-burgundy) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  padding: 4px 0;
  min-width: 200px;
  color: var(--fe-primary);
}

.pkpDropdown__section {
  padding: 8px 0;
  border-bottom: 1px solid var(--fe-rule);
}
.pkpDropdown__section:last-child { border-bottom: none; }

.pkpDropdown__content a,
.pkpDropdown__content button {
  display: block;
  width: 100%;
  padding: 10px 16px !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 13px !important;
  color: var(--fe-secondary) !important;
  text-align: left;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
.pkpDropdown__content a:hover,
.pkpDropdown__content button:hover {
  background: rgba(122, 45, 58, 0.1) !important;
  color: var(--fe-primary) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 11. MODALS / DIALOGS — .pkpModal, .modal, jqueryui dialog
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpModal,
.modal,
.ui-dialog,
div[role="dialog"] {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-burgundy) !important;
  border-radius: 0 !important;
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(200,169,110,0.1) !important;
  color: var(--fe-primary) !important;
  max-width: 720px;
}

.pkpModal__panel,
.modal-content {
  background: var(--fe-surface) !important;
  border-radius: 0 !important;
  color: var(--fe-primary) !important;
  border: 0 !important;
}

.pkpModal__header,
.modal-header,
.ui-dialog-titlebar {
  background: var(--fe-void) !important;
  border-bottom: 1px solid var(--fe-rule-strong) !important;
  padding: 20px 28px !important;
  border-radius: 0 !important;
}

.pkpModal__title,
.modal-title,
.ui-dialog-title {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--fe-primary) !important;
  margin: 0 !important;
}

.pkpModal__body,
.modal-body {
  background: var(--fe-surface) !important;
  padding: 28px !important;
  color: var(--fe-primary) !important;
  font-family: var(--font-subtitle), var(--font-body-ja);
  font-size: 15px;
  line-height: 1.75;
}

.pkpModal__body p,
.modal-body p {
  color: var(--fe-primary) !important;
  margin-bottom: 16px;
}

.pkpModal__body strong,
.modal-body strong {
  color: var(--fe-gold);
}

.pkpModal__footer,
.modal-footer,
.ui-dialog-buttonpane {
  background: var(--fe-void-warm) !important;
  border-top: 1px solid var(--fe-rule-md) !important;
  padding: 18px 28px !important;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Close button */
.pkpModal__closeButton,
.ui-dialog-titlebar-close,
button.close {
  background: transparent !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-secondary) !important;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  font-size: 18px !important;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.pkpModal__closeButton:hover,
.ui-dialog-titlebar-close:hover {
  background: rgba(122, 45, 58, 0.15) !important;
  border-color: var(--fe-burgundy) !important;
  color: var(--fe-primary) !important;
}

/* Modal backdrop */
.pkpModal__overlay,
.modal-backdrop,
.ui-widget-overlay {
  background: rgba(12, 11, 15, 0.82) !important;
  backdrop-filter: blur(4px);
}

/* ═════════════════════════════════════════════════════════════════════════
 * 12. TABS — .pkpTabs, .pkpTab
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpTabs {
  background: transparent;
  margin-bottom: 24px;
}

.pkpTabs__buttons,
.pkpTabs__header {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--fe-rule-md);
  margin-bottom: 24px;
  background: transparent;
  padding: 0;
}

.pkpTabs__button,
.pkpTab__button,
button.pkpTabs__button {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  color: var(--fe-tertiary) !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 14px 24px !important;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  border-radius: 0 !important;
}

.pkpTabs__button:hover {
  color: var(--fe-primary) !important;
  background: rgba(122, 45, 58, 0.06) !important;
}

.pkpTabs__button--isCurrent,
.pkpTabs__button.isCurrent,
.pkpTab--isCurrent > .pkpTabs__button,
.nav-tabs li.active a,
.ui-state-active.pkpTabs__button {
  color: var(--fe-primary) !important;
  border-bottom-color: var(--fe-burgundy) !important;
  background: rgba(122, 45, 58, 0.08) !important;
}

.pkpTab {
  padding: 0;
  background: transparent;
}

.pkpTab__content,
.pkpTabs__content {
  padding: 0;
  color: var(--fe-primary);
}

/* Legacy workflow tabs */
.pkp_workflow_tabs,
.ui-tabs-nav {
  background: transparent !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  display: flex;
  padding: 0 !important;
  list-style: none !important;
}
.pkp_workflow_tabs li,
.ui-tabs-nav li {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  float: none !important;
}
.pkp_workflow_tabs a,
.ui-tabs-nav a,
.ui-tabs-anchor {
  display: block;
  padding: 14px 24px !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--fe-tertiary) !important;
  text-decoration: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
}
.pkp_workflow_tabs a:hover,
.ui-tabs-nav a:hover {
  color: var(--fe-primary) !important;
  background: rgba(122, 45, 58, 0.06) !important;
}
.pkp_workflow_tabs .ui-state-active a,
.ui-tabs-nav .ui-state-active a {
  color: var(--fe-primary) !important;
  border-bottom-color: var(--fe-burgundy) !important;
  background: rgba(122, 45, 58, 0.12) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 13. STEPS — .pkpSteps (submission wizard)
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpSteps,
.submissionWizard__steps {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--fe-rule-md);
  border-bottom: 1px solid var(--fe-rule-md);
  margin-bottom: 28px;
  padding: 0 !important;
  background: var(--fe-void-warm) !important;
  list-style: none;
}

.pkpSteps__step {
  flex: 1;
  padding: 18px 20px !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid var(--fe-rule) !important;
  color: var(--fe-tertiary) !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-align: center;
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease-out);
}
.pkpSteps__step:last-child {
  border-right: 0 !important;
}
.pkpSteps__step:hover {
  background: rgba(122, 45, 58, 0.08) !important;
  color: var(--fe-primary) !important;
}

.pkpSteps__step--current,
.pkpSteps__step.current,
.pkpSteps__step--active {
  background: rgba(122, 45, 58, 0.18) !important;
  color: var(--fe-primary) !important;
  border-bottom: 3px solid var(--fe-burgundy) !important;
  padding-bottom: 15px !important;
}

.pkpSteps__step--isComplete,
.pkpSteps__step.isComplete {
  color: var(--fe-gold) !important;
}

.pkpSteps__stepNumber {
  display: inline-block;
  font-family: var(--font-subtitle), serif;
  font-size: 1.05rem;
  color: var(--fe-gold);
  margin-right: 8px;
  font-style: italic;
  font-weight: 500;
}

.pkpSteps__stepLabel,
.pkpSteps__stepLabelText {
  color: inherit !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 14. WORKFLOW — .pkpWorkflow
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpWorkflow {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md);
  color: var(--fe-primary);
}

.pkpWorkflow__header {
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule-md);
  padding: 20px 28px;
}

.pkpWorkflow__content,
.pkpWorkflow__body {
  padding: 24px 28px;
  background: var(--fe-surface);
  color: var(--fe-primary);
}

.pkpWorkflow__stage {
  background: var(--fe-void-warm);
  border: 1px solid var(--fe-rule-md);
  padding: 16px 20px;
  margin-bottom: 16px;
}
.pkpWorkflow__stage h3,
.pkpWorkflow__stageHeader {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fe-gold);
  margin: 0 0 8px;
}

/* Review panel */
.pkp_reviewPanel,
.pkp_review_panel {
  background: var(--fe-surface-2) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 18px 20px !important;
  margin-bottom: 16px;
  color: var(--fe-primary);
}
.pkp_reviewPanel .header,
.pkp_review_panel_header {
  font-family: var(--font-display);
  color: var(--fe-gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 8px;
}

.pkp_review_status--pending { color: var(--fe-warning) !important; }
.pkp_review_status--accepted { color: var(--fe-info) !important; }
.pkp_review_status--completed,
.pkp_review_status--complete { color: var(--fe-success) !important; }
.pkp_review_status--declined,
.pkp_review_status--overdue { color: var(--fe-error) !important; }

.pkp_decision_panel {
  background: var(--fe-surface-2);
  border: 1px solid var(--fe-rule-md);
  padding: 20px;
  margin: 20px 0;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 15. DASHBOARD STATS — .pkpStats
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpStats,
.pkpStats--editorial {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md);
  color: var(--fe-primary);
  padding: 24px 28px;
  margin-bottom: 24px;
}

.pkpStats__content {
  color: var(--fe-primary);
}

.pkpStats__filterSet {
  background: var(--fe-void-warm);
  border: 1px solid var(--fe-rule);
  padding: 14px 18px;
  margin-bottom: 20px;
}

.pkpStats__graph,
.pkpStats__graphHeader {
  background: var(--fe-void-warm);
  color: var(--fe-primary);
}

.pkpStats__graphSelector,
.pkpStats__graphSelector--timelineInterval {
  background: var(--fe-surface-2) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  border-radius: 0 !important;
}

.pkpStats--editorial__stage,
.pkpStats--editorial__stageList,
.pkpStats--editorial__stageWrapper {
  background: transparent;
  color: var(--fe-primary);
}

.pkpStats--editorial__stageCount {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 400 !important;
  color: var(--fe-gold) !important;
  letter-spacing: 0.02em !important;
}

.pkpStats--editorial__stageLabel {
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 11px !important;
  color: var(--fe-tertiary) !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  margin-top: 4px;
}

.pkpStats--editorial__stage--total {
  border-right: 1px solid var(--fe-rule-md);
  padding-right: 24px;
}

.pkpStats__itemAuthors {
  font-family: var(--font-subtitle), var(--font-body-ja);
  font-style: italic;
  color: var(--fe-tertiary);
}

.pkpStats__itemLink {
  color: var(--fe-primary) !important;
  font-family: var(--font-subtitle);
  font-size: 15px;
  line-height: 1.4;
}
.pkpStats__itemLink:hover {
  color: var(--fe-burgundy-lt) !important;
}

.pkpStats__itemsOfTotal {
  color: var(--fe-tertiary);
  font-size: 12px;
  font-family: var(--font-ui);
  letter-spacing: 0.08em;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 16. NOTIFICATIONS — .pkpNotification
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpNotification,
.pkp_notification,
.app__notification {
  background: var(--fe-surface-2) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  border-left: 4px solid var(--fe-burgundy) !important;
  border-radius: 0 !important;
  padding: 14px 18px !important;
  margin-bottom: 12px;
  font-family: var(--font-ui), var(--font-body-ja);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.pkpNotification--success,
.pkp_notification--success {
  border-left-color: var(--fe-success) !important;
}
.pkpNotification--success::before { color: var(--fe-success); }

.pkpNotification--warning,
.pkp_notification--warning {
  border-left-color: var(--fe-warning) !important;
}

.pkpNotification--error,
.pkp_notification--error {
  border-left-color: var(--fe-error) !important;
}

.pkpNotification--backendPage__header {
  padding: 10px 16px;
  font-size: 13px;
}

.pkpNotification__closeButton {
  background: transparent !important;
  border: 0 !important;
  color: var(--fe-tertiary) !important;
  cursor: pointer;
}
.pkpNotification__closeButton:hover { color: var(--fe-primary) !important; }

.app__notifications {
  position: fixed;
  top: 80px;
  right: 20px;
  z-index: 9999;
  max-width: 420px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 17. FILTERS — .pkpFilter
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpFilter {
  background: var(--fe-void-warm) !important;
  border: 1px solid var(--fe-rule-md);
  border-radius: 0;
  padding: 16px 20px;
  margin-bottom: 16px;
  color: var(--fe-primary);
}

.pkpFilter__label,
.pkpFilter__inputTitle {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--fe-tertiary) !important;
  margin-bottom: 6px;
}

.pkpFilter__value,
.pkpFilter__valueCaret {
  color: var(--fe-primary) !important;
}

.pkpFilter__add,
.pkpFilter__remove {
  background: transparent !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-secondary) !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
}

.pkpFilter--autosuggest,
.pkpFilter--slider {
  background: transparent;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 18. AUTOSUGGEST — .pkpAutosuggest
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpAutosuggest,
.pkpAutosuggest__control {
  background: var(--fe-surface-2) !important;
  border: 1px solid var(--fe-rule-md) !important;
  border-radius: 0 !important;
  color: var(--fe-primary);
}

.pkpAutosuggest__inputWrapper {
  background: transparent !important;
  padding: 4px;
  min-height: 38px;
}

.pkpAutosuggest__inputWrapper--focus {
  border-color: var(--fe-burgundy) !important;
}

.pkpAutosuggest__input {
  background: transparent !important;
  color: var(--fe-primary) !important;
  border: 0 !important;
  padding: 4px 8px !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
}

.pkpAutosuggest__autosuggester {
  background: var(--fe-surface-2) !important;
  border: 1px solid var(--fe-burgundy) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  color: var(--fe-primary);
}

.pkpAutosuggest__selection {
  background: rgba(122, 45, 58, 0.2) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-burgundy) !important;
  padding: 2px 8px !important;
  margin: 2px !important;
  font-size: 12px;
}

.pkpAutosuggest__deselect {
  color: var(--fe-burgundy-lt);
  background: transparent;
  border: 0;
  cursor: pointer;
  margin-left: 4px;
}
.pkpAutosuggest__deselect:hover { color: var(--fe-error); }

.pkpAutosuggest--disabled {
  opacity: 0.5;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 19. DATE RANGE — .pkpDateRange
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpDateRange {
  color: var(--fe-primary);
}

.pkpDateRange__button,
.pkpDateRange__current {
  background: var(--fe-surface-2) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 8px 14px !important;
  border-radius: 0 !important;
  font-family: var(--font-ui) !important;
  font-size: 13px !important;
  cursor: pointer;
}
.pkpDateRange__button:hover {
  background: rgba(122, 45, 58, 0.1) !important;
  border-color: var(--fe-burgundy) !important;
}

.pkpDateRange__form,
.pkpDateRange__options,
.pkpDateRange__optionGroup {
  background: var(--fe-surface-2);
  border: 1px solid var(--fe-rule-md);
  padding: 16px;
}

.pkpDateRange__option {
  padding: 8px 12px;
  color: var(--fe-secondary);
  cursor: pointer;
}
.pkpDateRange__option:hover {
  background: rgba(122, 45, 58, 0.1);
  color: var(--fe-primary);
}

.pkpDateRange__input,
.pkpDateRange__inputGroup input {
  background: var(--fe-surface-3) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 8px 12px !important;
}

.pkpDateRange__separator {
  color: var(--fe-tertiary);
  margin: 0 8px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 20. PAGINATION — .pkpPagination
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpPagination {
  display: flex;
  gap: 4px;
  padding: 16px 0;
  justify-content: center;
}

.pkpPagination button,
.pkpPagination a {
  background: transparent !important;
  color: var(--fe-secondary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 8px 14px !important;
  font-family: var(--font-ui) !important;
  font-size: 12px !important;
  cursor: pointer;
  text-decoration: none;
  min-width: 36px;
  text-align: center;
}
.pkpPagination button:hover,
.pkpPagination a:hover {
  background: rgba(122, 45, 58, 0.1) !important;
  border-color: var(--fe-burgundy) !important;
  color: var(--fe-primary) !important;
}
.pkpPagination button.isCurrent,
.pkpPagination .current {
  background: var(--fe-burgundy) !important;
  color: #FFFFFF !important;
  border-color: var(--fe-burgundy) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 21. ICONS & SPINNERS
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpIcon {
  color: currentColor;
}

.pkpSpinner,
.pkp_spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--fe-rule-md);
  border-top-color: var(--fe-burgundy);
  border-radius: 50%;
  animation: pkpSpin 0.9s linear infinite;
}
@keyframes pkpSpin {
  to { transform: rotate(360deg); }
}

.app__loading {
  background: rgba(12, 11, 15, 0.85);
  color: var(--fe-primary);
}
.app__loading__content {
  text-align: center;
  font-family: var(--font-subtitle);
  font-style: italic;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 22. SEARCH & FIELD ERROR
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpSearch,
.pkp_search,
.pkp_search_desktop {
  position: relative;
}

.pkpSearch input,
.pkp_search input,
.pkp_search_desktop input {
  background: var(--fe-surface-2) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  border-radius: 0 !important;
  padding: 10px 14px 10px 38px !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 13px !important;
}

.pkpSearch input::placeholder { color: var(--fe-tertiary); }

.pkpSearch input:focus {
  border-color: var(--fe-burgundy) !important;
  background: var(--fe-surface-3) !important;
}

.pkpFieldError {
  color: var(--fe-error) !important;
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-style: italic;
  font-size: 12.5px;
  margin-top: 4px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 23. SCROLLBAR — webkit
 * ═════════════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--fe-void);
}
::-webkit-scrollbar-thumb {
  background: var(--fe-surface-3);
  border: 2px solid var(--fe-void);
  border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fe-burgundy);
}
::-webkit-scrollbar-corner {
  background: var(--fe-void);
}

/* ═════════════════════════════════════════════════════════════════════════
 * 24. SUBMISSION WIZARD — File uploads + drop zones
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpDropzone,
.pkpFileUploader,
.fileUploadProgress,
.pkpFileUpload {
  background: var(--fe-surface-2) !important;
  border: 2px dashed var(--fe-rule-md) !important;
  border-radius: 0 !important;
  padding: 40px 24px !important;
  text-align: center;
  color: var(--fe-tertiary) !important;
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-style: italic;
  font-size: 1rem;
  transition: all var(--dur-fast) var(--ease-out);
}

.pkpDropzone:hover,
.pkpDropzone--dragActive,
.pkpDropzone.dragActive {
  border-color: var(--fe-burgundy) !important;
  color: var(--fe-primary) !important;
  background: rgba(122, 45, 58, 0.08) !important;
}

.pkpFileList {
  background: var(--fe-void-warm);
  border: 1px solid var(--fe-rule-md);
  padding: 0;
  margin: 16px 0;
}
.pkpFileList__item,
.pkpFileList__file {
  padding: 12px 18px;
  border-bottom: 1px solid var(--fe-rule);
  color: var(--fe-primary);
  display: flex;
  align-items: center;
  gap: 12px;
}
.pkpFileList__item:last-child { border-bottom: none; }
.pkpFileList__itemActions { margin-left: auto; }

/* ═════════════════════════════════════════════════════════════════════════
 * 25. HELP / INFO MODAL
 * ═════════════════════════════════════════════════════════════════════════ */

.pkpHelp,
.pkpHelp__content {
  background: var(--fe-surface);
  color: var(--fe-primary);
  padding: 20px;
  border: 1px solid var(--fe-rule-md);
}

.pkpHelp h1, .pkpHelp h2, .pkpHelp h3 {
  font-family: var(--font-display);
  color: var(--fe-gold);
}

/* ═════════════════════════════════════════════════════════════════════════
 * 26. LEGACY / MISC
 * ═════════════════════════════════════════════════════════════════════════ */

.pkp_linkaction_details,
.linkaction_details {
  color: var(--fe-burgundy-lt) !important;
  font-family: var(--font-ui);
  font-size: 12px;
  text-decoration: none;
}
.pkp_linkaction_details:hover {
  color: var(--fe-gold) !important;
}

.app__contentPanel .description,
.pkp_page_description,
.description {
  font-family: var(--font-subtitle), var(--font-body-ja);
  font-style: italic;
  color: var(--fe-tertiary);
  margin-bottom: 16px;
}

/* Site footer (if any backend pages show it) */
.pkp_brand_footer,
.pkp_structure_footer_wrapper {
  background: var(--fe-void) !important;
  border-top: 1px solid var(--fe-gold) !important;
  padding: 24px 32px !important;
  color: var(--fe-tertiary);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: center;
}

/* Headers, cards, tiles */
.pkp_block,
.block {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md);
  padding: 18px 22px;
  margin-bottom: 16px;
  color: var(--fe-primary);
}
.pkp_block .title,
.block .title {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold) !important;
  margin: 0 0 12px !important;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fe-rule);
}

/* ═════════════════════════════════════════════════════════════════════════
 * 27. AMBIENT BACKGROUND GLOW (v2.1 §7.3)
 * ═════════════════════════════════════════════════════════════════════════ */

body.pkp_page_dashboard::before,
body.pkp_page_workflow::before,
body.pkp_page_submissions::before,
body.pkp_page_submission::before,
body.pkp_page_management::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(122, 45, 58, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(200, 169, 110, 0.035) 0%, transparent 55%);
  z-index: 0;
}

body.pkp_page_dashboard .pkp_structure_page,
body.pkp_page_dashboard .app,
body.pkp_page_workflow .pkp_structure_page,
body.pkp_page_workflow .app,
body.pkp_page_submissions .pkp_structure_page,
body.pkp_page_submissions .app {
  position: relative;
  z-index: 1;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 28. RESPONSIVE
 * ═════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .app__header { padding: 12px 16px !important; min-height: 60px; }
  .app__contextTitle { font-size: 0.95rem !important; letter-spacing: 0.14em !important; }
  .app__main, .pkp_content_main { padding: 16px !important; }
  .app__contentPanel, .app__page { padding: 20px !important; }
  .pkpSteps, .submissionWizard__steps { flex-direction: column; }
  .pkpSteps__step { border-right: 0 !important; border-bottom: 1px solid var(--fe-rule); }
  .pkp_navigation_sidebar, .app__sidebar { min-width: 0; }
}

@media (max-width: 480px) {
  .pkpHeader { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pkpHeader__actions { flex-wrap: wrap; }
  .pkpTabs__buttons { flex-wrap: wrap; }
}

/* ═════════════════════════════════════════════════════════════════════════
 * 29. PRINT
 * ═════════════════════════════════════════════════════════════════════════ */

@media print {
  body.pkp_page_dashboard,
  body.pkp_page_workflow {
    background: white !important;
    color: black !important;
  }
  .app__header, .app__sidebar, .pkp_navigation_sidebar { display: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
 * 30. LIST PANEL — .listPanel (submissions list, contributors, reviewers, DOIs)
 *     This is the primary dashboard list UI — 55+ classes.
 * ═════════════════════════════════════════════════════════════════════════ */

.listPanel {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md) !important;
  border-radius: 0 !important;
  color: var(--fe-primary) !important;
  margin-bottom: 24px;
}

.listPanel__header {
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  padding: 16px 24px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.listPanel__header h2,
.listPanel__header h3,
.listPanel__title {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold) !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
}

.listPanel__body {
  background: transparent !important;
  padding: 0 !important;
}

.listPanel__block {
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--fe-rule) !important;
  background: transparent !important;
}
.listPanel__block:last-child { border-bottom: none !important; }

.listPanel__footer {
  background: var(--fe-void-warm) !important;
  border-top: 1px solid var(--fe-rule-md) !important;
  padding: 14px 24px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.listPanel__empty {
  padding: 48px 24px !important;
  text-align: center;
  color: var(--fe-tertiary) !important;
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-style: italic;
  font-size: 15px;
  background: transparent !important;
}

.listPanel__item {
  padding: 18px 24px !important;
  border-bottom: 1px solid var(--fe-rule) !important;
  background: transparent !important;
  color: var(--fe-primary) !important;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: background var(--dur-fast) var(--ease-out);
}
.listPanel__item:hover {
  background: rgba(122, 45, 58, 0.06) !important;
}
.listPanel__item:last-child { border-bottom: none !important; }

.listPanel__itemIdentity,
.listPanel__itemSummary {
  flex: 1;
  min-width: 0;
  color: var(--fe-primary);
}

.listPanel__itemActions,
.listPanel__item--actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.listPanel__itemExpanded,
.listPanel__itemExpandedActions {
  background: var(--fe-void-warm) !important;
  border-top: 1px solid var(--fe-rule-md) !important;
  padding: 20px 24px !important;
  color: var(--fe-primary);
}

.listPanel__itemExpanded--submission,
.listPanel__itemExpanded--doi {
  background: var(--fe-void-warm) !important;
}

/* Submission item-specific */
.listPanel__item--submission__title,
.listPanel__item--submissionFile__link {
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--fe-primary) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  margin-bottom: 4px;
  display: block;
}
.listPanel__item--submission__title:hover,
.listPanel__item--submissionFile__link:hover {
  color: var(--fe-gold) !important;
}

.listPanel__item--submission__author {
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-style: italic;
  font-size: 13px !important;
  color: var(--fe-tertiary) !important;
}

.listPanel__item--submission__id {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  color: var(--fe-ghost) !important;
  letter-spacing: 0.1em;
  margin-right: 12px;
}

.listPanel__item--submission__stage,
.listPanel__item--submission__dueDate {
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fe-tertiary) !important;
  margin-top: 6px;
  display: inline-block;
  margin-right: 14px;
}

.listPanel__item--submission__flags {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.listPanel__item--submission__notice,
.listPanel__item--submission__reviewDetails,
.listPanel__item--submission__reviewerWorkflowLink {
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 12px !important;
  color: var(--fe-secondary) !important;
}

/* Reviewer-specific list items */
.listPanel__item--reviewer__brief,
.listPanel__item--reviewer__active,
.listPanel__item--reviewer__complete,
.listPanel__item--reviewer__last {
  color: var(--fe-secondary) !important;
  font-family: var(--font-ui), var(--font-body-ja);
  font-size: 12.5px;
}

.listPanel__item--reviewer__detailHeading {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold) !important;
  margin: 16px 0 6px !important;
}

.listPanel__item--reviewer__notice,
.listPanel__item--reviewer__noticeAction {
  background: rgba(200, 169, 110, 0.08) !important;
  border-left: 3px solid var(--fe-gold) !important;
  padding: 10px 14px !important;
  margin: 8px 0 !important;
  color: var(--fe-primary);
  font-size: 12px;
}

.listPanel__item--reviewer__orcid {
  color: var(--fe-gold) !important;
  font-family: var(--font-ui);
  font-size: 11px;
  text-decoration: none;
}

.listPanel__item--reviewer__rating {
  color: var(--fe-gold) !important;
  font-size: 14px;
}
.listPanel__item--reviewer__star--on {
  color: var(--fe-gold) !important;
}

/* Contributor variant */
.listPanel--contributor .listPanel__item {
  padding: 14px 24px !important;
}

/* Submission files variant */
.listPanel--submissionFiles__itemGenre,
.listPanel--submissionFiles__setGenre,
.listPanel--submissionFiles__setGenreLabel {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fe-tertiary) !important;
}

.listPanel--submissionFiles__setGenreButton {
  background: transparent !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-secondary) !important;
  padding: 6px 12px !important;
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer;
}
.listPanel--submissionFiles__setGenreButton:hover {
  background: rgba(122, 45, 58, 0.1) !important;
  border-color: var(--fe-burgundy) !important;
  color: var(--fe-primary) !important;
}

.listPanel--submissionFiles__genreSpinner {
  color: var(--fe-burgundy) !important;
}

.listPanel--promoteFiles__selectWrapper,
.listPanel--promoteFiles__selector {
  background: var(--fe-void-warm) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 10px 14px;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 31. SUBMISSION WIZARD — .submissionWizard (shell + tabs + step panels)
 * ═════════════════════════════════════════════════════════════════════════ */

.submissionWizard {
  background: var(--fe-surface) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md);
}

.submissionWizard__header {
  background: var(--fe-void) !important;
  border-bottom: 1px solid var(--fe-gold) !important;
  padding: 24px 32px !important;
}

.submissionWizard__header h1,
.submissionWizard__header h2 {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fe-primary) !important;
  margin: 0 !important;
}

.submissionWizard__pageContent,
.submissionWizard__body {
  padding: 32px !important;
  background: var(--fe-surface) !important;
  color: var(--fe-primary);
}

.submissionWizard__footer {
  background: var(--fe-void-warm) !important;
  border-top: 1px solid var(--fe-rule-md) !important;
  padding: 20px 32px !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.submissionWizard__nextButton,
.submissionWizard__submitButton {
  /* use primary button styling */
}

/* ═════════════════════════════════════════════════════════════════════════
 * 32. COMPOSER — .composer (email / message composer)
 * ═════════════════════════════════════════════════════════════════════════ */

.composer {
  background: var(--fe-surface) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md);
  padding: 0;
}

.composer__recipients,
.composer__recipients__wrapper {
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule) !important;
  padding: 14px 20px !important;
  color: var(--fe-primary);
}

.composer__template,
.composer__templates__list,
.composer__templates__search {
  background: var(--fe-surface-2) !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary);
}

.composer__templates__heading {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold) !important;
  padding: 12px 16px !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--fe-rule);
}

.composer__templates__list {
  max-height: 300px;
  overflow-y: auto;
  padding: 0 !important;
}

.composer__templates__moreSearchResults,
.composer__templates__searching {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--fe-tertiary);
  font-style: italic;
  font-family: var(--font-subtitle);
}

.composer__body,
.composer__message,
.composer__text {
  background: var(--fe-surface-2) !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
  padding: 16px 20px !important;
  min-height: 200px;
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
}

.composer__text--focus {
  border-color: var(--fe-burgundy) !important;
  background: var(--fe-surface-3) !important;
}

.composer__template__body {
  background: var(--fe-void-warm) !important;
  padding: 14px 18px;
  border-left: 3px solid var(--fe-burgundy);
  color: var(--fe-secondary);
}

.composer__attachments {
  padding: 14px 20px;
  border-top: 1px solid var(--fe-rule);
  background: var(--fe-void-warm);
}

.composer__attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--fe-surface-2);
  border: 1px solid var(--fe-rule-md);
  margin: 4px 0;
  color: var(--fe-primary);
}

.composer__attachment__documentType {
  font-size: 11px;
  color: var(--fe-tertiary);
  font-family: var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.composer__attachment__remove {
  background: transparent;
  border: 0;
  color: var(--fe-burgundy-lt);
  cursor: pointer;
  margin-left: auto;
}
.composer__attachment__remove:hover { color: var(--fe-error); }

.composer__locales {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.composer__loadingTemplateMask {
  background: rgba(12, 11, 15, 0.7);
  color: var(--fe-primary);
  font-family: var(--font-subtitle);
  font-style: italic;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 33. DECISION — .decision (editor decision flow)
 * ═════════════════════════════════════════════════════════════════════════ */

.decision {
  background: var(--fe-surface) !important;
  color: var(--fe-primary) !important;
}

.decision__stepHeader {
  font-family: var(--font-display) !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold) !important;
  padding: 12px 20px !important;
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule-md);
  margin: 0 !important;
}

.decision__stepPanel {
  padding: 24px 28px !important;
  background: var(--fe-surface) !important;
  color: var(--fe-primary);
}

.decision__footer {
  background: var(--fe-void-warm) !important;
  border-top: 1px solid var(--fe-rule-md) !important;
  padding: 18px 28px !important;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.decision__footer--noSteps {
  justify-content: flex-end;
}

.decision__footer__panel {
  display: flex;
  gap: 10px;
}

.decision__skipStep {
  background: transparent !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-secondary) !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.decision__error {
  background: rgba(160, 64, 80, 0.12) !important;
  border-left: 3px solid var(--fe-error) !important;
  padding: 12px 18px !important;
  color: var(--fe-error) !important;
  font-style: italic;
  font-family: var(--font-subtitle), var(--font-body-ja);
}

.decision_filesList {
  background: var(--fe-void-warm);
  border: 1px solid var(--fe-rule-md);
  padding: 0;
  margin: 16px 0;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 34. DOI MANAGEMENT — .doiListItem / .doiListPanel
 * ═════════════════════════════════════════════════════════════════════════ */

.doiListItem__itemTitle {
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--fe-primary) !important;
  line-height: 1.4;
}

.doiListItem__itemMetadata {
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 11px !important;
  color: var(--fe-tertiary) !important;
  letter-spacing: 0.06em;
}

.doiListItem__itemMetadata--badge {
  display: inline-flex;
  padding: 2px 8px;
  background: var(--fe-surface-3);
  color: var(--fe-secondary);
  border: 1px solid var(--fe-rule-md);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.doiListItem__doiDetail {
  font-family: "JetBrains Mono", "Fira Code", monospace !important;
  font-size: 12px !important;
  color: var(--fe-gold) !important;
  background: var(--fe-void-warm);
  padding: 3px 8px;
  border: 1px solid var(--fe-rule-md);
  display: inline-block;
}

.doiListItem__doiDetail--editButton {
  background: transparent !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-burgundy-lt) !important;
}

.doiListItem__depositorActions,
.doiListItem__depositorDescription,
.doiListItem__depositorDetails,
.doiListItem__depositorName {
  color: var(--fe-primary);
  font-family: var(--font-ui), var(--font-body-ja);
  font-size: 12.5px;
}

.doiListItem__emphasis {
  color: var(--fe-gold) !important;
  font-weight: 500;
}

.doiListItem__selectWrapper,
.doiListItem__selector {
  background: transparent;
}

.doiListItem__versionContainer,
.doiListItem__versionContainer--actionsBar {
  background: var(--fe-void-warm);
  border-top: 1px solid var(--fe-rule);
  padding: 12px 20px;
}

.doiListPanel__bulkActions,
.doiListPanel__options {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
  background: var(--fe-void-warm);
  border-bottom: 1px solid var(--fe-rule-md);
}

.doiListPanel__options--button {
  background: transparent !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-secondary) !important;
}

.doiListPanel__itemExpandedActions,
.doiListPanel__itemExpandedActions--actionsBar {
  background: var(--fe-void-warm);
  padding: 14px 20px;
  border-top: 1px solid var(--fe-rule);
  display: flex;
  gap: 8px;
}

.doiListPanel__statusInfoButton {
  background: transparent !important;
  color: var(--fe-gold) !important;
  border: 0 !important;
  padding: 4px 8px !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 35. MODAL (bootstrap-style) — .modal (different from .pkpModal)
 * ═════════════════════════════════════════════════════════════════════════ */

.modal,
.modal-dialog {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-burgundy) !important;
  border-radius: 0 !important;
  color: var(--fe-primary) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(200,169,110,0.12);
}

.modal-dialog { margin: 5vh auto; }

.modal-content {
  background: var(--fe-surface) !important;
  border-radius: 0 !important;
  border: 0 !important;
  color: var(--fe-primary);
}

.modal-header {
  background: var(--fe-void) !important;
  border-bottom: 1px solid var(--fe-gold) !important;
  padding: 20px 28px !important;
  border-radius: 0 !important;
}

.modal-title {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--fe-primary) !important;
}

.modal-body {
  background: var(--fe-surface) !important;
  padding: 28px !important;
  color: var(--fe-primary) !important;
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}
.modal-body p { color: var(--fe-primary) !important; }
.modal-body strong { color: var(--fe-gold); }

.modal-footer {
  background: var(--fe-void-warm) !important;
  border-top: 1px solid var(--fe-rule-md) !important;
  padding: 18px 28px !important;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-backdrop {
  background: rgba(12, 11, 15, 0.82) !important;
  backdrop-filter: blur(4px);
}

/* ═════════════════════════════════════════════════════════════════════════
 * 36. V-POPPER — tooltips / popovers
 * ═════════════════════════════════════════════════════════════════════════ */

.v-popper,
.v-popper__popper,
.v-popper--theme-tooltip {
  color: var(--fe-primary);
}

.v-popper__inner,
.v-popper__wrapper {
  background: var(--fe-surface-2) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-burgundy) !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.v-popper__arrow-container,
.v-popper__arrow-inner {
  background: var(--fe-surface-2) !important;
  border-color: var(--fe-burgundy) !important;
}

.v-popper__arrow-outer {
  border-color: var(--fe-burgundy) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 37. FILE UPLOAD / FILE ATTACHER / FILE PANEL
 * ═════════════════════════════════════════════════════════════════════════ */

.fileUploadProgress {
  background: var(--fe-void-warm) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 14px 18px !important;
  margin: 8px 0;
  color: var(--fe-primary);
}

.fileUploadProgress__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--fe-rule);
}
.fileUploadProgress__row:last-child { border-bottom: 0; }

.fileUploadProgress__name {
  flex: 1;
  font-family: var(--font-ui), var(--font-body-ja) !important;
  font-size: 13px !important;
  color: var(--fe-primary) !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fileUploadProgress__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.fileUploader {
  background: var(--fe-void-warm) !important;
  border: 2px dashed var(--fe-rule-md) !important;
  padding: 32px 20px !important;
  text-align: center;
  color: var(--fe-tertiary) !important;
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-style: italic;
  transition: all var(--dur-fast) var(--ease-out);
}
.fileUploader:hover {
  border-color: var(--fe-burgundy) !important;
  color: var(--fe-primary) !important;
  background: rgba(122, 45, 58, 0.06) !important;
}

.filePanel__header {
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  padding: 14px 20px !important;
  color: var(--fe-primary);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.filePanel__fileContent,
.filePanel__fileContentFooter {
  background: var(--fe-surface-2) !important;
  padding: 14px 20px !important;
  color: var(--fe-primary);
  font-family: var(--font-ui), var(--font-body-ja);
  font-size: 13px;
}

.filePanel__items {
  padding: 0 !important;
  background: transparent;
}

.fileAttacher {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary);
}

.fileAttacher__back {
  color: var(--fe-burgundy-lt) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}

.fileAttacher__footer {
  background: var(--fe-void-warm) !important;
  border-top: 1px solid var(--fe-rule-md) !important;
  padding: 14px 20px !important;
  display: flex;
  gap: 10px;
}

.fileAttacherFileStage,
.fileAttacherLibrary,
.fileAttacherReviewFiles {
  background: transparent;
  color: var(--fe-primary);
  padding: 20px;
}

.fileAttacherLibrary__message,
.fileAttacherReviewFiles__noFiles {
  color: var(--fe-tertiary);
  font-family: var(--font-subtitle), var(--font-body-ja);
  font-style: italic;
  padding: 20px;
  text-align: center;
}

.fileAttacherUpload__prompt {
  font-family: var(--font-subtitle), var(--font-body-ja);
  font-style: italic;
  color: var(--fe-secondary);
}

.fileAttacherUpload__files,
.fileAttacherUpload__wrapper {
  background: var(--fe-void-warm);
  border: 1px solid var(--fe-rule);
  padding: 12px;
  margin: 12px 0;
}

.fileAttacherUploader__uploadedFile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--fe-surface-2);
  border: 1px solid var(--fe-rule-md);
  margin: 4px 0;
  color: var(--fe-primary);
}

.fileAttacherUploader__uploadedFile__remove {
  background: transparent;
  border: 0;
  color: var(--fe-burgundy-lt);
  cursor: pointer;
  margin-left: auto;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 38. PANELS / ACTION PANELS / INSERT CONTENT
 * ═════════════════════════════════════════════════════════════════════════ */

.actionPanel {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 18px 24px !important;
  margin-bottom: 16px;
  color: var(--fe-primary);
}

.actionPanel__text {
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-size: 14.5px !important;
  color: var(--fe-primary) !important;
  line-height: 1.7;
  margin-bottom: 12px;
}

.actionPanel__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.panelSection {
  background: var(--fe-void-warm) !important;
  border: 1px solid var(--fe-rule) !important;
  padding: 16px 20px !important;
  margin-bottom: 16px;
}

.panelSection h3,
.panelSection h4 {
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold) !important;
  margin: 0 0 10px !important;
}

.insertContent__items,
.insertContent {
  background: var(--fe-void-warm) !important;
  border: 1px solid var(--fe-rule-md) !important;
  padding: 0 !important;
  margin: 12px 0;
}

.insertContent__item {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--fe-rule) !important;
  color: var(--fe-primary);
  display: flex;
  gap: 12px;
  align-items: center;
}
.insertContent__item:last-child { border-bottom: 0 !important; }
.insertContent__item:hover {
  background: rgba(122, 45, 58, 0.06) !important;
}

.insertContent__item__button {
  background: transparent !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-secondary) !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  margin-left: auto;
}
.insertContent__item__button:hover {
  background: rgba(122, 45, 58, 0.1) !important;
  color: var(--fe-primary) !important;
}

.insertContent__item__header {
  font-family: var(--font-ui) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--fe-tertiary) !important;
}

.insertContent__item__value {
  font-family: var(--font-subtitle), var(--font-body-ja) !important;
  font-size: 13px !important;
  color: var(--fe-primary) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 39. SELECT SUBMISSION FILE LIST ITEM / MULTILINGUAL PROGRESS / ORDERER
 * ═════════════════════════════════════════════════════════════════════════ */

.selectSubmissionFileListItem {
  padding: 12px 18px;
  border-bottom: 1px solid var(--fe-rule);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--fe-primary);
}
.selectSubmissionFileListItem:hover {
  background: rgba(122, 45, 58, 0.06);
}

.multilingualProgress {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--fe-void-warm);
  border: 1px solid var(--fe-rule-md);
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--fe-tertiary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.orderer {
  cursor: grab;
}
.orderer:active { cursor: grabbing; }

/* ═════════════════════════════════════════════════════════════════════════
 * 40. TINYMCE EDITOR (text editor inside forms)
 * ═════════════════════════════════════════════════════════════════════════ */

.tox.tox-tinymce,
.tox-tinymce {
  background: var(--fe-surface-2) !important;
  border: 1px solid var(--fe-rule-md) !important;
  border-radius: 0 !important;
}

.tox-toolbar,
.tox .tox-toolbar,
.tox .tox-toolbar__primary,
.tox .tox-toolbar-overlord {
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule) !important;
}

.tox .tox-tbtn {
  color: var(--fe-secondary) !important;
  background: transparent !important;
}
.tox .tox-tbtn:hover {
  background: rgba(122, 45, 58, 0.12) !important;
  color: var(--fe-primary) !important;
}
.tox .tox-tbtn--enabled {
  background: rgba(122, 45, 58, 0.18) !important;
  color: var(--fe-primary) !important;
}

.tox .tox-edit-area {
  background: var(--fe-surface-2) !important;
  border: 0 !important;
}

.tox .tox-edit-area__iframe {
  background: var(--fe-surface-2) !important;
}

.tox .tox-statusbar {
  background: var(--fe-void-warm) !important;
  border-top: 1px solid var(--fe-rule) !important;
  color: var(--fe-tertiary) !important;
  font-size: 11px !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * 41. HIGH-SPECIFICITY OVERRIDES — defeat OJS defaults that use important
 * ═════════════════════════════════════════════════════════════════════════ */

/* Force dark text color for any generic gray/black text */
body.pkp_page_dashboard .app *,
body.pkp_page_workflow .app *,
body.pkp_page_submissions .app *,
body.pkp_page_submission .app *,
body.pkp_page_management .app * {
  scrollbar-color: var(--fe-surface-3) var(--fe-void);
}

/* Override Bootstrap-like classes that some plugins inject */
.text-primary { color: var(--fe-burgundy-lt) !important; }
.text-success { color: var(--fe-success) !important; }
.text-warning { color: var(--fe-warning) !important; }
.text-danger, .text-error { color: var(--fe-error) !important; }
.text-muted { color: var(--fe-tertiary) !important; }

.bg-primary { background: var(--fe-burgundy) !important; color: #fff !important; }
.bg-success { background: var(--fe-success) !important; color: #fff !important; }
.bg-warning { background: var(--fe-warning) !important; color: #000 !important; }
.bg-danger, .bg-error { background: var(--fe-error) !important; color: #fff !important; }

/* Any plain table that escaped earlier rules */
body.pkp_page_dashboard table:not([class*="pkp"]) th,
body.pkp_page_workflow table:not([class*="pkp"]) th {
  background: var(--fe-void-warm) !important;
  color: var(--fe-tertiary) !important;
  border-bottom: 1px solid var(--fe-rule-strong) !important;
}
body.pkp_page_dashboard table:not([class*="pkp"]) td,
body.pkp_page_workflow table:not([class*="pkp"]) td {
  background: transparent !important;
  color: var(--fe-primary) !important;
  border-bottom: 1px solid var(--fe-rule) !important;
}

/* Force all generic card / panel / widget backgrounds to dark */
.card, .panel, .widget, .box {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary);
  border-radius: 0 !important;
}

.card-header, .panel-heading, .widget-header {
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-gold) !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 12px 18px !important;
}

.card-body, .panel-body, .widget-content {
  background: var(--fe-surface) !important;
  color: var(--fe-primary) !important;
  padding: 18px 22px !important;
}

.card-footer, .panel-footer, .widget-footer {
  background: var(--fe-void-warm) !important;
  border-top: 1px solid var(--fe-rule-md) !important;
  padding: 14px 18px !important;
}

/* Remove OJS default borders / shadows on random elements */
body.pkp_page_dashboard > *,
body.pkp_page_workflow > * {
  box-shadow: none !important;
}

/* Fix any inline <code> blocks */
pre, pre code {
  background: var(--fe-void-warm) !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
  padding: 12px 16px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
}

/* ═════════════════════════════════════════════════════════════════════════
 * PHASE 3 COVERAGE EXTENSION (v1.1.0)
 *
 * The Phase 1 live audit found 133 classes that ronbun-backend.css did not
 * cover, plus 126 stale rules that used pkpSteps__stepLabel (single
 * underscore) when OJS 3.5 actually emits pkpSteps__step__label (double
 * underscore `__label`). This section:
 *
 *   1. Re-targets the wizard step label classes with the correct BEM names
 *   2. Adds table header legibility fixes
 *   3. Covers Vue-compiled decision page / modal classes
 *   4. Covers submissionsListPanel / submissionsListItem classes
 *   5. Covers workflow collapsible panels
 *
 * All rules use Critical Classicism tokens defined in §0.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ─── §P3.1 Correct wizard step BEM names ───────────────────────────── */

.pkpSteps__step__number,
.pkpSteps__stepNumber {
  display: inline-block !important;
  font-family: var(--font-subtitle), "Cormorant Garamond", serif !important;
  font-size: 1.05rem !important;
  color: var(--fe-gold) !important;
  margin-right: 8px !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

.pkpSteps__step__label,
.pkpSteps__stepLabel,
.pkpSteps__stepLabelText {
  color: var(--fe-primary) !important;
  font-family: "Inter", "Noto Sans JP", sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
}

.pkpSteps__step--current .pkpSteps__step__label,
.pkpSteps__step[aria-current="step"] .pkpSteps__step__label,
.pkpSteps__step.isCurrent .pkpSteps__step__label {
  color: var(--fe-gold) !important;
}

.pkpSteps__step--isComplete .pkpSteps__step__label,
.pkpSteps__step.isComplete .pkpSteps__step__label {
  color: var(--fe-gold-dim, #8f7a4e) !important;
}

/* ─── §P3.2 pkpTable — fix broken header legibility ─────────────────── */

.pkpTable,
table.pkpTable {
  width: 100% !important;
  border-collapse: collapse !important;
  background: var(--fe-surface) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md) !important;
}

.pkpTable thead,
.pkpTable__head {
  background: var(--fe-void-warm, #1e1b24) !important;
}

.pkpTable thead th,
.pkpTable__columnHeader,
.pkpTable th[scope="col"] {
  padding: 14px 16px !important;
  background: var(--fe-void-warm, #1e1b24) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-tertiary, #7a7680) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}

.pkpTable tbody td,
.pkpTable__cell {
  padding: 14px 16px !important;
  background: var(--fe-surface) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
  font-family: "Inter", "Noto Sans JP", sans-serif !important;
  font-size: 0.88rem !important;
  vertical-align: middle !important;
}

.pkpTable tbody tr:hover td,
.pkpTable__row:hover .pkpTable__cell {
  background: rgba(122, 45, 58, 0.06) !important;
}

.pkpTable tbody tr:last-child td {
  border-bottom: none !important;
}

/* ─── §P3.3 submissionsListPanel + submissionsListItem ──────────────── */

.submissionsListPanel,
.pkpSubmissionsListPanel {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
}

.submissionsListPanel__head,
.submissionsListPanel__header {
  padding: 18px 24px !important;
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
}

.submissionsListPanel__title {
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold) !important;
}

.submissionsListPanel__body {
  background: var(--fe-surface) !important;
  padding: 0 !important;
}

.submissionsListItem {
  display: flex !important;
  padding: 18px 24px !important;
  background: var(--fe-surface) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
  transition: background 0.2s ease;
}

.submissionsListItem:hover {
  background: rgba(122, 45, 58, 0.05) !important;
}

.submissionsListItem__info {
  flex: 1 1 auto;
  color: var(--fe-primary) !important;
}

.submissionsListItem__title,
.submissionsListItem__titleLink {
  font-family: "Cormorant Garamond", "Noto Serif JP", Georgia, serif !important;
  font-size: 1.15rem !important;
  font-weight: 500 !important;
  color: var(--fe-primary) !important;
}

.submissionsListItem__title:hover,
.submissionsListItem__titleLink:hover {
  color: var(--fe-gold) !important;
}

.submissionsListItem__authors,
.submissionsListItem__subtitle {
  font-size: 0.85rem !important;
  color: var(--fe-secondary) !important;
  margin-top: 4px !important;
}

.submissionsListItem__stage,
.submissionsListItem__stageLabel {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold-dim, #8f7a4e) !important;
}

/* ─── §P3.4 Decision page / modal ───────────────────────────────────── */

.pkpModal,
.pkpModalOverlay {
  background: rgba(12, 11, 15, 0.82) !important;
}

.pkpModal__panel,
.pkpModal__content {
  background: var(--fe-surface-elev, #252230) !important;
  color: var(--fe-primary) !important;
  border: 1px solid var(--fe-rule-md) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45) !important;
}

.pkpModal__header,
.pkpModal__title {
  padding: 20px 28px !important;
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  border-left: 3px solid var(--fe-burgundy) !important;
  font-family: "Cinzel", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold) !important;
}

.pkpModal__body {
  padding: 24px 28px !important;
  background: var(--fe-surface-elev, #252230) !important;
  color: var(--fe-primary) !important;
}

.pkpModal__footer,
.pkpModal__actions {
  padding: 18px 28px !important;
  background: var(--fe-void-warm) !important;
  border-top: 1px solid var(--fe-rule-md) !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.pkpDecisionPage,
.pkpDecisionForm {
  background: var(--fe-surface) !important;
  color: var(--fe-primary) !important;
}

.pkpDecisionPage__title,
.pkpDecisionForm__title {
  font-family: "Cinzel", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold) !important;
  border-left: 3px solid var(--fe-burgundy) !important;
  padding-left: 16px !important;
}

.pkpDecisionPage__steps,
.pkpDecisionPage__content {
  background: var(--fe-surface) !important;
  color: var(--fe-primary) !important;
}

/* ─── §P3.5 Workflow collapsible panels (fix blank rendering) ───────── */

.pkpWorkflow__publication,
.pkpWorkflow__publicationTabs,
.pkpWorkflow__identifiers {
  background: var(--fe-surface) !important;
  color: var(--fe-primary) !important;
}

.pkpCollapsible,
.pkpCollapsible__panel {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
  margin-bottom: 16px !important;
}

.pkpCollapsible__header,
.pkpCollapsible__title {
  padding: 14px 20px !important;
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
  font-family: "Cinzel", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-size: 0.82rem !important;
  cursor: pointer !important;
}

.pkpCollapsible__header:hover {
  background: rgba(122, 45, 58, 0.08) !important;
  color: var(--fe-gold) !important;
}

.pkpCollapsible__body,
.pkpCollapsible__content {
  padding: 18px 22px !important;
  background: var(--fe-surface) !important;
  color: var(--fe-primary) !important;
}

/* ─── §P3.6 App header + context switcher ───────────────────────────── */

.app__header {
  background: var(--fe-void) !important;
  border-bottom: 1px solid var(--fe-burgundy) !important;
  color: var(--fe-primary) !important;
}

.app__contextTitle {
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold) !important;
}

.app__contexts {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
}

.pkpDropdown,
.pkpDropdown__panel {
  background: var(--fe-surface-elev, #252230) !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
}

.pkpDropdown__action {
  color: var(--fe-primary) !important;
}

.pkpDropdown__action:hover {
  background: rgba(122, 45, 58, 0.1) !important;
  color: var(--fe-gold) !important;
}

/* ─── §P3.7 Status badges ───────────────────────────────────────────── */

.pkpBadge,
.pkpBadge--default {
  display: inline-block !important;
  padding: 3px 10px !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: var(--fe-surface-elev, #252230) !important;
  color: var(--fe-secondary) !important;
  border: 1px solid var(--fe-rule-md) !important;
}

.pkpBadge--pending {
  background: rgba(200, 169, 110, 0.12) !important;
  color: var(--fe-gold) !important;
  border-color: var(--fe-gold-dim, #8f7a4e) !important;
}

.pkpBadge--review {
  background: rgba(122, 45, 58, 0.15) !important;
  color: #a84759 !important;
  border-color: var(--fe-burgundy) !important;
}

.pkpBadge--copyedit {
  background: rgba(200, 169, 110, 0.08) !important;
  color: var(--fe-gold-dim, #8f7a4e) !important;
}

.pkpBadge--production {
  background: rgba(168, 71, 89, 0.12) !important;
  color: #a84759 !important;
}

.pkpBadge--published {
  background: rgba(200, 169, 110, 0.18) !important;
  color: var(--fe-gold) !important;
  border-color: var(--fe-gold) !important;
}

/* ─── §P3.8 Dashboard scaffolding ───────────────────────────────────── */

.pkpDashboard,
.pkpDashboard__page {
  background: var(--fe-void) !important;
  color: var(--fe-primary) !important;
}

.pkpDashboard__header {
  padding: 24px 32px !important;
  background: var(--fe-void-warm) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
}

.pkpDashboard__main,
.pkpDashboard__content {
  background: var(--fe-void) !important;
  color: var(--fe-primary) !important;
}

.pkpDashboard__sidebar {
  background: var(--fe-surface) !important;
  border-right: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
}

.pkpStats,
.pkpStats__graphCard,
.pkpStats__filterSet {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
}

.pkpStats__graphCard__title {
  color: var(--fe-gold) !important;
  font-family: "Cinzel", serif !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ─── §P3.9 Body-class page backgrounds ─────────────────────────────── */

body.pkp_page_dashboard,
body.pkp_page_submissions,
body.pkp_page_workflow,
body.pkp_page_management,
body.pkp_page_about,
body.pkp_page_index,
body.pkp_page_issue,
body.pkp_page_article,
body.pkp_page_information,
body.pkp_page_search,
body.pkp_page_user {
  background: var(--fe-void) !important;
  color: var(--fe-primary) !important;
}

/* ═════════════════════════════════════════════════════════════════════════
 * PHASE 3b — READER-SIDE COVERAGE (v1.1.1)
 *
 * The original Phase 3 missed the READER-side templates (/about, /about/submissions,
 * /issue/archive, /information/*, homepage). Those use a different set of
 * `pkp_structure_*` / `pkp_block` / `block_*` classes that are defined in
 * the OJS template, not in the Vue dashboard. Adds:
 *
 *   1. pkp_structure_* page scaffolding
 *   2. pkp_block sidebar widgets (information / language / web_feed)
 *   3. submission_checklist / copyright_notice / privacy_statement boxes
 *   4. Reader-side HTML tables in about pages
 *   5. Hide unresolved ##plugins.generic.*## locale keys
 *   6. Kill webfeed 8-bit badge images (replaced with text link)
 * ═════════════════════════════════════════════════════════════════════════ */

/* ─── §P3b.1 Reader structural scaffold ─────────────────────────────── */

.pkp_structure_page {
  background: var(--fe-void) !important;
  color: var(--fe-primary) !important;
}

.pkp_structure_main {
  background: var(--fe-void) !important;
  color: var(--fe-primary) !important;
  padding: 32px 0 !important;
}

.pkp_structure_content {
  color: var(--fe-primary) !important;
}

.pkp_structure_content h1,
.pkp_structure_content h2,
.pkp_structure_content h3 {
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: var(--fe-primary) !important;
}

.pkp_structure_content h1 {
  font-size: 2.4rem !important;
  color: var(--fe-gold) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  padding-bottom: 18px !important;
  margin-bottom: 28px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.pkp_structure_content h2 {
  font-size: 1.35rem !important;
  color: var(--fe-gold) !important;
  border-left: 3px solid var(--fe-burgundy) !important;
  padding-left: 14px !important;
  margin-top: 2.25rem !important;
  margin-bottom: 1rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.pkp_structure_content p,
.pkp_structure_content li,
.pkp_structure_content td {
  font-family: "Cormorant Garamond", "Noto Serif JP", Georgia, serif !important;
  font-size: 1.05rem !important;
  line-height: 1.7 !important;
  color: var(--fe-primary) !important;
}

.pkp_structure_content a {
  color: var(--fe-gold) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(200, 169, 110, 0.25) !important;
  transition: border-color 0.2s ease;
}

.pkp_structure_content a:hover {
  color: var(--fe-gold) !important;
  border-bottom-color: var(--fe-gold) !important;
}

.pkp_structure_sidebar {
  background: transparent !important;
}

.pkp_structure_footer_wrapper,
.pkp_structure_footer {
  background: var(--fe-void-warm) !important;
  border-top: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-secondary) !important;
}

/* ─── §P3b.2 Sidebar blocks ─────────────────────────────────────────── */

.pkp_block {
  background: var(--fe-surface, #16141b) !important;
  border: 1px solid var(--fe-rule-md) !important;
  margin-bottom: 22px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.pkp_block > .title,
.pkp_block h2.title,
.pkp_block > h2 {
  margin: 0 !important;
  padding: 12px 18px !important;
  background: var(--fe-void-warm, #1e1b24) !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  font-weight: 500 !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--fe-gold, #c8a96e) !important;
}

.pkp_block > .content {
  padding: 16px 18px !important;
  color: var(--fe-primary) !important;
}

.pkp_block ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.pkp_block li {
  font-family: "Inter", "Noto Sans JP", sans-serif !important;
  font-size: 0.82rem !important;
  padding: 6px 0 !important;
  border-bottom: 1px solid rgba(200, 169, 110, 0.08) !important;
}

.pkp_block li:last-child {
  border-bottom: none !important;
}

.pkp_block a {
  color: var(--fe-secondary) !important;
  text-decoration: none !important;
  border: none !important;
  transition: color 0.2s ease;
}

.pkp_block a:hover {
  color: var(--fe-gold) !important;
}

.pkp_block.block_language li.current a {
  color: var(--fe-gold) !important;
  font-weight: 600 !important;
}

/* ─── §P3b.3 Kill the webfeed 8-bit badges ─────────────────────────── */

.pkp_block.block_web_feed {
  display: none !important;
}

/*
 * If webfeed is re-enabled later, these rules turn the ugly GIF badges into
 * clean text links:
 */
.pkp_block.block_web_feed img {
  display: none !important;
}
.pkp_block.block_web_feed li::before {
  content: "▸ ";
  color: var(--fe-gold-dim, #8f7a4e);
}

/* ─── §P3b.4 Hide unresolved ## locale keys ────────────────────────── */

/*
 * If OJS fails to resolve a locale key it echoes ##plugins.generic.xxx##
 * as visible text. Hide those via ::before so broken keys never bleed into
 * the page. This is defense-in-depth — the proper fix is to install the
 * locale file, which we do via msgmerge.
 */
.title:empty {
  display: none;
}

/* ─── §P3b.5 Submission sub-boxes on /about/submissions ─────────────── */

.author_guidelines,
.submission_checklist,
.copyright_notice,
.privacy_statement,
.section_policies,
.review_policy {
  margin: 2.5rem 0 !important;
  padding: 1.5rem 1.75rem !important;
  background: var(--fe-surface, #16141b) !important;
  border: 1px solid var(--fe-rule-md) !important;
  border-left: 3px solid var(--fe-gold-dim, #8f7a4e) !important;
}

.author_guidelines h2,
.submission_checklist h2,
.copyright_notice h2,
.privacy_statement h2,
.section_policies h2,
.review_policy h2 {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  padding-left: 0 !important;
  border-left: none !important;
  font-size: 1rem !important;
  letter-spacing: 0.1em !important;
}

.submission_checklist ul,
.author_guidelines ul {
  margin: 0 !important;
  padding-left: 1.2rem !important;
  list-style: none !important;
}

.submission_checklist li,
.author_guidelines li {
  position: relative;
  padding-left: 1.2rem !important;
  margin: 0.4rem 0 !important;
}

.submission_checklist li::before,
.author_guidelines li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--fe-gold-dim, #8f7a4e);
  font-size: 0.9em;
}

/* ─── §P3b.6 Reader-side HTML tables (fee schedule et al) ──────────── */

.pkp_structure_content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 1.25rem 0 !important;
  background: var(--fe-void-warm, #1e1b24) !important;
  border: 1px solid var(--fe-rule-md) !important;
}

.pkp_structure_content table thead tr,
.pkp_structure_content table thead th {
  background: var(--fe-void-warm, #1e1b24) !important;
  color: var(--fe-tertiary, #7a7680) !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--fe-gold-dim, #8f7a4e) !important;
  padding: 12px 14px !important;
}

.pkp_structure_content table tbody td {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
  font-family: "Cormorant Garamond", serif !important;
  font-size: 1.05rem !important;
  font-variant-numeric: tabular-nums !important;
}

.pkp_structure_content table tbody tr:last-child td {
  border-bottom: none !important;
}

.pkp_structure_content table tbody tr:hover td {
  background: rgba(122, 45, 58, 0.05) !important;
}

/* ─── §P3b.7 Reader top navigation ──────────────────────────────────── */

.pkp_structure_head,
.pkp_head_wrapper {
  background: var(--fe-void) !important;
  border-bottom: 1px solid var(--fe-burgundy) !important;
}

.pkp_site_name,
.pkp_site_name a {
  color: var(--fe-gold) !important;
  font-family: "Cinzel", "Noto Serif JP", serif !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

.pkp_navigation_primary,
.pkp_navigation_primary_row,
.pkp_navigation_user {
  background: transparent !important;
}

.pkp_navigation_primary a,
.pkp_navigation_user a {
  color: var(--fe-secondary) !important;
  font-family: "Inter", "Noto Sans JP", sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 14px !important;
  border: none !important;
  transition: color 0.2s ease;
}

.pkp_navigation_primary a:hover,
.pkp_navigation_user a:hover {
  color: var(--fe-gold) !important;
}

.pkp_navigation_user li.profile > a,
.pkp_navigation_user li.dashboard > a {
  color: var(--fe-primary) !important;
}

.pkp_search input[type="search"] {
  background: var(--fe-surface) !important;
  border: 1px solid var(--fe-rule-md) !important;
  color: var(--fe-primary) !important;
  font-family: "Inter", sans-serif !important;
  padding: 8px 12px !important;
}

.pkp_search input[type="search"]:focus {
  outline: 2px solid rgba(122, 45, 58, 0.4) !important;
  outline-offset: 1px !important;
}

/* ─── §P3b.8 Breadcrumbs on reader pages ───────────────────────────── */

.pkp_structure_content ol.breadcrumbs,
.pkp_structure_content ol.cmp_breadcrumbs,
.pkp_structure_content .cmp_breadcrumbs {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
  font-family: "Inter", sans-serif !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

.pkp_structure_content ol.breadcrumbs li,
.pkp_structure_content .cmp_breadcrumbs li {
  display: inline !important;
  color: var(--fe-tertiary, #7a7680) !important;
  font-size: 0.66rem !important;
}

.pkp_structure_content ol.breadcrumbs a,
.pkp_structure_content .cmp_breadcrumbs a {
  color: var(--fe-gold-dim, #8f7a4e) !important;
  border-bottom: none !important;
}