/* ── CSS Variables ── */
:root {
  --navy:        #2d6099;
  --navy-dark:   #1e3a5f;
  --navy-mid:    #25487a;

  --fun:   #d97706;
  --love:  #be185d;
  --relax: #16a34a;
  --happy: #ea580c;
  --work:  #2563eb;

  --grad-fun:   linear-gradient(135deg,#f09068 0%,#e87898 100%);
  --grad-love:  linear-gradient(135deg,#e8a8bc 0%,#f4bfd2 100%);
  --grad-relax: linear-gradient(135deg,#7ecfc8 0%,#b8e8b4 100%);
  --grad-happy: linear-gradient(135deg,#f4a460 0%,#f8c890 100%);
  --grad-work:  linear-gradient(160deg,#88c0f0 0%,#b090d8 50%,#e87ab0 100%);

  --fun-light:   #fef3c7; --fun-text:   #92400e;
  --love-light:  #fdf2f8; --love-text:  #9d174d;
  --relax-light: #f0fdf4; --relax-text: #166534;
  --happy-light: #fff7ed; --happy-text: #9a3412;
  --work-light:  #eff6ff; --work-text:  #1e40af;

  --sidebar-bg:  #1e3a5f;
  --sidebar-2:   #25487a;
  --sidebar-txt: #e2e8f0;
  --sidebar-mut: #64748b;

  --cal-bg:        #ffffff;
  --cal-border:    #e2e8f0;
  --cal-text:      #1f2937;
  --cal-muted:     #9ca3af;
  --cal-col-bg:    #ffffff;
  --cal-wknd-bg:   #fafafa;
  --cal-today-bg:  rgba(30,58,95,0.03);
  --cal-grid-line: #f3f4f6;
}

body.dark {
  --cal-bg:        #000000;
  --cal-border:    #1c1c1c;
  --cal-text:      #e2e8f0;
  --cal-muted:     #4b5563;
  --cal-col-bg:    #020202;
  --cal-wknd-bg:   #050505;
  --cal-today-bg:  rgba(255,255,255,0.02);
  --cal-grid-line: #181818;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{font-family:'Noto Sans JP',sans-serif;background:var(--cal-bg);color:var(--cal-text);display:flex;flex-direction:column;}
button{font-family:inherit;cursor:pointer;}

/* ── Login ── */
.login-screen{
  position:fixed;inset:0;background:var(--navy-dark);
  display:flex;align-items:center;justify-content:center;z-index:100;
}
.login-card{
  background:#fff;border-radius:20px;padding:40px 32px;
  width:360px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3);
}
body.dark .login-card{background:#111;}
.login-logo{
  width:72px;height:72px;border-radius:50%;background:var(--navy-dark);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.login-title{font-size:22px;font-weight:700;color:var(--navy-dark);margin-bottom:8px;}
body.dark .login-title{color:#e2e8f0;}
.login-sub{font-size:13px;color:#6b7280;margin-bottom:28px;line-height:1.5;}
.login-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:13px;border-radius:12px;font-size:14px;font-weight:600;
  border:none;margin-bottom:10px;transition:opacity 0.15s;background:#f3f4f6;color:#374151;
}
.login-btn:hover{opacity:0.85;}
.login-btn-cal{background:var(--navy-dark);color:#fff;}
.login-error{color:#ef4444;font-size:13px;margin-top:8px;}
.hidden{display:none!important;}

/* ── App Header ── */
.app-header{
  flex-shrink:0;height:50px;background:var(--navy-dark);
  display:flex;align-items:center;padding:0 20px;gap:12px;
  border-bottom:1px solid var(--navy-mid);
}
.app-title{color:#fff;font-size:16px;font-weight:700;letter-spacing:0.04em;}
.header-controls{display:flex;align-items:center;gap:8px;margin-left:auto;}
.hbtn{
  background:var(--navy-mid);border:1px solid #2d6099;
  color:var(--sidebar-txt);padding:5px 12px;
  border-radius:6px;font-size:12px;font-weight:600;transition:all 0.15s;
}
.hbtn.on{background:#fff;border-color:#fff;color:var(--navy);}
.hbtn.today-btn{background:#fff;border-color:#fff;color:var(--navy);}
.hbtn:hover:not(.on){background:#2d6099;}
.nav-btn{background:none;border:none;color:var(--sidebar-mut);font-size:18px;padding:4px 8px;transition:color 0.15s;}
.nav-btn:hover{color:#fff;}
.date-range{color:#fff;font-size:14px;font-weight:700;letter-spacing:0.02em;white-space:nowrap;}
.hdr-divider{width:1px;height:24px;background:#2d6099;margin:0 4px;}
.dark-toggle{
  background:var(--navy-mid);border:1px solid #2d6099;color:var(--sidebar-txt);
  width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;transition:all 0.15s;
}
.dark-toggle:hover{background:#2d6099;}
.user-av{
  width:30px;height:30px;border-radius:50%;background:#2d6099;color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;
  border:2px solid #2a5298;cursor:pointer;user-select:none;
}

/* ── Layout ── */
.app-body{flex:1;display:flex;overflow:hidden;}

/* ── Sidebar ── */
.sidebar{
  width:256px;flex-shrink:0;background:var(--sidebar-bg);
  overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
  border-right:1px solid var(--navy-mid);
}
.sidebar::-webkit-scrollbar{width:4px;}
.sidebar::-webkit-scrollbar-track{background:var(--sidebar-bg);}
.sidebar::-webkit-scrollbar-thumb{background:#2d6099;border-radius:2px;}

/* HP Tracker */
.hp-tracker{padding:14px 16px 10px;border-bottom:1px solid var(--navy-mid);}
.hp-tracker-title{font-size:10px;font-weight:700;color:var(--sidebar-mut);letter-spacing:0.08em;margin-bottom:10px;}
.hp-row{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.hp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.hp-name{font-size:11px;width:48px;flex-shrink:0;}
.hp-bar-wrap{flex:1;height:5px;background:#2d6099;border-radius:3px;overflow:hidden;}
.hp-bar-fill{height:100%;border-radius:3px;transition:width 0.4s;}
.hp-count{font-size:10px;font-weight:700;width:28px;text-align:right;flex-shrink:0;color:var(--sidebar-txt);}
.hp-check{font-size:10px;width:14px;flex-shrink:0;}

/* Category sections */
.cat-sec{border-bottom:1px solid var(--navy-mid);}
.cat-sec-header{display:flex;align-items:center;gap:8px;padding:11px 16px 8px;cursor:pointer;user-select:none;}
.cat-color-bar{width:3px;height:16px;border-radius:2px;flex-shrink:0;}
.cat-sec-name{font-size:12px;font-weight:700;flex:1;color:var(--sidebar-txt);}
.cat-sec-add{
  background:none;border:none;color:var(--sidebar-mut);font-size:18px;font-weight:300;
  width:22px;height:22px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  transition:color 0.15s,background 0.15s;flex-shrink:0;
}
.cat-sec-add:hover{color:var(--sidebar-txt);background:rgba(255,255,255,0.08);}
.sync-tag{font-size:9px;font-weight:700;letter-spacing:0.05em;background:rgba(59,130,246,0.2);color:#60a5fa;padding:2px 6px;border-radius:4px;flex-shrink:0;}
.cat-toggle{font-size:10px;color:var(--sidebar-mut);transition:transform 0.2s;flex-shrink:0;}
.cat-sec.collapsed .cat-toggle{transform:rotate(-90deg);}
.cat-items{padding:0 10px 8px;}
.cat-sec.collapsed .cat-items{display:none;}
.sync-notice{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--sidebar-mut);padding:4px 8px 6px;}

.fun-cat   .cat-color-bar{background:var(--fun);}
.love-cat  .cat-color-bar{background:var(--love);}
.relax-cat .cat-color-bar{background:var(--relax);}
.happy-cat .cat-color-bar{background:var(--happy);}
.work-cat  .cat-color-bar{background:#3b82f6;}

/* Task chips */
.task-chip{
  display:flex;align-items:center;gap:7px;
  padding:6px 8px;border-radius:7px;cursor:grab;margin-bottom:3px;transition:background 0.15s;
}
.task-chip:hover{background:var(--sidebar-2);}
.task-chip:active{cursor:grabbing;opacity:0.6;}
.grip{color:#2d6099;font-size:13px;flex-shrink:0;}
.chip-name{font-size:12px;color:var(--sidebar-txt);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chip-dur{font-size:10px;font-weight:700;padding:2px 6px;border-radius:5px;flex-shrink:0;}
.chip-done{font-size:10px;color:var(--sidebar-mut);flex-shrink:0;}
.chip-actions{opacity:0;display:flex;gap:1px;flex-shrink:0;transition:opacity 0.15s;}
.task-chip:hover .chip-actions{opacity:1;}
.chip-edit,.chip-del{background:none;border:none;padding:3px 5px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:background 0.15s;color:var(--sidebar-mut);}
.chip-edit:hover{background:rgba(100,116,139,0.25);color:var(--sidebar-txt);}
.chip-del:hover{background:rgba(239,68,68,0.18);color:#ef4444;}

.fun-cat   .task-chip{background:linear-gradient(135deg,rgba(240,144,104,0.2),rgba(232,120,152,0.28));}
.fun-cat   .task-chip:hover{background:linear-gradient(135deg,rgba(240,144,104,0.3),rgba(232,120,152,0.38));}
.fun-cat   .chip-dur{background:rgba(240,144,104,0.28);color:#f8c0c0;}
.love-cat  .task-chip{background:linear-gradient(135deg,rgba(232,168,188,0.2),rgba(244,191,210,0.28));}
.love-cat  .task-chip:hover{background:linear-gradient(135deg,rgba(232,168,188,0.3),rgba(244,191,210,0.38));}
.love-cat  .chip-dur{background:rgba(232,168,188,0.28);color:#fbd4e5;}
.relax-cat .task-chip{background:linear-gradient(135deg,rgba(126,207,200,0.2),rgba(184,232,180,0.28));}
.relax-cat .task-chip:hover{background:linear-gradient(135deg,rgba(126,207,200,0.3),rgba(184,232,180,0.38));}
.relax-cat .chip-dur{background:rgba(126,207,200,0.28);color:#b8ece8;}
.happy-cat .task-chip{background:linear-gradient(135deg,rgba(244,164,96,0.2),rgba(248,200,144,0.28));}
.happy-cat .task-chip:hover{background:linear-gradient(135deg,rgba(244,164,96,0.3),rgba(248,200,144,0.38));}
.happy-cat .chip-dur{background:rgba(244,164,96,0.28);color:#fce4b8;}
.work-cat  .task-chip{background:linear-gradient(160deg,rgba(136,192,240,0.2),rgba(176,144,216,0.2),rgba(232,122,176,0.18));}
.work-cat  .task-chip:hover{background:linear-gradient(160deg,rgba(136,192,240,0.3),rgba(176,144,216,0.3),rgba(232,122,176,0.28));}
.work-cat  .chip-dur{background:rgba(176,144,216,0.3);color:#f0d0f4;}

/* Projects */
.proj-section{border-bottom:1px solid var(--navy-mid);}
.proj-section-header{display:flex;align-items:center;gap:6px;padding:10px 16px 7px;cursor:pointer;user-select:none;}
.proj-section-title{font-size:10px;font-weight:700;color:var(--sidebar-mut);letter-spacing:0.08em;flex:1;}
.proj-section-toggle{font-size:10px;color:var(--sidebar-mut);transition:transform 0.2s;}
.proj-section.collapsed .proj-section-toggle{transform:rotate(-90deg);}
.proj-section.collapsed .proj-list{display:none;}
.proj-item{border-bottom:1px solid rgba(255,255,255,0.04);}
.proj-header{display:flex;align-items:center;gap:7px;padding:8px 16px 6px;cursor:pointer;user-select:none;transition:background 0.15s;}
.proj-header:hover{background:var(--sidebar-2);}
.proj-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.proj-name{font-size:12px;color:var(--sidebar-txt);font-weight:600;flex:1;}
.proj-count{font-size:10px;color:var(--sidebar-mut);}
.proj-toggle{font-size:9px;color:var(--sidebar-mut);transition:transform 0.2s;}
.proj-item.collapsed .proj-toggle{transform:rotate(-90deg);}
.proj-item.collapsed .proj-tasks{display:none;}
.proj-tasks{padding:0 10px 8px;}
.proj-tasks .task-chip{background:rgba(255,255,255,0.04);border-left:2px solid rgba(255,255,255,0.1);}
.proj-tasks .task-chip:hover{background:rgba(255,255,255,0.08);}
.proj-add-btn{display:flex;align-items:center;gap:6px;width:calc(100% - 20px);margin:6px 10px 10px;padding:7px 10px;border:1px solid #1e4080;border-radius:7px;background:transparent;color:#60a5fa;font-size:11px;transition:all 0.2s;}
.proj-add-btn:hover{background:rgba(59,130,246,0.1);border-color:#3b82f6;}

/* Transit card */
.transit-card-wrap{border-bottom:1px solid var(--navy-mid);padding:8px 10px 10px;}
.transit-card-label{font-size:10px;font-weight:700;color:var(--sidebar-mut);letter-spacing:0.08em;margin-bottom:6px;padding-left:6px;}
.transit-chip{background:rgba(217,119,6,0.15);border:1px solid rgba(217,119,6,0.3);}
.transit-chip:hover{background:rgba(217,119,6,0.25);}
.transit-dur{background:rgba(217,119,6,0.3);color:#fbbf24;}

/* Sidebar footer */
.sidebar-footer{position:sticky;bottom:0;padding:10px 12px;background:var(--sidebar-bg);border-top:1px solid var(--navy-mid);}
.lib-add-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:9px;border:1.5px dashed #2d6099;border-radius:8px;background:none;color:var(--sidebar-mut);font-size:12px;transition:all 0.2s;}
.lib-add-btn:hover{border-color:#3b82f6;color:#94a3b8;}

/* ── Calendar Area ── */
.cal-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--cal-bg);}

.status-bar{flex-shrink:0;padding:8px 20px;border-bottom:1px solid var(--cal-border);background:var(--cal-bg);display:flex;align-items:center;gap:14px;}
.rem-label{font-size:12px;color:var(--cal-muted);white-space:nowrap;}
.rem-track{flex:1;max-width:200px;height:6px;background:var(--cal-border);border-radius:3px;overflow:hidden;}
.rem-fill{height:100%;background:var(--navy);border-radius:3px;transition:width 0.4s;}
body.dark .rem-fill{background:#4d82b8;}
.rem-fill.warn{background:#f59e0b;}
.rem-fill.over{background:#ef4444;}
.rem-val{font-size:13px;font-weight:700;color:var(--navy);white-space:nowrap;}
body.dark .rem-val{color:#7ba8d4;}
.hp-badges{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap;}
.hp-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:10px;white-space:nowrap;}
.hp-badge.fun  {background:var(--fun-light);  color:var(--fun-text);}
.hp-badge.love {background:var(--love-light); color:var(--love-text);}
.hp-badge.relax{background:var(--relax-light);color:var(--relax-text);}
.hp-badge.happy{background:var(--happy-light);color:var(--happy-text);}
.hp-badge.done {outline:2px solid currentColor;}
body.dark .hp-badge.fun  {background:rgba(217,119,6,0.25);  color:#fbbf24;}
body.dark .hp-badge.love {background:rgba(190,24,93,0.25);  color:#f9a8d4;}
body.dark .hp-badge.relax{background:rgba(22,163,74,0.25);  color:#6ee7b7;}
body.dark .hp-badge.happy{background:rgba(234,88,12,0.25);  color:#fdba74;}

/* Week header */
.week-head{flex-shrink:0;display:grid;grid-template-columns:52px repeat(7,1fr);border-bottom:1px solid var(--cal-border);background:var(--cal-bg);}
.wh-spacer{border-right:1px solid var(--cal-border);}
.wh-day{border-left:1px solid var(--cal-border);text-align:center;padding:7px 4px 6px;cursor:pointer;}
.wh-day .dn{font-size:11px;color:var(--cal-muted);font-weight:500;}
.wh-day .dd{font-size:20px;font-weight:700;color:var(--cal-text);line-height:1.1;margin-top:1px;}
.wh-day.today .dn{color:var(--navy);font-weight:700;}
body.dark .wh-day.today .dn{color:#7ba8d4;}
.wh-day.today .dd{background:var(--navy);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:1px auto 0;font-size:17px;}
body.dark .wh-day.today .dd{background:#4d82b8;}
.wh-day.wknd{opacity:0.45;}
body.dark .wh-day .dn{color:#64748b;}
body.dark .wh-day .dd{color:#cbd5e1;}

/* Allday row */
.allday-row{flex-shrink:0;display:grid;grid-template-columns:52px repeat(7,1fr);border-bottom:2px solid var(--cal-border);background:var(--cal-bg);min-height:30px;}
.allday-spacer{border-right:1px solid var(--cal-border);display:flex;align-items:center;justify-content:flex-end;padding:4px 7px 4px 2px;font-size:9px;color:var(--cal-muted);letter-spacing:0.06em;}
body.dark .allday-spacer{color:#4b5563;}
.allday-col{border-left:1px solid var(--cal-border);padding:3px 2px;min-height:30px;}
.allday-ev{font-size:10px;font-weight:600;padding:2px 7px;border-radius:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
.allday-ev.gcal-ev{background:#fff;border:1px solid #e8d4bc;color:#c09870;}
body.dark .allday-ev.gcal-ev{background:rgba(50,35,20,0.4);border-color:rgba(200,155,90,0.3);color:#c8a878;}

/* Week scroll */
.week-scroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;}
.week-scroll::-webkit-scrollbar{width:6px;}
.week-scroll::-webkit-scrollbar-track{background:var(--cal-bg);}
.week-scroll::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px;}
body.dark .week-scroll::-webkit-scrollbar-thumb{background:#2a2a2a;}

.week-body{display:grid;grid-template-columns:52px repeat(7,1fr);position:relative;}

/* Time col */
.time-col{position:relative;height:900px;border-right:1px solid var(--cal-border);}
.tl{position:absolute;right:8px;transform:translateY(-50%);font-size:10px;color:var(--cal-muted);white-space:nowrap;}

/* Day col */
.day-col{
  position:relative;height:900px;
  border-left:1px solid var(--cal-border);
  background-color:var(--cal-col-bg);
  background-image:repeating-linear-gradient(to bottom,transparent,transparent 59px,var(--cal-grid-line) 59px,var(--cal-grid-line) 60px);
}
.day-col.today-col{background-color:var(--cal-today-bg);}
.day-col.wknd-col {background-color:var(--cal-wknd-bg);}

/* Current time indicator */
.time-line{position:absolute;left:52px;right:0;height:2px;background:#ef4444;z-index:20;pointer-events:none;}
.time-line::before{content:'';position:absolute;left:-1px;top:-4px;width:10px;height:10px;background:#ef4444;border-radius:50%;}

/* Events */
.ev{
  position:absolute;left:3px;right:3px;
  border-radius:6px;padding:3px 6px;
  font-size:11px;line-height:1.15;overflow:hidden;min-height:15px;
  cursor:pointer;transition:filter 0.15s,transform 0.15s;user-select:none;
}
.ev:hover{filter:brightness(0.94);transform:scaleX(0.97);}
.ev .ev-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:3px;}
.ev .ev-time{font-size:10px;opacity:0.7;}
.ev.gcal-ev  {background:#fff;border:1.5px solid #e8d4bc;color:#c09870;}
.ev.fun-ev   {background:var(--grad-fun);  color:#7c2e30;}
.ev.love-ev  {background:var(--grad-love); color:#7c2848;}
.ev.relax-ev {background:var(--grad-relax);color:#1a5c52;}
.ev.happy-ev {background:var(--grad-happy);color:#7c4010;}
.ev.work-ev  {background:var(--grad-work); color:#3d1260;}
body.dark .ev.gcal-ev  {background:rgba(50,35,20,0.4);border:1.5px solid rgba(200,155,90,0.3);color:#c8a878;}
body.dark .ev.fun-ev   {background:linear-gradient(135deg,rgba(240,144,104,0.44),rgba(232,120,152,0.3));color:#ffd0b8;}
body.dark .ev.love-ev  {background:linear-gradient(135deg,rgba(232,168,188,0.44),rgba(244,191,210,0.3));color:#fce7f3;}
body.dark .ev.relax-ev {background:linear-gradient(135deg,rgba(126,207,200,0.44),rgba(184,232,180,0.3));color:#d0f0e8;}
body.dark .ev.happy-ev {background:linear-gradient(135deg,rgba(244,164,96,0.44),rgba(248,200,144,0.3));color:#ffe4c0;}
body.dark .ev.work-ev  {background:linear-gradient(160deg,rgba(136,192,240,0.44),rgba(176,144,216,0.35),rgba(232,122,176,0.3));color:#f0d8f8;}
.ev.overlap-l{left:3px;right:calc(50% + 2px);}
.ev.overlap-r{left:calc(50% + 2px);right:3px;}
.ev.completed{opacity:0.5;}

/* Transit strip */
.ev.transit-ev{
  left:auto;right:5px;width:28px;
  display:flex;flex-direction:column;align-items:center;
  padding:0;border-radius:4px;background:none;
  cursor:default;transition:none;overflow:visible;
}
.ev.transit-ev:hover{filter:none;transform:none;}
.ts-train{color:#d97706;flex-shrink:0;padding-top:2px;}
.ts-line{flex:1;width:2px;background:linear-gradient(to bottom,#d97706,#f59e0b);min-height:8px;}
.ts-arrow{color:#f59e0b;font-size:13px;line-height:1;flex-shrink:0;padding-bottom:2px;}
body.dark .ts-train{color:#fbbf24;}
body.dark .ts-line{background:linear-gradient(to bottom,#fbbf24,#f59e0b);}
body.dark .ts-arrow{color:#fbbf24;}
.resize-handle{position:absolute;left:0;right:0;height:8px;cursor:ns-resize;z-index:10;}
.resize-handle.top{top:-4px;}
.resize-handle.bot{bottom:-4px;}

/* Drop hint in day col */
.drop-hint{
  position:absolute;left:3px;right:3px;
  border:1.5px dashed #d1d5db;border-radius:6px;
  background:rgba(245,245,245,0.5);
  display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#d1d5db;pointer-events:none;transition:all 0.2s;
}
body.dark .drop-hint{border-color:#1a1a1a;color:#2a2a2a;background:transparent;}
.day-col.drag-over{background-color:rgba(45,96,153,0.06)!important;}
.day-col.drag-over .drop-hint{border-color:#2d6099;color:#2d6099;}
body.dark .day-col.drag-over .drop-hint{border-color:#4d82b8;color:#4d82b8;}

/* ── Modals ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:200;display:none;align-items:flex-end;}
.modal-overlay.show{display:flex;}
.modal-sheet{background:#fff;border-radius:20px 20px 0 0;padding:16px 20px 40px;width:100%;max-height:80vh;overflow-y:auto;animation:slideUp 0.25s ease;}
body.dark .modal-sheet{background:#111;}
@keyframes slideUp{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-handle{width:36px;height:4px;background:#d1d5db;border-radius:2px;margin:0 auto 14px;}
body.dark .modal-handle{background:#222;}
.modal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.modal-title{font-size:16px;font-weight:700;color:var(--cal-text);}
.modal-close{background:#f3f4f6;border:none;border-radius:50%;width:28px;height:28px;font-size:14px;color:#374151;}
body.dark .modal-close{background:#222;color:#e2e8f0;}
.form-row{margin-bottom:12px;}
.form-label{font-size:11px;color:#9ca3af;font-weight:500;margin-bottom:5px;display:block;}
body.dark .form-label{color:#4b5563;}
.form-input{width:100%;padding:10px 12px;border:1.5px solid #e2e8f0;border-radius:10px;font-size:13px;font-family:inherit;outline:none;transition:border-color 0.2s;background:#fff;color:#1f2937;}
.form-input:focus{border-color:var(--navy);}
body.dark .form-input{background:#000;border-color:#222;color:#e2e8f0;}
.form-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.form-submit{width:100%;padding:12px;background:var(--navy);color:#fff;border:none;border-radius:12px;font-size:14px;font-weight:700;font-family:inherit;margin-top:4px;transition:background 0.2s;}
.form-submit:hover{background:#2a5298;}
.cat-selector{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.cat-btn{padding:9px 6px;border-radius:9px;border:2px solid transparent;font-size:11px;font-weight:700;text-align:center;font-family:inherit;transition:all 0.15s;text-shadow:0 1px 3px rgba(0,0,0,0.25);}
.cat-btn.fun-btn  {background:var(--grad-fun);  color:#7c2e30;}
.cat-btn.love-btn {background:var(--grad-love); color:#7c2848;}
.cat-btn.relax-btn{background:var(--grad-relax);color:#1a5c52;}
.cat-btn.happy-btn{background:var(--grad-happy);color:#7c4010;}
.cat-btn.sel{border-color:var(--cal-text);transform:scale(1.04);box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.color-picker{display:flex;gap:10px;padding:4px 0;}
.color-swatch{width:32px;height:32px;border-radius:50%;border:2.5px solid transparent;transition:transform 0.15s,border-color 0.15s;}
.color-swatch.sel{border-color:var(--cal-text);transform:scale(1.15);}

/* SortableJS */
.sortable-ghost{opacity:0.35;background:var(--sidebar-2)!important;}
.sortable-chosen{cursor:grabbing!important;}