/* JLU independent subscription page: appearance only, no form or request changes.
   Loaded only by the exact /email-subscribe HTML route, never the monitor app. */
:root { color-scheme: light; }
body {
  background-color: #f5f9fc;
  background-image:
    linear-gradient(118deg, transparent 21%, rgb(255 255 255 / 62%) 21.2%, transparent 22%, transparent 72%, rgb(145 191 223 / 12%) 72.2%, rgb(255 255 255 / 72%) 72.5%, transparent 73.3%),
    linear-gradient(108deg, rgb(234 245 253 / 46%), rgb(255 255 255 / 86%) 34%, rgb(255 255 255 / 80%) 64%, rgb(221 238 250 / 44%)),
    url("/assets/home/glass-light-v19.webp");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: normal, normal, luminosity;
  color: #2a4356;
  font-family: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body .min-h-screen.bg-slate-50 {
  background: transparent;
  color: #2a4356;
}
body header.bg-white {
  background: #ffffff;
  border-color: rgb(45 86 120 / 16%);
  box-shadow: 0 4px 18px rgb(24 52 73 / 4%);
}
body main section.bg-white,
body main aside.bg-white {
  background: rgb(250 251 252 / 94%);
  border-color: rgb(45 86 120 / 17%);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 #fff, 0 2px 5px rgb(24 52 73 / 3%), 0 10px 24px rgb(24 52 73 / 6%);
}
body .text-slate-950,
body .text-slate-900 { color: #123e62; }
body .text-slate-700 { color: #2a4356; }
body .text-slate-600,
body .text-slate-500 { color: #495e6e; }
body .text-slate-400 { color: #607484; }
body .text-teal-700,
body .text-teal-600 { color: #245b85; }
body .bg-teal-700 { background-color: #245b85; }
body .hover\:bg-teal-800:hover { background-color: #123e62; }
body .hover\:text-teal-800:hover { color: #123e62; }
body .border-slate-200,
body .border-slate-100 { border-color: rgb(45 86 120 / 13%); }
body thead.bg-slate-50 { background: #e8edf0; }
body tr.hover\:bg-slate-50:hover { background: rgb(45 86 120 / 5%); }
body tr.bg-teal-50 { background: #e3ecf3; }
body .bg-teal-50 { background-color: #e3ecf3; }
body .border-teal-200 { border-color: rgb(45 86 120 / 28%); }
body input:not([type="checkbox"]),
body select {
  background-color: #fff;
  border-color: rgb(45 86 120 / 30%);
  color: #2a4356;
}
body input::placeholder { color: #607484; }
body input[type="checkbox"] { accent-color: #2d5678; }
body input:focus-visible,
body select:focus-visible,
body button:focus-visible,
body a:focus-visible {
  outline: 2px solid #2d5678;
  outline-offset: 3px;
  --tw-ring-color: rgb(45 86 120 / 20%);
}
body input:focus,
body select:focus { border-color: #2d5678; }
body input:disabled,
body select:disabled { background-color: #e8edf0; }
body ::selection { background: #dcebf6; color: #123e62; }
body input:not([type="checkbox"]), body select, body main button {
  border-radius: 10px;
  transition: background-color 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}
body main button:disabled { cursor: not-allowed; }
/* Match the site's compact section frontispiece without changing the form DOM. */
body main > .mb-6:has(> h1) {
  position: relative;
  min-height: 152px;
  padding: 30px 210px 30px 30px;
  border: 1px solid rgb(255 255 255 / 94%);
  border-radius: 20px;
  background-color: #f1f7fb;
  background-image: linear-gradient(100deg, rgb(250 252 254 / 96%) 20%, rgb(244 250 254 / 50%) 68%, rgb(232 244 252 / 20%)), url("/assets/home/glass-light-v19.webp");
  background-size: cover;
  background-position: center;
  background-blend-mode: normal, luminosity;
  box-shadow: inset 0 0 0 1px rgb(77 130 169 / 14%), 0 8px 28px rgb(34 76 106 / 5%);
}
body main > .mb-6 > h1 { font-size: 30px; line-height: 1.35; letter-spacing: -.02em; }
body main > .mb-6 > p { margin-top: 12px; max-width: 620px; line-height: 1.7; }
body main > .mb-6:has(> h1)::before,
body main > .mb-6:has(> h1)::after { content: ""; position: absolute; pointer-events: none; }
body main > .mb-6:has(> h1)::before {
  right: 52px;
  top: calc(50% - 53px);
  width: 108px;
  height: 108px;
  border: 1px solid rgb(255 255 255 / 96%);
  border-radius: 20px;
  background: linear-gradient(135deg, rgb(255 255 255 / 82%), rgb(236 247 254 / 65%), rgb(250 253 255 / 92%));
  box-shadow: inset 0 0 0 1px rgb(45 105 149 / 17%), inset 2px 2px 2px #ffffff, 10px -7px 0 rgb(174 208 232 / 32%), 0 14px 24px rgb(32 80 113 / 16%);
  transform: rotate(-8deg);
}
body main > .mb-6:has(> h1)::after {
  right: 76px;
  top: calc(50% - 29px);
  width: 60px;
  height: 60px;
  background: #245b85;
  mask: url("/assets/icons/envelope-simple.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/envelope-simple.svg") center / contain no-repeat;
}
@media (max-width: 767px) {
  body main > .mb-6:has(> h1) { min-height: 0; padding: 20px; border-radius: 16px; }
  body main > .mb-6 > h1 { display: flex; align-items: center; min-height: 70px; padding-right: 86px; font-size: 24px; }
  body main > .mb-6 > p { margin-top: 12px; }
  body main > .mb-6:has(> h1)::before { right: 24px; top: 23px; width: 64px; height: 68px; border-radius: 14px; }
  body main > .mb-6:has(> h1)::after { right: 37px; top: 39px; width: 38px; height: 38px; }
}
@media (prefers-reduced-transparency: reduce) {
  body main > .mb-6:has(> h1) { background: #f1f7fb; }
  body main > .mb-6:has(> h1)::before { background: #f4f9fc; }
}
@media (prefers-reduced-motion: reduce) {
  body input, body select, body main button { transition: none; }
}

/* Mobile detail pass: keep existing inputs, selection state and request handlers. */
@media (max-width: 767px) {
  body { background-attachment: scroll; }
  body input:not([type="checkbox"]), body select { min-height: 44px; font-size: 16px; }
  body main table { min-width: 0; width: 100%; }
  body main thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body main tbody { display: block; }
  body main tbody tr {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    padding: 14px 12px 14px 4px;
  }
  body main tbody td { min-width: 0; padding: 3px 8px; overflow-wrap: anywhere; }
  body main tbody td:first-child:not([colspan]) { grid-column: 1; grid-row: 1 / span 4; display: grid; place-items: center; padding: 0; }
  body main tbody input[type="checkbox"] { width: 24px; height: 24px; margin: 10px; flex-shrink: 0; }
  body main tbody td:nth-child(n+2) { grid-column: 2; }
  body main tbody td:nth-child(2) { font-size: 15px; font-weight: 600; color: #193c57; }
  body main tbody td:nth-child(3)::before { content: "项目 · "; color: #607484; }
  body main tbody td:nth-child(4)::before { content: "分类 · "; }
  body main tbody td:nth-child(4) { font-size: 12px; }
  body main tbody td:last-child { padding-top: 8px; }
  body main tbody td[colspan] { grid-column: 1 / -1; padding: 24px 12px; }
  body main tbody a { min-height: 44px; flex-wrap: wrap; padding-inline: 0; gap: 4px 10px; }
  body main tbody a .truncate { white-space: normal; overflow: visible; text-overflow: clip; }
  body main section > div.overflow-auto { max-height: 60dvh; scrollbar-width: thin; scrollbar-color: #8da4b6 #e8edf0; }
}