:root{
    --bg:#1A1B1E;
    --bg-card:#1F2024;
    --bg-card-alt:#222326;
    --bg-input:#1A1B1E;
    --ink:#FFFFFF;
    --muted:#B3B3B3;
    --line:#2E3135;
    --accent:#F6B70A;    /* brand / logo */
    --accent-soft:rgba(246,183,10,0.12);
    --teal:#22D3A6;      /* entrate / positivo */
    --teal-soft:rgba(34,211,166,0.12);
    --coral:#FF5C72;     /* uscite / negativo */
    --coral-soft:rgba(255,92,114,0.12);
    --gold:#F5B342;      /* investimenti */
    --gold-soft:rgba(245,179,66,0.12);
    --blue:#5B8CFF;      /* trasferimenti */
    --blue-soft:rgba(91,140,255,0.12);
    --radius:10px;
  }
  *{box-sizing:border-box;}
  html, body{overflow-x:hidden; max-width:100%;}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:'Nunito Sans', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  .app{max-width:1180px;margin:0 auto;padding:28px 20px 80px; width:100%;}
  header.top{
    display:flex;align-items:center;justify-content:space-between;
    border-bottom:2px solid var(--line); padding-bottom:16px; margin-bottom:20px;
    flex-wrap:wrap; gap:10px;
  }
  header.top h1{margin:0;}
  header.top h1.logo-link{transition:opacity .15s ease;}
  header.top h1.logo-link:hover{opacity:0.8;}
  header.top .sub{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1px;}
  .header-right{display:flex; align-items:center; gap:14px; margin-left:auto;}
  .icon-only-btn{
    background:none; border:none; color:var(--muted); font-size:34px; cursor:pointer;
    padding:4px; line-height:1; transition:color .15s ease; display:inline-flex;
    align-items:center; justify-content:center;
  }
  .icon-only-btn:hover, .icon-only-btn.active{color:var(--accent);}
  .icon-only-btn.small{font-size:20px; padding:2px;}
  .view-switch{
    display:inline-flex; border:1.5px solid var(--line); border-radius:8px;
  }
  .view-switch-btn{
    background:var(--bg-card); color:var(--muted); border:none; cursor:pointer;
    padding:7px 12px; display:inline-flex; align-items:center; justify-content:center;
    transition:all .15s ease;
  }
  .view-switch-btn:first-child{border-radius:6.5px 0 0 6.5px;}
  .view-switch-btn:last-child{border-radius:0 6.5px 6.5px 0;}
  .view-switch-btn:not(:last-child){border-right:1.5px solid var(--line);}
  .view-switch-btn.active{background:var(--accent); color:#241503;}
  .view-switch-btn:hover:not(.active){color:var(--ink);}
  .eur-blur{transition:filter .15s ease;}
  .app.blur-active .eur-blur{filter:blur(6px); user-select:none;}
  .user-menu-popover{
    display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:120;
    background:var(--bg-card); border:1px solid var(--line); border-radius:10px;
    box-shadow:0 6px 16px rgba(0,0,0,0.45); padding:16px; width:260px;
  }
  .user-menu-popover.show{display:block;}
  .user-menu-popover .note{margin-bottom:12px;}
  .card-header-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; cursor:pointer;}
  .card-header-row.no-margin{margin-bottom:0;}
  .card .card-header-row h2, .confirm-box .card-header-row h2{margin:0;}

  nav.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px;}
  nav.tabs button{
    font-family:'Nunito Sans'; font-size:13.5px; font-weight:600;
    padding:9px 16px; border-radius:999px; border:1.5px solid var(--line);
    background:var(--bg-card); color:var(--muted); cursor:pointer;
    transition:all .15s ease; display:inline-flex; align-items:center; gap:7px;
  }
  nav.tabs button.active{background:var(--accent); color:#241503; border-color:var(--accent);}
  nav.tabs .nav-icon{
    width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  }
  nav.tabs .nav-icon svg{width:100%; height:100%; display:block;}

  .subtabs{display:flex; gap:6px; margin-bottom:14px;}
  .subtab-btn{
    font-family:'Nunito Sans'; font-size:12.5px; font-weight:600;
    padding:6px 13px; border-radius:999px; border:1.5px solid var(--line);
    background:transparent; color:var(--muted); cursor:pointer; transition:all .15s ease;
  }
  .subtab-btn.active{background:var(--blue); color:#04122A; border-color:var(--blue);}
  .subtab-btn:hover:not(.active){border-color:var(--blue); color:var(--ink);}
  nav.tabs button:hover:not(.active){border-color:var(--accent); color:var(--ink);}

  section.panel{display:none;}
  section.panel.active{display:block; animation:fade .25s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

  .settings-layout{display:flex; gap:24px; align-items:flex-start;}
  .settings-sidebar{display:flex; flex-direction:column; gap:6px; flex:0 0 200px; position:sticky; top:20px;}
  .settings-sidebar button{
    font-family:'Nunito Sans'; font-size:13.5px; font-weight:600; text-align:left;
    padding:10px 14px; border-radius:10px; border:1.5px solid var(--line);
    background:var(--bg-card); color:var(--muted); cursor:pointer; transition:all .15s ease;
  }
  .settings-sidebar button.active{background:var(--accent); color:#241503; border-color:var(--accent);}
  .settings-sidebar button:hover:not(.active){border-color:var(--accent); color:var(--ink);}
  .settings-content{flex:1; min-width:0;}
  .settings-group{display:none;}
  .settings-group.active{display:block;}
  @media (max-width:640px){
    .settings-layout{flex-direction:column; align-items:stretch;}
    .settings-sidebar{flex-direction:row; flex-wrap:wrap; flex:0 0 auto; position:static; width:100%;}
    .settings-sidebar button{flex:0 0 auto;}
  }
  /* nav.tabs wraps onto several rows on narrow screens by default (the base
     rule earlier in this file), pushing all page content down before you can
     even see it. On mobile it scrolls horizontally in one row instead, closer
     to a native app's tab strip. */
  @media (max-width:640px){
    nav.tabs{
      flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:4px;
      -webkit-mask-image:linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
      mask-image:linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
      scrollbar-width:none; -ms-overflow-style:none;
    }
    nav.tabs::-webkit-scrollbar{display:none;}
    nav.tabs button{flex:0 0 auto;}
    .scroll-x{scrollbar-width:none; -ms-overflow-style:none;}
    .scroll-x::-webkit-scrollbar{display:none;}
  }

  .card{
    background:var(--bg-card); border:1px solid #3B3E44; border-radius:var(--radius);
    padding:18px 20px; margin-bottom:16px;
  }
  .card h2, .confirm-box h2{font-family:'Spectral',serif; font-weight:600; font-size:19px; margin:0 0 14px; color:var(--ink);}
  .confirm-box h2{margin:0;}
  .grid{display:grid; gap:14px;}
  .grid.cols-3{grid-template-columns:repeat(3,1fr);}
  .grid.cols-2{grid-template-columns:repeat(2,1fr); align-items:start;}
  @media (max-width:760px){ .grid.cols-3, .grid.cols-2{grid-template-columns:1fr;} }
  .filters-panel{
    background:var(--bg-card-alt); border:1px solid var(--line); border-radius:10px;
    padding:14px 16px; margin-bottom:14px;
  }
  .filters-panel-header{
    display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; cursor:pointer; gap:10px;
  }
  .filters-panel-header.no-margin{margin-bottom:0;}
  .filters-panel-title{
    font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:600;
  }
  .filters-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px;
  }
  .filters-section-label{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
    margin:14px 0 8px; font-weight:600;
  }
  .filters-section-label:first-of-type{margin-top:2px;}
  .filters-active-badge{
    display:inline-block; background:var(--accent); color:#241503; font-size:11px; font-weight:700;
    border-radius:999px; padding:1px 8px; margin-left:6px; vertical-align:middle;
  }
  .multiselect-trigger{
    font-family:'Nunito Sans'; font-size:13.5px; padding:7px 9px; border:1px solid var(--line);
    border-radius:6px; background:var(--bg-input); color:var(--ink); width:100%;
    display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer; text-align:left;
  }
  .multiselect-trigger:hover{border-color:var(--muted);}
  .multiselect-arrow{color:var(--muted); font-size:11px;}
  .multiselect-dropdown{
    position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:50;
    background:var(--bg-card); border:1px solid var(--line); border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,0.35); max-height:220px; overflow-y:auto; padding:6px;
  }
  .multiselect-option{
    display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:6px; cursor:pointer; font-size:13.5px;
  }
  .multiselect-option:hover{background:var(--bg-input);}
  .multiselect-option input{width:auto; margin:0;}
  .multiselect-search{
    width:100%; font-family:'Nunito Sans'; font-size:13px; padding:6px 8px; margin-bottom:6px;
    border:1px solid var(--line); border-radius:6px; background:var(--bg-input); color:var(--ink);
    position:sticky; top:0; z-index:1;
  }
  .multiselect-search:focus{outline:none; border-color:var(--blue);}
  .multiselect-footer{
    display:flex; justify-content:space-between; gap:8px; padding:6px 8px 2px; border-top:1px solid var(--line); margin-top:4px;
  }
  .multiselect-footer button{
    background:none; border:none; color:var(--blue); font-size:12px; cursor:pointer; padding:2px 4px;
  }
  .multiselect-footer button:hover{text-decoration:underline;}
  .floating-action-bar{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
    z-index:1000; max-width:calc(100% - 32px); width:auto;
    background:var(--bg-card); border:1.5px solid var(--line); border-radius:14px;
    padding:12px 16px; box-shadow:0 8px 28px rgba(0,0,0,0.35);
  }
  .fab-header{
    display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px;
  }
  .fab-count{font-size:13px; font-weight:600; color:var(--ink);}
  .fab-close{
    background:none; border:none; color:var(--muted); font-size:15px; line-height:1; cursor:pointer;
    padding:2px 6px; border-radius:6px; transition:background .15s ease, color .15s ease;
  }
  .fab-close:hover{background:var(--bg-input); color:var(--ink);}
  .fab-actions{display:flex; flex-wrap:wrap; align-items:center; gap:12px;}
  .fab-group{display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
  .fab-group select{width:auto; min-width:150px;}
  .fab-group-label{
    font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); margin-right:2px;
  }
  .fab-divider{width:1px; align-self:stretch; background:var(--line); margin:2px 2px;}
  .tx-summary-bar{
    display:flex; flex-wrap:wrap; gap:18px; align-items:center;
    background:var(--bg-card-alt); border:1px solid var(--line); border-radius:8px;
    padding:10px 14px; margin-bottom:12px; font-size:13px;
  }
  .tx-summary-bar .tx-summary-item{display:flex; gap:6px; align-items:baseline;}
  .tx-summary-bar .tx-summary-label{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.4px;}
  .tx-summary-bar .tx-summary-value{font-family:'IBM Plex Mono',monospace; font-weight:600;}
  @media (max-width:640px){
    .fab-divider{display:none;}
    .fab-actions{flex-direction:column; align-items:stretch;}
    .fab-group{justify-content:space-between;}
    .row-inline .field{flex:1 1 100%; min-width:0;}
    .row-inline > button.btn{flex:1 1 100%;}
    /* Fields in "Registra un movimento" stack full-width on mobile (the rule
       above), so the row's own gap becomes the vertical space between them —
       the default 8px reads as cramped once everything's stacked instead of
       side by side. */
    #add-movement-overlay .row-inline{gap:18px;}
  }
  .list-stack{display:flex; flex-direction:column; gap:14px;}

  .dashboard-top-grid{display:grid; grid-template-columns:3fr 2fr; gap:16px; align-items:start; margin-bottom:16px;}
  .right-column-stack{display:flex; flex-direction:column; gap:16px;}
  .dashboard-top-grid .card{margin-bottom:0;}
  @media (max-width:900px){ .dashboard-top-grid{grid-template-columns:1fr;} }

  .stat{
    border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px;
    background:var(--bg-card-alt); display:flex; justify-content:space-between; align-items:center; gap:10px;
  }
  .stat .label{font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:600;}
  .bank-badge{
    display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
    border-radius:50%; font-size:9.5px; font-weight:700; color:#fff; margin-right:7px;
    vertical-align:middle; font-family:'Nunito Sans', sans-serif; letter-spacing:0.3px;
  }
  .bank-badge-img{
    width:22px; height:22px; border-radius:6px; margin-right:7px; vertical-align:middle;
    object-fit:cover; box-shadow:0 0 0 1px rgba(255,255,255,0.08);
  }
  .stat .value{font-family:'IBM Plex Mono',monospace; font-size:24px; font-weight:600; color:var(--ink); white-space:nowrap;}
  .onb-banks-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px 16px; max-height:340px; overflow-y:auto; padding-right:4px;}
  .onb-bank-row{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink); cursor:pointer;}
  .stat.total .value{color:var(--teal);}
  /* debt-forecast-months can show a text message ("Nunca al ritmo actual") instead
     of a short amount — nowrap (needed for monetary values elsewhere) would force
     the whole card to scroll horizontally on mobile for that longer text. */
  #debt-forecast-months{white-space:normal; word-break:break-word;}
  .stat.has-sub{flex-direction:column; align-items:stretch; gap:6px;}
  .stat-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 12px;}
  .credit-note{font-size:11.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace;}

  details.bank-detail{cursor:pointer; display:block;}
  details.bank-detail summary{
    list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
  }
  details.bank-detail summary::-webkit-details-marker{display:none;}
  details.bank-detail summary::marker{content:'';}
  details.bank-detail summary::after{
    content:'◂'; font-size:20px; color:var(--muted); margin-left:8px; font-family:'IBM Plex Mono',monospace;
    display:inline-block; transition:transform .15s ease;
  }
  details.bank-detail[open] summary::after{transform:rotate(-90deg);}
  .collapse-arrow{
    display:inline-block; font-size:20px; color:var(--muted); font-family:'IBM Plex Mono',monospace;
    transition:transform .15s ease;
  }
  .collapse-arrow.open{transform:rotate(-90deg);}
  details.bank-detail summary .label{flex:1;}
  .detail-list{margin-top:12px; border-top:1px solid var(--line); padding-top:8px;}
  .detail-row{display:flex; justify-content:space-between; align-items:baseline; padding:8px 8px; gap:10px; border-radius:6px;}
  .detail-row:nth-child(even){background:rgba(255,255,255,0.03);}
  /* Memo rows (interest accrued, monthly reserve, guilty-free spending) are
     wrapped by app.js in a .detail-memo-group container — a distinct boxed
     section with its own background, so they read as a summary/footnote
     under the account list rather than more rows of the same table. */
  .detail-memo-group{
    margin-top:12px; padding:6px 8px; border:1px solid var(--line); border-radius:8px;
    background:rgba(255,255,255,0.025);
  }
  .detail-memo-group-title{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
    font-weight:600; padding:6px 8px 2px;
  }
  .detail-row.detail-memo{font-style:italic;}
  .detail-row.detail-memo:nth-child(even){background:none;}
  .detail-row.detail-memo .detail-name{color:var(--muted);}
  .detail-row.detail-memo .detail-bal{color:var(--gold);}
  .detail-row.detail-nested{padding-left:18px; border-left:1px dashed var(--line); margin-left:4px;}
  .detail-row.detail-nested-2{padding-left:34px; border-left:1px dashed var(--line); margin-left:20px;}
  .detail-name{font-size:13px; color:var(--ink); display:flex; flex-direction:column;}
  .pocket-name-row{display:inline-flex; align-items:center; gap:6px;}
  .detail-type{font-size:10.5px; color:var(--muted); font-weight:400;}
  .detail-bal{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--ink); white-space:nowrap;}

  /* Stamp calendar - signature element, terminal-ticker style on dark */
  .stampstrip{display:flex; gap:14px; overflow-x:auto; padding:6px 2px 14px;}
  .stamp{
    flex:0 0 auto; width:150px; border:1.5px dashed var(--gold); border-radius:50%/18%;
    padding:16px 10px; text-align:center; position:relative; background:var(--gold-soft);
    transform:rotate(-2deg);
  }
  .stamp:nth-child(even){transform:rotate(2deg); border-color:var(--blue); background:var(--blue-soft);}
  .stamp .day{font-family:'Spectral',serif; font-style:italic; font-size:15px; font-weight:600; color:var(--ink);}
  .stamp .amt{font-family:'IBM Plex Mono',monospace; font-size:17px; font-weight:600; margin-top:4px; color:var(--ink);}
  .stamp .cnt{font-size:11px; color:var(--muted); margin-top:2px;}
  .stamp.stamp-today{border-style:solid; border-color:var(--teal); background:var(--teal-soft); border-width:2px; transform:rotate(0deg);}
  .stamp.stamp-today .day{color:var(--teal);}

  /* Donut charts */
  .donut-wrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap;}
  .donut-chart{
    width:140px; height:140px; min-width:140px; border-radius:50%; position:relative;
  }
  .donut-hole{
    position:absolute; inset:20px; background:var(--bg-card); border-radius:50%;
    display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:4px;
  }
  .donut-center-label{font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;}
  .donut-center-value{font-family:'IBM Plex Mono',monospace; font-size:15px; font-weight:600; color:var(--ink); margin-top:2px;}
  .donut-legend{display:flex; flex-direction:column; gap:7px; flex:1; min-width:150px;}
  .donut-legend-item{display:flex; align-items:center; gap:8px; font-size:12.5px;}
  .donut-swatch{width:10px; height:10px; border-radius:3px; flex:0 0 auto;}
  .donut-legend-label{flex:1; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .donut-legend-value{font-family:'IBM Plex Mono',monospace; color:var(--muted); white-space:nowrap; font-size:12px;}

  .growth-chart-value{font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:600; color:var(--gold); margin-bottom:8px;}
  .growth-chart-svg{width:100%; height:180px; display:block;}
  .growth-chart-labels{display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:6px;}

  table{width:100%; border-collapse:collapse; font-size:13.5px;}
  th{
    text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.6px;
    color:var(--muted); border-bottom:1.5px solid var(--line); padding:8px 8px;
  }
  td{padding:9px 8px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--ink);}
  tr:hover td{background:rgba(91,140,255,0.05);}
  tr.row-selected td{background:rgba(91,140,255,0.05);}
  td.num, th.num{font-family:'IBM Plex Mono',monospace; text-align:right;}
  .cc-table{table-layout:fixed; min-width:600px;}
  tr.date-group-row:hover td{background:none;}
  tr.date-group-row td{padding:0; border-bottom:none;}
  .date-group-header{
    display:flex; justify-content:space-between; align-items:center;
    font-family:'Nunito Sans', sans-serif; font-weight:600; font-size:13px; color:var(--ink);
    background:var(--bg-card-alt); border:1px solid var(--line); border-radius:8px;
    padding:10px 14px; margin:18px 0 8px;
  }
  tr.date-group-row:first-child .date-group-header{margin-top:0;}
  .date-group-total{font-family:'IBM Plex Mono',monospace; font-style:normal; font-weight:600; font-size:13px;}
  .cc-table td, .cc-table th{overflow-wrap:break-word; word-break:break-word;}
  th.sortable{cursor:pointer; user-select:none; transition:color .15s ease;}
  th.sortable:hover{color:var(--teal);}
  .sort-indicator{display:inline-block; margin-left:4px; font-size:10px; color:var(--teal); width:8px;}
  input, select{
    font-family:'Nunito Sans'; font-size:13.5px; padding:7px 9px; border:1px solid var(--line);
    border-radius:6px; background:var(--bg-input); color:var(--ink); width:100%;
  }
  input::placeholder{color:#4E5866;}
  input[type=number]{font-family:'IBM Plex Mono',monospace;}
  input[type=date]{cursor:pointer;}
  input[type=file]{padding:8px;}
  input[type=color]{width:52px; height:38px; padding:3px; cursor:pointer;}
  input[type=checkbox]{
    appearance:none; -webkit-appearance:none;
    width:16px; height:16px; min-width:16px; padding:0;
    border:1.5px solid var(--line); border-radius:4px;
    background:var(--bg-input); cursor:pointer; position:relative;
    flex-shrink:0; vertical-align:middle;
    transition:background .15s ease, border-color .15s ease;
  }
  input[type=checkbox]:hover{border-color:var(--accent);}
  input[type=checkbox]:checked{background:var(--accent); border-color:var(--accent);}
  input[type=checkbox]:checked::after{
    content:''; position:absolute; left:4px; top:1px;
    width:4px; height:8px;
    border:solid #241503; border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }
  /* Toggle-switch look for a checkbox (class="switch" on the input) — same
     checked/unchecked semantics, just a bigger and clearer target on mobile
     than the small square box. */
  input[type=checkbox].switch{
    width:40px; height:24px; min-width:40px; border-radius:999px;
  }
  input[type=checkbox].switch::after{
    content:''; position:absolute; top:2px; left:2px;
    width:18px; height:18px; border-radius:50%; border:none;
    background:var(--muted); transition:transform .15s ease, background .15s ease;
  }
  input[type=checkbox].switch:checked::after{transform:translateX(16px); background:#241503;}
  .row-inline{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-end;}
  .field{display:flex; flex-direction:column; gap:4px; min-width:0;}
  .field label{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); font-weight:600;}
  /* Importo accepts simple arithmetic (e.g. "12.50+8.30") for summing several
     receipts at once, resolved to a plain number on blur — see
     resolveAmountField()/evaluateAmountExpression() in app.js. The + button
     appends an operator without needing the keyboard's symbol layer, since
     inputmode="decimal" hides it on most mobile keyboards. */
  .amount-input-wrap{display:flex; gap:6px; align-items:center;}
  .amount-input-wrap input{flex:1; min-width:0;}
  .amount-add-btn{
    flex:0 0 auto; width:36px; height:36px; border-radius:8px; border:1px solid var(--line);
    background:var(--bg-input); color:var(--muted); font-size:20px; font-weight:600; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; padding:0; line-height:1;
  }
  .amount-add-btn:hover{color:var(--accent); border-color:var(--accent);}

  button.btn{
    font-family:'Nunito Sans'; font-weight:600; font-size:13px; cursor:pointer;
    border:none; border-radius:6px; padding:8px 14px; background:var(--accent); color:#241503;
  }
  button.btn:hover{filter:brightness(1.1);}
  button.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
  button.btn.ghost:hover{border-color:var(--ink);}
  button.btn.small{padding:5px 10px; font-size:12px;}
  button.btn.danger{background:var(--coral); color:#2A0006;}
  button.btn.gold{background:var(--gold); color:#241503;}
  button.btn.blue{background:var(--blue); color:#04122A;}
  button.btn.ghost.active{background:var(--accent); color:#241503; border-color:var(--accent);}
  button.btn:disabled{opacity:.35; cursor:not-allowed;}
  button.btn.btn-icon-label{display:inline-flex; align-items:center; justify-content:center; gap:8px;}

  /* Type-first entry: pick income/expense/transfer before anything else shows,
     so registering a movement is one tap instead of scanning a whole form. */
  .mv-type-picker{display:flex; gap:10px; margin-bottom:4px;}
  .mv-type-choice{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:16px 10px; border-radius:10px; border:1.5px solid var(--line);
    background:var(--bg-card-alt); color:var(--muted); cursor:pointer;
    font-family:'Nunito Sans'; font-weight:600; font-size:13px;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .mv-type-choice:hover{border-color:var(--ink); color:var(--ink);}
  .mv-type-choice.expense.active{background:var(--coral-soft); border-color:var(--coral); color:var(--coral);}
  .mv-type-choice.income.active{background:var(--teal-soft); border-color:var(--teal); color:var(--teal);}
  .mv-type-choice.transfer.active{background:var(--blue-soft); border-color:var(--blue); color:var(--blue);}

  .pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:600;}
  .pill.income{background:var(--teal-soft); color:var(--teal);}
  .pill.expense{background:var(--coral-soft); color:var(--coral);}
  .pill.transfer{background:var(--blue-soft); color:var(--blue);}
  .pill.pending{background:var(--gold-soft); color:var(--gold);}
  .pill.settled{background:var(--teal-soft); color:var(--teal);}
  .pill.future{background:var(--blue-soft); color:var(--blue);}
  .pill.couple{background:var(--gold-soft); color:var(--gold);}
  .pill.contribution{background:var(--gold-soft); color:var(--gold);}
  .pill.value-update{background:var(--blue-soft); color:var(--blue);}
  .pill.off{background:rgba(179,179,179,0.14); color:var(--muted);}

  .categories-wrap{display:flex; flex-wrap:wrap; gap:8px;}
  .reserve-list{display:flex; flex-direction:column; gap:2px;}
  .reserve-row{
    display:flex; flex-wrap:wrap; align-items:center; padding:8px 4px;
    border-bottom:1px dashed var(--line); gap:10px;
  }
  .reserve-row:last-child{border-bottom:none;}
  .reserve-label{font-size:13.5px; color:var(--ink); flex:1;}
  .reserve-value{font-family:'IBM Plex Mono',monospace; font-size:13.5px; color:var(--ink); white-space:nowrap; flex:0 0 auto;}
  .reserve-row-editing{align-items:stretch;}
  /* Family / personal-tax / auto-card rows are rendered as separate
     .reserve-group blocks so the three categories never blend visually —
     see renderReserveGroup() in app.js. */
  .reserve-group{margin-bottom:10px;}
  .reserve-group:last-child{margin-bottom:0;}
  .reserve-group-title{
    display:flex; justify-content:space-between; align-items:center;
    font-size:10.5px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
    font-weight:600; padding:4px 4px;
  }
  .reserve-group-subtotal{font-family:'IBM Plex Mono',monospace; font-weight:600;}
  .reserve-group .reserve-row:first-child{border-top:1px solid var(--line);}
  #interest-quick-list{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:12px;}
  .interest-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px;
    border:1px solid var(--line); border-radius:8px;
  }
  .interest-row .interest-name{flex:1 1 100%; font-size:13.5px; color:var(--ink);}
  .interest-row .interest-total{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); white-space:nowrap;}
  .interest-row input{width:110px; text-align:right; flex:0 0 auto;}
  #shortcut-review-list{display:flex; flex-direction:column; gap:10px;}
  .shortcut-review-row{
    display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px;
    border:1px solid var(--gold); border-radius:8px; background:rgba(245,179,66,0.06);
  }
  .shortcut-review-row .shortcut-review-info{flex:1 1 260px; font-size:13.5px; color:var(--ink); display:flex; flex-direction:column; gap:2px;}
  .shortcut-review-row select{width:auto; min-width:160px; flex:0 0 auto;}
  .reserve-row input{width:130px; text-align:right; flex:0 0 auto;}
  .reserve-total{
    display:flex; justify-content:space-between; align-items:center; margin-top:12px;
    padding-top:12px; border-top:1.5px solid var(--line); font-size:13.5px; color:var(--muted);
  }
  .salary-percentage{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line);}
  .salary-percentage .label{font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:600; display:block;}
  /* Shown only when the card is collapsed (icon lacks .open) — a quick glance
     at the weight percentage without having to reopen the card. */
  .salary-pct-header{display:none; font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:14px;}
  .card-header-row:has(.collapse-arrow:not(.open)) .salary-pct-header{display:inline;}
  tr.total-row td{font-weight:700; border-top:2px solid var(--line); color:var(--ink);}
  tr.rounded-row td{font-style:italic; color:var(--muted); font-size:12.5px;}
  .category-pill{
    display:flex; align-items:center; gap:8px; background:var(--bg-input); border:1px solid var(--line);
    border-radius:999px; padding:6px 8px 6px 14px; font-size:12.5px; color:var(--ink);
  }
  .category-pill.custom{border-color:var(--gold); background:var(--gold-soft); color:var(--gold);}
  .category-pill-remove, .share-pill-remove{
    background:none; border:none; color:var(--muted); font-size:15px; line-height:1; cursor:pointer;
    width:18px; height:18px; border-radius:50%; padding:0;
  }
  .share-row{
    border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-input);
    padding:10px 12px; margin-bottom:8px;
  }
  .share-row-header{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:13px; color:var(--ink); margin-bottom:8px;}
  .share-row-options{display:flex; flex-wrap:wrap; gap:12px; font-size:12px; color:var(--muted);}
  .share-row-options label{display:flex; align-items:center; gap:5px; cursor:pointer;}
  .category-pill-remove:hover, .share-pill-remove:hover{color:var(--coral); background:var(--coral-soft);}
  .future-date{color:var(--blue); font-weight:600;}
  tr.future-row td{background:rgba(91,140,255,0.05);}

  .bankgroup{margin-bottom:18px;}
  .bankgroup h3{font-family:'Spectral',serif; font-size:16px; margin:0 0 10px; color:var(--muted); font-style:italic; display:flex; align-items:center;}

  .account-card{
    border:1px solid var(--line); border-radius:var(--radius); background:var(--bg-card-alt);
    padding:12px 14px; margin-bottom:10px;
  }
  .account-top{display:flex; align-items:center; gap:10px; flex-wrap:nowrap;}
  .account-top .account-name-display{
    flex:1; min-width:0; font-weight:600; color:var(--ink); font-size:14px;
    padding:5px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .bullet-sep{color:var(--muted); margin:0 6px;}
  .note-inline{font-size:11.5px; color:var(--muted); font-weight:400;}
  .account-top .balance-display{
    font-family:'IBM Plex Mono',monospace; color:var(--ink); font-size:14px; font-weight:600;
    padding:0 8px; white-space:nowrap; flex:0 0 auto;
  }
  .balance-display.computed-gold, .account-details-grid .computed-note{color:var(--gold);}
  .account-details-grid .computed-note{
    font-family:'IBM Plex Mono',monospace; font-size:13px; padding:7px 0; display:inline-block;
  }

  /* Custom HTML tooltips (replace native title= tooltips) */
  .has-tooltip{position:relative;}
  /* display:none (not opacity:0) so the pseudo-element has zero geometry until
     actually shown — an absolutely-positioned element still counts toward a
     scrollable ancestor's scrollWidth even at opacity:0, which was silently
     widening tables (e.g. Movimenti's actions column) on every device,
     hover-capable or not. Trade-off: no fade/slide transition on appear. */
  .has-tooltip::after{
    content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%;
    transform:translateX(-50%); background:var(--bg-input); color:var(--ink);
    font-family:'Nunito Sans', sans-serif; font-size:11.5px; font-weight:500; line-height:1.4;
    padding:7px 10px; border-radius:7px; width:max-content; max-width:220px; text-align:center;
    white-space:normal; border:1px solid var(--line); box-shadow:0 6px 16px rgba(0,0,0,0.45);
    display:none; pointer-events:none; z-index:80;
  }
  .has-tooltip::before{
    content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%);
    border:5px solid transparent; border-top-color:var(--bg-input);
    display:none; pointer-events:none; z-index:80;
  }
  .has-tooltip:hover::after, .has-tooltip:hover::before{display:block;}
  /* Box alignment set at hover-time by a delegated mouseover listener in app.js,
     based on which half of the screen the trigger is in, so a tooltip near a
     screen edge doesn't run off it. The arrow (::before) always stays centered
     on the trigger regardless — only the text box shifts. */
  .has-tooltip.tooltip-align-left::after{left:0; transform:none;}
  .has-tooltip.tooltip-align-right::after{left:auto; right:0; transform:none;}

  /* Custom date picker (matches tooltip styling: dark card, border, shadow) */
  input.datepicker-input{cursor:pointer; background:var(--bg-input);}
  .datepicker-popover{
    display:none; position:fixed; z-index:1100; background:var(--bg-input); color:var(--ink);
    border:1px solid var(--line); border-radius:10px; box-shadow:0 6px 16px rgba(0,0,0,0.45);
    padding:12px; width:240px; font-family:'Nunito Sans', sans-serif;
  }
  .datepicker-popover.show{display:block;}
  .dp-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
  .dp-title{font-family:'Spectral',serif; font-weight:600; font-size:14px; color:var(--ink);}
  .dp-nav{
    background:none; border:1px solid var(--line); color:var(--muted); width:26px; height:26px;
    border-radius:6px; cursor:pointer; font-size:14px; line-height:1;
  }
  .dp-nav:hover{color:var(--teal); border-color:var(--teal);}
  .dp-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px;}
  .dp-weekdays span{text-align:center; font-size:10px; color:var(--muted); text-transform:uppercase;}
  .dp-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px;}
  .dp-day{
    background:none; border:none; color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:12px;
    padding:6px 0; border-radius:6px; cursor:pointer; text-align:center;
  }
  .dp-day:hover{background:rgba(34,211,166,0.12); color:var(--teal);}
  .dp-day.dp-empty{cursor:default; pointer-events:none;}
  .dp-day.dp-today{color:var(--gold); font-weight:600;}
  .dp-day.dp-selected{background:var(--teal); color:#04120D; font-weight:600;}
  .dp-footer{margin-top:8px; text-align:center; border-top:1px solid var(--line); padding-top:8px;}
  .dp-today-btn{
    background:none; border:none; color:var(--blue); font-size:11.5px; font-weight:600;
    cursor:pointer; text-transform:uppercase; letter-spacing:.4px;
  }
  .dp-today-btn:hover{color:var(--teal);}
  .icon-edit-btn{
    background:none; border:none; color:var(--muted); font-size:16px; cursor:pointer;
    padding:4px 6px; border-radius:5px; flex:0 0 auto;
  }
  .icon-edit-btn:hover{color:var(--teal); background:rgba(34,211,166,0.1);}
  .icon-action-btn{
    background:none; border:1px solid var(--line); color:var(--muted); width:28px; height:28px;
    border-radius:6px; font-size:14px; cursor:pointer; display:inline-flex; align-items:center;
    justify-content:center; padding:0;
  }
  .icon-action-btn:hover{color:var(--teal); border-color:var(--teal);}
  .icon-action-btn.active{background:var(--blue); color:#04122A; border-color:var(--blue);}
  .icon-action-btn.danger:hover{color:var(--coral); border-color:var(--coral);}
  .icon-action-btn.reveal-on-hover{opacity:0; transition:opacity .15s ease;}
  tr:hover .icon-action-btn.reveal-on-hover{opacity:1;}
  /* Read-only shared-data view (see switchViewingContext() in app.js). This is
     best-effort UX, not the security boundary — the RLS policies on finance_data
     and the guard in persist()/flushPersist() are what actually stop writes. */
  .read-only-banner{display:none;}
  body.read-only-mode .read-only-banner{
    display:block; background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold);
    border-radius:var(--radius); padding:10px 14px; margin:0 0 16px; font-size:13px;
    text-align:center; font-weight:600;
  }
  /* Free-trial tag next to the logo (see trialDaysRemaining()/updateTrialBanner()
     in app.js). Hidden by default (inline style, toggled by JS); shown only while
     days remaining > 0 — never for an admin or a lifetime-free grant. */
  .trial-tag{
    display:none; align-items:center; font-family:'Nunito Sans', sans-serif;
    font-size:11px; font-weight:700; letter-spacing:.3px; white-space:nowrap;
    color:var(--teal); background:var(--teal-soft); border:1px solid var(--teal);
    border-radius:6px; padding:2px 8px; margin-left:8px;
  }
  body.read-only-mode .icon-action-btn,
  body.read-only-mode .icon-edit-btn,
  body.read-only-mode .category-pill-remove,
  body.read-only-mode .mutation-btn{display:none;}
  /* Elements that double as a value display AND an edit trigger (e.g. tap the
     fund's invested/current-value figure to edit it) must stay visible in
     read-only mode — only their click-to-edit affordance goes away. */
  body.read-only-mode .mutation-value{pointer-events:none; cursor:default;}
  .account-details-panel{margin-top:10px;}
  .funds-list-panel{margin-top:10px; padding:12px; background:var(--bg-input); border-radius:8px;}
  .funds-list-rows{display:flex; flex-direction:column; gap:8px;}
  .fund-list-row{display:flex; align-items:center; gap:10px; font-size:13px;}
  .fund-list-name{flex:1; color:var(--ink); font-weight:600;}
  .fund-list-isin{font-family:'IBM Plex Mono',monospace; color:var(--muted); font-size:12px;}
  .fund-list-invested-value{
    width:90px; flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:12.5px;
    padding:6px 8px; text-align:right; color:var(--ink);
    cursor:pointer; border-bottom:1px dashed var(--muted); transition:color .15s ease, border-color .15s ease;
  }
  .fund-list-invested-value:hover{color:var(--accent); border-color:var(--accent);}
  .fund-edit-panel{
    margin-top:10px; padding:12px; background:var(--bg-input); border-radius:8px;
    display:flex; flex-direction:column; gap:10px;
  }
  .account-details-section{margin-bottom:10px;}
  .account-details-standalone-field{margin-bottom:10px;}
  .account-details-section-title{
    font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:var(--muted);
    font-weight:600; margin:0 0 6px 2px;
  }
  .account-details-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:10px;
    padding:12px; background:var(--bg-input); border-radius:8px;
  }
  .account-details-actions{display:flex; justify-content:space-between; align-items:center; margin-top:10px;}
  .inline-edit-panel{
    background:var(--bg-input); border:1px solid var(--line); border-radius:8px; padding:14px;
  }
  tr.edit-row td{padding:10px 8px; background:rgba(91,140,255,0.04);}

  .note{font-size:12px; color:var(--muted); font-style:normal;}
  .empty{padding:20px; text-align:center; color:var(--muted); font-style:italic;}
  .overview-empty-state{padding:56px 20px; text-align:center;}
  .overview-empty-state p{color:var(--muted); margin:0 0 18px; font-size:14px;}
  .toast{
    position:fixed; bottom:20px; right:20px; background:var(--ink); color:var(--bg);
    padding:10px 16px; border-radius:8px; font-size:13px; opacity:0; transition:opacity .3s;
    pointer-events:none; font-weight:600; z-index:1300;
  }
  .toast.show{opacity:1;}
  .toast.error{background:var(--coral); color:#2A0006;}
  .toast.success{background:var(--teal); color:#04120D;}
  .toast.warning{background:var(--gold); color:#241503;}
  .toast.with-action{pointer-events:auto; display:flex; align-items:center; gap:12px;}
  .toast-undo-btn{
    background:none; border:1.5px solid var(--bg); color:var(--bg); border-radius:6px;
    padding:3px 10px; font-size:12px; font-weight:700; cursor:pointer; white-space:nowrap;
  }
  .toast-undo-btn:hover{background:var(--bg); color:var(--ink);}
  .actions-cell{display:flex; gap:6px; flex-wrap:nowrap; justify-content:flex-end;}
  .fund-card{border:1px solid var(--line); border-radius:var(--radius); padding:16px; background:var(--bg-card-alt);}
  .fund-card .label{font-size:11.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:600;}
  .fund-card .value{font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:600; margin-top:4px; color:var(--gold);}
  .csv-hint{font-size:12px; color:var(--muted); margin-top:6px;}
  .scroll-x{overflow-x:auto;}

  .confirm-overlay{
    display:none; position:fixed; inset:0; background:rgba(4,6,9,0.72);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    align-items:center; justify-content:center; z-index:1000; padding:20px;
  }
  .confirm-overlay.show{display:flex;}
  .confirm-box{
    background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px 24px; max-width:380px; width:100%;
    max-height:85vh; overflow-y:auto;
  }
  .confirm-box.wide{max-width:640px;}

  .auth-gate{
    min-height:100vh; display:flex; flex-direction:column; background:var(--bg); overflow-x:hidden;
  }
  .landing{width:100%;}
  .landing-header{
    display:flex; align-items:center; justify-content:space-between;
    max-width:1040px; margin:0 auto; padding:20px 24px;
  }
  .landing-header-logo{height:32px; width:auto; display:block;}
  .landing-hero{
    max-width:680px; margin:0 auto; padding:40px 24px 64px; text-align:center;
  }
  .landing-hero-icon{width:64px; height:64px; margin:0 auto 20px; display:block; animation:landing-float 4s ease-in-out infinite;}
  @keyframes landing-float{0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);}}
  .landing-badge{
    display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px;
    background:var(--accent-soft); border:1px solid var(--accent); margin-bottom:20px;
    font-family:'Nunito Sans'; font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.3px;
  }
  .landing-badge-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); animation:landing-pulse 2s ease-in-out infinite;}
  @keyframes landing-pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
  .landing-hero h1{
    font-family:'Spectral',serif; font-weight:600; font-size:clamp(28px,5vw,46px);
    line-height:1.15; margin:0 0 16px; color:var(--ink);
  }
  .landing-hero-sub{font-size:16px; line-height:1.6; color:var(--muted); max-width:520px; margin:0 auto 28px;}
  .landing-hero-note{margin-top:12px;}
  button.btn.large{padding:13px 26px; font-size:15px; border-radius:8px;}
  .landing-features{max-width:1040px; margin:0 auto; padding:24px 24px 64px;}
  .landing-features h2, .landing-pricing h2, .landing-faq h2{
    font-family:'Spectral',serif; font-weight:600; font-size:28px; text-align:center; color:var(--ink); margin:0 0 36px;
  }
  .landing-features-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  @media (max-width:900px){.landing-features-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.landing-features-grid{grid-template-columns:1fr;}}
  .landing-feature-card{
    background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); padding:22px;
  }
  .landing-feature-icon{
    width:44px; height:44px; border-radius:10px; background:var(--accent-soft); color:var(--accent);
    display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  }
  .landing-feature-card h3{font-family:'Spectral',serif; font-weight:600; font-size:16px; color:var(--ink); margin:0 0 8px;}
  .landing-feature-card p{font-size:13.5px; line-height:1.55; color:var(--muted); margin:0;}
  .landing-philosophy{max-width:1040px; margin:0 auto; padding:0 24px 64px;}
  .landing-philosophy-card{
    background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius);
    padding:36px 32px; text-align:center;
  }
  .landing-philosophy-kicker{
    font-family:'Nunito Sans'; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
    color:var(--accent); margin-bottom:10px;
  }
  .landing-philosophy-card h2{
    font-family:'Spectral',serif; font-weight:600; font-size:24px; color:var(--ink); margin:0 0 16px;
  }
  .landing-philosophy-card p{
    font-size:14px; line-height:1.65; color:var(--muted); max-width:680px; margin:0 auto 32px;
  }
  .landing-philosophy-buckets{
    display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:640px; margin:0 auto;
  }
  @media (max-width:640px){.landing-philosophy-buckets{grid-template-columns:repeat(2,1fr);}}
  .landing-philosophy-bucket{
    background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:16px 10px;
    display:flex; flex-direction:column; gap:4px;
  }
  .landing-philosophy-bucket .value{font-family:'IBM Plex Mono',monospace; font-size:19px; font-weight:600; color:var(--ink);}
  .landing-philosophy-bucket .label{font-family:'Nunito Sans'; font-size:11.5px; color:var(--muted);}
  .landing-philosophy-bucket-highlight{border-color:var(--accent); background:var(--accent-soft);}
  .landing-philosophy-bucket-highlight .value{color:var(--accent);}
  .landing-pricing{max-width:1040px; margin:0 auto; padding:24px 24px 64px;}
  .landing-pricing-sub{text-align:center; color:var(--muted); font-size:14px; margin:-24px 0 32px;}
  .landing-pricing-card{
    max-width:380px; margin:0 auto; background:var(--bg-card); border:1.5px solid var(--accent);
    border-radius:var(--radius); padding:32px 28px; text-align:center;
  }
  .landing-trial-badge{
    display:inline-block; padding:5px 12px; border-radius:999px; background:var(--teal-soft); color:var(--teal);
    font-family:'Nunito Sans'; font-size:12px; font-weight:700; margin-bottom:14px;
  }
  .landing-price{
    font-family:'IBM Plex Mono',monospace; font-size:40px; font-weight:600; color:var(--ink); margin-bottom:20px;
  }
  .landing-price span{font-family:'Nunito Sans'; font-size:15px; font-weight:600; color:var(--muted); margin-left:2px;}
  .landing-pricing-list{list-style:none; margin:0 0 24px; padding:0; text-align:left; display:flex; flex-direction:column; gap:10px;}
  .landing-pricing-list li{
    font-size:13.5px; color:var(--ink); padding-left:24px; position:relative; line-height:1.4;
  }
  .landing-pricing-list li::before{
    content:'✓'; position:absolute; left:0; top:0; color:var(--accent); font-weight:700;
  }
  .landing-pricing-note{margin-top:14px;}
  .landing-faq{max-width:680px; margin:0 auto; padding:24px 24px 72px;}
  .landing-faq-item{
    border-bottom:1px solid var(--line); padding:16px 0;
  }
  .landing-faq-item summary{
    cursor:pointer; font-family:'Nunito Sans'; font-weight:600; font-size:14.5px; color:var(--ink); list-style:none;
  }
  .landing-faq-item summary::-webkit-details-marker{display:none;}
  .landing-faq-item summary::before{content:'+'; display:inline-block; width:16px; color:var(--accent); font-weight:700;}
  .landing-faq-item[open] summary::before{content:'–';}
  .landing-faq-item p{margin:10px 0 0 16px; font-size:13.5px; line-height:1.55; color:var(--muted);}
  .landing-footer{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:28px 24px; border-top:1px solid var(--line);
    font-size:12.5px; color:var(--muted); text-align:center;
  }
  .landing-footer-row{display:flex; align-items:center; gap:10px;}
  .landing-footer-icon{width:22px; height:22px; border-radius:6px;}
  .landing-footer-disclaimer{font-size:11px; color:var(--muted); opacity:.7; max-width:480px; margin:0; line-height:1.5;}
  .confirm-box p{margin:0 0 18px; font-size:14px; line-height:1.5; color:var(--ink);}
  .confirm-box .note{color:var(--muted); font-size:12px; line-height:normal;}
  .confirm-actions{display:flex; justify-content:flex-end; gap:10px;}

  /* iOS Safari auto-zooms the page on focusing any input/select whose computed
     font-size is under 16px — that's the "page grows and pans sideways when I
     tap a field" behaviour. Keeping form fields at >=16px on mobile only (the
     compact look under 16px stays on desktop) avoids triggering it at all.
     Keep this block LAST in the file: every rule above sets font-size on some
     input/select variant at equal or higher specificity than plain `input,
     select`, so with an unconditional cascade, whichever rule is written last
     wins regardless of the media query — this one needs to out-rank all of
     them, including ones added after this comment was written. */
  @media (max-width:640px){
    input, select, .multiselect-search{font-size:16px;}
  }

  /* Tooltips only make sense with a real hover state — on touch they either
     never appear or need an extra tap that eats the first tap meant for the
     button underneath. Turn them off on touch devices everywhere except
     Pareja, where the user still wants them. Same equal-specificity-vs-
     source-order situation as the font-size block above (both this rule and
     the base .has-tooltip:hover::after are `.has-tooltip:hover::after`), so
     this also needs to stay LAST in the file. */
  @media (hover:none) and (pointer:coarse){
    .has-tooltip:hover::after, .has-tooltip:hover::before{display:none;}
    #panel-pareja .has-tooltip:hover::after, #panel-pareja .has-tooltip:hover::before{display:block;}
  }