:root{
  --ink:#1a2e35; --paper:#f7f4ec; --sea:#2b6777; --sea-deep:#1d4a57;
  --coral:#e8743b; --coral-soft:#fbe6da; --sand:#efe7d3; --line:#d9d0bd;
  --muted:#6b7a7e; --ok:#3a8d6a; --danger:#c94b3f; --shadow:0 2px 12px rgba(29,74,87,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"Hiragino Sans","Yu Gothic",system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:640px;margin:0 auto;padding:16px 16px 90px}

/* ---- 画面1-1：ログイン ---- */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--sea),var(--sea-deep));padding:20px}
.login-box{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:32px 24px;max-width:360px;width:100%}
.login-title{font-size:22px;font-weight:800;color:var(--sea-deep);text-align:center;margin-bottom:20px}

/* ---- ヘッダー（第一ヘッダー） ---- */
nav.tabs{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
nav.tabs.hidden{display:none}
nav.tabs .inner{max-width:640px;margin:0 auto;padding:8px 12px;display:flex;align-items:center;gap:6px}
.tab{appearance:none;border:none;background:none;cursor:pointer;font:inherit;font-weight:700;font-size:14px;padding:9px 16px;border-radius:999px;color:var(--muted)}
.tab.active{background:var(--sea);color:#fff}
.plus{appearance:none;border:none;background:none;cursor:pointer;font-size:20px;font-weight:700;color:var(--sea-deep);width:36px;height:36px;border-radius:50%}
.plus:active{background:var(--sand)}
.plus.menu{margin-right:auto;font-size:18px}
.plus:not(.menu){margin-left:auto}

section.panel{display:none}
section.panel.active{display:block}

/* ---- 画面4-1：詳細ヘッダー／フッター ---- */
.s4-appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 12px}
.s4-appbar-title{font-weight:800;font-size:16px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s4-appbar-actions{display:flex;gap:6px}
.s4-footer{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#fff;border-top:1px solid var(--line);padding:10px 16px;display:flex;justify-content:space-between;align-items:center;max-width:640px;margin:0 auto}

/* ---- リスト ---- */
.list-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px;box-shadow:var(--shadow)}
.li-date-head{font-size:12px;font-weight:800;color:var(--sea-deep);margin-bottom:6px}
.li-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.li-title{font-weight:700;font-size:15px}
.li-meta{font-size:12.5px;color:var(--muted);margin-top:2px}
.li-icons{display:flex;gap:10px;flex-shrink:0}
.icon-btn{appearance:none;border:none;background:none;cursor:pointer;font-size:16px;line-height:1;padding:2px}
.icon-btn.lg{font-size:19px}
.tappable{cursor:pointer}
.empty{color:var(--muted);font-size:14px;padding:20px 4px;text-align:center}

/* ---- 日程行（画面4-1） ---- */
.day-block{margin-bottom:18px}
.day-head{font-size:13px;font-weight:800;color:var(--sea-deep);margin-bottom:8px}
.day-head.undated{color:var(--muted)}
.day-head.warn{color:var(--danger)}
.row{display:flex;gap:12px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;background:#fff}
.row-time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--sea);white-space:nowrap;padding-top:1px}
.row-time.none{color:var(--muted);font-weight:400}
.row-body{flex:1;min-width:0}
.oor-note{font-size:12px;color:var(--muted);margin:6px 0 18px}
.total-mini{font-size:14px}
.total-mini b{font-size:16px;color:var(--sea-deep)}

/* ---- サイドバー（画面2-4） ---- */
.sidebar-backdrop{position:fixed;inset:0;background:rgba(26,46,53,.4);z-index:40;opacity:0;pointer-events:none;transition:opacity .2s}
.sidebar-backdrop.open{opacity:1;pointer-events:auto}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:250px;background:#fff;z-index:41;transform:translateX(-100%);transition:transform .2s;box-shadow:var(--shadow);display:flex;flex-direction:column;padding:20px 0}
.sidebar.open{transform:translateX(0)}
.sidebar-item{appearance:none;border:none;background:none;text-align:left;font:inherit;font-weight:700;font-size:15px;padding:14px 20px;cursor:pointer;color:var(--ink)}
.sidebar-item:active{background:var(--sand)}
.sidebar-close{margin-top:auto;border:none;background:none;font:inherit;font-size:13px;color:var(--muted);padding:14px 20px;text-align:left;cursor:pointer;border-top:1px solid var(--line)}

/* ---- フォーム ---- */
.field{margin-bottom:14px}
.field .f{display:block;font-size:12.5px;font-weight:700;color:var(--sea-deep);margin-bottom:6px}
.req-mark{color:var(--coral);font-weight:700}
.opt-mark,.badge-ro{color:var(--muted);font-weight:400;font-size:11px}
input[type="text"],input[type="number"],input[type="email"],input[type="password"],input[type="date"],input[type="time"],select{
  width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:inherit;font-size:14px;background:#fff;color:var(--ink)
}
input[readonly]{background:var(--sand);color:var(--muted)}
input:disabled{background:var(--sand);color:var(--muted)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.add-inline{display:flex;gap:8px;align-items:stretch}
.add-inline input{flex:1}
.note{font-size:12px;color:var(--muted);margin-top:8px}

/* ---- 時刻入力（時/分の数値2つ。時計UIは使わない） ---- */
.time-input{display:flex;align-items:center;gap:6px;width:100%}
.time-input input{flex:1;min-width:0;text-align:center}
.time-sep{font-weight:700;color:var(--muted);flex:none}

/* ---- 期間選択カレンダー（画面3-3） ---- */
.cal{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff}
.cal-head{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:var(--sea-deep);margin-bottom:8px}
.cal-nav{appearance:none;border:none;background:none;font-size:16px;cursor:pointer;color:var(--sea-deep);padding:2px 8px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-grid .wd{font-size:11px;color:var(--muted);padding:2px 0}
.cal-day{appearance:none;border:none;background:none;border-radius:6px;padding:6px 0;font-size:12.5px;cursor:pointer;color:var(--ink)}
.cal-day:hover{background:var(--sand)}
.cal-day.edge{background:var(--sea);color:#fff;font-weight:700}
.cal-day.range{background:var(--coral-soft)}
.cal-status{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:12.5px;color:var(--muted)}
.linkish{appearance:none;border:none;background:none;color:var(--coral);font:inherit;font-size:12.5px;cursor:pointer;text-decoration:underline}

/* ---- ボタン ---- */
.act{appearance:none;border:none;border-radius:10px;background:var(--coral);color:#fff;font:inherit;font-weight:700;font-size:14px;padding:10px 18px;cursor:pointer}
.act.ghost{background:none;color:var(--sea-deep);border:1px solid var(--line)}
.act.small{padding:7px 14px;font-size:13px}
.act.danger{background:var(--danger)}
.act:active{opacity:.85}

/* ---- モーダル ---- */
.modal-bg{position:fixed;inset:0;background:rgba(26,46,53,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-bg.open{display:flex}
.modal{background:#fff;border-radius:14px;box-shadow:var(--shadow);width:100%;max-width:420px;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.modal-body{overflow-y:auto;padding:20px}
.modal-body h3{font-size:16px;font-weight:800;margin-bottom:14px;color:var(--sea-deep)}
.modal-footer{border-top:1px solid var(--line);padding:12px 20px;display:flex;justify-content:flex-end;gap:10px}
.modal-footer.split,.modal-header.split{justify-content:space-between;align-items:center}
.modal-header{border-bottom:1px solid var(--line);padding:16px 20px;display:flex}

/* ---- 行きたい場所メモ選択（画面4-3） ---- */
.memo-pick-item{border-bottom:1px solid var(--line);padding:10px 4px;font-size:14px;cursor:pointer}
.memo-pick-item:last-child{border-bottom:none}
.memo-pick-item.disabled{color:var(--muted);cursor:default}

/* ---- 内訳（画面4-5） ---- */
.bd-row{display:grid;grid-template-columns:1fr 90px 110px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.bd-row.head{font-weight:700;color:var(--sea-deep);font-size:12px}
.bd-row-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settle-row{display:flex;justify-content:space-between;padding:6px 0;font-size:13.5px;border-bottom:1px solid var(--line)}

/* ---- トースト ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:100;max-width:88vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}