/* ============================================================
   INVÉ Admin Operating System — admin.css
   admin.byinve.com
   ============================================================ */

/* FONTS */
@font-face{font-family:'Lora';src:url('../fonts/lora-v37-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/lora-v37-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/lora-v37-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('../fonts/lora-v37-latin-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/source-sans-3-v19-latin-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/source-sans-3-v19-latin-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/source-sans-3-v19-latin-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/source-sans-3-v19-latin-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* TOKENS */
:root{
  --bg:#F8F7F4;
  --bg2:#FFFFFF;
  --bg3:#F3F2EF;
  --bg4:#ECEAE5;
  --black:#1e2e18;
  --gold:#C6A96B;
  --gl:#dfc28e;
  --gd:rgba(30,46,24,.14);
  --gm:rgba(30,46,24,.32);
  --text:#1e2e18;
  --mu:#4a6040;
  --mu2:rgba(30,46,24,.16);
  --grn:#2d6b42;
  --grnf:rgba(45,107,66,.08);
  --grnb:rgba(45,107,66,.28);
  --red:#8B2020;
  --redf:rgba(139,32,32,.08);
  --redb:rgba(139,32,32,.25);
  --amb:#7a5800;
  --ambf:rgba(122,88,0,.08);
  --ambb:rgba(122,88,0,.25);
  --blue:#1a3a6b;
  --bluef:rgba(26,58,107,.08);
  --blueb:rgba(26,58,107,.25);
  --sidebar-w:260px;
  --topbar-h:64px;
}

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Source Sans 3',sans-serif;
  font-weight:400;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ============================================================
   AUTH SCREENS
   ============================================================ */
.auth-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  background:var(--bg3);
  position:relative;
}
.auth-wrap::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(198,169,107,.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 20%, rgba(30,46,24,.05) 0%, transparent 60%);
  pointer-events:none;
}
.auth-box{
  background:var(--bg2);
  border:1px solid var(--gd);
  padding:3.5rem 3rem;
  width:100%;
  max-width:440px;
  text-align:center;
  position:relative;
}
.auth-box::before,.auth-box::after{
  content:'';
  position:absolute;
  width:14px;
  height:14px;
  border:1px solid var(--gold);
}
.auth-box::before{top:-7px;left:-7px;border-right:none;border-bottom:none}
.auth-box::after{bottom:-7px;right:-7px;border-left:none;border-top:none}
.auth-brand{
  font-family:'Lora',serif;
  font-size:3.2rem;
  font-style:italic;
  color:var(--black);
  letter-spacing:.06em;
  margin-bottom:.2rem;
  line-height:1;
  text-transform:uppercase;
}
.auth-brand span{color:var(--gold)}
.auth-sub{
  font-size:.72rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--mu);
  margin-bottom:.5rem;
  font-weight:600;
}
.auth-desc{
  font-size:.88rem;
  color:var(--mu);
  line-height:1.85;
  margin-bottom:2rem;
  padding-top:.5rem;
  border-top:1px solid var(--gd);
  margin-top:1.2rem;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.admin-wrap{
  display:none;
  min-height:100vh;
}
.admin-wrap.open{display:flex;flex-direction:column}

/* TOPBAR */
.topbar{
  position:fixed;
  top:0;left:0;right:0;
  height:var(--topbar-h);
  background:var(--black);
  border-bottom:1px solid rgba(198,169,107,.2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.5rem 0 calc(var(--sidebar-w) + 1.5rem);
  z-index:300;
}
.tb-brand{
  font-family:'Lora',serif;
  font-size:1.6rem;
  font-style:italic;
  color:var(--bg2);
  letter-spacing:.06em;
  line-height:1;
}
.tb-brand span{color:var(--gold)}
.tb-brand small{
  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(248,247,244,.3);
  display:block;
  font-style:normal;
  margin-top:.1rem;
  font-family:'Source Sans 3',sans-serif;
}
.tb-right{display:flex;align-items:center;gap:.8rem}
.tb-user{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(248,247,244,.45);
  font-weight:500;
}
.tb-signout{
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(248,247,244,.35);
  background:none;
  border:1px solid rgba(248,247,244,.12);
  padding:.35rem .8rem;
  cursor:pointer;
  transition:all .3s;
  font-family:'Source Sans 3',sans-serif;
}
.tb-signout:hover{color:var(--gold);border-color:rgba(198,169,107,.4)}

/* SIDEBAR */
.sidebar{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--sidebar-w);
  background:var(--black);
  border-right:1px solid rgba(198,169,107,.12);
  z-index:200;
  display:flex;
  flex-direction:column;
  padding-top:var(--topbar-h);
  overflow-y:auto;
}
.sidebar-logo{
  padding:1.5rem 1.5rem 1rem;
  border-bottom:1px solid rgba(248,247,244,.06);
}
.sidebar-logo-text{
  font-family:'Lora',serif;
  font-size:1.4rem;
  font-style:italic;
  color:var(--bg2);
}
.sidebar-logo-text span{color:var(--gold)}
.nav-section{
  padding:.8rem 0;
  border-bottom:1px solid rgba(248,247,244,.06);
}
.nav-section-label{
  font-size:.58rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(248,247,244,.22);
  padding:.4rem 1.5rem .6rem;
  font-weight:600;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.65rem 1.5rem;
  font-size:.8rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(248,247,244,.45);
  cursor:pointer;
  transition:all .25s;
  font-weight:500;
  border-left:2px solid transparent;
  position:relative;
}
.nav-item:hover{
  color:rgba(248,247,244,.85);
  background:rgba(248,247,244,.04);
}
.nav-item.active{
  color:var(--gold);
  border-left-color:var(--gold);
  background:rgba(198,169,107,.06);
}
.nav-icon{
  font-size:1rem;
  width:18px;
  flex-shrink:0;
  text-align:center;
}
.nav-badge{
  margin-left:auto;
  background:var(--red);
  color:#fff;
  font-size:.58rem;
  font-weight:700;
  padding:.15rem .45rem;
  letter-spacing:.05em;
  min-width:18px;
  text-align:center;
}

/* MAIN CONTENT */
.main-content{
  margin-left:var(--sidebar-w);
  margin-top:var(--topbar-h);
  min-height:calc(100vh - var(--topbar-h));
  padding:2.5rem 2.5rem 5rem;
  max-width:1400px;
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.ph{margin-bottom:2.5rem}
.ph h1{
  font-family:'Lora',serif;
  font-size:2.4rem;
  font-weight:600;
  font-style:italic;
  color:var(--black);
  line-height:1;
  margin-bottom:.35rem;
}
.ph h1 em{color:var(--gold);font-weight:400}
.ph-sub{font-size:.92rem;color:var(--mu);line-height:1.85}
.ph-actions{
  display:flex;
  gap:.6rem;
  align-items:center;
  flex-wrap:wrap;
  margin-top:1.2rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.6rem;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-family:'Source Sans 3',sans-serif;
  font-weight:600;
  cursor:pointer;
  border:none;
  transition:all .3s;
  text-decoration:none;
  white-space:nowrap;
  flex-shrink:0;
}
.btn-black{background:var(--black);color:var(--bg2)}
.btn-black:hover{background:var(--gold);color:var(--black)}
.btn-gold{background:var(--gold);color:var(--black)}
.btn-gold:hover{background:var(--gl)}
.btn-outline{background:transparent;color:var(--text);border:2px solid var(--gd)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}
.btn-ghost{background:transparent;color:var(--mu);border:2px solid var(--mu2)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-danger{background:transparent;color:var(--red);border:2px solid var(--redb)}
.btn-danger:hover{background:var(--redf)}
.btn-sm{padding:.5rem 1.1rem;font-size:.65rem}
.btn-xs{padding:.35rem .8rem;font-size:.6rem}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ============================================================
   STATS
   ============================================================ */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px;
  margin-bottom:2px;
}
.stat{
  background:var(--bg2);
  padding:1.8rem 1.6rem;
  border-top:3px solid transparent;
}
.stat.s-gold{border-top-color:var(--gold)}
.stat.s-grn{border-top-color:var(--grn)}
.stat.s-black{border-top-color:var(--black)}
.stat.s-mu{border-top-color:var(--mu)}
.stat.s-red{border-top-color:var(--red)}
.stat.s-amb{border-top-color:var(--amb)}
.stat-lbl{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mu);margin-bottom:.5rem;font-weight:600}
.stat-n{font-family:'Lora',serif;font-size:3rem;font-weight:600;line-height:1;color:var(--black)}
.stat-s{font-size:.8rem;color:var(--mu);margin-top:.3rem}

/* MINI STATS */
.mini-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:2.5rem}
.mstat{background:var(--bg3);padding:1rem 1.4rem;display:flex;align-items:center;justify-content:space-between}
.mstat-lbl{font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mu);font-weight:600}
.mstat-val{font-family:'Lora',serif;font-size:1.6rem;font-weight:600;color:var(--black)}

/* ============================================================
   PANELS
   ============================================================ */
.panel{background:var(--bg2);padding:1.8rem;border:1px solid var(--gd)}
.panel-h{
  font-size:.68rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--mu);
  margin-bottom:1.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:600;
}
.panels-2{display:grid;grid-template-columns:1fr 1.4fr;gap:2px;margin-bottom:2.5rem}

/* ============================================================
   TABLES
   ============================================================ */
.tbl-wrap{overflow-x:auto;border:1px solid var(--gd)}
table{width:100%;border-collapse:collapse}
th{
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mu);
  padding:.85rem 1rem;
  text-align:left;
  border-bottom:1px solid var(--gd);
  font-weight:600;
  white-space:nowrap;
  background:var(--bg3);
}
td{
  font-size:.88rem;
  padding:.9rem 1rem;
  border-bottom:1px solid var(--mu2);
  vertical-align:middle;
  color:var(--text);
}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg3)}
.empty-row td{
  text-align:center;
  padding:3.5rem;
  color:var(--mu);
  font-size:.9rem;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge{
  display:inline-block;
  padding:.2rem .6rem;
  font-size:.6rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:600;
}
.b-grn{background:var(--grnf);color:var(--grn);border:1px solid var(--grnb)}
.b-red{background:var(--redf);color:var(--red);border:1px solid var(--redb)}
.b-amb{background:var(--ambf);color:var(--amb);border:1px solid var(--ambb)}
.b-gold{background:rgba(198,169,107,.12);color:#8a6a1f;border:1px solid rgba(198,169,107,.35)}
.b-black{background:rgba(30,46,24,.08);color:var(--black);border:1px solid var(--gd)}
.b-blue{background:var(--bluef);color:var(--blue);border:1px solid var(--blueb)}
.b-mu{background:rgba(74,96,64,.08);color:var(--mu);border:1px solid rgba(74,96,64,.2)}

/* ============================================================
   FORMS
   ============================================================ */
.fld{margin-bottom:1.2rem}
.fld label{
  display:block;
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--mu);
  margin-bottom:.5rem;
  font-weight:600;
}
.fld input,
.fld select,
.fld textarea{
  width:100%;
  background:var(--bg);
  border:2px solid var(--mu2);
  color:var(--text);
  font-family:'Source Sans 3',sans-serif;
  font-size:.95rem;
  font-weight:400;
  padding:.8rem 1rem;
  outline:none;
  transition:border .3s;
  appearance:none;
}
.fld input:focus,
.fld select:focus,
.fld textarea:focus{border-color:var(--gold)}
.fld textarea{resize:vertical;min-height:120px;line-height:1.75}
.fld-hint{font-size:.75rem;color:var(--mu);margin-top:.35rem;line-height:1.6}
.fld-err{font-size:.75rem;color:var(--red);margin-top:.35rem}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.frow.f3{grid-template-columns:1fr 1fr 1fr}
.frow.f1{grid-template-columns:1fr}
.fcol-full{grid-column:1/-1}

/* COLOUR PICKER */
.colour-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem}
.colour-fld label{
  display:block;
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mu);
  margin-bottom:.5rem;
  font-weight:600;
}
.colour-input-wrap{
  display:flex;
  align-items:center;
  gap:.5rem;
  border:2px solid var(--mu2);
  background:var(--bg);
  padding:.4rem .6rem;
  transition:border .3s;
}
.colour-input-wrap:focus-within{border-color:var(--gold)}
.colour-swatch{
  width:28px;
  height:28px;
  border:none;
  padding:0;
  cursor:pointer;
  background:none;
  flex-shrink:0;
}
.colour-hex{
  flex:1;
  background:none;
  border:none;
  outline:none;
  font-family:'Source Sans 3',sans-serif;
  font-size:.85rem;
  color:var(--text);
  font-weight:500;
  letter-spacing:.05em;
}

/* TOGGLE */
.toggle-row{
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1rem 1.2rem;
  background:var(--bg2);
  border:1px solid var(--gd);
  margin-bottom:.8rem;
}
.toggle{position:relative;width:42px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:var(--mu2);
  transition:.3s;
  border-radius:22px;
}
.toggle-slider::before{
  content:'';
  position:absolute;
  height:16px;width:16px;
  left:3px;bottom:3px;
  background:#fff;
  transition:.3s;
  border-radius:50%;
}
.toggle input:checked+.toggle-slider{background:var(--gold)}
.toggle input:checked+.toggle-slider::before{transform:translateX(20px)}
.toggle-lbl{font-size:.88rem;color:var(--text)}
.toggle-lbl b{font-weight:600}

/* ============================================================
   FILTER TABS
   ============================================================ */
.ftabs{display:flex;gap:.4rem;margin-bottom:1.4rem;flex-wrap:wrap}
.ftab{
  padding:.5rem 1.2rem;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:transparent;
  border:2px solid var(--mu2);
  color:var(--mu);
  cursor:pointer;
  transition:all .3s;
  font-weight:500;
  font-family:'Source Sans 3',sans-serif;
}
.ftab.active{background:var(--black);border-color:var(--black);color:var(--bg2)}
.ftab:hover{border-color:var(--gold);color:var(--gold)}

/* SEARCH ROW */
.search-row{display:flex;gap:.6rem;margin-bottom:1.4rem;align-items:center}
.search-row input{
  flex:1;
  background:var(--bg);
  border:2px solid var(--mu2);
  color:var(--text);
  font-family:'Source Sans 3',sans-serif;
  font-size:.9rem;
  padding:.75rem 1rem;
  outline:none;
  transition:border .3s;
}
.search-row input:focus{border-color:var(--gold)}
.search-row input::placeholder{color:var(--mu)}

/* ============================================================
   NOTICE / ALERT BANNERS
   ============================================================ */
.notice{
  padding:.9rem 1.2rem;
  font-size:.85rem;
  color:var(--text);
  line-height:1.75;
  margin-bottom:1.4rem;
}
.notice-gold{background:rgba(198,169,107,.1);border-left:3px solid var(--gold)}
.notice-grn{background:var(--grnf);border-left:3px solid var(--grn);color:var(--grn)}
.notice-red{background:var(--redf);border-left:3px solid var(--red);color:var(--red)}
.notice-amb{background:var(--ambf);border-left:3px solid var(--amb);color:var(--amb)}

/* ERROR / SUCCESS INLINE */
.err-msg{
  display:none;
  color:var(--red);
  font-size:.82rem;
  padding:.7rem 1rem;
  background:var(--redf);
  border-left:3px solid var(--red);
  margin:.6rem 0;
  line-height:1.7;
}
.ok-msg{
  display:none;
  color:var(--grn);
  font-size:.82rem;
  padding:.7rem 1rem;
  background:var(--grnf);
  border-left:3px solid var(--grn);
  margin:.6rem 0;
  line-height:1.7;
}

/* ============================================================
   CARDS (generic)
   ============================================================ */
.card{
  background:var(--bg2);
  border:1px solid var(--gd);
  padding:1.6rem;
  position:relative;
  transition:border-color .3s;
}
.card:hover{border-color:rgba(198,169,107,.4)}
.card-h{
  font-family:'Lora',serif;
  font-size:1.1rem;
  font-weight:600;
  font-style:italic;
  color:var(--black);
  margin-bottom:.5rem;
}
.card-h em{color:var(--gold);font-weight:400}
.card-meta{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mu);
  margin-bottom:1rem;
  font-weight:600;
}

/* EVENT CARDS */
.event-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:2px}
.event-card{
  background:var(--bg2);
  border:1px solid var(--gd);
  padding:1.8rem;
  position:relative;
  cursor:pointer;
  transition:all .3s;
}
.event-card::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--gold);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .35s;
}
.event-card:hover::before{transform:scaleY(1)}
.event-card:hover{background:var(--bg3)}
.event-card-name{
  font-family:'Lora',serif;
  font-size:1.2rem;
  font-weight:600;
  font-style:italic;
  color:var(--black);
  margin-bottom:.4rem;
}
.event-card-meta{font-size:.78rem;color:var(--mu);line-height:1.7}
.event-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:1.2rem;
  padding-top:1rem;
  border-top:1px solid var(--gd);
}

/* ============================================================
   INVITE EDITOR
   ============================================================ */
.editor-layout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:2px;
  align-items:start;
}
.editor-form{
  background:var(--bg2);
  border:1px solid var(--gd);
}
.editor-section{
  border-bottom:1px solid var(--gd);
  padding:1.6rem;
}
.editor-section:last-child{border-bottom:none}
.editor-section-h{
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--mu);
  font-weight:700;
  margin-bottom:1.2rem;
  display:flex;
  align-items:center;
  gap:.7rem;
  cursor:pointer;
}
.editor-section-h::after{
  content:'▾';
  margin-left:auto;
  font-size:.8rem;
  transition:transform .3s;
}
.editor-section-h.collapsed::after{transform:rotate(-90deg)}
.editor-section-body{overflow:hidden;transition:all .3s}
.editor-section-body.collapsed{display:none}

/* PREVIEW PANEL */
.preview-panel{
  background:var(--bg2);
  border:1px solid var(--gd);
  position:sticky;
  top:calc(var(--topbar-h) + 1.5rem);
}
.preview-panel-h{
  padding:1rem 1.4rem;
  border-bottom:1px solid var(--gd);
  font-size:.68rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--mu);
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.preview-frame{
  width:100%;
  height:500px;
  border:none;
  display:block;
  background:var(--bg3);
}
.preview-actions{
  padding:1rem 1.4rem;
  border-top:1px solid var(--gd);
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}

/* FONT PAIRING PICKER */
.font-pairings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
  margin-top:.5rem;
}
.font-pair-opt{
  border:2px solid var(--mu2);
  padding:1rem;
  cursor:pointer;
  transition:all .3s;
  position:relative;
}
.font-pair-opt:hover{border-color:var(--gold)}
.font-pair-opt.selected{
  border-color:var(--gold);
  background:rgba(198,169,107,.06);
}
.font-pair-opt.selected::after{
  content:'✓';
  position:absolute;
  top:.4rem;right:.5rem;
  font-size:.7rem;
  color:var(--gold);
  font-weight:700;
}
.fp-name{
  font-size:.6rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mu);
  font-weight:600;
  margin-bottom:.35rem;
}
.fp-preview{
  font-size:1rem;
  color:var(--black);
  line-height:1.3;
}

/* BG UPLOAD */
.bg-upload-area{
  border:2px dashed var(--mu2);
  padding:2rem;
  text-align:center;
  cursor:pointer;
  transition:all .3s;
  position:relative;
}
.bg-upload-area:hover{border-color:var(--gold)}
.bg-upload-area input[type=file]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%;
  height:100%;
}
.bg-thumb{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
  margin-bottom:.8rem;
}
.bg-upload-lbl{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--mu);
  font-weight:600;
}
.bg-upload-hint{font-size:.75rem;color:var(--mu);margin-top:.3rem}
.bg-overlay-row{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-top:.8rem;
}
.bg-overlay-row label{
  font-size:.65rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mu);
  font-weight:600;
  white-space:nowrap;
}
.bg-overlay-row input[type=range]{flex:1}
.bg-overlay-val{
  font-size:.82rem;
  color:var(--text);
  font-weight:600;
  width:36px;
  text-align:right;
}

/* ============================================================
   CRM
   ============================================================ */
.pipeline-wrap{
  display:flex;
  gap:2px;
  overflow-x:auto;
  padding-bottom:1rem;
  align-items:flex-start;
}
.pipeline-col{
  background:var(--bg3);
  border:1px solid var(--gd);
  min-width:220px;
  flex-shrink:0;
}
.pipeline-col-h{
  padding:.8rem 1rem;
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mu);
  font-weight:700;
  border-bottom:1px solid var(--gd);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:3px solid var(--gold);
}
.pipeline-col-count{
  background:var(--bg2);
  border:1px solid var(--gd);
  font-size:.6rem;
  padding:.15rem .4rem;
  color:var(--mu);
}
.pipeline-cards{padding:.6rem;min-height:80px}
.pipeline-card{
  background:var(--bg2);
  border:1px solid var(--gd);
  padding:.9rem 1rem;
  margin-bottom:.4rem;
  cursor:pointer;
  transition:all .3s;
}
.pipeline-card:hover{border-color:var(--gold)}
.pipeline-card-name{
  font-size:.88rem;
  font-weight:600;
  color:var(--black);
  margin-bottom:.25rem;
}
.pipeline-card-meta{font-size:.72rem;color:var(--mu)}

/* ============================================================
   CONTACTS
   ============================================================ */
.contact-card{
  background:var(--bg2);
  border:1px solid var(--gd);
  padding:1.4rem;
  display:flex;
  align-items:flex-start;
  gap:1rem;
  transition:border-color .3s;
  cursor:pointer;
}
.contact-card:hover{border-color:rgba(198,169,107,.4)}
.contact-avatar{
  width:40px;
  height:40px;
  background:var(--bg3);
  border:1px solid var(--gd);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Lora',serif;
  font-size:1rem;
  font-style:italic;
  color:var(--gold);
  flex-shrink:0;
}
.contact-name{
  font-size:.95rem;
  font-weight:600;
  color:var(--black);
  margin-bottom:.2rem;
}
.contact-meta{font-size:.78rem;color:var(--mu);line-height:1.6}
.contact-tags{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.4rem}

/* ============================================================
   MODAL / DRAWER
   ============================================================ */
.modal-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(30,46,24,.55);
  z-index:500;
  align-items:center;
  justify-content:center;
  padding:2rem;
}
.modal-overlay.open{display:flex}
.modal-box{
  background:var(--bg2);
  border:1px solid var(--gd);
  width:100%;
  max-width:580px;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
}
.modal-box::before,.modal-box::after{
  content:'';
  position:absolute;
  width:12px;
  height:12px;
  border:1px solid var(--gold);
}
.modal-box::before{top:-6px;left:-6px;border-right:none;border-bottom:none}
.modal-box::after{bottom:-6px;right:-6px;border-left:none;border-top:none}
.modal-h{
  padding:1.4rem 1.6rem;
  border-bottom:1px solid var(--gd);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.modal-title{
  font-family:'Lora',serif;
  font-size:1.3rem;
  font-style:italic;
  font-weight:600;
  color:var(--black);
}
.modal-title em{color:var(--gold);font-weight:400}
.modal-close{
  background:none;
  border:none;
  cursor:pointer;
  font-size:1.1rem;
  color:var(--mu);
  transition:color .3s;
  padding:.2rem;
}
.modal-close:hover{color:var(--red)}
.modal-body{padding:1.6rem}
.modal-footer{
  padding:1.2rem 1.6rem;
  border-top:1px solid var(--gd);
  display:flex;
  gap:.6rem;
  justify-content:flex-end;
}

/* DRAWER (slides in from right) */
.drawer-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(30,46,24,.45);
  z-index:400;
}
.drawer-overlay.open{display:block}
.drawer{
  position:fixed;
  top:0;right:0;bottom:0;
  width:520px;
  background:var(--bg2);
  border-left:1px solid var(--gd);
  z-index:401;
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.drawer.open{transform:translateX(0)}
.drawer-h{
  padding:1.4rem 1.6rem;
  border-bottom:1px solid var(--gd);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-shrink:0;
}
.drawer-title{
  font-family:'Lora',serif;
  font-size:1.2rem;
  font-style:italic;
  font-weight:600;
  color:var(--black);
}
.drawer-title em{color:var(--gold);font-weight:400}
.drawer-body{flex:1;overflow-y:auto;padding:1.6rem}
.drawer-footer{
  padding:1.2rem 1.6rem;
  border-top:1px solid var(--gd);
  display:flex;
  gap:.6rem;
  flex-shrink:0;
}

/* ============================================================
   MEDIA GRID
   ============================================================ */
.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:2px;
  margin-top:1rem;
}
.media-item{
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--bg3);
}
.media-item img{width:100%;height:100%;object-fit:cover}
.media-overlay{
  position:absolute;
  inset:0;
  background:rgba(30,46,24,.75);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  opacity:0;
  transition:opacity .3s;
}
.media-item:hover .media-overlay{opacity:1}

/* ============================================================
   ACTIVITY FEED
   ============================================================ */
.activity-list{list-style:none}
.activity-item{
  display:flex;
  gap:.9rem;
  padding:.75rem 0;
  border-bottom:1px solid var(--mu2);
  align-items:flex-start;
}
.activity-item:last-child{border-bottom:none}
.activity-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--gold);
  margin-top:.5rem;
  flex-shrink:0;
}
.activity-text{font-size:.85rem;color:var(--text);line-height:1.6}
.activity-time{font-size:.68rem;color:var(--mu);margin-top:.15rem}

/* ============================================================
   PUBLISH BAR
   ============================================================ */
.publish-bar{
  background:var(--black);
  padding:1rem 1.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  position:sticky;
  bottom:0;
  border-top:1px solid rgba(198,169,107,.2);
  z-index:100;
}
.publish-bar-info{
  font-size:.78rem;
  color:rgba(248,247,244,.5);
}
.publish-bar-info strong{color:rgba(248,247,244,.85);font-weight:600}
.publish-status{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(248,247,244,.35);
  font-weight:500;
}
.pub-dot{width:7px;height:7px;border-radius:50%;background:var(--mu);flex-shrink:0}
.pub-dot.live{background:var(--grn)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .editor-layout{grid-template-columns:1fr}
  .preview-panel{position:static}
}
@media(max-width:768px){
  :root{--sidebar-w:0px}
  .sidebar{transform:translateX(-260px);transition:transform .3s}
  .sidebar.mobile-open{transform:translateX(0);--sidebar-w:260px}
  .topbar{padding:0 1rem}
  .main-content{margin-left:0;padding:1.5rem 1rem 4rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .frow{grid-template-columns:1fr}
  .colour-row{grid-template-columns:1fr 1fr}
  .panels-2{grid-template-columns:1fr}
}

/* ============================================================
   UTILITY
   ============================================================ */
.dvd{width:100%;height:1px;background:var(--gd);margin:1.5rem 0}
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.text-mu{color:var(--mu)}.text-gold{color:var(--gold)}.text-grn{color:var(--grn)}.text-red{color:var(--red)}
.text-sm{font-size:.82rem}.text-xs{font-size:.72rem}
.text-upper{font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.flex{display:flex}.flex-center{align-items:center}.flex-between{justify-content:space-between}.gap-sm{gap:.5rem}.gap-md{gap:1rem}
.w-full{width:100%}
.loading{
  display:inline-block;
  width:16px;height:16px;
  border:2px solid var(--mu2);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}