:root {
  --brand-primary: #6b02a8;
  --brand-primary-hover: #580087;
  --brand-primary-soft: #f4eafa;
  --brand-primary-subtle: #faf6fc;
  --brand-accent: #eaa01c;
  --brand-accent-hover: #cd8610;
  --brand-accent-soft: #fff5df;
  --brand-lilac: #ca98ed;
  --background-app: #f7f7f9;
  --background-surface: #fff;
  --background-muted: #f1f1f4;
  --text-primary: #211f26;
  --text-secondary: #57525d;
  --text-muted: #77717f;
  --border-default: #dedbe2;
  --border-subtle: #ece9ef;
  --success: #247a52;
  --success-soft: #e9f6ef;
  --warning: #99610d;
  --warning-soft: #fff4dc;
  --danger: #b43a46;
  --danger-soft: #fcebed;
  --info: #3267a8;
  --info-soft: #eaf2fb;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(31,24,36,.05);
  --shadow-md: 0 10px 30px rgba(47,34,56,.08);
  --transition-fast: 160ms ease;
  --brand: var(--brand-primary);
  --accent: var(--brand-accent);
  --brand-dark: var(--brand-primary-hover);
  --brand-soft: var(--brand-primary-soft);
  --ink: var(--text-primary);
  --text: var(--text-secondary);
  --muted: var(--text-muted);
  --line: var(--border-default);
  --panel: var(--background-surface);
  --canvas: var(--background-app);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-md);
}

html, body { background: var(--background-app); color: var(--text-secondary); }
body { letter-spacing: -.005em; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand-primary), transparent 68%); outline-offset: 2px; }
.ui-icon { display: block; width: 17px; height: 17px; flex: 0 0 auto; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.staging-banner { position: sticky; top: 0; width: 100%; background: #321244; box-shadow: 0 1px 0 rgba(255,255,255,.12); }
.staging-banner strong { color: #fff; }
.staging-banner span { color: #e8d8f1; }
.staging-banner + .app-shell .topbar { top: 0; }
.app-shell { padding-left: 244px; }
.sidebar { width: 244px; background: #fff; border-color: var(--border-subtle); box-shadow: 1px 0 0 rgba(35,25,40,.02); }
.sidebar-brand { height: 62px; padding: 0 13px; border-color: var(--border-subtle); }
.sidebar-toggle, .mobile-menu, .logout-button { color: #68616f; transition: color var(--transition-fast), background var(--transition-fast); }
.sidebar-toggle:hover, .mobile-menu:hover, .logout-button:hover { color: var(--brand-primary); background: var(--brand-primary-soft); }
.brand-lockup { gap: 10px; }
.brand-lockup img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; transform: scale(1.3); }
.brand-lockup strong { max-width: 154px; overflow: hidden; color: var(--text-primary); font-size: 13px; line-height: 1.15; text-overflow: ellipsis; }
.org-card { margin: 10px 10px 3px; padding: 9px 10px; background: var(--brand-primary-subtle); border: 1px solid #eee3f3; }
.org-card .ui-icon { color: var(--brand-primary); }
.org-card strong { color: var(--text-primary); }
.org-card small { color: var(--text-muted); }
.nav-label { color: #928b97; }
.primary-nav a, .tree-all, .project-link, .add-structure { position: relative; color: #5f5965; transition: color var(--transition-fast), background var(--transition-fast); }
.primary-nav a i { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; transition: color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); }
.primary-nav a i .ui-icon { width: 18px; height: 18px; }
.primary-nav a:hover i { transform: translateY(-1px); }
.primary-nav a.active i { color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 10%, transparent); }
.primary-nav a:hover, .primary-nav a.active, .tree-all:hover, .project-link:hover { color: var(--brand-primary); background: var(--brand-primary-soft); }
.primary-nav a.active { font-weight: 750; }
.primary-nav a.active::before { position: absolute; content: ""; left: -8px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand-accent); }
.sidebar-footer { border-color: var(--border-subtle); }
.logout-button { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; }
.add-structure { display: flex; align-items: center; gap: 9px; }
.add-structure .ui-icon { width: 15px; height: 15px; }
.avatar { background: var(--brand-primary-soft); color: var(--brand-primary); }
.app-shell.sidebar-collapsed { padding-left: 68px; }
.app-shell.sidebar-collapsed .sidebar { width: 68px; }
.app-shell.sidebar-collapsed .sidebar-brand {
  justify-content: center;
  padding-inline: 0;
}
.app-shell.sidebar-collapsed .brand-lockup { display: none; }
.app-shell.sidebar-collapsed .sidebar-toggle {
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border-default);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.app-shell.sidebar-collapsed .sidebar-toggle:hover {
  border-color: var(--brand-primary);
  background: var(--brand-primary-soft);
}
.app-shell.sidebar-collapsed .org-card {
  margin-inline: 8px;
  padding-inline: 6px;
}
.main { background: var(--background-app); }
.topbar { height: 56px; padding: 0 24px; background: rgba(255,255,255,.94); border-color: var(--border-subtle); backdrop-filter: blur(10px); }
.breadcrumbs { color: var(--text-muted); }
.breadcrumbs a { display: grid; place-items: center; color: var(--brand-primary); }
.breadcrumbs strong { color: var(--text-primary); font-size: 12px; }
.content { max-width: 1600px; padding: 28px 30px 88px; }
h1 { color: var(--text-primary); font-size: 24px; letter-spacing: -.025em; }
h2, h3 { color: var(--text-primary); }
.ops-heading h1 { color: var(--text-primary); }
.ops-heading > div > p:last-child { color: var(--text-muted); }
.eyebrow { color: var(--brand-primary) !important; }
input, select, textarea { border-color: var(--border-default); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
input:hover, select:hover, textarea:hover { border-color: #c8c2cd; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-lilac), transparent 72%); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-color: var(--brand-primary); border-radius: var(--radius-md); background: var(--brand-primary); color: #fff; font-weight: 750; box-shadow: var(--shadow-sm); transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }
.button:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); filter: none; }
.button.secondary { border-color: var(--border-default); background: #fff; color: var(--brand-primary); }
.button.secondary:hover { background: var(--brand-primary-soft); }
.panel, .stat-card { border-color: var(--border-subtle); box-shadow: var(--shadow-sm); }
.panel { border-radius: var(--radius-lg); }
.panel-title { border-color: var(--border-subtle); }
.stat-card { position: relative; min-height: 108px; overflow: hidden; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.stat-card::before { position: absolute; content: ""; inset: 0 auto 0 0; width: 3px; background: var(--brand-primary); }
.stat-card:hover { border-color: #d8c9e0; box-shadow: 0 8px 24px rgba(62,36,75,.08); transform: translateY(-1px); }
.stat-card strong { color: var(--text-primary); }
.stat-icon { background: var(--brand-primary-soft); color: var(--brand-primary); }
.stat-icon.red { background: var(--danger-soft); color: var(--danger); }
.stat-icon.blue { background: var(--info-soft); color: var(--info); }
.stat-icon.mint { background: var(--success-soft); color: var(--success); }
.status-pill.in_progress { background: var(--info-soft); color: var(--info); }
.status-pill.review { background: var(--brand-primary-soft); color: var(--brand-primary); }
.status-pill.blocked, .priority-label.urgent { background: var(--danger-soft); color: var(--danger); }
.status-pill.done { background: var(--success-soft); color: var(--success); }
.priority-label.high { background: var(--warning-soft); color: var(--warning); }
.task-table-head, .users-head { position: sticky; top: 56px; z-index: 4; background: #f5f3f7; color: #716a77; letter-spacing: .06em; }
.task-row:hover, .client-summary-row:hover, .compact-task:hover { background: var(--brand-primary-subtle); }
.alert.success { border-color: #b7ddc8; background: var(--success-soft); color: var(--success); }
.alert.error { border-color: #e8bbc0; background: var(--danger-soft); color: var(--danger); }
.toast { background: #2d1539 !important; }
.auth-page { position: relative; grid-template-columns: minmax(320px,.8fr) minmax(520px,1.2fr); grid-template-rows: 1fr auto; padding: 0; border: 0; overflow: hidden; background: #fff; font-family: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.auth-brand { display: flex; align-items: flex-end; padding: 48px; background: #321244; color: #fff; }
.auth-brand::before { position: absolute; content: ""; width: 420px; height: 420px; left: -155px; top: -170px; border: 72px solid rgba(202,152,237,.13); border-radius: 46% 54% 52% 48%; transform: rotate(18deg); }
.auth-brand a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.auth-brand strong { max-width: 360px; color: #fff; font-size: clamp(30px,4vw,54px); line-height: 1; letter-spacing: -.045em; }
.auth-brand strong::after { display: block; content: "Trabalho claro, decisões seguras."; max-width: 320px; margin-top: 20px; color: #dac7e4; font-size: 15px; font-weight: 450; line-height: 1.55; letter-spacing: 0; }
.auth-logo { width: 68px; height: 68px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.16); }
.auth-logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.28); }
.auth-content { display: grid; place-items: center; min-height: 100vh; padding: 72px clamp(34px,7vw,112px); background: #fff; }
.auth-form { width: min(100%,430px); padding: 0; box-shadow: none; }
.auth-form > header { margin-bottom: 34px; }
.auth-form h1 { margin-bottom: 9px; color: var(--text-primary); font-size: 34px; letter-spacing: -.035em; }
.auth-form > header p { color: var(--text-muted); font-size: 15px; }
.auth-field { color: var(--text-secondary); font-size: 12px; font-weight: 700; }
.auth-field input { min-height: 52px; border-color: var(--border-default); background: #fbfafc; font-size: 14px; }
.auth-field input:focus { background: #fff; }
.auth-remember { color: var(--text-muted); }
.auth-remember input { accent-color: var(--brand-primary); }
.auth-submit { min-height: 52px; border-radius: var(--radius-md); background: var(--brand-primary); box-shadow: 0 8px 20px rgba(107,2,168,.18); }
.auth-submit:hover { background: var(--brand-primary-hover); }
.auth-help { padding-top: 24px; border-top: 1px solid var(--border-subtle); }
.auth-footer { position: absolute; right: 40px; bottom: 24px; color: var(--text-muted); }
@media (max-width:760px) {
  .staging-banner { align-items: flex-start; gap: 2px; flex-direction: column; min-height: 46px; }
  .staging-banner + .app-shell .sidebar, .staging-banner + .app-shell .sidebar-overlay { top: 46px; }
  .staging-banner + .app-shell .topbar { top: 0; }
  .app-shell, .app-shell.sidebar-collapsed { padding-left: 0; }
  .content { padding: 20px 14px 84px; }
  .topbar { padding: 0 13px; }
  .topbar-cta { width: 40px; min-width: 40px; padding: 0; }
  .topbar-cta span { display: none; }
  .topbar-cta::after { content: none; }
  .task-table-head { position: static; }
  .auth-page { display: block; min-height: 100vh; background: #fff; }
  .auth-brand { min-height: 190px; align-items: flex-end; padding: 28px 24px; }
  .auth-brand a { gap: 10px; }
  .auth-brand strong { font-size: 28px; }
  .auth-brand strong::after { margin-top: 10px; font-size: 12px; }
  .auth-logo { width: 46px; height: 46px; border-radius: 11px; }
  .auth-content { min-height: auto; place-items: start stretch; padding: 44px 24px 84px; }
  .auth-form { margin: 0 auto; }
  .auth-form h1 { font-size: 29px; }
  .auth-footer { right: 24px; bottom: 18px; }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }