:root{
  /* Padrão claro (alinhado às cores do Stitch) */
  --bg:#f8f9fb;
  --card:#ffffff;
  --muted:#617589;
  --text:#111418;
  --brand:#0a7cff;
  --brand2:#19c37d;
  --border:#dbe0e6;
  --foreground:#0f172a;
  --muted-foreground:#64748b;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1220;
    --card:#111a2e;
    --muted:#a8b3cf;
    --text:#eef2ff;
    --border:rgba(255,255,255,.12);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  background: var(--bg);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:24px}

/* App shell */
.app-shell{min-height:100vh; display:flex; flex-direction:column}
.auth-content{min-height:100vh; width:100%}
.app-header{
  position:fixed; top:0; left:280px; right:0; z-index:40;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 20px;
  background: color-mix(in srgb, var(--header-bg, #ffffff) 92%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom:1px solid color-mix(in srgb, var(--border) 30%, transparent);
  box-shadow: 0 2px 12px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);
}
.app-header__left{
  flex: 1;
}
.app-header__iconbtn{
  width:64px; height:64px;
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:0; color:var(--header-icon, var(--text));
  cursor:pointer;
  transition: all 0.2s ease;
}
.app-header__iconbtn:hover{
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--brand);
}
.app-header__iconbtn:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}
.app-header__logo{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  min-width:0;
  padding:0;
  border-radius:0;
  transition: all 0.2s ease;
}
.app-header__logoimg{
  width:auto;
  height:36px;
  max-width:180px;
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:none;
}
.app-header__logotext{
  font-weight:800; 
  font-size: 1.125rem;
  letter-spacing:.3px; 
  white-space:nowrap; 
  overflow:hidden; 
  text-overflow:ellipsis;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.app-body{flex:1; display:flex; min-height:0; padding-top:64px}

.app-sidebar{
  width:280px;
  background: var(--sidebar-bg, var(--bg));
  border-right:1px solid color-mix(in srgb, var(--border) 40%, transparent);
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow: 2px 0 12px rgba(0,0,0,.05);
  z-index:50;
}

/* Logo/Brand na sidebar */
.app-sidebar__brand{
  padding:12px 16px;
  border-bottom:1px solid color-mix(in srgb, var(--border) 40%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 5%, transparent) 0%,
    transparent 100%
  );
  display:flex;
  justify-content:center;
  align-items:center;
}
.app-sidebar__brand-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:auto;
  height:auto;
  padding:0;
  border-radius:0;
  background:transparent;
  transition:all .2s ease;
}
.app-sidebar__brand-img{
  width:auto;
  height:36px;
  max-width:180px;
  object-fit:contain;
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  flex-shrink:0;
}

/* Footer com perfil do usuário */
.app-sidebar__footer{
  margin-top:auto;
  padding:16px;
  border-top:1px solid color-mix(in srgb, var(--border) 40%, transparent);
  background: linear-gradient(0deg, 
    color-mix(in srgb, var(--brand) 4%, transparent) 0%, 
    transparent 100%
  );
}

/* Perfil do usuário na sidebar */
.app-sidebar__profile{
  padding:20px 16px;
  border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent);
  margin-bottom:12px;
  background: linear-gradient(180deg, 
    color-mix(in srgb, var(--brand) 4%, transparent) 0%, 
    transparent 100%
  );
}
.app-sidebar__profile-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:12px;
  transition:all .2s ease;
  position:relative;
}
.app-sidebar__profile-link:hover{
  background: var(--sidebar-hover, color-mix(in srgb, var(--brand) 10%, transparent));
}
.app-sidebar__profile-avatar{
  position:relative;
  flex-shrink:0;
}
.app-sidebar__profile-initials{
  width:52px;
  height:52px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand2) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:700;
  color:#ffffff;
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.app-sidebar__profile-photo{
  width:52px;
  height:52px;
  border-radius:50%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:3px solid color-mix(in srgb, var(--brand) 20%, transparent);
}
.app-sidebar__profile-info{
  flex:1;
  min-width:0;
}
.app-sidebar__profile-name{
  font-size:15px;
  font-weight:700;
  color:var(--sidebar-text, var(--text));
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:3px;
}
.app-sidebar__profile-role{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
}
.app-sidebar__profile-icon{
  font-size:20px;
  color:var(--brand);
  opacity:0.6;
  transition:all .2s ease;
}
.app-sidebar__profile-link:hover .app-sidebar__profile-icon{
  opacity:1;
  transform:scale(1.1);
}

.app-nav{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  padding:12px 10px;
}
.app-nav__item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--sidebar-text, var(--text));
}
.app-nav__item:hover{background: var(--sidebar-hover, color-mix(in srgb, var(--border) 30%, transparent))}
.app-nav__icon{font-size:22px; color:var(--muted)}
.app-nav__label{font-weight:600; color:var(--sidebar-text, var(--text))}
.app-nav__spacer{flex:1}

/* Grupos com subitens (expandir/recolher) */
.app-nav__group{margin:0}
.app-nav__group > summary{list-style:none}
.app-nav__group > summary::-webkit-details-marker{display:none}
.app-nav__item--summary{cursor:pointer}
.app-nav__chevron{
  margin-left:auto;
  font-size:20px;
  color:var(--muted);
  transition:transform .15s ease;
}
.app-nav__group[open] .app-nav__chevron{transform:rotate(180deg)}
.app-nav__sub{display:flex; flex-direction:column; padding:2px 0 6px 44px}
.app-nav__subitem{
  display:flex; align-items:center;
  padding:8px 12px;
  border-radius:10px;
  color:var(--sidebar-text, var(--text));
  font-weight:600;
}
.app-nav__subitem:hover{background: var(--sidebar-hover, color-mix(in srgb, var(--border) 30%, transparent))}

.app-content{
  flex:1;
  min-width:0;
  margin-left:280px;
  padding:16px;
}

.app-overlay{
  display:none;
}

.app-header__mobile-toggle{
  display:none;
}

/* Mobile: sidebar retrátil por overlay */
@media (max-width:1023px){
  .app-header__mobile-toggle{
    display:flex;
  }
  .app-header{
    left:0;
    grid-template-columns:64px 1fr 64px;
    padding:0 12px;
  }
  .app-sidebar{
    transform:translateX(-100%);
    transition:transform .3s ease;
    z-index:100;
  }
  html[data-sidebar-open="1"] .app-sidebar{
    transform:translateX(0);
  }
  .app-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    z-index:90;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  html[data-sidebar-open="1"] .app-overlay{
    opacity:1;
    pointer-events:auto;
    display:block;
  }
  .app-content{
    margin-left:0;
  }
  .app-sidebar__brand{
    display:none;
  }
}

/* Desktop: sidebar sempre vis\u00edvel, sem collapse */
@media (min-width:1024px){
  .app-header__left{
    display:none;
  }  .app-header__logo{
    display:none;
  }}

/* Limpa estilos duplicados de mobile */
    position:fixed;
    top:56px;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,.35);
    z-index:55;
    display:none;
  }
  html[data-sidebar-open="1"] .app-overlay{display:block}
}
.btn{
  background: var(--brand);
  color:#ffffff;
  font-weight:700;
}
.btn--secondary{
  background: var(--brand2);
  color:#ffffff;
}
.btn--outline-secondary{
  background:transparent;
  border:1px solid var(--brand2);
  color:var(--brand2);
}
.btn--ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: none;
}
.grid{display:grid; gap:16px}
.grid--2{grid-template-columns: repeat(2, minmax(0, 1fr))}
.grid--3{grid-template-columns: repeat(3, minmax(0, 1fr))}
@media (max-width:900px){.grid--2,.grid--3{grid-template-columns:1fr}.tagline{display:none}}
.h1{font-size:2.2rem; margin:0 0 10px}
.p{color:var(--muted); margin:0 0 16px; line-height:1.55}
.kpi{font-size:1.8rem; font-weight:800}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted)}
.footer{border-top:1px solid var(--border); color:var(--muted); padding:18px 24px}
pre{white-space:pre-wrap}