:root{
  --bg: #0c0f14;
  --panel: #121927d9;
  --panel-solid: #121927;
  --line: rgba(255,255,255,.10);
  --line-2: rgba(255,255,255,.06);
  --fg: #e9eef7;
  --muted: #9aa3b2;
  --accent: #3e3e3f;
  --accent-2: #686969;
  --danger: #ff6b6b;
  --shadow: 0 10px 35px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.25);
  --radius: 18px;
  --radius-lg: 22px;
  --sidebar-w: 280px;
  --topbar-h: 68px;
    --accent: #6aa1ff;
  --accent-2: #355cff;
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--fg);
  background:
    radial-gradient(1200px 800px at 85% -10%, #1e2433 0%, transparent 60%),
    radial-gradient(900px 600px at -10% 40%, #151b28 0%, transparent 60%),
    var(--bg);
  font: 500 16px/1.6 "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
}
.icon{width:20px;height:20px;stroke:#fff;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* ====== App layout ====== */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100dvh}

/* ====== Sidebar ====== */
.sidebar{
  position:sticky;top:0;height:100dvh;padding:16px 14px 14px;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(19,24,35,.9), rgba(19,24,35,.65));
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:14px
}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;color:var(--fg);text-decoration:none}
.brand:hover{background:rgba(255,255,255,.04)}
.brand-logo{width:26px;height:26px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.brand-name{font:900 18px/1 "Montserrat"}

.nav{margin-top:6px;display:grid;gap:6px}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 12px;border-radius:12px;border:1px solid var(--line-2);
  background:rgba(255,255,255,.03);color:var(--fg);cursor:pointer;text-align:left
}
.nav-item:hover{background:rgba(255,255,255,.07)}
.nav-item.is-active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,157,255,.18) inset}

.user{margin-top:auto;display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line-2);border-radius:12px;background:rgba(255,255,255,.03)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg, var(--accent), var(--accent-2));color:#09101b;font-weight:900}
.avatar.xl{width:64px;height:64px;font-size:24px}
.user-info{min-width:0}
.user-name{font-weight:800}
.user-email{font-size:.85rem;color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

.btn-logout{
  margin-top:8px;display:flex;align-items:center;gap:10px;justify-content:center;
  height:40px;border-radius:12px;border:1px solid var(--line-2);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(20,25,35,.92));
  color:var(--fg);cursor:pointer
}
.btn-logout:hover{background:rgba(255,255,255,.12)}

/* ====== Main ====== */
.main{min-width:0}

/* Topbar */
.topbar{
  height:var(--topbar-h);
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(19,24,35,.88), rgba(19,24,35,.58));
}
.page-title{margin:0;font:900 22px/1.2 "Montserrat"}
.actions{display:flex;align-items:center;gap:10px}
.search{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;border:1px solid var(--line-2);background:rgba(255,255,255,.06)}
.search input{background:transparent;border:0;outline:0;color:var(--fg);min-width:260px}

/* Botões básicos */
.btn{
  height:40px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);
  background:linear-gradient(180deg, #ffffff, #e9eef7);color:#0e1220;font-weight:800;cursor:pointer;box-shadow:0 6px 14px rgba(0,0,0,.25)
}
.btn.ghost{background:rgba(255,255,255,.07);color:var(--fg)}
.btn.danger{background:linear-gradient(180deg, #ff8a8a, #ff6b6b);color:#2b0b0b;border-color:#ff8a8a}

/* ===== Content ===== */
/* Alinha perto da sidebar (sem aquele recuo gigante) */
.content{
  padding:24px;
  margin:0;               /* <— tira o center auto */
  max-width:none;         /* <— usa toda a largura disponível */
}

/* Grid e cards */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); /* cards maiores e fluido */
  gap:24px;
  align-items:stretch;
}

/* ====== Card base ====== */
.card{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(20,25,35,.92));
  box-shadow:var(--shadow);
  padding:18px 18px 16px;
  display:flex;flex-direction:column;gap:14px;min-height:220px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;
}
.card:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  border-color: rgba(139,157,255,.35);
}
.card .title{font:900 18px/1.25 "Montserrat"}

/* ====== Arte animada do card ====== */
.thumb{
  position:relative;
  flex:1;
  border-radius:16px;
  border:1px solid var(--line-2);
  background:
    radial-gradient(1000px 480px at -10% 20%, #1a2233 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.thumb::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(220px 120px at 85% -20%, rgba(139,157,255,.25), transparent 70%);
  pointer-events:none;
}

/* barras animadas (placeholder) */
.bars{
  position:absolute; inset:16px 16px 12px 16px;
  display:flex; gap:8px; align-items:flex-end;
}
.bars span{
  flex:1; border-radius:8px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  filter: drop-shadow(0 2px 10px rgba(139,157,255,.25));
  transform-origin: bottom;
  animation: updown 1.5s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 120ms);
  opacity:.95;
}
@keyframes updown{
  from{ transform: scaleY(.45) }
  to  { transform: scaleY(1) }
}

/* Footer texto/ações dentro do card (se usar no futuro) */
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* filtros/chips */
.filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.chip{
  height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.06);color:var(--fg);cursor:pointer
}
.chip.is-active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,157,255,.18) inset}

/* Empty state */
.empty{display:grid;place-items:center;text-align:center;padding:32px;border:1px dashed var(--line-2);border-radius:16px;color:var(--muted)}
.empty h3{margin:6px 0 4px;font:900 20px/1.1 "Montserrat";color:var(--fg)}
.empty p{margin:0}
.empty-icon{font-size:34px;margin-bottom:8px}

/* Account */
.account{display:flex;align-items:center;gap:14px}
.account-info{display:grid;gap:6px}
.account .row{display:flex;gap:10px}
.account .k{color:var(--muted);min-width:140px}
.account .v{font-weight:800}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* Footer */
.foot{text-align:center;color:var(--muted);padding:20px 10px}

/* Responsive */
@media (max-width: 1180px){
  .grid{grid-template-columns:repeat(2, minmax(280px, 1fr))}
}
@media (max-width: 900px){
  :root{ --sidebar-w: 84px }
  .brand-name{display:none}
  .nav-item span{display:none}
  .user-info{display:none}
  .grid{grid-template-columns:1fr}
  .search input{min-width:160px}
}

/* === Polimento === */
a{ text-decoration:none; color:inherit }
.btn, .btn:hover, .btn:focus{ text-decoration:none }
.hero-actions .btn{ text-decoration:none }
#empty[hidden] { display: none !important; }
.grid .card { cursor: pointer; }













/* ===== Prettier área de dashboards (apenas dentro de .content) + footer certo ===== */

/* faz o main virar coluna para o footer ir pro fim */
.main{
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--topbar-h));
}

/* a área das dashboards ocupa o espaço e recebe o grid decorativo */
.content{
  position: relative;
  flex: 1 0 auto;       /* mantém a ordem dos cards e empurra o footer */
  overflow: hidden;
  padding: 28px;
  z-index: 0;           /* grid fica por baixo dos cards */
}

/* Grid sutil (somente atrás das dashboards) */
.content::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(1px 1px at 20px 20px, rgba(255,255,255,.06) 1px, transparent 1.2px),
    radial-gradient(1px 1px at 60px 60px, rgba(255,255,255,.04) 1px, transparent 1.2px),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,.03) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(255,255,255,.03) 23px 24px);
}

/* Glows discretos apenas na área das dashboards */
.content::after{
  content:"";
  position:absolute; inset:-6% -4%;
  pointer-events:none;
  background:
    radial-gradient(520px 260px at 85% -5%, rgba(139,157,255,.16), transparent 60%),
    radial-gradient(460px 280px at -8% 25%, rgba(72,94,255,.14), transparent 60%),
    radial-gradient(380px 220px at 40% 110%, rgba(255,255,255,.05), transparent 70%);
  filter: blur(1.5px);
  mix-blend-mode: screen;
  z-index: 0;
}

/* Grid de cards um pouco mais cheio + perspectiva para 3D */
.grid{
  position: relative;
  z-index: 1; /* acima do grid decorativo */
  gap: 28px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  perspective: 1200px;               /* << 3D de verdade */
  perspective-origin: 50% 35%;
}

/* ===== Cards com 3D, mais opacos e brilho sutil ===== */
.card{
  isolation:isolate;
  border-radius: 24px;
  /* mais opaco + leve vinheta interna para profundidade */
  background:
    radial-gradient(140% 120% at 18% 8%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(18,24,36,.90) 0%, rgba(12,16,24,.98) 100%);
  border: 1px solid rgba(255,255,255,.10);

  /* sombra em camadas simulando elevação */
  box-shadow:
    0 26px 60px rgba(0,0,0,.55),
    0 12px 28px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06),    /* highlight superior (chanfro) */
    inset 0 -1px 0 rgba(0,0,0,.42);         /* sombra inferior (chanfro) */

  /* 3D real com perspectiva própria */
  transform: translateZ(0) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  transition:
    transform .35s cubic-bezier(.2,.7,.2,1),
    box-shadow .35s cubic-bezier(.2,.7,.2,1),
    border-color .3s ease;
}

/* borda/aro com leve brilho e “anel” interno */
.card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 30px rgba(255,255,255,.03);
  z-index:-1;
}

/* brilho diagonal MUITO sutil (specular) */
.card::after{
  content:"";
  position:absolute; inset:-32% -48%;
  background:
    linear-gradient(115deg, transparent 0 49%, rgba(255,255,255,.045) 50%, transparent 51% 100%);
  transform: translateX(-42%);
  animation: shine 14s linear infinite;
  opacity:.35;                 /* sutil mesmo */
  pointer-events:none;
}

/* efeito 3D no hover: levanta + pequena rotação */
.card:hover{
  transform: translateY(-8px) rotateX(1.2deg) rotateY(-1.2deg);
  box-shadow:
    0 40px 110px rgba(0,0,0,.62),
    0 18px 36px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.42);
  border-color: rgba(139,157,255,.28);
}

@keyframes shine{
  0%   { transform: translateX(-42%) rotate(0.001deg); }
  100% { transform: translateX(42%)  rotate(0.001deg); }
}

/* Barras do thumb um pouco mais vivas */
.bars span{
  animation-duration: 1.8s;
  opacity:.98;
}

/* Footer no fim e discreto */
.foot{
  margin-top: auto;      /* garante o rodapé embaixo */
  text-align:center;
  color: var(--muted);
  padding: 20px 10px;
  background: transparent;
  z-index: 1;
}

/* Estilo do ano; se quiser ocultar totalmente, troque por display:none */
#year{
  opacity:.7;
  font-weight:700;
  letter-spacing:.04em;
}

/* Estado vazio mais elegante (se precisar) */
.empty{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  backdrop-filter: blur(4px) saturate(120%);
  border-style: solid;
}


/* === +12% de tamanho nos blocos (largura e altura) === */

/* largura mínima dos cards: 340px -> +12% */
.grid{
  grid-template-columns: repeat(auto-fill, minmax(382px, 1fr));
}

/* altura do card: 220px -> +12% */
.card{
  min-height: calc(220px * 1.12);   /* 246.4px */
  padding: 22px 22px 20px;          /* +~12% de respiro vertical */
}

/* altura visual interna (gráfico/thumb) também +12% */
.card .thumb{
  min-height: calc(180px * 1.12);   /* ajuste a 180px se quiser outra base */
}


/* ================== Dashboards: ajustes MOBILE ONLY ================== */

/* Tablets pequenos e celulares grandes */
@media (max-width: 820px){
  :root{
    --topbar-h: 60px;
    --sidebar-w: 76px;      /* compacto, mantém ícones */
    --radius: 18px;
  }

  .topbar{ padding: 10px 14px; gap: 10px; }
  .page-title{ font-size: 18px; }
  .actions{ gap: 8px; flex-wrap: wrap; }
  .search input{ min-width: 120px; }

  .content{
    padding: 14px;
  }

  .grid{
    grid-template-columns: 1fr;    /* 1 coluna */
    gap: 14px;
  }

  /* cards mais compactos mas com boa área de toque */
  .card{
    min-height: 236px;             /* confortável no polegar */
    padding: 14px;
    box-shadow: 0 16px 40px rgba(0,0,0,.44), 0 8px 20px rgba(0,0,0,.32);
  }
  .card::after{ opacity:.20; animation-duration: 16s; } /* brilho mais sutil */
  .thumb{ min-height: 150px; }

  /* grid de fundo menos forte para não “sujar” */
  .content::before{ opacity:.35; }
}

/* Celulares médios */
@media (max-width: 640px){
  .topbar{ padding: 8px 12px; }
  .search{ width: 100%; }
  .search input{ min-width: 0; width: 100%; }

  .content{ padding: 12px; }
  .card{ border-radius: 16px; }

  /* barras/arte internas mais leves */
  .bars{ gap: 6px; }
  .bars span{ min-width: 4px; animation-duration: 1.9s; }
}

/* Celulares pequenos / telas estreitas */
@media (max-width: 400px){
  :root{ --sidebar-w: 68px; }
  .page-title{ font-size: 16px; }
  .card{ min-height: 220px; padding: 12px; }
  .thumb{ min-height: 136px; }
}

/* Safe-area (iPhones com notch) */
@supports (padding: max(0px)){
  @media (max-width: 820px){
    .content{
      padding-left:  max(12px, env(safe-area-inset-left));
      padding-right: max(12px, env(safe-area-inset-right));
      padding-bottom:max(12px, env(safe-area-inset-bottom));
    }
    .topbar{
      padding-left:  max(10px, env(safe-area-inset-left));
      padding-right: max(10px, env(safe-area-inset-right));
    }
  }
}