#js-tool-container-motorhome-camper-customs { --mhc-body: #3d5a46; --mhc-accent: #c4a35a; --mhc-glass: color-mix(in srgb, var(--bg-primary) 70%, #9ec9ff); } html[data-theme="dark"] #js-tool-container-motorhome-camper-customs { --mhc-body: #7ea48a; --mhc-accent: #e0c57a; --mhc-glass: color-mix(in srgb, var(--bg-secondary) 60%, #3a5f88); } #js-tool-container-motorhome-camper-customs .mhc-app { display:flex; flex-direction:column; gap:14px; } #js-tool-container-motorhome-camper-customs .tb-mz-flow { display:flex; flex-direction:column; gap:14px; } #js-tool-container-motorhome-camper-customs .tb-grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 16px; } #js-tool-container-motorhome-camper-customs .tb-fieldset { border:1px solid var(--border-color); border-radius:var(--radius-md); padding:14px; margin:0; } #js-tool-container-motorhome-camper-customs .tb-legend { padding:0 8px; font-size:0.85rem; color:var(--text-secondary); } #js-tool-container-motorhome-camper-customs .tb-field { display:flex; flex-direction:column; gap:6px; min-width:0; } #js-tool-container-motorhome-camper-customs .tb-hint { font-size:0.8rem; color:var(--text-muted); line-height:1.35; } #js-tool-container-motorhome-camper-customs .mhc-silhouette { position:relative; min-height:110px; padding:16px 14px 12px; border:1px solid var(--border-color); border-radius:var(--radius-md); background: linear-gradient(180deg, color-mix(in srgb, var(--mhc-body) 12%, var(--bg-secondary)), var(--bg-secondary)); overflow:hidden; } #js-tool-container-motorhome-camper-customs .mhc-body { position:relative; height:64px; margin: 8px 8px 18px; border-radius: 14px 18px 8px 8px; background: color-mix(in srgb, var(--mhc-body) 75%, var(--bg-primary)); box-shadow: inset 0 -8px 0 color-mix(in srgb, var(--mhc-body) 40%, #0000); transition: width 0.3s ease, margin 0.3s ease; width: min(100%, 420px); } #js-tool-container-motorhome-camper-customs .mhc-body.is-trailer { width: min(70%, 280px); margin-left: 18%; border-radius: 10px; } #js-tool-container-motorhome-camper-customs .mhc-cabin { position:absolute; left:8px; top:10px; width:70px; height:28px; border-radius:8px; background: var(--mhc-glass); border:1px solid color-mix(in srgb, var(--border-color) 60%, transparent); } #js-tool-container-motorhome-camper-customs .mhc-body.is-trailer .mhc-cabin { display:none; } #js-tool-container-motorhome-camper-customs .mhc-living { position:absolute; right:12px; top:8px; bottom:14px; left:90px; border-radius:8px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--mhc-accent) 35%, transparent) 0 10px, transparent 10px 18px); opacity: 0.9; } #js-tool-container-motorhome-camper-customs .mhc-body.is-trailer .mhc-living { left:12px; } #js-tool-container-motorhome-camper-customs .mhc-wheel { position:absolute; bottom:-12px; width:22px; height:22px; border-radius:50%; background: var(--text-primary); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--bg-primary) 70%, #888); } #js-tool-container-motorhome-camper-customs .mhc-wheel--f { left: 48px; } #js-tool-container-motorhome-camper-customs .mhc-wheel--r { right: 36px; } #js-tool-container-motorhome-camper-customs .mhc-body.is-trailer .mhc-wheel--f { display:none; } #js-tool-container-motorhome-camper-customs .mhc-mass-tag { position:absolute; right:10px; bottom:-6px; font-size:0.75rem; color:var(--text-secondary); background: var(--bg-primary); border:1px solid var(--border-color); border-radius:999px; padding:2px 8px; font-variant-numeric: tabular-nums; } #js-tool-container-motorhome-camper-customs .mhc-code-pill { position:absolute; top:10px; right:12px; font-size:0.75rem; padding:4px 10px; border-radius:999px; border:1px solid var(--border-color); background: var(--bg-primary); color: var(--text-secondary); font-variant-numeric: tabular-nums; } #js-tool-container-motorhome-camper-customs .tb-hero { border:1px solid var(--border-color); border-left:4px solid var(--mhc-body); border-radius:var(--radius-md); background: color-mix(in srgb, var(--mhc-body) 10%, var(--bg-secondary)); padding:18px 20px; display:flex; flex-direction:column; gap:8px; min-height:140px; } #js-tool-container-motorhome-camper-customs .tb-hero-label { font-size:0.9rem; color:var(--text-secondary); } #js-tool-container-motorhome-camper-customs .tb-hero-row { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } #js-tool-container-motorhome-camper-customs .tb-hero-value { font-size:clamp(1.9rem,5vw,2.8rem); font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums; } #js-tool-container-motorhome-camper-customs .tb-unit { color:var(--text-secondary); } #js-tool-container-motorhome-camper-customs .tb-hero-note { margin:0; font-size:0.86rem; color:var(--text-secondary); line-height:1.4; } #js-tool-container-motorhome-camper-customs .tb-hero-chips { display:flex; flex-wrap:wrap; gap:8px; } #js-tool-container-motorhome-camper-customs .tb-chip { display:inline-flex; padding:4px 10px; border-radius:999px; border:1px solid var(--border-color); background:var(--bg-primary); font-size:0.78rem; color:var(--text-secondary); font-variant-numeric:tabular-nums; } #js-tool-container-motorhome-camper-customs .tb-status { padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border-color); background:var(--bg-secondary); font-size:0.88rem; color:var(--text-secondary); line-height:1.4; } #js-tool-container-motorhome-camper-customs .tb-status--warn { background:var(--warning-light); border-color:color-mix(in srgb,var(--warning) 40%, var(--border-color)); color:var(--text-primary); } #js-tool-container-motorhome-camper-customs .tb-status--ok { background:var(--success-light); } #js-tool-container-motorhome-camper-customs .mhc-pay-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } #js-tool-container-motorhome-camper-customs .mhc-pay { border:1px solid var(--border-color); border-radius:var(--radius-sm); background:var(--bg-secondary); padding:10px 12px; display:flex; flex-direction:column; gap:4px; min-width:0; } #js-tool-container-motorhome-camper-customs .mhc-pay span { font-size:0.78rem; color:var(--text-muted); } #js-tool-container-motorhome-camper-customs .mhc-pay strong { font-size:1rem; font-variant-numeric:tabular-nums; color:var(--text-primary); overflow-wrap:anywhere; } #js-tool-container-motorhome-camper-customs .mhc-pay--sum { border-color: color-mix(in srgb, var(--mhc-accent) 50%, var(--border-color)); background: color-mix(in srgb, var(--mhc-accent) 14%, var(--bg-secondary)); } #js-tool-container-motorhome-camper-customs .tb-mz-actions { display:flex; gap:10px; } #js-tool-container-motorhome-camper-customs .tb-btn { appearance:none; border:1px solid var(--accent-primary); background:var(--accent-primary); color:#fff; border-radius:999px; padding:10px 16px; cursor:pointer; font-size:0.9rem; } #js-tool-container-motorhome-camper-customs .tb-table-wrap { overflow-x:auto; border:1px solid var(--border-color); border-radius:var(--radius-md); background:var(--bg-secondary); } #js-tool-container-motorhome-camper-customs .tb-table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; min-width:480px; } #js-tool-container-motorhome-camper-customs .tb-table caption { text-align:left; padding:12px 14px; font-size:0.84rem; color:var(--text-muted); } #js-tool-container-motorhome-camper-customs .tb-table th, #js-tool-container-motorhome-camper-customs .tb-table td { padding:10px 14px; border-top:1px solid var(--border-color); text-align:left; font-size:0.9rem; overflow-wrap:anywhere; } #js-tool-container-motorhome-camper-customs .tb-table thead th { background:color-mix(in srgb,var(--bg-tertiary) 80%, transparent); color:var(--text-secondary); font-weight:600; border-top:0; } #js-tool-container-motorhome-camper-customs .tb-table tbody tr:hover { background:color-mix(in srgb,var(--accent-light) 55%, transparent); } #js-tool-container-motorhome-camper-customs .tb-spec-norm { color:var(--text-muted); font-size:0.84rem; } @media (max-width:720px) { #js-tool-container-motorhome-camper-customs .tb-grid-3, #js-tool-container-motorhome-camper-customs .mhc-pay-grid { grid-template-columns:1fr; } #js-tool-container-motorhome-camper-customs .mhc-app { gap:10px; } }