/* ─── BUTTONS — unified ripple system ─── */
.btn{
  border:none;border-radius:var(--r-pill);  /* pill = softer iOS 26 */
  padding:0 22px;height:50px;   /* above 44pt minimum */
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.875rem;
  cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s;
  display:inline-flex;align-items:center;justify-content:center;
  gap:6px;min-height:46px;letter-spacing:.01em;
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent
}
/* ripple layer on every .btn */
.btn::after{
  content:'';position:absolute;inset:0;
  background:rgba(0,0,0,0.08);opacity:0;
  transition:opacity .12s;border-radius:inherit
}
.btn:active{transform:scale(.96)}
.btn:active::after{opacity:1}

.btn-teal{background:linear-gradient(160deg,#22D477,#1AAF6C);color:#fff;box-shadow:0 4px 14px rgba(26,175,108,.4);}
.btn-teal:hover{background:var(--teal-d)}
.btn-teal:active{background:var(--teal-d);box-shadow:0 2px 8px rgba(26,175,108,.20)}
.btn-teal:disabled{opacity:.42;cursor:not-allowed;transform:none;box-shadow:none}
.btn-teal::after{background:rgba(255,255,255,.18)}

.btn-ghost{
  background:var(--fill2);color:var(--text);
  border:none;
}
.btn-ghost:active{background:var(--fill);}

.btn-coral{
  background:rgba(255,59,48,.12);color:var(--red);border:none;
}
.btn-coral:active{background:rgba(255,59,48,.18);}

.btn-wa{
  background:linear-gradient(160deg,#2BE571 0%,#25D366 100%);
  color:#fff;box-shadow:0 4px 14px rgba(37,211,102,.32);
}
.btn-wa:active{background:#1dba59;}

.btn-sm{padding:0 16px;font-size:0.8125rem;height:36px;min-height:36px;border-radius:var(--r-pill)}
.btn-full{width:100%}
.btn-pill{border-radius:var(--r-pill)}

/* inline small icon-buttons (Struk, Hapus etc) also get tap feedback */
.btn-del{
  padding:5px 11px;border-radius:var(--r-pill);background:rgba(255,59,48,.1);
  border:1px solid rgba(255,59,48,.2);font-size:0.65rem;font-weight:700;color:var(--red);
  cursor:pointer;transition:background .12s,transform .1s;white-space:nowrap;
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent
}
.btn-del:active{transform:scale(.94);background:rgba(255,59,48,.18)}

.add-btn{
  width:36px;height:36px;border-radius:var(--r-pill);background:var(--teal);
  border:none;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:transform .12s,box-shadow .12s;
  box-shadow:0 4px 14px rgba(46,196,182,.35);
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent
}
.add-btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.18);opacity:0;transition:opacity .12s;border-radius:inherit}
.add-btn:active{transform:scale(.91);box-shadow:0 2px 6px rgba(26,175,108,.2)}
.add-btn:active::after{opacity:1}
.add-btn svg{width:18px;height:18px;stroke:#fff;stroke-width:2.5;position:relative;z-index:1}

/* ─── GROUP SELECTOR — custom trigger ─── */
.grp-sel-bar{
  margin:0 20px 16px;background:var(--white);border-radius:var(--r-sm);
  border:1.5px solid var(--border);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:10px;padding:4px 14px;
  cursor:pointer;transition:border-color .15s;
  -webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;
}
.grp-sel-bar::after{content:'';position:absolute;inset:0;background:var(--teal);opacity:0;transition:opacity .12s}
.grp-sel-bar:active::after{opacity:.05}
.grp-sel-bar .sel-ico{width:18px;height:18px;stroke:var(--teal);flex-shrink:0;fill:none;position:relative;z-index:1}
.grp-sel-trigger{flex:1;padding:11px 0;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:0.88rem;color:var(--text);user-select:none;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.grp-sel-trigger.ph{color:var(--text3)}
.grp-sel-caret{width:16px;height:16px;stroke:var(--text3);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none;flex-shrink:0;transition:transform .2s;position:relative;z-index:1}
.grp-sel-bar.open .grp-sel-caret{transform:rotate(180deg)}
.grp-sel-bar select{display:none}

/* ─── PICKER BOTTOM SHEET ─── */
.picker-overlay{display:none;position:fixed;inset:0;z-index:1500;background:rgba(28,38,54,.45);align-items:flex-end;justify-content:center}
.picker-overlay.open{display:flex}
.picker-sheet{background:var(--white);border-radius:28px 28px 0 0;width:100%;max-width:600px;max-height:72vh;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .28s cubic-bezier(.34,1.1,.64,1);padding-top:24px}
.picker-drag{width:38px;height:5px;border-radius:100px;background:rgba(120,120,128,0.3);margin:0 auto 22px;flex-shrink:0}
.picker-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 20px 20px;border-bottom:1px solid var(--border);flex-shrink:0}
.picker-title{margin:0;font-weight:800;font-size:1.125rem;color:var(--text);letter-spacing:-0.025em}
.picker-x{width:30px;height:30px;border-radius:50%;background:rgba(120,120,128,.16);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .1s;-webkit-tap-highlight-color:transparent}
.picker-x svg{width:12px;height:12px;stroke:var(--text2);stroke-width:3;fill:none}
.picker-x:active{background:rgba(120,120,128,.28)}
.picker-list{overflow-y:auto;flex:1;padding:6px 0 calc(env(safe-area-inset-bottom)+8px)}
.picker-row{display:flex;align-items:center;gap:12px;padding:12px var(--margin);min-height:52px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .1s;}
.picker-row:active{background:var(--fill)}
.picker-row-ico{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:0.95rem;font-weight:800}
.picker-row-name{font-weight:700;font-size:0.9rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-row-meta{font-size:0.7rem;color:var(--text3);margin-top:1px;font-weight:500}
.picker-check{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s}
.picker-check.on{background:var(--teal);border-color:var(--teal)}
.picker-check svg{display:none;width:11px;height:11px;stroke:#fff;stroke-width:3}
.picker-check.on svg{display:block}
.picker-empty{padding:40px 20px;text-align:center;color:var(--text3);font-size:0.875rem;font-weight:500}

/* ─── NOMINAL FORMAT INPUT ─── */
.nominal-wrap{position:relative;display:flex;align-items:center}
.nominal-prefix{position:absolute;left:14px;font-size:.9375rem;font-weight:400;color:var(--text2);pointer-events:none;z-index:1;transition:color .15s;}
.dark-mode .nominal-prefix{color:var(--text2);}
input.nominal-inp{
  width:100%;background:var(--bg);border:none;
  border-radius:var(--r-sm);padding:11px 14px 11px 46px;
  font-family:-apple-system,'Plus Jakarta Sans',sans-serif;
  font-size:.9375rem;color:var(--text);outline:none;transition:background .15s;
}
input.nominal-inp::placeholder{color:var(--text3)}
input.nominal-inp:focus{background:var(--bg2);outline:3px solid rgba(26,175,108,.25);}
.dark-mode input.nominal-inp{background:#2C2C2E;color:var(--text);}
.dark-mode input.nominal-inp:focus{background:#3A3A3C;}

/* ─── SPIN DURATION PILLS ─── */
.dur-label{font-size:0.68rem;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;display:block;text-align:left}
.dur-pills{
  display:flex;gap:2px;
  background:rgba(118,118,128,.1);
  border-radius:12px;padding:3px;
  margin-bottom:20px;
}
.dark-mode .dur-pills{background:rgba(118,118,128,.22);}
.dur-pill{
  flex:1;padding:9px 4px;
  border-radius:9px;
  font-family:-apple-system,'Plus Jakarta Sans',sans-serif;
  font-weight:400;font-size:.875rem;
  border:none;background:transparent;color:var(--text2);
  cursor:pointer;transition:all .15s;
  -webkit-tap-highlight-color:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:52px;
}
.dur-pill:active{opacity:.7}
.dur-pill svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.5;fill:none;margin-bottom:1px}
.dur-pill.active{
  background:#fff;color:var(--teal);font-weight:600;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.dark-mode .dur-pill.active{background:#3A3A3C;}

/* ─── MODAL ─── */
.modal-overlay, .modal-ov{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  z-index:9000;align-items:flex-end;justify-content:center;
}
.modal-overlay.open, .modal-ov.active{display:flex}
.modal, .modal-box{
  background:var(--bg2);
  border-radius:28px 28px 0 0;
  padding:24px var(--margin) max(32px,env(safe-area-inset-bottom));
  width:100%;max-width:600px;
  max-height:92vh;overflow-y:auto;
  box-shadow:0 -1px 0 rgba(0,0,0,.06),0 -8px 30px rgba(0,0,0,.12);
  animation:slideUp .25s cubic-bezier(.4,0,.2,1);will-change:transform;
  position:relative;
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.modal-ov.active .modal-box { transform: translateY(0); }
.modal-ov:not(.active) .modal-box { transform: translateY(100%); }
@keyframes slideUp{from{transform:translateY(100%);opacity:.6}to{transform:translateY(0);opacity:1}}

/* iOS 26 drag handle — centered, thicker, softer */
.modal-drag{
  width:38px;height:5px;border-radius:100px;
  background:rgba(120,120,128,0.3);
  margin:0 auto 22px;
  flex-shrink:0;
}

/* Modal header with perfectly centered title and 'x' button */
.modal-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:20px;
  min-height:30px; /* aligns with button height */
}
.modal-title{
  margin:0;padding:0;
  font-weight:700;font-size:1.125rem;color:var(--text);
  letter-spacing:-0.025em;
  line-height:1.2;
  text-align:center; /* Default to center for confirmation modals */
}
.modal-hdr .modal-title {
  text-align:left; /* Align left in headers with buttons */
}

/* iOS 26 close button — centered circle */
.modal-close, .picker-x{
  width:30px;height:30px;border-radius:50%;
  background:rgba(120,120,128,.16);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .1s;
  -webkit-tap-highlight-color:transparent;
  flex-shrink:0;
}
.modal-close svg, .picker-x svg{width:12px;height:12px;stroke:var(--text2);stroke-width:3}
.modal-close:active, .picker-x:active{background:rgba(120,120,128,.28);}

/* ─── FORMS ─── */
.form-grp{margin-bottom:14px}
.form-lbl{
  font-size:.6875rem;    /* 11pt */
  font-weight:400;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:8px;display:block;
  padding-left:4px;
  font-family:-apple-system,sans-serif;
}
.form-input{
  width:100%;
  background:var(--bg);border:none;
  border-radius:var(--r-sm);padding:13px 16px;
  font-family:-apple-system,'Plus Jakarta Sans',sans-serif;
  font-size:.9375rem;color:var(--text);outline:none;
  -webkit-appearance:none;transition:background .15s;
  min-height:44px;
}
.form-input::placeholder{color:var(--text3)}
/* Edit WA textarea */
.edit-textarea{
  width:100%;min-height:160px;
  background:var(--bg);border:none;
  border-radius:var(--r-sm);
  padding:11px 16px;
  font-family:-apple-system,'Plus Jakarta Sans',sans-serif;
  font-size:.875rem;color:var(--text);
  outline:none;resize:vertical;line-height:1.6;
  transition:background .15s;
  -webkit-appearance:none;
}
.edit-textarea::placeholder{color:var(--text3)}
.edit-textarea:focus{background:var(--bg2);outline:3px solid rgba(26,175,108,.25);}
.dark-mode .edit-textarea{background:#2C2C2E;color:var(--text);}
.dark-mode .edit-textarea:focus{background:#3A3A3C;}
.form-input:focus{background:var(--bg2);outline:none;box-shadow:0 0 0 3px rgba(26,175,108,.22),inset 0 0 0 1px rgba(26,175,108,.18);}
.dark-mode .form-input{background:#2C2C2E;}
select.form-input{cursor:pointer}

/* Side-by-side row utility */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.form-row .form-grp { margin-bottom: 0; }

.form-input-sm {
  padding: 8px 12px;
  min-height: 38px;
  font-size: 0.875rem;
}

/* ─── HIG INSET GROUPED FORM LIST ─── */
.form-list {
  background: var(--card);
  border-radius: var(--r-sm);
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dark-mode .form-list {
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
/* Handle corners since overflow:hidden is removed */
.form-list > .form-grp:first-child,
.form-list > .auth-field:first-child,
.form-list > .form-row:first-child {
  border-top-left-radius: var(--r-sm);
  border-top-right-radius: var(--r-sm);
}
.form-list > .form-grp:last-child,
.form-list > .auth-field:last-child,
.form-list > .form-row:last-child {
  border-bottom-left-radius: var(--r-sm);
  border-bottom-right-radius: var(--r-sm);
}
/* Rows */
.form-list .form-grp,
.form-list .auth-field {
  display: flex;
  align-items: center;
  /* Do NOT use space-between — use gap so all value columns start at the same x position */
  justify-content: flex-start;
  gap: 0;
  margin-bottom: 0;
  padding: 6px 16px;
  border-bottom: none;
  min-height: 48px;
  position: relative;
}
.form-list .form-grp:not(:last-child)::after,
.form-list .auth-field:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 16px;
  right: 16px;
  height: 0.5px;
  background: var(--border-soft);
}
.form-list .form-grp:last-child,
.form-list .auth-field:last-child,
.form-list .form-row:last-child > .form-grp:last-child {
  border-bottom: none;
}
/* Labels — fixed width creates the consistent vertical alignment guide line */
.form-list .form-lbl,
.form-list .auth-field label {
  margin-bottom: 0;
  flex-shrink: 0;
  /* Use a fixed width so ALL labels end at the same x, values start at same x */
  width: 130px;
  min-width: 130px;
  font-size: 0.9375rem;
  text-transform: none;
  font-weight: 500;
  color: var(--text);
  letter-spacing: normal;
  line-height: 1.3;
}
.form-list .auth-field label {
  width: 90px;
  min-width: 90px;
}
/* Inputs */
.form-list .form-input,
.form-list .auth-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left; /* Rata Kiri sesuai request user */
  padding: 4px 0;
  margin-left: 0px;
  font-size: 1rem;
}
.form-list .auth-input {
  text-align: left;
}
/* Special wraps */
.form-list .nominal-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* Rata kiri */
}
.form-list .nominal-wrap .nominal-prefix {
  position: static;
  margin-right: 4px;
}
.form-list input.nominal-inp {
  width: 100%;
  min-width: 50px;
  border: none;
  background: transparent;
  padding: 4px 0;
  text-align: left; /* Rata Kiri */
  font-family: inherit;
  font-size: 1rem;
}
.form-list input.nominal-inp:focus { outline: none; box-shadow: none; background: transparent; }

/* Handle form-row inside form-list by stacking them cleanly */
.form-list .form-row {
  display: block;
  margin-bottom: 0;
  gap: 0;
}
.form-list .form-row .form-grp {
  border-bottom: 0.5px solid var(--border-soft);
}
#buatDeadlineInput,
#editDeadlineInput {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}
/* Fix: input inside deadline wrap must fill flex space */
#buatDeadlineInput .form-input,
#editDeadlineInput .form-input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 0;
  font-size: 1rem;
  text-align: left;
}

/* The periodo dropdown in form-list fills remaining space */
.form-list .periode-dropdown { flex: 1; min-width: 0; display: flex; position: relative; }
.form-list .periode-trigger { background: transparent; border: none; padding: 0; min-height: auto; width: 100%; justify-content: flex-start; gap: 6px; font-size: 1rem; color: var(--text); font-weight: 400; }
.dark-mode .form-list .periode-trigger { background: transparent; }
/* Push chevron to the far right of its container */
.form-list .periode-trigger .periode-trigger-chevron { margin-left: auto; }

.form-list .pass-wrap { flex: 1; display: flex; align-items: center; }
.form-list .pass-wrap .auth-input { padding-right: 36px; padding-left: 0; }
.form-list .pass-eye { right: 0; }

/* ─── CUSTOM DROPDOWN PERIODE ─── */
/* iOS-style custom select trigger */
/* Periode dropdown list — like reference image */
.periode-dropdown{position:relative;}
.periode-trigger{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:13px 16px;
  background:var(--bg);border:none;border-radius:var(--r-sm);
  font-family:-apple-system,sans-serif;
  font-size:1rem;font-weight:400;color:var(--text);
  cursor:pointer;text-align:left;min-height:44px;
  -webkit-tap-highlight-color:transparent;
  transition:background .1s;
}
.dark-mode .periode-trigger{background:#2C2C2E;}
.periode-trigger:active{background:rgba(120,120,128,.12);}
.periode-trigger-chevron{
  width:18px;height:18px;flex-shrink:0;
  stroke:var(--text3);stroke-width:2;fill:none;
  transition:transform .22s cubic-bezier(.4,0,.2,1);
  margin-left: auto; /* Push chevron to the right edge */
}
.periode-dropdown.open .periode-trigger-chevron{
  transform:rotate(180deg);
}
/* Dropdown list panel */
.periode-list{
  display:none;
  position:absolute;  /* Float so it doesn't push layout vertically */
  top: 100%;
  left:0; right:0;
  z-index: 500; /* Overlap other items */
  background:var(--bg2);
  border-radius:var(--r-sm);
  overflow:hidden;
  box-shadow:0 8px 30px rgba(0,0,0,.15);
  border:0.5px solid var(--border);
  margin-top: 4px;
}
.dark-mode .periode-list{background:#2C2C2E;}
.periode-dropdown.open .periode-trigger{
  border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.periode-dropdown.open .periode-list{display:block;}
.periode-list-item{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:14px 16px;min-height:44px;
  font-family:-apple-system,sans-serif;
  font-size:1rem;font-weight:400;color:var(--text);
  background:transparent;border:none;cursor:pointer;
  border-top:0.5px solid var(--border-soft);
  -webkit-tap-highlight-color:transparent;
  transition:background .08s;
  text-align:left;
}
.periode-list-item:first-child{border-top:none;}
.periode-list-item:active{background:rgba(120,120,128,.1);}
.periode-list-item.selected{color:var(--teal);font-weight:600;}
.periode-check{
  width:18px;height:18px;flex-shrink:0;
  stroke:var(--teal);stroke-width:2.5;fill:none;
  display:none;
}
.periode-list-item.selected .periode-check{display:block;}

/* iOS Picker Modal */
.ios-picker-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:700;align-items:flex-end;justify-content:center;
}
.ios-picker-overlay.open{display:flex}
.ios-picker-sheet{
  width:100%;max-width:600px;
  background:var(--bg2);
  border-radius:20px 20px 0 0;
  box-shadow:0 -2px 20px rgba(0,0,0,.15);
  animation:slideUp .28s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
.dark-mode .ios-picker-sheet{background:#1C1C1E;}
.ios-picker-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px 12px;
  border-bottom:0.5px solid var(--border);
}
.ios-picker-title{font-size:1.0625rem;font-weight:600;color:var(--text);letter-spacing:-0.01em;}
.ios-picker-done{
  font-size:.9375rem;font-weight:600;color:var(--teal);
  background:none;border:none;cursor:pointer;padding:4px 0;
  -webkit-tap-highlight-color:transparent;
}
.ios-picker-done:active{opacity:.6;}
/* iOS-style list options */
.ios-picker-options{padding:4px 0 max(20px,env(safe-area-inset-bottom));}
.ios-picker-option{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;min-height:52px;
  font-size:.9375rem;font-weight:400;color:var(--text);
  letter-spacing:-0.015em;
  cursor:pointer;transition:background .08s;
  -webkit-tap-highlight-color:transparent;
  border-bottom:none;
  position:relative;
}
.ios-picker-option:not(:last-child)::after{
  content:'';position:absolute;bottom:0;left:16px;right:16px;height:0.5px;background:var(--border-soft);
}
.ios-picker-option:active{background:var(--fill);}
/* iOS 26: selected = label color + bold checkmark */
.ios-picker-option.selected{color:var(--teal);font-weight:600;}
.ios-picker-option .ios-check{
  width:22px;height:22px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.ios-picker-option .ios-check svg{display:none;stroke:var(--teal);}
.ios-picker-option.selected .ios-check svg{display:block;}

/* ─── EMPTY ─── */
.empty-state{text-align:center;padding:50px 20px;color:var(--text3)}
.empty-state svg{width:56px;height:56px;stroke:var(--text3);stroke-width:1.2;margin-bottom:14px}
.empty-state p{font-size:0.875rem;line-height:1.6;font-weight:500}

/* ─── TOAST ─── */
#toast{
  position:fixed;bottom:88px;left:50%;transform:translateX(-50%) translateY(16px) scale(.92);
  background:#1C1C1E;color:#FFFFFF;padding:10px 20px;border-radius:var(--r-pill);
  font-size:0.8rem;font-weight:600;opacity:0;transition:all .25s;
  z-index:9999;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.35)
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}


/* PROFILE SPECIFIC COMPONENTS */
/* ── iOS Toggle — identical to index.html ── */
.tog-wrap{position:relative;display:inline-block;width:51px;height:31px;flex-shrink:0;}
.tog-wrap input{opacity:0;width:0;height:0;position:absolute;pointer-events:none;}
.tog-track{
  position:absolute;inset:0;border-radius:100px;
  background:#E5E5EA;transition:background .22s;cursor:pointer;
}
.dark-mode .tog-track{background:#3A3A3C;}
.tog-track::before{
  content:'';position:absolute;
  width:27px;height:27px;left:2px;top:2px;
  border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.18);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.tog-wrap input:checked+.tog-track{background:var(--teal);}
.tog-wrap input:checked+.tog-track::before{transform:translateX(20px);}

/* ── Logout button ── */
.version-tag{text-align:center;font-size:11px;color:var(--text3);padding:16px 0 6px;font-weight:500;}
.logout-wrap{padding:12px 16px 0;}
.logout-btn{
  width:100%;padding:14px;background:var(--card);
  border:0.5px solid var(--border-soft);border-radius:var(--r);
  color:var(--red);font-size:15px;font-weight:600;font-family:inherit;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
  transition:background .15s;box-shadow:var(--shadow-card);
  -webkit-tap-highlight-color:transparent;min-height:44px;
}
.logout-btn:active{background:rgba(255,59,48,0.06);}

/* ── Toast ── */
#toast{
  position:fixed;bottom:32px;left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--text);color:var(--bg2);
  padding:11px 22px;border-radius:24px;
  font-size:13px;font-weight:600;opacity:0;
  transition:opacity .25s,transform .25s;pointer-events:none;
  white-space:nowrap;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.25);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ══════════════════════════════
   AUTH SCREEN — konsisten dengan halaman profil
══════════════════════════════ */
#authScreen{
  position:fixed;inset:0;z-index:9500;
  background:var(--bg);display:none;
  flex-direction:column;align-items:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior-y:none;
}
#authScreen.show{display:flex!important;}

.auth-inner{
  width:100%;max-width:600px;
  min-height:100%;display:flex;flex-direction:column;
}

/* Banner — sama persis dengan .profile-banner */
.auth-hero{
  background:linear-gradient(135deg,#1AAF6C 0%,#0E9F8E 55%,#007AFF 100%);
  padding:10px 16px 22px;
  position:relative;overflow:hidden;
  margin:calc(var(--safe-top) + 16px) 20px 0;
  border-radius:var(--r);
  flex-shrink:0;
}
.auth-hero-blob{position:absolute;border-radius:50%;background:rgba(255,255,255,0.07);pointer-events:none;}
.auth-hero-blob-1{width:180px;height:180px;right:-50px;top:-50px;}
.auth-hero-blob-2{width:110px;height:110px;right:60px;bottom:-40px;}
.auth-hero-blob-3{width:70px;height:70px;left:30px;top:10px;background:rgba(255,255,255,0.04);}

/* Back button di banner — sama dengan .back-btn */
.auth-banner-top{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:14px;position:relative;z-index:2;
}
.auth-back-top{
  width:44px;height:44px;margin:-6px;
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,0.92);
  background:none;border:none;padding:0;cursor:pointer;z-index:3;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
}
.auth-back-top:active{opacity:0.55;}
.auth-back-top svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.auth-banner-title{font-size:15px;font-weight:700;color:rgba(255,255,255,0.95);letter-spacing:-0.01em;}

/* Info row di banner */
.auth-banner-info{display:flex;align-items:center;gap:14px;position:relative;z-index:2;}
.auth-logo-box{
  width:52px;height:52px;border-radius:14px;
  border:2px solid rgba(255,255,255,0.4);
  background:rgba(255,255,255,0.15);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  overflow:hidden;
}
.auth-logo-box img{width:100%;height:100%;object-fit:cover;border-radius:12px;}
.auth-logo-emoji{font-size:24px;}
.auth-banner-text{}
.auth-banner-appname{font-size:19px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-0.3px;}
.auth-banner-tagline{font-size:12px;color:rgba(255,255,255,0.65);margin-top:3px;}

/* Form area — pakai background biasa, BUKAN floating card */
.auth-body{
  flex:1;
  padding:20px 20px calc(40px + var(--safe-bottom));
}

/* Segmented tabs — sama dengan style di index.html */
.auth-tabs{
  display:flex;gap:2px;background:var(--fill);
  border-radius:14px;padding:3px;margin-bottom:20px;
}
.auth-tab{
  flex:1;padding:10px;border:none;background:transparent;
  border-radius:12px;font-size:.9375rem;font-weight:600;
  color:var(--text2);cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.auth-tab.active{
  background:var(--card);color:var(--text);
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}

/* Alert */
.auth-alert{border-radius:var(--r-sm);padding:12px 14px;font-size:.825rem;font-weight:500;margin-bottom:16px;display:none;line-height:1.4;}
.auth-alert.show{display:block;}
.auth-alert.error{background:rgba(255,59,48,.08);border:1px solid rgba(255,59,48,.18);color:var(--red);}
.auth-alert.success{background:rgba(40,205,65,.08);border:1px solid rgba(40,205,65,.2);color:var(--green);}

/* Fields */
.auth-panel{}
.auth-field{margin-bottom:16px;}
.auth-field label{
  display:block;font-size:.6875rem;font-weight:600;
  color:var(--text2);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:.05em;
}
.auth-input{
  width:100%;padding:14px 16px;min-height:48px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  background:var(--card);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:1rem;color:var(--text);outline:none;
  transition:border-color .15s,box-shadow .15s;
  box-sizing:border-box;-webkit-appearance:none;
}
.auth-input:focus{
  border-color:var(--teal);
  box-shadow:0 0 0 3.5px rgba(26,175,108,.14);
}
.auth-input::placeholder{color:var(--text3);}

.pass-wrap{position:relative;}
.pass-wrap .auth-input{padding-right:52px;}
.pass-eye{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--text3);
  padding:8px;display:flex;align-items:center;
  -webkit-tap-highlight-color:transparent;
}
.pass-eye svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;}

.auth-forgot{text-align:right;margin-top:-6px;margin-bottom:18px;}
.auth-link{background:none;border:none;color:var(--teal);font-size:.875rem;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;padding:2px 0;-webkit-tap-highlight-color:transparent;}

/* Primary button — pill gradient, sama dengan index.html */
.auth-btn{
  width:100%;padding:16px;border:none;
  border-radius:var(--r-pill);min-height:52px;
  background:linear-gradient(160deg,#22D477,#1AAF6C);
  color:#fff;font-size:1rem;font-weight:700;cursor:pointer;
  margin-top:4px;font-family:'Plus Jakarta Sans',sans-serif;
  box-shadow:0 6px 20px rgba(26,175,108,.4);
  transition:transform .12s,opacity .12s;
  letter-spacing:-.01em;-webkit-tap-highlight-color:transparent;
}
.auth-btn:active{transform:scale(.97);}
.auth-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;}

.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-divider span{font-size:.75rem;color:var(--text3);font-weight:500;}

/* Google button */
.google-btn{
  width:100%;padding:14px 16px;min-height:52px;
  border:1.5px solid var(--border);border-radius:var(--r-pill);
  background:var(--card);color:var(--text);
  font-size:.9375rem;font-weight:600;cursor:pointer;
  font-family:'Plus Jakarta Sans',sans-serif;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s,transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.google-btn:active{transform:scale(.97);background:var(--fill);}
.google-ico{width:18px;height:18px;flex-shrink:0;}

/* Lupa password back button */
.auth-back{display:flex;align-items:center;gap:4px;background:none;border:none;color:var(--teal);font-size:.9375rem;font-weight:600;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:20px;padding:0;-webkit-tap-highlight-color:transparent;}
.auth-back svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}

/* ── Specific Modal components (icons, messages, etc) ── */
.modal-ico{
  width:60px;height:60px;border-radius:18px;
  background:rgba(255,59,48,0.10);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.modal-ico svg{width:28px;height:28px;stroke:var(--red);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.modal-msg{font-size:.875rem;color:var(--text2);text-align:center;margin-bottom:24px;line-height:1.5;}
.modal-acts{display:flex;gap:12px;}
.m-btn{
  flex:1;min-height:52px;padding:14px 8px;
  font-size:1rem;font-weight:600;border:none;cursor:pointer;
  border-radius:var(--r-pill);font-family:'Plus Jakarta Sans',sans-serif;
  transition:background .12s,transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.m-btn:active{transform:scale(.97);}
.m-btn.cancel{color:var(--text);background:var(--fill2);}
.m-btn.confirm{color:#fff;background:var(--red);}
.dark-mode .m-btn.cancel{background:rgba(120,120,128,.22);}

/* ── State visibility ── */
.if-loggedin{display:none;}
.if-loggedout{display:none;}
body.authed .if-loggedin{display:block;}
body.guest  .if-loggedout{display:block;}
body.authed .hide-authed{display:none!important;}
body.guest  .hide-guest{display:none!important;}

/* ── Animations removed for instant load ── */

/* ── Autofill fix for auth inputs in dark mode ── */
.dark-mode input:-webkit-autofill,
.dark-mode input:-webkit-autofill:hover, 
.dark-mode input:-webkit-autofill:focus, 
.dark-mode input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 50px transparent inset !important;
  transition: background-color 5000s ease-in-out 0s;
  -webkit-text-fill-color: var(--text) !important;
}