:root {
  --mg-navy: #0f3460;
  --mg-deep: #081f38;
  --mg-coral: #e94560;
  --mg-coral-soft: #fdecef;
  --mg-ink: #132942;
  --mg-muted: #6c7b8e;
  --mg-line: #dce4ed;
  --mg-surface: #f1f5f9;
  --mg-white: #ffffff;
  --mg-green: #118562;
  --mg-green-soft: #def5ed;
  --mg-gold: #b87312;
  --mg-shadow: 0 28px 70px rgba(7, 30, 54, .18);
  --mg-ease: cubic-bezier(.2, .75, .25, 1);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #e8eef5; }
body { margin: 0; color: var(--mg-ink); background: linear-gradient(150deg, #f5f8fb 0%, #e7edf5 54%, #f9edf0 100%); font-family: "Aptos", "Segoe UI", Arial, sans-serif; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.concept-gallery { width: min(1500px, 100%); min-height: 100vh; margin: 0 auto; padding: 28px 32px 34px; }
.gallery-header { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; padding: 22px 26px; border-radius: 22px; color: #fff; background: var(--mg-navy); box-shadow: 0 18px 42px rgba(15, 52, 96, .16); }
.gallery-brand { display: flex; align-items: center; gap: 11px; font-size: 12px; font-weight: 900; letter-spacing: .06em; }
.brand-badge { display: grid; place-items: center; width: 42px; height: 42px; padding: 7px; border-radius: 11px; background: #fff; box-shadow: 0 7px 18px rgba(0,0,0,.2); }
.brand-badge img { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-heading p { margin: 0 0 5px; color: #ff8ea0; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.gallery-heading h1 { margin: 0; font-size: clamp(26px, 3vw, 42px); line-height: 1; letter-spacing: -.035em; }
.gallery-heading > span { display: block; margin-top: 8px; color: #c7d5e4; font-size: 14px; }
.concept-disclaimer { max-width: 310px; padding: 12px 15px; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; background: rgba(255,255,255,.08); }
.concept-disclaimer strong { display: block; color: #ff90a1; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.concept-disclaimer span { display: block; margin-top: 4px; color: #dae4ef; font-size: 12px; line-height: 1.4; }

.package-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0; }
.package-tab { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 11px; padding: 14px 16px; border: 1px solid #d4deea; border-radius: 15px; color: var(--mg-ink); background: rgba(255,255,255,.88); box-shadow: 0 8px 20px rgba(15,52,96,.06); cursor: pointer; text-align: left; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.package-tab:hover { transform: translateY(-2px); border-color: #97abc1; box-shadow: 0 12px 26px rgba(15,52,96,.1); }
.package-tab:focus-visible { outline: 3px solid rgba(233,69,96,.32); outline-offset: 2px; }
.package-tab > span { grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: var(--mg-navy); font-size: 11px; font-weight: 900; }
.package-tab strong { color: var(--mg-navy); font-size: 15px; }
.package-tab small { color: var(--mg-muted); font-size: 12px; }
.package-tab.is-active { border-color: var(--mg-coral); background: #fff; box-shadow: 0 12px 30px rgba(233,69,96,.13); }
.package-tab.is-active > span { background: var(--mg-coral); }
.package-tab.is-active::after { content: ""; position: absolute; left: 17px; right: 17px; bottom: -1px; height: 3px; border-radius: 999px 999px 0 0; background: var(--mg-coral); }

.screen-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 12px; padding: 0 3px; }
.screen-toolbar > div:first-child { display: flex; align-items: baseline; gap: 10px; }
.toolbar-label { color: var(--mg-coral); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.screen-toolbar strong { color: var(--mg-navy); font-size: 17px; }
.screen-buttons { display: flex; gap: 8px; }
.screen-buttons button { padding: 8px 13px; border: 1px solid #cdd8e5; border-radius: 999px; color: #56677b; background: rgba(255,255,255,.86); cursor: pointer; font-size: 12px; font-weight: 800; }
.screen-buttons button:hover { border-color: var(--mg-coral); color: var(--mg-coral); }
.screen-buttons button:focus-visible { outline: 3px solid rgba(233,69,96,.28); outline-offset: 2px; }
.screen-buttons button.is-active { border-color: var(--mg-navy); color: #fff; background: var(--mg-navy); }

.mockup-stage { position: relative; min-height: 655px; }
.concept-screen { position: absolute; inset: 0; display: none; opacity: 0; transform: translateY(12px) scale(.992); }
.concept-screen.is-active { display: block; animation: concept-enter 380ms var(--mg-ease) forwards; }
@keyframes concept-enter { to { opacity: 1; transform: none; } }
.product-window { width: 100%; height: 655px; overflow: hidden; border: 1px solid #c7d3e1; border-radius: 19px; background: #fff; box-shadow: var(--mg-shadow); }
.browser-chrome { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; height: 42px; padding: 0 15px; color: #697a8e; background: #edf2f7; border-bottom: 1px solid #d8e1eb; font-size: 11px; }
.browser-chrome.dark, .browser-chrome.enterprise { color: #c9d6e4; background: var(--mg-deep); border-bottom-color: rgba(255,255,255,.08); }
.browser-dots { display: flex; gap: 6px; }
.browser-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--mg-coral); }
.browser-dots i:nth-child(2) { background: #e8ad3e; }
.browser-dots i:nth-child(3) { background: #28a77c; }
.browser-address { justify-self: center; width: min(580px, 74%); overflow: hidden; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.72); text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.browser-chrome.dark .browser-address, .browser-chrome.enterprise .browser-address { background: rgba(255,255,255,.08); }
.browser-lock { font-size: 10px; font-weight: 800; }

.gallery-footer { display: flex; justify-content: space-between; gap: 24px; align-items: center; margin-top: 14px; padding: 13px 4px; }
.gallery-footer > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.gallery-footer > div:first-child strong { color: var(--mg-navy); font-size: 13px; line-height: 1.35; }
.gallery-footer > div:first-child span { color: var(--mg-muted); font-size: 11px; }
.gallery-actions { display: flex; gap: 8px; align-items: center; }
.gallery-actions button, .gallery-actions a { padding: 9px 13px; border: 1px solid #cbd7e4; border-radius: 10px; color: var(--mg-navy); background: rgba(255,255,255,.86); cursor: pointer; font-size: 12px; font-weight: 800; text-decoration: none; }
.gallery-actions button:hover, .gallery-actions a:hover { border-color: var(--mg-coral); color: var(--mg-coral); }
.gallery-actions button:focus-visible, .gallery-actions a:focus-visible { outline: 3px solid rgba(233,69,96,.3); outline-offset: 2px; }
.gallery-actions #nextScreen { border-color: var(--mg-navy); color: #fff; background: var(--mg-navy); }
.gallery-actions #nextScreen:hover { border-color: var(--mg-coral); background: var(--mg-coral); }

@media (max-width: 1000px) {
  .concept-gallery { padding: 16px; }
  .gallery-header { grid-template-columns: 1fr; gap: 14px; }
  .concept-disclaimer { max-width: none; }
  .package-tabs { grid-template-columns: 1fr; }
  .screen-toolbar, .gallery-footer { align-items: flex-start; flex-direction: column; }
  .screen-buttons, .gallery-actions { flex-wrap: wrap; }
  .mockup-stage { min-height: 610px; overflow-x: auto; border-radius: 19px; }
  .concept-screen { min-width: 1040px; }
  .product-window { height: 610px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* Launch: public journal experience */
.launch-home, .article-page { height: calc(100% - 42px); color: #1c314a; background: #fff; }
.public-header { display: grid; grid-template-columns: minmax(310px, 1.2fr) auto auto; gap: 26px; align-items: center; min-height: 66px; padding: 10px 28px; border-bottom: 1px solid #e1e7ee; background: #fff; }
.public-header.compact { min-height: 58px; padding-top: 7px; padding-bottom: 7px; }
.journal-identity { display: flex; align-items: center; gap: 11px; min-width: 0; }
.journal-monogram { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: var(--mg-navy); font-size: 12px; font-weight: 900; }
.journal-identity > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.journal-identity strong { overflow: hidden; color: var(--mg-navy); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.journal-identity small { color: #7b8999; font-size: 10px; }
.public-header nav { display: flex; gap: 17px; color: #53657a; font-size: 11px; font-weight: 700; }
.public-header nav span { padding: 7px 0; white-space: nowrap; }
.public-header nav span.active { color: var(--mg-coral); border-bottom: 2px solid var(--mg-coral); }
.public-search { padding: 9px 12px; border: 1px solid #d5dee8; border-radius: 9px; color: #77869a; font-size: 10px; white-space: nowrap; }

.public-hero { display: grid; grid-template-columns: 1fr 190px; gap: 42px; align-items: center; min-height: 226px; padding: 26px 70px; color: #fff; background: radial-gradient(circle at 80% 10%, rgba(255,255,255,.14), transparent 26%), linear-gradient(125deg, #0f3460, #1b4d78); }
.hero-copy p { margin: 0 0 8px; color: #ff8da0; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.hero-copy h2 { max-width: 620px; margin: 0 0 9px; font-size: clamp(29px, 3vw, 42px); line-height: 1; letter-spacing: -.035em; }
.hero-copy > span { display: block; max-width: 600px; color: #cedae8; font-size: 13px; }
.hero-actions { display: flex; align-items: center; gap: 17px; margin-top: 20px; font-size: 11px; }
.hero-actions b { padding: 10px 14px; border-radius: 8px; background: var(--mg-coral); }
.hero-actions em { font-style: normal; font-weight: 800; }
.issue-cover { display: flex; flex-direction: column; justify-content: space-between; justify-self: end; width: 142px; height: 178px; padding: 16px; color: #fff; background: linear-gradient(145deg, #e94560, #aa2744); box-shadow: 0 16px 35px rgba(0,0,0,.26); transform: rotate(2deg); }
.issue-cover > span { font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.issue-cover strong { font-size: 21px; line-height: .98; }
.issue-cover small { color: #ffdae1; font-size: 9px; }

.public-content { display: grid; grid-template-columns: 1fr 280px; gap: 28px; height: calc(100% - 292px); padding: 22px 34px 18px; background: #f6f8fb; }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 8px; }
.section-heading small, .journal-aside small { color: var(--mg-coral); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.section-heading h3, .journal-aside h3 { margin: 3px 0 0; color: var(--mg-navy); font-size: 17px; }
.section-heading > span { color: var(--mg-coral); font-size: 10px; font-weight: 800; }
.article-feed > article { padding: 10px 0; border-bottom: 1px solid #dde5ed; }
.article-feed > article:last-child { border-bottom: 0; }
.article-type { margin-bottom: 3px; color: var(--mg-coral); font-size: 9px; font-weight: 800; }
.article-feed h4 { margin: 0 0 4px; color: #20364f; font-size: 13px; line-height: 1.25; }
.article-feed p { margin: 0; color: #728196; font-size: 9px; }
.article-feed footer { display: flex; gap: 12px; margin-top: 7px; color: #8491a1; font-size: 9px; }
.article-feed footer b { color: var(--mg-navy); }
.journal-aside { display: grid; grid-template-rows: 1fr auto; gap: 12px; }
.journal-aside > div:first-child { display: flex; flex-direction: column; padding: 15px; border: 1px solid #dce4ed; border-radius: 12px; background: #fff; }
.journal-aside > div:first-child > span { padding: 7px 0; border-bottom: 1px solid #edf1f5; color: #42566e; font-size: 10px; }
.journal-aside > div:first-child > span:last-child { border-bottom: 0; }
.open-access-note { padding: 13px 15px; border-radius: 12px; color: #fff; background: var(--mg-navy); }
.open-access-note strong { font-size: 11px; }
.open-access-note p { margin: 4px 0 0; color: #cad8e7; font-size: 9px; }

.article-breadcrumb { height: 36px; padding: 11px 34px; color: #758398; background: #f7f9fb; border-bottom: 1px solid #e5ebf1; font-size: 9px; }
.article-breadcrumb i { margin: 0 8px; color: #a4afbb; font-style: normal; }
.article-layout { display: grid; grid-template-columns: 1fr 300px; gap: 34px; height: calc(100% - 94px); padding: 24px 42px 20px; background: #fff; }
.article-main { min-width: 0; }
.article-label { color: var(--mg-coral); font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.article-main > h2 { max-width: 760px; margin: 8px 0 7px; color: var(--mg-navy); font-size: 25px; line-height: 1.1; letter-spacing: -.02em; }
.authors { margin: 0 0 13px; color: #66768a; font-size: 11px; }
.article-meta { display: grid; grid-template-columns: repeat(4, 1fr); padding: 10px 0; border-top: 1px solid #dfe6ee; border-bottom: 1px solid #dfe6ee; }
.article-meta span { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; border-right: 1px solid #e4eaf0; }
.article-meta span:first-child { padding-left: 0; }
.article-meta span:last-child { border-right: 0; }
.article-meta small { color: #8491a1; font-size: 8px; }
.article-meta strong { color: #31465e; font-size: 10px; }
.article-actions { display: flex; gap: 9px; align-items: center; margin: 12px 0; font-size: 9px; font-weight: 800; }
.article-actions b { padding: 8px 11px; border-radius: 7px; color: #fff; background: var(--mg-coral); }
.article-actions span { padding: 7px 10px; border: 1px solid #d7e0e9; border-radius: 7px; color: var(--mg-navy); }
.abstract { max-width: 850px; }
.abstract h3 { margin: 12px 0 6px; color: var(--mg-navy); font-size: 14px; }
.abstract p { margin: 5px 0; color: #465a71; font-size: 10px; line-height: 1.42; }
.keyword-row { display: flex; gap: 7px; flex-wrap: wrap; }
.keyword-row span { padding: 5px 8px; border-radius: 999px; color: #4d6076; background: #eef3f7; font-size: 8px; }
.issue-panel { padding-left: 24px; border-left: 1px solid #dfe6ee; }
.mini-cover { display: flex; flex-direction: column; justify-content: space-between; width: 118px; height: 145px; padding: 13px; color: #fff; background: linear-gradient(145deg, #0f3460, #1f567f); box-shadow: 0 12px 26px rgba(15,52,96,.22); }
.mini-cover span { font-size: 8px; font-weight: 900; }
.mini-cover strong { font-size: 16px; line-height: 1.05; }
.mini-cover small { color: #cddaea; font-size: 8px; }
.issue-panel h3 { margin: 16px 0 7px; color: var(--mg-navy); font-size: 14px; }
.issue-panel > span { display: block; padding: 8px 0; border-bottom: 1px solid #e7ecf1; color: #5d6e82; font-size: 9px; line-height: 1.3; }
.issue-panel > span.active { color: var(--mg-coral); font-weight: 800; }
.issue-panel > b { display: inline-block; margin-top: 11px; color: var(--mg-navy); font-size: 9px; }

/* Launch: standard WordPress users and content administration */
.wp-admin-app { display: grid; grid-template-columns: 190px 1fr; height: calc(100% - 42px); color: #26384d; background: #f0f2f4; }
.wp-admin-sidebar { display: flex; flex-direction: column; padding: 16px 12px; color: #c8d0d8; background: #1d2327; }
.wp-admin-brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 15px; border-bottom: 1px solid rgba(255,255,255,.09); }
.wp-admin-brand > span { display: grid; place-items: center; width: 34px; height: 34px; border: 2px solid #72aee6; border-radius: 50%; color: #72aee6; font-family: Georgia, serif; font-size: 18px; font-weight: 800; }
.wp-admin-brand > div, .wp-admin-user > div { display: flex; flex-direction: column; gap: 2px; }
.wp-admin-brand strong { color: #fff; font-size: 11px; }
.wp-admin-brand small, .wp-admin-user small { color: #8c9aa5; font-size: 8px; }
.wp-admin-sidebar nav { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; }
.wp-admin-sidebar nav b { display: flex; justify-content: space-between; padding: 9px 10px; border-radius: 5px; font-size: 9px; font-weight: 700; }
.wp-admin-sidebar nav b.active { color: #fff; background: #2271b1; }
.wp-admin-sidebar nav i { min-width: 18px; padding: 1px 5px; border-radius: 999px; color: #fff; background: rgba(0,0,0,.28); font-size: 8px; font-style: normal; text-align: center; }
.wp-admin-user { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 11px 8px 0; border-top: 1px solid rgba(255,255,255,.09); }
.wp-admin-user > span { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; color: #fff; background: #2271b1; font-size: 8px; font-weight: 900; }
.wp-admin-user strong { color: #e7edf1; font-size: 9px; }
.wp-admin-main { min-width: 0; }
.wp-admin-topbar { display: flex; justify-content: space-between; align-items: center; height: 40px; padding: 0 23px; color: #d4dbe0; background: #2c3338; font-size: 8px; }
.wp-admin-topbar div { display: flex; gap: 18px; align-items: center; }
.wp-admin-topbar b { color: #72aee6; }
.wp-admin-topbar em { font-style: normal; }
.wp-admin-heading { display: flex; justify-content: space-between; align-items: center; padding: 19px 25px 13px; }
.wp-admin-heading small { color: #2271b1; font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.wp-admin-heading h2 { margin: 3px 0 2px; color: #1d2327; font-size: 25px; }
.wp-admin-heading p { margin: 0; color: #6d7882; font-size: 9px; }
.wp-admin-heading > b { padding: 9px 12px; border: 1px solid #2271b1; border-radius: 4px; color: #2271b1; background: #fff; font-size: 9px; }
.wp-admin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 25px 13px; }
.wp-admin-summary article { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 11px 13px; border: 1px solid #dcdcde; border-left: 3px solid #2271b1; background: #fff; }
.wp-admin-summary small { color: #6d7882; font-size: 8px; font-weight: 800; }
.wp-admin-summary strong { grid-row: 1 / span 2; grid-column: 2; color: #1d2327; font-size: 20px; }
.wp-admin-summary span { color: #8b969f; font-size: 8px; }
.wp-admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 13px; padding: 0 25px 20px; }
.wp-content-panel, .wp-access-panel { border: 1px solid #dcdcde; background: #fff; }
.wp-content-tools { display: flex; justify-content: space-between; align-items: center; height: 42px; padding: 0 13px; border-bottom: 1px solid #dcdcde; color: #2271b1; font-size: 8px; font-weight: 700; }
.wp-content-tools div { display: flex; gap: 6px; align-items: center; }
.wp-content-tools em, .wp-content-tools b { padding: 6px 8px; border: 1px solid #c3c4c7; border-radius: 3px; color: #50575e; background: #f6f7f7; font-style: normal; }
.wp-content-table > header, .wp-content-table > article { display: grid; grid-template-columns: minmax(220px, 1fr) 86px 70px 70px 50px; gap: 8px; align-items: center; padding: 9px 12px; border-bottom: 1px solid #e3e5e7; font-size: 8px; }
.wp-content-table > header { color: #50575e; background: #f6f7f7; font-weight: 800; }
.wp-content-table > article:last-child { border-bottom: 0; }
.wp-content-table > article > span:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wp-content-table article b { overflow: hidden; color: #2271b1; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.wp-content-table article small { color: #7a858d; font-size: 7px; }
.wp-content-table article em { justify-self: start; padding: 4px 6px; border-radius: 999px; font-size: 7px; font-style: normal; font-weight: 800; }
.wp-published { color: #127057; background: #e1f3ed; }
.wp-draft { color: #8a6412; background: #fbf0d5; }
.wp-scheduled { color: #275f91; background: #e4f0fa; }
.wp-access-panel { padding: 14px; }
.wp-access-panel > div:first-child small { color: #2271b1; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.wp-access-panel h3 { margin: 3px 0 2px; color: #1d2327; font-size: 15px; }
.wp-access-panel p { margin: 0 0 10px; color: #737f88; font-size: 8px; }
.wp-access-panel > article { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #e7e8e9; }
.wp-role { display: grid; place-items: center; flex: 0 0 auto; width: 29px; height: 29px; border-radius: 7px; color: #fff; font-size: 7px; font-weight: 900; }
.wp-role.admin { background: #1d2327; }
.wp-role.editor { background: #2271b1; }
.wp-role.author { background: #7b4c9e; }
.wp-access-panel article div { display: flex; flex-direction: column; gap: 2px; }
.wp-access-panel article strong { color: #2c3338; font-size: 8px; }
.wp-access-panel article small { color: #77838c; font-size: 7px; }
.wp-boundary { margin-top: 11px; padding: 10px; border-left: 3px solid var(--mg-coral); color: #7e3340; background: var(--mg-coral-soft); }
.wp-boundary strong, .wp-boundary span { display: block; }
.wp-boundary strong { margin-bottom: 3px; font-size: 8px; }
.wp-boundary span { font-size: 7px; line-height: 1.4; }

/* Growth: author and editorial workflow */
.submission-app, .editor-app { height: calc(100% - 42px); color: #24384f; background: #f3f6fa; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; height: 62px; padding: 9px 24px; border-bottom: 1px solid #dce4ed; background: #fff; }
.app-product, .app-context { display: flex; align-items: center; gap: 11px; }
.product-symbol { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; color: #fff; background: var(--mg-navy); font-size: 11px; font-weight: 900; }
.app-product > div { display: flex; flex-direction: column; gap: 2px; }
.app-product strong { color: var(--mg-navy); font-size: 12px; }
.app-product small { color: #7d8b9d; font-size: 9px; }
.app-context > span { padding: 8px 11px; border: 1px solid #d8e1eb; border-radius: 8px; color: #4d6178; font-size: 10px; }
.app-context > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; background: var(--mg-coral); font-size: 9px; }
.submission-shell { display: grid; grid-template-columns: 240px 1fr; height: calc(100% - 62px); }
.submission-steps { display: flex; flex-direction: column; gap: 4px; padding: 23px 17px 18px; border-right: 1px solid #dce4ed; background: #fff; }
.submission-steps > p { margin: 0 9px 14px; color: #8a97a6; font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.submission-steps > span { display: grid; grid-template-columns: 29px 1fr; grid-template-rows: auto auto; column-gap: 9px; padding: 9px; border-radius: 9px; }
.submission-steps > span > i { grid-row: 1 / span 2; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #cfd9e4; border-radius: 50%; color: #7d8b9d; font-size: 9px; font-style: normal; font-weight: 900; }
.submission-steps > span b { color: #42566f; font-size: 10px; }
.submission-steps > span small { color: #8a97a7; font-size: 8px; }
.submission-steps > span.complete > i { border-color: var(--mg-green); color: #fff; background: var(--mg-green); }
.submission-steps > span.active { background: #eef3f9; }
.submission-steps > span.active > i { border-color: var(--mg-coral); color: #fff; background: var(--mg-coral); box-shadow: 0 0 0 3px var(--mg-coral-soft); }
.submission-steps > span.active b { color: var(--mg-navy); }
.draft-status { margin: auto 9px 0; padding: 11px; border-radius: 9px; color: #37604f; background: #edf8f4; }
.draft-status strong, .draft-status small { display: block; }
.draft-status strong { font-size: 9px; }
.draft-status small { margin-top: 2px; color: #668778; font-size: 8px; }
.submission-form { position: relative; padding: 24px 38px 72px; overflow: hidden; background: #f6f8fb; }
.form-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; max-width: 850px; }
.form-heading small { color: var(--mg-coral); font-size: 9px; font-weight: 900; letter-spacing: .09em; }
.form-heading h2 { margin: 4px 0; color: var(--mg-navy); font-size: 23px; letter-spacing: -.02em; }
.form-heading p { margin: 0; color: #728196; font-size: 10px; }
.progress-ring { display: grid; place-items: center; width: 48px; height: 48px; border: 5px solid #dbe4ed; border-top-color: var(--mg-coral); border-right-color: var(--mg-coral); border-radius: 50%; color: var(--mg-navy); font-size: 9px; font-weight: 900; transform: rotate(8deg); }
.corresponding-author { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; max-width: 850px; margin: 18px 0; padding: 12px 14px; border: 1px solid #d9e2ec; border-radius: 11px; background: #fff; }
.person-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--mg-navy); font-size: 9px; font-weight: 900; }
.corresponding-author > div:nth-child(2) { display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; align-items: baseline; }
.corresponding-author small { grid-column: 1 / -1; color: var(--mg-coral); font-size: 8px; font-weight: 900; letter-spacing: .06em; }
.corresponding-author strong { color: #263c55; font-size: 10px; }
.corresponding-author span, .corresponding-author em { color: #748397; font-size: 8px; font-style: normal; }
.corresponding-author > b { padding: 6px 8px; border-radius: 999px; color: #176c54; background: #e0f5ed; font-size: 8px; }
.author-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 850px; padding: 17px; border: 1px solid #d9e2ec; border-radius: 11px; background: #fff; }
.author-form-grid label { display: flex; flex-direction: column; gap: 5px; color: #42566f; font-size: 9px; font-weight: 800; }
.author-form-grid label.wide { grid-column: span 2; }
.author-form-grid input, .author-form-grid select { width: 100%; height: 32px; padding: 0 9px; border: 1px solid #ccd7e3; border-radius: 7px; color: #31465e; background: #fff; font-size: 9px; }
.author-actions { display: flex; align-items: center; gap: 13px; max-width: 850px; margin-top: 12px; }
.author-actions span { color: #7a889a; font-size: 8px; }
.primary-action, .secondary-action, .text-action { border-radius: 8px; cursor: default; font-size: 9px; font-weight: 800; }
.primary-action { padding: 9px 12px; border: 1px solid var(--mg-navy); color: #fff; background: var(--mg-navy); }
.secondary-action { padding: 8px 11px; border: 1px solid #cbd6e2; color: var(--mg-navy); background: #fff; }
.text-action { padding: 8px 0; border: 0; color: #6f7f92; background: transparent; }
.form-footer { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 12px 38px; border-top: 1px solid #dce4ed; background: #fff; }
.form-footer > div { display: flex; gap: 8px; }
.editor-app { display: grid; grid-template-columns: 185px 1fr; }
.editor-sidebar { display: flex; flex-direction: column; padding: 17px 12px; color: #b5c5d6; background: var(--mg-navy); }
.editor-brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 18px; }
.editor-brand > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #fff; background: var(--mg-coral); font-size: 9px; font-weight: 900; }
.editor-brand strong { color: #fff; font-size: 10px; letter-spacing: .08em; }
.editor-sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.editor-sidebar nav b { display: flex; justify-content: space-between; padding: 9px 11px; border-radius: 8px; font-size: 9px; font-weight: 700; }
.editor-sidebar nav b.active { color: #fff; background: rgba(255,255,255,.12); }
.editor-sidebar nav i { min-width: 20px; padding: 1px 5px; border-radius: 999px; color: var(--mg-navy); background: #fff; font-size: 8px; font-style: normal; text-align: center; }
.editor-profile { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 11px 8px 0; border-top: 1px solid rgba(255,255,255,.12); }
.editor-profile > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: var(--mg-coral); font-size: 8px; font-weight: 900; }
.editor-profile > div { display: flex; flex-direction: column; }
.editor-profile strong { color: #fff; font-size: 9px; }
.editor-profile small { color: #90a7bf; font-size: 8px; }
.editor-main { padding: 19px 22px; overflow: hidden; background: #f3f6fa; }
.editor-header { display: flex; justify-content: space-between; align-items: center; }
.editor-header small { color: var(--mg-coral); font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.editor-header h2 { margin: 3px 0 0; color: var(--mg-navy); font-size: 21px; }
.editor-header > div:last-child { display: flex; align-items: center; gap: 9px; }
.editor-header > div:last-child span { padding: 8px 10px; border: 1px solid #d3dde8; border-radius: 8px; color: #617287; background: #fff; font-size: 8px; }
.editor-header > div:last-child b { padding: 9px 11px; border-radius: 8px; color: #fff; background: var(--mg-navy); font-size: 8px; }
.editor-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin: 15px 0; }
.editor-summary article { display: flex; align-items: center; gap: 10px; padding: 11px; border: 1px solid #dce4ed; border-radius: 11px; background: #fff; }
.summary-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 9px; font-weight: 900; }
.summary-icon.new { color: #1a5d87; background: #e2f0f9; }
.summary-icon.review { color: #9a5c0d; background: #fff0d5; }
.summary-icon.decision { color: #9d334e; background: #fdecef; }
.editor-summary article > div { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 1px 9px; align-items: end; flex: 1; }
.editor-summary small { color: #718095; font-size: 8px; }
.editor-summary strong { grid-row: 1 / span 2; grid-column: 2; color: var(--mg-navy); font-size: 19px; }
.editor-summary em { color: #8a96a5; font-size: 7px; font-style: normal; }
.workflow-board { height: 438px; padding: 14px; border: 1px solid #dce4ed; border-radius: 12px; background: #fff; }
.workflow-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 10px; }
.workflow-heading small { color: var(--mg-coral); font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.workflow-heading h3 { margin: 2px 0 0; color: var(--mg-navy); font-size: 14px; }
.workflow-heading > span { padding: 7px 9px; border: 1px solid #d7e0e9; border-radius: 7px; color: #69798c; font-size: 8px; }
.workflow-columns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.workflow-columns > article { min-width: 0; padding: 9px; border-radius: 9px; background: #f2f5f8; }
.workflow-columns > article > header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.workflow-columns > article > header strong { color: #3e5269; font-size: 9px; }
.workflow-columns > article > header span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--mg-navy); font-size: 7px; font-weight: 900; }
.workflow-columns > article > div { margin-bottom: 8px; padding: 9px; border: 1px solid #dce4ed; border-radius: 8px; background: #fff; box-shadow: 0 4px 10px rgba(15,52,96,.04); }
.workflow-columns > article > div small { color: var(--mg-coral); font-size: 7px; font-weight: 900; }
.workflow-columns > article > div > b { display: block; min-height: 29px; margin: 4px 0; color: #263b53; font-size: 9px; line-height: 1.28; }
.workflow-columns > article > div > em { display: block; color: #7b899a; font-size: 7px; font-style: normal; }
.workflow-columns > article > div > footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 7px; border-top: 1px solid #edf1f5; }
.workflow-columns footer span { color: #6c7b8e; font-size: 7px; }
.workflow-columns footer > i { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #fff; background: var(--mg-navy); font-size: 6px; font-style: normal; font-weight: 900; }
.review-progress { height: 4px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #e5eaf0; }
.review-progress i { display: block; width: 66%; height: 100%; background: #d59228; }
.review-progress.half i { width: 50%; }
.decision-ready { color: #9d334e !important; font-weight: 800; }
.publish-ready { color: var(--mg-green) !important; font-weight: 800; }

/* Enterprise: portfolio and administration */
.portfolio-app, .admin-app { display: grid; grid-template-columns: 195px 1fr; height: calc(100% - 42px); color: #263b53; background: #f2f5f8; }
.portfolio-sidebar { display: flex; flex-direction: column; padding: 17px 13px; color: #a9bdd1; background: var(--mg-deep); }
.portfolio-brand { display: flex; align-items: center; gap: 9px; padding: 0 8px 20px; }
.portfolio-brand > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 10px; color: #fff; background: var(--mg-coral); font-size: 9px; font-weight: 900; }
.portfolio-brand > div { display: flex; flex-direction: column; gap: 1px; }
.portfolio-brand strong { color: #fff; font-size: 10px; }
.portfolio-brand small { color: #718ca6; font-size: 8px; }
.portfolio-sidebar nav { display: flex; flex-direction: column; gap: 3px; }
.portfolio-sidebar nav b { padding: 9px 11px; border-radius: 8px; font-size: 9px; font-weight: 700; }
.portfolio-sidebar nav b.active { color: #fff; background: #173f6b; }
.organisation-switch { margin-top: auto; padding: 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(255,255,255,.04); }
.organisation-switch small, .organisation-switch strong, .organisation-switch span { display: block; }
.organisation-switch small { color: #6f8aa4; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.organisation-switch strong { margin-top: 4px; color: #fff; font-size: 9px; line-height: 1.25; }
.organisation-switch span { margin-top: 3px; color: #8ea5bb; font-size: 8px; }
.portfolio-main, .admin-main { padding: 19px 22px; overflow: hidden; }
.portfolio-header { display: flex; justify-content: space-between; align-items: center; }
.portfolio-header > div:first-child small { color: var(--mg-coral); font-size: 8px; font-weight: 900; letter-spacing: .09em; }
.portfolio-header h2 { margin: 3px 0; color: var(--mg-navy); font-size: 21px; }
.portfolio-header p { margin: 0; color: #7b899a; font-size: 8px; }
.portfolio-header > div:last-child { display: flex; align-items: center; gap: 9px; }
.system-normal { display: flex; align-items: center; gap: 5px; padding: 7px 9px; border-radius: 999px; color: #176c54; background: #e0f5ed; font-size: 8px; font-weight: 800; }
.system-normal i { width: 7px; height: 7px; border-radius: 50%; background: var(--mg-green); box-shadow: 0 0 0 3px rgba(17,133,98,.12); }
.portfolio-header > div:last-child > b { padding: 9px 11px; border-radius: 8px; color: #fff; background: var(--mg-navy); font-size: 8px; }
.portfolio-header > div:last-child > em { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #fff; background: var(--mg-coral); font-size: 8px; font-style: normal; font-weight: 900; }
.portfolio-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 15px 0; }
.portfolio-metrics article { padding: 11px 12px; border: 1px solid #dce4ed; border-radius: 10px; background: #fff; }
.portfolio-metrics small { display: block; color: #7a899a; font-size: 8px; }
.portfolio-metrics strong { display: block; margin: 2px 0; color: var(--mg-navy); font-size: 19px; }
.portfolio-metrics span { color: #8a97a6; font-size: 7px; }
.portfolio-body { display: grid; grid-template-columns: 1fr 255px; gap: 12px; height: 437px; }
.journal-portfolio-table, .operations-panel, .roles-panel, .integration-panel { border: 1px solid #dce4ed; border-radius: 11px; background: #fff; }
.journal-portfolio-table { padding: 13px; }
.portfolio-section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.portfolio-section-head small { color: var(--mg-coral); font-size: 7px; font-weight: 900; letter-spacing: .09em; }
.portfolio-section-head h3 { margin: 2px 0 0; color: var(--mg-navy); font-size: 13px; }
.portfolio-section-head > span { color: var(--mg-coral); font-size: 8px; font-weight: 800; }
.portfolio-table-head, .journal-portfolio-table > article { display: grid; grid-template-columns: minmax(210px, 1.7fr) .7fr .55fr .8fr .45fr; gap: 11px; align-items: center; }
.portfolio-table-head { margin-top: 12px; padding: 8px 9px; border-radius: 7px; color: #8794a4; background: #f3f6f9; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.journal-portfolio-table > article { padding: 13px 9px; border-bottom: 1px solid #e8edf2; }
.journal-portfolio-table > article:last-child { border-bottom: 0; }
.portfolio-journal { display: flex; align-items: center; gap: 9px; min-width: 0; }
.portfolio-journal > i { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; color: #fff; font-size: 8px; font-style: normal; font-weight: 900; }
.portfolio-journal > i.health { background: var(--mg-navy); }
.portfolio-journal > i.clinical { background: var(--mg-coral); }
.portfolio-journal > i.public-health { background: var(--mg-gold); }
.portfolio-journal > b, .journal-portfolio-table > article > span:not(.portfolio-journal) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.portfolio-journal > b { overflow: hidden; color: #263b53; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.journal-portfolio-table article small { color: #8491a1; font-size: 7px; font-weight: 400; }
.journal-portfolio-table article span > strong { color: #3c5067; font-size: 9px; }
.journal-portfolio-table article > em { justify-self: start; padding: 5px 8px; border-radius: 999px; color: #176c54; background: #e0f5ed; font-size: 7px; font-style: normal; font-weight: 900; }
.operations-panel { padding: 13px; }
.operations-panel > article { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #e8edf2; }
.operations-panel > article > span { display: flex; align-items: center; gap: 7px; }
.operations-panel > article b { color: #42566f; font-size: 8px; }
.operations-panel > article > strong { color: #6d7c8f; font-size: 7px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; }
.status-dot.live { background: var(--mg-green); box-shadow: 0 0 0 3px rgba(17,133,98,.11); }
.status-dot.watch { background: var(--mg-gold); box-shadow: 0 0 0 3px rgba(184,115,18,.11); }
.schedule-panel { margin-top: 14px; padding: 13px; border-radius: 9px; color: #fff; background: var(--mg-navy); }
.schedule-panel small, .schedule-panel strong, .schedule-panel span, .schedule-panel b { display: block; }
.schedule-panel small { color: #ff91a2; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.schedule-panel strong { margin-top: 6px; font-size: 10px; }
.schedule-panel span { margin-top: 3px; color: #c2d2e2; font-size: 8px; }
.schedule-panel b { margin-top: 12px; font-size: 9px; }
.admin-tabs { display: flex; gap: 22px; margin: 15px 0 12px; border-bottom: 1px solid #d9e2eb; }
.admin-tabs span { padding: 8px 1px 9px; color: #718095; font-size: 8px; font-weight: 800; }
.admin-tabs span.active { color: var(--mg-coral); border-bottom: 2px solid var(--mg-coral); }
.admin-layout { display: grid; grid-template-columns: 1fr 325px; gap: 12px; height: 455px; }
.roles-panel, .integration-panel { padding: 13px; }
.role-table { margin-top: 11px; }
.role-table > header, .role-table > article { display: grid; grid-template-columns: minmax(175px, 1.45fr) .85fr .38fr 1.2fr 20px; gap: 10px; align-items: center; }
.role-table > header { padding: 8px 9px; border-radius: 7px; color: #8794a4; background: #f3f6f9; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.role-table > article { padding: 13px 9px; border-bottom: 1px solid #e8edf2; }
.role-table > article:last-child { border-bottom: 0; }
.role-table > article > span:first-child { display: flex; align-items: center; gap: 9px; min-width: 0; }
.role-icon { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 9px; font-size: 8px; font-style: normal; font-weight: 900; }
.role-icon.owner { color: #fff; background: var(--mg-navy); }
.role-icon.editor { color: #fff; background: var(--mg-coral); }
.role-icon.reviewer { color: #7c4d0b; background: #fff0d5; }
.role-icon.analyst { color: #176c54; background: #e0f5ed; }
.role-table article span:first-child > b { display: flex; flex-direction: column; gap: 2px; overflow: hidden; color: #2d4259; font-size: 9px; white-space: nowrap; }
.role-table article small { color: #8491a1; font-size: 7px; font-weight: 400; }
.role-table article > span:nth-child(2) { color: #637387; font-size: 8px; }
.role-table article > strong { color: var(--mg-navy); font-size: 10px; }
.permission-list { display: flex; gap: 4px; flex-wrap: wrap; }
.permission-list i { padding: 4px 6px; border-radius: 999px; color: #5d6f84; background: #eef3f7; font-size: 7px; font-style: normal; }
.role-table article > em { color: #8290a0; font-size: 10px; font-style: normal; }
.integration-panel > article { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 11px 0; border-bottom: 1px solid #e8edf2; }
.integration-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-size: 7px; font-style: normal; font-weight: 900; }
.integration-icon.doi { color: #1c5e87; background: #e3f0f8; }
.integration-icon.email { color: #9b3550; background: #fdecef; }
.integration-icon.storage { color: #176c54; background: #e0f5ed; }
.integration-icon.payment { color: #8d570a; background: #fff0d5; }
.integration-panel > article > span { display: flex; flex-direction: column; gap: 2px; }
.integration-panel > article b { color: #334960; font-size: 9px; }
.integration-panel > article small { color: #8491a1; font-size: 7px; }
.integration-panel > article em { padding: 5px 7px; border-radius: 999px; color: #176c54; background: #e0f5ed; font-size: 7px; font-style: normal; font-weight: 800; }
.integration-panel > article em.review-state { color: #8d570a; background: #fff0d5; }
.audit-preview { display: flex; justify-content: space-between; align-items: end; margin-top: 13px; padding: 11px; border-radius: 9px; color: #fff; background: var(--mg-navy); }
.audit-preview > div { display: flex; flex-direction: column; gap: 2px; }
.audit-preview small { color: #ff91a2; font-size: 7px; font-weight: 900; letter-spacing: .07em; }
.audit-preview strong { font-size: 9px; }
.audit-preview span { color: #bfd0e0; font-size: 7px; }
.audit-preview > b { font-size: 8px; }