:root {
      --bg-1: #edf4f2;
      --bg-2: #dcebe7;
      --bg-3: #f8f1df;
      --panel: rgba(255, 255, 255, 0.84);
      --ink: #162a2a;
      --muted: #4d6362;
      --brand: #0b6e66;
      --brand-2: #c77a11;
      --line: #c7d8d2;
      --ok: #166534;
      --warn: #a16207;
      --bad: #991b1b;
      --shadow: 0 14px 38px rgba(10, 40, 36, 0.14);
      --radius: 16px;
      --ui-zoom: 1;
    }

    * { box-sizing: border-box; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(1000px 520px at -5% -8%, #fef4d8 0%, transparent 72%),
        radial-gradient(880px 460px at 105% -4%, #d8f2ec 0%, transparent 67%),
        linear-gradient(160deg, var(--bg-1), var(--bg-2) 62%, var(--bg-3));
      font-family: "Candara", "Gill Sans", "Trebuchet MS", sans-serif;
      font-size: 17px;
      line-height: 1.42;
      min-height: 100vh;
    }

    .wrap {
      max-width: none;
      width: 100%;
      margin: 22px auto;
      padding: 0 14px 22px;
      animation: fadeIn 520ms ease;
      zoom: var(--ui-zoom);
    }

    @supports not (zoom: 1) {
      .wrap {
        transform: scale(var(--ui-zoom));
        transform-origin: top center;
        width: calc(100% / var(--ui-zoom));
      }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .hero {
      background:
        radial-gradient(180% 120% at -20% -30%, rgba(255, 255, 255, 0.18), transparent 42%),
        linear-gradient(125deg, #103635, #1d5d58 42%, #2f7a6f 90%);
      color: #f4fbfa;
      border-radius: var(--radius);
      padding: 22px;
      box-shadow: var(--shadow);
      margin-bottom: 14px;
      border: 1px solid rgba(194, 227, 220, 0.35);
    }

    .hero h1 {
      margin: 0 0 8px;
      font-size: clamp(1.3rem, 2.2vw, 2rem);
      letter-spacing: 0.3px;
    }

    .hero p { margin: 0; line-height: 1.4; color: #d9eeeb; }

    .hero-tools {
      margin-top: 12px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }

    .runtime-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-right: 2px;
    }

    .runtime-badge-chip {
      display: inline-flex;
      align-items: center;
      min-height: 30px;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border: 1px solid rgba(255,255,255,0.28);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
    }

    .runtime-badge-chip--frontend {
      color: #fff6da;
      background: linear-gradient(135deg, rgba(145, 77, 7, 0.92), rgba(201, 118, 18, 0.92));
    }

    .runtime-badge-chip--api {
      color: #f4fffb;
      background: linear-gradient(135deg, rgba(17, 101, 92, 0.95), rgba(29, 146, 128, 0.95));
    }

    .top-actions {
      position: relative;
      display: inline-block;
      margin-top: 0;
    }

    .top-actions-trigger {
      border: 1px solid #8bb8b0;
      border-radius: 999px;
      background: linear-gradient(135deg, #f7fcfb, #e0f2ee);
      color: #164440;
      padding: 8px 14px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .top-actions-menu {
      position: absolute;
      top: calc(100% - 2px);
      left: 0;
      min-width: 250px;
      padding: 8px;
      border-radius: 12px;
      border: 1px solid #b6cbc6;
      background: rgba(244, 252, 249, 0.96);
      box-shadow: 0 10px 22px rgba(8, 40, 37, 0.2);
      display: none;
      z-index: 35;
      backdrop-filter: blur(7px);
    }

    .top-actions:hover .top-actions-menu,
    .top-actions.is-open .top-actions-menu {
      display: grid;
      gap: 6px;
    }

    .top-actions-menu button {
      width: 100%;
      text-align: left;
      padding: 8px 10px;
      border-radius: 10px;
    }

    .zoom-controls {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 7px;
      border-radius: 999px;
      border: 1px solid #a8c5bf;
      background: linear-gradient(145deg, rgba(246, 252, 250, 0.98), rgba(230, 243, 239, 0.98));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }

    /* ── COFFEE BUTTON (hero) ── */
    .hero-donate {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .hero-contacts {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .btn-contacts-hero {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 14px;
      border-radius: 999px;
      border: 1.5px solid #6ea8a0;
      background: linear-gradient(135deg, #e9f8f4, #d8f0ea);
      color: #1d5650;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      transition: background .15s, transform .1s, box-shadow .15s;
      box-shadow: 0 1px 4px rgba(33, 111, 102, 0.12);
      white-space: nowrap;
    }

    .btn-contacts-hero:hover {
      background: linear-gradient(135deg, #ddf4ef, #c8ebe3);
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(33, 111, 102, 0.2);
    }

    .hero-contacts-menu {
      position: absolute;
      top: calc(100% - 1px);
      right: 0;
      z-index: 42;
      min-width: 235px;
      display: none;
      gap: 6px;
      padding: 8px;
      border-radius: 12px;
      border: 1px solid #9fcac1;
      background: linear-gradient(150deg, #f3fcf9, #e4f3ee);
      box-shadow: 0 8px 20px rgba(23, 76, 70, 0.2);
    }

    .hero-contacts:hover .hero-contacts-menu,
    .hero-contacts.is-open .hero-contacts-menu {
      display: grid;
    }

    .hero-contacts-menu a {
      display: block;
      padding: 7px 9px;
      border-radius: 8px;
      color: #165d55;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.82rem;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid #c8ddd8;
    }

    .hero-contacts-menu a:hover {
      text-decoration: underline;
      background: #ffffff;
    }

    .btn-coffee-hero {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 7px 14px;
      border-radius: 999px;
      border: 1.5px solid #d49a30;
      background: linear-gradient(135deg, #fff8e8, #ffefc0);
      color: #7a4800;
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      text-decoration: none;
      transition: background .15s, transform .1s, box-shadow .15s;
      box-shadow: 0 1px 4px rgba(180,120,0,0.15);
      white-space: nowrap;
    }

    .btn-coffee-hero:hover {
      background: linear-gradient(135deg, #fff3cc, #ffd966);
      transform: translateY(-1px);
      box-shadow: 0 3px 10px rgba(180,120,0,0.22);
    }

    .hero-donate-menu {
      position: absolute;
      top: calc(100% - 1px);
      right: 0;
      z-index: 42;
      display: none;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border-radius: 12px;
      border: 1px solid #f0c36d;
      background: linear-gradient(135deg, #fff8ee 0%, #fff3e0 100%);
      box-shadow: 0 8px 20px rgba(120, 70, 8, 0.18);
    }

    .hero-donate:hover .hero-donate-menu,
    .hero-donate.is-open .hero-donate-menu {
      display: inline-flex;
    }

    .hero-donate-menu .btn-donate {
      font-size: 0.8rem;
      padding: 6px 12px;
      border-radius: 999px;
      line-height: 1;
    }

    /* ── FLOATING COFFEE ── */
    .coffee-float {
      position: fixed;
      bottom: 22px;
      right: 22px;
      z-index: 200;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 8px;
      transition: opacity .18s ease, transform .18s ease;
    }

    body.footer-visible .coffee-float {
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px);
    }

    .coffee-float-btn {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid #d49a30;
      background: linear-gradient(135deg, #fff8e8, #ffd96a);
      font-size: 1.5rem;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,0,0,0.18);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .15s, box-shadow .15s;
      flex-shrink: 0;
    }

    .coffee-float-btn:hover {
      transform: scale(1.12);
      box-shadow: 0 6px 20px rgba(180,120,0,0.32);
    }

    .coffee-float-card {
      background: #fff;
      border: 1.5px solid #f0c36d;
      border-radius: 14px;
      padding: 12px 14px;
      width: 230px;
      box-shadow: 0 8px 24px rgba(0,0,0,0.16);
      opacity: 0;
      transform: translateY(8px) scale(0.97);
      pointer-events: none;
      transition: opacity .2s, transform .2s;
      text-align: center;
    }

    .coffee-float:hover .coffee-float-card,
    .coffee-float.is-open .coffee-float-card,
    .coffee-float:focus-within .coffee-float-card,
    .coffee-float-card:hover {
      opacity: 1;
      transform: translateY(0) scale(1);
      pointer-events: auto;
    }

    .coffee-float-title {
      font-size: 0.88rem;
      font-weight: 700;
      color: #4a3000;
      margin-bottom: 4px;
    }

    .coffee-float-sub {
      font-size: 0.76rem;
      color: #7a5e2a;
      margin-bottom: 10px;
      line-height: 1.45;
    }

    .coffee-float-btns {
      display: flex;
      gap: 6px;
      justify-content: center;
    }

    .coffee-float-btns a {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      border-radius: 16px;
      font-size: 0.78rem;
      font-weight: 700;
      text-decoration: none;
      transition: opacity .15s;
    }

    .coffee-float-btns a:hover { opacity: 0.82; }
    .coffee-float-btns .cf-paypal { background: #0070ba; color: #fff; }
    .coffee-float-btns .cf-kofi   { background: #ff5e5b; color: #fff; }

    body.pdf-exporting .coffee-float,
    body.pdf-exporting .btn-coffee-hero { display: none !important; }

    .zoom-controls button {
      border-radius: 9px;
      border: 1px solid #9fbdb7;
      background: linear-gradient(180deg, #ffffff, #eef6f4);
      color: #184a45;
      font-weight: 800;
      min-width: 34px;
      padding: 6px 8px;
      line-height: 1;
      box-shadow: none;
    }

    .zoom-controls button:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
    }

    .zoom-level {
      min-width: 52px;
      text-align: center;
      font-size: 0.82rem;
      font-weight: 800;
      color: #1f4643;
      letter-spacing: 0.2px;
    }

    .prefs-controls {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 8px;
      border-radius: 12px;
      border: 1px solid #9ab9b2;
      background: rgba(245, 252, 250, 0.92);
    }

    .prefs-controls label {
      font-size: 0.74rem;
      font-weight: 700;
      color: #184844;
      margin-left: 2px;
    }

    .prefs-controls select {
      border-radius: 8px;
      border: 1px solid #a3c3bc;
      background: #fff;
      color: #173f3b;
      font-size: 0.76rem;
      font-weight: 700;
      padding: 4px 6px;
    }

    .grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 14px;
    }

    @media (min-width: 980px) {
      .grid { grid-template-columns: 1.15fr 0.85fr; }
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(8px);
    }

    .card h2 {
      margin: 0;
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      background: linear-gradient(90deg, rgba(249, 248, 242, 0.95), rgba(237, 246, 243, 0.95));
      font-size: 1.03rem;
      color: #253534;
      text-align: center;
    }

    .content { padding: 14px; }

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

    .spouse-support-card {
      border: 1px solid #c5d9d3;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(248, 252, 251, 0.98), rgba(238, 246, 243, 0.94));
      padding: 9px 10px;
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
      align-content: start;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
      position: relative;
      overflow: hidden;
    }

    .spouse-support-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, #119084, #7cc6bb);
      opacity: 0.85;
    }

    .spouse-support-card:focus-within {
      border-color: #98c6bc;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 0 0 2px rgba(15, 118, 109, 0.08);
      transform: translateY(-1px);
    }

    .spouse-support-card:hover {
      border-color: #a8cec4;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 3px 10px rgba(17, 85, 76, 0.08);
      transform: translateY(-1px);
    }

    .spouse-support-card .field {
      gap: 4px;
    }

    .spouse-support-card .field + .field {
      border-top: 1px dashed #cddfd9;
      padding-top: 8px;
    }

    .spouse-support-card .field label {
      font-size: 0.86rem;
      color: #45615d;
    }
    
    .shared-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 12px;
      padding: 10px;
      border: 1px solid #c7dad4;
      border-radius: 12px;
      background: linear-gradient(165deg, rgba(245, 251, 249, 0.95), rgba(235, 246, 243, 0.95));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    
    .spouse-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 10px;
    }
    
    .spouse-box {
      border: 1px solid #c8dad3;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(244, 250, 247, 0.92));
      padding: 10px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    
    .spouse-box h3 {
      margin: 0 0 8px;
      font-size: 0.95rem;
      color: #27403e;
    }

    .spouse-name-input {
      border: none;
      border-bottom: 2px dashed #74c3b9;
      background: transparent;
      font-size: 0.95rem;
      font-weight: 700;
      color: #27403e;
      width: 100%;
      outline: none;
      padding: 2px 0 3px;
      margin: 0 0 8px;
      display: block;
    }

    .spouse-name-input:focus {
      border-bottom-color: #0b6e66;
      background: rgba(11,110,102,0.05);
      border-radius: 4px 4px 0 0;
      padding-left: 4px;
    }

    .spouse-name-input::placeholder {
      color: #8aadaa;
      font-weight: 400;
      font-style: italic;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .field label {
      font-size: 0.88rem;
      color: var(--muted);
    }

    .income-summary-card {
      border: 1px solid #c8ddd7;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(249, 253, 252, 0.98), rgba(239, 247, 244, 0.95));
      padding: 9px 10px;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
      transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
      position: relative;
      overflow: hidden;
    }

    .income-summary-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: linear-gradient(180deg, #6ebdae, #b8ddd3);
      opacity: 0.9;
    }

    .income-summary-card:hover,
    .income-summary-card:focus-within {
      border-color: #a9cdc4;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 3px 10px rgba(19, 92, 83, 0.09);
      transform: translateY(-1px);
    }

    .income-summary-card > input {
      margin-top: 2px;
    }

    .income-monthly-meta {
      margin-top: 6px;
      padding: 8px 9px;
      border: 1px solid #d3e2dd;
      border-radius: 10px;
      background: linear-gradient(180deg, rgba(243, 249, 247, 0.96), rgba(236, 245, 242, 0.9));
    }

    .income-monthly-meta.is-hidden {
      display: none;
    }

    .income-monthly-meta-intro {
      font-size: 0.76rem;
      line-height: 1.35;
      color: #3f5e5a;
    }

    .income-monthly-meta-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 8px;
    }

    .income-monthly-meta-field {
      gap: 4px;
    }

    .income-monthly-meta-field label {
      font-size: 0.78rem;
    }

    .income-monthly-meta-field select,
    .income-monthly-meta-field input {
      min-width: 0;
    }

    .income-monthly-meta-note {
      margin-top: 7px;
      font-size: 0.74rem;
      line-height: 1.35;
      color: #29514c;
      font-weight: 600;
    }

    @media (max-width: 640px) {
      .top-inputs {
        grid-template-columns: 1fr;
      }

      .income-monthly-meta-grid {
        grid-template-columns: 1fr;
      }

      .income-summary-card,
      .spouse-support-card {
        padding: 8px;
        gap: 7px;
      }

      .spouse-support-card .field + .field {
        padding-top: 7px;
      }

      .spouse-support-card .field label {
        font-size: 0.84rem;
      }
    }

    .perm-inline-field {
      grid-column: 1 / -1;
    }

    .perm-inline-control {
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr) 96px;
      gap: 8px;
      align-items: center;
    }

    .perm-inline-control input[type="number"] {
      text-align: center;
      padding: 8px 6px;
      font-size: 0.9rem;
      border-radius: 12px;
      border-color: #bfd8d2;
      background: linear-gradient(180deg, #ffffff, #f0f8f6);
      font-weight: 800;
      color: #114c45;
    }

    .perm-days-bar {
      display: flex;
      height: 34px;
      border-radius: 17px;
      overflow: hidden;
      margin-top: 0;
      box-shadow: inset 0 1px 2px rgba(12, 61, 56, 0.15), 0 2px 6px rgba(0, 0, 0, 0.1);
      position: relative;
      cursor: ew-resize;
      border: 1px solid #b9d6cf;
      background:
        radial-gradient(120% 160% at 0% 0%, rgba(229, 247, 242, 0.8), transparent 58%),
        radial-gradient(120% 160% at 100% 0%, rgba(255, 241, 214, 0.8), transparent 58%),
        linear-gradient(180deg, #fafdfc, #eef7f5);
      user-select: none;
      touch-action: none;
    }

    .perm-days-half {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: 800;
      color: #153a36;
      text-shadow: none;
      transition: width 0.18s ease;
      white-space: nowrap;
      overflow: hidden;
      letter-spacing: 0.02em;
    }

    .perm-days-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 74px;
      padding: 2px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.86);
      border: 1px solid #c6ded8;
      box-shadow: 0 1px 3px rgba(17, 74, 68, 0.12);
      line-height: 1;
      font-size: 0.78rem;
      font-weight: 900;
    }

    .perm-days-half--left {
      background: linear-gradient(90deg, #2b9d8e, #6cb9a9);
      justify-content: flex-start;
      padding-left: 8px;
    }

    .perm-days-half--right {
      background: linear-gradient(90deg, #dfb264, #cb8a2d);
      color: #5d3d11;
      justify-content: flex-end;
      padding-right: 8px;
    }

    .perm-days-center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 0.7rem;
      font-weight: 900;
      color: #114c45;
      background: #ffffff;
      border: 1px solid #b8d5ce;
      border-radius: 999px;
      padding: 1px 7px;
      white-space: nowrap;
      pointer-events: none;
      z-index: 3;
    }

    .perm-days-thumb {
      position: absolute;
      top: 50%;
      left: var(--perm-left, 40%);
      width: 22px;
      height: 22px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      border: 2px solid #ffffff;
      background: radial-gradient(circle at 35% 30%, #ffffff 0%, #e8f8f5 42%, #177a6f 100%);
      box-shadow: 0 3px 9px rgba(13, 70, 64, 0.35);
      pointer-events: none;
      z-index: 4;
    }

    .perm-days-bar:focus-visible {
      outline: 2px solid #0f766d;
      outline-offset: 2px;
    }

    .perm-calendar {
      margin-top: 10px;
      border: 1px solid #c8ddd8;
      border-radius: 12px;
      background: linear-gradient(180deg, #f8fcfb, #edf6f4);
      padding: 8px 10px;
    }

    .perm-calendar > summary {
      list-style: none;
      cursor: pointer;
    }

    .perm-calendar > summary::-webkit-details-marker {
      display: none;
    }

    .perm-calendar[open] > summary {
      margin-bottom: 8px;
    }

    .perm-calendar-content {
      padding-top: 2px;
    }

    .perm-calendar-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .perm-calendar-title {
      font-size: 0.87rem;
      font-weight: 700;
      color: #134b45;
    }

    .perm-calendar-note {
      margin-top: 2px;
      font-size: 0.78rem;
      color: #4a6662;
      max-width: 620px;
    }

    .perm-calendar-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .perm-calendar-actions label {
      font-size: 0.8rem;
      font-weight: 600;
      color: #1e5049;
    }

    #permCalendarMonth {
      min-width: 148px;
    }

    #btnPermCalendarReset {
      padding: 7px 10px;
      font-size: 0.78rem;
    }

    .perm-calendar-legend {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }

    .legend-pill {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: 0.76rem;
      font-weight: 700;
      border: 1px solid transparent;
    }

    .legend-pill-c1 {
      background: #d9f0eb;
      color: #0f5a53;
      border-color: #9ecfc5;
    }

    .legend-pill-c2 {
      background: #f8e8cf;
      color: #77501a;
      border-color: #dfbe87;
    }

    .perm-calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 5px;
    }

    .perm-cal-h {
      text-align: center;
      font-size: 0.74rem;
      color: #4f6c67;
      font-weight: 700;
      padding-bottom: 3px;
    }

    .perm-cal-day {
      border-radius: 9px;
      border: 1px solid #c6d8d4;
      background: #ffffff;
      min-height: 34px;
      font-size: 0.82rem;
      font-weight: 700;
      color: #264540;
      cursor: pointer;
      transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    }

    .perm-cal-day:hover {
      transform: translateY(-1px);
      box-shadow: 0 2px 6px rgba(22, 73, 67, 0.18);
    }

    .perm-cal-day.c1 {
      background: linear-gradient(180deg, #d9f0eb, #b8dfd6);
      border-color: #86c4b7;
      color: #0f544d;
    }

    .perm-cal-day.c2 {
      background: linear-gradient(180deg, #f8e8cf, #f0d3a1);
      border-color: #d9b57d;
      color: #6b4717;
    }

    .perm-cal-day.empty {
      background: transparent;
      border: none;
      cursor: default;
      box-shadow: none;
      transform: none;
    }

    .perm-cal-day:focus-visible {
      outline: 2px solid #0f766d;
      outline-offset: 1px;
    }

    .perm-calendar-summary {
      margin-top: 8px;
      font-size: 0.82rem;
      color: #22413c;
      font-weight: 600;
    }

    .mode-guideline {
      margin-top: 6px;
      font-size: 0.78rem;
      line-height: 1.35;
      color: #3d5250;
      display: none;
    }

    .mode-guideline a {
      color: #0b625b;
      font-weight: 600;
      text-decoration: underline;
    }

    .extra-box {
      margin-top: 12px;
      border: 1px solid #c8ddd8;
      border-radius: 12px;
      background: linear-gradient(180deg, #f8fcfb, #edf6f4);
      padding: 10px;
    }

    .extra-box-title {
      font-size: 0.9rem;
      font-weight: 700;
      color: #154640;
    }

    .extra-box-note {
      margin-top: 2px;
      font-size: 0.78rem;
      color: #4a6662;
    }

    .extra-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 8px;
    }

    .extra-monthly {
      margin-top: 5px;
      font-size: 0.8rem;
      font-weight: 700;
      color: #184a44;
    }

    .extra-box-first-home {
      position: relative;
      overflow: hidden;
      background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.92), rgba(242, 252, 250, 0.96) 46%, rgba(246, 251, 255, 0.94)),
        repeating-linear-gradient(135deg, rgba(27, 141, 127, 0.035) 0 10px, rgba(216, 154, 53, 0.03) 10px 20px);
      border: 1px solid rgba(27, 141, 127, 0.2);
      box-shadow: 0 8px 20px rgba(16, 88, 79, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
      transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
    }

    .extra-box-first-home:hover {
      transform: translateY(-2px);
      border-color: rgba(27, 141, 127, 0.32);
      box-shadow: 0 14px 28px rgba(16, 88, 79, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .extra-box-first-home::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(115deg, rgba(255, 255, 255, 0.24), transparent 44%, rgba(61, 181, 160, 0.11) 72%, transparent 100%);
      pointer-events: none;
    }

    .extra-box-first-home::after {
      content: "";
      position: absolute;
      inset: -40% -20% auto;
      height: 180px;
      background: radial-gradient(circle at 50% 50%, rgba(61, 181, 160, 0.16), rgba(216, 154, 53, 0.08) 45%, transparent 70%);
      pointer-events: none;
      animation: first-home-aurora 7s ease-in-out infinite alternate;
    }

    .extra-box-first-home .extra-box-title::before {
      content: '🏠 ';
      margin-right: 4px;
    }

    .extra-box-first-home .extra-box-title {
      font-size: 0.96rem;
      font-weight: 800;
      letter-spacing: 0.25px;
      color: #114942;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    }

    .extra-box-first-home .extra-box-note {
      margin-top: 4px;
      padding-left: 11px;
      border-left: 3px solid rgba(27, 141, 127, 0.35);
      color: #2f5853;
    }

    .extra-box-first-home .extra-grid {
      position: relative;
      z-index: 1;
      gap: 8px 10px;
    }

    .extra-box-first-home .first-home-split-field {
      grid-column: 1 / -1;
    }

    .extra-box-first-home .first-home-mortgage-table-field {
      grid-column: 1 / -1;
    }

    .first-home-mortgage-table-wrap {
      overflow-x: hidden;
      padding-bottom: 2px;
    }

    .first-home-mortgage-table {
      width: 100%;
      min-width: 0;
      border-collapse: collapse;
      table-layout: fixed;
      border: 1px solid rgba(27, 141, 127, 0.16);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.55);
    }

    .first-home-mortgage-table th:nth-child(1),
    .first-home-mortgage-table td:nth-child(1) {
      width: 22%;
    }

    .first-home-mortgage-table th:nth-child(2),
    .first-home-mortgage-table td:nth-child(2) {
      width: 22%;
    }

    .first-home-mortgage-table th:nth-child(3),
    .first-home-mortgage-table td:nth-child(3) {
      width: 14%;
    }

    .first-home-mortgage-table th:nth-child(4),
    .first-home-mortgage-table td:nth-child(4) {
      width: 30%;
    }

    .first-home-mortgage-table th:nth-child(5),
    .first-home-mortgage-table td:nth-child(5) {
      width: 12%;
    }

    .first-home-mortgage-table th {
      text-align: left;
      font-size: 0.68rem;
      color: #2a5954;
      font-weight: 800;
      padding: 7px 8px 6px;
      background: linear-gradient(180deg, rgba(232, 246, 243, 0.95), rgba(242, 249, 247, 0.92));
      border-bottom: 1px solid rgba(27, 141, 127, 0.12);
    }

    .first-home-mortgage-table td {
      padding: 7px;
      border-top: 1px solid rgba(27, 141, 127, 0.08);
    }

    .first-home-mortgage-table th + th,
    .first-home-mortgage-table td + td {
      border-left: 1px solid rgba(27, 141, 127, 0.08);
    }

    .first-home-mortgage-table .label-row {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
      line-height: 1.15;
    }

    .first-home-mortgage-table input {
      width: 100%;
      min-width: 0;
    }

    .first-home-mortgage-table select {
      width: 100%;
      min-width: 0;
    }

    .first-home-mortgage-table-check-col {
      min-width: 88px;
    }

    .first-home-mortgage-table-check-cell {
      text-align: center;
      vertical-align: middle;
    }

    .first-home-mortgage-table-check-cell input[type="checkbox"] {
      width: 22px;
      height: 22px;
      margin: 0;
    }

    @media (max-width: 980px) {
      .first-home-mortgage-table-wrap {
        overflow-x: auto;
      }

      .first-home-mortgage-table {
        min-width: 900px;
      }
    }

    .extra-box-first-home .field {
      border-radius: 12px;
      padding: 8px 9px 7px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(241, 249, 247, 0.58));
      border: 1px solid rgba(27, 141, 127, 0.12);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
      transition: transform 0.2s ease, filter 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .extra-box-first-home .field:focus-within {
      transform: translateY(-1px);
      filter: saturate(1.04);
      border-color: rgba(27, 141, 127, 0.32);
      box-shadow: 0 8px 16px rgba(22, 104, 93, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.84);
    }

    .extra-box-first-home .field input[type="number"],
    .extra-box-first-home .field input[type="date"],
    .extra-box-first-home .field select {
      border-width: 1.5px;
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

    .extra-box-first-home #primaCasaMutuoEnabled {
      width: 20px;
      height: 20px;
      accent-color: #0e9886;
      margin-top: 6px;
      box-shadow: 0 0 0 4px rgba(14, 152, 134, 0.14);
      border-radius: 6px;
    }

    .extra-box-first-home .field input[type="number"]:focus,
    .extra-box-first-home .field input[type="date"]:focus,
    .extra-box-first-home .field select:focus {
      border-color: rgba(27, 141, 127, 0.4);
      box-shadow: 0 0 0 3px rgba(27, 141, 127, 0.14), 0 1px 0 rgba(255, 255, 255, 0.85) inset;
      background: linear-gradient(180deg, #ffffff, #f4fffd);
    }

    .mortgage-split-slider {
      position: relative;
      overflow: hidden;
      margin-top: 12px;
      border: 1.5px solid rgba(27, 141, 127, 0.2);
      border-radius: 16px;
      background:
        radial-gradient(120% 160% at 0% 0%, rgba(229, 247, 242, 0.6), transparent 58%),
        radial-gradient(120% 160% at 100% 0%, rgba(255, 241, 214, 0.6), transparent 58%),
        linear-gradient(180deg, #fafffe, #f2f8f7);
      padding: 14px;
      display: grid;
      grid-template-columns: minmax(170px, 0.9fr) minmax(380px, 2.9fr) minmax(170px, 0.9fr);
      gap: 10px;
      align-items: center;
      box-shadow: 0 10px 18px rgba(27, 141, 127, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.65);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .mortgage-split-slider::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(112deg, transparent 30%, rgba(255, 255, 255, 0.55) 46%, transparent 58%);
      transform: translateX(-120%);
      transition: transform 0.5s ease;
      pointer-events: none;
    }

    .mortgage-split-slider:hover {
      box-shadow: 0 14px 28px rgba(27, 141, 127, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.86);
      border-color: rgba(27, 141, 127, 0.3);
    }

    .mortgage-split-slider:hover::after {
      transform: translateX(120%);
    }

    .mortgage-split-slider.is-disabled {
      opacity: 0.55;
      filter: grayscale(0.4);
    }

    .mortgage-split-side {
      border: 1.5px solid rgba(27, 141, 127, 0.15);
      border-radius: 14px;
      padding: 12px;
      background: linear-gradient(135deg, #ffffff 0%, #f5fbf9 100%);
      min-height: 74px;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 4px;
      text-align: center;
      box-shadow: 0 2px 6px rgba(27, 141, 127, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.7);
      transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
      position: relative;
      overflow: hidden;
    }

    .mortgage-split-side::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: radial-gradient(120% 200% at 50% 0%, rgba(255, 255, 255, 0.4), transparent 70%);
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.28s ease;
    }

    .mortgage-split-side:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(27, 141, 127, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.9);
      border-color: rgba(27, 141, 127, 0.25);
    }

    .mortgage-split-side:hover::before {
      opacity: 1;
    }

    .mortgage-split-side-left {
      box-shadow: 0 2px 6px rgba(27, 141, 127, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.7), inset 3px 0 0 #1b8d7f;
      background: linear-gradient(135deg, #effaf8 0%, #e5f5f1 100%);
    }

    .mortgage-split-side-left:hover {
      box-shadow: 0 6px 16px rgba(27, 141, 127, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset 3px 0 0 #1b8d7f;
      background: linear-gradient(135deg, #f0faf8 0%, #e8f7f4 100%);
    }

    .mortgage-split-side-right {
      box-shadow: 0 2px 6px rgba(27, 141, 127, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.7), inset -3px 0 0 #d89a35;
      text-align: center;
      background: linear-gradient(135deg, #fef9f1 0%, #fdf5e8 100%);
    }

    .mortgage-split-side-right:hover {
      box-shadow: 0 6px 16px rgba(27, 141, 127, 0.12), inset 0 1px 2px rgba(255, 255, 255, 0.9), inset -3px 0 0 #d89a35;
      background: linear-gradient(135deg, #fefaf4 0%, #fef7ed 100%);
    }

    .mortgage-split-name {
      font-size: 0.92rem;
      font-weight: 800;
      color: #1a3a36;
      overflow-wrap: anywhere;
      letter-spacing: 0.2px;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
      text-align: center;
    }

    .mortgage-split-amount {
      font-size: 1.28rem;
      font-weight: 900;
      color: #0b4440;
      letter-spacing: 0.3px;
      background: linear-gradient(135deg, #0f6659, #1b8d7f);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 1px 2px rgba(27, 141, 127, 0.2));
      text-align: center;
    }

    .mortgage-split-side-right .mortgage-split-amount {
      background: linear-gradient(135deg, #c86d28, #d89a35);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .mortgage-split-range-wrap {
      position: relative;
      padding: 30px 0 8px;
      --split-left: 50%;
    }

    .mortgage-split-range-controls {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) 42px;
      gap: 8px;
      align-items: center;
    }

    .mortgage-split-nudge {
      height: 38px;
      width: 38px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      border: 1.5px solid rgba(27, 141, 127, 0.3);
      background: radial-gradient(circle at 30% 30%, #ffffff 0%, #ecfaf6 44%, #dff4ef 100%);
      color: #0f6056;
      font-size: 17px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(17, 93, 84, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .mortgage-split-nudge:hover {
      transform: translateY(-1px) scale(1.06);
      border-color: rgba(27, 141, 127, 0.44);
      box-shadow: 0 7px 16px rgba(17, 93, 84, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    }

    .mortgage-split-nudge:active {
      transform: translateY(0) scale(0.98);
    }

    .mortgage-split-slider.is-disabled .mortgage-split-nudge {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    .mortgage-split-range-wrap input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 10px;
      border-radius: 999px;
      background: linear-gradient(90deg,
        #16a396 0%,
        #3db5a0 20%,
        #6cbba8 var(--split-left),
        #ddb05a var(--split-left),
        #d89a35 80%,
        #c27f1d 100%);
      outline: none;
      margin: 0;
      transition: background 0.2s ease;
      box-shadow: 0 2px 4px rgba(22, 163, 150, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    }

    .mortgage-split-range-wrap input[type="range"]:hover {
      box-shadow: 0 3px 8px rgba(22, 163, 150, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
    }

    .mortgage-split-range-wrap input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 3px solid #ffffff;
      background: radial-gradient(circle at 30% 25%, #ffffff 0%, #f0faf8 30%, #16a396 100%);
      box-shadow: 0 4px 12px rgba(13, 70, 64, 0.4), 0 0 0 1px rgba(27, 141, 127, 0.15);
      cursor: grab;
      transition: all 0.2s ease;
    }

    .mortgage-split-range-wrap input[type="range"]::-webkit-slider-thumb:hover {
      width: 28px;
      height: 28px;
      box-shadow: 0 6px 16px rgba(13, 70, 64, 0.5), 0 0 0 2px rgba(27, 141, 127, 0.2);
    }

    .mortgage-split-range-wrap input[type="range"]::-webkit-slider-thumb:active {
      cursor: grabbing;
    }

    .mortgage-split-range-wrap input[type="range"]::-moz-range-thumb {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 3px solid #ffffff;
      background: radial-gradient(circle at 30% 25%, #ffffff 0%, #f0faf8 30%, #16a396 100%);
      box-shadow: 0 4px 12px rgba(13, 70, 64, 0.4), 0 0 0 1px rgba(27, 141, 127, 0.15);
      cursor: grab;
      transition: all 0.2s ease;
    }

    .mortgage-split-range-wrap input[type="range"]::-moz-range-thumb:hover {
      width: 28px;
      height: 28px;
      box-shadow: 0 6px 16px rgba(13, 70, 64, 0.5), 0 0 0 2px rgba(27, 141, 127, 0.2);
    }

    .mortgage-split-center {
      position: absolute;
      top: -14px;
      left: var(--split-left);
      transform: translateX(-50%);
      font-size: 0.92rem;
      font-weight: 900;
      color: #0f544d;
      background: linear-gradient(135deg, #ffffff, #f5fbf9);
      border: 1.5px solid rgba(27, 141, 127, 0.2);
      border-radius: 999px;
      padding: 4px 11px;
      white-space: nowrap;
      box-shadow: 0 2px 6px rgba(27, 141, 127, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.6);
      transition: all 0.2s ease;
      letter-spacing: 0.2px;
      animation: split-center-breathe 2.6s ease-in-out infinite;
      z-index: 3;
      pointer-events: none;
    }

    @keyframes first-home-aurora {
      0% { transform: translate3d(-5%, -12%, 0) scale(1); }
      100% { transform: translate3d(6%, -6%, 0) scale(1.08); }
    }

    @keyframes split-center-breathe {
      0%, 100% { box-shadow: 0 2px 6px rgba(27, 141, 127, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.6); }
      50% { box-shadow: 0 5px 14px rgba(27, 141, 127, 0.24), inset 0 1px 2px rgba(255, 255, 255, 0.75); }
    }

    #primaCasaMutuoSplitInfo {
      margin-top: 7px;
      font-size: 0.95rem;
      font-weight: 700;
      color: #174e47;
      background: linear-gradient(90deg, rgba(22, 163, 150, 0.12), rgba(216, 154, 53, 0.12));
      border: 1px solid rgba(22, 163, 150, 0.14);
      border-radius: 999px;
      padding: 7px 12px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .first-home-split-field > .label-row {
      font-size: 1.1rem;
      font-weight: 800;
      color: #114b44;
    }
    
    .label-row {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    
    .hint {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 999px;
      background: #dceeea;
      color: #0f6760;
      font-size: 0.72rem;
      font-weight: 700;
      cursor: help;
      border: 1px solid #b7d7d1;
      line-height: 1;
    }

    input[type="number"] {
      width: 100%;
      border: 1px solid #bbcdc8;
      border-radius: 10px;
      padding: 9px 10px;
      font-size: 0.95rem;
      background: linear-gradient(180deg, #ffffff, #f4f9f7);
      color: #152020;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    input[type="text"],
    input[type="password"] {
      width: 100%;
      border: 1px solid #bbcdc8;
      border-radius: 10px;
      padding: 9px 10px;
      font-size: 0.95rem;
      background: linear-gradient(180deg, #ffffff, #f4f9f7);
      color: #152020;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    select {
      width: 100%;
      border: 1px solid #bbcdc8;
      border-radius: 10px;
      padding: 9px 10px;
      font-size: 0.95rem;
      background: linear-gradient(180deg, #ffffff, #f4f9f7);
      color: #152020;
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    input[type="number"]:focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    select:focus {
      outline: 2px solid rgba(15, 118, 110, 0.2);
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(11, 110, 102, 0.12);
    }

    input[type="range"] {
      width: 100%;
      accent-color: var(--brand);
    }

    input[readonly] {
      background: #eef2ee;
      color: #455a57;
      border-style: dashed;
    }

    input:disabled,
    select:disabled {
      background: #eef2ee;
      color: #6a7876;
      border-style: dashed;
      cursor: not-allowed;
      opacity: 0.9;
    }

    .spese-table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      margin-top: 8px;
      font-size: 0.92rem;
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid #cfe0da;
    }

    .spese-table th,
    .spese-table td {
      border-bottom: 1px dashed #cad9d4;
      padding: 8px 6px;
      text-align: left;
      vertical-align: middle;
    }

    .spese-table th {
      color: #264846;
      font-size: 0.84rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      background: #edf7f4;
    }

    .spese-table input { min-width: 86px; }

    .spese-table .col-actions {
      width: 78px;
      text-align: center;
    }

      .spese-col-label {
        width: 18%;
      }

    .spese-remove-btn {
      padding: 6px 10px;
      font-size: 0.8rem;
      line-height: 1;
    }

    .spese-input-wrap {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 4px;
      min-width: 0;
    }

    .spese-input-main {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }

    .spese-input-wrap input {
      flex: 1 1 auto;
      min-width: 66px;
      padding: 6px 7px;
      font-size: 0.86rem;
    }

    .spese-detail-btn {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      flex-shrink: 0;
      height: 26px;
      max-width: 26px;
      border-radius: 13px;
      padding: 0;
      overflow: hidden;
      white-space: nowrap;
      line-height: 1;
      transition: max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                  padding-right 0.22s ease,
                  background-color 0.15s ease,
                  color 0.15s ease,
                  border-color 0.15s ease;
      cursor: pointer;
    }

    .spese-detail-btn::before {
      content: "✎";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      min-width: 26px;
      font-size: 12px;
      font-weight: 900;
      margin-right: 0;
    }

    .spese-detail-label {
      font-size: 0.72rem;
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      transition: max-width 0.22s ease, padding-right 0.22s ease;
      padding-right: 0;
      line-height: 1;
    }

    .spese-detail-btn:hover,
    .spese-detail-btn.is-open {
      max-width: 110px;
      padding-right: 9px;
      border-color: #0b6e66;
      box-shadow: inset 0 0 0 1px rgba(11, 110, 102, 0.2);
    }

    .spese-detail-btn:hover .spese-detail-label,
    .spese-detail-btn.is-open .spese-detail-label {
      max-width: 80px;
    }

    .spese-detail-btn.has-note {
      max-width: 110px;
      padding-right: 9px;
      border-color: #0b6e66;
      color: #ffffff;
      background: linear-gradient(135deg, #0b6e66, #149a8f);
      font-weight: 700;
      box-shadow: 0 0 0 1px rgba(11, 110, 102, 0.28), 0 3px 8px rgba(11, 110, 102, 0.18);
    }

    .spese-detail-btn.has-note::before {
      content: "✓";
      font-size: 12px;
      font-weight: 900;
    }

    .spese-detail-btn.has-note .spese-detail-label {
      max-width: 80px;
    }

    .spese-detail-wrap {
      margin-top: 2px;
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .spese-detail-text {
      width: 100%;
      min-height: 52px;
      max-height: 178px;
      resize: none;
      overflow-y: hidden;
      border-radius: 8px;
      border: 1px solid #c8dad4;
      background: #f9fcfb;
      padding: 6px 8px;
      font-size: 0.78rem;
      line-height: 1.3;
      color: #204644;
    }

    .spese-detail-store {
      display: none;
    }

    .spese-detail-grid-wrap {
      border: 1px solid #c8dad4;
      border-radius: 8px;
      background: #f9fcfb;
      padding: 6px;
    }

    .spese-detail-grid {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      font-size: 0.72rem;
      color: #204644;
    }

    .spese-detail-col-amount,
    .spese-detail-col-due {
      width: 28%;
    }

    .spese-detail-col-actions {
      width: 32px;
    }

    .spese-detail-grid th {
      text-align: left;
      font-size: 0.68rem;
      font-weight: 800;
      color: #3b6964;
      padding: 2px 4px 5px;
    }

    .spese-detail-grid td {
      padding: 2px;
      vertical-align: middle;
    }

    .spese-detail-cell-input {
      width: 100%;
      min-width: 0;
      border: 1px solid #bfd5d0;
      border-radius: 6px;
      background: #ffffff;
      color: #214b47;
      font-size: 0.72rem;
      padding: 3px 5px;
    }

    .spese-detail-actions-cell {
      width: 32px;
      text-align: center;
    }

    .spese-detail-row-remove {
      width: 20px;
      height: 20px;
      border: 1px solid #c4d7d2;
      border-radius: 5px;
      background: #ffffff;
      color: #355b57;
      font-weight: 800;
      font-size: 0.78rem;
      line-height: 1;
      cursor: pointer;
    }

    .spese-detail-row-remove:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .spese-detail-add-row {
      margin-top: 6px;
      padding: 3px 8px;
      font-size: 0.67rem;
    }

    .spese-detail-note {
      width: 100%;
      margin-top: 6px;
      border: 1px solid #bfd5d0;
      border-radius: 6px;
      background: #ffffff;
      color: #214b47;
      font-size: 0.72rem;
      line-height: 1.3;
      padding: 6px 7px;
      resize: vertical;
      min-height: 46px;
    }

    .spese-detail-counter {
      margin-top: 3px;
      font-size: 0.66rem;
      color: #56716d;
      text-align: right;
      font-weight: 700;
    }

    .spese-detail-counter.is-limit {
      color: #9d3c2f;
    }

    .spese-partial {
      font-size: 0.66rem;
      color: #2f4745;
      font-weight: 700;
      white-space: nowrap;
    }

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

    .auth-menu-wrap {
      position: relative;
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
    }

    .auth-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid #adc7c2;
      background: linear-gradient(145deg, #f6fbfa, #e4f2ef);
      color: #1f3a38;
      font-weight: 800;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.85);
    }

    .auth-toggle.logged {
      background: #e2f3ef;
      border-color: #9ecdc3;
      color: #15534e;
    }

    .auth-toggle svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
    }

    .auth-dropdown {
      position: absolute;
      top: 44px;
      right: 0;
      width: min(900px, 100%);
      z-index: 30;
      display: none;
    }

    .auth-menu-wrap.open .auth-dropdown {
      display: block;
    }

    .auth-dropdown .auth-box {
      margin-bottom: 0;
      box-shadow: 0 10px 24px rgba(14, 39, 37, 0.14);
    }

    .auth-box {
      border: 1px solid #c6d8d2;
      border-radius: 12px;
      background: linear-gradient(170deg, rgba(248, 252, 251, 0.97), rgba(239, 248, 246, 0.95));
      padding: 10px;
      margin-bottom: 10px;
      backdrop-filter: blur(8px);
    }

    .auth-head {
      font-weight: 800;
      color: #254442;
      margin-bottom: 8px;
      font-size: 0.95rem;
    }

    .auth-mode-switch {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #c3d9d2;
      border-radius: 999px;
      padding: 3px;
      background: #edf6f3;
      margin-bottom: 8px;
    }

    .auth-mode-btn {
      border: none;
      border-radius: 999px;
      padding: 6px 12px;
      min-height: 0;
      box-shadow: none;
      background: transparent;
      color: #345553;
      font-size: 0.8rem;
      font-weight: 700;
    }

    .auth-mode-btn:hover {
      transform: none;
      filter: brightness(0.98);
    }

    .auth-mode-btn.is-active {
      background: linear-gradient(90deg, #0f7f75, #15998e);
      color: #fff;
    }

    .auth-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .auth-status {
      margin-top: 8px;
      font-size: 0.83rem;
      color: #385654;
      border: 1px solid #d3dfdb;
      border-radius: 10px;
      background: #ffffff;
      padding: 6px 8px;
    }

    .auth-status.error {
      color: #8e1f1f;
      border-color: #e1b2b2;
      background: #fff5f5;
    }

    .auth-verify {
      margin-top: 10px;
      padding-top: 8px;
      border-top: 1px dashed #c6d8d2;
    }

    .is-hidden {
      display: none !important;
    }

    button {
      border: 1px solid rgba(150, 178, 170, 0.38);
      border-radius: 999px;
      padding: 10px 16px;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.12s ease;
      box-shadow: 0 2px 7px rgba(17, 55, 50, 0.12);
    }

    button:hover { transform: translateY(-1px); }
    button:active { transform: translateY(0); }

    .btn-primary {
      background: linear-gradient(90deg, var(--brand), #149a8f);
      color: #fff;
    }

    .btn-secondary {
      background: linear-gradient(145deg, #f6faf6, #e6eee8);
      color: #223130;
      border: 1px solid #c6cdc3;
    }

    /* ── Feature gate ─────────────────────────────────────────────── */
    .gate-locked {
      position: relative;
      opacity: 0.62;
      cursor: pointer;
    }

    .gate-locked::after {
      content: "\uD83D\uDD12";
      position: absolute;
      top: 2px;
      right: 4px;
      font-size: 0.65rem;
      line-height: 1;
      pointer-events: none;
    }

    .gate-locked:hover {
      opacity: 0.85;
    }

    @keyframes gate-flash-anim {
      0%   { outline: 2px solid transparent; }
      30%  { outline: 2px solid #d04a2f; box-shadow: 0 0 0 3px rgba(208,74,47,0.22); }
      100% { outline: 2px solid transparent; }
    }

    .gate-flash {
      animation: gate-flash-anim 0.65s ease forwards;
    }

    /* ── Scenario Lab ─────────────────────────────────────────────── */
    .scenario-lab-card {
      margin-top: 14px;
    }

    .scenario-lab-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }

    .scenario-lab-empty {
      color: #6b7e78;
      font-style: italic;
      margin: 0;
    }

    .scenario-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    .scenario-table {
      border-collapse: collapse;
      width: 100%;
      font-size: 0.82rem;
    }

    .scenario-table th,
    .scenario-table td {
      border: 1px solid var(--line);
      padding: 6px 10px;
      text-align: center;
      vertical-align: middle;
    }

    .scenario-table thead th {
      background: linear-gradient(90deg, rgba(249,248,242,0.95), rgba(237,246,243,0.95));
      font-weight: 700;
    }

    .scenario-table td.metric-label,
    .scenario-table th.metric-label {
      text-align: left;
      font-weight: 600;
      background: rgba(243,248,245,0.7);
      white-space: nowrap;
      min-width: 110px;
    }

    .scenario-col-head { min-width: 120px; }

    .scenario-badge {
      display: inline-block;
      background: var(--brand);
      color: #fff;
      border-radius: 4px;
      padding: 1px 7px;
      font-size: 0.74rem;
      font-weight: 700;
    }

    .scenario-val { min-width: 90px; white-space: nowrap; }

    .scenario-remove-btn {
      font-size: 0.72rem !important;
      padding: 2px 8px !important;
      margin-top: 4px;
      min-height: unset !important;
    }

    .delta-col, .delta-col-head { min-width: 76px; font-weight: 600; white-space: nowrap; }
    .delta-pos { color: #18855e; }
    .delta-neg { color: #c0392b; }
    .delta-zero { color: #7a8b80; }

    /* ── Spiegabilita ─────────────────────────────────────────────── */
    .spieg-panel { margin-top: 12px; }

    .spieg-details {
      border: 1px solid #bfd7cf;
      border-radius: 14px;
      overflow: hidden;
      background: linear-gradient(180deg, #fbfdfc, #f4f9f7);
      box-shadow: 0 8px 24px rgba(8, 74, 67, 0.08);
    }

    .spieg-title {
      cursor: pointer;
      padding: 10px 14px;
      background: linear-gradient(90deg, rgba(248, 247, 240, 0.95), rgba(229, 243, 238, 0.95));
      font-weight: 700;
      font-size: 0.92rem;
      line-height: 1.3;
      user-select: none;
      list-style: none;
      color: #194f48;
      border-bottom: 1px solid #d3e4de;
    }

    .spieg-title::-webkit-details-marker { display: none; }
    .spieg-title::before { content: "\25B8\0020"; font-size: 0.76rem; color: #1e6d63; }
    details[open] .spieg-title::before { content: "\25BE\0020"; }

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

    @media (max-width: 720px) {
      .spieg-grid { grid-template-columns: 1fr; }
    }

    .spieg-item {
      background: #f8fcfa;
      border: 1px solid #cfe3dc;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 0.82rem;
      min-width: 0;
    }

    .spieg-item--result {
      grid-column: 1 / -1;
      background: linear-gradient(120deg, #ebf8f2, #e3f4ed);
      border-color: #a5d2be;
    }

    .spieg-item-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 800;
      font-size: 0.73rem;
      color: #0f6a61;
      margin-bottom: 8px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .spieg-item-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border-radius: 999px;
      background: #e0f1eb;
      color: #0f6a61;
      font-size: 0.73rem;
      line-height: 1;
    }

    .spieg-item-body {
      display: grid;
      gap: 8px;
      line-height: 1.5;
      min-width: 0;
    }

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

    @media (max-width: 560px) {
      .spieg-people { grid-template-columns: 1fr; }
    }

    .spieg-person {
      border: 1px solid #d8e8e2;
      border-radius: 8px;
      background: #ffffff;
      padding: 8px;
      min-width: 0;
    }

    .spieg-person--left { border-left: 4px solid #1d7d72; }
    .spieg-person--right { border-left: 4px solid #bf7a1f; }

    .spieg-person-name {
      font-weight: 700;
      color: #204e48;
      margin-bottom: 2px;
      overflow-wrap: anywhere;
    }

    .spieg-person-value {
      font-size: 1rem;
      font-weight: 800;
      color: #0f6259;
      font-variant-numeric: tabular-nums;
    }

    .spieg-person-sub {
      margin-top: 2px;
      color: #5f7772;
      font-size: 0.74rem;
    }

    .spieg-equation {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
    }

    .spieg-pill {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: 999px;
      background: #e8f3ef;
      border: 1px solid #cbe1d9;
      color: #184a44;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      max-width: 100%;
      overflow-wrap: anywhere;
    }

    .spieg-pill--result {
      background: #dff3ea;
      border-color: #9dceb8;
      color: #0a6157;
    }

    .spieg-op {
      color: #6d817c;
      font-weight: 700;
    }

    .spieg-line--kv {
      display: grid;
      grid-template-columns: minmax(92px, 128px) minmax(0, 1fr);
      gap: 8px;
      align-items: baseline;
    }

    @media (max-width: 560px) {
      .spieg-line--kv { grid-template-columns: 1fr; gap: 2px; }
    }

    .spieg-k {
      font-weight: 700;
      color: #295b54;
      overflow-wrap: anywhere;
    }

    .spieg-v {
      color: #123f39;
      font-variant-numeric: tabular-nums;
      overflow-wrap: anywhere;
    }

    .spieg-item-body--result {
      background: transparent;
      border: none;
      border-radius: 0;
      padding: 0;
      gap: 8px;
    }

    .spieg-result-flow {
      font-weight: 800;
      color: #0f6a61;
      letter-spacing: 0.01em;
    }

    .spieg-result-formula {
      color: #284e49;
      overflow-wrap: anywhere;
      font-variant-numeric: tabular-nums;
    }

    .spieg-result-amount {
      font-size: 1.2rem;
      font-weight: 900;
      line-height: 1.2;
      color: #0e6b62;
      font-variant-numeric: tabular-nums;
    }

    .spieg-result-empty {
      font-size: 0.95rem;
      font-weight: 800;
      color: #0f6a61;
    }

    .spieg-no-transfer-badge {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 1.0rem;
      font-weight: 900;
      color: #0a5a52;
      background: linear-gradient(135deg, #dbf5ed, #c5eedf);
      border: 1.5px solid #7ec4b2;
      border-radius: 999px;
      padding: 9px 20px;
      letter-spacing: 0.1px;
      box-shadow: 0 2px 10px rgba(14, 90, 82, 0.14), inset 0 1px 0 rgba(255,255,255,0.7);
      margin-bottom: 10px;
    }

    .spieg-benefits-section {
      display: grid;
      gap: 6px;
    }

    .spieg-benefits-label {
      font-size: 0.71rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: #4e7068;
      display: flex;
      align-items: center;
      gap: 5px;
      padding-left: 2px;
    }

    .spieg-benefits-cards {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 5px;
    }

    .spieg-benefit-card {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr) auto;
      align-items: start;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid #b8d9cf;
      background: linear-gradient(135deg, rgba(255,255,255,0.97), rgba(240,250,246,0.92));
      font-size: 0.83rem;
      line-height: 1.35;
      box-shadow: 0 1px 4px rgba(16, 74, 68, 0.08);
    }

    .spieg-benefit-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #e3f5ef, #d0ede5);
      border: 1px solid #b6d9cf;
      font-size: 1.0em;
      flex-shrink: 0;
    }

    .spieg-benefit-label {
      font-weight: 600;
      color: #1f4642;
      word-break: break-word;
      min-width: 0;
      padding-top: 5px;
    }

    .spieg-benefit-amount {
      white-space: nowrap;
      font-size: 0.94rem;
      font-weight: 900;
      color: #0c5e55;
      font-variant-numeric: tabular-nums;
      background: rgba(11, 98, 88, 0.09);
      border-radius: 7px;
      padding: 2px 8px;
      border: 1px solid rgba(11, 98, 88, 0.14);
    }

    .spieg-benefits-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 7px 12px;
      border-radius: 9px;
      background: linear-gradient(135deg, #c8eee3, #aee3d4);
      border: 1.5px solid #7ec9b6;
      font-size: 0.8rem;
      font-weight: 700;
      color: #0a4c47;
    }

    .spieg-benefits-total strong {
      font-size: 1.05rem;
      font-weight: 900;
      color: #073e3a;
      font-variant-numeric: tabular-nums;
    }

      .sep-cost-warning {
        margin-top: 10px;
        border-radius: 12px;
        border: 1px dashed #d8b26d;
        background: linear-gradient(135deg, #fff7e7, #fff1d7);
        color: #835209;
        font-size: 0.86rem;
        font-weight: 700;
        padding: 10px 12px;
      }

      .sep-cost-warning-meta {
        margin-top: 6px;
        font-size: 0.8rem;
        color: #6f4c13;
        font-weight: 700;
      }

      .sep-cost-fill-btn {
        margin-top: 8px;
        width: fit-content;
        max-width: 100%;
      }

      .sep-cost-panel {
        margin-top: 10px;
        border-radius: 16px;
        border: 1.5px solid #e2a5a5;
        background:
          radial-gradient(120% 180% at 0% -20%, rgba(255, 241, 230, 0.75), transparent 58%),
          radial-gradient(120% 180% at 100% -20%, rgba(255, 228, 228, 0.72), transparent 56%),
          linear-gradient(145deg, #fff5f3, #ffeceb 52%, #fff6f0);
        box-shadow: 0 10px 24px rgba(130, 33, 33, 0.14);
        padding: 14px;
      }

      .sep-cost-title {
        margin: 0 0 10px;
        font-size: 1.01rem;
        font-weight: 900;
        color: #842d2d;
        letter-spacing: 0.2px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .sep-cost-title-icon {
        width: 24px;
        height: 24px;
        border-radius: 999px;
        background: rgba(140, 32, 32, 0.12);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
      }

      .sep-cost-hero {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 9px;
      }

      .sep-cost-stat {
        border-radius: 12px;
        border: 1px solid rgba(138, 44, 44, 0.16);
        background: rgba(255,255,255,0.82);
        padding: 8px 10px;
        display: grid;
        gap: 2px;
        min-width: 0;
      }

      .sep-cost-stat--primary {
        background: linear-gradient(130deg, rgba(255, 233, 232, 0.95), rgba(255, 244, 232, 0.92));
        border-color: rgba(170, 67, 46, 0.35);
      }

      .sep-cost-stat--secondary {
        background: linear-gradient(130deg, rgba(255, 245, 240, 0.95), rgba(255, 235, 231, 0.92));
        border-color: rgba(164, 61, 61, 0.28);
      }

      .sep-cost-stat-label {
        font-size: 0.72rem;
        font-weight: 800;
        color: #7a3d3d;
        text-transform: uppercase;
        letter-spacing: 0.04em;
      }

      .sep-cost-stat-value {
        font-size: 1.12rem;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      .sep-cost-section {
        display: grid;
        gap: 7px;
      }

      .sep-cost-section--grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .sep-cost-divider {
        height: 1px;
        margin: 8px 0;
        background: linear-gradient(90deg, rgba(153,33,33,0), rgba(153,33,33,0.28), rgba(153,33,33,0));
      }

      .sep-cost-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        border-radius: 9px;
        padding: 7px 9px;
        border: 1px solid rgba(145, 42, 42, 0.13);
        background: rgba(255, 255, 255, 0.72);
      }

      .sep-cost-row--em {
        background: linear-gradient(120deg, rgba(255, 228, 226, 0.86), rgba(255, 241, 225, 0.88));
        border-color: rgba(180, 72, 43, 0.32);
      }

      .sep-cost-label {
        font-size: 0.82rem;
        color: #6a3939;
        font-weight: 700;
        min-width: 0;
      }

      .sep-cost-value {
        font-size: 0.94rem;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        color: #5d2e2e;
      }

      .sep-cost-pill-wrap {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      .sep-cost-pill {
        border: 1px solid rgba(134, 40, 40, 0.18);
        border-radius: 11px;
        background: rgba(255,255,255,0.82);
        padding: 8px 10px;
        display: grid;
        gap: 2px;
      }

      .sep-cost-pill-label {
        font-size: 0.76rem;
        color: #714343;
        font-weight: 700;
        line-height: 1.2;
      }

      .sep-cost-pill-value {
        font-size: 1rem;
        font-weight: 900;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }

      @media (max-width: 720px) {
        .sep-cost-hero,
        .sep-cost-section--grid,
        .sep-cost-pill-wrap {
          grid-template-columns: 1fr;
        }
        .sep-cost-stat-value,
        .sep-cost-pill-value {
          white-space: normal;
        }
      }

      .sep-loss-negative {
        color: #9b1f1f;
      }

      .sep-loss-positive {
        color: #0d7a57;
      }

    @page {
      size: A4 landscape;
      margin: 8mm;
    }

    @media print {
      html, body {
        font-size: 11px;
      }

      body {
        background: #fff !important;
        color: #111;
      }

      .wrap {
        max-width: 100%;
        margin: 0;
        padding: 0;
      }

      .hero {
        padding: 6px 10px;
        margin-bottom: 4px;
        break-after: avoid;
        page-break-after: avoid;
      }

      .hero h1 {
        font-size: 15px;
        margin: 0 0 2px;
      }

      .hero p {
        font-size: 9px;
        line-height: 1.2;
      }

      .hero,
      .card,
      .live-box,
      .result-pill,
      .kpi-item,
      .note,
      details {
        box-shadow: none !important;
      }

      .toolbar,
      .auth-box,
      .auth-menu-wrap,
      .hint {
        display: none !important;
      }

      .grid {
        display: flex !important;
        flex-direction: row;
        gap: 8px;
        align-items: flex-start;
        break-before: avoid;
        page-break-before: avoid;
      }

      .card {
        border: 1px solid #cfcfcf;
        flex: 1 1 0;
        min-width: 0;
        break-inside: auto;
        page-break-inside: auto;
        margin-bottom: 0;
      }

      .grid > .card:first-child {
        flex: 1.25 1 0;
      }

      .grid > .card:last-child {
        flex: 0.85 1 0;
      }

      .card h2 {
        padding: 8px 10px;
        font-size: 13px;
      }

      .content {
        padding: 8px;
      }

      .shared-grid,
      .spouse-grid,
      .top-inputs,
      .live-columns,
      .live-grid,
      .kpi,
      .mini {
        gap: 6px;
      }

      .shared-grid {
        margin-bottom: 8px;
        padding: 6px;
      }

      .spouse-box {
        padding: 7px;
      }

      .spouse-box h3,
      .live-col h4,
      .live-title,
      summary {
        margin-bottom: 6px;
      }

      .field {
        gap: 3px;
      }

      .field label,
      .live-row,
      .note,
      .legal-footer {
        font-size: 10px;
      }

      .spese-table {
        font-size: 10px;
        margin-top: 4px;
      }

      .spese-table th,
      .spese-table td {
        padding: 4px 4px;
      }

      input[type="number"],
      select {
        border: 1px solid #cfcfcf;
        padding: 4px 6px;
        font-size: 10px;
      }

      .spese-count-title,
      .result-pill,
      .live-box,
      .note,
      details,
      .legal-footer {
        margin-top: 6px;
        margin-bottom: 6px;
        padding: 7px;
      }

      .result-pill .big {
        font-size: 16px;
      }

      .kpi-item {
        padding: 6px 8px;
      }

      .kpi-item span {
        font-size: 9px;
      }

      .kpi-item strong,
      .live-k strong {
        font-size: 12px;
        margin-top: 2px;
      }

      details {
        display: none;
      }

      .note {
        line-height: 1.25;
      }

      .legal-footer {
        margin-top: 4px;
      }
    }

    .kpi {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
      margin-bottom: 12px;
    }

    .kpi-item {
      border: 1px solid #c9dad4;
      border-radius: 10px;
      padding: 8px 10px;
      background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(244, 250, 247, 0.9));
        overflow: hidden;
        max-width: 100%;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }

    .kpi-item > span {
      font-size: 0.78rem;
      color: var(--muted);
      flex: 1;
      line-height: 1.3;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .kpi-item strong {
      font-size: 1.05rem;
      font-weight: 700;
      white-space: nowrap;
      text-align: right;
      min-width: 0;
    }

    .kpi-item--stacked {
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 5px;
    }

    .kpi-item--stacked > span {
      width: 100%;
      flex: none;
    }

    .kpi-item--stacked strong.kpi-covered-value {
      display: block;
      white-space: normal;
      text-align: left;
      width: 100%;
      min-height: 52px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .kpi-covered-caption {
      display: block;
      font-size: 0.9rem;
      line-height: 1.2;
    }

    .kpi-covered-amount {
      display: block;
      margin-top: 5px;
      font-size: clamp(1.5rem, 3.2vw, 2rem);
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0.01em;
    }

    .kpi-item--longtext {
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
    }

    .kpi-item--longtext > span {
      width: 100%;
      flex: none;
    }

    .kpi-longtext-value {
      margin: 0;
      width: 100%;
      white-space: normal;
      text-align: left;
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.42;
      overflow-wrap: anywhere;
      word-break: break-word;
      color: #9a5a00;
    }

    .kpi-longtext-value.ok { color: #0c6c52; }
    .kpi-longtext-value.warn { color: #9a5a00; }
    .kpi-longtext-value.bad { color: #b53c2f; }

    .spieg-details {
      border: 1px solid #bed9d4;
      border-radius: 12px;
      background: linear-gradient(180deg, #f4fbf9, #edf6f4);
      padding: 10px;
    }

    .spieg-title {
      font-weight: 800;
      color: #0f5d56;
      letter-spacing: 0.02em;
    }

    .spieg-grid {
      margin-top: 8px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .spieg-item {
      border: 1px dashed #b6d6cf;
      background: #ffffff;
      border-radius: 10px;
      padding: 8px;
    }

    .spieg-item--result {
      grid-column: 1 / -1;
      background: #f8fffd;
    }

    .spieg-item-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      font-weight: 700;
      color: #1a4f49;
      margin-bottom: 5px;
    }

    .spieg-item-body {
      font-size: 0.84rem;
      color: #2a4b47;
      line-height: 1.35;
    }

    .spieg-item-body--result {
      font-size: 0.92rem;
      font-weight: 600;
    }

    .spieg-line + .spieg-line {
      margin-top: 4px;
    }

    .spieg-help-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }

    .spieg-help-btn {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      border: 1px solid #8ebdb4;
      background: #def0eb;
      color: #0f5f58;
      font-size: 0.72rem;
      font-weight: 800;
      line-height: 1;
      cursor: help;
      padding: 0;
    }

    .spieg-help-tip {
      position: absolute;
      left: 22px;
      top: -8px;
      z-index: 40;
      min-width: 230px;
      max-width: 320px;
      padding: 8px 9px;
      border-radius: 8px;
      border: 1px solid #b3d3cb;
      background: #ffffff;
      color: #254944;
      font-size: 0.76rem;
      font-weight: 500;
      line-height: 1.35;
      box-shadow: 0 8px 22px rgba(10, 40, 36, 0.16);
      opacity: 0;
      transform: translateY(4px);
      pointer-events: none;
      transition: opacity 0.14s ease, transform 0.14s ease;
    }

    .spieg-help-wrap:hover .spieg-help-tip,
    .spieg-help-wrap:focus-within .spieg-help-tip {
      opacity: 1;
      transform: translateY(0);
    }

    .spieg-help-btn:focus-visible {
      outline: 2px solid #0f766d;
      outline-offset: 1px;
    }

    body.pdf-exporting {
      background: #ffffff !important;
    }

    body.pdf-exporting .wrap {
      margin: 0;
      padding: 0;
    }

    body.pdf-exporting .hero {
      padding: 7px 10px;
      margin-bottom: 5px;
      box-shadow: none !important;
    }

    body.pdf-exporting .hero p,
    body.pdf-exporting .zoom-controls,
    body.pdf-exporting .top-actions-menu,
    body.pdf-exporting .auth-menu-wrap,
    body.pdf-exporting .toolbar,
    body.pdf-exporting #expenseItemEditor,
    body.pdf-exporting .hint,
    body.pdf-exporting .legal-footer,
    body.pdf-exporting .donate-banner,
    body.pdf-exporting details {
      display: none !important;
    }

    body.pdf-exporting .grid {
      display: flex !important;
      flex-direction: row;
      gap: 8px;
      align-items: flex-start;
    }

    body.pdf-exporting .grid > .card:first-child {
      flex: 1.25 1 0;
    }

    body.pdf-exporting .grid > .card:last-child {
      flex: 0.85 1 0;
    }

    body.pdf-exporting .card,
    body.pdf-exporting .live-box,
    body.pdf-exporting .result-pill,
    body.pdf-exporting .kpi-item,
    body.pdf-exporting .note {
      box-shadow: none !important;
    }

    body.pdf-exporting .card h2 {
      padding: 8px 10px;
      font-size: 0.95rem;
    }

    body.pdf-exporting .content {
      padding: 8px;
    }

    body.pdf-exporting .shared-grid,
    body.pdf-exporting .spouse-grid,
    body.pdf-exporting .top-inputs,
    body.pdf-exporting .live-columns,
    body.pdf-exporting .live-grid,
    body.pdf-exporting .kpi {
      gap: 6px;
    }

    body.pdf-exporting .spese-count-title,
    body.pdf-exporting .result-pill,
    body.pdf-exporting .live-box,
    body.pdf-exporting .note {
      margin-top: 6px;
      margin-bottom: 6px;
      padding: 7px;
    }

    .kpi-item:not(.kpi-item--longtext) strong { font-size: 1.05rem; font-weight: 700; white-space: nowrap; }

    .result-pill {
      border-radius: 14px;
      padding: 14px;
      background:
        radial-gradient(120% 180% at 0% -20%, rgba(215, 243, 236, 0.95), transparent 56%),
        radial-gradient(120% 180% at 100% -20%, rgba(255, 237, 201, 0.92), transparent 56%),
        linear-gradient(165deg, #f7fcfb, #ebf6f3);
      border: 1px solid #afcfc7;
      box-shadow: 0 12px 26px rgba(17, 70, 64, 0.16);
      margin-bottom: 10px;
      position: relative;
    }

    .result-pill::after {
      content: "";
      position: absolute;
      inset: -28px auto auto -28px;
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(59, 170, 154, 0.2) 0%, rgba(59, 170, 154, 0) 70%);
      pointer-events: none;
    }

    .result-pill .big {
      font-size: 1.3rem;
      font-weight: 900;
      margin-top: 6px;
      line-height: 1.34;
      letter-spacing: 0.2px;
      color: #123b38;
    }

    .result-pill-head {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 0.71rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: #3a6560;
      padding-bottom: 9px;
      margin-bottom: 9px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }

    .result-transfer-dir {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, rgba(27, 110, 100, 0.11), rgba(27, 110, 100, 0.05));
      border: 1.5px solid rgba(27, 110, 100, 0.24);
      border-radius: 999px;
      padding: 6px 16px;
      margin-bottom: 10px;
      max-width: 100%;
    }

    .result-chip-name {
      font-weight: 800;
      font-size: 0.9rem;
      color: #124741;
      overflow-wrap: anywhere;
    }

    .result-chip-arr {
      font-size: 1.1rem;
      color: #1d7d72;
      font-weight: 900;
      flex-shrink: 0;
    }

    .result-transfer-value {
      display: block;
      font-size: 2.0rem;
      font-weight: 900;
      color: #0b5e57;
      line-height: 1.15;
      letter-spacing: -0.3px;
      text-shadow: 0 1px 0 rgba(255,255,255,0.75);
      font-variant-numeric: tabular-nums;
      margin-bottom: 4px;
    }

    .result-transfer-per {
      font-size: 0.48em;
      font-weight: 700;
      color: #2d7068;
      vertical-align: middle;
      margin-left: 2px;
    }

    .result-transfer-child {
      display: inline-block;
      margin-top: 2px;
      font-size: 0.78rem;
      color: #3d6b63;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      background: rgba(0,0,0,0.045);
      border-radius: 8px;
      padding: 3px 10px;
      border: 1px solid rgba(0,0,0,0.08);
    }

    .result-main-flow {
      display: block;
      font-size: 1.02rem;
      font-weight: 800;
      color: #124741;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      margin-bottom: 3px;
    }

    .result-main-amount {
      display: block;
      font-size: 1.68rem;
      font-weight: 900;
      color: #0b625b;
      text-shadow: 0 1px 0 rgba(255,255,255,0.7);
    }

    .result-main-line {
      display: block;
      font-size: 1.25rem;
      font-weight: 800;
      color: #1c3f3b;
      margin-bottom: 6px;
    }

    .result-main-sub {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.76rem;
      text-transform: uppercase;
      letter-spacing: 0.4px;
      font-weight: 900;
      color: #4e665f;
      background: rgba(255,255,255,0.78);
      border: 1px solid #bfd6d0;
      border-radius: 999px;
      padding: 3px 9px;
      margin-bottom: 0;
    }

    .result-benefits-box {
      display: grid;
      gap: 6px;
      margin-top: 8px;
    }

    .result-covered-summary {
      display: grid;
      gap: 4px;
      border: 1.5px solid #93d1bc;
      background: linear-gradient(140deg, #e7f6ef, #d4efdf);
      border-radius: 12px;
      padding: 9px 12px;
      margin-bottom: 8px;
      box-shadow: 0 2px 10px rgba(14, 90, 82, 0.1), inset 0 1px 0 rgba(255,255,255,0.65);
    }

    .result-covered-extra {
      display: grid;
      gap: 1px;
      margin-top: 2px;
    }

    .result-covered-extra-label {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.45px;
      color: #4e665f;
      font-weight: 900;
    }

    .result-covered-extra-value {
      font-size: 0.83rem;
      color: #1c3f3b;
      font-weight: 800;
      line-height: 1.3;
    }

    .result-benefits-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 6px;
    }

    .result-benefits-list li {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      padding: 7px 9px;
      border-radius: 10px;
      border: 1px solid #c5dbd5;
      background: rgba(255,255,255,0.86);
      font-size: 0.9rem;
      font-weight: 700;
      color: #284744;
    }

    .result-benefits-list strong {
      white-space: nowrap;
      color: #0f5f57;
      font-size: 0.95rem;
    }

    .live-box {
      border-radius: 14px;
      padding: 12px;
      background: linear-gradient(170deg, #f8fcfb, #eef8f6);
      border: 1px solid #cddfdc;
      margin-bottom: 10px;
    }

    .live-title {
      font-weight: 800;
      font-size: 1.03rem;
      color: #1d3a38;
      margin-bottom: 8px;
    }

    .live-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 8px;
    }

    .live-columns {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 8px;
    }

    .live-col {
      border: 1px solid #c6d8d2;
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 249, 246, 0.92));
      padding: 9px;
    }

    .live-col h4 {
      margin: 0 0 8px;
      font-size: 1rem;
      color: #264746;
    }

    .live-k {
      border: 1px solid #c6d8d2;
      border-radius: 10px;
      padding: 8px;
      background: linear-gradient(180deg, #ffffff, #f2f8f6);
      font-size: 0.96rem;
    }

    .live-k strong {
      display: block;
      margin-top: 4px;
      font-size: 1.24rem;
    }

    .live-diff {
      grid-column: 1 / -1;
      border: 1px solid #c8dcd7;
      border-radius: 14px;
      background:
        radial-gradient(140% 120% at 0% 0%, rgba(205, 234, 227, 0.38), transparent 52%),
        radial-gradient(120% 110% at 100% 0%, rgba(248, 224, 186, 0.32), transparent 58%),
        linear-gradient(162deg, #f3faf8, #e9f5f2);
      padding: 10px;
    }

    .live-fabric-wrap {
      margin-top: 0;
      border: none;
      border-radius: 0;
      padding: 0;
      background: transparent;
      box-shadow: none;
    }

    .live-fabric-canvas {
      width: 100%;
      max-width: 100%;
      display: block;
      border-radius: 0;
      border: none;
      background: transparent;
    }

    .history-list {
      display: grid;
      gap: 6px;
    }

    .history-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      padding: 8px;
      border: 1px solid #d6ddd5;
      border-radius: 10px;
      background: #fff;
    }

    .history-item small {
      color: #4b615f;
      display: block;
    }

    .history-item button {
      padding: 6px 10px;
      font-size: 0.82rem;
    }

    .btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 14px;
      margin-right: 6px;
      font-weight: 900;
    }

    .scenario-table-wrap {
      overflow-x: auto;
      border: 1px solid #c8dad4;
      border-radius: 12px;
      background: #f8fcfa;
    }

    .scenario-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 760px;
    }

    .scenario-table th,
    .scenario-table td {
      border: 1px solid #b8cdc6;
      padding: 8px 10px;
      text-align: center;
      font-size: 0.9rem;
    }

    .scenario-table .metric-label {
      text-align: left;
      font-weight: 700;
      background: #eef4f1;
      min-width: 170px;
    }

    .scenario-col-head {
      background: linear-gradient(180deg, #f5faf8, #edf4f1);
      transition: background 0.18s ease;
    }

    .scenario-col-head.is-selected {
      background: linear-gradient(180deg, #e6f7f3, #d9f0ea);
      box-shadow: inset 0 0 0 2px rgba(11, 110, 102, 0.22);
    }

    .scenario-col-actions {
      display: inline-flex;
      gap: 6px;
      margin-top: 6px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .scenario-select-btn,
    .scenario-remove-btn {
      font-size: 0.78rem;
      padding: 5px 9px;
    }

    .scenario-select-btn.is-selected {
      box-shadow: 0 0 0 1px rgba(11, 110, 102, 0.35);
    }

    .scenario-selected-flag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      margin-left: 6px;
      border-radius: 999px;
      background: #0b6e66;
      color: #fff;
      font-size: 0.72rem;
      font-weight: 900;
      vertical-align: middle;
    }

    .scenario-val-selected {
      background: #eefaf6;
      font-weight: 700;
      color: #12554f;
    }

    .scenario-transition-flash {
      animation: scenarioFlash 0.5s ease;
    }

    @keyframes scenarioFlash {
      0% {
        transform: translateY(0);
        box-shadow: 0 0 0 rgba(11, 110, 102, 0);
      }
      35% {
        transform: translateY(-1px);
        box-shadow: 0 0 0 3px rgba(11, 110, 102, 0.2);
      }
      100% {
        transform: translateY(0);
        box-shadow: 0 0 0 rgba(11, 110, 102, 0);
      }
    }

    #btnSaveMyScenario::before,
    #btnLoadMyScenario::before,
    #btnHistoryMyScenario::before,
    #btnPdf::before,
    .scenario-select-btn::before,
    .scenario-remove-btn::before {
      display: inline-block;
      margin-right: 6px;
      font-weight: 900;
    }

    #btnSaveMyScenario::before { content: "⬆"; }
    #btnLoadMyScenario::before { content: "⬇"; }
    #btnHistoryMyScenario::before { content: "☰"; }
    #btnPdf::before { content: "⎙"; }
    .scenario-select-btn::before { content: "✓"; }
    .scenario-remove-btn::before { content: "✕"; }

    .live-row {
      font-size: 0.9rem;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      padding: 5px 0;
      border-bottom: 1px dashed #d8ddd4;
    }

    .live-row strong {
      font-size: 0.97rem;
      font-weight: 800;
    }

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

    .ok { color: var(--ok); }
    .warn { color: var(--warn); }
    .bad { color: var(--bad); }

    .note {
      font-size: 0.84rem;
      color: #425a58;
      line-height: 1.45;
      background: linear-gradient(160deg, #fbf7ea, #f3edd8);
      border: 1px solid #e5d8b2;
      border-radius: 12px;
      padding: 10px;
      margin-top: 8px;
    }

    .spese-count-title {
      margin-top: 2px;
      margin-bottom: 8px;
      padding: 11px 14px;
      border-radius: 12px;
      border: 1px solid #d8c9a0;
      background: linear-gradient(90deg, #f8ecd2, #f3e7c9);
      color: #6a4b11;
      font-size: 1.06rem;
      font-weight: 800;
      letter-spacing: 0.2px;
    }

    .spese-actions {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 8px;
    }

    .spese-actions button {
      padding: 8px 12px;
      font-size: 0.9rem;
    }

    .spese-editor {
      border: 1px solid #c8d8d2;
      border-radius: 12px;
      padding: 10px;
      margin-bottom: 10px;
      background: linear-gradient(170deg, rgba(245, 251, 249, 0.95), rgba(235, 246, 243, 0.95));
    }

    .spese-editor-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .spese-editor-grid select {
      width: 100%;
    }

    .spese-editor-grid .field:last-child {
      grid-column: 1 / -1;
    }

    .legal-footer {
      margin-top: 14px;
      padding: 10px 14px;
      border-radius: 12px;
      border: 1px solid #cfd8cf;
      background: #f6f8f3;
      color: #415250;
      font-size: 0.84rem;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: space-between;
      align-items: center;
    }

    .legal-footer-main {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .visitor-stats {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
    }

    .visitor-stat {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid #d7e2d9;
      background: #fbfdf9;
      white-space: nowrap;
    }

    .visitor-stat strong {
      color: #0f6b64;
      font-variant-numeric: tabular-nums;
    }

    .legal-footer a {
      color: #0f6b64;
      font-weight: 700;
      text-decoration: none;
    }

    .legal-footer a:hover {
      text-decoration: underline;
    }

    /* ── DONATE BANNER ── */
    .donate-banner {
      margin-top: 14px;
      padding: 14px 18px;
      border-radius: 14px;
      background: linear-gradient(135deg, #fff8ee 0%, #fff3e0 100%);
      border: 1.5px solid #f0c36d;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .donate-banner[role="button"] {
      cursor: pointer;
    }

    .donate-text {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
      min-width: 200px;
    }

    .donate-icon {
      font-size: 1.8rem;
      line-height: 1;
      flex-shrink: 0;
    }

    .donate-msg {
      font-size: 0.87rem;
      color: #6b4b1a;
      line-height: 1.45;
    }

    .donate-msg strong {
      display: block;
      font-size: 0.95rem;
      color: #4a3000;
      margin-bottom: 2px;
    }

    .donate-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .btn-donate {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 0.87rem;
      font-weight: 700;
      text-decoration: none;
      cursor: pointer;
      border: none;
      transition: opacity .15s, transform .1s;
      white-space: nowrap;
    }

    .btn-donate:hover { opacity: 0.85; transform: translateY(-1px); }
    .btn-donate:active { transform: translateY(0); }

    .btn-donate-paypal {
      background: #0070ba;
      color: #fff;
    }

    .btn-donate-kofi {
      background: #ff5e5b;
      color: #fff;
    }

    details {
      border: 1px solid #d8ddd2;
      border-radius: 12px;
      padding: 10px;
      background: #fff;
    }

    summary { cursor: pointer; font-weight: 700; color: #304443; }

    .mini {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 8px;
      font-size: 0.9rem;
    }

    .mini div {
      background: #fbfcfa;
      border: 1px solid #dbe0d8;
      border-radius: 10px;
      padding: 8px;
    }

    @media (max-width: 640px) {
      .wrap { margin: 12px auto; padding: 0 8px 14px; }
      .hero {
        padding: 16px 14px;
        border-radius: 14px;
      }
      .hero h1 {
        margin-bottom: 7px;
        font-size: 1.22rem;
        letter-spacing: 0.2px;
      }
      .hero p {
        font-size: 0.98rem;
        line-height: 1.45;
      }
      .content { padding: 11px; }
      .card h2 {
        padding: 11px 12px;
        font-size: 0.96rem;
      }
      .toolbar {
        gap: 6px;
      }
      .toolbar button {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
      }
      input[type="number"],
      input[type="text"],
      input[type="password"],
      select {
        font-size: 1rem;
        padding: 8px 9px;
      }
      .kpi-grid,
      .kpi,
      .live-grid {
        grid-template-columns: 1fr;
      }
      .result-pill {
        padding: 11px;
      }
      .result-title {
        font-size: 0.98rem;
      }
      .result-value {
        font-size: 1.34rem;
      }
      .live-row {
        font-size: 0.9rem;
      }
      .live-row strong {
        font-size: 1rem;
      }
      .note {
        font-size: 0.88rem;
      }
      .live-columns { grid-template-columns: 1fr; }
      .shared-grid { grid-template-columns: 1fr; }
      .spouse-grid { grid-template-columns: 1fr; }
      .top-inputs { grid-template-columns: 1fr; }
      .auth-grid { grid-template-columns: 1fr; }
      .auth-menu-wrap { display: block; }
      .auth-toggle { width: 100%; justify-content: center; }
      .auth-dropdown {
        position: static;
        width: 100%;
        margin-top: 8px;
      }
      .spese-table th:first-child,
      .spese-table td:first-child { width: 42%; }
      .spese-table {
        display: block;
        width: 100%;
        overflow-x: auto;
      }
      .spese-table input { min-width: 74px; }
      .spese-input-wrap {
        align-items: stretch;
        gap: 2px;
      }
      .spese-input-main {
        width: 100%;
      }
      .spese-detail-btn {
        height: 24px;
        max-width: 24px;
        border-radius: 12px;
      }
      .spese-detail-btn::before {
        min-width: 24px;
        font-size: 11px;
      }
      .spese-editor-grid {
        grid-template-columns: 1fr;
      }
      .spese-partial { font-size: 0.64rem; }
      .legal-footer {
        flex-direction: column;
        align-items: flex-start;
      }
      .visitor-stats {
        justify-content: flex-start;
      }
      .perm-inline-control {
        grid-template-columns: 78px minmax(0, 1fr) 78px;
        gap: 6px;
      }
      .perm-inline-control input[type="number"] {
        font-size: 0.84rem;
        padding: 7px 5px;
      }
      .perm-calendar-actions {
        width: 100%;
      }
      #permCalendarMonth {
        flex: 1;
        min-width: 120px;
      }
      .perm-cal-day {
        min-height: 31px;
      }
      .extra-grid {
        grid-template-columns: 1fr;
      }

      .mortgage-split-slider {
        grid-template-columns: 1fr;
      }

      .mortgage-split-side-right {
        text-align: left;
      }

      .mortgage-split-range-wrap {
        order: -1;
      }

      .mortgage-split-range-controls {
        grid-template-columns: 34px minmax(0, 1fr) 34px;
      }

      .mortgage-split-nudge {
        height: 32px;
        width: 32px;
        font-size: 14px;
      }
      .spieg-grid {
        grid-template-columns: 1fr;
      }
      .spieg-help-tip {
        left: 0;
        right: auto;
        top: 24px;
        max-width: min(84vw, 320px);
      }
      .top-actions {
        display: block;
      }
      .hero-tools {
        display: grid;
        grid-template-columns: 1fr;
      }
      .zoom-controls {
        width: 100%;
        justify-content: space-between;
      }
      .zoom-controls button {
        min-width: 58px;
      }
      .zoom-level {
        flex: 1;
      }
      .prefs-controls {
        width: 100%;
        justify-content: space-between;
      }
      .prefs-controls select {
        min-width: 96px;
      }
      .top-actions-trigger {
        width: 100%;
      }
      .top-actions-menu {
        position: static;
        margin-top: 8px;
        min-width: 0;
      }
      .top-actions-menu button {
        font-size: 0.84rem;
      }
      /* donate + coffee responsive */
      .donate-banner { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
      .donate-buttons { width: 100%; justify-content: center; }
      .hero-donate { width: 100%; justify-content: center; }
      .btn-coffee-hero { font-size: 0.78rem; padding: 6px 10px; justify-content: center; }
      .hero-donate-menu {
        right: 50%;
        transform: translateX(50%);
        top: calc(100% + 6px);
      }
      .coffee-float { bottom: 12px; right: 12px; }
      .coffee-float-card { width: min(200px, calc(100vw - 32px)); }
      .coffee-float-btn { width: 42px; height: 42px; font-size: 1.3rem; }
    }

    @media print {
      .wrap {
        zoom: 1 !important;
        transform: none !important;
        width: 100% !important;
      }
      .legal-footer {
        border: 1px solid #cfcfcf;
        background: #fff;
      }
    }

    .export-mode-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .export-mode-modal.is-hidden {
      display: none;
    }

    .export-mode-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(22, 42, 42, 0.48);
    }

    .export-mode-modal-dialog {
      position: relative;
      width: min(540px, 100%);
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow);
      padding: 18px;
      z-index: 1;
    }

    .export-mode-modal-dialog h3 {
      margin: 0 0 10px;
      font-size: 1.05rem;
    }

    .export-mode-modal-dialog p {
      margin: 0 0 10px;
      color: var(--muted);
    }

    .export-mode-checkbox {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      margin: 12px 0 8px;
      color: var(--ink);
      font-weight: 600;
    }

    .export-mode-checkbox input {
      margin-top: 2px;
    }

    .export-mode-risk {
      color: var(--warn) !important;
      font-size: 0.92rem;
    }

    .export-mode-actions {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }