:root{--ink:#2a2723;--sub:#6b655c;--line:#e6e0d6;--bg:#f7f4ef;--card:#fff;--accent:#2f5d46}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;font-size:16px;line-height:1.6}
.bar{background:var(--ink);color:#fff;padding:14px 16px 16px;padding-top:calc(14px + env(safe-area-inset-top));text-align:center}
.bar__brand{margin:0;font-size:13px;letter-spacing:.2em;opacity:.8}
.bar__title{margin:2px 0 4px;font-size:22px;letter-spacing:.06em}
.bar__sub{margin:0;font-size:13px;opacity:.85}
.wrap{max-width:1100px;margin:0 auto;padding:12px 16px 40px;display:grid;gap:16px}
@media (min-width:900px){.wrap{grid-template-columns:1fr 1fr;align-items:start}.stage{position:sticky;top:12px}}
.stage{background:var(--card);border-radius:14px;padding:12px;box-shadow:0 1px 0 var(--line)}
canvas{display:block;width:100%;height:auto;background:#fff;border-radius:10px}
.fit{margin:10px 0 0;font-weight:700;font-size:15px;min-height:1.6em}
.fit.good{color:var(--accent)}.fit.warn{color:#8a5a00}
.info{margin:2px 0 0;font-size:13px;color:var(--sub)}
.actions{display:flex;gap:8px;margin-top:10px}
.btn{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:12px;font:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;touch-action:manipulation}
.btn--main{background:var(--ink);color:#fff}
.panel{background:var(--card);border-radius:14px;padding:4px 16px 16px;box-shadow:0 1px 0 var(--line)}
.panel h2{font-size:17px;margin:16px 0 8px;padding-left:10px;border-left:5px solid var(--ink)}
.tabs{display:flex;gap:6px;margin-bottom:10px}
.tabs button{flex:1;min-height:44px;border:2px solid var(--line);background:#fff;border-radius:999px;font:inherit;font-weight:700;color:var(--sub);cursor:pointer}
.tabs button[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.grid{display:grid;gap:8px}
.grid--pots{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
.grid--plants{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.item{position:relative;border:2px solid var(--line);background:#fff;border-radius:12px;padding:6px 4px 6px;font:inherit;cursor:pointer;text-align:center;touch-action:manipulation}
.item img{display:block;width:100%;height:72px;object-fit:contain}
.item span{display:block;font-size:12px;line-height:1.3;margin-top:4px;color:var(--ink)}
.item small{display:block;font-size:12px;color:var(--sub)}
.item[aria-pressed="true"]{border-color:var(--ink);box-shadow:0 0 0 2px var(--ink) inset}
.badge{position:absolute;top:4px;left:4px;background:var(--accent);color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:0 7px}
.note{font-size:13px;color:var(--sub);margin:0 0 8px}
.small{font-size:12px;color:var(--sub);margin:16px 0 0}

.h-note{font-size:12px;font-weight:400;color:var(--sub);margin-left:6px}
/* スマホ: 絵を上に固定（下で選ぶと絵がすぐ変わる） */
@media (max-width:899px){
  .stage{position:sticky;top:0;z-index:5;margin:0 -16px;border-radius:0 0 14px 14px;padding:8px 12px 10px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
  canvas{width:auto;max-width:100%;height:38vh;margin:0 auto}
  .fit{margin-top:6px;font-size:14px}.info{font-size:12px}
  .actions .btn{min-height:44px;font-size:14px}
  .wrap{padding-top:0}
}