:root {
  --paper: #f5f0e6;
  --ink: #1e302c;
  --muted: #52635e;
  --orange: #d7663e;
  --line: #d9d4c8;
  --serif: Georgia, "Noto Serif TC", "PMingLiU", serif;
  --sans: "Avenir Next", "Microsoft JhengHei", "PingFang TC", sans-serif;
}

html { scroll-behavior: smooth; }
body {
  color: var(--ink);
  font-family: var(--sans);
  background: var(--paper);
  background-image: radial-gradient(circle at 82% 12%, #e8dfcd 0, transparent 35%),
    radial-gradient(circle at 0% 70%, #e9eadc 0, transparent 36%);
}
.tool-shell {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 1500px;
  height: auto;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 88px);
  background: transparent;
}
.tool-shell a:focus-visible,
.tool-shell button:focus-visible,
.tool-shell input:focus-visible,
.tool-shell textarea:focus-visible,
.tool-shell select:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}
.tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 100px;
  padding: 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.tool-brand { display: inline-flex; gap: 13px; align-items: center; font-size: 18px; font-weight: 700; letter-spacing: .07em; }
.tool-brand-mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font: 18px var(--serif);
}
.tool-brand-light { font-weight: 400; }
.tool-top-nav { display: flex; gap: clamp(18px, 3vw, 52px); font-size: 14px; font-weight: 600; }
.tool-top-nav a:hover, .tool-brand:hover { color: var(--orange); }
.tool-layout {
  display: grid;
  grid-template-columns: 192px minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 3vw, 48px);
  width: 100%;
  margin: 0;
  padding: 30px 0 80px;
}
.tool-layout > aside:first-child {
  display: block;
  position: sticky;
  top: 24px;
  width: auto;
  padding: 0;
}
.tool-layout > aside:first-child > div:not(#sidebar),
.tool-layout > aside:last-child { display: none; }
.tool-shell #sidebar {
  width: 100%;
  max-height: none;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffcf6;
  font-size: 14px;
}
.tool-shell #sidebar::before {
  content: "工具目錄 / TOOLS";
  display: block;
  padding: 14px 13px;
  color: var(--orange);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}
.tool-shell #sidebar ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tool-shell #sidebar a {
  display: block;
  padding: 12px 13px;
  border-radius: 5px;
  color: var(--ink);
  font-weight: 600;
  transition: background .2s, color .2s;
}
.tool-shell #sidebar a:hover,
.tool-shell[data-tool="zodiac"] #sidebar a[href="/zodiac"],
.tool-shell[data-tool="exchange"] #sidebar a[href="/exchangeDiff"],
.tool-shell[data-tool="colors"] #sidebar a[href="/fetchColors"],
.tool-shell[data-tool="image"] #sidebar a[href="/imageCompress"],
.tool-shell[data-tool="numerology"] #sidebar a[href="/numerology"],
.tool-shell[data-tool="lots"] #sidebar a[href="/drawLots"] {
  background: #e3eadd;
  color: var(--ink);
}
.tool-main { min-width: 0; padding: 0; }
.tool-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-height: 255px;
  margin: 0 0 26px;
  padding: 26px clamp(22px, 4vw, 52px);
  overflow: hidden;
  border-radius: 8px;
  background: #dce6d8;
  animation: tool-appear .6s both;
}
[data-tool="exchange"] .tool-intro { background: #f2dfcc; }
[data-tool="colors"] .tool-intro { background: #e4e1d8; }
[data-tool="numerology"] .tool-intro,
[data-tool="lots"] .tool-intro { background: #ebe3d7; }
.tool-intro-copy { max-width: 590px; position: relative; z-index: 1; }
.tool-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .16em; }
.tool-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.tool-intro h1 {
  margin: 18px 0 12px;
  color: var(--ink);
  font: 500 clamp(38px, 4vw, 58px)/1.2 var(--serif);
  letter-spacing: -.05em;
}
.tool-intro p { max-width: 500px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }
.tool-status { display: inline-block; margin-top: 14px; padding: 6px 12px; border: 1px solid var(--orange); border-radius: 20px; color: var(--orange); font-size: 12px; }
.tool-intro-art { position: relative; display: grid; place-items: center; flex: 0 0 190px; height: 190px; }
.tool-intro-ring { position: absolute; width: 190px; height: 190px; border: 1px solid #1e302c44; border-radius: 50%; }
.tool-intro-disc {
  display: grid;
  place-items: center;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: #b6c8a9;
  box-shadow: 14px 17px 0 #fffcf6b3;
  color: var(--ink);
  font: 78px var(--serif);
  transform: rotate(-12deg);
}
[data-tool="exchange"] .tool-intro-disc { background: #e9bfa2; }
[data-tool="colors"] .tool-intro-disc { background: #bfd1ca; }
.tool-intro-stamp { position: absolute; bottom: -4px; right: -26px; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; }
.tool-main > :is(div, article) {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffcf6;
  box-shadow: 0 10px 30px #1e302c0a;
}
.tool-main > :is(div, article) > :is(.bg-coolors_main, .bg-coolors_article, .bg-coolors_ads) {
  height: auto;
  min-height: 62px;
  padding: 19px clamp(22px, 3vw, 34px);
  border-bottom: 1px solid var(--line);
  background: #edf0e6;
  color: var(--ink);
  font: 500 21px/1.4 var(--serif);
}
.tool-main > :is(div, article) > .bg-coolors_content {
  height: auto;
  min-height: 0;
  padding: clamp(22px, 3vw, 36px);
  background: #fffcf6;
  color: var(--ink);
  line-height: 1.75;
}
.tool-main > :is(div, article) > .bg-coolors_ads {
  min-height: 0;
  padding: 13px 24px;
  background: #f5f1e9;
  color: var(--muted);
  font: 600 11px var(--sans);
  letter-spacing: .12em;
}
.tool-main label { color: var(--ink); font-weight: 600; }
.tool-main input, .tool-main select, .tool-main textarea {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f9f7f1;
  color: var(--ink);
  font-family: var(--sans);
}
.tool-main input:disabled { background: #f0efe8; }
.tool-main textarea { margin-top: 12px; }
.tool-main #btn_calc, .tool-main button[id$="_query"] {
  min-height: 45px;
  border: 0;
  border-radius: 5px;
  background: var(--ink);
  color: #fff;
  transition: background .2s, transform .2s;
}
.tool-main #btn_calc:hover, .tool-main button[id$="_query"]:hover { background: var(--orange); transform: translateY(-2px); }
.tool-main #btn_example { color: var(--orange); font-weight: 700; }
.tool-main .accordion-heading { font: 600 16px var(--sans); }
.tool-main .accordion-heading button { padding: 16px 21px; border: 1px solid var(--line); border-radius: 6px; background: #edf0e6; color: var(--ink); }
.tool-main .accordion-heading button:hover { background: #dce6d8; }
.tool-main [id^="accordion-body-"] { padding: 18px; border-color: var(--line); border-radius: 0 0 6px 6px; }
.tool-main .bg-red-300 { background: #dce6d8; color: var(--ink); }
.tool-main table { max-width: 100%; }
.tool-main th { background: #e3eadd; color: var(--ink); }
.tool-main td { border-color: var(--line); }
.tool-main #show_colors > div { min-height: 52px; padding: 11px 18px; border-radius: 6px; font-weight: 700; }
.tool-placeholder { display: grid; justify-items: start; gap: 18px; padding: 18px 0; }
.tool-placeholder > span { font: 54px var(--serif); color: var(--orange); }
.tool-placeholder p { margin: 0; color: var(--muted); }
.tool-placeholder a { display: inline-block; padding: 12px 18px; border-radius: 5px; background: var(--ink); color: #fff; }
.tool-placeholder a:hover { background: var(--orange); }
.tool-shell > footer { height: auto; min-height: 84px; padding: 26px 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted); }
.tool-shell > footer > div:first-child,
.tool-shell > footer > div:last-child > a { display: none; }
.tool-shell > footer > div:last-child { text-align: left; }
@keyframes tool-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 950px) {
  .tool-shell .tool-layout { display: flex; flex-direction: column; gap: 20px; padding-top: 24px; }
  .tool-shell .tool-layout > aside:first-child { display: block !important; position: static; width: 100%; }
  .tool-shell #sidebar { padding: 6px; }
  .tool-shell #sidebar::before { display: none; }
  .tool-shell #sidebar ul { display: flex; flex-wrap: wrap; gap: 3px; }
  .tool-shell #sidebar a { padding: 10px 13px; }
  .tool-shell .tool-main { width: 100%; padding: 0 !important; overflow: visible; }
}
@media (max-width: 600px) {
  .tool-header { min-height: 76px; }
  .tool-brand { font-size: 15px; }
  .tool-top-nav { gap: 14px; font-size: 12px; }
  .tool-top-nav a:last-child { display: none; }
  .tool-shell #sidebar ul { flex-wrap: nowrap; overflow-x: auto; }
  .tool-shell #sidebar li { flex: 0 0 auto; }
  .tool-intro { min-height: 205px; padding: 30px 22px; }
  .tool-intro h1 { font-size: 39px; }
  .tool-intro p { font-size: 14px; }
  .tool-intro-art { display: none; }
  .tool-main > :is(div, article) > .bg-coolors_content { padding: 20px; }
  .tool-main [id^="accordion-body-"] { padding: 12px; }
  .tool-main .grid-cols-6 { gap: 10px; }
  .tool-main #family_select_zodiac_root > * { grid-column: span 6 / span 6; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tool-shell *, .tool-shell *::before, .tool-shell *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}