/* Theme reset stays within this tool. Original component declarations follow. */
#chenfan-crgo-tool :where(section,nav,aside,figure,fieldset) { margin:0; padding:0; }
#chenfan-crgo-tool :where(h1,h2,h3,p,ul,ol,dl,dd) { margin:0; }
#chenfan-crgo-tool :where(h1,h2,h3) { font-family:inherit; color:inherit; text-transform:none; }
#chenfan-crgo-tool h2 { font-size:1.5em; line-height:1.5; font-weight:700; }
#chenfan-crgo-tool :where(button,input,select) { box-shadow:none; text-shadow:none; text-transform:none; letter-spacing:normal; min-height:0; }
#chenfan-crgo-tool {
  /* Surfaces — sampled from chenfanelectric.com */
  --c-header: #141819;
  --c-dark: #191d1e;
  --c-dark-2: #151a1b;
  --c-dark-3: #1f2425;
  --c-cream: #efeae2;
  --c-cream-btn: #eeeae2;
  --c-paper: #f6f3ee;
  --c-field: #fcfbf8;
  --c-table-head: #ebe6de;
  --c-row-hover: #f0ece5;
  --c-preview: #ece7df;

  /* Lines */
  --c-line-dark: #383b3b;
  --c-hair-dark: #323637;
  --c-hair-cream: #cfcbc4;
  --c-hair-cream-2: #dfdad2;

  /* Text */
  --c-ink: #0c1011;
  --c-ink-2: #3a3f3d;
  --c-sage: #646a66;
  --c-sage-light: #979d98;
  --c-text-on-dark: #b1b3ae;
  --c-muted-on-dark: #8a908c;
  --c-cream-text: #f0eee8;
  --c-value-on-dark: #d0cfcb;

  /* Accent — bronze engineering numerals, units, rules */
  --c-bronze: #bda17b;
  --c-bronze-ink: #8f7550;
  --c-bronze-soft: #dccab0;

  /* States */
  --c-success: #86a58f;
  --c-error: #a4433b;
  --c-error-on-dark: #dc9187;
  --c-error-soft: #f7ebe6;
  --c-notice-soft: #f3ede1;

  /* Type — Latin/Cyrillic/Vietnamese first, then CJK, Thai and Arabic system faces */
  --font-sans: "Helvetica Neue", Helvetica, Inter, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC",
    "Sukhumvit Set", Thonburi, "Leelawadee UI", "Noto Sans Thai", "Noto Sans Thai UI", "Geeza Pro", "Segoe UI", "Noto Sans Arabic", "Noto Naskh Arabic", Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  --font-label: var(--font-mono);

  /* Tracking for uppercase labels; set to 0 for scripts without case (see :lang rules) */
  --track-label: .16em;
  --track-title: -.03em;

  /* Layout */
  --header-h: 72px;
  --pad: clamp(16px, 5vw, 72px);
  --maxw: 1580px;
  --panel-pad: 24px;

  color-scheme: light;
}
#chenfan-crgo-tool:lang(ar), #chenfan-crgo-tool:lang(th), #chenfan-crgo-tool:lang(zh) {
  --track-label: 0;
  --track-title: 0;
  --font-label: var(--font-sans);
}
#chenfan-crgo-tool, #chenfan-crgo-tool *, #chenfan-crgo-tool *::before, #chenfan-crgo-tool *::after { box-sizing: border-box; }
#chenfan-crgo-tool { scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
#chenfan-crgo-tool {
  margin: 0;
  min-width: 0;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
#chenfan-crgo-tool h1, #chenfan-crgo-tool h2, #chenfan-crgo-tool h3, #chenfan-crgo-tool p { margin: 0; }
#chenfan-crgo-tool button, #chenfan-crgo-tool input, #chenfan-crgo-tool select, #chenfan-crgo-tool textarea { font: inherit; color: inherit; }
#chenfan-crgo-tool button, #chenfan-crgo-tool select, #chenfan-crgo-tool summary { cursor: pointer; }
#chenfan-crgo-tool button { -webkit-tap-highlight-color: transparent; }
#chenfan-crgo-tool button:disabled, #chenfan-crgo-tool select:disabled { cursor: default; }
#chenfan-crgo-tool a { color: inherit; }
#chenfan-crgo-tool [hidden] { display: none !important; }
#chenfan-crgo-tool :focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
#chenfan-crgo-tool .tool-hero :focus-visible, #chenfan-crgo-tool .results-panel :focus-visible, #chenfan-crgo-tool .mfg-cta :focus-visible { outline-color: var(--c-cream-text); }
#chenfan-crgo-tool .container { width: min(var(--maxw), calc(100% - 2 * var(--pad))); margin-inline: auto; }
#chenfan-crgo-tool .eyebrow { display: flex; align-items: baseline; gap: 12px; font-size: 10.5px; font-weight: 700; letter-spacing: calc(var(--track-label) * 1.25); text-transform: uppercase; color: var(--c-sage); }
#chenfan-crgo-tool .eyebrow-dark { color: var(--c-sage-light); }
#chenfan-crgo-tool[dir="rtl"] .button-arrow { transform: scaleX(-1); }
#chenfan-crgo-tool .tool-hero { background: var(--c-dark); color: var(--c-cream-text); padding: 24px 0 48px; }
#chenfan-crgo-tool .hero-topline { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 30px; }
#chenfan-crgo-tool .breadcrumb ol { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-family: var(--font-label); font-size: 11px; letter-spacing: calc(var(--track-label) * .75); text-transform: uppercase; color: var(--c-muted-on-dark); }
#chenfan-crgo-tool .breadcrumb li + li::before { content: "/"; margin-inline: .75em; color: #5b605e; }
#chenfan-crgo-tool .breadcrumb a { text-decoration: none; }
#chenfan-crgo-tool .breadcrumb a:hover { color: var(--c-cream-text); }
#chenfan-crgo-tool .breadcrumb [aria-current="page"] { color: var(--c-cream-text); }
#chenfan-crgo-tool .hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
#chenfan-crgo-tool .hero-copy .eyebrow { margin-bottom: 16px; }
#chenfan-crgo-tool h1 { font-size: clamp(32px, 2.8vw + 18px, 58px); font-weight: 700; line-height: 1.03; letter-spacing: var(--track-title); color: var(--c-cream-text); overflow-wrap: anywhere; hyphens: auto; }
#chenfan-crgo-tool .h1-line { display: block; }
#chenfan-crgo-tool .h1-muted { color: var(--c-sage-light); }
#chenfan-crgo-tool .hero-lead { max-width: 44em; margin-top: 22px; color: var(--c-text-on-dark); font-size: 15.5px; line-height: 1.6; }
#chenfan-crgo-tool .hero-link { display: flex; align-items: center; gap: 12px; margin-top: 18px; color: var(--c-bronze); font-size: 13px; }
#chenfan-crgo-tool .hero-rule { flex: none; width: 28px; height: 1px; background: var(--c-bronze); }
#chenfan-crgo-tool .how-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-hair-dark); }
#chenfan-crgo-tool .how-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--c-hair-dark); }
#chenfan-crgo-tool .how-num { font-family: var(--font-mono); font-size: 11px; color: var(--c-bronze); padding-top: 2px; }
#chenfan-crgo-tool .how-list .how-title { margin-top: 0; color: var(--c-cream-text); font-size: 14px; font-weight: 700; line-height: 1.4; }
#chenfan-crgo-tool .how-list p { margin-top: 2px; color: var(--c-muted-on-dark); font-size: 13px; line-height: 1.5; }
#chenfan-crgo-tool .calculator-section { padding: 32px 0 72px; outline: none; }
#chenfan-crgo-tool .error-summary { display: flex; gap: 12px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid #dbb7ad; border-inline-start: 3px solid var(--c-error); background: var(--c-error-soft); color: #7d2f28; outline: none; }
#chenfan-crgo-tool .error-icon { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1px solid currentColor; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
#chenfan-crgo-tool .error-summary strong { display: block; font-size: 13px; font-weight: 700; }
#chenfan-crgo-tool .error-summary p { margin-top: 4px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
#chenfan-crgo-tool .panel { min-width: 0; margin: 0; padding: 0; border: 1px solid var(--c-hair-cream); background: var(--c-paper); }
#chenfan-crgo-tool fieldset.panel { display: block; }
#chenfan-crgo-tool .panel-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 18px var(--panel-pad); border-bottom: 1px solid var(--c-hair-cream); }
#chenfan-crgo-tool .panel-heading-text { display: flex; align-items: baseline; gap: 14px; min-width: 0; max-width: 100%; }
#chenfan-crgo-tool .section-number { flex: none; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: var(--c-bronze-ink); }
#chenfan-crgo-tool .panel-heading h3 { font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: calc(var(--track-title) * .3); overflow-wrap: break-word; hyphens: auto; }
#chenfan-crgo-tool .panel-body { padding: 22px var(--panel-pad) 8px; }
#chenfan-crgo-tool .field { min-width: 0; display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
#chenfan-crgo-tool .field label { display: block; align-self: end; margin-bottom: 8px; font-size: 13px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; hyphens: auto; }
#chenfan-crgo-tool .field input, #chenfan-crgo-tool .field select {
  display: block; width: 100%; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid var(--c-hair-cream); border-radius: 0; background: var(--c-field); color: var(--c-ink);
  font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
}
#chenfan-crgo-tool .field select {
  appearance: none; -webkit-appearance: none; padding-inline: 12px 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230c1011' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 10px 6px; text-overflow: ellipsis;
}
#chenfan-crgo-tool[dir="rtl"] .field select { background-position: left 13px center; }
#chenfan-crgo-tool .field select optgroup { font-style: normal; font-weight: 700; color: var(--c-sage); }
#chenfan-crgo-tool .field select option { font-weight: 500; color: var(--c-ink); }
#chenfan-crgo-tool .field input:hover, #chenfan-crgo-tool .field select:hover { border-color: #a9a49a; }
#chenfan-crgo-tool .field input:focus, #chenfan-crgo-tool .field select:focus { outline: none; border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
#chenfan-crgo-tool input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
#chenfan-crgo-tool input[type="number"]::-webkit-outer-spin-button, #chenfan-crgo-tool input[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
#chenfan-crgo-tool input::placeholder, #chenfan-crgo-tool textarea::placeholder { color: #a8a59e; font-weight: 400; }
#chenfan-crgo-tool fieldset:disabled input, #chenfan-crgo-tool fieldset:disabled select { opacity: .55; }
#chenfan-crgo-tool .field-help { margin-top: 7px; color: var(--c-sage); font-family: var(--font-label); font-size: 11px; line-height: 1.55; }
#chenfan-crgo-tool .field-error { margin-top: 6px; color: var(--c-error); font-size: 11.5px; line-height: 1.55; overflow-wrap: anywhere; }
#chenfan-crgo-tool [aria-invalid="true"] { border-color: var(--c-error) !important; background-color: #fbf1ed !important; }
#chenfan-crgo-tool .button { display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 0; line-height: 1.3; }
#chenfan-crgo-tool .button-outline { min-height: 42px; padding: 8px 16px; border: 1px solid var(--c-ink); background: transparent; color: var(--c-ink); font-size: 11.5px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; white-space: nowrap; }
#chenfan-crgo-tool .button-outline:hover:not(:disabled) { background: var(--c-ink); color: var(--c-cream-text); }
#chenfan-crgo-tool .button-outline:disabled { border-color: var(--c-hair-cream); color: #a3a09a; }
#chenfan-crgo-tool .button-dark { min-height: 48px; padding: 10px 18px; border: 1px solid var(--c-ink); background: var(--c-ink); color: var(--c-cream-text); font-size: 12px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
#chenfan-crgo-tool .button-dark:hover:not(:disabled) { background: #262b2c; }
#chenfan-crgo-tool .button-dark:disabled { opacity: .5; }
#chenfan-crgo-tool .results-panel { border-color: var(--c-dark); background: var(--c-dark); color: var(--c-cream-text); }
#chenfan-crgo-tool .results-panel .panel-heading { border-bottom-color: var(--c-hair-dark); }
#chenfan-crgo-tool .results-panel .section-number { color: var(--c-bronze); }
#chenfan-crgo-tool .result-status { display: flex; align-items: flex-start; gap: 10px; padding: 14px var(--panel-pad); border-bottom: 1px solid var(--c-hair-dark); background: var(--c-dark-2); }
#chenfan-crgo-tool .result-status > span { flex: none; width: 6px; height: 6px; margin-top: 7px; background: #5b605e; }
#chenfan-crgo-tool .result-status p { color: var(--c-value-on-dark); font-size: 13px; line-height: 1.5; }
#chenfan-crgo-tool .result-status[data-state="success"] > span { background: var(--c-success); }
#chenfan-crgo-tool .result-status[data-state="success"] p { color: var(--c-cream-text); }
#chenfan-crgo-tool .result-status[data-state="stale"] > span { background: var(--c-bronze); }
#chenfan-crgo-tool .result-status[data-state="stale"] p { color: #dcc7a4; }
#chenfan-crgo-tool .result-status[data-state="error"] > span { background: var(--c-error-on-dark); }
#chenfan-crgo-tool .result-status[data-state="error"] p { color: var(--c-error-on-dark); }
#chenfan-crgo-tool .result-status[data-state="loading"] > span { background: var(--c-bronze); animation: crgo-pulse 1.2s ease-in-out infinite; }
@keyframes crgo-pulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
#chenfan-crgo-tool .button-arrow { flex: none; font-size: 18px; font-weight: 400; letter-spacing: 0; line-height: 1; }
#chenfan-crgo-tool #result-hint { margin-top: 12px; color: var(--c-muted-on-dark); font-size: 12px; line-height: 1.6; }
#chenfan-crgo-tool .mfg-cta { background: var(--c-dark); color: var(--c-cream-text); padding: 64px 0; }
#chenfan-crgo-tool .cta-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
#chenfan-crgo-tool .cta-copy h2 { margin-top: 14px; font-size: clamp(26px, 1.6vw + 16px, 40px); font-weight: 700; line-height: 1.1; letter-spacing: var(--track-title); overflow-wrap: anywhere; hyphens: auto; }
#chenfan-crgo-tool .cta-text { max-width: 36em; margin-top: 16px; color: var(--c-text-on-dark); font-size: 15px; line-height: 1.6; }
#chenfan-crgo-tool .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
#chenfan-crgo-tool .cta-actions .button { min-height: 48px; }
#chenfan-crgo-tool .button-cream { padding: 10px 18px; border: 1px solid var(--c-cream-btn); background: var(--c-cream-btn); color: var(--c-ink); font-size: 12px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
#chenfan-crgo-tool .button-cream:hover:not(:disabled) { background: #fff; border-color: #fff; }
#chenfan-crgo-tool .button-outline-dark { padding: 10px 18px; border: 1px solid var(--c-line-dark); background: transparent; color: var(--c-cream-text); font-size: 12px; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
#chenfan-crgo-tool .button-outline-dark:hover:not(:disabled) { border-color: #6b706e; }
#chenfan-crgo-tool .button-cream:disabled, #chenfan-crgo-tool .button-outline-dark:disabled { opacity: .45; }
#chenfan-crgo-tool .cta-specs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-hair-dark); }
#chenfan-crgo-tool .cta-specs li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--c-hair-dark); color: var(--c-value-on-dark); font-size: 14px; line-height: 1.45; }
#chenfan-crgo-tool .cta-specs li > span { display: flex; align-items: baseline; gap: 12px; }
#chenfan-crgo-tool .cta-specs li > span::before { content: ""; flex: none; width: 5px; height: 5px; margin-bottom: 2px; background: var(--c-bronze); }
#chenfan-crgo-tool .cta-specs b { flex: none; color: var(--c-cream-text); font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
#chenfan-crgo-tool .capability { padding: 56px 0 64px; }
#chenfan-crgo-tool .cap-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 48px; align-items: end; }
#chenfan-crgo-tool .cap-head .eyebrow { grid-column: 1 / -1; }
#chenfan-crgo-tool .cap-head h2 { font-size: clamp(24px, 1.2vw + 16px, 34px); font-weight: 700; line-height: 1.12; letter-spacing: var(--track-title); }
#chenfan-crgo-tool .cap-text { color: var(--c-sage); font-size: 14.5px; line-height: 1.6; }
#chenfan-crgo-tool:lang(th) h1, #chenfan-crgo-tool:lang(ar) h1 { line-height: 1.3; }
#chenfan-crgo-tool:lang(vi) h1 { line-height: 1.15; }
#chenfan-crgo-tool:lang(th) .eyebrow, #chenfan-crgo-tool:lang(ar) .eyebrow, #chenfan-crgo-tool:lang(zh) .eyebrow { font-size: 12px; }
#chenfan-crgo-tool:lang(th) .button-outline, #chenfan-crgo-tool:lang(ar) .button-outline, #chenfan-crgo-tool:lang(zh) .button-outline, #chenfan-crgo-tool:lang(th) .button-cream, #chenfan-crgo-tool:lang(ar) .button-cream, #chenfan-crgo-tool:lang(zh) .button-cream, #chenfan-crgo-tool:lang(th) .button-outline-dark, #chenfan-crgo-tool:lang(ar) .button-outline-dark, #chenfan-crgo-tool:lang(zh) .button-outline-dark, #chenfan-crgo-tool:lang(th) .button-dark, #chenfan-crgo-tool:lang(ar) .button-dark, #chenfan-crgo-tool:lang(zh) .button-dark { font-size: 13.5px; }
#chenfan-crgo-tool:lang(ar) .field label, #chenfan-crgo-tool:lang(ar) .result-status p { font-size: 14px; }
#chenfan-crgo-tool:lang(ar) .breadcrumb ol, #chenfan-crgo-tool:lang(th) .breadcrumb ol, #chenfan-crgo-tool:lang(zh) .breadcrumb ol { font-size: 12px; }
@media (max-width: 1199px) {
#chenfan-crgo-tool { --panel-pad: 20px; }
#chenfan-crgo-tool .results-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#chenfan-crgo-tool .results-panel .panel-heading { grid-column: 1; grid-row: 1; }
#chenfan-crgo-tool .result-status { grid-column: 2; grid-row: 1; align-items: center; border-inline-start: 1px solid var(--c-hair-dark); }
#chenfan-crgo-tool .result-status > span { margin-top: 0; }
#chenfan-crgo-tool #result-hint { grid-column: 1 / -1; margin-top: 4px; }
#chenfan-crgo-tool .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); }
}
@media (max-width: 959px) {
#chenfan-crgo-tool .hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
#chenfan-crgo-tool .cta-grid { grid-template-columns: minmax(0, 1fr); }
#chenfan-crgo-tool .cap-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
#chenfan-crgo-tool { --header-h: 60px; --panel-pad: 18px; }
#chenfan-crgo-tool .tool-hero { padding: 20px 0 36px; }
#chenfan-crgo-tool .hero-topline { padding-bottom: 24px; align-items: flex-start; }
#chenfan-crgo-tool .breadcrumb ol { font-size: 10.5px; }
#chenfan-crgo-tool .hero-lead { font-size: 14.5px; margin-top: 16px; }
#chenfan-crgo-tool .how-list { display: none; }
#chenfan-crgo-tool .calculator-section { padding: 22px 0 48px; }
#chenfan-crgo-tool .panel-heading { flex-wrap: wrap; min-height: 0; padding-top: 16px; padding-bottom: 14px; }
#chenfan-crgo-tool .panel-heading h3 { font-size: 20px; }
#chenfan-crgo-tool .field input, #chenfan-crgo-tool .field select { font-size: 16px; }
#chenfan-crgo-tool .results-panel { display: block; }
#chenfan-crgo-tool .result-status { border-inline-start: 0; align-items: flex-start; }
#chenfan-crgo-tool .result-status > span { margin-top: 7px; }
#chenfan-crgo-tool .mfg-cta { padding: 44px 0; }
#chenfan-crgo-tool .cta-actions .button { width: 100%; justify-content: space-between; }
#chenfan-crgo-tool .capability { padding: 40px 0 48px; }
}
@media (max-width: 479px) {
#chenfan-crgo-tool .hero-topline { flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
#chenfan-crgo-tool, #chenfan-crgo-tool *, #chenfan-crgo-tool *::before, #chenfan-crgo-tool *::after { transition: none !important; scroll-behavior: auto !important; }
#chenfan-crgo-tool .result-status[data-state="loading"] > span { animation: none; opacity: 1; }
}
#chenfan-crgo-tool .crgo-section { padding-top: 32px; }
#chenfan-crgo-tool .crgo-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(300px, .9fr); gap: 24px; align-items: stretch; }
#chenfan-crgo-tool .crgo-panel .panel-body { padding-bottom: 20px; }
#chenfan-crgo-tool .combo-box { position: relative; }
#chenfan-crgo-tool .combo-box input { width: 100%; min-height: 48px; padding-inline: 14px 44px; border: 1px solid var(--c-hair-cream); border-radius: 0; background: var(--c-field); color: var(--c-ink); font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .02em; }
#chenfan-crgo-tool .combo-box input::placeholder { color: #a3a09a; font-weight: 400; letter-spacing: 0; }
#chenfan-crgo-tool .combo-box input:hover { border-color: #a9a49a; }
#chenfan-crgo-tool .combo-box input:focus { outline: none; border-color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-ink); }
#chenfan-crgo-tool .combo-box input[aria-invalid] { border-color: var(--c-error); background: #fbf1ed; }
#chenfan-crgo-tool .combo-toggle { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 100%; padding: 0; border: 0; background: none; color: var(--c-ink); }
#chenfan-crgo-tool .combo-toggle svg { width: 10px; height: 6px; }
#chenfan-crgo-tool .combo-list { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; right: 0; max-height: 300px; margin: 0; padding: 4px 0; overflow-y: auto; list-style: none; border: 1px solid var(--c-ink); background: var(--c-field); box-shadow: 0 10px 24px rgb(12 16 17 / 12%); overscroll-behavior: contain; }
#chenfan-crgo-tool .combo-list [role="option"] { padding: 9px 14px; font-family: var(--font-mono); font-size: 14px; font-weight: 600; cursor: pointer; }
#chenfan-crgo-tool .combo-list [role="option"]:hover, #chenfan-crgo-tool .combo-list [role="option"].is-active { background: var(--c-table-head); }
#chenfan-crgo-tool .combo-list [role="option"][aria-selected="true"] { box-shadow: inset 3px 0 0 var(--c-bronze); }
#chenfan-crgo-tool .combo-empty { padding: 10px 14px; color: var(--c-sage); font-size: 13px; }
#chenfan-crgo-tool .grade-metrics { margin-top: 10px; padding: 8px 10px; border-inline-start: 2px solid var(--c-bronze); background: var(--c-notice-soft); color: var(--c-ink-2); font-size: 12.5px; line-height: 1.5; }
#chenfan-crgo-tool .grade-metrics-line { display: block; }
#chenfan-crgo-tool .grade-metrics-line + .grade-metrics-line { margin-top: 2px; color: var(--c-sage); }
#chenfan-crgo-tool .range-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; }
#chenfan-crgo-tool .range-grid .field { margin-bottom: 0; }
#chenfan-crgo-tool #range-help { margin: 8px 0 0; }
#chenfan-crgo-tool #range-error { margin-bottom: 0; }
#chenfan-crgo-tool .type-field { margin-top: 18px; }
#chenfan-crgo-tool .crgo-view { width: 100%; justify-content: space-between; min-height: 50px; }
#chenfan-crgo-tool .crgo-summary { display: flex; flex-direction: column; }
#chenfan-crgo-tool .summary-list { margin: 0; padding: 6px var(--panel-pad) 12px; }
#chenfan-crgo-tool .summary-list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--c-hair-dark); }
#chenfan-crgo-tool .summary-list dt { color: var(--c-muted-on-dark); font-size: 12.5px; }
#chenfan-crgo-tool .summary-list dd { margin: 0; color: var(--c-cream-text); font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-align: end; }
#chenfan-crgo-tool #sum-grade { font-size: 18px; letter-spacing: .02em; }
#chenfan-crgo-tool #sum-values, #chenfan-crgo-tool #sum-type { font-family: var(--font-sans); font-size: 13px; }
#chenfan-crgo-tool .summary-source { margin-top: auto; padding: 12px var(--panel-pad) 16px; border-top: 1px solid var(--c-hair-dark); color: var(--c-muted-on-dark); font-size: 11.5px; line-height: 1.5; }
#chenfan-crgo-tool .summary-source:empty { display: none; }
#chenfan-crgo-tool .crgo-data { display: grid; grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr); gap: 24px; margin-top: 24px; align-items: start; }
#chenfan-crgo-tool .crgo-empty { padding: 36px 0; color: var(--c-sage); font-size: 14px; line-height: 1.6; text-align: center; }
#chenfan-crgo-tool .crgo-note { margin-top: 12px; color: var(--c-sage); font-size: 12px; line-height: 1.55; }
#chenfan-crgo-tool .crgo-table-body { padding-top: 0; }
#chenfan-crgo-tool .crgo-table-wrap { max-height: 640px; overflow: auto; margin-inline: calc(-1 * var(--panel-pad)); border-bottom: 1px solid var(--c-hair-cream-2); overscroll-behavior: contain; }
#chenfan-crgo-tool .crgo-table-wrap:focus-visible { outline: 2px solid var(--c-ink); outline-offset: -2px; }
#chenfan-crgo-tool .crgo-table { width: 100%; min-width: 300px; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
#chenfan-crgo-tool .crgo-table caption { padding: 14px var(--panel-pad) 10px; color: var(--c-sage); font-size: 12px; text-align: start; }
#chenfan-crgo-tool .crgo-table thead th { position: sticky; top: 0; z-index: 1; padding: 11px 14px; border-top: 1px solid var(--c-hair-cream); border-bottom: 1px solid var(--c-ink); background: var(--c-table-head); color: var(--c-ink); font-size: 12.5px; font-weight: 700; text-align: right; white-space: nowrap; }
#chenfan-crgo-tool .crgo-table thead th:first-child { padding-inline-start: var(--panel-pad); text-align: left; }
#chenfan-crgo-tool .crgo-table thead th:last-child, #chenfan-crgo-tool .crgo-table td:last-child { padding-inline-end: var(--panel-pad); }
#chenfan-crgo-tool .crgo-table tbody th, #chenfan-crgo-tool .crgo-table td { padding: 7px 14px; border-bottom: 1px solid var(--c-hair-cream-2); font-family: var(--font-mono); font-size: 13.5px; text-align: right; white-space: nowrap; }
#chenfan-crgo-tool .crgo-table tbody th { padding-inline-start: var(--panel-pad); color: var(--c-sage); font-weight: 500; text-align: left; }
#chenfan-crgo-tool .crgo-table td { color: var(--c-ink); font-weight: 600; }
#chenfan-crgo-tool .crgo-table td.is-blank { color: #aaa69e; font-weight: 400; }
#chenfan-crgo-tool .crgo-table tbody tr:hover th, #chenfan-crgo-tool .crgo-table tbody tr:hover td { background: var(--c-row-hover); }
#chenfan-crgo-tool .crgo-charts { display: grid; gap: 22px; }
#chenfan-crgo-tool .chart-card { margin: 0; }
#chenfan-crgo-tool .chart-card figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-bottom: 10px; }
#chenfan-crgo-tool .chart-card h3 { font-size: 15.5px; font-weight: 700; letter-spacing: .01em; }
#chenfan-crgo-tool .chart-unit { color: var(--c-sage); font-family: var(--font-mono); font-size: 11.5px; }
#chenfan-crgo-tool .chart-canvas-wrap { position: relative; border: 1px solid var(--c-hair-cream-2); background: #fff; }
#chenfan-crgo-tool .chart-canvas-wrap canvas { display: block; width: 100%; touch-action: pan-y; }
#chenfan-crgo-tool .chart-canvas-wrap canvas:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
#chenfan-crgo-tool .chart-tooltip { position: absolute; z-index: 2; min-width: 150px; max-width: calc(100% - 8px); padding: 9px 11px; border: 1px solid var(--c-ink); background: var(--c-dark); color: var(--c-cream-text); font-size: 12px; line-height: 1.5; pointer-events: none; }
#chenfan-crgo-tool .chart-tooltip div { display: flex; justify-content: space-between; gap: 14px; }
#chenfan-crgo-tool .chart-tooltip span { color: var(--c-muted-on-dark); }
#chenfan-crgo-tool .chart-tooltip b { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
#chenfan-crgo-tool .chart-message { padding: 28px 16px; border: 1px dashed var(--c-hair-cream); }
#chenfan-crgo-tool .crgo-points b { font-family: var(--font-sans); font-size: 14px; font-weight: 600; text-align: end; }
#chenfan-crgo-tool .note-copy { display: grid; gap: 8px; }
#chenfan-crgo-tool .material-note { margin-top: 22px; padding: 12px 16px; border-inline-start: 3px solid var(--c-bronze); background: var(--c-notice-soft); color: var(--c-ink-2); font-size: 13.5px; line-height: 1.6; }
#chenfan-crgo-tool .related-tool { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 28px; padding: 18px 20px; border: 1px solid var(--c-hair-cream); background: var(--c-paper); }
#chenfan-crgo-tool .related-tool p { font-size: 14px; font-weight: 600; }
#chenfan-crgo-tool .related-tool a { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 3px; border-bottom: 1px solid var(--c-bronze); color: var(--c-ink); font-size: 14px; font-weight: 700; text-decoration: none; }
#chenfan-crgo-tool .related-tool a:hover { color: var(--c-bronze-ink); }
#chenfan-crgo-tool .crgo-disclaimer { margin-top: 22px; color: var(--c-sage); font-size: 12px; line-height: 1.6; }
@media (max-width: 1199px) {
#chenfan-crgo-tool .crgo-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#chenfan-crgo-tool .crgo-summary { grid-column: 1 / -1; }
#chenfan-crgo-tool .crgo-data { grid-template-columns: minmax(0, 1fr); }
#chenfan-crgo-tool .crgo-table-wrap { max-height: 520px; }
}
@media (max-width: 767px) {
#chenfan-crgo-tool .crgo-top { grid-template-columns: minmax(0, 1fr); gap: 18px; }
#chenfan-crgo-tool .crgo-data { gap: 18px; margin-top: 18px; }
#chenfan-crgo-tool .crgo-table-wrap { max-height: 440px; }
#chenfan-crgo-tool .crgo-table tbody th, #chenfan-crgo-tool .crgo-table td { padding: 7px 10px; font-size: 13px; }
#chenfan-crgo-tool .related-tool { padding: 16px; }
#chenfan-crgo-tool .chart-card h3 { font-size: 14.5px; }
}
/* Only integration offsets and containment; no replacement site header/footer. */
#chenfan-crgo-tool { --header-h:var(--masthead-h,73px); padding-block-start:var(--masthead-h,73px); isolation:isolate; }
#chenfan-crgo-tool #tool { scroll-margin-block-start:calc(var(--masthead-h,73px) + 16px); }
#chenfan-crgo-tool .container { padding-inline:0; }
#chenfan-crgo-tool .button { white-space:normal; text-align:center; text-decoration:none; }
#chenfan-crgo-tool .cta-specs b { flex:0 1 auto; min-width:0; overflow-wrap:break-word; }
#chenfan-crgo-tool .combo-toggle { right:auto; inset-inline-end:0; }
#chenfan-crgo-tool .chart-tooltip b, #chenfan-crgo-tool .chart-unit,
#chenfan-crgo-tool .crgo-table tbody th, #chenfan-crgo-tool .crgo-table td { direction:ltr; unicode-bidi:isolate; }
#chenfan-crgo-tool .chart-tooltip { text-align:start; }
/* Keep intrinsic canvas dimensions inside the mobile grid; table scrolling stays local. */
#chenfan-crgo-tool .crgo-charts,#chenfan-crgo-tool .chart-card,#chenfan-crgo-tool .chart-canvas-wrap { min-width:0; max-width:100%; }
#chenfan-crgo-tool .chart-canvas-wrap canvas { max-width:100%; }
@media (max-width:767px) { #chenfan-crgo-tool .field select { font-size:16px; } }