/* 东城门前胡同公共主题与基础组件 */
body:not(.page-home){margin:0;padding:20px;}
body:not(.page-home) .wrap{margin-left:auto;margin-right:auto;padding-top:28px;padding-bottom:28px;}
body:not(.page-home) .back{text-decoration:none;font-size:14px;}
body:not(.page-home) h1{margin-top:20px;margin-bottom:8px;font-size:30px;}
body:not(.page-home) footer{margin-top:30px;font-size:13px;line-height:1.8;text-align:center;}
body:not(.page-home) footer a{text-decoration:none;color:inherit;}
:root {
  color-scheme: light;
  --ui-bg: #f6f7fb;
  --ui-bg-soft: #eef2ff;
  --ui-card: #ffffff;
  --ui-card-soft: #f8fafc;
  --ui-text: #111827;
  --ui-muted: #64748b;
  --ui-border: #e2e8f0;
  --ui-primary: #3b5bff;
  --ui-primary-2: #7c3aed;
  --ui-primary-text: #ffffff;
  --ui-danger-bg: #fff1f2;
  --ui-danger-text: #be123c;
  --ui-ghost: #eef2ff;
  --ui-shadow: 0 10px 30px rgba(15, 23, 42, .08);
  --ui-shadow-hover: 0 16px 40px rgba(15, 23, 42, .12);
  --ui-radius: 18px;
  --ui-radius-sm: 12px;

  --ui-font-sans: "Noto Sans SC", "Source Han Sans SC", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "WenQuanYi Micro Hei", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --ui-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Noto Sans Mono CJK SC", "Noto Sans Mono", monospace;
  --font-sans: var(--ui-font-sans);
  --font-mono: var(--ui-font-mono);

  --bg: var(--ui-bg);
  --card: var(--ui-card);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --border: var(--ui-border);
  --primary: var(--ui-primary);
  --primaryText: var(--ui-primary-text);
  --danger: var(--ui-danger-bg);
  --ghost: var(--ui-ghost);
}

* {
  box-sizing: border-box;
}

html {
  font-family: var(--ui-font-sans) !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--ui-font-sans) !important;
}

button,
input,
select,
option,
.btn,
.theme-select,
.file-label {
  font-family: var(--ui-font-sans) !important;
}

code,
pre,
kbd,
samp,
.mono,
textarea[data-font="mono"] {
  font-family: var(--ui-font-mono) !important;
}

body {
  background:
    radial-gradient(circle at top left, rgba(59, 91, 255, .08), transparent 34rem),
    radial-gradient(circle at top right, rgba(124, 58, 237, .06), transparent 30rem),
    var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

.wrap {
  width: min(100%, 960px);
}

h1 {
  letter-spacing: -.03em;
}

h2, h3 {
  letter-spacing: -.02em;
}

.sub,
.muted,
.hint,
label,
.back,
footer,
.site-footer,
.card p,
.result,
.box,
.label,
.stats,
.sponsor {
  color: var(--ui-muted) !important;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.back:hover {
  background: rgba(255, 255, 255, .72);
  border-color: var(--ui-border);
  color: var(--ui-text) !important;
}

.card,
.result,
.box,
.preview,
.output-wrap,
.panel,
.qr-card,
.item {
  background-color: var(--ui-card) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow) !important;
}

.card,
.result,
.box,
.preview,
.output-wrap,
.panel,
.qr-card,
.item {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius) !important;
}

a.card,
.sponsor,
.privacy-entry {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

a.card:hover,
.sponsor:hover,
.privacy-entry:hover {
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-hover) !important;
  border-color: rgba(59, 91, 255, .22) !important;
}

input,
textarea,
select {
  background: #ffffff !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input::placeholder,
textarea::placeholder {
  color: #94a3b8 !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 4px rgba(59, 91, 255, .14) !important;
}

button,
.download,
.linkbtn {
  font-weight: 650;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
}

button:hover,
.download:hover,
.linkbtn:hover {
  filter: brightness(.98);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .10);
}

button:active,
.download:active,
.linkbtn:active {
  transform: translateY(1px);
}

.primary {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
  color: var(--ui-primary-text) !important;
}

.danger {
  background: var(--ui-danger-bg) !important;
  color: var(--ui-danger-text) !important;
}

.ghost,
.download,
.linkbtn {
  background: var(--ui-ghost) !important;
  color: var(--ui-text) !important;
}

.stats,
.privacy-entry {
  border: 1px solid var(--ui-border) !important;
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(10px);
}

.stats span,
.num,
strong,
h1,
h2,
h3,
.qr-card h2 {
  color: var(--ui-text) !important;
}

.section-title span {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
}

canvas,
img {
  background: #ffffff;
}

.theme-picker {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .88);
  color: #64748b;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .10);
  backdrop-filter: blur(12px);
}

.theme-picker > span {
  padding-left: 4px;
  white-space: nowrap;
}

.theme-buttons {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: #eef2f7;
}

.theme-buttons button {
  border: 0;
  border-radius: 999px;
  padding: 7px 10px;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
}

.theme-buttons button:hover {
  color: #334155;
  box-shadow: none;
}

.theme-buttons button.active {
  background: #ffffff;
  color: #111827;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(15, 23, 42, .10);
}

.theme-buttons button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 91, 255, .18);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #0b1020;
  --ui-bg-soft: #111827;
  --ui-card: #111827;
  --ui-card-soft: #0f172a;
  --ui-text: #e5e7eb;
  --ui-muted: #a5b4c8;
  --ui-border: #334155;
  --ui-primary: #8b5cf6;
  --ui-primary-2: #3b82f6;
  --ui-primary-text: #ffffff;
  --ui-danger-bg: #3f2630;
  --ui-danger-text: #fecdd3;
  --ui-ghost: #1f2937;
  --ui-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  --ui-shadow-hover: 0 18px 46px rgba(0, 0, 0, .34);

  --bg: var(--ui-bg);
  --card: var(--ui-card);
  --text: var(--ui-text);
  --muted: var(--ui-muted);
  --border: var(--ui-border);
  --primary: var(--ui-primary);
  --primaryText: var(--ui-primary-text);
  --danger: var(--ui-danger-bg);
  --ghost: var(--ui-ghost);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at top left, rgba(139, 92, 246, .12), transparent 34rem),
    radial-gradient(circle at top right, rgba(59, 130, 246, .10), transparent 30rem),
    var(--ui-bg) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .hero,
html[data-theme="dark"] .section,
html[data-theme="dark"] .card,
html[data-theme="dark"] .sponsor,
html[data-theme="dark"] .stats,
html[data-theme="dark"] .result,
html[data-theme="dark"] .box,
html[data-theme="dark"] .preview,
html[data-theme="dark"] .output-wrap,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .qr-card,
html[data-theme="dark"] .item {
  background-color: var(--ui-card) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  box-shadow: var(--ui-shadow) !important;
}

html[data-theme="dark"] a {
  color: inherit;
}

html[data-theme="dark"] .back,
html[data-theme="dark"] footer,
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .hint,
html[data-theme="dark"] label,
html[data-theme="dark"] .stats,
html[data-theme="dark"] .label {
  color: var(--ui-muted) !important;
}

html[data-theme="dark"] .card p,
html[data-theme="dark"] .sponsor,
html[data-theme="dark"] .result,
html[data-theme="dark"] .box {
  color: var(--ui-muted) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong,
html[data-theme="dark"] .stats span,
html[data-theme="dark"] .qr-card h2,
html[data-theme="dark"] .num {
  color: var(--ui-text) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--ui-card-soft) !important;
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #64748b !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  outline: none;
  border-color: var(--ui-primary) !important;
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .18) !important;
}

html[data-theme="dark"] .primary {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
  color: var(--ui-primary-text) !important;
}

html[data-theme="dark"] .danger {
  background: var(--ui-danger-bg) !important;
  color: var(--ui-danger-text) !important;
}

html[data-theme="dark"] .ghost,
html[data-theme="dark"] .download,
html[data-theme="dark"] .linkbtn {
  background: var(--ui-ghost) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
}

html[data-theme="dark"] canvas,
html[data-theme="dark"] img {
  background: #ffffff;
}

html[data-theme="dark"] .section-title span {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
}

html[data-theme="dark"] .privacy-entry {
  background: var(--ui-card) !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-muted) !important;
  box-shadow: var(--ui-shadow) !important;
}

html[data-theme="dark"] .privacy-entry:hover {
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .theme-picker {
  background: rgba(15, 23, 42, .86) !important;
  color: var(--ui-muted) !important;
  border-color: var(--ui-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .32) !important;
}

html[data-theme="dark"] .theme-buttons {
  background: #0b1222 !important;
}

html[data-theme="dark"] .theme-buttons button {
  color: var(--ui-muted) !important;
}

html[data-theme="dark"] .theme-buttons button:hover {
  color: var(--ui-text) !important;
}

html[data-theme="dark"] .theme-buttons button.active {
  background: linear-gradient(135deg, var(--ui-primary), var(--ui-primary-2)) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 16px rgba(139, 92, 246, .28) !important;
}

@media (max-width: 640px) {
  body {
    padding: 16px !important;
  }

  .wrap {
    padding-top: 18px !important;
  }

  body:not(.page-home) h1 {
    font-size: 28px !important;
  }

  .theme-picker {
    position: static;
    width: fit-content;
    margin: 0 0 14px auto;
  }

  .theme-picker > span {
    display: none;
  }

  .theme-buttons button {
    padding: 8px 9px;
  }

  .card,
  .result,
  .box,
  .preview,
  .output-wrap,
  .panel,
  .qr-card,
  .item {
    border-radius: 16px !important;
  }
}

:root{
  --ui-control-h:46px;
  --ui-control-radius:12px;
  --ui-card-radius:18px;
  --ui-btn-radius:12px;
  --ui-focus-ring:rgba(59,91,255,.14);
  --ui-danger-strong:#ef4444;
  --ui-danger-strong-dark:#ef6464;
  --ui-ok:#16a34a;
  --ui-code-bg:#f8fafc;
}

html[data-theme="dark"]{
  --ui-focus-ring:rgba(139,92,246,.20);
  --ui-code-bg:#0f172a;
}

html,body{
  min-height:100%;
  background:var(--ui-bg)!important;
}

body{
  color:var(--ui-text)!important;
  background:
    radial-gradient(circle at top left, rgba(59,91,255,.08), transparent 34rem),
    radial-gradient(circle at top right, rgba(124,58,237,.06), transparent 30rem),
    var(--ui-bg)!important;
}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at top left, rgba(139,92,246,.12), transparent 34rem),
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 30rem),
    var(--ui-bg)!important;
}

.hero,.section{
  background:transparent!important;
  border:none!important;
  box-shadow:none!important;
}

.card,.panel,.result,.box,.preview,.output-wrap,.qr-card,.item,.note,
.contact-card,.privacy-entry,.people,.table-wrap,.settle,
.original-box,.result-box,.piece,.scale div,.stage,.image-box{
  background-color:var(--ui-card)!important;
  border-color:var(--ui-border)!important;
  color:var(--ui-text)!important;
  box-shadow:var(--ui-shadow)!important;
}

.card,.panel,.result,.box,.preview,.output-wrap,.qr-card,.item,.note,
.contact-card,.privacy-entry,.people,.table-wrap,.settle,
.original-box,.result-box,.piece,.scale div,.stage,.image-box{
  border:1px solid var(--ui-border)!important;
  border-radius:var(--ui-card-radius)!important;
}

.note,.hint,.muted,.sub,label,.back,footer,.site-footer,.msg,.desc,
.card p,.result .muted,.box .muted{
  color:var(--ui-muted)!important;
}

h1,h2,h3,strong,.num,.stats span,.qr-card h2,.settle h2,.settle strong{
  color:var(--ui-text)!important;
}

input,textarea,select{
  background:var(--ui-card)!important;
  color:var(--ui-text)!important;
  border:1px solid var(--ui-border)!important;
  border-radius:var(--ui-control-radius)!important;
  font-size:15px!important;
  line-height:1.5!important;
  box-shadow:none!important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select{
  min-height:var(--ui-control-h)!important;
  padding:0 12px!important;
}

textarea{
  padding:12px 14px!important;
}

input::placeholder,textarea::placeholder{
  color:#94a3b8!important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select{
  background:var(--ui-card-soft)!important;
  color:var(--ui-text)!important;
  border-color:var(--ui-border)!important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color:#64748b!important;
}

input:focus,textarea:focus,select:focus{
  outline:none!important;
  border-color:var(--ui-primary)!important;
  box-shadow:0 0 0 4px var(--ui-focus-ring)!important;
}

input[type="file"]{
  padding:10px 12px!important;
  height:auto!important;
}

input[type="range"]{
  accent-color:var(--ui-primary);
}

input[type="checkbox"],input[type="radio"]{
  accent-color:var(--ui-primary);
}

.actions{
  gap:10px!important;
}

button,.btn,.download,.linkbtn,a.btn{
  min-height:44px!important;
  border-radius:var(--ui-btn-radius)!important;
  padding:11px 15px!important;
  border:1px solid transparent!important;
  font:inherit!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.2!important;
  cursor:pointer;
  text-decoration:none!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:transform .15s ease,filter .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease!important;
}

button:hover,.btn:hover,.download:hover,.linkbtn:hover,a.btn:hover{
  filter:brightness(.98);
  box-shadow:0 8px 18px rgba(15,23,42,.10)!important;
}

button:active,.btn:active,.download:active,.linkbtn:active,a.btn:active{
  transform:translateY(1px);
}

button:disabled,.btn:disabled{
  opacity:.55!important;
  cursor:not-allowed!important;
  box-shadow:none!important;
}

.primary,
.btn.primary,
.actions button:not([class]),
button.primary{
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-primary-2))!important;
  color:var(--ui-primary-text)!important;
  border-color:transparent!important;
}

.ghost,.secondary,
.btn.ghost,.btn.secondary,
button.ghost,button.secondary,
.download,.linkbtn{
  background:var(--ui-ghost)!important;
  color:var(--ui-text)!important;
  border-color:var(--ui-border)!important;
}

.danger,
.btn.danger,
button.danger{
  background:var(--ui-danger-bg)!important;
  color:var(--ui-danger-text)!important;
  border-color:transparent!important;
}

html[data-theme="dark"] .danger,
html[data-theme="dark"] .btn.danger,
html[data-theme="dark"] button.danger{
  background:var(--ui-danger-bg)!important;
  color:var(--ui-danger-text)!important;
}

.result,.box,.preview,.output-wrap,.note{
  background:var(--ui-card)!important;
}

.result.soft,.box.soft,.note.soft{
  background:var(--ui-ghost)!important;
}

table{
  background:var(--ui-card)!important;
  color:var(--ui-text)!important;
  border-color:var(--ui-border)!important;
}

th,td{
  border-color:var(--ui-border)!important;
  color:var(--ui-text)!important;
}

th,.people-head{
  background:var(--ui-ghost)!important;
  color:var(--ui-muted)!important;
}

pre,code,.code,.result-box{
  background:var(--ui-code-bg)!important;
  color:var(--ui-text)!important;
}

canvas,img{
  background:transparent!important;
}

#canvas,
.qr-result canvas,
.result canvas[aria-label*="二维码"],
canvas[aria-label*="二维码"]{
  background:#fff!important;
}

.back{
  color:var(--ui-muted)!important;
  border-radius:999px!important;
}

.back:hover{
  background:var(--ui-ghost)!important;
  border-color:var(--ui-border)!important;
  color:var(--ui-text)!important;
}

.theme-picker{
  background:rgba(255,255,255,.88)!important;
  border-color:var(--ui-border)!important;
}

html[data-theme="dark"] .theme-picker{
  background:rgba(15,23,42,.86)!important;
}

.theme-buttons button{
  min-height:auto!important;
  box-shadow:none!important;
}

@media(max-width:640px){
  button,.btn,.download,.linkbtn,a.btn{
    min-height:42px!important;
    padding:10px 13px!important;
  }

  .card,.panel,.result,.box,.preview,.output-wrap,.qr-card,.item,.note,
  .contact-card,.privacy-entry,.people,.table-wrap,.settle,
  .original-box,.result-box,.piece,.scale div,.stage,.image-box{
    border-radius:16px!important;
  }
}

html body .wrap > .hero,
html body main.wrap > .hero,
html body .wrap > .section,
html body main.wrap > .section,
html body .wrap > .section > .grid,
html body main.wrap > .section > .grid{
  background:transparent!important;
  background-color:transparent!important;
  border:none!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}

html body .wrap > .hero,
html body main.wrap > .hero{
  padding:0!important;
}

html body .wrap > .section,
html body main.wrap > .section{
  padding:0!important;
}

.seo-info{
  margin-top:22px;
  padding:20px;
  border:1px solid var(--ui-border);
  border-radius:18px;
  background:var(--ui-card);
  color:var(--ui-text);
  box-shadow:var(--ui-shadow);
}
.seo-info h2{
  margin:0 0 14px;
  font-size:20px;
  line-height:1.35;
  color:var(--ui-text);
}
.seo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.seo-card{
  padding:14px;
  border:1px solid var(--ui-border);
  border-radius:14px;
  background:var(--ui-ghost);
  color:var(--ui-text);
}
.seo-card h3{
  margin:0 0 8px;
  font-size:15px;
  color:var(--ui-text);
}
.seo-card ul{
  margin:0;
  padding-left:1.2em;
  color:var(--ui-muted);
  line-height:1.8;
  font-size:14px;
}
.seo-card p{
  margin:0;
  color:var(--ui-muted);
  line-height:1.8;
  font-size:14px;
}
@media(max-width:860px){
  .seo-grid{grid-template-columns:1fr}
}

:root{
  --hutong-red:#b44634;
  --hutong-red-soft:rgba(180,70,52,.28);
}

body::before{
  content:"";
  position:fixed;
  left:0;
  right:0;
  top:0;
  height:6px;
  pointer-events:none;
  z-index:2147483647;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(180,70,52,.00) 0 7px,
      rgba(180,70,52,.34) 7px 15px,
      rgba(180,70,52,.00) 15px 24px
    ),
    linear-gradient(90deg, rgba(180,70,52,.15), rgba(180,70,52,.52), rgba(180,70,52,.15));
  opacity:.45;
}

footer::before{
  content:"";
  display:block;
  width:28px;
  height:28px;
  margin:0 auto 8px;
  background:url("/assets/favicon.svg") center / contain no-repeat;
  opacity:.78;
}

html[data-theme="dark"] body::before,
body[data-theme="dark"]::before{
  opacity:.32;
}

html[data-theme="dark"] footer::before,
body[data-theme="dark"] footer::before{
  opacity:.86;
}

@media (max-width:640px){
  body::before{height:4px}
  footer::before{width:24px;height:24px}
}

:root{
  --hutong-red:#b44634;
  --hutong-red-2:#cc533a;
  --hutong-red-dark:#96392b;
  --hutong-ink:#17202a;
  --hutong-text:#2b2119;
  --hutong-muted:#6f604d;
  --hutong-wall:#f8eeda;
  --hutong-bg:#fffaf0;
  --hutong-card:#fff8ea;
  --hutong-card-2:#fbefd8;
  --hutong-line:rgba(180,70,52,.20);
  --hutong-line-strong:rgba(180,70,52,.32);
  --hutong-shadow:0 12px 30px rgba(78,45,24,.075);

  --bg:var(--hutong-bg) !important;
  --card:var(--hutong-card) !important;
  --text:var(--hutong-text) !important;
  --muted:var(--hutong-muted) !important;
  --line:var(--hutong-line) !important;
  --border:rgba(180,70,52,.24) !important;
  --primary:var(--hutong-red) !important;
  --blue:var(--hutong-red) !important;
  --danger:rgba(180,70,52,.09) !important;

  --ui-bg:var(--hutong-bg) !important;
  --ui-card:var(--hutong-card) !important;
  --ui-text:var(--hutong-text) !important;
  --ui-muted:var(--hutong-muted) !important;
  --ui-border:rgba(180,70,52,.24) !important;
  --ui-primary:var(--hutong-red) !important;
}

html{
  min-height:100%;
  background:
    radial-gradient(circle at top left, rgba(226,196,148,.30), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(180,70,52,.09), transparent 30rem),
    linear-gradient(180deg, #fffaf0 0%, #f8eeda 100%) !important;
  background-color:#f8eeda !important;
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at top left, rgba(226,196,148,.30), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(180,70,52,.09), transparent 30rem),
    linear-gradient(180deg, #fffaf0 0%, #f8eeda 100%) !important;
  background-color:#f8eeda !important;
  color:var(--hutong-text) !important;
}

main,.wrap,.page,.wrapper,.site,footer{
  background:transparent !important;
}

h1,h2,h3{
  color:var(--hutong-ink) !important;
}

p,li,small,label,legend,.sub,.muted,.help,.hint,.desc,.description,.back,.label,.small{
  color:var(--hutong-muted) !important;
}

a{
  color:var(--hutong-red) !important;
}

a:hover{
  color:var(--hutong-red-dark) !important;
}

.card,.tool-card,.mini-card,.seo-info,.seo-section,.usage-info,.usage-section,
.panel,.box,.form-card,.main-card,.page-card,.section-card,.content-card,
.sponsor-card,.sponsor-box,.donate-card,.pay-card,.qr-card,.contact-card,
.privacy-card,.privacy-box,.calculator,.converter,.editor-card,.upload-card,
.option-card,details,fieldset{
  background:
    linear-gradient(180deg, rgba(255,250,240,.98), rgba(255,246,229,.94)) !important;
  background-color:var(--hutong-card) !important;
  border-color:var(--hutong-line) !important;
  box-shadow:var(--hutong-shadow) !important;
}

.result,.output,.preview,.preview-card,.preview-panel,.preview-box,
.summary,.summary-card,.summary-box,.result-card,.result-box,.result-item,
.metric,.metric-card,.stat,.stat-card,.value-card,.value-box,.item,
.note,.notice,.tip,.tips,.tips-box,.hint,.hint-box,.help-box,.logic,.logic-box,
.message,.msg,.status,.stats,#status,#stats,.status-line,.result-status,.output-status,
.settle,.warn,.alert,.kpi,.kpi-card{
  background:
    linear-gradient(180deg, rgba(255,248,234,.98), rgba(250,237,210,.92)) !important;
  background-color:var(--hutong-card-2) !important;
  border-color:var(--hutong-line) !important;
  color:var(--hutong-muted) !important;
}

.value,.num,.kpi strong,.stat strong,.metric strong,.item strong{
  color:var(--hutong-ink) !important;
}

input,select,textarea,pre,code,
.markdown-result,.markdown-output,.json-output,.base64-output,.text-output,
.output textarea,.result textarea,textarea[readonly]{
  background:#fffaf0 !important;
  background-image:none !important;
  border-color:rgba(180,70,52,.24) !important;
  color:#261f19 !important;
}

input:focus,select:focus,textarea:focus{
  border-color:var(--hutong-red) !important;
  box-shadow:0 0 0 3px rgba(180,70,52,.16) !important;
  outline:none !important;
}

::placeholder{
  color:#a89a86 !important;
  opacity:1 !important;
}

button,.btn{
  border-color:rgba(180,70,52,.28) !important;
}

button.primary,a.primary,.btn.primary,.primary-btn,button[type="submit"]{
  background:linear-gradient(180deg, var(--hutong-red-2), var(--hutong-red)) !important;
  border-color:var(--hutong-red-dark) !important;
  color:#fff8ea !important;
  box-shadow:0 8px 18px rgba(180,70,52,.20) !important;
}

button.primary:hover,a.primary:hover,.btn.primary:hover,.primary-btn:hover,button[type="submit"]:hover{
  background:linear-gradient(180deg, #d95d43, var(--hutong-red-dark)) !important;
  color:#fff8ea !important;
}

button.ghost,a.ghost,.btn.ghost,button.secondary,a.secondary,.btn.secondary,.ghost-btn,.secondary-btn{
  background:rgba(255,248,234,.82) !important;
  border-color:rgba(180,70,52,.34) !important;
  color:var(--hutong-red-dark) !important;
}

button.ghost:hover,a.ghost:hover,.btn.ghost:hover,button.secondary:hover,a.secondary:hover,.btn.secondary:hover,.ghost-btn:hover,.secondary-btn:hover{
  background:rgba(226,196,148,.30) !important;
  border-color:var(--hutong-red) !important;
}

button.danger,a.danger,.btn.danger,.danger-btn{
  background:rgba(180,70,52,.09) !important;
  border-color:rgba(180,70,52,.34) !important;
  color:var(--hutong-red-dark) !important;
}

button.danger:hover,a.danger:hover,.btn.danger:hover,.danger-btn:hover{
  background:rgba(180,70,52,.16) !important;
  border-color:var(--hutong-red) !important;
}

.people{
  background:var(--hutong-card) !important;
  border-color:var(--hutong-line) !important;
}

.people-head{
  background:#f4e7cf !important;
  background-image:linear-gradient(180deg, rgba(250,237,210,.98), rgba(242,222,190,.94)) !important;
  color:#6b5542 !important;
  border-color:var(--hutong-line) !important;
}

.person-row{
  background:var(--hutong-card) !important;
  border-color:rgba(180,70,52,.14) !important;
}

.person-row .index{
  color:#6f604d !important;
}

.table-wrap,table,.table,.table-preview,.markdown-preview,.data-table,.form-table{
  background:var(--hutong-card) !important;
  border-color:var(--hutong-line) !important;
}

thead,thead tr,thead th,table th{
  background:#f4e7cf !important;
  background-image:linear-gradient(180deg, rgba(250,237,210,.98), rgba(242,222,190,.94)) !important;
  border-color:var(--hutong-line) !important;
  color:#6b5542 !important;
}

tbody,tr,td,table td{
  background:var(--hutong-card) !important;
  border-color:rgba(180,70,52,.14) !important;
  color:#2b2119 !important;
}

.table-edit,.table-edit table,.table-edit td,.table-edit th{
  background:var(--hutong-card) !important;
  border-color:rgba(180,70,52,.18) !important;
}

.table-edit input,.table-edit select{
  background:#fffaf0 !important;
}

.scale > div,.summary > .item,.result > .item,.result-grid > *,.summary-grid > *,
.stats-grid > *,.stat-grid > *,.metric-grid > *,.output-grid > *,.preview-grid > *,
.cards > *,.grid > .item,.grid > .result,.grid > .output{
  background:
    linear-gradient(180deg, rgba(255,250,240,.98), rgba(255,246,229,.94)) !important;
  border-color:var(--hutong-line) !important;
  color:var(--hutong-muted) !important;
}

.canvas-wrap,.canvas-box,.wheel-wrap,.wheel-panel,.wheel-area,
.image-preview,.img-preview,.crop-area,.upload-area,.drop-zone,.preview-area{
  background:
    linear-gradient(180deg, rgba(255,250,240,.98), rgba(255,246,229,.94)) !important;
  border-color:var(--hutong-line) !important;
}

.theme-picker{
  background:rgba(255,248,234,.88) !important;
  border-color:rgba(180,70,52,.24) !important;
  box-shadow:0 10px 24px rgba(78,45,24,.08) !important;
}

.theme-buttons{
  background:rgba(244,231,207,.55) !important;
  border-color:rgba(180,70,52,.16) !important;
  box-shadow:none !important;
}

.theme-buttons button,
button[data-theme-choice]{
  background:transparent !important;
  background-image:none !important;
  border-color:transparent !important;
  color:#6f604d !important;
  box-shadow:none !important;
}

.theme-buttons button:hover,
button[data-theme-choice]:hover{
  background:rgba(226,196,148,.30) !important;
  color:var(--hutong-red-dark) !important;
}

.theme-buttons button.active,
button[data-theme-choice].active,
button[data-theme-choice][aria-pressed="true"]{
  background:linear-gradient(180deg, var(--hutong-red-2), var(--hutong-red)) !important;
  border-color:var(--hutong-red-dark) !important;
  color:#fff8ea !important;
  box-shadow:0 8px 18px rgba(180,70,52,.22) !important;
}

.section-title span,.stat-egg-card::after{
  background:rgba(180,70,52,.60) !important;
}

html[data-theme="dark"]{
  --bg:#15120f !important;
  --card:#1f1b17 !important;
  --text:#f6ead6 !important;
  --muted:#cbbba2 !important;
  --line:rgba(226,196,148,.22) !important;
  --border:rgba(226,196,148,.26) !important;
  --primary:#b44634 !important;
  --blue:#b44634 !important;
  --danger:rgba(180,70,52,.12) !important;

  --ui-bg:#15120f !important;
  --ui-card:#1f1b17 !important;
  --ui-text:#f6ead6 !important;
  --ui-muted:#cbbba2 !important;
  --ui-border:rgba(226,196,148,.26) !important;
  --ui-primary:#b44634 !important;
}

html[data-theme="dark"],html[data-theme="dark"] body{
  background:
    radial-gradient(circle at top left, rgba(180,70,52,.16), transparent 34rem),
    radial-gradient(circle at bottom right, rgba(226,196,148,.07), transparent 28rem),
    linear-gradient(180deg, #15120f 0%, #0f1110 100%) !important;
  background-color:#0f1110 !important;
  color:#f6ead6 !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3{
  color:#f8eeda !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] small,
html[data-theme="dark"] label,
html[data-theme="dark"] legend,
html[data-theme="dark"] .sub,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .help,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .desc,
html[data-theme="dark"] .description,
html[data-theme="dark"] .back,
html[data-theme="dark"] .label,
html[data-theme="dark"] .small{
  color:#cbbba2 !important;
}

html[data-theme="dark"] a{
  color:#f0b49e !important;
}

html[data-theme="dark"] a:hover{
  color:#ffd1bf !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .mini-card,
html[data-theme="dark"] .seo-info,
html[data-theme="dark"] .seo-section,
html[data-theme="dark"] .usage-info,
html[data-theme="dark"] .usage-section,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .main-card,
html[data-theme="dark"] .page-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .sponsor-card,
html[data-theme="dark"] .sponsor-box,
html[data-theme="dark"] .donate-card,
html[data-theme="dark"] .pay-card,
html[data-theme="dark"] .qr-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .privacy-card,
html[data-theme="dark"] .privacy-box,
html[data-theme="dark"] .calculator,
html[data-theme="dark"] .converter,
html[data-theme="dark"] .editor-card,
html[data-theme="dark"] .upload-card,
html[data-theme="dark"] .option-card,
html[data-theme="dark"] details,
html[data-theme="dark"] fieldset{
  background:
    linear-gradient(180deg, rgba(31,27,23,.97), rgba(22,20,18,.95)) !important;
  background-color:#1f1b17 !important;
  border-color:rgba(226,196,148,.22) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.30) !important;
}

html[data-theme="dark"] .result,
html[data-theme="dark"] .output,
html[data-theme="dark"] .preview,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .preview-panel,
html[data-theme="dark"] .preview-box,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .result-box,
html[data-theme="dark"] .result-item,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .value-box,
html[data-theme="dark"] .item,
html[data-theme="dark"] .note,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .tip,
html[data-theme="dark"] .tips,
html[data-theme="dark"] .tips-box,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .hint-box,
html[data-theme="dark"] .help-box,
html[data-theme="dark"] .logic,
html[data-theme="dark"] .logic-box,
html[data-theme="dark"] .message,
html[data-theme="dark"] .msg,
html[data-theme="dark"] .status,
html[data-theme="dark"] .stats,
html[data-theme="dark"] #status,
html[data-theme="dark"] #stats,
html[data-theme="dark"] .status-line,
html[data-theme="dark"] .result-status,
html[data-theme="dark"] .output-status,
html[data-theme="dark"] .settle,
html[data-theme="dark"] .warn,
html[data-theme="dark"] .alert,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .kpi-card{
  background:
    linear-gradient(180deg, rgba(36,30,25,.97), rgba(24,21,18,.95)) !important;
  background-color:#241e19 !important;
  border-color:rgba(226,196,148,.22) !important;
  color:#d8c9ad !important;
}

html[data-theme="dark"] .value,
html[data-theme="dark"] .num,
html[data-theme="dark"] .kpi strong,
html[data-theme="dark"] .stat strong,
html[data-theme="dark"] .metric strong,
html[data-theme="dark"] .item strong{
  color:#f8eeda !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] .markdown-result,
html[data-theme="dark"] .markdown-output,
html[data-theme="dark"] .json-output,
html[data-theme="dark"] .base64-output,
html[data-theme="dark"] .text-output,
html[data-theme="dark"] .output textarea,
html[data-theme="dark"] .result textarea,
html[data-theme="dark"] textarea[readonly]{
  background:#15120f !important;
  background-image:none !important;
  border-color:rgba(226,196,148,.24) !important;
  color:#f6ead6 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus{
  border-color:#d9856d !important;
  box-shadow:0 0 0 3px rgba(180,70,52,.26) !important;
}

html[data-theme="dark"] .people{
  background:#1f1b17 !important;
  border-color:rgba(226,196,148,.22) !important;
}

html[data-theme="dark"] .people-head{
  background:#2f281f !important;
  background-image:linear-gradient(180deg, rgba(51,42,32,.98), rgba(39,33,27,.96)) !important;
  color:#e9d9bf !important;
  border-color:rgba(226,196,148,.24) !important;
}

html[data-theme="dark"] .person-row{
  background:#241e19 !important;
  border-color:rgba(226,196,148,.16) !important;
}

html[data-theme="dark"] .person-row .index{
  color:#cbbba2 !important;
}

html[data-theme="dark"] .table-wrap,
html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] .table-preview,
html[data-theme="dark"] .markdown-preview,
html[data-theme="dark"] .data-table,
html[data-theme="dark"] .form-table{
  background:#241e19 !important;
  border-color:rgba(226,196,148,.22) !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] thead tr,
html[data-theme="dark"] thead th,
html[data-theme="dark"] table th{
  background:#2f281f !important;
  background-image:linear-gradient(180deg, rgba(51,42,32,.98), rgba(39,33,27,.96)) !important;
  border-color:rgba(226,196,148,.24) !important;
  color:#e9d9bf !important;
}

html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td,
html[data-theme="dark"] table td{
  background:#241e19 !important;
  border-color:rgba(226,196,148,.16) !important;
  color:#f6ead6 !important;
}

html[data-theme="dark"] .table-edit,
html[data-theme="dark"] .table-edit table,
html[data-theme="dark"] .table-edit td,
html[data-theme="dark"] .table-edit th{
  background:#241e19 !important;
  border-color:rgba(226,196,148,.18) !important;
}

html[data-theme="dark"] .scale > div,
html[data-theme="dark"] .summary > .item,
html[data-theme="dark"] .result > .item,
html[data-theme="dark"] .result-grid > *,
html[data-theme="dark"] .summary-grid > *,
html[data-theme="dark"] .stats-grid > *,
html[data-theme="dark"] .stat-grid > *,
html[data-theme="dark"] .metric-grid > *,
html[data-theme="dark"] .output-grid > *,
html[data-theme="dark"] .preview-grid > *,
html[data-theme="dark"] .cards > *,
html[data-theme="dark"] .grid > .item,
html[data-theme="dark"] .grid > .result,
html[data-theme="dark"] .grid > .output{
  background:
    linear-gradient(180deg, rgba(36,30,25,.97), rgba(24,21,18,.95)) !important;
  border-color:rgba(226,196,148,.22) !important;
  color:#d8c9ad !important;
}

html[data-theme="dark"] .canvas-wrap,
html[data-theme="dark"] .canvas-box,
html[data-theme="dark"] .wheel-wrap,
html[data-theme="dark"] .wheel-panel,
html[data-theme="dark"] .wheel-area,
html[data-theme="dark"] .image-preview,
html[data-theme="dark"] .img-preview,
html[data-theme="dark"] .crop-area,
html[data-theme="dark"] .upload-area,
html[data-theme="dark"] .drop-zone,
html[data-theme="dark"] .preview-area{
  background:
    linear-gradient(180deg, rgba(36,30,25,.97), rgba(24,21,18,.95)) !important;
  border-color:rgba(226,196,148,.22) !important;
}

html[data-theme="dark"] button.ghost,
html[data-theme="dark"] a.ghost,
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] a.secondary,
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] .ghost-btn,
html[data-theme="dark"] .secondary-btn{
  background:rgba(226,196,148,.08) !important;
  border-color:rgba(226,196,148,.30) !important;
  color:#f6d6c8 !important;
}

html[data-theme="dark"] button.danger,
html[data-theme="dark"] a.danger,
html[data-theme="dark"] .btn.danger,
html[data-theme="dark"] .danger-btn{
  background:rgba(180,70,52,.12) !important;
  border-color:rgba(180,70,52,.38) !important;
  color:#f3b6a5 !important;
}

html[data-theme="dark"] .theme-picker{
  background:rgba(31,27,23,.88) !important;
  border-color:rgba(226,196,148,.24) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .theme-buttons{
  background:rgba(15,18,16,.68) !important;
  border-color:rgba(226,196,148,.16) !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .theme-buttons button,
html[data-theme="dark"] button[data-theme-choice]{
  background:transparent !important;
  background-image:none !important;
  border-color:transparent !important;
  color:#cbbba2 !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .theme-buttons button:hover,
html[data-theme="dark"] button[data-theme-choice]:hover{
  background:rgba(180,70,52,.16) !important;
  color:#f6d6c8 !important;
}

html[data-theme="dark"] .theme-buttons button.active,
html[data-theme="dark"] button[data-theme-choice].active,
html[data-theme="dark"] button[data-theme-choice][aria-pressed="true"]{
  background:linear-gradient(180deg, #c55039, #96392b) !important;
  border-color:#d9856d !important;
  color:#fff8ea !important;
  box-shadow:0 8px 18px rgba(180,70,52,.24) !important;
}

.egg-toast{
  background:
    linear-gradient(180deg, rgba(255,248,234,.98), rgba(250,237,210,.94)) !important;
  color:#2b2119 !important;
  border:1px solid rgba(180,70,52,.30) !important;
  box-shadow:0 14px 34px rgba(78,45,24,.16) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.egg-toast.show{
  opacity:1 !important;
}

html[data-theme="dark"] .egg-toast,
body[data-theme="dark"] .egg-toast{
  background:
    linear-gradient(180deg, rgba(36,30,25,.97), rgba(24,21,18,.95)) !important;
  color:#f8eeda !important;
  border-color:rgba(226,196,148,.30) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.36) !important;
}

input::placeholder,
textarea::placeholder,
.result-box::placeholder,
.output-box::placeholder,
.preview-box::placeholder,
.code-output::placeholder,
input[placeholder]::placeholder,
textarea[placeholder]::placeholder {
  color: #8f7f69 !important;
  opacity: 1 !important;
}

input:focus::placeholder,
textarea:focus::placeholder,
.result-box:focus::placeholder,
.output-box:focus::placeholder,
.preview-box:focus::placeholder,
.code-output:focus::placeholder,
input[placeholder]:focus::placeholder,
textarea[placeholder]:focus::placeholder {
  color: #9b8870 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .result-box::placeholder,
html[data-theme="dark"] .output-box::placeholder,
html[data-theme="dark"] .preview-box::placeholder,
html[data-theme="dark"] .code-output::placeholder,
html[data-theme="dark"] input[placeholder]::placeholder,
html[data-theme="dark"] textarea[placeholder]::placeholder,
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder,
body[data-theme="dark"] .result-box::placeholder,
body[data-theme="dark"] .output-box::placeholder,
body[data-theme="dark"] .preview-box::placeholder,
body[data-theme="dark"] .code-output::placeholder,
body[data-theme="dark"] input[placeholder]::placeholder,
body[data-theme="dark"] textarea[placeholder]::placeholder {
  color: #d3bea2 !important;
  opacity: 1 !important;
}

html[data-theme="dark"] input:focus::placeholder,
html[data-theme="dark"] textarea:focus::placeholder,
html[data-theme="dark"] .result-box:focus::placeholder,
html[data-theme="dark"] .output-box:focus::placeholder,
html[data-theme="dark"] .preview-box:focus::placeholder,
html[data-theme="dark"] .code-output:focus::placeholder,
html[data-theme="dark"] input[placeholder]:focus::placeholder,
html[data-theme="dark"] textarea[placeholder]:focus::placeholder,
body[data-theme="dark"] input:focus::placeholder,
body[data-theme="dark"] textarea:focus::placeholder,
body[data-theme="dark"] .result-box:focus::placeholder,
body[data-theme="dark"] .output-box:focus::placeholder,
body[data-theme="dark"] .preview-box:focus::placeholder,
body[data-theme="dark"] .code-output:focus::placeholder,
body[data-theme="dark"] input[placeholder]:focus::placeholder,
body[data-theme="dark"] textarea[placeholder]:focus::placeholder {
  color: #e2cfb5 !important;
  opacity: 1 !important;
}

button:disabled,
.btn:disabled,
.button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
a[aria-disabled="true"],
button[aria-disabled="true"],
.btn[aria-disabled="true"],
.button[aria-disabled="true"],
.nine-download-disabled,
button.nine-download-disabled,
a.nine-download-disabled{
  cursor:not-allowed !important;
  pointer-events:none !important;
  opacity:1 !important;
  color:#9b8870 !important;
  background:rgba(226,196,148,.16) !important;
  background-image:none !important;
  border:1px solid rgba(180,70,52,.22) !important;
  box-shadow:none !important;
  filter:saturate(.75) !important;
  text-shadow:none !important;
  transform:none !important;
}

button:disabled *,
.btn:disabled *,
.button:disabled *,
input[type="button"]:disabled *,
input[type="submit"]:disabled *,
a[aria-disabled="true"] *,
button[aria-disabled="true"] *,
.btn[aria-disabled="true"] *,
.button[aria-disabled="true"] *,
.nine-download-disabled *,
button.nine-download-disabled *,
a.nine-download-disabled *{
  color:inherit !important;
}

button:disabled:hover,
.btn:disabled:hover,
.button:disabled:hover,
input[type="button"]:disabled:hover,
input[type="submit"]:disabled:hover,
a[aria-disabled="true"]:hover,
button[aria-disabled="true"]:hover,
.btn[aria-disabled="true"]:hover,
.button[aria-disabled="true"]:hover,
.nine-download-disabled:hover,
button.nine-download-disabled:hover,
a.nine-download-disabled:hover{
  cursor:not-allowed !important;
  pointer-events:none !important;
  opacity:1 !important;
  color:#9b8870 !important;
  background:rgba(226,196,148,.16) !important;
  background-image:none !important;
  border-color:rgba(180,70,52,.22) !important;
  box-shadow:none !important;
  filter:saturate(.75) !important;
  transform:none !important;
}

html[data-theme="dark"] button:disabled,
html[data-theme="dark"] .btn:disabled,
html[data-theme="dark"] .button:disabled,
html[data-theme="dark"] input[type="button"]:disabled,
html[data-theme="dark"] input[type="submit"]:disabled,
html[data-theme="dark"] a[aria-disabled="true"],
html[data-theme="dark"] button[aria-disabled="true"],
html[data-theme="dark"] .btn[aria-disabled="true"],
html[data-theme="dark"] .button[aria-disabled="true"],
html[data-theme="dark"] .nine-download-disabled,
html[data-theme="dark"] button.nine-download-disabled,
html[data-theme="dark"] a.nine-download-disabled,
body[data-theme="dark"] button:disabled,
body[data-theme="dark"] .btn:disabled,
body[data-theme="dark"] .button:disabled,
body[data-theme="dark"] input[type="button"]:disabled,
body[data-theme="dark"] input[type="submit"]:disabled,
body[data-theme="dark"] a[aria-disabled="true"],
body[data-theme="dark"] button[aria-disabled="true"],
body[data-theme="dark"] .btn[aria-disabled="true"],
body[data-theme="dark"] .button[aria-disabled="true"],
body[data-theme="dark"] .nine-download-disabled,
body[data-theme="dark"] button.nine-download-disabled,
body[data-theme="dark"] a.nine-download-disabled{
  color:#9b8870 !important;
  background:rgba(226,196,148,.08) !important;
  background-image:none !important;
  border:1px solid rgba(226,196,148,.18) !important;
  box-shadow:none !important;
  filter:saturate(.75) !important;
}

html[data-theme="dark"] button:disabled:hover,
html[data-theme="dark"] .btn:disabled:hover,
html[data-theme="dark"] .button:disabled:hover,
html[data-theme="dark"] input[type="button"]:disabled:hover,
html[data-theme="dark"] input[type="submit"]:disabled:hover,
html[data-theme="dark"] a[aria-disabled="true"]:hover,
html[data-theme="dark"] button[aria-disabled="true"]:hover,
html[data-theme="dark"] .btn[aria-disabled="true"]:hover,
html[data-theme="dark"] .button[aria-disabled="true"]:hover,
html[data-theme="dark"] .nine-download-disabled:hover,
html[data-theme="dark"] button.nine-download-disabled:hover,
html[data-theme="dark"] a.nine-download-disabled:hover,
body[data-theme="dark"] button:disabled:hover,
body[data-theme="dark"] .btn:disabled:hover,
body[data-theme="dark"] .button:disabled:hover,
body[data-theme="dark"] input[type="button"]:disabled:hover,
body[data-theme="dark"] input[type="submit"]:disabled:hover,
body[data-theme="dark"] a[aria-disabled="true"]:hover,
body[data-theme="dark"] button[aria-disabled="true"]:hover,
body[data-theme="dark"] .btn[aria-disabled="true"]:hover,
body[data-theme="dark"] .button[aria-disabled="true"]:hover,
body[data-theme="dark"] .nine-download-disabled:hover,
body[data-theme="dark"] button.nine-download-disabled:hover,
body[data-theme="dark"] a.nine-download-disabled:hover{
  color:#9b8870 !important;
  background:rgba(226,196,148,.08) !important;
  background-image:none !important;
  border-color:rgba(226,196,148,.18) !important;
  box-shadow:none !important;
  filter:saturate(.75) !important;
}

a.back:hover,
.back:hover,
a.home-link:hover,
.home-link:hover,
a.top-link:hover,
.top-link:hover,
a.nav-link:hover,
.nav-link:hover,
a.btn.ghost:hover,
.btn.ghost:hover,
button.ghost:hover,
button.secondary:hover,
a.secondary:hover{
  background:rgba(226,196,148,.30) !important;
  background-image:none !important;
  border-color:rgba(180,70,52,.36) !important;
  color:#96392b !important;
  box-shadow:0 8px 18px rgba(78,45,24,.08) !important;
}

.seo-info,
.seo-section,
.usage-info,
.usage-section,
.help-section{
  background:
    linear-gradient(180deg, rgba(255,250,240,.98), rgba(255,246,229,.94)) !important;
  background-color:#fff8ea !important;
  border-color:rgba(180,70,52,.20) !important;
}

.seo-info .seo-card,
.seo-section .seo-card,
.usage-info .seo-card,
.usage-section .seo-card,
.help-section .seo-card,
.seo-grid > .seo-card,
.seo-grid > div,
.seo-card{
  background:
    linear-gradient(180deg, rgba(255,248,234,.98), rgba(250,237,210,.92)) !important;
  background-color:#fbefd8 !important;
  border-color:rgba(180,70,52,.22) !important;
  color:#2b2119 !important;
  box-shadow:0 10px 24px rgba(78,45,24,.06) !important;
}

.seo-info .seo-card:hover,
.seo-section .seo-card:hover,
.usage-info .seo-card:hover,
.usage-section .seo-card:hover,
.help-section .seo-card:hover,
.seo-grid > .seo-card:hover,
.seo-grid > div:hover,
.seo-card:hover{
  background:
    linear-gradient(180deg, rgba(255,246,229,.99), rgba(246,229,198,.94)) !important;
  border-color:rgba(180,70,52,.34) !important;
  box-shadow:0 12px 26px rgba(78,45,24,.085) !important;
}

.seo-info .seo-card h3,
.seo-section .seo-card h3,
.usage-info .seo-card h3,
.usage-section .seo-card h3,
.help-section .seo-card h3,
.seo-card h3{
  color:#17202a !important;
}

.seo-info .seo-card p,
.seo-info .seo-card li,
.seo-section .seo-card p,
.seo-section .seo-card li,
.usage-info .seo-card p,
.usage-info .seo-card li,
.usage-section .seo-card p,
.usage-section .seo-card li,
.help-section .seo-card p,
.help-section .seo-card li,
.seo-card p,
.seo-card li{
  color:#6f604d !important;
}

html[data-theme="dark"] a.back:hover,
html[data-theme="dark"] .back:hover,
html[data-theme="dark"] a.home-link:hover,
html[data-theme="dark"] .home-link:hover,
html[data-theme="dark"] a.top-link:hover,
html[data-theme="dark"] .top-link:hover,
html[data-theme="dark"] a.nav-link:hover,
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] a.btn.ghost:hover,
html[data-theme="dark"] .btn.ghost:hover,
html[data-theme="dark"] button.ghost:hover,
html[data-theme="dark"] button.secondary:hover,
html[data-theme="dark"] a.secondary:hover{
  background:rgba(180,70,52,.16) !important;
  background-image:none !important;
  border-color:rgba(226,196,148,.36) !important;
  color:#f6d6c8 !important;
  box-shadow:0 10px 22px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] .seo-info,
html[data-theme="dark"] .seo-section,
html[data-theme="dark"] .usage-info,
html[data-theme="dark"] .usage-section,
html[data-theme="dark"] .help-section{
  background:
    linear-gradient(180deg, rgba(31,27,23,.97), rgba(22,20,18,.95)) !important;
  background-color:#1f1b17 !important;
  border-color:rgba(226,196,148,.22) !important;
}

html[data-theme="dark"] .seo-info .seo-card,
html[data-theme="dark"] .seo-section .seo-card,
html[data-theme="dark"] .usage-info .seo-card,
html[data-theme="dark"] .usage-section .seo-card,
html[data-theme="dark"] .help-section .seo-card,
html[data-theme="dark"] .seo-grid > .seo-card,
html[data-theme="dark"] .seo-grid > div,
html[data-theme="dark"] .seo-card{
  background:
    linear-gradient(180deg, rgba(36,30,25,.97), rgba(24,21,18,.95)) !important;
  background-color:#241e19 !important;
  border-color:rgba(226,196,148,.24) !important;
  color:#f6ead6 !important;
  box-shadow:0 12px 26px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .seo-info .seo-card:hover,
html[data-theme="dark"] .seo-section .seo-card:hover,
html[data-theme="dark"] .usage-info .seo-card:hover,
html[data-theme="dark"] .usage-section .seo-card:hover,
html[data-theme="dark"] .help-section .seo-card:hover,
html[data-theme="dark"] .seo-grid > .seo-card:hover,
html[data-theme="dark"] .seo-grid > div:hover,
html[data-theme="dark"] .seo-card:hover{
  background:
    linear-gradient(180deg, rgba(45,36,29,.98), rgba(30,25,21,.96)) !important;
  border-color:rgba(226,196,148,.34) !important;
}

html[data-theme="dark"] .seo-info .seo-card h3,
html[data-theme="dark"] .seo-section .seo-card h3,
html[data-theme="dark"] .usage-info .seo-card h3,
html[data-theme="dark"] .usage-section .seo-card h3,
html[data-theme="dark"] .help-section .seo-card h3,
html[data-theme="dark"] .seo-card h3{
  color:#f8eeda !important;
}

html[data-theme="dark"] .seo-info .seo-card p,
html[data-theme="dark"] .seo-info .seo-card li,
html[data-theme="dark"] .seo-section .seo-card p,
html[data-theme="dark"] .seo-section .seo-card li,
html[data-theme="dark"] .usage-info .seo-card p,
html[data-theme="dark"] .usage-info .seo-card li,
html[data-theme="dark"] .usage-section .seo-card p,
html[data-theme="dark"] .usage-section .seo-card li,
html[data-theme="dark"] .help-section .seo-card p,
html[data-theme="dark"] .help-section .seo-card li,
html[data-theme="dark"] .seo-card p,
html[data-theme="dark"] .seo-card li{
  color:#d8c9ad !important;
}

input[type="file"]{
  color:#2b2119 !important;
  background:#fffaf0 !important;
  border-color:rgba(180,70,52,.24) !important;
}

input[type="file"]::file-selector-button{
  appearance:none;
  -webkit-appearance:none;
  margin-right:10px;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(180,70,52,.34) !important;
  background:linear-gradient(180deg, rgba(255,248,234,.96), rgba(250,237,210,.92)) !important;
  color:#96392b !important;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(78,45,24,.08) !important;
}

input[type="file"]::file-selector-button:hover{
  background:linear-gradient(180deg, rgba(246,229,198,.98), rgba(226,196,148,.34)) !important;
  border-color:rgba(180,70,52,.48) !important;
  color:#7f2f24 !important;
}

input[type="file"]::-webkit-file-upload-button{
  -webkit-appearance:none;
  margin-right:10px;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid rgba(180,70,52,.34) !important;
  background:linear-gradient(180deg, rgba(255,248,234,.96), rgba(250,237,210,.92)) !important;
  color:#96392b !important;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(78,45,24,.08) !important;
}

input[type="file"]::-webkit-file-upload-button:hover{
  background:linear-gradient(180deg, rgba(246,229,198,.98), rgba(226,196,148,.34)) !important;
  border-color:rgba(180,70,52,.48) !important;
  color:#7f2f24 !important;
}

.nine-grid a,
.nine-grid-result a,
.grid-result a,
.pieces a,
.pieces-grid a,
.slice-grid a,
.slice-list a,
.slices a,
.download-list a,
.tile a,
.piece a,
.thumb a,
.cut-card a,
.cut-item a,
a.download,
.download-link,
.download{
  color:#96392b !important;
  text-decoration:none !important;
  font-weight:600;
}

.nine-grid a:hover,
.nine-grid-result a:hover,
.grid-result a:hover,
.pieces a:hover,
.pieces-grid a:hover,
.slice-grid a:hover,
.slice-list a:hover,
.slices a:hover,
.download-list a:hover,
.tile a:hover,
.piece a:hover,
.thumb a:hover,
.cut-card a:hover,
.cut-item a:hover,
a.download:hover,
.download-link:hover,
.download:hover{
  color:#7f2f24 !important;
  background:rgba(226,196,148,.24) !important;
  border-radius:8px;
}

.tile footer,
.piece footer,
.thumb footer,
.cut-card footer,
.cut-item footer,
.tile .download,
.piece .download,
.thumb .download,
.cut-card .download,
.cut-item .download,
.tile .download-link,
.piece .download-link,
.thumb .download-link{
  background:rgba(255,248,234,.88) !important;
  border-color:rgba(180,70,52,.18) !important;
  color:#96392b !important;
}

.nine-grid .badge,
.nine-grid-result .badge,
.grid-result .badge,
.pieces .badge,
.pieces-grid .badge,
.slice-grid .badge,
.slice-list .badge,
.slices .badge,
.tile .badge,
.piece .badge,
.thumb .badge,
.cut-card .badge,
.cut-item .badge,
.nine-grid .index,
.nine-grid-result .index,
.grid-result .index,
.pieces .index,
.pieces-grid .index,
.slice-grid .index,
.slice-list .index,
.slices .index,
.tile .index,
.piece .index,
.thumb .index,
.cut-card .index,
.cut-item .index{
  background:#6f604d !important;
  color:#fff8ea !important;
  border-color:rgba(255,248,234,.65) !important;
}

html[data-theme="dark"] input[type="file"],
body[data-theme="dark"] input[type="file"]{
  color:#f6ead6 !important;
  background:#15120f !important;
  border-color:rgba(226,196,148,.24) !important;
}

html[data-theme="dark"] input[type="file"]::file-selector-button,
body[data-theme="dark"] input[type="file"]::file-selector-button{
  background:linear-gradient(180deg, rgba(36,30,25,.98), rgba(24,21,18,.96)) !important;
  border-color:rgba(226,196,148,.32) !important;
  color:#f6d6c8 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] input[type="file"]::file-selector-button:hover,
body[data-theme="dark"] input[type="file"]::file-selector-button:hover{
  background:rgba(180,70,52,.18) !important;
  border-color:rgba(226,196,148,.46) !important;
  color:#fff8ea !important;
}

html[data-theme="dark"] input[type="file"]::-webkit-file-upload-button,
body[data-theme="dark"] input[type="file"]::-webkit-file-upload-button{
  background:linear-gradient(180deg, rgba(36,30,25,.98), rgba(24,21,18,.96)) !important;
  border-color:rgba(226,196,148,.32) !important;
  color:#f6d6c8 !important;
  box-shadow:0 8px 18px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] input[type="file"]::-webkit-file-upload-button:hover,
body[data-theme="dark"] input[type="file"]::-webkit-file-upload-button:hover{
  background:rgba(180,70,52,.18) !important;
  border-color:rgba(226,196,148,.46) !important;
  color:#fff8ea !important;
}

html[data-theme="dark"] .nine-grid a,
html[data-theme="dark"] .nine-grid-result a,
html[data-theme="dark"] .grid-result a,
html[data-theme="dark"] .pieces a,
html[data-theme="dark"] .pieces-grid a,
html[data-theme="dark"] .slice-grid a,
html[data-theme="dark"] .slice-list a,
html[data-theme="dark"] .slices a,
html[data-theme="dark"] .download-list a,
html[data-theme="dark"] .tile a,
html[data-theme="dark"] .piece a,
html[data-theme="dark"] .thumb a,
html[data-theme="dark"] .cut-card a,
html[data-theme="dark"] .cut-item a,
html[data-theme="dark"] a.download,
html[data-theme="dark"] .download-link,
html[data-theme="dark"] .download,
body[data-theme="dark"] .nine-grid a,
body[data-theme="dark"] .nine-grid-result a,
body[data-theme="dark"] .grid-result a,
body[data-theme="dark"] .pieces a,
body[data-theme="dark"] .pieces-grid a,
body[data-theme="dark"] .slice-grid a,
body[data-theme="dark"] .slice-list a,
body[data-theme="dark"] .slices a,
body[data-theme="dark"] .download-list a,
body[data-theme="dark"] .tile a,
body[data-theme="dark"] .piece a,
body[data-theme="dark"] .thumb a,
body[data-theme="dark"] .cut-card a,
body[data-theme="dark"] .cut-item a,
body[data-theme="dark"] a.download,
body[data-theme="dark"] .download-link,
body[data-theme="dark"] .download{
  color:#f0b49e !important;
}

html[data-theme="dark"] .nine-grid a:hover,
html[data-theme="dark"] .nine-grid-result a:hover,
html[data-theme="dark"] .grid-result a:hover,
html[data-theme="dark"] .pieces a:hover,
html[data-theme="dark"] .pieces-grid a:hover,
html[data-theme="dark"] .slice-grid a:hover,
html[data-theme="dark"] .slice-list a:hover,
html[data-theme="dark"] .slices a:hover,
html[data-theme="dark"] .download-list a:hover,
html[data-theme="dark"] .tile a:hover,
html[data-theme="dark"] .piece a:hover,
html[data-theme="dark"] .thumb a:hover,
html[data-theme="dark"] .cut-card a:hover,
html[data-theme="dark"] .cut-item a:hover,
html[data-theme="dark"] a.download:hover,
html[data-theme="dark"] .download-link:hover,
html[data-theme="dark"] .download:hover,
body[data-theme="dark"] .nine-grid a:hover,
body[data-theme="dark"] .nine-grid-result a:hover,
body[data-theme="dark"] .grid-result a:hover,
body[data-theme="dark"] .pieces a:hover,
body[data-theme="dark"] .pieces-grid a:hover,
body[data-theme="dark"] .slice-grid a:hover,
body[data-theme="dark"] .slice-list a:hover,
body[data-theme="dark"] .slices a:hover,
body[data-theme="dark"] .download-list a:hover,
body[data-theme="dark"] .tile a:hover,
body[data-theme="dark"] .piece a:hover,
body[data-theme="dark"] .thumb a:hover,
body[data-theme="dark"] .cut-card a:hover,
body[data-theme="dark"] .cut-item a:hover,
body[data-theme="dark"] a.download:hover,
body[data-theme="dark"] .download-link:hover,
body[data-theme="dark"] .download:hover{
  color:#ffd1bf !important;
  background:rgba(180,70,52,.16) !important;
}

html[data-theme="dark"] .tile footer,
html[data-theme="dark"] .piece footer,
html[data-theme="dark"] .thumb footer,
html[data-theme="dark"] .cut-card footer,
html[data-theme="dark"] .cut-item footer,
html[data-theme="dark"] .tile .download,
html[data-theme="dark"] .piece .download,
html[data-theme="dark"] .thumb .download,
html[data-theme="dark"] .tile .download-link,
html[data-theme="dark"] .piece .download-link,
html[data-theme="dark"] .thumb .download-link,
body[data-theme="dark"] .tile footer,
body[data-theme="dark"] .piece footer,
body[data-theme="dark"] .thumb footer,
body[data-theme="dark"] .cut-card footer,
body[data-theme="dark"] .cut-item footer,
body[data-theme="dark"] .tile .download,
body[data-theme="dark"] .piece .download,
body[data-theme="dark"] .thumb .download,
body[data-theme="dark"] .tile .download-link,
body[data-theme="dark"] .piece .download-link,
body[data-theme="dark"] .thumb .download-link{
  background:rgba(24,21,18,.90) !important;
  border-color:rgba(226,196,148,.18) !important;
  color:#f0b49e !important;
}

html[data-theme="dark"] .nine-grid .badge,
html[data-theme="dark"] .nine-grid-result .badge,
html[data-theme="dark"] .grid-result .badge,
html[data-theme="dark"] .pieces .badge,
html[data-theme="dark"] .pieces-grid .badge,
html[data-theme="dark"] .slice-grid .badge,
html[data-theme="dark"] .slice-list .badge,
html[data-theme="dark"] .slices .badge,
html[data-theme="dark"] .tile .badge,
html[data-theme="dark"] .piece .badge,
html[data-theme="dark"] .thumb .badge,
html[data-theme="dark"] .cut-card .badge,
html[data-theme="dark"] .cut-item .badge,
body[data-theme="dark"] .nine-grid .badge,
body[data-theme="dark"] .nine-grid-result .badge,
body[data-theme="dark"] .grid-result .badge,
body[data-theme="dark"] .pieces .badge,
body[data-theme="dark"] .pieces-grid .badge,
body[data-theme="dark"] .slice-grid .badge,
body[data-theme="dark"] .slice-list .badge,
body[data-theme="dark"] .slices .badge,
body[data-theme="dark"] .tile .badge,
body[data-theme="dark"] .piece .badge,
body[data-theme="dark"] .thumb .badge,
body[data-theme="dark"] .cut-card .badge,
body[data-theme="dark"] .cut-item .badge{
  background:#6f604d !important;
  color:#fff8ea !important;
  border-color:rgba(226,196,148,.30) !important;
}

a.download:not(.disabled),
button.download:not(:disabled),
#download[href],
#downloadBtn:not(.disabled),
#downloadPng:not(.disabled),
#downloadQr:not(.disabled),
#downloadCrop:not(.disabled),
#downloadResize:not(.disabled),
#downloadFormat:not(.disabled),
a[id*="download"]:not(.disabled),
button[id*="download"]:not(:disabled){
  background:rgba(255,248,234,.88) !important;
  background-image:none !important;
  border:1px solid rgba(180,70,52,.34) !important;
  color:#96392b !important;
  box-shadow:0 8px 18px rgba(78,45,24,.08) !important;
  font-weight:700;
}

a.download:not(.disabled):hover,
button.download:not(:disabled):hover,
#download[href]:hover,
#downloadBtn:not(.disabled):hover,
#downloadPng:not(.disabled):hover,
#downloadQr:not(.disabled):hover,
#downloadCrop:not(.disabled):hover,
#downloadResize:not(.disabled):hover,
#downloadFormat:not(.disabled):hover,
a[id*="download"]:not(.disabled):hover,
button[id*="download"]:not(:disabled):hover{
  background:rgba(226,196,148,.30) !important;
  background-image:none !important;
  border-color:#b44634 !important;
  color:#7f2f24 !important;
  box-shadow:0 10px 22px rgba(78,45,24,.10) !important;
}

a.download.disabled,
#downloadBtn.disabled,
#downloadPng.disabled,
#downloadQr.disabled,
#downloadCrop.disabled,
#downloadResize.disabled,
#downloadFormat.disabled,
a[id*="download"].disabled{
  cursor:not-allowed !important;
  pointer-events:none !important;
  opacity:1 !important;
  color:#9b8870 !important;
  background:rgba(226,196,148,.16) !important;
  background-image:none !important;
  border:1px solid rgba(180,70,52,.22) !important;
  box-shadow:none !important;
  filter:saturate(.75) !important;
}

#status,
#info,
.status,
.info,
.result-info,
.file-info,
.output-info,
.summary,
.summary-box{
  color:#6f604d !important;
}

#status .strong,
#info .strong,
.status .strong,
.info .strong,
.result-info .strong,
.file-info .strong,
.output-info .strong,
.summary .strong,
.summary-box .strong,
#status span,
#info span,
.status span,
.info span{
  color:#96392b !important;
  font-weight:700;
}

#status br + span,
#info br + span{
  color:#96392b !important;
}

#status,
#info{
  background:#fbefd8 !important;
  background-image:linear-gradient(180deg, rgba(255,248,234,.98), rgba(250,237,210,.92)) !important;
  border-color:rgba(180,70,52,.22) !important;
}

html[data-theme="dark"] a.download:not(.disabled),
html[data-theme="dark"] button.download:not(:disabled),
html[data-theme="dark"] #download[href],
html[data-theme="dark"] #downloadBtn:not(.disabled),
html[data-theme="dark"] #downloadPng:not(.disabled),
html[data-theme="dark"] #downloadQr:not(.disabled),
html[data-theme="dark"] #downloadCrop:not(.disabled),
html[data-theme="dark"] #downloadResize:not(.disabled),
html[data-theme="dark"] #downloadFormat:not(.disabled),
html[data-theme="dark"] a[id*="download"]:not(.disabled),
html[data-theme="dark"] button[id*="download"]:not(:disabled),
body[data-theme="dark"] a.download:not(.disabled),
body[data-theme="dark"] button.download:not(:disabled),
body[data-theme="dark"] #download[href],
body[data-theme="dark"] #downloadBtn:not(.disabled),
body[data-theme="dark"] #downloadPng:not(.disabled),
body[data-theme="dark"] #downloadQr:not(.disabled),
body[data-theme="dark"] #downloadCrop:not(.disabled),
body[data-theme="dark"] #downloadResize:not(.disabled),
body[data-theme="dark"] #downloadFormat:not(.disabled),
body[data-theme="dark"] a[id*="download"]:not(.disabled),
body[data-theme="dark"] button[id*="download"]:not(:disabled){
  background:rgba(226,196,148,.08) !important;
  background-image:none !important;
  border:1px solid rgba(226,196,148,.30) !important;
  color:#f6d6c8 !important;
  box-shadow:0 10px 22px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] a.download:not(.disabled):hover,
html[data-theme="dark"] button.download:not(:disabled):hover,
html[data-theme="dark"] #download[href]:hover,
html[data-theme="dark"] #downloadBtn:not(.disabled):hover,
html[data-theme="dark"] #downloadPng:not(.disabled):hover,
html[data-theme="dark"] #downloadQr:not(.disabled):hover,
html[data-theme="dark"] #downloadCrop:not(.disabled):hover,
html[data-theme="dark"] #downloadResize:not(.disabled):hover,
html[data-theme="dark"] #downloadFormat:not(.disabled):hover,
html[data-theme="dark"] a[id*="download"]:not(.disabled):hover,
html[data-theme="dark"] button[id*="download"]:not(:disabled):hover,
body[data-theme="dark"] a.download:not(.disabled):hover,
body[data-theme="dark"] button.download:not(:disabled):hover,
body[data-theme="dark"] #download[href]:hover,
body[data-theme="dark"] #downloadBtn:not(.disabled):hover,
body[data-theme="dark"] #downloadPng:not(.disabled):hover,
body[data-theme="dark"] #downloadQr:not(.disabled):hover,
body[data-theme="dark"] #downloadCrop:not(.disabled):hover,
body[data-theme="dark"] #downloadResize:not(.disabled):hover,
body[data-theme="dark"] #downloadFormat:not(.disabled):hover,
body[data-theme="dark"] a[id*="download"]:not(.disabled):hover,
body[data-theme="dark"] button[id*="download"]:not(:disabled):hover{
  background:rgba(180,70,52,.16) !important;
  background-image:none !important;
  border-color:rgba(226,196,148,.42) !important;
  color:#ffd1bf !important;
}

html[data-theme="dark"] a.download.disabled,
html[data-theme="dark"] #downloadBtn.disabled,
html[data-theme="dark"] #downloadPng.disabled,
html[data-theme="dark"] #downloadQr.disabled,
html[data-theme="dark"] #downloadCrop.disabled,
html[data-theme="dark"] #downloadResize.disabled,
html[data-theme="dark"] #downloadFormat.disabled,
html[data-theme="dark"] a[id*="download"].disabled,
body[data-theme="dark"] a.download.disabled,
body[data-theme="dark"] #downloadBtn.disabled,
body[data-theme="dark"] #downloadPng.disabled,
body[data-theme="dark"] #downloadQr.disabled,
body[data-theme="dark"] #downloadCrop.disabled,
body[data-theme="dark"] #downloadResize.disabled,
body[data-theme="dark"] #downloadFormat.disabled,
body[data-theme="dark"] a[id*="download"].disabled{
  color:#9b8870 !important;
  background:rgba(226,196,148,.08) !important;
  background-image:none !important;
  border:1px solid rgba(226,196,148,.18) !important;
  box-shadow:none !important;
  filter:saturate(.75) !important;
}

html[data-theme="dark"] #status,
html[data-theme="dark"] #info,
html[data-theme="dark"] .status,
html[data-theme="dark"] .info,
html[data-theme="dark"] .result-info,
html[data-theme="dark"] .file-info,
html[data-theme="dark"] .output-info,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .summary-box,
body[data-theme="dark"] #status,
body[data-theme="dark"] #info,
body[data-theme="dark"] .status,
body[data-theme="dark"] .info,
body[data-theme="dark"] .result-info,
body[data-theme="dark"] .file-info,
body[data-theme="dark"] .output-info,
body[data-theme="dark"] .summary,
body[data-theme="dark"] .summary-box{
  color:#d8c9ad !important;
}

html[data-theme="dark"] #status .strong,
html[data-theme="dark"] #info .strong,
html[data-theme="dark"] .status .strong,
html[data-theme="dark"] .info .strong,
html[data-theme="dark"] .result-info .strong,
html[data-theme="dark"] .file-info .strong,
html[data-theme="dark"] .output-info .strong,
html[data-theme="dark"] .summary .strong,
html[data-theme="dark"] .summary-box .strong,
html[data-theme="dark"] #status span,
html[data-theme="dark"] #info span,
html[data-theme="dark"] .status span,
html[data-theme="dark"] .info span,
body[data-theme="dark"] #status .strong,
body[data-theme="dark"] #info .strong,
body[data-theme="dark"] .status .strong,
body[data-theme="dark"] .info .strong,
body[data-theme="dark"] .result-info .strong,
body[data-theme="dark"] .file-info .strong,
body[data-theme="dark"] .output-info .strong,
body[data-theme="dark"] .summary .strong,
body[data-theme="dark"] .summary-box .strong,
body[data-theme="dark"] #status span,
body[data-theme="dark"] #info span,
body[data-theme="dark"] .status span,
body[data-theme="dark"] .info span{
  color:#f0b49e !important;
  font-weight:700;
}

html[data-theme="dark"] #status,
html[data-theme="dark"] #info,
body[data-theme="dark"] #status,
body[data-theme="dark"] #info{
  background:#241e19 !important;
  background-image:linear-gradient(180deg, rgba(36,30,25,.97), rgba(24,21,18,.95)) !important;
  border-color:rgba(226,196,148,.24) !important;
}

#status.compress-simple-result{
  line-height:1.8;
  color:#6f604d !important;
}

html[data-theme="dark"] #status.compress-simple-result,
body[data-theme="dark"] #status.compress-simple-result{
  color:#d8c9ad !important;
}

.preview-area,
.preview-box,
.preview-card,
.preview-panel,
.preview-grid,
.result-area,
.result-box,
.result-card,
.result-grid,
.output-area,
.output-box,
.output-grid,
.image-preview,
.img-preview,
.crop-preview,
.crop-area,
.crop-box,
.canvas-wrap,
.canvas-box,
.canvas-area,
.upload-preview,
.download-area,
.download-box,
.download-list,
.pieces,
.pieces-grid,
.grid-result,
.nine-grid,
.nine-grid-result,
.slices,
.slice-list,
.slice-grid,
.tile,
.piece,
.part,
.cell,
.thumb,
.thumb-card,
.cut-item,
.cut-card{
  background:#fff8ea !important;
  background-image:linear-gradient(180deg, rgba(255,250,240,.98), rgba(255,246,229,.94)) !important;
  border-color:rgba(180,70,52,.22) !important;
  color:#2b2119 !important;
  box-shadow:0 10px 24px rgba(78,45,24,.07) !important;
}

.result-grid > *,
.preview-grid > *,
.output-grid > *,
.pieces > *,
.pieces-grid > *,
.grid-result > *,
.nine-grid > *,
.nine-grid-result > *,
.slices > *,
.slice-list > *,
.slice-grid > *,
.download-list > *,
.thumbs > *,
.thumb-list > *{
  background:#fff8ea !important;
  background-image:linear-gradient(180deg, rgba(255,250,240,.98), rgba(255,246,229,.94)) !important;
  border-color:rgba(180,70,52,.22) !important;
  color:#2b2119 !important;
}

img,
canvas{
  border-color:rgba(180,70,52,.18) !important;
}

.preview-area img,
.preview-box img,
.result-area img,
.result-box img,
.image-preview img,
.img-preview img,
.crop-preview img,
.nine-grid img,
.nine-grid-result img,
.slices img,
.piece img,
.tile img,
.thumb img{
  background:#fff8ea !important;
}

.status,
.status-box,
.message,
.msg,
.notice,
.tip,
.tips,
.hint,
.help,
.meta,
.file-info,
.file-meta,
.result-info,
.output-info,
.download-info,
.size-info,
.summary,
.summary-box,
.info,
.info-box,
.desc,
.description,
.caption,
.text-muted,
.muted,
small{
  color:#6f604d !important;
}

.status,
.status-box,
.message,
.msg,
.result-info,
.output-info,
.file-info,
.file-meta,
.summary,
.summary-box,
.info,
.info-box{
  background:#fbefd8 !important;
  background-image:linear-gradient(180deg, rgba(255,248,234,.98), rgba(250,237,210,.92)) !important;
  border-color:rgba(180,70,52,.22) !important;
}

.badge,
.index,
.num,
.no,
.number,
.download,
.download-link,
a.download,
.piece a,
.tile a,
.thumb a{
  color:#96392b !important;
}

.badge,
.index,
.num,
.no,
.number{
  background:rgba(180,70,52,.12) !important;
  border-color:rgba(180,70,52,.28) !important;
}

.preview-title,
.result-title,
.output-title,
.section-subtitle,
.panel-title,
.card-title{
  color:#17202a !important;
}

input,
select,
textarea{
  background:#fffaf0 !important;
  border-color:rgba(180,70,52,.24) !important;
  color:#261f19 !important;
}

input::file-selector-button{
  background:rgba(255,248,234,.88) !important;
  border:1px solid rgba(180,70,52,.30) !important;
  color:#96392b !important;
  border-radius:8px;
  padding:4px 10px;
}

html[data-theme="dark"] .preview-area,
html[data-theme="dark"] .preview-box,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .preview-panel,
html[data-theme="dark"] .preview-grid,
html[data-theme="dark"] .result-area,
html[data-theme="dark"] .result-box,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .result-grid,
html[data-theme="dark"] .output-area,
html[data-theme="dark"] .output-box,
html[data-theme="dark"] .output-grid,
html[data-theme="dark"] .image-preview,
html[data-theme="dark"] .img-preview,
html[data-theme="dark"] .crop-preview,
html[data-theme="dark"] .crop-area,
html[data-theme="dark"] .crop-box,
html[data-theme="dark"] .canvas-wrap,
html[data-theme="dark"] .canvas-box,
html[data-theme="dark"] .canvas-area,
html[data-theme="dark"] .upload-preview,
html[data-theme="dark"] .download-area,
html[data-theme="dark"] .download-box,
html[data-theme="dark"] .download-list,
html[data-theme="dark"] .pieces,
html[data-theme="dark"] .pieces-grid,
html[data-theme="dark"] .grid-result,
html[data-theme="dark"] .nine-grid,
html[data-theme="dark"] .nine-grid-result,
html[data-theme="dark"] .slices,
html[data-theme="dark"] .slice-list,
html[data-theme="dark"] .slice-grid,
html[data-theme="dark"] .tile,
html[data-theme="dark"] .piece,
html[data-theme="dark"] .part,
html[data-theme="dark"] .cell,
html[data-theme="dark"] .thumb,
html[data-theme="dark"] .thumb-card,
html[data-theme="dark"] .cut-item,
html[data-theme="dark"] .cut-card{
  background:#241e19 !important;
  background-image:linear-gradient(180deg, rgba(36,30,25,.97), rgba(24,21,18,.95)) !important;
  border-color:rgba(226,196,148,.24) !important;
  color:#f6ead6 !important;
  box-shadow:0 12px 26px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .result-grid > *,
html[data-theme="dark"] .preview-grid > *,
html[data-theme="dark"] .output-grid > *,
html[data-theme="dark"] .pieces > *,
html[data-theme="dark"] .pieces-grid > *,
html[data-theme="dark"] .grid-result > *,
html[data-theme="dark"] .nine-grid > *,
html[data-theme="dark"] .nine-grid-result > *,
html[data-theme="dark"] .slices > *,
html[data-theme="dark"] .slice-list > *,
html[data-theme="dark"] .slice-grid > *,
html[data-theme="dark"] .download-list > *,
html[data-theme="dark"] .thumbs > *,
html[data-theme="dark"] .thumb-list > *{
  background:#241e19 !important;
  background-image:linear-gradient(180deg, rgba(36,30,25,.97), rgba(24,21,18,.95)) !important;
  border-color:rgba(226,196,148,.24) !important;
  color:#f6ead6 !important;
}

html[data-theme="dark"] .preview-area img,
html[data-theme="dark"] .preview-box img,
html[data-theme="dark"] .result-area img,
html[data-theme="dark"] .result-box img,
html[data-theme="dark"] .image-preview img,
html[data-theme="dark"] .img-preview img,
html[data-theme="dark"] .crop-preview img,
html[data-theme="dark"] .nine-grid img,
html[data-theme="dark"] .nine-grid-result img,
html[data-theme="dark"] .slices img,
html[data-theme="dark"] .piece img,
html[data-theme="dark"] .tile img,
html[data-theme="dark"] .thumb img{
  background:#241e19 !important;
}

html[data-theme="dark"] .status,
html[data-theme="dark"] .status-box,
html[data-theme="dark"] .message,
html[data-theme="dark"] .msg,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .tip,
html[data-theme="dark"] .tips,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .help,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .file-info,
html[data-theme="dark"] .file-meta,
html[data-theme="dark"] .result-info,
html[data-theme="dark"] .output-info,
html[data-theme="dark"] .download-info,
html[data-theme="dark"] .size-info,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .info,
html[data-theme="dark"] .info-box,
html[data-theme="dark"] .desc,
html[data-theme="dark"] .description,
html[data-theme="dark"] .caption,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .muted,
html[data-theme="dark"] small{
  color:#d8c9ad !important;
}

html[data-theme="dark"] .status,
html[data-theme="dark"] .status-box,
html[data-theme="dark"] .message,
html[data-theme="dark"] .msg,
html[data-theme="dark"] .result-info,
html[data-theme="dark"] .output-info,
html[data-theme="dark"] .file-info,
html[data-theme="dark"] .file-meta,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .info,
html[data-theme="dark"] .info-box{
  background:#241e19 !important;
  background-image:linear-gradient(180deg, rgba(36,30,25,.97), rgba(24,21,18,.95)) !important;
  border-color:rgba(226,196,148,.24) !important;
}

html[data-theme="dark"] .badge,
html[data-theme="dark"] .index,
html[data-theme="dark"] .num,
html[data-theme="dark"] .no,
html[data-theme="dark"] .number{
  background:rgba(226,196,148,.12) !important;
  border-color:rgba(226,196,148,.28) !important;
  color:#f8eeda !important;
}

html[data-theme="dark"] .download,
html[data-theme="dark"] .download-link,
html[data-theme="dark"] a.download,
html[data-theme="dark"] .piece a,
html[data-theme="dark"] .tile a,
html[data-theme="dark"] .thumb a{
  color:#f0b49e !important;
}

html[data-theme="dark"] .preview-title,
html[data-theme="dark"] .result-title,
html[data-theme="dark"] .output-title,
html[data-theme="dark"] .section-subtitle,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .card-title{
  color:#f8eeda !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#15120f !important;
  border-color:rgba(226,196,148,.24) !important;
  color:#f6ead6 !important;
}

html[data-theme="dark"] input::file-selector-button{
  background:rgba(36,30,25,.96) !important;
  border:1px solid rgba(226,196,148,.28) !important;
  color:#f6d6c8 !important;
}

.brand-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 12px;
  }

  .brand-title .brand-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 8px 18px rgba(78,45,24,.12));
  }

  .brand-title .brand-text{
    display:block;
    line-height:1.2;
  }

  @media (max-width:560px){
    .brand-title{
      gap:10px;
      align-items:flex-start;
    }
    .brand-title .brand-icon{
      width:36px;
      height:36px;
      flex:0 0 36px;
      margin-top:2px;
    }
  }

.nine-download-disabled,
button.nine-download-disabled,
a.nine-download-disabled{
  cursor:not-allowed !important;
  opacity:.58 !important;
  pointer-events:none !important;
  background:rgba(226,196,148,.16) !important;
  background-image:none !important;
  border-color:rgba(180,70,52,.22) !important;
  color:#9b8870 !important;
  box-shadow:none !important;
  filter:saturate(.75) !important;
}

button:disabled{
  cursor:not-allowed !important;
}

html[data-theme="dark"] .nine-download-disabled,
html[data-theme="dark"] button.nine-download-disabled,
html[data-theme="dark"] a.nine-download-disabled,
body[data-theme="dark"] .nine-download-disabled,
body[data-theme="dark"] button.nine-download-disabled,
body[data-theme="dark"] a.nine-download-disabled{
  background:rgba(226,196,148,.08) !important;
  background-image:none !important;
  border-color:rgba(226,196,148,.18) !important;
  color:#8f7f69 !important;
  box-shadow:none !important;
}

#downloadBtn,
#download,
#downloadPng,
#downloadQr,
.download-btn,
a.download,
button.download,
button[id*="download"],
a[id*="download"]{
  background:rgba(255,248,234,.86) !important;
  background-image:none !important;
  border:1px solid rgba(180,70,52,.34) !important;
  color:#96392b !important;
  box-shadow:0 8px 18px rgba(78,45,24,.08) !important;
  font-weight:700;
}

#downloadBtn:hover,
#download:hover,
#downloadPng:hover,
#downloadQr:hover,
.download-btn:hover,
a.download:hover,
button.download:hover,
button[id*="download"]:hover,
a[id*="download"]:hover{
  background:rgba(226,196,148,.30) !important;
  background-image:none !important;
  border-color:#b44634 !important;
  color:#7f2f24 !important;
}

html[data-theme="dark"] #downloadBtn,
html[data-theme="dark"] #download,
html[data-theme="dark"] #downloadPng,
html[data-theme="dark"] #downloadQr,
html[data-theme="dark"] .download-btn,
html[data-theme="dark"] a.download,
html[data-theme="dark"] button.download,
html[data-theme="dark"] button[id*="download"],
html[data-theme="dark"] a[id*="download"],
body[data-theme="dark"] #downloadBtn,
body[data-theme="dark"] #download,
body[data-theme="dark"] #downloadPng,
body[data-theme="dark"] #downloadQr,
body[data-theme="dark"] .download-btn,
body[data-theme="dark"] a.download,
body[data-theme="dark"] button.download,
body[data-theme="dark"] button[id*="download"],
body[data-theme="dark"] a[id*="download"]{
  background:rgba(226,196,148,.08) !important;
  background-image:none !important;
  border:1px solid rgba(226,196,148,.30) !important;
  color:#f6d6c8 !important;
  box-shadow:0 10px 22px rgba(0,0,0,.22) !important;
}

html[data-theme="dark"] #downloadBtn:hover,
html[data-theme="dark"] #download:hover,
html[data-theme="dark"] #downloadPng:hover,
html[data-theme="dark"] #downloadQr:hover,
html[data-theme="dark"] .download-btn:hover,
html[data-theme="dark"] a.download:hover,
html[data-theme="dark"] button.download:hover,
html[data-theme="dark"] button[id*="download"]:hover,
html[data-theme="dark"] a[id*="download"]:hover,
body[data-theme="dark"] #downloadBtn:hover,
body[data-theme="dark"] #download:hover,
body[data-theme="dark"] #downloadPng:hover,
body[data-theme="dark"] #downloadQr:hover,
body[data-theme="dark"] .download-btn:hover,
body[data-theme="dark"] a.download:hover,
body[data-theme="dark"] button.download:hover,
body[data-theme="dark"] button[id*="download"]:hover,
body[data-theme="dark"] a[id*="download"]:hover{
  background:rgba(180,70,52,.16) !important;
  border-color:rgba(226,196,148,.42) !important;
  color:#ffd1bf !important;
}

.contact-card,
.contact-box,
.sponsor-contact,
.contact-info{
  color:#2b2119 !important;
}

.contact-card p,
.contact-box p,
.sponsor-contact p,
.contact-info p{
  color:#2b2119 !important;
}

.contact-card strong,
.contact-box strong,
.sponsor-contact strong,
.contact-info strong{
  color:#17202a !important;
}

.contact-card a,
.contact-box a,
.sponsor-contact a,
.contact-info a,
.contact-card span,
.contact-box span,
.sponsor-contact span,
.contact-info span{
  color:#96392b !important;
}

.contact-card p *,
.contact-box p *,
.sponsor-contact p *,
.contact-info p *{
  color:inherit;
}

main p:has(strong),
.card p:has(strong),
.sponsor-card p:has(strong){
  color:#2b2119 !important;
}

main p:has(strong) a,
.card p:has(strong) a,
.sponsor-card p:has(strong) a,
main p:has(strong) span,
.card p:has(strong) span,
.sponsor-card p:has(strong) span{
  color:#96392b !important;
}

html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .contact-box,
html[data-theme="dark"] .sponsor-contact,
html[data-theme="dark"] .contact-info,
body[data-theme="dark"] .contact-card,
body[data-theme="dark"] .contact-box,
body[data-theme="dark"] .sponsor-contact,
body[data-theme="dark"] .contact-info{
  color:#f6ead6 !important;
}

html[data-theme="dark"] .contact-card p,
html[data-theme="dark"] .contact-box p,
html[data-theme="dark"] .sponsor-contact p,
html[data-theme="dark"] .contact-info p,
body[data-theme="dark"] .contact-card p,
body[data-theme="dark"] .contact-box p,
body[data-theme="dark"] .sponsor-contact p,
body[data-theme="dark"] .contact-info p{
  color:#f6ead6 !important;
}

html[data-theme="dark"] .contact-card strong,
html[data-theme="dark"] .contact-box strong,
html[data-theme="dark"] .sponsor-contact strong,
html[data-theme="dark"] .contact-info strong,
body[data-theme="dark"] .contact-card strong,
body[data-theme="dark"] .contact-box strong,
body[data-theme="dark"] .sponsor-contact strong,
body[data-theme="dark"] .contact-info strong{
  color:#f8eeda !important;
}

html[data-theme="dark"] .contact-card a,
html[data-theme="dark"] .contact-box a,
html[data-theme="dark"] .sponsor-contact a,
html[data-theme="dark"] .contact-info a,
html[data-theme="dark"] .contact-card span,
html[data-theme="dark"] .contact-box span,
html[data-theme="dark"] .sponsor-contact span,
html[data-theme="dark"] .contact-info span,
body[data-theme="dark"] .contact-card a,
body[data-theme="dark"] .contact-box a,
body[data-theme="dark"] .sponsor-contact a,
body[data-theme="dark"] .contact-info a,
body[data-theme="dark"] .contact-card span,
body[data-theme="dark"] .contact-box span,
body[data-theme="dark"] .sponsor-contact span,
body[data-theme="dark"] .contact-info span{
  color:#f0b49e !important;
}

html[data-theme="dark"] main p:has(strong),
html[data-theme="dark"] .card p:has(strong),
html[data-theme="dark"] .sponsor-card p:has(strong),
body[data-theme="dark"] main p:has(strong),
body[data-theme="dark"] .card p:has(strong),
body[data-theme="dark"] .sponsor-card p:has(strong){
  color:#f6ead6 !important;
}

html[data-theme="dark"] main p:has(strong) a,
html[data-theme="dark"] .card p:has(strong) a,
html[data-theme="dark"] .sponsor-card p:has(strong) a,
html[data-theme="dark"] main p:has(strong) span,
html[data-theme="dark"] .card p:has(strong) span,
html[data-theme="dark"] .sponsor-card p:has(strong) span,
body[data-theme="dark"] main p:has(strong) a,
body[data-theme="dark"] .card p:has(strong) a,
body[data-theme="dark"] .sponsor-card p:has(strong) a,
body[data-theme="dark"] main p:has(strong) span,
body[data-theme="dark"] .card p:has(strong) span,
body[data-theme="dark"] .sponsor-card p:has(strong) span{
  color:#f0b49e !important;
}

.contact-value{
  color:#96392b !important;
  font-weight:500;
}

html[data-theme="dark"] .contact-value,
body[data-theme="dark"] .contact-value{
  color:#f0b49e !important;
}

.mini-card .num,
.stat-egg-card .num,
.summary .num,
.summary .value,
.summary .strong,
.grid .item .num,
.grid .item .value,
.grid .item .strong,
.result .num,
.result .value,
.result .strong,
.output .num,
.output .value,
.output .strong,
.status .num,
.status .value,
.status .strong,
.info .num,
.info .value,
.info .strong,
.item > .num,
.item > .value,
.item > .strong,
.metric > .num,
.metric > .value,
.metric > .strong,
.stat > .num,
.stat > .value,
.stat > .strong,
#site_visit_count{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  padding:0 !important;
}

.mini-card .num,
.stat-egg-card .num,
.summary .num,
.summary .value,
.summary .strong,
.grid .item .num,
.grid .item .value,
.grid .item .strong,
.result .num,
.result .value,
.result .strong,
.output .num,
.output .value,
.output .strong,
.status .num,
.status .value,
.status .strong,
.info .num,
.info .value,
.info .strong,
.item > .num,
.item > .value,
.item > .strong,
.metric > .num,
.metric > .value,
.metric > .strong,
.stat > .num,
.stat > .value,
.stat > .strong,
#site_visit_count{
  color:#96392b !important;
}

.badge.num,
.num.badge,
.piece .num,
.tile .num,
.thumb .num,
.cut-card .num,
.cut-item .num{
  padding:inherit;
}

html[data-theme="dark"] .mini-card .num,
html[data-theme="dark"] .stat-egg-card .num,
html[data-theme="dark"] .summary .num,
html[data-theme="dark"] .summary .value,
html[data-theme="dark"] .summary .strong,
html[data-theme="dark"] .grid .item .num,
html[data-theme="dark"] .grid .item .value,
html[data-theme="dark"] .grid .item .strong,
html[data-theme="dark"] .result .num,
html[data-theme="dark"] .result .value,
html[data-theme="dark"] .result .strong,
html[data-theme="dark"] .output .num,
html[data-theme="dark"] .output .value,
html[data-theme="dark"] .output .strong,
html[data-theme="dark"] .status .num,
html[data-theme="dark"] .status .value,
html[data-theme="dark"] .status .strong,
html[data-theme="dark"] .info .num,
html[data-theme="dark"] .info .value,
html[data-theme="dark"] .info .strong,
html[data-theme="dark"] .item > .num,
html[data-theme="dark"] .item > .value,
html[data-theme="dark"] .item > .strong,
html[data-theme="dark"] .metric > .num,
html[data-theme="dark"] .metric > .value,
html[data-theme="dark"] .metric > .strong,
html[data-theme="dark"] .stat > .num,
html[data-theme="dark"] .stat > .value,
html[data-theme="dark"] .stat > .strong,
html[data-theme="dark"] #site_visit_count,
body[data-theme="dark"] .mini-card .num,
body[data-theme="dark"] .stat-egg-card .num,
body[data-theme="dark"] .summary .num,
body[data-theme="dark"] .summary .value,
body[data-theme="dark"] .summary .strong,
body[data-theme="dark"] .grid .item .num,
body[data-theme="dark"] .grid .item .value,
body[data-theme="dark"] .grid .item .strong,
body[data-theme="dark"] .result .num,
body[data-theme="dark"] .result .value,
body[data-theme="dark"] .result .strong,
body[data-theme="dark"] .output .num,
body[data-theme="dark"] .output .value,
body[data-theme="dark"] .output .strong,
body[data-theme="dark"] .status .num,
body[data-theme="dark"] .status .value,
body[data-theme="dark"] .status .strong,
body[data-theme="dark"] .info .num,
body[data-theme="dark"] .info .value,
body[data-theme="dark"] .info .strong,
body[data-theme="dark"] .item > .num,
body[data-theme="dark"] .item > .value,
body[data-theme="dark"] .item > .strong,
body[data-theme="dark"] .metric > .num,
body[data-theme="dark"] .metric > .value,
body[data-theme="dark"] .metric > .strong,
body[data-theme="dark"] .stat > .num,
body[data-theme="dark"] .stat > .value,
body[data-theme="dark"] .stat > .strong,
body[data-theme="dark"] #site_visit_count{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  box-shadow:none !important;
  filter:none !important;
  padding:0 !important;
  color:#f0b49e !important;
}

html body .people{
  background:#fff8ea!important;
  background-image:linear-gradient(180deg, rgba(255,250,240,.98), rgba(255,246,229,.94))!important;
  border:1px solid rgba(180,70,52,.22)!important;
  box-shadow:0 10px 24px rgba(78,45,24,.07)!important;
}

html body .people-head{
  background:#f4e7cf!important;
  background-image:linear-gradient(180deg, rgba(250,237,210,.98), rgba(242,222,190,.94))!important;
  border-color:rgba(180,70,52,.20)!important;
  color:#6b5542!important;
}

html body .people-head *,
html body .people-head div,
html body .people-head span{
  background:transparent!important;
  color:#6b5542!important;
}

html body .person-row{
  background:#fff8ea!important;
  background-image:linear-gradient(180deg, rgba(255,250,240,.97), rgba(255,246,229,.93))!important;
  border-color:rgba(180,70,52,.14)!important;
  color:#2b2119!important;
}

html body .person-row .index{
  background:transparent!important;
  color:#6f604d!important;
}

html body .person-row input{
  background:#fffaf0!important;
  background-image:none!important;
  border-color:rgba(180,70,52,.24)!important;
  color:#261f19!important;
}

html body .person-row input::placeholder{
  color:#9b8870!important;
}

html[data-theme="dark"] body .people{
  background:#241e19!important;
  background-image:linear-gradient(180deg, rgba(36,30,25,.97), rgba(24,21,18,.95))!important;
  border:1px solid rgba(226,196,148,.24)!important;
  box-shadow:0 12px 26px rgba(0,0,0,.24)!important;
}

html[data-theme="dark"] body .people-head{
  background:#2f281f!important;
  background-image:linear-gradient(180deg, rgba(51,42,32,.98), rgba(39,33,27,.96))!important;
  border-color:rgba(226,196,148,.24)!important;
  color:#e9d9bf!important;
}

html[data-theme="dark"] body .people-head *,
html[data-theme="dark"] body .people-head div,
html[data-theme="dark"] body .people-head span{
  background:transparent!important;
  color:#e9d9bf!important;
}

html[data-theme="dark"] body .person-row{
  background:#241e19!important;
  background-image:linear-gradient(180deg, rgba(36,30,25,.97), rgba(24,21,18,.95))!important;
  border-color:rgba(226,196,148,.16)!important;
  color:#f6ead6!important;
}

html[data-theme="dark"] body .person-row .index{
  background:transparent!important;
  color:#d8c9ad!important;
}

html[data-theme="dark"] body .person-row input{
  background:#15120f!important;
  background-image:none!important;
  border-color:rgba(226,196,148,.24)!important;
  color:#f6ead6!important;
}

html[data-theme="dark"] body .person-row input::placeholder{
  color:#d3bea2!important;
}

#cropBox,
.crop-box#cropBox{
  background:rgba(255,248,234,.05) !important;
  background-image:none !important;
  box-shadow:0 0 0 1px rgba(180,70,52,.35), 0 0 0 9999px rgba(0,0,0,.04) !important;
  border:2px solid rgba(180,70,52,.75) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

#cropBox::before,
.crop-box#cropBox::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  background:
    linear-gradient(to right, transparent 33.333%, rgba(180,70,52,.22) 33.333%, rgba(180,70,52,.22) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(180,70,52,.22) 66.666%, rgba(180,70,52,.22) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(to bottom, transparent 33.333%, rgba(180,70,52,.22) 33.333%, rgba(180,70,52,.22) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(180,70,52,.22) 66.666%, rgba(180,70,52,.22) calc(66.666% + 1px), transparent calc(66.666% + 1px)) !important;
}

#handle,
.crop-box#cropBox #handle{
  background:#4f6bff !important;
  border:2px solid #fff8ea !important;
  box-shadow:0 2px 8px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] #cropBox,
html[data-theme="dark"] .crop-box#cropBox,
body[data-theme="dark"] #cropBox,
body[data-theme="dark"] .crop-box#cropBox{
  background:rgba(36,30,25,.04) !important;
  background-image:none !important;
  box-shadow:0 0 0 1px rgba(226,196,148,.34), 0 0 0 9999px rgba(0,0,0,.10) !important;
  border:2px solid rgba(226,196,148,.78) !important;
}

html[data-theme="dark"] #cropBox::before,
html[data-theme="dark"] .crop-box#cropBox::before,
body[data-theme="dark"] #cropBox::before,
body[data-theme="dark"] .crop-box#cropBox::before{
  background:
    linear-gradient(to right, transparent 33.333%, rgba(226,196,148,.22) 33.333%, rgba(226,196,148,.22) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(226,196,148,.22) 66.666%, rgba(226,196,148,.22) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(to bottom, transparent 33.333%, rgba(226,196,148,.22) 33.333%, rgba(226,196,148,.22) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(226,196,148,.22) 66.666%, rgba(226,196,148,.22) calc(66.666% + 1px), transparent calc(66.666% + 1px)) !important;
}

html[data-theme="dark"] #handle,
html[data-theme="dark"] .crop-box#cropBox #handle,
body[data-theme="dark"] #handle,
body[data-theme="dark"] .crop-box#cropBox #handle{
  background:#4f6bff !important;
  border:2px solid #f8eeda !important;
}

body.page-sponsor .qr-card img {
  display: block !important;
  width: 100% !important;
  max-width: 320px !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}

img {
  max-width: 100%;
  height: auto;
}
img[width][height] {
  height: auto;
}

.preview img:not([src]),
.preview img[src=""],
.preview-area img:not([src]),
.preview-area img[src=""],
.preview-box img:not([src]),
.preview-box img[src=""],
.image-preview img:not([src]),
.image-preview img[src=""],
.img-preview img:not([src]),
.img-preview img[src=""],
.crop-preview img:not([src]),
.crop-preview img[src=""],
.upload-preview img:not([src]),
.upload-preview img[src=""],
img#preview:not([src]),
img#preview[src=""],
img#before:not([src]),
img#before[src=""],
img#after:not([src]),
img#after[src=""],
img#image:not([src]),
img#image[src=""],
img#originalPreview:not([src]),
img#originalPreview[src=""] {
  display: none !important;
}

:root {
  --ui-ok-bg: #ecfdf3;
  --ui-ok-text: #15803d;
  --ui-ok-border: #bbf7d0;
  --ui-info-bg: #eff6ff;
  --ui-info-text: #1d4ed8;
  --ui-info-border: #bfdbfe;
  --ui-warn-bg: #fff7ed;
  --ui-warn-text: #c2410c;
  --ui-warn-border: #fed7aa;
  --ui-error-bg: #fff1f2;
  --ui-error-text: #be123c;
  --ui-error-border: #fecdd3;
  --ui-empty-bg: rgba(255, 248, 234, .62);
  --ui-empty-border: rgba(180, 70, 52, .18);
}

html[data-theme="dark"] {
  --ui-ok-bg: rgba(20, 83, 45, .28);
  --ui-ok-text: #86efac;
  --ui-ok-border: rgba(134, 239, 172, .24);
  --ui-info-bg: rgba(30, 64, 175, .24);
  --ui-info-text: #93c5fd;
  --ui-info-border: rgba(147, 197, 253, .22);
  --ui-warn-bg: rgba(124, 45, 18, .24);
  --ui-warn-text: #fdba74;
  --ui-warn-border: rgba(253, 186, 116, .22);
  --ui-error-bg: rgba(127, 29, 29, .24);
  --ui-error-text: #fca5a5;
  --ui-error-border: rgba(252, 165, 165, .24);
  --ui-empty-bg: rgba(36, 30, 25, .48);
  --ui-empty-border: rgba(226, 196, 148, .18);
}

button,
.btn,
.download,
.linkbtn {
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

button:focus-visible,
.btn:focus-visible,
.download:focus-visible,
.linkbtn:focus-visible,
a.card:focus-visible,
.theme-buttons button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(59, 91, 255, .18), 0 8px 18px rgba(15, 23, 42, .10) !important;
}

html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] .btn:focus-visible,
html[data-theme="dark"] .download:focus-visible,
html[data-theme="dark"] .linkbtn:focus-visible,
html[data-theme="dark"] a.card:focus-visible,
html[data-theme="dark"] .theme-buttons button:focus-visible {
  box-shadow: 0 0 0 4px rgba(139, 92, 246, .24), 0 8px 18px rgba(0, 0, 0, .26) !important;
}

button:disabled,
button[aria-disabled="true"],
.btn:disabled,
.download.disabled,
.download[aria-disabled="true"],
.linkbtn.disabled,
.linkbtn[aria-disabled="true"],
.dcmqht-is-disabled {
  opacity: .54 !important;
  cursor: not-allowed !important;
  filter: saturate(.78) !important;
  box-shadow: none !important;
  transform: none !important;
}

button:disabled:hover,
button[aria-disabled="true"]:hover,
.download.disabled:hover,
.download[aria-disabled="true"]:hover,
.linkbtn.disabled:hover,
.linkbtn[aria-disabled="true"]:hover {
  box-shadow: none !important;
  transform: none !important;
}

.dcmqht-btn-flash-ok {
  background: var(--ui-ok-bg) !important;
  color: var(--ui-ok-text) !important;
  border-color: var(--ui-ok-border) !important;
}

.dcmqht-btn-flash-error {
  background: var(--ui-error-bg) !important;
  color: var(--ui-error-text) !important;
  border-color: var(--ui-error-border) !important;
}

.status,
.msg,
.stats,
.info,
.dcmqht-status {
  line-height: 1.8;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}

.status:empty,
.msg:empty,
.dcmqht-status:empty {
  min-height: 1.8em;
}

.status.dcmqht-state-ok,
.msg.dcmqht-state-ok,
.info.dcmqht-state-ok {
  color: var(--ui-ok-text) !important;
}

.status.dcmqht-state-error,
.msg.dcmqht-state-error,
.info.dcmqht-state-error {
  color: var(--ui-error-text) !important;
}

.status.dcmqht-state-hint,
.msg.dcmqht-state-hint,
.info.dcmqht-state-hint {
  color: var(--ui-muted) !important;
}

.result .bad,
.msg.err,
.status.err,
.dcmqht-state-error .bad {
  color: var(--ui-error-text) !important;
}

.result .ok,
.msg.ok,
.status.ok,
.dcmqht-state-ok .ok {
  color: var(--ui-ok-text) !important;
}

.dcmqht-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 116px;
  width: 100%;
  padding: 18px;
  border: 1px dashed var(--ui-empty-border);
  border-radius: 14px;
  background: var(--ui-empty-bg);
  color: var(--ui-muted) !important;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
}

.dcmqht-has-media > .dcmqht-empty-state,
.dcmqht-has-result > .dcmqht-empty-state {
  display: none !important;
}

textarea[readonly]:placeholder-shown,
input[readonly]:placeholder-shown {
  color: var(--ui-muted) !important;
}

.result,
.result-box,
.preview,
.preview-box,
.output-wrap,
.box,
.panel {
  scrollbar-color: rgba(180, 70, 52, .38) transparent;
}

html[data-theme="dark"] .result,
html[data-theme="dark"] .result-box,
html[data-theme="dark"] .preview,
html[data-theme="dark"] .preview-box,
html[data-theme="dark"] .output-wrap,
html[data-theme="dark"] .box,
html[data-theme="dark"] .panel {
  scrollbar-color: rgba(226, 196, 148, .34) transparent;
}

:root {
  --ui-surface-soft: rgba(255, 248, 234, .56);
  --ui-surface-soft-border: rgba(180, 70, 52, .16);
  --ui-result-shadow: 0 10px 24px rgba(92, 48, 36, .06);
}

html[data-theme="dark"] {
  --ui-surface-soft: rgba(35, 28, 22, .56);
  --ui-surface-soft-border: rgba(226, 196, 148, .16);
  --ui-result-shadow: 0 10px 28px rgba(0, 0, 0, .22);
}

.dcmqht-result-surface {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease;
}

.dcmqht-result-surface.dcmqht-is-empty:not(textarea):not(input) {
  color: var(--ui-muted) !important;
}

textarea.dcmqht-result-surface,
input.dcmqht-result-surface {
  caret-color: var(--ui-primary, #b44634);
}

textarea[readonly].dcmqht-result-surface,
input[readonly].dcmqht-result-surface {
  background: var(--ui-card, var(--card, #fff)) !important;
}

body.page-count .grid,
body.page-age .result,
body.page-loan .result,
body.page-tax .result,
body.page-date .result,
body.page-bmi .result,
body.page-unit #result {
  position: relative;
}

body.page-count .item,
body.page-age .item,
body.page-loan .result,
body.page-tax .result,
body.page-date .result,
body.page-bmi .result,
body.page-unit #result,
body.page-random-number .result,
body.page-random #result {
  background: var(--ui-card, var(--card, #fff)) !important;
  border-color: var(--ui-border, var(--line, #e5e7eb)) !important;
}

body.page-count .num,
body.page-age .value,
body.page-loan strong,
body.page-tax strong,
body.page-date strong,
body.page-bmi strong,
body.page-unit #resultValue {
  color: var(--ui-text, var(--text, #111827)) !important;
}

html[data-theme="dark"] body.page-count .item,
html[data-theme="dark"] body.page-age .item,
html[data-theme="dark"] body.page-loan .result,
html[data-theme="dark"] body.page-tax .result,
html[data-theme="dark"] body.page-date .result,
html[data-theme="dark"] body.page-bmi .result,
html[data-theme="dark"] body.page-unit #result,
html[data-theme="dark"] body.page-random-number .result,
html[data-theme="dark"] body.page-random #result {
  box-shadow: var(--ui-result-shadow) !important;
}

a.download.dcmqht-is-disabled,
a.linkbtn.dcmqht-is-disabled,
a.download[aria-disabled="true"],
a.linkbtn[aria-disabled="true"] {
  pointer-events: none !important;
  text-decoration: none !important;
}

body.page-aa .table-wrap,
body.page-aa .settle,
body.page-md-table .preview,
body.page-nine-grid #resultGrid,
body.page-img-format #previewBox,
body.page-img-resize #previewBox {
  border-color: var(--ui-border, var(--line, #e5e7eb)) !important;
}

textarea[readonly].dcmqht-is-empty,
input[readonly].dcmqht-is-empty {
  background-image: linear-gradient(135deg, transparent, rgba(180, 70, 52, .025)) !important;
}

html[data-theme="dark"] textarea[readonly].dcmqht-is-empty,
html[data-theme="dark"] input[readonly].dcmqht-is-empty {
  background-image: linear-gradient(135deg, transparent, rgba(226, 196, 148, .035)) !important;
}

body.page-count .num,
body.page-age .value,
body.page-random-number #output,
body.page-unit #resultValue {
  font-variant-numeric: tabular-nums;
}

body.page-date .result .big,
body.page-date #result .big {
  color: var(--ui-text, var(--text, #111827)) !important;
  background: transparent !important;
  text-shadow: none !important;
}

html[data-theme="dark"] body.page-date .result .big,
html[data-theme="dark"] body.page-date #result .big {
  color: var(--ui-text, #fff7e6) !important;
  background: transparent !important;
  text-shadow: none !important;
}

textarea:not([data-font="mono"]),
textarea:not([data-font="mono"])::placeholder {
  font-family: var(--ui-font-sans) !important;
  letter-spacing: normal !important;
}

textarea[data-font="mono"],
textarea[data-font="mono"]::placeholder {
  font-family: var(--ui-font-mono) !important;
}

body.page-zh-convert .stat {
  gap: 8px !important;
  margin-top: 12px !important;
  color: var(--ui-muted) !important;
}

body.page-zh-convert .stat .pill {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  border: 1px solid var(--ui-surface-soft-border, rgba(180, 70, 52, .18)) !important;
  background: var(--ui-surface-soft, rgba(255, 248, 234, .72)) !important;
  color: var(--ui-muted, #6f5b48) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

html[data-theme="dark"] body.page-zh-convert .stat .pill {
  border-color: rgba(226, 196, 148, .22) !important;
  background: rgba(226, 196, 148, .08) !important;
  color: var(--ui-muted, #d8c3a0) !important;
}

body.page-md-table #preview {
  display: block !important;
  visibility: visible !important;
}
body.page-md-table #preview table {
  width: 100%;
  border-collapse: collapse;
}

body.page-img-crop .stage {
  background-color: rgba(255,248,234,.72) !important;
  background-image:
    linear-gradient(45deg, rgba(180,70,52,.10) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(180,70,52,.10) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(180,70,52,.10) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(180,70,52,.10) 75%) !important;
  background-size: 24px 24px !important;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0 !important;
  border-color: rgba(180,70,52,.26) !important;
}

body.page-img-crop .placeholder {
  color: var(--ui-accent, #b44634) !important;
  opacity: .92 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255,248,234,.72) !important;
}

body.page-img-crop .image-box {
  background: rgba(255,248,234,.94) !important;
}

body.page-img-crop .crop-box#cropBox,
body.page-img-crop #cropBox {
  background: rgba(255,248,234,.035) !important;
  background-image: none !important;
  border: 1px solid rgba(255,248,234,.96) !important;
  box-shadow:
    0 0 0 2px rgba(180,70,52,.96),
    inset 0 0 0 1px rgba(255,248,234,.76),
    0 0 0 9999px rgba(38,31,25,.44) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.page-img-crop .crop-box#cropBox::before,
body.page-img-crop #cropBox::before,
body.page-img-crop .crop-box#cropBox::after,
body.page-img-crop #cropBox::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}

body.page-img-crop .crop-box#cropBox::before,
body.page-img-crop #cropBox::before {
  background:
    linear-gradient(to right, transparent 33.333%, rgba(255,248,234,.88) 33.333%, rgba(255,248,234,.88) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,248,234,.88) 66.666%, rgba(255,248,234,.88) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(to bottom, transparent 33.333%, rgba(255,248,234,.88) 33.333%, rgba(255,248,234,.88) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,248,234,.88) 66.666%, rgba(255,248,234,.88) calc(66.666% + 1px), transparent calc(66.666% + 1px)) !important;
}

body.page-img-crop .crop-box#cropBox::after,
body.page-img-crop #cropBox::after {
  background:
    linear-gradient(to right, transparent 33.333%, rgba(180,70,52,.50) 33.333%, rgba(180,70,52,.50) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(180,70,52,.50) 66.666%, rgba(180,70,52,.50) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(to bottom, transparent 33.333%, rgba(180,70,52,.50) 33.333%, rgba(180,70,52,.50) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(180,70,52,.50) 66.666%, rgba(180,70,52,.50) calc(66.666% + 1px), transparent calc(66.666% + 1px)) !important;
}

body.page-img-crop .crop-box#cropBox .handle,
body.page-img-crop #cropBox #handle {
  background: #4f6bff !important;
  border: 2px solid #fff8ea !important;
  box-shadow: 0 2px 10px rgba(38,31,25,.38), 0 0 0 1px rgba(180,70,52,.30) !important;
}

html[data-theme="dark"] body.page-img-crop .stage,
body[data-theme="dark"].page-img-crop .stage {
  background-color: rgba(20,17,14,.92) !important;
  background-image:
    linear-gradient(45deg, rgba(226,196,148,.16) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(226,196,148,.16) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(226,196,148,.16) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(226,196,148,.16) 75%) !important;
  background-size: 24px 24px !important;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0 !important;
  border-color: rgba(226,196,148,.30) !important;
}

html[data-theme="dark"] body.page-img-crop .placeholder,
body[data-theme="dark"].page-img-crop .placeholder {
  color: var(--ui-text, #f7e8c8) !important;
  opacity: .94 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35) !important;
}

html[data-theme="dark"] body.page-img-crop .image-box,
body[data-theme="dark"].page-img-crop .image-box {
  background: rgba(20,17,14,.96) !important;
}

html[data-theme="dark"] body.page-img-crop .crop-box#cropBox,
html[data-theme="dark"] body.page-img-crop #cropBox,
body[data-theme="dark"].page-img-crop .crop-box#cropBox,
body[data-theme="dark"].page-img-crop #cropBox {
  background: rgba(20,17,14,.04) !important;
  background-image: none !important;
  border: 1px solid rgba(255,248,234,.88) !important;
  box-shadow:
    0 0 0 2px rgba(226,196,148,.96),
    inset 0 0 0 1px rgba(0,0,0,.34),
    0 0 0 9999px rgba(0,0,0,.58) !important;
}

html[data-theme="dark"] body.page-img-crop .crop-box#cropBox::before,
html[data-theme="dark"] body.page-img-crop #cropBox::before,
body[data-theme="dark"].page-img-crop .crop-box#cropBox::before,
body[data-theme="dark"].page-img-crop #cropBox::before {
  background:
    linear-gradient(to right, transparent 33.333%, rgba(255,248,234,.68) 33.333%, rgba(255,248,234,.68) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,248,234,.68) 66.666%, rgba(255,248,234,.68) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(to bottom, transparent 33.333%, rgba(255,248,234,.68) 33.333%, rgba(255,248,234,.68) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255,248,234,.68) 66.666%, rgba(255,248,234,.68) calc(66.666% + 1px), transparent calc(66.666% + 1px)) !important;
}

html[data-theme="dark"] body.page-img-crop .crop-box#cropBox::after,
html[data-theme="dark"] body.page-img-crop #cropBox::after,
body[data-theme="dark"].page-img-crop .crop-box#cropBox::after,
body[data-theme="dark"].page-img-crop #cropBox::after {
  background:
    linear-gradient(to right, transparent 33.333%, rgba(226,196,148,.62) 33.333%, rgba(226,196,148,.62) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(226,196,148,.62) 66.666%, rgba(226,196,148,.62) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(to bottom, transparent 33.333%, rgba(226,196,148,.62) 33.333%, rgba(226,196,148,.62) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(226,196,148,.62) 66.666%, rgba(226,196,148,.62) calc(66.666% + 1px), transparent calc(66.666% + 1px)) !important;
}

body.page-tax .result .big,
body.page-tax #result .big {
  color: var(--ui-text, var(--text, #111827)) !important;
  background: transparent !important;
  text-shadow: none !important;
}

html[data-theme="dark"] body.page-tax .result .big,
html[data-theme="dark"] body.page-tax #result .big {
  color: var(--ui-text, #fff7e6) !important;
  background: transparent !important;
  text-shadow: none !important;
}

.result .big,
#result .big,
.result strong,
#result strong,
.result .value,
#result .value,
.summary .value,
.summary strong,
.output-wrap .big,
.output-wrap strong,
.output-wrap .value,
.dcmqht-result-surface .big,
.dcmqht-result-surface strong,
.dcmqht-result-surface .value {
  color: var(--ui-text, var(--text, #111827)) !important;
  background: transparent !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .result .big,
html[data-theme="dark"] #result .big,
html[data-theme="dark"] .result strong,
html[data-theme="dark"] #result strong,
html[data-theme="dark"] .result .value,
html[data-theme="dark"] #result .value,
html[data-theme="dark"] .summary .value,
html[data-theme="dark"] .summary strong,
html[data-theme="dark"] .output-wrap .big,
html[data-theme="dark"] .output-wrap strong,
html[data-theme="dark"] .output-wrap .value,
html[data-theme="dark"] .dcmqht-result-surface .big,
html[data-theme="dark"] .dcmqht-result-surface strong,
html[data-theme="dark"] .dcmqht-result-surface .value {
  color: var(--ui-text, var(--text, #f6ead6)) !important;
  background: transparent !important;
  text-shadow: none !important;
}

body.page-img-crop #cropResultBox,
body.page-img-crop #cropResultBox > div:first-child {
  color: var(--ui-text, var(--text, #111827)) !important;
}

html[data-theme="dark"] body.page-img-crop #cropResultBox,
html[data-theme="dark"] body.page-img-crop #cropResultBox > div:first-child {
  color: var(--ui-text, var(--text, #f6ead6)) !important;
}

footer .beian-row,
.beian-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 10px;
  margin-top: 4px;
  color: var(--ui-muted, var(--muted, #6f5b48));
  font-size: 14px;
  line-height: 1.8;
}

footer .beian-row a,
.beian-row a,
footer .gongan-beian,
.gongan-beian {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: inherit !important;
  text-decoration: none !important;
  white-space: nowrap;
}

footer .beian-row a:hover,
.beian-row a:hover,
footer .gongan-beian:hover,
.gongan-beian:hover {
  color: var(--ui-primary, #b44634) !important;
  text-decoration: none !important;
}

footer .beian-sep,
.beian-sep {
  color: var(--ui-muted, var(--muted, #6f5b48));
  opacity: .65;
}

footer .gongan-beian img,
.gongan-beian img {
  width: 18px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 520px) {
  footer .beian-row,
  .beian-row {
    display: flex;
    max-width: 100%;
  }
}

:root {
  --ui-component-gap: 10px;
  --ui-component-pad-y: 12px;
  --ui-component-pad-x: 14px;
  --ui-component-radius: 14px;
  --ui-component-radius-lg: 18px;
  --ui-component-control-h: 46px;
  --ui-component-focus: rgba(180, 70, 52, .18);
  --ui-component-soft: rgba(255, 248, 234, .86);
  --ui-component-softer: rgba(250, 237, 210, .76);
  --ui-component-line: rgba(180, 70, 52, .22);
  --ui-component-line-strong: rgba(180, 70, 52, .36);
  --ui-component-ok: #2f7d47;
  --ui-component-warn: #9a5b18;
  --ui-component-error: #b44634;
}

html[data-theme="dark"] {
  --ui-component-focus: rgba(226, 196, 148, .22);
  --ui-component-soft: rgba(38, 30, 24, .88);
  --ui-component-softer: rgba(49, 39, 30, .78);
  --ui-component-line: rgba(226, 196, 148, .20);
  --ui-component-line-strong: rgba(226, 196, 148, .34);
  --ui-component-ok: #9cd8a9;
  --ui-component-warn: #e7c07a;
  --ui-component-error: #f0a08f;
}

.card, .tool-card, .panel, .box, .result, .output, .output-wrap, .preview, .note,
.seo-info, .seo-card, .form-card, .upload-card, .option-card, .result-card,
.result-box, .summary, .summary-card, .message, .notice, .tip, .help-box,
.table-wrap, details, fieldset {
  border-color: var(--ui-component-line) !important;
  border-radius: var(--ui-component-radius-lg) !important;
}

.result, .output, .output-wrap, .preview, .summary, .summary-card, .result-card,
.result-box, .result-item, .message, .notice, .tip, .help-box, .status, .msg,
.result-status, .output-status, .empty, .note {
  background: linear-gradient(180deg, var(--ui-component-soft), var(--ui-component-softer)) !important;
  border-color: var(--ui-component-line) !important;
  color: var(--ui-muted, var(--hutong-muted, #6f604d)) !important;
}

.actions, .btns, .buttons, .toolbar, .controls, .control-row, .button-row,
.action-row, .menu-actions, .result-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--ui-component-gap) !important;
}

.actions > *, .btns > *, .buttons > *, .toolbar > *, .controls > *, .control-row > *,
.button-row > *, .action-row > *, .result-actions > * {
  min-width: 0;
}

button, .btn, a.btn, .download, .linkbtn, .file-label {
  min-height: var(--ui-component-control-h) !important;
  border-radius: var(--ui-component-radius) !important;
  border-width: 1px !important;
  letter-spacing: normal !important;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible, .btn:focus-visible, a.btn:focus-visible, .download:focus-visible,
.linkbtn:focus-visible, .file-label:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px var(--ui-component-focus) !important;
}

button:disabled, .btn:disabled, button[aria-disabled="true"], .btn[aria-disabled="true"],
.download[aria-disabled="true"], .linkbtn[aria-disabled="true"] {
  opacity: .55 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea {
  width: 100%;
  border-radius: var(--ui-component-radius) !important;
  border-color: var(--ui-component-line) !important;
}

textarea[readonly], input[readonly], .output textarea, .result textarea {
  background: var(--ui-component-soft) !important;
  cursor: default;
}

label, legend, .label {
  font-weight: 650;
}

.hint, .help, .desc, .description, .sub, .muted, small {
  line-height: 1.75;
}

.file-label, .drop, .drop-zone, .upload-area, .upload-card, .drop-area, .file-zone,
.file-box, .file-card, .image-box, .preview-area, .canvas-wrap, .canvas-box,
.crop-area, .wheel-wrap, .wheel-panel, .wheel-area {
  background: linear-gradient(180deg, var(--ui-component-soft), rgba(255, 250, 240, .72)) !important;
  border-color: var(--ui-component-line) !important;
  border-radius: var(--ui-component-radius-lg) !important;
  color: var(--ui-text, var(--hutong-text, #2b2119)) !important;
}

html[data-theme="dark"] .file-label, html[data-theme="dark"] .drop,
html[data-theme="dark"] .drop-zone, html[data-theme="dark"] .upload-area,
html[data-theme="dark"] .upload-card, html[data-theme="dark"] .drop-area,
html[data-theme="dark"] .file-zone, html[data-theme="dark"] .file-box,
html[data-theme="dark"] .file-card, html[data-theme="dark"] .image-box,
html[data-theme="dark"] .preview-area, html[data-theme="dark"] .canvas-wrap,
html[data-theme="dark"] .canvas-box, html[data-theme="dark"] .crop-area,
html[data-theme="dark"] .wheel-wrap, html[data-theme="dark"] .wheel-panel,
html[data-theme="dark"] .wheel-area {
  background: linear-gradient(180deg, var(--ui-component-soft), var(--ui-component-softer)) !important;
  color: var(--ui-text, #f6ead6) !important;
}

.file-label:hover, .drop:hover, .drop-zone:hover, .upload-area:hover, .file-zone:hover {
  border-color: var(--ui-component-line-strong) !important;
}

.status, .msg, .message, .notice, .result-status, .output-status, [role="status"],
[data-status], [data-state] {
  border-radius: var(--ui-component-radius) !important;
}

.status.success, .msg.success, .message.success, .notice.success,
[data-status="success"], [data-state="success"] {
  color: var(--ui-component-ok) !important;
  border-color: color-mix(in srgb, var(--ui-component-ok) 36%, transparent) !important;
}

.status.error, .msg.error, .message.error, .notice.error,
[data-status="error"], [data-state="error"] {
  color: var(--ui-component-error) !important;
  border-color: color-mix(in srgb, var(--ui-component-error) 38%, transparent) !important;
}

.status.warn, .status.warning, .msg.warn, .msg.warning, .notice.warn, .notice.warning,
[data-status="warn"], [data-status="warning"], [data-state="warn"], [data-state="warning"] {
  color: var(--ui-component-warn) !important;
  border-color: color-mix(in srgb, var(--ui-component-warn) 36%, transparent) !important;
}

.table-wrap, .table-preview, .markdown-preview, .data-table, .form-table {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

table, .table {
  width: 100%;
  border-collapse: collapse;
}

th, td, table th, table td {
  vertical-align: top;
  line-height: 1.65;
}

pre, code, .code, .json-output, .base64-output, .markdown-output, .text-output {
  border-color: var(--ui-component-line) !important;
  border-radius: var(--ui-component-radius) !important;
}

.pill, .badge, .tag, .chip, .check, .option, .option-pill, .stat-pill {
  border-color: var(--ui-component-line) !important;
  border-radius: 999px !important;
  background: var(--ui-component-soft) !important;
  color: var(--ui-text, var(--hutong-text, #2b2119)) !important;
}

.pill.active, .badge.active, .tag.active, .chip.active, .check:has(input:checked),
.option.active, .option-pill.active, [aria-pressed="true"].pill, [aria-pressed="true"].chip {
  border-color: var(--ui-primary, var(--hutong-red, #b44634)) !important;
  color: var(--ui-primary, var(--hutong-red, #b44634)) !important;
  background: rgba(180, 70, 52, .10) !important;
}

.empty, .placeholder, .no-result {
  color: var(--ui-muted, var(--hutong-muted, #6f604d)) !important;
  border-style: dashed !important;
}

.download, .linkbtn, a.download, a.linkbtn {
  color: var(--ui-primary, var(--hutong-red, #b44634)) !important;
}

@media (max-width: 640px) {
  .actions, .btns, .buttons, .toolbar, .controls, .control-row, .button-row,
  .action-row, .result-actions {
    gap: 8px !important;
  }
  button, .btn, a.btn, .download, .linkbtn, .file-label {
    min-height: 42px !important;
  }
}

:root {
  --ui-touch-target: 42px;
  --ui-focus-outline: 0 0 0 4px var(--ui-component-focus, rgba(180, 70, 52, .18));
  --ui-readable-line: 1.75;
  --ui-scroll-margin: 24px;
}

html[data-theme="light"] :where(input, textarea, select) { color-scheme: light; }
html[data-theme="dark"] :where(input, textarea, select) { color-scheme: dark; }

:where(main, .container, .wrap, .content, .tool, .tool-grid, .grid, .form-grid,
.result-grid, .cards, .home-grid, .friend-grid, .info-grid) {
  min-width: 0;
}

:where(.card, .tool-card, .friend-card, .info-card, .panel, .box, .result,
.output, .output-wrap, .preview, .preview-area, .result-card, .summary,
.note, .notice, .message, .status, .msg, .seo-info, .seo-card, .table-wrap,
.markdown-preview, pre, code) {
  overflow-wrap: anywhere;
  word-break: break-word;
}

:where(img, canvas, video, svg) {
  max-width: 100%;
}

:where(.table-wrap, .markdown-preview, pre, .code, .json-output, .base64-output,
.text-output, .output-wrap, .result, .preview, .preview-area) {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

:where(input, select, textarea, button, .btn, .file-label, .download, .linkbtn) {
  max-width: 100%;
}

:where(button, .btn, a.card, a.tool-card, a.friend-card, a.info-card, .file-label,
.download, .linkbtn, summary) {
  touch-action: manipulation;
}

:where(a, button, input, select, textarea, summary, [role="button"]):focus-visible {
  outline: none !important;
  box-shadow: var(--ui-focus-outline) !important;
}

:where(input, textarea, select)::placeholder {
  color: color-mix(in srgb, var(--ui-muted, #6f604d) 72%, transparent);
  opacity: 1;
}

input[type="file"]::file-selector-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--ui-component-line, rgba(180, 70, 52, .22));
  color: var(--ui-primary, var(--hutong-red, #b44634));
  background: var(--ui-component-soft, rgba(255, 248, 234, .86));
  font: inherit;
  cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
  border-color: var(--ui-component-line-strong, rgba(180, 70, 52, .36));
}

:where(textarea) {
  resize: vertical;
  line-height: var(--ui-readable-line);
}

:where(.tool-section, section, .card, .panel, .result, .preview, .seo-card,
.info-card, .friend-card, .tool-card) {
  scroll-margin-top: var(--ui-scroll-margin);
}

:where(.actions, .btns, .buttons, .toolbar, .controls, .control-row, .button-row,
.action-row, .result-actions) :where(button, .btn, .download, .linkbtn) {
  min-width: min(100%, 8em);
}

@media (max-width: 520px) {
  :where(.actions, .btns, .buttons, .toolbar, .controls, .control-row, .button-row,
  .action-row, .result-actions) :where(button, .btn, .download, .linkbtn) {
    flex: 1 1 140px;
  }

  :where(.card, .panel, .box, .result, .output, .preview, .note, .seo-card,
  .info-card, .friend-card) {
    border-radius: 16px !important;
  }
}

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

body.page-video .engine-panel select,
body.page-video .engine-status-box {
  min-height: var(--ui-touch-target, 42px);
}
body.page-video .engine-status-box span {
  overflow-wrap: anywhere;
}
body.page-video .engine-actions .btn {
  min-height: 38px;
}


/* ========================================================================== */
/* v61 视觉精修：以米白墙面、砖红与深墨为统一视觉语言                         */
/* ========================================================================== */
:root{
  --ui-bg:#f6efe5 !important;
  --ui-bg-soft:#efe4d5 !important;
  --ui-card:#fffdf8 !important;
  --ui-card-soft:#fbf6ed !important;
  --ui-text:#2a2520 !important;
  --ui-muted:#74675b !important;
  --ui-border:rgba(112,78,55,.18) !important;
  --ui-primary:#a94636 !important;
  --ui-primary-2:#b9523e !important;
  --ui-primary-text:#fffaf3 !important;
  --ui-ghost:#f3e9dc !important;
  --ui-danger-bg:#f7e4df !important;
  --ui-danger-text:#9d372d !important;
  --ui-shadow:0 10px 30px rgba(73,48,32,.055) !important;
  --ui-shadow-hover:0 16px 38px rgba(73,48,32,.095) !important;
  --ui-radius:20px;
  --ui-radius-sm:12px;
  --ui-card-radius:20px;
  --ui-control-radius:12px;
  --ui-btn-radius:12px;
  --ui-focus-ring:rgba(169,70,54,.14);
  --ui-component-focus:rgba(169,70,54,.16);
  --ui-component-line:rgba(112,78,55,.18);
  --ui-component-line-strong:rgba(169,70,54,.34);
  --ui-component-soft:#f7efe4;
  --ui-surface-soft:#f7efe4;
  --ui-surface-soft-border:rgba(112,78,55,.16);
  --hutong-red:#a94636;
  --hutong-red-2:#b9523e;
  --hutong-red-dark:#8f382c;
  --hutong-ink:#2a2520;
  --hutong-text:#342d27;
  --hutong-muted:#74675b;
  --hutong-bg:#f6efe5;
  --hutong-card:#fffdf8;
  --hutong-card-2:#f8f0e4;
  --hutong-line:rgba(112,78,55,.18);
  --hutong-line-strong:rgba(169,70,54,.32);
  --hutong-shadow:0 10px 30px rgba(73,48,32,.055);
}

html{
  background:#f6efe5 !important;
}

body{
  background:
    radial-gradient(circle at 8% -5%,rgba(194,90,67,.09),transparent 27rem),
    radial-gradient(circle at 96% 3%,rgba(213,179,130,.17),transparent 30rem),
    linear-gradient(180deg,#faf6ef 0%,#f6efe5 48%,#f3ebdf 100%) !important;
  background-attachment:fixed !important;
  color:var(--ui-text) !important;
}

body::before{
  height:4px;
  background:linear-gradient(90deg,transparent 0%,rgba(169,70,54,.30) 15%,rgba(169,70,54,.72) 50%,rgba(169,70,54,.30) 85%,transparent 100%) !important;
  opacity:.72 !important;
}

::selection{
  background:rgba(169,70,54,.18);
  color:var(--ui-text);
}

body:not(.page-home){
  padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));
}

body:not(.page-home) .wrap{
  width:min(100%,980px);
  padding-top:34px;
  padding-bottom:34px;
}

body:not(.page-home) main.wrap > .back{
  min-height:36px;
  padding:7px 11px !important;
  border:1px solid rgba(112,78,55,.14) !important;
  background:color-mix(in srgb,var(--ui-card) 72%,transparent) !important;
  box-shadow:0 4px 14px rgba(73,48,32,.025) !important;
  backdrop-filter:blur(10px);
}

body:not(.page-home) main.wrap > h1{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:24px;
  margin-bottom:8px;
  font-size:clamp(28px,4vw,34px);
  line-height:1.25;
  letter-spacing:-.035em;
}

body:not(.page-home) main.wrap > h1::before{
  content:"";
  display:block;
  width:5px;
  height:.9em;
  flex:0 0 5px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--ui-primary-2),var(--ui-primary));
  box-shadow:0 0 0 4px rgba(169,70,54,.08);
}

body:not(.page-home) main.wrap > .sub{
  max-width:760px;
  margin-bottom:22px;
  font-size:14.5px;
  line-height:1.78;
}

.card,.panel,.box,.form-card,.main-card,.page-card,.section-card,.content-card,
.calculator,.converter,.editor-card,.upload-card,.option-card,.privacy-card,
.sponsor-card,.qr-card,.contact-card,details,fieldset{
  border-color:var(--ui-border) !important;
  background:linear-gradient(180deg,var(--ui-card),color-mix(in srgb,var(--ui-card) 93%,var(--ui-bg))) !important;
  box-shadow:var(--ui-shadow) !important;
}

.result,.output,.preview,.preview-card,.preview-panel,.preview-box,.summary,
.summary-card,.summary-box,.result-card,.result-box,.result-item,.metric,.metric-card,
.stat,.stat-card,.value-card,.value-box,.item,.note,.notice,.tip,.tips,.tips-box,
.hint-box,.help-box,.logic,.logic-box,.message,.msg,.status,.stats,#status,#stats,
.status-line,.result-status,.output-status,.settle,.warn,.alert,.kpi,.kpi-card{
  border-color:rgba(112,78,55,.16) !important;
  background:linear-gradient(180deg,#fbf6ed,#f6eee2) !important;
  box-shadow:0 6px 20px rgba(73,48,32,.035) !important;
}

.result,.output,.summary,.result-card,.result-box,.settle{
  border-color:rgba(169,70,54,.18) !important;
}

.seo-info,.seo-section,.usage-info,.usage-section,.help-section{
  margin-top:24px;
  border-color:rgba(112,78,55,.15) !important;
  background:color-mix(in srgb,var(--ui-card) 72%,transparent) !important;
  box-shadow:none !important;
}

.seo-info > h2,.seo-section > h2,.usage-info > h2,.usage-section > h2,.help-section > h2{
  font-size:18px !important;
  letter-spacing:-.015em;
}

.seo-info .seo-card,.seo-section .seo-card,.usage-info .seo-card,.usage-section .seo-card,
.help-section .seo-card,.seo-grid > .seo-card,.seo-grid > div,.seo-card{
  border-color:rgba(112,78,55,.14) !important;
  background:linear-gradient(180deg,#fffdf8,#faf4ea) !important;
  box-shadow:none !important;
}

input,textarea,select,
.markdown-result,.markdown-output,.json-output,.base64-output,.text-output,
.output textarea,.result textarea,textarea[readonly]{
  border-color:rgba(112,78,55,.20) !important;
  background:#fffdf9 !important;
  color:var(--ui-text) !important;
}

input:hover,textarea:hover,select:hover{
  border-color:rgba(169,70,54,.28) !important;
}

input:focus,textarea:focus,select:focus{
  border-color:var(--ui-primary) !important;
  box-shadow:0 0 0 4px rgba(169,70,54,.12) !important;
}

button,.btn,.download,.linkbtn,a.btn{
  letter-spacing:.005em;
  box-shadow:none !important;
}

.primary,.btn.primary,.actions button:not([class]),button.primary,button[type="submit"]{
  background:linear-gradient(180deg,var(--ui-primary-2),var(--ui-primary)) !important;
  border-color:#90382d !important;
  color:var(--ui-primary-text) !important;
  box-shadow:0 7px 17px rgba(169,70,54,.16) !important;
}

.ghost,.secondary,.btn.ghost,.btn.secondary,button.ghost,button.secondary,
.download,.linkbtn{
  border-color:rgba(112,78,55,.18) !important;
  background:#f5ecdf !important;
  color:#5f5145 !important;
}

.danger,.btn.danger,button.danger{
  border-color:rgba(157,55,45,.18) !important;
  background:#f7e4df !important;
  color:#98382e !important;
}

@media(hover:hover){
  button:hover,.btn:hover,.download:hover,.linkbtn:hover,a.btn:hover{
    filter:none !important;
  }
  .primary:hover,.btn.primary:hover,button.primary:hover,button[type="submit"]:hover{
    transform:translateY(-1px);
    background:linear-gradient(180deg,#b34a38,#8f382c) !important;
    box-shadow:0 10px 22px rgba(169,70,54,.20) !important;
  }
  .ghost:hover,.secondary:hover,.btn.ghost:hover,.btn.secondary:hover,
  button.ghost:hover,button.secondary:hover,.download:hover,.linkbtn:hover{
    transform:translateY(-1px);
    border-color:rgba(169,70,54,.32) !important;
    background:#efe2d2 !important;
    color:#8f382c !important;
    box-shadow:0 7px 17px rgba(73,48,32,.07) !important;
  }
  .danger:hover,.btn.danger:hover,button.danger:hover{
    transform:translateY(-1px);
    border-color:rgba(157,55,45,.30) !important;
    background:#f2d6cf !important;
  }
}

.theme-picker{
  padding:7px !important;
  border-color:rgba(112,78,55,.16) !important;
  background:color-mix(in srgb,var(--ui-card) 88%,transparent) !important;
  color:var(--ui-muted) !important;
  box-shadow:0 8px 24px rgba(73,48,32,.07) !important;
  backdrop-filter:blur(14px);
}

.theme-buttons{
  background:#f0e6d9 !important;
}

.theme-buttons button,
button[data-theme-choice]{
  color:#76675a !important;
}

.theme-buttons button.active,
button[data-theme-choice].active,
button[data-theme-choice][aria-pressed="true"]{
  background:var(--ui-card) !important;
  border-color:rgba(112,78,55,.13) !important;
  color:var(--ui-text) !important;
  box-shadow:0 3px 10px rgba(73,48,32,.08) !important;
}

table,.table,.table-wrap,.data-table,.form-table{
  border-color:rgba(112,78,55,.16) !important;
  background:var(--ui-card) !important;
}

thead,thead tr,thead th,table th,.people-head{
  border-color:rgba(112,78,55,.15) !important;
  background:#f2e7d8 !important;
  color:#67584b !important;
}

tbody,tr,td,table td,.person-row{
  border-color:rgba(112,78,55,.11) !important;
  background:var(--ui-card) !important;
  color:var(--ui-text) !important;
}

footer{
  color:color-mix(in srgb,var(--ui-muted) 86%,transparent) !important;
}

footer::before{
  opacity:.62;
  filter:saturate(.88);
}

/* 暖黑深色模式 */
html[data-theme="dark"]{
  --ui-bg:#161411 !important;
  --ui-bg-soft:#1c1915 !important;
  --ui-card:#211e1a !important;
  --ui-card-soft:#1b1815 !important;
  --ui-text:#f3e9dc !important;
  --ui-muted:#bcae9d !important;
  --ui-border:rgba(221,191,149,.18) !important;
  --ui-primary:#a94636 !important;
  --ui-primary-2:#b9523e !important;
  --ui-primary-text:#fffaf3 !important;
  --ui-ghost:#2b251f !important;
  --ui-danger-bg:#38231f !important;
  --ui-danger-text:#f1b5a9 !important;
  --ui-shadow:0 12px 34px rgba(0,0,0,.22) !important;
  --ui-shadow-hover:0 18px 42px rgba(0,0,0,.30) !important;
  --ui-focus-ring:rgba(212,114,88,.18);
  --ui-component-focus:rgba(212,114,88,.20);
  --ui-component-line:rgba(221,191,149,.18);
  --ui-component-line-strong:rgba(212,114,88,.40);
  --ui-component-soft:#2a241e;
  --ui-surface-soft:#2a241e;
  --ui-surface-soft-border:rgba(221,191,149,.16);
  --hutong-red:#c35b47;
  --hutong-red-2:#d47258;
  --hutong-red-dark:#e08a72;
  --hutong-ink:#f3e9dc;
  --hutong-text:#e9dece;
  --hutong-muted:#bcae9d;
  --hutong-bg:#161411;
  --hutong-card:#211e1a;
  --hutong-card-2:#26211c;
  --hutong-line:rgba(221,191,149,.18);
  --hutong-line-strong:rgba(212,114,88,.34);
}

html[data-theme="dark"],html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 8% -5%,rgba(195,91,71,.14),transparent 27rem),
    radial-gradient(circle at 96% 3%,rgba(221,191,149,.06),transparent 30rem),
    linear-gradient(180deg,#191613 0%,#141210 52%,#11100e 100%) !important;
  background-color:#141210 !important;
}

html[data-theme="dark"] body::before{
  background:linear-gradient(90deg,transparent 0%,rgba(212,114,88,.18) 15%,rgba(212,114,88,.58) 50%,rgba(212,114,88,.18) 85%,transparent 100%) !important;
  opacity:.72 !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .box,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .main-card,
html[data-theme="dark"] .page-card,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .content-card,
html[data-theme="dark"] .calculator,
html[data-theme="dark"] .converter,
html[data-theme="dark"] .editor-card,
html[data-theme="dark"] .upload-card,
html[data-theme="dark"] .option-card,
html[data-theme="dark"] .privacy-card,
html[data-theme="dark"] .sponsor-card,
html[data-theme="dark"] .qr-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] details,
html[data-theme="dark"] fieldset{
  border-color:var(--ui-border) !important;
  background:linear-gradient(180deg,#231f1b,#1e1b17) !important;
  box-shadow:var(--ui-shadow) !important;
}

html[data-theme="dark"] .result,
html[data-theme="dark"] .output,
html[data-theme="dark"] .preview,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .preview-panel,
html[data-theme="dark"] .preview-box,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .summary-box,
html[data-theme="dark"] .result-card,
html[data-theme="dark"] .result-box,
html[data-theme="dark"] .result-item,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .value-box,
html[data-theme="dark"] .item,
html[data-theme="dark"] .note,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .tip,
html[data-theme="dark"] .tips,
html[data-theme="dark"] .tips-box,
html[data-theme="dark"] .hint-box,
html[data-theme="dark"] .help-box,
html[data-theme="dark"] .logic,
html[data-theme="dark"] .logic-box,
html[data-theme="dark"] .message,
html[data-theme="dark"] .msg,
html[data-theme="dark"] .status,
html[data-theme="dark"] .stats,
html[data-theme="dark"] #status,
html[data-theme="dark"] #stats,
html[data-theme="dark"] .status-line,
html[data-theme="dark"] .result-status,
html[data-theme="dark"] .output-status,
html[data-theme="dark"] .settle,
html[data-theme="dark"] .warn,
html[data-theme="dark"] .alert,
html[data-theme="dark"] .kpi,
html[data-theme="dark"] .kpi-card{
  border-color:rgba(221,191,149,.15) !important;
  background:linear-gradient(180deg,#29231e,#231e1a) !important;
  color:var(--ui-muted) !important;
  box-shadow:0 6px 22px rgba(0,0,0,.16) !important;
}

html[data-theme="dark"] .seo-info,
html[data-theme="dark"] .seo-section,
html[data-theme="dark"] .usage-info,
html[data-theme="dark"] .usage-section,
html[data-theme="dark"] .help-section{
  border-color:rgba(221,191,149,.13) !important;
  background:rgba(33,30,26,.66) !important;
  box-shadow:none !important;
}

html[data-theme="dark"] .seo-info .seo-card,
html[data-theme="dark"] .seo-section .seo-card,
html[data-theme="dark"] .usage-info .seo-card,
html[data-theme="dark"] .usage-section .seo-card,
html[data-theme="dark"] .help-section .seo-card,
html[data-theme="dark"] .seo-grid > .seo-card,
html[data-theme="dark"] .seo-grid > div,
html[data-theme="dark"] .seo-card{
  border-color:rgba(221,191,149,.13) !important;
  background:linear-gradient(180deg,#25211c,#211d19) !important;
  box-shadow:none !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] pre,
html[data-theme="dark"] code,
html[data-theme="dark"] .markdown-result,
html[data-theme="dark"] .markdown-output,
html[data-theme="dark"] .json-output,
html[data-theme="dark"] .base64-output,
html[data-theme="dark"] .text-output,
html[data-theme="dark"] .output textarea,
html[data-theme="dark"] .result textarea,
html[data-theme="dark"] textarea[readonly]{
  border-color:rgba(221,191,149,.18) !important;
  background:#1b1815 !important;
  color:var(--ui-text) !important;
}

html[data-theme="dark"] .ghost,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .btn.secondary,
html[data-theme="dark"] button.ghost,
html[data-theme="dark"] button.secondary,
html[data-theme="dark"] .download,
html[data-theme="dark"] .linkbtn{
  border-color:rgba(221,191,149,.17) !important;
  background:#29241e !important;
  color:#d6c4af !important;
}

html[data-theme="dark"] .danger,
html[data-theme="dark"] .btn.danger,
html[data-theme="dark"] button.danger{
  border-color:rgba(241,181,169,.16) !important;
  background:#38231f !important;
  color:#f1b5a9 !important;
}

html[data-theme="dark"] .theme-picker{
  border-color:rgba(221,191,149,.14) !important;
  background:rgba(33,30,26,.90) !important;
}

html[data-theme="dark"] .theme-buttons{
  background:#191714 !important;
}

html[data-theme="dark"] .theme-buttons button,
html[data-theme="dark"] button[data-theme-choice]{
  color:#bcae9d !important;
}

html[data-theme="dark"] .theme-buttons button.active,
html[data-theme="dark"] button[data-theme-choice].active,
html[data-theme="dark"] button[data-theme-choice][aria-pressed="true"]{
  border-color:rgba(221,191,149,.12) !important;
  background:#2b261f !important;
  color:#f3e9dc !important;
  box-shadow:0 3px 10px rgba(0,0,0,.20) !important;
}

html[data-theme="dark"] thead,
html[data-theme="dark"] thead tr,
html[data-theme="dark"] thead th,
html[data-theme="dark"] table th,
html[data-theme="dark"] .people-head{
  border-color:rgba(221,191,149,.14) !important;
  background:#2a251f !important;
  color:#c9b8a4 !important;
}

html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] td,
html[data-theme="dark"] table td,
html[data-theme="dark"] .person-row{
  border-color:rgba(221,191,149,.09) !important;
  background:#211e1a !important;
  color:var(--ui-text) !important;
}

@media(max-width:640px){
  body:not(.page-home){
    padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  }
  body:not(.page-home) .wrap{
    padding-top:22px;
    padding-bottom:26px;
  }
  body:not(.page-home) main.wrap > h1{
    margin-top:18px;
    font-size:28px;
  }
  body:not(.page-home) main.wrap > .sub{
    margin-bottom:18px;
    font-size:14px;
  }
  .theme-picker{
    margin-bottom:16px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  body{background-attachment:scroll !important}
}

/* 少数工具的功能控件跟随品牌色，但不改变其几何与交互逻辑。 */
body.page-img-crop .handle{
  background:var(--ui-primary) !important;
  box-shadow:0 2px 9px rgba(73,48,32,.28) !important;
}