:root{
    --bg:#f6f4ef;
    --card:#ffffff;
    --ink:#33312e;
    --sub:#726f68;
    --accent:#5b7f6e;
    --accent-dark:#3f5c4e;
    --accent-soft:#e4ece7;
    --warn:#c07b4f;
    --line:#e7e3da;
    --radius:16px;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; font-family:-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
    background:var(--bg); color:var(--ink); line-height:1.6;
  }
  .wrap{max-width:760px;margin:0 auto;padding:28px 20px 80px;}
  header.top{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:24px;
  }
  header.top h1{font-size:18px;margin:0;font-weight:600;color:var(--accent-dark);display:flex;align-items:center;gap:8px;}
  header.top h1 .brand-icon{width:26px;height:26px;flex-shrink:0;}
  nav.tabs{display:flex; gap:6px;}
  nav.tabs button{
    border:none;background:transparent;color:var(--sub);font-size:13px;padding:6px 10px;
    border-radius:20px;cursor:pointer;
  }
  nav.tabs button.active{background:var(--accent-soft);color:var(--accent-dark);font-weight:600;}
  .card{
    background:var(--card); border-radius:var(--radius); padding:26px 24px; margin-bottom:18px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04); border:1px solid var(--line);
  }
  .card h2{margin-top:0;font-size:20px;color:var(--accent-dark);}
  .card h3{font-size:15px;color:var(--ink);margin-bottom:6px;}
  .sub{color:var(--sub);font-size:14px;}
  .progress{display:flex;gap:4px;margin-bottom:22px;}
  .progress div{flex:1;height:4px;border-radius:2px;background:var(--line);}
  .progress div.done{background:var(--accent);}
  .options{display:flex;flex-direction:column;gap:8px;margin:16px 0;}
  .opt{
    border:1px solid var(--line); border-radius:12px; padding:12px 16px; cursor:pointer;
    background:#fff; transition:all .15s; font-size:14.5px;
  }
  .opt:hover{border-color:var(--accent);}
  .opt.selected{border-color:var(--accent); background:var(--accent-soft); font-weight:600;}
  textarea, input[type=text], input[type=date]{
    width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 12px;
    font-size:14px; font-family:inherit; color:var(--ink); background:#fdfcfa;
  }
  textarea{resize:vertical;min-height:70px;}
  button.btn{
    background:var(--accent); color:#fff; border:none; padding:11px 22px; border-radius:24px;
    font-size:14.5px; cursor:pointer; font-weight:600;
  }
  button.btn:hover{background:var(--accent-dark);}
  button.btn.ghost{
    background:transparent; color:var(--accent-dark); border:1px solid var(--accent);
  }
  button.btn.ghost:hover{background:var(--accent-soft);}
  button.btn:disabled{background:#c9c6bd;cursor:not-allowed;}
  .row{display:flex; justify-content:space-between; align-items:center; margin-top:20px; gap:10px;}
  .row.end{justify-content:flex-end;}
  .badge{
    display:inline-block;background:var(--accent-soft);color:var(--accent-dark);
    font-size:12px; padding:3px 10px; border-radius:12px; margin-right:6px; margin-bottom:6px;
  }
  .slider-wrap{margin:20px 0;}
  input[type=range]{width:100%;accent-color:var(--accent);}
  .slider-label{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);margin-top:4px;}
  .method-pick{
    border:1.5px solid var(--line); border-radius:14px; padding:16px 18px; margin-bottom:12px; cursor:pointer;
  }
  .method-pick.selected{border-color:var(--accent); background:var(--accent-soft);}
  .method-pick h4{margin:0 0 4px; font-size:15.5px;}
  .method-pick .book{font-size:12.5px;color:var(--warn);margin-bottom:6px;}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0;}
  .grid3 textarea{min-height:56px;font-size:13px;}
  .grid3 .center{background:var(--accent-soft);font-weight:600;}
  .stack-row{display:flex;gap:8px;margin-bottom:8px;align-items:center;}
  .stack-row span{white-space:nowrap;font-size:13px;color:var(--sub);}
  .day-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;}
  .day-card.today{border-color:var(--accent); background:#fbfdfb;}
  .day-card .dhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:13px;color:var(--sub);}
  .day-card label.chk{display:flex;align-items:center;gap:6px;font-size:13px;margin-top:6px;}
  .history-item{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;}
  .history-item .hh{display:flex;justify-content:space-between;font-size:13px;color:var(--sub);}
  .score-compare{display:flex;gap:16px;margin-top:8px;}
  .score-box{flex:1;background:var(--accent-soft);border-radius:10px;padding:10px;text-align:center;}
  .score-box .num{font-size:22px;font-weight:700;color:var(--accent-dark);}
  .score-box .lbl{font-size:11px;color:var(--sub);}
  .empty{color:var(--sub);font-size:14px;text-align:center;padding:40px 0;}
  .multi-hint{font-size:12px;color:var(--sub);margin-top:-8px;margin-bottom:10px;}
  .field-hint{font-size:12px;color:#b3afa6;margin:-8px 0 12px 2px;}
  .grid3 .cell-wrap{display:flex;flex-direction:column;}
  .grid3 .cell-hint{font-size:10.5px;color:#b3afa6;margin-top:2px;line-height:1.3;}
  .ikigai-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0;}
  .ikigai-petal{border-radius:28px;padding:16px 18px;}
  .ikigai-petal h3{margin:0 0 8px;font-size:14px;}
  .ikigai-petal textarea{background:rgba(255,255,255,0.6);border:none;min-height:80px;}
  .ikigai-petal .field-hint{color:inherit;opacity:0.65;}
  .petal-love{background:#fbe2da;}
  .petal-good{background:#e2ecdd;}
  .petal-need{background:#dbe7f5;}
  .petal-pay{background:#f8e9c9;}
  .ikigai-synth{border-radius:28px;padding:18px 20px;background:var(--accent-dark);color:#fff;margin-top:4px;}
  .ikigai-synth h3{margin:0 0 8px;font-size:14px;color:#fff;}
  .ikigai-synth textarea{background:rgba(255,255,255,0.15);border:none;color:#fff;min-height:70px;}
  .ikigai-synth textarea::placeholder{color:rgba(255,255,255,0.55);}
  .ikigai-synth .field-hint{color:rgba(255,255,255,0.65);}
  @media (max-width:560px){
    .ikigai-grid{grid-template-columns:1fr;}
  }
  .lib-item{border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;}
  .lib-item h3{font-size:16px;margin:0 0 2px;color:var(--accent-dark);display:flex;align-items:center;gap:8px;}
  .lib-item .book{font-size:12.5px;color:var(--warn);margin-bottom:8px;}
  .section-label{font-size:12px;font-weight:700;color:var(--accent-dark);margin-top:10px;margin-bottom:2px;}
  .note-icon{width:20px;height:20px;flex-shrink:0;}
  .note-section-label{display:flex;align-items:center;gap:6px;}
  .note-section-label .note-icon{width:16px;height:16px;}
  .lib-item-click{cursor:pointer;transition:all .15s;}
  .lib-item-click:hover{border-color:var(--accent);background:var(--accent-soft);}
  .lib-arrow{font-size:12.5px;color:var(--accent);margin-top:10px;font-weight:600;}
  .opt-wrap{margin-bottom:2px;}
  .opt-wrap .opt.has-severity{border-bottom-left-radius:0;border-bottom-right-radius:0;}
  .severity-row{
    display:flex; align-items:center; gap:10px; padding:8px 16px 10px 16px;
    background:var(--accent-soft); border-radius:0 0 12px 12px; margin-top:-9px; margin-bottom:8px;
  }
  .severity-row .sev-label{font-size:12px;color:var(--accent-dark);white-space:nowrap;}
  .severity-row input[type=range]{flex:1;}
  .severity-row .sev-val{font-size:13px;font-weight:700;color:var(--accent-dark);width:20px;text-align:center;}
  footer.note{font-size:12px;color:var(--sub);text-align:center;margin-top:20px;}
  .gate-card{max-width:420px;margin:60px auto 0;}
  .gate-card input[type=text]{margin:18px 0 14px;font-size:16px;padding:12px 14px;}
  .gate-privacy{
    background:var(--accent-soft); color:var(--accent-dark); font-size:12.5px;
    border-radius:12px; padding:10px 14px; line-height:1.5;
  }