:root {
        --bg: #f6f8fb;
        --card: #fff;
        --ink: #101828;
        --muted: #667085;
        --line: #e5eaf1;
        --blue: #2f9cf4;
        --blue-dark: #1570ef;
        --green: #12b76a;
        --soft: #f7fbff;
        --shadow: 0 16px 42px rgba(16, 24, 40, 0.08);
        --radius: 24px;
      }
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        background: radial-gradient(circle at top left, #eef7ff 0, #f6f8fb 42%, #f8fafc 100%);
        font-family: Lato, Arial, sans-serif;
        color: var(--ink);
      }
      .container {
        max-width: 1240px;
        margin: auto;
        padding: 28px 20px 54px;
      }
      .hero {
        background: linear-gradient(135deg, #0b4aa2, #1d73f0);
        border-radius: 28px;
        padding: 32px 36px;
        color: #fff;
        box-shadow: var(--shadow);
        display: flex;
        justify-content: space-between;
        gap: 22px;
        align-items: center;
        margin-bottom: 26px;
      }
      .hero h1 {
        font-size: 40px;
        line-height: 1.1;
        margin: 0 0 10px;
        font-weight: 900;
        width: 100%;
        text-align: left;
        color: #fff !important;
        padding-bottom: 0;
      }
      .hero p {
        font-size: 18px;
        margin: 0;
        color: #dbeafe;
      }
      .badge {
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.28);
        padding: 12px 18px;
        border-radius: 999px;
        font-weight: 900;
        white-space: nowrap;
      }
      .panel,
      .result-card,
      .slab-card,
      .ded-card {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
        overflow: hidden;
        margin-bottom: 26px;
      }
      .tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 16px 18px;
        border-bottom: 1px solid var(--line);
        background: #fff;
      }
      .tab {
        border: 0;
        border-radius: 16px;
        padding: 16px 12px;
        background: #f1f4f8;
        color: #526079;
        font-family: Lato, Arial, sans-serif;
        font-weight: 900;
        font-size: 17px;
        cursor: pointer;
        height: auto;
      }
      .tab.active {
        background: var(--blue);
        color: #fff;
      }
      .tab-content {
        display: none;
        padding: 28px 30px;
      }
      .tab-content.active {
        display: block;
      }
      .tab-content h2 {
        font-size: 28px;
        margin: 0 0 4px;
      }
      .subtitle {
        font-size: 18px;
        color: var(--muted);
        margin: 0 0 24px;
      }
      .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 24px;
      }
      .field label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 900;
        color: #344054;
        margin-bottom: 8px;
      }
      .control {
        position: relative;
      }
      input,
      select {
        width: 100%;
        height: 58px;
        border: 1px solid #cfd6e1;
        border-radius: 15px;
        background: #fff;
        padding: 0 46px 0 14px;
        font-family: Lato, Arial, sans-serif;
        font-size: 18px;
        outline: none;
      }
      input.money {
        padding-left: 34px;
      }
      input:focus,
      select:focus {
        border-color: var(--blue);
        box-shadow: 0 0 0 4px rgba(47, 156, 244, 0.14);
      }
      select {
        appearance: none;
        background-image:
          linear-gradient(45deg, transparent 50%, #101828 50%), linear-gradient(135deg, #101828 50%, transparent 50%);
        background-position:
          calc(100% - 25px) 26px,
          calc(100% - 17px) 26px;
        background-size:
          8px 8px,
          8px 8px;
        background-repeat: no-repeat;
      }
      .rs {
        position: absolute;
        left: 14px;
        top: 18px;
        color: #667085;
        font-weight: 900;
      }
      .tip {
        display: inline-grid;
        place-items: center;
        width: 19px;
        height: 19px;
        border: 1px solid #98a2b3;
        border-radius: 50%;
        font-style: normal;
        font-size: 11px;
        color: #667085;
        cursor: help;
        position: relative;
      }
      .tip:hover:after {
        content: attr(data-tip);
        position: absolute;
        left: 0;
        top: 24px;
        width: min(320px, 78vw);
        background: #101828;
        color: #fff;
        padding: 10px 12px;
        border-radius: 10px;
        font-weight: 400;
        line-height: 1.4;
        font-size: 12px;
        z-index: 30;
        box-shadow: var(--shadow);
      }
      .vnote {
        display: none;
        color: #b54708;
        font-size: 12px;
        margin-top: 6px;
      }
      .field.capped .vnote {
        display: block;
      }
      .actions {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        margin-top: 26px;
        padding-top: 22px;
        border-top: 1px solid var(--line);
      }
      .btn {
        border: 0;
        border-radius: 15px;
        padding: 14px 20px;
        background: var(--blue);
        color: #fff;
        font-family: Lato, Arial, sans-serif;
        font-weight: 900;
        cursor: pointer;
        font-size: 16px;
        height: auto;
      }
      .btn:hover {
        background: var(--blue-dark);
      }
      .btn.secondary {
        background: #e6ebf2;
        color: #101828;
      }
      .btn.ghost {
        background: #fff;
        border: 1px solid var(--line);
        color: #344054;
      }
      .result-section {
        display: none;
      }
      .result-body {
        padding: 26px 30px;
      }
      .result-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 20px;
        margin-bottom: 20px;
      }
      .result-header h2 {
        margin: 0;
        font-size: 30px;
        color: #0f172a;
      }
      .result-header p {
        margin: 4px 0 0;
        color: #667085;
        font-size: 16px;
      }
      .regime-toggle {
        display: flex;
        background: #f1f5f9;
        border-radius: 999px;
        padding: 5px;
        gap: 4px;
      }
      .report-tab {
        border: 0;
        border-radius: 999px;
        padding: 10px 18px;
        font-family: Lato, Arial, sans-serif;
        font-weight: 900;
        cursor: pointer;
        color: #64748b;
        background: transparent;
        height: auto;
        margin-bottom: 0;
      }
      .report-tab.active {
        background: #fff;
        color: #0f172a;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
      }
      .report-tab:hover{
        background-color: transparent;
        color: #64748b;
      }
      .recommended {
        display: inline-flex;
        background: #dcfae6;
        color: #067647;
        font-size: 12px;
        border-radius: 999px;
        padding: 4px 8px;
        margin-left: 7px;
      }
      .dashboard {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 20px;
        margin-bottom: 20px;
      }
      .chart-card,
      .summary-stack,
      .tax-box {
        border: 1px solid var(--line);
        border-radius: 22px;
        background: linear-gradient(180deg, #fff, #fbfdff);
        padding: 20px;
      }
      .chart-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .ring {
        --p: 0deg;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        background: conic-gradient(var(--green) 0 var(--p), #e2e8f0 var(--p) 360deg);
        position: relative;
      }
      .ring:after {
        content: "";
        position: absolute;
        inset: 34px;
        background: #fff;
        border-radius: 50%;
      }
      .ring-center {
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        text-align: center;
        z-index: 2;
      }
      .ring-center span {
        display: block;
        color: #64748b;
        font-weight: 900;
      }
      .ring-center strong {
        display: block;
        font-size: 26px;
        margin-top: 4px;
        color: #0f172a;
      }
      .chart-mini {
        width: 100%;
        display: grid;
        gap: 10px;
        margin-top: 18px;
      }
      .bar-row {
        display: grid;
        grid-template-columns: 115px 1fr 80px;
        gap: 10px;
        align-items: center;
        font-size: 13px;
        color: #475467;
        font-weight: 900;
      }
      .track {
        height: 10px;
        border-radius: 999px;
        background: #eef2f7;
        overflow: hidden;
      }
      .fill {
        height: 100%;
        border-radius: 999px;
        background: var(--blue);
      }
      .fill.green {
        background: var(--green);
      }
      .fill.navy {
        background: #1d4ed8;
      }
      .summary-stack {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
      }
      .kpi {
        background: #f8fbff;
        border: 1px solid #e7eef8;
        border-radius: 18px;
        padding: 18px;
      }
      .kpi span {
        display: block;
        color: #667085;
        font-size: 13px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .kpi strong {
        display: block;
        margin-top: 8px;
        font-size: 25px;
        color: #1e293b;
      }
      .kpi.main {
        background: linear-gradient(180deg, #eff8ff, #fff);
        border-color: #b9dcff;
      }
      .kpi.green {
        background: linear-gradient(180deg, #ecfdf3, #fff);
        border-color: #abefc6;
      }
      .kpi.green strong {
        color: #067647;
      }
      .result-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
      }
      .tax-box h3 {
        margin: 0 0 14px;
        font-size: 20px;
      }
      .tax-lines {
        display: grid;
        gap: 13px;
      }
      .tax-line {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        border-top: 1px dashed var(--line);
        padding-top: 13px;
        color: #475467;
        font-size: 16px;
      }
      .tax-line:first-child {
        border-top: 0;
        padding-top: 0;
      }
      .tax-line strong {
        color: #0f172a;
      }
      .insight {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        color: #166534;
        border-radius: 18px;
        padding: 16px 18px;
        font-size: 18px;
        font-weight: 900;
        margin-bottom: 20px;
      }
      .slabs-body,
      .ded-body {
        padding: 28px 30px;
      }
      .slabs-body h2,
      .ded-body h2 {
        margin: 0 0 20px;
        font-size: 28px;
      }
      .slab-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
      }
      .mini-card {
        border: 1px solid var(--line);
        border-radius: 18px;
        overflow: hidden;
        background: #fff;
      }
      .mini-card h3 {
        margin: 0;
        background: #f9fafb;
        padding: 16px 18px;
        font-size: 20px;
      }
      .table-wrap {
        overflow: auto;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: #fff;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        min-width: 620px;
      }
      th,
      td {
        padding: 14px 16px;
        border-top: 1px solid var(--line);
        text-align: right;
        vertical-align: top;
      }
      th:first-child,
      td:first-child {
        text-align: left;
      }
      thead th {
        border-top: 0;
        background: #f9fafb;
        color: #475467;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .note {
        font-size: 13px;
        color: #667085;
        line-height: 1.5;
      }
      .print-actions {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 12px;
      }
      @media (max-width: 980px) {
        .dashboard,
        .result-grid {
          grid-template-columns: 1fr;
        }
        .summary-stack {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 760px) {
        .hero {
          display: block;
        }
        .badge {
          display: inline-flex;
          margin-top: 18px;
        }
        .tabs,
        .grid,
        .slab-grid,
        .summary-stack {
          grid-template-columns: 1fr;
        }
        .tab-content,
        .result-body,
        .slabs-body,
        .ded-body {
          padding: 20px;
        }
        .hero h1 {
          font-size: 30px;
        }
        .result-header {
          display: block;
        }
        .regime-toggle {
          margin-top: 16px;
        }
        .bar-row {
          grid-template-columns: 90px 1fr 70px;
        }
      }

      .panel{max-height: 100%;margin-top: 50px !important;}

      button{line-height: normal !important;}
      .result-card{margin-top: 0 !important;}

      .tab.active{background: #0b386a;}

      .btn.next, #calcBtn{background: #0b386a;}

      .rs{font-size: 14px;}