:root {
  /* Purple-pink palette — primary oklch(0.55 0.075 320), bg oklch(0.985 0.006 330) */
  --bg:       oklch(0.985 0.006 330);
  --paper:    oklch(0.997 0.002 325);
  --paper2:   oklch(0.972 0.010 323);
  --paper3:   oklch(0.950 0.016 320);
  --ink:      oklch(0.230 0.025 312);
  --ink2:     oklch(0.470 0.030 316);
  --ink3:     oklch(0.660 0.022 318);
  --ink4:     oklch(0.785 0.012 318);
  --bg-soft:  oklch(0.965 0.012 330);
  --surface:  oklch(1 0 0);
  --line:     oklch(0.92 0.012 325);
  --line-soft:oklch(0.95 0.008 325);
  --ink-2:    oklch(0.48 0.025 320);
  --ink-3:    oklch(0.62 0.022 320);
  --ink-4:    oklch(0.76 0.018 320);
  --plum-softer:oklch(0.965 0.014 320);
  --shadow-sm:0 1px 0 oklch(0.92 0.01 320/0.6),0 1px 2px oklch(0.5 0.04 320/0.04);
  --shadow-md:0 1px 0 oklch(0.92 0.01 320/0.6),0 6px 16px -8px oklch(0.4 0.05 320/0.12);
  --radius:   14px;
  --radius-sm:10px;
  --rule:     oklch(0.930 0.012 325);
  --rule2:    oklch(0.905 0.018 320);
  --accent:   oklch(0.55 0.075 320);
  --plum:      oklch(0.55 0.075 320);
  --plum-soft: oklch(0.93 0.025 320);
  --accent-l: oklch(0.955 0.028 320);
  --rose:     oklch(0.610 0.085 12);
  --rose-l:   oklch(0.960 0.025 12);
  --sage:     oklch(0.595 0.082 152);
  --sage-l:   oklch(0.960 0.022 150);
  --blue-m:   oklch(0.590 0.068 228);
  --blue-l:   oklch(0.958 0.022 228);
  --mauve:    oklch(0.595 0.080 295);
  --mauve-l:  oklch(0.958 0.025 298);
  --clay:     oklch(0.625 0.052 38);
  --clay-l:   oklch(0.960 0.018 38);
  --amber-m:  oklch(0.645 0.090 75);
  --amber-l:  oklch(0.962 0.028 75);
  --red-m:    oklch(0.575 0.115 22);
  --red-l:    oklch(0.960 0.030 18);
  --r:6px; --r-lg:10px; --r-xl:16px;
  --serif:'Noto Serif TC',serif;
  --sans:'Noto Sans TC',sans-serif;
  --mono:'JetBrains Mono','DM Mono',monospace;
  --shadow: 0 2px 12px oklch(0.45 0.040 315 / 0.10);
  /* 新版設計系統補充變數 */
  --plum-2:      oklch(0.62 0.06 320);
  --plum-deep:   oklch(0.42 0.08 320);
  --line-softer: oklch(0.97 0.006 325);
  --bg-2:        oklch(0.975 0.009 330);
  --teal:        oklch(0.72 0.05 195);
  --teal-soft:   oklch(0.94 0.022 195);
  --lilac:       oklch(0.72 0.06 295);
  --lilac-soft:  oklch(0.94 0.025 295);
  --moss:        oklch(0.7 0.04 120);
  --moss-soft:   oklch(0.94 0.018 120);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);min-height:100vh;font-size:14px;line-height:1.6;}

/* ── 共用 Icon 按鈕 ── */
.btn-icon{
  width:28px;height:28px;padding:0;border-radius:6px;border:none;
  background:transparent;color:var(--ink3);
  cursor:pointer;display:grid;place-items:center;flex-shrink:0;
  transition:color .12s,background .12s;
}
.btn-icon:hover{background:var(--paper2);color:var(--accent);}
.btn-icon-sm{
  width:22px;height:22px;padding:0;border-radius:5px;border:none;
  background:transparent;color:var(--ink3);
  cursor:pointer;display:grid;place-items:center;flex-shrink:0;
  transition:color .12s,background .12s;
}
.btn-icon-sm:hover{background:var(--paper2);color:var(--accent);}

/* ── LAYOUT ── */
.app{max-width:1640px;margin:0 auto;padding:22px 32px 80px;}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:14px 22px;background:var(--paper);border-radius:14px;border:1px solid var(--rule);box-shadow:var(--shadow-sm);}
.topbar-left{display:flex;align-items:center;gap:14px;}
.app-title{font-size:16px;font-weight:600;color:var(--ink);letter-spacing:.02em;}
#header-date{font-size:12px;color:var(--ink3);margin-top:1px;}
.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,oklch(0.55 0.075 320),oklch(0.7 0.05 340));color:white;display:grid;place-items:center;font-weight:700;font-size:17px;flex-shrink:0;box-shadow:0 4px 12px -4px oklch(0.5 0.08 320/0.35);}
.current-date{font-family:var(--mono);font-size:11px;color:var(--ink3);}
.topbar-right{display:flex;gap:5px;align-items:center;}
.nav-btn{width:28px;height:28px;border-radius:50%;background:var(--paper2);border:1px solid var(--rule2);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;color:var(--ink2);transition:all .12s;}
.nav-btn:hover{background:var(--paper3);}
.today-chip{padding:5px 13px;background:var(--accent);color:#fff;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;border:none;font-family:var(--sans);}
.today-chip:hover{opacity:.9;}

.tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0;background:var(--paper);border-radius:14px;border:none;padding:5px;box-shadow:var(--shadow-md);}
.tab{border-radius:10px;padding:10px 14px;font-size:13.5px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;color:var(--ink2);transition:all .12s;border:none;background:transparent;font-family:var(--sans);}
.tab.active{background:var(--accent);color:#fff;}
.tab:hover:not(.active){background:var(--paper2);color:var(--ink);}

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

/* ── LOG HERO ── */
.log-hero{
  background:linear-gradient(135deg,oklch(0.965 0.012 330) 40%,var(--paper) 80%);
  border:none;border-radius:14px;
  box-shadow:var(--shadow-md);
  padding:22px 28px;margin-bottom:16px;
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
}
.log-hero-left{display:flex;flex-direction:column;}
.log-hero-date{font-size:28px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);}
.log-hero-sub{font-size:13px;color:var(--ink2);margin-top:6px;display:flex;gap:12px;align-items:center;}
.log-hero-sub-sep{color:var(--ink3);opacity:.5;}
.log-hero-stats{display:flex;gap:20px;align-items:stretch;flex-shrink:0;}
.log-stat-card{padding:10px 18px;min-width:86px;border-radius:10px;background:var(--paper);border:none;box-shadow:0 2px 8px -2px oklch(0.4 0.05 320/0.12), 0 1px 0 oklch(0.92 0.01 320/0.6);text-align:center;display:flex;flex-direction:column;align-items:center;}
.log-stat-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin-bottom:4px;}
.log-stat-num-wrap{display:flex;align-items:flex-end;gap:2px;line-height:1;}
.log-stat-num{font-size:22px;font-weight:600;color:var(--ink);line-height:1;}
.log-stat-unit{font-size:11px;color:var(--ink3);padding-bottom:2px;}

/* ── BJ PAGE ── */
.bj-page{display:grid;grid-template-columns:7fr 5fr;gap:16px;align-items:start;}
@media(max-width:900px){.bj-page{grid-template-columns:1fr;}.bj-right-col{width:100%;}.wl-grid{grid-template-columns:1fr!important;}.rv-grid{grid-template-columns:1fr!important;}.day-summary{display:none;}}
.bj-section{background:var(--paper);border-radius:14px;box-shadow:var(--shadow-md);overflow:hidden;}
.bj-section.full-col{grid-column:1/-1;}
.bj-right-col{display:flex;flex-direction:column;gap:16px;}
.bj-header{display:flex;align-items:center;gap:12px;padding:16px 22px;cursor:pointer;transition:background .12s;user-select:none;justify-content:space-between;border-bottom:none;background:var(--paper);}
.bj-header:hover{background:var(--plum-softer);}
.bj-header-title{font-size:13.5px;font-weight:600;letter-spacing:0.02em;color:var(--ink);}
.bj-section-icon{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-size:13px;flex-shrink:0;}
.bj-collapse-arrow{display:flex;align-items:center;color:var(--ink3);transition:transform .2s;flex-shrink:0;}
.bj-collapse-arrow.open{transform:rotate(90deg);}
.bj-section-body{max-height:2000px;overflow:hidden;transition:max-height 0.25s ease,padding 0.25s ease;border-top:none;padding:18px 22px 22px;}
.bj-section-body.collapsed{max-height:0;padding:0;}
#bj-body-tl{padding:0;}
.bj-add-btn{background:var(--accent);color:#fff;border:none;border-radius:5px;padding:4px 10px;font-size:11px;font-family:var(--sans);cursor:pointer;}
.bj-add-btn:hover{opacity:.88;}
.bj-add-btn-light{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:7px;border:none;
  background:var(--accent-l);color:var(--accent);
  font-size:12px;font-weight:500;font-family:var(--sans);
  cursor:pointer;transition:all .12s;
}
.bj-add-btn-light:hover{background:var(--accent);color:#fff;}
.bj-add-btn-light.amber{background:var(--amber-l);color:var(--amber-m);}
.bj-add-btn-light.amber:hover{background:var(--amber-m);color:#fff;}

/* ── TIMELINE ── */
/* ── TIMELINE ── */
.timeline-body{overflow-y:auto;padding:8px 0;min-height:0;}
.timeline-empty{padding:36px 16px;text-align:center;color:var(--ink3);font-size:13px;}

.tl-entry{position:relative;display:flex;align-items:stretch;padding:0 12px 0 8px;gap:0;}

.tl-card{
  flex:1;min-width:0;
  width:100%;box-sizing:border-box;
  display:grid;
  grid-template-columns:64px auto 1fr auto;
  align-items:center;gap:10px;
  background:var(--paper);
  border:1px solid var(--cat-soft, var(--rule));
  border-radius:10px;padding:10px 12px;
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
  position:relative;overflow:hidden;
}
.tl-card:hover{
  background:color-mix(in oklch, var(--cat-soft, var(--accent-l)) 30%, var(--paper));
  border-color:color-mix(in oklch, var(--cat, var(--accent)) 25%, var(--cat-soft, var(--rule)));
  transform:translateY(-1px);
  box-shadow:0 4px 12px -4px oklch(0.4 0.05 320 / 0.08);
}

/* 時間膠囊 */
.tl-time-chip{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;
  background:var(--cat-soft, var(--accent-l));
  border-radius:10px;
  padding:6px 0;min-width:56px;
  align-self:stretch;
}
.t-start{
  font-family:var(--mono);font-size:13px;font-weight:600;
  color:color-mix(in oklch, var(--cat, var(--accent)) 55%, var(--ink));
  line-height:1.2;
}
.t-end{
  font-family:var(--mono);font-size:11px;
  color:color-mix(in oklch, var(--cat, var(--accent)) 40%, var(--ink3));
  line-height:1.2;
}

/* 類別膠囊 */
.tl-cat-pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 8px;border-radius:999px;
  background:transparent;
  border:1px solid color-mix(in oklch, var(--cat-soft, var(--rule)) 80%, var(--rule));
  color:color-mix(in oklch, var(--cat, var(--accent)) 55%, var(--ink));
  font-size:11px;font-weight:500;white-space:nowrap;
  align-self:center;
}

/* 當日描述類別欄：最多2個上下排 */
.tl-tag-col{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:3px;align-self:stretch;
}
.tl-tag-col .tl-cat-pill{align-self:flex-start;}

/* 內容 */
.tl-content{display:flex;flex-direction:column;gap:3px;min-width:0;}
.tl-title{
  font-size:14px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tl-note{
  font-size:12px;color:var(--ink3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 右側 actions */
.tl-actions{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  gap:6px;align-self:stretch;flex-shrink:0;
}
.tl-duration{
  display:flex;align-items:baseline;gap:2px;
  background:var(--paper2);border-radius:6px;
  padding:2px 8px;
}
.d-num{font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--ink2);}
.d-lbl{font-size:10px;color:var(--ink3);}

.tl-delete{
  width:24px;height:24px;border-radius:6px;
  background:transparent;border:none;
  color:var(--ink3);display:grid;place-items:center;
  cursor:pointer;
  opacity:0;pointer-events:none;
  transform:translateY(2px);
  transition:opacity 0.15s ease, transform 0.15s ease, color 0.12s ease, background 0.12s ease;
}
.tl-card:hover .tl-delete{opacity:1;pointer-events:auto;transform:translateY(0);}
.tl-delete:hover{color:var(--red-m);background:var(--red-l);}

/* 手機版刪除按鈕常駐 */
@media(max-width:600px){
  .tl-delete{opacity:1;pointer-events:auto;transform:translateY(0);}
  .tl-card{grid-template-columns:52px auto 1fr auto;}

  /* 當日描述卡片手機版維持原grid結構 */
  .tl-card-desc {
    display: grid !important;
    grid-template-columns: 52px auto 1fr auto !important;
    grid-template-rows: auto !important;
    padding: 8px 10px !important;
    border: 1px solid var(--cat-soft, var(--rule)) !important;
    margin-bottom: 4px !important;
    align-items: center !important;
  }
  .tl-card-desc .tl-tag-col { flex-direction: row; gap: 3px; }
  .tl-card-desc .tl-actions { flex-direction: column; align-items: flex-end; gap: 4px; }

  /* 活動小卡手機版 */
  .tl-card {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    grid-template-rows: auto auto;
    gap: 1px 6px;
    padding: 5px 6px;
    border: none;
    margin-bottom: -2px;
    background: transparent;
    border-radius: 8px;
  }
  .tl-card:hover {
    background: color-mix(in oklch, var(--cat-soft, var(--accent-l)) 25%, var(--paper));
    transform: none;
    box-shadow: none;
  }
  .tl-card-mobile-row1 {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
  }
  .tl-card-mobile-row2 {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding-left: 4px;
  }
  .tl-time-chip {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 52px;
    flex-shrink: 0;
    align-self: stretch;
    padding: 3px 0;
  }
  .t-start { font-size: 11px; }
  .t-end   { font-size: 10px; }
  .tl-cat-pill {
    font-size: 10px;
    padding: 1px 5px;
    flex-shrink: 0;
  }
  .tl-title { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-note  { font-size: 10px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl-duration { background: transparent; padding: 1px 4px; margin-left: auto; }
  .d-num { font-size: 10px; }
  .d-lbl { font-size: 9px; }
  .tl-delete { width: 20px; height: 20px; flex-shrink: 0; margin-left: auto; }
}

/* ── TIMELINE 雙欄佈局 ── */
.tl-row{
  display:flex;width:100%;
  justify-content:space-between;align-items:stretch;
  margin-top:6px;margin-bottom:6px;
  position:relative;
}
.tl-plan-col{
  width:300px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
  padding-left:10px;
}
.tl-act-col{
  width:450px;flex-shrink:0;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
}
.plan-card{
  width:100%;box-sizing:border-box;
  display:grid;grid-template-columns:64px 1fr auto;
  align-items:center;gap:10px;
  background:var(--paper);border:1px solid var(--cat-soft, var(--rule));
  border-radius:10px;padding:10px 12px;
  cursor:pointer;position:relative;overflow:hidden;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.plan-card:hover{
  background:color-mix(in oklch, var(--cat-soft, var(--accent-l)) 30%, var(--paper));
  border-color:color-mix(in oklch, var(--cat, var(--accent)) 25%, var(--cat-soft, var(--rule)));
  transform:translateY(-1px);
  box-shadow:0 4px 12px -4px oklch(0.4 0.05 320 / 0.08);
}
.plan-card:hover .tl-delete{opacity:1;pointer-events:auto;transform:translateY(0);}
.plan-card-tags{display:flex;flex-direction:column;gap:2px;min-width:0;overflow:hidden;}
.plan-card-tag-row{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;}
@media(max-width:600px){
  .tl-row{flex-direction:column;}
  .tl-plan-col,.tl-act-col{width:100%;}
}

/* Flags */
.flag{font-size:12px;line-height:1;}
.flag-important{color:var(--red-m);}
.flag-urgent{color:var(--amber-m);}

/* ── NOTES ── */
.notes-body{flex:1;display:flex;flex-direction:column;padding:10px;}
.notes-area{flex:1;min-height:160px;width:100%;padding:12px 14px;border:none;border-radius:10px;background:oklch(0.965 0.012 330);font-family:var(--sans);font-size:13px;color:var(--ink);resize:vertical;outline:none;line-height:1.85;
  background-image:repeating-linear-gradient(to bottom,transparent,transparent calc(1.85em - 1px),var(--rule) calc(1.85em - 1px),var(--rule) 1.85em);
  background-size:100% 1.85em;background-attachment:local;}
.notes-area::placeholder{color:var(--ink3);}
.notes-foot{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 10px;font-size:11.5px;color:var(--ink3);}
.primary-btn{border:none;border-radius:6px;cursor:pointer;font-family:var(--sans);font-weight:500;}
.primary-btn.plum{background:oklch(0.55 0.12 320);color:#fff;}
.primary-btn.plum:hover{opacity:.88;}
.primary-btn.small{font-size:12px;padding:4px 12px;}

/* ── REVIEW ── */
.review-body{display:flex;flex-direction:column;gap:8px;}
/* ── DAILY REVIEW ── */
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.rv-col{display:flex;flex-direction:column;gap:8px;}
.rv-col-head{display:flex;align-items:center;gap:8px;}
.rv-icon{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:12px;flex-shrink:0;}
.rv-col-title{font-size:12px;font-weight:600;color:var(--ink2);}
.review-input{width:100%;padding:12px 14px;background:var(--paper2);border:none;border-radius:10px;font-family:var(--sans);font-size:13.5px;color:var(--ink);outline:none;resize:vertical;min-height:110px;line-height:1.6;transition:all .15s;}
.review-input:focus{background:var(--paper);box-shadow:0 0 0 3px var(--accent-l);}
.review-input::placeholder{color:var(--ink3);}

/* ── WELLNESS ── */
.wl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px;}
.wl-card{padding:18px 20px;border-radius:14px;background:oklch(0.965 0.012 330);border:none;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px;}
.wl-card-head{display:flex;align-items:center;justify-content:space-between;}
.wl-card-body{display:flex;flex-direction:column;gap:12px;}
.wl-score-row{display:flex;align-items:baseline;gap:6px;}
.wl-score-denom{font-size:14px;color:var(--ink3);font-weight:400;}
.wl-card-label{font-size:12px;font-weight:600;color:var(--ink2);}
.wl-val{font-size:30px;font-weight:600;line-height:1.2;margin-bottom:4px;color:var(--card-accent,var(--ink));}
.wl-status-pill{font-size:11px;padding:2px 8px;border-radius:20px;background:color-mix(in oklch,var(--card-accent,var(--ink)) 14%,var(--paper));color:var(--card-accent,var(--ink));font-weight:500;white-space:nowrap;}
.wl-toggle-btn{background:none;border:none;cursor:pointer;padding:4px;border-radius:6px;color:var(--ink3);display:flex;align-items:center;line-height:1;}
.wl-toggle-btn:hover{background:var(--rule);}
.wl-cells{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;margin:2px 0;overflow:visible;}
.wl-cell{aspect-ratio:1/1;border-radius:6px;font-size:10px;min-width:0;display:grid;place-items:center;cursor:pointer;background:var(--paper);border:none;color:var(--ink3);transition:all .12s;padding:0;font-family:var(--sans);}
.wl-cell:hover{border-color:var(--ink3);}
.wl-scale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ink3);}
.wl-note-head{display:flex;align-items:center;justify-content:space-between;}
.wl-note-label{font-size:10px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;}
.wl-time-display{font-size:10px;color:var(--ink3);}
.wl-note-textarea{width:100%;padding:6px 8px;border-radius:8px;border:none;background:var(--paper);font-family:var(--sans);font-size:12px;color:var(--ink);outline:none;resize:none;height:64px;line-height:1.5;box-sizing:border-box;}
.wl-note-textarea:focus{border-color:var(--card-accent,var(--accent));}
.wl-note-textarea::placeholder{color:var(--ink3);}

/* ── LOG SAVE BAR ── */
.log-save-bar{position:sticky;bottom:16px;z-index:5;background:var(--paper);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow-md);padding:16px 22px;display:flex;align-items:center;justify-content:space-between;margin-top:16px;}
.log-save-status{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);}
.log-save-dot{display:flex;align-items:center;flex-shrink:0;filter:drop-shadow(0 0 3px var(--sage-l));}
.log-save-btn{padding:10px 22px;background:var(--ink);color:var(--paper);border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;font-family:var(--sans);}
.log-save-btn:hover{opacity:.88;}


.star-btn{font-size:16px;cursor:pointer;color:var(--rule2);transition:color .12s;background:none;border:none;padding:0 1px;line-height:1;}
.star-btn.lit{color:var(--amber-m);}
.star-btn:hover{color:var(--amber-l);}
/* ── BUBBLE TOGGLE + SLIDERS ── */
.review-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.bubble-toggle{background:none;border:none;cursor:pointer;font-size:20px;line-height:1;padding:2px 4px;border-radius:50%;transition:transform .15s,opacity .15s;opacity:.5;}
.bubble-toggle:hover{transform:scale(1.2);opacity:.9;}
.bubble-toggle.active{opacity:1;transform:scale(1.05);}
.slider-outer{display:flex;flex-direction:column;gap:4px;}
/* track-wrap: holds the svg tick-bar overlay + the range input */
.slider-track-wrap{position:relative;}
/* the range itself */
.morandi-range{
  -webkit-appearance:none;appearance:none;
  width:100%;height:5px;border-radius:3px;
  background:var(--rule2);outline:none;cursor:pointer;display:block;
  position:relative;z-index:1;
}
/* thumb: smaller solid filled circle, no border */
.morandi-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:11px;height:11px;border-radius:50%;
  cursor:pointer;transition:transform .1s;
  border:none;
}
.morandi-range::-webkit-slider-thumb:hover{transform:scale(1.3);}
.mood-range{accent-color:var(--rose);}
.mood-range::-webkit-slider-thumb{background:var(--rose);}
.fatigue-range{accent-color:var(--amber-m);}
.fatigue-range::-webkit-slider-thumb{background:var(--amber-m);}
.body-range{accent-color:var(--sage);}
.body-range::-webkit-slider-thumb{background:var(--sage);}
/* tick bar svg canvas sits below the range, aligned */
.slider-ticks-bar{
  display:flex;justify-content:space-between;
  padding:0 5px; /* roughly aligns with min/max thumb centres */
  margin-top:-1px;
}
.slider-ticks-bar span{
  width:5px;height:5px;background:var(--rule2);border-radius:1px;flex-shrink:0;
}
.slider-info-row{display:flex;align-items:center;gap:7px;margin-top:4px;}
.slider-emoji{font-size:18px;line-height:1;}
.slider-score{font-family:var(--mono);font-size:15px;font-weight:700;min-width:32px;}
.mood-score{color:var(--rose);}
.fatigue-score{color:var(--amber-m);}
.body-score{color:var(--sage);}
.slider-desc-text{font-size:11px;color:var(--ink2);}
.slider-extra-fields{display:flex;flex-direction:column;gap:5px;margin-top:6px;padding-top:6px;border-top:1px solid var(--rule);}
.extra-field-row{display:flex;flex-direction:column;gap:2px;}
.extra-label{font-size:10px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;}
.extra-input{padding:5px 8px;border-radius:var(--r);border:1px solid var(--rule2);background:var(--paper2);font-family:var(--mono);font-size:12px;color:var(--ink);outline:none;width:100%;}
.extra-input:focus{border-color:var(--accent);}
.extra-textarea{padding:5px 8px;border-radius:var(--r);border:1px solid var(--rule2);background:var(--paper2);font-family:var(--sans);font-size:12px;color:var(--ink);outline:none;resize:none;height:46px;line-height:1.5;width:100%;}
.extra-textarea:focus{border-color:var(--accent);}
.extra-textarea::placeholder{color:var(--ink3);}
/* inline time input next to score */
.time-inline-input{
  font-family:var(--mono);font-size:10px;color:var(--ink3);
  border:none;background:transparent;outline:none;
  width:72px;text-align:right;cursor:pointer;padding:0;
}
.time-inline-input:focus{color:var(--ink);}
/* tick bars — coloured per slider type */
.mood-range ~ .slider-ticks-bar span{background:var(--rose-l);}
.fatigue-range ~ .slider-ticks-bar span{background:var(--amber-l);}
.body-range ~ .slider-ticks-bar span{background:var(--sage-l);}

.save-strip{padding:9px 12px;border-top:1px solid var(--rule);display:flex;gap:6px;justify-content:flex-end;background:var(--paper2);}
.save-btn{padding:7px 18px;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-size:13px;font-weight:500;cursor:pointer;font-family:var(--sans);}
.save-btn:hover{opacity:.9;}
.cancel-btn{padding:7px 14px;background:var(--paper);color:var(--ink2);border:1px solid var(--rule2);border-radius:var(--r);font-size:13px;cursor:pointer;font-family:var(--sans);}

/* ── MODAL ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(50,40,60,0.35);z-index:200;align-items:center;justify-content:center;padding:16px;}
.modal-overlay.open{display:flex;}
.modal{background:var(--paper);border-radius:20px;border:none;width:100%;max-width:520px;box-shadow:0 20px 60px rgba(80,60,110,0.18);overflow:hidden;animation:modalIn .18s ease;}
@keyframes modalIn{from{opacity:0;transform:translateY(10px) scale(0.96)}to{opacity:1;transform:none}}
.modal-header{padding:14px 18px 11px;border-bottom:none;background:linear-gradient(135deg,var(--mauve-l),var(--paper2));display:flex;align-items:center;justify-content:space-between;}
.modal-title{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink);}
.modal-close{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(150,120,170,0.15);border:none;font-size:13px;color:var(--ink2);}
.modal-close:hover{background:rgba(150,120,170,0.3);}
.modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:13px;max-height:72vh;overflow-y:auto;}
.modal-footer{padding:10px 18px 14px;display:flex;gap:6px;justify-content:flex-end;border-top:none;background:var(--paper2);}

/* 目標分類彈窗 toggle 風格 */
.manage-pop-row{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-bottom:1px solid var(--rule);}
.manage-pop-row:last-child{border-bottom:none;}
.manage-pop-label{font-size:13.5px;color:var(--ink);font-weight:500;}
.manage-pop-row .manage-toggle{width:36px;height:20px;border-radius:99px;border:none;background:var(--rule);position:relative;cursor:pointer;transition:background 0.2s ease;flex-shrink:0;padding:0;}
.manage-pop-row .manage-toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:white;transition:transform 0.18s ease;}
.manage-pop-row .manage-toggle.on{background:var(--accent);}
.manage-pop-row .manage-toggle.on::after{transform:translateX(16px);}
.manage-pop-all-btn{flex:1;padding:8px;border-radius:8px;border:1px solid var(--rule);background:transparent;color:var(--ink2);font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--sans);transition:all 0.12s;}
.manage-pop-all-btn:hover{background:var(--plum-softer);color:var(--plum);border-color:var(--plum-soft);}

/* 目標分類篩選彈窗 */
.goal-cat-pop{
  position:absolute;
  width:220px;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:12px;
  box-shadow:0 8px 24px -8px oklch(0.4 0.05 320/0.2);
  z-index:50;
  display:none;
  overflow:hidden;
}
.goal-cat-pop.open{display:block;}
.goal-cat-pop-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px 6px;
}
.goal-cat-pop-title{
  font-size:11px;
  font-weight:700;
  color:var(--ink3);
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.goal-cat-pop-actions{
  display:flex;
  gap:6px;
  padding:8px 12px;
  border-top:1px solid var(--rule);
}
/* 覆蓋 manage-pop-row，目標篩選彈窗不要分隔線 */
.goal-cat-pop .manage-pop-row{
  border-bottom:none;
  padding:7px 12px;
}
.goal-cat-pop .manage-pop-row:hover{
  background:var(--paper2);
}

.field-group{display:flex;flex-direction:column;gap:4px;}
.field-label{font-size:10px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;}
.field-row{display:flex;gap:8px;}
.field-row .field-group{flex:1;}
.form-input{padding:8px 10px;border-radius:var(--r);border:none;background:var(--paper2);font-family:var(--sans);font-size:13px;color:var(--ink);outline:none;width:100%;}
.form-input:focus{background:var(--paper);box-shadow:0 0 0 3px var(--accent-l);}
textarea.form-input{resize:vertical;min-height:70px;line-height:1.6;}

/* Cat chips */
.cat-chips{display:flex;gap:5px;flex-wrap:wrap;}
.cat-chip{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:1.5px solid var(--rule);background:var(--paper2);transition:all .1s;user-select:none;}
.cat-chip:hover{border-color:var(--rule2);}
.cat-chip.sel{border-width:2px;}

/* Flag checkboxes */
.flag-row{display:flex;gap:8px;flex-wrap:wrap;}
.flag-check{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r);border:1.5px solid var(--rule2);cursor:pointer;font-size:12px;font-weight:500;transition:all .1s;user-select:none;background:var(--paper2);}
.flag-check:hover{border-color:var(--ink3);}
.flag-check.active-important{border-color:var(--red-m);background:var(--red-l);color:var(--red-m);}
.flag-check.active-urgent{border-color:var(--amber-m);background:var(--amber-l);color:var(--amber-m);}
.new-cat-input{flex:1;padding:6px 9px;border-radius:8px;border:1px solid var(--rule2);background:var(--paper2);font-family:var(--sans);font-size:12px;color:var(--ink);outline:none;}
.new-cat-input:focus{border-color:var(--accent);}
.new-cat-btn{padding:6px 12px;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-size:12px;cursor:pointer;font-family:var(--sans);}

/* ── CALENDAR ── */
.cal-layout{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start;}
.cal-main{display:flex;flex-direction:column;gap:12px;min-width:0;}
.cal-detail-panel{position:relative;width:360px;max-height:calc(100vh - 32px);overflow-y:auto;}

@media(max-width:1200px){
  .cal-layout{grid-template-columns:1fr 300px;}
  .cal-detail-panel{width:300px;}
}
@media(max-width:960px){
  .cal-view-toggle { display: none !important; }
  .cal-nav-center {
    position: relative;
    left: auto;
    transform: none;
    flex: 1;
    justify-content: center;
  }
  .cal-nav {
    justify-content: center;
  }
}
@media(max-width:900px){
  .cal-layout{grid-template-columns:1fr;}
  .cal-detail-panel{position:static;width:100%;max-height:none;}
}
.cal-wrap{background:var(--paper);border-radius:14px;border:none;padding:0;overflow:hidden;box-shadow:var(--shadow-md);}
.cal-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:none;margin-bottom:0;gap:14px;position:relative;}
.cal-nav-center{display:flex;align-items:center;justify-content:center;gap:16px;position:absolute;left:50%;transform:translateX(-50%);}
.cal-nav-arrow{width:34px;height:34px;border-radius:9px;background:transparent;border:none;color:var(--ink3);display:grid;place-items:center;cursor:pointer;transition:all 0.15s ease;flex-shrink:0;}
.cal-nav-arrow:hover{color:var(--plum);}
.cal-year-sep{font-size:16px;color:var(--ink4);margin:0 2px;font-weight:400;}
.cal-week-num{font-size:13px;color:var(--accent);font-weight:700;font-family:var(--mono);}
.cal-head-left{display:flex;align-items:center;gap:14px;}
.cal-head-right{display:flex;align-items:center;gap:12px;}
.cal-month-display{display:flex;align-items:baseline;gap:6px;}
.cal-month-num{font-size:30px!important;font-weight:700!important;color:var(--ink);letter-spacing:-0.02em;line-height:1;}
.cal-month-zh{font-size:13px;color:var(--ink3);font-weight:500;}
.cal-year{font-size:13px;color:var(--ink3);font-weight:700;}
.cal-nav-group{display:flex;align-items:center;gap:4px;padding:3px;background:var(--paper2);border-radius:10px;border:1px solid var(--rule);}
.cal-nav-btn{width:30px;height:30px;border-radius:7px;background:transparent;border:none;color:var(--ink2);display:grid;place-items:center;transition:all 0.15s ease;cursor:pointer;}
.cal-nav-btn:hover{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm);}
.cal-today-btn{padding:0 14px;height:30px;border-radius:7px;background:var(--paper);border:none;color:var(--ink);font-size:12.5px;font-weight:500;box-shadow:var(--shadow-sm);cursor:pointer;font-family:var(--sans);}
.cal-today-btn:hover{color:var(--accent);}
#cat-filter-wrap{display:flex;align-items:center;gap:12px;padding:14px 22px;flex-wrap:wrap;border-top:none;background:var(--paper);border-radius:0 0 14px 14px;}
.cal-view-toggle{display:flex;padding:3px;background:var(--paper2);border-radius:10px;border:none;}
.view-toggle-btn{padding:6px 16px;border-radius:7px;background:transparent;border:none;color:var(--ink2);font-size:12.5px;font-weight:500;transition:all 0.15s ease;font-family:var(--sans);cursor:pointer;}
.view-toggle-btn.active{background:var(--accent);color:white;box-shadow:0 2px 6px -2px oklch(0.5 0.08 320 / 0.35);}
.view-toggle-btn:not(.active):hover{background:var(--paper);color:var(--ink);}

/* ── MONTH GRID ── */
.month-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:auto;grid-auto-rows:minmax(118px,1fr);background:oklch(0.95 0.008 325);column-gap:0;row-gap:1px;}
.cal-dayname{min-height:0!important;height:auto!important;padding:8px 0!important;text-align:center;font-size:11px;font-weight:500;color:var(--ink3);letter-spacing:0.18em;text-transform:uppercase;border-bottom:1px solid oklch(0.95 0.008 325);background:var(--paper);}
.cal-day{min-height:118px;display:flex;flex-direction:column;font-size:12px;cursor:pointer;position:relative;transition:background 0.15s ease;padding:10px 11px;background:var(--paper);border:none;border-radius:0;min-width:0;overflow:hidden;}
.cal-day:hover{background:var(--paper2);}
.cal-day.today{background:oklch(0.965 0.014 320);}
.cal-day.today .cal-day-num{color:white;background:oklch(0.55 0.075 320);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;}
.cal-day.selected{background:linear-gradient(180deg,oklch(0.965 0.014 320),var(--paper));}
.cal-day.other-month{background:oklch(0.965 0.012 330);opacity:1;}
.cal-day.other-month .cal-day-num{color:oklch(0.76 0.018 320);}
.cal-day.empty{cursor:default;background:transparent;border:none;}
.cal-day-num{font-size:14px;font-weight:500;color:var(--ink);font-family:var(--mono);line-height:1;width:26px;height:26px;display:grid;place-items:center;}
.cal-day-row{display:flex;align-items:center;justify-content:space-between;height:26px;flex-shrink:0;margin-bottom:4px;}
.cal-day-goal{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:var(--accent);padding:1px 7px 1px 5px;border-radius:99px;background:var(--accent-l);}
.cal-day-flags{display:flex;gap:1px;position:absolute;top:3px;right:3px;}
.cal-flag-dot{font-size:7px;line-height:1;}

/* activity rows inside month cell — same-category spans grow horizontally */
.cal-day-cats{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
  margin-top:2px;
}
.cal-cat-pill{display:inline-flex;align-items:center;padding:1px 7px;border-radius:99px;background:var(--cat-soft);color:var(--cat);font-size:10.5px;line-height:1.5;font-weight:500;white-space:nowrap;}

/* ── WEEK VIEW ── */
/* fixed-height time grid: each hour = 52px */
:root{--hr-px:52px;}
.week-wrap{overflow-y:auto;max-height:calc(100vh - 220px);}
.week-wrap::-webkit-scrollbar{width:6px;}
.week-wrap::-webkit-scrollbar-thumb{background:var(--rule);border-radius:99px;}
.week-wrap::-webkit-scrollbar-track{background:transparent;}
.week-grid{display:grid;grid-template-columns:42px repeat(7,1fr);gap:0;position:relative;}
.week-time-col-head{border-bottom:1px solid color-mix(in oklch, var(--rule2) 40%, transparent);background:var(--paper);position:sticky;top:0;z-index:10;}
.week-day-head{
  text-align:center;padding:5px 2px 4px;
  font-size:11px;font-weight:600;color:var(--ink2);
  border-bottom:1px solid color-mix(in oklch, var(--rule2) 40%, transparent);
  cursor:pointer;background:var(--paper);
  transition:background .1s;position:sticky;top:0;z-index:10;
}
.week-day-head:hover{background:var(--paper2);}
.week-day-head.today{color:var(--accent);font-weight:700;}
.week-day-head{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 8px;}
.week-day-head .wk-day-label{font-size:10px;font-weight:500;color:var(--ink3);letter-spacing:0.1em;text-transform:uppercase;}
.week-day-head .wk-num{font-size:16px;font-weight:600;line-height:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;}
.week-day-head .wk-num-today{background:var(--accent);color:white;}
.wk-head-pills{display:flex;align-items:center;justify-content:center;gap:3px;min-height:16px;flex-wrap:wrap;}
.wk-head-pill{font-size:9px;font-weight:500;padding:1px 5px;border-radius:99px;white-space:nowrap;max-width:60px;overflow:hidden;text-overflow:ellipsis;}
.wk-head-goal{display:inline-flex;align-items:center;gap:2px;font-size:9px;font-weight:600;color:var(--accent);padding:1px 5px;border-radius:99px;background:var(--accent-l);}
.week-day-head.today .wk-day-label{color:var(--accent);}

/* time slots */
.week-time-slot{
  height:var(--hr-px);
  display:flex;align-items:flex-start;
  padding-top:2px;padding-right:5px;
  font-family:var(--mono);font-size:9px;color:var(--ink3);
  text-align:right;justify-content:flex-end;
  border-top:none;
  box-sizing:border-box;
}
.week-day-col{
  border-left:1px solid color-mix(in oklch, var(--rule) 40%, transparent);
  border-top:1px solid color-mix(in oklch, var(--rule) 40%, transparent);
  position:relative;
  height:var(--hr-px);
  box-sizing:border-box;
  cursor:pointer;
  transition:background .08s;
  overflow:visible;
}
.week-day-col:hover{background:rgba(157,127,168,.05);}
.week-day-col.today-col{background:rgba(157,127,168,.06);}

/* activity card inside the grid — positioned absolutely, height = duration */
.week-entry{
  position:absolute;
  left:2px;right:2px;
  border-radius:6px;
  border-left:none;
  padding:3px 5px;
  font-size:10px;
  overflow:hidden;
  cursor:pointer;
  box-sizing:border-box;
  transition:filter .15s, box-shadow .15s;
  z-index:1;
  min-height:18px;
  box-shadow:0 3px 10px -2px oklch(0.4 0.05 320/0.28);
}
.week-entry:hover{filter:brightness(.88);box-shadow:0 6px 20px -3px oklch(0.4 0.05 320/0.45);}
.week-entry-inner{display:flex;flex-direction:column;gap:1px;height:100%;overflow:hidden;}
.week-entry-time{font-family:var(--mono);font-size:10px;font-weight:600;color:inherit;opacity:.8;flex-shrink:0;white-space:nowrap;line-height:1.4;}
.week-entry-name{overflow:hidden;font-weight:600;line-height:1.4;white-space:normal;word-break:break-word;}
.week-entry-desc{font-size:9px;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}

/* 週視圖卡片 tooltip */
.week-entry-tooltip {
  position: fixed;
  z-index: 25;
  background: var(--ink);
  color: white;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 12px oklch(0.3 0.05 320/0.25);
  max-width: 200px;
  white-space: normal;
}

/* Day detail */
.day-detail-card{background:var(--paper);border:none;border-radius:14px;box-shadow:var(--shadow-md);overflow:hidden;display:flex;flex-direction:column;}
.detail-head{padding:18px 22px 16px;border-bottom:none;background:linear-gradient(180deg,var(--plum-softer),var(--paper));flex-shrink:0;}
.detail-date-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.detail-date-main{display:flex;align-items:baseline;gap:10px;}
.detail-date-num{font-size:38px;font-weight:700;color:var(--ink);line-height:1;letter-spacing:-0.02em;}
.detail-date-meta{display:flex;flex-direction:column;gap:2px;}
.detail-date-month{font-size:12px;color:var(--ink3);letter-spacing:0.06em;}
.detail-date-week{font-size:13px;color:var(--ink);font-weight:500;}
.detail-body{padding:6px 16px 22px;overflow-y:auto;flex:1;max-height:calc(100vh - 200px);}
.iconbtn{width:28px;height:28px;border-radius:7px;background:transparent;border:1px solid transparent;color:var(--ink3);display:grid;place-items:center;transition:all 0.15s ease;cursor:pointer;}
.iconbtn:hover{background:var(--paper2);color:var(--ink);border-color:var(--rule);}
.cal-modules{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.detail-toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0 10px;border-bottom:none;margin-bottom:14px;}
.detail-body::-webkit-scrollbar{width:6px;}
.detail-body::-webkit-scrollbar-thumb{background:var(--rule);border-radius:99px;}
.detail-body::-webkit-scrollbar-track{background:transparent;}
.manage-pop{position:absolute;right:22px;top:64px;width:252px;padding:12px;background:var(--paper);border:1px solid var(--rule);border-radius:14px;box-shadow:0 10px 30px -10px oklch(0.4 0.05 320/0.25);z-index:10;display:none;}
.manage-pop.open{display:block;}
.manage-pop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.manage-pop h4{font-size:12px;margin:0;letter-spacing:0.06em;color:var(--ink3);text-transform:uppercase;font-weight:500;}
.manage-close{width:22px;height:22px;border-radius:6px;background:transparent;border:none;color:var(--ink3);display:grid;place-items:center;cursor:pointer;transition:all 0.15s ease;}
.manage-close:hover{background:var(--paper2);color:var(--ink);}
.manage-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:7px;transition:background 0.15s ease;cursor:pointer;}
.manage-row:hover{background:var(--paper2);}
.manage-row span{font-size:12.5px;color:var(--ink);flex:1;}
.manage-toggle{width:28px;height:16px;border-radius:99px;background:var(--rule);position:relative;transition:background 0.15s ease;flex-shrink:0;border:none;cursor:pointer;}
.manage-toggle::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:white;transition:transform 0.18s ease;}
.manage-toggle.on{background:var(--accent);}
.manage-toggle.on::after{transform:translateX(12px);}
.manage-pop-actions{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--rule);}
.manage-pop-actions button{flex:1;padding:5px 8px;border-radius:6px;background:var(--paper2);border:1px solid var(--rule);color:var(--ink2);font-size:11.5px;cursor:pointer;transition:all 0.15s ease;font-family:var(--sans);}
.manage-pop-actions button:hover{background:var(--accent-l);color:var(--accent);border-color:var(--accent-l);}
.manage-backdrop{position:fixed;inset:0;z-index:9;background:transparent;}
.cal-module{background:oklch(0.975 0.009 330);border:none;border-radius:10px;overflow:hidden;box-shadow:var(--shadow-sm);}
.cal-module-head{display:flex;align-items:center;gap:8px;width:100%;padding:10px 12px;background:transparent;border:none;font-family:var(--sans);cursor:pointer;text-align:left;transition:background 0.12s;}
.cal-module-head:hover{background:var(--paper3);}
.cal-module-icon{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex-shrink:0;opacity:0.9;}
.cal-module-title{font-size:12px;color:var(--ink2);font-weight:500;letter-spacing:0.04em;flex:1;}
.cal-module-value{font-weight:600;font-size:13px;color:var(--ink);margin-left:auto;}
.cal-module-chev{font-size:11px;color:var(--ink3);transition:transform 0.2s;margin-left:6px;}
.cal-module-chev.open{transform:rotate(90deg);}
.cal-module-body{padding:0 12px 12px;}
.day-detail-title{font-family:var(--serif);font-size:14px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}




/* ── STATS ── */
.stats-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;}
@media(max-width:500px){.stats-summary{grid-template-columns:1fr 1fr;}}
.stat-card{background:var(--paper);border-radius:var(--r-xl);border:1px solid var(--rule2);padding:12px 14px;box-shadow:var(--shadow);}
.stat-label{font-size:10px;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px;}
.stat-val{font-size:22px;font-weight:700;font-family:var(--mono);color:var(--ink);}
.stat-sub{font-size:11px;color:var(--ink2);margin-top:1px;}

.act-stat-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--paper);border-radius:var(--r);border:1px solid var(--rule);margin-bottom:5px;}
.act-stat-name{flex:1;font-size:13px;font-weight:500;}
.act-stat-bar-wrap{width:80px;height:5px;background:var(--paper2);border-radius:3px;overflow:hidden;}
.act-stat-bar{height:100%;border-radius:3px;}
.act-stat-count{font-size:11px;color:var(--ink2);font-family:var(--mono);min-width:36px;text-align:right;}
.act-stat-pct{font-size:10px;color:var(--ink3);min-width:34px;text-align:right;}

.card{background:var(--paper);border-radius:var(--r-xl);border:1px solid var(--rule2);padding:14px 16px;box-shadow:var(--shadow);}
.card-title{font-size:11px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;}

/* Date range picker */
.range-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.range-input{padding:7px 10px;border-radius:var(--r);border:1px solid var(--rule2);background:var(--paper2);font-family:var(--mono);font-size:12px;color:var(--ink);outline:none;}
.range-input:focus{border-color:var(--accent);}
.range-sep{font-size:12px;color:var(--ink3);}
.range-btn{padding:7px 14px;background:var(--accent);color:#fff;border:none;border-radius:var(--r);font-size:12px;cursor:pointer;font-family:var(--sans);}
.range-presets{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px;}
.preset-btn{padding:4px 10px;border-radius:20px;font-size:11px;border:1px solid var(--rule2);background:var(--paper2);cursor:pointer;color:var(--ink2);font-family:var(--sans);}
.preset-btn:hover{background:var(--paper3);}
.preset-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}

/* 統計頁連勝條 — 新版設計隱藏 */
#panel-stats .streak-bar {
  display: none;
}
.streak-text{font-size:13px;color:var(--amber-m);font-weight:500;}

/* ── GOALS ── */

/* ── TOAST ── */
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 18px;border-radius:20px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .25s;z-index:300;}
.toast.show{opacity:1;}

/* ── CONFIRM DIALOG ── */
.confirm-overlay{display:none;position:fixed;inset:0;background:rgba(60,45,40,0.38);z-index:500;align-items:center;justify-content:center;}
.confirm-overlay.open{display:flex;}
.confirm-box{background:var(--paper);border-radius:var(--r-xl);border:1px solid var(--rule2);padding:24px 28px;max-width:320px;width:90%;box-shadow:0 16px 48px rgba(100,70,60,0.18);text-align:center;}
.confirm-msg{font-size:14px;color:var(--ink);margin-bottom:18px;line-height:1.6;}
.confirm-btns{display:flex;gap:8px;justify-content:center;}
.confirm-yes{padding:8px 22px;background:var(--red-m);color:#fff;border:none;border-radius:var(--r);font-size:13px;cursor:pointer;font-family:var(--sans);}
.confirm-yes:hover{opacity:.9;}
.confirm-no{padding:8px 22px;background:var(--paper2);color:var(--ink2);border:1px solid var(--rule2);border-radius:var(--r);font-size:13px;cursor:pointer;font-family:var(--sans);}
.confirm-no:hover{background:var(--paper3);}


/* ── CATEGORY MANAGER ── */
.cat-manager-row{display:flex;align-items:center;gap:6px;padding:5px 6px;border-radius:8px;transition:background .1s;}
.cat-manager-row:hover{background:var(--paper2);}
.cat-color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.cat-name-display{flex:1;font-size:13px;color:var(--ink);}
.cat-name-edit{flex:1;font-size:13px;padding:2px 6px;border-radius:5px;border:1px solid var(--rule2);background:var(--paper);font-family:var(--sans);color:var(--ink);outline:none;}
.cat-name-edit:focus{border-color:var(--accent);}
.cat-row-btn{font-size:11px;padding:2px 7px;border-radius:5px;border:1px solid var(--rule);background:var(--paper);cursor:pointer;color:var(--ink2);font-family:var(--sans);}
.cat-row-btn:hover{background:var(--paper2);}
.cat-row-btn.del-cat{color:var(--red-m);border-color:var(--red-l);}
.cat-row-btn.del-cat:hover{background:var(--red-l);}

.new-cat-color-sel{padding:5px 7px;border-radius:8px;border:1px solid var(--rule2);background:var(--paper2);font-family:var(--sans);font-size:11px;color:var(--ink);outline:none;cursor:pointer;}
.new-cat-btn{padding:6px 12px;background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:12px;cursor:pointer;font-family:var(--sans);white-space:nowrap;}
.new-cat-btn:hover{opacity:.88;}


.data-btn{
  padding:5px 10px;border-radius:20px;font-size:11px;font-weight:500;
  background:var(--paper2);border:1px solid var(--rule2);
  color:var(--ink2);cursor:pointer;font-family:var(--sans);
  display:inline-flex;align-items:center;gap:3px;transition:all .12s;
  white-space:nowrap;
}
.data-btn:hover{background:var(--accent-l);border-color:var(--accent);color:var(--accent);}
.ghost-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;background:transparent;border:1px solid var(--rule);color:var(--ink2);font-size:12px;font-weight:500;cursor:pointer;font-family:var(--sans);transition:all .12s;}
.ghost-btn:hover{background:var(--paper2);color:var(--ink);}
.ghost-btn.small{font-size:11px;padding:3px 8px;}


/* ── DETAIL MANAGE ── */
.detail-manage-btn{
  background:transparent;border:none;
  padding:0;border-radius:6px;
}
.detail-manage-btn:hover{background:var(--paper2);color:var(--accent);}
.detail-field-row{
  display:flex;align-items:center;gap:7px;
  padding:7px 9px;border-radius:var(--r-lg);
  background:var(--paper2);border:1.5px solid var(--rule);
  cursor:pointer;user-select:none;transition:all .12s;
  min-width:0;overflow:hidden;
}
.detail-field-row:hover{border-color:var(--rule2);background:var(--paper3);}
.detail-field-row.checked{border-color:var(--accent);background:var(--accent-l);}
.detail-field-check{
  width:16px;height:16px;border-radius:4px;
  border:1.5px solid var(--rule2);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:10px;transition:all .12s;
}
.detail-field-row.checked .detail-field-check{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.detail-field-label{font-size:13px;color:var(--ink);font-weight:500;}
.detail-field-desc{font-size:11px;color:var(--ink3);margin-left:auto;}


/* ── STATS CONTROLS ── */
.stats-controls-card{
  background:var(--paper);border-radius:var(--r-xl);
  border:1px solid var(--rule2);padding:12px 14px;
  box-shadow:var(--shadow);margin-bottom:10px;
  display:flex;flex-direction:column;gap:8px;
}
.stats-ctrl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.stats-ctrl-label{
  font-size:10px;font-weight:700;color:var(--ink3);
  text-transform:uppercase;letter-spacing:.05em;
  white-space:nowrap;min-width:52px;
}
.stats-ctrl-divider{height:1px;background:var(--rule);margin:2px 0;}

/* chart toggle chips */
.chart-toggle-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:20px;
  border:1.5px solid var(--rule2);background:var(--paper2);
  font-size:12px;color:var(--ink2);cursor:pointer;
  transition:all .12s;user-select:none;
}
.chart-toggle-chip input{display:none;}
.chart-toggle-chip:has(input:checked){
  border-color:var(--accent);background:var(--accent-l);color:var(--accent);font-weight:500;
}
.chart-toggle-chip span::before{content:'○ ';}
.chart-toggle-chip:has(input:checked) span::before{content:'● ';}

/* stats cat chips */
.stats-cat-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 9px;border-radius:20px;font-size:11px;
  font-weight:500;cursor:pointer;user-select:none;
  border:1.5px solid var(--rule2);background:var(--paper2);
  color:var(--ink2);transition:all .12s;
}
.stats-cat-chip.active{border-width:2px;}
.stats-cat-chip .chip-check{font-size:9px;opacity:.7;}

/* donut chart */
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.donut-legend{display:flex;flex-direction:column;gap:5px;flex:1;min-width:120px;}
.donut-legend-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink2);}
.donut-legend-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.donut-legend-name{flex:1;}
.donut-legend-val{font-family:var(--mono);font-size:10px;color:var(--ink3);}

/* cards row */
.stats-cards-row{display:flex;flex-wrap:wrap;gap:6px;}
.stats-cat-card{
  display:flex;flex-direction:column;align-items:center;
  border-radius:var(--r-lg);padding:8px 0;
  font-size:11px;font-weight:500;
  width:var(--card-w,80px);
  flex-shrink:0;
}
.stats-cat-card-name{font-weight:600;color:var(--ink);}
.stats-cat-card-cnt{font-family:var(--mono);font-size:12px;font-weight:700;margin-top:2px;}
.stats-cat-card-pct{font-size:10px;color:var(--ink3);}

/* bar chart */
.bar-chart-wrap{overflow-x:auto;}
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:120px;padding:0 4px;}
.bar-col{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:32px;}
.bar-rect{width:100%;border-radius:4px 4px 0 0;transition:height .3s;min-height:2px;}
.bar-label{font-size:9px;color:var(--ink3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:50px;}
.bar-val{font-family:var(--mono);font-size:9px;color:var(--ink2);}


/* ── GOALS LAYOUT ── */
.goals-layout{display:grid;grid-template-columns:26% 74%;gap:12px;min-height:calc(100vh - 148px);}
/* left column */
.goals-left{
  display:flex;flex-direction:column;gap:10px;
  background:var(--paper);border:none;border-radius:14px;
  padding:18px;box-shadow:var(--shadow-md);
  position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;
}
.goals-list-header{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:12px;border-bottom:none;
  width:100%;
}
.goals-list-title-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;}
.goals-title-row { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; }
.goals-list-label{font-size:10.5px;font-weight:600;color:var(--ink3);letter-spacing:0.16em;font-family:var(--mono);}
.goals-list-title{font-family:var(--serif);font-size:18px;font-weight:600;color:var(--ink);line-height:1.2;}
.goal-add-btn-new{
  padding:6px 14px;border-radius:8px;border:none;
  background:var(--ink);color:var(--paper);
  font-size:12px;font-weight:500;cursor:pointer;font-family:var(--sans);
  white-space:nowrap;transition:opacity .12s;
}
.goal-add-btn-new:hover{opacity:.82;}
.goals-search-bar{
  display:flex;align-items:center;gap:7px;
  padding:7px 11px;background:var(--paper2);
  border-radius:9px;border:none;transition:box-shadow .12s;
}
.goals-search-bar:focus-within{box-shadow:0 0 0 3px var(--accent-l);}
.goals-search-icon{font-size:12px;color:var(--ink3);flex-shrink:0;line-height:1;}
.goals-search-input{flex:1;border:none;background:transparent;outline:none;font-size:12px;color:var(--ink);font-family:var(--sans);}
.goals-search-input::placeholder{color:var(--ink3);}
.goals-filter-btn{flex-shrink:0;width:24px;height:24px;border-radius:6px;border:none;background:var(--paper);font-size:14px;color:var(--ink3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;padding:0;line-height:1;}
.goals-filter-btn:hover{background:var(--accent-l);border-color:var(--accent);color:var(--accent);}
.goals-list-scroll{display:flex;flex-direction:column;gap:4px;overflow-y:auto;}

@media(max-width:700px){
  .goals-layout{
    grid-template-columns: 1fr;
    min-height: unset;
  }
  .goals-left{
    position: static !important;
    max-height: unset !important;
    overflow-y: visible;
  }
  .goals-right{
    overflow-y: visible;
  }
  .edit-head {
    padding: 14px 16px;
  }
  .edit-head-title {
    font-size: 17px;
  }
  .edit-grid {
    grid-template-columns: 1fr !important;
    padding: 16px;
    gap: 14px;
  }

}

/* goal card in left list */
.goal-list-card{
  background:var(--paper);border-radius:10px;border:none;
  padding:10px 12px;cursor:pointer;transition:all .15s;position:relative;
  display:flex;flex-direction:column;gap:8px;
  box-shadow:0 2px 8px -2px oklch(0.4 0.05 320/0.10), 0 1px 0 oklch(0.92 0.01 320/0.6);
}
.goal-list-card:hover{background:var(--paper2);box-shadow:0 4px 12px -4px oklch(0.4 0.05 320/0.15);}
.goal-list-card.active{border:none;box-shadow:0 0 0 2px var(--accent),0 4px 12px -4px oklch(0.4 0.05 320/0.15);}
.goal-lc-top{display:flex;align-items:center;gap:8px;}
.goal-lc-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.goal-lc-name{flex:1;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.goal-lc-badges{display:flex;gap:4px;flex-shrink:0;}
.goal-lc-badge{font-size:10px;font-family:var(--mono);font-weight:600;padding:2px 6px;border-radius:5px;white-space:nowrap;}
.goal-list-progress-bar{height:4px;background:var(--rule);border-radius:99px;overflow:hidden;}
.goal-list-progress-fill{height:100%;border-radius:99px;transition:width .4s;}
.goal-list-meta{display:flex;justify-content:space-between;font-size:11px;color:var(--ink3);font-family:var(--mono);}
.goal-list-del{
  position:absolute;bottom:8px;right:10px;
  font-size:10px;padding:2px 7px;border-radius:20px;
  border:1px solid var(--rule);background:var(--paper);
  color:var(--ink3);cursor:pointer;font-family:var(--sans);
  opacity:0;transition:opacity .15s;
}
.goal-list-card:hover .goal-list-del{opacity:1;}
.goal-list-del:hover{background:var(--red-l);color:var(--red-m);border-color:var(--red-l);}

/* right column */
.goals-right{overflow-y:auto;overflow-x:hidden;}
#goals-detail-area{padding:0;display:flex;flex-direction:column;gap:16px;min-height:100%;}
.goals-empty-hint{color:var(--ink3);font-size:13px;padding:64px 24px;text-align:center;}

/* ── HERO CARD ── */
.goal-hero{
  background:var(--paper);border-radius:var(--r-xl);
  padding:28px 32px;position:relative;overflow:hidden;
  box-shadow:var(--shadow);
}
.goal-hero-bg{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}
.goal-hero-top-actions{position:absolute;top:16px;right:20px;display:flex;gap:6px;}
.goal-hero-btn{background:transparent;border:none;cursor:pointer;display:grid;place-items:center;color:var(--ink3);border-radius:7px;padding:5px;transition:color .12s,background .12s;}
.goal-hero-btn:hover{background:var(--paper2);color:var(--ink);}
.goal-hero-grid{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;position:relative;}
.goal-hero-left{display:flex;flex-direction:column;gap:10px;}
.goal-hero-chips{display:flex;flex-wrap:wrap;gap:6px;}
.goal-hero-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:500;}
.goal-hero-chip-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;display:inline-block;}
.goal-hero-title{font-size:34px;font-weight:700;color:var(--ink);letter-spacing:-0.01em;line-height:1.15;font-family:var(--serif);margin:0;}
.goal-hero-desc{font-size:13px;color:var(--ink2);margin:0;line-height:1.5;}
.goal-hero-dates{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink3);flex-wrap:wrap;}
.goal-hero-date-sep{opacity:.5;}
.goal-hero-days-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;}
.goal-ring-svg{display:block;flex-shrink:0;}

/* ── METRICS GRID ── */
.goal-metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:860px){.goal-metrics-grid{grid-template-columns:repeat(2,1fr);}}
.goal-metric-card{
  background:var(--paper);border-radius:var(--r-xl);
  padding:16px 18px;
  box-shadow:var(--shadow);
}
.metric-label{font-size:11.5px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.metric-value{font-size:26px;font-weight:600;color:var(--ink);font-family:var(--mono);line-height:1.1;margin-bottom:4px;}
.metric-sub{font-size:11px;color:var(--ink3);}

@media(max-width:700px){
  .goal-metric-card {
    padding: 10px 12px !important;
  }
  .metric-value {
    font-size: 20px !important;
  }
  .metric-label {
    font-size: 10px !important;
    margin-bottom: 3px !important;
  }

  /* 子任務標題手機版允許換行 */
  .task-title-input {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

}

/* ── TASKS OUTER CARD ── */
.goal-tasks-outer{background:var(--paper);border-radius:var(--r-xl);padding:22px 24px;box-shadow:var(--shadow);}
.goal-tasks-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.goal-tasks-label{font-size:14px;font-weight:600;color:var(--ink);}
.goal-add-task-btn{background:transparent;border:none;cursor:pointer;color:var(--ink3);}
.goal-add-task-btn:hover{background:var(--paper2);color:var(--ink);}
.goal-tasks-header-left{display:flex;align-items:center;gap:4px;}

/* ── TASK FIELDS ── */
.task-check{
  width:18px;height:18px;border-radius:5px;flex-shrink:0;
  border:2px solid var(--rule2);background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .12s;
}
.task-row.done .task-check{background:var(--accent);border-color:var(--accent);color:#fff;}
.task-check-icon{font-size:10px;color:#fff;display:none;}
.task-row.done .task-check-icon{display:block;}
.task-title-input{
  width:100%;font-size:13px;font-weight:500;color:var(--ink);
  border:none;background:transparent;outline:none;font-family:var(--sans);
  line-height:1.4;min-width:0;
}
.task-row.done .task-title-input{color:var(--ink3);text-decoration:line-through;}
.task-tags-wrap{display:flex;gap:3px;flex-wrap:wrap;align-items:center;}
/* ── DONE ZONE ROWS ── */
.done-row{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;transition:background .1s;}
.done-row:hover{background:var(--paper2);}
.done-row-dot{width:6px;height:6px;border-radius:50%;background:var(--sage);flex-shrink:0;}
.done-row-name{flex:1;font-size:12px;font-weight:500;color:var(--ink2);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.done-row-date{font-size:10px;color:var(--ink3);font-family:var(--mono);white-space:nowrap;flex-shrink:0;}
.done-row-del{font-size:10px;padding:1px 6px;border-radius:6px;border:1px solid var(--rule);background:transparent;color:var(--ink3);cursor:pointer;opacity:0;transition:opacity .12s;}
.done-row:hover .done-row-del{opacity:1;}
.done-row-del:hover{background:var(--red-l);color:var(--red-m);}
.done-row-goto{font-size:11px;background:none;border:none;cursor:pointer;color:var(--accent);padding:1px 3px;border-radius:4px;opacity:0;transition:opacity .12s;line-height:1;}
.done-row:hover .done-row-goto{opacity:1;}
.done-row-goto:hover{background:var(--accent-l);}

/* habit type progress */
.habit-progress-detail{padding:10px 16px;font-size:12px;color:var(--ink2);}

/* goal form (right panel) */
/* ── GOAL EDIT FORM ── */
.goal-form-wrap{padding:16px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;}
.edit-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;
  background:var(--paper);border:none;border-radius:14px;
  box-shadow:var(--shadow-md);
}
.edit-head-title{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--ink);}
.edit-head-btns{display:flex;gap:8px;align-items:center;}
.gf-cancel-btn{padding:7px 14px;border-radius:8px;border:none;background:var(--paper2);color:var(--ink2);font-size:13px;cursor:pointer;font-family:var(--sans);transition:all .12s;}
.gf-cancel-btn:hover{background:var(--paper2);}
.gf-save-btn{padding:7px 16px;border-radius:8px;border:none;background:var(--ink);color:var(--paper);font-size:13px;font-weight:500;cursor:pointer;font-family:var(--sans);transition:opacity .12s;}
.gf-save-btn:hover{opacity:.82;}
.edit-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  padding:28px;
  background:var(--paper);border:none;border-radius:14px;
  box-shadow:var(--shadow-md);
}
.gf-span-2{grid-column:1/-1;}
.goal-form-field{display:flex;flex-direction:column;gap:5px;}
.goal-form-label{font-size:12px;font-weight:500;color:var(--ink2);letter-spacing:0.04em;}
.text-input{
  width:100%;padding:10px 13px;border-radius:9px;
  background:var(--paper2);border:none;
  font-family:var(--sans);font-size:14px;color:var(--ink);
  outline:none;transition:box-shadow .12s;
}
.text-input:focus{box-shadow:0 0 0 3px var(--accent-l);}
select.text-input{cursor:pointer;}
.date-input-wrap{
  display:flex;align-items:center;gap:9px;
  padding:9px 13px;border-radius:9px;
  background:var(--paper2);border:none;
  transition:box-shadow .12s;
}
.date-input-wrap:focus-within{box-shadow:0 0 0 3px var(--accent-l);}
.date-input-icon{font-size:13px;color:var(--ink3);flex-shrink:0;line-height:1;display:flex;align-items:center;}
.date-input-native{
  border:none;background:transparent;outline:none;
  font-family:var(--mono);font-size:13px;color:var(--ink);
  flex:1;min-width:0;cursor:pointer;
}
.date-input-native::-webkit-calendar-picker-indicator{opacity:.45;cursor:pointer;}
.gf-cat-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.gf-cat-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:2px;}
.gf-cat-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 13px;border-radius:8px;
  background:oklch(0.945 0.018 323);border:1.5px solid transparent;
  font-size:13px;color:var(--ink2);
  cursor:pointer;user-select:none;transition:background .15s,color .15s,border-color .15s;
}
.gf-cat-chip:hover{background:var(--paper);color:var(--ink);}
.cat-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;display:inline-block;}
.gf-cat-chip.sel{
  font-weight:500;
  background:var(--cat-soft,var(--paper2));
  color:var(--cat,var(--ink));
  border-color:var(--cat-soft,transparent);
}

/* ── PRIO CARDS ── */
.prio-card{padding:18px 20px;border-radius:12px;background:var(--paper2);border:none;display:flex;flex-direction:column;}
.prio-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;}
.prio-eyebrow{font-size:10px;font-weight:700;color:var(--ink3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px;}
.prio-hint{font-size:11.5px;color:var(--ink3);margin-top:2px;}
.prio-current-val{font-size:30px;font-weight:600;letter-spacing:-0.02em;line-height:1;}
.prio-current-val i{font-size:13px;color:var(--ink3);font-weight:400;margin-left:3px;}
.urgency-color{color:var(--accent);}
.importance-color{color:var(--rose);}
.prio-cells{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;}
.prio-cell{
  aspect-ratio:1.4/1;border-radius:9px;
  background:var(--paper);border:none;
  color:var(--ink3);font-size:16px;font-weight:500;
  display:grid;place-items:center;
  cursor:pointer;padding:0;transition:all 0.18s ease;
  box-shadow:var(--shadow-sm);
}
.prio-cell:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
.urgency-cell.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 4px 12px -4px var(--accent);}
.importance-cell.active{background:var(--rose);border-color:var(--rose);color:#fff;box-shadow:0 4px 12px -4px var(--rose);}
.prio-scale{display:flex;justify-content:space-between;margin-top:10px;padding:0 4px;font-size:10.5px;color:var(--ink3);letter-spacing:0.05em;}
.prio-scale span:nth-child(2){color:var(--ink4);}

/* legacy goal-form-actions kept for non-goal forms */
.goal-form-actions{display:flex;gap:6px;margin-top:4px;}


/* ── GOAL SORT BAR ── */
.goal-sort-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:0 2px;}
.sort-bar-label{font-size:10px;font-weight:600;color:var(--ink3);letter-spacing:.04em;white-space:nowrap;}
.sort-check-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:4px 9px;border-radius:7px;font-size:11px;
  border:1px solid var(--rule);background:var(--paper);
  color:var(--ink2);cursor:pointer;user-select:none;transition:all .12s;
}
.sort-check-chip.active{border-color:var(--accent);background:var(--accent-l);color:var(--accent);font-weight:600;}
.sort-priority-num{font-size:9px;font-family:var(--mono);background:var(--accent);color:#fff;border-radius:50%;width:14px;height:14px;display:inline-flex;align-items:center;justify-content:center;}

/* flame/bolt rating buttons */
.rating-row{display:flex;align-items:center;gap:4px;}
.rating-btn{font-size:16px;cursor:pointer;background:none;border:none;padding:0 1px;opacity:.25;transition:opacity .1s, transform .1s;line-height:1;}
.rating-btn.active{opacity:1;}
.rating-btn:hover{transform:scale(1.2);}

/* goal card urgency/importance indicators */
.goal-card-flags{display:flex;align-items:center;gap:4px;font-size:11px;font-family:var(--mono);color:var(--ink3);}

/* detail header layout */

/* drag handle */
.task-drag-handle{
  cursor:grab;color:var(--ink3);font-size:13px;
  padding:2px 3px;opacity:0;transition:opacity .1s;flex-shrink:0;
  user-select:none;
}
.task-row:hover .task-drag-handle{opacity:.45;}
.task-drag-handle:hover{opacity:.8;}
.task-drag-handle:active{cursor:grabbing;}
.task-row.dragging{opacity:.5;border:1px dashed var(--accent);}
.task-row.drag-over{border-top:2px solid var(--accent);}


/* task date field */
.task-date-wrap{
  display:flex;align-items:center;gap:2px;flex-shrink:0;
}
.task-date-input{
  font-family:var(--mono);font-size:10px;color:var(--ink3);
  border:none;background:transparent;outline:none;
  width:84px;cursor:pointer;padding:0;text-align:center;
}
.task-date-input:focus{color:var(--ink);background:var(--paper2);border-radius:3px;padding:1px 3px;}
.task-date-input::-webkit-calendar-picker-indicator{
  opacity:.4;cursor:pointer;font-size:10px;padding:0;margin:0;
}
.task-date-goto{
  font-size:11px;background:none;border:none;cursor:pointer;
  color:var(--accent);padding:1px 3px;border-radius:4px;
  opacity:0;transition:opacity .12s;line-height:1;
}
.task-row:hover .task-date-goto{opacity:1;}
.task-date-goto:hover{background:var(--accent-l);}


/* ── TASK NODES ── */
.node-section{
  border:1px solid var(--rule);border-radius:10px;
  overflow:hidden;margin-bottom:8px;
}
.node-header{
  display:flex;align-items:center;gap:7px;
  padding:9px 12px;background:oklch(0.965 0.014 320);
  cursor:pointer;user-select:none;transition:background .1s;
}
.node-header:hover{background:oklch(0.950 0.020 320);}
.node-collapse-icon{display:flex;align-items:center;color:var(--ink3);transition:transform .2s;flex-shrink:0;}
.node-section.collapsed .node-collapse-icon{transform:rotate(-90deg);}
.node-done-icon{display:flex;align-items:center;color:var(--ink3);flex-shrink:0;margin-right:2px;}
.node-title-input{
  font-size:13px;font-weight:600;color:var(--ink);
  border:none;background:transparent;outline:none;font-family:var(--serif);
  cursor:text;min-width:0;flex:1;width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.node-title-input:focus{background:var(--paper);border-radius:4px;padding:0 4px;}
.node-header-line{flex:1;height:1px;background:var(--rule);margin:0 6px;}
.node-progress-mini{font-size:11px;font-family:var(--mono);color:var(--accent);font-weight:700;flex-shrink:0;}
.node-count-badge{display:flex;align-items:center;gap:3px;font-size:11px;color:var(--ink3);font-family:var(--mono);}
.node-actions{display:flex;gap:4px;opacity:0;transition:opacity .12s;}
.node-header:hover .node-actions{opacity:1;}
.node-action-btn{
  font-size:10px;padding:2px 7px;border-radius:10px;
  border:1px solid var(--rule2);background:var(--paper);
  cursor:pointer;color:var(--ink2);font-family:var(--sans);white-space:nowrap;
}
.node-action-btn:hover{background:var(--rule2);}
.node-action-btn.del{color:var(--red-m);border-color:var(--red-l);}
.node-action-btn.del:hover{background:var(--red-l);}
.node-no-count{
  font-size:10px;padding:2px 8px;border-radius:10px;
  border:1px solid var(--rule2);background:transparent;
  cursor:pointer;color:var(--ink3);font-family:var(--sans);
}
.node-no-count.active{background:var(--amber-l);color:var(--amber-m);border-color:var(--amber-m);}
.node-body{padding:8px 0;background:var(--paper);}
.node-section.collapsed .node-body{display:none;}
.node-add-task{
  display:grid;place-items:center;
  padding:7px 12px;margin-top:4px;font-size:12px;color:var(--ink3);
  cursor:pointer;border-radius:var(--r-lg);transition:all .12s;
  border:1.5px dashed var(--rule2);width:100%;
}
.node-add-task:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-l);}

/* done zone styling */
.node-section.done-zone{border-color:var(--rule);}
.node-section.done-zone .node-header{background:var(--paper2);}
.node-section.done-zone .node-body{background:var(--paper);}
.node-section.done-zone .node-title-input{color:var(--ink3);cursor:default;pointer-events:none;}
.done-zone-empty{font-size:12px;color:var(--ink3);text-align:center;padding:12px;font-style:italic;}

/* node drag */
.node-section.node-dragging{opacity:.5;border:1px dashed var(--accent);}
.node-section.node-drag-over{border-top:2.5px solid var(--accent);}

/* task drop between nodes indicator */
.task-node-select{
  font-size:10px;padding:2px 6px;border-radius:6px;
  border:1px solid var(--rule2);background:var(--paper2);
  color:var(--ink2);cursor:pointer;font-family:var(--sans);
  flex-shrink:0;outline:none;
}


/* ── TASK ROW ── */
.task-row{
  display:grid;
  grid-template-columns:16px 18px auto 1fr auto auto 22px;
  align-items:center;gap:6px;
  padding:6px 10px;border-radius:var(--r-lg);
  border:1px solid transparent;transition:all .12s;
  cursor:pointer;margin-bottom:3px;background:transparent;
}
.task-row:hover{background:oklch(0.965 0.014 320);border-color:transparent;}
.task-row.done{opacity:.55;}
.task-row.done:hover{opacity:.85;}
/* 有說明的筆icon */
.task-note-indicator{
  display:flex;align-items:center;
  color:var(--accent);opacity:0.7;flex-shrink:0;
}
/* 日期區塊 */
.task-date-wrap{display:flex;align-items:center;gap:3px;flex-shrink:0;}
.task-date-label{
  font-size:11px;color:var(--ink3);font-family:var(--mono);
  cursor:pointer;white-space:nowrap;
  transition:color .12s;
}
.task-date-label:hover{color:var(--accent);}
.task-date-label.has-date{color:var(--ink2);}
.task-date-cal-btn{
  width:20px;height:20px;border:none;background:transparent;
  color:var(--ink3);cursor:pointer;display:grid;place-items:center;
  border-radius:5px;transition:all .12s;flex-shrink:0;padding:0;
}
.task-date-cal-btn:hover{background:var(--paper2);color:var(--accent);}
/* 刪除按鈕 hover 才顯示 */
.task-del-btn{
  width:22px;height:22px;border:none;background:transparent;
  color:var(--ink3);cursor:pointer;display:grid;place-items:center;
  border-radius:5px;transition:all .12s;flex-shrink:0;padding:0;
  opacity:0;
}
.task-row:hover .task-del-btn{opacity:1;}
.task-del-btn:hover{background:var(--rose-l);color:var(--rose);}

/* tag chips in task row */
.task-tag-chip{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:10px;font-size:10px;font-weight:500;
  white-space:nowrap;border:1.5px solid transparent;
  cursor:pointer;transition:all .1s;user-select:none;
}

/* task title – single line, max 25 chars enforced */
.task-title-input{
  flex:1;font-size:13px;font-weight:500;color:var(--ink);
  border:none;background:transparent;outline:none;font-family:var(--sans);
  line-height:1.4;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.task-row.done .task-title-input{color:var(--ink3);text-decoration:line-through;}

/* ── TASK EDIT MODAL ── */
.task-modal-overlay{display:none;position:fixed;inset:0;background:rgba(50,40,60,0.35);z-index:300;align-items:center;justify-content:center;padding:16px;}
.task-modal-overlay.open{display:flex;}
.task-modal{background:var(--paper);border-radius:20px;border:1px solid var(--rule2);width:100%;max-width:480px;box-shadow:0 20px 60px rgba(80,60,110,0.18);overflow:hidden;animation:modalIn .18s ease;}
.task-modal-header{padding:12px 16px 10px;border-bottom:1px solid var(--rule);background:linear-gradient(135deg,var(--mauve-l),var(--paper2));display:flex;align-items:center;justify-content:space-between;}
.task-modal-title{font-family:var(--serif);font-size:15px;font-weight:600;color:var(--ink);}
.task-modal-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px;max-height:65vh;overflow-y:auto;}
.task-modal-footer{padding:10px 16px 13px;display:flex;gap:6px;justify-content:flex-end;border-top:1px solid var(--rule);background:var(--paper2);}

/* node select in modal */
.task-modal-node-select{
  padding:7px 10px;border-radius:var(--r-lg);
  border:1px solid var(--rule2);background:var(--paper2);
  font-family:var(--sans);font-size:13px;color:var(--ink);outline:none;width:100%;
}
.task-modal-node-select:focus{border-color:var(--accent);}

/* tag section in modal */
.task-tag-section{display:flex;flex-direction:column;gap:6px;}
.task-tag-row{display:flex;flex-wrap:wrap;gap:5px;}
.task-tag-opt{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;
  cursor:pointer;border:1.5px solid var(--rule2);background:var(--paper2);
  color:var(--ink2);transition:all .12s;user-select:none;
}
.task-tag-opt.active{border-width:2px;}
.task-tag-add-row{display:flex;gap:6px;margin-top:2px;}
.task-tag-add-input{
  flex:1;padding:5px 9px;border-radius:var(--r);
  border:1px solid var(--rule2);background:var(--paper2);
  font-family:var(--sans);font-size:12px;color:var(--ink);outline:none;
}
.task-tag-add-input:focus{border-color:var(--accent);}
.task-tag-add-btn{
  padding:5px 12px;background:var(--accent);color:#fff;
  border:none;border-radius:var(--r);font-size:12px;cursor:pointer;font-family:var(--sans);
}


/* ── TAG CHIP MULTI-SELECT (shared by goal form + task modal) ── */
.tag-chip{
  padding:4px 10px;border-radius:20px;font-size:11px;font-weight:500;
  cursor:pointer;border:1.5px solid var(--rule);
  background:var(--paper2);transition:all .1s;user-select:none;
}
.tag-chip:hover{border-color:var(--rule2);}
.tag-chip.sel{border-width:2px;}
.tag-manager-panel{
  display:none;margin-top:8px;border:1px solid var(--rule2);
  border-radius:12px;overflow:hidden;
}


/* ── GOAL LEFT COLUMN GROUPS ── */
.goal-cat-filter-bar{
  display:flex;flex-wrap:wrap;gap:4px;
  padding:6px 10px;background:var(--paper);
  border-radius:var(--r-xl);border:1px solid var(--rule2);
  box-shadow:var(--shadow);
}
.goal-cat-filter-chip{
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;
  cursor:pointer;user-select:none;border:1.5px solid var(--rule2);
  background:var(--paper2);color:var(--ink2);transition:all .12s;
}
.goal-cat-filter-chip.active{border-width:2px;}

/* goal group section */
.goal-group{margin-bottom:4px;}
.goal-group-header{
  display:flex;align-items:center;gap:7px;
  padding:5px 4px;cursor:pointer;user-select:none;
  border-radius:var(--r);transition:background .1s;
}
.goal-group-header:hover{background:var(--paper2);}
.goal-group-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.goal-group-name{font-size:12px;font-weight:500;color:var(--ink2);white-space:nowrap;}
.goal-group-divider{flex:1;height:1px;background:var(--rule);margin:0 4px;}
.goal-group-count{font-size:11px;color:var(--ink3);font-family:var(--mono);}
.goal-group-arrow{display:flex;align-items:center;color:var(--ink3);transition:transform .2s;flex-shrink:0;}
.goal-group.collapsed .goal-group-arrow{transform:rotate(-90deg);}
.goal-group-body{padding:0 2px;display:flex;flex-direction:column;gap:4px;}
.goal-group.collapsed .goal-group-body{display:none;}


/* ── YEAR / GANTT VIEW ── */
.year-gantt-wrap{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 200px);}
.year-gantt{min-width:800px;}

/* header: week numbers */
.gantt-header{display:flex;position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:2px solid var(--rule2);}
.gantt-label-col{width:160px;flex-shrink:0;padding:4px 8px;font-size:10px;color:var(--ink3);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.gantt-weeks-row{flex:1;display:flex;position:relative;}
.gantt-month-tick{position:absolute;top:0;bottom:0;border-left:1px solid var(--rule2);pointer-events:none;}
.gantt-month-label{position:absolute;top:2px;font-size:9px;color:var(--ink3);font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding-left:3px;}
.gantt-week-tick{position:absolute;top:0;bottom:0;border-left:1px dotted var(--rule);pointer-events:none;}
.gantt-today-line{position:absolute;top:0;bottom:0;border-left:2px solid var(--rose);opacity:.6;pointer-events:none;z-index:2;}

/* goal rows */
.gantt-row{display:flex;align-items:center;border-bottom:1px solid var(--rule);min-height:32px;}
.gantt-row:hover{background:var(--paper2);}
.gantt-goal-label{width:160px;flex-shrink:0;padding:4px 8px;font-size:11px;color:var(--ink);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;}
.gantt-goal-label:hover{color:var(--accent);}
.gantt-bar-col{flex:1;position:relative;height:32px;}

/* the bar itself */
.gantt-bar{
  position:absolute;top:6px;height:20px;
  border-radius:4px;cursor:pointer;
  display:flex;align-items:center;padding:0 6px;
  font-size:10px;font-weight:500;white-space:nowrap;overflow:hidden;
  transition:filter .1s, opacity .1s;
  box-sizing:border-box;
}
.gantt-bar:hover{filter:brightness(.92);z-index:3;}

/* progress fill inside bar */
.gantt-bar-fill{
  position:absolute;top:0;left:0;bottom:0;
  border-radius:4px 0 0 4px;
  opacity:.35;
  pointer-events:none;
}

/* tooltip */
.gantt-tooltip{
  position:fixed;z-index:500;
  background:var(--ink);color:#fff;
  border-radius:10px;padding:10px 14px;
  font-size:12px;min-width:180px;
  box-shadow:0 8px 24px rgba(0,0,0,0.2);
  pointer-events:none;
  display:none;
}
.gantt-tooltip.show{display:block;}
.gantt-tooltip-title{font-weight:700;font-size:13px;margin-bottom:6px;}
.gantt-tooltip-row{display:flex;justify-content:space-between;gap:12px;font-size:11px;opacity:.85;margin-bottom:3px;}
.gantt-tooltip-btn{
  margin-top:8px;padding:5px 12px;background:var(--accent);
  color:#fff;border:none;border-radius:6px;cursor:pointer;
  font-size:11px;font-family:var(--sans);width:100%;
  pointer-events:all;
}


/* ── GOAL REMINDER BLOCK ── */
.goal-reminder-bar{display:flex;align-items:center;gap:6px;padding:7px 13px;background:var(--paper2);border-bottom:1px solid var(--rule);cursor:pointer;user-select:none;transition:background .1s;}
.goal-reminder-bar:hover{background:var(--paper3);}
.goal-reminder-arrow{font-size:10px;color:var(--ink3);transition:transform .2s;flex-shrink:0;}
.goal-reminder-arrow.open,.stats-wellness-arrow.open,.stats-fold-arrow.open{transform:rotate(90deg);}
.goal-reminder-count{font-size:10px;font-family:var(--mono);color:var(--ink3);margin-left:auto;}
.goal-reminder-body{display:flex;flex-direction:column;gap:4px;}
.goal-reminder-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--line-soft);background:var(--surface);cursor:pointer;transition:background .1s;}
.goal-reminder-item:hover{background:var(--bg-soft);}
.goal-reminder-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.goal-reminder-item-name{flex:1;font-size:14px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.goal-reminder-prog{width:56px;height:5px;background:var(--rule2);border-radius:99px;overflow:hidden;flex-shrink:0;}
.goal-reminder-prog-fill{height:100%;border-radius:99px;background:var(--cat,var(--accent));}
.goal-reminder-deadline{font-size:10px;font-family:var(--mono);color:var(--ink-3);white-space:nowrap;flex-shrink:0;}


/* ── GANTT CONTROLS BAR ── */
.gantt-controls{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;border-bottom:none;
  background:var(--paper);position:sticky;top:0;z-index:20;
}
.gantt-ctrl-btn{
  padding:4px 10px;border-radius:20px;border:1px solid var(--rule2);
  background:var(--paper2);font-size:11px;font-family:var(--sans);
  color:var(--ink2);cursor:pointer;display:flex;align-items:center;gap:4px;
  transition:background .1s;white-space:nowrap;
}
.gantt-ctrl-btn:hover{background:var(--paper3);}
.gantt-ctrl-sep{width:1px;height:16px;background:var(--rule2);margin:0 2px;flex-shrink:0;}
.gantt-sort-chip{
  padding:3px 8px;border-radius:7px;border:none;
  background:var(--paper2);font-size:10px;font-family:var(--sans);
  color:var(--ink3);cursor:pointer;transition:background .1s,color .1s;white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px;
}
.gantt-sort-chip.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.gantt-sort-chip .sort-priority-num{
  font-size:8px;background:rgba(255,255,255,.35);
  border-radius:50%;width:12px;height:12px;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;
}
.gantt-sort-chip .chip-num{font-size:9px;font-weight:700;opacity:.8;}
.gantt-divider{width:1px;height:18px;background:var(--rule2);flex-shrink:0;}


/* ── CLOUD SYNC BUTTONS ── */
.onedrive-btn{background:var(--accent-l)!important;color:var(--accent)!important;border-color:var(--accent)!important;}
.onedrive-btn:hover{background:var(--accent)!important;color:#fff!important;}

/* ── ONEDRIVE MODAL ── */
#onedrive-modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:400;display:flex;align-items:center;justify-content:center;display:none;}
#onedrive-modal.open{display:flex;}
#onedrive-modal .od-box{background:var(--paper);border-radius:var(--r-xl);padding:24px;width:340px;max-width:90vw;box-shadow:0 8px 32px rgba(0,0,0,.18);}
#onedrive-modal .od-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px;}
#onedrive-modal .od-sub{font-size:12px;color:var(--ink3);margin-bottom:16px;line-height:1.6;}
#onedrive-modal .od-input{width:100%;padding:8px 10px;border:1px solid var(--rule2);border-radius:8px;font-size:12px;font-family:var(--mono);background:var(--paper2);color:var(--ink);box-sizing:border-box;margin-bottom:10px;}
#onedrive-modal .od-row{display:flex;gap:8px;margin-top:4px;}
#onedrive-modal .od-btn{flex:1;padding:8px;border-radius:8px;border:none;font-size:13px;font-family:var(--sans);cursor:pointer;font-weight:500;}
#onedrive-modal .od-btn-primary{background:var(--accent);color:#fff;}
#onedrive-modal .od-btn-primary:hover{filter:brightness(.92);}
#onedrive-modal .od-btn-cancel{background:var(--paper2);color:var(--ink2);}
#onedrive-modal .od-status{font-size:11px;color:var(--ink3);margin-top:8px;min-height:16px;text-align:center;}


/* ── CLEAR DATA BUTTON ── */

/* ── CLEAR MODAL ── */
#clear-modal{
  position:fixed;inset:0;background:rgba(60,40,55,.32);
  z-index:450;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(2px);
}
#clear-modal.open{display:flex;}
.clear-box{
  background:var(--paper);border-radius:20px;
  padding:28px 24px 22px;width:340px;max-width:92vw;
  box-shadow:0 12px 40px rgba(80,40,60,.15);
}
.clear-box-title{
  font-size:15px;font-weight:700;color:var(--ink);
  margin-bottom:4px;display:flex;align-items:center;gap:8px;
}
.clear-box-sub{
  font-size:12px;color:var(--ink3);margin-bottom:18px;line-height:1.6;
}
.clear-options{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.clear-option{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:12px;
  border:1.5px solid var(--rule2);background:var(--paper2);
  cursor:pointer;transition:all .15s;user-select:none;
}
.clear-option:hover,.clear-option.selected{border-color:var(--rose);background:var(--rose-l);}
.clear-option-icon{font-size:18px;flex-shrink:0;width:24px;text-align:center;}
.clear-option-info{flex:1;min-width:0;}
.clear-option-label{font-size:12px;font-weight:600;color:var(--ink);}
.clear-option-desc{font-size:10px;color:var(--ink3);margin-top:1px;}
.clear-option-check{
  width:18px;height:18px;border-radius:50%;border:1.5px solid var(--rule2);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:10px;transition:all .15s;
}
.clear-option.selected .clear-option-check{
  background:var(--rose);border-color:var(--rose);color:#fff;
}
.clear-footer{display:flex;gap:8px;}
.clear-cancel-btn{
  flex:1;padding:10px;border-radius:12px;border:1.5px solid var(--rule2);
  background:var(--paper2);color:var(--ink2);font-size:13px;
  font-family:var(--sans);cursor:pointer;font-weight:500;transition:background .12s;
}
.clear-cancel-btn:hover{background:var(--paper3);}
.clear-confirm-btn{
  flex:1;padding:10px;border-radius:12px;border:none;
  background:var(--rose);color:#fff;font-size:13px;
  font-family:var(--sans);cursor:pointer;font-weight:600;transition:filter .12s;
  opacity:.5;pointer-events:none;
}
.clear-confirm-btn.ready{opacity:1;pointer-events:all;}
.clear-confirm-btn.ready:hover{filter:brightness(.92);}


/* ── STREAK DAYS BADGE ── */
.streak-days-badge{
  margin-left:auto;font-size:13px;font-family:var(--mono);
  font-weight:700;color:var(--accent);
  background:var(--accent-l);padding:3px 10px;
  border-radius:20px;white-space:nowrap;
}

/* ── WELLNESS FOLD ── */
.stats-wellness-fold{
  background:var(--paper);border-radius:var(--r-xl);
  border:1px solid var(--rule2);margin-bottom:10px;
  box-shadow:var(--shadow);overflow:hidden;
}
.stats-wellness-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;cursor:pointer;user-select:none;
  transition:background .1s;
}
.stats-wellness-header:hover{background:var(--paper2);}
.stats-wellness-arrow{font-size:10px;color:var(--ink3);transition:transform .2s;flex-shrink:0;}
.stats-wellness-title{font-size:12px;font-weight:600;color:var(--ink2);}
.stats-wellness-count{
  margin-left:auto;font-size:10px;font-family:var(--mono);
  color:var(--ink3);
}

/* wellness table */
.wellness-table{width:100%;border-collapse:collapse;font-size:11px;}
.wellness-table th{
  padding:7px 10px;text-align:left;font-size:10px;
  font-weight:700;color:var(--ink3);text-transform:uppercase;
  letter-spacing:.04em;border-bottom:1px solid var(--rule2);
  background:var(--paper2);white-space:nowrap;
}
.wellness-table td{
  padding:7px 10px;border-bottom:1px solid var(--rule);
  vertical-align:top;color:var(--ink2);line-height:1.5;
}
.wellness-table tr:last-child td{border-bottom:none;}
.wellness-table tr:hover td{background:var(--paper2);}
.wellness-score{
  font-family:var(--mono);font-weight:700;font-size:12px;
  display:inline-flex;align-items:center;gap:3px;
}
.wellness-note{font-size:10px;color:var(--ink3);margin-top:2px;}
.wellness-empty{
  padding:20px;text-align:center;
  color:var(--ink3);font-size:12px;
}


/* ── GANTT DRAG LINE ── */
.gantt-drag-line{
  position:absolute;top:0;bottom:0;
  border-left:2px solid var(--rose);
  opacity:.75;z-index:10;cursor:ew-resize;
  transition:none;
}
.gantt-drag-line::before{
  content:'';position:absolute;top:0;left:-6px;right:-6px;bottom:0;
}
.gantt-line-label{
  position:absolute;top:2px;left:4px;
  background:var(--rose);color:#fff;
  font-size:9px;font-family:var(--mono);font-weight:600;
  padding:1px 5px;border-radius:4px;white-space:nowrap;
  pointer-events:none;z-index:11;
}
.gantt-day-detail{
  padding:12px 14px;border-top:1px solid var(--rule2);
  background:var(--paper2);
}
.gantt-day-detail-title{
  font-size:12px;font-weight:700;color:var(--ink);margin-bottom:8px;
  display:flex;align-items:center;gap:8px;
}


/* ── STATS SECTION FOLD ── */
.stats-section-fold{
  margin-bottom:10px;border-radius:var(--r-xl);
  border:1px solid var(--rule2);overflow:hidden;
  box-shadow:var(--shadow);
}
.stats-fold-header{
  display:flex;align-items:center;gap:8px;
  padding:10px 14px;cursor:pointer;
  background:var(--paper);user-select:none;
  transition:background .1s;
}
.stats-fold-header:hover{background:var(--paper2);}
.stats-fold-arrow{font-size:10px;color:var(--ink3);transition:transform .2s;flex-shrink:0;}
.stats-fold-title{font-size:12px;font-weight:700;color:var(--ink2);}

/* ── CHART HOVER HIGHLIGHT ── */
.stats-cat-card{transition:box-shadow .15s,opacity .15s,transform .15s;}
.stats-cat-card.dim{opacity:.65;}
.stats-cat-card.highlight{
  box-shadow:0 0 0 2px currentColor, 0 6px 16px rgba(0,0,0,.12);
  transform:translateY(-2px) scale(1.03);
  z-index:2;position:relative;
}

.donut-legend-row{transition:opacity .15s;cursor:default;}
.donut-legend-row.dim{opacity:.55;}
.donut-legend-row.highlight{font-weight:700;opacity:1;}

circle.donut-arc{transition:opacity .15s,stroke-width .15s,filter .15s;}
circle.donut-arc.dim{opacity:.5;}
circle.donut-arc.highlight{stroke-width:14px;opacity:1;filter:drop-shadow(0 0 0 2px rgba(0,0,0,.2));}

.bar-col-wrap{transition:opacity .15s,transform .15s;}
.bar-col-wrap.dim{opacity:.55;}
.bar-col-wrap.highlight{transform:translateY(-2px);}
.bar-col-wrap.highlight .bar-rect{
  filter:brightness(.9) saturate(1.2);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.15);
  border-radius:4px 4px 0 0;
}


/* ── ACTIVITY DETAIL TABLE ── */
.act-detail-table{table-layout:fixed;width:100%;border-collapse:collapse;font-size:11px;min-width:500px;}
.act-detail-table th{
  padding:6px 20px 6px 6px;text-align:left;font-size:10px;font-weight:700;
  color:var(--ink3);text-transform:uppercase;letter-spacing:.04em;
  border-bottom:2px solid var(--rule2);background:var(--paper2);
  white-space:nowrap;position:relative;user-select:none;
  overflow:hidden;max-width:0;
}
.act-detail-table th.sortable{cursor:pointer;transition:background .1s;}
.act-detail-table th.sortable:hover{background:var(--paper3);}
.act-detail-table th.sort-active{color:var(--accent);}
/* resizable table - widths set via JS colgroup */
.act-detail-table{table-layout:fixed;width:100%;min-width:500px;}
.act-detail-table .col-flag{text-align:center;}
/* resize handle */
.col-resizer{
  position:absolute;right:0;top:0;bottom:0;width:8px;
  cursor:col-resize;user-select:none;z-index:5;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
.col-resizer::after{
  content:'';display:block;width:2px;height:60%;
  background:var(--rule2);border-radius:1px;transition:background .1s;
}
.col-resizer:hover::after,.col-resizer.dragging::after{background:var(--accent);}
.sort-btns{
  display:inline-flex;flex-direction:row;gap:2px;
  margin-left:3px;vertical-align:middle;
}
.sort-btn{
  font-size:8px;width:14px;height:14px;
  border:1px solid var(--rule2);border-radius:50%;
  background:var(--paper);color:var(--ink3);
  cursor:pointer;line-height:14px;text-align:center;
  transition:background .1s,color .1s;display:inline-flex;
  align-items:center;justify-content:center;flex-shrink:0;
}
.sort-btn:hover,.sort-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
.act-detail-table td{
  padding:6px 8px;border-bottom:1px solid var(--rule);
  vertical-align:top;color:var(--ink2);line-height:1.5;
  white-space:nowrap;
}
.act-detail-table td.col-name,
.act-detail-table td.col-desc{ white-space:normal; }
.clamp-2,.clamp-3{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
}
.clamp-2{-webkit-line-clamp:2;}
.clamp-3{-webkit-line-clamp:3;color:var(--ink3);}
.act-detail-table tr:last-child td{border-bottom:none;}
.act-detail-table tr:hover td{background:var(--paper2);}
.act-flag{display:inline-flex;gap:3px;font-size:10px;}

/* ==============================
   統計頁新版控制列樣式 (Step 2)
   ============================== */

/* 控制列 card 整體 */
#panel-stats .stats-controls-card {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--surface, var(--paper));
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-sm);
  border: none;
  margin-bottom: 12px;
}

/* 每一列：80px label + flex chips */
#panel-stats .stats-ctrl-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: flex-start;
  gap: 18px;
}

/* label 文字 */
#panel-stats .stats-ctrl-label {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3, var(--ink3));
  text-transform: uppercase;
  font-weight: 500;
  padding-top: 8px;
  min-width: unset;
  white-space: nowrap;
}

/* chips 容器 */
#panel-stats .stats-ctrl-row > div,
#panel-stats .range-presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
}

/* 時間範圍 chip（preset-btn）新版樣式 */
#panel-stats .preset-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--bg-soft, var(--paper2));
  border: none;
  font-size: 12.5px;
  color: var(--ink-2, var(--ink2));
  font-weight: 500;
  transition: all 0.15s ease;
}
#panel-stats .preset-btn:hover {
  background: var(--plum-softer);
  color: var(--ink);
}
#panel-stats .preset-btn.active {
  background: var(--plum, var(--accent));
  color: white;
  box-shadow: 0 2px 6px -2px oklch(0.5 0.08 320 / 0.4);
}

/* 統計類別 chip 新版樣式（移除小點，純底色） */
#panel-stats .stats-cat-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--bg-soft, var(--paper2));
  border: none;
  font-size: 12px;
  color: var(--ink-3, var(--ink3));
  font-weight: 500;
  transition: all 0.15s ease;
}
#panel-stats .stats-cat-chip:hover {
  background: var(--plum-softer);
  color: var(--ink);
}
#panel-stats .stats-cat-chip.active {
  background: var(--cat-soft);
  color: var(--cat);
  font-weight: 600;
  border: none;
}
/* 全部/取消全部那顆 */
#panel-stats .stats-cat-chip[data-all="true"],
#panel-stats .stats-cat-chip:first-child {
  background: var(--ink);
  color: white;
}
#panel-stats .stats-cat-chip[data-all="true"]:hover,
#panel-stats .stats-cat-chip:first-child:hover {
  background: var(--plum, var(--accent));
}

/* 摘要文字 */
#panel-stats #range-display {
  font-size: 11.5px;
  color: var(--ink-3, var(--ink3));
  padding-left: 98px;
  margin-top: -4px;
}

/* 隱藏「圖表顯示」那列 checkbox（新版移除） */
#panel-stats .stats-ctrl-row:has(#chart-cards),
#panel-stats .stats-ctrl-row:has(.chart-toggle-chip) {
  display: none;
}

/* 分隔線 */
#panel-stats .stats-ctrl-divider {
  height: 1px;
  background: var(--line, var(--rule));
  margin: 2px 0;
}

/* Step 2 修正：統計類別 chip 小點隱藏 */
#panel-stats .stats-cat-chip .chip-check {
  display: none;
}

/* 「全部/取消全部」第一顆 chip 黑底白字 */
#panel-stats #stats-cat-chips .stats-cat-chip:first-child {
  background: var(--ink);
  color: white;
  border: none;
}
#panel-stats #stats-cat-chips .stats-cat-chip:first-child:hover {
  background: var(--plum, var(--accent));
}

/* Step 2：自訂日期 inline 容器放在 range-presets 同一行 */
#panel-stats .stats-ctrl-row:has(.range-presets) .stats-ctrl-row > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
#panel-stats #stats-custom-inline {
  margin-left: 4px;
}

/* 隱藏統計頁控制列多餘的分隔線 */
#panel-stats .stats-ctrl-divider {
  display: none;
}

/* ==============================
   統計頁新版折疊區樣式 (Step 3)
   ============================== */

/* 折疊區外框 */
#panel-stats .stats-wellness-fold,
#panel-stats .stats-section-fold {
  background: var(--surface, var(--paper));
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-sm);
  border: none;
  margin-bottom: 12px;
  overflow: hidden;
}

/* 折疊區 header 整列 */
#panel-stats .stats-wellness-header,
#panel-stats .stats-fold-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 16px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
#panel-stats .stats-wellness-header:hover,
#panel-stats .stats-fold-header:hover {
  background: var(--bg-soft, var(--paper2));
}

/* 箭頭 chevron */
#panel-stats .stats-wellness-arrow,
#panel-stats .stats-fold-arrow {
  color: var(--ink-3, var(--ink3));
  display: inline-flex;
  transition: transform 0.2s ease;
  font-size: 12px;
  transform: rotate(-90deg);
}
#panel-stats .stats-wellness-arrow.open,
#panel-stats .stats-fold-arrow.open {
  transform: rotate(0deg);
}

/* 標題文字 */
#panel-stats .stats-wellness-title,
#panel-stats .stats-fold-title {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* 右側計數 meta */
#panel-stats .stats-wellness-count,
#panel-stats #stats-act-detail-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3, var(--ink3));
}
#panel-stats .stats-wellness-count b,
#panel-stats #stats-act-detail-count b {
  color: var(--ink);
  font-weight: 600;
  font-family: var(--mono);
  margin-right: 2px;
}

/* 圖表分析 meta（N類・M次・Xh） */
#panel-stats #stats-charts-fold .stats-fold-header span:last-child {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-3, var(--ink3));
}

/* body 內距 */
#panel-stats #stats-wellness-body,
#panel-stats #stats-charts-body,
#panel-stats #stats-act-detail-body {
  padding: 8px 22px 22px;
}

/* 圖表分析 card 移除多餘樣式 */
#panel-stats #stats-charts-body.card {
  border-radius: 0 0 var(--radius, 14px) var(--radius, 14px);
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--line, var(--rule));
}

/* Step 3 修正：折疊箭頭用 SVG，預設朝右（收起），展開朝下 */
#panel-stats .stats-wellness-arrow,
#panel-stats .stats-fold-arrow {
  display: inline-flex;
  align-items: center;
  color: var(--ink-3, var(--ink3));
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
#panel-stats .stats-wellness-arrow.open,
#panel-stats .stats-fold-arrow.open {
  transform: rotate(0deg);
}

/* Step 4：圖表區移除框線 */
#panel-stats #stats-charts-body.card {
  border: none;
  box-shadow: none;
  background: transparent;
}
#panel-stats #stats-charts-fold {
  border: none;
  box-shadow: none;
}
#panel-stats #stats-charts-fold .stats-fold-header {
  border-radius: var(--radius, 14px) var(--radius, 14px) 0 0;
  background: var(--surface, var(--paper));
  box-shadow: var(--shadow-sm);
}
#panel-stats #stats-charts-body {
  background: var(--surface, var(--paper));
  box-shadow: var(--shadow-sm);
  border-radius: 0 0 var(--radius, 14px) var(--radius, 14px);
  padding: 16px 22px 22px;
}

/* Step 4：移除圖表分析標題列框線 */
#panel-stats #stats-charts-fold .stats-fold-header {
  box-shadow: none;
  background: var(--surface, var(--paper));
  border-bottom: 1px solid var(--line, var(--rule));
}
#panel-stats #stats-charts-fold {
  background: var(--surface, var(--paper));
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* 強制移除圖表分析標題列底線 */
#panel-stats #stats-charts-fold .stats-fold-header {
  border-bottom: none !important;
}

/* Step 5：身心狀態表格新版樣式 */
#panel-stats .mb-table {
  width: 100%;
  border-collapse: collapse;
}
#panel-stats .mb-table th,
#panel-stats .mb-table td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft, var(--rule));
  font-size: 13px;
}
#panel-stats .mb-table th:nth-child(2),
#panel-stats .mb-table td:nth-child(2),
#panel-stats .mb-table th:nth-child(3),
#panel-stats .mb-table td:nth-child(3),
#panel-stats .mb-table th:nth-child(4),
#panel-stats .mb-table td:nth-child(4) {
  width: 33%;
}
#panel-stats .mb-table th {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3, var(--ink3));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line, var(--rule2));
  background: var(--bg-2, var(--paper2));
}
#panel-stats .mb-table tbody tr {
  transition: background 0.15s ease;
  cursor: pointer;
}
#panel-stats .mb-table tbody tr:hover {
  background: var(--bg-soft, var(--paper2));
}
#panel-stats .mb-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex-wrap: nowrap;
}
#panel-stats .mb-score {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 3px 9px;
  border-radius: 99px;
  background: var(--mb-soft);
  color: var(--mb);
  font-weight: 600;
  font-size: 13px;
  font-family: var(--mono);
  white-space: nowrap;
}
#panel-stats .mb-score i {
  font-style: normal;
  font-size: 10px;
  opacity: 0.7;
  font-weight: 400;
}
#panel-stats .mb-desc {
  font-size: 12.5px;
  color: var(--ink-2, var(--ink2));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel-stats .mb-time {
  font-size: 11px;
  color: var(--ink-3, var(--ink3));
  font-family: var(--mono);
  white-space: nowrap;
  flex-shrink: 0;
}
#panel-stats .mb-date {
  font-weight: 500;
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}

/* Step 5 修正：時間靠右、表頭無底色 */
#panel-stats .mb-table th {
  background: transparent;
}
#panel-stats .mb-cell {
  width: 100%;
  justify-content: flex-start;
}
#panel-stats .mb-time {
  margin-left: 0;
}
#panel-stats .mb-table td {
  vertical-align: middle;
}

/* ==============================
   統計頁活動詳情表格新版樣式 (Step 6)
   ============================== */

/* 表格整體 */
#panel-stats .act-detail-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

/* 表頭 */
#panel-stats .act-detail-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3, var(--ink3));
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--bg-2, var(--paper2));
  position: relative;
  user-select: none;
  border-bottom: 1px solid var(--line, var(--rule2));
  white-space: nowrap;
}

/* 表頭 hover */
#panel-stats .act-detail-table th.sortable:hover {
  color: var(--ink);
  background: var(--bg-soft, var(--paper2));
}

/* 當前排序欄 */
#panel-stats .act-detail-table th.sort-active {
  color: var(--plum, var(--accent));
}

/* Step 6：排序箭頭最終版 */
#panel-stats .act-detail-table th {
  line-height: 1;
  font-size: 12px;
}
#panel-stats .act-detail-table th .th-inner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  line-height: 1;
}
#panel-stats .act-detail-table th .th-inner:hover {
  color: var(--ink);
}
#panel-stats .act-detail-table th .sort-marks {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 0.55;
  font-size: 10px;
  font-family: Arial, sans-serif;
  color: var(--ink-4, oklch(0.76 0.018 320));
  margin-left: 2px;
}
#panel-stats .act-detail-table th .sort-marks span.on {
  color: var(--plum, var(--accent));
}

/* resize handle */
#panel-stats .act-detail-table .col-resizer {
  position: absolute;
  top: 0; right: 0;
  width: 6px; height: 100%;
  cursor: col-resize;
  opacity: 0;
}
#panel-stats .act-detail-table th:hover .col-resizer {
  opacity: 1;
  background: linear-gradient(90deg, transparent, oklch(0.85 0.04 320 / 0.4));
}

/* 資料列 */
#panel-stats .act-detail-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-soft, var(--rule));
  font-size: 12px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#panel-stats .act-detail-table td.col-desc {
  white-space: normal;
  color: var(--ink-3, var(--ink3));
}
#panel-stats .act-detail-table td.col-name {
  white-space: normal;
}

/* hover */
#panel-stats .act-detail-table tbody tr:hover td {
  background: var(--bg-soft, var(--paper2));
  cursor: pointer;
}

/* 時長欄位紫色 */
#panel-stats .act-detail-table .col-dur {
  color: var(--plum, var(--accent)) !important;
  font-weight: 600;
  font-family: var(--mono);
}

/* 起訖時間 mono */
#panel-stats .act-detail-table .col-time {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink-2, var(--ink2));
}

/* 日期欄 */
#panel-stats .act-detail-table .col-date {
  font-family: var(--mono);
  font-size: 12.5px;
}

/* Step 6 修正：強制表頭底色 */
#panel-stats .act-detail-table thead th {
  background: var(--bg-2, oklch(0.975 0.009 330)) !important;
}

/* 已刪除類別專用灰色 */
:root {
  --deleted:   oklch(0.55 0.000 0);
  --deleted-l: oklch(0.92 0.000 0);
}

/* ── DRAWER NAV ── */
.page-top {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding-right: 52px;
  margin-bottom: 14px;
  min-height: 36px;
}
.page-top-brand {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-family: 'Pinyon Script', cursive;
  font-size: 1.9rem; line-height: 1;
  color: var(--plum);
  letter-spacing: 0.01em;
  pointer-events: none;
  -webkit-text-stroke: 0.4px var(--plum);
}
.topmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; line-height: 1;
}
.topmark-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--plum-softer);
  color: var(--plum); flex-shrink: 0;
}
.topmark-icon svg { width: 22px; height: 22px; }
.topmark-sep { color: var(--ink4); font-size: 15px; }
.topmark-page { color: var(--ink); font-weight: 600; letter-spacing: 0.01em; }

.menu-fab {
  position: fixed; top: 18px; left: 22px; z-index: 30;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--plum-softer); color: var(--plum);
  border: none; cursor: pointer;
  display: grid; place-items: center;
  transition: all 0.18s ease;
}
.menu-fab:hover { background: var(--plum-soft); transform: translateY(-1px); }
.menu-fab:active { transform: translateY(0); }
.menu-fab .menu-icon { display: inline-flex; flex-direction: column; gap: 3px; }
.menu-fab .menu-icon span { display: block; width: 16px; height: 1.8px; background: currentColor; border-radius: 1px; }

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: oklch(0.35 0.04 320 / 0.32);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
}
.drawer-backdrop.show { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
  width: min(380px, 92vw);
  background: var(--bg);
  border-right: 1px solid var(--rule);
  box-shadow: 12px 0 40px -16px oklch(0.4 0.05 320 / 0.22);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.drawer.open { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 18px 16px;
  background: linear-gradient(180deg, var(--plum-softer), var(--bg));
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.drawer-head-mark {
  width: 36px; height: 36px;
  color: var(--plum); display: grid; place-items: center;
  flex-shrink: 0;
}
.drawer-head-mark svg { width: 30px; height: 30px; }
.drawer-brand { font-size: 16px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }

.drawer-body {
  flex: 1; overflow-y: auto;
  padding: 14px 12px 20px;
  display: flex; flex-direction: column; gap: 18px;
}
.drawer-section { display: flex; flex-direction: column; gap: 2px; }
.drawer-section-label {
  padding: 4px 10px 6px;
  font-size: 10.5px; color: var(--ink3); letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 500;
}

.drawer-date-pill {
  display: grid; grid-template-columns: 32px 1fr 32px;
  align-items: center; gap: 4px;
  margin: 0 6px 6px;
  padding: 4px;
  background: var(--paper2);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.ddp-arrow {
  width: 28px; height: 28px; border-radius: 7px;
  background: transparent; border: none;
  color: var(--ink3); display: grid; place-items: center;
  transition: all 0.15s ease;
}
.ddp-arrow:hover { background: var(--paper); color: var(--plum); }
.ddp-main {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 5px 8px; border-radius: 7px;
  background: transparent; border: none;
  color: var(--ink); font-family: inherit;
  transition: background 0.15s ease; cursor: default;
}
.ddp-num { font-size: 14.5px; font-weight: 600; color: var(--plum); letter-spacing: -0.01em; font-family: var(--mono); }
.ddp-sep { color: var(--ink4); font-size: 11px; }
.ddp-wd  { font-size: 13px; color: var(--ink2); }
.ddp-wk  { font-size: 11px; color: var(--ink3); padding: 1px 6px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); font-family: var(--mono); }

.drawer-chips { display: flex; gap: 6px; margin: 0 6px 2px; }
.drawer-chip {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 10px; border-radius: 8px;
  background: transparent; border: 1px solid var(--rule);
  color: var(--ink2); font-size: 12.5px; font-weight: 500;
  transition: all 0.15s ease; cursor: pointer; font-family: var(--sans);
}
.drawer-chip:hover { background: var(--plum-softer); border-color: var(--plum-soft); color: var(--plum); }
.drawer-chip svg { width: 13px; height: 13px; }

.drawer-item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 8px;
  background: transparent; border: none;
  color: var(--ink); font-size: 13.5px; text-align: left;
  text-decoration: none;
  transition: all 0.12s ease; width: 100%; cursor: pointer; font-family: var(--sans);
}
.drawer-item:hover { background: var(--plum-softer); }
.drawer-item.active { background: var(--plum-soft); color: var(--plum); }
.drawer-item.active .drawer-item-title { font-weight: 600; }
.drawer-item .di-icon {
  width: 20px; height: 20px;
  display: grid; place-items: center; flex-shrink: 0;
  color: var(--ink3);
}
.drawer-item:hover .di-icon,
.drawer-item.active .di-icon { color: var(--plum); }
.drawer-item.danger { color: var(--red-m); }
.drawer-item.danger .di-icon { color: var(--red-m); }
.drawer-item.danger:hover { background: var(--red-l); }
.drawer-item-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 500; color: inherit; }
.drawer-item-meta { font-size: 11px; color: var(--ink3); margin-left: auto; flex-shrink: 0; font-family: var(--mono); }
.drawer-item-wrap { display: flex; align-items: center; gap: 2px; }
.drawer-view-toggle-btn {
  width: 28px; height: 28px; border-radius: 7px;
  background: transparent; border: none;
  color: var(--ink3); display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0;
  transition: all 0.15s ease;
}
.drawer-view-toggle-btn:hover { background: var(--plum-softer); color: var(--plum); }
.drawer-view-toggle-btn.open svg { transform: rotate(180deg); }
.drawer-view-toggle-btn svg { transition: transform 0.2s ease; }

.drawer-foot {
  padding: 10px 18px 14px;
  font-size: 10.5px; color: var(--ink3);
  border-top: 1px solid var(--rule);
  background: var(--bg);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

@media (max-width: 820px) {
  .menu-fab { top: 12px; right: 14px; width: 34px; height: 34px; }
  .topmark-icon { width: 34px; height: 34px; }
}
@media (max-width: 520px) {
  .menu-fab { top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 9px; }
  .menu-fab .menu-icon span { width: 14px; }
  .topmark-icon { width: 32px; height: 32px; border-radius: 9px; }
  .topmark-icon svg { width: 19px; height: 19px; }
}

/* ── 日誌頁手機版響應式 ── */
@media (max-width: 600px) {

  /* 1. Hero 上下排列 */
  .log-hero {
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px;
  }
  .log-hero-stats {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }
  .log-stat-card {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
  }

  /* 2. 日期+副標題並排單行 */
  .log-hero-left {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  .log-hero-date {
    font-size: 20px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .log-hero-sub {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin-top: 0;
    flex-wrap: nowrap;
  }
  /* 隱藏距週末及其分隔點（第4、5、6個子元素） */
  .log-hero-sub span:nth-child(4),
  .log-hero-sub span:nth-child(5),
  .log-hero-sub span:nth-child(6) {
    display: none;
  }
  .log-hero-sub span {
    font-size: 11px;
    white-space: nowrap;
  }

  /* 時間軸標頭 */
  .bj-header {
    flex-wrap: nowrap;
    padding: 10px 14px;
    gap: 6px;
  }
  .bj-header-title {
    white-space: nowrap;
    flex: 1;
  }
  .bj-add-btn {
    white-space: nowrap;
    font-size: 10px;
    padding: 3px 7px;
  }
  .bj-add-btn-light {
    padding: 4px 8px;
    font-size: 11px;
    gap: 3px;
    white-space: nowrap;
  }
  .bj-add-btn-light svg {
    width: 11px;
    height: 11px;
  }
  #tl-count {
    font-size: 11px;
    margin-right: 4px;
  }
}

/* ── 日曆月視圖手機版 ── */
@media (max-width: 600px) {

  .app {
    padding: 10px 10px 80px;
  }

  /* 導覽列縮小 */
  .cal-nav {
    background: var(--paper);
    margin: 0 -10px;
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .cal-nav-center {
    position: relative;
    left: auto;
    transform: none;
    flex: 1;
    justify-content: center;
  }
  .cal-head-left { gap: 8px; }
  .cal-head-right { gap: 6px; }
  .cal-month-num { font-size: 22px !important; }
  .cal-month-zh, .cal-year { font-size: 11px; }
  .cal-view-toggle { display: none; }
  #cal-stat-notes, #cal-stat-acts { display: none; }

  /* 月曆格子縮小 */
  .month-grid {
    grid-auto-rows: minmax(56px, auto);
  }
  .cal-day {
    min-height: 56px;
    padding: 4px 3px;
    overflow: hidden;
    min-width: 0;
    width: 100%;
  }
  .cal-cat-pill {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cal-dayname {
    font-size: 9px;
    padding: 5px 0 !important;
    letter-spacing: 0.05em;
  }
  .cal-day-num {
    font-size: 11px;
    width: 20px;
    height: 20px;
  }
  .cal-day.today .cal-day-num {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
  .cal-day-row {
    height: 20px;
    margin-bottom: 2px;
  }
  .cal-day-goal {
    font-size: 9px;
    padding: 1px 4px;
  }

  /* 膠囊標籤縮小 */
  .cal-cat-pill {
    font-size: 9px;
    padding: 1px 4px;
  }
  .cal-day-cats {
    gap: 1px;
  }

  /* 詳情面板全寬 */
  .cal-layout {
    grid-template-columns: 1fr;
  }
  .cal-detail-panel {
    position: static;
    width: 100%;
    max-height: none;
  }

  /* 顯示管理彈窗修正（手機版固定在詳情卡上方） */
  .manage-pop {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    right: auto;
    width: 280px;
    z-index: 200;
  }
  /* 類別篩選換行 */
  #cat-filter-wrap {
    padding: 10px 12px;
    gap: 6px;
  }

  /* 手機版月曆格子固定高度 */
  .month-grid {
    grid-auto-rows: calc(20px + 5 * 18px + 10px);
  }
  .cal-day {
    overflow: hidden;
  }
  .cal-day-cats-mobile {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 1px;
  }
  .cal-cat-pill-mobile {
    display: block;
    padding: 0px 4px;
    border-radius: 99px;
    background: var(--cat-soft);
    color: var(--cat);
    font-size: 9px;
    line-height: 1.7;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }
  .cal-day.selected {
    box-shadow: none;
  }
  /* 類別篩選膠囊縮小 */
  #cat-filter-wrap .cat-chip,
  #cat-filter-chips .cat-chip {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 20px;
  }
  #cat-filter-wrap {
    gap: 4px;
    padding: 8px 10px;
  }

  /* 週視圖卡片隱藏圖釘 */
  .week-entry svg { display: none; }

  /* 週視圖類別篩選膠囊縮小 */
  #cat-filter-wrap {
    padding: 8px 10px;
    gap: 4px;
  }
  #cat-filter-wrap span {
    font-size: 9px !important;
    padding: 2px 6px !important;
    border-radius: 20px !important;
  }

  /* 週視圖窄卡片標題單行省略 */
  .week-entry { min-width: 0; }
  .week-entry-inner { min-width: 0; }
  .week-entry-name {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }
}

/* ── 規劃頁手機版子任務列 ── */
@media(max-width:700px){
  .task-row {
    grid-template-columns: 18px 16px 1fr 28px !important;
    grid-template-rows: auto auto !important;
    row-gap: 3px !important;
    padding: 6px 4px !important;
  }
  .task-drag-handle { display: none !important; }
  .task-check { grid-column: 1 !important; grid-row: 1 !important; }
  .task-note-indicator:empty { display: none !important; }
  .task-note-indicator:not(:empty) { grid-column: 2 !important; grid-row: 1 !important; }
  .task-row:not(:has(.task-note-indicator svg)) .task-title-input {
    grid-column: 2 / span 2 !important;
  }
  .task-title-input {
    grid-column: 3 !important; grid-row: 1 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }
  .task-date-wrap {
    grid-column: 4 !important; grid-row: 1 !important;
    width: auto !important; opacity: 1 !important; overflow: visible !important;
    justify-content: flex-end !important;
  }
  .task-edit-btn { display: none !important; }
  .task-del-btn { display: none !important; }

  /* 有日期或有標籤：第二行 */
  .task-row:has(.task-tag-chip) .task-tags-wrap,
  .task-row:has(.task-date-label.has-date) .task-tags-wrap {
    grid-column: 1 / span 3 !important; grid-row: 2 !important;
    justify-content: flex-start !important;
  }
  .task-row:has(.task-tag-chip) .task-date-wrap,
  .task-row:has(.task-date-label.has-date) .task-date-wrap {
    grid-column: 4 !important; grid-row: 2 !important;
  }

  /* 無日期無標籤：單行 */
  .task-row:not(:has(.task-tag-chip)):not(:has(.task-date-label.has-date)) {
    grid-template-rows: auto !important;
  }
  .task-row:not(:has(.task-tag-chip)):not(:has(.task-date-label.has-date)) .task-tags-wrap {
    display: none !important;
  }

  /* 節點操作按鈕手機版常駐顯示 */
  .node-actions {
    opacity: 1 !important;
  }
  .node-action-btn {
    border: none !important;
    background: transparent !important;
    padding: 2px 4px !important;
  }
  .node-no-count {
    border: none !important;
    background: transparent !important;
    padding: 2px 4px !important;
  }
}


/* 時間軸新增選單 */
.tl-add-wrap { position: relative; }
.tl-add-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--paper);
  border-radius: 10px;
  box-shadow: 0 8px 24px -4px oklch(0.4 0.05 320 / 0.14);
  padding: 4px;
  min-width: 130px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tl-add-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 7px;
  border: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink2);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.tl-add-menu-item:hover {
  background: var(--paper2);
  color: var(--ink);
}

/* 貓掌印花背景 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg width='400' height='320' viewBox='0 0 400 320' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(59.04,19.04) scale(0.08)'%3E%3Cpath fill='%239d7fa8' d='M205.116,153.078c31.534,11.546,69.397-12.726,84.58-54.209c15.174-41.484,1.915-84.462-29.614-96.001c-31.541-11.53-69.4,12.735-84.582,54.218C160.325,98.57,173.584,141.548,205.116,153.078z'/%3E%3Cpath fill='%239d7fa8' d='M85.296,219.239c32.987-2.86,56.678-40.344,52.929-83.75c-3.757-43.391-33.545-76.253-66.532-73.409c-32.984,2.869-56.674,40.36-52.921,83.759C22.53,189.23,52.313,222.091,85.296,219.239z'/%3E%3Cpath fill='%239d7fa8' d='M342.196,217.768c28.952,17.017,70.552-0.073,92.926-38.154c22.374-38.106,17.041-82.758-11.915-99.774c-28.951-17.001-70.56,0.097-92.93,38.178C307.905,156.117,313.245,200.768,342.196,217.768z'/%3E%3Cpath fill='%239d7fa8' d='M497.259,262.912c-18.771-27.271-63.07-29.379-98.954-4.694c-35.892,24.701-49.762,66.822-30.996,94.101c18.766,27.27,63.069,29.38,98.954,4.686C502.143,332.312,516.021,290.191,497.259,262.912z'/%3E%3Cpath fill='%239d7fa8' d='M304.511,268.059c-3.58-24.773-18.766-47.366-43.039-58.824c-24.268-11.45-51.365-8.807-72.758,4.169c-23.646,14.35-38.772,33.096-59.138,41.29c-20.363,8.193-77.4-16.209-112.912,48.278c-25.081,45.548-2.057,103.128,44.962,125.315c35.738,16.864,64.023,14.981,84.788,24.774c20.762,9.793,37.29,32.83,73.025,49.692c47.018,22.188,106.1,3.362,125.315-44.957c27.206-68.407-27.897-96.922-34.522-117.85C303.613,319.021,308.47,295.426,304.511,268.059z'/%3E%3C/g%3E%3Cg transform='translate(99.04,79.04) scale(0.08)'%3E%3Cpath fill='%239d7fa8' d='M205.116,153.078c31.534,11.546,69.397-12.726,84.58-54.209c15.174-41.484,1.915-84.462-29.614-96.001c-31.541-11.53-69.4,12.735-84.582,54.218C160.325,98.57,173.584,141.548,205.116,153.078z'/%3E%3Cpath fill='%239d7fa8' d='M85.296,219.239c32.987-2.86,56.678-40.344,52.929-83.75c-3.757-43.391-33.545-76.253-66.532-73.409c-32.984,2.869-56.674,40.36-52.921,83.759C22.53,189.23,52.313,222.091,85.296,219.239z'/%3E%3Cpath fill='%239d7fa8' d='M342.196,217.768c28.952,17.017,70.552-0.073,92.926-38.154c22.374-38.106,17.041-82.758-11.915-99.774c-28.951-17.001-70.56,0.097-92.93,38.178C307.905,156.117,313.245,200.768,342.196,217.768z'/%3E%3Cpath fill='%239d7fa8' d='M497.259,262.912c-18.771-27.271-63.07-29.379-98.954-4.694c-35.892,24.701-49.762,66.822-30.996,94.101c18.766,27.27,63.069,29.38,98.954,4.686C502.143,332.312,516.021,290.191,497.259,262.912z'/%3E%3Cpath fill='%239d7fa8' d='M304.511,268.059c-3.58-24.773-18.766-47.366-43.039-58.824c-24.268-11.45-51.365-8.807-72.758,4.169c-23.646,14.35-38.772,33.096-59.138,41.29c-20.363,8.193-77.4-16.209-112.912,48.278c-25.081,45.548-2.057,103.128,44.962,125.315c35.738,16.864,64.023,14.981,84.788,24.774c20.762,9.793,37.29,32.83,73.025,49.692c47.018,22.188,106.1,3.362,125.315-44.957c27.206-68.407-27.897-96.922-34.522-117.85C303.613,319.021,308.47,295.426,304.511,268.059z'/%3E%3C/g%3E%3Cg transform='translate(259.04,139.04) scale(0.08)'%3E%3Cpath fill='%239d7fa8' d='M205.116,153.078c31.534,11.546,69.397-12.726,84.58-54.209c15.174-41.484,1.915-84.462-29.614-96.001c-31.541-11.53-69.4,12.735-84.582,54.218C160.325,98.57,173.584,141.548,205.116,153.078z'/%3E%3Cpath fill='%239d7fa8' d='M85.296,219.239c32.987-2.86,56.678-40.344,52.929-83.75c-3.757-43.391-33.545-76.253-66.532-73.409c-32.984,2.869-56.674,40.36-52.921,83.759C22.53,189.23,52.313,222.091,85.296,219.239z'/%3E%3Cpath fill='%239d7fa8' d='M342.196,217.768c28.952,17.017,70.552-0.073,92.926-38.154c22.374-38.106,17.041-82.758-11.915-99.774c-28.951-17.001-70.56,0.097-92.93,38.178C307.905,156.117,313.245,200.768,342.196,217.768z'/%3E%3Cpath fill='%239d7fa8' d='M497.259,262.912c-18.771-27.271-63.07-29.379-98.954-4.694c-35.892,24.701-49.762,66.822-30.996,94.101c18.766,27.27,63.069,29.38,98.954,4.686C502.143,332.312,516.021,290.191,497.259,262.912z'/%3E%3Cpath fill='%239d7fa8' d='M304.511,268.059c-3.58-24.773-18.766-47.366-43.039-58.824c-24.268-11.45-51.365-8.807-72.758,4.169c-23.646,14.35-38.772,33.096-59.138,41.29c-20.363,8.193-77.4-16.209-112.912,48.278c-25.081,45.548-2.057,103.128,44.962,125.315c35.738,16.864,64.023,14.981,84.788,24.774c20.762,9.793,37.29,32.83,73.025,49.692c47.018,22.188,106.1,3.362,125.315-44.957c27.206-68.407-27.897-96.922-34.522-117.85C303.613,319.021,308.47,295.426,304.511,268.059z'/%3E%3C/g%3E%3Cg transform='translate(299.04,199.04) scale(0.08)'%3E%3Cpath fill='%239d7fa8' d='M205.116,153.078c31.534,11.546,69.397-12.726,84.58-54.209c15.174-41.484,1.915-84.462-29.614-96.001c-31.541-11.53-69.4,12.735-84.582,54.218C160.325,98.57,173.584,141.548,205.116,153.078z'/%3E%3Cpath fill='%239d7fa8' d='M85.296,219.239c32.987-2.86,56.678-40.344,52.929-83.75c-3.757-43.391-33.545-76.253-66.532-73.409c-32.984,2.869-56.674,40.36-52.921,83.759C22.53,189.23,52.313,222.091,85.296,219.239z'/%3E%3Cpath fill='%239d7fa8' d='M342.196,217.768c28.952,17.017,70.552-0.073,92.926-38.154c22.374-38.106,17.041-82.758-11.915-99.774c-28.951-17.001-70.56,0.097-92.93,38.178C307.905,156.117,313.245,200.768,342.196,217.768z'/%3E%3Cpath fill='%239d7fa8' d='M497.259,262.912c-18.771-27.271-63.07-29.379-98.954-4.694c-35.892,24.701-49.762,66.822-30.996,94.101c18.766,27.27,63.069,29.38,98.954,4.686C502.143,332.312,516.021,290.191,497.259,262.912z'/%3E%3Cpath fill='%239d7fa8' d='M304.511,268.059c-3.58-24.773-18.766-47.366-43.039-58.824c-24.268-11.45-51.365-8.807-72.758,4.169c-23.646,14.35-38.772,33.096-59.138,41.29c-20.363,8.193-77.4-16.209-112.912,48.278c-25.081,45.548-2.057,103.128,44.962,125.315c35.738,16.864,64.023,14.981,84.788,24.774c20.762,9.793,37.29,32.83,73.025,49.692c47.018,22.188,106.1,3.362,125.315-44.957c27.206-68.407-27.897-96.922-34.522-117.85C303.613,319.021,308.47,295.426,304.511,268.059z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 400px 320px;
  background-repeat: repeat;
}