/* ============================================================
   Cake Designs Zim — Admin UI
   Design language: a real back-office for a cake-decorating supply
   shop, not a generic SaaS panel. The palette reads as buttercream +
   berry + gold foil; the signature motif is a piped-icing scalloped
   edge along the top of every content card, and the page background
   carries a faint scattering of sprinkle dots. Each section (Products,
   Reports, Email, Reviews, Users, Profile) gets its own accent color
   so the section you're in is always legible at a glance.
   ============================================================ */

:root{
  /* ---- Surfaces ---- */
  --admin-bg-base:#FFF8F4;           /* warm vanilla-batter base, not stark white/gray */
  --admin-surface:#FFFDFB;           /* card surface — warm off-white, never pure #fff */
  --admin-surface-alt:#FCF4F8;       /* faint pink-tinted panel surface (table heads, wells) */
  --admin-border:rgba(30,27,75,0.10);
  --admin-ink:#1E1B3A;
  --admin-muted:#6B6785;

  /* ---- Brand ---- */
  --brand-pink:#E91E8C;
  --brand-pink-rgb:233,30,140;
  --brand-pink-dark:#B5136B;
  --brand-indigo:#6D28D9;
  --brand-indigo-rgb:109,40,217;
  --brand-indigo-dark:#5420AD;

  /* ---- Section accents (one per admin area — the "icing color" of that tier) ---- */
  --accent-gold:#D69A1F;             /* Users — admin/gold-foil */
  --accent-gold-rgb:214,154,31;
  --accent-gold-soft:#FBF0D9;
  --accent-plum:#A6379B;             /* Profile — personal, berry-plum */
  --accent-plum-rgb:166,55,155;
  --accent-plum-soft:#F8E7F6;

  /* ---- Status ---- */
  --success:#12B76A;
  --success-rgb:18,183,106;
  --success-soft:#E7FBF2;
  --warning:#F59E0B;
  --warning-soft:#FEF6E7;
  --danger:#E11D48;
  --danger-soft:#FDECEF;
  --info:#0EA5E9;
  --info-rgb:14,165,233;
  --info-soft:#E7F6FD;

  /* ---- Active page accent — overridden per body.page-* class below ---- */
  --page-accent:var(--brand-pink);
  --page-accent-rgb:var(--brand-pink-rgb);
  --page-accent-soft:#FDE6F3;

  --radius-lg:20px;
  --radius-md:13px;
  --radius-sm:9px;
  --shadow-card:0 12px 28px -16px rgba(30,27,75,0.24);
  --shadow-pop:0 12px 28px -12px rgba(30,27,75,0.35);

  --display:'Bricolage Grotesque', sans-serif;
  --body:'Work Sans', sans-serif;
  --mono:'Space Mono', monospace;
}

/* Per-page accent — set once on <body>, read everywhere via var(--page-accent) */
body.page-pink{ --page-accent:var(--brand-pink); --page-accent-rgb:var(--brand-pink-rgb); --page-accent-soft:#FDE6F3; }
body.page-indigo{ --page-accent:var(--brand-indigo); --page-accent-rgb:var(--brand-indigo-rgb); --page-accent-soft:#EEE7FC; }
body.page-sky{ --page-accent:var(--info); --page-accent-rgb:var(--info-rgb); --page-accent-soft:var(--info-soft); }
body.page-mint{ --page-accent:var(--success); --page-accent-rgb:var(--success-rgb); --page-accent-soft:var(--success-soft); }
body.page-gold{ --page-accent:var(--accent-gold); --page-accent-rgb:var(--accent-gold-rgb); --page-accent-soft:var(--accent-gold-soft); }
body.page-plum{ --page-accent:var(--accent-plum); --page-accent-rgb:var(--accent-plum-rgb); --page-accent-soft:var(--accent-plum-soft); }

*{box-sizing:border-box;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--admin-ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;

  /* Sprinkle-dot field over a warm batter base — the shop's confetti,
     kept faint so it reads as texture, not noise. */
  /* Corner color washes (pink + indigo always, plus the active section's
     own color pooling at the bottom) with a scattered sprinkle-confetti
     layer on top — the shop's actual visual signature, not a flat tint. */
  background-color:var(--admin-bg-base);
  background-image:
    radial-gradient(ellipse 900px 700px at -8% -18%, rgba(233,30,140,0.24), transparent 55%),
    radial-gradient(ellipse 850px 680px at 108% -6%, rgba(109,40,217,0.22), transparent 55%),
    radial-gradient(ellipse 800px 620px at 50% 118%, rgba(var(--page-accent-rgb),0.24), transparent 55%),
    radial-gradient(rgba(233,30,140,0.38) 2.4px, transparent 2.6px),
    radial-gradient(rgba(109,40,217,0.34) 2.4px, transparent 2.6px),
    radial-gradient(rgba(214,154,31,0.36) 2.1px, transparent 2.3px),
    radial-gradient(rgba(14,165,233,0.30) 2.1px, transparent 2.3px),
    radial-gradient(rgba(18,183,106,0.30) 1.9px, transparent 2.1px);
  background-repeat:no-repeat, no-repeat, no-repeat, repeat, repeat, repeat, repeat, repeat;
  background-size:100% 100%, 100% 100%, 100% 100%, 120px 120px, 160px 160px, 180px 180px, 140px 140px, 200px 200px;
  background-position:0 0, 0 0, 0 0, 0 0, 45px 65px, 95px 15px, 20px 95px, 70px 150px;
  background-attachment:fixed, fixed, fixed, scroll, scroll, scroll, scroll, scroll;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ---------- Top header ---------- */
.admin-header{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 32px;
  background:linear-gradient(120deg,var(--brand-pink) 0%,var(--brand-pink) 35%,var(--brand-indigo) 100%);
  color:#fff;
  box-shadow:0 16px 34px -14px rgba(109,40,217,0.55);
}
.admin-header .brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--display);
  font-weight:700;
  font-size:19px;
  letter-spacing:-0.01em;
}
.admin-header .brand::before{
  content:"";
  width:30px;
  height:30px;
  border-radius:9px;
  background:rgba(255,255,255,0.22);
  border:1px solid rgba(255,255,255,0.35);
  flex-shrink:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 8h16l-1.5 11a2 2 0 0 1-2 1.8H7.5a2 2 0 0 1-2-1.8L4 8Z' stroke='white' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M8 8a4 4 0 0 1 8 0' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px;
}
.admin-header .brand span{
  font-family:var(--mono);
  font-weight:400;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.18);
  padding:3px 9px;
  border-radius:999px;
  margin-left:2px;
}

/* ---------- Header layout: brand + section tabs on the left, account nav on the right ---------- */
.admin-header-left{display:flex;align-items:center;gap:28px;}
.admin-header-right{display:flex;align-items:center;gap:18px;font-family:var(--body);font-size:13.5px;font-weight:600;}
.admin-header-right a{text-decoration:none;color:rgba(255,255,255,0.88);opacity:.9;transition:opacity .15s ease;}
.admin-header-right a:hover{opacity:1;text-decoration:underline;}
.admin-header-right span{color:rgba(255,255,255,0.7);font-weight:500;padding-right:16px;border-right:1px solid rgba(255,255,255,0.25);}
.admin-tabs{display:flex;align-items:center;gap:4px;font-family:var(--body);font-size:13.5px;font-weight:600;flex-wrap:wrap;}
.admin-tabs a{text-decoration:none;color:rgba(255,255,255,0.72);padding:8px 14px;border-radius:999px;transition:background .15s ease, color .15s ease;}
.admin-tabs a:hover{color:#fff;background:rgba(255,255,255,0.14);}
.admin-tabs a.active{color:var(--brand-indigo-dark);background:#fff;box-shadow:0 6px 14px -6px rgba(30,27,75,0.4);}
@media(max-width:760px){
  .admin-header{flex-wrap:wrap;gap:12px;padding:14px 20px;}
  .admin-header-left{flex-wrap:wrap;gap:12px;}
  .admin-header-right span{border-right:none;padding-right:0;}
}

/* A thin piped-icing trim under the header, in the active section's
   own color — the header always belongs to the brand, this stripe
   always belongs to the page you're on. */
.admin-header::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-7px;height:7px;
  background:var(--page-accent);
  opacity:.55;
}

/* ---------- Page wrap ---------- */
.admin-wrap{max-width:1080px;margin:0 auto;padding:44px 32px 120px;}
.admin-crumb{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;color:var(--admin-muted);
  margin-bottom:18px;
}
.admin-crumb a{text-decoration:none;color:var(--admin-muted);}
.admin-crumb a:hover{color:var(--brand-pink);}
.admin-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:8px;}

h1{
  font-family:var(--display);
  font-size:32px;
  font-weight:700;
  letter-spacing:-0.02em;
  margin:0;
  background:linear-gradient(120deg,var(--page-accent),var(--brand-indigo));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
}
.admin-sub{font-size:14.5px;color:var(--admin-muted);margin:6px 0 28px;}

.admin-title-row h1{margin-bottom:0;}
.status-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;
  flex-shrink:0;
}
.status-pill.is-new{background:var(--info-soft);color:var(--info);}
.status-pill.is-edit{background:var(--warning-soft);color:var(--warning);}
.status-pill.dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;}

/* ---------- Alerts ---------- */
.alert{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border-radius:var(--radius-md);
  padding:16px 18px;
  margin-bottom:24px;
  font-size:14px;
  font-weight:500;
  box-shadow:0 10px 24px -18px rgba(30,27,75,0.4);
}
.alert::before{
  content:"";
  width:20px;height:20px;flex-shrink:0;margin-top:1px;
  background-repeat:no-repeat;background-position:center;background-size:contain;
}
.alert-error{background:var(--danger-soft);color:#8A1030;border:1px solid rgba(225,29,72,0.18);}
.alert-error::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%23E11D48' stroke-width='1.8'/%3E%3Cpath d='M12 8v5M12 16h.01' stroke='%23E11D48' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");}
.alert-error div + div{margin-top:4px;}
.alert-success{background:var(--success-soft);color:#0B6B44;border:1px solid rgba(18,183,106,0.22);}
.alert-success::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='12' cy='12' r='9' stroke='%2312B76A' stroke-width='1.8'/%3E%3Cpath d='m8.5 12.5 2.3 2.3L16 10' stroke='%2312B76A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.alert-warning{background:var(--warning-soft);color:#8A5A0B;border:1px solid rgba(245,158,11,0.25);}
.alert-warning::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 2.6 17.5A1.8 1.8 0 0 0 4.2 20h15.6a1.8 1.8 0 0 0 1.6-2.5L13.7 3.9a1.8 1.8 0 0 0-3.4 0Z' stroke='%23F59E0B' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");}

/* ---------- Top actions row ---------- */
.top-actions{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:8px;}
.top-actions h1{margin-bottom:0;}
.top-actions .admin-sub{margin-bottom:0;}

/* ---------- Cards: the signature — a piped-icing scalloped top edge,
   colored in the active section's accent, on every primary content
   card inside .admin-wrap. Cake tiers, not SaaS boxes. ---------- */
.admin-card{
  background:var(--admin-surface);
  border:1px solid var(--admin-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  position:relative;
}
.admin-wrap .admin-card::before{
  content:"";
  display:block;
  height:14px;
  background:
    radial-gradient(circle 9px at 10px 14px, var(--page-accent) 99%, transparent 100%) 0 0/20px 20px repeat-x,
    linear-gradient(var(--page-accent), var(--page-accent)) 0 100%/100% 6px no-repeat;
  opacity:.92;
}

/* ---------- Dashboard: product table ---------- */
.admin-card > .admin-sub{padding:28px;margin:0;}
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;min-width:640px;}
thead th{
  position:sticky;top:0;background:var(--admin-surface-alt);
  text-align:left;padding:14px 16px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--admin-muted);border-bottom:1px solid var(--admin-border);
  white-space:nowrap;
}
tbody td{
  padding:12px 16px;border-bottom:1px solid var(--admin-border);
  font-size:14px;color:var(--admin-ink);vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none;}
tbody tr{transition:background .12s ease;}
tbody tr:hover{background:var(--page-accent-soft);}

.thumb{
  width:46px;height:46px;border-radius:var(--radius-sm);
  object-fit:cover;background:var(--admin-bg-base);border:1px solid var(--admin-border);
}

.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;
}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.badge-yes{background:var(--success-soft);color:var(--success);}
.badge-no{background:#EFEEF6;color:var(--admin-muted);}

.actions{display:flex;gap:8px;flex-wrap:nowrap;}
.actions .btn{padding:8px 15px;font-size:12.5px;}

/* ---------- Layout: form + live preview ---------- */
.admin-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:24px;align-items:start;}
@media(max-width:860px){.admin-grid{grid-template-columns:1fr;}}

/* ---------- Form sections ---------- */
.form-section{padding:26px 28px;border-bottom:1px solid var(--admin-border);}
.form-section:last-of-type{border-bottom:none;}
.form-section-head{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.form-section-icon{
  width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-family:var(--display);font-weight:700;
}
.form-section-icon svg{width:16px;height:16px;}
.form-section-icon.pink{background:#FDE6F3;color:var(--brand-pink);}
.form-section-icon.indigo{background:#EEE7FC;color:var(--brand-indigo);}
.form-section-icon.info{background:var(--info-soft);color:var(--info);}
.form-section-icon.success{background:var(--success-soft);color:var(--success);}
.form-section-icon.gold{background:var(--accent-gold-soft);color:var(--accent-gold);}
.form-section-title{font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--admin-ink);}
.form-section-desc{font-size:12.5px;color:var(--admin-muted);margin-top:1px;}

label{
  display:block;
  font-family:var(--body);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
  color:var(--admin-ink);
  margin-bottom:7px;
}
input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select{
  width:100%;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--admin-border);
  background:var(--admin-surface-alt);
  font-family:var(--body);
  font-size:14.5px;
  color:var(--admin-ink);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--page-accent);
  background:#fff;
  box-shadow:0 0 0 4px var(--page-accent-soft);
}
textarea{resize:vertical;min-height:90px;}
.field{margin-bottom:18px;}
.field:last-child{margin-bottom:0;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:520px){.field-row{grid-template-columns:1fr;}}
.field-hint{font-size:12px;color:var(--admin-muted);margin-top:6px;font-weight:400;}

.input-adorned{position:relative;}
.input-adorned .adorn{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-weight:700;color:var(--admin-muted);font-size:14px;pointer-events:none;
}
.input-adorned input{padding-left:28px;}

/* ---------- Category chip picker ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:9px;}
.cat-chip{
  font-family:var(--body);font-size:13.5px;font-weight:600;
  padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--admin-border);
  background:#fff;color:var(--admin-ink);cursor:pointer;
  transition:all .15s ease;
}
.cat-chip:hover{border-color:var(--page-accent);}
.cat-chip.selected{background:var(--admin-ink);border-color:var(--admin-ink);color:#fff;}
.cat-chip.add-new{border-style:dashed;color:var(--admin-muted);}
.cat-chip.add-new:hover{color:var(--page-accent);border-color:var(--page-accent);}
#categoryCustomWrap{margin-top:12px;}

/* ---------- Image dropzone ---------- */
.dropzone{
  position:relative;
  border:1.5px dashed var(--admin-border);
  border-radius:var(--radius-md);
  background:var(--admin-surface-alt);
  padding:26px;
  display:flex;
  align-items:center;
  gap:18px;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone.drag-over{border-color:var(--page-accent);background:var(--page-accent-soft);}
.dropzone input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;}
.dropzone-thumb{
  width:64px;height:64px;border-radius:var(--radius-sm);
  background:#fff;border:1px solid var(--admin-border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;
}
.dropzone-thumb img{width:100%;height:100%;object-fit:cover;}
.dropzone-thumb svg{width:26px;height:26px;color:var(--admin-muted);opacity:.6;}
.dropzone-text strong{display:block;font-size:14px;color:var(--admin-ink);margin-bottom:2px;}
.dropzone-text span{font-size:12.5px;color:var(--admin-muted);}
.dropzone-remove{
  margin-left:auto;background:#fff;border:1px solid var(--admin-border);color:var(--danger);
  font-family:var(--body);font-size:12.5px;font-weight:600;
  padding:7px 12px;border-radius:999px;cursor:pointer;position:relative;z-index:2;flex-shrink:0;
}
.dropzone-remove:hover{background:var(--danger-soft);}

/* ---------- Toggle switches ---------- */
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border:1.5px solid var(--admin-border);border-radius:var(--radius-sm);
  margin-bottom:12px;background:var(--admin-surface-alt);
}
.toggle-row:last-child{margin-bottom:0;}
.toggle-copy strong{display:block;font-family:var(--body);font-size:14px;color:var(--admin-ink);}
.toggle-copy span{font-size:12.5px;color:var(--admin-muted);}
.switch{position:relative;width:44px;height:26px;flex-shrink:0;}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:2;}
.switch .track{
  position:absolute;inset:0;background:#DDDAF0;border-radius:999px;transition:background .2s ease;
}
.switch .thumb{
  position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(30,27,75,0.25);transition:transform .2s ease;
}
.switch input:checked ~ .track{background:var(--success);}
.switch input:checked ~ .thumb{transform:translateX(18px);}
.switch.pink input:checked ~ .track{background:var(--brand-pink);}

/* ---------- Sidebar: live preview ---------- */
.preview-card{position:sticky;top:96px;}
.preview-head{padding:20px 22px 0;}
.preview-head .eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-indigo);font-weight:700;
}
.preview-head h2{font-family:var(--display);font-size:16px;margin:4px 0 18px;background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--admin-ink);}
.preview-stage{padding:0 22px 22px;}

.pv-product-card{
  border:1px solid var(--admin-border);border-radius:14px;overflow:hidden;background:#fff;
}
.pv-media{
  position:relative;aspect-ratio:1/1;background:var(--admin-bg-base);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pv-media img{width:100%;height:100%;object-fit:cover;}
.pv-media svg{width:36px;height:36px;color:var(--admin-border);}
.pv-badge{
  position:absolute;top:9px;left:9px;background:var(--success);color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;display:none;
}
.pv-badge.show{display:inline-block;}
.pv-body{padding:14px 16px 16px;}
.pv-cat{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--admin-muted);}
.pv-name{font-family:var(--display);font-size:15px;font-weight:700;color:var(--admin-ink);margin:4px 0 10px;min-height:1.3em;}
.pv-footer{display:flex;align-items:center;justify-content:space-between;}
.pv-price{
  position:relative;display:inline-flex;align-items:center;background:var(--brand-pink);color:#fff;
  font-family:var(--mono);font-weight:700;font-size:13px;padding:5px 12px 5px 17px;
  clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);
}
.pv-price::before{content:"";position:absolute;left:5px;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:50%;background:#fff;}
.pv-stock{font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--admin-muted);display:flex;align-items:center;gap:5px;}
.pv-stock.out{color:var(--danger);}
.pv-stock::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success);}
.pv-stock.out::before{background:var(--danger);}

.preview-note{
  margin:16px 22px 22px;padding:12px 14px;background:var(--info-soft);border-radius:var(--radius-sm);
  font-size:12px;color:#075985;
}

/* ---------- Sticky action bar ---------- */
.actions-bar{
  position:sticky;bottom:0;left:0;right:0;
  background:rgba(255,248,244,0.92);backdrop-filter:blur(10px);
  border-top:1px solid var(--admin-border);
  margin-top:24px;padding:16px 0;
  display:flex;justify-content:flex-end;gap:12px;
}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-weight:700;font-size:14px;
  padding:12px 24px;border-radius:var(--radius-sm);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  background:linear-gradient(120deg,var(--brand-pink),var(--brand-indigo));color:#fff;
  box-shadow:0 10px 22px -8px rgba(109,40,217,0.45);
}
.btn:hover{box-shadow:0 14px 28px -8px rgba(109,40,217,0.55);transform:translateY(-1px);}
.btn:active{transform:translateY(1px);}
.btn-primary{background:linear-gradient(120deg,var(--brand-pink),var(--brand-indigo));color:#fff;box-shadow:0 10px 22px -8px rgba(109,40,217,0.45);}
.btn-ghost{background:#fff;color:var(--admin-ink);border-color:var(--admin-border);box-shadow:none;}
.btn-ghost:hover{border-color:var(--admin-ink);box-shadow:none;transform:none;}
.btn-danger{background:#fff;color:var(--danger);border-color:rgba(225,29,72,0.3);box-shadow:none;}
.btn-danger:hover{background:var(--danger-soft);border-color:var(--danger);box-shadow:none;transform:none;}

/* ---------- Login page — original design: a "stamped medallion" card
   using the same piped-icing scallop motif as every other admin card,
   so it reads as unmistakably Cake Designs Zim rather than a generic
   dark admin-panel template. ---------- */
.login-page{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,var(--brand-pink) 0%,var(--brand-indigo) 55%,#1E1B3A 100%);
  box-sizing:border-box;
}
.login-page::before,.login-page::after{
  content:"";position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;
}
.login-page::before{width:380px;height:380px;background:rgba(255,255,255,0.14);top:-130px;left:-110px;}
.login-page::after{width:320px;height:320px;background:rgba(214,154,31,0.26);bottom:-130px;right:-90px;}

.login-box{width:100%;max-width:360px;position:relative;z-index:1;}

/* The scalloped icing trim (same motif as every .admin-card, since the
   login card sits outside .admin-wrap and needs its own copy of the
   rule) sits at the top, with the logo as a circular medallion just
   below it — the signature touch that makes this feel like Cake
   Designs Zim and nothing else. */
.login-card{
  padding:22px 28px 26px;text-align:center;
  animation:loginRiseIn .55s cubic-bezier(.16,1,.3,1) both;
}
.login-card::before{
  content:"";
  display:block;
  height:14px;
  margin:0 -28px 16px;
  background:
    radial-gradient(circle 9px at 10px 14px, var(--brand-pink) 99%, transparent 100%) 0 0/20px 20px repeat-x,
    linear-gradient(var(--brand-pink), var(--brand-pink)) 0 100%/100% 6px no-repeat;
  opacity:.92;
}
@keyframes loginRiseIn{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}

.login-medallion{
  width:58px;height:58px;border-radius:50%;
  margin:0 auto 12px;
  background:#fff;border:1px solid var(--admin-border);
  box-shadow:0 8px 18px -6px rgba(30,27,75,0.3);
  display:flex;align-items:center;justify-content:center;padding:7px;
}
.login-medallion img{width:100%;height:100%;object-fit:contain;border-radius:50%;}

.login-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.03em;
  padding:5px 13px;border-radius:999px;
  background:var(--page-accent-soft);color:var(--brand-pink-dark);
  margin-bottom:10px;
}
.login-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;}

.login-card h1{
  font-size:21px;text-align:center;margin:0 0 3px;
  -webkit-text-fill-color:initial;background:none;color:var(--admin-ink);
}
.login-card .admin-sub{text-align:center;margin:0 0 18px;font-size:13px;}

.login-card .alert{text-align:left;padding:10px 13px;margin-bottom:14px;font-size:12.5px;}

.login-card form{text-align:left;}
.login-card form label{display:none;} /* icon-prefixed fields replace visible labels */

.login-field{position:relative;margin-bottom:10px;}
.login-field-icon{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--admin-muted);pointer-events:none;display:flex;
}
.login-field-icon svg{width:16px;height:16px;}
.login-card form input{
  margin-bottom:0;padding:11px 13px 11px 38px;font-size:13.5px;
}
.login-field-pw input{padding-right:38px;}
.login-eye-btn{
  position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:none;background:none;color:var(--admin-muted);
  cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:7px;
  transition:color .15s, background .15s;
}
.login-eye-btn:hover{color:var(--brand-pink);background:rgba(0,0,0,0.03);}
.login-eye-btn svg{width:15px;height:15px;}
.login-eye-btn .login-eye-off{display:none;}
.login-eye-btn.showing .login-eye{display:none;}
.login-eye-btn.showing .login-eye-off{display:block;}

.login-card form button{margin-top:14px;}
.login-foot{margin:12px 0 0;text-align:center;font-size:12.5px;}
.login-foot a{color:var(--brand-indigo);font-weight:600;text-decoration:none;}
.login-foot a:hover{text-decoration:underline;}

.login-tag{
  margin-top:16px;padding-top:13px;border-top:1px solid var(--admin-border);
  font-size:11px;color:var(--admin-muted);text-align:center;letter-spacing:.02em;
}

.btn-block{width:100%;justify-content:center;}
@media(max-width:420px){.login-card{padding:0 20px 22px;margin:0 4px;}}