:root{
  --bg:#05090f;--panel:#0a1520;--panel2:#0d1b28;--line:#173041;--line2:#21485c;
  --ink:#eef8f9;--ink2:#c3dade;--dim:#86a2a9;--lab:#7d98a0;
  --cyan:#3ad7e8;--cyan-soft:rgba(58,215,232,.13);
  --amber:#ffb547;--amber-soft:rgba(255,181,71,.14);
  --red:#ff5a6e;--red-soft:rgba(255,90,110,.15);
  --violet:#a98bff;--violet-soft:rgba(169,139,255,.14);
  --f-disp:"Chakra Petch","IBM Plex Sans JP",system-ui,sans-serif;
  --f-body:"IBM Plex Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink2);font-family:var(--f-body);font-size:14px;line-height:1.55;-webkit-text-size-adjust:100%}
body{background-image:linear-gradient(rgba(58,215,232,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(58,215,232,.06) 1px,transparent 1px);background-size:28px 28px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.lab{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--lab)}

/* 画面スクロール禁止: 画面の高さに収める。低い画面では余白と文字を詰める（下の @media） */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;width:100%}
.app{position:relative;max-width:480px;margin:0 auto;height:100vh;height:100dvh;overflow:hidden;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:9px}
.app>*{flex-shrink:0}

/* ヘッダー（小さく・薄く） */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.top b{font-family:var(--f-disp);letter-spacing:.14em;color:var(--dim);font-size:13px;font-weight:600}
.chip{flex-shrink:0;font-family:var(--f-mono);font-size:12px;padding:3px 9px;border:1px solid var(--amber);color:var(--amber);background:var(--amber-soft);white-space:nowrap}

/* ① 質問 */
.meta{display:flex;align-items:center;gap:8px;min-width:0}
.meta-t{font-size:12px;color:var(--dim);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kind-tag{flex-shrink:0;font-family:var(--f-mono);font-size:11px;padding:1px 7px;border:1px solid var(--dim);color:var(--ink2)}
.kind-tag.choice{border-color:var(--cyan);color:var(--cyan)}
.kind-tag.text{border-color:var(--amber);color:var(--amber)}

.qcard{position:relative;padding:14px 14px 16px;border:1px solid var(--line2);background:linear-gradient(180deg,var(--panel2),var(--panel))}
.qcard::before,.qcard::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--cyan)}
.qcard::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.qcard::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.target{display:flex;flex-direction:column;gap:1px;margin-bottom:8px}
.target b{font-size:16px;line-height:1.35;color:var(--cyan);font-weight:700}
.qcard h2{margin:0;font-size:23px;line-height:1.4;font-weight:700;color:var(--ink)}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip-i{font-size:13px;line-height:1.4;padding:3px 8px;border:1px solid var(--line2);background:var(--bg);color:var(--ink)}
.reason{margin:0;font-size:13px;line-height:1.5;color:var(--ink2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.more-row{display:flex;gap:8px}
.more{flex:1;height:40px;border:1px solid var(--line2);background:var(--panel);color:var(--ink2);font-size:14px}
.modal{position:fixed;inset:0;z-index:30;max-width:480px;margin:0 auto;display:flex;flex-direction:column;padding:10px 16px calc(14px + env(safe-area-inset-bottom,0px));background:rgba(5,9,15,.98)}
.modal[hidden]{display:none}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.modal-head b{color:var(--cyan);font-size:15px;line-height:1.35;min-width:0}
.modal-x{flex-shrink:0;width:44px;height:44px;font-size:20px;color:var(--ink2);border:1px solid var(--line2)}
.tabs{display:flex;gap:8px;margin:10px 0}
.tab{flex:1;height:44px;border:1px solid var(--line2);color:var(--dim);font-size:15px}
.tab[aria-selected="true"]{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-soft)}
.modal-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;-webkit-overflow-scrolling:touch}
.sec p{margin:2px 0 0;font-size:15px;color:var(--ink2)}
.msg{padding:9px 12px;border:1px solid var(--line2);background:var(--panel);max-width:92%}
.msg.you{align-self:flex-end;border-color:var(--amber);background:var(--amber-soft)}
.msg.claude{align-self:flex-start}
.msg .who{font-family:var(--f-mono);font-size:11px;color:var(--lab)}
.msg p{margin:2px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink)}
.filters{display:flex;gap:6px}
.fchip{flex:1;height:38px;border:1px solid var(--line2);background:var(--panel);color:var(--lab);font-size:13px;white-space:nowrap;text-decoration:line-through}
.fchip[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan);background:var(--cyan-soft);text-decoration:none}
.fchip.held{text-decoration:none}
.fchip.held[aria-pressed="true"]{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)}
.ref{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line2);background:var(--panel)}
.ref b{color:var(--cyan);font-size:15px;line-height:1.4}
.ref span{font-size:12.5px;color:var(--dim)}
.ref .ref-h{font-family:var(--f-mono);font-size:11px;color:var(--lab)}
.whywrap{position:relative}
.why{width:100%;text-align:left;font-size:12px;color:var(--dim);padding:2px 2px}
.sheet{position:absolute;left:0;right:0;top:100%;z-index:5;padding:10px 12px;border:1px solid var(--line2);background:#08121c;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.sheet p{margin:1px 0 8px;font-size:13.5px;color:var(--ink2)}
.sheet p:last-child{margin-bottom:0}

.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px;text-align:left;border:1px solid var(--line2);background:var(--panel)}
.opt .tag{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--f-disp);font-weight:700;font-size:16px;border:1px solid var(--line2);color:var(--dim)}
.opt .txt{display:flex;flex-direction:column;min-width:0;flex-grow:1}
.opt .txt b{font-size:17px;line-height:1.35;color:var(--ink)}
.opt .txt span{font-size:12px;color:var(--dim);line-height:1.4}
.opt .rec{flex-shrink:0;font-family:var(--f-mono);font-size:11px;padding:2px 7px;border:1px solid var(--cyan);color:var(--cyan);background:var(--cyan-soft)}
.opt[aria-pressed="true"]{border-color:var(--amber);background:var(--amber-soft)}
.opt[aria-pressed="true"] .tag{border-color:var(--amber);color:var(--amber)}

.free{display:flex;flex-direction:column;gap:4px;flex-shrink:1;min-height:0}
.free textarea{flex:1 1 auto;min-height:44px;width:100%;resize:none;padding:8px 12px;background:var(--bg);border:1px solid var(--line2);color:var(--ink);font:inherit;font-size:16px;line-height:1.5}
.free textarea::placeholder{color:var(--lab)}
.free.compact .lab{display:none}

.foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:2px}
.actions{display:flex;gap:10px}
.btn-sub{flex:0 0 92px;height:52px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2);color:var(--dim);font-size:15px}
.btn-main{flex:1;height:52px;border:1px solid var(--cyan);background:var(--cyan);color:var(--bg);font-size:17px;font-weight:700;letter-spacing:.06em}
.btn-main.center{display:flex;align-items:center;justify-content:center}
.btn-main[disabled]{opacity:.4;cursor:not-allowed}
.progress{display:flex;align-items:center;gap:10px}
.dots{display:flex;gap:5px;flex-shrink:0}
.dots{gap:0}
.dots .dot{padding:12px 2px;background:none}
.dots i{display:block;width:var(--dw,16px);height:4px;background:var(--line2)}
.pos{flex-shrink:0;margin-left:auto;font-family:var(--f-mono);font-size:12px;color:var(--ink2);padding:8px 10px;border:1px solid var(--line2);white-space:nowrap}
.jump-hint{margin:8px 0}
.jump-row{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;padding:6px 12px;text-align:left;border:1px solid var(--line2);background:var(--panel)}
.jump-row.cur{border-color:var(--cyan);background:var(--cyan-soft)}
.jn{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-family:var(--f-disp);font-weight:700;border:1px solid var(--line2);color:var(--dim)}
.jump-row .txt{display:flex;flex-direction:column;min-width:0;flex-grow:1}
.jump-row .txt b{font-size:15px;line-height:1.35;color:var(--ink)}
.jump-row .txt span{font-size:12px;color:var(--dim)}
.tick{flex-shrink:0;font-family:var(--f-mono);font-size:11px;color:var(--amber);border:1px solid var(--amber);padding:1px 6px}
.dots i.on{background:var(--cyan)}
.dots i.done{background:var(--amber)}
.progress span{font-family:var(--f-mono);font-size:11px;color:var(--lab);min-width:0}

.toast{position:fixed;left:16px;right:16px;bottom:calc(88px + env(safe-area-inset-bottom,0px));max-width:448px;margin:0 auto;padding:10px 12px;border:1px solid var(--cyan);background:#08202b;color:var(--ink);font-size:13px;text-align:center}

/* ② 一覧 */
.hero{display:flex;align-items:center;gap:12px;padding:2px 2px 4px}
.hero-n{font-family:var(--f-disp);font-weight:700;font-size:54px;line-height:1;color:var(--amber)}
.hero-t{display:flex;flex-direction:column}
.hero-t b{font-size:17px;color:var(--ink)}
.hero-t small{font-size:12px;color:var(--dim)}
.group{display:flex;flex-direction:column;gap:7px}
.row{display:flex;align-items:center;gap:10px;min-height:58px;padding:7px 10px;border:1px solid var(--line2);background:var(--panel)}
.row .kind{flex-shrink:0;width:38px;text-align:center;font-family:var(--f-mono);font-size:11px;padding:2px 0;border:1px solid var(--dim);color:var(--ink2)}
.row .kind.choice{border-color:var(--cyan);color:var(--cyan)}
.row .kind.text{border-color:var(--amber);color:var(--amber)}
.row .txt{display:flex;flex-direction:column;min-width:0;flex-grow:1}
.row .txt b{font-size:15px;line-height:1.35;color:var(--ink)}
.row .txt span{font-size:12px;color:var(--dim);line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .go{color:var(--dim);font-size:18px}
.badge{flex-shrink:0;font-family:var(--f-mono);font-size:11px;padding:1px 8px;border:1px solid var(--cyan);color:var(--cyan);background:var(--cyan-soft)}
.badge.red{border-color:var(--red);color:var(--red);background:var(--red-soft)}
.badge.violet{border-color:var(--violet);color:var(--violet);background:var(--violet-soft)}
.rest{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:4px;opacity:.85}
.rest-line{display:flex;align-items:baseline;gap:8px;font-size:12px;color:var(--dim)}
.rest-t{min-width:0}
.done-line{font-size:12px;color:var(--dim);text-align:center}
.empty{padding:14px;border:1px dashed var(--line2);text-align:center;color:var(--dim)}

@media (max-height:780px){
  .app{gap:6px;padding-top:8px}
  .qcard{padding:10px 12px 12px}
  .qcard h2{font-size:20px}
  .target{margin-bottom:5px}
  .opt{min-height:48px;padding:5px 10px}
  .opt .txt b{font-size:16px}
  .btn-sub,.btn-main{height:46px}
  .row{min-height:48px}
  .hero-n{font-size:44px}
}
@media (max-height:780px){
  .fchip{height:34px}
  .btn-sub{flex-basis:84px;font-size:14px}
}
@media (max-height:700px){
  .fchip{height:30px;font-size:12px}
  .dots .dot{padding:8px 2px}
  .pos{padding:6px 10px}
  .chip-i{font-size:12px;padding:2px 7px}
  .chips{margin-top:6px;gap:5px}
  .reason{-webkit-line-clamp:1}
  .more{height:36px}
  .opt .txt span,.row .txt span{display:none}
  .opt{min-height:42px}
  .row{min-height:40px;padding:4px 10px}
  .group{gap:4px}
  .hero-n{font-size:36px}
  .rest{gap:3px}
}
/* 触った反応: 押している間は少し縮む */
.opt,.btn-main,.btn-sub,.row,.why,.chip{transition:transform .08s,background-color .08s}
.opt:active,.btn-main:active,.btn-sub:active,.row:active{transform:scale(.98)}
.app{touch-action:pan-y}
/* スワイプ中に端へ出る案内 */
.swipe-hint{position:fixed;top:50%;transform:translateY(-50%);z-index:20;padding:12px 14px;font-family:var(--f-mono);font-size:14px;font-weight:600;color:var(--ink2);background:#08121c;border:1px solid var(--line2);opacity:0;pointer-events:none}
.swipe-hint.right{right:0;border-right:0}
.swipe-hint.left{left:0;border-left:0}
.swipe-hint.armed{color:var(--bg);background:var(--cyan);border-color:var(--cyan)}
/* スワイプで前後へ移るときの、横からの入り方 */
@keyframes slide-n{from{transform:translateX(28px);opacity:0}}
@keyframes slide-p{from{transform:translateX(-28px);opacity:0}}
.app.slide-n{animation:slide-n .22s ease-out}
.app.slide-p{animation:slide-p .22s ease-out}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}