html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background:
                radial-gradient(ellipse 80% 60% at 10% -10%, rgba(99, 102, 241, 0.14), transparent 55%),
                radial-gradient(ellipse 70% 50% at 100% 0%, rgba(16, 185, 129, 0.12), transparent 50%),
                linear-gradient(180deg, #f8fafc 0%, #eef2ff 45%, #f0fdf4 100%);
        }

        .calculator,
        .calculator * {
            box-sizing: border-box;
            font-family: "Inter", "Segoe UI", system-ui, sans-serif;
        }

        .calculator {
            --ink: #0f172a;
            --muted: #64748b;
            --line: #e2e8f0;
            --soft: #f8fafc;
            --primary: #4f46e5;
            --primary-dark: #4338ca;
            --primary-glow: rgba(79, 70, 229, 0.22);
            --passport: #059669;
            --passport-soft: #ecfdf5;
            --passport-border: #6ee7b7;
            --cnic: #2563eb;
            --cnic-soft: #eff6ff;
            --cnic-border: #93c5fd;
            --amber: #d97706;
            --surface: #ffffff;
            --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
            --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
            --shadow-lg: 0 20px 50px rgba(15, 23, 42, 0.12);
            --radius: 14px;
            --radius-sm: 10px;
            width: min(100%, 1080px);
            margin: 2rem auto 3rem;
            padding: 28px;
            color: var(--ink);
            background: rgba(255, 255, 255, 0.88);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.7);
            border-radius: 20px;
            box-shadow: var(--shadow-lg);
        }

        .calculator h1,
        .calculator h2,
        .calculator h3,
        .calculator p {
            margin: 0;
        }

        .calculator button,
        .calculator input,
        .calculator select {
            font: inherit;
        }

        .tool-header {
            position: relative;
            display: grid;
            grid-template-columns: 1fr;
            gap: 14px;
            align-items: start;
            margin-bottom: 24px;
            padding: 22px 22px 20px;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 55%, #eef2ff 100%);
            box-shadow: var(--shadow-sm);
        }

        .tool-header::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--passport), var(--primary), var(--cnic));
        }

        .title-block h1 {
            font-size: clamp(1.55rem, 3vw, 2.15rem);
            line-height: 1.12;
            letter-spacing: -0.03em;
            color: var(--ink);
            background: linear-gradient(135deg, #0f172a 0%, #334155 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .title-block p {
            margin-top: 10px;
            max-width: 680px;
            color: var(--muted);
            line-height: 1.6;
            font-size: 0.98rem;
        }

        .calculator-layout {
            display: grid;
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
            grid-template-areas:
                "main result"
                "extra result";
            gap: 20px;
            align-items: start;
        }

        .tool-grid-main {
            grid-area: main;
        }

        .tool-grid-extra {
            grid-area: extra;
        }

        .tool-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 18px;
            align-items: start;
            min-width: 0;
        }

        .panel {
            min-width: 0;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--surface);
            box-shadow: var(--shadow-sm);
            transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
        }

        .panel:hover {
            border-color: #cbd5e1;
            box-shadow: var(--shadow-md);
        }

        .panel-pad {
            padding: 22px;
        }

        .controls-panel {
            position: sticky;
            top: 16px;
        }

        .controls-extra .section-block {
            margin-top: 0;
        }

        .controls-extra .note {
            margin-top: 18px;
        }

        .field-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .form-group {
            position: relative;
            min-width: 0;
        }

        .form-group.full {
            grid-column: 1 / -1;
        }

        .calculator label {
            display: block;
            margin-bottom: 8px;
            color: #334155;
            font-size: 0.84rem;
            font-weight: 700;
            letter-spacing: 0.01em;
        }

        .calculator select,
        .calculator input {
            width: 100%;
            min-height: 50px;
            padding: 12px 14px;
            color: var(--ink);
            background: var(--soft);
            border: 1px solid #cbd5e1;
            border-radius: var(--radius-sm);
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, transform 0.2s ease;
        }

        .calculator select:hover,
        .calculator input:hover {
            border-color: #94a3b8;
            background: #fff;
        }

        .calculator select {
            padding-right: 40px;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
        }

        .calculator select:focus,
        .calculator input:focus {
            background: #fff;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px var(--primary-glow);
            transform: translateY(-1px);
        }

        .actions-row {
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            gap: 12px;
            margin-top: 18px;
        }

        .btn {
            min-height: 50px;
            padding: 12px 16px;
            border: 1px solid transparent;
            border-radius: var(--radius-sm);
            cursor: pointer;
            font-weight: 700;
            letter-spacing: 0.01em;
            transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
        }

        .btn:active {
            transform: translateY(0);
            box-shadow: none;
        }

        .btn.primary {
            color: #fff;
            background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
            box-shadow: 0 8px 20px rgba(79, 70, 229, 0.28);
        }

        .btn.primary:hover {
            background: linear-gradient(135deg, var(--primary-dark) 0%, #4f46e5 100%);
            box-shadow: 0 14px 28px rgba(79, 70, 229, 0.34);
        }

        .btn.secondary {
            color: #334155;
            background: #fff;
            border-color: #cbd5e1;
        }

        .btn.secondary:hover {
            background: #f8fafc;
            border-color: #94a3b8;
        }

        .btn.ghost {
            min-height: 40px;
            padding: 8px 12px;
            color: var(--primary);
            background: #eef2ff;
            border-color: #c7d2fe;
            font-size: 0.88rem;
        }

        .btn.ghost:hover {
            background: #e0e7ff;
            border-color: #a5b4fc;
        }

        .message {
            display: none;
            margin-top: 14px;
            padding: 12px 14px;
            color: #9a3412;
            background: #fff7ed;
            border: 1px solid #fdba74;
            border-radius: var(--radius-sm);
            line-height: 1.45;
        }

        .suggestions {
            display: none;
            margin-top: 12px;
            gap: 8px;
            flex-wrap: wrap;
        }

        .suggestion-chip {
            padding: 8px 12px;
            color: var(--primary-dark);
            background: #eef2ff;
            border: 1px solid #c7d2fe;
            border-radius: 999px;
            cursor: pointer;
            font-size: 0.86rem;
            font-weight: 700;
            transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        }

        .suggestion-chip:hover {
            background: #e0e7ff;
            border-color: #a5b4fc;
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(79, 70, 229, 0.14);
        }

        .result {
            display: none;
            border: 1px solid #c7d2fe;
            background: linear-gradient(180deg, #ffffff 0%, #fafaff 100%);
        }

        .result:hover {
            border-color: #a5b4fc;
        }

        .result-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--line);
        }

        .result-header h2 {
            font-size: 1.22rem;
            line-height: 1.25;
            letter-spacing: -0.02em;
        }

        .result-header span {
            display: inline-block;
            margin-top: 6px;
            color: var(--muted);
            font-size: 0.9rem;
        }

        .save-badge {
            flex: 0 0 auto;
            padding: 10px 12px;
            color: #047857;
            background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
            border: 1px solid #6ee7b7;
            border-radius: var(--radius-sm);
            font-size: 0.86rem;
            font-weight: 800;
            text-align: center;
            box-shadow: var(--shadow-sm);
        }

        .tax-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 16px;
        }

        .tax-card {
            padding: 16px;
            border-radius: var(--radius-sm);
            border: 1px solid var(--line);
            background: #fff;
            transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
        }

        .tax-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
        }

        .tax-card.passport {
            border-color: var(--passport-border);
            background: linear-gradient(160deg, var(--passport-soft) 0%, #ffffff 100%);
        }

        .tax-card.passport:hover {
            border-color: #34d399;
            box-shadow: 0 12px 28px rgba(5, 150, 105, 0.16);
        }

        .tax-card.cnic {
            border-color: var(--cnic-border);
            background: linear-gradient(160deg, var(--cnic-soft) 0%, #ffffff 100%);
        }

        .tax-card.cnic:hover {
            border-color: #60a5fa;
            box-shadow: 0 12px 28px rgba(37, 99, 235, 0.16);
        }

        .tax-card span {
            display: block;
            color: var(--muted);
            font-size: 0.76rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .tax-card strong {
            display: block;
            margin-top: 10px;
            color: var(--ink);
            font-size: 1.35rem;
            letter-spacing: -0.02em;
        }

        .tax-card.passport strong {
            color: #047857;
        }

        .tax-card.cnic strong {
            color: #1d4ed8;
        }

        .bar-box {
            margin-top: 18px;
            padding: 16px;
            background: var(--soft);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
        }

        .bar-row {
            display: grid;
            grid-template-columns: 74px 1fr 86px;
            gap: 10px;
            align-items: center;
            margin: 10px 0;
            color: #334155;
            font-size: 0.85rem;
            font-weight: 700;
        }

        .bar-track {
            height: 11px;
            overflow: hidden;
            background: #e2e8f0;
            border-radius: 999px;
        }

        .bar-fill {
            height: 100%;
            min-width: 4%;
            border-radius: inherit;
            transition: width 0.5s ease;
        }

        .bar-fill.passport {
            background: linear-gradient(90deg, #10b981, #059669);
        }

        .bar-fill.cnic {
            background: linear-gradient(90deg, #60a5fa, #2563eb);
        }

        .tool-actions {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 16px;
        }

        .empty-state {
            padding: 24px 18px;
            color: var(--muted);
            line-height: 1.55;
            text-align: center;
            background: var(--soft);
            border: 1px dashed #cbd5e1;
            border-radius: var(--radius-sm);
        }

        .side-title {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
        }

        .side-title h3 {
            font-size: 1rem;
        }

        .mini-list {
            display: grid;
            gap: 9px;
        }

        .mini-item {
            width: 100%;
            padding: 12px;
            color: var(--ink);
            text-align: left;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        }

        .mini-item:hover {
            border-color: #c7d2fe;
            background: #fafaff;
            transform: translateY(-2px);
            box-shadow: var(--shadow-sm);
        }

        .mini-item strong,
        .mini-item span {
            display: block;
        }

        .mini-item strong {
            font-size: 0.92rem;
            line-height: 1.3;
        }

        .mini-item span {
            margin-top: 5px;
            color: var(--muted);
            font-size: 0.82rem;
        }

        .recent-panel {
            margin-top: 18px;
        }

        .note {
            margin-top: 18px;
            padding: 14px 16px;
            color: #92400e;
            background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
            border: 1px solid #fde68a;
            border-radius: var(--radius-sm);
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .review-label {
            display: inline-flex;
            width: fit-content;
            margin-top: 14px;
            padding: 8px 12px;
            color: #4338ca;
            background: #eef2ff;
            border: 1px solid #c7d2fe;
            border-radius: 999px;
            font-size: 0.82rem;
            font-weight: 800;
        }

        .section-block {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--line);
        }

        .section-title {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 8px 12px;
            margin-bottom: 14px;
        }

        .section-title h3 {
            font-size: 1.02rem;
            line-height: 1.25;
            letter-spacing: -0.01em;
        }

        .section-title p {
            color: var(--muted);
            font-size: 0.86rem;
            line-height: 1.45;
        }

        .popular-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .quick-card {
            min-height: 62px;
            padding: 12px;
            color: var(--ink);
            text-align: left;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        }

        .quick-card:hover {
            border-color: #a5b4fc;
            background: linear-gradient(135deg, #fafaff 0%, #ffffff 100%);
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(79, 70, 229, 0.12);
        }

        .quick-card strong,
        .quick-card span {
            display: block;
        }

        .quick-card strong {
            font-size: 0.88rem;
            line-height: 1.3;
        }

        .quick-card span {
            margin-top: 4px;
            color: var(--muted);
            font-size: 0.78rem;
        }

        .batch-output,
        .saved-list,
        .checklist-grid {
            display: grid;
            gap: 10px;
        }

        .insight-grid,
        .compare-results {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-top: 16px;
        }

        .insight,
        .compare-card {
            padding: 14px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
        }

        .insight:hover,
        .compare-card:hover {
            border-color: #cbd5e1;
            box-shadow: var(--shadow-sm);
            transform: translateY(-1px);
        }

        .insight span,
        .compare-card span {
            display: block;
            color: var(--muted);
            font-size: 0.74rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .insight strong,
        .compare-card strong {
            display: block;
            margin-top: 8px;
            color: var(--ink);
            font-size: 1.06rem;
            line-height: 1.25;
        }

        .result-note {
            margin-top: 16px;
            padding: 12px 14px;
            color: #92400e;
            background: #fffbeb;
            border: 1px solid #fde68a;
            border-radius: var(--radius-sm);
            font-size: 0.88rem;
            line-height: 1.5;
        }

        .calculator-sections {
            display: grid;
            gap: 20px;
            margin-top: 20px;
        }

        .compare-panel,
        .official-panel,
        .faq-panel {
            margin-top: 0;
        }

        .compare-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .compare-picker {
            display: grid;
            gap: 10px;
            min-width: 0;
            padding: 14px;
            background: var(--soft);
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .compare-picker:hover {
            border-color: #cbd5e1;
            box-shadow: var(--shadow-sm);
        }

        .compare-picker h3 {
            font-size: 0.95rem;
            color: var(--primary-dark);
        }

        .compare-card.lower {
            border-color: var(--passport-border);
            background: linear-gradient(160deg, var(--passport-soft) 0%, #fff 100%);
        }

        .compare-card .badge {
            display: inline-block;
            margin-top: 8px;
            padding: 5px 10px;
            color: #047857;
            background: #d1fae5;
            border-radius: 999px;
            font-size: 0.76rem;
            font-weight: 800;
            text-transform: none;
        }

        .winner-summary {
            grid-column: 1 / -1;
            margin-top: 12px;
            padding: 14px 16px;
            color: #047857;
            background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
            border: 1px solid #6ee7b7;
            border-radius: var(--radius-sm);
            font-weight: 800;
            line-height: 1.45;
        }

        .level-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-top: 10px;
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 0.76rem;
            font-weight: 900;
            letter-spacing: 0.02em;
        }

        .level-low {
            color: #047857;
            background: #d1fae5;
        }

        .level-medium {
            color: #1d4ed8;
            background: #dbeafe;
        }

        .level-high {
            color: #b45309;
            background: #fef3c7;
        }

        .level-very-high {
            color: #b91c1c;
            background: #fee2e2;
        }

        .warning-box {
            margin-top: 14px;
            padding: 14px 16px;
            color: #b91c1c;
            background: #fff1f2;
            border: 1px solid #fecdd3;
            border-radius: var(--radius-sm);
            font-weight: 800;
            line-height: 1.45;
        }

        .official-panel {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 16px;
            align-items: center;
            background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
            border-color: #bbf7d0;
        }

        .official-panel h3 {
            color: #047857;
        }

        .official-panel p {
            margin-top: 6px;
            color: #475569;
            line-height: 1.55;
        }

        .official-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            padding: 10px 16px;
            color: #fff;
            background: linear-gradient(135deg, #059669 0%, #10b981 100%);
            border-radius: var(--radius-sm);
            font-weight: 800;
            text-decoration: none;
            white-space: nowrap;
            box-shadow: 0 8px 20px rgba(5, 150, 105, 0.25);
            transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
        }

        .official-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 26px rgba(5, 150, 105, 0.32);
            filter: brightness(1.03);
        }

        .faq-grid {
            display: grid;
            gap: 10px;
        }

        .faq-grid details {
            padding: 14px 16px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
        }

        .faq-grid details:hover {
            border-color: #c7d2fe;
            background: #fafaff;
            box-shadow: var(--shadow-sm);
        }

        .faq-grid details[open] {
            border-color: #a5b4fc;
            background: linear-gradient(180deg, #fafaff 0%, #fff 100%);
        }

        .faq-grid summary {
            cursor: pointer;
            color: var(--ink);
            font-weight: 800;
            list-style: none;
        }

        .faq-grid summary::-webkit-details-marker {
            display: none;
        }

        .faq-grid p {
            margin-top: 10px;
            color: var(--muted);
            line-height: 1.55;
            font-size: 0.92rem;
        }

        .check-item {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            padding: 12px 14px;
            color: #334155;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-sm);
            font-weight: 600;
            line-height: 1.4;
            cursor: pointer;
            transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
        }

        .check-item:hover {
            border-color: #c7d2fe;
            background: #fafaff;
            transform: translateX(2px);
        }

        .check-item input {
            width: 18px;
            min-height: 18px;
            margin-top: 2px;
            accent-color: var(--primary);
        }

        .calculator-ad {
            margin-top: 18px;
            overflow: hidden;
            max-width: 100%;
            border-radius: var(--radius-sm);
        }

        .calculator-ad ins,
        .calculator-ad iframe {
            max-width: 100% !important;
        }

        .result-column {
            grid-area: result;
            grid-row: 1 / -1;
            display: grid;
            gap: 0;
            min-width: 0;
            position: sticky;
            top: 16px;
        }

        .result-placeholder {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 320px;
            padding: 28px 20px;
            text-align: center;
            color: var(--muted);
            background: linear-gradient(180deg, #fafaff 0%, #f8fafc 100%);
            border: 1px dashed #c7d2fe;
            border-radius: var(--radius);
        }

        .result-placeholder-icon {
            display: grid;
            place-items: center;
            width: 56px;
            height: 56px;
            margin-bottom: 14px;
            color: var(--primary);
            background: #eef2ff;
            border-radius: 16px;
            font-size: 1.5rem;
            font-weight: 800;
        }

        .result-placeholder h3 {
            color: #334155;
            font-size: 1.05rem;
        }

        .result-placeholder p {
            margin-top: 8px;
            max-width: 280px;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .hide {
            display: none !important;
        }

        @media (max-width: 960px) {
            .calculator-layout {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "main"
                    "result"
                    "extra";
                gap: 14px;
            }

            .controls-panel {
                position: static;
            }

            .result-column {
                grid-row: auto;
                position: static;
            }

            .result-placeholder {
                min-height: 180px;
                padding: 20px 14px;
            }

            .calculator {
                padding: 14px 12px;
            }

            .tool-header {
                padding: 16px 14px;
                margin-bottom: 16px;
            }

            .panel-pad {
                padding: 14px 12px;
            }
        }

        @media (max-width: 560px) {
            .calculator {
                width: 100%;
                max-width: 100%;
                padding: 10px 8px;
                margin: 0.5rem 0 1rem;
                border-radius: 12px;
            }

            .tool-header {
                padding: 14px 12px;
            }

            .panel-pad {
                padding: 12px 10px;
            }

            .field-grid,
            .actions-row,
            .tax-cards,
            .tool-actions,
            .popular-grid,
            .insight-grid,
            .compare-grid,
            .compare-results,
            .saved-list,
            .checklist-grid,
            .official-panel {
                grid-template-columns: 1fr;
            }

            .official-link {
                width: 100%;
            }

            .result-header {
                display: block;
            }

            .save-badge {
                display: inline-block;
                margin-top: 10px;
            }

            .bar-row {
                grid-template-columns: 62px 1fr;
            }

            .bar-row .amount {
                grid-column: 1 / -1;
                text-align: right;
            }
        }

        @media print {
            body {
                background: #fff;
            }

            .calculator {
                box-shadow: none;
                border: 1px solid #ccc;
                background: #fff;
            }

            .controls-panel,
            .side-column,
            .calculator-ad,
            .tool-actions,
            .compare-panel,
            .official-panel,
            .faq-panel,
            .note,
            .result-placeholder {
                display: none !important;
            }

            .calculator-layout {
                display: block;
            }

            .result {
                display: block !important;
            }
        }