:root{
  --bg: #0a0e1a;
  --surface: #121a30;
  --surface-2: #161f3a;
  --border: #232d4a;
  --text: #eef1f7;
  --text-muted: #94a3b8;
  --text-faint: #5c6785;
  --blue: #2f6fed;
  --blue-hover: #4a83f2;
  --red: #ef4444;
  --green: #22c55e;
  --radius: 12px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
input, textarea, select{
  width:100%; background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  padding: 10px 12px; border-radius: 8px; font-size:.9rem; font-family:inherit;
}
input:focus, textarea:focus, select:focus{ outline:2px solid var(--blue); border-color:transparent; }
label{ display:flex; flex-direction:column; gap:6px; font-size:.85rem; color: var(--text-muted); margin-bottom:16px; }
textarea{ resize:vertical; min-height:80px; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:8px;
  font-weight:600; font-size:.88rem; border:1px solid transparent; cursor:pointer; transition:.2s;
}
.btn-primary{ background: var(--blue); color:#fff; }
.btn-primary:hover{ background: var(--blue-hover); }
.btn-outline{ background:transparent; border-color: var(--border); color: var(--text); }
.btn-outline:hover{ border-color: var(--blue); color: var(--blue); }
.btn-danger{ background: rgba(239,68,68,.12); color: var(--red); border-color: rgba(239,68,68,.3); }
.btn-danger:hover{ background: rgba(239,68,68,.2); }
.btn-sm{ padding:7px 12px; font-size:.8rem; }

/* Login */
.login-page{ display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.login-box{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 36px; width:100%; max-width: 360px;
}
.login-box h1{ font-size:1.3rem; margin-bottom:22px; }
.login-box h1 span{ color: var(--blue); }
.alert-error{ background: rgba(239,68,68,.1); border:1px solid rgba(239,68,68,.3); color:#fca5a5; padding:10px 12px; border-radius:8px; font-size:.85rem; margin-bottom:16px; }
.alert-success{ background: rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.3); color:#86efac; padding:10px 12px; border-radius:8px; font-size:.85rem; }

/* Layout do painel */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
  width:230px; flex-shrink:0; background: var(--surface); border-right:1px solid var(--border);
  padding: 22px 16px; display:flex; flex-direction:column; gap:4px;
}
.admin-sidebar .brand{ font-weight:800; font-size:1.05rem; margin-bottom:24px; padding:0 8px; }
.admin-sidebar .brand span{ color: var(--blue); }
.admin-sidebar a{
  padding:10px 12px; border-radius:8px; font-size:.9rem; color: var(--text-muted);
}
.admin-sidebar a:hover{ background: var(--surface-2); color:#fff; }
.admin-sidebar a.active{ background: rgba(47,111,237,.12); color: var(--blue); font-weight:600; }
.admin-sidebar .logout{ margin-top:auto; color: var(--text-faint); }

.admin-main{ flex:1; padding: 32px 40px; max-width: 1100px; }
.admin-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:12px; }
.admin-header h1{ font-size:1.5rem; }
.admin-header p{ color: var(--text-muted); font-size:.88rem; margin-top:4px; }

.card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:24px; margin-bottom:20px; }

table{ width:100%; border-collapse:collapse; }
th, td{ text-align:left; padding:12px 10px; border-bottom:1px solid var(--border); font-size:.88rem; }
th{ color: var(--text-faint); font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.5px; }
tr:last-child td{ border-bottom:none; }
td.actions{ display:flex; gap:8px; }

.badge-tag{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700; }
.badge-popular{ background: rgba(47,111,237,.15); color: var(--blue); }
.badge-new{ background: rgba(34,197,94,.15); color: var(--green); }
.badge-none{ background: var(--surface-2); color: var(--text-faint); }

.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.icon-preview{ width:44px; height:44px; background:#fff; border-radius:8px; padding:8px; display:flex; align-items:center; justify-content:center; }
.icon-preview img{ width:100%; height:100%; object-fit:contain; }
.dashboard-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.dashboard-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); padding:22px; }
.dashboard-card strong{ font-size:1.8rem; display:block; margin-bottom:4px; }
.dashboard-card span{ color: var(--text-muted); font-size:.85rem; }

.empty-state{ text-align:center; padding:40px 20px; color: var(--text-faint); }

@media (max-width: 780px){
  .admin-shell{ flex-direction:column; }
  .admin-sidebar{ width:100%; flex-direction:row; overflow-x:auto; border-right:none; border-bottom:1px solid var(--border); }
  .admin-sidebar .brand, .admin-sidebar .logout{ display:none; }
  .admin-main{ padding:22px; }
  .form-row{ grid-template-columns: 1fr; }
}