.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:40;opacity:0;transition:opacity .25s ease}
.modal-backdrop.show{opacity:1}
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50}
.modal.open{display:flex}
.modal .card{width:min(520px,100%);background:#2a2140;border:1px solid rgba(255,217,102,.5);border-radius:18px;box-shadow:var(--shadow-lg)}
.modal header{padding:16px 16px 0;font-weight:400 !important;font-size:18px; display:flex;align-items:center;justify-content:space-between}
.modal section{padding:16px;display:grid;gap:12px}
.modal footer{padding:12px 16px 16px;display:flex;justify-content:flex-end;gap:10px}
#childModalTitle{font-weight: 400 !important;}

.sheet{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;z-index:60;background:rgba(0,0,0,.45)}
.sheet.open{display:flex}
.sheet .card{width:min(720px,100%);background:#2a2140;border:1px solid rgba(255,217,102,.5);border-radius:20px;padding:10px 10px 12px;box-shadow:var(--shadow-lg); margin-bottom:3rem}
.sheet .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 10px}
.sheet .sheet-foot{display:flex;justify-content:flex-end;gap:10px;padding:10px 6px 2px;border-top:1px solid var(--border)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px; margin-bottom:16px}
.grid2 .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:12px;color:var(--muted)}
input[type=text],select,input[type=color], #agSetupPw, #agSetupYob, #agAuthPw, #agForgotNewPw, #agHardPw, #agHardQAns, #agHardYob{
  width:100%;padding:10px 12px;background:rgba(255,255,255,.08);border:1px solid var(--border);
  color:var(--text);border-radius:12px;font-size:15px;transition:border-color .2s ease; margin-top: 16px; height: 48px;
}
input[type=text]:focus,select:focus,input[type=color]:focus{outline:none;border-color:var(--accent)}

#taskSheetTitle {font-weight: 400 !important;}

/* Icon-only button with no background */
.btn-icon {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px;              /* generous hit area */
  border-radius: 10px;       /* small rounding for focus ring */
  line-height: 0;
  cursor: pointer;
  outline: none;
  transition: transform .15s ease, background-color .15s ease;
  color: inherit;            /* inherit current text color context */
}

.btn-icon .icon {
  display: block;
  width: 22px;
  height: 22px;
}

.btn-icon:hover { transform: scale(1.06); }
.btn-icon:active { transform: scale(0.96); }

/* Accessible keyboard focus (subtle) */
.btn-icon:focus-visible {
  box-shadow: 0 0 0 3px rgba(138,169,255,.35);
}

/* Align right in headers if needed */
.sheet .sheet-head .btn-icon,
.modal .card header .btn-icon {
  margin-left: auto;
}