/* =========================================================================
   Tela inicial — a "tela 01" da reforma de UI do app (docs/reforma-ui.md).

   A ordem e as peças são as do ProjectsScreen.kt: marca com a busca entrando
   no lugar dela, CTA de criar em gradiente com os círculos decorativos,
   "continuar de onde parou", chips e a grade quadrada terminada pelo tile
   tracejado de "+".

   O que NÃO veio: a nav inferior (Projetos · Comunidade · [+] · Perfil). No
   app ela leva a comunidade e perfil, que no estúdio web não existem — uma
   barra com um destino só é enfeite, e enfeite que promete porta é pior que
   ausência. Volta quando o resto existir.

   Diferença de POSTURA, não de linguagem: o app é telefone e empilha em duas
   colunas; aqui a grade respira na largura do desktop com a mesma medida de
   cartão. A tela de desenho ao lado é grade fixa que nunca rola; esta é uma
   página.
   ========================================================================= */

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--txt2);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}

.home {
  max-width: 1000px;
  margin: 0 auto;
  padding: 22px 20px 80px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ----------------------------------------------------------------- topo -- */

.top { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.top__gap { flex: 1; }

.brand { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand img { width: 36px; height: 36px; border-radius: 8px; }
/* A fonte da marca é a do app (Oleo Script), e escreve só o nome. */
.brand span { font-family: 'Oleo Script', cursive; font-size: 24px; color: var(--txt); line-height: 1; }

.top__btn {
  width: 36px; height: 36px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: var(--raised); color: var(--txt3);
  cursor: pointer;
}
.top__btn svg { width: 16px; height: 16px; fill: currentColor; }
.top__btn:hover { background: #23232C; color: var(--txt); }
.top__btn[hidden] { display: none; }

.search { flex: 1; min-width: 0; }
.search[hidden] { display: none; }
.search input {
  width: 100%;
  background: var(--card); border: 1px solid var(--divider); border-radius: 12px;
  color: var(--txt); font-family: inherit; font-size: 13px;
  padding: 11px 14px;
}
.search input::placeholder { color: var(--txt4); }
.search input:focus { outline: none; border-color: var(--accent); }

/* ------------------------------------------------------------------ CTA -- */

.cta {
  position: relative; overflow: hidden;
  display: block; width: 100%; text-align: left;
  border: 0; border-radius: 18px; padding: 20px;
  background: var(--brand-gradient);
  color: var(--on-accent); font-family: inherit; cursor: pointer;
}
.cta b { display: block; font-size: 20px; font-weight: 800; }
.cta span {
  display: block; max-width: 42ch; margin-top: 4px;
  font-size: 13px; line-height: 1.45; color: rgba(255, 255, 255, .78);
}
.cta em {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  background: var(--canvas); color: var(--txt);
  border-radius: 12px; padding: 10px 14px;
  font-style: normal; font-size: 13px; font-weight: 700;
}
.cta__plus {
  width: 20px; height: 20px; display: grid; place-items: center;
  background: #fff; color: var(--accent); border-radius: 6px;
}
.cta__plus svg { width: 13px; height: 13px; fill: currentColor; }
/* Os dois círculos do design: um branco translúcido e um de Gelo. */
.cta__ball { position: absolute; border-radius: 50%; pointer-events: none; }
.cta__ball--white { width: 150px; height: 150px; right: 24px; top: -40px; background: rgba(255, 255, 255, .12); }
.cta__ball--ice { width: 90px; height: 90px; right: 60px; top: 90px; background: rgba(79, 195, 247, .35); }
.cta:hover { filter: brightness(1.06); }

/* -------------------------------------------------------------- seções -- */

.section { display: flex; flex-direction: column; gap: 10px; }
.section h2 {
  margin: 0; font-size: 15px; font-weight: 700; color: var(--txt);
  display: flex; align-items: center; gap: 8px;
}
.count { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--txt3); }

.chips { display: flex; gap: 8px; }
.chip {
  border-radius: 8px; padding: 7px 14px; cursor: pointer;
  border: 1px solid var(--divider); background: var(--card);
  color: var(--txt3); font-family: inherit; font-size: 11px; font-weight: 600;
}
.chip:hover { color: var(--txt2); }
.chip.is-on {
  background: var(--accent-chip); border-color: var(--accent-chip-border);
  color: var(--accent-soft); font-weight: 700;
}

/* ------------------------------------------------------------ continuar -- */

.resume {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 12px; cursor: pointer;
  border: 1px solid var(--divider); border-radius: 18px;
  background: var(--card); color: inherit; font-family: inherit;
}
.resume:hover { border-color: var(--border); }
.resume__thumb {
  width: 86px; height: 64px; flex: none; overflow: hidden;
  border-radius: 12px; background: var(--raised);
  display: grid; place-items: center;
}
.resume__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.resume__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.resume__text b { font-size: 14.5px; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resume__text small { font-size: 10px; color: var(--txt3); }
.resume__play {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand-gradient); color: var(--on-accent);
}
.resume__play svg { width: 14px; height: 14px; fill: currentColor; }

/* ---------------------------------------------------------------- grade -- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 14px; }

.card { position: relative; display: flex; flex-direction: column; gap: 6px; }

/* O cartão do app é QUADRADO e a capa preenche cortando (cover), com o
   selo de quadros por cima. A prova de que a capa é do projeto e não um
   enfeite é o formato: um 9:16 aparece recortado, como no telefone. */
.card__open {
  position: relative; display: block; width: 100%; aspect-ratio: 1; min-height: 0;
  padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--raised);
}
.card__open img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card:hover .card__open { border-color: var(--accent-chip-border); }
.card__blank { display: grid; place-items: center; height: 100%; color: var(--txt5); font-size: 11px; }
.card__frames {
  position: absolute; left: 8px; top: 8px;
  background: rgba(0, 0, 0, .6); color: var(--accent-soft);
  border-radius: 6px; padding: 3px 7px;
  font-size: 10px; font-weight: 700;
}
.card__name { font-size: 13px; font-weight: 700; color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__meta { font-size: 10px; color: var(--txt3); margin-top: -3px; }

.card__acts { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; }
.card:hover .card__acts, .card:focus-within .card__acts { opacity: 1; }
.card__acts button {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 6px;
  background: rgba(15, 15, 18, .86); color: var(--txt2);
  font-family: inherit; font-size: 12px; cursor: pointer;
}
.card__acts button svg { width: 14px; height: 14px; fill: currentColor; }
.card__acts button:hover { background: #23232C; color: var(--txt); }
.card__acts button.danger:hover { color: #FF6E96; border-color: #4A2030; background: #2A1620; }

.card__rename {
  width: 100%; background: var(--raised); border: 1px solid var(--accent);
  border-radius: 5px; color: var(--txt); font-family: inherit;
  font-size: 13px; font-weight: 700; padding: 2px 5px;
}

/* O tile tracejado que fecha a grade — o "+" do design. */
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  width: 100%; aspect-ratio: 1; cursor: pointer;
  border: 1.5px dashed #34343E; border-radius: 18px;
  background: transparent; color: var(--txt3); font-family: inherit;
  font-size: 11px; font-weight: 600;
}
.tile:hover { border-color: var(--accent-chip-border); color: var(--txt2); }
.tile i {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 8px; background: var(--raised); color: var(--accent-soft);
}
.tile i svg { width: 18px; height: 18px; fill: currentColor; }

/* ----------------------------------------------------------- sem projeto -- */

.vazio {
  display: grid; justify-items: center; text-align: center;
  gap: 12px; padding: 40px 20px 46px;
  border: 1px dashed var(--border); border-radius: 16px;
  background: var(--card);
}
.vazio[hidden] { display: none; }

/* Doze células com a proporção do papel — a tira de quadros, vazia. */
.vazio__tira { display: flex; gap: 4px; margin-bottom: 4px; }
.vazio__tira i {
  width: 24px; height: 32px; border-radius: 4px;
  border: 1px solid var(--border); background: var(--raised);
}
.vazio__tira i.is-primeira {
  border-color: var(--accent-chip-border);
  background: var(--accent-chip);
}
@media (max-width: 520px) {
  .vazio__tira i:nth-child(n + 7) { display: none; }
}

.vazio b { font-size: 16px; font-weight: 700; color: var(--txt); }
.vazio p {
  margin: 0; max-width: 46ch; font-size: 13.5px; line-height: 1.6; color: var(--txt4);
}
.vazio code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; color: var(--txt3);
}
.vazio__link { font-size: 13.5px; font-weight: 600; color: var(--accent-soft); }
.vazio__link:hover { text-decoration: underline; }

/* --------------------------------------------------------------- toast -- */

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  padding: 9px 16px; font-size: 12.5px; color: var(--txt2);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .55); z-index: 20;
}
.toast[hidden] { display: none; }
.toast button {
  margin-left: 10px; border: 0; background: none; cursor: pointer;
  color: var(--accent-soft); font-family: inherit; font-size: 12.5px; font-weight: 700;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }