:root{--ink:#07111f;--ink-2:#0c1929;--panel:#112237;--line:rgba(255,255,255,.12);--muted:#91a2b6;--accent:#43f2a1;--blue:#66d7ff;--danger:#ff7c86;--max:1180px}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--ink);color:#fff;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px;line-height:1.5}
button,input,select,textarea{font:inherit}
.site-header{border-bottom:1px solid var(--line);background:rgba(7,17,31,.92);position:sticky;top:0;z-index:20;backdrop-filter:blur(15px)}
.header-inner,.shell{width:min(calc(100% - 32px),var(--max));margin:auto}
.header-inner{min-height:80px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:11px;font-weight:750}
.brand>span:last-child,.brand strong,.brand small{display:block}
.brand small{color:var(--muted);font-size:.72rem;font-weight:500}
.brand-mark{width:40px;height:40px;display:grid!important;place-items:center;border:1px solid rgba(67,242,161,.55);color:var(--accent);font:700 .76rem ui-monospace,monospace;transform:rotate(-4deg)}
.logout{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:10px}
.logout:hover{color:var(--accent)}
.shell{padding:46px 0 80px}
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:34px}
.eyebrow{display:flex;align-items:center;gap:9px;color:var(--accent);font:700 .72rem ui-monospace,monospace;letter-spacing:.18em;margin:0 0 13px}
.eyebrow span{width:24px;height:1px;background:currentColor}
h1,h2,p{margin-top:0}
h1{font-size:clamp(2.65rem,5vw,4.7rem);line-height:.95;letter-spacing:-.06em;margin:0}
h1 em{font-family:Georgia,serif;font-weight:400;color:var(--accent)}
.button{min-height:46px;border:1px solid var(--line);padding:11px 20px;font-weight:700;cursor:pointer;transition:.2s}
.button.primary{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.button.primary:hover{background:#fff;border-color:#fff}
.button.ghost{background:transparent;color:#fff}
.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:36px}
.summary-card{min-height:144px;border:1px solid var(--line);background:rgba(17,34,55,.62);padding:20px}
.summary-card.featured{border-color:rgba(67,242,161,.38);background:rgba(67,242,161,.06)}
.summary-icon{display:grid;width:31px;height:31px;place-items:center;color:var(--blue);font:700 .82rem ui-monospace,monospace;border:1px solid currentColor}
.featured .summary-icon{color:var(--accent)}
.summary-card p{color:var(--muted);font-size:.86rem;margin:25px 0 3px}
.summary-card strong{font-size:1.5rem;letter-spacing:-.03em}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tab{position:relative;border:0;background:transparent;color:var(--muted);padding:0 0 13px;cursor:pointer;font-weight:650}
.tab.active{color:#fff}
.tab.active:after{content:"";height:2px;background:var(--accent);position:absolute;left:0;right:0;bottom:-1px}
.tab span{font-size:.7rem;background:rgba(255,255,255,.08);padding:3px 8px;border-radius:20px;margin-left:4px}
.accounts-panel{border:1px solid var(--line);background:rgba(17,34,55,.48);min-height:260px}
.desktop-table{overflow:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th{text-align:left;color:var(--muted);font-size:.75rem;font-weight:650;padding:15px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
tr:last-child td{border-bottom:0}
td:first-child{min-width:200px;white-space:normal}
td strong,td small{display:block}
td small,.account-card small{color:var(--muted);font-size:.75rem;margin-top:2px}
.fixed-label{color:var(--accent)}
.status{display:inline-flex;padding:4px 9px;border-radius:20px;font-size:.72rem;font-weight:700}
.status.pending{color:var(--blue);background:rgba(102,215,255,.12)}
.status.overdue{color:#ffd46a;background:rgba(255,192,58,.13)}
.status.paid,.status.completed{color:var(--accent);background:rgba(67,242,161,.12)}
.status.removed{color:var(--muted);border:1px solid var(--line)}
.actions{display:flex;justify-content:flex-end;gap:4px}
.action{border:0;background:transparent;color:var(--muted);padding:7px;cursor:pointer}
.action:hover,.action.pay{color:var(--accent)}
.action.danger:hover{color:var(--danger)}
.archived{color:var(--muted);font-size:.78rem}
.mobile-list{display:none}
.empty,.loading{min-height:260px;display:grid;place-content:center;text-align:center;padding:35px}
.empty>span{margin:auto auto 18px;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--accent);color:var(--accent);font:700 .72rem ui-monospace,monospace;transform:rotate(-4deg)}
.empty h2{margin-bottom:4px}
.empty p,.loading{color:var(--muted)}
.modal{width:min(620px,calc(100% - 28px));max-height:90vh;overflow:auto;border:1px solid var(--line);background:var(--ink-2);color:#fff;padding:0;box-shadow:0 30px 90px rgba(0,0,0,.55)}
.modal::backdrop{background:rgba(0,0,0,.7);backdrop-filter:blur(4px)}
.modal form{padding:25px}
.modal-header{display:flex;justify-content:space-between;gap:20px;margin-bottom:24px}
.modal-header h2{font-size:1.6rem;margin-bottom:4px}
.modal-header p{color:var(--muted);font-size:.9rem}
.icon-button{border:0;background:transparent;color:var(--muted);font-size:1.7rem;cursor:pointer;height:36px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.form-grid label{display:grid;gap:7px;font-size:.82rem;font-weight:650}
.form-grid .full{grid-column:1/-1}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.035);color:#fff;min-height:43px;padding:9px 11px;outline:0}
.form-grid textarea{min-height:82px;resize:vertical}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(67,242,161,.1)}
.fixed-option{display:flex!important;grid-template-columns:20px 1fr;align-items:start;border:1px solid var(--line);padding:14px;background:rgba(67,242,161,.035);cursor:pointer}
.fixed-option input{width:17px;height:17px;min-height:0;margin-top:2px;accent-color:var(--accent)}
.fixed-option span,.fixed-option strong,.fixed-option small{display:block}
.fixed-option small{color:var(--muted);font-weight:400;margin-top:2px}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;border-top:1px solid var(--line);padding-top:20px;margin-top:23px}
.toast{position:fixed;right:22px;bottom:22px;z-index:60;background:var(--panel);border:1px solid rgba(67,242,161,.45);padding:13px 17px;box-shadow:0 14px 40px rgba(0,0,0,.35);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}
.toast.visible{opacity:1;transform:none}
.toast.error{border-color:rgba(255,124,134,.55);color:#ffd4d8}
.login-page{min-height:100vh;background:radial-gradient(circle at 10% 20%,rgba(102,215,255,.09),transparent 34%),var(--ink)}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{width:min(480px,100%);border:1px solid var(--line);background:rgba(12,25,41,.9);padding:clamp(28px,6vw,52px);box-shadow:0 30px 90px rgba(0,0,0,.35)}
.login-card .brand{margin-bottom:48px}
.login-card h1{font-size:clamp(2.4rem,8vw,4rem);margin-bottom:30px}
.login-form{display:grid;gap:18px}
.login-form label{display:grid;gap:7px;font-size:.82rem;font-weight:650}
.login-form input{min-height:46px;border:1px solid var(--line);background:rgba(255,255,255,.035);padding:10px;color:#fff;outline:0}
.login-form input:focus{border-color:var(--accent)}
.login-form .button{margin-top:5px}
.alert-error{border:1px solid rgba(255,124,134,.45);background:rgba(255,124,134,.08);color:#ffd4d8;padding:11px 13px;margin-bottom:18px;font-size:.88rem}
@media(max-width:900px){.summary{grid-template-columns:1fr 1fr}
.desktop-table{display:none}
.mobile-list{display:block}
.account-card{padding:18px;border-bottom:1px solid var(--line)}
.account-card:last-child{border:0}
.account-card header{display:flex;justify-content:space-between;gap:15px}
.account-card header strong,.account-card header small{display:block}
.account-card dl{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:18px 0}
.account-card dt{color:var(--muted);font-size:.7rem}
.account-card dd{margin:3px 0 0;font-size:.86rem}
}
@media(max-width:580px){.shell{padding-top:30px}
.page-heading{align-items:stretch;flex-direction:column}
.button.primary{width:100%}
.summary{grid-template-columns:1fr 1fr}
.summary-card{min-height:125px;padding:15px}
.summary-card p{margin-top:18px}
.summary-card strong{font-size:1.15rem}
.form-grid{grid-template-columns:1fr}
.form-grid .full{grid-column:auto}
.account-card dl{grid-template-columns:1fr 1fr}
.tabs{gap:18px}
.toast{left:16px;right:16px;bottom:16px}
.modal-actions{flex-direction:column-reverse}
.modal-actions .button{width:100%}
}

/* Filtro mensal e dashboard */
.page-heading{margin-bottom:28px}
.period-filter{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(17,34,55,.45);padding:10px;margin-bottom:18px}
.period-filter label{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 12px;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.period-filter label span{color:var(--muted);font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.period-filter input{border:0;background:transparent;color:#fff;font-weight:750;outline:0;color-scheme:dark}
.period-arrow,.period-current{height:42px;border:0;background:transparent;color:var(--muted);cursor:pointer}
.period-arrow{width:42px;font-size:1.15rem}
.period-arrow:hover,.period-current:hover{color:var(--accent)}
.period-current{padding:0 12px;font-size:.82rem;font-weight:700}
.period-filter>p{margin:0 4px 0 auto;color:var(--muted);font-size:.78rem}
.summary{margin-bottom:18px}
.summary-card{min-height:158px}
.summary-card.next-month-card{border-color:rgba(102,215,255,.28)}
.summary-card p{margin-top:22px}
.summary-card>strong{display:block}
.summary-card>small{display:block;color:var(--muted);font-size:.72rem;margin-top:4px}
.dashboard{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px;margin-bottom:36px}
.dashboard-card{min-height:286px;border:1px solid var(--line);background:rgba(17,34,55,.48);padding:22px}
.dashboard-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.dashboard-card h2{font-size:1.2rem;margin:2px 0 0}
.card-kicker{color:var(--accent);font:700 .66rem ui-monospace,monospace;letter-spacing:.14em;margin-bottom:3px}
.progress-card>header>strong{color:var(--accent);font-size:1.1rem}
.progress-track{height:12px;margin:33px 0 12px;background:rgba(102,215,255,.18);overflow:hidden}
.progress-track span{display:block;width:0;height:100%;background:var(--accent);transition:width .35s ease}
.dashboard-legend,.chart-legend{display:flex;gap:17px;color:var(--muted);font-size:.74rem}
.dashboard-legend i,.chart-legend i{display:inline-block;width:8px;height:8px;margin-right:6px}
.paid-dot{background:var(--accent)}
.open-dot{background:rgba(102,215,255,.65)}
.period-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:32px}
.period-facts p{margin:0;border-left:1px solid var(--line);padding-left:10px}
.period-facts strong,.period-facts span{display:block}
.period-facts strong{font-size:1.05rem}
.period-facts span{color:var(--muted);font-size:.68rem}
.monthly-chart{height:205px;display:flex;align-items:flex-end;justify-content:space-around;gap:10px;padding-top:32px}
.chart-column{height:100%;flex:1;min-width:34px;max-width:58px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:7px}
.chart-value{color:var(--muted);font-size:.65rem;white-space:nowrap}
.chart-bar{width:min(32px,75%);min-height:0;display:flex;flex-direction:column;background:rgba(255,255,255,.035);transition:height .3s ease}
.chart-segment{display:block;width:100%}
.chart-segment.open{background:rgba(102,215,255,.55)}
.chart-segment.paid{background:var(--accent)}
.chart-column.selected .chart-bar{outline:1px solid rgba(255,255,255,.38);outline-offset:3px}
.chart-column.selected .chart-label{color:#fff}
.chart-label{color:var(--muted);font-size:.7rem;text-transform:capitalize}
.chart-empty{height:100%;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:.86rem}
@media(max-width:900px){
.period-filter>p{display:none}
.dashboard{grid-template-columns:1fr}
.trend-card{min-height:310px}
}
@media(max-width:580px){
.period-filter{display:grid;grid-template-columns:42px 1fr 42px}
.period-filter label{justify-content:center}
.period-filter label span{display:none}
.period-current{grid-column:1/-1;border-top:1px solid var(--line);width:100%}
.summary-card{min-height:143px}
.summary-card>small{font-size:.66rem}
.dashboard-card{padding:18px}
.dashboard-card>header{flex-direction:column}
.chart-legend{margin-top:-10px}
.period-facts{grid-template-columns:1fr 1fr;row-gap:18px}
.monthly-chart{gap:5px}
.chart-value{font-size:.58rem}
.chart-bar{width:24px}
}