: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)}

/* footer */
.site-footer{margin-top:30px;padding:16px;border-top:1px solid var(--border);color:#667085;display:flex;align-items:center;justify-content:space-between}
.site-footer .links{display:flex;gap:12px}
.site-footer a{color:#4facfe;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* dropzone */
.dropzone{margin-top:14px;background:#eef3f9;border:2px dashed #80bfff;border-radius:14px;padding:34px;text-align:center;cursor:pointer;transition:.2s}
.dropzone:hover{background:#e6f0ff}

/* alert */
.alert{background:#e7f8ee;border:1px solid #b9e7c7;color:#0b7a33;padding:12px;border-radius:10px}

/* row generic */
.row{display:flex;flex-wrap:wrap;gap:12px}

/* item card */
.item-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px}
.item-card .thumb{max-width:160px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.08);display:block}

/* empty state */
.empty-state{background:#fff;border:1px dashed var(--border);border-radius:12px;padding:14px;color:#667085}

/* Drag & Drop Highlight */
.card.mock.drag-over {
  border-color: #4facfe;
  background-color: #e6f0ff;
  transform: scale(1.02);
  box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.3);
}
.card.mock.drag-over .thumb {
  opacity: 0.5;
}
.card.mock.drag-over .badge {
    background-color: #4facfe;
    color: #fff;
    content: "Solte para carregar";
}

/* Favorite Button */
.btn-fav {
  position: absolute; 
  right: 50px; 
  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: #000; 
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  transition: all 0.2s ease;
  z-index: 5;
}
.btn-fav:hover { transform: scale(1.1); background: #fff; color: #ff5252; }
.btn-fav.active { color: #ff5252; }
.btn-fav i { font-size: 14px; }