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

        body {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
            background: #f4f7fc;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .card {
	width: 100%;
	max-width: 1200px;
	background: white;
	border-radius: 32px;
	box-shadow: 0 12px 30px rgba(0,0,0,0.05), 0 4px 10px rgba(0,10,30,0.03);
	margin-bottom: 16px;
	border: 1px solid #e9ecf2;
	margin-right: auto;
	margin-left: auto;
	padding-top: 24px;
	padding-right: 18px;
	padding-bottom: 28px;
	padding-left: 18px;
	margin-top: 16px;
        }

        .hea {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 22px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .hea h1 {
            font-size: 1.8rem;
            font-weight: 650;
            letter-spacing: -0.02em;
            color: #0b1e42;
            line-height: 1.1;
        }

        .badge {
            background: #dee7ff;
            color: #1e3a8a;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 5px 14px;
            border-radius: 40px;
         
        }

        /* state row */
        .state-row {
            background: #f0f4fe;
            border-radius: 30px;
            padding: 12px 18px;
            margin-bottom: 22px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 8px;
        }

        .state-picker {
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
        }

        .state-picker label {
            font-weight: 500;
            color: #1f2b4f;
        }

        #stateSelect {
            background: white;
            border: 1px solid #bdc7e0;
            border-radius: 40px;
            padding: 10px 18px;
            font-size: 1rem;
            font-weight: 500;
            color: #121f3f;
            outline: none;
            appearance: none;
            -webkit-appearance: none;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%233d5fd9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 18px;
            min-width: 130px;
        }

        .hourly-stat {
            background: #ffffffd0;
            backdrop-filter: blur(2px);
            padding: 8px 16px;
            border-radius: 36px;
            font-weight: 600;
            color: #0b2b5c;
            border: 1px solid #b9c7f0;
            font-size: 0.95rem;
        }

        /* input area */
        .label-row {
            display: flex;
            justify-content: space-between;
            align-items: baseline;
            margin-bottom: 6px;
            flex-wrap: wrap;
        }

        .input-wrapper {
            background: #f2f5ff;
            border-radius: 34px;
            padding: 8px 20px;
            display: flex;
            align-items: center;
            border: 1.8px solid transparent;
            transition: 0.15s;
            margin-bottom: 6px;
        }

        .input-wrapper:focus-within {
            border-color: #3d5fd9;
            background: #ffffff;
            box-shadow: 0 0 0 4px rgba(61,95,217,0.12);
        }

        .input-wrapper .dollar {
            font-size: 1.8rem;
            font-weight: 550;
            color: #122545;
            margin-right: 6px;
        }

        .input-wrapper input {
            background: transparent;
            border: none;
            padding: 14px 0;
            font-size: 1.8rem;
            font-weight: 550;
            width: 100%;
            outline: none;
            color: #0b1b33;
        }

        .input-wrapper input::placeholder {
            color: #aeb9da;
            font-weight: 400;
            font-size: 1.5rem;
        }

        /* slider */
        .slider-container {
            margin: 16px 0 8px;
        }

        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            background: #d9e1f5;
            border-radius: 20px;
            outline: none;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 26px;
            height: 26px;
            background: white;
            border: 2px solid #1e3d99;
            border-radius: 50%;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            cursor: pointer;
            margin-top: -9px;
        }

        input[type=range]::-moz-range-thumb {
            width: 26px;
            height: 26px;
            background: white;
            border: 2px solid #1e3d99;
            border-radius: 50%;
            cursor: pointer;
        }

        /* pill rows */
        .fee-summary {
            background: #e9efff;
            border-radius: 30px;
            padding: 18px 20px;
            margin: 22px 0 18px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            row-gap: 16px;
        }

        .fee-col {
            display: flex;
            flex-direction: column;
        }

        .fee-label {
            font-size: 0.9rem;
            color: #2d3e6b;
        }

        .fee-number {
            font-size: 2.0rem;
            font-weight: 700;
            color: #0a1d44;
            line-height: 1.2;
        }

        .fee-number small {
            font-size: 1rem;
            font-weight: 500;
            color: #4f6190;
        }

        .hours-badge {
            background: #1f2f5a;
            color: white;
            padding: 10px 18px;
            border-radius: 60px;
            font-weight: 600;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 6px;
            box-shadow: 0 4px 10px rgba(20,40,80,0.2);
        }

        .hours-badge span {
            font-weight: 300;
            font-size: 0.9rem;
            opacity: 0.9;
        }

        /* breakdown */
        .breakdown-card {
            background: #f8faff;
            border-radius: 26px;
            padding: 18px 16px;
            margin: 16px 0 16px;
            border: 1px solid #dde3f0;
        }

        .section-title {
            font-weight: 600;
            color: #162952;
            margin-bottom: 16px;
            font-size: 1.1rem;
            letter-spacing: -0.2px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .tier-row {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px dashed #d3dbf0;
            color: #26345a;
            font-size: 0.95rem;
        }

        .tier-row:last-child {
            border-bottom: none;
        }

        .total-row {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 2px solid #c5d0ec;
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            color: #091933;
        }

        .chart-row {
            background: #edf2fd;
            border-radius: 16px;
            padding: 16px;
            margin: 20px 0 10px;
        }

        .chart-label {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            margin-bottom: 6px;
            color: #253659;
        }

        .bar-bg {
            background: #d4def5;
            height: 26px;
            border-radius: 30px;
            overflow: hidden;
            display: flex;
            width: 100%;
        }

        .bar-fee {
            background: #1f3f9e;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 10px;
            color: white;
            font-size: 0.8rem;
            font-weight: 500;
            transition: width 0.2s;
            white-space: nowrap;
        }

        .bar-you {
            background: #b6c8fc;
            height: 100%;
            transition: width 0.2s;
        }

        .clear-btn {
            background: none;
            border: 1.5px solid #c1cde8;
            color: #142d5c;
            font-size: 0.95rem;
            font-weight: 500;
            padding: 12px 24px;
            border-radius: 40px;
            width: fit-content;
            margin: 12px auto 8px;
            cursor: pointer;
            transition: 0.2s;
        }

        .clear-btn:active {
            background: #e8efff;
            border-color: #3d5fd9;
        }

        .forbidden-box {
            background: #fff1f0;
            border-radius: 22px;
            padding: 16px;
            margin: 20px 0 10px;
            color: #a12b2b;
            font-size: 0.9rem;
            border-left: 4px solid #c73b3b;
        }

        .footnote {
            color: #61739e;
            font-size: 0.75rem;
            text-align: center;
            margin-top: 20px;
            padding-top: 14px;
            border-top: 1px solid #dbe2f0;
        }