:root{
    --bg:#121316; --panel:#1a1d20; --panel2:#202428; --line:#2b2f33;
    --chalk:#efeee9; --dim:#969ca3;
    --red:#e23b3f; --yellow:#e8b44a; --green:#4e9b6b;
    --disp:"Futura","Avenir Next Condensed","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --jp:"Hiragino Sans","Yu Gothic","Noto Sans JP",system-ui,sans-serif;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0; padding:0;}
  body{
    background:var(--bg); color:var(--chalk); font-family:var(--jp);
    font-size:15px; line-height:1.6; min-height:100vh;
    padding:14px 14px 40px; max-width:520px; margin:0 auto;
    overscroll-behavior:none;
  }
  button{font-family:var(--jp); touch-action:manipulation; user-select:none; -webkit-user-select:none; cursor:pointer; border:none; color:inherit; background:none;}

  header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
  .brand{font-family:var(--disp); font-weight:800; font-size:24px; letter-spacing:.04em;}
  .brand em{color:var(--red); font-style:normal;}
  .chip{
    font-family:var(--mono); font-size:11px; padding:5px 12px; border-radius:20px;
    background:var(--panel); border:1px solid var(--line); color:var(--dim); font-weight:600;
  }
  .chip.st-armed{color:var(--yellow); border-color:var(--yellow);}
  .chip.st-count{color:#fff; background:var(--red); border-color:var(--red);}
  .chip.st-rest{color:var(--green); border-color:var(--green);}
  .chip.st-q{color:var(--yellow); border-color:var(--yellow);}

  /* ---- オキニ行 ---- */
  .favs{display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:8px; -webkit-overflow-scrolling:touch;}
  .favs:empty{display:none; margin:0; padding:0;}
  .fav{
    flex-shrink:0; background:var(--panel); border:1px solid var(--line); border-radius:20px;
    padding:6px 12px; font-size:12px; font-weight:600; display:flex; gap:6px; align-items:center;
  }
  .fav b{font-family:var(--mono); color:var(--yellow); font-weight:600;}

  /* ---- 7アイコングリッド ---- */
  .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px;}
  .gbtn{
    aspect-ratio:1/1; border-radius:16px; background:var(--panel); border:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
    touch-action:none; position:relative;
  }
  .gbtn:active{background:var(--panel2);}
  .gbtn .sub{font-family:var(--mono); font-size:10px; color:var(--dim); line-height:1;}
  .gbtn.cur::after{
    content:''; position:absolute; left:22%; right:22%; bottom:7px; height:3px;
    border-radius:2px; background:var(--red);
  }
  .gbtn.mic{
    grid-column:span 2; aspect-ratio:auto; background:var(--red); border-color:var(--red);
    flex-direction:row; gap:8px; font-size:15px; font-weight:700; color:#fff;
  }
  .gbtn.mic .sub{color:rgba(255,255,255,.8); font-size:11px;}
  .gbtn.mic.sub2{background:var(--panel); border-color:var(--line); color:var(--chalk);}
  .gbtn.mic.rest2{background:var(--green); border-color:var(--green);}
  .gbtn.mic.pulse2{animation:micpulse 1.2s infinite;}
  @keyframes micpulse{50%{box-shadow:0 0 0 6px rgba(226,59,63,.25);}}

  /* ---- ステージ ---- */
  .stage{
    background:var(--panel); border:1px solid var(--line); border-radius:14px;
    padding:16px 18px 18px; margin-bottom:12px; text-align:center;
  }
  .stghead{font-size:13px; font-weight:600; color:var(--dim);}
  .stghead b{color:var(--chalk);}
  .count{font-family:var(--disp); font-weight:800; font-size:112px; line-height:.95; min-height:100px; letter-spacing:.02em;}
  .count.idle{font-size:26px; color:var(--dim); padding:36px 0; font-weight:600; letter-spacing:.12em;}
  .count.pulse{animation:pulse .3s ease-out;}
  @keyframes pulse{0%{transform:scale(1.1); color:var(--red);}100%{transform:scale(1);}}
  .tally{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; min-height:30px; margin-top:6px;}
  .tally svg{width:30px; height:30px;}
  .tally line{stroke:var(--chalk); stroke-width:11; stroke-linecap:square; opacity:.92;}
  .subline{font-family:var(--mono); font-size:12px; color:var(--dim); margin-top:8px;}
  .subline b{color:var(--chalk);}
  .msg{font-size:13px; color:var(--dim); margin-top:6px; min-height:20px;}
  .msg.warn{color:var(--yellow);}

  /* ---- フロー選択(モーダルオーバーレイ) ---- */
  #flowOv{
    position:fixed; inset:0; background:rgba(10,11,13,.55); backdrop-filter:blur(6px);
    visibility:hidden; opacity:0; z-index:50; touch-action:none;
    transition:opacity .18s ease, visibility 0s linear .18s;
  }
  #flowOv.show{visibility:visible; opacity:1; transition:opacity .18s ease;}
  .fanchor{
    position:absolute; left:16px; top:14px; display:flex; align-items:center; gap:10px;
    font-size:15px; font-weight:700; opacity:0; transition:opacity .2s .12s;
  }
  #flowOv.show .fanchor{opacity:1;}
  .fpanel{
    position:absolute; left:10px; right:10px; top:76px; max-width:500px; margin:0 auto;
    background:var(--panel); border:1px solid var(--line); border-radius:18px;
    padding:14px 14px 12px; box-shadow:0 10px 40px rgba(0,0,0,.55);
    transform-origin:top center;
    transform:translateY(-18px) scale(.97); opacity:.6;
    transition:transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .18s ease;
  }
  #flowOv.show .fpanel{transform:none; opacity:1;}
  .fclose{position:absolute; right:8px; top:6px; color:var(--dim); font-size:16px; padding:6px 10px; z-index:1;}
  .fhint{
    text-align:center; font-family:var(--mono); font-size:10px; color:var(--dim);
    margin:2px 30px 10px;
  }
  .fgrid{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-content:start;
    overflow-y:auto; max-height:52vh; -webkit-overflow-scrolling:touch;
  }
  @keyframes cardIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
  .fcard{animation:cardIn .22s ease both;}
  .fgrid.cols3{grid-template-columns:repeat(3, minmax(0,1fr));}
  .fcard{
    min-width:0;
    display:flex; align-items:center; justify-content:flex-start; gap:8px;
    background:var(--panel); border:1.5px solid var(--line); border-radius:14px;
    padding:0 12px; min-height:62px; font-size:14px; font-weight:600; text-align:left;
    transition:transform .08s, border-color .08s, background .08s;
  }
  .fgrid.cols3 .fcard{justify-content:center; font-family:var(--mono); font-size:17px; padding:0;}
  .fcard .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .fcard .star{color:var(--dim); font-size:16px; padding:4px 2px;}
  .fcard .star.on{color:var(--yellow);}
  .fcard.hot{
    transform:scale(1.05); border-color:var(--red); background:#2a1b1c; z-index:1;
  }
  .gclone{pointer-events:none; display:flex; align-items:center; justify-content:center;
    background:var(--panel); border:1px solid var(--line); border-radius:16px;}
  .ffree{display:none; gap:8px; margin-top:10px;}
  .ffree.show{display:flex;}
  .ffree input{
    flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--chalk);
    border-radius:10px; padding:12px; font-size:14px; font-family:var(--jp); min-width:0;
  }
  .ffree button{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:0 16px; font-size:14px;}

  /* ---- カスタム重量モーダル ---- */
  #dialOv{
    position:fixed; inset:0; background:rgba(10,11,13,.88); backdrop-filter:blur(3px);
    display:none; align-items:center; justify-content:center; z-index:55; padding:20px;
  }
  #dialOv.show{display:flex;}
  .dialCard{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:18px; width:100%; max-width:360px;}
  .wbig{font-family:var(--disp); font-weight:800; font-size:48px; text-align:center; line-height:1;}
  .wbig small{font-size:16px; color:var(--dim); font-weight:600;}
  .dial{
    height:56px; margin:14px 0; border-radius:8px; background:var(--panel2);
    border:1px solid var(--line); position:relative; overflow:hidden; touch-action:none; cursor:ew-resize;
  }
  .dial .ticks{position:absolute; inset:0; background-image:repeating-linear-gradient(90deg, #3a3f45 0 2px, transparent 2px 16.7px);}
  .dial .needle{position:absolute; left:50%; top:0; bottom:0; width:2px; background:var(--red);}
  .dial .hint{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
    font-family:var(--mono); font-size:9px; color:var(--dim); padding-bottom:3px; pointer-events:none;}
  .dialCard .ok{width:100%; padding:13px; border-radius:10px; background:var(--red); color:#fff; font-size:15px; font-weight:700;}

  /* ---- 質問シート ---- */
  .sheetOv{
    position:fixed; inset:0; background:rgba(10,11,13,.88); backdrop-filter:blur(3px);
    display:none; flex-direction:column; justify-content:flex-end; z-index:60; padding:12px;
  }
  .sheetOv.show{display:flex;}
  .qCard{background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px 18px; text-align:center;}
  .qText{font-size:17px; font-weight:600; margin-bottom:18px; line-height:1.5;}
  .qZone{
    position:relative; width:150px; height:150px; margin:0 auto 12px;
    border-radius:50%; background:var(--red); color:#fff;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    font-size:22px; font-weight:700;
  }
  .qZone:active{transform:scale(.96);}
  .qZone svg{position:absolute; inset:-8px; width:166px; height:166px; transform:rotate(-90deg);}
  .qZone circle{fill:none; stroke:var(--yellow); stroke-width:5; stroke-linecap:round;}
  .qZone small{font-size:11px; font-weight:400; opacity:.85; margin-top:2px;}
  .qHint{font-family:var(--mono); font-size:11px; color:var(--dim);}

  /* ---- ログ ---- */
  .loghead{display:flex; justify-content:space-between; align-items:center; margin:16px 2px 8px;}
  .loghead h2{font-family:var(--disp); font-weight:800; font-size:18px; letter-spacing:.05em; margin:0;}
  .loghead button{background:var(--panel); border:1px solid var(--line); color:var(--dim); border-radius:6px; padding:6px 12px; font-family:var(--mono); font-size:11px;}
  .setcard{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:8px;}
  .setcard .row1{display:flex; align-items:baseline; gap:10px;}
  .setcard .num{font-family:var(--disp); font-weight:800; font-size:20px; color:var(--red);}
  .setcard .ex{font-size:14px; font-weight:600;}
  .setcard .wt{font-family:var(--mono); font-size:12px; color:var(--dim); margin-left:auto;}
  .setcard .row2{display:flex; align-items:center; gap:12px; margin-top:6px; font-family:var(--mono); font-size:12px; color:var(--dim); flex-wrap:wrap;}
  .setcard .reps{font-size:15px; color:var(--chalk); font-weight:600;}
  .setcard .grind{color:var(--yellow);}
  .setcard .bars{display:flex; align-items:flex-end; gap:3px; height:24px; margin-top:8px;}
  .setcard .bar{width:10px; background:var(--dim); border-radius:2px 2px 0 0; opacity:.7;}
  .setcard .bar.slow{background:var(--yellow); opacity:1;}
  .setcard .memo{margin-top:8px; font-size:12px; color:var(--yellow); border-left:2px solid var(--yellow); padding-left:8px; opacity:.9;}
  .setcard .fix{display:flex; gap:6px; margin-top:10px;}
  .setcard .fix button{background:var(--panel2); border:1px solid var(--line); color:var(--chalk); border-radius:6px; padding:5px 12px; font-family:var(--mono); font-size:12px;}
  .empty{color:var(--dim); font-size:13px; text-align:center; padding:16px 0;}

  /* ---- 開発モード ---- */
  details.dev{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin-top:14px; font-size:13px;}
  details.dev summary{cursor:pointer; color:var(--dim); font-family:var(--mono); font-size:12px; user-select:none;}
  .devgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px;}
  .devgrid button{padding:10px 8px; border-radius:8px; font-size:13px; background:var(--panel2); border:1px solid var(--line);}
  .meter-lbl{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10px; color:var(--dim); margin:12px 0 4px;}
  canvas#meter{width:100%; height:30px; display:block; border-radius:6px; background:var(--panel2); border:1px solid var(--line);}
  .srow{display:grid; grid-template-columns:110px 1fr 52px; gap:10px; align-items:center; margin-top:10px;}
  .srow label{font-size:12px; color:var(--dim);}
  .srow input[type=range]{width:100%; accent-color:var(--red);}
  .srow .sval{font-family:var(--mono); font-size:12px; text-align:right;}
  .srow.chk{grid-template-columns:110px 1fr;}
  .srow input[type=checkbox]{accent-color:var(--red); width:18px; height:18px;}
  #dbg{font-family:var(--mono); font-size:11px; color:var(--yellow); line-height:1.9; word-break:break-all; margin-top:10px;}

  /* ---- 選択・コールアウト禁止(ドラッグ操作ゾーン) ---- */
  .grid, .gbtn, .gbtn *, #flowOv, #flowOv *{
    user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  }
  #flowOv{overscroll-behavior:contain;}
  .fgrid.sym .fcard{justify-content:center; font-family:var(--mono); font-size:18px; padding:0;}
  .fcard.plus{color:var(--red);}
  .fcard.minus{color:var(--dim);}
  .fcard.wide{grid-column:span 2; justify-content:center; color:var(--chalk); font-size:14px; font-family:var(--jp);}

  /* ---- WUトグル ---- */
  .stgtop{display:flex; align-items:center; justify-content:center; gap:10px;}
  .wu{font-family:var(--mono); font-size:11px; padding:3px 12px; border:1px solid var(--line); border-radius:12px; color:var(--dim); font-weight:600;}
  .wu.on{color:#121316; background:var(--yellow); border-color:var(--yellow); font-weight:700;}

  /* ---- 感覚入力(◯△✕) ---- */
  .fbrow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
  .fbrow .lbl{font-size:13px; font-weight:600; text-align:left; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .fbrow .opts{display:flex; gap:8px; flex-shrink:0;}
  .fbv{
    width:46px; height:46px; border-radius:50%; background:var(--panel2);
    border:1.5px solid var(--line); font-size:18px; color:var(--dim);
  }
  .fbv.on{background:var(--red); border-color:var(--red); color:#fff;}
  .painTgl{
    width:100%; padding:10px; border-radius:10px; background:var(--panel2);
    border:1px solid var(--line); color:var(--dim); font-size:13px; margin:4px 0 8px;
  }
  .painTgl.on{background:#3a2a15; border-color:var(--yellow); color:var(--yellow); font-weight:700;}
  .fbdone{
    width:100%; padding:13px; border-radius:10px; background:var(--red); color:#fff;
    font-size:15px; font-weight:700; margin-top:2px;
  }
  .fbrest{font-family:var(--mono); font-size:11px; color:var(--dim); font-weight:400;}
  .fbwHead{font-size:13px; font-weight:600; margin:6px 0 8px; text-align:left;}
  .fbwHead b{color:var(--yellow); font-family:var(--mono);}
  .fbwHead span{color:var(--dim); font-size:11px; font-weight:400;}
  .fbwRow{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; margin-bottom:10px;}
  .fbwChip{
    padding:10px 0; border-radius:8px; background:var(--panel2); border:1.5px solid var(--line);
    font-family:var(--mono); font-size:13px; font-weight:600; color:var(--chalk);
  }
  .fbwChip.on{background:var(--red); border-color:var(--red); color:#fff;}
  .endex{
    width:100%; padding:12px; border-radius:12px; margin-bottom:12px;
    background:transparent; border:1.5px dashed var(--line); color:var(--dim); font-size:14px; font-weight:600;
  }
  .endex:active{border-color:var(--green); color:var(--green);}

  .menubar{
    width:100%; padding:12px; border-radius:12px; margin-bottom:10px;
    background:var(--panel); border:1px solid var(--line); color:var(--chalk);
    font-size:14px; font-weight:600;
  }
  .menubar:active{border-color:var(--red);}
  #menuList{display:grid; grid-template-columns:1fr; gap:8px;}
  #menuList .fbwChip{text-align:left; padding:12px 14px; font-family:var(--jp); font-size:14px;}
  #menuList .fbwChip.done{opacity:.55; border-color:var(--green); color:var(--green); background:var(--panel2);}

  .foot{font-size:11px; color:var(--dim); line-height:1.7; margin-top:14px;}

  #toast{
    position:fixed; left:50%; bottom:20px; transform:translateX(-50%) translateY(90px);
    background:var(--panel2); border:1px solid var(--line); color:var(--chalk);
    padding:10px 16px; border-radius:8px; font-size:13px; max-width:90%;
    transition:transform .25s; z-index:99;
  }
  #toast.show{transform:translateX(-50%) translateY(0);}

/* ---- リポジトリ適合版で追加(インラインstyle排除用) ---- */
.hdrgrp{display:flex; gap:8px; align-items:center;}
.cardL{text-align:left;}
.titleC{text-align:center;}
.mt12{margin-top:12px;}
.fbslide{width:100%; accent-color:var(--red); margin-bottom:10px;}
.mbase{font-family:var(--mono); color:var(--yellow); font-weight:600;}