:root { --blue:#174a73; --blue-dark:#0e3657; --yellow:#f2c230; --background:#f4f6f8; --surface:#fff; --border:#d6dee5; --text:#222; --muted:#66717d; --page-width:1120px; --calculator-width:760px; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; color:var(--text); background:var(--background); font-family:Arial,Helvetica,sans-serif; line-height:1.5; }
img { max-width:100%; height:auto; }
.development-banner { padding:8px; background:#a90000; color:#fff; text-align:center; }
.site-header { background:var(--surface); border-bottom:1px solid var(--border); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; width:min(var(--page-width),calc(100% - 40px)); min-height:90px; margin:0 auto; }
.brand { display:flex; align-items:center; gap:14px; min-width:0; color:var(--blue); text-decoration:none; }
.header-brand-logo-picture { display:block; flex:0 0 64px; }
.header-brand-logo { display:block; width:64px; height:64px; border:1px solid var(--border); border-radius:7px; object-fit:contain; }
.brand-name { min-width:0; color:var(--blue); font-size:21px; font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
.main-nav ul { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:14px 26px; margin:0; padding:0; list-style:none; }
.main-nav a { display:inline-block; padding:8px 0; color:var(--blue); font-size:15px; font-weight:600; text-decoration:none; }
.main-nav a:hover, .main-nav a:focus { color:var(--blue-dark); text-decoration:underline; text-decoration-color:var(--yellow); text-decoration-thickness:3px; text-underline-offset:5px; }
.mobile-nav-toggle { display:none; }
main { padding:22px 20px 72px; }
.page-heading { width:min(780px,100%); margin:0 auto 12px; text-align:center; }
h1 { margin:0 0 12px; color:var(--blue); font-size:clamp(2rem,5vw,2.75rem); line-height:1.1; }
.intro { margin:0; color:var(--muted); font-size:clamp(1rem,2vw,1.0625rem); }
.calculator { width:min(100%,var(--calculator-width)); margin:0 auto; padding:30px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 28px rgba(23,74,115,.08); }
.advertisement { width:min(100%,var(--calculator-width)); min-height:90px; margin:24px auto 0; overflow:hidden; text-align:center; }
.calculator::before { display:block; width:56px; height:4px; margin:-10px auto 25px; background:var(--yellow); border-radius:50px; content:""; }
.unit-selector { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:5px; margin-bottom:30px; background:#e9eef3; border-radius:8px; }
.unit-selector input { position:absolute; opacity:0; pointer-events:none; }
.unit-selector label { display:flex; align-items:center; justify-content:center; min-height:48px; padding:12px 14px; border-radius:6px; color:var(--blue); font-size:14px; font-weight:700; line-height:1.25; text-align:center; cursor:pointer; user-select:none; }
.unit-selector input:checked + label { background:var(--blue); color:#fff; box-shadow:0 2px 6px rgba(23,74,115,.2); }
.unit-selector input:focus-visible + label { outline:3px solid rgba(242,194,48,.65); outline-offset:2px; }
.section-label { margin:0 0 10px; color:var(--blue); font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.dimensions-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.field label { color:var(--blue-dark); font-size:14px; font-weight:700; }
.input-unit { position:relative; min-width:0; }
.input-unit input { width:100%; height:50px; padding:0 76px 0 12px; border:1px solid #b8c5d0; border-radius:6px; background:#fff; color:var(--text); font:inherit; font-size:16px; outline:none; }
.input-unit input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(23,74,115,.12); }
.unit-text { position:absolute; top:50%; right:12px; transform:translateY(-50%); color:#6c7883; font-size:13px; font-weight:600; white-space:nowrap; pointer-events:none; }
.metric-unit { display:none; }
.calculator:has(#metric:checked) .imperial-unit { display:none; }
.calculator:has(#metric:checked) .metric-unit { display:inline; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; }
input[type=number] { appearance:textfield; }
.weight-section { margin-top:28px; padding-top:24px; border-top:1px solid var(--border); }
.weight-field { width:min(100%,260px); }
.calculate-button { width:100%; min-height:52px; margin-top:30px; padding:14px 18px; border:0; border-radius:6px; background:var(--blue); color:#fff; font-size:17px; font-weight:700; line-height:1.2; cursor:pointer; box-shadow:inset 0 -3px 0 rgba(0,0,0,.12); }
.calculate-button:hover { background:var(--blue-dark); }
.calculate-button:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.calculation-results { margin-top:30px; padding-top:24px; border-top:1px solid var(--border); }
.calculation-results h2 { margin:0 0 14px; color:var(--blue); font-size:1.35rem; }
.calculation-results dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; }
.calculation-results dl div { padding:14px; border:1px solid var(--border); border-radius:6px; }
.calculation-results dt { color:var(--muted); font-size:.84rem; font-weight:700; text-transform:uppercase; }
.calculation-results dd { margin:4px 0 0; color:var(--blue-dark); font-size:1.15rem; font-weight:700; }
.result-card { width:min(100%,760px); margin:0 auto; overflow:hidden; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 28px rgba(23,74,115,.08); }
.primary-result { position:relative; padding:28px 30px; background:var(--blue); color:#fff; text-align:center; }
.primary-result::before { position:absolute; top:0; left:0; width:100%; height:5px; background:var(--yellow); content:""; }
.result-label { margin:0 0 6px; color:rgba(255,255,255,.82); font-size:14px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.freight-class-value { margin:0; color:#fff; font-size:clamp(3.4rem,12vw,5.5rem); font-weight:800; line-height:1; }
.class-description { margin:12px 0 0; color:rgba(255,255,255,.88); font-size:15px; }
.density-result { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:16px 30px; background:#f4f8fb; border-bottom:1px solid var(--border); }
.density-title { margin:0; color:var(--blue-dark); font-size:18px; font-weight:700; }
.density-number { flex-shrink:0; color:var(--blue); font-size:clamp(1.45rem,5vw,2rem); font-weight:800; text-align:right; white-space:nowrap; }
.density-number small { color:var(--muted); font-size:13px; font-weight:600; }
.summary-section { padding:20px 30px; }
.summary-heading { margin:0 0 12px; color:var(--blue); font-size:18px; }
.summary-grid { display:grid; grid-template-columns:1fr; gap:6px; }
.summary-item { display:flex; align-items:center; justify-content:space-between; gap:16px; min-width:0; padding:10px 16px; background:#f7f9fa; border:1px solid var(--border); border-radius:7px; }
.summary-item.weight { background:#fff; border-top:3px solid var(--yellow); }
.summary-item-label { color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.summary-item-value { color:var(--blue-dark); font-size:18px; font-weight:700; text-align:right; white-space:nowrap; }
.summary-item-unit { color:var(--muted); font-size:13px; font-weight:600; }
.notice { margin:0 30px 28px; padding:16px 18px; background:#fffbea; border-left:4px solid var(--yellow); border-radius:4px; color:#4c4c40; font-size:14px; }
.notice strong { color:var(--blue-dark); }
.result-actions { display:grid; grid-template-columns:1fr; gap:12px; padding:0 30px 30px; }
.button { display:flex; align-items:center; justify-content:center; min-height:52px; padding:13px 18px; border-radius:6px; font-size:16px; font-weight:700; line-height:1.2; text-align:center; text-decoration:none; }
.button-primary { background:var(--blue); border:2px solid var(--blue); color:#fff; }
.button-primary:hover, .button-primary:focus { background:var(--blue-dark); border-color:var(--blue-dark); }
.button:focus-visible { outline:3px solid var(--yellow); outline-offset:3px; }
.article-page { width:min(780px,100%); margin:0 auto; padding:12px 36px 36px; background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 28px rgba(23,74,115,.08); }
.article-page h1 { font-size:clamp(1.75rem,4vw,2.25rem); }
.article-content { font-size:1.05rem; }
.article-content > :first-child { margin-top:0; }
.article-content > :last-child { margin-bottom:0; }
.article-content p { margin:0 0 1rem; }
.article-content p:empty, .article-content p:has(> br:only-child) { display:none; }
.article-content img { max-width:100%; height:auto; }
.article-content a { color:var(--blue); }
.faq-list { margin:0; padding-left:1.25rem; }
.faq-list li { margin:0 0 .85rem; }
.faq-list a { color:var(--blue); font-weight:700; }
.faq-answer { margin:0 0 2rem; font-size:1.05rem; }
.article-page h2 { margin-top:2rem; color:var(--blue); font-size:1.3rem; }
.site-footer { padding:25px 20px; border-top:4px solid var(--yellow); background:var(--blue-dark); color:#dfe8f0; font-size:14px; }
.site-footer-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; width:min(100%,var(--page-width)); margin:0 auto; }
.site-footer-links { display:flex; gap:18px; }
.site-footer a { color:#dfe8f0; text-decoration:none; }
.site-footer a:hover, .site-footer a:focus { color:#fff; text-decoration:underline; }
.brand-logo-preview { min-height:12rem; display:grid; place-items:center; }
.brand-logo-preview img { max-height:12rem; object-fit:contain; }
.article-content-editor.ql-container { height:16rem; }
.article-content-editor.ql-container .ql-editor { height:100%; min-height:0; overflow-y:auto; font-size:1rem; }
.article-content-editor.ql-container .ql-editor img { max-width:100%; height:auto; }
@media (max-width:900px) { .header-inner { padding:16px 0; flex-direction:column; gap:12px; } .main-nav ul { justify-content:center; } }
@media (max-width:720px) { main { padding:38px 16px 56px; } .calculator { padding:24px 20px; } .dimensions-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dimensions-grid .field:last-child { grid-column:1 / -1; width:50%; } .weight-field { width:50%; } }
@media (max-width:560px) { .header-inner { position:relative; width:min(100% - 24px,var(--page-width)); } .brand { width:100%; justify-content:center; } .header-brand-logo-picture { flex-basis:56px; } .header-brand-logo { width:56px; height:56px; } .brand-name { font-size:17px; } .mobile-nav-toggle { display:flex; position:absolute; right:0; top:23px; width:32px; height:32px; flex-direction:column; justify-content:center; gap:5px; padding:7px; border:1px solid var(--border); border-radius:5px; background:#fff; cursor:pointer; } .mobile-nav-toggle span { display:block; height:2px; background:var(--blue); } .main-nav { display:none; width:100%; } .mobile-nav-open .main-nav { display:block; } .main-nav ul { flex-direction:column; align-items:flex-end; gap:0; padding:6px 44px 0 0; } .main-nav a { padding:6px 0; font-size:14px; } main { padding:12px 12px 48px; } .page-heading { margin-bottom:12px; } .page-heading h1 { font-size:1.65rem; white-space:nowrap; } .calculator { padding:14px 16px 20px; border-radius:10px; } .unit-selector { grid-template-columns:1fr; margin-bottom:18px; } .unit-selector label { min-height:30px; padding:5px 10px; font-size:12px; } .dimensions-grid { grid-template-columns:1fr; gap:10px; } .field { display:grid; grid-template-columns:72px minmax(0,1fr); align-items:center; gap:10px; } .field label { margin:0; } .input-unit input { height:40px; padding-left:10px; } .dimensions-grid .field:last-child, .weight-field { width:100%; grid-column:auto; } .weight-section { margin-top:18px; padding-top:16px; } .calculate-button { min-height:48px; margin-top:22px; } .calculation-results dl, .summary-grid { grid-template-columns:1fr; } .article-page { padding:12px 20px 24px; } .article-page .faq-page-title { font-size:1rem; white-space:nowrap; } .primary-result { padding:30px 18px; } .density-result { padding:20px 18px; gap:12px; } .summary-section { padding:22px 18px; } .summary-item { padding:13px 14px; } .notice { margin:0 18px 22px; } .result-actions { padding:0 18px 22px; } .site-footer-inner { flex-direction:column; align-items:flex-start; gap:10px; } .site-footer-links { align-self:flex-end; } }
@media (max-width:560px) { .brand { justify-content:flex-start; } }
@media (max-width:560px) { .mobile-nav-open .main-nav { position:absolute; top:72px; right:0; z-index:10; width:auto; padding:8px 16px; border:1px solid var(--border); border-radius:6px; background:var(--surface); box-shadow:0 8px 20px rgba(23,74,115,.16); } .mobile-nav-open .main-nav ul { padding:0; } }