/*
 * WZT visual study — deep ocean, milk almond and Mars orange.
 * This final layer keeps the existing information architecture and interactions,
 * while adapting the referenced editorial palette and finance-dashboard depth.
 */
:root {
  --ink: #152639;
  --muted: #66727e;
  --blue: #244c72;
  --line: rgba(21, 38, 57, 0.13);
  --paper: #f5f3ee;
  --pine: #152639;
  --pine-deep: #0d1925;
  --pine-soft: #f5ead8;
  --amber: #eb6127;
  --amber-soft: #fff0e7;
  --navy: #152639;
  --ocean: #152639;
  --ocean-deep: #0d1925;
  --almond: #f1ddbc;
  --almond-soft: #fbf4e8;
  --orange: #eb6127;
  --orange-deep: #c94a14;
  --wf-ink: #152639;
  --wf-muted: #66727e;
  --wf-line: rgba(21, 38, 57, 0.14);
  --wf-blue: #244c72;
  --wf-paper: #f5f3ee;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 91% 3%, rgba(235, 97, 39, 0.11), transparent 27rem),
    radial-gradient(circle at 9% 28%, rgba(241, 221, 188, 0.58), transparent 33rem),
    linear-gradient(180deg, #fbfaf7 0%, #f4f1eb 72%, #f8f6f1 100%);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline-color: rgba(235, 97, 39, 0.66);
}

.topbar {
  border-bottom-color: rgba(21, 38, 57, 0.09);
  background: rgba(251, 250, 247, 0.82);
  box-shadow: 0 12px 38px rgba(21, 38, 57, 0.07);
}

.brand img {
  border-color: rgba(21, 38, 57, 0.09);
  box-shadow: 0 12px 34px rgba(21, 38, 57, 0.11);
}

.brand b,
.header-actions button:first-child {
  color: var(--ocean);
}

.header-actions button:not(.button-primary):hover {
  background: rgba(21, 38, 57, 0.07);
}

.header-actions .button-primary,
.header-actions [data-open-inquiry] {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--ocean-deep);
  box-shadow: 0 9px 22px rgba(235, 97, 39, 0.22);
}

.header-actions .button-primary:hover,
.header-actions [data-open-inquiry]:hover {
  background: var(--orange-deep);
  color: #fff;
}

.experience-hero {
  border-color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(251, 244, 232, 0.74)),
    rgba(255, 255, 255, 0.7);
  box-shadow: 0 30px 84px rgba(21, 38, 57, 0.13);
}

.experience-hero::before {
  background: radial-gradient(circle, rgba(235, 97, 39, 0.2), rgba(235, 97, 39, 0) 67%);
}

.experience-hero::after {
  background: radial-gradient(circle, rgba(241, 221, 188, 0.72), rgba(241, 221, 188, 0) 69%);
}

.hero-eyebrow,
.basic-kicker {
  color: var(--orange);
}

.hero-copy h1 {
  color: var(--ocean);
}

.hero-copy h1 strong {
  background: linear-gradient(100deg, #152639 4%, #34516b 55%, #eb6127 106%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-intro {
  color: #5f6c77;
}

.search:focus-within {
  border-color: rgba(235, 97, 39, 0.62);
  outline-color: rgba(235, 97, 39, 0.2);
}

.hero-platform {
  background-color: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.9), 0 7px 18px rgba(21, 38, 57, 0.05);
}

.hero-covers {
  isolation: isolate;
}

.hero-covers::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 18px 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 34px;
  background:
    radial-gradient(circle at 78% 18%, rgba(235, 97, 39, 0.28), transparent 15rem),
    linear-gradient(145deg, rgba(13, 25, 37, 0.98), rgba(21, 38, 57, 0.9));
  box-shadow: 0 28px 65px rgba(13, 25, 37, 0.24), inset 0 1px rgba(255, 255, 255, 0.1);
}

.hero-covers::after {
  content: "WZT  ·  JOURNAL INDEX";
  position: absolute;
  z-index: 5;
  right: 24px;
  bottom: 31px;
  color: rgba(241, 221, 188, 0.62);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.18em;
}

.hero-halo {
  z-index: 1;
  background: radial-gradient(circle, rgba(235, 97, 39, 0.38), rgba(241, 221, 188, 0.12) 46%, transparent 69%);
}

.hero-cover {
  border-color: rgba(241, 221, 188, 0.58);
  background: rgba(255, 252, 247, 0.82);
  box-shadow: 0 28px 58px rgba(5, 13, 22, 0.34);
}

.hero-cover figcaption {
  color: #435363;
}

.directory-stats {
  border-color: rgba(21, 38, 57, 0.1);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: 0 20px 54px rgba(21, 38, 57, 0.08);
}

.directory-stats > div {
  border-left-color: rgba(21, 38, 57, 0.11);
}

.directory-stats > div:nth-child(1) strong,
.directory-stats > div:nth-child(3) strong {
  color: var(--ocean);
}

.directory-stats > div:nth-child(2) strong,
.directory-stats > div:nth-child(4) strong {
  color: var(--orange);
}

.core-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 91% 10%, rgba(235, 97, 39, 0.31), transparent 20rem),
    linear-gradient(128deg, #0d1925, #152639 62%, #29394a);
  box-shadow: 0 28px 72px rgba(13, 25, 37, 0.27);
}

.core-intro > span {
  color: rgba(255, 255, 255, 0.67);
}

.core-list button {
  border-color: rgba(241, 221, 188, 0.18);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.core-list button:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 16px 36px rgba(5, 13, 22, 0.24);
}

.core-list button > div > span {
  color: #f3b17d;
}

.finder {
  border-color: rgba(21, 38, 57, 0.11);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 18px 50px rgba(21, 38, 57, 0.08);
}

.desktop-filter-trigger {
  border-color: rgba(21, 38, 57, 0.12);
  background: rgba(255, 255, 255, 0.73);
  color: var(--ocean);
}

.desktop-filter-trigger > span {
  color: #79828a;
}

.desktop-filter-trigger > b,
.finder .filter-block > b {
  color: var(--ocean);
}

.desktop-filter-trigger:hover {
  border-color: rgba(21, 38, 57, 0.3);
}

.desktop-filter-trigger.active {
  border-color: rgba(235, 97, 39, 0.58);
  background: var(--almond-soft);
  box-shadow: 0 8px 22px rgba(235, 97, 39, 0.1);
}

.desktop-filter-clear:hover {
  border-color: rgba(235, 97, 39, 0.55);
  background: var(--amber-soft);
  color: var(--orange-deep);
}

.chip {
  border-color: rgba(21, 38, 57, 0.13);
  background: rgba(255, 255, 255, 0.8);
  color: #455362;
}

.chip:hover {
  background: var(--almond-soft);
}

.chip.active {
  border-color: var(--ocean);
  background: var(--ocean);
  color: #fff;
  box-shadow: 0 7px 17px rgba(21, 38, 57, 0.17);
}

.special-filters .chip:not([data-value="全部"]) {
  border-color: rgba(235, 97, 39, 0.28);
  background: rgba(255, 240, 231, 0.68);
  color: #a9441a;
}

.special-filters .chip.active:not([data-value="全部"]) {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--ocean-deep);
}

.results-head strong,
.results-head button {
  color: var(--ocean);
}

.journal-card {
  border-color: rgba(21, 38, 57, 0.1);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 13px 38px rgba(21, 38, 57, 0.09);
}

.journal-card:hover {
  border-color: rgba(235, 97, 39, 0.24);
  box-shadow: 0 23px 54px rgba(21, 38, 57, 0.15);
}

.cover {
  background: linear-gradient(145deg, #f9f5ec, #f1ddbc 150%);
}

.cover > span {
  color: #65717d;
}

.meta span {
  color: #435363;
  background: rgba(241, 221, 188, 0.48);
}

.journal-title-row h3,
.detail-pane-heading b {
  color: var(--ocean);
}

.journal-card .topics {
  color: #5f6974;
}

.journal-detail-pane {
  border-left-color: rgba(21, 38, 57, 0.1);
  background:
    radial-gradient(circle at 100% 0, rgba(235, 97, 39, 0.08), transparent 17rem),
    linear-gradient(145deg, rgba(251, 247, 239, 0.96), rgba(255, 253, 249, 0.91));
}

.detail-pane-heading span {
  color: var(--orange-deep);
}

.mobile-detail-button {
  border-color: rgba(21, 38, 57, 0.16);
  background: var(--almond-soft);
  color: var(--ocean);
}

.special-issue {
  border-color: rgba(235, 97, 39, 0.62);
  background:
    radial-gradient(circle at 92% 20%, rgba(235, 97, 39, 0.36), transparent 9rem),
    linear-gradient(135deg, #0d1925, #21354a) !important;
  box-shadow: 0 12px 28px rgba(21, 38, 57, 0.2);
}

.special-issue > span {
  background: linear-gradient(145deg, #f1ddbc, #eb6127);
  color: var(--ocean-deep) !important;
}

.special-issue small {
  color: rgba(255, 255, 255, 0.69);
}

.more {
  border-color: var(--ocean);
  background: rgba(255, 255, 255, 0.62);
  color: var(--ocean);
}

.more:hover {
  background: var(--ocean);
  color: #fff;
}

.floating-search-trigger {
  border-color: rgba(241, 221, 188, 0.32);
  background:
    radial-gradient(circle at 88% 18%, rgba(235, 97, 39, 0.72), transparent 4rem),
    linear-gradient(135deg, #152639, #0d1925);
  box-shadow: 0 17px 40px rgba(13, 25, 37, 0.34);
}

.floating-search-trigger:hover {
  background:
    radial-gradient(circle at 88% 18%, rgba(235, 97, 39, 0.9), transparent 4.5rem),
    linear-gradient(135deg, #20384f, #0d1925);
}

.floating-search-panel {
  border-color: rgba(21, 38, 57, 0.16);
  background: rgba(255, 253, 249, 0.94);
  box-shadow: 0 19px 58px rgba(13, 25, 37, 0.25);
}

.floating-search-close,
.back-to-top {
  border-color: rgba(21, 38, 57, 0.13);
  background: rgba(251, 244, 232, 0.94);
  color: var(--ocean);
}

.button-primary,
.workflow-dialog .button-primary,
.selection-dock .button-primary,
.mobile-filter-actions .button-primary {
  border-color: var(--ocean);
  background: var(--ocean);
  color: #fff;
}

.button-primary:hover,
.workflow-dialog .button-primary:hover,
.selection-dock .button-primary:hover {
  background: #20384f;
}

.journal-actions [data-inquire-journal],
.workflow-dialog .submit-inquiry,
.contact-strip .button-primary {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--ocean-deep);
}

.journal-actions [data-inquire-journal]:hover,
.workflow-dialog .submit-inquiry:hover,
.contact-strip .button-primary:hover {
  background: var(--orange-deep);
  color: #fff;
}

.journal-actions [data-add-compare] {
  border-color: rgba(21, 38, 57, 0.22);
  color: var(--ocean);
}

.journal-actions button[aria-pressed="true"] {
  border-color: rgba(235, 97, 39, 0.36);
  background: var(--amber-soft);
  color: var(--orange-deep);
}

.favorite-button {
  border-color: rgba(235, 97, 39, 0.28);
  background: #fff8f1;
  color: #8d421f;
}

.favorite-button span {
  color: var(--orange);
}

.favorite-button[aria-pressed="true"] {
  border-color: rgba(235, 97, 39, 0.54);
  background: var(--amber-soft);
  color: var(--orange-deep);
}

.workflow-dialog {
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(circle at 100% 0, rgba(241, 221, 188, 0.5), transparent 20rem),
    linear-gradient(150deg, #fff, #faf7f0);
  color: var(--ocean);
  box-shadow: 0 35px 110px rgba(13, 25, 37, 0.32);
}

.workflow-dialog::backdrop {
  background: rgba(13, 25, 37, 0.55);
}

.dialog-heading .dialog-close {
  background: rgba(241, 221, 188, 0.52);
  color: var(--ocean);
}

.eyebrow {
  color: var(--orange);
}

.account-card,
.inquiry-context {
  border-color: rgba(21, 38, 57, 0.1);
  background: linear-gradient(120deg, rgba(241, 221, 188, 0.58), rgba(255, 255, 255, 0.82));
}

.account-action {
  background: var(--ocean);
}

.personal-heading h3 span {
  background: var(--almond-soft);
  color: var(--ocean);
}

.personal-heading button {
  color: var(--ocean) !important;
}

.personal-list article {
  border-color: rgba(21, 38, 57, 0.11);
}

.personal-list article:hover {
  border-color: rgba(235, 97, 39, 0.27);
  background: #fffcf8;
}

.selection-dock {
  border-color: rgba(21, 38, 57, 0.13);
  background: rgba(255, 253, 249, 0.94);
  color: var(--ocean);
  box-shadow: 0 13px 42px rgba(13, 25, 37, 0.16);
}

.selection-dock b {
  color: var(--orange);
}

.contact-strip {
  color: #fff;
  background:
    radial-gradient(circle at 82% 0, rgba(235, 97, 39, 0.42), transparent 24rem),
    linear-gradient(120deg, #0d1925, #152639 70%, #2b3c4e);
}

.contact-strip p,
.contact-strip a {
  color: rgba(255, 255, 255, 0.7);
}

.contact-strip button:not(.button-primary) {
  border-color: rgba(241, 221, 188, 0.36);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.workflow-toast {
  background: var(--ocean-deep);
}

footer a {
  color: #53677b;
}

@media (min-width: 821px) {
  .finder .filter-block {
    border-color: rgba(21, 38, 57, 0.12);
    background: rgba(255, 253, 249, 0.97);
    box-shadow: 0 25px 68px rgba(13, 25, 37, 0.2);
  }
}

@media (max-width: 820px) {
  .finder {
    background: rgba(255, 253, 249, 0.97);
    box-shadow: 0 -18px 72px rgba(13, 25, 37, 0.29);
  }

  .mobile-filter-backdrop {
    background: rgba(13, 25, 37, 0.48);
  }

  .mobile-filter-heading,
  .mobile-filter-actions {
    border-color: rgba(21, 38, 57, 0.11);
    background: rgba(255, 253, 249, 0.96);
  }

  .mobile-filter-heading small {
    color: var(--orange);
  }

  .mobile-filter-heading h2 {
    color: var(--ocean);
  }

  .mobile-filter-heading button {
    background: var(--almond-soft);
    color: var(--ocean);
  }

  .mobile-filter-actions button {
    border-color: rgba(21, 38, 57, 0.15);
    color: var(--ocean);
  }

  .mobile-filter-actions .button-primary {
    border-color: var(--orange);
    background: var(--orange);
    color: var(--ocean-deep);
  }

  .mobile-tabbar {
    border-color: rgba(21, 38, 57, 0.13) !important;
    background: rgba(255, 253, 249, 0.92);
    box-shadow: 0 12px 42px rgba(13, 25, 37, 0.18);
  }

  .mobile-tabbar .active {
    color: var(--ocean) !important;
    background: var(--almond-soft) !important;
  }

  .mobile-tabbar [data-mobile-filter][aria-expanded="true"] {
    color: var(--orange-deep);
    background: var(--amber-soft);
  }

  .workflow-dialog.journal-detail-dialog::backdrop {
    background: rgba(13, 25, 37, 0.56);
  }
}

@media (max-width: 640px) {
  .hero-covers::before {
    inset: 5px -10px 9px;
    border-radius: 25px;
  }

  .hero-covers::after {
    right: 6px;
    bottom: 17px;
    font-size: 8px;
  }
}