/* ====== Reset & tokens ====== */
*{box-sizing:border-box}
html,body{height:100%}
:root{
  --bg:#0f172a;        /* slate-900 */
  --surface:#111827;   /* gray-900 */
  --surface-2:#1f2937; /* gray-800 */
  --text:#e5e7eb;      /* gray-200 */
  --muted:#9ca3af;     /* gray-400 */
  --primary:#2563eb;   /* blue-600 */
  --ring:rgba(37,99,235,.4);
}

/* ====== Base ====== */
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}
a{color:inherit; text-decoration:none}
img,video{max-width:100%; height:auto; display:block; border-radius:.75rem}
.wrap{max-width:1100px; margin:0 auto; padding:1rem}
.muted{color:var(--muted)}
.no-scroll{overflow:hidden}

/* ====== Buttons / Chips ====== */
.btn{
  display:inline-block;
  min-height:44px;
  padding:.8rem 1rem;
  border-radius:.9rem;
  background:var(--primary);
  color:white;
  border:1px solid transparent;
  text-align:center;
  transition:transform .04s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus{outline:none; box-shadow:0 0 0 4px var(--ring)}
.btn--outline{background:transparent; border-color:var(--surface-2)}
.btn--ghost{background:var(--surface-2); border-color:var(--surface-2)}

.chip{
  display:inline-block; border:1px solid var(--surface-2);
  padding:.45rem .7rem; border-radius:999px; font-size:.9rem;
}

/* ====== Header ====== */
.header{
  position:sticky; top:0; z-index:20;
  background:var(--surface);
  border-bottom:1px solid var(--surface-2);
}
.header__wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .6rem 1rem;
}
.brand{font-size:1.2rem; letter-spacing:.3px; margin:0}
.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:.75rem; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--surface-2); color:var(--text);
}
.nav-inline{
  display:none; gap:.5rem; flex-wrap:wrap; padding:0 1rem 1rem;
}
@media (min-width:900px){
  .nav-inline{display:flex}
}

/* ====== Sidebar ====== */
.sidebar{
  position:fixed; inset:0 30% 0 0; /* left:0, right:30% */
  max-width:300px;
  background:var(--surface);
  border-right:1px solid var(--surface-2);
  transform:translateX(-100%);
  transition:transform .25s ease;
  padding:1rem;
  z-index:30;
}
.sidebar.open{transform:translateX(0)}
.side-nav{display:flex; flex-direction:column; gap:.4rem}
.side-link{
  padding:.75rem 1rem; border-radius:.75rem; border:1px solid var(--surface-2);
}
.side-link:hover{border-color:var(--primary)}

/* mostra sidebar fixa no desktop */
@media (min-width:1100px){
  .sidebar{
    position:sticky; top:4rem; height:calc(100vh - 4rem);
    transform:none; max-width:260px; inset:auto; border-right:1px solid var(--surface-2);
  }
  .menu-toggle{display:none}
  .app{display:grid; grid-template-columns:260px 1fr}
}

/* ====== Main & Cards ====== */
.main{padding:1rem 0}
.hero{
  display:grid; gap:1rem; align-items:start;
  background:var(--surface); border:1px solid var(--surface-2); border-radius:1rem; padding:1rem;
}
.hero__actions{display:flex; gap:.6rem; flex-wrap:wrap}

.grid{
  display:grid; gap:1rem; grid-template-columns:1fr;
  margin-top:1rem;
}
@media (min-width:640px){
  .grid{grid-template-columns:1fr 1fr}
}
@media (min-width:1024px){
  .grid{grid-template-columns:1fr 1fr 1fr}
}
.card{
  background:var(--surface);
  border:1px solid var(--surface-2);
  border-radius:1rem;
  padding:1rem;
}
.card__actions{margin-top:.6rem}

/* ====== Responsive iframe ====== */
.iframe-box{
  position:relative; width:100%;
  aspect-ratio: 16 / 9; /* mantém proporção em qualquer tela */
  border-radius:.75rem; overflow:hidden; background:#000;
}
.iframe-box iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* ====== Footer ====== */
.footer{
  border-top:1px solid var(--surface-2);
  background:var(--surface);
}
.footer__wrap{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem;
}

/* ====== Typography scale ====== */
html{font-size:16px}
@media (min-width:640px){ html{font-size:17px} }
@media (min-width:1024px){ html{font-size:18px} }

/* ====== Utility ====== */
.wrap > .grid .card h3{margin-top:.2rem}

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      text-decoration: none; color: var(--text); font-weight: 600;
      border: 1px solid rgba(96,165,250,.35); background: #152136; padding: 10px 12px;
      border-radius: 12px; transition: .25s transform, .25s background, .25s box-shadow;
    }
    .btn:hover { transform: translateY(-2px); background: #1b2a46; box-shadow: 0 6px 16px rgba(59,130,246,.25); }