/* --- Theme Variables (from main.css) --- */
        :root {
            --main-color: #1A48EE;
            --secondary-color: #008AFF;
            --secondary-background: #f9f9f9;
            --main-background: #e5f3ff;
            --color-white: #ffffff;
            --color-dark-text: #1a202c;
            --color-medium-text: #6b7280;
            --color-light-border: #e2e8f0;
            --color-error-dark: #c53030;
            --color-error-light: #fee2e2;
            --color-green: #16a34a;
        }

        /* --- General Body & Layout (from main.css) --- */
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            background-color: var(--main-background);
            color: var(--color-dark-text);
        }
        .container {
            margin: auto;
            max-width: 64rem; /* 1024px */
            padding: 1rem;
        }
        @media (min-width: 768px) { .container { padding: 2rem; } }
        
        /* --- Typography --- */
        h1, h2, h3, p { margin: 0; }
        .page-header { text-align: center; margin-bottom: 2rem; }
        .page-header h1 { font-size: 2.25rem; font-weight: bold; color: var(--color-dark-text); }
        .page-header p { margin-top: 0.5rem; }
        .section-heading { font-size: 1.5rem; font-weight: 600; color: var(--color-dark-text); margin-bottom: 1rem; border-bottom: 1px solid var(--color-light-border); padding-bottom: 0.5rem;}

        /* --- Card & Grid (from calculators.css) --- */
        .card {
            background-color: var(--color-white);
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .grid-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        @media (min-width: 1024px) { .grid-container { grid-template-columns: repeat(2, 1fr); } .grid-main { grid-column: span 2 / span 2; } }

        /* --- Form & Buttons --- */
        label { display: block; font-weight: 500; color: var(--color-dark-text); margin-bottom: 0.25rem; }
        .input-field { width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.375rem; border: 1px solid var(--color-light-border); }
        .input-field:focus { outline: none; border-color: var(--main-color); box-shadow: 0 0 0 2px rgba(26, 72, 238, 0.4); }
        
        .btn { padding: 0.6rem 1.2rem; border-radius: 0.375rem; font-weight: 500; color: white; transition: background-color 0.2s; cursor: pointer; border: none; }
        .btn-primary { background-color: var(--main-color); }
        .btn-primary:hover { background-color: var(--secondary-color); }
        .btn-secondary { background-color: var(--color-medium-text); }
        .btn-secondary:hover { background-color: #4b5563; }
        .btn-danger { background-color: var(--color-error-dark); }
        .btn-danger:hover { background-color: #dc2626; }

        /* --- Specific Component Styles --- */
        .instructions-list { list-style: decimal; list-style-position: inside; color: var(--color-medium-text); }
        .instructions-list li { margin-bottom: 0.75rem; }

        /* Correct focus style for keyboard accessibility */
        .tab-group { display: flex; }
        .tab-button {
            width: 50%;
            text-align: center;
            padding: 0.5rem 1rem;
            border: 1px solid var(--color-light-border);
            cursor: pointer;
            transition: all 0.2s;
            margin: 0;
            font-weight: 500;
            background-color: var(--color-white);
            font-size: 0.875rem;
        }
        .tab-button:first-of-type { border-radius: 0.375rem 0 0 0.375rem; }
        .tab-button:last-of-type { border-radius: 0 0.375rem 0.375rem 0; }
        .tab-button.active {
            background-color: var(--main-color);
            color: var(--color-white);
            border-color: var(--main-color);
        }
        .tab-button:focus-visible {
            outline: 3px solid var(--secondary-color);
            outline-offset: 1px;
            border-color: var(--secondary-color);
        }
        .assignment-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            align-items: center;
            margin-bottom: 1rem;
        }
        @media (min-width: 640px) { .assignment-row { grid-template-columns: repeat(2, 1fr); } }

        .button-group { display: flex; gap: 1rem; margin-top: 1rem; }
        #results-card { background-color: #eef2ff; }
        #error-message { background-color: var(--color-error-light); color: var(--color-error-dark); }
        
        .result-item { padding: 1rem; border: 1px solid var(--color-light-border); border-radius: 0.5rem; background-color: var(--color-white); }
        .result-item-title { display: flex; justify-content: space-between; align-items: center; }
        .result-item-title p { color: var(--color-dark-text); }
        .result-item-title span { font-weight: bold; }
        .result-item-subtitle { font-size: 0.875rem; color: var(--color-medium-text); margin-top: 0.25rem; }
        .highlight-red { color: var(--color-error-dark); }
        .highlight-green { color: var(--color-green); }