@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f5f7fb;
  --surface:#ffffff;
  --surface-2:#f8f9fc;
  --text:#121625;
  --muted:#7e869d;
  --line:#e8ebf2;
  --brand:#6d5dfc;
  --brand-2:#8b7fff;
  --brand-soft:#efedff;
  --mint:#19b879;
  --mint-soft:#e8f8f1;
  --amber:#e59a2f;
  --amber-soft:#fff5e6;
  --danger:#e25d66;
  --danger-soft:#fff0f1;
  --navy:#0b1020;
  --shadow:0 18px 55px rgba(19,26,55,.07);
  --radius:22px;
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
#app{min-height:100vh}

.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:248px;background:var(--navy);color:#fff;padding:24px 18px;
  display:flex;flex-direction:column;z-index:20;border-right:1px solid rgba(255,255,255,.04)
}
.brand-row{display:flex;align-items:center;gap:12px;padding:0 8px 26px}
.brand-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,var(--brand),#9e92ff);display:grid;place-items:center;font-weight:800;box-shadow:0 8px 30px rgba(109,93,252,.35)}
.brand-name{font-weight:800;font-size:17px;letter-spacing:-.02em}
.brand-sub{font-size:11px;color:#8490aa;margin-top:2px}
.nav{display:flex;flex-direction:column;gap:6px}
.nav-item{border:0;background:transparent;color:#8f99af;display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:12px;font-weight:600;text-align:left}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-item.active{background:rgba(109,93,252,.18);color:#fff}
.nav-icon{width:22px;text-align:center;font-size:17px}
.sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:12px}
.upgrade-card{border:1px solid rgba(255,255,255,.07);background:linear-gradient(160deg,rgba(109,93,252,.22),rgba(109,93,252,.05));color:#fff;padding:14px;border-radius:16px;text-align:left;display:flex;flex-direction:column;gap:7px}
.upgrade-card strong{font-size:13px}
.upgrade-card span:not(.upgrade-pill){font-size:11px;line-height:1.45;color:#a7b0c2}
.upgrade-pill{font-size:9px;font-weight:800;letter-spacing:.12em;color:#b8b0ff}
.profile-card{border:0;background:rgba(255,255,255,.04);color:#fff;border-radius:14px;padding:10px;display:flex;align-items:center;gap:10px;text-align:left}
.avatar{width:34px;height:34px;border-radius:11px;background:#1c2540;display:grid;place-items:center;font-size:11px;font-weight:800;color:#cdd4e4}
.profile-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.profile-copy strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-copy span{font-size:9px;color:#7f8aa1}
.chevron{color:#68748f}

.main{margin-left:248px;min-height:100vh}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;border-bottom:1px solid var(--line);background:rgba(245,247,251,.88);backdrop-filter:blur(18px);position:sticky;top:0;z-index:10}
.workspace-switcher{display:flex;align-items:center;gap:8px}
.workspace-switcher button{border:0;background:transparent;font-weight:700;color:var(--text);padding:8px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(25,184,121,.1)}
.top-actions{display:flex;align-items:center;gap:8px}
.icon-btn,.mobile-menu{width:38px;height:38px;border:1px solid var(--line);background:#fff;border-radius:12px;position:relative;color:#555e73}
.notification-dot{position:absolute;right:9px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.primary-btn,.secondary-btn,.small-action{
  border-radius:12px;padding:10px 14px;font-weight:700;border:1px solid transparent
}
.primary-btn{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(109,93,252,.2)}
.primary-btn:hover{background:#5f50ec}
.secondary-btn{background:#fff;color:var(--text);border-color:var(--line)}
.small-action{padding:8px 10px;background:var(--surface-2);border-color:var(--line);color:#60697d;font-size:11px}
.mobile-menu{display:none}

.page{display:none;padding:34px;max-width:1500px;margin:0 auto}
.page.active{display:block}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:28px}
.page-head h1{font-size:31px;letter-spacing:-.04em;margin:4px 0 7px}
.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--brand);margin:0}
.muted{color:var(--muted);font-size:13px;margin:0}
.wave{color:var(--brand)}
.period-toggle,.task-tabs{display:flex;background:#eceff5;padding:4px;border-radius:12px}
.period-toggle button,.task-tabs button{border:0;background:transparent;padding:8px 11px;border-radius:9px;font-size:11px;color:#7a8296;font-weight:700}
.period-toggle button.active,.task-tabs button.active{background:#fff;color:var(--text);box-shadow:0 3px 10px rgba(20,27,52,.06)}

.attention-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
.attention-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:17px;display:flex;align-items:center;gap:13px;box-shadow:var(--shadow)}
.attention-card.priority{border-color:#ded9ff;background:linear-gradient(135deg,#fff,#faf9ff)}
.attention-icon{width:42px;height:42px;border-radius:13px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800}
.attention-icon.warn{background:var(--amber-soft);color:var(--amber)}
.attention-icon.cool{background:var(--mint-soft);color:var(--mint)}
.attention-card>div:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}
.card-kicker{font-size:9px;font-weight:800;letter-spacing:.11em;color:#9198aa}
.attention-card strong{font-size:19px;letter-spacing:-.03em}
.attention-card small,.metric-card small{font-size:10px;color:var(--muted)}
.ghost-arrow{margin-left:auto;border:0;background:var(--surface-2);width:32px;height:32px;border-radius:10px;color:#81899b}

.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.metric-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow);min-height:132px;display:flex;flex-direction:column}
.metric-head{display:flex;align-items:center;justify-content:space-between}
.metric-card>span,.metric-head>span:first-child{font-size:11px;color:#7a8397;font-weight:600}
.metric-card strong{font-size:26px;letter-spacing:-.04em;margin:11px 0 10px}
.trend{font-size:9px;font-weight:800;border-radius:99px;padding:4px 7px}
.trend.up{color:var(--mint);background:var(--mint-soft)}
.trend.down{color:var(--amber);background:var(--amber-soft)}
.progress-track{height:7px;background:#eef0f5;border-radius:99px;overflow:hidden;margin-bottom:11px}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2));border-radius:99px}
.category-bars{display:flex;gap:3px;align-items:flex-end;height:18px;margin:0 0 11px}
.category-bars span{height:6px;border-radius:99px;background:#d9d6ff}
.client-bubbles{display:flex;margin-bottom:9px}
.client-bubbles span{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#eef0f5;border:2px solid #fff;margin-left:-5px;font-size:8px;font-weight:800}
.client-bubbles span:first-child{margin-left:0}
.sparkline{height:22px;background:linear-gradient(180deg,rgba(109,93,252,.18),rgba(109,93,252,0));clip-path:polygon(0 72%,12% 56%,26% 62%,40% 33%,54% 48%,68% 22%,83% 35%,100% 3%,100% 100%,0 100%);margin-bottom:8px}

.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:16px;margin-bottom:16px}
.dashboard-grid.lower{grid-template-columns:minmax(0,1.55fr) minmax(300px,.65fr)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.panel-head h3{font-size:14px;margin:0 0 5px;letter-spacing:-.02em}
.panel-head p{font-size:10px;color:var(--muted);margin:0}
.chart-wrap{height:260px}
#revenueChart{width:100%;height:100%;overflow:visible}
.chart-legend{display:flex;gap:18px;color:#81899c;font-size:10px}
.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.legend-dot.revenue{background:var(--brand)}
.legend-dot.profit{background:#c5bfff}

.mini-task-list{display:flex;flex-direction:column;gap:9px}
.mini-task{display:flex;align-items:center;gap:10px;padding:10px;border-radius:13px;background:var(--surface-2);border:1px solid #f0f2f6}
.task-check{width:19px;height:19px;border:1.5px solid #d4d8e1;border-radius:7px;background:#fff;display:grid;place-items:center;color:#fff;padding:0}
.task-check.done{background:var(--mint);border-color:var(--mint)}
.mini-task-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mini-task-copy strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-task-copy span{font-size:9px;color:var(--muted)}
.task-time{font-size:9px;color:#7f8799;font-weight:700}

.table-wrap{overflow-x:auto}
.clean-table{width:100%;border-collapse:collapse;min-width:680px}
.clean-table th{text-align:left;font-size:9px;letter-spacing:.06em;color:#969daf;font-weight:800;padding:10px 9px;border-bottom:1px solid var(--line)}
.clean-table td{padding:12px 9px;border-bottom:1px solid #f0f2f6;font-size:10px;color:#4f586d;vertical-align:middle}
.clean-table tbody tr:last-child td{border-bottom:0}
.client-cell{display:flex;align-items:center;gap:9px}
.client-avatar{width:30px;height:30px;border-radius:10px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:9px}
.client-main{display:flex;flex-direction:column;gap:2px}
.client-main strong{font-size:10px;color:var(--text)}
.client-main span{font-size:9px;color:var(--muted)}
.status-badge{display:inline-flex;align-items:center;border-radius:99px;padding:5px 8px;font-size:9px;font-weight:700;background:#f1f3f6;color:#687085}
.status-badge.active,.status-badge.paid,.status-badge.accepted{background:var(--mint-soft);color:var(--mint)}
.status-badge.followup,.status-badge.pending{background:var(--amber-soft);color:var(--amber)}
.status-badge.quote{background:var(--brand-soft);color:var(--brand)}
.status-badge.late{background:var(--danger-soft);color:var(--danger)}
.status-select{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 8px;font-size:9px;color:#5e6678}
.row-action{border:0;background:transparent;color:#9aa1b1;font-size:15px}
.cashflow-donut{display:flex;align-items:center;gap:20px;min-height:175px}
.donut{width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--brand) 0 58%,#c7c2ff 58% 78%,#e8ebf1 78% 100%);display:grid;place-items:center;position:relative;flex:none}
.donut::after{content:"";width:76px;height:76px;border-radius:50%;background:#fff;position:absolute}
.donut span{position:relative;z-index:1;font-weight:800;font-size:18px}
.donut-copy{display:flex;flex-direction:column;gap:13px}
.donut-copy div{display:flex;gap:8px;align-items:center}
.donut-copy p{margin:0;font-size:9px;color:var(--muted);display:flex;flex-direction:column;gap:2px}
.donut-copy strong{color:var(--text);font-size:10px}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.positive{background:var(--brand)} .dot.pending{background:#c7c2ff}.dot.expense{background:#e8ebf1}

.toolbar{display:flex;gap:10px;margin-bottom:14px}
.searchbox{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 12px;color:#9aa1b1}
.searchbox input{width:100%;border:0;outline:0;padding:10px 0;background:transparent}
.toolbar select{border:1px solid var(--line);background:#fff;border-radius:12px;padding:0 12px;color:#60697c}
.quote-metrics .metric-card{min-height:105px}
.quote-metrics .metric-card strong{margin:10px 0 5px}

.page-actions{display:flex;gap:8px}
.expense-list{display:flex;flex-direction:column;gap:14px}
.expense-row{display:grid;grid-template-columns:1fr auto;gap:8px}
.expense-title{display:flex;justify-content:space-between;font-size:10px}
.expense-title strong{font-size:10px}
.expense-track{height:7px;background:#f0f2f6;border-radius:99px;overflow:hidden;grid-column:1/-1}
.expense-track span{display:block;height:100%;background:linear-gradient(90deg,#b7b0ff,var(--brand));border-radius:99px}

.task-tabs{width:max-content;margin-bottom:14px}
.task-page-list{display:flex;flex-direction:column;gap:10px}
.task-row{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;box-shadow:0 8px 24px rgba(20,27,50,.04)}
.task-row.done{opacity:.6}
.task-row h4{font-size:11px;margin:0 0 3px}
.task-row p{font-size:9px;color:var(--muted);margin:0}
.priority-pill{font-size:8px;font-weight:800;border-radius:99px;padding:5px 8px;background:#f1f3f6;color:#768096}
.priority-pill.high{background:var(--danger-soft);color:var(--danger)}
.task-date{font-size:9px;color:#737b8e;font-weight:700}

.team-list{display:flex;flex-direction:column;gap:9px}
.team-member{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid #f0f2f5;border-radius:13px}
.team-member .avatar{background:var(--brand-soft);color:var(--brand)}
.team-copy{display:flex;flex-direction:column;gap:2px;flex:1}
.team-copy strong{font-size:10px}.team-copy span{font-size:9px;color:var(--muted)}
.role-pill{font-size:8px;background:#f2f3f6;border-radius:99px;padding:5px 8px;color:#727b8f}
.permissions-card{background:linear-gradient(145deg,#11172a,#171d35);color:#fff;border-color:#1f2742}
.permissions-card .card-kicker{color:#9d94ff}
.permissions-card h2{font-size:23px;letter-spacing:-.04em;margin:10px 0}
.permissions-card p{font-size:11px;line-height:1.6;color:#9da7bb}
.permission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:20px}
.permission-grid div{font-size:10px;color:#dbe0eb}
.permission-grid span{color:#9d94ff;margin-right:5px}

.modal-backdrop{position:fixed;inset:0;background:rgba(5,9,19,.48);backdrop-filter:blur(8px);display:grid;place-items:center;z-index:100;padding:18px}
.modal-backdrop.hidden{display:none}
.modal{width:min(610px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:22px;padding:24px;position:relative;box-shadow:0 30px 100px rgba(0,0,0,.25)}
.modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:#fff;color:#757d8f;font-size:18px}
.modal-head h2{font-size:24px;letter-spacing:-.04em;margin:7px 0}
.modal-head p{font-size:11px;color:var(--muted);margin:0 0 20px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:9px;font-weight:700;color:#70798d}
.form-grid input,.form-grid select,.form-grid textarea{border:1px solid var(--line);border-radius:11px;padding:10px 11px;outline:none;background:#fbfcfe;color:var(--text)}
.form-grid textarea{min-height:80px;resize:vertical}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:#c6c0ff;box-shadow:0 0 0 3px #f0eeff}
.full{grid-column:1/-1}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.price-card{border:1px solid var(--line);border-radius:16px;padding:16px;position:relative}
.price-card.featured{border-color:#bdb5ff;background:#faf9ff;box-shadow:0 12px 30px rgba(109,93,252,.09)}
.price-card .recommended{position:absolute;right:10px;top:10px;font-size:7px;font-weight:800;background:var(--brand);color:#fff;padding:4px 7px;border-radius:99px}
.price-card h3{font-size:13px;margin:0 0 5px}.price-card .price{font-size:24px;font-weight:800;letter-spacing:-.04em}.price-card .price small{font-size:9px;color:var(--muted)}
.price-card ul{padding-left:16px;margin:13px 0;color:#687085;font-size:9px;line-height:1.8}
.price-card button{width:100%}

.toast{position:fixed;right:22px;bottom:22px;background:#121829;color:#fff;padding:12px 14px;border-radius:12px;box-shadow:0 16px 45px rgba(0,0,0,.2);z-index:120;font-size:10px}
.toast.hidden{display:none}

.profile-popover{display:flex;flex-direction:column;gap:8px}
.login-demo{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:13px;padding:12px;background:#fff}
.google-g{width:30px;height:30px;border-radius:9px;background:#f5f6f8;display:grid;place-items:center;font-weight:800;color:#4285f4}
.login-demo div{display:flex;flex-direction:column;gap:2px}.login-demo strong{font-size:10px}.login-demo span{font-size:9px;color:var(--muted)}

@media (max-width:1100px){
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .attention-grid{grid-template-columns:1fr}
  .dashboard-grid,.dashboard-grid.lower{grid-template-columns:1fr}
}
@media (max-width:780px){
  .sidebar{transform:translateX(-100%);transition:.2s ease;width:230px}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .topbar{padding:0 16px;height:64px}
  .mobile-menu{display:block}
  .workspace-switcher{display:none}
  .page{padding:20px 14px 30px}
  .page-head{align-items:flex-start;flex-direction:column}
  .period-toggle{width:100%}.period-toggle button{flex:1}
  .metrics-grid{grid-template-columns:1fr 1fr}
  .attention-card{padding:14px}
  .metric-card{min-height:118px}
  .chart-wrap{height:220px}
  .toolbar{flex-wrap:wrap}.searchbox{flex-basis:100%}.toolbar select{flex:1;min-height:40px}
  .task-row{grid-template-columns:auto 1fr auto}.priority-pill{display:none}
  .pricing{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}
  .page-head h1{font-size:27px}
}
@media (max-width:500px){
  .metrics-grid{grid-template-columns:1fr}
  .top-actions .icon-btn{display:none}
  .cashflow-donut{align-items:flex-start;flex-direction:column}
  .permission-grid{grid-template-columns:1fr}
}


/* ===== Motion system ===== */
:root{
  --ease-out-expo:cubic-bezier(.16,1,.3,1);
  --ease-out-quart:cubic-bezier(.25,1,.5,1);
  --motion-fast:180ms;
  --motion-base:320ms;
  --motion-slow:520ms;
}

body{overflow-x:hidden}
button,.nav-item,.attention-card,.metric-card,.panel,.team-member,.task-row,.profile-card,.upgrade-card,.status-select,.searchbox,.toolbar select{
  transition:
    transform var(--motion-fast) var(--ease-out-quart),
    box-shadow var(--motion-base) var(--ease-out-quart),
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease,
    opacity var(--motion-fast) ease;
}

.primary-btn,.secondary-btn,.small-action,.icon-btn,.ghost-arrow,.mobile-menu{
  transition:
    transform 160ms var(--ease-out-quart),
    box-shadow 220ms var(--ease-out-quart),
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}
.primary-btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(109,93,252,.28)}
.primary-btn:active,.secondary-btn:active,.small-action:active,.icon-btn:active,.ghost-arrow:active,.mobile-menu:active{transform:scale(.97)}
.secondary-btn:hover,.small-action:hover,.icon-btn:hover,.ghost-arrow:hover{transform:translateY(-1px);border-color:#d9dce6;background:#fbfbfd}

.nav-item:hover{transform:translateX(3px)}
.nav-item.active{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.profile-card:hover,.upgrade-card:hover{transform:translateY(-2px);background-color:rgba(255,255,255,.07)}
.workspace-switcher button{transition:color 180ms ease,transform 180ms var(--ease-out-quart)}
.workspace-switcher button:hover{color:var(--brand);transform:translateY(-1px)}

.attention-card:hover,.metric-card:hover,.panel:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 60px rgba(19,26,55,.09);
}
.attention-card:hover .ghost-arrow{transform:translateX(2px)}

.clean-table tbody tr{transition:background-color 180ms ease,transform 180ms var(--ease-out-quart)}
.clean-table tbody tr:hover{background:#fafbfe}
.clean-table tbody tr:hover .client-avatar{transform:scale(1.04)}
.client-avatar{transition:transform 180ms var(--ease-out-quart)}

.task-row:hover,.team-member:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(20,27,50,.05)}
.task-check{transition:transform 180ms var(--ease-out-quart),background-color 180ms ease,border-color 180ms ease}
.task-check:hover{transform:scale(1.08)}
.task-check.done{animation:checkPop 320ms var(--ease-out-expo)}

.status-select:focus,.searchbox:focus-within,.toolbar select:focus{
  border-color:#c9c4ff;
  box-shadow:0 0 0 4px rgba(109,93,252,.08);
  outline:none;
}

.page{
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
}
.page.active{
  display:block;
  pointer-events:auto;
}


.metric-card strong,.attention-card strong{font-variant-numeric:tabular-nums}

.modal-backdrop{
  opacity:0;
  transition:opacity 220ms ease;
}
.modal-backdrop:not(.hidden){
  opacity:1;
}
.modal{
  transform:translateY(14px) scale(.985);
  opacity:0;
  transition:transform 360ms var(--ease-out-expo),opacity 220ms ease;
}
.modal-backdrop:not(.hidden) .modal{
  transform:translateY(0) scale(1);
  opacity:1;
}
.modal-close{transition:transform 160ms var(--ease-out-quart),background 160ms ease}
.modal-close:hover{transform:rotate(5deg) scale(1.04);background:#f8f9fc}

.toast{
  transform:translateY(12px) scale(.98);
  opacity:0;
  transition:transform 280ms var(--ease-out-expo),opacity 180ms ease;
}
.toast:not(.hidden){transform:translateY(0) scale(1);opacity:1}

.sparkline{transform-origin:left center;animation:sparkReveal 820ms 260ms var(--ease-out-expo) both}
.progress-bar{transform-origin:left center;animation:barGrow 780ms 250ms var(--ease-out-expo) both}
.category-bars span{transform-origin:left center;animation:barGrow 700ms var(--ease-out-expo) both}
.category-bars span:nth-child(1){animation-delay:230ms}
.category-bars span:nth-child(2){animation-delay:300ms}
.category-bars span:nth-child(3){animation-delay:370ms}
.client-bubbles span{animation:bubbleIn 420ms var(--ease-out-expo) both}
.client-bubbles span:nth-child(1){animation-delay:240ms}
.client-bubbles span:nth-child(2){animation-delay:290ms}
.client-bubbles span:nth-child(3){animation-delay:340ms}
.client-bubbles span:nth-child(4){animation-delay:390ms}

.donut{animation:donutIn 760ms 260ms var(--ease-out-expo) both}
.permission-grid div{animation:fadeUp 420ms var(--ease-out-expo) both}
.permission-grid div:nth-child(1){animation-delay:180ms}.permission-grid div:nth-child(2){animation-delay:220ms}.permission-grid div:nth-child(3){animation-delay:260ms}.permission-grid div:nth-child(4){animation-delay:300ms}

#revenueChart path.chart-line{
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  animation:drawLine 1.25s 220ms var(--ease-out-expo) forwards;
}
#revenueChart path.chart-area{
  opacity:0;
  animation:areaFade 700ms 600ms ease forwards;
}
#revenueChart circle.chart-dot{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:dotIn 320ms var(--ease-out-expo) forwards;
}

.skeleton-shimmer{
  background:linear-gradient(90deg,#f1f3f6 25%,#fafbfc 37%,#f1f3f6 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
}

@keyframes pageEnter{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes checkPop{
  0%{transform:scale(.75)}
  65%{transform:scale(1.12)}
  100%{transform:scale(1)}
}
@keyframes sparkReveal{
  from{opacity:0;transform:scaleX(.25) translateY(4px)}
  to{opacity:1;transform:scaleX(1) translateY(0)}
}
@keyframes barGrow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
@keyframes bubbleIn{
  from{opacity:0;transform:translateY(5px) scale(.85)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes donutIn{
  from{opacity:0;transform:scale(.88) rotate(-12deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
@keyframes drawLine{to{stroke-dashoffset:0}}
@keyframes areaFade{to{opacity:1}}
@keyframes dotIn{
  from{opacity:0;transform:scale(.4)}
  to{opacity:1;transform:scale(1)}
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}


/* ===== Functional management controls ===== */
.notification-bell svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.danger-btn{
  border:1px solid #ffd7da;
  background:#fff5f6;
  color:var(--danger);
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
  transition:transform 160ms var(--ease-out-quart),background 160ms ease,border-color 160ms ease;
}
.danger-btn:hover{background:#ffecef;border-color:#ffc8cd;transform:translateY(-1px)}
.danger-btn:active{transform:scale(.97)}
.icon-danger{
  width:31px;height:31px;border-radius:9px;border:1px solid #f2dadd;background:#fff8f8;
  color:var(--danger);display:grid;place-items:center;font-size:13px;
}
.icon-danger:hover{background:#fff0f1;border-color:#ffcdd2}
.row-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.team-actions{display:flex;align-items:center;gap:7px}
.team-role-select{
  border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 8px;
  font-size:8px;color:#60697c;outline:none;
}
.team-role-select:focus{border-color:#c9c4ff;box-shadow:0 0 0 3px rgba(109,93,252,.08)}
.member-owner-note{font-size:8px;color:#939bad;font-weight:700}
.confirm-box{
  border:1px solid #f4d8db;background:#fff8f8;border-radius:14px;padding:13px;margin:14px 0;
  color:#7b4b50;font-size:10px;line-height:1.55;
}
.finance-metrics{grid-template-columns:1.35fr 1fr 1fr}
.finance-primary{
  background:linear-gradient(135deg,#fff,#faf9ff);
  border-color:#ded9ff;
}
.finance-primary strong{color:var(--brand)}
@media(max-width:900px){.finance-metrics{grid-template-columns:1fr}}

@media(max-width:780px){
  .task-row{grid-template-columns:auto minmax(0,1fr) auto}
  .task-row .row-actions{grid-column:2/-1;justify-content:space-between}
}


/* ===== Theme toggle & dark mode ===== */
.brand-row{
  position:relative;
}
.brand-copy{
  min-width:0;
  flex:1;
}
.theme-toggle{
  width:34px;
  height:34px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.045);
  color:#9ba5bc;
  display:grid;
  place-items:center;
  padding:0;
  flex:none;
  overflow:hidden;
  transition:
    transform 180ms var(--ease-out-quart),
    background-color 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    box-shadow 260ms var(--ease-out-quart);
}
.theme-toggle:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.13);
  transform:translateY(-1px);
}
.theme-toggle:active{transform:scale(.94)}
.theme-icon-wrap{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  position:relative;
}
.theme-icon{
  position:absolute;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:
    opacity 260ms ease,
    transform 420ms var(--ease-out-expo);
}
.moon-icon{opacity:1;transform:rotate(0deg) scale(1)}
.sun-icon{opacity:0;transform:rotate(-70deg) scale(.55)}
html[data-theme="dark"] .moon-icon{opacity:0;transform:rotate(70deg) scale(.55)}
html[data-theme="dark"] .sun-icon{opacity:1;transform:rotate(0deg) scale(1)}

.top-icon-btn{
  display:grid;
  place-items:center;
  padding:0;
}
.top-icon-btn svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.notification-bell svg{
  width:17px !important;
  height:17px !important;
}

/* smooth color transition for theme changes */
html.theme-transition,
html.theme-transition body,
html.theme-transition .main,
html.theme-transition .topbar,
html.theme-transition .page,
html.theme-transition .panel,
html.theme-transition .metric-card,
html.theme-transition .attention-card,
html.theme-transition .task-row,
html.theme-transition .team-member,
html.theme-transition .toolbar,
html.theme-transition .searchbox,
html.theme-transition .clean-table td,
html.theme-transition .clean-table th,
html.theme-transition .modal,
html.theme-transition .modal-backdrop,
html.theme-transition .icon-btn,
html.theme-transition .secondary-btn,
html.theme-transition .small-action,
html.theme-transition .status-select,
html.theme-transition .toolbar select,
html.theme-transition input,
html.theme-transition select,
html.theme-transition textarea{
  transition:
    background-color 380ms ease,
    color 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease,
    transform 180ms var(--ease-out-quart);
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#171a22;
  --surface:#20242e;
  --surface-2:#1b1f28;
  --text:#f1f3f8;
  --muted:#969eb0;
  --line:#2d3340;
  --brand:#8072ff;
  --brand-2:#9a8eff;
  --brand-soft:rgba(128,114,255,.15);
  --mint:#38c994;
  --mint-soft:rgba(56,201,148,.12);
  --amber:#f0ab4c;
  --amber-soft:rgba(240,171,76,.12);
  --danger:#f27880;
  --danger-soft:rgba(242,120,128,.12);
  --navy:#0e1118;
  --shadow:0 18px 55px rgba(0,0,0,.16);
}
html[data-theme="dark"],
html[data-theme="dark"] body{
  background:#171a22;
  color:var(--text);
}
html[data-theme="dark"] .topbar{
  background:rgba(23,26,34,.88);
  border-bottom-color:#2b303c;
}
html[data-theme="dark"] .workspace-switcher button,
html[data-theme="dark"] .page-head h1,
html[data-theme="dark"] .panel-head h3,
html[data-theme="dark"] .metric-card strong,
html[data-theme="dark"] .attention-card strong,
html[data-theme="dark"] .client-main strong,
html[data-theme="dark"] .task-row h4,
html[data-theme="dark"] .team-copy strong,
html[data-theme="dark"] .donut-copy strong,
html[data-theme="dark"] .clean-table td strong{
  color:#f5f6fa;
}
html[data-theme="dark"] .panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .attention-card,
html[data-theme="dark"] .task-row,
html[data-theme="dark"] .team-member,
html[data-theme="dark"] .modal{
  background:#20242e;
  border-color:#2c323e;
  box-shadow:0 18px 50px rgba(0,0,0,.14);
}
html[data-theme="dark"] .attention-card.priority,
html[data-theme="dark"] .finance-primary{
  background:linear-gradient(135deg,#222631,#242638);
  border-color:#3a3860;
}
html[data-theme="dark"] .metric-card:hover,
html[data-theme="dark"] .attention-card:hover,
html[data-theme="dark"] .panel:hover{
  box-shadow:0 22px 60px rgba(0,0,0,.22);
}
html[data-theme="dark"] .icon-btn,
html[data-theme="dark"] .secondary-btn,
html[data-theme="dark"] .small-action,
html[data-theme="dark"] .ghost-arrow,
html[data-theme="dark"] .mobile-menu,
html[data-theme="dark"] .status-select,
html[data-theme="dark"] .toolbar select,
html[data-theme="dark"] .searchbox,
html[data-theme="dark"] .form-grid input,
html[data-theme="dark"] .form-grid select,
html[data-theme="dark"] .form-grid textarea{
  background:#1d212a;
  color:#c9cedb;
  border-color:#303642;
}
html[data-theme="dark"] .secondary-btn:hover,
html[data-theme="dark"] .small-action:hover,
html[data-theme="dark"] .icon-btn:hover,
html[data-theme="dark"] .ghost-arrow:hover{
  background:#252a35;
  border-color:#3a414f;
  color:#fff;
}
html[data-theme="dark"] .clean-table th{
  color:#8d96a9;
  border-bottom-color:#303642;
}
html[data-theme="dark"] .clean-table td{
  color:#b4bbca;
  border-bottom-color:#292f3a;
}
html[data-theme="dark"] .clean-table tbody tr:hover{
  background:#242934;
}
html[data-theme="dark"] .task-row,
html[data-theme="dark"] .mini-task{
  background:#1e222c;
  border-color:#2b313d;
}
html[data-theme="dark"] .task-check{
  background:#1a1e27;
  border-color:#414856;
}
html[data-theme="dark"] .task-check.done{
  background:var(--mint);
  border-color:var(--mint);
}
html[data-theme="dark"] .client-avatar,
html[data-theme="dark"] .client-bubbles span{
  border-color:#20242e;
}
html[data-theme="dark"] .client-bubbles span{
  background:#2b303b;
  color:#d6d9e2;
}
html[data-theme="dark"] .progress-track,
html[data-theme="dark"] .expense-track{
  background:#2b303b;
}
html[data-theme="dark"] .donut::after{
  background:#20242e;
}
html[data-theme="dark"] .period-toggle,
html[data-theme="dark"] .task-tabs{
  background:#20242c;
  border:1px solid #2c323d;
}
html[data-theme="dark"] .period-toggle button,
html[data-theme="dark"] .task-tabs button{
  color:#8992a5;
}
html[data-theme="dark"] .period-toggle button.active,
html[data-theme="dark"] .task-tabs button.active{
  background:#2b303b;
  color:#fff;
  box-shadow:none;
}
html[data-theme="dark"] .status-badge{
  background:#2a2f39;
  color:#aab2c2;
}
html[data-theme="dark"] .status-badge.active,
html[data-theme="dark"] .status-badge.paid,
html[data-theme="dark"] .status-badge.accepted{
  background:rgba(56,201,148,.12);
  color:#49d4a0;
}
html[data-theme="dark"] .status-badge.followup,
html[data-theme="dark"] .status-badge.pending{
  background:rgba(240,171,76,.12);
  color:#f2b45e;
}
html[data-theme="dark"] .status-badge.quote{
  background:rgba(128,114,255,.14);
  color:#a69cff;
}
html[data-theme="dark"] .status-badge.late{
  background:rgba(242,120,128,.12);
  color:#f68d94;
}
html[data-theme="dark"] .permissions-card{
  background:linear-gradient(145deg,#151925,#1c2130);
  border-color:#2b3140;
}
html[data-theme="dark"] .modal-backdrop{
  background:rgba(4,6,10,.62);
}
html[data-theme="dark"] .modal-close{
  background:#1c2029;
  border-color:#303642;
  color:#aab1c0;
}
html[data-theme="dark"] .confirm-box{
  background:rgba(242,120,128,.08);
  border-color:rgba(242,120,128,.22);
  color:#e7aeb2;
}
html[data-theme="dark"] .price-card{
  background:#1d212a;
  border-color:#303642;
}
html[data-theme="dark"] .price-card.featured{
  background:#24253a;
  border-color:#4b4774;
}
html[data-theme="dark"] .login-demo{
  background:#1c2029;
  border-color:#303642;
}
html[data-theme="dark"] .expense-title,
html[data-theme="dark"] .donut-copy p,
html[data-theme="dark"] .panel-head p,
html[data-theme="dark"] .muted,
html[data-theme="dark"] .metric-card small,
html[data-theme="dark"] .attention-card small{
  color:#929bae;
}
html[data-theme="dark"] #revenueChart line{
  stroke:#303642 !important;
}
html[data-theme="dark"] #revenueChart text{
  fill:#8891a5 !important;
}
html[data-theme="dark"] .sparkline{
  background:linear-gradient(180deg,rgba(128,114,255,.22),rgba(128,114,255,0));
}
html[data-theme="dark"] .danger-btn{
  background:rgba(242,120,128,.09);
  border-color:rgba(242,120,128,.22);
}
html[data-theme="dark"] .icon-danger{
  background:rgba(242,120,128,.08);
  border-color:rgba(242,120,128,.18);
}
html[data-theme="dark"] .toast{
  background:#303643;
  color:#fff;
}

/* Keep sidebar slightly darker than the rest in dark theme */
html[data-theme="dark"] .sidebar{
  background:#0e1118;
  border-right-color:#202631;
}


/* ===== Clear cashflow card ===== */
.cashflow-card{
  min-height:260px;
}
.cashflow-rate{
  border-radius:99px;
  padding:6px 9px;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:8px;
  font-weight:800;
  white-space:nowrap;
}
.cashflow-summary{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:6px 0 17px;
}
.cashflow-label{
  font-size:9px;
  color:var(--muted);
  font-weight:700;
}
.cashflow-total{
  font-size:27px;
  letter-spacing:-.045em;
  line-height:1.05;
}
.cashflow-caption{
  font-size:8px;
  color:var(--muted);
  line-height:1.45;
}
.cashflow-progress{
  width:100%;
  height:12px;
  border-radius:99px;
  overflow:hidden;
  display:flex;
  background:#eef0f5;
  margin-bottom:15px;
  box-shadow:inset 0 0 0 1px rgba(20,27,50,.02);
}
.cashflow-progress-paid{
  width:71.4%;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform-origin:left center;
  animation:cashflowPaidGrow 850ms 280ms var(--ease-out-expo) both;
}
.cashflow-progress-pending{
  flex:1;
  background:#cbc6ff;
  transform-origin:left center;
  animation:cashflowPendingGrow 650ms 560ms var(--ease-out-expo) both;
}
.cashflow-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:15px;
}
.cashflow-stat{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.cashflow-stat-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  margin-top:4px;
  flex:none;
}
.cashflow-stat-dot.paid{background:var(--brand)}
.cashflow-stat-dot.pending{background:#bcb5ff}
.cashflow-stat div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cashflow-stat span{
  font-size:8px;
  color:var(--muted);
}
.cashflow-stat strong{
  font-size:11px;
  color:var(--text);
}
.cashflow-expense{
  border-top:1px solid var(--line);
  padding-top:13px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}
.cashflow-expense>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.cashflow-expense-label{
  font-size:9px;
  color:var(--text);
  font-weight:700;
}
.cashflow-expense small{
  font-size:8px;
  color:var(--muted);
}
.cashflow-expense>strong{
  font-size:12px;
  color:var(--danger);
  white-space:nowrap;
}
@keyframes cashflowPaidGrow{
  from{transform:scaleX(0);opacity:.35}
  to{transform:scaleX(1);opacity:1}
}
@keyframes cashflowPendingGrow{
  from{transform:scaleX(0);opacity:0}
  to{transform:scaleX(1);opacity:1}
}
html[data-theme="dark"] .cashflow-progress{
  background:#2b303b;
}
html[data-theme="dark"] .cashflow-progress-pending{
  background:#4a456f;
}
html[data-theme="dark"] .cashflow-expense{
  border-top-color:#303642;
}
html[data-theme="dark"] .cashflow-expense-label{
  color:#e7e9ef;
}
html[data-theme="dark"] .cashflow-stat strong{
  color:#f3f4f8;
}
@media(max-width:500px){
  .cashflow-split{grid-template-columns:1fr}
}


/* ===== Fluxo v6: readability, creation motion, finance & notifications ===== */

/* Slightly larger, easier-to-read desktop UI */
@media (min-width:781px){
  .sidebar{width:264px;padding:26px 20px}
  .main{margin-left:264px}
  .topbar{height:76px;padding:0 38px}
  .page{padding:38px;max-width:1580px}
  .brand-name{font-size:18px}
  .brand-sub{font-size:11.5px}
  .nav-item{font-size:13px;padding:13px 14px}
  .page-head h1{font-size:34px}
  .muted{font-size:14px}
  .attention-card{padding:19px}
  .attention-card strong{font-size:21px}
  .attention-card small{font-size:11px}
  .card-kicker{font-size:10px}
  .panel{padding:20px}
  .panel-head h3{font-size:15.5px}
  .panel-head p{font-size:11.5px}
  .metric-card>span,.metric-head>span:first-child{font-size:12px}
  .metric-card strong{font-size:28px}
  .metric-card small{font-size:11px}
  .clean-table th{font-size:10px;padding:12px 10px}
  .clean-table td{font-size:11.5px;padding:14px 10px}
  .client-main strong{font-size:11px}
  .client-main span{font-size:10px}
  .status-select{font-size:10px}
  .small-action,.primary-btn,.secondary-btn,.danger-btn{font-size:12px}
  .task-row h4{font-size:12px}
  .task-row p{font-size:10px}
  .form-grid label{font-size:10.5px}
  .form-grid input,.form-grid select,.form-grid textarea{font-size:12px;padding:11px 12px}
  .modal{width:min(650px,100%);padding:27px}
  .modal-head h2{font-size:26px}
  .modal-head p{font-size:12px}
}

/* More natural modal animation. Hidden keeps it mounted, allowing smooth transitions. */
.modal-backdrop.hidden{
  display:grid;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 210ms ease,visibility 0s linear 210ms;
}
.modal-backdrop{
  opacity:0;
  visibility:visible;
  pointer-events:auto;
  transition:opacity 230ms ease,visibility 0s linear 0s;
}
.modal-backdrop.modal-ready{opacity:1}
.modal{
  opacity:0;
  transform:translateY(22px) scale(.965);
  filter:blur(3px);
  transition:
    transform 420ms var(--ease-out-expo),
    opacity 240ms ease,
    filter 320ms ease;
}
.modal-backdrop.modal-ready .modal{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.modal-backdrop.modal-ready .modal-head{
  animation:modalContentUp 430ms 60ms var(--ease-out-expo) both;
}
.modal-backdrop.modal-ready .form-grid>*, 
.modal-backdrop.modal-ready .pricing>*,
.modal-backdrop.modal-ready .profile-popover>*{
  animation:modalContentUp 430ms var(--ease-out-expo) both;
}
.modal-backdrop.modal-ready .form-grid>*:nth-child(1){animation-delay:80ms}
.modal-backdrop.modal-ready .form-grid>*:nth-child(2){animation-delay:105ms}
.modal-backdrop.modal-ready .form-grid>*:nth-child(3){animation-delay:130ms}
.modal-backdrop.modal-ready .form-grid>*:nth-child(4){animation-delay:155ms}
.modal-backdrop.modal-ready .form-grid>*:nth-child(5){animation-delay:180ms}
.modal-backdrop.modal-ready .form-grid>*:nth-child(6){animation-delay:205ms}
.modal-backdrop.modal-ready .form-grid>*:nth-child(7){animation-delay:230ms}
.modal-backdrop.modal-ready .form-grid>*:nth-child(8){animation-delay:255ms}
@keyframes modalContentUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Notifications popover */
.notification-popover{
  position:fixed;
  z-index:80;
  top:68px;
  right:34px;
  width:min(365px,calc(100vw - 28px));
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:0 26px 70px rgba(18,24,46,.18);
  padding:15px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px) scale(.97);
  transform-origin:top right;
  filter:blur(2px);
  transition:
    opacity 180ms ease,
    transform 340ms var(--ease-out-expo),
    filter 240ms ease,
    visibility 0s linear 340ms;
}
.notification-popover.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  filter:blur(0);
  transition:
    opacity 180ms ease,
    transform 340ms var(--ease-out-expo),
    filter 240ms ease,
    visibility 0s linear 0s;
}
.notification-popover-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 12px;
}
.notification-popover-head h3{margin:4px 0 0;font-size:15px}
.notification-close{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--muted);font-size:17px;
  transition:transform 160ms var(--ease-out-quart),background 160ms ease,color 160ms ease;
}
.notification-close:hover{transform:rotate(4deg) scale(1.04);color:var(--text)}
.notification-list{display:flex;flex-direction:column;gap:7px}
.notification-item{
  display:flex;align-items:center;gap:10px;
  padding:10px;border-radius:12px;background:var(--surface-2);border:1px solid transparent;
  animation:notificationItemIn 380ms var(--ease-out-expo) both;
}
.notification-item:nth-child(2){animation-delay:35ms}
.notification-item:nth-child(3){animation-delay:70ms}
.notification-item:nth-child(4){animation-delay:105ms}
.notification-item.late{border-color:rgba(226,93,102,.14)}
.notification-item-icon{
  width:30px;height:30px;border-radius:9px;background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;font-size:11px;font-weight:800;flex:none
}
.notification-item.late .notification-item-icon{background:var(--danger-soft);color:var(--danger)}
.notification-item-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.notification-item-copy strong{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notification-item-copy span{font-size:9px;color:var(--muted)}
.notification-footer{
  width:100%;margin-top:10px;padding:10px 11px;border-radius:11px;border:0;
  background:var(--brand-soft);color:var(--brand);font-size:10px;font-weight:800;
  display:flex;justify-content:space-between;align-items:center;
  transition:transform 180ms var(--ease-out-quart),background 180ms ease;
}
.notification-footer:hover{transform:translateY(-1px)}
.notification-empty{
  min-height:125px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:4px;color:var(--muted)
}
.notification-empty>span{width:34px;height:34px;border-radius:11px;background:var(--mint-soft);color:var(--mint);display:grid;place-items:center;font-weight:800;margin-bottom:4px}
.notification-empty strong{font-size:11px;color:var(--text)}
.notification-empty small{font-size:9px}
@keyframes notificationItemIn{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}
html[data-theme="dark"] .notification-popover{
  background:#20242e;
  border-color:#303642;
  box-shadow:0 28px 75px rgba(0,0,0,.34);
}
html[data-theme="dark"] .notification-item{
  background:#1b1f28;
}
html[data-theme="dark"] .notification-close{
  background:#1b1f28;border-color:#303642
}

/* Real finance entries */
.finance-expense-item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.finance-expense-item:last-child{border-bottom:0}
.finance-expense-icon{
  width:31px;height:31px;border-radius:10px;background:var(--danger-soft);color:var(--danger);
  display:grid;place-items:center;font-weight:800
}
.finance-expense-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.finance-expense-copy strong{font-size:10.5px}
.finance-expense-copy span{font-size:8.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.finance-expense-amount{font-size:10.5px;color:var(--danger);white-space:nowrap}
.empty-finance{padding:26px 8px;text-align:center;font-size:10px;color:var(--muted)}
html[data-theme="dark"] .finance-expense-item{border-bottom-color:#2f3541}

/* Dashboard simplified: breathe more now that the redundant KPI row is gone */
#page-dashboard .attention-grid{margin-bottom:20px}
#page-dashboard .dashboard-grid{gap:18px}
#page-dashboard .dashboard-grid.lower{margin-top:2px}

@media(max-width:780px){
  .notification-popover{top:60px;right:14px}
  .finance-expense-item{grid-template-columns:auto minmax(0,1fr) auto}
  .finance-expense-item .icon-danger{grid-column:3;grid-row:2}
}


/* ===== Fluxo v7: larger interface + unified sidebar icons ===== */
.nav-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  flex:none;
}
.nav-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

/* This pass is intentionally more visible than v6. */
@media (min-width:781px){
  .sidebar{
    width:292px;
    padding:30px 22px;
  }
  .main{
    margin-left:292px;
  }
  .topbar{
    height:84px;
    padding:0 46px;
  }
  .page{
    padding:46px;
    max-width:1740px;
  }

  .brand-row{
    gap:14px;
    padding:0 8px 30px;
  }
  .brand-mark{
    width:44px;
    height:44px;
    border-radius:14px;
    font-size:17px;
  }
  .brand-name{
    font-size:20px;
  }
  .brand-sub{
    font-size:12.5px;
  }
  .theme-toggle{
    width:38px;
    height:38px;
    border-radius:12px;
  }

  .nav{
    gap:8px;
  }
  .nav-item{
    gap:14px;
    padding:15px 16px;
    border-radius:14px;
    font-size:14.5px;
  }
  .nav-icon{
    width:25px;
    height:25px;
  }
  .nav-icon svg{
    width:20px;
    height:20px;
  }

  .upgrade-card{
    padding:17px;
    border-radius:18px;
    gap:8px;
  }
  .upgrade-card strong{
    font-size:14px;
  }
  .upgrade-card span:not(.upgrade-pill){
    font-size:12px;
  }
  .profile-card{
    padding:12px;
    border-radius:16px;
  }
  .profile-card .avatar{
    width:38px;
    height:38px;
  }
  .profile-copy strong{
    font-size:12px;
  }
  .profile-copy span{
    font-size:10px;
  }

  .workspace-switcher button{
    font-size:15px;
  }
  .status-dot{
    width:9px;
    height:9px;
  }
  .icon-btn{
    width:43px;
    height:43px;
    border-radius:13px;
  }
  .top-icon-btn svg{
    width:19px;
    height:19px;
  }
  .notification-bell svg{
    width:19px !important;
    height:19px !important;
  }
  .primary-btn,.secondary-btn,.small-action,.danger-btn{
    padding:11px 16px;
    border-radius:13px;
    font-size:13px;
  }

  .page-head{
    margin-bottom:32px;
  }
  .page-head h1{
    font-size:39px;
    margin:5px 0 9px;
  }
  .eyebrow{
    font-size:11px;
  }
  .muted{
    font-size:15px;
  }
  .period-toggle button,.task-tabs button{
    padding:10px 14px;
    font-size:12.5px;
  }

  .attention-grid{
    gap:17px;
  }
  .attention-card{
    padding:22px;
    border-radius:20px;
    gap:15px;
  }
  .attention-icon{
    width:48px;
    height:48px;
    border-radius:15px;
    font-size:17px;
  }
  .attention-card strong{
    font-size:24px;
  }
  .attention-card small{
    font-size:12.5px;
  }
  .card-kicker{
    font-size:10.5px;
  }
  .ghost-arrow{
    width:36px;
    height:36px;
    border-radius:11px;
    font-size:15px;
  }

  .dashboard-grid,
  .dashboard-grid.lower{
    gap:20px;
  }
  .panel{
    padding:24px;
    border-radius:22px;
  }
  .panel-head{
    margin-bottom:19px;
  }
  .panel-head h3{
    font-size:18px;
    margin-bottom:6px;
  }
  .panel-head p{
    font-size:12.5px;
  }

  .chart-wrap{
    height:315px;
  }
  .chart-legend{
    font-size:11.5px;
  }

  .mini-task{
    padding:13px;
    border-radius:15px;
  }
  .mini-task-copy strong{
    font-size:11.5px;
  }
  .mini-task-copy span,
  .task-time{
    font-size:10px;
  }
  .task-check{
    width:22px;
    height:22px;
    border-radius:7px;
  }

  .clean-table th{
    font-size:11px;
    padding:14px 12px;
  }
  .clean-table td{
    font-size:13px;
    padding:16px 12px;
  }
  .client-avatar{
    width:35px;
    height:35px;
    border-radius:11px;
    font-size:10px;
  }
  .client-main strong{
    font-size:12.5px;
  }
  .client-main span{
    font-size:11px;
  }
  .status-badge{
    padding:6px 9px;
    font-size:10px;
  }
  .status-select,
  .team-role-select{
    font-size:11.5px;
    padding:8px 10px;
  }
  .row-action{
    font-size:18px;
  }

  .toolbar{
    gap:12px;
    margin-bottom:17px;
  }
  .searchbox{
    min-height:46px;
    border-radius:14px;
  }
  .searchbox input{
    font-size:13px;
  }
  .toolbar select{
    min-height:46px;
    font-size:12.5px;
  }

  .finance-metrics{
    gap:17px;
  }
  .metric-card{
    min-height:145px;
    padding:21px;
    border-radius:20px;
  }
  .metric-card>span,
  .metric-head>span:first-child{
    font-size:13px;
  }
  .metric-card strong{
    font-size:31px;
  }
  .metric-card small{
    font-size:12px;
  }

  .task-row{
    padding:17px 19px;
    border-radius:18px;
    gap:14px;
  }
  .task-row h4{
    font-size:13.5px;
  }
  .task-row p{
    font-size:11px;
  }
  .priority-pill,.task-date{
    font-size:10px;
  }

  .team-member{
    padding:13px;
    border-radius:15px;
  }
  .team-copy strong{
    font-size:12px;
  }
  .team-copy span{
    font-size:10.5px;
  }
  .role-pill,.member-owner-note{
    font-size:9.5px;
  }

  .cashflow-label{
    font-size:10.5px;
  }
  .cashflow-total{
    font-size:31px;
  }
  .cashflow-caption{
    font-size:9.5px;
  }
  .cashflow-stat span{
    font-size:9.5px;
  }
  .cashflow-stat strong{
    font-size:12.5px;
  }
  .cashflow-expense-label{
    font-size:10.5px;
  }
  .cashflow-expense small{
    font-size:9.5px;
  }
  .cashflow-expense>strong{
    font-size:13.5px;
  }

  .finance-expense-copy strong{
    font-size:12px;
  }
  .finance-expense-copy span{
    font-size:10px;
  }
  .finance-expense-amount{
    font-size:12px;
  }

  .modal{
    width:min(700px,100%);
    padding:31px;
    border-radius:24px;
  }
  .modal-head h2{
    font-size:29px;
  }
  .modal-head p{
    font-size:13px;
  }
  .form-grid{
    gap:14px;
  }
  .form-grid label{
    font-size:11.5px;
  }
  .form-grid input,
  .form-grid select,
  .form-grid textarea{
    padding:13px 14px;
    font-size:13px;
    border-radius:12px;
  }

  .notification-popover{
    top:76px;
    right:42px;
    width:min(405px,calc(100vw - 32px));
    padding:17px;
  }
  .notification-popover-head h3{
    font-size:17px;
  }
  .notification-item{
    padding:12px;
  }
  .notification-item-copy strong{
    font-size:12px;
  }
  .notification-item-copy span{
    font-size:10px;
  }
  .notification-footer{
    padding:12px;
    font-size:11.5px;
  }
}

/* Keep the larger desktop layout comfortable on medium laptop widths. */
@media (min-width:781px) and (max-width:1180px){
  .sidebar{width:270px}
  .main{margin-left:270px}
  .page{padding:34px}
  .page-head h1{font-size:35px}
  .attention-card strong{font-size:21px}
}


/* ===== Fluxo v8: dark team role selects ===== */
html[data-theme="dark"] .team-role-select{
  background:#1b1f28 !important;
  color:#e7eaf1 !important;
  border-color:#343b49 !important;
  box-shadow:none !important;
  color-scheme:dark;
}
html[data-theme="dark"] .team-role-select:hover{
  background:#222731 !important;
  border-color:#424a59 !important;
}
html[data-theme="dark"] .team-role-select:focus{
  background:#222731 !important;
  color:#ffffff !important;
  border-color:#5a54a4 !important;
  box-shadow:0 0 0 3px rgba(128,114,255,.12) !important;
}
html[data-theme="dark"] .team-role-select option{
  background:#1b1f28;
  color:#f0f2f7;
}


/* ===== Fluxo v9: workspaces ===== */
.workspace-switcher{
  position:relative;
}
.workspace-trigger{
  display:flex;
  align-items:center;
  gap:6px;
}
.workspace-chevron{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform 260ms var(--ease-out-expo);
}
.workspace-trigger[aria-expanded="true"] .workspace-chevron{
  transform:rotate(180deg);
}

.workspace-popover{
  position:fixed;
  z-index:82;
  top:72px;
  left:calc(292px + 38px);
  width:min(375px,calc(100vw - 32px));
  padding:15px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:0 26px 70px rgba(18,24,46,.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px) scale(.97);
  transform-origin:top left;
  filter:blur(2px);
  transition:
    opacity 180ms ease,
    transform 340ms var(--ease-out-expo),
    filter 240ms ease,
    visibility 0s linear 340ms;
}
.workspace-popover.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  filter:blur(0);
  transition:
    opacity 180ms ease,
    transform 340ms var(--ease-out-expo),
    filter 240ms ease,
    visibility 0s linear 0s;
}
.workspace-popover-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:2px 2px 12px;
}
.workspace-popover-head h3{
  margin:4px 0 0;
  font-size:16px;
}
.workspace-popover-close{
  width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--muted);font-size:17px;
  transition:transform 160ms var(--ease-out-quart),background 160ms ease,color 160ms ease;
}
.workspace-popover-close:hover{transform:rotate(4deg) scale(1.04);color:var(--text)}

.workspace-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  max-height:310px;
  overflow:auto;
  padding-right:2px;
}
.workspace-list-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  border:1px solid transparent;
  border-radius:13px;
  background:var(--surface-2);
  transition:transform 180ms var(--ease-out-quart),border-color 180ms ease,background 180ms ease;
  animation:workspaceRowIn 360ms var(--ease-out-expo) both;
}
.workspace-list-row:nth-child(2){animation-delay:35ms}
.workspace-list-row:nth-child(3){animation-delay:70ms}
.workspace-list-row:hover{transform:translateY(-1px);border-color:var(--line)}
.workspace-list-row.active{
  background:var(--brand-soft);
  border-color:rgba(109,93,252,.18);
}
.workspace-select-main{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
}
.workspace-avatar{
  width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,var(--brand),var(--brand-2));
  color:#fff;font-size:11px;font-weight:800;
  box-shadow:0 6px 18px rgba(109,93,252,.16);
  flex:none;
}
.workspace-row-copy{
  display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;
}
.workspace-row-copy strong{
  font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.workspace-row-copy small{
  font-size:9px;color:var(--muted);
}
.workspace-check{
  width:22px;height:22px;border-radius:8px;
  display:grid;place-items:center;
  background:var(--brand);color:#fff;font-size:9px;font-weight:800;flex:none;
}
.workspace-more{
  width:34px;height:34px;margin-right:7px;
  border:0;background:transparent;color:var(--muted);
  border-radius:9px;font-weight:800;letter-spacing:.08em;
}
.workspace-more:hover{background:rgba(127,127,127,.08);color:var(--text)}

.workspace-create-row{
  width:100%;
  margin-top:9px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px;
  border-radius:13px;
  border:1px dashed #d8dbe5;
  background:transparent;
  color:var(--text);
  text-align:left;
  transition:transform 180ms var(--ease-out-quart),border-color 180ms ease,background 180ms ease;
}
.workspace-create-row:hover{
  transform:translateY(-1px);
  border-color:#bfb8ff;
  background:var(--brand-soft);
}
.workspace-create-icon{
  width:32px;height:32px;border-radius:10px;
  display:grid;place-items:center;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:16px;font-weight:600;
}
.workspace-create-copy{
  display:flex;flex-direction:column;gap:2px;flex:1;
}
.workspace-create-copy strong{font-size:10.5px}
.workspace-create-copy small{font-size:8.5px;color:var(--muted)}
.workspace-create-arrow{color:var(--muted)}

.workspace-paywall-card{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px;border-radius:15px;
  background:linear-gradient(135deg,var(--brand-soft),rgba(109,93,252,.06));
  border:1px solid rgba(109,93,252,.14);
}
.workspace-paywall-icon{
  width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;
  background:var(--brand);color:#fff;flex:none;
}
.workspace-paywall-card>div:last-child{
  display:flex;flex-direction:column;gap:4px;
}
.workspace-paywall-card strong{font-size:11px}
.workspace-paywall-card span{font-size:9.5px;line-height:1.55;color:var(--muted)}
.danger-btn:disabled{opacity:.42;cursor:not-allowed;transform:none}

@keyframes workspaceRowIn{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:translateY(0)}
}

html[data-theme="dark"] .workspace-popover{
  background:#20242e;
  border-color:#303642;
  box-shadow:0 28px 75px rgba(0,0,0,.34);
}
html[data-theme="dark"] .workspace-popover-close{
  background:#1b1f28;border-color:#303642;
}
html[data-theme="dark"] .workspace-list-row{
  background:#1b1f28;
}
html[data-theme="dark"] .workspace-list-row.active{
  background:rgba(128,114,255,.13);
  border-color:rgba(128,114,255,.22);
}
html[data-theme="dark"] .workspace-create-row{
  border-color:#3a414e;
}
html[data-theme="dark"] .workspace-create-row:hover{
  border-color:#5d56a7;
  background:rgba(128,114,255,.10);
}

@media(min-width:781px) and (max-width:1180px){
  .workspace-popover{left:calc(270px + 28px)}
}
@media(max-width:780px){
  .workspace-popover{
    left:14px;
    right:14px;
    top:60px;
    width:auto;
  }
}


/* ===== Fluxo v10: workspace-scoped quote metrics ===== */
.quote-metrics .metric-card strong{
  font-variant-numeric:tabular-nums;
}


/* ===== Fluxo v11: real revenue chart ===== */
.revenue-chart-wrap{
  position:relative;
}
.revenue-empty-state{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:5px;
  padding:28px;
  animation:revenueEmptyIn 380ms var(--ease-out-expo) both;
}
.revenue-empty-state.hidden{display:none}
.revenue-empty-icon{
  width:43px;
  height:43px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--brand-soft);
  color:var(--brand);
  font-size:18px;
  margin-bottom:5px;
}
.revenue-empty-state strong{
  font-size:13px;
  color:var(--text);
}
.revenue-empty-state small{
  max-width:330px;
  font-size:10px;
  line-height:1.55;
  color:var(--muted);
}
.revenue-chart-note{
  margin-top:7px;
  padding:8px 10px;
  border-radius:10px;
  background:var(--amber-soft);
  color:var(--amber);
  font-size:9px;
  line-height:1.45;
}
.revenue-chart-note.hidden{display:none}
.payment-date-input{
  width:136px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  border-radius:9px;
  padding:7px 8px;
  font-size:10px;
  outline:none;
  transition:border-color 180ms ease,box-shadow 180ms ease,background 180ms ease;
}
.payment-date-input:focus{
  border-color:#bcb5ff;
  box-shadow:0 0 0 3px rgba(109,93,252,.08);
}
.payment-date-empty{color:var(--muted)}
.payment-field-hidden{
  opacity:0;
  transform:translateY(-5px);
  pointer-events:none;
  max-height:0;
  overflow:hidden;
  margin:0;
  transition:opacity 180ms ease,transform 240ms var(--ease-out-expo),max-height 240ms ease;
}
#paidAtField{
  transition:opacity 180ms ease,transform 240ms var(--ease-out-expo),max-height 240ms ease;
}
html[data-theme="dark"] .payment-date-input{
  background:#1b1f28;
  border-color:#343b49;
  color:#edf0f6;
  color-scheme:dark;
}
html[data-theme="dark"] .revenue-empty-state strong{color:#f2f4f8}
html[data-theme="dark"] .revenue-chart-note{
  background:rgba(240,171,76,.10);
}
@keyframes revenueEmptyIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:translateY(0)}
}


/* ===== Fluxo v12: functional workspace colors ===== */
:root{
  --workspace-accent:#7c6cff;
  --workspace-accent-2:#9a8cff;
  --workspace-accent-soft:rgba(124,108,255,.16);
}

/* Workspace identity in the top bar */
.status-dot{
  background:var(--workspace-accent) !important;
  box-shadow:0 0 0 4px var(--workspace-accent-soft) !important;
  transition:background-color 320ms ease,box-shadow 320ms ease;
}

/* Workspace list uses each workspace's own color */
.workspace-avatar{
  background:linear-gradient(145deg,var(--ws-primary,var(--workspace-accent)),var(--ws-secondary,var(--workspace-accent-2))) !important;
  box-shadow:0 6px 18px var(--ws-soft,var(--workspace-accent-soft)) !important;
}
.workspace-list-row.active{
  background:var(--ws-soft,var(--workspace-accent-soft)) !important;
  border-color:var(--ws-primary,var(--workspace-accent)) !important;
}
.workspace-check{
  background:var(--ws-primary,var(--workspace-accent)) !important;
}

/* Visual color selector */
.workspace-color-section{
  display:flex;
  flex-direction:column;
  gap:9px;
}
.workspace-color-label{
  font-size:10px;
  font-weight:700;
  color:#70798d;
}
.workspace-color-options{
  display:flex;
  align-items:center;
  gap:9px;
}
.workspace-color-swatch{
  width:34px;
  height:34px;
  border-radius:11px;
  border:2px solid transparent;
  background:var(--swatch);
  position:relative;
  box-shadow:0 6px 16px color-mix(in srgb,var(--swatch) 18%,transparent);
  transition:
    transform 180ms var(--ease-out-expo),
    box-shadow 220ms ease,
    border-color 180ms ease;
}
.workspace-color-swatch:hover{
  transform:translateY(-2px) scale(1.04);
}
.workspace-color-swatch.active{
  transform:scale(1.06);
  border-color:#fff;
  box-shadow:
    0 0 0 3px color-mix(in srgb,var(--swatch) 28%,transparent),
    0 8px 20px color-mix(in srgb,var(--swatch) 22%,transparent);
}
.workspace-color-swatch.active::after{
  content:"✓";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:12px;
  font-weight:800;
  text-shadow:0 1px 5px rgba(0,0,0,.2);
}

/* Live preview in creation modal */
.workspace-preview{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px;
  border-radius:14px;
  border:1px solid color-mix(in srgb,var(--preview-primary) 24%,var(--line));
  background:linear-gradient(135deg,var(--preview-soft),transparent);
  transition:background 320ms ease,border-color 320ms ease,transform 220ms var(--ease-out-expo);
}
.workspace-preview-avatar{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--preview-primary),var(--preview-secondary));
  color:#fff;
  font-size:13px;
  font-weight:800;
  box-shadow:0 7px 18px color-mix(in srgb,var(--preview-primary) 20%,transparent);
  transition:background 320ms ease,box-shadow 320ms ease;
}
.workspace-preview-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.workspace-preview-copy strong{
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.workspace-preview-copy small{
  font-size:9px;
  color:var(--muted);
}
.workspace-preview-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--preview-primary);
  box-shadow:0 0 0 4px var(--preview-soft);
  transition:background 320ms ease,box-shadow 320ms ease;
}

html[data-theme="dark"] .workspace-color-label{
  color:#a3aabd;
}
html[data-theme="dark"] .workspace-color-swatch.active{
  border-color:#222731;
}
html[data-theme="dark"] .workspace-preview{
  background:linear-gradient(135deg,var(--preview-soft),rgba(255,255,255,.01));
}


/* ===== Fluxo v13: SaaS footer ===== */
.app-footer{
  margin:34px 46px 26px;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  box-shadow:0 12px 34px rgba(18,24,46,.05);
  display:grid;
  grid-template-columns:minmax(220px,1.2fr) auto minmax(220px,.9fr);
  align-items:center;
  gap:28px;
  opacity:0;
  transform:translateY(10px);
  animation:footerIn 520ms 160ms var(--ease-out-expo) forwards;
}
.app-footer-brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.app-footer-logo{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--brand),var(--brand-2));
  color:#fff;
  font-weight:800;
  font-size:14px;
  box-shadow:0 7px 20px rgba(109,93,252,.18);
  flex:none;
}
.app-footer-brand>div:last-child{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.app-footer-brand strong{
  font-size:13px;
  letter-spacing:-.02em;
}
.app-footer-brand span{
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.app-footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 14px;
}
.app-footer-links button{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:10.5px;
  font-weight:700;
  padding:7px 2px;
  position:relative;
  transition:color 180ms ease,transform 180ms var(--ease-out-quart);
}
.app-footer-links button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  height:1px;
  border-radius:99px;
  background:var(--brand);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 220ms var(--ease-out-expo);
}
.app-footer-links button:hover{
  color:var(--text);
  transform:translateY(-1px);
}
.app-footer-links button:hover::after{
  transform:scaleX(1);
}

.app-footer-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:14px;
  color:var(--muted);
  font-size:9.5px;
  white-space:nowrap;
}
.app-footer-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:99px;
  background:var(--mint-soft);
  color:var(--mint);
  font-weight:800;
}
.app-footer-status i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mint);
  box-shadow:0 0 0 3px rgba(25,184,121,.12);
  animation:footerStatusPulse 2.2s ease-in-out infinite;
}

html[data-theme="dark"] .app-footer{
  background:#1b1f28;
  border-color:#2e3440;
  box-shadow:0 16px 42px rgba(0,0,0,.18);
}
html[data-theme="dark"] .app-footer-brand strong{
  color:#f4f5f8;
}
html[data-theme="dark"] .app-footer-links button:hover{
  color:#fff;
}

@keyframes footerIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes footerStatusPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(.88);opacity:.7}
}

@media(max-width:1180px){
  .app-footer{
    grid-template-columns:1fr;
    gap:16px;
  }
  .app-footer-links{
    justify-content:flex-start;
  }
  .app-footer-meta{
    justify-content:flex-start;
  }
}
@media(max-width:780px){
  .app-footer{
    margin:22px 14px 20px;
    padding:18px;
    border-radius:17px;
  }
  .app-footer-brand span{
    white-space:normal;
  }
  .app-footer-meta{
    flex-wrap:wrap;
  }
}


/* ===== Fluxo v14: footer attached to page bottom ===== */
.app-footer.app-footer-minimal{
  margin:52px 0 0;
  padding:24px 46px 26px;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:108px;
  width:100%;
  opacity:0;
  transform:translateY(8px);
  animation:footerIn 460ms 120ms var(--ease-out-expo) forwards;
}

.app-footer.app-footer-minimal .app-footer-links{
  width:100%;
  justify-content:center;
  gap:8px 24px;
}

.app-footer.app-footer-minimal .app-footer-links button{
  font-size:11px;
  padding:7px 1px;
}

.app-footer.app-footer-minimal .app-footer-meta{
  width:100%;
  justify-content:center;
  font-size:9.5px;
  color:var(--muted);
}

html[data-theme="dark"] .app-footer.app-footer-minimal{
  background:transparent;
  border-top-color:#2b313d;
  box-shadow:none;
}

/* Remove now-unused floating-footer visual rules from layout impact */
.app-footer-minimal .app-footer-brand,
.app-footer-minimal .app-footer-status{
  display:none !important;
}

@media(max-width:1180px){
  .app-footer.app-footer-minimal{
    display:flex;
    align-items:center;
    gap:12px;
  }
  .app-footer.app-footer-minimal .app-footer-links,
  .app-footer.app-footer-minimal .app-footer-meta{
    justify-content:center;
  }
}

@media(max-width:780px){
  .app-footer.app-footer-minimal{
    margin:34px 0 0;
    padding:22px 18px calc(22px + env(safe-area-inset-bottom));
    border-radius:0;
  }
  .app-footer.app-footer-minimal .app-footer-links{
    gap:6px 16px;
  }
  .app-footer.app-footer-minimal .app-footer-links button{
    font-size:10.5px;
  }
}


/* ===== Fluxo v15: legal pages & support form ===== */
.legal-modal-head,
.support-modal-head{
  padding-right:30px;
}
.legal-draft-note{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:12px 14px;
  border-radius:13px;
  background:var(--amber-soft);
  border:1px solid color-mix(in srgb,var(--amber) 18%,transparent);
  margin-bottom:18px;
}
.legal-draft-note strong{
  font-size:10px;
  color:var(--amber);
}
.legal-draft-note span{
  font-size:9px;
  line-height:1.55;
  color:var(--muted);
}
.legal-content{
  display:flex;
  flex-direction:column;
  gap:0;
  max-height:52vh;
  overflow:auto;
  padding-right:8px;
  scrollbar-width:thin;
}
.legal-content section{
  padding:15px 1px;
  border-bottom:1px solid var(--line);
}
.legal-content section:first-child{padding-top:4px}
.legal-content section:last-child{
  border-bottom:0;
  padding-bottom:4px;
}
.legal-content h3{
  margin:0 0 7px;
  font-size:12.5px;
  letter-spacing:-.02em;
  color:var(--text);
}
.legal-content p{
  margin:0 0 7px;
  font-size:10px;
  line-height:1.7;
  color:var(--muted);
}
.legal-content p:last-child{margin-bottom:0}
.legal-content ul{
  margin:8px 0 0;
  padding-left:17px;
  color:var(--muted);
}
.legal-content li{
  font-size:9.5px;
  line-height:1.65;
  margin:3px 0;
}
.legal-modal-actions{
  display:flex;
  justify-content:flex-end;
  padding-top:18px;
  border-top:1px solid var(--line);
  margin-top:14px;
}
.support-form textarea{
  min-height:145px;
}
.support-char-count{
  align-self:flex-end;
  font-size:8.5px;
  font-weight:500;
  color:var(--muted);
  margin-top:-2px;
}
.support-info{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:11px 12px;
  border-radius:12px;
  background:var(--brand-soft);
  border:1px solid color-mix(in srgb,var(--brand) 14%,transparent);
}
.support-info>span{
  width:24px;
  height:24px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:var(--brand);
  color:#fff;
  flex:none;
  font-size:10px;
  font-weight:800;
}
.support-info p{
  margin:2px 0 0;
  font-size:9px;
  line-height:1.55;
  color:var(--muted);
}
html[data-theme="dark"] .legal-content section,
html[data-theme="dark"] .legal-modal-actions{
  border-color:#303642;
}
html[data-theme="dark"] .legal-draft-note{
  background:rgba(240,171,76,.09);
  border-color:rgba(240,171,76,.18);
}
html[data-theme="dark"] .support-info{
  background:rgba(128,114,255,.09);
  border-color:rgba(128,114,255,.17);
}
@media(min-width:781px){
  .legal-content h3{font-size:14px}
  .legal-content p{font-size:11.5px}
  .legal-content li{font-size:11px}
  .legal-draft-note strong{font-size:11px}
  .legal-draft-note span{font-size:10px}
  .support-info p{font-size:10px}
}


/* ===== Fluxo v16: visual polish pack ===== */
.attention-card,
.panel,
.team-member,
.task-row,
.mini-task,
.finance-expense-item,
.workspace-list-row,
.notification-item,
.clean-table tbody tr{
  transition:
    transform 220ms var(--ease-out-expo),
    box-shadow 240ms ease,
    border-color 200ms ease,
    background-color 200ms ease,
    opacity 200ms ease;
}

.attention-card:hover,
.panel:hover,
.team-member:hover,
.task-row:hover,
.mini-task:hover,
.finance-expense-item:hover{
  transform:translateY(-2px);
}

.panel:hover{
  box-shadow:0 18px 36px rgba(16,24,40,.08);
}
.attention-card:hover{
  box-shadow:0 14px 32px rgba(109,93,252,.10);
}
.clean-table tbody tr:hover{
  transform:translateX(2px);
  background:rgba(109,93,252,.04);
}
html[data-theme="dark"] .clean-table tbody tr:hover{
  background:rgba(128,114,255,.07);
}

.chart-line{
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  animation:chartLineDraw 1200ms 120ms cubic-bezier(.16,1,.3,1) forwards;
}
.chart-area{
  opacity:0;
  animation:chartAreaFade 820ms 260ms ease forwards;
}
.chart-dot{
  transform-origin:center;
  animation:chartDotPop 520ms var(--ease-out-expo) forwards;
}
.chart-point-group{opacity:0; animation:chartPointFade 400ms ease forwards;}

.pulse-update{
  animation:pulseMetricFx 500ms ease;
}

.flash-new{
  animation:flashNewItem 1250ms cubic-bezier(.16,1,.3,1);
}

.success-burst{
  position:fixed;
  z-index:120;
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.success-burst-ring{
  position:absolute;
  inset:-20px;
  border-radius:999px;
  border:2px solid rgba(25,184,121,.28);
  animation:successRing 820ms ease-out forwards;
}
.success-burst-check{
  position:relative;
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:#19b879;
  color:#fff;
  font-weight:900;
  box-shadow:0 14px 30px rgba(25,184,121,.24);
  animation:successCheckPop 820ms cubic-bezier(.16,1,.3,1) forwards;
}

.mini-confetti{
  position:fixed;
  z-index:119;
  width:8px;
  height:12px;
  border-radius:3px;
  pointer-events:none;
  background:linear-gradient(180deg,#7c6cff,#a391ff);
  animation:miniConfettiDrop 1400ms cubic-bezier(.16,1,.3,1) forwards;
}
.mini-confetti:nth-child(3n){background:linear-gradient(180deg,#19b879,#65deb2)}
.mini-confetti:nth-child(4n){background:linear-gradient(180deg,#f0ab4c,#ffd48f)}

body.workspace-switching .page.active{
  position:relative;
}
body.workspace-switching .page.active .panel,
body.workspace-switching .page.active .attention-card{
  overflow:hidden;
}
body.workspace-switching .page.active .panel::after,
body.workspace-switching .page.active .attention-card::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transform:translateX(-100%);
  animation:workspaceShimmer 820ms ease;
}
body.workspace-switching .page.active .panel,
body.workspace-switching .page.active .attention-card,
body.workspace-switching .page.active .clean-table tbody tr,
body.workspace-switching .page.active .task-row,
body.workspace-switching .page.active .mini-task{
  filter:saturate(.92);
}
html[data-theme="dark"] body.workspace-switching .page.active .panel::after,
html[data-theme="dark"] body.workspace-switching .page.active .attention-card::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}

@keyframes pageEnterFx{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes listItemIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes chartLineDraw{
  to{stroke-dashoffset:0}
}
@keyframes chartAreaFade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes chartDotPop{
  0%{transform:scale(.4);opacity:0}
  70%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes chartPointFade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes pulseMetricFx{
  0%{transform:scale(1);filter:brightness(1)}
  40%{transform:scale(1.025);filter:brightness(1.06)}
  100%{transform:scale(1);filter:brightness(1)}
}
@keyframes flashNewItem{
  0%{box-shadow:0 0 0 0 rgba(109,93,252,0);background:transparent}
  22%{box-shadow:0 0 0 5px rgba(109,93,252,.12);background:rgba(109,93,252,.07)}
  100%{box-shadow:0 0 0 0 rgba(109,93,252,0);background:transparent}
}
@keyframes successRing{
  from{opacity:.55;transform:scale(.6)}
  to{opacity:0;transform:scale(1.7)}
}
@keyframes successCheckPop{
  0%{transform:scale(.45);opacity:0}
  55%{transform:scale(1.06);opacity:1}
  100%{transform:scale(1);opacity:0}
}
@keyframes miniConfettiDrop{
  0%{transform:translate3d(0,0,0) rotate(0);opacity:1}
  100%{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot));opacity:0}
}
@keyframes workspaceShimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

@media (prefers-reduced-motion: reduce){
  .page.page-enter,
  .clean-table tbody tr,
  .task-row,
  .mini-task,
  .team-member,
  .finance-expense-item,
  .chart-line,
  .chart-area,
  .chart-dot,
  .chart-point-group,
  .pulse-update,
  .flash-new,
  .success-burst-check,
  .success-burst-ring,
  .mini-confetti{
    animation:none !important;
  }
  body.workspace-switching .page.active .panel::after,
  body.workspace-switching .page.active .attention-card::after{
    display:none !important;
  }
}


/* ===== Fluxo v16: premium visual polish ===== */

/* Row entrance / progressive loading */
.stagger-in{
  opacity:0;
  transform:translateY(7px);
  animation:visualRowIn 430ms calc(var(--stagger-index,0) * 38ms) var(--ease-out-expo) forwards;
}
@keyframes visualRowIn{
  to{opacity:1;transform:translateY(0)}
}

/* Table rows become quieter until hovered */
.clean-table tbody tr{
  position:relative;
}
.clean-table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-soft) 22%,transparent);
}

/* Quick actions revealed only when useful */
.client-hover-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  opacity:.12;
  transform:translateX(6px);
  transition:opacity 180ms ease,transform 230ms var(--ease-out-expo);
}
.clean-table tr:hover .client-hover-actions,
.client-hover-actions:focus-within{
  opacity:1;
  transform:translateX(0);
}
.hover-action-btn{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:9px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
  font-size:11px;
  padding:0;
  transition:
    transform 160ms var(--ease-out-quart),
    color 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}
.hover-action-btn:hover{
  transform:translateY(-1px) scale(1.03);
  color:var(--brand);
  border-color:color-mix(in srgb,var(--brand) 28%,var(--line));
  background:var(--brand-soft);
}

/* Newly-created object feedback */
.visual-new-item{
  animation:newItemArrival 1150ms var(--ease-out-expo) both !important;
}
.visual-paid-item{
  animation:paidItemArrival 1200ms var(--ease-out-expo) both !important;
}
@keyframes newItemArrival{
  0%{opacity:.35;transform:translateY(-7px);box-shadow:inset 3px 0 0 var(--brand)}
  32%{opacity:1;transform:translateY(0);background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--brand)}
  100%{background:transparent;box-shadow:inset 0 0 0 transparent}
}
@keyframes paidItemArrival{
  0%{opacity:.45;transform:translateY(-6px);box-shadow:inset 3px 0 0 var(--mint)}
  30%{opacity:1;transform:translateY(0);background:var(--mint-soft);box-shadow:inset 3px 0 0 var(--mint)}
  100%{background:transparent;box-shadow:inset 0 0 0 transparent}
}

/* Tiny, data-backed sparklines */
.metric-mini-chart{
  height:30px;
  margin:0 0 8px;
  opacity:.95;
}
.metric-mini-chart svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.mini-spark-line{
  stroke-dasharray:260;
  stroke-dashoffset:260;
  animation:miniSparkDraw 720ms 90ms var(--ease-out-expo) forwards;
}
.mini-spark-area{
  opacity:0;
  animation:miniSparkArea 480ms 310ms ease forwards;
}
.mini-spark-dot{
  opacity:0;
  transform-box:fill-box;
  transform-origin:center;
  animation:dotIn 280ms var(--ease-out-expo) forwards;
}
@keyframes miniSparkDraw{to{stroke-dashoffset:0}}
@keyframes miniSparkArea{to{opacity:.82}}

/* Workspace transition + skeleton */
.workspace-transition-layer{
  position:fixed;
  z-index:65;
  top:84px;
  left:292px;
  right:0;
  bottom:0;
  padding:46px;
  background:var(--bg);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(5px);
  transition:
    opacity 180ms ease,
    transform 260ms var(--ease-out-expo),
    visibility 0s linear 260ms;
}
.workspace-transition-layer.visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:
    opacity 180ms ease,
    transform 260ms var(--ease-out-expo),
    visibility 0s linear 0s;
}
.workspace-transition-layer.leaving{
  opacity:0;
  transform:translateY(-4px);
}
.workspace-skeleton{
  max-width:1400px;
  margin:0 auto;
}
.skeleton-title{height:36px;width:230px;border-radius:12px;margin-bottom:11px}
.skeleton-subtitle{height:14px;width:360px;border-radius:8px;margin-bottom:34px}
.skeleton-card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:20px}
.skeleton-card{height:112px;border-radius:20px}
.skeleton-content-row{display:grid;grid-template-columns:1.7fr .8fr;gap:20px}
.skeleton-panel{height:360px;border-radius:22px}
.skeleton-panel.small{height:360px}
.workspace-fading .page.active{
  opacity:.25;
  transform:translateY(4px) scale(.997);
  filter:blur(1px);
  transition:opacity 150ms ease,transform 200ms ease,filter 150ms ease;
}

/* Skeleton works in both themes */
.skeleton-shimmer{
  background:linear-gradient(90deg,#eceff5 25%,#f8f9fc 38%,#eceff5 63%);
  background-size:400% 100%;
  animation:shimmer 1.25s ease infinite;
}
html[data-theme="dark"] .skeleton-shimmer{
  background:linear-gradient(90deg,#202530 25%,#292f3b 38%,#202530 63%);
  background-size:400% 100%;
}

/* Page exit complements the existing entrance */
.page.page-leaving{
  display:block;
  opacity:0;
  transform:translateY(-5px);
  transition:opacity 150ms ease,transform 180ms ease;
}

/* Payment success feedback */
.payment-success-burst{
  position:fixed;
  z-index:170;
  width:42px;
  height:42px;
  margin:-21px 0 0 -21px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--mint);
  color:#fff;
  font-weight:900;
  font-size:17px;
  opacity:0;
  transform:scale(.55);
  box-shadow:0 10px 30px rgba(25,184,121,.26),0 0 0 0 rgba(25,184,121,.22);
  pointer-events:none;
}
.payment-success-burst.show{
  animation:paymentBurst 780ms var(--ease-out-expo) forwards;
}
@keyframes paymentBurst{
  0%{opacity:0;transform:scale(.55);box-shadow:0 10px 30px rgba(25,184,121,.26),0 0 0 0 rgba(25,184,121,.22)}
  28%{opacity:1;transform:scale(1.05);box-shadow:0 10px 30px rgba(25,184,121,.26),0 0 0 13px rgba(25,184,121,.08)}
  68%{opacity:1;transform:scale(.96)}
  100%{opacity:0;transform:translateY(-10px) scale(.9);box-shadow:0 12px 30px rgba(25,184,121,.08),0 0 0 21px rgba(25,184,121,0)}
}

/* Very restrained first-payment celebration */
.micro-confetti-layer{
  position:fixed;
  z-index:165;
  left:50%;
  top:22%;
  width:1px;
  height:1px;
  pointer-events:none;
}
.micro-confetti-layer i{
  position:absolute;
  width:5px;
  height:9px;
  border-radius:2px;
  background:var(--c);
  opacity:0;
  transform:translate(0,0) rotate(0);
}
.micro-confetti-layer.go i{
  animation:microConfetti 980ms var(--delay) cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes microConfetti{
  0%{opacity:0;transform:translate(0,0) rotate(0) scale(.8)}
  12%{opacity:.9}
  100%{opacity:0;transform:translate(var(--x),150px) rotate(var(--r)) scale(.7)}
}

/* Slightly more tactile cards without becoming flashy */
.panel,.attention-card,.metric-card{
  will-change:transform;
}
.panel:hover{
  transform:translateY(-3px);
}
.metric-card:hover,.attention-card:hover{
  transform:translateY(-3px) scale(1.002);
}

/* Smooth tab/select state changes */
.status-select,.team-role-select,.period-toggle button,.task-tabs button{
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 170ms var(--ease-out-quart);
}
.status-select:active,.team-role-select:active{
  transform:scale(.985);
}

/* Better dark-mode treatment for hover action buttons */
html[data-theme="dark"] .hover-action-btn{
  background:#1b1f28;
  border-color:#343a47;
}
html[data-theme="dark"] .hover-action-btn:hover{
  background:rgba(128,114,255,.12);
  border-color:rgba(128,114,255,.28);
  color:#aaa2ff;
}

@media(min-width:781px) and (max-width:1180px){
  .workspace-transition-layer{left:270px;padding:34px}
}
@media(max-width:780px){
  .workspace-transition-layer{top:64px;left:0;padding:20px 14px}
  .skeleton-card-row{grid-template-columns:1fr}
  .skeleton-card-row .skeleton-card:nth-child(n+2){display:none}
  .skeleton-content-row{grid-template-columns:1fr}
  .skeleton-panel.small{display:none}
  .client-hover-actions{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .stagger-in,.visual-new-item,.visual-paid-item,.mini-spark-line,.mini-spark-area,.mini-spark-dot{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
  .workspace-transition-layer{transition:none}
}


/* ===== Fluxo v17: fixed page transitions ===== */
/* Disable the generic active-page keyframe during navigation.
   v17 owns the transition explicitly with page-exit / page-pre-enter / page-enter. */
body.page-transitioning .page.active{
  animation:none !important;
}

/* Stable default states */
.page{
  display:none;
  opacity:1;
  transform:none;
  pointer-events:none;
}
.page.active{
  display:block;
  pointer-events:auto;
}

/* Outgoing page */
.page.page-exit{
  display:block;
  opacity:0;
  transform:translateY(-5px);
  transition:
    opacity 140ms ease,
    transform 170ms var(--ease-out-quart);
}

/* Incoming page starts hidden, then transitions once */
.page.page-pre-enter{
  display:block;
  opacity:0;
  transform:translateY(7px);
}
.page.page-enter{
  display:block;
  opacity:1;
  transform:translateY(0);
  transition:
    opacity 280ms ease,
    transform 320ms var(--ease-out-expo);
}

/* Remove the old v16 exit rule that could fight the active-page animation */
.page.page-leaving{
  display:none !important;
}

/* Avoid nested child entrance animations replaying after the page transition.
   They remain available on first app load but not on every navigation. */
body.page-transitioning .page.active .page-head,
body.page-transitioning .page.active .attention-card,
body.page-transitioning .page.active .metrics-grid .metric-card,
body.page-transitioning .page.active .dashboard-grid .panel{
  animation:none !important;
}

@media(prefers-reduced-motion:reduce){
  .page.page-exit,
  .page.page-pre-enter,
  .page.page-enter{
    transition:none !important;
    transform:none !important;
  }
}


/* ===== Fluxo v18: single-source page animation ===== */
/*
  Navigation has ONE owner now:
  JS adds page-exit -> swaps pages -> page-pre-enter/page-enter.
  No generic `.page.active` animation is allowed anywhere.
*/
.page.active{
  animation:none !important;
}

.page.active .page-head,
.page.active .attention-card,
.page.active .metrics-grid .metric-card,
.page.active .dashboard-grid .panel{
  animation:none !important;
  opacity:1;
  transform:none;
}

/* Explicit JS stagger remains allowed for list content. */
.clean-table tbody tr:not(.stagger-in),
.task-row:not(.stagger-in),
.mini-task:not(.stagger-in),
.team-member:not(.stagger-in),
.finance-expense-item:not(.stagger-in){
  opacity:1;
  animation:none;
  transform:none;
}

/* Ensure the transition class itself only transitions — never keyframes. */
.page.page-enter{
  animation:none !important;
  display:block;
  opacity:1;
  transform:translateY(0);
  transition:
    opacity 260ms ease,
    transform 300ms var(--ease-out-expo);
}

.page.page-pre-enter{
  animation:none !important;
  opacity:0;
  transform:translateY(6px);
}

/* The old helper class may still be used on initial load/workspace code;
   it must never trigger a second page animation. */
body:not(.page-transitioning) .page.page-enter{
  animation:none !important;
}



/* ===== Fluxo v19: hard navigation guard ===== */
.page.active{
  animation:none !important;
}
.page.active .page-head,
.page.active .attention-card,
.page.active .metric-card,
.page.active .panel{
  animation:none !important;
}
.page.page-enter{
  animation:none !important;
}


/* ===== Fluxo v1.0 — frontend completion pass ===== */
.nav-separator{height:1px;background:rgba(255,255,255,.07);margin:10px 12px 4px}

/* Charts: never stretch their geometry */
.chart-wrap{
  height:auto !important;
  aspect-ratio:2.65 / 1;
  min-height:250px;
  max-height:360px;
}
#revenueChart{
  width:100%;
  height:100%;
  display:block;
}
.metric-mini-chart{
  height:34px;
  max-width:260px;
}
.metric-mini-chart svg{preserve-aspect-ratio:xMidYMid meet}
.revenue-panel{min-width:0}

/* Cleaner empty states */
.page-empty-overlay{
  min-height:270px;
  display:grid;
  place-items:center;
}
.empty-state{
  min-height:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:7px;
  padding:28px 20px;
}
.empty-state .empty-icon{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-size:18px;margin-bottom:3px
}
.empty-state strong{font-size:13px}
.empty-state p{max-width:360px;margin:0;color:var(--muted);font-size:10px;line-height:1.55}
.empty-state .primary-btn{margin-top:7px}
.inline-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:24px;color:var(--muted)}
.inline-empty strong{font-size:11px;color:var(--text)} .inline-empty span{font-size:9px}
.table-empty{padding:30px;text-align:center;color:var(--muted)}
.client-open{border:0;background:transparent;padding:0;color:inherit;text-align:left;cursor:pointer}

/* Field validation */
.field-error input,.field-error select,.field-error textarea{border-color:var(--danger)!important;box-shadow:0 0 0 3px var(--danger-soft)!important}
.field-error::after{content:"Champ requis";font-size:8px;color:var(--danger);font-weight:600}

/* Client detail */
.client-detail-head{margin-bottom:12px}
.client-detail-title{display:flex;align-items:center;gap:13px}.client-avatar.large{width:46px;height:46px;border-radius:14px;font-size:13px}
.client-detail-tabs{display:flex;gap:5px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:13px;margin-bottom:16px}
.client-detail-tabs button{border:0;background:transparent;color:var(--muted);padding:9px 12px;border-radius:9px;font-weight:700;font-size:10px;transition:.18s ease}
.client-detail-tabs button.active{background:var(--surface);color:var(--text);box-shadow:0 3px 12px rgba(18,24,46,.06)}
.client-detail-tabs button span{margin-left:4px;color:var(--brand)}
.client-tab-panel{display:none;min-height:250px}.client-tab-panel.active{display:block;animation:fadeUp 300ms var(--ease-out-expo)}
.client-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.client-info-grid>div{padding:13px;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;display:flex;flex-direction:column;gap:3px}
.client-info-grid .wide{grid-column:1/-1}.client-info-grid span{font-size:8.5px;color:var(--muted)}.client-info-grid strong{font-size:11px}
.client-notes{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:13px}.client-notes-head{display:flex;justify-content:space-between;align-items:center}.client-notes-head>span{font-size:9px;font-weight:800;color:var(--muted)}
.client-notes p{font-size:10px;line-height:1.6;color:var(--muted);margin:10px 0 0}.inline-notes-editor{width:100%;min-height:100px;margin-top:10px;border:1px solid var(--line);border-radius:11px;padding:10px;background:var(--surface-2);color:var(--text)}.inline-notes-actions{display:flex;justify-content:flex-end;margin-top:7px}
.linked-list{display:flex;flex-direction:column;gap:8px}.linked-list>button,.linked-list>div{width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:12px;padding:12px;display:flex;align-items:center;gap:10px;text-align:left;color:var(--text)}.linked-list>button{cursor:pointer}.linked-list span{display:flex;flex-direction:column;gap:2px;flex:1}.linked-list small{font-size:8.5px;color:var(--muted)}.linked-list i{font-style:normal;color:var(--muted)}
.activity-timeline{padding-left:4px}.timeline-item{position:relative;display:grid;grid-template-columns:16px 1fr;gap:9px;padding-bottom:16px}.timeline-item::before{content:"";position:absolute;left:5px;top:13px;bottom:-1px;width:1px;background:var(--line)}.timeline-item:last-child::before{display:none}.timeline-dot{width:11px;height:11px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);margin-top:3px;z-index:1}.timeline-item>div{display:flex;flex-direction:column;gap:2px}.timeline-item small{font-size:8px;color:var(--muted)}.timeline-item strong{font-size:10.5px}.timeline-item>div>span{font-size:9px;color:var(--brand)}
.client-detail-actions{justify-content:space-between;margin-top:18px}

/* Quote builder and viewer */
.quote-view{display:flex;flex-direction:column;gap:14px}.quote-view-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.quote-view-meta>div{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:11px;display:flex;flex-direction:column;gap:3px}.quote-view-meta span{font-size:8px;color:var(--muted)}.quote-view-meta strong{font-size:10px}
.quote-lines{border:1px solid var(--line);border-radius:13px;overflow:hidden}.quote-lines>div,.quote-totals>div{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:9.5px}.quote-lines>div:last-child{border-bottom:0}.quote-totals{margin-left:auto;width:min(340px,100%)}.quote-totals .total{font-size:12px;border-top:1px solid var(--line);border-bottom:0}.quote-note{padding:12px;background:var(--surface-2);border-radius:12px}.quote-note span{font-size:8px;color:var(--muted);font-weight:800}.quote-note p{margin:6px 0 0;font-size:9.5px;color:var(--muted);line-height:1.55}.quote-actions{justify-content:space-between}
.quote-form{display:flex;flex-direction:column;gap:15px}.quote-builder{border:1px solid var(--line);border-radius:14px;padding:10px}.quote-builder-head,.quote-item-row{display:grid;grid-template-columns:minmax(160px,1fr) 70px 110px 100px 34px;gap:7px;align-items:center}.quote-builder-head{padding:2px 5px 8px;color:var(--muted);font-size:8px;font-weight:800}.quote-item-row{padding:7px 4px;border-top:1px solid var(--line)}.quote-item-row input{min-width:0;border:1px solid var(--line);border-radius:9px;padding:8px;background:var(--surface-2);color:var(--text)}.quote-item-row strong{font-size:9px;text-align:right}.quote-add-line{margin-top:9px}.quote-options{margin-top:0}.quote-live-total{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;border-radius:13px;background:var(--brand-soft);color:var(--text)}.quote-live-total span{font-size:10px;font-weight:700}.quote-live-total strong{font-size:18px;color:var(--brand)}
.inline-ref{border:0;background:transparent;color:var(--brand);font-size:inherit;padding:0;text-decoration:underline;text-underline-offset:2px}
.priority-pill.low{background:var(--mint-soft);color:var(--mint)}

/* Team */
.member-status{font-size:8px;padding:5px 8px;border-radius:99px;background:var(--mint-soft);color:var(--mint);font-weight:800}.member-status.pending{background:var(--amber-soft);color:var(--amber)}

/* Settings */
.settings-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start}.settings-nav{position:sticky;top:104px;display:flex;flex-direction:column;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px}.settings-nav button{border:0;background:transparent;color:var(--muted);padding:11px 12px;border-radius:10px;text-align:left;font-weight:700;font-size:10.5px}.settings-nav button.active{background:var(--brand-soft);color:var(--brand)}
.settings-content{min-width:0}.settings-panel{display:none;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;box-shadow:var(--shadow)}.settings-panel.active{display:block;animation:fadeUp 300ms var(--ease-out-expo)}.settings-head{padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:16px}.settings-head h3{margin:0 0 4px;font-size:15px}.settings-head p{margin:0;color:var(--muted);font-size:9.5px}
.settings-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.settings-form>label{display:flex;flex-direction:column;gap:6px;font-size:9px;font-weight:700;color:var(--muted)}.settings-form input,.settings-form select,.setting-row select{border:1px solid var(--line);border-radius:11px;padding:10px 11px;background:var(--surface-2);color:var(--text)}.settings-actions{grid-column:1/-1;display:flex;justify-content:flex-end;margin-top:5px}
.settings-avatar-row{grid-column:1/-1;display:flex;align-items:center;gap:11px;padding-bottom:4px}.settings-avatar{width:44px;height:44px;border-radius:14px;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800}.settings-avatar-row>div:last-child{display:flex;flex-direction:column;gap:2px}.settings-avatar-row strong{font-size:11px}.settings-avatar-row span{font-size:8.5px;color:var(--muted)}
.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid var(--line)}.setting-row:last-child{border-bottom:0}.setting-row>div:first-child{display:flex;flex-direction:column;gap:3px}.setting-row strong{font-size:10.5px}.setting-row span{font-size:8.5px;color:var(--muted)}
.segmented{display:flex;padding:3px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px}.segmented button{border:0;background:transparent;color:var(--muted);border-radius:8px;padding:7px 10px;font-size:9px;font-weight:700}.segmented button.active{background:var(--surface);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.switch input{display:none}.switch span{display:block;width:38px;height:22px;border-radius:99px;background:#d9dde6;position:relative;transition:.2s ease}.switch span::after{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.25s var(--ease-out-expo);box-shadow:0 2px 5px rgba(0,0,0,.14)}.switch input:checked+span{background:var(--brand)}.switch input:checked+span::after{transform:translateX(16px)}
.workspace-settings-identity{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px}.workspace-logo-upload{display:flex!important;flex-direction:row!important;align-items:center;gap:10px!important;cursor:pointer}.workspace-logo-preview{width:46px;height:46px;border-radius:14px;background:linear-gradient(145deg,var(--workspace-accent),var(--workspace-accent-2));color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;overflow:hidden}.workspace-logo-preview img,.workspace-avatar.has-logo img{width:100%;height:100%;object-fit:cover}.workspace-logo-upload>span:last-of-type{display:flex;flex-direction:column;gap:2px}.workspace-logo-upload strong{font-size:10px;color:var(--text)}.workspace-logo-upload small{font-size:8px;color:var(--muted)}
.danger-zone{display:flex;align-items:center;justify-content:space-between;gap:14px;border-top:1px solid var(--line);margin-top:22px;padding-top:18px}.danger-zone>div{display:flex;flex-direction:column;gap:3px}.danger-zone strong{font-size:10.5px;color:var(--danger)}.danger-zone span{font-size:8.5px;color:var(--muted)}
.billing-current{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px;background:linear-gradient(135deg,var(--brand-soft),transparent);border:1px solid color-mix(in srgb,var(--brand) 16%,var(--line));border-radius:15px}.billing-current h3{margin:7px 0 3px}.billing-current p{margin:0;color:var(--muted);font-size:9px}

/* dark settings */
html[data-theme="dark"] .settings-nav,html[data-theme="dark"] .settings-panel{background:#20242e;border-color:#303642}.settings-panel input:focus,.settings-panel select:focus{border-color:#5d56a7;outline:none;box-shadow:0 0 0 3px rgba(128,114,255,.10)}
html[data-theme="dark"] .client-detail-tabs button.active,html[data-theme="dark"] .segmented button.active{background:#2a303b}.client-tab-panel .empty-state{min-height:220px}

/* Responsive final pass */
@media(max-width:980px){
  .settings-layout{grid-template-columns:1fr}.settings-nav{position:static;flex-direction:row;overflow-x:auto}.settings-nav button{white-space:nowrap}
  .quote-builder-head{display:none}.quote-item-row{grid-template-columns:1fr 70px 100px 34px}.quote-item-row>[data-item-total]{grid-column:1/4;text-align:right}.quote-item-row input[name=itemLabel]{grid-column:1/-1}
}
@media(max-width:780px){
  .chart-wrap{aspect-ratio:1.7/1;min-height:230px}
  .client-info-grid,.settings-form,.quote-view-meta{grid-template-columns:1fr}.client-info-grid .wide,.settings-avatar-row,.workspace-settings-identity,.settings-actions{grid-column:auto}
  .client-detail-tabs{overflow-x:auto}.client-detail-tabs button{white-space:nowrap}
  .client-detail-actions,.quote-actions,.danger-zone,.billing-current{align-items:stretch;flex-direction:column}.client-detail-actions>.row-actions,.quote-actions>.row-actions{width:100%;flex-wrap:wrap}.client-detail-actions button,.quote-actions button{flex:1}
  .setting-row{align-items:flex-start;flex-direction:column}.segmented{width:100%}.segmented button{flex:1}
}
@media(max-width:520px){
  .quote-item-row{grid-template-columns:1fr 1fr 34px}.quote-item-row input[name=itemLabel]{grid-column:1/-1}.quote-item-row input[name=itemPrice]{grid-column:2}.quote-item-row>[data-item-total]{grid-column:1/3}
}