:root {
  --front-brand: #0f9f6e;
  --front-brand-2: #2f6fed;
  --front-accent: #f59e0b;
  --front-ink: #162033;
  --front-muted: #667085;
  --front-line: #d9e2ef;
  --front-bg: #f5f7fb;
  --front-surface: #ffffff;
  --front-soft: #eef7f3;
  --front-danger: #dc2626;
  --front-radius: 8px;
  --front-shadow: 0 10px 28px rgba(22, 32, 51, .10);
  --front-shadow-soft: 0 4px 14px rgba(22, 32, 51, .08);
  color-scheme: light;
}

* {
  letter-spacing: 0;
}

html {
  background: var(--front-bg);
}

body {
  background: linear-gradient(180deg, #f8fafc 0%, var(--front-bg) 42%, #eef4f8 100%) !important;
  color: var(--front-ink);
  font-family: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif !important;
}

a {
  color: inherit;
}

.header,
.top-header,
.top-nav {
  background: linear-gradient(135deg, #0d805e 0%, #2563eb 100%) !important;
  box-shadow: var(--front-shadow-soft) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.header .welcome,
.top-nav h1,
.top-header h1 {
  font-weight: 750 !important;
}

.header .user-info a,
.top-nav a,
.top-header a {
  border-radius: var(--front-radius) !important;
  text-decoration: none !important;
}

.header .user-info a:hover,
.top-nav a:hover,
.top-header a:hover {
  background: rgba(255, 255, 255, .16) !important;
  color: #fff !important;
}

.container,
.main-container {
  width: min(94%, 1240px) !important;
}

.summary-bar,
.announcement-container,
.task-mode-nav,
.task-type-nav,
.batch-nav,
.type-nav,
.scope-nav,
.filter-bar,
.sec-nav,
.admin-nav,
.profile-card,
.message-area,
.notice,
.rules-list > div {
  border: 1px solid var(--front-line) !important;
  border-radius: var(--front-radius) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: var(--front-shadow-soft) !important;
}

.summary-bar {
  align-items: center;
}

.summary-bar .pill,
.pill,
.badge,
.status,
.task-status {
  border-radius: 999px !important;
  border: 1px solid rgba(47, 111, 237, .18) !important;
  background: #eef4ff !important;
  color: #21406f !important;
  font-weight: 700;
}

.workbench {
  gap: 14px !important;
  margin: 26px auto 18px !important;
}

.workbench a {
  width: 136px !important;
  height: 118px !important;
  border-radius: var(--front-radius) !important;
  background: linear-gradient(135deg, var(--front-brand), var(--front-brand-2)) !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  box-shadow: 0 10px 24px rgba(15, 159, 110, .20) !important;
}

.workbench a:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 30px rgba(37, 99, 235, .24) !important;
}

.workbench svg {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 8px !important;
}

.task-type-container,
.task-mode-nav {
  gap: 10px !important;
}

.task-type-link,
.task-mode-nav a,
.batch-nav a,
.type-nav a,
.sec-nav a {
  border-radius: var(--front-radius) !important;
  border: 1px solid var(--front-line) !important;
  background: var(--front-surface) !important;
  color: var(--front-ink) !important;
  text-decoration: none !important;
}

.task-type-link.active,
.task-mode-nav a.active,
.batch-nav a.active,
.type-nav a.active,
.sec-nav a.active {
  background: linear-gradient(135deg, var(--front-brand), var(--front-brand-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(47, 111, 237, .22) !important;
}

.task-type-link.active .task-type-title,
.task-type-link.active .task-type-tip,
.task-mode-nav a.active .task-mode-title,
.task-mode-nav a.active .task-mode-tip,
.batch-nav a.active,
.type-nav a.active,
.scope-nav a.active {
  color: rgba(255, 255, 255, .96) !important;
}

.keyword-card,
.task-card,
.card,
.summary-item,
.data-card,
.info-table,
.table-wrap {
  border-radius: var(--front-radius) !important;
  border: 1px solid var(--front-line) !important;
  background: var(--front-surface) !important;
  box-shadow: var(--front-shadow-soft) !important;
}

.keyword-card:hover,
.task-card:hover,
.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--front-shadow) !important;
}

.keyword-card h3,
.task-card h3,
.section-title,
.admin-nav h2 {
  color: var(--front-ink) !important;
  font-weight: 780 !important;
}

.section-desc,
.task-type-tip,
.task-mode-tip,
.sub,
.text-muted {
  color: var(--front-muted) !important;
}

button,
.btn,
.button,
input[type="submit"] {
  border-radius: var(--front-radius) !important;
  font-weight: 750 !important;
}

.btn.primary,
.button.approve-btn,
.accept-btn,
button[type="submit"],
input[type="submit"] {
  background: linear-gradient(135deg, var(--front-brand), var(--front-brand-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(47, 111, 237, .18);
}

.reject-btn,
.bad-btn,
.danger,
.btn.danger {
  background: linear-gradient(135deg, var(--front-danger), #f97316) !important;
  border-color: transparent !important;
  color: #fff !important;
}

input,
select,
textarea,
.form-control,
.search-form input,
.search-form select,
.filter-bar input,
.filter-bar select {
  border-radius: var(--front-radius) !important;
  border: 1px solid var(--front-line) !important;
  background: #fff !important;
  color: var(--front-ink) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  outline: none !important;
  border-color: var(--front-brand-2) !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, .14) !important;
}

.floating-pocket {
  border-radius: var(--front-radius) !important;
  background: linear-gradient(135deg, var(--front-accent), var(--front-brand)) !important;
}

.modal-content,
.login-container {
  border-radius: var(--front-radius) !important;
  border: 1px solid var(--front-line) !important;
  box-shadow: var(--front-shadow) !important;
}

.illustration-side {
  background: linear-gradient(135deg, #0d805e, #2563eb) !important;
}

.form-side .slogan,
.logo-container .slogan {
  color: var(--front-ink) !important;
}

@media (max-width: 768px) {
  .header {
    gap: 10px !important;
  }

  .workbench a {
    width: 118px !important;
    height: 108px !important;
  }

  .task-type-container,
  .task-mode-nav,
  .summary-bar {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
}