:root {
            /* !! LIGHT MODE (DEFAULT) !! */
            --primary-color: #007BFF;
            --primary-hover: #0056b3;
            --primary-text: #FFFFFF;
            --secondary-color: #6c757d;
            --secondary-hover: #5a6268;
            --danger-color: #dc3545;
            --warning-color: #FFC107; /* Amber */
            --toggle-bg-off: #ced4da;
            --toggle-bg-on: var(--primary-color);
            --toggle-knob: #FFFFFF;

            --bg-color: #F0F4F8;
            --bg-card: #FFFFFF;
            --bg-input: #E9ECEF;
            --border-color: #DDE4EC;
            --text-primary: #0A0F1A;
            --text-secondary: #343A40;

            --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
            --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
        }

        body.dark-mode {
            /* !! DARK MODE (TOGGLED) !! */
            --primary-color: #00AFFF;
            --primary-hover: #FFFFFF;
            --primary-text: #000;
            --secondary-color: #5a688a;
            --secondary-hover: #8193b8;
            --danger-color: #ff6b6b;
            --warning-color: #FFCA2C; /* Amber */
            --toggle-bg-off: #40485a;
            --toggle-bg-on: var(--primary-color);
/*            --toggle-knob: #18181F;*/ /* Match dark card background */
            --toggle-knob: #1F1F1F;
            --bg-color: #0C0C10;
/*           --bg-card: #18181F;    */
            --bg-card: #1F1F1F;
            --bg-input: #222228;
            --border-color: #303038;
            --text-primary: #FFFFFF;
            --text-secondary: #B8C0CC;
        }
        dark-theme .route-limits {
        background-color: #1F1F1F
        }

        body {
            font-family: var(--font-main); background: var(--bg-color);
            background-attachment: fixed; color: var(--text-primary);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Loading Overlay */
        .loading {
            position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(10, 15, 26, 0.9); display: flex; align-items: center;
            justify-content: center; z-index: 9999; backdrop-filter: blur(10px);
            grid-area: 1 / 1 / -1 / -1;
        }

        /* Card Layout */
        .card {
            background: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 16px; padding: 2rem; backdrop-filter: blur(15px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }
        body.dark-mode .card { box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); }

        /* Main Grid Layout */
        body .main {
            display: grid !important; grid-template-columns: 2.5fr 1fr;
            grid-template-rows: auto 1fr; grid-template-areas: "calculator stats" "calculator contract";
            gap: 1.5rem; max-width: 1600px; margin: 0 auto; padding: 2rem 1.5rem;
            float: none !important; width: auto !important; position: relative !important;
        }
        body .main .calculator { grid-area: calculator; }
        body .main .statictics { grid-area: stats; }
        body .main .contract { grid-area: contract; }

        body .main .calculator, body .main .statictics, body .main .contract {
            max-width: none !important; float: none !important; width: auto !important;
            position: relative !important; margin: 0 !important;
        }

        /* Responsive layout */
        @media (max-width: 1024px) {
            body .main {
                grid-template-columns: 1fr; grid-template-rows: auto auto auto;
                grid-template-areas: "calculator" "stats" "contract";
            }
        }

        /* Statistics Card */
        .statictics h5, .statictics h6 { margin: 0; color: var(--text-secondary); font-weight: 400; }
        .statictics h5 { margin-bottom: 1.5rem; }
        .statictics h5:last-of-type { margin-bottom: 0; }
        .statictics h5 span:first-of-type { color: var(--text-primary); font-weight: 600; }
        .statictics .outstanding, .statictics .completion {
            color: var(--primary-color); font-weight: 700; font-size: 1.25rem; margin-left: 8px;
        }
        .statictics h6 {
            font-style: italic; font-size: 0.8rem; border-top: 1px dashed var(--border-color);
            padding-top: 1.5rem; margin-top: 1.5rem;
        }

        /* Calculator Card */
        .calculator h1 {
            color: var(--text-primary); font-weight: 700; letter-spacing: 0.5px;
            font-size: 1.75rem; margin-top: 0; border-bottom: 2px solid var(--primary-color);
            padding-bottom: 0.5rem; display: inline-block;
        }
        .calculator label {
            display: block; margin-bottom: 1.5rem; font-weight: 500; color: var(--text-secondary);
        }
        .calculator label>span:not(.toggle-switch):not(.toggle-label) {
            display: block; margin-bottom: 0.75rem; color: var(--text-primary);
            font-weight: 600; font-size: 1rem;
        }

        /* Dropdown Layout */
        .route-select-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem; }
        .route-select-wrapper label { width: auto; margin-bottom: 0; }
        .route-select-wrapper #destination:empty { display: none; }

        /* Modern Form Inputs */
        input[type="text"], textarea {
            width: 100%; background: var(--bg-input); border: 1px solid var(--border-color);
            border-radius: 8px; padding: 12px; color: var(--text-primary);
            font-family: var(--font-main); font-size: 1rem; transition: all 0.2s ease;
            box-sizing: border-box;
        }
        input[type="text"]:focus, textarea:focus {
            border-color: var(--primary-color); outline: none;
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 30%, transparent);
        }
        textarea#item-list { min-height: 200px; font-family: var(--font-mono); resize: vertical; }

        /* Rush Shipping Toggle Button */
        label.checkbox.toggle-button-label {
            display: flex; align-items: center; cursor: pointer; user-select: none;
            gap: 10px; margin: 0; padding-top: 2.5%;
        }
        label.checkbox.toggle-button-label input[type="checkbox"] {
            opacity: 0; width: 0; height: 0; position: absolute;
        }
        .toggle-label { color: var(--text-primary); font-weight: 600; font-size: 1rem; }
        .toggle-switch {
            position: relative; display: inline-block; width: 50px; height: 26px;
            background-color: var(--toggle-bg-off); border-radius: 13px;
            transition: background-color 0.2s ease; flex-shrink: 0;
        }
        .toggle-switch::after { /* The knob */
            content: ''; position: absolute; left: 3px; top: 3px; /* Padding: 3px */
            width: 20px; height: 20px; background-color: var(--toggle-knob);
            border-radius: 50%; transition: transform 0.2s ease;
        }
        label.checkbox.toggle-button-label input[type="checkbox"]:checked + .toggle-switch {
            background-color: var(--toggle-bg-on);
        }
        label.checkbox.toggle-button-label input[type="checkbox"]:checked + .toggle-switch::after {
            transform: translateX(24px); /* (50 - 20 - 3 - 3) */
        }
        label.checkbox.toggle-button-label img.info {
            opacity: 0.8; transition: opacity 0.2s ease; margin-left: 5px; height: 16px;
        }
        label.checkbox.toggle-button-label img.info:hover { opacity: 1; }

        /* Route Limits Grid */
        .route-limits {
            display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1.5rem;
            background: var(--bg-input); border-radius: 12px; padding: 1.5rem;
            margin-top: 1.5rem; margin-bottom: 1.5rem; transition: background-color 0.3s ease;
        }
        .route-limits label { background: none; padding: 0; border: none; margin: 0; }
        .route-limits label span:first-of-type {
            font-weight: 500; color: var(--text-secondary); font-size: 0.8rem;
            text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px;
        }
        .route-limits label span[id] { color: var(--text-primary); font-weight: 700; font-size: 1.1rem; display: block; }
        .route-limits h3 {
            grid-column: 1 / -1; color: var(--warning-color); border: 1px solid var(--warning-color);
            border-left-width: 4px; background: color-mix(in srgb, var(--warning-color) 10%, transparent);
            padding: 1rem; text-align: center; border-radius: 8px; font-size: 1.1rem;
            font-weight: 600; margin: 1rem 0 0 0;
        }

        /* Additional Inputs & Buttons Wrapper */
        .additional-wrapper {
            display: grid; grid-template-columns: 1fr 1fr auto auto auto;
            gap: 1rem; margin-top: 1.5rem; align-items: flex-end;
        }
        .additional-wrapper label { margin: 0; }
        .additional-wrapper button {
            grid-column: span 1; padding: 12px 20px; font-size: 1rem; font-weight: 700;
            border: none; border-radius: 8px; cursor: pointer; transition: all 0.2s ease;
            height: 45px; /* Match input height */
        }
        .additional-wrapper .toggle-button-label { grid-column: 3 / 4; justify-self: center; align-self: center; padding-bottom: 2px;}

        /* Primary Submit Button */
        button[onclick="submit()"] {
            background: var(--primary-color); color: var(--primary-text);
            box-shadow: 0 4px 15px color-mix(in srgb, var(--primary-color) 20%, transparent);
        }
        button[onclick="submit()"]:hover {
            background: var(--primary-hover); color: var(--primary-color);
            box-shadow: 0 4px 20px color-mix(in srgb, var(--primary-hover) 30%, transparent);
            transform: translateY(-2px);
        }
        body.dark-mode button[onclick="submit()"]:hover { color: var(--primary-text); }

        /* Secondary Clear Button */
        button[onclick="clearStuff()"] {
            background: transparent; color: var(--text-secondary); border: 1px solid var(--secondary-color);
        }
        button[onclick="clearStuff()"]:hover { background: var(--secondary-color); color: var(--text-primary); }

        /* Responsive Adjustments */
        @media (max-width: 900px) {
             .route-limits { grid-template-columns: 1fr 1fr; }
             .additional-wrapper { grid-template-columns: 1fr 1fr; }
             .additional-wrapper .toggle-button-label { grid-column: 1 / 3; grid-row: 2 / 3; margin-top: 1rem;}
             .additional-wrapper button { grid-row: 3 / 4; }
        }
        @media (max-width: 768px) {
            .route-select-wrapper { grid-template-columns: 1fr; gap: 1.5rem; }
        }
        @media (max-width: 500px) {
            .route-limits { grid-template-columns: 1fr; }
            .additional-wrapper { grid-template-columns: 1fr; }
            .additional-wrapper .toggle-button-label { grid-column: 1 / 2; grid-row: 3 / 4; margin-top: 1rem; justify-self: start;}
             .additional-wrapper button { grid-row: auto; }
             .additional-wrapper button[onclick="clearStuff()"] { grid-row: 4/5;}
             .additional-wrapper button[onclick="submit()"] { grid-row: 4/5;}
        }

        /* Contract Result Card */
        .contract table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; }
        .contract th, .contract td { padding: 14px 0; text-align: left; border-bottom: 1px solid var(--border-color); }
        .contract th {
            color: var(--text-secondary); text-transform: uppercase; font-size: 0.75rem;
            letter-spacing: 0.5px; font-weight: 600; padding-top: 0;
        }
        .contract td { color: var(--text-primary); font-size: 1rem; font-weight: 500; }
        .contract tr:first-child th { padding-top: 14px; }
        .contract tr:last-child th, .contract tr:last-child td { border-bottom: none; }
        .contract td#reward, .contract td#collateral { font-weight: 700; font-size: 1.1rem; color: var(--primary-color); }
        .contract th:not(:first-child), .contract td:not(:first-child) { padding-left: 1rem; }
        .contract #description { font-style: italic; color: var(--text-secondary); }

        /* Status Messages */
        .parse-status.success {
            display: block; background: var(--bg-input); border: 1px solid var(--primary-color);
            color: var(--primary-color); padding: 12px; border-radius: 8px; font-weight: 600; text-align: center;
        }
        .error-lines {
            display: block; background: var(--bg-input); border: 1px solid var(--danger-color);
            color: var(--danger-color); padding: 12px; border-radius: 8px;
        }
        .error-lines ul { margin: 5px 0 0 20px; padding: 0; }

        /* Select2 Theme Overrides */
        .select2-container { width: 100% !important; box-sizing: border-box; }
        .select2-container--default .select2-selection--single {
            background-color: var(--bg-input); border: 1px solid var(--border-color);
            border-radius: 8px; height: 45px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: var(--text-primary); line-height: 43px; padding-left: 12px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow { height: 43px; }
        .select2-container--default .select2-selection--single .select2-selection__arrow b {
            border-color: var(--text-secondary) transparent transparent transparent;
            margin-top: -2px; margin-left: -7px;
        }
        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 30%, transparent);
        }
        .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
            border-color: transparent transparent var(--text-secondary) transparent;
        }
        .select2-dropdown {
            background-color: var(--bg-card); border: 1px solid var(--border-color);
            border-radius: 8px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); box-sizing: border-box;
            width: auto !important; min-width: 300px; max-width: 600px;
        }
        .select2-search--dropdown .select2-search__field {
            background-color: var(--bg-input); border: 1px solid var(--border-color);
            color: var(--text-primary); border-radius: 6px;
        }
        .select2-results__option { color: var(--text-secondary); padding: 10px 12px; }
        .select2-results__option--highlighted.select2-results__option--selectable {
            background-color: var(--primary-color); color: var(--primary-text);
        }
        .select2-results__option.select2-results__option--selected {
            background-color: var(--secondary-color); color: var(--text-primary);
        }
        .select2-results__group { color: var(--primary-color); font-weight: 600; }
        .select2-container .select2-selection--single .select2-selection__rendered { padding-left: 12px; }