/* 家電計算工具共用 UI：所有既有工具路徑與計算邏輯保持不變。 */
.tool-standard-page {
  --tool-accent: var(--color-brand);
  --tool-accent-soft: color-mix(in srgb, var(--color-brand) 10%, #fff);
  background: linear-gradient(180deg, #f8fafc 0, #fff 420px);
}
.tool-standard-page .tool-standard-container { max-width: 1120px; }
.tool-standard-page .breadcrumb { margin-top: 0; padding-top: 18px; }

.tool-standard-hero {
  position: relative; overflow: hidden; min-height: 184px; margin: 18px 0 28px !important;
  padding: clamp(28px, 5vw, 48px) clamp(24px, 5vw, 56px) !important;
  border: 1px solid var(--color-border); border-radius: 24px;
  background: linear-gradient(135deg, #fff, var(--tool-accent-soft));
  box-shadow: 0 18px 48px rgba(15, 23, 42, .06);
}
.tool-standard-hero::after {
  content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -85px;
  border-radius: 50%; background: color-mix(in srgb, var(--color-brand) 8%, transparent); pointer-events: none;
}
.tool-standard-hero h1 { max-width: 760px; margin: 8px 0 10px !important; font-size: clamp(28px, 4vw, 42px) !important; line-height: 1.18; }
.tool-standard-hero .lead, .tool-standard-hero .section-sub, .tool-standard-hero > p { max-width: 780px; margin: 0; color: var(--color-text-secondary); font-size: 16px; line-height: 1.75; }
.tool-standard-hero .hub-visual { position: absolute; right: 42px; top: 50%; transform: translateY(-50%); background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-card); }
.tool-standard-kicker { display: inline-flex; align-items: center; gap: 9px; color: var(--color-brand); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.tool-standard-kicker .tool-standard-icon { display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: #fff; box-shadow: var(--shadow-card); font-size: 20px; letter-spacing: 0; }

.tool-standard-page .tool-layout,
.tool-standard-page .explorer-layout { grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
.tool-standard-page .tool-standard-form {
  padding: 24px !important; border: 1px solid var(--color-border) !important; border-radius: 18px !important;
  background: #fff !important; box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
}
.tool-standard-page .tool-standard-form h2,
.tool-standard-page .tool-standard-form h3 { margin: 0 0 18px; font-size: 19px; }
.tool-standard-page .tool-standard-form .calc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.tool-standard-page .tool-standard-form .field,
.tool-standard-page .tool-standard-form .filter-block { margin-bottom: 18px; }
.tool-standard-page .tool-standard-form label,
.tool-standard-page .calc-grid label,
.tool-standard-page .filter-bar label { display: grid; gap: 7px; color: var(--color-text-secondary); font-size: 13px; font-weight: 700; line-height: 1.45; }
.tool-standard-page input:not([type="checkbox"]):not([type="radio"]),
.tool-standard-page select,
.tool-standard-page textarea {
  box-sizing: border-box; width: 100%; min-width: 0; height: 46px; padding: 0 13px !important;
  border: 1px solid var(--color-border-strong) !important; border-radius: 10px !important;
  background: #fff; color: var(--color-text-primary); font: inherit; font-size: 15px !important;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.tool-standard-page textarea { min-height: 96px; height: auto; padding-block: 11px !important; }
.tool-standard-page input:focus,
.tool-standard-page select:focus,
.tool-standard-page textarea:focus { outline: 0; border-color: var(--color-brand) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 13%, transparent); }
.tool-standard-page input[type="checkbox"], .tool-standard-page input[type="radio"] { accent-color: var(--color-brand); }
.tool-standard-page .tool-standard-form > .btn,
.tool-standard-page .tool-standard-form form > .btn { min-height: 46px; margin-top: 18px; border-radius: 11px; }
.tool-standard-page .filter-bar { padding: 24px; border: 1px solid var(--color-border); border-radius: 18px; background: #fff; box-shadow: 0 14px 36px rgba(15, 23, 42, .06); }

.tool-standard-page .answer-box,
.tool-standard-page .result-big,
.tool-standard-page .tool-standard-result > .card,
.tool-standard-page .pm-primary-specs .ps {
  border: 1px solid color-mix(in srgb, var(--color-brand) 16%, var(--color-border));
  border-radius: 15px; background: linear-gradient(145deg, #fff, var(--tool-accent-soft));
}
.tool-standard-page .answer-box { padding: 22px 24px; margin-bottom: 18px; }
.tool-standard-page .answer-box h2 { margin: 2px 0 9px; font-size: clamp(22px, 3vw, 30px); }
.tool-standard-page .answer-box p { color: var(--color-text-secondary); line-height: 1.7; }
.tool-standard-page .pm-primary-specs { gap: 10px; }
.tool-standard-page .pm-primary-specs .ps { min-height: 74px; padding: 14px 16px; }
.tool-standard-page .pm-primary-specs .ps .v { margin-top: 4px; color: var(--color-brand); font-size: 18px; }
.tool-standard-page .result-big { padding: 28px; }
.tool-standard-page .result-big .v { font-size: clamp(34px, 5vw, 48px); }

.tool-standard-page .product-grid .task-card,
.tool-standard-page .reading-list a,
.tool-standard-page .product-card { border-radius: 15px; box-shadow: none; transition: transform .16s, border-color .16s, box-shadow .16s; }
.tool-standard-page .product-grid .task-card:hover,
.tool-standard-page .reading-list a:hover,
.tool-standard-page .product-card:hover { transform: translateY(-2px); border-color: var(--color-brand); box-shadow: var(--shadow-card); }

.tool-standard-recommendations { margin: 36px 0 0; padding: clamp(22px, 4vw, 32px); border: 1px solid var(--color-border); border-radius: 20px; background: #fff; box-shadow: 0 16px 42px rgba(15, 23, 42, .06); }
.tool-standard-recommendations[hidden] { display: none; }
.tool-standard-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.tool-standard-section-head h2 { margin: 0 0 5px; font-size: 23px; }
.tool-standard-section-head p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 1.6; }
.tool-standard-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: var(--color-brand-soft); color: var(--color-brand); font-size: 12px; font-weight: 800; }
.tool-product-recommendation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-product-recommendation { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: 15px; background: #fff; color: inherit; }
.tool-product-recommendation:hover { border-color: var(--color-brand); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.tool-product-recommendation .tool-rec-media { display: grid; height: 132px; place-items: center; overflow: hidden; background: var(--color-surface-subtle); font-size: 44px; }
.tool-product-recommendation .tool-rec-media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; background: #fff; }
.tool-product-recommendation .tool-rec-copy { display: flex; flex: 1; flex-direction: column; padding: 14px; }
.tool-product-recommendation strong { overflow-wrap: anywhere; font-size: 15px; line-height: 1.45; }
.tool-product-recommendation small { display: block; margin-top: 7px; color: var(--color-text-secondary); font-size: 12.5px; line-height: 1.55; }
.tool-product-recommendation .tool-rec-go { margin-top: auto; padding-top: 12px; color: var(--color-brand); font-size: 13px; font-weight: 800; }

.tool-standard-reading { margin: 36px 0 84px; }
.tool-standard-reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tool-standard-reading-card { display: flex; min-height: 148px; flex-direction: column; padding: 20px; border: 1px solid var(--color-border); border-radius: 15px; background: #fff; color: inherit; }
.tool-standard-reading-card:hover { border-color: var(--color-brand); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.tool-standard-reading-card .tool-reading-type { color: var(--color-brand); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.tool-standard-reading-card strong { margin-top: 8px; font-size: 16px; line-height: 1.5; }
.tool-standard-reading-card small { margin-top: 7px; color: var(--color-text-secondary); font-size: 12.5px; line-height: 1.55; }
.tool-standard-reading-card .tool-rec-go { margin-top: auto; padding-top: 12px; color: var(--color-brand); font-size: 13px; font-weight: 800; }

.tool-standard-page.tools-standard-hub .two-col,
.tool-standard-page.tools-standard-hub .task-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tool-standard-page.tools-standard-hub .task-card { min-height: 206px; border-radius: 17px; }
.tool-standard-page.tools-standard-hub .task-ic { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 14px; background: var(--color-brand-soft); }

@media (max-width: 900px) {
  .tool-standard-page .tool-layout, .tool-standard-page .explorer-layout { grid-template-columns: 1fr; }
  .tool-product-recommendation-grid, .tool-standard-reading-grid, .tool-standard-page.tools-standard-hub .two-col, .tool-standard-page.tools-standard-hub .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .tool-standard-hero { min-height: 0; padding: 26px 22px !important; border-radius: 18px; }
  .tool-standard-hero .hub-visual { display: none; }
  .tool-standard-page .tool-standard-form .calc-grid { grid-template-columns: 1fr; }
  .tool-product-recommendation-grid, .tool-standard-reading-grid, .tool-standard-page.tools-standard-hub .two-col, .tool-standard-page.tools-standard-hub .task-grid { grid-template-columns: 1fr; }
  .tool-standard-section-head { flex-direction: column; }
  .tool-standard-recommendations { padding: 20px; border-radius: 16px; }
  .tool-product-recommendation { display: grid; grid-template-columns: 92px minmax(0, 1fr); }
  .tool-product-recommendation .tool-rec-media { height: 100%; min-height: 132px; }
}