:root {
      --navy: #0b4966;
      --navy-dark: #07354b;
      --blue: #1179a6;
      --green: #18a579;
      --green-dark: #0b7757;
      --mint: #e8f7f2;
      --sky: #edf7fb;
      --ink: #16252d;
      --muted: #5e7079;
      --line: #d9e5e9;
      --paper: #f5f9fa;
      --white: #fff;
      --amber: #d98420;
      --red: #cb4b4b;
      --shadow: 0 18px 50px rgba(7, 53, 75, .11);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 0%, rgba(24, 165, 121, .10), transparent 28rem),
        var(--paper);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
    }
    a { color: var(--navy); }
    button, input, select { font: inherit; }
    button, select { cursor: pointer; }
    .site-shell { max-width: 1180px; margin: 0 auto; padding: 22px 22px 48px; }
    .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 20px;
    }
    .brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
    .brand-mark {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 14px;
      color: var(--white);
      background: linear-gradient(145deg, var(--navy), var(--green));
      font-size: 24px;
      font-weight: 900;
      box-shadow: 0 10px 24px rgba(11, 73, 102, .24);
    }
    .brand-name { display: block; font-size: 25px; font-weight: 900; line-height: 1; letter-spacing: -.04em; }
    .brand-tag { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; }
    .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex-wrap: wrap; }
    .main-nav { display: flex; align-items: center; gap: 17px; flex-wrap: wrap; }
    .main-nav a { color: #40545e; text-decoration: none; font-size: 14px; font-weight: 750; }
    .main-nav a:hover { color: var(--green-dark); }
    .language-switcher { display: flex; padding: 4px; border: 1px solid #b9d1da; border-radius: 12px; background: var(--white); }
    .language-switcher button {
      min-width: 76px;
      padding: 8px 11px;
      border: 0;
      border-radius: 8px;
      color: #4d626c;
      background: transparent;
      font-size: 13px;
      font-weight: 850;
    }
    .language-switcher button.active { color: var(--white); background: var(--navy); }
    .hero {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.35fr .65fr;
      align-items: center;
      gap: 30px;
      padding: clamp(30px, 5vw, 56px);
      border-radius: 25px;
      color: var(--white);
      background: linear-gradient(135deg, var(--navy-dark), var(--navy) 58%, #0d6f75);
      box-shadow: var(--shadow);
    }
    .hero:after {
      content: "";
      position: absolute;
      width: 300px;
      height: 300px;
      right: -120px;
      top: -160px;
      border: 54px solid rgba(255, 255, 255, .06);
      border-radius: 50%;
    }
    .eyebrow { margin: 0 0 9px; color: var(--green-dark); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
    .hero .eyebrow { color: #6de0bd; }
    .hero h1 { max-width: 760px; margin: 0 0 14px; font-size: clamp(35px, 6vw, 59px); line-height: 1.02; letter-spacing: -.055em; }
    .hero p { max-width: 720px; margin: 0; color: rgba(255, 255, 255, .82); font-size: 17px; }
    .hero-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
    .button { display: inline-flex; align-items: center; justify-content: center; min-height: 45px; padding: 10px 17px; border: 0; border-radius: 11px; color: var(--white); background: var(--green-dark); text-decoration: none; font-weight: 850; }
    .button-light { color: var(--navy); background: var(--white); }
    .button-ghost { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.09); }
    .hero-stat { position: relative; z-index: 1; padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: rgba(255,255,255,.09); backdrop-filter: blur(4px); }
    .hero-stat strong { display: block; margin-bottom: 5px; color: #74e2c1; font-size: 34px; letter-spacing: -.04em; }
    .hero-stat span { color: rgba(255,255,255,.78); font-size: 13px; }
    .section { margin-top: 42px; }
    .section-heading { max-width: 780px; margin-bottom: 19px; }
    .section-heading h2 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 37px); line-height: 1.14; letter-spacing: -.04em; }
    .section-heading p { margin: 0; color: var(--muted); }
    .calculator {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(350px, .95fr);
      gap: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--white);
      box-shadow: var(--shadow);
    }
    .calc-form { padding: clamp(22px, 4vw, 34px); }
    .calc-form h3 { margin: 0 0 4px; font-size: 25px; letter-spacing: -.03em; }
    .form-intro { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
    .fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .field-wide { grid-column: 1 / -1; }
    label { display: block; margin-bottom: 7px; color: #435963; font-size: 12px; font-weight: 850; }
    .input-wrap { position: relative; }
    input, select {
      width: 100%;
      height: 48px;
      padding: 0 13px;
      border: 1px solid #cddde2;
      border-radius: 11px;
      color: var(--ink);
      background: var(--white);
      outline: none;
    }
    input { padding-left: 30px; }
    input.percent { padding-left: 13px; padding-right: 35px; }
    input.plain { padding-left: 13px; }
    input:focus, select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(17,121,166,.12); }
    .prefix, .suffix { position: absolute; top: 50%; transform: translateY(-50%); color: #71848d; font-size: 13px; pointer-events: none; }
    .prefix { left: 13px; }
    .suffix { right: 13px; }
    .field-hint { display: block; margin-top: 5px; color: #7a8b92; font-size: 11px; }
    .w4-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 16px; border-radius: 14px; background: var(--sky); }
    .check-field { display: flex; align-items: flex-start; gap: 10px; grid-column: 1 / -1; }
    .check-field input { width: 18px; height: 18px; margin: 2px 0 0; padding: 0; }
    .check-field label { margin: 0; font-size: 13px; font-weight: 750; }
    .hidden { display: none !important; }
    .reset-button { margin-top: 18px; padding: 9px 13px; border: 0; border-radius: 9px; color: var(--navy); background: #e8f0f3; font-size: 12px; font-weight: 800; }
    .results {
      padding: clamp(22px, 4vw, 34px);
      color: var(--white);
      background: linear-gradient(160deg, var(--navy-dark), var(--navy));
    }
    .results-kicker { margin: 0; color: #70dfbe; font-size: 12px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
    .net-value { margin: 4px 0 0; font-size: clamp(39px, 6vw, 54px); font-weight: 900; line-height: 1.05; letter-spacing: -.055em; }
    .net-period { margin: 4px 0 22px; color: rgba(255,255,255,.7); font-size: 13px; }
    .result-list { margin: 0; }
    .result-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.12); }
    .result-row dt { color: rgba(255,255,255,.72); font-size: 13px; }
    .result-row dd { margin: 0; font-size: 14px; font-weight: 850; }
    .result-row.total { margin-top: 4px; border-bottom: 0; }
    .result-row.total dt, .result-row.total dd { color: #77e1c1; font-weight: 900; }
    .chart-wrap { display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 18px; margin-top: 23px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); }
    .chart {
      width: 124px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: conic-gradient(#66dfbc 0 70%, #eea34a 70% 90%, #55a9d2 90% 100%);
    }
    .chart:after { content: ""; width: 66px; aspect-ratio: 1; border-radius: 50%; background: var(--navy-dark); }
    .legend { display: grid; gap: 8px; }
    .legend-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.78); font-size: 12px; }
    .legend-label { display: flex; align-items: center; gap: 8px; }
    .dot { width: 9px; height: 9px; border-radius: 50%; }
    .dot-net { background: #66dfbc; }
    .dot-tax { background: #eea34a; }
    .dot-ded { background: #55a9d2; }
    .annual-note { margin: 18px 0 0; padding: 12px 13px; border-radius: 10px; color: #294d5a; background: #eaf8f4; font-size: 12px; }
    .expense-entry-card {
      display: grid;
      grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
      gap: 28px;
      align-items: center;
      margin-bottom: 16px;
      padding: clamp(22px, 4vw, 30px);
      border: 1px solid #cce1e8;
      border-radius: 20px;
      background: linear-gradient(135deg, #f2fafc, #eaf7f3);
      box-shadow: 0 10px 30px rgba(7,53,75,.06);
    }
    .expense-entry-copy .eyebrow { margin-bottom: 6px; }
    .expense-entry-copy h3 { margin: 0 0 6px; font-size: clamp(22px, 3vw, 29px); line-height: 1.12; letter-spacing: -.035em; }
    .expense-entry-copy p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
    .expense-entry-form { min-width: 0; }
    .expense-type-toggle {
      display: inline-flex;
      gap: 4px;
      margin-bottom: 12px;
      padding: 4px;
      border: 1px solid #c6dbe2;
      border-radius: 11px;
      background: rgba(255,255,255,.8);
    }
    .expense-type-toggle button {
      min-width: 105px;
      padding: 8px 12px;
      border: 0;
      border-radius: 8px;
      color: #536973;
      background: transparent;
      font-size: 12px;
      font-weight: 850;
    }
    .expense-type-toggle button.active { color: var(--white); background: var(--navy); box-shadow: 0 4px 12px rgba(11,73,102,.18); }
    .expense-entry-fields {
      display: grid;
      grid-template-columns: minmax(150px, 1fr) minmax(110px, .55fr) minmax(135px, .65fr) auto;
      gap: 10px;
      align-items: end;
    }
    .expense-entry-fields input, .expense-entry-fields select { height: 45px; background: var(--white); }
    .submit-expense {
      min-height: 45px;
      padding: 9px 17px;
      border: 0;
      border-radius: 11px;
      color: var(--white);
      background: linear-gradient(135deg, var(--green-dark), var(--green));
      font-size: 13px;
      font-weight: 900;
      white-space: nowrap;
      box-shadow: 0 8px 18px rgba(11,119,87,.18);
    }
    .submit-expense:hover { filter: brightness(.96); transform: translateY(-1px); }
    .expense-planner {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
      gap: 18px;
      align-items: start;
    }
    .expense-editor {
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: var(--white);
      box-shadow: 0 12px 35px rgba(7,53,75,.07);
    }
    .expense-group { padding: clamp(20px, 3vw, 28px); }
    .expense-group + .expense-group { border-top: 1px solid var(--line); }
    .expense-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
    .expense-group h3 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.025em; }
    .expense-group p { margin: 0; color: var(--muted); font-size: 13px; }
    .expense-list { display: grid; gap: 9px; }
    .expense-row {
      display: grid;
      grid-template-columns: minmax(120px, 1fr) minmax(105px, .55fr) minmax(130px, .6fr) 36px;
      gap: 9px;
      align-items: center;
      padding: 10px;
      border: 1px solid #dce7ea;
      border-radius: 13px;
      background: #f9fbfc;
    }
    .expense-row input, .expense-row select { height: 42px; background: var(--white); }
    .expense-row .expense-name { padding-left: 12px; }
    .expense-row .input-wrap input { height: 42px; }
    .remove-expense {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 9px;
      color: #9b4141;
      background: #fbecec;
      font-size: 20px;
      line-height: 1;
    }
    .remove-expense:hover { color: var(--white); background: var(--red); }
    .expense-empty { padding: 17px; border: 1px dashed #c8d8dd; border-radius: 12px; text-align: center; background: #fafcfc; }
    .budget-summary {
      position: sticky;
      top: 18px;
      padding: clamp(22px, 4vw, 30px);
      border-radius: 20px;
      color: var(--white);
      background: linear-gradient(160deg, var(--navy-dark), var(--navy));
      box-shadow: var(--shadow);
    }
    .budget-status { margin: 8px 0 22px; padding: 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.08); }
    .budget-status span { display: block; color: rgba(255,255,255,.72); font-size: 12px; }
    .budget-status strong { display: block; margin-top: 2px; color: #70dfbe; font-size: clamp(32px, 5vw, 43px); line-height: 1.1; letter-spacing: -.045em; }
    .budget-status[data-state="negative"] strong { color: #ffadad; }
    .budget-list { margin: 0; }
    .budget-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.11); }
    .budget-list dt { color: rgba(255,255,255,.72); font-size: 12px; }
    .budget-list dd { margin: 0; font-size: 13px; font-weight: 850; }
    .budget-list .budget-total { margin-top: 3px; border-bottom: 0; }
    .budget-list .budget-total dt, .budget-list .budget-total dd { color: #76dfc0; font-weight: 900; }
    .budget-meter { height: 9px; overflow: hidden; margin-top: 20px; border-radius: 999px; background: rgba(255,255,255,.16); }
    .budget-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: #69dfbd; transition: width .2s ease, background .2s ease; }
    .budget-message { min-height: 39px; margin: 10px 0 15px; color: rgba(255,255,255,.76); font-size: 12px; }
    .clear-expenses { width: 100%; min-height: 41px; border: 1px solid rgba(255,255,255,.25); border-radius: 10px; color: var(--white); background: rgba(255,255,255,.08); font-size: 12px; font-weight: 800; }
    .saved-note { margin: 9px 0 0; color: rgba(255,255,255,.55); text-align: center; font-size: 10px; }
    .content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .card { padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: rgba(255,255,255,.9); box-shadow: 0 8px 25px rgba(7,53,75,.05); }
    .card-number { width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 15px; border-radius: 10px; color: var(--white); background: var(--green-dark); font-weight: 900; }
    .card h3 { margin: 0 0 7px; font-size: 19px; letter-spacing: -.02em; }
    .card p { margin: 0; color: var(--muted); font-size: 14px; }
    .article { padding: clamp(23px, 4vw, 38px); border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
    .article h2 { margin: 30px 0 8px; font-size: 25px; letter-spacing: -.03em; }
    .article h2:first-child { margin-top: 0; }
    .article p { color: #4d626b; }
    .notice { margin-top: 20px; padding: 15px 17px; border-left: 4px solid var(--amber); border-radius: 9px; color: #654e32; background: #fff6e9; font-size: 13px; }
    .faq { display: grid; gap: 10px; }
    details { padding: 15px 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
    summary { cursor: pointer; color: var(--navy-dark); font-weight: 850; }
    details p { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
    .site-footer { margin-top: 42px; padding-top: 26px; border-top: 1px solid var(--line); }
    .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; }
    .site-footer h2 { margin: 0 0 8px; font-size: 19px; }
    .site-footer p { margin: 0; color: var(--muted); font-size: 13px; }
    .footer-links strong { display: block; margin-bottom: 8px; }
    .footer-links a { display: block; margin: 5px 0; color: #536973; text-decoration: none; font-size: 13px; }
    .copyright { margin-top: 23px; color: #7b8b92; font-size: 11px; }

    @media (max-width: 900px) {
      .calculator { grid-template-columns: 1fr; }
      .expense-entry-card { grid-template-columns: 1fr; gap: 18px; }
      .expense-planner { grid-template-columns: 1fr; }
      .budget-summary { position: static; }
      .hero { grid-template-columns: 1fr; }
      .hero-stat { max-width: 360px; }
      .content-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 720px) {
      .site-shell { padding: 16px 13px 34px; }
      .site-header { align-items: flex-start; flex-direction: column; }
      .header-actions { width: 100%; justify-content: flex-start; }
      .main-nav { width: 100%; gap: 12px; }
      .main-nav a { font-size: 12px; }
      .brand-tag { display: none; }
      .hero { border-radius: 19px; }
      .fields, .w4-panel, .footer-grid { grid-template-columns: 1fr; }
      .field-wide, .check-field { grid-column: auto; }
      .expense-entry-fields { grid-template-columns: 1fr 1fr; }
      .submit-expense { width: 100%; }
      .expense-row { grid-template-columns: minmax(0, 1fr) minmax(105px, .6fr) 36px; }
      .expense-row .expense-frequency { grid-column: 1 / 3; }
      .chart-wrap { grid-template-columns: 105px 1fr; }
      .chart { width: 105px; }
    }
    @media (max-width: 420px) {
      .language-switcher { width: 100%; }
      .language-switcher button { flex: 1; }
      .expense-entry-fields { grid-template-columns: 1fr; }
      .expense-type-toggle { display: flex; }
      .expense-type-toggle button { min-width: 0; flex: 1; }
      .expense-row { grid-template-columns: minmax(0, 1fr) 36px; }
      .expense-row .input-wrap, .expense-row .expense-frequency { grid-column: 1 / -1; }
      .expense-row .remove-expense { grid-column: 2; grid-row: 1; }
      .chart-wrap { grid-template-columns: 1fr; }
    }