:root{
  --brand:#4facfe; --brand2:#00f2fe;
  --ink:#1F2A30; --bg:#F7F9FB; --card:#fff; --border:rgba(31,42,48,.14);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Segoe UI',system-ui,Arial}
.container{max-width:1200px;margin:20px auto;padding:0 20px}

/* ========== TOPBAR + BUSCA ========== */
.topbar{
  display:flex; gap:16px; justify-content:space-between; align-items:center;
  background:#fff; padding:12px 20px; border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:10
}
.brand{font-weight:700}
.brand-link{display:inline-flex; gap:8px; align-items:center; color:#123; text-decoration:none; font-weight:700}
.topbar .search{display:flex; align-items:center; gap:8px; flex:1; max-width:560px; margin:0 16px}
.topbar .search input{
  flex:1; padding:10px 12px; border:1px solid #cfd8e3; border-radius:10px; background:#f6f9ff
}
.topbar .search button{
  padding:10px 12px; border:none; border-radius:10px; background:var(--brand); color:#fff; cursor:pointer
}

/* ========== BOTÕES PADRÃO ========== */
.btn{
  display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:8px;
  background:var(--brand); color:#fff; text-decoration:none
}
.btn.light{background:#e9f3ff;color:#145}
.btn.danger{background:#ff5252}

/* ========== GRID + CARD BASE ========== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:20px}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.06); overflow:hidden; display:flex; flex-direction:column;
  transition:.2s
}
.card:hover{transform:translateY(-3px)}


/* ========== CARD DE CATEGORIA ========== */
.card-cat{padding:0; position:relative}
/* fundo acinzentado pra PNG transparente + quadrado */
.card-cat .thumb-wrap{
  position:relative; overflow:hidden; background:#f0f0f3; border-bottom:1px solid var(--border)
}
.card-cat .thumb{
  width:100%; aspect-ratio:1/1; object-fit:contain; background:#f0f0f3; /* cinza leve */
  padding:12px; transform:scale(1); transition:transform .25s ease
}
.card-cat .badge{
  position:absolute; left:10px; top:10px; font-size:12px; color:#224;
  background:rgba(255,255,255,.85); padding:6px 10px; border-radius:999px;
  display:flex; align-items:center; gap:6px; box-shadow:0 2px 8px rgba(0,0,0,.08)
}
.card-cat .card-footer{
  display:flex; align-items:center; gap:10px; padding:12px 14px; background:#fff
}
.card-cat .card-footer h3{margin:0; font-size:16px; font-weight:700; flex:1}
.card-cat .card-footer .fa-folder-open{color:#4facfe}
.card-cat .card-footer .arrow{color:#99a; transition:transform .2s ease, color .2s ease}

/* animações leves */
.card-cat:hover .thumb{transform:scale(1.05)}
.card-cat:hover .card-footer .arrow{transform:translateX(4px); color:#4facfe}
.card-cat:active{transform:translateY(-1px) scale(.99)}
.card-cat:focus{outline:2px solid #8ec7ff; outline-offset:3px; border-radius:16px}

/* ========== THUMB DEFAULT (outros cards) ========== */
.thumb{width:100%; aspect-ratio:1/1; object-fit:contain; display:block; background:#f0f0f3; padding:12px}
.thumb-empty{display:flex;align-items:center;justify-content:center;font-size:48px;color:#aab}

/* ========== LOGIN ========== */
.center{display:flex;justify-content:center;align-items:center;min-height:70vh}
.login-box{
  background:#fff;padding:30px;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.1);
  width:320px;text-align:center
}
.login-box input{width:100%;margin:10px 0;padding:10px;border:1px solid #ddd;border-radius:8px}
.login-box button{
  width:100%;padding:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));
  border:none;border-radius:8px;color:#fff;font-weight:700;cursor:pointer
}
.error{color:#d00;margin:8px 0}

/* ===== Mockups: título discreto ===== */
.card-mock .card-footer h3,
.card-cat.mock .card-footer h3{
  font-size:13px;
  font-weight:500;
  color:#667085;
  letter-spacing:.1px;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
.card-mock .card-footer .fa-layer-group,
.card-cat.mock .card-footer .fa-layer-group{ color:#9aa6b2; font-size:14px }
.card-mock .card-footer .arrow,
.card-cat.mock .card-footer .arrow{ color:#c0c7d2; font-size:14px }
.card-mock:hover .card-footer .arrow,
.card-cat.mock:hover .card-footer .arrow{ color:#8fb9ff }

/* evita sublinhado no título dentro do card */
/* linha do título + botão ghost */
.row-title{display:flex;align-items:center;gap:10px;margin:6px 0 16px}
.btn.ghost{background:transparent;color:#375; border:1px dashed var(--border)}
.btn.small{padding:6px 8px;font-size:12px;border-radius:8px}

/* botãozinho de renomear no card */
.tiny-rename{
  position:absolute; right:10px; top:10px; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border:none; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.9); color:#445; box-shadow:0 2px 6px rgba(0,0,0,.08);
  transition:transform .15s ease, background .2s ease
}
.tiny-rename:hover{ transform:scale(1.05); background:#fff }

/* modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.25); display:none; align-items:center; justify-content:center; padding:20px}
.modal.open{display:flex}
.modal-dialog{background:#fff; width:100%; max-width:420px; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border)}
.modal-head h2{margin:0; font-size:18px}
.modal-close{background:transparent; border:none; font-size:18px; cursor:pointer; color:#777}
.modal-body{padding:16px}
.modal-body label{display:block; font-weight:600; margin-bottom:6px}
.modal-body input{width:100%; padding:10px 12px; border:1px solid #cfd8e3; border-radius:10px; background:#f6f9ff}
.modal-body .hint{color:#667085; font-size:12px; margin-top:8px}
.modal-body .error{color:#d00; font-size:13px; margin-top:8px}
.modal-foot{display:flex; gap:10px; justify-content:flex-end; padding:12px 16px; border-top:1px solid var(--border)}