:root{
  --zw-bg:#f4f0e7;
  --zw-panel:#fffdf8;
  --zw-ink:#171612;
  --zw-muted:#756f63;
  --zw-line:#d8cfbf;
  --zw-gold:#9e722e;
  --zw-gold-soft:#eadcc3;
  --zw-red:#b33b34;
  --zw-green:#2f7c5e;
  --zw-blue:#315e92;
  --zw-purple:#7a4b91;
  --zw-shadow:0 20px 60px rgba(45,37,24,.09);
}

.ziwei-commercial-page{background:radial-gradient(circle at top right,rgba(184,145,73,.12),transparent 30%),var(--zw-bg);color:var(--zw-ink)}
.ziwei-commercial-main{padding-top:88px}
.ziwei-commercial-page .section{max-width:1480px;margin:0 auto;padding-left:28px;padding-right:28px}
.ziwei-nav-meta{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.08em;color:var(--zw-muted)}
.ziwei-nav-mark{width:25px;height:25px;filter:drop-shadow(0 5px 10px rgba(59,38,91,.18))}

.commercial-hero{display:flex;justify-content:space-between;gap:36px;align-items:flex-end;padding-top:72px;padding-bottom:36px}
.commercial-hero h1{font-size:clamp(40px,6vw,86px);line-height:.98;letter-spacing:-.045em;max-width:900px;margin:8px 0 22px;font-weight:650}
.hero-copy{font-size:18px;line-height:1.8;max-width:880px;color:#5f594e;margin:0}
.hero-badges{display:grid;grid-template-columns:repeat(2,max-content);gap:8px;justify-content:end}
.hero-badges span,.coordinate-meta span{border:1px solid var(--zw-line);background:rgba(255,253,248,.72);padding:8px 11px;border-radius:999px;font-size:12px;color:#655f54}

.engine-notice{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--zw-line);border:1px solid var(--zw-line);border-radius:18px;overflow:hidden;margin-bottom:28px;box-shadow:var(--zw-shadow)}
.engine-notice>div{background:var(--zw-panel);padding:18px 20px;display:flex;flex-direction:column;gap:7px}
.engine-notice strong{font-size:13px}
.engine-notice span{font-size:12px;line-height:1.65;color:var(--zw-muted)}

.commercial-workspace{display:grid;grid-template-columns:minmax(360px,470px) minmax(0,1fr);gap:24px;padding-bottom:80px;align-items:start}
.input-panel,.result-panel{border:1px solid var(--zw-line);background:rgba(255,253,248,.95);border-radius:24px;box-shadow:var(--zw-shadow)}
.input-panel{padding:28px;position:sticky;top:94px}
.result-panel{min-height:850px;padding:28px;overflow:hidden}
.panel-heading{margin-bottom:26px}
.panel-heading h2,.result-topbar h2,.section-title-row h3{margin:5px 0 8px;font-size:28px;letter-spacing:-.02em}
.panel-heading p:not(.eyebrow){margin:0;color:var(--zw-muted);font-size:13px;line-height:1.7}

.form-block{border:0;padding:0;margin:0 0 22px}
.form-block>legend,.compact-field>legend{font-size:13px;font-weight:700;margin-bottom:9px}
.field-grid{display:grid;gap:14px;margin-bottom:18px}
.two-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.three-columns{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field>span{font-size:12px;font-weight:700;color:#4f493f}
.field input,.field select{width:100%;min-height:46px;border:1px solid var(--zw-line);border-radius:12px;background:#fff;padding:0 12px;font:inherit;color:var(--zw-ink);outline:none;transition:border-color .18s ease,box-shadow .18s ease}
.field input:focus,.field select:focus{border-color:var(--zw-gold);box-shadow:0 0 0 3px rgba(158,114,46,.12)}
.field input::placeholder{color:#aaa294}
.field small{font-size:11px;color:#8a8275;line-height:1.5}
.field em,.compact-field em{font-style:normal;color:#b03f36;font-size:11px;min-height:0}
.field.has-error input,.field.has-error select{border-color:#c55248}

.commercial-segmented{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.commercial-segmented label{position:relative}
.commercial-segmented input{position:absolute;opacity:0;pointer-events:none}
.commercial-segmented span{display:flex;align-items:center;justify-content:center;min-height:42px;border:1px solid var(--zw-line);border-radius:12px;background:#fff;cursor:pointer;font-size:13px}
.commercial-segmented input:checked+span{border-color:#9c7437;background:#f3e9d7;color:#714e1c;font-weight:700}
.check-row{display:flex;align-items:center;gap:8px;font-size:12px;margin-top:10px}
.region-block,.coordinate-block{padding:18px;border-radius:16px;background:#f8f4ec;border:1px solid #e5dccd}
.region-source{font-size:11px;color:var(--zw-muted);line-height:1.5;margin:0}
.coordinate-meta{display:flex;flex-wrap:wrap;gap:6px}
.coordinate-meta span{background:#fff;padding:5px 8px;font-size:10px}

.commercial-switch{border:1px solid var(--zw-line);border-radius:16px;background:#fff;padding:16px 18px;margin:22px 0;display:flex;align-items:center;justify-content:space-between;gap:18px}
.commercial-switch span{display:flex;flex-direction:column;gap:4px}
.commercial-switch strong{font-size:13px}
.commercial-switch small{font-size:11px;color:var(--zw-muted);line-height:1.55}
.commercial-switch input{appearance:none;width:48px;height:26px;border-radius:999px;background:#cfc8bc;position:relative;flex:none;cursor:pointer;transition:.2s}
.commercial-switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:.2s}
.commercial-switch input:checked{background:var(--zw-gold)}
.commercial-switch input:checked::after{transform:translateX(22px)}
.commercial-privacy{border-radius:16px;background:#201e19;color:#f7f2e9;padding:16px 18px;margin:16px 0}
.commercial-privacy strong{font-size:12px;color:#d8bd8d}
.commercial-privacy p{font-size:11px;line-height:1.65;color:#cfc7ba;margin:7px 0 0}
.commercial-generate{width:100%;min-height:54px;border:0;border-radius:14px;background:#171612;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 20px;font-size:14px;font-weight:700;cursor:pointer}
.commercial-generate:hover{background:#2a2721}
.form-status{min-height:20px;font-size:11px;color:var(--zw-muted);margin:8px 0 0}
.form-status.is-error{color:#b33b34}

.engine-empty{min-height:790px;display:flex;align-items:center;justify-content:center;text-align:center;flex-direction:column;padding:50px;color:var(--zw-muted)}
.engine-mark{display:block;width:100px;height:100px;object-fit:contain;margin-bottom:22px;filter:drop-shadow(0 18px 28px rgba(64,42,94,.18))}
.engine-empty h2{font-size:32px;margin:6px 0 10px;color:var(--zw-ink)}
.engine-empty p:last-child{max-width:520px;line-height:1.8;font-size:13px}

.commercial-result{display:block}
.result-topbar,.section-title-row{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.result-topbar{padding-bottom:20px;border-bottom:1px solid var(--zw-line)}
.engine-version{text-align:right;display:flex;flex-direction:column;gap:3px}
.engine-version span{font-size:9px;letter-spacing:.16em;color:#948c7e}
.engine-version strong{font-size:12px}
.audit-section,.chart-section,.evidence-section{padding-top:24px;margin-top:6px}
.audit-state{font-size:11px;color:var(--zw-green);padding:6px 9px;border-radius:999px;background:#e7f1ec}
.audit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.audit-item{border:1px solid var(--zw-line);border-radius:14px;padding:12px;background:#fff}
.audit-item span{display:block;font-size:10px;color:#91887a;margin-bottom:5px}
.audit-item strong{display:block;font-size:13px;word-break:break-word}
.audit-item small{display:block;font-size:10px;color:#8b8275;margin-top:5px;line-height:1.4}

.fact-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:18px 0;border-bottom:1px solid var(--zw-line)}
.fact-item{padding:10px 8px;text-align:center;border-radius:12px;background:#f7f2e8}
.fact-item span{display:block;font-size:9px;color:#8a8174;margin-bottom:4px}
.fact-item strong{font-size:13px}

.chart-title-row{align-items:flex-end}
.view-tabs{display:flex;border:1px solid var(--zw-line);border-radius:12px;overflow:hidden;background:#fff}
.view-tabs button{min-height:40px;padding:0 16px;border:0;border-right:1px solid var(--zw-line);background:transparent;font-size:12px;cursor:pointer;color:#625c52}
.view-tabs button:last-child{border-right:0}
.view-tabs button[aria-selected="true"]{background:#201e19;color:#fff}
.chart-context-bar{display:flex;justify-content:space-between;gap:14px;font-size:11px;color:var(--zw-muted);padding:12px 2px}
#active-palace-label{font-weight:700;color:#655231}

.traditional-chart{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(190px,auto));border-left:1px solid #817a6f;border-top:1px solid #817a6f;background:#fff;position:relative;min-width:760px}
.palace-cell{border-right:1px solid #817a6f;border-bottom:1px solid #817a6f;padding:10px 10px 8px;position:relative;overflow:hidden;cursor:pointer;transition:background .16s ease,box-shadow .16s ease}
.palace-cell:hover{background:#fffaf1}
.palace-cell.is-active{box-shadow:inset 0 0 0 3px #9d7437;background:#fff9ed;z-index:2}
.palace-cell.is-related{background:#f8f1e3}
.palace-cell.is-opposite{box-shadow:inset 0 0 0 2px #5c7795}
.palace-cell.is-wealth{box-shadow:inset 0 0 0 2px #6f8a69}
.palace-cell.is-career{box-shadow:inset 0 0 0 2px #8b5f8f}
.palace-cell.is-dim{opacity:.35}
.palace-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:7px}
.palace-name{font-size:18px;font-weight:800;letter-spacing:-.03em}
.palace-branch{font-family:serif;font-size:18px;color:#7c6b4b}
.palace-tags{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 7px}
.palace-tag{font-size:9px;border-radius:999px;padding:2px 5px;background:#efe7d9;color:#6a6257}
.palace-tag.body{background:#e4edf5;color:#315e92}
.palace-tag.original{background:#efe5f1;color:#7a4b91}
.star-group{display:flex;flex-wrap:wrap;gap:4px 7px;align-items:baseline}
.star{font-size:11px;white-space:nowrap}
.star.major{font-size:16px;font-weight:750;color:#942d2b}
.star.minor{font-size:12px;color:#315e92}
.star.adjective{color:#6d675c}
.star .brightness{font-size:8px;color:#8a8174;margin-left:2px}
.mutagen{display:inline-grid;place-items:center;margin-left:2px;min-width:16px;height:16px;border-radius:4px;color:#fff;font-size:9px;font-style:normal;vertical-align:2px}
.mutagen.禄{background:var(--zw-green)}
.mutagen.权{background:var(--zw-purple)}
.mutagen.科{background:#3186a2}
.mutagen.忌{background:var(--zw-red)}
.palace-footer{position:absolute;bottom:7px;left:9px;right:9px;display:flex;justify-content:space-between;align-items:end;font-size:9px;color:#6d665b}
.palace-footer strong{font-size:12px;color:#2c2923}
.palace-role{position:absolute;right:8px;top:39px;font-size:9px;padding:2px 5px;border-radius:4px;background:#28241e;color:#fff}
.chart-center{grid-column:2/4;grid-row:2/4;border-right:1px solid #817a6f;border-bottom:1px solid #817a6f;display:flex;align-items:center;justify-content:center;padding:28px;background:linear-gradient(135deg,#fffdf8,#f6efe4);position:relative}
.center-card{text-align:center;max-width:520px}
.center-card .brand-line{font-family:serif;font-size:30px;margin-bottom:12px}
.center-card .meta-line{font-size:12px;line-height:1.8;color:#5f594f}
.center-card .bazi{font-family:serif;font-size:22px;letter-spacing:.14em;color:#7d342f;margin:14px 0 8px}
.center-card .center-note{font-size:10px;color:#938a7c;line-height:1.6}

.transform-panel{border:1px solid var(--zw-line);border-top:0;background:#faf6ee;padding:16px}
.transform-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:12px}
.transform-heading strong{font-size:12px}
.transform-heading span{font-size:10px;color:var(--zw-muted)}
.transform-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.transform-card{background:#fff;border:1px solid var(--zw-line);border-radius:12px;padding:10px}
.transform-card b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:6px;color:#fff;font-size:12px;margin-bottom:8px}
.transform-card b.禄{background:var(--zw-green)}.transform-card b.权{background:var(--zw-purple)}.transform-card b.科{background:#3186a2}.transform-card b.忌{background:var(--zw-red)}
.transform-card strong{display:block;font-size:12px}
.transform-card small{display:block;font-size:10px;color:var(--zw-muted);margin-top:4px;line-height:1.45}

.evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.evidence-card{border:1px solid var(--zw-line);border-radius:14px;background:#fff;padding:14px}
.evidence-card span{font-size:9px;color:#8c8274;text-transform:uppercase;letter-spacing:.08em}
.evidence-card strong{display:block;font-size:13px;margin:6px 0 7px}
.evidence-card p{font-size:11px;line-height:1.6;color:#6d6559;margin:0}
.evidence-note{font-size:10px;line-height:1.7;color:#8b8275;margin:12px 0 0}
.raw-data-panel{margin-top:18px;border-top:1px solid var(--zw-line);padding-top:14px}
.raw-data-panel summary{cursor:pointer;font-size:11px;color:#6f675c}
.raw-data-panel pre{max-height:420px;overflow:auto;border:1px solid var(--zw-line);border-radius:12px;background:#191816;color:#ddd4c6;padding:16px;font-size:10px;line-height:1.5;white-space:pre-wrap;word-break:break-word}

/* Keep native date/time/select popovers readable regardless of OS or browser dark mode. */
.ziwei-commercial-page,
.ziwei-commercial-page .input-panel,
.ziwei-commercial-page #birth-form{
  color-scheme:light!important;
}
.ziwei-commercial-page .input-panel,
.ziwei-commercial-page #birth-form,
.ziwei-commercial-page .field-grid,
.ziwei-commercial-page .field,
.ziwei-commercial-page .compact-field{
  overflow:visible!important;
}
.ziwei-commercial-page .field input[type="date"],
.ziwei-commercial-page .field input[type="time"],
.ziwei-commercial-page .field select{
  position:relative;
  z-index:3;
  color-scheme:light!important;
  background-color:#fff!important;
  color:#171612!important;
  -webkit-text-fill-color:#171612!important;
}
.ziwei-commercial-page .field select option{
  background:#fff!important;
  color:#171612!important;
}
.ziwei-commercial-page input[type="date"]::-webkit-calendar-picker-indicator,
.ziwei-commercial-page input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.78;
  filter:none!important;
  cursor:pointer;
}
.ziwei-commercial-page input[type="date"]::-webkit-datetime-edit,
.ziwei-commercial-page input[type="time"]::-webkit-datetime-edit,
.ziwei-commercial-page input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.ziwei-commercial-page input[type="time"]::-webkit-datetime-edit-fields-wrapper{
  color:#171612!important;
  -webkit-text-fill-color:#171612!important;
}

/* Gender is a segmented choice, not a boxed fieldset. */
.ziwei-commercial-page fieldset.compact-field{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  min-inline-size:0;
  margin:0;
  padding:0;
  background:transparent!important;
}
.ziwei-commercial-page fieldset.compact-field>legend{
  padding:0;
  margin:0 0 9px;
}

@media(max-width:1180px){
  .commercial-workspace{grid-template-columns:1fr}.input-panel{position:static}.result-panel{min-height:0}.engine-empty{min-height:480px}.fact-strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .commercial-hero{align-items:flex-start;flex-direction:column}.hero-badges{justify-content:start}.engine-notice{grid-template-columns:1fr}.audit-grid{grid-template-columns:repeat(2,1fr)}.chart-section{overflow-x:auto}.chart-title-row{align-items:flex-start;flex-direction:column}.chart-context-bar{min-width:760px}.transform-panel{min-width:760px}.evidence-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ziwei-commercial-main{padding-top:72px}.ziwei-commercial-page .section{padding-left:14px;padding-right:14px}.commercial-hero{padding-top:42px}.commercial-hero h1{font-size:44px}.hero-copy{font-size:15px}.hero-badges{grid-template-columns:1fr 1fr}.commercial-workspace{padding-left:10px!important;padding-right:10px!important}.input-panel,.result-panel{border-radius:18px;padding:18px}.two-columns,.three-columns{grid-template-columns:1fr}.fact-strip{grid-template-columns:repeat(2,1fr)}.audit-grid{grid-template-columns:1fr 1fr}.result-topbar{align-items:flex-start}.result-topbar h2{font-size:24px}.view-tabs{width:100%}.view-tabs button{flex:1}.ziwei-nav-meta{display:none}.commercial-switch{align-items:flex-start}.commercial-switch small{max-width:250px}
}