:root{
  --ink:#0f172a; --ink2:#334155; --ink3:#64748b; --ink4:#94a3b8;
  --line:#e2e8f0; --line2:#cbd5e1; --page:#f8fafc; --surf:#ffffff;
  --teal:#0f766e; --teal-d:#0d9488; --teal-l:#14b8a6; --teal-tint:#f0fdfa;
  --up:#0d9488; --down:#e11d48; --chan:#2563eb;
  --blue:#2563eb; --yellow:#ca8a04; --red:#dc2626;
  --mono:'SFMono-Regular',ui-monospace,'Roboto Mono',Menlo,monospace;
  --sans:'Noto Sans JP',system-ui,-apple-system,'Hiragino Kaku Gothic ProN',sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#e2e8f0;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* 画面（携帯幅・PCでは中央に寄せる） */
.app{max-width:480px;height:100dvh;margin:0 auto;background:var(--page);display:flex;flex-direction:column;
  position:relative;box-shadow:0 0 60px -20px rgba(15,23,42,.3)}
.page{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.page.hidden{display:none}
.page-info{overflow-y:auto;background:var(--page)}
/* トップ画面：チャート以外の行は潰さない。全体が入り切らなければスクロール */
.page-main{overflow-y:auto}
.page-main > *{flex:none}
.page-main > .chart-wrap{flex:1 1 auto}

/* 下部タブ */
.tabbar{flex:none;display:flex;border-top:1px solid var(--line);background:var(--surf);
  padding-bottom:env(safe-area-inset-bottom)}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;
  border:0;background:none;color:var(--ink4);font-size:10.5px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.tabbar .tab svg{width:20px;height:20px}
.tabbar .tab.active{color:var(--teal)}

/* ヘッダ */
.hd{flex:none;display:flex;align-items:center;justify-content:space-between;padding:11px 15px 8px;gap:10px}
.sym-btn{display:flex;align-items:baseline;gap:8px;border:0;background:none;padding:4px 2px;cursor:pointer;text-align:left;min-height:40px}
.sym-btn .snm{font-size:16px;font-weight:700;color:var(--ink)}
.sym-btn .scd{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink3)}
.sym-btn .chev{width:15px;height:15px;color:var(--ink4);align-self:center}
.hd-right{display:flex;align-items:center;gap:10px}
.px{font-family:var(--mono);font-size:16px;font-weight:700}
.px .pct{font-size:11px;margin-left:2px}
.chg-up{color:var(--up)} .chg-down{color:var(--down)}
.refresh{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--surf);color:var(--ink2);cursor:pointer}
.refresh:active{background:var(--page)}
.refresh svg{width:16px;height:16px}

/* 地合いバッジ */
.badge-row{padding:0 15px 8px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:600;line-height:1}
.badge .dot{width:8px;height:8px;border-radius:50%}
.badge-blue{background:#eff6ff;color:#1d4ed8}.badge-blue .dot{background:#2563eb}
.badge-yellow{background:#fefce8;color:#a16207}.badge-yellow .dot{background:#eab308}
.badge-red{background:#fef2f2;color:#b91c1c}.badge-red .dot{background:#dc2626}
.badge-note{font-size:11px;color:var(--ink3)}

/* 銘柄「今 買い場か」判定 */
.verdict{padding:0 15px 9px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;min-height:0}
.verdict:empty{display:none}
.vbadge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;line-height:1}
.vbadge .dot{width:8px;height:8px;border-radius:50%}
.vbadge-go{background:#ecfdf5;color:#0f766e}.vbadge-go .dot{background:#10b981}
.vbadge-wait{background:#f1f5f9;color:#64748b}.vbadge-wait .dot{background:#94a3b8}
.v-reco{border:1px solid var(--teal);background:var(--teal-tint);color:var(--teal);border-radius:8px;
  padding:5px 10px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:var(--sans)}
.v-reco:active{background:#dcfce7}
.v-note{font-size:10.5px;color:var(--ink4)}

/* チャート（主役・伸縮） */
.chart-wrap{flex:1 1 auto;min-height:220px;position:relative;background:var(--surf);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#chart{position:absolute;inset:0}
.draw-hint{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;
  background:rgba(15,118,110,.94);color:#fff;font-size:11.5px;font-weight:600;padding:6px 13px;border-radius:999px;
  box-shadow:0 4px 12px -4px rgba(15,118,110,.7);display:none;white-space:nowrap}
.draw-hint.on{display:block}
.tv-attr{position:absolute;right:7px;bottom:5px;z-index:6;font-size:9.5px;color:var(--ink4);text-decoration:none}
.tv-attr:hover{color:var(--teal)}

/* 凡例＋パターン線トグル */
.chart-legend{display:flex;align-items:center;gap:14px;padding:8px 15px 2px;flex-wrap:wrap}
.chart-legend .lg{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink3)}
.chart-legend .sw{width:16px;height:0;border-top-width:3px;border-top-style:solid;border-radius:2px;display:inline-block}
.chart-legend .sw-chan{border-top-color:#2563eb}
.chart-legend .sw-manual{border-top-color:#0f766e}
.toggle-pat{margin-left:auto;border:1px solid var(--line2);background:var(--surf);color:var(--ink2);
  border-radius:8px;padding:5px 10px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--sans)}
.toggle-pat.off{background:#f1f5f9;color:var(--ink4)}

/* 自分の線 管理バー */
.manual-bar{display:none;align-items:center;gap:8px;padding:8px 15px;background:#f0fdfa;border-top:1px solid var(--line)}
.manual-bar.on{display:flex;flex-wrap:wrap}
.manual-bar .mb-title{font-size:11px;font-weight:700;color:var(--teal)}
.manual-bar .mchips{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto}
.mchip{display:inline-flex;align-items:center;gap:3px;border:1px solid var(--teal-l);background:var(--surf);
  border-radius:999px;padding:3px 4px 3px 10px;font-size:11px;color:var(--teal);cursor:pointer}
.mchip.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.mchip .mlbl{font-weight:600}
.mchip .mdel{border:0;background:none;color:inherit;font-size:14px;line-height:1;width:18px;height:18px;
  border-radius:50%;cursor:pointer;opacity:.7}
.mchip .mdel:active{opacity:1}
.mb-clear{border:1px solid var(--line2);background:var(--surf);color:var(--ink3);border-radius:8px;
  padding:4px 9px;font-size:11px;cursor:pointer;font-family:var(--sans)}

/* 引き方 見出し */
.band-head{padding:10px 15px 3px;display:flex;justify-content:space-between;align-items:baseline}
.sec-t{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--ink4);margin:0}
.band-head .cnt{font-family:var(--mono);font-size:10px;color:var(--ink4)}

/* チップ横スクロール */
.chips{display:flex;gap:9px;overflow-x:auto;padding:9px 15px 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;min-width:134px;display:flex;flex-direction:column;justify-content:center;
  border:1px solid var(--line);background:var(--surf);border-radius:10px;padding:9px 12px;min-height:46px;line-height:1.25;position:relative;cursor:pointer}
.chip .cn{font-size:12.5px;font-weight:600;color:var(--ink)}
.chip .cd{font-size:10.5px;color:var(--ink3);margin-top:2px;font-family:var(--mono)}
.chip.rec{border-color:var(--teal)}
.chip.rec .cn{color:var(--teal)}
.chip.rec::after{content:'定番';position:absolute;top:-8px;right:8px;font-size:9px;font-weight:700;color:#fff;background:var(--teal);border-radius:4px;padding:1px 5px;letter-spacing:.03em}
.chip.no{opacity:.6;border-style:dashed}
.chip.no .cn{color:var(--ink3)}
.chip.no::after{content:'非推奨';position:absolute;top:-8px;right:8px;font-size:9px;font-weight:700;color:#fff;background:#94a3b8;border-radius:4px;padding:1px 5px}
.chip.na{opacity:.4}
.chip.na::after{content:'引けない';position:absolute;top:-8px;right:8px;font-size:9px;font-weight:700;color:#fff;background:#cbd5e1;border-radius:4px;padding:1px 5px}
.chip.setup{box-shadow:inset 3px 0 0 #10b981}
.chip.on{border-color:var(--teal);background:var(--teal);box-shadow:0 3px 10px -3px rgba(15,118,110,.55)}
.chip.on.setup{box-shadow:inset 3px 0 0 #6ee7b7,0 3px 10px -3px rgba(15,118,110,.55)}
.chip.on .cn,.chip.on .cd{color:#fff}
.chip.on.rec::after{background:#0b5c55}

/* プランパネル */
.plan{border-top:1px solid var(--line);background:var(--surf)}
.plan-title{padding:9px 15px 2px;font-size:11px;font-weight:700;color:var(--ink3);display:flex;justify-content:space-between;align-items:baseline}
.plan-title .pt-note{font-size:10.5px;font-weight:600;color:var(--ink3)}
.plan-title .pt-note.warn{color:#b91c1c}
.plan-title .pt-note.ok{color:var(--teal-d)}
.plan-banner{padding:8px 15px;font-size:11px;line-height:1.55;color:#92400e;background:#fffbeb;border-bottom:1px solid var(--line)}
.plan-row{display:flex;align-items:center;justify-content:space-between;padding:8px 15px;border-bottom:1px solid var(--line)}
.plan-row:last-child{border-bottom:0}
.plan-row .k{font-size:12px;color:var(--ink3)}
.plan-row .v{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--ink)}
.plan-row .v.loss{color:var(--down)} .plan-row .v.win{color:var(--up)}
.plan-row .v.muted{color:var(--ink4);font-weight:600;font-family:var(--sans);font-size:12.5px}
.plan-invalid{padding:12px 15px;font-size:12px;color:var(--ink3);line-height:1.6;border-bottom:1px solid var(--line)}

/* 描画モード切替（単線／平行チャネル） */
.draw-mode-sel{display:flex;gap:0;margin-bottom:9px;border:1px solid var(--line2);border-radius:10px;overflow:hidden}
.draw-mode-sel .dm-opt{flex:1;border:0;background:var(--surf);color:var(--ink3);font-size:12.5px;font-weight:600;
  padding:8px 0;cursor:pointer;font-family:var(--sans);min-height:38px}
.draw-mode-sel .dm-opt+.dm-opt{border-left:1px solid var(--line)}
.draw-mode-sel .dm-opt.active{background:var(--teal);color:#fff}

/* 自分で引くボタン */
.pad{padding:12px 15px}
.selfbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:12px;
  font-size:14px;font-weight:700;border:1.5px dashed var(--teal);color:var(--teal);background:var(--teal-tint);cursor:pointer}
.selfbtn svg{width:17px;height:17px}
.selfbtn.active{background:var(--teal);color:#fff;border-style:solid}
.selfbtn.active svg{color:#fff}

/* 注意書き */
.disclaimer{padding:2px 15px 20px;font-size:10.5px;color:var(--ink4);line-height:1.6;text-align:center}

/* 銘柄選択オーバーレイ */
.sheet-bg{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:40;display:none;align-items:flex-end;justify-content:center}
.sheet-bg.on{display:flex}
.sheet{width:100%;max-width:480px;max-height:80dvh;background:var(--surf);border-radius:18px 18px 0 0;display:flex;flex-direction:column;overflow:hidden}
.sheet-hd{padding:14px 16px 10px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.sheet-hd .row1{display:flex;justify-content:space-between;align-items:center}
.sheet-hd h3{margin:0;font-size:15px;font-weight:700}
.sheet-close{border:0;background:var(--page);border-radius:8px;width:30px;height:30px;font-size:16px;color:var(--ink3);cursor:pointer}
.sheet-search{width:100%;border:1px solid var(--line2);border-radius:9px;padding:9px 12px;font-size:14px;font-family:var(--sans)}
.sheet-list{overflow-y:auto;padding:4px 0}
.stk{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--line);cursor:pointer}
.stk:active{background:var(--page)}
.stk .l{display:flex;align-items:baseline;gap:9px}
.stk .l .nm{font-size:14px;font-weight:600;color:var(--ink)}
.stk .l .cd{font-family:var(--mono);font-size:11px;color:var(--ink3)}
.stk .grp{font-size:10px;color:var(--ink4);border:1px solid var(--line);border-radius:5px;padding:1px 6px}
.stk .px{font-size:13px}
.stk.sel{background:var(--teal-tint)}
.grp-h{padding:9px 16px 4px;font-size:11px;font-weight:700;color:var(--ink4);background:var(--page);position:sticky;top:0}
/* 今 買い場に近い銘柄セクション */
.grp-h.near-h{color:var(--teal);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.near-h .near-note{font-size:10px;font-weight:500;color:var(--ink4)}
.near-stk{background:#f0fdfa}
.near-reco{font-size:11px;color:var(--teal);font-weight:600;display:flex;align-items:center;gap:7px}
.near-reco .rr{font-family:var(--mono);font-size:10.5px;color:var(--ink3);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.near-empty{padding:12px 16px;font-size:12px;color:var(--ink3);line-height:1.6;background:#f8fafc;border-bottom:1px solid var(--line)}
.stk .near{font-size:10px;color:#0f766e;background:#d1fae5;border-radius:5px;padding:1px 6px;font-weight:700}

/* ===== 説明・状態ページ ===== */
.info-inner{padding:16px 15px 28px}
.info-h2{font-size:18px;font-weight:800;margin:2px 0 10px;color:var(--ink)}
.info-lead{font-size:12px;line-height:1.75;color:var(--ink2);background:var(--surf);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;margin:0 0 18px}
.info-lead b{color:var(--teal)}
.info-h3{font-size:14px;font-weight:800;color:var(--ink);margin:20px 0 4px;padding-top:6px;border-top:1px solid var(--line)}
.info-sub{font-size:11px;color:var(--ink3);line-height:1.6;margin:0 0 10px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.dot-good,.dot-warn,.dot-bad{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle}
.dot-good{background:#0d9488}.dot-warn{background:#eab308}.dot-bad{background:#dc2626}

.state-group{margin:12px 0 4px}
.state-h{font-size:12px;font-weight:700;color:var(--teal);margin:0 0 6px}
.state-list{background:var(--surf);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.state-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line)}
.state-row:last-child{border-bottom:0}
.sr-l{min-width:0;flex:1 1 auto}
.sr-name{display:block;font-size:12.5px;font-weight:700;color:var(--ink)}
.sr-mean{display:block;font-size:10.5px;color:var(--ink3);line-height:1.5;margin-top:1px}
.sr-r{flex:none;display:flex;align-items:center;gap:8px}
.sr-val{font-size:13px;font-weight:700;color:var(--ink)}
.sbadge{font-size:10px;font-weight:700;border-radius:5px;padding:2px 7px;white-space:nowrap}
.sbadge.s-good{background:#ecfdf5;color:#0f766e}
.sbadge.s-warn{background:#fefce8;color:#a16207}
.sbadge.s-bad{background:#fef2f2;color:#b91c1c}
.state-empty{padding:12px 13px;font-size:11.5px;color:var(--ink3);line-height:1.6}

/* 用語集 */
.glossary{margin:8px 0 4px;background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:4px 13px}
.glossary dt{font-size:12.5px;font-weight:700;color:var(--ink);margin-top:11px}
.glossary dd{font-size:11.5px;color:var(--ink2);line-height:1.6;margin:2px 0 11px}
.glossary dd:last-child,.glossary dt+dd{margin-bottom:11px}

/* パターン図鑑 */
.guide{display:flex;flex-direction:column;gap:9px;margin-top:8px}
.gcard{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.gcard-teiban{border-color:var(--teal-l)}
.gcard-no{border-style:dashed;opacity:.85}
.gcard .gh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.gcard .gn{font-size:13.5px;font-weight:700;color:var(--ink)}
.gcard .gtag{font-size:9.5px;font-weight:700;color:var(--ink3);background:var(--page);border:1px solid var(--line);border-radius:5px;padding:1px 7px}
.gcard .gtag.t-teiban{color:#fff;background:var(--teal);border-color:var(--teal)}
.gcard .gtag.t-no{color:#fff;background:#94a3b8;border-color:#94a3b8}
.gcard .gd{font-size:11.5px;color:var(--ink2);line-height:1.65}

/* シート追加：候補タグ・待ち行・サブ見出し */
.stk .cand{font-size:10px;color:#a16207;background:#fefce8;border-radius:5px;padding:1px 6px;font-weight:700}
.near-sub{padding:8px 16px 4px;font-size:11px;font-weight:600;color:var(--ink3);background:#f8fafc}
.near-stk.wait{background:#f8fafc}
.near-stk.wait .nm{color:var(--ink2)}
.near-stk.wait .near-reco{color:var(--ink3)}

/* ===== 使い方ガイドページ ===== */
.page-guide{overflow-y:auto;background:var(--page)}
.guide-inner{padding:16px 15px 28px}
.guide-sub{font-size:12px;color:var(--ink3);margin:0 0 14px}
.gcard2{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin:0 0 12px}
.gcard2.accent{border-color:var(--teal-l);background:var(--teal-tint)}
.gcard2.rule{border-color:#fca5a5;background:#fef2f2}
.gcard2.dont{border-color:var(--line2);background:#f8fafc}
.gc-h{font-size:14px;font-weight:800;color:var(--ink);margin:0 0 8px}
.gcard2.accent .gc-h{color:var(--teal)}
.gcard2.rule .gc-h{color:#b91c1c}
.gc-p{font-size:12.5px;line-height:1.75;color:var(--ink2);margin:0}
.gc-steps{margin:0;padding-left:0;list-style:none;counter-reset:st}
.gc-steps li{position:relative;padding:6px 0 6px 30px;font-size:12.5px;line-height:1.65;color:var(--ink2);border-bottom:1px solid var(--line);counter-increment:st}
.gc-steps li:last-child{border-bottom:0}
.gc-steps li::before{content:counter(st);position:absolute;left:0;top:6px;width:21px;height:21px;border-radius:50%;
  background:var(--teal);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--mono)}
.gcard2.rule .gc-steps li::before{background:#dc2626}
.gc-steps li b{color:var(--ink)}
.case{padding:9px 0;border-bottom:1px solid var(--line)}
.case:first-of-type{padding-top:2px}
.case:last-child{border-bottom:0;padding-bottom:0}
.case-h{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.case-tag{font-size:10px;font-weight:700;border-radius:5px;padding:2px 8px;white-space:nowrap}
.case-tag.t-wait{background:#fefce8;color:#a16207}
.case-tag.t-go{background:#ecfdf5;color:#0f766e}
.case-tag.t-skip{background:#f1f5f9;color:#64748b}
.case-tag.t-care{background:#fff7ed;color:#c2410c}
.case-tag.t-info{background:#eff6ff;color:#1d4ed8}
.case .gc-p{font-size:12px;color:var(--ink3)}
.gc-list{margin:0;padding-left:18px}
.gc-list li{font-size:12.5px;line-height:1.7;color:var(--ink2);margin-bottom:5px}
.gc-list li:last-child{margin-bottom:0}
.gc-list li b{color:var(--ink)}
.gc-dont{margin:0;padding-left:20px}
.gc-dont li{font-size:12.5px;line-height:1.7;color:var(--ink2)}
.guide-foot{font-size:10.5px;color:var(--ink4);text-align:center;line-height:1.6;margin:16px 0 0}

/* タブ3つ：携帯幅で収める */
.tabbar .tab{font-size:10px;padding:7px 0 6px}
.tabbar .tab span{white-space:nowrap}