/* ============================================================
   Demo Beauty CRM — Stylesheet
   crm/assets/crm.css
   ============================================================ */

:root {
  --primary:      #c8446b;
  --primary-dark: #a8305a;
  --primary-light:#f0a0bb;
  --secondary:    #f5c6d0;
  --accent:       #8b1a4a;
  --gold:         #c9a84c;
  --gold-light:   #f0d080;
  --text-dark:    #2c1a1a;
  --text-mid:     #5a3a3a;
  --text-light:   #9a7a7a;
  --bg-light:     #fff8f8;
  --bg-cream:     #fdf5ee;
  --bg-dark:      #1a0a0f;
  --white:        #ffffff;
  --shadow-sm:    0 2px 12px rgba(200,68,107,0.10);
  --shadow-md:    0 8px 32px rgba(200,68,107,0.15);
  --success:      #22c55e;
  --warning:      #f59e0b;
  --danger:       #ef4444;
  --info:         #3b82f6;
  --success-bg:   #f0fdf4;
  --warning-bg:   #fffbeb;
  --danger-bg:    #fef2f2;
  --info-bg:      #eff6ff;
  --sidebar-w:    250px;
  --topbar-h:     64px;
  --radius:       10px;
  --transition:   0.25s ease;
  --font-head:    'Playfair Display', Georgia, serif;
  --font-body:    'Poppins', sans-serif;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text-dark);background:#f3eef0;line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:var(--font-body)}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-body{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent) 0%,var(--primary) 60%,#f093fb 100%);
  padding:20px;
  position:relative;overflow:hidden;
}
.login-body::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 20% 50%,rgba(255,255,255,.07) 0%,transparent 50%),
             radial-gradient(circle at 80% 20%,rgba(255,200,150,.08) 0%,transparent 40%);
}
.login-box{
  position:relative;z-index:2;
  background:var(--white);border-radius:20px;
  padding:44px 40px;width:100%;max-width:420px;
  box-shadow:0 24px 72px rgba(0,0,0,.22);
}
.login-head{text-align:center;margin-bottom:30px}
.login-icon{
  width:68px;height:68px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  border-radius:18px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;color:var(--white);
  box-shadow:var(--shadow-md);
}
.login-head h1{font-family:var(--font-head);font-size:1.4rem;color:var(--text-dark);margin-bottom:4px}
.login-head p{font-size:.78rem;color:var(--text-light);letter-spacing:.4px}
.login-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--secondary);color:var(--primary-dark);
  font-size:.7rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  padding:4px 12px;border-radius:50px;margin-bottom:24px;
}

/* form */
.lf-group{margin-bottom:18px}
.lf-group label{display:block;font-size:.8rem;font-weight:600;color:var(--text-dark);margin-bottom:6px}
.lf-input-wrap{position:relative}
.lf-input-wrap .fi{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--text-light);font-size:.9rem;pointer-events:none;
}
.lf-input-wrap input{
  width:100%;padding:12px 14px 12px 38px;
  border:2px solid var(--secondary);border-radius:var(--radius);
  font-size:.9rem;color:var(--text-dark);background:var(--white);
  outline:none;transition:border-color var(--transition);
}
.lf-input-wrap input:focus{border-color:var(--primary)}
.toggle-pw{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--text-light);font-size:.9rem;
  transition:color var(--transition);
}
.toggle-pw:hover{color:var(--primary)}
.login-alert{
  display:none;background:var(--danger-bg);border:1px solid #fca5a5;
  color:var(--danger);border-radius:var(--radius);
  padding:10px 14px;font-size:.83rem;margin-bottom:16px;
  align-items:center;gap:8px;
}
.login-alert.show{display:flex}
.btn-login{
  width:100%;padding:13px;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:var(--white);border:none;border-radius:50px;
  font-size:.95rem;font-weight:600;cursor:pointer;
  transition:all var(--transition);letter-spacing:.4px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-login:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(200,68,107,.4)}
.login-hint{text-align:center;margin-top:20px;font-size:.75rem;color:var(--text-light)}
.login-hint a{color:var(--primary);font-weight:600}

/* ============================================================
   CRM LAYOUT
   ============================================================ */
.crm-wrap{display:flex;min-height:100vh}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);position:fixed;top:0;left:0;height:100vh;
  background:var(--bg-dark);display:flex;flex-direction:column;
  z-index:300;transition:transform var(--transition);overflow-y:auto;
}
.sb-head{padding:20px 16px;border-bottom:1px solid rgba(255,255,255,.06)}
.sb-logo{display:flex;align-items:center;gap:11px}
.sb-logo-icon{
  width:40px;height:40px;border-radius:11px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:var(--white);
}
.sb-logo-text .brand{font-family:var(--font-head);font-size:.9rem;color:var(--white);line-height:1.2}
.sb-logo-text .sub{font-size:.62rem;color:rgba(255,255,255,.35);letter-spacing:1px;text-transform:uppercase}

.sb-nav{flex:1;padding:16px 10px}
.sb-sec{font-size:.6rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.22);padding:0 8px;margin:18px 0 6px}
.sb-nav a{
  display:flex;align-items:center;gap:11px;
  padding:10px 10px;border-radius:9px;margin-bottom:2px;
  color:rgba(255,255,255,.55);font-size:.85rem;font-weight:500;
  transition:all var(--transition);
}
.sb-nav a i{width:18px;text-align:center;font-size:.95rem;flex-shrink:0}
.sb-nav a:hover{background:rgba(255,255,255,.06);color:var(--white)}
.sb-nav a.active{background:linear-gradient(90deg,var(--primary),var(--primary-dark));color:var(--white);box-shadow:0 4px 14px rgba(200,68,107,.3)}
.sb-badge{
  margin-left:auto;background:var(--primary);color:var(--white);
  font-size:.65rem;font-weight:700;padding:2px 7px;border-radius:50px;
}
.sb-nav a.active .sb-badge{background:rgba(255,255,255,.25)}

.sb-foot{padding:14px 10px;border-top:1px solid rgba(255,255,255,.06)}
.sb-user{
  display:flex;align-items:center;gap:10px;
  padding:9px 8px;border-radius:9px;cursor:pointer;
  transition:background var(--transition);
}
.sb-user:hover{background:rgba(255,255,255,.05)}
.sb-avatar{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:flex;align-items:center;justify-content:center;color:var(--white);font-size:.85rem;
}
.sb-uname{font-size:.82rem;font-weight:600;color:var(--white);line-height:1.2}
.sb-urole{font-size:.65rem;color:rgba(255,255,255,.35)}
.sb-logout{
  margin-left:auto;background:none;border:none;cursor:pointer;
  color:rgba(255,255,255,.28);font-size:.95rem;transition:color var(--transition);padding:4px;
}
.sb-logout:hover{color:var(--danger)}

/* ── Main ────────────────────────────────────────────────── */
.crm-main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}

/* ── Topbar ──────────────────────────────────────────────── */
.topbar{
  height:var(--topbar-h);background:var(--white);
  border-bottom:1px solid rgba(200,68,107,.08);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;position:sticky;top:0;z-index:100;
  box-shadow:var(--shadow-sm);
}
.tb-left{display:flex;align-items:center;gap:14px}
.sb-toggle{
  display:none;background:none;border:none;cursor:pointer;
  color:var(--text-mid);font-size:1.15rem;padding:6px;border-radius:8px;
  transition:all var(--transition);
}
.sb-toggle:hover{background:var(--bg-light);color:var(--primary)}
.tb-title{font-family:var(--font-head);font-size:1.1rem;color:var(--text-dark);font-weight:600}
.tb-sub{font-size:.74rem;color:var(--text-light)}
.tb-right{display:flex;align-items:center;gap:10px}
.tb-date{font-size:.78rem;color:var(--text-light)}
.tb-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 16px;border-radius:50px;font-size:.82rem;font-weight:600;
  cursor:pointer;border:none;transition:all var(--transition);
}
.tb-btn-primary{background:var(--primary);color:var(--white)}
.tb-btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.tb-btn-outline{background:transparent;color:var(--text-mid);border:1.5px solid var(--secondary)}
.tb-btn-outline:hover{border-color:var(--primary);color:var(--primary)}

/* ── Content ─────────────────────────────────────────────── */
.crm-content{padding:24px;flex:1}

/* ── Flash ───────────────────────────────────────────────── */
.flash{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:var(--radius);margin-bottom:20px;
  font-size:.87rem;font-weight:500;
}
.flash-success{background:var(--success-bg);color:#16a34a;border:1px solid #86efac}
.flash-error  {background:var(--danger-bg);color:var(--danger);border:1px solid #fca5a5}
.flash-info   {background:var(--info-bg);color:var(--info);border:1px solid #93c5fd}

/* ── Stat Cards ──────────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.stat-card{
  background:var(--white);border-radius:14px;padding:22px 20px;
  box-shadow:var(--shadow-sm);display:flex;align-items:flex-start;gap:14px;
  transition:all var(--transition);position:relative;overflow:hidden;
}
.stat-card::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:0 0 14px 14px;
}
.stat-card.c-pink::after {background:var(--primary)}
.stat-card.c-gold::after {background:var(--gold)}
.stat-card.c-green::after{background:var(--success)}
.stat-card.c-blue::after {background:var(--info)}
.stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.si{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.c-pink .si {background:var(--secondary);color:var(--primary)}
.c-gold .si {background:#fef9ee;color:var(--gold)}
.c-green .si{background:var(--success-bg);color:var(--success)}
.c-blue .si {background:var(--info-bg);color:var(--info)}
.sv{font-family:var(--font-head);font-size:1.9rem;font-weight:700;color:var(--text-dark);line-height:1;margin-bottom:3px}
.sl{font-size:.78rem;color:var(--text-light);font-weight:500}

/* ── Page Header ─────────────────────────────────────────── */
.pg-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px}
.pg-header h2{font-family:var(--font-head);font-size:1.35rem;color:var(--text-dark)}
.pg-header p{font-size:.8rem;color:var(--text-light);margin-top:2px}

/* ── Card ────────────────────────────────────────────────── */
.card{background:var(--white);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:22px}
.card-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid rgba(200,68,107,.07);
}
.card-title{
  font-family:var(--font-head);font-size:1rem;color:var(--text-dark);
  font-weight:600;display:flex;align-items:center;gap:9px;
}
.card-title i{color:var(--primary);font-size:.95rem}
.card-body{padding:0}
.card-body-p{padding:20px 22px}

/* ── Toolbar ─────────────────────────────────────────────── */
.toolbar{
  display:flex;align-items:center;gap:10px;
  padding:16px 22px;border-bottom:1px solid rgba(200,68,107,.06);
  flex-wrap:wrap;
}
.search-box{position:relative;flex:1;min-width:180px;max-width:300px}
.search-box i{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-light);font-size:.85rem}
.search-box input{
  width:100%;padding:9px 13px 9px 33px;
  border:1.5px solid var(--secondary);border-radius:50px;
  font-size:.85rem;color:var(--text-dark);background:var(--white);
  outline:none;transition:border-color var(--transition);
}
.search-box input:focus{border-color:var(--primary)}
.filter-sel{
  padding:9px 13px;border:1.5px solid var(--secondary);border-radius:50px;
  font-size:.82rem;color:var(--text-mid);background:var(--white);
  outline:none;cursor:pointer;transition:border-color var(--transition);
}
.filter-sel:focus{border-color:var(--primary)}
.ml-auto{margin-left:auto}

/* ── Table ───────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
table.crm-tbl{width:100%;border-collapse:collapse;font-size:.85rem}
.crm-tbl th{
  text-align:left;padding:10px 14px;
  font-size:.7rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-light);background:var(--bg-light);white-space:nowrap;
}
.crm-tbl td{padding:12px 14px;border-bottom:1px solid rgba(200,68,107,.06);vertical-align:middle}
.crm-tbl tr:last-child td{border-bottom:none}
.crm-tbl tr:hover td{background:#fdf6f8}
.td-name{font-weight:600;color:var(--text-dark)}
.td-phone a{color:var(--primary);font-weight:600}
.td-phone a:hover{text-decoration:underline}
.td-date{color:var(--text-light);font-size:.78rem}
.empty-tbl td{text-align:center;padding:48px;color:var(--text-light)}
.empty-tbl i{font-size:2.4rem;display:block;margin-bottom:10px;opacity:.3}

/* ── Badges ──────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:50px;font-size:.7rem;font-weight:700;text-transform:capitalize;white-space:nowrap}
.b-new       {background:var(--info-bg);color:var(--info)}
.b-contacted {background:var(--warning-bg);color:var(--warning)}
.b-converted {background:var(--success-bg);color:var(--success)}
.b-closed    {background:#f3f4f6;color:#6b7280}
.b-pending   {background:var(--warning-bg);color:var(--warning)}
.b-confirmed {background:var(--info-bg);color:var(--info)}
.b-completed {background:var(--success-bg);color:var(--success)}
.b-cancelled {background:var(--danger-bg);color:var(--danger)}

/* ── Action Buttons ──────────────────────────────────────── */
.act-btns{display:flex;gap:5px;align-items:center}
.act-btn{
  width:30px;height:30px;border:none;border-radius:7px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:.78rem;transition:all var(--transition);
}
.ab-view{background:var(--info-bg);color:var(--info)}
.ab-edit{background:var(--warning-bg);color:var(--warning)}
.ab-del {background:var(--danger-bg);color:var(--danger)}
.act-btn:hover{transform:scale(1.12)}

/* ── Pagination ──────────────────────────────────────────── */
.pagi{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 22px;border-top:1px solid rgba(200,68,107,.07);
  font-size:.78rem;color:var(--text-light);flex-wrap:wrap;gap:8px;
}
.pagi-btns{display:flex;gap:5px}
.pg{
  width:30px;height:30px;border:1.5px solid var(--secondary);border-radius:7px;
  background:var(--white);color:var(--text-mid);font-size:.8rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);text-decoration:none;
}
.pg:hover{border-color:var(--primary);color:var(--primary)}
.pg.active{background:var(--primary);color:var(--white);border-color:var(--primary)}
.pg.disabled{opacity:.35;pointer-events:none}

/* ── Modal ───────────────────────────────────────────────── */
.modal-bg{
  position:fixed;inset:0;background:rgba(26,10,15,.55);backdrop-filter:blur(3px);
  z-index:500;display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;transition:all var(--transition);
}
.modal-bg.open{opacity:1;visibility:visible}
.modal{
  background:var(--white);border-radius:18px;width:100%;max-width:520px;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 28px 72px rgba(0,0,0,.22);
  transform:scale(.96) translateY(16px);transition:transform var(--transition);
}
.modal-bg.open .modal{transform:scale(1) translateY(0)}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 26px;border-bottom:1px solid rgba(200,68,107,.08);
}
.modal-head h3{font-family:var(--font-head);font-size:1.1rem;color:var(--text-dark);display:flex;align-items:center;gap:9px}
.modal-head h3 i{color:var(--primary)}
.modal-x{
  width:32px;height:32px;background:var(--bg-light);border:none;border-radius:9px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--text-mid);font-size:.95rem;transition:all var(--transition);
}
.modal-x:hover{background:var(--danger-bg);color:var(--danger)}
.modal-body{padding:22px 26px}
.modal-foot{
  display:flex;justify-content:flex-end;gap:10px;
  padding:16px 26px;border-top:1px solid rgba(200,68,107,.08);
}

/* ── CRM Form ────────────────────────────────────────────── */
.fg{margin-bottom:16px}
.fg label{display:block;font-size:.78rem;font-weight:600;color:var(--text-dark);margin-bottom:5px}
.fg label span.req{color:var(--danger)}
.fg input,.fg select,.fg textarea{
  width:100%;padding:10px 13px;
  border:1.5px solid var(--secondary);border-radius:var(--radius);
  font-size:.88rem;color:var(--text-dark);background:var(--white);
  outline:none;transition:border-color var(--transition);
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--primary)}
.fg textarea{resize:vertical;min-height:80px}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 20px;border-radius:50px;font-size:.85rem;font-weight:600;
  cursor:pointer;border:none;transition:all var(--transition);
}
.btn-primary{background:var(--primary);color:var(--white)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-secondary{background:var(--bg-light);color:var(--text-mid);border:1.5px solid var(--secondary)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}
.btn-danger{background:var(--danger-bg);color:var(--danger);border:1.5px solid #fca5a5}
.btn-danger:hover{background:var(--danger);color:var(--white)}
.btn-success{background:var(--success-bg);color:var(--success);border:1.5px solid #86efac}
.btn-success:hover{background:var(--success);color:var(--white)}
.btn-sm{padding:7px 14px;font-size:.78rem}

/* ── Detail View ─────────────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.df label{font-size:.68rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-light);display:block;margin-bottom:3px}
.df p{font-size:.88rem;color:var(--text-dark);font-weight:500}
.df.full{grid-column:1/-1}
.dhr{grid-column:1/-1;border:none;border-top:1px solid rgba(200,68,107,.08);margin:4px 0}

/* ── Dashboard mini activity ─────────────────────────────── */
.act-list{display:flex;flex-direction:column}
.act-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 0;border-bottom:1px solid rgba(200,68,107,.06);
}
.act-item:last-child{border-bottom:none}
.act-ico{
  width:34px;height:34px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.82rem;
}
.ai-lead{background:var(--info-bg);color:var(--info)}
.ai-appt{background:var(--success-bg);color:var(--success)}
.ai-conv{background:var(--secondary);color:var(--primary)}
.act-txt strong{font-size:.85rem;color:var(--text-dark);font-weight:600;display:block}
.act-txt span{font-size:.76rem;color:var(--text-light)}
.act-time{font-size:.72rem;color:var(--text-light);white-space:nowrap;margin-left:auto;padding-top:2px}

/* ── Content grid ────────────────────────────────────────── */
.dash-grid{display:grid;grid-template-columns:3fr 2fr;gap:20px;margin-bottom:22px}

/* ── Breakdown bars ──────────────────────────────────────── */
.breakdown{display:flex;flex-direction:column;gap:11px;padding:16px 22px}
.bk-row{display:flex;align-items:center;gap:10px}
.bk-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.bk-label{width:80px;font-size:.8rem;color:var(--text-mid);font-weight:500;flex-shrink:0}
.bk-bar-wrap{flex:1;background:var(--bg-light);border-radius:50px;height:6px;overflow:hidden}
.bk-bar{height:100%;border-radius:50px;transition:width .6s ease}
.bk-count{font-size:.78rem;font-weight:700;color:var(--text-dark);min-width:22px;text-align:right}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:1100px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .dash-grid{grid-template-columns:1fr}
}
@media(max-width:860px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .crm-main{margin-left:0}
  .sb-toggle{display:flex}
  .sb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:299;display:none}
  .sb-overlay.show{display:block}
}
@media(max-width:600px){
  .stat-grid{grid-template-columns:1fr 1fr}
  .crm-content{padding:14px}
  .topbar{padding:0 14px}
  .tb-date{display:none}
  .detail-grid{grid-template-columns:1fr}
  .fg-row{grid-template-columns:1fr}
  .pg-header{flex-direction:column;align-items:flex-start}
}
@media(max-width:420px){
  .stat-grid{grid-template-columns:1fr}
  .login-box{padding:30px 22px}
}

/* ── Tooltip ─────────────────────────────────────────────── */
[data-tip]{position:relative;cursor:default}
[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);background:var(--text-dark);color:var(--white);
  font-size:.72rem;padding:4px 9px;border-radius:6px;white-space:nowrap;z-index:10;
}

/* ── Delete confirm ──────────────────────────────────────── */
.del-modal{max-width:380px;text-align:center}
.del-modal .del-ico{
  width:60px;height:60px;background:var(--danger-bg);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:var(--danger);margin:0 auto 16px;
}
.del-modal h3{font-family:var(--font-head);font-size:1.2rem;margin-bottom:8px}
.del-modal p{font-size:.85rem;color:var(--text-mid)}