/* ---- task categories ---- */
.category-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; margin-bottom:12px; }
.category-chip{
  display:flex; align-items:center; gap:8px; min-height:44px; padding:8px 10px;
  border:1.5px solid #E7E1F5; border-radius:12px; background:var(--cream);
  font-family:'Manrope'; font-size:12.5px; font-weight:800; color:var(--ink); cursor:pointer;
  transition:.15s ease;
}
.category-chip:active{ transform:translateY(1px); }
.category-chip.active{ border-color:var(--cat-color); background:color-mix(in srgb, var(--cat-color) 11%, white); color:var(--cat-color); }
.category-dot{ width:12px; height:12px; border-radius:50%; background:var(--cat-color); flex-shrink:0; box-shadow:0 0 0 3px color-mix(in srgb, var(--cat-color) 13%, transparent); }
.category-current{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; }
.category-current .category-dot{ width:9px; height:9px; box-shadow:none; }
.category-manage{ grid-column:1 / -1; justify-content:center; }
.category-manager-overlay{
  position:fixed; inset:0; z-index:99999; background:rgba(18,28,55,.42);
  display:flex; align-items:flex-end; justify-content:center; padding:12px;
}
.category-manager{
  width:min(100%, 520px); max-height:88vh; overflow:auto; background:#fff;
  border-radius:28px 28px 18px 18px; padding:24px 20px 20px;
  box-shadow:0 20px 60px rgba(20,30,60,.25); position:relative;
}
.category-manager h3{ margin:0 0 7px; font-size:24px; color:var(--ink); }
.category-manager p{ margin:0 0 18px; color:#7F8BA4; font-size:13px; line-height:1.45; }
.category-manager-close{
  position:absolute; right:15px; top:12px; border:0; background:#F0F3F9;
  width:36px; height:36px; border-radius:50%; font-size:25px; color:#7F8BA4;
}
.category-manage-row{
  display:grid; grid-template-columns:20px 1fr 42px 36px; gap:8px; align-items:center;
  padding:8px 0; border-bottom:1px solid #EEF1F6;
}
.category-name-input,.category-add-row input[type=text],#new-category-name{
  min-width:0; border:1.5px solid #E3E7F0; background:#F7F8FC; border-radius:12px;
  padding:10px 12px; font:700 14px 'Manrope'; color:var(--ink); outline:none;
}
.category-color-input{ width:42px; height:40px; padding:3px; border:1.5px solid #E3E7F0; border-radius:11px; background:#fff; }
.category-delete-btn{
  width:36px; height:36px; border:0; border-radius:10px; background:#FFF0F5;
  color:#E98CB1; font-size:24px; line-height:1;
}
.category-add-row{ display:grid; grid-template-columns:1fr 42px 42px; gap:8px; margin-top:15px; }
.category-add-row button{
  border:0; border-radius:12px; background:#EAF0FF; color:#3478F6; font-size:24px; font-weight:800;
}
.category-save-btn{
  width:100%; margin-top:14px; border:0; border-radius:14px; padding:13px;
  background:#3478F6; color:#fff; font:800 15px 'Manrope';
}

/* ---- timeline ---- */
.timeline-row{ display:flex; gap:10px; }
.timeline-time{ width:44px; flex-shrink:0; font-size:11px; font-weight:800; color:var(--purple-dark); padding-top:3px; text-align:right; }
.timeline-rail{ display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.timeline-dot{ width:10px; height:10px; border-radius:50%; background:var(--purple); margin-top:4px; flex-shrink:0; }
.timeline-row.done .timeline-dot{ background:var(--muted); }
.timeline-line{ flex:1; width:2px; background:#EDE9FB; margin-top:2px; }
.timeline-row:last-child .timeline-line{ display:none; }
.timeline-content{ flex:1; padding-bottom:16px; }
.timeline-title-row{ display:flex; align-items:center; gap:8px; }
.timeline-title{ font-size:14px; font-weight:700; flex:1; }
.timeline-row.done .timeline-title{ text-decoration:line-through; color:var(--muted); }
.timeline-range{ font-size:11px; color:var(--muted); font-weight:700; margin-bottom:2px; }
.timeline-notes{ font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.4; }
.timeline-bell{ font-size:12px; }
.timeline-del{ color:var(--pink); font-weight:800; cursor:pointer; font-size:14px; padding:0 3px; }
.timeline-row input[type=checkbox]{ width:17px; height:17px; accent-color:var(--purple); flex-shrink:0; }

/* ---- task modal ---- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(46,42,61,0.6);
  display:flex; align-items:stretch; justify-content:center; z-index:99999;
  opacity:0; transition:opacity .25s ease;
}
.modal-overlay.active{ opacity:1; }
.modal-sheet{
  background:var(--white); width:100%; height:100%; max-width:100%;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.25,.8,.25,1);
}
.modal-overlay.active .modal-sheet{ transform:translateX(0); }
.modal-banner{
  background:var(--white); padding:16px 20px; color:var(--ink);
  border-bottom:1px solid #EFEFEF; flex-shrink:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:calc(16px + env(safe-area-inset-top, 0px));
}
.modal-banner h2{
  margin:0; font-size:20px; font-weight:700; text-align:left;
}
.modal-banner-row{ 
  display:flex; align-items:center; gap:14px;
}
.modal-banner-icon{
  width:54px; height:54px; border-radius:50%; background:rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  font-size:28px; flex-shrink:0;
}
.modal-close{
  width:36px; height:36px; border:0; border-radius:50%; background:var(--cream); color:var(--ink);
  display:flex; align-items:center; justify-content:center; font-weight:800; cursor:pointer;
  font-size:20px; flex-shrink:0;
}
.modal-close:active{ transform:scale(.94); }
.modal-spacer{ width:36px; flex-shrink:0; }
.modal-body{ 
  padding:20px; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
}
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:700; color:var(--muted); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%; border:1.5px solid #E5EAF3; border-radius:12px; 
  padding:12px 14px; font-family:'Manrope'; font-size:14px; background:var(--cream);
}
.emoji-selector{
  width:100%; border:1.5px solid #E5EAF3; border-radius:12px;
  padding:12px 14px; font-family:'Manrope'; font-size:14px; background:var(--cream);
  text-align:left; cursor:pointer; display:flex; align-items:center; gap:8px;
}
.emoji-selector:active{ transform:translateY(1px); }
.task-emoji-picker{
  background:#fff; border-radius:14px; padding:12px;
  box-shadow:0 4px 16px rgba(20,30,60,.12);
}
.emoji-presets{
  display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px;
}
.emoji-presets button{
  min-width:0; width:100%; aspect-ratio:1/1; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:0; background:#F3F6FC; border-radius:10px; font-size:21px;
  line-height:1; cursor:pointer;
}
.emoji-presets button:active{ transform:scale(.92); }
.emoji-custom{
  display:flex; gap:6px; margin-top:8px;
}
.emoji-custom input{
  flex:1; border:1.5px solid #E2E6EF; border-radius:10px;
  padding:8px 10px; font:600 14px Manrope,sans-serif; outline:none;
}
.emoji-custom button{
  flex:0 0 auto; border:0; border-radius:10px; background:#3478F6;
  color:#fff; padding:0 11px; font:800 13px Manrope,sans-serif; cursor:pointer;
}
.date-picker-wrap{ position:relative; }
.date-picker-btn{
  width:100%; border:1.5px solid #E5EAF3; border-radius:12px;
  padding:12px 14px; background:var(--cream); text-align:left; cursor:pointer;
  display:flex; align-items:center; gap:10px; font:600 14px Manrope,sans-serif;
}
.date-picker-btn span:last-child{ margin-left:auto; color:var(--muted); }
.date-picker-btn:active{ transform:translateY(1px); }
.info-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--cream); border-radius:14px; padding:12px 14px; margin-bottom:10px; font-size:14px;
}
.info-row .info-left{ display:flex; align-items:center; gap:10px; }
.date-picker-row{ cursor:pointer; transition:background .15s ease, transform .15s ease; position:relative; overflow:hidden; }
.date-picker-row:active{ transform:translateY(1px); }
.date-picker-value{ display:flex; align-items:center; gap:8px; font-weight:700; }
.date-picker-chevron{ color:var(--muted); font-size:22px; line-height:1; transform:translateY(-1px); }
#task-date-picker{ position:absolute; inset:0; width:100%; height:100%; opacity:.01; cursor:pointer; border:0; padding:0; margin:0; z-index:5; }
.row-title{ font-size:11.5px; font-weight:800; color:var(--muted); margin:14px 0 8px; }
.row-title:first-child{ margin-top:0; }
.info-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--cream); border-radius:14px; padding:12px 14px; margin-bottom:10px; font-size:14px;
}
.info-row .info-left{ display:flex; align-items:center; gap:10px; }
.date-picker-row{ cursor:pointer; transition:background .15s ease, transform .15s ease; position:relative; overflow:hidden; }
.date-picker-row:active{ transform:translateY(1px); }
.date-picker-value{ display:flex; align-items:center; gap:8px; font-weight:700; }
.date-picker-chevron{ color:var(--muted); font-size:22px; line-height:1; transform:translateY(-1px); }
#task-date-picker{ position:absolute; inset:0; width:100%; height:100%; opacity:.01; cursor:pointer; border:0; padding:0; margin:0; z-index:5; }
.row-title{ font-size:11.5px; font-weight:800; color:var(--muted); margin:14px 0 8px; }
.row-title:first-child{ margin-top:0; }
.time-inputs{ display:flex; align-items:center; gap:8px; background:var(--cream); border-radius:14px; padding:10px 14px; margin-bottom:10px; }
.time-inputs select{
  border:none; background:none; font-family:'Manrope'; font-size:16px; font-weight:700;
  color:var(--ink); appearance:none; -webkit-appearance:none; padding:2px 0; text-align:center;
}
.time-inputs span{ color:var(--muted); }
.time-inputs .tgroup{ display:flex; align-items:center; gap:1px; }
.dur-chips{ display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:12px; }
.dur-chip{
  background:var(--cream); border:1.5px solid #E7E1F5; border-radius:20px; padding:7px 13px;
  font-size:12.5px; font-weight:700; white-space:nowrap; cursor:pointer; flex-shrink:0;
}
.dur-chip.active{ background:var(--purple); color:#fff; border-color:var(--purple); }
.week-days-picker{ display:flex; gap:5px; margin-bottom:12px; }
.day-chip{
  flex:1; text-align:center; padding:8px 0; border-radius:10px; background:var(--cream);
  border:1.5px solid #E7E1F5; font-size:11.5px; font-weight:700; cursor:pointer;
}
.day-chip.active{ background:var(--purple); color:#fff; border-color:var(--purple); }
.field-row{ display:flex; gap:10px; }
.field-row .field{ flex:1; }
.modal-body textarea{
  width:100%; padding:11px 13px; border:1.5px solid #E7E1F5; border-radius:12px;
  font-family:'Manrope'; font-size:14px; background:var(--cream); resize:vertical;
}
.modal-body select{
  padding:9px 12px; border:1.5px solid #E7E1F5; border-radius:10px;
  font-family:'Manrope'; font-size:13px; background:var(--cream);
}
.modal-body select:disabled{ opacity:.45; }
.emoji-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
.emoji-grid button{
  aspect-ratio:1; border-radius:12px; border:1.5px solid #E7E1F5; background:var(--cream);
  font-size:20px; cursor:pointer;
}
.emoji-grid button:active{ transform:translateY(1px); }
#emoji-custom-input{
  width:100%; padding:11px 13px; border:1.5px solid #E7E1F5; border-radius:12px;
  font-family:'Manrope'; background:var(--cream); text-align:center;
}

/* ---- reminder details ---- */
.reminder-details-sheet{
  background:var(--white); width:100%; height:100%; max-width:100%;
  display:flex; flex-direction:column; overflow:hidden;
  transform:translateX(100%); transition:transform .28s cubic-bezier(.25,.8,.25,1);
}
.modal-overlay.active .reminder-details-sheet{ transform:translateX(0); }
.reminder-details-head{
  background:var(--white); padding:16px 20px; color:var(--ink);
  border-bottom:1px solid #EFEFEF; flex-shrink:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding-top:calc(16px + env(safe-area-inset-top, 0px));
}
.reminder-details-head h3{
  margin:0; font-size:20px; font-weight:700; flex:1; text-align:center;
}
.details-circle{
  width:36px; height:36px; border:0; border-radius:50%; background:var(--cream);
  display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer;
  color:var(--ink); font-weight:800; flex-shrink:0;
}
.details-circle:active{ transform:scale(.94); }
.details-circle-spacer{ width:36px; flex-shrink:0; }
.reminder-details-body{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:20px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
}
.details-section-title{font-size:12px;font-weight:800;color:#8B91A0;margin:18px 18px 8px;text-transform:none;}
.details-card{margin:0 14px;background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 1px 5px rgba(20,30,60,.03);}
.details-field{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #ECEEF3;min-height:52px;box-sizing:border-box;}
.details-field:last-child{border-bottom:0;}
.details-icon{width:28px;flex:0 0 28px;text-align:center;font-size:22px;}
.details-main{flex:1;min-width:0;}
.details-main label{display:block;font-size:13px;color:#7E8594;margin-bottom:4px;}
.details-main input,.details-main textarea{width:100%;border:0;outline:0;background:transparent;font-family:'Manrope';font-size:15px;color:#111827;padding:0;box-sizing:border-box;}
.details-main textarea{resize:none;min-height:54px;line-height:1.4;}
.details-main input::placeholder,.details-main textarea::placeholder{color:#B7BCC7;}
.details-voice{width:38px;height:38px;border:0;border-radius:12px;background:#EEF3FF;color:#3478F6;font-size:18px;cursor:pointer;flex-shrink:0;}
.details-voice.listening{background:#DDF8ED;color:#16815B;}
.details-toggle{appearance:none;width:51px;height:31px;border-radius:20px;background:#D0D2D8;position:relative;cursor:pointer;flex-shrink:0;transition:.18s;}
.details-toggle::after{content:'';position:absolute;width:25px;height:25px;border-radius:50%;background:#fff;left:3px;top:3px;box-shadow:0 1px 4px rgba(0,0,0,.16);transition:.18s;}
.details-toggle:checked{background:#3478F6;}
.details-toggle:checked::after{left:23px;}
.details-select{border:0;background:transparent;font:700 15px Manrope;color:#111827;outline:0;}
.details-date-time{display:flex;gap:10px;align-items:center;}
.details-date-time input{background:#F3F5F9;border-radius:10px;padding:8px 9px;font-size:14px;}
.details-pill-row{display:flex;gap:7px;overflow-x:auto;padding:2px 0;}
.details-pill{border:1.5px solid #E1E5ED;background:#F7F8FB;border-radius:18px;padding:7px 11px;font:700 12px Manrope;white-space:nowrap;cursor:pointer;}
.details-pill.active{background:#3478F6;color:#fff;border-color:#3478F6;}
.details-footer{padding:18px 14px calc(18px + env(safe-area-inset-bottom));}
.details-footer button{width:100%;}