@font-face{font-family:"Bebas Neue";src:url("../fonts/BebasNeue-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Manrope";src:url("../fonts/Manrope-Variable.woff2") format("woff2");font-weight:200 800;font-display:swap;}
@font-face{font-family:"Kaushan Script";src:url("../fonts/KaushanScript-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"GT Walsheim Pro";src:url("../fonts/GTWalsheimPro-Regular.woff2") format("woff2"),url("../fonts/GTWalsheimPro-Regular.otf") format("opentype");font-weight:400;font-display:swap;}

:root{
  --ink:#17131A; --ink-2:#221A28; --ink-3:#2C2233; --ink-line:#382B41;
  --cream:#F4ECE0; --cream-dim:rgba(244,236,224,.60); --cream-faint:rgba(244,236,224,.38);
  --pink:#E8375A; --gold:#F2B705; --lilac:#A87BF0; --teal:#2FB6A8; --blue:#2D6BF0;
  --ok:#3FBF87; --red:#F2545B;
  --ctl:44px;
  --display:"Bebas Neue",Impact,sans-serif;
  --body:"GT Walsheim Pro","Manrope",system-ui,-apple-system,sans-serif;
}

/* ---- LIGHT THEME (toggled via html.light, shared key mama_theme) ---- */
html.light{
  --ink:#F5F1EA; --ink-2:#FFFFFF; --ink-3:#EFE8DD; --ink-line:#E4DBCE;
  --cream:#241C2B; --cream-dim:rgba(36,28,43,.62); --cream-faint:rgba(36,28,43,.40);
}
html.light body::before{background:radial-gradient(110% 60% at 85% -10%,rgba(232,55,90,.10),transparent 55%);}
html.light select.inp{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23241C2B' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
html.light input[type=time]::-webkit-calendar-picker-indicator{filter:none;opacity:.5;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);background:var(--ink);color:var(--cream);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.5;}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(110% 60% at 85% -10%,rgba(232,55,90,.18),transparent 55%);}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:15px;}
a{color:var(--pink);text-decoration:none;}
.wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:20px 22px 60px;}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--ink-line);}
.brand{display:flex;align-items:baseline;gap:12px;}
.brand .mama{font-family:"Kaushan Script",cursive;color:var(--pink);font-size:30px;line-height:1;}
.brand .sub{font-family:var(--display);letter-spacing:.18em;font-size:15px;}
.top .home{font-family:var(--display);letter-spacing:.12em;font-size:13px;color:var(--cream-dim);}
.top .home:hover{color:var(--pink);}
.top-right{display:flex;align-items:center;gap:16px;}
.theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--ink-line);background:var(--ink-2);color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:.2s;flex:0 0 auto;}
.theme-toggle:hover{border-color:var(--pink);color:var(--pink);transform:rotate(12deg);}
.theme-toggle svg{width:20px;height:20px;}

/* control bar — every control is exactly --ctl tall */
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 22px;}
.monthnav{display:flex;align-items:center;gap:10px;}
.monthnav button{height:var(--ctl);width:var(--ctl);border-radius:11px;background:var(--ink-2);border:1px solid var(--ink-line);color:var(--cream);font-size:20px;display:grid;place-items:center;transition:.2s;}
.monthnav button:hover{background:var(--ink-3);}
.monthnav .lbl{font-family:var(--display);letter-spacing:.06em;font-size:30px;min-width:200px;text-align:center;}
.seg{height:var(--ctl);display:flex;gap:5px;background:var(--ink-2);border:1px solid var(--ink-line);border-radius:12px;padding:5px;}
.seg button{height:calc(var(--ctl) - 12px);display:inline-flex;align-items:center;font-family:var(--display);letter-spacing:.12em;font-size:15px;padding:0 18px;border-radius:8px;color:var(--cream-dim);transition:.2s;}
.seg button.on{background:var(--pink);color:#fff;}
.spacer{margin-left:auto;}
.btn{height:var(--ctl);display:inline-flex;align-items:center;font-family:var(--display);letter-spacing:.1em;font-size:15px;padding:0 20px;border-radius:11px;transition:.2s;}
.btn-money{background:var(--ink-2);border:1px solid var(--ink-line);color:var(--cream);}
.btn-money:hover{border-color:var(--gold);}
.btn-money.on{background:var(--gold);color:#241C2B;border-color:var(--gold);}
.btn-new{background:var(--pink);color:#fff;}
.btn-new:hover{filter:brightness(1.08);}

/* ---------- calendar ---------- */
.banners{display:flex;flex-direction:column;gap:7px;margin-bottom:12px;}
.banner-pill{display:flex;align-items:center;gap:10px;background:var(--ink-2);border:1px solid var(--ink-line);border-left:5px solid var(--accent,var(--pink));border-radius:10px;padding:9px 14px;cursor:pointer;transition:.15s;}
.banner-pill:hover{background:var(--ink-3);}
.banner-pill .bt{font-family:var(--display);letter-spacing:.05em;font-size:17px;}
.banner-pill .br{color:var(--cream-dim);font-size:13px;margin-left:auto;}
.cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
.cal-head{margin-bottom:8px;}
.cal-head div{font-family:var(--display);letter-spacing:.14em;font-size:13px;color:var(--cream-faint);text-align:center;}
.cal-grid{grid-auto-rows:minmax(108px,auto);}
.cell{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:.15s;overflow:hidden;}
.cell:hover{border-color:var(--ink-3);background:var(--ink-3);}
.cell.dim{opacity:.4;} .cell.today{border-color:var(--pink);}
.cell-top{display:flex;align-items:center;gap:6px;margin-bottom:2px;}
.cell .num{font-family:var(--display);font-size:17px;color:var(--cream-dim);margin-left:auto;}
.co-tag{font-family:var(--display);letter-spacing:.05em;font-size:11px;color:#fff;background:var(--red);padding:2px 8px;border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72%;}
.cell.today .num{color:var(--pink);}
.chip{display:flex;align-items:center;gap:6px;background:var(--ink);border-radius:7px;padding:4px 7px;font-size:12px;line-height:1.25;transition:.15s;}
.chip:hover{transform:translateX(2px);}
.chip .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;}
.chip .ct{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chip .tm{color:var(--cream-dim);font-size:11px;margin-left:auto;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.more{font-size:11px;color:var(--cream-faint);padding-left:4px;}

/* ---------- list view ---------- */
.list-tools{display:flex;justify-content:flex-end;margin-bottom:12px;}
.listtbl{width:100%;border-collapse:collapse;}
.listtbl th{font-family:var(--display);letter-spacing:.1em;font-size:13px;color:var(--cream-faint);text-align:left;padding:9px 12px;border-bottom:2px solid var(--ink-line);}
.listtbl th.r{text-align:right;}
.listtbl td{padding:9px 12px;border-bottom:1px solid var(--ink-line);font-size:14px;vertical-align:top;}
.listtbl td.day{font-family:var(--display);letter-spacing:.08em;color:var(--cream-dim);width:56px;}
.listtbl td.date{font-family:var(--display);font-size:15px;letter-spacing:.02em;color:var(--cream);width:112px;white-space:nowrap;}
.listtbl tr.theme td.date{white-space:normal;font-size:13px;}
.listtbl td.cost{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.listtbl tr.wknd td.day,.listtbl tr.wknd td.date{color:var(--cream-faint);}
.listtbl tr.has:hover td{background:var(--ink-2);cursor:pointer;}
.listtbl tr.theme td{background:rgba(232,55,90,.10);}
.listtbl tr.theme .act{font-family:var(--display);letter-spacing:.06em;font-size:18px;}
.act .dotname{display:flex;align-items:center;gap:8px;}
.act .dotname .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.act .meta{color:var(--cream-dim);}
.note{color:var(--cream-dim);font-size:13px;}
.empty-act{color:var(--cream-faint);}

/* status pills */
.pill{display:inline-block;font-family:var(--display);letter-spacing:.06em;font-size:12px;padding:3px 9px;border-radius:999px;border:1px solid;white-space:nowrap;}
.pill.planned{color:var(--ok);border-color:var(--ok);}                 /* green — planned/locked in */
.pill.confirmed{color:var(--gold);border-color:var(--gold);}          /* yellow — to be confirmed */
.pill.cancelled{color:var(--red);border-color:var(--red);text-decoration:line-through;}  /* red */
.pill.done{color:var(--lilac);border-color:var(--lilac);}             /* past = done (auto) */

/* ---------- money view ---------- */
.budget{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:18px;padding:20px 22px;margin-bottom:20px;}
.budget-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.budget .k{font-family:var(--display);letter-spacing:.14em;font-size:13px;color:var(--cream-dim);}
.budget .big{font-family:var(--display);font-size:42px;line-height:1;}
.budget .edit{font-size:15px;color:var(--cream-faint);margin-left:8px;}
.budget .edit:hover{color:var(--pink);}
.budget .rem{text-align:right;} .budget .rem .n{font-family:var(--display);font-size:30px;}
.track{height:12px;background:var(--ink);border:1px solid var(--ink-line);border-radius:999px;overflow:hidden;margin:16px 0 10px;}
.track .fill{height:100%;background:var(--pink);border-radius:999px;transition:width .4s;}
.track .fill.over{background:var(--red);}
.budget-foot{display:flex;flex-wrap:wrap;gap:18px;font-size:13.5px;color:var(--cream-dim);}
.budget-foot b{color:var(--cream);}
.pos{color:var(--ok);} .neg{color:var(--red);}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:6px;}
.card{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:16px;padding:16px 18px;position:relative;overflow:hidden;}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent,var(--pink));}
.card .k{font-family:var(--display);letter-spacing:.14em;font-size:12px;color:var(--cream-dim);}
.card .v{font-family:var(--display);font-size:34px;margin-top:3px;}
.card.plan{--accent:var(--cream);}
.card.inv{--accent:var(--ok);} .card.inv .v{color:var(--ok);}
.card.out{--accent:var(--pink);} .card.out .v{color:var(--pink);}

.section-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:26px 0 12px;}
.section-h h3{font-family:var(--display);letter-spacing:.08em;font-size:22px;font-weight:400;}
.copybtn{height:var(--ctl);display:inline-flex;align-items:center;font-family:var(--display);letter-spacing:.1em;font-size:13px;background:var(--ink-2);border:1px solid var(--ink-line);color:var(--cream);padding:0 16px;border-radius:11px;transition:.2s;}
.copybtn:hover{background:var(--ink-3);border-color:var(--pink);}

table.money-tbl{width:100%;border-collapse:collapse;}
.money-tbl th{font-family:var(--display);letter-spacing:.08em;font-size:13px;color:var(--cream-faint);text-align:left;padding:8px 10px;border-bottom:1px solid var(--ink-line);}
.money-tbl th.r,.money-tbl td.r{text-align:right;}
.money-tbl td{padding:11px 10px;border-bottom:1px solid var(--ink-line);font-size:14.5px;}
.money-tbl tr.clk{cursor:pointer;} .money-tbl tr.clk:hover td{background:var(--ink-2);}
.dotname{display:flex;align-items:center;gap:8px;} .dotname .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.money{font-variant-numeric:tabular-nums;} .out-pos{color:var(--pink);font-weight:700;} .out-zero{color:var(--cream-faint);}
.subtable td{font-size:14px;color:var(--cream-dim);}
.empty{text-align:center;color:var(--cream-faint);padding:40px;font-size:15px;}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(10,7,12,.72);backdrop-filter:blur(3px);z-index:50;display:none;align-items:flex-start;justify-content:center;padding:28px 16px;overflow-y:auto;}
.overlay.show{display:flex;}
.modal{background:var(--ink-2);border:1px solid var(--ink-line);border-radius:20px;width:100%;max-width:560px;padding:24px;box-shadow:0 30px 80px -20px #000;}
.modal h2{font-family:var(--display);letter-spacing:.04em;font-size:28px;font-weight:400;margin-bottom:18px;}
.modal h2 .em{color:var(--pink);}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.field{margin-bottom:12px;} .field.full{grid-column:1/-1;}
label{display:block;font-family:var(--display);letter-spacing:.1em;font-size:12px;color:var(--cream-dim);margin-bottom:5px;}
.inp{width:100%;background:var(--ink);border:1px solid var(--ink-line);border-radius:10px;padding:10px 12px;color:var(--cream);outline:none;transition:.15s;}
.inp:focus{border-color:var(--pink);}
textarea.inp{resize:vertical;min-height:60px;}

/* dropdowns styled to match the app (no OS default look) */
select.inp{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23F4ECE0' stroke-opacity='.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px 8px;
}
select.inp:focus{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23E8375A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");}
select.inp option{background:var(--ink-2);color:var(--cream);}
/* native time-picker glyphs tinted to match */
input[type=time]::-webkit-calendar-picker-indicator{filter:invert(.85) sepia(.1);cursor:pointer;opacity:.6;}
input[type=time]:hover::-webkit-calendar-picker-indicator{opacity:1;}

.toggle{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--cream-dim);cursor:pointer;}
.toggle input{width:18px;height:18px;accent-color:var(--pink);}
#repeatBlock{border-top:1px solid var(--ink-line);margin-top:6px;padding-top:14px;margin-bottom:12px;}
#repeatBlock .hint{font-size:11px;color:var(--cream-faint);margin-top:6px;}
.inv-list{border-top:1px solid var(--ink-line);margin-top:6px;padding-top:14px;}
.inv-row{display:flex;align-items:center;gap:8px;background:var(--ink);border:1px solid var(--ink-line);border-radius:10px;padding:9px 11px;margin-bottom:8px;font-size:13.5px;flex-wrap:wrap;}
.inv-row .amt{font-family:var(--display);font-size:17px;}
.inv-row .st{font-family:var(--display);letter-spacing:.05em;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--ink-line);color:var(--cream-dim);}
.inv-row .st.recv{color:var(--ok);border-color:var(--ok);}
.inv-row .grow{flex:1;color:var(--cream-dim);}
.inv-row button{color:var(--cream-faint);font-size:16px;} .inv-row button:hover{color:var(--pink);}
.mini{font-family:var(--display);letter-spacing:.08em;font-size:13px;color:var(--pink);padding:6px 0;}
.modal-actions{display:flex;gap:10px;margin-top:20px;align-items:center;}
.modal-actions .save{flex:1;background:var(--pink);color:#fff;font-family:var(--display);letter-spacing:.1em;font-size:16px;height:var(--ctl);border-radius:11px;transition:.2s;}
.modal-actions .save:hover{filter:brightness(1.08);}
.modal-actions .cancel{color:var(--cream-dim);height:var(--ctl);padding:0 16px;font-family:var(--display);letter-spacing:.08em;}
.modal-actions .del{color:var(--pink);height:var(--ctl);padding:0 14px;font-family:var(--display);letter-spacing:.08em;margin-right:auto;}

/* gate + toast */
.gate{position:fixed;inset:0;background:var(--ink);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;}
.gate .box{max-width:360px;text-align:center;}
.gate .mama{font-family:"Kaushan Script",cursive;color:var(--pink);font-size:64px;line-height:1;}
.gate .sub{font-family:var(--display);letter-spacing:.18em;font-size:15px;}
.gate p{color:var(--cream-dim);margin:6px 0 20px;}
.gate .inp{margin-bottom:12px;text-align:center;}
.gate .err{color:var(--pink);font-size:13px;min-height:18px;margin-top:8px;}
.gate .save{width:100%;background:var(--pink);color:#fff;font-family:var(--display);letter-spacing:.1em;font-size:16px;height:var(--ctl);border-radius:11px;}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--cream);color:var(--ink);font-weight:700;padding:12px 22px;border-radius:12px;z-index:120;opacity:0;transition:.25s;pointer-events:none;font-size:14px;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

@media (max-width:760px){
  .cards{grid-template-columns:1fr;} .grid2{grid-template-columns:1fr;}
  .cal-grid{grid-auto-rows:minmax(78px,auto);}
  .monthnav .lbl{font-size:24px;min-width:140px;} .spacer{width:100%;height:0;margin:0;}
  .listtbl td.note,.listtbl th.note{display:none;}
}


/* ===== day markers ===== */
.btn-mark{background:var(--ink-2);border:1px solid var(--ink-line);color:var(--cream);}
.btn-mark:hover{border-color:var(--pink);}
/* calendar marker pills */
.mk{display:flex;align-items:center;gap:6px;border-radius:6px;padding:3px 7px;font-size:11px;line-height:1.25;margin-bottom:3px;background:var(--mkt);border-left:3px solid var(--mkc);color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.mk .mkdot{width:7px;height:7px;border-radius:50%;background:var(--mkc);flex:0 0 auto;}
.mk.dj_request{--mkc:#2D6BF0;--mkt:rgba(45,107,240,.16);}
.mk.dj_booked {--mkc:#3FBF87;--mkt:rgba(63,191,135,.16);}
.mk.closeout  {--mkc:#F2545B;--mkt:rgba(242,84,91,.16);}
.cell.closeout{background:rgba(242,84,91,.07);border-color:rgba(242,84,91,.4);}
html.light .cell.closeout{background:rgba(242,84,91,.09);}
/* list marker rows */
.listtbl tr.mkrow.closeout   td{background:rgba(242,84,91,.07);}
.listtbl tr.mkrow.dj_request td{background:rgba(45,107,240,.06);}
.listtbl tr.mkrow.dj_booked  td{background:rgba(63,191,135,.06);}
.mk-inline{display:inline-flex;align-items:center;gap:8px;font-weight:600;}
.mk-inline .mkdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.mk-inline.dj_request{color:#5b8bf5;} .mk-inline.dj_request .mkdot{background:#2D6BF0;}
.mk-inline.dj_booked {color:var(--ok);} .mk-inline.dj_booked .mkdot{background:#3FBF87;}
.mk-inline.closeout  {color:#f2626a;} .mk-inline.closeout .mkdot{background:#F2545B;}
.pill.mk-dj_request{color:#5b8bf5;border-color:#2D6BF0;}
.pill.mk-dj_booked {color:var(--ok);border-color:var(--ok);}
.pill.mk-closeout  {color:#f2626a;border-color:#F2545B;}
/* marker modal type choices */
.mk-choices{display:flex;flex-direction:column;gap:8px;}
.mk-choice{text-align:left;padding:11px 14px;border-radius:10px;border:1px solid var(--ink-line);background:var(--ink);color:var(--cream-dim);font-family:var(--body);font-size:14px;display:flex;align-items:center;gap:10px;transition:.15s;cursor:pointer;}
.mk-choice::before{content:"";width:13px;height:13px;border-radius:50%;flex:0 0 auto;}
.mk-choice.dj_request::before{background:#2D6BF0;}
.mk-choice.dj_booked::before{background:#3FBF87;}
.mk-choice.closeout::before{background:#F2545B;}
.mk-choice.on{border-color:var(--pink);color:var(--cream);background:var(--ink-2);}


/* commercial DJ (to invoice to client) */
.comm-total{font-family:var(--display);font-size:28px;letter-spacing:.02em;color:#3FBF87;}
.comm-note{font-size:12.5px;color:var(--cream-faint);margin-top:8px;}


/* typed DD/MM/YYYY date fields with calendar button */
.datefield{position:relative;}
.datefield .inp.dtext{width:100%;padding-right:44px;}
.datefield .dpick{position:absolute;right:18px;bottom:8px;width:1px;height:1px;opacity:0;border:0;padding:0;margin:0;pointer-events:none;}
.dbtn{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;background:none;border:0;color:var(--cream-dim);cursor:pointer;border-radius:8px;transition:.15s;}
.dbtn:hover{color:var(--pink);background:var(--ink-3);}
.dbtn svg{width:17px;height:17px;}


/* commercial activation indicators */
.client-tag{font-family:var(--display);letter-spacing:.05em;font-size:10px;color:#3FBF87;border:1px solid #3FBF87;border-radius:999px;padding:1px 6px;margin-left:6px;white-space:nowrap;}
.src-tag{font-family:var(--display);letter-spacing:.05em;font-size:10px;color:var(--cream-faint);border:1px solid var(--ink-line);border-radius:999px;padding:1px 6px;margin-left:6px;}


/* settings modal rows */
.setrow{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.setrow .inp{flex:1;}
.cswatch{width:40px;height:40px;padding:2px;border:1px solid var(--ink-line);border-radius:9px;background:var(--ink);cursor:pointer;flex:0 0 auto;}
.delx{width:36px;height:36px;flex:0 0 auto;border-radius:9px;border:1px solid var(--ink-line);background:var(--ink);color:var(--cream-dim);font-size:19px;line-height:1;cursor:pointer;transition:.15s;}
.delx:hover{border-color:var(--red);color:var(--red);}
#setBtn{font-size:18px;}