@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; } /* data-theme lives on (set in views.js applyTheme) so these custom properties cascade down to every descendant — same pattern as babylog's css/style.css. */ [data-theme=day] { --bg2:#F0F3EF; --bg:#FAFBF9; --card:#FFFFFF; --card2:#F2F5F1; --line:#E6EAE3; --track:#E9EDE6; --text:#1B231D; --text2:#5C6B5E; --text3:#95A398; --accent:#2E6B54; --accent2:#1F4D3D; --accentBg:#E6EFE9; --nav:rgba(250,251,249,.94); --crit:#B0402A; --critBg:#FBEBE6; --warn:#9A6B14; --warnBg:#F8F0DC; --inpBg:#FFFFFF; --inpBorder:#DCE3D9; --shadow:rgba(30,40,32,.06); --shadow2:rgba(30,40,32,.14); --raceGold:#B8862E; } [data-theme=night] { --bg2:#0E120F; --bg:#151A16; --card:#1D231E; --card2:#252C26; --line:#2B322C; --track:#2F372F; --text:#E7ECE6; --text2:#9CAB9E; --text3:#5E6B60; --accent:#6FBF9C; --accent2:#8FD4B3; --accentBg:#1B2A22; --nav:rgba(21,26,22,.95); --crit:#E38A72; --critBg:#2A1B16; --warn:#D9B15C; --warnBg:#2A2412; --inpBg:#252C26; --inpBorder:#333B33; --shadow:rgba(0,0,0,.35); --shadow2:rgba(0,0,0,.55); --raceGold:#D9A94A; } html { background: #151A16; background: var(--bg2); overscroll-behavior: none; } html, body { height: 100%; height: 100dvh; } body { background: var(--bg2); color: var(--text); font-family: 'Inter', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* 底部留白＝底部導覽列本身（≈62px）＋ iPhone home indicator 的安全區（主畫面模式下 會完整算進去，≈34px）。之前寫死 84px，主畫面模式下最後一張卡片底部會被導覽列蓋住。 */ #root { min-height: 100%; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; } @media (min-width: 900px) { .wrap { max-width: 880px; } .app--desktop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } } a { color: var(--accent2); text-decoration: none; } button { font: inherit; } /* ── top bar ─────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 20; background: var(--nav); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 10px 16px calc(10px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); } .topbar-inner { max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding-top: 10px; } @media (min-width: 900px) { .topbar-inner { max-width: 880px; } } .topbar-title { font-weight: 700; font-size: 16px; flex: 1; } .topbar-title .race-count { color: var(--text2); font-weight: 500; font-size: 12.5px; display: block; margin-top: 1px; } .sync-pill { font-size: 11px; padding: 4px 9px; border-radius: 99px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; cursor: pointer; border: 1px solid var(--inpBorder); background: var(--card); } .sync-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text3); flex: none; } .sync-pill.ok .dot { background: var(--accent); } .sync-pill.busy .dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; } .sync-pill.off .dot { background: var(--crit); } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} } /* ── bottom nav ──────────────────────────────────────────── */ .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--nav); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; } @media (min-width: 900px) { .bottomnav { display: none; } } .bottomnav-inner { display: flex; width: 100%; max-width: 560px; } .navbtn { flex: 1; background: none; border: none; color: var(--text3); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; font-size: 11px; font-weight: 600; } .navbtn svg { width: 21px; height: 21px; } .navbtn.active { color: var(--accent2); } .desktopnav { display: none; } @media (min-width: 900px) { .desktopnav { display: flex; gap: 4px; max-width: 880px; margin: 0 auto; padding: 0 16px 12px; } .desktopnav button { background: none; border: none; color: var(--text2); font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 8px; cursor: pointer; } .desktopnav button.active { color: var(--accent2); background: var(--accentBg); } } /* ── cards ───────────────────────────────────────────────── */ .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; box-shadow: 0 1px 2px var(--shadow); } .section { padding: 16px 0 4px; } .section-title { font-size: 12.5px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; } /* ── today card ──────────────────────────────────────────── */ .today-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2px; } .today-head .wk { font-size: 13px; color: var(--text2); font-weight: 600; } .today-head .ph { font-size: 12px; color: var(--text3); } .today-date { font-size: 22px; font-weight: 800; margin-bottom: 14px; letter-spacing: -.01em; } .item { border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: var(--card2); } .item:last-child { margin-bottom: 0; } .item.done { border-color: var(--accent); background: var(--accentBg); } .item.expired { opacity: .55; } .item-row { display: flex; align-items: flex-start; gap: 12px; } .item-check { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--inpBorder); background: var(--card); display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 1px; transition: background .15s, border-color .15s; } .item-check svg { width: 14px; height: 14px; stroke: white; opacity: 0; transition: opacity .1s; } .item.done .item-check { background: var(--accent); border-color: var(--accent); } .item.done .item-check svg { opacity: 1; } .item-body { flex: 1; min-width: 0; } .item-title { font-weight: 700; font-size: 15px; margin-bottom: 3px; } .item.derived .item-title::after { content: '推導值'; font-size: 10px; font-weight: 600; color: var(--warn); background: var(--warnBg); border-radius: 5px; padding: 1px 5px; margin-left: 7px; vertical-align: 2px; } .item-meta { font-size: 12.5px; color: var(--text2); display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 4px; } .item-meta .zone { font-weight: 600; color: var(--accent2); } .item-notes { font-size: 13px; color: var(--text2); margin-top: 6px; line-height: 1.55; } .item-links { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .item-link { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--inpBorder); color: var(--accent2); display: inline-flex; gap: 5px; align-items: center; } .actual-row { display: flex; gap: 10px; margin-top: 8px; } .actual-field { font-size: 11px; color: var(--text3); font-weight: 600; } .actual-field input { display: block; margin-top: 3px; width: 84px; border: 1.5px solid var(--inpBorder); background: var(--inpBg); color: var(--text); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 13px; } .choice-or { text-align: center; font-size: 11.5px; font-weight: 700; color: var(--text3); letter-spacing: .06em; margin: -2px 0 8px; } .choice-note { font-size: 12.5px; color: var(--text2); margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--inpBorder); } /* ── safety banners ──────────────────────────────────────── */ .banner { border-radius: 12px; padding: 13px 14px; font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; display: flex; gap: 10px; align-items: flex-start; } .banner svg { flex: none; width: 18px; height: 18px; margin-top: 1px; } .banner.warn { background: var(--warnBg); color: var(--warn); } .banner.crit { background: var(--critBg); color: var(--crit); } .banner.info { background: var(--accentBg); color: var(--accent2); } .banner b { display: block; margin-bottom: 2px; } .banner-dismiss { margin-left: auto; flex: none; background: none; border: none; color: inherit; opacity: .6; font-size: 18px; line-height: 1; cursor: pointer; } /* ── flags / body-check ──────────────────────────────────── */ .flagsbox summary { cursor: pointer; font-weight: 600; font-size: 13.5px; color: var(--text2); padding: 4px 0; list-style: none; } .flagsbox summary::-webkit-details-marker { display: none; } .flagsbox summary::before { content: '▸ '; } .flagsbox[open] summary::before { content: '▾ '; } .flag-row { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; } .flag-chip { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 99px; border: 1.5px solid var(--inpBorder); background: var(--card); color: var(--text2); cursor: pointer; } .flag-chip.active { border-color: var(--crit); background: var(--critBg); color: var(--crit); } textarea.note-input { width: 100%; border: 1.5px solid var(--inpBorder); background: var(--inpBg); color: var(--text); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13.5px; resize: vertical; min-height: 60px; } /* ── week view ───────────────────────────────────────────── */ .weekday-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); } .weekday-row:last-child { border-bottom: none; } .weekday-badge { flex: none; width: 42px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text3); } .weekday-badge .num { display: block; font-size: 17px; font-weight: 800; color: var(--text); } .weekday-badge.today .num { color: var(--accent2); } .weekday-status { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .weekday-status.done { background: var(--accent); } .weekday-status.done svg { width: 12px; height: 12px; stroke: white; } .weekday-status.partial { border: 2px solid var(--warn); } .weekday-status.pending { border: 2px solid var(--inpBorder); } .weekday-status.expired { background: var(--track); } .weekday-summary { flex: 1; min-width: 0; } .weekday-summary .t { font-weight: 600; font-size: 14px; } .weekday-summary .sub { font-size: 12px; color: var(--text2); margin-top: 1px; } /* ── overview ────────────────────────────────────────────── */ .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; } .stat-tile { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 13px; text-align: center; } .stat-tile .n { font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .stat-tile .l { font-size: 11px; color: var(--text2); margin-top: 2px; } .progress-track { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; margin: 8px 0; } .progress-fill { height: 100%; background: var(--accent); border-radius: 99px; } .phase-strip-scroll { overflow-x: auto; margin: 10px 0 4px; } .phase-strip { display: flex; gap: 3px; min-width: 480px; } .phase-seg { flex: 1; height: 22px; border-radius: 6px; background: var(--track); position: relative; overflow: hidden; } .phase-seg.current { box-shadow: inset 0 0 0 2px var(--accent2); } .phase-seg .bar { position: absolute; inset: 0; background: var(--accentBg); } .phase-seg .lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: var(--text2); white-space: nowrap; overflow: hidden; } .trend-chart { width: 100%; height: 140px; display: block; } .trend-legend { display: flex; gap: 16px; font-size: 12px; color: var(--text2); margin-top: 6px; } .trend-legend .sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--text3); box-sizing: border-box; } .otheruser-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); } .otheruser-row:last-child { border-bottom: none; } .otheruser-row .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--accentBg); color: var(--accent2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; } .otheruser-row .name { flex: 1; font-weight: 600; font-size: 14px; } .otheruser-row .pct { font-weight: 700; color: var(--accent2); font-size: 14px; } /* ── settings / user switch ──────────────────────────────── */ .userlist { display: flex; flex-direction: column; gap: 8px; } .user-opt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--inpBorder); background: var(--card); cursor: pointer; } .user-opt.active { border-color: var(--accent2); background: var(--accentBg); } .user-opt .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--track); color: var(--text2); display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; } .user-opt.active .avatar { background: var(--accent2); color: white; } .user-opt .name { font-weight: 700; flex: 1; } .user-opt .check { color: var(--accent2); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; font-size: 14px; padding: 11px 16px; border-radius: 11px; border: none; cursor: pointer; background: var(--accent2); color: white; width: 100%; } .btn.secondary { background: var(--card); color: var(--text); border: 1.5px solid var(--inpBorder); } .btn.danger { background: var(--critBg); color: var(--crit); } .btn svg { width: 16px; height: 16px; } .btn:disabled { opacity: .55; cursor: default; } .field-label { font-size: 12.5px; font-weight: 700; color: var(--text2); margin-bottom: 6px; display: block; } .share-box { background: var(--card2); border: 1px dashed var(--inpBorder); border-radius: 10px; padding: 12px; font-size: 13px; color: var(--text2); line-height: 1.6; } .share-box code { background: var(--card); padding: 1px 5px; border-radius: 5px; font-size: 12px; } .empty-state { text-align: center; padding: 40px 20px; color: var(--text2); } .empty-state svg { width: 40px; height: 40px; margin-bottom: 10px; opacity: .5; } /* ── 教練模式 ─────────────────────────────────────────────── */ /* 開關關掉時（預設）完全不渲染這一整組，跟原本的畫面一模一樣——這是使用者的 明確要求：教練模式不能動到學員模式的 UI。 */ .coach-banner { background: var(--warnBg); color: var(--warn); font-size: 12.5px; font-weight: 700; text-align: center; padding: 7px 12px; border-bottom: 1px solid var(--warn); } .coach-toolbar { display: flex; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--warn); } .coach-toolbar button { border: 1.5px solid var(--warn); background: var(--warnBg); color: var(--warn); border-radius: 7px; padding: 5px 8px; font-size: 12px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; line-height: 1; } .coach-toolbar button:disabled { opacity: .3; cursor: default; } .coach-toolbar button.danger { border-color: var(--crit); background: var(--critBg); color: var(--crit); } .coach-add-row { margin-top: 10px; } .coach-add-row .btn { border: 1.5px dashed var(--warn); background: transparent; color: var(--warn); } .item.coach-editing { border-color: var(--warn); background: var(--warnBg); } .edit-form { display: flex; flex-direction: column; gap: 10px; } .edit-form .row { display: flex; gap: 8px; flex-wrap: wrap; } .edit-form .field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 90px; } .edit-form .field.wide { flex: 1 1 100%; } .edit-form label.field-lbl { font-size: 11px; font-weight: 700; color: var(--text2); } .edit-form input, .edit-form select, .edit-form textarea { border: 1.5px solid var(--inpBorder); background: var(--inpBg); color: var(--text); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 13px; width: 100%; } .edit-form textarea { min-height: 56px; resize: vertical; } .edit-form .checkrow { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text2); } .edit-form .actions { display: flex; gap: 8px; margin-top: 4px; } .edit-form .actions .btn { width: auto; padding: 8px 16px; font-size: 13px; } .day-coach-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 10px 0; font-size: 12.5px; color: var(--warn); font-weight: 600; } .day-coach-row .toggle-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .day-coach-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--warn); } .daynotes-edit { width: 100%; margin: 8px 0; font-size: 12.5px; } .coach-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--card); border: 1.5px solid var(--warn); border-radius: 12px; padding: 13px 14px; } .switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch .slider { position: absolute; inset: 0; background: var(--track); border-radius: 99px; cursor: pointer; transition: background .15s; } .switch .slider::before { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform .15s; } .switch input:checked + .slider { background: var(--warn); } .switch input:checked + .slider::before { transform: translateX(18px); } /* ── 實際操作（一天一個方塊：狀態 chip + 實際分鐘/公里 + 自由文字）───────── */ .actual-box { margin-top: 12px; } .actual-box-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .actual-box-title { font-size: 12.5px; font-weight: 700; color: var(--text2); margin-bottom: 8px; } .actual-box-head .actual-box-title { margin-bottom: 0; } .vis-tag { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 1px 6px; margin-left: 4px; background: var(--warnBg); color: var(--warn); vertical-align: 1px; } .vis-tag.private { background: var(--accentBg); color: var(--accent2); } .private-box { margin-top: 12px; border-color: var(--accent); } .derived-status { font-size: 12px; font-weight: 700; color: var(--text3); white-space: nowrap; } .derived-status.done { color: var(--accent2); } .derived-status.partial { color: var(--warn); } .status-chip:disabled { opacity: .35; cursor: default; } .approx { font-size: 11px; font-weight: 600; color: var(--text3); margin-left: 2px; } .vol-sub.over { color: var(--warn); font-weight: 600; } /* ── 本週頁手風琴（決策紀錄第 17 條）───────────────────────────── */ .week-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .weekday-acc { border-bottom: 1px solid var(--line); scroll-margin-top: 140px; } .weekday-acc:last-child { border-bottom: none; } .weekday-acc .weekday-row { border-bottom: none; } .weekday-acc.open .weekday-row { background: var(--card2); border-radius: 10px; } .weekday-chevron { flex: none; width: 18px; height: 18px; color: var(--text3); transition: transform .15s; } .weekday-chevron svg { width: 18px; height: 18px; } .weekday-acc.open .weekday-chevron { transform: rotate(90deg); } /* 拖曳換順序（決策紀錄第 18 條）：把手要夠大（36px 高）讓手指按得到；touch-action:none 讓按住把手時不捲頁，其他地方照常捲。SortableJS 的 ghost（留在清單裡的原位）跟 drag （跟著手指走的複本）都把展開的列身藏起來，拖的時候清單不會被一整塊今日內容撐開。 */ .drag-handle { flex: none; width: 28px; height: 36px; margin: -6px -8px -6px -4px; display: inline-flex; align-items: center; justify-content: center; color: var(--text3); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; } .drag-handle svg { width: 16px; height: 16px; } .sortable-chosen .drag-handle { cursor: grabbing; color: var(--accent2); } .sortable-ghost { opacity: .35; } .sortable-drag { background: var(--card2); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); opacity: .95; } .sortable-ghost .weekday-body, .sortable-drag .weekday-body { display: none; } .day-order-hint { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 11.5px; color: var(--text3); margin: 8px 6px 0; line-height: 1.5; } .weekday-body { padding: 4px 0 10px; } .weekday-body .day-body { padding: 0; } .weekday-body .item { margin-top: 8px; } .icon-btn { border: 1.5px solid var(--inpBorder); background: var(--card); color: var(--text2); width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; vertical-align: middle; font-size: 14px; line-height: 1; } .icon-btn svg { width: 16px; height: 16px; } .icon-btn.alert { color: var(--warn); border-color: var(--warn); margin-left: 6px; width: 24px; height: 24px; } .icon-btn.alert svg { width: 14px; height: 14px; } .help-btn { border: none; background: transparent; color: var(--text3); width: 24px; height: 24px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .help-btn svg { width: 16px; height: 16px; } .help-btn.on { color: var(--accent2); } .link-btn { border: none; background: transparent; color: var(--accent2); font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 0; } .muted { color: var(--text3); } /* ── 體感強度（Apple Fitness「Rate Your Effort」的四階梯）────────── */ .effort { margin: 10px 0 6px; } .effort-head { display: flex; align-items: center; gap: 8px; } .effort-val { margin-left: auto; font-size: 13px; color: var(--text2); } .effort-val b { font-size: 16px; color: var(--text); } .effort-bar { display: flex; gap: 4px; align-items: flex-end; height: 48px; margin-top: 8px; } .effort-band { flex: 1; display: flex; justify-content: space-around; align-items: flex-end; background: var(--track); border-radius: 8px 8px 6px 6px; padding: 0 4px 6px; opacity: .6; } .effort-band.b0 { height: 40%; } .effort-band.b1 { height: 60%; } .effort-band.b2 { height: 80%; } .effort-band.b3 { height: 100%; } .effort-band.on { opacity: 1; background: var(--accentBg); } .effort-dot { width: 12px; height: 12px; border-radius: 50%; border: none; background: var(--text3); opacity: .45; padding: 0; cursor: pointer; } .effort-dot.plan { opacity: .85; background: var(--accent); } .effort-dot.sel { width: 16px; height: 28px; border-radius: 8px; background: var(--text); opacity: 1; } .effort-legend { display: flex; margin-top: 4px; font-size: 10.5px; color: var(--text3); } .effort-legend span { flex: 1; text-align: center; } .status-hint.over { color: var(--warn); font-weight: 600; } .status-row.sub-row { margin-top: 6px; } .status-chip.sub { font-size: 12px; padding: 5px 10px; } .status-chip.sub.active { border-color: var(--warn); background: var(--warnBg); color: var(--warn); } /* ── 全域彈窗（安全提醒）─────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } .modal { width: 100%; max-width: 560px; max-height: 80vh; overflow: auto; } .modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 14px; } .modal-body p { font-size: 13px; color: var(--text2); line-height: 1.65; margin-bottom: 10px; } @media (min-width: 900px) { .modal-backdrop { align-items: center; } } /* ── 本週順序對調（決策紀錄第 14 條）／教練幫別人設目標（第 15 條）的小標籤 ── */ .swap-tag { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 1px 6px; margin-left: 6px; background: var(--accentBg); color: var(--accent2); vertical-align: 1px; white-space: nowrap; } .coach-tag { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 1px 6px; background: var(--warnBg); color: var(--warn); vertical-align: 1px; text-transform: none; letter-spacing: 0; } .today-date .swap-tag { font-size: 11.5px; vertical-align: 2px; } .status-row { display: flex; gap: 6px; flex-wrap: wrap; } .status-chip { border: 1.5px solid var(--inpBorder); background: var(--card); color: var(--text2); border-radius: 99px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; } .status-chip.active { border-color: var(--accent2); background: var(--accentBg); color: var(--accent2); } .status-chip.substituted.active { border-color: var(--warn); background: var(--warnBg); color: var(--warn); } .status-chip.missed.active { border-color: var(--crit); background: var(--critBg); color: var(--crit); } .status-chip.rested.active { border-color: var(--text3); background: var(--card2); color: var(--text2); } .status-hint { font-size: 11.5px; color: var(--text3); margin: 8px 0 4px; line-height: 1.5; } .actual-box .actual-row { margin: 8px 0 10px; } .actual-box .note-input { min-height: 56px; } .weekday-status.substituted { border: 2px solid var(--warn); background: var(--warnBg); } .weekday-status.missed { border: 2px solid var(--crit); } .weekday-status.rested { background: var(--track); } /* ── 週視圖：卡片／表格切換、跑量卡 ─────────────────────────── */ .view-toggle { display: flex; gap: 4px; background: var(--track); border-radius: 10px; padding: 3px; margin-bottom: 12px; } .view-toggle button { flex: 1; border: none; background: transparent; color: var(--text2); font-size: 13px; font-weight: 700; padding: 7px; border-radius: 8px; cursor: pointer; } .view-toggle button.active { background: var(--card); color: var(--text); box-shadow: 0 1px 2px var(--shadow2); } .vol-card { margin-bottom: 12px; padding: 13px 16px; } .vol-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; gap: 10px; } .vol-title { font-size: 12.5px; font-weight: 700; color: var(--text2); } .vol-nums { font-size: 13px; color: var(--text2); white-space: nowrap; } .vol-nums b { font-size: 18px; color: var(--text); } .vol-sub { font-size: 11.5px; color: var(--text3); margin-top: 6px; line-height: 1.5; } .progress-fill.reached { background: var(--accent2); } .week-table-wrap { padding: 4px 6px; overflow-x: auto; } .week-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .week-table th { text-align: left; font-size: 11px; color: var(--text3); font-weight: 700; padding: 8px 6px 4px; } .week-table td { vertical-align: top; padding: 9px 6px; border-top: 1px solid var(--line); } .week-table tr { cursor: pointer; } .week-table tr.today td { background: var(--accentBg); } .wt-day { width: 34px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text3); white-space: nowrap; } .wt-day .num { display: block; font-size: 15px; font-weight: 800; color: var(--text); } .wt-plan { width: 46%; } .wt-item { line-height: 1.45; margin-bottom: 3px; } .wt-title { font-weight: 600; display: block; } .wt-meta { color: var(--text2); font-size: 11.5px; display: block; } .wt-or { font-size: 10.5px; font-weight: 700; color: var(--text3); margin: 2px 0; } .wt-status { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 6px; padding: 1px 6px; margin: 0 4px 3px 0; border: 1px solid var(--inpBorder); color: var(--text2); } .wt-status.done { color: var(--accent2); border-color: var(--accent); background: var(--accentBg); } .wt-status.partial { color: var(--warn); border-color: var(--warn); } .wt-status.substituted { color: var(--warn); border-color: var(--warn); background: var(--warnBg); } .wt-status.missed { color: var(--crit); border-color: var(--crit); } .wt-status.rested, .wt-status.expired { color: var(--text3); } .wt-nums { color: var(--text2); font-size: 12px; } .wt-note { color: var(--text); font-size: 12.5px; margin-top: 3px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; } .wt-empty { color: var(--text3); } /* ── 訓練目標 ────────────────────────────────────────────── */ .goal-input, .goal-text-input, .goal-add input { width: 100%; border: 1.5px solid var(--inpBorder); background: var(--inpBg); color: var(--text); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13.5px; min-width: 0; } .goal-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; } .goal-check { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--inpBorder); background: var(--card); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .goal-check svg { width: 12px; height: 12px; stroke: white; opacity: 0; } .goal-row.done .goal-check { background: var(--accent); border-color: var(--accent); } .goal-row.done .goal-check svg { opacity: 1; } .goal-row.done .goal-text-input, .goal-row.done .goal-text { text-decoration: line-through; color: var(--text3); } .goal-text { flex: 1; font-size: 13.5px; line-height: 1.45; } .goal-del { flex: none; border: none; background: transparent; color: var(--text3); font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1; } .goal-add { display: flex; gap: 8px; margin-top: 10px; } .goal-race { font-weight: 700; font-size: 14px; margin-bottom: 8px; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }