:root{
  --bg:#EEF3FA;
  --card:#FFFFFF;
  --ink:#16213E;
  --ink-dim:#6B7A99;
  --line:#DFE7F2;
  --blue:#2C6BED;
  --blue-dk:#1B4FC2;
  --blue-soft:#EAF1FE;
  --lav:#7C5CE0;
  --lav-soft:#F4F0FE;
  --lav-line:#C3B2F2;
  --green:#12B76A;
  --green-soft:#E6F8EF;
  --hdr1:#2B3A86;
  --hdr2:#6B4BC2;
  --safe-t:env(safe-area-inset-top);
  --safe-b:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{margin:0;padding:0;min-height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,sans-serif;
  font-weight:700;
  overscroll-behavior-y:none;
}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:30;
  padding:calc(var(--safe-t) + 12px) 18px 14px;
  display:flex;align-items:flex-end;justify-content:space-between;
  background:linear-gradient(115deg,var(--hdr1) 0%, var(--hdr2) 100%);
  color:#fff;
  border-radius:0 0 20px 20px;
  box-shadow:0 6px 20px rgba(43,58,134,.22);
}
.logo{
  font-family:"Didot","Bodoni 72","Hiragino Mincho ProN","Times New Roman",serif;
  font-size:23px;font-weight:600;letter-spacing:.01em;line-height:1.1;
}
.logo img{height:30px;width:auto;display:block}
.date{font-size:12px;opacity:.82;margin-top:3px;font-weight:600}
.clock{font-size:28px;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---------- tabs ---------- */
.tabs{
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;
  padding:12px 10px 8px;background:var(--bg);
}
.tab{
  min-height:48px;padding:0;
  border-radius:13px;border:1px solid var(--line);
  background:var(--card);color:#94A3BE;
  font-size:20px;line-height:1;font-weight:700;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 2px rgba(22,33,62,.05);
  transition:color .15s, background .15s, border-color .15s;
}
.tab .ico{width:25px;height:25px;transition:transform .12s}
.tab.on{
  background:linear-gradient(125deg,var(--hdr1),var(--hdr2));
  border-color:transparent;
  box-shadow:0 4px 12px rgba(43,58,134,.30);
}
.tab.on .ico{transform:scale(1.06)}

/* ---------- search ---------- */
.searchwrap{padding:0 12px 8px;background:var(--bg)}
#search{
  width:100%;height:42px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);
  color:var(--ink);font-size:15px;font-family:inherit;font-weight:600;
  padding:0 14px;box-shadow:0 1px 2px rgba(22,33,62,.05);
}
#search::placeholder{color:#9AA8C2}

/* ---------- list ---------- */
main{padding:14px 12px 132px;min-height:60vh}
.area{
  margin:18px 4px 8px;font-size:12px;letter-spacing:.08em;
  color:var(--ink-dim);display:flex;align-items:center;gap:10px;
}
.area::after{content:"";flex:1;height:1px;background:var(--line)}

.chip{
  display:flex;align-items:stretch;
  background:var(--card);border:1px solid var(--line);
  border-radius:16px;margin-bottom:9px;overflow:hidden;
  box-shadow:0 1px 3px rgba(22,33,62,.06);
  transition:border-color .15s, background .15s;
}
.chip.waiting{border-color:var(--lav-line);background:var(--lav-soft)}
.chip.done{border-color:#B9E3CD;background:var(--green-soft)}
.chip.pin{box-shadow:0 4px 14px rgba(124,92,224,.22)}

.chip-name{
  flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  justify-content:center;gap:5px;
  padding:12px 10px 12px 14px;min-height:62px;
  background:none;border:0;color:var(--ink);
  font-family:inherit;font-size:15px;font-weight:700;text-align:left;
}
.chip-name .nm{
  width:100%;white-space:normal;word-break:auto-phrase;
  line-height:1.34;font-size:15.5px;
}
.chip-name .st{
  align-self:flex-start;font-size:11.5px;font-weight:800;padding:3px 8px;border-radius:7px;
  font-variant-numeric:tabular-nums;
}
.st.w{background:#E6DCFB;color:#4A2E9E}
.st.d{background:#CFF0DF;color:#0A6C42}

.act{
  flex:0 0 auto;width:66px;min-height:62px;
  border:0;border-left:1px solid var(--line);
  background:#F7FAFF;
  color:var(--ink-dim);font-family:inherit;font-weight:800;font-size:11px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}

.act:active{background:#E7EEFB}
.act.w.on{background:linear-gradient(180deg,#9B7CF0,#6B4BC2);color:#fff}
.act.d{background:#F1F7FF}
.act.d:active{background:#DCEBFF}
.chip.nostep .act.w{display:none}
.chip.nostep .act.d{width:82px}

/* ---------- fab ---------- */
.bottombar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;gap:10px;
  padding:14px 16px calc(var(--safe-b) + 16px);
  background:linear-gradient(180deg,rgba(238,243,250,0),rgba(238,243,250,.97) 38%);
}
.btn-add{
  flex:1;min-height:58px;border-radius:18px;border:0;
  background:linear-gradient(115deg,var(--hdr1),var(--hdr2));color:#fff;
  font-family:inherit;font-size:17px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:0 8px 22px rgba(43,58,134,.35);
}
.btn-add .plus{font-size:21px;line-height:1}
.btn-img{
  flex:0 0 auto;width:58px;min-height:58px;border-radius:18px;
  border:1px solid var(--line);background:var(--card);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(22,33,62,.12);
}
.btn-img svg{
  width:25px;height:25px;fill:none;stroke:var(--hdr1);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.btn-img:active{background:var(--blue-soft)}
.spacer{width:62px}

/* ---------- sheet ---------- */
.sheet{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:var(--bg);
}
.sheet.small{top:auto;height:76%;border-radius:22px 22px 0 0;box-shadow:0 -10px 40px rgba(22,33,62,.25)}
.sheet-hd{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(var(--safe-t) + 12px) 12px 12px;
  background:linear-gradient(115deg,var(--hdr1),var(--hdr2));color:#fff;
}
.sheet.small .sheet-hd{padding-top:14px;border-radius:22px 22px 0 0}
.sheet-title{font-size:16px;flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet-body{flex:1;overflow:auto;padding:14px 14px 40px;-webkit-overflow-scrolling:touch}
#list{padding:0 12px calc(var(--safe-b) + 30px)}
.sheet-body.center{display:flex;align-items:flex-start;justify-content:center;background:#E6ECF6}
.sheet-ft{
  display:flex;gap:8px;padding:10px 14px calc(var(--safe-b) + 14px);
  border-top:1px solid var(--line);background:var(--card);
}
.ghost{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);color:#fff;
  border-radius:11px;min-height:40px;padding:0 14px;font-family:inherit;font-weight:700;font-size:14px;
}
.ghost.gold{background:#fff;color:var(--hdr1);border-color:#fff}
.ghost.danger{background:rgba(255,255,255,.16);color:#FFD9D9;border-color:rgba(255,217,217,.45)}
.sheet-ft .ghost{
  flex:1;background:var(--blue-soft);color:var(--blue-dk);border-color:#CFE0FD;font-size:13px;padding:0 6px;
}

/* ---------- timeline ---------- */
.tl-row{
  display:flex;align-items:stretch;margin-bottom:9px;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 1px 3px rgba(22,33,62,.06);overflow:hidden;
}
.tl-row.open{border-color:var(--lav-line);background:var(--lav-soft)}
.tl-tap{
  flex:1;min-width:0;display:flex;gap:12px;align-items:flex-start;text-align:left;
  padding:14px;background:none;border:0;color:var(--ink);font-family:inherit;font-weight:700;
}
.tl-done{
  flex:0 0 auto;width:78px;border:0;
  background:linear-gradient(150deg,var(--hdr1),var(--hdr2));color:#fff;
  font-family:inherit;font-weight:800;font-size:11.5px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
}
.tl-done span{display:block}
.tl-done:active{filter:brightness(.94)}
.tl-empty-sub{font-size:13px;color:var(--ink-dim);margin-top:5vh;line-height:1.8}
.inpa-wrap{
  position:relative;width:min(80vw,320px);aspect-ratio:1;margin:4vh auto 0;
  display:flex;align-items:center;justify-content:center;
}
.inpa-ring{
  position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(107,75,194,.55);
  animation:inpaPulse 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
.inpa-ring.r2{animation-delay:.85s}
.inpa-ring.r3{animation-delay:1.7s}
@keyframes inpaPulse{
  0%{transform:scale(.86);opacity:.75}
  100%{transform:scale(1.28);opacity:0}
}
.inpa-circle{
  position:relative;width:100%;height:100%;border:0;border-radius:50%;
  background:
    radial-gradient(120% 120% at 30% 22%, #8A63E8 0%, transparent 55%),
    linear-gradient(140deg,#2B3A86 0%, #5A3FB5 58%, #8A5BD6 100%);
  color:#fff;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  box-shadow:0 18px 48px rgba(43,58,134,.48), 0 0 0 10px rgba(107,75,194,.10), inset 0 2px 12px rgba(255,255,255,.22);
  animation:inpaBreathe 3.2s ease-in-out infinite;
}
@keyframes inpaBreathe{50%{transform:scale(1.035)}}
.inpa-circle .ico-inpa{width:clamp(44px,13vw,62px);height:clamp(44px,13vw,62px)}
.inpa-circle .tx{font-size:clamp(26px,7.6vw,34px);font-weight:800;letter-spacing:.04em;margin-top:6px}
.inpa-circle .sub{font-size:12.5px;font-weight:700;opacity:.72;margin-top:6px}
.inpa-circle:active{filter:brightness(1.06)}
.inpa-wrap.burst .inpa-circle{animation:inpaBurst .34s ease-out forwards}
.inpa-wrap.burst .inpa-ring{animation:inpaBurstRing .34s ease-out forwards}
@keyframes inpaBurst{to{transform:scale(1.45);opacity:0}}
@keyframes inpaBurstRing{to{transform:scale(1.9);opacity:0}}
.tl-empty-lead{
  font-size:16px;color:var(--ink-dim);letter-spacing:.16em;margin-top:2vh;
}
.btn-out{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:54px;margin-top:14px;
  border:1.5px dashed #C3D0E6;border-radius:16px;
  background:var(--card);color:var(--hdr1);
  font-family:inherit;font-size:16px;font-weight:800;
}
.btn-out:active{background:var(--blue-soft)}
.tl-tools{display:flex;gap:8px;margin-top:16px}
.tl-tools .ghost{flex:1;background:var(--card);color:var(--ink-dim);border-color:var(--line);font-size:13px;padding:0 6px}
.tl-time{
  flex:0 0 auto;width:104px;font-variant-numeric:tabular-nums;
  font-size:14px;color:var(--blue-dk);line-height:1.5;
}
.tl-time .arrow{color:var(--ink-dim);font-size:12px}
.tl-time .open{color:var(--lav);font-size:12px}
.tl-main{flex:1;min-width:0}
.tl-name{font-size:15px;line-height:1.4;word-break:auto-phrase}
.tl-sub{font-size:12.5px;color:var(--ink-dim);font-weight:600;margin-top:4px}
.tl-empty{text-align:center;color:var(--ink-dim);padding:10px 16px 30px;font-size:14px;line-height:1.9}
.tl-sum{
  position:sticky;top:calc(var(--hdr-h, 80px) + 6px);z-index:20;
  margin:0 0 14px;padding:11px 8px;border-radius:16px;
  background:linear-gradient(115deg,var(--hdr1),var(--hdr2));color:#fff;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px 4px;
  box-shadow:0 6px 18px rgba(43,58,134,.28);
}
.tl-cell{text-align:center;line-height:1.1}
.tl-cell .ico-sum{width:21px;height:21px;display:block;margin:0 auto 5px}
.tl-cell b{font-size:22px;font-variant-numeric:tabular-nums;vertical-align:middle}
.tl-cell .lb{display:block;font-size:10.5px;opacity:.72;margin-top:3px;font-weight:700;letter-spacing:.01em}

/* ---------- detail ---------- */
.dt-field{margin-bottom:14px}
.dt-label{font-size:12px;color:var(--ink-dim);margin-bottom:6px}
.dt-row{display:flex;gap:8px;align-items:center}
.dt-row input[type=time], .dt-row input[type=text]{
  flex:1;height:48px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-family:inherit;
  font-size:16px;font-weight:700;padding:0 12px;
}
.dt-occ{
  border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px;
  background:var(--card);box-shadow:0 1px 3px rgba(22,33,62,.05);
}
.dt-occ-hd{font-size:12px;color:var(--ink-dim);margin-bottom:12px;display:flex;justify-content:space-between}
.dt-del{background:none;border:0;color:#E03B3B;font-family:inherit;font-size:12px;font-weight:700}

#canvas{width:100%;max-width:420px;height:auto;border-radius:14px;box-shadow:0 12px 34px rgba(22,33,62,.28)}

.toast{
  position:fixed;left:50%;bottom:calc(var(--safe-b) + 96px);transform:translateX(-50%);
  z-index:90;background:#16213E;color:#fff;padding:12px 20px;border-radius:999px;
  font-size:14px;font-weight:800;box-shadow:0 8px 24px rgba(22,33,62,.35);
  max-width:88%;text-align:center;
  animation:pop .22s ease;
}
@keyframes pop{from{opacity:0;transform:translateX(-50%) translateY(8px)}}

[hidden]{display:none !important}

.tl-row.flash{animation:flash 1.4s ease}
@keyframes flash{
  0%{box-shadow:0 0 0 0 rgba(44,107,237,.45); transform:scale(1)}
  18%{box-shadow:0 0 0 6px rgba(44,107,237,.22); transform:scale(1.015)}
  100%{box-shadow:0 1px 3px rgba(22,33,62,.06); transform:scale(1)}
}

.tl-name .seq{
  display:inline-block;margin-left:7px;padding:2px 7px;border-radius:7px;
  background:var(--blue-soft);color:var(--blue-dk);font-size:11px;font-weight:800;
  vertical-align:middle;
}

.dt-toggle{
  display:flex;align-items:center;gap:10px;
  padding:12px 2px 2px;font-size:14px;color:var(--ink);
}
.dt-toggle input{width:22px;height:22px;accent-color:var(--hdr2);flex:0 0 auto}

.dt-toggle span em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-dim);margin-top:3px}

/* ---------- アイコン画像 ---------- */
.ico{
  display:inline-block;object-fit:contain;flex:0 0 auto;
  image-rendering:auto;user-select:none;-webkit-user-drag:none;
}
.chip-name .nm, .tl-name{display:flex;align-items:flex-start;gap:9px}
.chip-name .ico, .tl-name .ico{width:22px;height:22px;margin-top:1px}
.nm-t{flex:1;min-width:0;word-break:auto-phrase}
.ico-out{width:23px;height:23px;margin-right:8px;vertical-align:-6px}
.chip-name .nm.plus-add{color:var(--hdr1)}

/* ---------- DPA ---------- */
.dpa-tg{
  flex:0 0 auto;width:52px;border:0;border-left:1px solid var(--line);
  background:#F7FAFF;color:#9AA8C2;
  font-family:inherit;font-weight:800;font-size:11.5px;letter-spacing:.04em;
}
.dpa-tg.on{
  background:linear-gradient(180deg,#9B7CF0,#6B4BC2);color:#fff;
  box-shadow:inset 0 1px 6px rgba(0,0,0,.12);
}
.dpa-tg:active{filter:brightness(.95)}
.dpa-badge{
  display:inline-block;margin-left:7px;padding:2px 7px;border-radius:7px;
  background:linear-gradient(180deg,#9B7CF0,#6B4BC2);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.04em;vertical-align:middle;
}

.ico-act{width:21px;height:21px}
.ico-lb{width:16px;height:16px;margin-right:5px;vertical-align:-3px}

/* ---------- 撮影のとりかた ---------- */
.pm-wrap{margin:4px 2px 14px}
.pm-label{font-size:11.5px;color:var(--ink-dim);margin-bottom:7px;letter-spacing:.02em}
.pm-row{display:flex;gap:7px;flex-wrap:wrap}
.pm{
  flex:0 0 auto;min-height:38px;padding:0 15px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--ink-dim);
  font-family:inherit;font-size:13.5px;font-weight:700;
  box-shadow:0 1px 2px rgba(22,33,62,.05);
}
.pm.on{
  background:linear-gradient(125deg,var(--hdr1),var(--hdr2));
  color:#fff;border-color:transparent;
  box-shadow:0 3px 10px rgba(43,58,134,.26);
}

.pick{
  display:block;width:100%;text-align:left;
  min-height:56px;padding:0 16px;margin-bottom:9px;
  border:1px solid var(--line);border-radius:14px;background:var(--card);
  color:var(--ink);font-family:inherit;font-size:15px;font-weight:700;
  box-shadow:0 1px 3px rgba(22,33,62,.06);
}
.pick:active{background:var(--blue-soft)}
#inText{width:100%}

/* 入力欄のフォーカスは青紫で（ブラウザ既定のオレンジを止める） */
#search:focus,
#inText:focus,
.dt-row input:focus{
  outline:none;
  border-color:var(--hdr2);
  box-shadow:0 0 0 3px rgba(107,75,194,.16);
}
input, textarea, button{accent-color:var(--hdr2)}