:root{
  --navy-950:#060f1f;
  --navy-900:#0a1830;
  --navy-800:#11253d;
  --teal-600:#086478;
  --teal-500:#007f9a;
  --teal-400:#2ba0b8;
  --teal-300:#7fcad9;
  --blue-500:#1a8ad9;
  --ice-50:#f3f8fa;
  --ice-100:#e7f0f3;
  --white:#ffffff;
  --ink-900:#0c1b27;
  --ink-700:#2c3e4a;
  --ink-600:#4d5f6b;
  --ink-400:#84939c;
  --line:#dce6ea;
  --red-500:#c0392b;
  --red-bg:#fdecea;
  --green-600:#1f8a4d;
  --green-bg:#eafaf1;
  --grad-brand:linear-gradient(135deg,var(--teal-500),var(--blue-500));
  --grad-brand-soft:linear-gradient(135deg,rgba(0,127,154,.1),rgba(26,138,217,.1));
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:22px;
  --shadow-sm:0 2px 10px rgba(6,15,31,.06);
  --shadow-md:0 12px 30px rgba(6,15,31,.10);
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--ice-50);
  color:var(--ink-900);
  line-height:1.55;
  min-height:100vh;
}
h1,h2,h3,h4{ font-family:'Space Grotesk',-apple-system,sans-serif; font-weight:700; letter-spacing:-0.01em; }
button{ font:inherit; cursor:pointer; }
input,textarea,select{ font:inherit; }
a{ color:inherit; }

/* ===== Login screen ===== */
.login-screen{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:radial-gradient(ellipse 80% 60% at 20% 0%, #0c2746 0%, var(--navy-950) 60%), var(--navy-950);
}
.login-card{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:40px 34px;
  max-width:380px;
  width:100%;
  box-shadow:var(--shadow-md);
  text-align:center;
}
.login-card img{ width:60px; height:60px; border-radius:50%; margin:0 auto 18px; }
.login-card h1{ font-size:1.3rem; margin-bottom:6px; }
.login-card p.subtitle{ font-size:0.88rem; color:var(--ink-600); margin-bottom:26px; }
.field{ text-align:left; margin-bottom:16px; }
.field label{ display:block; font-size:0.82rem; font-weight:600; margin-bottom:6px; color:var(--ink-700); }
.field input, .field textarea, .field select{
  width:100%;
  padding:11px 13px;
  border:1.5px solid var(--line);
  border-radius:10px;
  font-size:0.95rem;
  color:var(--ink-900);
  transition:border-color .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--teal-500);
}
.field textarea{ resize:vertical; min-height:80px; }
.field-hint{ font-size:0.78rem; color:var(--ink-400); margin-top:5px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px;
  border-radius:100px;
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:0.92rem;
  border:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary{ background:var(--grad-brand); color:#fff; box-shadow:0 8px 20px rgba(0,110,160,.25); }
.btn-primary:hover{ transform:translateY(-1px); }
.btn-block{ width:100%; }
.btn-secondary{ background:var(--ice-100); color:var(--ink-900); }
.btn-secondary:hover{ background:var(--line); }
.btn-ghost{ background:transparent; border:1.5px solid var(--line); color:var(--ink-700); }
.btn-ghost:hover{ border-color:var(--teal-500); color:var(--teal-600); }
.btn-danger{ background:var(--red-bg); color:var(--red-500); }
.btn-danger:hover{ background:#fbdbd8; }
.btn-sm{ padding:8px 14px; font-size:0.82rem; }
.error-msg{
  background:var(--red-bg); color:var(--red-500);
  padding:11px 14px; border-radius:10px;
  font-size:0.85rem; margin-bottom:16px;
  display:none;
}
.error-msg.visible{ display:block; }
.login-security-note{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  font-size:0.76rem; color:var(--ink-400); line-height:1.5; text-align:left;
}

/* ===== Dashboard shell ===== */
.dashboard{ display:none; min-height:100vh; flex-direction:column; }
.dashboard.visible{ display:flex; }
.admin-header{
  background:var(--navy-950); color:#fff;
  padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px;
}
.admin-header .brand{ display:flex; align-items:center; gap:12px; }
.admin-header .brand img{ width:38px; height:38px; border-radius:50%; }
.admin-header .brand strong{ display:block; font-size:0.98rem; }
.admin-header .brand span{ font-size:0.72rem; color:var(--teal-300); text-transform:uppercase; letter-spacing:0.08em; }
.admin-header-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.admin-header-actions a, .admin-header-actions button{ color:#fff; }
.admin-header-actions .btn-ghost{ border-color:rgba(255,255,255,.25); color:#fff; }
.admin-header-actions .btn-ghost:hover{ border-color:rgba(255,255,255,.6); color:#fff; }

.publish-banner{
  background:#fff7e6; border-bottom:1px solid #f0dca8;
  padding:12px 24px;
  font-size:0.86rem; color:#7a5c15;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.publish-banner strong{ color:#5c4210; }
.publish-banner svg{ width:18px; height:18px; flex-shrink:0; stroke:#a3791f; fill:none; stroke-width:1.7; }

.admin-tabs{
  display:flex; gap:6px;
  padding:16px 24px 0;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.admin-tab-btn{
  background:none; border:none;
  padding:12px 18px;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:0.9rem;
  color:var(--ink-400);
  border-bottom:2.5px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.admin-tab-btn.active{ color:var(--teal-600); border-color:var(--teal-500); }

.admin-main{ flex:1; padding:28px 24px 100px; max-width:920px; width:100%; margin:0 auto; }
.admin-panel{ display:none; }
.admin-panel.active{ display:block; }

.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.panel-head h2{ font-size:1.3rem; }
.panel-head p{ font-size:0.86rem; color:var(--ink-600); margin-top:4px; }

.item-list{ display:flex; flex-direction:column; gap:12px; }
.item-row{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:16px 18px;
  display:flex; align-items:center; gap:14px;
}
.item-row .item-icon{
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:var(--grad-brand-soft);
  display:flex; align-items:center; justify-content:center;
}
.item-row .item-icon svg{ width:20px; height:20px; stroke:var(--teal-600); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.item-row .item-info{ flex:1; min-width:0; }
.item-row .item-info strong{ display:block; font-size:0.95rem; font-family:'Space Grotesk',sans-serif; }
.item-row .item-info p{ font-size:0.82rem; color:var(--ink-600); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.item-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.item-badge{
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em;
  padding:4px 9px; border-radius:100px;
}
.item-badge.badge-featured{ background:var(--grad-brand-soft); color:var(--teal-600); }
.item-badge.badge-active{ background:var(--green-bg); color:var(--green-600); }
.item-badge.badge-inactive{ background:var(--ice-100); color:var(--ink-400); }
.item-badge.badge-expired{ background:var(--red-bg); color:var(--red-500); }
.item-actions{ display:flex; gap:8px; flex-shrink:0; }
.icon-btn{
  width:34px; height:34px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:#fff;
  color:var(--ink-600);
  transition:border-color .15s ease, color .15s ease;
}
.icon-btn:hover{ border-color:var(--teal-500); color:var(--teal-600); }
.icon-btn.danger:hover{ border-color:var(--red-500); color:var(--red-500); }
.icon-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; }

.empty-state{
  text-align:center; padding:48px 20px; color:var(--ink-400);
  border:1.5px dashed var(--line); border-radius:var(--radius-md);
  font-size:0.9rem;
}

/* ===== Modal (form) ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(6,15,31,.55);
  display:none; align-items:flex-start; justify-content:center;
  padding:32px 16px; overflow-y:auto; z-index:1500;
}
.modal-overlay.visible{ display:flex; }
.modal-box{
  background:#fff; border-radius:var(--radius-lg);
  max-width:520px; width:100%;
  padding:30px 28px;
  box-shadow:var(--shadow-md);
}
.modal-box h3{ font-size:1.15rem; margin-bottom:20px; }
.icon-picker{ display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; margin-bottom:4px; }
.icon-picker-btn{
  aspect-ratio:1; border-radius:10px; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  background:#fff;
}
.icon-picker-btn svg{ width:18px; height:18px; stroke:var(--ink-600); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon-picker-btn.selected{ border-color:var(--teal-500); background:var(--grad-brand-soft); }
.icon-picker-btn.selected svg{ stroke:var(--teal-600); }
.checkbox-row{ display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.checkbox-row input{ width:17px; height:17px; accent-color:var(--teal-500); }
.checkbox-row label{ font-size:0.9rem; font-weight:500; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:24px; }
.conditional-field{ display:none; }
.conditional-field.visible{ display:block; }

/* ===== Bottom action bar ===== */
.action-bar{
  position:fixed; bottom:0; left:0; right:0;
  background:#fff; border-top:1px solid var(--line);
  padding:16px 24px;
  display:flex; align-items:center; justify-content:center; gap:14px;
  flex-wrap:wrap;
  box-shadow:0 -8px 24px rgba(6,15,31,.06);
  z-index:100;
}
.action-bar-status{ font-size:0.82rem; color:var(--ink-600); }
.action-bar-status.success{ color:var(--green-600); font-weight:600; }

/* ===== Segurança tab ===== */
.security-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px; max-width:440px;
}
.security-card h3{ font-size:1.05rem; margin-bottom:6px; }
.security-card p{ font-size:0.85rem; color:var(--ink-600); margin-bottom:18px; }
.security-warning{
  background:var(--red-bg); color:var(--red-500);
  padding:12px 14px; border-radius:10px; font-size:0.82rem;
  margin-top:20px; line-height:1.5;
}

@media (max-width:640px){
  .icon-picker{ grid-template-columns:repeat(4, 1fr); }
  .item-row{ flex-wrap:wrap; }
  .item-row .item-info p{ white-space:normal; }
}