.cd { --cd-bg:#fff; --cd-fill:#f2f2f7; --cd-sub:#8e8e93; --cd-blue:#0a84ff; --cd-sep:rgba(60,60,67,.18); color:#1c1c1e; }
.cd * { box-sizing:border-box; }
.cd-top { background:var(--cd-bg); border-radius:14px; padding:12px; }
.cd-stage { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cd-stage figure { margin:0; text-align:center; }
.cd-stage figcaption { font-size:.78rem; color:var(--cd-sub); margin-top:2px; }
.cd-svg { width:100%; height:auto; display:block; background:linear-gradient(#fbfbfd,#f1f1f6); border-radius:12px; }
.cd-legacy { margin:8px 0 0; color:#8a5a00; background:#fff6e0; border-radius:9px; padding:8px 10px; font-size:.88rem; }
.cd-legacy:empty { display:none; }
.cd-extra { margin-top:8px; font-weight:600; color:#1a7f37; min-height:1em; }
.cd-ai { margin-top:10px; border-top:.5px solid var(--cd-sep); padding-top:10px; }
.cd-pics { display:grid; grid-template-columns:1fr; gap:10px; }
.cd-pics figure { margin:0; }
.cd-pics img { width:100%; height:auto; border-radius:12px; cursor:zoom-in; display:block; }
.cd-pics figcaption { font-size:.78rem; color:var(--cd-sub); text-align:center; margin-top:2px; }
.cd-airow { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.cd-btn { flex:1 1 180px; border:0; border-radius:12px; padding:12px 14px; font-size:1rem; font-weight:600; background:var(--cd-blue); color:#fff; cursor:pointer; font-family:inherit; }
.cd-btn.sec { background:#e5e5ea; color:#1c1c1e; }
.cd-btn[disabled] { opacity:.45; cursor:default; }
.cd-msg { color:#c1121f; margin:6px 0 0; min-height:0; }
.cd-msg:empty { display:none; }
.cd-hint { color:var(--cd-sub); font-size:.82rem; margin:6px 0 4px; }
.cd-hist { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; }
.cd-hist button { border:0; padding:0; background:none; flex:none; cursor:pointer; }
.cd-hist img { width:64px; height:64px; object-fit:cover; border-radius:8px; display:block; }
.cd-ideas { margin-top:12px; }
.cd-ideas h3, .cd-sec h3 { font-size:.8rem; text-transform:uppercase; letter-spacing:.02em; color:var(--cd-sub); font-weight:600; margin:0 0 8px 4px; }
.cd-ideas { min-width:0; }
.cd-strip { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scroll-snap-type:x mandatory; }
.cd-idea { flex:0 0 132px; border:0; background:var(--cd-bg); border-radius:12px; padding:6px; text-align:left; cursor:pointer; scroll-snap-align:start; font-family:inherit; }
.cd-idea img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:8px; display:block; }
.cd-idea span { display:block; font-size:.8rem; margin-top:4px; line-height:1.2; }
.cd-form { margin-top:12px; display:grid; gap:12px; }
.cd-sec { background:var(--cd-bg); border-radius:14px; padding:12px; }
.cd-sec h4 { font-size:.88rem; margin:12px 0 6px; font-weight:600; }
.cd-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cd-chip { display:inline-flex; align-items:center; gap:6px; border:1.5px solid transparent; background:var(--cd-fill); color:#1c1c1e; border-radius:999px; padding:7px 12px; font-size:.92rem; cursor:pointer; font-family:inherit; max-width:100%; }
.cd-chip span { overflow-wrap:anywhere; text-align:left; }
.cd-chip small { color:#1a7f37; font-weight:600; }
.cd-chip.on { background:#e3f0ff; border-color:var(--cd-blue); color:#0040a8; }
.cd-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); gap:8px; }
.cd-tile { position:relative; border:2px solid transparent; background:var(--cd-fill); border-radius:14px; padding:0 0 8px; cursor:pointer; text-align:left; overflow:hidden; font-family:inherit; color:#1c1c1e; transition:transform .12s, border-color .12s, box-shadow .12s; }
.cd-tile img, .cd-tile .cd-tile-sw { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.cd-tile span { display:block; font-size:.85rem; padding:6px 8px 0; line-height:1.2; overflow-wrap:anywhere; }
.cd-tile small { display:block; padding:2px 8px 0; color:#1a7f37; font-weight:600; font-size:.78rem; }
.cd-tile:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.08); }
.cd-tile.on { border-color:var(--cd-blue); box-shadow:0 0 0 3px rgba(10,132,255,.18); }
.cd-tile.on::after { content:"✓"; position:absolute; top:6px; right:6px; width:22px; height:22px; border-radius:50%; background:var(--cd-blue); color:#fff; font-size:.8rem; display:grid; place-items:center; }
.cd-sw { width:14px; height:14px; border-radius:50%; flex:none; border:1px solid rgba(0,0,0,.15); display:inline-block; }
.cd-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.cd-tab { border:0; background:var(--cd-fill); border-radius:9px; padding:7px 10px; font-size:.86rem; cursor:pointer; font-family:inherit; }
.cd-tab.on { background:#1c1c1e; color:#fff; }
.cd-stack { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.cd-stack li { display:flex; align-items:center; gap:8px; background:var(--cd-fill); border-radius:9px; padding:6px 8px; }
.cd-stack li span { flex:1; min-width:0; }
.cd-x { border:0; background:none; font-size:1.3rem; line-height:1; color:#c1121f; cursor:pointer; padding:0 4px; }
.cd-link { border:0; background:none; color:var(--cd-blue); padding:8px 0 0; cursor:pointer; font-size:.9rem; font-family:inherit; }
.cd-num { display:flex; align-items:center; gap:8px; margin-top:8px; }
.cd-num input { width:90px; border:0; background:var(--cd-fill); border-radius:9px; padding:8px 10px; font-size:16px; font-family:inherit; }
.cd-step { display:flex; align-items:center; gap:12px; }
.cd-step button { width:40px; height:40px; border-radius:50%; border:0; background:var(--cd-fill); font-size:1.3rem; cursor:pointer; }
.cd-step b { min-width:1.5em; text-align:center; font-size:1.1rem; }
.cd-step small { color:#1a7f37; font-weight:600; }
.cd-zoom { position:fixed; inset:0; background:rgba(0,0,0,.82); z-index:100000; display:flex; align-items:center; justify-content:center; padding:16px; cursor:zoom-out; }
.cd-zoom img { max-width:100%; max-height:100%; border-radius:12px; }
.cd-rows { margin:0; padding:0; list-style:none; }
.cd-rows li { display:flex; gap:10px; padding:5px 0; border-bottom:.5px solid var(--cd-sep); font-size:.92rem; }
.cd-rows li b { flex:0 0 120px; color:var(--cd-sub); font-weight:500; }
@media (min-width:900px) {
  .cd.cd-wide { display:grid; grid-template-columns:minmax(300px,420px) minmax(0,1fr); gap:14px; align-items:start; }
  .cd.cd-wide > * { min-width:0; }
  .cd.cd-wide .cd-top { position:sticky; top:12px; grid-row:1 / span 2; }
  .cd.cd-wide .cd-ideas, .cd.cd-wide .cd-form { margin-top:0; }
}