/* 金鳞团队工作台 · 01 墨玉智控全站主题 */
:root {
  --ink: #132019;
  --muted: #66766e;
  --line: #dce6e0;
  --paper: #f3f7f4;
  --green: #08704e;
  --green-deep: #08291f;
  --green-rich: #0a5c43;
  --green-soft: #e9f5ee;
  --lime: #d4ef68;
  --lime-soft: #f2f8d7;
  --red: #d34b42;
  --red-soft: #fff0ed;
  --amber: #c98220;
  --amber-soft: #fff5e4;
  --blue: #3477c9;
  --white: #fff;
  --surface: rgba(255, 255, 255, .94);
  --surface-soft: rgba(248, 251, 249, .92);
  --shadow-xs: 0 1px 2px rgba(8, 41, 31, .04);
  --shadow-sm: 0 10px 28px rgba(8, 41, 31, .07);
  --shadow-md: 0 18px 48px rgba(8, 41, 31, .1);
  --shadow-focus: 0 0 0 4px rgba(8, 112, 78, .12);
  --number-font: "Bahnschrift", "DIN Alternate", "Segoe UI", "Microsoft YaHei UI", sans-serif;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #a9bdb3 transparent;
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #a9bdb3;
  background-clip: padding-box;
}

html {
  background: var(--paper);
}

body:not(.auth-page) {
  grid-template-columns: 228px minmax(0, 1fr);
  background:
    radial-gradient(circle at 88% 4%, rgba(212, 239, 104, .13), transparent 22rem),
    radial-gradient(circle at 58% 26%, rgba(8, 112, 78, .055), transparent 32rem),
    var(--paper);
  color: var(--ink);
  font-family: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", sans-serif;
  letter-spacing: -.01em;
}

body:not(.auth-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(8, 112, 78, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 112, 78, .035) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

body > aside {
  width: 228px;
  padding: 24px 18px 20px;
  border-right: 1px solid rgba(212, 239, 104, .1);
  background:
    radial-gradient(circle at 18% 8%, rgba(212, 239, 104, .13), transparent 11rem),
    linear-gradient(165deg, #0b2d23 0%, var(--green-deep) 48%, #061d16 100%);
  box-shadow: 14px 0 40px rgba(4, 26, 19, .11);
  overflow: hidden;
}

body > aside::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, #000, transparent 52%);
}

body > aside > * {
  position: relative;
}

.brand {
  min-height: 52px;
  gap: 12px;
}

.brand span {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .44);
  border-radius: 15px;
  background: linear-gradient(145deg, #e7fa8b, var(--lime));
  color: #153025;
  font-family: var(--number-font);
  font-size: 21px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(212, 239, 104, .24), inset 0 1px rgba(255, 255, 255, .72);
}

.brand b {
  color: #f8fffb;
  font-size: 14px;
  letter-spacing: .01em;
}

.brand small {
  margin-top: 5px;
  color: #8eaca0;
  font-size: 10px;
  letter-spacing: .08em;
}

body > aside nav {
  gap: 3px;
  margin-top: 28px;
}

body > aside nav button {
  position: relative;
  min-height: 38px;
  padding: 9px 12px 9px 34px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #abc0b7;
  font-size: 13px;
  font-weight: 700;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}

body > aside nav button::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
  opacity: .62;
}

body > aside nav button:hover:not(:disabled) {
  color: #f4fff9;
  border-color: rgba(212, 239, 104, .1);
  background: rgba(255, 255, 255, .055);
  transform: translateX(2px);
}

body > aside nav button.active {
  border-color: rgba(212, 239, 104, .17);
  background: linear-gradient(90deg, rgba(212, 239, 104, .17), rgba(255, 255, 255, .07));
  color: #fff;
  box-shadow: inset 3px 0 var(--lime), 0 9px 24px rgba(0, 0, 0, .11);
}

body > aside nav button.active::before {
  border-color: var(--lime);
  background: var(--lime);
  box-shadow: 0 0 0 4px rgba(212, 239, 104, .12);
  opacity: 1;
}

body > aside nav button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

body > aside nav button:disabled {
  opacity: .34;
}

body > aside nav em {
  color: var(--lime);
  opacity: .62;
}

.mobile-nav-toggle,
.mobile-nav-backdrop {
  display: none;
}

.aside-note {
  color: #8fa99e;
  font-size: 11px;
}

.aside-note b {
  color: #e6f1ec;
}

.logout-link {
  color: var(--lime);
  letter-spacing: .05em;
}

body:not(.auth-page) > main {
  max-width: 1680px;
  padding: 38px 44px 68px;
}

body:not(.auth-page) > main > header {
  position: relative;
  min-height: 74px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(8, 112, 78, .12);
}

body:not(.auth-page) > main > header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 72px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--lime));
}

h1 {
  color: #10251c;
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 1000;
  letter-spacing: -.055em;
}

h2,
h3 {
  color: #13251d;
  letter-spacing: -.025em;
}

header p:not(.eyebrow):not(.page-mantra) {
  color: var(--muted);
}

.eyebrow {
  color: var(--green);
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .18em;
}

.page-mantra {
  border: 1px solid #b9dfc9;
  border-left: 5px solid var(--green);
  border-radius: 14px;
  background:
    linear-gradient(110deg, rgba(232, 247, 238, .95), rgba(255, 255, 255, .88)),
    var(--surface);
  color: var(--green-rich);
  font-size: 15px;
  box-shadow: var(--shadow-sm);
}

.page-mantra::before {
  background: linear-gradient(145deg, var(--green), var(--green-rich));
  box-shadow: 0 8px 18px rgba(8, 112, 78, .24);
}

button,
input,
select,
textarea,
summary {
  font-family: inherit;
}

button {
  border-radius: 11px;
  font-weight: 900;
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease, background .16s ease;
}

button:not(:disabled):hover {
  transform: translateY(-1px);
  filter: saturate(1.04);
}

button:not(:disabled):active {
  transform: translateY(0);
}

button:not(.ghost):not(.logout-link):not([class*="sort"]):not(.brand-traffic-sort) {
  box-shadow: 0 8px 18px rgba(8, 112, 78, .1);
}

.ghost,
button.ghost {
  border-color: var(--line);
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  box-shadow: var(--shadow-xs);
}

.ghost:hover,
button.ghost:hover {
  border-color: #b7d0c4;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

input,
select,
textarea {
  border-color: #d7e3dc !important;
  background: rgba(255, 255, 255, .92) !important;
  color: var(--ink) !important;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #b8cec2 !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--green) !important;
  background: #fff !important;
  box-shadow: var(--shadow-focus) !important;
}

input::placeholder,
textarea::placeholder {
  color: #9aa9a1;
}

.card,
.panel,
.settings,
.exam-card,
.study-card,
.learning-card,
.learning-folder-card,
.talent-card,
.talent-summary-card,
.view-log-audit-card,
.quality-card,
.growth-stage,
.competitor-metric-card,
.product-compare-group,
.brand-traffic-card,
.brand-traffic-health-card,
.brand-traffic-period-card,
.brand-traffic-product-card,
.brand-traffic-diagnosis-card,
.brand-traffic-alert-card,
.brand-traffic-improvement-card,
.ops-card,
.ops-box {
  border-color: rgba(23, 67, 51, .11) !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(10px);
}

.card,
.panel,
.settings {
  border-radius: 16px;
}

.card:hover,
.exam-card:hover,
.study-card:hover,
.learning-card:hover,
.learning-folder-card:hover,
.talent-card:hover,
.brand-traffic-diagnosis-card:hover {
  border-color: rgba(8, 112, 78, .24) !important;
  box-shadow: var(--shadow-sm);
}

.cards {
  gap: 14px;
}

.card span,
.brand-traffic-card span,
.brand-traffic-product-card span,
.talent-summary-card span,
.view-log-cards span,
.study-summary span {
  color: var(--muted);
}

.card strong,
.brand-traffic-card strong,
.brand-traffic-product-card strong,
.brand-traffic-health-card strong,
.brand-traffic-period-card strong,
.talent-summary-card strong,
.view-log-cards strong,
.study-summary strong,
.ops-card strong,
.daily-summary strong,
.money-card strong,
.keyword-metric strong,
.competitor-cards strong,
.product-compare-cards strong {
  font-family: var(--number-font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
}

.card.good strong,
.good strong,
.good-text,
.change-up,
.up,
.roi-good {
  color: var(--green) !important;
}

.card.alert strong,
.alert strong,
.bad strong,
.bad-text,
.change-down,
.down,
.roi-bad,
.roi-danger,
.danger-text {
  color: var(--red) !important;
}

.panel-title {
  gap: 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(8, 112, 78, .09);
}

.panel-title span {
  color: var(--green);
  letter-spacing: .14em;
}

.upload-panel,
.keyword-upload,
.competitor-upload,
.brand-traffic-import,
.daily-clean-upload,
.daily-image-uploader {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 239, 104, .19) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(212, 239, 104, .19), transparent 12rem),
    linear-gradient(135deg, #0b7855, #07543d 62%, #0a3f31) !important;
  box-shadow: 0 18px 44px rgba(8, 74, 53, .18) !important;
  color: #fff !important;
}

.upload-panel h2,
.upload-panel h3,
.upload-panel strong,
.keyword-upload h2,
.keyword-upload h3,
.keyword-upload strong,
.competitor-upload h2,
.competitor-upload h3,
.competitor-upload strong,
.brand-traffic-import h2,
.brand-traffic-import h3,
.brand-traffic-import strong,
.daily-clean-upload h2,
.daily-clean-upload h3,
.daily-clean-upload strong,
.daily-clean-upload label,
.daily-image-uploader h2,
.daily-image-uploader h3,
.daily-image-uploader strong,
.daily-image-uploader label {
  color: #fff !important;
}

.upload-copy span,
.keyword-upload p,
.keyword-upload small,
.competitor-upload p,
.competitor-upload small,
.brand-traffic-import-copy span,
.brand-traffic-import p,
.brand-traffic-import small,
.daily-clean-upload p,
.daily-clean-upload small,
.daily-image-uploader p,
.daily-image-uploader small {
  color: #bfd7cd !important;
}

.daily-clean-upload .clean-status,
.daily-clean-upload .clean-status strong,
.daily-image-uploader .clean-status,
.daily-image-uploader .clean-status strong {
  color: var(--green) !important;
}

.upload-panel::after,
.keyword-upload::after,
.competitor-upload::after,
.brand-traffic-import::after,
.daily-clean-upload::after,
.daily-image-uploader::after {
  content: "";
  position: absolute;
  right: -35px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(255, 255, 255, .035), 0 0 0 58px rgba(255, 255, 255, .022);
  pointer-events: none;
}

.upload-panel > *,
.keyword-upload > *,
.competitor-upload > *,
.brand-traffic-import > *,
.daily-clean-upload > *,
.daily-image-uploader > * {
  position: relative;
  z-index: 1;
}

/* 每日费用登记：将 Excel 入库区收成紧凑工作卡，避免整块深色铺满页面。 */
#dailyXlsxUpload.daily-clean-upload {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  grid-template-areas:
    "drop status"
    "drop sync"
    "pending pending";
  gap: 12px;
  padding: 14px !important;
  border-color: rgba(8, 112, 78, .14) !important;
  background:
    radial-gradient(circle at 92% 8%, rgba(212, 239, 104, .15), transparent 12rem),
    linear-gradient(135deg, rgba(244, 250, 247, .98), rgba(255, 255, 255, .98)) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm) !important;
}

#dailyXlsxUpload::after {
  right: -78px;
  bottom: -100px;
  border-color: rgba(8, 112, 78, .08);
  box-shadow: 0 0 0 28px rgba(8, 112, 78, .025), 0 0 0 58px rgba(8, 112, 78, .018);
}

#dailyXlsxDrop {
  grid-area: drop;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: 18px;
  place-items: start;
  align-content: center;
  min-height: 142px;
  padding: 22px 24px !important;
  border: 1px dashed #9bcbb5 !important;
  border-radius: 15px;
  background: linear-gradient(135deg, #f1faf5, #fff) !important;
  color: var(--ink) !important;
  text-align: left;
  box-shadow: inset 0 1px #fff, 0 8px 20px rgba(8, 112, 78, .05);
}

#dailyXlsxDrop::before {
  content: "XLSX";
  grid-row: 1 / 4;
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  align-self: center;
  border-radius: 20px;
  background: linear-gradient(145deg, #0a7a55, #064735);
  color: #d9f36e;
  box-shadow: 0 12px 24px rgba(8, 84, 61, .18);
  font-family: var(--number-font);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

#dailyXlsxDrop strong {
  color: #10271f !important;
  font-size: 18px;
  line-height: 1.35;
}

#dailyXlsxDrop span {
  margin-top: 5px;
  color: #52655c !important;
  font-size: 13px;
  line-height: 1.55;
}

#dailyXlsxDrop small {
  margin-top: 4px;
  color: #83928a !important;
  font-size: 11px;
  line-height: 1.5;
}

#dailyXlsxDrop:hover,
#dailyXlsxDrop.dragover {
  border-color: var(--green) !important;
  background: linear-gradient(135deg, #eaf8f0, #fff) !important;
  transform: translateY(-1px);
}

#dailyXlsxStatus {
  grid-area: status;
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 13px 16px 13px 50px;
  border: 1px solid #dce9e2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92) !important;
  color: #44564d !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
  box-shadow: var(--shadow-xs);
}

#dailyXlsxStatus::before {
  content: "✓";
  position: absolute;
  left: 15px;
  top: 50%;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 9px;
  background: #e5f4ec;
  color: var(--green);
  transform: translateY(-50%);
}

#dailyXlsxStatus.bad::before {
  content: "!";
  background: #fdebea;
  color: var(--red);
}

#dailyXlsxUpload .daily-sync-actions {
  grid-area: sync;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid #dce9e2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .75);
}

#dailyXlsxUpload .daily-sync-actions button {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 11px;
  background: linear-gradient(135deg, #08704e, #095b43) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(8, 112, 78, .16);
}

#dailyXlsxUpload .daily-sync-actions span {
  color: #6c7d74;
  font-size: 11px;
  line-height: 1.55;
}

#dailyXlsxPending {
  grid-area: pending;
}

.upload-copy strong,
.brand-traffic-import-copy strong {
  font-size: 15px;
  letter-spacing: .01em;
}

.file-box,
.clean-drop,
.daily-image-drop,
.exam-file-input {
  border-color: rgba(255, 255, 255, .46) !important;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.file-box:hover,
.clean-drop:hover,
.daily-image-drop:hover,
.exam-file-input:hover,
.dragover {
  border-color: var(--lime) !important;
  background: rgba(255, 255, 255, .17) !important;
}

.settings,
.daily-config,
.competitor-controls,
.product-compare-controls,
.keyword-settings,
.study-toolbar,
.talent-toolbar,
.view-log-filters,
.brand-traffic-toolbar,
.brand-traffic-product-toolbar,
.brand-traffic-alert-toolbar,
.brand-traffic-improvement-form,
.config-toolbar,
.growth-toolbar {
  border: 1px solid rgba(23, 67, 51, .1) !important;
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .76) !important;
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(12px);
}

table {
  font-variant-numeric: tabular-nums;
}

th {
  top: 0;
  z-index: 2;
  border-bottom-color: #dbe6df;
  background: rgba(248, 251, 249, .96) !important;
  color: #5b6d64;
  font-size: 10px;
  font-weight: 1000;
  letter-spacing: .07em;
  backdrop-filter: blur(10px);
}

td {
  border-bottom-color: #edf2ef;
}

tbody tr {
  transition: background .14s ease;
}

tbody tr:hover {
  background: rgba(232, 245, 237, .62);
}

.tag,
.account-badge,
.competitor-tag,
.compare-tag,
.brand-traffic-low,
.brand-traffic-ok,
.brand-traffic-diagnosis-tag,
.brand-traffic-status-pill,
.ops-pill,
.growth-badges span,
.talent-tier,
.talent-status,
.study-source,
.exam-ready-badge {
  border: 1px solid rgba(8, 112, 78, .08);
  font-weight: 900;
  letter-spacing: .015em;
}

.tag.机会,
.account-badge.ok,
.brand-traffic-ok,
.brand-traffic-diagnosis-tag.growth,
.brand-traffic-status-pill.done {
  background: var(--green-soft) !important;
  color: var(--green) !important;
}

.tag.关注,
.competitor-tag.warn,
.compare-tag.warn,
.ops-pill.warn,
.talent-status.warn,
.study-source.warn,
.brand-traffic-low,
.brand-traffic-status-pill {
  background: var(--amber-soft) !important;
  color: #9a610e !important;
}

.tag:not(.关注):not(.机会),
.account-badge.off,
.competitor-tag.danger,
.compare-tag.danger,
.ops-pill.danger,
.talent-status.danger,
.brand-traffic-diagnosis-tag.decline,
.brand-traffic-diagnosis-tag.poor_conversion {
  background: var(--red-soft) !important;
  color: #b73e36 !important;
}

/* 每日费用登记 */
.daily-summary,
.daily-insights,
.daily-metric-panel,
.daily-missing-panel,
.daily-compare,
.daily-product-list,
.period-date-panel,
.clean-preview {
  border-color: rgba(23, 67, 51, .11) !important;
  border-radius: 16px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs);
}

.daily-summary > div,
.money-card,
.metric-compare-card,
.potential-card,
.sales-drop-card {
  border-color: rgba(23, 67, 51, .1) !important;
  background: rgba(255, 255, 255, .8) !important;
}

.daily-missing-alert,
.brand-traffic-ledger:not(.complete),
.brand-traffic-missing:not(.complete) {
  border-color: #f0b6b0 !important;
  background: linear-gradient(135deg, #fff7f5, rgba(255, 255, 255, .96)) !important;
  box-shadow: 0 12px 32px rgba(211, 75, 66, .07);
}

.daily-missing-ok,
.brand-traffic-ledger.complete,
.brand-traffic-missing.complete {
  border-color: #aad9bf !important;
  background: linear-gradient(135deg, #f1faf5, rgba(255, 255, 255, .96)) !important;
}

.quick-periods button.quick-active,
.period-tabs button.active {
  background: var(--green) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(8, 112, 78, .18) !important;
}

/* 品牌流量日报 */
.brand-traffic-header-actions,
.brand-traffic-utility-actions,
.brand-traffic-view-switch {
  gap: 8px;
}

.brand-traffic-view-switch {
  padding: 6px !important;
  border: 1px solid rgba(23, 67, 51, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}

.brand-traffic-view-switch button {
  min-height: 39px;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}

.brand-traffic-view-switch button.active {
  border-color: rgba(255, 255, 255, .16) !important;
  background: linear-gradient(135deg, var(--green), #095b43) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(8, 112, 78, .18) !important;
}

.brand-traffic-nav-guide {
  border: 1px solid #bfdccc !important;
  border-left: 5px solid var(--green) !important;
  border-radius: 14px !important;
  background: linear-gradient(100deg, #edf8f1, #fff) !important;
  color: var(--green-rich) !important;
  box-shadow: var(--shadow-sm);
}

.brand-traffic-card {
  min-height: 118px;
  position: relative;
  overflow: hidden;
}

.brand-traffic-card::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -28px;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(8, 112, 78, .045);
}

.brand-traffic-card strong {
  position: relative;
  z-index: 1;
  font-size: 26px;
}

.brand-traffic-diagnosis-card.active {
  border-color: #68aa8d !important;
  background: linear-gradient(135deg, #edf8f2, #fff) !important;
  box-shadow: var(--shadow-sm);
}

.brand-traffic-alert-item,
.brand-traffic-improvement-item,
.brand-traffic-ledger-item,
.brand-traffic-source-item {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: var(--shadow-xs);
}

/* 今日处理闭环 */
.ops-workbench {
  color: var(--ink);
}

.ops-head {
  padding: 20px 22px !important;
  border: 1px solid rgba(212, 239, 104, .16) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(212, 239, 104, .17), transparent 13rem),
    linear-gradient(135deg, #0b7553, #073e2e) !important;
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(8, 74, 53, .16);
}

.ops-head h1,
.ops-head h2,
.ops-head h3,
.ops-head strong {
  color: #fff !important;
}

.ops-head .ops-muted,
.ops-head p {
  color: #b9d1c7 !important;
}

.ops-card,
.ops-box {
  border-radius: 15px !important;
}

.ops-item {
  border-color: rgba(23, 67, 51, .1) !important;
  border-radius: 11px !important;
  background: rgba(248, 251, 249, .8) !important;
}

/* 诊断、关键词、同行和竞品 */
.keyword-metric,
.competitor-cards .card,
.product-compare-cards .card,
.competitor-insight,
.product-insight,
.competitor-metric-panel,
.product-compare-insights,
.competitor-detail-panel,
.product-compare-group {
  border-color: rgba(23, 67, 51, .1) !important;
  border-radius: 15px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-xs);
}

.competitor-card-link,
.product-compare-card-link,
.metric-link,
.status-link {
  color: var(--green) !important;
  text-underline-offset: 3px;
}

.competitor-chart,
.product-compare-chart,
.daily-chart {
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(232, 245, 237, .36), transparent);
}

.competitor-bars i,
.competitor-metric-bars i,
.study-progress-bar i,
.study-rank-bar i,
.talent-bar i {
  background: linear-gradient(90deg, var(--green), #42aa7e) !important;
}

/* 学习、考试、晋升、人才 */
.learning-hero,
.exam-hero,
.growth-hero,
.talent-hero,
.quality-hero {
  position: relative;
  overflow: hidden;
  border-color: rgba(212, 239, 104, .18) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(212, 239, 104, .18), transparent 13rem),
    linear-gradient(135deg, #0b6f50, #083f30) !important;
  color: #fff !important;
  box-shadow: 0 18px 44px rgba(8, 74, 53, .16);
}

.learning-hero h1,
.learning-hero h2,
.exam-hero h1,
.exam-hero h2,
.growth-hero h1,
.growth-hero h2,
.talent-hero h1,
.talent-hero h2,
.quality-hero h1,
.quality-hero h2 {
  color: #fff !important;
}

.learning-hero p,
.exam-hero p,
.growth-hero p,
.talent-hero p,
.quality-hero p,
.learning-hero .muted,
.growth-hero .muted,
.talent-hero .muted {
  color: #bad2c8 !important;
}

/* 晋升体系：使用轻量路线卡片，保留墨玉识别但不再铺满深色。 */
#growthSystemPage .growth-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 146px;
  padding: 24px 28px 24px 34px !important;
  border: 1px solid rgba(8, 112, 78, .14) !important;
  background:
    radial-gradient(circle at 88% 18%, rgba(212, 239, 104, .18), transparent 10rem),
    linear-gradient(118deg, rgba(255, 255, 255, .98), rgba(240, 248, 244, .98)) !important;
  color: var(--ink) !important;
  box-shadow: var(--shadow-sm);
}

#growthSystemPage .growth-hero::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 24px;
  bottom: 24px;
  width: 5px;
  border-radius: 99px;
  background: linear-gradient(180deg, #d4ef68, var(--green));
  box-shadow: 0 0 0 6px rgba(8, 112, 78, .045);
}

#growthSystemPage .growth-hero::after {
  content: "";
  position: absolute;
  left: auto;
  right: 118px;
  top: -64px;
  bottom: auto;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(8, 112, 78, .08);
  border-radius: 50%;
  background: none;
  box-shadow: 0 0 0 34px rgba(8, 112, 78, .025), 0 0 0 68px rgba(8, 112, 78, .015);
  pointer-events: none;
}

#growthSystemPage .growth-hero > * {
  position: relative;
  z-index: 1;
}

#growthSystemPage .growth-hero .eyebrow {
  color: var(--green) !important;
}

#growthSystemPage .growth-hero h1 {
  margin-top: 5px;
  color: #10271f !important;
  font-size: clamp(30px, 2.2vw, 38px);
  letter-spacing: -.04em;
}

#growthSystemPage .growth-hero p:not(.eyebrow) {
  max-width: 660px;
  margin-top: 8px;
  color: #64766d !important;
  font-size: 14px;
}

#refreshGrowthSystem {
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid rgba(8, 112, 78, .18) !important;
  border-radius: 12px;
  background: linear-gradient(135deg, #08704e, #09533e) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(8, 112, 78, .17);
}

#refreshGrowthSystem::before {
  content: "↻";
  margin-right: 7px;
  color: #d4ef68;
  font-size: 15px;
}

.learning-sidebar,
.exam-sidebar,
.growth-side,
.talent-method-panel,
.config-tabs {
  border: 1px solid rgba(23, 67, 51, .1) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .76) !important;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}

.learning-sidebar button.active,
.exam-sidebar button.active,
.growth-tabs button.active,
.config-tabs button.active {
  background: linear-gradient(135deg, var(--green), #095c43) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(8, 112, 78, .16) !important;
}

@media (max-width: 980px) {
  #dailyXlsxUpload.daily-clean-upload {
    grid-template-columns: 1fr;
    grid-template-areas: "drop" "status" "sync" "pending";
  }

  #dailyXlsxUpload .daily-sync-actions {
    grid-template-columns: 1fr;
  }

  #dailyXlsxUpload .daily-sync-actions button {
    width: 100%;
  }

  #growthSystemPage .growth-hero {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  #refreshGrowthSystem {
    justify-self: start;
  }
}

@media (max-width: 620px) {
  #dailyXlsxDrop {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    justify-items: center;
    text-align: center;
  }

  #dailyXlsxDrop::before {
    grid-row: auto;
    width: 58px;
    height: 58px;
    margin-bottom: 6px;
  }

  #growthSystemPage .growth-hero {
    padding: 22px 20px 22px 28px !important;
  }
}

.learning-folder-card,
.exam-folder-card,
.growth-stage,
.talent-card,
.quality-card {
  border-radius: 15px !important;
}

.learning-folder-icon,
.exam-folder-icon,
.learning-icon,
.exam-icon,
.growth-stage-index {
  background: linear-gradient(145deg, var(--lime-soft), #e4f3a9) !important;
  color: var(--green-deep) !important;
  box-shadow: inset 0 0 0 1px rgba(8, 112, 78, .08);
}

.exam-ready-shell,
.exam-result-shell,
.exam-review-shell,
.online-exam-shell {
  border-color: rgba(23, 67, 51, .12) !important;
  border-radius: 18px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-md);
}

.online-exam-question,
.exam-review-question,
.exam-wrong-card,
.growth-task,
.talent-dimension,
.talent-evidence {
  border-color: rgba(23, 67, 51, .1) !important;
  border-radius: 12px !important;
  background: rgba(249, 252, 250, .92) !important;
}

.talent-score,
.exam-result-score {
  font-family: var(--number-font);
  color: var(--green) !important;
  text-shadow: 0 8px 24px rgba(8, 112, 78, .12);
}

/* 查看记录、配置和账号 */
.view-log-cards,
.study-summary,
.talent-summary,
.quality-grid {
  gap: 12px;
}

.view-log-rank-row,
.audit-bar-row,
.view-log-rule-row,
.store-owner-item,
.quality-row {
  border-color: rgba(23, 67, 51, .1) !important;
  border-radius: 11px !important;
  background: rgba(249, 252, 250, .88) !important;
}

.config-panel {
  border-color: rgba(23, 67, 51, .1) !important;
  border-radius: 16px !important;
  background: var(--surface) !important;
  box-shadow: var(--shadow-sm);
}

.config-pill.active,
.primary-lite {
  background: var(--green-soft) !important;
  color: var(--green) !important;
}

.account-form,
.store-owner-grid {
  gap: 12px;
}

.account-actions button {
  border: 1px solid rgba(8, 112, 78, .08);
  background: var(--green-soft);
  color: var(--green);
  box-shadow: none !important;
}

.account-actions .danger,
.config-delete-shop {
  background: var(--red-soft) !important;
  color: var(--red) !important;
}

#toast,
.brand-traffic-toast {
  border: 1px solid rgba(212, 239, 104, .16) !important;
  background: var(--green-deep) !important;
  color: #fff !important;
  box-shadow: 0 18px 45px rgba(4, 29, 21, .24) !important;
}

.icp-footer,
.icp-footer a {
  color: #829189 !important;
}

/* 登录页 */
body.auth-page {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 16% 12%, rgba(212, 239, 104, .2), transparent 18rem),
    radial-gradient(circle at 84% 84%, rgba(8, 112, 78, .2), transparent 28rem),
    linear-gradient(140deg, #061e17 0%, #0b3428 44%, #edf4ef 44.2%, var(--paper) 100%);
}

body.auth-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(90deg, #000, transparent 58%);
}

.auth-shell {
  position: relative;
  z-index: 1;
  width: min(540px, calc(100vw - 32px));
}

.auth-card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 24px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 32px 90px rgba(5, 33, 24, .28);
  backdrop-filter: blur(18px);
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--lime) 68%, var(--green));
}

.auth-brand span {
  border: 1px solid rgba(8, 112, 78, .1);
  background: linear-gradient(145deg, #e7fa8b, var(--lime));
  box-shadow: 0 12px 28px rgba(8, 112, 78, .16);
}

.auth-brand b {
  color: var(--green-deep);
}

.auth-motto {
  border: 1px solid rgba(212, 239, 104, .16);
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 10%, rgba(212, 239, 104, .17), transparent 10rem),
    linear-gradient(135deg, #0b6e4f, #082a20);
  font-size: 25px;
  box-shadow: 0 18px 42px rgba(8, 70, 51, .2);
}

.auth-slogan {
  border-left-color: var(--green);
  background: linear-gradient(100deg, var(--green-soft), #fff);
  color: var(--green-rich);
}

.auth-form input {
  min-height: 48px;
  border-radius: 12px;
}

.auth-form button {
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--green), #07553e);
  color: #fff;
  box-shadow: 0 12px 28px rgba(8, 112, 78, .22) !important;
}

.auth-icp,
.auth-icp a {
  color: #7c8d84 !important;
}

@media (max-width: 1280px) {
  body:not(.auth-page) > main {
    padding: 30px 30px 58px;
  }

  .brand-traffic-cards {
    grid-template-columns: repeat(4, minmax(116px, 1fr));
  }
}

@media (max-width: 1100px) {
  body:not(.auth-page) {
    display: block;
  }

  body > aside {
    display: flex !important;
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 1002;
    width: min(86vw, 320px);
    height: 100dvh;
    padding-top: 24px;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-105%);
    visibility: hidden;
    transition: transform .22s ease, visibility .22s ease;
  }

  body.mobile-nav-open > aside {
    transform: translateX(0);
    visibility: visible;
  }

  body.mobile-nav-open {
    overflow: hidden;
  }

  .mobile-nav-toggle {
    position: fixed;
    top: 12px;
    left: 14px;
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 14px;
    border: 1px solid rgba(8, 112, 78, .2);
    border-radius: 12px;
    background: rgba(255, 255, 255, .96);
    color: var(--green-deep);
    box-shadow: 0 10px 28px rgba(8, 41, 31, .14);
    backdrop-filter: blur(10px);
  }

  .mobile-nav-toggle span:first-child {
    font-size: 20px;
    line-height: 1;
  }

  .mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: rgba(3, 20, 14, .55);
    backdrop-filter: blur(2px);
  }

  .mobile-nav-backdrop[hidden] {
    display: none;
  }

  body:not(.auth-page) > main {
    padding: 76px 24px 42px;
  }

  body:not(.auth-page) > main > header {
    min-height: auto;
  }

  .brand-traffic-view-switch {
    overflow-x: auto;
    justify-content: flex-start;
  }
}

@media (max-width: 700px) {
  body:not(.auth-page) > main {
    padding: 76px 14px 42px;
  }

  h1 {
    font-size: 28px;
  }

  .page-mantra {
    font-size: 14px;
  }

  .card,
  .panel,
  .settings {
    border-radius: 14px;
  }

  .brand-traffic-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .brand-traffic-card {
    min-height: 108px;
  }

  .auth-card {
    padding: 26px 22px;
    border-radius: 20px;
  }

  .auth-motto {
    font-size: 21px;
  }
}

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