:root {
  --bg:#f4f6f9;
  --panel:#fff;
  --ink:#16241f;
  --muted:#75817d;
  --green:#20ad78;
  --green-dark:#087a51;
  --green-soft:#daf5e9;
  --nav:#10261f;
  --red:#e45454;
  --amber:#e8a629;
  --line:#e4eae7;
  --shadow:0 14px 35px rgba(16,38,31,.07);
}

.app-booting .sidebar,
.app-booting .app { visibility:hidden; }

* { box-sizing:border-box; }
html { min-width:320px; background:var(--bg); }
body { margin:0; min-width:320px; background:var(--bg); color:var(--ink); font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select,textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none!important; }
h1,h2,h3,p { margin-top:0; }

.sidebar { position:fixed; inset:0 auto 0 0; z-index:50; width:246px; padding:26px 18px; display:flex; flex-direction:column; color:#dce9e4; background:var(--nav); }
.brand { display:flex; align-items:center; gap:12px; padding:0 10px 28px; color:#fff; font-weight:800; letter-spacing:.11em; text-decoration:none; }
.brand small { display:block; color:#65d6ac; font-size:9px; letter-spacing:.25em; }
.brand-mark { width:50px; height:50px; border-radius:16px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#2bc889,#129768); box-shadow:0 10px 25px #09926255; font-size:23px; font-weight:900; }
.brand-mark.small { width:38px; height:38px; border-radius:12px; font-size:18px; }
.sidebar nav { display:grid; gap:6px; }
.sidebar nav button { appearance:none; border:0; border-radius:11px; padding:13px 14px; display:flex; gap:12px; color:#9fb4ac; background:transparent; text-align:left; cursor:pointer; }
.sidebar nav button:hover,.sidebar nav button.active { color:#fff; background:#ffffff10; }
.sidebar nav button.active { box-shadow:inset 3px 0 var(--green); }
.sidebar-foot { margin-top:auto; border-top:1px solid #ffffff18; padding:20px 7px 0; display:flex; align-items:center; gap:10px; }
.sidebar-foot small { display:block; color:#91a59e; }
.sidebar-foot a { margin-left:auto; color:#93aaa1; text-decoration:none; }
.avatar { width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#234a3c; font-weight:800; }

.app { margin-left:246px; min-height:100vh; padding:34px 42px; }
.app>header { margin-bottom:30px; display:flex; justify-content:space-between; align-items:center; }
.app h1 { margin-bottom:0; font-size:28px; letter-spacing:-.04em; }
.header-actions { display:flex; align-items:center; gap:10px; }
.eyebrow { margin-bottom:5px; color:var(--green); font-size:10px; font-weight:800; letter-spacing:.18em; }
.muted { color:var(--muted); }
.block { display:block; }
.overdue { color:var(--red); }
.status-pill,.badge { border:1px solid var(--line); border-radius:30px; padding:8px 13px; color:var(--muted); background:#fff; font-size:12px; }
.status-pill i { width:7px; height:7px; border-radius:50%; margin-right:7px; display:inline-block; background:var(--green); }
.badge { border:0; padding:4px 9px; white-space:nowrap; }
.badge.aberto,.badge.generating { color:#9a6810; background:#fff5dc; }
.badge.atrasado,.badge.inativo,.badge.disconnected { color:#b93838; background:#ffe7e5; }
.badge.pago,.badge.connected,.badge.oficial { color:var(--green-dark); background:var(--green-soft); }
.badge.teste { color:#7d5e10; background:#fff3cf; }

.grid { display:grid; gap:18px; }
.stats { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:20px; }
.split { grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); }
.card { min-width:0; border:1px solid #e9eeeb; border-radius:17px; padding:21px; background:var(--panel); box-shadow:var(--shadow); }
.card-head { margin-bottom:18px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.card-head h2 { margin:0; font-size:16px; }
.section-intro { margin-bottom:18px; }
.section-intro h2 { margin:0; }
.stat .icon { float:right; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:var(--green); background:var(--green-soft); }
.stat strong { display:block; font-size:27px; letter-spacing:-.04em; }
.stat>span:last-child { color:var(--muted); font-size:12px; }
.client-metrics { display:flex; flex-wrap:wrap; gap:10px; }
.client-metrics span, .client-metrics .dashboard-status-filter { border-radius:10px; padding:8px 10px; background:#f4f8f6; }
.dashboard-status-filter { border:0; color:inherit; font:inherit; cursor:pointer; text-align:left; }
.dashboard-status-filter:hover, .dashboard-status-filter:focus-visible { background:#e3f5ed; outline:2px solid #20ad78; outline-offset:2px; }
.dashboard-status-filter.active { color:#fff; background:#20ad78; }
.dashboard-note { margin:18px 0; }
.card-section-head { border-top:1px solid var(--line); padding-top:13px; margin-bottom:9px; display:flex; justify-content:space-between; align-items:center; }
.card-section-head h3 { margin:0; font-size:14px; }
.balance-card>h2 { font-size:30px; }
.received-total { margin:14px 0 18px; border-radius:10px; padding:12px 14px; color:var(--green-dark); background:#edf7f1; }
.received-total p { margin-bottom:4px; }
.received-total h3 { margin:0; font-size:21px; }

.dashboard-due-list { display:grid; gap:7px; }
.dashboard-due-row { border-radius:9px; padding:8px 9px; display:flex; justify-content:space-between; align-items:center; gap:9px; background:#f4f8f6; }
.dashboard-due-info { min-width:0; border:0; padding:0; display:grid; gap:2px; color:var(--ink); background:transparent; text-align:left; cursor:pointer; }
.dashboard-due-info b,.dashboard-due-info small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-due-info small,.dashboard-due-right small { color:var(--muted); font-size:10px; }
.dashboard-due-right { display:flex; align-items:center; gap:9px; color:var(--green-dark); text-align:right; }
.dashboard-due-right>span { white-space:nowrap; font-size:11px; }
.dashboard-due-right small { display:block; }

.btn { min-height:40px; border:0; border-radius:10px; padding:10px 15px; color:#31433d; background:#edf1ef; font-weight:700; cursor:pointer; }
.btn:hover { filter:brightness(.98); }
.btn.primary { color:#fff; background:var(--green); }
.btn.danger { color:#bb3e3e; background:#fff0ef; }
.btn.wide { width:100%; }
.btn:disabled { opacity:.5; cursor:wait; }
.icon-action-btn { width:38px; min-width:38px; height:38px; min-height:38px; padding:0!important; display:inline-grid; place-items:center; line-height:1; text-align:center; }
.icon-actions { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.actions { display:flex; flex-wrap:wrap; gap:9px; }

.toolbar { margin-bottom:16px; display:flex; align-items:end; gap:10px; }
.toolbar>input { max-width:360px; }
.toolbar>.btn:last-child { margin-left:auto; }
input,select,textarea { width:100%; min-height:44px; border:1px solid #dfe6e2; border-radius:10px; padding:11px 12px; color:var(--ink); background:#fff; outline:none; }
textarea { min-height:92px; resize:vertical; }
input:focus,select:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px #20ad7818; }
label { display:grid; gap:7px; font-size:12px; font-weight:700; }
.check-label { grid-template-columns:auto 1fr; align-items:center; justify-content:start; }
.check-label input { width:18px; min-height:18px; height:18px; }
.form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid .full { grid-column:1/-1; }
.new-client-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }

.table-wrap { width:100%; overflow:auto; }
table { width:100%; border-collapse:collapse; }
th { border-bottom:1px solid var(--line); padding:10px 12px; color:#89938f; text-align:left; font-size:10px; letter-spacing:.1em; text-transform:uppercase; }
td { border-bottom:1px solid #f0f2f1; padding:13px 12px; white-space:nowrap; vertical-align:middle; }
tr:last-child td { border-bottom:0; }
.plan-stack { display:grid; gap:4px; }
.plan-stack span { width:max-content; max-width:280px; border-radius:6px; padding:3px 8px; white-space:normal; background:#f1f5f3; }
.empty-state { padding:35px; text-align:center; }

.client-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.client-card { display:flex; flex-direction:column; gap:14px; }
.client-card h3,.client-card p { margin:0; }
.client-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.client-card-actions { margin-top:auto; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.test-info { border-radius:10px; padding:11px; display:flex; justify-content:space-between; gap:8px; background:#fff5dc; }
.test-info small { color:#8b691d; }
.client-modal-tools,.modal-footer-actions { margin-bottom:12px; display:flex; justify-content:flex-end; gap:8px; }
.modal-footer-actions { margin:14px 0 0; justify-content:space-between; }
.plan-list { max-height:60vh; display:grid; gap:10px; overflow:auto; }
.plan-item { border:1px solid var(--line); border-radius:13px; padding:13px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.plan-item-main { min-width:0; }
.plan-item strong { display:block; overflow-wrap:anywhere; }
.plan-item small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }
.plan-item .icon-actions { justify-content:flex-end; }

.modal { position:fixed; inset:0; z-index:100; padding:20px; display:grid; place-items:center; background:#09201999; }
.modal>.card { width:min(580px,100%); max-height:94vh; overflow:auto; }
.modal>.wide-modal { width:min(940px,100%); }
.modal>.client-manage-modal { width:min(660px,100%); }

.whatsapp-grid { grid-template-columns:minmax(0,1fr) minmax(320px,1.3fr); }
.phone-panel { text-align:center; }
.phone { width:min(100%,280px); min-height:400px; margin:auto; border:8px solid #14251f; border-radius:35px; padding:28px 18px; display:grid; place-items:center; background:#f8faf9; }
.qr { width:100%; max-width:205px; height:auto; border-radius:8px; }
.wa-dot { width:62px; height:62px; border-radius:50%; margin:0 auto 15px; display:grid; place-items:center; color:var(--green); background:var(--green-soft); font-size:28px; }
.spinner { animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.settings-grid { grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr); }
.finance-filters label { min-width:180px; }
.finance-filters .btn { margin-left:0!important; }
.account-details { display:grid; gap:11px; }
.account-details>div { border-bottom:1px solid var(--line); padding:11px 0; display:flex; justify-content:space-between; gap:18px; }
.account-details span { color:var(--muted); font-size:12px; }
.account-details strong { text-align:right; overflow-wrap:anywhere; }

.loading-state { min-height:140px; display:grid; place-items:center; align-content:center; gap:10px; color:var(--muted); }
.loading-state span { width:28px; height:28px; border:3px solid var(--line); border-top-color:var(--green); border-radius:50%; animation:spin .7s linear infinite; }
.loading-state p { margin:0; }
.alert { border-radius:9px; padding:11px 13px; }
.alert.error { color:#a83b35; background:#ffefed; }
.alert.success { color:var(--green-dark); background:var(--green-soft); }
#toast { position:fixed; right:25px; bottom:25px; z-index:200; max-width:380px; border-radius:11px; padding:13px 17px; color:#fff; background:#172a23; opacity:0; transform:translateY(15px); transition:.2s; pointer-events:none; }
#toast.show { opacity:1; transform:none; }

.login-page { min-height:100vh; padding:20px; display:grid; place-items:center; background:radial-gradient(circle at 80% 20%,#d7f4e9,transparent 30%),var(--bg); }
.login-card { width:min(410px,100%); border-radius:22px; padding:38px; background:#fff; box-shadow:0 25px 70px #133c2d1c; }
.login-card .brand-mark { margin-bottom:25px; }
.login-card h1 { margin-bottom:5px; font-size:28px; }
.login-card form { margin-top:25px; display:grid; gap:17px; }
.login-links { margin-top:17px; display:flex; justify-content:center; }
.login-links a { color:var(--green); font-size:13px; font-weight:800; text-decoration:none; }
.link-button { margin-top:18px; display:block; text-align:center; text-decoration:none; }
.remember-app-option { border:1px solid #cfe9de; border-radius:12px; padding:12px 13px; background:#f2fbf7; }
.remember-app-option>span { display:flex; align-items:center; gap:9px; }
.remember-app-option input { width:18px; min-height:18px; height:18px; margin:0; accent-color:var(--green); }
.remember-app-option small { padding-left:27px; color:var(--muted); font-weight:500; }

.pwa-install-overlay,.pwa-ios-help { position:fixed; inset:0; z-index:300; padding:20px; display:grid; place-items:center; background:rgba(9,32,25,.72); backdrop-filter:blur(4px); }
.pwa-install-card,.pwa-help-card { width:min(420px,100%); border-radius:22px; padding:28px; background:#fff; box-shadow:0 28px 80px rgba(10,45,34,.28); text-align:center; }
.pwa-install-icon { width:58px; height:58px; border-radius:17px; margin:0 auto 18px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#2bc889,#129768); font-size:25px; font-weight:900; }
.pwa-install-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

@media (max-width:1100px) {
  .client-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .split,.whatsapp-grid,.settings-grid { grid-template-columns:1fr; }
}

@media (max-width:760px) {
  html,body { max-width:100%; overflow-x:hidden; }
  body { padding-bottom:calc(78px + env(safe-area-inset-bottom)); }
  .sidebar { inset:auto 0 0 0; width:100%; height:calc(70px + env(safe-area-inset-bottom)); padding:6px 5px env(safe-area-inset-bottom); display:block; border-top:1px solid #ffffff18; box-shadow:0 -8px 28px rgba(8,28,21,.18); }
  .sidebar .brand,.sidebar-foot { display:none!important; }
  .sidebar nav { width:100%; height:100%; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(64px,1fr); gap:2px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; }
  .sidebar nav::-webkit-scrollbar { display:none; }
  .sidebar nav button { min-width:64px; height:58px; border-radius:10px; padding:5px 3px; flex-direction:column; justify-content:center; align-items:center; gap:2px; text-align:center; font-size:18px; }
  .sidebar nav button span { max-width:100%; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; line-height:1.1; }
  .sidebar nav button.active { color:#67dfb2; background:#ffffff13; box-shadow:none; }
  .app { width:100%; margin-left:0; padding:18px 14px 24px; }
  .app>header { margin-bottom:18px; align-items:flex-start; }
  .app h1 { font-size:24px; }
  .status-pill { display:none; }
  .card { width:100%; border-radius:15px; padding:16px; box-shadow:0 8px 24px rgba(16,38,31,.055); }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .stat strong { font-size:21px; }
  .form-grid,.new-client-grid { grid-template-columns:1fr; }
  .form-grid .full,.new-client-grid .full { grid-column:auto; }
  .toolbar { width:100%; display:grid; grid-template-columns:1fr; }
  .toolbar>input,.toolbar>.btn { width:100%; max-width:none; margin:0!important; }
  .finance-filters { grid-template-columns:1fr 1fr; }
  .finance-filters label { min-width:0; }
  .finance-filters #currentMonth { grid-column:1/-1; }
  .client-grid { grid-template-columns:1fr; }
  .client-card { padding:16px; }
  .plan-item { grid-template-columns:1fr; }
  .plan-item .icon-actions { justify-content:flex-start; }
  .plan-list { max-height:none; }
  .dashboard-due-row { align-items:flex-start; }
  .dashboard-due-right { align-items:flex-start; }
  .dashboard-due-right .icon-actions { max-width:none; flex-wrap:nowrap; justify-content:flex-end; }
  .dashboard-due-right .icon-action-btn { width:32px; min-width:32px; height:32px; min-height:32px; }
  .modal { padding:0; align-items:end; }
  .modal>.card,.modal>.wide-modal,.modal>.client-manage-modal { width:100%; max-width:none; max-height:92dvh; border-radius:22px 22px 0 0; padding:20px 16px calc(20px + env(safe-area-inset-bottom)); }
  .modal>.card:before { content:''; width:42px; height:4px; border-radius:4px; margin:-8px auto 16px; display:block; background:#d7ddda; }
  .table-wrap { overflow:visible; }
  .table-wrap table,.table-wrap tbody { width:100%; display:block; }
  .table-wrap thead { display:none; }
  .table-wrap tbody { display:grid; gap:12px; }
  .table-wrap tr { width:100%; border:1px solid var(--line); border-radius:14px; padding:13px; display:grid; grid-template-columns:1fr 1fr; background:#fff; box-shadow:0 6px 18px rgba(16,38,31,.04); }
  .table-wrap td { min-width:0; border:0!important; padding:7px 5px; display:block; white-space:normal; overflow-wrap:anywhere; }
  .table-wrap td:first-child { grid-column:1/-1; border-bottom:1px solid var(--line)!important; padding-bottom:10px; }
  .table-wrap td:last-child { grid-column:1/-1; }
  .plan-stack span { width:100%; max-width:100%; }
  .account-details>div { display:grid; gap:4px; }
  .account-details strong { text-align:left; }
  #toast { left:14px; right:14px; bottom:calc(84px + env(safe-area-inset-bottom)); max-width:none; text-align:center; }
}

@media (max-width:430px) {
  .stats { grid-template-columns:1fr 1fr; }
  .stat { padding:14px; }
  .stat .icon { width:32px; height:32px; }
  .stat strong { font-size:18px; }
  .dashboard-due-row { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .dashboard-due-right { display:grid; justify-items:end; }
  .finance-filters { grid-template-columns:1fr; }
  .finance-filters #currentMonth { grid-column:auto; }
  .client-card-actions { grid-template-columns:minmax(0,1fr) auto; }
  .pwa-install-actions { grid-template-columns:1fr; }
  .login-card { padding:28px 22px; }
}