:root{
    --bg:#222B2A; --card:#16191A; --card2:#1C2122;
    --txt:#FFFFFF; --txt2:#8A9296; --line:#2C3433;
    --verde:#2EE6A6; --ciano:#19D3DA; --rosa:#FF2E74;
    --amarelo:#FFD23F; --laranja:#FF7A45; --azul:#3B9EFF;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
  body{
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    background:var(--bg); color:var(--txt);
    max-width:560px; margin:0 auto; padding:0 16px 96px;
    min-height:100vh;
  }
  h1,h2,h3{font-weight:700;}
  .top{display:flex; justify-content:space-between; align-items:center; padding:22px 2px 14px;}
  .top h1{font-size:24px;}
  .top .sub{color:var(--txt2); font-size:13px; margin-top:2px;}
  /* seletor de mês */
  .month-nav{display:flex; align-items:center; gap:10px; background:var(--card); border-radius:14px; padding:8px 6px; margin-bottom:16px;}
  .month-nav button{background:var(--card2); color:var(--txt); border:none; width:38px; height:38px; border-radius:10px; font-size:20px; cursor:pointer;}
  .month-nav button:active{background:var(--line);}
  .month-nav .label{flex:1; text-align:center; font-weight:700; font-size:16px; text-transform:capitalize;}
  /* cards resumo */
  .cards{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;}
  .pill{background:var(--card); border-radius:16px; padding:14px;}
  .pill .lbl{font-size:12px; color:var(--txt2); display:flex; align-items:center; gap:6px;}
  .pill .val{font-size:20px; font-weight:700; margin-top:6px;}
  .dot{width:9px; height:9px; border-radius:50%; display:inline-block;}
  .saldo{background:linear-gradient(135deg,#1b2322,#101413); border-radius:16px; padding:16px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line);}
  .saldo .lbl{font-size:12px; color:var(--txt2);}
  .saldo .val{font-size:28px; font-weight:800; margin-top:4px;}
  /* secção / cartão de gráfico */
  .chart-card{background:var(--card); border-radius:16px; padding:16px; margin-bottom:12px;}
  .chart-card h3{font-size:14px; margin-bottom:4px;}
  .chart-card .hint{font-size:12px; color:var(--txt2); margin-bottom:12px;}
  canvas{width:100%; display:block;}
  .legend{display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:12px;}
  .legend span{font-size:12px; color:var(--txt2); display:flex; align-items:center; gap:6px;}
  .empty{color:var(--txt2); font-size:13px; text-align:center; padding:24px 0;}
  .legend span{cursor:pointer;}
  .cat-detalhe{margin-top:14px;}
  .cat-detalhe .cab{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; padding-top:12px; border-top:1px solid var(--line);}
  .cat-detalhe .cab b{font-size:15px; display:flex; align-items:center; gap:8px;}
  .cat-detalhe .cab .tot{font-size:13px; color:var(--txt2);}
  .cat-detalhe .fechar{background:none; border:none; color:var(--ciano); font-size:13px; cursor:pointer; padding:0;}
  .cat-row{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:11px 12px; background:var(--card2); border-radius:10px; margin-bottom:6px;}
  .cat-row .esq{flex:1; min-width:0;}
  .cat-row .esq .nt{font-size:13px; line-height:1.35; word-break:break-word; overflow-wrap:anywhere;}
  .cat-row .esq .dt{font-size:11px; color:var(--txt2); margin-top:3px;}
  .cat-row .vl{font-weight:700; font-size:14px; white-space:nowrap; flex-shrink:0;}
  /* dicas */
  .dica-card{background:var(--card); border-radius:16px; padding:16px; margin-bottom:12px;}
  .dica-card h3{font-size:15px; margin-bottom:6px; display:flex; align-items:center; gap:8px;}
  .dica-item{display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--line); font-size:13.5px; line-height:1.5; color:var(--txt2);}
  .dica-item:first-of-type{border-top:none;}
  .dica-item .em{font-size:19px; flex-shrink:0; line-height:1.3;}
  .dica-item b{color:var(--txt); font-weight:700;}
  .dica-destaque{background:linear-gradient(135deg, rgba(25,211,218,.16), rgba(46,230,166,.10)); border:1px solid var(--line);}
  /* meta */
  .meta-bar{height:12px; background:var(--card2); border-radius:8px; overflow:hidden; margin:10px 0 8px;}
  .meta-bar > div{height:100%; background:linear-gradient(90deg,var(--ciano),var(--verde)); border-radius:8px; transition:width .4s;}
  .meta-row{display:flex; justify-content:space-between; font-size:12px; color:var(--txt2);}
  .link-btn{background:none; border:none; color:var(--ciano); font-size:13px; cursor:pointer; padding:0; text-decoration:underline;}
  /* extrato */
  .filtros{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;}
  .filtros select{flex:1; min-width:120px; background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:12px; padding:10px; font-size:14px;}
  .item{display:flex; align-items:center; gap:12px; background:var(--card); border-radius:14px; padding:12px 14px; margin-bottom:8px;}
  .item .ic{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;}
  .item .mid{flex:1; min-width:0;}
  .item .mid .t{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .item .mid .s{font-size:12px; color:var(--txt2); margin-top:2px;}
  .item .amt{font-weight:700; font-size:15px; white-space:nowrap;}
  .item .del{background:none; border:none; color:var(--txt2); font-size:18px; cursor:pointer; padding:8px; min-width:40px; min-height:40px;}
  /* form */
  .seg{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:16px;}
  .seg button{padding:12px 4px; border-radius:12px; border:2px solid var(--line); background:var(--card); color:var(--txt2); font-weight:700; font-size:14px; cursor:pointer;}
  .seg button.on[data-t="ganho"]{border-color:var(--verde); color:var(--verde); background:rgba(46,230,166,.1);}
  .seg button.on[data-t="gasto"]{border-color:var(--rosa); color:var(--rosa); background:rgba(255,46,116,.1);}
  .seg button.on[data-t="guardado"]{border-color:var(--ciano); color:var(--ciano); background:rgba(25,211,218,.1);}
  label{display:block; font-size:12px; color:var(--txt2); margin:14px 0 6px;}
  input,select,textarea{width:100%; background:var(--card); color:var(--txt); border:1px solid var(--line); border-radius:12px; padding:13px; font-size:16px; font-family:inherit;}
  textarea{resize:none; height:64px;}
  .valor-input{font-size:26px; font-weight:800; text-align:center;}
  .salvar{width:100%; padding:16px; border:none; border-radius:14px; background:var(--verde); color:#06211a; font-size:17px; font-weight:800; margin-top:22px; cursor:pointer;}
  /* nav inferior */
  .tabbar{position:fixed; bottom:0; left:0; right:0; max-width:560px; margin:0 auto; background:var(--card); border-top:1px solid var(--line); display:flex; padding:8px 8px env(safe-area-inset-bottom);}
  .tabbar button{flex:1; background:none; border:none; color:var(--txt2); padding:8px 0; font-size:11px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px;}
  .tabbar button .i{font-size:20px;}
  .tabbar button.on{color:var(--ciano);}
  .tabbar .add{margin-top:-26px;}
  .tabbar .add .i{background:var(--verde); color:#06211a; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 6px 18px rgba(46,230,166,.35);}
  .page{display:none;} .page.on{display:block;}
  .toast{position:fixed; bottom:96px; left:50%; transform:translateX(-50%); background:var(--verde); color:#06211a; padding:12px 20px; border-radius:30px; font-weight:700; font-size:14px; opacity:0; transition:opacity .3s; pointer-events:none; z-index:99;}
  .toast.show{opacity:1;}

  /* ============ LAYOUT PARA PC (tela larga) ============ */
  @media (min-width:900px){
    body{ max-width:1180px; padding:18px 40px 48px 150px; }
    .top{ padding:10px 2px 18px; }
    .top h1{ font-size:28px; }

    /* menu vira barra lateral à esquerda */
    .tabbar{
      flex-direction:column; top:0; bottom:auto; left:0; right:auto;
      width:118px; max-width:118px; height:100vh; margin:0;
      border-top:none; border-right:1px solid var(--line);
      padding:26px 10px; gap:8px; justify-content:flex-start;
    }
    .tabbar button{ padding:14px 0; border-radius:14px; font-size:12px; }
    .tabbar button.on{ background:var(--card2); }
    .tabbar .add{ margin:6px 0; order:0; }
    .tabbar .add .i{ width:48px; height:48px; font-size:28px; }

    /* topo do resumo: saldo + 4 cartões numa linha só */
    .summary{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1fr; gap:14px; margin-bottom:16px; }
    .summary .saldo{ margin:0; flex-direction:column; align-items:flex-start; justify-content:center; }
    .summary .saldo .val{ font-size:24px; }
    .summary .cards{ display:contents; }
    .summary .pill{ margin:0; display:flex; flex-direction:column; justify-content:center; }

    /* gráficos lado a lado */
    .charts-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
    .charts-wrap .chart-card{ margin:0; }
    #metaCard{ grid-column:1 / -1; }
    .charts-wrap .chart-card:last-child{ grid-column:1 / -1; }

    /* adicionar e extrato: largura confortável, centralizados */
    #page-add{ max-width:560px; }
    #page-extrato{ max-width:720px; }
    .toast{ left:calc(50% + 59px); }

    /* feedback de mouse no PC */
    .item:hover{ background:var(--card2); }
    .tabbar button:hover{ color:var(--txt); }
    .salvar:hover, .seg button:hover{ filter:brightness(1.08); }
    .month-nav button:hover{ background:var(--line); }
  }