:root{
    --teal-950:#0B2E2F;
    --teal-900:#0F3D3E;
    --teal-700:#175A5B;
    --teal-100:#DCEAE8;
    --gold-600:#B4872A;
    --gold-100:#F3E7CC;
    --bg:#F6F4EF;
    --surface:#FFFFFF;
    --line:#E4E0D6;
    --ink:#1C2321;
    --ink-soft:#5B655F;
    --ok:#2F7D5A;
    --ok-bg:#E4F3EA;
    --warn:#B7791F;
    --warn-bg:#FBF0DC;
    --bad:#B3462C;
    --bad-bg:#FBE7E0;
    --muted:#8A8F86;
    --muted-bg:#EDECE6;
    --radius:14px;
    --nav-h:64px;
    --side-w:230px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  #root{ min-height:100vh; }
  .shell{
    max-width:460px;
    margin:0 auto;
    min-height:100vh;
    background:var(--bg);
    position:relative;
    padding-bottom:calc(var(--nav-h) + 18px);
  }
  /* ---- top bar ---- */
  .topbar{
    background:var(--teal-900);
    color:#fff;
    padding:18px 18px 16px;
    position:sticky;
    top:0;
    z-index:20;
  }
  .topbar .brand{
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--gold-100);
    font-weight:600;
    margin-bottom:2px;
  }
  .topbar h1{
    font-size:20px;
    margin:0;
    font-weight:700;
    letter-spacing:-0.01em;
  }
  .topbar .sub{
    font-size:12.5px;
    color:#BFD8D5;
    margin-top:2px;
  }
  .topbar .back{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#EAF3F1;
    font-size:14px;
    font-weight:600;
    background:none;
    border:none;
    padding:0 0 10px 0;
    cursor:pointer;
  }
  .navbar .brandmark{display:none;}
  /* ---- content ---- */
  .content{padding:16px 16px 8px;}
  .card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px;
    margin-bottom:12px;
  }
  .card h2{
    font-size:15px;
    margin:0 0 10px;
    font-weight:700;
    color:var(--teal-900);
  }
  .grid-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .stat{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px;
    display:block;
    text-decoration:none;
    color:inherit;
  }
  .stat .label{
    font-size:11.5px;
    color:var(--ink-soft);
    text-transform:uppercase;
    letter-spacing:.04em;
    font-weight:600;
    margin-bottom:6px;
  }
  .stat .value{
    font-size:19px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
  }
  .stat.accent{background:var(--teal-900);border-color:var(--teal-900);}
  .stat.accent .label{color:#BFD8D5;}
  .stat.accent .value{color:#fff;}
  .stat.bad{background:var(--bad-bg);border-color:#EAC9BC;}
  .stat.bad .value{color:var(--bad);}
  .stat.clickable{cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;}
  .stat.clickable:active{transform:scale(.97);}
  .stat.clickable:hover{box-shadow:0 4px 14px rgba(15,61,62,.12);}

  .filter-chip{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--teal-100);
    color:var(--teal-900);
    border-radius:10px;
    padding:9px 14px;
    font-size:13px;
    margin-bottom:12px;
  }
  .filter-chip a{color:var(--teal-700);font-weight:700;text-decoration:none;}

  .list-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid var(--line);
    cursor:pointer;
    text-decoration:none;
    color:inherit;
  }
  .list-item:last-child{border-bottom:none;}
  .list-item .main{flex:1;min-width:0;}
  .list-item .name{font-weight:600;font-size:14.5px;color:var(--ink);}
  .list-item .meta{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}
  .list-item .right{text-align:right;margin-left:10px;}
  .list-item .amount{font-weight:700;font-size:14.5px;font-variant-numeric:tabular-nums;}
  .empty{
    text-align:center;
    color:var(--ink-soft);
    font-size:13.5px;
    padding:22px 10px;
  }

  .badge{
    display:inline-block;
    font-size:11px;
    font-weight:700;
    padding:3px 9px;
    border-radius:999px;
    letter-spacing:.02em;
  }
  .badge.ativo{background:var(--ok-bg);color:var(--ok);}
  .badge.atrasado{background:var(--bad-bg);color:var(--bad);}
  .badge.quitado{background:var(--muted-bg);color:var(--muted);}
  .badge.cancelado{background:var(--muted-bg);color:var(--muted);}

  /* ---- forms ---- */
  label{
    display:block;
    font-size:12.5px;
    font-weight:600;
    color:var(--ink-soft);
    margin:14px 0 6px;
  }
  label:first-child{margin-top:0;}
  input[type=text],input[type=tel],input[type=number],input[type=date],input[type=email],input[type=password],select,textarea{
    width:100%;
    padding:12px 12px;
    border:1.5px solid var(--line);
    border-radius:10px;
    font-size:15px;
    background:#fff;
    color:var(--ink);
    font-family:inherit;
  }
  input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:var(--teal-700);
  }
  .hint{font-size:12px;color:var(--ink-soft);margin-top:5px;}
  input[readonly]{background:var(--muted-bg);color:var(--ink-soft);}
  .field-readonly{
    background:var(--teal-100);
    border:1.5px solid var(--teal-100);
    border-radius:10px;
    padding:12px;
    font-size:15px;
    font-weight:700;
    color:var(--teal-900);
    font-variant-numeric:tabular-nums;
  }
  .radio-group{display:flex;flex-direction:column;gap:8px;}
  .radio-opt{
    border:1.5px solid var(--line);
    border-radius:10px;
    padding:12px;
    display:flex;
    align-items:flex-start;
    gap:10px;
    cursor:pointer;
  }
  .radio-opt.selected{border-color:var(--teal-700);background:var(--teal-100);}
  .radio-opt input{margin-top:3px;}
  .radio-opt .rtitle{font-weight:700;font-size:14px;}
  .radio-opt .rdesc{font-size:12.5px;color:var(--ink-soft);margin-top:2px;}

  .btn{
    display:block;
    width:100%;
    box-sizing:border-box;
    text-decoration:none;
    text-align:center;
    padding:14px;
    border-radius:11px;
    border:none;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    font-family:inherit;
  }
  .btn-primary{background:var(--teal-900);color:#fff;}
  .btn-primary:active{background:var(--teal-950);}
  .btn-gold{background:var(--gold-600);color:#fff;}
  .btn-outline{background:#fff;border:1.5px solid var(--line);color:var(--ink);}
  .btn-danger-outline{background:#fff;border:1.5px solid #EAC9BC;color:var(--bad);}
  .btn + .btn{margin-top:10px;}
  .btn[disabled]{opacity:.45;pointer-events:none;}
  .btn-sm{padding:10px;font-size:13.5px;}

  .error-box{
    background:var(--bad-bg);
    color:var(--bad);
    border-radius:10px;
    padding:10px 12px;
    font-size:13px;
    margin-top:12px;
    font-weight:600;
  }
  .msg-box{
    background:var(--ok-bg);
    color:var(--ok);
    border-radius:10px;
    padding:10px 12px;
    font-size:13px;
    margin-bottom:14px;
    font-weight:600;
  }

  /* ---- extrato ---- */
  .extrato-row{
    padding:10px 0;
    border-bottom:1px dashed var(--line);
  }
  .extrato-row:last-child{border-bottom:none;}
  .extrato-row .etop{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:6px;
  }
  .extrato-row .edate{font-size:12.5px;font-weight:700;color:var(--ink);}
  .extrato-row .emov{font-size:12px;color:var(--ink-soft);}
  .extrato-row .evalues{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:6px;
  }
  .extrato-row .ecol{min-width:0;}
  .extrato-row .elabel{color:var(--ink-soft);font-size:10.5px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:2px;}
  .extrato-row .eval{font-weight:700;font-variant-numeric:tabular-nums;font-size:12.5px;white-space:nowrap;}

  /* ---- bottom nav ---- */
  .navbar{
    position:fixed;
    left:0;right:0;bottom:0;
    max-width:460px;
    margin:0 auto;
    height:var(--nav-h);
    background:#fff;
    border-top:1px solid var(--line);
    display:flex;
    z-index:30;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .navbar a{
    text-decoration:none;
    flex:1;
    border:none;
    background:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:var(--ink-soft);
    font-size:11px;
    font-weight:600;
    cursor:pointer;
    font-family:inherit;
  }
  .navbar a.active{color:var(--teal-900);}
  .navbar svg{width:21px;height:21px;}

  .fab{
    position:fixed;
    text-decoration:none;
    right:calc(50% - 230px + 16px);
    bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom));
    background:var(--gold-600);
    color:#fff;
    border:none;
    width:52px;height:52px;
    border-radius:50%;
    font-size:26px;
    font-weight:400;
    box-shadow:0 6px 16px rgba(180,135,42,.4);
    cursor:pointer;
    z-index:25;
    display:flex;align-items:center;justify-content:center;
  }
  @media (max-width:460px){
    .fab{right:16px;}
  }

  /* =========================================================
     DESKTOP / TELA LARGA (>= 880px)
  ========================================================= */
  @media (min-width:880px){
    #root{ display:flex; align-items:stretch; }

    .shell{
      max-width:none;
      margin:0;
      flex:1 1 auto;
      padding-bottom:32px;
    }

    .topbar{ padding:26px 40px 20px; }
    .content{ padding:24px 40px 40px; max-width:1180px; margin:0 auto; }
    .content.narrow{ max-width:560px; margin:0 auto; }

    .grid-stats{ grid-template-columns:repeat(4,1fr); }

    .dash-top-row{
      display:grid;
      grid-template-columns:340px 1fr;
      gap:16px;
      align-items:stretch;
      margin-bottom:12px;
    }
    .dash-top-row > .card{ margin-bottom:0; }
    .dash-top-row .grid-stats{ margin-bottom:0 !important; height:100%; }

    .dash-two-col{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:16px;
    }
    .dash-two-col > .card{ margin-bottom:0; }

    .list-grid{
      display:grid;
      grid-template-columns:repeat(auto-fill, minmax(300px,1fr));
      gap:10px;
    }
    .list-grid .list-item{
      border:1px solid var(--line);
      border-radius:12px;
      padding:14px;
      margin:0;
    }

    /* sidebar (reaproveita o navbar) */
    .navbar{
      order:-1;
      position:sticky;
      top:0;
      left:auto;right:auto;bottom:auto;
      align-self:flex-start;
      height:100vh;
      width:var(--side-w);
      flex:0 0 var(--side-w);
      max-width:none;
      margin:0;
      background:var(--teal-950);
      border-top:none;
      border-right:1px solid rgba(255,255,255,.08);
      flex-direction:column;
      align-items:stretch;
      padding:26px 14px;
      gap:4px;
      padding-bottom:26px;
    }
    .navbar .brandmark{
      display:flex;
      align-items:center;
      gap:10px;
      color:#fff;
      font-weight:800;
      font-size:16px;
      padding:0 10px 22px;
    }
    .navbar .brandmark .dot{
      width:32px;height:32px;border-radius:9px;
      background:var(--gold-600);
      display:flex;align-items:center;justify-content:center;
      font-size:15px;
    }
    .navbar a{
      flex:none;
      flex-direction:row;
      justify-content:flex-start;
      gap:11px;
      padding:11px 12px;
      border-radius:10px;
      color:#BFD8D5;
      font-size:14px;
    }
    .navbar a:hover{background:rgba(255,255,255,.06);}
    .navbar a.active{background:rgba(255,255,255,.14);color:#fff;}
    .navbar svg{width:19px;height:19px;flex:none;}

    .fab{
      position:fixed;
      right:40px;
      left:auto;
      bottom:40px;
    }

    .login-wrap{ align-items:center; }
  }

  .login-card{ max-width:400px; margin:0 auto; }

  .banner-test{
    background:var(--gold-100);
    color:#6E5218;
    font-size:12px;
    text-align:center;
    padding:7px 12px;
    font-weight:600;
  }

  .login-wrap{
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:28px 24px;
    background:linear-gradient(180deg,var(--teal-950) 0%,var(--teal-900) 55%, var(--bg) 55%);
  }
  .login-card{
    background:#fff;
    border-radius:18px;
    padding:26px 22px;
    box-shadow:0 12px 30px rgba(11,46,47,.25);
  }
  .login-logo{
    width:46px;height:46px;
    border-radius:12px;
    background:var(--gold-600);
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-weight:800;font-size:20px;
    margin-bottom:14px;
  }
  .login-title{font-size:21px;font-weight:800;color:var(--teal-950);margin-bottom:4px;}
  .login-sub{font-size:13px;color:var(--ink-soft);margin-bottom:18px;}
  .footnote{
    text-align:center;
    font-size:11.5px;
    color:var(--ink-soft);
    margin-top:20px;
    line-height:1.5;
  }
  a.linklike{color:var(--teal-700);font-weight:700;text-decoration:none;}