/* 墨舟简繁 — ink-blue / cyan accent over the shared Batch-2 shell. */
:root {
  --paper: #edf6f7;
  --paper-deep: #dbeaee;
  --card: #fbfeff;
  --card-soft: #f0fafb;
  --ink: #102a33;
  --muted: #58727b;
  --line: #153d49;
  --soft-line: #bfd7dd;
  --accent: #0a7f9b;
  --accent-dark: #075468;
  --accent-soft: #d5f0f5;
  --green: #2c6b57;
  --green-soft: #dcefe7;
  --warning: #a33c22;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-soft: 3px 3px 0 var(--ink);
  --radius: 18px;
  --radius-sm: 10px;
}

body {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(10, 58, 72, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 58, 72, .045) 1px, transparent 1px),
    radial-gradient(circle at 82% 8%, rgba(10, 127, 155, .10), transparent 34%);
  background-size: 28px 28px, 28px 28px, auto;
}

.site-header {
  position: sticky;
  top: 0;
  background: rgba(237, 246, 247, .9);
  border-bottom-color: rgba(21, 61, 73, .16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brand-mark,
.footer-mark {
  color: #f7feff;
  background: var(--accent);
  border-color: var(--ink);
}

.brand-mark { font-size: 21px; }
.top-nav a::after { background: var(--accent); }
::selection { color: #f7feff; background: var(--accent-dark); }

.hero {
  grid-template-columns: minmax(0, 1.22fr) minmax(310px, .78fr);
  gap: clamp(38px, 7vw, 94px);
  padding-block: clamp(48px, 7vw, 92px) 72px;
}

.hero h1 {
  font-size: clamp(52px, 7.4vw, 92px);
  letter-spacing: -.075em;
}

.hero h1 em { color: var(--accent); }
.hero h1 em::after {
  background: var(--accent);
  opacity: .15;
  height: .16em;
  border-radius: 100%;
}

.hero-lead { color: #40616b; }
.eyebrow span { color: #f7feff; background: var(--accent-dark); }
.hero-facts span {
  background: rgba(251, 254, 255, .7);
  border-color: var(--soft-line);
  color: #31525c;
}

.glyph-panel {
  position: relative;
  isolation: isolate;
  padding: 23px 24px 20px;
  color: #e6f8fa;
  background:
    radial-gradient(circle at 82% 10%, rgba(76, 192, 211, .18), transparent 32%),
    #0f2c35;
  border: 1.5px solid #0a2027;
  border-radius: 24px;
  box-shadow: 12px 12px 0 var(--accent);
  transform: rotate(.35deg);
}

.glyph-panel::after {
  content: "简 繁";
  position: absolute;
  right: -11px;
  bottom: -17px;
  padding: 6px 10px;
  color: #0f2c35;
  background: #a6e3ec;
  border: 1.5px solid #0f2c35;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  transform: rotate(-4deg);
}

.glyph-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  color: #91bac3;
  border-bottom: 1px solid rgba(195, 233, 239, .2);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .1em;
}

.glyph-index { color: #c8eef3; }
.glyph-list { padding: 7px 0 5px; }

.glyph-row {
  display: grid;
  grid-template-columns: 1fr 28px 1.2fr 48px;
  align-items: center;
  min-height: 62px;
  border-bottom: 1px solid rgba(195, 233, 239, .14);
}

.glyph-row:last-child { border-bottom: 0; }
.glyph-s {
  color: #8bb3bd;
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1;
}
.glyph-arrow {
  color: #4cc0d3;
  font-family: var(--font-mono);
  font-size: 14px;
  text-align: center;
}
.glyph-t {
  color: #f6feff;
  font-family: var(--font-display);
  font-size: clamp(46px, 5.4vw, 62px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.glyph-row small {
  color: #84abb4;
  font-family: var(--font-mono);
  font-size: 9px;
  text-align: right;
}

.glyph-foot {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-top: 13px;
  border-top: 1px solid rgba(195, 233, 239, .2);
}
.glyph-stamp {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #0f2c35;
  background: #4cc0d3;
  border: 1px solid #d8f7fa;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}
.glyph-foot p {
  margin: 1px 0 0;
  color: #a8c9d0;
  font-size: 10.5px;
  line-height: 1.65;
}

.studio { scroll-margin-top: 86px; }
.converter-card {
  padding: clamp(22px, 3.4vw, 40px);
  background:
    linear-gradient(140deg, rgba(213, 240, 245, .34), transparent 38%),
    var(--card);
}
.converter-heading { align-items: flex-start; }
.converter-heading h2 { font-size: clamp(30px, 4vw, 42px); }
.converter-heading p:not(.section-index) { max-width: 640px; }

.converter-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 0 18px;
}
.direction-tabs { margin: 0; background: #e7f2f4; }
.mode-tab { min-width: 92px; }
.mode-tab.is-active,
.mode-tab[aria-selected="true"] { box-shadow: 2px 2px 0 var(--accent); }
.swap-button { font-family: var(--font-mono); font-size: 11px; }

.editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.editor-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 15px;
  background: #f5fbfc;
  border: 1px solid var(--soft-line);
  border-radius: 14px;
}
.output-side { background: #eef9fa; }
.editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.editor-head > span:last-child,
.result-label + span {
  padding: 2px 8px;
  color: var(--accent-dark);
  background: #e1f2f5;
  border: 1px solid #b9dde4;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
}
#inputText {
  flex: 1;
  min-height: 292px;
  padding: 14px;
  color: var(--ink);
  background: #fffefe;
  border-color: #91b9c2;
  font-size: 15px;
  line-height: 1.8;
  resize: vertical;
}
#inputText:focus { border-color: var(--accent); }

#result {
  flex: 1;
  min-height: 292px;
  max-height: 390px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  color: var(--ink);
  background: #fbfeff;
  border: 1px solid #a9cbd3;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(10, 58, 72, .04);
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
#result:empty::before { content: "转换结果会显示在这里"; color: #7b969e; }
#result .diff-mark {
  padding: 0 .04em;
  color: var(--ink);
  background: #bcebf2;
  border-radius: 2px;
  box-shadow: inset 0 -.2em 0 #72cfdf;
}
#result .diff-mark::selection { background: var(--accent-dark); }

.result-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.result-actions .button,
.result-actions .copy-button { flex: 1 1 auto; }
.copy-button {
  color: var(--accent-dark);
  background: #eaf6f8;
  border-color: #9cc5cd;
}
.copy-button.is-copied { color: var(--green); background: var(--green-soft); border-color: var(--green); }
.result-actions .tiny-lock { margin-left: 2px; }

.editor-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  color: var(--muted);
  font-size: 10px;
}
.sample-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sample-chip {
  min-height: 32px;
  padding: 4px 9px;
  color: var(--accent-dark);
  background: #edf8fa;
  border: 1px solid #b9d8de;
  border-radius: 100px;
  font-size: 10.5px;
  cursor: pointer;
}
.sample-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.mini-note { font-size: 10.5px; }

.converter-actions { margin-top: 18px; }
.converter-actions .button-primary { min-width: 176px; }
.converter-stats { margin-top: 18px; }
.converter-stats .stat { background: #f7fcfd; border-color: #c4dfe4; }
.converter-stats .stat strong { color: var(--accent-dark); }
.converter-stats .stat span { color: var(--muted); }

.limit-row { margin-top: 13px; }
.limit-copy {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
}
#limitState { color: var(--accent-dark); }
.usage-meter { margin-top: 6px; background: #e0edef; border-color: #c2dadd; }
.usage-meter > i { background: var(--accent); }
.usage-meter.is-over > i { background: var(--warning); }
.usage-meter.is-unlimited > i { width: 100% !important; background: var(--green); }

.form-notice {
  margin: 15px 0 0;
  padding: 10px 12px;
  color: #315963;
  background: #eaf7f9;
  border-left: 4px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 11.5px;
  line-height: 1.7;
}
.form-notice.is-warning { color: #7a2c18; background: #ffeadf; border-left-color: var(--warning); }
.form-notice.is-ok { color: #24574a; background: #e4f4ec; border-left-color: var(--green); }
.form-notice.is-error { color: #8a2816; background: #ffe4dc; border-left-color: #a33c22; }

.pair-panel {
  margin-top: 20px;
  padding-top: 17px;
  border-top: 1px dashed #b9d4da;
}
.pair-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 10px;
}
.pair-heading h3 { margin: 0; font-size: 14px; letter-spacing: .03em; }
.pair-heading span { color: var(--muted); font-family: var(--font-mono); font-size: 9.5px; }
.pair-strip { display: flex; flex-wrap: wrap; gap: 7px; min-height: 34px; }
.pair-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  color: var(--ink);
  background: #f4fbfc;
  border: 1px solid #c1dce2;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.25;
}
.pair-chip i {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
}
.pair-chip small { color: var(--muted); font-family: var(--font-sans); font-size: 9px; }
.pair-empty { color: var(--muted); font-size: 11px; }
.honesty-note {
  margin: 16px 0 0;
  padding-top: 13px;
  color: var(--muted);
  border-top: 1px solid #d5e7ea;
  font-size: 10.5px;
  line-height: 1.75;
}
.honesty-note strong { color: var(--accent-dark); }

.premium-tools { margin-top: 54px; scroll-margin-top: 86px; }
.premium-heading { margin-bottom: 20px; }
.premium-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 22px;
  align-items: start;
}
.long-card,
.diff-card { padding: clamp(22px, 3vw, 34px); }
.long-card { box-shadow: 5px 5px 0 var(--accent); }
.diff-card { box-shadow: 5px 5px 0 var(--green); }
.batch-heading h3 {
  margin: 2px 0 0;
  font-family: var(--font-display);
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.22;
  letter-spacing: -.02em;
}
.batch-heading p:not(.section-index) { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.long-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}
.long-controls .field-label { flex: 1 1 190px; margin: 0; }
.long-controls select { width: 100%; }
.long-controls .mini-note { margin: 0 0 11px; white-space: nowrap; }
#longInput { min-height: 180px; background: #fffefe; }
.long-result {
  min-height: 128px;
  max-height: 310px;
  margin-top: 16px;
  padding: 13px;
  overflow: auto;
  color: var(--ink);
  background: #f5fbfc;
  border: 1px dashed #9fc5cd;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.long-result:empty::before { content: "长文转换结果会显示在这里"; color: var(--muted); font-size: 11px; }

.diff-demo {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 6px 10px;
  margin: 17px 0;
  padding: 13px;
  background: #f3fafb;
  border: 1px solid #c5dee3;
  border-radius: 9px;
}
.diff-demo > span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .08em;
}
.diff-demo p {
  margin: 0;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.45;
}
.diff-demo mark {
  padding: 0 .08em;
  color: var(--ink);
  background: #bcebf2;
  border-radius: 2px;
  box-shadow: inset 0 -.18em 0 #72cfdf;
}
.diff-list {
  margin: 0 0 17px;
  padding: 0;
  list-style: none;
}
.diff-list li {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  color: #3f5c65;
  border-bottom: 1px dashed #c7dfe3;
  font-size: 11.5px;
}
.diff-list li:last-child { border-bottom: 0; }
.diff-list span { flex: 0 0 auto; color: var(--accent-dark); font-family: var(--font-mono); font-size: 9px; }
.diff-jump { width: 100%; }

.guide-shell,
.faq-shell { scroll-margin-top: 86px; }
.how-to-grid li { border-color: var(--line); box-shadow: 3px 3px 0 var(--accent); }
.how-to-grid li > span { background: var(--accent); }
.faq-list details { background: rgba(251, 254, 255, .8); }
.faq-list summary::after { color: var(--accent); }
.faq-list details[open] { border-color: #9fc5cd; box-shadow: 2px 2px 0 rgba(10, 127, 155, .16); }

.unlock-section { scroll-margin-top: 86px; }
.premium-map { box-shadow: 5px 5px 0 var(--accent); }
.referral-card { color: #f2fbfc; background: #0f2c35; box-shadow: 7px 7px 0 var(--accent); }
.referral-card::after { border-color: #4cc0d3; }
.referral-kicker { color: #9fc3cb; }
.referral-dot { background: #4cc0d3; }
.referral-heading p { color: #b4d0d6; }
.referral-badge { color: #bdd7dc; border-color: #54747c; }
.referral-badge.is-unlocked,
.referral-badge.is-trial { color: #0f2c35; background: #bcebf2; border-color: #bcebf2; }
.referral-steps i { background: #34545d; }
.referral-steps i.is-filled { background: #4cc0d3; }
.referral-link { color: #eafafc !important; background: #163c46 !important; border-color: #4c6c74 !important; }
.referral-copy { color: #0f2c35; background: #4cc0d3; border-color: #4cc0d3; }
.referral-trial { color: #d8f7fa; background: rgba(76, 192, 211, .14); border-color: rgba(76, 192, 211, .32); }

.site-footer { background: #0f2c35; color: #eaf7f9; }
.footer-base { color: #87a8af; border-top-color: #34545d; }
.footer-links a,
#toolLinks a { color: #c3dbe0; }
.footer-links a:hover,
#toolLinks a:hover { color: #7cdbe8; }
.footer-brand p { color: #9ab9c0; }
.footer-mark { color: #0f2c35; background: #4cc0d3; border-color: #eaf7f9; }

body.is-premium .lock-note { display: none; }
body.is-premium .premium-chip { background: var(--green); border-color: var(--green); }
body.is-premium .long-card,
body.is-premium .diff-card { box-shadow: 5px 5px 0 var(--green); }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .glyph-panel { justify-self: start; width: min(100%, 500px); transform: none; }
  .premium-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .editor-grid { grid-template-columns: 1fr; }
  #inputText,
  #result { min-height: 230px; }
  .converter-toolbar { align-items: stretch; }
  .direction-tabs { width: 100%; }
  .direction-tabs .mode-tab { flex: 1; }
  .swap-button { width: 100%; }
  .converter-stats { grid-template-columns: 1fr 1fr; }
  .result-actions .button,
  .result-actions .copy-button { flex: 1 1 46%; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: clamp(43px, 15vw, 58px); }
  .glyph-panel { padding: 18px 17px 16px; box-shadow: 8px 8px 0 var(--accent); }
  .glyph-row { grid-template-columns: 1fr 22px 1.15fr 38px; min-height: 55px; }
  .glyph-t { font-size: 44px; }
  .glyph-s { font-size: 26px; }
  .converter-card { padding: 17px; }
  .editor-side { padding: 11px; }
  .converter-stats { grid-template-columns: 1fr 1fr; }
  .converter-stats .stat { padding: 10px; }
  .pair-chip { font-size: 15px; }
  .sample-chip { min-height: 36px; }
  .result-actions .button,
  .result-actions .copy-button,
  .converter-actions .button { width: 100%; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .glyph-panel { transform: none; }
  .button,
  .copy-button,
  .sample-chip { transition: none; }
}