/*!
 * Duty Calculator BD — base styles
 * Extracted from base.html in PR 7. Cached + reused across every page.
 * Generated tokens: PR 2 (slim-fit + ad sizes); component selectors: PR 1–6.
 * Per-page dynamic CSS variables remain in the inline `{% block extracssvars %}` slot.
 */

        :root,
        [data-theme="light"] {
            --bd-bg: #f5f7f5;
            --bd-surface: #ffffff;
            --bd-surface-2: #f9fbf9;
            --bd-surface-offset: #eef2ee;
            --bd-border: #dde4dd;
            --bd-divider: #e6ece6;

            --bd-text: #1a2e1a;
            --bd-text-muted: #5a7060;
            
            /* Darkened from #6e8073 → ~4.5:1 on --bd-bg for WCAG AA small text. */
            --bd-text-faint: #64766a;
            --bd-text-inverse: #ffffff;

            --bd-primary: #01696f;
            --bd-primary-hover: #015a5f;
            --bd-primary-active: #01474b;
            --bd-primary-light: #e0f0f1;
            --bd-primary-mid: #b3d9dc;

            --bd-accent: #2d7a3a;
            --bd-accent-light: #e6f4e8;

            --bd-success: #2d7a3a;
            --bd-warning: #b45309;
            --bd-error: #be185d;
            --bd-info: #0369a1;

            --c-cd: #3d8a38;
            --c-rd: #576351;
            --c-sd: #487A87;
            --c-vat: #1565c0;
            --c-ait: #8E5B42;
            --c-at: #6a1b9a;

            --bd-orange: #F97316;
            --bd-orange-hover: #ea580c;
            --bd-orange-light: #fff7ed;
            --bd-orange-mid: #fed7aa;

            --r-sm: .25rem;
            --r-md: .5rem;
            --r-lg: .75rem;
            --r-xl: .875rem;
            --r-2xl: 1rem;

            --shadow-sm: 0 1px 2px rgba(1,105,111,.06), 0 1px 1px rgba(0,0,0,.03);
            --shadow-md: 0 2px 8px rgba(1,105,111,.08), 0 1px 3px rgba(0,0,0,.04);
            --shadow-lg: 0 8px 24px rgba(1,105,111,.10), 0 3px 6px rgba(0,0,0,.05);
            --shadow-xl: 0 16px 40px rgba(1,105,111,.12), 0 6px 12px rgba(0,0,0,.06);

            --t-fast: 150ms cubic-bezier(.16,1,.3,1);
            --t-base: 220ms cubic-bezier(.16,1,.3,1);
            --t-slow: 350ms cubic-bezier(.16,1,.3,1);

            --nav-h: 60px;
            --nav-h-mobile: 54px;
            --container: 1280px;

            --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
            --font-body: "Inter", system-ui, sans-serif;

            /* ── Slim-fit (PR 2) tokens ───────────────────────────── */
            --bp-sm: 480px;
            --bp-md: 768px;
            --bp-lg: 1024px;
            --bp-xl: 1280px;

            --fs-h1: clamp(1.5rem, 2.6vw, 2.1rem);
            --fs-h2: 1.18rem;
            --fs-h3: .98rem;
            --fs-body: .92rem;
            --fs-small: .82rem;
            --fs-label: .72rem;
            --lh-tight: 1.2;
            --lh-snug: 1.35;
            --lh-normal: 1.55;
            --tracking-label: .08em;

            --space-1: .25rem;
            --space-2: .5rem;
            --space-3: .75rem;
            --space-4: 1rem;
            --space-5: 1.25rem;
            --space-6: 1.5rem;
            --space-8: 2rem;

            --card-pad: 1rem;
            --card-pad-sm: .75rem;
            
            --card-pad-md: 1rem 1.15rem;
            --card-pad-lg: 1.15rem 1.25rem;
            --card-pad-tight: .65rem .85rem;
            --section-gap: .9rem;
            --card-radius: var(--r-lg);
            --input-h: 40px;
            --btn-h: 40px;
            
            --tap-h: 44px;

            --ring-focus: 0 0 0 3px rgba(1,105,111,.18);
            --ring-orange: 0 0 0 3px rgba(249,115,22,.22);

            /* Reserved ad slot heights (used by PR 6) */
            --ad-h-leaderboard: 90px;
            --ad-h-rectangle: 250px;
            --ad-h-sidebar: 600px;
            --ad-h-inarticle: 280px;
            --ad-h-anchor: 50px;
        }

        
        [data-theme="dark"] {
            --bd-bg: #121212;          /* elevation 00 - base canvas */
            --bd-surface: #1c1c1e;     /* elevation 01 - cards / panes */
            --bd-surface-2: #242427;   /* elevation 02 - chips / sub-cards */
            --bd-surface-3: #2a2a2e;   /* elevation 03 - popovers / dropdowns */
            --bd-surface-offset: #1f1f22;
            --bd-border: #34343a;
            --bd-divider: #2a2a2e;
            --bd-border-faint: #232326;

            /* Off-white text (avoid #ffffff per dark-mode best-practice). */
            --bd-text: #e6e6e6;
            --bd-text-muted: #a8a8ad;
            --bd-text-faint: #8a8a90;   /* 4.6:1 on #1c1c1e (PASS) */
            --bd-text-inverse: #121212;

            --bd-primary: #4fa8b0;
            --bd-primary-hover: #3d9199;
            --bd-primary-active: #2d7a82;
            --bd-primary-light: #163438;
            --bd-primary-mid: #2a5558;

            --bd-accent: #5aaa68;
            --bd-accent-light: #1a3020;

            --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
            --shadow-md: 0 2px 8px rgba(0,0,0,.48);
            --shadow-lg: 0 8px 24px rgba(0,0,0,.58);
            --shadow-xl: 0 16px 40px rgba(0,0,0,.66);

            --ring-focus: 0 0 0 3px rgba(79,168,176,.32);
            --ring-orange: 0 0 0 3px rgba(249,115,22,.34);

            /* Soften images and bright media so they don't glow. */
            color-scheme: dark;
        }

        @media (prefers-color-scheme: dark) {
            :root:not([data-theme]) {
                --bd-bg: #121212;
                --bd-surface: #1c1c1e;
                --bd-surface-2: #242427;
                --bd-surface-3: #2a2a2e;
                --bd-surface-offset: #1f1f22;
                --bd-border: #34343a;
                --bd-divider: #2a2a2e;
                --bd-border-faint: #232326;

                --bd-text: #e6e6e6;
                --bd-text-muted: #a8a8ad;
                --bd-text-faint: #8a8a90;
                --bd-text-inverse: #121212;

                --bd-primary: #4fa8b0;
                --bd-primary-hover: #3d9199;
                --bd-primary-active: #2d7a82;
                --bd-primary-light: #163438;
                --bd-primary-mid: #2a5558;

                --bd-accent: #5aaa68;
                --bd-accent-light: #1a3020;

                color-scheme: dark;
            }
        }

        
        [data-theme="dark"] img:not(.img-no-dim):not([src*=".svg"]) {
            filter: brightness(.88) saturate(.92);
        }
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme]) img:not(.img-no-dim):not([src*=".svg"]) {
                filter: brightness(.88) saturate(.92);
            }
        }

        *,
        *::before,
        *::after { box-sizing: border-box; margin: 0; padding: 0; }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: calc(var(--nav-h) + 1rem);
            -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
        }

        body {
            min-height: 100dvh;
            font-family: var(--font-body);
            font-size: 16px;
            line-height: 1.6;
            color: var(--bd-text);
            background: var(--bd-bg);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
        }

        img, svg { display: block; max-width: 100%; }
        input, button, textarea, select { font: inherit; }
        h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.2; color: var(--bd-text); }
        a { color: var(--bd-primary); text-decoration: none; transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast); }
        a:hover { color: var(--bd-primary-hover); }
        ::selection { background: var(--bd-primary-light); color: var(--bd-primary-active); }

        
        :focus-visible {
            outline: 2px solid var(--bd-primary);
            outline-offset: 2px;
            border-radius: var(--r-sm);
        }
        button:focus-visible,
        a:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        summary:focus-visible,
        [role="button"]:focus-visible,
        [tabindex]:focus-visible {
            outline: 2px solid var(--bd-primary);
            outline-offset: 2px;
            box-shadow: var(--ring-focus);
        }
        
        .nav-link[aria-current="page"],
        .drawer-nav-link[aria-current="page"] {
            color: var(--bd-primary);
            background: var(--bd-primary-light);
        }
        .nav-link[aria-current="page"]::after {
            content: "";
            display: block;
            position: absolute;
            inset: auto .55rem -.45rem .55rem;
            height: 2px;
            border-radius: 999px;
            background: var(--bd-orange);
        }
        .nav-link { position: relative; }

        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0,0,0,0);
            white-space: nowrap;
            border: 0;
        }

        .skip-link {
            position: fixed;
            top: -100px;
            left: 1rem;
            z-index: 9999;
            background: var(--bd-primary);
            color: #fff;
            padding: .65rem 1rem;
            border-radius: var(--r-md);
            font-size: .875rem;
            font-weight: 600;
            transition: top var(--t-fast);
        }

        .skip-link:focus { top: 1rem; color: #fff; }

        .site-nav {
            position: sticky;
            top: 0;
            z-index: 1100;
            height: var(--nav-h);
            background: var(--bd-surface);
            border-bottom: 1px solid var(--bd-border);
            transition: box-shadow var(--t-base), background var(--t-base);
        }

        .site-nav.scrolled {
            box-shadow: var(--shadow-md);
            background: color-mix(in srgb, var(--bd-surface) 96%, transparent);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .nav-inner {
            max-width: var(--container);
            height: 100%;
            margin: 0 auto;
            padding: 0 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        .nav-logo {
            display: inline-flex;
            align-items: center;
            gap: .65rem;
            flex-shrink: 0;
            color: var(--bd-text);
        }

        .nav-logo:hover { color: var(--bd-text); }

        .nav-logo-icon {
            width: 38px;
            height: 38px;
            border-radius: var(--r-lg);
            background: var(--bd-primary);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: transform var(--t-fast), background var(--t-fast);
            flex-shrink: 0;
        }

        .nav-logo-icon i {
            font-size: 1.08rem;
            line-height: 1;
        }

        .nav-logo:hover .nav-logo-icon {
            background: var(--bd-primary-hover);
            transform: scale(1.04);
        }

        .nav-logo-text {
            font-family: var(--font-display);
            font-size: 1.08rem;
            font-weight: 800;
            letter-spacing: -.02em;
        }

        
        .nav-logo-text {
            background: linear-gradient(90deg, var(--bd-primary) 0%, var(--bd-accent) 55%, var(--bd-orange) 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .nav-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: .65rem;
        }

        .nav-links {
            list-style: none;
            display: flex;
            align-items: center;
            gap: .25rem;
            margin: 0;
            padding: 0;
        }

        .nav-link {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .45rem .78rem;
            border-radius: var(--r-md);
            font-size: .9rem;
            font-weight: 500;
            color: var(--bd-text-muted);
            white-space: nowrap;
        }

        .nav-link:hover {
            color: var(--bd-primary);
            background: var(--bd-primary-light);
        }

        .nav-link.active {
            color: var(--bd-orange);
            background: var(--bd-orange-light);
            font-weight: 600;
        }

        .nav-link i { font-size: .83rem; }

        .theme-toggle,
        .nav-hamburger,
        .drawer-close {
            border: 1px solid var(--bd-border);
            background: transparent;
            color: var(--bd-text-muted);
            border-radius: var(--r-md);
            transition: all var(--t-fast);
        }

        .theme-toggle {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .theme-toggle:hover {
            border-color: var(--bd-primary);
            color: var(--bd-primary);
            background: var(--bd-primary-light);
        }

        .nav-hamburger {
            display: none;
            width: 40px;
            height: 40px;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .nav-hamburger:hover {
            border-color: var(--bd-primary);
            color: var(--bd-primary);
            background: var(--bd-primary-light);
        }

        .hamburger-bar {
            width: 18px;
            height: 2px;
            border-radius: 2px;
            background: currentColor;
            transition: transform var(--t-base), opacity var(--t-fast);
        }

        .nav-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.42);
            opacity: 0;
            pointer-events: none;
            transition: opacity var(--t-slow);
            z-index: 1190;
        }

        .nav-overlay.open {
            opacity: 1;
            pointer-events: auto;
        }

        .nav-drawer {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: min(300px, 88vw);
            background: var(--bd-surface);
            border-left: 1px solid var(--bd-border);
            box-shadow: var(--shadow-xl);
            transform: translateX(100%);
            transition: transform var(--t-slow);
            z-index: 1200;
            display: flex;
            flex-direction: column;
            padding: 1rem;
        }

        .nav-drawer.open { transform: translateX(0); }

        .drawer-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--bd-border);
            margin-bottom: .75rem;
        }

        .drawer-close {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
        }

        .drawer-close:hover {
            color: var(--bd-error);
            background: #fee2e2;
            border-color: #fecaca;
        }

        .drawer-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .35rem;
            margin: 0;
            padding: 0;
        }

        .drawer-helper {
            margin: 0 0 .65rem;
            color: var(--bd-text-muted);
            font-size: .82rem;
            line-height: 1.45;
        }

        .drawer-nav-link {
            display: flex;
            align-items: center;
            gap: .7rem;
            padding: .8rem .95rem;
            border-radius: var(--r-lg);
            font-size: .96rem;
            font-weight: 500;
            color: var(--bd-text-muted);
        }

        .drawer-nav-link:hover {
            background: var(--bd-primary-light);
            color: var(--bd-primary);
        }

        .drawer-nav-link.active {
            background: var(--bd-orange-light);
            color: var(--bd-orange);
            border-left: 3px solid var(--bd-orange);
        }

        main {
            min-height: calc(100dvh - var(--nav-h) - 140px);
        }

        .site-footer {
            margin-top: 3rem;
            background: var(--bd-surface);
            border-top: 1px solid var(--bd-border);
            padding: 2.5rem 1.25rem 2rem;
        }

        .footer-inner {
            max-width: var(--container);
            margin: 0 auto;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 2rem;
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--bd-divider);
        }

        .footer-brand {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .footer-logo {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            text-decoration: none;
        }

        .footer-logo .nav-logo-text {
            font-size: 1.2rem;
        }

        .footer-about {
            font-size: .84rem;
            color: var(--bd-text-muted);
            line-height: 1.6;
            margin: 0;
            max-width: 90%;
        }

        .footer-about a {
            color: var(--bd-text);
            text-decoration: underline;
            font-weight: 500;
        }

        .footer-about a:hover {
            color: var(--bd-primary);
        }

        .footer-socials {
            display: flex;
            gap: 1rem;
        }

        .footer-socials a {
            color: var(--bd-text-faint);
            font-size: 1.1rem;
            transition: color .2s ease;
        }

        .footer-socials a:hover {
            color: var(--bd-primary);
        }

        .footer-col-title {
            font-size: .72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .08em;
            color: var(--bd-text-muted);
            margin: 0 0 .65rem;
        }

        .footer-links {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: .4rem;
            margin: 0;
            padding: 0;
        }

        .footer-links a {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .25rem 0;
            font-size: .88rem;
            color: var(--bd-text-muted);
            text-decoration: none;
            transition: color .15s ease;
        }

        .footer-links a:hover {
            color: var(--bd-primary);
        }

        .footer-bottom-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-wrap: wrap;
            gap: .5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--bd-divider);
        }

        .footer-copy {
            font-size: .78rem;
            color: var(--bd-text-faint);
            margin: 0;
        }

        @media (max-width: 860px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem;
            }
            .footer-brand {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 560px) {
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 1.25rem;
            }
            .footer-brand {
                grid-column: auto;
            }
            .footer-bottom-bar {
                justify-content: center;
                text-align: center;
            }
        }

        #toastMsg {
            position: fixed;
            left: 50%;
            bottom: 1.5rem;
            transform: translateX(-50%) translateY(1rem);
            background: var(--bd-text);
            color: var(--bd-text-inverse);
            padding: .7rem 1.15rem;
            border-radius: 999px;
            font-size: .88rem;
            font-weight: 500;
            box-shadow: var(--shadow-lg);
            opacity: 0;
            pointer-events: none;
            z-index: 2000;
            transition: opacity var(--t-base), transform var(--t-base);
            max-width: calc(100vw - 2rem);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #toastMsg.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        .breadcrumb-nav {
            display: flex;
            align-items: center;
            gap: .4rem;
            flex-wrap: wrap;
            font-size: .83rem;
            color: var(--bd-text-muted);
            padding: .8rem 0;
        }

        .breadcrumb-nav a { color: var(--bd-text-muted); }
        .breadcrumb-nav a:hover { color: var(--bd-primary); }
        .breadcrumb-nav .bc-sep { color: var(--bd-text-faint); font-size: .72rem; }
        .breadcrumb-nav .bc-current { color: var(--bd-text); font-weight: 600; }

        .btn-primary-bd,
        .btn-secondary-bd,
        .btn-ghost-bd {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            text-decoration: none;
            cursor: pointer;
            transition: all var(--t-fast);
            white-space: nowrap;
        }

        .btn-primary-bd {
            min-height: 44px;
            padding: .68rem 1.2rem;
            border: none;
            border-radius: var(--r-lg);
            background: var(--bd-primary);
            color: #fff;
            font-size: .94rem;
            font-weight: 600;
        }

        .btn-primary-bd:hover {
            color: #fff;
            background: var(--bd-primary-hover);
            transform: translateY(-1px);
            box-shadow: var(--shadow-md);
        }

        .btn-secondary-bd {
            min-height: 42px;
            padding: .58rem 1rem;
            border: 1.5px solid var(--bd-primary-mid);
            border-radius: var(--r-lg);
            background: transparent;
            color: var(--bd-primary);
            font-size: .89rem;
            font-weight: 600;
        }

        .btn-secondary-bd:hover {
            background: var(--bd-primary-light);
            border-color: var(--bd-primary);
            color: var(--bd-primary);
        }

        .btn-ghost-bd {
            min-height: 38px;
            padding: .45rem .88rem;
            border: 1px solid var(--bd-border);
            border-radius: var(--r-md);
            background: transparent;
            color: var(--bd-text-muted);
            font-size: .84rem;
            font-weight: 500;
        }

        .btn-ghost-bd:hover {
            color: var(--bd-primary);
            border-color: var(--bd-primary-mid);
            background: var(--bd-primary-light);
        }

        .card-bd {
            background: var(--bd-surface);
            border: 1px solid var(--bd-border);
            border-radius: var(--r-xl);
            box-shadow: var(--shadow-sm);
        }

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-size: .72rem;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--bd-primary);
            margin-bottom: .55rem;
        }

        .section-label::before {
            content: "";
            width: 16px;
            height: 2px;
            border-radius: 2px;
            background: var(--bd-primary);
        }

        @media (max-width: 768px) {
            .nav-links { display: none; }
            .nav-hamburger { display: inline-flex; }
            .nav-inner { padding: 0 .9rem; }
            .nav-logo-text { font-size: 1rem; }
            .site-footer { padding-inline: .85rem; }
        }

        @media (max-width: 480px) {
            :root { --nav-h: 60px; }
            .nav-logo-icon { width: 34px; height: 34px; }
            .theme-toggle,
            .nav-hamburger { width: 36px; height: 36px; }
            .footer-links { gap: .05rem; }
            #toastMsg {
                width: calc(100vw - 1.5rem);
                border-radius: var(--r-xl);
                white-space: normal;
                text-align: center;
            }
        }

        @media print {
            #mainNav,
            #navDrawer,
            .site-nav,
            .site-footer,
            .nav-overlay,
            .nav-drawer,
            #toastMsg,
            .no-print,
            #backToTop,
            .ad-slot,
            .alibaba-section,
            #alibabaSection,
            .detail-side,
            .mobile-calc-cta,
            #sendResultsModal {
                display: none !important;
            }

            body, html {
                background: #fff !important;
                color: #0f172a !important;
                margin: 0 !important;
                padding: 0 !important;
                width: 100% !important;
                height: auto !important;
                min-height: 0 !important;
                overflow: visible !important;
            }

            #mainContent {
                margin: 0 !important;
                padding: 0 !important;
                display: block !important;
                width: 100% !important;
                overflow: visible !important;
            }

            #calcPrintWrapper {
                display: block !important;
                position: relative !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                padding: 0 !important;
                background: #fff !important;
                box-shadow: none !important;
            }

            @page {
                size: A4 portrait;
                margin: 10mm;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important;
                scroll-behavior: auto !important;
            }
        }

        /* ──────────────────────────────────────────────────────────
           Slim-fit (PR 2) — global density + typography polish.
           Touches only generic selectors so child template <style>
           blocks (which load AFTER this) can still win where they
           define their own rules. No color changes.
           ────────────────────────────────────────────────────────── */
        body {
            font-size: var(--fs-body);
            line-height: var(--lh-normal);
        }

        h1 {
            font-size: var(--fs-h1);
            line-height: var(--lh-tight);
            letter-spacing: -.015em;
            font-weight: 800;
        }

        h2 {
            font-size: var(--fs-h2);
            line-height: var(--lh-snug);
            letter-spacing: -.01em;
            font-weight: 700;
        }

        h3 {
            font-size: var(--fs-h3);
            line-height: var(--lh-snug);
            font-weight: 600;
        }

        small,
        .small {
            font-size: var(--fs-small);
            line-height: var(--lh-snug);
        }

        /* Slim uppercase label utility */
        .label,
        .form-label-slim {
            font-size: var(--fs-label);
            font-weight: 600;
            letter-spacing: var(--tracking-label);
            text-transform: uppercase;
            color: var(--bd-text-muted);
        }

        /* Tabular numerals everywhere a numeric value is rendered */
        .tabnums,
        .num,
        output,
        td.num,
        [data-num] {
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
        }

        /* Crisp brand-color text selection */
        ::selection {
            background: var(--bd-primary);
            color: #fff;
        }

        /* Hairline divider helper (replaces large margin gaps between sections) */
        .hr-thin,
        .divider-hairline {
            height: 1px;
            background: var(--bd-divider);
            border: 0;
            margin: var(--space-4) 0;
        }

        /* Slim focus ring for any focusable element using class .focus-ring */
        .focus-ring:focus-visible {
            outline: none;
            box-shadow: var(--ring-focus);
            border-color: var(--bd-primary);
        }

        /* Mobile: shorter sticky nav */
        @media (max-width: 767.98px) {
            .site-nav { height: var(--nav-h-mobile); }
            html { scroll-padding-top: calc(var(--nav-h-mobile) + .75rem); }
        }

        /* Tap target floor for primary interactive controls on touch devices */
        @media (hover: none) and (pointer: coarse) {
            .nav-link,
            .drawer-nav-link,
            .btn,
            .theme-toggle,
            .nav-hamburger,
            .drawer-close {
                min-height: var(--tap-h);
            }
        }

        /* ────────────────────────────────────────────────────────────
           PR 6: CLS-safe ad slot scaffolding (placeholders only)
           Reserves vertical space so AdSense / Ezoic / direct ads can be
           inserted without layout shift. No live ad code yet — when ready,
           drop <ins class="adsbygoogle"> inside .ad-slot[data-loaded] and
           the IntersectionObserver in this file will take care of the push.
           ──────────────────────────────────────────────────────────── */
        
        .ad-slot {
            position: relative;
            width: 100%;
            min-height: var(--ad-h, 90px);
            margin: .5rem 0;
            background: transparent;
            border: 1px dashed var(--bd-border-faint, var(--bd-border));
            border-radius: var(--r-md, .5rem);
            display: grid;
            place-items: center;
            color: var(--bd-text-faint);
            overflow: hidden;
            isolation: isolate;
            opacity: .65;
        }
        .ad-slot[data-loaded] {
            background: var(--bd-surface-2);
            border-style: solid;
            opacity: 1;
        }
        .ad-slot::before {
            content: 'Advertisement';
            font-size: var(--fs-label, .68rem);
            letter-spacing: .12em;
            text-transform: uppercase;
            font-weight: 500;
            color: var(--bd-text-faint);
            opacity: .55;
        }
        .ad-slot > * {
            position: absolute;
            inset: 0;
            z-index: 1;
        }
        .ad-slot[data-size="leaderboard"] {
            --ad-h: var(--ad-h-leaderboard, 90px);
            max-width: 728px;
            margin-left: auto;
            margin-right: auto;
        }
        .ad-slot[data-size="rectangle"] {
            --ad-h: var(--ad-h-rectangle, 250px);
            max-width: 300px;
        }
        .ad-slot[data-size="sidebar"] {
            --ad-h: var(--ad-h-sidebar, 600px);
            max-width: 300px;
        }
        .ad-slot[data-size="inarticle"] {
            --ad-h: var(--ad-h-inarticle, 280px);
        }
        .ad-slot[data-size="anchor"] {
            --ad-h: var(--ad-h-anchor, 50px);
            position: sticky;
            bottom: 0;
            z-index: 50;
            margin: 0;
            border-radius: 0;
            border-left: 0;
            border-right: 0;
            border-bottom: 0;
        }
        @media print {
            .ad-slot { display: none !important; }
        }
        /* Optional reduced-motion support — placeholder won't pulse */
        @media (prefers-reduced-motion: reduce) {
            .ad-slot { transition: none; }
        }

/* ═══════════════════════════════════════════════════════════════════
   PR 11: UI Polish — Back-to-Top, Nav hover, Toast glassmorphism,
          Entrance animation, Footer social pulse
   ═══════════════════════════════════════════════════════════════════ */

/* ── Back-to-Top Button ─────────────────────────────────────────── */
.back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1050;
    width: 44px;
    height: 44px;
    border: 1px solid var(--bd-border);
    border-radius: 50%;
    background: var(--bd-surface);
    color: var(--bd-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transform: translateY(1rem) scale(.85);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.back-to-top.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.back-to-top:hover {
    background: var(--bd-primary);
    color: #fff;
    border-color: var(--bd-primary);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px) scale(1.06);
}
.back-to-top:active {
    transform: translateY(0) scale(.97);
}
/* Adjust position when sticky mobile CTA is present */
body.has-mobile-calc-cta .back-to-top {
    bottom: 5.5rem;
}
@media (min-width: 769px) {
    body.has-mobile-calc-cta .back-to-top {
        bottom: 2rem;
    }
}

/* ── Glassmorphism Toast (upgraded from flat) ────────────────────── */
#toastMsg {
    background: color-mix(in srgb, var(--bd-surface) 82%, transparent);
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border: 1px solid var(--bd-border);
    color: var(--bd-text);
}
[data-theme="dark"] #toastMsg {
    background: color-mix(in srgb, var(--bd-surface) 75%, transparent);
    border-color: var(--bd-border);
}

/* ── Nav Link Underline Slide-In ─────────────────────────────────── */
.nav-link::after {
    content: "";
    position: absolute;
    inset: auto .55rem -.45rem .55rem;
    height: 2px;
    border-radius: 999px;
    background: var(--bd-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--t-base);
}
.nav-link:hover::after {
    transform: scaleX(1);
}
.nav-link.active::after,
.nav-link[aria-current="page"]::after {
    transform: scaleX(1);
    background: var(--bd-orange);
}

/* ── Footer Social Pulse Hover ───────────────────────────────────── */
.footer-socials a:hover {
    color: var(--bd-primary);
    animation: socialPulse .4s ease;
}
@keyframes socialPulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.25); }
    70%  { transform: scale(.95); }
    100% { transform: scale(1); }
}

/* ── Page Entrance Animation ─────────────────────────────────────── */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
main {
    animation: fadeSlideUp .45s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    main { animation: none; }
    .back-to-top { transition: opacity .15s ease; }
    .footer-socials a:hover { animation: none; }
}

/* ─── PR 19: Branded 404 / 500 pages ─────────────────────────────────────── */
.error-wrap {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px;
}
.error-card {
    max-width: 600px;
    width: 100%;
    text-align: center;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 16px;
    padding: 48px 32px;
    box-shadow: 0 8px 32px rgba(0,0,0,.04);
}
.error-code {
    font-size: 96px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, var(--bd-green, #006a4e) 0%, var(--bd-red, #f42a41) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 16px;
}
.error-title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--color-text, #111827);
}
.error-lead {
    color: var(--color-text-muted, #6b7280);
    line-height: 1.6;
    margin-bottom: 32px;
}
.error-search {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}
.error-search input[type=search] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;
    font-size: 16px;
    background: var(--color-bg, #fff);
    color: var(--color-text, #111827);
}
.error-search input[type=search]:focus {
    outline: 2px solid var(--bd-green, #006a4e);
    outline-offset: 2px;
}
.error-cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.error-cta-row .btn-primary,
.error-cta-row .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.error-cta-row .btn-primary {
    background: var(--bd-green, #006a4e);
    color: #fff;
}
.error-cta-row .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,106,78,.3);
}
.error-cta-row .btn-ghost {
    background: transparent;
    border: 1px solid var(--color-border, #e5e7eb);
    color: var(--color-text, #111827);
}
.error-cta-row .btn-ghost:hover {
    border-color: var(--bd-green, #006a4e);
    color: var(--bd-green, #006a4e);
}
@media (max-width: 480px) {
    .error-code { font-size: 72px; }
    .error-title { font-size: 22px; }
    .error-card { padding: 32px 20px; }
    .error-search { flex-direction: column; }
}

/* ─── PR 19: Visually-hidden helper (a11y) ──────────────────────────────── */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ─── PR 21: Trending search chips ───────────────────────────────────────── */
.trending-chips {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}
.trending-chips-label {
    font-size: .9rem;
    color: rgba(255, 255, 255, .82);
    font-weight: 500;
    margin-right: 4px;
}
.trending-chip {
    appearance: none;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(6px);
    transition: background-color 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.trending-chip:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .42);
    transform: translateY(-1px);
}
.trending-chip:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.trending-chip-emoji {
    font-size: 1rem;
    line-height: 1;
}
[data-theme="light"] .trending-chips-label {
    color: rgba(255, 255, 255, .92);
}
@media (max-width: 480px) {
    .trending-chips { gap: 6px; }
    .trending-chip { padding: 5px 11px; font-size: .85rem; }
}

/* ─── PR 21: HS description + breadcrumb hierarchy under calc input ─────── */
.hs-meta-card {
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--surface-2, #f3f4f6);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--text, #1f2937);
}
.hs-meta-card[hidden] { display: none; }
.hs-meta-desc {
    margin: 0 0 6px;
    overflow: hidden;
    transition: max-height 200ms ease;
}
.hs-meta-desc.collapsed { max-height: 3.4em; }
.hs-meta-desc.expanded { max-height: 60em; }
.hs-meta-toggle {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--brand-primary, #006a4e);
    cursor: pointer;
    font-weight: 600;
    font-size: .85rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.hs-meta-toggle[hidden] { display: none; }
.hs-meta-toggle:hover { text-decoration: underline; }
.hs-meta-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    align-items: center;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border, #e5e7eb);
    font-size: .82rem;
    color: var(--text-muted, #6b7280);
}
.hs-meta-breadcrumb a,
.hs-meta-breadcrumb span.crumb {
    color: inherit;
    text-decoration: none;
}
.hs-meta-breadcrumb a:hover { color: var(--brand-primary, #006a4e); text-decoration: underline; }
.hs-meta-breadcrumb .sep { color: var(--text-muted, #9ca3af); margin: 0 2px; }
.hs-meta-breadcrumb .current { color: var(--text, #1f2937); font-weight: 600; }

/* ─── PR 22: Mode-of-Transport extras inside the Advanced details ──────── */
.fp-mot-extras { margin-top: 12px; }
.fp-mot-section[hidden] { display: none; }
.fp-mot-section + .fp-mot-section { margin-top: 12px; }
.fp-mot-section {
    border-top: 1px dashed var(--border, #e5e7eb);
    padding-top: 12px;
}
.fp-mot-title {
    margin: 0 0 8px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text, #1f2937);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fp-mot-tag {
    background: var(--surface-2, #f3f4f6);
    color: var(--text-muted, #6b7280);
    border-radius: 8px;
    padding: 1px 7px;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.fp-field-row[hidden] { display: none; }

/* ─── PR 23: Print stylesheet — single-page A4 portrait ─────────────────── */
@media print {
    @page {
        size: A4 portrait;
        margin: 12mm;
    }
    html, body {
        background: #fff !important;
        color: #000 !important;
        font-size: 10pt;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    /* Hide chrome, ads, drawer, footer, search, hero CTAs, advanced section, recent calcs. */
    .navbar, .hero-search-wrap, .trending-chips, .ad-slot, .glossary-grid, .faq-accordion,
    .footer, .footer-bottom, .drawer, .drawer-overlay, .back-to-top, .scroll-indicator,
    .fp-advanced, .recent-calcs, .dc-empty, .dc-cta, .dc-help-pop,
    .nav-mobile-toggle, .theme-toggle, .nav-link-cta,
    #masterSearchDropdown, .navbar-mobile-drawer,
    #printPdfBtn, #csvExportBtn, #resetBtn,
    .fp-pane-footer, .dc-tour, .tour-overlay,
    .nav-logo svg, .footer-cta, header[role="banner"] > nav {
        display: none !important;
    }
    /* The single printable region. */
    #printableArea, #printableArea * { visibility: visible; }
    #printableArea {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        box-shadow: none !important;
        background: #fff !important;
    }
    /* Stack the calc pane on top of results, not side-by-side. */
    .fp-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .fp-pane-right {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        page-break-inside: avoid;
        background: #fff !important;
        box-shadow: none !important;
        border: 0 !important;
        padding: 4pt 0 !important;
        margin: 0 !important;
    }
    /* Show .fp-pane-left as compact input context for print */
    .fp-pane-left {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        page-break-inside: avoid;
        background: #f8fafc !important;
        box-shadow: none !important;
        border: 1pt solid #94a3b8 !important;
        padding: 6pt 8pt !important;
        margin: 0 0 6pt !important;
        border-radius: 0 !important;
    }
    /* Hide interactive elements inside .fp-pane-left for print */
    .fp-pane-left .fp-advanced,
    .fp-pane-left .dc-help,
    .fp-pane-left .fp-link-btn,
    .fp-pane-left .fp-hierarchy-helper,
    .fp-pane-left #calcHsDropdown,
    .fp-pane-left .calc-primary-action,
    .fp-pane-left #resetBtn,
    .fp-pane-left #resetBtnTop,
    .fp-pane-left .hs-meta-toggle {
        display: none !important;
    }
    /* Make form inputs look like plain text in print */
    .fp-input {
        border: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
        min-height: auto !important;
        font-weight: 700 !important;
        font-size: 9pt !important;
        color: #0f172a !important;
    }
    .fp-label {
        font-size: 8pt !important;
        color: #475569 !important;
    }
    .fp-field-row {
        margin-bottom: 3pt !important;
    }
    /* Print-friendly typography. */
    h1, h2, h3 { color: #000 !important; margin: 4pt 0 !important; }
    .dc-hero-value, .dc-hero-label, .dc-summary-cell, .dc-summary-value {
        color: #000 !important; background: transparent !important;
    }
    .dc-summary, .dc-hero {
        border: 1pt solid #000 !important;
        background: #fff !important;
        box-shadow: none !important;
        padding: 6pt !important;
    }
    table, .breakdown-table { width: 100%; border-collapse: collapse; }
    th, td { padding: 3pt 4pt !important; border: 0.5pt solid #888 !important; }
    /* Force the breakdown table to never split. */
    #breakdownAccordion, #breakdownTable, .dc-summary { page-break-inside: avoid; }
    /* Print-only header band shown ONLY when body.printing applied. */
    body.printing #printableArea::before {
        content: "Bangladesh Customs Duty Estimate";
        display: block;
        font-size: 14pt;
        font-weight: 700;
        text-align: center;
        border-bottom: 2pt solid #000;
        padding-bottom: 4pt;
        margin-bottom: 6pt;
        letter-spacing: .03em;
    }
    /* Footer rendered by buildPrintFooter() */
    #printFooter {
        margin-top: 8pt;
        padding-top: 6pt;
        border-top: 0.5pt solid #888;
        font-size: 9pt;
    }
    .print-footer-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6pt;
        margin-bottom: 6pt;
    }
    .print-footer-disclaimer {
        font-style: italic;
        color: #444 !important;
        margin: 4pt 0 8pt;
    }
    .print-footer-signature {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24pt;
        margin-top: 16pt;
    }
    .print-footer-signature .sig-line {
        display: inline-block;
        width: 100%;
        border-top: 0.5pt solid #000;
        margin-bottom: 4pt;
    }
}
/* Hide #printFooter on screen — it's only ever shown when printing. */
#printFooter { display: none; }
@media print { #printFooter { display: block !important; } }

/* ─── PR 24: Alibaba affiliate cards ─────────────────────────────────────── */
.alibaba-section {
    max-width: 1100px;
    margin: 24px auto;
    padding: 18px 22px 22px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 14px;
}
.alibaba-section[hidden] { display: none; }
.alibaba-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}
.alibaba-title {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text, #1f2937);
}
.alibaba-disclosure {
    margin: 0;
    font-size: .78rem;
    color: var(--text-muted, #6b7280);
    line-height: 1.4;
}
.alibaba-mode-badge {
    background: #fde68a;
    color: #78350f;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.alibaba-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.alibaba-card {
    background: var(--surface-2, #fafafa);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.alibaba-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    border-color: #f97316;
}
.alibaba-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}
.alibaba-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f3f4f6;
    overflow: hidden;
}
.alibaba-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.alibaba-aff-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: #fde68a;
    color: #78350f;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.alibaba-card-body {
    padding: 8px 10px 10px;
    font-size: .82rem;
}
.alibaba-card-title {
    margin: 0 0 4px;
    font-weight: 600;
    color: var(--text, #1f2937);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    min-height: 2.2em;
}
.alibaba-card-price {
    margin: 0 0 2px;
    font-weight: 700;
    color: #f97316;
    font-size: .9rem;
}
.alibaba-card-meta {
    margin: 0 0 4px;
    font-size: .72rem;
    color: var(--text-muted, #6b7280);
}
.alibaba-card-supplier {
    margin: 0 0 6px;
    font-size: .72rem;
    color: var(--text-muted, #6b7280);
    line-height: 1.3;
}
.alibaba-card-rating {
    color: #f59e0b;
    white-space: nowrap;
}
.alibaba-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--brand-primary, #006a4e);
    font-size: .78rem;
}
.alibaba-card:hover .alibaba-card-cta { color: #f97316; }
@media print {
    .alibaba-section { display: none !important; }
}

/* ─── PR 25: Calculator UI polish pass ───────────────────────────────────── */
/* Goals: more eye-soothing surfaces, refined focus/hover states, smoother
   transitions, slight breathing room. Loaded after index.css in the cascade
   so these selectors win without !important spam. */

/* Pane cards — softer surface, deeper but subtler shadow, smooth hover. */
.fp-pane-left,
.fp-pane-right {
    border-radius: 14px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,.6) 0%, transparent 60%),
        var(--bd-surface) !important;
    border: 1px solid var(--bd-border);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .04),
        0 8px 24px -12px rgba(15, 23, 42, .12) !important;
    transition: box-shadow 240ms ease, transform 240ms ease, border-color 240ms ease;
}
.fp-pane-left:hover,
.fp-pane-right:hover {
    box-shadow:
        0 1px 2px rgba(15, 23, 42, .06),
        0 12px 32px -12px rgba(15, 23, 42, .18) !important;
}
[data-theme="dark"] .fp-pane-left,
[data-theme="dark"] .fp-pane-right {
    background:
        linear-gradient(180deg, rgba(255,255,255,.04) 0%, transparent 60%),
        var(--bd-surface) !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .35),
        0 8px 24px -12px rgba(0, 0, 0, .55) !important;
}

/* Header refinement — primary green accent on the title bar. */
.fp-header {
    border-bottom-color: rgba(0, 106, 78, .12) !important;
    padding-bottom: .45rem !important;
    margin-bottom: .6rem !important;
}
.fp-header h2 {
    font-size: .92rem !important;
    letter-spacing: -.012em !important;
}

/* Inputs — softer borders, refined focus ring with gentle inner shadow. */
.fp-input,
select.fp-input {
    border-radius: 8px !important;
    padding: .38rem .6rem !important;
    min-height: 34px !important;
    font-size: .84rem !important;
    background: var(--bd-bg, #ffffff) !important;
    border-color: rgba(15, 23, 42, .12) !important;
    transition: border-color 160ms ease, box-shadow 200ms ease, background 160ms ease;
}
[data-theme="dark"] .fp-input,
[data-theme="dark"] select.fp-input {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 255, 255, .12) !important;
}
.fp-input:hover {
    border-color: rgba(0, 106, 78, .35) !important;
}
.fp-input:focus,
.fp-input:focus-visible {
    border-color: var(--bd-primary) !important;
    box-shadow:
        0 0 0 4px rgba(0, 106, 78, .14),
        inset 0 1px 2px rgba(15, 23, 42, .04) !important;
}

/* Field rows — tightened vertical rhythm for compact calc layout. */
.fp-field-row {
    margin-bottom: .45rem !important;
    column-gap: .7rem !important;
}
.fp-label {
    font-size: .8rem !important;
    color: var(--bd-text) !important;
    opacity: .82;
    font-weight: 600 !important;
    letter-spacing: -.005em;
}

/* Result hero — gradient, refined hierarchy. */
.dc-summary {
    background: linear-gradient(160deg, rgba(0, 106, 78, .04) 0%, transparent 70%) !important;
    border: 1px solid rgba(0, 106, 78, .14) !important;
    border-radius: 12px !important;
    padding: .85rem .95rem !important;
}
[data-theme="dark"] .dc-summary {
    background: linear-gradient(160deg, rgba(0, 106, 78, .12) 0%, transparent 70%) !important;
    border-color: rgba(0, 106, 78, .35) !important;
}
.dc-hero { padding: 0 !important; }
.dc-hero-label {
    font-size: .68rem !important;
    text-transform: uppercase;
    letter-spacing: .12em !important;
    color: var(--bd-text-muted);
    font-weight: 700 !important;
    display: block;
    margin-bottom: .25rem;
}
.dc-hero-value {
    font-size: clamp(1.85rem, 4.5vw, 2.6rem) !important;
    font-weight: 800 !important;
    color: var(--bd-primary) !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em !important;
    display: block;
}
.dc-hero-sub {
    font-size: .8rem !important;
    color: var(--bd-text-muted) !important;
    margin-top: .25rem;
    display: block;
}

/* Sub-KPI cells — refined spacing, hairline divider. */
.dc-summary-row {
    margin-top: 1rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(0, 106, 78, .12) !important;
    gap: .85rem !important;
}
[data-theme="dark"] .dc-summary-row {
    border-top-color: rgba(255, 255, 255, .06) !important;
}
.dc-summary-cell {
    transition: background 160ms ease, transform 160ms ease;
    border-radius: 8px;
    padding: .35rem .15rem !important;
}
.dc-summary-cell:hover {
    background: rgba(0, 106, 78, .04);
}
.dc-summary-label {
    font-size: .68rem !important;
    text-transform: uppercase;
    letter-spacing: .08em !important;
    color: var(--bd-text-muted) !important;
    font-weight: 600 !important;
}
.dc-summary-value {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: var(--bd-text) !important;
    line-height: 1.2 !important;
    margin-top: .15rem;
}

/* Buttons — refined hover lift. */
.fp-pane-footer button,
.fp-link-btn {
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, border-color 160ms ease !important;
}
.fp-pane-footer button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(0, 106, 78, .35);
}
.fp-pane-footer button:active {
    transform: translateY(0);
}

/* Stepper — soft accent on active step. */
.dc-stepper {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 106, 78, .025) 100%);
}

/* Subtle button-shake animation reused by the print "no calc yet" nudge. */
@keyframes shake-x {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-3px); }
    40%, 80% { transform: translateX(3px); }
}
.shake { animation: shake-x .35s ease both; }

/* Live badge — gentle pulse so it draws the eye without screaming. */
.fp-live-badge {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: 0;
    box-shadow: 0 1px 3px rgba(16, 185, 129, .4);
}
.fp-live-badge::before {
    background: #fff !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, .8);
}

/* Smooth transitions on the whole calculator pane. */
.fp-app-container, .fp-pane-left, .fp-pane-right, .fp-input, .fp-label,
.dc-summary, .dc-summary-cell, .dc-hero-value, .dc-hero-label,
.fp-pane-footer button {
    transition-property: color, background-color, border-color, box-shadow,
                         transform, opacity;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: 200ms;
}

/* ─── PR 26: Reference-style two-card KPI layout ─────────────────────────── */
/* Mirrors the side-by-side "DUTY RATE / COST BREAKDOWN" cards from the
   reference UI. IDs preserved so populateResults() keeps working. */

:root {
    --kpi-surface: #f8fafc;
    --kpi-border: #e2e8f0;
    --kpi-accent: var(--bd-primary, #006a4e);
    --kpi-accent-soft: rgba(0, 106, 78, .08);
    --kpi-accent-hover: rgba(0, 106, 78, .14);
    --kpi-text: #0f172a;
    --kpi-text-muted: #64748b;
}
[data-theme="dark"] {
    --kpi-surface: rgba(255, 255, 255, .03);
    --kpi-border: rgba(255, 255, 255, .08);
    --kpi-accent-soft: rgba(0, 106, 78, .18);
    --kpi-accent-hover: rgba(0, 106, 78, .28);
    --kpi-text: #f1f5f9;
    --kpi-text-muted: #94a3b8;
}

.dc-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 10px;
    margin-bottom: 10px;
}
@media (max-width: 720px) {
    .dc-kpi-grid { grid-template-columns: 1fr; }
}

.dc-kpi-card {
    background: var(--kpi-surface);
    border: 1px solid var(--kpi-border);
    border-radius: 12px;
    padding: 12px 14px 10px;
    display: flex;
    flex-direction: column;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.dc-kpi-card:hover {
    border-color: rgba(0, 106, 78, .25);
    box-shadow: 0 4px 12px -6px rgba(15, 23, 42, .15);
}

.dc-kpi-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--kpi-text-muted);
    display: block;
}

/* Left card — DUTY RATE */
.dc-kpi-card--rate {
    align-items: flex-start;
}
.dc-kpi-rate-wrap {
    display: flex;
    align-items: baseline;
    margin: 12px 0 16px;
    flex: 1;
}
.dc-kpi-rate-num {
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
    font-weight: 700;
    color: var(--kpi-accent);
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.dc-kpi-rate-pct {
    font-size: .55em;
    font-weight: 600;
    color: var(--kpi-accent);
    margin-left: 4px;
    opacity: .85;
}
.dc-kpi-footrow {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--kpi-border);
    padding-top: 8px;
    margin-top: auto;
}
.dc-kpi-foot-label {
    font-size: .78rem;
    font-weight: 500;
    color: var(--kpi-text-muted);
}
.dc-kpi-foot-value {
    font-size: .92rem;
    font-weight: 600;
    color: var(--kpi-text);
    font-variant-numeric: tabular-nums;
}

/* Right card — COST BREAKDOWN */
.dc-kpi-card--cost {
    padding-bottom: 10px;
}
.dc-kpi-cost-list {
    list-style: none;
    margin: 10px 0 8px;
    padding: 0;
    flex: 1;
}
.dc-kpi-cost-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 5px 0;
    font-size: .82rem;
    color: var(--kpi-text);
    border-bottom: 1px dashed transparent;
}
.dc-kpi-cost-row span:first-child {
    color: var(--kpi-text-muted);
    font-weight: 500;
}
.dc-kpi-cost-row strong {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--kpi-text);
}
.dc-kpi-cost-row--mute {
    margin-top: 4px;
    padding-top: 9px;
    border-top: 1px solid var(--kpi-border);
}
.dc-kpi-cost-row--mute span:first-child,
.dc-kpi-cost-row--mute strong {
    color: var(--kpi-accent);
    font-weight: 700;
}

.dc-kpi-footrow--landed {
    border-top: 2px solid var(--kpi-accent);
    padding-top: 8px;
    margin-top: 4px;
}
.dc-kpi-footrow--landed .dc-kpi-foot-label {
    color: var(--kpi-text);
    font-weight: 600;
    font-size: .85rem;
}
.dc-kpi-foot-value-primary {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--kpi-accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.015em;
}
.dc-kpi-foot-sub {
    display: block;
    font-size: .7rem;
    color: var(--kpi-text-muted);
    margin-top: 6px;
    font-weight: 500;
}

/* Pane headers — title left, action button right */
.fp-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid var(--kpi-border) !important;
    padding-bottom: 8px !important;
    margin-bottom: 10px !important;
}
.fp-header h2 {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .92rem !important;
    font-weight: 700 !important;
    letter-spacing: -.018em !important;
    color: var(--kpi-text) !important;
}

/* Outline button system (Reset Form / Open Catalog / Print PDF / CSV) */
.btn-outline,
.fp-pane-footer button.btn-outline,
.dc-summary-actions button.btn-outline,
button.btn-outline {
    background: transparent !important;
    border: 1.5px solid var(--kpi-accent) !important;
    color: var(--kpi-accent) !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    transition: background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    cursor: pointer;
}
.btn-outline:hover,
button.btn-outline:hover {
    background: var(--kpi-accent-soft) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px -4px rgba(0, 106, 78, .25);
}
.btn-outline:disabled,
button.btn-outline:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Filled primary (Send Results / Calculate / sample CTAs) */
.btn-solid,
button.btn-solid {
    background: var(--kpi-accent) !important;
    border: 1.5px solid var(--kpi-accent) !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: .85rem !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    cursor: pointer;
}
.btn-solid:hover {
    background: #00553e !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -6px rgba(0, 106, 78, .45);
}

/* Cost breakdown accordion — re-style as a centered toggle bar like the reference */
.fp-accordion {
    margin-top: 6px !important;
}
.fp-accordion summary {
    list-style: none !important;
    cursor: pointer;
    border: 1px solid var(--kpi-border);
    border-radius: 10px;
    padding: 12px 18px;
    color: var(--kpi-accent);
    font-weight: 600;
    font-size: .88rem;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: background 160ms ease, border-color 160ms ease;
}
.fp-accordion summary::-webkit-details-marker { display: none; }
.fp-accordion summary:hover {
    background: var(--kpi-accent-soft);
    border-color: var(--kpi-accent);
}
.fp-accordion .show-txt { display: inline; }
.fp-accordion .hide-txt { display: none; }
.fp-accordion[open] .show-txt { display: none; }
.fp-accordion[open] .hide-txt { display: inline; }
.fp-accordion[open] summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--kpi-accent-soft);
}
.fp-accordion[open] summary i.bi-chevron-down { transform: rotate(180deg); }
.fp-accordion summary i.bi-chevron-down {
    transition: transform 200ms ease;
}
.fp-accordion .fp-table {
    border: 1px solid var(--kpi-border);
    border-top: 0;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', system-ui, sans-serif;
}
.fp-accordion .fp-table th {
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--kpi-text-muted);
    padding: 12px 18px;
    background: var(--kpi-surface);
    text-align: left;
    border-bottom: 1px solid var(--kpi-border);
}
.fp-accordion .fp-table td {
    padding: 10px 18px;
    font-size: .88rem;
    color: var(--kpi-text);
    border-bottom: 1px solid var(--kpi-border);
    font-variant-numeric: tabular-nums;
}
.fp-accordion .fp-table tr:last-child td { border-bottom: 0; }

/* Action button row inside dc-summary */
.dc-summary-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--kpi-border);
}

/* Hide the old bar/legend block for now — the new KPI cards replace its role */
.dc-bar, .dc-bar-legend { display: none !important; }

/* Body typography — apply Inter universally */
body, .fp-app-container, .fp-pane-left, .fp-pane-right,
.dc-kpi-card, .fp-input, .fp-label, .fp-header h2 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 system-ui, sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Tabular numerals on every currency display so columns align in the breakdown */
.dc-kpi-cost-row strong,
.dc-kpi-foot-value,
.dc-kpi-foot-value-primary,
.dc-kpi-rate-num,
.fp-input[type="number"],
[data-numeric] {
    font-variant-numeric: tabular-nums;
}

/* Header action group — keeps badge + button on one line. */
.fp-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
@media (max-width: 480px) {
    .fp-header-actions { gap: 6px; }
    .fp-header-actions .fp-est-badge { display: none; }
}

/* Small button variants used in pane headers. */
.btn-outline.btn-outline-sm,
.btn-solid.btn-solid-sm {
    padding: 6px 12px !important;
    font-size: .78rem !important;
    border-width: 1px !important;
    border-radius: 7px !important;
}

/* Live badge (estimate badge) — reuse new typography */
.fp-est-badge {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: .7rem !important;
    letter-spacing: .04em;
    font-weight: 600 !important;
}

/* ─── PR 28: Reference-style layout (replaces PR 27, BD-teal preserved) ──── */

/* Pane cards — reference uses generous padding, hairline borders,
   very soft shadow, no inner gradient. */
.fp-pane-left,
.fp-pane-right {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
    padding: 28px 30px !important;
    transition: none !important;
}
.fp-pane-left::before,
.fp-pane-right::before { display: none !important; }
.fp-pane-left:hover,
.fp-pane-right:hover {
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
    transform: none !important;
}
[data-theme="dark"] .fp-pane-left,
[data-theme="dark"] .fp-pane-right {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

/* Pane headers — bigger title, no divider underneath,
   action button right-aligned. */
.fp-header {
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.fp-header h2 {
    font-size: 1.18rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -.02em !important;
    margin: 0 !important;
}
[data-theme="dark"] .fp-header h2 { color: #f1f5f9 !important; }
.fp-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.fp-est-badge { display: none !important; }

/* Field rows — 130px / 1fr, vertical center alignment, generous gap. */
.fp-field-row {
    grid-template-columns: 130px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 16px !important;
    margin-bottom: 16px !important;
}
@media (max-width: 600px) {
    .fp-field-row {
        grid-template-columns: 1fr !important;
        row-gap: 6px !important;
    }
}
.fp-label {
    color: #1f2937 !important;
    font-weight: 500 !important;
    font-size: .9rem !important;
    opacity: 1 !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px;
}
[data-theme="dark"] .fp-label { color: #cbd5e1 !important; }
.fp-label .dc-help i { color: #9ca3af; font-size: .9em; }

/* Inputs — 40px height, 8px radius, slate border. */
.fp-input,
select.fp-input {
    border-radius: 8px !important;
    padding: 9px 12px !important;
    min-height: 40px !important;
    font-size: .92rem !important;
    border: 1px solid #d1d5db !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    line-height: 1.4 !important;
    transition: border-color 120ms ease, box-shadow 120ms ease !important;
}
.fp-input:focus,
select.fp-input:focus {
    border-color: var(--bd-primary, #01696f) !important;
    box-shadow: 0 0 0 3px rgba(1, 105, 111, .15) !important;
    outline: none !important;
}
[data-theme="dark"] .fp-input,
[data-theme="dark"] select.fp-input {
    background: #0f172a !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* HS-meta strip — descriptor card spans the FULL pane width on its own
   row beneath the HS-Code field-row, then "Open Catalog" right-aligned
   below it. Matches the reference image layout. */
.fp-hs-meta {
    display: block !important;
    padding-left: 0 !important;
    margin: 4px 0 18px !important;
    width: 100%;
}
.fp-hs-meta > .fp-hierarchy-box {
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100%;
}
.fp-hs-meta > .fp-link {
    display: block !important;
    text-align: right;
    color: var(--bd-primary, #01696f) !important;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    margin-top: 8px;
}
.fp-hs-meta > .fp-link:hover { text-decoration: underline; }

/* Descriptor card — light blue tint, 10px radius, modest padding. */
.hs-meta-card {
    background: #eff6ff !important;
    border: 1px solid #dbeafe !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    font-size: .9rem !important;
    color: #1e3a8a !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}
[data-theme="dark"] .hs-meta-card {
    background: rgba(59, 130, 246, .08) !important;
    border-color: rgba(59, 130, 246, .2) !important;
    color: #93c5fd !important;
}
.hs-meta-desc { margin: 0 0 4px !important; color: inherit !important; }
.hs-meta-toggle {
    color: #2563eb !important;
    font-size: .85rem !important;
    margin-top: 4px !important;
}
[data-theme="dark"] .hs-meta-toggle { color: #93c5fd !important; }
.hs-meta-breadcrumb {
    border-top: 1px solid #dbeafe !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    color: #1e40af !important;
    font-size: .82rem !important;
}
[data-theme="dark"] .hs-meta-breadcrumb {
    border-top-color: rgba(59, 130, 246, .2) !important;
    color: #93c5fd !important;
}
.hs-meta-breadcrumb a { color: inherit !important; }
.hs-meta-breadcrumb .current { color: #1e3a8a !important; font-weight: 600 !important; }
[data-theme="dark"] .hs-meta-breadcrumb .current { color: #bfdbfe !important; }

/* When the descriptor is just a hint, look like a faint placeholder. */
.fp-hierarchy-box .fp-hint-text {
    display: block;
    background: #eff6ff !important;
    border: 1px dashed #dbeafe !important;
    border-radius: 10px !important;
    padding: 14px 16px !important;
    color: #6b7280 !important;
    font-size: .88rem !important;
    font-style: italic;
}
[data-theme="dark"] .fp-hierarchy-box .fp-hint-text {
    background: rgba(59, 130, 246, .04) !important;
    border-color: rgba(59, 130, 246, .12) !important;
    color: #94a3b8 !important;
}

/* ── KPI grid ─── two balanced cards. */
.dc-kpi-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.5fr !important;
    gap: 16px !important;
    margin-bottom: 0 !important;
}
@media (max-width: 720px) {
    .dc-kpi-grid { grid-template-columns: 1fr !important; }
}
.dc-kpi-card {
    border-radius: 12px !important;
    padding: 18px !important;
    transition: none !important;
    transform: none !important;
    min-width: 0;
}
.dc-kpi-card::before { display: none !important; }
.dc-kpi-card:hover {
    transform: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
}

/* Left card — DUTY RATE (light grey panel). */
.dc-kpi-card--rate {
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
}
[data-theme="dark"] .dc-kpi-card--rate {
    background: rgba(255, 255, 255, .03) !important;
    border-color: rgba(255, 255, 255, .08) !important;
}
.dc-kpi-card--rate .dc-kpi-label,
.dc-kpi-card--cost .dc-kpi-label {
    color: #475569 !important;
    font-size: .72rem !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0;
}
.dc-kpi-rate-wrap {
    margin: 28px 0 8px !important;
}
.dc-kpi-rate-num {
    font-size: clamp(2rem, 5vw, 2.5rem) !important;
    font-weight: 600 !important;
    color: var(--bd-primary, #01696f) !important;
    letter-spacing: -.04em !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    white-space: nowrap !important;
}
.dc-kpi-rate-pct {
    font-size: .42em !important;
    font-weight: 500 !important;
    color: var(--bd-primary, #01696f) !important;
    margin-left: 6px;
    opacity: .8;
}
.dc-kpi-card--rate .dc-kpi-footrow {
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}
[data-theme="dark"] .dc-kpi-card--rate .dc-kpi-footrow {
    border-top-color: rgba(255, 255, 255, .08) !important;
}
.dc-kpi-foot-label {
    color: #475569 !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
}
.dc-kpi-foot-value {
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
}
[data-theme="dark"] .dc-kpi-foot-value { color: #f1f5f9 !important; }

/* Right card — COST BREAKDOWN (white panel). */
.dc-kpi-card--cost {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    display: flex !important;
    flex-direction: column;
    min-height: 200px;
}
[data-theme="dark"] .dc-kpi-card--cost {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, .08) !important;
}
.dc-kpi-cost-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 12px !important;
    flex: 1;
}
.dc-kpi-cost-row {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0 !important;
    font-size: .88rem !important;
    border: 0 !important;
    line-height: 1.4;
}
.dc-kpi-cost-row span:first-child {
    color: #475569 !important;
    font-weight: 400 !important;
    flex: 1;
    min-width: 0;
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
}
[data-theme="dark"] .dc-kpi-cost-row span:first-child { color: #94a3b8 !important; }
.dc-kpi-cost-row strong {
    color: #0f172a !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    white-space: nowrap;
    margin-left: 12px;
}
[data-theme="dark"] .dc-kpi-cost-row strong { color: #f1f5f9 !important; }
.dc-kpi-cost-row--mute { display: none !important; }

.dc-kpi-card--cost .dc-kpi-footrow--landed {
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 16px !important;
    margin-top: 12px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}
[data-theme="dark"] .dc-kpi-card--cost .dc-kpi-footrow--landed {
    border-top-color: rgba(255, 255, 255, .08) !important;
}
.dc-kpi-card--cost .dc-kpi-foot-label {
    color: #0f172a !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}
[data-theme="dark"] .dc-kpi-card--cost .dc-kpi-foot-label { color: #f1f5f9 !important; }
.dc-kpi-foot-value-primary {
    font-size: 1.5rem !important;
    color: var(--bd-primary, #01696f) !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    font-variant-numeric: tabular-nums !important;
}
.dc-kpi-foot-sub { display: none !important; }

/* Buttons — outline / filled, 32px height, 6px radius, brand colour. */
.btn-outline,
button.btn-outline {
    background: #ffffff !important;
    color: var(--bd-primary, #01696f) !important;
    border: 1px solid var(--bd-primary, #01696f) !important;
    padding: 7px 14px !important;
    font-size: .82rem !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    transition: background-color 120ms ease, color 120ms ease !important;
    transform: none !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.btn-outline:hover {
    background: rgba(1, 105, 111, .06) !important;
    transform: none !important;
    box-shadow: none !important;
}
[data-theme="dark"] .btn-outline {
    background: transparent !important;
    color: #4fa8b0 !important;
    border-color: #4fa8b0 !important;
}

.btn-solid,
button.btn-solid {
    background: var(--bd-primary, #01696f) !important;
    color: #ffffff !important;
    border: 1px solid var(--bd-primary, #01696f) !important;
    padding: 7px 14px !important;
    font-size: .82rem !important;
    border-radius: 7px !important;
    font-weight: 600 !important;
    transition: background-color 120ms ease !important;
    transform: none !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.btn-solid:hover {
    background: #014a4f !important;
    transform: none !important;
    box-shadow: none !important;
}

/* "Hide Cost Breakdown" toggle — full-width outline pill above the table. */
.fp-accordion {
    margin-top: 18px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin-bottom: 0 !important;
}
.fp-accordion summary {
    background: #ffffff !important;
    border: 1px solid var(--bd-primary, #01696f) !important;
    border-radius: 8px !important;
    padding: 13px 18px !important;
    color: var(--bd-primary, #01696f) !important;
    font-size: .88rem !important;
    font-weight: 600 !important;
    text-align: center;
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: background-color 120ms ease;
}
.fp-accordion summary::-webkit-details-marker,
.fp-accordion summary::marker { display: none; }
.fp-accordion summary:hover {
    background: rgba(1, 105, 111, .04) !important;
}
.fp-accordion[open] summary {
    border-bottom-color: var(--bd-primary, #01696f) !important;
    border-bottom-left-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}
[data-theme="dark"] .fp-accordion summary {
    background: transparent !important;
    border-color: #4fa8b0 !important;
    color: #4fa8b0 !important;
}

/* Line-items table — clean, no internal borders, generous padding. */
.fp-accordion .fp-table {
    border: 0 !important;
    background: transparent !important;
    margin-top: 16px !important;
    width: 100%;
    border-collapse: collapse;
}
.fp-accordion .fp-table thead { background: transparent !important; }
.fp-accordion .fp-table th {
    background: transparent !important;
    color: #6b7280 !important;
    font-weight: 500 !important;
    font-size: .82rem !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 10px 0 14px !important;
    border-bottom: 1px solid #e5e7eb !important;
    text-align: left;
}
.fp-accordion .fp-table th:nth-child(2) { text-align: right; padding-right: 18px; }
.fp-accordion .fp-table th:last-child { text-align: right; padding-right: 0 !important; }

.fp-accordion .fp-table td {
    padding: 16px 0 !important;
    font-size: .9rem !important;
    border-bottom: 1px solid #f3f4f6 !important;
    color: #0f172a !important;
    background: transparent !important;
    vertical-align: middle;
}
[data-theme="dark"] .fp-accordion .fp-table td { color: #f1f5f9 !important; }
.fp-accordion .fp-table td:nth-child(2) {
    text-align: right;
    padding-right: 18px;
    color: #475569 !important;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.fp-accordion .fp-table td:last-child {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    padding-right: 0 !important;
}
.fp-accordion .fp-table tr:last-child td { border-bottom: 0 !important; }

.fp-accordion .fp-table .hs-link,
.fp-accordion .fp-table a {
    color: #0f172a !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
    font-family: 'Inter', system-ui, sans-serif !important;
    margin-right: 8px;
}
[data-theme="dark"] .fp-accordion .fp-table a { color: #cbd5e1 !important; }
.fp-accordion .fp-table a:hover { color: var(--bd-primary, #01696f) !important; }

/* Levy badge — soft teal pill on the line-items rows. */
.dc-levy-badge {
    display: inline-block;
    background: rgba(1, 105, 111, .1);
    color: var(--bd-primary, #01696f);
    font-size: .73rem;
    font-weight: 500;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: 'Inter', system-ui, sans-serif !important;
    vertical-align: middle;
}
[data-theme="dark"] .dc-levy-badge {
    background: rgba(79, 168, 176, .14);
    color: #4fa8b0;
}

/* Line-1 header row inside the table. */
.fp-accordion .fp-table tr.fp-line-header td {
    padding: 14px 0 10px !important;
    color: #0f172a !important;
    border-bottom: 0 !important;
    font-size: .92rem;
    font-weight: 700;
    background: transparent !important;
}
.fp-accordion .fp-table tr.fp-line-header td:first-child { font-weight: 700; }
.fp-accordion .fp-table tr.fp-line-header td:last-child {
    color: #6b7280 !important;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    padding-right: 0 !important;
}
[data-theme="dark"] .fp-accordion .fp-table tr.fp-line-header td { color: #f1f5f9 !important; }
[data-theme="dark"] .fp-accordion .fp-table tr.fp-line-header td:last-child { color: #94a3b8 !important; }

/* Hide the duty-bar segment chart and the action buttons row. */
.dc-bar { display: none !important; }
.dc-summary-actions {
    margin-top: 18px !important;
    border-top: 0 !important;
    padding: 0 !important;
    justify-content: flex-end !important;
}

/* Recent calculations card — softer surface to match. */
.recent-calcs {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important;
    padding: 20px 24px !important;
}
[data-theme="dark"] .recent-calcs {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

/* Stepper bar — clean baseline, no gradient. */
.dc-stepper {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 0 18px !important;
    margin-bottom: 0 !important;
}

/* ── Print PDF — single A4 portrait page with the new layout. ──────────── */
@media print {
    .dc-kpi-grid {
        display: grid !important;
        grid-template-columns: 1fr 1.5fr !important;
        gap: 8pt !important;
        page-break-inside: avoid !important;
    }
    .dc-kpi-card {
        border: 1pt solid #94a3b8 !important;
        border-radius: 4pt !important;
        padding: 8pt !important;
        background: #fff !important;
        page-break-inside: avoid !important;
        box-shadow: none !important;
        min-height: auto !important;
    }
    .dc-kpi-card--rate { background: #f8fafc !important; }
    .dc-kpi-rate-num,
    .dc-kpi-foot-value-primary { color: #0f172a !important; font-weight: 700 !important; }
    .dc-kpi-rate-pct { color: #0f172a !important; }
    .dc-kpi-cost-list { margin: 4pt 0 !important; }
    .dc-kpi-cost-row { padding: 3pt 0 !important; font-size: 9pt !important; }
    .dc-kpi-cost-row span:first-child,
    .dc-kpi-cost-row strong { color: #0f172a !important; }
    .dc-kpi-footrow,
    .dc-kpi-footrow--landed { padding-top: 5pt !important; }
    .dc-kpi-footrow--landed { border-top: 1pt solid #0f172a !important; }
    .dc-kpi-foot-sub { display: none !important; }
    .dc-kpi-label { font-size: 8pt !important; color: #475569 !important; }

    /* Hide chrome buttons + sections */
    #resetBtnTop, #sendResultsBtn,
    .alibaba-section, #alibabaSection,
    .trending-chips, .fp-header-actions,
    .fp-est-badge, .fp-mot-extras,
    #motHint, #fxRateMeta,
    .fp-hs-meta .fp-link,
    .dc-stepper, .dc-summary-actions,
    .dc-bar,
    .recent-calcs { display: none !important; }

    .hs-meta-card {
        background: #fff !important;
        border: 1pt solid #94a3b8 !important;
        padding: 6pt !important;
        margin: 4pt 0 6pt !important;
        page-break-inside: avoid !important;
        color: #0f172a !important;
    }
    .hs-meta-toggle, .hs-meta-desc.collapsed { display: none !important; }
    .hs-meta-desc { max-height: none !important; color: #0f172a !important; }
    .hs-meta-breadcrumb {
        font-size: 8pt !important;
        color: #475569 !important;
        border-top: 0.5pt solid #94a3b8 !important;
    }
    .hs-meta-breadcrumb .current { color: #0f172a !important; }

    .fp-accordion { page-break-inside: avoid !important; margin-top: 6pt !important; }
    .fp-accordion summary,
    .fp-accordion summary i { display: none !important; }
    .fp-accordion[open] .fp-table,
    .fp-accordion .fp-table {
        display: table !important;
        border: 1pt solid #94a3b8 !important;
        border-radius: 0 !important;
        width: 100% !important;
        margin-top: 4pt !important;
        page-break-inside: avoid !important;
    }
    .fp-accordion .fp-table th,
    .fp-accordion .fp-table td {
        padding: 4pt 6pt !important;
        border-bottom: 0.5pt solid #94a3b8 !important;
        font-size: 9pt !important;
    }
    .fp-accordion .fp-table a {
        color: #0f172a !important;
        text-decoration: none !important;
    }
    .dc-levy-badge {
        background: transparent !important;
        border: 0.5pt solid #94a3b8 !important;
        color: #0f172a !important;
    }

    .fp-field-row {
        margin-bottom: 4pt !important;
        grid-template-columns: 100pt 1fr !important;
    }
    .fp-input, select.fp-input {
        min-height: auto !important;
        padding: 2pt 4pt !important;
        border: 0.5pt solid #94a3b8 !important;
        font-size: 9pt !important;
        box-shadow: none !important;
    }
    .fp-label {
        font-size: 9pt !important;
        color: #0f172a !important;
        font-weight: 600 !important;
    }

    .fp-pane-left, .fp-pane-right {
        padding: 6pt 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .fp-header h2 {
        font-size: 11pt !important;
        font-weight: 700 !important;
    }
    .fp-hs-meta { padding-left: 0 !important; }

    
    .dc-modal { display: none !important; }
}

/* ============================================================================
 * PR 29 — overflow fix + clickable line-item rows + Send Results modal.
 * Layered on top of PR 27/28 to (a) stop the COST BREAKDOWN card from
 * busting out of its grid track on long currency labels, (b) make the
 * line-items table feel interactive (hover, focus ring, native tooltip),
 * and (c) host the new email modal with reCAPTCHA.
 * ========================================================================= */

/* Overflow guard.  Without `min-width:0` a CSS Grid track will *grow* to fit
 * its longest unbreakable child — which is exactly what was happening with
 * "Total Duties & Taxes ৳ 1,278,874.00" pushing past the right grid line. */
.dc-summary .dc-kpi-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important;
}
.dc-summary .dc-kpi-card {
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
.dc-summary .dc-kpi-cost-row {
    gap: 12px !important;
    flex-wrap: nowrap !important;
}
.dc-summary .dc-kpi-cost-row span:first-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.dc-summary .dc-kpi-cost-row strong {
    flex-shrink: 0 !important;
}
.dc-summary .dc-kpi-card--cost .dc-kpi-foot-value-primary {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
@media (max-width: 900px) {
    .dc-summary .dc-kpi-grid {
        grid-template-columns: 1fr !important;
    }
    .dc-summary .dc-kpi-foot-value-primary {
        font-size: 1.3rem !important;
    }
}

/* Clickable line-item rows.  Whole-row interaction matches the Flexport
 * reference: hover tints the background, the cursor is a pointer, and the
 * native browser `title` tooltip explains where the levy comes from
 * (CD = rate × AV, VAT = rate × VP, …).  Keyboard focus parity preserved
 * via tabindex + focus-visible ring. */
.fp-line-row {
    cursor: pointer;
    transition: background-color .15s ease;
}
.fp-line-row:hover {
    background: rgba(1, 105, 111, 0.05);
}
[data-theme="dark"] .fp-line-row:hover {
    background: rgba(1, 105, 111, 0.18);
}
.fp-line-row:focus-visible {
    outline: 2px solid var(--bd-primary, #01696f);
    outline-offset: -2px;
}
/* The HS-code anchor inside the row keeps its own click target, so we mark
 * it with `data-no-row-click` and let it stop propagation in the JS — but
 * we also visually distinguish it from the rest of the row so users know
 * it's a separate hit area. */
.fp-line-row .hs-link {
    position: relative;
    z-index: 1;
}

/* ---------- Send Results modal --------------------------------------- */
body.dc-modal-open {
    overflow: hidden;
}
.dc-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: dcModalFadeIn 0.18s ease-out;
}
.dc-modal[hidden] {
    display: none !important;
}
@keyframes dcModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.dc-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.dc-modal-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.12);
    padding: 28px 28px 24px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    animation: dcModalSlideIn 0.22s ease-out;
}
@keyframes dcModalSlideIn {
    from { transform: translateY(8px); opacity: 0.6; }
    to   { transform: translateY(0);   opacity: 1; }
}
[data-theme="dark"] .dc-modal-card {
    background: #0f172a;
    color: #e2e8f0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.dc-modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: 0;
    font-size: 26px;
    line-height: 1;
    color: #64748b;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color .15s ease, color .15s ease;
}
.dc-modal-close:hover {
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
}
[data-theme="dark"] .dc-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}
.dc-modal-title {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.01em;
}
[data-theme="dark"] .dc-modal-title {
    color: #f1f5f9;
}
.dc-modal-lede {
    margin: 0 0 18px;
    color: #64748b;
    font-size: 0.93rem;
    line-height: 1.5;
}
.dc-modal-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.dc-modal-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: -2px;
    letter-spacing: 0.01em;
}
[data-theme="dark"] .dc-modal-label { color: #94a3b8; }
.dc-modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f172a;
    font-size: 0.95rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.dc-modal-input:focus {
    outline: none;
    border-color: var(--bd-primary, #01696f);
    box-shadow: 0 0 0 3px rgba(1, 105, 111, 0.16);
}
[data-theme="dark"] .dc-modal-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.18);
    color: #f1f5f9;
}
.dc-modal-err {
    color: #dc2626;
    font-size: 0.82rem;
    margin: -4px 0 0;
}
.dc-modal-recaptcha {
    margin: 6px 0;
    min-height: 78px;
}
.dc-modal-fineprint {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.5;
    margin: 4px 0 0;
}
.dc-modal-fineprint a {
    color: var(--bd-primary, #01696f);
    text-decoration: underline;
}
[data-theme="dark"] .dc-modal-fineprint { color: #94a3b8; }
.dc-modal-submit {
    margin-top: 14px;
    background: var(--bd-primary, #01696f);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease, transform .12s ease;
}
.dc-modal-submit:hover:not(:disabled) {
    background: #015a5f;
    transform: translateY(-1px);
}
.dc-modal-submit:active:not(:disabled) {
    transform: translateY(0);
}
.dc-modal-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.dc-modal-status {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    background: #f1f5f9;
    color: #0f172a;
}
.dc-modal-status--ok {
    background: rgba(1, 105, 111, 0.10);
    color: var(--bd-primary, #01696f);
}
.dc-modal-status--err {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
}
[data-theme="dark"] .dc-modal-status {
    background: rgba(255, 255, 255, 0.04);
    color: #e2e8f0;
}
@media (max-width: 480px) {
    .dc-modal-card { padding: 22px 18px 18px; }
    .dc-modal-title { font-size: 1.18rem; }
}

/* ──────────────────────────────────────────────────────────────────────
   PR 34 — Calculator UI polish layer
   Targeted rules layered on top of the existing PR 16-29 styles.  All
   selectors scoped to the calculator pane / results pane / send-results
   modal so the rest of the site is untouched.  No structural changes,
   no new components, no logic touched.
   ─────────────────────────────────────────────────────────────────── */

/* 1. Consistent control heights — was wandering between 36/38/40px ── */
.dc-pane .fp-input,
.dc-pane .fp-select,
.dc-pane select.fp-input,
.dc-pane input.fp-input {
    height: 40px;
    line-height: 1.2;
    padding: 0 12px;
    font-size: .95rem;
    box-sizing: border-box;
}

.dc-pane select.fp-input,
.dc-pane select.fp-select {
    /* select option text was being clipped — give it a hair more
       padding and reserve space for the native chevron */
    padding-right: 32px;
    text-overflow: ellipsis;
}

/* 2. Form-row baseline alignment ─────────────────────────────────── */
.dc-pane .fp-row,
.dc-pane .form-row {
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.dc-pane .fp-label,
.dc-pane .form-label {
    align-self: center;
    line-height: 1.2;
    padding-top: 0;
}

/* 3. Header buttons (Reset Form / Send Results) consistent height ── */
.dc-pane > header button,
.dc-pane > header .btn,
.dc-summary > header button,
.dc-summary > header .btn {
    height: 34px;
    padding: 0 14px;
    font-size: .85rem;
    font-weight: 600;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}

/* 4. Focus rings — unify across the calculator surface ──────────── */
.dc-pane input:focus-visible,
.dc-pane select:focus-visible,
.dc-pane textarea:focus-visible,
.dc-pane button:focus-visible,
.dc-summary button:focus-visible,
#sendResultsModal input:focus-visible,
#sendResultsModal button:focus-visible {
    outline: 2px solid var(--bd-primary, #01696f);
    outline-offset: 2px;
    border-color: var(--bd-primary, #01696f);
}

/* 5. KPI card vertical rhythm — keep totals from kissing footer ── */
.dc-kpi-card { padding: 22px 22px 18px; }
.dc-kpi-footrow { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-soft, #e5e7eb); }
[data-theme="dark"] .dc-kpi-footrow { border-top-color: rgba(255,255,255,.08); }

/* 6. Cost-row label ellipsis — defensive overflow guard ─────────── */
.dc-kpi-cost-row { gap: 12px; }
.dc-kpi-cost-row span:first-child {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    min-width: 0;
}

/* 7. Recent calculations strip — pad the button content ─────────── */
.dc-recent-list button {
    padding: 8px 14px;
    line-height: 1.4;
    border-radius: 999px;
}

/* 8. Mobile breakpoint cleanup — single column at 720px ─────────── */
@media (max-width: 720px) {
    .dc-pane,
    .dc-summary { padding: 18px; }

    .dc-pane .fp-row,
    .dc-pane .form-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .dc-pane .fp-label { font-size: .82rem; color: var(--text-muted, #6b7280); }
    .dc-kpi-grid       { grid-template-columns: 1fr; gap: 12px; }
    .dc-kpi-card       { padding: 18px; }
}

/* 9. Dark mode parity for new cost-row borders ─────────────────── */
[data-theme="dark"] .dc-kpi-card    { background: var(--surface-2, #111827); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .dc-kpi-card--rate { background: rgba(255,255,255,.03); }
[data-theme="dark"] .dc-kpi-cost-row { border-bottom-color: rgba(255,255,255,.06); }

/* 10. Send Results modal — give the dialog a calmer drop shadow ── */
#sendResultsModal .modal-dialog,
#sendResultsModal .dc-modal-card {
    box-shadow: 0 18px 48px rgba(0,0,0,.18), 0 4px 14px rgba(0,0,0,.08);
    border-radius: 14px;
}

/* 11. Print pass — keep modal/recent strip out of the page ─────── */
@media print {
    #sendResultsModal,
    .dc-recent-strip,
    .dc-recent-list,
    .ad-slot { display: none !important; }
}

        /* ──────────────────────────────────────────────────────────
           Mobile UX polish (global baseline).
           1. iOS zoom guard — Safari auto-zooms when a focused control
              has a computed font-size < 16px. Force 16px on form
              controls at <=768px. Desktop density is untouched.
           2. Touch targets — ensure interactive controls meet the
              44px minimum on touch viewports.
           3. Remove the legacy 300ms tap delay on primary actions.
           Loaded before page CSS, so page-level rules can still refine;
           the !important here is reserved for the accessibility-critical
           iOS font-size guard only.
           ────────────────────────────────────────────────────────── */
        a, button, [role="button"], summary,
        .btn-primary-bd, .btn-secondary-bd, .btn-ghost-bd {
            touch-action: manipulation;
        }

        @media (max-width: 768px) {
            input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
            select,
            textarea {
                font-size: 16px !important;
            }

            /* Minimum comfortable tap height for native controls. */
            input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
            select,
            .btn-primary-bd,
            .btn-secondary-bd,
            .btn-ghost-bd {
                min-height: 44px;
            }
        }

        /* ──────────────────────────────────────────────────────────
           Premium glassmorphism layer (PR: glass refresh).
           - Shared glass tokens (light + dark) used across pages.
           - Subtle ambient backdrop so frosted panes have something
             colourful to blur (glass needs a vibrant background).
           - Solid fallback for browsers without backdrop-filter.
           Keeps the existing teal/green/orange palette; high-opacity
           glass preserves >=4.5:1 text contrast.
           ────────────────────────────────────────────────────────── */
        :root,
        [data-theme="light"] {
            --glass-bg: rgba(255, 255, 255, .72);
            --glass-bg-strong: rgba(255, 255, 255, .85);
            --glass-border: rgba(255, 255, 255, .60);
            --glass-blur: 16px;
            --glass-saturate: 140%;
            --glass-shadow: 0 10px 34px rgba(1, 105, 111, .10), 0 2px 8px rgba(0, 0, 0, .04);
            --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%);
        }
        [data-theme="dark"] {
            --glass-bg: rgba(30, 30, 34, .60);
            --glass-bg-strong: rgba(30, 30, 34, .80);
            --glass-border: rgba(255, 255, 255, .10);
            --glass-blur: 18px;
            --glass-saturate: 150%;
            --glass-shadow: 0 10px 34px rgba(0, 0, 0, .50), 0 2px 8px rgba(0, 0, 0, .35);
            --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%);
        }
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme]) {
                --glass-bg: rgba(30, 30, 34, .60);
                --glass-bg-strong: rgba(30, 30, 34, .80);
                --glass-border: rgba(255, 255, 255, .10);
                --glass-shadow: 0 10px 34px rgba(0, 0, 0, .50), 0 2px 8px rgba(0, 0, 0, .35);
                --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%);
            }
        }

        /* Ambient brand-tinted backdrop — fixed, behind everything. */
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background:
                radial-gradient(45rem 45rem at 12% -8%, color-mix(in srgb, var(--bd-primary) 18%, transparent), transparent 60%),
                radial-gradient(38rem 38rem at 105% 8%, color-mix(in srgb, var(--bd-accent) 16%, transparent), transparent 55%),
                radial-gradient(40rem 40rem at 88% 108%, color-mix(in srgb, var(--bd-orange) 12%, transparent), transparent 55%);
            opacity: .9;
        }
        [data-theme="dark"] body::before { opacity: .55; }

        /* Reusable frosted-glass surface. Solid fallback first; the
           translucent+blur treatment is applied only where supported. */
        .glass-surface {
            background: var(--bd-surface);
            border: 1px solid var(--bd-border);
            box-shadow: var(--glass-shadow);
        }
        @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            .glass-surface {
                background: var(--glass-bg);
                border: 1px solid var(--glass-border);
                -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
                backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
            }
        }

        /* Make the sticky nav and footer read as frosted glass too. */
        @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            .site-nav {
                background: color-mix(in srgb, var(--bd-surface) 78%, transparent);
                -webkit-backdrop-filter: blur(14px) saturate(140%);
                backdrop-filter: blur(14px) saturate(140%);
            }
            .site-footer {
                background: color-mix(in srgb, var(--bd-surface) 82%, transparent);
                -webkit-backdrop-filter: blur(10px) saturate(130%);
                backdrop-filter: blur(10px) saturate(130%);
            }
        }

        /* Mobile: trim blur cost; large fixed blurred layers are expensive. */
        @media (max-width: 600px) {
            :root { --glass-blur: 12px; }
        }

        /* ──────────────────────────────────────────────────────────
           Transparent/blended nav over a dark hero (home page).
           At the very top the nav matches the hero colour so they read
           as one continuous band; once scrolled (.scrolled, added at
           scrollY > 8) it reverts to the frosted white/surface bar.
           Scoped to `body.nav-over-hero` so only pages with a dark
           full-bleed hero get this treatment.
           ────────────────────────────────────────────────────────── */
        .site-nav,
        .nav-logo-text,
        .nav-logo-icon,
        .theme-toggle,
        .nav-hamburger {
            transition: background var(--t-base), color var(--t-base),
                        border-color var(--t-base), box-shadow var(--t-base);
        }

        body.nav-over-hero .site-nav:not(.scrolled) {
            background: var(--bd-primary-active);
            border-bottom-color: transparent;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
            box-shadow: none;
        }
        /* Logo: drop the gradient text-clip for solid white on the teal band. */
        body.nav-over-hero .site-nav:not(.scrolled) .nav-logo-text {
            background: none;
            -webkit-background-clip: border-box;
            background-clip: border-box;
            -webkit-text-fill-color: #fff;
            color: #fff;
        }
        body.nav-over-hero .site-nav:not(.scrolled) .nav-logo,
        body.nav-over-hero .site-nav:not(.scrolled) .nav-logo:hover { color: #fff; }
        body.nav-over-hero .site-nav:not(.scrolled) .nav-logo-icon {
            background: rgba(255, 255, 255, .16);
            color: #fff;
        }

        /* Links */
        body.nav-over-hero .site-nav:not(.scrolled) .nav-link { color: rgba(255, 255, 255, .86); }
        body.nav-over-hero .site-nav:not(.scrolled) .nav-link:hover {
            color: #fff;
            background: rgba(255, 255, 255, .14);
        }
        body.nav-over-hero .site-nav:not(.scrolled) .nav-link.active {
            color: #fff;
            background: rgba(255, 255, 255, .18);
        }
        /* Keep the orange active-underline visible on teal. */
        body.nav-over-hero .site-nav:not(.scrolled) .nav-link[aria-current="page"]::after {
            background: var(--bd-orange);
        }

        /* Icon buttons (theme toggle + hamburger) */
        body.nav-over-hero .site-nav:not(.scrolled) .theme-toggle,
        body.nav-over-hero .site-nav:not(.scrolled) .nav-hamburger {
            color: #fff;
            border-color: rgba(255, 255, 255, .32);
        }
        body.nav-over-hero .site-nav:not(.scrolled) .theme-toggle:hover,
        body.nav-over-hero .site-nav:not(.scrolled) .nav-hamburger:hover {
            color: #fff;
            background: rgba(255, 255, 255, .14);
            border-color: rgba(255, 255, 255, .5);
        }

        /* ──────────────────────────────────────────────────────────
           Adaptive navigation:
           • Laptop / tablet / desktop  → top bar (frosted glass).
           • Phones (<=768px)           → fixed bottom icon tab bar.
           ────────────────────────────────────────────────────────── */
        :root { --mbn-h: 62px; }

        /* Stronger frosted-glass top nav background. */
        @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            .site-nav {
                background: var(--glass-bg);
                -webkit-backdrop-filter: blur(16px) saturate(150%);
                backdrop-filter: blur(16px) saturate(150%);
            }
        }

        /* Bottom tab bar — hidden by default (desktop/tablet keep top nav). */
        .mobile-bottom-nav { display: none; }

        @media (max-width: 768px) {
            .mobile-bottom-nav {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: .15rem;
                position: fixed;
                left: 0; right: 0; bottom: 0;
                z-index: 1180;
                padding: .3rem .3rem calc(.3rem + env(safe-area-inset-bottom, 0px));
                background: var(--bd-surface);
                border-top: 1px solid var(--bd-border);
                box-shadow: 0 -6px 24px rgba(0, 0, 0, .10);
            }
            .mbn-item {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 3px;
                min-height: 50px;
                padding: .3rem 0 .25rem;
                border: 0;
                background: transparent;
                color: var(--bd-text-muted);
                font-size: .62rem;
                font-weight: 600;
                line-height: 1;
                text-decoration: none;
                cursor: pointer;
                border-radius: var(--r-md);
                transition: color var(--t-fast), background var(--t-fast);
            }
            .mbn-item i { font-size: 1.22rem; line-height: 1; }
            .mbn-item:hover,
            .mbn-item:focus-visible { color: var(--bd-primary); }
            .mbn-item.active { color: var(--bd-primary); }
            .mbn-item.active::before {
                content: "";
                position: absolute;
                top: 2px;
                width: 24px;
                height: 3px;
                border-radius: 999px;
                background: var(--bd-primary);
            }

            /* The bottom 'More' replaces the top hamburger on phones. */
            .nav-hamburger { display: none !important; }

            /* Reserve room so footer/content clear the fixed bar. */
            body { padding-bottom: calc(var(--mbn-h) + env(safe-area-inset-bottom, 0px)); }
            .site-footer { margin-bottom: 0; }

            /* Lift floating UI above the bar. */
            #backToTop,
            .back-to-top { bottom: calc(var(--mbn-h) + .9rem + env(safe-area-inset-bottom, 0px)); }
            #toastMsg { bottom: calc(var(--mbn-h) + 1rem + env(safe-area-inset-bottom, 0px)); }
        }

        @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
            @media (max-width: 768px) {
                .mobile-bottom-nav {
                    background: var(--glass-bg-strong);
                    border-top: 1px solid var(--glass-border);
                    -webkit-backdrop-filter: blur(18px) saturate(150%);
                    backdrop-filter: blur(18px) saturate(150%);
                }
            }
        }

        @media print { .mobile-bottom-nav { display: none !important; } }

        /* Mobile containment: never let long labels or navigation cells widen
           the layout and get clipped by the page-level overflow guard. */
        @media (max-width: 768px) {
            html,
            body,
            main,
            .site-footer,
            .mobile-bottom-nav {
                max-width: 100%;
            }
            .mobile-bottom-nav {
                width: 100%;
                box-sizing: border-box;
            }
            .mbn-item,
            .mbn-item span {
                min-width: 0;
                max-width: 100%;
            }
            .mbn-item span {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }