:root{
    --paper:#EDE7D6;
    --paper-deep:#E3DBC5;
    --ink:#2B2620;
    --ink-soft:#5C5648;
    --paddy:#3E5C3A;
    --paddy-light:#6E8C5C;
    --gold:#C89B3C;
    --gold-deep:#A97F27;
    --indigo:#2E4057;
    --rust:#A8542E;
    --card:#F6F2E7;
    --line:#D8CFB8;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:#1c1a16;
    font-family:'Noto Sans JP', sans-serif;
    color:var(--ink);
    display:flex;
    justify-content:center;
    padding:32px 12px;
    min-height:100vh;
  }
  .stage{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
  }
  .stage-label{
    color:#8a8474;
    font-size:12px;
    letter-spacing:.15em;
    font-family:'Zen Kaku Gothic New',sans-serif;
  }
  .phone{
    width:375px;
    max-width:92vw;
    height:780px;
    background:var(--paper);
    border-radius:38px;
    border:8px solid #100f0d;
    box-shadow:0 30px 60px rgba(0,0,0,.5);
    overflow:hidden;
    position:relative;
    display:flex;
    flex-direction:column;
  }
  .statusbar{
    height:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 22px;
    font-size:12px;
    font-weight:600;
    color:var(--ink);
    flex-shrink:0;
  }
  .screen{
    flex:1;
    overflow-y:auto;
    display:none;
    padding-bottom:12px;
  }
  .screen.active{display:block;}

  /* ---------- Header ---------- */
  .topbar{
    padding:6px 20px 16px;
    background:linear-gradient(180deg, var(--paper) 0%, var(--paper) 100%);
    position:sticky;
    top:0;
    z-index:5;
  }
  .topbar .eyebrow{
    font-size:11px;
    letter-spacing:.2em;
    color:var(--paddy-light);
    font-weight:700;
    font-family:'Zen Kaku Gothic New',sans-serif;
  }
  .topbar h1{
    font-family:'Shippori Mincho', serif;
    font-size:26px;
    font-weight:700;
    margin:2px 0 0;
    color:var(--ink);
  }
  .topbar .sub{
    font-size:12px;
    color:var(--ink-soft);
    margin-top:4px;
  }
  .topbar-back{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--ink-soft);
    margin-bottom:6px;
    cursor:pointer;
  }

  /* ---------- Variety cards (home) ---------- */
  .list{padding:4px 16px 90px;}
  .vcard{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px 16px 14px;
    margin-bottom:12px;
    position:relative;
    overflow:hidden;
    cursor:pointer;
  }
  .vcard::before{
    content:"";
    position:absolute;
    left:0;top:0;bottom:0;
    width:5px;
    background:var(--cat-color, var(--paddy));
  }
  .vcard-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
  }
  .vcard-name{
    font-family:'Shippori Mincho', serif;
    font-size:18px;
    font-weight:700;
  }
  .vcard-cat{
    font-size:10px;
    font-weight:700;
    padding:3px 9px;
    border-radius:999px;
    background:var(--cat-color, var(--paddy));
    color:#fff;
    letter-spacing:.05em;
  }
  .vcard-dates{
    display:flex;
    gap:14px;
    margin-top:10px;
    font-size:11px;
    color:var(--ink-soft);
  }
  .vcard-dates b{
    display:block;
    color:var(--ink);
    font-size:12px;
    font-weight:600;
  }
  .growthbar{
    margin-top:12px;
  }
  .growthbar-track{
    height:8px;
    border-radius:5px;
    background:#DDD5BB;
    overflow:hidden;
    position:relative;
  }
  .growthbar-fill{
    height:100%;
    border-radius:5px;
    background:linear-gradient(90deg, var(--paddy) 0%, var(--paddy-light) 45%, var(--gold) 100%);
  }
  .growthbar-meta{
    display:flex;
    justify-content:space-between;
    margin-top:6px;
    font-size:11px;
    color:var(--ink-soft);
  }
  .growthbar-meta .est{
    font-weight:700;
    color:var(--gold-deep);
  }
  .vcard-empty{
    margin-top:10px;
    font-size:11.5px;
    color:var(--rust);
    background:#F3E4DB;
    border-radius:8px;
    padding:6px 10px;
    display:inline-block;
  }
  .fab{
    position:absolute;
    right:18px;
    bottom:82px;
    width:50px;height:50px;
    border-radius:50%;
    background:var(--paddy);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 18px rgba(62,92,58,.4);
    font-size:24px;
    z-index:6;
  }

  /* ---------- Detail screen ---------- */
  .hero-plant{
    margin:0 16px 4px;
    background:linear-gradient(160deg, var(--indigo) 0%, #24344a 100%);
    border-radius:18px;
    padding:20px;
    color:#F0EDE2;
    position:relative;
    overflow:hidden;
  }
  .hero-plant .vname{
    font-family:'Shippori Mincho', serif;
    font-size:22px;
    font-weight:700;
  }
  .hero-plant .vcat{
    font-size:11px;
    opacity:.75;
    margin-top:2px;
  }
  .hero-gdd{
    margin-top:18px;
    display:flex;
    align-items:baseline;
    gap:8px;
  }
  .hero-gdd .num{
    font-family:'Shippori Mincho', serif;
    font-size:36px;
    font-weight:700;
    color:var(--gold);
  }
  .hero-gdd .unit{
    font-size:13px;
    opacity:.8;
  }
  .hero-gdd .goal{
    font-size:12px;
    opacity:.65;
    margin-left:auto;
  }
  .hero-track{
    margin-top:10px;
    height:10px;
    background:rgba(255,255,255,.15);
    border-radius:6px;
    overflow:hidden;
  }
  .hero-track-fill{
    height:100%;
    background:linear-gradient(90deg, var(--paddy-light), var(--gold));
    border-radius:6px;
  }
  .hero-estimate{
    margin-top:14px;
    font-size:12.5px;
    background:rgba(200,155,60,.18);
    border:1px solid rgba(200,155,60,.4);
    border-radius:10px;
    padding:8px 12px;
    display:flex;
    justify-content:space-between;
  }
  .hero-estimate b{
    color:var(--gold);
    font-family:'Shippori Mincho', serif;
    font-size:15px;
  }

  .timeline{
    margin:20px 16px 4px;
  }
  .timeline h2, .section-title{
    font-family:'Shippori Mincho', serif;
    font-size:14px;
    font-weight:700;
    color:var(--ink-soft);
    letter-spacing:.05em;
    margin:0 0 10px;
  }
  .tl-row{
    display:flex;
    gap:12px;
    padding:9px 0;
    border-bottom:1px dashed var(--line);
    align-items:center;
  }
  .tl-row:last-child{border-bottom:none;}
  .tl-dot{
    width:9px;height:9px;border-radius:50%;
    background:var(--paddy);
    flex-shrink:0;
  }
  .tl-dot.pending{background:transparent;border:1.5px dashed #B8AF95;}
  .tl-label{font-size:12.5px;color:var(--ink-soft);width:64px;flex-shrink:0;}
  .tl-date{font-size:13.5px;font-weight:600;}
  .tl-date.empty{color:#B8AF95;font-weight:400;}
  .tl-edit{
    margin-left:auto;
    font-size:11px;
    color:var(--indigo);
    border:1px solid var(--indigo);
    border-radius:999px;
    padding:3px 10px;
  }

  .chart-card{
    margin:20px 16px 4px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:16px;
    padding:16px;
  }
  .chart-legend{
    display:flex;
    gap:14px;
    font-size:10.5px;
    color:var(--ink-soft);
    margin-bottom:8px;
  }
  .dotline{display:flex;align-items:center;gap:5px;}
  .dotline i{width:8px;height:8px;border-radius:50%;display:inline-block;}

  .diary{
    margin:20px 16px 100px;
  }
  .diary-item{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:10px 12px;
    margin-bottom:8px;
    font-size:12.5px;
  }
  .diary-item .d-date{
    font-size:11px;
    color:var(--ink-soft);
    font-weight:700;
    margin-bottom:3px;
  }
  .diary-add{
    text-align:center;
    font-size:12.5px;
    color:var(--paddy);
    border:1.5px dashed var(--paddy-light);
    border-radius:12px;
    padding:12px;
    font-weight:600;
  }

  /* ---------- Settings ---------- */
  .set-section{margin:18px 16px;}
  .set-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:14px 16px;
    margin-bottom:10px;
  }
  .set-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .set-row + .set-row{
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--line);
  }
  .set-k{font-size:13px;color:var(--ink-soft);}
  .set-v{font-size:13.5px;font-weight:700;}
  .set-v.link{color:var(--indigo);}
  .set-note{font-size:10.5px;color:#9c9683;margin-top:2px;}
  .chip-btn{
    font-size:11px;
    padding:5px 12px;
    border-radius:999px;
    border:1px solid var(--indigo);
    color:var(--indigo);
    font-weight:600;
  }
  .variety-master-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    border-bottom:1px solid var(--line);
  }
  .variety-master-row:last-child{border:none;}
  .vm-name{font-size:13px;font-weight:600;}
  .vm-cat{font-size:10px;color:var(--ink-soft);}
  .vm-gdd{
    font-size:12.5px;
    color:var(--gold-deep);
    font-weight:700;
    background:#F3E9D2;
    padding:4px 10px;
    border-radius:8px;
  }

  /* ---------- Tab bar ---------- */
  .tabbar{
    position:absolute;
    left:0;right:0;bottom:0;
    height:66px;
    background:var(--paper-deep);
    border-top:1px solid var(--line);
    display:flex;
    z-index:10;
  }
  .tab{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    color:#9c9683;
    font-size:10.5px;
    font-weight:600;
    cursor:pointer;
  }
  .tab.active{color:var(--paddy);}
  .tab svg{width:22px;height:22px;}

/* ---------- v0.3 追加分: フォーム・モーダル・状態表示 ---------- */
.form-field{margin-bottom:14px;}
.form-field label{
  display:block;
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:4px;
  font-weight:600;
}
.form-field input, .form-field select, .form-field textarea{
  width:100%;
  font-family:'Noto Sans JP', sans-serif;
  font-size:14px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
}
.form-field textarea{resize:vertical; min-height:60px;}
.form-actions{
  display:flex;
  gap:10px;
  margin-top:16px;
}
.btn{
  flex:1;
  text-align:center;
  padding:11px;
  border-radius:10px;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  border:none;
}
.btn-primary{background:var(--paddy); color:#fff;}
.btn-secondary{background:transparent; color:var(--ink-soft); border:1px solid var(--line);}

.modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(28,26,22,.55);
  display:flex;
  align-items:flex-end;
  z-index:20;
}
.modal-overlay.hidden{display:none;}
.modal-sheet{
  width:100%;
  max-height:88%;
  overflow-y:auto;
  background:var(--paper);
  border-radius:20px 20px 0 0;
  padding:20px 20px 28px;
}
.modal-sheet h3{
  font-family:'Shippori Mincho', serif;
  font-size:17px;
  margin:0 0 14px;
}

.state-msg{
  margin:24px 16px;
  padding:16px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--line);
  font-size:13px;
  color:var(--ink-soft);
  text-align:center;
}
.state-msg.error{color:var(--rust); border-color:#E3B7A3; background:#F3E4DB;}

.yield-summary{
  display:flex;
  justify-content:space-between;
  margin:8px 16px 0;
  padding:12px 14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  font-size:12.5px;
}
.yield-summary b{
  display:block;
  font-size:15px;
  color:var(--gold-deep);
  font-family:'Shippori Mincho', serif;
}