:root{
  --bg:#f6f8fb;--surface:#ffffff;--surface2:#f9fbff;--text:#162033;--muted:#7a8497;--line:#e8edf5;--blue:#4f8cff;--blue2:#7fb3ff;--green:#31c48d;--red:#ff6b6b;--amber:#f6b84b;--shadow:0 20px 60px rgba(36,54,92,.10);--radius:24px
}
*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at top left,#eef5ff 0,#f7f9fc 34%,#f6f8fb 100%);color:var(--text)}button,input,select,textarea{font:inherit}.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}.sidebar{padding:26px 18px;background:rgba(255,255,255,.76);backdrop-filter:blur(20px);border-right:1px solid var(--line);position:sticky;top:0;height:100vh}.brand{display:flex;gap:14px;align-items:center;margin-bottom:30px}.brand-mark{width:44px;height:44px;border-radius:16px;background:linear-gradient(135deg,var(--blue),#9cc7ff);display:grid;place-items:center;color:white;font-weight:800;box-shadow:0 12px 30px rgba(79,140,255,.3)}.brand h1{font-size:20px;margin:0}.brand p{margin:3px 0 0;color:var(--muted);font-size:12px}.nav{display:grid;gap:8px}.nav-item{border:0;background:transparent;text-align:left;padding:13px 15px;border-radius:16px;color:#586174;cursor:pointer;transition:.2s}.nav-item:hover{background:#f1f5fb;color:var(--text)}.nav-item.active{background:linear-gradient(135deg,#eff6ff,#fff);color:var(--blue);font-weight:700;box-shadow:inset 0 0 0 1px #e4efff}.side-note{position:absolute;left:18px;right:18px;bottom:22px;padding:16px;border-radius:18px;background:#f7f9fd;border:1px solid var(--line)}.side-note span{font-weight:700}.side-note p{margin:4px 0 0;color:var(--muted);font-size:12px}.main{padding:28px 34px 60px;min-width:0}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.topbar h2{font-size:30px;margin:2px 0 0}.muted{color:var(--muted)}.top-actions{display:flex;gap:10px}.ghost-btn,.primary-btn,.import-label{border:0;border-radius:14px;padding:11px 15px;background:#fff;color:var(--text);box-shadow:0 8px 24px rgba(30,48,90,.08);cursor:pointer}.primary-btn{background:linear-gradient(135deg,var(--blue),#78b0ff);color:white;font-weight:800}.import-label input{display:none}.page{display:none}.page.active{display:block}.hero-card{display:flex;justify-content:space-between;align-items:center;padding:32px;border-radius:32px;margin-bottom:20px;min-height:178px;background:linear-gradient(135deg,#ffffff 0,#f5f9ff 55%,#eaf4ff 100%);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.8)}.hero-card h3{font-size:42px;margin:0 0 8px}.progress-ring{width:126px;height:126px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--blue) 0deg,#e8eef7 0deg);position:relative}.progress-ring:after{content:"";position:absolute;inset:12px;background:white;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}.progress-ring span{position:relative;z-index:1;font-weight:900;font-size:22px}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:20px}.metric-grid.small{grid-template-columns:repeat(3,1fr);margin-top:20px}.metric-card{background:rgba(255,255,255,.9);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:0 14px 42px rgba(30,48,90,.06)}.metric-card span{display:block;color:var(--muted);font-size:13px}.metric-card strong{display:block;font-size:26px;margin:9px 0 4px;white-space:nowrap}.metric-card small{color:var(--muted)}.content-grid{display:grid;gap:20px;margin-bottom:20px}.content-grid.two{grid-template-columns:1fr 1fr}.content-grid.two-one{grid-template-columns:2fr 1fr}.panel{background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:0 16px 46px rgba(30,48,90,.07);min-width:0}.panel-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.panel-head h3{margin:0;font-size:21px}.mini-list{display:grid;gap:10px}.mini-item{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:13px 14px;border-radius:16px;background:var(--surface2);border:1px solid var(--line)}.mini-item strong{font-size:14px}.pill{display:inline-flex;align-items:center;border-radius:999px;background:#eef5ff;color:#2f6fd6;font-weight:800;font-size:12px;padding:7px 10px}.pill.green{background:#ecfdf5;color:#159365}.pill.red{background:#fff1f1;color:#d24d4d}.pill.amber{background:#fff8e8;color:#a86c00}.compact-timeline{position:relative;display:grid;gap:10px}.compact-timeline:before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:#dce8f9}.compact-timeline .tl-mini{padding-left:30px;position:relative}.compact-timeline .tl-mini:before{content:"";position:absolute;left:3px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--blue)}.life-timeline{position:relative;padding:10px 0 10px 24px}.life-timeline:before{content:"";position:absolute;left:31px;top:0;bottom:0;width:2px;background:linear-gradient(var(--blue),#dce9ff)}.timeline-card{display:grid;grid-template-columns:70px 1fr auto;gap:18px;align-items:start;position:relative;margin:0 0 18px;padding:20px 20px 20px 34px;border-radius:22px;background:linear-gradient(135deg,#fff,#f8fbff);border:1px solid var(--line)}.timeline-card:before{content:"";position:absolute;left:-1px;top:24px;width:16px;height:16px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 6px #eaf3ff}.timeline-age{font-weight:900;font-size:22px;color:var(--blue)}.timeline-card h4{margin:0 0 8px;font-size:18px}.timeline-meta{display:flex;flex-wrap:wrap;gap:8px}.card-actions{display:flex;gap:8px}.icon-btn{border:0;background:#f0f4fa;border-radius:12px;padding:8px 10px;cursor:pointer}.gantt-wrap{overflow-x:auto;padding-bottom:8px}.months{display:grid;grid-template-columns:repeat(12,92px);min-width:1104px;border-bottom:1px solid var(--line);padding-bottom:10px;color:var(--muted);font-weight:800;text-align:center}.gantt-rows{min-width:1104px;display:grid;gap:12px;margin-top:14px}.gantt-row{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:center}.gantt-label{font-weight:800}.gantt-track{position:relative;height:44px;background:repeating-linear-gradient(90deg,#f7f9fd 0,#f7f9fd 91px,#edf2f8 92px);border-radius:14px;border:1px solid var(--line);overflow:hidden}.gantt-bar{position:absolute;top:8px;height:28px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--blue2));color:white;font-size:12px;font-weight:800;display:flex;align-items:center;padding:0 12px;white-space:nowrap;overflow:hidden}.gantt-dot{position:absolute;top:13px;width:18px;height:18px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 6px rgba(246,184,75,.16)}.form-grid{display:grid;gap:16px}.form-grid.two{grid-template-columns:repeat(2,1fr)}.form-grid.three{grid-template-columns:repeat(3,1fr)}label{display:grid;gap:8px;color:#596275;font-size:13px;font-weight:700}input,select,textarea{border:1px solid var(--line);background:#fbfcff;border-radius:14px;padding:12px 13px;outline:none;color:var(--text)}input:focus,textarea:focus,select:focus{border-color:#9cc7ff;box-shadow:0 0 0 4px rgba(79,140,255,.12)}.summary-panel h3{font-size:36px;margin:0}.summary-panel p{display:flex;justify-content:space-between;gap:10px}.summary-panel hr{border:0;border-top:1px solid var(--line);margin:18px 0}.range-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px}input[type=range]{padding:0}.bucket-list,.todo-list{display:grid;gap:14px}.bucket-card,.todo-card{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:18px;border-radius:22px;background:linear-gradient(135deg,#fff,#f9fbff);border:1px solid var(--line)}.bucket-card.done{background:linear-gradient(135deg,#f0fff8,#fff);border-color:#c8f4df}.bucket-card h4,.todo-card h4{margin:0 0 8px}.bucket-info,.todo-info{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:13px}.todo-card.urgent{border-color:#ffd0d0;background:linear-gradient(135deg,#fff7f7,#fff)}.empty-feature{text-align:center;padding:48px}.habit-preview{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:20px}.habit-preview span{background:#f0f5ff;border-radius:999px;padding:10px 14px;font-weight:800;color:#4d75c9}.danger{color:var(--red)}
.chart-frame{position:relative;width:100%;height:360px;min-height:280px;max-height:460px;overflow:hidden;border-radius:18px;background:linear-gradient(180deg,#fff,#fbfdff)}
.chart-frame-dashboard{height:360px}
.chart-frame-finance{height:420px}
.chart-frame canvas{display:block;width:100%!important;height:100%!important;max-height:100%!important}
.content-grid.two-one{align-items:start}
@media(max-width:1000px){.chart-frame,.chart-frame-dashboard,.chart-frame-finance{height:320px;min-height:260px}.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.main{padding:22px}.metric-grid,.content-grid.two,.content-grid.two-one,.form-grid.three,.form-grid.two,.range-row{grid-template-columns:1fr}.topbar{align-items:flex-start;gap:16px;flex-direction:column}.timeline-card{grid-template-columns:1fr}.sidebar .side-note{position:static;margin-top:20px}}

/* ===== v1.2: Life Design v3 style tuning ===== */
:root{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --text:#202938;
  --muted:#6b7280;
  --line:#e8edf4;
  --blue:#4f8cff;
  --accent:#ff7a45;
}
body{
  background:#f4f6fb;
}
.app-shell{
  grid-template-columns:220px minmax(0,1fr);
}
.sidebar{
  background:#fff;
  border-right:1px solid #e7ebf2;
  padding:26px 16px;
  box-shadow:none;
}
.brand-mark{
  background:linear-gradient(135deg,#ff5f5f,#ff8b5e);
  border-radius:15px;
}
.brand h1{font-size:17px;letter-spacing:-.02em}.brand p{font-size:11px}
.nav{gap:6px}.nav-item{border-radius:10px;padding:11px 12px;font-weight:700;color:#344054}.nav-item.active{background:#eaf6ff;color:#1e76b9;box-shadow:none}.nav-item:hover{background:#f2f7fc}
.main{padding:28px 34px 80px;max-width:1480px}.topbar{margin-bottom:28px}.topbar h2{font-size:30px;letter-spacing:-.04em}.ghost-btn,.primary-btn,.import-label{border-radius:9px;box-shadow:0 8px 20px rgba(24,39,75,.05);font-weight:800}.primary-btn{background:#ff7547;color:#fff}.ghost-btn.compact,.primary-btn.compact{padding:9px 12px;font-size:12px}.panel{border-radius:18px;box-shadow:0 16px 44px rgba(31,41,55,.05);border:1px solid #e8edf4;background:#fff}.panel-head h3{font-size:20px}.metric-card{border-radius:16px;box-shadow:0 10px 26px rgba(31,41,55,.04)}

/* Annual event design - reference style */
.annual-card{
  padding:24px 26px 18px;
  overflow:hidden;
}
.annual-panel-head{
  align-items:flex-start;
  margin-bottom:14px;
}
.schedule-label{
  color:#6b7280;
  letter-spacing:.55em;
  font-size:12px;
  margin-bottom:8px;
}
.annual-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.annual-year-label{min-width:48px;text-align:center;font-size:18px;color:#1f2937}
.annual-wrap{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  min-height:375px;
  padding:28px 0 16px;
  border:1px solid #edf1f7;
  border-radius:16px;
  background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);
}
.annual-wrap::after{
  content:"";
  position:absolute;
  left:0;right:0;top:118px;height:1px;
  background:#dadfe8;
  min-width:1120px;
}
.annual-months,
.annual-track{
  position:relative;
  min-width:1120px;
}
.annual-months{
  height:72px;
  margin:0 36px;
}
.annual-months::before{
  content:"";
  position:absolute;
  left:0;right:0;top:44px;height:3px;
  background:#1f2937;
  border-radius:999px;
}
.annual-year-left,.annual-year-right{
  position:absolute;top:4px;font-size:24px;font-weight:900;color:#334155;letter-spacing:.03em;
}
.annual-year-left{left:0}.annual-year-right{right:0}
.annual-month{
  position:absolute;top:36px;transform:translateX(-50%);font-size:11px;font-weight:900;color:#334155;letter-spacing:.16em;
}
.annual-dot{
  position:absolute;top:39px;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#111827;z-index:2;
}
.annual-track{
  height:270px;
  margin:0 36px;
}
.annual-track::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(90deg, transparent 0, transparent 92px, rgba(148,163,184,.55) 93px, transparent 94px);
  pointer-events:none;
}
.phase-bar{
  position:absolute;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#111827,#111827 70%,rgba(17,24,39,.55));
  z-index:2;
}
.phase-label{
  position:absolute;
  z-index:3;
  min-width:128px;
  padding-left:10px;
  border-left:1px solid rgba(17,24,39,.28);
  color:#6b7280;
  font-size:11px;
  line-height:1.35;
}
.phase-label strong{
  display:block;
  color:#111827;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.phase-label span{display:block;max-width:160px}
.event-card{
  margin-left:24px;
  width:150px;
  min-height:110px;
  padding:0 8px;
  background:transparent;
}
.event-date{
  display:block;
  color:#ef6b6b;
  font-size:12px;
  font-weight:900;
  margin-bottom:8px;
}
.event-card strong{
  display:block;
  color:#1f2937;
  font-size:13px;
  line-height:1.35;
  margin-bottom:6px;
}
.event-card p{
  margin:0;
  color:#6b7280;
  font-size:11px;
  line-height:1.45;
}
.event-card em{
  display:block;
  margin-top:8px;
  color:#334155;
  font-style:normal;
  font-size:10px;
  font-weight:800;
}
.empty-annual{padding:70px 0;text-align:center;color:#94a3b8;font-weight:700}
@media(max-width:1000px){
  .app-shell{grid-template-columns:1fr}.main{padding:22px}.annual-wrap{min-height:400px}.annual-actions{width:100%}
}


/* ===== v1.3: Annual timeline rebuild - clean reference style ===== */
.annual-card{
  margin-bottom:28px;
  padding:24px 26px 18px;
  overflow:hidden;
  background:#fff;
  border-radius:18px;
  border:1px solid #e8edf4;
  box-shadow:0 16px 44px rgba(31,41,55,.05);
}
.annual-panel-head{align-items:flex-start;margin-bottom:18px;}
.schedule-label{
  margin:0 0 8px;
  color:#6b7280;
  letter-spacing:.55em;
  font-size:12px;
  font-weight:900;
}
.annual-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.annual-year-label{min-width:52px;text-align:center;font-size:18px;font-weight:900;color:#1f2937;}
.annual-wrap{
  position:relative;
  overflow-x:auto;
  overflow-y:hidden;
  min-height:460px;
  padding:36px 8px 22px;
  border:1px solid #eef1f5;
  border-radius:18px;
  background:
    linear-gradient(180deg, transparent 0 106px, rgba(31,41,55,.045) 106px 182px, transparent 182px),
    linear-gradient(135deg,rgba(255,255,255,.98),rgba(247,249,252,.98));
}
.annual-wrap::after{display:none;}
.annual-months,.annual-track{position:relative;min-width:1180px;margin:0 28px;}
.annual-months{height:78px;}
.annual-months::before{
  content:"";
  position:absolute;
  left:0;right:0;top:52px;
  height:2px;
  background:#20242b;
  border-radius:999px;
}
.annual-year-left,.annual-year-right{
  position:absolute;
  top:0;
  font-size:22px;
  color:#334155;
  font-weight:900;
  letter-spacing:.06em;
}
.annual-year-left{left:0;}.annual-year-right{right:0;}
.annual-month{
  position:absolute;
  top:34px;
  transform:translateX(-50%);
  font-size:10px;
  line-height:1;
  font-weight:900;
  letter-spacing:.18em;
  color:#111827;
  text-transform:uppercase;
  z-index:2;
  background:rgba(255,255,255,.92);
  padding:0 4px;
}
.annual-dot{
  position:absolute;
  top:49px;
  transform:translateX(-50%);
  width:7px;height:7px;
  border-radius:50%;
  background:#111827;
  z-index:3;
}
.annual-track{
  height:330px;
  background:repeating-linear-gradient(90deg,transparent 0,transparent 97px,rgba(148,163,184,.35) 98px,transparent 99px);
}
.phase-bar{
  position:absolute;
  height:8px;
  border-radius:999px;
  background:#1f2937;
  opacity:.88;
  z-index:2;
}
.phase-label{
  position:absolute;
  z-index:3;
  min-width:136px;
  max-width:178px;
  padding-left:12px;
  border-left:1px solid #cbd5e1;
  font-size:11px;
  line-height:1.45;
  color:#6b7280;
}
.phase-label strong{
  display:block;
  color:#111827;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:2px;
}
.event-card{
  position:relative;
  margin-left:24px;
  width:152px;
  min-height:108px;
  padding:0 8px;
  background:transparent;
  box-shadow:none;
  border:0;
  border-radius:0;
}
.event-date{
  display:block;
  color:#ef6b6b;
  font-size:12px;
  font-weight:900;
  margin-bottom:7px;
  letter-spacing:.06em;
}
.event-card strong{
  display:block;
  color:#111827;
  font-size:13px;
  line-height:1.35;
  letter-spacing:.03em;
  margin-bottom:6px;
}
.event-card p{margin:0;color:#6b7280;font-size:11px;line-height:1.5;}
.event-card em,.event-card .event-cost{display:block;margin-top:8px;color:#334155;font-style:normal;font-size:10px;font-weight:800;}
.empty-annual{padding:96px 20px;text-align:center;color:#94a3b8;font-weight:700;}
@media(max-width:1000px){.annual-wrap{min-height:460px}.annual-months,.annual-track{min-width:1080px}}


/* ===== v1.4: Annual event compact Gantt rows ===== */
body{
  background:linear-gradient(180deg,#f2f5fb 0%,#f7f9fc 48%,#f4f7fb 100%);
  color:#1f2937;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}
.sidebar{background:rgba(255,255,255,.82);box-shadow:8px 0 34px rgba(31,41,55,.035)}
.brand-mark{background:linear-gradient(135deg,#ff5f45,#ff8a5c);box-shadow:0 10px 26px rgba(255,95,69,.28)}
.nav-item{font-weight:800;color:#4b5563}.nav-item.active{background:#eaf4ff;color:#1976e6;box-shadow:none}.side-note{background:#fbfcff;border-color:#e5ebf3;box-shadow:0 12px 28px rgba(31,41,55,.04)}
.topbar h2{color:#172033}.annual-card{background:#fff;border:1px solid #e3e9f2;border-radius:22px;box-shadow:0 22px 70px rgba(31,41,55,.075);padding:28px}.schedule-label{color:#64748b;letter-spacing:.48em}.annual-card .panel-head h3{font-size:23px;color:#111827}.annual-card .muted{font-size:15px;color:#64748b}.ghost-btn,.import-label{background:#fff;border:1px solid #edf1f7;border-radius:10px;box-shadow:0 10px 24px rgba(31,41,55,.06);font-weight:900}.primary-btn{background:#ff7148;border-radius:10px;box-shadow:0 12px 28px rgba(255,113,72,.22);font-weight:900}.annual-year-label{font-size:19px;color:#172033}
.annual-wrap{min-height:auto;padding:28px 0 8px;border:1px solid #e5ebf3;border-radius:18px;background:linear-gradient(180deg,#fff 0%,#fbfcff 100%);overflow-x:auto;overflow-y:hidden}.annual-months,.annual-track{margin:0 24px;position:relative}.annual-months{height:86px}.annual-months::before{display:none}.annual-axis-line{position:absolute;top:58px;height:2px;background:#1f2937;border-radius:999px}.annual-year-left,.annual-year-right{top:6px;font-size:25px;color:#334155;letter-spacing:.04em}.annual-year-left{left:0}.annual-year-right{right:0}.annual-month{top:43px;transform:translateX(-50%);font-size:10px;letter-spacing:.18em;color:#111827;background:transparent;padding:0}.annual-dot{top:55px;width:8px;height:8px;background:#111827;box-shadow:0 0 0 3px rgba(255,255,255,.95)}
.annual-track{border-top:1px solid #e8edf4;border-bottom:1px solid #e8edf4;background:linear-gradient(180deg,rgba(31,41,55,.035) 0 48px,transparent 48px)}.annual-grid{position:absolute;top:0;bottom:0;pointer-events:none}.annual-grid-line{position:absolute;top:0;bottom:0;width:1px;background:#dfe5ee}.annual-row{position:absolute;left:0;right:0;border-bottom:1px solid #e8edf4}.annual-row-label{position:absolute;left:0;top:0;width:170px;height:100%;padding:22px 34px 12px 18px;background:rgba(255,255,255,.55);border-right:1px solid #e8edf4}.annual-row-label strong{display:block;font-size:18px;line-height:1.2;color:#111827;font-weight:900;margin-bottom:8px}.annual-row-label span{display:block;font-size:12px;color:#64748b;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.annual-row-label b{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:24px;color:#111827;font-weight:900}.annual-row-bar{height:9px;background:#253142;border-radius:999px;box-shadow:0 2px 7px rgba(31,41,55,.2);opacity:.94;z-index:3}.annual-row-event{width:178px;transform:none;z-index:5}.annual-row-event::before{left:0;top:-18px;height:72px;border-left:1px solid #c7d0dc}.annual-row-event .marker{left:-5px;top:-23px;width:10px;height:10px;background:#111827}.annual-row-event .arrow{display:none}.annual-row-event .event-card{margin-left:14px;width:156px;min-height:0;padding:0 4px}.annual-row-event .event-date{font-size:13px;color:#ff4f4f;margin-bottom:4px}.annual-row-event .event-card strong{font-size:13px;color:#111827;line-height:1.25;margin-bottom:4px}.annual-row-event .event-card p{font-size:11px;line-height:1.35;color:#64748b}.annual-row-event .event-card em{font-size:10px;line-height:1.35;margin-top:6px;color:#334155}.empty-annual{padding:60px 20px;text-align:center;color:#94a3b8;font-weight:800}
@media(max-width:1000px){.annual-wrap{min-height:auto}.annual-row-label{width:150px}.annual-card{padding:20px}.annual-panel-head{flex-direction:column}.annual-actions{width:100%}}


/* ===== v1.5: Annual Gantt row height compact adjustment ===== */
.annual-track{
  background:linear-gradient(180deg,rgba(31,41,55,.032) 0 34px,transparent 34px);
}
.annual-row-label{
  padding:13px 30px 8px 18px;
}
.annual-row-label strong{
  font-size:15px;
  line-height:1.15;
  margin-bottom:5px;
}
.annual-row-label span{
  font-size:11px;
  line-height:1.25;
}
.annual-row-label b{
  right:15px;
  font-size:20px;
}
.annual-row-bar{
  height:8px;
}
.annual-row-event{
  width:166px;
}
.annual-row-event::before{
  top:-14px;
  height:46px;
}
.annual-row-event .marker{
  top:-19px;
  width:9px;
  height:9px;
}
.annual-row-event .event-card{
  margin-left:13px;
  width:146px;
}
.annual-row-event .event-date{
  font-size:12px;
  margin-bottom:3px;
}
.annual-row-event .event-card strong{
  font-size:12px;
  line-height:1.2;
  margin-bottom:3px;
}
.annual-row-event .event-card p{
  font-size:10px;
  line-height:1.25;
}
.annual-row-event .event-card em{
  font-size:9px;
  line-height:1.25;
  margin-top:4px;
}


/* ===== v1.6: Annual Gantt line alignment and row spacing ===== */
.annual-track::before{
  display:none !important;
}
.annual-grid-line{
  background:#dfe5ee;
  opacity:.82;
}
.annual-track{
  background:linear-gradient(180deg,rgba(31,41,55,.03) 0 44px,transparent 44px);
}
.annual-row-label{
  padding:20px 34px 12px 18px;
}
.annual-row-label strong{
  font-size:16px;
  line-height:1.2;
  margin-bottom:6px;
}
.annual-row-label span{
  font-size:11px;
  line-height:1.35;
}
.annual-row-bar{
  height:8px;
}
.annual-row-event{
  width:172px;
}
.annual-row-event::before{
  top:-23px;
  height:64px;
  border-left:1px solid #bfc9d6;
}
.annual-row-event .marker{
  top:-28px;
  width:9px;
  height:9px;
}
.annual-row-event .event-card{
  width:152px;
}
.annual-row-event .event-card p{
  display:none;
}
.annual-row-event .event-card strong{
  font-size:12px;
  line-height:1.25;
}
.annual-row-event .event-card em{
  font-size:10px;
  line-height:1.35;
  margin-top:5px;
}

/* ===== v1.7: Apple-inspired life timeline / journey map ===== */
:root{
  --life-red:#ef3340;
  --life-red-soft:#fff0f1;
  --life-red-pale:#f3a1a8;
  --life-ink:#172033;
  --life-sub:#6f7787;
  --life-grid:#edf0f5;
}
body{
  background:#f2f3f5;
}
.topbar:has(+ #timeline.active){display:none;}
#timeline{
  max-width:1500px;
  margin:0 auto;
}


.life-date{
  color:var(--life-red);
  letter-spacing:.08em;
  margin-bottom:2px;
}
.life-page-actions{
  display:flex;
  gap:14px;
}
#timeline .ghost-btn,
#timeline .import-label{
  border:1px solid #e6e9ef;
  background:#fff;
  color:#111827;
  border-radius:10px;
  box-shadow:none;
  padding:12px 18px;
  font-weight:800;
}
#timeline .panel{
  border-radius:14px;
  border:1px solid #e7eaf0;
  box-shadow:none;
  background:#fff;
}
.life-journey-panel{
  padding:22px 26px 18px;
}
.life-section-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:flex-start;
  margin-bottom:18px;
}
.journey-dots{
  display:flex;
  align-items:center;
  gap:12px;
  color:#c6ccd5;
  padding-top:8px;
}
.journey-dots span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d8dde6;
  display:block;
}
.journey-dots span.active{background:var(--life-red)}
.journey-dots button{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid #e6e9ef;
  background:#fff;
  color:#6f7787;
  font-size:20px;
}
.journey-map-table{
  display:grid;
  grid-template-columns:112px repeat(5,minmax(180px,1fr));
  border:1px solid var(--life-grid);
  border-radius:0;
  overflow:hidden;
  background:#fff;
}
.journey-row{display:contents;}
.journey-row-label,
.journey-cell{
  min-height:58px;
  border-right:1px dashed #dfe4ec;
  border-bottom:1px solid var(--life-grid);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 18px;
}
.journey-row-label{
  padding-left:10px;
  padding-right:10px;
  white-space:nowrap;
  word-break:keep-all;
}
.journey-row-label{
  color:#111827;
  font-size:13px;
  font-weight:900;
  letter-spacing:.04em;
}
.journey-row.phase-main .journey-row-label{
  color:var(--life-red);
}
.journey-row.phase-goal .journey-row-label,
.journey-row.phase-status .journey-row-label,
.journey-row.phase-actions .journey-row-label{
  color:var(--life-red);
  font-size:12px;
}
.journey-cell:last-child{border-right:0;}
.journey-row.phase-actions .journey-cell,
.journey-row.phase-actions .journey-row-label{border-bottom:0;}
.journey-row.phase-main .journey-cell{
  min-height:128px;
  flex-direction:column;
  gap:6px;
}
.journey-cell strong{
  display:block;
  font-size:70px;
  line-height:.9;
  letter-spacing:-.06em;
  font-weight:300;
  color:#c7cbd3;
}
.journey-cell.current strong{
  color:var(--life-red);
  font-weight:300;
}
.journey-cell b{
  display:block;
  font-size:16px;
  color:var(--life-ink);
  letter-spacing:-.02em;
}
.journey-cell span{
  color:#4b5563;
  font-size:13px;
}
.journey-cell p{
  margin:0;
  color:#111827;
  font-size:14px;
  line-height:1.65;
  max-width:210px;
}
.status-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:54px;
  height:24px;
  padding:0 12px;
  border-radius:7px;
  background:#f1f3f6;
  color:#4b5563;
  font-size:12px;
  font-weight:900;
}
.status-badge.active{
  color:var(--life-red);
  background:#fff0f1;
  border:1px solid #ffd7da;
}
.dot-menu{
  border:0;
  background:transparent;
  color:#172033;
  font-size:20px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
}
.generated-head,
.generated-row{
  display:contents;
}
.generated-head span,
.generated-row > span,
.generated-row > strong{
  min-height:32px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--life-grid);
  color:#243044;
  font-size:14px;
}
.generated-head span{
  min-height:34px;
  color:#4b5563;
  font-size:12px;
  font-weight:900;
}
.generated-row strong{
  font-weight:900;
  color:#111827;
}
.timeline-note{
  color:#344054!important;
}
.timeline-year{
  color:#344054!important;
}
.timeline-dot{
  position:relative;
  justify-content:center;
}
.timeline-dot:before{
  content:"";
  width:9px;
  height:9px;
  border-radius:50%;
  background:#e4777f;
  display:block;
  z-index:2;
}
.generated-row.current .timeline-dot:before{
  background:var(--life-red);
}
.generated-row.current .timeline-dot:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:16px;
  width:2px;
  background:rgba(239,51,64,.55);
}
.phase-chip{
  justify-self:start;
  align-self:center;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:42px;
  height:22px;
  border-radius:7px;
  border:1px solid #e3e6ec;
  background:#f3f5f8;
  color:#667085!important;
  font-weight:900;
  font-size:12px!important;
  min-height:22px!important;
  padding:0 10px;
}
.phase-chip.active{
  color:var(--life-red)!important;
  background:var(--life-red-soft);
  border-color:#ffd7da;
}
.phase-detail-panel{
  margin-top:18px;
  padding:22px 26px 24px;
}
.phase-detail-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:24px;
}
.phase-form-grid{
  display:grid;
  grid-template-columns:1fr 1.35fr 1.35fr;
  gap:20px 28px;
}
.phase-form-grid label{
  color:#384153;
  font-size:12px;
  font-weight:800;
}
.phase-form-grid input,
.phase-form-grid select,
.phase-form-grid textarea{
  border-radius:8px;
  background:#fff;
  border:1px solid #dde3ec;
  box-shadow:none;
}
.phase-form-grid textarea{
  min-height:76px;
  resize:vertical;
}
.phase-save-row{
  display:flex;
  justify-content:flex-end;
  margin-top:18px;
}
#timeline .primary-btn{
  background:var(--life-red);
  border-radius:8px;
  box-shadow:none;
}
#timeline .danger{
  color:var(--life-red);
  border-color:#ffd6da;
  background:#fff;
}
@media(max-width:1100px){
  .journey-map-table{grid-template-columns:82px repeat(5,220px);overflow-x:auto;}
  .life-journey-panel{overflow-x:auto;}
  .generated-timeline{grid-template-columns:28px 90px 1fr 1.4fr 80px;}
  .phase-form-grid{grid-template-columns:1fr;}

}

/* ===== v1.8: Journey map phase selection ===== */
.journey-row-label{
  white-space:nowrap;
  word-break:keep-all;
}
.journey-cell.selected{
  background:rgba(239,51,64,.025);
}
.journey-row.phase-main .journey-cell.selected{
  box-shadow:inset 0 3px 0 rgba(239,51,64,.75);
}
.dot-menu{
  min-width:38px;
  min-height:28px;
  border-radius:7px;
}
.dot-menu:hover,
.journey-cell.selected .dot-menu{
  outline:2px solid #1a73e8;
  outline-offset:0;
  color:#1a73e8;
}
.status-badge{
  white-space:nowrap;
}
.generated-head span:last-child,
.generated-row > span:last-child,
.generated-row > button:last-child{
  justify-self:stretch;
}
.phase-chip{
  cursor:pointer;
}
.phase-chip:hover{
  border-color:#cbd5e1;
  background:#fff;
}


/* ===== v1.9: Journey map label nowrap + generated timeline full-width phase line ===== */
.journey-map-table{
  grid-template-columns:112px repeat(5,minmax(180px,1fr));
}
.journey-row-label{
  white-space:nowrap!important;
  word-break:keep-all!important;
  padding-left:10px!important;
  padding-right:10px!important;
  min-width:112px;
}
.journey-row.phase-status .journey-row-label{
  font-size:12px;
  letter-spacing:.02em;
}
.generated-row > .phase-cell{
  min-height:32px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  border-bottom:1px solid var(--life-grid);
  color:#243044;
  font-size:14px;
}
.generated-head span:last-child{
  border-bottom:1px solid var(--life-grid);
}
.generated-row > .phase-cell .phase-chip{
  width:auto!important;
  min-width:42px;
  height:22px!important;
  min-height:22px!important;
  justify-self:start;
  align-self:center;
  border-bottom:1px solid #e3e6ec;
}
.generated-row.current > .phase-cell .phase-chip{
  color:var(--life-red)!important;
  background:var(--life-red-soft);
  border-color:#ffd7da;
}
.side-note span::after{content:"";}
@media(max-width:1100px){
  .journey-map-table{grid-template-columns:112px repeat(5,220px)!important;}
}


/* ===== v2.0: Phase add button + clean correction dots ===== */
.phase-detail-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.journey-row.phase-actions .journey-row-label{
  color:var(--life-red);
  white-space:nowrap!important;
}
.dot-menu{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:#111827;
  font-weight:900;
  min-width:auto;
  min-height:auto;
  padding:4px 10px;
  border-radius:0;
  line-height:1;
  cursor:pointer;
}
.dot-menu:hover,
.journey-cell.selected .dot-menu{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--life-red);
}
.status-badge{white-space:nowrap;}
@media(max-width:800px){
  .phase-detail-head{align-items:flex-start;gap:14px;}
  .phase-detail-actions{justify-content:flex-start;}
}


/* ===== v2.3 final: Journey map pager / vertical layout ===== */
.side-note span{font-size:0!important;}
.side-note span::before{content:"Ver 2.3";font-size:16px;}

#timeline{
  max-width:1500px;
  margin:0 auto;
}

.life-journey-panel{
  overflow:hidden!important;
}

.journey-scroll{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:14px;
  scrollbar-width:thin;
  scrollbar-color:rgba(17,24,39,.28) transparent;
}
.journey-scroll::-webkit-scrollbar{height:8px;}
.journey-scroll::-webkit-scrollbar-track{background:#f3f4f6;border-radius:999px;}
.journey-scroll::-webkit-scrollbar-thumb{background:rgba(17,24,39,.28);border-radius:999px;}

.journey-map-table{
  display:grid!important;
  overflow:visible!important;
}

.journey-dots{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding-top:0!important;
}

.journey-dots-list{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
}

.journey-dots-list span{
  width:8px!important;
  height:8px!important;
  border-radius:50%!important;
  background:#d7dbe3!important;
  display:block!important;
}

.journey-dots-list span.active{
  background:var(--life-red)!important;
}

.journey-dots button{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  border-radius:50%!important;
  border:1px solid #e4e8ef!important;
  background:#fff!important;
  color:#172033!important;
  box-shadow:none!important;
  line-height:1!important;
  font-size:25px!important;
  font-weight:500!important;
  cursor:pointer;
}

.journey-dots button:disabled{
  opacity:.35!important;
  cursor:default!important;
}

.journey-row-label{
  white-space:nowrap!important;
  word-break:keep-all!important;
  line-height:1!important;
}

.journey-row.phase-status .journey-row-label{
  font-size:12px!important;
  letter-spacing:.02em!important;
}

.timeline-age-col{
  display:flex!important;
  align-items:center!important;
  color:#667085!important;
  font-size:14px!important;
  border-bottom:1px solid var(--life-grid)!important;
}

.generated-head span,
.generated-row > span,
.generated-row > strong,
.generated-row > .phase-cell{
  border-bottom:1px solid var(--life-grid)!important;
}

.generated-row.current > .phase-cell .phase-chip{
  color:var(--life-red)!important;
  background:var(--life-red-soft)!important;
  border-color:#ffd7da!important;
}


/* =========================================================
   Ver 5.00: Root fix for Life Timeline
   Scope: #timeline only. LocalStorage key also updated to lifeOS.v3.7.
========================================================= */
.side-note span{font-size:0!important;}
.side-note span::before{content:"Ver 5.00";font-size:16px;}

#timeline .journey-row.phase-main .journey-cell.current strong,
#timeline .journey-cell.current strong{
  color:var(--life-red)!important;
  font-weight:300!important;
}

#timeline .journey-row.phase-main .journey-cell.current{
  box-shadow:inset 0 3px 0 var(--life-red)!important;
}

#timeline .journey-row.phase-main .journey-cell.selected:not(.current){
  box-shadow:none!important;
}

#timeline .journey-dots-list .journey-dot.active{
  background:var(--life-red)!important;
}

#timeline .status-badge.active{
  color:var(--life-red)!important;
  background:var(--life-red-soft)!important;
  border:1px solid #ffd7da!important;
}

#timeline .generated-row > .timeline-dot{
  min-height:32px!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}

#timeline .generated-row > .timeline-dot .timeline-line{
  position:absolute!important;
  top:-18px!important;
  bottom:-18px!important;
  left:50%!important;
  width:2px!important;
  transform:translateX(-50%)!important;
  background:rgba(228,119,127,.45)!important;
  z-index:1!important;
  display:block!important;
}

#timeline .generated-row > .timeline-dot::before{
  content:""!important;
  width:9px!important;
  height:9px!important;
  border-radius:50%!important;
  background:#e4777f!important;
  display:block!important;
  z-index:3!important;
}

#timeline .generated-row.current > .timeline-dot::before{
  background:var(--life-red)!important;
}

#timeline .generated-row.current > .timeline-dot .timeline-line{
  background:rgba(239,51,64,.55)!important;
}

#timeline .phase-chip.active{
  color:var(--life-red)!important;
  background:var(--life-red-soft)!important;
  border-color:#ffb8bf!important;
  box-shadow:inset 0 0 0 1px rgba(239,51,64,.22)!important;
  font-weight:900!important;
}


/* =========================================================
   Ver 5.00: Fixed Life Timeline state
   Scope: #timeline only. Other tabs are not affected.
========================================================= */
.side-note span{font-size:0!important;}
.side-note span::before{content:"Ver 5.00";font-size:16px;}

/* Timeline page: use only inner page header, so no duplicate topbar title */
#timeline.active{
  display:block!important;
}

/* Journey header dots/arrows */
#timeline .journey-dots{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  min-height:34px!important;
  opacity:1!important;
  visibility:visible!important;
}

#timeline .journey-dots-list{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-width:auto!important;
}

#timeline .journey-dots-list .journey-dot{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:6px!important;
  height:6px!important;
  min-width:6px!important;
  min-height:6px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:999px!important;
  display:block!important;
  cursor:pointer!important;
  box-shadow:none!important;
  font-size:0!important;
  line-height:0!important;
  opacity:1!important;
  background:#d2d7e1!important;
}

#timeline .journey-dots-list .journey-dot.active{
  background:var(--life-red)!important;
}

#timeline .journey-arrow-btn{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;
  border:1px solid #dfe5ee!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#172033!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
  line-height:1!important;
  font-size:0!important;
  opacity:1!important;
  visibility:visible!important;
}

#timeline .journey-arrow-btn .arrow-char{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  color:#172033!important;
  font-size:22px!important;
  font-weight:700!important;
  line-height:1!important;
  transform:translateY(-1px)!important;
}

#timeline .journey-arrow-btn:disabled{
  opacity:.42!important;
  cursor:default!important;
}

/* Journey map current phase */
#timeline .journey-row.phase-main .journey-cell.current strong,
#timeline .journey-cell.current strong{
  color:var(--life-red)!important;
  font-weight:300!important;
}

#timeline .journey-row.phase-main .journey-cell.current{
  box-shadow:inset 0 3px 0 var(--life-red)!important;
}

#timeline .journey-row.phase-main .journey-cell.selected:not(.current){
  box-shadow:none!important;
}

/* Current status */
#timeline .status-badge.active{
  color:var(--life-red)!important;
  background:var(--life-red-soft)!important;
  border:1px solid #ffd7da!important;
}

/* Auto generated timeline left line and dots */
#timeline .generated-row > .timeline-dot{
  min-height:32px!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}

#timeline .generated-row > .timeline-dot .timeline-line{
  position:absolute!important;
  top:-18px!important;
  bottom:-18px!important;
  left:50%!important;
  width:2px!important;
  transform:translateX(-50%)!important;
  background:rgba(228,119,127,.45)!important;
  z-index:1!important;
  display:block!important;
}

#timeline .generated-row > .timeline-dot::before{
  content:""!important;
  width:9px!important;
  height:9px!important;
  border-radius:50%!important;
  background:#e4777f!important;
  display:block!important;
  z-index:3!important;
}

#timeline .generated-row.current > .timeline-dot::before{
  background:var(--life-red)!important;
}

#timeline .generated-row.current > .timeline-dot .timeline-line{
  background:rgba(239,51,64,.55)!important;
}

/* Phase chip current */
#timeline .phase-chip.active{
  color:var(--life-red)!important;
  background:var(--life-red-soft)!important;
  border-color:#ffb8bf!important;
  box-shadow:inset 0 0 0 1px rgba(239,51,64,.22)!important;
  font-weight:900!important;
}


/* =========================================================
   Ver 5.00: implementation-only fixes
   Scope: #timeline only
   - center arrow icons via pseudo-elements
   - keep current dot design
========================================================= */
.side-note span{font-size:0!important;}
.side-note span::before{content:"Ver 5.00";font-size:16px;}

#timeline .journey-arrow-btn{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0!important;
  line-height:0!important;
  font-size:0!important;
  overflow:hidden!important;
}

#timeline .journey-arrow-btn::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:8px!important;
  height:8px!important;
  border-top:2px solid currentColor!important;
  border-right:2px solid currentColor!important;
  transform-origin:center!important;
  display:block!important;
}

#timeline #journeyPrevBtn::before{
  transform:translate(-38%,-50%) rotate(-135deg)!important;
}

#timeline #journeyNextBtn::before{
  transform:translate(-62%,-50%) rotate(45deg)!important;
}

#timeline .journey-arrow-btn svg,
#timeline .journey-arrow-btn .arrow-char{
  display:none!important;
}

#timeline .journey-dots-list{
  gap:8px!important;
}

#timeline .journey-dots-list .journey-dot{
  width:6px!important;
  height:6px!important;
  min-width:6px!important;
  min-height:6px!important;
}


/* Ver 5.00 - CSS only */
#timeline .journey-arrow-btn{
  color: var(--life-red) !important;
}

#timeline #journeyPrevBtn::before,
#timeline #journeyNextBtn::before{
  border-top-color: var(--life-red) !important;
  border-right-color: var(--life-red) !important;
}

#savePhaseBtn{
  background: var(--life-red) !important;
  color: #fff !important;
  border-color: var(--life-red) !important;
}

#savePhaseBtn:hover{
  opacity: 0.9;
}


/* Ver 5.00 - journey arrow color only */
.side-note span{font-size:0!important;}
.side-note span::before{content:"Ver 5.00";font-size:16px;}

#timeline #journeyPrevBtn.journey-arrow-btn,
#timeline #journeyNextBtn.journey-arrow-btn{
  color: var(--life-ink) !important;
  border-color: #e4e8ef !important;
  background: #fff !important;
  opacity: 1 !important;
}

#timeline #journeyPrevBtn.journey-arrow-btn::before,
#timeline #journeyNextBtn.journey-arrow-btn::before{
  border-top-color: var(--life-red) !important;
  border-right-color: var(--life-red) !important;
  opacity: 1 !important;
}

#timeline #journeyPrevBtn.journey-arrow-btn:disabled,
#timeline #journeyNextBtn.journey-arrow-btn:disabled{
  color: var(--life-ink) !important;
  border-color: #e4e8ef !important;
  opacity: .45 !important;
}


/* Ver 5.00 - journey arrow fix by actual IDs only */
.side-note span{font-size:0!important;}
.side-note span::before{content:"Ver 5.00";font-size:16px;}

#timeline #journeyPrevBtn,
#timeline #journeyNextBtn{
  position:relative !important;
  color: var(--life-ink) !important;
  border-color: #e4e8ef !important;
  background:#fff !important;
  opacity:1 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

#timeline #journeyPrevBtn::before,
#timeline #journeyNextBtn::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:8px !important;
  height:8px !important;
  border-top:2px solid var(--life-ink) !important;
  border-right:2px solid var(--life-ink) !important;
  display:block !important;
  opacity:1 !important;
  transform-origin:center !important;
}

#timeline #journeyPrevBtn::before{
  transform:translate(-38%,-50%) rotate(-135deg) !important;
}

#timeline #journeyNextBtn::before{
  transform:translate(-62%,-50%) rotate(45deg) !important;
}

#timeline #journeyPrevBtn:disabled,
#timeline #journeyNextBtn:disabled{
  color: var(--life-ink) !important;
  border-color: #e4e8ef !important;
  opacity:.45 !important;
}

/* Keep save button aligned with accent color */
#timeline #savePhaseBtn{
  background: var(--life-red) !important;
  color:#fff !important;
  border-color: var(--life-red) !important;
}


/* =========================================================
   Ver 5.00: Annual events only
   - event date/title/period inline
   - no wrapping
   - uses existing horizontal scroll when text is long
   Scope: #events only. #timeline is untouched.
========================================================= */
.side-note span{font-size:0!important;}
.side-note span::before{content:"Ver 5.00";font-size:16px;}

#events .annual-row-event{
  width:460px!important;
  min-width:460px!important;
  z-index:8!important;
}

/* The gantt area should scroll horizontally instead of forcing label wrapping */
#events .annual-timeline,
#events .gantt-scroll,
#events .annual-chart-scroll{
  overflow-x:auto!important;
  overflow-y:hidden!important;
}


/* =========================================================
   Ver 5.00: Sidebar redesign only
   Scope: .sidebar / .app-shell.sidebar-collapsed
   Fixed pages untouched: #timeline, #events
========================================================= */
.app-shell{
  grid-template-columns:252px 1fr!important;
  background:#f5f7f9!important;
}

.sidebar{
  width:252px!important;
  padding:32px 28px!important;
  background:#fff!important;
  border-right:1px solid #eef0f3!important;
  box-shadow:18px 0 56px rgba(15,23,42,.045)!important;
  backdrop-filter:none!important;
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
}

.brand{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:0 0 58px!important;
  position:relative!important;
}

.brand::before{
  content:""!important;
  position:absolute!important;
  left:-8px!important;
  top:0!important;
  width:2px!important;
  height:58px!important;
  background:#c8a15a!important;
}

.brand-mark,
.brand h1,
.brand p{
  display:none!important;
}

.brand-wordmark{
  display:grid!important;
  gap:7px!important;
  padding-left:18px!important;
  color:#0f172a!important;
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:.34em!important;
  line-height:1.05!important;
}

.brand-wordmark::after{
  content:""!important;
  width:30px!important;
  height:2px!important;
  background:#c8a15a!important;
  margin-top:8px!important;
}

.sidebar-toggle{
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  background:transparent!important;
  width:28px!important;
  height:28px!important;
  position:relative!important;
  cursor:pointer!important;
  flex:0 0 auto!important;
}

.sidebar-toggle::before,
.sidebar-toggle::after{
  content:""!important;
  position:absolute!important;
  top:7px!important;
  width:2px!important;
  height:14px!important;
  background:#0f172a!important;
  border-radius:999px!important;
}

.sidebar-toggle::before{left:10px!important;}
.sidebar-toggle::after{right:10px!important;}

.nav{
  display:grid!important;
  gap:0!important;
  margin:0!important;
}

.nav-item{
  display:grid!important;
  grid-template-columns:42px 20px 1fr!important;
  align-items:center!important;
  min-height:62px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#0f172a!important;
  box-shadow:none!important;
  text-align:left!important;
  font-weight:500!important;
  letter-spacing:.01em!important;
  position:relative!important;
}

.nav-item:hover{
  background:transparent!important;
  color:#0f172a!important;
}

.nav-item.active{
  background:transparent!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-weight:600!important;
}

.nav-item.active::before{
  content:""!important;
  position:absolute!important;
  left:-8px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:2px!important;
  height:42px!important;
  background:#c8a15a!important;
}

.nav-no{
  font-size:15px!important;
  font-weight:500!important;
  color:#0f172a!important;
  letter-spacing:.02em!important;
}

.nav-item.active .nav-no{
  color:#c8a15a!important;
}

.nav-sep{
  width:1px!important;
  height:22px!important;
  background:transparent!important;
  justify-self:center!important;
}

.nav-item.active .nav-sep{
  background:#c8a15a!important;
}

.nav-label{
  font-size:15px!important;
  font-weight:600!important;
  color:#0f172a!important;
  white-space:nowrap!important;
}

.side-note{
  margin-top:auto!important;
  padding:24px 0 0!important;
  border-top:1px solid #e7e9ee!important;
  display:grid!important;
  grid-template-columns:44px 1fr 20px!important;
  align-items:center!important;
  gap:12px!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
}

.user-mark{
  width:42px!important;
  height:42px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:#050505!important;
  color:#fff!important;
  font-size:15px!important;
  font-weight:800!important;
}

.user-meta strong{
  display:block!important;
  font-size:13px!important;
  line-height:1.2!important;
  color:#0f172a!important;
}

.user-meta p{
  margin:3px 0 0!important;
  font-size:11px!important;
  color:#64748b!important;
}

.side-note > span{
  grid-column:3!important;
  justify-self:end!important;
  color:#0f172a!important;
}

/* Collapsed sidebar: number-only navigation */
.app-shell.sidebar-collapsed{
  grid-template-columns:96px 1fr!important;
}

.app-shell.sidebar-collapsed .sidebar{
  width:96px!important;
  padding:32px 24px!important;
  align-items:center!important;
}

.app-shell.sidebar-collapsed .brand{
  width:100%!important;
  justify-content:center!important;
  margin-bottom:58px!important;
}

.app-shell.sidebar-collapsed .brand::before{
  left:2px!important;
  height:48px!important;
}

.app-shell.sidebar-collapsed .brand-wordmark{
  padding-left:14px!important;
  font-size:11px!important;
  letter-spacing:.28em!important;
}

.app-shell.sidebar-collapsed .brand-wordmark span:nth-child(2){
  display:none!important;
}

.app-shell.sidebar-collapsed .sidebar-toggle{
  position:absolute!important;
  right:-52px!important;
  top:50%!important;
  width:44px!important;
  height:44px!important;
  border-radius:50%!important;
  background:#fff!important;
  box-shadow:0 14px 34px rgba(15,23,42,.12)!important;
}

.app-shell.sidebar-collapsed .sidebar-toggle::before,
.app-shell.sidebar-collapsed .sidebar-toggle::after{
  top:14px!important;
  height:14px!important;
  transform:rotate(45deg)!important;
}

.app-shell.sidebar-collapsed .sidebar-toggle::before{
  left:18px!important;
  transform:rotate(-45deg)!important;
}

.app-shell.sidebar-collapsed .sidebar-toggle::after{
  right:18px!important;
  transform:rotate(45deg)!important;
}

.app-shell.sidebar-collapsed .nav{
  width:100%!important;
}

.app-shell.sidebar-collapsed .nav-item{
  grid-template-columns:1fr!important;
  justify-items:center!important;
  min-height:62px!important;
}

.app-shell.sidebar-collapsed .nav-item.active::before{
  left:2px!important;
  height:36px!important;
}

.app-shell.sidebar-collapsed .nav-no{
  font-size:15px!important;
}

.app-shell.sidebar-collapsed .nav-sep,
.app-shell.sidebar-collapsed .nav-label{
  display:none!important;
}

.app-shell.sidebar-collapsed .side-note{
  width:100%!important;
  grid-template-columns:1fr!important;
  justify-items:center!important;
}

.app-shell.sidebar-collapsed .user-meta,
.app-shell.sidebar-collapsed .side-note > span{
  display:none!important;
}

@media(max-width:900px){
  .app-shell{
    grid-template-columns:96px 1fr!important;
  }

  .sidebar{
    width:96px!important;
    padding:32px 24px!important;
    align-items:center!important;
  }

  .brand-wordmark span:nth-child(2),
  .nav-label,
  .nav-sep,
  .user-meta,
  .side-note > span{
    display:none!important;
  }

  .nav-item{
    grid-template-columns:1fr!important;
    justify-items:center!important;
  }
}


/* =========================================================
   Ver 5.00: Sidebar refinements only
   Scope: .sidebar / .app-shell.sidebar-collapsed
   Fixed pages untouched: #timeline, #events
========================================================= */
/* ロゴ左の縦線を削除 */
.sidebar .brand::before{
  display:none!important;
  content:none!important;
}

/* 展開時ロゴ：LIFE LEVERAGE を1行表示 */
.sidebar .brand-wordmark{
  display:block!important;
  padding-left:0!important;
  font-size:15px!important;
  line-height:1!important;
  letter-spacing:.34em!important;
  white-space:nowrap!important;
}

.sidebar .brand-wordmark span{
  display:inline!important;
}

.sidebar .brand-wordmark span + span::before{
  content:" "!important;
}

.sidebar .brand-wordmark::after{
  display:block!important;
  content:""!important;
  width:30px!important;
  height:2px!important;
  background:#c8a15a!important;
  margin-top:18px!important;
}

/* アクティブ線は 01 と文字の中間に表示 */
.sidebar .nav-item.active::before{
  display:none!important;
  content:none!important;
}

.sidebar .nav-item{
  grid-template-columns:42px 20px 1fr!important;
}

.sidebar .nav-sep{
  width:1px!important;
  height:22px!important;
  background:transparent!important;
  justify-self:center!important;
}

.sidebar .nav-item.active .nav-sep{
  background:#c8a15a!important;
}

/* 折りたたみ時：ロゴは2段表示、右上に縦二本アイコンを維持 */
.app-shell.sidebar-collapsed .brand{
  width:100%!important;
  justify-content:flex-start!important;
  align-items:flex-start!important;
  position:relative!important;
  margin-bottom:58px!important;
}

.app-shell.sidebar-collapsed .brand::before{
  display:none!important;
  content:none!important;
}

.app-shell.sidebar-collapsed .brand-wordmark{
  display:grid!important;
  gap:7px!important;
  padding-left:0!important;
  font-size:11px!important;
  line-height:1.05!important;
  letter-spacing:.28em!important;
  white-space:normal!important;
}

.app-shell.sidebar-collapsed .brand-wordmark span{
  display:block!important;
}

.app-shell.sidebar-collapsed .brand-wordmark span + span::before{
  display:none!important;
  content:none!important;
}

.app-shell.sidebar-collapsed .brand-wordmark span:nth-child(2){
  display:block!important;
}

.app-shell.sidebar-collapsed .brand-wordmark::after{
  width:24px!important;
  height:2px!important;
  margin-top:8px!important;
}

/* 折りたたみ時も || アイコンはロゴ右上に固定。丸い外部ボタンに変形させない */
.app-shell.sidebar-collapsed .sidebar-toggle{
  position:absolute!important;
  right:0!important;
  top:0!important;
  width:28px!important;
  height:28px!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.app-shell.sidebar-collapsed .sidebar-toggle::before,
.app-shell.sidebar-collapsed .sidebar-toggle::after{
  top:7px!important;
  width:2px!important;
  height:14px!important;
  background:#0f172a!important;
  border-radius:999px!important;
  transform:none!important;
}

.app-shell.sidebar-collapsed .sidebar-toggle::before{
  left:10px!important;
}

.app-shell.sidebar-collapsed .sidebar-toggle::after{
  right:10px!important;
}

/* 折りたたみ時：選択中ラインは番号の左に表示 */
.app-shell.sidebar-collapsed .nav-item.active::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:2px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:2px!important;
  height:36px!important;
  background:#c8a15a!important;
}

.app-shell.sidebar-collapsed .nav-sep,
.app-shell.sidebar-collapsed .nav-label{
  display:none!important;
}


/* v3.17 sidebar refinement */
.app-shell.sidebar-collapsed .sidebar-toggle{
  display:none !important;
}
.app-shell.sidebar-collapsed .brand{
  cursor:pointer !important;
}


/* =========================================================
   Ver 5.00: Sidebar toggle spacing only
   Scope: .sidebar only. Fixed pages untouched: #timeline, #events
========================================================= */
/* 展開時の || ボタンを右端ギリギリから内側へ移動 */
.sidebar .brand{
  position:relative!important;
}

.sidebar .sidebar-toggle{
  position:absolute!important;
  right:16px!important;
  top:0!important;
  margin:0!important;
}

/* 折りたたみ時は引き続き || を非表示、ロゴクリックで展開 */
.app-shell.sidebar-collapsed .sidebar-toggle{
  display:none!important;
}

.app-shell.sidebar-collapsed .brand{
  cursor:pointer!important;
}


/* =========================================================
   Ver 5.00: Sidebar logo layout only
   Scope: .sidebar only. Fixed pages untouched: #timeline, #events
========================================================= */
/* 展開時もロゴを2行にして、||との重なりを防ぐ */
.sidebar .brand{
  min-height:62px!important;
  align-items:flex-start!important;
}

.sidebar .brand-wordmark{
  display:grid!important;
  gap:7px!important;
  padding-left:0!important;
  padding-right:48px!important;
  font-size:15px!important;
  line-height:1.05!important;
  letter-spacing:.34em!important;
  white-space:normal!important;
}

.sidebar .brand-wordmark span{
  display:block!important;
}

.sidebar .brand-wordmark span + span::before{
  display:none!important;
  content:none!important;
}

.sidebar .brand-wordmark::after{
  width:30px!important;
  height:2px!important;
  margin-top:8px!important;
}

/* || は右上に余白を持たせて固定 */
.sidebar .sidebar-toggle{
  position:absolute!important;
  right:16px!important;
  top:0!important;
  margin:0!important;
}

/* 折りたたみ時も2行ロゴのまま */
.app-shell.sidebar-collapsed .brand-wordmark{
  display:grid!important;
  gap:7px!important;
  padding-right:0!important;
  font-size:11px!important;
  line-height:1.05!important;
  letter-spacing:.28em!important;
}

.app-shell.sidebar-collapsed .brand-wordmark span{
  display:block!important;
}

.app-shell.sidebar-collapsed .brand-wordmark span:nth-child(2){
  display:block!important;
}


/* =========================================================
   Ver 5.00: Life timeline new design only
   Scope: #timeline only
   Sidebar and annual events are fixed and untouched.
========================================================= */
#timeline{
  --ll-ink:#0f172a;
  --ll-sub:#64748b;
  --ll-line:#e9ecef;
  --ll-soft:#f8f8f7;
  --ll-gold:#c8a15a;
  --ll-gold-soft:rgba(200,161,90,.12);
}

#timeline .life-page-actions{
  display:flex!important;
  gap:12px!important;
}

#timeline .ghost-btn,
#timeline .primary-btn{
  border-radius:0!important;
  border:1px solid var(--ll-line)!important;
  background:#fff!important;
  color:var(--ll-ink)!important;
  box-shadow:none!important;
  font-weight:800!important;
}

#timeline .primary-btn,
#timeline #savePhaseBtn{
  background:#0f172a!important;
  border-color:#0f172a!important;
  color:#fff!important;
}

#timeline .life-section-head,
#timeline .panel-head,
#timeline .phase-detail-head{
  border-bottom:1px solid var(--ll-line)!important;
  padding-bottom:20px!important;
  margin-bottom:22px!important;
}

#timeline .life-section-head h3,
#timeline .panel-head h3,
#timeline .phase-detail-head h3{
  color:var(--ll-ink)!important;
  font-size:20px!important;
  letter-spacing:.04em!important;
}

#timeline .life-section-head h3::before,
#timeline .panel-head h3::before,
#timeline .phase-detail-head h3::before{
  content:""!important;
  display:inline-block!important;
  width:2px!important;
  height:20px!important;
  margin-right:14px!important;
  transform:translateY(4px)!important;
  background:var(--ll-gold)!important;
}

#timeline .journey-dots{
  gap:10px!important;
}

#timeline .journey-dots-list{
  gap:7px!important;
}

#timeline .journey-dot{
  width:5px!important;
  height:5px!important;
  min-width:5px!important;
  min-height:5px!important;
  border:0!important;
  border-radius:50%!important;
  background:#cbd0d8!important;
  padding:0!important;
}

#timeline .journey-dot.active{
  background:var(--ll-gold)!important;
}

#timeline #journeyPrevBtn,
#timeline #journeyNextBtn{
  width:30px!important;
  height:30px!important;
  border-radius:50%!important;
  border:1px solid var(--ll-line)!important;
  background:#fff!important;
  color:var(--ll-ink)!important;
  position:relative!important;
}

#timeline #journeyPrevBtn::before,
#timeline #journeyNextBtn::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:7px!important;
  height:7px!important;
  border-top:2px solid currentColor!important;
  border-right:2px solid currentColor!important;
}

#timeline #journeyPrevBtn::before{
  transform:translate(-35%,-50%) rotate(-135deg)!important;
}

#timeline #journeyNextBtn::before{
  transform:translate(-65%,-50%) rotate(45deg)!important;
}

#timeline .journey-scroll{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:8px 0 10px!important;
}

#timeline .life-roadmap{
  position:relative!important;
  background:#fff!important;
  font-size:12px!important;
  color:var(--ll-ink)!important;
}

#timeline .roadmap-axis{
  position:absolute!important;
  top:0!important;
  border-bottom:1px solid var(--ll-line)!important;
}

#timeline .roadmap-axis-point{
  position:absolute!important;
  top:12px!important;
  transform:translateX(-50%)!important;
  display:grid!important;
  gap:4px!important;
  text-align:center!important;
  white-space:nowrap!important;
}

#timeline .roadmap-axis-point strong{
  font-size:12px!important;
  color:var(--ll-ink)!important;
  font-weight:800!important;
}

#timeline .roadmap-axis-point span{
  font-size:10px!important;
  color:var(--ll-sub)!important;
  letter-spacing:.06em!important;
}

#timeline .phase-form-grid{
  display:grid!important;
  grid-template-columns:repeat(3, minmax(0,1fr))!important;
  gap:22px!important;
}

#timeline .phase-form-grid label{
  color:var(--ll-sub)!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}

#timeline .phase-form-grid input,
#timeline .phase-form-grid select,
#timeline .phase-form-grid textarea{
  border:1px solid var(--ll-line)!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
  color:var(--ll-ink)!important;
}

#timeline .phase-form-grid textarea{
  min-height:82px!important;
}

#timeline .phase-save-row{
  margin-top:18px!important;
}

@media(max-width:1100px){
  #timeline .phase-breakdown-head,
  #timeline .phase-breakdown-row{
    grid-template-columns:70px 120px 140px 1fr 80px!important;
  }

  #timeline .phase-form-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   Ver 5.00: Life timeline refinements only
   Scope: #timeline only
========================================================= */
#timeline{
  background:#fff!important;
}

#timeline .life-page-actions .ghost-btn:not(:first-child){
  display:none!important;
}

#timeline .life-journey-panel{
  padding-top:0!important;
}

#timeline .life-section-head,
#timeline .panel-head,
#timeline .phase-detail-head{
  border-bottom:1px solid var(--ll-line)!important;
  padding:0 0 18px!important;
  margin:0 0 24px!important;
}

#timeline .phase-form-grid input,
#timeline .phase-form-grid select,
#timeline .phase-form-grid textarea{
  border:1px solid var(--ll-line)!important;
  border-radius:0!important;
}


/* =========================================================
   Ver 5.00: Life timeline layout matching reference
   Scope: page divider + #timeline only
   Sidebar, annual events and other pages are untouched.
========================================================= */
body,
.app-shell,
.main{
  background:#fff!important;
}

.page-divider-brand{
  position:fixed!important;
  left:252px!important;
  top:0!important;
  width:72px!important;
  height:100vh!important;
  background:#fff!important;
  z-index:5!important;
  pointer-events:none!important;
}

.page-divider-brand::before{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:26px!important;
  bottom:34px!important;
  width:1px!important;
  background:#eadfc8!important;
  transform:translateX(-50%)!important;
}

.page-divider-brand span{
  position:absolute!important;
  left:50%!important;
  top:47%!important;
  transform:translate(-50%,-50%) rotate(-90deg)!important;
  color:#c8a15a!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.42em!important;
  white-space:nowrap!important;
  background:#fff!important;
  padding:16px 22px!important;
}

.app-shell.sidebar-collapsed .page-divider-brand{
  left:96px!important;
}

.main{
  padding-left:112px!important;
}

#timeline{
  max-width:1240px!important;
  margin:0 auto!important;
  background:#fff!important;
  color:var(--ll-ink)!important;
}

#timeline .life-page-actions{
  align-self:start!important;
}

#timeline .life-page-actions .ghost-btn{
  width:118px!important;
  height:42px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
}

#timeline .life-journey-panel{
  padding-top:38px!important;
}

#timeline .life-section-head,
#timeline .panel-head,
#timeline .phase-detail-head{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:start!important;
  padding:0!important;
  margin:0 0 36px!important;
  border:0!important;
}

#timeline .life-section-head h3,
#timeline .panel-head h3,
#timeline .phase-detail-head h3{
  font-size:22px!important;
  letter-spacing:.02em!important;
  margin:0 0 8px!important;
  color:#0f172a!important;
}

#timeline .life-section-head h3::before,
#timeline .panel-head h3::before,
#timeline .phase-detail-head h3::before{
  content:""!important;
  display:inline-block!important;
  width:2px!important;
  height:22px!important;
  margin-right:14px!important;
  transform:translateY(4px)!important;
  background:#c8a15a!important;
}

#timeline .life-section-head .muted,
#timeline .panel-head .muted,
#timeline .phase-detail-head .muted{
  font-size:13px!important;
  color:#64748b!important;
}

#timeline .journey-scroll{
  padding:0 0 20px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}

#timeline .roadmap-axis{
  top:0!important;
  height:82px!important;
  border-bottom:1px solid #e9ecef!important;
}

#timeline .roadmap-axis-point{
  top:20px!important;
}

#timeline .roadmap-axis-point strong{
  font-size:14px!important;
  color:#0f172a!important;
}

#timeline .roadmap-axis-point span{
  margin-top:2px!important;
  font-size:11px!important;
  color:#64748b!important;
}

#timeline .phase-detail-panel{
  padding-bottom:64px!important;
}

#timeline .phase-detail-actions{
  gap:12px!important;
}

#timeline .phase-detail-actions .ghost-btn{
  min-width:130px!important;
  height:42px!important;
  border-radius:0!important;
}

#timeline .phase-form-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:26px 28px!important;
}

#timeline .phase-form-grid label{
  font-size:11px!important;
  letter-spacing:.05em!important;
  color:#64748b!important;
}

#timeline .phase-form-grid input,
#timeline .phase-form-grid select,
#timeline .phase-form-grid textarea{
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  min-height:42px!important;
}

#timeline .phase-form-grid textarea{
  min-height:98px!important;
}

#timeline .phase-save-row{
  margin-top:24px!important;
}

#timeline #savePhaseBtn{
  width:112px!important;
  height:46px!important;
  border-radius:0!important;
  background:#0f172a!important;
  border-color:#0f172a!important;
}

.app-shell.sidebar-collapsed .main{
  padding-left:112px!important;
}

@media(max-width:1100px){
  .page-divider-brand{
    display:none!important;
  }
  .main{
    padding-left:32px!important;
  }
  #timeline .phase-form-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   Ver 5.00: Life timeline small fixes only
   Scope: page divider + #timeline only
========================================================= */
/* サイドメニューとコンテンツ間の薄い縦線を削除 */
.page-divider-brand::before{
  display:none!important;
  content:none!important;
}

/* エクスポート文字のはみ出し対策 */
#timeline .life-page-actions .ghost-btn{
  width:120px!important;
  height:42px!important;
  font-size:12px!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* ジャーニーマップのドット：アクセントカラーをゴールドへ */
#timeline .journey-dot.active,
#timeline .journey-dots-list .journey-dot.active{
  background:#c8a15a!important;
}

/* ジャーニーマップ全体を枠内中央に配置 */
#timeline .journey-scroll{
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
}

#timeline .life-roadmap{
  margin-left:auto!important;
  margin-right:auto!important;
}

/* 横スクロールが必要な場合は中央寄せよりスクロールを優先 */
@media(max-width:1280px){
  #timeline .journey-scroll{
    justify-content:flex-start!important;
  }
}


/* =========================================================
   Ver 5.00: Sidebar boundary removal + roadmap vertical centering
   Scope: .sidebar visual boundary + #timeline roadmap only
========================================================= */
/* サイドメニューとメインコンテンツ間の旧境界線・影を削除 */
.sidebar{
  border-right:none!important;
  box-shadow:none!important;
}


/* =========================================================
   Ver 5.00: Divider restoration + roadmap first-row alignment
   Scope: page divider + #timeline roadmap only
========================================================= */
/* サイドバー自体の境界線・影は削除したまま */
.sidebar{
  border-right:none!important;
  box-shadow:none!important;
}

/* LIFE LEVERAGE 縦文字の上下線を復活 */
.page-divider-brand::before{
  display:block!important;
  content:""!important;
  position:absolute!important;
  left:50%!important;
  top:26px!important;
  bottom:34px!important;
  width:1px!important;
  background:#eadfc8!important;
  transform:translateX(-50%)!important;
}

.page-divider-brand span{
  background:#fff!important;
  padding:18px 24px!important;
}

/* ジャーニーマップ：軸下線と1行目上線の途切れを解消 */
#timeline .roadmap-axis{
  border-bottom:0!important;
}


/* =========================================================
   Ver 5.00: Phase detail button consistency + custom delete modal
   Scope: #timeline phase detail and #phaseDeleteModal only
========================================================= */
#timeline .phase-detail-actions .ghost-btn,
#timeline #savePhaseBtn{
  width:136px!important;
  min-width:136px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 16px!important;
  border-radius:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  box-sizing:border-box!important;
}

#timeline #savePhaseBtn{
  background:#0f172a!important;
  border-color:#0f172a!important;
  color:#fff!important;
}


/* =========================================================
   Ver 5.00: Delete modal click binding fix
   Cause: modal HTML was after app.js, so buttons were not bound at init.
========================================================= */
/* =========================================================
   Ver 5.00: Annual events redesign only
   Scope: #events only. Timeline is fixed and untouched.
========================================================= */
#events{
  max-width:1240px!important;
  margin:0 auto!important;
  background:#fff!important;
  color:#0f172a!important;
}


#events .annual-year-kicker{
  color:#c8a15a!important;
  font-size:13px!important;
  letter-spacing:.38em!important;
  font-weight:900!important;
  margin:0 0 12px!important;
}

#events .annual-actions{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}

#events .annual-actions .ghost-btn,
#events .annual-actions .primary-btn{
  width:96px!important;
  height:42px!important;
  border-radius:0!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 12px!important;
}

#events .annual-actions .primary-btn{
  width:122px!important;
  background:#0f172a!important;
  border-color:#0f172a!important;
  color:#fff!important;
}

#events .annual-year-label{
  min-width:72px!important;
  font-size:24px!important;
  text-align:center!important;
  letter-spacing:.04em!important;
  color:#0f172a!important;
}

#events .annual-card{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#fff!important;
  padding:38px 0 64px!important;
  margin:0!important;
}

#events .annual-section-head{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:start!important;
  margin:0 0 36px!important;
}

#events .annual-section-head h3{
  font-size:22px!important;
  letter-spacing:.02em!important;
  margin:0 0 8px!important;
  color:#0f172a!important;
}

#events .annual-section-head h3::before{
  content:""!important;
  display:inline-block!important;
  width:2px!important;
  height:22px!important;
  margin-right:14px!important;
  transform:translateY(4px)!important;
  background:#c8a15a!important;
}

#events .annual-section-head .muted{
  margin:0!important;
  color:#64748b!important;
  font-size:13px!important;
}

#events .annual-wrap{
  overflow-x:auto!important;
  border:0!important;
  border-radius:0!important;
  padding:0 0 18px!important;
  background:#fff!important;
}

#events .annual-months{
  position:relative!important;
  border-bottom:1px solid #e9ecef!important;
  background:#fff!important;
}

#events .annual-axis-line{
  display:none!important;
}

#events .annual-month{
  position:absolute!important;
  top:26px!important;
  transform:translateX(-50%)!important;
  font-size:13px!important;
  font-weight:900!important;
  color:#0f172a!important;
  letter-spacing:.04em!important;
  white-space:nowrap!important;
}

#events .annual-track{
  position:relative!important;
  background:#fff!important;
}

#events .annual-grid{
  position:absolute!important;
  top:0!important;
  pointer-events:none!important;
}

#events .annual-grid-line{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:1px!important;
  background:#e9ecef!important;
}

#events .annual-row{
  position:absolute!important;
  left:0!important;
  right:0!important;
  border-bottom:1px solid #eef0f3!important;
}

#events .annual-row-label{
  position:absolute!important;
  left:0!important;
  top:0!important;
  bottom:0!important;
  width:170px!important;
  display:grid!important;
  grid-template-columns:46px 1fr!important;
  align-items:center!important;
  column-gap:12px!important;
  color:#0f172a!important;
}

#events .annual-row-label em{
  font-style:normal!important;
  color:#94a3b8!important;
  font-size:18px!important;
  letter-spacing:.08em!important;
}

#events .annual-row-label strong{
  font-size:13px!important;
  font-weight:900!important;
}

#events .empty-annual{
  position:absolute!important;
  top:40px!important;
  margin:0!important;
  color:#94a3b8!important;
  font-size:13px!important;
}

@media(max-width:1100px){
  #events 
}


/* =========================================================
   Ver 5.00: Annual event page refinements only
   Scope: #events + generic event modal style
========================================================= */
/* 年間イベントではグローバルトップバーを非表示（タイトル重複・JSONボタンを消す） */
body:has(#events.active) .topbar{
  display:none!important;
}

/* 今日の日付ゴールド縦線 */
#events .annual-today-line{
  position:absolute!important;
  top:0!important;
  width:2px!important;
  background:#c8a15a!important;
  z-index:5!important;
  opacity:.9!important;
  pointer-events:none!important;
}


/* =========================================================
   Ver 5.00: Annual event fine-tuning only
   Scope: #events only. Timeline is fixed and untouched.
========================================================= */
/* タイトル上の年表記を人生タイムライン寄せに調整 */
#events .annual-year-kicker{
  font-size:12px!important;
  font-weight:800!important;
  letter-spacing:.34em!important;
  line-height:1!important;
}

/* 前年/翌年の中央年表示を細めに */
#events .annual-year-label{
  font-weight:500!important;
  font-size:24px!important;
  letter-spacing:.04em!important;
}

/* 現在日のゴールド縦線を文字・イベントの背面へ */
#events .annual-track{
  position:relative!important;
  isolation:isolate!important;
}

#events .annual-grid{
  z-index:0!important;
}

#events .annual-today-line{
  z-index:1!important;
  opacity:.8!important;
}

#events .annual-row{
  z-index:2!important;
}

/* 小さい画面では1カラム */
@media(max-width:720px){
  .modal-backdrop.event-modal-style form#modalForm .form-grid.two{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   Ver 5.00: Annual Gantt date-accurate positioning
   Scope: #events only
========================================================= */
/* 月ラベルは中央、グリッド線は月境界にする */
#events .annual-grid-line{
  z-index:0!important;
}


/* =========================================================
   Ver 5.00: Annual Gantt month grid date-accurate fix
   Scope: #events only
========================================================= */
#events .annual-grid-line{
  transform:none!important;
}


/* =========================================================
   Ver 5.00: Annual Gantt month-box positioning
   Scope: #events only
   Each month box means 1st day to last day of that month.
========================================================= */
#events .annual-grid-line{
  transform:none!important;
}

#events .annual-wrap{
  padding-right:36px!important;
}


/* =========================================================
   Ver 5.00: Annual Gantt coordinate reset
   Scope: #events only
   Month labels, month borders, event bars and today line use one coordinate system.
========================================================= */
/* 古い年間イベントの位置指定を打ち消し、JSの座標だけで配置する */
#events .annual-wrap{
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding:0 36px 18px 0!important;
  border:0!important;
  background:#fff!important;
}

#events .annual-months,
#events .annual-track{
  position:relative!important;
  box-sizing:border-box!important;
  flex:none!important;
  transform:none!important;
  margin:0!important;
}

#events .annual-month{
  position:absolute!important;
  top:26px!important;
  transform:translateX(-50%)!important;
  white-space:nowrap!important;
}

#events .annual-grid{
  position:absolute!important;
  top:0!important;
  pointer-events:none!important;
  transform:none!important;
  margin:0!important;
}

#events .annual-grid-line{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  width:1px!important;
  transform:none!important;
  margin:0!important;
}

#events .annual-row{
  position:absolute!important;
  left:0!important;
  right:auto!important;
  width:100%!important;
  box-sizing:border-box!important;
}

#events .annual-today-line{
  position:absolute!important;
  top:0!important;
  transform:none!important;
  margin:0!important;
}

/* 同カテゴリ内で重なったイベントを縦レーンで見せる */
#events .annual-row{
  overflow:visible!important;
}

#events .annual-row-label{
  height:76px!important;
}


/* =========================================================
   Ver 5.00: Sidebar navigation order update only
========================================================= */
/* =========================================================
   Ver 5.00: Bucket list redesign with right slide drawer
   Scope: #bucket only. Timeline and annual event styles untouched.
========================================================= */
#bucket{
  max-width:1240px!important;
  margin:0 auto!important;
  background:#fff!important;
  color:#0f172a!important;
}

#bucket .page-head h3{
  font-size:36px!important;
  line-height:1.1!important;
  letter-spacing:.02em!important;
  margin:0 0 16px!important;
  color:#0f172a!important;
}

#bucket .page-head .muted{
  font-size:13px!important;
  color:#64748b!important;
  margin:0!important;
}

#bucket .page-head .primary-btn{
  width:156px!important;
  height:42px!important;
  border-radius:0!important;
  background:#0f172a!important;
  border:1px solid #0f172a!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

#bucket .bucket-panel{
  padding:38px 0 64px!important;
  background:#fff!important;
}

#bucket .bucket-table-wrap{
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  overflow:auto!important;
  box-shadow:0 18px 54px rgba(15,23,42,.04)!important;
}

#bucket .bucket-table{
  width:100%!important;
  border-collapse:collapse!important;
  min-width:940px!important;
}

#bucket .bucket-table th,
#bucket .bucket-table td{
  border-bottom:1px solid #eef0f3!important;
  padding:18px 18px!important;
  text-align:left!important;
  font-size:13px!important;
  vertical-align:middle!important;
  white-space:nowrap!important;
}

#bucket .bucket-table th{
  color:#64748b!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
}

#bucket .bucket-row{
  cursor:pointer!important;
  transition:background .18s ease!important;
}

#bucket .bucket-row:hover,
#bucket .bucket-row.selected{
  background:rgba(200,161,90,.075)!important;
}

#bucket .bucket-radio{
  width:16px!important;
  height:16px!important;
  display:inline-block!important;
  border:1px solid #cbd5e1!important;
  border-radius:50%!important;
  box-sizing:border-box!important;
}

#bucket .bucket-radio.on{
  border:2px solid #c8a15a!important;
  box-shadow:inset 0 0 0 3px #fff!important;
  background:#c8a15a!important;
}

#bucket .bucket-no{
  color:#64748b!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
}

#bucket .bucket-title{
  color:#0f172a!important;
  font-weight:900!important;
}

#bucket .bucket-phase-tag,
#bucket .bucket-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:76px!important;
  height:26px!important;
  padding:0 10px!important;
  border:1px solid #e6e8ec!important;
  background:#f8fafc!important;
  color:#0f172a!important;
  font-size:11px!important;
  font-weight:900!important;
  border-radius:0!important;
}

#bucket .bucket-status.active{
  border-color:#e4cf9f!important;
  background:#fff7e8!important;
  color:#9a7a36!important;
}

#bucket .bucket-status.done{
  background:#0f172a!important;
  border-color:#0f172a!important;
  color:#fff!important;
}

#bucket .bucket-table-foot{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  min-height:58px!important;
  color:#64748b!important;
  font-size:13px!important;
}

#bucket .bucket-field{
  display:grid!important;
  gap:9px!important;
  color:#64748b!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.05em!important;
}

#bucket .bucket-field.full{
  grid-column:1/-1!important;
}

#bucket .bucket-field input,
#bucket .bucket-field select,
#bucket .bucket-field textarea{
  width:100%!important;
  box-sizing:border-box!important;
  min-height:42px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:13px!important;
  font-weight:700!important;
  padding:10px 12px!important;
  box-shadow:none!important;
}

#bucket .bucket-field textarea{
  min-height:108px!important;
  resize:vertical!important;
}

#bucket .bucket-related{
  grid-column:1/-1!important;
  border-top:1px solid #e9ecef!important;
  padding-top:20px!important;
}

#bucket .bucket-related-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin-bottom:12px!important;
}

#bucket .bucket-related-head h4{
  margin:0!important;
  font-size:15px!important;
  color:#0f172a!important;
}

#bucket .bucket-related-head button{
  width:76px!important;
  height:32px!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:12px!important;
  font-weight:900!important;
  cursor:pointer!important;
}

#bucket .bucket-related-list{
  display:grid!important;
  gap:0!important;
  border:1px solid #e6e8ec!important;
}

#bucket .bucket-related-item{
  display:grid!important;
  grid-template-columns:1fr auto auto!important;
  gap:12px!important;
  align-items:center!important;
  min-height:44px!important;
  padding:0 12px!important;
  border-bottom:1px solid #eef0f3!important;
  font-size:12px!important;
}

#bucket .bucket-related-item:last-child{
  border-bottom:0!important;
}

#bucket .bucket-related-item span{
  font-weight:900!important;
}

#bucket .bucket-related-item small{
  color:#64748b!important;
}

#bucket .bucket-related-item button{
  border:0!important;
  background:transparent!important;
  color:#64748b!important;
  font-weight:900!important;
  cursor:pointer!important;
}

#bucket .bucket-empty{
  margin:0!important;
  padding:14px!important;
  color:#94a3b8!important;
  font-size:12px!important;
}

@media(max-width:900px){
  #bucket 
  #bucket .bucket-drawer-body{
    grid-template-columns:1fr!important;
  }
}

/* 通常の入力・選択欄は最大幅を固定 */
#bucket .bucket-field input,
#bucket .bucket-field select{
  width:100%!important;
  max-width:190px!important;
  min-height:42px!important;
}

/* タイトル・メモ・関連リストなど全幅項目はドロワー内幅に合わせる */
#bucket .bucket-field.full input,
#bucket .bucket-field.full textarea,
#bucket .bucket-related{
  max-width:402px!important;
  width:402px!important;
}

#bucket .bucket-field.full input,
#bucket .bucket-field.full textarea{
  width:100%!important;
}

/* 関連リストも横に伸びすぎないよう固定 */
#bucket .bucket-related-list{
  width:402px!important;
  max-width:402px!important;
}

@media(max-width:560px){
  #bucket .bucket-drawer{
    width:calc(100vw - 20px)!important;
    max-width:calc(100vw - 20px)!important;
  }

  #bucket .bucket-drawer-body{
    grid-template-columns:1fr!important;
  }

  #bucket .bucket-field input,
  #bucket .bucket-field select,
  #bucket .bucket-field.full input,
  #bucket .bucket-field.full textarea,
  #bucket .bucket-related,
  #bucket .bucket-related-list{
    max-width:100%!important;
    width:100%!important;
  }
}

/* 関連追加は重複作成せず既存項目を開く */


/* =========================================================
   Ver 5.00: Bucket page polish
   Scope: #bucket + topbar visibility only
========================================================= */
/* バケットリストでは上部の旧タイトル・JSONボタンを非表示 */
body:has(#bucket.active) .topbar{
  display:none!important;
}

/* 追加ボタン周りのオレンジ影を削除 */
#bucket .page-head .primary-btn,
#bucket #addBucketBtn{
  box-shadow:none!important;
  filter:none!important;
}

/* ページネーション */
#bucket .bucket-table-foot{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:16px!important;
}

#bucket .bucket-pagination{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
}

#bucket .bucket-pagination button,
#bucket .bucket-pagination span{
  min-width:34px!important;
  height:34px!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:13px!important;
  font-weight:900!important;
  border-radius:0!important;
}

#bucket .bucket-pagination span{
  background:#f8fafc!important;
}

#bucket .bucket-pagination button{
  cursor:pointer!important;
}

#bucket .bucket-pagination button:disabled{
  opacity:.35!important;
  cursor:not-allowed!important;
}


/* =========================================================
   Ver 5.00: Bucket list typography / badge alignment
   Scope: #bucket only
========================================================= */
/* No列の数字を他の画面と同じ方向へ統一 */
#bucket .bucket-no{
  font-family:inherit!important;
  font-size:14px!important;
  font-weight:700!important;
  letter-spacing:.04em!important;
  color:#94a3b8!important;
  font-variant-numeric:normal!important;
}

/* フェーズ・状態は人生タイムラインのバッジ寄せ：四角・薄い枠・小さめ */
#bucket .bucket-phase-tag,
#bucket .bucket-status{
  min-width:56px!important;
  width:auto!important;
  height:24px!important;
  min-height:24px!important;
  padding:0 9px!important;
  border-radius:0!important;
  border:1px solid #dfe5ee!important;
  background:#f8fafc!important;
  color:#64748b!important;
  font-family:inherit!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:0!important;
  line-height:1!important;
  box-sizing:border-box!important;
}

/* フェーズは色を持たせず全て同一 */
#bucket .bucket-phase-tag{
  background:#f8fafc!important;
  border-color:#dfe5ee!important;
  color:#64748b!important;
}

/* 状態：現在/進行中相当だけゴールド枠、その他はグレー */
#bucket .bucket-status.active{
  background:#fffaf0!important;
  border-color:#e4c98f!important;
  color:#9a7a36!important;
}

#bucket .bucket-status.pending,
#bucket .bucket-status.planning{
  background:#f8fafc!important;
  border-color:#dfe5ee!important;
  color:#64748b!important;
}

#bucket .bucket-status.done{
  background:#0f172a!important;
  border-color:#0f172a!important;
  color:#fff!important;
}


/* =========================================================
   Ver 5.00: Bucket list badge / number typography final polish
   Scope: #bucket only
========================================================= */
/* フェーズタグは白背景＋グレー枠＋グレー文字に統一 */
#bucket .bucket-phase-tag{
  background:#fff!important;
  border:1px solid #dfe5ee!important;
  color:#64748b!important;
  box-shadow:none!important;
}

/* 未着手・計画中など青系に見える背景を白へ */
#bucket .bucket-status.pending,
#bucket .bucket-status.planning{
  background:#fff!important;
  border:1px solid #dfe5ee!important;
  color:#64748b!important;
  box-shadow:none!important;
}

/* 進行中などゴールド文字のステータスは変更しない */
#bucket .bucket-status.active{
  background:#fffaf0!important;
  border-color:#e4c98f!important;
  color:#9a7a36!important;
}

/* No.列の数字を人生タイムライン寄せに大きく */
#bucket .bucket-no{
  font-family:inherit!important;
  font-size:20px!important;
  font-weight:500!important;
  letter-spacing:.06em!important;
  color:#94a3b8!important;
  line-height:1!important;
  font-variant-numeric:normal!important;
}

/* フェーズは2列分使う。達成期限は次の行へ */
#bucket .bucket-phase-field{
  grid-column:1 / -1!important;
}

#bucket .bucket-phase-field select{
  max-width:402px!important;
  width:402px!important;
}

/* select の矢印が右端に寄りすぎないよう調整 */
#bucket .bucket-field select{
  appearance:none!important;
  -webkit-appearance:none!important;
  background-image:
    linear-gradient(45deg, transparent 50%, #0f172a 50%),
    linear-gradient(135deg, #0f172a 50%, transparent 50%)!important;
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px)!important;
  background-size:5px 5px, 5px 5px!important;
  background-repeat:no-repeat!important;
  padding-right:36px!important;
}

/* date input の標準カレンダーアイコンを控えめに統一 */
#bucket .bucket-field input[type="date"]{
  position:relative!important;
  padding-right:38px!important;
  color:#0f172a!important;
}

#bucket .bucket-field input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0!important;
  cursor:pointer!important;
}

#bucket .bucket-field:has(input[type="date"]){
  position:relative!important;
}

#bucket .bucket-field:has(input[type="date"])::after{
  content:""!important;
  position:absolute!important;
  right:14px!important;
  bottom:13px!important;
  width:14px!important;
  height:14px!important;
  pointer-events:none!important;
  background:
    linear-gradient(#0f172a,#0f172a) 3px 1px/2px 3px no-repeat,
    linear-gradient(#0f172a,#0f172a) 9px 1px/2px 3px no-repeat,
    linear-gradient(#0f172a,#0f172a) 2px 5px/10px 1px no-repeat,
    linear-gradient(#0f172a,#0f172a) 2px 3px/10px 10px no-repeat;
  opacity:.9!important;
}

/* フェーズが全幅になった場合のモバイル対応 */
@media(max-width:560px){
  #bucket .bucket-phase-field select{
    max-width:100%!important;
    width:100%!important;
  }
}


/* =========================================================
   Ver 5.00: Bucket drawer icon / related modal / memo counter fixes
   Scope: #bucket + modal date fields
========================================================= */
/* カレンダーアイコンを廃止して、シンプルな日付入力に統一 */
#bucket .bucket-field:has(input[type="date"])::after{
  display:none!important;
  content:none!important;
}

/* メモ文字数カウンター */
#bucket .bucket-field.full{
  position:relative!important;
}

#bucket .bucket-memo-counter{
  justify-self:end!important;
  margin-top:-4px!important;
  color:#94a3b8!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:0!important;
}

/* ステータス表記に合わせてラベル余白を統一 */
#bucket .bucket-field{
  line-height:1.3!important;
}


/* =========================================================
   Ver 5.00: Date icon removal + ToDo modal design
   Scope: global date inputs + ToDo modal style
========================================================= */
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0!important;
  display:none!important;
  -webkit-appearance:none!important;
}

input[type="date"]{
  background-image:none!important;
  padding-right:12px!important;
}

label:has(input[type="date"])::after,
.bucket-field:has(input[type="date"])::after{
  display:none!important;
  content:none!important;
}

@media(max-width:720px){
  .modal-backdrop.todo-modal-style form#modalForm .form-grid.two{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   Ver 5.00: Related annual event icon removal
   Scope: #bucket only
========================================================= */
/* 関連年間イベント/Todoの行頭アイコンを使わず、テキストだけで統一 */
#bucket .bucket-related-item span{
  display:block!important;
}

#bucket .bucket-section-title,
#bucket .bucket-section-title-row{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin-bottom:18px!important;
}

#bucket .bucket-section-title span{
  width:34px!important;
  height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#c8a15a!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
}

#bucket .bucket-section-title h4{
  margin:0!important;
  color:#0f172a!important;
  font-size:18px!important;
  font-weight:900!important;
}

#bucket .bucket-section-note,
#bucket .bucket-field-help,
#bucket .bucket-related-note{
  margin:8px 0 0!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:0!important;
}

#bucket .bucket-phase-field select{
  width:100%!important;
  max-width:100%!important;
}

#bucket .bucket-form-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:20px 28px!important;
}

#bucket .bucket-form-grid .bucket-field input,
#bucket .bucket-form-grid .bucket-field select,
#bucket .bucket-form-grid .bucket-field textarea{
  max-width:none!important;
  width:100%!important;
}

#bucket .bucket-memo-field{
  grid-row:span 3!important;
}

#bucket .bucket-memo-field textarea{
  min-height:150px!important;
}

#bucket .bucket-related{
  width:auto!important;
  max-width:none!important;
  border-top:0!important;
}

#bucket .bucket-related-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:16px!important;
}

#bucket .bucket-related-actions{
  margin-left:auto!important;
  display:flex!important;
  gap:12px!important;
}

#bucket .bucket-related-actions button,
#bucket .bucket-related-head button{
  width:auto!important;
  min-width:132px!important;
  height:38px!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:13px!important;
  font-weight:900!important;
  box-shadow:none!important;
}

#bucket .bucket-related-list{
  width:100%!important;
  max-width:none!important;
}

#bucket .bucket-related-item{
  grid-template-columns:1fr auto auto 34px!important;
  min-height:52px!important;
}

#bucket .bucket-unlink-btn{
  width:28px!important;
  height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#0f172a!important;
  font-size:18px!important;
  border:0!important;
  background:transparent!important;
  cursor:pointer!important;
}

#bucket .bucket-add-dashed{
  width:100%!important;
  height:42px!important;
  margin-top:12px!important;
  border:1px dashed #cbd5e1!important;
  background:#fff!important;
  color:#64748b!important;
  font-size:13px!important;
  font-weight:900!important;
  box-shadow:none!important;
}

.bucket-select-list{
  display:grid!important;
  gap:0!important;
  border:1px solid #e6e8ec!important;
  max-height:360px!important;
  overflow:auto!important;
}

.bucket-select-row{
  display:grid!important;
  grid-template-columns:24px 1fr auto!important;
  align-items:center!important;
  gap:12px!important;
  min-height:52px!important;
  padding:0 14px!important;
  border-bottom:1px solid #eef0f3!important;
  cursor:pointer!important;
}

.bucket-select-row:last-child{
  border-bottom:0!important;
}

.bucket-select-row span{
  font-weight:900!important;
  color:#0f172a!important;
}

.bucket-select-row small{
  color:#64748b!important;
}

@media(max-width:720px){
  #bucket .bucket-form-grid{
    grid-template-columns:1fr!important;
  }
  #bucket .bucket-related-head{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
  #bucket .bucket-related-actions{
    margin-left:0!important;
  }
}


/* =========================================================
   Ver 5.00: Bucket drawer layout polish
   Scope: #bucket + bucket select modal
========================================================= */
/* バケット内容のグリッドを揃える */
#bucket .bucket-form-grid{
  grid-template-columns:1fr 1fr!important;
  align-items:start!important;
}

#bucket .bucket-memo-field{
  grid-row:auto!important;
  align-self:start!important;
  position:relative!important;
}

#bucket .bucket-memo-field textarea{
  min-height:150px!important;
  padding-bottom:28px!important;
}

/* メモの文字数を枠内右下へ */
#bucket .bucket-memo-counter{
  position:absolute!important;
  right:12px!important;
  bottom:10px!important;
  margin:0!important;
  background:transparent!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
  pointer-events:none!important;
}

/* 関連リストは枠内クリックで編集。編集ボタンは廃止 */
#bucket .bucket-related-item{
  grid-template-columns:1fr auto 34px!important;
  cursor:pointer!important;
}

#bucket .bucket-related-item.clickable:hover{
  background:rgba(200,161,90,.06)!important;
}

#bucket .bucket-related-item span,
#bucket .bucket-related-item small{
  pointer-events:none!important;
}


/* =========================================================
   Ver 5.00: Bucket form alignment + selection polish
   Scope: #bucket + bucket select modal
========================================================= */
/* バケット内容：左列は「タイトル→ステータス→達成期限」、右列は「カテゴリ→メモ」。
   メモ高さをステータス＋達成期限の高さに近づけ、不要な縦余白を削る */
#bucket .bucket-form-grid{
  grid-template-columns:1fr 1fr!important;
  column-gap:28px!important;
  row-gap:18px!important;
  align-items:start!important;
}

#bucket .bucket-memo-field{
  grid-column:2!important;
  grid-row:2 / span 2!important;
  align-self:start!important;
}

#bucket .bucket-memo-field textarea{
  min-height:156px!important;
  height:156px!important;
  padding-bottom:28px!important;
}

#bucket .bucket-form-grid .bucket-field{
  min-height:auto!important;
}

#bucket .bucket-field-help{
  margin-top:7px!important;
}


/* =========================================================
   Ver 5.00: Custom dropdowns for bucket drawer
   Scope: #bucket only
========================================================= */
#bucket .native-select-hidden{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;
  height:1px!important;
}

#bucket .bucket-custom-select{
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  z-index:20!important;
}

#bucket .bucket-custom-select-button{
  width:100%!important;
  height:42px!important;
  border:1px solid #dfe5ee!important;
  background:#fff!important;
  color:#0f172a!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0 38px 0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
  text-align:left!important;
}

#bucket .bucket-custom-select-button span{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#bucket .bucket-custom-select-button i{
  position:absolute!important;
  right:16px!important;
  top:50%!important;
  width:0!important;
  height:0!important;
  border-left:4px solid transparent!important;
  border-right:4px solid transparent!important;
  border-top:5px solid #0f172a!important;
  transform:translateY(-35%)!important;
}

#bucket .bucket-custom-select.open .bucket-custom-select-button{
  border-color:#c8a15a!important;
}

#bucket .bucket-custom-select-list{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 6px)!important;
  background:#fff!important;
  border:1px solid #dfe5ee!important;
  box-shadow:0 18px 44px rgba(15,23,42,.12)!important;
  z-index:90!important;
  max-height:240px!important;
  overflow:auto!important;
  display:none!important;
}

#bucket .bucket-custom-select.open .bucket-custom-select-list{
  display:block!important;
}

#bucket .bucket-custom-select-option{
  width:100%!important;
  min-height:42px!important;
  padding:0 14px!important;
  border:0!important;
  border-bottom:1px solid #eef0f3!important;
  background:#fff!important;
  color:#0f172a!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  font-size:13px!important;
  font-weight:800!important;
  text-align:left!important;
  cursor:pointer!important;
  box-shadow:none!important;
}

#bucket .bucket-custom-select-option:last-child{
  border-bottom:0!important;
}

#bucket .bucket-custom-select-option:hover{
  background:rgba(200,161,90,.08)!important;
}

#bucket .bucket-custom-select-option.selected{
  color:#9a7a36!important;
  background:#fffaf0!important;
}

/* 関連ToDoのステータスを見やすい小さな四角タグにする */
#bucket .bucket-related-item{
  grid-template-columns:minmax(0,1fr) auto auto 34px!important;
  column-gap:12px!important;
}

#bucket .bucket-related-item small{
  color:#64748b!important;
  font-size:12px!important;
  white-space:nowrap!important;
}

#bucket .bucket-mini-status{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:54px!important;
  height:24px!important;
  padding:0 8px!important;
  border:1px solid #dfe5ee!important;
  background:#fff!important;
  color:#64748b!important;
  font-style:normal!important;
  font-size:11px!important;
  font-weight:900!important;
  white-space:nowrap!important;
}


/* =========================================================
   Ver 5.00: Align related event / ToDo row columns
   Scope: #bucket only
========================================================= */
/* 実行計画と行動の「日付」「ステータス」「×」の位置を同一列に統一 */
#bucket .bucket-related-item{
  grid-template-columns:minmax(0,1fr) 190px 66px 34px!important;
  column-gap:12px!important;
  align-items:center!important;
}

#bucket .bucket-related-item small{
  justify-self:end!important;
  text-align:right!important;
  min-width:190px!important;
  white-space:nowrap!important;
}

#bucket .bucket-mini-status{
  justify-self:center!important;
  min-width:54px!important;
}

#bucket .bucket-mini-status.placeholder{
  visibility:hidden!important;
}

#bucket .bucket-unlink-btn{
  justify-self:end!important;
}


/* =========================================================
   Ver 5.00: Bucket pagination count update
   Scope: #bucket only
========================================================= */
/* ページ表記を 1 / 2 のように表示するため少し幅を持たせる */
#bucket .bucket-pagination span{
  min-width:58px!important;
  padding:0 10px!important;
}


/* =========================================================
   Ver 5.00: Save closes bucket drawer + toast notification
========================================================= */
.app-toast{
  position:fixed!important;
  right:32px!important;
  bottom:32px!important;
  z-index:300!important;
  min-width:148px!important;
  height:42px!important;
  padding:0 18px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#0f172a!important;
  color:#fff!important;
  border:1px solid #0f172a!important;
  box-shadow:0 18px 44px rgba(15,23,42,.18)!important;
  font-size:13px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  opacity:0!important;
  transform:translateY(10px)!important;
  pointer-events:none!important;
  transition:opacity .18s ease, transform .18s ease!important;
}

.app-toast.show{
  opacity:1!important;
  transform:translateY(0)!important;
}


/* =========================================================
   Ver 5.00: ToDo one-line list design
   Scope: #todo only
========================================================= */
#todo .panel{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:0!important;
}

#todo .panel-head{
  display:none!important;
}

#todo .page-head .primary-btn{
  width:156px!important;
  height:46px!important;
  border-radius:0!important;
  box-shadow:none!important;
}

#todo .todo-check{
  width:18px!important;
  height:18px!important;
  border:1px solid #aab7c8!important;
  background:#fff!important;
  border-radius:2px!important;
  box-shadow:none!important;
  padding:0!important;
}

#todo .todo-check.checked{
  background:#0f172a!important;
  border-color:#0f172a!important;
}

#todo .todo-menu{
  width:32px!important;
  height:32px!important;
  border:0!important;
  background:transparent!important;
  color:#0f172a!important;
  font-size:22px!important;
  line-height:1!important;
  box-shadow:none!important;
  padding:0!important;
}

#todo .todo-empty{
  padding:28px!important;
  color:#94a3b8!important;
  font-weight:800!important;
}

#todo .todo-pagination{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}

#todo .todo-pagination button,
#todo .todo-pagination span{
  min-width:36px!important;
  height:36px!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:13px!important;
  font-weight:900!important;
  box-shadow:none!important;
}

#todo .todo-pagination span{
  min-width:58px!important;
  background:#f8fafc!important;
}

#todo .todo-pagination button:disabled{
  opacity:.35!important;
  cursor:not-allowed!important;
}

@media(max-width:900px){
  #todo .todo-table-head,
  #todo .todo-row{
    grid-template-columns:38px minmax(0,1fr) 120px 42px!important;
  }
  #todo .todo-table-head span:nth-child(3),
  #todo .todo-row-bucket{
    display:none!important;
  }
}


/* =========================================================
   Ver 5.00: ToDo polish
   Scope: #todo + ToDo modal
========================================================= */
/* ToDo画面では旧ヘッダー/JSONを非表示 */
body:has(#todo.active) .topbar{
  display:none!important;
}

/* 新規ToDoボタンを基本カラーへ */
#todo .page-head .primary-btn{
  background:#0f172a!important;
  border-color:#0f172a!important;
  color:#fff!important;
  box-shadow:none!important;
}

#todo .todo-menu{
  display:none!important;
}

/* チェック済み色をゴールドへ */
#todo .todo-check.checked{
  background:#c8a15a!important;
  border-color:#c8a15a!important;
}

@media(max-width:720px){
  .modal-backdrop.todo-modal-style .todo-edit-grid{
    grid-template-columns:1fr!important;
  }
}


/* =========================================================
   Ver 5.00: ToDo right slide drawer
   Scope: #todo only
========================================================= */
#todo .todo-drawer-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:88!important;
  display:none!important;
  background:rgba(15,23,42,.12)!important;
}

#todo .todo-drawer-backdrop.open{
  display:block!important;
}

#todo .todo-drawer{
  position:fixed!important;
  top:0!important;
  right:0!important;
  width:min(620px, calc(100vw - 32px))!important;
  height:100vh!important;
  z-index:89!important;
  background:#fff!important;
  border-left:1px solid #e6e8ec!important;
  box-shadow:-22px 0 70px rgba(15,23,42,.14)!important;
  transform:translateX(100%)!important;
  transition:transform .22s ease!important;
  display:flex!important;
  flex-direction:column!important;
}

#todo .todo-drawer.open{
  transform:translateX(0)!important;
}

#todo .todo-drawer-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  padding:28px 34px 22px!important;
  border-bottom:1px solid #e6e8ec!important;
}

#todo .todo-drawer-head h3{
  margin:0!important;
  color:#0f172a!important;
  font-size:24px!important;
  font-weight:900!important;
}

#todo .todo-drawer-close{
  border:0!important;
  background:transparent!important;
  color:#0f172a!important;
  font-size:26px!important;
  box-shadow:none!important;
}

#todo .todo-drawer-body{
  flex:1!important;
  overflow:auto!important;
  padding:0 34px 28px!important;
}

#todo .todo-edit-section{
  padding:24px 0!important;
  border-bottom:1px solid #e6e8ec!important;
}

#todo .todo-section-title{
  display:flex!important;
  align-items:center!important;
  gap:14px!important;
  margin-bottom:18px!important;
}

#todo .todo-section-title span{
  width:34px!important;
  height:28px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#c8a15a!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:900!important;
}

#todo .todo-section-title h4{
  margin:0!important;
  color:#0f172a!important;
  font-size:18px!important;
  font-weight:900!important;
}

#todo .todo-section-note{
  margin:10px 0 0!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:700!important;
}

#todo .todo-drawer-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:20px 22px!important;
}

#todo .todo-drawer-field{
  display:grid!important;
  gap:9px!important;
  color:#64748b!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:.05em!important;
  position:relative!important;
  overflow:visible!important;
}

#todo .todo-drawer-field.full{
  grid-column:1 / -1!important;
}

#todo .todo-drawer-field input,
#todo .todo-drawer-field textarea,
#todo .todo-drawer-field select{
  width:100%!important;
  box-sizing:border-box!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  border-radius:0!important;
  min-height:42px!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:none!important;
}

#todo .todo-drawer-field textarea{
  min-height:130px!important;
  padding:12px!important;
  padding-bottom:28px!important;
}

#todo .todo-memo-counter{
  position:absolute!important;
  right:12px!important;
  bottom:10px!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
}

#todo .todo-drawer-native-select-hidden{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;
  height:1px!important;
}

#todo .todo-drawer-custom-select{
  position:relative!important;
  z-index:30!important;
}

#todo .todo-drawer-custom-select.open{
  z-index:300!important;
}

#todo .todo-drawer-custom-select-button{
  width:100%!important;
  height:42px!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  border-radius:0!important;
  box-shadow:none!important;
  padding:0 38px 0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  font-size:13px!important;
  font-weight:900!important;
  position:relative!important;
}

#todo .todo-drawer-custom-select-button i{
  position:absolute!important;
  right:16px!important;
  top:50%!important;
  width:0!important;
  height:0!important;
  border-left:4px solid transparent!important;
  border-right:4px solid transparent!important;
  border-top:5px solid #0f172a!important;
  transform:translateY(-35%)!important;
}

#todo .todo-drawer-custom-select-list{
  position:absolute!important;
  top:calc(100% + 6px)!important;
  left:0!important;
  right:0!important;
  display:none!important;
  max-height:240px!important;
  overflow:auto!important;
  background:#fff!important;
  border:1px solid #dfe5ee!important;
  box-shadow:0 18px 44px rgba(15,23,42,.12)!important;
  z-index:301!important;
}

#todo .todo-drawer-custom-select.open .todo-drawer-custom-select-list{
  display:block!important;
}

#todo .todo-drawer-custom-select-option{
  width:100%!important;
  min-height:42px!important;
  border:0!important;
  border-bottom:1px solid #eef0f3!important;
  background:#fff!important;
  color:#0f172a!important;
  padding:0 14px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  font-size:13px!important;
  font-weight:800!important;
  text-align:left!important;
}

#todo .todo-drawer-custom-select-option:hover{
  background:rgba(200,161,90,.08)!important;
}

#todo .todo-drawer-custom-select-option.selected{
  background:#fffaf0!important;
  color:#9a7a36!important;
}

#todo .todo-subtask-list{
  display:grid!important;
  gap:0!important;
  border:1px solid #e6e8ec!important;
}

#todo .todo-empty-subtask{
  margin:0!important;
  padding:14px!important;
  color:#94a3b8!important;
  font-size:12px!important;
  font-weight:800!important;
}

#todo .todo-subtask-row{
  display:grid!important;
  grid-template-columns:28px 1fr 30px!important;
  align-items:center!important;
  min-height:44px!important;
  border-bottom:1px solid #eef0f3!important;
  padding:0 10px!important;
}

#todo .todo-subtask-row:last-child{
  border-bottom:0!important;
}

#todo .todo-subtask-check{
  width:16px!important;
  height:16px!important;
  border:1px solid #cbd5e1!important;
  background:#fff!important;
  border-radius:2px!important;
  padding:0!important;
  box-shadow:none!important;
}

#todo .todo-subtask-check.checked{
  background:#c8a15a!important;
  border-color:#c8a15a!important;
}

#todo .todo-subtask-row input{
  border:0!important;
  min-height:40px!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:800!important;
}

#todo .todo-subtask-remove{
  border:0!important;
  background:transparent!important;
  color:#64748b!important;
  font-size:18px!important;
  box-shadow:none!important;
}

#todo .todo-add-subtask{
  width:100%!important;
  height:42px!important;
  margin-top:12px!important;
  border:1px dashed #cbd5e1!important;
  background:#fff!important;
  color:#64748b!important;
  font-size:13px!important;
  font-weight:900!important;
  box-shadow:none!important;
}

#todo .todo-drawer-actions{
  display:flex!important;
  justify-content:flex-end!important;
  gap:12px!important;
  padding:22px 34px!important;
  border-top:1px solid #e6e8ec!important;
}

#todo .todo-drawer-actions button{
  width:120px!important;
  height:40px!important;
  min-height:40px!important;
  box-shadow:none!important;
  border-radius:0!important;
}

#todo #deleteTodoDrawerBtn{
  margin-right:auto!important;
}

@media(max-width:720px){
  #todo .todo-drawer-grid{
    grid-template-columns:1fr!important;
  }
}

/* =========================================================
   Ver 5.00: Shared category master
========================================================= */
.category-settings-panel{margin-top:28px!important;}
.category-help{margin:0 0 18px!important;color:#64748b!important;font-size:13px!important;font-weight:700!important;}
.category-add-row{display:grid!important;grid-template-columns:1fr 120px!important;gap:12px!important;margin-bottom:18px!important;}
.category-add-row input{height:42px!important;border:1px solid #e6e8ec!important;border-radius:0!important;padding:0 12px!important;box-shadow:none!important;color:#0f172a!important;font-size:13px!important;font-weight:800!important;}
.category-add-row .primary-btn{height:42px!important;border-radius:0!important;box-shadow:none!important;background:#0f172a!important;border:1px solid #0f172a!important;color:#fff!important;}
.category-list{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;gap:10px!important;}
.category-item{height:38px!important;border:1px solid #e6e8ec!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:space-between!important;padding:0 10px 0 12px!important;color:#0f172a!important;font-size:13px!important;font-weight:900!important;}
.category-item button{border:0!important;background:transparent!important;color:#64748b!important;font-size:18px!important;box-shadow:none!important;cursor:pointer!important;}


/* =========================================================
   Ver 5.00: Category panel only in Settings + Todo drawer buttons
========================================================= */
.page:not(#settings) .category-settings-panel{
  display:none!important;
}

#settings .category-settings-panel{
  display:block!important;
  margin-top:32px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:none!important;
}

#todo .todo-drawer-actions{
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  gap:12px!important;
  padding:22px 34px!important;
  border-top:1px solid #e6e8ec!important;
  background:#fff!important;
}

#todo .todo-drawer-actions button,
#todo .todo-drawer-actions .ghost-btn,
#todo .todo-drawer-actions .primary-btn{
  width:120px!important;
  min-width:120px!important;
  max-width:120px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  padding:0 16px!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

#todo #deleteTodoDrawerBtn{
  margin-right:auto!important;
  background:#fff!important;
  color:#0f172a!important;
  border:1px solid #d5dae3!important;
}

#todo #cancelTodoDrawerBtn{
  background:#fff!important;
  color:#0f172a!important;
  border:1px solid #d5dae3!important;
}

#todo #saveTodoDrawerBtn{
  background:#0f172a!important;
  color:#fff!important;
  border:1px solid #0f172a!important;
}


/* =========================================================
   Ver 5.00: ToDo page alignment + drawer form/subtask polish
========================================================= */
#todo.page{
  padding-top:0!important;
}


#todo .todo-drawer-field{
  gap:10px!important;
  margin-bottom:14px!important;
  line-height:1.45!important;
}

#todo .todo-drawer-grid{
  gap:22px 24px!important;
}

#todo .todo-drawer-field input,
#todo .todo-drawer-field textarea,
#todo .todo-drawer-field select,
#todo .todo-drawer-custom-select-button{
  margin-top:0!important;
}

#todo .todo-drawer-field textarea{
  padding-bottom:34px!important;
}

#todo .todo-memo-counter{
  bottom:12px!important;
}

#todo .todo-subtask-list{
  background:#fff!important;
}

#todo .todo-subtask-row{
  background:#fff!important;
}

#todo .todo-subtask-row input{
  background:#fff!important;
}

#todo .todo-subtask-check{
  background:#fff!important;
  border:1px solid #cbd5e1!important;
}

#todo .todo-subtask-check.checked{
  background:#c8a15a!important;
  border-color:#c8a15a!important;
}

/* 完了済みサブタスクの文字だけ控えめに */
#todo .todo-subtask-row input.completed,
#todo .todo-subtask-row:has(.todo-subtask-check.checked) input{
  color:#64748b!important;
  text-decoration:line-through!important;
}


/* =========================================================
   Ver 5.00: ToDo content width correction
   原因：
   v3.72でToDo内の各要素に max-width:1200px + margin:auto を一括指定したため、
   既存の page/content 幅指定と二重に効き、ToDoだけ中央に小さく縮んで見えていた。
========================================================= */
/* ToDoページ全体を他ページと同じ幅感に戻す */
#todo.page{
  padding-top:0!important;
}

/* 見出しは年間イベント/バケットリストと同じ左基準に寄せる */
/* =========================================================
   Ver 5.00: ToDo spacing + related bucket consistency
========================================================= */
/* v3.72系で上余白を削りすぎたため、他ページと同じ開始位置へ戻す */
#todo.page{
  padding-top:64px!important;
}

/* =========================================================
   Ver 5.00: Align Life Timeline + ToDo with Bucket/Annual baseline
   基準：バケットリスト・年間イベントと同じ左位置、上位置、横幅に統一
========================================================= */
/* 人生タイムラインとToDoだけ残っていた個別余白を打ち消す */
#timeline.page,
#todo.page{
  padding-top:0!important;
}

/* ページ全体のコンテンツ基準を統一 */
#timeline > *,
#todo > *{
  max-width:1200px!important;
  margin-left:0!important;
  margin-right:auto!important;
}

/* 見出し開始位置を基準ページと合わせる */
/* 人生タイムラインの主要ブロックも基準幅に固定 */
#timeline .hero,
#timeline .section,
#timeline .panel,
#timeline .timeline-map,
#timeline .timeline-table,
#timeline .phase-detail,
#timeline .life-map-section,
#timeline .life-table-section{
  width:100%!important;
  max-width:1200px!important;
  margin-left:0!important;
  margin-right:auto!important;
}

/* 以前のToDo調整で残った縮小指定を上書き */
#todo .panel{
  width:100%!important;
  max-width:1200px!important;
  margin-left:0!important;
  margin-right:auto!important;
}


/* =========================================================
   Ver 5.00: Core page layout baseline unification
   対象：人生タイムライン / バケットリスト / 年間イベント / ToDo
   原因：
   ToDo・人生タイムラインに個別の max-width / margin:auto / child width 指定が重なり、
   バケットリスト・年間イベントと左右位置・幅がズレていた。
   方針：
   4ページを同じ content width / margin / padding 基準に統一する。
========================================================= */
:root{
  --ll-core-content-width: 1200px;
}

/* 4ページ共通：ページ自体を同じ幅・左基準へ */
#timeline.page,
#bucket.page,
#annual.page,
#todo.page{
  width:100%!important;
  max-width:var(--ll-core-content-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-top:0!important;
  box-sizing:border-box!important;
}

/* 4ページ直下要素：中央寄せ/縮小/個別幅を解除してページ幅に揃える */
#timeline.page > *,
#annual.page > *,
#todo.page > *{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

/* bucketはdrawer/backdropを含むため、直下全要素ではなく表示コンテンツだけ揃える */
#bucket > .page-head,
#bucket > .bucket-panel,
#bucket > .bucket-list-area,
#bucket > .bucket-table-wrap{
  width:100%!important;
  max-width:none!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

/* =========================================================
   Ver 5.00 Layout Fix
   基準：バケットリスト(#bucket) と 年間イベント(#events)
   ToDo / 人生タイムラインのみ合わせる
========================================================= */

/* v3.75, v3.76 の強制レイアウトを打ち消す */
#bucket.page,
#events.page{
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
}

/* ToDo と 人生タイムラインを基準ページと同じコンテンツ幅へ */
#todo.page,
#timeline.page{
  max-width:none !important;
  width:auto !important;
  margin:0 !important;
  padding-top:inherit !important;
}

/* 共通コンテンツ開始位置 */
#todo .page-head,
#timeline .page-head,
#timeline .hero{
  max-width:none !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
}


/* =========================================================
   Ver 5.00: Life timeline alignment + top action button unification
   基準：年間イベントの「イベント追加」ボタン
========================================================= */
/* 人生タイムラインだけ残っていた個別位置を解除し、他3ページと同じ基準へ */
#timeline.page{
  max-width:none!important;
  width:auto!important;
  margin:0!important;
  padding-top:inherit!important;
}

/* 人生タイムライン内の主要コンテンツを左寄せ・全幅に戻す */
#timeline .hero,
#timeline .page-head,
#timeline .section,
#timeline .panel,
#timeline .timeline-map,
#timeline .timeline-table,
#timeline .phase-detail,
#timeline .life-map-section,
#timeline .life-table-section,
#timeline .journey-map,
#timeline .phase-detail-section{
  max-width:none!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
}

/* =========================================================
   Ver 5.00: Fix button side effects from v3.78
   原因：
   v3.78で button[onclick*="Bucket"] / button[onclick*="openTodo..."] など
   広すぎるセレクタを使ったため、ページネーション等にもサイズ指定が波及。
   方針：
   ページネーションを明示的に戻し、右上追加ボタンだけを限定して統一。
========================================================= */
/* ページネーションを元の小型ボタンへ戻す */
#bucket .bucket-pagination button,
#bucket .bucket-pagination span,
#todo .todo-pagination button,
#todo .todo-pagination span,
.pagination button,
.pagination span,
.pager button,
.pager span{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:#fff!important;
  color:#0f172a!important;
  border:1px solid #e6e8ec!important;
}

#bucket .bucket-pagination span,
#todo .todo-pagination span,
.pagination span,
.pager span{
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  background:#f8fafc!important;
}

#bucket .bucket-pagination button:disabled,
#todo .todo-pagination button:disabled,
.pagination button:disabled,
.pager button:disabled{
  opacity:.35!important;
  cursor:not-allowed!important;
}

/* 右上追加ボタンだけ、年間イベントの「イベント追加」基準に統一 */
#bucket .page-head > .primary-btn,
#bucket .page-head > button.primary-btn,
#todo .page-head > .primary-btn,
#todo .page-head > button.primary-btn,


/* v3.78の広い onclick セレクタによる副作用をページネーションでは確実に無効化 */
#bucket .bucket-pagination button[onclick],
#todo .todo-pagination button[onclick],
.pagination button[onclick],
.pager button[onclick]{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  background:#fff!important;
  color:#0f172a!important;
  border:1px solid #e6e8ec!important;
}


/* =========================================================
   Ver 5.00: Button scope cleanup
   原因：
   v3.78/v3.79 の button[onclick*="..."] 指定が、
   ガントチャート上のイベントバーやページネーション等の操作ボタンまで巻き込んでいた。
   方針：
   汎用 button / onclick 指定を上書きし、右上追加ボタンだけ .ll-top-add-btn で統一。
========================================================= */
/* 右上追加ボタンだけを統一 */
.ll-top-add-btn,
#bucket .page-head > .ll-top-add-btn,
#todo .page-head > .ll-top-add-btn,


/* ページネーションは小型に戻す */
#bucket .bucket-pagination button,
#bucket .bucket-pagination span,
#todo .todo-pagination button,
#todo .todo-pagination span,
.pagination button,
.pagination span,
.pager button,
.pager span{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:#fff!important;
  color:#0f172a!important;
  border:1px solid #e6e8ec!important;
}

#bucket .bucket-pagination span,
#todo .todo-pagination span,
.pagination span,
.pager span{
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  background:#f8fafc!important;
}

/* ガントバーの色・線は元の小さな線表示へ戻す */
#events .annual-gantt button:not(.ll-top-add-btn),
#events .gantt-chart button:not(.ll-top-add-btn),
#events button.event-bar,
#events button.gantt-event{
  background:transparent!important;
  border:0!important;
  color:#0f172a!important;
}

/* ガント内の削除xや点も大きいボタン指定を受けない */
#events .annual-gantt .delete,
#events .annual-gantt .remove,
#events .annual-gantt .x,
#events .gantt-chart .delete,
#events .gantt-chart .remove,
#events .gantt-chart .x,
#events .annual-gantt button[onclick*="delete"],
#events .annual-gantt button[onclick*="remove"]{
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  color:#94a3b8!important;
  box-shadow:none!important;
  display:inline-flex!important;
}


/* =========================================================
   Ver 5.00: scoped button fix + page padding baseline
   分析：
   ・過去追加の button[onclick*="..."] / ヘッダー以外の primary-btn 指定が、
     ガントチャートのイベントバーやページネーション、フェーズタブまで巻き込んでいた。
   ・人生タイムラインだけ .page.active の padding が残り、他ページより約28px下がっていた。
   対応：
   ・広いボタン指定を削除し、右上追加ボタンだけ .ll-top-add-btn で統一。
   ・4主要ページの active padding を同一基準へ統一。
========================================================= */
/* 主要4ページのセクションpaddingを統一。人生タイムラインだけの28pxズレを解消 */
main > section.page#timeline,
main > section.page#bucket,
main > section.page#events,
main > section.page#todo,
main > section.page#timeline.active,
main > section.page#bucket.active,
main > section.page#events.active,
main > section.page#todo.active{
  padding-top:0!important;
}

/* ページ本体の左右・幅は既存の基準を維持。個別の中央寄せはしない */
#timeline.page,
#bucket.page,
#events.page,
#todo.page{
  max-width:none!important;
  width:auto!important;
  margin:0!important;
}

/* 右上追加ボタンだけを統一。汎用buttonやonclickには絶対に当てない */
.ll-top-add-btn{
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 18px!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  background:#0f172a!important;
  border:1px solid #0f172a!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
}

/* ページネーションを小型の既存デザインへ明示的に戻す */
#bucket .bucket-pagination button,
#bucket .bucket-pagination span,
#todo .todo-pagination button,
#todo .todo-pagination span,
.pagination button,
.pagination span,
.pager button,
.pager span{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:#fff!important;
  color:#0f172a!important;
  border:1px solid #e6e8ec!important;
}

#bucket .bucket-pagination span,
#todo .todo-pagination span,
.pagination span,
.pager span{
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  background:#f8fafc!important;
}

/* 年間イベントのガントバーをボタン化していても、追加ボタンCSSの影響を受けない状態へ戻す */
#events .annual-gantt button:not(.ll-top-add-btn),
#events .gantt-chart button:not(.ll-top-add-btn),
#events button.event-bar:not(.ll-top-add-btn),
#events button.gantt-event:not(.ll-top-add-btn){
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  box-shadow:none!important;
  filter:none!important;
  border-radius:0!important;
  font-size:inherit!important;
  letter-spacing:normal!important;
  box-sizing:border-box!important;
}


/* =========================================================
   Ver 5.00: Scoped final fixes
   1) 関係ないボタンへの副作用を完全に除去
   2) ToDoを含む主要4ページの page.active padding を同じ基準に統一
========================================================= */
/* page active の上paddingを主要ページで統一 */
section.page#timeline,
section.page#bucket,
section.page#events,
section.page#todo,
section.page.active#timeline,
section.page.active#bucket,
section.page.active#events,
section.page.active#todo{
  padding-top:0!important;
}

/* ToDoだけ効かないケース対策：IDとactive順序の両方で上書き */
section#todo.page,
section#todo.page.active,
.page#todo.active{
  padding-top:0!important;
  margin-top:0!important;
}

/* 追加ボタン専用。これ以外の button には絶対に当てない */
.ll-top-add-btn{
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 18px!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  background:#0f172a!important;
  border:1px solid #0f172a!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
}

/* ページネーションを小型に固定 */
#bucket .bucket-pagination button,
#bucket .bucket-pagination span,
#todo .todo-pagination button,
#todo .todo-pagination span,
.pagination button,
.pagination span,
.pager button,
.pager span{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:#fff!important;
  color:#0f172a!important;
  border:1px solid #e6e8ec!important;
}

#bucket .bucket-pagination span,
#todo .todo-pagination span,
.pagination span,
.pager span{
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  background:#f8fafc!important;
}

/* ガントチャートのイベントバーはボタンCSSの影響を受けない */
#events .annual-gantt button:not(.ll-top-add-btn),
#events .gantt-chart button:not(.ll-top-add-btn),
#events button.event-bar:not(.ll-top-add-btn),
#events button.gantt-event:not(.ll-top-add-btn){
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  box-shadow:none!important;
  filter:none!important;
  border-radius:0!important;
  font-size:inherit!important;
  letter-spacing:normal!important;
  box-sizing:border-box!important;
}

/* ガントの削除xだけは小さく */
#events .annual-gantt button[onclick*="delete"],
#events .annual-gantt button[onclick*="remove"],
#events .gantt-chart button[onclick*="delete"],
#events .gantt-chart button[onclick*="remove"]{
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  color:#94a3b8!important;
  box-shadow:none!important;
  display:inline-flex!important;
}

/* 主要ページのコンテンツ基準は現在揃っている3ページを壊さず、ToDoと人生タイムラインだけ余計な中央寄せを解除 */
#timeline.page,
#todo.page{
  max-width:none!important;
  width:auto!important;
  margin:0!important;
}

#timeline.page > *,
#todo.page > *{
  margin-left:0!important;
  margin-right:0!important;
}


/* =========================================================
   Ver 5.00: Header typography baseline
========================================================= */
section#todo.page,
section#todo,
#todo{
  padding-top:0!important;
}

/* =========================================================
   Ver 5.00: Header / phase tab cleanup
========================================================= */
/* ToDo: page-head に不足していた余白を追加して他ページと揃える */
/* 人生タイムライン: life-date の 13px 指定を確実に上書き */


/* ToDo：個別のpadding-top/bottomをやめて、指定の一括paddingへ */
/* ページネーションは小型 */
#bucket .bucket-pagination button,
#bucket .bucket-pagination span,
#todo .todo-pagination button,
#todo .todo-pagination span,
.pagination button,
.pagination span,
.pager button,
.pager span{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:#fff!important;
  color:#0f172a!important;
  border:1px solid #e6e8ec!important;
}

#bucket .bucket-pagination span,
#todo .todo-pagination span,
.pagination span,
.pager span{
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  background:#f8fafc!important;
}

/* 主要4ページの active padding 基準 */
section.page#timeline,
section.page#bucket,
section.page#events,
section.page#todo,
section.page.active#timeline,
section.page.active#bucket,
section.page.active#events,
section.page.active#todo{
  padding-top:0!important;
}

#events .ll-top-add-btn{
  position:static!important;
  background:#0f172a!important;
  color:#fff!important;
}

#events .ll-top-add-btn{
  position:static!important;
  background:#0f172a!important;
  color:#fff!important;
}

#todo .todo-check{
  align-self:center!important;
  justify-self:center!important;
}

#events .ll-top-add-btn{
  position:static!important;
  background:#0f172a!important;
  color:#fff!important;
}

#events .ll-top-add-btn{
  position:static!important;
  background:#0f172a!important;
  color:#fff!important;
}

/* 右上追加ボタンは通常配置 */
#events .ll-top-add-btn{
  position:static!important;
  background:#0f172a!important;
  color:#fff!important;
}


/* =========================================================
   Ver 5.00: UI Component Cleanup Layer
   目的：
   - ボタン / タブ / ラインバーの責務を分離
   - 年間イベントと人生タイムラインのバー表示を共通思想で整理
   - ページ固有CSSが他ページへ影響しないよう、スコープを限定
========================================================= */
:root{
  --ll-navy:#0f172a;
  --ll-gold:#c8a15a;
  --ll-border:#e6e8ec;
  --ll-muted:#64748b;
  --ll-soft:#94a3b8;
}

/* ---------------------------------------------------------
   1. Top action buttons only
   汎用 button / onclick / primary-btn には当てない
--------------------------------------------------------- */
.ll-top-add-btn{
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 18px!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  background:var(--ll-navy)!important;
  border:1px solid var(--ll-navy)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
}

/* ---------------------------------------------------------
   3. Shared pagination reset
--------------------------------------------------------- */
#bucket .bucket-pagination button,
#bucket .bucket-pagination span,
#todo .todo-pagination button,
#todo .todo-pagination span,
.pagination button,
.pagination span,
.pager button,
.pager span{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:#fff!important;
  color:var(--ll-navy)!important;
  border:1px solid var(--ll-border)!important;
}

#bucket .bucket-pagination span,
#todo .todo-pagination span,
.pagination span,
.pager span{
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  background:#f8fafc!important;
}

/* ---------------------------------------------------------
   8. Page padding baseline
--------------------------------------------------------- */
section.page#timeline,
section.page#bucket,
section.page#events,
section.page#todo,
section.page.active#timeline,
section.page.active#bucket,
section.page.active#events,
section.page.active#todo{
  padding-top:0!important;
}


/* =========================================================
   Ver 5.00: Stable line-bar component layer
========================================================= */
:root{
  --ll-navy:#0f172a;
  --ll-gold:#c8a15a;
  --ll-border:#e6e8ec;
  --ll-muted:#64748b;
  --ll-soft:#94a3b8;
}

.ll-top-add-btn{
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 18px!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  background:var(--ll-navy)!important;
  border:1px solid var(--ll-navy)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
}


#bucket .bucket-pagination button,
#bucket .bucket-pagination span,
#todo .todo-pagination button,
#todo .todo-pagination span,
.pagination button,
.pagination span,
.pager button,
.pager span{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  background:#fff!important;
  color:var(--ll-navy)!important;
  border:1px solid var(--ll-border)!important;
}

#bucket .bucket-pagination span,
#todo .todo-pagination span,
.pagination span,
.pager span{
  width:58px!important;
  min-width:58px!important;
  max-width:58px!important;
  background:#f8fafc!important;
}

/* Page padding baseline */
section.page#timeline,
section.page#bucket,
section.page#events,
section.page#todo,
section.page.active#timeline,
section.page.active#bucket,
section.page.active#events,
section.page.active#todo{
  padding-top:0!important;
}

/* revert-layer未対応環境向け：inline style を勝たせるため、width指定を事実上外す */
@supports not (width:revert-layer){
  #events .annual-event[style],
  #events .annual-event-line[style]{
    max-width:none!important;
  }
}


/* =========================================================
   Ver 5.00: Unified line-bar system
   目的：
   年間イベント / 人生タイムラインのラインバーを同じ構造に統一。
   位置と幅は JS が --ll-left / --ll-top / --ll-width に渡し、
   CSS は共通ライン表示だけを担当する。
========================================================= */
:root{
  --ll-navy:#0f172a;
  --ll-gold:#c8a15a;
  --ll-border:#e6e8ec;
  --ll-muted:#64748b;
  --ll-soft:#94a3b8;
}

/* 共通ラインアイテム */
#events .ll-line-item,
#timeline .ll-line-item{
  position:absolute!important;
  left:var(--ll-left)!important;
  top:var(--ll-top, 22px)!important;
  width:var(--ll-width)!important;
  height:44px!important;
  min-width:0!important;
  max-width:none!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* 年間イベントはtopをJSから受け取る */
#events .ll-line-item{
  top:var(--ll-top)!important;
}

/* 透明クリック領域 */
#events .ll-line-hit,
#timeline .ll-line-hit{
  position:absolute!important;
  inset:-8px -10px!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  max-width:none!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
  filter:none!important;
  cursor:pointer!important;
  z-index:5!important;
  font:inherit!important;
  letter-spacing:normal!important;
}

/* 表示バーは ll-line-bar のみ */
#events .ll-line-bar,
#timeline .ll-line-bar{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:22px!important;
  width:auto!important;
  height:2px!important;
  min-width:0!important;
  max-width:none!important;
  min-height:2px!important;
  max-height:2px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:var(--ll-navy)!important;
  box-shadow:none!important;
  filter:none!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:1!important;
}

/* 人生タイムラインはll-line-item内なので、バー位置は中央 */
#timeline .ll-line-item .ll-line-bar{
  top:0!important;
}

/* 端点 */
#events .ll-line-bar::before,
#events .ll-line-bar::after,
#timeline .ll-line-bar::before,
#timeline .ll-line-bar::after{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:var(--ll-navy)!important;
  transform:translateY(-50%)!important;
  display:block!important;
  z-index:2!important;
}

#events .ll-line-bar::before,
#timeline .ll-line-bar::before{
  left:0!important;
}

#events .ll-line-bar::after,
#timeline .ll-line-bar::after{
  right:0!important;
}

/* テキスト */
#events .ll-line-title,
#timeline .ll-line-title{
  position:absolute!important;
  left:8px!important;
  top:0!important;
  max-width:calc(100% - 16px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--ll-navy)!important;
  background:transparent!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  z-index:3!important;
}

#events .ll-line-meta,
#timeline .ll-line-meta{
  position:absolute!important;
  left:8px!important;
  top:28px!important;
  max-width:calc(100% - 16px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:var(--ll-muted)!important;
  background:transparent!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1!important;
  z-index:3!important;
}

/* 人生タイムラインはバー基準に近づける */
#timeline .ll-line-title{
  top:-18px!important;
}

#timeline .ll-line-meta{
  top:12px!important;
}

/* 上部追加ボタンだけ固定 */
.ll-top-add-btn{
  width:132px!important;
  min-width:132px!important;
  max-width:132px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 18px!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  background:var(--ll-navy)!important;
  border:1px solid var(--ll-navy)!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
}

/* 年齢ヘッダーの下線も見えるように */
#timeline .roadmap-axis,
#timeline .roadmap-header,
#timeline .journey-axis{
  border-bottom:1px solid #e6e8ec!important;
}

/* 共通ラインバーを必ず表示 */
#timeline .ll-line-item > .ll-line-bar{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:auto!important;
  height:2px!important;
  min-height:2px!important;
  max-height:2px!important;
  background:#0f172a!important;
  border:0!important;
  border-radius:0!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}

#timeline .ll-line-item > .ll-line-bar::before,
#timeline .ll-line-item > .ll-line-bar::after{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  background:#0f172a!important;
  transform:translateY(-50%)!important;
  display:block!important;
}

#timeline .ll-line-item > .ll-line-bar::before{left:0!important;}
#timeline .ll-line-item > .ll-line-bar::after{right:0!important;}

/* 文字を行中央のバーに対して上下配置 */
#timeline .ll-line-item > .ll-line-title{
  position:absolute!important;
  left:8px!important;
  top:2px!important;
  max-width:calc(100% - 16px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#0f172a!important;
  background:transparent!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
}

#timeline .ll-line-item > .ll-line-meta{
  position:absolute!important;
  left:8px!important;
  top:24px!important;
  max-width:calc(100% - 16px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#64748b!important;
  background:transparent!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1!important;
}

/* =========================================================
   Ver 5.00: Clean CSS layer
   - 旧パッチCSSと重複CSSを削除
   - ページ別スコープで再定義
   - 今後はこの層を直接編集し、不要CSSを残さない
========================================================= */
:root{
  --ll-navy:#0f172a;
  --ll-gold:#c8a15a;
  --ll-border:#e6e8ec;
  --ll-line:#eef1f5;
  --ll-muted:#64748b;
  --ll-soft:#94a3b8;
  --ll-bg-soft:#fffaf2;
}

/* Common */
.ll-top-add-btn{
  width:132px;min-width:132px;height:44px;padding:0 18px;border-radius:0;
  border:1px solid var(--ll-navy);background:var(--ll-navy);color:#fff;
  font-size:13px;font-weight:900;line-height:1;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;white-space:nowrap;box-shadow:none;
}
#timeline .life-secondary-btn,#timeline .life-primary-btn{
  height:44px;min-width:132px;padding:0 22px;border-radius:0;border:1px solid var(--ll-border);
  background:#fff;color:var(--ll-navy);font-size:13px;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;box-shadow:none;cursor:pointer;
}
#timeline .life-primary-btn{background:var(--ll-navy);border-color:var(--ll-navy);color:#fff;}
#timeline .life-eyebrow,#bucket .eyebrow,#events .eyebrow,#todo .eyebrow{
  color:var(--ll-gold);font-size:12px;font-weight:900;letter-spacing:.34em;line-height:1;margin:0 0 12px;
}

/* Bucket */
#bucket #bucketPhaseTabs,#bucket .bucket-tabs{
  display:flex;align-items:center;background:#fff;border:1px solid var(--ll-border);box-shadow:none;box-sizing:border-box;
}
#bucket #bucketPhaseTabs button,#bucket .bucket-tabs button{
  position:relative;height:54px;min-height:54px;min-width:120px;padding:0 24px;border:0;background:transparent;
  box-shadow:none;color:var(--ll-muted);font-size:13px;font-weight:900;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
}
#bucket #bucketPhaseTabs button::after,#bucket .bucket-tabs button::after{
  content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;background:transparent;
}
#bucket #bucketPhaseTabs button.active,#bucket .bucket-tabs button.active{color:var(--ll-navy);}
#bucket #bucketPhaseTabs button.active::after,#bucket .bucket-tabs button.active::after{background:var(--ll-gold);}

/* ToDo */

#todo .todo-tabs{display:flex;align-items:center;background:#fff;border:0;border-bottom:1px solid var(--ll-border);box-shadow:none;}
#todo .todo-tabs button{
  position:relative;height:54px;min-height:54px;min-width:120px;padding:0 24px;border:0;background:transparent;box-shadow:none;
  color:var(--ll-muted);font-size:13px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;
}
#todo .todo-tabs button::after{content:"";position:absolute;left:22px;right:22px;bottom:0;height:2px;background:transparent;}
#todo .todo-tabs button.active{color:var(--ll-navy);}
#todo .todo-tabs button.active::after{background:var(--ll-gold);}
#todo .todo-table{border:1px solid var(--ll-border);border-top:0;margin-top:16px;background:#fff;}
#todo .todo-table-head{border-top:1px solid var(--ll-border);border-bottom:1px solid var(--ll-border);background:#fff;}
#todo .todo-row{align-items:center;min-height:52px;}
#todo .todo-row-title,#todo .todo-row-bucket,#todo .todo-row-bucket strong,#todo .todo-row-due{font-weight:500;}
#todo .todo-row-bucket em{font-weight:700;}
#todo .todo-row.done .todo-row-title::after{content:none;display:none;}
#todo .todo-row.done .todo-row-title,#todo .todo-row.done .todo-row-bucket,#todo .todo-row.done .todo-row-bucket strong,#todo .todo-row.done .todo-row-due{
  color:var(--ll-soft);text-decoration:none;font-weight:500;
}

/* Annual Event */
#events .annual-event,#events .annual-event-line{
  position:absolute;display:block;height:44px;min-height:44px;max-height:44px;padding:0;margin:0;border:0;background:transparent;
  box-shadow:none;overflow:visible;box-sizing:border-box;min-width:0;max-width:none;
}
#events .annual-event .annual-event-hit,#events .annual-event-line .annual-event-hit,
#events .annual-event button.annual-event-hit,#events .annual-event-line button.annual-event-hit{
  position:absolute;inset:-8px -10px;width:auto;height:auto;min-width:0;min-height:0;padding:0;margin:0;border:0;border-radius:0;
  background:transparent;color:inherit;box-shadow:none;cursor:pointer;z-index:5;font:inherit;
}
#events .annual-event .annual-event-hit::before,#events .annual-event .annual-event-hit::after,
#events .annual-event-line .annual-event-hit::before,#events .annual-event-line .annual-event-hit::after{content:none;display:none;}
#events .annual-event > .annual-event-bar,#events .annual-event-line > .annual-event-bar{
  position:absolute;left:0;right:0;top:22px;width:auto;height:2px;min-height:2px;max-height:2px;background:var(--ll-navy);
  border:0;border-radius:0;box-shadow:none;display:block;opacity:1;visibility:visible;z-index:1;
}
#events .annual-event > .annual-event-bar::before,#events .annual-event-line > .annual-event-bar::before,
#events .annual-event > .annual-event-bar::after,#events .annual-event-line > .annual-event-bar::after{
  content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--ll-navy);transform:translateY(-50%);display:block;z-index:2;
}
#events .annual-event > .annual-event-bar::before,#events .annual-event-line > .annual-event-bar::before{left:0;}
#events .annual-event > .annual-event-bar::after,#events .annual-event-line > .annual-event-bar::after{right:0;}
#events .annual-event > .annual-event-title,#events .annual-event-line > .annual-event-title{
  position:absolute;left:8px;top:0;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ll-navy);background:transparent;font-size:12px;font-weight:900;line-height:1;z-index:3;
}
#events .annual-event > .annual-event-meta,#events .annual-event-line > .annual-event-meta{
  position:absolute;left:8px;top:28px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ll-muted);background:transparent;font-size:11px;font-weight:700;line-height:1;z-index:3;
}
#events .annual-event > .delete-annual,#events .annual-event-line > .delete-annual{
  position:absolute;right:-22px;top:22px;transform:translateY(-50%);width:16px;min-width:16px;height:16px;min-height:16px;
  padding:0;margin:0;border:0;background:transparent;color:var(--ll-soft);box-shadow:none;display:inline-flex;
  align-items:center;justify-content:center;font-size:14px;font-weight:900;line-height:1;z-index:6;
}

/* Life Timeline rebuilt */

#timeline .life-section{padding:52px 0;border-bottom:1px solid var(--ll-border);}
#timeline .life-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:48px;}
#timeline .life-section-head h2{position:relative;margin:0 0 12px;padding-left:18px;color:var(--ll-navy);font-size:24px;line-height:1.2;font-weight:900;}
#timeline .life-section-head h2::before{content:"";position:absolute;left:0;top:2px;width:2px;height:24px;background:var(--ll-gold);}
#timeline .life-section-head p{margin:0;color:var(--ll-muted);font-size:13px;font-weight:600;}
#timeline .life-map-nav{display:flex;align-items:center;gap:10px;}
#timeline .life-nav-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--ll-border);background:#fff;color:var(--ll-soft);display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;padding:0;}
#timeline .life-dot{width:6px;height:6px;border-radius:50%;background:#d6dde8;display:block;}
#timeline .life-dot.active{background:var(--ll-gold);}
#timeline .life-map-wrap{position:relative;overflow-x:auto;overflow-y:hidden;padding-bottom:34px;}
#timeline .life-axis{position:relative;height:62px;margin-left:220px;min-width:820px;border-bottom:1px solid var(--ll-border);}
#timeline .life-axis-mark{position:absolute;top:0;transform:translateX(-50%);text-align:center;min-width:64px;}
#timeline .life-axis-mark strong{display:block;color:var(--ll-navy);font-size:15px;font-weight:900;margin-bottom:8px;}
#timeline .life-axis-mark span{display:block;color:var(--ll-soft);font-size:12px;font-weight:700;}
#timeline .life-map-grid{position:relative;min-width:1040px;border-bottom:1px solid var(--ll-border);}
#timeline .life-map-row{display:grid;grid-template-columns:220px 1fr;height:76px;min-height:76px;border-bottom:1px solid var(--ll-line);background:#fff;position:relative;}
#timeline .life-map-row.current{background:var(--ll-bg-soft);}
#timeline .life-map-row:last-child{border-bottom:0;}
#timeline .life-map-label{display:grid;grid-template-columns:48px 1fr;grid-template-rows:1fr 1fr;align-items:center;column-gap:16px;height:100%;padding-right:18px;border-right:1px solid var(--ll-border);box-sizing:border-box;}
#timeline .life-row-no{grid-row:1 / span 2;color:var(--ll-soft);font-size:24px;font-weight:500;letter-spacing:.08em;}
#timeline .life-map-row.current .life-row-no{color:var(--ll-gold);}
#timeline .life-map-label strong{align-self:end;color:var(--ll-navy);font-size:13px;font-weight:900;line-height:1.2;white-space:nowrap;}
#timeline .life-map-label small{align-self:start;color:var(--ll-muted);font-size:10px;font-weight:700;line-height:1.2;margin-top:4px;}
#timeline .life-map-track{position:relative;height:100%;background-image:linear-gradient(to right, rgba(230,232,236,.9) 1px, transparent 1px);background-size:20% 100%;}
#timeline .life-map-line{position:absolute;left:var(--ll-left);width:var(--ll-width);top:50%;transform:translateY(-50%);height:36px;display:block;background:transparent;overflow:visible;z-index:2;}
#timeline .life-line-hit{position:absolute;top:50%;transform:translateY(-50%);height:44px;border:0;background:transparent;cursor:pointer;z-index:5;padding:0;}
#timeline .life-map-line .ll-line-bar{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:2px;background:var(--ll-navy);display:block;border:0;opacity:1;visibility:visible;}
#timeline .life-map-line.current .ll-line-bar{background:var(--ll-gold);}
#timeline .life-map-line .ll-line-bar::before,#timeline .life-map-line .ll-line-bar::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--ll-navy);transform:translateY(-50%);display:block;}
#timeline .life-map-line.current .ll-line-bar::before,#timeline .life-map-line.current .ll-line-bar::after{background:var(--ll-gold);}
#timeline .life-map-line .ll-line-bar::before{left:0;} #timeline .life-map-line .ll-line-bar::after{right:0;}
#timeline .life-map-line .ll-line-title{position:absolute;left:8px;top:2px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ll-navy);font-size:12px;font-weight:900;line-height:1;}
#timeline .life-map-line .ll-line-meta{position:absolute;left:8px;top:24px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ll-muted);font-size:11px;font-weight:700;line-height:1;}
#timeline .life-auto-table{width:100%;border-top:1px solid var(--ll-border);background:#fff;}
#timeline .life-auto-head,#timeline .life-auto-row{display:grid;grid-template-columns:90px 170px 220px minmax(320px,1fr) 120px;align-items:center;width:100%;box-sizing:border-box;}
#timeline .life-auto-head{height:44px;border-bottom:1px solid var(--ll-border);color:var(--ll-muted);font-size:11px;font-weight:900;letter-spacing:.18em;}
#timeline .life-auto-head span,#timeline .life-auto-row span{padding:0 18px;box-sizing:border-box;}
#timeline .life-auto-row{min-height:76px;border:0;border-bottom:1px solid var(--ll-line);background:#fff;text-align:left;cursor:pointer;color:var(--ll-navy);box-shadow:none;}
#timeline .life-auto-row::before,#timeline .life-auto-row::after{content:none;display:none;}
#timeline .life-auto-no{color:var(--ll-gold);font-size:24px;font-weight:500;letter-spacing:.08em;}
#timeline .life-auto-row strong{display:block;color:var(--ll-navy);font-size:14px;font-weight:900;line-height:1.4;}
#timeline .life-auto-row small{display:block;color:var(--ll-muted);font-size:11px;font-weight:700;margin-top:4px;}
#timeline .life-auto-row span:nth-child(4){color:var(--ll-navy);font-size:14px;font-weight:500;}
#timeline .life-auto-row span:last-child{justify-self:end;}
#timeline .life-auto-row em{display:inline-flex;align-items:center;justify-content:center;min-width:56px;height:24px;border:1px solid var(--ll-border);color:var(--ll-muted);background:#fff;font-size:11px;font-weight:800;font-style:normal;}
#timeline .life-auto-row em.current{color:#b7791f;border-color:#e7c984;background:var(--ll-bg-soft);}
#timeline .life-detail-actions{display:flex;gap:12px;}
#timeline .life-detail-form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:22px;}
#timeline .life-detail-form label{display:block;}
#timeline .life-detail-form label span{display:block;margin-bottom:8px;color:var(--ll-muted);font-size:12px;font-weight:900;}
#timeline .life-detail-form input,#timeline .life-detail-form select,#timeline .life-detail-form textarea{width:100%;border:1px solid var(--ll-border);border-radius:0;background:#fff;min-height:44px;padding:0 14px;box-sizing:border-box;color:var(--ll-navy);font-size:13px;font-weight:700;}
#timeline .life-detail-form textarea{min-height:96px;padding:14px;}
#timeline .life-save-row{grid-column:1 / -1;display:flex;justify-content:flex-end;}

/* Pagination */
#bucket .bucket-pagination button,#bucket .bucket-pagination span,#todo .todo-pagination button,#todo .todo-pagination span,.pagination button,.pagination span,.pager button,.pager span{
  width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border-radius:0;box-shadow:none;font-size:13px;font-weight:900;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;background:#fff;color:var(--ll-navy);border:1px solid var(--ll-border);
}
#bucket .bucket-pagination span,#todo .todo-pagination span,.pagination span,.pager span{width:58px;min-width:58px;background:#f8fafc;}


/* =========================================================
   Ver 5.00: Life Timeline visual tune
========================================================= */
#timeline .life-row-no{
  color:#cbd5e1!important;
}
#timeline .life-map-row.current .life-row-no{
  color:#c8a15a!important;
}

#timeline .life-auto-no{
  color:#cbd5e1!important;
}
#timeline .life-auto-row.current .life-auto-no{
  color:#c8a15a!important;
}

#timeline .life-axis-mark strong{
  color:#0f172a!important;
}
#timeline .life-axis-mark span{
  color:#64748b!important;
}

#timeline .life-nav-btn{
  color:#cbd5e1!important;
  position:relative!important;
  padding:0!important;
}
#timeline .life-nav-btn svg{
  width:16px!important;
  height:16px!important;
  display:block!important;
  stroke:currentColor!important;
  stroke-width:2.4!important;
  fill:none!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#timeline .life-nav-btn:hover{
  color:#64748b!important;
}

#timeline .life-auto-row span:last-child{
  justify-self:start!important;
  text-align:left!important;
  padding-left:18px!important;
  padding-right:18px!important;
}
#timeline .life-auto-head span:last-child{
  justify-self:start!important;
  text-align:left!important;
  padding-left:18px!important;
  padding-right:18px!important;
}

#timeline .life-map-row{
  cursor:default!important;
}
#timeline .life-line-hit{
  cursor:pointer!important;
}


/* =========================================================
   Ver4.07: Life map nav active state
========================================================= */
#timeline .life-nav-btn{
  pointer-events:auto!important;
  cursor:pointer!important;
}
#timeline .life-dot{
  cursor:pointer!important;
}
#timeline .life-nav-btn:active{
  transform:translateY(1px)!important;
}


/* =========================================================
   Ver4.08: Life Timeline Full Rebuild CSS
========================================================= */
.side-note span{font-size:0!important}.side-note span::before{content:"Ver 5.00";font-size:12px}

#timeline .life-secondary-btn,#timeline .life-primary-btn{height:44px!important;min-width:132px!important;padding:0 22px!important;border-radius:0!important;border:1px solid var(--ll-border,#e6e8ec)!important;background:#fff!important;color:var(--ll-navy,#0f172a)!important;font-size:13px!important;font-weight:900!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-shadow:none!important;cursor:pointer!important}#timeline .life-primary-btn{background:var(--ll-navy,#0f172a)!important;border-color:var(--ll-navy,#0f172a)!important;color:#fff!important}
#timeline .life-section{padding:52px 0!important;border-bottom:1px solid var(--ll-border,#e6e8ec)!important}#timeline .life-section-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:24px!important;margin-bottom:48px!important}#timeline .life-section-head h2{position:relative!important;margin:0 0 12px!important;padding-left:18px!important;color:var(--ll-navy,#0f172a)!important;font-size:24px!important;line-height:1.2!important;font-weight:900!important}#timeline .life-section-head h2::before{content:""!important;position:absolute!important;left:0!important;top:2px!important;width:2px!important;height:24px!important;background:var(--ll-gold,#c8a15a)!important}#timeline .life-section-head p{margin:0!important;color:var(--ll-muted,#64748b)!important;font-size:13px!important;font-weight:600!important}
#timeline .life-map-nav{display:flex!important;align-items:center!important;gap:10px!important}#timeline .life-nav-btn{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;border-radius:50%!important;border:1px solid var(--ll-border,#e6e8ec)!important;background:#fff!important;color:#cbd5e1!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;cursor:pointer!important;box-shadow:none!important;pointer-events:auto!important}#timeline .life-nav-btn svg{width:16px!important;height:16px!important;display:block!important;stroke:currentColor!important;stroke-width:2.4!important;fill:none!important;stroke-linecap:round!important;stroke-linejoin:round!important}#timeline .life-nav-btn:hover{color:#64748b!important}#timeline .life-dot{width:6px!important;min-width:6px!important;height:6px!important;min-height:6px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#d6dde8!important;display:block!important;cursor:pointer!important}#timeline .life-dot.active{background:var(--ll-gold,#c8a15a)!important}
#timeline .life-map-wrap{position:relative!important;overflow-x:auto!important;overflow-y:hidden!important;padding-bottom:34px!important}#timeline .life-axis{position:relative!important;height:62px!important;margin-left:220px!important;min-width:820px!important;border-bottom:1px solid var(--ll-border,#e6e8ec)!important}#timeline .life-axis-mark{position:absolute!important;top:0!important;transform:translateX(-50%)!important;text-align:center!important;min-width:64px!important}#timeline .life-axis-mark strong{display:block!important;color:var(--ll-navy,#0f172a)!important;font-size:15px!important;font-weight:900!important;margin-bottom:8px!important}#timeline .life-axis-mark span{display:block!important;color:#64748b!important;font-size:12px!important;font-weight:700!important}
#timeline .life-map-grid{position:relative!important;min-width:1040px!important;border-bottom:1px solid var(--ll-border,#e6e8ec)!important}#timeline .life-map-row{display:grid!important;grid-template-columns:220px 1fr!important;height:76px!important;min-height:76px!important;border-bottom:1px solid var(--ll-line,#eef1f5)!important;background:#fff!important;position:relative!important;cursor:default!important}#timeline .life-map-row.current{background:var(--ll-bg-soft,#fffaf2)!important}#timeline .life-map-row:last-child{border-bottom:0!important}#timeline .life-map-label{display:grid!important;grid-template-columns:48px 1fr!important;grid-template-rows:1fr 1fr!important;align-items:center!important;column-gap:16px!important;height:100%!important;padding-right:18px!important;border-right:1px solid var(--ll-border,#e6e8ec)!important;box-sizing:border-box!important}#timeline .life-row-no{grid-row:1 / span 2!important;color:#cbd5e1!important;font-size:24px!important;font-weight:500!important;letter-spacing:.08em!important}#timeline .life-map-row.current .life-row-no{color:var(--ll-gold,#c8a15a)!important}#timeline .life-map-label strong{align-self:end!important;color:var(--ll-navy,#0f172a)!important;font-size:13px!important;font-weight:900!important;line-height:1.2!important;white-space:nowrap!important}#timeline .life-map-label small{align-self:start!important;color:var(--ll-muted,#64748b)!important;font-size:10px!important;font-weight:700!important;line-height:1.2!important;margin-top:4px!important}
#timeline .life-map-track{position:relative!important;height:100%!important;background-image:linear-gradient(to right, rgba(230,232,236,.9) 1px, transparent 1px)!important;background-size:20% 100%!important}#timeline .life-map-line{position:absolute!important;left:var(--ll-left)!important;width:var(--ll-width)!important;top:50%!important;transform:translateY(-50%)!important;height:36px!important;display:block!important;background:transparent!important;overflow:visible!important;z-index:2!important}#timeline .life-line-hit{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;height:44px!important;border:0!important;background:transparent!important;cursor:pointer!important;z-index:5!important;padding:0!important;pointer-events:auto!important}#timeline .life-map-line .ll-line-bar{position:absolute!important;left:0!important;right:0!important;top:50%!important;transform:translateY(-50%)!important;height:2px!important;background:var(--ll-navy,#0f172a)!important;display:block!important;border:0!important;opacity:1!important;visibility:visible!important}#timeline .life-map-line.current .ll-line-bar{background:var(--ll-gold,#c8a15a)!important}#timeline .life-map-line .ll-line-bar::before,#timeline .life-map-line .ll-line-bar::after{content:""!important;position:absolute!important;top:50%!important;width:7px!important;height:7px!important;border-radius:50%!important;background:var(--ll-navy,#0f172a)!important;transform:translateY(-50%)!important;display:block!important}#timeline .life-map-line.current .ll-line-bar::before,#timeline .life-map-line.current .ll-line-bar::after{background:var(--ll-gold,#c8a15a)!important}#timeline .life-map-line .ll-line-bar::before{left:0!important}#timeline .life-map-line .ll-line-bar::after{right:0!important}#timeline .life-map-line .ll-line-title{position:absolute!important;left:8px!important;top:2px!important;max-width:calc(100% - 16px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:var(--ll-navy,#0f172a)!important;font-size:12px!important;font-weight:900!important;line-height:1!important}#timeline .life-map-line .ll-line-meta{position:absolute!important;left:8px!important;top:24px!important;max-width:calc(100% - 16px)!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:var(--ll-muted,#64748b)!important;font-size:11px!important;font-weight:700!important;line-height:1!important}
#timeline .life-auto-table{width:100%!important;border-top:1px solid var(--ll-border,#e6e8ec)!important;background:#fff!important}#timeline .life-auto-head,#timeline .life-auto-row{display:grid!important;grid-template-columns:90px 170px 220px minmax(320px,1fr) 120px!important;align-items:center!important;width:100%!important;box-sizing:border-box!important}#timeline .life-auto-head{height:44px!important;border-bottom:1px solid var(--ll-border,#e6e8ec)!important;color:var(--ll-muted,#64748b)!important;font-size:11px!important;font-weight:900!important;letter-spacing:.18em!important}#timeline .life-auto-head span,#timeline .life-auto-row span{padding:0 18px!important;box-sizing:border-box!important}#timeline .life-auto-row{min-height:76px!important;border:0!important;border-bottom:1px solid var(--ll-line,#eef1f5)!important;background:#fff!important;text-align:left!important;cursor:pointer!important;color:var(--ll-navy,#0f172a)!important;box-shadow:none!important}#timeline .life-auto-row::before,#timeline .life-auto-row::after{content:none!important;display:none!important}#timeline .life-auto-no{color:#cbd5e1!important;font-size:24px!important;font-weight:500!important;letter-spacing:.08em!important}#timeline .life-auto-row.current .life-auto-no{color:var(--ll-gold,#c8a15a)!important}#timeline .life-auto-row strong{display:block!important;color:var(--ll-navy,#0f172a)!important;font-size:14px!important;font-weight:900!important;line-height:1.4!important}#timeline .life-auto-row small{display:block!important;color:var(--ll-muted,#64748b)!important;font-size:11px!important;font-weight:700!important;margin-top:4px!important}#timeline .life-auto-row span:nth-child(4){color:var(--ll-navy,#0f172a)!important;font-size:14px!important;font-weight:500!important}#timeline .life-auto-row span:last-child,#timeline .life-auto-head span:last-child{justify-self:start!important;text-align:left!important}#timeline .life-auto-row em{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:56px!important;height:24px!important;border:1px solid var(--ll-border,#e6e8ec)!important;color:var(--ll-muted,#64748b)!important;background:#fff!important;font-size:11px!important;font-weight:800!important;font-style:normal!important}#timeline .life-auto-row em.current{color:#b7791f!important;border-color:#e7c984!important;background:var(--ll-bg-soft,#fffaf2)!important}
#timeline .life-detail-actions{display:flex!important;gap:12px!important}#timeline .life-detail-form{display:grid!important;grid-template-columns:1fr 1fr 1fr!important;gap:22px!important}#timeline .life-detail-form label{display:block!important}#timeline .life-detail-form label span{display:block!important;margin-bottom:8px!important;color:var(--ll-muted,#64748b)!important;font-size:12px!important;font-weight:900!important}#timeline .life-detail-form input,#timeline .life-detail-form select,#timeline .life-detail-form textarea{width:100%!important;border:1px solid var(--ll-border,#e6e8ec)!important;border-radius:0!important;background:#fff!important;min-height:44px!important;padding:0 14px!important;box-sizing:border-box!important;color:var(--ll-navy,#0f172a)!important;font-size:13px!important;font-weight:700!important}#timeline .life-detail-form textarea{min-height:96px!important;padding:14px!important}#timeline .life-save-row{grid-column:1 / -1!important;display:flex!important;justify-content:flex-end!important}


/* =========================================================
   Ver 5.00: life-map-nav functional state
========================================================= */
#timeline .life-nav-btn,
#timeline .life-dot{pointer-events:auto!important; cursor:pointer!important;}
#timeline .life-map-nav{position:relative!important; z-index:20!important;}
#timeline .life-nav-btn:active{transform:translateY(1px)!important;}


/* =========================================================
   Ver 5.00: Life map dot active color
========================================================= */
#timeline .life-dot{
  background:#d6dde8!important;
}
#timeline .life-dot.active,
#timeline .life-dot[aria-current="true"]{
  background:#c8a15a!important;
}


/* =========================================================
   Ver 5.00: Life map dot no-flicker color
========================================================= */
#timeline .life-dot{
  background:#d6dde8!important;
}
#timeline .life-dot.active,
#timeline .life-dot[aria-current="true"]{
  background:#c8a15a!important;
}


/* =========================================================
   Ver 5.00: Bucket drawer visibility restore
========================================================= */
/* =========================================================
   Ver 5.00: Bucket tabs button background fix
   バケット追加ボタンのネイビー指定が、フェーズタブbuttonへ波及していたため、
   タブbuttonは透明背景へ戻す。追加ボタンは .ll-top-add-btn / primary-btn のみ。
========================================================= */
/* フェーズタブはボタン扱いでも黒背景にしない */
#bucket #bucketPhaseTabs button,
#bucket .bucket-tabs button,
#bucket #bucketPhaseTabs button.primary-btn,
#bucket .bucket-tabs button.primary-btn{
  background:transparent!important;
  background-color:transparent!important;
  color:#64748b!important;
  border:0!important;
  box-shadow:none!important;
  width:auto!important;
  min-width:120px!important;
  max-width:none!important;
  height:54px!important;
  min-height:54px!important;
  padding:0 24px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* activeは文字だけ濃色。背景は透明のまま */
#bucket #bucketPhaseTabs button.active,
#bucket .bucket-tabs button.active{
  background:transparent!important;
  background-color:transparent!important;
  color:#0f172a!important;
}

/* 下線のみゴールド */
#bucket #bucketPhaseTabs button::after,
#bucket .bucket-tabs button::after{
  content:""!important;
  position:absolute!important;
  left:22px!important;
  right:22px!important;
  bottom:0!important;
  height:2px!important;
  background:transparent!important;
}

#bucket #bucketPhaseTabs button.active::after,
#bucket .bucket-tabs button.active::after{
  background:#c8a15a!important;
}

/* 追加ボタンだけネイビー */
#bucket .ll-top-add-btn,
#bucket .page-head .primary-btn,
#bucket .bucket-head .primary-btn{
  background:#0f172a!important;
  background-color:#0f172a!important;
  color:#fff!important;
  border:1px solid #0f172a!important;
}
/* フェーズタブだけは透明背景 */
#bucket #bucketPhaseTabs,
#bucket .bucket-tabs{
  background:#fff!important;
  border:1px solid #e6e8ec!important;
}

#bucket #bucketPhaseTabs button,
#bucket .bucket-tabs button,
#bucket #bucketPhaseTabs button.primary-btn,
#bucket .bucket-tabs button.primary-btn{
  position:relative!important;
  background:transparent!important;
  background-color:transparent!important;
  color:#64748b!important;
  border:0!important;
  box-shadow:none!important;
  width:auto!important;
  min-width:120px!important;
  max-width:none!important;
  height:54px!important;
  min-height:54px!important;
  padding:0 24px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

#bucket #bucketPhaseTabs button.active,
#bucket .bucket-tabs button.active{
  background:transparent!important;
  background-color:transparent!important;
  color:#0f172a!important;
}

#bucket #bucketPhaseTabs button::after,
#bucket .bucket-tabs button::after{
  content:""!important;
  position:absolute!important;
  left:22px!important;
  right:22px!important;
  bottom:0!important;
  height:2px!important;
  background:transparent!important;
}

#bucket #bucketPhaseTabs button.active::after,
#bucket .bucket-tabs button.active::after{
  background:#c8a15a!important;
}

/* 追加ボタンだけネイビー */
#bucket .ll-top-add-btn,
#bucket .page-head .primary-btn,
#bucket .bucket-head .primary-btn{
  background:#0f172a!important;
  background-color:#0f172a!important;
  color:#fff!important;
  border:1px solid #0f172a!important;
}
/* =========================================================
   Ver 5.00: Bucket drawer clean single source
   既存のbucket drawer指定を削除し、このブロックだけで表示を管理。
========================================================= */
/* backdrop */
#bucketDrawerBackdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.34);
  z-index:1190;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .24s ease, visibility .24s ease;
}

#bucketDrawerBackdrop.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* drawer */
#bucketDrawer{
  position:fixed;
  top:0;
  right:0;
  left:auto;
  bottom:auto;
  width:clamp(420px, 46vw, 560px);
  max-width:560px;
  min-width:420px;
  height:100vh;
  max-height:100vh;
  background:#fff;
  z-index:1200;
  overflow-y:auto;
  overflow-x:hidden;
  box-sizing:border-box;
  transform:translateX(104%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:transform .24s ease, opacity .24s ease, visibility .24s ease;
  box-shadow:-24px 0 60px rgba(15,23,42,.12);
}

#bucketDrawer.open{
  transform:translateX(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* drawer contents */
#bucketDrawer .bucket-drawer-head,
#bucketDrawer .bucket-drawer-body,
#bucketDrawer .bucket-drawer-actions{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

#bucketDrawer .bucket-drawer-head{
  position:relative;
  padding:28px 32px;
  border-bottom:1px solid #e6e8ec;
}

#bucketDrawer .bucket-drawer-body{
  padding:0;
}

#bucketDrawer .bucket-edit-section{
  padding:26px 32px;
  border-bottom:1px solid #e6e8ec;
  box-sizing:border-box;
}

#bucketDrawer .bucket-drawer-actions{
  position:sticky;
  bottom:0;
  display:flex;
  justify-content:flex-start;
  gap:12px;
  padding:18px 32px 28px;
  background:#fff;
  border-top:1px solid #e6e8ec;
  z-index:2;
}

#bucketDrawer input,
#bucketDrawer select,
#bucketDrawer textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

#bucketDrawer .bucket-form-grid,
#bucketDrawer .bucket-edit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 22px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

#bucketDrawer .bucket-form-grid > .full,
#bucketDrawer .bucket-edit-grid > .full{
  grid-column:1 / -1;
}

#closeBucketDrawerBtn{
  position:absolute;
  top:24px;
  right:28px;
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  padding:0;
  border:0;
  background:transparent;
  color:#0f172a;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
  cursor:pointer;
}


/* Ver 5.00 marker */


/* =========================================================
   Ver 5.00: Bucket drawer action buttons
   削除・キャンセル・保存ボタンを新デザインへ統一。
========================================================= */
#bucketDrawer .bucket-drawer-actions{
  position:sticky;
  bottom:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:18px 32px 28px;
  background:#fff;
  border-top:1px solid #e6e8ec;
  z-index:2;
}

/* 共通 */
#bucketDrawer .bucket-drawer-actions button,
#deleteBucketDrawerBtn,
#cancelBucketDrawerBtn,
#saveBucketDrawerBtn{
  width:112px;
  min-width:112px;
  height:44px;
  min-height:44px;
  padding:0 18px;
  border-radius:0;
  box-shadow:none;
  font-size:13px;
  font-weight:900;
  line-height:1;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-sizing:border-box;
  white-space:nowrap;
}

/* 削除・キャンセル：白ベース */
#deleteBucketDrawerBtn,
#cancelBucketDrawerBtn{
  background:#fff;
  color:#0f172a;
  border:1px solid #e6e8ec;
}

/* 保存：ネイビー */
#saveBucketDrawerBtn{
  background:#0f172a;
  color:#fff;
  border:1px solid #0f172a;
}

/* 古いオレンジ/角丸/影を打ち消す */
#bucketDrawer .bucket-drawer-actions .danger,
#bucketDrawer .bucket-drawer-actions .secondary,
#bucketDrawer .bucket-drawer-actions .primary,
#bucketDrawer .bucket-drawer-actions .btn-primary,
#bucketDrawer .bucket-drawer-actions .btn-secondary{
  border-radius:0;
  box-shadow:none;
}

/* hoverは控えめ */
#deleteBucketDrawerBtn:hover,
#cancelBucketDrawerBtn:hover{
  background:#f8fafc;
}

#saveBucketDrawerBtn:hover{
  background:#111827;
}


/* =========================================================
   Ver 5.00: Bucket related modal z-index / close button fix
   - バケットドロワー内の「既存から選択」「新規作成」モーダルをドロワーより上へ
   - 新規作成モーダルの×ボタン背景を透明化
========================================================= */
/* ドロワー内の関連リスト削除用の小さい×はボタン背景を出さない */
#bucketDrawer .bucket-related button:not(.life-secondary-btn):not(.life-primary-btn):not(#saveBucketDrawerBtn):not(#cancelBucketDrawerBtn):not(#deleteBucketDrawerBtn){
  box-shadow:none;
}


/* =========================================================
   Ver4.22: Bucket related modal single source
   既存/新規の関連モーダルをドロワーより前面へ。
   ×ボタンと関連削除ボタンは背景を透明化。
========================================================= */
/* bucket drawer layer */
#bucketDrawer{
  z-index:1200;
}
#bucketDrawerBackdrop{
  z-index:1190;
}

/* related modal layer */
#modalBackdrop{
  z-index:1400;
}
#modalBackdrop.active,
#modalBackdrop.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* モーダル本体は必ず背景より前面 */
#modalBackdrop .modal,
#modalBackdrop .confirm-modal,
#modalBackdrop .select-modal,
#modalBackdrop .event-modal,
#modalBackdrop .todo-modal,
#modalBackdrop > .modal{
  position:relative;
  z-index:1410;
}

/* ドロワー内から関連モーダルを開いた時、ドロワー背景は背面維持 */
#bucketDrawerBackdrop.bucket-select-modal-style,
#bucketDrawerBackdrop.behind-modal{
  z-index:1190;
  pointer-events:none;
}

/* モーダルの×ボタンは透明 */
#modalBackdrop .modal-close,
#modalBackdrop .close-btn,
#modalBackdrop button[aria-label*="閉じる"],
#modalBackdrop button[aria-label*="close" i],
#modalBackdrop .modal-head button,
#modalBackdrop .modal-header button{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#64748b!important;
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  border-radius:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* 関連済み行の削除×は黒背景にしない */
#bucketDrawer .bucket-related-list button,
#bucketDrawer .bucket-related-item button,
#bucketDrawer .bucket-unlink-btn{
  background:transparent!important;
  background-color:transparent!important;
  color:#64748b!important;
  border:0!important;
  box-shadow:none!important;
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}


/* =========================================================
   Ver 5.00: Bucket related select modal refresh
========================================================= */
#modalBackdrop.bucket-select-modal-style{
  display:grid;
  place-items:center;
  padding:28px;
}
#modalBackdrop.bucket-select-modal-style .modal{
  width:min(720px, calc(100vw - 48px));
  max-height:min(720px, calc(100vh - 48px));
  padding:0;
  border-radius:20px;
  border:1px solid #e6e8ec;
  box-shadow:0 28px 70px rgba(15, 23, 42, .18);
  overflow:hidden;
  background:#fff;
}
#modalBackdrop.bucket-select-modal-style .modal-head{
  margin:0;
  padding:22px 24px;
  border-bottom:1px solid #eef1f5;
}
#modalBackdrop.bucket-select-modal-style .modal-head h3{
  font-size:16px;
  font-weight:900;
  color:#0f172a;
}
#modalBackdrop.bucket-select-modal-style #modalBody{
  padding:0 24px 24px;
}
#modalBackdrop.bucket-select-modal-style .bucket-select-modal-form{
  display:grid;
  gap:18px;
  padding-top:18px;
}
#modalBackdrop.bucket-select-modal-style .bucket-select-list{
  border:1px solid #e6e8ec;
  border-radius:14px;
  background:#fff;
  overflow:auto;
}
#modalBackdrop.bucket-select-modal-style .bucket-select-row{
  min-height:56px;
  padding:0 16px;
  transition:background .18s ease;
}
#modalBackdrop.bucket-select-modal-style .bucket-select-row:hover{
  background:#fafbfd;
}
#modalBackdrop.bucket-select-modal-style .bucket-select-row input{
  margin:0;
}
#modalBackdrop.bucket-select-modal-style .bucket-select-row span{
  font-size:14px;
}
#modalBackdrop.bucket-select-modal-style .bucket-select-row small{
  font-size:12px;
  white-space:nowrap;
}
#modalBackdrop.bucket-select-modal-style .bucket-select-modal-actions{
  margin-top:0;
}
#modalBackdrop.bucket-select-modal-style .bucket-select-action-btn{
  min-width:104px;
}


/* =========================================================
   Ver 5.00: Shared modal clickable layer
========================================================= */
#modalBackdrop.active{
  display:grid;
  place-items:center;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:1400;
}

#modalBackdrop.active .modal{
  pointer-events:auto;
  position:relative;
  z-index:1410;
}

#modalBackdrop .modal-head button,
#closeModal{
  background:transparent!important;
  background-color:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:#64748b!important;
  cursor:pointer!important;
  pointer-events:auto!important;
}

#modalBackdrop form,
#modalBackdrop input,
#modalBackdrop select,
#modalBackdrop textarea,
#modalBackdrop button,
#modalBackdrop label{
  pointer-events:auto!important;
}


/* =========================================================
   Ver 5.00: Shared .modal design single source
   class="modal" を使う既存/新規モーダルのデザインを統一。
========================================================= */
/* backdrop */
#modalBackdrop{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  padding:32px;
  background:rgba(15,23,42,.38);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:1400;
}

#modalBackdrop.active,
#modalBackdrop.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* modal common */
#modalBackdrop .modal{
  width:min(720px, calc(100vw - 64px));
  max-height:calc(100vh - 64px);
  overflow:auto;
  background:#fff;
  border:1px solid #e6e8ec;
  border-radius:0;
  padding:0;
  box-shadow:0 28px 70px rgba(15,23,42,.18);
  position:relative;
  z-index:1410;
  box-sizing:border-box;
}

/* bucket上の関連選択モーダルは少しだけ柔らかい角 */
#modalBackdrop.bucket-select-modal-style .modal{
  border-radius:16px;
}

/* modal header */
#modalBackdrop .modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0;
  padding:24px 28px;
  border-bottom:1px solid #e6e8ec;
}

#modalBackdrop .modal-head h3{
  margin:0;
  color:#0f172a;
  font-size:20px;
  font-weight:900;
  line-height:1.3;
  letter-spacing:-.02em;
}

/* close */
#modalBackdrop .modal-head button,
#modalBackdrop #closeModal{
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#64748b;
  box-shadow:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:22px;
  line-height:1;
}

/* modal body/form */
#modalBackdrop #modalBody{
  padding:28px;
}

#modalBackdrop #modalForm{
  margin:0;
}

#modalBackdrop .form-grid.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 22px;
}

#modalBackdrop label{
  color:#64748b;
  font-size:12px;
  font-weight:900;
  gap:8px;
}

#modalBackdrop input,
#modalBackdrop select,
#modalBackdrop textarea{
  min-height:44px;
  border:1px solid #dfe5ee;
  border-radius:0;
  background:#fff;
  color:#0f172a;
  padding:0 14px;
  font-size:13px;
  font-weight:700;
  box-shadow:none;
}

#modalBackdrop textarea{
  padding:14px;
}

/* actions */
#modalBackdrop .modal-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-top:24px;
}

#modalBackdrop .ghost-btn,
#modalBackdrop .primary-btn,
#modalBackdrop .bucket-select-action-btn{
  width:112px;
  min-width:112px;
  height:44px;
  min-height:44px;
  padding:0 18px;
  border-radius:0;
  box-shadow:none;
  font-size:13px;
  font-weight:900;
  line-height:1;
  letter-spacing:.02em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-sizing:border-box;
}

#modalBackdrop .ghost-btn{
  background:#fff;
  color:#0f172a;
  border:1px solid #e6e8ec;
}

#modalBackdrop .primary-btn{
  background:#0f172a;
  color:#fff;
  border:1px solid #0f172a;
}

/* existing select list */
#modalBackdrop .bucket-select-modal-form{
  display:grid;
  gap:18px;
}

#modalBackdrop .bucket-select-list{
  border:1px solid #e6e8ec;
  background:#fff;
  overflow:hidden;
}

#modalBackdrop .bucket-select-row{
  min-height:56px;
  display:grid;
  grid-template-columns:22px 1fr auto;
  align-items:center;
  gap:14px;
  padding:0 16px;
  border-bottom:1px solid #eef1f5;
  cursor:pointer;
  color:#0f172a;
}

#modalBackdrop .bucket-select-row:last-child{
  border-bottom:0;
}

#modalBackdrop .bucket-select-row:hover{
  background:#fafbfd;
}

#modalBackdrop .bucket-select-row input{
  width:14px;
  height:14px;
  min-height:0;
  padding:0;
}

#modalBackdrop .bucket-select-row span{
  color:#0f172a;
  font-size:13px;
  font-weight:900;
}

#modalBackdrop .bucket-select-row small{
  color:#64748b;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

/* clickable */
#modalBackdrop form,
#modalBackdrop input,
#modalBackdrop select,
#modalBackdrop textarea,
#modalBackdrop button,
#modalBackdrop label{
  pointer-events:auto;
}


/* =========================================================
   Ver 5.00: Bucket select validation message
   ブラウザ標準alertを使わず、モーダル内にエラー表示。
========================================================= */
#modalBackdrop .bucket-select-error{
  min-height:40px;
  padding:11px 14px;
  border:1px solid #f2c2b2;
  background:#fff7f3;
  color:#c2410c;
  font-size:13px;
  font-weight:800;
  line-height:1.35;
  box-sizing:border-box;
}

#modalBackdrop .bucket-select-error[hidden]{
  display:none;
}

#modalBackdrop .bucket-select-list.is-error{
  border-color:#f2c2b2;
  box-shadow:0 0 0 3px rgba(255,112,77,.12);
}


/* =========================================================
   Ver 5.00: Bucket related ToDo display
========================================================= */
/* バケット編集内の関連ToDoでは削除ボタンを表示しない */
#bucketDrawer .bucket-related-todo button,
#bucketDrawer .bucket-todo-item button,
#bucketDrawer [data-todo-id] .bucket-unlink-btn,
#bucketDrawer [data-todo-id] button{
  display:none!important;
}

/* 関連ToDo行はクリックで編集 */
#bucketDrawer .bucket-related-todo,
#bucketDrawer .bucket-todo-item,
#bucketDrawer [data-todo-id]{
  cursor:pointer;
}


/* =========================================================
   Ver 5.00: Bucket related ToDo editor bridge
========================================================= */
#bucketDrawer .bucket-related-todo,
#bucketDrawer [data-todo-id]{
  cursor:pointer;
}

#bucketDrawer .bucket-related-todo button,
#bucketDrawer [data-todo-id] button{
  display:none!important;
}


/* =========================================================
   Ver 5.00: ToDo table layout restore
   ToDo一覧だけに限定して、表レイアウトを復元。
========================================================= */
#todo .todo-table{
  width:100%;
  border:1px solid #e6e8ec;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  box-sizing:border-box;
}

#todo .todo-table-head,
#todo .todo-row{
  display:grid;
  grid-template-columns:44px minmax(280px, 1fr) minmax(190px, 280px) 160px;
  align-items:center;
  width:100%;
  box-sizing:border-box;
}

#todo .todo-table-head{
  min-height:52px;
  border-bottom:1px solid #e6e8ec;
  color:#64748b;
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
}

#todo .todo-table-head > *{
  padding:0 18px;
}

#todo .todo-row{
  min-height:54px;
  border-bottom:1px solid #eef1f5;
  color:#0f172a;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
}

#todo .todo-row:last-child{
  border-bottom:0;
}

#todo .todo-row > *{
  padding:0 18px;
  box-sizing:border-box;
}

#todo .todo-row:hover{
  background:#fafbfd;
}

#todo .todo-check-cell,
#todo .todo-check-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0!important;
}

#todo .todo-check{
  width:16px;
  height:16px;
  min-width:16px;
  min-height:16px;
  border:1px solid #b9c7d8;
  background:#fff;
  border-radius:0;
  display:inline-block;
  box-sizing:border-box;
}

#todo .todo-check.done,
#todo .todo-row.is-done .todo-check,
#todo .todo-row.done .todo-check{
  background:#c8a15a;
  border-color:#c8a15a;
}

#todo .todo-title,
#todo .todo-title-cell{
  color:#0f172a;
  font-size:14px;
  font-weight:500;
  line-height:1.45;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#todo .todo-row.is-done .todo-title,
#todo .todo-row.done .todo-title,
#todo .todo-row.is-done .todo-title-cell,
#todo .todo-row.done .todo-title-cell{
  color:#94a3b8;
  text-decoration:none;
  font-weight:500;
}

#todo .todo-bucket,
#todo .todo-bucket-cell{
  color:#64748b;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#todo .todo-due,
#todo .todo-due-cell{
  color:#0f172a;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
}

#todo .todo-phase-chip,
#todo .todo-bucket-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:22px;
  padding:0 9px;
  border:1px solid #dfe5ee;
  background:#fff;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  line-height:1;
  margin-right:8px;
  box-sizing:border-box;
}

#todo .todo-list-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:22px;
}

#todo .todo-pager{
  display:flex;
  align-items:center;
  gap:8px;
}

#todo .todo-pager button,
#todo .todo-page-btn{
  width:36px;
  height:36px;
  min-width:36px;
  padding:0;
  border:1px solid #e6e8ec;
  background:#fff;
  color:#94a3b8;
  box-shadow:none;
  border-radius:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

#todo .todo-page-current{
  min-width:54px;
  height:36px;
  border:1px solid #e6e8ec;
  background:#fff;
  color:#0f172a;
  font-size:14px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

@media (max-width: 900px){
  #todo .todo-table-head,
  #todo .todo-row{
    grid-template-columns:40px minmax(220px, 1fr) minmax(120px, 180px) 130px;
  }
}


/* =========================================================
   Ver 5.00: Annual event + action calendar
   カード化せず、人生タイムラインと同じセクション設計で統一。
========================================================= */
#events{
  --annual-navy:#0f172a;
  --annual-muted:#64748b;
  --annual-soft:#94a3b8;
  --annual-gold:#c8a15a;
  --annual-border:#e6e8ec;
  --annual-bg:#ffffff;
}

/* 年間イベント：カード枠を外して、ページ内セクションに戻す */
#events .annual-card,
#events .annual-action-section{
  width:100%;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:transparent;
}

#events .annual-card{
  padding-top:40px;
  border-top:1px solid var(--annual-border);
}

#events .annual-action-section{
  margin-top:76px;
  padding-top:34px;
  border-top:1px solid var(--annual-border);
}

/* セクション見出し */
#events .annual-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  margin:0 0 34px;
}

#events .annual-section-head h3{
  position:relative;
  margin:0 0 10px;
  padding-left:18px;
  color:var(--annual-navy);
  font-size:24px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.25;
}

#events .annual-section-head h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.18em;
  width:2px;
  height:1.05em;
  background:var(--annual-gold);
}

#events .annual-section-head .muted{
  margin:0;
  color:var(--annual-muted);
  font-size:13px;
  font-weight:700;
}

/* ガントチャート：多色にせず、ネイビー＋ゴールドのみ */
#events .annual-wrap{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:0!important;
}

#events .annual-months,
#events .annual-track{
  margin:0!important;
}

#events .annual-month{
  color:var(--annual-navy)!important;
  font-weight:900!important;
}

#events .annual-track{
  border-top:1px solid var(--annual-border)!important;
  border-bottom:1px solid var(--annual-border)!important;
  background:transparent!important;
}

#events .annual-row{
  border-bottom:1px solid #eef1f5!important;
}

#events .annual-row-label{
  background:#fff!important;
  border-right:1px solid var(--annual-border)!important;
}

#events .annual-row-label em{
  color:#94a3b8!important;
}

#events .annual-row-label strong{
  color:var(--annual-navy)!important;
}

#events .annual-grid-line{
  background:#eef1f5!important;
}

#events .annual-today-line{
  background:var(--annual-gold)!important;
}

#events .ll-line-bar{
  background:var(--annual-navy)!important;
}

#events .source-bucket .ll-line-bar{
  background:var(--annual-gold)!important;
}

/* カレンダー上部 */
#events .annual-action-head{
  margin-bottom:20px;
}

#events .annual-calendar-tools{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}

#events .annual-view-switch{
  display:flex;
  align-items:center;
  border:1px solid var(--annual-border);
  background:#fff;
}

#events .annual-view-switch button{
  width:84px;
  height:38px;
  border:0;
  border-right:1px solid var(--annual-border);
  background:#fff;
  color:var(--annual-muted);
  box-shadow:none;
  border-radius:0;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

#events .annual-view-switch button:last-child{
  border-right:0;
}

#events .annual-view-switch button.active{
  background:var(--annual-navy);
  color:#fff;
}

#events .annual-calendar-legend{
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--annual-muted);
  font-size:12px;
  font-weight:800;
}

#events .annual-calendar-legend span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

#events .annual-calendar-legend i{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}

#events .annual-legend-event{background:var(--annual-gold);}
#events .annual-legend-todo{background:var(--annual-navy);}
#events .annual-legend-sub{background:#cbd5e1;}

#events .annual-calendar-nav{
  display:flex;
  align-items:center;
  gap:18px;
  margin:18px 0;
}

#events .annual-calendar-nav strong{
  min-width:120px;
  color:var(--annual-navy);
  font-size:20px;
  font-weight:900;
}

#events .annual-calendar-nav button{
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--annual-navy);
  box-shadow:none;
  border-radius:0;
  font-size:28px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

/* カレンダー本体 */
#events .annual-action-calendar{
  width:100%;
}

#events .annual-cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  border-top:1px solid var(--annual-border);
  border-left:1px solid var(--annual-border);
  background:#fff;
}

#events .annual-cal-week{
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--annual-border);
  border-bottom:1px solid var(--annual-border);
  color:var(--annual-navy);
  font-size:12px;
  font-weight:900;
}

#events .annual-cal-day{
  min-height:112px;
  border-right:1px solid var(--annual-border);
  border-bottom:1px solid var(--annual-border);
  padding:10px;
  box-sizing:border-box;
  background:#fff;
}

#events .annual-cal-day.muted{
  background:#fbfcfe;
}

#events .annual-cal-day.muted .annual-cal-day-num{
  color:#cbd5e1;
}

#events .annual-cal-day.today .annual-cal-day-num{
  color:var(--annual-gold);
}

#events .annual-cal-day-num{
  color:var(--annual-navy);
  font-size:13px;
  font-weight:900;
  line-height:1;
  margin-bottom:8px;
}

#events .annual-cal-day-items{
  display:grid;
  gap:5px;
}

#events .annual-cal-item{
  display:flex;
  align-items:flex-start;
  gap:6px;
  min-height:18px;
  color:var(--annual-navy);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}

#events .annual-cal-item span{
  width:8px;
  height:8px;
  min-width:8px;
  border:1px solid var(--annual-soft);
  margin-top:3px;
  box-sizing:border-box;
  background:#fff;
}

#events .annual-cal-item.event{
  color:var(--annual-muted);
}

#events .annual-cal-item.event span{
  border-color:var(--annual-gold);
  background:var(--annual-gold);
}

#events .annual-cal-item.todo span{
  border-color:var(--annual-navy);
}

#events .annual-cal-item.sub{
  color:var(--annual-muted);
  padding-left:12px;
}

#events .annual-cal-item.sub span{
  border-color:#cbd5e1;
}

#events .annual-cal-item.done{
  color:#94a3b8;
}

#events .annual-cal-item em{
  font-style:normal;
  min-width:0;
}

#events .annual-cal-item b{
  color:var(--annual-navy);
  font-weight:900;
}

#events .annual-cal-more{
  color:var(--annual-muted);
  font-size:11px;
  font-weight:900;
}

#events .annual-cal-list{
  border-top:1px solid var(--annual-border);
}

#events .annual-cal-list-row{
  display:grid;
  grid-template-columns:80px 1fr;
  min-height:64px;
  border-bottom:1px solid var(--annual-border);
}

#events .annual-cal-list-date{
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-right:1px solid var(--annual-border);
  padding-left:18px;
}

#events .annual-cal-list-date strong{
  color:var(--annual-navy);
  font-size:20px;
  line-height:1;
}

#events .annual-cal-list-date span{
  margin-top:4px;
  color:var(--annual-muted);
  font-size:11px;
  font-weight:900;
}

#events .annual-cal-list-items{
  display:grid;
  gap:6px;
  padding:14px 18px;
}

#events .annual-cal-empty{
  padding:36px 0;
  color:var(--annual-muted);
  font-weight:800;
  text-align:center;
}

/* サブタスク期限入力 */
#todo .todo-subtask-row{
  grid-template-columns:28px minmax(0, 1fr) 148px 32px!important;
}

#todo .todo-subtask-due{
  height:36px!important;
  min-height:36px!important;
  font-size:12px!important;
}

@media (max-width: 1000px){
  #events .annual-section-head{
    flex-direction:column;
  }
  #events .annual-calendar-tools{
    width:100%;
    justify-content:space-between;
  }
  #events .annual-cal-day{
    min-height:96px;
  }
}


/* =========================================================
   Ver 5.00: Annual gantt bar restore
   年間イベントのクリック領域(button.annual-event-hit)がボタンCSSを拾い、
   ネイビーの大きな矩形として見えていたため、ガント専用に再固定。
========================================================= */
/* ガントアイテム本体は透明の配置コンテナ */
#events .annual-track .annual-event,
#events .annual-track .annual-event-line,
#events .annual-track .ll-line-item.annual-event,
#events .annual-track .ll-line-item.annual-event-line{
  position:absolute!important;
  left:var(--ll-left)!important;
  top:var(--ll-top)!important;
  width:var(--ll-width)!important;
  min-width:18px!important;
  max-width:none!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* 透明クリック領域。これが黒いボタンとして表示されないようにする */
#events .annual-track .annual-event-hit,
#events .annual-track button.annual-event-hit,
#events .annual-track .ll-line-hit,
#events .annual-track button.ll-line-hit{
  position:absolute!important;
  inset:-8px -10px!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  background-color:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
  filter:none!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  cursor:pointer!important;
  z-index:4!important;
  font-size:0!important;
  line-height:0!important;
}

/* 実際に見えるバーは細い線のみ */
#events .annual-track .annual-event-bar,
#events .annual-track .ll-line-bar{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:22px!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  height:2px!important;
  min-height:2px!important;
  max-height:2px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#0f172a!important;
  background-color:#0f172a!important;
  box-shadow:none!important;
  filter:none!important;
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  z-index:2!important;
}

#events .annual-track .source-bucket .annual-event-bar,
#events .annual-track .source-bucket .ll-line-bar{
  background:#c8a15a!important;
  background-color:#c8a15a!important;
}

/* バーの端点 */
#events .annual-track .annual-event-bar::before,
#events .annual-track .annual-event-bar::after,
#events .annual-track .ll-line-bar::before,
#events .annual-track .ll-line-bar::after{
  content:""!important;
  position:absolute!important;
  top:50%!important;
  width:7px!important;
  height:7px!important;
  min-width:7px!important;
  min-height:7px!important;
  border-radius:50%!important;
  background:#0f172a!important;
  background-color:#0f172a!important;
  transform:translateY(-50%)!important;
  display:block!important;
  z-index:3!important;
}

#events .annual-track .source-bucket .annual-event-bar::before,
#events .annual-track .source-bucket .annual-event-bar::after,
#events .annual-track .source-bucket .ll-line-bar::before,
#events .annual-track .source-bucket .ll-line-bar::after{
  background:#c8a15a!important;
  background-color:#c8a15a!important;
}

#events .annual-track .annual-event-bar::before,
#events .annual-track .ll-line-bar::before{ left:0!important; }

#events .annual-track .annual-event-bar::after,
#events .annual-track .ll-line-bar::after{ right:0!important; }

/* テキストはクリック領域より前に出す */
#events .annual-track .annual-event-title,
#events .annual-track .ll-line-title{
  position:absolute!important;
  left:8px!important;
  top:0!important;
  max-width:calc(100% - 16px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#0f172a!important;
  background:transparent!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  z-index:6!important;
  pointer-events:none!important;
}

#events .annual-track .annual-event-meta,
#events .annual-track .ll-line-meta{
  position:absolute!important;
  left:8px!important;
  top:28px!important;
  max-width:calc(100% - 16px)!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#64748b!important;
  background:transparent!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1!important;
  z-index:6!important;
  pointer-events:none!important;
}

/* 削除xだけは小さく透明 */
#events .annual-track .delete-annual,
#events .annual-track .ll-line-delete{
  position:absolute!important;
  right:-22px!important;
  top:22px!important;
  transform:translateY(-50%)!important;
  width:16px!important;
  min-width:16px!important;
  max-width:16px!important;
  height:16px!important;
  min-height:16px!important;
  max-height:16px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-color:transparent!important;
  color:#94a3b8!important;
  box-shadow:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1!important;
  z-index:7!important;
  cursor:pointer!important;
}


/* =========================================================
   Ver 5.00: Annual action calendar weekly view
   週次ビューは0:00〜24:00を1週間分だけ表示。
========================================================= */
#events .annual-week-grid{
  display:grid;
  grid-template-columns:72px repeat(7, minmax(120px, 1fr));
  border-top:1px solid var(--annual-border,#e6e8ec);
  border-left:1px solid var(--annual-border,#e6e8ec);
  background:#fff;
  width:100%;
  box-sizing:border-box;
}

#events .annual-week-time-head,
#events .annual-week-day-head,
#events .annual-week-hour,
#events .annual-week-cell{
  border-right:1px solid var(--annual-border,#e6e8ec);
  border-bottom:1px solid var(--annual-border,#e6e8ec);
  box-sizing:border-box;
}

#events .annual-week-time-head{
  height:54px;
  background:#fff;
}

#events .annual-week-day-head{
  height:54px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:#fff;
}

#events .annual-week-day-head strong{
  color:var(--annual-navy,#0f172a);
  font-size:16px;
  font-weight:900;
  line-height:1;
}

#events .annual-week-day-head span{
  color:var(--annual-muted,#64748b);
  font-size:11px;
  font-weight:900;
  line-height:1;
}

#events .annual-week-day-head.today strong{
  color:var(--annual-gold,#c8a15a);
}

#events .annual-week-hour{
  min-height:48px;
  padding:10px 12px;
  color:var(--annual-muted,#64748b);
  font-size:11px;
  font-weight:900;
  background:#fbfcfe;
}

#events .annual-week-cell{
  min-height:48px;
  padding:6px;
  background:#fff;
  display:grid;
  align-content:start;
  gap:4px;
}

#events .annual-week-cell .annual-cal-item{
  font-size:11px;
  line-height:1.3;
}

#events .annual-week-cell:empty{
  background:#fff;
}

@media (max-width: 1100px){
  #events .annual-week-grid{
    min-width:980px;
  }
  #events .annual-action-calendar{
    overflow-x:auto;
  }
}


/* =========================================================
   Ver 5.00: Annual calendar clickable ToDo
========================================================= */
#events .annual-cal-item.todo[data-todo-id],
#events .annual-cal-item.sub[data-todo-id]{
  cursor:pointer;
}

#events .annual-cal-item.todo[data-todo-id]:hover em,
#events .annual-cal-item.sub[data-todo-id]:hover em{
  text-decoration:underline;
  text-underline-offset:3px;
}


/* =========================================================
   Ver 5.00: ToDo all-day / timed mode
========================================================= */
#todoDrawer .todo-time-mode-block{
  display:grid;
  gap:10px;
}

#todoDrawer .todo-time-mode-label{
  color:#64748b;
  font-size:12px;
  font-weight:900;
}

#todoDrawer .todo-time-mode-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:1px solid #dfe5ee;
  background:#fff;
}

#todoDrawer .todo-time-mode-toggle button{
  height:42px;
  min-height:42px;
  padding:0 14px;
  border:0;
  border-right:1px solid #dfe5ee;
  background:#fff;
  color:#64748b;
  box-shadow:none;
  border-radius:0;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}

#todoDrawer .todo-time-mode-toggle button:last-child{
  border-right:0;
}

#todoDrawer .todo-time-mode-toggle button.active{
  background:#0f172a;
  color:#fff;
}

#todoDrawer .todo-time-inputs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

#todoDrawer .todo-time-inputs[hidden]{
  display:none;
}

#todoDrawer .todo-time-inputs label{
  display:grid;
  gap:8px;
  color:#64748b;
  font-size:12px;
  font-weight:900;
}

#todoDrawer .todo-time-inputs input{
  height:42px;
  min-height:42px;
  border:1px solid #dfe5ee;
  border-radius:0;
  padding:0 12px;
  font-size:13px;
  font-weight:800;
}

#events .annual-cal-item.todo small{
  display:inline-block;
  margin-right:6px;
  color:#64748b;
  font-size:10px;
  font-weight:900;
}

#events .annual-week-cell .annual-cal-item.todo small{
  display:block;
  margin:0 0 2px;
}


/* =========================================================
   Ver 5.00: ToDo time mode height alignment
   終日選択時に時間設定枠だけ高さが縮み、期限欄とズレる問題を修正。
========================================================= */
/* 期限入力と時間設定ブロックの外形高さを揃える */
#todoDrawer .todo-time-mode-block{
  min-height:96px;
  align-self:start;
  box-sizing:border-box;
}

/* 終日/時間指定の2分割ボタンは、入力欄と同じ高さ基準に固定 */
#todoDrawer .todo-time-mode-toggle{
  height:44px;
  min-height:44px;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:1fr 1fr;
}

#todoDrawer .todo-time-mode-toggle button{
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  box-sizing:border-box!important;
}

/* 終日選択中も、開始/終了入力欄分のスペースを確保して左右の行高を維持 */
#todoDrawer .todo-time-inputs{
  height:42px;
  min-height:42px;
  box-sizing:border-box;
}

#todoDrawer .todo-time-inputs[hidden]{
  display:grid!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* 時間指定時は通常表示 */
#todoDrawer .todo-time-inputs:not([hidden]){
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* ラベル/余白も固定して、切り替え時にガタつかせない */
#todoDrawer .todo-time-mode-label{
  min-height:16px;
  line-height:16px;
}

#todoDrawer .todo-time-inputs label{
  min-height:42px;
}


/* =========================================================
   Ver 5.00: ToDo time mode border fix
   todo-time-mode-toggleのheight固定をやめ、borderが欠けないように整理。
========================================================= */
#todoDrawer .todo-time-mode-block{
  min-height:96px;
  align-self:start;
  box-sizing:border-box;
}

#todoDrawer .todo-time-mode-label{
  min-height:16px;
  line-height:16px;
}

/* 外枠はheight固定しない。中のbuttonで高さを作る */
#todoDrawer .todo-time-mode-toggle{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  border:1px solid #dfe5ee!important;
  background:#fff!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

#todoDrawer .todo-time-mode-toggle button{
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 14px!important;
  border:0!important;
  border-right:1px solid #dfe5ee!important;
  background:#fff!important;
  color:#64748b!important;
  box-shadow:none!important;
  border-radius:0!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
}

#todoDrawer .todo-time-mode-toggle button:last-child{
  border-right:0!important;
}

#todoDrawer .todo-time-mode-toggle button.active{
  background:#0f172a!important;
  color:#fff!important;
}

#todoDrawer .todo-time-inputs{
  height:42px;
  min-height:42px;
  box-sizing:border-box;
}

#todoDrawer .todo-time-inputs[hidden]{
  display:grid!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

#todoDrawer .todo-time-inputs:not([hidden]){
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

#todoDrawer .todo-time-inputs label{
  min-height:42px;
}


/* =========================================================
   Ver 5.00: ToDo time mode border-bottom fix
   ボタン自身のborder重なりで外枠の下線が欠けて見えるため、
   外枠をbox-shadowで描画し、内側ボタンは区切り線のみ持たせる。
========================================================= */
#todoDrawer .todo-time-mode-block{
  min-height:96px;
  align-self:start;
  box-sizing:border-box;
}

#todoDrawer .todo-time-mode-label{
  min-height:16px;
  line-height:16px;
}

/* 外枠はborderではなくinset shadow。欠けない */
#todoDrawer .todo-time-mode-toggle{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  height:auto!important;
  min-height:0!important;
  border:0!important;
  background:#fff!important;
  box-shadow:inset 0 0 0 1px #dfe5ee!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}

/* ボタンは外枠を持たない。中央の区切りだけ描く */
#todoDrawer .todo-time-mode-toggle button{
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 14px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  color:#64748b!important;
  box-shadow:none!important;
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
}

#todoDrawer .todo-time-mode-toggle button:first-child{
  box-shadow:inset -1px 0 0 #dfe5ee!important;
}

#todoDrawer .todo-time-mode-toggle button.active{
  background:#0f172a!important;
  color:#fff!important;
}

/* active側が境界線を消さないよう、親の外枠は常に上に見せる */
#todoDrawer .todo-time-mode-toggle::after{
  content:"";
  grid-column:1 / -1;
  grid-row:1;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px #dfe5ee;
  z-index:2;
}

/* 終日選択中も開始/終了欄の高さだけ確保 */
#todoDrawer .todo-time-inputs{
  height:42px;
  min-height:42px;
  box-sizing:border-box;
}

#todoDrawer .todo-time-inputs[hidden]{
  display:grid!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

#todoDrawer .todo-time-inputs:not([hidden]){
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

#todoDrawer .todo-time-inputs label{
  min-height:42px;
}


/* =========================================================
   Ver 5.00: ToDo due/time grid alignment
   期限と時間設定の列幅・高さを同一グリッドで揃える。
========================================================= */
/* ToDo内容の2列グリッドを固定 */
#todoDrawer .todo-drawer-grid{
  display:grid!important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)!important;
  column-gap:24px!important;
  row-gap:18px!important;
  align-items:start!important;
}

/* 期限欄・時間設定欄の列幅を完全に同じにする */
#todoDrawer .todo-drawer-grid > .todo-drawer-field,
#todoDrawer .todo-drawer-grid > .todo-time-mode-block{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

/* 期限入力と時間設定ボタンを同じ44px高さに統一 */
#todoDrawer .todo-drawer-grid input[type="date"],
#todoDrawer .todo-time-mode-toggle{
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  box-sizing:border-box!important;
}

/* 時間設定の外枠を44pxの中に収める */
#todoDrawer .todo-time-mode-toggle{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  align-items:stretch!important;
  border:0!important;
  box-shadow:inset 0 0 0 1px #dfe5ee!important;
  background:#fff!important;
  overflow:hidden!important;
}

/* ボタン2つを同じ高さ・同じ幅にする */
#todoDrawer .todo-time-mode-toggle button{
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-sizing:border-box!important;
}

#todoDrawer .todo-time-mode-toggle button:first-child{
  box-shadow:inset -1px 0 0 #dfe5ee!important;
}

/* 疑似要素のgrid干渉を止める */
#todoDrawer .todo-time-mode-toggle::after{
  display:none!important;
  content:none!important;
}

/* 終日でも下段の時間入力ぶんの高さを保持し、左列と行崩れしないようにする */
#todoDrawer .todo-time-mode-block{
  display:grid!important;
  grid-template-rows:auto 44px 42px!important;
  gap:10px!important;
  min-height:auto!important;
}

#todoDrawer .todo-time-inputs{
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
}

#todoDrawer .todo-time-inputs[hidden]{
  display:grid!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

#todoDrawer .todo-time-inputs:not([hidden]){
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
}

/* ステータス以降が左列の下にきれいに流れるようにする */
#todoDrawer .todo-drawer-grid > .todo-drawer-field.full{
  grid-column:1 / -1!important;
}


/* =========================================================
   Ver 5.00: ToDo pagination alignment
   ToDoページャーを他ページと同じく右寄せへ統一。
========================================================= */
#todo .todo-list-footer{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:center!important;
  gap:16px!important;
  margin-top:22px!important;
  width:100%!important;
}

#todo .todo-list-footer > :first-child{
  justify-self:start!important;
}

#todo .todo-pager,
#todo .todo-pagination,
#todo .pagination{
  justify-self:end!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
}

/* ページャーだけが次の行に落ちて左寄せになるケースの保険 */
#todo .todo-list-footer .todo-pager,
#todo .todo-list-footer .todo-pagination,
#todo .todo-list-footer .pagination{
  grid-column:2!important;
}


/* =========================================================
   Ver 5.00: ToDo list aligned with Bucket list
   ToDo一覧の幅・余白・行高・ページャーをバケットリスト基準へ統一。
========================================================= */
/* タブ下〜一覧までの余白をバケットリスト寄せにする */
#todo .todo-tabs{
  margin-bottom:26px!important;
}

/* 一覧表をバケットリストと同じコンテンツ幅いっぱいにする */
#todo .todo-table{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  box-sizing:border-box!important;
}

/* バケットリストのテーブル密度に合わせる */
#todo .todo-table-head,
#todo .todo-row{
  display:grid!important;
  grid-template-columns:64px minmax(360px, 1.35fr) minmax(260px, .75fr) 180px!important;
  align-items:center!important;
  width:100%!important;
  box-sizing:border-box!important;
}

#todo .todo-table-head{
  min-height:62px!important;
  height:62px!important;
  border-bottom:1px solid #e6e8ec!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.03em!important;
  background:#fff!important;
}

#todo .todo-table-head > *{
  padding:0 22px!important;
  box-sizing:border-box!important;
}

#todo .todo-row{
  min-height:62px!important;
  height:62px!important;
  border-bottom:1px solid #eef1f5!important;
  color:#0f172a!important;
  font-size:14px!important;
  font-weight:500!important;
  background:#fff!important;
}

#todo .todo-row:last-child{
  border-bottom:0!important;
}

#todo .todo-row > *{
  padding:0 22px!important;
  box-sizing:border-box!important;
}

#todo .todo-check-cell,
#todo .todo-check-wrap{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0!important;
}

#todo .todo-check{
  width:16px!important;
  height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  border:1px solid #b9c7d8!important;
  border-radius:50%!important;
  background:#fff!important;
  box-sizing:border-box!important;
}

#todo .todo-title,
#todo .todo-title-cell{
  color:#0f172a!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.45!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#todo .todo-bucket,
#todo .todo-bucket-cell{
  color:#0f172a!important;
  font-size:14px!important;
  font-weight:500!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#todo .todo-due,
#todo .todo-due-cell{
  color:#0f172a!important;
  font-size:14px!important;
  font-weight:500!important;
  white-space:nowrap!important;
}

/* フッターはバケットリスト同様、件数左・ページャー右 */
#todo .todo-list-footer{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:start!important;
  gap:16px!important;
  margin-top:14px!important;
  width:100%!important;
}

#todo .todo-list-footer > :first-child{
  justify-self:start!important;
  color:#64748b!important;
  font-size:13px!important;
  font-weight:700!important;
}

#todo .todo-pager,
#todo .todo-pagination,
#todo .pagination{
  grid-column:2!important;
  justify-self:end!important;
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
}

#todo .todo-pager button,
#todo .todo-pagination button,
#todo .pagination button,
#todo .todo-page-btn{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  padding:0!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#94a3b8!important;
  box-shadow:none!important;
  border-radius:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

#todo .todo-page-current{
  min-width:54px!important;
  height:36px!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:14px!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

/* 完了タスクも位置がずれないよう、文字装飾だけ変更 */
#todo .todo-row.is-done .todo-title,
#todo .todo-row.done .todo-title,
#todo .todo-row.is-done .todo-title-cell,
#todo .todo-row.done .todo-title-cell{
  color:#94a3b8!important;
  text-decoration:none!important;
  font-weight:500!important;
}

@media (max-width: 1000px){
  #todo .todo-table-head,
  #todo .todo-row{
    grid-template-columns:52px minmax(220px, 1fr) minmax(160px, 220px) 140px!important;
  }
}


/* =========================================================
   Ver 5.00: ToDo check button restore
   broad button系CSSの影響でチェックが横長になっていたため、
   ToDo一覧のチェックボタンだけを正円/固定サイズへ戻す。
========================================================= */
#todo .todo-table .todo-check,
#todo .todo-table button.todo-check,
#todo .todo-table .todo-row-check,
#todo .todo-table button.todo-row-check{
  width:16px!important;
  min-width:16px!important;
  max-width:16px!important;
  height:16px!important;
  min-height:16px!important;
  max-height:16px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid #b9c7d8!important;
  border-radius:50%!important;
  background:#fff!important;
  background-color:#fff!important;
  box-shadow:none!important;
  outline:none!important;
  display:inline-block!important;
  flex:0 0 16px!important;
  box-sizing:border-box!important;
  line-height:0!important;
  font-size:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer!important;
}

#todo .todo-table .todo-check.checked,
#todo .todo-table button.todo-check.checked,
#todo .todo-table .todo-row-check.checked,
#todo .todo-table button.todo-row-check.checked,
#todo .todo-table .todo-row.done .todo-check,
#todo .todo-table .todo-row.is-done .todo-check,
#todo .todo-table .todo-row.done .todo-row-check,
#todo .todo-table .todo-row.is-done .todo-row-check{
  background:#c8a15a!important;
  background-color:#c8a15a!important;
  border-color:#c8a15a!important;
}

/* チェックセル側もボタン幅に引っ張られないよう固定 */
#todo .todo-table .todo-check-cell,
#todo .todo-table .todo-check-wrap,
#todo .todo-table .todo-row > :first-child{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:0!important;
  padding:0!important;
}

/* 汎用button指定より優先して、チェックボタンには幅指定を持ち込ませない */
#todo .todo-table button.todo-check::before,
#todo .todo-table button.todo-check::after,
#todo .todo-table button.todo-row-check::before,
#todo .todo-table button.todo-row-check::after{
  content:none!important;
  display:none!important;
}


/* =========================================================
   Ver 5.00: ToDo footer/pagination realignment
   todo-paginationのmargin-left:autoが、フッター全体の幅と干渉して
   ページャーが左寄せに見える問題を修正。
========================================================= */
/* フッター自体をバケットリストと同じ「件数左・ページャー右」の2列に固定 */
#todo .todo-table-foot{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:center!important;
  column-gap:16px!important;
  width:100%!important;
  margin:14px 0 0!important;
  padding:0!important;
  box-sizing:border-box!important;
  background:transparent!important;
}

/* 件数表示 */
#todo .todo-table-foot > :first-child{
  grid-column:1!important;
  justify-self:start!important;
  margin:0!important;
  padding:0!important;
  color:#64748b!important;
  font-size:13px!important;
  font-weight:700!important;
}

/* ページャー。margin-left:autoを消して、gridの右列に置く */
#todo .todo-table-foot .todo-pagination,
#todo .todo-table-foot .todo-pager,
#todo .todo-table-foot .pagination{
  grid-column:2!important;
  justify-self:end!important;
  align-self:center!important;
  width:auto!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  margin-left:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  background:transparent!important;
  box-sizing:border-box!important;
}

/* paginationが親幅いっぱいに広がる指定を無効化 */
#todo .todo-pagination{
  width:auto!important;
  margin-left:0!important;
}

/* ページャーボタン */
#todo .todo-table-foot .todo-pagination button,
#todo .todo-table-foot .todo-pager button,
#todo .todo-table-foot .pagination button{
  width:36px!important;
  min-width:36px!important;
  max-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  max-height:36px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#94a3b8!important;
  box-shadow:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
}

/* 1/1 表示 */
#todo .todo-table-foot .todo-page-current,
#todo .todo-table-foot .page-current,
#todo .todo-table-foot strong{
  min-width:54px!important;
  height:36px!important;
  margin:0!important;
  padding:0 12px!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:14px!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
}

/* 旧footer指定が残っている場合の保険 */
#todo .todo-list-footer{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  align-items:center!important;
  width:100%!important;
  margin:14px 0 0!important;
  padding:0!important;
}

#todo .todo-list-footer .todo-pagination,
#todo .todo-list-footer .todo-pager,
#todo .todo-list-footer .pagination{
  margin:0!important;
  margin-left:0!important;
  justify-self:end!important;
  width:auto!important;
}


/* =========================================================
   Ver 5.00: Annual weekly navigation fix
========================================================= */
#events .annual-calendar-nav button{
  pointer-events:auto!important;
  position:relative!important;
  z-index:5!important;
}


/* =========================================================
   Ver 5.00: Confirm modal visibility/position fix
   phaseDeleteModalが通常時に左下へ露出していたため、
   非表示状態と表示状態を明確に分離。
========================================================= */
#phaseDeleteModal,
.confirm-modal{
  position:fixed!important;
  left:50%!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translate(-50%, -50%)!important;
  width:min(520px, calc(100vw - 48px))!important;
  max-width:min(520px, calc(100vw - 48px))!important;
  min-width:0!important;
  height:auto!important;
  max-height:calc(100vh - 80px)!important;
  padding:32px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  box-shadow:0 24px 60px rgba(15, 23, 42, .18)!important;
  z-index:1600!important;
  box-sizing:border-box!important;
  overflow:auto!important;
}

/* 非表示時はDOMにあっても完全に見えない・触れない */
#phaseDeleteModal[aria-hidden="true"],
.confirm-modal[aria-hidden="true"],
#phaseDeleteModal:not(.active):not(.open),
.confirm-modal:not(.active):not(.open){
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* 表示時だけ中央に出す */
#phaseDeleteModal.active,
#phaseDeleteModal.open,
.confirm-modal.active,
.confirm-modal.open{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

#phaseDeleteModal .confirm-kicker,
.confirm-modal .confirm-kicker{
  margin:0 0 18px!important;
  color:#c8a15a!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.28em!important;
  text-transform:uppercase!important;
}

#phaseDeleteModal h2,
#phaseDeleteModal h3,
.confirm-modal h2,
.confirm-modal h3{
  margin:0 0 16px!important;
  color:#0f172a!important;
  font-size:24px!important;
  font-weight:900!important;
  line-height:1.35!important;
}

#phaseDeleteModal p,
.confirm-modal p{
  margin:0 0 26px!important;
  color:#0f172a!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.7!important;
}

#phaseDeleteModal .confirm-actions,
.confirm-modal .confirm-actions{
  display:flex!important;
  justify-content:flex-end!important;
  gap:12px!important;
  margin-top:24px!important;
}

#phaseDeleteModal button,
.confirm-modal button{
  min-width:112px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 20px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:14px!important;
  font-weight:900!important;
}

#phaseDeleteModal .danger,
#phaseDeleteModal .btn-danger,
.confirm-modal .danger,
.confirm-modal .btn-danger{
  border-color:#ff7045!important;
  background:#ff7045!important;
  color:#fff!important;
}

/* backdropが開いている時だけ表示 */
#modalBackdrop,
.modal-backdrop{
  z-index:1500!important;
}

#modalBackdrop[aria-hidden="true"],
.modal-backdrop[aria-hidden="true"],
#modalBackdrop:not(.active):not(.open),
.modal-backdrop:not(.active):not(.open){
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}


/* =========================================================
   Ver 5.00: Finance plan rebuild
   資金計画ページを、ギャップ分析・月別カテゴリー収支・日々の入力・グラフ中心に再構成。
========================================================= */
#finance{
  --finance-navy:#0f172a;
  --finance-muted:#64748b;
  --finance-soft:#94a3b8;
  --finance-gold:#c8a15a;
  --finance-border:#e6e8ec;
  --finance-line:#eef1f5;
  --finance-bg:#ffffff;
}

#finance .finance-year-control{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:14px;
}

#finance .finance-year-control button{
  width:44px;
  height:36px;
  min-width:44px;
  min-height:36px;
  border:1px solid var(--finance-border);
  background:#fff;
  color:var(--finance-navy);
  box-shadow:none;
  border-radius:0;
  font-size:18px;
  font-weight:900;
}

#finance .finance-year-control strong{
  min-width:72px;
  text-align:center;
  color:var(--finance-navy);
  font-size:20px;
  font-weight:600;
}

#finance .finance-kpi-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid var(--finance-border);
  margin:30px 0;
  background:#fff;
}

#finance .finance-kpi-strip div{
  min-height:74px;
  padding:17px 22px;
  border-right:1px solid var(--finance-border);
  box-sizing:border-box;
}

#finance .finance-kpi-strip div:last-child{border-right:0;}

#finance .finance-kpi-strip span{
  display:block;
  color:var(--finance-muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.04em;
  margin-bottom:8px;
}

#finance .finance-kpi-strip strong{
  display:block;
  color:var(--finance-navy);
  font-size:20px;
  font-weight:900;
  line-height:1.1;
}

#finance .finance-kpi-strip strong.accent,
#finance .accent{
  color:var(--finance-gold)!important;
}

#finance .finance-grid-main,
#finance .finance-grid-lower{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:28px;
  margin-bottom:32px;
}

#finance .finance-section{
  border-top:1px solid var(--finance-border);
  background:transparent;
  padding-top:24px;
}

#finance .finance-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}

#finance .finance-section-head h3{
  position:relative;
  margin:0 0 8px;
  padding-left:16px;
  color:var(--finance-navy);
  font-size:22px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.2;
}

#finance .finance-section-head h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.18em;
  width:2px;
  height:1.1em;
  background:var(--finance-gold);
}

#finance .finance-section-head p{
  margin:0;
  color:var(--finance-muted);
  font-size:12px;
  font-weight:700;
}

#finance .finance-chart-frame{
  height:318px;
  border:1px solid var(--finance-border);
  background:#fff;
  padding:16px;
  box-sizing:border-box;
}

#finance .finance-chart-frame.small{
  height:272px;
}

#finance .finance-chart-frame canvas{
  width:100%;
  height:100%;
}

#finance .finance-insight{
  margin-top:12px;
  padding:13px 16px;
  border:1px solid var(--finance-border);
  color:var(--finance-muted);
  font-size:12px;
  font-weight:700;
  background:#fff;
}

#finance .finance-gap-table{
  border:1px solid var(--finance-border);
  background:#fff;
}

#finance .finance-gap-table div{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:52px;
  border-bottom:1px solid var(--finance-line);
}

#finance .finance-gap-table div:last-child{border-bottom:0;}

#finance .finance-gap-table span,
#finance .finance-gap-table strong{
  display:flex;
  align-items:center;
  padding:0 18px;
  box-sizing:border-box;
  font-size:13px;
}

#finance .finance-gap-table span{
  color:var(--finance-muted);
  font-weight:900;
  border-right:1px solid var(--finance-line);
}

#finance .finance-gap-table strong{
  justify-content:flex-end;
  color:var(--finance-navy);
  font-weight:900;
}

#finance .finance-view-switch{
  display:flex;
  border:1px solid var(--finance-border);
  background:#fff;
}

#finance .finance-view-switch button{
  width:74px;
  height:36px;
  min-height:36px;
  border:0;
  border-right:1px solid var(--finance-border);
  border-radius:0;
  background:#fff;
  color:var(--finance-muted);
  box-shadow:none;
  font-size:12px;
  font-weight:900;
}

#finance .finance-view-switch button:last-child{border-right:0;}
#finance .finance-view-switch button.active{background:var(--finance-navy);color:#fff;}

#finance .finance-matrix-wrap{
  width:100%;
  overflow-x:auto;
  border:1px solid var(--finance-border);
  background:#fff;
}

#finance .finance-matrix-table{
  width:100%;
  min-width:1120px;
  border-collapse:collapse;
}

#finance .finance-matrix-table th,
#finance .finance-matrix-table td{
  height:38px;
  padding:0 10px;
  border-right:1px solid var(--finance-line);
  border-bottom:1px solid var(--finance-line);
  text-align:right;
  color:var(--finance-navy);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}

#finance .finance-matrix-table th:first-child,
#finance .finance-matrix-table td:first-child{
  text-align:left;
}

#finance .finance-matrix-table thead th{
  color:var(--finance-muted);
  font-size:11px;
  font-weight:900;
  background:#fff;
}

#finance .finance-matrix-table tbody th{
  color:var(--finance-navy);
  font-weight:900;
}

#finance .finance-matrix-table .plus{color:#0f172a;}
#finance .finance-matrix-table .minus{color:#c8a15a;}
#finance .finance-matrix-table tr.total th,
#finance .finance-matrix-table tr.total td{
  font-weight:900;
  background:#fbfcfe;
}

#finance .finance-entry-form{
  display:grid;
  grid-template-columns:160px 1fr 140px 160px 1.2fr 136px;
  gap:14px;
  align-items:end;
  border:1px solid var(--finance-border);
  background:#fff;
  padding:16px;
  box-sizing:border-box;
}

#finance .finance-entry-form label{
  display:grid;
  gap:8px;
  color:var(--finance-muted);
  font-size:12px;
  font-weight:900;
}

#finance .finance-entry-form input,
#finance .finance-entry-form select{
  height:42px;
  min-height:42px;
  border:1px solid var(--finance-border);
  border-radius:0;
  padding:0 12px;
  color:var(--finance-navy);
  font-size:13px;
  font-weight:800;
  background:#fff;
  box-sizing:border-box;
}

#finance .finance-entry-form button{
  height:42px;
  min-height:42px;
  border:0;
  border-radius:0;
  background:var(--finance-navy);
  color:#fff;
  box-shadow:none;
  font-size:13px;
  font-weight:900;
}

#finance .finance-history-table-wrap{
  border:1px solid var(--finance-border);
  background:#fff;
}

#finance .finance-history-table{
  width:100%;
  border-collapse:collapse;
}

#finance .finance-history-table th,
#finance .finance-history-table td{
  height:42px;
  padding:0 14px;
  border-bottom:1px solid var(--finance-line);
  color:var(--finance-navy);
  font-size:13px;
  font-weight:800;
  text-align:left;
}

#finance .finance-history-table th{
  color:var(--finance-muted);
  font-size:11px;
  font-weight:900;
}

#finance .finance-history-table .plus{color:#0f172a;}
#finance .finance-history-table .minus{color:#c8a15a;}
#finance .finance-history-table .empty{text-align:center;color:var(--finance-muted);}

#finance .finance-type{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:22px;
  border:1px solid var(--finance-border);
  font-size:11px;
  font-weight:900;
}

#finance .finance-type.income{color:#0f172a;}
#finance .finance-type.expense{color:#c8a15a;}

#finance .finance-delete-btn{
  width:28px;
  min-width:28px;
  height:28px;
  min-height:28px;
  padding:0;
  border:0;
  background:transparent;
  color:#94a3b8;
  box-shadow:none;
  font-size:16px;
  font-weight:900;
}

@media (max-width: 1200px){
  #finance .finance-grid-main,
  #finance .finance-grid-lower{
    grid-template-columns:1fr;
  }
  #finance .finance-kpi-strip{
    grid-template-columns:repeat(2,1fr);
  }
  #finance .finance-entry-form{
    grid-template-columns:1fr 1fr;
  }
  #finance .finance-entry-form .memo,
  #finance .finance-entry-form button{
    grid-column:1 / -1;
  }
}


/* =========================================================
   Ver 5.00: Finance header cleanup
   資金計画ページではグローバルtopbarを非表示にし、
   タイトル重複とJSONボタン表示を解消。
========================================================= */
body:has(#finance.page.active) .topbar{
  display:none!important;
}

/* :has未対応環境の保険。JS側でもfinanceではtopbarを非表示にしている */

/* =========================================================
   Ver 5.00: Finance shared head cleanup
   資金計画の上部ヘッダーも共通 .page-head に統一。
========================================================= */
/* 資金計画の年切替だけは専用パーツとして維持 */
#finance .finance-year-control{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  margin-top:14px!important;
}

#finance .finance-year-control button{
  width:44px!important;
  height:36px!important;
  min-width:44px!important;
  min-height:36px!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  border-radius:0!important;
  font-size:18px!important;
  font-weight:900!important;
}

#finance .finance-year-control strong{
  min-width:72px!important;
  text-align:center!important;
  color:#0f172a!important;
  font-size:20px!important;
  font-weight:600!important;
}


/* =========================================================
   Ver 5.00: Header / page-head canonical cleanup
   各ページ上部ヘッダーは .page-head に統一。
   右側アクションのみページ別クラスで管理。
========================================================= */
.page-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:32px!important;
  width:100%!important;
  margin:0!important;
  padding:34px 0 48px!important;
  border-bottom:1px solid #e6e8ec!important;
  background:transparent!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  writing-mode:horizontal-tb!important;
}

.page-head > div:first-child{
  display:block!important;
  flex:1 1 auto!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  position:static!important;
  transform:none!important;
  writing-mode:horizontal-tb!important;
}

.page-head .eyebrow,
.page-head .life-date,
.page-head .life-eyebrow,
.page-head .annual-year-kicker,
.page-head .bucket-year-kicker,
.page-head .finance-year-kicker{
  display:block!important;
  margin:0 0 8px!important;
  padding:0!important;
  color:#c8a15a!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.36em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
  writing-mode:horizontal-tb!important;
}

.page-head h1,
.page-head h2,
.page-head h3{
  display:block!important;
  margin:0 0 16px!important;
  padding:0!important;
  color:#0f172a!important;
  font-size:36px!important;
  font-weight:900!important;
  letter-spacing:-.04em!important;
  line-height:1!important;
  writing-mode:horizontal-tb!important;
}

.page-head p:not(.eyebrow):not(.life-date):not(.life-eyebrow):not(.annual-year-kicker):not(.bucket-year-kicker):not(.finance-year-kicker),
.page-head p.muted{
  display:block!important;
  margin:0!important;
  padding:0!important;
  color:#64748b!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.7!important;
  writing-mode:horizontal-tb!important;
}

/* 共通ヘッダーの右側アクション */
.page-head > button,
.page-head .primary-btn,
.page-head .ghost-btn,
.page-head .life-page-actions,
.page-head .annual-actions,
.page-head .finance-year-control{
  align-self:flex-start!important;
  flex:0 0 auto!important;
}

/* 通常の右上単体ボタン */
#bucket > .page-head #addBucketBtn,
#todo > .page-head #addTodoBtn{
  width:156px!important;
  min-width:156px!important;
  height:42px!important;
  min-height:42px!important;
  margin:8px 0 0!important;
  padding:0 16px!important;
  border-radius:0!important;
  background:#0f172a!important;
  border:1px solid #0f172a!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  white-space:nowrap!important;
}

/* 年間イベントの右側操作群 */
#events .annual-actions{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  margin-top:0!important;
}

#events .annual-actions .ghost-btn,
#events .annual-actions .primary-btn{
  height:42px!important;
  min-height:42px!important;
  border-radius:0!important;
  box-shadow:none!important;
}

#events .annual-year-label{
  min-width:72px!important;
  text-align:center!important;
  color:#0f172a!important;
  font-size:20px!important;
  font-weight:600!important;
}

/* 資金計画の年切替 */
#finance .finance-year-control{
  display:flex!important;
  align-items:center!important;
  gap:16px!important;
  margin-top:14px!important;
}

#finance .finance-year-control button{
  width:44px!important;
  height:36px!important;
  min-width:44px!important;
  min-height:36px!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  border-radius:0!important;
  font-size:18px!important;
  font-weight:900!important;
}

#finance .finance-year-control strong{
  min-width:72px!important;
  text-align:center!important;
  color:#0f172a!important;
  font-size:20px!important;
  font-weight:600!important;
}

/* ToDoは旧panel-headをページヘッダーに使わない */
#todo .panel-head{
  display:none!important;
}

#todo .todo-panel{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:38px 0 0!important;
  margin:0!important;
}

#bucket .bucket-panel{
  padding-top:38px!important;
}

   JS側で再生成されていた古い個別ヘッダーも廃止し、共通 .page-head に統一。
========================================================= */
/* ToDo内に旧ヘッダーが混入した場合も表示しない */

/* =========================================================
   Ver 5.00: Bucket / ToDo header cleanup
   ToDoのJS生成ヘッダーを削除し、page-headはHTML側1つだけに整理。
========================================================= */


/* =========================================================
   Ver 5.00: page-head selector break fix
   壊れたセレクタ連結により #todo .page-head がページネーション指定を拾っていた問題を修正。
========================================================= */
/* page-head本体はボタン/ページャー指定の対象外として明示 */
#bucket > .page-head,
#todo > .page-head{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  padding:34px 0 48px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  background:transparent!important;
  border:0!important;
  border-bottom:1px solid #e6e8ec!important;
  box-shadow:none!important;
  filter:none!important;
}

/* 追加ボタンだけをボタンサイズにする */
#bucket > .page-head > #addBucketBtn,
#todo > .page-head > #addTodoBtn{
  width:156px!important;
  min-width:156px!important;
  max-width:156px!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
}


/* =========================================================
   Ver 5.00: Finance ledger edit/delete
   収支明細を全件表示にし、編集・削除できるように整理。
========================================================= */
#finance .finance-entry-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
}

#finance .finance-entry-actions button{
  height:42px!important;
  min-height:42px!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:900!important;
}

#finance #financeEntrySubmitBtn{
  background:#0f172a!important;
  border:1px solid #0f172a!important;
  color:#fff!important;
}

#finance #financeEntryCancelBtn{
  background:#fff!important;
  border:1px solid #e6e8ec!important;
  color:#0f172a!important;
}

#finance #financeEntryCancelBtn[hidden]{
  display:none!important;
}

#finance .finance-row-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
}

#finance .finance-row-actions button{
  width:auto!important;
  min-width:52px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0 10px!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1!important;
}

#finance .finance-edit-btn{
  background:#fff!important;
  border:1px solid #dbe3ed!important;
  color:#0f172a!important;
}

#finance .finance-delete-btn{
  background:#fff!important;
  border:1px solid #f1d7c9!important;
  color:#c8a15a!important;
}

#finance .finance-history-table th:last-child,
#finance .finance-history-table td:last-child{
  text-align:right!important;
  width:132px!important;
}


/* =========================================================
   Ver 5.00: Finance entry action layout
   編集時にキャンセルボタンが出てもフォームの高さが変わらないよう、
   追加/更新・キャンセルを横並びの同一行に固定。
========================================================= */
#finance .finance-entry-form{
  grid-template-columns:160px 1fr 140px 160px 1.2fr 220px!important;
}

#finance .finance-entry-actions{
  display:flex!important;
  align-items:flex-end!important;
  gap:8px!important;
  height:42px!important;
  min-height:42px!important;
}

#finance .finance-entry-actions button{
  flex:1 1 0!important;
  width:auto!important;
  min-width:0!important;
  height:42px!important;
  min-height:42px!important;
  max-height:42px!important;
  margin:0!important;
  padding:0 12px!important;
  white-space:nowrap!important;
}

#finance #financeEntryCancelBtn[hidden]{
  display:none!important;
}

@media (max-width: 1200px){
  #finance .finance-entry-form{
    grid-template-columns:1fr 1fr!important;
  }
  #finance .finance-entry-actions{
    grid-column:1 / -1!important;
  }
}


/* =========================================================
   Ver 5.00: Finance ledger sort / pagination
   収支明細のソート、表示件数切替、ページングを追加。
========================================================= */
#finance .finance-history-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:0 0 12px!important;
}

#finance .finance-history-summary{
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
}

#finance .finance-history-controls label{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:900!important;
}

#finance .finance-history-controls select{
  height:34px!important;
  min-height:34px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:12px!important;
  font-weight:800!important;
  padding:0 28px 0 10px!important;
}

#finance .finance-sort-btn{
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:inherit!important;
  box-shadow:none!important;
  font:inherit!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important;
  cursor:pointer!important;
}

#finance .finance-sort-btn.active{
  color:#0f172a!important;
}

#finance .finance-sort-btn span{
  min-width:10px!important;
  color:#c8a15a!important;
  font-size:11px!important;
  font-weight:900!important;
}

#finance .finance-history-pager{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  margin-top:12px!important;
}

#finance .finance-history-pager button,
#finance .finance-history-pager strong{
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:13px!important;
  font-weight:900!important;
}

#finance .finance-history-pager strong{
  width:auto!important;
  min-width:52px!important;
}

#finance .finance-history-pager button:disabled{
  opacity:.35!important;
  cursor:not-allowed!important;
}


/* =========================================================
   Ver 5.00: Finance page-size custom dropdown
   収支明細の表示件数切替をブラウザ標準selectからサイトデザインへ変更。
========================================================= */
#finance .finance-history-controls{
  position:relative!important;
}

#finance .finance-page-size{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:900!important;
}

#finance .finance-page-size-btn{
  position:relative!important;
  width:86px!important;
  min-width:86px!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 30px 0 12px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
  text-align:left!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

#finance .finance-page-size-btn::after{
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:6px;
  height:6px;
  border-right:1.5px solid #64748b;
  border-bottom:1.5px solid #64748b;
  transform:translateY(-65%) rotate(45deg);
}

#finance .finance-page-size-btn[aria-expanded="true"]{
  border-color:#c8a15a!important;
}

#finance .finance-page-size-menu{
  position:absolute!important;
  right:0!important;
  top:calc(100% + 6px)!important;
  width:86px!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  box-shadow:0 18px 40px rgba(15,23,42,.10)!important;
  z-index:50!important;
}

#finance .finance-page-size-menu[hidden]{
  display:none!important;
}

#finance .finance-page-size-menu button{
  width:100%!important;
  min-width:0!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 12px!important;
  border:0!important;
  border-bottom:1px solid #eef1f5!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:800!important;
  text-align:left!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
}

#finance .finance-page-size-menu button:last-child{
  border-bottom:0!important;
}

#finance .finance-page-size-menu button:hover{
  background:#fbf7ef!important;
  color:#0f172a!important;
}


/* =========================================================
   Ver 5.00: Finance year label typography
========================================================= */
#financeYearLabel{
  font-size:20px!important;
  font-weight:600!important;
}


/* =========================================================
   Ver 5.00: Annual year label typography
========================================================= */
#events .annual-year-label{
  font-size:20px!important;
  font-weight:600!important;
}


/* =========================================================
   Ver 5.00: Trader hub CSV import
   CSV読込によるトレード記録・集計表示を追加。
========================================================= */
#trader{
  --trader-navy:#0f172a;
  --trader-muted:#64748b;
  --trader-gold:#c8a15a;
  --trader-border:#e6e8ec;
  --trader-line:#eef1f5;
}

#trader .trader-csv-btn{
  cursor:pointer!important;
  width:156px!important;
  min-width:156px!important;
  height:42px!important;
  min-height:42px!important;
  margin-top:8px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--trader-navy)!important;
  color:#fff!important;
  border:1px solid var(--trader-navy)!important;
  border-radius:0!important;
  font-size:13px!important;
  font-weight:900!important;
}

#trader .trader-kpi-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid var(--trader-border);
  margin:30px 0;
  background:#fff;
}

#trader .trader-kpi-strip div{
  min-height:74px;
  padding:17px 22px;
  border-right:1px solid var(--trader-border);
  box-sizing:border-box;
}

#trader .trader-kpi-strip div:last-child{border-right:0;}

#trader .trader-kpi-strip span{
  display:block;
  color:var(--trader-muted);
  font-size:11px;
  font-weight:900;
  margin-bottom:8px;
}

#trader .trader-kpi-strip strong{
  display:block;
  color:var(--trader-navy);
  font-size:20px;
  font-weight:900;
}

#trader .trader-section{
  border-top:1px solid var(--trader-border);
  padding-top:24px;
  margin-bottom:32px;
}

#trader .trader-section-head{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}

#trader .trader-section-head h3{
  position:relative;
  margin:0 0 8px;
  padding-left:16px;
  color:var(--trader-navy);
  font-size:22px;
  font-weight:900;
  line-height:1.2;
}

#trader .trader-section-head h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.18em;
  width:2px;
  height:1.1em;
  background:var(--trader-gold);
}

#trader .trader-section-head p{
  margin:0;
  color:var(--trader-muted);
  font-size:12px;
  font-weight:700;
}

#trader .trader-import-box{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  border:1px solid var(--trader-border);
  background:#fff;
  padding:16px;
}

#trader .trader-import-box strong{
  display:block;
  color:var(--trader-navy);
  font-size:14px;
  font-weight:900;
  margin-bottom:6px;
}

#trader .trader-import-box p{
  margin:0;
  color:var(--trader-muted);
  font-size:12px;
  font-weight:700;
}

#trader .trader-import-box .ghost-btn{
  width:132px!important;
  height:38px!important;
  min-height:38px!important;
  border:1px solid var(--trader-border)!important;
  border-radius:0!important;
  background:#fff!important;
  color:var(--trader-navy)!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
}

#trader .trader-table-wrap{
  border:1px solid var(--trader-border);
  background:#fff;
  overflow-x:auto;
}

#trader .trader-table{
  width:100%;
  border-collapse:collapse;
  min-width:880px;
}

#trader .trader-table th,
#trader .trader-table td{
  height:42px;
  padding:0 14px;
  border-bottom:1px solid var(--trader-line);
  color:var(--trader-navy);
  font-size:13px;
  font-weight:800;
  text-align:left;
  white-space:nowrap;
}

#trader .trader-table th{
  color:var(--trader-muted);
  font-size:11px;
  font-weight:900;
}

#trader .trader-table .plus{color:#0f172a;}
#trader .trader-table .minus{color:#c8a15a;}
#trader .trader-table .empty{
  text-align:center;
  color:var(--trader-muted);
  height:72px;
}

@media (max-width:1200px){
  #trader .trader-kpi-strip{grid-template-columns:repeat(2,1fr);}
  #trader .trader-import-box{align-items:flex-start;flex-direction:column;}
}


/* =========================================================
   Ver 5.00: Trader header cleanup
   トレーダーハブの共通topbarを非表示にし、CSVボタンの影を削除。
========================================================= */
/* topbarのJSONボタン/重複タイトルが出ないようCSS側でも保険 */
body:has(#trader.page.active) .topbar{
  display:none!important;
}

/* CSV読込ボタンはサイト標準のフラットボタンにする */
#trader .trader-csv-btn,
#trader .page-head .trader-csv-btn,
#trader .page-head .primary-btn.trader-csv-btn{
  box-shadow:none!important;
  filter:none!important;
  text-shadow:none!important;
  border-radius:0!important;
}


/* =========================================================
   Ver 5.00: LINE FX CSV parser
   ExecutionHistory形式の集計行をスキップし、決済行だけをトレード記録として読み込む。
========================================================= */


/* =========================================================
   Ver 5.00: Trader review / trade detail drawer
   1トレードごとのメモ・画像・ルール遵守と振り返り分析を追加。
========================================================= */
#trader .trade-rule-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:24px;
  border:1px solid #e6e8ec;
  background:#fff;
  font-size:13px;
  font-weight:900;
}

#trader .trade-rule-mark.ok{
  border-color:#d9c18c;
  background:#fbf7ef;
}

#trader .trade-rule-mark.ng{
  border-color:#f1d7c9;
  background:#fff7f3;
}

#trader .trade-detail-btn{
  width:64px!important;
  min-width:64px!important;
  height:28px!important;
  min-height:28px!important;
  padding:0 10px!important;
  border:1px solid #dbe3ed!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:11px!important;
  font-weight:900!important;
}

#trader .trade-review-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

#trader .trade-review-card{
  border:1px solid var(--trader-border);
  background:#fff;
  padding:18px;
}

#trader .trade-review-card h4{
  margin:0 0 12px;
  color:var(--trader-navy);
  font-size:15px;
  font-weight:900;
}

#trader .trade-review-row{
  display:grid;
  grid-template-columns:120px 120px 1fr;
  gap:12px;
  align-items:center;
  min-height:36px;
  border-top:1px solid var(--trader-line);
  color:var(--trader-navy);
  font-size:12px;
  font-weight:800;
}

#trader .trade-review-row:first-child{border-top:0;}

#trader .trade-review-row strong{
  justify-self:end;
  font-size:13px;
  font-weight:900;
}

#trader .trade-review-row em{
  color:var(--trader-muted);
  font-size:11px;
  font-style:normal;
  font-weight:800;
}

#trader .trade-review-empty{
  color:var(--trader-muted);
  font-size:12px;
  font-weight:800;
  padding:12px 0;
}

.trade-drawer-backdrop{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.34);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:1300;
  transition:opacity .2s ease, visibility .2s ease;
}

.trade-drawer-backdrop.open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.trade-drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(620px, calc(100vw - 32px));
  height:100vh;
  background:#fff;
  border-left:1px solid #e6e8ec;
  z-index:1310;
  transform:translateX(104%);
  transition:transform .24s ease;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}

.trade-drawer.open{
  transform:translateX(0);
}

.trade-drawer-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:32px;
  border-bottom:1px solid #e6e8ec;
}

.trade-drawer-head h3{
  margin:0;
  color:#0f172a;
  font-size:24px;
  font-weight:900;
}

.trade-drawer-close{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  border:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:20px!important;
  font-weight:900!important;
}

.trade-drawer-body{
  flex:1;
  overflow:auto;
  padding:24px 32px;
}

.trade-detail-summary{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border:1px solid #e6e8ec;
  margin-bottom:24px;
}

.trade-detail-summary div{
  padding:14px;
  border-right:1px solid #e6e8ec;
  border-bottom:1px solid #e6e8ec;
}

.trade-detail-summary div:nth-child(2n){border-right:0;}
.trade-detail-summary div:nth-last-child(-n+2){border-bottom:0;}

.trade-detail-summary span{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  margin-bottom:6px;
}

.trade-detail-summary strong{
  display:block;
  color:#0f172a;
  font-size:13px;
  font-weight:900;
}

.trade-detail-section{
  border-top:1px solid #e6e8ec;
  padding-top:20px;
  margin-top:20px;
}

.trade-detail-section h4{
  margin:0 0 12px;
  color:#0f172a;
  font-size:16px;
  font-weight:900;
}

.trade-rule-toggle{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  border:1px solid #e6e8ec;
}

.trade-rule-toggle button{
  height:42px!important;
  border:0!important;
  border-right:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
}

.trade-rule-toggle button:last-child{border-right:0!important;}
.trade-rule-toggle button.active{
  background:#0f172a!important;
  color:#fff!important;
}

#tradeDetailMemo{
  width:100%;
  min-height:160px;
  resize:vertical;
  border:1px solid #e6e8ec;
  padding:14px;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
  box-sizing:border-box;
}

.trade-memo-count{
  margin-top:6px;
  text-align:right;
  color:#64748b;
  font-size:11px;
  font-weight:800;
}

.trade-image-upload{
  width:100%;
  height:42px;
  border:1px dashed #cbd5e1;
  background:#fff;
  color:#64748b;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  box-sizing:border-box;
}

.trade-image-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:12px;
}

.trade-image-item{
  border:1px solid #e6e8ec;
  background:#fff;
}

.trade-image-item img{
  display:block;
  width:100%;
  height:150px;
  object-fit:cover;
  border-bottom:1px solid #e6e8ec;
}

.trade-image-item button{
  width:100%!important;
  height:34px!important;
  min-height:34px!important;
  border:0!important;
  background:#fff!important;
  color:#c8a15a!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
}

.trade-image-empty{
  margin:0;
  color:#64748b;
  font-size:12px;
  font-weight:800;
}

.trade-drawer-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:18px 32px;
  border-top:1px solid #e6e8ec;
}

.trade-drawer-actions button{
  width:120px!important;
  height:42px!important;
  min-height:42px!important;
  border-radius:0!important;
  box-shadow:none!important;
}

@media (max-width:1200px){
  #trader .trade-review-grid{grid-template-columns:1fr;}
}


/* =========================================================
   Ver 5.00: Trade drawer button / rule icon design
   ルール遵守アイコンと詳細画面フッターボタンをサイトデザインへ統一。
========================================================= */
.trade-rule-toggle button{
  gap:6px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.trade-rule-toggle .trade-rule-icon{
  color:#0f172a!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1!important;
}

.trade-rule-toggle button.active .trade-rule-icon{
  color:#fff!important;
}

#trader .trade-rule-mark{
  color:#0f172a!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1!important;
}

.trade-drawer-actions{
  display:flex!important;
  justify-content:flex-start!important;
  gap:12px!important;
  padding:22px 32px!important;
  border-top:1px solid #e6e8ec!important;
  background:#fff!important;
}

.trade-drawer-actions button{
  width:132px!important;
  min-width:132px!important;
  height:44px!important;
  min-height:44px!important;
  max-height:44px!important;
  padding:0 18px!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:none!important;
  font-size:14px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.trade-drawer-actions .ghost-btn{
  background:#fff!important;
  border:1px solid #e6e8ec!important;
  color:#0f172a!important;
}

.trade-drawer-actions .primary-btn{
  background:#0f172a!important;
  border:1px solid #0f172a!important;
  color:#fff!important;
}

.trade-drawer-actions .ghost-btn:hover,
.trade-drawer-actions .primary-btn:hover{
  box-shadow:none!important;
  filter:none!important;
}


/* =========================================================
   Ver 5.00: Trader hub sub pages / profit charts
   トレーダーハブを下層タブ化し、日別・週別・月別グラフを追加。
========================================================= */
#trader .trader-subnav{
  display:flex;
  align-items:center;
  gap:0;
  margin:30px 0 26px;
  border-top:1px solid #e6e8ec;
  border-bottom:1px solid #e6e8ec;
  background:#fff;
}

#trader .trader-subnav button{
  width:auto!important;
  min-width:132px!important;
  height:54px!important;
  min-height:54px!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  color:#64748b!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
  position:relative;
}

#trader .trader-subnav button::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:2px;
  background:transparent;
}

#trader .trader-subnav button.active{
  color:#0f172a!important;
}

#trader .trader-subnav button.active::after{
  background:#c8a15a;
}

#trader .trader-tab-panel{
  display:none;
}

#trader .trader-tab-panel.active{
  display:block;
}

#trader .trade-analysis-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

#trader .trade-chart-card{
  border:1px solid #e6e8ec;
  background:#fff;
  padding:18px;
}

#trader .trade-chart-card.large{
  padding:20px;
}

#trader .trade-chart-card h4{
  margin:0 0 12px;
  color:#0f172a;
  font-size:15px;
  font-weight:900;
}

#trader .trade-chart{
  min-height:260px;
}

#trader .trade-chart-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}

#trader .trade-chart-top span{
  color:#64748b;
  font-size:12px;
  font-weight:900;
}

#trader .trade-chart-top strong{
  color:#0f172a;
  font-size:16px;
  font-weight:900;
}

#trader .trade-chart svg{
  display:block;
  width:100%;
  height:240px;
}

#trader .trade-chart .zero-line{
  stroke:#e6e8ec;
  stroke-width:1;
}

#trader .trade-chart .chart-area{
  fill:rgba(200,161,90,.10);
}

#trader .trade-chart .chart-line{
  fill:none;
  stroke:#0f172a;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#trader .trade-chart circle{
  fill:#0f172a;
  stroke:#fff;
  stroke-width:2;
}

#trader .trade-chart circle.negative{
  fill:#c8a15a;
}

#trader .trade-chart text{
  fill:#64748b;
  font-size:11px;
  font-weight:800;
}

#trader .trade-chart-empty{
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#64748b;
  font-size:12px;
  font-weight:800;
}

#trader .trade-metric-switch{
  display:flex;
  align-items:center;
  border:1px solid #e6e8ec;
}

#trader .trade-metric-switch button{
  width:92px!important;
  height:38px!important;
  min-height:38px!important;
  border:0!important;
  border-right:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#64748b!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
}

#trader .trade-metric-switch button:last-child{
  border-right:0!important;
}

#trader .trade-metric-switch button.active{
  background:#0f172a!important;
  color:#fff!important;
}

#trader .trade-insight-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  border:1px solid #e6e8ec;
  background:#fff;
}

#trader .trade-insight-grid > div,
#trader .trade-placeholder{
  padding:18px;
  border-right:1px solid #e6e8ec;
}

#trader .trade-insight-grid > div:last-child{
  border-right:0;
}

#trader .trade-insight-grid span{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  margin-bottom:8px;
}

#trader .trade-insight-grid strong{
  display:block;
  color:#0f172a;
  font-size:18px;
  font-weight:900;
  margin-bottom:6px;
}

#trader .trade-insight-grid p,
#trader .trade-placeholder p{
  margin:0;
  color:#64748b;
  font-size:12px;
  font-weight:800;
}

#trader .trade-placeholder{
  border:1px solid #e6e8ec;
  background:#fff;
}

#trader .trade-placeholder strong{
  display:block;
  margin-bottom:8px;
  color:#0f172a;
  font-size:14px;
  font-weight:900;
}

#trader .trade-calendar-head{
  margin-bottom:12px;
  color:#0f172a;
  font-size:18px;
  font-weight:900;
}

#trader .trade-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border-top:1px solid #e6e8ec;
  border-left:1px solid #e6e8ec;
}

#trader .trade-calendar-day{
  min-height:92px;
  padding:12px;
  border-right:1px solid #e6e8ec;
  border-bottom:1px solid #e6e8ec;
  background:#fff;
  box-sizing:border-box;
}

#trader .trade-calendar-day.win{
  background:#fbf7ef;
}

#trader .trade-calendar-day.loss{
  background:#fff;
}

#trader .trade-calendar-day span{
  display:block;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  margin-bottom:8px;
}

#trader .trade-calendar-day strong{
  display:block;
  color:#0f172a;
  font-size:13px;
  font-weight:900;
}

#trader .trade-calendar-day.loss strong{
  color:#c8a15a;
}

#trader .trade-calendar-day em{
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:11px;
  font-style:normal;
  font-weight:800;
}

#trader .trade-review-grid.rule-only{
  grid-template-columns:1fr 1fr;
}

@media (max-width:1200px){
  #trader .trader-subnav{overflow-x:auto;}
  #trader .trade-insight-grid{grid-template-columns:1fr 1fr;}
  #trader .trade-calendar-grid{grid-template-columns:1fr 1fr;}
}


/* =========================================================
   Ver 5.00: Trader chart redesign
   グラフをサイトデザインに寄せ、縦軸に金額/pipsラベルを追加。
========================================================= */
#trader .trade-analysis-grid{gap:22px!important;}

#trader .trade-chart-card{
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  padding:22px!important;
  box-shadow:none!important;
}

#trader .trade-chart-card.large{padding:24px!important;}

#trader .trade-chart{min-height:360px!important;}

#trader .trade-chart-top{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:24px!important;
  margin-bottom:14px!important;
  padding-bottom:14px!important;
  border-bottom:1px solid #eef1f5!important;
}

#trader .trade-chart-top div{display:block!important;}

#trader .trade-chart-top span{
  display:block!important;
  color:#0f172a!important;
  font-size:15px!important;
  font-weight:900!important;
  line-height:1.2!important;
}

#trader .trade-chart-top em{
  display:block!important;
  margin-top:5px!important;
  color:#64748b!important;
  font-size:11px!important;
  font-style:normal!important;
  font-weight:800!important;
}

#trader .trade-chart-top strong{
  color:#0f172a!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1!important;
}

#trader .trade-chart-top strong.minus{color:#c8a15a!important;}

#trader .trade-chart svg{
  display:block!important;
  width:100%!important;
  height:300px!important;
  overflow:visible!important;
}

#trader .trade-chart .chart-plot-bg{fill:#fff!important;}

#trader .trade-chart .grid-line{
  stroke:#eef1f5!important;
  stroke-width:1!important;
}

#trader .trade-chart .zero-line{
  stroke:#c8a15a!important;
  stroke-width:1.2!important;
  stroke-dasharray:4 6!important;
}

#trader .trade-chart .chart-area{fill:rgba(15,23,42,.045)!important;}
#trader .trade-chart .chart-area.negative{fill:rgba(200,161,90,.10)!important;}

#trader .trade-chart .chart-line{
  fill:none!important;
  stroke:#0f172a!important;
  stroke-width:2.4!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

#trader .trade-chart circle{
  fill:#0f172a!important;
  stroke:#fff!important;
  stroke-width:2!important;
}

#trader .trade-chart circle.negative{fill:#c8a15a!important;}

#trader .trade-chart .x-label,
#trader .trade-chart .y-label{
  fill:#64748b!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:0!important;
}

#trader .trade-chart .y-label{fill:#94a3b8!important;}

#trader .trade-chart-stats{
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  margin-top:10px!important;
  padding-top:12px!important;
  border-top:1px solid #eef1f5!important;
}

#trader .trade-chart-stats span{
  color:#64748b!important;
  font-size:11px!important;
  font-weight:800!important;
}

#trader .trade-chart-empty{
  height:300px!important;
  border:1px dashed #dbe3ed!important;
  background:#fff!important;
  color:#64748b!important;
}


/* =========================================================
   Ver 5.00: Trade calendar redesign
   年間アクションカレンダーと同じ構成で、日別トレード結果を表示。
========================================================= */
#trader .trade-calendar-head{
  margin-bottom:20px!important;
}

#trader .trade-calendar-tools{
  display:flex!important;
  align-items:center!important;
  gap:28px!important;
  flex-wrap:wrap!important;
}

#trader .trade-view-switch{
  display:flex!important;
  align-items:center!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
}

#trader .trade-view-switch button{
  width:84px!important;
  height:38px!important;
  min-height:38px!important;
  border:0!important;
  border-right:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#64748b!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
}

#trader .trade-view-switch button:last-child{border-right:0!important;}
#trader .trade-view-switch button.active{background:#0f172a!important;color:#fff!important;}

#trader .trade-calendar-legend{
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
}

#trader .trade-calendar-legend span{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
}

#trader .trade-calendar-legend i{
  width:10px!important;
  height:10px!important;
  border-radius:50%!important;
  display:inline-block!important;
  border:1px solid #cbd5e1!important;
}

#trader .trade-legend-profit{background:#0f172a!important;border-color:#0f172a!important;}
#trader .trade-legend-loss{background:#c8a15a!important;border-color:#c8a15a!important;}
#trader .trade-legend-flat{background:#fff!important;}

#trader .trade-calendar-nav{
  display:flex!important;
  align-items:center!important;
  gap:18px!important;
  margin:18px 0!important;
}

#trader .trade-calendar-nav strong{
  min-width:190px!important;
  color:#0f172a!important;
  font-size:20px!important;
  font-weight:600!important;
}

#trader .trade-calendar-nav button{
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#0f172a!important;
  box-shadow:none!important;
  border-radius:0!important;
  font-size:28px!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

#trader .trade-cal-grid{
  display:grid!important;
  grid-template-columns:repeat(7, 1fr)!important;
  border-top:1px solid #e6e8ec!important;
  border-left:1px solid #e6e8ec!important;
  background:#fff!important;
}

#trader .trade-cal-week{
  height:38px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-right:1px solid #e6e8ec!important;
  border-bottom:1px solid #e6e8ec!important;
  color:#0f172a!important;
  font-size:12px!important;
  font-weight:900!important;
}

#trader .trade-cal-day{
  min-height:126px!important;
  border-right:1px solid #e6e8ec!important;
  border-bottom:1px solid #e6e8ec!important;
  padding:10px!important;
  box-sizing:border-box!important;
  background:#fff!important;
}

#trader .trade-cal-day.muted{
  background:#fbfcfe!important;
}

#trader .trade-cal-day.muted .trade-cal-day-num{
  color:#cbd5e1!important;
}

#trader .trade-cal-day.today .trade-cal-day-num{
  color:#c8a15a!important;
}

#trader .trade-cal-day-num{
  color:#0f172a!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  margin-bottom:10px!important;
}

#trader .trade-cal-result{
  display:grid!important;
  gap:5px!important;
  padding:9px!important;
  border-left:2px solid #cbd5e1!important;
  background:#fff!important;
}

#trader .trade-cal-result.win{
  border-left-color:#0f172a!important;
  background:#fbfcfe!important;
}

#trader .trade-cal-result.loss{
  border-left-color:#c8a15a!important;
  background:#fbf7ef!important;
}

#trader .trade-cal-result strong{
  color:#0f172a!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1.2!important;
}

#trader .trade-cal-result.loss strong{
  color:#c8a15a!important;
}

#trader .trade-cal-result span,
#trader .trade-cal-result em{
  color:#64748b!important;
  font-size:11px!important;
  font-style:normal!important;
  font-weight:800!important;
  line-height:1.25!important;
}

#trader .trade-cal-list{
  border-top:1px solid #e6e8ec!important;
  background:#fff!important;
}

#trader .trade-cal-list-row{
  display:grid!important;
  grid-template-columns:84px 1fr!important;
  border-left:1px solid #e6e8ec!important;
  border-right:1px solid #e6e8ec!important;
  border-bottom:1px solid #e6e8ec!important;
}

#trader .trade-cal-list-date{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:72px!important;
  border-right:1px solid #e6e8ec!important;
}

#trader .trade-cal-list-date strong{
  color:#0f172a!important;
  font-size:22px!important;
  font-weight:900!important;
}

#trader .trade-cal-list-date span{
  color:#64748b!important;
  font-size:12px!important;
  font-weight:900!important;
}

#trader .trade-cal-list-result{
  padding:12px!important;
}

#trader .trade-cal-empty{
  margin:0!important;
  padding:24px!important;
  border:1px solid #e6e8ec!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
  background:#fff!important;
}

#trader .trade-week-grid{
  display:grid!important;
  grid-template-columns:72px repeat(7, 1fr)!important;
  border-top:1px solid #e6e8ec!important;
  border-left:1px solid #e6e8ec!important;
  background:#fff!important;
  overflow-x:auto!important;
}

#trader .trade-week-time-head,
#trader .trade-week-day-head,
#trader .trade-week-hour,
#trader .trade-week-cell{
  border-right:1px solid #e6e8ec!important;
  border-bottom:1px solid #e6e8ec!important;
  box-sizing:border-box!important;
}

#trader .trade-week-time-head,
#trader .trade-week-day-head{
  height:52px!important;
  background:#fff!important;
}

#trader .trade-week-day-head{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  color:#0f172a!important;
}

#trader .trade-week-day-head.today strong{
  color:#c8a15a!important;
}

#trader .trade-week-day-head strong{
  font-size:18px!important;
  font-weight:900!important;
  line-height:1!important;
}

#trader .trade-week-day-head span{
  margin-top:4px!important;
  color:#64748b!important;
  font-size:11px!important;
  font-weight:900!important;
}

#trader .trade-week-hour{
  height:72px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  padding-top:10px!important;
  color:#94a3b8!important;
  font-size:11px!important;
  font-weight:800!important;
  background:#fbfcfe!important;
}

#trader .trade-week-cell{
  min-height:72px!important;
  padding:8px!important;
  background:#fff!important;
}


/* =========================================================
   Ver 5.00: Trade calendar hourly weekly view
   週次表示を1時間単位の損益・pips集計に変更。
========================================================= */
#trader .trade-week-cell{
  min-height:72px!important;
  padding:6px!important;
  background:#fff!important;
}

#trader .trade-hour-result{
  display:grid!important;
  gap:3px!important;
  padding:7px 8px!important;
  border-left:2px solid #cbd5e1!important;
  background:#fff!important;
}

#trader .trade-hour-result.win{
  border-left-color:#0f172a!important;
  background:#fbfcfe!important;
}

#trader .trade-hour-result.loss{
  border-left-color:#c8a15a!important;
  background:#fbf7ef!important;
}

#trader .trade-hour-result strong{
  color:#0f172a!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.2!important;
}

#trader .trade-hour-result.loss strong{
  color:#c8a15a!important;
}

#trader .trade-hour-result span{
  color:#64748b!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1.25!important;
}


/* =========================================================
   Ver 5.00: Trade CSV time persistence fix
   約定日時を保存し、時刻がない既存データを00:00に集計しない。
========================================================= */
#trader .trade-week-notice{
  margin:0 0 12px!important;
  padding:12px 14px!important;
  border:1px solid #e6e8ec!important;
  border-left:2px solid #c8a15a!important;
  background:#fbf7ef!important;
  color:#0f172a!important;
  font-size:12px!important;
  font-weight:800!important;
}


/* =========================================================
   Ver 5.00: Trade records paging / sorting
   トレード記録の表示件数・ページング・各カラムソートを追加。
========================================================= */
#trader .trade-record-tools{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:0 0 12px!important;
}

#trader .trade-record-count{
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
}

#trader .trade-record-size{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:900!important;
}

#trader .trade-record-size select{
  height:34px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:12px!important;
  font-weight:900!important;
  padding:0 28px 0 10px!important;
  box-shadow:none!important;
}

#trader .trader-table th button{
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:0 14px 0 0!important;
  border:0!important;
  background:transparent!important;
  color:#64748b!important;
  box-shadow:none!important;
  border-radius:0!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1!important;
  position:relative!important;
  cursor:pointer!important;
}

#trader .trader-table th button::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  color:#c8a15a;
  font-size:9px;
}

#trader .trader-table th button.active[data-sort-dir="asc"]::after{content:"▲";}
#trader .trader-table th button.active[data-sort-dir="desc"]::after{content:"▼";}

#trader .trade-record-pager{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:12px!important;
  margin-top:14px!important;
}

#trader .trade-record-pager button{
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:20px!important;
  font-weight:900!important;
  line-height:1!important;
}

#trader .trade-record-pager button:disabled{
  color:#cbd5e1!important;
  background:#fbfcfe!important;
  cursor:not-allowed!important;
}

#trader .trade-record-pager span{
  min-width:56px!important;
  text-align:center!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:900!important;
}

/* ルールの○×は囲まず、テキストアイコンのみ表示 */
#trader .trade-rule-mark{
  border:0!important;
  background:transparent!important;
  min-width:auto!important;
  height:auto!important;
  padding:0!important;
  display:inline!important;
  color:#0f172a!important;
  font-size:18px!important;
  font-weight:900!important;
  line-height:1!important;
}

#trader .trade-rule-mark.ok,
#trader .trade-rule-mark.ng{
  border:0!important;
  background:transparent!important;
}


/* =========================================================
   Ver 5.00: Trade record sort indicators
   全ソート対象カラムにソート可能表示を追加。
========================================================= */
#trader .trader-table th button[data-trade-sort]{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:#64748b!important;
  box-shadow:none!important;
  border-radius:0!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1!important;
  cursor:pointer!important;
}

#trader .trader-table th button[data-trade-sort]::after{
  content:"↕"!important;
  position:static!important;
  transform:none!important;
  color:#cbd5e1!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1!important;
}

#trader .trader-table th button[data-trade-sort].active{
  color:#0f172a!important;
}

#trader .trader-table th button[data-trade-sort].active[data-sort-dir="asc"]::after{
  content:"▲"!important;
  color:#c8a15a!important;
}

#trader .trader-table th button[data-trade-sort].active[data-sort-dir="desc"]::after{
  content:"▼"!important;
  color:#c8a15a!important;
}


/* =========================================================
   Ver 5.00: Trade record conditional search
   ソートとは別に、日付・通貨ペア・方向・ルール・結果で絞り込み。
========================================================= */
#trader .trade-filter-panel{
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  padding:16px!important;
  margin:0 0 16px!important;
}

#trader .trade-filter-grid{
  display:grid!important;
  grid-template-columns:2fr repeat(6, 1fr)!important;
  gap:12px!important;
}

#trader .trade-filter-grid label{
  display:grid!important;
  gap:7px!important;
  min-width:0!important;
}

#trader .trade-filter-grid span{
  color:#64748b!important;
  font-size:11px!important;
  font-weight:900!important;
}

#trader .trade-filter-grid input,
#trader .trade-filter-grid select{
  width:100%!important;
  height:38px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  padding:0 10px!important;
  font-size:12px!important;
  font-weight:800!important;
  box-sizing:border-box!important;
}

#trader .trade-filter-actions{
  display:flex!important;
  justify-content:flex-end!important;
  margin-top:12px!important;
}

#trader .trade-filter-actions .ghost-btn{
  width:112px!important;
  height:36px!important;
  min-height:36px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
}

@media (max-width:1200px){
  #trader .trade-filter-grid{
    grid-template-columns:1fr 1fr!important;
  }
}


/* =========================================================
   Ver 5.00: Trade date picker icons
   開始日・終了日にカレンダーアイコンを追加し、クリックで日付選択を開く。
========================================================= */
#trader .trade-date-field{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
}

#trader .trade-date-field input{
  padding-right:42px!important;
}

#trader .trade-date-icon{
  position:absolute!important;
  right:1px!important;
  top:1px!important;
  width:36px!important;
  min-width:36px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0!important;
  border:0!important;
  border-left:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:0!important;
  cursor:pointer!important;
}

#trader .trade-date-icon::before{
  content:"";
  position:absolute;
  left:10px;
  top:9px;
  width:16px;
  height:15px;
  border:1.5px solid #0f172a;
  box-sizing:border-box;
}

#trader .trade-date-icon::after{
  content:"";
  position:absolute;
  left:10px;
  top:13px;
  width:16px;
  height:1.5px;
  background:#0f172a;
  box-shadow:4px -5px 0 -3px #0f172a, 11px -5px 0 -3px #0f172a;
}

#trader .trade-date-icon:hover{
  background:#fbfcfe!important;
}


/* =========================================================
   Ver 5.00: Custom trade date picker
   ブラウザ標準カレンダーを使わず、サイトデザインの独自カレンダーへ変更。
========================================================= */
#trader .trade-date-input{
  cursor:pointer!important;
  caret-color:transparent!important;
}

.trade-date-popover{
  position:absolute;
  z-index:2200;
  width:286px;
  border:1px solid #e6e8ec;
  background:#fff;
  box-shadow:0 18px 40px rgba(15,23,42,.12);
  padding:14px;
  box-sizing:border-box;
}

.trade-date-pop-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #eef1f5;
  padding-bottom:12px;
  margin-bottom:12px;
}

.trade-date-pop-head strong{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
}

.trade-date-pop-head button{
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  min-height:28px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:22px!important;
  font-weight:900!important;
  line-height:1!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.trade-date-pop-head button:hover{
  background:#fbfcfe!important;
}

.trade-date-pop-week,
.trade-date-pop-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
}

.trade-date-pop-week span{
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#64748b;
  font-size:11px;
  font-weight:900;
}

.trade-date-pop-week span:first-child{
  color:#c8a15a;
}

.trade-date-pop-week span:last-child{
  color:#0f172a;
}

.trade-date-pop-grid button{
  width:100%!important;
  min-width:0!important;
  height:34px!important;
  min-height:34px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:800!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.trade-date-pop-grid button.muted{
  color:#cbd5e1!important;
}

.trade-date-pop-grid button.today{
  color:#c8a15a!important;
  font-weight:900!important;
}

.trade-date-pop-grid button.active{
  background:#0f172a!important;
  color:#fff!important;
  font-weight:900!important;
}

.trade-date-pop-grid button:hover{
  background:#fbf7ef!important;
  color:#0f172a!important;
}

.trade-date-pop-grid button.active:hover{
  background:#0f172a!important;
  color:#fff!important;
}

.trade-date-pop-actions{
  display:flex;
  justify-content:space-between;
  border-top:1px solid #eef1f5;
  margin-top:12px;
  padding-top:12px;
}

.trade-date-pop-actions button{
  width:auto!important;
  min-width:54px!important;
  height:30px!important;
  min-height:30px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  color:#64748b!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
}

.trade-date-pop-actions button:last-child{
  color:#c8a15a!important;
}


/* =========================================================
   Ver 5.00: Custom trade filter selects
   通貨ペア・方向・ルール・結果をサイトデザインの独自ドロップダウンに統一。
========================================================= */
#trader .trade-custom-select{
  position:relative!important;
  width:100%!important;
  height:38px!important;
}

#trader .trade-custom-select-btn{
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 34px 0 10px!important;
  border:1px solid #e6e8ec!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:left!important;
  position:relative!important;
}

#trader .trade-custom-select-btn i{
  position:absolute!important;
  right:12px!important;
  top:50%!important;
  width:7px!important;
  height:7px!important;
  border-right:1.5px solid #0f172a!important;
  border-bottom:1.5px solid #0f172a!important;
  transform:translateY(-65%) rotate(45deg)!important;
}

#trader .trade-custom-select.open .trade-custom-select-btn{
  border-color:#c8a15a!important;
}

#trader .trade-custom-select.open .trade-custom-select-btn i{
  transform:translateY(-25%) rotate(225deg)!important;
}

#trader .trade-custom-select-menu{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:42px!important;
  z-index:1200!important;
  display:none!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  box-shadow:0 18px 34px rgba(15,23,42,.12)!important;
  padding:6px!important;
  max-height:240px!important;
  overflow:auto!important;
}

#trader .trade-custom-select.open .trade-custom-select-menu{
  display:grid!important;
  gap:2px!important;
}

#trader .trade-custom-select-menu button{
  width:100%!important;
  min-width:0!important;
  height:34px!important;
  min-height:34px!important;
  padding:0 10px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1!important;
  text-align:left!important;
}

#trader .trade-custom-select-menu button:hover{
  background:#fbf7ef!important;
}

#trader .trade-custom-select-menu button.active{
  background:#0f172a!important;
  color:#fff!important;
  font-weight:900!important;
}

/* 記録クリア・条件クリアの文字位置を中央に揃える */
#trader #clearTradesBtn,
#trader #tradeFilterResetBtn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:1!important;
  padding-top:0!important;
  padding-bottom:0!important;
}


/* =========================================================
   Ver 5.00: Settings redesign / SQL-ready system settings
   設定ページを下層タブ化し、SQL移行を前提にした保存方式を追加。
========================================================= */
#settings{
  --settings-navy:#0f172a;
  --settings-muted:#64748b;
  --settings-gold:#c8a15a;
  --settings-border:#e6e8ec;
  --settings-line:#eef1f5;
}

#settings .settings-page-head .primary-btn{
  width:132px!important;
  height:42px!important;
  min-height:42px!important;
  border-radius:0!important;
  background:var(--settings-navy)!important;
  border:1px solid var(--settings-navy)!important;
  color:#fff!important;
  box-shadow:none!important;
  font-size:13px!important;
  font-weight:900!important;
}

#settings .settings-subnav{
  display:flex;
  align-items:center;
  gap:0;
  margin:30px 0 26px;
  border-top:1px solid var(--settings-border);
  border-bottom:1px solid var(--settings-border);
  background:#fff;
  overflow-x:auto;
}

#settings .settings-subnav button{
  width:auto!important;
  min-width:118px!important;
  height:54px!important;
  min-height:54px!important;
  padding:0 20px!important;
  border:0!important;
  border-radius:0!important;
  background:#fff!important;
  color:var(--settings-muted)!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
  position:relative!important;
}

#settings .settings-subnav button::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:0;
  height:2px;
  background:transparent;
}

#settings .settings-subnav button.active{
  color:var(--settings-navy)!important;
}

#settings .settings-subnav button.active::after{
  background:var(--settings-gold);
}

#settings .settings-tab-panel{
  display:none;
}

#settings .settings-tab-panel.active{
  display:block;
}

#settings .settings-card{
  border-top:1px solid var(--settings-border);
  padding-top:24px;
  margin-bottom:34px;
}

#settings .settings-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}

#settings .settings-section-head h3{
  position:relative;
  margin:0 0 8px;
  padding-left:16px;
  color:var(--settings-navy);
  font-size:22px;
  font-weight:900;
  line-height:1.2;
}

#settings .settings-section-head h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.18em;
  width:2px;
  height:1.1em;
  background:var(--settings-gold);
}

#settings .settings-section-head p{
  margin:0;
  color:var(--settings-muted);
  font-size:12px;
  font-weight:700;
}

#settings .settings-form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

#settings .settings-form-grid label{
  display:grid;
  gap:8px;
  color:var(--settings-muted);
  font-size:11px;
  font-weight:900;
}

#settings .settings-form-grid label span{
  color:var(--settings-muted);
  font-size:11px;
  font-weight:900;
}

#settings .settings-form-grid input,
#settings .settings-form-grid select{
  width:100%;
  height:42px;
  border:1px solid var(--settings-border);
  border-radius:0;
  background:#fff;
  color:var(--settings-navy);
  padding:0 12px;
  box-shadow:none;
  box-sizing:border-box;
  font-size:13px;
  font-weight:800;
}

#settings .settings-system-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
  margin-bottom:18px;
}

#settings .settings-mode-card{
  border:1px solid var(--settings-border);
  background:#fff;
  padding:18px;
}

#settings .settings-mode-card.active{
  border-left:2px solid var(--settings-gold);
}

#settings .settings-mode-card span{
  display:block;
  color:var(--settings-gold);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  margin-bottom:8px;
}

#settings .settings-mode-card strong{
  display:block;
  color:var(--settings-navy);
  font-size:18px;
  font-weight:900;
  margin-bottom:8px;
}

#settings .settings-mode-card p{
  margin:0;
  color:var(--settings-muted);
  font-size:12px;
  font-weight:700;
  line-height:1.7;
}

#settings .settings-data-actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:18px;
}

#settings .settings-data-actions .primary-btn,
#settings .settings-data-actions .ghost-btn{
  width:156px!important;
  min-width:156px!important;
  height:42px!important;
  min-height:42px!important;
  border-radius:0!important;
  box-shadow:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:12px!important;
  font-weight:900!important;
}

#settings .settings-data-actions .primary-btn{
  background:var(--settings-navy)!important;
  border:1px solid var(--settings-navy)!important;
  color:#fff!important;
}

#settings .settings-data-actions .ghost-btn{
  background:#fff!important;
  border:1px solid var(--settings-border)!important;
  color:var(--settings-navy)!important;
}

#settings .settings-danger-zone{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  border:1px solid var(--settings-border);
  background:#fff;
  padding:16px;
}

#settings .settings-danger-zone strong{
  display:block;
  color:var(--settings-navy);
  font-size:14px;
  font-weight:900;
  margin-bottom:6px;
}

#settings .settings-danger-zone p{
  margin:0;
  color:var(--settings-muted);
  font-size:12px;
  font-weight:700;
}

#settings .settings-danger-zone .danger{
  width:140px!important;
  height:38px!important;
  min-height:38px!important;
  border:1px solid var(--settings-border)!important;
  border-radius:0!important;
  background:#fff!important;
  color:var(--settings-gold)!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}

@media (max-width:1200px){
  #settings .settings-form-grid,
  #settings .settings-system-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   Ver 5.00: Settings header cleanup
   設定ページの共通topbarを非表示にし、JSONボタンの常時表示を防止。
========================================================= */
/* JS更新前のキャッシュ対策としてCSS側でも保険 */
body:has(#settings.page.active) .topbar{
  display:none!important;
}


/* =========================================================
   Ver 5.00: Dashboard redesign
   今日の行動・資金・トレード・今週の予定を中心に再設計。
========================================================= */
#dashboard{
  --dash-navy:#0f172a;
  --dash-muted:#64748b;
  --dash-gold:#c8a15a;
  --dash-border:#e6e8ec;
  --dash-line:#eef1f5;
}

#dashboard .dashboard-hero{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  padding:34px 0 42px;
  border-bottom:1px solid var(--dash-border);
  margin-bottom:24px;
}

#dashboard .dashboard-hero h3{
  margin:8px 0 10px;
  color:var(--dash-navy);
  font-size:38px;
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1.05;
}

#dashboard .dashboard-hero .muted{
  margin:0;
  color:var(--dash-muted);
  font-size:13px;
  font-weight:800;
}

#dashboard .dashboard-hero-stat{
  min-width:180px;
  height:102px;
  border:1px solid var(--dash-border);
  background:#fff;
  padding:18px;
  box-sizing:border-box;
}

#dashboard .dashboard-hero-stat span{
  display:block;
  color:var(--dash-muted);
  font-size:11px;
  font-weight:900;
  margin-bottom:8px;
}

#dashboard .dashboard-hero-stat strong{
  color:var(--dash-navy);
  font-size:36px;
  font-weight:900;
  line-height:1;
}

#dashboard .dashboard-hero-stat em{
  color:var(--dash-muted);
  font-size:12px;
  font-style:normal;
  font-weight:900;
  margin-left:4px;
}

#dashboard .dashboard-kpi-strip{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  border:1px solid var(--dash-border);
  background:#fff;
  margin-bottom:28px;
}

#dashboard .dashboard-kpi-strip article{
  min-height:92px;
  padding:17px 18px;
  border-right:1px solid var(--dash-border);
  box-sizing:border-box;
}

#dashboard .dashboard-kpi-strip article:last-child{
  border-right:0;
}

#dashboard .dashboard-kpi-strip span{
  display:block;
  color:var(--dash-muted);
  font-size:11px;
  font-weight:900;
  margin-bottom:8px;
}

#dashboard .dashboard-kpi-strip strong{
  display:block;
  color:var(--dash-navy);
  font-size:20px;
  font-weight:900;
  line-height:1.2;
  margin-bottom:6px;
}

#dashboard .dashboard-kpi-strip small{
  display:block;
  color:var(--dash-muted);
  font-size:11px;
  font-weight:800;
  line-height:1.35;
}

#dashboard .dashboard-grid{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:22px;
  align-items:start;
}

#dashboard .dashboard-main-card{
  grid-row:span 2;
}

#dashboard .dashboard-card{
  border-top:1px solid var(--dash-border);
  padding-top:22px;
  min-width:0;
}

#dashboard .dashboard-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}

#dashboard .dashboard-card-head h3{
  position:relative;
  margin:0;
  padding-left:16px;
  color:var(--dash-navy);
  font-size:22px;
  font-weight:900;
  line-height:1.2;
}

#dashboard .dashboard-card-head h3::before{
  content:"";
  position:absolute;
  left:0;
  top:.18em;
  width:2px;
  height:1.1em;
  background:var(--dash-gold);
}

#dashboard .dashboard-card-head > span{
  min-width:54px;
  height:28px;
  border:1px solid var(--dash-border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--dash-muted);
  font-size:11px;
  font-weight:900;
}

#dashboard .dashboard-action-list{
  display:grid;
  gap:10px;
}

#dashboard .dashboard-action-item{
  border:1px solid var(--dash-border);
  border-left:2px solid var(--dash-navy);
  background:#fff;
  padding:14px;
}

#dashboard .dashboard-action-item.overdue{
  border-left-color:var(--dash-gold);
  background:#fbf7ef;
}

#dashboard .dashboard-action-item span{
  display:block;
  color:var(--dash-gold);
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:6px;
}

#dashboard .dashboard-action-item strong{
  display:block;
  color:var(--dash-navy);
  font-size:14px;
  font-weight:900;
  margin-bottom:6px;
}

#dashboard .dashboard-action-item em{
  display:block;
  color:var(--dash-muted);
  font-size:11px;
  font-style:normal;
  font-weight:800;
}

#dashboard .dashboard-snapshot-list,
#dashboard .dashboard-life-map{
  border:1px solid var(--dash-border);
  background:#fff;
}

#dashboard .dashboard-snapshot-list div,
#dashboard .dashboard-life-map div{
  display:grid;
  gap:6px;
  padding:14px;
  border-bottom:1px solid var(--dash-line);
}

#dashboard .dashboard-snapshot-list div:last-child,
#dashboard .dashboard-life-map div:last-child{
  border-bottom:0;
}

#dashboard .dashboard-snapshot-list span,
#dashboard .dashboard-life-map span{
  color:var(--dash-muted);
  font-size:11px;
  font-weight:900;
}

#dashboard .dashboard-snapshot-list strong,
#dashboard .dashboard-life-map strong{
  color:var(--dash-navy);
  font-size:15px;
  font-weight:900;
}

#dashboard .dashboard-life-map em{
  color:var(--dash-muted);
  font-size:11px;
  font-style:normal;
  font-weight:800;
}

#dashboard .dashboard-mini-list{
  display:grid;
  gap:8px;
}

#dashboard .dashboard-mini-item{
  display:grid;
  grid-template-columns:54px 1fr 92px;
  gap:10px;
  align-items:center;
  min-height:42px;
  border-bottom:1px solid var(--dash-line);
}

#dashboard .dashboard-mini-item span{
  color:var(--dash-gold);
  font-size:11px;
  font-weight:900;
}

#dashboard .dashboard-mini-item strong{
  color:var(--dash-navy);
  font-size:13px;
  font-weight:900;
}

#dashboard .dashboard-mini-item em{
  color:var(--dash-muted);
  font-size:11px;
  font-style:normal;
  font-weight:800;
  text-align:right;
}

#dashboard .dashboard-empty{
  margin:0;
  padding:18px;
  border:1px solid var(--dash-border);
  color:var(--dash-muted);
  background:#fff;
  font-size:12px;
  font-weight:800;
}

@media (max-width:1200px){
  #dashboard .dashboard-kpi-strip{grid-template-columns:repeat(2,1fr);}
  #dashboard .dashboard-grid{grid-template-columns:1fr;}
  #dashboard .dashboard-main-card{grid-row:auto;}
}


/* =========================================================
   Ver 5.00: Dashboard header cleanup
   ダッシュボードの共通topbarを非表示にし、JSONボタンの常時表示を防止。
========================================================= */
body:has(#dashboard.page.active) .topbar{
  display:none!important;
}


/* =========================================================
   Ver 5.00: Header action button size normalization
   バケットリスト・ToDo・トレーダーハブの追加/読込ボタンを年間イベントの「イベント追加」に統一。
========================================================= */
#bucket .page-head .primary-btn,
#todo .page-head .primary-btn,
#trader .page-head .primary-btn,
#trader .page-head .trader-csv-btn{
  width:132px!important;
  min-width:132px!important;
  height:38px!important;
  min-height:38px!important;
  max-height:38px!important;
  padding:0 18px!important;
  border-radius:0!important;
  box-shadow:none!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1!important;
}


/* =========================================================
   Ver 5.00: Compact dashboard ToDo
   今日やることを1〜2行表示にし、重要/緊急表示を削除。
========================================================= */
#dashboard .dashboard-action-list{
  gap:6px!important;
}

#dashboard .dashboard-action-item{
  display:grid!important;
  grid-template-columns:70px 1fr 130px!important;
  gap:10px!important;
  align-items:center!important;
  min-height:40px!important;
  padding:9px 12px!important;
  border:1px solid var(--dash-border)!important;
  border-left:2px solid var(--dash-navy)!important;
  background:#fff!important;
}

#dashboard .dashboard-action-item.overdue{
  border-left-color:var(--dash-gold)!important;
  background:#fbf7ef!important;
}

#dashboard .dashboard-action-item span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  margin:0!important;
  color:var(--dash-gold)!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.04em!important;
  white-space:nowrap!important;
}

#dashboard .dashboard-action-item strong{
  display:block!important;
  margin:0!important;
  color:var(--dash-navy)!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1.35!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#dashboard .dashboard-action-item em{
  display:block!important;
  margin:0!important;
  color:var(--dash-muted)!important;
  font-size:11px!important;
  font-style:normal!important;
  font-weight:800!important;
  line-height:1.3!important;
  text-align:right!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

@media (max-width:760px){
  #dashboard .dashboard-action-item{
    grid-template-columns:64px 1fr!important;
  }
  #dashboard .dashboard-action-item em{
    grid-column:2!important;
    text-align:left!important;
  }
}


/* =========================================================
   Ver 5.00: Dashboard ToDo line style + navigation
   今日やることを今週の予定と同じ線ベースにし、クリックで該当ToDoへ遷移。
========================================================= */
#dashboard .dashboard-action-list{
  display:grid!important;
  gap:0!important;
}

#dashboard .dashboard-action-item{
  appearance:none!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:70px 1fr 130px!important;
  gap:10px!important;
  align-items:center!important;
  min-height:42px!important;
  padding:0!important;
  border:0!important;
  border-bottom:1px solid var(--dash-line)!important;
  border-left:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer!important;
  text-align:left!important;
}

#dashboard .dashboard-action-item:first-child{
  border-top:1px solid var(--dash-line)!important;
}

#dashboard .dashboard-action-item:hover{
  background:#fafafa!important;
}

#dashboard .dashboard-action-item.overdue{
  border-left:0!important;
  background:transparent!important;
}

#dashboard .dashboard-action-item.overdue:hover{
  background:#fbf7ef!important;
}

#dashboard .dashboard-action-item span{
  display:block!important;
  margin:0!important;
  color:var(--dash-gold)!important;
  font-size:11px!important;
  font-weight:900!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
}

#dashboard .dashboard-action-item strong{
  display:block!important;
  margin:0!important;
  color:var(--dash-navy)!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1.35!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

#dashboard .dashboard-action-item em{
  display:block!important;
  margin:0!important;
  color:var(--dash-muted)!important;
  font-size:11px!important;
  font-style:normal!important;
  font-weight:800!important;
  line-height:1.3!important;
  text-align:right!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}

@media (max-width:760px){
  #dashboard .dashboard-action-item{
    grid-template-columns:64px 1fr!important;
    min-height:52px!important;
    padding:7px 0!important;
  }
  #dashboard .dashboard-action-item em{
    grid-column:2!important;
    text-align:left!important;
  }
}


/* =========================================================
   Ver 5.00: Dashboard focus cleanup
   今日やることのカテゴリ表示と右上の優先アクション数を削除。
========================================================= */
#dashboard .dashboard-hero{
  align-items:flex-start!important;
}

#dashboard .dashboard-hero-stat{
  display:none!important;
}

/* =========================================================
   Ver 5.00: Dashboard main refined layout
   添付デザインのメイン部分だけを採用。余白・細線・横並び情報で洗練化。
========================================================= */
#dashboard{--dash-navy:#0f172a;--dash-muted:#64748b;--dash-gold:#c8a15a;--dash-border:#e6e8ec;--dash-line:#edf0f4;}
#dashboard .dashboard-main-stage{padding-top:18px!important;}
#dashboard .dashboard-main-grid{display:grid!important;grid-template-columns:1.08fr 1fr 1fr!important;border-top:1px solid var(--dash-border)!important;border-bottom:1px solid var(--dash-border)!important;background:#fff!important;}
#dashboard .dashboard-main-panel{min-width:0!important;padding:34px 32px!important;border-right:1px solid var(--dash-border)!important;border-bottom:1px solid var(--dash-border)!important;box-sizing:border-box!important;}
#dashboard .dashboard-main-panel:nth-child(3),#dashboard .dashboard-main-panel:nth-child(5){border-right:0!important;}
#dashboard .dashboard-panel-week{grid-column:1 / 2!important;border-bottom:0!important;}
#dashboard .dashboard-panel-location{grid-column:2 / 4!important;border-right:0!important;border-bottom:0!important;}
#dashboard .dashboard-section-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:18px!important;margin-bottom:24px!important;}
#dashboard .dashboard-section-head .eyebrow{margin:0 0 14px!important;color:var(--dash-navy)!important;font-size:11px!important;font-weight:900!important;letter-spacing:.28em!important;line-height:1!important;}
#dashboard .dashboard-section-head h3{margin:0!important;padding:0!important;color:var(--dash-navy)!important;font-size:24px!important;font-weight:900!important;letter-spacing:-.04em!important;line-height:1.25!important;}
#dashboard .dashboard-section-head h3::before{display:none!important;}
#dashboard .dashboard-section-head>span{min-width:auto!important;height:auto!important;border:0!important;color:var(--dash-navy)!important;font-size:11px!important;font-weight:900!important;letter-spacing:.12em!important;}
#dashboard .dashboard-action-list{display:grid!important;gap:0!important;}
#dashboard .dashboard-action-item{appearance:none!important;width:100%!important;display:grid!important;grid-template-columns:62px 1fr 106px!important;gap:14px!important;align-items:center!important;min-height:54px!important;padding:0!important;border:0!important;border-bottom:1px solid var(--dash-line)!important;background:transparent!important;box-shadow:none!important;cursor:pointer!important;text-align:left!important;}
#dashboard .dashboard-action-item:first-child{border-top:1px solid var(--dash-line)!important;}
#dashboard .dashboard-action-item:hover{background:#fbfcfe!important;}
#dashboard .dashboard-action-item span{color:var(--dash-gold)!important;font-size:12px!important;font-weight:900!important;white-space:nowrap!important;}
#dashboard .dashboard-action-item strong{color:var(--dash-navy)!important;font-size:14px!important;font-weight:900!important;line-height:1.35!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
#dashboard .dashboard-action-item em{color:var(--dash-muted)!important;font-size:12px!important;font-style:normal!important;font-weight:800!important;text-align:right!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
#dashboard .dashboard-compact-rows{display:grid!important;gap:0!important;margin-bottom:30px!important;}
#dashboard .dashboard-compact-rows div{display:grid!important;grid-template-columns:94px 1fr!important;align-items:center!important;min-height:44px!important;border-bottom:1px solid var(--dash-line)!important;padding:0!important;}
#dashboard .dashboard-compact-rows div:first-child{border-top:1px solid var(--dash-line)!important;}
#dashboard .dashboard-compact-rows span{color:var(--dash-navy)!important;font-size:13px!important;font-weight:600!important;}
#dashboard .dashboard-compact-rows strong{color:var(--dash-navy)!important;font-size:15px!important;font-weight:600!important;text-align:right!important;}
#dashboard .dashboard-progress-block{display:grid!important;gap:10px!important;}
#dashboard .dashboard-progress-block>div:first-child{display:flex!important;align-items:baseline!important;gap:10px!important;}
#dashboard .dashboard-progress-block span{color:var(--dash-navy)!important;font-size:13px!important;font-weight:900!important;}
#dashboard .dashboard-progress-block strong{color:var(--dash-navy)!important;font-size:15px!important;font-weight:900!important;}
#dashboard .dashboard-progress-track{width:100%!important;height:8px!important;background:#e5e7eb!important;overflow:hidden!important;}
#dashboard .dashboard-progress-track i{display:block!important;width:0;height:100%!important;background:var(--dash-gold)!important;}
#dashboard .dashboard-panel-trade .dashboard-progress-track i{background:var(--dash-navy)!important;}
#dashboard .dashboard-mini-list{display:grid!important;gap:0!important;}
#dashboard .dashboard-mini-item{display:grid!important;grid-template-columns:54px 1fr 92px!important;gap:10px!important;align-items:center!important;min-height:42px!important;border-bottom:1px solid var(--dash-line)!important;}
#dashboard .dashboard-mini-item:first-child{border-top:1px solid var(--dash-line)!important;}
#dashboard .dashboard-mini-item span{color:var(--dash-gold)!important;font-size:11px!important;font-weight:900!important;}
#dashboard .dashboard-mini-item strong{color:var(--dash-navy)!important;font-size:13px!important;font-weight:900!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
#dashboard .dashboard-mini-item em{color:var(--dash-muted)!important;font-size:11px!important;font-style:normal!important;font-weight:800!important;text-align:right!important;}
#dashboard .dashboard-life-map{display:grid!important;grid-template-columns:repeat(3,1fr)!important;border:0!important;background:transparent!important;}
#dashboard .dashboard-life-map div{border:0!important;border-right:1px solid var(--dash-border)!important;padding:18px 28px!important;min-height:86px!important;display:grid!important;align-content:center!important;gap:8px!important;}
#dashboard .dashboard-life-map div:first-child{padding-left:0!important;}
#dashboard .dashboard-life-map div:last-child{border-right:0!important;}
#dashboard .dashboard-life-map span{color:var(--dash-muted)!important;font-size:10px!important;font-weight:900!important;letter-spacing:.18em!important;}
#dashboard .dashboard-life-map strong{color:var(--dash-navy)!important;font-size:16px!important;font-weight:900!important;}
#dashboard .dashboard-life-map em{color:var(--dash-muted)!important;font-size:11px!important;font-style:normal!important;font-weight:800!important;}
#dashboard .dashboard-empty{margin:0!important;padding:18px 0!important;border:0!important;border-top:1px solid var(--dash-line)!important;border-bottom:1px solid var(--dash-line)!important;color:var(--dash-muted)!important;background:transparent!important;font-size:12px!important;font-weight:800!important;}
@media (max-width:1200px){#dashboard .dashboard-main-grid{grid-template-columns:1fr!important;}#dashboard .dashboard-main-panel,#dashboard .dashboard-main-panel:nth-child(3),#dashboard .dashboard-main-panel:nth-child(5){grid-column:auto!important;border-right:0!important;}#dashboard .dashboard-panel-week,#dashboard .dashboard-panel-location{grid-column:auto!important;}#dashboard .dashboard-life-map{grid-template-columns:1fr!important;}#dashboard .dashboard-life-map div{border-right:0!important;border-bottom:1px solid var(--dash-border)!important;padding-left:0!important;}}


/* =========================================================
   Ver 5.00: Sidebar time block
   添付画像のような場所・日付・時刻表示をサイドバーに追加。
========================================================= */
.sidebar{
  position:relative!important;
}

.sidebar-time{
  position:absolute!important;
  left:26px!important;
  bottom:124px!important;
  display:grid!important;
  gap:8px!important;
  color:#0f172a!important;
  z-index:2!important;
}

.sidebar-time-place{
  display:block!important;
  color:#0f172a!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.32em!important;
  line-height:1!important;
}

.sidebar-time-date{
  display:block!important;
  color:#0f172a!important;
  opacity:.72!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.18em!important;
  line-height:1!important;
}

.sidebar-time-clock{
  display:block!important;
  color:#0f172a!important;
  font-size:34px!important;
  font-weight:400!important;
  letter-spacing:.08em!important;
  line-height:1!important;
  margin-top:10px!important;
}

.sidebar-time-ampm{
  display:block!important;
  color:#0f172a!important;
  opacity:.72!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.22em!important;
  line-height:1!important;
}

.app-shell.sidebar-collapsed .sidebar-time{
  display:none!important;
}

@media (max-height:760px){
  .sidebar-time{
    display:none!important;
  }
}


/* =========================================================
   Ver 5.00: Sidebar user card fix
   ユーザー名・保存方式・バージョンの情報欄を崩れない3カラムに整理。
========================================================= */
/* 既存のユーザー情報カードを安定レイアウト化 */
.side-note{
  left:18px!important;
  right:18px!important;
  bottom:18px!important;
  width:auto!important;
  min-width:0!important;
  height:62px!important;
  min-height:62px!important;
  padding:0 12px!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) auto!important;
  column-gap:12px!important;
  align-items:center!important;
  border:1px solid #e6e8ec!important;
  background:#fff!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
}

.side-note::before{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#000!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1!important;
  margin:0!important;
}

.side-note strong,
.side-note b{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#0f172a!important;
  font-size:13px!important;
  font-weight:900!important;
  line-height:1.2!important;
  margin:0!important;
}

.side-note small,
.side-note p{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#64748b!important;
  font-size:10px!important;
  font-weight:700!important;
  line-height:1.2!important;
  margin:3px 0 0!important;
}

.side-note span{
  justify-self:end!important;
  align-self:center!important;
  color:#0f172a!important;
  font-size:0!important;
  font-weight:900!important;
  line-height:1.05!important;
  text-align:right!important;
  white-space:nowrap!important;
  margin:0!important;
}

.side-note span::before{
  content:"Ver\A 4.93"!important;
  white-space:pre!important;
  display:block!important;
  color:#0f172a!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.05!important;
  text-align:right!important;
}

/* サイドバー時計とユーザー情報が重ならないよう余白を再調整 */
.sidebar-time{
  bottom:104px!important;
}

@media (max-height:820px){
  .sidebar-time{
    display:none!important;
  }
}

.app-shell.sidebar-collapsed .side-note{
  display:none!important;
}

/* =========================================================
   Ver 5.02: Mobile CSS refactor - canonical
   共通は共通、ページ固有はページID配下に限定。
   既存のPC向けCSSはそのまま維持し、スマホ時だけ責務別に制御。
========================================================= */

.side-note span{font-size:0!important;}
.side-note span::before{content:"Ver\A 5.48"!important;white-space:pre!important;font-size:12px!important;line-height:1.05!important;}
.mobile-rail-toggle{display:none;}

@media screen and (max-width:768px){
  /* ---------- 01. Common shell ---------- */
  html,body{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    background:#fff!important;
  }

  .app-shell,
  .app-shell.sidebar-collapsed{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    overflow-x:hidden!important;
    background:#fff!important;
  }

  .app-shell::before,
  .app-shell::after,
  .page-divider-brand,
  .topbar{
    display:none!important;
    content:none!important;
  }

  .main,
  .app-shell.sidebar-collapsed .main{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:76px 16px 36px!important;
    transform:none!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    background:#fff!important;
  }

  .page,
  .page.active{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  .page{display:none!important;}
  .page.active{display:block!important;}

  input,select,textarea,button{font-size:16px!important;}

  /* ---------- 02. Mobile sidebar ---------- */
  .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    width:240px!important;
    max-width:78vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    z-index:3000!important;
    background:#fff!important;
    border-right:1px solid #e6e8ec!important;
    transform:translateX(-100%)!important;
    transition:transform .24s ease!important;
    box-sizing:border-box!important;
    overflow-y:auto!important;
  }

  .app-shell:not(.sidebar-collapsed) .sidebar{transform:translateX(0)!important;}
  .app-shell:not(.sidebar-collapsed)::after{
    content:""!important;
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:2500!important;
    background:rgba(15,23,42,.22)!important;
  }

  .sidebar::after,
  .sidebar .sidebar-toggle,
  .sidebar-time,
  .side-note{display:none!important;content:none!important;}

  .brand{padding:22px 20px 8px!important;}
  .brand-title{font-size:14px!important;letter-spacing:.22em!important;}
  .nav{padding-top:28px!important;}
  .nav-item{height:46px!important;padding:0 20px!important;}
  .nav-label{font-size:13px!important;}

  .mobile-rail-toggle{
    position:fixed!important;
    top:14px!important;
    left:14px!important;
    z-index:3600!important;
    width:42px!important;
    height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:5px!important;
    padding:0!important;
    border:1px solid #e6e8ec!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:0 12px 28px rgba(15,23,42,.08)!important;
    cursor:pointer!important;
  }
  .mobile-rail-toggle span{
    display:block!important;
    width:2px!important;
    height:16px!important;
    background:#c8a15a!important;
    border-radius:0!important;
  }

  /* ---------- 03. Common typography ---------- */
  h1,.page-title,.life-page-title,.annual-page-title,.finance-page-title,.trader-page-title,.settings-page-title{
    font-size:25px!important;
    line-height:1.22!important;
    letter-spacing:-.04em!important;
  }
  h2,.section-title,.life-section-title,.annual-section-title,.finance-section-title,.trader-section-title,.settings-section-title{
    font-size:18px!important;
    line-height:1.34!important;
    letter-spacing:-.035em!important;
  }
  h3,.panel h3,.modal-card h3{
    font-size:16px!important;
    line-height:1.36!important;
    letter-spacing:-.025em!important;
  }

  /* page-head内のh1/h2/h3は実装差を吸収してページタイトル扱い */
  #dashboard .page-head h1,#dashboard .page-head h2,#dashboard .page-head h3,
  #timeline .page-head h1,#timeline .page-head h2,#timeline .page-head h3,
  #bucket .page-head h1,#bucket .page-head h2,#bucket .page-head h3,
  #events .page-head h1,#events .page-head h2,#events .page-head h3,
  #todo .page-head h1,#todo .page-head h2,#todo .page-head h3,
  #finance .page-head h1,#finance .page-head h2,#finance .page-head h3,
  #trader .page-head h1,#trader .page-head h2,#trader .page-head h3,
  #settings .page-head h1,#settings .page-head h2,#settings .page-head h3,
  .life-page-head h1,.life-page-head h2,.life-page-head h3,
  .annual-page-head h1,.annual-page-head h2,.annual-page-head h3,
  .finance-page-head h1,.finance-page-head h2,.finance-page-head h3,
  .trader-page-head h1,.trader-page-head h2,.trader-page-head h3,
  .settings-page-head h1,.settings-page-head h2,.settings-page-head h3{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 12px!important;
    padding:0!important;
    font-size:25px!important;
    line-height:1.22!important;
    letter-spacing:-.04em!important;
    text-align:left!important;
    writing-mode:horizontal-tb!important;
  }

  .section-head h2,.life-section-head h2,.annual-section-head h2,.finance-section-head h2,.trader-section-head h2,.settings-section-head h2,.timeline-section-head h2{
    font-size:18px!important;
    line-height:1.34!important;
  }
  .section-head h3,.life-section-head h3,.annual-section-head h3,.finance-section-head h3,.trader-section-head h3,.settings-section-head h3,.dashboard-section-head h3,.panel-head h3{
    font-size:16px!important;
    line-height:1.36!important;
  }
  .muted,.page-head p{font-size:12px!important;line-height:1.65!important;}
  .eyebrow,.page-head .life-date,.page-head .life-eyebrow,.page-head .annual-year-kicker,.page-head .bucket-year-kicker,.page-head .finance-year-kicker{
    font-size:9px!important;
    line-height:1!important;
    letter-spacing:.22em!important;
    margin:0 0 10px!important;
  }

  /* ---------- 04. Common page/section head ---------- */
  .page-head,.life-page-head,.annual-page-head,.finance-page-head,.trader-page-head,.settings-page-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0 0 20px!important;
    margin:0 0 18px!important;
    border-bottom:1px solid #e6e8ec!important;
    box-sizing:border-box!important;
  }
  .page-head > div:first-child,
  .life-page-head > div:first-child,
  .annual-page-head > div:first-child,
  .finance-page-head > div:first-child,
  .trader-page-head > div:first-child,
  .settings-page-head > div:first-child{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  .page-head .primary-btn,.life-page-head .primary-btn,.annual-page-head .primary-btn,.finance-page-head .primary-btn,.trader-page-head .primary-btn,.settings-page-head .primary-btn{
    width:100%!important;
    max-width:none!important;
  }

  .section-head,.life-section-head,.annual-section-head,.finance-section-head,.trader-section-head,.settings-section-head,.timeline-section-head,.bucket-section-head,.todo-section-head,.panel-head,.dashboard-card-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:12px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-bottom:18px!important;
  }
  .section-actions,.section-head-actions,.life-section-actions,.annual-section-actions,.finance-section-actions,.trader-section-actions,.timeline-actions,.life-carousel-controls,.journey-controls,.timeline-controls,.phase-nav,.dot-nav,.slider-dots,.life-journey-nav{
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    flex-wrap:wrap!important;
    margin:0!important;
  }

  /* ---------- 05. Common scroll / table ---------- */
  .bucket-table,.todo-table,.finance-table,.trader-table,.annual-timeline-shell,.trade-calendar-shell,.life-journey-shell,.life-map-scroll{
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .bucket-table,.todo-table,.finance-table,.trader-table{display:block!important;width:100%!important;}
  .bucket-table-head,.bucket-row,.todo-table-head,.todo-row,.finance-table-head,.finance-row,.trader-table-head,.trader-row{min-width:760px!important;}
  .todo-table-foot,.bucket-table-foot,.finance-detail-footer,.trade-record-tools{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;align-items:start!important;}
  .todo-pagination,.bucket-pagination,.finance-detail-pagination,.trade-record-pagination{justify-self:start!important;}

  /* ---------- 06. Common drawer / modal ---------- */
  .modal-card,.confirm-modal,.todo-drawer,.bucket-drawer,.trade-note-drawer{
    width:100vw!important;
    max-width:100vw!important;
    right:0!important;
    left:auto!important;
    border-radius:0!important;
  }
  .todo-drawer-body,.bucket-drawer-body,.trade-note-drawer-body{padding:22px 18px 110px!important;}
  .todo-drawer-grid,.todo-form-grid,.bucket-form-grid,.settings-form-grid,.finance-input-grid,.trade-filter-grid{grid-template-columns:1fr!important;}
  .todo-time-mode-toggle,.trade-custom-select,.trade-date-field{width:100%!important;}
  .drawer-actions,.todo-drawer-actions,.bucket-drawer-actions,.trade-note-actions{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom))!important;
    background:#fff!important;
    border-top:1px solid #e6e8ec!important;
    box-shadow:0 -12px 28px rgba(15,23,42,.06)!important;
  }
  .drawer-actions button,.todo-drawer-actions button,.bucket-drawer-actions button,.trade-note-actions button{width:100%!important;}

  /* ---------- 07. Page specific: Bucket / ToDo / Timeline / Annual ---------- */
  #bucket,#todo,#timeline,#events{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }
  #bucket .page-head,#todo .page-head,#timeline .page-head,#events .page-head{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* ---------- 08. Page specific: Dashboard ---------- */
  #dashboard,#dashboard.page,#dashboard.page.active,#dashboard .dashboard-main-stage,#dashboard .dashboard-main-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  #dashboard .dashboard-main-grid{
    display:flex!important;
    flex-direction:column!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    grid-auto-flow:row!important;
    border-top:1px solid #e6e8ec!important;
    border-bottom:0!important;
  }
  #dashboard .dashboard-main-panel,#dashboard .dashboard-panel-action,#dashboard .dashboard-panel-money,#dashboard .dashboard-panel-trade,#dashboard .dashboard-panel-week,#dashboard .dashboard-panel-location{
    display:block!important;
    grid-column:auto!important;
    grid-row:auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:28px 0!important;
    border-right:0!important;
    border-bottom:1px solid #e6e8ec!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
  }
  #dashboard .dashboard-action-item{width:100%!important;max-width:100%!important;min-width:0!important;grid-template-columns:58px minmax(0,1fr)!important;gap:10px!important;min-height:62px!important;padding:8px 0!important;}
  #dashboard .dashboard-action-item em{grid-column:2!important;text-align:left!important;}
  #dashboard .dashboard-compact-rows div{grid-template-columns:86px minmax(0,1fr)!important;width:100%!important;max-width:100%!important;min-width:0!important;}
  #dashboard .dashboard-compact-rows strong{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
  #dashboard .dashboard-life-map{display:grid!important;grid-template-columns:1fr!important;width:100%!important;max-width:100%!important;min-width:0!important;}
  #dashboard .dashboard-life-map div{padding:16px 0!important;border-right:0!important;border-bottom:1px solid #e6e8ec!important;}

  /* ---------- 09. Page specific: Finance / Trader / Settings / Calendar ---------- */
  #finance .finance-summary-grid,#finance .finance-gap-grid,#finance .finance-chart-grid,#trader .trader-summary-grid,#settings .settings-system-grid,#settings .settings-data-actions{display:grid!important;grid-template-columns:1fr!important;}
  #trader .trader-tabs,#settings .settings-subnav,.annual-view-tabs,.trade-view-tabs{overflow-x:auto!important;white-space:nowrap!important;justify-content:flex-start!important;}
  #trader .trader-tabs button,#settings .settings-subnav button,.annual-view-tabs button,.trade-view-tabs button{min-width:112px!important;}
  #settings .settings-danger-zone{display:grid!important;gap:14px!important;}
  #settings .settings-danger-zone .danger{width:100%!important;}

  .annual-calendar-wrap,.trade-calendar-wrap,.month-calendar-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;}
  .annual-calendar-grid,.trade-calendar-grid,.month-calendar-grid{min-width:760px!important;}
  .annual-week-grid,.trade-week-grid{min-width:900px!important;}
}

/* =========================================================
   Ver 5.04: Trader Hub mobile chart readability
   スマホではグラフを横に圧縮せず、横スクロール可能な可変表示にする。
========================================================= */
@media (max-width: 768px){
  #trader .trade-analysis-grid{
    gap:16px!important;
  }

  #trader .trade-chart-card,
  #trader .trade-chart-card.large{
    padding:16px 0!important;
    border-left:0!important;
    border-right:0!important;
  }

  #trader .trade-chart-card h4,
  #trader .trade-chart-top,
  #trader .trade-chart-stats,
  #trader .trade-metric-switch{
    margin-left:0!important;
    margin-right:0!important;
  }

  #trader .trade-chart{
    width:100%!important;
    min-height:340px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:8px!important;
  }

  #trader .trade-chart svg{
    width:760px!important;
    min-width:760px!important;
    max-width:none!important;
    height:320px!important;
  }

  #trader .trade-chart-empty{
    height:320px!important;
    min-width:100%!important;
  }

  #trader .trade-chart-top{
    align-items:flex-start!important;
    gap:12px!important;
  }

  #trader .trade-chart-top strong{
    white-space:nowrap!important;
  }
}

@media (max-width: 420px){
  #trader .trade-chart svg{
    width:820px!important;
    min-width:820px!important;
  }
}


/* =========================================================
   Ver 5.04: Trader profit analysis chart scroll + timeline phase mobile form
   Scope: #trader / #timeline mobile only
========================================================= */
@media (max-width: 768px){
  /* Trader Hub: 損益分析を含む全グラフを横スクロール可能にする */
  #trader .trade-analysis-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  #trader .trade-chart-card,
  #trader .trade-chart-card.large{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    padding:16px 0!important;
    border-left:0!important;
    border-right:0!important;
  }

  #trader .trade-chart{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    min-height:auto!important;
  }

  #trader .trade-chart-scroll{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:10px!important;
  }

  #trader .trade-chart-scroll svg,
  #trader .trade-chart > svg{
    display:block!important;
    width:820px!important;
    min-width:820px!important;
    max-width:none!important;
    height:320px!important;
    flex:0 0 auto!important;
  }

  #trader .trade-chart-empty{
    height:320px!important;
    min-width:100%!important;
  }

  /* Life Timeline: フェーズ詳細の入力欄はスマホで1行1項目 */
  #timeline .phase-form-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    width:100%!important;
    max-width:100%!important;
  }

  #timeline .phase-form-grid label,
  #timeline .phase-form-grid input,
  #timeline .phase-form-grid select,
  #timeline .phase-form-grid textarea{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
}

@media (max-width: 420px){
  #trader .trade-chart-scroll svg,
  #trader .trade-chart > svg{
    width:880px!important;
    min-width:880px!important;
  }
}

/* =========================================================
   Ver 5.06: Life Timeline mobile one-column layout
   Scope: #timeline mobile only
   - 自動生成フェーズ一覧をスマホで縦積み
   - フェーズ詳細フォームを1行1項目に固定
========================================================= */
@media (max-width: 768px){
  #timeline .life-section{
    padding:40px 0!important;
  }

  #timeline .life-section-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:18px!important;
    margin-bottom:28px!important;
  }

  #timeline .life-section-head > div,
  #timeline .life-section-head .life-detail-actions,
  #timeline .life-section-head .life-map-nav{
    width:100%!important;
    max-width:100%!important;
  }

  #timeline .life-detail-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
  }

  #timeline .life-detail-actions button{
    width:100%!important;
    justify-content:center!important;
  }

  #timeline .life-auto-table{
    width:100%!important;
    overflow:visible!important;
  }

  #timeline .life-auto-head{
    display:none!important;
  }

  #timeline .life-auto-row{
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    grid-template-rows:auto!important;
    align-items:flex-start!important;
    gap:6px 14px!important;
    width:100%!important;
    min-height:auto!important;
    padding:18px 0!important;
    border-bottom:1px solid var(--ll-line,#eef1f5)!important;
  }

  #timeline .life-auto-row span,
  #timeline .life-auto-row strong,
  #timeline .life-auto-row small,
  #timeline .life-auto-row em{
    max-width:100%!important;
    min-width:0!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  #timeline .life-auto-row span{
    padding:0!important;
  }

  #timeline .life-auto-row .life-auto-no{
    grid-column:1!important;
    grid-row:1 / span 4!important;
    align-self:flex-start!important;
    padding-top:0!important;
    font-size:24px!important;
    line-height:1.1!important;
  }

  #timeline .life-auto-row span:nth-child(2),
  #timeline .life-auto-row span:nth-child(3),
  #timeline .life-auto-row span:nth-child(4),
  #timeline .life-auto-row span:nth-child(5){
    grid-column:2!important;
    justify-self:stretch!important;
    text-align:left!important;
  }

  #timeline .life-auto-row span:nth-child(4){
    font-size:12px!important;
    color:var(--ll-muted,#64748b)!important;
    line-height:1.5!important;
  }

  #timeline .life-auto-row span:last-child{
    margin-top:4px!important;
  }

  #timeline .life-detail-form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    width:100%!important;
    max-width:100%!important;
  }

  #timeline .life-detail-form label,
  #timeline .life-detail-form input,
  #timeline .life-detail-form select,
  #timeline .life-detail-form textarea{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  #timeline .life-detail-form textarea{
    min-height:120px!important;
  }

  #timeline .life-save-row{
    grid-column:1!important;
    display:block!important;
    width:100%!important;
    margin-top:2px!important;
  }

  #timeline .life-save-row .life-primary-btn,
  #timeline .life-save-row button{
    width:100%!important;
  }
}

/* Ver display */
.side-note span::before{content:"Ver\A 5.08"!important;white-space:pre!important;}


/* =========================================================
   Ver 5.08: Mobile phase selectors
   Scope: Life Timeline / Bucket List mobile only
   - スマホは横スクロール型からプルダウン選択へ
   - PCのジャーニーマップ/タブUIは維持
========================================================= */
.journey-mobile-panel,
.bucket-mobile-filter{
  display:none;
}

@media (max-width: 768px){
  #timeline .journey-dots,
  #timeline .journey-scroll{
    display:none!important;
  }

  #timeline .journey-mobile-panel{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
    width:100%!important;
    max-width:100%!important;
  }

  #timeline .journey-mobile-current{
    display:grid!important;
    gap:8px!important;
    padding:0 0 18px!important;
    border-bottom:1px solid var(--ll-line,#e5e7eb)!important;
  }

  #timeline .journey-mobile-current span,
  #timeline .journey-mobile-select{
    font-size:12px!important;
    font-weight:800!important;
    letter-spacing:.04em!important;
    color:var(--ll-muted,#64748b)!important;
  }

  #timeline .journey-mobile-current strong{
    font-size:20px!important;
    line-height:1.45!important;
    color:var(--ll-navy,#0f172a)!important;
  }

  #timeline .journey-mobile-current small{
    font-size:13px!important;
    line-height:1.5!important;
    color:var(--ll-muted,#64748b)!important;
  }

  #timeline .journey-mobile-current em{
    justify-self:start!important;
    margin-top:2px!important;
    padding:7px 12px!important;
    border:1px solid var(--ll-line,#e5e7eb)!important;
    font-style:normal!important;
    font-size:12px!important;
    font-weight:800!important;
    color:var(--ll-navy,#0f172a)!important;
    background:#fff!important;
  }

  #timeline .journey-mobile-select{
    display:grid!important;
    gap:8px!important;
    width:100%!important;
  }

  #timeline .journey-mobile-select select,
  #bucket .bucket-mobile-filter select{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:48px!important;
    padding:0 14px!important;
    border:1px solid var(--ll-line,#e5e7eb)!important;
    border-radius:0!important;
    background:#fff!important;
    color:var(--ll-navy,#0f172a)!important;
    font-size:14px!important;
    font-weight:800!important;
    box-sizing:border-box!important;
  }

  #bucket .bucket-mobile-filter{
    display:block!important;
    width:100%!important;
    margin:0 0 18px!important;
  }

  #bucket .bucket-mobile-filter label{
    display:grid!important;
    gap:8px!important;
    width:100%!important;
    color:var(--ll-muted,#64748b)!important;
    font-size:12px!important;
    font-weight:800!important;
    letter-spacing:.04em!important;
  }

  #bucket #bucketPhaseTabs,
  #bucket .bucket-tabs{
    display:none!important;
  }
}

/* Ver display */
.side-note span::before{content:"Ver\A 5.08"!important;white-space:pre!important;}


/* =========================================================
   Ver 5.08: Mobile custom phase selector + bucket drawer spacing
   - ネイティブselectの小さなポップアップを廃止
   - スマホはサイト内ドロップダウンで選択
   - バケット編集ドロワーの左右余白を復元
========================================================= */
.mobile-phase-select{
  position:relative;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

.mobile-phase-select-button{
  width:100%;
  height:52px;
  padding:0 16px;
  border:1px solid var(--ll-line,#e5e7eb);
  border-radius:0;
  background:#fff;
  color:var(--ll-navy,#0f172a);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  box-shadow:none;
  font-size:14px;
  font-weight:900;
  line-height:1;
  text-align:left;
  box-sizing:border-box;
}

.mobile-phase-select-button i{
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  opacity:.8;
  flex:0 0 auto;
}

.mobile-phase-select-list{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:80;
  max-height:260px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--ll-line,#e5e7eb);
  background:#fff;
  box-shadow:0 18px 40px rgba(15,23,42,.12);
  box-sizing:border-box;
}

.mobile-phase-select.open .mobile-phase-select-list{
  display:block;
}

.mobile-phase-select-option{
  width:100%;
  min-height:46px;
  padding:0 16px;
  border:0;
  border-bottom:1px solid #eef2f6;
  border-radius:0;
  background:#fff;
  color:var(--ll-navy,#0f172a);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  box-shadow:none;
  font-size:13px;
  font-weight:800;
  text-align:left;
  box-sizing:border-box;
}

.mobile-phase-select-option:last-child{border-bottom:0;}
.mobile-phase-select-option.selected{
  background:#f7f8fa;
  color:var(--ll-gold,#c8a15a);
}

@media (max-width: 768px){
  #timeline .journey-mobile-select,
  #bucket .bucket-mobile-filter{
    position:relative!important;
    z-index:10!important;
    overflow:visible!important;
  }

  #bucket .bucket-mobile-filter{
    display:grid!important;
    gap:8px!important;
    width:100%!important;
    max-width:100%!important;
    margin:0 0 18px!important;
  }

  #bucket .bucket-mobile-filter-label,
  #timeline .journey-mobile-select > span{
    display:block!important;
    color:var(--ll-muted,#64748b)!important;
    font-size:12px!important;
    font-weight:800!important;
    letter-spacing:.04em!important;
  }

  #timeline .journey-mobile-select select,
  #bucket .bucket-mobile-filter select{
    display:none!important;
  }

  #bucket .bucket-panel,
  #timeline .journey-mobile-panel{
    overflow:visible!important;
  }

  #bucketDrawer{
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
  }

  #bucketDrawer .bucket-drawer-head{
    padding:24px 24px 20px!important;
  }

  #bucketDrawer .bucket-drawer-head > div{
    padding-right:36px!important;
  }

  #bucketDrawer .bucket-drawer-head h3{
    font-size:22px!important;
    line-height:1.35!important;
  }

  #closeBucketDrawerBtn{
    top:22px!important;
    right:20px!important;
  }

  #bucketDrawer .bucket-drawer-body{
    padding:0 0 116px!important;
  }

  #bucketDrawer .bucket-edit-section{
    padding:24px 24px!important;
  }

  #bucketDrawer .bucket-section-title{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    margin-bottom:18px!important;
  }

  #bucketDrawer .bucket-form-grid,
  #bucketDrawer .bucket-edit-grid{
    grid-template-columns:1fr!important;
    gap:16px!important;
  }

  #bucketDrawer .bucket-drawer-actions{
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    padding:12px 24px calc(14px + env(safe-area-inset-bottom))!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    box-sizing:border-box!important;
  }

  #bucketDrawer .bucket-drawer-actions button,
  #deleteBucketDrawerBtn,
  #cancelBucketDrawerBtn,
  #saveBucketDrawerBtn{
    width:100%!important;
    min-width:0!important;
  }
}

/* Ver display */
.side-note span::before{content:"Ver\A 5.08"!important;white-space:pre!important;}

/* =========================================================
   Ver 5.09: Annual mobile mini calendar + modal category picker
   スマホではカレンダー文字を詰め込まず、日付＋種別アイコンだけを表示する。
   年間イベント追加モーダルのカテゴリはネイティブselectを使わず独自UIにする。
========================================================= */
#events .annual-cal-day{
  appearance:none;
  -webkit-appearance:none;
  border-top:0;
  border-left:0;
  text-align:left;
  font:inherit;
  cursor:pointer;
}

#events .annual-cal-day.selected{
  background:#f8fafc;
  box-shadow:inset 0 0 0 2px rgba(201,161,92,.38);
}

#events .annual-cal-dot{
  width:8px;
  height:8px;
  min-width:8px;
  display:inline-block;
  border:1px solid var(--annual-soft);
  background:#fff;
  box-sizing:border-box;
}

#events .annual-cal-dot.event{
  border-color:var(--annual-gold);
  background:var(--annual-gold);
}

#events .annual-cal-dot.todo{
  border-color:var(--annual-navy);
  background:var(--annual-navy);
}

#events .annual-cal-dot.sub{
  border-color:#cbd5e1;
  background:#cbd5e1;
}

#events .annual-day-detail{
  margin-top:16px;
  border-top:1px solid var(--annual-border);
  border-bottom:1px solid var(--annual-border);
  padding:16px 0;
}

#events .annual-day-detail-head p{
  margin:0 0 14px;
  color:var(--annual-navy);
  font-size:15px;
  font-weight:900;
}

#events .annual-day-detail-group{
  display:grid;
  gap:8px;
  padding:12px 0;
  border-top:1px solid #eef2f7;
}

#events .annual-day-detail-group:first-of-type{
  border-top:0;
}

#events .annual-day-detail-group > strong{
  color:var(--annual-muted);
  font-size:12px;
  font-weight:900;
}

#events .annual-cal-empty.compact{
  padding:8px 0 0;
  text-align:left;
}

.event-category-field{
  position:relative;
}

.event-category-toggle{
  width:100%;
  min-height:44px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--navy);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
  box-shadow:none;
  border-radius:0;
  font-size:14px;
  font-weight:900;
  text-align:left;
}

.event-category-toggle i{
  font-style:normal;
  color:var(--muted);
}

.event-category-menu{
  display:none;
  position:absolute;
  z-index:30;
  top:calc(100% + 6px);
  left:0;
  right:0;
  max-height:220px;
  overflow:auto;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 18px 40px rgba(15,23,42,.16);
}

.event-category-field.open .event-category-menu{
  display:grid;
}

.event-category-menu button{
  width:100%;
  height:42px;
  border:0;
  border-bottom:1px solid #eef2f7;
  background:#fff;
  color:var(--navy);
  box-shadow:none;
  border-radius:0;
  padding:0 14px;
  text-align:left;
  font-size:13px;
  font-weight:800;
}

.event-category-menu button:last-child{
  border-bottom:0;
}

.event-category-menu button.selected{
  background:#f8fafc;
  color:var(--gold);
}

@media (max-width: 768px){
  #events .annual-action-head{
    display:block;
  }

  #events .annual-action-head .annual-section-title{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:10px;
    align-items:start;
  }

  #events .annual-action-head .annual-section-title::before{
    align-self:start;
    margin-top:3px;
  }

  #events .annual-action-head .annual-section-title h2{
    writing-mode:horizontal-tb!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    line-height:1.35!important;
    font-size:18px!important;
  }

  #events .annual-action-head .annual-section-title p{
    grid-column:1 / -1;
    writing-mode:horizontal-tb!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    line-height:1.7!important;
    margin-top:12px;
  }

  #events .annual-calendar-tools{
    display:grid;
    gap:14px;
    justify-content:stretch;
  }

  #events .annual-view-switch{
    width:100%;
  }

  #events .annual-view-switch button{
    width:auto;
    flex:1;
  }

  #events .annual-calendar-legend{
    gap:12px;
    flex-wrap:wrap;
  }

  #events .annual-calendar-legend i{
    width:9px;
    height:9px;
    border-radius:2px;
  }

  #events .annual-calendar-nav{
    justify-content:center;
    margin:28px 0 16px;
  }

  #events .annual-calendar-nav strong{
    min-width:150px;
    text-align:center;
    font-size:18px;
  }

  #events .annual-cal-grid{
    grid-template-columns:repeat(7, minmax(0, 1fr));
    width:100%;
    min-width:0!important;
  }

  #events .annual-cal-week{
    height:34px;
    font-size:11px;
  }

  #events .annual-cal-day{
    min-height:54px!important;
    height:54px;
    padding:6px 4px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    background:#fff;
  }

  #events .annual-cal-day-num{
    margin:0;
    font-size:11px;
  }

  #events .annual-cal-day-items{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-content:flex-start;
    gap:3px;
    width:100%;
    min-height:14px;
  }

  #events .annual-cal-day-items .annual-cal-item{
    display:none;
  }

  #events .annual-cal-dot{
    width:7px;
    height:7px;
    min-width:7px;
  }

  #events .annual-cal-more{
    font-size:9px;
    line-height:1;
  }

  #events .annual-day-detail{
    margin-top:18px;
    padding:14px 0;
  }

  #events .annual-day-detail .annual-cal-item{
    min-height:30px;
    align-items:center;
    border-bottom:1px solid #f1f5f9;
    padding:4px 0 8px;
  }

  #events .annual-day-detail .annual-cal-item:last-child{
    border-bottom:0;
  }

  .modal-backdrop.event-modal-style .modal{
    width:calc(100vw - 48px)!important;
    max-width:360px!important;
  }

  .modal-backdrop.event-modal-style .modal-head{
    padding:22px 28px!important;
  }

  .modal-backdrop.event-modal-style #modalBody{
    padding:24px 28px 28px!important;
  }

  .modal-backdrop.event-modal-style .form-grid.two{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }

  .modal-backdrop.event-modal-style .modal-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-top:24px!important;
  }

  .modal-backdrop.event-modal-style .modal-actions .primary-btn,
  .modal-backdrop.event-modal-style .modal-actions .ghost-btn{
    width:100%!important;
    min-width:0!important;
  }

  .modal-backdrop.event-modal-style .modal-actions .primary-btn{
    order:1;
  }

  .modal-backdrop.event-modal-style .modal-actions .ghost-btn{
    order:2;
  }

  .event-category-menu{
    position:static;
    margin-top:8px;
    max-height:180px;
    box-shadow:none;
  }
}

/* =========================================================
   Ver 5.11: Annual action calendar mobile head layout fix
   年間アクションカレンダーのheadをスマホで縦並びに固定。
   カレンダー本体・PC表示は変更しない。
========================================================= */
@media (max-width: 768px){
  #events .annual-action-section .annual-action-head,
  #events .annual-section-head.annual-action-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    align-items:start!important;
    justify-content:start!important;
    gap:18px!important;
    width:100%!important;
    min-width:0!important;
    margin:0 0 26px!important;
  }

  #events .annual-action-section .annual-action-head > div,
  #events .annual-section-head.annual-action-head > div{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  #events .annual-action-head h3{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    writing-mode:horizontal-tb!important;
    white-space:normal!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    line-height:1.35!important;
    font-size:18px!important;
    letter-spacing:-.02em!important;
    margin:0 0 12px!important;
    padding-left:16px!important;
  }

  #events .annual-action-head h3::before{
    top:.15em!important;
    height:1.2em!important;
  }

  #events .annual-action-head .muted{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    writing-mode:horizontal-tb!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    line-height:1.7!important;
    font-size:12px!important;
    margin:0!important;
  }

  #events .annual-calendar-tools{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
    justify-content:stretch!important;
    align-items:stretch!important;
  }

  #events .annual-view-switch{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }

  #events .annual-view-switch button{
    flex:1 1 0!important;
    min-width:0!important;
    height:40px!important;
    white-space:nowrap!important;
  }

  #events .annual-calendar-legend{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    flex-wrap:wrap!important;
    gap:10px 14px!important;
    align-items:center!important;
  }

  #events .annual-calendar-legend span{
    display:inline-flex!important;
    align-items:center!important;
    gap:6px!important;
    white-space:nowrap!important;
    font-size:11px!important;
  }
}

/* Ver display */
.side-note span::before{content:"Ver\A 5.12"!important;white-space:pre!important;}
.side-note span{font-size:0!important;}


/* =========================================================
   Ver 5.11: ToDo mobile compact list fix
   スマホでは横スクロールをやめ、タスク名中心の2列表示にする。
========================================================= */
@media (max-width: 768px){
  #todo,
  #todo *{
    box-sizing:border-box!important;
  }

  #todo .todo-tabs{
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
    display:flex!important;
    gap:0!important;
  }

  #todo .todo-tabs button{
    flex:0 0 auto!important;
    min-width:96px!important;
  }

  #todo .todo-table{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    margin:0!important;
  }

  #todo .todo-table-head,
  #todo .todo-row{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:52px minmax(0, 1fr)!important;
    column-gap:0!important;
  }

  #todo .todo-table-head{
    height:60px!important;
    min-height:60px!important;
  }

  #todo .todo-table-head > span:nth-child(1){
    display:block!important;
    padding:0!important;
  }

  #todo .todo-table-head > span:nth-child(2){
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:0 16px!important;
  }

  #todo .todo-table-head > span:nth-child(3),
  #todo .todo-table-head > span:nth-child(4),
  #todo .todo-row-bucket,
  #todo .todo-row-due{
    display:none!important;
  }

  #todo .todo-row{
    min-height:62px!important;
    height:auto!important;
    padding:0!important;
    align-items:center!important;
  }

  #todo .todo-row > *{
    min-width:0!important;
  }

  #todo .todo-row .todo-check,
  #todo .todo-row > button.todo-check{
    justify-self:center!important;
    align-self:center!important;
  }

  #todo .todo-row-title{
    display:block!important;
    min-width:0!important;
    width:100%!important;
    padding:18px 16px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    line-height:1.55!important;
    font-size:14px!important;
    font-weight:800!important;
  }

  #todo .todo-table-foot,
  #todo .todo-list-footer{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    margin-top:18px!important;
    overflow:hidden!important;
  }

  #todo .todo-table-foot > :first-child,
  #todo .todo-list-footer > :first-child{
    grid-column:1!important;
    justify-self:start!important;
    width:100%!important;
  }

  #todo .todo-table-foot .todo-pagination,
  #todo .todo-table-foot .todo-pager,
  #todo .todo-table-foot .pagination,
  #todo .todo-list-footer .todo-pagination,
  #todo .todo-list-footer .todo-pager,
  #todo .todo-list-footer .pagination{
    grid-column:1!important;
    justify-self:center!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
    overflow:hidden!important;
  }

  #todo .todo-table-foot .todo-pagination button,
  #todo .todo-table-foot .todo-pager button,
  #todo .todo-table-foot .pagination button,
  #todo .todo-table-foot .todo-pagination span,
  #todo .todo-list-footer .todo-pagination button,
  #todo .todo-list-footer .todo-pager button,
  #todo .todo-list-footer .pagination button,
  #todo .todo-list-footer .todo-pagination span{
    flex:0 0 auto!important;
  }
}


/* =========================================================
   Ver 5.12: ToDo mobile list refinement
   - 横スクロール撤廃
   - タブを画面内に収める
   - 一覧で期限を表示
   - ドロワー未表示時の固定ボタン露出を防止
========================================================= */
@media (max-width: 768px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .app-shell,
  main.main,
  .page.active,
  #todo,
  #todo .panel,
  #todo .todo-list{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    box-shadow:none!important;
  }

  #todo .todo-tabs{
    display:grid!important;
    grid-template-columns:repeat(5, minmax(0, 1fr))!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:visible!important;
    gap:0!important;
    border-bottom:1px solid #dfe5ee!important;
  }

  #todo .todo-tabs button{
    min-width:0!important;
    width:100%!important;
    max-width:100%!important;
    flex:initial!important;
    padding:0 2px!important;
    height:48px!important;
    font-size:12px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    text-align:center!important;
  }

  #todo .todo-table{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    border:1px solid #e1e6ef!important;
  }

  #todo .todo-table-head,
  #todo .todo-row{
    display:grid!important;
    grid-template-columns:44px minmax(0, 1fr) auto!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  #todo .todo-table-head{
    min-height:52px!important;
    height:52px!important;
  }

  #todo .todo-table-head > span:nth-child(1){
    display:block!important;
  }

  #todo .todo-table-head > span:nth-child(2){
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:0 10px!important;
  }

  #todo .todo-table-head > span:nth-child(3){
    display:none!important;
  }

  #todo .todo-table-head > span:nth-child(4){
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 10px!important;
    color:#64748b!important;
    font-size:11px!important;
    font-weight:900!important;
  }

  #todo .todo-row{
    min-height:72px!important;
    height:auto!important;
    align-items:center!important;
    padding:0!important;
    border-bottom:1px solid #eef2f7!important;
    cursor:pointer!important;
  }

  #todo .todo-row-bucket{
    display:none!important;
  }

  #todo .todo-row-title{
    grid-column:2!important;
    min-width:0!important;
    width:100%!important;
    padding:16px 10px!important;
    font-size:14px!important;
    font-weight:850!important;
    line-height:1.55!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }

  #todo .todo-row-due{
    grid-column:3!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:74px!important;
    max-width:92px!important;
    margin-right:10px!important;
    padding:5px 7px!important;
    border:1px solid rgba(190,137,43,.28)!important;
    background:#fffaf0!important;
    color:#be892b!important;
    font-size:11px!important;
    font-weight:900!important;
    line-height:1.15!important;
    white-space:normal!important;
    text-align:center!important;
  }

  #todo .todo-row-due.unset{
    border-color:#e5e7eb!important;
    background:#f8fafc!important;
    color:#64748b!important;
  }

  #todo .todo-empty{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding:28px 18px!important;
    text-align:left!important;
    font-size:13px!important;
    font-weight:800!important;
    color:#94a3b8!important;
    border-top:1px solid #eef2f7!important;
  }

  #todo .todo-table-foot{
    width:100%!important;
    max-width:100%!important;
    overflow:hidden!important;
    padding:0!important;
  }

  #todo .todo-pagination{
    width:100%!important;
    max-width:100%!important;
    justify-content:center!important;
    overflow:hidden!important;
  }

  #todo .todo-drawer:not(.open),
  #todo .todo-drawer[aria-hidden="true"]{
    pointer-events:none!important;
  }

  #todo .todo-drawer:not(.open) .todo-drawer-actions,
  #todo .todo-drawer[aria-hidden="true"] .todo-drawer-actions{
    display:none!important;
  }

  #todo .todo-drawer.open .todo-drawer-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    max-width:100%!important;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom))!important;
  }

  #todo .todo-drawer.open #saveTodoDrawerBtn{
    order:1!important;
  }

  #todo .todo-drawer.open #cancelTodoDrawerBtn{
    order:2!important;
  }

  #todo .todo-drawer.open #deleteTodoDrawerBtn{
    order:3!important;
    margin:0!important;
  }
}

.side-note span::before{content:"Ver\A 5.12"!important;white-space:pre!important;}
.side-note span{font-size:0!important;}

/* =========================================================
   Ver 5.13: ToDo mobile drawer layout fix
   - 編集ドロワーが閉じている時の固定ボタン露出を完全に防止
   - スマホ編集画面を画面内に収める
   - 右側余白・影の再発防止
========================================================= */
@media (max-width: 768px){
  html,
  body,
  .app-shell,
  main.main{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body{
    position:relative!important;
  }

  /* ToDo編集ドロワー：閉じている時は完全に画面外＆非表示 */
  .todo-drawer:not(.open),
  .todo-drawer[aria-hidden="true"]{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateX(110%)!important;
  }

  .todo-drawer:not(.open) .todo-drawer-actions,
  .todo-drawer[aria-hidden="true"] .todo-drawer-actions{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .todo-drawer-backdrop:not(.open),
  .todo-drawer-backdrop[aria-hidden="true"]{
    display:none!important;
  }

  /* ToDo編集ドロワー：開いた時はスマホ全幅の編集画面 */
  .todo-drawer.open,
  .todo-drawer[aria-hidden="false"]{
    display:flex!important;
    visibility:visible!important;
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    transform:none!important;
    z-index:10020!important;
    overflow:hidden!important;
    box-shadow:none!important;
    flex-direction:column!important;
  }

  .todo-drawer.open .todo-drawer-head,
  .todo-drawer[aria-hidden="false"] .todo-drawer-head{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:16px!important;
    width:100%!important;
    padding:24px 20px 18px!important;
    border-bottom:1px solid #e5eaf2!important;
  }

  .todo-drawer.open .todo-drawer-head h3,
  .todo-drawer[aria-hidden="false"] .todo-drawer-head h3{
    font-size:22px!important;
    line-height:1.35!important;
    margin:0!important;
    white-space:normal!important;
  }

  .todo-drawer.open .todo-drawer-close,
  .todo-drawer[aria-hidden="false"] .todo-drawer-close{
    flex:0 0 42px!important;
    width:42px!important;
    height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  .todo-drawer.open .todo-drawer-body,
  .todo-drawer[aria-hidden="false"] .todo-drawer-body{
    flex:1 1 auto!important;
    width:100%!important;
    max-width:100%!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:22px 20px 132px!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .todo-drawer.open .todo-edit-section,
  .todo-drawer[aria-hidden="false"] .todo-edit-section{
    width:100%!important;
    max-width:100%!important;
    padding:0 0 24px!important;
    margin:0 0 24px!important;
    border-bottom:1px solid #edf1f6!important;
  }

  .todo-drawer.open .todo-drawer-grid,
  .todo-drawer[aria-hidden="false"] .todo-drawer-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    width:100%!important;
    max-width:100%!important;
  }

  .todo-drawer.open .todo-drawer-field,
  .todo-drawer[aria-hidden="false"] .todo-drawer-field{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }

  .todo-drawer.open .todo-drawer-field input,
  .todo-drawer.open .todo-drawer-field select,
  .todo-drawer.open .todo-drawer-field textarea,
  .todo-drawer.open .todo-drawer-custom-select-button,
  .todo-drawer[aria-hidden="false"] .todo-drawer-field input,
  .todo-drawer[aria-hidden="false"] .todo-drawer-field select,
  .todo-drawer[aria-hidden="false"] .todo-drawer-field textarea,
  .todo-drawer[aria-hidden="false"] .todo-drawer-custom-select-button{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .todo-drawer.open .todo-drawer-actions,
  .todo-drawer[aria-hidden="false"] .todo-drawer-actions{
    display:grid!important;
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.96)!important;
    border-top:1px solid #e5eaf2!important;
    box-shadow:0 -12px 32px rgba(15,23,42,.08)!important;
    z-index:10030!important;
  }

  .todo-drawer.open .todo-drawer-actions button,
  .todo-drawer[aria-hidden="false"] .todo-drawer-actions button{
    width:100%!important;
    max-width:100%!important;
    height:48px!important;
    margin:0!important;
  }

  .todo-drawer.open #saveTodoDrawerBtn,
  .todo-drawer[aria-hidden="false"] #saveTodoDrawerBtn{order:1!important;}
  .todo-drawer.open #cancelTodoDrawerBtn,
  .todo-drawer[aria-hidden="false"] #cancelTodoDrawerBtn{order:2!important;}
  .todo-drawer.open #deleteTodoDrawerBtn,
  .todo-drawer[aria-hidden="false"] #deleteTodoDrawerBtn{order:3!important;}
}

.side-note span::before{content:"Ver\A 5.13"!important;white-space:pre!important;}
.side-note span{font-size:0!important;}

/* =========================================================
   Ver 5.14: ToDo drawer width + action row fix
   - #todo 固有指定に負けていたスマホ編集画面を再整理
   - 編集画面を画面幅内に固定
   - 保存/キャンセル/削除を横一列に配置
========================================================= */
@media (max-width: 768px){
  body.todo-drawer-open{
    overflow:hidden!important;
  }

  #todo #todoDrawer.todo-drawer:not(.open),
  #todo #todoDrawer.todo-drawer[aria-hidden="true"]{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:translateX(110%)!important;
  }

  #todo #todoDrawer.todo-drawer.open,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"]{
    display:flex!important;
    visibility:visible!important;
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:auto!important;
    bottom:auto!important;
    inset:0 auto auto 0!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    transform:none!important;
    transition:none!important;
    z-index:10020!important;
    overflow:hidden!important;
    box-shadow:none!important;
    box-sizing:border-box!important;
    flex-direction:column!important;
  }

  #todo #todoDrawer.todo-drawer.open *,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] *{
    box-sizing:border-box!important;
    max-width:100%!important;
  }

  #todo #todoDrawer.todo-drawer.open .todo-drawer-head,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-head{
    flex:0 0 auto!important;
    width:100%!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:14px!important;
    padding:22px 18px 16px!important;
    border-bottom:1px solid #e5eaf2!important;
  }

  #todo #todoDrawer.todo-drawer.open .todo-drawer-body,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-body{
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:22px 18px 92px!important;
    -webkit-overflow-scrolling:touch!important;
  }

  #todo #todoDrawer.todo-drawer.open .todo-drawer-grid,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    width:100%!important;
    min-width:0!important;
  }

  #todo #todoDrawer.todo-drawer.open .todo-drawer-field,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-field,
  #todo #todoDrawer.todo-drawer.open .todo-time-mode-block,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-time-mode-block{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }

  #todo #todoDrawer.todo-drawer.open input,
  #todo #todoDrawer.todo-drawer.open select,
  #todo #todoDrawer.todo-drawer.open textarea,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] input,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] select,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] textarea{
    width:100%!important;
    min-width:0!important;
  }

  #todo #todoDrawer.todo-drawer.open .todo-drawer-actions,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-actions{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    max-width:100vw!important;
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
    gap:8px!important;
    align-items:center!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid #e5eaf2!important;
    box-shadow:0 -10px 28px rgba(15,23,42,.08)!important;
    z-index:10030!important;
  }

  #todo #todoDrawer.todo-drawer.open .todo-drawer-actions button,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-actions button{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:0 6px!important;
    font-size:13px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }

  #todo #todoDrawer.todo-drawer.open #saveTodoDrawerBtn,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] #saveTodoDrawerBtn{order:1!important;}
  #todo #todoDrawer.todo-drawer.open #cancelTodoDrawerBtn,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] #cancelTodoDrawerBtn{order:2!important;}
  #todo #todoDrawer.todo-drawer.open #deleteTodoDrawerBtn,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] #deleteTodoDrawerBtn{
    order:3!important;
    margin:0!important;
  }
}

.side-note span::before{content:"Ver\A 5.14"!important;white-space:pre!important;}
.side-note span{font-size:0!important;}

/* =========================================================
   Ver 5.15: ToDo drawer action buttons definitive mobile fix
   - 保存/キャンセル/削除を横一列に固定
   - 編集画面と下部ボタンを画面幅内に固定
   - 過去の grid/縦積み指定を完全に上書き
========================================================= */
@media (max-width: 768px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body.todo-drawer-open{
    overflow:hidden!important;
    touch-action:none!important;
  }

  #todoDrawer.todo-drawer.open,
  #todoDrawer.todo-drawer[aria-hidden="false"],
  #todo #todoDrawer.todo-drawer.open,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"]{
    position:fixed!important;
    inset:0!important;
    left:0!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    display:flex!important;
    flex-direction:column!important;
    width:100dvw!important;
    min-width:100dvw!important;
    max-width:100dvw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    transform:none!important;
    overflow:hidden!important;
    box-shadow:none!important;
    background:#fff!important;
    box-sizing:border-box!important;
  }

  #todoDrawer.todo-drawer.open .todo-drawer-head,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-head,
  #todo #todoDrawer.todo-drawer.open .todo-drawer-head,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-head{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:22px 18px 16px!important;
    box-sizing:border-box!important;
  }

  #todoDrawer.todo-drawer.open .todo-drawer-body,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-body,
  #todo #todoDrawer.todo-drawer.open .todo-drawer-body,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-body{
    flex:1 1 auto!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    padding:22px 18px 92px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  #todoDrawer.todo-drawer.open .todo-drawer-grid,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-grid,
  #todo #todoDrawer.todo-drawer.open .todo-drawer-grid,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:16px!important;
  }

  #todoDrawer.todo-drawer.open .todo-drawer-actions,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-actions,
  #todo #todoDrawer.todo-drawer.open .todo-drawer-actions,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-actions{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:stretch!important;
    justify-content:space-between!important;
    gap:8px!important;
    width:100dvw!important;
    min-width:100dvw!important;
    max-width:100dvw!important;
    height:auto!important;
    margin:0!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid #e5eaf2!important;
    box-shadow:0 -10px 28px rgba(15,23,42,.08)!important;
    box-sizing:border-box!important;
    z-index:10030!important;
  }

  #todoDrawer.todo-drawer.open .todo-drawer-actions > button,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-actions > button,
  #todo #todoDrawer.todo-drawer.open .todo-drawer-actions > button,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-actions > button{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:0 4px!important;
    font-size:12px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }

  #todoDrawer.todo-drawer.open #saveTodoDrawerBtn,
  #todoDrawer.todo-drawer[aria-hidden="false"] #saveTodoDrawerBtn,
  #todo #todoDrawer.todo-drawer.open #saveTodoDrawerBtn,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] #saveTodoDrawerBtn{order:1!important;}

  #todoDrawer.todo-drawer.open #cancelTodoDrawerBtn,
  #todoDrawer.todo-drawer[aria-hidden="false"] #cancelTodoDrawerBtn,
  #todo #todoDrawer.todo-drawer.open #cancelTodoDrawerBtn,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] #cancelTodoDrawerBtn{order:2!important;}

  #todoDrawer.todo-drawer.open #deleteTodoDrawerBtn,
  #todoDrawer.todo-drawer[aria-hidden="false"] #deleteTodoDrawerBtn,
  #todo #todoDrawer.todo-drawer.open #deleteTodoDrawerBtn,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] #deleteTodoDrawerBtn{order:3!important;}
}

.side-note span::before{content:"Ver\A 5.15"!important;white-space:pre!important;}
.side-note span{font-size:0!important;}

/* =========================================================
   Ver5.16 ToDo Drawer bottom actions overlap fix
   - 下部ボタンをfixedではなくドロワー内の通常フッターに戻す
   - 本文スクロールとボタンが重ならないようにする
========================================================= */
@media (max-width: 768px){
  #todoDrawer.todo-drawer.open,
  #todoDrawer.todo-drawer[aria-hidden="false"],
  #todo #todoDrawer.todo-drawer.open,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"]{
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
  }

  #todoDrawer.todo-drawer.open .todo-drawer-body,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-body,
  #todo #todoDrawer.todo-drawer.open .todo-drawer-body,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-body{
    flex:1 1 auto!important;
    min-height:0!important;
    padding:22px 18px 24px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }

  #todoDrawer.todo-drawer.open .todo-drawer-actions,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-actions,
  #todo #todoDrawer.todo-drawer.open .todo-drawer-actions,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-actions{
    position:static!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    flex:0 0 auto!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    margin:0!important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important;
    background:#fff!important;
    border-top:1px solid #e5eaf2!important;
    box-shadow:0 -8px 22px rgba(15,23,42,.06)!important;
    box-sizing:border-box!important;
    z-index:1!important;
  }

  #todoDrawer.todo-drawer.open .todo-drawer-actions > button,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-actions > button,
  #todo #todoDrawer.todo-drawer.open .todo-drawer-actions > button,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-actions > button{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:0 4px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
    box-sizing:border-box!important;
  }
}

.side-note span::before{content:"Ver\A 5.16"!important;white-space:pre!important;}

/* =========================================================
   Ver5.18 ToDo Drawer time field spacing fix
   - 開始/終了時刻のラベル＋入力欄が次のステータス欄に重ならないように修正
   - スマホでは時間入力ブロックの高さ固定を解除して自然な高さにする
========================================================= */
@media (max-width: 768px){
  #todoDrawer.todo-drawer.open .todo-drawer-grid,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-grid,
  #todo #todoDrawer.todo-drawer.open .todo-drawer-grid,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important;
    align-items:start!important;
  }

  #todoDrawer.todo-drawer.open .todo-time-mode-block,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-time-mode-block,
  #todo #todoDrawer.todo-drawer.open .todo-time-mode-block,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-time-mode-block{
    display:grid!important;
    grid-template-rows:auto auto auto!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow:visible!important;
  }

  #todoDrawer.todo-drawer.open .todo-time-inputs,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-time-inputs,
  #todo #todoDrawer.todo-drawer.open .todo-time-inputs,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-time-inputs{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:12px!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  #todoDrawer.todo-drawer.open .todo-time-inputs[hidden],
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-time-inputs[hidden],
  #todo #todoDrawer.todo-drawer.open .todo-time-inputs[hidden],
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-time-inputs[hidden]{
    display:none!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
  }

  #todoDrawer.todo-drawer.open .todo-time-inputs label,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-time-inputs label,
  #todo #todoDrawer.todo-drawer.open .todo-time-inputs label,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-time-inputs label{
    display:grid!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  #todoDrawer.todo-drawer.open .todo-time-inputs input,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-time-inputs input,
  #todo #todoDrawer.todo-drawer.open .todo-time-inputs input,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-time-inputs input{
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    max-height:42px!important;
  }

  #todoDrawer.todo-drawer.open .todo-drawer-field,
  #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-field,
  #todo #todoDrawer.todo-drawer.open .todo-drawer-field,
  #todo #todoDrawer.todo-drawer[aria-hidden="false"] .todo-drawer-field{
    margin:0!important;
  }
}

.side-note span::before{content:"Ver\A 5.18"!important;white-space:pre!important;}
.side-note span{font-size:0!important;}

/* =========================================================
   Ver 5.18: Finance mobile UI cleanup
   月別カテゴリー収支タブ、収支サマリー、収支入力の選択UIをスマホ向けに整理。
========================================================= */
#finance .finance-custom-select{
  display:none;
  position:relative;
  width:100%;
}
#finance .finance-custom-select-btn{
  width:100%;
  height:42px;
  min-height:42px;
  padding:0 14px;
  border:1px solid var(--finance-border);
  border-radius:0;
  background:#fff;
  color:var(--finance-navy);
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
  font-weight:900;
}
#finance .finance-custom-select-btn i{
  width:7px;
  height:7px;
  border-right:2px solid var(--finance-navy);
  border-bottom:2px solid var(--finance-navy);
  transform:rotate(45deg) translateY(-2px);
}
#finance .finance-custom-select-menu{
  position:absolute;
  z-index:40;
  left:0;
  right:0;
  top:calc(100% + 6px);
  border:1px solid var(--finance-border);
  background:#fff;
  box-shadow:0 18px 34px rgba(15,23,42,.12);
  max-height:220px;
  overflow:auto;
}
#finance .finance-custom-select-menu button{
  width:100%;
  height:42px;
  min-height:42px;
  padding:0 14px;
  border:0;
  border-bottom:1px solid var(--finance-line);
  border-radius:0;
  background:#fff;
  color:var(--finance-navy);
  box-shadow:none;
  text-align:left;
  font-size:13px;
  font-weight:900;
}
#finance .finance-custom-select-menu button:last-child{border-bottom:0;}
#finance .finance-custom-select-menu button.active{background:#f7f8fb;color:var(--finance-gold);}

@media (max-width: 768px){
  #finance .finance-section-head{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:14px!important;
  }
  #finance .finance-section-head h3{
    font-size:18px!important;
    line-height:1.35!important;
    margin-bottom:6px!important;
  }
  #finance .finance-section-head p{
    font-size:12px!important;
    line-height:1.6!important;
  }

  #finance .finance-view-switch{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3, 1fr)!important;
    border:1px solid var(--finance-border)!important;
    overflow:hidden!important;
  }
  #finance .finance-view-switch button{
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    border-right:1px solid var(--finance-border)!important;
    font-size:14px!important;
  }
  #finance .finance-view-switch button.active{
    background:var(--finance-navy)!important;
    color:#fff!important;
    box-shadow:inset 0 0 0 2px var(--finance-gold)!important;
  }

  #finance .finance-chart-frame,
  #finance .finance-chart-frame.small{
    width:100%!important;
    height:260px!important;
    min-height:260px!important;
    padding:12px!important;
    overflow:hidden!important;
  }
  #finance .finance-chart-frame canvas{
    display:block!important;
    width:100%!important;
    height:100%!important;
  }

  #finance .finance-entry-form{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
    padding:16px!important;
  }
  #finance .finance-entry-form .memo,
  #finance .finance-entry-actions{
    grid-column:auto!important;
  }
  #finance .finance-entry-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    height:auto!important;
    min-height:0!important;
    gap:10px!important;
  }
  #finance .finance-entry-actions button{
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
  }
  #finance .finance-entry-form select{
    display:none!important;
  }
  #finance .finance-custom-select{
    display:block!important;
  }

  #finance .finance-matrix-wrap,
  #finance .finance-history-table-wrap{
    max-width:100%!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}


/* =========================================================
   Ver 5.19: Finance select/button state cleanup
   - active tab shadow removed
   - daily finance custom select stays white until menu opens
========================================================= */
#finance .finance-view-switch button.active{
  box-shadow:none!important;
}
@media (max-width: 768px){
  #finance .finance-view-switch button.active{
    box-shadow:none!important;
  }

  /* .finance-entry-form button のネイビー指定が独自セレクトに当たる問題を防ぐ */
  #finance .finance-entry-form .finance-custom-select-btn{
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 14px!important;
    border:1px solid var(--finance-border)!important;
    background:#fff!important;
    color:var(--finance-navy)!important;
    box-shadow:none!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    text-align:left!important;
  }
  #finance .finance-entry-form .finance-custom-select-btn[aria-expanded="true"]{
    border-color:var(--finance-gold)!important;
    background:#fff!important;
    color:var(--finance-navy)!important;
    box-shadow:none!important;
  }
  #finance .finance-entry-form .finance-custom-select-btn i{
    border-right:2px solid var(--finance-navy)!important;
    border-bottom:2px solid var(--finance-navy)!important;
  }
  #finance .finance-entry-form .finance-custom-select-menu{
    box-shadow:none!important;
  }
  #finance .finance-entry-form .finance-custom-select-menu button{
    background:#fff!important;
    color:var(--finance-navy)!important;
    box-shadow:none!important;
  }
  #finance .finance-entry-form .finance-custom-select-menu button.active{
    background:#f7f8fb!important;
    color:var(--finance-gold)!important;
    box-shadow:none!important;
  }
}
.side-note span::before{content:"Ver 5.19";font-size:16px;}

/* =====================================================
   Ver 5.20: Finance category settings and typed matrix
===================================================== */
.finance-category-settings-panel{
  margin-top:28px!important;
}
.finance-category-add-row{
  display:grid!important;
  grid-template-columns:1fr 140px 120px!important;
  gap:12px!important;
  margin-bottom:18px!important;
}
.finance-category-add-row input,
.finance-category-type-button{
  height:44px!important;
  border:1px solid #dfe5ec!important;
  border-radius:0!important;
  padding:0 14px!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:13px!important;
  font-weight:800!important;
  box-shadow:none!important;
  width:100%!important;
  text-align:left!important;
}
.finance-category-add-row .primary-btn{
  height:44px!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:#0f172a!important;
  border:1px solid #0f172a!important;
  color:#fff!important;
}

.finance-category-type-select{
  position:relative!important;
  min-width:0!important;
}
.finance-category-type-button{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  cursor:pointer!important;
}
.finance-category-type-button::after{
  content:""!important;
  width:7px!important;
  height:7px!important;
  border-right:2px solid #0f172a!important;
  border-bottom:2px solid #0f172a!important;
  transform:rotate(45deg) translateY(-2px)!important;
  margin-left:12px!important;
}
.finance-category-type-menu{
  display:none!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 6px)!important;
  background:#fff!important;
  border:1px solid #dfe5ec!important;
  z-index:80!important;
  box-shadow:0 18px 40px rgba(15,23,42,.12)!important;
}
.finance-category-type-menu.open{
  display:grid!important;
}
.finance-category-type-menu button{
  height:42px!important;
  border:0!important;
  border-bottom:1px solid #edf1f5!important;
  background:#fff!important;
  color:#0f172a!important;
  font-size:13px!important;
  font-weight:900!important;
  text-align:left!important;
  padding:0 14px!important;
  box-shadow:none!important;
  cursor:pointer!important;
}
.finance-category-type-menu button:last-child{border-bottom:0!important;}
.finance-category-type-menu button:hover{background:#f8fafc!important;}

.finance-category-list{
  display:grid!important;
  gap:10px!important;
}
.finance-category-item{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:12px!important;
  align-items:center!important;
  padding:12px 0!important;
  border-top:1px solid #edf1f5!important;
}
.finance-category-item:last-child{
  border-bottom:1px solid #edf1f5!important;
}
.finance-category-main{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  min-width:0!important;
}
.finance-category-main strong{
  font-size:14px!important;
  color:#0f172a!important;
  font-weight:900!important;
}
.finance-category-main span{
  display:inline-flex!important;
  align-items:center!important;
  height:24px!important;
  padding:0 8px!important;
  border:1px solid #dfe5ec!important;
  color:#64748b!important;
  font-size:11px!important;
  font-weight:900!important;
}
.finance-category-item.income .finance-category-main span{
  border-color:rgba(200,161,90,.35)!important;
  color:#9a6c20!important;
}
.finance-category-actions{
  display:flex!important;
  gap:6px!important;
  align-items:center!important;
}
.finance-category-actions button{
  height:32px!important;
  min-width:36px!important;
  padding:0 10px!important;
  border:1px solid #dfe5ec!important;
  background:#fff!important;
  color:#0f172a!important;
  border-radius:0!important;
  box-shadow:none!important;
  font-size:12px!important;
  font-weight:900!important;
}
.finance-category-actions button:disabled{
  opacity:.35!important;
}
.finance-category-actions .danger{
  color:#b42318!important;
  border-color:#f1c7c2!important;
}
.finance-matrix-table .finance-group-row th{
  background:#f8fafc!important;
  color:#c8a15a!important;
  letter-spacing:.12em!important;
  font-size:11px!important;
  text-align:left!important;
  border-top:2px solid #e8edf3!important;
}
@media (max-width:768px){
  .finance-category-add-row{
    grid-template-columns:1fr!important;
  }
  .finance-category-item{
    grid-template-columns:1fr!important;
  }
  .finance-category-actions{
    display:grid!important;
    grid-template-columns:44px 44px 1fr 44px!important;
    width:100%!important;
  }
  .finance-category-actions button{
    width:100%!important;
  }
}
.side-note span::before{content:"Ver 5.22"!important;font-size:16px;}


/* =====================================================
   Ver 5.23: Finance entry custom select + Trader rule mobile balance
   - 日々の収支入力のselectを全幅で独自UIに統一
   - ルール分析のスマホ表示を1列/縦積みに整理
===================================================== */
#finance .finance-entry-form select#financeEntryCategory,
#finance .finance-entry-form select#financeEntryType{
  display:none!important;
}
#finance .finance-entry-form .finance-custom-select{
  display:block!important;
  position:relative!important;
  width:100%!important;
}
#finance .finance-entry-form .finance-custom-select-btn{
  width:100%!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 14px!important;
  border:1px solid var(--finance-border)!important;
  border-radius:0!important;
  background:#fff!important;
  color:var(--finance-navy)!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  text-align:left!important;
  font-size:13px!important;
  font-weight:900!important;
}
#finance .finance-entry-form .finance-custom-select-btn[aria-expanded="true"]{
  border-color:var(--finance-gold)!important;
  background:#fff!important;
  color:var(--finance-navy)!important;
  box-shadow:none!important;
}
#finance .finance-entry-form .finance-custom-select-menu{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 6px)!important;
  z-index:80!important;
  max-height:220px!important;
  overflow:auto!important;
  border:1px solid var(--finance-border)!important;
  background:#fff!important;
  box-shadow:none!important;
}
#finance .finance-entry-form .finance-custom-select-menu button{
  width:100%!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 14px!important;
  border:0!important;
  border-bottom:1px solid var(--finance-line)!important;
  background:#fff!important;
  color:var(--finance-navy)!important;
  box-shadow:none!important;
  text-align:left!important;
  font-size:13px!important;
  font-weight:900!important;
}
#finance .finance-entry-form .finance-custom-select-menu button.active{
  background:#f7f8fb!important;
  color:var(--finance-gold)!important;
  box-shadow:none!important;
}
#finance .finance-entry-form .finance-custom-select-menu button:last-child{
  border-bottom:0!important;
}

@media (max-width: 768px){
  #trader .trade-review-grid,
  #trader .trade-review-grid.rule-only{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
    width:100%!important;
    max-width:100%!important;
    overflow:visible!important;
  }
  #trader .trade-review-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:16px!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  #trader .trade-review-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    align-items:start!important;
    min-height:0!important;
    padding:14px 0!important;
    border-top:1px solid var(--trader-line)!important;
    font-size:13px!important;
    line-height:1.45!important;
  }
  #trader .trade-review-row:first-child{
    border-top:0!important;
    padding-top:4px!important;
  }
  #trader .trade-review-row span{
    display:block!important;
    width:100%!important;
    color:var(--trader-navy)!important;
    font-size:13px!important;
    font-weight:900!important;
  }
  #trader .trade-review-row strong{
    justify-self:start!important;
    width:100%!important;
    text-align:left!important;
    font-size:15px!important;
    line-height:1.25!important;
    word-break:break-word!important;
  }
  #trader .trade-review-row em{
    display:block!important;
    width:100%!important;
    color:var(--trader-muted)!important;
    font-size:12px!important;
    line-height:1.45!important;
    word-break:keep-all!important;
  }
}

.side-note span::before{content:"Ver 5.23"!important;white-space:normal!important;}
.side-note span{font-size:0!important;}

/* =========================================================
   Ver 5.25: Trader calendar mobile mini month + weekly slide
   スマホでは月間をアイコン式、週次をスライド式の集計表示に変更。
========================================================= */
@media (max-width:768px){
  #trader .trade-calendar-tools{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  #trader .trade-view-switch{
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
  }

  #trader .trade-view-switch button{
    width:auto!important;
    min-width:0!important;
  }

  #trader .trade-calendar-legend{
    gap:14px!important;
    flex-wrap:wrap!important;
  }

  #trader .trade-calendar-nav{
    justify-content:space-between!important;
    gap:10px!important;
    margin:18px 0 14px!important;
  }

  #trader .trade-calendar-nav strong{
    min-width:0!important;
    flex:1!important;
    text-align:center!important;
    font-size:20px!important;
  }

  #trader .trade-cal-grid{
    width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(7, minmax(0,1fr))!important;
    overflow:hidden!important;
  }

  #trader .trade-cal-week{
    height:34px!important;
    font-size:11px!important;
  }

  #trader .trade-cal-day{
    appearance:none!important;
    -webkit-appearance:none!important;
    min-width:0!important;
    min-height:48px!important;
    height:48px!important;
    padding:6px 2px!important;
    border:0!important;
    border-right:1px solid #e6e8ec!important;
    border-bottom:1px solid #e6e8ec!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#0f172a!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:5px!important;
    text-align:center!important;
  }

  #trader .trade-cal-day.muted{
    background:#fbfcfe!important;
  }

  #trader .trade-cal-day.selected{
    background:#f8fafc!important;
    box-shadow:inset 0 -2px 0 #c8a15a!important;
  }

  #trader .trade-cal-day-num{
    margin:0!important;
    font-size:12px!important;
    line-height:1!important;
  }

  #trader .trade-cal-dot{
    width:9px!important;
    height:9px!important;
    border-radius:50%!important;
    display:block!important;
    border:1px solid #cbd5e1!important;
    background:#fff!important;
  }

  #trader .trade-cal-day.win .trade-cal-dot{
    background:#0f172a!important;
    border-color:#0f172a!important;
  }

  #trader .trade-cal-day.loss .trade-cal-dot{
    background:#c8a15a!important;
    border-color:#c8a15a!important;
  }

  #trader .trade-cal-day.flat .trade-cal-dot{
    background:#fff!important;
    border-color:#cbd5e1!important;
  }

  #trader .trade-cal-day .trade-cal-result{
    display:none!important;
  }

  #trader .trade-mobile-selected-detail{
    margin-top:16px!important;
  }

  #trader .trade-mobile-detail,
  #trader .trade-week-slide{
    border-top:1px solid #e6e8ec!important;
    border-bottom:1px solid #e6e8ec!important;
    padding:18px 0!important;
    background:#fff!important;
  }

  #trader .trade-mobile-detail-title,
  #trader .trade-week-slide-range{
    color:#0f172a!important;
    font-size:15px!important;
    font-weight:900!important;
    margin-bottom:14px!important;
  }

  #trader .trade-mobile-metrics{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    border-top:1px solid #eef1f5!important;
  }

  #trader .trade-mobile-metrics div{
    padding:14px 0!important;
    border-bottom:1px solid #eef1f5!important;
    display:grid!important;
    gap:6px!important;
  }

  #trader .trade-mobile-metrics span{
    color:#64748b!important;
    font-size:11px!important;
    font-weight:900!important;
  }

  #trader .trade-mobile-metrics strong{
    color:#0f172a!important;
    font-size:17px!important;
    font-weight:900!important;
  }

  #trader .trade-mobile-detail.loss .trade-mobile-metrics strong:first-child,
  #trader .trade-week-slide.loss .trade-mobile-metrics strong:first-child{
    color:#c8a15a!important;
  }

  #trader .trade-mobile-detail-empty{
    margin:14px 0 0!important;
    padding:16px 0!important;
    border-top:1px solid #e6e8ec!important;
    color:#64748b!important;
    font-size:12px!important;
    font-weight:800!important;
  }

  #trader .trade-week-slide-hint{
    margin:14px 0 0!important;
    color:#64748b!important;
    font-size:11px!important;
    font-weight:800!important;
  }
}

.side-note span::before{content:"Ver 5.25"!important;white-space:normal!important;font-size:16px!important;}


/* =========================================================
   Ver 5.25: Trader calendar mobile refinements
   週次のマイナス表示をゴールドへ、月間はJS側で月曜始まりへ変更。
========================================================= */
@media (max-width:768px){
  #trader .trade-week-slide.loss .trade-mobile-metrics strong,
  #trader .trade-mobile-detail.loss .trade-mobile-metrics strong:first-of-type{
    color:#c8a15a!important;
  }

  #trader .trade-week-slide.win .trade-mobile-metrics strong:first-of-type,
  #trader .trade-mobile-detail.win .trade-mobile-metrics strong:first-of-type{
    color:#0f172a!important;
  }
}

.side-note span::before{content:"Ver 5.25"!important;white-space:normal!important;font-size:16px!important;}

/* =========================================================
   Ver 5.26: Trader calendar PC border/detail fix
   スマホ用変更がPCのボタン枠に影響しないよう、カレンダーセルを明示的に細線へ戻す。
========================================================= */
#trader .trade-cal-grid{
  border-top:1px solid #e6e8ec!important;
  border-left:1px solid #e6e8ec!important;
  background:#fff!important;
}

#trader .trade-cal-day{
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  border-right:1px solid #e6e8ec!important;
  border-bottom:1px solid #e6e8ec!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  font:inherit!important;
  text-align:left!important;
}

#trader .trade-cal-day:focus-visible{
  box-shadow:inset 0 0 0 1px #c8a15a!important;
}

@media (min-width:769px){
  #trader .trade-mobile-selected-detail{
    margin-top:22px!important;
    max-width:620px!important;
  }

  #trader .trade-mobile-detail{
    border-top:1px solid #e6e8ec!important;
    border-bottom:1px solid #e6e8ec!important;
    padding:18px 0!important;
    background:#fff!important;
  }

  #trader .trade-mobile-detail-title{
    color:#0f172a!important;
    font-size:15px!important;
    font-weight:900!important;
    margin-bottom:14px!important;
  }

  #trader .trade-mobile-metrics{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    border-top:1px solid #eef1f5!important;
  }

  #trader .trade-mobile-metrics div{
    padding:14px 14px 10px 0!important;
    border-bottom:1px solid #eef1f5!important;
    display:grid!important;
    gap:6px!important;
  }

  #trader .trade-mobile-metrics span{
    color:#64748b!important;
    font-size:11px!important;
    font-weight:900!important;
  }

  #trader .trade-mobile-metrics strong{
    color:#0f172a!important;
    font-size:17px!important;
    font-weight:900!important;
  }

  #trader .trade-mobile-detail.loss .trade-mobile-metrics div:first-child strong{
    color:#c8a15a!important;
  }
}

.side-note span::before{content:"Ver 5.26"!important;white-space:normal!important;font-size:16px!important;}

/* =========================================================
   Ver 5.27: Trader weekly Monday start + memo review
   週次を月曜始まりへ統一。振り返りで週間/月間メモ一覧と記録遷移を追加。
========================================================= */
#trader .trade-memo-review-head{
  align-items:flex-end;
}

#trader .trade-review-period-controls{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  min-width:280px;
}

#trader .trade-review-mode-switch,
#trader .trade-review-period-nav{
  display:flex;
  align-items:center;
  border:1px solid var(--trader-border);
  background:#fff;
}

#trader .trade-review-mode-switch button,
#trader .trade-review-period-nav button{
  appearance:none;
  border:0;
  border-right:1px solid var(--trader-border);
  background:#fff;
  color:var(--trader-muted);
  min-height:34px;
  padding:0 14px;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:none;
}

#trader .trade-review-mode-switch button:last-child,
#trader .trade-review-period-nav button:last-child{
  border-right:0;
}

#trader .trade-review-mode-switch button.active{
  background:var(--trader-navy);
  color:#fff;
}

#trader .trade-review-period-nav span{
  min-width:170px;
  padding:0 14px;
  color:var(--trader-navy);
  font-size:12px;
  font-weight:900;
  text-align:center;
}

#trader .trade-memo-review-list{
  border-top:1px solid var(--trader-line);
  border-bottom:1px solid var(--trader-line);
}

#trader .trade-memo-week-heading{
  padding:16px 0 8px;
  color:var(--trader-gold);
  font-size:12px;
  font-weight:900;
  border-top:1px solid var(--trader-line);
}

#trader .trade-memo-week-heading:first-child{
  border-top:0;
}

#trader .trade-memo-item{
  appearance:none;
  width:100%;
  display:grid;
  grid-template-columns:180px 150px 1fr;
  gap:14px;
  align-items:start;
  padding:15px 0;
  border:0;
  border-top:1px solid var(--trader-line);
  background:#fff;
  text-align:left;
  cursor:pointer;
  box-shadow:none;
}

#trader .trade-memo-week-heading + .trade-memo-item,
#trader .trade-memo-item:first-child{
  border-top:0;
}

#trader .trade-memo-item:hover{
  background:#fafafa;
}

#trader .trade-memo-meta{
  color:var(--trader-navy);
  font-size:12px;
  font-weight:900;
}

#trader .trade-memo-item strong{
  font-size:12px;
  font-weight:900;
  color:var(--trader-navy);
}

#trader .trade-memo-item em{
  color:var(--trader-muted);
  font-size:12px;
  font-style:normal;
  font-weight:800;
  line-height:1.6;
}

#trader .trader-table tr.trade-row-highlight td{
  background:rgba(200,161,90,.14)!important;
}

@media (max-width:768px){
  #trader .trade-memo-review-head{
    align-items:stretch!important;
  }

  #trader .trade-review-period-controls{
    width:100%!important;
    min-width:0!important;
    justify-content:stretch!important;
    gap:10px!important;
  }

  #trader .trade-review-mode-switch,
  #trader .trade-review-period-nav{
    width:100%!important;
  }

  #trader .trade-review-mode-switch button{
    flex:1!important;
  }

  #trader .trade-review-period-nav button{
    width:44px!important;
    flex:0 0 44px!important;
  }

  #trader .trade-review-period-nav span{
    flex:1!important;
    min-width:0!important;
    font-size:12px!important;
  }

  #trader .trade-memo-item{
    grid-template-columns:1fr!important;
    gap:6px!important;
    padding:16px 0!important;
  }

  #trader .trade-memo-meta,
  #trader .trade-memo-item strong,
  #trader .trade-memo-item em{
    font-size:12px!important;
    line-height:1.5!important;
  }
}

.side-note span::before{content:"Ver 5.29"!important;white-space:normal!important;font-size:16px!important;}

/* =====================================================
   Ver 5.28 Trader KPI Settings / Dashboard Link
   ===================================================== */
.dashboard-trade-kpi-grid{
  display:grid;
  margin-bottom:24px;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.dashboard-trade-kpi{
  padding:14px 14px 13px;
  border-right:1px solid var(--line);
  min-width:0;
}
.dashboard-trade-kpi:nth-child(4n){border-right:0;}
.dashboard-trade-kpi span{
  display:block;
  font-size:11px;
  letter-spacing:.12em;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:6px;
}
.dashboard-trade-kpi strong{
  display:block;
  font-size:20px;
  font-weight:500;
  color:var(--ink);
  line-height:1.2;
  white-space:nowrap;
}
.dashboard-trade-kpi em{
  display:block;
  margin-top:5px;
  font-size:11px;
  color:var(--muted);
  font-style:normal;
  white-space:nowrap;
}
.dashboard-trade-kpi.is-good strong{color:var(--navy);}
.dashboard-trade-kpi.is-watch strong{color:var(--gold);}

@media(max-width:768px){
  .dashboard-trade-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .dashboard-trade-kpi,
  .dashboard-trade-kpi:nth-child(4n){
    border-right:1px solid var(--line);
  }
  .dashboard-trade-kpi:nth-child(2n){border-right:0;}
  .dashboard-trade-kpi{
    padding:12px 10px;
  }
  .dashboard-trade-kpi strong{
    font-size:17px;
  }
}


/* =====================================================
   Ver 5.29 Settings save feedback / KPI spacing
   ===================================================== */
#saveSettingsBtn.is-saved{
  background:var(--navy);
  color:#fff;
}
.dashboard-trade-kpi-grid{
  margin-bottom:24px;
}

/* Ver 5.32: Dashboard week schedule uses the same row component as Today Focus */
#dashboard .dashboard-week-item{
  appearance:none!important;
  width:100%!important;
  border:0!important;
  border-bottom:1px solid var(--dash-line)!important;
  background:transparent!important;
  box-shadow:none!important;
  color:inherit!important;
  font:inherit!important;
  text-align:left!important;
}
#dashboard .dashboard-week-item:first-child{
  border-top:1px solid var(--dash-line)!important;
}
#dashboard .dashboard-week-item.is-static{
  cursor:default!important;
}
#dashboard .dashboard-week-item strong{
  font-weight:600!important;
}

/* =====================================================
   Ver 5.33 Finance history mobile list
   ===================================================== */
@media(max-width:768px){
  #finance .finance-history-table-wrap{
    overflow:visible!important;
    border:1px solid var(--line);
    background:#fff;
  }
  #finance .finance-history-table{
    display:block;
    width:100%;
    min-width:0!important;
    table-layout:auto!important;
    border:0!important;
  }
  #finance .finance-history-table thead{
    display:none!important;
  }
  #finance .finance-history-table tbody{
    display:block;
    width:100%;
  }
  #finance .finance-history-table tr{
    display:block;
    width:100%;
    padding:16px 14px;
    border-bottom:1px solid var(--line);
  }
  #finance .finance-history-table tr:last-child{
    border-bottom:0;
  }
  #finance .finance-history-table th,
  #finance .finance-history-table td{
    display:block;
    width:100%;
    border:0!important;
    padding:0!important;
    text-align:left!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }
  #finance .finance-history-table td:nth-child(1){
    font-size:12px;
    font-weight:700;
    color:var(--finance-muted);
    margin-bottom:6px;
  }
  #finance .finance-history-table td:nth-child(2){
    font-size:12px;
    font-weight:700;
    color:var(--finance-muted);
    margin-bottom:8px;
  }
  #finance .finance-history-table td:nth-child(3){
    margin-bottom:8px;
  }
  #finance .finance-history-table td:nth-child(4){
    font-size:20px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:10px;
  }
  #finance .finance-history-table td:nth-child(5){
    font-size:14px;
    font-weight:600;
    line-height:1.7;
    color:var(--ink);
    padding-top:10px!important;
    border-top:1px solid var(--line)!important;
  }
  #finance .finance-history-table td:nth-child(5)::before{
    content:'メモ';
    display:block;
    margin-bottom:4px;
    font-size:11px;
    letter-spacing:.08em;
    color:var(--finance-muted);
  }
  #finance .finance-history-table td:nth-child(5):empty{
    display:none;
  }
  #finance .finance-history-table td:nth-child(6){
    margin-top:12px;
  }
  #finance .finance-row-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
  }
  #finance .finance-row-actions button{
    width:100%;
    min-height:40px;
  }
  #finance .finance-history-table .empty{
    padding:24px 14px!important;
    text-align:center!important;
  }
}

/* =====================================================
   Ver 5.35 Finance history mobile compact list
   ===================================================== */
@media(max-width:768px){
  #finance .finance-history-table-wrap{
    border:1px solid var(--line)!important;
    background:#fff!important;
  }
  #finance .finance-history-table tr{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    column-gap:12px!important;
    row-gap:6px!important;
    padding:14px 12px!important;
    align-items:center!important;
  }
  #finance .finance-history-table td:nth-child(1){
    grid-column:1 / 3!important;
    grid-row:1!important;
    margin:0 0 4px!important;
    font-size:12px!important;
    line-height:1.2!important;
    color:var(--finance-muted)!important;
  }
  #finance .finance-history-table td:nth-child(2){
    grid-column:1 / 2!important;
    grid-row:2!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.4!important;
    font-weight:700!important;
    color:var(--ink)!important;
  }
  #finance .finance-history-table td:nth-child(3){
    grid-column:1 / 2!important;
    grid-row:3!important;
    margin:0!important;
  }
  #finance .finance-history-table td:nth-child(4){
    grid-column:2 / 3!important;
    grid-row:2 / 4!important;
    align-self:center!important;
    margin:0!important;
    font-size:20px!important;
    line-height:1.2!important;
    font-weight:800!important;
    text-align:right!important;
    white-space:nowrap!important;
  }
  #finance .finance-history-table td:nth-child(5){
    grid-column:1 / 3!important;
    grid-row:4!important;
    margin:2px 0 0!important;
    padding:0!important;
    border-top:0!important;
    font-size:13px!important;
    line-height:1.6!important;
    color:var(--finance-muted)!important;
  }
  #finance .finance-history-table td:nth-child(5)::before{
    content:none!important;
  }
  #finance .finance-history-table td:nth-child(5):empty{
    display:none!important;
  }
  #finance .finance-history-table td:nth-child(6){
    grid-column:1 / 3!important;
    grid-row:5!important;
    margin:8px 0 0!important;
  }
  #finance .finance-row-actions{
    display:flex!important;
    justify-content:flex-start!important;
    gap:8px!important;
    width:auto!important;
  }
  #finance .finance-row-actions button{
    width:auto!important;
    min-width:72px!important;
    min-height:34px!important;
    padding:0 12px!important;
  }
  #finance .finance-type{
    display:inline-flex!important;
    align-items:center!important;
    min-height:26px!important;
    padding:0 9px!important;
    font-size:12px!important;
  }
}


/* =====================================================
   Ver 5.35 Finance history mobile row layout refine
   ===================================================== */
@media(max-width:768px){
  #finance .finance-history-table tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    column-gap:12px!important;
    row-gap:8px!important;
    padding:14px 12px!important;
    align-items:center!important;
  }
  /* 日付 + 種別 */
  #finance .finance-history-table td:nth-child(1){
    grid-column:1 / 2!important;
    grid-row:1!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.2!important;
    color:var(--finance-muted)!important;
    font-weight:700!important;
  }
  #finance .finance-history-table td:nth-child(3){
    grid-column:2 / 3!important;
    grid-row:1!important;
    justify-self:end!important;
    margin:0!important;
  }
  /* カテゴリ + 金額 */
  #finance .finance-history-table td:nth-child(2){
    grid-column:1 / 2!important;
    grid-row:2!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.4!important;
    font-weight:700!important;
    color:var(--ink)!important;
    min-width:0!important;
  }
  #finance .finance-history-table td:nth-child(4){
    grid-column:2 / 3!important;
    grid-row:2!important;
    align-self:center!important;
    justify-self:end!important;
    margin:0!important;
    font-size:20px!important;
    line-height:1.2!important;
    font-weight:800!important;
    text-align:right!important;
    white-space:nowrap!important;
  }
  #finance .finance-history-table td:nth-child(5){
    grid-column:1 / 3!important;
    grid-row:3!important;
    margin:2px 0 0!important;
    padding:0!important;
    border-top:0!important;
    font-size:13px!important;
    line-height:1.55!important;
    color:var(--finance-muted)!important;
  }
  #finance .finance-history-table td:nth-child(6){
    grid-column:1 / 3!important;
    grid-row:4!important;
    margin:8px 0 0!important;
  }
}

/* =====================================================
   Ver 5.36 Finance history mobile refined transaction list
   ===================================================== */
@media(max-width:768px){
  #finance .finance-history-table-wrap{
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  #finance .finance-history-table,
  #finance .finance-history-table tbody{
    display:block!important;
    width:100%!important;
    border:0!important;
    background:transparent!important;
  }
  #finance .finance-history-table thead{
    display:none!important;
  }
  #finance .finance-history-table tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "date type"
      "category amount"
      "memo memo"
      "actions actions"!important;
    column-gap:12px!important;
    row-gap:8px!important;
    width:100%!important;
    padding:14px 12px!important;
    margin:0 0 10px!important;
    border:1px solid var(--line)!important;
    border-radius:8px!important;
    background:#fff!important;
    box-shadow:none!important;
    align-items:center!important;
  }
  #finance .finance-history-table tr:last-child{
    margin-bottom:0!important;
  }
  #finance .finance-history-table th,
  #finance .finance-history-table td{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    border:0!important;
    padding:0!important;
    margin:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    background:transparent!important;
  }
  #finance .finance-history-table td:nth-child(1){
    grid-area:date!important;
    font-size:13px!important;
    font-weight:700!important;
    letter-spacing:.03em!important;
    line-height:1.3!important;
    color:var(--muted)!important;
  }
  #finance .finance-history-table td:nth-child(3){
    grid-area:type!important;
    justify-self:end!important;
  }
  #finance .finance-history-table td:nth-child(2){
    grid-area:category!important;
    font-size:17px!important;
    font-weight:800!important;
    line-height:1.35!important;
    color:var(--ink)!important;
  }
  #finance .finance-history-table td:nth-child(4){
    grid-area:amount!important;
    justify-self:end!important;
    text-align:right!important;
    font-size:22px!important;
    font-weight:900!important;
    line-height:1.15!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }
  #finance .finance-history-table td:nth-child(5){
    grid-area:memo!important;
    margin-top:2px!important;
    padding-top:8px!important;
    border-top:1px solid var(--line)!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1.55!important;
    color:var(--muted)!important;
  }
  #finance .finance-history-table td:nth-child(5)::before{
    content:none!important;
  }
  #finance .finance-history-table td:nth-child(5):empty{
    display:none!important;
  }
  #finance .finance-history-table td:nth-child(6){
    grid-area:actions!important;
    margin-top:4px!important;
  }
  #finance .finance-type{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:42px!important;
    min-height:24px!important;
    padding:0 10px!important;
    border:1px solid var(--line)!important;
    border-radius:6px!important;
    background:#f8fafc!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1!important;
  }
  #finance .finance-type.income,
  #finance .finance-type.plus{
    color:var(--navy)!important;
    background:#f3f6fb!important;
  }
  #finance .finance-type.expense,
  #finance .finance-type.minus{
    color:var(--gold)!important;
    background:#fbf8f0!important;
  }
  #finance .finance-history-table .plus{
    color:var(--navy)!important;
  }
  #finance .finance-history-table .minus{
    color:var(--gold)!important;
  }
  #finance .finance-row-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
  }
  #finance .finance-row-actions button{
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    padding:0 10px!important;
    border-radius:0!important;
    font-size:12px!important;
    font-weight:800!important;
  }
  #finance .finance-history-table .empty{
    display:block!important;
    padding:24px 14px!important;
    margin:0!important;
    border:1px solid var(--line)!important;
    background:#fff!important;
    text-align:center!important;
  }
}
.side-note span::before{content:"Ver 5.36"!important;white-space:normal!important;font-size:16px!important;}

/* =====================================================
   Ver 5.37 Finance history mobile final design polish
   ===================================================== */
@media(max-width:768px){
  #finance .finance-history-table-wrap{
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  #finance .finance-history-table,
  #finance .finance-history-table tbody{
    display:block!important;
    width:100%!important;
    border:0!important;
    background:transparent!important;
  }
  #finance .finance-history-table thead{display:none!important;}
  #finance .finance-history-table tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "date type"
      "category amount"
      "memo memo"
      "actions actions"!important;
    column-gap:12px!important;
    row-gap:10px!important;
    width:100%!important;
    padding:14px 12px!important;
    margin:0 0 10px!important;
    border:1px solid var(--line)!important;
    border-radius:8px!important;
    background:#fff!important;
    box-shadow:none!important;
    align-items:center!important;
  }
  #finance .finance-history-table tr:last-child{margin-bottom:0!important;}
  #finance .finance-history-table th,
  #finance .finance-history-table td{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    border:0!important;
    padding:0!important;
    margin:0!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    background:transparent!important;
  }
  #finance .finance-history-table td:nth-child(1){
    grid-area:date!important;
    font-size:13px!important;
    font-weight:800!important;
    letter-spacing:.03em!important;
    line-height:1.2!important;
    color:var(--muted)!important;
  }
  #finance .finance-history-table td:nth-child(3){
    grid-area:type!important;
    justify-self:end!important;
    align-self:start!important;
  }
  #finance .finance-history-table td:nth-child(2){
    grid-area:category!important;
    font-size:18px!important;
    font-weight:800!important;
    line-height:1.35!important;
    color:var(--ink)!important;
  }
  #finance .finance-history-table td:nth-child(4){
    grid-area:amount!important;
    justify-self:end!important;
    align-self:end!important;
    text-align:right!important;
    font-size:24px!important;
    font-weight:900!important;
    line-height:1.15!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }
  #finance .finance-history-table td:nth-child(5){
    grid-area:memo!important;
    margin-top:2px!important;
    padding-top:10px!important;
    border-top:1px solid var(--line)!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1.55!important;
    color:var(--muted)!important;
  }
  #finance .finance-history-table td:nth-child(5)::before{content:none!important;}
  #finance .finance-history-table td:nth-child(5):empty{display:none!important;}
  #finance .finance-history-table td:nth-child(6){grid-area:actions!important;margin-top:2px!important;}
  #finance .finance-type{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:42px!important;
    height:24px!important;
    padding:0 10px!important;
    border:1px solid transparent!important;
    border-radius:6px!important;
    background:#f3f6fb!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1!important;
  }
  #finance .finance-type.income,
  #finance .finance-type.plus{color:var(--navy)!important;background:#eef4ff!important;}
  #finance .finance-type.expense,
  #finance .finance-type.minus{color:var(--gold)!important;background:#fbf5e8!important;}
  #finance .finance-history-table .plus{color:var(--navy)!important;}
  #finance .finance-history-table .minus{color:var(--gold)!important;}
  #finance .finance-row-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
  }
  #finance .finance-row-actions button{
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    padding:0 10px!important;
    border-radius:0!important;
    font-size:12px!important;
    font-weight:800!important;
    background:#fff!important;
  }
  #finance .finance-edit-btn{color:var(--navy)!important;border:1px solid var(--line)!important;}
  #finance .finance-delete-btn{color:var(--gold)!important;border:1px solid rgba(200,161,90,.45)!important;}
  #finance .finance-history-table .empty{
    display:block!important;
    padding:24px 14px!important;
    margin:0!important;
    border:1px solid var(--line)!important;
    background:#fff!important;
    text-align:center!important;
  }
}
.side-note span::before{content:"Ver 5.37"!important;white-space:normal!important;font-size:16px!important;}

/* =====================================================
   Ver 5.38 Finance history mobile definitive layout
   ===================================================== */
@media(max-width:768px){
  #finance .finance-history-table-wrap{
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
  }

  #finance .finance-history-table,
  #finance .finance-history-table tbody{
    display:block!important;
    width:100%!important;
    border:0!important;
    background:transparent!important;
  }

  #finance .finance-history-table thead{
    display:none!important;
  }

  #finance tr.finance-history-card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "date type"
      "category amount"
      "memo memo"
      "actions actions"!important;
    column-gap:14px!important;
    row-gap:12px!important;
    width:100%!important;
    box-sizing:border-box!important;
    padding:14px 12px 16px!important;
    margin:0 0 12px!important;
    border:1px solid var(--line)!important;
    border-radius:8px!important;
    background:#fff!important;
    box-shadow:none!important;
    align-items:center!important;
  }

  #finance tr.finance-history-card:last-child{
    margin-bottom:0!important;
  }

  #finance tr.finance-history-card > td{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    box-sizing:border-box!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
  }

  #finance .finance-history-date{
    grid-area:date!important;
    font-size:13px!important;
    font-weight:800!important;
    line-height:1.2!important;
    letter-spacing:.03em!important;
    color:var(--muted)!important;
  }

  #finance .finance-history-type-cell{
    grid-area:type!important;
    justify-self:end!important;
    align-self:start!important;
  }

  #finance .finance-type{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:24px!important;
    min-width:42px!important;
    padding:0 10px!important;
    border:1px solid transparent!important;
    border-radius:6px!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1!important;
    box-shadow:none!important;
  }

  #finance .finance-type.income,
  #finance .finance-type.plus{
    color:var(--navy)!important;
    background:#eef4ff!important;
  }

  #finance .finance-type.expense,
  #finance .finance-type.minus{
    color:var(--gold)!important;
    background:#fbf5e8!important;
  }

  #finance .finance-history-category{
    grid-area:category!important;
    font-size:18px!important;
    font-weight:900!important;
    line-height:1.35!important;
    color:var(--ink)!important;
  }

  #finance .finance-history-amount{
    grid-area:amount!important;
    justify-self:end!important;
    align-self:end!important;
    text-align:right!important;
    font-size:24px!important;
    font-weight:900!important;
    line-height:1.15!important;
    letter-spacing:.02em!important;
    white-space:nowrap!important;
  }

  #finance .finance-history-amount.plus{
    color:var(--navy)!important;
  }

  #finance .finance-history-amount.minus{
    color:var(--gold)!important;
  }

  #finance .finance-history-memo{
    grid-area:memo!important;
    margin-top:2px!important;
    padding-top:10px!important;
    border-top:1px solid var(--line)!important;
    font-size:13px!important;
    font-weight:600!important;
    line-height:1.55!important;
    color:var(--muted)!important;
  }

  #finance .finance-history-memo:empty{
    display:none!important;
  }

  #finance .finance-history-actions-cell{
    grid-area:actions!important;
    width:100%!important;
    margin-top:2px!important;
  }

  #finance .finance-row-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
  }

  #finance .finance-row-actions button,
  #finance .finance-edit-btn,
  #finance .finance-delete-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    height:38px!important;
    min-height:38px!important;
    padding:0 10px!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1!important;
    text-align:center!important;
  }

  #finance .finance-edit-btn{
    color:var(--navy)!important;
    border:1px solid var(--line)!important;
  }

  #finance .finance-delete-btn{
    color:var(--gold)!important;
    border:1px solid rgba(200,161,90,.45)!important;
  }
}

.side-note span::before{content:"Ver 5.38"!important;white-space:normal!important;font-size:16px!important;}

/* =====================================================
   Ver 5.39 Finance history mobile layout definitive JS/CSS
   ===================================================== */
@media(max-width:768px){
  #finance .finance-history-table-wrap{
    border:0!important;
    background:transparent!important;
    overflow:visible!important;
  }
  #finance .finance-history-table,
  #finance .finance-history-table tbody{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border:0!important;
    background:transparent!important;
  }
  #finance .finance-history-table thead{display:none!important;}

  #finance .finance-history-table tr.finance-history-card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "date type"
      "category amount"
      "memo memo"
      "actions actions"!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    gap:12px 14px!important;
    padding:14px 12px 16px!important;
    margin:0 0 12px!important;
    border:1px solid var(--finance-border, #e6e8ec)!important;
    border-radius:8px!important;
    background:#fff!important;
    box-shadow:none!important;
    align-items:center!important;
  }
  #finance .finance-history-table tr.finance-history-card > td{
    display:block!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    background:transparent!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-date{
    grid-area:date!important;
    color:var(--finance-muted, #64748b)!important;
    font-size:13px!important;
    font-weight:800!important;
    letter-spacing:.03em!important;
    line-height:1.2!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-type-cell{
    grid-area:type!important;
    justify-self:end!important;
    align-self:start!important;
  }
  #finance .finance-history-table .finance-type{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:42px!important;
    height:24px!important;
    padding:0 10px!important;
    border:0!important;
    border-radius:6px!important;
    box-shadow:none!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:1!important;
  }
  #finance .finance-history-table .finance-type.income{
    color:var(--finance-navy, #0f172a)!important;
    background:#eef4ff!important;
  }
  #finance .finance-history-table .finance-type.expense{
    color:var(--finance-gold, #c8a15a)!important;
    background:#fbf5e8!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-category{
    grid-area:category!important;
    color:var(--finance-navy, #0f172a)!important;
    font-size:18px!important;
    font-weight:900!important;
    line-height:1.35!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-amount{
    grid-area:amount!important;
    justify-self:end!important;
    text-align:right!important;
    white-space:nowrap!important;
    color:var(--finance-navy, #0f172a)!important;
    font-size:24px!important;
    font-weight:900!important;
    line-height:1.15!important;
    letter-spacing:.02em!important;
  }
  #finance .finance-history-table tr.finance-history-card.is-expense > td.finance-history-amount,
  #finance .finance-history-table tr.finance-history-card > td.finance-history-amount.minus{
    color:var(--finance-gold, #c8a15a)!important;
  }
  #finance .finance-history-table tr.finance-history-card.is-income > td.finance-history-amount,
  #finance .finance-history-table tr.finance-history-card > td.finance-history-amount.plus{
    color:var(--finance-navy, #0f172a)!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-memo{
    grid-area:memo!important;
    padding-top:10px!important;
    border-top:1px solid var(--finance-line, #eef1f5)!important;
    color:var(--finance-muted, #64748b)!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.55!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-memo:empty{display:none!important;}
  #finance .finance-history-table tr.finance-history-card > td.finance-history-actions-cell{
    grid-area:actions!important;
    width:100%!important;
    min-width:0!important;
  }
  #finance .finance-history-table tr.finance-history-card .finance-row-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
    width:100%!important;
    min-width:0!important;
  }
  #finance .finance-history-table tr.finance-history-card .finance-row-actions > button.finance-edit-btn,
  #finance .finance-history-table tr.finance-history-card .finance-row-actions > button.finance-delete-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:38px!important;
    padding:0 10px!important;
    margin:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    font-size:12px!important;
    font-weight:800!important;
    line-height:1!important;
    text-align:center!important;
  }
  #finance .finance-history-table tr.finance-history-card .finance-edit-btn{
    color:var(--finance-navy, #0f172a)!important;
    border:1px solid var(--finance-border, #e6e8ec)!important;
  }
  #finance .finance-history-table tr.finance-history-card .finance-delete-btn{
    color:var(--finance-gold, #c8a15a)!important;
    border:1px solid rgba(200,161,90,.45)!important;
  }
}
.side-note span::before{content:"Ver 5.39"!important;white-space:normal!important;font-size:16px!important;}

/* =====================================================
   Ver 5.40 Finance history mobile compact spacing
   ===================================================== */
@media(max-width:768px){
  #finance .finance-history-table tr.finance-history-card{
    gap:7px 12px!important;
    padding:10px 12px 12px!important;
    margin:0 0 8px!important;
    border-radius:7px!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-date{
    font-size:12px!important;
    line-height:1.15!important;
  }
  #finance .finance-history-table .finance-type{
    height:22px!important;
    min-width:38px!important;
    padding:0 8px!important;
    border-radius:6px!important;
    font-size:11px!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-category{
    font-size:17px!important;
    line-height:1.2!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-amount{
    font-size:22px!important;
    line-height:1.1!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-memo{
    margin-top:2px!important;
    padding-top:8px!important;
    font-size:12px!important;
    line-height:1.45!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-actions-cell{
    margin-top:2px!important;
  }
  #finance .finance-history-table tr.finance-history-card .finance-row-actions{
    gap:10px!important;
  }
  #finance .finance-history-table tr.finance-history-card .finance-row-actions > button.finance-edit-btn,
  #finance .finance-history-table tr.finance-history-card .finance-row-actions > button.finance-delete-btn{
    height:34px!important;
    min-height:34px!important;
    font-size:12px!important;
  }
}
.side-note span::before{content:"Ver 5.40"!important;white-space:normal!important;font-size:16px!important;}

/* =====================================================
   Ver 5.43 Finance history mobile dense layout
   ===================================================== */
@media(max-width:768px){
  #finance .finance-history-table tr.finance-history-card{
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "date type"
      "category amount"
      "memo memo"
      "actions actions"!important;
    gap:4px 10px!important;
    padding:9px 10px 10px!important;
    margin:0 0 8px!important;
    min-height:0!important;
    align-items:center!important;
  }
  #finance .finance-history-table tr.finance-history-card > td{
    min-height:0!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-date{
    font-size:12px!important;
    line-height:1!important;
  }
  #finance .finance-history-table .finance-type{
    height:20px!important;
    min-width:36px!important;
    padding:0 7px!important;
    font-size:11px!important;
    line-height:1!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-category{
    font-size:16px!important;
    line-height:1.1!important;
    align-self:center!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-amount{
    font-size:21px!important;
    line-height:1!important;
    align-self:center!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-memo{
    margin-top:3px!important;
    padding-top:6px!important;
    border-top:1px solid var(--finance-line, #eef1f5)!important;
    font-size:12px!important;
    line-height:1.35!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-memo:empty{
    display:none!important;
  }
  #finance .finance-history-table tr.finance-history-card > td.finance-history-actions-cell{
    margin-top:4px!important;
  }
  #finance .finance-history-table tr.finance-history-card .finance-row-actions{
    gap:8px!important;
  }
  #finance .finance-history-table tr.finance-history-card .finance-row-actions > button.finance-edit-btn,
  #finance .finance-history-table tr.finance-history-card .finance-row-actions > button.finance-delete-btn{
    height:30px!important;
    min-height:30px!important;
    padding:0 8px!important;
    font-size:11px!important;
  }
}
.side-note span::before{content:"Ver 5.43"!important;white-space:normal!important;font-size:16px!important;}


/* =========================================================
   Ver 5.43: Trader mobile subnav border-bottom fix
   activeの疑似要素はPC版と同じ挙動に戻し、
   スマホで余計に見えていたsubnav本体のborder-bottomのみ削除。
========================================================= */
@media (max-width:768px){
  #trader .trader-subnav{
    border-bottom:0!important;
  }

  #trader .trader-subnav button{
    box-shadow:none!important;
  }

  #trader .trader-subnav button.active{
    color:#0f172a!important;
    background:#fff!important;
  }

  #trader .trader-subnav button::after{
    content:""!important;
    display:block!important;
  }

  #trader .trader-subnav button.active::after{
    background:#c8a15a!important;
  }

  #trader .trader-kpi-strip{
    grid-template-columns:1fr 1fr!important;
  }

  #trader .trader-kpi-strip > div{
    border-right:0!important;
    border-bottom:1px solid var(--trader-border,#e6e8ec)!important;
  }

  #trader .trader-kpi-strip > div:nth-child(1),
  #trader .trader-kpi-strip > div:nth-child(3){
    border-right:1px solid var(--trader-border,#e6e8ec)!important;
  }

  #trader .trader-kpi-strip > div.trader-kpi-average-r{
    grid-column:1 / -1!important;
    border-right:0!important;
    border-bottom:0!important;
    padding-top:16px!important;
    min-height:auto!important;
  }
}


/* =========================================================
   Ver 5.48: Sidebar logout
   ログアウトをサイドバーに追加。通常ナビとは分離し、JSのタブ切替対象外にする。
========================================================= */
.nav-logout{
  display:grid!important;
  grid-template-columns:42px 20px 1fr!important;
  align-items:center!important;
  min-height:62px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#0f172a!important;
  box-shadow:none!important;
  text-align:left!important;
  font-weight:500!important;
  letter-spacing:.01em!important;
  position:relative!important;
  text-decoration:none!important;
  cursor:pointer!important;
}
.nav-logout:hover{
  background:transparent!important;
  color:#c8a15a!important;
}
.nav-logout .nav-no{
  color:#c8a15a!important;
}
.nav-logout .nav-label{
  font-weight:600!important;
}
.app-shell.sidebar-collapsed .nav-logout{
  grid-template-columns:1fr!important;
  justify-items:center!important;
  padding:0!important;
}
.app-shell.sidebar-collapsed .nav-logout .nav-sep,
.app-shell.sidebar-collapsed .nav-logout .nav-label{
  display:none!important;
}
@media screen and (max-width:768px){
  .nav-logout{height:46px!important;padding:0 20px!important;}
  .nav-logout .nav-label{font-size:13px!important;}
}


/* =========================================================
   Ver 5.46: Mobile sidebar full labels
   スマホ版サイドメニューを広げ、番号＋メニュー名を表示。
   09ログアウトも通常メニューと同じ行構造に揃える。
========================================================= */
@media screen and (max-width:768px){
  .sidebar{
    width:304px!important;
    max-width:86vw!important;
    padding:28px 26px!important;
    align-items:stretch!important;
  }

  .brand{
    width:100%!important;
    padding:20px 0 8px!important;
    margin-bottom:42px!important;
    justify-content:flex-start!important;
  }

  .brand-wordmark,
  .app-shell.sidebar-collapsed .brand-wordmark{
    display:grid!important;
    gap:7px!important;
    font-size:13px!important;
    letter-spacing:.32em!important;
    padding:0 44px 0 0!important;
    white-space:normal!important;
  }

  .brand-wordmark span,
  .brand-wordmark span:nth-child(2),
  .app-shell.sidebar-collapsed .brand-wordmark span,
  .app-shell.sidebar-collapsed .brand-wordmark span:nth-child(2){
    display:block!important;
  }

  .nav{
    width:100%!important;
    padding-top:20px!important;
  }

  .nav-item,
  .nav-logout,
  .app-shell.sidebar-collapsed .nav-item,
  .app-shell.sidebar-collapsed .nav-logout{
    display:grid!important;
    grid-template-columns:42px 20px minmax(0,1fr)!important;
    justify-items:stretch!important;
    align-items:center!important;
    width:100%!important;
    min-height:54px!important;
    height:54px!important;
    padding:0!important;
    text-align:left!important;
  }

  .nav-no,
  .nav-item .nav-no,
  .nav-logout .nav-no{
    display:block!important;
    justify-self:start!important;
    font-size:14px!important;
    line-height:1!important;
  }

  .nav-sep,
  .nav-item .nav-sep,
  .nav-logout .nav-sep{
    display:block!important;
    width:1px!important;
    height:20px!important;
    justify-self:center!important;
    background:transparent!important;
  }

  .nav-item.active .nav-sep{
    background:#c8a15a!important;
  }

  .nav-label,
  .nav-item .nav-label,
  .nav-logout .nav-label,
  .app-shell.sidebar-collapsed .nav-label,
  .app-shell.sidebar-collapsed .nav-logout .nav-label{
    display:block!important;
    min-width:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    font-size:14px!important;
    font-weight:600!important;
    color:#0f172a!important;
  }

  .nav-logout{
    margin-top:8px!important;
  }

  .nav-logout .nav-no{
    color:#c8a15a!important;
  }
}

.side-note span::before{content:"Ver 5.46"!important;white-space:normal!important;font-size:16px!important;}

/* =========================================================
   Ver 5.47: ToDo due alignment + Annual weekly sticky axes
   - スマホToDoの期限をPCと同じ左寄せへ統一
   - 年間アクションカレンダー週次は時間列/日付行を固定し、予定部分だけスクロールしやすくする
========================================================= */
@media (max-width: 768px){
  #todo .todo-table-head > span:nth-child(4){
    justify-content:flex-start!important;
    text-align:left!important;
  }

  #todo .todo-row-due{
    justify-content:flex-start!important;
    text-align:left!important;
    align-self:center!important;
  }

  #events .annual-action-calendar{
    overflow:auto!important;
    max-height:68vh!important;
    -webkit-overflow-scrolling:touch!important;
    position:relative!important;
  }

  #events .annual-week-grid{
    min-width:980px!important;
    width:max-content!important;
    position:relative!important;
  }

  #events .annual-week-time-head{
    position:sticky!important;
    top:0!important;
    left:0!important;
    z-index:6!important;
    background:#fff!important;
  }

  #events .annual-week-day-head{
    position:sticky!important;
    top:0!important;
    z-index:5!important;
    background:#fff!important;
  }

  #events .annual-week-hour{
    position:sticky!important;
    left:0!important;
    z-index:4!important;
    background:#fbfcfe!important;
  }

  #events .annual-week-cell{
    min-width:120px!important;
  }
}

.side-note span::before{content:"Ver 5.47"!important;white-space:normal!important;font-size:16px!important;}


/* =========================================================
   Ver 5.48: Mobile left-edge menu rail
   スマホ時のみ、左上ボタンではなく左端の細い縦バーで開閉する。
========================================================= */
@media screen and (max-width:768px){
  .mobile-rail-toggle{
    position:fixed!important;
    left:0!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:3600!important;
    width:10px!important;
    height:42vh!important;
    min-height:180px!important;
    max-height:360px!important;
    display:block!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    border-radius:0 999px 999px 0!important;
    background:#c8a15a!important;
    box-shadow:6px 0 18px rgba(15,23,42,.10)!important;
    cursor:pointer!important;
    opacity:.92!important;
  }

  .mobile-rail-toggle span{
    display:none!important;
  }

  .mobile-rail-toggle::before{
    content:""!important;
    position:absolute!important;
    left:3px!important;
    top:18px!important;
    bottom:18px!important;
    width:2px!important;
    background:rgba(255,255,255,.72)!important;
  }

  /* メニュー展開中はサイドバー内のUIを優先し、バーは非表示 */
  .app-shell:not(.sidebar-collapsed) .mobile-rail-toggle{
    opacity:0!important;
    pointer-events:none!important;
  }
}


/* =========================================================
   Ver 5.49: Bucket List mobile table right whitespace fix
   スマホで横スクロール時、ステータス右側に余白が出る問題を修正
========================================================= */
@media (max-width: 768px){
  #bucket .bucket-table-wrap{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    width:100%!important;
  }

  #bucket .bucket-table{
    display:table!important;
    width:max-content!important;
    min-width:720px!important;
    table-layout:auto!important;
    border-collapse:collapse!important;
  }

  #bucket .bucket-row{
    min-width:0!important;
  }

  #bucket .bucket-table th,
  #bucket .bucket-table td{
    padding:14px 12px!important;
    white-space:nowrap!important;
  }

  #bucket .bucket-table th:nth-child(1),
  #bucket .bucket-table td:nth-child(1){width:40px!important;min-width:40px!important;}
  #bucket .bucket-table th:nth-child(2),
  #bucket .bucket-table td:nth-child(2){width:54px!important;min-width:54px!important;}
  #bucket .bucket-table th:nth-child(3),
  #bucket .bucket-table td:nth-child(3){width:210px!important;min-width:210px!important;}
  #bucket .bucket-table th:nth-child(4),
  #bucket .bucket-table td:nth-child(4){width:150px!important;min-width:150px!important;}
  #bucket .bucket-table th:nth-child(5),
  #bucket .bucket-table td:nth-child(5){width:98px!important;min-width:98px!important;}
  #bucket .bucket-table th:nth-child(6),
  #bucket .bucket-table td:nth-child(6){width:118px!important;min-width:118px!important;}
  #bucket .bucket-table th:nth-child(7),
  #bucket .bucket-table td:nth-child(7){width:96px!important;min-width:96px!important;padding-right:12px!important;}
}

/* =========================================================
   Ver 5.67: ToDo drawer field spacing unified
   タスク名・期限・カテゴリ・メモの余白を15pxに統一。
========================================================= */
#todo #todoDrawer .todo-edit-section > .todo-title-field,
#todoDrawer .todo-edit-section > .todo-title-field,
#todo #todoDrawer label.todo-drawer-field.todo-title-field,
#todoDrawer label.todo-drawer-field.todo-title-field{
  margin-bottom:15px!important;
}

#todo #todoDrawer .todo-edit-section > .todo-title-field + .todo-drawer-grid,
#todoDrawer .todo-edit-section > .todo-title-field + .todo-drawer-grid,
#todo #todoDrawer label.todo-drawer-field.todo-title-field + .todo-drawer-grid,
#todoDrawer label.todo-drawer-field.todo-title-field + .todo-drawer-grid{
  margin-top:0!important;
}

#todo #todoDrawer .todo-edit-section > .todo-drawer-grid,
#todoDrawer .todo-edit-section > .todo-drawer-grid{
  margin-bottom:15px!important;
}

#todo #todoDrawer .todo-edit-section > .todo-drawer-grid + .todo-drawer-field,
#todo #todoDrawer .todo-edit-section > .todo-drawer-grid + .todo-drawer-field.full,
#todoDrawer .todo-edit-section > .todo-drawer-grid + .todo-drawer-field,
#todoDrawer .todo-edit-section > .todo-drawer-grid + .todo-drawer-field.full{
  margin-top:0!important;
}

#todo #todoDrawer .todo-drawer-field.full + .todo-drawer-field.full,
#todoDrawer .todo-drawer-field.full + .todo-drawer-field.full{
  margin-top:15px!important;
}

@media (max-width:768px){
  #todo #todoDrawer .todo-edit-section > .todo-title-field,
  #todoDrawer .todo-edit-section > .todo-title-field,
  #todo #todoDrawer label.todo-drawer-field.todo-title-field,
  #todoDrawer label.todo-drawer-field.todo-title-field{
    margin-bottom:15px!important;
  }

  #todo #todoDrawer .todo-edit-section > .todo-drawer-grid,
  #todoDrawer .todo-edit-section > .todo-drawer-grid{
    margin-bottom:15px!important;
  }
}