@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
  --ink:#0b1a33; --bg:#f6f7fb; --surface:#ffffff;
  --muted: color-mix(in srgb, black 45%, var(--bg));
  --line: color-mix(in srgb, black 9%, var(--bg));
  --surface-2: color-mix(in srgb, black 3%, var(--bg));
  --sidebar-bg: #ffffff;
  --navy:#0a1340; --navy-mid:#1d4ed8; --blue:#60a5fa;
  --accent:#1d4ed8; --accent-ink:#ffffff; --danger:#dc2626; --success:#0e9f6e;
  --gold: color-mix(in srgb, var(--accent) 25%, white 70%);
  --gold-deep: color-mix(in srgb, var(--accent) 70%, black 15%);
  --shadow: 0 10px 30px rgba(10,19,64,.07);
  --radius: 16px;
}
:root[data-theme="dark"] {
  --ink:#f8f7f3; --bg:#02253d;
  --muted: color-mix(in srgb, white 55%, var(--bg));
  --line: color-mix(in srgb, white 20%, var(--bg));
  --surface: color-mix(in srgb, white 13%, var(--bg));
  --surface-2: color-mix(in srgb, white 6%, var(--bg));
  --sidebar-bg: color-mix(in srgb, black 32%, var(--bg));
  --navy:#02253d; --navy-mid:#2f496e; --blue:#94afc9;
  --gold: color-mix(in srgb, var(--accent) 35%, white 15%);
  --gold-deep: color-mix(in srgb, var(--accent) 55%, white 35%);
  --shadow: 0 10px 30px rgba(0,0,0,.45);
}
* { box-sizing:border-box; }
html { font-size:16px; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'DM Sans',Arial,sans-serif; font-size:15px; transition:background .2s,color .2s; }
button, input, select { font:inherit; } button { cursor:pointer; border:0; background:none; }
.shell { min-height:100vh; display:flex; }

/* ============ SIDEBAR / NAV ============ */
.sidebar { width:256px; background:var(--sidebar-bg); padding:28px 16px 18px; border-right:1px solid var(--line); display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:5; }
.brand { display:flex; gap:10px; align-items:center; font-family:'Playfair Display',serif; font-size:21px; font-weight:700; margin:0 10px 28px; letter-spacing:-.6px; }
.brand-mark{background:linear-gradient(145deg,var(--accent),var(--navy));color:#fff;width:34px;height:34px;display:inline-grid;place-items:center;border-radius:10px;font:700 20px/1 'Playfair Display',serif;box-shadow:0 7px 15px rgba(0,0,0,.25);overflow:hidden;flex-shrink:0}
.brand-mark img{width:100%;height:100%;object-fit:cover}
.workspace { border:1px solid var(--line); border-radius:14px; padding:10px; display:flex; align-items:center; gap:10px; margin:0 2px 24px; background:var(--surface-2); }
.avatar,.user-avatar { display:grid; place-items:center; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface)); width:34px; height:34px; border-radius:11px; font-weight:700; font-size:15px; overflow:hidden; flex-shrink:0; }
.avatar img,.user-avatar img{width:100%;height:100%;object-fit:cover}
.workspace strong,.workspace small { display:block; line-height:1.25; }
.workspace strong { font-size:14px; } .workspace small { font-size:12px; color:var(--muted); margin-top:2px; }
.chevron{margin-left:auto;color:var(--muted)}
nav { display:grid; gap:4px; }
.nav-section-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;margin:14px 12px 6px;font-weight:700}
nav button,.sidebar-bottom>button { color:var(--muted);text-align:left;padding:12px 14px;border-radius:11px;font-size:14px;display:flex;align-items:center;gap:13px;width:100%; }
nav button:hover,nav .nav-active { background:color-mix(in srgb, var(--accent) 13%, var(--surface));color:var(--accent);font-weight:600; }
.icon{font-family:Arial,sans-serif;font-weight:600;line-height:1;display:inline-block;font-size:18px}
.icon-plus{font-size:22px!important;font-weight:400}
.sidebar-bottom{margin-top:auto} .sidebar-bottom>button{margin-bottom:16px}
.help-card{background:linear-gradient(155deg,color-mix(in srgb, var(--gold) 20%, var(--surface)),color-mix(in srgb, var(--gold) 10%, var(--surface)));border-radius:15px;padding:15px;margin:0 2px;color:var(--ink)}
.help-card>span{color:var(--gold-deep)}
.help-card strong{font:600 14px/1.4 'Playfair Display',serif;display:block;margin:6px 0}
.help-card p{font-size:11px;color:var(--muted);margin:0}

/* ============ CONTENT ============ */
.content{margin-left:256px;width:calc(100% - 256px);padding:30px 48px 90px;max-width:1550px}
.content header{display:flex;justify-content:space-between;align-items:center}
.welcome{font-size:17px;font-weight:600;margin:0 0 4px}
.date{color:var(--muted);font-size:13px;text-transform:capitalize;margin:0}
.header-actions{display:flex;align-items:center;gap:14px}
.notification{color:var(--muted);padding:6px;font-size:20px;border-radius:10px}.notification:hover{background:var(--surface-2)}
.user-avatar{border:0;width:36px;height:36px;border-radius:12px;overflow:hidden;flex-shrink:0}
.user-avatar img{width:100%;height:100%;object-fit:cover}
.header-profile{display:flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;border-radius:30px}
.header-profile:hover{background:var(--surface-2)}
.header-profile .header-profile-name{font-size:13px;font-weight:600;color:var(--ink)}
.theme-toggle-btn{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:var(--muted);font-size:17px}
.theme-toggle-btn:hover{background:var(--surface-2)}

.eyebrow{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:1.4px}
.overview-title{display:flex;justify-content:space-between;align-items:end;margin:34px 0 24px}
.period-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 18px;margin-bottom:22px;box-shadow:var(--shadow)}
.period-nav{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--ink)}
.period-nav button{width:28px;height:28px;border-radius:8px;background:var(--surface-2);color:var(--muted);display:grid;place-items:center;font-size:15px}
.period-nav button:hover{color:var(--accent)}
.period-stats{display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.period-stats i{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:5px}
.period-stats strong{color:var(--ink);font-weight:600}
.overview-title h1{font:700 32px/1.1 'Playfair Display',serif;letter-spacing:-1px;margin:8px 0}
.overview-title h1 em{font-weight:600;color:var(--gold-deep);font-style:italic}
.overview-title p,.section-heading p{margin:0;color:var(--muted);font-size:13px}

.primary{background:var(--accent);color:var(--accent-ink);border-radius:11px;padding:12px 17px;display:flex;gap:8px;align-items:center;font-weight:600;font-size:14px;box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent)}
.primary:hover{filter:brightness(.92)}
.secondary{background:color-mix(in srgb, var(--accent) 12%, var(--surface));color:var(--accent);border-radius:11px;padding:12px 17px;display:flex;gap:8px;align-items:center;font-weight:600;font-size:14px}
.secondary:hover{background:color-mix(in srgb, var(--accent) 20%, var(--surface))}

.summary-grid{display:grid;grid-template-columns:1.65fr 1fr 1fr;gap:16px}
.balance-card,.stat-card,.goal-card,.account-card,.momentum,.reserves-list article,.list-card,.cal-card,.mini-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.balance-card{padding:20px 22px 0;overflow:hidden;height:190px}
.card-label{color:var(--muted);font-size:12px;display:flex;justify-content:space-between}
.trend{color:var(--success);background:color-mix(in srgb, var(--success) 16%, var(--surface));padding:4px 7px;border-radius:6px;font-size:11px}
.trend.neg{color:var(--danger);background:color-mix(in srgb, var(--danger) 16%, var(--surface))}
.balance-card>strong{font:800 30px/1.1 'DM Sans',Arial,sans-serif;letter-spacing:-.5px;display:block;margin:10px 0 4px}
.balance-card>p{font-size:12px;color:var(--muted);margin:0}
.balance-card>p span{color:var(--success);font-size:9px}
.chart{height:68px;margin:12px -7px 0;display:flex;gap:6px;align-items:end}
.chart i{display:block;background:color-mix(in srgb, var(--accent) 14%, var(--surface));border-radius:4px 4px 0 0;width:calc(8.3% - 4px)}
.chart i.current{background:var(--accent)}
.stat-card{padding:22px 18px;display:flex;gap:13px;align-items:flex-start}
.round-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:21px;font-weight:600}
.purple{background:color-mix(in srgb, var(--accent) 14%, var(--surface));color:var(--accent)}
.peach{background:color-mix(in srgb, var(--gold) 20%, var(--surface));color:var(--gold-deep)}
.stat-card small{font-size:12px;color:var(--muted);display:block}
.stat-card strong{font:800 20px 'DM Sans',Arial,sans-serif;display:block;margin:5px 0}
.stat-card p{font-size:11px;color:var(--muted);margin:0}

.main-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:26px;margin-top:34px}
.section-heading{display:flex;align-items:start;justify-content:space-between;margin-bottom:15px}
.section-heading h2{font:600 19px 'Playfair Display',serif;margin:0 0 4px;letter-spacing:-.3px}
.text-button{padding:3px 0;color:var(--accent);font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}
.goals-list{display:grid;gap:10px}
.goal-card{padding:14px 16px;display:flex;align-items:center;gap:13px;cursor:pointer;transition:background .15s}
.goal-card:hover{background:var(--surface-2)}
.goal-emoji{height:42px;width:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex-shrink:0;background-size:cover}
.goal-info{flex:1;min-width:0}
.goal-info>div:first-child{display:flex;justify-content:space-between;align-items:center}
.goal-info h3,.reserves-list h3,.list-card h3{font-size:13px;margin:0;font-weight:600}
.goal-info span{font-size:11px;color:var(--muted)}
.progress{height:6px;background:var(--surface-2);border-radius:10px;overflow:hidden;margin:9px 0 6px}
.progress i{height:100%;display:block;border-radius:10px}
.goal-info p{color:var(--muted);font-size:11px;margin:0}
.goal-info p strong{color:var(--ink);font-weight:800}
.goal-percent{font-size:13px;font-weight:700}
.add-dashed{width:100%;padding:12px;color:var(--accent);background:color-mix(in srgb, var(--accent) 6%, var(--surface));border:1px dashed color-mix(in srgb, var(--accent) 40%, var(--surface));border-radius:11px;margin-top:10px;font-size:12px;font-weight:600;display:flex;justify-content:center;align-items:center;gap:6px}
.income-head{margin-top:30px}
.accounts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.account-card{padding:14px;position:relative;min-height:130px}
.account-logo{color:#fff;width:27px;height:27px;border-radius:9px;display:grid;place-items:center;font-size:14px;font-weight:700;margin-bottom:10px}
.account-card small{font-size:11px;color:var(--muted);display:block}
.account-card h3{font-size:12px;font-weight:500;margin:3px 0 9px;color:var(--ink)}
.account-card strong{font:800 17px 'DM Sans',Arial,sans-serif}
.more{position:absolute;right:11px;top:9px;color:var(--muted);font-size:14px;letter-spacing:1px}

.right-column{padding-left:2px}
.momentum{padding:16px;display:grid;grid-template-columns:58px 1fr;gap:13px;position:relative}
.circle{background:conic-gradient(var(--accent) 0 62%,var(--surface-2) 62%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center}
.circle:before{content:"";width:44px;height:44px;position:absolute;border-radius:50%;background:var(--surface)}
.circle span{font-size:12px;font-weight:700;color:var(--accent);z-index:1}
.momentum h3{font-size:13px;margin:1px 0 4px}
.momentum p{color:var(--muted);font-size:11px;line-height:1.45;margin:0 0 10px}
.momentum button{grid-column:1/3;border-top:1px solid var(--line);padding:10px 0 0;color:var(--accent);font-size:11px;font-weight:600;text-align:left;display:flex;gap:4px;align-items:center}
.reserve-heading{margin-top:25px}
.icon-add{background:color-mix(in srgb, var(--accent) 14%, var(--surface));color:var(--accent);border-radius:9px;width:27px;height:27px;display:grid;place-items:center}
.reserves-list{display:grid;gap:9px}
.reserves-list article{display:flex;gap:11px;align-items:center;padding:12px}
.reserve-icon{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex-shrink:0}
.reserves-list article>div{flex:1}
.reserves-list p{font-size:10px;color:var(--muted);margin:4px 0 0}
.reserves-list strong{font:800 14px 'DM Sans',Arial,sans-serif}
.mini-link{font-size:11px;color:var(--accent);padding:14px 0;display:flex;gap:5px;align-items:center;font-weight:600}

.achievement-strip{margin-top:35px;border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;align-items:center}
.achievement-strip h2{font:600 19px 'Playfair Display',serif;margin:5px 0 0}
.achievement-items{display:flex;align-items:center;gap:16px}
.achievement-items article{display:flex;gap:9px;align-items:center}
.achievement-items article>span{width:31px;height:31px;background:color-mix(in srgb, var(--gold) 20%, var(--surface));border-radius:10px;display:grid;place-items:center}
.achievement-items strong{font-size:11px;display:block}
.achievement-items p{font-size:10px;color:var(--muted);margin:3px 0}
.achievement-items>button{width:30px;height:30px;border-radius:9px;background:color-mix(in srgb, var(--accent) 14%, var(--surface));color:var(--accent)}

/* ============ MODAIS ============ */
.modal-layer{position:fixed;z-index:50;inset:0;background:rgba(5,8,24,.5);display:grid;place-items:center;padding:18px;backdrop-filter:blur(3px)}
.modal{background:var(--surface);width:min(100%,440px);border-radius:20px;padding:30px;position:relative;box-shadow:0 24px 70px rgba(0,0,0,.35);max-height:88vh;overflow-y:auto}
.modal-close{position:absolute;right:14px;top:14px;width:30px;height:30px;border-radius:8px;background:var(--surface-2);color:var(--muted)}
.modal h2{font:600 24px 'Playfair Display',serif;margin:8px 0}
.modal>p{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 18px}
.modal label{display:block;font-size:12px;font-weight:600;margin:13px 0 6px;color:var(--ink)}
.modal input,.modal select,.modal textarea{width:100%;border:1px solid var(--line);border-radius:9px;padding:11px 12px;outline:none;color:var(--ink);background:var(--surface)}
.modal input:focus,.modal select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wide{justify-content:center;width:100%;margin-top:18px}
.auth-message{margin-top:12px!important;color:var(--accent)!important;font-weight:500}
.danger{color:var(--danger)!important}
.danger-btn{background:var(--danger)!important;box-shadow:0 6px 16px rgba(220,38,38,.25)!important}
.hidden{display:none!important}
.delete-btn{color:var(--muted);padding:5px;border-radius:7px;font-size:17px;line-height:1}.delete-btn:hover{color:var(--danger);background:color-mix(in srgb, var(--danger) 10%, var(--surface))}
.list-card{padding:14px 16px;display:flex;align-items:center;gap:13px;margin-bottom:10px;cursor:pointer;transition:background .15s}
.list-card:hover{background:var(--surface-2)}
.reserve-icon,.round-icon{background-size:cover!important}
.password-field{position:relative}.password-field input{padding-right:44px!important}
.password-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--muted);padding:9px;font-size:12px;font-weight:700}
.tabs-page-head{display:flex;justify-content:space-between;align-items:center;margin:34px 0 22px;gap:12px;flex-wrap:wrap}
.tabs-page-head h1{font:700 29px 'Playfair Display',serif;margin:0;letter-spacing:-.6px}

/* ============ CARDS DE AJUDA POR SEÇÃO ============ */
.info-card{background:linear-gradient(155deg,color-mix(in srgb, var(--accent) 10%, var(--surface)),color-mix(in srgb, var(--accent) 4%, var(--surface)));border:1px solid color-mix(in srgb, var(--accent) 20%, var(--line));border-radius:16px;padding:18px 20px;margin-bottom:22px;display:flex;gap:14px;align-items:flex-start}
.info-card .info-icon{width:34px;height:34px;border-radius:10px;background:color-mix(in srgb, var(--accent) 18%, var(--surface));color:var(--accent);display:grid;place-items:center;font-size:16px;flex-shrink:0}
.info-card h3{font:600 14px 'Playfair Display',serif;margin:0 0 4px}
.info-card p{font-size:12px;color:var(--muted);margin:0 0 10px;line-height:1.5}
.info-card-actions{display:flex;gap:16px}
.info-card-actions button{font-size:11px;font-weight:600;color:var(--accent)}
.info-card-actions button.muted-action{color:var(--muted)}
.info-card-close{margin-left:auto;color:var(--muted);font-size:16px;padding:4px;flex-shrink:0}

/* ============ MOVIMENTAÇÕES ============ */
.tx-dash{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.mini-stat{padding:16px}
.mini-stat small{font-size:11px;color:var(--muted);display:block;margin-bottom:6px}
.mini-stat strong{font:800 20px 'DM Sans',Arial,sans-serif;display:block}
.tx-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:22px}
.tx-list{display:grid;gap:9px}
.tx-row{position:relative;padding:13px 40px 13px 15px;display:flex;align-items:center;gap:12px;cursor:pointer}
.tx-row:hover{background:var(--surface-2)}
.tx-row .tx-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:16px;flex-shrink:0}
.tx-row .tx-icon.entrada{background:color-mix(in srgb, var(--success) 16%, var(--surface));color:var(--success)}
.tx-row .tx-icon.saida{background:color-mix(in srgb, var(--danger) 14%, var(--surface));color:var(--danger)}
.tx-row .tx-info{flex:1;min-width:0}
.tx-row h3{font-size:13px;margin:0;font-weight:600}
.tx-row p{font-size:11px;color:var(--muted);margin:3px 0 0}
.tx-row .tx-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.tx-row .delete-btn{position:absolute;top:10px;right:8px}
.tx-amount{font:800 15px 'DM Sans',Arial,sans-serif;text-align:right}
.tx-amount.entrada{color:var(--success)}
.tx-amount.saida{color:var(--danger)}
.badge{font-size:10px;font-weight:700;padding:3px 8px;border-radius:7px;text-transform:uppercase;letter-spacing:.4px}
.badge.pendente{background:color-mix(in srgb, var(--gold) 22%, var(--surface));color:var(--gold-deep)}
.badge.pago{background:color-mix(in srgb, var(--success) 16%, var(--surface));color:var(--success)}
.badge-btn{margin-left:4px}
.cal-card{padding:18px}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cal-head h3{font:600 15px 'Playfair Display',serif;margin:0;text-transform:capitalize}
.cal-nav{display:flex;gap:4px}
.cal-nav button{width:26px;height:26px;border-radius:7px;background:var(--surface-2);color:var(--muted);display:grid;place-items:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-grid .dow{font-size:10px;color:var(--muted);font-weight:600;padding-bottom:4px}
.cal-day{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font-size:11px;color:var(--ink);position:relative}
.cal-day.today{outline:1.5px solid var(--accent)}
.cal-day .dots{position:absolute;bottom:3px;display:flex;gap:2px}
.cal-day .dots i{width:4px;height:4px;border-radius:50%;display:block}
.cal-summary{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--muted);display:grid;gap:6px}
.cal-summary span{display:flex;align-items:center;gap:6px}
.cal-summary i{width:7px;height:7px;border-radius:50%;display:inline-block}

/* ============ CONFIGURAÇÕES ============ */
.settings-grid{display:grid;gap:18px;max-width:640px}
.settings-card{padding:22px}
.settings-card h2{font:600 16px 'Playfair Display',serif;margin:0 0 4px}
.settings-card>p{font-size:12px;color:var(--muted);margin:0 0 18px}
.avatar-row{display:flex;align-items:center;gap:16px}
.avatar-big{width:68px;height:68px;border-radius:18px;background:color-mix(in srgb, var(--accent) 14%, var(--surface));color:var(--accent);display:grid;place-items:center;font-size:26px;font-weight:700;overflow:hidden;flex-shrink:0}
.avatar-big img{width:100%;height:100%;object-fit:cover}
.theme-toggle{display:flex;gap:10px}
.theme-option{flex:1;border:2px solid var(--line);border-radius:14px;padding:14px;text-align:center;cursor:pointer}
.theme-option.active{border-color:var(--accent)}
.theme-option .swatch{height:40px;border-radius:9px;margin-bottom:8px}
.color-grid{display:flex;gap:10px;flex-wrap:wrap}
.palette-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:14px}
.palette-card{position:relative;border:2px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--surface-2);text-align:left}
.palette-card.active{border-color:var(--ink)}
.palette-swatches{display:flex;gap:4px}
.palette-swatches i{width:18px;height:18px;border-radius:50%;display:block;border:1px solid rgba(0,0,0,.08)}
.palette-name{font-size:11px;font-weight:600;color:var(--ink)}
.palette-check{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--surface-2);display:grid;place-items:center;font-size:10px}
.palette-check .icon{font-size:10px}
.color-field-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.color-field-row:first-of-type{border-top:none}
.color-field-row span{font-size:13px;color:var(--ink)}
.color-field-row input[type="color"]{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);padding:2px;background:var(--surface);cursor:pointer}
.color-dot{width:34px;height:34px;border-radius:50%;cursor:pointer;border:3px solid transparent;display:grid;place-items:center}
.color-dot.active{border-color:var(--ink)}
.color-dot.active:after{content:"✓";color:#fff;font-size:14px;font-weight:700}

/* ============ MENU MOBILE (grade de funções) ============ */
.menu-sheet-layer{align-items:flex-end;justify-items:stretch;padding:0}
.menu-sheet{width:100%;max-width:100%;max-height:85vh;overflow-y:auto;border-radius:22px 22px 0 0;padding:24px 20px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.3)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.menu-tile{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:16px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--ink);font-size:11px;font-weight:600;text-align:center}
.menu-tile .icon{font-size:22px;color:var(--accent)}
.menu-tile.active{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--surface))}

/* ============ TELA DE LOGIN ============ */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px 20px;position:relative;overflow:hidden;background:var(--bg)}

/* Brilho suave que segue o cursor do mouse pela tela inteira. */
.auth-blush{position:absolute;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s ease;background:radial-gradient(circle, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%);filter:blur(10px)}
.auth-blush.active{opacity:1}

.login-card{position:relative;z-index:1;width:100%;max-width:880px;display:grid;grid-template-columns:1.05fr 1fr;border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:0 30px 80px rgba(10,19,64,.22), 0 0 0 1px color-mix(in srgb, var(--line) 60%, transparent)}

.auth-marca{background:linear-gradient(160deg, var(--navy) 0%, var(--navy-mid) 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 36px;text-align:center}
.auth-marca .marca-logo{width:min(170px,55%);margin-bottom:26px;filter:drop-shadow(0 16px 30px rgba(0,0,0,.35))}
.auth-marca h2{font:700 24px/1.35 'Playfair Display',serif;margin:0 0 10px;letter-spacing:-.4px}
.auth-marca p{color:#c7d6f4;font-size:13px;line-height:1.6;margin:0;max-width:280px}

.auth-form-panel{background:var(--surface);padding:48px 42px;display:flex;flex-direction:column;justify-content:center}
.auth-form-panel h1{font:700 24px 'Playfair Display',serif;margin:0 0 6px;letter-spacing:-.5px;color:var(--ink)}
.auth-sub{color:var(--muted);font-size:13px;margin:0 0 26px}
.auth-form .field-icon{position:relative;display:block;margin:0 0 13px}
.auth-form .field-icon .field-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex;pointer-events:none}
.auth-form .field-icon .field-ic svg{width:17px;height:17px}
.auth-form .field-icon input{width:100%;border:1px solid var(--line);border-radius:11px;padding:13px 14px 13px 42px;outline:none;color:var(--ink);background:var(--surface-2);font-size:14.5px}
.auth-form .field-icon input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent)}
.auth-form .password-toggle{color:var(--muted);display:flex}
.auth-form .password-toggle svg{width:17px;height:17px}
.auth-submit{margin-top:6px;justify-content:center;background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, var(--navy)))}
@media (max-width:820px){
  .login-card{grid-template-columns:1fr;max-width:420px}
  .auth-marca{padding:30px 26px}
  .auth-marca .marca-logo{width:120px;margin-bottom:16px}
  .auth-marca h2{font-size:19px}
  .auth-form-panel{padding:30px 26px 26px}
}

/* ============ MOBILE: BARRA INFERIOR ============ */
.bottom-nav{display:none}
@media (max-width:900px){
  input,select,textarea{font-size:16px!important}
  .sidebar{display:none}
  .content{margin:0;width:100%;padding:18px 16px 110px;max-width:100%}
  .summary-grid{grid-template-columns:1fr 1fr}
  .balance-card{grid-column:span 2}
  .main-grid{grid-template-columns:1fr}
  .right-column{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .right-column .section-heading:first-child,.right-column .momentum{grid-column:span 2}
  .reserve-heading{margin-top:0}
  .achievement-strip{align-items:start;gap:20px}
  .achievement-items{flex-wrap:wrap;justify-content:flex-end}
  .tx-layout{grid-template-columns:1fr}
  .tx-dash{grid-template-columns:1fr 1fr}
  .field-row{grid-template-columns:1fr}

  .bottom-nav{display:flex;position:fixed;left:12px;right:12px;bottom:14px;z-index:30;background:var(--sidebar-bg);border-radius:22px;box-shadow:0 14px 34px rgba(0,0,0,.18);padding:8px 10px;align-items:center;justify-content:space-between;border:1px solid var(--line)}
  .bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;border-radius:14px;color:var(--muted);font-size:9px;font-weight:600;transition:color .2s ease,transform .2s ease}
  .bottom-nav button.nav-active{color:var(--accent);transform:translateY(-3px)}
  .bottom-nav button .icon{font-size:18px;transition:font-size .22s ease}
  .bottom-nav button.nav-active .icon{font-size:23px;animation:navIconPop .45s cubic-bezier(.34,1.56,.64,1)}
  @keyframes navIconPop{
    0%{transform:scale(1)}
    45%{transform:scale(1.4) rotate(-4deg)}
    70%{transform:scale(.9) rotate(2deg)}
    100%{transform:scale(1) rotate(0)}
  }
  @media (prefers-reduced-motion:reduce){
    .bottom-nav button.nav-active .icon{animation:none}
    .bottom-nav button.nav-active{transform:none}
  }
}
@media (max-width:760px){
  .overview-title{align-items:start;margin:24px 0 20px;flex-direction:column;gap:12px}
  .overview-title h1{font-size:26px}
  .summary-grid,.right-column{grid-template-columns:1fr}
  .balance-card{grid-column:auto}
  .main-grid{gap:22px}
  .accounts-grid{grid-template-columns:1fr 1fr}
  .right-column .section-heading:first-child,.right-column .momentum{grid-column:auto}
  .achievement-strip{display:block}
  .achievement-items{justify-content:flex-start;margin-top:15px}
  .tx-dash{grid-template-columns:1fr 1fr}
  .section-heading h2{font-size:17px}

  html,body{overflow-x:hidden}
  .content header{flex-wrap:nowrap;align-items:flex-start}
  .content header>div:first-child{min-width:0;flex:1}
  .welcome{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .header-profile-name{display:none}
  .header-profile{padding:4px;gap:0}
  .header-actions{gap:8px;flex-shrink:0}
  .period-bar{padding:12px 14px}
  .period-nav{font-size:12px}
  .period-stats{gap:10px 14px;font-size:11px}
  .goal-card,.list-card,.reserves-list article,.tx-row,.account-card{flex-wrap:wrap;row-gap:8px}
  .goal-info{min-width:0;flex-basis:100%}
  .list-card>div,.reserves-list article>div{min-width:0!important;flex-basis:100%!important}
  .list-card h3,.goal-info h3,.tx-row h3,.account-card h3,.reserves-list h3{overflow-wrap:break-word}
  .tx-row .tx-info{min-width:0;flex:1 1 0;flex-basis:0}
  .tx-row .tx-right{flex-basis:calc(100% - 48px);flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin-left:48px}
  .tx-row .badge{white-space:nowrap}
  .settings-grid{max-width:100%}
  .palette-grid{grid-template-columns:repeat(auto-fill,minmax(105px,1fr))}
}

/* ============ CAPA E ÍCONE DO ITEM (metas, reservas, rendas, conquistas) ============ */
.cover-picker{margin-bottom:6px}
.cover-preview{width:100%;height:110px;border-radius:14px;background:var(--surface-2) center/cover;display:grid;place-items:center;overflow:hidden;position:relative;border:1px dashed var(--line)}
.cover-preview.has-cover{border-style:solid}
.cover-preview .cover-empty{font-size:11px;color:var(--muted);text-align:center;padding:0 16px}
.cover-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.cover-actions .text-button{padding:6px 10px;background:var(--surface-2);border-radius:8px;font-size:11px}
.cover-actions .text-button.danger{color:var(--danger)}
.cover-pos-row{margin-top:10px}
.cover-pos-label{font-size:11px;color:var(--muted);display:flex;justify-content:space-between;margin:0 0 4px}
.cover-pos-row input[type="range"]{width:100%}

.icon-picker-label{font-size:12px;font-weight:600;margin:13px 0 6px;color:var(--ink);display:block}
.icon-picker-group{margin-bottom:10px}
.icon-picker-group-name{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px;display:block}
.icon-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:6px}
.icon-pick{width:40px;height:40px;border-radius:10px;background:var(--surface-2);border:2px solid transparent;display:grid;place-items:center;font-size:18px}
.icon-pick:hover{background:color-mix(in srgb, var(--accent) 10%, var(--surface-2))}
.icon-pick.active{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, var(--surface))}
.icon-pick img{width:22px;height:22px;object-fit:contain}

/* ============ CALCULADORA DE FATURA ============ */
.calc-balance{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}
.calc-balance strong{font:800 26px 'DM Sans',Arial,sans-serif;display:block;margin-top:4px}
.calc-balance.pos strong{color:var(--success)}
.calc-balance.neg strong{color:var(--danger)}
.calc-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.calc-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.calc-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.calc-section-head h2{font-size:14px;margin:0;display:flex;align-items:center;gap:7px;font-weight:600}
.calc-total{font:800 14px 'DM Sans',Arial,sans-serif}
.calc-total.debt{color:var(--danger)}
.calc-total.income{color:var(--success)}
.calc-form{display:flex;gap:7px;margin-bottom:12px}
.calc-form input{flex:1;min-width:0;border:1px solid var(--line);border-radius:9px;padding:9px 10px;font-size:12.5px;background:var(--surface);color:var(--ink)}
.calc-form input[name="amount"]{flex:0 0 86px}
.calc-form input:focus{outline:none;border-color:var(--accent)}
.calc-form button{flex:0 0 auto;padding:9px 12px}
.calc-list{display:flex;flex-direction:column;gap:7px}
.calc-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;background:var(--surface-2)}
.calc-item-name{flex:1;min-width:0;font-size:12.5px;overflow-wrap:break-word}
.calc-item-amt{font-size:12.5px;font-weight:700;white-space:nowrap}
.calc-item-amt.debt{color:var(--danger)}
.calc-item-amt.income{color:var(--success)}
.calc-item-tag{font-size:9px;font-weight:700;color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, var(--surface));padding:2px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:.4px;margin-left:8px}
.calc-section-single{max-width:480px}
.subtabs{display:flex;gap:8px;margin-bottom:20px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.subtabs::-webkit-scrollbar{display:none}
.subtab{padding:10px 16px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px;margin-bottom:-1px;flex:0 0 auto;white-space:nowrap}
.subtab.active{color:var(--accent);border-color:var(--accent)}

/* ============ DASHBOARD DE MOVIMENTAÇÕES ============ */
.tx-dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dash-metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.dash-metric-label{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.4px}
.dash-metric-value{display:block;font:800 22px 'DM Sans',Arial,sans-serif;margin:10px 0 6px}
.dash-metric p{font-size:11.5px;color:var(--muted);margin:0;line-height:1.5}
.dash-category-list{display:flex;flex-direction:column;gap:10px}
.dash-category-row{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.dash-category-name{font-size:12.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-category-bar{height:7px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.dash-category-bar i{display:block;height:100%;background:var(--accent);border-radius:6px}
.dash-category-row strong{font-size:12.5px;font-weight:800;white-space:nowrap}
@media (max-width:900px){
  .tx-dashboard-grid{grid-template-columns:1fr 1fr}
  .dash-category-row{grid-template-columns:90px 1fr auto;gap:8px;padding:10px}
}

/* ============ JOGO DA COBRINHA ============ */
.game-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:18px}
.game-speed{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.game-speed-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.speed-options{display:flex;gap:6px}
.speed-options button{padding:7px 13px;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:12px;font-weight:700}
.speed-options button.active{background:var(--accent);color:var(--accent-ink)}
.game-wrap{display:flex;flex-direction:column;align-items:center}
.game-hud{display:flex;gap:28px;margin-bottom:16px;align-self:stretch;align-items:center}
.game-back{display:none}
.game-stat{display:flex;flex-direction:column;gap:3px}
.game-stat span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.game-stat strong{font:800 20px 'DM Sans',Arial,sans-serif}
.game-stage{position:relative;width:min(420px,100%);aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--surface);box-shadow:var(--shadow);margin:0 auto;touch-action:none}
.game-stage canvas{display:block;width:100%;height:100%}
.game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;background:color-mix(in srgb, var(--surface) 90%, transparent);backdrop-filter:blur(2px)}
.game-overlay h2{margin:0;font:600 18px 'Playfair Display',serif}
.game-overlay p{margin:0;color:var(--muted);font-size:12.5px;max-width:260px;line-height:1.5}
.game-dpad{display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);gap:6px;justify-content:center;margin:18px auto 0;touch-action:none}
.game-dpad button{width:54px;height:54px;border-radius:12px;background:var(--surface-2);color:var(--ink);font-size:18px;box-shadow:inset 0 0 0 1px var(--line)}
.game-dpad button:active{background:color-mix(in srgb, var(--accent) 18%, var(--surface-2))}
.dpad-up{grid-column:2;grid-row:1}
.dpad-left{grid-column:1;grid-row:2}
.dpad-right{grid-column:3;grid-row:2}
.dpad-down{grid-column:2;grid-row:3}
.game-instructions{text-align:center}
.tetris-stage{width:min(300px,86vw);aspect-ratio:10/18}
.bricks-stage{width:min(460px,100%);aspect-ratio:4/3}
.blast-stage{width:min(380px,92vw);aspect-ratio:1/1}
.blast-tray{display:flex;justify-content:center;gap:14px;margin-top:18px;flex-wrap:wrap}
.blast-piece{display:grid;gap:3px;padding:10px;border-radius:12px;background:var(--surface-2);cursor:pointer;border:2px solid transparent}
.blast-piece.selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 14%, var(--surface-2))}
.blast-piece.used{opacity:.25;pointer-events:none}
.blast-piece i{display:block;border-radius:3px;width:14px;height:14px}
.game-wrap:fullscreen,.game-wrap:-webkit-full-screen{background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px;width:100%;height:100%}
.game-wrap:fullscreen .game-stage,.game-wrap:-webkit-full-screen .game-stage{width:min(82vh,92vw)}
@media (max-width:900px){
  #snakeDpad{display:none}
  #snakeFullscreenBtn{display:none}
  .game-back{display:flex;align-items:center;gap:6px;margin-left:auto;padding:8px 12px;border-radius:10px;background:var(--surface-2);color:var(--ink);font-size:12px;font-weight:600}
  .game-page.game-playing .game-toolbar{display:none}
  .game-page.game-playing .game-wrap{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;gap:12px;padding:16px;padding-top:max(16px, env(safe-area-inset-top));padding-bottom:max(16px, env(safe-area-inset-bottom))}
  .game-page.game-playing .game-stage{flex:1;width:100%;max-width:100%;aspect-ratio:auto;margin:0;display:flex;align-items:center;justify-content:center}
  .game-page.game-playing .game-instructions{display:none}
}
@media (max-width:760px){
  .calc-cols{grid-template-columns:1fr}
  .game-toolbar{flex-direction:column;align-items:stretch}
  .game-speed{justify-content:space-between}
}