/* ========================================================================== */
/* 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 > .breadcrumb{
  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) .breadcrumb{
  display:inline-flex;
  max-width:100%;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
}

body:not(.page-home) .breadcrumb-home{
  color:var(--ui-primary) !important;
  font-weight:700;
}

body:not(.page-home) .breadcrumb-home:hover{
  color:var(--ui-primary-2) !important;
}

body:not(.page-home) .breadcrumb-separator{
  color:var(--ui-border);
}

body:not(.page-home) .breadcrumb-current{
  min-width:0;
  overflow-wrap:anywhere;
}

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;
}